# Manef Resource > Dual-framework Next.js/React + SvelteKit/Svelte vertical-slice catalog with Convex, npm and Bun install paths. Copy-first. Production-grade. Site: https://resource.manef.dev Repo: https://github.com/rahmanef63/resource-site Product by: Manef (https://manef.dev) Author: Rahman Fakhru (https://rahmanef.com) ## Stack - [Next.js 16](https://nextjs.org/docs) - [React 19](https://react.dev) - [SvelteKit 2](https://svelte.dev/docs/kit) - [Svelte 5](https://svelte.dev/docs/svelte/overview) - [TypeScript](https://www.typescriptlang.org) - [Tailwind CSS 4](https://tailwindcss.com) - [Convex](https://docs.convex.dev) - [convex-svelte](https://docs.convex.dev/client/svelte/overview) - [@convex-dev/auth](https://labs.convex.dev/auth) - [shadcn/ui](https://ui.shadcn.com) - [Native Svelte components](https://svelte.dev/docs) - [Lucide](https://lucide.dev) - [npm](https://docs.npmjs.com) - [Bun](https://bun.sh) - [@sveltejs/adapter-node](https://svelte.dev/docs/kit/adapter-node) - [Dokploy](https://dokploy.com) ## What's in the box - **Vertical-Slice Architecture**: Each feature owns its config, page, views, components, settings, agent, and Convex mirror. Add or remove a feature by adding or removing one folder. - **Copy-First Flow**: Never greenfield. Every artifact comes from a proven source project (internal kitab-core, rahmanef.com, cescadesigns, notion-clone). Edit imports, ship. - **shadcn-only UI**: All components are shadcn primitives or composed from them. ResponsiveDialog, DateField, FileUpload — no raw HTML buttons or dialogs. - **audit-bp Gated**: Best-practice auditor pulls latest Next 16 / React 19 / Convex docs via Context7 before scoring. Score ≥80 to ship. - **Dokploy in One Command**: si-coder skill creates the GitHub repo, pushes, configures Dokploy, sets DNS, and triggers deploy. Zero human involvement. - **Self-hosted Convex + @convex-dev/auth**: No Clerk. Self-hosted Convex backend in the same docker-compose. Postgres-backed for prod. - **Auto-generated Slice Docs**: Per-slice DEPS.md, CONTRACT.md, STATUS.md, USAGE.md generated from imports + defineFeature config. - **Cookbook + Recipes**: 8 layout variants and 8 feature drop-ins (block editor, command palette, db views, comments, ...) ready to mount. ## Layouts ## Slices Drop-in vertical features. Each ships the metadata pair (`slice.json`, with an embedded `contract` block, + `slice.manifest.json`). Install with `npx rr add ` — CLI auto-augments env, installs deps, and copies into `frontend/slices//` (+ optional `convex/features//`). ### AI Core Kit - slug: `ai-core` kind: `ui` category: `ui` - Shared UI + helper substrate for the ai-* slice cluster (lifted from models-rahmanef-com). Ships the ResponsiveDialog/ConfirmDialog overlay primitive (+ useConfirm), SectionErrorBoundary, a light/dark useTheme hook, fmt/ago/dt formatters, and a provider-agnostic ConvexError renderer (errData/ErrorLine/FRIENDLY). React-only, no Convex, no shadcn — the lightweight no-shadcn dialog variant. Foundation the byok/workspaces/memory/combos/scheduled-agents/channels slices import via @/features/ai-core. - install: `npx rr add ai-core` - detail: https://resource.manef.dev/slices/ai-core - prompt: https://resource.manef.dev/agents/ai-core ### Image Editor — layered raster editor - slug: `image-editor` kind: `ui` category: `os` - Framework-parity layered raster editor. React/Next remains default with react-konva; native Svelte 5/SvelteKit uses Konva directly over the same document/layer model, unified doc+paint history, command registry, project IO, masks, adjustments/styles, background removal and stage export semantics. Svelte includes move/transform, brush/eraser/mask painting, eyedropper, zoom/pan, text/shape/paint/adjustment layers, layers/properties panels, image/project IO, background removal, export and optional host-injected AI with no React/Next/react-konva/Lucide/shadcn/FilePicker/agent runtime. - install: `npx rr add image-editor` - detail: https://resource.manef.dev/slices/image-editor - prompt: https://resource.manef.dev/agents/image-editor - agent recipe: React/default: `npx rr add image-editor`. SvelteKit: `npx rr add image-editor --framework sveltekit`. Both share the same layered document, command registry, doc+paint history, project format, adjustment/style/mask semantics, background-removal and Konva stage export contract. React keeps react-konva/shadcn and automatic agent wiring; Svelte uses Konva directly and accepts optional runAssistant/registerTools. Keep AI/model transport and file authorization in the host; the editor UI is not an authorization boundary. ### Reel — video timeline editor - slug: `reel-editor` kind: `ui` category: `os` - Framework-parity in-browser video editor. React/Next remains default with the existing resizable workspace; native Svelte 5/SvelteKit reuses the same immutable composition model, observable undo/redo history, Canvas-2D draw path shared by preview and WebM export, MediaCache/audio graph, keyframes/transitions, AI edit transforms, local draft/settings, filesystem seam and realtime MediaRecorder exporter. The Svelte renderer covers playback, layered timeline, track controls, clip inspector, local/sample/filesystem import, AI commands, keyboard shortcuts, autosave/settings and WebM export without React/Next/Lucide React/shadcn/Sonner/resizable-panels/agent runtime. - install: `npx rr add reel-editor` - detail: https://resource.manef.dev/slices/reel-editor - prompt: https://resource.manef.dev/agents/reel-editor - agent recipe: React/default: `npx rr add reel-editor`. SvelteKit: `npx rr add reel-editor --framework sveltekit`. Both reuse the same composition/history/draw/media/audio/AI/settings/filesystem/export cores. React keeps the resizable shadcn workspace, Sonner, Lucide and automatic tool registration; Svelte installs only svelte@^5 + portable cores and accepts optional registerTools. Wire production file access through configureReelFs({ list, mkdir, rawUrl }); enforce path authorization and signed/media access on that backend. Render/export remains client-side MediaRecorder WebM using the same drawFrame() path as preview. ### Preview — media quick-look - slug: `media-viewer` kind: `ui` category: `os` - 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 framework-neutral integration seams in lib/host-core.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 → design-studio, 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. - install: `npx rr add media-viewer` - detail: https://resource.manef.dev/slices/media-viewer - prompt: https://resource.manef.dev/agents/media-viewer - agent recipe: Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. A quick-look media viewer (image/video/audio/pdf/text). Fully client-side; no backend required. STEP 1 — Install. `npx rr add media-viewer`. Ensure `@/features/media-viewer` resolves in tsconfig paths and Tailwind scans the slice folder. STEP 2 — Deps. npm: `lucide-react`. shadcn: `npx shadcn@latest add button badge separator tooltip slider`. STEP 3 — Mount. `` with no payload shows the offline sample gallery. Pass a file to view it: ```tsx "use client"; import { MediaViewer } from "@/features/media-viewer"; export default function Page() { return
; } ``` Or register the `mediaViewerApp` descriptor in an appshell manifest for windowed hosts. STEP 4 — Remote files (optional). Paths resolve through `configureMediaSource({ rawUrl })` — identity by default, so public/absolute URLs already work. Point rawUrl at your fs endpoint for private files. STEP 5 — Editor handoff (optional). `configureMediaOpener((appId, title, size, payload) => …)` routes the "Open in Image/Video Editor" actions to your shell (no-op until set). Wire it to openWindow when running inside appshell with image-editor / reel-editor installed. ### Code — overlay syntax editor - slug: `code-editor` kind: `ui` category: `os` - Framework-parity lightweight code editor over one observable editor/filesystem core. React/Next remains default with appshell inspector + automatic tool registration; native Svelte 5/SvelteKit adds explorer, tabs, overlay syntax editing, create/save, status, payload-open handoff, and optional host tool registration over the exact same CodeFsAdapter, writable mock FS, buffers, dirty/save state, highlighter, and tool semantics. Writes stay best-effort — read-only hosts keep the local buffer and surface the failed remote save. - install: `npx rr add code-editor` - detail: https://resource.manef.dev/slices/code-editor - prompt: https://resource.manef.dev/agents/code-editor - agent recipe: Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. A lightweight overlay-highlighting code editor with a lazy explorer tree. Fully client-side; no backend required. STEP 1 — Install React/default with `npx rr add code-editor`, or native Svelte 5 with `npx rr add code-editor --framework sveltekit`. Both reuse one editor/filesystem core. STEP 2 — Deps. npm: `lucide-react`. shadcn: `npx shadcn@latest add button badge input scroll-area sheet dialog`. STEP 3 — Mount. `` opens the seeded sample tree (writable in-memory mock). Open a specific file with a payload: ```tsx "use client"; import { CodeEditor } from "@/features/code-editor"; export default function Page() { return
; } ``` Or register the `codeEditorApp` descriptor in an appshell manifest for windowed hosts. STEP 4 — Real filesystem (optional). `configureCodeFs({ list, read, write, mkdir })` — list returns { path, entries: [{ name, kind }] } for ONE directory (the tree fetches per expand), read returns the file body, write/mkdir mutate. Writes are best-effort: on failure the editor keeps the local buffer and flags the status bar. STEP 5 — Cross-app open. From a file manager (e.g. the file-explorer slice), wire onOpenFile to re-render CodeEditor with payload={{ path }} — the editor adds a tab and hydrates the buffer. ### System Monitor — host telemetry dashboard - slug: `system-monitor` kind: `ui` category: `os` - Activity-Monitor-style host telemetry dashboard with React/Next as the default distribution and native Svelte 5/SvelteKit gauges, sparklines, and responsive process UI over one injected telemetry adapter + rolling history core. Polling stays at 1.5s with ~40 CPU/network points; zero-backend mock and host live adapter remain supported. - install: `npx rr add system-monitor` - detail: https://resource.manef.dev/slices/system-monitor - prompt: https://resource.manef.dev/agents/system-monitor - agent recipe: Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. Host telemetry dashboard. Fully client-side; no backend required. STEP 1 — Install. `npx rr add system-monitor`. Ensure `@/features/system-monitor` resolves and Tailwind scans the slice folder. STEP 2 — Deps. npm: `lucide-react`. shadcn: `npx shadcn@latest add scroll-area`. STEP 3 — Mount. `` in a height-bearing box — unwired it runs a wavy in-browser telemetry mock. Or register `systemMonitorApp` in an appshell manifest. STEP 4 — Real telemetry. `configureSysmon({ mode:"live", stats, processes })` — stats returns { cpu:{pct,cores}, mem:{used,total}, disk:{used,total}, net?:{rx,tx}, uptime }; processes returns [{ pid, name, status, cpu, mem }]. ### Booking — session request form + owner inbox - slug: `booking` kind: `ui` category: `os` - 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. - install: `npx rr add booking` - detail: https://resource.manef.dev/slices/booking - prompt: https://resource.manef.dev/agents/booking - agent recipe: Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. A booking request form + owner inbox. Fully client-side; backend optional. STEP 1 — Install. `npx rr add booking`. Ensure `@/features/booking` resolves and Tailwind scans the slice folder. STEP 2 — Deps. npm: `lucide-react`. shadcn: `npx shadcn@latest add button input textarea scroll-area`. STEP 3 — Mount. `` in a height-bearing box — unwired it runs on an in-memory mock store (form + inbox both live). Or register `bookingApp` in an appshell manifest. STEP 4 — Real backend. `configureBooking({ mode:"live", submit, list, setStatus, canManage })` — submit takes { name, email, topic, preferredTime?, note? }; list returns rows with { id, status, createdAt }; omit list/canManage for a write-only public form. ### HTML Studio — sandboxed HTML/CSS/JS editor with live preview - slug: `html-studio` kind: `ui` category: `os` - Sandboxed HTML/CSS/JS studio with one framework-neutral document store, mock/live HtmlStudioAdapter, device/view helpers, starter document, share helpers, and exact opaque-origin iframe sandbox contract. React/Next remains the default Lucide + shadcn renderer; Svelte 5/SvelteKit gets native Code/Split/Preview, responsive/tablet/phone preview, 250ms live srcdoc, Save/open/delete list, public/private visibility, copy-link and payload-slug flows over the same core. - install: `npx rr add html-studio` - detail: https://resource.manef.dev/slices/html-studio - prompt: https://resource.manef.dev/agents/html-studio - agent recipe: Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. A sandboxed HTML/CSS/JS studio: editor + live iframe preview + saved pages. Fully client-side; backend optional. STEP 1 — Install. `npx rr add html-studio`. Ensure `@/features/html-studio` resolves and Tailwind scans the slice folder. STEP 2 — React deps. npm: `lucide-react@^0.400.0`. shadcn: `npx shadcn@latest add button input textarea scroll-area`. SvelteKit: `npx rr add html-studio --framework sveltekit` installs only `svelte@^5` + the shared portable core. STEP 3 — Mount. `` in a height-bearing box — unwired it runs on an in-memory mock (editor + live sandboxed preview + saved list all live). Pass `payload={{ slug }}` to open a page, or register `htmlStudioApp` in an appshell manifest. STEP 4 — Real backend. `configureHtmlStudio({ mode:"live", save, load, list, remove })` — save takes { slug?, title, html, visibility } and returns { slug }; load(slug) -> SavedPage | null; omit save for a read-only sandbox or list to hide the saved rail. React and Svelte share the exact `HTML_SANDBOX`; KEEP it without allow-same-origin so arbitrary srcdoc stays in an opaque origin. ### Resources Admin — curated icon-launcher CRUD - slug: `resources-launcher-admin` kind: `ui` category: `os` - Owner-gated curated launcher CRUD over one framework-neutral ResourcesAdapter/core. React/Next remains the default Lucide + shadcn surface; Svelte 5/SvelteKit gets native add/edit/remove/reorder UI over the same mock/live adapter, resource model, icon-name catalog, normalization, sorting, and permission state. Backend wiring stays injected through configureResources (list/upsert/remove/canManage). - install: `npx rr add resources-launcher-admin` - detail: https://resource.manef.dev/slices/resources-launcher-admin - prompt: https://resource.manef.dev/agents/resources-launcher-admin - agent recipe: Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. A curated icon-launcher admin (CRUD + reorder). Fully client-side; backend optional. STEP 1 — Install. `npx rr add resources-launcher-admin`. Ensure `@/features/resources-launcher-admin` resolves and Tailwind scans the slice folder. STEP 2 — React deps. npm: `lucide-react@^0.400.0`. shadcn: `npx shadcn@latest add button input label scroll-area native-select`. SvelteKit: `npx rr add resources-launcher-admin --framework sveltekit` installs only `svelte@^5` + the shared portable core. STEP 3 — Mount. `` in a height-bearing box — unwired it runs on an in-memory mock store (add / edit / remove / reorder all live). Or register `resourcesAdminApp` in an appshell manifest. STEP 4 — Real backend. `configureResources({ mode:"live", list, upsert, remove, canManage })` — list returns rows { id, label, icon, url, group, order }; upsert takes the same minus id to insert (pass id to patch); canManage gates the editor + reorder. Icons are lucide NAME strings resolved via resolveIcon. ### Profile — CV + identity card - slug: `profile` kind: `ui` category: `os` - One owner identity in two renderings over one framework-neutral configured-data seam. React/Next remains the default with printable Resume + AboutProfile/appshelly descriptors; Svelte 5/SvelteKit adds native resume/card surfaces over the exact same ResumeProfile/AboutProfile models, placeholder data, configure/read seams, initials, links, FAQ, and Print/PDF behavior. - install: `npx rr add profile` - detail: https://resource.manef.dev/slices/profile - prompt: https://resource.manef.dev/agents/profile - agent recipe: Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. Two identity renderers driven by injected data. Fully client-side; no backend required. STEP 1 — Install. `npx rr add profile` for both, or `npx rr add profile resume` / `card` for one. Ensure `@/features/profile` resolves and Tailwind scans the slice folder. STEP 2 — Deps. npm: `lucide-react`. shadcn: `npx shadcn@latest add button scroll-area avatar`. STEP 3 — Mount. `` (CV) or `` (card) in a height-bearing box — unwired each renders a generic placeholder. Or register `resumeApp` / `aboutProfileApp` in an appshell manifest. STEP 4 — Real data. `configureResume(profile)` with a ResumeProfile { name, roles[], location, summary, contacts[], skills[], experience[], projects[] }, and/or `configureAbout(card)` with { name, roles[], description, links[], faq[] }, once at boot from Convex / a CMS / a JSON file. Resume's "Print / PDF" button calls window.print() against a print-friendly layout. ### Start Here — guided OS onboarding tour - slug: `start-here` kind: `ui` category: `os` - 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. - install: `npx rr add start-here` - detail: https://resource.manef.dev/slices/start-here - prompt: https://resource.manef.dev/agents/start-here - agent recipe: Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. A guided onboarding tour that renders your live app catalog as a path of stages. Fully client-side; the catalog is injected. STEP 1 — Install. `npx rr add start-here`. Ensure `@/features/start-here` resolves and Tailwind scans the slice folder. STEP 2 — Deps. npm: `lucide-react`. shadcn: `npx shadcn@latest add button scroll-area`. STEP 3 — Mount. `` in a height-bearing box — unwired it reads an in-memory mock catalog (generic apps + 3 stages) so the tour is fully alive. Or register `startHereApp` in an appshell manifest. STEP 4 — Real catalog. `configureStartHere({ mode:"live", apps, open, stages })` — apps is your live registry as [{ id, title, icon, description? }]; open(id) launches the real app/window; stages is [{ title, blurb, appIds }] (apps not placed fall into a final "Everything else" stage). Drift-proof: read the registry, never hardcode the list. ### Terminal — shell emulator with live passthrough + PTY seam - slug: `os-terminal` kind: `ui` category: `os` - Framework-parity terminal shell: React/Next remains default and explicit SvelteKit gets native Svelte 5 exec + PTY UI over the same command dispatcher, mock filesystem, live TerminalOsApi, SSE PTY transport, and agentic tools. Mock mode needs zero backend; configureTerminal enables real fs/exec/sys and configurePty injects an interactive transport + VT renderer. Both host-wiring seams are observable after mount. - install: `npx rr add os-terminal` - detail: https://resource.manef.dev/slices/os-terminal - prompt: https://resource.manef.dev/agents/os-terminal - agent recipe: Run `npx rr add os-terminal` for React/default or `npx rr add os-terminal --framework sveltekit` for native Svelte 5. Mount in a height-bearing box; mock mode is zero-backend. Wire configureTerminal({ mode:"live", fs, exec, sys }) for real host truth. Optionally configurePty({ transport, screen }) for an interactive shell; createSsePtyTransport() ships the os-vps SSE transport shape while the host owns the VT renderer. React-only osTerminalApp remains a convenience descriptor and is not invented for Svelte. ### Assistant — agent workspace with streaming chat - slug: `assistant` kind: `ui` category: `os` - Framework-parity agent workspace with streaming chat, tool-calling, and a local library of agents, skills, and ordered automations. React/Next remains default; native Svelte 5/SvelteKit reuses the same observable localStorage store, preset data, persona/history builder, demo stream fallback, global tool registry, shared runAgentLoop function-calling core, static/live tool catalog, and automation semantics. No backend or model key is bundled: configureAgentStream injects the consumer model bridge. Svelte carries no React/Next/shadcn/use-agent-tools runtime. - install: `npx rr add assistant` - detail: https://resource.manef.dev/slices/assistant - prompt: https://resource.manef.dev/agents/assistant - agent recipe: React/default: run `npx rr add assistant`; SvelteKit: append `--framework sveltekit`. Mount in a height-bearing container. Agents, skills and automations persist in localStorage through one shared observable store. Unwired chat uses a typing demo stream. Wire one real backend with configureAgentStream(fn); the same shared runAgentLoop drives every registered slice ToolCollection through registerAssistantTools. The Svelte distribution installs only non-React agentic core files and @lucide/svelte. ### Browser — remote headless-browser chrome - slug: `browser` kind: `ui` category: `os` - Framework-parity remote-browser chrome. React/Next remains default with Lucide/shadcn chrome, appshell descriptor, inspector seam, and automatic tool registration. Native Svelte 5/SvelteKit adds the same multitab strip, omnibar URL/search, bookmarks/history, remote-frame click/type/key/scroll forwarding, screenshot save, AI activity log, live/poll badge, and mode gate over one shared BrowserAdapter/session/screencast/storage/url/tool core. Unwired, the canvas demo renderer still works offline. Real configureBrowser/configureScreencast routes must be authenticated/authorized like SSH because remote pages can hold logged-in sessions. - install: `npx rr add browser` - detail: https://resource.manef.dev/slices/browser - prompt: https://resource.manef.dev/agents/browser - agent recipe: React/default: `npx rr add browser`. SvelteKit: `npx rr add browser --framework sveltekit`. Both share the same BrowserAdapter, multitab session, demo renderer, screenshot polling/MJPEG stream fallback, URL/storage helpers, and browserTools. Configure a real Playwright/CDP adapter only behind authenticated + authorized server routes; remote browser state can contain private logged-in sessions. React auto-registers tools; Svelte exposes optional registerTools(collection, getCtx). ### App Store — install, create + toggle apps - slug: `app-store` kind: `ui` category: `os` - Framework-parity App Store + Create App. React/Next remains the default storefront with Lucide/shadcn chrome, appshell-style dynamic descriptors, and automatic shared-agent tool registration. Explicit Svelte 5/SvelteKit adds native storefront, built-in app/feature toggles, custom-app authoring, sandboxed HTML runtime apps, and command-console runtime apps over the same observable localStorage app registry, disabled-set store, curated catalog, exec adapter, manifest helpers, and self-contained appStoreTools. New built-ins stay enabled by default because only disabled ids persist; command execution is host-injected and uses a safe demo echo until wired. - install: `npx rr add app-store` - detail: https://resource.manef.dev/slices/app-store - prompt: https://resource.manef.dev/agents/app-store - agent recipe: React/default: `npx rr add app-store`. SvelteKit: `npx rr add app-store --framework sveltekit`. Both share the same localStorage app registry, disabled-id store, catalogs, tool contract, and configureAppStoreExec seam. React additionally exports appshell AppDescriptor hooks; Svelte carries no React/Lucide/shadcn/agent runtime and can optionally register appStoreTools through its registerTools(collection, getCtx) prop. Authenticate any live exec endpoint like SSH. ### File Explorer — Tree + CRUD + Preview + Properties - slug: `file-explorer` kind: `full` category: `os` - Framework-parity backend-neutral file explorer. React/Next remains default; native Svelte 5/SvelteKit covers location sidebar, back/forward + breadcrumbs, grid/list sorting, multi-select, create/rename/move/copy/cut/paste/trash/delete, drag/drop upload, image/audio/video/PDF/text preview, editable body + metadata properties, storage usage, and optional function-calling tools over the same FileExplorerAdapter. Bundled mock/live/structural-Convex adapters are shared; Svelte carries no React/Next/Lucide React/shadcn/FilePicker/agent runtime. - install: `npx rr add file-explorer` - detail: https://resource.manef.dev/slices/file-explorer - prompt: https://resource.manef.dev/agents/file-explorer - agent recipe: React/default: `npx rr add file-explorer`. SvelteKit: `npx rr add file-explorer --framework sveltekit`. Both share the FileExplorerAdapter, writable mock/live/Convex adapter factories, history/operations/file-kind cores, preview/property semantics, and fileExplorerTools. React keeps shadcn/Lucide and auto-registers tools through the narrow agent hook; Svelte installs only svelte@^5 plus portable adapter/core files and can optionally register tools via its registerTools prop. Inject a real filesystem adapter for production and keep authorization/server path bounds in that backend — UI mode/read-only checks are convenience, not a security boundary. ### Lucent Desktop - slug: `glass-desktop` kind: `ui` category: `os` - Interactive dark-glass desktop with two spaces and a catalog-driven widget canvas. The React/Next default keeps its specialized widget renderers; the native Svelte 5/SvelteKit distribution uses the same 47-widget catalog, default seed, grid packer, layout mutations, and LayoutStore persistence contract with a native data-driven renderer. Both frameworks support add/remove/resize/move, edit mode, space switching, reset, persistence, and a full widget gallery. Consumer branding and storage are injected through props; no project-specific URLs, roles, or credentials are embedded. - install: `npx rr add glass-desktop` - detail: https://resource.manef.dev/slices/glass-desktop - prompt: https://resource.manef.dev/agents/glass-desktop - agent recipe: Run `npx rr add glass-desktop` for React/Next or `npx rr add glass-desktop --framework sveltekit` for native Svelte 5. Mount full-bleed, optionally pass brand/initialSpace and a custom LayoutStore; use gallery mode to inspect the full 47-widget catalog. ### AppShell — Desktop + Mobile OS Shell - slug: `appshell` kind: `full` category: `os` - Generic, brand-free OS-style shell framework. One 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 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). - install: `npx rr add appshell` - detail: https://resource.manef.dev/slices/appshell - prompt: https://resource.manef.dev/agents/appshell - agent recipe: Stack required: Next 16 (App Router) + React 19 + Tailwind 4 + shadcn/ui. The slice is self-contained — it imports only @/components/ui/* + @/lib/utils (cn); everything project-specific arrives via the manifest. Follow ALL steps; the ⚠ ones are where installs break. STEP 1 — Install. `npx rr add appshell` (alias `npx rahman-resources add appshell`). It copies to your slices dir. Ensure `@/features/appshell` resolves in tsconfig paths (point it at that dir), and that Tailwind's content globs SCAN the slice folder (else the shell renders unstyled). STEP 2 — shadcn + npm deps. Add any missing shadcn primitives: `npx shadcn@latest add button tooltip scroll-area sheet drawer dialog alert-dialog dropdown-menu`. npm: lucide-react class-variance-authority clsx tailwind-merge vaul. STEP 3 — ⚠ Theme. Import the slice's tokens ONCE in the root layout: `import "@/features/appshell/appshell.css"`. These are the glass/dock/window/wallpaper CSS variables the shell needs — they are NOT shadcn defaults, so skipping this = an unstyled, broken-looking shell. It pairs with your shadcn tokens (--background etc.). Dark mode = toggle the `.dark` class on (appshell.css ships light + dark). STEP 4 — Mount full-bleed. Render from a CLIENT component that owns one full viewport (the page is h-dvh w-screen / the root). AppShell auto-picks the macOS desktop on wide viewports and the iOS surface on narrow — you write nothing extra for mobile. STEP 5 — Build the ShellManifest: • brand: { name, logo (string or ReactNode), idleAppName?, wallpaper?: "aurora"|"dusk"|"mist"|"noir" }. • apps: AppDescriptor[] — { id, title, icon (a lucide-react icon component), gradient (a CSS gradient string for the glossy icon), load: async () => ({ default: YourAppComponent }), slug?, defaultSize?: {w,h}, multi?: true (spawn a new window per open, e.g. a file manager), noDock?: true }. Your app component receives props { payload }. • features: the fastest path is `features: DEFAULT_FEATURES` — the bundled default system-feature set (all five, generic + brand-free) exported from "@/features/appshell". Or import individually and list only what you want: searchFeature (⌘K Spotlight), inspectorFeature (⌘I AI/context panel), notificationsFeature (toasts + iOS dynamic island), controlCenterFeature (iOS control center), widgetsFeature (iOS Today widgets). The surfaces are slot-driven, so spreading/trimming DEFAULT_FEATURES just mounts/omits a feature — `features: [...DEFAULT_FEATURES.filter(f => f.id !== "widgets")]`. • capabilities: ShellCapabilities — your data/auth/AI injection seam. useAppearance() and useCpuPercent() are REQUIRED; useSearch/useSystemStats/useChat/useServerToggle are optional (defaults degrade gracefully). ⚠ CRITICAL: every capability hook MUST return a REFERENTIALLY STABLE value — a module-level const, or useMemo/useCallback. Returning a fresh object/closure each render makes Spotlight's search effect re-fire forever ("Maximum update depth exceeded"). e.g. define APPEARANCE once at module scope and `useAppearance: () => APPEARANCE`. • persistKey?: localStorage namespace for the saved window layout (default "appshell:layout"). • routing?: defaults TRUE — it mirrors the focused app to the URL via the History API (window.history, NOT router.push). ⚠ If true you MUST add a catch-all route `app/[[...slug]]/page.tsx` that renders the mount AND calls notFound() for reserved paths (slug[0] === "_next"), or missing chunks return wrong-MIME 200s. SIMPLEST first install: set `routing: false` to skip the catch-all entirely. Extending: add an app = one manifest entry; add a shell feature = a new defineFeature({id, slots}) listed in features[]. No surface edits ever (open/closed). exampleCode ships BOTH variants: Variant A = routing:false mount in app/page.tsx (simplest); Variant B = catch-all app/[[...slug]]/page.tsx with routing on + app slugs for addressable, deep-linkable URLs (the catch-all MUST notFound() "_next"). ### Convex Auth — Multi-Provider Sign-in - slug: `convex-auth` kind: `backend` category: `auth` - Framework-parity Convex Auth: React/Next keeps the official @convex-dev/auth React adapter; Svelte 5/SvelteKit gets native AuthCard + SignInPage over the same labels, validation and framework-neutral AuthFlow. Because @convex-dev/auth exposes React/Next adapters but no Svelte adapter, Svelte production wiring injects AuthFlow explicitly rather than emulating undocumented session internals. Backend Password, Anonymous, Google OAuth and Resend magic-link stay unchanged. - install: `npx rr add convex-auth` - detail: https://resource.manef.dev/slices/convex-auth - prompt: https://resource.manef.dev/agents/convex-auth - agent recipe: Run `rr add convex-auth` for React/Next or `rr add convex-auth --framework sveltekit` for native Svelte. React uses @convex-dev/auth/react. Svelte SignInPage requires a host-supplied AuthFlow because the upstream package has no official Svelte adapter. Keep JWT/OAuth/Resend env server-side. ### Payment — Indonesia PSP (DOKU · Midtrans) - slug: `payment` kind: `full` category: `integrations` - Framework-parity Indonesia payment providers behind one slug and one provider-discriminated Convex data model. React/Next remains default; Svelte 5/SvelteKit adds native DOKU hosted/direct/status/instructions and Midtrans checkout/orders surfaces over shared contracts/tools. CLI 1.18 scopes provider runtime deps + backend actions: doku installs no provider npm SDK and only DOKU env/action; midtrans adds midtrans-client + Midtrans env/action; add-all receives the union. HMAC/signature verification, webhook idempotency, amount validation, and provider secrets stay server-side. - install: `npx rr add payment` - detail: https://resource.manef.dev/slices/payment - prompt: https://resource.manef.dev/agents/payment - agent recipe: Install one provider with rr add payment doku|midtrans, or both with rr add payment; append --framework sveltekit for native Svelte. CLI 1.18 gates provider action/npm/env while retaining shared payment schema/query/mutation/webhook support. DOKU injects checkout/direct actions and keeps HMAC secrets server-side. Midtrans injects createTransaction + optional Snap onPay bridge; only the client key is browser-visible. ### Resend — Transactional & Newsletter - slug: `resend-newsletter` kind: `full` category: `integrations` - Truthful single-opt-in newsletter slice with adapter-backed React/Next and native Svelte 5 subscribe forms, a self-contained Convex subscriber/issue backend, public unsubscribe, host-authorized list/send adapters, and internal Resend campaign workers. The public preview stays unconfigured so it cannot mutate data or send email. - install: `npx rr add resend-newsletter` - detail: https://resource.manef.dev/slices/resend-newsletter - prompt: https://resource.manef.dev/agents/resend-newsletter - agent recipe: Run `npx rr add resend-newsletter` for React/default or `npx rr add resend-newsletter --framework sveltekit`. Configure the public subscribe adapter before rendering. The bundled Convex backend is single opt-in: subscribe activates immediately and unsubscribe is public/idempotent. List/send remain host-authorized adapters; after host authz call the internal sendCampaign worker. RESEND_API_KEY/RESEND_FROM stay server-side. ### AI Workspace — chat · studio · agents - slug: `ai-workspace` kind: `full` category: `ai` - Framework-parity AI workspace with chat, studio, and agents variants. React/Next remains default; native Svelte 5/SvelteKit mirrors all three over shared chat/generation/runner/tool cores. Variant installs are exact: only chat pulls convex/features/aiChat + ai + @ai-sdk/anthropic + ANTHROPIC_API_KEY; studio and agents remain frontend-only and provider-free. - install: `npx rr add ai-workspace` - detail: https://resource.manef.dev/slices/ai-workspace - prompt: https://resource.manef.dev/agents/ai-workspace - agent recipe: Run `npx rr add ai-workspace ` for React/default or append `--framework sveltekit`; omit the variant for all three. chat alone pulls the Convex aiChat backend + Anthropic runtime/key. studio and agents are frontend-only scaffolds. Wire chat via AiChatFab chat callback, studio via aiStudioTools, and agents via createAgentRunner(host). ### AI Admin — Contract - slug: `ai-admin` kind: `backend` category: `ai` - Framework-neutral compile-time contract for a future AI administration surface. Ships provider/model/skill/tool/agent/budget/audit types plus tab, icon-name, and permission taxonomy; intentionally no renderer, persistence backend, or runtime framework dependency. - install: `npx rr add ai-admin` - detail: https://resource.manef.dev/slices/ai-admin - prompt: https://resource.manef.dev/agents/ai-admin - agent recipe: Install ai-admin for the default contract or pass --framework sveltekit. Both copy the same framework-neutral TypeScript source. Use the exported types and taxonomy as host inputs; build any renderer, persistence, and authorization in the consuming app. ### AI Router — OpenRouter Tier Proxy - slug: `ai-router` kind: `full` category: `ai` - Authenticated tier-routed LLM access through one Convex action and OpenRouter. Ships a transport-injected ChatFab: React/Next remains default and SvelteKit gets native Svelte 5 UI over the same request/result core and the same aiUsage backend. Unconfigured hosts return an explicit notice instead of a fake reply. - install: `npx rr add ai-router` - detail: https://resource.manef.dev/slices/ai-router - prompt: https://resource.manef.dev/agents/ai-router - agent recipe: Run `npx rr add ai-router` or add `--framework sveltekit`. Bind ChatFab.route to api.features.ai.action.callModel. The action requires auth, keeps the provider key server-only, returns a notice when unavailable, and logs successful usage to aiUsage. ### Vector Search — Adapter Contract - slug: `vector-search` kind: `backend` category: `data` - Framework-neutral semantic-search adapter contract. The host injects VectorSearchCtx for query/index/reindex and owns the actual vector backend, embeddings, credentials, persistence, authorization, and reindex policy; RR ships no renderer or Convex schema for this slice. - install: `npx rr add vector-search` - detail: https://resource.manef.dev/slices/vector-search - prompt: https://resource.manef.dev/agents/vector-search - agent recipe: Run `npx rr add vector-search` (React/default) or `npx rr add vector-search --framework sveltekit`. Bind VectorSearchCtx.search/index/reindex to your own authorized vector backend. The slice intentionally does not invent a Convex schema, embedding provider, renderer, or credential requirement. ### Cal.com Booking - slug: `cal-com-booking` kind: `full` category: `data` - Cal.com inline booking UI with a real Convex webhook mirror. React/Next stays default via @calcom/embed-react; SvelteKit uses native Svelte 5 over the shared vanilla embed loader. The bundled backend mirrors webhook events into the real bookings table; list/cancel/reschedule remain host-injected tool adapters. - install: `npx rr add cal-com-booking` - detail: https://resource.manef.dev/slices/cal-com-booking - prompt: https://resource.manef.dev/agents/cal-com-booking - agent recipe: Run `npx rr add cal-com-booking` for React/default or `npx rr add cal-com-booking --framework sveltekit`. Pass an explicit calLink and optional calOrigin. Wire the bundled webhook mirror to the real bookings table; bind list/cancel/reschedule tools separately to host APIs. ### Command Menu - slug: `command-menu` kind: `ui` category: `ui` - Portable command palette + generic search modal. React/Next remains the default cmdk/shadcn UI while Svelte 5/SvelteKit adds native palette/search surfaces over the same framework-neutral group, hotkey, MRU history, filtering, selection, label, and search-state core. - install: `npx rr add command-menu` - detail: https://resource.manef.dev/slices/command-menu - prompt: https://resource.manef.dev/agents/command-menu - agent recipe: Run `npx rr add command-menu`. Wire at the dashboard shell. Build groups from your feature registry; each item.onSelect handles navigation. Use for the search dialog — see slice README.md for adapter shapes. ### Motion Primitives (8) - slug: `motion-primitives` kind: `ui` category: `ui` - 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. - install: `npx rr add motion-primitives` - detail: https://resource.manef.dev/slices/motion-primitives - prompt: https://resource.manef.dev/agents/motion-primitives - agent recipe: Run `npx rr add motion-primitives`. Each primitive is independently importable from @/features/motion-primitives. Use marquee for logo strips, kinetic-heading for hero text, magnetic for CTA buttons, cursor-spotlight for hover-reveal panels, stat-counter for animated numbers, reading-progress for blog top bar, grain for film texture, lightbox for image gallery. ### Responsive Dialog (Sheet ↔ Modal) - slug: `responsive-dialog` kind: `ui` category: `ui` - ResponsiveDialog — auto-switches between bottom Sheet (mobile) and centered Dialog (desktop) at the md breakpoint. Same API as shadcn Dialog. Kitab forbids raw ; use this everywhere. Facade slice — pulls from template-base/frontend/slices/responsive-dialog. - install: `npx rr add responsive-dialog` - detail: https://resource.manef.dev/slices/responsive-dialog - prompt: https://resource.manef.dev/agents/responsive-dialog - agent recipe: Run `npx rr add responsive-dialog`. Drop-in for shadcn Dialog. Use ……. On mobile renders as Sheet sliding from bottom; on desktop as centered Dialog. Threshold via useMediaQuery('(min-width: 768px)'). ### Dashboard Shell — one responsive shell + mobile dock - slug: `dashboard-shell` kind: `ui` category: `ui` - One responsive dashboard chrome over one nav SSOT. React/Next remains the default shadcn rail + topbar + mobile dock/tile-drawer distribution. Explicit Svelte 5/SvelteKit adds native DashboardShell, DashboardSidebar, MobileDock, and MobileMenuDrawer over the same framework-neutral active-path, dock-derivation, and active-title core; Svelte uses `$app/state`, `$derived`, keyed lists, snippets, and CSS breakpoints with no React/Lucide/Vaul/shadcn runtime dependency. - install: `npx rr add dashboard-shell` - detail: https://resource.manef.dev/slices/dashboard-shell - prompt: https://resource.manef.dev/agents/dashboard-shell - agent recipe: Run `npx rr add dashboard-shell` for the React/Next default or `npx rr add dashboard-shell --framework sveltekit` for native Svelte 5/SvelteKit. Both share one nav/core contract (`isActive`, `deriveDock`, `activeItem`, `activeTitle`, `flattenNav`). React uses shadcn Sidebar/Drawer + Lucide/Vaul; Svelte uses `$app/state`, runes/snippets, CSS breakpoints, and no React/shadcn runtime. The same `nav` drives desktop rail, mobile dock, and tile drawer. ### Full Width Toggle - slug: `full-width-toggle` kind: `ui` category: `ui` - Page-container width preference with contained, wide, and full modes. Persists per device in localStorage, synchronizes same-tab and cross-tab changes, and ships a toggle plus container wrapper. React/Next remains the default distribution; Svelte 5 / SvelteKit is available explicitly with --framework sveltekit. - install: `npx rr add full-width-toggle` - detail: https://resource.manef.dev/slices/full-width-toggle - prompt: https://resource.manef.dev/agents/full-width-toggle - agent recipe: Run `npx rr add full-width-toggle` for the React/Next default, or `npx rr add full-width-toggle --framework sveltekit` for Svelte 5/SvelteKit. Place in an app-shell action slot and wrap page content in . Storage key is `layout:widthMode`; modes are contained, wide, and full, with same-tab plus cross-tab sync. ### Three-Column Layout — Sidebar/Content/Inspector - slug: `three-column` kind: `ui` category: `ui` - 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). - install: `npx rr add three-column` - detail: https://resource.manef.dev/slices/three-column - prompt: https://resource.manef.dev/agents/three-column - agent recipe: Run `npx rr add three-column`. . Center column SHOULD pass `unstyled` to drop sidebar tokens — body is content surface. `storageKey` MUST differ per slice or persisted widths collide. ### BroadcastChannel — Cross-tab Sync - slug: `broadcast-channel-sync` kind: `ui` category: `data` - Same-origin cross-tab + cross-iframe state sync via BroadcastChannel API. Tiny, no backend, no install. - install: `npx rr add broadcast-channel-sync` - detail: https://resource.manef.dev/slices/broadcast-channel-sync - prompt: https://resource.manef.dev/agents/broadcast-channel-sync - agent recipe: Run `npx rr add broadcast-channel-sync` for React/Next or add `--framework sveltekit` for the Svelte store adapter. Use this for same-origin tab/iframe mirroring, not durable server data; production persistence still belongs in Convex or another backend. ### RBAC — Roles & Permissions - slug: `rbac-roles` kind: `full` category: `auth` - 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: , usePermissions, , . 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. - install: `npx rr add rbac-roles` - detail: https://resource.manef.dev/slices/rbac-roles - prompt: https://resource.manef.dev/agents/rbac-roles - agent recipe: Run `npx rr add rbac-roles`. Frontend: import { PermissionGate, usePermissions, RoleBadge, PermissionMatrix, resolvePermissions, ROLE_PRESETS } from "@/features/rbac-roles". Feed usePermissions/PermissionGate the actor's resolved permission list (from your membership query or resolvePermissions(roleSlug)). Convex: spread rbacRolesTables into your schema, call seedSystemRoles({tenantId}) once, gate privileged fns with requirePermission(ctx, tenantId, "members.manage"). Set PLATFORM_ADMIN_EMAILS for superadmins. Add the user-management slice for the members/invites UI (provides um_members). ### User Management - slug: `user-management` kind: `full` category: `auth` - Framework-parity user administration for members, hierarchy-aware invites, custom roles, teams, and the cross-tenant access matrix. React/Next remains the default shadcn renderer; native Svelte 5/SvelteKit reuses the same framework-neutral types, RBAC checks, members query/sort core, agent tools, and Convex backend. Authorization stays server-side in the bundled permission-gated Convex functions. - install: `npx rr add user-management` - detail: https://resource.manef.dev/slices/user-management - prompt: https://resource.manef.dev/agents/user-management - agent recipe: Run `npx rr add user-management` for React/default or append `--framework sveltekit` for native Svelte; both pull rbac-roles + convex-auth. Frontend: ({slug:r.slug,name:r.name,color:r.color}))} currentPerms={actorPerms} onUpdateRole={useMutation(...updateMemberRole)} onRemove={useMutation(...removeMember)} onInvite={openInvite} />. Wire roles + currentPerms from rbac-roles at the app level — the slice itself imports no other slice. Convex: spread userManagementTables; listMembers/mutations gate via rbac-roles requirePermission. ### Admin Panel — Unified Product Admin - slug: `admin-panel` kind: `full` category: `infra` - 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. - install: `npx rr add admin-panel` - detail: https://resource.manef.dev/slices/admin-panel - prompt: https://resource.manef.dev/agents/admin-panel - agent recipe: Run `npx rr add admin-panel`. Wrap pages with . AccessGate hides UI for non-admins, AdminShell renders 2-col layout with sidebar filtered by tier+perms. ADMIN_SECTIONS in config.ts is SSOT (17 entries). Personal-brand-os = tier 'solo' = owner sees everything. ### Analytics - slug: `event-tracking` kind: `backend` category: `data` - Framework-neutral analytics instrumentation contract. The host injects an EventTrackingCtx transport for event emit, guarded event queries, and funnel reads; the canonical slice ships no renderer or storage backend. - install: `npx rr add event-tracking` - detail: https://resource.manef.dev/slices/event-tracking - prompt: https://resource.manef.dev/agents/event-tracking - agent recipe: Run `npx rr add event-tracking` (React/default) or `npx rr add event-tracking --framework sveltekit`. Bind EventTrackingCtx.track/query/funnel to your analytics transport; enforce authorization on query/funnel at the server boundary. The slice intentionally does not invent a UI or persistence backend. ### Icon Picker - slug: `icon-picker` kind: `ui` category: `ui` - Framework-parity emoji + Lucide + Phosphor picker. React/Next remains default; native Svelte 5/SvelteKit keeps the same stored-value contract, curated catalogs, search, 10-color tint, recents, Twemoji/native preference, random/clear, keyboard grid navigation, and smart popover-to-dialog fallback over shared framework-neutral stores/handlers. React uses lucide-react + @phosphor-icons/react/shadcn; Svelte uses @lucide/svelte + phosphor-svelte and carries no React/Next/shadcn/agent runtime. - install: `npx rr add icon-picker` - detail: https://resource.manef.dev/slices/icon-picker - prompt: https://resource.manef.dev/agents/icon-picker - agent recipe: React/default: `npx rr add icon-picker`. SvelteKit: append `--framework sveltekit`. Store raw emoji, `lucide:Name`, or `phosphor:Name` with optional `?c=hex`; parse/build helpers are shared. Both renderers share recents/style/search/handler/tool cores. Use IconPicker/IconPickerPopover for smart floating UI, IconPickerInline for an existing sheet/dialog, and DynamicIcon for rendering stored values. ### Activity — public productivity log - slug: `activity` kind: `full` category: `data` - 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 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). - install: `npx rr add activity` - detail: https://resource.manef.dev/slices/activity - prompt: https://resource.manef.dev/agents/activity - agent recipe: Run `npx rr add activity`. Spread `activityTables` into your root Convex schema. Wrap the unauthenticated `create`/`update`/`remove` `internalMutation`s with your auth model (see README Install section). Render ``. Override `copy`, `categoryLabels`, `locale` per consumer. MCP integration: map `activity_create` tool → your wrapped `create` mutation. ### Rate Limit - slug: `rate-limit` kind: `backend` category: `infra` - Backend-only Convex per-key request counter with atomic consume, server-owned namespace policy, optional server-key gate, and bounded cron pruning. The copied runtime/config/tool source is framework-neutral TypeScript: React/Next remains the default contract while explicit Svelte/SvelteKit installs reuse the same source with no duplicate UI or framework runtime dependency. - install: `npx rr add rate-limit` - detail: https://resource.manef.dev/slices/rate-limit - prompt: https://resource.manef.dev/agents/rate-limit - agent recipe: Run `npx rr add rate-limit` (or `--framework sveltekit`; both copy the same framework-neutral source). Compose `rateLimitTables` from `convex/features/rate_limit/_schema` into `convex/schema.ts`, add the namespace to the server-owned POLICY map, call `api.features.rate_limit.mutation.consume({ key, serverKey })` from server handlers, and wire `internal.features.rate_limit.mutation._pruneExpired` into `convex/crons.ts`. Set RATE_LIMIT_SERVER_KEY for sensitive namespaces and choose fail-open versus fail-closed behavior explicitly in the host wrapper. ### Testimonials - slug: `testimonials` kind: `backend` category: `content` - Framework-neutral testimonials backend: bounded public list/get, server-authorized admin CRUD, and internal seed. React/Next remains the default distribution contract; explicit Svelte/SvelteKit installs reuse the same TypeScript + Convex source without invented UI. - install: `npx rr add testimonials` - detail: https://resource.manef.dev/slices/testimonials - prompt: https://resource.manef.dev/agents/testimonials - agent recipe: Run `npx rr add testimonials` (or `--framework sveltekit`). Compose `testimonialsTables` into the root schema. Read from `api.features.testimonials.query.listAll` / `get` through the host Convex client; call `create` / `update` / `remove` only through authenticated admin flows because authorization is enforced server-side by `requireAdmin`. ### Services - slug: `services` kind: `backend` category: `content` - Framework-neutral service-offerings backend: bounded public list/get, server-authorized admin CRUD, and internal seed. React/Next remains the default distribution contract; explicit Svelte/SvelteKit installs reuse the same TypeScript + Convex source without invented UI. - install: `npx rr add services` - detail: https://resource.manef.dev/slices/services - prompt: https://resource.manef.dev/agents/services - agent recipe: Run `npx rr add services` (or `--framework sveltekit`). Compose `servicesTables` into the root schema. Read from `api.features.services.query.listAll` / `get` through the host Convex client; call `create` / `update` / `remove` only through authenticated admin flows because authorization is enforced server-side by `requireAdmin`. ### Create Your MCP - slug: `create-your-mcp` kind: `full` category: `ai` - Framework-parity MCP/OAuth integration: React/Next remains the default admin UI and adapter, while explicit SvelteKit installs native Svelte 5 admin UI plus SvelteKit handler factories over the same OAuth 2.1 + PKCE, JSON-RPC, Convex token backend, scope enforcement, and static MCP_API_KEY fallback. Shared HTTP behavior uses Web Request/Response primitives; host adapters stay thin. - install: `npx rr add create-your-mcp` - detail: https://resource.manef.dev/slices/create-your-mcp - prompt: https://resource.manef.dev/agents/create-your-mcp - agent recipe: Run `npx rr add create-your-mcp` for React/Next or add `--framework sveltekit` for native Svelte 5. Compose `createYourMcpTables` from `convex/features/create_your_mcp/_schema`. Next: move the two route adapters into `app/api`. SvelteKit: create `+server.ts` endpoints from `createSvelteKitMcpHandlers` and `createSvelteKitOauthTokenHandlers`. Mount the framework-native `McpAdminView`, wire adminList/revokeToken through your authenticated Convex client, and set MCP_OAUTH_ALLOWED_HOSTS for remote OAuth redirects. ### Contact Form + Resend - slug: `contact-form-resend` kind: `full` category: `integrations` - Contact form posting to Resend email API. Server Action + Zod input validation. Convex mutation for storage + Resend send. - install: `npx rr add contact-form-resend` - detail: https://resource.manef.dev/slices/contact-form-resend - prompt: https://resource.manef.dev/agents/contact-form-resend - agent recipe: Run `npx rr add contact-form-resend`. Wire contactMessages.send mutation in convex/. Server emails via Resend from form@yourdomain.com. Always validate inputs with Zod or v.* server-side. Anonymous allowed. ### Admin — generic shell + composed console - slug: `admin` kind: `full` category: `infra` - Framework-parity access-gated admin surfaces behind one slug. React/Next remains default; native Svelte 5/SvelteKit provides shell + console over the same access rules, 26-section catalog, mock contracts, ?section= deep-link semantics, registry stats core, and Convex backends. shell is the generic AdminPage + buildAdminStats surface over convex/features/admin. console is the composed 26-section AdminConsole with five owned sections and host-injected peer panels over convex/features/admin_console. Svelte injects provider panels as snippets and imports no React/Lucide/shadcn. Variant installs keep backend and env gating exact. - install: `npx rr add admin` - detail: https://resource.manef.dev/slices/admin - prompt: https://resource.manef.dev/agents/admin - agent recipe: React/default: `npx rr add admin shell|console`. SvelteKit: append `--framework sveltekit`. shell reuses resolveAdminLabels/buildAdminStats and pulls only convex/features/admin. console reuses the same access/catalog/URL core, includes five owned panels, and receives provider panels through React components or Svelte snippets; it pulls only convex/features/admin_console. Keep remote/admin routes server-gated; UI access filters are not an authorization boundary. ### Platform Admin — Control Plane Contract - slug: `platform-admin` kind: `backend` category: `infra` - Framework-neutral privileged control-plane tool contract. The host injects metrics, feature-flag, and tenant-tier operations through PlatformAdminCtx and owns auth, authorization, tenancy, persistence, and audit enforcement; the canonical slice ships no renderer or Convex schema. - install: `npx rr add platform-admin` - detail: https://resource.manef.dev/slices/platform-admin - prompt: https://resource.manef.dev/agents/platform-admin - agent recipe: Run `npx rr add platform-admin` (React/default) or `npx rr add platform-admin --framework sveltekit`. Bind PlatformAdminCtx.metrics/setFeatureFlag/setTier to server-authorized host operations. The slice intentionally does not invent tenant tables, KPI dashboards, routes, or a renderer. ### Audit Log — Workspace Events - slug: `audit-log` kind: `backend` category: `infra` - Backend-only audit event recorder with framework-neutral TypeScript. createAuditLogger injects tenant/actor identity and preserves action/entity/diff/metadata/IP/user-agent evidence through host bindings; read-only query/export tools remain server-gated. React/Next stays the default contract while explicit Svelte/SvelteKit installs reuse the same source with no duplicate UI or framework runtime dependency. - install: `npx rr add audit-log` - detail: https://resource.manef.dev/slices/audit-log - prompt: https://resource.manef.dev/agents/audit-log - agent recipe: Run `npx rr add audit-log` (or `--framework sveltekit`; both copy the same framework-neutral source). Create a logger with `createAuditLogger(tenantAdapter, bindings)` and call it inside server-checked mutations/actions with `{ action, entityType, entityId, diff?, metadata?, ipAddress?, userAgent? }`. TenantAdapter resolves tenant + actor; the consumer binding enforces `audit.write`. Agent tools `audit-log.query` and `audit-log.export` are read-only and the supplied list binding must enforce `audit.read` server-side. ### Comments — Threaded - slug: `comments` kind: `full` category: `content` - 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 + wrappers; useComments(bindings, opts) returns items + `tree` + openCount + CRUD + forbiddenWords guard. Adapter pattern — see contract-negotiations §1. - install: `npx rr add comments` - detail: https://resource.manef.dev/slices/comments - prompt: https://resource.manef.dev/agents/comments - agent recipe: Run `rr add comments`. Wire Convex bindings ({ list, create, update, resolve, remove }) then use {render-prop} OR ...}>. v0.2.0 polymorphic — pick `kind` literal per host domain. ### SEO — AI Metadata Generator - slug: `seo` kind: `full` category: `content` - 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). - install: `npx rr add seo` - detail: https://resource.manef.dev/slices/seo - prompt: https://resource.manef.dev/agents/seo - agent recipe: Run `rr add seo`. Call seo.generate from server actions or admin mutations with `personaContext` describing your brand voice (or rely on the generic default). Cost guard rate-limits per-user within 24h via callsInWindow query. ### Publisher — clean HTML - slug: `publisher-clean-html` kind: `ui` category: `content` - A framework-neutral clean-HTML engine with schema-typed escaping/sanitization, CSS deduplication, inline-style guards and deterministic CSP planning. React/Next remains the default preview distribution; Svelte/SvelteKit adds a native sandboxed preview while reusing all 16 canonical TypeScript core files through verified sharedFiles, so the renderer and security spine are not forked. Richtext/SVG sanitization remains injectable and fail-closed without a configured DOMPurify runtime. Stateless, env-free, no Convex. - install: `npx rr add publisher-clean-html` - detail: https://resource.manef.dev/slices/publisher-clean-html - prompt: https://resource.manef.dev/agents/publisher-clean-html - agent recipe: Run `npx rr add publisher-clean-html` for React/Next or add `--framework sveltekit` for the Svelte preview. Build a ModuleRegistry, call publishPage(tree, registry, options), and preview the resulting full HTML document with PublishPreview. Both framework adapters share the exact same renderer/sanitizer/CSP core. Enable rich HTML/SVG by configuring DOMPurify once; without it those paths stay fail-closed. ### Content Loops - slug: `content-loops` kind: `ui` category: `content` - 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 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. - install: `npx rr add content-loops` - detail: https://resource.manef.dev/slices/content-loops - prompt: https://resource.manef.dev/agents/content-loops - agent recipe: Run `npx rr add content-loops`. Env-free demo: createMockLoopSource() then — variants round-robin (item i -> variants[i % n]). Real source: implement LoopEntitySource { id: 'blog.posts' (namespaced 'ns.name'), fields, async fetch({ filters, orderBy, direction, limit, offset }) returns { items, totalItems } }, call loopSourceRegistry.registerOrReplace(source), then . item.fields holds RESOLVED values — resolve media/author inside fetch. ### Markdown — page container with CRUD tabs + diagrams - slug: `markdown` kind: `ui` category: `content` - Framework-parity Markdown page container with Read / Write / Review surfaces over one shared parser, inline tokenizer, comment model, tab model, snippet registry, list grouping and chart-spec parser. React keeps the existing shadcn/Lucide UI, lazy Mermaid/KaTeX and lazy Recharts canvas. Svelte 5/SvelteKit ships native controls and native SVG bar/line/area/pie charts, so it needs only svelte + katex + mermaid and never pulls React/Lucide/shadcn/Recharts. Both render headings, lists/todos, GitHub-style callouts, fenced code, Mermaid, chart fences, KaTeX, tables, images, toggles and inline marks. Same grammar as the notion blocksToMarkdown / markdownToBlocks bridge; no store or Convex required. - install: `npx rr add markdown` - detail: https://resource.manef.dev/slices/markdown - prompt: https://resource.manef.dev/agents/markdown - agent recipe: Run `npx rr add markdown` for React/default or `npx rr add markdown --framework sveltekit`. Read-only: MarkdownReader. Full surface: MarkdownPage with read/write/review plus optional content/comment callbacks; omit callbacks for standalone local state. Mermaid and KaTeX lazy-load in both; chart fences use lazy Recharts in React and native SVG in Svelte. The notion blocksToMarkdown/markdownToBlocks bridge speaks the same grammar. ### Notion App — Block Editor - slug: `notion-app` kind: `full` category: `content` - Framework-parity Notion-style block editor. React/Next remains default with dnd-kit/shadcn and rich optional host capabilities; native Svelte 5/SvelteKit reuses the same page/block model, EditorDataAdapter CRUD seam, markdown bridge, block catalog/history semantics, and notion tool collection for title + block CRUD, slash/markdown transforms, todo/list/headings/quote/callout/code/equation/media/table/toggle/layout blocks, reorder, undo/redo, Markdown import/export and child pages without React/Next/dnd-kit/Lucide/shadcn/Sonner runtime. - install: `npx rr add notion-app` - detail: https://resource.manef.dev/slices/notion-app - prompt: https://resource.manef.dev/agents/notion-app - agent recipe: React/default: `npx rr add notion-app` (legacy alias `notion` remains). SvelteKit: `npx rr add notion-app --framework sveltekit`. Both use the same EditorDataAdapter page/block CRUD contract and convex/features/notion helpers. React mounts `` for the full rich capability surface; Svelte mounts `` and accepts optional navigation/tool registration. Keep authz in the host/backend adapter. ### Sections — composable marketing/landing sections - slug: `sections` kind: `ui` category: `content` - Canonical landing composition with one framework-neutral reducer, LandingStore adapter, ordering helpers, editor field schema, types, seed factory, and safe config parser. React/Next remains the default distribution and is now self-contained (local CRUD/motion/section-head; no template-shared or Next Link dependency). Explicit Svelte 5/SvelteKit installs native LandingProvider, LandingView, LandingEditorView, LandingSectionShell, StatsSection, TestimonialsSection, FaqSection, PricingSection, NewsletterSection, and CustomSection over the same core. v0.5.0 also fixes the previously broken installer source path from frontend/slices/landing-sections to frontend/slices/sections. - install: `npx rr add sections` - detail: https://resource.manef.dev/slices/sections - prompt: https://resource.manef.dev/agents/sections - agent recipe: Run `npx rr add sections` for React/default or `npx rr add sections --framework sveltekit`. Wire a LandingStore adapter ({items, publicBase, adminBase, create, update, remove}), then mount LandingView/LandingEditorView directly or through LandingProvider. Fold landingReducer into your host store and seed with defaultLandingSections(). Public pages map enabled LandingSection rows to the shipped stats/testimonials/pricing/faq/newsletter/custom renderers (or host renderers for hero/features/blog/etc.) inside LandingSectionShell. Both frameworks share the reducer, ordering, field schema, types and config parser. React is self-contained apart from declared npm/shadcn primitives; Svelte needs only svelte@^5. ### Motion Kit — scroll reveals, carousel, accordion, micro-interactions - slug: `motion-kit` kind: `ui` category: `ui` - Framework-parity motion primitives over one shared observer/easing/CSS core. React/Next remains the default distribution with Embla React + Radix; Svelte 5/SvelteKit adds native Reveal, Stagger, CountUp, Marquee, Embla-core Carousel, and accessible Accordion without React/Lucide/Radix runtime leakage. Reveal/count/marquee/accordion motion is reduced-motion aware, the Svelte carousel explicitly destroys its Embla instance on unmount, and globals-motion.css stays the single style contract. - install: `npx rr add motion-kit` - detail: https://resource.manef.dev/slices/motion-kit - prompt: https://resource.manef.dev/agents/motion-kit - agent recipe: Run `npx rr add motion-kit` for React/default or `npx rr add motion-kit --framework sveltekit`. Append the copied `globals-motion.css` to the host global stylesheet. Both frameworks expose Reveal/Stagger/CountUp/Marquee + Carousel/Accordion; Svelte uses native Svelte 5 and Embla core with lifecycle cleanup, while React keeps Embla React + Radix. Optional autoplay comes from embla-carousel-autoplay. ### Storefront Checkout — guest cart + checkout composition - slug: `storefront-checkout` kind: `ui` category: `content` - Guest-friendly persisted cart with one framework-neutral cart store. React/Next keeps CartProvider + shadcn/Lucide CartWidget/CheckoutSummary; Svelte/SvelteKit ships a native store, cart sheet, and checkout summary over the same quantity, localStorage, count/subtotal, IDR-format and agent-tool semantics. Client prices remain display-only: the host MUST re-price every line server-side before creating payment. Optional payment peer owns the actual payment step. - install: `npx rr add storefront-checkout` - detail: https://resource.manef.dev/slices/storefront-checkout - prompt: https://resource.manef.dev/agents/storefront-checkout - agent recipe: Run `npx rr add storefront-checkout` (or `--framework sveltekit`). Wrap your public layout once with `` and mount `` in the header extras. On product surfaces call `useCart().add({ slug, name, price, priceLabel, emoji })` with a host-resolved NUMERIC price. Build a /checkout route composing `` + a payment form (doku-payment's DokuDirectForm): its onSubmit calls YOUR Convex place-order action which re-prices each {slug, qty} from your catalog table server-side, generates an unguessable orderId, calls api.features.payment.actions.doku.createDirectPayment, records your domain order row, and returns { ok, orderId, instructions, expiresAt } ({ ok:false, notice } when DOKU creds are unset — surface it in the form and offer a contact fallback). After success render DokuPaymentInstructions + reactive status via api.features.payment.query.getOrderByOrderId. Reference: template-wirausaha-os convex/checkout.ts + slices/checkout/CheckoutPage.tsx. ### Theme Presets — unified switcher with bundled tweakcn registry - slug: `theme-presets` kind: `ui` category: `ui` - Runtime tweakcn color presets with React/Next kept as the default distribution and native Svelte 5/SvelteKit provider, switcher, site-default-save, display-mode, and theme-color adapters over one shared preset engine. Visitor choice resolves above site default above host default; registry-data.json stays bundled and lazy-loaded; grouping, swatches, CSS injection, persistence, preview/restore, and agent tools remain one framework-neutral source. React display mode uses next-themes; Svelte uses a browser-native light/dark/system adapter. - install: `npx rr add theme-presets` - detail: https://resource.manef.dev/slices/theme-presets - prompt: https://resource.manef.dev/agents/theme-presets - agent recipe: React/Next: `npx rr add theme-presets`, mount `` or `` inside next-themes and use ``. SvelteKit: `npx rr add theme-presets --framework sveltekit`; mount `` for preset + light/dark/system context, then ``, optional ``, and ``. Both distributions share visitor > site > host default resolution, registry-data.json, CSS injection, grouping/swatches, preview/restore and agent tools. Tailwind 4 globals must map `--color-*` directly from runtime variables (see README/HOST-SETUP). ### Site Setup Wizard — first-run site setup - slug: `site-setup-wizard` kind: `ui` category: `ui` - Post-claim onboarding wizard for clone-to-own templates. React/Next remains the default UI while Svelte 5/SvelteKit gets a native Identitas / Branding / Konten / Selesai flow over one framework-neutral step, field, preset, validation, save-payload and agent-tool core. Host callbacks still own save, seed, upload and theme-preview behavior; no backend is invented. Branding keeps grouped preset swatches, live preview, brand color/mode, optional logo/favicon upload and Analytics ID. - install: `npx rr add site-setup-wizard` - detail: https://resource.manef.dev/slices/site-setup-wizard - prompt: https://resource.manef.dev/agents/site-setup-wizard - agent recipe: Run `npx rr add site-setup-wizard`. Show from your admin gate when `setup.status().onboarded === false`: ` settingsUpsert(f)} seedSample={() => seedSample({})} seeded={status?.seeded} ImageField={ImageField} presetOptions={presets} onPresetPreview={(n) => preview(n)} />`. `save` receives Partial + `markOnboarded: true` — back it with a `settings.upsert` mutation that patches only provided fields. Theme bridge (optional): with the theme-presets slice installed build `presetOptions` from `groupTweakcnPresets(registry.items)` + `tweakcnSwatches(p)` and pass `useThemePreset().preview` as `onPresetPreview` — the picker then live-previews while the user browses and `Lewati setup` reverts via `onPresetPreview(null)`. Omit `presetOptions` to hide the picker entirely; omit `ImageField` to hide logo/favicon upload. Full wiring recipe in the slice's HOST-SETUP.md. ### File Upload — pluggable upload + URL resolver with storage-adapter contract - slug: `file-upload` kind: `ui` category: `data` - Host-pluggable file upload + URL resolution with React/Next kept as the default distribution and an additive Svelte 5/SvelteKit implementation. Both preserve FileRef parsing, upload/remove behavior, file chips, upload controls, demo localStorage storage, and bounded file tools. React adapters keep useUrl(); Svelte adapters use resolveUrl() plus optional subscribeUrl() so framework hook semantics stay isolated. - install: `npx rr add file-upload` - detail: https://resource.manef.dev/slices/file-upload - prompt: https://resource.manef.dev/agents/file-upload - agent recipe: Default React/Next: run `npx rr add file-upload`, wrap with ``, then use `` / `` and the React hooks. Svelte/SvelteKit: run `npx rr add file-upload --framework sveltekit`, wrap with the Svelte ``, and implement `FilesAdapter` with upload + remove + resolveUrl plus optional subscribeUrl for live invalidation. The bundled localStorage adapter is demo-only; production hosts can target Convex/S3/GCS/R2. The dangerous `files.remove` tool remains server-checked and requires confirmation. ### Selection — marquee multi-select + bulk actions - slug: `selection` kind: `ui` category: `ui` - 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. - install: `npx rr add selection` - detail: https://resource.manef.dev/slices/selection - prompt: https://resource.manef.dev/agents/selection - agent recipe: Run `npx rr add selection`. Zero deps (react-dom only). Wrap your list area in ` removeMany(ids)}>`, give the surface a `position: relative` div with a ref, drop `` inside it, and wrap each item in `…`. Hold-drag on empty space to rubber-band: drag RIGHT = window (only fully-enclosed, solid ring), drag LEFT = crossing (anything touched, dashed green). Edge-click an item to pick it (Shift = range, Cmd/Ctrl = toggle). Backspace/Delete bulk-deletes (focus outside a contentEditable), Escape + click-outside clear, floating `N selected · Delete · Clear` toolbar. Read state anywhere via `useSelection()`. The slice owns ONLY the id set — you own the data + the delete. Works on table rows / cards too, not just notion blocks. ### Notion UI — page editor · database · sidebar primitives - slug: `notion-ui` kind: `ui` category: `ui` - Framework-parity, props-driven Notion primitives over one shared domain model. React/Next remains default; native Svelte 5/SvelteKit now provides page, database and sidebar variants. Page keeps block CRUD, slash/markdown transforms and native drag reorder; database renders all 11 view kinds over the same filter/sort/formula/aggregate/CSV/JSON engines; sidebar reuses the same tree projection helpers with native drag/reparent. Host owns all data and authorization. - install: `npx rr add notion-ui` - detail: https://resource.manef.dev/slices/notion-ui - prompt: https://resource.manef.dev/agents/notion-ui - agent recipe: React/default: `npx rr add notion-ui `; append `--framework sveltekit` for native Svelte 5. Omit the variant to install all three. Both frameworks share the same Block/Page/Property/Database domain model and pure database/tree engines; data stays host-owned through callbacks. Svelte database renders table, board, list, gallery, calendar, feed, chart, dashboard, form, map and timeline without React/dnd-kit/Recharts/Lucide/shadcn runtime. ### Image Picker — one-button image/wallpaper chooser (gallery · upload · link · Unsplash · reposition) - slug: `image-picker` kind: `ui` category: `ui` - 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. React/Next remains the default renderer; native Svelte 5/SvelteKit ships the same picker/dialog/banner behavior over shared portable image semantics. - install: `npx rr add image-picker` - detail: https://resource.manef.dev/slices/image-picker - prompt: https://resource.manef.dev/agents/image-picker - agent recipe: Run `npx rr add image-picker` for React/Next or `npx rr add image-picker --framework sveltekit` for native Svelte 5. The headline component is `save(img)} onUpload={…} searchUnsplash={…} />` — ONE button that opens the 4-tab dialog (gallery / upload / link / Unsplash). For a reposition-able cover/hero band use `` (also passable to notion-shell's ``). Inject the backend: `onUpload` = the `files` slice's useFileUpload().upload (returns a FileRef); resolve upload images for display with `resolvedUrl` = files useFileUrl(parseFileRef(imageRef(parseImage(value))).storageId). `searchUnsplash` = `unsplashSearchVia('/api/unsplash')` — add a server route that proxies api.unsplash.com with UNSPLASH_ACCESS_KEY (never expose the key client-side). Ships a curated Unsplash + gallery fallback so it works with zero wiring. ImageValue = { type, value, positionY?, metadata? }; parseImage handles legacy string values. ### Workspace Shell — atomic (workspace × menuSet) NavContext - slug: `workspace-shell` kind: `full` category: `ui` - 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. - install: `npx rr add workspace-shell` - detail: https://resource.manef.dev/slices/workspace-shell - prompt: https://resource.manef.dev/agents/workspace-shell - agent recipe: Run `npx rr add workspace-shell`. Tables prefixed `workspaceShell_*` (menuSets, menuItems, itemComponents, wsAssignments, userAssignments, rolePerms, navContext). Mount `` inside your auth provider; use `useNavContext(wsId)` to read `{workspace, menuSet, source, effectiveMenuItems, setMenuSet, forkMenuSet}`. Drop-in `` in sidebar header. Tiered RBAC: `menus.manage` for workspace-default editing, `menus.fork` for user-personal copy. Resolver chain: user cache → user assignment → workspace default → none. Pair with audit-log slice for context-switch / fork events (graceful try/catch if absent). Effective items query applies role filter via workspaceShell_rolePerms (no rolePerms → show all, pre-RBAC compat). ### Library — resource hub (prompts · visuals · snippets · links) - slug: `library` kind: `full` category: `data` - 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. React/Next remains default; native Svelte 5/SvelteKit renders the same model/default/tool semantics against the same Convex backend. 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). - install: `npx rr add library` - detail: https://resource.manef.dev/slices/library - prompt: https://resource.manef.dev/agents/library - agent recipe: Run `npx rr add seo` (peer) then `npx rr add library` for React/Next or `npx rr add library --framework sveltekit` for native Svelte 5. Spread `seoTables` + `libraryTables` into your root Convex schema. Wrap the unauthenticated CRUD `internalMutation`s with your auth model (see README Install). Render `` and ``. Pass `onUpvote` to enable voting (consumer-owned backend); override `copy` + `kindLabels` per consumer. ### Data Table — TanStack - slug: `data-table` kind: `ui` category: `data` - Framework-parity DataTable: React/Next stays on TanStack React Table v8 + shadcn, while SvelteKit uses the official Svelte 5 TanStack Table v9 adapter with native semantic controls. Both expose sorting, column-bound filtering, pagination, row selection, column visibility, compact/comfortable density, and shared labels/summary semantics. Pure UI — consumers own data fetching and persistence. - install: `npx rr add data-table` - detail: https://resource.manef.dev/slices/data-table - prompt: https://resource.manef.dev/agents/data-table - agent recipe: Run `npx rr add data-table` for React/default (TanStack React Table v8 + shadcn) or `npx rr add data-table --framework sveltekit` for native Svelte 5 + @tanstack/svelte-table v9. Each framework owns its column-definition type; both expose sorting, column search, pagination, selection, visibility, density, and shared label/summary semantics. ### Pages CMS — block-composed multi-page editor - slug: `pages-cms` kind: `ui` category: `content` - Framework-parity multi-page CMS over one shared reducer/types/core. React keeps shadcn + Lucide admin surfaces but is now clean-install portable without Next-only imports or repo-only helpers. Svelte 5/SvelteKit adds native PagesView, PageEditorView, all 11 block editors, public renderers, provider and localStorage adapter with no React/Lucide/shadcn leakage. Draft block reordering stays local until Save so unsaved edits are preserved. - install: `npx rr add pages-cms` - detail: https://resource.manef.dev/slices/pages-cms - prompt: https://resource.manef.dev/agents/pages-cms - agent recipe: Run `npx rr add pages-cms` for React/default or `npx rr add pages-cms --framework sveltekit`. Wrap the surface in LocalPagesProvider for zero-backend localStorage or PagesProvider with your own PagesStore. Mount PagesView for the list, PageEditorView for the editor route, and BlocksRenderer for public pages. Both frameworks share PageBlock, pagesReducer, defaultPages, blank/duplicate helpers and nav derivation. ### Feedback States — loading skeletons + empty/error states - slug: `feedback-states` kind: `ui` category: `ui` - 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. - install: `npx rr add feedback-states` - detail: https://resource.manef.dev/slices/feedback-states - prompt: https://resource.manef.dev/agents/feedback-states - agent recipe: Run `npx rr add feedback-states` for both, or `npx rr add feedback-states loading` / `empty` for one surface. loading: mirrors streamed content, kind="page" drops into route loading.tsx, for in-flight work. empty: in zero-data spots, in app/not-found.tsx and kind="500" in app/error.tsx. Every preset overridable per use. ### Marketing Chrome — Header + Footer - slug: `marketing-chrome` kind: `ui` category: `ui` - 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). - install: `npx rr add marketing-chrome` - detail: https://resource.manef.dev/slices/marketing-chrome - prompt: https://resource.manef.dev/agents/marketing-chrome - agent recipe: Run `npx rr add marketing-chrome`. Feed MarketingHeader { brand, nav[], cta, layout } and MarketingFooter { brand, columns[], social[], legal[], layout }. Header layout split is the default marketing pattern; footer columns for full sites, slim for single-pagers. ### Settings — account + appearance shells - slug: `settings` kind: `ui` category: `ui` - 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`. - install: `npx rr add settings` - detail: https://resource.manef.dev/slices/settings - prompt: https://resource.manef.dev/agents/settings - agent recipe: Run `npx rr add settings` for both, or `npx rr add settings account` / `appearance` for one. account: implement SettingsAdapter { load, save } over your backend (Convex query + mutation), pass to ; save gets per-section partial patches (shallow-merge server-side); onDeleteAccount wires the danger zone. Already have a dashboard sidebar? Feed it settingsSectionsToNav(setSection, { activeId }) and render so there is ONE nav, not two. appearance: build an AppearanceAdapter (per-setting SegSetting values) from your appearance store, pass to ; or compose custom panels from ///. ### Notifications Center — bell + inbox - slug: `notifications-center` kind: `ui` category: `ui` - Adapter-driven notification inbox with one shared newest-first snapshot/filter/action core. React/Next keeps the shadcn + Lucide bell/list/item UI; Svelte/SvelteKit ships native bell/list/item UI and a Svelte-readable adapter over the same NotificationsAdapter, relative-time, unread, mutation, and agent-tool semantics. - install: `npx rr add notifications-center` - detail: https://resource.manef.dev/slices/notifications-center - prompt: https://resource.manef.dev/agents/notifications-center - agent recipe: Run `npx rr add notifications-center` (or `--framework sveltekit`). Bind your host feed through NotificationsAdapter, or start with createMemoryNotificationsAdapter(seed). The shared state core sorts newest-first and exposes unread + mark/dismiss/clear semantics; use surface="sheet" for mobile-heavy apps. ### Design Studio — photo / social design canvas - slug: `design-studio` kind: `ui` category: `os` - Framework-parity layered photo/social editor. React/Next remains default; native Svelte 5/SvelteKit covers the same canvas workflow over shared framework-neutral model/document, observable undo/redo, scene, filter/mask, safe-area, serialization, sample-media, and host-adapter cores. Both renderers support image/text/shape/sticker/HTML layers, transforms, masks/custom CSS, presets, keyboard shortcuts, JSON/HTML import-export, and optional host persistence through configureMediaStudio. - install: `npx rr add design-studio` - detail: https://resource.manef.dev/slices/design-studio - prompt: https://resource.manef.dev/agents/design-studio - agent recipe: React/default: `npx rr add design-studio`. SvelteKit: `npx rr add design-studio --framework sveltekit`. Both share the same layer/document model, observable undo/redo + scene stores, filters/masks/safe-area data, JSON/HTML serialization, bundled image samples, and configureMediaStudio host adapter. React keeps Lucide/shadcn chrome; Svelte installs only svelte@^5 plus portable core files. ### Quicklinks — website shortcuts with favicons - slug: `quicklinks` kind: `ui` category: `os` - 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. - install: `npx rr add quicklinks` - detail: https://resource.manef.dev/slices/quicklinks - prompt: https://resource.manef.dev/agents/quicklinks - agent recipe: Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. Website shortcut grid. Fully client-side; no backend required. STEP 1 — Install. `npx rr add quicklinks`. Ensure `@/features/quicklinks` resolves and Tailwind scans the slice folder. STEP 2 — Deps. npm: `lucide-react`. shadcn: button. STEP 3 — Mount. `` — unwired it persists to localStorage ("rr:quicklinks") with 4 demo seeds. Or register `quicklinksApp` in an appshell manifest. STEP 4 — Host store. `configureQuicklinks(store)` with { get, subscribe, add, remove, hydrate? } — or feed appshell's useQuickLinks capability from the same store so dock shortcuts stay in sync. ## Agent API JSON catalog endpoints for AI agents: ``` GET /api/knowledge # full catalog (resources + slices + layouts) GET /api/knowledge?type=slice # only Tier-3 slices GET /api/knowledge?type=template # only website templates GET /api/knowledge?type=layout # only layouts (sections, pages) GET /api/knowledge?slice= # detail for one slice GET /api/knowledge?resource= # detail for any resource GET /api/knowledge?layout= # detail for one layout (legacy) ``` Response shape: `{ resources: [...], slices: [...], layouts: [...], counts: {...}, rules: [...] }`. Each `resources[]` entry has `{ source, slug, title, description, category, tags, href, previewPath, install }` — agents can install any via `install` field. ## Hard rules (12-rule doctrine — full text at /best-practice) - Consumer profiles: Next.js 16.3.3 OR Svelte 5.57.0; Convex 1.45.0 is optional. See /best-practice for the active generated prompt. - Root `slices/` vertical slices stay canonical; routes are thin adapters; repeated page families use one dynamic `[slug]` route + registry/data SSOT. - Use the active framework's shadcn port + shared theme tokens; preserve DRY/SSOT. - Svelte profile: SvelteKit + Svelte 5 Runes + modern events/snippets; npm and Bun are both supported. No new legacy Svelte syntax. - Next profile: use `proxy.ts` not `middleware.ts`; `next/link` + `next/image` for internal/image optimization paths. - When Convex is active: isolate tenant/workspace reads with indexes; validate args + authorize handlers server-side. - When Convex is active: no growing bare `.collect()` — use indexes + `.take(N)` or paginate. - When Convex is active: every public mutation/query declares `args:` validators; user-owned writes authorize server-side. - RBAC + audit log on every mutation. - Next profile: `NEXT_PUBLIC_*` only for non-sensitive values. - **File modularity: 200-line hard cap per source file** (excl. catalog/seed/_generated). Compose, don't accumulate. Gate: `npm run audit:file-size`. - Slice contract: `slice.json` (with an embedded `contract` block) + `slice.manifest.json` mandatory per slice. Imports resolve via `@/components/ui/*`, `@/shared/*`, `@/features//*`, `@convex/*`, or relative-within-slice. - Solo-dev: push direct to main (no PR); Dokploy auto-deploys on push. ## How to install Fresh project (recommended): ``` # Next.js / React + npm (default) npx rahman-resources init my-app --framework react-next --package-manager npm # SvelteKit / Svelte 5 + Bun bunx rahman-resources init my-app --framework sveltekit --package-manager bun # Package manager and framework are independent: npm+Bun both work with either base. ``` Add a template or slice into an existing project: ``` npx rahman-resources add # Next.js default npx rahman-resources add --framework sveltekit # native/shared Svelte distribution bunx rahman-resources add --framework sveltekit --package-manager bun ``` ## Audit chain (run before deploy) ``` npm run validate:all # full chain: slices + templates + file-size + manifests + contracts npm run audit:slices # slice contract violations npm run audit:templates # template scaffold violations npm run audit:file-size # 200-line modularity cap ``` ## Deploy (Dokploy via sc-all) ``` # Invoke the sc-all skill in Claude Code — orchestrates # sc-dokploy + sc-convex: creates repo, pushes, configures Dokploy, # deploys self-hosted Convex backend, sets DNS, triggers build. ```