@particle-academy/react-fancy 5.12.0 → 5.14.0

package/dist/chunk-GKPCXPCD.js

@@ -0,0 +1,262 @@
+import { useControllableState } from './chunk-6FQGMVF2.js';
+import { cn } from './chunk-DSUHZO6T.js';
+import { createContext, useState, useCallback, useMemo, Children, isValidElement, useContext } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var TableContext = createContext(null);
+function useTable() {
+  const ctx = useContext(TableContext);
+  if (!ctx) {
+    throw new Error("Table compound components must be used within <Table>");
+  }
+  return ctx;
+}
+function TableHead({ children, className }) {
+  return /* @__PURE__ */ jsx("thead", { "data-react-fancy-table-head": "", className: cn("border-b border-zinc-200 dark:border-zinc-700", className), children });
+}
+function TableBody({ children, className }) {
+  return /* @__PURE__ */ jsx("tbody", { "data-react-fancy-table-body": "", className: cn("divide-y divide-zinc-100 dark:divide-zinc-800", className), children });
+}
+function TableRow({
+  children,
+  className,
+  onClick,
+  tray,
+  trayTriggerPosition = "end",
+  expanded: controlledExpanded,
+  defaultExpanded = false,
+  onExpandedChange,
+  ...rest
+}) {
+  const [expanded, setExpanded] = useControllableState(
+    controlledExpanded,
+    defaultExpanded,
+    onExpandedChange
+  );
+  const hasTray = tray != null;
+  const showTrigger = hasTray && trayTriggerPosition !== "hidden";
+  const triggerCell = showTrigger ? /* @__PURE__ */ jsx("td", { className: "w-8 px-2", children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: (e) => {
+        e.stopPropagation();
+        setExpanded(!expanded);
+      },
+      className: "inline-flex items-center justify-center rounded p-1 text-zinc-400 transition-colors hover:text-zinc-700 dark:text-zinc-500 dark:hover:text-zinc-300",
+      "aria-label": expanded ? "Collapse row" : "Expand row",
+      children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: cn(
+            "h-4 w-4 transition-transform duration-200",
+            expanded && "rotate-90"
+          ),
+          fill: "none",
+          viewBox: "0 0 24 24",
+          stroke: "currentColor",
+          strokeWidth: 2,
+          children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" })
+        }
+      )
+    }
+  ) }) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "tr",
+      {
+        ...rest,
+        "data-react-fancy-table-row": "",
+        className: cn(
+          "transition-colors hover:bg-zinc-50 dark:hover:bg-zinc-800/50",
+          onClick && "cursor-pointer",
+          className
+        ),
+        onClick,
+        children: [
+          trayTriggerPosition === "start" && triggerCell,
+          children,
+          trayTriggerPosition === "end" && triggerCell
+        ]
+      }
+    ),
+    hasTray && expanded && /* @__PURE__ */ jsx("tr", { className: "bg-zinc-50/50 dark:bg-zinc-800/30", children: /* @__PURE__ */ jsx("td", { colSpan: 999, children: tray }) })
+  ] });
+}
+function TableCell({ children, className, header, ...rest }) {
+  const Tag = header ? "th" : "td";
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      "data-react-fancy-table-cell": "",
+      className: cn(
+        "px-4 py-3 text-sm",
+        header && "text-left font-medium text-zinc-500 dark:text-zinc-400",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+function TableColumn({ label, sortKey, className }) {
+  const { sortKey: currentSort, sortDir, toggleSort } = useTable();
+  const isSorted = sortKey && currentSort === sortKey;
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      "data-react-fancy-table-column": "",
+      className: cn(
+        "px-4 py-3 text-left text-sm font-medium text-zinc-500 dark:text-zinc-400",
+        sortKey && "cursor-pointer select-none",
+        className
+      ),
+      onClick: sortKey ? () => toggleSort(sortKey) : void 0,
+      children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+        label,
+        isSorted && /* @__PURE__ */ jsx("span", { className: "text-xs", children: sortDir === "asc" ? "\u25B2" : "\u25BC" })
+      ] })
+    }
+  );
+}
+function TablePagination({
+  className,
+  total,
+  pageSize = 10
+}) {
+  const { page, setPage } = useTable();
+  const totalPages = Math.ceil(total / pageSize);
+  if (totalPages <= 1) return null;
+  return /* @__PURE__ */ jsxs("div", { "data-react-fancy-table-pagination": "", className: cn("flex items-center justify-between px-4 py-3 text-sm", className), children: [
+    /* @__PURE__ */ jsxs("span", { className: "text-zinc-500", children: [
+      "Page ",
+      page + 1,
+      " of ",
+      totalPages
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled: page === 0,
+          onClick: () => setPage(page - 1),
+          className: "rounded border px-2 py-1 disabled:opacity-50 dark:border-zinc-600",
+          children: "Prev"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled: page >= totalPages - 1,
+          onClick: () => setPage(page + 1),
+          className: "rounded border px-2 py-1 disabled:opacity-50 dark:border-zinc-600",
+          children: "Next"
+        }
+      )
+    ] })
+  ] });
+}
+function TableSearch({
+  className,
+  placeholder = "Search..."
+}) {
+  const { searchQuery, setSearchQuery } = useTable();
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      "data-react-fancy-table-search": "",
+      type: "text",
+      value: searchQuery,
+      onChange: (e) => setSearchQuery(e.target.value),
+      placeholder,
+      className: cn(
+        "rounded-lg border border-zinc-200 px-3 py-2 text-sm dark:border-zinc-600 dark:bg-zinc-800",
+        className
+      )
+    }
+  );
+}
+function TableTray({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { "data-react-fancy-table-tray": "", className: cn("flex items-center justify-between px-4 py-3", className), children });
+}
+function TableRowTray({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-react-fancy-table-row-tray": "",
+      className: cn(
+        "border-t border-zinc-200 px-4 py-3 dark:border-zinc-700",
+        className
+      ),
+      children
+    }
+  );
+}
+function TableRoot({ children, className }) {
+  const [sortKey, setSortKey] = useState(null);
+  const [sortDir, setSortDir] = useState("asc");
+  const [page, setPage] = useState(0);
+  const [searchQuery, setSearchQuery] = useState("");
+  const toggleSort = useCallback(
+    (key) => {
+      if (sortKey === key) {
+        setSortDir((d) => d === "asc" ? "desc" : "asc");
+      } else {
+        setSortKey(key);
+        setSortDir("asc");
+      }
+    },
+    [sortKey]
+  );
+  const ctx = useMemo(
+    () => ({
+      sortKey,
+      sortDir,
+      toggleSort,
+      page,
+      setPage,
+      pageSize: 10,
+      totalRows: 0,
+      searchQuery,
+      setSearchQuery
+    }),
+    [sortKey, sortDir, toggleSort, page, searchQuery]
+  );
+  return /* @__PURE__ */ jsx(TableContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx("div", { "data-react-fancy-table": "", className: cn("overflow-hidden rounded-lg border border-zinc-200 dark:border-zinc-700", className), children: splitTableChildren(children) }) });
+}
+function splitTableChildren(children) {
+  const before = [];
+  const inside = [];
+  const after = [];
+  let seenTableContent = false;
+  Children.forEach(children, (child) => {
+    if (isValidElement(child) && (child.type === TableHead || child.type === TableBody)) {
+      inside.push(child);
+      seenTableContent = true;
+      return;
+    }
+    (seenTableContent ? after : before).push(child);
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    before,
+    inside.length > 0 && /* @__PURE__ */ jsx("table", { className: "w-full border-collapse", children: inside }),
+    after
+  ] });
+}
+var Table = Object.assign(TableRoot, {
+  Head: TableHead,
+  Body: TableBody,
+  Row: TableRow,
+  Cell: TableCell,
+  Column: TableColumn,
+  Pagination: TablePagination,
+  Search: TableSearch,
+  Tray: TableTray,
+  RowTray: TableRowTray
+});
+
+export { Table, TableBody, TableCell, TableColumn, TableHead, TablePagination, TableRow, TableRowTray, TableSearch, TableTray };
+//# sourceMappingURL=chunk-GKPCXPCD.js.map
+//# sourceMappingURL=chunk-GKPCXPCD.js.map

