@elabs-ai/components-ui 4.2.0 → 5.1.0

package/dist/chunk-MY5H6D5Y.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-MZDL7N52.js

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

package/dist/chunk-MZDL7N52.js.map

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

package/dist/chunk-N7PJTMRL.js

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

package/dist/chunk-N7PJTMRL.js.map

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

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-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-NRPZ3BH4.js

@@ -0,0 +1,85 @@
+"use client";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "./chunk-ZSYT5H6U.js";
+import {
+  Avatar,
+  AvatarFallback
+} from "./chunk-PGKQZBLZ.js";
+import {
+  useLocale
+} from "./chunk-EJQYE4MY.js";
+import {
+  Button
+} from "./chunk-C5QBV5RE.js";
+import {
+  cn
+} from "./chunk-FXWWDMMP.js";
+
+// src/components/nav-notifications/nav-notifications.tsx
+import { BellIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NavNotifications({
+  notifications,
+  viewAllLabel = "View all notifications",
+  side = "right",
+  align,
+  className
+}) {
+  const { t } = useLocale();
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: cn("rounded-full", className),
+        "aria-label": t("ui.navNotifications.trigger"),
+        children: /* @__PURE__ */ jsx(BellIcon, { className: "size-5" })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      DropdownMenuContent,
+      {
+        side,
+        align,
+        collisionPadding: 16,
+        className: cn(
+          // The vertical inset belongs to the SIDE-opening rail placement, where
+          // the menu runs alongside its trigger and needs clearance from it. A
+          // menu that opens above or below the trigger is already clear of it,
+          // and the inset would just hang it 24px off the bar. Derived from
+          // `side` rather than exposed as a second className seam.
+          (side === "left" || side === "right") && "my-6",
+          // `w-80` (320px) is wider than some phone viewports once the 16px
+          // collision padding on both sides is subtracted — cap it so the menu
+          // shrinks instead of forcing horizontal overflow.
+          "w-80 max-w-[calc(100vw-2rem)]"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(DropdownMenuLabel, { children: t("ui.navNotifications.label") }),
+          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          notifications.map(({ id, fallback, text, time }) => /* @__PURE__ */ jsxs(DropdownMenuItem, { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ jsx(Avatar, { className: "size-8", children: /* @__PURE__ */ jsx(AvatarFallback, { children: fallback }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-body font-medium", children: text }),
+              /* @__PURE__ */ jsx("span", { className: "text-meta text-muted-foreground", children: time })
+            ] })
+          ] }, id)),
+          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsx(DropdownMenuItem, { className: "justify-center text-body text-muted-foreground", children: viewAllLabel })
+        ]
+      }
+    )
+  ] });
+}
+
+export {
+  NavNotifications
+};
+//# sourceMappingURL=chunk-NRPZ3BH4.js.map

