@gramlot/gramlot-examples 0.2.2

package/src/gramlot_examples/pages/controllers/09_end_to_end.js

@@ -0,0 +1,67 @@
+import {Page as BasePage, source} from '@gramlot/gramlot/page';
+
+export class Page extends BasePage {
+    static title = 'End-to-end story';
+    static css = ['/themes/gramlot-base/theme.css'];
+
+    main(root) {
+        const pane = root.div({class: 'example-page stack', datapath: 'story'});
+        pane.h1('^.settings.caption', {id: 'caption'});
+
+        const form = pane.form({class: 'card stack', node_id: 'form'});
+        form.html_label('Caption', {for: 'caption-field'});
+        form.input({value: '^.settings.caption', live: '^.live', id: 'caption-field'});
+        const row = form.div();
+        row.input({type: 'checkbox', value: '^.live', id: 'live'});
+        row.html_label('live', {for: 'live'});
+        form.html_label('Quantity', {for: 'quantity'});
+        form.input({type: 'number', min: 0, value: '^.quantity', default: 2, id: 'quantity'});
+        form.dataSetter({destination_path: '.settings.caption', value: 'A first caption'});
+        const sizes = form.fieldset();
+        sizes.legend('Size');
+        for (const [key, label] of [['small', 'Small'], ['large', 'Large']]) {
+            sizes.input({type: 'radio', group: 'size', value: `^.size.${key}`, id: key});
+            sizes.html_label(label, {for: key});
+        }
+        const gift = form.div();
+        gift.input({type: 'checkbox', value: '^.gift', id: 'gift'});
+        gift.html_label('Gift wrap', {for: 'gift'});
+
+        const result = pane.section({class: 'card stack'});
+        result.p('^.total', {id: 'total'});
+        const drawing = result.svg({viewBox: '0 0 200 200', role: 'img', aria_label: 'Total as a circle', class: 'example-art'});
+        drawing.circle({cx: 100, cy: 100, r: '^.radius', fill: '^.color', id: 'circle'});
+        result.button('Press, also with Shift', {id: 'press'}).dataController({func: 'press'});
+        result.p('^.presses', {id: 'presses'});
+        result.p('^.modifiers', {id: 'modifiers', class: 'muted'});
+
+        pane.dataFormula({result_path: '.total', formula: 'quantity * (large ? 3 : 1) + (gift ? 5 : 0)', quantity: '^.quantity',
+            large: '^.size.large', gift: '^.gift', _init: true});
+        pane.dataFormula({result_path: '.radius', formula: 'Math.min(20 + total * 4, 90)', total: '^.total', _init: true});
+        pane.dataController({func: 'paint', total: '^.total', _init: true});
+
+        const later = pane.section({class: 'card stack', node_id: 'later'});
+        later.h2('A later branch');
+        const notes = later.ul({node_id: 'notes', id: 'notes'});
+        for (const text of ['Setters live here too', 'This note can be removed under freeze']) notes.li(text);
+        const actions = later.div({class: 'actions'});
+        for (const [label, method] of [['Load extras', 'loadExtras'], ['Freeze', 'freeze'],
+            ['Remove a note', 'removeNote'], ['Thaw', 'thaw']]) {
+            actions.button(label, {id: method}).dataController({func: method});
+        }
+        later.section({node_id: 'extras', id: 'extras'}).p('No extras yet.', {class: 'muted'});
+        later.dataSetter({destination_path: '.settings.caption', value: 'The story of a page'});
+        later.dataSetter({destination_path: '.size', value: {small: true, large: false}});
+        later.dataSetter({destination_path: '.gift', value: false});
+        later.dataSetter({destination_path: '.live', value: false});
+    }
+
+    extras(root) {
+        const branch = root.div({datapath: 'extras', class: 'stack'});
+        branch.h3('^.title', {id: 'extras-title'});
+        branch.p('^.items', {id: 'extras-items'});
+        branch.dataSetter({destination_path: '.title', value: 'Extras from the server'});
+        branch.dataSetter({destination_path: '.items', value: 'Ribbon, card, envelope'});
+    }
+}
+source(Page.prototype.extras);

package/src/gramlot_examples/pages/controllers/09_end_to_end.md

