@particle-academy/react-fancy 5.12.0 → 5.13.1

package/dist/chunk-FCAV5IFW.js

@@ -0,0 +1,63 @@
+import { cn } from './chunk-DSUHZO6T.js';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var sizeClasses = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg",
+  xl: "text-2xl",
+  "2xl": "text-4xl",
+  // Display steps. Each is the next Tailwind size up, continuing the ramp.
+  "3xl": "text-5xl",
+  "4xl": "text-6xl",
+  "5xl": "text-7xl",
+  "6xl": "text-8xl",
+  "7xl": "text-9xl"
+};
+var trackingClasses = {
+  "3xl": "tracking-tight",
+  "4xl": "tracking-tight",
+  "5xl": "tracking-tighter",
+  "6xl": "tracking-tighter",
+  "7xl": "tracking-tighter"
+};
+var weightClasses = {
+  normal: "font-normal",
+  medium: "font-medium",
+  semibold: "font-semibold",
+  bold: "font-bold"
+};
+var Heading = forwardRef(
+  ({
+    as: Tag = "h2",
+    size = "lg",
+    weight = "bold",
+    className,
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Tag,
+      {
+        ref,
+        "data-react-fancy-heading": "",
+        className: cn(
+          "text-zinc-900 dark:text-zinc-100",
+          sizeClasses[size],
+          trackingClasses[size],
+          weightClasses[weight],
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Heading.displayName = "Heading";
+
+export { Heading };
+//# sourceMappingURL=chunk-FCAV5IFW.js.map
+//# sourceMappingURL=chunk-FCAV5IFW.js.map

package/dist/chunk-FCAV5IFW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Heading/Heading.tsx"],"names":[],"mappings":";;;;AAIA,IAAM,WAAA,GAAiE;AAAA,EACrE,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI,UAAA;AAAA,EACJ,KAAA,EAAO,UAAA;AAAA;AAAA,EAEP,KAAA,EAAO,UAAA;AAAA,EACP,KAAA,EAAO,UAAA;AAAA,EACP,KAAA,EAAO,UAAA;AAAA,EACP,KAAA,EAAO,UAAA;AAAA,EACP,KAAA,EAAO;AACT,CAAA;AASA,IAAM,eAAA,GAA8E;AAAA,EAClF,KAAA,EAAO,gBAAA;AAAA,EACP,KAAA,EAAO,gBAAA;AAAA,EACP,KAAA,EAAO,kBAAA;AAAA,EACP,KAAA,EAAO,kBAAA;AAAA,EACP,KAAA,EAAO;AACT,CAAA;AAEA,IAAM,aAAA,GAAqE;AAAA,EACzE,MAAA,EAAQ,aAAA;AAAA,EACR,MAAA,EAAQ,aAAA;AAAA,EACR,QAAA,EAAU,eAAA;AAAA,EACV,IAAA,EAAM;AACR,CAAA;AAEO,IAAM,OAAA,GAAU,UAAA;AAAA,EACrB,CACE;AAAA,IACE,IAAI,GAAA,GAAM,IAAA;AAAA,IACV,IAAA,GAAO,IAAA;AAAA,IACP,MAAA,GAAS,MAAA;AAAA,IACT,SAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,uBACE,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,0BAAA,EAAyB,EAAA;AAAA,QACzB,SAAA,EAAW,EAAA;AAAA,UACT,kCAAA;AAAA,UACA,YAAY,IAAI,CAAA;AAAA,UAChB,gBAAgB,IAAI,CAAA;AAAA,UACpB,cAAc,MAAM,CAAA;AAAA,UACpB;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"chunk-FCAV5IFW.js","sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { HeadingProps } from \"./Heading.types\";\n\nconst sizeClasses: Record<NonNullable<HeadingProps[\"size\"]>, string> = {\n  xs: \"text-xs\",\n  sm: \"text-sm\",\n  md: \"text-base\",\n  lg: \"text-lg\",\n  xl: \"text-2xl\",\n  \"2xl\": \"text-4xl\",\n  // Display steps. Each is the next Tailwind size up, continuing the ramp.\n  \"3xl\": \"text-5xl\",\n  \"4xl\": \"text-6xl\",\n  \"5xl\": \"text-7xl\",\n  \"6xl\": \"text-8xl\",\n  \"7xl\": \"text-9xl\",\n};\n\n/**\n * Tracking for the display steps only.\n *\n * Default letter-spacing is tuned for headings that sit near body text. At\n * display scale the same spacing reads loose — which is exactly why the big-type\n * gallery style hand-rolled its own `<h1>` rather than use this component.\n */\nconst trackingClasses: Partial<Record<NonNullable<HeadingProps[\"size\"]>, string>> = {\n  \"3xl\": \"tracking-tight\",\n  \"4xl\": \"tracking-tight\",\n  \"5xl\": \"tracking-tighter\",\n  \"6xl\": \"tracking-tighter\",\n  \"7xl\": \"tracking-tighter\",\n};\n\nconst weightClasses: Record<NonNullable<HeadingProps[\"weight\"]>, string> = {\n  normal: \"font-normal\",\n  medium: \"font-medium\",\n  semibold: \"font-semibold\",\n  bold: \"font-bold\",\n};\n\nexport const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(\n  (\n    {\n      as: Tag = \"h2\",\n      size = \"lg\",\n      weight = \"bold\",\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <Tag\n        ref={ref}\n        data-react-fancy-heading=\"\"\n        className={cn(\n          \"text-zinc-900 dark:text-zinc-100\",\n          sizeClasses[size],\n          trackingClasses[size],\n          weightClasses[weight],\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </Tag>\n    );\n  },\n);\n\nHeading.displayName = \"Heading\";\n"]}

package/dist/chunk-FVV76TRF.js

@@ -0,0 +1,101 @@
+import { cn } from './chunk-DSUHZO6T.js';
+import { useRef, useMemo, useEffect, useSyncExternalStore } from 'react';
+import { tokenizeHtml, highlightCode, DARK_COLORS, LIGHT_COLORS } from '@particle-academy/fancy-file-commons';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function subscribeDark(callback) {
+  const mq = window.matchMedia("(prefers-color-scheme: dark)");
+  mq.addEventListener("change", callback);
+  const observer = new MutationObserver(callback);
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["class"]
+  });
+  return () => {
+    mq.removeEventListener("change", callback);
+    observer.disconnect();
+  };
+}
+function darkSnapshot() {
+  return document.documentElement.classList.contains("dark") || window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function useIsDark() {
+  return useSyncExternalStore(subscribeDark, darkSnapshot, () => false);
+}
+var TEXT_METRICS = "m-0 p-3 font-mono text-xs leading-relaxed";
+function CodeView({
+  value,
+  onChange,
+  language = "plaintext",
+  readOnly = false,
+  placeholder,
+  minHeight = 120,
+  maxHeight,
+  className
+}) {
+  const textareaRef = useRef(null);
+  const isDark = useIsDark();
+  const colors = isDark ? DARK_COLORS : LIGHT_COLORS;
+  const highlighted = useMemo(() => {
+    const tokens = language === "html" ? tokenizeHtml(value) : [];
+    return highlightCode(value, tokens, colors);
+  }, [value, language, colors]);
+  useEffect(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }, [value]);
+  const editable = !readOnly && !!onChange;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-react-fancy-code-view": "",
+      className: cn("relative overflow-auto", className),
+      style: { backgroundColor: colors.background, color: colors.foreground, minHeight, maxHeight },
+      children: /* @__PURE__ */ jsxs("div", { className: "relative min-h-full", children: [
+        /* @__PURE__ */ jsx(
+          "pre",
+          {
+            "aria-hidden": "true",
+            className: cn("pointer-events-none absolute inset-0 overflow-hidden border-none", TEXT_METRICS),
+            style: { whiteSpace: "pre-wrap", overflowWrap: "break-word" },
+            children: /* @__PURE__ */ jsx("code", { dangerouslySetInnerHTML: { __html: highlighted + "\n" } })
+          }
+        ),
+        placeholder && value.length === 0 && /* @__PURE__ */ jsx("div", { className: cn("pointer-events-none absolute left-0 top-0 opacity-40", TEXT_METRICS), children: placeholder }),
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            ref: textareaRef,
+            "data-react-fancy-code-view-input": "",
+            value,
+            onChange: editable ? (e) => onChange(e.target.value) : void 0,
+            readOnly: !editable,
+            spellCheck: false,
+            autoComplete: "off",
+            autoCorrect: "off",
+            autoCapitalize: "off",
+            "aria-label": placeholder,
+            className: cn(
+              "relative block w-full resize-none border-none bg-transparent text-transparent outline-none",
+              TEXT_METRICS
+            ),
+            style: {
+              caretColor: colors.cursorColor,
+              overflow: "hidden",
+              whiteSpace: "pre-wrap",
+              overflowWrap: "break-word",
+              minHeight
+            }
+          }
+        )
+      ] })
+    }
+  );
+}
+CodeView.displayName = "CodeView";
+
+export { CodeView };
+//# sourceMappingURL=chunk-FVV76TRF.js.map
+//# sourceMappingURL=chunk-FVV76TRF.js.map

