@proveanything/smartlinks-utils-ui 0.10.8 → 0.10.9

package/dist/components/RecordsAdmin/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ComponentType, ReactNode } from 'react';
-import { FacetRule, MatchedAt, RecordTarget, AppRecord, MatchResult, ResolveAllEntry } from '@proveanything/smartlinks/dist/types/appObjects';
+import { FacetRule, MatchedAt, AppRecord, RecordTarget, MatchResult, ResolveAllEntry } from '@proveanything/smartlinks/dist/types/appObjects';
+import { ReactNode, ComponentType } from 'react';
 import { LucideIcon } from 'lucide-react';
 import * as _tanstack_query_core from '@tanstack/query-core';
 import * as _proveanything_smartlinks from '@proveanything/smartlinks';
@@ -93,6 +93,21 @@ interface RecordSummary<TData = unknown> {
      * browser uses this to render a friendly rule summary as the row subtitle.
      */
     facetRule?: FacetRule | null;
+    /**
+     * Optional visual hint for the leading status icon on the default row
+     * renderer. When set, takes precedence over the status-derived icon
+     * (configured / inherited / empty). Used by lifecycle rail buckets
+     * (success/warning/etc) and any host that wants per-row iconography
+     * without supplying a full `renderListRow`.
+     */
+    iconHint?: ReactNode;
+    /**
+     * Optional semantic tone for the leading status icon. Drives the icon
+     * colour via `ra-status-icon--<tone>` CSS classes. Has no effect unless
+     * `iconHint` is also set (or the tone is one that maps to a built-in
+     * default icon).
+     */
+    toneHint?: 'success' | 'warning' | 'danger' | 'muted' | 'info' | 'default';
 }
 interface ResolvedRecord<TData = unknown> {
     data: TData | null;
@@ -1048,6 +1063,20 @@ interface ItemsConfig<TData = unknown> {
     cardSize?: 'sm' | 'md' | 'lg';
     /** What the rail shows once an item is open. Default `'siblings'`. */
     railMode?: CollectionRailMode;
+    /**
+     * Optional projector that derives `label` / `subtitle` / `thumbnail`
+     * (and any other `RecordSummary` fields) from a raw record. Runs for
+     * every item in the collection-cardinality right-pane list. The
+     * shell's default tries common keys (`title`, `name`, `label`,
+     * `question`, …) — supply this when your record shape doesn't match
+     * those, or when you want the global / all-items list to read from a
+     * different field.
+     *
+     * `base` already carries the framework-derived fields (id, scope,
+     * status, etc.); return a merged `RecordSummary` (e.g.
+     * `{ ...base, label: rec.data?.headline ?? base.label }`).
+     */
+    toSummary?: (rec: AppRecord, base: RecordSummary<TData>) => RecordSummary<TData>;
 }
 interface UnsavedConfig<TData = unknown> {
     /**
@@ -1163,6 +1192,8 @@ interface Props$f {
 declare const StatusDot: ({ source, status, className }: Props$f) => react_jsx_runtime.JSX.Element;
 
 type StatusTone = 'own' | 'shared' | 'missing';
+/** Semantic tones used by host-driven iconography (e.g. lifecycle buckets). */
+type SemanticTone = 'success' | 'warning' | 'danger' | 'muted' | 'info' | 'default';
 interface Props$e {
     source?: RecordSource;
     status?: RecordStatus;
@@ -1171,8 +1202,21 @@ interface Props$e {
     size?: string;
     /** Optional accessible label — defaults to the tone name. */
     label?: string;
+    /**
+     * Host-supplied icon override. Either a React element (rendered as-is)
+     * or any ReactNode. When set, takes precedence over the status-derived
+     * icon. Pair with `semanticTone` to drive colour.
+     */
+    iconHint?: ReactNode;
+    /**
+     * Host-supplied semantic tone (success/warning/danger/muted/info). When
+     * set, drives the icon colour AND — if no `iconHint` is supplied —
+     * picks a sensible default lucide icon per tone (CheckCircle2 / Alert /
+     * XCircle / MinusCircle / Info).
+     */
+    semanticTone?: SemanticTone;
 }
-declare const StatusIcon: ({ source, status, className, size, label }: Props$e) => react_jsx_runtime.JSX.Element;
+declare const StatusIcon: ({ source, status, className, size, label, iconHint, semanticTone, }: Props$e) => react_jsx_runtime.JSX.Element;
 /** Short label rendered next to / under the row title. */
 declare const statusToneLabel: (tone: StatusTone) => string;
 

package/dist/components/RecordsAdmin/index.js

@@ -6,8 +6,8 @@ import { useFacets } from '../../chunk-4LHF5JB7.js';
 import { cn } from '../../chunk-L7FQ52F5.js';
 import { parsedRefToTarget, parsedRefToScope, matchRecords, scopesEqual, getRecordById, listRecords, upsertRecord, updateRecord, createRecord, removeRecord } from '../../chunk-KA4MKRHL.js';
 export { bulkDelete, bulkUpsert, createRecord, getRecordById, listRecords, matchRecords, parsedRefToScope, parsedRefToTarget, removeRecord, restoreRecord, scopesEqual, upsertRecord } from '../../chunk-KA4MKRHL.js';
-import { createContext, useState, useEffect, useCallback, useMemo, useRef, useContext, useSyncExternalStore, useLayoutEffect, createElement } from 'react';
-import { ChevronDown, Database, Lightbulb, SearchX, Inbox, LayoutGrid, Eye, MoreHorizontal, Download, Upload, Trash2, Copy, Pencil, Plus, CircleDashed, ArrowDownLeft, CheckCircle2, List, SlidersHorizontal, Globe, Tag, Boxes, Layers, Package, Target, Rows3, ChevronRight, Eraser, ClipboardPaste, Box, X, Search, Image, Table, ArrowLeft, ChevronLeft, AlertTriangle, Info, HelpCircle, CornerDownLeft, Circle, CopyPlus, AlertCircle, Undo2, Save, Loader2, XCircle, ArrowRight, Globe2, Check, Settings2 } from 'lucide-react';
+import { createContext, useState, useEffect, useCallback, useMemo, useRef, isValidElement, useContext, useSyncExternalStore, useLayoutEffect, createElement } from 'react';
+import { ChevronDown, Database, Lightbulb, SearchX, Inbox, LayoutGrid, Eye, MoreHorizontal, Download, Upload, Trash2, Copy, Pencil, Plus, CircleDashed, ArrowDownLeft, CheckCircle2, List, SlidersHorizontal, Globe, Tag, Boxes, Layers, Package, Target, Rows3, ChevronRight, Eraser, ClipboardPaste, Box, X, Search, Image, Table, ArrowLeft, ChevronLeft, AlertTriangle, Info, HelpCircle, CornerDownLeft, Circle, MinusCircle, XCircle, CopyPlus, AlertCircle, Undo2, Save, Loader2, ArrowRight, Globe2, Check, Settings2 } from 'lucide-react';
 import { useQuery, useQueryClient, useInfiniteQuery } from '@tanstack/react-query';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
@@ -3250,7 +3250,43 @@ var resolveTone = (source, status) => {
   if (source === "inherited" || status === "partial") return "shared";
   return "missing";
 };
-var StatusIcon = ({ source, status, className, size = "1.05rem", label }) => {
+var SEMANTIC_DEFAULT_ICONS = {
+  success: CheckCircle2,
+  warning: AlertTriangle,
+  danger: XCircle,
+  muted: MinusCircle,
+  info: Info
+};
+var StatusIcon = ({
+  source,
+  status,
+  className,
+  size = "1.05rem",
+  label,
+  iconHint,
+  semanticTone
+}) => {
+  if (semanticTone || iconHint) {
+    const toneClass = semanticTone && semanticTone !== "default" ? `ra-status-icon--${semanticTone}` : "ra-status-icon--muted";
+    let content;
+    if (iconHint) {
+      content = isValidElement(iconHint) ? iconHint : /* @__PURE__ */ jsx(Fragment, { children: iconHint });
+    } else {
+      const Icon2 = semanticTone && semanticTone !== "default" ? SEMANTIC_DEFAULT_ICONS[semanticTone] : MinusCircle;
+      content = /* @__PURE__ */ jsx(Icon2, { className: "w-full h-full" });
+    }
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn("ra-status-icon", toneClass, className),
+        style: { width: size, height: size },
+        role: label ? "img" : void 0,
+        "aria-label": label,
+        "aria-hidden": label ? void 0 : "true",
+        children: content
+      }
+    );
+  }
   const tone = resolveTone(source, status);
   const Icon = DEFAULT_ICONS.status[tone === "own" ? "own" : tone === "shared" ? "inherited" : "missing"];
   return /* @__PURE__ */ jsx(
@@ -3483,7 +3519,9 @@ var DefaultRecordRow = ({ record, ctx, compact = false }) => {
             StatusIcon,
             {
               status: record.status,
-              label: statusToneLabel(tone)
+              label: statusToneLabel(tone),
+              iconHint: record.iconHint,
+              semanticTone: record.toneHint
             }
           ) }),
           /* @__PURE__ */ jsxs("div", { className: "ra-row-body", children: [
@@ -7396,7 +7434,8 @@ function RecordsAdminShellInner(props) {
     renderCard: renderItemCard,
     renderEmpty: renderItemEmpty,
     cardSize: itemCardSize = "md",
-    railMode: collectionRailMode = "siblings"
+    railMode: collectionRailMode = "siblings",
+    toSummary: itemToSummary
   } = items ?? {};
   const {
     strategy: dirtyStrategy = "keep",
@@ -7618,7 +7657,8 @@ function RecordsAdminShellInner(props) {
     // record across the whole collection (anchored, ruled, global) so
     // host-supplied lifecycle grouping has the full picture.
     includeAll: isCollection && activeScope === "all",
-    enabled: isCollection
+    enabled: isCollection,
+    toSummary: itemToSummary
   });
   useEffect(() => {
     if (skipNextItemResetRef.current) {
@@ -8404,8 +8444,11 @@ function RecordsAdminShellInner(props) {
         status: b.items.length ? "configured" : "empty",
         label: b.label,
         subtitle: `${b.items.length} ${itemNoun}${b.items.length === 1 ? "" : "s"}`,
-        // Tone surfaces as a chip; we reuse `badges` for that.
-        badges: b.tone && b.tone !== "default" ? [{ label: b.tone, tone: b.tone === "success" ? "success" : b.tone === "warning" ? "warning" : b.tone === "danger" ? "danger" : "neutral" }] : void 0
+        // Tone + icon drive the row's leading status icon (replacing the
+        // generic green tick / dotted circle for these synthetic rows).
+        // Hosts can override the icon entirely via `groupBy(...).icon`.
+        iconHint: b.icon,
+        toneHint: b.tone
       });
     }
     return rows;