@@ -0,0 +1,14 @@
+# 09 · End-to-end story
+
+The acceptance page of Gramlot 0.2.0 (unified plan §8.1), in Python and JavaScript with one companion.
+
+1. **First render.** The `dataSetter` nodes sit after some controls and in the later branch; `.settings.caption` is written twice and the later setter wins. The quantity has no setter and starts from its `default`. The first DOM already shows every final value.
+2. **Editing.** The caption field writes at `change`; after checking `live` it writes at every keystroke.
+3. **Formula and controller.** The formulas compute the total and the circle's radius; the named controller `paint` colors the circle.
+4. **Radio.** Choosing Large writes `size.large` true and `size.small` false.
+5. **Button.** The nested named controller `press` runs once per click, with `button_counter` and `button_shift`.
+6. **Remote Source.** **Load extras** replaces the extras section with a branch built on the server; its own setters are visible at its first render.
+7. **Freeze.** Freeze the later branch, change the quantity and remove a note, then thaw once: the removal appears at the thaw.
+8. **Close.** Closing the page disposes the Gramlot instance: providers, timers, listeners and pending requests stop.
+
+**Try it:** Walk the eight steps in order, then reload and walk them in another order.

package/src/gramlot_examples/pages/controllers/09_end_to_end_aux.js

@@ -0,0 +1,35 @@
+/** Companion of 09_end_to_end.py and 09_end_to_end.js: the named logic of the story. */
+export class Logic {
+    sourceNode(nodeId) {
+        return this.page.source.getNodeByAttr('node_id', nodeId);
+    }
+
+    /** Controller of the total: the circle turns red above 10. */
+    paint(node, kwargs) {
+        node.SET('.color', kwargs.total > 10 ? '#b13d48' : '#23745b');
+    }
+
+    /** The button's nested controller: one call per click, with its counter and modifiers. */
+    press(node, kwargs) {
+        node.SET('.presses', `Pressed ${kwargs.button_counter} times`);
+        node.SET('.modifiers', kwargs.button_shift ? 'with Shift' : 'without modifiers');
+    }
+
+    loadExtras() {
+        return this.page.remoteSource(this.sourceNode('extras'), 'extras');
+    }
+
+    freeze() {
+        this.page.renderer.freeze(this.sourceNode('later'));
+    }
+
+    removeNote() {
+        const notes = this.sourceNode('notes').value;
+        const last = notes.getNodes().at(-1);
+        if (last) notes.popNode(last.label);
+    }
+
+    thaw() {
+        this.page.renderer.unfreeze(this.sourceNode('later'));
+    }
+}

package/src/gramlot_examples/pages/controllers/README.md

@@ -0,0 +1,11 @@
+# Controllers
+
+The pages of this family run code when the Data changes.
+
+`dataFormula` computes a value and writes it to its result path. `dataController` runs code for its effects. A button runs a nested controller at every click; `connect_on<event>` attributes connect other DOM events. The code is inline in the page, or a method of the `Logic` class in the page companion `NN_name_aux.js`.
+
+Inline code needs a Content Security Policy that allows it. Named logic in the companion also runs under a strict policy.
+
+Start with **Formula** and **Controller**, then move the code to the companion with **Named logic**. The last page is the end-to-end story of Gramlot 0.2.0: every piece of the two families on one page.
+
+Each example has a Python page and its JavaScript equivalent. Both share the same companion.

package/src/gramlot_examples/pages/html_svg/01_hello_world.js

@@ -0,0 +1,12 @@
+import {Page as BasePage} from '@gramlot/gramlot/page';
+
+export class Page extends BasePage {
+    static title = 'Hello, Gramlot';
+    static css = ['/themes/gramlot-base/theme.css'];
+
+    main(root) {
+        const page = root.main({class: 'example-page stack'});
+        page.h1('Hello, Gramlot!');
+        page.p('This heading and paragraph come from a Source tree.');
+    }
+}

package/src/gramlot_examples/pages/html_svg/01_hello_world.md

@@ -0,0 +1,9 @@
+# 01 · Hello world
+
+The smallest Gramlot page: one main landmark, heading and paragraph.
+
+`main(root)` declares each element as a typed Source node. The Python and JavaScript Pages produce the same visible structure.
+
+**Try it:** Add a second paragraph and compare the two Page modules.
+
+**Limit:** The page has no state or interaction.

