@elabs-ai/components-ui 4.1.0 → 5.0.0

package/dist/chunk-NJAGSGPF.js

@@ -0,0 +1,245 @@
+"use client";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "./chunk-D3C3VVCX.js";
+import {
+  useLocale
+} from "./chunk-EJQYE4MY.js";
+import {
+  cn
+} from "./chunk-KBNWM27Q.js";
+
+// src/components/color-picker/color-picker.tsx
+import {
+  forwardRef,
+  useCallback,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var COLOR_TOKENS = [
+  "chart-1",
+  "chart-2",
+  "chart-3",
+  "chart-4",
+  "chart-5",
+  "chart-6",
+  "chart-7",
+  "chart-8",
+  "chart-9",
+  "chart-10",
+  "chart-11",
+  "chart-12",
+  "primary",
+  "secondary",
+  "destructive",
+  "success",
+  "warning",
+  "info"
+];
+var TOKEN_BG = {
+  "chart-1": "bg-chart-1",
+  "chart-2": "bg-chart-2",
+  "chart-3": "bg-chart-3",
+  "chart-4": "bg-chart-4",
+  "chart-5": "bg-chart-5",
+  "chart-6": "bg-chart-6",
+  "chart-7": "bg-chart-7",
+  "chart-8": "bg-chart-8",
+  "chart-9": "bg-chart-9",
+  "chart-10": "bg-chart-10",
+  "chart-11": "bg-chart-11",
+  "chart-12": "bg-chart-12",
+  primary: "bg-primary",
+  secondary: "bg-secondary",
+  destructive: "bg-destructive",
+  success: "bg-success",
+  warning: "bg-warning",
+  info: "bg-info"
+};
+function isColorToken(v) {
+  return Object.prototype.hasOwnProperty.call(TOKEN_BG, v);
+}
+var Swatch = forwardRef(function Swatch2({ token, selected, onSelect, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      role: "radio",
+      "aria-checked": selected,
+      "aria-label": token,
+      onClick: () => onSelect(token),
+      className: cn(
+        "size-7 rounded-md border-2 transition-[border-color,box-shadow] duration-fast",
+        TOKEN_BG[token],
+        selected ? "border-foreground ring-2 ring-ring ring-offset-1 ring-offset-background" : "border-transparent hover:border-foreground/40",
+        "focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+        className
+      ),
+      ...props
+    }
+  );
+});
+function TriggerSwatch({ value, className }) {
+  const bgClass = isColorToken(value) ? TOKEN_BG[value] : void 0;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("inline-block size-4 rounded-sm border border-border", bgClass, className),
+      style: !bgClass ? { backgroundColor: value } : void 0
+    }
+  );
+}
+var ColorPicker = forwardRef(function ColorPicker2({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  swatches = COLOR_TOKENS,
+  allowCustom = false,
+  "aria-label": ariaLabel,
+  className,
+  ...props
+}, ref) {
+  const { t } = useLocale();
+  const resolvedAriaLabel = ariaLabel ?? t("ui.colorPicker.pickColor");
+  const isControlled = valueProp !== void 0;
+  const [internalValue, setInternalValue] = useState(
+    defaultValue ?? "chart-1"
+  );
+  const [customHex, setCustomHex] = useState("");
+  const [open, setOpen] = useState(false);
+  const current = isControlled ? valueProp ?? "" : internalValue;
+  const commit = useCallback(
+    (next) => {
+      if (!isControlled) setInternalValue(next);
+      onValueChange?.(next);
+    },
+    [isControlled, onValueChange]
+  );
+  const handleSwatchSelect = useCallback(
+    (token) => {
+      commit(token);
+      setOpen(false);
+    },
+    [commit]
+  );
+  const handleCustomSubmit = useCallback(() => {
+    const hex = customHex.trim();
+    if (/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(hex)) {
+      commit(hex);
+      setOpen(false);
+    }
+  }, [customHex, commit]);
+  const groupRef = useRef(null);
+  const handleGroupKeyDown = useCallback((e) => {
+    const buttons = groupRef.current ? Array.from(groupRef.current.querySelectorAll("[role=radio]")) : [];
+    if (!buttons.length) return;
+    const focused = document.activeElement;
+    const idx = buttons.indexOf(focused);
+    if (idx === -1) return;
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+      e.preventDefault();
+      buttons[(idx + 1) % buttons.length]?.focus();
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+      e.preventDefault();
+      buttons[(idx - 1 + buttons.length) % buttons.length]?.focus();
+    }
+  }, []);
+  return /* @__PURE__ */ jsx("div", { ref, className: cn("inline-flex", className), ...props, children: /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-label": resolvedAriaLabel,
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        className: cn(
+          "inline-flex items-center gap-2 rounded-md border border-input bg-background px-3 py-1.5 text-body shadow-sm",
+          "transition-[color,box-shadow] duration-fast",
+          "hover:bg-accent hover:text-accent-foreground",
+          "focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-input-focus",
+          "disabled:pointer-events-none disabled:opacity-50"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(TriggerSwatch, { value: current }),
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: current || t("ui.colorPicker.none") })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { className: "w-auto p-3", align: "start", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: groupRef,
+          role: "radiogroup",
+          "aria-label": t("ui.colorPicker.swatches"),
+          className: "flex flex-wrap gap-1.5",
+          onKeyDown: handleGroupKeyDown,
+          children: swatches.map((token) => /* @__PURE__ */ jsx(
+            Swatch,
+            {
+              token,
+              selected: current === token,
+              onSelect: handleSwatchSelect
+            },
+            token
+          ))
+        }
+      ),
+      allowCustom && /* @__PURE__ */ jsxs("div", { className: "mt-3 border-t border-border pt-3", children: [
+        /* @__PURE__ */ jsxs("p", { className: "mb-1.5 text-meta text-muted-foreground", children: [
+          t("ui.colorPicker.customHexLabel"),
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "text-warning-text", children: t("ui.colorPicker.notThemeAware") })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              value: customHex,
+              placeholder: "#3b82f6",
+              maxLength: 7,
+              spellCheck: false,
+              "aria-label": t("ui.colorPicker.customHex"),
+              onChange: (e) => setCustomHex(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  handleCustomSubmit();
+                }
+              },
+              className: cn(
+                "h-8 w-28 rounded-md border border-input bg-background px-2 text-body",
+                "focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-input-focus",
+                "placeholder:text-muted-foreground"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleCustomSubmit,
+              className: cn(
+                "h-8 rounded-md border border-input bg-background px-2 text-body",
+                "hover:bg-accent hover:text-accent-foreground",
+                "focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-input-focus"
+              ),
+              children: "Apply"
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] }) });
+});
+
+export {
+  COLOR_TOKENS,
+  ColorPicker
+};
+//# sourceMappingURL=chunk-NJAGSGPF.js.map

