@elaraai/e3-ui-components 1.0.31 → 1.0.33

package/dist/decision/grouping.d.ts

@@ -0,0 +1,23 @@
+import { Decision, UrgencyKind } from './types.js';
+/** Section labels for the built-in urgency grouping. */
+export declare const URGENCY_GROUP_LABEL: Record<UrgencyKind, string>;
+/** One Group-by toolbar option — a built-in key or a custom accessor facet. */
+export interface GroupOption {
+    key: string;
+    label: string;
+    accessor?: (d: Decision) => string;
+}
+/** One resolved queue section. */
+export interface QueueGroup {
+    label: string;
+    decisions: Decision[];
+    pastSla: number;
+    total: number;
+    /** Hosts the bulk Accept all (the urgency grouping's Routine section). */
+    bulk: boolean;
+}
+/** Folds the sorted rows into sections for the active grouping. Rows arrive
+ *  urgency-sorted, so first-appearance order gives Overdue → Due today →
+ *  Routine for the built-in and stable insertion order for the rest. */
+export declare function buildGroups(rows: Decision[], option: GroupOption): QueueGroup[];
+//# sourceMappingURL=grouping.d.ts.map

package/dist/decision/grouping.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grouping.d.ts","sourceRoot":"","sources":["../../src/decision/grouping.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;;;;;GAOG;AAEH,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,WAAW,EAAE,MAAM,YAAY,CAAC;AAE7D,wDAAwD;AACxD,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAI3D,CAAC;AAEF,+EAA+E;AAC/E,MAAM,WAAW,WAAW;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,MAAM,CAAC;CACtC;AAED,kCAAkC;AAClC,MAAM,WAAW,UAAU;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,IAAI,EAAE,OAAO,CAAC;CACjB;AAED;;wEAEwE;AACxE,wBAAgB,WAAW,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,MAAM,EAAE,WAAW,GAAG,UAAU,EAAE,CA2B/E"}

package/dist/decision/queue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"queue.d.ts","sourceRoot":"","sources":["../../src/decision/queue.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAwBH,OAAO,EAAW,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAkBxD,KAAK,kBAAkB,GAAG,WAAW,CAAC,OAAO,aAAa,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;AA2T7E,MAAM,WAAW,4BAA4B;IACzC,KAAK,EAAE,kBAAkB,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,uBAAuB,oEA6M3B,CAAC;AAIH,OAAO,EAAE,uBAAuB,EAAE,CAAC"}
+{"version":3,"file":"queue.d.ts","sourceRoot":"","sources":["../../src/decision/queue.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AA8BH,OAAO,EAAW,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAoBxD,KAAK,kBAAkB,GAAG,WAAW,CAAC,OAAO,aAAa,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;AAiX7E,MAAM,WAAW,4BAA4B;IACzC,KAAK,EAAE,kBAAkB,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,uBAAuB,oEA2S3B,CAAC;AAIH,OAAO,EAAE,uBAAuB,EAAE,CAAC"}

package/dist/index.cjs

@@ -62928,6 +62928,39 @@ const URGENCY_RANK = {
   due: 1,
   routine: 2
 };
+const URGENCY_GROUP_LABEL = {
+  overdue: "Overdue",
+  due: "Due today",
+  routine: "Routine"
+};
+function buildGroups(rows, option) {
+  if (option.key === "none") {
+    return [{ label: "", decisions: rows, pastSla: 0, total: 0, bulk: false }];
+  }
+  const labelFor = (d2) => {
+    var _a2;
+    return option.key === "urgency" ? URGENCY_GROUP_LABEL[d2.urgency.type] : option.key === "kind" ? d2.kind : ((_a2 = option.accessor) == null ? void 0 : _a2.call(option, d2)) ?? "";
+  };
+  const out = /* @__PURE__ */ new Map();
+  for (const d2 of rows) {
+    const label = labelFor(d2);
+    let group2 = out.get(label);
+    if (group2 === void 0) {
+      group2 = {
+        label,
+        decisions: [],
+        pastSla: 0,
+        total: 0,
+        bulk: option.key === "urgency" && d2.urgency.type === "routine"
+      };
+      out.set(label, group2);
+    }
+    group2.decisions.push(d2);
+    group2.total += d2.value;
+    if (d2.urgency.type === "overdue") group2.pastSla += 1;
+  }
+  return [...out.values()];
+}
 const FACETS = [
   { key: "evidence", label: "Evidence" },
   { key: "options", label: "Options" },
@@ -63044,7 +63077,8 @@ const Row = React.memo(function Row2({ decision, handle, selected: selected2, na
     ),
     /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: "button", css: button({ variant: "ghost", size: "xs" }), onClick: handleReject, children: "Reject" })
   ] });
