@elaraai/e3-ui 1.0.59 → 1.0.61

package/dist/test/diff/diff.examples.js

@@ -10,11 +10,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "@elaraai/e3-ui/jsx-runtime";
  * surfacing the pending changes for sign-off.
  *
  * Coverage:
- *   1. Slider-driven editor    → workforcePolicyEditor
- *   2. Heterogeneous inputs    → serviceConfigForm
- *   3. Editable Table cells    → rosterTableEditor
- *   4. Mixed sliders + inputs  → pricingRulesEditor (side-by-side mode)
- *   5. Minimal call site       → diffDefaults (IR-roundtrip)
+ *   1. Slider-driven editor     → workforcePolicyEditor
+ *   2. Editor variants panel    → diffEditorVariants (heterogeneous inputs /
+ *      mixed sliders + inputs / Set / Dict / Variant / density presets)
+ *   3. Editable Table cells     → rosterTableEditor
+ *   4. Minimal call site        → diffDefaults (IR-roundtrip)
+ *   5. Merge-conflict chooser   → mergeConflictDemo
+ *   6. Overlay-mode patches     → diffOverlayVariants
+ *   7. Staged + patch datasets  → diffStagedPatchVariants
  *
  * Pattern:
  *   1. Declare an `e3.input(name, type, default)` per editable scalar.
@@ -25,7 +28,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "@elaraai/e3-ui/jsx-runtime";
  *      the merged batch; Discard drops the buffer.
  */
 import { East, FloatType, IntegerType, StringType, BooleanType, DateTimeType, ArrayType, StructType, SetType, DictType, VariantType, NullType, FunctionType, PatchType, diffFor, some, variant, example, } from "@elaraai/east";
-import { Card, HStack, VStack, Slider, Input, Switch, Select, Text, Button, Reactive, Table, UIComponentType, } from "@elaraai/east-ui";
+import { Card, HStack, VStack, Slider, Input, Switch, Select, Separator, Text, Button, Reactive, Table, UIComponentType, } from "@elaraai/east-ui";
 import { Data, Diff } from "@elaraai/e3-ui";
 import * as e3 from "@elaraai/e3";
 // ============================================================================
@@ -102,25 +105,84 @@ export const workforcePolicyEditor = example({
     inputs: [],
 });
 // ============================================================================
-// 2. Service-config form — heterogeneous Inputs (String / Integer / DateTime),
-//    Switch, Select; commit fires a Toast.
+// 2. Editor variants panel — the type-coverage enumeration: heterogeneous
+//    scalar inputs (String / Integer / Bool / DateTime / Select), mixed
+//    sliders + inputs (side-by-side Diff), Set / Dict / Variant bindings,
+//    and the two non-default density presets.
 // ============================================================================
