@panaversity/ksor 0.0.19 → 0.0.21

package/templates/scaffold/system/site/components/record-shell.tsx

@@ -0,0 +1,68 @@
+import type { ReactElement, ReactNode } from "react";
+import { DocsLayout } from "fumadocs-ui/layouts/docs";
+import { ThemeSwitch } from "fumadocs-ui/layouts/shared/slots/theme-switch";
+
+import { FooterMark } from "@/components/footer-mark";
+import { baseOptions } from "@/lib/layout.shared";
+import { appName } from "@/lib/shared";
+import { basePath, getSortedPageTree, getSortedPages } from "@/lib/source";
+
+/**
+ * The chrome every page of the record wears: the governed tree as a sidebar,
+ * search, and the record's own identity at its foot.
+ *
+ * The FRONT DOOR wears it too. A system of record whose first page hides the
+ * record behind a marketing layout makes a reader click before they can see
+ * what is in it; the docs homes of AI-first projects put their first page
+ * inside this same shell (modelcontextprotocol.io redirects to a document,
+ * Cursor's `/docs` renders one — both checked 2026-08-22). One shell, defined
+ * once: two copies of it drift, and the drift shows up as a sidebar that
+ * disagrees with itself between two routes.
+ */
+export function RecordShell({ children }: { children: ReactNode }): ReactElement {
+  const documents = getSortedPages().length;
+
+  return (
+    <DocsLayout
+      tree={getSortedPageTree()}
+      {...baseOptions()}
+      // The switch ships inside a bordered bar of its own in the sidebar
+      // footer — a flex column whose children stretch, so one 61px control sat
+      // in a 236px box that was 74% empty and read as a broken input field
+      // (measured in Chromium, 2026-08-21). That bar carries `empty:hidden`,
+      // so turning the built-in switch off removes it entirely; the control
+      // moves into the footer below, on the same row as the mark.
+      themeSwitch={{ enabled: false }}
+      // After the spread: a future sidebar key in baseOptions must not
+      // silently swallow the attribution (review finding, 2026-08-18).
+      sidebar={{
+        footer: (
+          <div className="mt-3 flex flex-col gap-2">
+            {/* The record's own identity, on every page rather than only the
+                home page: the slug is what citations carry and llms.txt is the
+                door an agent is told to read. The sidebar had three links and
+                then several hundred pixels of nothing beneath them. */}
+            <p className="text-xs text-fd-muted-foreground">
+              <span className="font-mono">{appName}</span> · {documents} document
+              {documents === 1 ? "" : "s"} ·{" "}
+              <a
+                href={`${basePath}/llms.txt`}
+                className="underline underline-offset-4 transition-colors hover:text-fd-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-fd-ring"
+              >
+                llms.txt
+              </a>
+            </p>
+            <div className="flex items-center justify-between gap-3">
+              <p className="text-xs">
+                <FooterMark />
+              </p>
+              <ThemeSwitch />
+            </div>
+          </div>
+        ),
+      }}
+    >
+      {children}
+    </DocsLayout>
+  );
+}

package/templates/scaffold/system/site/components/record-stack.tsx

