@particle-academy/react-fancy 6.9.0 → 6.11.0

package/dist/{chunk-ZBXJDQXN.js → chunk-JJYMRV62.js}

@@ -1,9 +1,9 @@
-import { useFocusTrap } from './chunk-5U2DZ7AV.js';
+import { useDialogFocusTrap } from './chunk-HHCVBIMM.js';
 import { useAnimation } from './chunk-3K2CEAI7.js';
 import { Portal } from './chunk-RBCMKPBX.js';
 import { useEscapeKey } from './chunk-YX6FTJ6N.js';
 import { cn } from './chunk-MMW2JGKZ.js';
-import { createContext, useRef, useCallback, useEffect, useMemo, useContext } from 'react';
+import { createContext, useCallback, useEffect, useMemo, useContext } from 'react';
 import { X } from 'lucide-react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -15,7 +15,7 @@ function useDrawer() {
   }
   return ctx;
 }
-function DrawerHeader({ children, closable = true, className }) {
+function DrawerHeader({ children, closable = true, className, closeLabel = "Close" }) {
   const { close } = useDrawer();
   return /* @__PURE__ */ jsxs(
     "div",
@@ -32,8 +32,9 @@ function DrawerHeader({ children, closable = true, className }) {
           {
             type: "button",
             onClick: close,
-            className: "rounded-lg p-1 text-zinc-400 transition-colors hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] hover:text-zinc-600 dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))] dark:hover:text-zinc-300",
-            "aria-label": "Close",
+            "data-react-fancy-drawer-close": "",
+            className: "relative rounded-lg p-1 text-zinc-400 before:absolute before:-inset-[9px] before:content-[''] transition-colors hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] hover:text-zinc-600 dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))] dark:hover:text-zinc-300",
+            "aria-label": closeLabel,
             children: /* @__PURE__ */ jsx(X, { size: 18 })
           }
         ) : null
@@ -138,12 +139,10 @@ function DrawerRoot({
   className,
   ...rest
 }) {
-  const panelRef = useRef(null);
   const horizontal = side !== "top" && side !== "bottom";
   const isViewport = attach === "viewport";
   const close = useCallback(() => onClose(), [onClose]);
   useEscapeKey(close, open && dismissOnEscape);
-  useFocusTrap(panelRef, open && isViewport);
   useEffect(() => {
     if (!open || !isViewport) return;
     const original = document.body.style.overflow;
@@ -157,6 +156,14 @@ function DrawerRoot({
     enterClass: ENTER[side],
     exitClass: EXIT[side]
   });
+  const attachTrap = useDialogFocusTrap(open, isViewport);
+  const attachPanel = useCallback(
+    (node) => {
+      animRef.current = node;
+      attachTrap(node);
+    },
+    [animRef, attachTrap]
+  );
   const ctx = useMemo(() => ({ open, close, side }), [open, close, side]);
   if (!mounted) return null;
   const frame = /* @__PURE__ */ jsxs(
@@ -181,10 +188,7 @@ function DrawerRoot({
         /* @__PURE__ */ jsx(
           "div",
           {
-            ref: (node) => {
-              panelRef.current = node;
-              animRef.current = node;
-            },
+            ref: attachPanel,
             "data-react-fancy-drawer": "",
             "data-side": side,
             role: "dialog",
@@ -219,5 +223,5 @@ var Drawer = Object.assign(DrawerRoot, {
 });
 
 export { Drawer, useDrawer };
-//# sourceMappingURL=chunk-ZBXJDQXN.js.map
-//# sourceMappingURL=chunk-ZBXJDQXN.js.map
+//# sourceMappingURL=chunk-JJYMRV62.js.map
+//# sourceMappingURL=chunk-JJYMRV62.js.map

package/dist/chunk-JJYMRV62.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Drawer/Drawer.context.ts","../src/components/Drawer/DrawerHeader.tsx","../src/components/Drawer/DrawerBody.tsx","../src/components/Drawer/DrawerFooter.tsx","../src/components/Drawer/DrawerContainer.tsx","../src/components/Drawer/Drawer.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"chunk-JJYMRV62.js","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { DrawerContextValue } from \"./Drawer.types\";\n\nexport const DrawerContext = createContext<DrawerContextValue | null>(null);\n\nexport function useDrawer(): DrawerContextValue {\n  const ctx = useContext(DrawerContext);\n  if (!ctx) {\n    throw new Error(\"Drawer compound components must be used within <Drawer>\");\n  }\n  return ctx;\n}\n","import { X } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { useDrawer } from \"./Drawer.context\";\nimport type { DrawerHeaderProps } from \"./Drawer.types\";\n\n/**\n * The close button draws at 26px (18px icon + `p-1`) and HITS at 44px (WCAG\n * 2.5.5, AAA): a `::before` overhangs it by 9px, inside the header's `py-3`. The\n * look is unchanged; see ModalHeader for why this over a size option.\n */\nexport function DrawerHeader({ children, closable = true, className, closeLabel = \"Close\" }: DrawerHeaderProps) {\n  const { close } = useDrawer();\n\n  return (\n    <div\n      data-react-fancy-drawer-header=\"\"\n      className={cn(\n        \"flex shrink-0 items-center justify-between border-b border-[color:var(--fancy-border,var(--color-zinc-200))] px-4 py-3 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]\",\n        className,\n      )}\n    >\n      <div className=\"text-sm font-semibold text-[color:var(--fancy-text,var(--color-zinc-900))] dark:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]\">{children}</div>\n      {closable ? (\n        <button\n          type=\"button\"\n          onClick={close}\n          data-react-fancy-drawer-close=\"\"\n          className=\"relative rounded-lg p-1 text-zinc-400 before:absolute before:-inset-[9px] before:content-[''] transition-colors hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] hover:text-zinc-600 dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))] dark:hover:text-zinc-300\"\n          aria-label={closeLabel}\n        >\n          <X size={18} />\n        </button>\n      ) : null}\n    </div>\n  );\n}\n\nDrawerHeader.displayName = \"DrawerHeader\";\n","import { cn } from \"../../utils/cn\";\nimport type { DrawerBodyProps } from \"./Drawer.types\";\n\nexport function DrawerBody({ children, className }: DrawerBodyProps) {\n  return (\n    <div\n      data-react-fancy-drawer-body=\"\"\n      className={cn(\"min-h-0 flex-1 overflow-auto px-4 py-3 text-[color:var(--fancy-text-soft,var(--color-zinc-700))] dark:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))]\", className)}\n    >\n      {children}\n    </div>\n  );\n}\n\nDrawerBody.displayName = \"DrawerBody\";\n","import { cn } from \"../../utils/cn\";\nimport type { DrawerFooterProps } from \"./Drawer.types\";\n\nexport function DrawerFooter({ children, className }: DrawerFooterProps) {\n  return (\n    <div\n      data-react-fancy-drawer-footer=\"\"\n      className={cn(\n        \"flex shrink-0 items-center justify-end gap-2 border-t border-[color:var(--fancy-border,var(--color-zinc-200))] px-4 py-3 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n\nDrawerFooter.displayName = \"DrawerFooter\";\n","import { cn } from \"../../utils/cn\";\nimport type { DrawerContainerProps } from \"./Drawer.types\";\n\n/**\n * The anchor for `<Drawer attach=\"container\">`.\n *\n * A container-attached drawer positions itself `absolute`, which resolves\n * against the nearest *positioned* ancestor — so without `relative` somewhere\n * above it, the drawer silently escapes to the viewport and looks like it\n * ignored `attach` entirely. This wrapper supplies `relative` + `overflow-hidden`\n * so the panel slides within the box rather than out of it.\n *\n *   <Drawer.Container className=\"h-80 rounded-xl border\">\n *     <YourContent />\n *     <Drawer attach=\"container\" side=\"bottom\" open={open} onClose={close}>\n *       <Drawer.Body>Filters</Drawer.Body>\n *     </Drawer>\n *   </Drawer.Container>\n *\n * Any element works as long as it is positioned — this is the shortcut, not a\n * requirement. Wrapping a Card, a layout pane, or a prompt-input shell in\n * `relative overflow-hidden` does the same job.\n */\nexport function DrawerContainer({ children, className, ...rest }: DrawerContainerProps) {\n  return (\n    <div\n      data-react-fancy-drawer-container=\"\"\n      {...rest}\n      className={cn(\"relative overflow-hidden\", className)}\n    >\n      {children}\n    </div>\n  );\n}\n\nDrawerContainer.displayName = \"DrawerContainer\";\n","import { useCallback, useEffect, useMemo } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Portal } from \"../Portal\";\nimport { DrawerContext } from \"./Drawer.context\";\nimport { DrawerHeader } from \"./DrawerHeader\";\nimport { DrawerBody } from \"./DrawerBody\";\nimport { DrawerFooter } from \"./DrawerFooter\";\nimport { DrawerContainer } from \"./DrawerContainer\";\nimport { useDialogFocusTrap } from \"../../hooks/use-dialog-focus-trap\";\nimport { useEscapeKey } from \"../../hooks/use-escape-key\";\nimport { useAnimation } from \"../../hooks/use-animation\";\nimport type { DrawerProps, DrawerSide } from \"./Drawer.types\";\n\n/**\n * `size` addresses the drawer's own axis: width on the horizontal edges,\n * height on the vertical ones. Keeping one scale across both means `size=\"lg\"`\n * does not have to be re-learned when a drawer moves from the side to the\n * bottom.\n */\nconst WIDTH = {\n  sm: \"w-64\",\n  md: \"w-80\",\n  lg: \"w-96\",\n  xl: \"w-[32rem]\",\n  full: \"w-full\",\n} as const;\n\nconst HEIGHT = {\n  sm: \"h-32\",\n  md: \"h-64\",\n  lg: \"h-96\",\n  xl: \"h-[32rem]\",\n  full: \"h-full\",\n} as const;\n\nconst ANCHOR: Record<DrawerSide, string> = {\n  start: \"inset-y-0 start-0\",\n  end: \"inset-y-0 end-0\",\n  left: \"inset-y-0 left-0\",\n  right: \"inset-y-0 right-0\",\n  top: \"inset-x-0 top-0\",\n  bottom: \"inset-x-0 bottom-0\",\n};\n\nconst ENTER: Record<DrawerSide, string> = {\n  start: \"fancy-slide-in-start\",\n  end: \"fancy-slide-in-end\",\n  left: \"fancy-slide-in-left\",\n  right: \"fancy-slide-in-right\",\n  top: \"fancy-slide-in-top\",\n  bottom: \"fancy-slide-in-bottom\",\n};\n\nconst EXIT: Record<DrawerSide, string> = {\n  start: \"fancy-slide-out-start\",\n  end: \"fancy-slide-out-end\",\n  left: \"fancy-slide-out-left\",\n  right: \"fancy-slide-out-right\",\n  top: \"fancy-slide-out-top\",\n  bottom: \"fancy-slide-out-bottom\",\n};\n\n/** The panel's edge shadow reads as depth away from the anchored edge. */\nconst EDGE: Record<DrawerSide, string> = {\n  start: \"border-e\",\n  end: \"border-s\",\n  left: \"border-r\",\n  right: \"border-l\",\n  top: \"border-b\",\n  bottom: \"border-t\",\n};\n\nfunction DrawerRoot({\n  children,\n  open,\n  onClose,\n  side = \"end\",\n  size = \"md\",\n  attach = \"viewport\",\n  backdrop = true,\n  dismissOnBackdrop = true,\n  dismissOnEscape = true,\n  className,\n  ...rest\n}: DrawerProps) {\n  const horizontal = side !== \"top\" && side !== \"bottom\";\n  const isViewport = attach === \"viewport\";\n\n  const close = useCallback(() => onClose(), [onClose]);\n  useEscapeKey(close, open && dismissOnEscape);\n\n  useEffect(() => {\n    if (!open || !isViewport) return;\n    const original = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      document.body.style.overflow = original;\n    };\n  }, [open, isViewport]);\n\n  const { mounted, className: animClass, ref: animRef } = useAnimation({\n    open,\n    enterClass: ENTER[side],\n    exitClass: EXIT[side],\n  });\n\n  // A container-attached drawer is a panel, not a dialog — trapping focus in it\n  // would strand keyboard users inside a Card. Only the viewport form is modal.\n  // The panel mounts renders after `open` flips; see useDialogFocusTrap.\n  const attachTrap = useDialogFocusTrap(open, isViewport);\n  const attachPanel = useCallback(\n    (node: HTMLDivElement | null) => {\n      (animRef as React.MutableRefObject<HTMLElement | null>).current = node;\n      attachTrap(node);\n    },\n    [animRef, attachTrap],\n  );\n\n  const ctx = useMemo(() => ({ open, close, side }), [open, close, side]);\n\n  if (!mounted) return null;\n\n  const frame = (\n    <div\n      data-react-fancy-drawer-frame=\"\"\n      className={cn(isViewport ? \"fixed inset-0 z-50\" : \"absolute inset-0 z-20\", !backdrop && \"pointer-events-none\")}\n    >\n      {backdrop ? (\n        <div\n          data-react-fancy-drawer-backdrop=\"\"\n          className={cn(\n            \"absolute inset-0 bg-black/40 transition-opacity\",\n            isViewport && \"backdrop-blur-sm\",\n            open ? \"opacity-100\" : \"opacity-0\",\n          )}\n          onClick={dismissOnBackdrop ? close : undefined}\n          aria-hidden=\"true\"\n        />\n      ) : null}\n\n      <div\n        ref={attachPanel}\n        data-react-fancy-drawer=\"\"\n        data-side={side}\n        role=\"dialog\"\n        aria-modal={isViewport || undefined}\n        {...rest}\n        className={cn(\n          \"pointer-events-auto absolute flex flex-col border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] shadow-xl dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\",\n          ANCHOR[side],\n          EDGE[side],\n          horizontal ? WIDTH[size] : HEIGHT[size],\n          // Cross-axis fills the anchor; the main axis is capped so a viewport\n          // drawer can never grow past the screen on a small device.\n          horizontal ? \"h-full\" : \"w-full\",\n          isViewport && (horizontal ? \"max-w-[90vw]\" : \"max-h-[90vh]\"),\n          !isViewport && (horizontal ? \"max-w-full\" : \"max-h-full\"),\n          animClass,\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  );\n\n  return (\n    <DrawerContext.Provider value={ctx}>\n      {isViewport ? <Portal>{frame}</Portal> : frame}\n    </DrawerContext.Provider>\n  );\n}\n\nexport const Drawer = Object.assign(DrawerRoot, {\n  Header: DrawerHeader,\n  Body: DrawerBody,\n  Footer: DrawerFooter,\n  Container: DrawerContainer,\n});\n"]}

package/dist/{chunk-6BCXGP2T.js → chunk-JN5DHZ6I.js}

@@ -1,4 +1,4 @@
-import { Popover } from './chunk-6RXEWM3V.js';
+import { Popover } from './chunk-FNHKZMMI.js';
 import { Button } from './chunk-Q4CNEHVN.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -113,5 +113,5 @@ function ReasonTag({
 }
 
 export { ReasonTag };
-//# sourceMappingURL=chunk-6BCXGP2T.js.map
-//# sourceMappingURL=chunk-6BCXGP2T.js.map
+//# sourceMappingURL=chunk-JN5DHZ6I.js.map
+//# sourceMappingURL=chunk-JN5DHZ6I.js.map

package/dist/{chunk-6BCXGP2T.js.map → chunk-JN5DHZ6I.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ReasonTag/ReasonTag.tsx"],"names":[],"mappings":"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","file":"chunk-6BCXGP2T.js","sourcesContent":["import { Popover } from \"../Popover\";\nimport { Button } from \"../Button\";\n\n/**\n * ReasonTag — wraps any value with a small affordance that reveals the\n * agent's reasoning, sources, and confidence on hover or click.\n *\n *   <ReasonTag\n *     value=\"$1.4M\"\n *     reason=\"Projected Q3 ARR after stacking renewals.\"\n *     confidence={0.91}\n *     sources={[{ label: \"Q2 actuals · CRM export\" }]}\n *     by=\"Forecaster\"\n *   />\n *\n * Three visual styles:\n *   • \"dot\"       — value with a tiny coloured dot (default, subtle)\n *   • \"underline\" — dotted underline + trailing \"?\"\n *   • \"chip\"      — full coloured pill (loud)\n *\n * Confidence drives the colour via three tiers (high / medium / low),\n * so a quick visual scan tells the human which suggestions deserve a\n * second look without opening any tooltips.\n *\n * `pinned` swaps the popover for an inline annotation slot — useful\n * when explainability should always be visible, not buried in a hover.\n */\nexport type ReasonTagSource = { label: string; href?: string };\n\nexport type ReasonTagTheme = \"dot\" | \"underline\" | \"chip\";\n\nexport interface ReasonTagProps {\n  /** The value the tag wraps — usually a number, label, or short phrase. */\n  value: React.ReactNode;\n  /** Free-text rationale shown in the popover / inline annotation. */\n  reason: string;\n  /** 0..1 confidence. Drives the tier colour. Defaults to 1. */\n  confidence?: number;\n  /** Optional list of sources (label + optional href). */\n  sources?: ReasonTagSource[];\n  /** Optional author / agent name shown in the popover header. */\n  by?: string;\n  /** Visual treatment for the trigger. */\n  theme?: ReasonTagTheme;\n  /**\n   * When true, the popover is replaced with an always-visible inline\n   * annotation below the value.\n   */\n  pinned?: boolean;\n  /** Called when the user hits the \"ask follow-up\" action. */\n  onFollowUp?: () => void;\n  /** Optional className applied to the trigger element. */\n  className?: string;\n}\n\nconst CONFIDENCE_TIERS: Array<{ min: number; color: string; label: string }> = [\n  { min: 0.85, color: \"#10b981\", label: \"high\" },\n  { min: 0.6, color: \"#f59e0b\", label: \"medium\" },\n  { min: 0, color: \"#ef4444\", label: \"low\" },\n];\n\nfunction tier(c: number) {\n  return CONFIDENCE_TIERS.find((t) => c >= t.min) ?? CONFIDENCE_TIERS[2];\n}\n\nexport function ReasonTag({\n  value,\n  reason,\n  confidence = 1,\n  sources = [],\n  by,\n  theme = \"dot\",\n  pinned = false,\n  onFollowUp,\n  className,\n}: ReasonTagProps) {\n  const t = tier(confidence);\n\n  const trigger =\n    theme === \"chip\" ? (\n      <span\n        className={`inline-flex cursor-help items-center gap-1 rounded-full px-2 py-0.5 text-[12px] font-medium ${className ?? \"\"}`}\n        style={{ backgroundColor: t.color + \"22\", color: t.color }}\n      >\n        <span\n          className=\"h-1.5 w-1.5 rounded-full\"\n          style={{ backgroundColor: t.color }}\n        />\n        {value}\n        <span className=\"text-[10px] opacity-70\">?</span>\n      </span>\n    ) : theme === \"underline\" ? (\n      <span\n        className={`cursor-help underline decoration-dotted underline-offset-2 ${className ?? \"\"}`}\n        style={{ textDecorationColor: t.color }}\n      >\n        {value}\n        <span\n          className=\"ms-0.5 font-mono text-[10px]\"\n          style={{ color: t.color }}\n        >\n          ?\n        </span>\n      </span>\n    ) : (\n      <span className={`inline-flex cursor-help items-baseline gap-1 ${className ?? \"\"}`}>\n        <span className=\"font-medium\">{value}</span>\n        <span\n          className=\"inline-block h-1.5 w-1.5 rounded-full align-middle\"\n          style={{ backgroundColor: t.color }}\n          title=\"reason available\"\n        />\n      </span>\n    );\n\n  if (pinned) {\n    return (\n      <span className=\"inline-flex flex-col items-start gap-0.5 align-top\">\n        {trigger}\n        <span\n          className=\"block max-w-[280px] rounded border-s-2 ps-2 text-[11px] leading-snug text-zinc-600 dark:text-zinc-300\"\n          style={{ borderColor: t.color }}\n        >\n          {reason}\n        </span>\n      </span>\n    );\n  }\n\n  return (\n    <Popover hover>\n      <Popover.Trigger>{trigger}</Popover.Trigger>\n      <Popover.Content>\n        <div className=\"w-72 space-y-2 text-sm\">\n          <div className=\"flex items-baseline gap-2\">\n            <span\n              className=\"text-[10px] font-semibold uppercase tracking-wider\"\n              style={{ color: t.color }}\n            >\n              {t.label} confidence · {(confidence * 100).toFixed(0)}%\n            </span>\n            {by && (\n              <span className=\"ms-auto font-mono text-[10px] text-zinc-400\">\n                @{by}\n              </span>\n            )}\n          </div>\n          <p className=\"text-[13px] leading-snug text-zinc-700 dark:text-zinc-200\">\n            {reason}\n          </p>\n          {sources.length > 0 && (\n            <div>\n              <div className=\"text-[10px] uppercase tracking-wider text-zinc-400\">\n                sources\n              </div>\n              <ul className=\"mt-0.5 space-y-0.5 text-[12px]\">\n                {sources.map((s, i) => (\n                  <li key={i}>\n                    {s.href ? (\n                      <a className=\"text-violet-600 hover:underline\" href={s.href}>\n                        {s.label}\n                      </a>\n                    ) : (\n                      <span className=\"text-zinc-600 dark:text-zinc-300\">\n                        {s.label}\n                      </span>\n                    )}\n                  </li>\n                ))}\n              </ul>\n            </div>\n          )}\n          {onFollowUp && (\n            <div className=\"flex justify-end pt-1\">\n              <Button size=\"sm\" variant=\"ghost\" onClick={onFollowUp}>\n                ask follow-up\n              </Button>\n            </div>\n          )}\n        </div>\n      </Popover.Content>\n    </Popover>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/ReasonTag/ReasonTag.tsx"],"names":[],"mappings":"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","file":"chunk-JN5DHZ6I.js","sourcesContent":["import { Popover } from \"../Popover\";\nimport { Button } from \"../Button\";\n\n/**\n * ReasonTag — wraps any value with a small affordance that reveals the\n * agent's reasoning, sources, and confidence on hover or click.\n *\n *   <ReasonTag\n *     value=\"$1.4M\"\n *     reason=\"Projected Q3 ARR after stacking renewals.\"\n *     confidence={0.91}\n *     sources={[{ label: \"Q2 actuals · CRM export\" }]}\n *     by=\"Forecaster\"\n *   />\n *\n * Three visual styles:\n *   • \"dot\"       — value with a tiny coloured dot (default, subtle)\n *   • \"underline\" — dotted underline + trailing \"?\"\n *   • \"chip\"      — full coloured pill (loud)\n *\n * Confidence drives the colour via three tiers (high / medium / low),\n * so a quick visual scan tells the human which suggestions deserve a\n * second look without opening any tooltips.\n *\n * `pinned` swaps the popover for an inline annotation slot — useful\n * when explainability should always be visible, not buried in a hover.\n */\nexport type ReasonTagSource = { label: string; href?: string };\n\nexport type ReasonTagTheme = \"dot\" | \"underline\" | \"chip\";\n\nexport interface ReasonTagProps {\n  /** The value the tag wraps — usually a number, label, or short phrase. */\n  value: React.ReactNode;\n  /** Free-text rationale shown in the popover / inline annotation. */\n  reason: string;\n  /** 0..1 confidence. Drives the tier colour. Defaults to 1. */\n  confidence?: number;\n  /** Optional list of sources (label + optional href). */\n  sources?: ReasonTagSource[];\n  /** Optional author / agent name shown in the popover header. */\n  by?: string;\n  /** Visual treatment for the trigger. */\n  theme?: ReasonTagTheme;\n  /**\n   * When true, the popover is replaced with an always-visible inline\n   * annotation below the value.\n   */\n  pinned?: boolean;\n  /** Called when the user hits the \"ask follow-up\" action. */\n  onFollowUp?: () => void;\n  /** Optional className applied to the trigger element. */\n  className?: string;\n}\n\nconst CONFIDENCE_TIERS: Array<{ min: number; color: string; label: string }> = [\n  { min: 0.85, color: \"#10b981\", label: \"high\" },\n  { min: 0.6, color: \"#f59e0b\", label: \"medium\" },\n  { min: 0, color: \"#ef4444\", label: \"low\" },\n];\n\nfunction tier(c: number) {\n  return CONFIDENCE_TIERS.find((t) => c >= t.min) ?? CONFIDENCE_TIERS[2];\n}\n\nexport function ReasonTag({\n  value,\n  reason,\n  confidence = 1,\n  sources = [],\n  by,\n  theme = \"dot\",\n  pinned = false,\n  onFollowUp,\n  className,\n}: ReasonTagProps) {\n  const t = tier(confidence);\n\n  const trigger =\n    theme === \"chip\" ? (\n      <span\n        className={`inline-flex cursor-help items-center gap-1 rounded-full px-2 py-0.5 text-[12px] font-medium ${className ?? \"\"}`}\n        style={{ backgroundColor: t.color + \"22\", color: t.color }}\n      >\n        <span\n          className=\"h-1.5 w-1.5 rounded-full\"\n          style={{ backgroundColor: t.color }}\n        />\n        {value}\n        <span className=\"text-[10px] opacity-70\">?</span>\n      </span>\n    ) : theme === \"underline\" ? (\n      <span\n        className={`cursor-help underline decoration-dotted underline-offset-2 ${className ?? \"\"}`}\n        style={{ textDecorationColor: t.color }}\n      >\n        {value}\n        <span\n          className=\"ms-0.5 font-mono text-[10px]\"\n          style={{ color: t.color }}\n        >\n          ?\n        </span>\n      </span>\n    ) : (\n      <span className={`inline-flex cursor-help items-baseline gap-1 ${className ?? \"\"}`}>\n        <span className=\"font-medium\">{value}</span>\n        <span\n          className=\"inline-block h-1.5 w-1.5 rounded-full align-middle\"\n          style={{ backgroundColor: t.color }}\n          title=\"reason available\"\n        />\n      </span>\n    );\n\n  if (pinned) {\n    return (\n      <span className=\"inline-flex flex-col items-start gap-0.5 align-top\">\n        {trigger}\n        <span\n          className=\"block max-w-[280px] rounded border-s-2 ps-2 text-[11px] leading-snug text-zinc-600 dark:text-zinc-300\"\n          style={{ borderColor: t.color }}\n        >\n          {reason}\n        </span>\n      </span>\n    );\n  }\n\n  return (\n    <Popover hover>\n      <Popover.Trigger>{trigger}</Popover.Trigger>\n      <Popover.Content>\n        <div className=\"w-72 space-y-2 text-sm\">\n          <div className=\"flex items-baseline gap-2\">\n            <span\n              className=\"text-[10px] font-semibold uppercase tracking-wider\"\n              style={{ color: t.color }}\n            >\n              {t.label} confidence · {(confidence * 100).toFixed(0)}%\n            </span>\n            {by && (\n              <span className=\"ms-auto font-mono text-[10px] text-zinc-400\">\n                @{by}\n              </span>\n            )}\n          </div>\n          <p className=\"text-[13px] leading-snug text-zinc-700 dark:text-zinc-200\">\n            {reason}\n          </p>\n          {sources.length > 0 && (\n            <div>\n              <div className=\"text-[10px] uppercase tracking-wider text-zinc-400\">\n                sources\n              </div>\n              <ul className=\"mt-0.5 space-y-0.5 text-[12px]\">\n                {sources.map((s, i) => (\n                  <li key={i}>\n                    {s.href ? (\n                      <a className=\"text-violet-600 hover:underline\" href={s.href}>\n                        {s.label}\n                      </a>\n                    ) : (\n                      <span className=\"text-zinc-600 dark:text-zinc-300\">\n                        {s.label}\n                      </span>\n                    )}\n                  </li>\n                ))}\n              </ul>\n            </div>\n          )}\n          {onFollowUp && (\n            <div className=\"flex justify-end pt-1\">\n              <Button size=\"sm\" variant=\"ghost\" onClick={onFollowUp}>\n                ask follow-up\n              </Button>\n            </div>\n          )}\n        </div>\n      </Popover.Content>\n    </Popover>\n  );\n}\n"]}

package/dist/{chunk-R6O6SLXK.js → chunk-LG2O26CG.js}

@@ -1,4 +1,4 @@
-import { useFocusTrap } from './chunk-5U2DZ7AV.js';
+import { useDialogFocusTrap } from './chunk-HHCVBIMM.js';
 import { useAnimation } from './chunk-3K2CEAI7.js';
 import { isImeComposing } from './chunk-S42OGG43.js';
 import { Portal } from './chunk-RBCMKPBX.js';
@@ -147,7 +147,6 @@ function CommandRoot({
     setActiveIndex(-1);
   }, [onClose]);
   useEscapeKey(close, open);
-  useFocusTrap(panelRef, open);
   useEffect(() => {
     if (open) {
       const original = document.body.style.overflow;
@@ -209,6 +208,15 @@ function CommandRoot({
     enterClass: "fancy-slide-up",
     exitClass: "fancy-fade-out"
   });
+  const attachTrap = useDialogFocusTrap(open);
+  const attachPanel = useCallback(
+    (node) => {
+      panelRef.current = node;
+      animRef.current = node;
+      attachTrap(node);
+    },
+    [animRef, attachTrap]
+  );
   const ctx = useMemo(
     () => ({
       open,
@@ -235,10 +243,7 @@ function CommandRoot({
     /* @__PURE__ */ jsx(
       "div",
       {
-        ref: (node) => {
-          panelRef.current = node;
-          animRef.current = node;
-        },
+        ref: attachPanel,
         "data-react-fancy-command": "",
         className: cn(
           "relative w-full max-w-lg overflow-hidden rounded-2xl border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] shadow-2xl dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]",
@@ -259,5 +264,5 @@ var Command = Object.assign(CommandRoot, {
 });
 
 export { Command, useCommand };
-//# sourceMappingURL=chunk-R6O6SLXK.js.map
-//# sourceMappingURL=chunk-R6O6SLXK.js.map
+//# sourceMappingURL=chunk-LG2O26CG.js.map
+//# sourceMappingURL=chunk-LG2O26CG.js.map

package/dist/chunk-LG2O26CG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Command/Command.context.ts","../src/components/Command/CommandInput.tsx","../src/components/Command/CommandList.tsx","../src/components/Command/CommandItem.tsx","../src/components/Command/CommandGroup.tsx","../src/components/Command/CommandEmpty.tsx","../src/components/Command/Command.tsx"],"names":["jsx","jsxs","useId"],"mappings":"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","file":"chunk-LG2O26CG.js","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { CommandContextValue } from \"./Command.types\";\n\nexport const CommandContext = createContext<CommandContextValue | null>(null);\n\nexport function useCommand(): CommandContextValue {\n  const ctx = useContext(CommandContext);\n  if (!ctx) {\n    throw new Error(\n      \"Command compound components must be used within <Command>\",\n    );\n  }\n  return ctx;\n}\n","import { Search } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { useCommand } from \"./Command.context\";\nimport type { CommandInputProps } from \"./Command.types\";\n\nexport function CommandInput({\n  placeholder = \"Type a command or search...\",\n  className,\n}: CommandInputProps) {\n  const { query, setQuery, listId } = useCommand();\n\n  return (\n    <div data-react-fancy-command-input=\"\" className=\"flex items-center border-b border-[color:var(--fancy-border,var(--color-zinc-200))] px-4 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]\">\n      <Search size={16} className=\"shrink-0 text-zinc-400\" />\n      <input\n        type=\"text\"\n        // A combobox: focus stays here while the arrows move the active option,\n        // which Command announces through aria-activedescendant.\n        role=\"combobox\"\n        aria-expanded=\"true\"\n        aria-controls={listId}\n        aria-autocomplete=\"list\"\n        value={query}\n        onChange={(e) => setQuery(e.target.value)}\n        placeholder={placeholder}\n        className={cn(\n          \"flex-1 bg-transparent px-3 py-3 text-sm outline-none placeholder:text-zinc-400\",\n          className,\n        )}\n        autoFocus\n      />\n    </div>\n  );\n}\n\nCommandInput.displayName = \"CommandInput\";\n","import { cn } from \"../../utils/cn\";\nimport { useCommand } from \"./Command.context\";\nimport type { CommandListProps } from \"./Command.types\";\n\nexport function CommandList({ children, className }: CommandListProps) {\n  const { listId } = useCommand();\n\n  return (\n    <div\n      id={listId}\n      data-react-fancy-command-list=\"\"\n      role=\"listbox\"\n      className={cn(\"max-h-72 overflow-y-auto p-2\", className)}\n    >\n      {children}\n    </div>\n  );\n}\n\nCommandList.displayName = \"CommandList\";\n","import { useId } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useCommand } from \"./Command.context\";\nimport type { CommandItemProps } from \"./Command.types\";\n\nexport function CommandItem({\n  children,\n  value,\n  onSelect,\n  className,\n}: CommandItemProps) {\n  const { query, close, shouldFilter, setActiveIndex } = useCommand();\n  // Called before the filter's early return, so the hook order never changes.\n  const id = useId();\n\n  // Filter by query — unless the caller filters for itself (`shouldFilter={false}`).\n  const text = value ?? (typeof children === \"string\" ? children : \"\");\n  if (shouldFilter && query && !text.toLowerCase().includes(query.toLowerCase())) {\n    return null;\n  }\n\n  return (\n    <button\n      id={id}\n      data-react-fancy-command-item=\"\"\n      type=\"button\"\n      role=\"option\"\n      // Marked active by Command itself (aria-selected + data-active), since an\n      // item cannot know its own position among the rendered options.\n      aria-selected={false}\n      // Keyboard focus stays in the input; the items are reached with the arrows.\n      tabIndex={-1}\n      onMouseEnter={(e) => {\n        const options = e.currentTarget\n          .closest(\"[data-react-fancy-command]\")\n          ?.querySelectorAll('[role=\"option\"]');\n        if (options) setActiveIndex(Array.from(options).indexOf(e.currentTarget));\n      }}\n      className={cn(\n        \"flex w-full items-center rounded-lg px-3 py-2 text-start text-sm transition-colors\",\n        \"text-[color:var(--fancy-text-soft,var(--color-zinc-700))] hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] data-[active]:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))] dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))] dark:data-[active]:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\n        className,\n      )}\n      onClick={() => {\n        onSelect?.();\n        close();\n      }}\n    >\n      {children}\n    </button>\n  );\n}\n\nCommandItem.displayName = \"CommandItem\";\n","import { cn } from \"../../utils/cn\";\nimport type { CommandGroupProps } from \"./Command.types\";\n\nexport function CommandGroup({\n  children,\n  heading,\n  className,\n}: CommandGroupProps) {\n  return (\n    <div data-react-fancy-command-group=\"\" role=\"group\" className={cn(\"py-1\", className)}>\n      {heading && (\n        <div className=\"px-3 py-1.5 text-xs font-medium text-zinc-400\">\n          {heading}\n        </div>\n      )}\n      {children}\n    </div>\n  );\n}\n\nCommandGroup.displayName = \"CommandGroup\";\n","import { cn } from \"../../utils/cn\";\nimport type { CommandEmptyProps } from \"./Command.types\";\n\nexport function CommandEmpty({\n  children = \"No results found.\",\n  className,\n}: CommandEmptyProps) {\n  return (\n    <div\n      data-react-fancy-command-empty=\"\"\n      className={cn(\n        \"py-6 text-center text-sm text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n\nCommandEmpty.displayName = \"CommandEmpty\";\n","import {\n  useCallback,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { isImeComposing } from \"../../utils/ime\";\nimport { Portal } from \"../Portal\";\nimport { CommandContext } from \"./Command.context\";\nimport { CommandInput } from \"./CommandInput\";\nimport { CommandList } from \"./CommandList\";\nimport { CommandItem } from \"./CommandItem\";\nimport { CommandGroup } from \"./CommandGroup\";\nimport { CommandEmpty } from \"./CommandEmpty\";\nimport { useDialogFocusTrap } from \"../../hooks/use-dialog-focus-trap\";\nimport { useEscapeKey } from \"../../hooks/use-escape-key\";\nimport { useAnimation } from \"../../hooks/use-animation\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport type { CommandProps } from \"./Command.types\";\n\nfunction CommandRoot({\n  children,\n  open,\n  onClose,\n  className,\n  shouldFilter = true,\n  query: controlledQuery,\n  onQueryChange,\n}: CommandProps) {\n  const [query, setQuery] = useControllableState(controlledQuery, \"\", onQueryChange);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const listId = useId();\n\n  const close = useCallback(() => {\n    onClose();\n    setQuery(\"\");\n    setActiveIndex(-1);\n  }, [onClose]);\n\n  useEscapeKey(close, open);\n\n  // Cmd+K global shortcut is handled by the consumer\n  useEffect(() => {\n    if (open) {\n      const original = document.body.style.overflow;\n      document.body.style.overflow = \"hidden\";\n      return () => {\n        document.body.style.overflow = original;\n      };\n    }\n  }, [open]);\n\n  /*\n   * Keyboard navigation, as a combobox: the arrows move the ACTIVE item while\n   * focus stays in the input (announced through aria-activedescendant), and\n   * Enter picks the active item — or the first visible one when none is active.\n   *\n   * Focus used to move onto the items, and Enter was handled nowhere, so typing\n   * a query and pressing Enter did nothing: only a focused item took Enter, as a\n   * native click. Found by Genie 2's real-window test.\n   */\n  useEffect(() => {\n    if (!open) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      const items = panelRef.current?.querySelectorAll<HTMLElement>(\n        '[role=\"option\"]',\n      );\n      if (!items?.length) return;\n\n      if (e.key === \"ArrowDown\") {\n        e.preventDefault();\n        setActiveIndex(activeIndex < items.length - 1 ? activeIndex + 1 : 0);\n      } else if (e.key === \"ArrowUp\") {\n        e.preventDefault();\n        setActiveIndex(activeIndex > 0 ? activeIndex - 1 : items.length - 1);\n      } else if (e.key === \"Enter\") {\n        if (isImeComposing(e)) return;\n        // A focused item takes Enter natively, as a click; picking here as well\n        // would select it twice.\n        if ((e.target as HTMLElement | null)?.getAttribute(\"role\") === \"option\") return;\n        const pick = items[activeIndex] ?? items[0];\n        e.preventDefault();\n        pick.click();\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => document.removeEventListener(\"keydown\", handleKeyDown);\n  }, [open, activeIndex]);\n\n  /*\n   * Mark the active item and point the input at it. Done on the DOM after each\n   * render because an item cannot know its own index — that is its position\n   * among the options currently rendered, which filtering changes.\n   */\n  useLayoutEffect(() => {\n    const panel = panelRef.current;\n    if (!panel) return;\n\n    const items = Array.from(panel.querySelectorAll<HTMLElement>('[role=\"option\"]'));\n    const active = items[activeIndex];\n    items.forEach((item) => {\n      const on = item === active;\n      item.setAttribute(\"aria-selected\", on ? \"true\" : \"false\");\n      if (on) item.setAttribute(\"data-active\", \"\");\n      else item.removeAttribute(\"data-active\");\n    });\n\n    const input = panel.querySelector<HTMLInputElement>(\"[data-react-fancy-command-input] input\");\n    if (active?.id) input?.setAttribute(\"aria-activedescendant\", active.id);\n    else input?.removeAttribute(\"aria-activedescendant\");\n    active?.scrollIntoView?.({ block: \"nearest\" });\n  });\n\n  // A new query is a new list: nothing in it is active yet, so Enter picks the first match.\n  const changeQuery = useCallback(\n    (next: string) => {\n      setQuery(next);\n      setActiveIndex(-1);\n    },\n    [setQuery],\n  );\n\n  const { mounted, className: animClass, ref: animRef } = useAnimation({\n    open,\n    enterClass: \"fancy-slide-up\",\n    exitClass: \"fancy-fade-out\",\n  });\n\n  // The panel mounts renders after `open` flips; see useDialogFocusTrap.\n  const attachTrap = useDialogFocusTrap(open);\n  const attachPanel = useCallback(\n    (node: HTMLDivElement | null) => {\n      panelRef.current = node;\n      (animRef as React.MutableRefObject<HTMLElement | null>).current = node;\n      attachTrap(node);\n    },\n    [animRef, attachTrap],\n  );\n\n  const ctx = useMemo(\n    () => ({\n      open,\n      close,\n      query,\n      setQuery: changeQuery,\n      activeIndex,\n      setActiveIndex,\n      shouldFilter,\n      listId,\n    }),\n    [open, close, query, changeQuery, activeIndex, shouldFilter, listId],\n  );\n\n  if (!mounted) return null;\n\n  return (\n    <CommandContext.Provider value={ctx}>\n      <Portal>\n        <div className=\"fixed inset-0 z-50 flex items-start justify-center pt-[20vh]\">\n          <div\n            className=\"absolute inset-0 bg-black/50 backdrop-blur-sm\"\n            onClick={close}\n            aria-hidden=\"true\"\n          />\n          <div\n            ref={attachPanel}\n            data-react-fancy-command=\"\"\n            className={cn(\n              \"relative w-full max-w-lg overflow-hidden rounded-2xl border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] shadow-2xl dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\",\n              animClass,\n              className,\n            )}\n          >\n            {children}\n          </div>\n        </div>\n      </Portal>\n    </CommandContext.Provider>\n  );\n}\n\nexport const Command = Object.assign(CommandRoot, {\n  Input: CommandInput,\n  List: CommandList,\n  Item: CommandItem,\n  Group: CommandGroup,\n  Empty: CommandEmpty,\n});\n"]}