-export const serviceConfigForm = example({
-    keywords: ["Diff", "Input", "Switch", "Select", "DateTime", "Toast", "onCommitted"],
-    description: "Service-config form covering String / Integer / Bool / DateTime / Select; commit fires a success Toast",
+export const diffEditorVariants = example({
+    keywords: ["Diff", "Input", "Switch", "Select", "DateTime", "Toast", "onCommitted", "side-by-side", "Slider", "pricing", "discount", "mixed", "Set", "feature flags", "bindStaged", "Dict", "regional pricing", "Variant", "Button", "deployment status", "density", "compact", "condensed"],
+    description: "Editor variant panel — SERVICE CONFIG FORM: heterogeneous String / Integer / Bool / DateTime / Select inputs, commit fires a success Toast; PRICING RULES: sliders for list price/discount, IntegerInput for min order qty, StringInput for currency, Diff in side-by-side mode; FEATURE FLAGS: Switch per known flag toggles inclusion in a staged Set, Diff shows insertions / deletions; REGIONAL PRICING: Input.Float per region writes back to a staged Dict, Diff shows per-key updates; DEPLOYMENT STATUS: buttons set a Variant binding, Diff shows the status tag change; PRICING RULES COMPACT: `density: \"compact\"` — denser rows; PRICING RULES CONDENSED: `density: \"condensed\"` — mission-control sizing for read-heavy views",
     fn: East.function([], UIComponentType, (_$) => {
-        return (_jsx(Reactive, { children: $ => {
-                const svcName = $.let(Data.bind(serviceNameInput, { mode: "staged" }));
-                const replicas = $.let(Data.bind(replicasInput, { mode: "staged" }));
-                const autoScale = $.let(Data.bind(autoScaleInput, { mode: "staged" }));
-                const region = $.let(Data.bind(regionInput, { mode: "staged" }));
-                const deployAfter = $.let(Data.bind(deployAfterInput, { mode: "staged" }));
-                return (_jsx(Card, { children: _jsxs(VStack, { gap: "4", align: "stretch", children: [_jsx(Text, { textStyle: "heading-md", children: "Service configuration" }), _jsx(Text, { children: "Stage edits across heterogeneous types; on apply you\u2019ll see a confirmation toast." }), _jsxs(VStack, { gap: "1", children: [_jsx(Text, { textStyle: "label-sm", children: "Service name" }), _jsx(Input.String, { value: svcName.read(), placeholder: "service-name", onChange: ($, v) => $(svcName.write(v)) })] }), _jsxs(VStack, { gap: "1", children: [_jsx(Text, { textStyle: "label-sm", children: "Replicas" }), _jsx(Input.Integer, { value: replicas.read(), min: 1n, max: 50n, onChange: ($, v) => $(replicas.write(v)) })] }), _jsxs(VStack, { gap: "1", children: [_jsx(Text, { textStyle: "label-sm", children: "Auto-scale" }), _jsx(Switch, { checked: autoScale.read(), onChange: ($, v) => $(autoScale.write(v)) })] }), _jsxs(VStack, { gap: "1", children: [_jsx(Text, { textStyle: "label-sm", children: "Region" }), _jsx(Select, { value: region.read(), items: [
-                                            Select.Item("ap-southeast-2", "ap-southeast-2 (Sydney)"),
-                                            Select.Item("us-east-1", "us-east-1 (N. Virginia)"),
-                                            Select.Item("eu-west-1", "eu-west-1 (Ireland)"),
-                                        ], onChange: ($, v) => $(region.write(v)) })] }), _jsxs(VStack, { gap: "1", children: [_jsx(Text, { textStyle: "label-sm", children: "Deploy after" }), _jsx(Input.DateTime, { value: deployAfter.read(), precision: "datetime", onChange: ($, v) => $(deployAfter.write(v)) })] }), _jsx(Diff, { bindings: [svcName.binding, replicas.binding, autoScale.binding, region.binding, deployAfter.binding] })] }) }));
-            } }));
+        return (_jsxs(VStack, { gap: "4", align: "stretch", children: [_jsx(Separator, { label: "SERVICE CONFIG FORM", align: "start" }), _jsx(Reactive, { children: $ => {
+                        const svcName = $.let(Data.bind(serviceNameInput, { mode: "staged" }));
+                        const replicas = $.let(Data.bind(replicasInput, { mode: "staged" }));
+                        const autoScale = $.let(Data.bind(autoScaleInput, { mode: "staged" }));
+                        const region = $.let(Data.bind(regionInput, { mode: "staged" }));
+                        const deployAfter = $.let(Data.bind(deployAfterInput, { mode: "staged" }));
+                        return (_jsx(Card, { children: _jsxs(VStack, { gap: "4", align: "stretch", children: [_jsx(Text, { textStyle: "heading-md", children: "Service configuration" }), _jsx(Text, { children: "Stage edits across heterogeneous types; on apply you\u2019ll see a confirmation toast." }), _jsxs(VStack, { gap: "1", children: [_jsx(Text, { textStyle: "label-sm", children: "Service name" }), _jsx(Input.String, { value: svcName.read(), placeholder: "service-name", onChange: ($, v) => $(svcName.write(v)) })] }), _jsxs(VStack, { gap: "1", children: [_jsx(Text, { textStyle: "label-sm", children: "Replicas" }), _jsx(Input.Integer, { value: replicas.read(), min: 1n, max: 50n, onChange: ($, v) => $(replicas.write(v)) })] }), _jsxs(VStack, { gap: "1", children: [_jsx(Text, { textStyle: "label-sm", children: "Auto-scale" }), _jsx(Switch, { checked: autoScale.read(), onChange: ($, v) => $(autoScale.write(v)) })] }), _jsxs(VStack, { gap: "1", children: [_jsx(Text, { textStyle: "label-sm", children: "Region" }), _jsx(Select, { value: region.read(), items: [
+                                                    Select.Item("ap-southeast-2", "ap-southeast-2 (Sydney)"),
+                                                    Select.Item("us-east-1", "us-east-1 (N. Virginia)"),
+                                                    Select.Item("eu-west-1", "eu-west-1 (Ireland)"),
+                                                ], onChange: ($, v) => $(region.write(v)) })] }), _jsxs(VStack, { gap: "1", children: [_jsx(Text, { textStyle: "label-sm", children: "Deploy after" }), _jsx(Input.DateTime, { value: deployAfter.read(), precision: "datetime", onChange: ($, v) => $(deployAfter.write(v)) })] }), _jsx(Diff, { bindings: [svcName.binding, replicas.binding, autoScale.binding, region.binding, deployAfter.binding] })] }) }));
+                    } }), _jsx(Separator, { label: "PRICING RULES", align: "start" }), _jsx(Reactive, { children: $ => {
+                        const listPrice = $.let(Data.bind(listPriceInput, { mode: "staged" }));
+                        const discountPct = $.let(Data.bind(discountPctInput, { mode: "staged" }));
+                        const minOrderQty = $.let(Data.bind(minOrderQtyInput, { mode: "staged" }));
+                        const currency = $.let(Data.bind(currencyCodeInput, { mode: "staged" }));
+                        return (_jsx(Card, { children: _jsxs(VStack, { gap: "5", align: "stretch", children: [_jsx(Text, { textStyle: "heading-md", children: "Pricing rules" }), _jsx(Text, { children: "Stage pricing changes \u2014 review side-by-side before applying to the catalog." }), _jsxs(VStack, { gap: "1", children: [_jsx(Text, { textStyle: "label-sm", children: "List price" }), _jsx(Slider, { value: listPrice.read(), min: 0.0, max: 999.95, step: 0.05, onChangeEnd: ($, v) => $(listPrice.write(v)) })] }), _jsxs(VStack, { gap: "1", children: [_jsx(Text, { textStyle: "label-sm", children: "Discount (%)" }), _jsx(Slider, { value: discountPct.read(), min: 0.0, max: 75.0, step: 0.5, onChangeEnd: ($, v) => $(discountPct.write(v)) })] }), _jsxs(VStack, { gap: "1", children: [_jsx(Text, { textStyle: "label-sm", children: "Minimum order quantity" }), _jsx(Input.Integer, { value: minOrderQty.read(), min: 1n, max: 1000n, onChange: ($, v) => $(minOrderQty.write(v)) })] }), _jsxs(VStack, { gap: "1", children: [_jsx(Text, { textStyle: "label-sm", children: "Currency code" }), _jsx(Input.String, { value: currency.read(), placeholder: "AUD", onChange: ($, v) => $(currency.write(v)) })] }), _jsx(Diff, { bindings: [listPrice.binding, discountPct.binding, minOrderQty.binding, currency.binding], hideUnchanged: some(true) })] }) }));
+                    } }), _jsx(Separator, { label: "FEATURE FLAGS", align: "start" }), _jsx(Reactive, { children: $ => {
+                        const flags = $.let(Data.bind(featureFlagsInput, { mode: "staged" }));
+                        const flagsRead = $.let(flags.read(), SetType(StringType));
+                        // ONE East closure factory: `toggle(flag)` returns the per-switch
+                        // handler as a real East function value (captures `flag` in East).
+                        const toggle = $.const(East.function([StringType], FunctionType([BooleanType], NullType), (_$, flag) => East.function([BooleanType], NullType, ($, isOn) => {
+                            const next = $.let(flags.read(), SetType(StringType));
+                            $.if(isOn, $ => { $(next.insert(flag)); }).else($ => { $(next.delete(flag)); });
+                            $(flags.write(next));
+                        })));
+                        const onDarkMode = $.const(toggle("dark_mode"));
+                        const onExperiments = $.const(toggle("experiments"));
+                        const onNotifications = $.const(toggle("notifications"));
+                        const onAnalytics = $.const(toggle("analytics"));
+                        const onAiAssist = $.const(toggle("ai_assist"));
+                        return (_jsx(Card, { children: _jsxs(VStack, { gap: "4", align: "stretch", children: [_jsx(Text, { textStyle: "heading-md", children: "Feature flags" }), _jsx(Text, { children: "Toggle flags to stage changes; Diff card below shows the set delta." }), _jsxs(VStack, { gap: "3", justify: "space-between", children: [_jsx(Text, { textStyle: "label-sm", children: "dark_mode" }), _jsx(Switch, { checked: flagsRead.has("dark_mode"), onChange: onDarkMode })] }), _jsxs(VStack, { gap: "3", justify: "space-between", children: [_jsx(Text, { textStyle: "label-sm", children: "experiments" }), _jsx(Switch, { checked: flagsRead.has("experiments"), onChange: onExperiments })] }), _jsxs(VStack, { gap: "3", justify: "space-between", children: [_jsx(Text, { textStyle: "label-sm", children: "notifications" }), _jsx(Switch, { checked: flagsRead.has("notifications"), onChange: onNotifications })] }), _jsxs(VStack, { gap: "3", justify: "space-between", children: [_jsx(Text, { textStyle: "label-sm", children: "analytics" }), _jsx(Switch, { checked: flagsRead.has("analytics"), onChange: onAnalytics })] }), _jsxs(VStack, { gap: "3", justify: "space-between", children: [_jsx(Text, { textStyle: "label-sm", children: "ai_assist" }), _jsx(Switch, { checked: flagsRead.has("ai_assist"), onChange: onAiAssist })] }), _jsx(Diff, { bindings: [flags.binding], hideUnchanged: some(true) })] }) }));
+                    } }), _jsx(Separator, { label: "REGIONAL PRICING", align: "start" }), _jsx(Reactive, { children: $ => {
+                        const prices = $.let(Data.bind(regionalPricesInput, { mode: "staged" }));
+                        const pricesRead = $.let(prices.read(), DictType(StringType, FloatType));
+                        // ONE East closure factory: `setPrice(region)` returns the
+                        // per-region handler as a real East function value.
+                        const setPrice = $.const(East.function([StringType], FunctionType([FloatType], NullType), (_$, region) => East.function([FloatType], NullType, ($, newPrice) => {
+                            const next = $.let(prices.read(), DictType(StringType, FloatType));
+                            $(next.insertOrUpdate(region, newPrice));
+                            $(prices.write(next));
+                        })));
+                        const onAu = $.const(setPrice("AU"));
+                        const onUs = $.const(setPrice("US"));
+                        const onEu = $.const(setPrice("EU"));
+                        const onJp = $.const(setPrice("JP"));
+                        return (_jsx(Card, { children: _jsxs(VStack, { gap: "4", align: "stretch", children: [_jsx(Text, { textStyle: "heading-md", children: "Regional pricing" }), _jsx(Text, { children: "Edit per-region prices; Diff card below tracks pending updates." }), _jsxs(VStack, { gap: "3", justify: "space-between", children: [_jsx(Text, { textStyle: "label-sm", children: "AU" }), _jsx(Input.Float, { value: pricesRead.get("AU", East.function([StringType], FloatType, _$ => 0.0)), min: 0.0, max: 99999.0, step: 0.05, onChange: onAu })] }), _jsxs(VStack, { gap: "3", justify: "space-between", children: [_jsx(Text, { textStyle: "label-sm", children: "US" }), _jsx(Input.Float, { value: pricesRead.get("US", East.function([StringType], FloatType, _$ => 0.0)), min: 0.0, max: 99999.0, step: 0.05, onChange: onUs })] }), _jsxs(VStack, { gap: "3", justify: "space-between", children: [_jsx(Text, { textStyle: "label-sm", children: "EU" }), _jsx(Input.Float, { value: pricesRead.get("EU", East.function([StringType], FloatType, _$ => 0.0)), min: 0.0, max: 99999.0, step: 0.05, onChange: onEu })] }), _jsxs(VStack, { gap: "3", justify: "space-between", children: [_jsx(Text, { textStyle: "label-sm", children: "JP" }), _jsx(Input.Float, { value: pricesRead.get("JP", East.function([StringType], FloatType, _$ => 0.0)), min: 0.0, max: 99999.0, step: 0.05, onChange: onJp })] }), _jsx(Diff, { bindings: [prices.binding], hideUnchanged: some(true) })] }) }));
+                    } }), _jsx(Separator, { label: "DEPLOYMENT STATUS", align: "start" }), _jsx(Reactive, { children: $ => {
+                        const status = $.let(Data.bind(deploymentStatusInput, { mode: "staged" }));
+                        const statusRead = $.let(status.read(), DeploymentStatusType);
+                        const setPending = $.const(East.function([], NullType, $ => $(status.write(variant("pending", null)))));
+                        const setInProgress = $.const(East.function([], NullType, $ => $(status.write(variant("in_progress", null)))));
+                        const setComplete = $.const(East.function([], NullType, $ => $(status.write(variant("complete", null)))));
+                        const setFailed = $.const(East.function([], NullType, $ => $(status.write(variant("failed", null)))));
+                        return (_jsx(Card, { children: _jsxs(VStack, { gap: "4", align: "stretch", children: [_jsx(Text, { textStyle: "heading-md", children: "Deployment status" }), _jsx(Text, { children: "Current:" }), _jsx(Text, { textStyle: "label-md", children: statusRead.getTag() }), _jsxs(HStack, { gap: "2", children: [_jsx(Button, { onClick: setPending, children: "Pending" }), _jsx(Button, { onClick: setInProgress, children: "In progress" }), _jsx(Button, { onClick: setComplete, children: "Complete" }), _jsx(Button, { onClick: setFailed, children: "Failed" })] }), _jsx(Diff, { bindings: [status.binding], hideUnchanged: some(true) })] }) }));
+                    } }), _jsx(Separator, { label: "PRICING RULES COMPACT", align: "start" }), _jsx(Reactive, { children: $ => {
+                        const listPrice = $.let(Data.bind(listPriceInput, { mode: "staged" }));
+                        const discountPct = $.let(Data.bind(discountPctInput, { mode: "staged" }));
+                        const minOrderQty = $.let(Data.bind(minOrderQtyInput, { mode: "staged" }));
+                        const currency = $.let(Data.bind(currencyCodeInput, { mode: "staged" }));
+                        return (_jsx(Card, { children: _jsxs(VStack, { gap: "5", align: "stretch", children: [_jsx(Text, { textStyle: "heading-md", children: "Pricing rules \u2014 compact" }), _jsx(Slider, { value: listPrice.read(), min: 0.0, max: 999.95, step: 0.05, onChangeEnd: ($, v) => $(listPrice.write(v)) }), _jsx(Slider, { value: discountPct.read(), min: 0.0, max: 75.0, step: 0.5, onChangeEnd: ($, v) => $(discountPct.write(v)) }), _jsx(Input.Integer, { value: minOrderQty.read(), min: 1n, max: 1000n, onChange: ($, v) => $(minOrderQty.write(v)) }), _jsx(Input.String, { value: currency.read(), placeholder: "AUD", onChange: ($, v) => $(currency.write(v)) }), _jsx(Diff, { bindings: [listPrice.binding, discountPct.binding, minOrderQty.binding, currency.binding], density: "compact", hideUnchanged: some(true) })] }) }));
+                    } }), _jsx(Separator, { label: "PRICING RULES CONDENSED", align: "start" }), _jsx(Reactive, { children: $ => {
+                        const listPrice = $.let(Data.bind(listPriceInput, { mode: "staged" }));
+                        const discountPct = $.let(Data.bind(discountPctInput, { mode: "staged" }));
+                        const minOrderQty = $.let(Data.bind(minOrderQtyInput, { mode: "staged" }));
+                        const currency = $.let(Data.bind(currencyCodeInput, { mode: "staged" }));
+                        return (_jsx(Card, { children: _jsxs(VStack, { gap: "5", align: "stretch", children: [_jsx(Text, { textStyle: "heading-md", children: "Pricing rules \u2014 condensed" }), _jsx(Slider, { value: listPrice.read(), min: 0.0, max: 999.95, step: 0.05, onChangeEnd: ($, v) => $(listPrice.write(v)) }), _jsx(Slider, { value: discountPct.read(), min: 0.0, max: 75.0, step: 0.5, onChangeEnd: ($, v) => $(discountPct.write(v)) }), _jsx(Input.Integer, { value: minOrderQty.read(), min: 1n, max: 1000n, onChange: ($, v) => $(minOrderQty.write(v)) }), _jsx(Input.String, { value: currency.read(), placeholder: "AUD", onChange: ($, v) => $(currency.write(v)) }), _jsx(Diff, { bindings: [listPrice.binding, discountPct.binding, minOrderQty.binding, currency.binding], density: "condensed", hideUnchanged: some(true) })] }) }));
+                    } })] }));
     }),
     inputs: [],
 });
@@ -173,100 +235,7 @@ export const rosterTableEditor = example({
     inputs: [],
 });
 // ============================================================================
-// 4. Pricing-rules editor — sliders + integer/string inputs together;
-//    side-by-side Diff mode for a wider review surface.
-// ============================================================================
-export const pricingRulesEditor = example({
-    keywords: ["Diff", "side-by-side", "Slider", "Input", "pricing", "discount", "mixed"],
-    description: "Pricing rules editor — sliders for list price/discount, IntegerInput for min order qty, StringInput for currency; Diff in side-by-side mode",
-    fn: East.function([], UIComponentType, (_$) => {
-        return (_jsx(Reactive, { children: $ => {
-                const listPrice = $.let(Data.bind(listPriceInput, { mode: "staged" }));
-                const discountPct = $.let(Data.bind(discountPctInput, { mode: "staged" }));
-                const minOrderQty = $.let(Data.bind(minOrderQtyInput, { mode: "staged" }));
-                const currency = $.let(Data.bind(currencyCodeInput, { mode: "staged" }));
-                return (_jsx(Card, { children: _jsxs(VStack, { gap: "5", align: "stretch", children: [_jsx(Text, { textStyle: "heading-md", children: "Pricing rules" }), _jsx(Text, { children: "Stage pricing changes \u2014 review side-by-side before applying to the catalog." }), _jsxs(VStack, { gap: "1", children: [_jsx(Text, { textStyle: "label-sm", children: "List price" }), _jsx(Slider, { value: listPrice.read(), min: 0.0, max: 999.95, step: 0.05, onChangeEnd: ($, v) => $(listPrice.write(v)) })] }), _jsxs(VStack, { gap: "1", children: [_jsx(Text, { textStyle: "label-sm", children: "Discount (%)" }), _jsx(Slider, { value: discountPct.read(), min: 0.0, max: 75.0, step: 0.5, onChangeEnd: ($, v) => $(discountPct.write(v)) })] }), _jsxs(VStack, { gap: "1", children: [_jsx(Text, { textStyle: "label-sm", children: "Minimum order quantity" }), _jsx(Input.Integer, { value: minOrderQty.read(), min: 1n, max: 1000n, onChange: ($, v) => $(minOrderQty.write(v)) })] }), _jsxs(VStack, { gap: "1", children: [_jsx(Text, { textStyle: "label-sm", children: "Currency code" }), _jsx(Input.String, { value: currency.read(), placeholder: "AUD", onChange: ($, v) => $(currency.write(v)) })] }), _jsx(Diff, { bindings: [listPrice.binding, discountPct.binding, minOrderQty.binding, currency.binding], hideUnchanged: some(true) })] }) }));
-            } }));
-    }),
-    inputs: [],
-});
-// ============================================================================
-// 5. Feature flags editor — Set<String> binding; Switch per known flag.
-//    Demonstrates Set insert/delete patches in the Diff.
-// ============================================================================
-export const featureFlagsEditor = example({
-    keywords: ["Diff", "Set", "Switch", "feature flags", "bindStaged"],
-    description: "Feature-flags editor — Switch per known flag toggles inclusion in a staged Set; Diff shows insertions / deletions",
-    fn: East.function([], UIComponentType, (_$) => {
-        return (_jsx(Reactive, { children: $ => {
-                const flags = $.let(Data.bind(featureFlagsInput, { mode: "staged" }));
-                const flagsRead = $.let(flags.read(), SetType(StringType));
-                // ONE East closure factory: `toggle(flag)` returns the per-switch
-                // handler as a real East function value (captures `flag` in East).
-                const toggle = $.const(East.function([StringType], FunctionType([BooleanType], NullType), (_$, flag) => East.function([BooleanType], NullType, ($, isOn) => {
-                    const next = $.let(flags.read(), SetType(StringType));
-                    $.if(isOn, $ => { $(next.insert(flag)); }).else($ => { $(next.delete(flag)); });
-                    $(flags.write(next));
-                })));
-                const onDarkMode = $.const(toggle("dark_mode"));
-                const onExperiments = $.const(toggle("experiments"));
-                const onNotifications = $.const(toggle("notifications"));
-                const onAnalytics = $.const(toggle("analytics"));
-                const onAiAssist = $.const(toggle("ai_assist"));
-                return (_jsx(Card, { children: _jsxs(VStack, { gap: "4", align: "stretch", children: [_jsx(Text, { textStyle: "heading-md", children: "Feature flags" }), _jsx(Text, { children: "Toggle flags to stage changes; Diff card below shows the set delta." }), _jsxs(VStack, { gap: "3", justify: "space-between", children: [_jsx(Text, { textStyle: "label-sm", children: "dark_mode" }), _jsx(Switch, { checked: flagsRead.has("dark_mode"), onChange: onDarkMode })] }), _jsxs(VStack, { gap: "3", justify: "space-between", children: [_jsx(Text, { textStyle: "label-sm", children: "experiments" }), _jsx(Switch, { checked: flagsRead.has("experiments"), onChange: onExperiments })] }), _jsxs(VStack, { gap: "3", justify: "space-between", children: [_jsx(Text, { textStyle: "label-sm", children: "notifications" }), _jsx(Switch, { checked: flagsRead.has("notifications"), onChange: onNotifications })] }), _jsxs(VStack, { gap: "3", justify: "space-between", children: [_jsx(Text, { textStyle: "label-sm", children: "analytics" }), _jsx(Switch, { checked: flagsRead.has("analytics"), onChange: onAnalytics })] }), _jsxs(VStack, { gap: "3", justify: "space-between", children: [_jsx(Text, { textStyle: "label-sm", children: "ai_assist" }), _jsx(Switch, { checked: flagsRead.has("ai_assist"), onChange: onAiAssist })] }), _jsx(Diff, { bindings: [flags.binding], hideUnchanged: some(true) })] }) }));
-            } }));
-    }),
-    inputs: [],
-});
-// ============================================================================
-// 6. Regional pricing editor — Dict<String, Float>; Input per known key.
-//    Demonstrates Dict update patches per key in the Diff.
-// ============================================================================
-export const regionalPricingEditor = example({
-    keywords: ["Diff", "Dict", "Input", "regional pricing", "bindStaged"],
-    description: "Regional-pricing editor — Input.Float per region writes back to a staged Dict; Diff shows per-key updates",
-    fn: East.function([], UIComponentType, (_$) => {
-        return (_jsx(Reactive, { children: $ => {
-                const prices = $.let(Data.bind(regionalPricesInput, { mode: "staged" }));
-                const pricesRead = $.let(prices.read(), DictType(StringType, FloatType));
-                // ONE East closure factory: `setPrice(region)` returns the
-                // per-region handler as a real East function value.
-                const setPrice = $.const(East.function([StringType], FunctionType([FloatType], NullType), (_$, region) => East.function([FloatType], NullType, ($, newPrice) => {
-                    const next = $.let(prices.read(), DictType(StringType, FloatType));
-                    $(next.insertOrUpdate(region, newPrice));
-                    $(prices.write(next));
-                })));
-                const onAu = $.const(setPrice("AU"));
-                const onUs = $.const(setPrice("US"));
-                const onEu = $.const(setPrice("EU"));
-                const onJp = $.const(setPrice("JP"));
-                return (_jsx(Card, { children: _jsxs(VStack, { gap: "4", align: "stretch", children: [_jsx(Text, { textStyle: "heading-md", children: "Regional pricing" }), _jsx(Text, { children: "Edit per-region prices; Diff card below tracks pending updates." }), _jsxs(VStack, { gap: "3", justify: "space-between", children: [_jsx(Text, { textStyle: "label-sm", children: "AU" }), _jsx(Input.Float, { value: pricesRead.get("AU", East.function([StringType], FloatType, _$ => 0.0)), min: 0.0, max: 99999.0, step: 0.05, onChange: onAu })] }), _jsxs(VStack, { gap: "3", justify: "space-between", children: [_jsx(Text, { textStyle: "label-sm", children: "US" }), _jsx(Input.Float, { value: pricesRead.get("US", East.function([StringType], FloatType, _$ => 0.0)), min: 0.0, max: 99999.0, step: 0.05, onChange: onUs })] }), _jsxs(VStack, { gap: "3", justify: "space-between", children: [_jsx(Text, { textStyle: "label-sm", children: "EU" }), _jsx(Input.Float, { value: pricesRead.get("EU", East.function([StringType], FloatType, _$ => 0.0)), min: 0.0, max: 99999.0, step: 0.05, onChange: onEu })] }), _jsxs(VStack, { gap: "3", justify: "space-between", children: [_jsx(Text, { textStyle: "label-sm", children: "JP" }), _jsx(Input.Float, { value: pricesRead.get("JP", East.function([StringType], FloatType, _$ => 0.0)), min: 0.0, max: 99999.0, step: 0.05, onChange: onJp })] }), _jsx(Diff, { bindings: [prices.binding], hideUnchanged: some(true) })] }) }));
-            } }));
-    }),
-    inputs: [],
-});
-// ============================================================================
-// 7. Deployment status editor — Variant binding; one Button per status.
-//    Demonstrates Variant tag changes in the Diff.
-// ============================================================================
-export const deploymentStatusEditor = example({
-    keywords: ["Diff", "Variant", "Button", "deployment status", "bindStaged"],
-    description: "Deployment-status editor — buttons set a Variant binding; Diff shows the status tag change",
-    fn: East.function([], UIComponentType, (_$) => {
-        return (_jsx(Reactive, { children: $ => {
-                const status = $.let(Data.bind(deploymentStatusInput, { mode: "staged" }));
-                const statusRead = $.let(status.read(), DeploymentStatusType);
-                const setPending = $.const(East.function([], NullType, $ => $(status.write(variant("pending", null)))));
-                const setInProgress = $.const(East.function([], NullType, $ => $(status.write(variant("in_progress", null)))));
-                const setComplete = $.const(East.function([], NullType, $ => $(status.write(variant("complete", null)))));
-                const setFailed = $.const(East.function([], NullType, $ => $(status.write(variant("failed", null)))));
-                return (_jsx(Card, { children: _jsxs(VStack, { gap: "4", align: "stretch", children: [_jsx(Text, { textStyle: "heading-md", children: "Deployment status" }), _jsx(Text, { children: "Current:" }), _jsx(Text, { textStyle: "label-md", children: statusRead.getTag() }), _jsxs(HStack, { gap: "2", children: [_jsx(Button, { onClick: setPending, children: "Pending" }), _jsx(Button, { onClick: setInProgress, children: "In progress" }), _jsx(Button, { onClick: setComplete, children: "Complete" }), _jsx(Button, { onClick: setFailed, children: "Failed" })] }), _jsx(Diff, { bindings: [status.binding], hideUnchanged: some(true) })] }) }));
-            } }));
-    }),
-    inputs: [],
-});
-// ============================================================================
-// 8. Minimal call site — defaults only (used by IR-roundtrip + smoke tests)
+// 4. Minimal call site — defaults only (used by IR-roundtrip + smoke tests)
 // ============================================================================
 export const diffDefaults = example({
     keywords: ["Diff", "Root", "defaults", "minimal"],
@@ -318,50 +287,6 @@ export const mergeConflictDemo = example({
     inputs: [],
 });
 // ============================================================================
-// Density variants — same pricing-rules content rendered at the two
-// non-default density presets, so the showcase can compare side-by-side
-// against the default (`pricingRulesEditor` above).
-// ============================================================================
-/**
- * Pricing-rules editor at `compact` density — tighter row padding and smaller
- * type scale than the default `comfortable`. Suited to data-dense pages where
- * the Diff card is one of several panels competing for vertical space.
- */
-export const pricingRulesEditorCompact = example({
-    keywords: ["Diff", "density", "compact", "Slider", "Input", "pricing"],
-    description: "Pricing-rules editor with `density: \"compact\"` — same content as pricingRulesEditor, denser rows",
-    fn: East.function([], UIComponentType, (_$) => {
-        return (_jsx(Reactive, { children: $ => {
-                const listPrice = $.let(Data.bind(listPriceInput, { mode: "staged" }));
-                const discountPct = $.let(Data.bind(discountPctInput, { mode: "staged" }));
-                const minOrderQty = $.let(Data.bind(minOrderQtyInput, { mode: "staged" }));
-                const currency = $.let(Data.bind(currencyCodeInput, { mode: "staged" }));
-                return (_jsx(Card, { children: _jsxs(VStack, { gap: "5", align: "stretch", children: [_jsx(Text, { textStyle: "heading-md", children: "Pricing rules \u2014 compact" }), _jsx(Slider, { value: listPrice.read(), min: 0.0, max: 999.95, step: 0.05, onChangeEnd: ($, v) => $(listPrice.write(v)) }), _jsx(Slider, { value: discountPct.read(), min: 0.0, max: 75.0, step: 0.5, onChangeEnd: ($, v) => $(discountPct.write(v)) }), _jsx(Input.Integer, { value: minOrderQty.read(), min: 1n, max: 1000n, onChange: ($, v) => $(minOrderQty.write(v)) }), _jsx(Input.String, { value: currency.read(), placeholder: "AUD", onChange: ($, v) => $(currency.write(v)) }), _jsx(Diff, { bindings: [listPrice.binding, discountPct.binding, minOrderQty.binding, currency.binding], density: "compact", hideUnchanged: some(true) })] }) }));
-            } }));
-    }),
-    inputs: [],
-});
-/**
- * Pricing-rules editor at `condensed` density — mission-control sizing.
- * Tightest row padding and smallest type scale; pairs with status dashboards
- * and other read-heavy contexts where a diff list is reference data, not the
- * main interaction surface.
- */
-export const pricingRulesEditorCondensed = example({
-    keywords: ["Diff", "density", "condensed", "Slider", "Input", "pricing"],
-    description: "Pricing-rules editor with `density: \"condensed\"` — mission-control sizing for read-heavy views",
-    fn: East.function([], UIComponentType, (_$) => {
-        return (_jsx(Reactive, { children: $ => {
-                const listPrice = $.let(Data.bind(listPriceInput, { mode: "staged" }));
-                const discountPct = $.let(Data.bind(discountPctInput, { mode: "staged" }));
-                const minOrderQty = $.let(Data.bind(minOrderQtyInput, { mode: "staged" }));
-                const currency = $.let(Data.bind(currencyCodeInput, { mode: "staged" }));
-                return (_jsx(Card, { children: _jsxs(VStack, { gap: "5", align: "stretch", children: [_jsx(Text, { textStyle: "heading-md", children: "Pricing rules \u2014 condensed" }), _jsx(Slider, { value: listPrice.read(), min: 0.0, max: 999.95, step: 0.05, onChangeEnd: ($, v) => $(listPrice.write(v)) }), _jsx(Slider, { value: discountPct.read(), min: 0.0, max: 75.0, step: 0.5, onChangeEnd: ($, v) => $(discountPct.write(v)) }), _jsx(Input.Integer, { value: minOrderQty.read(), min: 1n, max: 1000n, onChange: ($, v) => $(minOrderQty.write(v)) }), _jsx(Input.String, { value: currency.read(), placeholder: "AUD", onChange: ($, v) => $(currency.write(v)) }), _jsx(Diff, { bindings: [listPrice.binding, discountPct.binding, minOrderQty.binding, currency.binding], density: "condensed", hideUnchanged: some(true) })] }) }));
-            } }));
-    }),
-    inputs: [],
-});
-// ============================================================================
 // Overlay-mode bindings — patches stored in a sibling `e3.input` typed
 // `PatchType(T)`. The Diff component surfaces them via the `overlay` option
 // instead of `staged`. See `Data.bindOverlay`.
@@ -372,9 +297,9 @@ export const regionalPricesPatchInput = e3.input("regional_prices_patch", PatchT
 export const rosterPatchInput = e3.input("roster_patch", PatchType(RosterArrayType), variant("unchanged", null));
 // Drift-laden patch input — defaults to a non-trivial patch whose ops are
 // stale relative to the source dict `{AU: 49.95, US: 39.95, EU: 44.95, JP:
-// 5499.0}`. Used by `regionalPricingOverlayDrift` to demonstrate what the
-// Diff card surfaces when a server-stored patch was authored against an
-// older version of its source. Conflicts (per `apply.ts` semantics):
+// 5499.0}`. Used by `diffOverlayVariants` (the REGIONAL PRICING OVERLAY
+// DRIFT row) to demonstrate what the Diff card surfaces when a server-stored
+// patch was authored against an older version of its source. Conflicts (per `apply.ts` semantics):
 //   - `delete "MX"`        — key not in source                 → stale delete
 //   - `insert "AU"`        — key already exists in source      → stale insert
 //   - `update "US"` with `replace(before=30 → 25)` — before mismatches source's 39.95
@@ -403,108 +328,75 @@ const rosterDriftEdited = [
 ];
 export const rosterDriftPatchInput = e3.input("roster_drift_patch", PatchType(RosterArrayType), diffFor(RosterArrayType)(rosterDriftBase, rosterDriftEdited));
 /**
- * Single-Float overlay editor — Slider edits go to `max_weekly_hours_patch`,
- * the Diff card surfaces the patch against the source.
- */
-export const policyOverlayEditor = example({
-    keywords: ["Diff", "bindOverlay", "Slider", "overlay", "policy", "patch"],
-    description: "Overlay-mode editor — Slider writes patches to a sibling e3.input; Diff shows them",
-    fn: East.function([], UIComponentType, (_$) => {
-        return (_jsx(Reactive, { children: $ => {
-                const view = $.let(Data.bind(maxWeeklyHoursInput, { mode: "direct", patch: maxWeeklyHoursPatchInput }));
-                return (_jsx(Card, { children: _jsxs(VStack, { gap: "5", align: "stretch", children: [_jsx(Text, { textStyle: "heading-md", children: "Max weekly hours (overlay)" }), _jsx(Slider, { value: view.read(), min: 30.0, max: 60.0, step: 1.0, onChangeEnd: ($, v) => $(view.write(v)) }), _jsx(Diff, { bindings: [view.binding], hideUnchanged: some(true) })] }) }));
-            } }));
-    }),
-    inputs: [],
-});
-/**
- * Overlay binding whose patch input *starts* with a non-trivial patch that
- * is stale relative to the source. Demonstrates what the Diff card displays
- * when a server-stored patch was authored against an older revision of its
- * source — stale delete, stale insert, stale replace.
- *
- * No form components: `view.read()` calls `apply(source, patch)`, which
- * throws `ConflictError` on the stale ops. The Diff card walks the patch IR
- * directly from cache bytes (no apply) so it renders cleanly. The
- * `bindOverlay` call is kept so the renderer's overlay-type registry knows
- * how to decode the patch bytes for this binding.
+ * Overlay-mode variant panel. POLICY OVERLAY: Slider edits go to
+ * `max_weekly_hours_patch`, the Diff card surfaces the patch against the
+ * source. REGIONAL PRICING OVERLAY DRIFT: the patch input *starts* with a
+ * non-trivial patch that is stale relative to the source — what the Diff card
+ * displays when a server-stored patch was authored against an older revision
+ * (stale delete, stale insert, stale replace); no form components, because
+ * `view.read()` calls `apply(source, patch)` which throws `ConflictError` on
+ * the stale ops, while the Diff card walks the patch IR directly from cache
+ * bytes (no apply) so it renders cleanly (the bind is kept so the renderer's
+ * overlay-type registry knows how to decode the patch bytes). ROSTER OVERLAY
+ * DRIFT: an array-of-structs patch exercising nested grouping (binding →
+ * `[index]` → struct field) — only `rate` of entries 0 and 1 change, so the
+ * card renders `ROSTER → [0] → rate`, `[1] → rate`. ROSTER TABLE OVERLAY:
+ * the roster table editor with patches stored in `roster_patch`, surviving
+ * page reload and visible to other workspace sessions.
  */
-export const regionalPricingOverlayDrift = example({
-    keywords: ["Diff", "bindOverlay", "Dict", "conflict", "drift", "patch"],
-    description: "Overlay-mode example with a stale patch — Diff card surfaces ops that don't match the source",
+export const diffOverlayVariants = example({
+    keywords: ["Diff", "bindOverlay", "Slider", "overlay", "policy", "patch", "Dict", "conflict", "drift", "roster", "array", "nested", "Table"],
+    description: "Overlay variant panel — POLICY OVERLAY: Slider writes patches to a sibling e3.input, Diff shows them; REGIONAL PRICING OVERLAY DRIFT: a stale patch — the Diff card surfaces ops that don't match the source; ROSTER OVERLAY DRIFT: an overlay roster patch — the Diff card surfaces nested array-element field changes; ROSTER TABLE OVERLAY: an editable table backed by a separate patch e3.input — patches persist across sessions",
     fn: East.function([], UIComponentType, (_$) => {
-        return (_jsx(Reactive, { children: $ => {
-                const view = $.let(Data.bind(regionalPricesInput, { mode: "direct", patch: regionalPricesDriftPatchInput }));
-                return (_jsx(Card, { children: _jsxs(VStack, { gap: "5", align: "stretch", children: [_jsx(Text, { textStyle: "heading-md", children: "Regional pricing \u2014 overlay with stale patch" }), _jsx(Text, { children: "The patch input was authored against an older source. The Diff card below "
-                                    + "shows: a stale delete (MX missing from source), a stale insert (AU already "
-                                    + "exists), a stale replace (US before=30 doesn't match current 39.95), and "
-                                    + "one clean replace (EU 44.95 → 39.95). Apply would throw ConflictError on "
-                                    + "the stale ops; this example exists to show what the Diff renderer surfaces "
-                                    + "when a server-stored patch has drifted from its source." }), _jsx(Diff, { bindings: [view.binding], hideUnchanged: some(true) })] }) }));
-            } }));
-    }),
-    inputs: [],
-});
-/**
- * Roster overlay drift — array-of-structs patch surfaced by the Diff card,
- * exercising nested grouping (binding → `[index]` → struct field). The patch
- * touches only `rate` on the first two entries, so the card renders
- * `ROSTER → [0] → rate`, `[1] → rate`.
- */
-export const rosterOverlayDrift = example({
-    keywords: ["Diff", "overlay", "roster", "array", "nested", "patch"],
-    description: "Overlay-mode roster patch — Diff card surfaces nested array-element field changes",
-    fn: East.function([], UIComponentType, (_$) => {
-        return (_jsx(Reactive, { children: $ => {
-                const view = $.let(Data.bind(rosterInput, { mode: "direct", patch: rosterDriftPatchInput }));
-                return (_jsx(Card, { children: _jsxs(VStack, { gap: "5", align: "stretch", children: [_jsx(Text, { textStyle: "heading-md", children: "Roster \u2014 overlay patch (nested)" }), _jsx(Text, { children: "The patch changes the hourly rate of the first two roster entries. The "
-                                    + "Diff card groups each change under its array index, demonstrating the "
-                                    + "binding → [index] → field nesting." }), _jsx(Diff, { bindings: [view.binding], hideUnchanged: some(true) })] }) }));
-            } }));
-    }),
-    inputs: [],
-});
-/**
- * Roster table editor in overlay mode — patches stored in `roster_patch`,
- * survive page reload and are visible to other workspace sessions.
- */
-export const rosterTableEditorOverlay = example({
-    keywords: ["Diff", "Table", "bindOverlay", "patch", "overlay", "roster"],
-    description: "Editable table backed by a separate patch e3.input — patches persist across sessions",
-    fn: East.function([], UIComponentType, (_$) => {
-        return (_jsx(Reactive, { children: $ => {
-                const view = $.let(Data.bind(rosterInput, { mode: "direct", patch: rosterPatchInput }));
-                const rosterArray = $.let(view.read(), RosterArrayType);
-                return (_jsx(Card, { children: _jsxs(VStack, { gap: "5", align: "stretch", children: [_jsx(Text, { textStyle: "heading-md", children: "Worker roster (overlay-mode)" }), _jsx(Text, { children: "Patches stored in a sibling dataset \u2014 survive reload, visible to other sessions." }), _jsx(Table, { data: rosterArray, columns: {
-                                    name: { header: "Name" },
-                                    rate: {
-                                        header: "Hourly rate ($)",
-                                        render: East.function([Table.Types.CellRenderContext], UIComponentType, ($, ctx) => {
-                                            const idx = $.let(ctx.rowIndex, IntegerType);
-                                            const row = $.let(rosterArray.get(idx), RosterEntryType);
-                                            const onRateChange = $.const(East.function([FloatType], NullType, ($, v) => {
-                                                const fresh = $.let(view.read(), RosterArrayType);
-                                                const next = $.let(fresh.map(($, r, i) => i.equal(idx).ifElse(_$ => ({ ...r, rate: v }), _$ => r)), RosterArrayType);
-                                                $(view.write(next));
-                                            }));
-                                            return (_jsx(Input.Float, { value: row.rate, min: 15.0, max: 80.0, step: 0.25, onChange: onRateChange }));
-                                        }),
-                                    },
-                                    shiftLength: {
-                                        header: "Shift length (h)",
-                                        render: East.function([Table.Types.CellRenderContext], UIComponentType, ($, ctx) => {
-                                            const idx = $.let(ctx.rowIndex, IntegerType);
-                                            const row = $.let(rosterArray.get(idx), RosterEntryType);
-                                            const onShiftChange = $.const(East.function([IntegerType], NullType, ($, v) => {
-                                                const fresh = $.let(view.read(), RosterArrayType);
-                                                const next = $.let(fresh.map(($, r, i) => i.equal(idx).ifElse(_$ => ({ ...r, shiftLength: v }), _$ => r)), RosterArrayType);
-                                                $(view.write(next));
-                                            }));
-                                            return (_jsx(Input.Integer, { value: row.shiftLength, min: 4n, max: 12n, onChange: onShiftChange }));
-                                        }),
-                                    },
-                                }, variant: "line", striped: true }), _jsx(Diff, { bindings: [view.binding], hideUnchanged: some(true) })] }) }));
-            } }));
+        return (_jsxs(VStack, { gap: "4", align: "stretch", children: [_jsx(Separator, { label: "POLICY OVERLAY", align: "start" }), _jsx(Reactive, { children: $ => {
+                        const view = $.let(Data.bind(maxWeeklyHoursInput, { mode: "direct", patch: maxWeeklyHoursPatchInput }));
+                        return (_jsx(Card, { children: _jsxs(VStack, { gap: "5", align: "stretch", children: [_jsx(Text, { textStyle: "heading-md", children: "Max weekly hours (overlay)" }), _jsx(Slider, { value: view.read(), min: 30.0, max: 60.0, step: 1.0, onChangeEnd: ($, v) => $(view.write(v)) }), _jsx(Diff, { bindings: [view.binding], hideUnchanged: some(true) })] }) }));
+                    } }), _jsx(Separator, { label: "REGIONAL PRICING OVERLAY DRIFT", align: "start" }), _jsx(Reactive, { children: $ => {
+                        const view = $.let(Data.bind(regionalPricesInput, { mode: "direct", patch: regionalPricesDriftPatchInput }));
+                        return (_jsx(Card, { children: _jsxs(VStack, { gap: "5", align: "stretch", children: [_jsx(Text, { textStyle: "heading-md", children: "Regional pricing \u2014 overlay with stale patch" }), _jsx(Text, { children: "The patch input was authored against an older source. The Diff card below "
+                                            + "shows: a stale delete (MX missing from source), a stale insert (AU already "
+                                            + "exists), a stale replace (US before=30 doesn't match current 39.95), and "
+                                            + "one clean replace (EU 44.95 → 39.95). Apply would throw ConflictError on "
+                                            + "the stale ops; this example exists to show what the Diff renderer surfaces "
+                                            + "when a server-stored patch has drifted from its source." }), _jsx(Diff, { bindings: [view.binding], hideUnchanged: some(true) })] }) }));
+                    } }), _jsx(Separator, { label: "ROSTER OVERLAY DRIFT", align: "start" }), _jsx(Reactive, { children: $ => {
+                        const view = $.let(Data.bind(rosterInput, { mode: "direct", patch: rosterDriftPatchInput }));
+                        return (_jsx(Card, { children: _jsxs(VStack, { gap: "5", align: "stretch", children: [_jsx(Text, { textStyle: "heading-md", children: "Roster \u2014 overlay patch (nested)" }), _jsx(Text, { children: "The patch changes the hourly rate of the first two roster entries. The "
+                                            + "Diff card groups each change under its array index, demonstrating the "
+                                            + "binding → [index] → field nesting." }), _jsx(Diff, { bindings: [view.binding], hideUnchanged: some(true) })] }) }));
+                    } }), _jsx(Separator, { label: "ROSTER TABLE OVERLAY", align: "start" }), _jsx(Reactive, { children: $ => {
+                        const view = $.let(Data.bind(rosterInput, { mode: "direct", patch: rosterPatchInput }));
+                        const rosterArray = $.let(view.read(), RosterArrayType);
+                        return (_jsx(Card, { children: _jsxs(VStack, { gap: "5", align: "stretch", children: [_jsx(Text, { textStyle: "heading-md", children: "Worker roster (overlay-mode)" }), _jsx(Text, { children: "Patches stored in a sibling dataset \u2014 survive reload, visible to other sessions." }), _jsx(Table, { data: rosterArray, columns: {
+                                            name: { header: "Name" },
+                                            rate: {
+                                                header: "Hourly rate ($)",
+                                                render: East.function([Table.Types.CellRenderContext], UIComponentType, ($, ctx) => {
+                                                    const idx = $.let(ctx.rowIndex, IntegerType);
+                                                    const row = $.let(rosterArray.get(idx), RosterEntryType);
+                                                    const onRateChange = $.const(East.function([FloatType], NullType, ($, v) => {
+                                                        const fresh = $.let(view.read(), RosterArrayType);
+                                                        const next = $.let(fresh.map(($, r, i) => i.equal(idx).ifElse(_$ => ({ ...r, rate: v }), _$ => r)), RosterArrayType);
+                                                        $(view.write(next));
+                                                    }));
+                                                    return (_jsx(Input.Float, { value: row.rate, min: 15.0, max: 80.0, step: 0.25, onChange: onRateChange }));
+                                                }),
+                                            },
+                                            shiftLength: {
+                                                header: "Shift length (h)",
+                                                render: East.function([Table.Types.CellRenderContext], UIComponentType, ($, ctx) => {
+                                                    const idx = $.let(ctx.rowIndex, IntegerType);
+                                                    const row = $.let(rosterArray.get(idx), RosterEntryType);
+                                                    const onShiftChange = $.const(East.function([IntegerType], NullType, ($, v) => {
+                                                        const fresh = $.let(view.read(), RosterArrayType);
+                                                        const next = $.let(fresh.map(($, r, i) => i.equal(idx).ifElse(_$ => ({ ...r, shiftLength: v }), _$ => r)), RosterArrayType);
+                                                        $(view.write(next));
+                                                    }));
+                                                    return (_jsx(Input.Integer, { value: row.shiftLength, min: 4n, max: 12n, onChange: onShiftChange }));
+                                                }),
+                                            },
+                                        }, variant: "line", striped: true }), _jsx(Diff, { bindings: [view.binding], hideUnchanged: some(true) })] }) }));
+                    } })] }));
     }),
     inputs: [],
 });
@@ -516,62 +408,53 @@ export const rosterTableEditorOverlay = example({
 // the unit of review.
 // ============================================================================
 /**
- * Single-Float staged-with-patch editor — buffered Slider edits publish to
- * `max_weekly_hours_patch` on Apply. The source `max_weekly_hours` stays
- * untouched until a separate apply-patch-to-source step.
- */
-export const policyStagedPatchEditor = example({
-    keywords: ["Diff", "Slider", "staged", "patch", "publish", "policy"],
-    description: "Slider edits buffered locally; Apply publishes draft to a server-backed patch dataset",
-    fn: East.function([], UIComponentType, (_$) => {
-        return (_jsx(Reactive, { children: $ => {
-                const view = $.let(Data.bind(maxWeeklyHoursInput, { mode: "staged", patch: maxWeeklyHoursPatchInput }));
-                return (_jsx(Card, { children: _jsxs(VStack, { gap: "5", align: "stretch", children: [_jsx(Text, { textStyle: "heading-md", children: "Max weekly hours (staged + patch)" }), _jsx(Text, { children: "Drag to buffer locally; Apply publishes the draft as a patch to the patch dataset (source untouched)." }), _jsx(Slider, { value: view.read(), min: 30.0, max: 60.0, step: 1.0, onChange: ($, v) => $(view.write(v)) }), _jsx(Diff, { bindings: [view.binding], hideUnchanged: some(true) })] }) }));
-            } }));
-    }),
-    inputs: [],
-});
-/**
- * Roster table editor in staged + patch mode. Cell edits buffer in
- * IndexedDB until Apply, which publishes a fresh patch to `roster_patch`.
- * Survives reload as a draft; multi-session reviewers see the patch only
+ * Staged + patch variant panel. POLICY STAGED PATCH: single-Float
+ * staged-with-patch editor — buffered Slider edits publish to
+ * `max_weekly_hours_patch` on Apply; the source `max_weekly_hours` stays
+ * untouched until a separate apply-patch-to-source step. ROSTER STAGED
+ * PATCH: the roster table editor in staged + patch mode — cell edits buffer
+ * in IndexedDB until Apply, which publishes a fresh patch to `roster_patch`;
+ * survives reload as a draft, and multi-session reviewers see the patch only
  * after the author commits.
  */
-export const rosterStagedPatchEditor = example({
-    keywords: ["Diff", "Table", "staged", "patch", "publish", "roster"],
-    description: "Editable roster — edits buffered locally; Apply publishes a fresh patch to a server-backed patch dataset",
+export const diffStagedPatchVariants = example({
+    keywords: ["Diff", "Slider", "staged", "patch", "publish", "policy", "Table", "roster"],
+    description: "Staged + patch variant panel — POLICY STAGED PATCH: Slider edits buffered locally, Apply publishes the draft to a server-backed patch dataset; ROSTER STAGED PATCH: an editable roster whose buffered cell edits publish a fresh patch to the patch dataset on Apply",
     fn: East.function([], UIComponentType, (_$) => {
-        return (_jsx(Reactive, { children: $ => {
-                const view = $.let(Data.bind(rosterInput, { mode: "staged", patch: rosterPatchInput }));
-                const rosterArray = $.let(view.read(), RosterArrayType);
-                return (_jsx(Card, { children: _jsxs(VStack, { gap: "5", align: "stretch", children: [_jsx(Text, { textStyle: "heading-md", children: "Worker roster (staged + patch)" }), _jsx(Text, { children: "Edits buffer locally until Apply, which publishes a draft patch to the patch dataset for review." }), _jsx(Table, { data: rosterArray, columns: {
-                                    name: { header: "Name" },
-                                    rate: {
-                                        header: "Hourly rate ($)",
-                                        render: East.function([Table.Types.CellRenderContext], UIComponentType, ($, ctx) => {
-                                            const idx = $.let(ctx.rowIndex, IntegerType);
-                                            const row = $.let(rosterArray.get(idx), RosterEntryType);
-                                            const onRateChange = $.const(East.function([FloatType], NullType, ($, v) => {
-                                                const fresh = $.let(view.read(), RosterArrayType);
-                                                $(view.write(fresh.map(($, r, i) => i.equal(idx).ifElse(_$ => ({ ...r, rate: v }), () => r))));
-                                            }));
-                                            return (_jsx(Input.Float, { value: row.rate, min: 15.0, max: 80.0, step: 0.25, onChange: onRateChange }));
-                                        }),
-                                    },
-                                    shiftLength: {
-                                        header: "Shift length (h)",
-                                        render: East.function([Table.Types.CellRenderContext], UIComponentType, ($, ctx) => {
-                                            const idx = $.let(ctx.rowIndex, IntegerType);
-                                            const row = $.let(rosterArray.get(idx), RosterEntryType);
-                                            const onShiftChange = $.const(East.function([IntegerType], NullType, ($, v) => {
-                                                const fresh = $.let(view.read(), RosterArrayType);
-                                                $(view.write(fresh.map(($, r, i) => i.equal(idx).ifElse(_$ => ({ ...r, shiftLength: v }), () => r))));
-                                            }));
-                                            return (_jsx(Input.Integer, { value: row.shiftLength, min: 4n, max: 12n, onChange: onShiftChange }));
-                                        }),
-                                    },
-                                }, variant: "line", striped: true }), _jsx(Diff, { bindings: [view.binding], hideUnchanged: some(true) })] }) }));
-            } }));
+        return (_jsxs(VStack, { gap: "4", align: "stretch", children: [_jsx(Separator, { label: "POLICY STAGED PATCH", align: "start" }), _jsx(Reactive, { children: $ => {
+                        const view = $.let(Data.bind(maxWeeklyHoursInput, { mode: "staged", patch: maxWeeklyHoursPatchInput }));
+                        return (_jsx(Card, { children: _jsxs(VStack, { gap: "5", align: "stretch", children: [_jsx(Text, { textStyle: "heading-md", children: "Max weekly hours (staged + patch)" }), _jsx(Text, { children: "Drag to buffer locally; Apply publishes the draft as a patch to the patch dataset (source untouched)." }), _jsx(Slider, { value: view.read(), min: 30.0, max: 60.0, step: 1.0, onChange: ($, v) => $(view.write(v)) }), _jsx(Diff, { bindings: [view.binding], hideUnchanged: some(true) })] }) }));
+                    } }), _jsx(Separator, { label: "ROSTER STAGED PATCH", align: "start" }), _jsx(Reactive, { children: $ => {
+                        const view = $.let(Data.bind(rosterInput, { mode: "staged", patch: rosterPatchInput }));
+                        const rosterArray = $.let(view.read(), RosterArrayType);
+                        return (_jsx(Card, { children: _jsxs(VStack, { gap: "5", align: "stretch", children: [_jsx(Text, { textStyle: "heading-md", children: "Worker roster (staged + patch)" }), _jsx(Text, { children: "Edits buffer locally until Apply, which publishes a draft patch to the patch dataset for review." }), _jsx(Table, { data: rosterArray, columns: {
+                                            name: { header: "Name" },
+                                            rate: {
+                                                header: "Hourly rate ($)",
+                                                render: East.function([Table.Types.CellRenderContext], UIComponentType, ($, ctx) => {
+                                                    const idx = $.let(ctx.rowIndex, IntegerType);
+                                                    const row = $.let(rosterArray.get(idx), RosterEntryType);
+                                                    const onRateChange = $.const(East.function([FloatType], NullType, ($, v) => {
+                                                        const fresh = $.let(view.read(), RosterArrayType);
+                                                        $(view.write(fresh.map(($, r, i) => i.equal(idx).ifElse(_$ => ({ ...r, rate: v }), () => r))));
+                                                    }));
+                                                    return (_jsx(Input.Float, { value: row.rate, min: 15.0, max: 80.0, step: 0.25, onChange: onRateChange }));
+                                                }),
+                                            },
+                                            shiftLength: {
+                                                header: "Shift length (h)",
+                                                render: East.function([Table.Types.CellRenderContext], UIComponentType, ($, ctx) => {
+                                                    const idx = $.let(ctx.rowIndex, IntegerType);
+                                                    const row = $.let(rosterArray.get(idx), RosterEntryType);
+                                                    const onShiftChange = $.const(East.function([IntegerType], NullType, ($, v) => {
+                                                        const fresh = $.let(view.read(), RosterArrayType);
+                                                        $(view.write(fresh.map(($, r, i) => i.equal(idx).ifElse(_$ => ({ ...r, shiftLength: v }), () => r))));
+                                                    }));
+                                                    return (_jsx(Input.Integer, { value: row.shiftLength, min: 4n, max: 12n, onChange: onShiftChange }));
+                                                }),
+                                            },
+                                        }, variant: "line", striped: true }), _jsx(Diff, { bindings: [view.binding], hideUnchanged: some(true) })] }) }));
+                    } })] }));
     }),
     inputs: [],
 });