@@ -0,0 +1,131 @@
+import Link from "next/link";
+import type { ReactElement } from "react";
+
+import { statusTone } from "@/lib/governance";
+import type { RecordEntry } from "@/lib/source";
+
+/**
+ * The record on the cover, as a body of documents rather than a diagram of one.
+ *
+ * The front door used to carry an illustration of the product's claim — one
+ * governed source projecting into its surfaces. Four of them were drawn and all
+ * four were rejected (owner, 2026-08-22), and the reason is worth keeping: a
+ * stock drawing is the ONE thing on this page that can never be true of the
+ * adopter's corpus. Every KSoR would ship the identical picture, and it would
+ * say nothing about the record behind it.
+ *
+ * So the picture is made of the record. The document `Open the record` opens
+ * leads, fully set — its own title, its own words, its own governance — and the
+ * record's next entries stand behind it with depth. A record of one document
+ * and a record of two hundred therefore get visibly different front doors,
+ * which is the point: what is on the cover is what is in the volume.
+ *
+ * Nothing here is authored (scaffolded AGENTS.md, critical rule 1): every
+ * string is a title, description, owner or status the record declares, or a UI
+ * label. The depth is CSS, so it costs no image and follows the theme.
+ */
+export function RecordStack({
+  lead,
+  behind,
+  documents,
+}: {
+  /** The document `Open the record` lands on. */
+  lead: RecordEntry;
+  /** The entries standing behind it — at most three; the rest are counted. */
+  behind: readonly RecordEntry[];
+  /** Every document in the record, for the line beneath the stack. */
+  documents: number;
+}): ReactElement {
+  // An owner is a governance fact, so it is null with `site.governance: false`;
+  // a leaf holds nothing, so its count is 0. With neither, the footer rule
+  // would be an empty bar across the card — the same defect the sidebar's
+  // theme switch shipped with, so it is not drawn at all.
+  const footed = lead.owner !== null || lead.documents > 0;
+
+  return (
+    <div className="w-full max-w-md motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-3 motion-safe:duration-700 motion-safe:[animation-delay:180ms] motion-safe:[animation-fill-mode:backwards]">
+      <Link
+        href={lead.url}
+        className="group relative z-30 block rounded-xl border border-[var(--ksor-cover-panel-rule)] bg-[var(--ksor-cover-panel)] p-7 shadow-[0_28px_60px_-32px_rgb(15_23_42/0.55)] transition-transform hover:-translate-y-0.5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-fd-ring motion-reduce:transition-none"
+      >
+        <div className="flex items-baseline justify-between gap-4">
+          {/* The one label that ties this card to the button beside it. */}
+          <span className="font-mono text-[10px] tracking-[0.2em] text-[var(--ksor-cover-muted)] uppercase">
+            Opens here
+          </span>
+          {lead.status === null ? null : <StatusChip status={lead.status} />}
+        </div>
+
+        <h2 className="mt-4 font-display text-2xl leading-snug font-semibold tracking-[-0.008em] transition-colors group-hover:text-fd-primary">
+          {lead.title}
+        </h2>
+
+        {lead.description === null ? null : (
+          <p className="mt-3 text-sm/relaxed text-pretty text-[var(--ksor-cover-muted)]">
+            {lead.description}
+          </p>
+        )}
+
+        {!footed ? null : (
+          <div className="mt-6 flex items-baseline justify-between gap-4 border-t border-[var(--ksor-cover-panel-rule)] pt-4 font-mono text-[11px] text-[var(--ksor-cover-muted)]">
+            <span>{lead.owner ?? ""}</span>
+            {lead.documents === 0 ? null : (
+              <span className="tracking-wider uppercase tabular-nums">
+                {`${lead.documents} ${lead.documents === 1 ? "doc" : "docs"}`}
+              </span>
+            )}
+          </div>
+        )}
+      </Link>
+
+      {/* The volume it sits on. Painted in DOM order, so each card would cover
+          the one before it — the z-index descends to put them BEHIND. */}
+      {behind.map((entry, index) => (
+        <Link
+          key={entry.url}
+          href={entry.url}
+          className="group relative -mt-4 block rounded-xl border border-[var(--ksor-cover-panel-rule)] bg-[var(--ksor-cover-panel)] px-7 pt-6 pb-4 shadow-[0_18px_40px_-30px_rgb(15_23_42/0.5)] transition-transform hover:-translate-y-0.5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-fd-ring motion-reduce:transition-none"
+          style={{
+            zIndex: 20 - index * 10,
+            transform: `scale(${1 - (index + 1) * 0.028})`,
+            opacity: 1 - index * 0.13,
+          }}
+        >
+          <span className="flex items-baseline justify-between gap-4">
+            <span className="truncate font-display text-base font-medium transition-colors group-hover:text-fd-primary">
+              {entry.title}
+            </span>
+            <span className="flex shrink-0 items-baseline gap-2 font-mono text-[10px] tracking-widest text-[var(--ksor-cover-muted)] uppercase tabular-nums">
+              {entry.documents === 0
+                ? null
+                : `${entry.documents} ${entry.documents === 1 ? "doc" : "docs"}`}
+              {entry.status === null ? null : <StatusChip status={entry.status} />}
+            </span>
+          </span>
+        </Link>
+      ))}
+
+      {/* Rendered from one template literal, not `{documents} documents`:
+          React splits an interpolation with a comment node, so the split form
+          ships as `3<!-- --> documents` and no assertion can ever match it. */}
+      <p className="mt-6 text-center font-mono text-[11px] tracking-[0.18em] text-[var(--ksor-cover-muted)] uppercase">
+        {`${documents} ${documents === 1 ? "document" : "documents"} in the record`}
+      </p>
+    </div>
+  );
+}
+
+/**
+ * A caveat status, in the same chip the record's listings use — only ever
+ * `draft`, `review` or `superseded`, because a reader already assumes a
+ * document in the record is current.
+ */
+function StatusChip({ status }: { status: string }): ReactElement {
+  return (
+    <span
+      className={`rounded-sm border border-[var(--ksor-cover-rule)] px-1.5 py-0.5 font-mono text-[10px] tracking-widest text-[var(--ksor-cover-foreground)] uppercase ${statusTone(status)}`}
+    >
+      {status}
+    </span>
+  );
+}

