@hjmds/react 1.19.0 → 1.21.0

package/dist/styles.layered.css

@@ -1219,6 +1219,149 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-data-table__table tr[data-disabled] { color: var(--hjm-color-text-weak); }
 .hjm-data-table__state { margin: 0; color: var(--hjm-color-text-muted); }
 .hjm-data-table__footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--hjm-space-sm); }
+/* Pinned start columns (2026-10-14): the table scrolls inside its own box so sticky cells have a
+   scroll container; pinned cells paint the canvas so scrolled text never shows through. */
+.hjm-data-table__scroll { overflow-x: auto; min-inline-size: 0; }
+.hjm-data-table__scroll > .hjm-data-table__table { inline-size: max-content; min-inline-size: 100%; }
+.hjm-data-table__table .hjm-data-table__pinned { position: sticky; z-index: 1; background: var(--hjm-color-bg); }
+.hjm-data-table__table .hjm-data-table__pinned-edge { box-shadow: inset -1px 0 0 var(--hjm-color-border); }
+.hjm-data-table__table .hjm-data-table__pinned-edge:dir(rtl) { box-shadow: inset 1px 0 0 var(--hjm-color-border); }
+.hjm-data-table__table tfoot td { border-block-start: 1px solid var(--hjm-color-border); border-block-end: 0; font-weight: var(--hjm-font-weight-semibold); }
+
+/* DataTable family (2026-10-14): header bands, row groups, sub-row indent, tone/heat, bounded
+   height. Colors mirror dataTableFamilyRecipe; heat is a background-image so pinned cells keep
+   their opaque canvas under the tint. */
+.hjm-data-table__bands > th,
+.hjm-data-table__bands > td { padding-block-end: 0; border-block-end: 0; }
+.hjm-data-table__band { text-align: center; color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); }
+.hjm-data-table__band > span { display: block; padding-block-end: var(--hjm-space-xxs); border-block-end: 1px solid color-mix(in srgb, var(--hjm-color-border) 70%, transparent); }
+.hjm-data-table__group > th {
+  padding-block: var(--hjm-space-xs);
+  background: var(--hjm-color-surface-alt);
+  color: var(--hjm-color-text-muted);
+  font-size: var(--hjm-type-label-size);
+  font-weight: var(--hjm-font-weight-bold);
+  text-align: start;
+}
+/* The label stays in view while a wide table scrolls sideways. */
+.hjm-data-table__group > th > span { position: sticky; inset-inline-start: var(--hjm-space-md); }
+.hjm-data-table__table td[data-depth] { padding-inline-start: calc(var(--hjm-space-md) + var(--hjm-data-table-indent, 0px)); }
+.hjm-data-table[data-density="compact"] .hjm-data-table__table td[data-depth] { padding-inline-start: calc(var(--hjm-space-sm) + var(--hjm-data-table-indent, 0px)); }
+.hjm-table-family__heat { background-image: linear-gradient(var(--hjm-data-table-heat), var(--hjm-data-table-heat)); }
+.hjm-data-table__table td[data-tone], .hjm-data-table__table td[data-heat] { font-variant-numeric: tabular-nums; }
+.hjm-data-table__scroll[data-bounded] { overflow: auto; }
+/* Sticky thead (not each th) keeps band and leaf rows stacked without measuring the band height. */
+.hjm-data-table__scroll[data-bounded] thead { position: sticky; inset-block-start: 0; z-index: 2; background: var(--hjm-color-bg); box-shadow: inset 0 -1px 0 var(--hjm-color-border); }
+
+/* LineScore / MatrixTable / ComparisonTable ---------------------------------- */
+.hjm-table-family { min-inline-size: 0; overflow-x: auto; border-radius: var(--hjm-radius-md); background: var(--hjm-color-surface); }
+.hjm-line-score__table, .hjm-matrix-table__table { inline-size: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
+.hjm-line-score__table th, .hjm-line-score__table td { padding: var(--hjm-space-xs) var(--hjm-space-xxs); text-align: center; white-space: nowrap; }
+.hjm-line-score__table thead th { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); font-weight: var(--hjm-font-weight-bold); }
+.hjm-line-score__table th.hjm-line-score__team { padding-inline: var(--hjm-space-sm); text-align: start; color: var(--hjm-color-text-muted); font-weight: var(--hjm-font-weight-semibold); }
+.hjm-line-score__team-content { display: inline-flex; align-items: center; gap: var(--hjm-space-xs); }
+.hjm-line-score__table tr[data-leader] th.hjm-line-score__team { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-bold); }
+.hjm-line-score__table td.hjm-line-score__period { min-inline-size: 26px; color: var(--hjm-color-text-sub); }
+.hjm-line-score__table td[data-scored] { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-bold); }
+.hjm-line-score__table [data-current] { background: var(--hjm-table-family-selected); }
+.hjm-line-score__table th[data-current] { color: var(--hjm-color-content-brand); }
+.hjm-line-score__total { min-inline-size: 30px; color: var(--hjm-color-text-muted); font-weight: var(--hjm-font-weight-semibold); }
+.hjm-line-score__total-edge { border-inline-start: 1px solid var(--hjm-color-border); }
+.hjm-line-score__table tbody .hjm-line-score__total-edge { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-bold); }
+.hjm-matrix-table__table th, .hjm-matrix-table__table td { padding: var(--hjm-space-xs); text-align: center; white-space: nowrap; border-block-start: 1px solid var(--hjm-color-border); }
+.hjm-matrix-table__table thead th { border-block-start: 0; color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); font-weight: var(--hjm-font-weight-bold); }
+.hjm-matrix-table__table tbody th { text-align: start; padding-inline: var(--hjm-space-sm); color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-bold); border-inline-end: 1px solid var(--hjm-color-border); }
+.hjm-matrix-table__table td { color: var(--hjm-color-text-muted); }
+.hjm-matrix-table__table thead td { border-block-start: 0; }
+.hjm-matrix-table__self { background: var(--hjm-color-surface-alt); }
+.hjm-matrix-table__table tr[data-highlighted] > * { background-color: var(--hjm-table-family-selected); }
+.hjm-comparison-table { padding-block: var(--hjm-space-xs); }
+.hjm-comparison-table__sides { display: flex; justify-content: space-between; padding: var(--hjm-space-xs) var(--hjm-space-md); font-weight: var(--hjm-font-weight-bold); }
+.hjm-comparison-table__rows { margin: 0; padding: 0; list-style: none; }
+.hjm-comparison-table__row { display: grid; gap: var(--hjm-space-xxs); padding: var(--hjm-space-xs) var(--hjm-space-md); border-block-start: 1px solid var(--hjm-color-border); }
+.hjm-comparison-table__values { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--hjm-space-sm); font-variant-numeric: tabular-nums; color: var(--hjm-color-text-sub); }
+.hjm-comparison-table__values > :last-child { text-align: end; }
+.hjm-comparison-table__values > [data-win] { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-bold); }
+.hjm-comparison-table__label { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); }
+.hjm-comparison-table__bars { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hjm-space-xs); block-size: 4px; }
+.hjm-comparison-table__track { display: flex; justify-content: flex-end; border-radius: 2px; background: var(--hjm-color-surface-alt); overflow: hidden; }
+.hjm-comparison-table__track[data-side="1"] { justify-content: flex-start; }
+.hjm-comparison-table__bar { display: block; block-size: 100%; border-radius: 2px; }
+
+/* Chart ------------------------------------------------------------------- */
+/* Colors come from chartRecipe.chrome via --hjm-chart-* set inline by the renderer (2026-10-14). */
+.hjm-chart { position: relative; display: flex; flex-direction: column; gap: var(--hjm-space-xs); inline-size: 100%; min-inline-size: 0; }
+.hjm-chart__plot {
+  position: relative;
+  /* Horizontal drags scrub; vertical drags keep scrolling the page. */
+  touch-action: pan-y;
+  user-select: none;
+  -webkit-user-select: none;
+  border-radius: var(--hjm-radius-sm);
+  outline: none;
+}
+.hjm-chart__plot:focus-visible { outline: var(--hjm-focus-width) solid var(--hjm-color-focus); outline-offset: var(--hjm-focus-offset); }
+.hjm-chart svg, .hjm-sparkline { display: block; overflow: visible; }
+.hjm-chart__grid { stroke: var(--hjm-chart-grid-line); stroke-width: var(--hjm-chart-grid-width); }
+.hjm-chart__reference { stroke: var(--hjm-chart-axis-label); stroke-width: 1; }
+.hjm-chart__cursor { stroke: var(--hjm-chart-axis-label); }
+.hjm-chart__dot { stroke: var(--hjm-color-bg); }
+.hjm-chart__label { fill: var(--hjm-chart-axis-label); font-family: inherit; font-size: var(--hjm-type-caption-size); }
+.hjm-chart__label[data-focused], .hjm-chart__axis-name, .hjm-chart__value { fill: var(--hjm-chart-legend-label); font-weight: var(--hjm-font-weight-semibold); }
+.hjm-chart__extreme { font-weight: var(--hjm-font-weight-semibold); }
+.hjm-chart__bubble {
+  position: absolute;
+  inset-block-start: 0;
+  transform: translateX(-50%);
+  padding: 2px var(--hjm-space-xs);
+  border: 1px solid var(--hjm-chart-tooltip-border);
+  border-radius: var(--hjm-radius-sm);
+  background: var(--hjm-chart-tooltip-surface);
+  color: var(--hjm-chart-tooltip-content);
+  font-size: var(--hjm-type-caption-size);
+  line-height: var(--hjm-type-caption-line-height);
+  font-weight: var(--hjm-font-weight-bold);
+  white-space: nowrap;
+  pointer-events: none;
+}
+.hjm-chart__pie, .hjm-chart__radar { position: relative; align-self: center; }
+.hjm-chart__pie-center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none; }
+.hjm-chart__slice[role="button"], .hjm-chart--pie .hjm-chart__slice[data-id] { cursor: pointer; }
+.hjm-chart__slice:focus-visible { outline: none; stroke: var(--hjm-color-focus); stroke-width: var(--hjm-focus-width); }
+.hjm-chart__slice-label { fill: #ffffff; font-family: inherit; font-size: var(--hjm-type-caption-size); font-weight: var(--hjm-font-weight-bold); }
+.hjm-chart__axis-titles { display: flex; justify-content: space-between; color: var(--hjm-chart-axis-label); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); }
+.hjm-chart-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--hjm-space-xxs) var(--hjm-space-md);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  color: var(--hjm-chart-legend-label);
+  font-size: var(--hjm-type-label-size);
+  line-height: var(--hjm-type-label-line-height);
+}
+.hjm-chart-legend[data-interactive] { flex-direction: column; flex-wrap: nowrap; }
+.hjm-chart-legend__item, .hjm-chart-legend__button { display: flex; align-items: center; gap: var(--hjm-space-xs); }
+.hjm-chart-legend__item[data-dimmed] { opacity: 0.5; }
+.hjm-chart-legend__button {
+  position: relative;
+  flex: 1;
+  min-block-size: var(--hjm-control-min-touch-target);
+  padding: 0 var(--hjm-space-xs);
+  border: 0;
+  border-radius: var(--hjm-radius-sm);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+.hjm-chart-legend__button[aria-pressed="true"] { background: var(--hjm-color-surface); }
+.hjm-chart-legend__button:focus-visible { outline: var(--hjm-focus-width) solid var(--hjm-color-focus); outline-offset: var(--hjm-focus-offset); }
+.hjm-chart-legend__swatch { flex: none; inline-size: 10px; block-size: 10px; border-radius: 3px; }
+.hjm-chart-legend[data-interactive] .hjm-chart-legend__label { flex: 1; }
+.hjm-chart-legend__value { font-weight: var(--hjm-font-weight-bold); font-variant-numeric: tabular-nums; }
 
 /* Mentions ---------------------------------------------------------------- */
 /*
@@ -2696,7 +2839,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-date-picker__calendar-close:focus-visible { outline: 2px solid var(--hjm-color-focus); outline-offset: 2px; }
 
 /* Reserve a common annotation row; dates with a dot must not sit above their neighbours. */
-.hjm-calendar__day-label { display: grid; place-items: center; inline-size: var(--hjm-calendar-cell-size); min-block-size: var(--hjm-calendar-cell-size); border: 1px solid transparent; border-radius: var(--hjm-radius-full); }
+.hjm-calendar__day-label { display: grid; place-items: center; inline-size: var(--hjm-calendar-indicator-size, var(--hjm-calendar-cell-size)); min-block-size: var(--hjm-calendar-indicator-size, var(--hjm-calendar-cell-size)); border: 1px solid transparent; border-radius: var(--hjm-radius-full); }
 
 .hjm-calendar__day-label { font-size: var(--hjm-type-body-size); line-height: var(--hjm-type-body-line-height); }
 .hjm-calendar[data-size="large"] .hjm-calendar__day-label { font-size: var(--hjm-type-body-large-size); line-height: var(--hjm-type-body-large-line-height); }
@@ -3028,5 +3171,10 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-bottom-navigation[data-selection="tile"] .hjm-bottom-navigation__list { padding: var(--hjm-space-xxs); gap: var(--hjm-space-xxs); }
 .hjm-bottom-navigation[data-selection="tile"] .hjm-bottom-navigation__item[data-state="selected"] { background: var(--hjm-color-primary); color: var(--hjm-color-on-primary); }
 .hjm-bottom-navigation[data-selection="tile"] .hjm-bottom-navigation__item:not([data-state="selected"]):active { background: var(--hjm-bottom-navigation-pressed-background); }
+/* Raised plank (bottomNavigationRecipe.raisedSurface): lower edges replace the floating shadow.
+   Every tile reserves its edge so selection does not shift rows; the selected edge darkens the brand fill. */
+.hjm-bottom-navigation[data-surface="raised"] .hjm-bottom-navigation__surface { background: var(--hjm-color-surface-alt); border-color: var(--hjm-color-border-control); border-block-end-width: 4px; box-shadow: none; }
+.hjm-bottom-navigation[data-surface="raised"] .hjm-bottom-navigation__item { border-block-end: 3px solid transparent; }
+.hjm-bottom-navigation[data-surface="raised"] .hjm-bottom-navigation__item[data-state="selected"] { border-block-end-color: color-mix(in srgb, var(--hjm-color-text) 45%, transparent); }
 
 }