package/src/gramlot_examples/pages/html_svg/02_text_and_links.js

@@ -0,0 +1,28 @@
+import {Page as BasePage} from '@gramlot/gramlot/page';
+
+export class Page extends BasePage {
+    static title = 'Text and links';
+    static css = ['/themes/gramlot-base/theme.css'];
+
+    main(root) {
+        const page = root.main({class: 'example-page stack'});
+        page.h1('Words with meaning');
+        const intro = page.p('A paragraph can contain ');
+        intro.strong('strong emphasis');
+        intro.span(', ');
+        intro.em('gentle emphasis');
+        intro.span(', and a ');
+        intro.a('link to the HTML standard', {href: 'https://html.spec.whatwg.org/', target: '_blank', rel: 'noopener noreferrer'});
+        intro.span('.');
+        page.p('Text is escaped by the Source renderer: <tag> is shown as text.', {class: 'muted'});
+        const quote = page.blockquote();
+        quote.p('Clarity grows from small, explicit choices.');
+        quote.footer('A note from this example');
+        page.h2('Code as text');
+        page.p('The expression below is shown literally:');
+        page.pre().code("root.h1('Hello')");
+        page.h3('A local destination', {id: 'destination'});
+        page.p('Headings give the link above a place to land.');
+        page.a('Jump back to the heading', {href: '#destination'});
+    }
+}

package/src/gramlot_examples/pages/html_svg/02_text_and_links.md

@@ -0,0 +1,9 @@
+# 02 · Text and links
+
+Text hierarchy, mixed inline content, quotation, code and two kinds of link.
+
+A paragraph combines literal text with strong, emphasis, span and anchor children. The pre/code pair displays escaped text.
+
+**Try it:** Add an abbreviation and another local destination.
+
+**Limit:** The external standards link needs network access; the page itself fetches nothing.

package/src/gramlot_examples/pages/html_svg/03_lists.js

@@ -0,0 +1,29 @@
+import {Page as BasePage} from '@gramlot/gramlot/page';
+
+const STEPS = ['Describe a page with Source', 'Add HTML elements', 'Review the rendered document'];
+const TERMS = [['Source', 'The declared structure of a page.'], ['Data', 'A separate home for application state.']];
+
+export class Page extends BasePage {
+    static title = 'Lists';
+    static css = ['/themes/gramlot-base/theme.css'];
+
+    main(root) {
+        const page = root.main({class: 'example-page stack'});
+        page.h1('Lists tell a sequence');
+        page.p('Loops add one Source node for each item.');
+        const ordered = page.ol();
+        for (const step of STEPS) ordered.li(step);
+        page.h2('Two useful terms');
+        const definitions = page.dl();
+        for (const [term, description] of TERMS) {
+            definitions.dt(term);
+            definitions.dd(description);
+        }
+        page.h2('A nested list');
+        const groups = page.ul();
+        const first = groups.li('HTML elements');
+        const nested = first.ul();
+        for (const item of ['headings', 'lists', 'links']) nested.li(item);
+        groups.li('SVG');
+    }
+}

package/src/gramlot_examples/pages/html_svg/03_lists.md

@@ -0,0 +1,9 @@
+# 03 · Lists
+
+Ordered, unordered and description lists built from local data.
+
+Loops add ordered steps, definition pairs and a nested list while Source preserves their structure.
+
+**Try it:** Add a fourth step and another glossary term.
+
+**Limit:** The list content is fixed when the Page builds Source.

package/src/gramlot_examples/pages/html_svg/04_semantic_page.js

@@ -0,0 +1,25 @@
+import {Page as BasePage} from '@gramlot/gramlot/page';
+
+export class Page extends BasePage {
+    static title = 'A semantic page';
+    static css = ['/themes/gramlot-base/theme.css'];
+
+    main(root) {
+        const page = root.div({class: 'example-page stack'});
+        const header = page.header();
+        header.p('GRAMLOT JOURNAL', {class: 'eyebrow'});
+        header.h1('A page with landmarks');
+        const nav = page.nav({aria_label: 'Page sections'});
+        nav.a('Story', {href: '#story'});
+        nav.span(' · ');
+        nav.a('Notes', {href: '#notes'});
+        const main = page.main();
+        const article = main.article({id: 'story', class: 'stack'});
+        article.h2('The article');
+        article.p('Header, navigation, main, article and footer each describe a role.');
+        const aside = main.aside({id: 'notes', class: 'card'});
+        aside.h2('A side note');
+        aside.p('The markup stays meaningful even without decoration.');
+        page.footer().small('Built with Gramlot Source.');
+    }
+}