package/dist/chunk-NRPZ3BH4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/nav-notifications/nav-notifications.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { BellIcon } from \"lucide-react\";\nimport { Avatar, AvatarFallback } from \"../avatar\";\nimport { Button } from \"../button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"../dropdown-menu\";\nimport { useLocale } from \"../locale-provider\";\nimport { cn } from \"../../lib/cn\";\n\nexport interface NavNotification {\n  id: string;\n  /** Two-letter fallback initials for the avatar. */\n  fallback: string;\n  text: string;\n  time: string;\n}\n\nexport interface NavNotificationsProps {\n  notifications: NavNotification[];\n  /** Label for the \"view all\" footer item. @default \"View all notifications\" */\n  viewAllLabel?: string;\n  /**\n   * Which side of the trigger the menu opens on.\n   *\n   * The default is `\"right\"`, which is right for the surface this component was\n   * extracted from — a bell sitting in a left-hand nav rail. It is WRONG for a\n   * trigger at the end of a top bar: Radix collision-handling then flips the\n   * menu back across the trigger and it covers the controls beside it. Set\n   * `side=\"bottom\"` (usually with `align=\"end\"`) for a top-bar bell.\n   *\n   * @default \"right\"\n   */\n  side?: ComponentProps<typeof DropdownMenuContent>[\"side\"];\n  /**\n   * How the menu aligns along that side. Radix's own default is `\"center\"`;\n   * pass `\"end\"` so a top-bar menu hangs from the trigger's outer edge instead\n   * of straddling it.\n   */\n  align?: ComponentProps<typeof DropdownMenuContent>[\"align\"];\n  /**\n   * Extra classes for the component ROOT — the bell trigger — merged last, so a\n   * caller can override the shipped `rounded-full` (`component-api.md`).\n   *\n   * There is deliberately NO seam for the portalled menu surface: nothing needs\n   * one today, and an unused prop is a worse API than a missing one. The one\n   * thing a caller used to reach for it (dropping the rail's vertical inset for\n   * a top-bar menu) is now derived from `side` instead — see below.\n   */\n  className?: string;\n}\n\n/**\n * Notifications dropdown button. Shared primitive from sidebar-02 (issue #99).\n * Renders a bell-icon ghost button that opens a dropdown listing recent\n * notifications.\n *\n * Placement is caller-owned via `side`/`align`; the defaults are the original\n * rail placement, so every existing call site renders unchanged. `className`\n * styles the trigger, not the menu.\n */\nexport function NavNotifications({\n  notifications,\n  viewAllLabel = \"View all notifications\",\n  side = \"right\",\n  align,\n  className,\n}: NavNotificationsProps) {\n  const { t } = useLocale();\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          className={cn(\"rounded-full\", className)}\n          aria-label={t(\"ui.navNotifications.trigger\")}\n        >\n          <BellIcon className=\"size-5\" />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent\n        side={side}\n        align={align}\n        // Keeps the menu clear of the viewport edge instead of sitting flush\n        // against it on a narrow phone screen.\n        collisionPadding={16}\n        className={cn(\n          // The vertical inset belongs to the SIDE-opening rail placement, where\n          // the menu runs alongside its trigger and needs clearance from it. A\n          // menu that opens above or below the trigger is already clear of it,\n          // and the inset would just hang it 24px off the bar. Derived from\n          // `side` rather than exposed as a second className seam.\n          (side === \"left\" || side === \"right\") && \"my-6\",\n          // `w-80` (320px) is wider than some phone viewports once the 16px\n          // collision padding on both sides is subtracted — cap it so the menu\n          // shrinks instead of forcing horizontal overflow.\n          \"w-80 max-w-[calc(100vw-2rem)]\",\n        )}\n      >\n        <DropdownMenuLabel>{t(\"ui.navNotifications.label\")}</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        {notifications.map(({ id, fallback, text, time }) => (\n          <DropdownMenuItem key={id} className=\"flex items-start gap-3\">\n            <Avatar className=\"size-8\">\n              <AvatarFallback>{fallback}</AvatarFallback>\n            </Avatar>\n            <div className=\"flex flex-col\">\n              <span className=\"text-body font-medium\">{text}</span>\n              <span className=\"text-meta text-muted-foreground\">{time}</span>\n            </div>\n          </DropdownMenuItem>\n        ))}\n        <DropdownMenuSeparator />\n        <DropdownMenuItem className=\"justify-center text-body text-muted-foreground\">\n          {viewAllLabel}\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAGA,SAAS,gBAAgB;AAkFf,cA6BE,YA7BF;AAjBH,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA,eAAe;AAAA,EACf,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAA0B;AACxB,QAAM,EAAE,EAAE,IAAI,UAAU;AACxB,SACE,qBAAC,gBACC;AAAA,wBAAC,uBAAoB,SAAO,MAC1B;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,WAAW,GAAG,gBAAgB,SAAS;AAAA,QACvC,cAAY,EAAE,6BAA6B;AAAA,QAE3C,8BAAC,YAAS,WAAU,UAAS;AAAA;AAAA,IAC/B,GACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QAGA,kBAAkB;AAAA,QAClB,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMR,SAAS,UAAU,SAAS,YAAY;AAAA;AAAA;AAAA;AAAA,UAIzC;AAAA,QACF;AAAA,QAEA;AAAA,8BAAC,qBAAmB,YAAE,2BAA2B,GAAE;AAAA,UACnD,oBAAC,yBAAsB;AAAA,UACtB,cAAc,IAAI,CAAC,EAAE,IAAI,UAAU,MAAM,KAAK,MAC7C,qBAAC,oBAA0B,WAAU,0BACnC;AAAA,gCAAC,UAAO,WAAU,UAChB,8BAAC,kBAAgB,oBAAS,GAC5B;AAAA,YACA,qBAAC,SAAI,WAAU,iBACb;AAAA,kCAAC,UAAK,WAAU,yBAAyB,gBAAK;AAAA,cAC9C,oBAAC,UAAK,WAAU,mCAAmC,gBAAK;AAAA,eAC1D;AAAA,eAPqB,EAQvB,CACD;AAAA,UACD,oBAAC,yBAAsB;AAAA,UACvB,oBAAC,oBAAiB,WAAU,kDACzB,wBACH;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/chunk-NXCOVGDU.js