package/dist/chunk-GKPCXPCD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Table/Table.context.ts","../src/components/Table/TableHead.tsx","../src/components/Table/TableBody.tsx","../src/components/Table/TableRow.tsx","../src/components/Table/TableCell.tsx","../src/components/Table/TableColumn.tsx","../src/components/Table/TablePagination.tsx","../src/components/Table/TableSearch.tsx","../src/components/Table/TableTray.tsx","../src/components/Table/TableRowTray.tsx","../src/components/Table/Table.tsx"],"names":["jsx","jsxs","Fragment"],"mappings":"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","file":"chunk-GKPCXPCD.js","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { TableContextValue } from \"./Table.types\";\n\nexport const TableContext = createContext<TableContextValue | null>(null);\n\nexport function useTable(): TableContextValue {\n  const ctx = useContext(TableContext);\n  if (!ctx) {\n    throw new Error(\"Table compound components must be used within <Table>\");\n  }\n  return ctx;\n}\n","import { cn } from \"../../utils/cn\";\nimport type { TableHeadProps } from \"./Table.types\";\n\nexport function TableHead({ children, className }: TableHeadProps) {\n  return <thead data-react-fancy-table-head=\"\" className={cn(\"border-b border-zinc-200 dark:border-zinc-700\", className)}>{children}</thead>;\n}\n","import { cn } from \"../../utils/cn\";\nimport type { TableBodyProps } from \"./Table.types\";\n\nexport function TableBody({ children, className }: TableBodyProps) {\n  return <tbody data-react-fancy-table-body=\"\" className={cn(\"divide-y divide-zinc-100 dark:divide-zinc-800\", className)}>{children}</tbody>;\n}\n","import { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport type { TableRowProps } from \"./Table.types\";\n\nexport function TableRow({\n  children,\n  className,\n  onClick,\n  tray,\n  trayTriggerPosition = \"end\",\n  expanded: controlledExpanded,\n  defaultExpanded = false,\n  onExpandedChange,\n  ...rest\n}: TableRowProps) {\n  const [expanded, setExpanded] = useControllableState(\n    controlledExpanded,\n    defaultExpanded,\n    onExpandedChange,\n  );\n\n  const hasTray = tray != null;\n  const showTrigger = hasTray && trayTriggerPosition !== \"hidden\";\n\n  const triggerCell = showTrigger ? (\n    <td className=\"w-8 px-2\">\n      <button\n        type=\"button\"\n        onClick={(e) => {\n          e.stopPropagation();\n          setExpanded(!expanded);\n        }}\n        className=\"inline-flex items-center justify-center rounded p-1 text-zinc-400 transition-colors hover:text-zinc-700 dark:text-zinc-500 dark:hover:text-zinc-300\"\n        aria-label={expanded ? \"Collapse row\" : \"Expand row\"}\n      >\n        <svg\n          className={cn(\n            \"h-4 w-4 transition-transform duration-200\",\n            expanded && \"rotate-90\",\n          )}\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n          strokeWidth={2}\n        >\n          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n        </svg>\n      </button>\n    </td>\n  ) : null;\n\n  return (\n    <>\n      <tr\n        {...rest}\n        data-react-fancy-table-row=\"\"\n        className={cn(\n          \"transition-colors hover:bg-zinc-50 dark:hover:bg-zinc-800/50\",\n          onClick && \"cursor-pointer\",\n          className,\n        )}\n        onClick={onClick}\n      >\n        {trayTriggerPosition === \"start\" && triggerCell}\n        {children}\n        {trayTriggerPosition === \"end\" && triggerCell}\n      </tr>\n      {hasTray && expanded && (\n        <tr className=\"bg-zinc-50/50 dark:bg-zinc-800/30\">\n          <td colSpan={999}>\n            {tray}\n          </td>\n        </tr>\n      )}\n    </>\n  );\n}\n","import { cn } from \"../../utils/cn\";\nimport type { TableCellProps } from \"./Table.types\";\n\nexport function TableCell({ children, className, header, ...rest }: TableCellProps) {\n  const Tag = header ? \"th\" : \"td\";\n  return (\n    <Tag\n      data-react-fancy-table-cell=\"\"\n      className={cn(\n        \"px-4 py-3 text-sm\",\n        header && \"text-left font-medium text-zinc-500 dark:text-zinc-400\",\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </Tag>\n  );\n}\n","import { cn } from \"../../utils/cn\";\nimport { useTable } from \"./Table.context\";\nimport type { TableColumnProps } from \"./Table.types\";\n\nexport function TableColumn({ label, sortKey, className }: TableColumnProps) {\n  const { sortKey: currentSort, sortDir, toggleSort } = useTable();\n  const isSorted = sortKey && currentSort === sortKey;\n\n  return (\n    <th\n      data-react-fancy-table-column=\"\"\n      className={cn(\n        \"px-4 py-3 text-left text-sm font-medium text-zinc-500 dark:text-zinc-400\",\n        sortKey && \"cursor-pointer select-none\",\n        className,\n      )}\n      onClick={sortKey ? () => toggleSort(sortKey) : undefined}\n    >\n      <span className=\"inline-flex items-center gap-1\">\n        {label}\n        {isSorted && (\n          <span className=\"text-xs\">{sortDir === \"asc\" ? \"\\u25B2\" : \"\\u25BC\"}</span>\n        )}\n      </span>\n    </th>\n  );\n}\n","import { cn } from \"../../utils/cn\";\nimport { useTable } from \"./Table.context\";\nimport type { TablePaginationProps } from \"./Table.types\";\n\nexport function TablePagination({\n  className,\n  total,\n  pageSize = 10,\n}: TablePaginationProps) {\n  const { page, setPage } = useTable();\n  const totalPages = Math.ceil(total / pageSize);\n\n  if (totalPages <= 1) return null;\n\n  return (\n    <div data-react-fancy-table-pagination=\"\" className={cn(\"flex items-center justify-between px-4 py-3 text-sm\", className)}>\n      <span className=\"text-zinc-500\">\n        Page {page + 1} of {totalPages}\n      </span>\n      <div className=\"flex gap-1\">\n        <button\n          type=\"button\"\n          disabled={page === 0}\n          onClick={() => setPage(page - 1)}\n          className=\"rounded border px-2 py-1 disabled:opacity-50 dark:border-zinc-600\"\n        >\n          Prev\n        </button>\n        <button\n          type=\"button\"\n          disabled={page >= totalPages - 1}\n          onClick={() => setPage(page + 1)}\n          className=\"rounded border px-2 py-1 disabled:opacity-50 dark:border-zinc-600\"\n        >\n          Next\n        </button>\n      </div>\n    </div>\n  );\n}\n","import { cn } from \"../../utils/cn\";\nimport { useTable } from \"./Table.context\";\nimport type { TableSearchProps } from \"./Table.types\";\n\nexport function TableSearch({\n  className,\n  placeholder = \"Search...\",\n}: TableSearchProps) {\n  const { searchQuery, setSearchQuery } = useTable();\n\n  return (\n    <input\n      data-react-fancy-table-search=\"\"\n      type=\"text\"\n      value={searchQuery}\n      onChange={(e) => setSearchQuery(e.target.value)}\n      placeholder={placeholder}\n      className={cn(\n        \"rounded-lg border border-zinc-200 px-3 py-2 text-sm dark:border-zinc-600 dark:bg-zinc-800\",\n        className,\n      )}\n    />\n  );\n}\n","import { cn } from \"../../utils/cn\";\nimport type { TableTrayProps } from \"./Table.types\";\n\nexport function TableTray({ children, className }: TableTrayProps) {\n  return (\n    <div data-react-fancy-table-tray=\"\" className={cn(\"flex items-center justify-between px-4 py-3\", className)}>\n      {children}\n    </div>\n  );\n}\n","import { cn } from \"../../utils/cn\";\nimport type { TableRowTrayProps } from \"./Table.types\";\n\nexport function TableRowTray({ children, className }: TableRowTrayProps) {\n  return (\n    <div\n      data-react-fancy-table-row-tray=\"\"\n      className={cn(\n        \"border-t border-zinc-200 px-4 py-3 dark:border-zinc-700\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n","import { Children, isValidElement, useCallback, useMemo, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { TableContext } from \"./Table.context\";\nimport { TableHead } from \"./TableHead\";\nimport { TableBody } from \"./TableBody\";\nimport { TableRow } from \"./TableRow\";\nimport { TableCell } from \"./TableCell\";\nimport { TableColumn } from \"./TableColumn\";\nimport { TablePagination } from \"./TablePagination\";\nimport { TableSearch } from \"./TableSearch\";\nimport { TableTray } from \"./TableTray\";\nimport { TableRowTray } from \"./TableRowTray\";\nimport type { TableProps, TableContextValue } from \"./Table.types\";\n\nfunction TableRoot({ children, className }: TableProps) {\n  const [sortKey, setSortKey] = useState<string | null>(null);\n  const [sortDir, setSortDir] = useState<\"asc\" | \"desc\">(\"asc\");\n  const [page, setPage] = useState(0);\n  const [searchQuery, setSearchQuery] = useState(\"\");\n\n  const toggleSort = useCallback(\n    (key: string) => {\n      if (sortKey === key) {\n        setSortDir((d) => (d === \"asc\" ? \"desc\" : \"asc\"));\n      } else {\n        setSortKey(key);\n        setSortDir(\"asc\");\n      }\n    },\n    [sortKey],\n  );\n\n  const ctx = useMemo<TableContextValue>(\n    () => ({\n      sortKey,\n      sortDir,\n      toggleSort,\n      page,\n      setPage,\n      pageSize: 10,\n      totalRows: 0,\n      searchQuery,\n      setSearchQuery,\n    }),\n    [sortKey, sortDir, toggleSort, page, searchQuery],\n  );\n\n  return (\n    <TableContext.Provider value={ctx}>\n      <div data-react-fancy-table=\"\" className={cn(\"overflow-hidden rounded-lg border border-zinc-200 dark:border-zinc-700\", className)}>\n        {splitTableChildren(children)}\n      </div>\n    </TableContext.Provider>\n  );\n}\n\nfunction splitTableChildren(children: ReactNode): ReactNode {\n  const before: ReactNode[] = [];\n  const inside: ReactNode[] = [];\n  const after: ReactNode[] = [];\n  let seenTableContent = false;\n\n  Children.forEach(children, (child) => {\n    if (isValidElement(child) && (child.type === TableHead || child.type === TableBody)) {\n      inside.push(child);\n      seenTableContent = true;\n      return;\n    }\n    (seenTableContent ? after : before).push(child);\n  });\n\n  return (\n    <>\n      {before}\n      {inside.length > 0 && <table className=\"w-full border-collapse\">{inside}</table>}\n      {after}\n    </>\n  );\n}\n\nexport const Table = Object.assign(TableRoot, {\n  Head: TableHead,\n  Body: TableBody,\n  Row: TableRow,\n  Cell: TableCell,\n  Column: TableColumn,\n  Pagination: TablePagination,\n  Search: TableSearch,\n  Tray: TableTray,\n  RowTray: TableRowTray,\n});\n"]}