package/src/gramlot_examples/pages/html_svg/04_semantic_page.md

@@ -0,0 +1,9 @@
+# 04 · A semantic page
+
+Landmarks and sections give a small page a meaningful reading order.
+
+Header, navigation, main, article, aside and footer are authored as HTML Source. Section IDs serve as anchor targets.
+
+**Try it:** Add another article and a matching navigation link.
+
+**Limit:** Navigation uses native anchors; there is no client router.

package/src/gramlot_examples/pages/html_svg/05_tables.js

@@ -0,0 +1,27 @@
+import {Page as BasePage} from '@gramlot/gramlot/page';
+
+const ROWS = [['North', 12, 8], ['South', 9, 11], ['West', 15, 6]];
+
+export class Page extends BasePage {
+    static title = 'Tables';
+    static css = ['/themes/gramlot-base/theme.css'];
+
+    main(root) {
+        const page = root.main({class: 'example-page stack'});
+        page.h1('A small regional report');
+        page.p('Rows come from data; totals are computed before Source is built.');
+        const table = page.table();
+        table.caption('Orders by region and quarter');
+        const heading = table.thead().tr();
+        for (const label of ['Region', 'Q1', 'Q2', 'Total']) heading.th(label, {scope: 'col'});
+        const body = table.tbody();
+        for (const [region, q1, q2] of ROWS) {
+            const row = body.tr();
+            row.th(region, {scope: 'row'});
+            for (const value of [q1, q2, q1 + q2]) row.td(String(value));
+        }
+        const total = table.tfoot().tr();
+        total.th('All regions', {scope: 'row'});
+        for (const value of [ROWS.reduce((n, row) => n + row[1], 0), ROWS.reduce((n, row) => n + row[2], 0), ROWS.reduce((n, row) => n + row[1] + row[2], 0)]) total.td(String(value));
+    }
+}

package/src/gramlot_examples/pages/html_svg/05_tables.md

@@ -0,0 +1,9 @@
+# 05 · Tables
+
+A data table with a caption, scoped headings and a calculated total.
+
+One local row set feeds the table body and footer arithmetic.
+
+**Try it:** Add a region and confirm the total changes in both languages.
+
+**Limit:** Values are fixed when Source is built.

package/src/gramlot_examples/pages/html_svg/06_forms.css

@@ -0,0 +1,5 @@
+.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; } }

package/src/gramlot_examples/pages/html_svg/06_forms.js

@@ -0,0 +1,63 @@
+import {Page as BasePage} from '@gramlot/gramlot/page';
+
+export class Page extends BasePage {
+    static title = 'Native form controls';
+    static css = ['/themes/gramlot-base/theme.css'];
+
+    main(root) {
+        const page = root.main({class: 'example-page stack'});
+        page.h1('Native form controls');
+        page.p('Try the controls, then use Reset to restore their initial values. Submit is disabled in this static example.');
+        const form = page.form();
+        const identity = form.fieldset({class: 'form-grid'});
+        identity.legend('Identity');
+        this.field(identity, 'Name', 'name', 'text', {value: 'Ada Lovelace', 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, value: 3});
+        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', {value: '#456bc4'});
+        this.field(choices, 'Intensity', 'intensity', 'range', {min: 0, max: 100, step: 5, value: 60});
+        choices.html_label('Region', {for: 'region'});
+        const select = choices.select({id: 'region', name: 'region'});
+        for (const value of ['North', 'South', 'West']) select.option(value, {value: value.toLowerCase(), selected: value === 'South'});
+        choices.html_label('Topics (multiple)', {for: 'topics'});
+        const topics = choices.select({id: 'topics', name: 'topics', multiple: true, size: 3});
+        for (const topic of ['HTML', 'SVG', 'Source']) topics.option(topic, {value: topic.toLowerCase(), selected: topic === 'HTML'});
+        choices.html_label('Note', {for: 'note'});
+        choices.textarea('A native multiline field.', {id: 'note', name: 'note', rows: 3});
+
+        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', checked: true});
+        for (const value of ['daily', 'weekly']) {
+            options.html_label(value[0].toUpperCase() + value.slice(1), {for: value});
+            options.input({type: 'radio', id: value, name: 'frequency', value, checked: value === 'weekly'});
+        }
+        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'});
+        const actions = form.div({class: 'form-actions'});
+        actions.button('Button without an action', {type: 'button'});
+        actions.button('Reset values', {type: 'reset'});
+        actions.button('Submit unavailable', {type: 'submit', disabled: true});
+    }
+
+    field(parent, label, key, kind, attrs = {}) {
+        parent.html_label(label, {for: key});
+        parent.input({type: kind, id: key, name: key, ...attrs});
+    }
+}