package/dist/chunk-NJAGSGPF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/color-picker/color-picker.tsx"],"sourcesContent":["\"use client\";\n\n// a2ui.exposed: yes\nimport {\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n  type ButtonHTMLAttributes,\n  type HTMLAttributes,\n  type KeyboardEvent,\n} from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover\";\nimport { useLocale } from \"../locale-provider\";\n\n// ---------------------------------------------------------------------------\n// Token vocabulary\n// ---------------------------------------------------------------------------\n\n/**\n * The semantic color token names that ColorPicker understands as \"safe\" values.\n * These map 1-to-1 with Tailwind utilities backed by CSS variables so they\n * remain theme-aware at runtime.\n */\nexport type ColorToken =\n  | \"primary\"\n  | \"secondary\"\n  | \"destructive\"\n  | \"success\"\n  | \"warning\"\n  | \"info\"\n  | \"chart-1\"\n  | \"chart-2\"\n  | \"chart-3\"\n  | \"chart-4\"\n  | \"chart-5\"\n  | \"chart-6\"\n  | \"chart-7\"\n  | \"chart-8\"\n  | \"chart-9\"\n  | \"chart-10\"\n  | \"chart-11\"\n  | \"chart-12\";\n\n/** All recognised token names in display order. */\nexport const COLOR_TOKENS: ColorToken[] = [\n  \"chart-1\",\n  \"chart-2\",\n  \"chart-3\",\n  \"chart-4\",\n  \"chart-5\",\n  \"chart-6\",\n  \"chart-7\",\n  \"chart-8\",\n  \"chart-9\",\n  \"chart-10\",\n  \"chart-11\",\n  \"chart-12\",\n  \"primary\",\n  \"secondary\",\n  \"destructive\",\n  \"success\",\n  \"warning\",\n  \"info\",\n];\n\n/**\n * Map a ColorToken → the Tailwind bg-* utility class that renders it.\n * These classes must be present as complete strings so Tailwind's JIT scanner\n * can detect them statically.\n */\nconst TOKEN_BG: Record<ColorToken, string> = {\n  \"chart-1\": \"bg-chart-1\",\n  \"chart-2\": \"bg-chart-2\",\n  \"chart-3\": \"bg-chart-3\",\n  \"chart-4\": \"bg-chart-4\",\n  \"chart-5\": \"bg-chart-5\",\n  \"chart-6\": \"bg-chart-6\",\n  \"chart-7\": \"bg-chart-7\",\n  \"chart-8\": \"bg-chart-8\",\n  \"chart-9\": \"bg-chart-9\",\n  \"chart-10\": \"bg-chart-10\",\n  \"chart-11\": \"bg-chart-11\",\n  \"chart-12\": \"bg-chart-12\",\n  primary: \"bg-primary\",\n  secondary: \"bg-secondary\",\n  destructive: \"bg-destructive\",\n  success: \"bg-success\",\n  warning: \"bg-warning\",\n  info: \"bg-info\",\n};\n\nfunction isColorToken(v: string): v is ColorToken {\n  return Object.prototype.hasOwnProperty.call(TOKEN_BG, v);\n}\n\n// ---------------------------------------------------------------------------\n// Sub-component: individual swatch button\n// ---------------------------------------------------------------------------\n\ninterface SwatchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"onSelect\"> {\n  token: ColorToken;\n  selected: boolean;\n  onSelect: (token: ColorToken) => void;\n}\n\nconst Swatch = forwardRef<HTMLButtonElement, SwatchProps>(function Swatch(\n  { token, selected, onSelect, className, ...props },\n  ref,\n) {\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      role=\"radio\"\n      aria-checked={selected}\n      aria-label={token}\n      onClick={() => onSelect(token)}\n      className={cn(\n        \"size-7 rounded-md border-2 transition-[border-color,box-shadow] duration-fast\",\n        TOKEN_BG[token],\n        selected\n          ? \"border-foreground ring-2 ring-ring ring-offset-1 ring-offset-background\"\n          : \"border-transparent hover:border-foreground/40\",\n        \"focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\n// ---------------------------------------------------------------------------\n// Trigger swatch preview\n// ---------------------------------------------------------------------------\n\ninterface TriggerSwatchProps {\n  value: string;\n  className?: string;\n}\n\nfunction TriggerSwatch({ value, className }: TriggerSwatchProps) {\n  const bgClass = isColorToken(value) ? TOKEN_BG[value] : undefined;\n  return (\n    <span\n      className={cn(\"inline-block size-4 rounded-sm border border-border\", bgClass, className)}\n      // When a raw hex value is supplied, use inline style — the only safe\n      // place for a non-token color (isolated to this preview span).\n      style={!bgClass ? { backgroundColor: value } : undefined}\n    />\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Main component\n// ---------------------------------------------------------------------------\n\nexport interface ColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /**\n   * Controlled value — a `ColorToken` name (preferred, theme-aware) or a raw\n   * hex string (only when `allowCustom` is true).\n   */\n  value?: ColorToken | string;\n  /** Uncontrolled default value. */\n  defaultValue?: ColorToken | string;\n  /** Called when the selected color changes. */\n  onValueChange?: (value: ColorToken | string) => void;\n  /**\n   * Swatches to display. Defaults to all chart + status tokens.\n   * Accepts any subset of `ColorToken`.\n   */\n  swatches?: ColorToken[];\n  /**\n   * When true, a free-form hex input is shown below the swatches.\n   * NOTE: custom hex values are NOT theme-aware — they will not adapt when\n   * the active theme changes. Prefer token values for all theme-safe UI.\n   */\n  allowCustom?: boolean;\n  /** aria-label for the trigger button. Defaults to \"Pick color\". */\n  \"aria-label\"?: string;\n}\n\n/**\n * ColorPicker — a token-safe swatch picker backed by a Popover.\n *\n * The default value type is a `ColorToken` (a semantic CSS variable name),\n * not a hex string. This ensures the chosen color adapts to the active theme.\n * Raw hex is available opt-in via `allowCustom` — see the prop docs.\n *\n * Swatch group uses `role=\"radiogroup\"` with arrow-key navigation.\n */\nexport const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(function ColorPicker(\n  {\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    swatches = COLOR_TOKENS,\n    allowCustom = false,\n    \"aria-label\": ariaLabel,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const { t } = useLocale();\n  const resolvedAriaLabel = ariaLabel ?? t(\"ui.colorPicker.pickColor\");\n  const isControlled = valueProp !== undefined;\n  const [internalValue, setInternalValue] = useState<ColorToken | string>(\n    defaultValue ?? \"chart-1\",\n  );\n  const [customHex, setCustomHex] = useState(\"\");\n  const [open, setOpen] = useState(false);\n\n  const current = isControlled ? (valueProp ?? \"\") : internalValue;\n\n  const commit = useCallback(\n    (next: ColorToken | string) => {\n      if (!isControlled) setInternalValue(next);\n      onValueChange?.(next);\n    },\n    [isControlled, onValueChange],\n  );\n\n  const handleSwatchSelect = useCallback(\n    (token: ColorToken) => {\n      commit(token);\n      setOpen(false);\n    },\n    [commit],\n  );\n\n  const handleCustomSubmit = useCallback(() => {\n    const hex = customHex.trim();\n    if (/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(hex)) {\n      commit(hex);\n      setOpen(false);\n    }\n  }, [customHex, commit]);\n\n  // Arrow-key navigation within the radiogroup\n  const groupRef = useRef<HTMLDivElement>(null);\n  const handleGroupKeyDown = useCallback((e: KeyboardEvent<HTMLDivElement>) => {\n    const buttons = groupRef.current\n      ? Array.from(groupRef.current.querySelectorAll<HTMLButtonElement>(\"[role=radio]\"))\n      : [];\n    if (!buttons.length) return;\n    const focused = document.activeElement as HTMLButtonElement;\n    const idx = buttons.indexOf(focused);\n    if (idx === -1) return;\n\n    if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") {\n      e.preventDefault();\n      buttons[(idx + 1) % buttons.length]?.focus();\n    } else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") {\n      e.preventDefault();\n      buttons[(idx - 1 + buttons.length) % buttons.length]?.focus();\n    }\n  }, []);\n\n  return (\n    <div ref={ref} className={cn(\"inline-flex\", className)} {...props}>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <button\n            type=\"button\"\n            aria-label={resolvedAriaLabel}\n            aria-haspopup=\"dialog\"\n            aria-expanded={open}\n            className={cn(\n              \"inline-flex items-center gap-2 rounded-md border border-input bg-background px-3 py-1.5 text-body shadow-sm\",\n              \"transition-[color,box-shadow] duration-fast\",\n              \"hover:bg-accent hover:text-accent-foreground\",\n              \"focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-input-focus\",\n              \"disabled:pointer-events-none disabled:opacity-50\",\n            )}\n          >\n            <TriggerSwatch value={current} />\n            <span className=\"text-muted-foreground\">{current || t(\"ui.colorPicker.none\")}</span>\n          </button>\n        </PopoverTrigger>\n\n        <PopoverContent className=\"w-auto p-3\" align=\"start\">\n          <div\n            ref={groupRef}\n            role=\"radiogroup\"\n            aria-label={t(\"ui.colorPicker.swatches\")}\n            className=\"flex flex-wrap gap-1.5\"\n            onKeyDown={handleGroupKeyDown}\n          >\n            {swatches.map((token) => (\n              <Swatch\n                key={token}\n                token={token}\n                selected={current === token}\n                onSelect={handleSwatchSelect}\n              />\n            ))}\n          </div>\n\n          {allowCustom && (\n            <div className=\"mt-3 border-t border-border pt-3\">\n              {/* Custom hex is NOT theme-aware — it will not adapt to theme changes. */}\n              <p className=\"mb-1.5 text-meta text-muted-foreground\">\n                {/* #124: inline running text — ink rung, not the 3:1 mark rung. */}\n                {t(\"ui.colorPicker.customHexLabel\")}{\" \"}\n                <span className=\"text-warning-text\">{t(\"ui.colorPicker.notThemeAware\")}</span>\n              </p>\n              <div className=\"flex gap-2\">\n                <input\n                  type=\"text\"\n                  value={customHex}\n                  placeholder=\"#3b82f6\" // i18n-exempt: example hex value, not prose\n                  maxLength={7}\n                  spellCheck={false}\n                  aria-label={t(\"ui.colorPicker.customHex\")}\n                  onChange={(e) => setCustomHex(e.target.value)}\n                  onKeyDown={(e) => {\n                    if (e.key === \"Enter\") {\n                      e.preventDefault();\n                      handleCustomSubmit();\n                    }\n                  }}\n                  className={cn(\n                    \"h-8 w-28 rounded-md border border-input bg-background px-2 text-body\",\n                    \"focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-input-focus\",\n                    \"placeholder:text-muted-foreground\",\n                  )}\n                />\n                <button\n                  type=\"button\"\n                  onClick={handleCustomSubmit}\n                  className={cn(\n                    \"h-8 rounded-md border border-input bg-background px-2 text-body\",\n                    \"hover:bg-accent hover:text-accent-foreground\",\n                    \"focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-input-focus\",\n                  )}\n                >\n                  Apply\n                </button>\n              </div>\n            </div>\n          )}\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n});\n"],"mappings":"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","names":["Swatch","ColorPicker"]}

