@gramlot/gramlot-examples 0.2.2

package/src/gramlot_examples/pages/binding/03_setters_and_defaults.js

@@ -0,0 +1,42 @@
+import {Page as BasePage} from '@gramlot/gramlot/page';
+
+export class Page extends BasePage {
+    static title = 'Setters and defaults';
+    static css = ['/themes/gramlot-base/theme.css'];
+
+    main(root) {
+        const pane = root.div({class: 'example-page stack', datapath: 'order'});
+        pane.h1('Setters and defaults');
+        pane.p('Every value below was in the Data before the first render.', {class: 'muted'});
+
+        const form = pane.form({class: 'card stack'});
+        form.html_label('Customer', {for: 'customer'});
+        form.input({value: '^.customer', id: 'customer'});
+        form.html_label('Quantity (default 1)', {for: 'quantity'});
+        form.input({type: 'number', value: '^.quantity', default: 1, id: 'quantity'});
+        form.html_label('Note (default_value wins over default)', {for: 'note'});
+        form.input({value: '^.note', default_value: 'No note', default: 'Never used', id: 'note'});
+        form.html_label('Price', {for: 'price'});
+        form.input({type: 'number', value: '^.price', attr_currency: 'EUR', id: 'price'});
+
+        const summary = pane.section({class: 'card stack'});
+        summary.h2('The Data');
+        const facts = summary.dl();
+        for (const [label, pointer, key] of [['Customer', '^.customer', 'out-customer'],
+            ['Quantity', '^.quantity', 'out-quantity'],
+            ['Note', '^.note', 'out-note'],
+            ['Price', '^.price', 'out-price'],
+            ['Currency (price?currency)', '^.price?currency', 'out-currency'],
+            ['Shipping city', '^.shipping.city', 'out-city']]) {
+            facts.dt(label);
+            facts.dd(pointer, {id: key});
+        }
+
+        pane.dataSetter({destination_path: '.customer', value: 'Ada Lovelace'});
+        pane.dataSetter({destination_path: '.price', value: 12.5});
+        const later = pane.section({class: 'muted'});
+        later.p('This section holds the second setters: a descendant writes after its ancestors.');
+        later.dataSetter({destination_path: '.customer', value: 'Grace Hopper'});
+        later.dataSetter({destination_path: '.shipping', value: {city: 'London', zone: 'EU'}});
+    }
+}

package/src/gramlot_examples/pages/binding/03_setters_and_defaults.md

@@ -0,0 +1,10 @@
+# 03 · Setters and defaults
+
+`dataSetter` writes a value in the Data. All the setters of a branch run before its first render, wherever they sit: here they come after the form and in a later section, yet the first DOM already shows their values.
+
+- Setters run parents before descendants, in document order. Two setters write `.customer`; the one in the later section runs last, so the customer is Grace Hopper.
+- A dictionary (Python) or a plain object (JavaScript) becomes a Bag: `.shipping.city` reads inside it.
+- A control fills an empty value path with its `default`. `default_value` wins over `default`. Only a null or missing value is empty: `0`, `false` and `''` are values.
+- `attr_currency='EUR'` sets the attribute `currency` on the Data node of the control's value, after the defaults. `^.price?currency` reads it.
+
+**Try it:** Remove the setter in the later section: the customer becomes Ada Lovelace. Add a setter of `.quantity` with `0`: the default no longer applies.

package/src/gramlot_examples/pages/binding/04_native_editing.js