@@ -0,0 +1,100 @@
+"use client";
+import {
+  Skeleton
+} from "./chunk-UPGIQXUY.js";
+import {
+  cn
+} from "./chunk-FXWWDMMP.js";
+
+// src/components/link-preview/link-preview.tsx
+import { forwardRef } from "react";
+import { GlobeIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Thumbnail({ image }) {
+  if (!image) return null;
+  return /* @__PURE__ */ jsx("div", { className: "relative h-full w-28 shrink-0 overflow-hidden rounded-e-lg", children: /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: image,
+      alt: "",
+      "aria-hidden": "true",
+      width: 112,
+      height: 112,
+      loading: "lazy",
+      className: "h-full w-full object-cover"
+    }
+  ) });
+}
+function SkeletonLayout() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-[5rem] gap-3 p-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2 py-0.5", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-24" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "mt-1 h-3 w-full" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-5/6" })
+    ] }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-20 w-28 shrink-0 rounded-md" })
+  ] });
+}
+var LinkPreviewCard = forwardRef(
+  function LinkPreviewCard2({ className, title, description, image, domain, href, loading = false, children, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "aria-busy": loading || void 0,
+        className: cn(
+          // Base card chrome — rounded border, card surface, subtle shadow
+          "relative overflow-hidden rounded-lg border bg-card text-card-foreground shadow-sm",
+          // Stretched-link focus ring: when `href` is present the inner <a>
+          // covers the whole card; the ring is painted on the card container via
+          // focus-within so the outer border gets the visible ring, not the
+          // hidden absolutely-positioned link.
+          // When `href` is present: stretched-link focus ring (via focus-within on
+          // the container, not the <a>) + hover lift + motion-tokened transition.
+          href && "cursor-pointer transition-[translate,box-shadow,border-color] duration-fast ease-standard focus-ring-within hover:-translate-y-0.5 hover:border-ring/40 hover:shadow-md motion-reduce:hover:translate-y-0",
+          className
+        ),
+        ...props,
+        children: loading ? /* @__PURE__ */ jsx(SkeletonLayout, {}) : /* @__PURE__ */ jsxs("div", { className: "flex min-h-[5rem] gap-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-1.5 p-3", children: [
+            domain && /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-1.5 text-meta text-muted-foreground", children: [
+              /* @__PURE__ */ jsx(GlobeIcon, { "aria-hidden": "true", className: "size-3 shrink-0" }),
+              /* @__PURE__ */ jsx("span", { className: "truncate", translate: "no", children: domain })
+            ] }),
+            title && /* @__PURE__ */ jsx("p", { className: "line-clamp-2 min-w-0 text-body font-medium leading-snug", children: href ? (
+              /*
+               * Stretched-link pattern: `<a>` is absolutely positioned to
+               * cover the entire card (after:absolute after:inset-0). The
+               * visible focus ring lives on the card container via
+               * focus-within (above). `focus-visible:outline-none` removes
+               * the browser's own ring on the link so it doesn't double up.
+               */
+              /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "after:absolute after:inset-0 focus-visible:outline-none",
+                  children: title
+                }
+              )
+            ) : title }),
+            description && /* @__PURE__ */ jsx("p", { className: "line-clamp-2 min-w-0 text-caption text-muted-foreground", children: description }),
+            children
+          ] }),
+          /* @__PURE__ */ jsx(Thumbnail, { image })
+        ] })
+      }
+    );
+  }
+);
+var LinkPreview = LinkPreviewCard;
+
+export {
+  LinkPreviewCard,
+  LinkPreview
+};
+//# sourceMappingURL=chunk-NXCOVGDU.js.map

