{"site":{"name":"Rahman Resources","shortName":"rmnr","description":"Reusable Next.js + Convex + shadcn vertical-slice catalog. Copy-first. Production-grade.","tagline":"Rahman's library of Next.js templates.","url":"https://resource.rahmanef.com","repo":"https://github.com/rahmanef63/resource-site","author":"Rahman","authorUrl":"https://rahmanef.com","links":{"github":"https://github.com/rahmanef63/resource-site","rahmanefCom":"https://rahmanef.com","cescadesigns":"https://cescadesigns.com"}},"stack":[{"name":"Next.js 16","url":"https://nextjs.org/docs"},{"name":"React 19","url":"https://react.dev"},{"name":"TypeScript 5.6","url":"https://www.typescriptlang.org"},{"name":"Tailwind CSS 4","url":"https://tailwindcss.com"},{"name":"shadcn/ui","url":"https://ui.shadcn.com"},{"name":"Convex (self-hosted)","url":"https://docs.convex.dev/self-hosting"},{"name":"@convex-dev/auth","url":"https://labs.convex.dev/auth"},{"name":"Dokploy","url":"https://dokploy.com"},{"name":"Radix UI","url":"https://www.radix-ui.com"},{"name":"Lucide Icons","url":"https://lucide.dev"}],"features":[{"title":"Vertical-Slice Architecture","description":"Each feature owns its config, page, views, components, settings, agent, and Convex mirror. Add or remove a feature by adding or removing one folder."},{"title":"Copy-First Flow","description":"Never greenfield. Every artifact comes from a proven source project (internal kitab-core, rahmanef.com, cescadesigns, notion-clone). Edit imports, ship."},{"title":"shadcn-only UI","description":"All components are shadcn primitives or composed from them. ResponsiveDialog, DateField, FileUpload — no raw HTML buttons or dialogs."},{"title":"audit-bp Gated","description":"Best-practice auditor pulls latest Next 16 / React 19 / Convex docs via Context7 before scoring. Score ≥80 to ship."},{"title":"Dokploy in One Command","description":"si-coder skill creates the GitHub repo, pushes, configures Dokploy, sets DNS, and triggers deploy. Zero human involvement."},{"title":"Self-hosted Convex + @convex-dev/auth","description":"No Clerk. Self-hosted Convex backend in the same docker-compose. Postgres-backed for prod."},{"title":"Auto-generated Slice Docs","description":"Per-slice DEPS.md, CONTRACT.md, STATUS.md, USAGE.md generated from imports + defineFeature config."},{"title":"Cookbook + Recipes","description":"8 layout variants and 8 feature drop-ins (block editor, command palette, db views, comments, ...) ready to mount."}],"counts":{"total":69,"slice":69,"template":0,"layout":0},"resources":[{"source":"slice","slug":"image-editor","title":"Image Editor — layered raster editor","description":"A Photoshop-style raster image editor built on Konva. Layers panel (reorder, opacity, visibility, lock, 16 blend modes), free transform (move/scale/rotate/flip via a Transformer), image + text + shape + paint layers, brush & eraser with size/opacity/hardness, non-destructive adjustments + filters, canvas resize/aspect presets, and LAYER STYLES: stroke, drop shadow, outer glow, clipping mask. One-click BACKGROUND REMOVAL runs fully in-browser via @imgly/background-removal (free, no API key — downloads a small ONNX model on first use). Undo/redo, zoom/pan, shortcuts, PNG/JPG/WebP export. v2 adds an AI FUNCTION-CALLING layer: every editor operation is a named, schema'd command (EDITOR_COMMANDS registry + useEditorCommands binding) driven by an in-editor chat; the streaming bridge is injectable via configureAgentStream(fn) and everything except the chat works without it. A headless server barrel (server.ts) runs commands against documents with no DOM. Image I/O via props (initialImage / onSave).","category":"os","tags":["image-editor","photoshop","canvas","konva","layers","filters","background-removal","paint","ai","ui"],"href":"/slices/image-editor","previewPath":"/preview/slices/image-editor","install":"npx rahman-resources add image-editor"},{"source":"slice","slug":"reel-editor","title":"Reel — video timeline editor","description":"A complete in-browser video editor. Real media clips (image/video/audio) on a layered multi-track timeline — the top row renders frontmost, with ▲▼ reorder and per-track lock/hide/mute. ONE Canvas-2D draw path is shared by the live preview and the realtime MediaRecorder exporter, so what you see is exactly what renders (WebM with real mixed audio: per-clip volume/fades/auto-duck through a streaming audio graph). Per-clip trim/speed (0.25–4×)/reverse, dissolve/wipe/slide transitions via clip overlap, keyframes (opacity/scale/x/y/rotation) with easing + one-click In/Out animation presets, text styling with preset grid, color grading + vignette, filmstrip thumbnails + real waveforms, snapping, split/duplicate. The workspace is config-driven: 6 resizable layout presets (react-resizable-panels v4) incl. quick-import files-pane layouts, plus custom composition size. Drafts auto-save to localStorage. Self-contained: toasts via sonner, the files pane runs on an injectable fs adapter (configureReelFs; in-memory mock by default), and shell hooks (inspector/activity) are inert seams in lib/host.ts.","category":"os","tags":["video","video-editor","timeline","nle","keyframes","transitions","webm","canvas","ui"],"href":"/slices/reel-editor","previewPath":"/preview/slices/reel-editor","install":"npx rahman-resources add reel-editor"},{"source":"slice","slug":"media-viewer","title":"Preview — media quick-look","description":"A quick-look media viewer in the macOS Preview spirit. Images render on a zoomable (40–300%) checkerboard stage so transparency reads; audio gets a card player with a CSS-bar waveform + transport; video gets play/pause + scrubber + volume; PDFs embed full-bleed and text gets a simple surface. The toolbar carries a type-indicator chip, zoom, Download, Open-in-editor, and prev/next. Two integration seams in lib/host.ts make it portable: configureMediaSource maps fs paths to fetchable URLs (identity by default, so public URLs work with zero wiring) and configureMediaOpener routes the Open-in-editor handoff (image → image-editor, video/audio → reel-editor) to your shell — both inert until set. Launched bare it shows a fully offline sample gallery (inline SVG gradients, simulated A/V playback). Pairs with file-explorer (onOpenFile → MediaViewer payload) and the editors.","category":"os","tags":["media","preview","viewer","quick-look","image","video","audio","pdf","ui"],"href":"/slices/media-viewer","previewPath":"/preview/slices/media-viewer","install":"npx rahman-resources add media-viewer"},{"source":"slice","slug":"code-editor","title":"Code — overlay syntax editor","description":"A lightweight code editor in the VS-Code spirit without the weight: a transparent textarea layered over a highlighted pre (regex tokenizer for JS/TS/JSON/CSS) gives real editing with live syntax color and a line-number gutter; a tab strip tracks dirty buffers with Cmd/Ctrl+S save; a status bar shows path, Ln/Col, tab size, language and save state. The explorer is a lazy per-directory tree — each folder lists on expand, with inline new-file/new-folder affordances — rendered as a rail on desktop and a Sheet on mobile, and the new-file form is a responsive dialog ⇄ bottom drawer. The filesystem is INJECTED via a small CodeFsAdapter (list/read/write/mkdir): point configureCodeFs at a real API or use the bundled writable in-memory mock (seeded sample tree) so it works with zero backend. Writes are best-effort — a read-only host flags the save but keeps the local buffer. Pairs with file-explorer (onOpenFile → payload) and appshell.","category":"os","tags":["code","editor","syntax-highlight","ide","tabs","file-tree","ui"],"href":"/slices/code-editor","previewPath":"/preview/slices/code-editor","install":"npx rahman-resources add code-editor"},{"source":"slice","slug":"system-monitor","title":"System Monitor — host telemetry dashboard","description":"An Activity-Monitor-style dashboard: circular CPU/RAM/disk/GPU gauges, rolling CPU + network sparklines on glass panels, and a live process table — polling every 1.5s with a ~40-point history. Telemetry is INJECTED via a small SysMonAdapter (stats/processes): point configureSysmon at a real host API (/proc, an agent, a cloud endpoint) or keep the bundled wavy in-browser mock so the dashboard renders alive with zero backend. Self-contained: shell inspector hooks are inert seams in lib/host.ts.","category":"os","tags":["monitoring","telemetry","dashboard","gauges","sparkline","processes","ui"],"href":"/slices/system-monitor","previewPath":"/preview/slices/system-monitor","install":"npx rahman-resources add system-monitor"},{"source":"slice","slug":"booking","title":"Booking — session request form + owner inbox","description":"One app that is BOTH a public 'book a session' request form AND the owner's triage inbox — it flips to show the inbox when the viewer can manage. Visitors submit name/email/topic (+ optional preferred time / note); the owner sees pending requests with Confirm / Decline. The backend is INJECTED via a small BookingAdapter (submit/list/setStatus/canManage): point configureBooking at your store, or keep the bundled in-memory mock so it renders fully interactive — form + inbox — with zero backend.","category":"os","tags":["booking","contact","form","inbox","lead","scheduling","ui"],"href":"/slices/booking","previewPath":"/preview/slices/booking","install":"npx rahman-resources add booking"},{"source":"slice","slug":"html-studio","title":"HTML Studio — sandboxed HTML/CSS/JS editor with live preview","description":"A tiny web-page studio: write HTML / CSS / JS and see it render LIVE in a sandboxed iframe (srcdoc + sandbox=allow-scripts WITHOUT allow-same-origin, so user code runs in an opaque origin and cannot read the host) — then Save to a shareable /p/<slug>. Code / Split / Preview view toggle, a device-width preview (responsive / tablet / phone), a saved-pages rail, and public/private visibility. The backend is INJECTED via a small HtmlStudioAdapter (save/load/list/remove): point configureHtmlStudio at your store, or keep the bundled in-memory mock so the editor + live preview + saved list are fully interactive with zero backend.","category":"os","tags":["html","editor","sandbox","iframe","preview","playground","code","ui"],"href":"/slices/html-studio","previewPath":"/preview/slices/html-studio","install":"npx rahman-resources add html-studio"},{"source":"slice","slug":"resources-launcher-admin","title":"Resources Admin — curated icon-launcher CRUD","description":"An owner-gated admin app for a curated icon-launcher: add / edit / remove / reorder links (label, lucide icon NAME, url, group, order) that open in a new tab. The backend is INJECTED via a small ResourcesAdapter (list/upsert/remove/canManage): point configureResources at your store, or keep the bundled in-memory mock so the whole CRUD — including reorder — is interactive with zero backend. Icons are stored as lucide NAME strings and resolved client-side, so the same data drives a public launcher surface.","category":"os","tags":["launcher","links","bookmarks","admin","crud","icons","ui"],"href":"/slices/resources-launcher-admin","previewPath":"/preview/slices/resources-launcher-admin","install":"npx rahman-resources add resources-launcher-admin"},{"source":"slice","slug":"profile","title":"Profile — CV + identity card","description":"One owner's identity in two co-located variants, behind one slug. resume: a clean one-column résumé / CV — name, roles, location, contacts, summary, skills, experience (role · org · period + bullets), projects — rendered by <Resume /> off a configureResume() seam, with a Print / PDF button. card: an \"About This Mac\"-style identity card — avatar / monogram, name, roles, outbound links, FAQ accordion — rendered by <AboutProfile /> off a configureAbout() seam. Both render a populated placeholder unwired (zero backend). Install one surface with `npx rr add profile resume|card`, or both with `npx rr add profile`.","category":"os","tags":["resume","cv","profile","portfolio","about","identity","bio","card","links","faq","print","ui"],"href":"/slices/profile","previewPath":"/preview/slices/profile","install":"npx rahman-resources add profile"},{"source":"slice","slug":"start-here","title":"Start Here — guided OS onboarding tour","description":"A guided 'Start Here' tour that lays the OS out as a path of stages, each stage opening real apps from the LIVE registry — drift-proof, it reads the injected app catalog instead of a hardcoded list, so adding an app surfaces it automatically (in a stage if listed, else a final 'Everything else' bucket). The catalog, the open(id) callback, and the stage journey are INJECTED via a small StartHereAdapter (apps / open / stages): point configureStartHere at your live app registry + window opener, or keep the bundled in-memory mock (a few generic apps + 3 stages) so the welcome tour renders fully alive with zero host.","category":"os","tags":["onboarding","tour","welcome","launcher","guide","os","ui"],"href":"/slices/start-here","previewPath":"/preview/slices/start-here","install":"npx rahman-resources add start-here"},{"source":"slice","slug":"os-terminal","title":"Terminal — shell emulator with live passthrough + PTY seam","description":"A React-DOM terminal: monospace glass aesthetic, colored prompt, arrow-key history, red stderr. Built-ins (ls·cd·pwd·cat·mkdir·touch·rm·mv·cp·echo·whoami·date·uname·df·ps·neofetch·help·clear) run against an in-memory FsModel, so it works with ZERO backend. Wire configureTerminal({ mode:\"live\", fs, exec }) and ls/cat read through your real filesystem, file mutations mirror to it, and any unknown command passes through exec.run as a one-shot shell call (stdout/stderr/exit rendered). Self-contained: shell inspector hooks are inert seams in lib/host.ts.","category":"os","tags":["terminal","shell","cli","emulator","exec","ui"],"href":"/slices/os-terminal","previewPath":"/preview/slices/os-terminal","install":"npx rahman-resources add os-terminal"},{"source":"slice","slug":"assistant","title":"Assistant — agent workspace with streaming chat","description":"A full agent workspace: streaming chat with typing deltas and graceful error notes, plus a library where users CREATE and manage agents (persona, avatar gradient, system prompt), skills, and automations (trigger + schedule forms) — all persisted in localStorage, no backend. Preset agents/skills ship as starting points. The model is INJECTED: configureAssistantStream takes any (messages) => AsyncIterable<string> — your SSE endpoint, the AI SDK, an agent loop — and until wired a typing demo stream keeps the whole UI working offline. Self-contained: shell inspector hooks are inert seams in lib/host.ts.","category":"os","tags":["ai","assistant","chat","agents","streaming","automations","ui"],"href":"/slices/assistant","previewPath":"/preview/slices/assistant","install":"npx rahman-resources add assistant"},{"source":"slice","slug":"browser","title":"Browser — remote headless-browser chrome","description":"Full browser chrome for a REMOTE headless browser: omnibar with search-or-URL detection, bookmark bar, history view (localStorage-persisted), favicons with globe fallback, busy states, and a screenshot viewport that forwards clicks/typing/keys/scroll into the remote page. The backend is INJECTED via a small BrowserAdapter (state/screenshot/act): point configureBrowser at a real headless-Chromium service (e.g. Playwright behind an authed route — any site renders, no X-Frame-Options problem) or keep the bundled offline canvas demo renderer that fakes the viewport so the whole chrome works with zero backend. Self-contained: shell inspector hooks are inert seams in lib/host.ts.","category":"os","tags":["browser","headless","playwright","remote","omnibar","bookmarks","ui"],"href":"/slices/browser","previewPath":"/preview/slices/browser","install":"npx rahman-resources add browser"},{"source":"slice","slug":"app-store","title":"App Store — install, create + toggle apps","description":"The dynamic half of an app registry, in two surfaces. AppStore: a storefront with featured hero, category sidebar, install/uninstall cards for a curated catalog, and toggles that disable built-in apps/shell features (the DISABLED set is persisted so new apps always ship enabled). CreateApp: build a custom app — name, glyph, accent gradient, runtime (html/node/python/shell), entry — with live manifest preview. Both write one localStorage registry; useInstalledApps() turns it into appshell-style descriptors (html apps mount in a sandboxed iframe, command apps in a terminal-style console). The console's shell is INJECTED via configureAppStoreExec (demo echo by default). Self-contained: inspector hooks are inert seams in lib/host.ts; the Create-App flow is bundled in (no cross-slice imports).","category":"os","tags":["app-store","registry","installer","dynamic-apps","launcher","ui"],"href":"/slices/app-store","previewPath":"/preview/slices/app-store","install":"npx rahman-resources add app-store"},{"source":"slice","slug":"file-explorer","title":"File Explorer — Tree + CRUD + Preview + Properties","description":"A complete, portable file-directory explorer: a collapsible folder TREE sidebar (lazy-loaded per dir), a responsive BREADCRUMB that auto-collapses to a dropdown, grid + list views with sort, multi-select, a right-click context menu, drag-and-drop (internal move + external file/folder upload), inline rename, and full CRUD (new folder, rename, cut/copy/paste, move, delete/trash, empty trash). The filesystem backend is INJECTED via a small FileExplorerAdapter (list/mkdir/remove/move/copy/upload/usage/rawUrl) — point it at a real API or use the bundled createMockAdapter() (a writable in-memory tree) so it works with zero backend. Opening a file fires an onOpenFile(path, entry) callback you wire to your own viewer/editor. Self-contained: imports only @/components/ui/* + @/lib/utils. Ported from os-vps (Topside) files manager. Pairs with appshell as the file-dir counterpart to a notion-style sidebar.","category":"os","tags":["files","file-manager","explorer","tree","breadcrumb","crud","sidebar","ui"],"href":"/slices/file-explorer","previewPath":"/preview/slices/file-explorer","install":"npx rahman-resources add file-explorer"},{"source":"slice","slug":"appshell","title":"AppShell — Desktop + Mobile OS Shell","description":"Generic, brand-free OS-style shell framework. One <AppShell manifest> wrapper provider gives a project a macOS-style window manager (drag/snap/maximize, dock, menu bar, Spotlight) AND an iOS-style mobile surface (home pager, app library, control center, widgets), driven entirely by a manifest: brand, apps, features, surface regions, capabilities, persistence, keymap. Five shell features (search, inspector, notifications, control-center, widgets) are bundled as defineFeature() contributions inside the slice and mount via named <Slot>s. Responsiveness is a single ResponsiveProvider + 4 DRY primitives (AppFrame, MasterDetail, ResponsiveToolbar, TouchList). Imports nothing project-specific — the consumer injects data/auth/AI through manifest.capabilities. Lifted from os-vps (Topside).","category":"os","tags":["shell","window-manager","desktop","mobile","responsive","framework","ui"],"href":"/slices/appshell","previewPath":"/preview/slices/appshell","install":"npx rahman-resources add appshell"},{"source":"slice","slug":"convex-auth","title":"Convex Auth — Multi-Provider Sign-in","description":"@convex-dev/auth with Password (PBKDF2-SHA256 100k, self-hosted-friendly), Anonymous (guest), Google OAuth, and Resend magic-link. Ships a production SignInPage plus a presentational, props-driven AuthCard (v0.3) — choose `methods` (google, github, magic-link, password signin/signup tabs, phone OTP, anonymous) and render the card anywhere with different props; handlers default to a mock so it's interactive with zero wiring. i18n via labels. No Clerk.","category":"auth","tags":["auth","convex","password","magic-link","google","anonymous","no-clerk","pbkdf2"],"href":"/slices/convex-auth","previewPath":"/preview/slices/convex-auth","install":"npm i @convex-dev/auth @auth/core resend"},{"source":"slice","slug":"payment","title":"Payment — Indonesia PSP (DOKU · Midtrans)","description":"Indonesia payment providers behind one slug + ONE shared Convex backend (convex/features/payment discriminates on a provider column: paymentOrders + paymentWebhookEvents, unprefixed). Two frontend variants: doku — DOKU Hosted Checkout + Direct (VA / QRIS / e-Wallet / PayLater), HMAC-SHA256 signed REST, signature-verified webhook, idempotent retries, dependency-free, server-side env only. midtrans — Snap hosted-modal checkout + orders history (needs npm midtrans-client + a NEXT_PUBLIC_MIDTRANS_CLIENT_KEY). Install one with `npx rr add payment doku|midtrans`, or both. A future stripe variant is reserved in the schema's provider union.","category":"integrations","tags":["payment","checkout","indonesia","doku","midtrans","snap","qris","virtual-account","ewallet","psp"],"href":"/slices/payment","previewPath":"/preview/slices/payment","install":""},{"source":"slice","slug":"resend-newsletter","title":"Resend — Transactional & Newsletter","description":"Transactional email + newsletter blast via Resend. Double opt-in flow + audience segmentation. Magic-link delivery for Convex Auth. Bundles the subscribers list backend (subscribe / confirm / unsubscribe / count) — formerly the standalone `subscribers` slice, merged here in v0.1.3.","category":"integrations","tags":["email","newsletter","resend"],"href":"/slices/resend-newsletter","previewPath":"/preview/slices/resend-newsletter","install":"npm i resend react-email @react-email/components"},{"source":"slice","slug":"ai-workspace","title":"AI Workspace — chat · studio · agents","description":"Three AI surfaces as shadcn-style variants — `npx rr add ai-workspace <variant>` for one, or `npx rr add ai-workspace` for all + a switcher. Only the chat variant pulls a Convex backend (per-variant convex gating).\n\n  • chat — floating <AiChatFab /> + createAgenticChatSend: real function-calling over any ToolHost (@/shared/agentic), key-guarded, over convex/features/aiChat.\n  • studio — <AiStudioPage /> single-prompt generation canvas (variation grid + version tree, Suno / Midjourney / Lovable pattern) + aiStudioTools so a shared agent can drive generations.\n  • agents — <AiAgentsPage /> autonomous-worker run dashboard + createAgentRunner(host) which drives the shared function-calling loop and records each tool_use as a RunStep trace.\n\nUse cases: support chatbot in a marketing site, AI generation product (image / code / text / audio), background workers (nightly audits, scheduled crawls, moderation). studio + agents are frontend-only — wire your own persistence.","category":"ai","tags":["ai","ai:chatbot","ai:studio","ai:agent","agent-mode","tool-calls","streaming","generation","async","traces","multimodal"],"href":"/slices/ai-workspace","previewPath":"/preview/slices/ai-workspace","install":"npm i ai @ai-sdk/anthropic @ai-sdk/openai"},{"source":"slice","slug":"ai-admin","title":"AI Admin — Console (Instructions · Skills · Tools · Agents · Providers)","description":"Central operator console for the whole AI stack. Every other ai-* feature reads its registries from here. Tabs ordered to match the build-flow:\n\n  1. Providers   — register Anthropic / OpenAI / Google / Mistral / Ollama (API keys AES-encrypted at rest)\n  2. Models      — per-provider catalog (capabilities, context window, pricing)\n  3. Instructions — custom system-prompt library (Claude Projects-style)\n  4. Skills      — named instruction + model default + tool defaults (consumed by chat + studio)\n  5. Tools       — JSON-schema function specs + impl (http / convex / shell) + sandbox flag\n  6. Agents      — skill × model × tools × max-iter (consumed by ai-agents)\n  7. Budgets     — per-workspace cost caps + alerts + hard kill\n  8. Audit       — every AI call: actor / agent / tokens / cost / latency / outcome\n\nIncludes Create-Agent / Create-Skill / Create-Tool / Create-Instruction wizards.","category":"ai","tags":["ai","ai:admin","instructions","skills","tools","agents","providers","models","budgets","audit"],"href":"/slices/ai-admin","previewPath":"/preview/slices/ai-admin","install":""},{"source":"slice","slug":"ai-router","title":"AI Router — Backend Provider Proxy","description":"Backend infrastructure (no UI). Single proxy that every other ai-* feature calls. Tier-routed — nano (Haiku) for classification, mid (Sonnet) for chat, flagship (Opus) for deep reasoning. Per-call usage log + cost guard. Works with direct provider keys or OpenRouter umbrella.\n\nNot something you mount — installed automatically as a peer when you add ai-workspace.","category":"ai","tags":["ai","ai:backend","tier-routing","cost-guard"],"href":"/slices/ai-router","previewPath":"/preview/slices/ai-router","install":"npm i ai @openrouter/ai-sdk-provider"},{"source":"slice","slug":"vector-search","title":"Convex Vector Search","description":"Embeddings-based search via Convex's built-in vector index. Embed via OpenAI text-embedding-3-small (1536-dim), query via vectorIndex().","category":"data","tags":["search","vector","embeddings","convex","rag"],"href":"/slices/vector-search","previewPath":"/preview/slices/vector-search","install":"npm i openai"},{"source":"slice","slug":"cal-com-booking","title":"Cal.com Booking","description":"Embedded Cal.com booking widget + webhook receiver to mirror bookings into Convex.","category":"data","tags":["data","scheduling","cal-com","bookings"],"href":"/slices/cal-com-booking","previewPath":"/preview/slices/cal-com-booking","install":"npm i @calcom/embed-react"},{"source":"slice","slug":"command-menu","title":"Command Menu","description":"Renderless ⌘K command palette + generic search modal. Consumer supplies CommandGroup[] + onSelect + label bag; slice owns dialog chrome, ⌘K hotkey, MRU history. Pulled UP from notion-page-clone's command-palette renderless surface (Wave N+3.7) — Nosion adapters dropped at the kitab boundary.","category":"ui","tags":["ui","palette","cmd-k","navigation","keyboard","search","notion-like"],"href":"/slices/command-menu","previewPath":"/preview/slices/command-menu","install":"npm i cmdk"},{"source":"slice","slug":"motion-primitives","title":"Motion Primitives (8)","description":"Eight ready-to-style motion components: marquee, kinetic-heading, magnetic, cursor-spotlight, stat-counter, reading-progress, grain, lightbox. Framer-Motion-powered, tree-shakeable. Facade slice — pulls from template-base/frontend/slices/motion-primitives.","category":"ui","tags":["ui","motion","animation","marquee","framer-motion"],"href":"/slices/motion-primitives","previewPath":"/preview/slices/motion-primitives","install":"npm i framer-motion"},{"source":"slice","slug":"responsive-dialog","title":"Responsive Dialog (Sheet ↔ Modal)","description":"ResponsiveDialog — auto-switches between bottom Sheet (mobile) and centered Dialog (desktop) at the md breakpoint. Same API as shadcn Dialog. Kitab forbids raw <dialog>; use this everywhere. Facade slice — pulls from template-base/frontend/slices/responsive-dialog.","category":"ui","tags":["ui","dialog","modal","sheet","responsive","primitive"],"href":"/slices/responsive-dialog","previewPath":"/preview/slices/responsive-dialog","install":""},{"source":"slice","slug":"dashboard-shell","title":"Dashboard Shell — Responsive","description":"ResponsiveDashboardShell — desktop sidebar + topbar, mobile dock + sheet sidebar, breakpoint-aware. Ports superspace's layout/dashboard/{Desktop,Mobile,Responsive}DashboardShell + sidebar primary/secondary slots. Facade slice — pulls from template-base/frontend/slices/dashboard-shell.","category":"ui","tags":["ui","layout","dashboard","sidebar","topbar","responsive"],"href":"/slices/dashboard-shell","previewPath":"/preview/slices/dashboard-shell","install":""},{"source":"slice","slug":"three-column","title":"Three-Column Layout — Sidebar/Content/Inspector","description":"ThreeColumnLayoutAdvanced — collapsible left/right + resizable widths + responsive breakpoints + PanelSection compound (Header/Items/Footer) + per-panel footer slots. Models shadcn sidebar API for the panel interior. Pair with PanelGroup/PanelMenu/PanelSeparator primitives. Trigger ≠ header (V-wave separation rule).","category":"ui","tags":["ui","layout","three-column","sidebar","inspector","panel-section","responsive","resizable"],"href":"/slices/three-column","previewPath":"/preview/three-column-trio","install":""},{"source":"slice","slug":"broadcast-channel-sync","title":"BroadcastChannel — Cross-tab Sync","description":"Same-origin cross-tab + cross-iframe state sync via BroadcastChannel API. Tiny, no backend, no install.","category":"data","tags":["realtime","cross-tab","broadcast-channel","demo-pattern"],"href":"/slices/broadcast-channel-sync","previewPath":"/preview/slices/broadcast-channel-sync","install":"// no install — Web Platform API"},{"source":"slice","slug":"rbac-roles","title":"RBAC — Roles & Permissions","description":"RBAC engine ported from superspace. 6 system role presets (owner/admin/manager/staff/client/guest with levels), dot-namespaced permissions with `*` / `feature.*` wildcard matching, and pure check helpers (resolvePermissions / hasPermission / roleHasPermission). Props-driven UI primitives: <PermissionGate>, usePermissions, <RoleBadge>, <PermissionMatrix>. Convex template ships a tenant-scoped rbac_roles table + checkPermission / requirePermission helpers + idempotent seedSystemRoles, with a PLATFORM_ADMIN_EMAILS superadmin bypass. Pair with `user-management` for the members / invites / roles-admin UI. @convex-dev/auth aware — no Clerk.","category":"auth","tags":["rbac","auth","permissions","roles","authorization","no-clerk","convex"],"href":"/slices/rbac-roles","previewPath":"/preview/slices/rbac-roles","install":"npx rahman-resources add rbac-roles"},{"source":"slice","slug":"user-management","title":"User Management","description":"Full superspace-parity user management, props-driven + RBAC-agnostic. <UserManagementPanel> tabs Members + Roles + Teams + Access: member table (search / filter / sort, inline role dropdown, soft-remove), InviteDialog (with an optional 'propagate to sub-workspaces' toggle — same / step-down role strategy) + PendingInvites, a RolesPanel (custom roles via permission matrix; system roles read-only), a TeamsPanel (named user groups), and an AccessMatrix (users × tenants grid with inline role assignment). All permission-gated. You pass `roles` + `currentPerms` + the permission catalog (resolved from rbac-roles) + callbacks; the slice imports no other slice's frontend. Convex ships um_members + um_invites + um_teams + um_team_members + um_tenant_links + member / invite / team / hierarchy endpoints + getAccessMatrix (gated via rbac-roles' requirePermission); roles CRUD reuses rbac-roles'. The hierarchy is a generic edge tree — rr never owns the tenant entities. P0–P4c: the complete user-management epic.","category":"auth","tags":["user-management","members","rbac","auth","team","admin","convex","no-clerk"],"href":"/slices/user-management","previewPath":"/preview/slices/user-management","install":"npx rahman-resources add user-management"},{"source":"slice","slug":"admin-panel","title":"Admin Panel — Unified Product Admin","description":"17-section admin surface (events, funnels, attribution, users, A/B, flags, pricing, CMS, email, audit, ...) gated by RBAC. Auto-filters sidebar by tier (solo/influencer/organization) and user permissions. Single backend resolver (getMyAdminAccess) mirrors frontend gate so UI can never leak.","category":"infra","tags":["admin","owner","platform","rbac","instrumentation","panel"],"href":"/slices/admin-panel","previewPath":"/preview/slices/admin-panel","install":"npx rahman-resources add admin-panel"},{"source":"slice","slug":"event-tracking","title":"Event Tracking — P0 Instrumentation","description":"Client SDK + Convex ingestion endpoint for structured product events. Auto-captures page_view/signup/login + UTM/referrer/first-touch attribution. Batched flush via requestIdleCallback. Targets <100ms p99 ingestion.","category":"data","tags":["events","analytics","instrumentation","attribution","utm","p0"],"href":"/slices/event-tracking","previewPath":"/preview/slices/event-tracking","install":"npx rahman-resources add event-tracking"},{"source":"slice","slug":"icon-picker","title":"Icon Picker","description":"Emoji + lucide (outline) + phosphor (fill) icon picker with search, 10-color palette, Twemoji/native toggle, recents tracking, and smart positioning. Two-tab layout (Emoji | Icon) with sub-variant pills (Native | Twemoji / Lucide | Phosphor fill). One string stores emoji OR lucide:Name OR phosphor:Name OR with ?c=hex tint — backwards-compat with raw-emoji fields. Popover auto-flips on collision (caps to Radix `--radix-popover-content-available-height`) and falls back to centered Dialog when neither side fits. Two variants: Popover (compact trigger) and Inline (full sheet/dialog use). Lifted 2026-05-25 from open-silong.","category":"ui","tags":["icon","emoji","lucide","phosphor","picker","twemoji","notion","notion-like","responsive"],"href":"/slices/icon-picker","previewPath":"/preview/slices/icon-picker","install":"npx rahman-resources add icon-picker"},{"source":"slice","slug":"activity","title":"Activity — public productivity log","description":"Public-facing weekly activity log. Lists user-facing activities grouped by ISO week with schema.org-friendly markup, designed to maximise SEO so the question 'what is <person> working on this week?' lands here. Convex-backed (schema + queries + unauthenticated mutations); MCP-friendly so AI workflows (Claude / GPT / custom agents) can append entries directly. All user-facing copy + per-category labels + date/time locale are prop-driven (English defaults). Lifted 2026-05-27 from rahmanef.com; 225-LOC view split into view + 2 sub-components + 4 lib helpers for the 200-LOC cap; Indonesian strings + custom primitives stripped; cross-slice auth import dropped (consumer wraps mutations).","category":"data","tags":["activity","productivity","log","now-page","feed","mcp","seo","personal-brand"],"href":"/slices/activity","install":"npx rahman-resources add activity"},{"source":"slice","slug":"rate-limit","title":"Rate Limit","description":"Convex-backed per-key request counter. Atomic check-and-increment via `consume` mutation; expired rows pruned by `_pruneExpired` internalMutation wired to a 5-min cron. Replaces single-replica in-memory Map so multi-replica Next deployments share buckets. Limits live in an in-code POLICY map keyed by namespace prefix (admin-login:<ip>, mcp:<ip>) — never caller-supplied; optional RATE_LIMIT_SERVER_KEY env gates anonymous calls. Lifted 2026-05-16 from rahmanef.com; hardened 2026-06-07.","category":"infra","tags":["infra","rate-limit","convex","backend","throttle"],"href":"/slices/rate-limit","install":"npx rahman-resources add rate-limit"},{"source":"slice","slug":"testimonials","title":"Testimonials","description":"Quote/name/role rotator backend. Public `listAll` + `get` (no auth — testimonials are public), admin CRUD via `requireAdmin`, internal `seed` for one-shot bootstrap. Indexed by `order` so carousel/grid keeps stable rotation. Lifted 2026-05-16 from rahmanef.com; token-based admin gate swapped for rr `_shared/auth`.","category":"content","tags":["content","testimonials","convex","backend","marketing"],"href":"/slices/testimonials","previewPath":"/preview/slices/testimonials","install":"npx rahman-resources add testimonials"},{"source":"slice","slug":"services","title":"Services","description":"Service offerings backend — title + summary + deliverables array + sort order. Public read, admin CRUD, internal seed. Pairs with a frontend services grid/list (consumer-side). Lifted 2026-05-16 from rahmanef.com; token-based admin gate swapped for rr `_shared/auth`.","category":"content","tags":["content","services","convex","backend","marketing","agency"],"href":"/slices/services","previewPath":"/preview/slices/services","install":"npx rahman-resources add services"},{"source":"slice","slug":"create-your-mcp","title":"Create Your MCP","description":"Turn any rr-based app into an MCP server that ChatGPT custom apps, Claude.ai connectors, Cursor MCP, and other AI clients authenticate to. OAuth 2.1 + PKCE flow with code → bearer exchange, env-configured vendor-host allowlist, single-use codes, 1-year bearer tokens, scope-tagged tools, opaque error collapsing, constant-time token compare. Static MCP_API_KEY fallback for service-account / CI scripts. Sanitized 2026-05-16 from rahmanef.com's production MCP integration — vendor literals (chatgpt.com / OpenAI paths) replaced with MCP_OAUTH_ALLOWED_HOSTS + MCP_OAUTH_ALLOWED_PATH_PREFIXES env vars so the slice ships portable.","category":"ai","tags":["ai","mcp","oauth","pkce","chatgpt","claude","cursor","convex","integration"],"href":"/slices/create-your-mcp","previewPath":"/preview/slices/create-your-mcp","install":"npx rahman-resources add create-your-mcp"},{"source":"slice","slug":"contact-form-resend","title":"Contact Form + Resend","description":"Contact form posting to Resend email API. Server Action + Zod input validation. Convex mutation for storage + Resend send.","category":"integrations","tags":["form","email","resend","convex"],"href":"/slices/contact-form-resend","previewPath":"/preview/slices/contact-form-resend","install":"npx rahman-resources add contact-form-resend"},{"source":"slice","slug":"admin","title":"Admin — generic shell + composed console","description":"Access-gated admin surfaces behind one slug, in two variants — each pulls ONLY its own convex backend (per-variant convex gating). shell: a HEADLESS minimal generic admin shell — a titled landing region + a portable buildAdminStats(opts) nav-from-registry factory (consumer supplies a SliceRegistryAdapter + queryTable reader) over convex/features/admin; superadmin gate via SUPER_ADMIN_EMAIL. console: the composed admin panel distilled from ~15 project admin panels — a gated two-column shell (AdminConsole) over a 26-section registry (ADMIN_CONSOLE_SECTIONS: observability / identity / ai / content / commerce / config) that mounts OTHER rr slices via a consumer-supplied `components` map (users→user-management, roles→rbac-roles, ai→ai-admin, tenants→platform-admin) plus 5 owned gap sections (Analytics, Audit-log, Nav config, SEO health, Leads/CRM) over convex/features/admin_console (ac_leads + ac_nav_items); gate injected, PLATFORM_ADMIN_EMAILS allowlist. Install one with `npx rr add admin shell|console`, or both with `npx rr add admin`. NOT the multi-tenant control plane — that's the separate `platform-admin` slice (the console's `tenants` section provider).","category":"infra","tags":["infra","admin","console","shell","dashboard","composition","rbac","access-gate","registry"],"href":"/slices/admin","previewPath":"/preview/slices/admin","install":"npx rahman-resources add admin"},{"source":"slice","slug":"platform-admin","title":"Platform Admin — Multi-Tenant Control Plane","description":"Multi-tenant SaaS control plane. Workspace lifecycle ops (list/delete/cascade), per-tenant tier presets (gates + quota), KPI dashboard grid. Consumer-domain bits injected via adapter props (tenantTablesAdapter / tierPresets / kpiSources). Contract-only scaffold; canonical implementation lands via /rr-send from superspace. See docs/contract-negotiations-2026-05-15.md §4.","category":"infra","tags":["infra","admin","multi-tenant","saas","platform"],"href":"/slices/platform-admin","previewPath":"/preview/slices/platform-admin","install":"npx rahman-resources add platform-admin"},{"source":"slice","slug":"audit-log","title":"Audit Log — Workspace Events","description":"Workspace-scoped audit event recorder. Canonical logAuditEvent helper for mutations + actions; supports entity tracking, before/after diff, IP/user-agent capture.","category":"infra","tags":["infra","audit","compliance","logging"],"href":"/slices/audit-log","previewPath":"/preview/slices/audit-log","install":"npx rahman-resources add audit-log"},{"source":"slice","slug":"comments","title":"Comments — Threaded","description":"Polymorphic-target threaded comments. Consumer picks `TargetRef = { kind, id, subId? }` (e.g. page+block, blog+slug, task+id). Reply nesting is real: `parentId` end-to-end + `buildThread(flat) → CommentNode[]` tree (oldest-first, orphan-safe). Renderless <CommentsThread> + <CommentsAnchor> wrappers; useComments(bindings, opts) returns items + `tree` + openCount + CRUD + forbiddenWords guard. Adapter pattern — see contract-negotiations §1.","category":"content","tags":["content","social","comments","threaded","annotations"],"href":"/slices/comments","previewPath":"/preview/slices/comments","install":"npx rahman-resources add comments"},{"source":"slice","slug":"seo","title":"SEO — AI Metadata Generator","description":"Service slice for SEO metadata generation — Anthropic-backed action with per-user 24h cost guard + portable persona prop. No public route. Backend exposes generate + generateAndApply mutations gated by requireAdmin; consumers inject brand voice via the personaContext arg (or buildSeoSystemPrompt factory).","category":"content","tags":["content","seo","ai","anthropic","metadata-generator"],"href":"/slices/seo","previewPath":"/preview/slices/seo","install":"npx rahman-resources add seo"},{"source":"slice","slug":"publisher-clean-html","title":"Publisher — clean HTML","description":"A pure render-to-clean-HTML engine harvested from the Instatic CMS publisher, decoupled from its host caching / loops / visual-components / Layer-C islands. publishPage(tree, registry, options) walks a generic node tree bottom-up: render children, escape every prop by its schema-declared control type (url -> safe-URL, richtext -> DOMPurify, svg -> SVG profile, else HTML-escape), dedup CSS by moduleId (~60-80% shrink), splice author classes + inline styles onto each rendered root, then assemble <!DOCTYPE> + reset + framework + module CSS + a deterministic (sorted) CSP plan. Bring your own ModuleRegistry (each module is a pure render(props, children) -> { html, css? }). Security spine: HTML escape + safe-URL, CSS-value guard (expression()/{}/</), </style RAWTEXT neutraliser, and an injectable DOMPurify seam (configureRichtextSanitizer) that fails closed — without a runtime, richtext strips all tags and SVG returns empty. Stateless, env-free, ZERO npm deps, no Convex. Ships a PublishPreview iframe-srcdoc pane. A Wave-1 leaf of the feature-harvest ULTRAPLAN; a dependency of the planned visual-page-canvas.","category":"content","tags":["content","publisher","html","static-export","sanitization","csp","css-dedup","render"],"href":"/slices/publisher-clean-html","previewPath":"/preview/slices/publisher-clean-html","install":"npx rahman-resources add publisher-clean-html"},{"source":"slice","slug":"content-loops","title":"Content Loops","description":"A data-source-driven repeater harvested from the Instatic CMS base.loop engine, decoupled from its publisher / page-tree / entryStack machinery into a plain React slice. Register pluggable LoopEntitySource backends (each declares display fields + an async fetch returning { items, totalItems }); drop <ContentLoop source|sourceId filters orderBy variants={[A, B]} /> to render one component per item, round-robining items across variants so alternating / featured layouts need no per-item branching. Ships a namespaced source registry (ids must be 'ns.name', so consumer sources can't shadow each other), createMockLoopSource for env-free previews + tests, and none/infinite pagination via useLoopPagination (a shadcn Load more button accumulates pageSize chunks). LoopItem.fields is a generic resolved-value bag — variants read item.fields.title directly, no second lookup. UI-only: no Convex tables shipped; point a source's fetch at Convex/REST when you have a backend. First slice of the feature-harvest ULTRAPLAN (docs/feature-harvest) and a dependency of the planned site-templates-engine + visual-page-canvas.","category":"content","tags":["content","loop","repeater","list","data-source","pagination","variants"],"href":"/slices/content-loops","previewPath":"/preview/slices/content-loops","install":"npx rahman-resources add content-loops"},{"source":"slice","slug":"markdown","title":"Markdown — page container with CRUD tabs + diagrams","description":"Markdown (.md) page container with optional CRUD surfaces. <MarkdownPage content={md} tabs={['read','write','review']}/> — Read renders rich text (headings, lists, todo, GitHub-style callouts, fenced code, KaTeX, tables, images, <details> toggles, inline marks); Write is a raw-source editor with snippet toolbar + live preview; Review overlays block-anchored comments (add/resolve, controlled via onAddComment/onResolveComment or internal fallback). Fenced ```mermaid blocks render as SVG diagrams (dynamic-imported mermaid) and ```chart blocks as recharts bar/line/area/pie from a JSON spec. Self-contained: ships its own parser (parseMarkdown → MdNode[]) + inline renderer, no notion runtime dependency. Sync is by shared grammar: the notion cluster's blocksToMarkdown / markdownToBlocks bridge (@notion/shared/lib/markdown) emits/consumes the exact same markdown this slice parses, so anything readable in the notion block page is readable here and vice-versa. No store, no Convex — comments CRUD is consumer-wired callbacks.","category":"content","tags":["content","markdown","reader","editor","review","comments","mermaid","chart","rich-text","docs","notion-sync"],"href":"/slices/markdown","previewPath":"/preview/slices/markdown","install":"npx rahman-resources add markdown"},{"source":"slice","slug":"notion-app","title":"Notion App — Block Editor","description":"Nested vertical slice (slice-of-slices) housing the full notion-page-clone block editor. Mount <PageEditor pageId/> inside <EditorAdapterProvider adapter/> — with `{}` it is a working plain-text/markdown block editor (slash menu, markdown triggers `# - > [] etc.`, dnd-kit drag with column layouts, per-block toolbar with turn-into/color/duplicate, per-block undo, paste-markdown import); host capabilities light up per optional adapter: data (block+page CRUD), selection (multi-select), comments (per-block popover), ai (Ask-AI panel), database (render + picker), mention (@-typeahead), page (nav/uploads/covers). Cluster-private shared layer under @notion/* — vendored block/page/database model, uid, inline markdown, page→md/html export. Pure convex block helpers (_blocks/_blockOps, unit-tested) ship in convex/features/notion. Same markdown grammar as the standalone `markdown` slice (blocksToMarkdown/markdownToBlocks bridge).","category":"content","tags":["content","notion","editor","block-editor","rich-text","slash-menu","drag-drop","adapter-seam"],"href":"/slices/notion-app","install":"npx rahman-resources add notion-app"},{"source":"slice","slug":"sections","title":"Sections — composable marketing/landing sections","description":"Canonical landing-page composition slice — replaces the former standalone hero / cta / pricing-page / faq-section / feature-grid / testimonials-grid / blog-section / portfolio-section / changelog-feed slices (all merged here as `kind` variants in v0.2.0). Ships a pure reducer (v0.4.0: LANDING_UPSERT auto-shifts sibling `order` to keep positions unique; LANDING_DELETE closes the gap) + LandingProvider store adapter + admin LandingView/LandingEditorView built on the shared CRUD primitives, plus a per-section LandingSectionShell (background image + custom Tailwind className overlay + scroll-reveal). NEW in v0.4.0: a `sections/` library of config-driven public renderers (StatsSection, TestimonialsSection, FaqSection, PricingSection, NewsletterSection, CustomSection) that read `LandingSection.config` JSON merged over template defaults — content stays dashboard-controlled without per-template renderer code; plus `parse-config` helpers (parseConfigBadge/parseConfigField) and `sections/config` guards (parseConfigObject, cfg*). Sections carry { kind, order, title, subtitle, enabled, imageUrl, imageRatio, bgImageUrl, className, config (JSON) } with up/down reorder arrows. Lifted from the _templates fleet `_shared/landing` (2026-06-11) — the 8 standalone templates ship a byte-similar copy; this rr slice is the SSOT. Used by all 7 rr website templates.","category":"content","tags":["admin","landing","cms","sections","crud","renderer"],"href":"/slices/sections","install":"npx rahman-resources add sections"},{"source":"slice","slug":"motion-kit","title":"Motion Kit — scroll reveals, carousel, accordion, micro-interactions","description":"Zero-dependency scroll-motion layer (IntersectionObserver + CSS) plus an embla carousel and a radix accordion, packaged so any page gets tasteful entrance animations without pulling in a motion library. Ships Reveal (fade-up/fade/fade-left/fade-right/zoom), Stagger (incremental per-child reveal for grids/lists), CountUp (rAF count-to-value with locale formatting; integers), Marquee (infinite logo/brand strip with hover-pause + edge fade), and the useInView hook behind them; plus Carousel (embla, optional Autoplay plugin) and Accordion (radix). All reveal + keyframe motion is gated behind prefers-reduced-motion. Consumers append globals-motion.css to their app/globals.css for the [data-reveal] transitions + accordion/marquee/blob keyframes. Lifted 2026-06-10 from the _templates fleet `_shared/motion` copy — the 8 standalone website templates already ship a byte-identical copy; this rr slice is the SSOT so future scaffolds get it via `npx rr add motion-kit`. Pairs with landing-sections (its renderers consume these primitives).","category":"ui","tags":["ui","motion","animation","scroll","reveal","carousel","accordion","marquee","countup","embla"],"href":"/slices/motion-kit","previewPath":"/preview/slices/motion-kit","install":"npx rahman-resources add motion-kit"},{"source":"slice","slug":"storefront-checkout","title":"Storefront Checkout — guest cart + checkout composition","description":"Guest-friendly shopping cart for catalog storefronts. CartProvider holds items in React context with localStorage persistence (anonymous buyers keep their cart across reloads, zero backend). CartWidget is a header trigger with live count badge opening a slide-over Sheet: per-item qty steppers, remove, subtotal, checkout CTA to a host route. CheckoutSummary renders the order panel on the checkout page. Props-driven R3 — no convex/react anywhere; the host resolves a NUMERIC price per catalog item before add() and MUST re-price every line server-side when placing the order (client subtotal is display-only, never the charge). Proven end-to-end on wirausaha-os: catalog → cart → server-priced placeOrder action → DOKU Direct instructions → webhook flips paid (reactive). Pairs with doku-payment ≥0.2 (guest checkout: optional userId + buyer contact, key-guarded actions, guest-readable status query) or midtrans-payment.","category":"content","tags":["ecommerce","cart","checkout","guest","storefront","payment","localStorage","sheet"],"href":"/slices/storefront-checkout","previewPath":"/preview/slices/storefront-checkout","install":"npx rahman-resources add storefront-checkout"},{"source":"slice","slug":"theme-presets","title":"Theme Presets — unified switcher with bundled tweakcn registry","description":"Single unified theme controller for next-themes apps. ThemePresetSwitcher ships a Palette-icon Popover trigger with three stacked sections: (1) sticky light/dark/system mode tabs, (2) sticky preset-count row with a Default reset button, (3) scrollable color-preset list grouped by mood (Profesional / Bold / Hangat / Artistik / Gelap + Lainnya). Hover-to-preview + click-to-commit + restore-on-close semantics. ThemePresetProvider context wraps state so deeply-nested consumers read via useThemePreset() instead of mounting the switcher directly. ThemeColorSync wrapper enables live tweakcn-CSS-variable preview on routes that need it. Tweakcn registry (~30 curated presets after HIDDEN_PRESETS filter drops Doom 64 / Cyberpunk / Neo Brutalism / Bubblegum / Candyland / Pastel Dreams) ships inside the slice as registry-data.json and loads lazily via dynamic import — code-splits into its own chunk, zero consumer public/ setup, no network roundtrip to a hosted URL. localStorage key `host:theme-preset` (rename via slice fork). CK-1F (2026-05-23) — collapsed prior TweakcnSwitcher + ThemePicker + phantom `theme-preset-switcher` catalog entry into this single component.","category":"ui","tags":["ui","theme","tweakcn","color","preset","switcher","popover","next-themes","notion-like"],"href":"/slices/theme-presets","previewPath":"/preview/slices/theme-presets","install":"npx rahman-resources add theme-presets"},{"source":"slice","slug":"site-setup-wizard","title":"Site Setup Wizard — first-run site setup","description":"Post-claim onboarding wizard for clone-to-own templates, graduated from the headless template surface (2026-06-06). Multi-step card flow (Identitas / Branding / Konten / Selesai) that stores ALL site config in the host backend via a props-driven save callback — a non-coder configures their site with zero code. Branding step ships a readable shadcn Select theme-preset picker (color swatches per preset + grouped headers + live preview callback — replaces the white-on-white native select), brand color quick-chips, light/dark/system default mode, logo/favicon upload via injected ImageField, and optional Analytics ID. Identity step hints invalid email format. 'Lewati setup' marks onboarded without fields and reverts any browsed-but-unsaved preset. Props-driven (R3): no convex/react import — host wires settings.upsert / seed.seedSample / setup.status into props; pairs naturally with the theme-presets slice (registry + tweakcnSwatches + previewTweakcnPreset) but works with any theme system or none.","category":"ui","tags":["ui","onboarding","wizard","setup","first-run","branding","theme","clone-to-own","templates"],"href":"/slices/site-setup-wizard","previewPath":"/preview/slices/site-setup-wizard","install":"npx rahman-resources add site-setup-wizard"},{"source":"slice","slug":"file-upload","title":"File Upload — pluggable upload + URL resolver with storage-adapter contract","description":"Host-pluggable file upload + URL resolution. Ships <FileUploadButton>, <FileChip>, useFileUpload(), useFileUrl() — all reading from a FilesAdapter the host wires via <FilesAdapterProvider>. Bundled localStorage demo adapter stores blobs as data URLs (small files only). Drop in your own adapter for Convex / S3 / GCS / R2. The slice itself has zero backend coupling, proving the storage-adapter pattern for the rest of the open-silong blocked-pending-adapter wave (cover, workspace-io, templates, …).","category":"data","tags":["data","upload","files","storage","adapter","portable","notion-like"],"href":"/slices/file-upload","previewPath":"/preview/slices/file-upload","install":"npx rahman-resources add file-upload"},{"source":"slice","slug":"selection","title":"Selection — marquee multi-select + bulk actions","description":"Framework-agnostic multi-selection for any vertical list (Notion-style blocks, table rows, cards). Hold-and-drag on empty space draws a rubber-band rectangle — AutoCAD-style: drag RIGHT selects only fully-enclosed items (solid ring), drag LEFT selects anything the rectangle touches (dashed green ring). Click an item's edge to select (Shift = range, Cmd/Ctrl = toggle). Selecting activates items with a ring + data-block-selected attribute. Backspace/Delete bulk-deletes, Escape and click-outside clear, and a floating count toolbar offers Delete/Clear. SelectionProvider owns only the id set — the host owns the data via onBulkDelete(ids). Pairs with notion-shell (the notion-clone template wires it onto the editor); lifted from notion-page-clone's block-selection slice.","category":"ui","tags":["ui","selection","marquee","rubber-band","multi-select","bulk","notion","blocks","list"],"href":"/slices/selection","previewPath":"/preview/slices/selection","install":"npx rahman-resources add selection"},{"source":"slice","slug":"notion-ui","title":"Notion UI — page editor · database · sidebar primitives","description":"The pure, props-driven Notion-clone primitives suite behind one slug, over one shared domain-type model (Block / Page / Property / Database / DbView …). page: the page + block editor (NotionPage / NotionHeader / NotionBlock, SlashMenu, block renderers, inline-markdown decorator, built-in code (highlight.js) + equation (KaTeX)). database: a drop-in 11-view database (table/board/list/gallery/calendar/feed/chart/dashboard/form/map/timeline, 18 property/cell types, per-type column config, filter/sort/group/calculate, row peek + multi-select, cell drag-fill, formula engine, CSV/JSON import-export). sidebar: a standalone tree-nav sidebar (dnd reorder + reparent with depth projection, inline rename, per-row icon picker). All stateless + callback-CRUD — the host owns the data. Install one surface with `npx rr add notion-ui page|database|sidebar`, or all with `npx rr add notion-ui`; the shared/ domain type model is copied for every variant. NOT the full Notion app — that's the separate `notion` slice (adapter + Convex backed).","category":"ui","tags":["ui","notion","notion-like","database","table","board","list","gallery","calendar","feed","chart","dashboard","form","map","timeline","gantt","kanban","views","filter","sort","property","files","person","formula","timestamp","unique-id","csv","json","import","export","template","data","backup","primitive","optional","embeddable"],"href":"/slices/notion-ui","previewPath":"/preview/slices/notion-ui","install":"npx rahman-resources add notion-ui"},{"source":"slice","slug":"image-picker","title":"Image Picker — one-button image/wallpaper chooser (gallery · upload · link · Unsplash · reposition)","description":"Generic image/wallpaper picker — not coupled to Notion. The headline API is ONE button (ImagePickerButton) that opens a dialog with 4 tabs: Gallery (12 colours + 8 gradients + Notion textures), Upload (drag/click, ≤8MB), Link (paste any https image URL), Unsplash (bundled curated landscapes + live search). On pick, onChange fires with an ImageValue ({ type, value, positionY?, metadata? }). ImageBanner is the optional reposition-able band — render an ImageValue as a full-width cover / profile header / card hero with hover controls: Change (opens the dialog), Reposition (drag the vertical focal point), Remove. The slice imports NO other slice and NO backend — the upload backend and Unsplash search are INJECTED as props (onUpload + searchUnsplash), so it drops into any app: wire onUpload to the `files` slice and searchUnsplash to a server route via unsplashSearchVia('/api/unsplash') that holds UNSPLASH_ACCESS_KEY server-side (never NEXT_PUBLIC). Ships a curated Unsplash fallback + gallery so it works with zero config. parseImage normalizes legacy raw-string values; imageStyle builds the focal-point CSS. Wired into the notion-page-clone template as the page cover via NotionPage's coverSlot.","category":"ui","tags":["ui","image","picker","wallpaper","cover","upload","unsplash","gallery","reposition","files","primitive","portable","dialog"],"href":"/slices/image-picker","previewPath":"/preview/slices/image-picker","install":"npx rahman-resources add image-picker"},{"source":"slice","slug":"workspace-shell","title":"Workspace Shell — atomic (workspace × menuSet) NavContext","description":"Unified workspace + menu navigation primitive. NavContext = (workspaceId, menuSetId) atomic pair. 2-tier dropdown switcher (workspace radio + menuSet picker), ContextBadge header chip, full editor with tabs (menus / workspace tree / settings), tiered RBAC (admin menus.manage, user menus.fork). Replaces silo'd menu-store + workspace-store slices in superspace. Resolver chain: user nav-context cache > user assignment > workspace default > system. Source: superspace.","category":"ui","tags":["ui","navigation","workspace","menu","shell","convex","rbac"],"href":"/slices/workspace-shell","previewPath":"/preview/slices/workspace-shell","install":""},{"source":"slice","slug":"library","title":"Library — resource hub (prompts · visuals · snippets · links)","description":"Grab-bag resource hub. One polymorphic `libraryItems` table holds six kinds — prompt, image, video, link, download, snippet — with per-kind payload fields switched on `kind` (no joins). Attribution-first: every item carries optional source/license/tools so re-shares stay correct. Collections group items. Convex-backed (schema + queries + unauthenticated mutations); SEO override fields reused from the `seo` peer slice so the surface matches blog/projects rows. Public view = filterable card grid + per-item detail with copy-to-clipboard for prompts/snippets and an opt-in upvote control. Lifted 2026-05-28 from rahmanef.com; 432-LOC mutations + 330-LOC detail split for the 200-LOC cap; Indonesian copy + custom primitives stripped (prop-driven English defaults); cross-slice auth + comments-votes coupling dropped (consumer wraps mutations + supplies the upvote handler).","category":"data","tags":["library","resources","prompts","snippets","moodboard","downloads","attribution","seo","personal-brand"],"href":"/slices/library","install":"npx rahman-resources add library"},{"source":"slice","slug":"data-table","title":"Data Table — TanStack + shadcn","description":"Generic DataTable<TData> on TanStack Table v8 + shadcn Table. Sorting (3-state column headers), toolbar search bound to any column, pagination, checkbox row selection with count footer, column-visibility dropdown. density compact|comfortable + selectable on|off variant axes. Pure UI — consumer supplies columns + data.","category":"data","tags":["table","data-table","datagrid","sorting","filtering","pagination","selection","basics"],"href":"/slices/data-table","previewPath":"/preview/slices/data-table","install":"npx rahman-resources add data-table"},{"source":"slice","slug":"pages-cms","title":"Pages CMS — block-composed multi-page editor","description":"A small multi-page CMS. PagesView (list + CRUD: create/edit/duplicate/delete/publish) + PageEditorView (metadata form + block editor) + a read-only public BlockRenderer. Pages are composed of 11 block kinds: hero, text, feature-list, cta, logo-cloud, testimonial, video, image-gallery, faq, stats, pricing-table. Ships a localStorage adapter (LocalPagesProvider) + a generic Home/About/Pricing seed so it runs env-free — or wire the bundled pagesReducer + PagesProvider to your own backend (optional Convex copy-source included). Pure UI; no Convex required.","category":"content","tags":["content","cms","pages","blocks","editor","builder","basics"],"href":"/slices/pages-cms","previewPath":"/preview/slices/pages-cms","install":"npx rahman-resources add pages-cms"},{"source":"slice","slug":"feedback-states","title":"Feedback States — loading skeletons + empty/error states","description":"Two co-located placeholder surfaces behind one slug. loading: a configurable LoadingSkeleton over the shadcn Skeleton (kind presets text / card / list / table / form / page / block, overridable count + columns) plus a spinner LoadingState (inline / block / overlay) for in-flight work. empty: a configurable EmptyState over the shadcn Empty (404 / 500 / 403 / no-results / empty-list / first-use, overridable icon/title/copy/actions) plus an ErrorPage full-page wrapper for app/not-found.tsx and app/error.tsx. Install one surface with `npx rr add feedback-states loading|empty`, or both with `npx rr add feedback-states`. Replaces ad-hoc animate-pulse divs, hand-rolled Loader2 spans, and one-off error pages.","category":"ui","tags":["loading","skeleton","spinner","empty-state","404","500","403","error-page","fallback","placeholder","basics"],"href":"/slices/feedback-states","previewPath":"/preview/slices/feedback-states","install":"npx rahman-resources add feedback-states"},{"source":"slice","slug":"marketing-chrome","title":"Marketing Chrome — Header + Footer","description":"MarketingHeader (split | centered | minimal layouts, sticky option, mobile sheet menu) + MarketingFooter (columns | slim layouts, link columns, social icons, legal bar). Brand / nav / CTA / columns all props — no hardcoded content. Lucide stand-ins for brand glyphs; swap a brand icon set post-copy (README).","category":"ui","tags":["header","footer","navbar","marketing","navigation","chrome","basics"],"href":"/slices/marketing-chrome","previewPath":"/preview/slices/marketing-chrome","install":"npx rahman-resources add marketing-chrome"},{"source":"slice","slug":"settings","title":"Settings — account + appearance shells","description":"Two settings surfaces behind one slug, each adapter-driven so the slice owns no data. account: SettingsShell two-column surface (nav collapses to a Select on mobile) — Profile (avatar/name/email/bio), Preferences (theme/language/density), Notifications (switch rows), Danger zone (AlertDialog-confirmed delete) over an ASYNC SettingsAdapter { load, save(patch) } with optimistic save + rollback; createMemoryAdapter ships for demos. appearance: AppearancePanel (style/mode/accent/wallpaper/reduce-transparency/display) over a SYNC per-setting AppearanceAdapter, plus the generic SettingsSection / SettingsRow / Segmented / AccentSwatches primitives you compose custom panels from. Install one surface with `npx rr add settings account|appearance`, or both with `npx rr add settings`.","category":"ui","tags":["settings","preferences","account","appearance","theme","adapter","shell","primitives","ui","basics"],"href":"/slices/settings","previewPath":"/preview/slices/settings","install":"npx rahman-resources add settings"},{"source":"slice","slug":"notifications-center","title":"Notifications Center — bell + inbox","description":"NotificationBell (ghost icon button, unread badge, popover or sheet surface) + NotificationList (All/Unread tabs, mark-all-read, clear, ScrollArea rows with kind icon, relative time, hover actions). NotificationsAdapter contract (list/markRead/markAllRead/dismiss/clear) with a useSyncExternalStore-friendly memory adapter included — swap in Convex for production (sketch in README).","category":"ui","tags":["notifications","inbox","bell","unread","toast","basics"],"href":"/slices/notifications-center","previewPath":"/preview/slices/notifications-center","install":"npx rahman-resources add notifications-center"},{"source":"slice","slug":"design-studio","title":"Design Studio — photo / social design canvas","description":"A layered canvas studio: image/text/shape layers with filters, masks, transforms, safe-area guides and aspect presets (1:1/4:5/9:16/16:9), plus an export modal (download / copy / import JSON). Runs fully offline on bundled gradient-SVG samples. Host wiring is one call: configureMediaStudio({ saveDoc, imageSources }) lights up Save-to-host and feeds real image sources. Self-contained: inspector hooks are inert seams in lib/host.ts.","category":"os","tags":["canvas","editor","layers","filters","export","design","ui"],"href":"/slices/design-studio","previewPath":"/preview/slices/design-studio","install":"npx rahman-resources add design-studio"},{"source":"slice","slug":"quicklinks","title":"Quicklinks — website shortcuts with favicons","description":"A website-shortcut grid: add/remove links with auto favicons (Google s2) and new-tab open. State lives behind an injectable QuicklinksStore — createLocalStore persists to localStorage (SSR-safe hydrate), createMemoryStore suits previews/tests, configureQuicklinks swaps in a host store. Pairs with appshell: the useQuickLinks capability + QuicklinkIcon surface the same links in the dock/Launchpad/mobile grid.","category":"os","tags":["shortcuts","bookmarks","favicons","launcher","ui"],"href":"/slices/quicklinks","previewPath":"/preview/slices/quicklinks","install":"npx rahman-resources add quicklinks"}],"slices":[{"slug":"image-editor","title":"Image Editor — layered raster editor","category":"os","kind":"ui","version":"2.1.1","description":"A Photoshop-style raster image editor built on Konva. Layers panel (reorder, opacity, visibility, lock, 16 blend modes), free transform (move/scale/rotate/flip via a Transformer), image + text + shape + paint layers, brush & eraser with size/opacity/hardness, non-destructive adjustments + filters, canvas resize/aspect presets, and LAYER STYLES: stroke, drop shadow, outer glow, clipping mask. One-click BACKGROUND REMOVAL runs fully in-browser via @imgly/background-removal (free, no API key — downloads a small ONNX model on first use). Undo/redo, zoom/pan, shortcuts, PNG/JPG/WebP export. v2 adds an AI FUNCTION-CALLING layer: every editor operation is a named, schema'd command (EDITOR_COMMANDS registry + useEditorCommands binding) driven by an in-editor chat; the streaming bridge is injectable via configureAgentStream(fn) and everything except the chat works without it. A headless server barrel (server.ts) runs commands against documents with no DOM. Image I/O via props (initialImage / onSave).","slicePath":"frontend/slices/image-editor","convexPaths":[],"tags":["image-editor","photoshop","canvas","konva","layers","filters","background-removal","paint","ai","ui"],"install":"npx rahman-resources add image-editor","previewPath":"/preview/slices/image-editor"},{"slug":"reel-editor","title":"Reel — video timeline editor","category":"os","kind":"ui","version":"1.2.1","description":"A complete in-browser video editor. Real media clips (image/video/audio) on a layered multi-track timeline — the top row renders frontmost, with ▲▼ reorder and per-track lock/hide/mute. ONE Canvas-2D draw path is shared by the live preview and the realtime MediaRecorder exporter, so what you see is exactly what renders (WebM with real mixed audio: per-clip volume/fades/auto-duck through a streaming audio graph). Per-clip trim/speed (0.25–4×)/reverse, dissolve/wipe/slide transitions via clip overlap, keyframes (opacity/scale/x/y/rotation) with easing + one-click In/Out animation presets, text styling with preset grid, color grading + vignette, filmstrip thumbnails + real waveforms, snapping, split/duplicate. The workspace is config-driven: 6 resizable layout presets (react-resizable-panels v4) incl. quick-import files-pane layouts, plus custom composition size. Drafts auto-save to localStorage. Self-contained: toasts via sonner, the files pane runs on an injectable fs adapter (configureReelFs; in-memory mock by default), and shell hooks (inspector/activity) are inert seams in lib/host.ts.","slicePath":"frontend/slices/reel-editor","convexPaths":[],"tags":["video","video-editor","timeline","nle","keyframes","transitions","webm","canvas","ui"],"install":"npx rahman-resources add reel-editor","previewPath":"/preview/slices/reel-editor"},{"slug":"media-viewer","title":"Preview — media quick-look","category":"os","kind":"ui","version":"1.2.1","description":"A quick-look media viewer in the macOS Preview spirit. Images render on a zoomable (40–300%) checkerboard stage so transparency reads; audio gets a card player with a CSS-bar waveform + transport; video gets play/pause + scrubber + volume; PDFs embed full-bleed and text gets a simple surface. The toolbar carries a type-indicator chip, zoom, Download, Open-in-editor, and prev/next. Two integration seams in lib/host.ts make it portable: configureMediaSource maps fs paths to fetchable URLs (identity by default, so public URLs work with zero wiring) and configureMediaOpener routes the Open-in-editor handoff (image → image-editor, video/audio → reel-editor) to your shell — both inert until set. Launched bare it shows a fully offline sample gallery (inline SVG gradients, simulated A/V playback). Pairs with file-explorer (onOpenFile → MediaViewer payload) and the editors.","slicePath":"frontend/slices/media-viewer","convexPaths":[],"tags":["media","preview","viewer","quick-look","image","video","audio","pdf","ui"],"install":"npx rahman-resources add media-viewer","previewPath":"/preview/slices/media-viewer"},{"slug":"code-editor","title":"Code — overlay syntax editor","category":"os","kind":"ui","version":"1.2.1","description":"A lightweight code editor in the VS-Code spirit without the weight: a transparent textarea layered over a highlighted pre (regex tokenizer for JS/TS/JSON/CSS) gives real editing with live syntax color and a line-number gutter; a tab strip tracks dirty buffers with Cmd/Ctrl+S save; a status bar shows path, Ln/Col, tab size, language and save state. The explorer is a lazy per-directory tree — each folder lists on expand, with inline new-file/new-folder affordances — rendered as a rail on desktop and a Sheet on mobile, and the new-file form is a responsive dialog ⇄ bottom drawer. The filesystem is INJECTED via a small CodeFsAdapter (list/read/write/mkdir): point configureCodeFs at a real API or use the bundled writable in-memory mock (seeded sample tree) so it works with zero backend. Writes are best-effort — a read-only host flags the save but keeps the local buffer. Pairs with file-explorer (onOpenFile → payload) and appshell.","slicePath":"frontend/slices/code-editor","convexPaths":[],"tags":["code","editor","syntax-highlight","ide","tabs","file-tree","ui"],"install":"npx rahman-resources add code-editor","previewPath":"/preview/slices/code-editor"},{"slug":"system-monitor","title":"System Monitor — host telemetry dashboard","category":"os","kind":"ui","version":"1.2.1","description":"An Activity-Monitor-style dashboard: circular CPU/RAM/disk/GPU gauges, rolling CPU + network sparklines on glass panels, and a live process table — polling every 1.5s with a ~40-point history. Telemetry is INJECTED via a small SysMonAdapter (stats/processes): point configureSysmon at a real host API (/proc, an agent, a cloud endpoint) or keep the bundled wavy in-browser mock so the dashboard renders alive with zero backend. Self-contained: shell inspector hooks are inert seams in lib/host.ts.","slicePath":"frontend/slices/system-monitor","convexPaths":[],"tags":["monitoring","telemetry","dashboard","gauges","sparkline","processes","ui"],"install":"npx rahman-resources add system-monitor","previewPath":"/preview/slices/system-monitor"},{"slug":"booking","title":"Booking — session request form + owner inbox","category":"os","kind":"ui","version":"1.0.0","description":"One app that is BOTH a public 'book a session' request form AND the owner's triage inbox — it flips to show the inbox when the viewer can manage. Visitors submit name/email/topic (+ optional preferred time / note); the owner sees pending requests with Confirm / Decline. The backend is INJECTED via a small BookingAdapter (submit/list/setStatus/canManage): point configureBooking at your store, or keep the bundled in-memory mock so it renders fully interactive — form + inbox — with zero backend.","slicePath":"frontend/slices/booking","convexPaths":[],"tags":["booking","contact","form","inbox","lead","scheduling","ui"],"install":"npx rahman-resources add booking","previewPath":"/preview/slices/booking"},{"slug":"html-studio","title":"HTML Studio — sandboxed HTML/CSS/JS editor with live preview","category":"os","kind":"ui","version":"1.0.0","description":"A tiny web-page studio: write HTML / CSS / JS and see it render LIVE in a sandboxed iframe (srcdoc + sandbox=allow-scripts WITHOUT allow-same-origin, so user code runs in an opaque origin and cannot read the host) — then Save to a shareable /p/<slug>. Code / Split / Preview view toggle, a device-width preview (responsive / tablet / phone), a saved-pages rail, and public/private visibility. The backend is INJECTED via a small HtmlStudioAdapter (save/load/list/remove): point configureHtmlStudio at your store, or keep the bundled in-memory mock so the editor + live preview + saved list are fully interactive with zero backend.","slicePath":"frontend/slices/html-studio","convexPaths":[],"tags":["html","editor","sandbox","iframe","preview","playground","code","ui"],"install":"npx rahman-resources add html-studio","previewPath":"/preview/slices/html-studio"},{"slug":"resources-launcher-admin","title":"Resources Admin — curated icon-launcher CRUD","category":"os","kind":"ui","version":"1.0.0","description":"An owner-gated admin app for a curated icon-launcher: add / edit / remove / reorder links (label, lucide icon NAME, url, group, order) that open in a new tab. The backend is INJECTED via a small ResourcesAdapter (list/upsert/remove/canManage): point configureResources at your store, or keep the bundled in-memory mock so the whole CRUD — including reorder — is interactive with zero backend. Icons are stored as lucide NAME strings and resolved client-side, so the same data drives a public launcher surface.","slicePath":"frontend/slices/resources-launcher-admin","convexPaths":[],"tags":["launcher","links","bookmarks","admin","crud","icons","ui"],"install":"npx rahman-resources add resources-launcher-admin","previewPath":"/preview/slices/resources-launcher-admin"},{"slug":"profile","title":"Profile — CV + identity card","category":"os","kind":"ui","version":"1.0.0","description":"One owner's identity in two co-located variants, behind one slug. resume: a clean one-column résumé / CV — name, roles, location, contacts, summary, skills, experience (role · org · period + bullets), projects — rendered by <Resume /> off a configureResume() seam, with a Print / PDF button. card: an \"About This Mac\"-style identity card — avatar / monogram, name, roles, outbound links, FAQ accordion — rendered by <AboutProfile /> off a configureAbout() seam. Both render a populated placeholder unwired (zero backend). Install one surface with `npx rr add profile resume|card`, or both with `npx rr add profile`.","slicePath":"frontend/slices/profile","convexPaths":[],"tags":["resume","cv","profile","portfolio","about","identity","bio","card","links","faq","print","ui"],"install":"npx rahman-resources add profile","previewPath":"/preview/slices/profile"},{"slug":"start-here","title":"Start Here — guided OS onboarding tour","category":"os","kind":"ui","version":"1.0.0","description":"A guided 'Start Here' tour that lays the OS out as a path of stages, each stage opening real apps from the LIVE registry — drift-proof, it reads the injected app catalog instead of a hardcoded list, so adding an app surfaces it automatically (in a stage if listed, else a final 'Everything else' bucket). The catalog, the open(id) callback, and the stage journey are INJECTED via a small StartHereAdapter (apps / open / stages): point configureStartHere at your live app registry + window opener, or keep the bundled in-memory mock (a few generic apps + 3 stages) so the welcome tour renders fully alive with zero host.","slicePath":"frontend/slices/start-here","convexPaths":[],"tags":["onboarding","tour","welcome","launcher","guide","os","ui"],"install":"npx rahman-resources add start-here","previewPath":"/preview/slices/start-here"},{"slug":"os-terminal","title":"Terminal — shell emulator with live passthrough + PTY seam","category":"os","kind":"ui","version":"1.2.1","description":"A React-DOM terminal: monospace glass aesthetic, colored prompt, arrow-key history, red stderr. Built-ins (ls·cd·pwd·cat·mkdir·touch·rm·mv·cp·echo·whoami·date·uname·df·ps·neofetch·help·clear) run against an in-memory FsModel, so it works with ZERO backend. Wire configureTerminal({ mode:\"live\", fs, exec }) and ls/cat read through your real filesystem, file mutations mirror to it, and any unknown command passes through exec.run as a one-shot shell call (stdout/stderr/exit rendered). Self-contained: shell inspector hooks are inert seams in lib/host.ts.","slicePath":"frontend/slices/os-terminal","convexPaths":[],"tags":["terminal","shell","cli","emulator","exec","ui"],"install":"npx rahman-resources add os-terminal","previewPath":"/preview/slices/os-terminal"},{"slug":"assistant","title":"Assistant — agent workspace with streaming chat","category":"os","kind":"ui","version":"1.1.1","description":"A full agent workspace: streaming chat with typing deltas and graceful error notes, plus a library where users CREATE and manage agents (persona, avatar gradient, system prompt), skills, and automations (trigger + schedule forms) — all persisted in localStorage, no backend. Preset agents/skills ship as starting points. The model is INJECTED: configureAssistantStream takes any (messages) => AsyncIterable<string> — your SSE endpoint, the AI SDK, an agent loop — and until wired a typing demo stream keeps the whole UI working offline. Self-contained: shell inspector hooks are inert seams in lib/host.ts.","slicePath":"frontend/slices/assistant","convexPaths":[],"tags":["ai","assistant","chat","agents","streaming","automations","ui"],"install":"npx rahman-resources add assistant","previewPath":"/preview/slices/assistant"},{"slug":"browser","title":"Browser — remote headless-browser chrome","category":"os","kind":"ui","version":"1.2.1","description":"Full browser chrome for a REMOTE headless browser: omnibar with search-or-URL detection, bookmark bar, history view (localStorage-persisted), favicons with globe fallback, busy states, and a screenshot viewport that forwards clicks/typing/keys/scroll into the remote page. The backend is INJECTED via a small BrowserAdapter (state/screenshot/act): point configureBrowser at a real headless-Chromium service (e.g. Playwright behind an authed route — any site renders, no X-Frame-Options problem) or keep the bundled offline canvas demo renderer that fakes the viewport so the whole chrome works with zero backend. Self-contained: shell inspector hooks are inert seams in lib/host.ts.","slicePath":"frontend/slices/browser","convexPaths":[],"tags":["browser","headless","playwright","remote","omnibar","bookmarks","ui"],"install":"npx rahman-resources add browser","previewPath":"/preview/slices/browser"},{"slug":"app-store","title":"App Store — install, create + toggle apps","category":"os","kind":"ui","version":"1.2.1","description":"The dynamic half of an app registry, in two surfaces. AppStore: a storefront with featured hero, category sidebar, install/uninstall cards for a curated catalog, and toggles that disable built-in apps/shell features (the DISABLED set is persisted so new apps always ship enabled). CreateApp: build a custom app — name, glyph, accent gradient, runtime (html/node/python/shell), entry — with live manifest preview. Both write one localStorage registry; useInstalledApps() turns it into appshell-style descriptors (html apps mount in a sandboxed iframe, command apps in a terminal-style console). The console's shell is INJECTED via configureAppStoreExec (demo echo by default). Self-contained: inspector hooks are inert seams in lib/host.ts; the Create-App flow is bundled in (no cross-slice imports).","slicePath":"frontend/slices/app-store","convexPaths":[],"tags":["app-store","registry","installer","dynamic-apps","launcher","ui"],"install":"npx rahman-resources add app-store","previewPath":"/preview/slices/app-store"},{"slug":"file-explorer","title":"File Explorer — Tree + CRUD + Preview + Properties","category":"os","kind":"full","version":"1.6.0","description":"A complete, portable file-directory explorer: a collapsible folder TREE sidebar (lazy-loaded per dir), a responsive BREADCRUMB that auto-collapses to a dropdown, grid + list views with sort, multi-select, a right-click context menu, drag-and-drop (internal move + external file/folder upload), inline rename, and full CRUD (new folder, rename, cut/copy/paste, move, delete/trash, empty trash). The filesystem backend is INJECTED via a small FileExplorerAdapter (list/mkdir/remove/move/copy/upload/usage/rawUrl) — point it at a real API or use the bundled createMockAdapter() (a writable in-memory tree) so it works with zero backend. Opening a file fires an onOpenFile(path, entry) callback you wire to your own viewer/editor. Self-contained: imports only @/components/ui/* + @/lib/utils. Ported from os-vps (Topside) files manager. Pairs with appshell as the file-dir counterpart to a notion-style sidebar.","slicePath":"frontend/slices/file-explorer","convexPaths":[],"tags":["files","file-manager","explorer","tree","breadcrumb","crud","sidebar","ui"],"install":"npx rahman-resources add file-explorer","previewPath":"/preview/slices/file-explorer"},{"slug":"appshell","title":"AppShell — Desktop + Mobile OS Shell","category":"os","kind":"full","version":"1.5.1","description":"Generic, brand-free OS-style shell framework. One <AppShell manifest> wrapper provider gives a project a macOS-style window manager (drag/snap/maximize, dock, menu bar, Spotlight) AND an iOS-style mobile surface (home pager, app library, control center, widgets), driven entirely by a manifest: brand, apps, features, surface regions, capabilities, persistence, keymap. Five shell features (search, inspector, notifications, control-center, widgets) are bundled as defineFeature() contributions inside the slice and mount via named <Slot>s. Responsiveness is a single ResponsiveProvider + 4 DRY primitives (AppFrame, MasterDetail, ResponsiveToolbar, TouchList). Imports nothing project-specific — the consumer injects data/auth/AI through manifest.capabilities. Lifted from os-vps (Topside).","slicePath":"frontend/slices/appshell","convexPaths":[],"tags":["shell","window-manager","desktop","mobile","responsive","framework","ui"],"install":"npx rahman-resources add appshell","previewPath":"/preview/slices/appshell"},{"slug":"convex-auth","title":"Convex Auth — Multi-Provider Sign-in","category":"auth","kind":"backend","version":"0.4.0","description":"@convex-dev/auth with Password (PBKDF2-SHA256 100k, self-hosted-friendly), Anonymous (guest), Google OAuth, and Resend magic-link. Ships a production SignInPage plus a presentational, props-driven AuthCard (v0.3) — choose `methods` (google, github, magic-link, password signin/signup tabs, phone OTP, anonymous) and render the card anywhere with different props; handlers default to a mock so it's interactive with zero wiring. i18n via labels. No Clerk.","slicePath":"frontend/slices/convex-auth","convexPaths":["convex/features/auth"],"tags":["auth","convex","password","magic-link","google","anonymous","no-clerk","pbkdf2"],"install":"npm i @convex-dev/auth @auth/core resend","previewPath":"/preview/slices/convex-auth"},{"slug":"payment","title":"Payment — Indonesia PSP (DOKU · Midtrans)","category":"integrations","kind":"full","version":"0.4.0","description":"Indonesia payment providers behind one slug + ONE shared Convex backend (convex/features/payment discriminates on a provider column: paymentOrders + paymentWebhookEvents, unprefixed). Two frontend variants: doku — DOKU Hosted Checkout + Direct (VA / QRIS / e-Wallet / PayLater), HMAC-SHA256 signed REST, signature-verified webhook, idempotent retries, dependency-free, server-side env only. midtrans — Snap hosted-modal checkout + orders history (needs npm midtrans-client + a NEXT_PUBLIC_MIDTRANS_CLIENT_KEY). Install one with `npx rr add payment doku|midtrans`, or both. A future stripe variant is reserved in the schema's provider union.","slicePath":"frontend/slices/payment","convexPaths":["convex/features/payment"],"tags":["payment","checkout","indonesia","doku","midtrans","snap","qris","virtual-account","ewallet","psp"],"install":"","previewPath":"/preview/slices/payment"},{"slug":"resend-newsletter","title":"Resend — Transactional & Newsletter","category":"integrations","kind":"backend","version":"0.2.0","description":"Transactional email + newsletter blast via Resend. Double opt-in flow + audience segmentation. Magic-link delivery for Convex Auth. Bundles the subscribers list backend (subscribe / confirm / unsubscribe / count) — formerly the standalone `subscribers` slice, merged here in v0.1.3.","slicePath":"frontend/slices/resend-newsletter","convexPaths":["convex/features/newsletter","convex/features/subscribers"],"tags":["email","newsletter","resend"],"install":"npm i resend react-email @react-email/components","previewPath":"/preview/slices/resend-newsletter"},{"slug":"ai-workspace","title":"AI Workspace — chat · studio · agents","category":"ai","kind":"full","version":"0.3.0","description":"Three AI surfaces as shadcn-style variants — `npx rr add ai-workspace <variant>` for one, or `npx rr add ai-workspace` for all + a switcher. Only the chat variant pulls a Convex backend (per-variant convex gating).\n\n  • chat — floating <AiChatFab /> + createAgenticChatSend: real function-calling over any ToolHost (@/shared/agentic), key-guarded, over convex/features/aiChat.\n  • studio — <AiStudioPage /> single-prompt generation canvas (variation grid + version tree, Suno / Midjourney / Lovable pattern) + aiStudioTools so a shared agent can drive generations.\n  • agents — <AiAgentsPage /> autonomous-worker run dashboard + createAgentRunner(host) which drives the shared function-calling loop and records each tool_use as a RunStep trace.\n\nUse cases: support chatbot in a marketing site, AI generation product (image / code / text / audio), background workers (nightly audits, scheduled crawls, moderation). studio + agents are frontend-only — wire your own persistence.","slicePath":"frontend/slices/ai-workspace","convexPaths":["convex/features/aiChat"],"tags":["ai","ai:chatbot","ai:studio","ai:agent","agent-mode","tool-calls","streaming","generation","async","traces","multimodal"],"install":"npm i ai @ai-sdk/anthropic @ai-sdk/openai","previewPath":"/preview/slices/ai-workspace"},{"slug":"ai-admin","title":"AI Admin — Console (Instructions · Skills · Tools · Agents · Providers)","category":"ai","kind":"full","version":"0.3.0","description":"Central operator console for the whole AI stack. Every other ai-* feature reads its registries from here. Tabs ordered to match the build-flow:\n\n  1. Providers   — register Anthropic / OpenAI / Google / Mistral / Ollama (API keys AES-encrypted at rest)\n  2. Models      — per-provider catalog (capabilities, context window, pricing)\n  3. Instructions — custom system-prompt library (Claude Projects-style)\n  4. Skills      — named instruction + model default + tool defaults (consumed by chat + studio)\n  5. Tools       — JSON-schema function specs + impl (http / convex / shell) + sandbox flag\n  6. Agents      — skill × model × tools × max-iter (consumed by ai-agents)\n  7. Budgets     — per-workspace cost caps + alerts + hard kill\n  8. Audit       — every AI call: actor / agent / tokens / cost / latency / outcome\n\nIncludes Create-Agent / Create-Skill / Create-Tool / Create-Instruction wizards.","slicePath":"frontend/slices/ai-admin","convexPaths":["convex/features/ai"],"tags":["ai","ai:admin","instructions","skills","tools","agents","providers","models","budgets","audit"],"install":"","previewPath":"/preview/slices/ai-admin"},{"slug":"ai-router","title":"AI Router — Backend Provider Proxy","category":"ai","kind":"backend","version":"0.5.0","description":"Backend infrastructure (no UI). Single proxy that every other ai-* feature calls. Tier-routed — nano (Haiku) for classification, mid (Sonnet) for chat, flagship (Opus) for deep reasoning. Per-call usage log + cost guard. Works with direct provider keys or OpenRouter umbrella.\n\nNot something you mount — installed automatically as a peer when you add ai-workspace.","slicePath":"frontend/slices/ai-router","convexPaths":["convex/features/ai"],"tags":["ai","ai:backend","tier-routing","cost-guard"],"install":"npm i ai @openrouter/ai-sdk-provider","previewPath":"/preview/slices/ai-router"},{"slug":"vector-search","title":"Convex Vector Search","category":"data","kind":"full","version":"0.2.0","description":"Embeddings-based search via Convex's built-in vector index. Embed via OpenAI text-embedding-3-small (1536-dim), query via vectorIndex().","slicePath":"frontend/slices/vector-search","convexPaths":["convex/features/search"],"tags":["search","vector","embeddings","convex","rag"],"install":"npm i openai","previewPath":"/preview/slices/vector-search"},{"slug":"cal-com-booking","title":"Cal.com Booking","category":"data","kind":"full","version":"0.2.0","description":"Embedded Cal.com booking widget + webhook receiver to mirror bookings into Convex.","slicePath":"frontend/slices/cal-com-booking","convexPaths":["convex/features/bookings"],"tags":["data","scheduling","cal-com","bookings"],"install":"npm i @calcom/embed-react","previewPath":"/preview/slices/cal-com-booking"},{"slug":"command-menu","title":"Command Menu","category":"ui","kind":"ui","version":"0.3.0","description":"Renderless ⌘K command palette + generic search modal. Consumer supplies CommandGroup[] + onSelect + label bag; slice owns dialog chrome, ⌘K hotkey, MRU history. Pulled UP from notion-page-clone's command-palette renderless surface (Wave N+3.7) — Nosion adapters dropped at the kitab boundary.","slicePath":"frontend/slices/command-menu","convexPaths":[],"tags":["ui","palette","cmd-k","navigation","keyboard","search","notion-like"],"install":"npm i cmdk","previewPath":"/preview/slices/command-menu"},{"slug":"motion-primitives","title":"Motion Primitives (8)","category":"ui","kind":"ui","version":"0.1.0","description":"Eight ready-to-style motion components: marquee, kinetic-heading, magnetic, cursor-spotlight, stat-counter, reading-progress, grain, lightbox. Framer-Motion-powered, tree-shakeable. Facade slice — pulls from template-base/frontend/slices/motion-primitives.","slicePath":"template-base/frontend/slices/motion-primitives","convexPaths":[],"tags":["ui","motion","animation","marquee","framer-motion"],"install":"npm i framer-motion","previewPath":"/preview/slices/motion-primitives"},{"slug":"responsive-dialog","title":"Responsive Dialog (Sheet ↔ Modal)","category":"ui","kind":"ui","version":"0.1.0","description":"ResponsiveDialog — auto-switches between bottom Sheet (mobile) and centered Dialog (desktop) at the md breakpoint. Same API as shadcn Dialog. Kitab forbids raw <dialog>; use this everywhere. Facade slice — pulls from template-base/frontend/slices/responsive-dialog.","slicePath":"template-base/frontend/slices/responsive-dialog","convexPaths":[],"tags":["ui","dialog","modal","sheet","responsive","primitive"],"install":"","previewPath":"/preview/slices/responsive-dialog"},{"slug":"dashboard-shell","title":"Dashboard Shell — Responsive","category":"ui","kind":"ui","version":"0.1.0","description":"ResponsiveDashboardShell — desktop sidebar + topbar, mobile dock + sheet sidebar, breakpoint-aware. Ports superspace's layout/dashboard/{Desktop,Mobile,Responsive}DashboardShell + sidebar primary/secondary slots. Facade slice — pulls from template-base/frontend/slices/dashboard-shell.","slicePath":"template-base/frontend/slices/dashboard-shell","convexPaths":[],"tags":["ui","layout","dashboard","sidebar","topbar","responsive"],"install":"","previewPath":"/preview/slices/dashboard-shell"},{"slug":"three-column","title":"Three-Column Layout — Sidebar/Content/Inspector","category":"ui","kind":"ui","version":"0.1.0","description":"ThreeColumnLayoutAdvanced — collapsible left/right + resizable widths + responsive breakpoints + PanelSection compound (Header/Items/Footer) + per-panel footer slots. Models shadcn sidebar API for the panel interior. Pair with PanelGroup/PanelMenu/PanelSeparator primitives. Trigger ≠ header (V-wave separation rule).","slicePath":"template-base/frontend/slices/three-column","convexPaths":[],"tags":["ui","layout","three-column","sidebar","inspector","panel-section","responsive","resizable"],"install":"","previewPath":"/preview/three-column-trio"},{"slug":"broadcast-channel-sync","title":"BroadcastChannel — Cross-tab Sync","category":"data","kind":"ui","version":"0.2.0","description":"Same-origin cross-tab + cross-iframe state sync via BroadcastChannel API. Tiny, no backend, no install.","slicePath":"frontend/slices/broadcast-channel-sync","convexPaths":[],"tags":["realtime","cross-tab","broadcast-channel","demo-pattern"],"install":"// no install — Web Platform API","previewPath":"/preview/slices/broadcast-channel-sync"},{"slug":"rbac-roles","title":"RBAC — Roles & Permissions","category":"auth","kind":"full","version":"0.3.0","description":"RBAC engine ported from superspace. 6 system role presets (owner/admin/manager/staff/client/guest with levels), dot-namespaced permissions with `*` / `feature.*` wildcard matching, and pure check helpers (resolvePermissions / hasPermission / roleHasPermission). Props-driven UI primitives: <PermissionGate>, usePermissions, <RoleBadge>, <PermissionMatrix>. Convex template ships a tenant-scoped rbac_roles table + checkPermission / requirePermission helpers + idempotent seedSystemRoles, with a PLATFORM_ADMIN_EMAILS superadmin bypass. Pair with `user-management` for the members / invites / roles-admin UI. @convex-dev/auth aware — no Clerk.","slicePath":"frontend/slices/rbac-roles","convexPaths":["convex/features/rbac_roles"],"tags":["rbac","auth","permissions","roles","authorization","no-clerk","convex"],"install":"npx rahman-resources add rbac-roles","previewPath":"/preview/slices/rbac-roles"},{"slug":"user-management","title":"User Management","category":"auth","kind":"full","version":"0.7.0","description":"Full superspace-parity user management, props-driven + RBAC-agnostic. <UserManagementPanel> tabs Members + Roles + Teams + Access: member table (search / filter / sort, inline role dropdown, soft-remove), InviteDialog (with an optional 'propagate to sub-workspaces' toggle — same / step-down role strategy) + PendingInvites, a RolesPanel (custom roles via permission matrix; system roles read-only), a TeamsPanel (named user groups), and an AccessMatrix (users × tenants grid with inline role assignment). All permission-gated. You pass `roles` + `currentPerms` + the permission catalog (resolved from rbac-roles) + callbacks; the slice imports no other slice's frontend. Convex ships um_members + um_invites + um_teams + um_team_members + um_tenant_links + member / invite / team / hierarchy endpoints + getAccessMatrix (gated via rbac-roles' requirePermission); roles CRUD reuses rbac-roles'. The hierarchy is a generic edge tree — rr never owns the tenant entities. P0–P4c: the complete user-management epic.","slicePath":"frontend/slices/user-management","convexPaths":["convex/features/user_management"],"tags":["user-management","members","rbac","auth","team","admin","convex","no-clerk"],"install":"npx rahman-resources add user-management","previewPath":"/preview/slices/user-management"},{"slug":"admin-panel","title":"Admin Panel — Unified Product Admin","category":"infra","kind":"full","version":"0.1.0","description":"17-section admin surface (events, funnels, attribution, users, A/B, flags, pricing, CMS, email, audit, ...) gated by RBAC. Auto-filters sidebar by tier (solo/influencer/organization) and user permissions. Single backend resolver (getMyAdminAccess) mirrors frontend gate so UI can never leak.","slicePath":"template-base/frontend/slices/admin-panel","convexPaths":["template-base/convex/features/admin-panel"],"tags":["admin","owner","platform","rbac","instrumentation","panel"],"install":"npx rahman-resources add admin-panel","previewPath":"/preview/slices/admin-panel"},{"slug":"event-tracking","title":"Event Tracking — P0 Instrumentation","category":"data","kind":"full","version":"0.1.0","description":"Client SDK + Convex ingestion endpoint for structured product events. Auto-captures page_view/signup/login + UTM/referrer/first-touch attribution. Batched flush via requestIdleCallback. Targets <100ms p99 ingestion.","slicePath":"template-base/frontend/slices/admin-panel/slices/events","convexPaths":["template-base/convex/features/admin-panel","template-base/convex/features/analytics"],"tags":["events","analytics","instrumentation","attribution","utm","p0"],"install":"npx rahman-resources add event-tracking","previewPath":"/preview/slices/event-tracking"},{"slug":"icon-picker","title":"Icon Picker","category":"ui","kind":"ui","version":"0.5.0","description":"Emoji + lucide (outline) + phosphor (fill) icon picker with search, 10-color palette, Twemoji/native toggle, recents tracking, and smart positioning. Two-tab layout (Emoji | Icon) with sub-variant pills (Native | Twemoji / Lucide | Phosphor fill). One string stores emoji OR lucide:Name OR phosphor:Name OR with ?c=hex tint — backwards-compat with raw-emoji fields. Popover auto-flips on collision (caps to Radix `--radix-popover-content-available-height`) and falls back to centered Dialog when neither side fits. Two variants: Popover (compact trigger) and Inline (full sheet/dialog use). Lifted 2026-05-25 from open-silong.","slicePath":"frontend/slices/icon-picker","convexPaths":[],"tags":["icon","emoji","lucide","phosphor","picker","twemoji","notion","notion-like","responsive"],"install":"npx rahman-resources add icon-picker","previewPath":"/preview/slices/icon-picker"},{"slug":"activity","title":"Activity — public productivity log","category":"data","kind":"full","version":"0.3.0","description":"Public-facing weekly activity log. Lists user-facing activities grouped by ISO week with schema.org-friendly markup, designed to maximise SEO so the question 'what is <person> working on this week?' lands here. Convex-backed (schema + queries + unauthenticated mutations); MCP-friendly so AI workflows (Claude / GPT / custom agents) can append entries directly. All user-facing copy + per-category labels + date/time locale are prop-driven (English defaults). Lifted 2026-05-27 from rahmanef.com; 225-LOC view split into view + 2 sub-components + 4 lib helpers for the 200-LOC cap; Indonesian strings + custom primitives stripped; cross-slice auth import dropped (consumer wraps mutations).","slicePath":"frontend/slices/activity","convexPaths":["convex/features/activity"],"tags":["activity","productivity","log","now-page","feed","mcp","seo","personal-brand"],"install":"npx rahman-resources add activity"},{"slug":"rate-limit","title":"Rate Limit","category":"infra","kind":"backend","version":"0.3.0","description":"Convex-backed per-key request counter. Atomic check-and-increment via `consume` mutation; expired rows pruned by `_pruneExpired` internalMutation wired to a 5-min cron. Replaces single-replica in-memory Map so multi-replica Next deployments share buckets. Limits live in an in-code POLICY map keyed by namespace prefix (admin-login:<ip>, mcp:<ip>) — never caller-supplied; optional RATE_LIMIT_SERVER_KEY env gates anonymous calls. Lifted 2026-05-16 from rahmanef.com; hardened 2026-06-07.","slicePath":"frontend/slices/rate-limit","convexPaths":["convex/features/rate_limit"],"tags":["infra","rate-limit","convex","backend","throttle"],"install":"npx rahman-resources add rate-limit"},{"slug":"testimonials","title":"Testimonials","category":"content","kind":"backend","version":"0.1.1","description":"Quote/name/role rotator backend. Public `listAll` + `get` (no auth — testimonials are public), admin CRUD via `requireAdmin`, internal `seed` for one-shot bootstrap. Indexed by `order` so carousel/grid keeps stable rotation. Lifted 2026-05-16 from rahmanef.com; token-based admin gate swapped for rr `_shared/auth`.","slicePath":"frontend/slices/testimonials","convexPaths":["convex/features/testimonials"],"tags":["content","testimonials","convex","backend","marketing"],"install":"npx rahman-resources add testimonials","previewPath":"/preview/slices/testimonials"},{"slug":"services","title":"Services","category":"content","kind":"backend","version":"0.1.1","description":"Service offerings backend — title + summary + deliverables array + sort order. Public read, admin CRUD, internal seed. Pairs with a frontend services grid/list (consumer-side). Lifted 2026-05-16 from rahmanef.com; token-based admin gate swapped for rr `_shared/auth`.","slicePath":"frontend/slices/services","convexPaths":["convex/features/services"],"tags":["content","services","convex","backend","marketing","agency"],"install":"npx rahman-resources add services","previewPath":"/preview/slices/services"},{"slug":"create-your-mcp","title":"Create Your MCP","category":"ai","kind":"full","version":"0.2.0","description":"Turn any rr-based app into an MCP server that ChatGPT custom apps, Claude.ai connectors, Cursor MCP, and other AI clients authenticate to. OAuth 2.1 + PKCE flow with code → bearer exchange, env-configured vendor-host allowlist, single-use codes, 1-year bearer tokens, scope-tagged tools, opaque error collapsing, constant-time token compare. Static MCP_API_KEY fallback for service-account / CI scripts. Sanitized 2026-05-16 from rahmanef.com's production MCP integration — vendor literals (chatgpt.com / OpenAI paths) replaced with MCP_OAUTH_ALLOWED_HOSTS + MCP_OAUTH_ALLOWED_PATH_PREFIXES env vars so the slice ships portable.","slicePath":"frontend/slices/create-your-mcp","convexPaths":["convex/features/create_your_mcp"],"tags":["ai","mcp","oauth","pkce","chatgpt","claude","cursor","convex","integration"],"install":"npx rahman-resources add create-your-mcp","previewPath":"/preview/slices/create-your-mcp"},{"slug":"contact-form-resend","title":"Contact Form + Resend","category":"integrations","kind":"full","version":"0.1.0","description":"Contact form posting to Resend email API. Server Action + Zod input validation. Convex mutation for storage + Resend send.","slicePath":"template-base/frontend/slices/contact-form-resend","convexPaths":[],"tags":["form","email","resend","convex"],"install":"npx rahman-resources add contact-form-resend","previewPath":"/preview/slices/contact-form-resend"},{"slug":"admin","title":"Admin — generic shell + composed console","category":"infra","kind":"full","version":"0.2.1","description":"Access-gated admin surfaces behind one slug, in two variants — each pulls ONLY its own convex backend (per-variant convex gating). shell: a HEADLESS minimal generic admin shell — a titled landing region + a portable buildAdminStats(opts) nav-from-registry factory (consumer supplies a SliceRegistryAdapter + queryTable reader) over convex/features/admin; superadmin gate via SUPER_ADMIN_EMAIL. console: the composed admin panel distilled from ~15 project admin panels — a gated two-column shell (AdminConsole) over a 26-section registry (ADMIN_CONSOLE_SECTIONS: observability / identity / ai / content / commerce / config) that mounts OTHER rr slices via a consumer-supplied `components` map (users→user-management, roles→rbac-roles, ai→ai-admin, tenants→platform-admin) plus 5 owned gap sections (Analytics, Audit-log, Nav config, SEO health, Leads/CRM) over convex/features/admin_console (ac_leads + ac_nav_items); gate injected, PLATFORM_ADMIN_EMAILS allowlist. Install one with `npx rr add admin shell|console`, or both with `npx rr add admin`. NOT the multi-tenant control plane — that's the separate `platform-admin` slice (the console's `tenants` section provider).","slicePath":"frontend/slices/admin","convexPaths":["convex/features/admin","convex/features/admin_console"],"tags":["infra","admin","console","shell","dashboard","composition","rbac","access-gate","registry"],"install":"npx rahman-resources add admin","previewPath":"/preview/slices/admin"},{"slug":"platform-admin","title":"Platform Admin — Multi-Tenant Control Plane","category":"infra","kind":"full","version":"0.2.0","description":"Multi-tenant SaaS control plane. Workspace lifecycle ops (list/delete/cascade), per-tenant tier presets (gates + quota), KPI dashboard grid. Consumer-domain bits injected via adapter props (tenantTablesAdapter / tierPresets / kpiSources). Contract-only scaffold; canonical implementation lands via /rr-send from superspace. See docs/contract-negotiations-2026-05-15.md §4.","slicePath":"frontend/slices/platform-admin","convexPaths":[],"tags":["infra","admin","multi-tenant","saas","platform"],"install":"npx rahman-resources add platform-admin","previewPath":"/preview/slices/platform-admin"},{"slug":"audit-log","title":"Audit Log — Workspace Events","category":"infra","kind":"backend","version":"0.3.0","description":"Workspace-scoped audit event recorder. Canonical logAuditEvent helper for mutations + actions; supports entity tracking, before/after diff, IP/user-agent capture.","slicePath":"frontend/slices/audit-log","convexPaths":["convex/features/audit-log"],"tags":["infra","audit","compliance","logging"],"install":"npx rahman-resources add audit-log","previewPath":"/preview/slices/audit-log"},{"slug":"comments","title":"Comments — Threaded","category":"content","kind":"full","version":"0.3.0","description":"Polymorphic-target threaded comments. Consumer picks `TargetRef = { kind, id, subId? }` (e.g. page+block, blog+slug, task+id). Reply nesting is real: `parentId` end-to-end + `buildThread(flat) → CommentNode[]` tree (oldest-first, orphan-safe). Renderless <CommentsThread> + <CommentsAnchor> wrappers; useComments(bindings, opts) returns items + `tree` + openCount + CRUD + forbiddenWords guard. Adapter pattern — see contract-negotiations §1.","slicePath":"frontend/slices/comments","convexPaths":["convex/features/comments"],"tags":["content","social","comments","threaded","annotations"],"install":"npx rahman-resources add comments","previewPath":"/preview/slices/comments"},{"slug":"seo","title":"SEO — AI Metadata Generator","category":"content","kind":"full","version":"0.3.0","description":"Service slice for SEO metadata generation — Anthropic-backed action with per-user 24h cost guard + portable persona prop. No public route. Backend exposes generate + generateAndApply mutations gated by requireAdmin; consumers inject brand voice via the personaContext arg (or buildSeoSystemPrompt factory).","slicePath":"frontend/slices/seo","convexPaths":["convex/features/seo"],"tags":["content","seo","ai","anthropic","metadata-generator"],"install":"npx rahman-resources add seo","previewPath":"/preview/slices/seo"},{"slug":"publisher-clean-html","title":"Publisher — clean HTML","category":"content","kind":"ui","version":"0.1.0","description":"A pure render-to-clean-HTML engine harvested from the Instatic CMS publisher, decoupled from its host caching / loops / visual-components / Layer-C islands. publishPage(tree, registry, options) walks a generic node tree bottom-up: render children, escape every prop by its schema-declared control type (url -> safe-URL, richtext -> DOMPurify, svg -> SVG profile, else HTML-escape), dedup CSS by moduleId (~60-80% shrink), splice author classes + inline styles onto each rendered root, then assemble <!DOCTYPE> + reset + framework + module CSS + a deterministic (sorted) CSP plan. Bring your own ModuleRegistry (each module is a pure render(props, children) -> { html, css? }). Security spine: HTML escape + safe-URL, CSS-value guard (expression()/{}/</), </style RAWTEXT neutraliser, and an injectable DOMPurify seam (configureRichtextSanitizer) that fails closed — without a runtime, richtext strips all tags and SVG returns empty. Stateless, env-free, ZERO npm deps, no Convex. Ships a PublishPreview iframe-srcdoc pane. A Wave-1 leaf of the feature-harvest ULTRAPLAN; a dependency of the planned visual-page-canvas.","slicePath":"frontend/slices/publisher-clean-html","convexPaths":[],"tags":["content","publisher","html","static-export","sanitization","csp","css-dedup","render"],"install":"npx rahman-resources add publisher-clean-html","previewPath":"/preview/slices/publisher-clean-html"},{"slug":"content-loops","title":"Content Loops","category":"content","kind":"ui","version":"0.1.0","description":"A data-source-driven repeater harvested from the Instatic CMS base.loop engine, decoupled from its publisher / page-tree / entryStack machinery into a plain React slice. Register pluggable LoopEntitySource backends (each declares display fields + an async fetch returning { items, totalItems }); drop <ContentLoop source|sourceId filters orderBy variants={[A, B]} /> to render one component per item, round-robining items across variants so alternating / featured layouts need no per-item branching. Ships a namespaced source registry (ids must be 'ns.name', so consumer sources can't shadow each other), createMockLoopSource for env-free previews + tests, and none/infinite pagination via useLoopPagination (a shadcn Load more button accumulates pageSize chunks). LoopItem.fields is a generic resolved-value bag — variants read item.fields.title directly, no second lookup. UI-only: no Convex tables shipped; point a source's fetch at Convex/REST when you have a backend. First slice of the feature-harvest ULTRAPLAN (docs/feature-harvest) and a dependency of the planned site-templates-engine + visual-page-canvas.","slicePath":"frontend/slices/content-loops","convexPaths":[],"tags":["content","loop","repeater","list","data-source","pagination","variants"],"install":"npx rahman-resources add content-loops","previewPath":"/preview/slices/content-loops"},{"slug":"markdown","title":"Markdown — page container with CRUD tabs + diagrams","category":"content","kind":"ui","version":"0.3.1","description":"Markdown (.md) page container with optional CRUD surfaces. <MarkdownPage content={md} tabs={['read','write','review']}/> — Read renders rich text (headings, lists, todo, GitHub-style callouts, fenced code, KaTeX, tables, images, <details> toggles, inline marks); Write is a raw-source editor with snippet toolbar + live preview; Review overlays block-anchored comments (add/resolve, controlled via onAddComment/onResolveComment or internal fallback). Fenced ```mermaid blocks render as SVG diagrams (dynamic-imported mermaid) and ```chart blocks as recharts bar/line/area/pie from a JSON spec. Self-contained: ships its own parser (parseMarkdown → MdNode[]) + inline renderer, no notion runtime dependency. Sync is by shared grammar: the notion cluster's blocksToMarkdown / markdownToBlocks bridge (@notion/shared/lib/markdown) emits/consumes the exact same markdown this slice parses, so anything readable in the notion block page is readable here and vice-versa. No store, no Convex — comments CRUD is consumer-wired callbacks.","slicePath":"frontend/slices/markdown","convexPaths":[],"tags":["content","markdown","reader","editor","review","comments","mermaid","chart","rich-text","docs","notion-sync"],"install":"npx rahman-resources add markdown","previewPath":"/preview/slices/markdown"},{"slug":"notion-app","title":"Notion App — Block Editor","category":"content","kind":"full","version":"1.1.1","description":"Nested vertical slice (slice-of-slices) housing the full notion-page-clone block editor. Mount <PageEditor pageId/> inside <EditorAdapterProvider adapter/> — with `{}` it is a working plain-text/markdown block editor (slash menu, markdown triggers `# - > [] etc.`, dnd-kit drag with column layouts, per-block toolbar with turn-into/color/duplicate, per-block undo, paste-markdown import); host capabilities light up per optional adapter: data (block+page CRUD), selection (multi-select), comments (per-block popover), ai (Ask-AI panel), database (render + picker), mention (@-typeahead), page (nav/uploads/covers). Cluster-private shared layer under @notion/* — vendored block/page/database model, uid, inline markdown, page→md/html export. Pure convex block helpers (_blocks/_blockOps, unit-tested) ship in convex/features/notion. Same markdown grammar as the standalone `markdown` slice (blocksToMarkdown/markdownToBlocks bridge).","slicePath":"frontend/slices/notion-app","convexPaths":["convex/features/notion"],"tags":["content","notion","editor","block-editor","rich-text","slash-menu","drag-drop","adapter-seam"],"install":"npx rahman-resources add notion-app"},{"slug":"sections","title":"Sections — composable marketing/landing sections","category":"content","kind":"ui","version":"0.4.0","description":"Canonical landing-page composition slice — replaces the former standalone hero / cta / pricing-page / faq-section / feature-grid / testimonials-grid / blog-section / portfolio-section / changelog-feed slices (all merged here as `kind` variants in v0.2.0). Ships a pure reducer (v0.4.0: LANDING_UPSERT auto-shifts sibling `order` to keep positions unique; LANDING_DELETE closes the gap) + LandingProvider store adapter + admin LandingView/LandingEditorView built on the shared CRUD primitives, plus a per-section LandingSectionShell (background image + custom Tailwind className overlay + scroll-reveal). NEW in v0.4.0: a `sections/` library of config-driven public renderers (StatsSection, TestimonialsSection, FaqSection, PricingSection, NewsletterSection, CustomSection) that read `LandingSection.config` JSON merged over template defaults — content stays dashboard-controlled without per-template renderer code; plus `parse-config` helpers (parseConfigBadge/parseConfigField) and `sections/config` guards (parseConfigObject, cfg*). Sections carry { kind, order, title, subtitle, enabled, imageUrl, imageRatio, bgImageUrl, className, config (JSON) } with up/down reorder arrows. Lifted from the _templates fleet `_shared/landing` (2026-06-11) — the 8 standalone templates ship a byte-similar copy; this rr slice is the SSOT. Used by all 7 rr website templates.","slicePath":"frontend/slices/sections","convexPaths":[],"tags":["admin","landing","cms","sections","crud","renderer"],"install":"npx rahman-resources add sections"},{"slug":"motion-kit","title":"Motion Kit — scroll reveals, carousel, accordion, micro-interactions","category":"ui","kind":"ui","version":"0.1.0","description":"Zero-dependency scroll-motion layer (IntersectionObserver + CSS) plus an embla carousel and a radix accordion, packaged so any page gets tasteful entrance animations without pulling in a motion library. Ships Reveal (fade-up/fade/fade-left/fade-right/zoom), Stagger (incremental per-child reveal for grids/lists), CountUp (rAF count-to-value with locale formatting; integers), Marquee (infinite logo/brand strip with hover-pause + edge fade), and the useInView hook behind them; plus Carousel (embla, optional Autoplay plugin) and Accordion (radix). All reveal + keyframe motion is gated behind prefers-reduced-motion. Consumers append globals-motion.css to their app/globals.css for the [data-reveal] transitions + accordion/marquee/blob keyframes. Lifted 2026-06-10 from the _templates fleet `_shared/motion` copy — the 8 standalone website templates already ship a byte-identical copy; this rr slice is the SSOT so future scaffolds get it via `npx rr add motion-kit`. Pairs with landing-sections (its renderers consume these primitives).","slicePath":"frontend/slices/motion-kit","convexPaths":[],"tags":["ui","motion","animation","scroll","reveal","carousel","accordion","marquee","countup","embla"],"install":"npx rahman-resources add motion-kit","previewPath":"/preview/slices/motion-kit"},{"slug":"storefront-checkout","title":"Storefront Checkout — guest cart + checkout composition","category":"content","kind":"ui","version":"0.2.0","description":"Guest-friendly shopping cart for catalog storefronts. CartProvider holds items in React context with localStorage persistence (anonymous buyers keep their cart across reloads, zero backend). CartWidget is a header trigger with live count badge opening a slide-over Sheet: per-item qty steppers, remove, subtotal, checkout CTA to a host route. CheckoutSummary renders the order panel on the checkout page. Props-driven R3 — no convex/react anywhere; the host resolves a NUMERIC price per catalog item before add() and MUST re-price every line server-side when placing the order (client subtotal is display-only, never the charge). Proven end-to-end on wirausaha-os: catalog → cart → server-priced placeOrder action → DOKU Direct instructions → webhook flips paid (reactive). Pairs with doku-payment ≥0.2 (guest checkout: optional userId + buyer contact, key-guarded actions, guest-readable status query) or midtrans-payment.","slicePath":"frontend/slices/storefront-checkout","convexPaths":[],"tags":["ecommerce","cart","checkout","guest","storefront","payment","localStorage","sheet"],"install":"npx rahman-resources add storefront-checkout","previewPath":"/preview/slices/storefront-checkout"},{"slug":"theme-presets","title":"Theme Presets — unified switcher with bundled tweakcn registry","category":"ui","kind":"ui","version":"0.4.0","description":"Single unified theme controller for next-themes apps. ThemePresetSwitcher ships a Palette-icon Popover trigger with three stacked sections: (1) sticky light/dark/system mode tabs, (2) sticky preset-count row with a Default reset button, (3) scrollable color-preset list grouped by mood (Profesional / Bold / Hangat / Artistik / Gelap + Lainnya). Hover-to-preview + click-to-commit + restore-on-close semantics. ThemePresetProvider context wraps state so deeply-nested consumers read via useThemePreset() instead of mounting the switcher directly. ThemeColorSync wrapper enables live tweakcn-CSS-variable preview on routes that need it. Tweakcn registry (~30 curated presets after HIDDEN_PRESETS filter drops Doom 64 / Cyberpunk / Neo Brutalism / Bubblegum / Candyland / Pastel Dreams) ships inside the slice as registry-data.json and loads lazily via dynamic import — code-splits into its own chunk, zero consumer public/ setup, no network roundtrip to a hosted URL. localStorage key `host:theme-preset` (rename via slice fork). CK-1F (2026-05-23) — collapsed prior TweakcnSwitcher + ThemePicker + phantom `theme-preset-switcher` catalog entry into this single component.","slicePath":"frontend/slices/theme-presets","convexPaths":[],"tags":["ui","theme","tweakcn","color","preset","switcher","popover","next-themes","notion-like"],"install":"npx rahman-resources add theme-presets","previewPath":"/preview/slices/theme-presets"},{"slug":"site-setup-wizard","title":"Site Setup Wizard — first-run site setup","category":"ui","kind":"ui","version":"0.2.0","description":"Post-claim onboarding wizard for clone-to-own templates, graduated from the headless template surface (2026-06-06). Multi-step card flow (Identitas / Branding / Konten / Selesai) that stores ALL site config in the host backend via a props-driven save callback — a non-coder configures their site with zero code. Branding step ships a readable shadcn Select theme-preset picker (color swatches per preset + grouped headers + live preview callback — replaces the white-on-white native select), brand color quick-chips, light/dark/system default mode, logo/favicon upload via injected ImageField, and optional Analytics ID. Identity step hints invalid email format. 'Lewati setup' marks onboarded without fields and reverts any browsed-but-unsaved preset. Props-driven (R3): no convex/react import — host wires settings.upsert / seed.seedSample / setup.status into props; pairs naturally with the theme-presets slice (registry + tweakcnSwatches + previewTweakcnPreset) but works with any theme system or none.","slicePath":"frontend/slices/site-setup-wizard","convexPaths":[],"tags":["ui","onboarding","wizard","setup","first-run","branding","theme","clone-to-own","templates"],"install":"npx rahman-resources add site-setup-wizard","previewPath":"/preview/slices/site-setup-wizard"},{"slug":"file-upload","title":"File Upload — pluggable upload + URL resolver with storage-adapter contract","category":"data","kind":"ui","version":"0.3.0","description":"Host-pluggable file upload + URL resolution. Ships <FileUploadButton>, <FileChip>, useFileUpload(), useFileUrl() — all reading from a FilesAdapter the host wires via <FilesAdapterProvider>. Bundled localStorage demo adapter stores blobs as data URLs (small files only). Drop in your own adapter for Convex / S3 / GCS / R2. The slice itself has zero backend coupling, proving the storage-adapter pattern for the rest of the open-silong blocked-pending-adapter wave (cover, workspace-io, templates, …).","slicePath":"frontend/slices/file-upload","convexPaths":[],"tags":["data","upload","files","storage","adapter","portable","notion-like"],"install":"npx rahman-resources add file-upload","previewPath":"/preview/slices/file-upload"},{"slug":"selection","title":"Selection — marquee multi-select + bulk actions","category":"ui","kind":"ui","version":"0.2.0","description":"Framework-agnostic multi-selection for any vertical list (Notion-style blocks, table rows, cards). Hold-and-drag on empty space draws a rubber-band rectangle — AutoCAD-style: drag RIGHT selects only fully-enclosed items (solid ring), drag LEFT selects anything the rectangle touches (dashed green ring). Click an item's edge to select (Shift = range, Cmd/Ctrl = toggle). Selecting activates items with a ring + data-block-selected attribute. Backspace/Delete bulk-deletes, Escape and click-outside clear, and a floating count toolbar offers Delete/Clear. SelectionProvider owns only the id set — the host owns the data via onBulkDelete(ids). Pairs with notion-shell (the notion-clone template wires it onto the editor); lifted from notion-page-clone's block-selection slice.","slicePath":"frontend/slices/selection","convexPaths":[],"tags":["ui","selection","marquee","rubber-band","multi-select","bulk","notion","blocks","list"],"install":"npx rahman-resources add selection","previewPath":"/preview/slices/selection"},{"slug":"notion-ui","title":"Notion UI — page editor · database · sidebar primitives","category":"ui","kind":"ui","version":"0.24.0","description":"The pure, props-driven Notion-clone primitives suite behind one slug, over one shared domain-type model (Block / Page / Property / Database / DbView …). page: the page + block editor (NotionPage / NotionHeader / NotionBlock, SlashMenu, block renderers, inline-markdown decorator, built-in code (highlight.js) + equation (KaTeX)). database: a drop-in 11-view database (table/board/list/gallery/calendar/feed/chart/dashboard/form/map/timeline, 18 property/cell types, per-type column config, filter/sort/group/calculate, row peek + multi-select, cell drag-fill, formula engine, CSV/JSON import-export). sidebar: a standalone tree-nav sidebar (dnd reorder + reparent with depth projection, inline rename, per-row icon picker). All stateless + callback-CRUD — the host owns the data. Install one surface with `npx rr add notion-ui page|database|sidebar`, or all with `npx rr add notion-ui`; the shared/ domain type model is copied for every variant. NOT the full Notion app — that's the separate `notion` slice (adapter + Convex backed).","slicePath":"frontend/slices/notion-ui","convexPaths":[],"tags":["ui","notion","notion-like","database","table","board","list","gallery","calendar","feed","chart","dashboard","form","map","timeline","gantt","kanban","views","filter","sort","property","files","person","formula","timestamp","unique-id","csv","json","import","export","template","data","backup","primitive","optional","embeddable"],"install":"npx rahman-resources add notion-ui","previewPath":"/preview/slices/notion-ui"},{"slug":"image-picker","title":"Image Picker — one-button image/wallpaper chooser (gallery · upload · link · Unsplash · reposition)","category":"ui","kind":"ui","version":"0.3.0","description":"Generic image/wallpaper picker — not coupled to Notion. The headline API is ONE button (ImagePickerButton) that opens a dialog with 4 tabs: Gallery (12 colours + 8 gradients + Notion textures), Upload (drag/click, ≤8MB), Link (paste any https image URL), Unsplash (bundled curated landscapes + live search). On pick, onChange fires with an ImageValue ({ type, value, positionY?, metadata? }). ImageBanner is the optional reposition-able band — render an ImageValue as a full-width cover / profile header / card hero with hover controls: Change (opens the dialog), Reposition (drag the vertical focal point), Remove. The slice imports NO other slice and NO backend — the upload backend and Unsplash search are INJECTED as props (onUpload + searchUnsplash), so it drops into any app: wire onUpload to the `files` slice and searchUnsplash to a server route via unsplashSearchVia('/api/unsplash') that holds UNSPLASH_ACCESS_KEY server-side (never NEXT_PUBLIC). Ships a curated Unsplash fallback + gallery so it works with zero config. parseImage normalizes legacy raw-string values; imageStyle builds the focal-point CSS. Wired into the notion-page-clone template as the page cover via NotionPage's coverSlot.","slicePath":"frontend/slices/image-picker","convexPaths":[],"tags":["ui","image","picker","wallpaper","cover","upload","unsplash","gallery","reposition","files","primitive","portable","dialog"],"install":"npx rahman-resources add image-picker","previewPath":"/preview/slices/image-picker"},{"slug":"workspace-shell","title":"Workspace Shell — atomic (workspace × menuSet) NavContext","category":"ui","kind":"full","version":"1.0.0","description":"Unified workspace + menu navigation primitive. NavContext = (workspaceId, menuSetId) atomic pair. 2-tier dropdown switcher (workspace radio + menuSet picker), ContextBadge header chip, full editor with tabs (menus / workspace tree / settings), tiered RBAC (admin menus.manage, user menus.fork). Replaces silo'd menu-store + workspace-store slices in superspace. Resolver chain: user nav-context cache > user assignment > workspace default > system. Source: superspace.","slicePath":"template-base/frontend/slices/workspace-shell","convexPaths":["template-base/convex/features/workspaceShell"],"tags":["ui","navigation","workspace","menu","shell","convex","rbac"],"install":"","previewPath":"/preview/slices/workspace-shell"},{"slug":"library","title":"Library — resource hub (prompts · visuals · snippets · links)","category":"data","kind":"full","version":"0.2.0","description":"Grab-bag resource hub. One polymorphic `libraryItems` table holds six kinds — prompt, image, video, link, download, snippet — with per-kind payload fields switched on `kind` (no joins). Attribution-first: every item carries optional source/license/tools so re-shares stay correct. Collections group items. Convex-backed (schema + queries + unauthenticated mutations); SEO override fields reused from the `seo` peer slice so the surface matches blog/projects rows. Public view = filterable card grid + per-item detail with copy-to-clipboard for prompts/snippets and an opt-in upvote control. Lifted 2026-05-28 from rahmanef.com; 432-LOC mutations + 330-LOC detail split for the 200-LOC cap; Indonesian copy + custom primitives stripped (prop-driven English defaults); cross-slice auth + comments-votes coupling dropped (consumer wraps mutations + supplies the upvote handler).","slicePath":"frontend/slices/library","convexPaths":["convex/features/library"],"tags":["library","resources","prompts","snippets","moodboard","downloads","attribution","seo","personal-brand"],"install":"npx rahman-resources add library"},{"slug":"data-table","title":"Data Table — TanStack + shadcn","category":"data","kind":"ui","version":"0.2.0","description":"Generic DataTable<TData> on TanStack Table v8 + shadcn Table. Sorting (3-state column headers), toolbar search bound to any column, pagination, checkbox row selection with count footer, column-visibility dropdown. density compact|comfortable + selectable on|off variant axes. Pure UI — consumer supplies columns + data.","slicePath":"frontend/slices/data-table","convexPaths":[],"tags":["table","data-table","datagrid","sorting","filtering","pagination","selection","basics"],"install":"npx rahman-resources add data-table","previewPath":"/preview/slices/data-table"},{"slug":"pages-cms","title":"Pages CMS — block-composed multi-page editor","category":"content","kind":"ui","version":"0.1.0","description":"A small multi-page CMS. PagesView (list + CRUD: create/edit/duplicate/delete/publish) + PageEditorView (metadata form + block editor) + a read-only public BlockRenderer. Pages are composed of 11 block kinds: hero, text, feature-list, cta, logo-cloud, testimonial, video, image-gallery, faq, stats, pricing-table. Ships a localStorage adapter (LocalPagesProvider) + a generic Home/About/Pricing seed so it runs env-free — or wire the bundled pagesReducer + PagesProvider to your own backend (optional Convex copy-source included). Pure UI; no Convex required.","slicePath":"frontend/slices/pages-cms","convexPaths":[],"tags":["content","cms","pages","blocks","editor","builder","basics"],"install":"npx rahman-resources add pages-cms","previewPath":"/preview/slices/pages-cms"},{"slug":"feedback-states","title":"Feedback States — loading skeletons + empty/error states","category":"ui","kind":"ui","version":"0.2.0","description":"Two co-located placeholder surfaces behind one slug. loading: a configurable LoadingSkeleton over the shadcn Skeleton (kind presets text / card / list / table / form / page / block, overridable count + columns) plus a spinner LoadingState (inline / block / overlay) for in-flight work. empty: a configurable EmptyState over the shadcn Empty (404 / 500 / 403 / no-results / empty-list / first-use, overridable icon/title/copy/actions) plus an ErrorPage full-page wrapper for app/not-found.tsx and app/error.tsx. Install one surface with `npx rr add feedback-states loading|empty`, or both with `npx rr add feedback-states`. Replaces ad-hoc animate-pulse divs, hand-rolled Loader2 spans, and one-off error pages.","slicePath":"frontend/slices/feedback-states","convexPaths":[],"tags":["loading","skeleton","spinner","empty-state","404","500","403","error-page","fallback","placeholder","basics"],"install":"npx rahman-resources add feedback-states","previewPath":"/preview/slices/feedback-states"},{"slug":"marketing-chrome","title":"Marketing Chrome — Header + Footer","category":"ui","kind":"ui","version":"0.2.0","description":"MarketingHeader (split | centered | minimal layouts, sticky option, mobile sheet menu) + MarketingFooter (columns | slim layouts, link columns, social icons, legal bar). Brand / nav / CTA / columns all props — no hardcoded content. Lucide stand-ins for brand glyphs; swap a brand icon set post-copy (README).","slicePath":"frontend/slices/marketing-chrome","convexPaths":[],"tags":["header","footer","navbar","marketing","navigation","chrome","basics"],"install":"npx rahman-resources add marketing-chrome","previewPath":"/preview/slices/marketing-chrome"},{"slug":"settings","title":"Settings — account + appearance shells","category":"ui","kind":"ui","version":"1.0.0","description":"Two settings surfaces behind one slug, each adapter-driven so the slice owns no data. account: SettingsShell two-column surface (nav collapses to a Select on mobile) — Profile (avatar/name/email/bio), Preferences (theme/language/density), Notifications (switch rows), Danger zone (AlertDialog-confirmed delete) over an ASYNC SettingsAdapter { load, save(patch) } with optimistic save + rollback; createMemoryAdapter ships for demos. appearance: AppearancePanel (style/mode/accent/wallpaper/reduce-transparency/display) over a SYNC per-setting AppearanceAdapter, plus the generic SettingsSection / SettingsRow / Segmented / AccentSwatches primitives you compose custom panels from. Install one surface with `npx rr add settings account|appearance`, or both with `npx rr add settings`.","slicePath":"frontend/slices/settings","convexPaths":[],"tags":["settings","preferences","account","appearance","theme","adapter","shell","primitives","ui","basics"],"install":"npx rahman-resources add settings","previewPath":"/preview/slices/settings"},{"slug":"notifications-center","title":"Notifications Center — bell + inbox","category":"ui","kind":"ui","version":"0.2.0","description":"NotificationBell (ghost icon button, unread badge, popover or sheet surface) + NotificationList (All/Unread tabs, mark-all-read, clear, ScrollArea rows with kind icon, relative time, hover actions). NotificationsAdapter contract (list/markRead/markAllRead/dismiss/clear) with a useSyncExternalStore-friendly memory adapter included — swap in Convex for production (sketch in README).","slicePath":"frontend/slices/notifications-center","convexPaths":[],"tags":["notifications","inbox","bell","unread","toast","basics"],"install":"npx rahman-resources add notifications-center","previewPath":"/preview/slices/notifications-center"},{"slug":"design-studio","title":"Design Studio — photo / social design canvas","category":"os","kind":"ui","version":"1.0.0","description":"A layered canvas studio: image/text/shape layers with filters, masks, transforms, safe-area guides and aspect presets (1:1/4:5/9:16/16:9), plus an export modal (download / copy / import JSON). Runs fully offline on bundled gradient-SVG samples. Host wiring is one call: configureMediaStudio({ saveDoc, imageSources }) lights up Save-to-host and feeds real image sources. Self-contained: inspector hooks are inert seams in lib/host.ts.","slicePath":"frontend/slices/design-studio","convexPaths":[],"tags":["canvas","editor","layers","filters","export","design","ui"],"install":"npx rahman-resources add design-studio","previewPath":"/preview/slices/design-studio"},{"slug":"quicklinks","title":"Quicklinks — website shortcuts with favicons","category":"os","kind":"ui","version":"1.0.0","description":"A website-shortcut grid: add/remove links with auto favicons (Google s2) and new-tab open. State lives behind an injectable QuicklinksStore — createLocalStore persists to localStorage (SSR-safe hydrate), createMemoryStore suits previews/tests, configureQuicklinks swaps in a host store. Pairs with appshell: the useQuickLinks capability + QuicklinkIcon surface the same links in the dock/Launchpad/mobile grid.","slicePath":"frontend/slices/quicklinks","convexPaths":[],"tags":["shortcuts","bookmarks","favicons","launcher","ui"],"install":"npx rahman-resources add quicklinks","previewPath":"/preview/slices/quicklinks"}],"layouts":[],"recipes":[],"rules":["NO Clerk — use @convex-dev/auth","shadcn-only UI","copy-first flow","stack: Next 16 + React 19 + Tailwind 4 + Convex self-hosted + TS strict","workspace isolation per Convex query","RBAC + audit log on every mutation","commit convex/_generated before deploy","audit-bp score ≥80 before deploy"]}