package/dist/chunk-NMGNXW3J.js

@@ -0,0 +1,98 @@
+"use client";
+import {
+  replaceTriggerRun
+} from "./chunk-AZEABCK4.js";
+
+// src/components/mention-input/mention-value.ts
+function mentionEnd(mention, trigger = "@") {
+  return mention.start + trigger.length + mention.label.length;
+}
+function mentionAt(value, index, trigger = "@") {
+  return value.mentions.find((m) => index >= m.start && index < mentionEnd(m, trigger));
+}
+function commonPrefixLength(a, b) {
+  const max = Math.min(a.length, b.length);
+  let i = 0;
+  while (i < max && a[i] === b[i]) i++;
+  return i;
+}
+function remapMentions(prev, nextText, trigger = "@") {
+  if (prev.text === nextText) return prev.mentions;
+  const prevText = prev.text;
+  const p = commonPrefixLength(prevText, nextText);
+  const maxSuffix = Math.min(prevText.length, nextText.length) - p;
+  let s = 0;
+  while (s < maxSuffix && prevText[prevText.length - 1 - s] === nextText[nextText.length - 1 - s]) {
+    s++;
+  }
+  const editEnd = prevText.length - s;
+  const delta = nextText.length - prevText.length;
+  const remapped = [];
+  for (const mention of prev.mentions) {
+    const end = mentionEnd(mention, trigger);
+    if (end <= p) {
+      remapped.push(mention);
+    } else if (mention.start >= editEnd) {
+      remapped.push({ ...mention, start: mention.start + delta });
+    }
+  }
+  return remapped.filter(
+    (m) => nextText.slice(m.start, mentionEnd(m, trigger)) === trigger + m.label
+  );
+}
+function insertMention(value, option, trigger, queryStart, caret) {
+  const inserted = `${trigger}${option.label} `;
+  const { text: nextText, caret: nextCaret } = replaceTriggerRun(
+    value.text,
+    queryStart,
+    caret,
+    inserted
+  );
+  const delta = inserted.length - (caret - queryStart);
+  const mentions = [];
+  for (const mention of value.mentions) {
+    if (mentionEnd(mention, trigger) <= queryStart) {
+      mentions.push(mention);
+    } else if (mention.start >= caret) {
+      mentions.push({ ...mention, start: mention.start + delta });
+    }
+  }
+  mentions.push({ id: option.id, label: option.label, start: queryStart });
+  mentions.sort((a, b) => a.start - b.start);
+  return {
+    value: {
+      text: nextText,
+      mentions: mentions.filter(
+        (m) => nextText.slice(m.start, mentionEnd(m, trigger)) === trigger + m.label
+      )
+    },
+    caret: nextCaret
+  };
+}
+function serializeMentions(value) {
+  const ordered = [...value.mentions].sort((a, b) => a.start - b.start);
+  const mentionedIds = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const mention of ordered) {
+    if (seen.has(mention.id)) continue;
+    seen.add(mention.id);
+    mentionedIds.push(mention.id);
+  }
+  return { text: value.text, mentionedIds };
+}
+function defaultMentionFilter(option, query) {
+  const q = query.trim().toLowerCase();
+  if (q.length === 0) return true;
+  if (option.label.toLowerCase().includes(q)) return true;
+  return (option.keywords ?? []).some((k) => k.toLowerCase().includes(q));
+}
+
+export {
+  mentionEnd,
+  mentionAt,
+  remapMentions,
+  insertMention,
+  serializeMentions,
+  defaultMentionFilter
+};
+//# sourceMappingURL=chunk-NMGNXW3J.js.map

