@usetheo/ui 0.13.0 → 0.13.2

package/dist/chunk-65YSFZAN.js

@@ -0,0 +1,192 @@
+"use client";
+import { OTHER_OPTION_VALUE, digitKeyToIndex } from './chunk-T2OKGV6M.js';
+import { Input } from './chunk-BYUWQ6OP.js';
+import { Label } from './chunk-TY6NTWN5.js';
+import { Checkbox } from './chunk-JRW53TVG.js';
+import { BadgeWithDot } from './chunk-624AATQZ.js';
+import { Button } from './chunk-25KBUQEQ.js';
+import { cn } from './chunk-EWDN56AS.js';
+import { forwardRef, useId, useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var MultiSelectPrompt = forwardRef(
+  ({
+    className,
+    question,
+    description,
+    badge,
+    options,
+    value,
+    defaultValue,
+    onValueChange,
+    allowOther = false,
+    otherLabel = "Other",
+    otherPlaceholder = "Type your answer\u2026",
+    otherText,
+    onOtherTextChange,
+    enableKeyboardShortcuts = true,
+    showNumbers,
+    minSelected = 1,
+    confirmLabel = "Confirm",
+    cancelLabel = "Cancel",
+    onConfirm,
+    onCancel,
+    ...props
+  }, ref) => {
+    const baseId = useId();
+    const questionId = `${baseId}-question`;
+    const optionId = (value_) => `${baseId}-opt-${value_}`;
+    const [internalValues, setInternalValues] = useState(defaultValue ?? []);
+    const values = value !== void 0 ? value : internalValues;
+    const [internalOther, setInternalOther] = useState("");
+    const otherValue = otherText !== void 0 ? otherText : internalOther;
+    const numbersVisible = showNumbers ?? enableKeyboardShortcuts;
+    const hasPreview = options.some((option) => option.preview != null);
+    const selectedPreviews = options.filter(
+      (option) => option.preview != null && values.includes(option.value)
+    );
+    const toggle = (next) => {
+      const updated = values.includes(next) ? values.filter((current) => current !== next) : [...values, next];
+      if (value === void 0) setInternalValues(updated);
+      onValueChange?.(updated);
+    };
+    const setOther = (next) => {
+      if (otherText === void 0) setInternalOther(next);
+      onOtherTextChange?.(next);
+    };
+    const handleKeyDown = (event) => {
+      if (!enableKeyboardShortcuts) return;
+      const target = event.target;
+      if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") return;
+      const index = digitKeyToIndex(event.key);
+      if (index === null || index >= options.length) return;
+      const option = options[index];
+      if (!option || option.disabled) return;
+      event.preventDefault();
+      toggle(option.value);
+    };
+    const otherChecked = values.includes(OTHER_OPTION_VALUE);
+    const confirm = () => {
+      if (values.length < minSelected) return;
+      onConfirm?.(otherChecked ? { values, otherText: otherValue } : { values });
+    };
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "data-slot": "multi-select-prompt",
+        ref,
+        "aria-labelledby": questionId,
+        onKeyDown: handleKeyDown,
+        className: cn(
+          "grid w-full gap-4 rounded-xl border border-border bg-card p-5 text-card-foreground shadow-md",
+          "transition-shadow duration-base ease-out-soft",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: "flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ jsx("h3", { id: questionId, className: "font-display text-foreground text-title-md tracking-tight", children: question }),
+            badge != null ? /* @__PURE__ */ jsx(BadgeWithDot, { variant: "primary", size: "sm", className: "shrink-0", children: badge }) : null
+          ] }),
+          description != null ? /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: description }) : null,
+          /* @__PURE__ */ jsxs("div", { className: cn("grid gap-5", hasPreview && "md:grid-cols-2"), children: [
+            /* @__PURE__ */ jsxs("fieldset", { className: "m-0 grid min-w-0 gap-2 border-0 p-0", "aria-labelledby": questionId, children: [
+              options.map((option, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+                /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    id: optionId(option.value),
+                    checked: values.includes(option.value),
+                    disabled: option.disabled,
+                    onCheckedChange: () => toggle(option.value),
+                    className: "mt-0.5"
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  Label,
+                  {
+                    htmlFor: optionId(option.value),
+                    className: "flex flex-1 cursor-pointer flex-col items-start gap-0.5",
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-body-md text-foreground", children: option.label }),
+                      option.description != null ? /* @__PURE__ */ jsx("span", { className: "text-body-sm text-muted-foreground", children: option.description }) : null
+                    ]
+                  }
+                ),
+                numbersVisible && index < 9 ? /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: "mt-0.5 shrink-0 rounded border border-border bg-muted px-1.5 font-mono text-label text-muted-foreground",
+                    children: index + 1
+                  }
+                ) : null
+              ] }, option.value)),
+              allowOther ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 border-border/40 border-t pt-2", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+                  /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      id: optionId(OTHER_OPTION_VALUE),
+                      checked: otherChecked,
+                      onCheckedChange: () => toggle(OTHER_OPTION_VALUE),
+                      className: "mt-0.5"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Label,
+                    {
+                      htmlFor: optionId(OTHER_OPTION_VALUE),
+                      className: "flex-1 cursor-pointer text-body-md",
+                      children: otherLabel
+                    }
+                  )
+                ] }),
+                otherChecked ? /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    size: "sm",
+                    "aria-label": typeof otherLabel === "string" ? otherLabel : "Other",
+                    placeholder: otherPlaceholder,
+                    value: otherValue,
+                    onChange: (event) => setOther(event.target.value),
+                    className: "ml-7"
+                  }
+                ) : null
+              ] }) : null
+            ] }),
+            hasPreview ? /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border/60 bg-muted/40 p-3", children: [
+              /* @__PURE__ */ jsx("p", { className: "mb-2 font-sans text-label-caps text-muted-foreground uppercase tracking-wider", children: "Preview" }),
+              selectedPreviews.length > 0 ? /* @__PURE__ */ jsx("div", { className: "grid gap-3", children: selectedPreviews.map((option) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "whitespace-pre-wrap break-words font-mono text-code-sm text-foreground",
+                  children: option.preview
+                },
+                option.value
+              )) }) : /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: "Select an option to preview." })
+            ] }) : null
+          ] }),
+          onConfirm || onCancel ? /* @__PURE__ */ jsxs("footer", { className: "flex items-center justify-end gap-2", children: [
+            onCancel ? /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: onCancel, children: cancelLabel }) : null,
+            onConfirm ? /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "sm",
+                variant: "primary",
+                disabled: values.length < minSelected,
+                onClick: confirm,
+                children: confirmLabel
+              }
+            ) : null
+          ] }) : null
+        ]
+      }
+    );
+  }
+);
+MultiSelectPrompt.displayName = "MultiSelectPrompt";
+
+export { MultiSelectPrompt };
+//# sourceMappingURL=chunk-65YSFZAN.js.map
+//# sourceMappingURL=chunk-65YSFZAN.js.map