package/dist/table-family.d.ts

@@ -0,0 +1,66 @@
+import type { CSSProperties, ReactNode } from "react";
+import type { ColorReference } from "@hjmds/design-contracts/color-references";
+import { type ComparisonRow, type DataTableCellHeat, type DataTableCellTone, type LineScoreTeam, type MatrixCell } from "@hjmds/design-contracts/components/data-table";
+import type { HjmCompositionStyleProp } from "./composition-style.js";
+/** Recipe colors resolve through the provider's CSS variables so a theme switch repaints without re-rendering (same as Chart). */
+export declare function tableCssColor(reference: ColorReference): string;
+export type TableHeatColors = Readonly<{
+    high: string;
+    low: string;
+}>;
+/**
+ * Cell emphasis as inline style. Heat paints a background *image* so pinned cells keep their opaque
+ * canvas color underneath and scrolled content never shows through the translucent tint.
+ */
+export declare function tableCellEmphasis(decoration: Readonly<{
+    tone?: DataTableCellTone | null;
+    heat?: DataTableCellHeat | null;
+}> | null | undefined, heatColors?: TableHeatColors): Readonly<{
+    style: CSSProperties;
+    tone?: DataTableCellTone;
+    heat?: string;
+}>;
+export type LineScoreProps = Readonly<{
+    teams: readonly LineScoreTeam[];
+    /** Total column headers in order, e.g. ["R", "H", "E", "B"]. The first one decides the leader. */
+    totals: readonly string[];
+    /** Live period (1-based) to highlight. */
+    currentPeriod?: number | null;
+    minPeriods?: number;
+    /** Optional leading content per team (logo/badge). */
+    renderTeam?: (team: LineScoreTeam) => ReactNode;
+    /** Accessible name of the table (prop name kept for Native parity). */
+    accessibilityLabel: string;
+    className?: string;
+    layoutStyle?: HjmCompositionStyleProp;
+}>;
+export declare function LineScore({ teams, totals, currentPeriod, minPeriods, renderTeam, accessibilityLabel, className, layoutStyle }: LineScoreProps): import("react").JSX.Element;
+export type MatrixTableProps<Key extends string = string> = Readonly<{
+    ids: readonly Key[];
+    /** Short header per id (team short name). */
+    labelOf: (id: Key) => string;
+    getCell: (row: Key, column: Key) => MatrixCell | null;
+    /** Row id to highlight (my team). */
+    highlightId?: Key | null;
+    heatColors?: TableHeatColors;
+    accessibilityLabel: string;
+    className?: string;
+    layoutStyle?: HjmCompositionStyleProp;
+}>;
+export declare function MatrixTable<Key extends string = string>({ ids, labelOf, getCell, highlightId, heatColors, accessibilityLabel, className, layoutStyle }: MatrixTableProps<Key>): import("react").JSX.Element;
+export type ComparisonTableProps = Readonly<{
+    rows: readonly ComparisonRow[];
+    /** Side names and accent colors (team colors). */
+    sides: readonly [Readonly<{
+        name: string;
+        color: string;
+    }>, Readonly<{
+        name: string;
+        color: string;
+    }>];
+    accessibilityLabel: string;
+    className?: string;
+    layoutStyle?: HjmCompositionStyleProp;
+}>;
+export declare function ComparisonTable({ rows, sides, accessibilityLabel, className, layoutStyle }: ComparisonTableProps): import("react").JSX.Element;
+//# sourceMappingURL=table-family.d.ts.map