package/src/gramlot_examples/pages/html_svg/06_forms.md

@@ -0,0 +1,9 @@
+# 06 · Native forms
+
+Native fields, choices and buttons grouped in fieldsets.
+
+The browser owns editing and Reset. The Source grammar authors the HTML label with `html_label(...)`, because `label` is also a node property.
+
+**Try it:** Change a default value, use Reset and add a select option.
+
+**Limit:** Submit is disabled because this page has no save endpoint or declared form handler.

package/src/gramlot_examples/pages/html_svg/07_native_disclosure.js

@@ -0,0 +1,27 @@
+import {Page as BasePage} from '@gramlot/gramlot/page';
+
+export class Page extends BasePage {
+    static title = 'Native disclosure and measures';
+    static css = ['/themes/gramlot-base/theme.css'];
+
+    main(root) {
+        const page = root.main({class: 'example-page stack'});
+        page.h1('Built-in disclosure and measures');
+        page.p("Open the questions with the browser's native details control.");
+        for (const [question, answer] of [
+            ['What is Source?', 'A declarative tree describing the page.'],
+            ['Can a page contain SVG?', 'Yes. The SVG dialect nests under an HTML Source node.'],
+        ]) {
+            const details = page.details({class: 'card'});
+            details.summary(question);
+            details.p(answer);
+        }
+        const measures = page.section({class: 'card stack'});
+        measures.h2('Measured values');
+        measures.html_label('Preparation: 70%', {for: 'preparation'});
+        measures.progress({id: 'preparation', value: 70, max: 100});
+        measures.html_label('Quality score: 8 of 10', {for: 'quality'});
+        measures.meter({id: 'quality', min: 0, max: 10, low: 4, high: 8, optimum: 10, value: 8});
+        measures.p('These numbers are fixed page content; no live progress is implied.', {class: 'muted'});
+    }
+}

package/src/gramlot_examples/pages/html_svg/07_native_disclosure.md

@@ -0,0 +1,9 @@
+# 07 · Disclosure and measures
+
+Expandable questions with static progress and meter values.
+
+A loop creates details/summary pairs. Native browser behavior handles expansion; the measurements have explicit values and labels.
+
+**Try it:** Add a question and change the fixed meter value.
+
+**Limit:** The measurements do not update automatically.

package/src/gramlot_examples/pages/html_svg/08_svg_shapes.js

@@ -0,0 +1,23 @@
+import {Page as BasePage} from '@gramlot/gramlot/page';
+
+export class Page extends BasePage {
+    static title = 'SVG shapes';
+    static css = ['/themes/gramlot-base/theme.css'];
+
+    main(root) {
+        const page = root.main({class: 'example-page stack'});
+        page.h1('SVG shape vocabulary');
+        page.p('One SVG viewport contains six shapes and a text label.');
+        const figure = page.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: 95, height: 75, rx: 14, fill: 'var(--gramlot-action)'});
+        art.circle({cx: 172, cy: 58, r: 38, fill: 'var(--gramlot-warning)'});
+        art.ellipse({cx: 263, cy: 58, rx: 26, ry: 38, fill: 'var(--gramlot-selected)'});
+        art.line({x1: 294, y1: 20, x2: 315, y2: 98, stroke: 'currentColor', stroke_width: 8, stroke_linecap: 'round'});
+        art.polyline({points: '325,95 345,25 365,70 385,25 405,95', fill: 'none', stroke: 'var(--gramlot-success)', stroke_width: 7, stroke_linejoin: 'round'});
+        art.polygon({points: '430,95 450,20 470,95', fill: 'var(--gramlot-brand-blue)'});
+        art.text('rectangle · circle · ellipse · line · polyline · polygon', {x: 18, y: 150, fill: 'currentColor', font_size: 17});
+        figure.figcaption('The shape attributes are part of the Source tree.');
+    }
+}