@@ -0,0 +1,53 @@
+import {Page as BasePage} from '@gramlot/gramlot/page';
+
+const FIELDS = [['Text', 'text', 'text'], ['Number', 'number', 'number'], ['Range', 'range', 'range'],
+    ['Date', 'date', 'date'], ['Color', 'color', 'color']];
+
+export class Page extends BasePage {
+    static title = 'Native editing';
+    static css = ['/themes/gramlot-base/theme.css'];
+
+    main(root) {
+        const pane = root.div({class: 'example-page stack', datapath: 'edit'});
+        pane.h1('Native editing');
+        pane.html_label('Write at every keystroke (live)', {for: 'live'});
+        pane.input({type: 'checkbox', value: '^.live', id: 'live'});
+
+        const grid = pane.div({class: 'grid'});
+        const form = grid.form({class: 'card stack'});
+        for (const [label, key, kind] of FIELDS) {
+            form.html_label(label, {for: key});
+            form.input({type: kind, value: `^.${key}`, live: '^.live', id: key});
+        }
+        form.html_label('Note', {for: 'note'});
+        form.textarea({value: '^.note', live: '^.live', rows: 3, id: 'note'});
+        form.html_label('Size', {for: 'size'});
+        const size = form.select({value: '^.size', id: 'size'});
+        for (const option of ['S', 'M', 'L']) size.option(option, {value: option});
+        form.html_label('Topics', {for: 'topics'});
+        const topics = form.select({value: '^.topics', multiple: true, size: 3, id: 'topics'});
+        for (const option of ['HTML', 'SVG', 'Data']) topics.option(option, {value: option.toLowerCase()});
+
+        const values = grid.section({class: 'card stack'});
+        values.h2('The Data');
+        const facts = values.dl();
+        for (const [label, key] of FIELDS) {
+            facts.dt(label);
+            facts.dd(`^.${key}`, {id: `out-${key}`});
+        }
+        for (const [label, key] of [['Note', 'note'], ['Size', 'size'], ['Topics', 'topics']]) {
+            facts.dt(label);
+            facts.dd(`^.${key}`, {id: `out-${key}`});
+        }
+
+        pane.dataSetter({destination_path: '.live', value: false});
+        pane.dataSetter({destination_path: '.text', value: 'Edit me'});
+        pane.dataSetter({destination_path: '.number', value: 42});
+        pane.dataSetter({destination_path: '.range', value: 30});
+        pane.dataSetter({destination_path: '.date', value: '2026-09-30'});
+        pane.dataSetter({destination_path: '.color', value: '#456bc4'});
+        pane.dataSetter({destination_path: '.note', value: 'Two\nlines'});
+        pane.dataSetter({destination_path: '.size', value: 'M'});
+        pane.dataSetter({destination_path: '.topics', value: ['html', 'data']});
+    }
+}

package/src/gramlot_examples/pages/binding/04_native_editing.md

@@ -0,0 +1,11 @@
+# 04 · Native editing
+
+A control whose `value` is a `^` pointer shows the Data and writes it back when you edit.
+
+- Text and textarea write a string; number and range write a number, or null when the field is empty; date writes its text such as `2026-09-30`; color writes the color string.
+- A single select writes the chosen value; a multiple select writes a list.
+- With `live` false a field writes at `change`, when you leave it or press Enter. With `live` true text, textarea, number and range write at every `input`. Here `live='^.live'` follows the checkbox, without rebuilding the fields.
+
+The list on the right reads the same Data paths.
+
+**Try it:** Type in the text field with the checkbox off, then on, and compare when the list changes.

package/src/gramlot_examples/pages/binding/05_checkbox_radio.js

@@ -0,0 +1,41 @@
+import {Page as BasePage} from '@gramlot/gramlot/page';
+
+const PLANS = [['basic', 'Basic'], ['plus', 'Plus'], ['team', 'Team']];
+
+export class Page extends BasePage {
+    static title = 'Checkbox and radio';
+    static css = ['/themes/gramlot-base/theme.css'];
+
+    main(root) {
+        const pane = root.div({class: 'example-page stack', datapath: 'choice'});
+        pane.h1('Checkbox and radio');
+
+        const options = pane.fieldset({class: 'card stack'});
+        options.legend('Options');
+        for (const [key, label] of [['newsletter', 'Newsletter'], ['invoice', 'Paper invoice']]) {
+            const row = options.div();
+            row.input({type: 'checkbox', value: `^.${key}`, id: key});
+            row.html_label(label, {for: key});
+        }
+
+        const plans = pane.fieldset({class: 'card stack'});
+        plans.legend('Plan');
+        for (const [key, label] of PLANS) {
+            const row = plans.div();
+            row.input({type: 'radio', group: 'plan', value: `^.plan.${key}`, id: key});
+            row.html_label(label, {for: key});
+        }
+
+        const values = pane.section({class: 'card stack'});
+        values.h2('The Data');
+        const facts = values.dl();
+        for (const key of ['newsletter', 'invoice', 'plan.basic', 'plan.plus', 'plan.team']) {
+            facts.dt(key);
+            facts.dd(`^.${key}`, {id: `out-${key.replace('.', '-')}`});
+        }
+
+        pane.dataSetter({destination_path: '.newsletter', value: true});
+        pane.dataSetter({destination_path: '.invoice', value: false});
+        pane.dataSetter({destination_path: '.plan.plus', value: true});
+    }
+}

