@spacesync/client 0.1.0 → 0.1.1

package/dist/notification-sidebar-preview.js

@@ -1,66 +1,8 @@
-import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { HoverCard, HoverCardTrigger, HoverCardContent } from './chunk-L65F4EMK.js';
+import { formatRelativeTimeAgo } from './chunk-PBNBLCC2.js';
+import { cn } from './chunk-DMPSQ22Q.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-function HoverCard({ ...props }) {
-  return /* @__PURE__ */ jsx(HoverCardPrimitive.Root, { "data-slot": "hover-card", ...props });
-}
-function HoverCardTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx(HoverCardPrimitive.Trigger, { "data-slot": "hover-card-trigger", ...props });
-}
-function HoverCardContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(HoverCardPrimitive.Portal, { "data-slot": "hover-card-portal", children: /* @__PURE__ */ jsx(
-    HoverCardPrimitive.Content,
-    {
-      "data-slot": "hover-card-content",
-      align,
-      sideOffset,
-      className: cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border border-white/10 p-4 shadow-md outline-hidden",
-        className
-      ),
-      ...props
-    }
-  ) });
-}
-
-// src/lib/dateDisplay.ts
-var MS_MIN = 6e4;
-var MS_HOUR = 60 * MS_MIN;
-var MS_DAY = 24 * MS_HOUR;
-function formatRelativeTimeAgo(iso, now = /* @__PURE__ */ new Date()) {
-  try {
-    const d = new Date(iso.trim());
-    if (!Number.isFinite(d.getTime())) return "";
-    let diffMs = now.getTime() - d.getTime();
-    if (diffMs < 0) diffMs = 0;
-    const sec = Math.floor(diffMs / 1e3);
-    if (sec < 60) return "just now";
-    const min = Math.floor(diffMs / MS_MIN);
-    if (min < 60) return `${min}m ago`;
-    const hr = Math.floor(diffMs / MS_HOUR);
-    if (hr < 24) return `${hr}h ago`;
-    const day = Math.floor(diffMs / MS_DAY);
-    if (day < 7) return `${day}d ago`;
-    const week = Math.floor(day / 7);
-    if (week < 5) return `${week}w ago`;
-    const mo = Math.floor(day / 30);
-    if (mo < 12) return `${mo}mo ago`;
-    const yr = Math.floor(day / 365);
-    return `${Math.max(1, yr)}y ago`;
-  } catch {
-    return "";
-  }
-}
 function NotificationUnreadPulseDot({ className }) {
   return /* @__PURE__ */ jsxs("span", { className: cn("relative flex h-2 w-2 shrink-0", className), "aria-hidden": "true", children: [
     /* @__PURE__ */ jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-400 opacity-40" }),

package/dist/notification-sidebar-preview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/ui/utils.ts","../src/ui/hover-card.tsx","../src/lib/dateDisplay.ts","../src/shell/notification-sidebar-preview.tsx"],"names":["jsx"],"mappings":"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","file":"notification-sidebar-preview.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\";\n\nimport { cn } from \"./utils\";\n\nfunction HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />;\n}\n\nfunction HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />;\n}\n\nfunction HoverCardContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {\n  return (\n    <HoverCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <HoverCardPrimitive.Content\n        data-slot=\"hover-card-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border border-white/10 p-4 shadow-md outline-hidden\",\n          className,\n        )}\n        {...props}\n      />\n    </HoverCardPrimitive.Portal>\n  );\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent };\n","/** Parse `HH:mm` wall-clock time. */\nexport function parseWallClockHm(value: string): { h: number; m: number } | undefined {\n  const m = /^([01]\\d|2[0-3]):([0-5]\\d)$/.exec(value.trim());\n  if (!m) return undefined;\n  const h = Number(m[1]);\n  const min = Number(m[2]);\n  if (h > 23 || min > 59) return undefined;\n  return { h, m: min };\n}\n\nexport function toWallClockHmStr(h: number, m: number): string {\n  return `${String(h).padStart(2, \"0\")}:${String(m).padStart(2, \"0\")}`;\n}\n\n/** Format stored `HH:mm` without timezone conversion. */\nexport function formatWallClockTime(value: string, timeFormat: \"12h\" | \"24h\"): string {\n  const p = parseWallClockHm(value);\n  if (!p) return value.trim() || \"—\";\n  if (timeFormat === \"24h\") return toWallClockHmStr(p.h, p.m);\n  const ap = p.h >= 12 ? \"PM\" : \"AM\";\n  const h12 = p.h % 12 || 12;\n  return `${h12}:${String(p.m).padStart(2, \"0\")} ${ap}`;\n}\n\n/** Add minutes to a wall-clock `HH:mm`, wrapping at 24h. */\nexport function addWallClockMinutes(value: string, minutes: number): string {\n  const p = parseWallClockHm(value);\n  if (!p) return value;\n  const total = p.h * 60 + p.m + minutes;\n  const wrapped = ((total % (24 * 60)) + 24 * 60) % (24 * 60);\n  return toWallClockHmStr(Math.floor(wrapped / 60), wrapped % 60);\n}\n\n/** Format `YYYY-MM-DD` as a calendar date (no timezone shift). */\nexport function formatCalendarDate(ymd: string): string {\n  if (!ymd || !/^\\d{4}-\\d{2}-\\d{2}$/.test(ymd)) return ymd || \"—\";\n  const [y, m, d] = ymd.split(\"-\").map(Number);\n  return new Date(y, m - 1, d).toLocaleDateString(\"en-US\", {\n    month: \"short\",\n    day: \"numeric\",\n    year: \"numeric\",\n  });\n}\n\n/** ISO `yyyy-mm-dd` for a local calendar date. */\nexport function toDateStr(date: Date): string {\n  const y = date.getFullYear();\n  const m = String(date.getMonth() + 1).padStart(2, \"0\");\n  const d = String(date.getDate()).padStart(2, \"0\");\n  return `${y}-${m}-${d}`;\n}\n\nexport function isSameDay(a: Date, b: Date): boolean {\n  return (\n    a.getFullYear() === b.getFullYear() &&\n    a.getMonth() === b.getMonth() &&\n    a.getDate() === b.getDate()\n  );\n}\n\n/** Short label for a date; shows \"Today\" when it matches the current local day. */\nexport function formatDate(date: Date): string {\n  if (isSameDay(date, new Date())) return \"Today\";\n  return date.toLocaleDateString(\"en-US\", {\n    weekday: \"short\",\n    month: \"short\",\n    day: \"numeric\",\n  });\n}\n\nconst MS_MIN = 60_000;\nconst MS_HOUR = 60 * MS_MIN;\nconst MS_DAY = 24 * MS_HOUR;\n\n/**\n * Compact relative time for feeds (e.g. announcements, notifications): `2m ago`, `2d ago`.\n * Uses elapsed wall time from `now` (defaults to current time). Returns \"\" if `iso` is unparseable.\n */\nexport function formatRelativeTimeAgo(iso: string, now: Date = new Date()): string {\n  try {\n    const d = new Date(iso.trim());\n    if (!Number.isFinite(d.getTime())) return \"\";\n    let diffMs = now.getTime() - d.getTime();\n    if (diffMs < 0) diffMs = 0;\n    const sec = Math.floor(diffMs / 1000);\n    if (sec < 60) return \"just now\";\n    const min = Math.floor(diffMs / MS_MIN);\n    if (min < 60) return `${min}m ago`;\n    const hr = Math.floor(diffMs / MS_HOUR);\n    if (hr < 24) return `${hr}h ago`;\n    const day = Math.floor(diffMs / MS_DAY);\n    if (day < 7) return `${day}d ago`;\n    const week = Math.floor(day / 7);\n    if (week < 5) return `${week}w ago`;\n    const mo = Math.floor(day / 30);\n    if (mo < 12) return `${mo}mo ago`;\n    const yr = Math.floor(day / 365);\n    return `${Math.max(1, yr)}y ago`;\n  } catch {\n    return \"\";\n  }\n}\n","\"use client\";\n\nimport { type ReactElement } from \"react\";\nimport { HoverCard, HoverCardContent, HoverCardTrigger } from \"../ui/hover-card\";\nimport { formatRelativeTimeAgo } from \"../lib/dateDisplay\";\nimport { cn } from \"../ui/utils\";\n\n/**\n * Ping + solid blue marker for unread notifications — same layout as Live space’s emerald dot\n * (trailing the label in a `flex items-center gap-3` row).\n */\nexport function NotificationUnreadPulseDot({ className }: { className?: string }) {\n  return (\n    <span className={cn(\"relative flex h-2 w-2 shrink-0\", className)} aria-hidden=\"true\">\n      <span className=\"absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-400 opacity-40\" />\n      <span className=\"relative inline-flex h-2 w-2 rounded-full bg-blue-500\" />\n    </span>\n  );\n}\n\nexport type NotificationSidebarPreviewItem = {\n  id: string;\n  title: string;\n  preview: string;\n  createdAt: string;\n  unread?: boolean;\n};\n\ntype NotificationNavHoverCardProps = {\n  /** Typically a `NavLink` covering the full row. */\n  children: ReactElement;\n  items: NotificationSidebarPreviewItem[];\n  /** Max rows in the hover panel (default 3). */\n  maxItems?: number;\n  side?: \"right\" | \"left\" | \"top\" | \"bottom\";\n  align?: \"start\" | \"center\" | \"end\";\n  className?: string;\n};\n\n/**\n * Hover/focus preview of the latest notifications next to the sidebar row.\n *\n * The trigger is a `<span className=\"block w-full\">` wrapper rather than `asChild` directly on the\n * NavLink. This avoids Radix Slot trying to merge NavLink's function-valued `className` prop as a\n * string, which would otherwise break the flex row layout.\n */\nexport function NotificationNavHoverCard({\n  children,\n  items,\n  maxItems = 3,\n  side = \"right\",\n  align = \"start\",\n  className,\n}: NotificationNavHoverCardProps) {\n  const slice = items.slice(0, maxItems);\n\n  return (\n    <HoverCard openDelay={200} closeDelay={120}>\n      <HoverCardTrigger asChild>\n        <span className=\"block w-full\">{children}</span>\n      </HoverCardTrigger>\n      <HoverCardContent\n        side={side}\n        align={align}\n        sideOffset={8}\n        className={cn(\n          \"w-[min(20rem,calc(100vw-2rem))] p-0 shadow-lg\",\n          className,\n        )}\n      >\n        <div className=\"border-b border-white/10 bg-card/5 px-3 py-2\">\n          <p className=\"text-xs font-medium text-popover-foreground\">Recent notifications</p>\n          <p className=\"text-[11px] text-white/60\">Newest first · up to {maxItems}</p>\n        </div>\n        {slice.length === 0 ? (\n          <div className=\"px-3 py-6 text-center text-sm text-white/60\">No notifications yet.</div>\n        ) : (\n          <ul className=\"max-h-[min(18rem,50dvh)] divide-y divide-white/10 overflow-y-auto\">\n            {slice.map((item) => (\n              <li key={item.id} className=\"px-3 py-2.5\">\n                <div className=\"flex items-start justify-between gap-2\">\n                  <p className=\"min-w-0 text-sm font-medium leading-snug text-popover-foreground line-clamp-2\">\n                    {item.title}\n                  </p>\n                  {item.unread ? (\n                    <span\n                      className=\"mt-1 h-1.5 w-1.5 shrink-0 rounded-full bg-blue-500\"\n                      aria-hidden=\"true\"\n                    />\n                  ) : null}\n                </div>\n                <p className=\"mt-0.5 text-xs leading-relaxed text-white/60 line-clamp-2\">\n                  {item.preview}\n                </p>\n                <p className=\"mt-1 text-[10px] text-white/40\">\n                  {formatRelativeTimeAgo(item.createdAt)}\n                </p>\n              </li>\n            ))}\n          </ul>\n        )}\n      </HoverCardContent>\n    </HoverCard>\n  );\n}\n"]}
+{"version":3,"sources":["../src/shell/notification-sidebar-preview.tsx"],"names":[],"mappings":";;;;;AAWO,SAAS,0BAAA,CAA2B,EAAE,SAAA,EAAU,EAA2B;AAChF,EAAA,uBACE,IAAA,CAAC,UAAK,SAAA,EAAW,EAAA,CAAG,kCAAkC,SAAS,CAAA,EAAG,eAAY,MAAA,EAC5E,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,WAAU,qFAAA,EAAsF,CAAA;AAAA,oBACtG,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,uDAAA,EAAwD;AAAA,GAAA,EAC1E,CAAA;AAEJ;AA4BO,SAAS,wBAAA,CAAyB;AAAA,EACvC,QAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA,GAAW,CAAA;AAAA,EACX,IAAA,GAAO,OAAA;AAAA,EACP,KAAA,GAAQ,OAAA;AAAA,EACR;AACF,CAAA,EAAkC;AAChC,EAAA,MAAM,KAAA,GAAQ,KAAA,CAAM,KAAA,CAAM,CAAA,EAAG,QAAQ,CAAA;AAErC,EAAA,uBACE,IAAA,CAAC,SAAA,EAAA,EAAU,SAAA,EAAW,GAAA,EAAK,YAAY,GAAA,EACrC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,gBAAA,EAAA,EAAiB,SAAO,IAAA,EACvB,QAAA,kBAAA,GAAA,CAAC,UAAK,SAAA,EAAU,cAAA,EAAgB,UAAS,CAAA,EAC3C,CAAA;AAAA,oBACA,IAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACC,IAAA;AAAA,QACA,KAAA;AAAA,QACA,UAAA,EAAY,CAAA;AAAA,QACZ,SAAA,EAAW,EAAA;AAAA,UACT,+CAAA;AAAA,UACA;AAAA,SACF;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,8CAAA,EACb,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,6CAAA,EAA8C,QAAA,EAAA,sBAAA,EAAoB,CAAA;AAAA,4BAC/E,IAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,2BAAA,EAA4B,QAAA,EAAA;AAAA,cAAA,0BAAA;AAAA,cAAsB;AAAA,aAAA,EAAS;AAAA,WAAA,EAC1E,CAAA;AAAA,UACC,KAAA,CAAM,WAAW,CAAA,mBAChB,GAAA,CAAC,SAAI,SAAA,EAAU,6CAAA,EAA8C,mCAAqB,CAAA,mBAElF,GAAA,CAAC,QAAG,SAAA,EAAU,mEAAA,EACX,gBAAM,GAAA,CAAI,CAAC,yBACV,IAAA,CAAC,IAAA,EAAA,EAAiB,WAAU,aAAA,EAC1B,QAAA,EAAA;AAAA,4BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,wCAAA,EACb,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,+EAAA,EACV,QAAA,EAAA,IAAA,CAAK,KAAA,EACR,CAAA;AAAA,cACC,KAAK,MAAA,mBACJ,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAU,oDAAA;AAAA,kBACV,aAAA,EAAY;AAAA;AAAA,eACd,GACE;AAAA,aAAA,EACN,CAAA;AAAA,4BACA,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,2DAAA,EACV,eAAK,OAAA,EACR,CAAA;AAAA,gCACC,GAAA,EAAA,EAAE,SAAA,EAAU,kCACV,QAAA,EAAA,qBAAA,CAAsB,IAAA,CAAK,SAAS,CAAA,EACvC;AAAA,WAAA,EAAA,EAjBO,IAAA,CAAK,EAkBd,CACD,CAAA,EACH;AAAA;AAAA;AAAA;AAEJ,GAAA,EACF,CAAA;AAEJ","file":"notification-sidebar-preview.js","sourcesContent":["\"use client\";\n\nimport { type ReactElement } from \"react\";\nimport { HoverCard, HoverCardContent, HoverCardTrigger } from \"../ui/hover-card\";\nimport { formatRelativeTimeAgo } from \"../lib/dateDisplay\";\nimport { cn } from \"../ui/utils\";\n\n/**\n * Ping + solid blue marker for unread notifications — same layout as Live space’s emerald dot\n * (trailing the label in a `flex items-center gap-3` row).\n */\nexport function NotificationUnreadPulseDot({ className }: { className?: string }) {\n  return (\n    <span className={cn(\"relative flex h-2 w-2 shrink-0\", className)} aria-hidden=\"true\">\n      <span className=\"absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-400 opacity-40\" />\n      <span className=\"relative inline-flex h-2 w-2 rounded-full bg-blue-500\" />\n    </span>\n  );\n}\n\nexport type NotificationSidebarPreviewItem = {\n  id: string;\n  title: string;\n  preview: string;\n  createdAt: string;\n  unread?: boolean;\n};\n\ntype NotificationNavHoverCardProps = {\n  /** Typically a `NavLink` covering the full row. */\n  children: ReactElement;\n  items: NotificationSidebarPreviewItem[];\n  /** Max rows in the hover panel (default 3). */\n  maxItems?: number;\n  side?: \"right\" | \"left\" | \"top\" | \"bottom\";\n  align?: \"start\" | \"center\" | \"end\";\n  className?: string;\n};\n\n/**\n * Hover/focus preview of the latest notifications next to the sidebar row.\n *\n * The trigger is a `<span className=\"block w-full\">` wrapper rather than `asChild` directly on the\n * NavLink. This avoids Radix Slot trying to merge NavLink's function-valued `className` prop as a\n * string, which would otherwise break the flex row layout.\n */\nexport function NotificationNavHoverCard({\n  children,\n  items,\n  maxItems = 3,\n  side = \"right\",\n  align = \"start\",\n  className,\n}: NotificationNavHoverCardProps) {\n  const slice = items.slice(0, maxItems);\n\n  return (\n    <HoverCard openDelay={200} closeDelay={120}>\n      <HoverCardTrigger asChild>\n        <span className=\"block w-full\">{children}</span>\n      </HoverCardTrigger>\n      <HoverCardContent\n        side={side}\n        align={align}\n        sideOffset={8}\n        className={cn(\n          \"w-[min(20rem,calc(100vw-2rem))] p-0 shadow-lg\",\n          className,\n        )}\n      >\n        <div className=\"border-b border-white/10 bg-card/5 px-3 py-2\">\n          <p className=\"text-xs font-medium text-popover-foreground\">Recent notifications</p>\n          <p className=\"text-[11px] text-white/60\">Newest first · up to {maxItems}</p>\n        </div>\n        {slice.length === 0 ? (\n          <div className=\"px-3 py-6 text-center text-sm text-white/60\">No notifications yet.</div>\n        ) : (\n          <ul className=\"max-h-[min(18rem,50dvh)] divide-y divide-white/10 overflow-y-auto\">\n            {slice.map((item) => (\n              <li key={item.id} className=\"px-3 py-2.5\">\n                <div className=\"flex items-start justify-between gap-2\">\n                  <p className=\"min-w-0 text-sm font-medium leading-snug text-popover-foreground line-clamp-2\">\n                    {item.title}\n                  </p>\n                  {item.unread ? (\n                    <span\n                      className=\"mt-1 h-1.5 w-1.5 shrink-0 rounded-full bg-blue-500\"\n                      aria-hidden=\"true\"\n                    />\n                  ) : null}\n                </div>\n                <p className=\"mt-0.5 text-xs leading-relaxed text-white/60 line-clamp-2\">\n                  {item.preview}\n                </p>\n                <p className=\"mt-1 text-[10px] text-white/40\">\n                  {formatRelativeTimeAgo(item.createdAt)}\n                </p>\n              </li>\n            ))}\n          </ul>\n        )}\n      </HoverCardContent>\n    </HoverCard>\n  );\n}\n"]}

package/dist/page-list-chrome.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
 import { ReactNode, ButtonHTMLAttributes } from 'react';
 import { SortDirection } from './use-client-sort.js';
 export { shellTopBarNeutralActionDataAttr } from './shell-top-bar-chrome.js';
@@ -16,77 +16,77 @@ declare function pageListStickyColumnClass({ side, layer, sortActive, }: PageLis
 declare const pageListTableWithFixedColumnsClass = "border-separate border-spacing-0";
 
 /** Fills the app main pane (white card on grey chrome). */
-declare function PageListRoot({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function PageListRoot({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
 /** White header block under the app chrome. */
-declare function PageListHeader({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function PageListHeader({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
 declare function PageListTitleRow({ title, subtitle, actions, titleAddon, }: {
     title: ReactNode;
     subtitle?: string;
     actions?: ReactNode;
     /** Rendered before the title (e.g. live indicator). */
     titleAddon?: ReactNode;
-}): react_jsx_runtime.JSX.Element;
+}): React$1.JSX.Element;
 /** Primary CTA in a page list header (e.g. New announcement). */
-declare function PageListPrimaryActionButton({ className, ...props }: ButtonHTMLAttributes<HTMLButtonElement>): react_jsx_runtime.JSX.Element;
+declare function PageListPrimaryActionButton({ className, ...props }: ButtonHTMLAttributes<HTMLButtonElement>): React$1.JSX.Element;
 /** Secondary CTA for empty states and alternate actions. */
-declare function PageListSecondaryActionButton({ className, ...props }: ButtonHTMLAttributes<HTMLButtonElement>): react_jsx_runtime.JSX.Element;
+declare function PageListSecondaryActionButton({ className, ...props }: ButtonHTMLAttributes<HTMLButtonElement>): React$1.JSX.Element;
 /** Primary CTA rendered in {@link ShellTopBar} actions on the dark shell. */
-declare function ShellTopBarPrimaryActionButton({ className, ...props }: ButtonHTMLAttributes<HTMLButtonElement>): react_jsx_runtime.JSX.Element;
+declare function ShellTopBarPrimaryActionButton({ className, ...props }: ButtonHTMLAttributes<HTMLButtonElement>): React$1.JSX.Element;
 /** Secondary / outline CTA in {@link ShellTopBar} — same chrome as detail header actions (Edit member, Add adjustment). */
-declare function ShellTopBarSecondaryActionButton({ className, ...props }: ButtonHTMLAttributes<HTMLButtonElement>): react_jsx_runtime.JSX.Element;
+declare function ShellTopBarSecondaryActionButton({ className, ...props }: ButtonHTMLAttributes<HTMLButtonElement>): React$1.JSX.Element;
 
 /** Search, filters, or secondary controls (spacing matches Live space). */
-declare function PageListToolbar({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function PageListToolbar({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
 /** Compact KPI tiles (Live space stat row). */
-declare function PageListStatGrid({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function PageListStatGrid({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
 type PageListStatTone = "default" | "danger" | "success";
 declare function PageListStatCard({ label, value, tone, }: {
     label: string;
     value: ReactNode;
     tone?: PageListStatTone;
-}): react_jsx_runtime.JSX.Element;
+}): React$1.JSX.Element;
 /** Scrollable white region for tables / lists. Stay flush horizontally; table cells provide inset (same as Live space). */
-declare function PageListTableArea({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function PageListTableArea({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
 /** Search input styling shared with Live space. */
 declare function PageListSearchField({ value, onChange, placeholder, className, }: {
     value: string;
     onChange: (v: string) => void;
     placeholder: string;
     className?: string;
-}): react_jsx_runtime.JSX.Element;
+}): React$1.JSX.Element;
 /** Sticky table header row (Live space). */
 declare function PageListStickyThead({ children }: {
     children: ReactNode;
-}): react_jsx_runtime.JSX.Element;
+}): React$1.JSX.Element;
 /** Non-sticky thead for embedded detail tables. */
-declare function PageListThead({ className, ...props }: React.ComponentProps<"thead">): react_jsx_runtime.JSX.Element;
+declare function PageListThead({ className, ...props }: React.ComponentProps<"thead">): React$1.JSX.Element;
 /** Standard `<table>` shell for list and detail tables. */
 declare function PageListTable({ minWidth, fixedColumns, compact, className, style, ...props }: React.ComponentProps<"table"> & {
     minWidth?: number;
     fixedColumns?: boolean;
     compact?: boolean;
-}): react_jsx_runtime.JSX.Element;
+}): React$1.JSX.Element;
 /** Standard header row styling for column labels. */
-declare function PageListHeaderRow({ className, ...props }: React.ComponentProps<"tr">): react_jsx_runtime.JSX.Element;
+declare function PageListHeaderRow({ className, ...props }: React.ComponentProps<"tr">): React$1.JSX.Element;
 type PageListTdTone = "default" | "primary" | "muted" | "mono";
 type PageListCellSize = "default" | "comfortable";
 /** Standard data row — border, hover, optional click navigation. */
 declare function PageListTr({ onClick, selected, className, onKeyDown, ...props }: React.ComponentProps<"tr"> & {
     onClick?: () => void;
     selected?: boolean;
-}): react_jsx_runtime.JSX.Element;
+}): React$1.JSX.Element;
 declare const pageListThClass = "font-medium py-2.5 px-2 text-left text-[10px] uppercase tracking-wide text-muted-foreground first:pl-5 last:pr-5";
 declare const pageListTdClass: string;
 declare function PageListTh({ children, columnFixed, align, className, ...props }: React.ComponentProps<"th"> & {
     columnFixed?: PageListColumnFixed;
     align?: "left" | "right";
-}): react_jsx_runtime.JSX.Element;
+}): React$1.JSX.Element;
 declare function PageListTd({ children, columnFixed, align, tone, size, className, ...props }: React.ComponentProps<"td"> & {
     columnFixed?: PageListColumnFixed;
     align?: "left" | "right";
     tone?: PageListTdTone;
     size?: PageListCellSize;
-}): react_jsx_runtime.JSX.Element;
+}): React$1.JSX.Element;
 declare function PageListSortableTh<K extends string>({ label, columnKey, sortKey, direction, onSort, align, columnFixed, className, }: {
     label: ReactNode;
     columnKey: K;
@@ -96,10 +96,10 @@ declare function PageListSortableTh<K extends string>({ label, columnKey, sortKe
     align?: "left" | "right";
     columnFixed?: PageListColumnFixed;
     className?: string;
-}): react_jsx_runtime.JSX.Element;
+}): React$1.JSX.Element;
 type PageListPaginationProps = Pick<UseClientPaginationResult<unknown>, "page" | "setPage" | "pageSize" | "setPageSize" | "pageSizeOptions" | "totalItems" | "totalPages" | "rangeStart" | "rangeEnd" | "canPrev" | "canNext">;
 /** Footer bar for paginated list tables — count, page-size selector, and page controls. */
-declare function PageListPagination({ page, setPage, pageSize, setPageSize, pageSizeOptions, totalItems, totalPages, rangeStart, rangeEnd, canPrev, canNext, }: PageListPaginationProps): react_jsx_runtime.JSX.Element | null;
+declare function PageListPagination({ page, setPage, pageSize, setPageSize, pageSizeOptions, totalItems, totalPages, rangeStart, rangeEnd, canPrev, canNext, }: PageListPaginationProps): React$1.JSX.Element | null;
 /** Empty state for list pages inside PageListTableArea. */
 declare function PageListEmptyState({ title, description, icon, action, variant, className, }: {
     title: string;
@@ -108,9 +108,9 @@ declare function PageListEmptyState({ title, description, icon, action, variant,
     action?: ReactNode;
     variant?: "minimal" | "illustrated";
     className?: string;
-}): react_jsx_runtime.JSX.Element;
+}): React$1.JSX.Element;
 /** Bordered scroll wrapper for embedded detail tables. */
-declare function DetailTableFrame({ className, children, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function DetailTableFrame({ className, children, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
 /** Flat content section for detail pages — title + optional description + optional header action, separated by a thin divider. */
 declare function DetailSection({ title, description, headerMeta, headerAction, children, }: {
     title: string;
@@ -119,6 +119,6 @@ declare function DetailSection({ title, description, headerMeta, headerAction, c
     headerMeta?: ReactNode;
     headerAction?: ReactNode;
     children: ReactNode;
-}): react_jsx_runtime.JSX.Element;
+}): React$1.JSX.Element;
 
 export { DetailSection, DetailTableFrame, type PageListCellSize, type PageListColumnFixed, PageListEmptyState, PageListHeader, PageListHeaderRow, PageListPagination, type PageListPaginationProps, PageListPrimaryActionButton, PageListRoot, PageListSearchField, PageListSecondaryActionButton, PageListSortableTh, PageListStatCard, PageListStatGrid, type PageListStatTone, PageListStickyThead, PageListTable, PageListTableArea, PageListTd, type PageListTdTone, PageListTh, PageListThead, PageListTitleRow, PageListToolbar, PageListTr, ShellTopBarPrimaryActionButton, ShellTopBarSecondaryActionButton, pageListStickyColumnClass, pageListTableWithFixedColumnsClass, pageListTdClass, pageListThClass };