package/src/gramlot_examples/pages/html_svg/08_svg_shapes.md

@@ -0,0 +1,9 @@
+# 08 · SVG shapes
+
+Six SVG primitives in one accessible viewport.
+
+The SVG dialect nests below an HTML figure. Coordinates, fill and stroke are declared as SVG attributes.
+
+**Try it:** Move a shape and compare its coordinates in both languages.
+
+**Limit:** This illustration has no animation or pointer behavior.

package/src/gramlot_examples/pages/html_svg/09_svg_composition.js

@@ -0,0 +1,42 @@
+import {Page as BasePage} from '@gramlot/gramlot/page';
+
+export class Page extends BasePage {
+    static title = 'SVG composition';
+    static css = ['/themes/gramlot-base/theme.css'];
+
+    main(root) {
+        const page = root.main({class: 'example-page stack'});
+        page.h1('Compose a small SVG scene');
+        page.p('Groups and loops arrange repeated Source nodes in a single viewport.');
+        const figure = page.figure({class: 'card'});
+        const drawing = figure.svg({viewBox: '0 0 560 240', role: 'img', aria_labelledby: 'scene-title', class: 'example-art'});
+        drawing.title('A row of houses and trees in a garden', {id: 'scene-title'});
+        drawing.rect({x: 0, y: 0, width: 560, height: 240, fill: 'var(--gramlot-surface-subtle)'});
+        drawing.rect({x: 0, y: 177, width: 560, height: 63, fill: 'var(--gramlot-border)'});
+        for (const x of [115, 330]) this.house(drawing, x);
+        for (const x of [40, 260, 505]) this.tree(drawing, x);
+        for (const [x, color] of [[74, 'var(--gramlot-action)'], [282, 'var(--gramlot-warning)'], [465, 'var(--gramlot-brand-blue)']]) this.flower(drawing, x, color);
+        figure.figcaption('House, tree and flower methods compose one scene through groups and loops.');
+    }
+
+    house(drawing, x) {
+        const group = drawing.g({transform: `translate(${x} 0)`});
+        group.rect({x: 0, y: 92, width: 125, height: 85, fill: 'var(--gramlot-surface)', stroke: 'var(--gramlot-action)', stroke_width: 3});
+        group.path({d: 'M-10 92 L62 42 L135 92 Z', fill: 'var(--gramlot-action)'});
+        group.rect({x: 47, y: 127, width: 30, height: 50, fill: 'var(--gramlot-selected)'});
+        for (const windowX of [17, 91]) group.rect({x: windowX, y: 110, width: 17, height: 18, fill: 'var(--gramlot-brand-yellow)'});
+    }
+
+    tree(drawing, x) {
+        const group = drawing.g({transform: `translate(${x} 0)`});
+        group.rect({x: -4, y: 103, width: 8, height: 74, fill: 'var(--gramlot-success)'});
+        for (const [cx, cy] of [[-14, 111], [12, 109], [0, 88]]) group.circle({cx, cy, r: 22, fill: 'var(--gramlot-success)'});
+    }
+
+    flower(drawing, x, color) {
+        const group = drawing.g({transform: `translate(${x} 0)`});
+        group.line({x1: 0, y1: 207, x2: 0, y2: 187, stroke: 'var(--gramlot-success)', stroke_width: 3});
+        for (const [dx, dy] of [[-7, 0], [7, 0], [0, -7], [0, 7]]) group.circle({cx: dx, cy: 184 + dy, r: 6, fill: color});
+        group.circle({cx: 0, cy: 184, r: 4, fill: 'var(--gramlot-brand-yellow)'});
+    }
+}

package/src/gramlot_examples/pages/html_svg/09_svg_composition.md

@@ -0,0 +1,9 @@
+# 09 · SVG composition
+
+A scene assembled from repeated groups, paths and helper methods.
+
+House, tree and flower helpers add grouped shapes. Loops place repetitions, while theme tokens color the scene.
+
+**Try it:** Add a third house or vary flower positions.
+
+**Limit:** The scene is decorative and static.