package/templates/scaffold/system/site/components/record-toc.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import type { TOCItemType } from "fumadocs-core/toc";
+import { createContext, use, useEffect, useState, type ReactElement, type ReactNode } from "react";
+
+/**
+ * The document's headings, handed down from the page.
+ *
+ * A slot is a component TYPE, not an element, so the page cannot close over its
+ * own `toc` when it names one — a function cannot cross the server/client
+ * boundary. Reading the items from the shell's observer context instead would
+ * cost the server render: that context is filled in an effect, so the exported
+ * HTML would ship an empty rail where it currently ships every anchor. A
+ * context of our own, given serializable items by the server, keeps both.
+ */
+const TocItemsContext = createContext<readonly TOCItemType[]>([]);
+
+export function TocItems({
+  items,
+  children,
+}: {
+  items: readonly TOCItemType[];
+  children: ReactNode;
+}): ReactElement {
+  return <TocItemsContext value={items}>{children}</TocItemsContext>;
+}
+
+/**
+ * "On this page", tracking where the reader actually is.
+ *
+ * The shell's own rail marks a heading active when 90% of it is visible
+ * ANYWHERE in the viewport (`AnchorProvider` watches with `{ threshold: 0.9 }`
+ * and no `rootMargin`), and then highlights whichever became active most
+ * recently. On a long page that reads fine. On a governed record it does not:
+ * these documents are short-sectioned, so several headings sit on screen at
+ * once and the one entering from the BOTTOM wins — the marker ran two to four
+ * headings ahead of the reader (measured 2026-08-22: reading "owner" while the
+ * rail marked "description").
+ *
+ * The observer options are not configurable and the observer itself is not
+ * exported, so the selection cannot be corrected from outside — only replaced.
+ * This is the supported seam for that: `DocsPage`'s `slots.toc.main`. The
+ * shell's provider and its small-screen popover are kept exactly as they are;
+ * only the rail's choice of "here" is ours.
+ *
+ * The rule: the active heading is the LAST one whose top has passed the reading
+ * line — which is what a person means by "the section I am in". Nothing below
+ * the line can be it, however visible it is.
+ */
+export function RecordToc(): ReactElement | null {
+  const items = use(TocItemsContext);
+  const [activeId, setActiveId] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (items.length === 0) return;
+    const ids = items.map((item) => item.url.slice(1));
+
+    // Scroll position, not intersection: a heading is "here" once it has passed
+    // the reading line, and stays here until the next one does. An observer
+    // answers "is it visible", which is a different question and the reason the
+    // shell's rail runs ahead.
+    const READING_LINE = 140;
+    let frame = 0;
+    const measure = (): void => {
+      frame = 0;
+      let current: string | null = null;
+      for (const id of ids) {
+        const element = document.getElementById(id);
+        if (element === null) continue;
+        if (element.getBoundingClientRect().top <= READING_LINE) current = id;
+      }
+      // Before the first heading passes the line the reader is in the lead
+      // paragraphs, which belong to the first section — highlighting nothing
+      // there reads as broken rather than as honest.
+      setActiveId(current ?? ids[0] ?? null);
+    };
+    const onScroll = (): void => {
+      if (frame === 0) frame = requestAnimationFrame(measure);
+    };
+
+    measure();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", onScroll, { passive: true });
+    return () => {
+      if (frame !== 0) cancelAnimationFrame(frame);
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onScroll);
+    };
+  }, [items]);
+
+  if (items.length === 0) return null;
+
+  // The shallowest heading in THIS document is the left edge, so a document
+  // whose sections start at h3 does not render its whole rail indented.
+  const top = Math.min(...items.map((item) => item.depth));
+
+  // The section the reader is IN, as well as the subsection they are AT.
+  // Marking only the exact heading meant that scrolling down into a
+  // subsection put the light on a minor entry and left the section it belongs
+  // to dark — the rail stopped answering "where am I" the moment it mattered
+  // most. Walk back from the active item, taking each heading shallower than
+  // the last: the parent, then its parent.
+  const ancestors = new Set<string>();
+  const activeIndex = items.findIndex((item) => item.url.slice(1) === activeId);
+  if (activeIndex > 0) {
+    let depth = items[activeIndex]?.depth ?? top;
+    for (let index = activeIndex - 1; index >= 0 && depth > top; index -= 1) {
+      const candidate = items[index];
+      if (candidate === undefined || candidate.depth >= depth) continue;
+      ancestors.add(candidate.url);
+      depth = candidate.depth;
+    }
+  }
+
+  return (
+    // The container is the shell's own, copied verbatim: it carries the grid
+    // area, the rail width and the `max-xl:hidden` that hands small screens to
+    // the popover. Replacing a slot means supplying what the slot supplied —
+    // a first version rendered only the list and the rail escaped its column,
+    // laying 1156px wide across the page (found live, 2026-08-22).
+    <div
+      id="nd-toc"
+      className="sticky top-(--fd-docs-row-1) flex h-[calc(var(--fd-docs-height)-var(--fd-docs-row-1))] w-(--fd-toc-width) flex-col [grid-area:toc] pt-12 pe-4 pb-2 max-xl:hidden xl:layout:[--fd-toc-width:268px]"
+    >
+      <p className="mb-3 ps-4 font-mono text-[0.6875rem] tracking-[0.16em] text-fd-muted-foreground uppercase">
+        On this page
+      </p>
+      <nav aria-label="On this page" className="flex flex-col overflow-y-auto text-sm">
+        {items.map((item) => {
+          const id = item.url.slice(1);
+          const here = id === activeId;
+          const within = ancestors.has(item.url);
+          return (
+            <a
+              key={item.url}
+              href={item.url}
+              // The bar IS the border, so it cannot drift from the row it
+              // marks — the shell drew it as a separately positioned track.
+              // Three states, not two: AT this heading, INSIDE its section, or
+              // neither. The section keeps the reader's place without competing
+              // with the line they are actually on — full ink and a dimmed bar
+              // against the accent and a solid one.
+              className={`border-s-2 py-1.5 pe-2 transition-colors ${
+                here
+                  ? "border-fd-primary text-fd-primary"
+                  : within
+                    ? "border-fd-primary/40 text-fd-foreground"
+                    : "border-fd-border text-fd-muted-foreground hover:text-fd-foreground"
+              }`}
+              style={{ paddingInlineStart: `${(item.depth - top) * 0.75 + 1}rem` }}
+              aria-current={here ? "location" : undefined}
+            >
+              {item.title}
+            </a>
+          );
+        })}
+      </nav>
+    </div>
+  );
+}

