@startnext/chrome 0.3.2 → 0.3.3

package/README.md

@@ -2,7 +2,7 @@
 
 > Startnext Header/Footer Web Components
 
-Wiederverwendbare Header- und Footer-Components für alle Startnext Microservices.
+Wiederverwendbare Header- und Footer-Components fuer alle Startnext Microservices.
 
 ## Installation
 
@@ -17,7 +17,7 @@ pnpm add @startnext/chrome
 Es gibt zwei Integrationsmodi:
 
 1. **Client-Side Rendering** — Web Component fetcht Daten selbst (einfach, kein Server noetig)
-2. **Server-Side Rendering** — Server holt fertig gerendertes HTML von der API (sofort sichtbar ohne JS, bessere Performance + SEO)
+2. **Server-Side Rendering (SSR)** — Server holt fertig gerendertes HTML von der API (sofort sichtbar ohne JS, bessere Performance + SEO)
 
 ### Client-Side: Via CDN (PHP, Vanilla HTML)
 ```html
@@ -39,7 +39,7 @@ import '@startnext/chrome';
 
 ### Server-Side Rendering (empfohlen)
 
-SSR-HTML von der API holen und direkt einbinden. Die Web Component JS hydriert anschliessend (haengt Events an, statt DOM neu zu rendern). Siehe Abschnitt [SSR mit React / Next.js](#ssr-mit-react--nextjs-app-router) oder [SSR — PHP / ESI](#ssr--php-beispiel) weiter unten.
+SSR-HTML von der API holen und direkt einbinden. Die Web Component JS hydriert anschliessend (haengt Events an, statt DOM neu zu rendern). Die API-Daten werden als JSON im HTML eingebettet — der Component hat sofort echte Daten ohne Client-Fetch.
 
 ```bash
 # SSR-HTML holen (z.B. serverseitig per fetch, file_get_contents, ESI)
@@ -47,6 +47,8 @@ curl "https://scs-api.vercel.app/api/header/render?lang=de&large-animation"
 curl "https://scs-api.vercel.app/api/footer/render?lang=de"
 ```
 
+Siehe Framework-spezifische Beispiele: [React / Next.js](#react--nextjs-app-router), [Vue / Nuxt](#vue--nuxt-3), [PHP / Vanilla](#php--vanilla-html)
+
 ## API
 
 ### `<startnext-header>`
@@ -56,8 +58,8 @@ curl "https://scs-api.vercel.app/api/footer/render?lang=de"
 | Attribute | Type | Default | Description |
 |---|---|---|---|
 | `lang` | `string` | `'de'` | Sprache (`'de'`, `'en'`) |
-| `light` | `boolean` | `false` | Heller Header (weiße Schrift/Icons über dunklem Hero, wechselt automatisch zu dunkel beim Scrollen). Standard ohne Attribut: dunkler Header |
-| `large-animation` | `boolean` | `false` | Große Lottie-Logo-Animation mit Claim und horizontaler Navigation |
+| `light` | `boolean` | `false` | Heller Header (weisse Schrift/Icons ueber dunklem Hero, wechselt automatisch zu dunkel beim Scrollen). Standard ohne Attribut: dunkler Header |
+| `large-animation` | `boolean` | `false` | Grosse Lottie-Logo-Animation mit Claim und horizontaler Navigation |
 | `authenticated` | `boolean` | `false` | Zeigt User-Avatar statt "Anmelden" Button |
 | `user-name` | `string` | - | Name des eingeloggten Users |
 | `user-avatar` | `string` | - | Avatar-URL des Users |
@@ -68,34 +70,34 @@ curl "https://scs-api.vercel.app/api/footer/render?lang=de"
 | `show-back-link` | `boolean` | `false` | Zeigt einen "Zurueck zu Startnext"-Link (Text kommt von der API) |
 | `back-url` | `string` | - | Ueberschreibt die Back-Link-URL |
 | `back-label` | `string` | - | Ueberschreibt den Back-Link-Text |
-| `api-url` | `string` | - | API-Endpoint-URL fuer Live-Daten aus Notion |
+| `api-url` | `string` | - | API-Endpoint-URL fuer Live-Daten aus Notion (nicht noetig bei SSR) |
 
 **Events:**
 
 | Event | Detail | Description |
 |---|---|---|
-| `burger-menu-toggle` | `{ open: boolean }` | Burger-Menü geöffnet/geschlossen |
-| `user-menu-toggle` | `{ open: boolean }` | User-Menü geöffnet/geschlossen |
+| `burger-menu-toggle` | `{ open: boolean }` | Burger-Menue geoeffnet/geschlossen |
+| `user-menu-toggle` | `{ open: boolean }` | User-Menue geoeffnet/geschlossen |
 | `navigation-click` | `{ item: NavigationItem }` | Navigation-Link geklickt |
 | `cta-click` | `{ url: string }` | "Projekt starten" Button geklickt |
 | `logout` | `{}` | Abmelden geklickt |
 | `language-change` | `{ language: string }` | Sprache gewechselt |
-| `scroll-state-change` | `{ scrolled: boolean, slideUp: boolean }` | Scroll-Zustand geändert |
+| `scroll-state-change` | `{ scrolled: boolean, slideUp: boolean }` | Scroll-Zustand geaendert |
 | `color-mode-change` | `{ mode: 'light' \| 'dark' }` | Farbmodus gewechselt (per Toggle-Button) |
 
 **Usage Examples:**
 
 ```html
