rahman-resources 1.14.2 → 1.16.0

package/lib/manifest.json

@@ -3,13 +3,30 @@
   "repo": "rahmanef63/resource-site",
   "branch": "main",
   "aliases": {
-    "blog-section": "landing-sections",
-    "faq-section": "landing-sections",
-    "portfolio-section": "landing-sections",
-    "changelog-feed": "landing-sections",
-    "feature-grid": "landing-sections",
-    "testimonials-grid": "landing-sections",
-    "pricing-page": "landing-sections"
+    "blog-section": "sections",
+    "faq-section": "sections",
+    "portfolio-section": "sections",
+    "changelog-feed": "sections",
+    "feature-grid": "sections",
+    "testimonials-grid": "sections",
+    "pricing-page": "sections",
+    "files": "file-upload",
+    "onboarding-wizard": "site-setup-wizard",
+    "media-studio": "design-studio",
+    "loading-states": "feedback-states",
+    "empty-states": "feedback-states",
+    "resume": "profile",
+    "about-profile": "profile",
+    "settings-page": "settings",
+    "shell-settings": "settings",
+    "doku-payment": "payment",
+    "midtrans-payment": "payment",
+    "landing-sections": "sections",
+    "notion-shell": "notion-ui",
+    "notion-database": "notion-ui",
+    "notion-sidebar": "notion-ui",
+    "notion": "notion-app",
+    "admin-console": "admin"
   },
   "layouts": [],
   "recipes": [],
@@ -121,6 +138,112 @@
         "ui"
       ]
     },
+    {
+      "slug": "booking",
+      "title": "Booking — session request form + owner inbox",
+      "category": "os",
+      "description": "One app that is BOTH a public 'book a session' request form AND the owner's triage inbox — it flips to show the inbox when the viewer can manage. Visitors submit name/email/topic (+ optional preferred time / note); the owner sees pending requests with Confirm / Decline. The backend is INJECTED via a small BookingAdapter (submit/list/setStatus/canManage): point configureBooking at your store, or keep the bundled in-memory mock so it renders fully interactive — form + inbox — with zero backend.",
+      "source": "rahmanef63/os-vps",
+      "install": "npx rahman-resources add booking",
+      "npmPackages": [],
+      "exampleCode": "\"use client\";\nimport { Booking } from \"@/features/booking\";\n\nexport default function BookingDemo() {\n  // Unwired -> in-memory mock; configureBooking for a real backend.\n  return <div className=\"h-dvh w-full\"><Booking /></div>;\n}",
+      "agentRecipe": "Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. A booking request form + owner inbox. Fully client-side; backend optional.\n\nSTEP 1 — Install. `npx rr add booking`. Ensure `@/features/booking` resolves and Tailwind scans the slice folder.\n\nSTEP 2 — Deps. npm: `lucide-react`. shadcn: `npx shadcn@latest add button input textarea scroll-area`.\n\nSTEP 3 — Mount. `<Booking />` 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.\n\nSTEP 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.",
+      "tags": [
+        "booking",
+        "contact",
+        "form",
+        "inbox",
+        "lead",
+        "scheduling",
+        "ui"
+      ]
+    },
+    {
+      "slug": "html-studio",
+      "title": "HTML Studio — sandboxed HTML/CSS/JS editor with live preview",
+      "category": "os",
+      "description": "A tiny web-page studio: write HTML / CSS / JS and see it render LIVE in a sandboxed iframe (srcdoc + sandbox=allow-scripts WITHOUT allow-same-origin, so user code runs in an opaque origin and cannot read the host) — then Save to a shareable /p/<slug>. Code / Split / Preview view toggle, a device-width preview (responsive / tablet / phone), a saved-pages rail, and public/private visibility. The backend is INJECTED via a small HtmlStudioAdapter (save/load/list/remove): point configureHtmlStudio at your store, or keep the bundled in-memory mock so the editor + live preview + saved list are fully interactive with zero backend.",
+      "source": "rahmanef63/os-vps",
+      "install": "npx rahman-resources add html-studio",
+      "npmPackages": [],
+      "exampleCode": "\"use client\";\nimport { HtmlStudio } from \"@/features/html-studio\";\n\nexport default function HtmlStudioDemo() {\n  // Unwired -> in-memory mock; configureHtmlStudio for a real backend.\n  return <div className=\"h-dvh w-full\"><HtmlStudio /></div>;\n}",
+      "agentRecipe": "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.\n\nSTEP 1 — Install. `npx rr add html-studio`. Ensure `@/features/html-studio` resolves and Tailwind scans the slice folder.\n\nSTEP 2 — Deps. npm: `lucide-react`. shadcn: `npx shadcn@latest add button input textarea scroll-area`.\n\nSTEP 3 — Mount. `<HtmlStudio />` 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.\n\nSTEP 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. KEEP the iframe sandbox without allow-same-origin — it is the security boundary.",
+      "tags": [
+        "html",
+        "editor",
+        "sandbox",
+        "iframe",
+        "preview",
+        "playground",
+        "code",
+        "ui"
+      ]
+    },
+    {
+      "slug": "resources-launcher-admin",
+      "title": "Resources Admin — curated icon-launcher CRUD",
+      "category": "os",
+      "description": "An owner-gated admin app for a curated icon-launcher: add / edit / remove / reorder links (label, lucide icon NAME, url, group, order) that open in a new tab. The backend is INJECTED via a small ResourcesAdapter (list/upsert/remove/canManage): point configureResources at your store, or keep the bundled in-memory mock so the whole CRUD — including reorder — is interactive with zero backend. Icons are stored as lucide NAME strings and resolved client-side, so the same data drives a public launcher surface.",
+      "source": "rahmanef63/os-vps",
+      "install": "npx rahman-resources add resources-launcher-admin",
+      "npmPackages": [],
+      "exampleCode": "\"use client\";\nimport { ResourcesAdmin } from \"@/features/resources-launcher-admin\";\n\nexport default function ResourcesAdminDemo() {\n  // Unwired -> in-memory mock; configureResources for a real backend.\n  return <div className=\"h-dvh w-full\"><ResourcesAdmin /></div>;\n}",
+      "agentRecipe": "Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. A curated icon-launcher admin (CRUD + reorder). Fully client-side; backend optional.\n\nSTEP 1 — Install. `npx rr add resources-launcher-admin`. Ensure `@/features/resources-launcher-admin` resolves and Tailwind scans the slice folder.\n\nSTEP 2 — Deps. npm: `lucide-react`. shadcn: `npx shadcn@latest add button input label scroll-area native-select`.\n\nSTEP 3 — Mount. `<ResourcesAdmin />` 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.\n\nSTEP 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.",
+      "tags": [
+        "launcher",
+        "links",
+        "bookmarks",
+        "admin",
+        "crud",
+        "icons",
+        "ui"
+      ]
+    },
+    {
+      "slug": "profile",
+      "title": "Profile — CV + identity card",
+      "category": "os",
+      "description": "One owner's identity in two co-located variants, behind one slug. resume: a clean one-column résumé / CV — name, roles, location, contacts, summary, skills, experience (role · org · period + bullets), projects — rendered by <Resume /> off a configureResume() seam, with a Print / PDF button. card: an \"About This Mac\"-style identity card — avatar / monogram, name, roles, outbound links, FAQ accordion — rendered by <AboutProfile /> off a configureAbout() seam. Both render a populated placeholder unwired (zero backend). Install one surface with `npx rr add profile resume|card`, or both with `npx rr add profile`.",
+      "source": "rahmanef63/os-vps",
+      "install": "npx rahman-resources add profile",
+      "npmPackages": [],
+      "exampleCode": "\"use client\";\nimport { Resume, AboutProfile } from \"@/features/profile\";\n\nexport default function ProfileDemo() {\n  // Unwired -> generic placeholders; configureResume(cv) / configureAbout(card) for real data.\n  return (\n    <div className=\"grid h-dvh grid-cols-2 gap-4\">\n      <Resume />\n      <AboutProfile />\n    </div>\n  );\n}",
+      "agentRecipe": "Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. Two identity renderers driven by injected data. Fully client-side; no backend required.\n\nSTEP 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.\n\nSTEP 2 — Deps. npm: `lucide-react`. shadcn: `npx shadcn@latest add button scroll-area avatar`.\n\nSTEP 3 — Mount. `<Resume />` (CV) or `<AboutProfile />` (card) in a height-bearing box — unwired each renders a generic placeholder. Or register `resumeApp` / `aboutProfileApp` in an appshell manifest.\n\nSTEP 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.",
+      "tags": [
+        "resume",
+        "cv",
+        "profile",
+        "portfolio",
+        "about",
+        "identity",
+        "bio",
+        "card",
+        "links",
+        "faq",
+        "print",
+        "ui"
+      ]
+    },
+    {
+      "slug": "start-here",
+      "title": "Start Here — guided OS onboarding tour",
+      "category": "os",
+      "description": "A guided 'Start Here' tour that lays the OS out as a path of stages, each stage opening real apps from the LIVE registry — drift-proof, it reads the injected app catalog instead of a hardcoded list, so adding an app surfaces it automatically (in a stage if listed, else a final 'Everything else' bucket). The catalog, the open(id) callback, and the stage journey are INJECTED via a small StartHereAdapter (apps / open / stages): point configureStartHere at your live app registry + window opener, or keep the bundled in-memory mock (a few generic apps + 3 stages) so the welcome tour renders fully alive with zero host.",
+      "source": "rahmanef63/os-vps",
+      "install": "npx rahman-resources add start-here",
+      "npmPackages": [],
+      "exampleCode": "\"use client\";\nimport { StartHere } from \"@/features/start-here\";\n\nexport default function StartHereDemo() {\n  // Unwired -> in-memory mock catalog; configureStartHere for the live registry.\n  return <div className=\"h-dvh w-full\"><StartHere /></div>;\n}",
+      "agentRecipe": "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.\n\nSTEP 1 — Install. `npx rr add start-here`. Ensure `@/features/start-here` resolves and Tailwind scans the slice folder.\n\nSTEP 2 — Deps. npm: `lucide-react`. shadcn: `npx shadcn@latest add button scroll-area`.\n\nSTEP 3 — Mount. `<StartHere />` 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.\n\nSTEP 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.",
+      "tags": [
+        "onboarding",
+        "tour",
+        "welcome",
+        "launcher",
+        "guide",
+        "os",
+        "ui"
+      ]
+    },
     {
       "slug": "os-terminal",
       "title": "Terminal — shell emulator with live passthrough + PTY seam",
@@ -267,45 +390,27 @@
       ]
     },
     {
-      "slug": "doku-payment",
-      "title": "DOKU — Indonesia Payment",
+      "slug": "payment",
+      "title": "Payment — Indonesia PSP (DOKU · Midtrans)",
       "category": "integrations",
-      "description": "Pembayaran lokal Indonesia via DOKU — Checkout (hosted) + Direct (VA / QRIS / e-Wallet / PayLater / Minimarket / Kartu). HMAC-signed REST + signature-verified webhook + idempotent retries. Sibling slice to midtrans-payment dengan paymentOrders schema yang dishare.",
+      "description": "Indonesia payment providers behind one slug + ONE shared Convex backend (convex/features/payment discriminates on a provider column: paymentOrders + paymentWebhookEvents, unprefixed). Two frontend variants: doku — DOKU Hosted Checkout + Direct (VA / QRIS / e-Wallet / PayLater), HMAC-SHA256 signed REST, signature-verified webhook, idempotent retries, dependency-free, server-side env only. midtrans — Snap hosted-modal checkout + orders history (needs npm midtrans-client + a NEXT_PUBLIC_MIDTRANS_CLIENT_KEY). Install one with `npx rr add payment doku|midtrans`, or both. A future stripe variant is reserved in the schema's provider union.",
       "source": "rahmanef63/resource-site",
       "docsUrl": "https://sandbox.doku.com/integration",
       "install": "",
       "npmPackages": [],
       "exampleCode": "",
-      "agentRecipe": "Run `npx rr add doku-payment`. DOKU dual-mode: Checkout (hosted, all channels) atau Direct (single channel, returns VA/QRIS/deeplink). Webhook di /webhooks/doku verify HMAC-SHA256 (canonical: Client-Id + Request-Id + Request-Timestamp + Request-Target + Digest). Idempotency by request_id index. Server-only — no NEXT_PUBLIC_*. Sandbox default (api-sandbox.doku.com); flip DOKU_IS_PRODUCTION=true for live.",
+      "agentRecipe": "Run `npx rr add payment` for both providers, or `npx rr add payment doku` / `midtrans`. Either variant copies the shared convex/features/payment backend. doku: Checkout (hosted) or Direct (single channel → VA/QRIS/deeplink); webhook /webhooks/doku verifies HMAC-SHA256; server-only, no NEXT_PUBLIC_*. midtrans: Snap.js + window.snap.pay(token); webhook verifies signature_key; needs NEXT_PUBLIC_MIDTRANS_CLIENT_KEY. Both patch paymentOrders by orderId; sandbox by default.",
       "tags": [
         "payment",
-        "doku",
+        "checkout",
         "indonesia",
+        "doku",
+        "midtrans",
+        "snap",
         "qris",
         "virtual-account",
         "ewallet",
-        "checkout"
-      ]
-    },
-    {
-      "slug": "midtrans-payment",
-      "title": "Midtrans — Indonesia Payment",
-      "category": "integrations",
-      "description": "Pembayaran lokal Indonesia via Midtrans Snap (BCA, Mandiri, BRI, e-wallet GoPay/OVO/Dana, QRIS). Webhook untuk konfirmasi. Provider-isolated under components/providers/midtrans + actions/midtrans so Doku/Stripe land as siblings.",
-      "source": "rahmanef63/resource-site",
-      "docsUrl": "https://docs.midtrans.com",
-      "install": "npm i midtrans-client",
-      "npmPackages": [
-        "midtrans-client"
-      ],
-      "exampleCode": "",
-      "agentRecipe": "Run `npx rr add midtrans-payment`. Midtrans Snap untuk pembayaran instant. Webhook ke Convex HTTP action /api/midtrans-callback untuk update order status. Ingat: PPN 11% sudah included di amount, jangan double-count.",
-      "tags": [
-        "payment",
-        "midtrans",
-        "indonesia",
-        "qris",
-        "snap"
+        "psp"
       ]
     },
     {
@@ -824,20 +929,24 @@
     },
     {
       "slug": "admin",
-      "title": "Admin — Generic Shell",
+      "title": "Admin — generic shell + composed console",
       "category": "infra",
-      "description": "HEADLESS admin scaffold — no chrome of its own; pair with dashboard-shell for app chrome. Per-instance admin landing scaffold + portable nav-from-registry factory. Consumer supplies a SliceRegistryAdapter (each slice declares its own admin.activity[]) + queryTable reader; the slice's buildAdminStats(opts) emits the { counts, unreadMessages, activity } shape Convex's admin.stats query returns. Pulled UP from rahmanef.com (Wave N+3.1, commit b542389) — domain literals dropped at the kitab boundary. Gated by requireAdmin on Convex side; superadmin email gate via SUPER_ADMIN_EMAIL env.",
+      "description": "Access-gated admin surfaces behind one slug, in two variants — each pulls ONLY its own convex backend (per-variant convex gating). shell: a HEADLESS minimal generic admin shell — a titled landing region + a portable buildAdminStats(opts) nav-from-registry factory (consumer supplies a SliceRegistryAdapter + queryTable reader) over convex/features/admin; superadmin gate via SUPER_ADMIN_EMAIL. console: the composed admin panel distilled from ~15 project admin panels — a gated two-column shell (AdminConsole) over a 26-section registry (ADMIN_CONSOLE_SECTIONS: observability / identity / ai / content / commerce / config) that mounts OTHER rr slices via a consumer-supplied `components` map (users→user-management, roles→rbac-roles, ai→ai-admin, tenants→platform-admin) plus 5 owned gap sections (Analytics, Audit-log, Nav config, SEO health, Leads/CRM) over convex/features/admin_console (ac_leads + ac_nav_items); gate injected, PLATFORM_ADMIN_EMAILS allowlist. Install one with `npx rr add admin shell|console`, or both with `npx rr add admin`. NOT the multi-tenant control plane — that's the separate `platform-admin` slice (the console's `tenants` section provider).",
       "source": "rahmanef63/resource-site",
       "install": "npx rahman-resources add admin",
       "npmPackages": [],
       "exampleCode": "",
-      "agentRecipe": "Run `rr add admin`. Wire <AdminPage labels={...} /> at /admin and call buildAdminStats({ sliceRegistry, queryTable }) inside convex/features/admin/query.ts — sliceRegistry.entries flat-maps each feature's admin.activity[] declarations. Set SUPER_ADMIN_EMAIL via `npx convex env set` to lock down /admin to one address.",
+      "agentRecipe": "Run `npx rr add admin` for both, or `npx rr add admin shell` / `console` for one — each variant pulls only its own convex backend. shell: mount <AdminPage labels={...} /> + call buildAdminStats({ sliceRegistry, queryTable }) in convex/features/admin/query.ts; lock down with SUPER_ADMIN_EMAIL. console: mount <AdminConsole access={useAdminAccess()} components={{ users: <UsersPanel/>, ... }} /> — owned sections (analytics/audit-log/nav-config/seo-health/leads) render as-is, map each reuse section id to the panel from the peer slice you installed; compose adminConsoleTables into convex/schema.ts and front ac_leads.create with rate-limit; gate via PLATFORM_ADMIN_EMAILS.",
       "tags": [
         "infra",
         "admin",
+        "console",
         "shell",
-        "crud",
-        "nav-from-registry"
+        "dashboard",
+        "composition",
+        "rbac",
+        "access-gate",
+        "registry"
       ]
     },
     {
@@ -911,6 +1020,47 @@
         "metadata-generator"
       ]
     },
