@usetheo/ui 0.13.0 → 0.13.1

package/dist/chunk-BP4RQSX7.js

@@ -0,0 +1,200 @@
+"use client";
+import { Table } from './chunk-KHBXI6AV.js';
+import { Skeleton } from './chunk-CGWIOIEO.js';
+import { Pagination } from './chunk-ZPURFK4C.js';
+import { DropdownMenu } from './chunk-SXKGWHAM.js';
+import { EmptyState } from './chunk-RPZMFGYI.js';
+import { cn } from './chunk-EWDN56AS.js';
+import { ChevronDown, ChevronRight, MoreHorizontal } from 'lucide-react';
+import { useState, useMemo, Fragment } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function compareValues(a, b) {
+  if (a === b) return 0;
+  if (a === null || a === void 0) return -1;
+  if (b === null || b === void 0) return 1;
+  if (typeof a === "number" && typeof b === "number") return a - b;
+  return String(a).localeCompare(String(b));
+}
+function DataTable(props) {
+  const {
+    data,
+    columns,
+    rowKey,
+    stickyHeader = true,
+    expandable,
+    expandMode = "multiple",
+    rowActions,
+    pagination,
+    defaultSort,
+    sort: controlledSort,
+    onSortChange,
+    loading = false,
+    emptyState,
+    className
+  } = props;
+  const isControlledSort = onSortChange !== void 0;
+  const [uncontrolledSort, setUncontrolledSort] = useState(
+    defaultSort ?? null
+  );
+  const sort = isControlledSort ? controlledSort ?? null : uncontrolledSort;
+  const isControlledPage = pagination?.controlledPage !== void 0;
+  const [uncontrolledPage, setUncontrolledPage] = useState(0);
+  const currentPage = isControlledPage ? pagination?.controlledPage ?? 0 : uncontrolledPage;
+  const effectivePageSize = Math.max(1, pagination?.pageSize ?? 10);
+  const [expanded, setExpanded] = useState(/* @__PURE__ */ new Set());
+  function handleSort(columnKey) {
+    let nextSort;
+    if (sort?.key !== columnKey) {
+      nextSort = { key: columnKey, direction: "asc" };
+    } else if (sort.direction === "asc") {
+      nextSort = { key: columnKey, direction: "desc" };
+    } else {
+      nextSort = null;
+    }
+    if (isControlledSort) {
+      onSortChange?.(nextSort);
+    } else {
+      setUncontrolledSort(nextSort);
+      if (!isControlledPage) setUncontrolledPage(0);
+    }
+  }
+  function handlePageChange(page) {
+    const zeroIdx = page - 1;
+    if (isControlledPage) {
+      pagination?.onPageChange?.(zeroIdx);
+    } else {
+      setUncontrolledPage(zeroIdx);
+    }
+  }
+  function toggleExpand(key) {
+    if (expandMode === "single") {
+      setExpanded((prev) => prev.has(key) ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([key]));
+    } else {
+      setExpanded((prev) => {
+        const next = new Set(prev);
+        if (next.has(key)) {
+          next.delete(key);
+        } else {
+          next.add(key);
+        }
+        return next;
+      });
+    }
+  }
+  const sortedData = useMemo(() => {
+    if (isControlledSort || sort === null) return data;
+    const col = columns.find((c) => c.key === sort.key);
+    if (!col) return data;
+    const sorted = [...data].sort((a, b) => {
+      const aVal = col.render ? null : a[sort.key];
+      const bVal = col.render ? null : b[sort.key];
+      const cmp = compareValues(aVal, bVal);
+      return sort.direction === "asc" ? cmp : -cmp;
+    });
+    return sorted;
+  }, [data, sort, isControlledSort, columns]);
+  const visibleData = useMemo(() => {
+    if (!pagination) return sortedData;
+    if (isControlledPage) return sortedData;
+    const start = currentPage * effectivePageSize;
+    return sortedData.slice(start, start + effectivePageSize);
+  }, [sortedData, pagination, isControlledPage, currentPage, effectivePageSize]);
+  const extraCols = (expandable ? 1 : 0) + (rowActions ? 1 : 0);
+  const expandedColSpan = columns.length + extraCols;
+  const totalCols = columns.length + extraCols;
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { "data-slot": "data-table", className: cn("w-full", className), children: /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx(Table.Header, { className: stickyHeader ? "sticky top-0 bg-card" : void 0, children: /* @__PURE__ */ jsxs(Table.Row, { children: [
+        expandable ? /* @__PURE__ */ jsx(Table.HeaderCell, { children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Expand" }) }) : null,
+        columns.map((col) => /* @__PURE__ */ jsx(Table.HeaderCell, { align: col.align, children: col.label }, col.key)),
+        rowActions ? /* @__PURE__ */ jsx(Table.HeaderCell, { children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Actions" }) }) : null
+      ] }) }),
+      /* @__PURE__ */ jsx(Table.Body, { children: Array.from({ length: 5 }, (_, i) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows are positional placeholders
+        /* @__PURE__ */ jsx(Table.Row, { children: Array.from({ length: totalCols }, (_2, j) => (
+          // biome-ignore lint/suspicious/noArrayIndexKey: skeleton cells are positional placeholders
+          /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }) }, `s-${i}-${j}`)
+        )) }, `skeleton-${i}`)
+      )) })
+    ] }) });
+  }
+  if (sortedData.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), children: emptyState ?? /* @__PURE__ */ jsx(EmptyState, { title: "No data", description: "There's nothing here yet." }) });
+  }
+  const totalPages = pagination ? Math.ceil(sortedData.length / effectivePageSize) : 1;
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
+    /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx(Table.Header, { className: stickyHeader ? "sticky top-0 z-10 bg-card" : void 0, children: /* @__PURE__ */ jsxs(Table.Row, { children: [
+        expandable ? /* @__PURE__ */ jsx(Table.HeaderCell, { children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Expand" }) }) : null,
+        columns.map((col) => {
+          const isSortable = col.sortable === true;
+          const isActive = sort?.key === col.key;
+          return /* @__PURE__ */ jsx(
+            Table.HeaderCell,
+            {
+              align: col.align,
+              onSort: isSortable ? () => handleSort(col.key) : void 0,
+              sortDirection: isSortable ? isActive ? sort?.direction : "none" : void 0,
+              style: col.width ? { width: col.width } : void 0,
+              children: col.label
+            },
+            col.key
+          );
+        }),
+        rowActions ? /* @__PURE__ */ jsx(Table.HeaderCell, { children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Actions" }) }) : null
+      ] }) }),
+      /* @__PURE__ */ jsx(Table.Body, { children: visibleData.map((row) => {
+        const key = rowKey(row);
+        const expandedContent = expandable ? expandable(row) : null;
+        const isExpandable = expandedContent !== null && expandedContent !== void 0;
+        const isExpanded = expanded.has(key);
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(Table.Row, { children: [
+            expandable ? /* @__PURE__ */ jsx(Table.Cell, { children: isExpandable ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => toggleExpand(key),
+                "aria-expanded": isExpanded,
+                "aria-controls": `expanded-${key}`,
+                "aria-label": isExpanded ? "Collapse row" : "Expand row",
+                className: "inline-flex items-center justify-center rounded-md p-0.5 hover:bg-muted",
+                children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true", className: "size-4" }) : /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true", className: "size-4" })
+              }
+            ) : null }) : null,
+            columns.map((col) => /* @__PURE__ */ jsx(Table.Cell, { align: col.align, className: col.className, children: col.render ? col.render(row) : String(row[col.key] ?? "") }, col.key)),
+            rowActions ? /* @__PURE__ */ jsx(Table.Cell, { align: "right", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+              /* @__PURE__ */ jsx(
+                DropdownMenu.Trigger,
+                {
+                  "aria-label": "Row actions",
+                  className: cn(
+                    "inline-flex size-7 items-center justify-center rounded-md",
+                    "text-muted-foreground hover:bg-muted hover:text-foreground",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                  ),
+                  children: /* @__PURE__ */ jsx(MoreHorizontal, { "aria-hidden": "true", className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx(DropdownMenu.Content, { align: "end", children: rowActions(row) })
+            ] }) }) : null
+          ] }),
+          isExpanded && isExpandable ? /* @__PURE__ */ jsx("tr", { id: `expanded-${key}`, children: /* @__PURE__ */ jsx("td", { colSpan: expandedColSpan, className: "bg-muted/30 p-4", children: expandedContent }) }) : null
+        ] }, key);
+      }) })
+    ] }),
+    pagination && totalPages > 1 ? /* @__PURE__ */ jsx("div", { className: "mt-4 flex items-center justify-end", children: /* @__PURE__ */ jsx(
+      Pagination,
+      {
+        currentPage: currentPage + 1,
+        totalPages,
+        onPageChange: handlePageChange
+      }
+    ) }) : null
+  ] });
+}
+
+export { DataTable };
+//# sourceMappingURL=chunk-BP4RQSX7.js.map
+//# sourceMappingURL=chunk-BP4RQSX7.js.map