package/src/gramlot_examples/pages/binding/05_checkbox_radio.md

@@ -0,0 +1,9 @@
+# 05 · Checkbox and radio
+
+A checkbox bound with `value='^path'` reads a boolean and writes `true` or `false`, never the text `on`.
+
+Radio buttons with the same `group` form one choice. Each button owns its own boolean path. Choosing one writes `true` in its path and `false` in the path of the button that was on. Gramlot generates the DOM `name` of the group, so two pages or two groups never mix.
+
+Only `plan.plus` has a setter. `plan.basic` and `plan.team` start empty; a button that is already off is not written, so an empty path stays empty until its button is chosen once.
+
+**Try it:** Choose Team, then Basic, and watch which Data values change; then add a fourth plan.

package/src/gramlot_examples/pages/binding/06_style_and_visibility.js

@@ -0,0 +1,51 @@
+import {Page as BasePage} from '@gramlot/gramlot/page';
+
+const CHOICES = [
+    ['Class', 'tone', ['card', 'card status status--success', 'card status status--warning']],
+    ['Font size', 'size', ['1rem', '1.5rem', '2rem']],
+    ['Corners (rounded)', 'radius', ['0', '8px', '24px']],
+];
+
+export class Page extends BasePage {
+    static title = 'Style and visibility';
+    static css = ['/themes/gramlot-base/theme.css'];
+
+    main(root) {
+        const pane = root.div({class: 'example-page stack', datapath: 'look'});
+        pane.h1('Style and visibility');
+
+        const controls = pane.form({class: 'card stack'});
+        for (const [label, key] of [['visible', 'show'], ['hidden', 'hide']]) {
+            const row = controls.div();
+            row.input({type: 'checkbox', value: `^.${key}`, id: key});
+            row.html_label(label, {for: key});
+        }
+        for (const [label, key] of [['Text color', 'color'], ['Background color', 'background']]) {
+            controls.html_label(label, {for: key});
+            controls.input({type: 'color', value: `^.${key}`, id: key});
+        }
+        for (const [label, key, options] of CHOICES) {
+            controls.html_label(label, {for: key});
+            const select = controls.select({value: `^.${key}`, id: key});
+            for (const option of options) select.option(option, {value: option});
+        }
+        controls.html_label('style', {for: 'style'});
+        controls.input({value: '^.style', id: 'style'});
+
+        const stage = pane.div({class: 'stack'});
+        stage.p('The box keeps its place when it is not visible.', {class: 'muted'});
+        stage.div('A styled box', {id: 'box', class: '^.tone', style: '^.style',
+            color: '^.color', background_color: '^.background', font_size: '^.size',
+            rounded: '^.radius', padding: '1rem', visible: '^.show', hidden: '^.hide'});
+        stage.p('This line follows the box.', {class: 'muted'});
+
+        pane.dataSetter({destination_path: '.show', value: true});
+        pane.dataSetter({destination_path: '.hide', value: false});
+        pane.dataSetter({destination_path: '.color', value: '#ffffff'});
+        pane.dataSetter({destination_path: '.background', value: '#456bc4'});
+        pane.dataSetter({destination_path: '.tone', value: 'card'});
+        pane.dataSetter({destination_path: '.size', value: '1.5rem'});
+        pane.dataSetter({destination_path: '.radius', value: '8px'});
+        pane.dataSetter({destination_path: '.style', value: 'border: 4px dashed #ffc400'});
+    }
+}

package/src/gramlot_examples/pages/binding/06_style_and_visibility.md

