@gjsify/example-dom-three-geometry-teapot 0.55.0 → 0.56.0

package/dist/index.html

@@ -4,7 +4,6 @@
   <meta charset="utf-8" />
   <title>Three.js Teapot — gjsify</title>
   <link rel="stylesheet" href="./webgl.css" type="text/css" />
-  <link rel="stylesheet" href="./browser.css" type="text/css" />
   <script src="./browser.js" type="module" defer></script>
 </head>
 <body></body>

package/dist/webgl.css

@@ -14,7 +14,7 @@ html, body {
     justify-content: center;
 }
 
-adw-window {
+adw-application-window {
     max-width: 100%;
     max-height: 100%;
 }
@@ -38,13 +38,13 @@ adw-window {
     gap: 12px;
 }
 
-#gl-area-container {
+#glAreaContainer {
     flex: 1;
     position: relative;
     min-width: 0;
 }
 
-#gl-area-container canvas {
+#glAreaContainer canvas {
     display: block;
     width: 100%;
     height: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gjsify/example-dom-three-geometry-teapot",
-  "version": "0.55.0",
+  "version": "0.56.0",
   "description": "Three.js geometry teapot example ported from refs/three/examples/webgl_geometry_teapot.html with Adwaita controls",
   "main": "dist/gjs.js",
   "type": "module",