package/dist/chunk-BP4RQSX7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/data-table/data-table.tsx"],"names":["_"],"mappings":"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","file":"chunk-BP4RQSX7.js","sourcesContent":["\"use client\";\n\nimport { ChevronDown, ChevronRight, MoreHorizontal } from \"lucide-react\";\nimport { Fragment, useMemo, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport { DropdownMenu } from \"../../primitives/dropdown-menu/index.js\";\nimport { EmptyState } from \"../../primitives/empty-state/index.js\";\nimport { Pagination } from \"../../primitives/pagination/index.js\";\nimport { Skeleton } from \"../../primitives/skeleton/index.js\";\nimport { Table } from \"../../primitives/table/index.js\";\n\n/**\n * DataTable — generic, sortable, expandable composite over `<Table>`.\n *\n * Adds operator-grade entity-list patterns on top of the plain Table\n * primitive: sortable headers, sticky header, expandable rows\n * (multi-row by default), row action menus (Dropdown), client-side\n * pagination, loading skeleton rows, empty state. Both sort and\n * pagination support controlled OR uncontrolled mode (consumer\n * passes onSortChange / onPageChange to take over state).\n *\n * @example\n *   <DataTable\n *     columns={[\n *       { key: \"name\", label: \"Name\", sortable: true },\n *       { key: \"status\", label: \"Status\" },\n *     ]}\n *     data={domains}\n *     rowKey={(d) => d.id}\n *     expandable={(d) => d.status === \"pending\" ? <DnsRecords domain={d} /> : null}\n *     rowActions={(d) => (\n *       <>\n *         <DropdownMenu.Item onSelect={() => editDomain(d)}>Edit</DropdownMenu.Item>\n *         <DropdownMenu.Item onSelect={() => deleteDomain(d)}>Delete</DropdownMenu.Item>\n *       </>\n *     )}\n *   />\n */\nexport interface DataTableColumn<T> {\n  key: string;\n  label: ReactNode;\n  align?: \"left\" | \"center\" | \"right\";\n  sortable?: boolean;\n  width?: string;\n  render?: (row: T) => ReactNode;\n  className?: string;\n}\n\nexport interface DataTableSort {\n  key: string;\n  direction: \"asc\" | \"desc\";\n}\n\nexport interface DataTableProps<T> {\n  data: T[];\n  columns: DataTableColumn<T>[];\n  rowKey: (row: T) => string;\n  stickyHeader?: boolean;\n  expandable?: (row: T) => ReactNode | null;\n  expandMode?: \"single\" | \"multiple\";\n  rowActions?: (row: T) => ReactNode;\n  pagination?: {\n    pageSize: number;\n    controlledPage?: number;\n    onPageChange?: (page: number) => void;\n  } | null;\n  defaultSort?: DataTableSort;\n  sort?: DataTableSort | null;\n  onSortChange?: (sort: DataTableSort | null) => void;\n  loading?: boolean;\n  emptyState?: ReactNode;\n  className?: string;\n}\n\nfunction compareValues(a: unknown, b: unknown): number {\n  if (a === b) return 0;\n  if (a === null || a === undefined) return -1;\n  if (b === null || b === undefined) return 1;\n  if (typeof a === \"number\" && typeof b === \"number\") return a - b;\n  return String(a).localeCompare(String(b));\n}\n\nfunction DataTable<T>(props: DataTableProps<T>): ReactNode {\n  const {\n    data,\n    columns,\n    rowKey,\n    stickyHeader = true,\n    expandable,\n    expandMode = \"multiple\",\n    rowActions,\n    pagination,\n    defaultSort,\n    sort: controlledSort,\n    onSortChange,\n    loading = false,\n    emptyState,\n    className,\n  } = props;\n\n  const isControlledSort = onSortChange !== undefined;\n  const [uncontrolledSort, setUncontrolledSort] = useState<DataTableSort | null>(\n    defaultSort ?? null,\n  );\n  const sort = isControlledSort ? (controlledSort ?? null) : uncontrolledSort;\n\n  const isControlledPage = pagination?.controlledPage !== undefined;\n  const [uncontrolledPage, setUncontrolledPage] = useState(0);\n  const currentPage = isControlledPage ? (pagination?.controlledPage ?? 0) : uncontrolledPage;\n\n  // EC-9: clamp pageSize to >= 1 to avoid divide-by-zero / infinite render\n  const effectivePageSize = Math.max(1, pagination?.pageSize ?? 10);\n\n  const [expanded, setExpanded] = useState<Set<string>>(new Set());\n\n  function handleSort(columnKey: string) {\n    // Cycle: none → asc → desc → none\n    let nextSort: DataTableSort | null;\n    if (sort?.key !== columnKey) {\n      nextSort = { key: columnKey, direction: \"asc\" };\n    } else if (sort.direction === \"asc\") {\n      nextSort = { key: columnKey, direction: \"desc\" };\n    } else {\n      nextSort = null;\n    }\n    if (isControlledSort) {\n      onSortChange?.(nextSort);\n    } else {\n      setUncontrolledSort(nextSort);\n      // EC-8: sort change resets pagination to page 0\n      if (!isControlledPage) setUncontrolledPage(0);\n    }\n  }\n\n  function handlePageChange(page: number) {\n    // Pagination uses 1-indexed; internal state 0-indexed\n    const zeroIdx = page - 1;\n    if (isControlledPage) {\n      pagination?.onPageChange?.(zeroIdx);\n    } else {\n      setUncontrolledPage(zeroIdx);\n    }\n  }\n\n  function toggleExpand(key: string) {\n    if (expandMode === \"single\") {\n      setExpanded((prev) => (prev.has(key) ? new Set() : new Set([key])));\n    } else {\n      setExpanded((prev) => {\n        const next = new Set(prev);\n        if (next.has(key)) {\n          next.delete(key);\n        } else {\n          next.add(key);\n        }\n        return next;\n      });\n    }\n  }\n\n  // Apply client-side sort in uncontrolled mode\n  const sortedData = useMemo(() => {\n    if (isControlledSort || sort === null) return data;\n    const col = columns.find((c) => c.key === sort.key);\n    if (!col) return data;\n    const sorted = [...data].sort((a, b) => {\n      const aVal = col.render\n        ? null\n        : (a as Record<string, unknown>)[sort.key as keyof T as string];\n      const bVal = col.render\n        ? null\n        : (b as Record<string, unknown>)[sort.key as keyof T as string];\n      const cmp = compareValues(aVal, bVal);\n      return sort.direction === \"asc\" ? cmp : -cmp;\n    });\n    return sorted;\n  }, [data, sort, isControlledSort, columns]);\n\n  // Apply client-side pagination in uncontrolled mode\n  const visibleData = useMemo(() => {\n    if (!pagination) return sortedData;\n    if (isControlledPage) return sortedData; // consumer pre-sliced\n    const start = currentPage * effectivePageSize;\n    return sortedData.slice(start, start + effectivePageSize);\n  }, [sortedData, pagination, isControlledPage, currentPage, effectivePageSize]);\n\n  // EC-1 fix: compute colSpan accounting for chevron + actions columns\n  const extraCols = (expandable ? 1 : 0) + (rowActions ? 1 : 0);\n  const expandedColSpan = columns.length + extraCols;\n  const totalCols = columns.length + extraCols;\n\n  // Loading state (EC-7: loading > empty)\n  if (loading) {\n    return (\n      <div data-slot=\"data-table\" className={cn(\"w-full\", className)}>\n        <Table>\n          <Table.Header className={stickyHeader ? \"sticky top-0 bg-card\" : undefined}>\n            <Table.Row>\n              {expandable ? (\n                <Table.HeaderCell>\n                  <span className=\"sr-only\">Expand</span>\n                </Table.HeaderCell>\n              ) : null}\n              {columns.map((col) => (\n                <Table.HeaderCell key={col.key} align={col.align}>\n                  {col.label}\n                </Table.HeaderCell>\n              ))}\n              {rowActions ? (\n                <Table.HeaderCell>\n                  <span className=\"sr-only\">Actions</span>\n                </Table.HeaderCell>\n              ) : null}\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            {Array.from({ length: 5 }, (_, i) => (\n              // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows are positional placeholders\n              <Table.Row key={`skeleton-${i}`}>\n                {Array.from({ length: totalCols }, (_, j) => (\n                  // biome-ignore lint/suspicious/noArrayIndexKey: skeleton cells are positional placeholders\n                  <Table.Cell key={`s-${i}-${j}`}>\n                    <Skeleton className=\"h-4 w-full\" />\n                  </Table.Cell>\n                ))}\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </div>\n    );\n  }\n\n  // Empty state (after loading check)\n  if (sortedData.length === 0) {\n    return (\n      <div className={cn(\"w-full\", className)}>\n        {emptyState ?? <EmptyState title=\"No data\" description=\"There's nothing here yet.\" />}\n      </div>\n    );\n  }\n\n  const totalPages = pagination ? Math.ceil(sortedData.length / effectivePageSize) : 1;\n\n  return (\n    <div className={cn(\"w-full\", className)}>\n      <Table>\n        <Table.Header className={stickyHeader ? \"sticky top-0 z-10 bg-card\" : undefined}>\n          <Table.Row>\n            {expandable ? (\n              <Table.HeaderCell>\n                <span className=\"sr-only\">Expand</span>\n              </Table.HeaderCell>\n            ) : null}\n            {columns.map((col) => {\n              const isSortable = col.sortable === true;\n              const isActive = sort?.key === col.key;\n              return (\n                <Table.HeaderCell\n                  key={col.key}\n                  align={col.align}\n                  onSort={isSortable ? () => handleSort(col.key) : undefined}\n                  sortDirection={isSortable ? (isActive ? sort?.direction : \"none\") : undefined}\n                  style={col.width ? { width: col.width } : undefined}\n                >\n                  {col.label}\n                </Table.HeaderCell>\n              );\n            })}\n            {rowActions ? (\n              <Table.HeaderCell>\n                <span className=\"sr-only\">Actions</span>\n              </Table.HeaderCell>\n            ) : null}\n          </Table.Row>\n        </Table.Header>\n        <Table.Body>\n          {visibleData.map((row) => {\n            const key = rowKey(row);\n            const expandedContent = expandable ? expandable(row) : null;\n            const isExpandable = expandedContent !== null && expandedContent !== undefined;\n            const isExpanded = expanded.has(key);\n            return (\n              <Fragment key={key}>\n                <Table.Row>\n                  {expandable ? (\n                    <Table.Cell>\n                      {isExpandable ? (\n                        <button\n                          type=\"button\"\n                          onClick={() => toggleExpand(key)}\n                          aria-expanded={isExpanded}\n                          aria-controls={`expanded-${key}`}\n                          aria-label={isExpanded ? \"Collapse row\" : \"Expand row\"}\n                          className=\"inline-flex items-center justify-center rounded-md p-0.5 hover:bg-muted\"\n                        >\n                          {isExpanded ? (\n                            <ChevronDown aria-hidden=\"true\" className=\"size-4\" />\n                          ) : (\n                            <ChevronRight aria-hidden=\"true\" className=\"size-4\" />\n                          )}\n                        </button>\n                      ) : null}\n                    </Table.Cell>\n                  ) : null}\n                  {columns.map((col) => (\n                    <Table.Cell key={col.key} align={col.align} className={col.className}>\n                      {col.render\n                        ? col.render(row)\n                        : String((row as Record<string, unknown>)[col.key] ?? \"\")}\n                    </Table.Cell>\n                  ))}\n                  {rowActions ? (\n                    <Table.Cell align=\"right\">\n                      <DropdownMenu>\n                        <DropdownMenu.Trigger\n                          aria-label=\"Row actions\"\n                          className={cn(\n                            \"inline-flex size-7 items-center justify-center rounded-md\",\n                            \"text-muted-foreground hover:bg-muted hover:text-foreground\",\n                            \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n                          )}\n                        >\n                          <MoreHorizontal aria-hidden=\"true\" className=\"size-4\" />\n                        </DropdownMenu.Trigger>\n                        <DropdownMenu.Content align=\"end\">{rowActions(row)}</DropdownMenu.Content>\n                      </DropdownMenu>\n                    </Table.Cell>\n                  ) : null}\n                </Table.Row>\n                {isExpanded && isExpandable ? (\n                  <tr id={`expanded-${key}`}>\n                    <td colSpan={expandedColSpan} className=\"bg-muted/30 p-4\">\n                      {expandedContent}\n                    </td>\n                  </tr>\n                ) : null}\n              </Fragment>\n            );\n          })}\n        </Table.Body>\n      </Table>\n      {pagination && totalPages > 1 ? (\n        <div className=\"mt-4 flex items-center justify-end\">\n          <Pagination\n            currentPage={currentPage + 1}\n            totalPages={totalPages}\n            onPageChange={handlePageChange}\n          />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nexport { DataTable };\n"]}

package/dist/chunk-BPJ3RN3U.js

@@ -0,0 +1,112 @@
+"use client";
+import { EmptyState } from './chunk-RPZMFGYI.js';
+import { Card } from './chunk-AXNJFBYX.js';
+import { ActionBar } from './chunk-ZEFOXF2I.js';
+import { cn } from './chunk-EWDN56AS.js';
+import { AlertCircle, Loader2 } from 'lucide-react';
+import { forwardRef, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var PageShell = forwardRef(
+  ({
+    title,
+    description,
+    onTitleChange,
+    primaryAction,
+    search,
+    onFilterClick,
+    loading = false,
+    loadingNode,
+    error,
+    empty,
+    children,
+    className
+  }, ref) => {
+    useEffect(() => {
+      onTitleChange?.(title);
+    }, [title, onTitleChange]);
+    const hasActionBar = search !== void 0 || primaryAction !== void 0 || onFilterClick !== void 0;
+    let content;
+    if (loading) {
+      content = loadingNode ?? /* @__PURE__ */ jsxs(Card, { className: "flex items-center justify-center gap-3 p-12 text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(Loader2, { "aria-hidden": "true", className: "size-5 animate-spin" }),
+        /* @__PURE__ */ jsx("span", { className: "font-sans text-body-sm", children: "Loading\u2026" })
+      ] });
+    } else if (error) {
+      content = /* @__PURE__ */ jsxs(Card, { className: "flex flex-col items-center gap-3 p-8 text-center", children: [
+        /* @__PURE__ */ jsx(AlertCircle, { "aria-hidden": "true", className: "size-8 text-destructive" }),
+        /* @__PURE__ */ jsx("p", { className: "font-sans text-body-sm text-foreground", children: error.message }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          error.onRetry ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: error.onRetry,
+              className: cn(
+                "inline-flex items-center rounded-md border border-border/40 px-3 py-1.5",
+                "font-sans text-body-sm text-foreground",
+                "transition-colors hover:bg-muted"
+              ),
+              children: "Retry"
+            }
+          ) : null,
+          error.docsHref ? /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: error.docsHref,
+              className: "font-sans text-body-sm text-primary hover:underline",
+              children: "View docs"
+            }
+          ) : null
+        ] })
+      ] });
+    } else if (empty) {
+      const emptyAction = empty.action;
+      content = /* @__PURE__ */ jsx(
+        EmptyState,
+        {
+          icon: empty.icon,
+          title: empty.title,
+          description: empty.description,
+          action: emptyAction ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: emptyAction.onClick,
+              className: cn(
+                "inline-flex items-center rounded-md bg-primary px-3 py-1.5",
+                "font-medium font-sans text-body-sm text-primary-foreground",
+                "transition-colors hover:bg-primary-deep"
+              ),
+              children: emptyAction.label
+            }
+          ) : void 0
+        }
+      );
+    } else {
+      content = children;
+    }
+    return /* @__PURE__ */ jsxs(
+      "main",
+      {
+        "data-slot": "page-shell",
+        ref,
+        "aria-busy": loading || void 0,
+        className: cn("flex flex-col gap-6", className),
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx("h1", { className: "font-display font-semibold text-display-sm text-foreground tracking-tight", children: title }),
+            description ? /* @__PURE__ */ jsx("p", { className: "font-sans text-body-md text-muted-foreground", children: description }) : null
+          ] }),
+          hasActionBar ? /* @__PURE__ */ jsx(ActionBar, { search, primaryAction, onFilterClick }) : null,
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-6", children: content })
+        ]
+      }
+    );
+  }
+);
+PageShell.displayName = "PageShell";
+
+export { PageShell };
+//# sourceMappingURL=chunk-BPJ3RN3U.js.map
+//# sourceMappingURL=chunk-BPJ3RN3U.js.map

package/dist/chunk-BPJ3RN3U.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/page-shell/page-shell.tsx"],"names":[],"mappings":"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","file":"chunk-BPJ3RN3U.js","sourcesContent":["\"use client\";\n\nimport { AlertCircle, Loader2 } from \"lucide-react\";\nimport { forwardRef, useEffect } from \"react\";\nimport type { ElementType, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport { ActionBar } from \"../../primitives/action-bar/index.js\";\nimport { Card } from \"../../primitives/card/index.js\";\nimport { EmptyState } from \"../../primitives/empty-state/index.js\";\n\n/**\n * PageShell — page-level scaffold composite.\n *\n * Renders title + optional description + optional ActionBar, then\n * one of four mutually-exclusive content states:\n *   1. loading (highest precedence)\n *   2. error\n *   3. empty\n *   4. children (default)\n *\n * Scope-narrowed per Brief #5 D3: PageShell does NOT manage\n * `document.title`. Use the optional `onTitleChange` callback to\n * wire your own hook (e.g. useSetPageTitle, react-helmet,\n * next/head).\n *\n * @example\n *   <PageShell\n *     title=\"Domains\"\n *     description=\"Custom domains and DNS verification.\"\n *     search={{ placeholder: \"Search…\", value: q, onChange: setQ }}\n *     primaryAction={{ label: \"Add domain\", icon: Plus, onClick: openModal }}\n *     loading={isLoading}\n *     error={error ? { message: error.message, onRetry: refetch } : undefined}\n *     empty={data?.length === 0 ? { title: \"No domains yet\" } : undefined}\n *   >\n *     <DataTable columns={…} data={data} />\n *   </PageShell>\n */\nexport interface PageShellProps {\n  title: string;\n  description?: ReactNode;\n  /** Optional callback invoked when `title` changes — wire to your own document.title hook. */\n  onTitleChange?: (title: string) => void;\n  primaryAction?: {\n    label: ReactNode;\n    icon?: ElementType;\n    onClick: () => void;\n    loading?: boolean;\n  };\n  search?: {\n    placeholder: string;\n    value: string;\n    onChange: (v: string) => void;\n  };\n  onFilterClick?: () => void;\n  loading?: boolean;\n  /** Custom loading UI. Defaults to a centered spinner card. */\n  loadingNode?: ReactNode;\n  error?: {\n    message: string;\n    onRetry?: () => void;\n    docsHref?: string;\n  };\n  empty?: {\n    icon?: ElementType;\n    title: string;\n    description?: ReactNode;\n    action?: { label: string; onClick: () => void };\n  };\n  children?: ReactNode;\n  className?: string;\n}\n\nconst PageShell = forwardRef<HTMLElement, PageShellProps>(\n  (\n    {\n      title,\n      description,\n      onTitleChange,\n      primaryAction,\n      search,\n      onFilterClick,\n      loading = false,\n      loadingNode,\n      error,\n      empty,\n      children,\n      className,\n    },\n    ref,\n  ) => {\n    useEffect(() => {\n      onTitleChange?.(title);\n    }, [title, onTitleChange]);\n\n    const hasActionBar =\n      search !== undefined || primaryAction !== undefined || onFilterClick !== undefined;\n\n    // State precedence: loading > error > empty > children\n    let content: ReactNode;\n    if (loading) {\n      content = loadingNode ?? (\n        <Card className=\"flex items-center justify-center gap-3 p-12 text-muted-foreground\">\n          <Loader2 aria-hidden=\"true\" className=\"size-5 animate-spin\" />\n          <span className=\"font-sans text-body-sm\">Loading…</span>\n        </Card>\n      );\n    } else if (error) {\n      content = (\n        <Card className=\"flex flex-col items-center gap-3 p-8 text-center\">\n          <AlertCircle aria-hidden=\"true\" className=\"size-8 text-destructive\" />\n          <p className=\"font-sans text-body-sm text-foreground\">{error.message}</p>\n          <div className=\"flex items-center gap-3\">\n            {error.onRetry ? (\n              <button\n                type=\"button\"\n                onClick={error.onRetry}\n                className={cn(\n                  \"inline-flex items-center rounded-md border border-border/40 px-3 py-1.5\",\n                  \"font-sans text-body-sm text-foreground\",\n                  \"transition-colors hover:bg-muted\",\n                )}\n              >\n                Retry\n              </button>\n            ) : null}\n            {error.docsHref ? (\n              <a\n                href={error.docsHref}\n                className=\"font-sans text-body-sm text-primary hover:underline\"\n              >\n                View docs\n              </a>\n            ) : null}\n          </div>\n        </Card>\n      );\n    } else if (empty) {\n      const emptyAction = empty.action;\n      content = (\n        <EmptyState\n          icon={empty.icon as Parameters<typeof EmptyState>[0][\"icon\"]}\n          title={empty.title}\n          description={empty.description}\n          action={\n            emptyAction ? (\n              <button\n                type=\"button\"\n                onClick={emptyAction.onClick}\n                className={cn(\n                  \"inline-flex items-center rounded-md bg-primary px-3 py-1.5\",\n                  \"font-medium font-sans text-body-sm text-primary-foreground\",\n                  \"transition-colors hover:bg-primary-deep\",\n                )}\n              >\n                {emptyAction.label}\n              </button>\n            ) : undefined\n          }\n        />\n      );\n    } else {\n      content = children;\n    }\n\n    return (\n      <main\n        data-slot=\"page-shell\"\n        ref={ref}\n        aria-busy={loading || undefined}\n        className={cn(\"flex flex-col gap-6\", className)}\n      >\n        <header className=\"flex flex-col gap-1\">\n          <h1 className=\"font-display font-semibold text-display-sm text-foreground tracking-tight\">\n            {title}\n          </h1>\n          {description ? (\n            <p className=\"font-sans text-body-md text-muted-foreground\">{description}</p>\n          ) : null}\n        </header>\n        {hasActionBar ? (\n          <ActionBar search={search} primaryAction={primaryAction} onFilterClick={onFilterClick} />\n        ) : null}\n        {/* Content slot: `flex flex-col gap-6` matches the outer <main> gap so\n         * direct children (e.g. multiple <Card>s, a <Table>, an inline <Alert>)\n         * automatically receive consistent section spacing. Without this,\n         * pages with 2+ top-level children would render them flush against\n         * each other — a regression observed in dashboard /memory landing\n         * (5 sibling sections collided). Pages that already wrap their content\n         * in a single grid/div are unaffected (gap only applies between siblings). */}\n        <div className=\"flex flex-col gap-6\">{content}</div>\n      </main>\n    );\n  },\n);\nPageShell.displayName = \"PageShell\";\n\nexport { PageShell };\n"]}

package/dist/chunk-BSF4Y4UT.js

@@ -0,0 +1,77 @@
+import { cn } from './chunk-EWDN56AS.js';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { Pencil, ChevronDown, Check } from 'lucide-react';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var IntentSelector = forwardRef(
+  ({ className, value, options, onChange, ...props }, ref) => {
+    const current = options.find((o) => o.id === value) ?? options[0];
+    const Icon = current?.icon ?? Pencil;
+    return /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
+      /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          "data-slot": "intent-selector",
+          ref,
+          type: "button",
+          className: cn(
+            "inline-flex h-8 items-center gap-2 rounded-full border border-border/60 bg-card px-3",
+            "font-medium font-sans text-body-sm text-foreground",
+            "transition-colors duration-base ease-out-soft",
+            "hover:bg-muted",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+            className
+          ),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx(Icon, { className: "size-3.5 text-primary", "aria-hidden": "true" }),
+            current?.label ?? "Select intent",
+            /* @__PURE__ */ jsx(ChevronDown, { className: "size-3 text-muted-foreground", "aria-hidden": "true" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(
+        DropdownMenu.Content,
+        {
+          sideOffset: 6,
+          align: "start",
+          className: cn(
+            "z-50 min-w-[16rem] overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-md",
+            "data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:animate-in",
+            "data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:animate-out"
+          ),
+          children: options.map((opt) => {
+            const OptIcon = opt.icon ?? Pencil;
+            return /* @__PURE__ */ jsxs(
+              DropdownMenu.Item,
+              {
+                onSelect: () => onChange?.(opt.id),
+                className: cn(
+                  "flex cursor-pointer items-start gap-3 rounded-md px-2 py-2",
+                  "text-body-sm",
+                  "focus:bg-muted focus:outline-none",
+                  "data-[highlighted]:bg-muted"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(OptIcon, { className: "mt-0.5 size-4 shrink-0 text-primary", "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsxs("span", { className: "flex flex-1 flex-col", children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-medium", children: opt.label }),
+                    opt.description ? /* @__PURE__ */ jsx("span", { className: "text-label text-muted-foreground", children: opt.description }) : null
+                  ] }),
+                  opt.id === value ? /* @__PURE__ */ jsx(Check, { className: "mt-0.5 size-3.5 shrink-0 text-primary" }) : null
+                ]
+              },
+              opt.id
+            );
+          })
+        }
+      ) })
+    ] });
+  }
+);
+IntentSelector.displayName = "IntentSelector";
+
+export { IntentSelector };
+//# sourceMappingURL=chunk-BSF4Y4UT.js.map
+//# sourceMappingURL=chunk-BSF4Y4UT.js.map

package/dist/chunk-BSF4Y4UT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/intent-selector/intent-selector.tsx"],"names":[],"mappings":"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","file":"chunk-BSF4Y4UT.js","sourcesContent":["import * as DropdownMenu from \"@radix-ui/react-dropdown-menu\";\nimport { Check, ChevronDown, Pencil } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ButtonHTMLAttributes } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport type { IconComponent } from \"../../../lib/types.js\";\n\nexport interface IntentOption {\n  id: string;\n  label: string;\n  /** Optional one-liner shown below the label in the menu. */\n  description?: string;\n  /** Optional icon — defaults to a pencil for the trigger if none. */\n  icon?: IconComponent;\n}\n\ninterface IntentSelectorProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\"> {\n  value: string;\n  options: IntentOption[];\n  onChange?: (id: string) => void;\n}\n\n/**\n * IntentSelector — chip dropdown for picking the agent's intent for the next\n * turn (e.g. edit / plan / review). Mirrors ModelSelector: pill trigger +\n * Radix DropdownMenu of options with description and a check on the active.\n */\nconst IntentSelector = forwardRef<HTMLButtonElement, IntentSelectorProps>(\n  ({ className, value, options, onChange, ...props }, ref) => {\n    const current = options.find((o) => o.id === value) ?? options[0];\n    const Icon = current?.icon ?? Pencil;\n    return (\n      <DropdownMenu.Root>\n        <DropdownMenu.Trigger asChild>\n          <button\n            data-slot=\"intent-selector\"\n            ref={ref}\n            type=\"button\"\n            className={cn(\n              \"inline-flex h-8 items-center gap-2 rounded-full border border-border/60 bg-card px-3\",\n              \"font-medium font-sans text-body-sm text-foreground\",\n              \"transition-colors duration-base ease-out-soft\",\n              \"hover:bg-muted\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n              className,\n            )}\n            {...props}\n          >\n            <Icon className=\"size-3.5 text-primary\" aria-hidden=\"true\" />\n            {current?.label ?? \"Select intent\"}\n            <ChevronDown className=\"size-3 text-muted-foreground\" aria-hidden=\"true\" />\n          </button>\n        </DropdownMenu.Trigger>\n        <DropdownMenu.Portal>\n          <DropdownMenu.Content\n            sideOffset={6}\n            align=\"start\"\n            className={cn(\n              \"z-50 min-w-[16rem] overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-md\",\n              \"data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:animate-in\",\n              \"data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:animate-out\",\n            )}\n          >\n            {options.map((opt) => {\n              const OptIcon = opt.icon ?? Pencil;\n              return (\n                <DropdownMenu.Item\n                  key={opt.id}\n                  onSelect={() => onChange?.(opt.id)}\n                  className={cn(\n                    \"flex cursor-pointer items-start gap-3 rounded-md px-2 py-2\",\n                    \"text-body-sm\",\n                    \"focus:bg-muted focus:outline-none\",\n                    \"data-[highlighted]:bg-muted\",\n                  )}\n                >\n                  <OptIcon className=\"mt-0.5 size-4 shrink-0 text-primary\" aria-hidden=\"true\" />\n                  <span className=\"flex flex-1 flex-col\">\n                    <span className=\"font-medium\">{opt.label}</span>\n                    {opt.description ? (\n                      <span className=\"text-label text-muted-foreground\">{opt.description}</span>\n                    ) : null}\n                  </span>\n                  {opt.id === value ? (\n                    <Check className=\"mt-0.5 size-3.5 shrink-0 text-primary\" />\n                  ) : null}\n                </DropdownMenu.Item>\n              );\n            })}\n          </DropdownMenu.Content>\n        </DropdownMenu.Portal>\n      </DropdownMenu.Root>\n    );\n  },\n);\nIntentSelector.displayName = \"IntentSelector\";\n\nexport { IntentSelector };\n"]}

package/dist/chunk-BWIDDAR7.js

@@ -0,0 +1,86 @@
+import { cn } from './chunk-EWDN56AS.js';
+import { Users, User, BookOpen, Sparkles } from 'lucide-react';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var SOURCE_CONFIG = {
+  builtin: { label: "Built-in", icon: Sparkles, tone: "text-primary" },
+  project: { label: "Project", icon: BookOpen, tone: "text-accent" },
+  user: { label: "User", icon: User, tone: "text-info" },
+  plugin: { label: "Plugin", icon: Users, tone: "text-muted-foreground" }
+};
+var SkillCard = forwardRef(
+  ({ className, skill, onToggle, ...props }, ref) => {
+    const config = SOURCE_CONFIG[skill.source];
+    const Icon = config.icon;
+    const state = skill.state ?? "enabled";
+    const enabled = state === "enabled";
+    return /* @__PURE__ */ jsxs(
+      "article",
+      {
+        "data-slot": "skill-card",
+        ref,
+        className: cn(
+          "grid gap-3 rounded-xl border bg-card p-4",
+          !enabled && "opacity-60",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: "flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: cn("grid size-8 place-items-center rounded-md bg-muted", config.tone), children: /* @__PURE__ */ jsx(Icon, { className: "size-4", "aria-hidden": "true" }) }),
+              /* @__PURE__ */ jsxs("div", { className: "grid", children: [
+                /* @__PURE__ */ jsx("h4", { className: "font-medium font-mono text-body-sm text-foreground", children: skill.name }),
+                /* @__PURE__ */ jsx("span", { className: "font-mono text-label-caps text-muted-foreground uppercase tracking-wider", children: config.label })
+              ] })
+            ] }),
+            onToggle ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => onToggle(skill.id, enabled ? "disabled" : "enabled"),
+                "aria-pressed": enabled,
+                className: cn(
+                  "inline-flex items-center rounded-full border px-2.5 py-0.5",
+                  "font-mono text-label uppercase tracking-wider transition-colors",
+                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  enabled ? "border-success/40 bg-success/15 text-success" : "border-border/40 bg-muted text-muted-foreground"
+                ),
+                children: enabled ? "Enabled" : "Disabled"
+              }
+            ) : null
+          ] }),
+          skill.description ? /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: skill.description }) : null,
+          skill.allowedTools && skill.allowedTools.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-mono text-label text-muted-foreground uppercase tracking-wider", children: "tools:" }),
+            skill.allowedTools.map((tool) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "inline-flex items-center rounded-md bg-muted px-2 py-0.5 font-mono text-foreground text-label",
+                children: tool
+              },
+              tool
+            ))
+          ] }) : null,
+          skill.triggers && skill.triggers.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-mono text-label text-muted-foreground uppercase tracking-wider", children: "triggers:" }),
+            skill.triggers.map((trigger) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "inline-flex items-center rounded-md bg-primary/10 px-2 py-0.5 font-mono text-label text-primary",
+                children: trigger
+              },
+              trigger
+            ))
+          ] }) : null
+        ]
+      }
+    );
+  }
+);
+SkillCard.displayName = "SkillCard";
+
+export { SkillCard };
+//# sourceMappingURL=chunk-BWIDDAR7.js.map
+//# sourceMappingURL=chunk-BWIDDAR7.js.map

package/dist/chunk-BWIDDAR7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/skill-card/skill-card.tsx"],"names":[],"mappings":"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","file":"chunk-BWIDDAR7.js","sourcesContent":["import { BookOpen, Sparkles, User, Users } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport type { IconComponent } from \"../../../lib/types.js\";\nimport type { Mode } from \"../../../types/mode.js\";\n\nexport type SkillSource = \"builtin\" | \"project\" | \"user\" | \"plugin\";\nexport type SkillState = \"enabled\" | \"disabled\";\n\nconst SOURCE_CONFIG: Record<SkillSource, { label: string; icon: IconComponent; tone: string }> = {\n  builtin: { label: \"Built-in\", icon: Sparkles, tone: \"text-primary\" },\n  project: { label: \"Project\", icon: BookOpen, tone: \"text-accent\" },\n  user: { label: \"User\", icon: User, tone: \"text-info\" },\n  plugin: { label: \"Plugin\", icon: Users, tone: \"text-muted-foreground\" },\n};\n\nexport interface Skill {\n  id: string;\n  name: string;\n  description?: ReactNode;\n  /** Where the skill comes from. */\n  source: SkillSource;\n  /** Optional tools the skill is allowed to use (informational). */\n  allowedTools?: string[];\n  /** Optional trigger keywords / patterns for discovery. */\n  triggers?: string[];\n  state?: SkillState;\n  /** Modes this skill is visible in. Omit / empty = global (all modes). */\n  modes?: Mode[];\n}\n\ninterface SkillCardProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onToggle\"> {\n  skill: Skill;\n  onToggle?: (id: string, next: SkillState) => void;\n}\n\n/**\n * SkillCard — single skill entry showing what it does, where it came from,\n * and which tools it needs. Toggle to enable/disable for the current session.\n */\nconst SkillCard = forwardRef<HTMLDivElement, SkillCardProps>(\n  ({ className, skill, onToggle, ...props }, ref) => {\n    const config = SOURCE_CONFIG[skill.source];\n    const Icon = config.icon;\n    const state = skill.state ?? \"enabled\";\n    const enabled = state === \"enabled\";\n    return (\n      <article\n        data-slot=\"skill-card\"\n        ref={ref}\n        className={cn(\n          \"grid gap-3 rounded-xl border bg-card p-4\",\n          !enabled && \"opacity-60\",\n          className,\n        )}\n        {...props}\n      >\n        <header className=\"flex items-start justify-between gap-3\">\n          <div className=\"flex items-center gap-2\">\n            <span className={cn(\"grid size-8 place-items-center rounded-md bg-muted\", config.tone)}>\n              <Icon className=\"size-4\" aria-hidden=\"true\" />\n            </span>\n            <div className=\"grid\">\n              <h4 className=\"font-medium font-mono text-body-sm text-foreground\">{skill.name}</h4>\n              <span className=\"font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n                {config.label}\n              </span>\n            </div>\n          </div>\n          {onToggle ? (\n            <button\n              type=\"button\"\n              onClick={() => onToggle(skill.id, enabled ? \"disabled\" : \"enabled\")}\n              aria-pressed={enabled}\n              className={cn(\n                \"inline-flex items-center rounded-full border px-2.5 py-0.5\",\n                \"font-mono text-label uppercase tracking-wider transition-colors\",\n                \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n                enabled\n                  ? \"border-success/40 bg-success/15 text-success\"\n                  : \"border-border/40 bg-muted text-muted-foreground\",\n              )}\n            >\n              {enabled ? \"Enabled\" : \"Disabled\"}\n            </button>\n          ) : null}\n        </header>\n        {skill.description ? (\n          <p className=\"text-body-sm text-muted-foreground\">{skill.description}</p>\n        ) : null}\n        {skill.allowedTools && skill.allowedTools.length > 0 ? (\n          <div className=\"flex flex-wrap gap-1.5\">\n            <span className=\"font-mono text-label text-muted-foreground uppercase tracking-wider\">\n              tools:\n            </span>\n            {skill.allowedTools.map((tool) => (\n              <span\n                key={tool}\n                className=\"inline-flex items-center rounded-md bg-muted px-2 py-0.5 font-mono text-foreground text-label\"\n              >\n                {tool}\n              </span>\n            ))}\n          </div>\n        ) : null}\n        {skill.triggers && skill.triggers.length > 0 ? (\n          <div className=\"flex flex-wrap gap-1.5\">\n            <span className=\"font-mono text-label text-muted-foreground uppercase tracking-wider\">\n              triggers:\n            </span>\n            {skill.triggers.map((trigger) => (\n              <span\n                key={trigger}\n                className=\"inline-flex items-center rounded-md bg-primary/10 px-2 py-0.5 font-mono text-label text-primary\"\n              >\n                {trigger}\n              </span>\n            ))}\n          </div>\n        ) : null}\n      </article>\n    );\n  },\n);\nSkillCard.displayName = \"SkillCard\";\n\nexport { SkillCard };\n"]}

package/dist/chunk-BYUWQ6OP.js

@@ -0,0 +1,45 @@
+import { cn } from './chunk-EWDN56AS.js';
+import { cva } from 'class-variance-authority';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var inputVariants = cva(
+  [
+    "flex w-full rounded-md border border-input bg-card",
+    "text-foreground placeholder:text-muted-foreground",
+    "transition-[box-shadow,border-color] duration-base ease-out-soft",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "focus-visible:border-primary",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "file:border-0 file:bg-transparent file:font-medium file:text-body-sm"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-8 px-2.5 py-1 text-body-sm",
+        // md: density-tunable via CSS var. Comfortable (default) = 36px.
+        md: "h-[var(--theo-control-h,2.25rem)] px-[var(--theo-control-px,0.875rem)] py-1.5 text-body-sm",
+        lg: "h-11 px-4 py-2.5 text-body-md"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+var Input = forwardRef(
+  ({ className, type = "text", size, ...props }, ref) => /* @__PURE__ */ jsx(
+    "input",
+    {
+      "data-slot": "input",
+      "data-size": size,
+      ref,
+      type,
+      className: cn(inputVariants({ size }), className),
+      ...props
+    }
+  )
+);
+Input.displayName = "Input";
+
+export { Input };
+//# sourceMappingURL=chunk-BYUWQ6OP.js.map
+//# sourceMappingURL=chunk-BYUWQ6OP.js.map