package/templates/scaffold/system/site/components/search-dialog.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { useDocsSearch } from "fumadocs-core/search/client";
+// `staticClient`, not `oramaStaticClient`: 16.14.0 replaced the Orama engine
+// with ZBSearch and renamed the export, keeping the old name as a deprecated
+// alias. Riding an alias is borrowing time — the subpath and the options are
+// unchanged, so the new name costs nothing today and does not have to be found
+// again when the alias goes.
+import { staticClient } from "fumadocs-core/search/client/orama-static";
+import {
+  SearchDialog,
+  SearchDialogClose,
+  SearchDialogContent,
+  SearchDialogHeader,
+  SearchDialogIcon,
+  SearchDialogInput,
+  SearchDialogList,
+  SearchDialogListItem,
+  SearchDialogOverlay,
+  type SharedProps,
+} from "fumadocs-ui/components/dialog/search";
+import { useCallback, useMemo } from "react";
+
+/**
+ * The search dialog, with a caveat status on the rows that have one.
+ *
+ * Search was the last place a withdrawn document and its replacement looked
+ * identical — and worse than the others, because the result SNIPPET quotes the
+ * withdrawn figure, so a reader can take the wrong number out of the results
+ * without ever opening the page (research/site-design.md F3).
+ *
+ * Composed from the shell's own exported primitives rather than rebuilt: the
+ * only difference from the default dialog is the `Item` renderer. The status
+ * is NOT written into the search index — that would put a label inside the
+ * record's own titles, which the site does not author. It travels as a map of
+ * route → status, built on the server, and is applied at render time.
+ */
+export interface KsorSearchDialogProps extends SharedProps {
+  /** Where the static index is served from. */
+  api?: string;
+}
+
+/**
+ * Route → caveat status, read from the JSON the document carries (see
+ * app/layout.tsx). It arrives that way rather than as a prop because
+ * RootProvider types its `options` against the SHIPPED dialog's props, and
+ * casting that away would hide a real break the day those props move.
+ */
+function readStatuses(): Record<string, string> {
+  if (typeof document === "undefined") return {};
+  const el = document.getElementById("ksor-statuses");
+  if (el === null) return {};
+  try {
+    const parsed: unknown = JSON.parse(el.textContent ?? "{}");
+    return typeof parsed === "object" && parsed !== null ? (parsed as Record<string, string>) : {};
+  } catch {
+    // A record with no caveats, or a document that never carried the map:
+    // every row then renders exactly as the shipped dialog renders it.
+    return {};
+  }
+}
+
+const trimSlash = (url: string): string =>
+  url.length > 1 && url.endsWith("/") ? url.slice(0, -1) : url;
+
+export default function KsorSearchDialog({ api, onOpenChange, ...props }: KsorSearchDialogProps) {
+  const client = staticClient({ from: api });
+  const { search, setSearch, query } = useDocsSearch({ client });
+
+  // Closing the dialog clears the query. `useDocsSearch` keeps the term in
+  // component state and the dialog stays MOUNTED when it closes, so without
+  // this the next Cmd-K reopened onto the last search and its results — a
+  // reader coming back to look for something else had to clear the field
+  // first, and a stale result list is a worse first impression than an empty
+  // one (found live 2026-08-22).
+  const handleOpenChange = useCallback(
+    (open: boolean): void => {
+      if (!open) setSearch("");
+      onOpenChange(open);
+    },
+    [onOpenChange, setSearch],
+  );
+  const byUrl = useMemo(() => {
+    const map = new Map<string, string>();
+    for (const [url, status] of Object.entries(readStatuses())) map.set(trimSlash(url), status);
+    return map;
+  }, []);
+
+  return (
+    <SearchDialog
+      search={search}
+      onSearchChange={setSearch}
+      isLoading={query.isLoading}
+      onOpenChange={handleOpenChange}
+      {...props}
+    >
+      <SearchDialogOverlay />
+      <SearchDialogContent>
+        <SearchDialogHeader>
+          <SearchDialogIcon />
+          <SearchDialogInput />
+          <SearchDialogClose />
+        </SearchDialogHeader>
+        <SearchDialogList
+          items={query.data !== "empty" ? query.data : null}
+          Item={(itemProps) => {
+            // Only a page row carries a document's status; a heading or a text
+            // fragment is part of one, and marking every fragment would be the
+            // noise the page's own chip rule exists to avoid.
+            const status =
+              itemProps.item.type === "page" ? byUrl.get(trimSlash(itemProps.item.url)) : undefined;
+            // The chip rides a data attribute rather than replacing the row's
+            // children: the shell renders result text through its own markdown
+            // renderer to turn the search highlights into <mark>, and children
+            // passed here REPLACE that — which published the literal string
+            // "Purchase approval <mark>thresholds</mark> (2019)" into the
+            // dialog (seen in Chromium, 2026-08-21). CSS appends the label in
+            // app/global.css.
+            return (
+              <SearchDialogListItem
+                {...itemProps}
+                {...(status === undefined ? {} : { "data-ksor-status": status })}
+              />
+            );
+          }}
+        />
+      </SearchDialogContent>
+    </SearchDialog>
+  );
+}

