@hybridcore/ui 1.6.5 → 1.6.6

package/dist/components/simple-pivot-table/logic.js

@@ -1,51 +1,117 @@
-import { useThemeProps as h } from "@mui/material";
-import { useMemo as S } from "react";
-const e = new Intl.NumberFormat("en-US", {
-  maximumFractionDigits: 2
-}), w = (s) => {
-  const l = h({ props: s, name: "HCSimplePivotTable" }), {
-    title: u,
-    description: c,
-    data: a = [],
-    dimensions: b = [],
-    values: r = [],
-    sx: f,
-    ...p
-  } = l, g = S(() => {
-    if (a.length === 0)
-      return [
-        { label: "Total", value: e.format(0) },
-        { label: "Avg", value: e.format(0) },
-        { label: "Max", value: e.format(0) },
-        { label: "Min", value: e.format(0) }
-      ];
-    const t = a.map(
-      (n) => r.reduce((m, N) => m + (Number(n[N.dataFieldName]) || 0), 0)
-    ), o = Math.max(...t, 1), x = Math.min(...t, o), i = t.reduce((n, m) => n + m, 0), M = i / a.length;
-    return [
-      { label: "Total", value: e.format(i) },
-      { label: "Avg", value: e.format(M) },
-      { label: "Max", value: e.format(o) },
-      { label: "Min", value: e.format(x) }
+import { useThemeProps as z } from "@mui/material";
+import j from "dayjs";
+import { useRef as A, useState as h, useMemo as M, useEffect as w } from "react";
+import { humanizeLabel as y, formatValue as Y, resolveConditionalStyle as O } from "../charts/_common/format.js";
+const U = (t) => {
+  const n = t.toLowerCase();
+  return n.includes("year") ? "YYYY" : n.includes("month") ? "MMM YYYY" : n.includes("hour") || n.includes("minute") || n.includes("time") ? "DD MMM YYYY HH:mm" : "DD MMM YYYY";
+}, W = (t) => {
+  var n;
+  return ((n = t.label) == null ? void 0 : n.trim()) || y(t.value);
+}, g = (t) => {
+  var n;
+  return ((n = t.label) == null ? void 0 : n.trim()) || y(t.name);
+}, X = (t, n) => {
+  if (t == null || t === "") return "—";
+  if (n.type !== "date") return String(t);
+  const s = j(t);
+  return s.isValid() ? s.format(n.dateFormat || U(n.value)) : String(t);
+}, L = (t, n) => {
+  const s = t.map((a) => Number(a[n])).filter((a) => Number.isFinite(a));
+  if (s.length === 0) return null;
+  const f = s.length, i = s.reduce((a, u) => a + u, 0);
+  return {
+    count: f,
+    sum: i,
+    avg: i / f,
+    min: Math.min(...s),
+    max: Math.max(...s)
+  };
+}, C = (t) => t.key === "Meta" || t.key === "Control", J = (t) => {
+  const n = z({ props: t, name: "HCSimplePivotTable" }), {
+    title: s,
+    description: f,
+    data: i = [],
+    dimensions: a = [],
+    values: u = [],
+    sx: E,
+    ...x
+  } = n, b = A(null), [D, F] = h(!1), [c, S] = h(null), k = M(() => typeof navigator < "u" && /Mac|iPhone|iPad/.test(navigator.platform) ? "⌘" : "Ctrl", []);
+  w(() => {
+    const e = b.current;
+    if (!e) return;
+    const o = () => F(e.scrollHeight > e.clientHeight + 1);
+    o();
+    const l = new ResizeObserver(o);
+    return l.observe(e), () => l.disconnect();
+  }, [i, a, u]), w(() => {
+    const e = b.current;
+    if (!e) return;
+    const o = () => {
+      e.style.overflow = "auto";
+    }, l = () => {
+      e.style.overflow = "hidden";
+    };
+    l();
+    const m = (r) => {
+      C(r) && o();
+    }, v = (r) => {
+      C(r) && l();
+    }, p = (r) => {
+      if (!(r.ctrlKey || r.metaKey)) return;
+      r.preventDefault(), o();
+      const d = r.deltaMode === 1 ? 16 : 1;
+      e.scrollTop += r.deltaY * d, e.scrollLeft += r.deltaX * d;
+    };
+    return window.addEventListener("keydown", m), window.addEventListener("keyup", v), window.addEventListener("blur", l), e.addEventListener("wheel", p, { passive: !1 }), () => {
+      window.removeEventListener("keydown", m), window.removeEventListener("keyup", v), window.removeEventListener("blur", l), e.removeEventListener("wheel", p);
+    };
+  }, []);
+  const P = M(
+    () => u.map((e) => {
+      const o = L(i, e.dataFieldName);
+      return o ? { field: e.dataFieldName, name: e.name, ...o } : null;
+    }).filter((e) => e !== null),
+    [u, i]
+  ), H = M(() => {
+    var r;
+    if (!c) return null;
+    const e = u.find((d) => d.dataFieldName === c), o = e ? g(e) : y(c), l = L(i, c);
+    if (!l)
+      return { field: c, name: o, items: [{ label: "Count", value: String(i.length) }] };
+    const m = (d) => Y(d, e == null ? void 0 : e.format), v = !!((r = e == null ? void 0 : e.format) != null && r.suffix) && e.format.suffix.includes("%"), p = [
+      { label: "Count", value: String(l.count) },
+      ...v ? [] : [{ label: "Sum", value: m(l.sum) }],
+      { label: "Avg", value: m(l.avg) },
+      { label: "Min", value: m(l.min) },
+      { label: "Max", value: m(l.max) }
     ];
-  }, [a, r]), v = (t) => {
-    if (t == null || t === "") return "—";
-    const o = Number(t);
-    return Number.isNaN(o) ? String(t) : e.format(o);
-  }, d = { ...l };
+    return { field: c, name: o, items: p };
+  }, [c, u, i]), N = (e, o) => Y(e, o), K = (e, o) => O(e, o), T = (e) => S((o) => o === e ? null : e), R = () => S(null), V = { ...n };
   return {
-    title: u,
-    description: c,
-    dimensions: b,
-    values: r,
-    data: a,
-    aggregations: g,
-    formatCell: v,
-    ownerState: d,
-    sx: f,
-    other: p
+    title: s,
+    description: f,
+    dimensions: a,
+    values: u,
+    data: i,
+    summaries: P,
+    selectedField: c,
+    selectedSummary: H,
+    selectColumn: T,
+    clearSelection: R,
+    dimensionLabel: W,
+    valueLabel: g,
+    formatDimensionValue: X,
+    formatCell: N,
+    getCellStyle: K,
+    ownerState: V,
+    scrollRef: b,
+    canScroll: D,
+    scrollModifierLabel: k,
+    sx: E,
+    other: x
   };
 };
 export {
-  w as useSimplePivotTableLogic
+  J as useSimplePivotTableLogic
 };

package/dist/components/simple-pivot-table/styled.js

@@ -1,20 +1,23 @@
-import { styled as e, Paper as l, Box as t } from "@mui/material";
-const i = e(l, {
+import { styled as e, Paper as a, Box as t, alpha as l } from "@mui/material";
+const n = e(a, {
   name: "HCSimplePivotTable",
   slot: "Root",
   shouldForwardProp: (o) => o !== "ownerState"
 })(() => ({
   height: "100%",
   display: "flex",
-  flexDirection: "column"
-})), n = e(t, {
+  flexDirection: "column",
+  "&:hover .HCSimplePivotTable-scrollHint": {
+    opacity: 1
+  }
+})), r = e(t, {
   name: "HCSimplePivotTable",
   slot: "Header",
   shouldForwardProp: (o) => o !== "ownerState"
 })(({ theme: o }) => ({
   flex: "0 0 auto",
   padding: o.spacing(1.25, 2)
-})), r = e(t, {
+})), p = e(t, {
   name: "HCSimplePivotTable",
   slot: "Content",
   shouldForwardProp: (o) => o !== "ownerState"
@@ -24,8 +27,24 @@ const i = e(l, {
   flexDirection: "column",
   flex: "1 1 auto",
   minHeight: 0,
-  overflow: "auto"
-})), p = e(t, {
+  overflow: "hidden"
+})), d = e(t, {
+  name: "HCSimplePivotTable",
+  slot: "ScrollHint",
+  shouldForwardProp: (o) => o !== "ownerState"
+})(({ theme: o }) => ({
+  // Pinned to the left of the footer; aggregations stay grouped on the right.
+  marginRight: "auto",
+  padding: o.spacing(0.25, 1),
+  borderRadius: o.shape.borderRadius,
+  border: `1px solid ${o.palette.divider}`,
+  backgroundColor: l(o.palette.background.paper, 0.85),
+  color: o.palette.text.secondary,
+  pointerEvents: "none",
+  userSelect: "none",
+  opacity: 0.5,
+  transition: o.transitions.create("opacity")
+})), s = e(t, {
   name: "HCSimplePivotTable",
   slot: "Footer",
   shouldForwardProp: (o) => o !== "ownerState"
@@ -38,8 +57,9 @@ const i = e(l, {
   gap: o.spacing(1)
 }));
 export {
-  r as SimplePivotTableContent,
-  p as SimplePivotTableFooter,
-  n as SimplePivotTableHeader,
-  i as SimplePivotTableRoot
+  p as SimplePivotTableContent,
+  s as SimplePivotTableFooter,
+  r as SimplePivotTableHeader,
+  n as SimplePivotTableRoot,
+  d as SimplePivotTableScrollHint
 };

package/dist/main.d.ts

@@ -84,11 +84,6 @@ export declare namespace AccessUtils {
 
 export { AdapterDayjs }
 
-declare interface Aggregation {
-    label: string;
-    value: number | string;
-}
-
 declare function alert_2(title: string, message: string): Promise<unknown>;
 export { alert_2 as alert }
 
@@ -222,6 +217,10 @@ export declare interface CardProps {
 export declare interface ChartDimension {
     value: string;
     type: string;
+    /** Display label override; falls back to a humanized `value` when unset. */
+    label?: string;
+    /** dayjs format for date-typed dimensions; falls back to a grain-based default. */
+    dateFormat?: string;
 }
 
 export declare type ChartNameType =
@@ -270,6 +269,10 @@ export declare interface ChartValue {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     operator: any;
     dataFieldName: string;
+    /** Optional per-value formatting + conditional styling. */
+    format?: ValueFormat;
+    /** Display label override; falls back to a humanized `name` when unset. */
+    label?: string;
 }
 
 export declare const ChartWrapper: (inProps: ChartWrapperProps) => JSX_2.Element;
@@ -314,10 +317,18 @@ export declare type ColorPickerComponentOverride<Theme = unknown> = {
 export declare interface ColorPickerProps {
     value: string;
     swatches?: string[];
+    /**
+     * "inline" (default) — the legacy swatch row + advanced-picker icon.
+     * "popover" — a single swatch/hex trigger button that opens the familiar
+     * saturation + hue + hex picker with preset swatches in a popover.
+     */
+    variant?: ColorPickerVariant;
     sx?: SxProps<Theme>;
     onChange(value: string): void;
 }
 
+declare type ColorPickerVariant = "inline" | "popover";
+
 export declare const ColumnLineMix: (inProps: ColumnLineMixProps) => JSX_2.Element;
 
 export declare type ColumnLineMixComponentOverride<Theme = unknown> = {
@@ -327,6 +338,16 @@ export declare type ColumnLineMixComponentOverride<Theme = unknown> = {
 
 export declare type ColumnLineMixProps = ChartProps;
 
+declare interface ColumnSummary {
+    field: string;
+    name: string;
+    count: number;
+    sum: number;
+    avg: number;
+    min: number;
+    max: number;
+}
+
 export declare interface CompositeListRangeProps {
     value: SIMULATION.RandomInfoComposite;
     mapboxAccessToken: string;
@@ -336,6 +357,26 @@ export declare interface CompositeListRangeProps {
     onChange(value: SIMULATION.RandomInfoComposite): void;
 }
 
+export declare type ConditionalOp =
+| "lt"
+| "lte"
+| "gt"
+| "gte"
+| "eq"
+| "neq"
+| "between";
+
+export declare interface ConditionalRule {
+    op: ConditionalOp;
+    value: number;
+    /** Upper bound, used only when `op` is "between". */
+    value2?: number;
+    /** Text color applied when the rule matches (theme token path or CSS color). */
+    color?: string;
+    /** Background color applied when the rule matches. */
+    backgroundColor?: string;
+}
+
 export declare const ConditionalWrapper: ({ condition, wrapper, children, }: ConditionalWrapperProps) => JSX_2.Element;
 
 declare interface ConditionalWrapperProps {
@@ -645,6 +686,13 @@ export declare const FlexRow: StyledComponent<BoxOwnProps<Theme> & Omit<Omit<Det
 ref?: ((instance: HTMLDivElement | null) => void | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | RefObject<HTMLDivElement> | null | undefined;
 }, keyof BoxOwnProps<Theme>> & MUIStyledCommonProps<Theme>, {}, {}>;
 
+/**
+ * Format a raw value for display: numbers get locale grouping + the configured
+ * decimals, then the prefix/suffix are wrapped around the result. Non-numeric
+ * values are returned as-is; empty values become an em dash.
+ */
+export declare const formatValue: (value: unknown, format?: ValueFormat, empty?: string) => string;
+
 export declare const GeometryDraw: ({ mapId, mapboxAccessToken, value: defaultValue, disableActions, variant, defaultExtent, onCancel, onSubmit, onChange, }: GeometryDrawProps) => JSX_2.Element;
 
 export declare interface GeometryDrawProps {
@@ -763,6 +811,13 @@ export declare interface HighlightLineChartProps {
     sx?: SxProps<Theme>;
 }
 
+/**
+ * Turn a raw field key into a human label: snake_case / kebab-case / camelCase
+ * → Title Case (e.g. "total_revenue" / "totalRevenue" → "Total Revenue"). Used
+ * as the default display label when no explicit label is set.
+ */
+export declare const humanizeLabel: (raw: string) => string;
+
 export declare const IconButton: (props: IconButtonProps) => JSX_2.Element;
 
 export declare type IconButtonComponentOverride<Theme = unknown> = {
@@ -1146,9 +1201,15 @@ export declare interface MetricCardProps {
 
     // Rendered verbatim around the formatted number, e.g. valuePrefix "€ " → "€ 1,577",
     // valueSuffix " kg" → "1,577 kg". Include any spacing in the string itself.
+    // Superseded by `format.prefix` / `format.suffix` when those are set.
     valuePrefix?: string;
     valueSuffix?: string;
 
+    // Per-value formatting + conditional coloring (shared with charts/pivot).
+    // `format.prefix`/`format.suffix`/`format.decimals` control the displayed
+    // number; `format.conditionalRules` color the value by threshold.
+    format?: ValueFormat;
+
     showChange?: boolean;
     changeType?: MetricChangeType;
 
@@ -1572,6 +1633,16 @@ export declare type RelativeDatePreset =
 
 export declare const removeNotification: (id: string) => void;
 
+/**
+ * Resolve the color/background contributed by the first matching conditional
+ * rule. Returns an empty object when the value is non-numeric or nothing
+ * matches, so callers can spread it safely.
+ */
+export declare const resolveConditionalStyle: (value: unknown, format?: ValueFormat) => {
+    color?: string;
+    backgroundColor?: string;
+};
+
 export declare const ScrollDrag: (props: ScrollDragProps) => JSX_2.Element;
 
 export declare type ScrollDragComponentOverride<Theme = unknown> = {
@@ -1671,7 +1742,8 @@ export declare interface SimplePivotTableProps {
 
 export declare interface SimplePivotTableSnapshot
 extends Omit<SimplePivotTableProps, "sx"> {
-    aggregations: Aggregation[];
+    /** Per-(numeric)-column summary stats — for export/snapshot context. */
+    summaries: ColumnSummary[];
 }
 
 export declare const SortableList: (props: SortableListProps) => JSX_2.Element;
@@ -2091,6 +2163,23 @@ export declare interface UploaderProps {
 
 export declare type UploaderType = "IMAGE" | "VIDEO" | "FILE" | "AUDIO" | "OTHER";
 
+/**
+ * Per-value display configuration. Numbers are formatted, then wrapped with
+ * `prefix`/`suffix`; the first matching `conditionalRules` entry contributes
+ * the cell/value color. Presentation only — the underlying numeric value is
+ * untouched so aggregation, sorting, and conditional rules keep working.
+ */
+export declare interface ValueFormat {
+    /** Rendered verbatim before the number, e.g. "$" or "€ ". Include spacing. */
+    prefix?: string;
+    /** Rendered verbatim after the number, e.g. " kg" or "%". Include spacing. */
+    suffix?: string;
+    /** Fixed number of fraction digits; defaults to "up to 2" when unset. */
+    decimals?: number;
+    /** First matching rule wins. */
+    conditionalRules?: ConditionalRule[];
+}
+
 export declare interface VariableDataType {
     title: string;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2551,7 +2640,7 @@ declare module "@mui/material/styles" {
 
 declare module "@mui/material/styles" {
   interface ComponentNameToClassKey {
-    HCColorPicker: "root" | "radio" | "pickerWrapper";
+    HCColorPicker: "root" | "radio" | "pickerWrapper" | "trigger" | "swatch";
   }
 
   interface ComponentsPropsList {
@@ -3403,7 +3492,12 @@ declare module "@mui/material/styles" {
 
 declare module "@mui/material/styles" {
   interface ComponentNameToClassKey {
-    HCSimplePivotTable: "root" | "header" | "content" | "footer";
+    HCSimplePivotTable:
+      | "root"
+      | "header"
+      | "content"
+      | "footer"
+      | "scrollHint";
   }
 
   interface ComponentsPropsList {