+    {
+      "slug": "publisher-clean-html",
+      "title": "Publisher — clean HTML",
+      "category": "content",
+      "description": "A pure render-to-clean-HTML engine harvested from the Instatic CMS publisher, decoupled from its host caching / loops / visual-components / Layer-C islands. publishPage(tree, registry, options) walks a generic node tree bottom-up: render children, escape every prop by its schema-declared control type (url -> safe-URL, richtext -> DOMPurify, svg -> SVG profile, else HTML-escape), dedup CSS by moduleId (~60-80% shrink), splice author classes + inline styles onto each rendered root, then assemble <!DOCTYPE> + reset + framework + module CSS + a deterministic (sorted) CSP plan. Bring your own ModuleRegistry (each module is a pure render(props, children) -> { html, css? }). Security spine: HTML escape + safe-URL, CSS-value guard (expression()/{}/</), </style RAWTEXT neutraliser, and an injectable DOMPurify seam (configureRichtextSanitizer) that fails closed — without a runtime, richtext strips all tags and SVG returns empty. Stateless, env-free, ZERO npm deps, no Convex. Ships a PublishPreview iframe-srcdoc pane. A Wave-1 leaf of the feature-harvest ULTRAPLAN; a dependency of the planned visual-page-canvas.",
+      "source": "rahman-resources",
+      "install": "npx rahman-resources add publisher-clean-html",
+      "npmPackages": [],
+      "exampleCode": "",
+      "agentRecipe": "Run `npx rr add publisher-clean-html`. Build a registry: createModuleRegistry([{ id: 'base.body', render: (_p, kids) => ({ html: kids.join('') }) }, { id: 'demo.h', schema: { text: { type: 'text' } }, render: (p) => ({ html: `<h1>${p.text}</h1>`, css: 'h1{font-size:1.5rem}' }) }]). Tree = { rootNodeId, nodes: { [id]: { id, moduleId, props?, children?, classIds?, inlineStyles?, hidden? } } }. const { html } = publishPage(tree, registry, { title, cssEmission: 'inline' }). Preview: <PublishPreview html={html} />. Enable rich HTML/SVG by calling configureRichtextSanitizer(DOMPurify) once — without it, richtext/svg props fail closed (strip/empty). Props escape by schema control type, not key name.",
+      "tags": [
+        "content",
+        "publisher",
+        "html",
+        "static-export",
+        "sanitization",
+        "csp",
+        "css-dedup",
+        "render"
+      ]
+    },
+    {
+      "slug": "content-loops",
+      "title": "Content Loops",
+      "category": "content",
+      "description": "A data-source-driven repeater harvested from the Instatic CMS base.loop engine, decoupled from its publisher / page-tree / entryStack machinery into a plain React slice. Register pluggable LoopEntitySource backends (each declares display fields + an async fetch returning { items, totalItems }); drop <ContentLoop source|sourceId filters orderBy variants={[A, B]} /> to render one component per item, round-robining items across variants so alternating / featured layouts need no per-item branching. Ships a namespaced source registry (ids must be 'ns.name', so consumer sources can't shadow each other), createMockLoopSource for env-free previews + tests, and none/infinite pagination via useLoopPagination (a shadcn Load more button accumulates pageSize chunks). LoopItem.fields is a generic resolved-value bag — variants read item.fields.title directly, no second lookup. UI-only: no Convex tables shipped; point a source's fetch at Convex/REST when you have a backend. First slice of the feature-harvest ULTRAPLAN (docs/feature-harvest) and a dependency of the planned site-templates-engine + visual-page-canvas.",
+      "source": "rahman-resources",
+      "install": "npx rahman-resources add content-loops",
+      "npmPackages": [],
+      "exampleCode": "",
+      "agentRecipe": "Run `npx rr add content-loops`. Env-free demo: createMockLoopSource() then <ContentLoop source={s} pagination='infinite' pageSize={6} variants={[CardA, CardB]} /> — 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 <ContentLoop sourceId='blog.posts' variants={[...]} />. item.fields holds RESOLVED values — resolve media/author inside fetch.",
+      "tags": [
+        "content",
+        "loop",
+        "repeater",
+        "list",
+        "data-source",
+        "pagination",
+        "variants"
+      ]
+    },
     {
       "slug": "markdown",
       "title": "Markdown — page container with CRUD tabs + diagrams",
@@ -936,15 +1086,15 @@
       ]
     },
     {
-      "slug": "notion",
-      "title": "Notion — Block Editor",
+      "slug": "notion-app",
+      "title": "Notion App — Block Editor",
       "category": "content",
       "description": "Nested vertical slice (slice-of-slices) housing the full notion-page-clone block editor. Mount <PageEditor pageId/> inside <EditorAdapterProvider adapter/> — with `{}` it is a working plain-text/markdown block editor (slash menu, markdown triggers `# - > [] etc.`, dnd-kit drag with column layouts, per-block toolbar with turn-into/color/duplicate, per-block undo, paste-markdown import); host capabilities light up per optional adapter: data (block+page CRUD), selection (multi-select), comments (per-block popover), ai (Ask-AI panel), database (render + picker), mention (@-typeahead), page (nav/uploads/covers). Cluster-private shared layer under @notion/* — vendored block/page/database model, uid, inline markdown, page→md/html export. Pure convex block helpers (_blocks/_blockOps, unit-tested) ship in convex/features/notion. Same markdown grammar as the standalone `markdown` slice (blocksToMarkdown/markdownToBlocks bridge).",
       "source": "notion-page-clone",
-      "install": "npx rahman-resources add notion",
+      "install": "npx rahman-resources add notion-app",
       "npmPackages": [],
       "exampleCode": "",
-      "agentRecipe": "Run `npx rr add notion`. Wire the `@notion/*` path alias to `./slices/notion/*` in tsconfig. Minimal mount: `<EditorAdapterProvider adapter={{ data }}><PageEditor pageId={id}/></EditorAdapterProvider>` where `data` implements EditorDataAdapter (block+page CRUD over your store — see lib/dataAdapter.ts; a localStorage reference impl lives in the rr preview). Add capabilities incrementally: `selection` for multi-select, `comments` for per-block threads, `database.renderDatabase` to mount your database renderer inside database blocks, `mention.search` for @-typeahead, `page.navigateToPage`/`uploadFile` for nav + media. Convex hosts: copy convex/features/notion (_blocks/_blockOps are pure, unit-tested array ops) and keep handlers thin.",
+      "agentRecipe": "Run `npx rr add notion-app`. Wire the `@notion/*` path alias to `./slices/notion-app/*` in tsconfig. Minimal mount: `<EditorAdapterProvider adapter={{ data }}><PageEditor pageId={id}/></EditorAdapterProvider>` where `data` implements EditorDataAdapter (block+page CRUD over your store — see lib/dataAdapter.ts; a localStorage reference impl lives in the rr preview). Add capabilities incrementally: `selection` for multi-select, `comments` for per-block threads, `database.renderDatabase` to mount your database renderer inside database blocks, `mention.search` for @-typeahead, `page.navigateToPage`/`uploadFile` for nav + media. Convex hosts: copy convex/features/notion (_blocks/_blockOps are pure, unit-tested array ops) and keep handlers thin.",
       "tags": [
         "content",
         "notion",
@@ -957,15 +1107,15 @@
       ]
     },
     {
-      "slug": "landing-sections",
-      "title": "Landing Sections",
+      "slug": "sections",
+      "title": "Sections — composable marketing/landing sections",
       "category": "content",
       "description": "Canonical landing-page composition slice — replaces the former standalone hero / cta / pricing-page / faq-section / feature-grid / testimonials-grid / blog-section / portfolio-section / changelog-feed slices (all merged here as `kind` variants in v0.2.0). Ships a pure reducer (v0.4.0: LANDING_UPSERT auto-shifts sibling `order` to keep positions unique; LANDING_DELETE closes the gap) + LandingProvider store adapter + admin LandingView/LandingEditorView built on the shared CRUD primitives, plus a per-section LandingSectionShell (background image + custom Tailwind className overlay + scroll-reveal). NEW in v0.4.0: a `sections/` library of config-driven public renderers (StatsSection, TestimonialsSection, FaqSection, PricingSection, NewsletterSection, CustomSection) that read `LandingSection.config` JSON merged over template defaults — content stays dashboard-controlled without per-template renderer code; plus `parse-config` helpers (parseConfigBadge/parseConfigField) and `sections/config` guards (parseConfigObject, cfg*). Sections carry { kind, order, title, subtitle, enabled, imageUrl, imageRatio, bgImageUrl, className, config (JSON) } with up/down reorder arrows. Lifted from the _templates fleet `_shared/landing` (2026-06-11) — the 8 standalone templates ship a byte-similar copy; this rr slice is the SSOT. Used by all 7 rr website templates.",
       "source": "rahman-resources (lifted from _templates fleet)",
-      "install": "npx rahman-resources add landing-sections",
+      "install": "npx rahman-resources add sections",
       "npmPackages": [],
       "exampleCode": "",
-      "agentRecipe": "Run `npx rr add landing-sections`. Fold `landingReducer` into your root reducer (cases LANDING_UPSERT + LANDING_DELETE), seed State.landingSections with `defaultLandingSections()`, wrap your StoreProvider with `<LandingProvider value={adapter}/>` where adapter maps {items, publicBase, adminBase, create, update, remove} from your dispatch. Mount `<LandingView/>` at `/admin/landing` and `<LandingEditorView id={params.id}/>` at `/admin/landing/[id]`. In HomePage iterate `state.landingSections.filter(s => s.enabled).sort((a,b) => a.order - b.order)` and render each inside `<LandingSectionShell section={s}>`; for stats/testimonials/pricing/faq/newsletter/custom kinds drop in the shipped `<StatsSection/>` etc. (they read `section.config` JSON over your template defaults), or map the remaining kinds (hero/features/blog/etc.) to your own renderer. Use `parseConfigBadge(section.config)` for a section badge. Requires the template-base shared surface that ships in every rr website template: `@/components/templates/_shared/motion` (Reveal/Stagger/CountUp/Marquee/useInView — the motion-kit primitives), `@/components/templates/_shared/ui/section-head`, and `@/components/templates/_shared/crud/*`. Sections also use shadcn accordion/card/carousel + embla-carousel-autoplay.",
+      "agentRecipe": "Run `npx rr add sections`. Fold `landingReducer` into your root reducer (cases LANDING_UPSERT + LANDING_DELETE), seed State.landingSections with `defaultLandingSections()`, wrap your StoreProvider with `<LandingProvider value={adapter}/>` where adapter maps {items, publicBase, adminBase, create, update, remove} from your dispatch. Mount `<LandingView/>` at `/admin/landing` and `<LandingEditorView id={params.id}/>` at `/admin/landing/[id]`. In HomePage iterate `state.landingSections.filter(s => s.enabled).sort((a,b) => a.order - b.order)` and render each inside `<LandingSectionShell section={s}>`; for stats/testimonials/pricing/faq/newsletter/custom kinds drop in the shipped `<StatsSection/>` etc. (they read `section.config` JSON over your template defaults), or map the remaining kinds (hero/features/blog/etc.) to your own renderer. Use `parseConfigBadge(section.config)` for a section badge. Requires the template-base shared surface that ships in every rr website template: `@/components/templates/_shared/motion` (Reveal/Stagger/CountUp/Marquee/useInView — the motion-kit primitives), `@/components/templates/_shared/ui/section-head`, and `@/components/templates/_shared/crud/*`. Sections also use shadcn accordion/card/carousel + embla-carousel-autoplay.",
       "tags": [
         "admin",
         "landing",
@@ -1042,15 +1192,15 @@
       ]
     },
     {
-      "slug": "onboarding-wizard",
-      "title": "Onboarding Wizard — first-run site setup",
+      "slug": "site-setup-wizard",
+      "title": "Site Setup Wizard — first-run site setup",
       "category": "ui",
       "description": "Post-claim onboarding wizard for clone-to-own templates, graduated from the headless template surface (2026-06-06). Multi-step card flow (Identitas / Branding / Konten / Selesai) that stores ALL site config in the host backend via a props-driven save callback — a non-coder configures their site with zero code. Branding step ships a readable shadcn Select theme-preset picker (color swatches per preset + grouped headers + live preview callback — replaces the white-on-white native select), brand color quick-chips, light/dark/system default mode, logo/favicon upload via injected ImageField, and optional Analytics ID. Identity step hints invalid email format. 'Lewati setup' marks onboarded without fields and reverts any browsed-but-unsaved preset. Props-driven (R3): no convex/react import — host wires settings.upsert / seed.seedSample / setup.status into props; pairs naturally with the theme-presets slice (registry + tweakcnSwatches + previewTweakcnPreset) but works with any theme system or none.",
       "source": "personal-brand-os",
-      "install": "npx rahman-resources add onboarding-wizard",
+      "install": "npx rahman-resources add site-setup-wizard",
       "npmPackages": [],
       "exampleCode": "",
-      "agentRecipe": "Run `npx rr add onboarding-wizard`. Show from your admin gate when `setup.status().onboarded === false`: `<OnboardingWizard onDone={...} save={(f) => settingsUpsert(f)} seedSample={() => seedSample({})} seeded={status?.seeded} ImageField={ImageField} presetOptions={presets} onPresetPreview={(n) => preview(n)} />`. `save` receives Partial<OnboardingFields> + `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.",
+      "agentRecipe": "Run `npx rr add site-setup-wizard`. Show from your admin gate when `setup.status().onboarded === false`: `<OnboardingWizard onDone={...} save={(f) => settingsUpsert(f)} seedSample={() => seedSample({})} seeded={status?.seeded} ImageField={ImageField} presetOptions={presets} onPresetPreview={(n) => preview(n)} />`. `save` receives Partial<OnboardingFields> + `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.",
       "tags": [
         "ui",
         "onboarding",
@@ -1064,15 +1214,15 @@
       ]
     },
     {
-      "slug": "files",
-      "title": "Files — pluggable upload + URL resolver with storage-adapter contract",
+      "slug": "file-upload",
+      "title": "File Upload — pluggable upload + URL resolver with storage-adapter contract",
       "category": "data",
       "description": "Host-pluggable file upload + URL resolution. Ships <FileUploadButton>, <FileChip>, useFileUpload(), useFileUrl() — all reading from a FilesAdapter the host wires via <FilesAdapterProvider>. Bundled localStorage demo adapter stores blobs as data URLs (small files only). Drop in your own adapter for Convex / S3 / GCS / R2. The slice itself has zero backend coupling, proving the storage-adapter pattern for the rest of the open-silong blocked-pending-adapter wave (cover, workspace-io, templates, …).",
       "source": "notion-page-clone",
-      "install": "npx rahman-resources add files",
+      "install": "npx rahman-resources add file-upload",
       "npmPackages": [],
       "exampleCode": "",
-      "agentRecipe": "Run `npx rr add files`. Wrap your tree with `<FilesAdapterProvider adapter={...}>` — pass `useLocalStorageFilesAdapter()` for a quick demo or implement `FilesAdapter` (upload + remove + useUrl) against your backend. Then drop `<FileUploadButton onUploaded={...}>` anywhere; pair with `<FileChip fileRef={...}>` for rendered chips. Hooks: `useFileUpload()` returns `{upload, uploading, progress, removeFromStorage}`; `useFileUrl(storageId)` resolves to a fetchable URL (Convex adapter uses useQuery for live invalidation; demo reads localStorage synchronously). To wire S3: implement the FilesAdapter interface with presigned URLs + DELETE; the slice doesn't care which backend you pick.",
+      "agentRecipe": "Run `npx rr add file-upload`. Wrap your tree with `<FilesAdapterProvider adapter={...}>` — pass `useLocalStorageFilesAdapter()` for a quick demo or implement `FilesAdapter` (upload + remove + useUrl) against your backend. Then drop `<FileUploadButton onUploaded={...}>` anywhere; pair with `<FileChip fileRef={...}>` for rendered chips. Hooks: `useFileUpload()` returns `{upload, uploading, progress, removeFromStorage}`; `useFileUrl(storageId)` resolves to a fetchable URL (Convex adapter uses useQuery for live invalidation; demo reads localStorage synchronously). To wire S3: implement the FilesAdapter interface with presigned URLs + DELETE; the slice doesn't care which backend you pick.",
       "tags": [
         "data",
         "upload",
@@ -1106,15 +1256,15 @@
       ]
     },
     {
-      "slug": "notion-database",
-      "title": "Notion Database",
+      "slug": "notion-ui",
+      "title": "Notion UI — page editor · database · sidebar primitives",
       "category": "ui",
-      "description": "Drop-in Notion-style database surface. 11 views (table, board, list, gallery, calendar, feed, chart, dashboard, form, map, timeline), 18 property/cell types, and a per-type column-header config menu (number format, date ranges, select, relation, rollup, formula) plus filter / sort / group / calculate, row peek, row multi-select, table cell selection + drag-to-fill (click a cell, drag the handle to copy down — merged from the former database-cell-selection slice in v0.16), and CSV + JSON import-export. Pure and props-driven — the host owns the data and dispatches change callbacks. Domain types live in notion-shell (install it as the peer). Full release history in CHANGELOG.md.",
-      "source": "open-silong",
-      "install": "npx rahman-resources add notion-database",
+      "description": "The pure, props-driven Notion-clone primitives suite behind one slug, over one shared domain-type model (Block / Page / Property / Database / DbView …). page: the page + block editor (NotionPage / NotionHeader / NotionBlock, SlashMenu, block renderers, inline-markdown decorator, built-in code (highlight.js) + equation (KaTeX)). database: a drop-in 11-view database (table/board/list/gallery/calendar/feed/chart/dashboard/form/map/timeline, 18 property/cell types, per-type column config, filter/sort/group/calculate, row peek + multi-select, cell drag-fill, formula engine, CSV/JSON import-export). sidebar: a standalone tree-nav sidebar (dnd reorder + reparent with depth projection, inline rename, per-row icon picker). All stateless + callback-CRUD — the host owns the data. Install one surface with `npx rr add notion-ui page|database|sidebar`, or all with `npx rr add notion-ui`; the shared/ domain type model is copied for every variant. NOT the full Notion app — that's the separate `notion` slice (adapter + Convex backed).",
+      "source": "notion-page-clone",
+      "install": "npx rahman-resources add notion-ui",
       "npmPackages": [],
       "exampleCode": "",
-      "agentRecipe": "**Controlled component.** `<NotionDatabase />` renders the whole surface — 11 views (table, board, list, gallery, calendar, feed, chart, dashboard, form, map, timeline), 18 cell types, filter / sort / group / calculate, row peek + multi-select, table cell drag-fill, CSV / JSON import-export. It is 100% props-driven: it owns NO data state — you hold `db` + `rows` and persist every change callback. The view tab strip scrolls horizontally and the card clips to its border, so it stays inside any container width.\n\n**1. Install** — `npx rr add notion-database`. Cascades the `notion-shell` peer (the domain types live there). Components import from `@/features/notion-database`; types from `@/features/notion-shell`.\n\n**2. Minimal wire-up** — keep `db: Database` + `rows: Page[]` in your store (a Convex query result or `useState`) and pass change handlers:\n```tsx\nimport { NotionDatabase } from '@/features/notion-database';\n\n<NotionDatabase\n  db={db}\n  rows={rows}\n  onRowAdd={addRow}\n  onRowUpdate={(rowId, propId, value) => setValue(rowId, propId, value)}\n  onRowRemove={removeRow}\n  onPropertyAdd={addProperty}\n  onViewActivate={setActiveView}\n  onViewAdd={addView}\n  onViewConfigChange={(viewId, patch) => patchView(viewId, patch)}\n/>\n```\nOmit any callback and that affordance goes read-only; pass `readOnly` to freeze everything at once.\n\n**3. Data shape** — `Database = { id, name, properties: Property[], views: DatabaseViewConfig[], activeViewId }`; each row `Page = { id, title, rowProps: Record<propId, PropertyValue> }`. For `relation` / `rollup` cells also pass `pages` + `databases`; for `person` / `created_by` cells pass `userLookup(id)`.\n\n**4. Import / export** — mount `<DatabaseIOActions db={db} rows={rows} onImport={handleImport} />` in your toolbar: CSV/JSON in (with schema-diff), CSV/JSON + live-schema templates out. New columns arrive with a `tempId` — map it to your real backend id before writing their `rowProps`.\n\n**5. Backend (optional)** — the UI is store-agnostic. For Convex persistence copy `template-base/database-silong/convex/` (handlers → `convex/`, schema fragment merges into `convex/schema.ts`). Pick `_shared/minimal/` (single-user, noop authz) or `_shared/full/` (`@convex-dev/auth` + workspaces). See CONVEX-BACKEND.md.\n\n**Just one view?** Import it directly — `import { TableView } from '@/features/notion-database'` — and feed it `rows` + `renderCell` + `renderColumnHeader`.",
+      "agentRecipe": "**Controlled component.** `<NotionDatabase />` renders the whole surface — 11 views (table, board, list, gallery, calendar, feed, chart, dashboard, form, map, timeline), 18 cell types, filter / sort / group / calculate, row peek + multi-select, table cell drag-fill, CSV / JSON import-export. It is 100% props-driven: it owns NO data state — you hold `db` + `rows` and persist every change callback. The view tab strip scrolls horizontally and the card clips to its border, so it stays inside any container width.\n\n**1. Install** — `npx rr add notion-ui database`. Cascades the `notion-shell` peer (the domain types live there). Components import from `@/features/notion-ui`; types from `@/features/notion-ui`.\n\n**2. Minimal wire-up** — keep `db: Database` + `rows: Page[]` in your store (a Convex query result or `useState`) and pass change handlers:\n```tsx\nimport { NotionDatabase } from '@/features/notion-ui';\n\n<NotionDatabase\n  db={db}\n  rows={rows}\n  onRowAdd={addRow}\n  onRowUpdate={(rowId, propId, value) => setValue(rowId, propId, value)}\n  onRowRemove={removeRow}\n  onPropertyAdd={addProperty}\n  onViewActivate={setActiveView}\n  onViewAdd={addView}\n  onViewConfigChange={(viewId, patch) => patchView(viewId, patch)}\n/>\n```\nOmit any callback and that affordance goes read-only; pass `readOnly` to freeze everything at once.\n\n**3. Data shape** — `Database = { id, name, properties: Property[], views: DatabaseViewConfig[], activeViewId }`; each row `Page = { id, title, rowProps: Record<propId, PropertyValue> }`. For `relation` / `rollup` cells also pass `pages` + `databases`; for `person` / `created_by` cells pass `userLookup(id)`.\n\n**4. Import / export** — mount `<DatabaseIOActions db={db} rows={rows} onImport={handleImport} />` in your toolbar: CSV/JSON in (with schema-diff), CSV/JSON + live-schema templates out. New columns arrive with a `tempId` — map it to your real backend id before writing their `rowProps`.\n\n**5. Backend (optional)** — the UI is store-agnostic. For Convex persistence copy `template-base/database-silong/convex/` (handlers → `convex/`, schema fragment merges into `convex/schema.ts`). Pick `_shared/minimal/` (single-user, noop authz) or `_shared/full/` (`@convex-dev/auth` + workspaces). See CONVEX-BACKEND.md.\n\n**Just one view?** Import it directly — `import { TableView } from '@/features/notion-ui'` — and feed it `rows` + `renderCell` + `renderColumnHeader`.",
       "tags": [
         "ui",
         "notion",
@@ -1180,67 +1330,6 @@
         "dialog"
       ]
     },