package/dist/table-family.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-family.d.ts","sourceRoot":"","sources":["../src/table-family.tsx"],"names":[],"mappings":"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"}

package/dist/table-family.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { dataTableFamilyRecipe, dataTableRecipe, formatLineScoreCell, resolveComparisonRow, resolveLineScore, resolveMatrix, } from "@hjmds/design-contracts/components/data-table";
+import { classNames } from "./internal.js";
+/*
+ * Table family companions (2026-10-14): layouts products kept hand-building next to DataTable.
+ * LineScore follows MLB/ESPN game headers, MatrixTable a head-to-head cross table, ComparisonTable
+ * the ESPN matchup rows. Geometry and rules live in the data-table contract; these only draw.
+ */
+function kebab(value) {
+    return value.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+}
+/** Recipe colors resolve through the provider's CSS variables so a theme switch repaints without re-rendering (same as Chart). */
+export function tableCssColor(reference) {
+    const name = reference.source === "theme"
+        ? `--hjm-color-${kebab(reference.key)}`
+        : reference.source === "accent" ? `--hjm-accent-${kebab(reference.key)}` : `--hjm-accent-fill-${kebab(reference.key)}`;
+    return reference.alpha === undefined || reference.alpha === 1
+        ? `var(${name})`
+        : `color-mix(in srgb, var(${name}) ${Math.round(reference.alpha * 100)}%, transparent)`;
+}
+/** Live period and "my team" row reuse the shared selected-row tint. */
+const familyStyle = { "--hjm-table-family-selected": tableCssColor(dataTableRecipe.row.selectedBackground) };
+const withFamilyStyle = (layoutStyle) => ({ ...familyStyle, ...layoutStyle });
+/**
+ * Cell emphasis as inline style. Heat paints a background *image* so pinned cells keep their opaque
+ * canvas color underneath and scrolled content never shows through the translucent tint.
+ */
+export function tableCellEmphasis(decoration, heatColors) {
+    if (!decoration)
+        return { style: {} };
+    const style = {};
+    const tone = decoration.tone ?? undefined, heat = decoration.heat ?? null;
+    if (tone) {
+        style.color = tableCssColor(dataTableFamilyRecipe.tone[tone].color);
+        style.fontWeight = dataTableFamilyRecipe.tone[tone].fontWeight;
+    }
+    if (heat) {
+        const base = heatColors?.[heat.side] ?? tableCssColor(dataTableFamilyRecipe.heat[heat.side]);
+        style["--hjm-data-table-heat"] = `color-mix(in srgb, ${base} ${Math.round(dataTableFamilyRecipe.heatAlpha[heat.strength] * 100)}%, transparent)`;
+    }
+    return { style: style, ...(tone ? { tone } : {}), ...(heat ? { heat: `${heat.side}-${heat.strength}` } : {}) };
+}
+export function LineScore({ teams, totals, currentPeriod = null, minPeriods, renderTeam, accessibilityLabel, className, layoutStyle }) {
+    const score = resolveLineScore(teams, { totals, currentPeriod, ...(minPeriods !== undefined ? { minPeriods } : {}) });
+    const periods = score.columns.filter((column) => column.kind === "period");
+    const totalColumns = score.columns.filter((column) => column.kind === "total");
+    return (_jsx("div", { className: classNames("hjm-table-family", "hjm-line-score", className), style: withFamilyStyle(layoutStyle), children: _jsxs("table", { className: "hjm-line-score__table", "aria-label": accessibilityLabel, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("td", { className: "hjm-line-score__team" }), periods.map((column, index) => {
+                                const live = score.currentPeriod === index + 1;
+                                return _jsx("th", { scope: "col", className: "hjm-line-score__period", "aria-current": live ? "true" : undefined, "data-current": live || undefined, children: column.header }, column.id);
+                            }), totalColumns.map((column, index) => (_jsx("th", { scope: "col", className: classNames("hjm-line-score__total", index === 0 && "hjm-line-score__total-edge"), children: column.header }, column.id)))] }) }), _jsx("tbody", { children: teams.map((team) => (_jsxs("tr", { "data-leader": score.leaderId === team.id || undefined, children: [_jsx("th", { scope: "row", className: "hjm-line-score__team", children: _jsxs("span", { className: "hjm-line-score__team-content", children: [renderTeam?.(team), _jsx("span", { children: team.name })] }) }), periods.map((column, index) => {
+                                const value = team.periods[index];
+                                return _jsx("td", { className: "hjm-line-score__period", "data-current": score.currentPeriod === index + 1 || undefined, "data-scored": typeof value === "number" && value > 0 || undefined, children: formatLineScoreCell(value) }, column.id);
+                            }), totalColumns.map((column, index) => (_jsx("td", { className: classNames("hjm-line-score__total", index === 0 && "hjm-line-score__total-edge"), children: team.totals[column.header] ?? "—" }, column.id)))] }, team.id))) })] }) }));
+}
+export function MatrixTable({ ids, labelOf, getCell, highlightId = null, heatColors, accessibilityLabel, className, layoutStyle }) {
+    const matrix = resolveMatrix(ids, getCell);
+    return (_jsx("div", { className: classNames("hjm-table-family", "hjm-matrix-table", className), style: withFamilyStyle(layoutStyle), children: _jsxs("table", { className: "hjm-matrix-table__table", "aria-label": accessibilityLabel, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("td", { className: "hjm-matrix-table__corner" }), ids.map((id) => _jsx("th", { scope: "col", children: labelOf(id) }, id))] }) }), _jsx("tbody", { children: matrix.map((cells, rowIndex) => {
+                        const rowId = ids[rowIndex];
+                        return (_jsxs("tr", { "data-highlighted": rowId === highlightId || undefined, children: [_jsx("th", { scope: "row", children: labelOf(rowId) }), cells.map((cell, columnIndex) => {
+                                    // The diagonal is a team against itself: blank and hidden, not "no record".
+                                    if (cell === "self")
+                                        return _jsx("td", { className: "hjm-matrix-table__self", "aria-hidden": "true" }, ids[columnIndex]);
+                                    const emphasis = tableCellEmphasis(cell, heatColors);
+                                    return _jsx("td", { className: emphasis.heat ? "hjm-table-family__heat" : undefined, style: emphasis.style, "data-tone": emphasis.tone, "data-heat": emphasis.heat, children: cell?.label ?? "—" }, ids[columnIndex]);
+                                })] }, rowId));
+                    }) })] }) }));
+}
+export function ComparisonTable({ rows, sides, accessibilityLabel, className, layoutStyle }) {
+    return (_jsxs("section", { className: classNames("hjm-table-family", "hjm-comparison-table", className), style: withFamilyStyle(layoutStyle), "aria-label": accessibilityLabel, children: [_jsx("div", { className: "hjm-comparison-table__sides", "aria-hidden": "true", children: sides.map((side, index) => _jsx("span", { style: { color: side.color }, children: side.name }, index)) }), _jsx("ul", { className: "hjm-comparison-table__rows", role: "list", children: rows.map((row) => {
+                    const { winner, shares } = resolveComparisonRow(row);
+                    const shown = row.display ?? [row.values[0] === null ? "—" : String(row.values[0]), row.values[1] === null ? "—" : String(row.values[1])];
+                    return (_jsxs("li", { className: "hjm-comparison-table__row", "data-winner": winner ?? undefined, children: [_jsx("span", { className: "hjm-visually-hidden", children: `${row.label} ${sides[0].name} ${shown[0]}, ${sides[1].name} ${shown[1]}` }), _jsxs("div", { className: "hjm-comparison-table__values", "aria-hidden": "true", children: [_jsx("span", { "data-win": winner === 0 || undefined, children: shown[0] }), _jsx("span", { className: "hjm-comparison-table__label", children: row.label }), _jsx("span", { "data-win": winner === 1 || undefined, children: shown[1] })] }), _jsx("div", { className: "hjm-comparison-table__bars", "aria-hidden": "true", children: [0, 1].map((index) => (_jsx("span", { className: "hjm-comparison-table__track", "data-side": index, children: _jsx("span", { className: "hjm-comparison-table__bar", style: { inlineSize: `${Math.round(shares[index] * 1000) / 10}%`, background: sides[index].color, opacity: winner === null || winner === index ? 1 : 0.35 } }) }, index))) })] }, row.id));
+                }) })] }));
+}
+//# sourceMappingURL=table-family.js.map