@@ -27,7 +27,7 @@
     "build:assets": "gjsify copy src/browser/index.html src/browser/webgl.css src/assets dist/"
   },
   "dependencies": {
-    "@gjsify/webgl": "^0.55.0"
+    "@gjsify/webgl": "^0.56.0"
   },
   "devDependencies": {
     "@girs/adw-1": "5.4.0",
@@ -35,12 +35,12 @@
     "@girs/gjs": "5.4.0",
     "@girs/gobject-2.0": "5.4.0",
     "@girs/gtk-4.0": "5.4.0",
-    "@gjsify/adwaita-icons": "^0.55.0",
-    "@gjsify/adwaita-web": "^0.55.0",
-    "@gjsify/cli": "^0.55.0",
-    "@gjsify/devtools": "^0.55.0",
+    "@gjsify/adwaita-icons": "^0.56.0",
+    "@gjsify/adwaita-web": "^0.56.0",
+    "@gjsify/cli": "^0.56.0",
+    "@gjsify/devtools": "^0.56.0",
     "@gjsify/node-gi": "file:../../../packages/node-gi/node-gi",
-    "@gjsify/vite-plugin-blueprint": "^0.55.0",
+    "@gjsify/vite-plugin-blueprint": "^0.56.0",
     "@types/node": "^25.9.2",
     "@types/three": "^0.185.0",
     "http-server": "^14.1.1",

package/src/browser/browser.ts

@@ -1,15 +1,16 @@
 // Browser UI for three-geometry-teapot example.
-// Mirrors the GJS/Adwaita UI from gjs/teapot-window.ts using @gjsify/adwaita-web.
+// The widget tree is the GJS window's own `teapot-window.blp`, projected and mounted by
+// @gjsify/adwaita-web — one authored file, so the sidebar toggle, the `bind`s between the toggle
+// and the split view and the two `[breakpoint]`s cannot drift from the GTK build.
 
-import '@gjsify/adwaita-web'; // registers the custom elements + self-injects the stylesheet
+import { mountSharedTree } from '@gjsify/adwaita-web'; // also registers the custom elements + self-injects the stylesheet
 // A showcase is served to whatever browser opens it, so it cannot assume the host has
 // Adwaita Sans the way a GNOME desktop does. `import '@gjsify/adwaita-web'` names the
 // family and ships no `@font-face`, so without this call the chrome renders in the host's
 // default sans on macOS, on Windows and on any Linux that is not GNOME — and looks right
 // only on the machine it was written on.
 import { applyAdwaitaFonts } from '@gjsify/adwaita-web/fonts';
-import type { Adw } from '@gjsify/adwaita-web';
-import { mediaPlaybackPauseSymbolic, mediaPlaybackStartSymbolic } from '@gjsify/adwaita-icons/actions';
+import tree from '../gjs/teapot-window.blp?shared-tree';
 import {
     start,
     TESS_VALUES,
@@ -35,91 +36,42 @@ export interface ShowcaseHandle {
     readonly isPaused: boolean;
 }
 
-/** Parse a trusted literal SVG string into an SVGElement. */
-function parseSvg(svgSource: string): SVGElement {
-    const doc = new DOMParser().parseFromString(svgSource, 'image/svg+xml');
-    return doc.documentElement as unknown as SVGElement;
-}
-
-/** Replace a button's icon with a freshly-parsed copy of the given SVG source. */
-function setButtonIcon(btn: HTMLButtonElement, svgSource: string): void {
-    btn.replaceChildren(parseSvg(svgSource));
+/** The one element of the mounted tree with this authored id. */
+function byId(root: HTMLElement, id: string): HTMLElement {
+    const el = root.querySelector<HTMLElement>(`#${id}`);
+    if (el === null) throw new Error(`teapot-window.blp declares no object with the id "${id}"`);
+    return el;
 }
 
 /**
- * Mounts an adw-window with sidebar controls and a WebGL canvas into `container`.
+ * Mounts the teapot window's shared tree into `container`.
+ *
+ * The two combo rows' models are not in the tree: on GTK they are `Gtk.StringList`s the window's
+ * TypeScript builds (`teapot-window.ts`), and Blueprint has no spelling for a list model here. The
+ * browser reads the same `TESS_VALUES` / `SHADING_VALUES` / `DEFAULT_*_INDEX` from `three-demo.ts`
+ * and writes them onto the rows, so the lists themselves have one source; only the wiring is copied.
  */
 export function mount(container: HTMLElement, options?: MountOptions): ShowcaseHandle {
-    const win = document.createElement('adw-window');
-    win.setAttribute('width', '1100');
-    win.setAttribute('height', '700');
-
-    const headerBar = document.createElement('adw-header-bar') as Adw.HeaderBar;
-    headerBar.setAttribute('title', 'Three.js Teapot');
-
-    const toggleBtn = document.createElement('button');
-    toggleBtn.className = 'adw-header-btn adw-sidebar-toggle-icon active';
-    toggleBtn.title = 'Toggle Sidebar';
-
-    const pauseBtn = document.createElement('button');
-    pauseBtn.className = 'adw-header-btn';
-    pauseBtn.title = 'Pause Rendering';
-    setButtonIcon(pauseBtn, mediaPlaybackPauseSymbolic);
-
-    const splitView = document.createElement('adw-overlay-split-view') as Adw.OverlaySplitView;
-    splitView.setAttribute('min-sidebar-width', '280');
-    splitView.setAttribute('max-sidebar-width', '400');
-    splitView.setAttribute('sidebar-width-fraction', '0.30');
-    splitView.setAttribute('show-sidebar', '');
-
-    const sidebarContent = document.createElement('div');
-    sidebarContent.setAttribute('slot', 'sidebar');
-    sidebarContent.className = 'adw-sidebar-content';
-
-    const geoGroup = document.createElement('adw-preferences-group');
-    geoGroup.setAttribute('title', 'Geometry');
-
-    const tessRow = document.createElement('adw-combo-row');
-    tessRow.setAttribute('title', 'Tessellation Level');
-    tessRow.setAttribute('items', JSON.stringify(TESS_VALUES.map(String)));
-    tessRow.setAttribute('selected', String(DEFAULT_TESS_INDEX));
-
-    const lidRow = document.createElement('adw-switch-row');
-    lidRow.setAttribute('title', 'Display Lid');
-    lidRow.setAttribute('active', '');
-
-    const bodyRow = document.createElement('adw-switch-row');
-    bodyRow.setAttribute('title', 'Display Body');
-    bodyRow.setAttribute('active', '');
-
-    const bottomRow = document.createElement('adw-switch-row');
-    bottomRow.setAttribute('title', 'Display Bottom');
-    bottomRow.setAttribute('active', '');
-
-    const fitLidRow = document.createElement('adw-switch-row');
-    fitLidRow.setAttribute('title', 'Snug Lid');
-
-    const nonblinnRow = document.createElement('adw-switch-row');
-    nonblinnRow.setAttribute('title', 'Original Scale');
-
-    geoGroup.append(tessRow, lidRow, bodyRow, bottomRow, fitLidRow, nonblinnRow);
-
-    const matGroup = document.createElement('adw-preferences-group');
-    matGroup.setAttribute('title', 'Material');
-
-    const shadingRow = document.createElement('adw-combo-row');
-    shadingRow.setAttribute('title', 'Shading');
-    shadingRow.setAttribute('items', JSON.stringify([...SHADING_VALUES]));
-    shadingRow.setAttribute('selected', String(DEFAULT_SHADING_INDEX));
-
-    matGroup.append(shadingRow);
-
-    sidebarContent.append(geoGroup, matGroup);
+    const { root: win } = mountSharedTree(tree, { into: container });
+
+    const tessRow = byId(win, 'tessRow');
+    const shadingRow = byId(win, 'shadingRow');
+    for (const [row, values, selected] of [
+        [tessRow, TESS_VALUES.map(String), DEFAULT_TESS_INDEX],
+        [shadingRow, [...SHADING_VALUES], DEFAULT_SHADING_INDEX],
+    ] as const) {
+        row.setAttribute('model', JSON.stringify(values));
+        row.setAttribute('selected', String(selected));
+    }
+    const lidRow = byId(win, 'lidRow');
+    const bodyRow = byId(win, 'bodyRow');
+    const bottomRow = byId(win, 'bottomRow');
+    const fitLidRow = byId(win, 'fitLidRow');
+    const nonblinnRow = byId(win, 'nonblinnRow');
+    const pauseBtn = byId(win, 'pauseButton');
 
     // Inline styles so the layout holds in the website embed too, which loads no showcase CSS.
-    const glContainer = document.createElement('div');
-    glContainer.setAttribute('slot', 'content');
-    glContainer.id = 'gl-area-container';
+    const glContainer = byId(win, 'glAreaContainer');
     glContainer.style.cssText = 'flex:1;position:relative;min-width:0;min-height:0';
 
     const canvas = document.createElement('canvas');
@@ -127,45 +79,6 @@ export function mount(container: HTMLElement, options?: MountOptions): ShowcaseH
     canvas.style.cssText = 'display:block;width:100%;height:100%;position:absolute;inset:0';
     glContainer.append(canvas);
 
-    splitView.append(sidebarContent, glContainer);
-    win.append(headerBar, splitView);
-    container.append(win);
-
-    // AFTER DOM connection: connectedCallback is what creates the header-bar-start wrapper.
-    const startSection = headerBar.startSection ?? headerBar.querySelector('.adw-header-bar-start');
-    if (startSection) {
-        startSection.appendChild(toggleBtn);
-    } else {
-        headerBar.prepend(toggleBtn);
-    }
-
-    const endSection = headerBar.endSection ?? headerBar.querySelector('.adw-header-bar-end');
-    if (endSection) {
-        endSection.appendChild(pauseBtn);
-    } else {
-        headerBar.append(pauseBtn);
-    }
-
-    toggleBtn.addEventListener('click', () => {
-        splitView.toggleSidebar();
-        toggleBtn.classList.toggle('active', splitView.showSidebar);
-    });
-
-    splitView.addEventListener('sidebar-toggled', () => {
-        toggleBtn.classList.toggle('active', splitView.showSidebar);
-    });
-
-    let lastCollapsed: boolean | null = null;
-    new ResizeObserver(([entry]) => {
-        const width = entry.contentRect.width;
-        const shouldCollapse = width < 800;
-        if (shouldCollapse === lastCollapsed) return;
-        lastCollapsed = shouldCollapse;
-        splitView.collapsed = shouldCollapse;
-        splitView.showSidebar = !shouldCollapse;
-        toggleBtn.classList.toggle('active', !shouldCollapse);
-    }).observe(win);
-
     // Also covers a slide becoming visible after `display: none`, which reports a size for the first
     // time.
     canvas.width = glContainer.clientWidth;
@@ -203,8 +116,8 @@ export function mount(container: HTMLElement, options?: MountOptions): ShowcaseH
     }).observe(glContainer);
 
     function updatePauseButton(paused: boolean): void {
-        setButtonIcon(pauseBtn, paused ? mediaPlaybackStartSymbolic : mediaPlaybackPauseSymbolic);
-        pauseBtn.title = paused ? 'Resume Rendering' : 'Pause Rendering';
+        pauseBtn.setAttribute('icon-name', paused ? 'media-playback-start-symbolic' : 'media-playback-pause-symbolic');
+        pauseBtn.setAttribute('tooltip-text', paused ? 'Resume Rendering' : 'Pause Rendering');
     }
     pauseBtn.addEventListener('click', () => {
         if (demo) {

package/src/browser/index.html

@@ -4,7 +4,6 @@
   <meta charset="utf-8" />
   <title>Three.js Teapot — gjsify</title>
   <link rel="stylesheet" href="./webgl.css" type="text/css" />
-  <link rel="stylesheet" href="./browser.css" type="text/css" />
   <script src="./browser.js" type="module" defer></script>
 </head>
 <body></body>

package/src/browser/webgl.css

@@ -14,7 +14,7 @@ html, body {
     justify-content: center;
 }
 
-adw-window {
+adw-application-window {
     max-width: 100%;
     max-height: 100%;
 }
@@ -38,13 +38,13 @@ adw-window {
     gap: 12px;
 }
 
-#gl-area-container {
+#glAreaContainer {
     flex: 1;
     position: relative;
     min-width: 0;
 }
 
-#gl-area-container canvas {
+#glAreaContainer canvas {
     display: block;
     width: 100%;
     height: 100%;