package/dist/chunk-65YSFZAN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/multi-select-prompt/multi-select-prompt.tsx"],"names":[],"mappings":"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","file":"chunk-65YSFZAN.js","sourcesContent":["\"use client\";\n\nimport { forwardRef, useId, useState } from \"react\";\nimport type { HTMLAttributes, KeyboardEvent, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport { OTHER_OPTION_VALUE, type PromptOption, digitKeyToIndex } from \"../../../lib/prompt.js\";\nimport { Badge } from \"../../primitives/badge/index.js\";\nimport { Button } from \"../../primitives/button/index.js\";\nimport { Checkbox } from \"../../primitives/checkbox/index.js\";\nimport { Input } from \"../../primitives/input/index.js\";\nimport { Label } from \"../../primitives/label/index.js\";\n\n/**\n * MultiSelectPrompt — multi-select \"ask the user\" card for agent surfaces.\n *\n * The checkbox sibling of `ChoicePrompt`: same question + header chip + option\n * shape + `1`..`9` number-key toggles + injectable free-text \"Other\" +\n * side-by-side preview, but the user may select any number of options.\n *\n * Renders one question at a time — sequencing is the consumer's responsibility.\n * Controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).\n */\n\n/** Payload handed to `onConfirm`. */\nexport interface MultiSelectPromptResult {\n  /** The selected option values (includes the reserved Other value when checked). */\n  values: string[];\n  /** Present only when the Other option is among the selected values. */\n  otherText?: string;\n}\n\nexport interface MultiSelectPromptProps extends Omit<HTMLAttributes<HTMLElement>, \"onSelect\"> {\n  /** The question being asked. */\n  question: ReactNode;\n  /** Optional secondary line under the question. */\n  description?: ReactNode;\n  /** Optional short header chip (rendered as a Badge). */\n  badge?: ReactNode;\n  /** The selectable options. */\n  options: PromptOption[];\n  /** Controlled selected values. */\n  value?: string[];\n  /** Initial selected values when uncontrolled. */\n  defaultValue?: string[];\n  /** Fired with the full value array whenever the selection changes. */\n  onValueChange?: (values: string[]) => void;\n  /** Inject a free-text \"Other\" option as the last row. */\n  allowOther?: boolean;\n  /** Label for the Other row. Defaults to \"Other\". */\n  otherLabel?: ReactNode;\n  /** Placeholder for the Other text field. */\n  otherPlaceholder?: string;\n  /** Controlled Other text. */\n  otherText?: string;\n  /** Fired with the Other text on every keystroke. */\n  onOtherTextChange?: (text: string) => void;\n  /** Enable `1`..`9` number-key toggling. Default true. */\n  enableKeyboardShortcuts?: boolean;\n  /** Show the `1`..`9` hint chips next to options. Defaults to the shortcut flag. */\n  showNumbers?: boolean;\n  /** Minimum selections required before Confirm enables. Default 1. */\n  minSelected?: number;\n  /** Confirm button label. Defaults to \"Confirm\". Omit `onConfirm` to hide it. */\n  confirmLabel?: ReactNode;\n  /** Cancel button label. Defaults to \"Cancel\". Omit `onCancel` to hide it. */\n  cancelLabel?: ReactNode;\n  /** Pressing Confirm. Receives the selection (and Other text when relevant). */\n  onConfirm?: (result: MultiSelectPromptResult) => void;\n  /** Pressing Cancel. */\n  onCancel?: () => void;\n}\n\nconst MultiSelectPrompt = forwardRef<HTMLElement, MultiSelectPromptProps>(\n  (\n    {\n      className,\n      question,\n      description,\n      badge,\n      options,\n      value,\n      defaultValue,\n      onValueChange,\n      allowOther = false,\n      otherLabel = \"Other\",\n      otherPlaceholder = \"Type your answer…\",\n      otherText,\n      onOtherTextChange,\n      enableKeyboardShortcuts = true,\n      showNumbers,\n      minSelected = 1,\n      confirmLabel = \"Confirm\",\n      cancelLabel = \"Cancel\",\n      onConfirm,\n      onCancel,\n      ...props\n    },\n    ref,\n  ) => {\n    const baseId = useId();\n    const questionId = `${baseId}-question`;\n    const optionId = (value_: string): string => `${baseId}-opt-${value_}`;\n\n    const [internalValues, setInternalValues] = useState<string[]>(defaultValue ?? []);\n    const values = value !== undefined ? value : internalValues;\n\n    const [internalOther, setInternalOther] = useState(\"\");\n    const otherValue = otherText !== undefined ? otherText : internalOther;\n\n    const numbersVisible = showNumbers ?? enableKeyboardShortcuts;\n    const hasPreview = options.some((option) => option.preview != null);\n    const selectedPreviews = options.filter(\n      (option) => option.preview != null && values.includes(option.value),\n    );\n\n    const toggle = (next: string): void => {\n      const updated = values.includes(next)\n        ? values.filter((current) => current !== next)\n        : [...values, next];\n      if (value === undefined) setInternalValues(updated);\n      onValueChange?.(updated);\n    };\n\n    const setOther = (next: string): void => {\n      if (otherText === undefined) setInternalOther(next);\n      onOtherTextChange?.(next);\n    };\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLElement>): void => {\n      if (!enableKeyboardShortcuts) return;\n      const target = event.target as HTMLElement;\n      if (target.tagName === \"INPUT\" || target.tagName === \"TEXTAREA\") return;\n      const index = digitKeyToIndex(event.key);\n      if (index === null || index >= options.length) return;\n      const option = options[index];\n      if (!option || option.disabled) return;\n      event.preventDefault();\n      toggle(option.value);\n    };\n\n    const otherChecked = values.includes(OTHER_OPTION_VALUE);\n\n    const confirm = (): void => {\n      if (values.length < minSelected) return;\n      onConfirm?.(otherChecked ? { values, otherText: otherValue } : { values });\n    };\n\n    return (\n      <section\n        data-slot=\"multi-select-prompt\"\n        ref={ref}\n        aria-labelledby={questionId}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          \"grid w-full gap-4 rounded-xl border border-border bg-card p-5 text-card-foreground shadow-md\",\n          \"transition-shadow duration-base ease-out-soft\",\n          className,\n        )}\n        {...props}\n      >\n        <header className=\"flex items-start justify-between gap-3\">\n          <h3 id={questionId} className=\"font-display text-foreground text-title-md tracking-tight\">\n            {question}\n          </h3>\n          {badge != null ? (\n            <Badge variant=\"primary\" size=\"sm\" className=\"shrink-0\">\n              {badge}\n            </Badge>\n          ) : null}\n        </header>\n        {description != null ? (\n          <p className=\"text-body-sm text-muted-foreground\">{description}</p>\n        ) : null}\n\n        <div className={cn(\"grid gap-5\", hasPreview && \"md:grid-cols-2\")}>\n          <fieldset className=\"m-0 grid min-w-0 gap-2 border-0 p-0\" aria-labelledby={questionId}>\n            {options.map((option, index) => (\n              <div key={option.value} className=\"flex items-start gap-3\">\n                <Checkbox\n                  id={optionId(option.value)}\n                  checked={values.includes(option.value)}\n                  disabled={option.disabled}\n                  onCheckedChange={() => toggle(option.value)}\n                  className=\"mt-0.5\"\n                />\n                <Label\n                  htmlFor={optionId(option.value)}\n                  className=\"flex flex-1 cursor-pointer flex-col items-start gap-0.5\"\n                >\n                  <span className=\"text-body-md text-foreground\">{option.label}</span>\n                  {option.description != null ? (\n                    <span className=\"text-body-sm text-muted-foreground\">{option.description}</span>\n                  ) : null}\n                </Label>\n                {numbersVisible && index < 9 ? (\n                  <span\n                    aria-hidden=\"true\"\n                    className=\"mt-0.5 shrink-0 rounded border border-border bg-muted px-1.5 font-mono text-label text-muted-foreground\"\n                  >\n                    {index + 1}\n                  </span>\n                ) : null}\n              </div>\n            ))}\n\n            {allowOther ? (\n              <div className=\"flex flex-col gap-2 border-border/40 border-t pt-2\">\n                <div className=\"flex items-start gap-3\">\n                  <Checkbox\n                    id={optionId(OTHER_OPTION_VALUE)}\n                    checked={otherChecked}\n                    onCheckedChange={() => toggle(OTHER_OPTION_VALUE)}\n                    className=\"mt-0.5\"\n                  />\n                  <Label\n                    htmlFor={optionId(OTHER_OPTION_VALUE)}\n                    className=\"flex-1 cursor-pointer text-body-md\"\n                  >\n                    {otherLabel}\n                  </Label>\n                </div>\n                {otherChecked ? (\n                  <Input\n                    size=\"sm\"\n                    aria-label={typeof otherLabel === \"string\" ? otherLabel : \"Other\"}\n                    placeholder={otherPlaceholder}\n                    value={otherValue}\n                    onChange={(event) => setOther(event.target.value)}\n                    className=\"ml-7\"\n                  />\n                ) : null}\n              </div>\n            ) : null}\n          </fieldset>\n\n          {hasPreview ? (\n            <div className=\"rounded-lg border border-border/60 bg-muted/40 p-3\">\n              <p className=\"mb-2 font-sans text-label-caps text-muted-foreground uppercase tracking-wider\">\n                Preview\n              </p>\n              {selectedPreviews.length > 0 ? (\n                <div className=\"grid gap-3\">\n                  {selectedPreviews.map((option) => (\n                    <div\n                      key={option.value}\n                      className=\"whitespace-pre-wrap break-words font-mono text-code-sm text-foreground\"\n                    >\n                      {option.preview}\n                    </div>\n                  ))}\n                </div>\n              ) : (\n                <p className=\"text-body-sm text-muted-foreground\">Select an option to preview.</p>\n              )}\n            </div>\n          ) : null}\n        </div>\n\n        {onConfirm || onCancel ? (\n          <footer className=\"flex items-center justify-end gap-2\">\n            {onCancel ? (\n              <Button size=\"sm\" variant=\"secondary\" onClick={onCancel}>\n                {cancelLabel}\n              </Button>\n            ) : null}\n            {onConfirm ? (\n              <Button\n                size=\"sm\"\n                variant=\"primary\"\n                disabled={values.length < minSelected}\n                onClick={confirm}\n              >\n                {confirmLabel}\n              </Button>\n            ) : null}\n          </footer>\n        ) : null}\n      </section>\n    );\n  },\n);\nMultiSelectPrompt.displayName = \"MultiSelectPrompt\";\n\nexport { MultiSelectPrompt };\n"]}