-<!-- Default: dunkler Header (dunkle Schrift für helle Seiten) -->
+<!-- Default: dunkler Header (dunkle Schrift fuer helle Seiten) -->
 <startnext-header></startnext-header>
 
-<!-- Heller Header (weiße Schrift über dunklem Hero) -->
+<!-- Heller Header (weisse Schrift ueber dunklem Hero) -->
 <startnext-header light></startnext-header>
 
-<!-- Heller Header + große Animation (z.B. Startseite) -->
+<!-- Heller Header + grosse Animation (z.B. Startseite) -->
 <startnext-header light large-animation></startnext-header>
 
-<!-- Heller Header + groß + eingeloggt -->
+<!-- Heller Header + gross + eingeloggt -->
 <startnext-header
   light
   large-animation
@@ -156,7 +158,7 @@ header.addEventListener('color-mode-change', (e) => {
 | Attribute | Type | Default | Description |
 |---|---|---|---|
 | `lang` | `string` | `'de'` | Sprache (`'de'`, `'en'`) |
-| `api-url` | `string` | - | API-Endpoint-URL fuer Live-Daten |
+| `api-url` | `string` | - | API-Endpoint-URL fuer Live-Daten (nicht noetig bei SSR) |
 | `lang-sync` | `boolean` | `true` | Synchronisiert Sprache automatisch wenn der Header ein `language-change` Event emittiert. Mit `lang-sync="false"` deaktivieren |
 
 **Events:**
@@ -184,7 +186,7 @@ startnext-footer {
 
 ## Fonts
 
-Standardmäßig nutzen die Components System-Fonts als Fallback. Für eigene Schriftarten `@font-face` im eigenen CSS deklarieren und `--font-family` setzen:
+Standardmaessig nutzen die Components System-Fonts als Fallback. Fuer eigene Schriftarten `@font-face` im eigenen CSS deklarieren und `--font-family` setzen:
 
 ```css
 @font-face {
@@ -202,68 +204,74 @@ startnext-header, startnext-footer {
 
 ## Server-Side Rendering (SSR)
 
-Das Paket exportiert einen server-sicheren Subpath `@startnext/chrome/render` mit reinen String-Funktionen (keine Browser-Abhaengigkeiten). Damit kann der API-Server fertig gerendertes HTML per Declarative Shadow DOM erzeugen.
-
-### Render Entry Point
+Die API liefert fertig gerendertes HTML mit **Declarative Shadow DOM** (`<template shadowrootmode="open">`) und eingebetteten **API-Daten als JSON** (`<script data-ssr-props>`). Der Browser zeigt den Content sofort an — ohne JavaScript. Die Web Component JS hydriert anschliessend (Events anbinden, kein Re-Render noetig).
 
-```javascript
-import {
-  renderHeader, renderBurgerItems, renderUserItems,
-  renderFooter,
-  headerCSS, footerCSS,
-  renderHeaderCrawlerNav, renderFooterCrawlerNav,
-  toHeaderRenderData, toFooterRenderData,
-  getUiString, getIcon,
-} from '@startnext/chrome/render';
-```
+### Wie es funktioniert
 
-### Exports
-
-| Export | Beschreibung |
-|--------|-------------|
-| `renderHeader(props)` | Header Shadow DOM HTML |
-| `renderBurgerItems(data, expandedSections)` | Burger-Menue Items HTML |
-| `renderUserItems(data, expandedSections)` | User-Menue Items HTML |
-| `renderFooter(data)` | Footer Shadow DOM HTML |
-| `headerCSS`, `footerCSS`, `resetCSS` | CSS als Strings |
-| `getIcon(name, size?)` | SVG-Icon als String |
-| `getUiString(key, lang)` | UI-String (ARIA Labels etc.) |
-| `toHeaderRenderData(apiData)` | API-Daten → HeaderData (fuegt stub `theme` hinzu) |
-| `toFooterRenderData(apiData)` | API-Daten → FooterData (fuegt stub `theme` hinzu) |
-| `renderHeaderCrawlerNav(data)` | Crawler-`<nav>` fuer Header (Light DOM, SEO) |
-| `renderFooterCrawlerNav(data)` | Crawler-`<nav>` fuer Footer (Light DOM, SEO) |
-
-### Hydration
-
-Wenn der Server HTML mit Declarative Shadow DOM (`<template shadowrootmode="open">`) liefert, erkennt die Web Component den bestehenden `shadowRoot` und **hydriert** statt neu zu rendern:
-
-1. Browser parst DSD → `shadowRoot` existiert vor dem Custom-Element-Constructor
-2. `BaseComponent` erkennt bestehenden `shadowRoot`, setzt `isHydrating = true`
-3. `render()` ueberspringt `innerHTML`, ruft nur `attachEvents()` auf
-4. `connectedCallback()` erkennt bestehenden `[data-crawler-nav]`, ueberspringt `renderLightDomNav()`
-5. `loadApiData()` holt frische Daten → loest danach ein vollstaendiges Re-Render aus
+1. Server fetcht SSR-HTML von `/api/header/render` bzw. `/api/footer/render`
+2. HTML wird direkt in die Seite eingebunden
+3. Browser parst DSD → Shadow DOM existiert sofort, Content ist sichtbar
+4. Web Component JS laedt → erkennt bestehenden `shadowRoot`, setzt `isHydrating = true`
+5. `render()` ueberspringt `innerHTML`, ruft nur `attachEvents()` auf
+6. `parseSsrProps()` liest eingebettetes JSON → populiert API-Cache mit echten Daten
+7. Attribut-Aenderungen (z.B. `color-mode`, `large-animation`) funktionieren sofort — kein Client-Fetch noetig
 
 ```html
-<!-- Server liefert fertiges HTML -->
+<!-- Server liefert fertiges HTML (vereinfacht) -->
 <startnext-header lang="de" light large-animation>
   <template shadowrootmode="open">
     <style>/* headerCSS */</style>
     <div><!-- Shadow DOM HTML --></div>
   </template>
-  <nav data-crawler-nav aria-hidden="true" style="display:none">
-    <!-- SEO-Links -->
-  </nav>
+  <script type="application/json" data-ssr-props>{"mainNavigation":[...],...}</script>
 </startnext-header>
 
 <!-- JS hydriert automatisch -->
 <script type="module" src="@startnext/chrome"></script>
 ```
 
-### SSR mit React / Next.js (App Router)
+### Render-Endpoints (Query-Parameter)
+
+**Header:** `GET /api/header/render`
+
+| Parameter | Typ | Beschreibung |
+|-----------|-----|-------------|
+| `lang` | `de` \| `en` | Sprache |
+| `light` | flag | Heller Header |
+| `large-animation` | flag | Grosse Logo-Animation |
+| `authenticated` | flag | Eingeloggt |
+| `user-name` | string | User-Name |
+| `user-avatar` | string | Avatar-URL |
+| `hide-color-mode` | flag | Color-Mode Toggle verstecken |
+| `hide-lang` | flag | Language-Switcher verstecken |
+| `hide-login` | flag | Login-Button verstecken |
+| `show-back-link` | flag | Back-Link anzeigen |
+| `back-url` | string | Back-Link URL |
+| `back-label` | string | Back-Link Text |
+
+**Footer:** `GET /api/footer/render`
+
+| Parameter | Typ | Beschreibung |
+|-----------|-----|-------------|
+| `lang` | `de` \| `en` | Sprache |
+
+Beispiel: `GET /api/header/render?lang=de&large-animation&hide-login&show-back-link`
+
+### `api-url` bei SSR nicht noetig
+
+Bei SSR werden die API-Daten als JSON im HTML eingebettet (`<script data-ssr-props>`). Der Component liest das beim Hydrating und hat sofort echte Daten im Cache. `api-url` ist daher **nicht noetig** — der Component rendert und reagiert auf Attribut-Aenderungen ohne zusaetzlichen Fetch.
+
+`api-url` ist nur fuer **Client-Side-Only** Rendering relevant, wenn kein SSR-HTML verfuegbar ist.
+
+---
+
+## Framework-Integration (SSR)
 
-React's `dangerouslySetInnerHTML` nutzt intern `innerHTML`, das Declarative Shadow DOM **nicht** parsed. Daher muss nach der Hydration `setHTMLUnsafe()` als Fallback aufgerufen werden.
+### React / Next.js (App Router)
 
-**1. Layout (Server Component) — SSR HTML von der API fetchen:**
+React's `dangerouslySetInnerHTML` nutzt `innerHTML`, das DSD nicht parsed. Nach der Hydration wird `setHTMLUnsafe()` als Fallback aufgerufen.
+
+**Layout (Server Component):**
 
 ```tsx
 // app/[locale]/layout.tsx
@@ -298,7 +306,7 @@ export default async function Layout({ children, params }) {
 }
 ```
 
-**2. Client Component — SSR HTML rendern + DSD Fallback + Hydration:**
+**Header (Client Component):**
 
 ```tsx
 // components/ChromeHeader.tsx
@@ -312,50 +320,205 @@ export function ChromeHeader({ ssrHtml }: { ssrHtml?: string }) {
   useEffect(() => {
     const container = containerRef.current;
     if (container && ssrHtml) {
-      // Falls DSD nicht geparsed wurde (innerHTML parsed kein DSD),
-      // setHTMLUnsafe() als Fallback nutzen
       const header = container.querySelector("startnext-header");
       if (!header?.shadowRoot && "setHTMLUnsafe" in Element.prototype) {
         container.setHTMLUnsafe(ssrHtml);
       }
     }
-    import("@startnext/chrome"); // Web Component JS laden → Hydration
+    import("@startnext/chrome");
     setMounted(true);
   }, [ssrHtml]);
 
+  // Attribut-Sync nach Mount (z.B. color-mode, large-animation)
+  useEffect(() => {
+    const el = containerRef.current?.querySelector("startnext-header");
+    if (!el || !mounted) return;
+    // Beispiel: el.setAttribute("color-mode", resolvedTheme);
+  }, [mounted]);
+
   if (ssrHtml) {
     return (
-      <div
-        ref={containerRef}
-        style={{ display: "contents" }}
+      <div ref={containerRef} style={{ display: "contents" }}
         suppressHydrationWarning
         dangerouslySetInnerHTML={{ __html: ssrHtml }}
       />
     );
   }
 
-  // Fallback: Client-Side Rendering (wenn SSR HTML nicht verfuegbar)
+  // Fallback ohne SSR
   return <startnext-header api-url={process.env.NEXT_PUBLIC_SCS_API_URL} />;
 }
 ```
 
-**Wichtig:** `dangerouslySetInnerHTML` sorgt dafuer, dass das SSR-HTML im initialen HTML-Stream enthalten ist (fuer Crawler und First Paint). `setHTMLUnsafe()` stellt sicher, dass DSD auch nach React-Hydration oder Client-Side-Navigation korrekt geparsed wird.
+**Footer (Client Component):**
 
-**Render-Endpoints (Query-Parameter):**
+```tsx
+// components/ChromeFooter.tsx
+"use client";
+import { useEffect, useRef } from "react";
 
-| Parameter | Typ | Beschreibung |
-|-----------|-----|-------------|
-| `lang` | `de` \| `en` | Sprache |
-| `light` | flag | Heller Header |
-| `large-animation` | flag | Grosse Logo-Animation |
-| `hide-color-mode` | flag | Color-Mode Toggle verstecken |
-| `hide-lang` | flag | Language-Switcher verstecken |
-| `hide-login` | flag | Login-Button verstecken |
-| `show-back-link` | flag | Back-Link anzeigen |
-| `back-url` | string | Back-Link URL |
-| `back-label` | string | Back-Link Text |
+export function ChromeFooter({ ssrHtml }: { ssrHtml?: string }) {
+  const containerRef = useRef<HTMLDivElement>(null);
 
-Beispiel: `GET /api/header/render?lang=de&large-animation&hide-login&show-back-link`
+  useEffect(() => {
+    const container = containerRef.current;
+    if (container && ssrHtml) {
+      const footer = container.querySelector("startnext-footer");
+      if (!footer?.shadowRoot && "setHTMLUnsafe" in Element.prototype) {
+        container.setHTMLUnsafe(ssrHtml);
+      }
+    }
+    import("@startnext/chrome");
+  }, [ssrHtml]);
+
+  if (ssrHtml) {
+    return (
+      <div ref={containerRef} style={{ display: "contents" }}
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{ __html: ssrHtml }}
+      />
+    );
+  }
+
+  return <startnext-footer api-url={process.env.NEXT_PUBLIC_SCS_API_URL} />;
+}
+```
+
+### Vue / Nuxt 3
+
+Vue parsed DSD korrekt via `v-html` — kein `setHTMLUnsafe()` Workaround noetig.
+
+**Server Plugin (SSR-HTML fetchen):**
+
+```ts
+// server/plugins/chrome.ts
+export default defineEventHandler(async (event) => {
+  // Wird automatisch von useAsyncData / useFetch aufgerufen
+});
+```
+
+**Layout:**
+
+```vue
+<!-- layouts/default.vue -->
+<script setup lang="ts">
+const { locale } = useI18n();
+const config = useRuntimeConfig();
+
+const { data: headerHtml } = await useFetch(
+  () => `${config.public.scsApiUrl}/api/header/render?lang=${locale.value}&large-animation`,
+  { key: `chrome-header-${locale.value}` }
+);
+
+const { data: footerHtml } = await useFetch(
+  () => `${config.public.scsApiUrl}/api/footer/render?lang=${locale.value}`,
+  { key: `chrome-footer-${locale.value}` }
+);
+
+onMounted(() => {
+  import('@startnext/chrome');
+});
+</script>
+
+<template>
+  <div v-if="headerHtml" v-html="headerHtml" style="display: contents" />
+  <startnext-header v-else :lang="locale" :api-url="config.public.scsApiUrl" />
+
+  <main>
+    <slot />
+  </main>
+
+  <div v-if="footerHtml" v-html="footerHtml" style="display: contents" />
+  <startnext-footer v-else :lang="locale" :api-url="config.public.scsApiUrl" />
+</template>
+```
+
+**Nuxt Config (Custom Elements registrieren):**
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  vue: {
+    compilerOptions: {
+      isCustomElement: (tag) => tag.startsWith('startnext-'),
+    },
+  },
+  runtimeConfig: {
+    public: {
+      scsApiUrl: process.env.SCS_API_URL || 'https://scs-api.vercel.app',
+    },
+  },
+});
+```
+
+### PHP / Vanilla HTML
+
+```php
+<?php
+$apiUrl = 'https://scs-api.vercel.app';
+$lang = 'de';
+
+$headerHtml = @file_get_contents("$apiUrl/api/header/render?lang=$lang&large-animation");
+$footerHtml = @file_get_contents("$apiUrl/api/footer/render?lang=$lang");
+?>
+<!DOCTYPE html>
+<html lang="<?= $lang ?>">
+<head>
+  <script type="module" src="https://unpkg.com/@startnext/chrome@latest/dist/index.js"></script>
+</head>
+<body>
+  <?= $headerHtml ?: '<startnext-header api-url="' . $apiUrl . '"></startnext-header>' ?>
+
+  <main><!-- Content --></main>
+
+  <?= $footerHtml ?: '<startnext-footer api-url="' . $apiUrl . '"></startnext-footer>' ?>
+</body>
+</html>
+```
+
+### Edge Side Includes (ESI)
+
+```html
+<!-- Varnish / CDN ESI -->
+<esi:try>
+  <esi:attempt>
+    <esi:include src="/api/header/render?lang=de&large-animation" />
+  </esi:attempt>
+  <esi:except>
+    <startnext-header api-url="https://scs-api.vercel.app"></startnext-header>
+  </esi:except>
+</esi:try>
+```
+
+---
+
+## Render Entry Point (Server-seitig)
+
+Das Paket exportiert einen server-sicheren Subpath `@startnext/chrome/render` mit reinen String-Funktionen (keine Browser-Abhaengigkeiten):
+
+```javascript
+import {
+  renderHeader, renderBurgerItems, renderUserItems,
+  renderFooter,
+  headerCSS, footerCSS,
+  toHeaderRenderData, toFooterRenderData,
+  getUiString, getIcon,
+} from '@startnext/chrome/render';
+```
+
+| Export | Beschreibung |
+|--------|-------------|
+| `renderHeader(props)` | Header Shadow DOM HTML |
+| `renderBurgerItems(data, expandedSections)` | Burger-Menue Items HTML |
+| `renderUserItems(data, expandedSections)` | User-Menue Items HTML |
+| `renderFooter(data)` | Footer Shadow DOM HTML |
+| `headerCSS`, `footerCSS`, `resetCSS` | CSS als Strings |
+| `getIcon(name, size?)` | SVG-Icon als String |
+| `getUiString(key, lang)` | UI-String (ARIA Labels etc.) |
+| `toHeaderRenderData(apiData)` | API-Daten -> HeaderData (fuegt stub `theme` hinzu) |
+| `toFooterRenderData(apiData)` | API-Daten -> FooterData (fuegt stub `theme` hinzu) |
+| `renderHeaderCrawlerNav(data)` | Crawler-`<nav>` fuer Header (optional, fuer Client-Side Rendering) |
+| `renderFooterCrawlerNav(data)` | Crawler-`<nav>` fuer Footer (optional, fuer Client-Side Rendering) |
 
 ## Browser Support
 
@@ -417,14 +580,13 @@ src/
 - Shadow DOM (open mode), kein Virtual DOM, Declarative Shadow DOM fuer SSR
 
 **Zwei Entry Points:**
-- `src/index.ts` → `dist/index.js` (ESM) + `dist/index.umd.js` (UMD) — Browser, registriert Custom Elements
-- `src/render.ts` → `dist/render.js` (ESM) — Server, reine String-Funktionen ohne Browser-Abhaengigkeiten
+- `src/index.ts` -> `dist/index.js` (ESM) + `dist/index.umd.js` (UMD) — Browser, registriert Custom Elements
+- `src/render.ts` -> `dist/render.js` (ESM) — Server, reine String-Funktionen ohne Browser-Abhaengigkeiten
 
 ## Monorepo Structure
 
 ```
 packages/
-  scs-web-component/   ← dieses Paket
-  scs-api/             ← Express API Service (nutzt @startnext/chrome/render fuer SSR)
+  scs-web-component/   <- dieses Paket
+  scs-api/             <- Express API Service (nutzt @startnext/chrome/render fuer SSR)
 ```
-

package/dist/components/footer/StartnextFooter.d.ts

@@ -4,8 +4,6 @@ export declare class StartnextFooter extends BaseComponent {
     private data;
     /** Cached API data per language. */
     private apiCache;
-    /** True while SSR content should be preserved (between hydration and first API data load). */
-    private _preserveSsrContent;
     /** Bound handler for document-level language-change events. */
     private _langSyncHandler;
     private get currentLang();
@@ -17,6 +15,9 @@ export declare class StartnextFooter extends BaseComponent {
     private teardownLangSync;
     /** Return cached API data if available, otherwise defaults (theme only). */
     private getFooterData;
+    /** Parse SSR-embedded data to populate the API cache during hydration.
+     *  Eliminates the need for a client-side fetch when SSR HTML is used. */
+    private parseSsrProps;
     /** If api-url is set, fetch footer data from API and re-render. */
     private loadApiData;
     private renderLightDomNav;

package/dist/components/footer/StartnextFooter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StartnextFooter.d.ts","sourceRoot":"","sources":["../../../src/components/footer/StartnextFooter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAMzD,qBAAa,eAAgB,SAAQ,aAAa;IAChD,MAAM,CAAC,kBAAkB,WAAoC;IAE7D,OAAO,CAAC,IAAI,CAAc;IAC1B,oCAAoC;IACpC,OAAO,CAAC,QAAQ,CAAiC;IACjD,8FAA8F;IAC9F,OAAO,CAAC,mBAAmB,CAAS;IACpC,+DAA+D;IAC/D,OAAO,CAAC,gBAAgB,CAAqC;IAE7D,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,KAAK,eAAe,GAE1B;IAED,iBAAiB,IAAI,IAAI;IAmBzB,oBAAoB,IAAI,IAAI;IAK5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAqB5C,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,gBAAgB;IAOxB,4EAA4E;IAC5E,OAAO,CAAC,aAAa;IAMrB,mEAAmE;YACrD,WAAW;IAwBzB,OAAO,CAAC,iBAAiB;IAiCzB,OAAO,CAAC,MAAM;IAkBd,OAAO,CAAC,YAAY;CAUrB"}
+{"version":3,"file":"StartnextFooter.d.ts","sourceRoot":"","sources":["../../../src/components/footer/StartnextFooter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAMzD,qBAAa,eAAgB,SAAQ,aAAa;IAChD,MAAM,CAAC,kBAAkB,WAAoC;IAE7D,OAAO,CAAC,IAAI,CAAc;IAC1B,oCAAoC;IACpC,OAAO,CAAC,QAAQ,CAAiC;IACjD,+DAA+D;IAC/D,OAAO,CAAC,gBAAgB,CAAqC;IAE7D,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,KAAK,eAAe,GAE1B;IAED,iBAAiB,IAAI,IAAI;IAiBzB,oBAAoB,IAAI,IAAI;IAK5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAe5C,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,gBAAgB;IAOxB,4EAA4E;IAC5E,OAAO,CAAC,aAAa;IAMrB;6EACyE;IACzE,OAAO,CAAC,aAAa;IAWrB,mEAAmE;YACrD,WAAW;IAuBzB,OAAO,CAAC,iBAAiB;IAiCzB,OAAO,CAAC,MAAM;IAkBd,OAAO,CAAC,YAAY;CAUrB"}

package/dist/components/header/StartnextHeader.d.ts

@@ -12,9 +12,6 @@ export declare class StartnextHeader extends BaseComponent {
     private pendingRaf;
     /** Cached API data per language, so we don't re-fetch on every re-render. */
     private apiCache;
-    /** True while SSR content should be preserved (between hydration and first API data load).
-     *  Prevents attribute changes from triggering a full re-render with empty default data. */
-    private _preserveSsrContent;
     private handleScrollBound;
     private handleKeydownBound;
     private handleResizeBound;
@@ -28,6 +25,9 @@ export declare class StartnextHeader extends BaseComponent {
     connectedCallback(): void;
     /** Return cached API data if available, otherwise defaults (theme only). */
     private getHeaderData;
+    /** Parse SSR-embedded data to populate the API cache during hydration.
+     *  Eliminates the need for a client-side fetch when SSR HTML is used. */
+    private parseSsrProps;
     /** If api-url is set, fetch header data from API and re-render. */
     private loadApiData;
     disconnectedCallback(): void;

package/dist/components/header/StartnextHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StartnextHeader.d.ts","sourceRoot":"","sources":["../../../src/components/header/StartnextHeader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAWzD,qBAAa,eAAgB,SAAQ,aAAa;IAChD,OAAO,CAAC,IAAI,CAAc;IAC1B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,gBAAgB,CAAqB;IAC7C,OAAO,CAAC,UAAU,CAA8B;IAChD,OAAO,CAAC,UAAU,CAAuB;IACzC,6EAA6E;IAC7E,OAAO,CAAC,QAAQ,CAAiC;IACjD;+FAC2F;IAC3F,OAAO,CAAC,mBAAmB,CAAS;IAEpC,OAAO,CAAC,iBAAiB,CAAgC;IACzD,OAAO,CAAC,kBAAkB,CAAiC;IAC3D,OAAO,CAAC,iBAAiB,CAAgC;IACzD,OAAO,CAAC,mBAAmB,CAAkC;IAE7D,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,OAAO,CAAC,aAAa,CAAS;IAE9B,OAAO,KAAK,WAAW,GAEtB;IAED,6EAA6E;IAC7E,OAAO,KAAK,aAAa,GAGxB;IAED,OAAO,CAAC,EAAE;IAIV,iBAAiB,IAAI,IAAI;IA4BzB,4EAA4E;IAC5E,OAAO,CAAC,aAAa;IAMrB,mEAAmE;YACrD,WAAW;IA8BzB,oBAAoB,IAAI,IAAI;IAU5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAqB5C,gEAAgE;IAChE,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,UAAU;IA0BlB,OAAO,CAAC,YAAY;IAgDpB,OAAO,CAAC,mBAAmB;IAoC3B,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,oBAAoB;IAK5B,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,aAAa;IAmBrB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,cAAc;IA0BtB,OAAO,CAAC,iBAAiB;IAsDzB,OAAO,CAAC,MAAM;IAuCd,OAAO,CAAC,YAAY;CAkErB"}
+{"version":3,"file":"StartnextHeader.d.ts","sourceRoot":"","sources":["../../../src/components/header/StartnextHeader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAWzD,qBAAa,eAAgB,SAAQ,aAAa;IAChD,OAAO,CAAC,IAAI,CAAc;IAC1B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,gBAAgB,CAAqB;IAC7C,OAAO,CAAC,UAAU,CAA8B;IAChD,OAAO,CAAC,UAAU,CAAuB;IACzC,6EAA6E;IAC7E,OAAO,CAAC,QAAQ,CAAiC;IAEjD,OAAO,CAAC,iBAAiB,CAAgC;IACzD,OAAO,CAAC,kBAAkB,CAAiC;IAC3D,OAAO,CAAC,iBAAiB,CAAgC;IACzD,OAAO,CAAC,mBAAmB,CAAkC;IAE7D,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,OAAO,CAAC,aAAa,CAAS;IAE9B,OAAO,KAAK,WAAW,GAEtB;IAED,6EAA6E;IAC7E,OAAO,KAAK,aAAa,GAGxB;IAED,OAAO,CAAC,EAAE;IAIV,iBAAiB,IAAI,IAAI;IAuBzB,4EAA4E;IAC5E,OAAO,CAAC,aAAa;IAMrB;6EACyE;IACzE,OAAO,CAAC,aAAa;IAWrB,mEAAmE;YACrD,WAAW;IA6BzB,oBAAoB,IAAI,IAAI;IAU5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAa5C,gEAAgE;IAChE,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,UAAU;IA0BlB,OAAO,CAAC,YAAY;IAgDpB,OAAO,CAAC,mBAAmB;IAoC3B,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,oBAAoB;IAK5B,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,aAAa;IAmBrB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,cAAc;IA0BtB,OAAO,CAAC,iBAAiB;IAsDzB,OAAO,CAAC,MAAM;IAuCd,OAAO,CAAC,YAAY;CAkErB"}