@arbidocs/react 0.5.111 → 0.5.112

package/dist/model-connections.js

@@ -0,0 +1,58 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useArbi } from "./useArbi.js";
+import { useArbiSession } from "./session/signed-in.js";
+import { arbiQueryKeys } from "./query-keys.js";
+function useModelConnections() {
+  const arbi = useArbi();
+  const userId = useArbiSession().user?.external_id ?? void 0;
+  return useQuery({
+    queryKey: arbiQueryKeys.modelConnections(userId),
+    queryFn: () => arbi.modelConnections.list(),
+    enabled: arbi.isLoggedIn
+  });
+}
+function useDirectModelUsage() {
+  const arbi = useArbi();
+  const userId = useArbiSession().user?.external_id ?? void 0;
+  return useQuery({
+    queryKey: arbiQueryKeys.directModelUsage(userId),
+    queryFn: () => arbi.modelConnections.usage(),
+    enabled: arbi.isLoggedIn
+  });
+}
+function useRefreshModelConnections() {
+  const qc = useQueryClient();
+  const userId = useArbiSession().user?.external_id ?? void 0;
+  return async () => {
+    await qc.invalidateQueries({ queryKey: arbiQueryKeys.modelConnections(userId) });
+    await qc.invalidateQueries({ queryKey: arbiQueryKeys.availableModels() });
+  };
+}
+function useSaveModelConnection() {
+  const arbi = useArbi();
+  const refresh = useRefreshModelConnections();
+  return useMutation({
+    mutationFn: (input) => arbi.modelConnections.save(input),
+    onSuccess: refresh
+  });
+}
+function useRemoveModelConnection() {
+  const arbi = useArbi();
+  const refresh = useRefreshModelConnections();
+  return useMutation({
+    mutationFn: (id) => arbi.modelConnections.remove(id),
+    onSuccess: refresh
+  });
+}
+function useUnlockModelConnections() {
+  const arbi = useArbi();
+  return useMutation({ mutationFn: () => arbi.modelConnections.unlock() });
+}
+export {
+  useDirectModelUsage,
+  useModelConnections,
+  useRemoveModelConnection,
+  useSaveModelConnection,
+  useUnlockModelConnections
+};
+//# sourceMappingURL=model-connections.js.map

package/dist/model-connections.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/model-connections.ts"],
+  "sourcesContent": ["/**\n * Model connections over the SDK (`arbi.modelConnections`): the main agent's OpenAI-compatible\n * endpoints (the box's and the user's own), the user's direct model usage, and the unlock that lets\n * this session use the personal keys. Keyed per user; a save or a removal also refreshes the\n * available models (a connection's models join the picker).\n */\n\nimport { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'\nimport type { PersonalConnectionInput } from '@arbidocs/sdk/browser'\nimport { useArbi } from './useArbi'\nimport { useArbiSession } from './session/signed-in'\nimport { arbiQueryKeys } from './query-keys'\n\n/** The box's model connections and the user's own. */\nexport function useModelConnections() {\n  const arbi = useArbi()\n  const userId = useArbiSession().user?.external_id ?? undefined\n  return useQuery({\n    queryKey: arbiQueryKeys.modelConnections(userId),\n    queryFn: () => arbi.modelConnections.list(),\n    enabled: arbi.isLoggedIn,\n  })\n}\n\n/** The user's direct model calls of the last 30 days (billed by their provider). */\nexport function useDirectModelUsage() {\n  const arbi = useArbi()\n  const userId = useArbiSession().user?.external_id ?? undefined\n  return useQuery({\n    queryKey: arbiQueryKeys.directModelUsage(userId),\n    queryFn: () => arbi.modelConnections.usage(),\n    enabled: arbi.isLoggedIn,\n  })\n}\n\n/** After a write: the connections and the models the picker offers are read again. */\nfunction useRefreshModelConnections() {\n  const qc = useQueryClient()\n  const userId = useArbiSession().user?.external_id ?? undefined\n  return async () => {\n    await qc.invalidateQueries({ queryKey: arbiQueryKeys.modelConnections(userId) })\n    await qc.invalidateQueries({ queryKey: arbiQueryKeys.availableModels() })\n  }\n}\n\n/** Add a personal connection, or replace `id`'s; its key is sealed and unlocked on this session. */\nexport function useSaveModelConnection() {\n  const arbi = useArbi()\n  const refresh = useRefreshModelConnections()\n  return useMutation({\n    mutationFn: (input: PersonalConnectionInput) => arbi.modelConnections.save(input),\n    onSuccess: refresh,\n  })\n}\n\nexport function useRemoveModelConnection() {\n  const arbi = useArbi()\n  const refresh = useRefreshModelConnections()\n  return useMutation({\n    mutationFn: (id: string) => arbi.modelConnections.remove(id),\n    onSuccess: refresh,\n  })\n}\n\n/** Let this session use the user's enabled personal keys. */\nexport function useUnlockModelConnections() {\n  const arbi = useArbi()\n  return useMutation({ mutationFn: () => arbi.modelConnections.unlock() })\n}\n"],
+  "mappings": "AAOA,SAAS,aAAa,UAAU,sBAAsB;AAEtD,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,qBAAqB;AAGvB,SAAS,sBAAsB;AACpC,QAAM,OAAO,QAAQ;AACrB,QAAM,SAAS,eAAe,EAAE,MAAM,eAAe;AACrD,SAAO,SAAS;AAAA,IACd,UAAU,cAAc,iBAAiB,MAAM;AAAA,IAC/C,SAAS,MAAM,KAAK,iBAAiB,KAAK;AAAA,IAC1C,SAAS,KAAK;AAAA,EAChB,CAAC;AACH;AAGO,SAAS,sBAAsB;AACpC,QAAM,OAAO,QAAQ;AACrB,QAAM,SAAS,eAAe,EAAE,MAAM,eAAe;AACrD,SAAO,SAAS;AAAA,IACd,UAAU,cAAc,iBAAiB,MAAM;AAAA,IAC/C,SAAS,MAAM,KAAK,iBAAiB,MAAM;AAAA,IAC3C,SAAS,KAAK;AAAA,EAChB,CAAC;AACH;AAGA,SAAS,6BAA6B;AACpC,QAAM,KAAK,eAAe;AAC1B,QAAM,SAAS,eAAe,EAAE,MAAM,eAAe;AACrD,SAAO,YAAY;AACjB,UAAM,GAAG,kBAAkB,EAAE,UAAU,cAAc,iBAAiB,MAAM,EAAE,CAAC;AAC/E,UAAM,GAAG,kBAAkB,EAAE,UAAU,cAAc,gBAAgB,EAAE,CAAC;AAAA,EAC1E;AACF;AAGO,SAAS,yBAAyB;AACvC,QAAM,OAAO,QAAQ;AACrB,QAAM,UAAU,2BAA2B;AAC3C,SAAO,YAAY;AAAA,IACjB,YAAY,CAAC,UAAmC,KAAK,iBAAiB,KAAK,KAAK;AAAA,IAChF,WAAW;AAAA,EACb,CAAC;AACH;AAEO,SAAS,2BAA2B;AACzC,QAAM,OAAO,QAAQ;AACrB,QAAM,UAAU,2BAA2B;AAC3C,SAAO,YAAY;AAAA,IACjB,YAAY,CAAC,OAAe,KAAK,iBAAiB,OAAO,EAAE;AAAA,IAC3D,WAAW;AAAA,EACb,CAAC;AACH;AAGO,SAAS,4BAA4B;AAC1C,QAAM,OAAO,QAAQ;AACrB,SAAO,YAAY,EAAE,YAAY,MAAM,KAAK,iBAAiB,OAAO,EAAE,CAAC;AACzE;",
+  "names": []
+}

