@rebasepro/app 0.22.0 → 0.24.0

package/dist/debug.js

@@ -77,11 +77,11 @@ var UIStyleGuide = () => {
       /* @__PURE__ */ jsx(Typography, { variant: "h4", gutterBottom: true, className: "border-b pb-2 mb-6", children: "Icon Buttons" }),
       /* @__PURE__ */ jsx(Paper, { className: "p-6", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-8 items-center", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
-          /* @__PURE__ */ jsx(IconButton, { color: "primary", children: /* @__PURE__ */ jsx(IconExample, {}) }),
+          /* @__PURE__ */ jsx(IconButton, { children: /* @__PURE__ */ jsx(IconExample, {}) }),
           /* @__PURE__ */ jsx("span", { className: "text-[10px] text-text-disabled font-mono", children: "primary" })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
-          /* @__PURE__ */ jsx(IconButton, { color: "secondary", children: /* @__PURE__ */ jsx(IconExample, {}) }),
+          /* @__PURE__ */ jsx(IconButton, { children: /* @__PURE__ */ jsx(IconExample, {}) }),
           /* @__PURE__ */ jsx("span", { className: "text-[10px] text-text-disabled font-mono", children: "secondary" })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
@@ -93,7 +93,7 @@ var UIStyleGuide = () => {
           /* @__PURE__ */ jsx("span", { className: "text-[10px] text-text-disabled font-mono", children: "disabled" })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
-          /* @__PURE__ */ jsx(IconButton, { size: "small", color: "error", children: /* @__PURE__ */ jsx(Trash2Icon, {}) }),
+          /* @__PURE__ */ jsx(IconButton, { size: "small", children: /* @__PURE__ */ jsx(Trash2Icon, {}) }),
           /* @__PURE__ */ jsx("span", { className: "text-[10px] text-text-disabled font-mono", children: "delete" })
         ] })
       ] }) })