package/dist/table-family.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-family.js","sourceRoot":"","sources":["../src/table-family.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { CSSProperties, ReactNode } from \"react\";\nimport type { ColorReference } from \"@hjmds/design-contracts/color-references\";\nimport {\n  dataTableFamilyRecipe, dataTableRecipe, formatLineScoreCell, resolveComparisonRow, resolveLineScore, resolveMatrix,\n  type ComparisonRow, type DataTableCellHeat, type DataTableCellTone, type LineScoreTeam, type MatrixCell,\n} from \"@hjmds/design-contracts/components/data-table\";\nimport { classNames } from \"./internal.js\";\nimport type { HjmCompositionStyleProp } from \"./composition-style.js\";\n\n/*\n * Table family companions (2026-10-14): layouts products kept hand-building next to DataTable.\n * LineScore follows MLB/ESPN game headers, MatrixTable a head-to-head cross table, ComparisonTable\n * the ESPN matchup rows. Geometry and rules live in the data-table contract; these only draw.\n */\n\nfunction kebab(value: string): string {\n  return value.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);\n}\n\n/** Recipe colors resolve through the provider's CSS variables so a theme switch repaints without re-rendering (same as Chart). */\nexport function tableCssColor(reference: ColorReference): string {\n  const name = reference.source === \"theme\"\n    ? `--hjm-color-${kebab(reference.key)}`\n    : reference.source === \"accent\" ? `--hjm-accent-${kebab(reference.key)}` : `--hjm-accent-fill-${kebab(reference.key)}`;\n  return reference.alpha === undefined || reference.alpha === 1\n    ? `var(${name})`\n    : `color-mix(in srgb, var(${name}) ${Math.round(reference.alpha * 100)}%, transparent)`;\n}\n\n/** Live period and \"my team\" row reuse the shared selected-row tint. */\nconst familyStyle = { \"--hjm-table-family-selected\": tableCssColor(dataTableRecipe.row.selectedBackground) } as CSSProperties;\nconst withFamilyStyle = (layoutStyle: HjmCompositionStyleProp | undefined) => ({ ...familyStyle, ...layoutStyle }) as CSSProperties;\n\nexport type TableHeatColors = Readonly<{ high: string; low: string }>;\n\n/**\n * Cell emphasis as inline style. Heat paints a background *image* so pinned cells keep their opaque\n * canvas color underneath and scrolled content never shows through the translucent tint.\n */\nexport function tableCellEmphasis(\n  decoration: Readonly<{ tone?: DataTableCellTone | null; heat?: DataTableCellHeat | null }> | null | undefined,\n  heatColors?: TableHeatColors,\n): Readonly<{ style: CSSProperties; tone?: DataTableCellTone; heat?: string }> {\n  if (!decoration) return { style: {} };\n  const style: Record<string, string | number> = {};\n  const tone = decoration.tone ?? undefined, heat = decoration.heat ?? null;\n  if (tone) {\n    style.color = tableCssColor(dataTableFamilyRecipe.tone[tone].color);\n    style.fontWeight = dataTableFamilyRecipe.tone[tone].fontWeight;\n  }\n  if (heat) {\n    const base = heatColors?.[heat.side] ?? tableCssColor(dataTableFamilyRecipe.heat[heat.side]);\n    style[\"--hjm-data-table-heat\"] = `color-mix(in srgb, ${base} ${Math.round(dataTableFamilyRecipe.heatAlpha[heat.strength] * 100)}%, transparent)`;\n  }\n  return { style: style as CSSProperties, ...(tone ? { tone } : {}), ...(heat ? { heat: `${heat.side}-${heat.strength}` } : {}) };\n}\n\n/* ---------------------------------------------- Line score ------------------------------------- */\n\nexport type LineScoreProps = Readonly<{\n  teams: readonly LineScoreTeam[];\n  /** Total column headers in order, e.g. [\"R\", \"H\", \"E\", \"B\"]. The first one decides the leader. */\n  totals: readonly string[];\n  /** Live period (1-based) to highlight. */\n  currentPeriod?: number | null;\n  minPeriods?: number;\n  /** Optional leading content per team (logo/badge). */\n  renderTeam?: (team: LineScoreTeam) => ReactNode;\n  /** Accessible name of the table (prop name kept for Native parity). */\n  accessibilityLabel: string;\n  className?: string;\n  layoutStyle?: HjmCompositionStyleProp;\n}>;\n\nexport function LineScore({ teams, totals, currentPeriod = null, minPeriods, renderTeam, accessibilityLabel, className, layoutStyle }: LineScoreProps) {\n  const score = resolveLineScore(teams, { totals, currentPeriod, ...(minPeriods !== undefined ? { minPeriods } : {}) });\n  const periods = score.columns.filter((column) => column.kind === \"period\");\n  const totalColumns = score.columns.filter((column) => column.kind === \"total\");\n  return (\n    <div className={classNames(\"hjm-table-family\", \"hjm-line-score\", className)} style={withFamilyStyle(layoutStyle)}>\n      <table className=\"hjm-line-score__table\" aria-label={accessibilityLabel}>\n        <thead>\n          <tr>\n            <td className=\"hjm-line-score__team\" />\n            {periods.map((column, index) => {\n              const live = score.currentPeriod === index + 1;\n              return <th key={column.id} scope=\"col\" className=\"hjm-line-score__period\" aria-current={live ? \"true\" : undefined} data-current={live || undefined}>{column.header}</th>;\n            })}\n            {totalColumns.map((column, index) => (\n              <th key={column.id} scope=\"col\" className={classNames(\"hjm-line-score__total\", index === 0 && \"hjm-line-score__total-edge\")}>{column.header}</th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {teams.map((team) => (\n            <tr key={team.id} data-leader={score.leaderId === team.id || undefined}>\n              <th scope=\"row\" className=\"hjm-line-score__team\">\n                <span className=\"hjm-line-score__team-content\">{renderTeam?.(team)}<span>{team.name}</span></span>\n              </th>\n              {periods.map((column, index) => {\n                const value = team.periods[index];\n                return <td key={column.id} className=\"hjm-line-score__period\" data-current={score.currentPeriod === index + 1 || undefined} data-scored={typeof value === \"number\" && value > 0 || undefined}>{formatLineScoreCell(value)}</td>;\n              })}\n              {totalColumns.map((column, index) => (\n                <td key={column.id} className={classNames(\"hjm-line-score__total\", index === 0 && \"hjm-line-score__total-edge\")}>{team.totals[column.header] ?? \"—\"}</td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n\n/* ---------------------------------------------- Matrix table ----------------------------------- */\n\nexport type MatrixTableProps<Key extends string = string> = Readonly<{\n  ids: readonly Key[];\n  /** Short header per id (team short name). */\n  labelOf: (id: Key) => string;\n  getCell: (row: Key, column: Key) => MatrixCell | null;\n  /** Row id to highlight (my team). */\n  highlightId?: Key | null;\n  heatColors?: TableHeatColors;\n  accessibilityLabel: string;\n  className?: string;\n  layoutStyle?: HjmCompositionStyleProp;\n}>;\n\nexport function MatrixTable<Key extends string = string>({ ids, labelOf, getCell, highlightId = null, heatColors, accessibilityLabel, className, layoutStyle }: MatrixTableProps<Key>) {\n  const matrix = resolveMatrix(ids, getCell);\n  return (\n    <div className={classNames(\"hjm-table-family\", \"hjm-matrix-table\", className)} style={withFamilyStyle(layoutStyle)}>\n      <table className=\"hjm-matrix-table__table\" aria-label={accessibilityLabel}>\n        <thead>\n          <tr>\n            <td className=\"hjm-matrix-table__corner\" />\n            {ids.map((id) => <th key={id} scope=\"col\">{labelOf(id)}</th>)}\n          </tr>\n        </thead>\n        <tbody>\n          {matrix.map((cells, rowIndex) => {\n            const rowId = ids[rowIndex]!;\n            return (\n              <tr key={rowId} data-highlighted={rowId === highlightId || undefined}>\n                <th scope=\"row\">{labelOf(rowId)}</th>\n                {cells.map((cell, columnIndex) => {\n                  // The diagonal is a team against itself: blank and hidden, not \"no record\".\n                  if (cell === \"self\") return <td key={ids[columnIndex]} className=\"hjm-matrix-table__self\" aria-hidden=\"true\" />;\n                  const emphasis = tableCellEmphasis(cell, heatColors);\n                  return <td key={ids[columnIndex]} className={emphasis.heat ? \"hjm-table-family__heat\" : undefined} style={emphasis.style} data-tone={emphasis.tone} data-heat={emphasis.heat}>{cell?.label ?? \"—\"}</td>;\n                })}\n              </tr>\n            );\n          })}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n\n/* ---------------------------------------------- Comparison table ------------------------------- */\n\nexport type ComparisonTableProps = Readonly<{\n  rows: readonly ComparisonRow[];\n  /** Side names and accent colors (team colors). */\n  sides: readonly [Readonly<{ name: string; color: string }>, Readonly<{ name: string; color: string }>];\n  accessibilityLabel: string;\n  className?: string;\n  layoutStyle?: HjmCompositionStyleProp;\n}>;\n\nexport function ComparisonTable({ rows, sides, accessibilityLabel, className, layoutStyle }: ComparisonTableProps) {\n  return (\n    <section className={classNames(\"hjm-table-family\", \"hjm-comparison-table\", className)} style={withFamilyStyle(layoutStyle)} aria-label={accessibilityLabel}>\n      <div className=\"hjm-comparison-table__sides\" aria-hidden=\"true\">\n        {sides.map((side, index) => <span key={index} style={{ color: side.color }}>{side.name}</span>)}\n      </div>\n      <ul className=\"hjm-comparison-table__rows\" role=\"list\">\n        {rows.map((row) => {\n          const { winner, shares } = resolveComparisonRow(row);\n          const shown = row.display ?? [row.values[0] === null ? \"—\" : String(row.values[0]), row.values[1] === null ? \"—\" : String(row.values[1])];\n          return (\n            <li key={row.id} className=\"hjm-comparison-table__row\" data-winner={winner ?? undefined}>\n              {/* One sentence for assistive tech; the visual grid and bars are decoration. */}\n              <span className=\"hjm-visually-hidden\">{`${row.label} ${sides[0].name} ${shown[0]}, ${sides[1].name} ${shown[1]}`}</span>\n              <div className=\"hjm-comparison-table__values\" aria-hidden=\"true\">\n                <span data-win={winner === 0 || undefined}>{shown[0]}</span>\n                <span className=\"hjm-comparison-table__label\">{row.label}</span>\n                <span data-win={winner === 1 || undefined}>{shown[1]}</span>\n              </div>\n              <div className=\"hjm-comparison-table__bars\" aria-hidden=\"true\">\n                {([0, 1] as const).map((index) => (\n                  <span key={index} className=\"hjm-comparison-table__track\" data-side={index}>\n                    <span\n                      className=\"hjm-comparison-table__bar\"\n                      style={{ inlineSize: `${Math.round(shares[index] * 1000) / 10}%`, background: sides[index].color, opacity: winner === null || winner === index ? 1 : 0.35 }}\n                    />\n                  </span>\n                ))}\n              </div>\n            </li>\n          );\n        })}\n      </ul>\n    </section>\n  );\n}\n"]}