package/dist/notifications/ActivityFeed.js

@@ -0,0 +1,70 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Activity } from "lucide-react";
+import { useActivity } from "../hooks.js";
+import { cn } from "../lib/utils.js";
+import { describeActivity } from "./activity-types.js";
+function formatRelative(iso) {
+  const then = new Date(iso).getTime();
+  if (Number.isNaN(then)) return "";
+  const secs = Math.round((Date.now() - then) / 1e3);
+  if (secs < 45) return "just now";
+  const mins = Math.round(secs / 60);
+  if (mins < 60) return `${mins}m`;
+  const hours = Math.round(mins / 60);
+  if (hours < 24) return `${hours}h`;
+  const days = Math.round(hours / 24);
+  if (days < 7) return `${days}d`;
+  return new Date(iso).toLocaleDateString();
+}
+function ActivityFeed({
+  limit = 20,
+  className,
+  emptyLabel = "No recent activity",
+  enabled,
+  "data-testid": testId = "activity-feed"
+}) {
+  const { data, isLoading, isError } = useActivity({ limit, enabled });
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { className: cn("space-y-2", className), "data-testid": testId, "aria-busy": "true", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 py-1.5", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-4 w-4 shrink-0 animate-pulse rounded-full bg-muted" }),
+      /* @__PURE__ */ jsx("div", { className: "h-3 flex-1 animate-pulse rounded bg-muted" })
+    ] }, i)) });
+  }
+  if (isError) {
+    return /* @__PURE__ */ jsx("div", { className: cn("text-sm text-muted-foreground", className), "data-testid": testId, children: "Couldn\u2019t load activity." });
+  }
+  const items = data ?? [];
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("flex items-center gap-2 text-sm text-muted-foreground", className),
+        "data-testid": testId,
+        children: [
+          /* @__PURE__ */ jsx(Activity, { className: "h-4 w-4 shrink-0" }),
+          /* @__PURE__ */ jsx("span", { children: emptyLabel })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("ul", { className: cn("divide-y divide-border", className), "data-testid": testId, children: items.map((item) => {
+    const desc = describeActivity(item.content);
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: "flex items-center gap-3 py-2",
+        "data-testid": "activity-feed-item",
+        children: [
+          /* @__PURE__ */ jsx(desc.Icon, { className: cn("h-4 w-4 shrink-0", desc.iconClassName) }),
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm text-foreground", children: desc.title }),
+          /* @__PURE__ */ jsx("time", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", children: formatRelative(item.created_at) })
+        ]
+      },
+      item.external_id
+    );
+  }) });
+}
+export {
+  ActivityFeed
+};
+//# sourceMappingURL=ActivityFeed.js.map

package/dist/notifications/ActivityFeed.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/notifications/ActivityFeed.tsx"],
+  "sourcesContent": ["/**\n * ActivityFeed \u2014 a presentational, self-fetching list of the current user's\n * durable activity (the to-self \"you opened a workspace / processed a document\"\n * log). Renders each line via the shared {@link describeActivity} descriptor, so\n * the glyph/label knowledge stays in one place and any app (clarum's dashboard,\n * a monolith panel) can drop this in.\n *\n * Pure semantic Tailwind tokens; no store, no app `@/` imports. Data comes from\n * the shared {@link useActivity} query.\n */\n\nimport { Activity } from 'lucide-react'\nimport { useActivity } from '../hooks'\nimport { cn } from '../lib/utils'\nimport { describeActivity } from './activity-types'\n\n/** Relative time like \"just now\", \"3m\", \"2h\", \"5d\"; falls back to a date. */\nfunction formatRelative(iso: string): string {\n  const then = new Date(iso).getTime()\n  if (Number.isNaN(then)) return ''\n  const secs = Math.round((Date.now() - then) / 1000)\n  if (secs < 45) return 'just now'\n  const mins = Math.round(secs / 60)\n  if (mins < 60) return `${mins}m`\n  const hours = Math.round(mins / 60)\n  if (hours < 24) return `${hours}h`\n  const days = Math.round(hours / 24)\n  if (days < 7) return `${days}d`\n  return new Date(iso).toLocaleDateString()\n}\n\nexport interface ActivityFeedProps {\n  /** Max entries to fetch/show. Default 20. */\n  limit?: number\n  /** Extra classes for the outer container. */\n  className?: string\n  /** Message shown when there's no activity yet. */\n  emptyLabel?: string\n  /** Whether to fetch \u2014 defaults to enabled when logged in. */\n  enabled?: boolean\n  'data-testid'?: string\n}\n\n/**\n * Renders the activity feed. Handles its own loading/empty/error states so a\n * consumer can place it directly (e.g. inside a dashboard card).\n */\nexport function ActivityFeed({\n  limit = 20,\n  className,\n  emptyLabel = 'No recent activity',\n  enabled,\n  'data-testid': testId = 'activity-feed',\n}: ActivityFeedProps) {\n  const { data, isLoading, isError } = useActivity({ limit, enabled })\n\n  if (isLoading) {\n    return (\n      <div className={cn('space-y-2', className)} data-testid={testId} aria-busy=\"true\">\n        {Array.from({ length: 3 }).map((_, i) => (\n          <div key={i} className=\"flex items-center gap-3 py-1.5\">\n            <div className=\"h-4 w-4 shrink-0 animate-pulse rounded-full bg-muted\" />\n            <div className=\"h-3 flex-1 animate-pulse rounded bg-muted\" />\n          </div>\n        ))}\n      </div>\n    )\n  }\n\n  if (isError) {\n    return (\n      <div className={cn('text-sm text-muted-foreground', className)} data-testid={testId}>\n        Couldn\u2019t load activity.\n      </div>\n    )\n  }\n\n  const items = data ?? []\n  if (items.length === 0) {\n    return (\n      <div\n        className={cn('flex items-center gap-2 text-sm text-muted-foreground', className)}\n        data-testid={testId}\n      >\n        <Activity className=\"h-4 w-4 shrink-0\" />\n        <span>{emptyLabel}</span>\n      </div>\n    )\n  }\n\n  return (\n    <ul className={cn('divide-y divide-border', className)} data-testid={testId}>\n      {items.map((item) => {\n        const desc = describeActivity(item.content)\n        return (\n          <li\n            key={item.external_id}\n            className=\"flex items-center gap-3 py-2\"\n            data-testid=\"activity-feed-item\"\n          >\n            <desc.Icon className={cn('h-4 w-4 shrink-0', desc.iconClassName)} />\n            <span className=\"min-w-0 flex-1 truncate text-sm text-foreground\">{desc.title}</span>\n            <time className=\"shrink-0 text-xs tabular-nums text-muted-foreground\">\n              {formatRelative(item.created_at)}\n            </time>\n          </li>\n        )\n      })}\n    </ul>\n  )\n}\n"],
+  "mappings": "AA4DU,SACE,KADF;AAjDV,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,UAAU;AACnB,SAAS,wBAAwB;AAGjC,SAAS,eAAe,KAAqB;AAC3C,QAAM,OAAO,IAAI,KAAK,GAAG,EAAE,QAAQ;AACnC,MAAI,OAAO,MAAM,IAAI,EAAG,QAAO;AAC/B,QAAM,OAAO,KAAK,OAAO,KAAK,IAAI,IAAI,QAAQ,GAAI;AAClD,MAAI,OAAO,GAAI,QAAO;AACtB,QAAM,OAAO,KAAK,MAAM,OAAO,EAAE;AACjC,MAAI,OAAO,GAAI,QAAO,GAAG,IAAI;AAC7B,QAAM,QAAQ,KAAK,MAAM,OAAO,EAAE;AAClC,MAAI,QAAQ,GAAI,QAAO,GAAG,KAAK;AAC/B,QAAM,OAAO,KAAK,MAAM,QAAQ,EAAE;AAClC,MAAI,OAAO,EAAG,QAAO,GAAG,IAAI;AAC5B,SAAO,IAAI,KAAK,GAAG,EAAE,mBAAmB;AAC1C;AAkBO,SAAS,aAAa;AAAA,EAC3B,QAAQ;AAAA,EACR;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,eAAe,SAAS;AAC1B,GAAsB;AACpB,QAAM,EAAE,MAAM,WAAW,QAAQ,IAAI,YAAY,EAAE,OAAO,QAAQ,CAAC;AAEnE,MAAI,WAAW;AACb,WACE,oBAAC,SAAI,WAAW,GAAG,aAAa,SAAS,GAAG,eAAa,QAAQ,aAAU,QACxE,gBAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,MACjC,qBAAC,SAAY,WAAU,kCACrB;AAAA,0BAAC,SAAI,WAAU,wDAAuD;AAAA,MACtE,oBAAC,SAAI,WAAU,6CAA4C;AAAA,SAFnD,CAGV,CACD,GACH;AAAA,EAEJ;AAEA,MAAI,SAAS;AACX,WACE,oBAAC,SAAI,WAAW,GAAG,iCAAiC,SAAS,GAAG,eAAa,QAAQ,0CAErF;AAAA,EAEJ;AAEA,QAAM,QAAQ,QAAQ,CAAC;AACvB,MAAI,MAAM,WAAW,GAAG;AACtB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,GAAG,yDAAyD,SAAS;AAAA,QAChF,eAAa;AAAA,QAEb;AAAA,8BAAC,YAAS,WAAU,oBAAmB;AAAA,UACvC,oBAAC,UAAM,sBAAW;AAAA;AAAA;AAAA,IACpB;AAAA,EAEJ;AAEA,SACE,oBAAC,QAAG,WAAW,GAAG,0BAA0B,SAAS,GAAG,eAAa,QAClE,gBAAM,IAAI,CAAC,SAAS;AACnB,UAAM,OAAO,iBAAiB,KAAK,OAAO;AAC1C,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,WAAU;AAAA,QACV,eAAY;AAAA,QAEZ;AAAA,8BAAC,KAAK,MAAL,EAAU,WAAW,GAAG,oBAAoB,KAAK,aAAa,GAAG;AAAA,UAClE,oBAAC,UAAK,WAAU,mDAAmD,eAAK,OAAM;AAAA,UAC9E,oBAAC,UAAK,WAAU,uDACb,yBAAe,KAAK,UAAU,GACjC;AAAA;AAAA;AAAA,MARK,KAAK;AAAA,IASZ;AAAA,EAEJ,CAAC,GACH;AAEJ;",
+  "names": []
+}