package/dist/chunk-6IODJQWC.js

@@ -0,0 +1,47 @@
+import { cn } from './chunk-EWDN56AS.js';
+import { forwardRef } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var SocialAuthRow = forwardRef(
+  ({ className, providers, onSelect, vertical, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "social-auth-row",
+      ref,
+      className: cn(
+        "grid gap-2",
+        vertical ? "grid-cols-1" : `grid-cols-${Math.min(providers.length, 4)}`,
+        className
+      ),
+      style: !vertical ? { gridTemplateColumns: `repeat(${providers.length}, minmax(0, 1fr))` } : void 0,
+      ...props,
+      children: providers.map((p) => {
+        const Icon = p.icon;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => onSelect?.(p.id),
+            className: cn(
+              "inline-flex h-10 items-center justify-center gap-2 rounded-lg border border-border bg-card",
+              "px-4 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"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(Icon, { className: "size-4", "aria-hidden": "true" }),
+              p.label
+            ]
+          },
+          p.id
+        );
+      })
+    }
+  )
+);
+SocialAuthRow.displayName = "SocialAuthRow";
+
+export { SocialAuthRow };
+//# sourceMappingURL=chunk-6IODJQWC.js.map
+//# sourceMappingURL=chunk-6IODJQWC.js.map

package/dist/chunk-6IODJQWC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/social-auth-row/social-auth-row.tsx"],"names":[],"mappings":";;;;AA2BA,IAAM,aAAA,GAAgB,UAAA;AAAA,EACpB,CAAC,EAAE,SAAA,EAAW,SAAA,EAAW,UAAU,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,qBACvD,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,YAAA;AAAA,QACA,QAAA,GAAW,gBAAgB,CAAA,UAAA,EAAa,IAAA,CAAK,IAAI,SAAA,CAAU,MAAA,EAAQ,CAAC,CAAC,CAAA,CAAA;AAAA,QACrE;AAAA,OACF;AAAA,MACA,KAAA,EACE,CAAC,QAAA,GACG,EAAE,qBAAqB,CAAA,OAAA,EAAU,SAAA,CAAU,MAAM,CAAA,iBAAA,CAAA,EAAoB,GACrE,MAAA;AAAA,MAEL,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA,SAAA,CAAU,GAAA,CAAI,CAAC,CAAA,KAAM;AACpB,QAAA,MAAM,OAAO,CAAA,CAAE,IAAA;AACf,QAAA,uBACE,IAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YAEC,IAAA,EAAK,QAAA;AAAA,YACL,OAAA,EAAS,MAAM,QAAA,GAAW,CAAA,CAAE,EAAE,CAAA;AAAA,YAC9B,SAAA,EAAW,EAAA;AAAA,cACT,4FAAA;AAAA,cACA,yDAAA;AAAA,cACA,+CAAA;AAAA,cACA,gBAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAU,QAAA,EAAS,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,cAC3C,CAAA,CAAE;AAAA;AAAA,WAAA;AAAA,UAZE,CAAA,CAAE;AAAA,SAaT;AAAA,MAEJ,CAAC;AAAA;AAAA;AAGP;AACA,aAAA,CAAc,WAAA,GAAc,eAAA","file":"chunk-6IODJQWC.js","sourcesContent":["import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport type { IconComponent } from \"../../../lib/types.js\";\n\nexport interface SocialProvider {\n  id: string;\n  label: ReactNode;\n  /** Icon component (e.g. brand-specific SVG). */\n  icon: IconComponent;\n}\n\ninterface SocialAuthRowProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  providers: SocialProvider[];\n  onSelect?: (id: string) => void;\n  /**\n   * Stack vertically instead of horizontally (single-column flow).\n   */\n  vertical?: boolean;\n}\n\n/**\n * SocialAuthRow — row of OAuth provider buttons.\n *\n * Stateless; caller wires the redirect on `onSelect`. Buttons share Theo button\n * styling but with provider icon prominently on the left.\n */\nconst SocialAuthRow = forwardRef<HTMLDivElement, SocialAuthRowProps>(\n  ({ className, providers, onSelect, vertical, ...props }, ref) => (\n    <div\n      data-slot=\"social-auth-row\"\n      ref={ref}\n      className={cn(\n        \"grid gap-2\",\n        vertical ? \"grid-cols-1\" : `grid-cols-${Math.min(providers.length, 4)}`,\n        className,\n      )}\n      style={\n        !vertical\n          ? { gridTemplateColumns: `repeat(${providers.length}, minmax(0, 1fr))` }\n          : undefined\n      }\n      {...props}\n    >\n      {providers.map((p) => {\n        const Icon = p.icon;\n        return (\n          <button\n            key={p.id}\n            type=\"button\"\n            onClick={() => onSelect?.(p.id)}\n            className={cn(\n              \"inline-flex h-10 items-center justify-center gap-2 rounded-lg border border-border bg-card\",\n              \"px-4 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            )}\n          >\n            <Icon className=\"size-4\" aria-hidden=\"true\" />\n            {p.label}\n          </button>\n        );\n      })}\n    </div>\n  ),\n);\nSocialAuthRow.displayName = \"SocialAuthRow\";\n\nexport { SocialAuthRow };\n"]}

