@adukiorg/anza 0.3.8 → 0.4.0

package/CHANGELOG.md

@@ -17,6 +17,26 @@ Versioning follows [Semantic Versioning](https://semver.org/).
 
 ---
 
+## [0.4.0] — 2026-06-14
+
+### Added
+
+- Natively support arrays of multiple CSS imports in component definitions (`template: { html, css: ['./a.css', './b.css'] }`) across both the JavaScript library runtime and the Rust compiler.
+
+### Changed
+
+- Replaced CSS Custom Highlight API implementation with PrismJS for `view-code` syntax highlighting.
+
+---
+
+## [0.3.9] — 2026-06-13
+
+### Changed
+
+- Updated core component rendering to correctly process nested syntax logic and perform full syntax highlighting.
+
+---
+
 ## [0.3.7] — 2026-06-13
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adukiorg/anza",
-  "version": "0.3.8",
+  "version": "0.4.0",
   "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/ui/define/element.js

@@ -1,7 +1,7 @@
 import { BaseElement } from '../base.js';
 import { scheduleFrame, yieldTask } from '../schedule.js';
 import { router } from '../../router/index.js';
-import { specRegistry, internalsMap, initializedMap, pendingUpdatesMap, updateScheduledMap } from './state.js';
+import { specRegistry, internalsMap, initializedMap, pendingUpdatesMap, updateScheduledMap, assetCache } from './state.js';
 import { preloadResources } from './utils.js';
 import { createComponentContext } from './proxy.js';
 
@@ -50,40 +50,74 @@ export function element(tag, spec, base) {
   warnMissingBase(tag, 'template', spec.template, base);
 
   // Resolve absolute URLs relative to import.meta.url (base)
-  const styleUrl = spec.style && base && (spec.style.endsWith('.css') || spec.style.startsWith('./') || spec.style.startsWith('/'))
-    ? new URL(spec.style, base).href
-    : null;
+  const styleUrls = Array.isArray(spec.style) 
+    ? spec.style.filter(s => s && base && (s.endsWith('.css') || s.startsWith('./') || s.startsWith('/'))).map(s => new URL(s, base).href)
+    : (spec.style && base && (spec.style.endsWith('.css') || spec.style.startsWith('./') || spec.style.startsWith('/'))
+      ? [new URL(spec.style, base).href]
+      : []);
+      
   const templateUrl = spec.template && base && (spec.template.endsWith('.html') || spec.template.startsWith('./') || spec.template.startsWith('/'))
     ? new URL(spec.template, base).href
     : null;
 
   // Initiate resource fetching exactly once per component registration (R-06)
   let resolved = null;
-  const resourcesPromise = preloadResources(tag, styleUrl, templateUrl, spec.template, spec.style).then(res => {
+  let resourcesPromise = preloadResources(tag, styleUrls, templateUrl, spec.template, spec.style).then(res => {
     resolved = res;
     return res;
   });
 
   // Handle hot reloading of constructable stylesheets (one global listener per unique styleUrl - R-05)
-  if (styleUrl && typeof window !== 'undefined') {
+  if (styleUrls.length > 0 && typeof window !== 'undefined') {
     if (!window.__native_hmr_listeners__) {
       window.__native_hmr_listeners__ = new Set();
     }
-    if (!window.__native_hmr_listeners__.has(styleUrl)) {
-      window.__native_hmr_listeners__.add(styleUrl);
+    for (const styleUrl of styleUrls) {
+      if (!window.__native_hmr_listeners__.has(styleUrl)) {
+        window.__native_hmr_listeners__.add(styleUrl);
+        const hmrHandler = async (e) => {
+          const { path: changedPath, css } = e.detail;
+          const absoluteChangedUrl = new URL(changedPath, window.location.origin).href;
+          
+          if (styleUrl === absoluteChangedUrl || styleUrl.endsWith(changedPath)) {
+            const sheet = assetCache.get(styleUrl);
+            if (sheet && typeof sheet.replaceSync === 'function') {
+              sheet.replaceSync(css);
+              console.log(`[HMR] Shared AdoptedStyleSheet hot-swapped for <${tag}>`);
+            }
+          }
+        };
+        window.addEventListener('anza:hmr:css', hmrHandler);
+      }
+    }
+  }
+
+  // Handle hot reloading of HTML templates
+  if (templateUrl && typeof window !== 'undefined') {
+    if (!window.__native_hmr_html_listeners__) {
+      window.__native_hmr_html_listeners__ = new Set();
+    }
+    if (!window.__native_hmr_html_listeners__.has(templateUrl)) {
+      window.__native_hmr_html_listeners__.add(templateUrl);
       const hmrHandler = async (e) => {
-        const { path: changedPath, css } = e.detail;
+        const { path: changedPath, html } = e.detail;
         const absoluteChangedUrl = new URL(changedPath, window.location.origin).href;
         
-        if (styleUrl === absoluteChangedUrl || styleUrl.endsWith(changedPath)) {
-          const res = await resourcesPromise;
-          if (res.stylesheet) {
-            res.stylesheet.replaceSync(css);
-            console.log(`[HMR] Shared AdoptedStyleSheet hot-swapped for <${tag}>`);
-          }
+        if (templateUrl === absoluteChangedUrl || templateUrl.endsWith(changedPath)) {
+          // Re-parse HTML into the cached resolved object
+          resourcesPromise = preloadResources(tag, styleUrls, null, html, spec.style).then(res => {
+            resolved = res;
+            // Now re-bind instances!
+            const instances = window.__native_hmr_instances__?.get(tag) || [];
+            for (const instance of instances) {
+              if (instance.__hmr_rebind) instance.__hmr_rebind();
+            }
+            console.log(`[HMR] Template hot-swapped for <${tag}>`);
+            return res;
+          });
         }
       };
-      window.addEventListener('anza:hmr:css', hmrHandler);
+      window.addEventListener('anza:hmr:html', hmrHandler);
     }
   }
 
@@ -98,6 +132,11 @@ export function element(tag, spec, base) {
       pendingUpdatesMap.set(this, new Map());
       updateScheduledMap.set(this, false);
 
+      if (typeof window !== 'undefined') {
+        if (!window.__native_hmr_instances__) window.__native_hmr_instances__ = new Map();
+        if (!window.__native_hmr_instances__.has(tag)) window.__native_hmr_instances__.set(tag, new Set());
+      }
+
       if (spec.form) {
         const internals = this.attachInternals();
         internalsMap.set(this, internals);
@@ -126,12 +165,16 @@ export function element(tag, spec, base) {
       // AbortController bootstrap inside BaseElement
       super.connectedCallback();
       
+      if (typeof window !== 'undefined') {
+        window.__native_hmr_instances__?.get(tag)?.add(this);
+      }
+      
       // Wait for resolved resources to compile (synchronously if already cached)
       let res = resolved;
       if (!res) {
         res = await resourcesPromise;
       }
-      const { templateNode, stylesheet, cssText, tagsDescriptor } = res;
+      const { templateNode, stylesheets, cssText, tagsDescriptor } = res;
 
       if (!this.ctrl || this.ctrl.signal.aborted || !this.isConnected) {
         return;
@@ -148,9 +191,9 @@ export function element(tag, spec, base) {
         this.shadowRoot.appendChild(templateNode.cloneNode(true));
       }
 
-      if (stylesheet) {
+      if (stylesheets && stylesheets.length > 0) {
         // Constructable stylesheets path
-        this.shadowRoot.adoptedStyleSheets = [stylesheet];
+        this.shadowRoot.adoptedStyleSheets = stylesheets;
       } else if (cssText) {
         // Fallback: inject <style> for browsers without adoptedStyleSheets
         const style = document.createElement('style');
@@ -190,6 +233,9 @@ export function element(tag, spec, base) {
     }
 
     disconnectedCallback() {
+      if (typeof window !== 'undefined') {
+        window.__native_hmr_instances__?.get(tag)?.delete(this);
+      }
       if (spec.unmount) {
         spec.unmount({ 
           el: this, 
@@ -202,6 +248,66 @@ export function element(tag, spec, base) {
       super.disconnectedCallback();
     }
 
+    async __hmr_rebind() {
+      // 1. Unmount component safely
+      if (spec.unmount) {
+        spec.unmount({ 
+          el: this, 
+          tags: this._tags,
+          refs: this._refs,
+          watch: this._watch,
+          internals: internalsMap.get(this) 
+        });
+      }
+
+      // 2. Clear Shadow DOM
+      this.shadowRoot.innerHTML = '';
+      
+      // 3. Clone new template
+      let res = resolved;
+      if (!res) {
+        res = await resourcesPromise;
+      }
+      const { templateNode, stylesheets, cssText, tagsDescriptor } = res;
+
+      if (templateNode) {
+        this.shadowRoot.appendChild(templateNode.cloneNode(true));
+      }
+      if (stylesheets && stylesheets.length > 0) {
+        this.shadowRoot.adoptedStyleSheets = stylesheets;
+      } else if (cssText) {
+        const style = document.createElement('style');
+        style.textContent = cssText;
+        this.shadowRoot.prepend(style);
+      }
+      
+      // 4. Recreate component context to rebind DOM events and tags
+      const context = createComponentContext({
+        el: this,
+        shadowRoot: this.shadowRoot,
+        ctrl: this.ctrl,
+        descriptor: tagsDescriptor,
+        internals: internalsMap.get(this)
+      });
+      this._ctx = context;
+      this._tags = context.tags;
+      this._on = context.on;
+      this._refs = context.refs;
+      this._watch = context.watch;
+      
+      // 5. Trigger mount again
+      if (spec.mount) {
+        try {
+          const mountRes = spec.mount(context);
+          if (mountRes instanceof Promise) {
+            mountRes.catch(console.error);
+          }
+        } catch (err) {
+          console.error('[Native UI] mount failed during HMR:', err);
+        }
+      }
+    }
+
     attributeChangedCallback(name, oldVal, newVal) {
       if (oldVal === newVal) return;
 

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

@@ -8,52 +8,60 @@ const supportsSheets =
 
 /**
  * Preloads style and HTML template resources asynchronously exactly once.
- * Returns { templateNode, stylesheet, cssText, tagsDescriptor }.
- * When constructable stylesheets are unsupported, stylesheet is null and
- * cssText carries the raw CSS for <style> injection.
+ * Returns { templateNode, stylesheets, cssText, tagsDescriptor }.
+ * When constructable stylesheets are unsupported, stylesheets is an empty array and
+ * cssText carries the concatenated raw CSS for <style> injection.
  */
-export async function preloadResources(tag, styleUrl, templateUrl, inlineTemplate, inlineStyle) {
+export async function preloadResources(tag, styleUrls, templateUrl, inlineTemplate, inlineStyle) {
   let templateNode = null;
-  let stylesheet = null;
-  let cssText = null;
+  let stylesheets = [];
+  let cssTextAcc = '';
   let tagsDescriptor = null;
 
   // Compile / Fetch styles
-  if (styleUrl) {
-    if (assetCache.has(styleUrl)) {
-      const cached = assetCache.get(styleUrl);
+  const urls = Array.isArray(styleUrls) ? styleUrls : (styleUrls ? [styleUrls] : []);
+  
+  await Promise.all(urls.map(async (url) => {
+    if (assetCache.has(url)) {
+      const cached = assetCache.get(url);
       if (supportsSheets) {
-        stylesheet = cached;
+        stylesheets.push(cached);
       } else {
-        cssText = cached;
+        cssTextAcc += cached + '\n';
       }
     } else {
       try {
-        const res = await fetch(styleUrl);
+        const res = await fetch(url);
         if (res.ok) {
           const css = await res.text();
           if (supportsSheets) {
-            stylesheet = new CSSStyleSheet();
-            stylesheet.replaceSync(css);
-            assetCache.set(styleUrl, stylesheet);
+            const sheet = new CSSStyleSheet();
+            sheet.replaceSync(css);
+            assetCache.set(url, sheet);
+            stylesheets.push(sheet);
           } else {
-            cssText = css;
-            assetCache.set(styleUrl, css);
+            assetCache.set(url, css);
+            cssTextAcc += css + '\n';
           }
         }
       } catch (err) {
-        console.error(`Failed to load style resource for element ${tag}:`, err);
+        console.error(`Failed to load style resource ${url} for element ${tag}:`, err);
       }
     }
-  } else if (inlineStyle) {
+  }));
+
+  if (inlineStyle) {
     if (supportsSheets) {
-      stylesheet = new CSSStyleSheet();
-      stylesheet.replaceSync(inlineStyle);
+      const sheet = new CSSStyleSheet();
+      sheet.replaceSync(inlineStyle);
+      stylesheets.push(sheet);
     } else {
-      cssText = inlineStyle;
+      cssTextAcc += inlineStyle + '\n';
     }
   }
 
+  const cssText = cssTextAcc.trim() ? cssTextAcc : null;
+
   // Compile / Fetch Template markup
   if (templateUrl) {
     if (assetCache.has(templateUrl)) {

package/src/elements/data/card/style.css

@@ -6,7 +6,7 @@
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-sm);
   overflow: hidden;
-  font-family: var(--font-family-sans);
+  font-family: var(--font-sans);
   transition:
     transform var(--duration-fast) var(--ease-out),
     box-shadow var(--duration-fast) var(--ease-out),

package/src/elements/data/chart/style.css

@@ -3,7 +3,7 @@
   width: 100%;
   height: calc(var(--space-24) * 3);
   position: relative;
-  font-family: var(--font-family-sans);
+  font-family: var(--font-sans);
 }
 
 canvas {

package/src/elements/data/list/style.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  font-family: var(--font-family-sans);
+  font-family: var(--font-sans);
 }
 
 .list {

package/src/elements/data/stat/style.css

@@ -6,7 +6,7 @@
   border-radius: var(--radius-lg);
   padding: var(--space-6);
   box-shadow: var(--shadow-sm);
-  font-family: var(--font-family-sans);
+  font-family: var(--font-sans);
   box-sizing: border-box;
   width: 100%;
 }

package/src/elements/data/table/style.css

@@ -13,7 +13,7 @@
   width: 100%;
   border-collapse: collapse;
   border-spacing: 0;
-  font-family: var(--font-family-sans);
+  font-family: var(--font-sans);
   font-size: var(--font-size-sm);
   color: var(--color-content-primary);
   text-align: left;

package/src/elements/feedback/alert/style.css

@@ -1,6 +1,6 @@
 :host {
   display: block;
-  font-family: var(--font-family-sans);
+  font-family: var(--font-sans);
   width: 100%;
   /* Component Tokens — Semantic Reference Only */
   --alert-radius: var(--radius-md);

package/src/elements/feedback/empty/style.css

@@ -5,7 +5,7 @@
   justify-content: center;
   text-align: center;
   padding: var(--space-12) var(--space-6);
-  font-family: var(--font-family-sans);
+  font-family: var(--font-sans);
   box-sizing: border-box;
   width: 100%;
 }

package/src/elements/feedback/progress/style.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--space-1);
-  font-family: var(--font-family-sans);
+  font-family: var(--font-sans);
   width: 100%;
   /* Component Tokens — Semantic Reference Only */
   --progress-bg:    var(--color-border-default);

package/src/elements/feedback/toast/style.css

@@ -1,6 +1,6 @@
 :host {
   display: block;
-  font-family: var(--font-family-sans);
+  font-family: var(--font-sans);
 }
 
 .toast {

package/src/elements/forms/checkbox/style.css

@@ -2,7 +2,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--space-2);
-  font-family: var(--font-family-sans);
+  font-family: var(--font-sans);
   cursor: pointer;
   user-select: none;
   /* Component Tokens — Semantic Reference Only */

package/src/elements/forms/field/style.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--space-1-5);
-  font-family: var(--font-family-sans);
+  font-family: var(--font-sans);
   width: 100%;
 }
 

package/src/elements/forms/input/style.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--space-1);
-  font-family: var(--font-family-sans);
+  font-family: var(--font-sans);
 }
 
 input {

package/src/elements/forms/radio/style.css

@@ -2,7 +2,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--space-2);
-  font-family: var(--font-family-sans);
+  font-family: var(--font-sans);
   cursor: pointer;
   user-select: none;
   /* Component Tokens — Semantic Reference Only */

package/src/elements/forms/select/style.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--space-1);
-  font-family: var(--font-family-sans);
+  font-family: var(--font-sans);
   position: relative;
   /* Component Tokens — Semantic Reference Only */
   --select-bg:           var(--color-surface-page);

package/src/elements/forms/textarea/style.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--space-1);
-  font-family: var(--font-family-sans);
+  font-family: var(--font-sans);
 }
 
 textarea {

package/src/elements/forms/toggle/style.css

@@ -2,7 +2,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--space-2);
-  font-family: var(--font-family-sans);
+  font-family: var(--font-sans);
   cursor: pointer;
   user-select: none;
   /* Component Tokens — Semantic Reference Only */

package/src/elements/forms/upload/style.css

@@ -1,6 +1,6 @@
 :host {
   display: block;
-  font-family: var(--font-family-sans);
+  font-family: var(--font-sans);
   width: 100%;
   /* Component Tokens — Semantic Reference Only */
   --upload-bg:           var(--color-surface-page);

package/src/elements/layout/app/style.css

@@ -5,7 +5,7 @@
   width: 100%;
   background: var(--color-surface-page);
   color: var(--color-content-primary);
-  font-family: var(--font-family-sans);
+  font-family: var(--font-sans);
 }
 
 .app-frame {

package/src/elements/navigation/breadcrumb/style.css

@@ -1,6 +1,6 @@
 :host {
   display: block;
-  font-family: var(--font-family-sans);
+  font-family: var(--font-sans);
 }
 
 ol {

package/src/elements/navigation/nav/style.css

@@ -1,6 +1,6 @@
 :host {
   display: block;
-  font-family: var(--font-family-sans);
+  font-family: var(--font-sans);
 }
 
 nav {

package/src/elements/navigation/pagination/style.css

@@ -3,7 +3,7 @@
   align-items: center;
   justify-content: center;
   gap: var(--space-2);
-  font-family: var(--font-family-sans);
+  font-family: var(--font-sans);
   width: 100%;
 }
 

package/src/elements/navigation/steps/style.css

@@ -3,7 +3,7 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  font-family: var(--font-family-sans);
+  font-family: var(--font-sans);
   position: relative;
 }
 

package/src/elements/navigation/tabs/style.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  font-family: var(--font-family-sans);
+  font-family: var(--font-sans);
 }
 
 .tablist {

package/src/elements/overlay/dialog/style.css

@@ -1,6 +1,6 @@
 :host {
   display: inline-block;
-  font-family: var(--font-family-sans);
+  font-family: var(--font-sans);
 }
 
 dialog {

package/src/elements/overlay/drawer/style.css

@@ -1,6 +1,6 @@
 :host {
   display: inline-block;
-  font-family: var(--font-family-sans);
+  font-family: var(--font-sans);
 }
 
 dialog {

package/src/elements/overlay/menu/style.css

@@ -1,6 +1,6 @@
 :host {
   display: inline-block;
-  font-family: var(--font-family-sans);
+  font-family: var(--font-sans);
 }
 
 [popover] {

package/src/elements/overlay/popover/style.css

@@ -1,6 +1,6 @@
 :host {
   display: inline-block;
-  font-family: var(--font-family-sans);
+  font-family: var(--font-sans);
 }
 
 [popover] {

package/src/elements/overlay/sheet/style.css

@@ -1,6 +1,6 @@
 :host {
   display: inline-block;
-  font-family: var(--font-family-sans);
+  font-family: var(--font-sans);
 }
 
 dialog {

package/src/elements/overlay/tooltip/style.css

@@ -22,7 +22,7 @@
   padding: var(--space-1) var(--space-2);
   border-radius: var(--radius-sm);
   font-size: var(--font-size-xs);
-  font-family: var(--font-family-sans);
+  font-family: var(--font-sans);
   white-space: nowrap;
   box-shadow: var(--shadow-sm);
   transition:

package/src/elements/primitives/avatar/style.css

@@ -10,7 +10,7 @@
   overflow: hidden;
   background: var(--color-interactive-disabled);
   color: var(--color-content-secondary);
-  font-family: var(--font-family-sans);
+  font-family: var(--font-sans);
   font-size: calc(var(--avatar-size, var(--space-8)) * 0.4);
   font-weight: var(--font-weight-medium);
   user-select: none;

package/src/elements/primitives/badge/style.css

@@ -4,7 +4,7 @@
   display: inline-flex;
   /* Component Tokens — Semantic Reference Only */
   --badge-radius: var(--radius-full);
-  --badge-font:   var(--font-family-sans);
+  --badge-font:   var(--font-sans);
   --badge-weight: var(--font-weight-semibold);
   --badge-size:   var(--font-size-xs);
   

package/src/elements/primitives/button/style.css

@@ -10,7 +10,7 @@
   --btn-bg-disabled: var(--color-interactive-disabled);
   --btn-color:       var(--color-content-inverse);
   --btn-radius:      var(--radius-md);
-  --btn-font:        var(--font-family-sans);
+  --btn-font:        var(--font-sans);
   --btn-size:        var(--font-size-sm);
   --btn-weight:      var(--font-weight-medium);
   --btn-padding-y:   var(--space-2);

package/src/elements/primitives/text/style.css

@@ -5,7 +5,7 @@
   /* Component Tokens — Semantic Reference Only */
   --text-size:   var(--font-size-base);
   --text-weight: var(--font-weight-regular);
-  --text-family: var(--font-family-sans);
+  --text-family: var(--font-sans);
   --text-height: var(--line-height-normal);
   --text-color:  var(--color-content-primary);
 }

package/src/styles/base.css

@@ -8,7 +8,7 @@
 
 @layer base {
   :root {
-    font-family: var(--font-family-sans);
+    font-family: var(--font-sans);
     font-size: var(--font-size-base);
     color-scheme: light dark;
   }
@@ -24,7 +24,7 @@
 
   /* Typography Defaults */
   h1, h2, h3, h4, h5, h6 {
-    font-family: var(--font-family-sans);
+    font-family: var(--font-sans);
     color: var(--color-content-primary);
     font-weight: var(--font-weight-semibold);
     line-height: var(--line-height-tight);