@@ -0,0 +1,11 @@
+# 06 · Style and visibility
+
+Every attribute of the box is a `^` pointer, so the controls restyle it through the Data.
+
+- `class` and `style` take a string, or null to remove the attribute.
+- The style shortcuts `color`, `background_color`, `font_size`, `padding` and the macro `rounded` compose one `style` attribute with `style` itself. A shortcut wins over the same property written in `style`; a null shortcut drops only its own property.
+- `visible` false sets `visibility: hidden`: the box disappears and keeps its space. `hidden` is the native attribute: the box leaves the layout.
+
+Values need their CSS unit: `font_size='1.5rem'`, not `1.5`.
+
+**Try it:** Write `color: red` in the style field: the shortcut `color` still wins. Then clear the visible checkbox, and afterwards check hidden.

package/src/gramlot_examples/pages/binding/07_bound_svg.js

@@ -0,0 +1,33 @@
+import {Page as BasePage} from '@gramlot/gramlot/page';
+
+export class Page extends BasePage {
+    static title = 'Bound SVG';
+    static css = ['/themes/gramlot-base/theme.css'];
+
+    main(root) {
+        const pane = root.div({class: 'example-page stack', datapath: 'drawing'});
+        pane.h1('Bound SVG');
+
+        const controls = pane.form({class: 'card stack'});
+        controls.html_label('Radius', {for: 'radius'});
+        controls.input({type: 'range', min: 5, max: 80, value: '^.radius', live: true, id: 'radius'});
+        controls.html_label('Circle fill', {for: 'fill'});
+        controls.input({type: 'color', value: '^.fill', id: 'fill'});
+        controls.html_label('Bar width', {for: 'width'});
+        controls.input({type: 'range', min: 10, max: 260, value: '^.width', live: true, id: 'width'});
+        controls.html_label('Bar fill', {for: 'bar'});
+        controls.input({type: 'color', value: '^.bar', id: 'bar'});
+
+        const figure = pane.figure({class: 'card'});
+        const art = figure.svg({viewBox: '0 0 480 200', role: 'img', aria_label: 'A circle and a bar', class: 'example-art'});
+        art.circle({cx: 100, cy: 100, r: '^.radius', fill: '^.fill', id: 'circle'});
+        art.rect({x: 200, y: 80, height: 40, rx: 6, width: '^.width', fill: '^.bar', id: 'bar-shape'});
+        art.text('^.radius', {x: 100, y: 190, text_anchor: 'middle', fill: 'currentColor', id: 'radius-label'});
+        figure.figcaption('The circle and the bar read their geometry and paint from the Data.');
+
+        pane.dataSetter({destination_path: '.radius', value: 40});
+        pane.dataSetter({destination_path: '.fill', value: '#ffc400'});
+        pane.dataSetter({destination_path: '.width', value: 160});
+        pane.dataSetter({destination_path: '.bar', value: '#456bc4'});
+    }
+}

package/src/gramlot_examples/pages/binding/07_bound_svg.md

@@ -0,0 +1,7 @@
+# 07 · Bound SVG
+
+SVG attributes take `^` pointers as HTML attributes do. The circle's `r` and `fill`, the bar's `width` and `fill`, and the label text read Data paths edited by the controls.
+
+The ranges have `live` true, so the drawing follows the slider while you drag it. SVG has no style shortcuts: `fill` and `stroke` are SVG presentation attributes.
+
+**Try it:** Bind the circle's `cy` to a third range.

package/src/gramlot_examples/pages/binding/08_freeze.css

@@ -0,0 +1 @@
+.actions { display: flex; flex-wrap: wrap; gap: .5rem; }

package/src/gramlot_examples/pages/binding/08_freeze.js

@@ -0,0 +1,26 @@
+import {Page as BasePage} from '@gramlot/gramlot/page';
+
+export class Page extends BasePage {
+    static title = 'Freeze';
+    static css = ['/themes/gramlot-base/theme.css'];
+
+    main(root) {
+        const pane = root.div({class: 'example-page stack', datapath: 'board'});
+        pane.h1('Freeze');
+        const actions = pane.div({class: 'actions'});
+        for (const [label, method] of [['Freeze', 'freeze'], ['Add one', 'add'],
+            ['Remove last item', 'removeLast'], ['Thaw', 'thaw']]) {
+            actions.button(label, {id: method}).dataController({func: method});
+        }
+        pane.p('^.frozen', {id: 'frozen', class: 'muted'});
+
+        const board = pane.section({node_id: 'board', class: 'card stack'});
+        board.h2('A branch that can be frozen');
+        board.p('^.count', {id: 'count'});
+        const items = board.ul({node_id: 'items', id: 'items'});
+        for (const number of [1, 2, 3]) items.li(`Item ${number}`);
+
+        pane.dataSetter({destination_path: '.count', value: 0});
+        pane.dataSetter({destination_path: '.frozen', value: false});
+    }
+}

