@gramlot/gramlot-examples 0.3.3 → 0.3.5

package/README.md

@@ -12,7 +12,7 @@ npm install @gramlot/gramlot-examples
 [![PyPI](https://img.shields.io/pypi/v/gramlot-examples)](https://pypi.org/project/gramlot-examples/)
 [![npm](https://img.shields.io/npm/v/@gramlot/gramlot-examples)](https://www.npmjs.com/package/@gramlot/gramlot-examples)
 
-Current release: 0.3.3.
+Current release: 0.3.5.
 
 [Documentation and learning sequence](https://gramlot-examples.readthedocs.io/en/latest/)
 include every lesson, its Python and JavaScript source, and the gallery guide.
@@ -30,7 +30,7 @@ Choose [packaged or source-checkout updates](docs/010-gallery.md#ge-010-050). A
 
 ## Pages
 
-[`src/gramlot_examples/pages/`](https://github.com/gramlot-org/gramlot-examples/blob/main/src/gramlot_examples/pages/README.md) holds four
+[`src/gramlot_examples/pages/`](https://github.com/gramlot-org/gramlot-examples/blob/main/src/gramlot_examples/pages/README.md) holds five
 families. Each example is a Python page and its JavaScript equivalent, with a
 same-name README:
 
@@ -43,7 +43,10 @@ same-name README:
   requires the current core release; each lesson states which features it uses.
 
 - `components/`: twenty-five lessons for inputs, labelbox, formlet, group copy,
-  command buttons and field validation (`w01`–`w25`), with compact touch previews.
+  command buttons and field validation (`w01`–`w25`), with compact controls.
+- `layout/`: eight container lessons (`l01`–`l08`), with live splitters, drawers,
+  nested layouts, selection and closing events, fourteen tab presentations,
+  a guided drawer tour and a lazy carousel with retained live previews.
 
 Each `NN_name.js` exports `Page` and `Logic`; the Python page `NN_name.py` takes its
 `Logic` from the module beside it.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gramlot/gramlot-examples",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "description": "Gramlot example pages, the gallery page and its catalogue.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
     "prepack": "node scripts/build-browser.mjs"
   },
   "dependencies": {
-    "@gramlot/gramlot": ">=0.3.1"
+    "@gramlot/gramlot": ">=0.3.3"
   },
   "devDependencies": {
     "@genrojs/bag": ">=0.11.0",
@@ -42,7 +42,8 @@
     "src/gramlot_examples/gallery/gallery-page.js",
     "src/gramlot_examples/gallery/gallery.css",
     "src/gramlot_examples/gallery/dist",
-    "src/gramlot_examples/gallery/collections.js"
+    "src/gramlot_examples/gallery/collections.js",
+    "src/gramlot_examples/gallery/guided-demo.js"
   ],
   "engines": {
     "node": ">=22"

package/src/gramlot_examples/catalog.json

@@ -487,6 +487,60 @@
           "description": "Transformations, conditions, warnings, local callbacks and remote validation."
         }
       ]
+    },
+    {
+      "key": "layout",
+      "title": "Containers",
+      "examples": [
+        {
+          "key": "l01",
+          "folder": "01_border",
+          "title": "Border regions and splitters",
+          "description": "A customer workspace divided into a header, filters, an editor and a live summary. The center uses the space left by the other regions."
+        },
+        {
+          "key": "l02",
+          "folder": "02_nested",
+          "title": "Nested borders and layout designs",
+          "description": "An outer workspace contains another independent borderContainer. This separates application navigation from the editor and its output."
+        },
+        {
+          "key": "l03",
+          "folder": "03_rounded",
+          "title": "Rounded borders and popups",
+          "description": "Two nested containers share a reactive corner radius, while date and choice popups open inside the editor."
+        },
+        {
+          "key": "l04",
+          "folder": "04_drawer_handles",
+          "title": "Drawers: handles, content and retained Data",
+          "description": "Four drawers surround one customer workspace. Each contains useful controls or shared output, so closing a pane has a visible purpose."
+        },
+        {
+          "key": "l05",
+          "folder": "05_nested_lab",
+          "title": "Nested regions playground",
+          "description": "A small application workspace built from five nested containers. Size controls let you inspect several levels of layout while real widgets keep working."
+        },
+        {
+          "key": "l06",
+          "folder": "06_border_events",
+          "title": "Border events and controllers",
+          "description": "The example makes container notifications visible as counters and payloads, using ordinary dataController subscriptions."
+        },
+        {
+          "key": "l07",
+          "folder": "07_tabs",
+          "title": "Tabs, selection and closing",
+          "description": "Compare fourteen working tab presentations: styles on four sides, horizontal and vertical alignment, then selection, icons, badges and closing."
+        },
+        {
+          "key": "l08",
+          "folder": "08_stack",
+          "title": "Demo carousel and live preview",
+          "description": "The left drawer browses every other demo as a miniature; the center lets you try the chosen demo at its normal size."
+        }
+      ]
     }
   ]
 }