package/dist/task-controls.d.ts

@@ -0,0 +1,47 @@
+import { resolvePasswordRules, type TaskChoice, type PasswordRule, type PriceOption } from "@hjmds/design-contracts/task-controls";
+import { type PasswordFieldProps } from "./forms.js";
+export type SplitActionProps = Readonly<{
+    modes: readonly TaskChoice[];
+    modeId: string;
+    onModeChange: (id: string) => void;
+    onExecute: (modeId: string) => void | Promise<void>;
+    executeLabel: (mode: TaskChoice) => string;
+    menuLabel: string;
+    dismissLabel: string;
+    errorLabel: string;
+    disabled?: boolean;
+}>;
+export declare function SplitAction(props: SplitActionProps): import("react").JSX.Element;
+export type AccountSwitcherProps = Readonly<{
+    accounts: readonly TaskChoice[];
+    accountId: string;
+    label: string;
+    dismissLabel: string;
+    errorLabel: string;
+    onSwitch: (accountId: string) => void | Promise<void>;
+    disabled?: boolean;
+}>;
+export declare function AccountSwitcher(props: AccountSwitcherProps): import("react").JSX.Element;
+export type PasswordRulesFieldProps = Omit<PasswordFieldProps, "value" | "defaultValue" | "onValueChange"> & Readonly<{
+    label: string;
+    value: string;
+    onValueChange: (value: string) => void;
+    rules: readonly PasswordRule[];
+    progressLabel: string;
+    summaryLabel: (satisfied: number, total: number) => string;
+    ruleLabel: (rule: ReturnType<typeof resolvePasswordRules>["rules"][number]) => string;
+}>;
+export declare function PasswordRulesField({ rules, progressLabel, summaryLabel, ruleLabel, ...field }: PasswordRulesFieldProps): import("react").JSX.Element;
+export type PricingChoiceProps = Readonly<{
+    label: string;
+    options: readonly PriceOption[];
+    selectedId: string;
+    onSelectionChange: (id: string) => void;
+    formatPrice: (option: PriceOption) => string;
+    continueLabel: string;
+    errorLabel: string;
+    onContinue: (option: PriceOption) => void | Promise<void>;
+    disabled?: boolean;
+}>;
+export declare function PricingChoice(props: PricingChoiceProps): import("react").JSX.Element;
+//# sourceMappingURL=task-controls.d.ts.map

package/dist/task-controls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"task-controls.d.ts","sourceRoot":"","sources":["../src/task-controls.tsx"],"names":[],"mappings":"AACA,OAAO,EAAqB,oBAAoB,EAAsB,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,KAAK,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAG1K,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAkBpE,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC;IACtC,KAAK,EAAE,SAAS,UAAU,EAAE,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjF,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAAC,YAAY,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,MAAM,CAAC;IAChG,SAAS,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACjF,CAAC,CAAC;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BAOlD;AAED,MAAM,MAAM,oBAAoB,GAAG,QAAQ,CAAC;IAC1C,QAAQ,EAAE,SAAS,UAAU,EAAE,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAC;IAC5G,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC3E,CAAC,CAAC;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,+BAO1D;AAED,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,kBAAkB,EAAE,OAAO,GAAG,cAAc,GAAG,eAAe,CAAC,GAAG,QAAQ,CAAC;IACpH,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAAC,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IACrG,aAAa,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAClF,SAAS,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,KAAK,MAAM,CAAC;CACvF,CAAC,CAAC;AACH,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,+BAMtH;AAED,MAAM,MAAM,kBAAkB,GAAG,QAAQ,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,SAAS,WAAW,EAAE,CAAC;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,iBAAiB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5G,WAAW,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAC;IACxF,UAAU,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC/E,CAAC,CAAC;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,+BAUtD"}