package/dist/chunk-NMGNXW3J.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/mention-input/mention-value.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { replaceTriggerRun } from \"../../lib/trigger-query\";\n\n/**\n * The pure offset algebra behind `MentionInput`.\n *\n * Chip atomicity in a real `<textarea>` is **selection arithmetic over a token\n * map**, not DOM nodes: the field holds ordinary text, and this module keeps a\n * parallel list of `{ id, label, start }` records honest as that text is edited,\n * pasted over and deleted. Nothing here touches React or the DOM, so every\n * acceptance criterion about backspace atomicity, caret skipping and the\n * `{ text, mentionedIds }` payload reduces to a unit test on these functions.\n */\n\n/** One selectable roster entry. */\nexport interface MentionOption {\n  /** Stable id — this is what `serializeMentions` emits. */\n  id: string;\n  /** Inserted verbatim after the trigger character. */\n  label: string;\n  /** Optional secondary line shown under the label. */\n  description?: string;\n  /** Optional leading glyph (avatar, icon). */\n  icon?: ReactNode;\n  /** Extra match terms, so \"ada\" can find \"Ada Lovelace\". */\n  keywords?: string[];\n  /** Rendered but not selectable. */\n  disabled?: boolean;\n}\n\n/** A resolved mention inside `MentionValue.text`. */\nexport interface Mention {\n  /** The option id this run refers to. */\n  id: string;\n  /** The label WITHOUT the trigger character. */\n  label: string;\n  /** Offset of the trigger character in `text`. */\n  start: number;\n}\n\n/** The component's value: plain text plus the mentions it contains. */\nexport interface MentionValue {\n  text: string;\n  mentions: Mention[];\n}\n\n/** The result of inserting an option: the new value and where the caret goes. */\nexport interface InsertMentionResult {\n  value: MentionValue;\n  /** Offset immediately after the inserted token's trailing space. */\n  caret: number;\n}\n\n/** Exclusive end offset of a mention's `trigger + label` run. */\nexport function mentionEnd(mention: Mention, trigger = \"@\"): number {\n  return mention.start + trigger.length + mention.label.length;\n}\n\n/**\n * The mention whose half-open range `[start, end)` contains `index`, if any.\n *\n * Half-open on purpose: the offset one past the token is *outside* it, so a\n * caret sitting immediately after `@Ada Lovelace` is \"next to\" the mention\n * rather than \"in\" it. Backspace therefore asks about `caret - 1` and Delete\n * about `caret`, and both get an unambiguous answer.\n */\nexport function mentionAt(value: MentionValue, index: number, trigger = \"@\"): Mention | undefined {\n  return value.mentions.find((m) => index >= m.start && index < mentionEnd(m, trigger));\n}\n\n/** Length of the longest common prefix of two strings. */\nfunction commonPrefixLength(a: string, b: string): number {\n  const max = Math.min(a.length, b.length);\n  let i = 0;\n  while (i < max && a[i] === b[i]) i++;\n  return i;\n}\n\n/**\n * Re-derive the mention list after the text changed underneath it.\n *\n * The edit is treated as ONE contiguous replacement — which is what a\n * keystroke, a paste, a cut and a native undo all are. The common prefix and\n * common suffix bracket it; a mention entirely before the edit keeps its\n * offset, one entirely after it shifts by the length delta, and one the edit\n * reaches into is **dropped** (its text no longer spells the person's name, so\n * the id would be a lie).\n *\n * Every survivor is then **re-validated** against the new text: the run at its\n * offset must still read exactly `trigger + label`. That second pass is what\n * makes a multi-mention paste safe — the arithmetic alone can be fooled by a\n * replacement whose prefix/suffix boundaries land ambiguously, but a run that\n * no longer spells the token can never survive the check.\n */\nexport function remapMentions(prev: MentionValue, nextText: string, trigger = \"@\"): Mention[] {\n  if (prev.text === nextText) return prev.mentions;\n\n  const prevText = prev.text;\n  const p = commonPrefixLength(prevText, nextText);\n\n  const maxSuffix = Math.min(prevText.length, nextText.length) - p;\n  let s = 0;\n  while (s < maxSuffix && prevText[prevText.length - 1 - s] === nextText[nextText.length - 1 - s]) {\n    s++;\n  }\n\n  /** End of the replaced span, in PREVIOUS coordinates. */\n  const editEnd = prevText.length - s;\n  const delta = nextText.length - prevText.length;\n\n  const remapped: Mention[] = [];\n  for (const mention of prev.mentions) {\n    const end = mentionEnd(mention, trigger);\n    if (end <= p) {\n      remapped.push(mention);\n    } else if (mention.start >= editEnd) {\n      remapped.push({ ...mention, start: mention.start + delta });\n    }\n    // else: the edit reached into the token — drop it.\n  }\n\n  return remapped.filter(\n    (m) => nextText.slice(m.start, mentionEnd(m, trigger)) === trigger + m.label,\n  );\n}\n\n/**\n * Replace the in-progress `trigger + query` run with `trigger + label + \" \"`.\n *\n * `queryStart` is the offset of the trigger character; `caret` is where the\n * query ends. The trailing space is deliberate: it terminates the query so the\n * popup closes, and it gives the next word somewhere to start.\n */\nexport function insertMention(\n  value: MentionValue,\n  option: MentionOption,\n  trigger: string,\n  queryStart: number,\n  caret: number,\n): InsertMentionResult {\n  const inserted = `${trigger}${option.label} `;\n  const { text: nextText, caret: nextCaret } = replaceTriggerRun(\n    value.text,\n    queryStart,\n    caret,\n    inserted,\n  );\n  const delta = inserted.length - (caret - queryStart);\n\n  const mentions: Mention[] = [];\n  for (const mention of value.mentions) {\n    if (mentionEnd(mention, trigger) <= queryStart) {\n      mentions.push(mention);\n    } else if (mention.start >= caret) {\n      mentions.push({ ...mention, start: mention.start + delta });\n    }\n    // else: it overlapped the query run being replaced — drop it.\n  }\n  mentions.push({ id: option.id, label: option.label, start: queryStart });\n  mentions.sort((a, b) => a.start - b.start);\n\n  return {\n    value: {\n      text: nextText,\n      mentions: mentions.filter(\n        (m) => nextText.slice(m.start, mentionEnd(m, trigger)) === trigger + m.label,\n      ),\n    },\n    caret: nextCaret,\n  };\n}\n\n/**\n * The serialization contract a consumer gets out: the raw text plus the option\n * ids it references, **deduped** and in **document order** (two mentions of the\n * same person yield one id).\n */\nexport function serializeMentions(value: MentionValue): { text: string; mentionedIds: string[] } {\n  const ordered = [...value.mentions].sort((a, b) => a.start - b.start);\n  const mentionedIds: string[] = [];\n  const seen = new Set<string>();\n  for (const mention of ordered) {\n    if (seen.has(mention.id)) continue;\n    seen.add(mention.id);\n    mentionedIds.push(mention.id);\n  }\n  return { text: value.text, mentionedIds };\n}\n\n/**\n * Case-insensitive substring match over `label` and `keywords`. An empty query\n * matches everything, so the full roster shows the moment the trigger is typed.\n */\nexport function defaultMentionFilter(option: MentionOption, query: string): boolean {\n  const q = query.trim().toLowerCase();\n  if (q.length === 0) return true;\n  if (option.label.toLowerCase().includes(q)) return true;\n  return (option.keywords ?? []).some((k) => k.toLowerCase().includes(q));\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-NQY3QNLR.js

