@adukiorg/anza 0.4.2 → 0.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adukiorg/anza",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "Anza web platform library — reactive state, networking, offline, animations, custom elements. Instant build step. Pure browser ESM.",
   "author": "fescii",
   "license": "MIT",

package/src/core/router/cascade.js

@@ -59,12 +59,22 @@ export async function ensure(target, current = 'main') {
     if (resolve(node.name)) continue;
     const parentEl = node.parent?.ref?.deref() ?? null;
     if (!parentEl || !parentEl.isConnected) throw new Error(`CascadeError: parent '${node.parent?.name}' is disconnected while mounting '${node.name}'`);
-    const tag = node.name;
+    const tag = node.tag;
     if (tag.includes('-') && typeof customElements !== 'undefined' && !customElements.get(tag)) await customElements.whenDefined(tag);
     const el = document.createElement(tag);
     parentEl.replaceChildren(el);
-    await frame();
-    if (!resolve(node.name)) throw new Error(`CascadeError: container '${node.name}' failed to register after mount`);
+
+    // Wait for the element's connectedCallback to complete, including any
+    // async resource loading (template/style fetches). A single frame is
+    // not sufficient when preloadResources() hits the network.
+    let attempts = 0;
+    while (!resolve(node.name) && attempts < 50) {
+      await frame();
+      attempts++;
+    }
+    if (!resolve(node.name)) {
+      throw new Error(`CascadeError: container '${node.name}' failed to register after mount`);
+    }
   }
 
   return resolve(target);

package/src/core/router/container.js

