@conscia-labs/design-system 0.2.0

package/dist/chunk-5MGPU2JE.js

@@ -0,0 +1,1764 @@
+import {
+  appearanceOptions,
+  applyConsciaPreferences,
+  densityOptions
+} from "./chunk-D5LYROOM.js";
+import {
+  Button,
+  Card,
+  Checkbox,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Separator,
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  Skeleton,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "./chunk-YHPZ5CQU.js";
+import {
+  cn
+} from "./chunk-JU5DQXFC.js";
+
+// src/patterns/pagination.tsx
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function PaginationControls({
+  currentPage,
+  pageCount,
+  totalLabel,
+  onPrevious,
+  onNext,
+  onPageChange,
+  pageSize,
+  pageSizeOptions = [10, 25, 50],
+  onPageSizeChange,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "pagination-controls",
+      className: cn("flex flex-col gap-2 border-t border-border-subtle px-5 py-3 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+          /* @__PURE__ */ jsx("span", { children: totalLabel }),
+          pageSize && onPageSizeChange ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-[var(--ds-metadata)]", children: "Rows" }),
+            /* @__PURE__ */ jsxs(Select, { value: String(pageSize), onValueChange: (value) => onPageSizeChange(Number(value)), children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", className: "w-[4.5rem]", "aria-label": "Rows per page", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+              /* @__PURE__ */ jsx(SelectContent, { children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx(SelectItem, { value: String(size), children: size }, size)) })
+            ] })
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "icon", className: "size-8", "aria-label": "Previous page", onClick: onPrevious ?? (() => onPageChange?.(currentPage - 1)), disabled: currentPage <= 1, children: /* @__PURE__ */ jsx(ChevronLeft, {}) }),
+          onPageChange ? pageItems(currentPage, pageCount).map((item, index) => item === "ellipsis" ? /* @__PURE__ */ jsx("span", { className: "flex size-8 items-center justify-center text-muted-foreground", "aria-hidden": "true", children: "\u2026" }, `ellipsis-${index}`) : /* @__PURE__ */ jsx(Button, { type: "button", variant: item === currentPage ? "secondary" : "ghost", size: "icon", className: "size-8", "aria-label": `Page ${item}`, "aria-current": item === currentPage ? "page" : void 0, onClick: () => onPageChange(item), children: item }, item)) : /* @__PURE__ */ jsxs("span", { className: "px-2 text-[var(--ds-metadata)]", children: [
+            "Page ",
+            currentPage,
+            " of ",
+            pageCount
+          ] }),
+          /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "icon", className: "size-8", "aria-label": "Next page", onClick: onNext ?? (() => onPageChange?.(currentPage + 1)), disabled: currentPage >= pageCount, children: /* @__PURE__ */ jsx(ChevronRight, {}) })
+        ] })
+      ]
+    }
+  );
+}
+function pageItems(currentPage, pageCount) {
+  if (pageCount <= 7) return Array.from({ length: pageCount }, (_, index) => index + 1);
+  const pages = /* @__PURE__ */ new Set([1, pageCount, currentPage - 1, currentPage, currentPage + 1]);
+  const sorted = Array.from(pages).filter((page) => page > 0 && page <= pageCount).sort((a, b) => a - b);
+  const result = [];
+  sorted.forEach((page, index) => {
+    if (index && page - sorted[index - 1] > 1) result.push("ellipsis");
+    result.push(page);
+  });
+  return result;
+}
+
+// src/patterns/data-table.tsx
+import * as React from "react";
+import {
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable
+} from "@tanstack/react-table";
+import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function DataTable({
+  data,
+  columns,
+  getRowId,
+  getRowLabel,
+  onRowClick,
+  isRowClickable,
+  rowActions,
+  selectedIds,
+  onSelectionChange,
+  sorting,
+  onSortingChange,
+  manualSorting = false,
+  pagination,
+  onPaginationChange,
+  manualPagination = false,
+  pageCount,
+  rowCount,
+  pageSizeOptions,
+  totalLabel,
+  mobileRow,
+  empty,
+  className
+}) {
+  const rowSelection = React.useMemo(() => {
+    const selection = {};
+    selectedIds?.forEach((id) => {
+      selection[id] = true;
+    });
+    return selection;
+  }, [selectedIds]);
+  const tableColumns = React.useMemo(() => {
+    const result = [];
+    if (onSelectionChange) {
+      result.push({
+        id: "select",
+        enableSorting: false,
+        header: ({ table: table2 }) => /* @__PURE__ */ jsx2(
+          Checkbox,
+          {
+            "aria-label": "Select all rows on this page",
+            checked: table2.getIsAllPageRowsSelected() || table2.getIsSomePageRowsSelected() && "indeterminate",
+            onCheckedChange: (checked) => table2.toggleAllPageRowsSelected(Boolean(checked))
+          }
+        ),
+        cell: ({ row }) => /* @__PURE__ */ jsx2(
+          Checkbox,
+          {
+            "aria-label": `Select ${getRowLabel?.(row.original) ?? row.id}`,
+            checked: row.getIsSelected(),
+            onCheckedChange: (checked) => row.toggleSelected(Boolean(checked)),
+            onClick: (event) => event.stopPropagation()
+          }
+        ),
+        meta: { className: "w-10" }
+      });
+    }
+    result.push(...columns.map((column) => ({
+      id: column.id,
+      ...column.accessor ? { accessorFn: column.accessor } : {},
+      enableSorting: column.sortable ?? false,
+      header: () => column.header,
+      cell: ({ row }) => column.cell(row.original),
+      meta: { className: column.className, label: typeof column.header === "string" ? column.header : column.id }
+    })));
+    if (rowActions) {
+      result.push({
+        id: "actions",
+        enableSorting: false,
+        header: "Actions",
+        cell: ({ row }) => /* @__PURE__ */ jsx2(
+          "div",
+          {
+            onClick: (event) => event.stopPropagation(),
+            onKeyDown: (event) => event.stopPropagation(),
+            children: rowActions(row.original)
+          }
+        ),
+        meta: { className: "w-12 text-right" }
+      });
+    }
+    return result;
+  }, [columns, getRowLabel, onSelectionChange, rowActions]);
+  const table = useReactTable({
+    data,
+    columns: tableColumns,
+    getRowId: (row) => getRowId(row),
+    state: { rowSelection, ...sorting ? { sorting } : {}, ...pagination ? { pagination } : {} },
+    enableRowSelection: Boolean(onSelectionChange),
+    onRowSelectionChange: (updater) => {
+      if (!onSelectionChange) return;
+      const next = typeof updater === "function" ? updater(rowSelection) : updater;
+      onSelectionChange(new Set(Object.keys(next).filter((id) => next[id])));
+    },
+    onSortingChange: (updater) => {
+      if (!onSortingChange) return;
+      onSortingChange(typeof updater === "function" ? updater(sorting ?? []) : updater);
+    },
+    onPaginationChange: (updater) => {
+      if (!onPaginationChange || !pagination) return;
+      onPaginationChange(typeof updater === "function" ? updater(pagination) : updater);
+    },
+    manualSorting,
+    manualPagination,
+    pageCount,
+    rowCount,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: manualSorting ? void 0 : getSortedRowModel(),
+    getPaginationRowModel: pagination && !manualPagination ? getPaginationRowModel() : void 0
+  });
+  if (!data.length && empty) return /* @__PURE__ */ jsx2(Fragment, { children: empty });
+  const visibleRows = table.getRowModel().rows;
+  const showPagination = Boolean(pagination && onPaginationChange);
+  return /* @__PURE__ */ jsxs2("div", { "data-slot": "data-table", className: cn("bg-background", className), children: [
+    /* @__PURE__ */ jsx2("div", { className: mobileRow ? "hidden md:block" : void 0, children: /* @__PURE__ */ jsxs2(Table, { children: [
+      /* @__PURE__ */ jsx2(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx2(TableRow, { children: headerGroup.headers.map((header) => {
+        const meta = header.column.columnDef.meta;
+        const canSort = header.column.getCanSort();
+        const sorted = header.column.getIsSorted();
+        return /* @__PURE__ */ jsx2(
+          TableHead,
+          {
+            className: meta?.className,
+            "aria-sort": canSort ? sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : "none" : void 0,
+            children: header.isPlaceholder ? null : canSort ? /* @__PURE__ */ jsxs2(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                className: "-ml-2 h-8 gap-1.5 px-2 text-[var(--ds-metadata)] font-semibold uppercase text-muted-foreground hover:text-foreground",
+                onClick: header.column.getToggleSortingHandler(),
+                "aria-label": `Sort by ${meta?.label ?? header.column.id}`,
+                children: [
+                  flexRender(header.column.columnDef.header, header.getContext()),
+                  sorted === "asc" ? /* @__PURE__ */ jsx2(ArrowUp, { className: "size-3.5" }) : sorted === "desc" ? /* @__PURE__ */ jsx2(ArrowDown, { className: "size-3.5" }) : /* @__PURE__ */ jsx2(ChevronsUpDown, { className: "size-3.5 opacity-60" })
+                ]
+              }
+            ) : flexRender(header.column.columnDef.header, header.getContext())
+          },
+          header.id
+        );
+      }) }, headerGroup.id)) }),
+      /* @__PURE__ */ jsx2(TableBody, { children: visibleRows.map((row) => {
+        const rowClickable = Boolean(
+          onRowClick && (isRowClickable?.(row.original) ?? true)
+        );
+        return /* @__PURE__ */ jsx2(
+          TableRow,
+          {
+            "data-state": row.getIsSelected() ? "selected" : void 0,
+            tabIndex: rowClickable ? 0 : void 0,
+            "aria-label": rowClickable ? getRowLabel?.(row.original) ?? row.id : void 0,
+            className: cn(rowClickable && "cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45"),
+            onClick: () => {
+              if (rowClickable) onRowClick?.(row.original);
+            },
+            onKeyDown: (event) => {
+              if (!rowClickable || event.key !== "Enter" && event.key !== " ") return;
+              event.preventDefault();
+              onRowClick?.(row.original);
+            },
+            children: row.getVisibleCells().map((cell) => {
+              const meta = cell.column.columnDef.meta;
+              return /* @__PURE__ */ jsx2(TableCell, { className: meta?.className, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id);
+            })
+          },
+          row.id
+        );
+      }) })
+    ] }) }),
+    mobileRow ? /* @__PURE__ */ jsx2("div", { className: "divide-y divide-border-subtle md:hidden", role: "list", children: visibleRows.map((row) => /* @__PURE__ */ jsx2("div", { role: "listitem", children: mobileRow(row.original) }, row.id)) }) : null,
+    showPagination ? /* @__PURE__ */ jsx2(
+      PaginationControls,
+      {
+        currentPage: pagination.pageIndex + 1,
+        pageCount: Math.max(1, table.getPageCount()),
+        pageSize: pagination.pageSize,
+        pageSizeOptions,
+        totalLabel,
+        onPageChange: (nextPage) => table.setPageIndex(nextPage - 1),
+        onPageSizeChange: (nextSize) => table.setPageSize(nextSize)
+      }
+    ) : null
+  ] });
+}
+
+// src/patterns/entity-table.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function EntityTable({
+  items,
+  columns,
+  getRowId,
+  selectedIds,
+  onSelectionChange,
+  onRowClick,
+  getRowLabel,
+  rowActions,
+  className
+}) {
+  return /* @__PURE__ */ jsx3(
+    DataTable,
+    {
+      data: items,
+      columns: columns.map((column) => ({ ...column, id: column.key })),
+      getRowId,
+      selectedIds,
+      onSelectionChange,
+      onRowClick,
+      getRowLabel,
+      rowActions,
+      className
+    }
+  );
+}
+
+// src/patterns/detail-back-link.tsx
+import { ArrowLeft } from "lucide-react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function DetailBackLink({ label, className, ...props }) {
+  return /* @__PURE__ */ jsxs3(
+    "a",
+    {
+      "data-slot": "detail-back-link",
+      className: cn(
+        "inline-flex h-8 w-fit items-center gap-2 rounded-md px-2 text-sm font-medium text-muted-foreground outline-none transition-colors hover:bg-surface-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/45",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx4(ArrowLeft, { className: "size-4", "aria-hidden": "true" }),
+        label
+      ]
+    }
+  );
+}
+
+// src/patterns/app-shell.tsx
+import * as React2 from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { PanelLeftIcon } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var SIDEBAR_COOKIE_NAME = "conscia_sidebar_state";
+var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 30;
+var SIDEBAR_KEYBOARD_SHORTCUT = "b";
+var SIDEBAR_STORAGE_KEY = "conscia-sidebar-open:v1";
+var SIDEBAR_STATE_CHANGE_EVENT = "conscia-sidebar-state-change";
+function parseSidebarOpen(value) {
+  return value === "true" ? true : value === "false" ? false : null;
+}
+function readPersistedSidebarOpen() {
+  if (typeof document === "undefined") {
+    return null;
+  }
+  try {
+    const storedValue = window.localStorage.getItem(SIDEBAR_STORAGE_KEY);
+    const storedSidebarOpen = parseSidebarOpen(storedValue);
+    if (storedSidebarOpen !== null) {
+      return storedSidebarOpen;
+    }
+  } catch {
+  }
+  const cookie = document.cookie.split("; ").find((entry) => entry.startsWith(`${SIDEBAR_COOKIE_NAME}=`));
+  if (!cookie) {
+    return null;
+  }
+  const value = cookie.slice(SIDEBAR_COOKIE_NAME.length + 1);
+  return parseSidebarOpen(value);
+}
+function persistSidebarOpen(open) {
+  try {
+    window.localStorage.setItem(SIDEBAR_STORAGE_KEY, String(open));
+  } catch {
+  }
+  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+  window.dispatchEvent(new Event(SIDEBAR_STATE_CHANGE_EVENT));
+}
+function subscribeToSidebarOpen(onStoreChange) {
+  function onStorage(event) {
+    if (event.key === SIDEBAR_STORAGE_KEY) {
+      onStoreChange();
+    }
+  }
+  window.addEventListener(SIDEBAR_STATE_CHANGE_EVENT, onStoreChange);
+  window.addEventListener("storage", onStorage);
+  return () => {
+    window.removeEventListener(SIDEBAR_STATE_CHANGE_EVENT, onStoreChange);
+    window.removeEventListener("storage", onStorage);
+  };
+}
+var AppShellContext = React2.createContext(null);
+function useAppShell() {
+  const context = React2.useContext(AppShellContext);
+  if (!context) {
+    throw new Error("useAppShell must be used within AppShell.");
+  }
+  return context;
+}
+function useMediaQuery(query) {
+  const [matches, setMatches] = React2.useState(false);
+  React2.useEffect(() => {
+    const media = window.matchMedia(query);
+    const sync = () => setMatches(media.matches);
+    sync();
+    media.addEventListener("change", sync);
+    return () => media.removeEventListener("change", sync);
+  }, [query]);
+  return matches;
+}
+function AppShell({
+  defaultSidebarOpen = true,
+  children,
+  className,
+  style,
+  ...props
+}) {
+  const isMobile = useMediaQuery("(max-width: 1023px)");
+  const [sidebarOpen, setSidebarOpenState] = React2.useState(defaultSidebarOpen);
+  const [sidebarSide, setSidebarSide] = React2.useState("left");
+  const [mobileOpen, setMobileOpen] = React2.useState(false);
+  React2.useEffect(() => {
+    function syncSidebarOpen() {
+      setSidebarOpenState(readPersistedSidebarOpen() ?? defaultSidebarOpen);
+    }
+    const unsubscribe = subscribeToSidebarOpen(syncSidebarOpen);
+    queueMicrotask(syncSidebarOpen);
+    return unsubscribe;
+  }, [defaultSidebarOpen]);
+  const setSidebarOpen = React2.useCallback((open) => {
+    persistSidebarOpen(open);
+  }, []);
+  const toggleSidebar = React2.useCallback(() => {
+    if (isMobile) {
+      setMobileOpen((current) => !current);
+      return;
+    }
+    persistSidebarOpen(!sidebarOpen);
+  }, [isMobile, sidebarOpen]);
+  React2.useEffect(() => {
+    const onKeyDown = (event) => {
+      if (event.key.toLowerCase() === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        toggleSidebar();
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [toggleSidebar]);
+  const contextValue = React2.useMemo(
+    () => ({
+      sidebarState: sidebarOpen ? "expanded" : "collapsed",
+      sidebarSide,
+      setSidebarSide,
+      sidebarOpen,
+      setSidebarOpen,
+      mobileOpen,
+      setMobileOpen,
+      isMobile,
+      toggleSidebar
+    }),
+    [
+      isMobile,
+      mobileOpen,
+      setSidebarOpen,
+      sidebarOpen,
+      sidebarSide,
+      toggleSidebar
+    ]
+  );
+  return /* @__PURE__ */ jsx5(AppShellContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx5(TooltipProvider, { delayDuration: 120, children: /* @__PURE__ */ jsx5(
+    "div",
+    {
+      "data-slot": "app-shell",
+      "data-sidebar-state": sidebarOpen ? "expanded" : "collapsed",
+      "data-sidebar-side": sidebarSide,
+      suppressHydrationWarning: true,
+      className: cn(
+        "group/shell min-h-svh bg-canvas text-foreground",
+        "[--ds-app-sidebar-width:16rem] [--ds-app-sidebar-width-mobile:18rem] data-[sidebar-state=collapsed]:[--ds-app-sidebar-width:3.5rem]",
+        className
+      ),
+      style,
+      ...props,
+      children
+    }
+  ) }) });
+}
+function AppSidebar({
+  side = "left",
+  className,
+  children,
+  title = "Application navigation",
+  description = "Primary product navigation.",
+  ...props
+}) {
+  const { mobileOpen, setMobileOpen, setSidebarSide } = useAppShell();
+  React2.useEffect(() => {
+    setSidebarSide(side);
+  }, [setSidebarSide, side]);
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsx5(Sheet, { open: mobileOpen, onOpenChange: setMobileOpen, children: /* @__PURE__ */ jsxs4(
+      SheetContent,
+      {
+        side,
+        className: "w-72 border-sidebar-border bg-sidebar p-0 text-sidebar-foreground [&>[data-slot=sheet-close]]:right-3 [&>[data-slot=sheet-close]]:top-3 [&>[data-slot=sheet-close]]:text-sidebar-foreground/64 [&>[data-slot=sheet-close]]:hover:text-sidebar-foreground",
+        children: [
+          /* @__PURE__ */ jsxs4(SheetHeader, { className: "sr-only", children: [
+            /* @__PURE__ */ jsx5(SheetTitle, { children: title }),
+            /* @__PURE__ */ jsx5(SheetDescription, { children: description })
+          ] }),
+          /* @__PURE__ */ jsx5("div", { className: "flex h-full min-h-0 flex-col", children })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx5(
+      "aside",
+      {
+        "data-slot": "app-sidebar",
+        "data-side": side,
+        className: cn(
+          "fixed inset-y-0 z-20 hidden w-[var(--ds-app-sidebar-width)] shrink-0 flex-col border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-linear lg:flex",
+          side === "left" ? "left-0 border-r" : "right-0 border-l",
+          "group-data-[sidebar-state=collapsed]/shell:w-[var(--ds-app-sidebar-width)]",
+          className
+        ),
+        ...props,
+        children
+      }
+    )
+  ] });
+}
+function AppSidebarHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      "data-slot": "app-sidebar-header",
+      className: cn(
+        "flex min-h-14 shrink-0 items-center border-b border-sidebar-border px-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AppSidebarContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      "data-slot": "app-sidebar-content",
+      className: cn(
+        "flex min-h-0 flex-1 flex-col gap-[var(--ds-space-control)] overflow-y-auto px-2.5 py-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AppSidebarFooter({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      "data-slot": "app-sidebar-footer",
+      className: cn(
+        "mt-auto flex shrink-0 flex-col gap-2 border-t border-sidebar-border p-2.5",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ProductIdentity({
+  label,
+  description,
+  icon,
+  className
+}) {
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      "data-slot": "product-identity",
+      className: cn("flex min-w-0 items-center gap-2", className),
+      children: [
+        icon ? /* @__PURE__ */ jsx5("div", { className: "flex size-7 shrink-0 items-center justify-center rounded-[var(--ds-radius-control)] bg-sidebar-accent text-sidebar-foreground", children: icon }) : null,
+        /* @__PURE__ */ jsxs4("div", { className: "min-w-0 group-data-[sidebar-state=collapsed]/shell:hidden", children: [
+          /* @__PURE__ */ jsx5("div", { className: "truncate text-sm font-semibold leading-5 text-sidebar-foreground", children: label }),
+          description ? /* @__PURE__ */ jsx5("div", { className: "truncate text-[var(--ds-metadata)] leading-4 text-sidebar-foreground/62", children: description }) : null
+        ] })
+      ]
+    }
+  );
+}
+function SidebarSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(
+    Separator,
+    {
+      "data-slot": "app-sidebar-separator",
+      className: cn("bg-sidebar-border", className),
+      ...props
+    }
+  );
+}
+function NavigationGroup({
+  label,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs4(
+    "section",
+    {
+      "data-slot": "navigation-group",
+      className: cn("flex min-w-0 flex-col gap-1", className),
+      children: [
+        label ? /* @__PURE__ */ jsx5("div", { className: "px-2 pb-1 pt-2 text-[0.6875rem] font-medium uppercase tracking-normal text-sidebar-foreground/52 group-data-[sidebar-state=collapsed]/shell:hidden", children: label }) : null,
+        /* @__PURE__ */ jsx5("div", { className: "flex min-w-0 flex-col gap-1", children })
+      ]
+    }
+  );
+}
+function navigationItemClasses(active) {
+  return cn(
+    "flex h-11 min-w-0 items-center gap-2 rounded-[var(--ds-radius-control)] px-2 text-sm font-medium text-sidebar-foreground/78 outline-none transition-colors duration-150 lg:h-[var(--ds-sidebar-item-height)]",
+    "hover:bg-sidebar-accent hover:text-sidebar-foreground",
+    "focus-visible:ring-[3px] focus-visible:ring-ring/35",
+    "disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
+    "group-data-[sidebar-state=collapsed]/shell:justify-center group-data-[sidebar-state=collapsed]/shell:px-0",
+    "[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-[1.75]",
+    active && "bg-sidebar-active text-sidebar-active-foreground shadow-[inset_2px_0_0_var(--sidebar-active-indicator)] hover:bg-sidebar-active hover:text-sidebar-active-foreground"
+  );
+}
+function NavigationItem({
+  asChild = false,
+  active = false,
+  tooltip,
+  type,
+  className,
+  children,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  const { sidebarState, sidebarSide, isMobile } = useAppShell();
+  const item = /* @__PURE__ */ jsx5(
+    Comp,
+    {
+      "data-slot": "navigation-item",
+      "data-active": active ? "true" : void 0,
+      type: asChild ? void 0 : type ?? "button",
+      className: cn(navigationItemClasses(active), className),
+      ...props,
+      children
+    }
+  );
+  if (!tooltip) {
+    return item;
+  }
+  return /* @__PURE__ */ jsxs4(Tooltip, { children: [
+    /* @__PURE__ */ jsx5(TooltipTrigger, { asChild: true, children: item }),
+    /* @__PURE__ */ jsx5(
+      TooltipContent,
+      {
+        side: sidebarSide === "left" ? "right" : "left",
+        align: "center",
+        hidden: sidebarState !== "collapsed" || isMobile,
+        children: tooltip
+      }
+    )
+  ] });
+}
+function NavigationSubItem({
+  asChild = false,
+  active = false,
+  className,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "a";
+  return /* @__PURE__ */ jsx5(
+    Comp,
+    {
+      "data-slot": "navigation-sub-item",
+      "data-active": active ? "true" : void 0,
+      className: cn(
+        "flex h-11 min-w-0 items-center gap-2 rounded-[var(--ds-radius-control)] px-2 text-sm text-sidebar-foreground/72 outline-none transition-colors duration-150 lg:h-[calc(var(--ds-sidebar-item-height)-0.25rem)]",
+        "hover:bg-sidebar-accent hover:text-sidebar-foreground focus-visible:ring-[3px] focus-visible:ring-ring/35",
+        "group-data-[sidebar-state=collapsed]/shell:hidden [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-[1.75]",
+        active && "bg-sidebar-active text-sidebar-active-foreground shadow-[inset_2px_0_0_var(--sidebar-active-indicator)] hover:bg-sidebar-active hover:text-sidebar-active-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function NavigationSubList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      "data-slot": "navigation-sub-list",
+      className: cn(
+        "ml-4 flex min-w-0 flex-col gap-1 border-l border-sidebar-border pl-2 group-data-[sidebar-state=collapsed]/shell:hidden",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}) {
+  const { toggleSidebar } = useAppShell();
+  return /* @__PURE__ */ jsxs4(
+    Button,
+    {
+      "data-slot": "sidebar-trigger",
+      type: "button",
+      variant: "ghost",
+      size: "icon",
+      className: cn("shrink-0", className),
+      onClick: (event) => {
+        onClick?.(event);
+        toggleSidebar();
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx5(PanelLeftIcon, {}),
+        /* @__PURE__ */ jsx5("span", { className: "sr-only", children: "Toggle navigation" })
+      ]
+    }
+  );
+}
+function MainRegion({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      "data-slot": "main-region",
+      className: cn(
+        "flex min-h-svh min-w-0 w-full flex-1 flex-col transition-[padding] duration-200 ease-linear",
+        "group-data-[sidebar-side=left]/shell:lg:pl-[var(--ds-app-sidebar-width)] group-data-[sidebar-side=right]/shell:lg:pr-[var(--ds-app-sidebar-width)]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TopBar({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(
+    "header",
+    {
+      "data-slot": "top-bar",
+      className: cn(
+        "sticky top-0 z-10 flex min-h-14 shrink-0 items-center justify-between gap-3 border-b border-border-subtle bg-background/96 px-3 backdrop-blur md:px-4",
+        "supports-[backdrop-filter]:bg-background/88",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function PageFrame({
+  width = "full",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(
+    "main",
+    {
+      "data-slot": "page-frame",
+      "data-width": width,
+      className: cn(
+        "min-w-0 w-full flex-1 px-3 py-[var(--ds-space-section)] md:px-[var(--ds-space-page)]",
+        width === "wide" && "mx-auto w-full max-w-[86rem]",
+        width === "focused" && "mx-auto w-full max-w-[64rem]",
+        width === "reading" && "mx-auto w-full max-w-[48rem]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function PageContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      "data-slot": "page-content",
+      className: cn("flex min-w-0 flex-col gap-[var(--ds-space-section)]", className),
+      ...props
+    }
+  );
+}
+function PageBoundary({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      "data-slot": "page-boundary",
+      className: cn(
+        "rounded-[var(--ds-radius-surface)] border border-border-subtle bg-surface p-[var(--ds-surface-padding)]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function InspectorRegion({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(
+    "aside",
+    {
+      "data-slot": "inspector-region",
+      className: cn(
+        "w-full border-l border-border-subtle bg-surface md:w-[20rem] xl:w-[24rem]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/patterns/activity-list.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function ActivityList({ className, ...props }) {
+  return /* @__PURE__ */ jsx6("div", { "data-slot": "activity-list", className: cn("divide-y divide-border-subtle", className), ...props });
+}
+function ActivityItem({ icon, title, description, metadata, status, className, ...props }) {
+  return /* @__PURE__ */ jsxs5("div", { "data-slot": "activity-item", className: cn("grid grid-cols-[auto_minmax(0,1fr)_auto] gap-3 py-3", className), ...props, children: [
+    /* @__PURE__ */ jsx6("div", { className: "flex size-8 items-center justify-center rounded-md bg-neutral-background text-neutral-foreground [&_svg]:size-4", children: icon }),
+    /* @__PURE__ */ jsxs5("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx6("div", { className: "text-sm font-medium text-foreground", children: title }),
+      description ? /* @__PURE__ */ jsx6("div", { className: "mt-0.5 text-sm text-muted-foreground", children: description }) : null,
+      metadata ? /* @__PURE__ */ jsx6("div", { className: "mt-1 text-[var(--ds-metadata)] text-muted-foreground", children: metadata }) : null
+    ] }),
+    status ? /* @__PURE__ */ jsx6("div", { className: "shrink-0", children: status }) : null
+  ] });
+}
+
+// src/patterns/confirmation-dialog.tsx
+import * as React3 from "react";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function ConfirmationDialog({ trigger, title, description, children, confirmLabel = "Confirm", cancelLabel = "Cancel", confirmVariant = "destructive", pending = false, onConfirm, onError }) {
+  const [open, setOpen] = React3.useState(false);
+  const [confirming, setConfirming] = React3.useState(false);
+  const isPending = pending || confirming;
+  async function confirm() {
+    if (isPending) {
+      return;
+    }
+    setConfirming(true);
+    try {
+      await onConfirm();
+      setOpen(false);
+    } catch (error) {
+      onError?.(error);
+    } finally {
+      setConfirming(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs6(Dialog, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx7(DialogTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxs6(DialogContent, { size: "small", children: [
+      /* @__PURE__ */ jsxs6(DialogHeader, { children: [
+        /* @__PURE__ */ jsx7(DialogTitle, { children: title }),
+        /* @__PURE__ */ jsx7(DialogDescription, { children: description })
+      ] }),
+      /* @__PURE__ */ jsx7(DialogBody, { children }),
+      /* @__PURE__ */ jsxs6(DialogFooter, { children: [
+        /* @__PURE__ */ jsx7(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx7(Button, { type: "button", variant: "outline", disabled: isPending, children: cancelLabel }) }),
+        /* @__PURE__ */ jsx7(Button, { type: "button", variant: confirmVariant, disabled: isPending, onClick: confirm, children: isPending ? "Working..." : confirmLabel })
+      ] })
+    ] })
+  ] });
+}
+
+// src/patterns/code-block.tsx
+import * as React4 from "react";
+import { Check, Copy } from "lucide-react";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function CodeBlock({
+  snippets,
+  defaultValue,
+  copyLabel = "Copy code",
+  className,
+  ...props
+}) {
+  const initialValue = defaultValue ?? snippets[0]?.value ?? "";
+  const [activeValue, setActiveValue] = React4.useState(initialValue);
+  const [copiedValue, setCopiedValue] = React4.useState(null);
+  const [copyError, setCopyError] = React4.useState(false);
+  const copyStatusId = React4.useId();
+  const activeSnippet = snippets.find((snippet) => snippet.value === activeValue) ?? snippets[0];
+  if (!activeSnippet) return null;
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      "data-slot": "code-block",
+      className: cn("overflow-hidden rounded-lg border border-border-subtle bg-surface", className),
+      ...props,
+      children: /* @__PURE__ */ jsxs7(Tabs, { value: activeSnippet.value, onValueChange: setActiveValue, variant: "segmented", className: "gap-0", children: [
+        /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between gap-3 border-b border-border-subtle bg-surface-muted px-3 py-2", children: [
+          /* @__PURE__ */ jsx8(TabsList, { variant: "segmented", size: "compact", "aria-label": "Code language", children: snippets.map((snippet) => /* @__PURE__ */ jsx8(TabsTrigger, { value: snippet.value, children: snippet.label }, snippet.value)) }),
+          /* @__PURE__ */ jsxs7(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              onClick: async () => {
+                try {
+                  await navigator.clipboard.writeText(activeSnippet.code);
+                  setCopiedValue(activeSnippet.value);
+                  setCopyError(false);
+                } catch {
+                  setCopiedValue(null);
+                  setCopyError(true);
+                }
+              },
+              "aria-describedby": copyStatusId,
+              children: [
+                copiedValue === activeSnippet.value ? /* @__PURE__ */ jsx8(Check, {}) : /* @__PURE__ */ jsx8(Copy, {}),
+                copiedValue === activeSnippet.value ? "Copied" : copyLabel
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx8("span", { id: copyStatusId, className: "sr-only", role: "status", "aria-live": "polite", children: copyError ? "Code could not be copied. Select the code and copy it manually." : copiedValue === activeSnippet.value ? "Code copied to clipboard." : "" })
+        ] }),
+        snippets.map((snippet) => /* @__PURE__ */ jsx8(TabsContent, { value: snippet.value, className: "m-0", children: /* @__PURE__ */ jsx8("pre", { className: "max-h-[32rem] overflow-auto p-4 text-sm leading-6", children: /* @__PURE__ */ jsx8("code", { children: snippet.code }) }) }, snippet.value))
+      ] })
+    }
+  );
+}
+
+// src/patterns/inventory-surface.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function InventorySurface({ className, ...props }) {
+  return /* @__PURE__ */ jsx9(
+    Card,
+    {
+      "data-slot": "inventory-surface",
+      className: cn("gap-0 overflow-hidden py-0", className),
+      ...props
+    }
+  );
+}
+function InventoryDesktop({ className, ...props }) {
+  return /* @__PURE__ */ jsx9("div", { "data-slot": "inventory-desktop", className: cn("hidden lg:block", className), ...props });
+}
+function InventoryMobile({ className, ...props }) {
+  return /* @__PURE__ */ jsx9("div", { "data-slot": "inventory-mobile", className: cn("divide-y divide-border-subtle lg:hidden", className), ...props });
+}
+
+// src/patterns/metric-band.tsx
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+function MetricBand({ columns = 4, className, ...props }) {
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      "data-slot": "metric-band",
+      "data-columns": columns,
+      className: cn(
+        "grid grid-cols-2 border-b border-border-subtle",
+        columns === 2 && "lg:grid-cols-2",
+        columns === 3 && "lg:grid-cols-3",
+        columns === 4 && "lg:grid-cols-4",
+        columns === 5 && "lg:grid-cols-5",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MetricBandItem({
+  label,
+  value,
+  detail,
+  icon,
+  iconClassName,
+  loading = false,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      "data-slot": "metric-band-item",
+      className: cn(
+        "flex min-h-28 flex-col items-start gap-3 border-r border-border-subtle p-4 last:border-r-0 sm:flex-row sm:items-center sm:gap-4 sm:p-5",
+        "[&:nth-child(-n+2)]:border-b lg:[&:nth-child(-n+2)]:border-b-0",
+        className
+      ),
+      ...props,
+      children: [
+        icon ? /* @__PURE__ */ jsx10(
+          "div",
+          {
+            className: cn(
+              "flex size-10 shrink-0 items-center justify-center rounded-md bg-neutral-background text-neutral-foreground [&_svg]:size-5",
+              iconClassName
+            ),
+            children: icon
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs8("div", { className: "grid min-w-0 gap-1", children: [
+          /* @__PURE__ */ jsx10("div", { className: "text-sm leading-snug text-muted-foreground", children: label }),
+          loading ? /* @__PURE__ */ jsx10(Skeleton, { className: "h-7 w-14" }) : /* @__PURE__ */ jsx10("div", { className: "text-2xl font-semibold tracking-tight", children: value ?? 0 }),
+          detail ? /* @__PURE__ */ jsx10("div", { className: "text-[var(--ds-metadata)] leading-snug text-muted-foreground", children: detail }) : null
+        ] })
+      ]
+    }
+  );
+}
+
+// src/patterns/page-header.tsx
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+function PageHeader({
+  title,
+  description,
+  status,
+  metadata,
+  actions,
+  action,
+  actionNode,
+  className,
+  ...props
+}) {
+  const resolvedActions = actions ?? actionNode ?? (action ? /* @__PURE__ */ jsx11(
+    "a",
+    {
+      className: "inline-flex h-[var(--ds-control-height)] items-center justify-center gap-2 whitespace-nowrap rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground shadow-xs outline-none transition-colors hover:bg-accent-hover focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
+      href: action.href,
+      children: action.label
+    }
+  ) : null);
+  return /* @__PURE__ */ jsxs9(
+    "header",
+    {
+      "data-slot": "page-header",
+      className: cn("flex flex-col gap-3 border-b border-border-subtle bg-background px-5 py-4 lg:flex-row lg:items-start lg:justify-between", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs9("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsxs9("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ jsx11("h1", { className: "truncate text-[length:var(--ds-page-title)] font-semibold leading-tight", children: title }),
+            status
+          ] }),
+          description ? /* @__PURE__ */ jsx11("p", { className: "mt-1 max-w-3xl text-sm text-muted-foreground", children: description }) : null,
+          metadata ? /* @__PURE__ */ jsx11("div", { className: "mt-2 text-[var(--ds-metadata)] text-muted-foreground", children: metadata }) : null
+        ] }),
+        resolvedActions ? /* @__PURE__ */ jsx11("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: resolvedActions }) : null
+      ]
+    }
+  );
+}
+
+// src/patterns/page-toolbar.tsx
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+function PageToolbar({
+  search,
+  filters,
+  viewControls,
+  bulkActions,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      "data-slot": "page-toolbar",
+      className: cn("grid gap-2 border-b border-border-subtle bg-background px-5 py-3 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs10("div", { className: "flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-center", children: [
+          search ? /* @__PURE__ */ jsx12("div", { className: "min-w-0 flex-1 sm:min-w-48 sm:max-w-sm", children: search }) : null,
+          filters ? /* @__PURE__ */ jsx12("div", { className: "flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:flex-wrap sm:items-center", children: filters }) : null
+        ] }),
+        /* @__PURE__ */ jsxs10("div", { className: "flex min-h-[var(--ds-control-height)] flex-wrap items-center gap-2 lg:justify-end", children: [
+          bulkActions ? /* @__PURE__ */ jsx12("div", { "data-slot": "page-toolbar-bulk-actions", className: "contents", children: bulkActions }) : null,
+          viewControls,
+          children
+        ] })
+      ]
+    }
+  );
+}
+
+// src/patterns/preference-controls.tsx
+import * as React5 from "react";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+var APPEARANCE_KEY = "conscia-appearance:v1";
+var DENSITY_KEY = "conscia-density:v1";
+var PREFERENCE_EVENT = "conscia-preferences";
+var volatilePreferences = /* @__PURE__ */ new Map();
+function readPreference(key, fallback, allowedValues) {
+  if (typeof window === "undefined") {
+    return fallback;
+  }
+  try {
+    const value = window.localStorage.getItem(key) ?? volatilePreferences.get(key);
+    return value && allowedValues.includes(value) ? value : fallback;
+  } catch {
+    const value = volatilePreferences.get(key);
+    return value && allowedValues.includes(value) ? value : fallback;
+  }
+}
+function writePreference(key, value) {
+  volatilePreferences.set(key, value);
+  try {
+    window.localStorage.setItem(key, value);
+  } catch {
+  }
+  window.dispatchEvent(new Event(PREFERENCE_EVENT));
+}
+function useStoredPreference(key, fallback, allowedValues) {
+  return React5.useSyncExternalStore(
+    (onStoreChange) => {
+      window.addEventListener("storage", onStoreChange);
+      window.addEventListener(PREFERENCE_EVENT, onStoreChange);
+      return () => {
+        window.removeEventListener("storage", onStoreChange);
+        window.removeEventListener(PREFERENCE_EVENT, onStoreChange);
+      };
+    },
+    () => readPreference(key, fallback, allowedValues),
+    () => fallback
+  );
+}
+function useConsciaPreferences() {
+  const appearance = useStoredPreference(
+    APPEARANCE_KEY,
+    "system",
+    appearanceOptions
+  );
+  const density = useStoredPreference(
+    DENSITY_KEY,
+    "comfortable",
+    densityOptions
+  );
+  return { appearance, density };
+}
+function DesignSystemPreferenceSync() {
+  const { appearance, density } = useConsciaPreferences();
+  React5.useEffect(() => {
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const sync = () => applyConsciaPreferences(
+      document.documentElement,
+      appearance,
+      density,
+      media.matches
+    );
+    sync();
+    media.addEventListener("change", sync);
+    return () => media.removeEventListener("change", sync);
+  }, [appearance, density]);
+  return null;
+}
+function AppearanceControl({ className }) {
+  const { appearance } = useConsciaPreferences();
+  return /* @__PURE__ */ jsx13(
+    SegmentedControl,
+    {
+      className,
+      label: "Appearance",
+      value: appearance,
+      values: appearanceOptions,
+      onChange: (value) => writePreference(APPEARANCE_KEY, value)
+    }
+  );
+}
+function DensityControl({ className }) {
+  const { density } = useConsciaPreferences();
+  return /* @__PURE__ */ jsx13(
+    SegmentedControl,
+    {
+      className,
+      label: "Density",
+      value: density,
+      values: densityOptions,
+      onChange: (value) => writePreference(DENSITY_KEY, value)
+    }
+  );
+}
+function DesignPreferenceControls({ className }) {
+  return /* @__PURE__ */ jsxs11("div", { className: cn("flex flex-col gap-3 text-sm", className), children: [
+    /* @__PURE__ */ jsx13(AppearanceControl, {}),
+    /* @__PURE__ */ jsx13(DensityControl, {})
+  ] });
+}
+function SegmentedControl({
+  className,
+  label,
+  value,
+  values,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs11("fieldset", { className: cn("flex flex-col gap-2", className), children: [
+    /* @__PURE__ */ jsx13("legend", { className: "text-[var(--ds-metadata)] font-medium text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx13("div", { className: "inline-flex rounded-[var(--ds-radius-control)] bg-muted p-1", children: values.map((item) => /* @__PURE__ */ jsx13(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": value === item,
+        suppressHydrationWarning: true,
+        onClick: () => onChange(item),
+        className: "h-7 rounded-[calc(var(--ds-radius-control)-2px)] px-2.5 text-[var(--ds-metadata)] font-medium capitalize text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-pressed:bg-background aria-pressed:text-foreground aria-pressed:shadow-xs",
+        children: item
+      },
+      item
+    )) })
+  ] });
+}
+
+// src/patterns/provider-mark.tsx
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+function ProviderMark({ name, shortName, description, size = "default", className, ...props }) {
+  return /* @__PURE__ */ jsxs12("div", { "data-slot": "provider-mark", className: cn("flex min-w-0 items-center gap-3", className), ...props, children: [
+    /* @__PURE__ */ jsx14(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: cn(
+          "flex shrink-0 items-center justify-center rounded-md border border-border-subtle bg-surface-muted font-semibold tracking-tight text-foreground",
+          size === "sm" ? "size-8 text-[10px]" : "size-10 text-xs"
+        ),
+        children: shortName
+      }
+    ),
+    /* @__PURE__ */ jsxs12("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx14("div", { className: "truncate text-sm font-medium text-foreground", children: name }),
+      description ? /* @__PURE__ */ jsx14("div", { className: "mt-0.5 truncate text-[var(--ds-metadata)] text-muted-foreground", children: description }) : null
+    ] })
+  ] });
+}
+
+// src/patterns/resource-detail.tsx
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+function ResourceSummary({
+  variant = "plain",
+  title,
+  description,
+  status,
+  metadata,
+  actions,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs13(
+    "section",
+    {
+      "data-slot": "resource-summary",
+      className: cn(
+        "px-5 py-4",
+        variant === "plain" && "border-b border-border-subtle bg-background",
+        variant === "surface" && "rounded-[var(--ds-radius-surface)] border border-border-subtle bg-surface",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between", children: [
+          /* @__PURE__ */ jsxs13("div", { className: "min-w-0", children: [
+            title || status ? /* @__PURE__ */ jsxs13("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
+              title ? /* @__PURE__ */ jsx15("h2", { className: "truncate text-[var(--ds-section-title)] font-semibold", children: title }) : null,
+              status
+            ] }) : null,
+            description ? /* @__PURE__ */ jsx15("p", { className: "mt-1 max-w-3xl text-sm text-muted-foreground", children: description }) : null,
+            metadata ? /* @__PURE__ */ jsx15("div", { className: "mt-2 text-[var(--ds-metadata)] text-muted-foreground", children: metadata }) : null
+          ] }),
+          actions ? /* @__PURE__ */ jsx15("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: actions }) : null
+        ] }),
+        children ? /* @__PURE__ */ jsx15("div", { className: "mt-4", children }) : null
+      ]
+    }
+  );
+}
+function DetailSections({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx15(
+    "div",
+    {
+      "data-slot": "detail-sections",
+      className: cn("flex flex-col gap-[var(--ds-space-section)]", className),
+      ...props
+    }
+  );
+}
+function DetailSection({
+  variant = "surface",
+  title,
+  description,
+  actions,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs13(
+    "section",
+    {
+      "data-slot": "detail-section",
+      className: cn(
+        variant === "surface" && "rounded-[var(--ds-radius-surface)] border border-border-subtle bg-surface p-[var(--ds-surface-padding)]",
+        variant === "open" && "border-b border-border-subtle pb-[var(--ds-space-section)]",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between", children: [
+          /* @__PURE__ */ jsxs13("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx15("h2", { className: "text-[var(--ds-section-title)] font-semibold", children: title }),
+            description ? /* @__PURE__ */ jsx15("p", { className: "mt-1 max-w-3xl text-sm text-muted-foreground", children: description }) : null
+          ] }),
+          actions ? /* @__PURE__ */ jsx15("div", { className: "flex shrink-0 items-center gap-2", children: actions }) : null
+        ] }),
+        children ? /* @__PURE__ */ jsx15("div", { className: "mt-4", children }) : null
+      ]
+    }
+  );
+}
+function KeyValueList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx15(
+    "dl",
+    {
+      "data-slot": "key-value-list",
+      className: cn("grid gap-3 text-sm", className),
+      ...props
+    }
+  );
+}
+function KeyValueItem({
+  label,
+  value,
+  breakValue = false
+}) {
+  return /* @__PURE__ */ jsxs13("div", { "data-slot": "key-value-item", className: "flex justify-between gap-4", children: [
+    /* @__PURE__ */ jsx15("dt", { className: "text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx15(
+      "dd",
+      {
+        className: cn(
+          "text-right font-medium",
+          breakValue && "break-all"
+        ),
+        children: value
+      }
+    )
+  ] });
+}
+
+// src/patterns/sidebar-navigation.tsx
+import * as React6 from "react";
+import { ChevronRight as ChevronRight2 } from "lucide-react";
+import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+function isSection(entry) {
+  return "items" in entry;
+}
+function readOpenSections(storageKey) {
+  if (!storageKey || typeof window === "undefined") {
+    return {};
+  }
+  try {
+    const storedValue = window.localStorage.getItem(storageKey);
+    if (!storedValue) {
+      return {};
+    }
+    const parsedValue = JSON.parse(storedValue);
+    return typeof parsedValue === "object" && parsedValue !== null ? parsedValue : {};
+  } catch {
+    return {};
+  }
+}
+function SidebarNavigation({
+  entries,
+  renderLink,
+  onNavigate,
+  storageKey,
+  className
+}) {
+  const { isMobile, sidebarSide, sidebarState } = useAppShell();
+  const [openSections, setOpenSections] = React6.useState({});
+  const storageReady = React6.useRef(false);
+  React6.useEffect(() => {
+    storageReady.current = false;
+    const storedSections = readOpenSections(storageKey);
+    queueMicrotask(() => {
+      storageReady.current = true;
+      setOpenSections(storedSections);
+    });
+  }, [storageKey]);
+  React6.useEffect(() => {
+    if (!storageReady.current || !storageKey || !entries.some(isSection)) {
+      return;
+    }
+    try {
+      window.localStorage.setItem(storageKey, JSON.stringify(openSections));
+    } catch {
+    }
+  }, [entries, openSections, storageKey]);
+  const handleNavigate = React6.useCallback(() => {
+    onNavigate?.();
+  }, [onNavigate]);
+  return /* @__PURE__ */ jsx16(
+    "nav",
+    {
+      "data-slot": "sidebar-navigation",
+      "aria-label": "Primary navigation",
+      className: cn("flex flex-col gap-1", className),
+      children: entries.map((entry) => {
+        if (!isSection(entry)) {
+          return /* @__PURE__ */ jsx16(
+            NavigationGroup,
+            {
+              className: entry.startsSection ? "mt-2" : void 0,
+              children: /* @__PURE__ */ jsx16(NavigationItem, { asChild: true, active: entry.active, tooltip: entry.label, children: renderLink(entry, {
+                "aria-current": entry.active ? "page" : void 0,
+                "aria-label": entry.label,
+                onClick: handleNavigate,
+                children: /* @__PURE__ */ jsxs14(Fragment3, { children: [
+                  entry.icon,
+                  /* @__PURE__ */ jsx16("span", { className: "truncate group-data-[sidebar-state=collapsed]/shell:hidden", children: entry.label })
+                ] })
+              }) })
+            },
+            entry.id
+          );
+        }
+        const sectionOpen = (openSections[entry.id] ?? false) || entry.active;
+        if (sidebarState === "collapsed" && !isMobile) {
+          return /* @__PURE__ */ jsxs14(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx16(
+              NavigationGroup,
+              {
+                className: entry.startsSection ? "mt-2" : void 0,
+                children: /* @__PURE__ */ jsx16(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs14(
+                  NavigationItem,
+                  {
+                    active: entry.active,
+                    "aria-label": `${entry.label} menu`,
+                    children: [
+                      entry.icon,
+                      /* @__PURE__ */ jsx16("span", { className: "sr-only", children: entry.label })
+                    ]
+                  }
+                ) })
+              }
+            ),
+            /* @__PURE__ */ jsxs14(
+              DropdownMenuContent,
+              {
+                side: sidebarSide === "left" ? "right" : "left",
+                align: "start",
+                sideOffset: 8,
+                className: "min-w-56 rounded-[var(--ds-radius-surface)] p-1.5",
+                children: [
+                  /* @__PURE__ */ jsx16(DropdownMenuLabel, { className: "px-2 py-1.5 font-semibold text-muted-foreground", children: entry.label }),
+                  /* @__PURE__ */ jsx16(DropdownMenuGroup, { children: entry.items.map((item) => /* @__PURE__ */ jsx16(
+                    DropdownMenuItem,
+                    {
+                      asChild: true,
+                      className: cn(
+                        "min-h-9 cursor-pointer rounded-[var(--ds-radius-control)] [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-[1.75]",
+                        item.active && "bg-selection-background text-selection-foreground shadow-[inset_2px_0_0_var(--selection-indicator)] focus:bg-selection-background focus:text-selection-foreground"
+                      ),
+                      children: renderLink(item, {
+                        "aria-current": item.active ? "page" : void 0,
+                        "aria-label": item.label,
+                        onClick: handleNavigate,
+                        children: /* @__PURE__ */ jsxs14(Fragment3, { children: [
+                          item.icon,
+                          /* @__PURE__ */ jsx16("span", { className: "truncate", children: item.label })
+                        ] })
+                      })
+                    },
+                    item.id
+                  )) })
+                ]
+              }
+            )
+          ] }, entry.id);
+        }
+        return /* @__PURE__ */ jsx16(
+          Collapsible,
+          {
+            open: sectionOpen,
+            onOpenChange: (open) => setOpenSections((current) => ({
+              ...current,
+              [entry.id]: open
+            })),
+            className: cn(
+              "group/collapsible",
+              entry.startsSection && "mt-2"
+            ),
+            children: /* @__PURE__ */ jsxs14(NavigationGroup, { children: [
+              /* @__PURE__ */ jsx16(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs14(
+                NavigationItem,
+                {
+                  active: entry.active,
+                  tooltip: entry.label,
+                  "aria-label": entry.label,
+                  "aria-expanded": sectionOpen,
+                  children: [
+                    entry.icon,
+                    /* @__PURE__ */ jsx16("span", { className: "truncate group-data-[sidebar-state=collapsed]/shell:hidden", children: entry.label }),
+                    /* @__PURE__ */ jsx16(ChevronRight2, { className: "ml-auto transition-transform duration-150 ease-out group-data-[sidebar-state=collapsed]/shell:hidden group-data-[state=open]/collapsible:rotate-90" })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx16(
+                CollapsibleContent,
+                {
+                  "data-slot": "sidebar-collapsible-content",
+                  className: "overflow-hidden",
+                  children: /* @__PURE__ */ jsx16(NavigationSubList, { children: entry.items.map((item) => /* @__PURE__ */ jsx16(
+                    NavigationSubItem,
+                    {
+                      asChild: true,
+                      active: item.active,
+                      children: renderLink(item, {
+                        "aria-current": item.active ? "page" : void 0,
+                        "aria-label": item.label,
+                        onClick: handleNavigate,
+                        children: /* @__PURE__ */ jsxs14(Fragment3, { children: [
+                          item.icon,
+                          /* @__PURE__ */ jsx16("span", { className: "truncate", children: item.label })
+                        ] })
+                      })
+                    },
+                    item.id
+                  )) })
+                }
+              )
+            ] })
+          },
+          entry.id
+        );
+      })
+    }
+  );
+}
+
+// src/patterns/state-views.tsx
+import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+function StateView({ title, description, action, icon, className, ...props }) {
+  return /* @__PURE__ */ jsxs15(
+    "div",
+    {
+      "data-slot": "state-view",
+      className: cn("flex min-h-72 flex-col items-center justify-center gap-3 border-b px-6 py-12 text-center", className),
+      ...props,
+      children: [
+        icon ? /* @__PURE__ */ jsx17("div", { className: "flex size-10 items-center justify-center rounded-md bg-neutral-background text-neutral-foreground [&_svg]:size-5", children: icon }) : null,
+        /* @__PURE__ */ jsx17("h2", { className: "text-base font-semibold", children: title }),
+        description ? /* @__PURE__ */ jsx17("p", { className: "max-w-md text-sm text-muted-foreground", children: description }) : null,
+        action ? /* @__PURE__ */ jsx17("div", { className: "mt-1", children: action }) : null
+      ]
+    }
+  );
+}
+function LoadingRows({
+  rows = 6,
+  columns = 5
+}) {
+  return /* @__PURE__ */ jsx17("div", { "data-slot": "loading-rows", className: "border-b", children: Array.from({ length: rows }).map((_, index) => /* @__PURE__ */ jsx17(
+    "div",
+    {
+      className: "grid h-[var(--ds-row-height)] items-center gap-4 border-b px-5 last:border-b-0",
+      style: { gridTemplateColumns: `2fr repeat(${Math.max(columns - 1, 1)}, minmax(5rem, 1fr))` },
+      children: Array.from({ length: columns }).map((_2, columnIndex) => /* @__PURE__ */ jsx17(
+        "div",
+        {
+          className: cn(
+            "h-3 rounded bg-muted",
+            columnIndex === 0 ? "w-44" : "w-24"
+          )
+        },
+        columnIndex
+      ))
+    },
+    index
+  )) });
+}
+function ErrorState({ title, description, action, className, ...props }) {
+  return /* @__PURE__ */ jsx17(
+    StateView,
+    {
+      title,
+      description,
+      action,
+      className: cn("bg-danger-background/60", className),
+      role: "alert",
+      "aria-live": "assertive",
+      ...props
+    }
+  );
+}
+
+// src/patterns/value-meter.tsx
+import * as React7 from "react";
+import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+function ValueMeter({
+  label,
+  value,
+  maximum,
+  valueLabel,
+  detail,
+  tone = "neutral",
+  className,
+  ...props
+}) {
+  const labelId = React7.useId();
+  const hasMaximum = typeof maximum === "number" && maximum > 0;
+  const boundedValue = hasMaximum ? Math.min(maximum, Math.max(0, value)) : value;
+  const percentage = hasMaximum ? boundedValue / maximum * 100 : null;
+  const resolvedValueLabel = valueLabel ?? (hasMaximum ? `${boundedValue} of ${maximum}` : String(boundedValue));
+  return /* @__PURE__ */ jsxs16(
+    "div",
+    {
+      "data-slot": "value-meter",
+      className: cn("grid gap-2", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs16("div", { className: "flex items-baseline justify-between gap-4 text-sm", children: [
+          /* @__PURE__ */ jsx18("span", { id: labelId, className: "font-medium text-foreground", children: label }),
+          /* @__PURE__ */ jsx18("span", { className: "text-muted-foreground", children: resolvedValueLabel })
+        ] }),
+        percentage === null ? null : /* @__PURE__ */ jsx18(
+          "div",
+          {
+            role: "progressbar",
+            "aria-labelledby": labelId,
+            "aria-valuemin": 0,
+            "aria-valuemax": maximum ?? void 0,
+            "aria-valuenow": boundedValue,
+            className: "h-2 overflow-hidden rounded-full bg-surface-muted",
+            children: /* @__PURE__ */ jsx18(
+              "div",
+              {
+                className: cn(
+                  "h-full rounded-full bg-neutral-foreground transition-[width]",
+                  tone === "success" && "bg-success-foreground",
+                  tone === "warning" && "bg-warning-foreground",
+                  tone === "danger" && "bg-danger-foreground"
+                ),
+                style: { width: `${percentage}%` }
+              }
+            )
+          }
+        ),
+        detail ? /* @__PURE__ */ jsx18("div", { className: "text-xs text-muted-foreground", children: detail }) : null
+      ]
+    }
+  );
+}
+
+export {
+  PaginationControls,
+  DataTable,
+  EntityTable,
+  DetailBackLink,
+  useAppShell,
+  AppShell,
+  AppSidebar,
+  AppSidebarHeader,
+  AppSidebarContent,
+  AppSidebarFooter,
+  ProductIdentity,
+  SidebarSeparator,
+  NavigationGroup,
+  NavigationItem,
+  NavigationSubItem,
+  NavigationSubList,
+  SidebarTrigger,
+  MainRegion,
+  TopBar,
+  PageFrame,
+  PageContent,
+  PageBoundary,
+  InspectorRegion,
+  ActivityList,
+  ActivityItem,
+  ConfirmationDialog,
+  CodeBlock,
+  InventorySurface,
+  InventoryDesktop,
+  InventoryMobile,
+  MetricBand,
+  MetricBandItem,
+  PageHeader,
+  PageToolbar,
+  useConsciaPreferences,
+  DesignSystemPreferenceSync,
+  AppearanceControl,
+  DensityControl,
+  DesignPreferenceControls,
+  ProviderMark,
+  ResourceSummary,
+  DetailSections,
+  DetailSection,
+  KeyValueList,
+  KeyValueItem,
+  SidebarNavigation,
+  StateView,
+  LoadingRows,
+  ErrorState,
+  ValueMeter
+};
+//# sourceMappingURL=chunk-5MGPU2JE.js.map