@usetheo/ui 0.9.0-next.0 → 0.11.0-next.0

package/dist/chunk-I7WYM63C.js

@@ -0,0 +1,170 @@
+import { cn } from './chunk-ZSRJCIWF.js';
+import * as ToastPrimitive from '@radix-ui/react-toast';
+import { cva } from 'class-variance-authority';
+import { X, AlertCircle, TriangleAlert, CheckCircle2, Info } from 'lucide-react';
+import { forwardRef, createContext, useState, useCallback, useMemo, useContext } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var toastVariants = cva(
+  [
+    "group pointer-events-auto relative flex w-full items-start gap-3 overflow-hidden rounded-lg border pr-10 shadow-md",
+    "data-[state=open]:slide-in-from-top-full data-[state=open]:fade-in-0 data-[state=open]:animate-in",
+    "data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=closed]:animate-out",
+    "data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)]",
+    "data-[swipe=end]:animate-out data-[swipe=cancel]:transition-[transform_var(--duration-base)] data-[swipe=move]:transition-none"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "border-border/40 bg-popover text-popover-foreground",
+        info: "border-primary/40 bg-popover text-popover-foreground",
+        success: "border-success/40 bg-popover text-popover-foreground",
+        warning: "border-warning/40 bg-popover text-popover-foreground",
+        destructive: "border-destructive/50 bg-popover text-popover-foreground"
+      },
+      size: {
+        sm: "p-3 text-body-sm",
+        md: "p-4 text-body-md",
+        lg: "p-5 text-body-lg"
+      }
+    },
+    defaultVariants: { variant: "default", size: "md" }
+  }
+);
+var iconForVariant = {
+  default: /* @__PURE__ */ jsx(Info, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }),
+  info: /* @__PURE__ */ jsx(Info, { className: "size-4 shrink-0 text-primary", "aria-hidden": "true" }),
+  success: /* @__PURE__ */ jsx(CheckCircle2, { className: "size-4 shrink-0 text-success", "aria-hidden": "true" }),
+  warning: /* @__PURE__ */ jsx(TriangleAlert, { className: "size-4 shrink-0 text-warning", "aria-hidden": "true" }),
+  destructive: /* @__PURE__ */ jsx(AlertCircle, { className: "size-4 shrink-0 text-destructive", "aria-hidden": "true" })
+};
+var ToastRoot = forwardRef(
+  ({ className, variant = "default", size, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    ToastPrimitive.Root,
+    {
+      ref,
+      className: cn(toastVariants({ variant, size }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: iconForVariant[variant] }),
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children })
+      ]
+    }
+  )
+);
+ToastRoot.displayName = "Toast";
+var ToastTitle = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitive.Title,
+  {
+    ref,
+    className: cn("font-medium text-body-sm text-foreground", className),
+    ...props
+  }
+));
+ToastTitle.displayName = "Toast.Title";
+var ToastDescription = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitive.Description,
+  {
+    ref,
+    className: cn("mt-0.5 text-body-sm text-muted-foreground", className),
+    ...props
+  }
+));
+ToastDescription.displayName = "Toast.Description";
+var ToastClose = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
+  ToastPrimitive.Close,
+  {
+    ref,
+    className: cn(
+      "absolute top-2 right-2 rounded-md p-1 text-muted-foreground opacity-70 transition-opacity hover:opacity-100",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      className
+    ),
+    "toast-close": "",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(X, { className: "size-3.5" }),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+    ]
+  }
+));
+ToastClose.displayName = "Toast.Close";
+var ToastAction = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitive.Action,
+  {
+    ref,
+    className: cn(
+      "mt-2 inline-flex h-7 items-center rounded-md border border-border/60 bg-card px-2 font-sans text-foreground text-label",
+      "transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      className
+    ),
+    ...props
+  }
+));
+ToastAction.displayName = "Toast.Action";
+var Toast = /* @__PURE__ */ Object.assign(ToastRoot, {
+  Title: ToastTitle,
+  Description: ToastDescription,
+  Close: ToastClose,
+  Action: ToastAction,
+  Provider: ToastPrimitive.Provider,
+  Viewport: ToastPrimitive.Viewport
+});
+var ToastContext = createContext(void 0);
+var POSITION_CLASS = {
+  "top-right": "top-4 right-4",
+  "top-left": "top-4 left-4",
+  "bottom-right": "bottom-4 right-4",
+  "bottom-left": "bottom-4 left-4"
+};
+function Toaster({ children, position = "bottom-right", className }) {
+  const [toasts, setToasts] = useState([]);
+  const dismiss = useCallback((id) => {
+    setToasts((cur) => cur.filter((t) => t.id !== id));
+  }, []);
+  const toast = useCallback((descriptor) => {
+    const id = `t-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+    setToasts((cur) => [...cur, { id, ...descriptor }]);
+    return id;
+  }, []);
+  const value = useMemo(() => ({ toast, dismiss }), [toast, dismiss]);
+  return /* @__PURE__ */ jsx(ToastContext.Provider, { value, children: /* @__PURE__ */ jsxs(Toast.Provider, { swipeDirection: "right", duration: 5e3, children: [
+    children,
+    toasts.map((t) => /* @__PURE__ */ jsxs(
+      Toast,
+      {
+        variant: t.variant ?? "default",
+        duration: t.duration === null ? Number.POSITIVE_INFINITY : t.duration ?? 5e3,
+        onOpenChange: (open) => {
+          if (!open) dismiss(t.id);
+        },
+        children: [
+          t.title ? /* @__PURE__ */ jsx(Toast.Title, { children: t.title }) : null,
+          t.description ? /* @__PURE__ */ jsx(Toast.Description, { children: t.description }) : null,
+          t.action ? /* @__PURE__ */ jsx(Toast.Action, { altText: String(t.action.label), onClick: t.action.onClick, children: t.action.label }) : null,
+          /* @__PURE__ */ jsx(Toast.Close, {})
+        ]
+      },
+      t.id
+    )),
+    /* @__PURE__ */ jsx(
+      Toast.Viewport,
+      {
+        className: cn(
+          "fixed z-50 flex max-h-screen w-full max-w-sm flex-col gap-2 outline-none",
+          POSITION_CLASS[position],
+          className
+        )
+      }
+    )
+  ] }) });
+}
+function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used inside <Toaster>.");
+  return ctx;
+}
+
+export { Toast, Toaster, useToast };
+//# sourceMappingURL=chunk-I7WYM63C.js.map
+//# sourceMappingURL=chunk-I7WYM63C.js.map

package/dist/chunk-I7WYM63C.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/toast/toast.tsx","../src/components/primitives/toast/toaster.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"chunk-I7WYM63C.js","sourcesContent":["import * as ToastPrimitive from \"@radix-ui/react-toast\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { AlertCircle, CheckCircle2, Info, TriangleAlert, X } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\n\n/**\n * Toast — transient notification built on Radix Toast.\n *\n * Composition: app mounts <Toaster /> once. Components call `toast(...)` via\n * the `useToast()` hook (see toaster.tsx). The look is theme-aware: status\n * icon coloured by --primary/--success/--warning/--destructive; the body\n * card uses --popover surface.\n *\n * Variants:\n *   - default (neutral)\n *   - info (primary tint)\n *   - success (deploy ok, action completed)\n *   - warning (queued, permission requested)\n *   - destructive (failed, fatal)\n */\n\nconst toastVariants = cva(\n  [\n    \"group pointer-events-auto relative flex w-full items-start gap-3 overflow-hidden rounded-lg border pr-10 shadow-md\",\n    \"data-[state=open]:slide-in-from-top-full data-[state=open]:fade-in-0 data-[state=open]:animate-in\",\n    \"data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=closed]:animate-out\",\n    \"data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)]\",\n    \"data-[swipe=end]:animate-out data-[swipe=cancel]:transition-[transform_var(--duration-base)] data-[swipe=move]:transition-none\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: \"border-border/40 bg-popover text-popover-foreground\",\n        info: \"border-primary/40 bg-popover text-popover-foreground\",\n        success: \"border-success/40 bg-popover text-popover-foreground\",\n        warning: \"border-warning/40 bg-popover text-popover-foreground\",\n        destructive: \"border-destructive/50 bg-popover text-popover-foreground\",\n      },\n      size: {\n        sm: \"p-3 text-body-sm\",\n        md: \"p-4 text-body-md\",\n        lg: \"p-5 text-body-lg\",\n      },\n    },\n    defaultVariants: { variant: \"default\", size: \"md\" },\n  },\n);\n\nconst iconForVariant: Record<NonNullable<ToastVariant>, ReactNode> = {\n  default: <Info className=\"size-4 shrink-0 text-muted-foreground\" aria-hidden=\"true\" />,\n  info: <Info className=\"size-4 shrink-0 text-primary\" aria-hidden=\"true\" />,\n  success: <CheckCircle2 className=\"size-4 shrink-0 text-success\" aria-hidden=\"true\" />,\n  warning: <TriangleAlert className=\"size-4 shrink-0 text-warning\" aria-hidden=\"true\" />,\n  destructive: <AlertCircle className=\"size-4 shrink-0 text-destructive\" aria-hidden=\"true\" />,\n};\n\ntype ToastVariant = NonNullable<VariantProps<typeof toastVariants>[\"variant\"]>;\n\ninterface ToastProps\n  extends ComponentPropsWithoutRef<typeof ToastPrimitive.Root>,\n    VariantProps<typeof toastVariants> {}\n\nconst ToastRoot = forwardRef<ElementRef<typeof ToastPrimitive.Root>, ToastProps>(\n  ({ className, variant = \"default\", size, children, ...props }, ref) => (\n    <ToastPrimitive.Root\n      ref={ref}\n      className={cn(toastVariants({ variant, size }), className)}\n      {...props}\n    >\n      <span aria-hidden=\"true\">{iconForVariant[variant as ToastVariant]}</span>\n      <div className=\"min-w-0 flex-1\">{children}</div>\n    </ToastPrimitive.Root>\n  ),\n);\nToastRoot.displayName = \"Toast\";\n\nconst ToastTitle = forwardRef<\n  ElementRef<typeof ToastPrimitive.Title>,\n  ComponentPropsWithoutRef<typeof ToastPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitive.Title\n    ref={ref}\n    className={cn(\"font-medium text-body-sm text-foreground\", className)}\n    {...props}\n  />\n));\nToastTitle.displayName = \"Toast.Title\";\n\nconst ToastDescription = forwardRef<\n  ElementRef<typeof ToastPrimitive.Description>,\n  ComponentPropsWithoutRef<typeof ToastPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitive.Description\n    ref={ref}\n    className={cn(\"mt-0.5 text-body-sm text-muted-foreground\", className)}\n    {...props}\n  />\n));\nToastDescription.displayName = \"Toast.Description\";\n\nconst ToastClose = forwardRef<\n  ElementRef<typeof ToastPrimitive.Close>,\n  ComponentPropsWithoutRef<typeof ToastPrimitive.Close>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitive.Close\n    ref={ref}\n    className={cn(\n      \"absolute top-2 right-2 rounded-md p-1 text-muted-foreground opacity-70 transition-opacity hover:opacity-100\",\n      \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n      className,\n    )}\n    toast-close=\"\"\n    {...props}\n  >\n    <X className=\"size-3.5\" />\n    <span className=\"sr-only\">Close</span>\n  </ToastPrimitive.Close>\n));\nToastClose.displayName = \"Toast.Close\";\n\nconst ToastAction = forwardRef<\n  ElementRef<typeof ToastPrimitive.Action>,\n  ComponentPropsWithoutRef<typeof ToastPrimitive.Action>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitive.Action\n    ref={ref}\n    className={cn(\n      \"mt-2 inline-flex h-7 items-center rounded-md border border-border/60 bg-card px-2 font-sans text-foreground text-label\",\n      \"transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n      className,\n    )}\n    {...props}\n  />\n));\nToastAction.displayName = \"Toast.Action\";\n\nconst Toast = /*#__PURE__*/ Object.assign(ToastRoot, {\n  Title: ToastTitle,\n  Description: ToastDescription,\n  Close: ToastClose,\n  Action: ToastAction,\n  Provider: ToastPrimitive.Provider,\n  Viewport: ToastPrimitive.Viewport,\n});\n\nexport { Toast, toastVariants, type ToastVariant };\n","import { createContext, useCallback, useContext, useMemo, useState } from \"react\";\nimport type { JSX, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport { Toast, type ToastVariant } from \"./toast.js\";\n\ninterface ToastDescriptor {\n  id: string;\n  title?: ReactNode;\n  description?: ReactNode;\n  variant?: ToastVariant;\n  /** Auto-dismiss in ms. Default 5000. Pass `null` for sticky. */\n  duration?: number | null;\n  action?: { label: ReactNode; onClick: () => void };\n}\n\ninterface ToastContextValue {\n  toast: (descriptor: Omit<ToastDescriptor, \"id\">) => string;\n  dismiss: (id: string) => void;\n}\n\nconst ToastContext = createContext<ToastContextValue | undefined>(undefined);\n\ninterface ToasterProps {\n  children: ReactNode;\n  /** Toast viewport position. Default bottom-right. */\n  position?: \"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\";\n  className?: string;\n}\n\nconst POSITION_CLASS: Record<NonNullable<ToasterProps[\"position\"]>, string> = {\n  \"top-right\": \"top-4 right-4\",\n  \"top-left\": \"top-4 left-4\",\n  \"bottom-right\": \"bottom-4 right-4\",\n  \"bottom-left\": \"bottom-4 left-4\",\n};\n\n/**\n * Toaster — mount once at the app root. Wraps children in a Radix Toast\n * Provider + Viewport and exposes the `useToast()` hook for descendants.\n */\nfunction Toaster({ children, position = \"bottom-right\", className }: ToasterProps): JSX.Element {\n  const [toasts, setToasts] = useState<ToastDescriptor[]>([]);\n\n  const dismiss = useCallback((id: string) => {\n    setToasts((cur) => cur.filter((t) => t.id !== id));\n  }, []);\n\n  const toast = useCallback((descriptor: Omit<ToastDescriptor, \"id\">) => {\n    const id = `t-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;\n    setToasts((cur) => [...cur, { id, ...descriptor }]);\n    return id;\n  }, []);\n\n  const value = useMemo(() => ({ toast, dismiss }), [toast, dismiss]);\n\n  return (\n    <ToastContext.Provider value={value}>\n      <Toast.Provider swipeDirection=\"right\" duration={5000}>\n        {children}\n        {toasts.map((t) => (\n          <Toast\n            key={t.id}\n            variant={t.variant ?? \"default\"}\n            duration={t.duration === null ? Number.POSITIVE_INFINITY : (t.duration ?? 5000)}\n            onOpenChange={(open) => {\n              if (!open) dismiss(t.id);\n            }}\n          >\n            {t.title ? <Toast.Title>{t.title}</Toast.Title> : null}\n            {t.description ? <Toast.Description>{t.description}</Toast.Description> : null}\n            {t.action ? (\n              <Toast.Action altText={String(t.action.label)} onClick={t.action.onClick}>\n                {t.action.label}\n              </Toast.Action>\n            ) : null}\n            <Toast.Close />\n          </Toast>\n        ))}\n        <Toast.Viewport\n          className={cn(\n            \"fixed z-50 flex max-h-screen w-full max-w-sm flex-col gap-2 outline-none\",\n            POSITION_CLASS[position],\n            className,\n          )}\n        />\n      </Toast.Provider>\n    </ToastContext.Provider>\n  );\n}\n\n/**\n * useToast — fire toasts from anywhere inside <Toaster>.\n *\n * Example:\n *   const { toast } = useToast();\n *   toast({ title: \"Deployed\", variant: \"success\" });\n */\nfunction useToast(): ToastContextValue {\n  const ctx = useContext(ToastContext);\n  if (!ctx) throw new Error(\"useToast must be used inside <Toaster>.\");\n  return ctx;\n}\n\nexport { Toaster, useToast };\n"]}

