@pattern-stack/frontend-patterns 0.2.0-alpha.16 → 0.2.0-alpha.19

package/dist/index.es.js

@@ -7750,6 +7750,201 @@ const TruncatedText = ({
     }
   );
 };
+function formatAuto(ms) {
+  if (ms < 1e3) {
+    return { visible: `${ms}ms`, spoken: `${ms} milliseconds` };
+  }
+  if (ms < 6e4) {
+    const secs = ms / 1e3;
+    return {
+      visible: `${secs.toFixed(1)}s`,
+      spoken: `${secs.toFixed(1)} seconds`
+    };
+  }
+  if (ms < 36e5) {
+    const m = Math.floor(ms / 6e4);
+    const s = Math.round(ms % 6e4 / 1e3);
+    return { visible: `${m}m ${s}s`, spoken: `${m} minutes ${s} seconds` };
+  }
+  if (ms < 864e5) {
+    const h2 = Math.floor(ms / 36e5);
+    const m = Math.round(ms % 36e5 / 6e4);
+    return { visible: `${h2}h ${m}m`, spoken: `${h2} hours ${m} minutes` };
+  }
+  const d = Math.floor(ms / 864e5);
+  const h = Math.round(ms % 864e5 / 36e5);
+  return { visible: `${d}d ${h}h`, spoken: `${d} days ${h} hours` };
+}
+function formatS(ms) {
+  const secs = ms / 1e3;
+  return {
+    visible: `${secs.toFixed(1)}s`,
+    spoken: `${secs.toFixed(1)} seconds`
+  };
+}
+function formatMs(ms) {
+  return { visible: `${ms}ms`, spoken: `${ms} milliseconds` };
+}
+function Duration({ ms, precision = "auto", className }) {
+  const { visible, spoken } = precision === "s" ? formatS(ms) : precision === "ms" ? formatMs(ms) : formatAuto(ms);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-label": spoken,
+      className: cn("font-mono text-xs text-muted-foreground", className),
+      children: visible
+    }
+  );
+}
+function toDate(v) {
+  return v instanceof Date ? v : new Date(v);
+}
+function formatRelative(date, now) {
+  const diffMs = now.getTime() - date.getTime();
+  const abs = Math.abs(diffMs);
+  const suffix = diffMs >= 0 ? "ago" : "from now";
+  if (abs < 6e4) return "just now";
+  if (abs < 36e5) {
+    const m = Math.floor(abs / 6e4);
+    return `${m}m ${suffix}`;
+  }
+  if (abs < 864e5) {
+    const h = Math.floor(abs / 36e5);
+    return `${h}h ${suffix}`;
+  }
+  if (abs < 6048e5) {
+    const d = Math.floor(abs / 864e5);
+    return d === 1 ? "yesterday" : `${d}d ${suffix}`;
+  }
+  return date.toLocaleDateString(void 0);
+}
+function formatAbsolute(date, tz) {
+  return date.toLocaleString(void 0, {
+    dateStyle: "short",
+    timeStyle: "short",
+    timeZone: tz
+  });
+}
+function Timestamp({
+  value,
+  format = "relative",
+  tz,
+  className
+}) {
+  const date = toDate(value);
+  const iso = date.toISOString();
+  const [now, setNow] = useState(() => /* @__PURE__ */ new Date());
+  useEffect(() => {
+    if (format === "absolute") return;
+    const id = setInterval(() => setNow(/* @__PURE__ */ new Date()), 3e4);
+    return () => clearInterval(id);
+  }, [format]);
+  const absolute = formatAbsolute(date, tz);
+  const relative = formatRelative(date, now);
+  const display = format === "relative" ? relative : absolute;
+  const title = format === "both" ? relative : void 0;
+  return /* @__PURE__ */ jsx(
+    "time",
+    {
+      dateTime: iso,
+      title,
+      className: cn("font-mono text-xs text-muted-foreground", className),
+      children: display
+    }
+  );
+}
+function Sparkline({
+  data,
+  width = 140,
+  height = 28,
+  color = "hsl(var(--muted-foreground))",
+  fill,
+  strokeWidth = 1.2,
+  markLast = false
+}) {
+  if (data.length < 2) {
+    return /* @__PURE__ */ jsx("svg", { width, height, "aria-hidden": true });
+  }
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min || 1;
+  const pad = strokeWidth;
+  const innerW = width - pad * 2;
+  const innerH = height - pad * 2;
+  const points = data.map((v, i) => {
+    const x = pad + i / (data.length - 1) * innerW;
+    const y = pad + innerH - (v - min) / range * innerH;
+    return [x, y];
+  });
+  const polyline = points.map(([x, y]) => `${x.toFixed(2)},${y.toFixed(2)}`).join(" ");
+  const firstPt = points[0];
+  const lastPt = points[points.length - 1];
+  let fillPath;
+  if (fill) {
+    fillPath = [
+      `${firstPt[0].toFixed(2)},${(pad + innerH).toFixed(2)}`,
+      ...points.map(([x, y]) => `${x.toFixed(2)},${y.toFixed(2)}`),
+      `${lastPt[0].toFixed(2)},${(pad + innerH).toFixed(2)}`
+    ].join(" ");
+  }
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      "aria-hidden": true,
+      style: { display: "block", overflow: "visible" },
+      children: [
+        fillPath && /* @__PURE__ */ jsx("polygon", { points: fillPath, fill, stroke: "none" }),
+        /* @__PURE__ */ jsx(
+          "polyline",
+          {
+            points: polyline,
+            fill: "none",
+            stroke: color,
+            strokeWidth,
+            strokeLinejoin: "round",
+            strokeLinecap: "round"
+          }
+        ),
+        markLast && /* @__PURE__ */ jsx("circle", { cx: lastPt[0], cy: lastPt[1], r: strokeWidth * 2, fill: color })
+      ]
+    }
+  );
+}
+function LiveIndicator({
+  active,
+  label = "Live",
+  className
+}) {
+  const ariaLabel = active ? `${label} — connected` : `${label} — paused`;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": ariaLabel,
+      className: cn(
+        "inline-flex items-center gap-2 text-xs font-mono",
+        active ? "text-primary" : "text-muted-foreground",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "inline-block w-2 h-2 rounded-full",
+              active ? "bg-primary animate-pulse" : "bg-muted-foreground/40"
+            )
+          }
+        ),
+        label
+      ]
+    }
+  );
+}
 const defaultActivityIconMap = {
   user: {
     icon: Users,
@@ -10601,7 +10796,7 @@ const SidebarButton = ({
             "span",
             {
               className: cn(
-                "text-sm font-medium flex-1 text-left",
+                "text-sm font-medium flex-1 text-left whitespace-nowrap",
                 active ? `text-category-${category}` : "text-foreground"
               ),
               children: label
@@ -15697,14 +15892,12 @@ function createReactApp(config) {
     if (enableRouting) {
       tree = /* @__PURE__ */ jsx(NavigationProvider, { initialNavigation: navigation, children: /* @__PURE__ */ jsx(SidebarProvider, { children: tree }) });
     }
-    if (enableAuth) {
-      const authMode = (auth == null ? void 0 : auth.mode) || "pattern-stack";
-      if (authMode === "none") {
-        setGlobalAuthService(null);
-        tree = /* @__PURE__ */ jsx(NoAuthProvider, { children: tree });
-      } else {
-        tree = /* @__PURE__ */ jsx(AuthProvider, { config: auth, children: tree });
-      }
+    const authMode = (auth == null ? void 0 : auth.mode) || "pattern-stack";
+    if (enableAuth && authMode !== "none") {
+      tree = /* @__PURE__ */ jsx(AuthProvider, { config: auth, children: tree });
+    } else {
+      setGlobalAuthService(null);
+      tree = /* @__PURE__ */ jsx(NoAuthProvider, { children: tree });
     }
     if (enableQuery) {
       tree = /* @__PURE__ */ jsxs(QueryClientProvider, { client: queryClient, children: [
@@ -18854,20 +19047,50 @@ function createEntityHooks(config) {
     /** Key for a specific entity detail query */
     detail: (id) => [...keys.details(), id]
   };
-  function useListSync(filters) {
+  const DEFAULT_PAGE_SIZE = 50;
+  function toPage(raw, requestedPage, requestedPageSize) {
+    if (Array.isArray(raw)) {
+      const items2 = raw;
+      return {
+        items: items2,
+        page: requestedPage,
+        pageCount: 1,
+        total: items2.length,
+        pageSize: requestedPageSize || items2.length || DEFAULT_PAGE_SIZE,
+        nextCursor: null
+      };
+    }
+    const env2 = raw ?? {};
+    const items = Array.isArray(env2.items) ? env2.items : [];
+    const pageSize = typeof env2.pageSize === "number" && env2.pageSize > 0 ? env2.pageSize : requestedPageSize || DEFAULT_PAGE_SIZE;
+    const total = typeof env2.total === "number" ? env2.total : items.length;
+    const pageCount = typeof env2.pageCount === "number" ? env2.pageCount : Math.max(1, Math.ceil(total / Math.max(1, pageSize)));
+    return {
+      items,
+      page: typeof env2.page === "number" ? env2.page : requestedPage,
+      pageCount,
+      total,
+      pageSize,
+      nextCursor: env2.nextCursor ?? null
+    };
+  }
+  function useListSync(params, requestedPage, requestedPageSize) {
     const query = useQuery({
-      queryKey: keys.list(filters),
-      queryFn: () => api.list(filters),
+      queryKey: keys.list(params),
+      queryFn: () => api.list(params),
       staleTime
     });
+    const pageEnvelope = useMemo(
+      () => query.data === void 0 ? void 0 : toPage(query.data, requestedPage, requestedPageSize),
+      [query.data, requestedPage, requestedPageSize]
+    );
     useEffect(() => {
       var _a, _b;
-      if (query.data) {
-        const items = Array.isArray(query.data) ? query.data : query.data.items || [];
-        (_b = (_a = collection.utils) == null ? void 0 : _a.writeUpsert) == null ? void 0 : _b.call(_a, items);
+      if (pageEnvelope) {
+        (_b = (_a = collection.utils) == null ? void 0 : _a.writeUpsert) == null ? void 0 : _b.call(_a, pageEnvelope.items);
       }
-    }, [query.data]);
-    return query;
+    }, [pageEnvelope]);
+    return { query, pageEnvelope };
   }
   function useGetSync(id) {
     const query = useQuery({
@@ -18885,41 +19108,71 @@ function createEntityHooks(config) {
     return query;
   }
   function useList(options = {}) {
-    const { where, orderBy, enabled = true } = options;
-    const sync = useListSync(enabled ? where : void 0);
+    const { where, orderBy, enabled = true, pageSize, cursor } = options;
+    const [page, setPageState] = useState(() => Math.max(1, options.page ?? 1));
+    const params = useMemo(() => {
+      if (!enabled) return void 0;
+      const p = { page };
+      if (pageSize !== void 0) p.pageSize = pageSize;
+      if (cursor !== void 0) p.cursor = cursor;
+      if (orderBy) {
+        p.sort_by = orderBy.field;
+        p.sort_order = orderBy.direction;
+      }
+      if (where) Object.assign(p, where);
+      return p;
+    }, [enabled, page, pageSize, cursor, orderBy, where]);
+    const { query: sync, pageEnvelope } = useListSync(params, page, pageSize ?? DEFAULT_PAGE_SIZE);
+    const pageIds = useMemo(() => {
+      if (!pageEnvelope) return [];
+      return pageEnvelope.items.map((item) => item.id).filter((id) => typeof id === "string");
+    }, [pageEnvelope]);
     const liveResult = useLiveQuery(collection);
     const data = useMemo(() => {
-      let items = liveResult.data ?? [];
-      if (where) {
-        items = items.filter((item) => {
-          return Object.entries(where).every(([key, value]) => {
-            if (value === void 0) return true;
-            const itemValue = item[key];
-            if (Array.isArray(value)) {
-              return value.includes(itemValue);
-            }
-            return itemValue === value;
-          });
-        });
+      var _a, _b;
+      const live = liveResult.data ?? [];
+      const byId = /* @__PURE__ */ new Map();
+      for (const row of live) {
+        const id = row.id;
+        if (typeof id === "string") byId.set(id, row);
       }
-      if (orderBy) {
-        items = [...items].sort((a, b) => {
-          const aVal = a[orderBy.field];
-          const bVal = b[orderBy.field];
-          if (aVal < bVal) return orderBy.direction === "asc" ? -1 : 1;
-          if (aVal > bVal) return orderBy.direction === "asc" ? 1 : -1;
-          return 0;
-        });
+      const rows = [];
+      for (const id of pageIds) {
+        const row = byId.get(id) ?? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ((_b = (_a = collection.state) == null ? void 0 : _a.get) == null ? void 0 : _b.call(_a, id));
+        if (row !== void 0) rows.push(row);
       }
-      return items;
-    }, [liveResult.data, where, orderBy]);
+      return rows;
+    }, [liveResult.data, pageIds]);
+    const pageCount = (pageEnvelope == null ? void 0 : pageEnvelope.pageCount) ?? 1;
+    const total = (pageEnvelope == null ? void 0 : pageEnvelope.total) ?? data.length;
+    const resolvedPageSize = (pageEnvelope == null ? void 0 : pageEnvelope.pageSize) ?? pageSize ?? DEFAULT_PAGE_SIZE;
+    const currentPage = (pageEnvelope == null ? void 0 : pageEnvelope.page) ?? page;
+    const setPage = useCallback(
+      (next2) => {
+        const clamped = Math.max(1, pageCount > 0 ? Math.min(next2, pageCount) : next2);
+        setPageState(clamped);
+      },
+      [pageCount]
+    );
+    const next = useCallback(() => setPage(page + 1), [setPage, page]);
+    const prev = useCallback(() => setPage(page - 1), [setPage, page]);
     return {
       data,
       isLoading: sync.isLoading || liveResult.isLoading,
       isError: sync.isError,
       error: sync.error,
       refetch: sync.refetch,
-      collection
+      collection,
+      page: currentPage,
+      pageCount,
+      total,
+      pageSize: resolvedPageSize,
+      setPage,
+      next,
+      prev,
+      hasNext: currentPage < pageCount,
+      hasPrev: currentPage > 1
     };
   }
   function useGet(id, options = {}) {
@@ -19171,6 +19424,7 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
+  Duration,
   EmptyState,
   EnhancedDataTemplate,
   EntityIcon,
@@ -19190,6 +19444,7 @@ export {
   ListCard,
   ListPageTemplate,
   ListToolbar,
+  LiveIndicator,
   Loading,
   LoginForm,
   LogoutButton,
@@ -19234,6 +19489,7 @@ export {
   SkeletonButton,
   SkeletonCard,
   SkeletonText,
+  Sparkline,
   Spinner,
   StatCard,
   StyleGuide,
@@ -19251,6 +19507,7 @@ export {
   TabsContent,
   TabsList,
   TabsTrigger,
+  Timestamp,
   Toast,
   ToastContainer,
   Tooltip,