symbiote-ui 0.3.0-alpha.21 → 0.3.0-alpha.23

package/CHANGELOG.md

@@ -4,6 +4,55 @@ All notable changes to `symbiote-ui` will be documented in this file.
 
 ## Unreleased
 
+## [0.3.0-alpha.23] - 2026-06-08
+
+### Added
+
+- Added reusable base controls and display primitives for rating, segmented
+  selection, native selection controls, sliders, and tooltips.
+- Expanded agent-facing component metadata, Custom Elements output, and
+  discovery coverage for the broader component catalog.
+- Added segmented browser smoke execution so visual/layout scenarios run as
+  independent release gates.
+
+### Changed
+
+- Hardened reusable buttons, fields, list items, tables, menus, project tabs,
+  cards, banners, metrics, empty states, and loading overlays with stronger
+  state, ARIA, keyboard, and intent contracts.
+- Synchronized package test execution through the suite runner and lock helper
+  so browser and non-browser tests do not collide.
+
+### Fixed
+
+- Made browser smoke tests require Chrome for Testing, Chromium, or an explicit
+  `CHROME_BIN` instead of silently launching the unsupported macOS Chrome app
+  wrapper.
+- Tightened CDP page readiness checks so browser tests only pass after the
+  expected URL and document body are present.
+
+## [0.3.0-alpha.22] - 2026-06-08
+
+### Added
+
+- Added `canvas-graph` multi-node focus via `fitNodes()`, `flyToNodes()`,
+  and `focusNodes()`, including WebMCP/discovery metadata for
+  `canvas_graph_focus_nodes`.
+- Extended `createGraphViewModeController().focusNode()` with `flatNodeIds` so
+  flat graph demos can fit several visible nodes without drilling into a parent
+  group.
+- Added a main-thread `ForceLayout` fallback so bundled hosts still render
+  `canvas-graph` when the standalone worker file is not served.
+
+### Fixed
+
+- Kept flat graph selection emphasis scoped to the selected node by default so
+  multi-node focus does not fan out repeated pulse waves across every fitted
+  neighbor.
+- Refreshed cached `canvas-graph` drawing colors on `cascade-theme-change` and
+  root/component theme mutations so flat canvas nodes, edges, and backgrounds
+  inherit the active cascade theme without host-local redraw hacks.
+
 ## [0.3.0-alpha.20] - 2026-06-08
 
 ### Changed

package/README.md

@@ -130,7 +130,7 @@ editor.addNode(node);
 let canvas = document.querySelector('node-canvas');
 canvas.setEditor(editor);
 canvas.setPathStyle('pcb');
-canvas.setFlowLayout({ nodeIds: [node.id], direction: 'vertical', scroll: true });
+canvas.applyLayout({ algorithm: 'flow', nodeIds: [node.id], direction: 'vertical', scroll: true });
 
 let graphView = createGraphViewModeController({
   shell: document.querySelector('graph-explorer-shell'),
@@ -138,15 +138,40 @@ let graphView = createGraphViewModeController({
   flatGraph: document.querySelector('canvas-graph'),
   structuredEditor: editor,
   flatModel: {
-    nodes: [{ id: 'generated-view', label: 'Generated view', type: 'data' }],
+    nodes: [
+      { id: 'group/generated', label: 'Generated', type: 'data', children: ['generated-view'] },
+      { id: 'generated-view', label: 'Generated view', type: 'data' },
+    ],
     edges: [],
+    groups: [{ id: 'group/generated', nodeIds: ['generated-view'] }],
   },
 });
 
 graphView.setMode(new URLSearchParams(location.search).get('mode'));
-graphView.focusNode({ nodeId: 'generated-view' });
+graphView.focusNode({ nodeId: 'generated-view', flatNodeIds: ['generated-view'] });
 ```
 
+For flat overview demos, keep the nodes that should be visible together at the
+root of the `canvas-graph` model and pass `flatNodeIds` to
+`focusNode()`. The older `flatNodeId` field focuses a single node and may enter
+that node's parent group when the model is hierarchical. Focus changes in flat
+mode queue the next active node through the graph deactivation cycle, and
+`canvas-graph` renders a small route marker along the available node links so
+the viewer keeps visual continuity between selections.
+
+Semantic overview groups can be declared with top-level `groups`, `node.children`,
+`node.parentId`, or `node.group`. `canvas-graph` normalizes those groups, passes
+them into the force layout, and derives group gravity weights from group size,
+link density, and cross-group links. Hosts should provide the semantic model, not
+product-local physics constants.
+
+`node-canvas.applyLayout()` is the agent-facing layout entrypoint. Use
+`algorithm: 'auto'` for grouped graph auto-layout, `algorithm: 'tree'` for
+structured directory/tree layouts, and `algorithm: 'flow'` for document-like
+previews. Flat graph seed positions from `computeInitialGraphPositions()` are
+stable by default; pass `random: Math.random` only when a non-deterministic demo
+is intentional.
+
 `panel-layout` owns reusable split and panel behavior only. Product routes,
 transport, persistence, and permission checks remain host policy:
 
@@ -319,6 +344,31 @@ host closes or removes UI-invoked panels. Hosts should pass `allowedMethods` or
 `allowMethod()` when applying agent-authored `state.methods`; use the component
 registry or a project policy allowlist to approve method calls.
 
+## Localization
+
+`symbiote-ui/locale` supports English, Russian, and Spanish catalogs with an
+`auto` mode that resolves browser language preferences by default. Browser hosts
+can use the UI entrypoint helper once during startup and pass product-owned
+messages without reimplementing locale detection:
+
+```js
+import { configureBrowserLocalization, translate } from 'symbiote-ui/ui';
+
+configureBrowserLocalization({
+  messages: {
+    ru: { 'app.title': 'Проект' },
+    es: { 'app.title': 'Proyecto' },
+    en: { 'app.title': 'Project' },
+  },
+});
+
+document.title = translate('app.title');
+```
+
+Node-safe hosts can call `configureAutoLocalization()` from `symbiote-ui/locale`
+with explicit `preferences` or a supplied `navigator` object. The helper sets
+`document.documentElement.lang` when a document is available.
+
 ## Cascade Theme
 
 `symbiote-ui` exposes a reusable cascade theme contract for agent-built UI, graph canvases, layouts, scrollbars, and VR-ready panels:

package/canvas/AutoLayout.js

@@ -414,7 +414,6 @@ export function computeAutoLayout(editor, options = {}) {
     for (let r = 0; r < maxR; r += step) {
       for (let delta = 0; delta <= M_PI; delta += angularStep) {
         for (const sign of [1, -1]) {
-          cycleCount++;
           let a = prefAngle + delta * sign;
           let x = Math.round(Math.cos(a) * r);
           let y = Math.round(Math.sin(a) * r);