@panaversity/ksor 0.0.27 → 0.0.28

package/templates/scaffold/system/site/components/governance.tsx

@@ -1,7 +1,6 @@
-import { FileText } from "lucide-react";
 import Link from "next/link";
 
-import { CopyMarkdown } from "@/components/copy-markdown";
+import { DocumentActions } from "@/components/document-actions";
 import type { ReactElement } from "react";
 
 import {
@@ -182,29 +181,22 @@ export function GovernanceMeta({
         // On the governance row, not as a footnote below the sources: it is
         // how a reader hands this document to an agent, and it was previously
         // the smallest text on the page, last (research/site-design.md F2).
-        // These are the ACTIONS on a row of FACTS, so they wear neither the
-        // bordered badge (that means "a status the record declares", and
-        // dressing a link in it made the only clickable thing look like another
-        // read-only field) nor the accent at rest. An icon and a hover surface
-        // say "control" without spending the brand colour on something that is
-        // merely sitting there — the page had gone blue enough that the accent
-        // had stopped meaning anything (owner, 2026-08-22).
-        // Inline after the facts, NOT right-aligned: `ms-auto` parked it at the
-        // far edge of a 900px row, 498px from the nearest thing on a document
-        // with two facts, where it read as belonging to nothing (measured in
-        // Chromium, 2026-08-21).
-        <span className="flex items-center gap-0.5">
-          <a
-            href={markdownUrl}
-            className="inline-flex items-center gap-1.5 rounded-md px-2 py-1 font-mono text-[0.6875rem] tracking-[0.14em] text-fd-muted-foreground uppercase transition-colors hover:bg-fd-muted hover:text-fd-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-fd-ring"
-          >
-            <FileText aria-hidden className="size-3.5" />
-            Markdown
-          </a>
-          {/* Beside the link, not instead of it: opening the markdown and
-              handing it to an agent are different acts, and a reader who wants
-              the second should not have to perform the first. */}
-          <CopyMarkdown href={markdownUrl} />
+        // ONE control rather than two: opening the markdown and copying it are
+        // different acts, but two bare controls on a row of read-only facts
+        // made the row look half clickable. It wears neither the bordered badge
+        // (that means "a status the record declares") nor the accent at rest —
+        // the page had gone blue enough that the accent had stopped meaning
+        // anything (owner, 2026-08-22).
+        // RIGHT-ALIGNED (owner, and a reversal). The 2026-08-21 finding stands
+        // on its own terms: `ms-auto` once parked this 498px from the nearest
+        // thing on a two-fact document, where it read as belonging to nothing.
+        // What changed is the column beside it — the reading time now sits at
+        // the right end of the strip directly below, so the far edge is no
+        // longer empty space but a line the eye already follows. The two form
+        // a right-hand column of things you DO, against a left-hand row of
+        // things the record DECLARES.
+        <span className="ms-auto">
+          <DocumentActions href={markdownUrl} />
         </span>
       )}
     </dl>

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

@@ -0,0 +1,241 @@
+"use client";
+
+import { Clock, FileText, ListTree } from "lucide-react";
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+
+/**
+ * The two READINGS of one document: the record's own words, and its summary.
+ *
+ * Study aids are NOT here. A deck — and the quiz that will sit beside it — is
+ * something you do AFTER reading, so it belongs at the end of the page rather
+ * than behind a tab that hides the document while you use it. See
+ * components/study-aids.tsx.
+ *
+ * PRESENCE-DRIVEN. With neither attachment there is no tab strip at all — not a
+ * disabled tab, not a greyed affordance, not an empty panel. A control that
+ * cannot do anything is worse than no control, and a governed record whose
+ * documents mostly have no study attachments would otherwise grow a row of dead
+ * chrome on every page.
+ *
+ * EVERY PANEL IS IN THE SERVER-RENDERED HTML, hidden rather than unmounted.
+ * The panels arrive as props — React elements built on the server — so an agent
+ * parsing the page, a crawler, and a reader whose bundle failed all get the
+ * text. A summary that only exists once JavaScript runs is a summary missing
+ * from the printout, which is the same argument governance.tsx makes for
+ * rendering governance as plain markup.
+ */
+
+type ViewId = "document" | "summary";
+
+interface View {
+  readonly id: ViewId;
+  readonly label: string;
+  readonly icon: ReactElement;
+  readonly panel: ReactNode;
+  /** About how long this reading takes, in minutes. */
+  readonly minutes?: number | undefined;
+}
+
+export interface RecordViewsProps {
+  /** The document's own body — always present. */
+  readonly children: ReactNode;
+  /** Rendered summary, or null when the document has none. */
+  readonly summary: ReactNode | null;
+  /** Minutes to read the document, and the summary if there is one. */
+  readonly documentMinutes?: number | undefined;
+  readonly summaryMinutes?: number | undefined;
+}
+
+const ICON = "size-3.5 shrink-0";
+
+export function RecordViews({
+  children,
+  summary,
+  documentMinutes,
+  summaryMinutes,
+}: RecordViewsProps): ReactElement {
+  const views: View[] = [
+    {
+      id: "document",
+      label: "Document",
+      icon: <FileText className={ICON} />,
+      panel: children,
+      minutes: documentMinutes,
+    },
+  ];
+  if (summary !== null) {
+    views.push({
+      id: "summary",
+      label: "Summary",
+      icon: <ListTree className={ICON} />,
+      panel: summary,
+      minutes: summaryMinutes,
+    });
+  }
+
+  // No attachment, no chrome. Returned before any hook state matters — the
+  // hooks below still run, because a conditional hook is a different bug.
+  const only = views.length === 1;
+
+  const [active, setActive] = useState<ViewId>("document");
+  const activeMinutes = views.find((view) => view.id === active)?.minutes;
+  const tabRefs = useRef(new Map<ViewId, HTMLButtonElement>());
+  const base = useId();
+  const tabId = (id: ViewId): string => `${base}-tab-${id}`;
+  const panelId = (id: ViewId): string => `${base}-panel-${id}`;
+
+  /**
+   * The view is in the URL fragment, so a summary is linkable and survives a
+   * reload. Read on mount rather than during render: the server has no
+   * fragment, and choosing a tab from it during render would hydrate a tree the
+   * server never produced.
+   */
+  useEffect(() => {
+    const fromHash = window.location.hash.replace("#", "");
+    if (fromHash === "summary") {
+      setActive((current) =>
+        views.some((v) => v.id === fromHash) ? (fromHash as ViewId) : current,
+      );
+    }
+    // Views are derived from props that do not change for a given page.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const select = useCallback((id: ViewId, focus = false) => {
+    setActive(id);
+    // replaceState, not a hash assignment: assigning location.hash scrolls the
+    // matching element to the top of the viewport, which on a tab strip means
+    // the page jumps every time a reader changes view.
+    // pathname + search, not pathname alone: dropping back to the document
+    // view must not silently discard a query string the reader arrived with.
+    const base = `${window.location.pathname}${window.location.search}`;
+    window.history.replaceState(null, "", id === "document" ? base : `${base}#${id}`);
+    if (focus) tabRefs.current.get(id)?.focus();
+  }, []);
+
+  const onKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLButtonElement>, index: number) => {
+      const last = views.length - 1;
+      const to =
+        event.key === "ArrowRight"
+          ? index === last
+            ? 0
+            : index + 1
+          : event.key === "ArrowLeft"
+            ? index === 0
+              ? last
+              : index - 1
+            : event.key === "Home"
+              ? 0
+              : event.key === "End"
+                ? last
+                : null;
+      if (to === null) return;
+      event.preventDefault();
+      const target = views[to];
+      if (target !== undefined) select(target.id, true);
+    },
+    [select, views],
+  );
+
+  // No summary, so no tabs — but the strip row still carries the reading time.
+  // It sits here rather than up with the title because this row is about the
+  // reading you are ABOUT to do, and a lone line above the facts row read as
+  // floating between two things it belonged to neither of.
+  if (only) {
+    return (
+      <div className="ksor-views">
+        {documentMinutes === undefined ? null : (
+          <p className="mb-6 flex items-center justify-end gap-2 border-b border-fd-border pb-2.5 text-sm text-fd-muted-foreground">
+            <Clock aria-hidden className="size-3.5 shrink-0" />
+            <span>{documentMinutes} min read</span>
+          </p>
+        )}
+        {children}
+      </div>
+    );
+  }
+
+  return (
+    <div className="ksor-views">
+      {/* The rule spans the whole strip, and the clock sits at its far end.
+        ONE clock rather than a number on every tab: the reader is on one view
+        at a time, and the time they care about is the time for the view they
+        are looking at. The rule is on this wrapper rather than the tablist so
+        it runs the full width beneath both. */}
+      <div className="mb-6 flex items-center justify-between gap-4 border-b border-fd-border">
+        <div role="tablist" aria-label="Views of this document" className="flex gap-1">
+          {views.map((view, index) => {
+            const selected = view.id === active;
+            return (
+              <button
+                key={view.id}
+                ref={(node) => {
+                  if (node) tabRefs.current.set(view.id, node);
+                }}
+                type="button"
+                role="tab"
+                id={tabId(view.id)}
+                aria-selected={selected}
+                aria-controls={panelId(view.id)}
+                // The visible minutes belong to the SELECTED view only, so each
+                // tab carries its own in its accessible name — otherwise a
+                // screen-reader user could not compare them without switching.
+                {...(view.minutes === undefined
+                  ? {}
+                  : {
+                      "aria-label": `${view.label}, ${view.minutes} minute${view.minutes === 1 ? "" : "s"} to read`,
+                    })}
+                // Roving tabIndex: one stop for the whole strip, arrows move
+                // within it. Every tab being a tab stop is the common mistake and
+                // makes a keyboard reader walk the chrome before the prose.
+                tabIndex={selected ? 0 : -1}
+                onClick={() => select(view.id)}
+                onKeyDown={(event) => onKeyDown(event, index)}
+                className={[
+                  "-mb-px flex items-center gap-2 border-b-2 px-3 py-2 font-mono text-xs tracking-wide transition-colors",
+                  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-fd-primary",
+                  selected
+                    ? "border-fd-primary text-fd-foreground"
+                    : "border-transparent text-fd-muted-foreground hover:text-fd-foreground",
+                ].join(" ")}
+              >
+                {view.icon}
+                {view.label}
+              </button>
+            );
+          })}
+        </div>
+
+        {activeMinutes === undefined ? null : (
+          <span className="flex shrink-0 items-center gap-2 pb-2 text-sm text-fd-muted-foreground">
+            <Clock aria-hidden className="size-3.5 shrink-0" />
+            <span>{activeMinutes} min read</span>
+          </span>
+        )}
+      </div>
+
+      {views.map((view) => (
+        <div
+          key={view.id}
+          role="tabpanel"
+          id={panelId(view.id)}
+          aria-labelledby={tabId(view.id)}
+          hidden={view.id !== active}
+          // Not tabbable itself; its contents are. A tabpanel of prose with
+          // tabIndex={0} adds a stop that announces the whole document.
+        >
+          {view.panel}
+        </div>
+      ))}
+    </div>
+  );
+}