@@ -0,0 +1,80 @@
+"use client";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "./chunk-U4LHV5DS.js";
+import {
+  Button
+} from "./chunk-VA2OONPE.js";
+import {
+  cn
+} from "./chunk-KBNWM27Q.js";
+
+// src/components/icon-button/icon-button.tsx
+import {
+  forwardRef,
+  useId
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var IconButton = forwardRef(function IconButton2({
+  label,
+  icon,
+  variant = "ghost",
+  size = "icon",
+  disabled,
+  disabledReason,
+  side = "top",
+  className,
+  ...props
+}, ref) {
+  const reasonId = useId();
+  const tooltipText = disabledReason ? `${label} \u2014 ${disabledReason}` : label;
+  return (
+    // Self-provided so this works anywhere — a consumer shouldn't have to
+    // remember to mount a global TooltipProvider for one icon button.
+    /* @__PURE__ */ jsxs(TooltipProvider, { children: [
+      /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "icon-button",
+            tabIndex: disabled ? 0 : void 0,
+            className: cn(
+              "inline-flex rounded-control",
+              // While disabled this span IS the focus target (the button is out
+              // of the tab order), so it must carry the system's focus ring —
+              // without this it falls back to the UA default outline, which is
+              // a hardcoded browser blue identical in every theme.
+              "focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+              disabled && "cursor-not-allowed"
+            ),
+            children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                ref,
+                variant,
+                size,
+                disabled,
+                ...props,
+                "aria-label": label,
+                "aria-describedby": disabledReason ? reasonId : void 0,
+                "data-slot": "icon-button-control",
+                className,
+                children: icon
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsx(TooltipContent, { side, "data-slot": "icon-button-tooltip", children: tooltipText })
+      ] }),
+      disabledReason ? /* @__PURE__ */ jsx("span", { id: reasonId, "data-slot": "icon-button-description", className: "sr-only", children: disabledReason }) : null
+    ] })
+  );
+});
+
+export {
+  IconButton
+};
+//# sourceMappingURL=chunk-NQY3QNLR.js.map

