@gramlot/gramlot-examples 0.2.12 → 0.2.14

package/src/gramlot_examples/gallery/gallery-page.js

@@ -25,11 +25,8 @@ export class GalleryPage extends IndexPage {
     footer(footer) {
         super.footer(footer);
         const inspector = footer.button({type: 'button', id: 'gallery-inspector', class: 'gallery-inspector',
-            title: 'Inspect the gallery or the visible example', aria_label: 'Inspector', aria_pressed: 'false', disabled: true});
-        const icon = inspector.svg({viewBox: '0 0 24 24', width: '18', height: '18', aria_hidden: 'true'});
-        icon.rect({x: '3', y: '3', width: '18', height: '18', rx: '2', fill: 'none', stroke: 'currentColor', stroke_width: '1.5'});
-        icon.path({d: 'M9 3v18M12 8h6M12 12h6M12 16h4', fill: 'none', stroke: 'currentColor', stroke_width: '1.5'});
-        inspector.span('Inspector');
+            title: 'Open inspector', aria_label: 'Inspector', aria_pressed: 'false', disabled: true});
+        inspector.span('🔍', {aria_hidden: 'true'});
 
     }
     behavior(shell) { shell.script({src: this.constructor.galleryScript}); }

package/src/gramlot_examples/gallery/gallery.css

@@ -33,6 +33,7 @@
 .gallery-source-tabs button:focus-visible { outline: 2px solid var(--gramlot-focus-ring); outline-offset: -2px; }
 .gallery-source-tabs button[hidden] { display: none; }
   .gallery-explanation { padding: .4rem; }
-.gallery-inspector { display: inline-flex; align-items: center; gap: .35rem; margin-inline-start: auto; padding: .15rem .5rem; min-block-size: 26px; font-size: inherit; }
-.gallery-inspector svg { flex: none; }
+.gallery-inspector { display: inline-flex; align-items: center; justify-content: center; flex: none; margin-inline-start: auto; padding: 0; inline-size: 28px; block-size: 28px; min-block-size: 28px; border: 0; background: transparent; box-shadow: none; font-size: 16px; line-height: 1; }
+.gallery-inspector:hover { background: var(--gramlot-surface); }
+.gallery-inspector:focus-visible { outline: 2px solid var(--gramlot-focus-ring); outline-offset: 2px; }
 .gallery-inspector[aria-pressed="true"] { background: var(--gramlot-action); color: var(--gramlot-navigation-text); }

package/src/gramlot_examples/pages/README.md