package/src/gramlot_examples/pages/binding/08_freeze.md

@@ -0,0 +1,11 @@
+# 08 · Freeze
+
+`renderer.freeze(node)` suspends the DOM work of a branch; `renderer.unfreeze(node)` resumes it and builds the current Source of the branch once.
+
+The four buttons call methods of the companion `08_freeze_aux.js`, through a `dataController` nested in each button.
+
+- While the board is frozen, **Add one** still changes the counter: the elements already built keep following the Data.
+- **Remove last item** removes a Source node at once, but its `<li>` stays on screen until the thaw.
+- **Thaw** builds the branch once, with every removal applied.
+
+**Try it:** Freeze, remove two items, add one, then thaw.

package/src/gramlot_examples/pages/binding/08_freeze_aux.js

@@ -0,0 +1,26 @@
+/** Logic of 08_freeze.py and 08_freeze.js: each button's nested controller calls one method. */
+export class Logic {
+    sourceNode(nodeId) {
+        return this.page.source.getNodeByAttr('node_id', nodeId);
+    }
+
+    freeze(node) {
+        this.page.renderer.freeze(this.sourceNode('board'));
+        node.SET('.frozen', true);
+    }
+
+    add(node) {
+        node.SET('.count', node.GET('.count') + 1);
+    }
+
+    removeLast() {
+        const items = this.sourceNode('items').value;
+        const last = items.getNodes().at(-1);
+        if (last) items.popNode(last.label);
+    }
+
+    thaw(node) {
+        this.page.renderer.unfreeze(this.sourceNode('board'));
+        node.SET('.frozen', false);
+    }
+}

package/src/gramlot_examples/pages/binding/09_forms.css

@@ -0,0 +1,8 @@
+.form-grid, .form-options { display: grid; grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr); gap: .7rem 1.2rem; align-items: center; margin: 1.3rem 0; }
+.form-grid legend, .form-options legend { font-weight: 700; padding: 0 .45rem; }
+.form-grid input, .form-grid select, .form-grid textarea, .form-options input:not([type='checkbox']):not([type='radio']) { max-width: 28rem; }
+.form-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
+@media (max-width: 38rem) { .form-grid, .form-options { grid-template-columns: 1fr; } }
+.bound-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(12rem, 1fr); gap: 1.5rem; align-items: start; }
+.bound-form dd { overflow-wrap: anywhere; }
+@media (max-width: 52rem) { .bound-form { grid-template-columns: 1fr; } }

package/src/gramlot_examples/pages/binding/09_forms.js