package/dist/notifications/NotificationBell.js

@@ -0,0 +1,200 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import {
+  Bell,
+  BellOff,
+  CheckCheck,
+  CheckCircle2,
+  AlertTriangle,
+  XCircle,
+  Info,
+  X
+} from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem
+} from "../ui/dropdown-menu.js";
+import { ScrollArea } from "../ui/scroll-area.js";
+import { cn } from "../lib/utils.js";
+import { formatRelativeTime } from "../lib/format-relative-time.js";
+import {
+  useNotify,
+  selectUnread,
+  DEFAULT_NOTIFY_TONE
+} from "./notify-store.js";
+const GLYPH = {
+  success: CheckCircle2,
+  error: XCircle,
+  warning: AlertTriangle,
+  info: Info
+};
+const BELL_LIMIT = 100;
+function NotificationBell({
+  renderTrigger,
+  onNavigate,
+  onSelectNotification,
+  onMarkRead,
+  onMarkAllRead,
+  showMuteToggle = false,
+  toneClassNames,
+  emptyText = "You're all caught up.",
+  onViewAll,
+  viewAllLabel = "View all",
+  testId = "notifications",
+  side = "bottom",
+  align = "end"
+}) {
+  const [open, setOpen] = useState(false);
+  const notifications = useNotify((s) => s.notifications);
+  const unread = useNotify(selectUnread);
+  const markAllRead = useNotify((s) => s.markAllRead);
+  const markRead = useNotify((s) => s.markRead);
+  const muted = useNotify((s) => s.muted);
+  const setMuted = useNotify((s) => s.setMuted);
+  const tone = (v) => toneClassNames?.[v] ?? DEFAULT_NOTIFY_TONE[v];
+  const visible = notifications.filter((n) => !n.ambient).slice(0, BELL_LIMIT);
+  return /* @__PURE__ */ jsxs(DropdownMenu, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: renderTrigger ? renderTrigger({
+      unread,
+      ariaLabel: `Notifications${unread ? `, ${unread} unread` : ""}`,
+      testId
+    }) : /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: "relative flex size-9 pointer-coarse:size-11 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+        "data-testid": testId,
+        "aria-label": `Notifications${unread ? `, ${unread} unread` : ""}`,
+        title: "Notifications",
+        children: [
+          /* @__PURE__ */ jsx(Bell, { className: "size-5" }),
+          unread > 0 && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute -right-0.5 -top-0.5 flex min-w-4 items-center justify-center rounded-full bg-primary px-1 text-xs font-semibold leading-4 text-primary-foreground",
+              "data-testid": `${testId}-badge`,
+              children: unread > 9 ? "9+" : unread
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      DropdownMenuContent,
+      {
+        align,
+        side,
+        sideOffset: 8,
+        collisionPadding: 12,
+        className: "w-60 rounded-lg border-border/60 p-0 shadow-lg pointer-coarse:w-88",
+        "data-testid": `${testId}-panel`,
+        "data-topbar-popover": "",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-border px-3.5 py-2.5 pointer-coarse:py-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: "Notifications" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pointer-coarse:gap-1", children: [
+              unread > 0 && /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => {
+                    markAllRead();
+                    onMarkAllRead?.();
+                  },
+                  className: "flex items-center gap-1 text-xs font-medium text-primary transition-colors hover:opacity-80 pointer-coarse:min-h-11 pointer-coarse:px-2",
+                  "data-testid": `${testId}-mark-all`,
+                  children: [
+                    /* @__PURE__ */ jsx(CheckCheck, { className: "size-3.5" }),
+                    " Mark all read"
+                  ]
+                }
+              ),
+              showMuteToggle && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setMuted(!muted),
+                  "aria-pressed": muted,
+                  title: muted ? "Unmute notifications" : "Mute notifications",
+                  "aria-label": muted ? "Unmute notifications" : "Mute notifications",
+                  className: cn(
+                    "flex size-6 shrink-0 items-center justify-center rounded-md transition-colors hover:bg-accent pointer-coarse:size-11",
+                    muted ? "text-foreground" : "text-muted-foreground hover:text-foreground"
+                  ),
+                  "data-testid": `${testId}-mute`,
+                  children: /* @__PURE__ */ jsx(BellOff, { className: "size-3.5" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                DropdownMenuItem,
+                {
+                  className: "flex size-6 shrink-0 items-center justify-center rounded-md p-0 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus:bg-accent pointer-coarse:size-11",
+                  "aria-label": "Close notifications",
+                  "data-testid": `${testId}-close`,
+                  children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+                }
+              )
+            ] })
+          ] }),
+          muted && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "border-b border-border/60 bg-amber-500/10 px-3.5 py-1.5 text-xs text-muted-foreground",
+              "data-testid": `${testId}-muted-note`,
+              children: "Toasts are muted \u2014 everything still lands here."
+            }
+          ),
+          visible.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3.5 py-10 text-center text-sm text-muted-foreground", children: emptyText }) : /* @__PURE__ */ jsx(ScrollArea, { className: "max-h-[380px]", children: /* @__PURE__ */ jsx("ul", { "data-testid": `${testId}-list`, children: visible.map((n) => {
+            const Glyph = GLYPH[n.variant];
+            return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => {
+                  markRead(n.id);
+                  if (!n.read) onMarkRead?.(n.id);
+                  setOpen(false);
+                  if (onSelectNotification) {
+                    onSelectNotification(n);
+                    return;
+                  }
+                  if (n.onSelect) n.onSelect();
+                  else if (n.href) onNavigate?.(n.href);
+                },
+                className: cn(
+                  "flex w-full items-start gap-3 border-b border-border/60 px-3.5 py-3 text-left transition-colors hover:bg-accent",
+                  !n.read && "bg-accent/40"
+                ),
+                "data-testid": `${testId}-item`,
+                "data-notification-id": n.id,
+                children: [
+                  /* @__PURE__ */ jsx(Glyph, { className: cn("mt-0.5 size-4 shrink-0", tone(n.variant)) }),
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium leading-snug text-foreground", children: n.title }),
+                    n.description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 line-clamp-2 text-xs leading-relaxed text-muted-foreground", children: n.description }),
+                    /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground/80", children: formatRelativeTime(new Date(n.ts).toISOString()) })
+                  ] }),
+                  (n.onSelect || n.href) && /* @__PURE__ */ jsx("span", { className: "shrink-0 self-center rounded-md bg-primary/10 px-2 py-1 text-xs font-medium text-primary", children: n.actionLabel ?? "Open" }),
+                  !n.read && /* @__PURE__ */ jsx("span", { className: "mt-1.5 size-2 shrink-0 rounded-full bg-primary" })
+                ]
+              }
+            ) }, n.id);
+          }) }) }),
+          onViewAll && // A real menu item, not a bare button: selecting it must CLOSE the
+          // dropdown on its way to the full surface.
+          /* @__PURE__ */ jsx(
+            DropdownMenuItem,
+            {
+              onClick: onViewAll,
+              className: "justify-center rounded-none border-t border-border px-3.5 py-2.5 text-xs font-medium text-primary focus:text-primary pointer-coarse:min-h-11",
+              "data-testid": `${testId}-view-all`,
+              children: viewAllLabel
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  NotificationBell
+};
+//# sourceMappingURL=NotificationBell.js.map

package/dist/notifications/NotificationBell.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/notifications/NotificationBell.tsx"],
+  "sourcesContent": ["/**\n * NotificationBell \u2014 the topbar notification centre: a bell with an unread badge\n * that opens a dropdown of recorded entries (newest first) with an unread dot,\n * relative time and optional deep-link. \"Mark all read\" clears the badge. Backed\n * by the shared {@link useNotify} store (the same one the <Toaster/> renders).\n *\n * Firm-agnostic: navigation is a callback (`onNavigate`), styling tracks semantic\n * tokens, and per-variant glyph colours are overridable via `toneClassNames`.\n */\nimport { useState, type ReactElement } from 'react'\nimport {\n  Bell,\n  BellOff,\n  CheckCheck,\n  CheckCircle2,\n  AlertTriangle,\n  XCircle,\n  Info,\n  X,\n} from 'lucide-react'\nimport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n} from '../ui/dropdown-menu'\nimport { ScrollArea } from '../ui/scroll-area'\nimport { cn } from '../lib/utils'\nimport { formatRelativeTime } from '../lib/format-relative-time'\nimport {\n  useNotify,\n  selectUnread,\n  DEFAULT_NOTIFY_TONE,\n  type NotifyVariant,\n  type AppNotification,\n} from './notify-store'\n\nconst GLYPH: Record<NotifyVariant, typeof Info> = {\n  success: CheckCircle2,\n  error: XCircle,\n  warning: AlertTriangle,\n  info: Info,\n}\n\n/** Entries the panel lists, newest first. */\nconst BELL_LIMIT = 100\n\n/** What a custom bell trigger needs to render itself. */\nexport interface NotificationBellTriggerState {\n  /** Unread count (0 when none). */\n  unread: number\n  /** Accessible name, including the count: \"Notifications, 2 unread\". */\n  ariaLabel: string\n  testId: string\n}\n\nexport interface NotificationBellProps {\n  /**\n   * Replaces the default icon button with the host's own trigger (for example a labelled sidebar\n   * row). It must forward its ref and rest props: it is mounted as the dropdown trigger.\n   */\n  renderTrigger?: (state: NotificationBellTriggerState) => ReactElement\n  /** Called with an entry's `href` when it's clicked (e.g. router navigate). */\n  onNavigate?: (href: string) => void\n  /** Open this entry in the host notification centre instead of following its link. */\n  onSelectNotification?: (notification: AppNotification) => void\n  /** Called after an entry is locally marked read \u2014 the hook for a backend\n   *  bridge to propagate read state upstream (filter by the ids it owns). */\n  onMarkRead?: (id: string) => void\n  /** Called after \"Mark all read\" \u2014 same upstream-propagation hook. */\n  onMarkAllRead?: () => void\n  /** Show the store's toast mute switch in the header \u2014 the bell is where notification\n   *  behaviour is controlled. */\n  showMuteToggle?: boolean\n  /** Override per-variant glyph colours (e.g. brand emerald for success). */\n  toneClassNames?: Partial<Record<NotifyVariant, string>>\n  emptyText?: string\n  /** Footer link to the app's full notification surface. Omit to hide. */\n  onViewAll?: () => void\n  viewAllLabel?: string\n  testId?: string\n  /** Where the panel opens relative to the bell (a sidebar-footer bell opens upward). */\n  side?: 'top' | 'right' | 'bottom' | 'left'\n  align?: 'start' | 'center' | 'end'\n}\n\nexport function NotificationBell({\n  renderTrigger,\n  onNavigate,\n  onSelectNotification,\n  onMarkRead,\n  onMarkAllRead,\n  showMuteToggle = false,\n  toneClassNames,\n  emptyText = \"You're all caught up.\",\n  onViewAll,\n  viewAllLabel = 'View all',\n  testId = 'notifications',\n  side = 'bottom',\n  align = 'end',\n}: NotificationBellProps) {\n  const [open, setOpen] = useState(false)\n  const notifications = useNotify((s) => s.notifications)\n  const unread = useNotify(selectUnread)\n  const markAllRead = useNotify((s) => s.markAllRead)\n  const markRead = useNotify((s) => s.markRead)\n  const muted = useNotify((s) => s.muted)\n  const setMuted = useNotify((s) => s.setMuted)\n  const tone = (v: NotifyVariant) => toneClassNames?.[v] ?? DEFAULT_NOTIFY_TONE[v]\n\n  // Ambient entries (routine session activity \u2014 \"Opening workspace\u2026\") are kept\n  // for the log but never surfaced in the bell panel: they never badge and are\n  // always filtered out here. The panel is the recent history; a host's\n  // notification page (`onViewAll`) holds the rest.\n  const visible = notifications.filter((n) => !n.ambient).slice(0, BELL_LIMIT)\n\n  return (\n    <DropdownMenu open={open} onOpenChange={setOpen}>\n      <DropdownMenuTrigger asChild>\n        {renderTrigger ? (\n          renderTrigger({\n            unread,\n            ariaLabel: `Notifications${unread ? `, ${unread} unread` : ''}`,\n            testId,\n          })\n        ) : (\n          <button\n            className=\"relative flex size-9 pointer-coarse:size-11 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground\"\n            data-testid={testId}\n            aria-label={`Notifications${unread ? `, ${unread} unread` : ''}`}\n            title=\"Notifications\"\n          >\n            <Bell className=\"size-5\" />\n            {unread > 0 && (\n              <span\n                className=\"absolute -right-0.5 -top-0.5 flex min-w-4 items-center justify-center rounded-full bg-primary px-1 text-xs font-semibold leading-4 text-primary-foreground\"\n                data-testid={`${testId}-badge`}\n              >\n                {unread > 9 ? '9+' : unread}\n              </span>\n            )}\n          </button>\n        )}\n      </DropdownMenuTrigger>\n      <DropdownMenuContent\n        align={align}\n        side={side}\n        sideOffset={8}\n        collisionPadding={12}\n        className=\"w-60 rounded-lg border-border/60 p-0 shadow-lg pointer-coarse:w-88\"\n        data-testid={`${testId}-panel`}\n        data-topbar-popover=\"\"\n      >\n        <div className=\"flex items-center justify-between gap-3 border-b border-border px-3.5 py-2.5 pointer-coarse:py-0\">\n          <p className=\"text-sm font-semibold text-foreground\">Notifications</p>\n          <div className=\"flex items-center gap-3 pointer-coarse:gap-1\">\n            {unread > 0 && (\n              <button\n                onClick={() => {\n                  markAllRead()\n                  onMarkAllRead?.()\n                }}\n                className=\"flex items-center gap-1 text-xs font-medium text-primary transition-colors hover:opacity-80 pointer-coarse:min-h-11 pointer-coarse:px-2\"\n                data-testid={`${testId}-mark-all`}\n              >\n                <CheckCheck className=\"size-3.5\" /> Mark all read\n              </button>\n            )}\n            {showMuteToggle && (\n              <button\n                onClick={() => setMuted(!muted)}\n                aria-pressed={muted}\n                title={muted ? 'Unmute notifications' : 'Mute notifications'}\n                aria-label={muted ? 'Unmute notifications' : 'Mute notifications'}\n                className={cn(\n                  'flex size-6 shrink-0 items-center justify-center rounded-md transition-colors hover:bg-accent pointer-coarse:size-11',\n                  muted ? 'text-foreground' : 'text-muted-foreground hover:text-foreground'\n                )}\n                data-testid={`${testId}-mute`}\n              >\n                <BellOff className=\"size-3.5\" />\n              </button>\n            )}\n            {/* Explicit close \u2014 the dropdown otherwise only dismisses via\n                tap-outside/Escape, which isn't discoverable on touch and (at\n                mobile width, see blocks.css) the panel covers most\n                of the screen so there's nothing to tap outside of. Radix\n                closes a DropdownMenu on any item select by default, so a\n                plain item with no other effect doubles as a close button. */}\n            <DropdownMenuItem\n              className=\"flex size-6 shrink-0 items-center justify-center rounded-md p-0 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus:bg-accent pointer-coarse:size-11\"\n              aria-label=\"Close notifications\"\n              data-testid={`${testId}-close`}\n            >\n              <X className=\"size-3.5\" />\n            </DropdownMenuItem>\n          </div>\n        </div>\n        {muted && (\n          <p\n            className=\"border-b border-border/60 bg-amber-500/10 px-3.5 py-1.5 text-xs text-muted-foreground\"\n            data-testid={`${testId}-muted-note`}\n          >\n            Toasts are muted \u2014 everything still lands here.\n          </p>\n        )}\n\n        {visible.length === 0 ? (\n          <div className=\"px-3.5 py-10 text-center text-sm text-muted-foreground\">{emptyText}</div>\n        ) : (\n          <ScrollArea className=\"max-h-[380px]\">\n            <ul data-testid={`${testId}-list`}>\n              {visible.map((n) => {\n                const Glyph = GLYPH[n.variant]\n                return (\n                  <li key={n.id}>\n                    <button\n                      onClick={() => {\n                        markRead(n.id)\n                        if (!n.read) onMarkRead?.(n.id)\n                        setOpen(false)\n                        if (onSelectNotification) {\n                          onSelectNotification(n)\n                          return\n                        }\n                        // The specific action wins over the generic deep link.\n                        if (n.onSelect) n.onSelect()\n                        else if (n.href) onNavigate?.(n.href)\n                      }}\n                      className={cn(\n                        'flex w-full items-start gap-3 border-b border-border/60 px-3.5 py-3 text-left transition-colors hover:bg-accent',\n                        !n.read && 'bg-accent/40'\n                      )}\n                      data-testid={`${testId}-item`}\n                      data-notification-id={n.id}\n                    >\n                      <Glyph className={cn('mt-0.5 size-4 shrink-0', tone(n.variant))} />\n                      <div className=\"min-w-0 flex-1\">\n                        <p className=\"text-sm font-medium leading-snug text-foreground\">\n                          {n.title}\n                        </p>\n                        {n.description && (\n                          <p className=\"mt-0.5 line-clamp-2 text-xs leading-relaxed text-muted-foreground\">\n                            {n.description}\n                          </p>\n                        )}\n                        <p className=\"mt-1 text-xs text-muted-foreground/80\">\n                          {formatRelativeTime(new Date(n.ts).toISOString())}\n                        </p>\n                      </div>\n                      {(n.onSelect || n.href) && (\n                        <span className=\"shrink-0 self-center rounded-md bg-primary/10 px-2 py-1 text-xs font-medium text-primary\">\n                          {n.actionLabel ?? 'Open'}\n                        </span>\n                      )}\n                      {!n.read && (\n                        <span className=\"mt-1.5 size-2 shrink-0 rounded-full bg-primary\" />\n                      )}\n                    </button>\n                  </li>\n                )\n              })}\n            </ul>\n          </ScrollArea>\n        )}\n        {onViewAll && (\n          // A real menu item, not a bare button: selecting it must CLOSE the\n          // dropdown on its way to the full surface.\n          <DropdownMenuItem\n            onClick={onViewAll}\n            className=\"justify-center rounded-none border-t border-border px-3.5 py-2.5 text-xs font-medium text-primary focus:text-primary pointer-coarse:min-h-11\"\n            data-testid={`${testId}-view-all`}\n          >\n            {viewAllLabel}\n          </DropdownMenuItem>\n        )}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/notifications/Toaster.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { Toaster as Sonner } from "sonner";
+const DEFAULT_TOAST_OPTIONS = {
+  classNames: {
+    toast: "group toast group-[.toaster]:bg-card group-[.toaster]:text-foreground group-[.toaster]:border group-[.toaster]:border-border group-[.toaster]:shadow-lg group-[.toaster]:rounded-lg",
+    description: "group-[.toast]:text-muted-foreground",
+    actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+    cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground"
+  }
+};
+function Toaster({ toastOptions, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Sonner,
+    {
+      className: "toaster group",
+      toastOptions: toastOptions ?? DEFAULT_TOAST_OPTIONS,
+      ...props
+    }
+  );
+}
+export {
+  Toaster
+};
+//# sourceMappingURL=Toaster.js.map

package/dist/notifications/Toaster.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/notifications/Toaster.tsx"],
+  "sourcesContent": ["/**\n * Toaster \u2014 the one shared toast surface, built on sonner (the mature engine:\n * stacking, swipe-to-dismiss, a11y, timing). Mount once near the app root; any\n * code then calls `notify.*(...)` (or the re-exported `toast`) from anywhere.\n *\n * Firm-agnostic: every sonner `ToasterProps` passes through, so a consumer sets\n * its own `position` / `theme` / `toastOptions`. The defaults give a neutral\n * shadcn-token card that both apps can override.\n */\nimport { Toaster as Sonner, type ToasterProps } from 'sonner'\n\nexport type { ToasterProps }\n\nconst DEFAULT_TOAST_OPTIONS: ToasterProps['toastOptions'] = {\n  classNames: {\n    toast:\n      'group toast group-[.toaster]:bg-card group-[.toaster]:text-foreground group-[.toaster]:border group-[.toaster]:border-border group-[.toaster]:shadow-lg group-[.toaster]:rounded-lg',\n    description: 'group-[.toast]:text-muted-foreground',\n    actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',\n    cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',\n  },\n}\n\nexport function Toaster({ toastOptions, ...props }: ToasterProps) {\n  return (\n    <Sonner\n      className=\"toaster group\"\n      toastOptions={toastOptions ?? DEFAULT_TOAST_OPTIONS}\n      {...props}\n    />\n  )\n}\n"],
+  "mappings": "AAyBI;AAhBJ,SAAS,WAAW,cAAiC;AAIrD,MAAM,wBAAsD;AAAA,EAC1D,YAAY;AAAA,IACV,OACE;AAAA,IACF,aAAa;AAAA,IACb,cAAc;AAAA,IACd,cAAc;AAAA,EAChB;AACF;AAEO,SAAS,QAAQ,EAAE,cAAc,GAAG,MAAM,GAAiB;AAChE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,cAAc,gBAAgB;AAAA,MAC7B,GAAG;AAAA;AAAA,EACN;AAEJ;",
+  "names": []
+}

package/dist/notifications/activity-types.js

@@ -0,0 +1,65 @@
+import {
+  Activity,
+  FileCheck2,
+  FileX2,
+  FolderPlus,
+  Pencil,
+  SquareArrowOutUpRight,
+  Trash2
+} from "lucide-react";
+import { getEntityIcon } from "../entities/registry.js";
+function parseActivityContent(content) {
+  if (!content) return null;
+  try {
+    const parsed = JSON.parse(content);
+    if (parsed && typeof parsed === "object" && typeof parsed.event === "string") {
+      return parsed;
+    }
+  } catch {
+  }
+  return null;
+}
+function str(v) {
+  return typeof v === "string" && v ? v : void 0;
+}
+function describeActivity(content) {
+  const parsed = typeof content === "string" || content == null ? parseActivityContent(content) : content;
+  if (!parsed) {
+    return { Icon: Activity, iconClassName: "text-muted-foreground", title: "Activity" };
+  }
+  const fileName = str(parsed.file_name);
+  switch (parsed.event) {
+    case "workspace_opened":
+      return {
+        Icon: SquareArrowOutUpRight,
+        iconClassName: "text-primary",
+        title: "Opened a workspace"
+      };
+    case "workspace_created":
+      return { Icon: FolderPlus, iconClassName: "text-green-600", title: "Created a workspace" };
+    case "workspace_updated":
+      return { Icon: Pencil, iconClassName: "text-primary", title: "Updated workspace settings" };
+    case "workspace_deleted":
+      return { Icon: Trash2, iconClassName: "text-red-500", title: "Deleted a workspace" };
+    case "document_processing": {
+      const failed = str(parsed.status) === "failed";
+      const noun = fileName ? `\u201C${fileName}\u201D` : "a document";
+      return failed ? { Icon: FileX2, iconClassName: "text-red-500", title: `Failed to process ${noun}` } : { Icon: FileCheck2, iconClassName: "text-green-600", title: `Processed ${noun}` };
+    }
+    default:
+      return {
+        Icon: parsed.workspace_ext_id ? getEntityIcon("WORKSPACE") : Activity,
+        iconClassName: "text-muted-foreground",
+        title: humaniseEvent(parsed.event)
+      };
+  }
+}
+function humaniseEvent(event) {
+  const words = event.replace(/[_-]+/g, " ").trim();
+  return words ? words.charAt(0).toUpperCase() + words.slice(1) : "Activity";
+}
+export {
+  describeActivity,
+  parseActivityContent
+};
+//# sourceMappingURL=activity-types.js.map

package/dist/notifications/activity-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/notifications/activity-types.ts"],
+  "sourcesContent": ["/**\n * Activity-event presentation \u2014 decodes the compact `{\"event\": ..., ...fields}`\n * JSON payload carried by durable `activity` notifications (recorded backend-side\n * by `log_activity`) into a glyph + human sentence.\n *\n * Distinct from `notification-types.ts`: that maps the notification *type* (a DM,\n * a workspace-membership change, a reward); this maps the *event* recorded on a\n * to-self activity line (\"opened a workspace\", \"processed a document\"). Entity\n * glyphs are sourced from the shared entity registry \u2014 one source of truth.\n */\n\nimport {\n  Activity,\n  FileCheck2,\n  FileX2,\n  FolderPlus,\n  Pencil,\n  SquareArrowOutUpRight,\n  Trash2,\n} from 'lucide-react'\nimport { getEntityIcon, type EntityIconComponent } from '../entities/registry'\n\n/** Parsed activity payload \u2014 always has `event`, plus event-specific fields. */\nexport interface ActivityContent {\n  event: string\n  [field: string]: unknown\n}\n\n/** Rendered description of an activity line. */\nexport interface ActivityDescription {\n  Icon: EntityIconComponent\n  /** Semantic Tailwind colour class for the glyph. */\n  iconClassName: string\n  /** Human-readable one-line summary of what happened. */\n  title: string\n}\n\n/** Parse an activity notification's `content` JSON into `{event, ...fields}`, or null. */\nexport function parseActivityContent(content: string | null | undefined): ActivityContent | null {\n  if (!content) return null\n  try {\n    const parsed = JSON.parse(content)\n    if (parsed && typeof parsed === 'object' && typeof parsed.event === 'string') {\n      return parsed as ActivityContent\n    }\n  } catch {\n    // Not JSON (e.g. a legacy plain-string activity line) \u2014 no structured event.\n  }\n  return null\n}\n\nfunction str(v: unknown): string | undefined {\n  return typeof v === 'string' && v ? v : undefined\n}\n\n/**\n * Describe an activity line for display. Accepts either the raw `content` string\n * or an already-parsed {@link ActivityContent}. Unknown/unparseable events fall\n * back to a generic activity glyph and a humanised event name.\n */\nexport function describeActivity(\n  content: string | ActivityContent | null | undefined\n): ActivityDescription {\n  const parsed =\n    typeof content === 'string' || content == null ? parseActivityContent(content) : content\n\n  if (!parsed) {\n    return { Icon: Activity, iconClassName: 'text-muted-foreground', title: 'Activity' }\n  }\n\n  const fileName = str(parsed.file_name)\n\n  switch (parsed.event) {\n    case 'workspace_opened':\n      return {\n        Icon: SquareArrowOutUpRight,\n        iconClassName: 'text-primary',\n        title: 'Opened a workspace',\n      }\n    case 'workspace_created':\n      return { Icon: FolderPlus, iconClassName: 'text-green-600', title: 'Created a workspace' }\n    case 'workspace_updated':\n      return { Icon: Pencil, iconClassName: 'text-primary', title: 'Updated workspace settings' }\n    case 'workspace_deleted':\n      return { Icon: Trash2, iconClassName: 'text-red-500', title: 'Deleted a workspace' }\n    case 'document_processing': {\n      const failed = str(parsed.status) === 'failed'\n      const noun = fileName ? `\u201C${fileName}\u201D` : 'a document'\n      return failed\n        ? { Icon: FileX2, iconClassName: 'text-red-500', title: `Failed to process ${noun}` }\n        : { Icon: FileCheck2, iconClassName: 'text-green-600', title: `Processed ${noun}` }\n    }\n    default:\n      // Humanise an unrecognised event slug: \"some_new_event\" \u2192 \"Some new event\".\n      return {\n        Icon: parsed.workspace_ext_id\n          ? (getEntityIcon('WORKSPACE') as EntityIconComponent)\n          : Activity,\n        iconClassName: 'text-muted-foreground',\n        title: humaniseEvent(parsed.event),\n      }\n  }\n}\n\n/** \"workspace_opened\" \u2192 \"Workspace opened\" \u2014 a readable fallback for new events. */\nfunction humaniseEvent(event: string): string {\n  const words = event.replace(/[_-]+/g, ' ').trim()\n  return words ? words.charAt(0).toUpperCase() + words.slice(1) : 'Activity'\n}\n"],
+  "mappings": "AAWA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,qBAA+C;AAkBjD,SAAS,qBAAqB,SAA4D;AAC/F,MAAI,CAAC,QAAS,QAAO;AACrB,MAAI;AACF,UAAM,SAAS,KAAK,MAAM,OAAO;AACjC,QAAI,UAAU,OAAO,WAAW,YAAY,OAAO,OAAO,UAAU,UAAU;AAC5E,aAAO;AAAA,IACT;AAAA,EACF,QAAQ;AAAA,EAER;AACA,SAAO;AACT;AAEA,SAAS,IAAI,GAAgC;AAC3C,SAAO,OAAO,MAAM,YAAY,IAAI,IAAI;AAC1C;AAOO,SAAS,iBACd,SACqB;AACrB,QAAM,SACJ,OAAO,YAAY,YAAY,WAAW,OAAO,qBAAqB,OAAO,IAAI;AAEnF,MAAI,CAAC,QAAQ;AACX,WAAO,EAAE,MAAM,UAAU,eAAe,yBAAyB,OAAO,WAAW;AAAA,EACrF;AAEA,QAAM,WAAW,IAAI,OAAO,SAAS;AAErC,UAAQ,OAAO,OAAO;AAAA,IACpB,KAAK;AACH,aAAO;AAAA,QACL,MAAM;AAAA,QACN,eAAe;AAAA,QACf,OAAO;AAAA,MACT;AAAA,IACF,KAAK;AACH,aAAO,EAAE,MAAM,YAAY,eAAe,kBAAkB,OAAO,sBAAsB;AAAA,IAC3F,KAAK;AACH,aAAO,EAAE,MAAM,QAAQ,eAAe,gBAAgB,OAAO,6BAA6B;AAAA,IAC5F,KAAK;AACH,aAAO,EAAE,MAAM,QAAQ,eAAe,gBAAgB,OAAO,sBAAsB;AAAA,IACrF,KAAK,uBAAuB;AAC1B,YAAM,SAAS,IAAI,OAAO,MAAM,MAAM;AACtC,YAAM,OAAO,WAAW,SAAI,QAAQ,WAAM;AAC1C,aAAO,SACH,EAAE,MAAM,QAAQ,eAAe,gBAAgB,OAAO,qBAAqB,IAAI,GAAG,IAClF,EAAE,MAAM,YAAY,eAAe,kBAAkB,OAAO,aAAa,IAAI,GAAG;AAAA,IACtF;AAAA,IACA;AAEE,aAAO;AAAA,QACL,MAAM,OAAO,mBACR,cAAc,WAAW,IAC1B;AAAA,QACJ,eAAe;AAAA,QACf,OAAO,cAAc,OAAO,KAAK;AAAA,MACnC;AAAA,EACJ;AACF;AAGA,SAAS,cAAc,OAAuB;AAC5C,QAAM,QAAQ,MAAM,QAAQ,UAAU,GAAG,EAAE,KAAK;AAChD,SAAO,QAAQ,MAAM,OAAO,CAAC,EAAE,YAAY,IAAI,MAAM,MAAM,CAAC,IAAI;AAClE;",
+  "names": []
+}