package/dist/task-controls.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { resolveTaskChoice, resolvePasswordRules, resolvePriceOption } from "@hjmds/design-contracts/task-controls";
+import { Button } from "./actions.js";
+import { Menu } from "./overlays.js";
+import { PasswordField } from "./forms.js";
+import { RadioGroup } from "./selection.js";
+import { Card } from "./display.js";
+import { Progress } from "./feedback.js";
+import { Stack, Text } from "./layout.js";
+import { useCompositionAction } from "./internal/use-composition-action.js";
+function ChoiceMenu(props) {
+    const available = props.choices.some(choice => !choice.disabled);
+    if (!available)
+        return _jsx(Button, { disabled: true, children: props.label });
+    return _jsx(Menu, { label: props.label, trigger: _jsx(Button, { tone: "secondary", loading: props.pending === true, children: props.label }), disabled: props.disabled, items: props.choices, selectionMode: "single", value: props.selectedId, onValueChange: () => undefined, onActionAfterDismiss: props.onChoose });
+}
+function Failure({ failed, label }) {
+    return failed ? _jsx(Text, { role: "alert", tone: "danger", style: { textAlign: "center" }, children: label }) : null;
+}
+export function SplitAction(props) {
+    const mode = resolveTaskChoice(props.modes, props.modeId), action = useCompositionAction(props.disabled);
+    const locked = props.disabled === true || action.pending;
+    return _jsxs(Stack, { gap: "sm", children: [_jsxs(Stack, { axis: "inline", gap: "xs", wrap: true, children: [_jsx(Button, { loading: action.pending, disabled: props.disabled === true || mode.disabled === true, onClick: () => { if (!mode.disabled)
+                            void action.run(mode.id, () => props.onExecute(mode.id)); }, children: props.executeLabel(mode) }), _jsx(ChoiceMenu, { choices: props.modes, selectedId: mode.id, label: props.menuLabel, dismissLabel: props.dismissLabel, disabled: locked, onChoose: id => { if (!locked && !resolveTaskChoice(props.modes, id).disabled)
+                            props.onModeChange(id); } })] }), _jsx(Failure, { failed: action.failed, label: props.errorLabel })] });
+}
+export function AccountSwitcher(props) {
+    const account = resolveTaskChoice(props.accounts, props.accountId), action = useCompositionAction(props.disabled);
+    const locked = props.disabled === true || action.pending;
+    // The controlled account stays confirmed until the product completes the session change.
+    return _jsxs(Stack, { gap: "sm", children: [_jsx(Text, { emphasis: "strong", children: account.label }), _jsx(ChoiceMenu, { choices: props.accounts, selectedId: account.id, label: props.label, dismissLabel: props.dismissLabel, disabled: locked, pending: action.pending, onChoose: id => { if (id !== account.id && !resolveTaskChoice(props.accounts, id).disabled)
+                    void action.run(id, () => props.onSwitch(id)); } }), _jsx(Failure, { failed: action.failed, label: props.errorLabel })] });
+}
+export function PasswordRulesField({ rules, progressLabel, summaryLabel, ruleLabel, ...field }) {
+    const state = resolvePasswordRules(field.value, rules);
+    return _jsxs(Stack, { gap: "sm", children: [_jsx(PasswordField, { ...field }), _jsx(Progress, { label: progressLabel, value: state.satisfied, max: state.total, valueText: summaryLabel(state.satisfied, state.total) }), state.rules.map(rule => _jsx(Text, { variant: "caption", tone: rule.satisfied ? "primary" : "muted", children: ruleLabel(rule) }, rule.id))] });
+}
+export function PricingChoice(props) {
+    const option = resolvePriceOption(props.options, props.selectedId), action = useCompositionAction(props.disabled);
+    const locked = props.disabled === true || action.pending;
+    return _jsx(Card, { title: props.label, children: _jsxs(Stack, { gap: "md", children: [_jsx(RadioGroup, { accessibilityLabel: props.label, presentation: "card", value: option.id, disabled: locked, items: props.options.map(price => ({ value: price.id, label: price.label, description: props.formatPrice(price), disabled: price.disabled === true })), onValueChange: id => { if (id !== null && !locked && !resolveTaskChoice(props.options, id).disabled)
+                        props.onSelectionChange(id); } }), _jsx(Text, { emphasis: "strong", children: props.formatPrice(option) }), option.benefits.map((benefit, index) => _jsx(Text, { children: benefit }, index)), _jsx(Button, { loading: action.pending, disabled: props.disabled === true || option.disabled === true, onClick: () => { if (!option.disabled)
+                        void action.run(option.id, () => props.onContinue(Object.freeze({ ...option, benefits: Object.freeze([...option.benefits]) }))); }, children: props.continueLabel }), _jsx(Failure, { failed: action.failed, label: props.errorLabel })] }) });
+}
+//# sourceMappingURL=task-controls.js.map