package/dist/chunk-6ORS6XOE.js

@@ -0,0 +1,57 @@
+import { useInLiveRegion } from './chunk-UGKI466V.js';
+import { cn } from './chunk-EWDN56AS.js';
+import { Terminal } from 'lucide-react';
+import { forwardRef } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var kindColor = {
+  command: "text-foreground",
+  stdout: "text-muted-foreground",
+  stderr: "text-destructive",
+  ok: "text-success",
+  prompt: "text-primary"
+};
+var TerminalPanel = forwardRef(
+  ({ className, title = "Terminal", lines, promptPrefix = "$", live = "off", ...props }, ref) => {
+    const inLiveRegion = useInLiveRegion();
+    const effectiveLive = inLiveRegion ? "off" : live;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "terminal-panel",
+        ref,
+        className: cn("overflow-hidden rounded-xl border border-border bg-card", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: "flex items-center gap-2 border-border/40 border-b px-3 py-2", children: [
+            /* @__PURE__ */ jsx(Terminal, { className: "size-3.5 text-muted-foreground", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: "font-sans text-label-caps text-muted-foreground uppercase tracking-wider", children: title })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "ol",
+            {
+              className: "grid gap-0.5 px-3 py-2 font-mono text-code-sm",
+              "aria-live": effectiveLive,
+              "aria-atomic": "false",
+              children: lines.map((line) => {
+                const kind = line.kind ?? "stdout";
+                return /* @__PURE__ */ jsx("li", { className: cn("whitespace-pre-wrap", kindColor[kind]), children: kind === "command" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsxs("span", { className: "select-none text-primary", children: [
+                    promptPrefix,
+                    " "
+                  ] }),
+                  line.content
+                ] }) : kind === "prompt" ? /* @__PURE__ */ jsx("span", { className: "motion-safe:animate-pulse", children: line.content }) : line.content }, line.id);
+              })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+TerminalPanel.displayName = "TerminalPanel";
+
+export { TerminalPanel };
+//# sourceMappingURL=chunk-6ORS6XOE.js.map
+//# sourceMappingURL=chunk-6ORS6XOE.js.map

package/dist/chunk-6ORS6XOE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/terminal-panel/terminal-panel.tsx"],"names":["TerminalIcon"],"mappings":";;;;;;AA8BA,IAAM,SAAA,GAA+D;AAAA,EACnE,OAAA,EAAS,iBAAA;AAAA,EACT,MAAA,EAAQ,uBAAA;AAAA,EACR,MAAA,EAAQ,kBAAA;AAAA,EACR,EAAA,EAAI,cAAA;AAAA,EACJ,MAAA,EAAQ;AACV,CAAA;AASA,IAAM,aAAA,GAAgB,UAAA;AAAA,EACpB,CAAC,EAAE,SAAA,EAAW,KAAA,GAAQ,UAAA,EAAY,KAAA,EAAO,YAAA,GAAe,GAAA,EAAK,IAAA,GAAO,KAAA,EAAO,GAAG,KAAA,IAAS,GAAA,KAAQ;AAE7F,IAAA,MAAM,eAAe,eAAA,EAAgB;AACrC,IAAA,MAAM,aAAA,GAAgB,eAAe,KAAA,GAAQ,IAAA;AAC7C,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,gBAAA;AAAA,QACV,GAAA;AAAA,QACA,SAAA,EAAW,EAAA,CAAG,yDAAA,EAA2D,SAAS,CAAA;AAAA,QACjF,GAAG,KAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,QAAA,EAAA,EAAO,WAAU,6DAAA,EAChB,QAAA,EAAA;AAAA,4BAAA,GAAA,CAACA,QAAA,EAAA,EAAa,SAAA,EAAU,gCAAA,EAAiC,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,4BAC5E,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,0EAAA,EACb,QAAA,EAAA,KAAA,EACH;AAAA,WAAA,EACF,CAAA;AAAA,0BACA,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,+CAAA;AAAA,cACV,WAAA,EAAW,aAAA;AAAA,cACX,aAAA,EAAY,OAAA;AAAA,cAEX,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,KAAS;AACnB,gBAAA,MAAM,IAAA,GAAO,KAAK,IAAA,IAAQ,QAAA;AAC1B,gBAAA,uBACE,GAAA,CAAC,IAAA,EAAA,EAAiB,SAAA,EAAW,EAAA,CAAG,qBAAA,EAAuB,SAAA,CAAU,IAAI,CAAC,CAAA,EACnE,QAAA,EAAA,IAAA,KAAS,SAAA,mBACR,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,kCAAA,IAAA,CAAC,MAAA,EAAA,EAAK,WAAU,0BAAA,EAA4B,QAAA,EAAA;AAAA,oBAAA,YAAA;AAAA,oBAAa;AAAA,mBAAA,EAAC,CAAA;AAAA,kBACzD,IAAA,CAAK;AAAA,iBAAA,EACR,CAAA,GACE,IAAA,KAAS,QAAA,mBACX,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,2BAAA,EAA6B,QAAA,EAAA,IAAA,CAAK,OAAA,EAAQ,CAAA,GAE1D,IAAA,CAAK,OAAA,EAAA,EATA,KAAK,EAWd,CAAA;AAAA,cAEJ,CAAC;AAAA;AAAA;AACH;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AACA,aAAA,CAAc,WAAA,GAAc,eAAA","file":"chunk-6ORS6XOE.js","sourcesContent":["import { Terminal as TerminalIcon } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport { useInLiveRegion } from \"../../../lib/live-region-context.js\";\n\nexport interface TerminalLine {\n  id: string;\n  /**\n   * Visual kind: command (prompted), stdout, stderr, ok (success), prompt (active line).\n   */\n  kind?: \"command\" | \"stdout\" | \"stderr\" | \"ok\" | \"prompt\";\n  content: ReactNode;\n}\n\ninterface TerminalPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  title?: ReactNode;\n  lines: TerminalLine[];\n  /**\n   * Optional prompt prefix for commands, defaults to \"$\".\n   */\n  promptPrefix?: string;\n  /**\n   * Live-region politeness for screen readers. Use `\"polite\"` when streaming\n   * fresh output so assistive tech announces new lines without interrupting.\n   * Default `\"off\"` for static / historical views.\n   */\n  live?: \"off\" | \"polite\";\n}\n\nconst kindColor: Record<NonNullable<TerminalLine[\"kind\"]>, string> = {\n  command: \"text-foreground\",\n  stdout: \"text-muted-foreground\",\n  stderr: \"text-destructive\",\n  ok: \"text-success\",\n  prompt: \"text-primary\",\n};\n\n/**\n * TerminalPanel — minimal terminal output viewer.\n *\n * Visual: dark card with mono font, \"$ \" prefix on command lines, color-coded\n * stdout/stderr/success. No interactivity (read-only) — pair with your own\n * pty/xterm for live shells if needed.\n */\nconst TerminalPanel = forwardRef<HTMLDivElement, TerminalPanelProps>(\n  ({ className, title = \"Terminal\", lines, promptPrefix = \"$\", live = \"off\", ...props }, ref) => {\n    // T4.1 (MF-4): suppress own aria-live when nested in container live region.\n    const inLiveRegion = useInLiveRegion();\n    const effectiveLive = inLiveRegion ? \"off\" : live;\n    return (\n      <div\n        data-slot=\"terminal-panel\"\n        ref={ref}\n        className={cn(\"overflow-hidden rounded-xl border border-border bg-card\", className)}\n        {...props}\n      >\n        <header className=\"flex items-center gap-2 border-border/40 border-b px-3 py-2\">\n          <TerminalIcon className=\"size-3.5 text-muted-foreground\" aria-hidden=\"true\" />\n          <span className=\"font-sans text-label-caps text-muted-foreground uppercase tracking-wider\">\n            {title}\n          </span>\n        </header>\n        <ol\n          className=\"grid gap-0.5 px-3 py-2 font-mono text-code-sm\"\n          aria-live={effectiveLive}\n          aria-atomic=\"false\"\n        >\n          {lines.map((line) => {\n            const kind = line.kind ?? \"stdout\";\n            return (\n              <li key={line.id} className={cn(\"whitespace-pre-wrap\", kindColor[kind])}>\n                {kind === \"command\" ? (\n                  <>\n                    <span className=\"select-none text-primary\">{promptPrefix} </span>\n                    {line.content}\n                  </>\n                ) : kind === \"prompt\" ? (\n                  <span className=\"motion-safe:animate-pulse\">{line.content}</span>\n                ) : (\n                  line.content\n                )}\n              </li>\n            );\n          })}\n        </ol>\n      </div>\n    );\n  },\n);\nTerminalPanel.displayName = \"TerminalPanel\";\n\nexport { TerminalPanel };\n"]}