@@ -62,8 +62,8 @@ function ensureObserver() {
  * @param {string|null} [parent='main'] - parent container key in the graph.
  *   Pass null explicitly when registering the root (no parent).
  */
-export function registerContainer(name, element, parent = 'main') {
-  add(name, element, parent);
+export function registerContainer(name, element, parent = 'main', tag = null) {
+  add(name, element, parent, tag);
 }
 
 /**

package/src/core/router/graph.js

@@ -14,8 +14,9 @@
  */
 
 class Node {
-  constructor(name, ref, parent) {
+  constructor(name, tag, ref, parent) {
     this.name = name;            // registry key, e.g. 'main' | 'sidebar'
+    this.tag = tag;              // custom element tag, e.g. 'dock-docs' | 'main'
     this.ref = ref;              // WeakRef<Element> | null (null for virtual root)
     this.parent = parent;        // Node | null
     this.children = new Set();   // Set<Node>
@@ -33,7 +34,7 @@ const nodes = new Map();
 // The permanent root node. ref is null at module-evaluation time because
 // modules may be evaluated before the parser reaches <main id="main">.
 // boot.js fills in the WeakRef during anchor().
-const root = new Node('main', null, null);
+const root = new Node('main', 'main', null, null);
 root.depth = 0;
 nodes.set('main', root);
 
@@ -76,9 +77,10 @@ function detach(name) {
  * @param {string} name - unique registry key.
  * @param {Element} el - the container element.
  * @param {string} [parent='main'] - parent registry key.
+ * @param {string} [tag] - custom element tag; defaults to name.
  * @returns {Node} the inserted node.
  */
-export function add(name, el, parent = 'main') {
+export function add(name, el, parent = 'main', tag = null) {
   gone.delete(name);
 
   const existing = nodes.get(name);
@@ -103,7 +105,8 @@ export function add(name, el, parent = 'main') {
   }
 
   const parentNode = nodes.get(parent) ?? root;
-  const node = new Node(name, el ? new WeakRef(el) : null, parentNode);
+  const resolvedTag = tag || name;
+  const node = new Node(name, resolvedTag, el ? new WeakRef(el) : null, parentNode);
   parentNode.children.add(node);
   nodes.set(name, node);
   if (el) finalizer.register(el, name);

package/src/core/router/intercept.js

@@ -16,7 +16,6 @@ import { getContainer } from './container.js';
 import { get as graphGet } from './graph.js';
 import { match } from './match.js';
 import { specRegistry } from '../ui/define/state.js';
-import { transitions } from './transitions.js';
 
 /**
  * Built-in minimal 404 HTML rendered when no user notfound is configured.
@@ -241,39 +240,37 @@ async function pipe(event, precommitted) {
     }
   }
 
-  await transitions.run(async () => {
-    if (routeMatch) {
-      if (isCallback(routeMatch.route.handler)) {
-        try {
-          await runCallback(routeMatch.route.handler, routeMatch.params, event);
-        } catch (err) {
-          emit('error', { error: err, url: destination.url, route: routeMatch.route, phase: 'handler' });
-          return;
-        }
+  if (routeMatch) {
+    if (isCallback(routeMatch.route.handler)) {
+      try {
+        await runCallback(routeMatch.route.handler, routeMatch.params, event);
+      } catch (err) {
+        emit('error', { error: err, url: destination.url, route: routeMatch.route, phase: 'handler' });
+        return;
       }
+    }
 
-      const ctx = buildRouteContext(routeMatch.tag, routeMatch.params, destination.url);
-      emit('found', {
-        tag: routeMatch.tag,
-        params: ctx.params,
-        query: ctx.query,
-        raw: ctx.raw,
-        hash: routeMatch.hash,
-        chain: routeMatch.chain,
-        via: chain,
-        container: chain.at(-1) ?? null,
-        url: destination.url,
-        direction: event.navigationType
-      });
+    const ctx = buildRouteContext(routeMatch.tag, routeMatch.params, destination.url);
+    emit('found', {
+      tag: routeMatch.tag,
+      params: ctx.params,
+      query: ctx.query,
+      raw: ctx.raw,
+      hash: routeMatch.hash,
+      chain: routeMatch.chain,
+      via: chain,
+      container: chain.at(-1) ?? null,
+      url: destination.url,
+      direction: event.navigationType
+    });
+  } else {
+    emit('notfound', { url: destination.url });
+    if (notFoundHandler) {
+      await notFoundHandler(event);
     } else {
-      emit('notfound', { url: destination.url });
-      if (notFoundHandler) {
-        await notFoundHandler(event);
-      } else {
-        renderNotFound('main');
-      }
+      renderNotFound('main');
     }
-  });
+  }
 }
 
 /**

package/src/core/router/transitions.js

@@ -21,12 +21,13 @@ function injectSheet() {
   try {
     const sheet = new CSSStyleSheet();
     sheet.replaceSync(`
-      ::view-transition-group(root) {
+      /* Dock-swap group: element-scoped content transitions */
+      ::view-transition-group(dock-swap) {
         animation-duration: var(--transition-duration);
         animation-timing-function: var(--transition-easing);
       }
-      ::view-transition-old(root),
-      ::view-transition-new(root) {
+      ::view-transition-old(dock-swap),
+      ::view-transition-new(dock-swap) {
         animation-duration: var(--transition-duration);
         animation-timing-function: var(--transition-easing);
         background: var(--transition-bg);

package/src/core/ui/define/container.js

@@ -53,7 +53,9 @@ export function container(tag, spec, base = import.meta.url) {
         delete this.dataset.transitionDirection;
       };
 
-      // Strategy 1: Element-scoped transition (Chrome 147+, concurrent-safe)
+      // Only use element-scoped view transitions. Document-level
+      // startViewTransition() captures the entire page and causes
+      // chrome flicker — never use it as a fallback.
       if (typeof this.startViewTransition === 'function') {
         try {
           const vt = this.startViewTransition(doSwap);
@@ -64,18 +66,6 @@ export function container(tag, spec, base = import.meta.url) {
         return;
       }
 
-      // Strategy 2: Document-scoped transition (Baseline Oct 2025)
-      if (typeof document.startViewTransition === 'function') {
-        try {
-          const vt = document.startViewTransition(doSwap);
-          await vt.ready;
-        } catch (err) {
-          if (err?.name !== 'AbortError') console.warn('[UI Container] Document VT aborted:', err);
-        }
-        return;
-      }
-
-      // Strategy 3: Synchronous direct swap
       doSwap();
     };
   }

package/src/core/ui/defs/dock.js

@@ -34,7 +34,7 @@ export function dock(name, config = {}, base) {
   const parent = config.parent ?? 'main';
 
   // Statically register the layout container in the graph with a null element
-  router.registerContainer(name, null, parent);
+  router.registerContainer(name, null, parent, tag);
 
   const spec = translate(config);
 
@@ -51,7 +51,7 @@ export function dock(name, config = {}, base) {
   // user-supplied connect/disconnect rather than clobbering them.
   const userMount = spec.mount;
   spec.mount = (ctx) => {
-    router.registerContainer(name, ctx.el, parent);
+    router.registerContainer(name, ctx.el, parent, tag);
     return userMount?.(ctx);
   };
   const userUnmount = spec.unmount;
@@ -121,26 +121,22 @@ async function swap(el, options = {}) {
     }
   }
 
+  // Only use element-scoped view transitions. If the browser doesn't support
+  // this.startViewTransition (Chrome < 147), fall back to a direct synchronous
+  // swap. Document-level startViewTransition() captures the entire page and
+  // causes the sidebar/header to flicker — we never want that.
   if (typeof this.startViewTransition === 'function') {
     try {
+      // Assign a named view-transition so CSS can target this element's
+      // group explicitly, keeping the root group stable.
+      this.style.viewTransitionName = 'dock-swap';
       this._tx = this.startViewTransition(go);
       await this._tx.finished;
     } catch (err) {
       if (err?.name !== 'AbortError') console.warn('[Native UI] dock scoped VT aborted:', err);
     } finally {
       this._tx = null;
-      restore();
-    }
-    return;
-  }
-
-  if (typeof document !== 'undefined' && typeof document.startViewTransition === 'function') {
-    try {
-      const vt = document.startViewTransition(go);
-      await vt.finished;
-    } catch (err) {
-      if (err?.name !== 'AbortError') console.warn('[Native UI] dock document VT aborted:', err);
-    } finally {
+      this.style.viewTransitionName = '';
       restore();
     }
     return;

package/src/styles/reset.css

@@ -11,8 +11,6 @@
   *::before,
   *::after {
     box-sizing: border-box;
-    margin: 0;
-    padding: 0;
   }
 
   html,

package/src/tokens/semantic/transitions.css

@@ -2,6 +2,10 @@
  * tokens/semantic/transitions.css
  *
  * View Transition pseudo-element mapping and layout swap animations.
+ *
+ * Docks use element-scoped view transitions via this.startViewTransition().
+ * The transitioned element gets viewTransitionName='dock-swap'.
+ * Never target (root) — that animates the stable chrome (sidebar, header).
  */
 
 :root {
@@ -14,10 +18,10 @@
   --transition-bg: var(--color-surface-page);
 }
 
-::view-transition-old(root) {
+::view-transition-old(dock-swap) {
   animation: 90ms ease-in both fade-out;
 }
-::view-transition-new(root) {
+::view-transition-new(dock-swap) {
   animation: var(--transition-duration) var(--transition-easing) both slide-in;
 }
 
@@ -34,9 +38,8 @@
     --transition-duration: 0ms;
     --transition-easing: linear;
   }
-  ::view-transition-old(root),
-  ::view-transition-new(root) {
+  ::view-transition-old(dock-swap),
+  ::view-transition-new(dock-swap) {
     animation: none !important;
   }
 }
-