package/dist/task-controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"task-controls.js","sourceRoot":"","sources":["../src/task-controls.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,kBAAkB,EAAwD,MAAM,uCAAuC,CAAC;AAC1K,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,aAAa,EAA2B,MAAM,YAAY,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAG5E,SAAS,UAAU,CAAC,KAAsB;IACxC,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IACjE,IAAI,CAAC,SAAS;QAAE,OAAO,KAAC,MAAM,IAAC,QAAQ,kBAAE,KAAK,CAAC,KAAK,GAAU,CAAC;IAC/D,OAAO,KAAC,IAAI,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,WAAW,EAAC,OAAO,EAAE,KAAK,CAAC,OAAO,KAAK,IAAI,YAAG,KAAK,CAAC,KAAK,GAAU,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAClJ,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,aAAa,EAAC,QAAQ,EAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,aAAa,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,oBAAoB,EAAE,KAAK,CAAC,QAAQ,GAAI,CAAC;AACnJ,CAAC;AACD,SAAS,OAAO,CAAC,EAAE,MAAM,EAAE,KAAK,EAAgD;IAC9E,OAAO,MAAM,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAG,KAAK,GAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;AACzG,CAAC;AAOD,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,IAAI,GAAG,iBAAiB,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,oBAAoB,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACzG,MAAM,MAAM,GAAG,KAAK,CAAC,QAAQ,KAAK,IAAI,IAAI,MAAM,CAAC,OAAO,CAAC;IACzD,OAAO,MAAC,KAAK,IAAC,GAAG,EAAC,IAAI,aAAC,MAAC,KAAK,IAAC,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,IAAI,mBACvD,KAAC,MAAM,IAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,KAAK,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ;4BAAE,KAAK,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,YAAG,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,GAAU,EACnO,KAAC,UAAU,IAAC,OAAO,EAAE,KAAK,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,YAAY,EAAE,KAAK,CAAC,YAAY,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,QAAQ;4BAAE,KAAK,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,GAAI,IACzO,EAAA,KAAC,OAAO,IAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,GAAI,IAAQ,CAAC;AAC9E,CAAC;AAMD,MAAM,UAAU,eAAe,CAAC,KAA2B;IACzD,MAAM,OAAO,GAAG,iBAAiB,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,oBAAoB,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAClH,MAAM,MAAM,GAAG,KAAK,CAAC,QAAQ,KAAK,IAAI,IAAI,MAAM,CAAC,OAAO,CAAC;IACzD,yFAAyF;IACzF,OAAO,MAAC,KAAK,IAAC,GAAG,EAAC,IAAI,aAAC,KAAC,IAAI,IAAC,QAAQ,EAAC,QAAQ,YAAE,OAAO,CAAC,KAAK,GAAQ,EAAA,KAAC,UAAU,IAAC,OAAO,EAAE,KAAK,CAAC,QAAQ,EAAE,UAAU,EAAE,OAAO,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,CAAC,YAAY,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAC/N,QAAQ,EAAE,EAAE,CAAC,EAAE,GAAG,IAAI,EAAE,KAAK,OAAO,CAAC,EAAE,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,QAAQ;oBAAE,KAAK,MAAM,CAAC,GAAG,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,GAAI,EAChJ,KAAC,OAAO,IAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,GAAI,IAAQ,CAAC;AACxE,CAAC;AAOD,MAAM,UAAU,kBAAkB,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAA2B;IACrH,MAAM,KAAK,GAAG,oBAAoB,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IACvD,OAAO,MAAC,KAAK,IAAC,GAAG,EAAC,IAAI,aAAC,KAAC,aAAa,OAAK,KAAK,GAAI,EACjD,KAAC,QAAQ,IAAC,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,YAAY,CAAC,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,GAAI,EAClI,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,KAAC,IAAI,IAAe,OAAO,EAAC,SAAS,EAAC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,YAAG,SAAS,CAAC,IAAI,CAAC,IAAvF,IAAI,CAAC,EAAE,CAAwF,CAAC,IAC9H,CAAC;AACX,CAAC;AAOD,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,MAAM,MAAM,GAAG,kBAAkB,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,oBAAoB,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAClH,MAAM,MAAM,GAAG,KAAK,CAAC,QAAQ,KAAK,IAAI,IAAI,MAAM,CAAC,OAAO,CAAC;IACzD,OAAO,KAAC,IAAI,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,YAAE,MAAC,KAAK,IAAC,GAAG,EAAC,IAAI,aAAC,KAAC,UAAU,IAAC,kBAAkB,EAAE,KAAK,CAAC,KAAK,EAAE,YAAY,EAAC,MAAM,EAAC,KAAK,EAAE,MAAM,CAAC,EAAE,EAAE,QAAQ,EAAE,MAAM,EAClJ,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,KAAK,IAAI,EAAE,CAAC,CAAC,EACtJ,aAAa,EAAE,EAAE,CAAC,EAAE,GAAG,IAAI,EAAE,KAAK,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,QAAQ;wBAAE,KAAK,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,GAAI,EACvI,KAAC,IAAI,IAAC,QAAQ,EAAC,QAAQ,YAAE,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,GAAQ,EACzD,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,KAAC,IAAI,cAAc,OAAO,IAAf,KAAK,CAAkB,CAAC,EAC5E,KAAC,MAAM,IAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,KAAK,IAAI,IAAI,MAAM,CAAC,QAAQ,KAAK,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ;wBAAE,KAAK,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,GAAG,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAAG,KAAK,CAAC,aAAa,GAAU,EACzS,KAAC,OAAO,IAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,GAAI,IAAQ,GAAO,CAAC;AAC/E,CAAC","sourcesContent":["\"use client\";\nimport { resolveTaskChoice, resolvePasswordRules, resolvePriceOption, type TaskChoice, type PasswordRule, type PriceOption } from \"@hjmds/design-contracts/task-controls\";\nimport { Button } from \"./actions.js\";\nimport { Menu } from \"./overlays.js\";\nimport { PasswordField, type PasswordFieldProps } from \"./forms.js\";\nimport { RadioGroup } from \"./selection.js\";\nimport { Card } from \"./display.js\";\nimport { Progress } from \"./feedback.js\";\nimport { Stack, Text } from \"./layout.js\";\nimport { useCompositionAction } from \"./internal/use-composition-action.js\";\n\ntype ChoiceMenuProps = Readonly<{ choices: readonly TaskChoice[]; selectedId: string; label: string; dismissLabel: string; disabled: boolean; pending?: boolean; onChoose: (id: string) => void }>;\nfunction ChoiceMenu(props: ChoiceMenuProps) {\n  const available = props.choices.some(choice => !choice.disabled);\n  if (!available) return <Button disabled>{props.label}</Button>;\n  return <Menu label={props.label} trigger={<Button tone=\"secondary\" loading={props.pending === true}>{props.label}</Button>} disabled={props.disabled}\n    items={props.choices} selectionMode=\"single\" value={props.selectedId} onValueChange={() => undefined} onActionAfterDismiss={props.onChoose} />;\n}\nfunction Failure({ failed, label }: Readonly<{ failed: boolean; label: string }>) {\n  return failed ? <Text role=\"alert\" tone=\"danger\" style={{ textAlign: \"center\" }}>{label}</Text> : null;\n}\n\nexport type SplitActionProps = Readonly<{\n  modes: readonly TaskChoice[]; modeId: string; onModeChange: (id: string) => void;\n  onExecute: (modeId: string) => void | Promise<void>; executeLabel: (mode: TaskChoice) => string;\n  menuLabel: string; dismissLabel: string; errorLabel: string; disabled?: boolean;\n}>;\nexport function SplitAction(props: SplitActionProps) {\n  const mode = resolveTaskChoice(props.modes, props.modeId), action = useCompositionAction(props.disabled);\n  const locked = props.disabled === true || action.pending;\n  return <Stack gap=\"sm\"><Stack axis=\"inline\" gap=\"xs\" wrap>\n    <Button loading={action.pending} disabled={props.disabled === true || mode.disabled === true} onClick={() => { if (!mode.disabled) void action.run(mode.id, () => props.onExecute(mode.id)); }}>{props.executeLabel(mode)}</Button>\n    <ChoiceMenu choices={props.modes} selectedId={mode.id} label={props.menuLabel} dismissLabel={props.dismissLabel} disabled={locked} onChoose={id => { if (!locked && !resolveTaskChoice(props.modes, id).disabled) props.onModeChange(id); }} />\n  </Stack><Failure failed={action.failed} label={props.errorLabel} /></Stack>;\n}\n\nexport type AccountSwitcherProps = Readonly<{\n  accounts: readonly TaskChoice[]; accountId: string; label: string; dismissLabel: string; errorLabel: string;\n  onSwitch: (accountId: string) => void | Promise<void>; disabled?: boolean;\n}>;\nexport function AccountSwitcher(props: AccountSwitcherProps) {\n  const account = resolveTaskChoice(props.accounts, props.accountId), action = useCompositionAction(props.disabled);\n  const locked = props.disabled === true || action.pending;\n  // The controlled account stays confirmed until the product completes the session change.\n  return <Stack gap=\"sm\"><Text emphasis=\"strong\">{account.label}</Text><ChoiceMenu choices={props.accounts} selectedId={account.id} label={props.label} dismissLabel={props.dismissLabel} disabled={locked} pending={action.pending}\n    onChoose={id => { if (id !== account.id && !resolveTaskChoice(props.accounts, id).disabled) void action.run(id, () => props.onSwitch(id)); }} />\n    <Failure failed={action.failed} label={props.errorLabel} /></Stack>;\n}\n\nexport type PasswordRulesFieldProps = Omit<PasswordFieldProps, \"value\" | \"defaultValue\" | \"onValueChange\"> & Readonly<{\n  label: string; value: string; onValueChange: (value: string) => void; rules: readonly PasswordRule[];\n  progressLabel: string; summaryLabel: (satisfied: number, total: number) => string;\n  ruleLabel: (rule: ReturnType<typeof resolvePasswordRules>[\"rules\"][number]) => string;\n}>;\nexport function PasswordRulesField({ rules, progressLabel, summaryLabel, ruleLabel, ...field }: PasswordRulesFieldProps) {\n  const state = resolvePasswordRules(field.value, rules);\n  return <Stack gap=\"sm\"><PasswordField {...field} />\n    <Progress label={progressLabel} value={state.satisfied} max={state.total} valueText={summaryLabel(state.satisfied, state.total)} />\n    {state.rules.map(rule => <Text key={rule.id} variant=\"caption\" tone={rule.satisfied ? \"primary\" : \"muted\"}>{ruleLabel(rule)}</Text>)}\n  </Stack>;\n}\n\nexport type PricingChoiceProps = Readonly<{\n  label: string; options: readonly PriceOption[]; selectedId: string; onSelectionChange: (id: string) => void;\n  formatPrice: (option: PriceOption) => string; continueLabel: string; errorLabel: string;\n  onContinue: (option: PriceOption) => void | Promise<void>; disabled?: boolean;\n}>;\nexport function PricingChoice(props: PricingChoiceProps) {\n  const option = resolvePriceOption(props.options, props.selectedId), action = useCompositionAction(props.disabled);\n  const locked = props.disabled === true || action.pending;\n  return <Card title={props.label}><Stack gap=\"md\"><RadioGroup accessibilityLabel={props.label} presentation=\"card\" value={option.id} disabled={locked}\n    items={props.options.map(price => ({ value: price.id, label: price.label, description: props.formatPrice(price), disabled: price.disabled === true }))}\n    onValueChange={id => { if (id !== null && !locked && !resolveTaskChoice(props.options, id).disabled) props.onSelectionChange(id); }} />\n    <Text emphasis=\"strong\">{props.formatPrice(option)}</Text>\n    {option.benefits.map((benefit, index) => <Text key={index}>{benefit}</Text>)}\n    <Button loading={action.pending} disabled={props.disabled === true || option.disabled === true} onClick={() => { if (!option.disabled) void action.run(option.id, () => props.onContinue(Object.freeze({ ...option, benefits: Object.freeze([...option.benefits]) }))); }}>{props.continueLabel}</Button>\n    <Failure failed={action.failed} label={props.errorLabel} /></Stack></Card>;\n}\n"]}

