@theokit/ui 0.13.0

package/dist/chunk-LQ4B5X4Y.js

@@ -0,0 +1,56 @@
+import { CronJobCard } from './chunk-U4THNRV5.js';
+import { cn } from './chunk-EWDN56AS.js';
+import { Plus } from 'lucide-react';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var CronJobsList = forwardRef(
+  ({ className, jobs, title = "Scheduled jobs", onAdd, onRunNow, onToggle, onRemove, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ref,
+      className: cn("grid gap-3", className),
+      "aria-label": "Scheduled agent jobs",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "flex items-baseline justify-between", children: [
+          title ? /* @__PURE__ */ jsx("h3", { className: "font-display text-title-md tracking-tight", children: title }) : /* @__PURE__ */ jsx("span", {}),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsxs("span", { className: "font-mono text-label text-muted-foreground", children: [
+              jobs.length,
+              " ",
+              jobs.length === 1 ? "job" : "jobs"
+            ] }),
+            onAdd ? /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: onAdd,
+                className: "inline-flex items-center gap-1 rounded-md bg-primary px-2.5 py-1 font-sans text-label text-primary-foreground hover:shadow-glow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                children: [
+                  /* @__PURE__ */ jsx(Plus, { className: "size-3.5" }),
+                  " New job"
+                ]
+              }
+            ) : null
+          ] })
+        ] }),
+        jobs.length === 0 ? /* @__PURE__ */ jsx("p", { className: "rounded-xl border border-border/60 border-dashed bg-muted/30 px-4 py-8 text-center font-sans text-body-sm text-muted-foreground", children: "No scheduled jobs yet." }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-3 md:grid-cols-2", children: jobs.map((job) => /* @__PURE__ */ jsx(
+          CronJobCard,
+          {
+            job,
+            ...onRunNow ? { onRunNow } : {},
+            ...onToggle ? { onToggle } : {},
+            ...onRemove ? { onRemove } : {}
+          },
+          job.id
+        )) })
+      ]
+    }
+  )
+);
+CronJobsList.displayName = "CronJobsList";
+
+export { CronJobsList };
+//# sourceMappingURL=chunk-LQ4B5X4Y.js.map
+//# sourceMappingURL=chunk-LQ4B5X4Y.js.map

package/dist/chunk-LQ4B5X4Y.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/cron-jobs-list/cron-jobs-list.tsx"],"names":[],"mappings":";;;;;;AAkBA,IAAM,YAAA,GAAe,UAAA;AAAA,EACnB,CACE,EAAE,SAAA,EAAW,IAAA,EAAM,KAAA,GAAQ,gBAAA,EAAkB,KAAA,EAAO,QAAA,EAAU,QAAA,EAAU,QAAA,EAAU,GAAG,KAAA,IACrF,GAAA,qBAEA,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA,CAAG,YAAA,EAAc,SAAS,CAAA;AAAA,MACrC,YAAA,EAAW,sBAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,QAAA,EAAA,EAAO,WAAU,qCAAA,EACf,QAAA,EAAA;AAAA,UAAA,KAAA,uBAAS,IAAA,EAAA,EAAG,SAAA,EAAU,6CAA6C,QAAA,EAAA,KAAA,EAAM,CAAA,uBAAS,MAAA,EAAA,EAAK,CAAA;AAAA,0BACxF,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EACb,QAAA,EAAA;AAAA,4BAAA,IAAA,CAAC,MAAA,EAAA,EAAK,WAAU,4CAAA,EACb,QAAA,EAAA;AAAA,cAAA,IAAA,CAAK,MAAA;AAAA,cAAO,GAAA;AAAA,cAAE,IAAA,CAAK,MAAA,KAAW,CAAA,GAAI,KAAA,GAAQ;AAAA,aAAA,EAC7C,CAAA;AAAA,YACC,KAAA,mBACC,IAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,QAAA;AAAA,gBACL,OAAA,EAAS,KAAA;AAAA,gBACT,SAAA,EAAU,yMAAA;AAAA,gBAEV,QAAA,EAAA;AAAA,kCAAA,GAAA,CAAC,IAAA,EAAA,EAAK,WAAU,UAAA,EAAW,CAAA;AAAA,kBAAE;AAAA;AAAA;AAAA,aAC/B,GACE;AAAA,WAAA,EACN;AAAA,SAAA,EACF,CAAA;AAAA,QACC,KAAK,MAAA,KAAW,CAAA,mBACf,GAAA,CAAC,GAAA,EAAA,EAAE,WAAU,iIAAA,EAAkI,QAAA,EAAA,wBAAA,EAE/I,CAAA,mBAEA,GAAA,CAAC,SAAI,SAAA,EAAU,uCAAA,EACZ,QAAA,EAAA,IAAA,CAAK,GAAA,CAAI,CAAC,GAAA,qBACT,GAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YAEC,GAAA;AAAA,YACC,GAAI,QAAA,GAAW,EAAE,QAAA,KAAa,EAAC;AAAA,YAC/B,GAAI,QAAA,GAAW,EAAE,QAAA,KAAa,EAAC;AAAA,YAC/B,GAAI,QAAA,GAAW,EAAE,QAAA,KAAa;AAAC,WAAA;AAAA,UAJ3B,GAAA,CAAI;AAAA,SAMZ,CAAA,EACH;AAAA;AAAA;AAAA;AAIR;AACA,YAAA,CAAa,WAAA,GAAc,cAAA","file":"chunk-LQ4B5X4Y.js","sourcesContent":["import { Plus } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport { type CronJob, CronJobCard } from \"../../primitives/cron-job-card/index.js\";\n\ninterface CronJobsListProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\" | \"onToggle\"> {\n  jobs: CronJob[];\n  title?: ReactNode;\n  onAdd?: () => void;\n  onRunNow?: (id: string) => void;\n  onToggle?: (id: string, enabled: boolean) => void;\n  onRemove?: (id: string) => void;\n}\n\n/**\n * CronJobsList — grid of CronJobCards with a sticky \"new job\" action.\n */\nconst CronJobsList = forwardRef<HTMLDivElement, CronJobsListProps>(\n  (\n    { className, jobs, title = \"Scheduled jobs\", onAdd, onRunNow, onToggle, onRemove, ...props },\n    ref,\n  ) => (\n    <section\n      ref={ref}\n      className={cn(\"grid gap-3\", className)}\n      aria-label=\"Scheduled agent jobs\"\n      {...props}\n    >\n      <header className=\"flex items-baseline justify-between\">\n        {title ? <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3> : <span />}\n        <div className=\"flex items-center gap-3\">\n          <span className=\"font-mono text-label text-muted-foreground\">\n            {jobs.length} {jobs.length === 1 ? \"job\" : \"jobs\"}\n          </span>\n          {onAdd ? (\n            <button\n              type=\"button\"\n              onClick={onAdd}\n              className=\"inline-flex items-center gap-1 rounded-md bg-primary px-2.5 py-1 font-sans text-label text-primary-foreground hover:shadow-glow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              <Plus className=\"size-3.5\" /> New job\n            </button>\n          ) : null}\n        </div>\n      </header>\n      {jobs.length === 0 ? (\n        <p className=\"rounded-xl border border-border/60 border-dashed bg-muted/30 px-4 py-8 text-center font-sans text-body-sm text-muted-foreground\">\n          No scheduled jobs yet.\n        </p>\n      ) : (\n        <div className=\"grid grid-cols-1 gap-3 md:grid-cols-2\">\n          {jobs.map((job) => (\n            <CronJobCard\n              key={job.id}\n              job={job}\n              {...(onRunNow ? { onRunNow } : {})}\n              {...(onToggle ? { onToggle } : {})}\n              {...(onRemove ? { onRemove } : {})}\n            />\n          ))}\n        </div>\n      )}\n    </section>\n  ),\n);\nCronJobsList.displayName = \"CronJobsList\";\n\nexport { CronJobsList };\n"]}