package/dist/chunk-NQY3QNLR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/icon-button/icon-button.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useId,\n  type ButtonHTMLAttributes,\n  type ComponentProps,\n  type ReactNode,\n} from \"react\";\nimport type { VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../lib/cn\";\nimport { Button } from \"../button\";\nimport type { buttonVariants } from \"../button\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"../tooltip\";\n\n/** The icon-only size axis (a deliberate subset of `buttonVariants`' `size`). */\nexport type IconButtonSize = \"icon\" | \"icon-sm\" | \"icon-lg\";\n\nexport interface IconButtonProps\n  extends\n    Omit<\n      ButtonHTMLAttributes<HTMLButtonElement>,\n      \"title\" | \"children\" | \"aria-label\" | \"aria-describedby\"\n    >,\n    Pick<VariantProps<typeof buttonVariants>, \"variant\"> {\n  /**\n   * Accessible name AND tooltip text — a single source of truth, so the two\n   * can never drift out of sync (the failure this component exists to close:\n   * `aria-label` and a tooltip's children set independently, most call sites\n   * only setting one).\n   */\n  label: string;\n  /** The glyph (typically a `lucide-react` element). */\n  icon: ReactNode;\n  /** Icon-only size axis. Default `\"icon\"`. */\n  size?: IconButtonSize;\n  /**\n   * Shown appended to the tooltip text, and — independently — exposed via\n   * `aria-describedby` through an `sr-only` node that is present whenever this\n   * prop is (i.e. it does NOT depend on the tooltip being open, and it is not\n   * rendered at all when there is no reason — so it can never be read as stray\n   * text), so assistive tech gets the reason even while the button is disabled\n   * (a disabled\n   * `<button>` still exposes its ARIA attributes; it just isn't\n   * focusable/hoverable itself, which is why the tooltip trigger wraps a\n   * focusable `<span>` instead — see the render below).\n   */\n  disabledReason?: string;\n  /** Tooltip placement. Default `\"top\"`. */\n  side?: ComponentProps<typeof TooltipContent>[\"side\"];\n}\n\n/**\n * A single affordance for an icon-only control: `label` becomes both the\n * `aria-label` and the tooltip text, so they cannot diverge. Composes\n * `Button` + `Tooltip` — it does not reimplement either.\n *\n * Deliberately has **no `asChild`**: accepting one would dissolve the button\n * into a Radix `Slot` and break the tooltip-trigger wrapper below. A\n * link-styled icon button should compose `Button asChild` + `Tooltip`\n * directly instead.\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  {\n    label,\n    icon,\n    variant = \"ghost\",\n    size = \"icon\",\n    disabled,\n    disabledReason,\n    side = \"top\",\n    className,\n    ...props\n  },\n  ref,\n) {\n  const reasonId = useId();\n  // The visible tooltip text always LEADS with `label` verbatim (never only\n  // the reason), so it can never contradict the accessible name (WCAG 2.5.3\n  // Label in Name) — the reason is appended context, not a replacement name.\n  const tooltipText = disabledReason ? `${label} — ${disabledReason}` : label;\n\n  return (\n    // Self-provided so this works anywhere — a consumer shouldn't have to\n    // remember to mount a global TooltipProvider for one icon button.\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          {/*\n           * A disabled `Button` carries `pointer-events-none`, so hover never\n           * reaches it and the tooltip would never open. Wrap the trigger\n           * around a plain <span> instead of the <button> itself: it stays\n           * hoverable always, and gains `tabIndex={0}` only while the inner\n           * control is disabled (and therefore removed from the tab order),\n           * so keyboard users can still reach the tooltip without a doubled\n           * stop when the button is enabled.\n           */}\n          <span\n            data-slot=\"icon-button\"\n            tabIndex={disabled ? 0 : undefined}\n            className={cn(\n              \"inline-flex rounded-control\",\n              // While disabled this span IS the focus target (the button is out\n              // of the tab order), so it must carry the system's focus ring —\n              // without this it falls back to the UA default outline, which is\n              // a hardcoded browser blue identical in every theme.\n              \"focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n              disabled && \"cursor-not-allowed\",\n            )}\n          >\n            <Button\n              ref={ref}\n              variant={variant}\n              size={size}\n              disabled={disabled}\n              {...props}\n              // Computed AFTER the spread so a stray `aria-label`/`aria-describedby`\n              // in `...props` can never win over the derived, single-source-of-truth\n              // values (the type above already excludes both, this is defense in\n              // depth for untyped/JS callers).\n              aria-label={label}\n              aria-describedby={disabledReason ? reasonId : undefined}\n              data-slot=\"icon-button-control\"\n              className={className}\n            >\n              {icon}\n            </Button>\n          </span>\n        </TooltipTrigger>\n        <TooltipContent side={side} data-slot=\"icon-button-tooltip\">\n          {tooltipText}\n        </TooltipContent>\n      </Tooltip>\n      {disabledReason ? (\n        <span id={reasonId} data-slot=\"icon-button-description\" className=\"sr-only\">\n          {disabledReason}\n        </span>\n      ) : null}\n    </TooltipProvider>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA,EACE;AAAA,EACA;AAAA,OAIK;AA8ED,SAwBM,KAxBN;AAxBC,IAAM,aAAa,WAA+C,SAASA,YAChF;AAAA,EACE;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,WAAW,MAAM;AAIvB,QAAM,cAAc,iBAAiB,GAAG,KAAK,WAAM,cAAc,KAAK;AAEtE;AAAA;AAAA;AAAA,IAGE,qBAAC,mBACC;AAAA,2BAAC,WACC;AAAA,4BAAC,kBAAe,SAAO,MAUrB;AAAA,UAAC;AAAA;AAAA,YACC,aAAU;AAAA,YACV,UAAU,WAAW,IAAI;AAAA,YACzB,WAAW;AAAA,cACT;AAAA;AAAA;AAAA;AAAA;AAAA,cAKA;AAAA,cACA,YAAY;AAAA,YACd;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACC,GAAG;AAAA,gBAKJ,cAAY;AAAA,gBACZ,oBAAkB,iBAAiB,WAAW;AAAA,gBAC9C,aAAU;AAAA,gBACV;AAAA,gBAEC;AAAA;AAAA,YACH;AAAA;AAAA,QACF,GACF;AAAA,QACA,oBAAC,kBAAe,MAAY,aAAU,uBACnC,uBACH;AAAA,SACF;AAAA,MACC,iBACC,oBAAC,UAAK,IAAI,UAAU,aAAU,2BAA0B,WAAU,WAC/D,0BACH,IACE;AAAA,OACN;AAAA;AAEJ,CAAC;","names":["IconButton"]}