-  const title = /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { minW: 0, cursor: selected2 ? void 0 : "pointer", onClick: handleSelect, children: [
+  const fullTitle = `${decision.kind} · ${decision.title}${summary !== void 0 ? ` · ${summary}` : ""}`;
+  const title = /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { css: rs.titleText, title: fullTitle, cursor: selected2 ? void 0 : "pointer", onClick: handleSelect, children: [
     /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "span", fontWeight: "semibold", children: decision.kind }),
     /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "span", color: "fg.subtle", children: " · " }),
     /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "span", children: decision.title }),
@@ -63129,10 +63163,39 @@ const RoutineGroup = React.memo(function RoutineGroup2({ routine, acceptAll, lea
     ] })
   ] });
 });
+const GroupHead = React.memo(function GroupHead2({ group: group2, collapsible, collapsed, onToggle, acceptAll }) {
+  const dq = react.useSlotRecipe({ key: "decisionQueue" });
+  const button = react.useRecipe({ key: "button" });
+  const rs = dq({});
+  const format2 = group2.decisions[0] ? eastUiComponents.getSomeorUndefined(group2.decisions[0].format) : void 0;
+  const handleToggle = React.useCallback(() => {
+    if (collapsible) onToggle(group2.label);
+  }, [collapsible, onToggle, group2.label]);
+  const handleAcceptAll = React.useCallback((e3) => {
+    e3.stopPropagation();
+    if (acceptAll) acceptAll(group2.decisions);
+  }, [acceptAll, group2.decisions]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { css: rs.groupHead, ...collapsible ? { "data-collapsible": "" } : {}, onClick: handleToggle, children: [
+    collapsible && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: "span", css: rs.groupCaret, children: collapsed ? "▸" : "▾" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { as: "span", css: rs.groupLabel, children: [
+      group2.label,
+      " · ",
+      group2.decisions.length
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { as: "span", css: rs.groupSummary, children: [
+      eastUiComponents.formatTick(group2.total, format2),
+      group2.pastSla > 0 ? ` · ${group2.pastSla} past SLA` : ""
+    ] }),
+    acceptAll && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: "button", css: button({ variant: "solid", size: "xs" }), onClick: handleAcceptAll, children: "Accept all" })
+  ] });
+});
 const EastChakraDecisionQueue = React.memo(function EastChakraDecisionQueue2({ value, storageKey }) {
   var _a2;
   const eyebrow = react.useSlotRecipe({ key: "eyebrowRow" });
   const es = eyebrow({});
+  const dq = react.useSlotRecipe({ key: "decisionQueue" });
+  const qs = dq({});
+  const chip = react.useRecipe({ key: "chip" });
   const handleRef = value.handle;
   const handle = useDecisionHandle(handleRef);
   const decisions = handle.decisions;
@@ -63201,6 +63264,25 @@ const EastChakraDecisionQueue = React.memo(function EastChakraDecisionQueue2({ v
     return facets === void 0 ? null : new Set(facets.map((f2) => f2.type));
   }, [value.facets]);
   const defaultExpanded = eastUiComponents.getSomeorUndefined(value.defaultExpanded);
+  const groupDefs = React.useMemo(
+    () => eastUiComponents.getSomeorUndefined(value.groups) ?? [],
+    [value.groups]
+  );
+  const defaultGroupKey = eastUiComponents.getSomeorUndefined(value.groupBy);
+  const grouped = defaultGroupKey !== void 0;
+  const collapsible = grouped && (eastUiComponents.getSomeorUndefined(value.collapsible) ?? true);
+  const groupOptions = React.useMemo(() => [
+    { key: "urgency", label: "Urgency" },
+    { key: "kind", label: "Kind" },
+    ...groupDefs.map((g2) => ({ key: g2.label, label: g2.label, accessor: g2.value })),
+    { key: "none", label: "None" }
+  ], [groupDefs]);
+  const { state: toolbar, setState: setToolbar } = eastUiComponents.usePersistedState(`${storageKey}.toolbar`, {
+    groupKey: defaultGroupKey ?? "urgency",
+    // The urgency grouping's routine tail ships collapsed.
+    collapsed: [URGENCY_GROUP_LABEL.routine]
+  });
+  const activeOption = groupOptions.find((o2) => o2.key === toolbar.groupKey) ?? groupOptions[0];
   const selectedId = handle.selected ?? (defaultExpanded == null ? void 0 : defaultExpanded.id) ?? null;
   const resolve2 = React.useCallback((ds, hook2, reason) => {
     if (hook2) for (const d2 of ds) {
@@ -63215,15 +63297,15 @@ const EastChakraDecisionQueue = React.memo(function EastChakraDecisionQueue2({ v
   const apply2 = React.useCallback((d2) => resolve2([d2], onApply, "apply"), [resolve2, onApply]);
   const reject2 = React.useCallback((d2) => resolve2([d2], onReject, "reject"), [resolve2, onReject]);
   const acceptAll = React.useCallback((ds) => resolve2(ds, onApply, "apply"), [resolve2, onApply]);
-  const { active, routine, pastSla, visible } = React.useMemo(() => {
+  const { merged, active, routine, pastSla, visible } = React.useMemo(() => {
     const scoped = decisions ?? [];
     const now2 = /* @__PURE__ */ new Date();
     const live = sliceState !== null ? scoped.filter((d2) => internal$2.sliceMatches(sliceState, DECISION_SLICE_CONFIG, d2, now2)) : scoped;
-    const merged = [...live];
+    const merged2 = [...live];
     for (const { decision } of exiting.values()) {
-      if (!merged.some((d2) => d2.id === decision.id)) merged.push(decision);
+      if (!merged2.some((d2) => d2.id === decision.id)) merged2.push(decision);
     }
-    merged.sort((a2, b2) => {
+    merged2.sort((a2, b2) => {
       var _a3, _b2;
       const r2 = URGENCY_RANK[a2.urgency.type] - URGENCY_RANK[b2.urgency.type];
       if (r2 !== 0) return r2;
@@ -63233,17 +63315,55 @@ const EastChakraDecisionQueue = React.memo(function EastChakraDecisionQueue2({ v
       return b2.value - a2.value;
     });
     return {
-      active: merged.filter((d2) => d2.urgency.type !== "routine"),
-      routine: merged.filter((d2) => d2.urgency.type === "routine"),
-      pastSla: merged.filter((d2) => d2.urgency.type === "overdue").length,
+      merged: merged2,
+      active: merged2.filter((d2) => d2.urgency.type !== "routine"),
+      routine: merged2.filter((d2) => d2.urgency.type === "routine"),
+      pastSla: merged2.filter((d2) => d2.urgency.type === "overdue").length,
       visible: live.length
     };
   }, [decisions, exiting, sliceState]);
+  const groups = React.useMemo(
+    () => grouped ? buildGroups(merged, activeOption) : [],
+    [grouped, merged, activeOption]
+  );
+  const allCollapsed = groups.length > 0 && groups.every((g2) => g2.label === "" || toolbar.collapsed.includes(g2.label));
+  const toggleGroup = React.useCallback((label) => {
+    setToolbar((prev2) => ({
+      ...prev2,
+      collapsed: prev2.collapsed.includes(label) ? prev2.collapsed.filter((l2) => l2 !== label) : [...prev2.collapsed, label]
+    }));
+  }, [setToolbar]);
+  const toggleAll = React.useCallback(() => {
+    const next2 = allCollapsed ? [] : groups.map((g2) => g2.label).filter((l2) => l2 !== "");
+    setToolbar((prev2) => ({ ...prev2, collapsed: next2 }));
+  }, [setToolbar, allCollapsed, groups]);
+  const setGroupKey = React.useCallback((key) => {
+    setToolbar((prev2) => prev2.groupKey === key ? prev2 : { ...prev2, groupKey: key });
+  }, [setToolbar]);
   const exitingReasons = React.useMemo(() => {
     const m2 = /* @__PURE__ */ new Map();
     for (const [id3, e3] of exiting) m2.set(id3, e3.reason);
     return m2;
   }, [exiting]);
+  const renderRow = (d2) => /* @__PURE__ */ jsxRuntime.jsx(
+    Row,
+    {
+      decision: d2,
+      handle,
+      selected: selectedId === d2.id,
+      narrow,
+      leverPayloads,
+      modify,
+      evidence,
+      defaultFacet,
+      facetInclude,
+      apply: apply2,
+      reject: reject2,
+      leaving: exitingReasons.get(d2.id),
+      storageKey
+    },
+    d2.id
+  );
   if (decisions === null) {
     return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { layerStyle: "surface.frameless", p: "16px", children: /* @__PURE__ */ jsxRuntime.jsx(react.Text, { color: "fg.muted", fontSize: "13px", children: "Loading decisions…" }) });
   }
@@ -63271,33 +63391,45 @@ const EastChakraDecisionQueue = React.memo(function EastChakraDecisionQueue2({ v
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
+    grouped && /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { css: qs.toolbar, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: "span", css: qs.segLabel, children: "Group by" }),
+      groupOptions.map((o2) => /* @__PURE__ */ jsxRuntime.jsx(
+        react.Box,
+        {
+          as: "button",
+          css: { ...chip({ tone: toolbar.groupKey === o2.key ? "brand" : "neutral", size: "sm" }), cursor: "pointer" },
+          "aria-pressed": toolbar.groupKey === o2.key,
+          onClick: () => setGroupKey(o2.key),
+          children: o2.label
+        },
+        o2.key
+      )),
+      collapsible && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: "button", css: qs.collapseAll, onClick: toggleAll, children: allCollapsed ? "Expand all" : "Collapse all" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
       react.Box,
       {
         maxHeight: eastUiComponents.getSomeorUndefined(value.maxHeight),
         overflowY: value.maxHeight.type === "some" ? "auto" : void 0,
-        children: [
-          active.map((d2) => /* @__PURE__ */ jsxRuntime.jsx(
-            Row,
-            {
-              decision: d2,
-              handle,
-              selected: selectedId === d2.id,
-              narrow,
-              leverPayloads,
-              modify,
-              evidence,
-              defaultFacet,
-              facetInclude,
-              apply: apply2,
-              reject: reject2,
-              leaving: exitingReasons.get(d2.id),
-              storageKey
-            },
-            d2.id
-          )),
+        children: grouped ? groups.map((g2) => {
+          const isCollapsed = collapsible && g2.label !== "" && toolbar.collapsed.includes(g2.label);
+          return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { children: [
+            g2.label !== "" && /* @__PURE__ */ jsxRuntime.jsx(
+              GroupHead,
+              {
+                group: g2,
+                collapsible,
+                collapsed: isCollapsed,
+                onToggle: toggleGroup,
+                acceptAll: g2.bulk ? acceptAll : void 0
+              }
+            ),
+            !isCollapsed && g2.decisions.map(renderRow)
+          ] }, g2.label || "_flat");
+        }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          active.map(renderRow),
           /* @__PURE__ */ jsxRuntime.jsx(RoutineGroup, { routine, acceptAll, leaving: exitingReasons, narrow })
-        ]
+        ] })
       }
     )
   ] });