package/dist/chunk-M3FSLEHQ.js

@@ -0,0 +1,76 @@
+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",
+        {
+          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-M3FSLEHQ.js.map
+//# sourceMappingURL=chunk-M3FSLEHQ.js.map

package/dist/chunk-M3FSLEHQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/intent-selector/intent-selector.tsx"],"names":[],"mappings":";;;;;;AA2BA,IAAM,cAAA,GAAiB,UAAA;AAAA,EACrB,CAAC,EAAE,SAAA,EAAW,KAAA,EAAO,SAAS,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAC1D,IAAA,MAAM,OAAA,GAAU,OAAA,CAAQ,IAAA,CAAK,CAAC,CAAA,KAAM,EAAE,EAAA,KAAO,KAAK,CAAA,IAAK,OAAA,CAAQ,CAAC,CAAA;AAChE,IAAA,MAAM,IAAA,GAAO,SAAS,IAAA,IAAQ,MAAA;AAC9B,IAAA,uBACE,IAAA,CAAc,mBAAb,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAc,YAAA,CAAA,OAAA,EAAb,EAAqB,OAAA,EAAO,IAAA,EAC3B,QAAA,kBAAA,IAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,GAAA;AAAA,UACA,IAAA,EAAK,QAAA;AAAA,UACL,SAAA,EAAW,EAAA;AAAA,YACT,sFAAA;AAAA,YACA,oDAAA;AAAA,YACA,+CAAA;AAAA,YACA,gBAAA;AAAA,YACA,0IAAA;AAAA,YACA;AAAA,WACF;AAAA,UACC,GAAG,KAAA;AAAA,UAEJ,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAU,uBAAA,EAAwB,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,YAC1D,SAAS,KAAA,IAAS,eAAA;AAAA,4BACnB,GAAA,CAAC,WAAA,EAAA,EAAY,SAAA,EAAU,8BAAA,EAA+B,eAAY,MAAA,EAAO;AAAA;AAAA;AAAA,OAC3E,EACF,CAAA;AAAA,sBACA,GAAA,CAAc,qBAAb,EACC,QAAA,kBAAA,GAAA;AAAA,QAAc,YAAA,CAAA,OAAA;AAAA,QAAb;AAAA,UACC,UAAA,EAAY,CAAA;AAAA,UACZ,KAAA,EAAM,OAAA;AAAA,UACN,SAAA,EAAW,EAAA;AAAA,YACT,uGAAA;AAAA,YACA,uFAAA;AAAA,YACA;AAAA,WACF;AAAA,UAEC,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,GAAA,KAAQ;AACpB,YAAA,MAAM,OAAA,GAAU,IAAI,IAAA,IAAQ,MAAA;AAC5B,YAAA,uBACE,IAAA;AAAA,cAAc,YAAA,CAAA,IAAA;AAAA,cAAb;AAAA,gBAEC,QAAA,EAAU,MAAM,QAAA,GAAW,GAAA,CAAI,EAAE,CAAA;AAAA,gBACjC,SAAA,EAAW,EAAA;AAAA,kBACT,4DAAA;AAAA,kBACA,cAAA;AAAA,kBACA,mCAAA;AAAA,kBACA;AAAA,iBACF;AAAA,gBAEA,QAAA,EAAA;AAAA,kCAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAU,qCAAA,EAAsC,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,kCAC5E,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,sBAAA,EACd,QAAA,EAAA;AAAA,oCAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,aAAA,EAAe,QAAA,EAAA,GAAA,CAAI,KAAA,EAAM,CAAA;AAAA,oBACxC,GAAA,CAAI,8BACH,GAAA,CAAC,MAAA,EAAA,EAAK,WAAU,kCAAA,EAAoC,QAAA,EAAA,GAAA,CAAI,aAAY,CAAA,GAClE;AAAA,mBAAA,EACN,CAAA;AAAA,kBACC,IAAI,EAAA,KAAO,KAAA,uBACT,KAAA,EAAA,EAAM,SAAA,EAAU,yCAAwC,CAAA,GACvD;AAAA;AAAA,eAAA;AAAA,cAlBC,GAAA,CAAI;AAAA,aAmBX;AAAA,UAEJ,CAAC;AAAA;AAAA,OACH,EACF;AAAA,KAAA,EACF,CAAA;AAAA,EAEJ;AACF;AACA,cAAA,CAAe,WAAA,GAAc,gBAAA","file":"chunk-M3FSLEHQ.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            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-M5G3O6H6.js

@@ -0,0 +1,57 @@
+import { cn } from './chunk-EWDN56AS.js';
+import { CircleX, ShieldAlert, CheckCircle2 } from 'lucide-react';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var RESULT_CONFIG = {
+  ok: { icon: CheckCircle2, color: "text-success" },
+  blocked: { icon: ShieldAlert, color: "text-warning" },
+  error: { icon: CircleX, color: "text-destructive" }
+};
+var HookEventLog = forwardRef(
+  ({ className, events, title = "Hook log", ...props }, ref) => /* @__PURE__ */ jsxs("section", { ref, className: cn("rounded-xl border bg-card", className), ...props, children: [
+    /* @__PURE__ */ jsxs("header", { className: "flex items-baseline justify-between border-border/40 border-b px-4 py-3", children: [
+      /* @__PURE__ */ jsx("h3", { className: "font-display text-title-md tracking-tight", children: title }),
+      /* @__PURE__ */ jsxs("span", { className: "font-mono text-label text-muted-foreground", children: [
+        events.length,
+        " ",
+        events.length === 1 ? "event" : "events"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("ol", { className: "divide-y divide-border/30", children: [
+      events.map((evt) => {
+        const cfg = RESULT_CONFIG[evt.result];
+        const Icon = cfg.icon;
+        return /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: "grid grid-cols-[auto_1fr_auto] items-start gap-3 px-4 py-2.5",
+            children: [
+              /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", className: cn("mt-0.5 size-3.5 shrink-0", cfg.color) }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsxs("p", { className: "flex flex-wrap items-baseline gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "font-mono text-code-sm text-primary", children: evt.event }),
+                  /* @__PURE__ */ jsxs("span", { className: "font-mono text-code-sm text-muted-foreground", children: [
+                    "matcher=",
+                    evt.matcher
+                  ] }),
+                  evt.duration ? /* @__PURE__ */ jsx("span", { className: "font-mono text-label text-muted-foreground tabular-nums", children: evt.duration }) : null
+                ] }),
+                /* @__PURE__ */ jsx("p", { className: "truncate font-mono text-code-sm text-foreground", children: evt.command }),
+                evt.output ? /* @__PURE__ */ jsx("pre", { className: "mt-1 max-h-24 overflow-auto rounded-md bg-muted/60 px-2 py-1 font-mono text-code-sm text-muted-foreground", children: evt.output }) : null
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "font-mono text-label text-muted-foreground tabular-nums", children: evt.timestamp })
+            ]
+          },
+          evt.id
+        );
+      }),
+      events.length === 0 ? /* @__PURE__ */ jsx("li", { className: "px-4 py-8 text-center font-sans text-body-sm text-muted-foreground", children: "No hooks have fired yet." }) : null
+    ] })
+  ] })
+);
+HookEventLog.displayName = "HookEventLog";
+
+export { HookEventLog };
+//# sourceMappingURL=chunk-M5G3O6H6.js.map
+//# sourceMappingURL=chunk-M5G3O6H6.js.map