package/dist/chunk-NXCOVGDU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/link-preview/link-preview.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { GlobeIcon } from \"lucide-react\";\nimport { cn } from \"../../lib/cn\";\nimport { Skeleton } from \"../skeleton/skeleton\";\n\n// ---------------------------------------------------------------------------\n// Public types\n// ---------------------------------------------------------------------------\n\nexport interface LinkPreviewCardProps extends HTMLAttributes<HTMLDivElement> {\n  /** Page title — the primary text, 1–2 lines. */\n  title?: string;\n  /** Short description / Open-Graph description. Omit for title+domain only. */\n  description?: string;\n  /**\n   * Absolute URL of the thumbnail image (consumer-provided; the library never\n   * fetches). Decorative — `alt` is always `\"\"`. Omit to hide the thumbnail\n   * area cleanly (no broken-image placeholder).\n   */\n  image?: string;\n  /**\n   * Domain label shown with the globe icon, e.g. `\"github.com\"`. Wrapped in\n   * `translate=\"no\"` so browsers never auto-translate identifiers.\n   */\n  domain?: string;\n  /**\n   * When set, the entire card becomes a keyboard-focusable link (stretched-link\n   * pattern). The visible focus ring is placed on the card via `focus-within`.\n   * Prefer a full absolute URL so the `<a>` is meaningful.\n   */\n  href?: string;\n  /**\n   * Render skeleton placeholders in lieu of real content. Sets `aria-busy=\"true\"`\n   * on the card root so assistive technology knows the content is pending.\n   */\n  loading?: boolean;\n}\n\n// ---------------------------------------------------------------------------\n// Internal helpers\n// ---------------------------------------------------------------------------\n\n/** Thumbnail — hidden when `image` is absent (no broken-icon placeholder). */\nfunction Thumbnail({ image }: { image?: string }) {\n  if (!image) return null;\n  return (\n    <div className=\"relative h-full w-28 shrink-0 overflow-hidden rounded-e-lg\">\n      {/* explicit width/height prevent CLS; object-cover fills the container */}\n      <img\n        src={image}\n        alt=\"\" // decorative; title carries meaning\n        aria-hidden=\"true\"\n        width={112}\n        height={112}\n        loading=\"lazy\"\n        className=\"h-full w-full object-cover\"\n      />\n    </div>\n  );\n}\n\n/** Skeleton layout matching the card shape. */\nfunction SkeletonLayout() {\n  return (\n    <div className=\"flex min-h-[5rem] gap-3 p-3\">\n      <div className=\"flex min-w-0 flex-1 flex-col gap-2 py-0.5\">\n        {/* domain row */}\n        <Skeleton className=\"h-3 w-24\" />\n        {/* title — two lines */}\n        <Skeleton className=\"h-4 w-full\" />\n        <Skeleton className=\"h-4 w-3/4\" />\n        {/* description */}\n        <Skeleton className=\"mt-1 h-3 w-full\" />\n        <Skeleton className=\"h-3 w-5/6\" />\n      </div>\n      {/* thumbnail placeholder */}\n      <Skeleton className=\"h-20 w-28 shrink-0 rounded-md\" />\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// LinkPreviewCard\n// ---------------------------------------------------------------------------\n\n/**\n * A rich, presentational link-preview card (unfurled URL / bookmark block).\n * Renders favicon/domain, title, description, and an optional thumbnail from\n * **consumer-provided** metadata — the library never fetches.\n *\n * States: `loading` (skeleton), loaded (full), no-image, no-description\n * (title + domain only), and empty/error (degrades to a plain placeholder).\n *\n * Pass `href` to make the whole card a keyboard-focusable stretched link.\n * Use `loading` for the skeleton state; set `aria-busy` is applied automatically.\n */\nexport const LinkPreviewCard = forwardRef<HTMLDivElement, LinkPreviewCardProps>(\n  function LinkPreviewCard(\n    { className, title, description, image, domain, href, loading = false, children, ...props },\n    ref,\n  ) {\n    return (\n      <div\n        ref={ref}\n        aria-busy={loading || undefined}\n        className={cn(\n          // Base card chrome — rounded border, card surface, subtle shadow\n          \"relative overflow-hidden rounded-lg border bg-card text-card-foreground shadow-sm\",\n          // Stretched-link focus ring: when `href` is present the inner <a>\n          // covers the whole card; the ring is painted on the card container via\n          // focus-within so the outer border gets the visible ring, not the\n          // hidden absolutely-positioned link.\n          // When `href` is present: stretched-link focus ring (via focus-within on\n          // the container, not the <a>) + hover lift + motion-tokened transition.\n          href &&\n            \"cursor-pointer transition-[translate,box-shadow,border-color] duration-fast ease-standard focus-ring-within hover:-translate-y-0.5 hover:border-ring/40 hover:shadow-md motion-reduce:hover:translate-y-0\",\n          className,\n        )}\n        {...props}\n      >\n        {loading ? (\n          <SkeletonLayout />\n        ) : (\n          <div className=\"flex min-h-[5rem] gap-0\">\n            {/* Main content */}\n            <div className=\"flex min-w-0 flex-1 flex-col justify-center gap-1.5 p-3\">\n              {/* Domain row */}\n              {domain && (\n                <p className=\"flex items-center gap-1.5 text-meta text-muted-foreground\">\n                  <GlobeIcon aria-hidden=\"true\" className=\"size-3 shrink-0\" />\n                  {/* translate=\"no\" so browsers never auto-translate domain identifiers */}\n                  <span className=\"truncate\" translate=\"no\">\n                    {domain}\n                  </span>\n                </p>\n              )}\n\n              {/* Title */}\n              {title && (\n                <p className=\"line-clamp-2 min-w-0 text-body font-medium leading-snug\">\n                  {href ? (\n                    /*\n                     * Stretched-link pattern: `<a>` is absolutely positioned to\n                     * cover the entire card (after:absolute after:inset-0). The\n                     * visible focus ring lives on the card container via\n                     * focus-within (above). `focus-visible:outline-none` removes\n                     * the browser's own ring on the link so it doesn't double up.\n                     */\n                    <a\n                      href={href}\n                      target=\"_blank\"\n                      rel=\"noopener noreferrer\"\n                      className=\"after:absolute after:inset-0 focus-visible:outline-none\"\n                    >\n                      {title}\n                    </a>\n                  ) : (\n                    title\n                  )}\n                </p>\n              )}\n\n              {/* Description */}\n              {description && (\n                <p className=\"line-clamp-2 min-w-0 text-caption text-muted-foreground\">\n                  {description}\n                </p>\n              )}\n\n              {children}\n            </div>\n\n            {/* Thumbnail — conditionally rendered */}\n            <Thumbnail image={image} />\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\n// ---------------------------------------------------------------------------\n// LinkPreview alias\n// ---------------------------------------------------------------------------\n\n/**\n * Convenience alias for `LinkPreviewCard`. Identical component — use whichever\n * name reads more naturally at the call site.\n *\n * `LinkPreviewCard` is the canonical export; `LinkPreview` is the alias.\n */\nexport const LinkPreview = LinkPreviewCard;\n"],"mappings":";;;;;;;;;AAEA,SAAS,kBAAuC;AAChD,SAAS,iBAAiB;AA+CpB,cAiBA,YAjBA;AALN,SAAS,UAAU,EAAE,MAAM,GAAuB;AAChD,MAAI,CAAC,MAAO,QAAO;AACnB,SACE,oBAAC,SAAI,WAAU,8DAEb;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,KAAI;AAAA,MACJ,eAAY;AAAA,MACZ,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAQ;AAAA,MACR,WAAU;AAAA;AAAA,EACZ,GACF;AAEJ;AAGA,SAAS,iBAAiB;AACxB,SACE,qBAAC,SAAI,WAAU,+BACb;AAAA,yBAAC,SAAI,WAAU,6CAEb;AAAA,0BAAC,YAAS,WAAU,YAAW;AAAA,MAE/B,oBAAC,YAAS,WAAU,cAAa;AAAA,MACjC,oBAAC,YAAS,WAAU,aAAY;AAAA,MAEhC,oBAAC,YAAS,WAAU,mBAAkB;AAAA,MACtC,oBAAC,YAAS,WAAU,aAAY;AAAA,OAClC;AAAA,IAEA,oBAAC,YAAS,WAAU,iCAAgC;AAAA,KACtD;AAEJ;AAiBO,IAAM,kBAAkB;AAAA,EAC7B,SAASA,iBACP,EAAE,WAAW,OAAO,aAAa,OAAO,QAAQ,MAAM,UAAU,OAAO,UAAU,GAAG,MAAM,GAC1F,KACA;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,aAAW,WAAW;AAAA,QACtB,WAAW;AAAA;AAAA,UAET;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAOA,QACE;AAAA,UACF;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH,oBACC,oBAAC,kBAAe,IAEhB,qBAAC,SAAI,WAAU,2BAEb;AAAA,+BAAC,SAAI,WAAU,2DAEZ;AAAA,sBACC,qBAAC,OAAE,WAAU,6DACX;AAAA,kCAAC,aAAU,eAAY,QAAO,WAAU,mBAAkB;AAAA,cAE1D,oBAAC,UAAK,WAAU,YAAW,WAAU,MAClC,kBACH;AAAA,eACF;AAAA,YAID,SACC,oBAAC,OAAE,WAAU,2DACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAQC;AAAA,gBAAC;AAAA;AAAA,kBACC;AAAA,kBACA,QAAO;AAAA,kBACP,KAAI;AAAA,kBACJ,WAAU;AAAA,kBAET;AAAA;AAAA,cACH;AAAA,gBAEA,OAEJ;AAAA,YAID,eACC,oBAAC,OAAE,WAAU,2DACV,uBACH;AAAA,YAGD;AAAA,aACH;AAAA,UAGA,oBAAC,aAAU,OAAc;AAAA,WAC3B;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAYO,IAAM,cAAc;","names":["LinkPreviewCard"]}