package/src/gramlot_examples/pages/html_svg/10_cards_with_icons.css

@@ -0,0 +1,6 @@
+.icon-cards { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
+.icon-cards article { min-width: 0; }
+
+.icon-cards article { position: relative; }
+.card-remove { position: absolute; inset-block-start: .5rem; inset-inline-end: .5rem;
+    padding: .1rem .45rem; line-height: 1.2; font-size: 1rem; }

package/src/gramlot_examples/pages/html_svg/10_cards_with_icons.js

@@ -0,0 +1,40 @@
+import {Page as BasePage} from '@gramlot/gramlot/page';
+
+const CARDS = [
+    ['Structure', 'Source describes the page tree.', 'structure'],
+    ['Drawing', 'SVG sits naturally beside HTML.', 'drawing'],
+    ['Reading', 'Semantic elements give content a role.', 'reading'],
+];
+
+export class Page extends BasePage {
+    static title = 'Cards with SVG icons';
+    static css = ['/themes/gramlot-base/theme.css'];
+
+    main(root) {
+        const page = root.main({node_label: 'page', class: 'example-page stack'});
+        page.h1('Three ideas, three icons');
+        page.p('Click × to remove a card from Source. Gramlot updates the DOM without reloading.');
+        const cards = page.section({node_label: 'cards', class: 'grid icon-cards', aria_label: 'Gramlot concepts'});
+        for (const [title, description, kind] of CARDS) {
+            const card = cards.article({node_label: kind, class: 'card stack'});
+            card.button('×', {type: 'button', class: 'card-remove', aria_label: `Remove ${title}`,
+                onclick: `window.gramlot.builder.source.getItem('main.page.cards').popNode('${kind}')`});
+            const icon = card.svg({viewBox: '0 0 64 64', width: 64, height: 64, aria_hidden: 'true'});
+            this.icon(icon, kind);
+            card.h2(title);
+            card.p(description);
+        }
+    }
+
+    icon(icon, kind) {
+        icon.rect({x: 2, y: 2, width: 60, height: 60, rx: 16, fill: 'var(--gramlot-surface-subtle)'});
+        if (kind === 'structure') {
+            for (const [x, y] of [[18, 18], [36, 18], [27, 38]]) icon.rect({x, y, width: 11, height: 11, rx: 2, fill: 'var(--gramlot-action)'});
+        } else if (kind === 'drawing') {
+            icon.circle({cx: 32, cy: 32, r: 17, fill: 'none', stroke: 'var(--gramlot-warning)', stroke_width: 5});
+            icon.circle({cx: 32, cy: 32, r: 5, fill: 'var(--gramlot-warning)'});
+        } else {
+            icon.path({d: 'M17 18h30v28H17z M25 26h14 M25 32h14 M25 38h10', fill: 'none', stroke: 'var(--gramlot-success)', stroke_width: 3, stroke_linecap: 'round'});
+        }
+    }
+}

package/src/gramlot_examples/pages/html_svg/10_cards_with_icons.md

@@ -0,0 +1,20 @@
+# 10 · Cards with icons and live Source
+
+Responsive HTML cards with SVG drawings. Click a card's × button to remove it
+without reloading the page.
+
+The Builder gives the page, card container and each card a stable `node_label`.
+The button's short JavaScript action finds `main.page.cards` in the browser
+Builder's Source and calls `popNode` with the card label. Gramlot observes the
+Source deletion and removes the corresponding DOM branch, including its SVG.
+The action never removes a DOM element directly.
+
+Python and JavaScript declare the same page and browser action. It also works
+in the generated standalone directory opened directly from disk, offline.
+
+**Try it:** Remove the middle card, then the others. Reload to restore all three.
+Add a fourth card to the local dataset and give it a matching icon branch.
+
+**Limit:** This is a small, explicit JavaScript action demonstrating live Source,
+not Data binding, persistence or server synchronization. The icons are decorative;
+card text and the labelled remove buttons carry the meaning.

package/src/gramlot_examples/pages/html_svg/11_static_report.css

@@ -0,0 +1,3 @@
+.report-summary { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
+.report-number { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; margin: .2rem 0; }
+.report-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; list-style: none; padding: 0; margin: 0; }