package/dist/chunk-M5G3O6H6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/hook-event-log/hook-event-log.tsx"],"names":[],"mappings":";;;;;AA4BA,IAAM,aAAA,GAAgB;AAAA,EACpB,EAAA,EAAI,EAAE,IAAA,EAAM,YAAA,EAAc,OAAO,cAAA,EAAe;AAAA,EAChD,OAAA,EAAS,EAAE,IAAA,EAAM,WAAA,EAAa,OAAO,cAAA,EAAe;AAAA,EACpD,KAAA,EAAO,EAAE,IAAA,EAAM,OAAA,EAAS,OAAO,kBAAA;AACjC,CAAA;AAMA,IAAM,YAAA,GAAe,UAAA;AAAA,EACnB,CAAC,EAAE,SAAA,EAAW,QAAQ,KAAA,GAAQ,UAAA,EAAY,GAAG,KAAA,EAAM,EAAG,wBACpD,IAAA,CAAC,SAAA,EAAA,EAAQ,KAAU,SAAA,EAAW,EAAA,CAAG,6BAA6B,SAAS,CAAA,EAAI,GAAG,KAAA,EAC5E,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,QAAA,EAAA,EAAO,WAAU,yEAAA,EAChB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,2CAAA,EAA6C,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,sBACjE,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,4CAAA,EACb,QAAA,EAAA;AAAA,QAAA,MAAA,CAAO,MAAA;AAAA,QAAO,GAAA;AAAA,QAAE,MAAA,CAAO,MAAA,KAAW,CAAA,GAAI,OAAA,GAAU;AAAA,OAAA,EACnD;AAAA,KAAA,EACF,CAAA;AAAA,oBACA,IAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,2BAAA,EACX,QAAA,EAAA;AAAA,MAAA,MAAA,CAAO,GAAA,CAAI,CAAC,GAAA,KAAQ;AACnB,QAAA,MAAM,GAAA,GAAM,aAAA,CAAc,GAAA,CAAI,MAAM,CAAA;AACpC,QAAA,MAAM,OAAO,GAAA,CAAI,IAAA;AACjB,QAAA,uBACE,IAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YAEC,SAAA,EAAU,8DAAA;AAAA,YAEV,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,IAAA,EAAA,EAAK,eAAY,MAAA,EAAO,SAAA,EAAW,GAAG,0BAAA,EAA4B,GAAA,CAAI,KAAK,CAAA,EAAG,CAAA;AAAA,8BAC/E,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,SAAA,EACb,QAAA,EAAA;AAAA,gCAAA,IAAA,CAAC,GAAA,EAAA,EAAE,WAAU,qCAAA,EACX,QAAA,EAAA;AAAA,kCAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,qCAAA,EAAuC,QAAA,EAAA,GAAA,CAAI,KAAA,EAAM,CAAA;AAAA,kCACjE,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,8CAAA,EAA+C,QAAA,EAAA;AAAA,oBAAA,UAAA;AAAA,oBACpD,GAAA,CAAI;AAAA,mBAAA,EACf,CAAA;AAAA,kBACC,GAAA,CAAI,2BACH,GAAA,CAAC,MAAA,EAAA,EAAK,WAAU,yDAAA,EACb,QAAA,EAAA,GAAA,CAAI,UACP,CAAA,GACE;AAAA,iBAAA,EACN,CAAA;AAAA,gCACA,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,iDAAA,EAAmD,cAAI,OAAA,EAAQ,CAAA;AAAA,gBAC3E,GAAA,CAAI,yBACH,GAAA,CAAC,KAAA,EAAA,EAAI,WAAU,2GAAA,EACZ,QAAA,EAAA,GAAA,CAAI,QACP,CAAA,GACE;AAAA,eAAA,EACN,CAAA;AAAA,8BACA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,yDAAA,EACb,cAAI,SAAA,EACP;AAAA;AAAA,WAAA;AAAA,UAzBK,GAAA,CAAI;AAAA,SA0BX;AAAA,MAEJ,CAAC,CAAA;AAAA,MACA,MAAA,CAAO,WAAW,CAAA,mBACjB,GAAA,CAAC,QAAG,SAAA,EAAU,oEAAA,EAAqE,sCAEnF,CAAA,GACE;AAAA,KAAA,EACN;AAAA,GAAA,EACF;AAEJ;AACA,YAAA,CAAa,WAAA,GAAc,cAAA","file":"chunk-M5G3O6H6.js","sourcesContent":["import { CheckCircle2, CircleX, ShieldAlert } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\n\nexport type HookEventResult = \"ok\" | \"blocked\" | \"error\";\n\nexport interface HookEventEntry {\n  id: string;\n  /** Hook event (e.g. PreToolUse). */\n  event: string;\n  /** Hook matcher (e.g. Bash). */\n  matcher: string;\n  /** What the hook command was. */\n  command: string;\n  result: HookEventResult;\n  timestamp: string;\n  /** Optional stderr/stdout snippet. */\n  output?: string;\n  /** Optional duration label, e.g. \"120ms\". */\n  duration?: string;\n}\n\ninterface HookEventLogProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  events: HookEventEntry[];\n  title?: ReactNode;\n}\n\nconst RESULT_CONFIG = {\n  ok: { icon: CheckCircle2, color: \"text-success\" },\n  blocked: { icon: ShieldAlert, color: \"text-warning\" },\n  error: { icon: CircleX, color: \"text-destructive\" },\n} as const;\n\n/**\n * HookEventLog — chronological list of hook firings, with result tone, the\n * command that ran, and an optional output preview.\n */\nconst HookEventLog = forwardRef<HTMLDivElement, HookEventLogProps>(\n  ({ className, events, title = \"Hook log\", ...props }, ref) => (\n    <section ref={ref} className={cn(\"rounded-xl border bg-card\", className)} {...props}>\n      <header className=\"flex items-baseline justify-between border-border/40 border-b px-4 py-3\">\n        <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3>\n        <span className=\"font-mono text-label text-muted-foreground\">\n          {events.length} {events.length === 1 ? \"event\" : \"events\"}\n        </span>\n      </header>\n      <ol className=\"divide-y divide-border/30\">\n        {events.map((evt) => {\n          const cfg = RESULT_CONFIG[evt.result];\n          const Icon = cfg.icon;\n          return (\n            <li\n              key={evt.id}\n              className=\"grid grid-cols-[auto_1fr_auto] items-start gap-3 px-4 py-2.5\"\n            >\n              <Icon aria-hidden=\"true\" className={cn(\"mt-0.5 size-3.5 shrink-0\", cfg.color)} />\n              <div className=\"min-w-0\">\n                <p className=\"flex flex-wrap items-baseline gap-2\">\n                  <span className=\"font-mono text-code-sm text-primary\">{evt.event}</span>\n                  <span className=\"font-mono text-code-sm text-muted-foreground\">\n                    matcher={evt.matcher}\n                  </span>\n                  {evt.duration ? (\n                    <span className=\"font-mono text-label text-muted-foreground tabular-nums\">\n                      {evt.duration}\n                    </span>\n                  ) : null}\n                </p>\n                <p className=\"truncate font-mono text-code-sm text-foreground\">{evt.command}</p>\n                {evt.output ? (\n                  <pre className=\"mt-1 max-h-24 overflow-auto rounded-md bg-muted/60 px-2 py-1 font-mono text-code-sm text-muted-foreground\">\n                    {evt.output}\n                  </pre>\n                ) : null}\n              </div>\n              <span className=\"font-mono text-label text-muted-foreground tabular-nums\">\n                {evt.timestamp}\n              </span>\n            </li>\n          );\n        })}\n        {events.length === 0 ? (\n          <li className=\"px-4 py-8 text-center font-sans text-body-sm text-muted-foreground\">\n            No hooks have fired yet.\n          </li>\n        ) : null}\n      </ol>\n    </section>\n  ),\n);\nHookEventLog.displayName = \"HookEventLog\";\n\nexport { HookEventLog };\n"]}