-    {
-      "slug": "notion-sidebar",
-      "title": "Notion Sidebar — tree nav + page CRUD (rename · drag · icon picker)",
-      "category": "ui",
-      "description": "Standalone Notion-style tree-nav sidebar with full page CRUD, lifted out of notion-shell so it is reusable on its own. Props-driven + fully decoupled — owns its own lightweight NotionSidebarPage type (id / title / icon / parentId), imports no other slice. Capabilities: click a row to open; DOUBLE-CLICK a title to rename inline; drag the grip to reorder AND reparent (a @dnd-kit sortable tree with horizontal-offset depth projection); collapse/expand subtrees; hover a row for +subpage / delete. Optional per-row icon PICKER — wire `renderIconPicker` + `onIconChange` (e.g. @/features/icon-picker's IconPickerPopover) so clicking a row icon opens the picker. The host owns the data and dispatches onSelect / onCreate / onRename / onDelete / onMove / onIconChange. Compose with notion-shell (page editor) + notion-database (embedded DBs) for the full Notion-clone OS — see the notion-page-clone-os template.",
-      "source": "notion-page-clone",
-      "install": "npx rahman-resources add notion-sidebar",
-      "npmPackages": [],
-      "exampleCode": "",
-      "agentRecipe": "Run `npx rr add notion-sidebar`. Import `import { NotionSidebar, type NotionSidebarPage } from \"@/features/notion-sidebar\"`. Feed it a flat `pages: NotionSidebarPage[]` ({ id, title, icon, parentId }) — the sidebar builds the tree. Wire callbacks: onSelect(id), onCreate(parentId|null), onRename(id, title) [double-click a title to trigger], onDelete(id), onMove(id, parentId, beforeId) [drag the grip — reorders + reparents], onIconChange(id, icon). For rich icons pass `renderIcon` (display) + `renderIconPicker` (click-to-pick) wired to `@/features/icon-picker` (DynamicIcon + IconPickerPopover). npm: @dnd-kit/core + sortable + utilities. Pair with notion-shell (page editor) + notion-database (embedded DBs) — the notion-page-clone-os template shows the full reducer wiring.",
-      "tags": [
-        "ui",
-        "notion",
-        "sidebar",
-        "tree",
-        "nav",
-        "page",
-        "crud",
-        "rename",
-        "drag",
-        "dnd",
-        "reorder",
-        "reparent",
-        "icon-picker",
-        "primitive",
-        "portable",
-        "notion-like"
-      ]
-    },
-    {
-      "slug": "notion-shell",
-      "title": "Notion Shell — page + block editor primitives (pure, no sidebar/database)",
-      "category": "ui",
-      "description": "Portable Notion-style PAGE EDITOR primitives. v0.22 split the tree-nav SIDEBAR out into the standalone `notion-sidebar` slice (so the page editor and the sidebar are independently reusable); embedded DATABASES already live in the `notion-database` peer. notion-shell ships: NotionPage (optional cover image band + header + body), NotionHeader, NotionBlock (live inline-markdown decorator, hover actions menu, optional dragHandle slot, BUILT-IN code (highlight.js) + equation (KaTeX) blocks), SlashMenu (searchable block-type picker w/ keyboard nav), BlockActionsMenu (turn-into / duplicate / delete), InsertBlockButton (`+` trigger w/ SlashMenu), SortableBlockList (@dnd-kit render-prop wrapper for block reorder), PageActionsMenu (header dropdown: cover/favorite/duplicate/export/trash), InlineFormatToolbar + BlockColorPicker (colour) + MentionTypeahead + PageLayoutSection (layout). SPECIALISED BLOCK RENDERERS: ImageRenderer, EmbedRenderer (YouTube/Vimeo/Loom/Figma/CodePen/Spotify auto-detect). Domain types (Database, Property, PropertyValue, DbView, DatabaseViewConfig, DatabaseFilter, DatabaseSort) remain in notion-shell as the single source of truth (Page.rowOfDatabaseId + rowProps reference them). Pure / props-driven — host owns data + change handlers. Compose notion-sidebar + notion-shell + notion-database for the full Notion-clone OS.",
-      "source": "notion-page-clone",
-      "install": "npx rahman-resources add notion-shell",
-      "npmPackages": [],
-      "exampleCode": "",
-      "agentRecipe": "Run `npx rr add notion-shell` for the portable PAGE EDITOR wrappers ONLY (no backend; the tree-nav sidebar is the separate `notion-sidebar` slice). NPM deps: @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities. Import: `import { NotionPage, NotionBlock, SortableBlockList, PageActionsMenu, InsertBlockButton, InlineFormatToolbar, ImageRenderer, EmbedRenderer } from \"@/features/notion-shell\"`. NotionBlock ships slash menu + decorator + actions menu + dragHandle slot. **`createDefaultBlockRenderers()` returns the block-renderer registry — pass it to `<NotionBlock blockRenderers={…}>` so callout (icon+kind picker), table (editable grid), divider, image, embed, code (highlight.js) + equation (KaTeX) all render. code + equation are now BUILT-IN to notion-shell (npm: katex + highlight.js) — no adapter needed. Only `database` + `toc` are injected at the app level (they depend on host data + the sibling notion-database slice).** NotionPage ships optional cover prop. SortableBlockList wraps a render-prop callback `(id, dragProps) => <NotionBlock dragHandle={...} />`. NotionDatabase ships 6 views via VIEW_REGISTRY. Property cells: text/number/checkbox/select/multi-select/status/date/url/email/phone all built in. For rich icon UX wire `renderIcon` + `renderIconPicker` to `@/features/icon-picker`. **v0.17 — Notion-canonical editing keys (`blockKeyHandler.ts`): Enter splits at the caret into a new block (lists continue their type; an empty list item exits to paragraph); Backspace on an empty non-paragraph downgrades it to a plain paragraph (re-triggerable with `/`); a second Backspace on an empty paragraph merges into the previous block; Arrow up/down at a line edge hops blocks. Wire the host callbacks on `<NotionBlock>`: `onInsertAfter(type, init) => newId`, `onMergeBack()`, `onFocusSibling(dir)` — plus `focusBlock(id, offset?)` exported to move the caret after a host state change. The preview `page-demo.tsx` and the notion-clone template `DocView` show full array- and reducer-based wirings.** PRODUCT POINTER: the full Convex-backed Notion-clone OS (multi-workspace + auth + sharing + comments + snapshots + MCP) lives at https://github.com/rahmanef63/open-silong — clone that repo for the production stack; use this slice when you only need to embed the Notion-style UI in another project.**",
-      "tags": [
-        "ui",
-        "notion",
-        "shell",
-        "wrapper",
-        "page",
-        "block",
-        "editor",
-        "primitive",
-        "portable",
-        "slash-menu",
-        "decorator",
-        "wysiwyg",
-        "drag",
-        "cover",
-        "embed",
-        "image",
-        "code",
-        "equation",
-        "notion-like"
-      ]
-    },
     {
       "slug": "workspace-shell",
       "title": "Workspace Shell — atomic (workspace × menuSet) NavContext",
@@ -1327,41 +1416,24 @@
       ]
     },
     {
-      "slug": "empty-states",
-      "title": "Empty States — 404/500/403 + zero-data",
+      "slug": "feedback-states",
+      "title": "Feedback States — loading skeletons + empty/error states",
       "category": "ui",
-      "description": "Configurable EmptyState composing the shadcn Empty primitive: kind presets 404 / 500 / 403 / no-results / empty-list / first-use with default lucide icon + copy, all overridable. Primary/secondary actions. ErrorPage full-page wrapper is a drop-in for app/not-found.tsx and app/error.tsx (recipes in README).",
+      "description": "Two co-located placeholder surfaces behind one slug. loading: a configurable LoadingSkeleton over the shadcn Skeleton (kind presets text / card / list / table / form / page / block, overridable count + columns) plus a spinner LoadingState (inline / block / overlay) for in-flight work. empty: a configurable EmptyState over the shadcn Empty (404 / 500 / 403 / no-results / empty-list / first-use, overridable icon/title/copy/actions) plus an ErrorPage full-page wrapper for app/not-found.tsx and app/error.tsx. Install one surface with `npx rr add feedback-states loading|empty`, or both with `npx rr add feedback-states`. Replaces ad-hoc animate-pulse divs, hand-rolled Loader2 spans, and one-off error pages.",
       "source": "rr original",
-      "install": "npx rahman-resources add empty-states",
+      "install": "npx rahman-resources add feedback-states",
       "npmPackages": [],
       "exampleCode": "",
-      "agentRecipe": "Run `npx rr add empty-states`. Drop <EmptyState kind=\"no-results\" /> into zero-data spots; wrap with <ErrorPage kind=\"404\" /> in app/not-found.tsx and kind=\"500\" in app/error.tsx. Every preset's icon/title/description/action overridable per use.",
+      "agentRecipe": "Run `npx rr add feedback-states` for both, or `npx rr add feedback-states loading` / `empty` for one surface. loading: <LoadingSkeleton kind=\"table\" count={8} /> mirrors streamed content, kind=\"page\" drops into route loading.tsx, <LoadingState variant=\"inline|block|overlay\" /> for in-flight work. empty: <EmptyState kind=\"no-results\" /> in zero-data spots, <ErrorPage kind=\"404\" /> in app/not-found.tsx and kind=\"500\" in app/error.tsx. Every preset overridable per use.",
       "tags": [
+        "loading",
+        "skeleton",
+        "spinner",
         "empty-state",
         "404",
         "500",
         "403",
         "error-page",
-        "no-results",
-        "onboarding",
-        "basics"
-      ]
-    },
-    {
-      "slug": "loading-states",
-      "title": "Loading States — skeletons + spinners SSOT",
-      "category": "ui",
-      "description": "Configurable LoadingSkeleton composing the shadcn Skeleton primitive: kind presets text / card / list / table / form / page / block with overridable count + columns. Spinner-based LoadingState (inline / block / overlay) covers in-flight work where a skeleton would be wrong. The page kind drops straight into a route loading.tsx (recipe in README).",
-      "source": "rr original",
-      "install": "npx rahman-resources add loading-states",
-      "npmPackages": [],
-      "exampleCode": "",
-      "agentRecipe": "Run `npx rr add loading-states`. Pick the LoadingSkeleton kind that mirrors the streamed content (<LoadingSkeleton kind=\"table\" count={8} />); use kind=\"page\" inside route loading.tsx. For in-flight work (submits, refetches) use <LoadingState variant=\"inline|block|overlay\" /> instead of a skeleton.",
-      "tags": [
-        "loading",
-        "skeleton",
-        "spinner",
-        "suspense",
         "fallback",
         "placeholder",
         "basics"
@@ -1388,22 +1460,25 @@
       ]
     },
     {
-      "slug": "settings-page",
-      "title": "Settings Page — adapter-driven shell",
+      "slug": "settings",
+      "title": "Settings — account + appearance shells",
       "category": "ui",
-      "description": "SettingsShell two-column settings surface: section nav (mobile collapses to a Select) + Profile (avatar/name/email/bio), Preferences (theme/language/density), Notifications (switch rows), Danger zone (AlertDialog-confirmed delete). SettingsAdapter = load() + save(patch) — wire to Convex or anything; createMemoryAdapter ships for demos. Optimistic save with rollback.",
+      "description": "Two settings surfaces behind one slug, each adapter-driven so the slice owns no data. account: SettingsShell two-column surface (nav collapses to a Select on mobile) — Profile (avatar/name/email/bio), Preferences (theme/language/density), Notifications (switch rows), Danger zone (AlertDialog-confirmed delete) over an ASYNC SettingsAdapter { load, save(patch) } with optimistic save + rollback; createMemoryAdapter ships for demos. appearance: AppearancePanel (style/mode/accent/wallpaper/reduce-transparency/display) over a SYNC per-setting AppearanceAdapter, plus the generic SettingsSection / SettingsRow / Segmented / AccentSwatches primitives you compose custom panels from. Install one surface with `npx rr add settings account|appearance`, or both with `npx rr add settings`.",
       "source": "rr original",
-      "install": "npx rahman-resources add settings-page",
+      "install": "npx rahman-resources add settings",
       "npmPackages": [],
       "exampleCode": "",
-      "agentRecipe": "Run `npx rr add settings-page`. Implement SettingsAdapter { load, save } over your backend (Convex query + mutation), pass to <SettingsShell adapter>. save receives per-section partial patches — shallow-merge server-side. onDeleteAccount callback wires the danger zone.",
+      "agentRecipe": "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 <SettingsShell adapter>; save gets per-section partial patches (shallow-merge server-side); onDeleteAccount wires the danger zone. appearance: build an AppearanceAdapter (per-setting SegSetting values) from your appearance store, pass to <AppearancePanel appearance>; or compose custom panels from <SettingsSection>/<SettingsRow>/<Segmented>/<AccentSwatches>.",
       "tags": [
         "settings",
-        "account",
-        "profile",
         "preferences",
-        "notifications",
-        "danger-zone",
+        "account",
+        "appearance",
+        "theme",
+        "adapter",
+        "shell",
+        "primitives",
+        "ui",
         "basics"
       ]
     },