package/templates/scaffold/system/site/components/sidebar-status.tsx

@@ -0,0 +1,35 @@
+import type { ReactElement } from "react";
+
+import { caveatStatus, statusTone } from "@/lib/governance";
+
+/**
+ * The sidebar's status marker, rendered by the shell's own status-badges
+ * plugin (`lib/source.ts`).
+ *
+ * The sidebar is where a reader chooses. Without this, a withdrawn document and
+ * the one that replaced it were pixel-identical rows — the governance appeared
+ * only after the click, which is the moment it is least useful
+ * (research/site-design.md F3).
+ *
+ * Only a CAVEAT is drawn. `approved` returns null, because a reader already
+ * assumes a document in the record is current and a label that never varies
+ * stops being read — so the marker stays rare enough to be noticed on the rows
+ * where it matters. That rule is ours; the walk over the tree is the shell's.
+ */
+export function renderCaveatBadge(status: string): ReactElement | null {
+  const caveat = caveatStatus(status);
+  if (caveat === null) return null;
+  // `inline-block` with the row's own wrapping, not a flex wrapper: the plugin
+  // composes `<>{name}{badge}</>` with no element around the pair, so the badge
+  // has to survive beside a title that runs two lines in a ~200px column. An
+  // earlier hand-rolled version pinned the chip right with `truncate`, which
+  // clipped the title AND the chip to "sup…" (seen in Chromium, 2026-08-21) —
+  // the marker has to fit around the name, not fight it.
+  return (
+    <span
+      className={`ms-1.5 inline-block rounded border border-fd-border px-1 py-px align-middle text-[0.6rem] font-medium whitespace-nowrap text-fd-muted-foreground ${statusTone(caveat)}`}
+    >
+      {caveat}
+    </span>
+  );
+}

package/templates/scaffold/system/site/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
+        outline:
+          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 [a&]:hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span";
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };

package/templates/scaffold/system/site/components/ui/button.tsx

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot.Root : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

package/templates/scaffold/system/site/components/ui/separator.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+import { Separator as SeparatorPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };