@conscia-labs/design-system 0.3.4 → 0.4.0

package/dist/{chunk-VIVMQAJM.js → chunk-KYH7IZ3Z.js}

@@ -2,7 +2,7 @@ import {
   appearanceOptions,
   applyConsciaPreferences,
   densityOptions
-} from "./chunk-D5LYROOM.js";
+} from "./chunk-YNQWIH6V.js";
 import {
   Button,
   Card,
@@ -52,7 +52,7 @@ import {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger
-} from "./chunk-ZCBZHRTV.js";
+} from "./chunk-RAGHGWLB.js";
 import {
   cn
 } from "./chunk-JU5DQXFC.js";
@@ -623,8 +623,8 @@ function ProductIdentity({
       children: [
         icon ? /* @__PURE__ */ jsx5("div", { className: "flex size-7 shrink-0 items-center justify-center rounded-[var(--ds-radius-control)] bg-sidebar-hover text-sidebar-icon", 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-primary-text", children: label }),
-          description ? /* @__PURE__ */ jsx5("div", { className: "truncate text-[var(--ds-metadata)] leading-4 text-sidebar-metadata-text", children: description }) : null
+          /* @__PURE__ */ jsx5("div", { className: "ds-type-navigation truncate font-semibold text-sidebar-primary-text", children: label }),
+          description ? /* @__PURE__ */ jsx5("div", { className: "ds-type-metadata truncate text-sidebar-metadata-text", children: description }) : null
         ] })
       ]
     }
@@ -665,7 +665,7 @@ function NavigationGroup({
             className: "flex min-h-6 items-center gap-2 px-2 pb-0 pt-2 text-[length:var(--ds-sidebar-group-label-size)] font-semibold uppercase leading-[var(--ds-sidebar-group-label-line-height)] tracking-[0.04em] text-sidebar-group-label group-data-[sidebar-state=collapsed]/shell:hidden",
             children: [
               label,
-              count !== void 0 ? /* @__PURE__ */ jsx5("span", { className: "ml-auto shrink-0 text-[length:var(--ds-metadata)] font-medium normal-case tracking-normal text-sidebar-group-count", children: count }) : null
+              count !== void 0 ? /* @__PURE__ */ jsx5("span", { className: "ds-type-metadata ml-auto shrink-0 font-medium normal-case tracking-normal text-sidebar-group-count", children: count }) : null
             ]
           }
         ) : null,