@@ -397,7 +397,7 @@ function PipelineOverview({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsxs4(
         Button2,
         {
           variant: "text",
@@ -405,8 +405,10 @@ function PipelineOverview({
           onClick: () => {
             onNavigate("/c/engagements");
           },
-          endIcon: /* @__PURE__ */ jsx4(ChevronRightIcon, { className: "h-4 w-4" }),
-          children: "View All"
+          children: [
+            "View All",
+            /* @__PURE__ */ jsx4(ChevronRightIcon, { className: "h-4 w-4" })
+          ]
         }
       )
     ] }),
@@ -1131,7 +1133,7 @@ function CompletedSection({
     if (willExpand) onExpand();
   };
   return /* @__PURE__ */ jsxs7("div", { children: [
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsxs7(
       Button5,
       {
         variant: "text",
@@ -1139,34 +1141,36 @@ function CompletedSection({
         color: "neutral",
         className: "w-full justify-between hover:bg-surface-hover px-3 py-1.5 h-auto text-left",
         onClick: handleToggle,
-        endIcon: /* @__PURE__ */ jsx7(
-          "svg",
-          {
-            className: cls4(
-              "h-3 w-3 text-text-secondary dark:text-text-secondary-dark transition-transform duration-150",
-              expanded && "rotate-90"
-            ),
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: 2,
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            children: /* @__PURE__ */ jsx7("polyline", { points: "9 18 15 12 9 6" })
-          }
-        ),
-        children: /* @__PURE__ */ jsxs7(
-          Typography6,
-          {
-            variant: "caption",
-            color: "secondary",
-            className: "font-semibold uppercase tracking-wider text-[10px]",
-            children: [
-              "Completed",
-              tasks.length > 0 ? ` (${tasks.length}${hasMore ? "+" : ""})` : ""
-            ]
-          }
-        )
+        children: [
+          /* @__PURE__ */ jsxs7(
+            Typography6,
+            {
+              variant: "caption",
+              color: "secondary",
+              className: "font-semibold uppercase tracking-wider text-[10px]",
+              children: [
+                "Completed",
+                tasks.length > 0 ? ` (${tasks.length}${hasMore ? "+" : ""})` : ""
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx7(
+            "svg",
+            {
+              className: cls4(
+                "h-3 w-3 text-text-secondary dark:text-text-secondary-dark transition-transform duration-150",
+                expanded && "rotate-90"
+              ),
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: 2,
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: /* @__PURE__ */ jsx7("polyline", { points: "9 18 15 12 9 6" })
+            }
+          )
+        ]
       }
     ),
     expanded && /* @__PURE__ */ jsx7("div", { className: "mt-1 space-y-0.5", children: loading && tasks.length === 0 ? /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2 px-3 py-3", children: [
@@ -1537,7 +1541,10 @@ function CalendarWidget({ loading, tasks, onOpenTask }) {
           {
             onClick: () => setSelectedDay(isSelected ? null : day.dateKey),
             className: cls5(
-              "flex flex-col items-center justify-center py-1.5 rounded-md transition-colors duration-100 focus:outline-none",
+              // The today and selected rings are utilities, which outrank the kit's
+              // base :focus-visible ring — so the focus ring is said here too, or a
+              // keyboard user on today's cell sees nothing change.
+              "flex flex-col items-center justify-center py-1.5 rounded-md transition-colors duration-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary",
               day.isCurrentMonth ? "text-text-primary dark:text-text-primary-dark" : "text-surface-300 dark:text-surface-600",
               day.isToday && !isSelected && "ring-1 ring-primary/50",
               isSelected ? "bg-primary/10 dark:bg-primary/15 ring-1 ring-primary/60" : "hover:bg-surface-hover",
@@ -2661,8 +2668,8 @@ function CollectionTableDemo() {
           /* @__PURE__ */ jsx11(TableCell, { children: /* @__PURE__ */ jsx11("div", { className: "flex flex-wrap gap-1", children: project.tags.map((tag) => /* @__PURE__ */ jsx11(Chip4, { size: "smallest", colorScheme: "cyan", children: tag }, tag)) }) }),
           /* @__PURE__ */ jsx11(TableCell, { children: /* @__PURE__ */ jsx11(Typography9, { variant: "body2", className: "font-mono text-xs", children: project.dueDate }) }),
           /* @__PURE__ */ jsx11(TableCell, { style: { width: "80px" }, children: /* @__PURE__ */ jsxs11("div", { className: "flex gap-1", children: [
-            /* @__PURE__ */ jsx11(Tooltip2, { title: "Edit", asChild: true, children: /* @__PURE__ */ jsx11(IconButton3, { size: "smallest", children: /* @__PURE__ */ jsx11(PencilIcon, { size: iconSize.smallest }) }) }),
-            /* @__PURE__ */ jsx11(Tooltip2, { title: "Delete", asChild: true, children: /* @__PURE__ */ jsx11(IconButton3, { size: "smallest", children: /* @__PURE__ */ jsx11(Trash2Icon2, { size: iconSize.smallest }) }) })
+            /* @__PURE__ */ jsx11(Tooltip2, { title: "Edit", asChild: true, children: /* @__PURE__ */ jsx11(IconButton3, { "aria-label": "Edit", size: "smallest", children: /* @__PURE__ */ jsx11(PencilIcon, { size: iconSize.smallest }) }) }),
+            /* @__PURE__ */ jsx11(Tooltip2, { title: "Delete", asChild: true, children: /* @__PURE__ */ jsx11(IconButton3, { "aria-label": "Delete", size: "smallest", children: /* @__PURE__ */ jsx11(Trash2Icon2, { size: iconSize.smallest }) }) })
           ] }) })
         ] }, project.id)) })
       ] }),
@@ -3569,7 +3576,7 @@ function UIReferenceView() {
             /* @__PURE__ */ jsx16("button", { className: cls12("px-3 py-1 text-xs font-medium rounded-md transition-all", "bg-surface-lifted shadow-sm text-text-primary dark:text-text-primary-dark"), children: "Content" }),
             /* @__PURE__ */ jsx16("button", { className: cls12("px-3 py-1 text-xs font-medium rounded-md transition-all", "text-surface-500 hover:text-surface-900 dark:hover:text-white"), children: "Studio" })
           ] }),
-          /* @__PURE__ */ jsxs16(Menu, { trigger: /* @__PURE__ */ jsx16(IconButton5, { color: "inherit", children: /* @__PURE__ */ jsx16(MoonIcon, {}) }), children: [
+          /* @__PURE__ */ jsxs16(Menu, { trigger: /* @__PURE__ */ jsx16(IconButton5, { children: /* @__PURE__ */ jsx16(MoonIcon, {}) }), children: [
             /* @__PURE__ */ jsxs16(MenuItem, { children: [
               /* @__PURE__ */ jsx16(MoonIcon, { size: iconSize3.smallest }),
               " Dark"
@@ -4092,7 +4099,7 @@ function UIReferenceView() {
               roles: []
             }
           ].map((user) => /* @__PURE__ */ jsxs16(TableRow2, { children: [
-            /* @__PURE__ */ jsx16(TableCell2, { style: { width: "64px" }, children: /* @__PURE__ */ jsx16(Tooltip3, { asChild: true, title: "Delete this user", children: /* @__PURE__ */ jsx16(IconButton5, { size: "small", children: /* @__PURE__ */ jsx16(Trash2Icon3, {}) }) }) }),
+            /* @__PURE__ */ jsx16(TableCell2, { style: { width: "64px" }, children: /* @__PURE__ */ jsx16(Tooltip3, { asChild: true, title: "Delete this user", children: /* @__PURE__ */ jsx16(IconButton5, { "aria-label": "Delete this user", size: "small", children: /* @__PURE__ */ jsx16(Trash2Icon3, {}) }) }) }),
             /* @__PURE__ */ jsx16(TableCell2, { children: user.email }),
             /* @__PURE__ */ jsx16(TableCell2, { className: "font-medium", children: user.displayName }),
             /* @__PURE__ */ jsx16(TableCell2, { children: /* @__PURE__ */ jsx16("div", { className: "flex flex-wrap gap-2", children: user.roles.map((role) => /* @__PURE__ */ jsx16(Chip8, { colorScheme: role.isAdmin ? "purple" : "blue", size: "small", children: role.name }, role.id)) }) })

package/dist/hooks/data/collectionWindow.d.ts

@@ -0,0 +1,133 @@
+import type { CollectionAccessor, Entity, FindParams } from "@rebasepro/types";
+/**
+ * The part of a read that says *which* rows, without saying how many or from
+ * where. The window adds `limit` and `offset` itself, page by page.
+ */
+export type CollectionWindowQuery<M extends Record<string, unknown>> = Omit<FindParams<M>, "limit" | "offset" | "page" | "after">;
+/**
+ * What a {@link CollectionWindow} reports on every change.
+ */
+export interface CollectionWindowState<M extends Record<string, unknown> = Record<string, unknown>> {
+    /**
+     * The rows in the window, in order, without duplicates.
+     *
+     * `undefined` until the window first covers what it was opened for — the
+     * first page, or every row a restored scroll position had on screen — so a
+     * view that is still showing its previous rows keeps them instead of
+     * flashing a partial list.
+     */
+    rows: Entity<M>[] | undefined;
+    /** Rows not yet on screen are being read: the first page, or the next one. */
+    loading: boolean;
+    error: Error | undefined;
+    /** A page came back short, so there is nothing past `rows`. */
+    complete: boolean;
+}
+export interface CollectionWindowOptions<M extends Record<string, unknown>> {
+    accessor: Pick<CollectionAccessor<M>, "find" | "listen">;
+    query: CollectionWindowQuery<M>;
+    /** Rows in the first page, which is the one kept live. */
+    pageSize: number;
+    /** How many rows the window should hold. `Infinity` reads them all. */
+    target: number;
+    /** Subscribe to the first page when the accessor can. Defaults to `true`. */
+    live?: boolean;
+    /**
+     * Applied to every page as it arrives, before it is merged — the panel's
+     * own `afterRead`, for instance.
+     */
+    process?: (rows: Entity<M>[]) => Promise<Entity<M>[]> | Entity<M>[];
+    /**
+     * When the subscription fails, read the first page once instead of
+     * reporting the failure (which is only reported if that read fails too).
+     */
+    fallbackToFind?: boolean;
+    /**
+     * Read the first page once if the subscription has not answered by then.
+     * The subscription still wins whenever it does answer.
+     */
+    firstPaintTimeoutMs?: number;
+    onChange: (state: CollectionWindowState<M>) => void;
+}
+/**
+ * A scrolled collection view's rows, read one page at a time.
+ *
+ * ## Why this exists
+ *
+ * The table, list, card and board views used to grow a single read: the next
+ * page was the same query with `limit` raised by a page, so page *k* re-read
+ * the *k − 1* pages before it, and the read that reached row 1,001 asked for a
+ * `limit` the API refuses (`MAX_LIST_LIMIT`). Every row past 1,000 was out of
+ * reach, behind a developer error. The board clamped at the ceiling instead,
+ * and its columns then said they were finished while their own header counted
+ * thousands more.
+ *
+ * ## How it reads
+ *
+ * - The **first page** is a subscription when the accessor can listen, else a
+ *   one-shot read. It is the only live query the window holds.
+ * - Every **later page** is a one-shot read by `offset`, of only the rows past
+ *   the ones already held, never more than `MAX_LIST_LIMIT` at a time. Offset
+ *   rather than the keyset cursor because it is the one paging every sort a
+ *   view offers can express — a relevance-ordered search has no cursor — and
+ *   because the server breaks ties on the id, so pages neither repeat nor skip
+ *   rows under a sort with duplicates.
+ * - **Realtime** covers every row held, not only the first page. The server
+ *   re-runs a subscription on every write to its collection, so each push after
+ *   the first says "something changed". The rows past the first page are then
+ *   read again, in reads of at most `MAX_LIST_LIMIT`, and replaced in one step.
+ *   Pushes that arrive while that re-read runs are folded into one more.
+ *
+ * Rows are de-duplicated by id: between a push moving the first page and the
+ * re-read of the rest, a row can briefly belong to both.
+ */
+export declare class CollectionWindow<M extends Record<string, unknown>> {
+    private readonly accessor;
+    private readonly query;
+    private readonly pageSize;
+    private readonly options;
+    /** Rows the window must hold before it first shows any. */
+    private readonly holdUntil;
+    private target;
+    private head;
+    /** The first page came back full, so there may be more past it. */
+    private headFull;
+    /** Rows past the first page, from offset `pageSize` on. */
+    private tail;
+    /** The last read past the first page came back short. */
+    private tailEnded;
+    /** The first page changed after it first arrived: re-read the rest. */
+    private stale;
+    private pumping;
+    private loadingMore;
+    private headError;
+    private tailError;
+    private settled;
+    private disposed;
+    private headSequence;
+    private liveAnswered;
+    private unsubscribe;
+    private firstPaintTimer;
+    constructor(options: CollectionWindowOptions<M>);
+    start(): void;
+    /** Hold this many rows. Fewer than are held drops the rows past it. */
+    setTarget(target: number): void;
+    dispose(): void;
+    private readHeadOnce;
+    private receiveLiveError;
+    private receiveHead;
+    /** Rows still wanted past the ones held. */
+    private wanted;
+    /**
+     * The one loop that reads past the first page, so a re-read and a next page
+     * never run at the same time and interleave their offsets.
+     */
+    private pump;
+    private readNext;
+    /** Read every held row past the first page again, and swap them in at once. */
+    private reread;
+    private process;
+    private complete;
+    private emit;
+    private rows;
+}

package/dist/hooks/data/useStableFilterValues.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The same filter object for as long as its contents stay the same.
+ *
+ * Callers write filters inline — the hooks guide does — so every render hands
+ * a data hook a new object. Used as an effect dependency by identity, that
+ * re-subscribed on every render, and every delivery rendered again: a
+ * subscribe loop against the server for as long as the component was mounted.
+ */
+export declare function useStableFilterValues<T>(filterValues: T): T;

package/dist/hooks/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./data/useData.js";
 export * from "./data/useCollection.js";
+export * from "./data/collectionWindow.js";
 export * from "./data/useFetch.js";
 export * from "./data/useRelationSelector.js";
 export * from "./data/save.js";