package/dist/toggle-feedback.d.ts

@@ -0,0 +1,26 @@
+import { type ReactNode } from "react";
+import { type ToggleFeedbackEffect, type ToggleFeedbackState } from "@hjmds/design-contracts/toggle-feedback";
+export type ToggleFeedbackButtonProps = Readonly<{
+    entityId: string;
+    state: ToggleFeedbackState;
+    effect: ToggleFeedbackEffect;
+    locale: string;
+    icon?: ReactNode;
+    renderIcon?: (state: Readonly<{
+        selected: boolean;
+        pending: boolean;
+    }>) => ReactNode;
+    labels: Readonly<{
+        select: string;
+        selected: string;
+        pending: string;
+        count: string;
+        error: string;
+    }>;
+    /** Update confirmed state from the real API snapshot before resolving. */
+    onSelectedChange: (selected: boolean) => void | Promise<void>;
+    disabled?: boolean;
+    active?: boolean;
+}>;
+export declare function ToggleFeedbackButton(props: ToggleFeedbackButtonProps): import("react").JSX.Element;
+//# sourceMappingURL=toggle-feedback.d.ts.map

package/dist/toggle-feedback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-feedback.d.ts","sourceRoot":"","sources":["../src/toggle-feedback.tsx"],"names":[],"mappings":"AACA,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAwG,KAAK,oBAAoB,EAAE,KAAK,mBAAmB,EAAE,MAAM,yCAAyC,CAAC;AA0BpN,MAAM,MAAM,yBAAyB,GAAG,QAAQ,CAAC;IAC/C,QAAQ,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,mBAAmB,CAAC;IAAC,MAAM,EAAE,oBAAoB,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAC;IAC7G,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC;QAAE,QAAQ,EAAE,OAAO,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,SAAS,CAAC;IACrF,MAAM,EAAE,QAAQ,CAAC;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACtG,0EAA0E;IAC1E,gBAAgB,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAC;CACrG,CAAC,CAAC;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,+BAGpE"}

package/dist/toggle-feedback.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { resolveToggleFeedbackProposal, resolveToggleFeedbackFrame, toggleFeedbackPaths, toggleFeedbackRecipe } from "@hjmds/design-contracts/toggle-feedback";
+import { Button } from "./actions.js";
+import { AnimatedStatistic } from "./statistic-motion.js";
+import { Stack, Text } from "./layout.js";
+import { useHjmTheme } from "./provider.js";
+import { useCompositionAction } from "./internal/use-composition-action.js";
+function FeedbackGlyph({ effect, selected, active, icon }) {
+    const glyph = useRef(null), circle = useRef(null), rays = useRef(null), previous = useRef(selected);
+    const reduced = useHjmTheme().environment.reducedMotion;
+    useEffect(() => {
+        const entering = selected && !previous.current;
+        previous.current = selected;
+        let frame = 0, start;
+        const draw = (p) => { const f = resolveToggleFeedbackFrame(effect, p); glyph.current?.style.setProperty("transform", `translateY(${f.translateY}px) scale(${f.scale})`); circle.current?.setAttribute("r", String(f.radius)); circle.current?.setAttribute("opacity", effect === "ripple" ? String(f.opacity) : "0"); rays.current?.setAttribute("d", f.rays); rays.current?.setAttribute("opacity", effect === "burst" ? String(f.opacity) : "0"); };
+        const settle = () => { cancelAnimationFrame(frame); draw(1); };
+        const animate = (now) => { start ??= now; const p = Math.min(1, (now - start) / toggleFeedbackRecipe.duration); draw(p); if (p < 1)
+            frame = requestAnimationFrame(animate); };
+        // The old selected state consumes the event; environment changes never replay it.
+        if (!entering || reduced || !active || document.hidden)
+            settle();
+        else {
+            draw(0);
+            frame = requestAnimationFrame(animate);
+        }
+        const visibility = () => { if (document.hidden)
+            settle(); };
+        document.addEventListener("visibilitychange", visibility);
+        return () => { cancelAnimationFrame(frame); document.removeEventListener("visibilitychange", visibility); };
+    }, [selected, effect, active, reduced]);
+    const f = resolveToggleFeedbackFrame(effect, 1);
+    return _jsxs("span", { "aria-hidden": "true", style: { position: "relative", display: "inline-flex", width: toggleFeedbackRecipe.glyphSize, height: toggleFeedbackRecipe.glyphSize }, children: [_jsx("span", { ref: glyph, style: { display: "inline-flex" }, children: icon ?? _jsx("svg", { width: 24, height: 24, viewBox: "0 0 24 24", focusable: "false", children: _jsx("path", { d: toggleFeedbackPaths[effect], fill: selected ? "currentColor" : "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinejoin: "round" }) }) }), _jsxs("svg", { "data-toggle-effect": effect, width: 40, height: 40, viewBox: "0 0 40 40", focusable: "false", style: { position: "absolute", left: -8, top: -8, pointerEvents: "none" }, fill: "none", stroke: "currentColor", strokeWidth: 1.7, children: [_jsx("circle", { ref: circle, cx: 20, cy: 20, r: f.radius, opacity: 0 }), _jsx("path", { ref: rays, d: f.rays, opacity: 0, strokeLinecap: "round" })] })] });
+}
+export function ToggleFeedbackButton(props) {
+    if (!props.entityId.trim())
+        throw new TypeError("Toggle feedback requires a stable entity id");
+    return _jsx(ToggleFeedbackBody, { ...props }, props.entityId);
+}
+function ToggleFeedbackBody(props) {
+    resolveToggleFeedbackProposal(props.state, props.state.selected);
+    const active = props.active !== false, action = useCompositionAction(props.disabled === true || !active), state = action.active ?? props.state;
+    const icon = props.renderIcon ? props.renderIcon({ selected: state.selected, pending: action.pending }) : props.icon;
+    return _jsxs(Stack, { gap: "sm", children: [_jsxs(Stack, { axis: "inline", gap: "md", align: "center", wrap: true, children: [_jsx(Button, { tone: "secondary", selected: state.selected, loading: action.pending, disabled: props.disabled === true || !active, "aria-label": action.pending ? props.labels.pending : undefined, leading: _jsx(FeedbackGlyph, { effect: props.effect, selected: state.selected, active: active, ...(icon === undefined ? {} : { icon }) }), onClick: () => { const proposal = resolveToggleFeedbackProposal(props.state, !props.state.selected); void action.run(proposal, () => props.onSelectedChange(proposal.selected)); }, children: state.selected ? props.labels.selected : props.labels.select }), _jsx(AnimatedStatistic, { density: "compact", descriptor: { id: "selection-count", label: props.labels.count }, value: state.count, locale: props.locale, animated: active })] }), action.failed ? _jsx(Text, { role: "alert", tone: "danger", style: { textAlign: "center" }, children: props.labels.error }) : null] });
+}
+//# sourceMappingURL=toggle-feedback.js.map