@elaraai/east-ui 1.0.3 → 1.0.5

package/dist/test/collections/matrix.examples.js

@@ -1,623 +1,203 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@elaraai/east-ui/jsx-runtime";
 /**
  * Copyright (c) 2025 Elara AI Pty Ltd
  * Dual-licensed under AGPL-3.0 and commercial license. See LICENSE for details.
  */
-import { ArrayType, East, FloatType, IntegerType, NullType, StringType, example } from "@elaraai/east";
-import { Avatar, Badge, Icon, Matrix, Reactive, Stack, Stat, State, Text, UIComponentType, } from "@elaraai/east-ui";
-export const matrixBasic = example({
-    keywords: ["Matrix", "Root", "heat-grid", "basic", "segments", "dict"],
-    description: "Assignment grid — rich row headers, dict-keyed cells, booked / free segment weights",
-    fn: East.function([], UIComponentType, ($) => {
-        const userHeader = $.const(East.function([StringType, StringType], UIComponentType, ($, name, role) => Stack.HStack([
-            Avatar.Root({ name, size: "sm" }),
-            Stack.VStack([
-                Text.Root(name, { fontWeight: "semibold" }),
-                Text.Root(role, { textStyle: "caption", color: "gray.500" }),
-            ], { gap: "0", align: "flex-start" }),
-        ], { gap: "2", align: "center" })));
-        const dayHeader = $.const(East.function([StringType, StringType], UIComponentType, ($, day, date) => Stack.VStack([
-            Text.Root(day, { fontWeight: "semibold" }),
-            Text.Root(date, { textStyle: "caption", color: "gray.500" }),
-        ], { gap: "0", align: "center" })));
-        return Matrix.Root([
-            { key: "alice", header: userHeader("Alice Chen", "Senior PM"), cells: {
-                    mon: { segments: [{ category: "booked", weight: 0.8 }, { category: "free", weight: 0.2 }] },
-                    tue: { segments: [{ category: "booked", weight: 0.4 }, { category: "free", weight: 0.6 }] },
-                    wed: { segments: [{ category: "booked", weight: 1.0 }] },
-                    thu: { segments: [{ category: "booked", weight: 0.6 }, { category: "free", weight: 0.4 }] },
-                    fri: { segments: [{ category: "free", weight: 1.0 }] },
-                } },
-            { key: "bob", header: userHeader("Bob Martinez", "Designer"), cells: {
-                    mon: { segments: [{ category: "booked", weight: 0.5 }, { category: "free", weight: 0.5 }] },
-                    tue: { segments: [{ category: "booked", weight: 0.9 }, { category: "free", weight: 0.1 }] },
-                    wed: { segments: [{ category: "booked", weight: 0.3 }, { category: "free", weight: 0.7 }] },
-                    thu: { segments: [{ category: "booked", weight: 1.0 }] },
-                    fri: { segments: [{ category: "booked", weight: 0.5 }, { category: "free", weight: 0.5 }] },
-                } },
-        ], [
-            { key: "mon", header: dayHeader("Mon", "Apr 22") },
-            { key: "tue", header: dayHeader("Tue", "Apr 23") },
-            { key: "wed", header: dayHeader("Wed", "Apr 24") },
-            { key: "thu", header: dayHeader("Thu", "Apr 25") },
-            { key: "fri", header: dayHeader("Fri", "Apr 26") },
-        ], {
-            legend: [
-                { category: "booked", color: "blue.400", label: "Booked" },
-                { category: "free", color: "gray.200", label: "Free" },
-            ],
-            rowHeaderWidth: "200px",
-        });
-    }),
-    inputs: [],
-});
-export const matrixMultiSegment = example({
-    keywords: ["Matrix", "Root", "segments", "stacked", "multi-category"],
-    description: "Multi-segment cells — committed / pending / slack proportional split",
-    fn: East.function([], UIComponentType, (_$) => {
-        return Matrix.Root([
-            { key: "sprint-1", header: Text.Root("Sprint 1", { fontWeight: "semibold" }), cells: {
-                    design: { segments: [
-                            { category: "committed", weight: 0.6 },
-                            { category: "pending", weight: 0.3 },
-                            { category: "slack", weight: 0.1 },
-                        ] },
-                    dev: { segments: [
-                            { category: "committed", weight: 0.8 },
-                            { category: "pending", weight: 0.2 },
-                        ] },
-                    qa: { segments: [
-                            { category: "committed", weight: 0.3 },
-                            { category: "pending", weight: 0.5 },
-                            { category: "slack", weight: 0.2 },
-                        ] },
-                } },
-            { key: "sprint-2", header: Text.Root("Sprint 2", { fontWeight: "semibold" }), cells: {
-                    design: { segments: [
-                            { category: "committed", weight: 0.4 },
-                            { category: "pending", weight: 0.4 },
-                            { category: "slack", weight: 0.2 },
-                        ] },
-                    dev: { segments: [{ category: "committed", weight: 1.0 }] },
-                    qa: { segments: [{ category: "slack", weight: 1.0 }] },
-                } },
-        ], [
-            { key: "design", header: Text.Root("Design", { fontWeight: "semibold" }) },
-            { key: "dev", header: Text.Root("Development", { fontWeight: "semibold" }) },
-            { key: "qa", header: Text.Root("QA", { fontWeight: "semibold" }) },
-        ], {
-            legend: [
-                { category: "committed", color: "green.400", label: "Committed" },
-                { category: "pending", color: "orange.400", label: "Pending" },
-                { category: "slack", color: "gray.200", label: "Slack" },
-            ],
-        });
-    }),
-    inputs: [],
-});
-export const matrixWithOverlays = example({
-    keywords: ["Matrix", "Root", "overlays", "badge", "icon", "alerts"],
-    description: "Cells with rich overlays at different corners — badges, icons, and text",
-    fn: East.function([], UIComponentType, ($) => {
-        const userHeader = $.const(East.function([StringType, StringType], UIComponentType, ($, name, role) => Stack.HStack([
-            Avatar.Root({ name, size: "sm" }),
-            Stack.VStack([
-                Text.Root(name, { fontWeight: "semibold" }),
-                Text.Root(role, { textStyle: "caption", color: "gray.500" }),
-            ], { gap: "0", align: "flex-start" }),
-        ], { gap: "2", align: "center" })));
-        const dayHeader = $.const(East.function([StringType, StringType], UIComponentType, ($, day, date) => Stack.VStack([
-            Text.Root(day, { fontWeight: "semibold" }),
-            Text.Root(date, { textStyle: "caption", color: "gray.500" }),
-        ], { gap: "0", align: "center" })));
-        return Matrix.Root([
-            { key: "alice", header: userHeader("Alice Chen", "PM"), cells: {
-                    mon: {
-                        segments: [{ category: "booked", weight: 0.8 }, { category: "free", weight: 0.2 }],
-                        overlays: [
-                            { align: "end", verticalAlign: "start", content: Badge.Root("!", { variant: "solid", colorPalette: "red", size: "sm" }) },
-                            { align: "start", verticalAlign: "end", content: Text.Root("6.4h", { textStyle: "caption", color: "white", fontWeight: "semibold" }) },
-                        ],
-                    },
-                    tue: {
-                        segments: [{ category: "booked", weight: 0.5 }, { category: "free", weight: 0.5 }],
-                        overlays: [
-                            { align: "start", verticalAlign: "end", content: Text.Root("4h", { textStyle: "caption", color: "white", fontWeight: "semibold" }) },
-                            { align: "end", verticalAlign: "start", content: Icon.Root("fas", "users", { color: "gray.600", size: "xs" }) },
-                        ],
-                    },
-                    wed: {
-                        segments: [{ category: "booked", weight: 1.0 }],
-                        overlays: [
-                            { align: "end", verticalAlign: "start", content: Badge.Root("OT", { variant: "solid", colorPalette: "purple", size: "sm" }) },
-                            { align: "start", verticalAlign: "end", content: Text.Root("9h", { textStyle: "caption", color: "white", fontWeight: "semibold" }) },
-                        ],
-                    },
-                } },
-        ], [
-            { key: "mon", header: dayHeader("Mon", "Apr 22") },
-            { key: "tue", header: dayHeader("Tue", "Apr 23") },
-            { key: "wed", header: dayHeader("Wed", "Apr 24") },
-        ], {
-            legend: [{ category: "booked", color: "blue.400", label: "Booked" }, { category: "free", color: "gray.200", label: "Free" }],
-            rowHeaderWidth: "200px",
-        });
-    }),
-    inputs: [],
-});
-export const matrixEmphasis = example({
-    keywords: ["Matrix", "Root", "emphasis", "emphasisColor", "ring", "at-risk"],
-    description: "Emphasis — cells with `emphasisColor` set get a bright ring. Presence of the field implies emphasis (no separate boolean).",
-    fn: East.function([], UIComponentType, ($) => {
-        const userHeader = $.const(East.function([StringType, StringType], UIComponentType, ($, name, role) => Stack.HStack([
-            Avatar.Root({ name, size: "sm" }),
-            Stack.VStack([
-                Text.Root(name, { fontWeight: "semibold" }),
-                Text.Root(role, { textStyle: "caption", color: "gray.500" }),
-            ], { gap: "0", align: "flex-start" }),
-        ], { gap: "2", align: "center" })));
-        const dayHeader = $.const(East.function([StringType, StringType], UIComponentType, ($, day, date) => Stack.VStack([
-            Text.Root(day, { fontWeight: "semibold" }),
-            Text.Root(date, { textStyle: "caption", color: "gray.500" }),
-        ], { gap: "0", align: "center" })));
-        return Matrix.Root([
-            { key: "alice", header: userHeader("Alice Chen", "PM"), cells: {
-                    mon: { segments: [{ category: "booked", weight: 0.6 }, { category: "free", weight: 0.4 }] },
-                    tue: { segments: [{ category: "booked", weight: 0.6 }, { category: "free", weight: 0.4 }] },
-                    wed: {
-                        segments: [{ category: "at-risk", weight: 1.0, color: "red.400" }],
-                        emphasisColor: "red.500",
-                        overlays: [
-                            { content: Icon.Root("fas", "triangle-exclamation", { color: "white", size: "md" }) },
-                        ],
-                    },
-                    thu: { segments: [{ category: "booked", weight: 0.6 }, { category: "free", weight: 0.4 }] },
-                } },
-            { key: "bob", header: userHeader("Bob Martinez", "Design"), cells: {
-                    mon: { segments: [{ category: "booked", weight: 0.4 }, { category: "free", weight: 0.6 }] },
-                    tue: {
-                        segments: [{ category: "at-risk", weight: 1.0, color: "red.400" }],
-                        emphasisColor: "red.500",
-                        overlays: [
-                            { content: Icon.Root("fas", "triangle-exclamation", { color: "white", size: "md" }) },
-                        ],
-                    },
-                    wed: { segments: [{ category: "booked", weight: 0.6 }, { category: "free", weight: 0.4 }] },
-                    thu: { segments: [{ category: "booked", weight: 0.6 }, { category: "free", weight: 0.4 }] },
-                } },
-        ], [
-            { key: "mon", header: dayHeader("Mon", "Apr 22") },
-            { key: "tue", header: dayHeader("Tue", "Apr 23") },
-            { key: "wed", header: dayHeader("Wed", "Apr 24") },
-            { key: "thu", header: dayHeader("Thu", "Apr 25") },
-        ], {
-            legend: [
-                { category: "booked", color: "blue.400", label: "Booked" },
-                { category: "free", color: "gray.200", label: "Free" },
-                { category: "at-risk", color: "red.400", label: "At risk" },
-            ],
-            rowHeaderWidth: "200px",
-        });
-    }),
-    inputs: [],
-});
-export const matrixVerticalOrientation = example({
-    keywords: ["Matrix", "Root", "cellOrientation", "vertical", "capacity", "dashboard"],
-    description: "Vertical segment orientation — each cell reads as a stacked vertical capacity bar",
-    fn: East.function([], UIComponentType, ($) => {
-        const dayHeader = $.const(East.function([StringType, StringType], UIComponentType, ($, day, date) => Stack.VStack([
-            Text.Root(day, { fontWeight: "semibold" }),
-            Text.Root(date, { textStyle: "caption", color: "gray.500" }),
-        ], { gap: "0", align: "center" })));
-        return Matrix.Root([
-            { key: "team-a", header: Text.Root("Team A", { fontWeight: "semibold" }), cells: {
-                    mon: { segments: [{ category: "used", weight: 0.7 }, { category: "free", weight: 0.3 }] },
-                    tue: { segments: [{ category: "used", weight: 0.4 }, { category: "free", weight: 0.6 }] },
-                    wed: { segments: [{ category: "used", weight: 0.9 }, { category: "free", weight: 0.1 }] },
-                    thu: { segments: [{ category: "used", weight: 0.6 }, { category: "free", weight: 0.4 }] },
-                    fri: { segments: [{ category: "used", weight: 0.3 }, { category: "free", weight: 0.7 }] },
-                } },
-            { key: "team-b", header: Text.Root("Team B", { fontWeight: "semibold" }), cells: {
-                    mon: { segments: [{ category: "used", weight: 0.5 }, { category: "free", weight: 0.5 }] },
-                    tue: { segments: [{ category: "used", weight: 0.8 }, { category: "free", weight: 0.2 }] },
-                    wed: { segments: [{ category: "used", weight: 0.3 }, { category: "free", weight: 0.7 }] },
-                    thu: { segments: [{ category: "used", weight: 1.0 }] },
-                    fri: { segments: [{ category: "used", weight: 0.4 }, { category: "free", weight: 0.6 }] },
-                } },
-        ], [
-            { key: "mon", header: dayHeader("Mon", "Apr 22") },
-            { key: "tue", header: dayHeader("Tue", "Apr 23") },
-            { key: "wed", header: dayHeader("Wed", "Apr 24") },
-            { key: "thu", header: dayHeader("Thu", "Apr 25") },
-            { key: "fri", header: dayHeader("Fri", "Apr 26") },
-        ], {
-            cellOrientation: "vertical",
-            legend: [
-                { category: "used", color: "blue.400", label: "Used capacity" },
-                { category: "free", color: "gray.200", label: "Available" },
-            ],
-            rowHeaderWidth: "140px",
-            columnHeaderHeight: "52px",
-        });
-    }),
-    inputs: [],
-});
-export const matrixBrushSelection = example({
-    keywords: ["Matrix", "Root", "brushSelection", "controlled", "Reactive", "State"],
-    description: "Controlled brush selection — drag to select cells; `selected` in State drives the highlight, `onChange` syncs back",
+/** @jsxImportSource @elaraai/east-ui */
+import { ArrayType, East, FloatType, NullType, StringType, StructType, example, variant } from "@elaraai/east";
+import { State, UIComponentType } from "@elaraai/east-ui";
+import { Matrix, Reactive, Slider, Text, VStack } from "@elaraai/east-ui";
+/**
+ * Heat-grid — rows × days, each cell a booked/free weight bar, rows grouped by
+ * team. The base configuration: utilisation read as bar fill, no labels.
+ */
+export const matrixHeatGrid = example({
+    keywords: ["Matrix", "heat-grid", "segment", "booked", "free", "group", "groupBy", "utilization", "capacity"],
+    description: "Heat-grid: resources × days, each cell a booked/free weight bar; rows grouped by team",
     fn: East.function([], UIComponentType, (_$) => {
-        return Reactive.Root(East.function([], UIComponentType, $ => {
-            const userHeader = $.const(East.function([StringType, StringType], UIComponentType, ($, name, role) => Stack.HStack([
-                Avatar.Root({ name, size: "sm" }),
-                Stack.VStack([
-                    Text.Root(name, { fontWeight: "semibold" }),
-                    Text.Root(role, { textStyle: "caption", color: "gray.500" }),
-                ], { gap: "0", align: "flex-start" }),
-            ], { gap: "2", align: "center" })));
-            const dayHeader = $.const(East.function([StringType, StringType], UIComponentType, ($, day, date) => Stack.VStack([
-                Text.Root(day, { fontWeight: "semibold" }),
-                Text.Root(date, { textStyle: "caption", color: "gray.500" }),
-            ], { gap: "0", align: "center" })));
-            const selBind = $.let(State.bind([ArrayType(Matrix.Types.BrushCoord)], "matrix_brush_selected", []));
-            const selected = $.let(selBind.read(), ArrayType(Matrix.Types.BrushCoord));
-            const onChange = $.const(East.function([ArrayType(Matrix.Types.BrushCoord)], NullType, ($, next) => {
-                $(selBind.write(next));
-            }));
-            return Stack.VStack([
-                Matrix.Root([
-                    { key: "alice", header: userHeader("Alice Chen", "PM"), cells: {
-                            mon: { segments: [{ category: "booked", weight: 0.8 }] },
-                            tue: { segments: [{ category: "booked", weight: 0.5 }] },
-                            wed: { segments: [{ category: "booked", weight: 0.3 }] },
-                            thu: { segments: [{ category: "booked", weight: 0.9 }] },
-                        } },
-                    { key: "bob", header: userHeader("Bob Martinez", "Design"), cells: {
-                            mon: { segments: [{ category: "booked", weight: 0.4 }] },
-                            tue: { segments: [{ category: "booked", weight: 0.9 }] },
-                            wed: { segments: [{ category: "booked", weight: 0.6 }] },
-                            thu: { segments: [{ category: "booked", weight: 0.7 }] },
-                        } },
-                ], [
-                    { key: "mon", header: dayHeader("Mon", "Apr 22") },
-                    { key: "tue", header: dayHeader("Tue", "Apr 23") },
-                    { key: "wed", header: dayHeader("Wed", "Apr 24") },
-                    { key: "thu", header: dayHeader("Thu", "Apr 25") },
-                ], {
-                    brushSelection: { enabled: true, selected, onChange },
-                    legend: [{ category: "booked", color: "blue.400", label: "Booked" }],
-                    rowHeaderWidth: "200px",
-                }),
-                Badge.Root(East.str `Selected: ${East.print(selected.size())} cells`, { variant: "subtle", colorPalette: "blue" }),
-            ], { gap: "3", align: "stretch" });
-        }));
+        return (_jsx(Matrix, { data: [
+                { name: "Alice", role: "Senior PM", team: "Web", booked: new Map([["mon", 0.45], ["tue", 0.70], ["wed", 0.85], ["thu", 0.60], ["fri", 0.30]]) },
+                { name: "Bob", role: "Designer", team: "Web", booked: new Map([["mon", 0.35], ["tue", 0.60], ["wed", 0.30], ["thu", 0.75], ["fri", 0.50]]) },
+                { name: "Carol", role: "Engineer", team: "Batch", booked: new Map([["mon", 0.55], ["tue", 0.40], ["wed", 0.90], ["thu", 0.20], ["fri", 0.65]]) },
+            ], columns: [
+                Matrix.column({ key: "mon", label: "Mon" }),
+                Matrix.column({ key: "tue", label: "Tue" }),
+                Matrix.column({ key: "wed", label: "Wed" }),
+                Matrix.column({ key: "thu", label: "Thu" }),
+                Matrix.column({ key: "fri", label: "Fri" }),
+            ], rowKey: r => r.name, rowHeader: "Resource", rowSublabel: r => r.role, groupBy: r => r.team, cell: (r, col) => Matrix.cell({ segments: [
+                    Matrix.segment({ fill: "brand", weight: r.booked.get(col.key) }),
+                    Matrix.segment({ fill: "free", weight: East.value(1.0, FloatType).subtract(r.booked.get(col.key)) }),
+                ] }), legend: [{ fill: "brand", label: "Booked" }, { fill: "free", label: "Free" }] }));
     }),
     inputs: [],
 });
-export const matrixReactiveClick = example({
-    keywords: ["Matrix", "Root", "onCellClick", "Reactive", "State"],
-    description: "Reactive cell click — selected `{row, column}` is tracked in State and shown as confirmation badges",
+/**
+ * Multi-segment — three categories per cell (committed / pending / slack) with
+ * in-bar % labels, drag-resize handles (via `onSegmentChange`), and labels
+ * suppressed under `minLabelSize`.
+ */
+export const matrixSegments = example({
+    keywords: ["Matrix", "segment", "committed", "pending", "slack", "drag", "resize", "onSegmentChange", "minLabelSize", "weight", "allocation"],
+    description: "Multi-segment cells (committed / pending / slack) with in-bar labels, drag-resize, and minLabelSize suppression",
     fn: East.function([], UIComponentType, (_$) => {
-        return Reactive.Root(East.function([], UIComponentType, $ => {
-            const userHeader = $.const(East.function([StringType, StringType], UIComponentType, ($, name, role) => Stack.HStack([
-                Avatar.Root({ name, size: "sm" }),
-                Stack.VStack([
-                    Text.Root(name, { fontWeight: "semibold" }),
-                    Text.Root(role, { textStyle: "caption", color: "gray.500" }),
-                ], { gap: "0", align: "flex-start" }),
-            ], { gap: "2", align: "center" })));
-            const dayHeader = $.const(East.function([StringType, StringType], UIComponentType, ($, day, date) => Stack.VStack([
-                Text.Root(day, { fontWeight: "semibold" }),
-                Text.Root(date, { textStyle: "caption", color: "gray.500" }),
-            ], { gap: "0", align: "center" })));
-            const rowBind = $.let(State.bind([StringType], "matrix_sel_row", ""));
-            const colBind = $.let(State.bind([StringType], "matrix_sel_col", ""));
-            const countBind = $.let(State.bind([IntegerType], "matrix_click_count", 0n));
-            const row = $.let(rowBind.read(), StringType);
-            const column = $.let(colBind.read(), StringType);
-            const count = $.let(countBind.read(), IntegerType);
-            const onCellClick = $.const(East.function([Matrix.Types.BrushCoord], NullType, ($, coord) => {
-                const current = $.let(countBind.read(), IntegerType);
-                $(rowBind.write(coord.row));
-                $(colBind.write(coord.column));
-                $(countBind.write(current.add(1n)));
-            }));
-            return Stack.VStack([
-                Matrix.Root([
-                    { key: "alice", header: userHeader("Alice Chen", "PM"), cells: {
-                            mon: { segments: [{ category: "booked", weight: 0.8 }] },
-                            tue: { segments: [{ category: "booked", weight: 0.5 }] },
-                            wed: { segments: [{ category: "booked", weight: 0.3 }] },
-                        } },
-                    { key: "bob", header: userHeader("Bob Martinez", "Design"), cells: {
-                            mon: { segments: [{ category: "booked", weight: 0.4 }] },
-                            tue: { segments: [{ category: "booked", weight: 0.9 }] },
-                            wed: { segments: [{ category: "booked", weight: 0.6 }] },
-                        } },
-                ], [
-                    { key: "mon", header: dayHeader("Mon", "Apr 22") },
-                    { key: "tue", header: dayHeader("Tue", "Apr 23") },
-                    { key: "wed", header: dayHeader("Wed", "Apr 24") },
-                ], {
-                    onCellClick,
-                    legend: [{ category: "booked", color: "blue.400", label: "Booked" }],
-                    rowHeaderWidth: "200px",
-                }),
-                Stack.HStack([
-                    Badge.Root(East.str `Clicks: ${East.print(count)}`, { variant: "subtle", colorPalette: "gray" }),
-                    Badge.Root(East.str `Last: ${row}, ${column}`, { variant: "subtle", colorPalette: "blue" }),
-                ], { gap: "2" }),
-            ], { gap: "3", align: "stretch" });
-        }));
+        return (_jsx(Matrix, { data: [
+                { sprint: "Sprint 1", committed: new Map([["design", 0.50], ["dev", 0.70], ["qa", 0.30]]), pending: new Map([["design", 0.30], ["dev", 0.20], ["qa", 0.40]]) },
+                { sprint: "Sprint 2", committed: new Map([["design", 0.45], ["dev", 0.80], ["qa", 0.25]]), pending: new Map([["design", 0.35], ["dev", 0.15], ["qa", 0.35]]) },
+            ], columns: [
+                Matrix.column({ key: "design", label: "Design" }),
+                Matrix.column({ key: "dev", label: "Development" }),
+                Matrix.column({ key: "qa", label: "QA" }),
+            ], rowKey: r => r.sprint, rowHeader: "Sprint", minLabelSize: 28.0, cell: (r, col) => Matrix.cell({ segments: [
+                    Matrix.segment({ fill: "success", weight: r.committed.get(col.key), label: East.str `${r.committed.get(col.key).multiply(100.0)}%`, min: 0.0, max: 1.0, step: 0.05 }),
+                    Matrix.segment({ fill: "warning", weight: r.pending.get(col.key), label: East.str `${r.pending.get(col.key).multiply(100.0)}%`, min: 0.0, max: 1.0, step: 0.05 }),
+                    Matrix.segment({ fill: "slack", weight: East.value(1.0, FloatType).subtract(r.committed.get(col.key)).subtract(r.pending.get(col.key)) }),
+                ] }), legend: [{ fill: "success", label: "Committed" }, { fill: "warning", label: "Pending" }, { fill: "slack", label: "Slack" }], onSegmentChange: East.function([Matrix.Types.SegmentChangeEvent], NullType, _$ => null) }));
     }),
     inputs: [],
 });
-export const matrixReactiveSegmentEdit = example({
-    keywords: ["Matrix", "Root", "onSegmentChange", "drag", "resize", "Reactive", "State"],
-    description: "Drag-to-resize segments — `onSegmentChange` writes the new weight back to State; dragging a segment edge rebalances within the cell. Live values shown below update as you drag.",
+/**
+ * Vertical orientation — each cell a bottom-anchored stacked capacity bar
+ * (utilisation by height) instead of a horizontal weight bar.
+ */
+export const matrixVertical = example({
+    keywords: ["Matrix", "vertical", "orientation", "capacity", "stacked", "utilization", "bar"],
+    description: "Vertical orientation — cells stack bottom-up as capacity bars (height-encoded utilisation)",
     fn: East.function([], UIComponentType, (_$) => {
-        return Reactive.Root(East.function([], UIComponentType, $ => {
-            const userHeader = $.const(East.function([StringType, StringType], UIComponentType, ($, name, role) => Stack.HStack([
-                Avatar.Root({ name, size: "sm" }),
-                Stack.VStack([
-                    Text.Root(name, { fontWeight: "semibold" }),
-                    Text.Root(role, { textStyle: "caption", color: "gray.500" }),
-                ], { gap: "0", align: "flex-start" }),
-            ], { gap: "2", align: "center" })));
-            const dayHeader = $.const(East.function([StringType, StringType], UIComponentType, ($, day, date) => Stack.VStack([
-                Text.Root(day, { fontWeight: "semibold" }),
-                Text.Root(date, { textStyle: "caption", color: "gray.500" }),
-            ], { gap: "0", align: "center" })));
-            const monBooked = $.let(State.bind([FloatType], "matrix_edit_mon_booked", 0.7));
-            const tueBooked = $.let(State.bind([FloatType], "matrix_edit_tue_booked", 0.5));
-            const wedBooked = $.let(State.bind([FloatType], "matrix_edit_wed_booked", 0.9));
-            const monW = $.let(monBooked.read(), FloatType);
-            const tueW = $.let(tueBooked.read(), FloatType);
-            const wedW = $.let(wedBooked.read(), FloatType);
-            const monPct = $.let(East.Float.roundHalf(monW.multiply(100.0)), IntegerType);
-            const tuePct = $.let(East.Float.roundHalf(tueW.multiply(100.0)), IntegerType);
-            const wedPct = $.let(East.Float.roundHalf(wedW.multiply(100.0)), IntegerType);
-            const onSegmentChange = $.const(East.function([Matrix.Types.SegmentChangeEvent], NullType, ($, evt) => {
-                $.if(evt.column.equals("mon").and(() => evt.category.equals("booked")), $ => {
-                    $(monBooked.write(evt.weight));
-                });
-                $.if(evt.column.equals("tue").and(() => evt.category.equals("booked")), $ => {
-                    $(tueBooked.write(evt.weight));
-                });
-                $.if(evt.column.equals("wed").and(() => evt.category.equals("booked")), $ => {
-                    $(wedBooked.write(evt.weight));
-                });
-            }));
-            return Matrix.Root([
-                { key: "alice", header: userHeader("Alice Chen", "PM"), cells: {
-                        mon: { segments: [
-                                { category: "booked", weight: monW, step: 0.05, label: East.str `${East.print(monPct)}%` },
-                                { category: "free", weight: East.value(1.0).subtract(monW), label: East.str `${East.print(East.value(100n).subtract(monPct))}%` },
-                            ] },
-                        tue: { segments: [
-                                { category: "booked", weight: tueW, step: 0.05, label: East.str `${East.print(tuePct)}%` },
-                                { category: "free", weight: East.value(1.0).subtract(tueW), label: East.str `${East.print(East.value(100n).subtract(tuePct))}%` },
-                            ] },
-                        wed: { segments: [
-                                { category: "booked", weight: wedW, step: 0.05, label: East.str `${East.print(wedPct)}%` },
-                                { category: "free", weight: East.value(1.0).subtract(wedW), label: East.str `${East.print(East.value(100n).subtract(wedPct))}%` },
-                            ] },
-                    } },
-            ], [
-                { key: "mon", header: dayHeader("Mon", "Apr 22") },
-                { key: "tue", header: dayHeader("Tue", "Apr 23") },
-                { key: "wed", header: dayHeader("Wed", "Apr 24") },
-            ], {
-                onSegmentChange,
-                legend: [{ category: "booked", color: "blue.400", label: "Booked" }, { category: "free", color: "gray.200", label: "Free" }],
-                rowHeaderWidth: "200px",
-            });
-        }));
+        return (_jsx(Matrix, { data: [
+                { team: "Team A", booked: new Map([["mon", 0.70], ["tue", 0.55], ["wed", 0.90], ["thu", 0.65], ["fri", 0.45]]) },
+                { team: "Team B", booked: new Map([["mon", 0.50], ["tue", 0.75], ["wed", 0.40], ["thu", 0.85], ["fri", 0.60]]) },
+            ], columns: [
+                Matrix.column({ key: "mon", label: "Mon" }),
+                Matrix.column({ key: "tue", label: "Tue" }),
+                Matrix.column({ key: "wed", label: "Wed" }),
+                Matrix.column({ key: "thu", label: "Thu" }),
+                Matrix.column({ key: "fri", label: "Fri" }),
+            ], rowKey: r => r.team, rowHeader: "Team", orientation: "vertical", cell: (r, col) => Matrix.cell({ segments: [
+                    Matrix.segment({ fill: "brand", weight: r.booked.get(col.key) }),
+                    Matrix.segment({ fill: "free", weight: East.value(1.0, FloatType).subtract(r.booked.get(col.key)) }),
+                ] }), legend: [{ fill: "brand", label: "Used capacity" }, { fill: "free", label: "Available" }] }));
     }),
     inputs: [],
 });
-export const matrixReactiveSegmentEditMulti = example({
-    keywords: ["Matrix", "Root", "onSegmentChange", "drag", "resize", "multi-segment", "Reactive", "State"],
-    description: "Multi-segment drag-resize — three categories per cell (committed / pending / slack); both internal boundaries are draggable, slack auto-fills the remainder. Live values shown below.",
+/**
+ * Cell status markers — every cell carries a marker (the Matrix analogue of
+ * `Planner.marker`) whose status, corner icon, and hover message follow the
+ * booked value: over-capacity cells flag `danger`, near-capacity `warning`, the
+ * rest `success`. The marker tints a corner ring over the segment bar.
+ */
+export const matrixMarkers = example({
+    keywords: ["Matrix", "marker", "status", "ring", "corner", "tooltip", "danger", "warning", "capacity", "overbooked"],
+    description: "Cell status markers (the Matrix analogue of Planner.marker) — status/message follow the booked value, tinting a corner ring",
     fn: East.function([], UIComponentType, (_$) => {
-        return Reactive.Root(East.function([], UIComponentType, $ => {
-            const designCommitted = $.let(State.bind([FloatType], "matrix_multi_design_committed", 0.5));
-            const designPending = $.let(State.bind([FloatType], "matrix_multi_design_pending", 0.3));
-            const devCommitted = $.let(State.bind([FloatType], "matrix_multi_dev_committed", 0.7));
-            const devPending = $.let(State.bind([FloatType], "matrix_multi_dev_pending", 0.2));
-            const qaCommitted = $.let(State.bind([FloatType], "matrix_multi_qa_committed", 0.3));
-            const qaPending = $.let(State.bind([FloatType], "matrix_multi_qa_pending", 0.4));
-            const designC = $.let(designCommitted.read(), FloatType);
-            const designP = $.let(designPending.read(), FloatType);
-            const devC = $.let(devCommitted.read(), FloatType);
-            const devP = $.let(devPending.read(), FloatType);
-            const qaC = $.let(qaCommitted.read(), FloatType);
-            const qaP = $.let(qaPending.read(), FloatType);
-            const designCPct = $.let(East.Float.roundHalf(designC.multiply(100.0)), IntegerType);
-            const designPPct = $.let(East.Float.roundHalf(designP.multiply(100.0)), IntegerType);
-            const designSPct = $.let(East.value(100n).subtract(designCPct).subtract(designPPct), IntegerType);
-            const devCPct = $.let(East.Float.roundHalf(devC.multiply(100.0)), IntegerType);
-            const devPPct = $.let(East.Float.roundHalf(devP.multiply(100.0)), IntegerType);
-            const devSPct = $.let(East.value(100n).subtract(devCPct).subtract(devPPct), IntegerType);
-            const qaCPct = $.let(East.Float.roundHalf(qaC.multiply(100.0)), IntegerType);
-            const qaPPct = $.let(East.Float.roundHalf(qaP.multiply(100.0)), IntegerType);
-            const qaSPct = $.let(East.value(100n).subtract(qaCPct).subtract(qaPPct), IntegerType);
-            const onSegmentChange = $.const(East.function([Matrix.Types.SegmentChangeEvent], NullType, ($, evt) => {
-                $.if(evt.column.equals("design").and(() => evt.category.equals("committed")), $ => {
-                    $(designCommitted.write(evt.weight));
-                });
-                $.if(evt.column.equals("design").and(() => evt.category.equals("pending")), $ => {
-                    $(designPending.write(evt.weight));
-                });
-                $.if(evt.column.equals("dev").and(() => evt.category.equals("committed")), $ => {
-                    $(devCommitted.write(evt.weight));
-                });
-                $.if(evt.column.equals("dev").and(() => evt.category.equals("pending")), $ => {
-                    $(devPending.write(evt.weight));
-                });
-                $.if(evt.column.equals("qa").and(() => evt.category.equals("committed")), $ => {
-                    $(qaCommitted.write(evt.weight));
-                });
-                $.if(evt.column.equals("qa").and(() => evt.category.equals("pending")), $ => {
-                    $(qaPending.write(evt.weight));
-                });
-            }));
-            return Matrix.Root([
-                { key: "sprint-1", header: Text.Root("Sprint 1", { fontWeight: "semibold" }), cells: {
-                        design: { segments: [
-                                { category: "committed", weight: designC, step: 0.05, min: 0.05, max: 0.9, label: East.str `${East.print(designCPct)}%` },
-                                { category: "pending", weight: designP, step: 0.05, min: 0.05, max: 0.9, label: East.str `${East.print(designPPct)}%` },
-                                { category: "slack", weight: East.value(1.0).subtract(designC).subtract(designP), label: East.str `${East.print(designSPct)}%` },
-                            ] },
-                        dev: { segments: [
-                                { category: "committed", weight: devC, step: 0.05, min: 0.05, max: 0.9, label: East.str `${East.print(devCPct)}%` },
-                                { category: "pending", weight: devP, step: 0.05, min: 0.05, max: 0.9, label: East.str `${East.print(devPPct)}%` },
-                                { category: "slack", weight: East.value(1.0).subtract(devC).subtract(devP), label: East.str `${East.print(devSPct)}%` },
-                            ] },
-                        qa: { segments: [
-                                { category: "committed", weight: qaC, step: 0.05, min: 0.05, max: 0.9, label: East.str `${East.print(qaCPct)}%` },
-                                { category: "pending", weight: qaP, step: 0.05, min: 0.05, max: 0.9, label: East.str `${East.print(qaPPct)}%` },
-                                { category: "slack", weight: East.value(1.0).subtract(qaC).subtract(qaP), label: East.str `${East.print(qaSPct)}%` },
-                            ] },
-                    } },
-            ], [
-                { key: "design", header: Text.Root("Design", { fontWeight: "semibold" }) },
-                { key: "dev", header: Text.Root("Development", { fontWeight: "semibold" }) },
-                { key: "qa", header: Text.Root("QA", { fontWeight: "semibold" }) },
-            ], {
-                onSegmentChange,
-                legend: [
-                    { category: "committed", color: "green.400", label: "Committed" },
-                    { category: "pending", color: "orange.400", label: "Pending" },
-                    { category: "slack", color: "gray.200", label: "Slack" },
+        return (_jsx(Matrix, { data: [
+                { name: "Alice", role: "PM", booked: new Map([["mon", 0.80], ["tue", 0.50], ["wed", 1.00]]) },
+                { name: "Bob", role: "Design", booked: new Map([["mon", 0.35], ["tue", 1.00], ["wed", 0.60]]) },
+            ], columns: [
+                Matrix.column({ key: "mon", label: "Mon" }),
+                Matrix.column({ key: "tue", label: "Tue" }),
+                Matrix.column({ key: "wed", label: "Wed" }),
+            ], rowKey: r => r.name, rowHeader: "Resource", rowSublabel: r => r.role, cell: (r, col) => Matrix.cell({
+                segments: [
+                    Matrix.segment({ fill: "brand", weight: r.booked.get(col.key), label: East.str `${r.booked.get(col.key).multiply(8.0)}h` }),
+                    Matrix.segment({ fill: "free", weight: East.value(1.0, FloatType).subtract(r.booked.get(col.key)) }),
                 ],
-            });
-        }));
+                markers: [Matrix.marker({
+                        status: r.booked.get(col.key).greaterEqual(1.0).ifElse(_$ => variant("danger", null), _$ => r.booked.get(col.key).greaterEqual(0.75).ifElse(_$ => variant("warning", null), _$ => variant("success", null))),
+                        message: East.str `${r.booked.get(col.key).multiply(100.0)}% booked`,
+                        at: "tr",
+                    })],
+            }), legend: [{ fill: "brand", label: "Booked" }, { fill: "free", label: "Free" }] }));
     }),
     inputs: [],
 });
-export const matrixReactiveSegmentEditVertical = example({
-    keywords: ["Matrix", "Root", "onSegmentChange", "cellOrientation", "vertical", "drag", "resize", "Reactive", "State"],
-    description: "Vertical-orientation drag-resize — drag the top of a segment to rebalance utilization vs free capacity in a stacked vertical bar",
+/**
+ * Per-cell click popover — pass a UIComponent into `popover` for rich detail on
+ * click (popover-only, like the Planner event — no tooltip).
+ */
+export const matrixPopover = example({
+    keywords: ["Matrix", "popover", "click", "detail", "onCellClick"],
+    description: "Per-cell click popover with rich content",
     fn: East.function([], UIComponentType, (_$) => {
-        return Reactive.Root(East.function([], UIComponentType, $ => {
-            const dayHeader = $.const(East.function([StringType, StringType], UIComponentType, ($, day, date) => Stack.VStack([
-                Text.Root(day, { fontWeight: "semibold" }),
-                Text.Root(date, { textStyle: "caption", color: "gray.500" }),
-            ], { gap: "0", align: "center" })));
-            const monUsed = $.let(State.bind([FloatType], "matrix_vedit_mon_used", 0.7));
-            const tueUsed = $.let(State.bind([FloatType], "matrix_vedit_tue_used", 0.4));
-            const wedUsed = $.let(State.bind([FloatType], "matrix_vedit_wed_used", 0.9));
-            const thuUsed = $.let(State.bind([FloatType], "matrix_vedit_thu_used", 0.6));
-            const friUsed = $.let(State.bind([FloatType], "matrix_vedit_fri_used", 0.3));
-            const monU = $.let(monUsed.read(), FloatType);
-            const tueU = $.let(tueUsed.read(), FloatType);
-            const wedU = $.let(wedUsed.read(), FloatType);
-            const thuU = $.let(thuUsed.read(), FloatType);
-            const friU = $.let(friUsed.read(), FloatType);
-            const onSegmentChange = $.const(East.function([Matrix.Types.SegmentChangeEvent], NullType, ($, evt) => {
-                $.if(evt.column.equals("mon").and(() => evt.category.equals("used")), $ => {
-                    $(monUsed.write(evt.weight));
-                });
-                $.if(evt.column.equals("tue").and(() => evt.category.equals("used")), $ => {
-                    $(tueUsed.write(evt.weight));
-                });
-                $.if(evt.column.equals("wed").and(() => evt.category.equals("used")), $ => {
-                    $(wedUsed.write(evt.weight));
-                });
-                $.if(evt.column.equals("thu").and(() => evt.category.equals("used")), $ => {
-                    $(thuUsed.write(evt.weight));
-                });
-                $.if(evt.column.equals("fri").and(() => evt.category.equals("used")), $ => {
-                    $(friUsed.write(evt.weight));
-                });
-            }));
-            return Matrix.Root([
-                { key: "team-a", header: Text.Root("Team A", { fontWeight: "semibold" }), cells: {
-                        mon: { segments: [{ category: "used", weight: monU, step: 0.05 }, { category: "free", weight: East.value(1.0).subtract(monU) }] },
-                        tue: { segments: [{ category: "used", weight: tueU, step: 0.05 }, { category: "free", weight: East.value(1.0).subtract(tueU) }] },
-                        wed: { segments: [{ category: "used", weight: wedU, step: 0.05 }, { category: "free", weight: East.value(1.0).subtract(wedU) }] },
-                        thu: { segments: [{ category: "used", weight: thuU, step: 0.05 }, { category: "free", weight: East.value(1.0).subtract(thuU) }] },
-                        fri: { segments: [{ category: "used", weight: friU, step: 0.05 }, { category: "free", weight: East.value(1.0).subtract(friU) }] },
-                    } },
-            ], [
-                { key: "mon", header: dayHeader("Mon", "Apr 22") },
-                { key: "tue", header: dayHeader("Tue", "Apr 23") },
-                { key: "wed", header: dayHeader("Wed", "Apr 24") },
-                { key: "thu", header: dayHeader("Thu", "Apr 25") },
-                { key: "fri", header: dayHeader("Fri", "Apr 26") },
-            ], {
-                cellOrientation: "vertical",
-                onSegmentChange,
-                legend: [
-                    { category: "used", color: "blue.400", label: "Used capacity" },
-                    { category: "free", color: "gray.200", label: "Available" },
+        return (_jsx(Matrix, { data: [{ name: "Alice", booked: new Map([["mon", 0.7], ["tue", 0.4]]) }], columns: [
+                Matrix.column({ key: "mon", label: "Mon" }),
+                Matrix.column({ key: "tue", label: "Tue" }),
+            ], rowKey: r => r.name, rowHeader: "Resource", cell: (r, col) => Matrix.cell({
+                segments: [
+                    Matrix.segment({ fill: "brand", weight: r.booked.get(col.key) }),
+                    Matrix.segment({ fill: "free", weight: East.value(1.0, FloatType).subtract(r.booked.get(col.key)) }),
                 ],
-                rowHeaderWidth: "140px",
-                columnHeaderHeight: "52px",
-            });
-        }));
+                popover: (_jsxs(VStack, { gap: "1", children: [_jsx(Text, { fontWeight: "semibold", children: "Allocation" }), _jsx(Text, { color: "fg.muted", children: East.str `${r.booked.get(col.key).multiply(100.0)}% booked` })] })),
+            }), onCellClick: East.function([Matrix.Types.CellClickEvent], NullType, _$ => null) }));
     }),
     inputs: [],
 });
-// ============================================================================
-// Plan 1.10 J — popover + minLabelSize coverage
-// ============================================================================
-export const matrixCellPopover = example({
-    keywords: ["Matrix", "Cell", "popover", "click", "rich", "Stat"],
-    description: "Per-cell click popover — pass a UIComponent into `popover` to open a rich Stat / form / detail view on cell click",
-    fn: East.function([], UIComponentType, (_$) => {
-        return Matrix.Root([
-            { key: "alice", header: Text.Root("Alice"), cells: {
-                    mon: {
-                        segments: [
-                            { category: "booked", weight: 6.0 },
-                            { category: "free", weight: 2.0 },
-                        ],
-                        popover: Stat.Root("Alice — Monday", "6 booked / 2 free", { helpText: "Click again to dismiss." }),
-                    },
-                    tue: {
-                        segments: [{ category: "free", weight: 8.0 }],
-                        popover: Stat.Root("Alice — Tuesday", "Fully free"),
-                    },
-                } },
-        ], [
-            { key: "mon", header: Text.Root("Mon") },
-            { key: "tue", header: Text.Root("Tue") },
-        ], {
-            legend: [
-                { category: "booked", color: "blue.500", label: "Booked" },
-                { category: "free", color: "green.300", label: "Free" },
-            ],
-        });
-    }),
+/**
+ * Reactive bound-state edit — dragging the committed segment fires
+ * `onSegmentChange`, which writes the new weight to browser-local state; the
+ * cell reads that bound value back, so the grid is fully controlled.
+ */
+export const matrixReactiveAdjust = example({
+    keywords: ["Matrix", "reactive", "State", "bind", "onSegmentChange", "adjust", "edit", "drag", "controlled"],
+    description: "Drag a segment to adjust its weight — onSegmentChange writes the new value to bound State, which the cell reads back",
+    fn: East.function([], UIComponentType, (_$) => (_jsx(Reactive, { children: $ => {
+            const committedBind = $.let(State.bind([FloatType], "matrix_adjust_committed", 0.5));
+            const committed = $.let(committedBind.read());
+            const data = $.const([{ team: "Squad", load: committed }], ArrayType(StructType({ team: StringType, load: FloatType })));
+            return (_jsx(Matrix, { data: data, columns: [
+                    Matrix.column({ key: "load", label: "Allocation" }),
+                ], rowKey: r => r.team, rowHeader: "Squad", cell: (r, _col) => Matrix.cell({ segments: [
+                        Matrix.segment({ fill: "success", weight: r.load, label: East.str `${r.load.multiply(100.0)}%`, min: 0.0, max: 1.0, step: 0.05 }),
+                        Matrix.segment({ fill: "slack", weight: East.value(1.0, FloatType).subtract(r.load) }),
+                    ] }), onSegmentChange: East.function([Matrix.Types.SegmentChangeEvent], NullType, ($, e) => {
+                    $(committedBind.write(e.weight));
+                }) }));
+        } }))),
     inputs: [],
 });
-export const matrixMinLabelSize = example({
-    keywords: ["Matrix", "minLabelSize", "segment", "label", "threshold"],
-    description: "`style.minLabelSize` suppresses segment labels when the rendered slice is too narrow — set lower to show more, higher to hide more",
-    fn: East.function([], UIComponentType, (_$) => {
-        return Matrix.Root([
-            { key: "task", header: Text.Root("Mix"), cells: {
-                    week: {
-                        segments: [
-                            { category: "big", weight: 7.0, label: { value: "Big slice" } },
-                            { category: "med", weight: 2.0, label: { value: "Med" } },
-                            { category: "tiny", weight: 1.0, label: { value: "Tiny" } },
-                        ],
-                    },
-                } },
-        ], [
-            { key: "week", header: Text.Root("Week 1") },
-        ], {
-            // Default is `"24px"` — bump to `"48px"` so anything narrower
-            // than that drops its label rather than getting clipped.
-            minLabelSize: "48px",
-            legend: [
-                { category: "big", color: "blue.400" },
-                { category: "med", color: "orange.400" },
-                { category: "tiny", color: "red.400" },
-            ],
-        });
-    }),
+/**
+ * Reactive data-driven pivot — both axes are derived from the cell records, not
+ * declared. A flat list of `{ resource, day, load }` bookings is pivoted into a
+ * resource × day grid: the distinct days become the `columns` and the distinct
+ * resources become the rows, each computed East-side from the data. A bound
+ * threshold drops every booking below it, so as you drag the slider whole
+ * columns and rows appear and disappear with the surviving cells.
+ */
+export const matrixReactivePivot = example({
+    keywords: ["Matrix", "reactive", "pivot", "data-driven", "columns", "rows", "State", "threshold", "filter"],
+    description: "Reactive pivot — rows and columns are both derived from the cell records; drag the threshold to drop low bookings and watch whole rows/columns appear and disappear",
+    fn: East.function([], UIComponentType, (_$) => (_jsx(Reactive, { children: $ => {
+            const BookingArrayType = ArrayType(StructType({ resource: StringType, day: StringType, load: FloatType }));
+            const bookings = $.let([
+                { resource: "Alice", day: "Mon", load: 0.90 },
+                { resource: "Alice", day: "Tue", load: 0.30 },
+                { resource: "Alice", day: "Wed", load: 0.60 },
+                { resource: "Bob", day: "Mon", load: 0.20 },
+                { resource: "Bob", day: "Wed", load: 0.80 },
+                { resource: "Carol", day: "Tue", load: 0.50 },
+                { resource: "Carol", day: "Thu", load: 0.95 },
+                { resource: "Dave", day: "Fri", load: 0.15 },
+            ], BookingArrayType);
+            const thresholdBind = $.let(State.bind([FloatType], "matrix_pivot_threshold", 0.0));
+            const threshold = $.let(thresholdBind.read());
+            const onChange = $.const(East.function([FloatType], NullType, ($, next) => {
+                $(thresholdBind.write(next));
+            }));
+            // Both axes emerge from the surviving cells: keep bookings at or above
+            // the threshold, then take the distinct days (columns) and resources (rows).
+            const kept = $.let(bookings.filter(($, b) => b.load.greaterEqual(threshold)));
+            const dayKeys = $.let(kept.toSet(($, b) => b.day).toArray());
+            const resourceKeys = $.let(kept.toSet(($, b) => b.resource).toArray());
+            return (_jsxs(VStack, { gap: "3", align: "stretch", children: [_jsx(Slider, { value: threshold, min: 0, max: 1, step: 0.05, onChange: onChange }), _jsx(Text.MonoLabel, { children: East.str `THRESHOLD ${East.print(threshold)} · ${resourceKeys.size()} ROWS × ${dayKeys.size()} COLS` }), _jsx(Matrix, { data: resourceKeys.map(($, name) => ({
+                            name,
+                            // Pivot this resource's surviving bookings into a day → load
+                            // cell, summed per (resource, day) and zero where it has none.
+                            loads: dayKeys.toDict(($, day) => day, ($, day) => kept.filter(($, b) => b.resource.equal(name).and(() => b.day.equal(day))).sum(($, b) => b.load)),
+                        })), columns: dayKeys.map(($, day) => Matrix.column({ key: day, label: day })), rowKey: r => r.name, rowHeader: "Resource", cell: (r, col) => Matrix.cell({ segments: [
+                                Matrix.segment({ fill: "brand", weight: r.loads.get(col.key), label: East.str `${r.loads.get(col.key).multiply(100.0)}%` }),
+                                Matrix.segment({ fill: "free", weight: East.value(1.0, FloatType).subtract(r.loads.get(col.key)) }),
+                            ] }), legend: [{ fill: "brand", label: "Booked" }, { fill: "free", label: "Free" }] })] }));
+        } }))),
     inputs: [],
 });
 //# sourceMappingURL=matrix.examples.js.map