@@ -0,0 +1,79 @@
+import {Page as BasePage} from '@gramlot/gramlot/page';
+
+const RECORD = {name: 'Ada Lovelace', quantity: 3, accent: '#456bc4', intensity: 60,
+    region: 'south', topics: ['html'], note: 'A native multiline field.', updates: true};
+const SHOWN = ['name', 'email', 'search', 'website', 'telephone', 'quantity', 'date', 'time', 'month',
+    'week', 'accent', 'intensity', 'region', 'topics', 'note', 'updates'];
+
+export class Page extends BasePage {
+    static title = 'Forms with binding';
+    static css = ['/themes/gramlot-base/theme.css'];
+
+    main(root) {
+        const pane = root.div({class: 'example-page stack', datapath: 'form'});
+        pane.h1('Native form controls, bound');
+        pane.p('The same fields as HTML / SVG example 06. Every value lives in the Data record on the right.');
+        const layout = pane.div({class: 'bound-form'});
+        const form = layout.form();
+        const identity = form.fieldset({class: 'form-grid'});
+        identity.legend('Identity');
+        this.field(identity, 'Name', 'name', 'text', {required: true});
+        this.field(identity, 'Email', 'email', 'email', {placeholder: 'name@example.org'});
+        this.field(identity, 'Search', 'search', 'search', {placeholder: 'Find a topic'});
+        this.field(identity, 'Website', 'website', 'url', {placeholder: 'https://example.org'});
+        this.field(identity, 'Telephone', 'telephone', 'tel', {placeholder: '+1 555 0100'});
+        this.field(identity, 'Password', 'password', 'password', {minlength: 8});
+
+        const choices = form.fieldset({class: 'form-grid'});
+        choices.legend('Choices and ranges');
+        this.field(choices, 'Quantity', 'quantity', 'number', {min: 1, max: 20});
+        this.field(choices, 'Date', 'date', 'date');
+        this.field(choices, 'Time', 'time', 'time');
+        this.field(choices, 'Month', 'month', 'month');
+        this.field(choices, 'Week', 'week', 'week');
+        this.field(choices, 'Accent', 'accent', 'color');
+        this.field(choices, 'Intensity', 'intensity', 'range', {min: 0, max: 100, step: 5, live: true});
+        choices.html_label('Region', {for: 'region'});
+        const select = choices.select({id: 'region', name: 'region', value: '^.region'});
+        for (const value of ['North', 'South', 'West']) select.option(value, {value: value.toLowerCase()});
+        choices.html_label('Topics (multiple)', {for: 'topics'});
+        const topics = choices.select({id: 'topics', name: 'topics', multiple: true, size: 3, value: '^.topics'});
+        for (const topic of ['HTML', 'SVG', 'Source']) topics.option(topic, {value: topic.toLowerCase()});
+        choices.html_label('Note', {for: 'note'});
+        choices.textarea({id: 'note', name: 'note', rows: 3, value: '^.note'});
+
+        const options = form.fieldset({class: 'form-options'});
+        options.legend('Flags and states');
+        options.html_label('Receive updates', {for: 'updates'});
+        options.input({type: 'checkbox', id: 'updates', name: 'updates', value: '^.updates'});
+        for (const value of ['daily', 'weekly']) {
+            options.html_label(value[0].toUpperCase() + value.slice(1), {for: value});
+            options.input({type: 'radio', id: value, group: 'frequency', value: `^.frequency.${value}`});
+        }
+        options.html_label('Read-only code', {for: 'code'});
+        options.input({type: 'text', id: 'code', value: 'DEMO-01', readonly: true});
+        options.html_label('Unavailable choice', {for: 'unavailable'});
+        options.input({type: 'text', id: 'unavailable', value: 'Disabled', disabled: true});
+        options.html_label('Attachment', {for: 'attachment'});
+        options.input({type: 'file', id: 'attachment', name: 'attachment'});
+        form.button('Submit unavailable', {type: 'submit', disabled: true});
+
+        const record = layout.aside({class: 'card stack'});
+        record.h2('The Data record');
+        const facts = record.dl();
+        for (const key of SHOWN) {
+            facts.dt(key);
+            facts.dd(`^.${key}`, {id: `out-${key}`});
+        }
+        facts.dt('frequency.weekly');
+        facts.dd('^.frequency.weekly', {id: 'out-weekly'});
+
+        pane.dataSetter({destination_path: 'form', value: RECORD});
+        pane.dataSetter({destination_path: '.frequency.weekly', value: true});
+    }
+
+    field(parent, label, key, kind, attrs = {}) {
+        parent.html_label(label, {for: key});
+        parent.input({type: kind, id: key, name: key, value: `^.${key}`, ...attrs});
+    }
+}

package/src/gramlot_examples/pages/binding/09_forms.md

@@ -0,0 +1,12 @@
+# 09 · Forms with binding
+
+The fieldsets of HTML / SVG example 06, with each `value` bound to a field of the Data record `form`.
+
+- One `dataSetter` writes the whole record from a dictionary (Python) or a plain object (JavaScript); a second setter adds `frequency.weekly`.
+- Each field writes its own type: numbers for quantity and intensity, a list for the topics, booleans for the checkbox and the two radio buttons.
+- The record on the right reads the same paths, so it changes while you edit. Intensity has `live` true and follows the slider.
+- The password is bound but not shown, and the file field stays native: a file has no Data value.
+
+**Limit:** Reset is not offered: a native reset changes the fields without an input event, so the Data would not follow.
+
+**Try it:** Compare this page with example 06: the fieldsets are the same, and the initial values moved from the attributes to the Data record.