package/dist/chunk-6V2LQEPT.js

@@ -0,0 +1,165 @@
+"use client";
+import { cn } from './chunk-EWDN56AS.js';
+import { Plus, Trash2, Lock, ShieldQuestion, Check } from 'lucide-react';
+import { forwardRef, useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DECISION_CLASS = {
+  allow: "bg-success/15 text-success border-success/40",
+  ask: "bg-warning/15 text-warning border-warning/40",
+  deny: "bg-destructive/15 text-destructive border-destructive/40"
+};
+var DECISION_ICON = {
+  allow: /* @__PURE__ */ jsx(Check, { className: "size-3", "aria-hidden": "true" }),
+  ask: /* @__PURE__ */ jsx(ShieldQuestion, { className: "size-3", "aria-hidden": "true" }),
+  deny: /* @__PURE__ */ jsx(Lock, { className: "size-3", "aria-hidden": "true" })
+};
+var cycle = (cur) => cur === "allow" ? "ask" : cur === "ask" ? "deny" : "allow";
+var PermissionMatrix = forwardRef(
+  ({
+    className,
+    rules,
+    title = "Permissions",
+    toolOptions,
+    onAdd,
+    onRemove,
+    onDecisionChange,
+    ...props
+  }, ref) => {
+    const [newTool, setNewTool] = useState(toolOptions?.[0] ?? "*");
+    const [newPath, setNewPath] = useState("");
+    const [newDecision, setNewDecision] = useState("ask");
+    const submit = () => {
+      if (!newPath.trim()) return;
+      onAdd?.({ tool: newTool, path: newPath.trim(), decision: newDecision });
+      setNewPath("");
+    };
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "data-slot": "permission-matrix",
+        ref,
+        className: cn("rounded-xl border border-border bg-card", className),
+        ...props,
+        children: [
+          title ? /* @__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: [
+              rules.length,
+              " ",
+              rules.length === 1 ? "rule" : "rules"
+            ] })
+          ] }) : null,
+          onAdd && toolOptions && toolOptions.length > 0 ? /* @__PURE__ */ jsxs(
+            "form",
+            {
+              className: "grid grid-cols-[1fr_2fr_auto_auto] gap-2 border-border/40 border-b p-3",
+              onSubmit: (e) => {
+                e.preventDefault();
+                submit();
+              },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "select",
+                  {
+                    value: newTool,
+                    onChange: (e) => setNewTool(e.target.value),
+                    "aria-label": "Tool",
+                    className: "h-9 rounded-md border border-input bg-card px-2 font-mono text-code-sm",
+                    children: [
+                      /* @__PURE__ */ jsx("option", { value: "*", children: "* (any tool)" }),
+                      toolOptions.map((t) => /* @__PURE__ */ jsx("option", { value: t, children: t }, t))
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "text",
+                    value: newPath,
+                    onChange: (e) => setNewPath(e.target.value),
+                    placeholder: "path glob (e.g. src/**/*.ts)",
+                    "aria-label": "Path",
+                    className: "h-9 rounded-md border border-input bg-card px-2 font-mono text-code-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "select",
+                  {
+                    value: newDecision,
+                    onChange: (e) => setNewDecision(e.target.value),
+                    "aria-label": "Decision",
+                    className: "h-9 rounded-md border border-input bg-card px-2 font-mono text-code-sm uppercase",
+                    children: [
+                      /* @__PURE__ */ jsx("option", { value: "allow", children: "allow" }),
+                      /* @__PURE__ */ jsx("option", { value: "ask", children: "ask" }),
+                      /* @__PURE__ */ jsx("option", { value: "deny", children: "deny" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "submit",
+                    className: "inline-flex h-9 items-center gap-1 rounded-md bg-primary px-3 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" }),
+                      " Add"
+                    ]
+                  }
+                )
+              ]
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs("ul", { className: "divide-y divide-border/30", children: [
+            rules.map((rule) => /* @__PURE__ */ jsxs(
+              "li",
+              {
+                className: "grid grid-cols-[1fr_2fr_auto_auto] items-center gap-3 px-4 py-2.5",
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "truncate font-mono text-code-sm text-foreground", children: rule.tool }),
+                  /* @__PURE__ */ jsx("span", { className: "truncate font-mono text-code-sm text-muted-foreground", children: rule.path }),
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => onDecisionChange?.(rule.id, cycle(rule.decision)),
+                      className: cn(
+                        "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1",
+                        "font-mono text-label uppercase tracking-wider transition-colors",
+                        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                        DECISION_CLASS[rule.decision],
+                        !onDecisionChange && "pointer-events-none"
+                      ),
+                      children: [
+                        DECISION_ICON[rule.decision],
+                        rule.decision
+                      ]
+                    }
+                  ),
+                  onRemove ? /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => onRemove(rule.id),
+                      "aria-label": `Remove rule ${rule.tool} ${rule.path}`,
+                      className: "rounded-md p-1.5 text-muted-foreground hover:bg-muted hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                      children: /* @__PURE__ */ jsx(Trash2, { className: "size-3.5" })
+                    }
+                  ) : null
+                ]
+              },
+              rule.id
+            )),
+            rules.length === 0 ? /* @__PURE__ */ jsx("li", { className: "px-4 py-8 text-center font-sans text-body-sm text-muted-foreground", children: "No permission rules configured. The agent will fall back to default policy." }) : null
+          ] })
+        ]
+      }
+    );
+  }
+);
+PermissionMatrix.displayName = "PermissionMatrix";
+
+export { PermissionMatrix };
+//# sourceMappingURL=chunk-6V2LQEPT.js.map
+//# sourceMappingURL=chunk-6V2LQEPT.js.map

