@bytebrand/fe-ui-core-autobahn 1.0.138 → 1.0.140

package/constants/app.ts

@@ -40,7 +40,17 @@ export const LOCAL_STORAGE_KEY = {
   i18n_KEY: 'i18nLanguage'
 };
 
-export const DEFAULT_LANG: string = typeof window !== 'undefined' ? localStorage.getItem(LOCAL_STORAGE_KEY.i18n_KEY) : 'de';
+// ADV-284: evaluated at import time — with site storage blocked, reading localStorage throws a
+// SecurityError that took down the whole bundle. Blocked storage behaves like "nothing saved".
+const readStoredLang = (): string | null => {
+  try {
+    return localStorage.getItem(LOCAL_STORAGE_KEY.i18n_KEY);
+  } catch (e) {
+    return null;
+  }
+};
+
+export const DEFAULT_LANG: string = typeof window !== 'undefined' ? readStoredLang() : 'de';
 
 // Default support contact phone
 export const CONTACT_PHONE: string = '+498004030182';

package/constants/core.ts

@@ -35,7 +35,18 @@ export const LOCAL_STORAGE_KEY = {
   i18n_KEY: 'i18nLanguage'
 };
 
-export const DEFAULT_LANG: string = (typeof window !== 'undefined' ? window.localStorage.getItem(LOCAL_STORAGE_KEY.i18n_KEY) : null) ?? 'de';
+// ADV-284: evaluated at import time — with site storage blocked, merely reading
+// window.localStorage throws a SecurityError, which took down the whole bundle (landing
+// page never rendered). Treat blocked storage like "no language saved".
+const readStoredLang = (): string | null => {
+  try {
+    return typeof window !== 'undefined' ? window.localStorage.getItem(LOCAL_STORAGE_KEY.i18n_KEY) : null;
+  } catch (e) {
+    return null;
+  }
+};
+
+export const DEFAULT_LANG: string = readStoredLang() ?? 'de';
 
 export const ROW_STYLES = {
   marginBottom: 10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.138",
+  "version": "1.0.140",
   "description": "auto.de md3 (Autobahn) design system — UI primitives, cards, chrome, VDP modules, theme CSS and locales. Ships raw TypeScript source (like fe-ui-core before it); each consumer's bundler compiles it.",
   "main": "index.ts",
   "license": "UNLICENSED",

package/vdp/VdpModules.tsx

@@ -2240,28 +2240,29 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open, initialShowBreakdown]);
   // in-sheet "Finanzierungs-/Leasingdetails" toggle (mobile): expanding the breakdown alone left
-  // it below the fold — scroll the sheet body all the way down (same end state as opening via
-  // the page's details link) in one quick ~300ms ease-out. The click also skips
-  // .fin-modal--expanded's 0.35s min-height transition (see the toggle's onClick): a scroll
-  // running while the sheet is still growing gets clamped/retargeted every frame and stutters.
-  // Hand-rolled rAF instead of scrollTo({behavior:'smooth'}) so the duration is ours, not the
-  // browser's. Collapsing doesn't scroll.
+  // it below the fold — scroll the sheet body so the "Repräsentatives Beispiel" headline lands at
+  // the top of the body (not all the way down: that hid the headline and overshot). Runs
+  // alongside .fin-modal--expanded's own 0.35s min-height transition instead of waiting it out
+  // or disabling it: the target is re-read every frame and clamped to the current max scroll,
+  // so the growing sheet and the scroll finish together in one motion. Hand-rolled rAF instead
+  // of scrollTo({behavior:'smooth'}) so the duration is ours. Collapsing doesn't scroll.
   const revealBreakdownRef = React.useRef(false);
   React.useEffect(() => {
     if (!showBreakdown || !revealBreakdownRef.current) return;
     revealBreakdownRef.current = false;
-    const body = mobileBreakdownRef.current?.closest('.fin-modal-body') as HTMLElement | null | undefined;
-    if (!body) return;
+    const el = mobileBreakdownRef.current;
+    const body = el?.closest('.fin-modal-body') as HTMLElement | null | undefined;
+    if (!el || !body) return;
     const from = body.scrollTop;
-    const dist = body.scrollHeight - body.clientHeight - from;
-    if (dist <= 0) return;
-    const duration = 300;
+    const duration = 400;
     let start: number | null = null;
     let raf = 0;
     const step = (now: number): void => {
       if (start === null) start = now;
       const p = Math.min(1, (now - start) / duration);
-      body.scrollTop = from + dist * (1 - Math.pow(1 - p, 3));
+      const headlineTop = el.getBoundingClientRect().top - body.getBoundingClientRect().top + body.scrollTop;
+      const to = Math.max(from, Math.min(headlineTop - 8, body.scrollHeight - body.clientHeight));
+      body.scrollTop = from + (to - from) * (1 - Math.pow(1 - p, 3));
       if (p < 1) raf = window.requestAnimationFrame(step);
     };
     raf = window.requestAnimationFrame(step);
@@ -3443,9 +3444,6 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                   type="button"
                   onClick={() => {
                     revealBreakdownRef.current = !showBreakdown;
-                    // expanding: grow the sheet to full height at once (no min-height
-                    // transition) so the scroll-down above runs on a settled layout
-                    if (!showBreakdown && sheetRef.current) sheetRef.current.style.transition = 'none';
                     setShowBreakdown((v) => !v);
                   }}
                   style={{ ...expanderBtnStyle, justifyContent: 'center', padding: '2px 0 20px' }}>