@ai-matrx/associations 0.3.0 → 0.4.0

package/dist/react/index.cjs

@@ -25,6 +25,7 @@ __export(react_exports, {
   AssociationCaptureToolbar: () => AssociationCaptureToolbar,
   AssociationCard: () => AssociationCard,
   AssociationCardGrid: () => AssociationCardGrid,
+  AssociationEntitySelect: () => AssociationEntitySelect,
   AssociationList: () => AssociationList,
   AssociationPicker: () => AssociationPicker,
   AssociationWindow: () => AssociationWindow,
@@ -32,6 +33,8 @@ __export(react_exports, {
   AttachedItemsSheet: () => AttachedItemsSheet,
   CONTENT_ROLES: () => CONTENT_ROLES,
   CaptureToolbarAction: () => CaptureToolbarAction,
+  CategorySelect: () => CategorySelect,
+  CategoryTagPicker: () => CategoryTagPicker,
   DefaultEntityIcon: () => DefaultEntityIcon,
   DoorRef: () => DoorRef,
   PrimaryEntityProvider: () => PrimaryEntityProvider,
@@ -558,6 +561,7 @@ var ENTITY_TYPE_TOKENS = [
   "platform_actor_session",
   "platform_actor_token",
   "platform_actor_token_event",
+  "platform_continued_access",
   "platform_outcome_event",
   "platform_outsider_consumer",
   "platform_saved_view",
@@ -586,6 +590,7 @@ var ENTITY_TYPE_TOKENS = [
   "research_tag",
   "research_template",
   "research_topic",
+  "route_manifest_entry",
   "rulebook",
   "sandbox_instance",
   "sch_agent_task",
@@ -664,6 +669,7 @@ var ENTITY_TYPE_TOKENS = [
   "seo_topic",
   "seo_web_analytics_daily",
   "shared_canvas_item",
+  "short_link",
   "skill",
   "skill_render_definition",
   "sms_consent",
@@ -1467,6 +1473,27 @@ function ExternalLinkIcon(props) {
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" })
   ] });
 }
+function ChevronDownIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { ...base(props), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m6 9 6 6 6-6" }) });
+}
+function ChevronsUpDownIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { ...base(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m7 15 5 5 5-5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m7 9 5-5 5 5" })
+  ] });
+}
+function CornerDownRightIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { ...base(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "15 10 20 15 15 20" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M4 4v7a4 4 0 0 0 4 4h12" })
+  ] });
+}
+function TagIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { ...base(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "7.5", cy: "7.5", r: ".5", fill: "currentColor" })
+  ] });
+}
 function DefaultEntityIcon(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { ...base(props), children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z" }),
@@ -3155,4 +3182,724 @@ function CaptureToolbarAction({
     }
   );
 }
+
+// src/react/components/AssociationEntitySelect.tsx
+var import_react17 = require("react");
+var import_design_system10 = require("@ai-matrx/design-system");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function AssociationEntitySelect({
+  token,
+  adapter,
+  className,
+  labelClassName,
+  align = "end",
+  showIcon = true,
+  renameActivation = "click",
+  emptyLabel,
+  iconClassName,
+  createSlot
+}) {
+  const store = useAssociationsStore();
+  const { entityDoors } = useAssociationsUiPorts();
+  const notifier = useNotifier();
+  const info = store.registry.getEntityInfo(token);
+  const InfoIcon = info.Icon ?? DefaultEntityIcon;
+  const DoorControls = entityDoors?.DoorControls;
+  const { items, activeId } = adapter;
+  const active = items.find((i) => i.id === activeId) ?? null;
+  const activeIndex = active ? items.indexOf(active) : -1;
+  const [open, setOpen] = (0, import_react17.useState)(false);
+  const [query, setQuery] = (0, import_react17.useState)("");
+  const [creating, setCreating] = (0, import_react17.useState)(false);
+  const [draftName, setDraftName] = (0, import_react17.useState)("");
+  const [busy, setBusy] = (0, import_react17.useState)(false);
+  const entityLabel = info.label.toLowerCase();
+  const close = () => {
+    setOpen(false);
+    setQuery("");
+    setCreating(false);
+    setDraftName("");
+  };
+  const create = async (title) => {
+    const name = title.trim();
+    if (!name || busy || !adapter.createAndAttach) return;
+    setBusy(true);
+    const id = await adapter.createAndAttach(name);
+    setBusy(false);
+    if (id) close();
+    else notifier.error(`Couldn't create the ${entityLabel}`);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "div",
+    {
+      className: (0, import_design_system10.cn)(
+        "group/entity-ref flex min-w-0 items-center gap-0.5",
+        className
+      ),
+      children: [
+        showIcon ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          InfoIcon,
+          {
+            className: (0, import_design_system10.cn)(
+              "size-3.5 shrink-0",
+              iconClassName ?? "text-muted-foreground"
+            ),
+            "aria-hidden": true
+          }
+        ) : null,
+        active ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          import_design_system10.EditableLabel,
+          {
+            value: active.title,
+            onCommit: async (next) => {
+              const ok = await adapter.rename(active.id, next);
+              if (!ok) {
+                notifier.error(`Couldn't rename the ${entityLabel}`);
+                throw new Error("rename failed");
+              }
+            },
+            commitMode: "await",
+            activation: renameActivation,
+            ariaLabel: info.label,
+            className: (0, import_design_system10.cn)("max-w-[14rem]", labelClassName),
+            displayClassName: "text-xs font-medium text-foreground",
+            inputClassName: "text-xs font-medium"
+          }
+        ) : null,
+        active && DoorControls ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DoorControls, { token, id: active.id, name: active.title }) : null,
+        !active ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "span",
+          {
+            className: (0, import_design_system10.cn)(
+              "truncate px-1 text-xs font-medium text-muted-foreground",
+              labelClassName
+            ),
+            children: adapter.loading ? "\u2026" : emptyLabel ?? info.labelPlural
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          import_design_system10.Popover,
+          {
+            open,
+            onOpenChange: (next) => next ? setOpen(true) : close(),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_design_system10.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  className: "inline-flex h-6 shrink-0 items-center gap-0.5 rounded-md px-1 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+                  title: `Switch or add ${info.labelPlural.toLowerCase()}`,
+                  "aria-label": `Switch or add ${info.labelPlural.toLowerCase()}`,
+                  children: [
+                    items.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "tabular-nums", children: [
+                      activeIndex >= 0 ? activeIndex + 1 : "\u2014",
+                      "/",
+                      items.length
+                    ] }) : null,
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChevronDownIcon, { className: "size-3 opacity-60" })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_design_system10.PopoverContent, { className: "w-60 p-0", align, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_design_system10.Command, { children: [
+                items.length > 5 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  import_design_system10.CommandInput,
+                  {
+                    value: query,
+                    onValueChange: setQuery,
+                    placeholder: `Search ${info.labelPlural.toLowerCase()}\u2026`
+                  }
+                ) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_design_system10.CommandList, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_design_system10.CommandEmpty, { children: "No match." }),
+                  items.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_design_system10.CommandGroup, { children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                    import_design_system10.CommandItem,
+                    {
+                      value: `${item.title} ${item.id}`,
+                      onSelect: () => {
+                        if (item.id !== activeId)
+                          void adapter.setActive(item.id);
+                        close();
+                      },
+                      className: "group/entity-ref group gap-2",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                          CheckIcon,
+                          {
+                            className: (0, import_design_system10.cn)(
+                              "size-3.5 shrink-0",
+                              item.id === activeId ? "opacity-100" : "opacity-0"
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "min-w-0 flex-1 truncate", children: item.title }),
+                        DoorControls ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                          "span",
+                          {
+                            className: "inline-flex shrink-0 items-center",
+                            onPointerDown: (e) => {
+                              e.preventDefault();
+                              e.stopPropagation();
+                            },
+                            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                              DoorControls,
+                              {
+                                token,
+                                id: item.id,
+                                name: item.title
+                              }
+                            )
+                          }
+                        ) : null,
+                        adapter.detach && item.id !== activeId ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                          "button",
+                          {
+                            type: "button",
+                            onPointerDown: (e) => {
+                              e.preventDefault();
+                              e.stopPropagation();
+                            },
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              void adapter.detach?.(item.id);
+                            },
+                            className: "grid size-5 shrink-0 place-items-center rounded text-muted-foreground opacity-0 transition-opacity hover:bg-accent hover:text-destructive group-hover:opacity-100",
+                            title: `Remove this ${entityLabel} from here (does not delete it)`,
+                            "aria-label": `Remove ${item.title}`,
+                            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(XIcon, { className: "size-3" })
+                          }
+                        ) : null
+                      ]
+                    },
+                    item.id
+                  )) }) : null
+                ] }),
+                createSlot !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "border-t border-border p-1", children: typeof createSlot === "function" ? createSlot(close) : createSlot }) : null,
+                createSlot === void 0 && adapter.createAndAttach ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "border-t border-border p-1", children: creating ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-1 px-1 py-0.5", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                    "input",
+                    {
+                      autoFocus: true,
+                      type: "text",
+                      value: draftName,
+                      disabled: busy,
+                      placeholder: `New ${entityLabel} name\u2026`,
+                      onChange: (e) => setDraftName(e.target.value),
+                      onKeyDown: (e) => {
+                        if (e.key === "Enter") {
+                          e.preventDefault();
+                          void create(draftName);
+                        } else if (e.key === "Escape") {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          setCreating(false);
+                          setDraftName("");
+                        }
+                      },
+                      className: "h-6 w-full min-w-0 rounded-sm bg-transparent px-1 text-base outline-none focus:bg-background focus:ring-1 focus:ring-ring md:text-xs",
+                      "aria-label": `New ${entityLabel} name`
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      disabled: busy || !draftName.trim(),
+                      onClick: () => void create(draftName),
+                      className: "inline-flex h-6 shrink-0 items-center rounded-md px-1.5 text-[10px] font-medium text-primary transition-colors hover:bg-accent disabled:opacity-50",
+                      children: busy ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SpinnerIcon, { className: "size-3 animate-spin" }) : "Create"
+                    }
+                  )
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                  "button",
+                  {
+                    type: "button",
+                    disabled: busy,
+                    onClick: () => {
+                      if (query.trim()) void create(query);
+                      else setCreating(true);
+                    },
+                    className: "flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+                    children: [
+                      busy ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SpinnerIcon, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PlusIcon, { className: "size-3.5" }),
+                      query.trim() ? `Create "${query.trim()}"` : `New ${info.label}`
+                    ]
+                  }
+                ) }) : null
+              ] }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/react/components/CategorySelect.tsx
+var import_react18 = require("react");
+var import_design_system11 = require("@ai-matrx/design-system");
+
+// src/core/categoryHierarchy.ts
+function buildCategoryHierarchy(categories) {
+  const byId = new Map(categories.map((category) => [category.id, category]));
+  const hasHierarchy = categories.some(
+    (category) => category.parentId !== null && byId.has(category.parentId)
+  );
+  if (!hasHierarchy) {
+    return {
+      items: categories.map((category) => ({
+        category,
+        depth: 0,
+        parent: null,
+        displayName: category.name
+      })),
+      roots: categories.filter((category) => category.parentId === null),
+      hasHierarchy: false
+    };
+  }
+  const roots = categories.filter(
+    (category) => category.parentId === null || !byId.has(category.parentId)
+  );
+  const childrenByParent = /* @__PURE__ */ new Map();
+  for (const category of categories) {
+    if (!category.parentId || !byId.has(category.parentId)) continue;
+    const children = childrenByParent.get(category.parentId) ?? [];
+    children.push(category);
+    childrenByParent.set(category.parentId, children);
+  }
+  const items = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const root of roots) {
+    items.push({
+      category: root,
+      depth: 0,
+      parent: null,
+      displayName: root.name
+    });
+    seen.add(root.id);
+    for (const child of childrenByParent.get(root.id) ?? []) {
+      items.push({
+        category: child,
+        depth: 1,
+        parent: root,
+        displayName: `${root.name} / ${child.name}`
+      });
+      seen.add(child.id);
+    }
+  }
+  for (const category of categories) {
+    if (seen.has(category.id)) continue;
+    items.push({
+      category,
+      depth: 0,
+      parent: null,
+      displayName: category.name
+    });
+  }
+  return {
+    items,
+    roots: categories.filter((category) => category.parentId === null),
+    hasHierarchy: true
+  };
+}
+
+// src/react/components/CategorySelect.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var NONE = "__none__";
+var ROOT_PARENT = "__root__";
+function plural(noun) {
+  return /[^aeiou]y$/i.test(noun) ? `${noun.slice(0, -1)}ies` : `${noun}s`;
+}
+function CategorySelect({
+  dimension,
+  value,
+  onChange,
+  placeholder,
+  allowNone = true,
+  disabled,
+  allowCreate = true,
+  orgId,
+  noun = "category"
+}) {
+  const store = useAssociationsStore();
+  const notifier = useNotifier();
+  const {
+    categories,
+    status,
+    error,
+    create: createCategory,
+    reload
+  } = useCategories({ dimension });
+  const hierarchy = buildCategoryHierarchy(categories);
+  const [createParentId, setCreateParentId] = (0, import_react18.useState)(ROOT_PARENT);
+  const options = [
+    ...allowNone ? [{ value: NONE, label: "None", keywords: "none clear empty" }] : [],
+    ...hierarchy.hasHierarchy ? hierarchy.items.map(({ category, depth, parent }) => ({
+      value: category.id,
+      label: category.name,
+      // The type-ahead matches the parent's name too, so someone who knows
+      // the branch but not the leaf still finds it.
+      keywords: parent ? parent.name : "",
+      render: depth === 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "font-medium", children: category.name }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "flex items-center gap-1.5 pl-3 text-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CornerDownRightIcon, { className: "h-3.5 w-3.5 shrink-0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-foreground", children: category.name })
+      ] })
+    })) : categories.map((category) => ({
+      value: category.id,
+      label: category.name
+    }))
+  ];
+  const selected = value ? hierarchy.items.find((item) => item.category.id === value)?.displayName ?? categories.find((category) => category.id === value)?.name ?? null : null;
+  const create = async (typed) => {
+    const name = typed.trim();
+    if (!name) return null;
+    const existing = categories.find(
+      (category) => category.name.toLowerCase() === name.toLowerCase()
+    );
+    if (existing) return existing.id;
+    let resolvedOrgId = orgId ?? null;
+    if (!resolvedOrgId && store.identity.ensureOrgId) {
+      try {
+        resolvedOrgId = await store.identity.ensureOrgId();
+      } catch (e) {
+        store.errorSink({
+          code: "ensure_org_failed",
+          message: "[CategorySelect] identity.ensureOrgId threw",
+          context: { error: e instanceof Error ? e.message : String(e) }
+        });
+      }
+    }
+    if (!resolvedOrgId) {
+      notifier.error(`Select an organization before creating a ${noun}.`);
+      return null;
+    }
+    const parentId = hierarchy.hasHierarchy && createParentId !== ROOT_PARENT ? createParentId : null;
+    const result = await createCategory({ name, orgId: resolvedOrgId, parentId });
+    if (!result.ok || !result.id) {
+      notifier.error(`Couldn't create that ${noun}`, {
+        ...result.error != null ? { description: result.error } : {}
+      });
+      return null;
+    }
+    await reload();
+    setCreateParentId(ROOT_PARENT);
+    const under = parentId ? categories.find((category) => category.id === parentId)?.name : null;
+    notifier.success(
+      `\u201C${name}\u201D is now one of your ${plural(noun)}${under ? ` \u2014 it sits under ${under}, and every screen that offers ${plural(noun)} offers it.` : ` \u2014 every screen that offers ${plural(noun)} offers it from now on.`}`
+    );
+    return result.id;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      import_design_system11.CreatablePicker,
+      {
+        value: value ?? (allowNone ? NONE : null),
+        onSelect: (next) => onChange(next === NONE ? null : next),
+        options,
+        placeholder,
+        searchPlaceholder: allowCreate ? `Search or add a ${noun}\u2026` : `Search ${plural(noun)}\u2026`,
+        noun,
+        ariaLabel: placeholder,
+        className: "text-sm",
+        ...disabled !== void 0 ? { disabled } : {},
+        loading: status === "loading",
+        emptyLabel: `No ${noun} matches that.`,
+        ...allowCreate ? { onCreate: create } : {},
+        ...allowCreate && hierarchy.hasHierarchy ? {
+          createExtra: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_design_system11.Select, { value: createParentId, onValueChange: setCreateParentId, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              import_design_system11.SelectTrigger,
+              {
+                className: "h-7 text-xs",
+                "aria-label": `Put the new ${noun} under`,
+                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_design_system11.SelectValue, {})
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_design_system11.SelectContent, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_design_system11.SelectItem, { value: ROOT_PARENT, className: "text-xs", children: "Top level" }),
+              hierarchy.items.filter((item) => item.depth === 0).map((item) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+                import_design_system11.SelectItem,
+                {
+                  value: item.category.id,
+                  className: "text-xs",
+                  children: [
+                    "Under ",
+                    item.category.name
+                  ]
+                },
+                item.category.id
+              ))
+            ] })
+          ] })
+        } : {}
+      }
+    ),
+    selected === null && value !== null ? (
+      // A stored id whose row this reader cannot see is not "nothing chosen":
+      // saying so beats a blank box that looks like an unsaved field.
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { className: "mt-1 text-xs text-muted-foreground", children: [
+        "This ",
+        noun,
+        " is no longer available to you."
+      ] })
+    ) : null,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "mt-1 text-xs text-destructive", children: error }) : null
+  ] });
+}
+
+// src/react/components/CategoryTagPicker.tsx
+var import_react19 = require("react");
+var import_design_system12 = require("@ai-matrx/design-system");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var ROOT_PARENT2 = "__root__";
+function CategoryTagPicker({
+  entityType,
+  entityId,
+  dimension,
+  edgeRole,
+  orgId,
+  addLabel = "Add tag",
+  icon: Icon = TagIcon,
+  allowCreate = true,
+  hierarchical,
+  emptyText = "No categories yet."
+}) {
+  const store = useAssociationsStore();
+  const notifier = useNotifier();
+  const [open, setOpen] = (0, import_react19.useState)(false);
+  const [creating, setCreating] = (0, import_react19.useState)(false);
+  const [writing, setWriting] = (0, import_react19.useState)(false);
+  const [search, setSearch] = (0, import_react19.useState)("");
+  const [createParentId, setCreateParentId] = (0, import_react19.useState)(ROOT_PARENT2);
+  const {
+    categories,
+    create: createCategory,
+    reload: reloadCategories
+  } = useCategories({ dimension });
+  const { edges, setTargets } = useAssociations({
+    type: entityType,
+    id: entityId
+  });
+  const hierarchy = buildCategoryHierarchy(categories);
+  const showHierarchy = hierarchical ?? hierarchy.hasHierarchy;
+  const hierarchyById = new Map(
+    hierarchy.items.map((item) => [item.category.id, item])
+  );
+  const selectedIds = new Set(
+    edges.filter(
+      (e) => e.direction === "outgoing" && e.otherType === "category" && e.role === edgeRole
+    ).map((e) => e.otherId)
+  );
+  const selected = categories.filter((c) => selectedIds.has(c.id));
+  const toggle = async (categoryId) => {
+    if (writing) return;
+    setWriting(true);
+    try {
+      const next = selectedIds.has(categoryId) ? [...selectedIds].filter((id) => id !== categoryId) : [...selectedIds, categoryId];
+      const res = await setTargets({
+        targetType: "category",
+        targetIds: next,
+        ...orgId != null ? { orgId } : {},
+        role: edgeRole
+      });
+      if (!res.ok) {
+        store.errorSink({
+          code: "category_tag_set_targets_failed",
+          message: "[CategoryTagPicker] setTargets failed",
+          context: { entityType, entityId, edgeRole, error: res.error }
+        });
+        notifier.error(res.error ?? "Could not update categories");
+      }
+    } finally {
+      setWriting(false);
+    }
+  };
+  const createAndAttach = async () => {
+    const name = search.trim();
+    if (!name) return;
+    setCreating(true);
+    try {
+      let resolvedOrgId = orgId ?? null;
+      if (!resolvedOrgId && store.identity.ensureOrgId) {
+        try {
+          resolvedOrgId = await store.identity.ensureOrgId();
+        } catch (e) {
+          store.errorSink({
+            code: "ensure_org_failed",
+            message: "[CategoryTagPicker] identity.ensureOrgId threw",
+            context: { error: e instanceof Error ? e.message : String(e) }
+          });
+        }
+      }
+      if (!resolvedOrgId) {
+        store.errorSink({
+          code: "ensure_org_missing",
+          message: "[CategoryTagPicker] no org for the created category \u2014 pass `orgId` or bind `identity.ensureOrgId` on the store config",
+          context: { entityType, entityId, dimension }
+        });
+        notifier.error(
+          "Could not create the category \u2014 no organization is selected"
+        );
+        return;
+      }
+      const parentId = showHierarchy && createParentId !== ROOT_PARENT2 ? createParentId : null;
+      const createRes = await createCategory({
+        name,
+        orgId: resolvedOrgId,
+        parentId
+      });
+      if (!createRes.ok || !createRes.id) {
+        store.errorSink({
+          code: "category_tag_create_failed",
+          message: "[CategoryTagPicker] create failed",
+          context: { dimension, error: createRes.error }
+        });
+        notifier.error(createRes.error ?? "Could not create the category");
+        return;
+      }
+      await reloadCategories();
+      await toggle(createRes.id);
+      setSearch("");
+      setCreateParentId(ROOT_PARENT2);
+    } finally {
+      setCreating(false);
+    }
+  };
+  const filtered = categories.filter(
+    (c) => c.name.toLowerCase().includes(search.trim().toLowerCase())
+  );
+  const filteredHierarchy = hierarchy.items.filter(
+    (item) => item.displayName.toLowerCase().includes(search.trim().toLowerCase())
+  );
+  const exactMatch = categories.some(
+    (c) => c.name.toLowerCase() === search.trim().toLowerCase()
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-wrap items-center gap-1.5", children: [
+    selected.map((c) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+      import_design_system12.Badge,
+      {
+        variant: "secondary",
+        className: "gap-1 pr-1 text-xs font-medium",
+        children: [
+          showHierarchy ? hierarchyById.get(c.id)?.displayName ?? c.name : c.name,
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => void toggle(c.id),
+              className: "ml-0.5 rounded-full p-0.5 hover:bg-muted-foreground/20",
+              "aria-label": `Remove ${c.name}`,
+              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(XIcon, { className: "h-2.5 w-2.5" })
+            }
+          )
+        ]
+      },
+      c.id
+    )),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_design_system12.Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system12.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        import_design_system12.Button,
+        {
+          variant: "outline",
+          size: "sm",
+          className: "h-7 gap-1 px-2 text-xs",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: "h-3.5 w-3.5" }),
+            selected.length === 0 ? addLabel : "Edit",
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChevronsUpDownIcon, { className: "h-3 w-3 opacity-50" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system12.PopoverContent, { className: "w-56 p-0", align: "start", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_design_system12.Command, { shouldFilter: false, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          import_design_system12.CommandInput,
+          {
+            placeholder: allowCreate ? "Search or create..." : "Search...",
+            value: search,
+            onValueChange: setSearch
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_design_system12.CommandList, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system12.CommandEmpty, { className: "px-2 py-3 text-xs text-muted-foreground", children: search.trim() ? "No match." : emptyText }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system12.CommandGroup, { children: showHierarchy ? filteredHierarchy.map(({ category, depth, parent }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+            import_design_system12.CommandItem,
+            {
+              value: category.id,
+              keywords: parent ? [parent.name, category.name] : [],
+              onSelect: () => void toggle(category.id),
+              className: (0, import_design_system12.cn)("text-xs", depth === 1 && "pl-6"),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                  CheckIcon,
+                  {
+                    className: (0, import_design_system12.cn)(
+                      "mr-2 h-3.5 w-3.5",
+                      selectedIds.has(category.id) ? "opacity-100" : "opacity-0"
+                    )
+                  }
+                ),
+                depth === 1 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CornerDownRightIcon, { className: "mr-1.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" }) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: (0, import_design_system12.cn)(depth === 0 && "font-medium"), children: category.name })
+              ]
+            },
+            category.id
+          )) : filtered.map((c) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+            import_design_system12.CommandItem,
+            {
+              value: c.id,
+              onSelect: () => void toggle(c.id),
+              className: "text-xs",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                  CheckIcon,
+                  {
+                    className: (0, import_design_system12.cn)(
+                      "mr-2 h-3.5 w-3.5",
+                      selectedIds.has(c.id) ? "opacity-100" : "opacity-0"
+                    )
+                  }
+                ),
+                c.name
+              ]
+            },
+            c.id
+          )) }),
+          allowCreate && search.trim() && !exactMatch ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_design_system12.CommandGroup, { children: [
+            showHierarchy ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "space-y-1.5 px-2 pb-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-[11px] font-medium text-muted-foreground", children: "Place in" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+                import_design_system12.Select,
+                {
+                  value: createParentId,
+                  onValueChange: setCreateParentId,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system12.SelectTrigger, { size: "sm", className: "bg-background", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system12.SelectValue, {}) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_design_system12.SelectContent, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system12.SelectItem, { value: ROOT_PARENT2, children: "Top level" }),
+                      hierarchy.roots.map((root) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system12.SelectItem, { value: root.id, children: root.name }, root.id))
+                    ] })
+                  ]
+                }
+              )
+            ] }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+              import_design_system12.CommandItem,
+              {
+                value: `__create__${search}`,
+                onSelect: () => void createAndAttach(),
+                disabled: creating,
+                className: "text-xs text-primary",
+                children: [
+                  creating ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SpinnerIcon, { className: "mr-2 h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: "mr-2 h-3.5 w-3.5" }),
+                  "Create \u201C",
+                  search.trim(),
+                  "\u201D"
+                ]
+              }
+            )
+          ] }) : null
+        ] })
+      ] }) })
+    ] })
+  ] });
+}
 //# sourceMappingURL=index.cjs.map