package/dist/chunk-M6JIC5PU.js

@@ -0,0 +1,81 @@
+import { cn } from './chunk-EWDN56AS.js';
+import { ArrowUpCircle, X } from 'lucide-react';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var UpdateBanner = forwardRef(
+  ({
+    currentVersion,
+    latestVersion,
+    onUpdate,
+    onDismiss,
+    severity = "info",
+    className,
+    "data-testid": dataTestId,
+    ...rest
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "alert",
+        "aria-live": "polite",
+        className: cn(
+          "flex items-center justify-between gap-3 border-b px-4 py-2 text-sm",
+          severity === "warn" ? "border-amber-500/40 bg-amber-500/10 text-amber-700 dark:text-amber-300" : "border-primary/40 bg-primary/10 text-primary",
+          className
+        ),
+        "data-testid": dataTestId ?? "update-banner",
+        "data-severity": severity,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(ArrowUpCircle, { className: "size-4", "aria-hidden": true }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              "Update available: ",
+              /* @__PURE__ */ jsxs("strong", { "data-testid": "update-banner-latest", children: [
+                "v",
+                latestVersion
+              ] }),
+              " ",
+              "(running ",
+              /* @__PURE__ */ jsxs("span", { "data-testid": "update-banner-current", children: [
+                "v",
+                currentVersion
+              ] }),
+              ")."
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onUpdate,
+                className: "rounded-md border border-current px-2 py-1 font-medium text-xs hover:bg-current/10",
+                "data-testid": "update-banner-update-button",
+                children: "Update now"
+              }
+            ),
+            onDismiss !== void 0 && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onDismiss,
+                className: "rounded-md p-1 hover:bg-current/10",
+                "aria-label": "Dismiss update banner",
+                "data-testid": "update-banner-dismiss",
+                children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": true })
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+UpdateBanner.displayName = "UpdateBanner";
+
+export { UpdateBanner };
+//# sourceMappingURL=chunk-M6JIC5PU.js.map
+//# sourceMappingURL=chunk-M6JIC5PU.js.map

package/dist/chunk-M6JIC5PU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/update-banner/update-banner.tsx"],"names":[],"mappings":";;;;;AAqBO,IAAM,YAAA,GAAe,UAAA;AAAA,EAC1B,CACE;AAAA,IACE,cAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA,GAAW,MAAA;AAAA,IACX,SAAA;AAAA,IACA,aAAA,EAAe,UAAA;AAAA,IACf,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,OAAA;AAAA,QACL,WAAA,EAAU,QAAA;AAAA,QACV,SAAA,EAAW,EAAA;AAAA,UACT,oEAAA;AAAA,UACA,QAAA,KAAa,SACT,wEAAA,GACA,8CAAA;AAAA,UACJ;AAAA,SACF;AAAA,QACA,eAAa,UAAA,IAAc,eAAA;AAAA,QAC3B,eAAA,EAAe,QAAA;AAAA,QACd,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,yBAAA,EACb,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,aAAA,EAAA,EAAc,SAAA,EAAU,QAAA,EAAS,aAAA,EAAW,IAAA,EAAC,CAAA;AAAA,iCAC7C,MAAA,EAAA,EAAK,QAAA,EAAA;AAAA,cAAA,oBAAA;AAAA,8BACc,IAAA,CAAC,QAAA,EAAA,EAAO,aAAA,EAAY,sBAAA,EAAuB,QAAA,EAAA;AAAA,gBAAA,GAAA;AAAA,gBAAE;AAAA,eAAA,EAAc,CAAA;AAAA,cAAU,GAAA;AAAA,cAAI,WAAA;AAAA,8BAClF,IAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAY,uBAAA,EAAwB,QAAA,EAAA;AAAA,gBAAA,GAAA;AAAA,gBAAE;AAAA,eAAA,EAAe,CAAA;AAAA,cAAO;AAAA,aAAA,EAC7E;AAAA,WAAA,EACF,CAAA;AAAA,0BACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EACb,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,QAAA;AAAA,gBACL,OAAA,EAAS,QAAA;AAAA,gBACT,SAAA,EAAU,oFAAA;AAAA,gBACV,aAAA,EAAY,6BAAA;AAAA,gBACb,QAAA,EAAA;AAAA;AAAA,aAED;AAAA,YACC,cAAc,MAAA,oBACb,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,QAAA;AAAA,gBACL,OAAA,EAAS,SAAA;AAAA,gBACT,SAAA,EAAU,oCAAA;AAAA,gBACV,YAAA,EAAW,uBAAA;AAAA,gBACX,aAAA,EAAY,uBAAA;AAAA,gBAEZ,QAAA,kBAAA,GAAA,CAAC,CAAA,EAAA,EAAE,SAAA,EAAU,QAAA,EAAS,eAAW,IAAA,EAAC;AAAA;AAAA;AACpC,WAAA,EAEJ;AAAA;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AACA,YAAA,CAAa,WAAA,GAAc,cAAA","file":"chunk-M6JIC5PU.js","sourcesContent":["import { ArrowUpCircle, X } from \"lucide-react\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { cn } from \"../../../lib/cn.js\";\n\n/**\n * UpdateBanner — top-of-app alert when a newer version is available.\n *\n * Controlled. Dismiss persistence (localStorage/cookie/etc) is the consumer's\n * responsibility (per EC-16 DOCUMENT). Component just fires `onDismiss`.\n */\n\nexport interface UpdateBannerProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  currentVersion: string;\n  latestVersion: string;\n  onUpdate: () => void;\n  onDismiss?: () => void;\n  severity?: \"info\" | \"warn\";\n  \"data-testid\"?: string;\n}\n\nexport const UpdateBanner = forwardRef<HTMLDivElement, UpdateBannerProps>(\n  (\n    {\n      currentVersion,\n      latestVersion,\n      onUpdate,\n      onDismiss,\n      severity = \"info\",\n      className,\n      \"data-testid\": dataTestId,\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        role=\"alert\"\n        aria-live=\"polite\"\n        className={cn(\n          \"flex items-center justify-between gap-3 border-b px-4 py-2 text-sm\",\n          severity === \"warn\"\n            ? \"border-amber-500/40 bg-amber-500/10 text-amber-700 dark:text-amber-300\"\n            : \"border-primary/40 bg-primary/10 text-primary\",\n          className,\n        )}\n        data-testid={dataTestId ?? \"update-banner\"}\n        data-severity={severity}\n        {...rest}\n      >\n        <div className=\"flex items-center gap-2\">\n          <ArrowUpCircle className=\"size-4\" aria-hidden />\n          <span>\n            Update available: <strong data-testid=\"update-banner-latest\">v{latestVersion}</strong>{\" \"}\n            (running <span data-testid=\"update-banner-current\">v{currentVersion}</span>).\n          </span>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <button\n            type=\"button\"\n            onClick={onUpdate}\n            className=\"rounded-md border border-current px-2 py-1 font-medium text-xs hover:bg-current/10\"\n            data-testid=\"update-banner-update-button\"\n          >\n            Update now\n          </button>\n          {onDismiss !== undefined && (\n            <button\n              type=\"button\"\n              onClick={onDismiss}\n              className=\"rounded-md p-1 hover:bg-current/10\"\n              aria-label=\"Dismiss update banner\"\n              data-testid=\"update-banner-dismiss\"\n            >\n              <X className=\"size-4\" aria-hidden />\n            </button>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\nUpdateBanner.displayName = \"UpdateBanner\";\n"]}