@@ -676,7 +676,7 @@ function NavigationGroup({
 }
 function navigationItemClasses(active) {
   return cn(
-    "flex min-h-[var(--ds-sidebar-item-height-touch)] min-w-0 cursor-pointer items-center gap-2 rounded-[var(--ds-radius-control)] px-2 text-sm font-medium leading-5 text-sidebar-secondary-text outline-none transition-colors duration-150 lg:h-[var(--ds-sidebar-item-height)] lg:min-h-0",
+    "ds-type-navigation flex min-h-[var(--ds-sidebar-item-height-touch)] min-w-0 cursor-pointer items-center gap-2 rounded-[var(--ds-radius-control)] px-2 font-medium text-sidebar-secondary-text outline-none transition-colors duration-150 lg:h-[var(--ds-sidebar-item-height)] lg:min-h-0",
     "hover:bg-sidebar-hover hover:text-sidebar-primary-text",
     "focus-visible:ring-[3px] focus-visible:ring-sidebar-focus-ring",
     "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-50",
@@ -736,7 +736,7 @@ function NavigationSubItem({
       "data-slot": "navigation-sub-item",
       "data-active": active ? "true" : void 0,
       className: cn(
-        "flex min-h-[var(--ds-sidebar-item-height-touch)] min-w-0 cursor-pointer items-center gap-2 rounded-[var(--ds-radius-control)] px-2 text-sm leading-5 text-sidebar-secondary-text outline-none transition-colors duration-150 lg:h-[calc(var(--ds-sidebar-item-height)-0.25rem)] lg:min-h-0",
+        "ds-type-navigation flex min-h-[var(--ds-sidebar-item-height-touch)] min-w-0 cursor-pointer items-center gap-2 rounded-[var(--ds-radius-control)] px-2 text-sidebar-secondary-text outline-none transition-colors duration-150 lg:h-[calc(var(--ds-sidebar-item-height)-0.25rem)] lg:min-h-0",
         "hover:bg-sidebar-hover hover:text-sidebar-primary-text focus-visible:ring-[3px] focus-visible:ring-sidebar-focus-ring",
         "group-data-[sidebar-state=collapsed]/shell:hidden [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-[1.75] [&>svg]:text-sidebar-icon",
         active && "bg-sidebar-active text-sidebar-active-foreground shadow-[inset_3px_0_0_var(--sidebar-active-indicator)] hover:bg-sidebar-active hover:text-sidebar-active-foreground [&>svg]:text-sidebar-active-foreground",
@@ -832,7 +832,7 @@ function SidebarSearch({
         type: "button",
         "data-slot": "sidebar-search-trigger",
         className: cn(
-          "flex min-h-[var(--ds-sidebar-item-height-touch)] w-full cursor-pointer items-center gap-2 rounded-[var(--ds-radius-control)] px-2 text-left text-sm font-medium leading-5 text-sidebar-secondary-text outline-none transition-colors hover:bg-sidebar-hover hover:text-sidebar-primary-text focus-visible:ring-[3px] focus-visible:ring-sidebar-focus-ring lg:min-h-[var(--ds-sidebar-item-height)]",
+          "ds-type-navigation flex min-h-[var(--ds-sidebar-item-height-touch)] w-full cursor-pointer items-center gap-2 rounded-[var(--ds-radius-control)] px-2 text-left font-medium text-sidebar-secondary-text outline-none transition-colors hover:bg-sidebar-hover hover:text-sidebar-primary-text focus-visible:ring-[3px] focus-visible:ring-sidebar-focus-ring lg:min-h-[var(--ds-sidebar-item-height)]",
           "group-data-[sidebar-state=collapsed]/shell:justify-center group-data-[sidebar-state=collapsed]/shell:px-0",
           className
         ),
@@ -841,7 +841,7 @@ function SidebarSearch({
         children: [
           /* @__PURE__ */ jsx5(Search, { className: "size-4 shrink-0 text-sidebar-icon" }),
           /* @__PURE__ */ jsx5("span", { className: "truncate group-data-[sidebar-state=collapsed]/shell:hidden", children: triggerLabel }),
-          shortcut ? /* @__PURE__ */ jsx5("kbd", { className: "ml-auto rounded border border-sidebar-border px-1.5 py-0.5 text-[length:var(--ds-metadata)] font-medium text-sidebar-metadata-text group-data-[sidebar-state=collapsed]/shell:hidden", children: shortcut }) : null
+          shortcut ? /* @__PURE__ */ jsx5("kbd", { className: "ds-type-metadata ml-auto rounded border border-sidebar-border px-1.5 py-0.5 font-medium text-sidebar-metadata-text group-data-[sidebar-state=collapsed]/shell:hidden", children: shortcut }) : null
         ]
       }
     );
@@ -862,7 +862,7 @@ function SidebarSearch({
           {
             ref: inputRef,
             type: "search",
-            className: "h-auto min-w-0 flex-1 border-0 bg-transparent px-0 py-1 text-sm shadow-none focus-visible:border-0 focus-visible:ring-0",
+            className: "ds-type-control h-auto min-w-0 flex-1 border-0 bg-transparent px-0 py-1 shadow-none focus-visible:border-0 focus-visible:ring-0",
             onKeyDown: (event) => {
               if (event.key === "Escape") {
                 event.preventDefault();
@@ -1000,9 +1000,9 @@ function ActivityItem({ icon, title, description, metadata, status, className, .
   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
+      /* @__PURE__ */ jsx6("div", { className: "ds-type-ui font-medium text-foreground", children: title }),
+      description ? /* @__PURE__ */ jsx6("div", { className: "ds-type-ui mt-0.5 text-muted-foreground", children: description }) : null,
+      metadata ? /* @__PURE__ */ jsx6("div", { className: "ds-type-metadata mt-1 text-muted-foreground", children: metadata }) : null
     ] }),
     status ? /* @__PURE__ */ jsx6("div", { className: "shrink-0", children: status }) : null
   ] });
@@ -1174,9 +1174,9 @@ function MetricBandItem({
           }
         ) : 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 }),
+          /* @__PURE__ */ jsx10("div", { className: "ds-type-ui 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
+          detail ? /* @__PURE__ */ jsx10("div", { className: "ds-type-metadata text-muted-foreground", children: detail }) : null
         ] })
       ]
     }
@@ -1199,7 +1199,7 @@ function PageHeader({
   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",
+      className: "ds-type-button inline-flex h-[var(--ds-control-height)] items-center justify-center gap-2 whitespace-nowrap rounded-md bg-primary px-3 py-2 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
     }
@@ -1213,11 +1213,11 @@ function PageHeader({
       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 }),
+            /* @__PURE__ */ jsx11("h1", { className: "ds-type-page-title truncate", 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
+          description ? /* @__PURE__ */ jsx11("p", { className: "ds-type-ui mt-1 max-w-3xl text-muted-foreground", children: description }) : null,
+          metadata ? /* @__PURE__ */ jsx11("div", { className: "ds-type-metadata mt-2 text-muted-foreground", children: metadata }) : null
         ] }),
         resolvedActions ? /* @__PURE__ */ jsx11("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: resolvedActions }) : null
       ]
@@ -1399,8 +1399,8 @@ function ProviderMark({ name, shortName, description, size = "default", classNam
       }
     ),
     /* @__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
+      /* @__PURE__ */ jsx14("div", { className: "ds-type-ui truncate font-medium text-foreground", children: name }),
+      description ? /* @__PURE__ */ jsx14("div", { className: "ds-type-metadata mt-0.5 truncate text-muted-foreground", children: description }) : null
     ] })
   ] });
 }