package/dist/chunk-IPEYGWA7.js

@@ -0,0 +1,186 @@
+import { ALL_MODES, MODE_LABEL } from './chunk-VM4RMQQN.js';
+import { Textarea } from './chunk-WWNH5ENT.js';
+import { Switch } from './chunk-3HOXC25T.js';
+import { Select } from './chunk-EP25QJ4N.js';
+import { FormField } from './chunk-TK24HQJJ.js';
+import { Input } from './chunk-H3VJMFJQ.js';
+import { Button } from './chunk-57NXT3OX.js';
+import { cn } from './chunk-ZSRJCIWF.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-IPEYGWA7.js.map
+//# sourceMappingURL=chunk-IPEYGWA7.js.map

package/dist/chunk-IPEYGWA7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/skill-editor/skill-editor.tsx"],"names":[],"mappings":"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","file":"chunk-IPEYGWA7.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-IWSLOBYG.js

@@ -0,0 +1,199 @@
+import { Table } from './chunk-YRSKXEOD.js';
+import { Skeleton } from './chunk-K5ARID4S.js';
+import { Pagination } from './chunk-YOGHS4UU.js';
+import { DropdownMenu } from './chunk-MI5CXMZU.js';
+import { EmptyState } from './chunk-SWJ4EUOI.js';
+import { cn } from './chunk-ZSRJCIWF.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", { 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, { "aria-label": "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-IWSLOBYG.js.map
+//# sourceMappingURL=chunk-IWSLOBYG.js.map