@@ -1427,15 +1502,15 @@
       ]
     },
     {
-      "slug": "media-studio",
-      "title": "Media Studio — photo / social design canvas",
+      "slug": "design-studio",
+      "title": "Design Studio — photo / social design canvas",
       "category": "os",
       "description": "A layered canvas studio: image/text/shape layers with filters, masks, transforms, safe-area guides and aspect presets (1:1/4:5/9:16/16:9), plus an export modal (download / copy / import JSON). Runs fully offline on bundled gradient-SVG samples. Host wiring is one call: configureMediaStudio({ saveDoc, imageSources }) lights up Save-to-host and feeds real image sources. Self-contained: inspector hooks are inert seams in lib/host.ts.",
       "source": "rahmanef63/os-vps",
-      "install": "npx rahman-resources add media-studio",
+      "install": "npx rahman-resources add design-studio",
       "npmPackages": [],
-      "exampleCode": "\"use client\";\nimport { MediaStudio } from \"@/features/media-studio\";\n\nexport default function StudioDemo() {\n  return <div className=\"h-dvh w-full\"><MediaStudio /></div>;\n}",
-      "agentRecipe": "Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. Layered canvas editor. Fully client-side; no backend required.\n\nSTEP 1 — Install. `npx rr add media-studio`. Ensure `@/features/media-studio` resolves and Tailwind scans the slice folder.\n\nSTEP 2 — Deps. npm: `lucide-react`. shadcn: button, dialog, badge, tooltip, scroll-area.\n\nSTEP 3 — Mount. `<MediaStudio />` in a height-bearing box — unwired it edits bundled sample layers. Or register `mediaStudioApp` in an appshell manifest.\n\nSTEP 4 — Host wiring. `configureMediaStudio({ saveDoc, imageSources })` — saveDoc persists the serialized document (enables Save-to-host in the export modal); imageSources supplies image URLs for new layers.",
+      "exampleCode": "\"use client\";\nimport { MediaStudio } from \"@/features/design-studio\";\n\nexport default function StudioDemo() {\n  return <div className=\"h-dvh w-full\"><MediaStudio /></div>;\n}",
+      "agentRecipe": "Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. Layered canvas editor. Fully client-side; no backend required.\n\nSTEP 1 — Install. `npx rr add design-studio`. Ensure `@/features/design-studio` resolves and Tailwind scans the slice folder.\n\nSTEP 2 — Deps. npm: `lucide-react`. shadcn: button, dialog, badge, tooltip, scroll-area.\n\nSTEP 3 — Mount. `<MediaStudio />` in a height-bearing box — unwired it edits bundled sample layers. Or register `mediaStudioApp` in an appshell manifest.\n\nSTEP 4 — Host wiring. `configureMediaStudio({ saveDoc, imageSources })` — saveDoc persists the serialized document (enables Save-to-host in the export modal); imageSources supplies image URLs for new layers.",
       "tags": [
         "canvas",
         "editor",
@@ -1463,24 +1538,6 @@
         "launcher",
         "ui"
       ]
-    },
-    {
-      "slug": "shell-settings",
-      "title": "Shell Settings — settings-app UI primitives",
-      "category": "ui",
-      "description": "The settings-app building blocks: SettingsSection, Row, AccentSwatches, a slice-local Segmented control, and a ready AppearancePanel (style/mode/accent/wallpaper/device/transparency groups — every group optional). Pure presentation: the injected AppearanceAdapter IS the contract, so it binds to any appearance store (appshell capabilities, zustand, plain useState) with zero slice edits.",
-      "source": "rahmanef63/os-vps",
-      "install": "npx rahman-resources add shell-settings",
-      "npmPackages": [],
-      "exampleCode": "\"use client\";\nimport { useState } from \"react\";\nimport { AppearancePanel } from \"@/features/shell-settings\";\n\nexport default function SettingsDemo() {\n  const [mode, setMode] = useState<\"light\" | \"dark\">(\"light\");\n  return <AppearancePanel adapter={{ mode: { value: mode, set: setMode } }} />;\n}",
-      "agentRecipe": "Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. Settings UI primitives. Pure presentation; state injected.\n\nSTEP 1 — Install. `npx rr add shell-settings`. Ensure `@/features/shell-settings` resolves and Tailwind scans the slice folder.\n\nSTEP 2 — Deps. npm: `lucide-react`. shadcn: button, switch, toggle-group, separator.\n\nSTEP 3 — Mount. `<AppearancePanel adapter={adapter} />` with an AppearanceAdapter (all groups optional — omit a group to hide it), or compose SettingsSection/Row/AccentSwatches/Segmented directly for custom panels.\n\nSTEP 4 — Bind. Wire the adapter to your appearance store (theme mode, accent, wallpaper, device, transparency) — the panel re-renders from the values you pass; no internal state.",
-      "tags": [
-        "settings",
-        "preferences",
-        "appearance",
-        "primitives",
-        "ui"
-      ]
     }
   ],
   "slices": [
@@ -1675,6 +1732,190 @@
       ],
       "agentRecipe": "Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. Host telemetry dashboard. Fully client-side; no backend required.\n\nSTEP 1 — Install. `npx rr add system-monitor`. Ensure `@/features/system-monitor` resolves and Tailwind scans the slice folder.\n\nSTEP 2 — Deps. npm: `lucide-react`. shadcn: `npx shadcn@latest add scroll-area`.\n\nSTEP 3 — Mount. `<SystemMonitor />` in a height-bearing box — unwired it runs a wavy in-browser telemetry mock. Or register `systemMonitorApp` in an appshell manifest.\n\nSTEP 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 }]."
     },