package/templates/scaffold/system/site/components/study-aids.tsx

@@ -0,0 +1,61 @@
+import type { ReactElement, ReactNode } from "react";
+
+/**
+ * The end-of-document region: what a reader DOES with a document once they
+ * have read it.
+ *
+ * The deck lives here, and the quiz will sit beside it. Deliberately not a tab:
+ * a study aid is used AFTER the document, and a tab would hide the document
+ * while you used it. Deliberately one region rather than each aid finding its
+ * own spot on the page, so a second aid is a child here and not a new layout
+ * argument.
+ *
+ * Renders NOTHING when the document has no aids — no heading, no rule, no
+ * empty region (specs/ksor/study-attachments C3).
+ */
+export function StudyAids({ children }: { readonly children: ReactNode }): ReactElement | null {
+  const present = Array.isArray(children) ? children.some((c) => c) : Boolean(children);
+  if (!present) return null;
+
+  return (
+    <section
+      aria-label="Study aids"
+      // `not-prose`: this is site chrome around the record, not the record's
+      // prose, so the document type ramp must not reach into it.
+      className="not-prose mt-14 flex flex-col gap-14"
+    >
+      {children}
+    </section>
+  );
+}
+
+/**
+ * One aid's header: its own name in the record's serif, an accent bar, and the
+ * hairline that separates it from the document above.
+ *
+ * Shared so the deck and the quiz cannot drift into two different headings.
+ */
+export function StudyAidHeader({
+  title,
+  description,
+}: {
+  readonly title: string;
+  readonly description?: string | undefined;
+}): ReactElement {
+  return (
+    <header className="mb-8">
+      <h2 className="font-(family-name:--font-display) text-2xl font-semibold tracking-tight text-fd-foreground">
+        {title}
+      </h2>
+      {/* A short accent bar over a full-width hairline: the rule says "a new
+        region starts here" and the bar says which one, without a second
+        colour or a boxed container. */}
+      <div className="mt-3 h-px w-full bg-fd-border">
+        <div className="h-[3px] w-24 -translate-y-px bg-fd-primary" />
+      </div>
+      {description === undefined ? null : (
+        <p className="mt-4 text-sm text-fd-muted-foreground">{description}</p>
+      )}
+    </header>
+  );
+}

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

@@ -0,0 +1,76 @@
+// Generated by `pnpm dlx shadcn@latest add card`. Yours to edit.
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="card-content" className={cn("px-6", className)} {...props} />;
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  );
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };

package/templates/scaffold/system/site/components/ui/dropdown-menu.tsx

@@ -0,0 +1,229 @@
+// Generated by `pnpm dlx shadcn@latest add dropdown-menu`. Yours to edit.
+"use client";
+
+import * as React from "react";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+};