@@ -1433,11 +1433,11 @@ function ResourceSummary({
         /* @__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,
+              title ? /* @__PURE__ */ jsx15("h2", { className: "ds-type-section-title truncate", 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
+            description ? /* @__PURE__ */ jsx15("p", { className: "ds-type-ui mt-1 max-w-3xl text-muted-foreground", children: description }) : null,
+            metadata ? /* @__PURE__ */ jsx15("div", { className: "ds-type-metadata mt-2 text-muted-foreground", children: metadata }) : null
           ] }),
           actions ? /* @__PURE__ */ jsx15("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: actions }) : null
         ] }),
@@ -1481,8 +1481,8 @@ function DetailSection({
       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
+            /* @__PURE__ */ jsx15("h2", { className: "ds-type-section-title", children: title }),
+            description ? /* @__PURE__ */ jsx15("p", { className: "ds-type-ui mt-1 max-w-3xl text-muted-foreground", children: description }) : null
           ] }),
           actions ? /* @__PURE__ */ jsx15("div", { className: "flex shrink-0 items-center gap-2", children: actions }) : null
         ] }),
@@ -1499,7 +1499,7 @@ function KeyValueList({
     "dl",
     {
       "data-slot": "key-value-list",
-      className: cn("grid gap-3 text-sm", className),
+      className: cn("ds-type-ui grid gap-3", className),
       ...props
     }
   );
@@ -1729,8 +1729,8 @@ function StateView({ title, description, action, icon, className, ...props }) {
       ...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,
+        /* @__PURE__ */ jsx17("h2", { className: "ds-type-section-title", children: title }),
+        description ? /* @__PURE__ */ jsx17("p", { className: "ds-type-ui max-w-md text-muted-foreground", children: description }) : null,
         action ? /* @__PURE__ */ jsx17("div", { className: "mt-1", children: action }) : null
       ]
     }
@@ -1832,6 +1832,105 @@ function ValueMeter({
   );
 }
 
+// src/patterns/workbench.tsx
+import * as React8 from "react";
+import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+function WorkbenchShell({ className, ...props }) {
+  return /* @__PURE__ */ jsx19("div", { "data-slot": "workbench-shell", className: cn("min-w-0", className), ...props });
+}
+function WorkbenchRail({ variant = "secondary", open = true, className, ...props }) {
+  return /* @__PURE__ */ jsx19(
+    "aside",
+    {
+      "data-slot": "workbench-rail",
+      "data-variant": variant,
+      "data-open": open ? "true" : "false",
+      className: cn("min-w-0", className),
+      ...props
+    }
+  );
+}
+function WorkbenchMain({ className, ...props }) {
+  return /* @__PURE__ */ jsx19("main", { "data-slot": "workbench-main", className: cn("min-w-0", className), ...props });
+}
+function WorkbenchInspector({ className, ...props }) {
+  return /* @__PURE__ */ jsx19("aside", { "data-slot": "workbench-inspector", className: cn("min-w-0", className), ...props });
+}
+function WorkbenchMobileToolbar({ className, ...props }) {
+  return /* @__PURE__ */ jsx19("div", { "data-slot": "workbench-mobile-toolbar", className: cn(className), ...props });
+}
+function WorkbenchBackdrop({ open = true, className, ...props }) {
+  return /* @__PURE__ */ jsx19(
+    "button",
+    {
+      type: "button",
+      "data-slot": "workbench-backdrop",
+      "data-open": open ? "true" : "false",
+      className: cn(className),
+      ...props
+    }
+  );
+}
+function WorkbenchSection({ className, ...props }) {
+  return /* @__PURE__ */ jsx19("section", { "data-slot": "workbench-section", className: cn(className), ...props });
+}
+function WorkbenchSectionHeader({ title, metadata, action, className, ...props }) {
+  return /* @__PURE__ */ jsxs17("div", { "data-slot": "workbench-section-header", className: cn(className), ...props, children: [
+    /* @__PURE__ */ jsxs17("div", { "data-slot": "workbench-section-heading", children: [
+      /* @__PURE__ */ jsx19("h2", { children: title }),
+      metadata ? /* @__PURE__ */ jsx19("span", { children: metadata }) : null
+    ] }),
+    action ? /* @__PURE__ */ jsx19("div", { "data-slot": "workbench-section-action", children: action }) : null
+  ] });
+}
+function ResourceRow({ as = "div", href, selected = false, className, children, ...props }) {
+  return React8.createElement(
+    as,
+    {
+      ...props,
+      ...as === "a" && href ? { href } : {},
+      ...as === "button" ? { type: "button" } : {},
+      "data-slot": "resource-row",
+      "data-selected": selected ? "true" : "false",
+      className: cn(className)
+    },
+    children
+  );
+}
+function ResourceRowIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsx19("span", { "data-slot": "resource-row-icon", className: cn(className), ...props });
+}
+function ResourceRowContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx19("span", { "data-slot": "resource-row-content", className: cn(className), ...props });
+}
+function ResourceRowTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx19("strong", { "data-slot": "resource-row-title", className: cn(className), ...props });
+}
+function ResourceRowDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx19("span", { "data-slot": "resource-row-description", className: cn(className), ...props });
+}
+function ResourceRowMeta({ className, ...props }) {
+  return /* @__PURE__ */ jsx19("span", { "data-slot": "resource-row-meta", className: cn(className), ...props });
+}
+function WorkbenchInspectorSection({ label, action, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs17("section", { "data-slot": "workbench-inspector-section", className: cn(className), ...props, children: [
+    /* @__PURE__ */ jsxs17("div", { "data-slot": "workbench-inspector-label", children: [
+      /* @__PURE__ */ jsx19("h3", { children: label }),
+      action ? /* @__PURE__ */ jsx19("div", { children: action }) : null
+    ] }),
+    children
+  ] });
+}
+function IdentityRow({ initials, name, detail, compact = false, className, ...props }) {
+  return /* @__PURE__ */ jsxs17("div", { "data-slot": "identity-row", "data-compact": compact ? "true" : "false", className: cn(className), ...props, children: [
+    /* @__PURE__ */ jsx19("span", { "data-slot": "identity-avatar", children: initials }),
+    /* @__PURE__ */ jsxs17("span", { "data-slot": "identity-copy", children: [
+      /* @__PURE__ */ jsx19("strong", { children: name }),
+      detail ? /* @__PURE__ */ jsx19("small", { children: detail }) : null
+    ] })
+  ] });
+}
+
 export {
   PaginationControls,
   DataTable,
@@ -1883,6 +1982,22 @@ export {
   StateView,
   LoadingRows,
   ErrorState,
-  ValueMeter
+  ValueMeter,
+  WorkbenchShell,
+  WorkbenchRail,
+  WorkbenchMain,
+  WorkbenchInspector,
+  WorkbenchMobileToolbar,
+  WorkbenchBackdrop,
+  WorkbenchSection,
+  WorkbenchSectionHeader,
+  ResourceRow,
+  ResourceRowIcon,
+  ResourceRowContent,
+  ResourceRowTitle,
+  ResourceRowDescription,
+  ResourceRowMeta,
+  WorkbenchInspectorSection,
+  IdentityRow
 };
-//# sourceMappingURL=chunk-VIVMQAJM.js.map
+//# sourceMappingURL=chunk-KYH7IZ3Z.js.map