+    {
+      "slug": "booking",
+      "title": "Booking — session request form + owner inbox",
+      "category": "os",
+      "kind": "ui",
+      "version": "1.0.0",
+      "description": "One app that is BOTH a public 'book a session' request form AND the owner's triage inbox — it flips to show the inbox when the viewer can manage. Visitors submit name/email/topic (+ optional preferred time / note); the owner sees pending requests with Confirm / Decline. The backend is INJECTED via a small BookingAdapter (submit/list/setStatus/canManage): point configureBooking at your store, or keep the bundled in-memory mock so it renders fully interactive — form + inbox — with zero backend.",
+      "source": "rahmanef63/os-vps",
+      "slicePath": "frontend/slices/booking",
+      "convexPaths": [],
+      "npm": [
+        "lucide-react"
+      ],
+      "shadcn": [
+        "button",
+        "input",
+        "textarea",
+        "scroll-area"
+      ],
+      "env": [],
+      "peers": [],
+      "providers": [],
+      "tags": [
+        "booking",
+        "contact",
+        "form",
+        "inbox",
+        "lead",
+        "scheduling",
+        "ui"
+      ],
+      "agentRecipe": "Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. A booking request form + owner inbox. Fully client-side; backend optional.\n\nSTEP 1 — Install. `npx rr add booking`. Ensure `@/features/booking` resolves and Tailwind scans the slice folder.\n\nSTEP 2 — Deps. npm: `lucide-react`. shadcn: `npx shadcn@latest add button input textarea scroll-area`.\n\nSTEP 3 — Mount. `<Booking />` 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.\n\nSTEP 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."
+    },
+    {
+      "slug": "html-studio",
+      "title": "HTML Studio — sandboxed HTML/CSS/JS editor with live preview",
+      "category": "os",
+      "kind": "ui",
+      "version": "1.0.0",
+      "description": "A tiny web-page studio: write HTML / CSS / JS and see it render LIVE in a sandboxed iframe (srcdoc + sandbox=allow-scripts WITHOUT allow-same-origin, so user code runs in an opaque origin and cannot read the host) — then Save to a shareable /p/<slug>. Code / Split / Preview view toggle, a device-width preview (responsive / tablet / phone), a saved-pages rail, and public/private visibility. The backend is INJECTED via a small HtmlStudioAdapter (save/load/list/remove): point configureHtmlStudio at your store, or keep the bundled in-memory mock so the editor + live preview + saved list are fully interactive with zero backend.",
+      "source": "rahmanef63/os-vps",
+      "slicePath": "frontend/slices/html-studio",
+      "convexPaths": [],
+      "npm": [
+        "lucide-react"
+      ],
+      "shadcn": [
+        "button",
+        "input",
+        "textarea",
+        "scroll-area"
+      ],
+      "env": [],
+      "peers": [],
+      "providers": [],
+      "tags": [
+        "html",
+        "editor",
+        "sandbox",
+        "iframe",
+        "preview",
+        "playground",
+        "code",
+        "ui"
+      ],
+      "agentRecipe": "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.\n\nSTEP 1 — Install. `npx rr add html-studio`. Ensure `@/features/html-studio` resolves and Tailwind scans the slice folder.\n\nSTEP 2 — Deps. npm: `lucide-react`. shadcn: `npx shadcn@latest add button input textarea scroll-area`.\n\nSTEP 3 — Mount. `<HtmlStudio />` 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.\n\nSTEP 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. KEEP the iframe sandbox without allow-same-origin — it is the security boundary."
+    },
+    {
+      "slug": "resources-launcher-admin",
+      "title": "Resources Admin — curated icon-launcher CRUD",
+      "category": "os",
+      "kind": "ui",
+      "version": "1.0.0",
+      "description": "An owner-gated admin app for a curated icon-launcher: add / edit / remove / reorder links (label, lucide icon NAME, url, group, order) that open in a new tab. The backend is INJECTED via a small ResourcesAdapter (list/upsert/remove/canManage): point configureResources at your store, or keep the bundled in-memory mock so the whole CRUD — including reorder — is interactive with zero backend. Icons are stored as lucide NAME strings and resolved client-side, so the same data drives a public launcher surface.",
+      "source": "rahmanef63/os-vps",
+      "slicePath": "frontend/slices/resources-launcher-admin",
+      "convexPaths": [],
+      "npm": [
+        "lucide-react"
+      ],
+      "shadcn": [
+        "button",
+        "input",
+        "label",
+        "scroll-area",
+        "native-select"
+      ],
+      "env": [],
+      "peers": [],
+      "providers": [],
+      "tags": [
+        "launcher",
+        "links",
+        "bookmarks",
+        "admin",
+        "crud",
+        "icons",
+        "ui"
+      ],
+      "agentRecipe": "Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. A curated icon-launcher admin (CRUD + reorder). Fully client-side; backend optional.\n\nSTEP 1 — Install. `npx rr add resources-launcher-admin`. Ensure `@/features/resources-launcher-admin` resolves and Tailwind scans the slice folder.\n\nSTEP 2 — Deps. npm: `lucide-react`. shadcn: `npx shadcn@latest add button input label scroll-area native-select`.\n\nSTEP 3 — Mount. `<ResourcesAdmin />` 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.\n\nSTEP 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."
+    },
+    {
+      "slug": "profile",
+      "title": "Profile — CV + identity card",
+      "category": "os",
+      "kind": "ui",
+      "version": "1.0.0",
+      "description": "One owner's identity in two co-located variants, behind one slug. resume: a clean one-column résumé / CV — name, roles, location, contacts, summary, skills, experience (role · org · period + bullets), projects — rendered by <Resume /> off a configureResume() seam, with a Print / PDF button. card: an \"About This Mac\"-style identity card — avatar / monogram, name, roles, outbound links, FAQ accordion — rendered by <AboutProfile /> off a configureAbout() seam. Both render a populated placeholder unwired (zero backend). Install one surface with `npx rr add profile resume|card`, or both with `npx rr add profile`.",
+      "source": "rahmanef63/os-vps",
+      "slicePath": "frontend/slices/profile",
+      "convexPaths": [],
+      "npm": [
+        "lucide-react"
+      ],
+      "shadcn": [
+        "button",
+        "scroll-area",
+        "avatar"
+      ],
+      "env": [],
+      "peers": [],
+      "providers": [],
+      "tags": [
+        "resume",
+        "cv",
+        "profile",
+        "portfolio",
+        "about",
+        "identity",
+        "bio",
+        "card",
+        "links",
+        "faq",
+        "print",
+        "ui"
+      ],
+      "agentRecipe": "Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. Two identity renderers driven by injected data. Fully client-side; no backend required.\n\nSTEP 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.\n\nSTEP 2 — Deps. npm: `lucide-react`. shadcn: `npx shadcn@latest add button scroll-area avatar`.\n\nSTEP 3 — Mount. `<Resume />` (CV) or `<AboutProfile />` (card) in a height-bearing box — unwired each renders a generic placeholder. Or register `resumeApp` / `aboutProfileApp` in an appshell manifest.\n\nSTEP 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.",
+      "variants": {
+        "default": "resume",
+        "items": [
+          {
+            "id": "resume",
+            "title": "Resume",
+            "description": "Formal one-column printable CV (Resume + configureResume)."
+          },
+          {
+            "id": "card",
+            "title": "Card",
+            "description": "Compact avatar + links + FAQ identity card (AboutProfile + configureAbout)."
+          }
+        ]
+      }
+    },
+    {
+      "slug": "start-here",
+      "title": "Start Here — guided OS onboarding tour",
+      "category": "os",
+      "kind": "ui",
+      "version": "1.0.0",
+      "description": "A guided 'Start Here' tour that lays the OS out as a path of stages, each stage opening real apps from the LIVE registry — drift-proof, it reads the injected app catalog instead of a hardcoded list, so adding an app surfaces it automatically (in a stage if listed, else a final 'Everything else' bucket). The catalog, the open(id) callback, and the stage journey are INJECTED via a small StartHereAdapter (apps / open / stages): point configureStartHere at your live app registry + window opener, or keep the bundled in-memory mock (a few generic apps + 3 stages) so the welcome tour renders fully alive with zero host.",
+      "source": "rahmanef63/os-vps",
+      "slicePath": "frontend/slices/start-here",
+      "convexPaths": [],
+      "npm": [
+        "lucide-react"
+      ],
+      "shadcn": [
+        "button",
+        "scroll-area"
+      ],
+      "env": [],
+      "peers": [],
+      "providers": [],
+      "tags": [
+        "onboarding",
+        "tour",
+        "welcome",
+        "launcher",
+        "guide",
+        "os",
+        "ui"
+      ],
+      "agentRecipe": "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.\n\nSTEP 1 — Install. `npx rr add start-here`. Ensure `@/features/start-here` resolves and Tailwind scans the slice folder.\n\nSTEP 2 — Deps. npm: `lucide-react`. shadcn: `npx shadcn@latest add button scroll-area`.\n\nSTEP 3 — Mount. `<StartHere />` 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.\n\nSTEP 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."
+    },
     {
       "slug": "os-terminal",
       "title": "Terminal — shell emulator with live passthrough + PTY seam",
@@ -1955,78 +2196,14 @@
       "agentRecipe": "Run `rr add convex-auth`. Then create convex/auth.ts using the kitab pattern (Resend provider). Set env via `npx convex env set` for self-hosted."
     },
     {
-      "slug": "doku-payment",
-      "title": "DOKU — Indonesia Payment",
+      "slug": "payment",
+      "title": "Payment — Indonesia PSP (DOKU · Midtrans)",
       "category": "integrations",
       "kind": "full",
       "version": "0.4.0",
-      "description": "Pembayaran lokal Indonesia via DOKU — Checkout (hosted) + Direct (VA / QRIS / e-Wallet / PayLater / Minimarket / Kartu). HMAC-signed REST + signature-verified webhook + idempotent retries. Sibling slice to midtrans-payment dengan paymentOrders schema yang dishare.",
+      "description": "Indonesia payment providers behind one slug + ONE shared Convex backend (convex/features/payment discriminates on a provider column: paymentOrders + paymentWebhookEvents, unprefixed). Two frontend variants: doku — DOKU Hosted Checkout + Direct (VA / QRIS / e-Wallet / PayLater), HMAC-SHA256 signed REST, signature-verified webhook, idempotent retries, dependency-free, server-side env only. midtrans — Snap hosted-modal checkout + orders history (needs npm midtrans-client + a NEXT_PUBLIC_MIDTRANS_CLIENT_KEY). Install one with `npx rr add payment doku|midtrans`, or both. A future stripe variant is reserved in the schema's provider union.",
       "source": "rahmanef63/resource-site",
-      "slicePath": "frontend/slices/doku-payment",
-      "convexPaths": [
-        "convex/features/payment"
-      ],
-      "npm": [],
-      "shadcn": [
-        "card",
-        "button",
-        "dialog",
-        "input",
-        "label",
-        "select",
-        "badge",
-        "skeleton"
-      ],
-      "env": [
-        {
-          "name": "DOKU_CLIENT_ID",
-          "scope": "convex",
-          "required": true
-        },
-        {
-          "name": "DOKU_SECRET_KEY",
-          "scope": "convex",
-          "required": true
-        },
-        {
-          "name": "DOKU_IS_PRODUCTION",
-          "scope": "convex"
-        },
-        {
-          "name": "DOKU_NOTIFY_PATH",
-          "scope": "convex"
-        }
-      ],
-      "peers": [
-        {
-          "slug": "convex-auth",
-          "range": "^0.1",
-          "reason": "Order ownership requires authenticated user."
-        }
-      ],
-      "providers": [
-        "doku"
-      ],
-      "tags": [
-        "payment",
-        "doku",
-        "indonesia",
-        "qris",
-        "virtual-account",
-        "ewallet",
-        "checkout"
-      ],
-      "agentRecipe": "Run `npx rr add doku-payment`. DOKU dual-mode: Checkout (hosted, all channels) atau Direct (single channel, returns VA/QRIS/deeplink). Webhook di /webhooks/doku verify HMAC-SHA256 (canonical: Client-Id + Request-Id + Request-Timestamp + Request-Target + Digest). Idempotency by request_id index. Server-only — no NEXT_PUBLIC_*. Sandbox default (api-sandbox.doku.com); flip DOKU_IS_PRODUCTION=true for live."
-    },
-    {
-      "slug": "midtrans-payment",
-      "title": "Midtrans — Indonesia Payment",
-      "category": "integrations",
-      "kind": "full",
-      "version": "0.2.0",
-      "description": "Pembayaran lokal Indonesia via Midtrans Snap (BCA, Mandiri, BRI, e-wallet GoPay/OVO/Dana, QRIS). Webhook untuk konfirmasi. Provider-isolated under components/providers/midtrans + actions/midtrans so Doku/Stripe land as siblings.",
-      "source": "rahmanef63/resource-site",
-      "slicePath": "frontend/slices/midtrans-payment",
+      "slicePath": "frontend/slices/payment",
       "convexPaths": [
         "convex/features/payment"
       ],
@@ -2034,22 +2211,35 @@
         "midtrans-client@^1.4.2"
       ],
       "shadcn": [
-        "card",
+        "badge",
         "button",
+        "card",
         "dialog",
         "input",
-        "label"
+        "label",
+        "select",
+        "skeleton"
       ],
       "env": [
+        {
+          "name": "DOKU_CLIENT_ID",
+          "scope": "convex"
+        },
+        {
+          "name": "DOKU_SECRET_KEY",
+          "scope": "convex"
+        },
+        {
+          "name": "DOKU_IS_PRODUCTION",
+          "scope": "convex"
+        },
         {
           "name": "MIDTRANS_SERVER_KEY",
-          "scope": "convex",
-          "required": true
+          "scope": "convex"
         },
         {
           "name": "MIDTRANS_CLIENT_KEY",
-          "scope": "next-public",
-          "required": true
+          "scope": "next-public"
         },
         {
           "name": "MIDTRANS_IS_PRODUCTION",
@@ -2060,20 +2250,41 @@
         {
           "slug": "convex-auth",
           "range": "^0.1",
-          "reason": "Order ownership requires authenticated user."
+          "reason": "Order ownership requires authenticated user (guest checkout works without)."
         }
       ],
       "providers": [
+        "doku",
         "midtrans"
       ],
       "tags": [
         "payment",
-        "midtrans",
+        "checkout",
         "indonesia",
+        "doku",
+        "midtrans",
+        "snap",
         "qris",
-        "snap"
-      ],
-      "agentRecipe": "Run `npx rr add midtrans-payment`. Midtrans Snap untuk pembayaran instant. Webhook ke Convex HTTP action /api/midtrans-callback untuk update order status. Ingat: PPN 11% sudah included di amount, jangan double-count."
+        "virtual-account",
+        "ewallet",
+        "psp"
+      ],
+      "agentRecipe": "Run `npx rr add payment` for both providers, or `npx rr add payment doku` / `midtrans`. Either variant copies the shared convex/features/payment backend. doku: Checkout (hosted) or Direct (single channel → VA/QRIS/deeplink); webhook /webhooks/doku verifies HMAC-SHA256; server-only, no NEXT_PUBLIC_*. midtrans: Snap.js + window.snap.pay(token); webhook verifies signature_key; needs NEXT_PUBLIC_MIDTRANS_CLIENT_KEY. Both patch paymentOrders by orderId; sandbox by default.",
+      "variants": {
+        "default": "doku",
+        "items": [
+          {
+            "id": "doku",
+            "title": "DOKU",
+            "description": "Hosted Checkout + Direct channel picker, HMAC REST, dependency-free."
+          },
+          {
+            "id": "midtrans",
+            "title": "Midtrans",
+            "description": "Snap hosted-checkout button + orders history (needs midtrans-client + next-public key)."
+          }
+        ]
+      }
     },
     {
       "slug": "resend-newsletter",
@@ -3129,44 +3340,90 @@
     },
     {
       "slug": "admin",
-      "title": "Admin — Generic Shell",
+      "title": "Admin — generic shell + composed console",
       "category": "infra",
       "kind": "full",
       "version": "0.2.1",
-      "description": "HEADLESS admin scaffold — no chrome of its own; pair with dashboard-shell for app chrome. Per-instance admin landing scaffold + portable nav-from-registry factory. Consumer supplies a SliceRegistryAdapter (each slice declares its own admin.activity[]) + queryTable reader; the slice's buildAdminStats(opts) emits the { counts, unreadMessages, activity } shape Convex's admin.stats query returns. Pulled UP from rahmanef.com (Wave N+3.1, commit b542389) — domain literals dropped at the kitab boundary. Gated by requireAdmin on Convex side; superadmin email gate via SUPER_ADMIN_EMAIL env.",
+      "description": "Access-gated admin surfaces behind one slug, in two variants — each pulls ONLY its own convex backend (per-variant convex gating). shell: a HEADLESS minimal generic admin shell — a titled landing region + a portable buildAdminStats(opts) nav-from-registry factory (consumer supplies a SliceRegistryAdapter + queryTable reader) over convex/features/admin; superadmin gate via SUPER_ADMIN_EMAIL. console: the composed admin panel distilled from ~15 project admin panels — a gated two-column shell (AdminConsole) over a 26-section registry (ADMIN_CONSOLE_SECTIONS: observability / identity / ai / content / commerce / config) that mounts OTHER rr slices via a consumer-supplied `components` map (users→user-management, roles→rbac-roles, ai→ai-admin, tenants→platform-admin) plus 5 owned gap sections (Analytics, Audit-log, Nav config, SEO health, Leads/CRM) over convex/features/admin_console (ac_leads + ac_nav_items); gate injected, PLATFORM_ADMIN_EMAILS allowlist. Install one with `npx rr add admin shell|console`, or both with `npx rr add admin`. NOT the multi-tenant control plane — that's the separate `platform-admin` slice (the console's `tenants` section provider).",
       "source": "rahmanef63/resource-site",
       "slicePath": "frontend/slices/admin",
       "convexPaths": [
-        "convex/features/admin"
+        "convex/features/admin",
+        "convex/features/admin_console"
       ],
       "npm": [],
       "shadcn": [
+        "badge",
+        "button",
         "card",
-        "button"
+        "input",
+        "progress",
+        "scroll-area",
+        "select",
+        "sheet",
+        "table",
+        "textarea"
       ],
       "env": [
         {
           "name": "SUPER_ADMIN_EMAIL",
           "scope": "convex",
-          "required": false
+          "required": false,
+          "description": "shell variant — single super-admin gate."
+        },
+        {
+          "name": "PLATFORM_ADMIN_EMAILS",
+          "scope": "convex",
+          "required": false,
+          "description": "console variant — comma-separated platform-admin allowlist."
         }
       ],
       "peers": [
         {
           "slug": "convex-auth",
           "range": "^0.1",
-          "reason": "requireAdmin gate uses convex-auth user identity."
+          "reason": "requireAdmin gate uses convex-auth identity."
+        },
+        {
+          "slug": "rbac-roles",
+          "range": "^0.1",
+          "reason": "console section gates are permission tokens resolved by rbac-roles."
         }
       ],
       "providers": [],
       "tags": [
         "infra",
         "admin",
+        "console",
         "shell",
-        "crud",
-        "nav-from-registry"
-      ],
-      "agentRecipe": "Run `rr add admin`. Wire <AdminPage labels={...} /> at /admin and call buildAdminStats({ sliceRegistry, queryTable }) inside convex/features/admin/query.ts — sliceRegistry.entries flat-maps each feature's admin.activity[] declarations. Set SUPER_ADMIN_EMAIL via `npx convex env set` to lock down /admin to one address."
+        "dashboard",
+        "composition",
+        "rbac",
+        "access-gate",
+        "registry"
+      ],
+      "agentRecipe": "Run `npx rr add admin` for both, or `npx rr add admin shell` / `console` for one — each variant pulls only its own convex backend. shell: mount <AdminPage labels={...} /> + call buildAdminStats({ sliceRegistry, queryTable }) in convex/features/admin/query.ts; lock down with SUPER_ADMIN_EMAIL. console: mount <AdminConsole access={useAdminAccess()} components={{ users: <UsersPanel/>, ... }} /> — owned sections (analytics/audit-log/nav-config/seo-health/leads) render as-is, map each reuse section id to the panel from the peer slice you installed; compose adminConsoleTables into convex/schema.ts and front ac_leads.create with rate-limit; gate via PLATFORM_ADMIN_EMAILS.",
+      "variants": {
+        "default": "console",
+        "items": [
+          {
+            "id": "shell",
+            "title": "Shell",
+            "description": "Minimal generic admin shell (titled card + buildAdminStats).",
+            "convex": [
+              "convex/features/admin"
+            ]
+          },
+          {
+            "id": "console",
+            "title": "Console",
+            "description": "Composed access-gated 26-section console mounting other rr slices.",
+            "convex": [
+              "convex/features/admin_console"
+            ]
+          }
+        ]
+      }
     },
     {
       "slug": "platform-admin",
@@ -3320,6 +3577,61 @@
       ],
       "agentRecipe": "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."
     },