package/dist/chunk-FVV76TRF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CodeView/CodeView.tsx"],"names":[],"mappings":";;;;;AAiBA,SAAS,cAAc,QAAA,EAAkC;AACvD,EAAA,MAAM,EAAA,GAAK,MAAA,CAAO,UAAA,CAAW,8BAA8B,CAAA;AAC3D,EAAA,EAAA,CAAG,gBAAA,CAAiB,UAAU,QAAQ,CAAA;AACtC,EAAA,MAAM,QAAA,GAAW,IAAI,gBAAA,CAAiB,QAAQ,CAAA;AAC9C,EAAA,QAAA,CAAS,OAAA,CAAQ,SAAS,eAAA,EAAiB;AAAA,IACzC,UAAA,EAAY,IAAA;AAAA,IACZ,eAAA,EAAiB,CAAC,OAAO;AAAA,GAC1B,CAAA;AACD,EAAA,OAAO,MAAM;AACX,IAAA,EAAA,CAAG,mBAAA,CAAoB,UAAU,QAAQ,CAAA;AACzC,IAAA,QAAA,CAAS,UAAA,EAAW;AAAA,EACtB,CAAA;AACF;AAEA,SAAS,YAAA,GAAwB;AAC/B,EAAA,OACE,QAAA,CAAS,gBAAgB,SAAA,CAAU,QAAA,CAAS,MAAM,CAAA,IAClD,MAAA,CAAO,UAAA,CAAW,8BAA8B,CAAA,CAAE,OAAA;AAEtD;AAEA,SAAS,SAAA,GAAqB;AAC5B,EAAA,OAAO,oBAAA,CAAqB,aAAA,EAAe,YAAA,EAAc,MAAM,KAAK,CAAA;AACtE;AAKA,IAAM,YAAA,GAAe,2CAAA;AASd,SAAS,QAAA,CAAS;AAAA,EACvB,KAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA,GAAW,WAAA;AAAA,EACX,QAAA,GAAW,KAAA;AAAA,EACX,WAAA;AAAA,EACA,SAAA,GAAY,GAAA;AAAA,EACZ,SAAA;AAAA,EACA;AACF,CAAA,EAAkB;AAChB,EAAA,MAAM,WAAA,GAAc,OAAmC,IAAI,CAAA;AAC3D,EAAA,MAAM,SAAS,SAAA,EAAU;AACzB,EAAA,MAAM,MAAA,GAAsB,SAAS,WAAA,GAAc,YAAA;AAEnD,EAAA,MAAM,WAAA,GAAc,QAAQ,MAAM;AAChC,IAAA,MAAM,SAAS,QAAA,KAAa,MAAA,GAAS,YAAA,CAAa,KAAK,IAAI,EAAC;AAC5D,IAAA,OAAO,aAAA,CAAc,KAAA,EAAO,MAAA,EAAQ,MAAM,CAAA;AAAA,EAC5C,CAAA,EAAG,CAAC,KAAA,EAAO,QAAA,EAAU,MAAM,CAAC,CAAA;AAI5B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,KAAK,WAAA,CAAY,OAAA;AACvB,IAAA,IAAI,CAAC,EAAA,EAAI;AACT,IAAA,EAAA,CAAG,MAAM,MAAA,GAAS,MAAA;AAClB,IAAA,EAAA,CAAG,KAAA,CAAM,MAAA,GAAS,CAAA,EAAG,EAAA,CAAG,YAAY,CAAA,EAAA,CAAA;AAAA,EACtC,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,MAAM,QAAA,GAAW,CAAC,QAAA,IAAY,CAAC,CAAC,QAAA;AAEhC,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,4BAAA,EAA2B,EAAA;AAAA,MAK3B,SAAA,EAAW,EAAA,CAAG,wBAAA,EAA0B,SAAS,CAAA;AAAA,MACjD,KAAA,EAAO,EAAE,eAAA,EAAiB,MAAA,CAAO,YAAY,KAAA,EAAO,MAAA,CAAO,UAAA,EAAY,SAAA,EAAW,SAAA,EAAU;AAAA,MAE5F,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qBAAA,EAEb,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAY,MAAA;AAAA,YACZ,SAAA,EAAW,EAAA,CAAG,kEAAA,EAAoE,YAAY,CAAA;AAAA,YAC9F,KAAA,EAAO,EAAE,UAAA,EAAY,UAAA,EAAY,cAAc,YAAA,EAAa;AAAA,YAE5D,8BAAC,MAAA,EAAA,EAAK,uBAAA,EAAyB,EAAE,MAAA,EAAQ,WAAA,GAAc,MAAK,EAAG;AAAA;AAAA,SACjE;AAAA,QAGC,WAAA,IAAe,KAAA,CAAM,MAAA,KAAW,CAAA,oBAC/B,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,sDAAA,EAAwD,YAAY,CAAA,EACpF,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,wBAIF,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,GAAA,EAAK,WAAA;AAAA,YACL,kCAAA,EAAiC,EAAA;AAAA,YACjC,KAAA;AAAA,YACA,QAAA,EAAU,WAAW,CAAC,CAAA,KAAM,SAAU,CAAA,CAAE,MAAA,CAAO,KAAK,CAAA,GAAI,MAAA;AAAA,YACxD,UAAU,CAAC,QAAA;AAAA,YACX,UAAA,EAAY,KAAA;AAAA,YACZ,YAAA,EAAa,KAAA;AAAA,YACb,WAAA,EAAY,KAAA;AAAA,YACZ,cAAA,EAAe,KAAA;AAAA,YACf,YAAA,EAAY,WAAA;AAAA,YACZ,SAAA,EAAW,EAAA;AAAA,cACT,4FAAA;AAAA,cACA;AAAA,aACF;AAAA,YACA,KAAA,EAAO;AAAA,cACL,YAAY,MAAA,CAAO,WAAA;AAAA,cACnB,QAAA,EAAU,QAAA;AAAA,cACV,UAAA,EAAY,UAAA;AAAA,cACZ,YAAA,EAAc,YAAA;AAAA,cACd;AAAA;AACF;AAAA;AACF,OAAA,EACF;AAAA;AAAA,GACF;AAEJ;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"chunk-FVV76TRF.js","sourcesContent":["import { useEffect, useMemo, useRef, useSyncExternalStore } from \"react\";\nimport {\n  highlightCode,\n  tokenizeHtml,\n  LIGHT_COLORS,\n  DARK_COLORS,\n  type ThemeColors,\n} from \"@particle-academy/fancy-file-commons\";\nimport { cn } from \"../../utils/cn\";\nimport type { CodeViewProps } from \"./CodeView.types\";\n\n// ── Dark-mode detection ────────────────────────────────────────────────────\n// The highlight palette is baked in as inline colors, so we resolve light/dark\n// ourselves. Follow BOTH signals so we match whatever drives the surrounding\n// `dark:` Tailwind variants: the `.dark` class (class strategy) OR the\n// prefers-color-scheme media query (media strategy).\n\nfunction subscribeDark(callback: () => void): () => void {\n  const mq = window.matchMedia(\"(prefers-color-scheme: dark)\");\n  mq.addEventListener(\"change\", callback);\n  const observer = new MutationObserver(callback);\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\"],\n  });\n  return () => {\n    mq.removeEventListener(\"change\", callback);\n    observer.disconnect();\n  };\n}\n\nfunction darkSnapshot(): boolean {\n  return (\n    document.documentElement.classList.contains(\"dark\") ||\n    window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n  );\n}\n\nfunction useIsDark(): boolean {\n  return useSyncExternalStore(subscribeDark, darkSnapshot, () => false);\n}\n\n// Shared text metrics — the overlay and the textarea MUST match exactly (font,\n// size, line-height, padding, wrapping) so the highlighted glyphs sit under the\n// caret. Keep this string identical on both layers.\nconst TEXT_METRICS = \"m-0 p-3 font-mono text-xs leading-relaxed\";\n\n/**\n * A lightweight, syntax-highlighted source view built on the pure highlight\n * primitives in `@particle-academy/fancy-file-commons` — a highlight overlay\n * with a transparent, auto-growing textarea on top; the container scrolls both\n * together. Fills its parent's height (`h-full`) and grows with content down to\n * `minHeight`. Only HTML is highlighted; other languages render as plain text.\n */\nexport function CodeView({\n  value,\n  onChange,\n  language = \"plaintext\",\n  readOnly = false,\n  placeholder,\n  minHeight = 120,\n  maxHeight,\n  className,\n}: CodeViewProps) {\n  const textareaRef = useRef<HTMLTextAreaElement | null>(null);\n  const isDark = useIsDark();\n  const colors: ThemeColors = isDark ? DARK_COLORS : LIGHT_COLORS;\n\n  const highlighted = useMemo(() => {\n    const tokens = language === \"html\" ? tokenizeHtml(value) : [];\n    return highlightCode(value, tokens, colors);\n  }, [value, language, colors]);\n\n  // Grow the textarea to its content height so it never scrolls internally —\n  // the outer container owns scrolling and moves overlay + textarea in lockstep.\n  useEffect(() => {\n    const el = textareaRef.current;\n    if (!el) return;\n    el.style.height = \"auto\";\n    el.style.height = `${el.scrollHeight}px`;\n  }, [value]);\n\n  const editable = !readOnly && !!onChange;\n\n  return (\n    <div\n      data-react-fancy-code-view=\"\"\n      // No baked-in height: the consumer picks the fill mechanism — `flex-1`\n      // inside a flex column (the Editor source body), or `h-full` when the\n      // parent has a definite height. A hard-coded `h-full` here collapses to\n      // content height under a flex-computed (indefinite) parent.\n      className={cn(\"relative overflow-auto\", className)}\n      style={{ backgroundColor: colors.background, color: colors.foreground, minHeight, maxHeight }}\n    >\n      <div className=\"relative min-h-full\">\n        {/* Highlight overlay */}\n        <pre\n          aria-hidden=\"true\"\n          className={cn(\"pointer-events-none absolute inset-0 overflow-hidden border-none\", TEXT_METRICS)}\n          style={{ whiteSpace: \"pre-wrap\", overflowWrap: \"break-word\" }}\n        >\n          <code dangerouslySetInnerHTML={{ __html: highlighted + \"\\n\" }} />\n        </pre>\n\n        {/* Placeholder */}\n        {placeholder && value.length === 0 && (\n          <div className={cn(\"pointer-events-none absolute left-0 top-0 opacity-40\", TEXT_METRICS)}>\n            {placeholder}\n          </div>\n        )}\n\n        {/* Transparent input layer (caret + selection visible, glyphs from overlay) */}\n        <textarea\n          ref={textareaRef}\n          data-react-fancy-code-view-input=\"\"\n          value={value}\n          onChange={editable ? (e) => onChange!(e.target.value) : undefined}\n          readOnly={!editable}\n          spellCheck={false}\n          autoComplete=\"off\"\n          autoCorrect=\"off\"\n          autoCapitalize=\"off\"\n          aria-label={placeholder}\n          className={cn(\n            \"relative block w-full resize-none border-none bg-transparent text-transparent outline-none\",\n            TEXT_METRICS,\n          )}\n          style={{\n            caretColor: colors.cursorColor,\n            overflow: \"hidden\",\n            whiteSpace: \"pre-wrap\",\n            overflowWrap: \"break-word\",\n            minHeight,\n          }}\n        />\n      </div>\n    </div>\n  );\n}\n\nCodeView.displayName = \"CodeView\";\n"]}