package/dist/chunk-NZUKZRT7.js

@@ -0,0 +1,201 @@
+"use client";
+import {
+  Input
+} from "./chunk-I3U52BDH.js";
+import {
+  useLocale
+} from "./chunk-EJQYE4MY.js";
+import {
+  Button
+} from "./chunk-C5QBV5RE.js";
+import {
+  cn
+} from "./chunk-FXWWDMMP.js";
+
+// src/components/key-value-editor/key-value-editor.tsx
+import {
+  forwardRef,
+  useCallback,
+  useMemo,
+  useState
+} from "react";
+import { Eye, EyeOff, Plus, X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var KeyValueEditor = forwardRef(
+  function KeyValueEditor2({
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    keyPlaceholder,
+    valuePlaceholder,
+    addLabel,
+    disabled,
+    className,
+    ...props
+  }, ref) {
+    const { t } = useLocale();
+    const isControlled = valueProp !== void 0;
+    const [internalRows, setInternalRows] = useState(defaultValue ?? []);
+    const rows = useMemo(
+      () => isControlled ? valueProp ?? [] : internalRows,
+      [isControlled, valueProp, internalRows]
+    );
+    const [revealed, setRevealed] = useState(() => /* @__PURE__ */ new Map());
+    const isRevealed = useCallback(
+      (index, row) => revealed.get(index) === row.value,
+      [revealed]
+    );
+    const commit = useCallback(
+      (next) => {
+        if (!isControlled) setInternalRows(next);
+        onValueChange?.(next);
+      },
+      [isControlled, onValueChange]
+    );
+    const addRow = useCallback(() => {
+      commit([...rows, { key: "", value: "", secret: false }]);
+    }, [rows, commit]);
+    const updateRow = useCallback(
+      (index, patch) => {
+        commit(rows.map((row, i) => i === index ? { ...row, ...patch } : row));
+        if (patch.value !== void 0) {
+          const nextValue = patch.value;
+          setRevealed((prev) => {
+            if (prev.get(index) !== rows[index]?.value) return prev;
+            const next = new Map(prev);
+            next.set(index, nextValue);
+            return next;
+          });
+        }
+      },
+      [rows, commit]
+    );
+    const removeRow = useCallback(
+      (index) => {
+        commit(rows.filter((_, i) => i !== index));
+        setRevealed((prev) => {
+          const next = /* @__PURE__ */ new Map();
+          for (const [i, stamp] of prev) {
+            if (i === index) continue;
+            next.set(i > index ? i - 1 : i, stamp);
+          }
+          return next;
+        });
+      },
+      [rows, commit]
+    );
+    const toggleReveal = useCallback((index, row) => {
+      setRevealed((prev) => {
+        const next = new Map(prev);
+        if (next.get(index) === row.value) next.delete(index);
+        else next.set(index, row.value);
+        return next;
+      });
+    }, []);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "key-value-editor",
+        className: cn("flex flex-col gap-2", className),
+        ...props,
+        children: [
+          rows.length === 0 ? /* @__PURE__ */ jsx("p", { "data-slot": "key-value-editor-empty", className: "text-body text-muted-foreground", children: t("ui.keyValueEditor.empty") }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: rows.map((row, index) => {
+            const isSecret = row.secret === true;
+            const rowRevealed = isRevealed(index, row);
+            const masked = isSecret && !rowRevealed;
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                "data-slot": "key-value-editor-row",
+                className: "flex items-center gap-1",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      "data-slot": "key-value-editor-key",
+                      value: row.key,
+                      placeholder: keyPlaceholder,
+                      disabled,
+                      "aria-label": t("ui.keyValueEditor.keyLabel", { n: index + 1 }),
+                      onChange: (event) => updateRow(index, { key: event.target.value }),
+                      autoComplete: "off",
+                      spellCheck: false,
+                      className: "flex-1"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      "data-slot": "key-value-editor-value",
+                      type: masked ? "password" : "text",
+                      value: row.value,
+                      placeholder: valuePlaceholder,
+                      disabled,
+                      "aria-label": t("ui.keyValueEditor.valueLabel", { n: index + 1 }),
+                      onChange: (event) => updateRow(index, { value: event.target.value }),
+                      autoComplete: "off",
+                      spellCheck: false,
+                      className: "flex-1"
+                    }
+                  ),
+                  isSecret && /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      "data-slot": "key-value-editor-reveal",
+                      type: "button",
+                      variant: "ghost",
+                      size: "icon-sm",
+                      disabled,
+                      "aria-label": t(
+                        rowRevealed ? "ui.keyValueEditor.hide" : "ui.keyValueEditor.reveal",
+                        { n: index + 1 }
+                      ),
+                      onClick: () => toggleReveal(index, row),
+                      children: rowRevealed ? /* @__PURE__ */ jsx(EyeOff, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Eye, { "aria-hidden": "true" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      "data-slot": "key-value-editor-remove",
+                      type: "button",
+                      variant: "ghost",
+                      size: "icon-sm",
+                      disabled,
+                      "aria-label": t("ui.keyValueEditor.removeRow", { n: index + 1 }),
+                      onClick: () => removeRow(index),
+                      children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+                    }
+                  )
+                ]
+              },
+              index
+            );
+          }) }),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              "data-slot": "key-value-editor-add",
+              type: "button",
+              variant: "outline-subtle",
+              size: "sm",
+              disabled,
+              onClick: addRow,
+              className: "self-start",
+              children: [
+                /* @__PURE__ */ jsx(Plus, { "aria-hidden": "true" }),
+                addLabel ?? t("ui.keyValueEditor.addRow")
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+export {
+  KeyValueEditor
+};
+//# sourceMappingURL=chunk-NZUKZRT7.js.map

package/dist/chunk-NZUKZRT7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/key-value-editor/key-value-editor.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { Eye, EyeOff, Plus, X } from \"lucide-react\";\nimport { cn } from \"../../lib/cn\";\nimport { Button } from \"../button\";\nimport { Input } from \"../input\";\nimport { useLocale } from \"../locale-provider\";\n\nexport interface KeyValueRow {\n  key: string;\n  value: string;\n  /**\n   * Marks this row's value as sensitive: it renders masked (`type=\"password\"`)\n   * with a reveal toggle, and is never surfaced in plain text via any\n   * `title`/`aria-label`/`aria-valuetext`. Defaults to false (a plain,\n   * unmasked key/value pair) — the consumer opts a row in explicitly.\n   */\n  secret?: boolean;\n}\n\nexport interface KeyValueEditorProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"onChange\" | \"defaultValue\"\n> {\n  /**\n   * Controlled, ORDERED rows. An ordered `{ key, value, secret? }[]` is used\n   * instead of `Record<string,string>` because a plain record can't\n   * represent an in-progress duplicate key or preserve row order while the\n   * user is mid-edit — both happen constantly while typing an env-var map.\n   */\n  value?: KeyValueRow[];\n  /** Uncontrolled initial rows. */\n  defaultValue?: KeyValueRow[];\n  /** Called when the rows change (add, remove, or edit). */\n  onValueChange?: (rows: KeyValueRow[]) => void;\n  /** Placeholder for each row's key field. */\n  keyPlaceholder?: string;\n  /** Placeholder for each row's value field. */\n  valuePlaceholder?: string;\n  /** Label for the \"add row\" control. */\n  addLabel?: ReactNode;\n  /** Disables the whole editor. */\n  disabled?: boolean;\n}\n\n/**\n * KeyValueEditor — key/value rows with per-row secret masking.\n *\n * Composes the existing `Input` + `Button` (icon vocabulary matches\n * `packages/ai/src/environment-variables.tsx`'s `Eye`/`EyeOff` reveal icons\n * for conceptual consistency, though this component lives in\n * `@elabs-ai/components-ui` — an EDITABLE settings-form primitive\n * is app UI, not the read-only agent tool-output display that\n * `EnvironmentVariables` is).\n *\n * A masked row uses the native `type=\"password\"` input (the correct\n * primitive for an EDITABLE masked field — unlike a read-only display, the\n * value must stay typable, and native masking is what keeps it that way\n * without hand-rolling bullet substitution). The reveal toggle's\n * `aria-label` never contains the secret text itself, and no `title`\n * attribute is ever set from row content.\n *\n * Controlled via `value`/`onValueChange`; uncontrolled via `defaultValue`.\n */\nexport const KeyValueEditor = forwardRef<HTMLDivElement, KeyValueEditorProps>(\n  function KeyValueEditor(\n    {\n      value: valueProp,\n      defaultValue,\n      onValueChange,\n      keyPlaceholder,\n      valuePlaceholder,\n      addLabel,\n      disabled,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const { t } = useLocale();\n    const isControlled = valueProp !== undefined;\n    const [internalRows, setInternalRows] = useState<KeyValueRow[]>(defaultValue ?? []);\n    const rows = useMemo(\n      () => (isControlled ? (valueProp ?? []) : internalRows),\n      [isControlled, valueProp, internalRows],\n    );\n    // Reveal state is keyed by row index AND stamped with the exact value the\n    // user chose to reveal. The index alone is NOT safe: the row list can be\n    // re-ordered, prepended to, filtered, or left unchanged (a controlled\n    // parent that rejects a removal) entirely OUTSIDE this component, and a\n    // bare index would then point at a DIFFERENT row — unmasking a secret the\n    // user never asked to see. Comparing the stamp against the row's current\n    // value makes the check FAIL CLOSED: any row whose value is not exactly\n    // the one that was revealed renders masked again.\n    const [revealed, setRevealed] = useState<Map<number, string>>(() => new Map());\n\n    const isRevealed = useCallback(\n      (index: number, row: KeyValueRow) => revealed.get(index) === row.value,\n      [revealed],\n    );\n\n    const commit = useCallback(\n      (next: KeyValueRow[]) => {\n        if (!isControlled) setInternalRows(next);\n        onValueChange?.(next);\n      },\n      [isControlled, onValueChange],\n    );\n\n    const addRow = useCallback(() => {\n      commit([...rows, { key: \"\", value: \"\", secret: false }]);\n    }, [rows, commit]);\n\n    const updateRow = useCallback(\n      (index: number, patch: Partial<KeyValueRow>) => {\n        commit(rows.map((row, i) => (i === index ? { ...row, ...patch } : row)));\n        // Typing into a row the user deliberately revealed must not re-mask it\n        // mid-keystroke — re-stamp the snapshot with the new value, but ONLY\n        // when the old stamp still matched (i.e. it really was revealed).\n        if (patch.value !== undefined) {\n          const nextValue = patch.value;\n          setRevealed((prev) => {\n            if (prev.get(index) !== rows[index]?.value) return prev;\n            const next = new Map(prev);\n            next.set(index, nextValue);\n            return next;\n          });\n        }\n      },\n      [rows, commit],\n    );\n\n    const removeRow = useCallback(\n      (index: number) => {\n        commit(rows.filter((_, i) => i !== index));\n        // Re-index revealed state so a shifted row never inherits a stale\n        // reveal — dropping the removed index and shifting later ones down.\n        // The value stamp above is the second line of defence: if the parent\n        // rejects or rewrites the removal, the shifted stamps stop matching\n        // and every row falls back to masked.\n        setRevealed((prev) => {\n          const next = new Map<number, string>();\n          for (const [i, stamp] of prev) {\n            if (i === index) continue;\n            next.set(i > index ? i - 1 : i, stamp);\n          }\n          return next;\n        });\n      },\n      [rows, commit],\n    );\n\n    const toggleReveal = useCallback((index: number, row: KeyValueRow) => {\n      setRevealed((prev) => {\n        const next = new Map(prev);\n        if (next.get(index) === row.value) next.delete(index);\n        else next.set(index, row.value);\n        return next;\n      });\n    }, []);\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"key-value-editor\"\n        className={cn(\"flex flex-col gap-2\", className)}\n        {...props}\n      >\n        {rows.length === 0 ? (\n          <p data-slot=\"key-value-editor-empty\" className=\"text-body text-muted-foreground\">\n            {t(\"ui.keyValueEditor.empty\")}\n          </p>\n        ) : (\n          <div className=\"flex flex-col gap-2\">\n            {rows.map((row, index) => {\n              const isSecret = row.secret === true;\n              const rowRevealed = isRevealed(index, row);\n              const masked = isSecret && !rowRevealed;\n              return (\n                <div\n                  key={index}\n                  data-slot=\"key-value-editor-row\"\n                  className=\"flex items-center gap-1\"\n                >\n                  <Input\n                    data-slot=\"key-value-editor-key\"\n                    value={row.key}\n                    placeholder={keyPlaceholder}\n                    disabled={disabled}\n                    aria-label={t(\"ui.keyValueEditor.keyLabel\", { n: index + 1 })}\n                    onChange={(event) => updateRow(index, { key: event.target.value })}\n                    autoComplete=\"off\"\n                    spellCheck={false}\n                    className=\"flex-1\"\n                  />\n                  <Input\n                    data-slot=\"key-value-editor-value\"\n                    type={masked ? \"password\" : \"text\"}\n                    value={row.value}\n                    placeholder={valuePlaceholder}\n                    disabled={disabled}\n                    aria-label={t(\"ui.keyValueEditor.valueLabel\", { n: index + 1 })}\n                    onChange={(event) => updateRow(index, { value: event.target.value })}\n                    autoComplete=\"off\"\n                    spellCheck={false}\n                    className=\"flex-1\"\n                  />\n                  {isSecret && (\n                    <Button\n                      data-slot=\"key-value-editor-reveal\"\n                      type=\"button\"\n                      variant=\"ghost\"\n                      size=\"icon-sm\"\n                      disabled={disabled}\n                      aria-label={t(\n                        rowRevealed ? \"ui.keyValueEditor.hide\" : \"ui.keyValueEditor.reveal\",\n                        { n: index + 1 },\n                      )}\n                      onClick={() => toggleReveal(index, row)}\n                    >\n                      {rowRevealed ? <EyeOff aria-hidden=\"true\" /> : <Eye aria-hidden=\"true\" />}\n                    </Button>\n                  )}\n                  <Button\n                    data-slot=\"key-value-editor-remove\"\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    disabled={disabled}\n                    aria-label={t(\"ui.keyValueEditor.removeRow\", { n: index + 1 })}\n                    onClick={() => removeRow(index)}\n                  >\n                    <X aria-hidden=\"true\" />\n                  </Button>\n                </div>\n              );\n            })}\n          </div>\n        )}\n        <Button\n          data-slot=\"key-value-editor-add\"\n          type=\"button\"\n          variant=\"outline-subtle\"\n          size=\"sm\"\n          disabled={disabled}\n          onClick={addRow}\n          className=\"self-start\"\n        >\n          <Plus aria-hidden=\"true\" />\n          {addLabel ?? t(\"ui.keyValueEditor.addRow\")}\n        </Button>\n      </div>\n    );\n  },\n);\n"],"mappings":"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","names":["KeyValueEditor"]}