@@ -93,8 +93,9 @@ from [the gallery guide](https://github.com/gramlot-org/gramlot-examples/blob/ma
 c13/c14 separate the basic trial from advanced cache/error/lifetime exercises.
 In c13, “Mounted fragments” counts successful mounts; HTTP calls must be observed
 independently. c14 has an explicit read button to distinguish a stored snapshot
-from a later response. Neither page claims every environment has been qualified. The corrected cache behavior documented in
-the development core is not automatically present in published packages.
+from a later response. The corrected cache behavior is included from core 0.2.17. Update older
+installations before following the advanced trials; a startup check alone does
+not qualify every exercise in an environment.
 
 The common FileServer gallery has no named resource groups: css_requires,
 js_requires and named connect_on handlers need genro-kajenn's resource host.

package/src/gramlot_examples/pages/controllers/13_cached_remote.md

@@ -48,7 +48,7 @@ The corrected identity is the method name plus the **TYTX snapshot of parameters
 
 ## Advanced practice
 
-**Development distinction:** the corrected cache identity is locally implemented in the core stabilization work; it is not a new published release. Check the runtime you are using before interpreting these advanced trials. Installed released packages may retain the earlier defects.
+**Release history:** core 0.2.17 includes the corrected cache identity and cancellation behavior. Update an older runtime before trying these advanced cases.
 
 Run these separately after the basic trial, using that core cache correction. Reload between source edits so each trial has a known starting state.
 

package/src/gramlot_examples/pages/controllers/18_publish_subscribe.js

@@ -0,0 +1,36 @@
+import {Page as BasePage} from '@gramlot/gramlot/page';
+
+export class Page extends BasePage {
+    static title = 'Publish and subscribe';
+    static css = ['/themes/gramlot-base/theme.css'];
+    main(root) {
+        const pane = root.main({class: 'example-page stack', datapath: 'messages'});
+        pane.h1('The same action, two entry points');
+        pane.p('Compare the direct controller with a page topic. Both update the same summary.');
+        pane.dataSetter({destination_path: '.text', value: 'Hello'});
+        pane.html_label('Message', {for: 'message'});
+        pane.input({id: 'message', value: '^.text', live: true});
+        pane.button('Direct controller', {id: 'direct'}).dataController({func: 'save', text: '=.text'});
+        pane.button('Publish', {id: 'publish'}).dataController({func: 'publishMessage', text: '=.text'});
+        pane.dataController({func: 'save', subscribe_saved: true});
+        pane.p('^.summary', {id: 'summary'});
+        pane.button('Ask, then publish', {id: 'ask'}).dataController({func: 'publishMessage',
+            _ask: {title: 'Message', fields: [{name: 'text', lbl: 'Message', required: true}]}, text: '=.text'});
+        pane.h2('Two independent receivers');
+        for (const name of ['left', 'right']) {
+            const box = pane.section({class: 'card stack', datapath: `.${name}`});
+            box.h3(name[0].toUpperCase() + name.slice(1));
+            const target = box.dataController({func: 'receive', selfsubscribe_refresh: true});
+            box.button(`Send to ${name}`, {id: `send-${name}`}).dataController({func: 'sendToNode', target, text: '=.text'});
+            box.p('^.received', {id: `received-${name}`});
+            box.dataSetter({destination_path: '.text', value: `Hello ${name}`});
+        }
+    }
+}
+
+export class Logic {
+    save(node, {text, _reason}) { node.SET('.summary', `${text} (${_reason})`); }
+    publishMessage(node, {text}) { this.page.publish('saved', {text}); }
+    sendToNode(node, {target, text}) { target.publish('refresh', {text}); }
+    receive(node, {text}) { node.SET('.received', text); }
+}

package/src/gramlot_examples/pages/controllers/18_publish_subscribe.md

@@ -0,0 +1,20 @@
+# 18 · Publish and subscribe
+
+Revisit **Button controller**: one button calls a controller directly, another publishes a message to the same behavior. Then address two independent receivers without looking up their IDs, and collect a message in a dialog.
+
+**Uses:** Source, Data, named Logic, page/self subscriptions, authored references and native `ask` — core 0.2.18. No endpoint calls. Earlier lessons remain the 0.2.0 stage.
+
+**Try it:** edit Message, press Direct controller, then Publish. The summary is the same except for the trigger reason. Send to left: only the left receiver changes. Ask, then publish lets you edit the outgoing message; Cancel leaves the summary unchanged.
+
+<details>
+<summary>More detail</summary>
+
+The direct controller keeps the c06 click mechanism. The publishing controller knows the topic `saved`; `subscribe_saved=True` connects the receiver. The publisher does not need a Data trigger path to activate that receiver. Repeating the same message still delivers it.
+
+Each receiver declares `selfsubscribe_refresh=True`. Python passes that controller as `target`; Gramlot resolves the authored reference in the browser. `target.publish('refresh', {text})` addresses only that node. The JavaScript Page makes the same declaration, and both use the shared Logic class.
+
+`_ask` adds native field collection to the existing controller. It runs the controller once after confirmation and never after cancellation. This example uses named methods throughout; it does not need inline JavaScript evaluation. For a conditional confirmation use a string `_ask` with `_ask_if`; those inline conditions need the corresponding CSP policy.
+
+**Exercise:** subscribe a second controller to `saved`, writing another Data path. Predict whether both run when Publish is pressed. **Answer:** both run, in registration order; each should write its own result. A self-subscription does not also subscribe to the plain page topic.
+
+</details>

package/src/gramlot_examples/pages/controllers/19_frame_messages.js

@@ -0,0 +1,39 @@
+import {Page as BasePage} from '@gramlot/gramlot/page';
+
+export class Page extends BasePage {
+    static title = 'Parent and child messages';
+    static css = ['/themes/gramlot-base/theme.css'];
+    main(root) {
+        const pane = root.main({class: 'example-page stack', datapath: 'frames'});
+        pane.h1('Parent and child messages');
+        pane.dataSetter({destination_path: '.child', value: false});
+        pane.dataSetter({destination_path: '.text', value: 'Hello'});
+        pane.html_label('Message', {for: 'message'});
+        pane.input({id: 'message', value: '^.text', live: true});
+        const parent = pane.section({hidden: '^.child'});
+        const frame = parent.iframe({id: 'detail', title: 'Child page', style: 'width:100%;height:260px;border:1px solid #aab4c2'});
+        parent.button('Send to child', {id: 'send-child'}).dataController({func: 'sendChild', target: frame, text: '=.text'});
+        pane.button('Reply to parent', {id: 'reply'}).dataController({func: 'reply', text: '=.text', child: '=.child'});
+        pane.p('^.received', {id: 'received'});
+        pane.dataController({func: 'receive', subscribe_message: true});
+        pane.dataController({func: 'setup', frame, _onStart: true});
+    }
+}
+
+export class Logic {
+    setup(node, {frame}) {
+        const url = new URL(this.page.dom.getDomNode(node.parentNode).ownerDocument.location.href);
+        const child = url.hash === '#child';
+        node.SET('.child', child);
+        if (!child) { url.hash = 'child'; frame.setAttr({src: url.href}); }
+    }
+    sendChild(node, {target, text}) {
+        try { this.page.publish({topic: 'message', iframe: target}, {text}); }
+        catch (error) { node.SET('.received', error.message); }
+    }
+    reply(node, {text, child}) {
+        if (child) this.page.publish({topic: 'message', parent: true}, {text});
+        else node.SET('.received', 'Use Reply inside the child page.');
+    }
+    receive(node, {text}) { node.SET('.received', text); }
+}

package/src/gramlot_examples/pages/controllers/19_frame_messages.md

@@ -0,0 +1,20 @@
+# 19 · Parent and child messages
+
+Send a message to the embedded page, then reply from that page. The example reuses the page-topic receiver from **Publish and subscribe** and adds a destination to `publish`.
+
+**Uses:** Source, Data, named Logic, authored iframe references and direct parent/child `postMessage` — core 0.2.18. No endpoint calls or server messaging.
+
+**Try it:** wait for the child field to appear, edit the outer Message and press Send to child. Both summaries change: publication is local first, then reaches the selected child. Edit the child's Message and press its Reply to parent. The child publishes locally first and the parent receives the reply.
+
+<details>
+<summary>More detail</summary>
+
+The same page opens with `#child` inside the iframe. Its setup controller hides the parent section and does not load another iframe, so nesting stops after one child. The URL hash is only this example's mode selector; it is not a messaging address.
+
+Python passes the iframe Source as `target`. Logic uses `{topic: 'message', iframe: target}`. The child uses `{topic: 'message', parent: true}`. All cross-frame calls use postMessage, including same-origin pages; each receiving page activates its ordinary subscribe_message controller.
+
+The child must be connected and ready. An early click reports the readiness error; retry after the child appears. There is no automatic queue or broadcast. Source/DOM objects stay local: the iframe reference selects a local destination, while only the message data crosses the connection. Reloading the child establishes a new connection.
+
+**Exercise:** add another owned child and send only to its reference. **Answer:** local delivery still occurs, but only the selected child receives the remote copy. There is no recursive broadcast in this release.
+
+</details>

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

@@ -9,6 +9,8 @@ Add calculations and actions to bound pages, then calls to their host. Each stag
 - **0.2.15:** the later part of **Call on click** adds Source authorization.
 - **0.2.16:** **Remote**, **Cached remote** and **Data remote** add Source fragments and values loaded on demand.
 
+- **0.2.18:** revisit **Button controller** in **Publish and subscribe**, then use **Parent and child messages** for direct iframe exchange. These pages require core 0.2.18 or later.
+
 The host is Python, Node/Bun or a standalone browser Worker. Local Logic runs in the browser. Stable example numbers identify pages; the menu follows release order.
 
 <details>
@@ -33,8 +35,8 @@ c12 teaches Source replacement in the later 0.2.16 stage.
 The Page/Logic module arrangement is a 0.2.5 addition to the named-logic lesson. c08's first pass combines local binding/lifecycle. Return after c09/c11 for its
 0.2.14 quote/result/error section; it does not run automatically or add remote/lazy Data. After b02 and c12, use c13
 for a first cache trial; c14 needs the endpoint concepts of c09/c10. Advanced
-cache/lifecycle exercises are separate in c13/c14; development-only cache
-corrections and pending environment-wide qualification are explicitly labelled. See the [release-by-release route](https://github.com/gramlot-org/gramlot/blob/main/docs/public/025-try.md#gc-025-015). Prerequisites support the
+cache/lifecycle exercises are separate in c13/c14; their corrected cache behavior
+is available from core 0.2.17. See the [release-by-release route](https://github.com/gramlot-org/gramlot/blob/main/docs/public/025-try.md#gc-025-015). Prerequisites support the
 chronological sequence; they do not replace it. The maintained files may use
 later APIs, so they are not snapshots of the earliest release.