package/dist/chunk-G2W7B3OG.js

@@ -0,0 +1,420 @@
+import { useMemo, useState, useRef, useEffect, useLayoutEffect, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/InputTag/InputTag.tsx
+function defaultKeyOf(item) {
+  if (item && typeof item === "object") {
+    const r = item;
+    if (typeof r.name === "string") return r.name;
+    if (typeof r.id === "string") return r.id;
+  }
+  return String(item);
+}
+function defaultFilter(item, query) {
+  if (!query) return true;
+  return defaultKeyOf(item).toLowerCase().includes(query.toLowerCase());
+}
+function detectTrigger(text, caret, triggerChars) {
+  for (let i = caret - 1; i >= 0; i--) {
+    const ch = text[i];
+    if (ch === void 0) break;
+    if (triggerChars.has(ch)) {
+      if (i === 0 || /\s/.test(text[i - 1])) {
+        return {
+          char: ch,
+          start: i,
+          end: caret,
+          query: text.slice(i + 1, caret)
+        };
+      }
+      return null;
+    }
+    if (/\s/.test(ch)) return null;
+  }
+  return null;
+}
+function InputTag({
+  adapter,
+  triggers,
+  maxItems = 8,
+  placement = "bottom-left",
+  className,
+  style,
+  onPick
+}) {
+  const triggerChars = useMemo(() => new Set(Object.keys(triggers)), [triggers]);
+  const [active, setActive] = useState(null);
+  const [cursor, setCursor] = useState(0);
+  const [anchorRect, setAnchorRect] = useState(null);
+  const stateRef = useRef({ text: "", caretIndex: 0 });
+  const activeRef = useRef(null);
+  const cursorRef = useRef(0);
+  activeRef.current = active;
+  cursorRef.current = cursor;
+  const items = useMemo(() => {
+    if (!active) return [];
+    const cfg2 = triggers[active.char];
+    if (!cfg2) return [];
+    const filter = cfg2.filter ?? defaultFilter;
+    const out = [];
+    for (const item of cfg2.items) {
+      if (filter(item, active.query)) out.push(item);
+      if (out.length >= maxItems) break;
+    }
+    return out;
+  }, [active, triggers, maxItems]);
+  useEffect(() => {
+    return adapter.subscribe((s) => {
+      stateRef.current = s;
+      const next = detectTrigger(s.text, s.caretIndex, triggerChars);
+      setActive((prev) => {
+        if (!prev || !next || prev.char !== next.char || prev.start !== next.start) {
+          setCursor(0);
+        }
+        return next;
+      });
+      if (next) setAnchorRect(adapter.getAnchorRect());
+    });
+  }, [adapter, triggerChars]);
+  useLayoutEffect(() => {
+    if (!active) return;
+    const update = () => setAnchorRect(adapter.getAnchorRect());
+    update();
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [active, adapter]);
+  useEffect(() => {
+    if (cursor >= items.length) setCursor(Math.max(0, items.length - 1));
+  }, [items.length, cursor]);
+  const pickItem = useCallback(
+    (item) => {
+      const cur = activeRef.current;
+      if (!cur) return;
+      const cfg2 = triggers[cur.char];
+      if (!cfg2) return;
+      const replacement = cfg2.insert(item, cur.query);
+      adapter.replaceRange(cur.start, cur.end, replacement);
+      onPick?.({ triggerChar: cur.char, query: cur.query, item });
+      setActive(null);
+    },
+    [adapter, triggers, onPick]
+  );
+  useEffect(() => {
+    return adapter.onKey((e) => {
+      const cur = activeRef.current;
+      if (!cur) return false;
+      const visible = items;
+      switch (e.key) {
+        case "ArrowDown":
+          if (visible.length === 0) return false;
+          setCursor((c) => (c + 1) % visible.length);
+          return true;
+        case "ArrowUp":
+          if (visible.length === 0) return false;
+          setCursor((c) => (c - 1 + visible.length) % visible.length);
+          return true;
+        case "Enter":
+        case "Tab": {
+          if (visible.length === 0) return false;
+          const idx = Math.min(cursorRef.current, visible.length - 1);
+          pickItem(visible[idx]);
+          return true;
+        }
+        case "Escape":
+          setActive(null);
+          return true;
+        default:
+          return false;
+      }
+    });
+  }, [adapter, items, pickItem]);
+  if (!active || !anchorRect || items.length === 0) return null;
+  const cfg = triggers[active.char];
+  if (!cfg) return null;
+  const popStyle = computePopoverStyle(anchorRect, placement);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "listbox",
+      "aria-label": cfg.label ?? `Pick a ${active.char === "/" ? "command" : "mention"}`,
+      className: [
+        "fixed z-50 w-72 overflow-hidden rounded-md border border-zinc-200 bg-white shadow-lg dark:border-zinc-700 dark:bg-zinc-900",
+        className ?? ""
+      ].filter(Boolean).join(" "),
+      style: { ...popStyle, ...style },
+      children: [
+        (cfg.label || active.query) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-zinc-100 bg-zinc-50 px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-zinc-500 dark:border-zinc-800 dark:bg-zinc-950", children: [
+          /* @__PURE__ */ jsx("span", { children: cfg.label ?? labelForChar(active.char) }),
+          active.query && /* @__PURE__ */ jsxs("span", { className: "font-mono text-[10px] normal-case tracking-normal text-zinc-400", children: [
+            active.char,
+            active.query
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("ul", { className: "max-h-60 overflow-y-auto", children: items.map((item, i) => {
+          const renderer = cfg.render ?? ((it) => /* @__PURE__ */ jsx("span", { children: defaultKeyOf(it) }));
+          const active2 = i === cursor;
+          const key = (cfg.keyOf ?? defaultKeyOf)(item);
+          return /* @__PURE__ */ jsx(
+            "li",
+            {
+              role: "option",
+              "aria-selected": active2,
+              onMouseDown: (e) => {
+                e.preventDefault();
+                pickItem(item);
+              },
+              onMouseEnter: () => setCursor(i),
+              className: [
+                "cursor-pointer px-2 py-1.5 text-[12px]",
+                active2 ? "bg-violet-100 dark:bg-violet-900/30" : "hover:bg-zinc-50 dark:hover:bg-zinc-800"
+              ].join(" "),
+              children: renderer(item, active2)
+            },
+            key
+          );
+        }) })
+      ]
+    }
+  );
+}
+function labelForChar(ch) {
+  if (ch === "/") return "Commands";
+  if (ch === "@") return "Mentions";
+  if (ch === "#") return "Tags";
+  if (ch === ":") return "Emoji";
+  return `Trigger ${ch}`;
+}
+function computePopoverStyle(anchor, placement) {
+  const offset = 4;
+  switch (placement) {
+    case "bottom-right":
+      return { top: anchor.bottom + offset, right: window.innerWidth - anchor.right };
+    case "top-left":
+      return { bottom: window.innerHeight - anchor.top + offset, left: anchor.left };
+    case "top-right":
+      return { bottom: window.innerHeight - anchor.top + offset, right: window.innerWidth - anchor.right };
+    case "bottom-left":
+    default:
+      return { top: anchor.bottom + offset, left: anchor.left };
+  }
+}
+
+// src/components/InputTag/adapters.ts
+function nativeValueSetter(el) {
+  const proto = el instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
+  const desc = Object.getOwnPropertyDescriptor(proto, "value");
+  if (!desc?.set) return null;
+  return desc.set.bind(el);
+}
+function replaceInValueElement(el, start, end, replacement) {
+  const current = el.value;
+  const next = current.slice(0, start) + replacement + current.slice(end);
+  const setter = nativeValueSetter(el);
+  if (setter) {
+    setter(next);
+  } else {
+    el.value = next;
+  }
+  el.dispatchEvent(new Event("input", { bubbles: true }));
+  const caret = start + replacement.length;
+  el.setSelectionRange(caret, caret);
+  el.focus();
+}
+function valueElementAdapter(ref) {
+  return {
+    subscribe(fn) {
+      const handler = () => {
+        const el2 = ref.current;
+        if (!el2) return;
+        fn({
+          text: el2.value,
+          caretIndex: el2.selectionStart ?? el2.value.length
+        });
+      };
+      const el = ref.current;
+      if (el) {
+        el.addEventListener("input", handler);
+        el.addEventListener("click", handler);
+        el.addEventListener("keyup", handler);
+        el.addEventListener("focus", handler);
+      }
+      return () => {
+        const el2 = ref.current;
+        if (el2) {
+          el2.removeEventListener("input", handler);
+          el2.removeEventListener("click", handler);
+          el2.removeEventListener("keyup", handler);
+          el2.removeEventListener("focus", handler);
+        }
+      };
+    },
+    replaceRange(start, end, replacement) {
+      const el = ref.current;
+      if (!el) return;
+      replaceInValueElement(el, start, end, replacement);
+    },
+    getAnchorRect() {
+      const el = ref.current;
+      return el ? el.getBoundingClientRect() : null;
+    },
+    onKey(handler) {
+      const fn = (e) => {
+        if (handler(e)) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      };
+      const el = ref.current;
+      if (el) el.addEventListener("keydown", fn);
+      return () => {
+        const el2 = ref.current;
+        if (el2) el2.removeEventListener("keydown", fn);
+      };
+    }
+  };
+}
+function textareaAdapter(ref) {
+  return valueElementAdapter(ref);
+}
+function inputAdapter(ref) {
+  return valueElementAdapter(ref);
+}
+function contentEditableAdapter(ref) {
+  function caretIndex(el) {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return 0;
+    const range = sel.getRangeAt(0).cloneRange();
+    range.selectNodeContents(el);
+    range.setEnd(sel.focusNode, sel.focusOffset);
+    return range.toString().length;
+  }
+  function setCaret(el, index) {
+    const sel = window.getSelection();
+    if (!sel) return;
+    const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+    let remaining = index;
+    let node = walker.nextNode();
+    while (node) {
+      const len = (node.textContent ?? "").length;
+      if (remaining <= len) {
+        const range2 = document.createRange();
+        range2.setStart(node, remaining);
+        range2.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(range2);
+        return;
+      }
+      remaining -= len;
+      node = walker.nextNode();
+    }
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    range.collapse(false);
+    sel.removeAllRanges();
+    sel.addRange(range);
+  }
+  return {
+    subscribe(fn) {
+      const handler = () => {
+        const el2 = ref.current;
+        if (!el2) return;
+        fn({ text: el2.textContent ?? "", caretIndex: caretIndex(el2) });
+      };
+      const el = ref.current;
+      if (el) {
+        el.addEventListener("input", handler);
+        el.addEventListener("click", handler);
+        el.addEventListener("keyup", handler);
+        el.addEventListener("focus", handler);
+      }
+      return () => {
+        const el2 = ref.current;
+        if (el2) {
+          el2.removeEventListener("input", handler);
+          el2.removeEventListener("click", handler);
+          el2.removeEventListener("keyup", handler);
+          el2.removeEventListener("focus", handler);
+        }
+      };
+    },
+    replaceRange(start, end, replacement) {
+      const el = ref.current;
+      if (!el) return;
+      const current = el.textContent ?? "";
+      const next = current.slice(0, start) + replacement + current.slice(end);
+      el.textContent = next;
+      setCaret(el, start + replacement.length);
+      el.dispatchEvent(new Event("input", { bubbles: true }));
+      el.focus();
+    },
+    getAnchorRect() {
+      const el = ref.current;
+      return el ? el.getBoundingClientRect() : null;
+    },
+    onKey(handler) {
+      const fn = (e) => {
+        if (handler(e)) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      };
+      const el = ref.current;
+      if (el) el.addEventListener("keydown", fn);
+      return () => {
+        const el2 = ref.current;
+        if (el2) el2.removeEventListener("keydown", fn);
+      };
+    }
+  };
+}
+function controlledAdapter(opts) {
+  let listener = null;
+  let keyHandler = null;
+  const installKey = () => {
+    const el = opts.anchorRef.current;
+    if (!el || !keyHandler) return () => {
+    };
+    const fn = (e) => {
+      if (keyHandler && keyHandler(e)) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+    el.addEventListener("keydown", fn);
+    return () => el.removeEventListener("keydown", fn);
+  };
+  return {
+    notify(state) {
+      listener?.(state);
+    },
+    subscribe(fn) {
+      listener = fn;
+      return () => {
+        if (listener === fn) listener = null;
+      };
+    },
+    replaceRange(start, end, replacement) {
+      opts.onReplaceRange(start, end, replacement);
+    },
+    getAnchorRect() {
+      const el = opts.anchorRef.current;
+      return el ? el.getBoundingClientRect() : null;
+    },
+    onKey(handler) {
+      keyHandler = handler;
+      const uninstall = installKey();
+      return () => {
+        if (keyHandler === handler) keyHandler = null;
+        uninstall();
+      };
+    }
+  };
+}
+
+export { InputTag, contentEditableAdapter, controlledAdapter, inputAdapter, textareaAdapter };
+//# sourceMappingURL=chunk-G2W7B3OG.js.map
+//# sourceMappingURL=chunk-G2W7B3OG.js.map