package/dist/chunk-GZIUE4DE.js

@@ -0,0 +1,117 @@
+import { Popover } from './chunk-JCOBDDHF.js';
+import { Button } from './chunk-WEGL4S52.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var CONFIDENCE_TIERS = [
+  { min: 0.85, color: "#10b981", label: "high" },
+  { min: 0.6, color: "#f59e0b", label: "medium" },
+  { min: 0, color: "#ef4444", label: "low" }
+];
+function tier(c) {
+  return CONFIDENCE_TIERS.find((t) => c >= t.min) ?? CONFIDENCE_TIERS[2];
+}
+function ReasonTag({
+  value,
+  reason,
+  confidence = 1,
+  sources = [],
+  by,
+  theme = "dot",
+  pinned = false,
+  onFollowUp,
+  className
+}) {
+  const t = tier(confidence);
+  const trigger = theme === "chip" ? /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: `inline-flex cursor-help items-center gap-1 rounded-full px-2 py-0.5 text-[12px] font-medium ${className ?? ""}`,
+      style: { backgroundColor: t.color + "22", color: t.color },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "h-1.5 w-1.5 rounded-full",
+            style: { backgroundColor: t.color }
+          }
+        ),
+        value,
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] opacity-70", children: "?" })
+      ]
+    }
+  ) : theme === "underline" ? /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: `cursor-help underline decoration-dotted underline-offset-2 ${className ?? ""}`,
+      style: { textDecorationColor: t.color },
+      children: [
+        value,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "ml-0.5 font-mono text-[10px]",
+            style: { color: t.color },
+            children: "?"
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ jsxs("span", { className: `inline-flex cursor-help items-baseline gap-1 ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsx("span", { className: "font-medium", children: value }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "inline-block h-1.5 w-1.5 rounded-full align-middle",
+        style: { backgroundColor: t.color },
+        title: "reason available"
+      }
+    )
+  ] });
+  if (pinned) {
+    return /* @__PURE__ */ jsxs("span", { className: "inline-flex flex-col items-start gap-0.5 align-top", children: [
+      trigger,
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "block max-w-[280px] rounded border-l-2 pl-2 text-[11px] leading-snug text-zinc-600 dark:text-zinc-300",
+          style: { borderColor: t.color },
+          children: reason
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Popover, { hover: true, children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { children: trigger }),
+    /* @__PURE__ */ jsx(Popover.Content, { children: /* @__PURE__ */ jsxs("div", { className: "w-72 space-y-2 text-sm", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "text-[10px] font-semibold uppercase tracking-wider",
+            style: { color: t.color },
+            children: [
+              t.label,
+              " confidence \xB7 ",
+              (confidence * 100).toFixed(0),
+              "%"
+            ]
+          }
+        ),
+        by && /* @__PURE__ */ jsxs("span", { className: "ml-auto font-mono text-[10px] text-zinc-400", children: [
+          "@",
+          by
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-[13px] leading-snug text-zinc-700 dark:text-zinc-200", children: reason }),
+      sources.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-wider text-zinc-400", children: "sources" }),
+        /* @__PURE__ */ jsx("ul", { className: "mt-0.5 space-y-0.5 text-[12px]", children: sources.map((s, i) => /* @__PURE__ */ jsx("li", { children: s.href ? /* @__PURE__ */ jsx("a", { className: "text-violet-600 hover:underline", href: s.href, children: s.label }) : /* @__PURE__ */ jsx("span", { className: "text-zinc-600 dark:text-zinc-300", children: s.label }) }, i)) })
+      ] }),
+      onFollowUp && /* @__PURE__ */ jsx("div", { className: "flex justify-end pt-1", children: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: onFollowUp, children: "ask follow-up" }) })
+    ] }) })
+  ] });
+}
+
+export { ReasonTag };
+//# sourceMappingURL=chunk-GZIUE4DE.js.map
+//# sourceMappingURL=chunk-GZIUE4DE.js.map

package/dist/chunk-GZIUE4DE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ReasonTag/ReasonTag.tsx"],"names":[],"mappings":"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","file":"chunk-GZIUE4DE.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=\"ml-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-l-2 pl-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=\"ml-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-HAOYXGGJ.js

@@ -0,0 +1,104 @@
+import { cn } from './chunk-DSUHZO6T.js';
+import { forwardRef, useState, useRef, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var colorClasses = {
+  yellow: "bg-amber-100 text-amber-950 dark:bg-amber-200 dark:text-amber-950",
+  blue: "bg-sky-100 text-sky-950 dark:bg-sky-200 dark:text-sky-950",
+  green: "bg-emerald-100 text-emerald-950 dark:bg-emerald-200 dark:text-emerald-950",
+  pink: "bg-pink-100 text-pink-950 dark:bg-pink-200 dark:text-pink-950",
+  violet: "bg-violet-100 text-violet-950 dark:bg-violet-200 dark:text-violet-950"
+};
+var isPreset = (c) => c in colorClasses;
+var StickyNote = forwardRef(
+  ({
+    value,
+    defaultValue,
+    onChange,
+    color = "yellow",
+    rotate = 0,
+    width = 180,
+    height = "auto",
+    selected = false,
+    editable = true,
+    autoFocus = false,
+    id,
+    children,
+    className,
+    style
+  }, ref) => {
+    const isControlled = value !== void 0;
+    const [internal, setInternal] = useState(defaultValue ?? "");
+    const text = isControlled ? value : internal;
+    const editRef = useRef(null);
+    useEffect(() => {
+      const el = editRef.current;
+      if (el && document.activeElement !== el && el.textContent !== text) {
+        el.textContent = text ?? "";
+      }
+    }, [text]);
+    useEffect(() => {
+      if (!editable || !autoFocus) return;
+      const el = editRef.current;
+      if (!el) return;
+      el.focus();
+      const range = document.createRange();
+      range.selectNodeContents(el);
+      range.collapse(false);
+      const sel = window.getSelection();
+      sel?.removeAllRanges();
+      sel?.addRange(range);
+    }, [editable, autoFocus]);
+    const commit = () => {
+      const next = editRef.current?.textContent ?? "";
+      if (next === text) return;
+      if (!isControlled) setInternal(next);
+      onChange?.(next);
+    };
+    const preset = isPreset(color);
+    const content = children != null ? children : editable ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: editRef,
+        contentEditable: true,
+        suppressContentEditableWarning: true,
+        spellCheck: false,
+        role: "textbox",
+        "aria-multiline": "true",
+        className: "outline-none whitespace-pre-wrap break-words min-h-[1.4em]",
+        onBlur: commit,
+        onKeyDown: (e) => {
+          if (e.key === "Escape") e.currentTarget.blur();
+        },
+        children: text
+      }
+    ) : /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap break-words", children: text });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        id,
+        "data-react-fancy-sticky": "",
+        className: cn(
+          "rounded-sm p-3.5 text-sm leading-relaxed shadow-[0_2px_8px_rgba(0,0,0,0.12),0_1px_2px_rgba(0,0,0,0.08)]",
+          preset ? colorClasses[color] : "text-zinc-900",
+          selected && "ring-2 ring-blue-500 ring-offset-1",
+          className
+        ),
+        style: {
+          width,
+          height,
+          transform: rotate ? `rotate(${rotate}deg)` : void 0,
+          ...preset ? null : { background: color },
+          ...style
+        },
+        children: content
+      }
+    );
+  }
+);
+StickyNote.displayName = "StickyNote";
+
+export { StickyNote };
+//# sourceMappingURL=chunk-HAOYXGGJ.js.map
+//# sourceMappingURL=chunk-HAOYXGGJ.js.map

package/dist/chunk-HAOYXGGJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/StickyNote/StickyNote.tsx"],"names":[],"mappings":"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","file":"chunk-HAOYXGGJ.js","sourcesContent":["import { forwardRef, useEffect, useRef, useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { StickyNoteColor, StickyNoteProps } from \"./StickyNote.types\";\n\n// Preset paper colors → bg + text classes. An arbitrary CSS color string\n// falls through to an inline `background` (text stays a dark ink tone).\nconst colorClasses: Record<StickyNoteColor, string> = {\n  yellow: \"bg-amber-100 text-amber-950 dark:bg-amber-200 dark:text-amber-950\",\n  blue: \"bg-sky-100 text-sky-950 dark:bg-sky-200 dark:text-sky-950\",\n  green: \"bg-emerald-100 text-emerald-950 dark:bg-emerald-200 dark:text-emerald-950\",\n  pink: \"bg-pink-100 text-pink-950 dark:bg-pink-200 dark:text-pink-950\",\n  violet: \"bg-violet-100 text-violet-950 dark:bg-violet-200 dark:text-violet-950\",\n};\n\nconst isPreset = (c: string): c is StickyNoteColor => c in colorClasses;\n\n/**\n * A sticky note — paper-styled, with optional inline text editing.\n *\n * Presentational primitive only: it owns the note's look and its editable\n * text. Positioning, dragging, resizing, and z-order are the consumer's job\n * (e.g. `fancy-whiteboard`'s `<Board>` places it in world space;\n * `fancy-artboard`'s `<ArtBoard.Note>` positions it absolutely).\n *\n *   <StickyNote value={text} onChange={setText} color=\"yellow\" rotate={-2} />\n */\nexport const StickyNote = forwardRef<HTMLDivElement, StickyNoteProps>(\n  (\n    {\n      value,\n      defaultValue,\n      onChange,\n      color = \"yellow\",\n      rotate = 0,\n      width = 180,\n      height = \"auto\",\n      selected = false,\n      editable = true,\n      autoFocus = false,\n      id,\n      children,\n      className,\n      style,\n    },\n    ref,\n  ) => {\n    const isControlled = value !== undefined;\n    const [internal, setInternal] = useState(defaultValue ?? \"\");\n    const text = isControlled ? value : internal;\n    const editRef = useRef<HTMLDivElement>(null);\n\n    // Push text into the contentEditable node only when it differs AND the node\n    // isn't focused — editing in place must not yank the caret to the start.\n    useEffect(() => {\n      const el = editRef.current;\n      if (el && document.activeElement !== el && el.textContent !== text) {\n        el.textContent = text ?? \"\";\n      }\n    }, [text]);\n\n    // Focus + caret-to-end when editing turns on (consumer \"enter edit\" gesture).\n    useEffect(() => {\n      if (!editable || !autoFocus) return;\n      const el = editRef.current;\n      if (!el) return;\n      el.focus();\n      const range = document.createRange();\n      range.selectNodeContents(el);\n      range.collapse(false);\n      const sel = window.getSelection();\n      sel?.removeAllRanges();\n      sel?.addRange(range);\n    }, [editable, autoFocus]);\n\n    const commit = () => {\n      const next = editRef.current?.textContent ?? \"\";\n      if (next === text) return;\n      if (!isControlled) setInternal(next);\n      onChange?.(next);\n    };\n\n    const preset = isPreset(color);\n    const content =\n      children != null ? (\n        children\n      ) : editable ? (\n        <div\n          ref={editRef}\n          contentEditable\n          suppressContentEditableWarning\n          spellCheck={false}\n          role=\"textbox\"\n          aria-multiline=\"true\"\n          className=\"outline-none whitespace-pre-wrap break-words min-h-[1.4em]\"\n          onBlur={commit}\n          onKeyDown={(e) => {\n            if (e.key === \"Escape\") e.currentTarget.blur();\n          }}\n        >\n          {text}\n        </div>\n      ) : (\n        <div className=\"whitespace-pre-wrap break-words\">{text}</div>\n      );\n\n    return (\n      <div\n        ref={ref}\n        id={id}\n        data-react-fancy-sticky=\"\"\n        className={cn(\n          \"rounded-sm p-3.5 text-sm leading-relaxed shadow-[0_2px_8px_rgba(0,0,0,0.12),0_1px_2px_rgba(0,0,0,0.08)]\",\n          preset ? colorClasses[color] : \"text-zinc-900\",\n          selected && \"ring-2 ring-blue-500 ring-offset-1\",\n          className,\n        )}\n        style={{\n          width,\n          height,\n          transform: rotate ? `rotate(${rotate}deg)` : undefined,\n          ...(preset ? null : { background: color }),\n          ...style,\n        }}\n      >\n        {content}\n      </div>\n    );\n  },\n);\n\nStickyNote.displayName = \"StickyNote\";\n"]}