package/dist/chunk-NRNIUM75.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-NRNIUM75.js.map

package/dist/chunk-NRNIUM75.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-NRSSSVWB.js

@@ -0,0 +1,61 @@
+"use client";
+import {
+  cn
+} from "./chunk-KBNWM27Q.js";
+
+// src/components/accordion/accordion.tsx
+import { forwardRef } from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Accordion = AccordionPrimitive.Root;
+var AccordionItem = forwardRef(function AccordionItem2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    AccordionPrimitive.Item,
+    {
+      ref,
+      "data-slot": "accordion-item",
+      className: cn("border-b", className),
+      ...props
+    }
+  );
+});
+var AccordionTrigger = forwardRef(function AccordionTrigger2({ className, children, headingLevel = 3, ...props }, ref) {
+  const Heading = `h${headingLevel}`;
+  return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { className: "flex", "data-slot": "accordion-header", children: /* @__PURE__ */ jsxs(
+    AccordionPrimitive.Trigger,
+    {
+      ref,
+      "data-slot": "accordion-trigger",
+      className: cn(
+        "flex flex-1 items-center justify-between py-4 text-body font-medium transition-all hover:underline focus-ring [&[data-state=open]>svg]:rotate-180",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 shrink-0 text-muted-foreground transition-transform duration-base ease-standard" })
+      ]
+    }
+  ) }) });
+});
+var AccordionContent = forwardRef(function AccordionContent2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    AccordionPrimitive.Content,
+    {
+      ref,
+      "data-slot": "accordion-content",
+      className: "overflow-hidden text-body data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: cn("pb-4 pt-0 text-muted-foreground", className), children })
+    }
+  );
+});
+
+export {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent
+};
+//# sourceMappingURL=chunk-NRSSSVWB.js.map

