fix(examples): fix missing group buttons in contact form and require explicit CLI args

- Add ensureGroupButtons() to cb-contact-form that reads groups from
  the sidebar when the form is dynamically created (not SSR'd), fixing
  the empty group selector in Add/Edit Contact views
- Remove hello-world fallback defaults from electron and node
  integrations; both now require explicit dist-dir and state path
  args, printing usage on missing args
- Remove electron dependency from contact-book-manager; Electron is
  launched from integration/electron by passing app dist/state paths
- Update READMEs to reflect required args and removed electron section

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: mohamedmansour

examples/app/contact-book-manager/README.md

@@ -136,9 +136,6 @@ contact-book-manager/
     │   ├── cb-contact-list/          # Scrollable contact list
     │   ├── cb-header/                # Sticky top bar
     │   └── cb-sidebar/               # Left navigation panel
-    └── electron/                     # Optional Electron wrapper
-        ├── main.ts
-        └── preload.ts
 ```
 
 ## Component Catalog
@@ -193,15 +190,3 @@ Components with multiple action buttons (e.g., `<cb-contact-detail>`) use a sing
 
 - **Desktop (≥768px):** Fixed sidebar (260px) + scrollable main content area
 - **Mobile (<768px):** Sidebar hidden, single-column layout, "Add Contact" button label hidden (icon only)
-
-## Electron (Optional)
-
-The `src/electron/` directory contains an optional desktop wrapper. It uses the `webui-node` native addon to render `protocol.bin` + `state.json` into HTML, then serves it via a custom `webui://` protocol scheme inside an Electron `BrowserWindow`.
-
-To use it, build the native addon first:
-
-```bash
-cargo build -p webui-node --release
-```
-
-The Electron entry point is not part of the standard web build — it is an alternative deployment target that reuses the same SSR binary and client JS bundle.

examples/app/contact-book-manager/package.json

@@ -10,7 +10,7 @@
     "start:client": "esbuild src/index.ts --bundle --outfile=dist/index.js --format=esm --sourcemap --watch",
     "start:server": "cargo run -p webui-cli -- start ./src --state ./data/state.json --plugin=fast --servedir ./dist --port 3001",
     "start": "cargo xtask dev contact-book-manager"
-  },
+   },
   "devDependencies": {
     "@microsoft/fast-element": "catalog:",
     "@microsoft/fast-html": "catalog:",

examples/app/contact-book-manager/src/organisms/cb-contact-form/cb-contact-form.ts

@@ -25,6 +25,10 @@ export class CbContactForm extends RenderableFASTElement(FASTElement) {
     this.addEventListener('click', (e: Event) => {
       this.onClick(e as MouseEvent);
     });
+
+    // When the form is dynamically created (not SSR'd), the <for> loop
+    // for groups produces no buttons. Ensure they exist after first render.
+    requestAnimationFrame(() => this.ensureGroupButtons());
   }
 
   async prepare(): Promise<void> {
@@ -37,6 +41,47 @@ export class CbContactForm extends RenderableFASTElement(FASTElement) {
     this.selectedGroup = this.group || (groups.length > 0 ? groups[0] : '');
   }
 
+  private ensureGroupButtons(): void {
+    const sr = this.shadowRoot;
+    if (!sr) return;
+
+    const existing = sr.querySelectorAll('.group-option');
+    if (existing.length > 0) return;
+
+    // Read groups from the sidebar (always SSR'd with group nav items)
+    const hostRoot = this.getRootNode() as ShadowRoot;
+    const app = hostRoot?.host;
+    const sidebar = app?.shadowRoot?.querySelector('cb-sidebar');
+    const navItems = sidebar?.shadowRoot?.querySelectorAll('.nav-item[data-nav]') || [];
+    const groups: string[] = [];
+    for (const el of navItems) {
+      const label = (el as HTMLElement).getAttribute('data-nav') || '';
+      if (!['Dashboard', 'All Contacts', 'Favorites'].includes(label) && label) {
+        groups.push(label);
+      }
+    }
+
+    if (groups.length === 0) return;
+
+    const selector = sr.querySelector('.group-selector');
+    if (!selector) return;
+
+    for (const g of groups) {
+      const btn = document.createElement('button');
+      btn.className = 'group-option';
+      btn.setAttribute('data-group', g);
+      btn.textContent = g;
+      selector.appendChild(btn);
+    }
+
+    formGroupsStore.set(this, groups);
+    this.selectedGroup = this.group || groups[0] || '';
+
+    for (const btn of selector.querySelectorAll('.group-option')) {
+      btn.classList.toggle('active', btn.getAttribute('data-group') === this.selectedGroup);
+    }
+  }
+
   onClick(e: MouseEvent): void {
     const target = e.composedPath()[0] as HTMLElement;
     const action = target.closest('[data-action]')?.getAttribute('data-action');

examples/integration/electron/README.md

@@ -19,26 +19,18 @@ esbuild ../../app/hello-world/src/index.ts --bundle --outfile=../../app/hello-wo
 
 ## Usage
 
-Run with the default hello-world app:
-
-```bash
-pnpm start
-```
-
-Or point to any other WebUI app:
-
 ```bash
 # hello-world
-electron dist/main.js ../../app/hello-world/dist ../../app/hello-world/data/state.json --plugin=fast
+pnpm start ../../app/hello-world/dist ../../app/hello-world/data/state.json --plugin=fast
 
 # contact-book-manager
-electron dist/main.js ../../app/contact-book-manager/dist ../../app/contact-book-manager/data/state.json --plugin=fast
+pnpm start ../../app/contact-book-manager/dist ../../app/contact-book-manager/data/state.json --plugin=fast
 ```
 
 ## CLI Arguments
 
-| Argument | Description | Default |
-|---|---|---|
-| `dist-dir` | Path to the app's `dist/` directory containing `protocol.bin` and CSS/JS assets | `../../app/hello-world/dist` |
-| `state.json` | Path to the state JSON file | `../../app/hello-world/data/state.json` |
-| `--plugin=fast` | Enable FAST hydration plugin | _(disabled)_ |
+| Argument | Description |
+|---|---|
+| `dist-dir` | **(required)** Path to the app's `dist/` directory containing `protocol.bin` and CSS/JS assets |
+| `state.json` | **(required)** Path to the state JSON file |
+| `--plugin=fast` | Enable FAST hydration plugin _(optional)_ |

examples/integration/electron/main.ts

@@ -25,8 +25,15 @@ const args = process.argv.slice(2).filter(a => !a.startsWith('--inspect'));
 const positional = args.filter(a => !a.startsWith('--'));
 const flags = args.filter(a => a.startsWith('--'));
 
-const distDir = resolve(positional[0] || join(import.meta.dirname, '..', '..', 'app', 'hello-world', 'dist'));
-const statePath = resolve(positional[1] || join(import.meta.dirname, '..', '..', 'app', 'hello-world', 'data', 'state.json'));
+if (positional.length < 2) {
+  console.error('Usage: electron dist/main.js <dist-dir> <state.json> [--plugin=fast]');
+  console.error('  dist-dir    Path to the app dist/ directory containing protocol.bin');
+  console.error('  state.json  Path to the JSON state file');
+  process.exit(1);
+}
+
+const distDir = resolve(positional[0]);
+const statePath = resolve(positional[1]);
 
 const pluginArg = flags.find(a => a.startsWith('--plugin='));
 const pluginName = pluginArg ? pluginArg.split('=')[1] : undefined;
@@ -36,7 +43,7 @@ const pluginName = pluginArg ? pluginArg.split('=')[1] : undefined;
 // ---------------------------------------------------------------------------
 
 function loadAddon() {
-  const root = resolve(import.meta.dirname, '..', '..', '..');
+  const root = resolve(import.meta.dirname, '..', '..', '..', '..');
   const ext = platform() === 'darwin' ? 'dylib' : platform() === 'win32' ? 'dll' : 'so';
   const prefix = platform() === 'win32' ? '' : 'lib';
   const filename = `${prefix}webui_node.${ext}`;

examples/integration/electron/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "build": "esbuild main.ts preload.ts --outdir=dist --platform=node --format=esm",
-    "start": "npm run build && electron dist/main.js"
+    "start": "npm run build && electron dist/main.js --"
   },
   "devDependencies": {
     "electron": "catalog:",

examples/integration/node/index.js

@@ -40,9 +40,15 @@ function loadAddon() {
   );
 }
 
-const protocolPath =
-  process.argv[2] || "../../app/hello-world/dist/protocol.bin";
-const statePath = process.argv[3] || "../../app/hello-world/data/state.json";
+if (!process.argv[2] || !process.argv[3]) {
+  console.error("Usage: node index.js <protocol.bin> <state.json> [--plugin=fast]");
+  console.error("  protocol.bin  Path to the compiled protocol binary");
+  console.error("  state.json    Path to the JSON state file");
+  process.exit(1);
+}
+
+const protocolPath = process.argv[2];
+const statePath = process.argv[3];
 
 // Check for --plugin=fast flag
 const pluginArg = process.argv.find((a) => a.startsWith("--plugin="));