+    {
+      "slug": "publisher-clean-html",
+      "title": "Publisher — clean HTML",
+      "category": "content",
+      "kind": "ui",
+      "version": "0.1.0",
+      "description": "A pure render-to-clean-HTML engine harvested from the Instatic CMS publisher, decoupled from its host caching / loops / visual-components / Layer-C islands. publishPage(tree, registry, options) walks a generic node tree bottom-up: render children, escape every prop by its schema-declared control type (url -> safe-URL, richtext -> DOMPurify, svg -> SVG profile, else HTML-escape), dedup CSS by moduleId (~60-80% shrink), splice author classes + inline styles onto each rendered root, then assemble <!DOCTYPE> + reset + framework + module CSS + a deterministic (sorted) CSP plan. Bring your own ModuleRegistry (each module is a pure render(props, children) -> { html, css? }). Security spine: HTML escape + safe-URL, CSS-value guard (expression()/{}/</), </style RAWTEXT neutraliser, and an injectable DOMPurify seam (configureRichtextSanitizer) that fails closed — without a runtime, richtext strips all tags and SVG returns empty. Stateless, env-free, ZERO npm deps, no Convex. Ships a PublishPreview iframe-srcdoc pane. A Wave-1 leaf of the feature-harvest ULTRAPLAN; a dependency of the planned visual-page-canvas.",
+      "source": "rahman-resources",
+      "slicePath": "frontend/slices/publisher-clean-html",
+      "convexPaths": [],
+      "npm": [],
+      "shadcn": [],
+      "env": [],
+      "peers": [],
+      "providers": [],
+      "tags": [
+        "content",
+        "publisher",
+        "html",
+        "static-export",
+        "sanitization",
+        "csp",
+        "css-dedup",
+        "render"
+      ],
+      "agentRecipe": "Run `npx rr add publisher-clean-html`. Build a registry: createModuleRegistry([{ id: 'base.body', render: (_p, kids) => ({ html: kids.join('') }) }, { id: 'demo.h', schema: { text: { type: 'text' } }, render: (p) => ({ html: `<h1>${p.text}</h1>`, css: 'h1{font-size:1.5rem}' }) }]). Tree = { rootNodeId, nodes: { [id]: { id, moduleId, props?, children?, classIds?, inlineStyles?, hidden? } } }. const { html } = publishPage(tree, registry, { title, cssEmission: 'inline' }). Preview: <PublishPreview html={html} />. Enable rich HTML/SVG by calling configureRichtextSanitizer(DOMPurify) once — without it, richtext/svg props fail closed (strip/empty). Props escape by schema control type, not key name."
+    },
+    {
+      "slug": "content-loops",
+      "title": "Content Loops",
+      "category": "content",
+      "kind": "ui",
+      "version": "0.1.0",
+      "description": "A data-source-driven repeater harvested from the Instatic CMS base.loop engine, decoupled from its publisher / page-tree / entryStack machinery into a plain React slice. Register pluggable LoopEntitySource backends (each declares display fields + an async fetch returning { items, totalItems }); drop <ContentLoop source|sourceId filters orderBy variants={[A, B]} /> to render one component per item, round-robining items across variants so alternating / featured layouts need no per-item branching. Ships a namespaced source registry (ids must be 'ns.name', so consumer sources can't shadow each other), createMockLoopSource for env-free previews + tests, and none/infinite pagination via useLoopPagination (a shadcn Load more button accumulates pageSize chunks). LoopItem.fields is a generic resolved-value bag — variants read item.fields.title directly, no second lookup. UI-only: no Convex tables shipped; point a source's fetch at Convex/REST when you have a backend. First slice of the feature-harvest ULTRAPLAN (docs/feature-harvest) and a dependency of the planned site-templates-engine + visual-page-canvas.",
+      "source": "rahman-resources",
+      "slicePath": "frontend/slices/content-loops",
+      "convexPaths": [],
+      "npm": [],
+      "shadcn": [
+        "button"
+      ],
+      "env": [],
+      "peers": [],
+      "providers": [],
+      "tags": [
+        "content",
+        "loop",
+        "repeater",
+        "list",
+        "data-source",
+        "pagination",
+        "variants"
+      ],
+      "agentRecipe": "Run `npx rr add content-loops`. Env-free demo: createMockLoopSource() then <ContentLoop source={s} pagination='infinite' pageSize={6} variants={[CardA, CardB]} /> — 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 <ContentLoop sourceId='blog.posts' variants={[...]} />. item.fields holds RESOLVED values — resolve media/author inside fetch."
+    },
     {
       "slug": "markdown",
       "title": "Markdown — page container with CRUD tabs + diagrams",
@@ -3360,14 +3672,14 @@
       "agentRecipe": "Run `npx rr add markdown`. Read-only: `<MarkdownReader content={md}/>`. Full surface: `<MarkdownPage content={md} tabs={['read','write','review']} onContentChange={save} comments={list} onAddComment={add} onResolveComment={resolve}/>` (omit callbacks for internal-state demo mode). Diagrams: fence ```mermaid; charts: fence ```chart with { type: bar|line|area|pie, data: [...] }. To bridge from the notion editor call `blocksToMarkdown(page.blocks)` from `@notion/shared/lib/markdown`; reverse with `markdownToBlocks(md)`."
     },
     {
-      "slug": "notion",
-      "title": "Notion — Block Editor",
+      "slug": "notion-app",
+      "title": "Notion App — Block Editor",
       "category": "content",
       "kind": "full",
       "version": "1.1.1",
       "description": "Nested vertical slice (slice-of-slices) housing the full notion-page-clone block editor. Mount <PageEditor pageId/> inside <EditorAdapterProvider adapter/> — with `{}` it is a working plain-text/markdown block editor (slash menu, markdown triggers `# - > [] etc.`, dnd-kit drag with column layouts, per-block toolbar with turn-into/color/duplicate, per-block undo, paste-markdown import); host capabilities light up per optional adapter: data (block+page CRUD), selection (multi-select), comments (per-block popover), ai (Ask-AI panel), database (render + picker), mention (@-typeahead), page (nav/uploads/covers). Cluster-private shared layer under @notion/* — vendored block/page/database model, uid, inline markdown, page→md/html export. Pure convex block helpers (_blocks/_blockOps, unit-tested) ship in convex/features/notion. Same markdown grammar as the standalone `markdown` slice (blocksToMarkdown/markdownToBlocks bridge).",
       "source": "notion-page-clone",
-      "slicePath": "frontend/slices/notion",
+      "slicePath": "frontend/slices/notion-app",
       "convexPaths": [
         "convex/features/notion"
       ],
@@ -3401,17 +3713,17 @@
         "drag-drop",
         "adapter-seam"
       ],