package/src/gramlot_examples/pages/binding/10_svg_shapes.js

@@ -0,0 +1,42 @@
+import {Page as BasePage} from '@gramlot/gramlot/page';
+
+export class Page extends BasePage {
+    static title = 'SVG shapes with binding';
+    static css = ['/themes/gramlot-base/theme.css'];
+
+    main(root) {
+        const pane = root.div({class: 'example-page stack', datapath: 'shapes'});
+        pane.h1('SVG shape vocabulary, bound');
+        pane.p('The six shapes of HTML / SVG example 08. Their size, stroke, color and label come from the Data.');
+        const controls = pane.form({class: 'card stack'});
+        for (const [label, key, low, high] of [['Rectangle width', 'width', 20, 95], ['Circle radius', 'radius', 10, 45],
+            ['Ellipse height', 'ry', 10, 45], ['Stroke width', 'stroke', 1, 14]]) {
+            controls.html_label(label, {for: key});
+            controls.input({type: 'range', min: low, max: high, value: `^.${key}`, live: true, id: key});
+        }
+        controls.html_label('Triangle color', {for: 'triangle'});
+        controls.input({type: 'color', value: '^.triangle', id: 'triangle'});
+        controls.html_label('Label', {for: 'label'});
+        controls.input({value: '^.label', live: true, id: 'label'});
+
+        const figure = pane.figure({class: 'card'});
+        const art = figure.svg({viewBox: '0 0 480 200', role: 'img', aria_labelledby: 'shapes-title', class: 'example-art'});
+        art.title('Six geometric shapes', {id: 'shapes-title'});
+        art.rect({x: 15, y: 20, width: '^.width', height: 75, rx: 14, fill: 'var(--gramlot-action)', id: 'rect'});
+        art.circle({cx: 172, cy: 58, r: '^.radius', fill: 'var(--gramlot-warning)', id: 'circle'});
+        art.ellipse({cx: 263, cy: 58, rx: 26, ry: '^.ry', fill: 'var(--gramlot-selected)', id: 'ellipse'});
+        art.line({x1: 294, y1: 20, x2: 315, y2: 98, stroke: 'currentColor', stroke_width: '^.stroke', stroke_linecap: 'round'});
+        art.polyline({points: '325,95 345,25 365,70 385,25 405,95', fill: 'none', stroke: 'var(--gramlot-success)',
+            stroke_width: '^.stroke', stroke_linejoin: 'round', id: 'polyline'});
+        art.polygon({points: '430,95 450,20 470,95', fill: '^.triangle', id: 'polygon'});
+        art.text('^.label', {x: 18, y: 150, fill: 'currentColor', font_size: 17, id: 'caption'});
+        figure.figcaption('The shape attributes are pointers into the Data.');
+
+        pane.dataSetter({destination_path: '.width', value: 95});
+        pane.dataSetter({destination_path: '.radius', value: 38});
+        pane.dataSetter({destination_path: '.ry', value: 38});
+        pane.dataSetter({destination_path: '.stroke', value: 7});
+        pane.dataSetter({destination_path: '.triangle', value: '#456bc4'});
+        pane.dataSetter({destination_path: '.label', value: 'rectangle · circle · ellipse · line · polyline · polygon'});
+    }
+}

package/src/gramlot_examples/pages/binding/10_svg_shapes.md

@@ -0,0 +1,9 @@
+# 10 · SVG shapes with binding
+
+The SVG of HTML / SVG example 08, with six attributes turned into `^` pointers.
+
+- The ranges change the rectangle width, the circle radius, the ellipse height and one `stroke_width` shared by the line and the polyline.
+- The color field paints the triangle; the text field rewrites the label.
+- Every control has `live` true, so the drawing follows while you drag or type.
+
+**Try it:** Bind the circle's `cx` to a new range and move the circle along the row.

package/src/gramlot_examples/pages/binding/11_complete_page.css

@@ -0,0 +1,5 @@
+.complete-page { display: grid; gap: 2rem; }
+.complete-header { display: grid; gap: .55rem; }
+.complete-header nav { display: flex; flex-wrap: wrap; gap: 1rem; padding-top: .5rem; }
+.complete-hero { display: grid; gap: 1rem; text-align: center; }
+.complete-grid { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }