@ccslabs/xtend 0.1.0-rc.1 → 0.1.2

package/components/xcode.js

@@ -1,8 +1,92 @@
 import { xstate } from './xstate.js';
 
+const XCODE_LANGUAGE_ALIASES = Object.freeze({
+  js: 'javascript',
+  jsx: 'jsx',
+  ts: 'typescript',
+  tsx: 'tsx',
+  html: 'markup',
+  xml: 'markup',
+  svg: 'markup',
+  md: 'markdown',
+  plaintext: 'text',
+  plain: 'text',
+  txt: 'text',
+  'rmt-vnext': 'rmt',
+  xtendrmt: 'rmt'
+});
+
+function getGlobalTarget() {
+  if (typeof window !== 'undefined') return window;
+  if (typeof globalThis !== 'undefined') return globalThis;
+  return {};
+}
+
+function escapeHtml(str) {
+  return String(str == null ? '' : str)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+    .replace(/`/g, '&#96;');
+}
+
+function escapeAttribute(str) {
+  return escapeHtml(str).replace(/\s+/g, '-');
+}
+
+function normalizeLanguage(value) {
+  const raw = String(value || 'text').trim().toLowerCase();
+  return XCODE_LANGUAGE_ALIASES[raw] || raw || 'text';
+}
+
+function safeHighlightResult(result, fallbackCode, fallbackLanguage) {
+  if (!result || typeof result.html !== 'string') {
+    return {
+      html: escapeHtml(fallbackCode),
+      highlighted: false,
+      engine: 'plain-text',
+      language: fallbackLanguage
+    };
+  }
+  return {
+    html: result.html,
+    highlighted: result.highlighted === true,
+    engine: result.engine || (result.highlighted ? 'prism' : 'plain-text'),
+    language: result.language || fallbackLanguage
+  };
+}
+
+function callHighlighter(provider, input) {
+  if (!provider) return null;
+  try {
+    if (typeof provider === 'function') return provider(input);
+    if (typeof provider.highlight === 'function') return provider.highlight(input);
+  } catch (error) {
+    return {
+      html: escapeHtml(input.code),
+      highlighted: false,
+      engine: 'plain-text',
+      language: input.language,
+      error: error && error.message ? error.message : String(error)
+    };
+  }
+  return null;
+}
+
 class XCode extends HTMLElement {
   static get observedAttributes() {
-    return ['lang'];
+    return ['lang', 'language'];
+  }
+
+  static registerHighlighter(provider) {
+    this._highlighter = provider || null;
+    return this._highlighter;
+  }
+
+  static getHighlighter() {
+    return this._highlighter || null;
   }
 
   static get xtendComponentContract() {
@@ -76,6 +160,12 @@ class XCode extends HTMLElement {
     this._lightDomObserver = null;
     this._pendingHydration = false;
     this._suppressLightDomObserver = false;
+    this._lastHighlightSnapshot = {
+      highlighted: false,
+      highlightEngine: 'plain-text',
+      highlightLanguage: 'text',
+      languageAlias: 'default'
+    };
   }
 
   connectedCallback() {
@@ -87,9 +177,12 @@ class XCode extends HTMLElement {
     // State-Änderungen abonnieren (z.B. externes Setzen von Code oder Sprache)
     this._unsubscribeState = xstate.subscribe((key, value) => {
       if (key === `xcode-state-${this.id}` && typeof value === "object") {
-        if (typeof value.lang === "string" && value.lang !== this.getAttribute('lang')) {
+        if (typeof value.lang === "string" && value.lang !== this._getLanguageMeta().language) {
           this.setAttribute('lang', value.lang);
         }
+        if (typeof value.language === "string" && !this.hasAttribute('lang') && value.language !== this.getAttribute('language')) {
+          this.setAttribute('language', value.language);
+        }
         if (typeof value.code === "string" && value.code !== this._getRawCode()) {
           this._setRawCode(value.code);
           this._render();
@@ -107,13 +200,16 @@ class XCode extends HTMLElement {
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
-    if (name === 'lang' && oldValue !== newValue) {
+    if ((name === 'lang' || name === 'language') && oldValue !== newValue) {
       if (!this.isConnected) return;
       this._render();
       // State aktualisieren
       if (this.id) {
+        const languageMeta = this._getLanguageMeta();
         xstate.set(`xcode-state-${this.id}`, {
-          lang: newValue,
+          lang: languageMeta.language,
+          language: languageMeta.language,
+          languageAlias: languageMeta.alias,
           code: this._getRawCode()
         });
       }
@@ -162,8 +258,11 @@ class XCode extends HTMLElement {
   hydrate() {
     this._render();
     if (this.id) {
+      const languageMeta = this._getLanguageMeta();
       xstate.set(`xcode-state-${this.id}`, {
-        lang: this.getAttribute('lang') || 'text',
+        lang: languageMeta.language,
+        language: languageMeta.language,
+        languageAlias: languageMeta.alias,
         code: this._getRawCode(),
         hydrated: true
       });
@@ -192,6 +291,60 @@ class XCode extends HTMLElement {
     tpl.innerHTML = code;
   }
 
+  _getLanguageMeta() {
+    const langAttribute = this.getAttribute('lang');
+    const languageAttribute = this.getAttribute('language');
+    const raw = langAttribute || languageAttribute || 'text';
+    return {
+      language: normalizeLanguage(raw),
+      rawLanguage: raw,
+      alias: langAttribute ? 'lang' : (languageAttribute ? 'language' : 'default')
+    };
+  }
+
+  _highlightCode(rawCode, languageMeta) {
+    const globalTarget = getGlobalTarget();
+    const language = languageMeta.language || 'text';
+    const input = {
+      code: rawCode,
+      language,
+      rawLanguage: languageMeta.rawLanguage,
+      languageAlias: languageMeta.alias,
+      element: this
+    };
+    const registeredResult = callHighlighter(this.constructor.getHighlighter(), input)
+      || callHighlighter(globalTarget.XTendXCodeHighlighter, input);
+    if (registeredResult) return safeHighlightResult(registeredResult, rawCode, language);
+
+    const prism = globalTarget.Prism;
+    if (!prism || !prism.languages || typeof prism.highlight !== 'function') {
+      return safeHighlightResult(null, rawCode, language);
+    }
+
+    if (globalTarget.XTendRmtPrism && typeof globalTarget.XTendRmtPrism.register === 'function') {
+      globalTarget.XTendRmtPrism.register(prism);
+    }
+    const prismHighlighter = globalTarget.XTendRmtPrism && typeof globalTarget.XTendRmtPrism.createHighlighter === 'function'
+      ? globalTarget.XTendRmtPrism.createHighlighter(prism)
+      : null;
+    const prismResult = callHighlighter(prismHighlighter, input);
+    if (prismResult) return safeHighlightResult(prismResult, rawCode, language);
+
+    const grammar = prism.languages[language] || prism.languages[languageMeta.rawLanguage] || null;
+    if (!grammar) return safeHighlightResult(null, rawCode, language);
+
+    try {
+      return safeHighlightResult({
+        html: prism.highlight(rawCode, grammar, language),
+        highlighted: true,
+        engine: 'prism',
+        language
+      }, rawCode, language);
+    } catch (error) {
+      return safeHighlightResult(null, rawCode, language);
+    }
+  }
+
   _render() {
     this._suppressLightDomObserver = true;
     // Always wrap content in a <template> (virtual, not rendered)
@@ -209,17 +362,15 @@ class XCode extends HTMLElement {
       if (template !== tpl) template.remove();
     });
     const rawCode = this._readTemplateCode(tpl);
-    const lang = this.getAttribute('lang') || 'text';
-    function escapeHtml(str) {
-      return str
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&#39;')
-        .replace(/`/g, '&#96;');
-    }
-    const escapedCode = escapeHtml(rawCode);
+    const languageMeta = this._getLanguageMeta();
+    const highlightedCode = this._highlightCode(rawCode, languageMeta);
+    this._lastHighlightSnapshot = {
+      highlighted: highlightedCode.highlighted,
+      highlightEngine: highlightedCode.engine,
+      highlightLanguage: highlightedCode.language,
+      languageAlias: languageMeta.alias
+    };
+    const lang = escapeAttribute(highlightedCode.language || languageMeta.language || 'text');
     this.shadowRoot.innerHTML = `
       <style>
         :host {
@@ -265,6 +416,41 @@ class XCode extends HTMLElement {
           font-family: inherit;
           font-size: inherit;
         }
+        .token.comment {
+          color: var(--x-code-token-comment, #8b949e);
+          font-style: italic;
+        }
+        .token.string {
+          color: var(--x-code-token-string, #a5d6ff);
+        }
+        .token.number,
+        .token.boolean {
+          color: var(--x-code-token-number, #79c0ff);
+        }
+        .token.keyword,
+        .token.rmt-primitive,
+        .token.rmt-lifecycle,
+        .token.rmt-boundary {
+          color: var(--x-code-token-keyword, #ff7b72);
+        }
+        .token.function,
+        .token.rmt-action {
+          color: var(--x-code-token-function, #d2a8ff);
+        }
+        .token.property,
+        .token.variable,
+        .token.rmt-identifier,
+        .token.rmt-reference {
+          color: var(--x-code-token-property, #ffa657);
+        }
+        .token.class-name,
+        .token.rmt-component {
+          color: var(--x-code-token-class, #7ee787);
+        }
+        .token.operator,
+        .token.punctuation {
+          color: var(--x-code-token-punctuation, #c9d1d9);
+        }
         .copy-btn {
           position: absolute;
           top: 1.1em;
@@ -318,7 +504,7 @@ class XCode extends HTMLElement {
       <button class="copy-btn" part="copy control" aria-label="Code kopieren" title="Code kopieren">
         <svg part="copy-icon control icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2.5"/><rect x="2" y="2" width="13" height="13" rx="2.5"/></svg>
       </button>
-      <pre part="root pre"><code part="code" class="language-${lang}">${escapedCode}</code></pre>
+      <pre part="root pre"><code part="code" class="language-${lang}" data-x-code-highlight-engine="${escapeAttribute(highlightedCode.engine)}">${highlightedCode.html}</code></pre>
     `;
     const copyBtn = this.shadowRoot.querySelector('.copy-btn');
     copyBtn.addEventListener('click', async () => {
@@ -332,8 +518,11 @@ class XCode extends HTMLElement {
         }, 1500);
         // State aktualisieren (optional: z.B. für Kopier-Status)
         if (this.id) {
+          const nextLanguageMeta = this._getLanguageMeta();
           xstate.set(`xcode-state-${this.id}`, {
-            lang: this.getAttribute('lang') || 'text',
+            lang: nextLanguageMeta.language,
+            language: nextLanguageMeta.language,
+            languageAlias: nextLanguageMeta.alias,
             code: rawCode,
             copied: true
           });
@@ -356,13 +545,19 @@ class XCode extends HTMLElement {
   }
 
   snapshot() {
+    const languageMeta = this._getLanguageMeta();
     return {
       schema: "xtend.component.layout-display-media-snapshot.v1",
       componentRef: "x-code",
       stateKey: `xcode-state-${this.id}`,
       schedule: "component.idle.hydrate",
-      lang: this.getAttribute('lang') || 'text',
-      codeLength: this._getRawCode().length
+      lang: languageMeta.language,
+      language: languageMeta.language,
+      codeLength: this._getRawCode().length,
+      highlighted: this._lastHighlightSnapshot.highlighted === true,
+      highlightEngine: this._lastHighlightSnapshot.highlightEngine || 'plain-text',
+      highlightLanguage: this._lastHighlightSnapshot.highlightLanguage || languageMeta.language,
+      languageAlias: this._lastHighlightSnapshot.languageAlias || languageMeta.alias
     };
   }
 }

package/components/xfooter.js

@@ -52,6 +52,19 @@ class XFooter extends HTMLElement {
     };
   }
 
+  static get xtendLayoutStabilityProfile() {
+    return {
+      schema: "xtend.layout-stability.v1",
+      componentRef: "x-footer",
+      minBlockSize: "var(--footer-reserved-block-size, calc(var(--footer-logo-size, 40px) + 2rem + 2px))",
+      intrinsicSize: "auto var(--footer-reserved-block-size, 4.75rem)",
+      slotReserve: ["title", "nav", "extra"],
+      hydrationShiftPolicy: "no-geometry-shift",
+      shellFirstCompatible: true,
+      lazyLoadingCompatible: true
+    };
+  }
+
   static get xtendLayoutDisplayMediaUxProfile() {
     return {
       schema: "xtend.component.layout-display-media-ux-profile.v1",
@@ -149,10 +162,13 @@ class XFooter extends HTMLElement {
           color: var(--footer-fg, var(--xtend-layout-text, var(--xtend-text, #172033)));
           font-family: var(--footer-font-family, var(--xtend-layout-font-family, var(--xtend-font-family-body, 'Inter', 'Segoe UI', Arial, sans-serif)));
           font-size: var(--footer-font-size, var(--xtend-layout-font-size, 1rem));
+          --footer-reserved-block-size: calc(var(--footer-logo-size, 40px) + 2rem + 2px);
           --footer-grid-min: var(--xtend-layout-grid-min, minmax(10rem, 1fr));
           --footer-content-max: var(--xtend-layout-content-max, 100%);
           max-width: 100%;
           min-width: 0;
+          min-block-size: var(--footer-reserved-block-size);
+          contain-intrinsic-size: auto var(--footer-reserved-block-size);
           box-sizing: border-box;
         }
 
@@ -177,6 +193,7 @@ class XFooter extends HTMLElement {
           overflow-wrap: anywhere;
           max-width: var(--footer-content-max);
           min-width: 0;
+          min-height: var(--footer-reserved-block-size);
           box-sizing: border-box;
           transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
         }

package/components/xheader.js

@@ -84,6 +84,18 @@ class XHeader extends HTMLElement {
       idleOrBackgroundAllowed: false
     };
   }
+  static get xtendLayoutStabilityProfile() {
+    return {
+      schema: "xtend.layout-stability.v1",
+      componentRef: "x-header",
+      minBlockSize: "var(--header-reserved-block-size, var(--xtend-layout-reserved-block-size, 4.75rem))",
+      intrinsicSize: "auto var(--header-reserved-block-size, 4.75rem)",
+      slotReserve: ["title", "nav", "actions"],
+      hydrationShiftPolicy: "no-geometry-shift",
+      shellFirstCompatible: true,
+      lazyLoadingCompatible: true
+    };
+  }
   static get xtendLayoutDisplayMediaUxProfile() {
     return {
       schema: "xtend.component.layout-display-media-ux-profile.v1",
@@ -366,6 +378,8 @@ class XHeader extends HTMLElement {
           display: block;
           font-family: var(--xtend-header-font-family);
           color: var(--header-fg);
+          min-block-size: var(--header-reserved-block-size, var(--xtend-layout-reserved-block-size, auto));
+          contain-intrinsic-size: auto var(--header-reserved-block-size, var(--xtend-layout-reserved-block-size, 4.75rem));
         }
         header {
           display: grid;

package/components/xhero.js

@@ -42,6 +42,19 @@ class XHero extends HTMLElement {
     };
   }
 
+  static get xtendLayoutStabilityProfile() {
+    return {
+      schema: "xtend.layout-stability.v1",
+      componentRef: "x-hero",
+      minBlockSize: "var(--hero-reserved-block-size, var(--xtend-layout-reserved-block-size, clamp(12rem, 30vw, 22rem)))",
+      intrinsicSize: "auto var(--hero-reserved-block-size, 18rem)",
+      slotReserve: ["default", "title", "subtitle", "actions"],
+      hydrationShiftPolicy: "no-geometry-shift",
+      shellFirstCompatible: true,
+      lazyLoadingCompatible: true
+    };
+  }
+
   static get xtendLayoutDisplayMediaUxProfile() {
     return {
       schema: "xtend.component.layout-display-media-ux-profile.v1",
@@ -259,6 +272,8 @@ class XHero extends HTMLElement {
           font-family: var(--hero-font-family, var(--xtend-layout-font-family, inherit));
           max-width: 100%;
           min-width: 0;
+          min-block-size: var(--hero-reserved-block-size, var(--xtend-layout-reserved-block-size, auto));
+          contain-intrinsic-size: auto var(--hero-reserved-block-size, var(--xtend-layout-reserved-block-size, 18rem));
           box-sizing: border-box;
         }
         :host([data-theme-dark]) {
@@ -271,7 +286,7 @@ class XHero extends HTMLElement {
           position: relative;
           background-color: ${bg};
           ${bgImg ? `background-image: url('${bgImg}'); background-size: cover; background-position: center;` : ""}
-          min-height: ${fullHeight ? "100vh" : "auto"};
+          min-height: ${fullHeight ? "100vh" : "var(--hero-reserved-block-size, var(--xtend-layout-reserved-block-size, auto))"};
           display: flex;
           justify-content: ${justify};
           align-items: ${alignItems};

package/components/xlink.js

@@ -177,10 +177,10 @@ class XLink extends HTMLElement {
     };
   }
 
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-    this.shadowRoot.innerHTML = `
+  static _getShadowTemplate() {
+    if (XLink.__shadowTemplate) return XLink.__shadowTemplate;
+    const template = document.createElement('template');
+    template.innerHTML = `
       <style>
         :host {
           display: var(--xtend-link-display, inline-block);
@@ -293,6 +293,88 @@ class XLink extends HTMLElement {
       <a part="root link" role="link" tabindex="0"><slot></slot></a>
       <span class="link-status" part="announcer" role="status" aria-live="polite" aria-atomic="true"></span>
     `;
+    XLink.__shadowTemplate = template;
+    return XLink.__shadowTemplate;
+  }
+
+  static _getNavigationRegistry() {
+    if (XLink.__navigationRegistry) return XLink.__navigationRegistry;
+    const registry = {
+      links: new Set(),
+      scheduled: false,
+      attached: false,
+      body: null,
+      sync() {
+        registry.scheduled = false;
+        registry.links.forEach((link) => {
+          if (link && typeof link._updateActive === 'function' && link.isConnected) {
+            link._updateActive();
+          }
+        });
+      },
+      schedule() {
+        if (registry.scheduled) return;
+        registry.scheduled = true;
+        const run = () => registry.sync();
+        if (typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function') {
+          window.requestAnimationFrame(run);
+          return;
+        }
+        if (typeof queueMicrotask === 'function') {
+          queueMicrotask(run);
+          return;
+        }
+        setTimeout(run, 0);
+      },
+      onNavigation() {
+        registry.schedule();
+      }
+    };
+    XLink.__navigationRegistry = registry;
+    return registry;
+  }
+
+  static _attachNavigationListeners(registry = XLink._getNavigationRegistry()) {
+    if (registry.attached || typeof window === 'undefined') return;
+    window.addEventListener('popstate', registry.onNavigation);
+    window.addEventListener('hashchange', registry.onNavigation);
+    window.addEventListener('xrouter-after-navigate', registry.onNavigation);
+    if (typeof document !== 'undefined' && document.body) {
+      document.body.addEventListener('x-navigate', registry.onNavigation);
+      registry.body = document.body;
+    }
+    registry.attached = true;
+  }
+
+  static _detachNavigationListeners(registry = XLink._getNavigationRegistry()) {
+    if (!registry.attached || registry.links.size > 0 || typeof window === 'undefined') return;
+    window.removeEventListener('popstate', registry.onNavigation);
+    window.removeEventListener('hashchange', registry.onNavigation);
+    window.removeEventListener('xrouter-after-navigate', registry.onNavigation);
+    if (registry.body) {
+      registry.body.removeEventListener('x-navigate', registry.onNavigation);
+      registry.body = null;
+    }
+    registry.attached = false;
+    registry.scheduled = false;
+  }
+
+  static _registerNavigationLink(link) {
+    const registry = XLink._getNavigationRegistry();
+    registry.links.add(link);
+    XLink._attachNavigationListeners(registry);
+  }
+
+  static _unregisterNavigationLink(link) {
+    const registry = XLink._getNavigationRegistry();
+    registry.links.delete(link);
+    XLink._detachNavigationListeners(registry);
+  }
+
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: 'open' });
+    shadow.appendChild(XLink._getShadowTemplate().content.cloneNode(true));
     this._anchor = this.shadowRoot.querySelector('a');
     this._status = this.shadowRoot.querySelector('.link-status');
     this._onClick = this._onClick.bind(this);
@@ -308,20 +390,14 @@ class XLink extends HTMLElement {
     this._anchor.addEventListener('click', this._onClick);
     this._anchor.addEventListener('keydown', this._onKeyDown);
     this._syncAnchorState();
-    window.addEventListener('popstate', this._updateActive);
-    window.addEventListener('hashchange', this._updateActive);
-    window.addEventListener('xrouter-after-navigate', this._onNavigationChange);
-    document.body.addEventListener('x-navigate', this._onNavigationChange);
+    XLink._registerNavigationLink(this);
     this._updateActive();
   }
 
   disconnectedCallback() {
     this._anchor.removeEventListener('click', this._onClick);
     this._anchor.removeEventListener('keydown', this._onKeyDown);
-    window.removeEventListener('popstate', this._updateActive);
-    window.removeEventListener('hashchange', this._updateActive);
-    window.removeEventListener('xrouter-after-navigate', this._onNavigationChange);
-    document.body.removeEventListener('x-navigate', this._onNavigationChange);
+    XLink._unregisterNavigationLink(this);
   }
 
   attributeChangedCallback(name, oldVal, newVal) {
@@ -428,15 +504,22 @@ class XLink extends HTMLElement {
 
   _syncActiveState(active) {
     const href = this.getAttribute('href') || '';
+    const normalizedHref = this._normalizePath(href.replace(/^#/, ''));
+    const previousActive = this._lastActiveState;
+    if (previousActive === active && this._lastActiveHref === normalizedHref) {
+      return;
+    }
+    this._lastActiveState = active;
+    this._lastActiveHref = normalizedHref;
     const detail = {
-      href: this._normalizePath(href.replace(/^#/, '')),
+      href: normalizedHref,
       active,
       source: 'x-link',
       stateKey: `xlink-active-${this.id}`,
       scheduleRef: 'route.visible.render'
     };
     const stateApi = globalThis.xstate;
-    if (stateApi && typeof stateApi.set === 'function') {
+    if (stateApi && typeof stateApi.set === 'function' && (active || previousActive !== undefined)) {
       stateApi.set(`xlink-active-${this.id}`, detail);
     }
     if (this._status) {

package/components/xmasonry.js

@@ -44,6 +44,19 @@ class XMasonry extends HTMLElement {
     };
   }
 
+  static get xtendLayoutStabilityProfile() {
+    return {
+      schema: "xtend.layout-stability.v1",
+      componentRef: "x-masonry",
+      minBlockSize: "var(--masonry-reserved-block-size, var(--xtend-layout-reserved-block-size, 18rem))",
+      intrinsicSize: "auto var(--masonry-reserved-block-size, 18rem)",
+      slotReserve: ["default"],
+      hydrationShiftPolicy: "no-geometry-shift",
+      shellFirstCompatible: true,
+      lazyLoadingCompatible: true
+    };
+  }
+
   static get xtendLayoutDisplayMediaUxProfile() {
     return {
       schema: "xtend.component.layout-display-media-ux-profile.v1",
@@ -95,6 +108,8 @@ class XMasonry extends HTMLElement {
           font-family: var(--masonry-font-family, var(--xtend-layout-font-family, inherit));
           max-width: 100%;
           min-width: 0;
+          min-block-size: var(--masonry-reserved-block-size, var(--xtend-layout-reserved-block-size, auto));
+          contain-intrinsic-size: auto var(--masonry-reserved-block-size, var(--xtend-layout-reserved-block-size, 18rem));
         }
 
         :host([data-theme="dark"]) {