-      "agentRecipe": "Run `npx rr add notion`. Wire the `@notion/*` path alias to `./slices/notion/*` in tsconfig. Minimal mount: `<EditorAdapterProvider adapter={{ data }}><PageEditor pageId={id}/></EditorAdapterProvider>` where `data` implements EditorDataAdapter (block+page CRUD over your store — see lib/dataAdapter.ts; a localStorage reference impl lives in the rr preview). Add capabilities incrementally: `selection` for multi-select, `comments` for per-block threads, `database.renderDatabase` to mount your database renderer inside database blocks, `mention.search` for @-typeahead, `page.navigateToPage`/`uploadFile` for nav + media. Convex hosts: copy convex/features/notion (_blocks/_blockOps are pure, unit-tested array ops) and keep handlers thin."
+      "agentRecipe": "Run `npx rr add notion-app`. Wire the `@notion/*` path alias to `./slices/notion-app/*` in tsconfig. Minimal mount: `<EditorAdapterProvider adapter={{ data }}><PageEditor pageId={id}/></EditorAdapterProvider>` where `data` implements EditorDataAdapter (block+page CRUD over your store — see lib/dataAdapter.ts; a localStorage reference impl lives in the rr preview). Add capabilities incrementally: `selection` for multi-select, `comments` for per-block threads, `database.renderDatabase` to mount your database renderer inside database blocks, `mention.search` for @-typeahead, `page.navigateToPage`/`uploadFile` for nav + media. Convex hosts: copy convex/features/notion (_blocks/_blockOps are pure, unit-tested array ops) and keep handlers thin."
     },
     {
-      "slug": "landing-sections",
-      "title": "Landing Sections",
+      "slug": "sections",
+      "title": "Sections — composable marketing/landing sections",
       "category": "content",
       "kind": "ui",
       "version": "0.4.0",
       "description": "Canonical landing-page composition slice — replaces the former standalone hero / cta / pricing-page / faq-section / feature-grid / testimonials-grid / blog-section / portfolio-section / changelog-feed slices (all merged here as `kind` variants in v0.2.0). Ships a pure reducer (v0.4.0: LANDING_UPSERT auto-shifts sibling `order` to keep positions unique; LANDING_DELETE closes the gap) + LandingProvider store adapter + admin LandingView/LandingEditorView built on the shared CRUD primitives, plus a per-section LandingSectionShell (background image + custom Tailwind className overlay + scroll-reveal). NEW in v0.4.0: a `sections/` library of config-driven public renderers (StatsSection, TestimonialsSection, FaqSection, PricingSection, NewsletterSection, CustomSection) that read `LandingSection.config` JSON merged over template defaults — content stays dashboard-controlled without per-template renderer code; plus `parse-config` helpers (parseConfigBadge/parseConfigField) and `sections/config` guards (parseConfigObject, cfg*). Sections carry { kind, order, title, subtitle, enabled, imageUrl, imageRatio, bgImageUrl, className, config (JSON) } with up/down reorder arrows. Lifted from the _templates fleet `_shared/landing` (2026-06-11) — the 8 standalone templates ship a byte-similar copy; this rr slice is the SSOT. Used by all 7 rr website templates.",
       "source": "rahman-resources (lifted from _templates fleet)",
-      "slicePath": "frontend/slices/landing-sections",
+      "slicePath": "frontend/slices/sections",
       "convexPaths": [],
       "npm": [
         "lucide-react@^0.400.0",
@@ -3443,7 +3755,7 @@
         "crud",
         "renderer"
       ],
-      "agentRecipe": "Run `npx rr add landing-sections`. Fold `landingReducer` into your root reducer (cases LANDING_UPSERT + LANDING_DELETE), seed State.landingSections with `defaultLandingSections()`, wrap your StoreProvider with `<LandingProvider value={adapter}/>` where adapter maps {items, publicBase, adminBase, create, update, remove} from your dispatch. Mount `<LandingView/>` at `/admin/landing` and `<LandingEditorView id={params.id}/>` at `/admin/landing/[id]`. In HomePage iterate `state.landingSections.filter(s => s.enabled).sort((a,b) => a.order - b.order)` and render each inside `<LandingSectionShell section={s}>`; for stats/testimonials/pricing/faq/newsletter/custom kinds drop in the shipped `<StatsSection/>` etc. (they read `section.config` JSON over your template defaults), or map the remaining kinds (hero/features/blog/etc.) to your own renderer. Use `parseConfigBadge(section.config)` for a section badge. Requires the template-base shared surface that ships in every rr website template: `@/components/templates/_shared/motion` (Reveal/Stagger/CountUp/Marquee/useInView — the motion-kit primitives), `@/components/templates/_shared/ui/section-head`, and `@/components/templates/_shared/crud/*`. Sections also use shadcn accordion/card/carousel + embla-carousel-autoplay."
+      "agentRecipe": "Run `npx rr add sections`. Fold `landingReducer` into your root reducer (cases LANDING_UPSERT + LANDING_DELETE), seed State.landingSections with `defaultLandingSections()`, wrap your StoreProvider with `<LandingProvider value={adapter}/>` where adapter maps {items, publicBase, adminBase, create, update, remove} from your dispatch. Mount `<LandingView/>` at `/admin/landing` and `<LandingEditorView id={params.id}/>` at `/admin/landing/[id]`. In HomePage iterate `state.landingSections.filter(s => s.enabled).sort((a,b) => a.order - b.order)` and render each inside `<LandingSectionShell section={s}>`; for stats/testimonials/pricing/faq/newsletter/custom kinds drop in the shipped `<StatsSection/>` etc. (they read `section.config` JSON over your template defaults), or map the remaining kinds (hero/features/blog/etc.) to your own renderer. Use `parseConfigBadge(section.config)` for a section badge. Requires the template-base shared surface that ships in every rr website template: `@/components/templates/_shared/motion` (Reveal/Stagger/CountUp/Marquee/useInView — the motion-kit primitives), `@/components/templates/_shared/ui/section-head`, and `@/components/templates/_shared/crud/*`. Sections also use shadcn accordion/card/carousel + embla-carousel-autoplay."
     },
     {
       "slug": "motion-kit",
@@ -3502,8 +3814,8 @@
       "env": [],
       "peers": [
         {
-          "slug": "doku-payment",
-          "range": "^0.2",
+          "slug": "payment",
+          "range": "^0.4",
           "reason": "Optional payment step — checkout page composes DokuDirectForm + DokuPaymentInstructions (or swap midtrans-payment)."
         }
       ],
@@ -3554,14 +3866,14 @@
       "agentRecipe": "Run `npx rr add theme-presets` (registry-data.json ships inside the slice — no separate public/ copy step). Wrap your tree once with `<ThemePresetProvider>` (inside next-themes' ThemeProvider). Mount `<ThemePresetSwitcher />` anywhere in your header / sidebar / settings — one component handles light/dark/system + preset palette. Wrap dashboard with `<ThemeColorSync>` if you need live tweakcn variable preview on inner routes. Deeply-nested consumers read state via `useThemePreset()` (returns `{ presetName, registry, setPreset, preview, restore, isReady }`). For lower-level access: `applyTweakcnPreset(name)`, `previewTweakcnPreset(name)`, `restoreTweakcnPreset()`, `groupTweakcnPresets(items)`, `tweakcnSwatches(preset)` all exported from `@/features/theme-presets`. To rename localStorage key, fork `STORAGE_KEY` in `lib/tweakcn/types.ts`."
     },
     {
-      "slug": "onboarding-wizard",
-      "title": "Onboarding Wizard — first-run site setup",
+      "slug": "site-setup-wizard",
+      "title": "Site Setup Wizard — first-run site setup",
       "category": "ui",
       "kind": "ui",
       "version": "0.2.0",
       "description": "Post-claim onboarding wizard for clone-to-own templates, graduated from the headless template surface (2026-06-06). Multi-step card flow (Identitas / Branding / Konten / Selesai) that stores ALL site config in the host backend via a props-driven save callback — a non-coder configures their site with zero code. Branding step ships a readable shadcn Select theme-preset picker (color swatches per preset + grouped headers + live preview callback — replaces the white-on-white native select), brand color quick-chips, light/dark/system default mode, logo/favicon upload via injected ImageField, and optional Analytics ID. Identity step hints invalid email format. 'Lewati setup' marks onboarded without fields and reverts any browsed-but-unsaved preset. Props-driven (R3): no convex/react import — host wires settings.upsert / seed.seedSample / setup.status into props; pairs naturally with the theme-presets slice (registry + tweakcnSwatches + previewTweakcnPreset) but works with any theme system or none.",
       "source": "personal-brand-os",
-      "slicePath": "frontend/slices/onboarding-wizard",
+      "slicePath": "frontend/slices/site-setup-wizard",
       "convexPaths": [],
       "npm": [],
       "shadcn": [
@@ -3586,17 +3898,17 @@
         "clone-to-own",
         "templates"
       ],
-      "agentRecipe": "Run `npx rr add onboarding-wizard`. Show from your admin gate when `setup.status().onboarded === false`: `<OnboardingWizard onDone={...} save={(f) => settingsUpsert(f)} seedSample={() => seedSample({})} seeded={status?.seeded} ImageField={ImageField} presetOptions={presets} onPresetPreview={(n) => preview(n)} />`. `save` receives Partial<OnboardingFields> + `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."
+      "agentRecipe": "Run `npx rr add site-setup-wizard`. Show from your admin gate when `setup.status().onboarded === false`: `<OnboardingWizard onDone={...} save={(f) => settingsUpsert(f)} seedSample={() => seedSample({})} seeded={status?.seeded} ImageField={ImageField} presetOptions={presets} onPresetPreview={(n) => preview(n)} />`. `save` receives Partial<OnboardingFields> + `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."
     },
     {
-      "slug": "files",
-      "title": "Files — pluggable upload + URL resolver with storage-adapter contract",
+      "slug": "file-upload",
+      "title": "File Upload — pluggable upload + URL resolver with storage-adapter contract",
       "category": "data",
       "kind": "ui",
       "version": "0.3.0",
       "description": "Host-pluggable file upload + URL resolution. Ships <FileUploadButton>, <FileChip>, useFileUpload(), useFileUrl() — all reading from a FilesAdapter the host wires via <FilesAdapterProvider>. Bundled localStorage demo adapter stores blobs as data URLs (small files only). Drop in your own adapter for Convex / S3 / GCS / R2. The slice itself has zero backend coupling, proving the storage-adapter pattern for the rest of the open-silong blocked-pending-adapter wave (cover, workspace-io, templates, …).",
       "source": "notion-page-clone",
-      "slicePath": "frontend/slices/files",
+      "slicePath": "frontend/slices/file-upload",
       "convexPaths": [],
       "npm": [],
       "shadcn": [
@@ -3614,7 +3926,7 @@
         "portable",
         "notion-like"
       ],
-      "agentRecipe": "Run `npx rr add files`. Wrap your tree with `<FilesAdapterProvider adapter={...}>` — pass `useLocalStorageFilesAdapter()` for a quick demo or implement `FilesAdapter` (upload + remove + useUrl) against your backend. Then drop `<FileUploadButton onUploaded={...}>` anywhere; pair with `<FileChip fileRef={...}>` for rendered chips. Hooks: `useFileUpload()` returns `{upload, uploading, progress, removeFromStorage}`; `useFileUrl(storageId)` resolves to a fetchable URL (Convex adapter uses useQuery for live invalidation; demo reads localStorage synchronously). To wire S3: implement the FilesAdapter interface with presigned URLs + DELETE; the slice doesn't care which backend you pick."
+      "agentRecipe": "Run `npx rr add file-upload`. Wrap your tree with `<FilesAdapterProvider adapter={...}>` — pass `useLocalStorageFilesAdapter()` for a quick demo or implement `FilesAdapter` (upload + remove + useUrl) against your backend. Then drop `<FileUploadButton onUploaded={...}>` anywhere; pair with `<FileChip fileRef={...}>` for rendered chips. Hooks: `useFileUpload()` returns `{upload, uploading, progress, removeFromStorage}`; `useFileUrl(storageId)` resolves to a fetchable URL (Convex adapter uses useQuery for live invalidation; demo reads localStorage synchronously). To wire S3: implement the FilesAdapter interface with presigned URLs + DELETE; the slice doesn't care which backend you pick."
     },
     {
       "slug": "selection",
@@ -3645,43 +3957,40 @@
       "agentRecipe": "Run `npx rr add selection`. Zero deps (react-dom only). Wrap your list area in `<SelectionProvider onBulkDelete={(ids) => removeMany(ids)}>`, give the surface a `position: relative` div with a ref, drop `<SelectionMarquee containerRef={ref} />` inside it, and wrap each item in `<SelectableBlock id={item.id} orderedIds={allIds}>…</SelectableBlock>`. 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."
     },
     {
-      "slug": "notion-database",
-      "title": "Notion Database",
+      "slug": "notion-ui",
+      "title": "Notion UI — page editor · database · sidebar primitives",
       "category": "ui",
       "kind": "ui",
-      "version": "0.18.0",
-      "description": "Drop-in Notion-style database surface. 11 views (table, board, list, gallery, calendar, feed, chart, dashboard, form, map, timeline), 18 property/cell types, and a per-type column-header config menu (number format, date ranges, select, relation, rollup, formula) plus filter / sort / group / calculate, row peek, row multi-select, table cell selection + drag-to-fill (click a cell, drag the handle to copy down — merged from the former database-cell-selection slice in v0.16), and CSV + JSON import-export. Pure and props-driven — the host owns the data and dispatches change callbacks. Domain types live in notion-shell (install it as the peer). Full release history in CHANGELOG.md.",
-      "source": "open-silong",
-      "slicePath": "frontend/slices/notion-database",
-      "convexPaths": [
-        "template-base/database-silong/convex/handlers/databases.ts",
-        "template-base/database-silong/convex/handlers/pages.ts",
-        "template-base/database-silong/convex/schema.database-silong.ts"
-      ],
+      "version": "0.24.0",
+      "description": "The pure, props-driven Notion-clone primitives suite behind one slug, over one shared domain-type model (Block / Page / Property / Database / DbView …). page: the page + block editor (NotionPage / NotionHeader / NotionBlock, SlashMenu, block renderers, inline-markdown decorator, built-in code (highlight.js) + equation (KaTeX)). database: a drop-in 11-view database (table/board/list/gallery/calendar/feed/chart/dashboard/form/map/timeline, 18 property/cell types, per-type column config, filter/sort/group/calculate, row peek + multi-select, cell drag-fill, formula engine, CSV/JSON import-export). sidebar: a standalone tree-nav sidebar (dnd reorder + reparent with depth projection, inline rename, per-row icon picker). All stateless + callback-CRUD — the host owns the data. Install one surface with `npx rr add notion-ui page|database|sidebar`, or all with `npx rr add notion-ui`; the shared/ domain type model is copied for every variant. NOT the full Notion app — that's the separate `notion` slice (adapter + Convex backed).",
+      "source": "notion-page-clone",
+      "slicePath": "frontend/slices/notion-ui",
+      "convexPaths": [],
       "npm": [
-        "recharts@^2.13.0"
+        "@dnd-kit/core@^6",
+        "@dnd-kit/sortable",
+        "@dnd-kit/utilities",
+        "katex@^0.16.45",
+        "highlight.js@^11.11.1",
+        "recharts@^3",
+        "lucide-react"
       ],
       "shadcn": [
         "button",
-        "input",
         "checkbox",
+        "dialog",
         "dropdown-menu",
+        "input",
         "popover",
         "select",
-        "dialog",
+        "separator",
         "sheet",
+        "switch",
         "toggle-group",
-        "tooltip",
-        "separator"
+        "tooltip"
       ],
       "env": [],
-      "peers": [
-        {
-          "slug": "notion-shell",
-          "range": "^0.7",
-          "reason": "Domain types live in notion-shell. v0.7 extends Database with `locked` flag for the DatabaseMenu lock-toggle action."
-        }
-      ],
+      "peers": [],
       "providers": [],
       "tags": [
         "ui",
@@ -3721,7 +4030,28 @@
         "optional",
         "embeddable"
       ],
-      "agentRecipe": "**Controlled component.** `<NotionDatabase />` renders the whole surface — 11 views (table, board, list, gallery, calendar, feed, chart, dashboard, form, map, timeline), 18 cell types, filter / sort / group / calculate, row peek + multi-select, table cell drag-fill, CSV / JSON import-export. It is 100% props-driven: it owns NO data state — you hold `db` + `rows` and persist every change callback. The view tab strip scrolls horizontally and the card clips to its border, so it stays inside any container width.\n\n**1. Install** — `npx rr add notion-database`. Cascades the `notion-shell` peer (the domain types live there). Components import from `@/features/notion-database`; types from `@/features/notion-shell`.\n\n**2. Minimal wire-up** — keep `db: Database` + `rows: Page[]` in your store (a Convex query result or `useState`) and pass change handlers:\n```tsx\nimport { NotionDatabase } from '@/features/notion-database';\n\n<NotionDatabase\n  db={db}\n  rows={rows}\n  onRowAdd={addRow}\n  onRowUpdate={(rowId, propId, value) => setValue(rowId, propId, value)}\n  onRowRemove={removeRow}\n  onPropertyAdd={addProperty}\n  onViewActivate={setActiveView}\n  onViewAdd={addView}\n  onViewConfigChange={(viewId, patch) => patchView(viewId, patch)}\n/>\n```\nOmit any callback and that affordance goes read-only; pass `readOnly` to freeze everything at once.\n\n**3. Data shape** — `Database = { id, name, properties: Property[], views: DatabaseViewConfig[], activeViewId }`; each row `Page = { id, title, rowProps: Record<propId, PropertyValue> }`. For `relation` / `rollup` cells also pass `pages` + `databases`; for `person` / `created_by` cells pass `userLookup(id)`.\n\n**4. Import / export** — mount `<DatabaseIOActions db={db} rows={rows} onImport={handleImport} />` in your toolbar: CSV/JSON in (with schema-diff), CSV/JSON + live-schema templates out. New columns arrive with a `tempId` — map it to your real backend id before writing their `rowProps`.\n\n**5. Backend (optional)** — the UI is store-agnostic. For Convex persistence copy `template-base/database-silong/convex/` (handlers → `convex/`, schema fragment merges into `convex/schema.ts`). Pick `_shared/minimal/` (single-user, noop authz) or `_shared/full/` (`@convex-dev/auth` + workspaces). See CONVEX-BACKEND.md.\n\n**Just one view?** Import it directly — `import { TableView } from '@/features/notion-database'` — and feed it `rows` + `renderCell` + `renderColumnHeader`."
+      "agentRecipe": "**Controlled component.** `<NotionDatabase />` renders the whole surface — 11 views (table, board, list, gallery, calendar, feed, chart, dashboard, form, map, timeline), 18 cell types, filter / sort / group / calculate, row peek + multi-select, table cell drag-fill, CSV / JSON import-export. It is 100% props-driven: it owns NO data state — you hold `db` + `rows` and persist every change callback. The view tab strip scrolls horizontally and the card clips to its border, so it stays inside any container width.\n\n**1. Install** — `npx rr add notion-ui database`. Cascades the `notion-shell` peer (the domain types live there). Components import from `@/features/notion-ui`; types from `@/features/notion-ui`.\n\n**2. Minimal wire-up** — keep `db: Database` + `rows: Page[]` in your store (a Convex query result or `useState`) and pass change handlers:\n```tsx\nimport { NotionDatabase } from '@/features/notion-ui';\n\n<NotionDatabase\n  db={db}\n  rows={rows}\n  onRowAdd={addRow}\n  onRowUpdate={(rowId, propId, value) => setValue(rowId, propId, value)}\n  onRowRemove={removeRow}\n  onPropertyAdd={addProperty}\n  onViewActivate={setActiveView}\n  onViewAdd={addView}\n  onViewConfigChange={(viewId, patch) => patchView(viewId, patch)}\n/>\n```\nOmit any callback and that affordance goes read-only; pass `readOnly` to freeze everything at once.\n\n**3. Data shape** — `Database = { id, name, properties: Property[], views: DatabaseViewConfig[], activeViewId }`; each row `Page = { id, title, rowProps: Record<propId, PropertyValue> }`. For `relation` / `rollup` cells also pass `pages` + `databases`; for `person` / `created_by` cells pass `userLookup(id)`.\n\n**4. Import / export** — mount `<DatabaseIOActions db={db} rows={rows} onImport={handleImport} />` in your toolbar: CSV/JSON in (with schema-diff), CSV/JSON + live-schema templates out. New columns arrive with a `tempId` — map it to your real backend id before writing their `rowProps`.\n\n**5. Backend (optional)** — the UI is store-agnostic. For Convex persistence copy `template-base/database-silong/convex/` (handlers → `convex/`, schema fragment merges into `convex/schema.ts`). Pick `_shared/minimal/` (single-user, noop authz) or `_shared/full/` (`@convex-dev/auth` + workspaces). See CONVEX-BACKEND.md.\n\n**Just one view?** Import it directly — `import { TableView } from '@/features/notion-ui'` — and feed it `rows` + `renderCell` + `renderColumnHeader`.",
+      "variants": {
+        "default": "page",
+        "shared": "shared",
+        "items": [
+          {
+            "id": "page",
+            "title": "Page",
+            "description": "Page + block editor primitives (NotionPage / NotionBlock, SlashMenu, renderers)."
+          },
+          {
+            "id": "database",
+            "title": "Database",
+            "description": "11-view database (NotionDatabase, filter/sort/group, formula, CSV/JSON I/O)."
+          },
+          {
+            "id": "sidebar",
+            "title": "Sidebar",
+            "description": "Tree-nav sidebar (NotionSidebar, dnd reorder + reparent, inline rename)."
+          }
+        ]
+      }
     },
     {
       "slug": "image-picker",
@@ -3766,98 +4096,6 @@
       ],
       "agentRecipe": "Run `npx rr add image-picker`. The headline component is `<ImagePickerButton label=\"Change image\" onChange={(img)=>save(img)} onUpload={…} searchUnsplash={…} />` — ONE button that opens the 4-tab dialog (gallery / upload / link / Unsplash). For a reposition-able cover/hero band use `<ImageBanner image={value} onChange={save} resolvedUrl={…} onUpload={…} searchUnsplash={…} />` (also passable to notion-shell's `<NotionPage coverSlot={…} />`). 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."
     },