package/dist/chunk-N2HJ3SLS.js

@@ -0,0 +1,186 @@
+import { ALL_MODES, MODE_LABEL } from './chunk-VM4RMQQN.js';
+import { Switch } from './chunk-PRH4HKND.js';
+import { Textarea } from './chunk-OY2LJHMJ.js';
+import { Select } from './chunk-27ENTTY7.js';
+import { Input } from './chunk-B3VAJSZ2.js';
+import { FormField } from './chunk-EG6IHP3H.js';
+import { Button } from './chunk-5VOSCJKQ.js';
+import { cn } from './chunk-EWDN56AS.js';
+import { useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var SOURCES = [
+  { id: "user", label: "User \u2014 defined by you" },
+  { id: "project", label: "Project \u2014 lives in this workspace" },
+  { id: "plugin", label: "Plugin \u2014 imported from a package" },
+  { id: "builtin", label: "Built-in \u2014 shipped with Theo" }
+];
+function SkillEditor({
+  className,
+  initial,
+  onSave,
+  onCancel,
+  onDelete,
+  ...formProps
+}) {
+  const [name, setName] = useState(initial?.name ?? "");
+  const [description, setDescription] = useState(
+    typeof initial?.description === "string" ? initial.description : ""
+  );
+  const [instructions, setInstructions] = useState(initial?.instructions ?? "");
+  const [source, setSource] = useState(initial?.source ?? "user");
+  const [allowedToolsRaw, setAllowedToolsRaw] = useState(initial?.allowedTools?.join(", ") ?? "");
+  const [triggersRaw, setTriggersRaw] = useState(initial?.triggers?.join(", ") ?? "");
+  const [enabled, setEnabled] = useState(initial?.state ?? "enabled");
+  const [modes, setModes] = useState(initial?.modes ?? []);
+  const toggleMode = (m) => setModes((prev) => prev.includes(m) ? prev.filter((x) => x !== m) : [...prev, m]);
+  const canSave = name.trim().length > 0;
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!canSave) return;
+    onSave({
+      id: initial?.id,
+      name: name.trim(),
+      description: description.trim() || void 0,
+      instructions: instructions.trim() || void 0,
+      source,
+      state: enabled,
+      allowedTools: allowedToolsRaw.split(",").map((t) => t.trim()).filter(Boolean),
+      triggers: triggersRaw.split(",").map((t) => t.trim()).filter(Boolean),
+      modes: modes.length > 0 ? modes : void 0
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      onSubmit: handleSubmit,
+      className: cn("flex h-full flex-col gap-4", className),
+      ...formProps,
+      children: [
+        /* @__PURE__ */ jsxs(FormField, { children: [
+          /* @__PURE__ */ jsx(FormField.Label, { children: "Name" }),
+          /* @__PURE__ */ jsx(FormField.Control, { children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: name,
+              onChange: (e) => setName(e.target.value),
+              placeholder: "diff-explainer",
+              required: true
+            }
+          ) }),
+          /* @__PURE__ */ jsx(FormField.Hint, { children: "Kebab-case identifier the agent uses to invoke this skill." })
+        ] }),
+        /* @__PURE__ */ jsxs(FormField, { children: [
+          /* @__PURE__ */ jsx(FormField.Label, { children: "Description" }),
+          /* @__PURE__ */ jsx(FormField.Control, { children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: description,
+              onChange: (e) => setDescription(e.target.value),
+              placeholder: "Explain a diff in plain English."
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs(FormField, { className: "flex-1", children: [
+          /* @__PURE__ */ jsx(FormField.Label, { children: "Instructions" }),
+          /* @__PURE__ */ jsx(FormField.Control, { children: /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              value: instructions,
+              onChange: (e) => setInstructions(e.target.value),
+              rows: 6,
+              placeholder: "When invoked, read the diff via Read or Grep and produce a concise summary of intent + risk.",
+              className: "min-h-[10rem] flex-1 font-mono text-code-sm"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(FormField.Hint, { children: "Sub-prompt loaded when the skill is invoked." })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
+          /* @__PURE__ */ jsxs(FormField, { children: [
+            /* @__PURE__ */ jsx(FormField.Label, { children: "Source" }),
+            /* @__PURE__ */ jsx(FormField.Control, { children: /* @__PURE__ */ jsxs(
+              Select,
+              {
+                value: source,
+                onValueChange: (v) => {
+                  const next = SOURCES.find((s) => s.id === v);
+                  if (next) setSource(next.id);
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Select.Trigger, { "aria-label": "Select skill source", children: /* @__PURE__ */ jsx(Select.Value, {}) }),
+                  /* @__PURE__ */ jsx(Select.Content, { children: SOURCES.map((s) => /* @__PURE__ */ jsx(Select.Item, { value: s.id, children: s.label }, s.id)) })
+                ]
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxs(FormField, { children: [
+            /* @__PURE__ */ jsx(FormField.Label, { children: "Allowed tools" }),
+            /* @__PURE__ */ jsx(FormField.Control, { children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                value: allowedToolsRaw,
+                onChange: (e) => setAllowedToolsRaw(e.target.value),
+                placeholder: "Read, Grep, Bash"
+              }
+            ) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(FormField, { children: [
+          /* @__PURE__ */ jsx(FormField.Label, { children: "Triggers" }),
+          /* @__PURE__ */ jsx(FormField.Control, { children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: triggersRaw,
+              onChange: (e) => setTriggersRaw(e.target.value),
+              placeholder: "explain diff, summarize change"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(FormField.Hint, { children: "Optional keywords / patterns for auto-discovery." })
+        ] }),
+        /* @__PURE__ */ jsxs(FormField, { children: [
+          /* @__PURE__ */ jsx(FormField.Label, { children: "Active modes" }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: ALL_MODES.map((m) => {
+            const on = modes.includes(m);
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => toggleMode(m),
+                "aria-pressed": on,
+                className: cn(
+                  "inline-flex h-7 items-center rounded-full border px-3 font-mono text-body-sm transition-colors",
+                  on ? "border-primary bg-primary/15 text-primary" : "border-border/60 bg-card text-muted-foreground hover:text-foreground"
+                ),
+                children: MODE_LABEL[m]
+              },
+              m
+            );
+          }) }),
+          /* @__PURE__ */ jsx(FormField.Hint, { children: modes.length === 0 ? "Empty = global (available in every mode)." : `Only visible in: ${modes.map((m) => MODE_LABEL[m]).join(", ")}.` })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx(
+            Switch,
+            {
+              checked: enabled === "enabled",
+              onCheckedChange: (v) => setEnabled(v ? "enabled" : "disabled"),
+              "aria-label": "Enabled"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-body-sm text-muted-foreground", children: enabled === "enabled" ? "Enabled \u2014 available to the agent." : "Disabled \u2014 kept but hidden from the agent." })
+        ] }),
+        /* @__PURE__ */ jsxs("footer", { className: "flex items-center justify-between gap-2 border-border/40 border-t pt-4", children: [
+          /* @__PURE__ */ jsx("div", { children: onDelete ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", onClick: onDelete, children: "Delete" }) : null }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            onCancel ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", onClick: onCancel, children: "Cancel" }) : null,
+            /* @__PURE__ */ jsx(Button, { type: "submit", disabled: !canSave, children: initial?.id ? "Save changes" : "Create skill" })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+export { SkillEditor };
+//# sourceMappingURL=chunk-N2HJ3SLS.js.map
+//# sourceMappingURL=chunk-N2HJ3SLS.js.map

package/dist/chunk-N2HJ3SLS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/skill-editor/skill-editor.tsx"],"names":[],"mappings":"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","file":"chunk-N2HJ3SLS.js","sourcesContent":["import { useState } from \"react\";\nimport type { FormEvent, HTMLAttributes } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport { ALL_MODES, MODE_LABEL, type Mode } from \"../../../types/mode.js\";\nimport { Button } from \"../../primitives/button/index.js\";\nimport { FormField } from \"../../primitives/form-field/index.js\";\nimport { Input } from \"../../primitives/input/index.js\";\nimport { Select } from \"../../primitives/select/index.js\";\nimport type { Skill, SkillSource, SkillState } from \"../../primitives/skill-card/index.js\";\nimport { Switch } from \"../../primitives/switch/index.js\";\nimport { Textarea } from \"../../primitives/textarea/index.js\";\n\n/**\n * SkillEditor — form for creating or editing a Skill.\n */\n\ntype SkillDraft = Omit<Skill, \"id\"> & {\n  id?: string;\n  instructions?: string;\n};\n\ninterface SkillEditorProps extends Omit<HTMLAttributes<HTMLFormElement>, \"onSubmit\" | \"onChange\"> {\n  initial?: Partial<Skill> & { instructions?: string };\n  onSave: (draft: SkillDraft) => void;\n  onCancel?: () => void;\n  onDelete?: () => void;\n}\n\nconst SOURCES: Array<{ id: SkillSource; label: string }> = [\n  { id: \"user\", label: \"User — defined by you\" },\n  { id: \"project\", label: \"Project — lives in this workspace\" },\n  { id: \"plugin\", label: \"Plugin — imported from a package\" },\n  { id: \"builtin\", label: \"Built-in — shipped with Theo\" },\n];\n\nexport function SkillEditor({\n  className,\n  initial,\n  onSave,\n  onCancel,\n  onDelete,\n  ...formProps\n}: SkillEditorProps) {\n  const [name, setName] = useState(initial?.name ?? \"\");\n  const [description, setDescription] = useState(\n    typeof initial?.description === \"string\" ? initial.description : \"\",\n  );\n  const [instructions, setInstructions] = useState(initial?.instructions ?? \"\");\n  const [source, setSource] = useState<SkillSource>(initial?.source ?? \"user\");\n  const [allowedToolsRaw, setAllowedToolsRaw] = useState(initial?.allowedTools?.join(\", \") ?? \"\");\n  const [triggersRaw, setTriggersRaw] = useState(initial?.triggers?.join(\", \") ?? \"\");\n  const [enabled, setEnabled] = useState<SkillState>(initial?.state ?? \"enabled\");\n  const [modes, setModes] = useState<Mode[]>(initial?.modes ?? []);\n\n  // Note: state is only seeded once on mount. To reset the form when editing\n  // a different skill, use the React `key` pattern at the call site:\n  //   <SkillEditor key={skill.id} initial={skill} ... />\n  const toggleMode = (m: Mode) =>\n    setModes((prev) => (prev.includes(m) ? prev.filter((x) => x !== m) : [...prev, m]));\n\n  const canSave = name.trim().length > 0;\n  const handleSubmit = (e: FormEvent) => {\n    e.preventDefault();\n    if (!canSave) return;\n    onSave({\n      id: initial?.id,\n      name: name.trim(),\n      description: description.trim() || undefined,\n      instructions: instructions.trim() || undefined,\n      source,\n      state: enabled,\n      allowedTools: allowedToolsRaw\n        .split(\",\")\n        .map((t) => t.trim())\n        .filter(Boolean),\n      triggers: triggersRaw\n        .split(\",\")\n        .map((t) => t.trim())\n        .filter(Boolean),\n      modes: modes.length > 0 ? modes : undefined,\n    });\n  };\n\n  return (\n    <form\n      onSubmit={handleSubmit}\n      className={cn(\"flex h-full flex-col gap-4\", className)}\n      {...formProps}\n    >\n      <FormField>\n        <FormField.Label>Name</FormField.Label>\n        <FormField.Control>\n          <Input\n            value={name}\n            onChange={(e) => setName(e.target.value)}\n            placeholder=\"diff-explainer\"\n            required\n          />\n        </FormField.Control>\n        <FormField.Hint>Kebab-case identifier the agent uses to invoke this skill.</FormField.Hint>\n      </FormField>\n\n      <FormField>\n        <FormField.Label>Description</FormField.Label>\n        <FormField.Control>\n          <Input\n            value={description}\n            onChange={(e) => setDescription(e.target.value)}\n            placeholder=\"Explain a diff in plain English.\"\n          />\n        </FormField.Control>\n      </FormField>\n\n      <FormField className=\"flex-1\">\n        <FormField.Label>Instructions</FormField.Label>\n        <FormField.Control>\n          <Textarea\n            value={instructions}\n            onChange={(e) => setInstructions(e.target.value)}\n            rows={6}\n            placeholder=\"When invoked, read the diff via Read or Grep and produce a concise summary of intent + risk.\"\n            className=\"min-h-[10rem] flex-1 font-mono text-code-sm\"\n          />\n        </FormField.Control>\n        <FormField.Hint>Sub-prompt loaded when the skill is invoked.</FormField.Hint>\n      </FormField>\n\n      <div className=\"grid grid-cols-2 gap-3\">\n        <FormField>\n          <FormField.Label>Source</FormField.Label>\n          <FormField.Control>\n            <Select\n              value={source}\n              onValueChange={(v) => {\n                // Re-audit Issue 7: narrow Select string value against\n                // SOURCES.id before casting. Silent no-op for unknown.\n                const next = SOURCES.find((s) => s.id === v);\n                if (next) setSource(next.id);\n              }}\n            >\n              <Select.Trigger aria-label=\"Select skill source\">\n                <Select.Value />\n              </Select.Trigger>\n              <Select.Content>\n                {SOURCES.map((s) => (\n                  <Select.Item key={s.id} value={s.id}>\n                    {s.label}\n                  </Select.Item>\n                ))}\n              </Select.Content>\n            </Select>\n          </FormField.Control>\n        </FormField>\n        <FormField>\n          <FormField.Label>Allowed tools</FormField.Label>\n          <FormField.Control>\n            <Input\n              value={allowedToolsRaw}\n              onChange={(e) => setAllowedToolsRaw(e.target.value)}\n              placeholder=\"Read, Grep, Bash\"\n            />\n          </FormField.Control>\n        </FormField>\n      </div>\n\n      <FormField>\n        <FormField.Label>Triggers</FormField.Label>\n        <FormField.Control>\n          <Input\n            value={triggersRaw}\n            onChange={(e) => setTriggersRaw(e.target.value)}\n            placeholder=\"explain diff, summarize change\"\n          />\n        </FormField.Control>\n        <FormField.Hint>Optional keywords / patterns for auto-discovery.</FormField.Hint>\n      </FormField>\n\n      <FormField>\n        <FormField.Label>Active modes</FormField.Label>\n        <div className=\"flex flex-wrap gap-1.5\">\n          {ALL_MODES.map((m) => {\n            const on = modes.includes(m);\n            return (\n              <button\n                key={m}\n                type=\"button\"\n                onClick={() => toggleMode(m)}\n                aria-pressed={on}\n                className={cn(\n                  \"inline-flex h-7 items-center rounded-full border px-3 font-mono text-body-sm transition-colors\",\n                  on\n                    ? \"border-primary bg-primary/15 text-primary\"\n                    : \"border-border/60 bg-card text-muted-foreground hover:text-foreground\",\n                )}\n              >\n                {MODE_LABEL[m]}\n              </button>\n            );\n          })}\n        </div>\n        <FormField.Hint>\n          {modes.length === 0\n            ? \"Empty = global (available in every mode).\"\n            : `Only visible in: ${modes.map((m) => MODE_LABEL[m]).join(\", \")}.`}\n        </FormField.Hint>\n      </FormField>\n\n      <div className=\"flex items-center gap-3\">\n        <Switch\n          checked={enabled === \"enabled\"}\n          onCheckedChange={(v) => setEnabled(v ? \"enabled\" : \"disabled\")}\n          aria-label=\"Enabled\"\n        />\n        <span className=\"text-body-sm text-muted-foreground\">\n          {enabled === \"enabled\"\n            ? \"Enabled — available to the agent.\"\n            : \"Disabled — kept but hidden from the agent.\"}\n        </span>\n      </div>\n\n      <footer className=\"flex items-center justify-between gap-2 border-border/40 border-t pt-4\">\n        <div>\n          {onDelete ? (\n            <Button type=\"button\" variant=\"ghost\" onClick={onDelete}>\n              Delete\n            </Button>\n          ) : null}\n        </div>\n        <div className=\"flex items-center gap-2\">\n          {onCancel ? (\n            <Button type=\"button\" variant=\"secondary\" onClick={onCancel}>\n              Cancel\n            </Button>\n          ) : null}\n          <Button type=\"submit\" disabled={!canSave}>\n            {initial?.id ? \"Save changes\" : \"Create skill\"}\n          </Button>\n        </div>\n      </footer>\n    </form>\n  );\n}\n"]}

package/dist/chunk-NGZWBFTP.js

@@ -0,0 +1,45 @@
+import { cn } from './chunk-EWDN56AS.js';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var TIER_CLASS = {
+  free: "bg-muted/40 border-muted-foreground/20 text-muted-foreground",
+  hobby: "bg-warning/10 border-warning/30 text-warning",
+  pro: "bg-primary/10 border-primary/30 text-primary",
+  team: "bg-success/10 border-success/30 text-success",
+  enterprise: "bg-foreground/5 border-foreground/20 text-foreground"
+};
+var SIZE_CLASS = {
+  sm: "px-1.5 py-0 text-label-caps",
+  md: "px-2 py-0.5 text-label"
+};
+function defaultLabel(plan) {
+  return plan.charAt(0).toUpperCase() + plan.slice(1);
+}
+var PlanBadge = forwardRef(
+  ({ className, plan, label, size = "md", ...props }, ref) => {
+    const tierClass = TIER_CLASS[plan] ?? TIER_CLASS.free;
+    const displayLabel = label ?? defaultLabel(plan);
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: cn(
+          "inline-flex items-center rounded-md border",
+          "font-mono uppercase tabular-nums tracking-wider",
+          tierClass,
+          SIZE_CLASS[size],
+          className
+        ),
+        "data-plan": plan,
+        ...props,
+        children: displayLabel
+      }
+    );
+  }
+);
+PlanBadge.displayName = "PlanBadge";
+
+export { PlanBadge };
+//# sourceMappingURL=chunk-NGZWBFTP.js.map
+//# sourceMappingURL=chunk-NGZWBFTP.js.map

package/dist/chunk-NGZWBFTP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/plan-badge/plan-badge.tsx"],"names":[],"mappings":";;;;AAuCA,IAAM,UAAA,GAAuC;AAAA,EAC3C,IAAA,EAAM,8DAAA;AAAA,EACN,KAAA,EAAO,8CAAA;AAAA,EACP,GAAA,EAAK,8CAAA;AAAA,EACL,IAAA,EAAM,8CAAA;AAAA,EACN,UAAA,EAAY;AACd,CAAA;AAEA,IAAM,UAAA,GAAa;AAAA,EACjB,EAAA,EAAI,6BAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEA,SAAS,aAAa,IAAA,EAAwB;AAC5C,EAAA,OAAO,IAAA,CAAK,OAAO,CAAC,CAAA,CAAE,aAAY,GAAI,IAAA,CAAK,MAAM,CAAC,CAAA;AACpD;AAEA,IAAM,SAAA,GAAY,UAAA;AAAA,EAChB,CAAC,EAAE,SAAA,EAAW,IAAA,EAAM,KAAA,EAAO,OAAO,IAAA,EAAM,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAG1D,IAAA,MAAM,SAAA,GAAY,UAAA,CAAW,IAAI,CAAA,IAAK,UAAA,CAAW,IAAA;AACjD,IAAA,MAAM,YAAA,GAAe,KAAA,IAAS,YAAA,CAAa,IAAI,CAAA;AAC/C,IAAA,uBACE,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,4CAAA;AAAA,UACA,iDAAA;AAAA,UACA,SAAA;AAAA,UACA,WAAW,IAAI,CAAA;AAAA,UACf;AAAA,SACF;AAAA,QACA,WAAA,EAAW,IAAA;AAAA,QACV,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AACA,SAAA,CAAU,WAAA,GAAc,WAAA","file":"chunk-NGZWBFTP.js","sourcesContent":["import { forwardRef } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\n\n/**\n * PlanBadge — semantic pricing-tier badge.\n *\n * Five canonical tiers (`free` / `hobby` / `pro` / `team` / `enterprise`) with\n * distinct color tokens. Consumers self-document intent with `plan=\"hobby\"`\n * instead of mapping a generic `<Badge variant=\"outline\">` to colors per app.\n * Future rebrand / dark-mode tweaks propagate automatically — no consumer\n * code change.\n *\n * Visual spec (per `theo/docs/handoff/2026-05-23-theo-ui-cloud-dashboard-gaps-brief.md`):\n *\n *   | tier         | bg                  | border                   | text                  |\n *   |--------------|---------------------|--------------------------|-----------------------|\n *   | free         | bg-muted/40         | border-muted-foreground/20 | text-muted-foreground |\n *   | hobby        | bg-warning/10       | border-warning/30        | text-warning          |\n *   | pro          | bg-primary/10       | border-primary/30        | text-primary          |\n *   | team         | bg-success/10       | border-success/30        | text-success          |\n *   | enterprise   | bg-foreground/5     | border-foreground/20     | text-foreground       |\n *\n * Default label capitalizes the tier (`hobby → \"Hobby\"`, `enterprise → \"Enterprise\"`).\n *\n * Used by `<AccountMenu>` inline with the user name; usable standalone.\n */\n\nexport type PlanTier = \"free\" | \"hobby\" | \"pro\" | \"team\" | \"enterprise\";\n\nexport interface PlanBadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Plan tier identifier. */\n  plan: PlanTier;\n  /** Override the display label. Defaults to the capitalized tier name. */\n  label?: string;\n  /** Size variant. */\n  size?: \"sm\" | \"md\";\n}\n\nconst TIER_CLASS: Record<PlanTier, string> = {\n  free: \"bg-muted/40 border-muted-foreground/20 text-muted-foreground\",\n  hobby: \"bg-warning/10 border-warning/30 text-warning\",\n  pro: \"bg-primary/10 border-primary/30 text-primary\",\n  team: \"bg-success/10 border-success/30 text-success\",\n  enterprise: \"bg-foreground/5 border-foreground/20 text-foreground\",\n};\n\nconst SIZE_CLASS = {\n  sm: \"px-1.5 py-0 text-label-caps\",\n  md: \"px-2 py-0.5 text-label\",\n} as const;\n\nfunction defaultLabel(plan: PlanTier): string {\n  return plan.charAt(0).toUpperCase() + plan.slice(1);\n}\n\nconst PlanBadge = forwardRef<HTMLSpanElement, PlanBadgeProps>(\n  ({ className, plan, label, size = \"md\", ...props }, ref) => {\n    // Runtime fallback for unknown tier (TypeScript prevents this at compile\n    // time; the guard handles consumers casting an arbitrary string).\n    const tierClass = TIER_CLASS[plan] ?? TIER_CLASS.free;\n    const displayLabel = label ?? defaultLabel(plan);\n    return (\n      <span\n        ref={ref}\n        className={cn(\n          \"inline-flex items-center rounded-md border\",\n          \"font-mono uppercase tabular-nums tracking-wider\",\n          tierClass,\n          SIZE_CLASS[size],\n          className,\n        )}\n        data-plan={plan}\n        {...props}\n      >\n        {displayLabel}\n      </span>\n    );\n  },\n);\nPlanBadge.displayName = \"PlanBadge\";\n\nexport { PlanBadge };\n"]}