package/dist/chunk-NRSSSVWB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/accordion/accordion.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from \"react\";\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport { ChevronDown } from \"lucide-react\";\nimport { cn } from \"../../lib/cn\";\n\nexport const Accordion = AccordionPrimitive.Root;\n\nexport const AccordionItem = forwardRef<\n  ElementRef<typeof AccordionPrimitive.Item>,\n  ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(function AccordionItem({ className, ...props }, ref) {\n  return (\n    <AccordionPrimitive.Item\n      ref={ref}\n      data-slot=\"accordion-item\"\n      className={cn(\"border-b\", className)}\n      {...props}\n    />\n  );\n});\n\nexport interface AccordionTriggerProps extends ComponentPropsWithoutRef<\n  typeof AccordionPrimitive.Trigger\n> {\n  /**\n   * The heading level Radix's `Accordion.Header` renders. Radix hardcodes `h3`,\n   * which skips a level whenever the accordion sits directly under the page\n   * `h1` — so the level is the caller's to set. Visually identical at every\n   * level: the type comes from the trigger, not the heading.\n   * @default 3\n   */\n  headingLevel?: 2 | 3 | 4 | 5 | 6;\n}\n\nexport const AccordionTrigger = forwardRef<\n  ElementRef<typeof AccordionPrimitive.Trigger>,\n  AccordionTriggerProps\n>(function AccordionTrigger({ className, children, headingLevel = 3, ...props }, ref) {\n  const Heading = `h${headingLevel}` as const;\n  return (\n    <AccordionPrimitive.Header asChild>\n      <Heading className=\"flex\" data-slot=\"accordion-header\">\n        <AccordionPrimitive.Trigger\n          ref={ref}\n          data-slot=\"accordion-trigger\"\n          className={cn(\n            \"flex flex-1 items-center justify-between py-4 text-body font-medium transition-all hover:underline focus-ring [&[data-state=open]>svg]:rotate-180\",\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          <ChevronDown className=\"size-4 shrink-0 text-muted-foreground transition-transform duration-base ease-standard\" />\n        </AccordionPrimitive.Trigger>\n      </Heading>\n    </AccordionPrimitive.Header>\n  );\n});\n\nexport const AccordionContent = forwardRef<\n  ElementRef<typeof AccordionPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(function AccordionContent({ className, children, ...props }, ref) {\n  return (\n    <AccordionPrimitive.Content\n      ref={ref}\n      data-slot=\"accordion-content\"\n      className=\"overflow-hidden text-body data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n      {...props}\n    >\n      <div className={cn(\"pb-4 pt-0 text-muted-foreground\", className)}>{children}</div>\n    </AccordionPrimitive.Content>\n  );\n});\n"],"mappings":";;;;;;AAAA,SAAS,kBAAkE;AAC3E,YAAY,wBAAwB;AACpC,SAAS,mBAAmB;AAUxB,cA8BI,YA9BJ;AAPG,IAAM,YAA+B;AAErC,IAAM,gBAAgB,WAG3B,SAASA,eAAc,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AACrD,SACE;AAAA,IAAoB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,WAAW,GAAG,YAAY,SAAS;AAAA,MAClC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAeM,IAAM,mBAAmB,WAG9B,SAASC,kBAAiB,EAAE,WAAW,UAAU,eAAe,GAAG,GAAG,MAAM,GAAG,KAAK;AACpF,QAAM,UAAU,IAAI,YAAY;AAChC,SACE,oBAAoB,2BAAnB,EAA0B,SAAO,MAChC,8BAAC,WAAQ,WAAU,QAAO,aAAU,oBAClC;AAAA,IAAoB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACD,oBAAC,eAAY,WAAU,0FAAyF;AAAA;AAAA;AAAA,EAClH,GACF,GACF;AAEJ,CAAC;AAEM,IAAM,mBAAmB,WAG9B,SAASC,kBAAiB,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,KAAK;AAClE,SACE;AAAA,IAAoB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,WAAU;AAAA,MACT,GAAG;AAAA,MAEJ,8BAAC,SAAI,WAAW,GAAG,mCAAmC,SAAS,GAAI,UAAS;AAAA;AAAA,EAC9E;AAEJ,CAAC;","names":["AccordionItem","AccordionTrigger","AccordionContent"]}

package/dist/chunk-NTTSHOOK.js

@@ -0,0 +1,78 @@
+"use client";
+import {
+  TopNav
+} from "./chunk-5HBMI2DO.js";
+import {
+  SkipLink
+} from "./chunk-EL3OXVOW.js";
+import {
+  cn
+} from "./chunk-KBNWM27Q.js";
+
+// src/components/app-shell/app-shell.tsx
+import { forwardRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var AppShell = forwardRef(function AppShell2({
+  sidebar,
+  topNav,
+  topBar,
+  brandPlacement = "sidebar",
+  brand,
+  navigation = "sidebar",
+  secondaryPanel,
+  children,
+  className,
+  mainClassName,
+  mainId = "main-content"
+}, ref) {
+  const showSidebar = navigation !== "topbar" && !!sidebar;
+  const showBrandInTopBar = brandPlacement === "topbar" && !!brand;
+  const composedTopBar = topBar || showBrandInTopBar ? /* @__PURE__ */ jsx(
+    TopNav,
+    {
+      start: showBrandInTopBar ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { "data-slot": "app-shell-brand", className: "flex items-center", children: brand }),
+        topBar?.start
+      ] }) : topBar?.start,
+      center: topBar?.center,
+      end: topBar?.end
+    }
+  ) : null;
+  const resolvedTopBar = topNav ?? composedTopBar;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn("flex h-dvh w-full overflow-hidden bg-background text-foreground", className),
+      children: [
+        /* @__PURE__ */ jsx(SkipLink, { targetId: mainId }),
+        showSidebar ? /* @__PURE__ */ jsx("div", { className: "hidden md:flex", children: sidebar }) : null,
+        secondaryPanel ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "app-shell-secondary-panel",
+            className: "hidden w-(--shell-secondary-width) shrink-0 md:flex",
+            children: secondaryPanel
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+          resolvedTopBar,
+          /* @__PURE__ */ jsx(
+            "main",
+            {
+              id: mainId,
+              tabIndex: 0,
+              className: cn("min-h-0 flex-1 overflow-y-auto focus-ring-inset", mainClassName),
+              children
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+
+export {
+  AppShell
+};
+//# sourceMappingURL=chunk-NTTSHOOK.js.map