-    {
-      "slug": "notion-sidebar",
-      "title": "Notion Sidebar — tree nav + page CRUD (rename · drag · icon picker)",
-      "category": "ui",
-      "kind": "ui",
-      "version": "0.1.0",
-      "description": "Standalone Notion-style tree-nav sidebar with full page CRUD, lifted out of notion-shell so it is reusable on its own. Props-driven + fully decoupled — owns its own lightweight NotionSidebarPage type (id / title / icon / parentId), imports no other slice. Capabilities: click a row to open; DOUBLE-CLICK a title to rename inline; drag the grip to reorder AND reparent (a @dnd-kit sortable tree with horizontal-offset depth projection); collapse/expand subtrees; hover a row for +subpage / delete. Optional per-row icon PICKER — wire `renderIconPicker` + `onIconChange` (e.g. @/features/icon-picker's IconPickerPopover) so clicking a row icon opens the picker. The host owns the data and dispatches onSelect / onCreate / onRename / onDelete / onMove / onIconChange. Compose with notion-shell (page editor) + notion-database (embedded DBs) for the full Notion-clone OS — see the notion-page-clone-os template.",
-      "source": "notion-page-clone",
-      "slicePath": "frontend/slices/notion-sidebar",
-      "convexPaths": [],
-      "npm": [
-        "@dnd-kit/core",
-        "@dnd-kit/sortable",
-        "@dnd-kit/utilities"
-      ],
-      "shadcn": [
-        "button",
-        "input"
-      ],
-      "env": [],
-      "peers": [],
-      "providers": [],
-      "tags": [
-        "ui",
-        "notion",
-        "sidebar",
-        "tree",
-        "nav",
-        "page",
-        "crud",
-        "rename",
-        "drag",
-        "dnd",
-        "reorder",
-        "reparent",
-        "icon-picker",
-        "primitive",
-        "portable",
-        "notion-like"
-      ],
-      "agentRecipe": "Run `npx rr add notion-sidebar`. Import `import { NotionSidebar, type NotionSidebarPage } from \"@/features/notion-sidebar\"`. Feed it a flat `pages: NotionSidebarPage[]` ({ id, title, icon, parentId }) — the sidebar builds the tree. Wire callbacks: onSelect(id), onCreate(parentId|null), onRename(id, title) [double-click a title to trigger], onDelete(id), onMove(id, parentId, beforeId) [drag the grip — reorders + reparents], onIconChange(id, icon). For rich icons pass `renderIcon` (display) + `renderIconPicker` (click-to-pick) wired to `@/features/icon-picker` (DynamicIcon + IconPickerPopover). npm: @dnd-kit/core + sortable + utilities. Pair with notion-shell (page editor) + notion-database (embedded DBs) — the notion-page-clone-os template shows the full reducer wiring."
-    },
-    {
-      "slug": "notion-shell",
-      "title": "Notion Shell — page + block editor primitives (pure, no sidebar/database)",
-      "category": "ui",
-      "kind": "ui",
-      "version": "0.24.0",
-      "description": "Portable Notion-style PAGE EDITOR primitives. v0.22 split the tree-nav SIDEBAR out into the standalone `notion-sidebar` slice (so the page editor and the sidebar are independently reusable); embedded DATABASES already live in the `notion-database` peer. notion-shell ships: NotionPage (optional cover image band + header + body), NotionHeader, NotionBlock (live inline-markdown decorator, hover actions menu, optional dragHandle slot, BUILT-IN code (highlight.js) + equation (KaTeX) blocks), SlashMenu (searchable block-type picker w/ keyboard nav), BlockActionsMenu (turn-into / duplicate / delete), InsertBlockButton (`+` trigger w/ SlashMenu), SortableBlockList (@dnd-kit render-prop wrapper for block reorder), PageActionsMenu (header dropdown: cover/favorite/duplicate/export/trash), InlineFormatToolbar + BlockColorPicker (colour) + MentionTypeahead + PageLayoutSection (layout). SPECIALISED BLOCK RENDERERS: ImageRenderer, EmbedRenderer (YouTube/Vimeo/Loom/Figma/CodePen/Spotify auto-detect). Domain types (Database, Property, PropertyValue, DbView, DatabaseViewConfig, DatabaseFilter, DatabaseSort) remain in notion-shell as the single source of truth (Page.rowOfDatabaseId + rowProps reference them). Pure / props-driven — host owns data + change handlers. Compose notion-sidebar + notion-shell + notion-database for the full Notion-clone OS.",
-      "source": "notion-page-clone",
-      "slicePath": "frontend/slices/notion-shell",
-      "convexPaths": [],
-      "npm": [
-        "@dnd-kit/core",
-        "@dnd-kit/sortable",
-        "@dnd-kit/utilities",
-        "katex@^0.16.45",
-        "highlight.js@^11.11.1"
-      ],
-      "shadcn": [
-        "button",
-        "input",
-        "checkbox",
-        "dropdown-menu",
-        "popover"
-      ],
-      "env": [],
-      "peers": [],
-      "providers": [],
-      "tags": [
-        "ui",
-        "notion",
-        "shell",
-        "wrapper",
-        "page",
-        "block",
-        "editor",
-        "primitive",
-        "portable",
-        "slash-menu",
-        "decorator",
-        "wysiwyg",
-        "drag",
-        "cover",
-        "embed",
-        "image",
-        "code",
-        "equation",
-        "notion-like"
-      ],
-      "agentRecipe": "Run `npx rr add notion-shell` for the portable PAGE EDITOR wrappers ONLY (no backend; the tree-nav sidebar is the separate `notion-sidebar` slice). NPM deps: @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities. Import: `import { NotionPage, NotionBlock, SortableBlockList, PageActionsMenu, InsertBlockButton, InlineFormatToolbar, ImageRenderer, EmbedRenderer } from \"@/features/notion-shell\"`. NotionBlock ships slash menu + decorator + actions menu + dragHandle slot. **`createDefaultBlockRenderers()` returns the block-renderer registry — pass it to `<NotionBlock blockRenderers={…}>` so callout (icon+kind picker), table (editable grid), divider, image, embed, code (highlight.js) + equation (KaTeX) all render. code + equation are now BUILT-IN to notion-shell (npm: katex + highlight.js) — no adapter needed. Only `database` + `toc` are injected at the app level (they depend on host data + the sibling notion-database slice).** NotionPage ships optional cover prop. SortableBlockList wraps a render-prop callback `(id, dragProps) => <NotionBlock dragHandle={...} />`. NotionDatabase ships 6 views via VIEW_REGISTRY. Property cells: text/number/checkbox/select/multi-select/status/date/url/email/phone all built in. For rich icon UX wire `renderIcon` + `renderIconPicker` to `@/features/icon-picker`. **v0.17 — Notion-canonical editing keys (`blockKeyHandler.ts`): Enter splits at the caret into a new block (lists continue their type; an empty list item exits to paragraph); Backspace on an empty non-paragraph downgrades it to a plain paragraph (re-triggerable with `/`); a second Backspace on an empty paragraph merges into the previous block; Arrow up/down at a line edge hops blocks. Wire the host callbacks on `<NotionBlock>`: `onInsertAfter(type, init) => newId`, `onMergeBack()`, `onFocusSibling(dir)` — plus `focusBlock(id, offset?)` exported to move the caret after a host state change. The preview `page-demo.tsx` and the notion-clone template `DocView` show full array- and reducer-based wirings.** PRODUCT POINTER: the full Convex-backed Notion-clone OS (multi-workspace + auth + sharing + comments + snapshots + MCP) lives at https://github.com/rahmanef63/open-silong — clone that repo for the production stack; use this slice when you only need to embed the Notion-style UI in another project.**"
-    },
     {
       "slug": "workspace-shell",
       "title": "Workspace Shell — atomic (workspace × menuSet) NavContext",
@@ -4015,17 +4253,21 @@
       "agentRecipe": "Run `npx rr add pages-cms`. Wrap your admin surface in <LocalPagesProvider seed={defaultPages()}> (localStorage, zero backend) or supply your own PagesStore via <PagesProvider>. Render <PagesView publicBase adminBase> for the list and <PageEditorView id publicBase adminBase> for the editor route. Public catch-all looks up the page by slug and renders <BlocksRenderer blocks={page.blocks} />. Add block kinds by extending the PageBlock union + emptyBlock + the renderer/editor switches."
     },
     {
-      "slug": "empty-states",
-      "title": "Empty States — 404/500/403 + zero-data",
+      "slug": "feedback-states",
+      "title": "Feedback States — loading skeletons + empty/error states",
       "category": "ui",
       "kind": "ui",
       "version": "0.2.0",
-      "description": "Configurable EmptyState composing the shadcn Empty primitive: kind presets 404 / 500 / 403 / no-results / empty-list / first-use with default lucide icon + copy, all overridable. Primary/secondary actions. ErrorPage full-page wrapper is a drop-in for app/not-found.tsx and app/error.tsx (recipes in README).",
+      "description": "Two co-located placeholder surfaces behind one slug. loading: a configurable LoadingSkeleton over the shadcn Skeleton (kind presets text / card / list / table / form / page / block, overridable count + columns) plus a spinner LoadingState (inline / block / overlay) for in-flight work. empty: a configurable EmptyState over the shadcn Empty (404 / 500 / 403 / no-results / empty-list / first-use, overridable icon/title/copy/actions) plus an ErrorPage full-page wrapper for app/not-found.tsx and app/error.tsx. Install one surface with `npx rr add feedback-states loading|empty`, or both with `npx rr add feedback-states`. Replaces ad-hoc animate-pulse divs, hand-rolled Loader2 spans, and one-off error pages.",
       "source": "rr original",
-      "slicePath": "frontend/slices/empty-states",
+      "slicePath": "frontend/slices/feedback-states",
       "convexPaths": [],
-      "npm": [],
+      "npm": [
+        "lucide-react@^0.400.0"
+      ],
       "shadcn": [
+        "skeleton",
+        "spinner",
         "empty",
         "button"
       ],
@@ -4033,45 +4275,34 @@
       "peers": [],
       "providers": [],
       "tags": [
+        "loading",
+        "skeleton",
+        "spinner",
         "empty-state",
         "404",
         "500",
         "403",
         "error-page",
-        "no-results",
-        "onboarding",
-        "basics"
-      ],
-      "agentRecipe": "Run `npx rr add empty-states`. Drop <EmptyState kind=\"no-results\" /> into zero-data spots; wrap with <ErrorPage kind=\"404\" /> in app/not-found.tsx and kind=\"500\" in app/error.tsx. Every preset's icon/title/description/action overridable per use."
-    },
-    {
-      "slug": "loading-states",
-      "title": "Loading States — skeletons + spinners SSOT",
-      "category": "ui",
-      "kind": "ui",
-      "version": "0.2.0",
-      "description": "Configurable LoadingSkeleton composing the shadcn Skeleton primitive: kind presets text / card / list / table / form / page / block with overridable count + columns. Spinner-based LoadingState (inline / block / overlay) covers in-flight work where a skeleton would be wrong. The page kind drops straight into a route loading.tsx (recipe in README).",
-      "source": "rr original",
-      "slicePath": "frontend/slices/loading-states",
-      "convexPaths": [],
-      "npm": [],
-      "shadcn": [
-        "skeleton",
-        "spinner"
-      ],
-      "env": [],
-      "peers": [],
-      "providers": [],
-      "tags": [
-        "loading",
-        "skeleton",
-        "spinner",
-        "suspense",
         "fallback",
         "placeholder",
         "basics"
       ],
-      "agentRecipe": "Run `npx rr add loading-states`. Pick the LoadingSkeleton kind that mirrors the streamed content (<LoadingSkeleton kind=\"table\" count={8} />); use kind=\"page\" inside route loading.tsx. For in-flight work (submits, refetches) use <LoadingState variant=\"inline|block|overlay\" /> instead of a skeleton."
+      "agentRecipe": "Run `npx rr add feedback-states` for both, or `npx rr add feedback-states loading` / `empty` for one surface. loading: <LoadingSkeleton kind=\"table\" count={8} /> mirrors streamed content, kind=\"page\" drops into route loading.tsx, <LoadingState variant=\"inline|block|overlay\" /> for in-flight work. empty: <EmptyState kind=\"no-results\" /> in zero-data spots, <ErrorPage kind=\"404\" /> in app/not-found.tsx and kind=\"500\" in app/error.tsx. Every preset overridable per use.",
+      "variants": {
+        "default": "loading",
+        "items": [
+          {
+            "id": "loading",
+            "title": "Loading",
+            "description": "Skeletons + spinners for in-flight UI (LoadingSkeleton, LoadingState)."
+          },
+          {
+            "id": "empty",
+            "title": "Empty",
+            "description": "404/500/403 + zero-data placeholders (EmptyState, ErrorPage)."
+          }
+        ]
+      }
     },
     {
       "slug": "marketing-chrome",
@@ -4104,42 +4335,63 @@
       "agentRecipe": "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."
     },
     {
-      "slug": "settings-page",
-      "title": "Settings Page — adapter-driven shell",
+      "slug": "settings",
+      "title": "Settings — account + appearance shells",
       "category": "ui",
       "kind": "ui",
-      "version": "0.2.0",
-      "description": "SettingsShell two-column settings surface: section nav (mobile collapses to a Select) + Profile (avatar/name/email/bio), Preferences (theme/language/density), Notifications (switch rows), Danger zone (AlertDialog-confirmed delete). SettingsAdapter = load() + save(patch) — wire to Convex or anything; createMemoryAdapter ships for demos. Optimistic save with rollback.",
+      "version": "1.0.0",
+      "description": "Two settings surfaces behind one slug, each adapter-driven so the slice owns no data. account: SettingsShell two-column surface (nav collapses to a Select on mobile) — Profile (avatar/name/email/bio), Preferences (theme/language/density), Notifications (switch rows), Danger zone (AlertDialog-confirmed delete) over an ASYNC SettingsAdapter { load, save(patch) } with optimistic save + rollback; createMemoryAdapter ships for demos. appearance: AppearancePanel (style/mode/accent/wallpaper/reduce-transparency/display) over a SYNC per-setting AppearanceAdapter, plus the generic SettingsSection / SettingsRow / Segmented / AccentSwatches primitives you compose custom panels from. Install one surface with `npx rr add settings account|appearance`, or both with `npx rr add settings`.",
       "source": "rr original",
-      "slicePath": "frontend/slices/settings-page",
+      "slicePath": "frontend/slices/settings",
       "convexPaths": [],
-      "npm": [],
+      "npm": [
+        "lucide-react@^0.400.0"
+      ],
       "shadcn": [
-        "card",
+        "alert-dialog",
+        "avatar",
         "button",
+        "card",
         "input",
         "label",
-        "switch",
         "select",
         "separator",
-        "avatar",
-        "alert-dialog",
+        "skeleton",
+        "switch",
         "textarea",
-        "skeleton"
+        "toggle-group"
       ],
       "env": [],
       "peers": [],
       "providers": [],
       "tags": [
         "settings",
-        "account",
-        "profile",
         "preferences",
-        "notifications",
-        "danger-zone",
+        "account",
+        "appearance",
+        "theme",
+        "adapter",
+        "shell",
+        "primitives",
+        "ui",
         "basics"
       ],
-      "agentRecipe": "Run `npx rr add settings-page`. Implement SettingsAdapter { load, save } over your backend (Convex query + mutation), pass to <SettingsShell adapter>. save receives per-section partial patches — shallow-merge server-side. onDeleteAccount callback wires the danger zone."
+      "agentRecipe": "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 <SettingsShell adapter>; save gets per-section partial patches (shallow-merge server-side); onDeleteAccount wires the danger zone. appearance: build an AppearanceAdapter (per-setting SegSetting values) from your appearance store, pass to <AppearancePanel appearance>; or compose custom panels from <SettingsSection>/<SettingsRow>/<Segmented>/<AccentSwatches>.",
+      "variants": {
+        "default": "account",
+        "items": [
+          {
+            "id": "account",
+            "title": "Account",
+            "description": "Profile/preferences/notifications/danger-zone shell over an async load+save adapter."
+          },
+          {
+            "id": "appearance",
+            "title": "Appearance",
+            "description": "Style/mode/accent/wallpaper/display shell over a sync per-setting adapter + the shared Section/Row/Segmented primitives."
+          }
+        ]
+      }
     },
     {
       "slug": "notifications-center",
@@ -4176,14 +4428,14 @@
       "agentRecipe": "Run `npx rr add notifications-center`. Mount <NotificationBell adapter> in your topbar. Implement NotificationsAdapter over your feed (Convex query + mutations) or start with createMemoryNotificationsAdapter(seed). surface=\"sheet\" for mobile-heavy apps."
     },
     {
-      "slug": "media-studio",
-      "title": "Media Studio — photo / social design canvas",
+      "slug": "design-studio",
+      "title": "Design Studio — photo / social design canvas",
       "category": "os",
       "kind": "ui",
       "version": "1.0.0",
       "description": "A layered canvas studio: image/text/shape layers with filters, masks, transforms, safe-area guides and aspect presets (1:1/4:5/9:16/16:9), plus an export modal (download / copy / import JSON). Runs fully offline on bundled gradient-SVG samples. Host wiring is one call: configureMediaStudio({ saveDoc, imageSources }) lights up Save-to-host and feeds real image sources. Self-contained: inspector hooks are inert seams in lib/host.ts.",
       "source": "rahmanef63/os-vps",
-      "slicePath": "frontend/slices/media-studio",
+      "slicePath": "frontend/slices/design-studio",
       "convexPaths": [],
       "npm": [
         "lucide-react"
@@ -4207,7 +4459,7 @@
         "design",
         "ui"
       ],
-      "agentRecipe": "Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. Layered canvas editor. Fully client-side; no backend required.\n\nSTEP 1 — Install. `npx rr add media-studio`. Ensure `@/features/media-studio` resolves and Tailwind scans the slice folder.\n\nSTEP 2 — Deps. npm: `lucide-react`. shadcn: button, dialog, badge, tooltip, scroll-area.\n\nSTEP 3 — Mount. `<MediaStudio />` in a height-bearing box — unwired it edits bundled sample layers. Or register `mediaStudioApp` in an appshell manifest.\n\nSTEP 4 — Host wiring. `configureMediaStudio({ saveDoc, imageSources })` — saveDoc persists the serialized document (enables Save-to-host in the export modal); imageSources supplies image URLs for new layers."
+      "agentRecipe": "Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. Layered canvas editor. Fully client-side; no backend required.\n\nSTEP 1 — Install. `npx rr add design-studio`. Ensure `@/features/design-studio` resolves and Tailwind scans the slice folder.\n\nSTEP 2 — Deps. npm: `lucide-react`. shadcn: button, dialog, badge, tooltip, scroll-area.\n\nSTEP 3 — Mount. `<MediaStudio />` in a height-bearing box — unwired it edits bundled sample layers. Or register `mediaStudioApp` in an appshell manifest.\n\nSTEP 4 — Host wiring. `configureMediaStudio({ saveDoc, imageSources })` — saveDoc persists the serialized document (enables Save-to-host in the export modal); imageSources supplies image URLs for new layers."
     },
     {
       "slug": "quicklinks",
@@ -4236,37 +4488,6 @@
         "ui"
       ],
       "agentRecipe": "Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. Website shortcut grid. Fully client-side; no backend required.\n\nSTEP 1 — Install. `npx rr add quicklinks`. Ensure `@/features/quicklinks` resolves and Tailwind scans the slice folder.\n\nSTEP 2 — Deps. npm: `lucide-react`. shadcn: button.\n\nSTEP 3 — Mount. `<Quicklinks />` — unwired it persists to localStorage (\"rr:quicklinks\") with 4 demo seeds. Or register `quicklinksApp` in an appshell manifest.\n\nSTEP 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."
-    },
-    {
-      "slug": "shell-settings",
-      "title": "Shell Settings — settings-app UI primitives",
-      "category": "ui",
-      "kind": "ui",
-      "version": "1.0.0",
-      "description": "The settings-app building blocks: SettingsSection, Row, AccentSwatches, a slice-local Segmented control, and a ready AppearancePanel (style/mode/accent/wallpaper/device/transparency groups — every group optional). Pure presentation: the injected AppearanceAdapter IS the contract, so it binds to any appearance store (appshell capabilities, zustand, plain useState) with zero slice edits.",
-      "source": "rahmanef63/os-vps",
-      "slicePath": "frontend/slices/shell-settings",
-      "convexPaths": [],
-      "npm": [
-        "lucide-react"
-      ],
-      "shadcn": [
-        "button",
-        "switch",
-        "toggle-group",
-        "separator"
-      ],
-      "env": [],
-      "peers": [],
-      "providers": [],
-      "tags": [
-        "settings",
-        "preferences",
-        "appearance",
-        "primitives",
-        "ui"
-      ],
-      "agentRecipe": "Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. Settings UI primitives. Pure presentation; state injected.\n\nSTEP 1 — Install. `npx rr add shell-settings`. Ensure `@/features/shell-settings` resolves and Tailwind scans the slice folder.\n\nSTEP 2 — Deps. npm: `lucide-react`. shadcn: button, switch, toggle-group, separator.\n\nSTEP 3 — Mount. `<AppearancePanel adapter={adapter} />` with an AppearanceAdapter (all groups optional — omit a group to hide it), or compose SettingsSection/Row/AccentSwatches/Segmented directly for custom panels.\n\nSTEP 4 — Bind. Wire the adapter to your appearance store (theme mode, accent, wallpaper, device, transparency) — the panel re-renders from the values you pass; no internal state."
     }
   ]
 }