package/dist/notifications/bell.js

@@ -0,0 +1,24 @@
+import { describeCalendarNotification } from "./calendar-notifications.js";
+import {
+  describeServerNotification,
+  notificationUserName
+} from "./server-notifications.js";
+function serverNotificationBellEntry(n, { open, workspaceHref, calendarTimeZone, ...describe }) {
+  const senderName = notificationUserName(n.sender);
+  const described = describeCalendarNotification(n, { senderName, timeZone: calendarTimeZone }) ?? describeServerNotification(n, { senderName, ...describe });
+  if (!described) return null;
+  const { title, variant, actionLabel, target } = described;
+  return {
+    id: n.external_id,
+    ts: Date.parse(n.created_at),
+    read: n.read ?? false,
+    title,
+    variant,
+    href: target?.kind === "workspace" ? workspaceHref?.(target.workspaceId) : void 0,
+    ...target && { actionLabel: actionLabel ?? "Open", onSelect: () => open(target) }
+  };
+}
+export {
+  serverNotificationBellEntry
+};
+//# sourceMappingURL=bell.js.map

package/dist/notifications/bell.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/notifications/bell.ts"],
+  "sourcesContent": ["/**\n * One server notification as a bell (and arrival toast) entry: what it says (the shared\n * `describeServerNotification`, or `describeCalendarNotification`) and what selecting it does.\n * The host's routing comes in as `open` (blocks: `useOpenNotificationTarget`) and `hrefFor`.\n */\nimport type { components } from '@arbidocs/client'\nimport { describeCalendarNotification } from './calendar-notifications'\nimport type { AppNotification } from './notify-store'\nimport {\n  describeServerNotification,\n  notificationUserName,\n  type DescribeServerNotificationOptions,\n  type NotificationTarget,\n} from './server-notifications'\n\ntype NotificationResponse = components['schemas']['NotificationResponse']\n\nexport interface ServerNotificationBellOptions extends Pick<\n  DescribeServerNotificationOptions,\n  'documentName' | 'portalOrigins'\n> {\n  /** Open where an entry leads. */\n  open: (target: NotificationTarget) => void\n  /** A workspace's link (an entry about a workspace is a link, not an action). */\n  workspaceHref?: (workspaceId: string) => string | undefined\n  /** The user's calendar time zone, for calendar notifications that carry none. */\n  calendarTimeZone?: string | null\n}\n\n/**\n * The bell entry of a notification row, or null for a row the bell does not carry. `actionLabel`\n * names the toast's action (\"Review and sign\"); a workspace's own page is a link (`href`), every\n * other target an action (`onSelect`).\n */\nexport function serverNotificationBellEntry(\n  n: NotificationResponse,\n  { open, workspaceHref, calendarTimeZone, ...describe }: ServerNotificationBellOptions\n): AppNotification | null {\n  const senderName = notificationUserName(n.sender)\n  const described =\n    describeCalendarNotification(n, { senderName, timeZone: calendarTimeZone }) ??\n    describeServerNotification(n, { senderName, ...describe })\n  if (!described) return null\n  const { title, variant, actionLabel, target } = described\n  return {\n    id: n.external_id,\n    ts: Date.parse(n.created_at),\n    read: n.read ?? false,\n    title,\n    variant,\n    href: target?.kind === 'workspace' ? workspaceHref?.(target.workspaceId) : undefined,\n    ...(target && { actionLabel: actionLabel ?? 'Open', onSelect: () => open(target) }),\n  }\n}\n"],
+  "mappings": "AAMA,SAAS,oCAAoC;AAE7C;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAqBA,SAAS,4BACd,GACA,EAAE,MAAM,eAAe,kBAAkB,GAAG,SAAS,GAC7B;AACxB,QAAM,aAAa,qBAAqB,EAAE,MAAM;AAChD,QAAM,YACJ,6BAA6B,GAAG,EAAE,YAAY,UAAU,iBAAiB,CAAC,KAC1E,2BAA2B,GAAG,EAAE,YAAY,GAAG,SAAS,CAAC;AAC3D,MAAI,CAAC,UAAW,QAAO;AACvB,QAAM,EAAE,OAAO,SAAS,aAAa,OAAO,IAAI;AAChD,SAAO;AAAA,IACL,IAAI,EAAE;AAAA,IACN,IAAI,KAAK,MAAM,EAAE,UAAU;AAAA,IAC3B,MAAM,EAAE,QAAQ;AAAA,IAChB;AAAA,IACA;AAAA,IACA,MAAM,QAAQ,SAAS,cAAc,gBAAgB,OAAO,WAAW,IAAI;AAAA,IAC3E,GAAI,UAAU,EAAE,aAAa,eAAe,QAAQ,UAAU,MAAM,KAAK,MAAM,EAAE;AAAA,EACnF;AACF;",
+  "names": []
+}