package/dist/chunk-6V2LQEPT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/permission-matrix/permission-matrix.tsx"],"names":[],"mappings":"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","file":"chunk-6V2LQEPT.js","sourcesContent":["\"use client\";\n\nimport { Check, Lock, Plus, ShieldQuestion, Trash2 } from \"lucide-react\";\nimport { forwardRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\n\nexport type PermissionDecisionKind = \"allow\" | \"ask\" | \"deny\";\n\nexport interface PermissionRule {\n  id: string;\n  /** Tool the rule applies to. Use \"*\" for any. */\n  tool: string;\n  /** Glob path it applies to. Use \"*\" for any. */\n  path: string;\n  decision: PermissionDecisionKind;\n  /** Optional rationale shown as helper text. */\n  note?: string;\n}\n\ninterface PermissionMatrixProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  rules: PermissionRule[];\n  title?: ReactNode;\n  /**\n   * Available tools shown in the add form. Pass `undefined` (or omit) — or an\n   * empty array — to hide the add form entirely. The form only renders when\n   * `onAdd` is provided AND `toolOptions` has at least one entry.\n   */\n  toolOptions?: string[];\n  onAdd?: (rule: Omit<PermissionRule, \"id\">) => void;\n  onRemove?: (id: string) => void;\n  onDecisionChange?: (id: string, decision: PermissionDecisionKind) => void;\n}\n\nconst DECISION_CLASS: Record<PermissionDecisionKind, string> = {\n  allow: \"bg-success/15 text-success border-success/40\",\n  ask: \"bg-warning/15 text-warning border-warning/40\",\n  deny: \"bg-destructive/15 text-destructive border-destructive/40\",\n};\n\nconst DECISION_ICON: Record<PermissionDecisionKind, ReactNode> = {\n  allow: <Check className=\"size-3\" aria-hidden=\"true\" />,\n  ask: <ShieldQuestion className=\"size-3\" aria-hidden=\"true\" />,\n  deny: <Lock className=\"size-3\" aria-hidden=\"true\" />,\n};\n\nconst cycle = (cur: PermissionDecisionKind): PermissionDecisionKind =>\n  cur === \"allow\" ? \"ask\" : cur === \"ask\" ? \"deny\" : \"allow\";\n\n/**\n * PermissionMatrix — tool × path × decision grid for fine-grained access\n * control. Used as the \"permissions\" tab in the agent settings.\n *\n * One PermissionRule per row. Click the decision pill to cycle Allow → Ask → Deny.\n *\n * Design decision (2026-05-14): PermissionMatrix stays in `primitives/`\n * — not `composites/` — even though it renders inputs and a select. The native\n * `<input>` / `<select>` elements use Theo design tokens directly (border-input,\n * ring, font-mono) so visual parity with `Input` / `Select` primitives is\n * preserved. Reason for keeping it primitive: a consumer installing\n * `permission-matrix` from the registry gets a single self-contained file with\n * no transitive Theo dependencies — opposite trade-off from `EnvVarEditor`\n * which is intentionally a composite. Both shapes are valid; we ship one of\n * each so consumers can pick the dependency profile that fits their app.\n */\nconst PermissionMatrix = forwardRef<HTMLDivElement, PermissionMatrixProps>(\n  (\n    {\n      className,\n      rules,\n      title = \"Permissions\",\n      toolOptions,\n      onAdd,\n      onRemove,\n      onDecisionChange,\n      ...props\n    },\n    ref,\n  ) => {\n    const [newTool, setNewTool] = useState(toolOptions?.[0] ?? \"*\");\n    const [newPath, setNewPath] = useState(\"\");\n    const [newDecision, setNewDecision] = useState<PermissionDecisionKind>(\"ask\");\n\n    const submit = () => {\n      if (!newPath.trim()) return;\n      onAdd?.({ tool: newTool, path: newPath.trim(), decision: newDecision });\n      setNewPath(\"\");\n    };\n\n    return (\n      <section\n        data-slot=\"permission-matrix\"\n        ref={ref}\n        className={cn(\"rounded-xl border border-border bg-card\", className)}\n        {...props}\n      >\n        {title ? (\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              {rules.length} {rules.length === 1 ? \"rule\" : \"rules\"}\n            </span>\n          </header>\n        ) : null}\n\n        {onAdd && toolOptions && toolOptions.length > 0 ? (\n          <form\n            className=\"grid grid-cols-[1fr_2fr_auto_auto] gap-2 border-border/40 border-b p-3\"\n            onSubmit={(e) => {\n              e.preventDefault();\n              submit();\n            }}\n          >\n            <select\n              value={newTool}\n              onChange={(e) => setNewTool(e.target.value)}\n              aria-label=\"Tool\"\n              className=\"h-9 rounded-md border border-input bg-card px-2 font-mono text-code-sm\"\n            >\n              <option value=\"*\">* (any tool)</option>\n              {toolOptions.map((t) => (\n                <option key={t} value={t}>\n                  {t}\n                </option>\n              ))}\n            </select>\n            <input\n              type=\"text\"\n              value={newPath}\n              onChange={(e) => setNewPath(e.target.value)}\n              placeholder=\"path glob (e.g. src/**/*.ts)\"\n              aria-label=\"Path\"\n              className=\"h-9 rounded-md border border-input bg-card px-2 font-mono text-code-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            />\n            <select\n              value={newDecision}\n              onChange={(e) => setNewDecision(e.target.value as PermissionDecisionKind)}\n              aria-label=\"Decision\"\n              className=\"h-9 rounded-md border border-input bg-card px-2 font-mono text-code-sm uppercase\"\n            >\n              <option value=\"allow\">allow</option>\n              <option value=\"ask\">ask</option>\n              <option value=\"deny\">deny</option>\n            </select>\n            <button\n              type=\"submit\"\n              className=\"inline-flex h-9 items-center gap-1 rounded-md bg-primary px-3 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\" /> Add\n            </button>\n          </form>\n        ) : null}\n\n        <ul className=\"divide-y divide-border/30\">\n          {rules.map((rule) => (\n            <li\n              key={rule.id}\n              className=\"grid grid-cols-[1fr_2fr_auto_auto] items-center gap-3 px-4 py-2.5\"\n            >\n              <span className=\"truncate font-mono text-code-sm text-foreground\">{rule.tool}</span>\n              <span className=\"truncate font-mono text-code-sm text-muted-foreground\">\n                {rule.path}\n              </span>\n              <button\n                type=\"button\"\n                onClick={() => onDecisionChange?.(rule.id, cycle(rule.decision))}\n                className={cn(\n                  \"inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1\",\n                  \"font-mono text-label uppercase tracking-wider transition-colors\",\n                  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n                  DECISION_CLASS[rule.decision],\n                  !onDecisionChange && \"pointer-events-none\",\n                )}\n              >\n                {DECISION_ICON[rule.decision]}\n                {rule.decision}\n              </button>\n              {onRemove ? (\n                <button\n                  type=\"button\"\n                  onClick={() => onRemove(rule.id)}\n                  aria-label={`Remove rule ${rule.tool} ${rule.path}`}\n                  className=\"rounded-md p-1.5 text-muted-foreground hover:bg-muted hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n                >\n                  <Trash2 className=\"size-3.5\" />\n                </button>\n              ) : null}\n            </li>\n          ))}\n          {rules.length === 0 ? (\n            <li className=\"px-4 py-8 text-center font-sans text-body-sm text-muted-foreground\">\n              No permission rules configured. The agent will fall back to default policy.\n            </li>\n          ) : null}\n        </ul>\n      </section>\n    );\n  },\n);\nPermissionMatrix.displayName = \"PermissionMatrix\";\n\nexport { PermissionMatrix };\n"]}