package/dist/notifications/calendar-notifications.js

@@ -0,0 +1,79 @@
+function validZone(zone) {
+  if (typeof zone !== "string" || !zone) return void 0;
+  try {
+    new Intl.DateTimeFormat("en", { timeZone: zone });
+    return zone;
+  } catch {
+    return void 0;
+  }
+}
+function calendarNotificationMeta(content) {
+  try {
+    const m = JSON.parse(content || "{}");
+    const startsAt = typeof m.starts_at === "string" ? new Date(m.starts_at) : void 0;
+    return {
+      eventId: typeof m.event_id === "string" && /^evt-[A-Za-z0-9]{8}$/.test(m.event_id) ? m.event_id : void 0,
+      recurrenceId: typeof m.recurrence_id === "string" ? m.recurrence_id : null,
+      startsAt: startsAt && Number.isFinite(startsAt.getTime()) ? startsAt : void 0,
+      partstat: typeof m.partstat === "string" ? m.partstat : void 0,
+      hasConference: m.has_conference === true,
+      timeZone: validZone(m.time_zone)
+    };
+  } catch {
+    return { hasConference: false };
+  }
+}
+function when(date, timeZone) {
+  if (!date) return "";
+  return ` (${date.toLocaleString([], { weekday: "short", day: "numeric", month: "short", hour: "2-digit", minute: "2-digit", timeZone })})`;
+}
+const PARTSTAT_WORDS = {
+  accepted: "accepted",
+  declined: "declined",
+  tentative: "tentatively accepted",
+  delegated: "delegated"
+};
+function describeCalendarNotification(n, { senderName, timeZone }) {
+  const type = n.type;
+  if (!type.startsWith("calendar_")) return null;
+  const meta = calendarNotificationMeta(n.content);
+  const zone = meta.timeZone ?? validZone(timeZone);
+  const at = when(meta.startsAt, zone);
+  const target = {
+    kind: "calendar",
+    ...meta.eventId && { eventId: meta.eventId, recurrenceId: meta.recurrenceId }
+  };
+  switch (type) {
+    case "calendar_invite":
+      return { title: `${senderName} invited you to an event${at}`, variant: "info", target };
+    case "calendar_update":
+      return { title: `${senderName} updated an event${at}`, variant: "info", target };
+    case "calendar_cancel":
+      return { title: `${senderName} cancelled an event${at}`, variant: "warning", target };
+    case "calendar_reply": {
+      const word = PARTSTAT_WORDS[meta.partstat ?? ""] ?? "replied to";
+      return {
+        title: `${senderName} ${word} your invitation${at}`,
+        variant: meta.partstat === "declined" ? "warning" : "info",
+        target
+      };
+    }
+    case "calendar_share":
+      return { title: `${senderName} shared a calendar with you`, variant: "info", target };
+    case "calendar_counter":
+      return { title: `${senderName} proposed a new time${at}`, variant: "info", target };
+    case "calendar_reminder": {
+      const title = meta.startsAt ? `An event starts at ${meta.startsAt.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", timeZone: zone })}` : "An event starts soon";
+      if (meta.hasConference && meta.eventId)
+        return { title, variant: "info", actionLabel: "Join", target: { ...target, join: true } };
+      return { title, variant: "info", actionLabel: "Open", target };
+    }
+    default:
+      return { title: "Calendar update", variant: "info", target };
+  }
+}
+export {
+  calendarNotificationMeta,
+  describeCalendarNotification
+};
+//# sourceMappingURL=calendar-notifications.js.map