@donotdev/ui 0.0.11 → 0.0.13

package/dist/internal/common/RouteErrorFallback.js

@@ -104,7 +104,7 @@ export const RouteErrorFallback = ({ error, resetError, componentStack, eventId,
                                 width: '2.5rem',
                                 height: '2.5rem',
                                 color: 'var(--destructive)',
-                            }, "aria-hidden": "true" }) }), _jsxs(Stack, { gap: "medium", children: [_jsx("h1", { className: "dndev-text-base", "data-level": "h1", style: {
+                            }, "aria-hidden": "true" }) }), _jsxs(Stack, { children: [_jsx("h1", { className: "dndev-text-base", "data-level": "h1", style: {
                                     fontSize: 'var(--font-size-2xl)',
                                     fontWeight: 'var(--font-weight-bold)',
                                     margin: 0,
@@ -119,7 +119,7 @@ export const RouteErrorFallback = ({ error, resetError, componentStack, eventId,
                             fontSize: 'var(--font-size-xs)',
                             fontFamily: 'var(--font-mono)',
                             color: 'var(--foreground)',
-                        }, children: [t('routeError.errorId', 'Error ID'), ": ", eventId] })), isDevelopment && errorMessage && (_jsxs(Card, { variant: CARD_VARIANT.MUTED, className: "dndev-w-full", children: [_jsxs(Stack, { direction: "row", align: "center", justify: "between", gap: "medium", children: [_jsx("span", { className: "dndev-text-base", style: {
+                        }, children: [t('routeError.errorId', 'Error ID'), ": ", eventId] })), isDevelopment && errorMessage && (_jsxs(Card, { variant: CARD_VARIANT.MUTED, className: "dndev-w-full", children: [_jsxs(Stack, { direction: "row", align: "center", justify: "between", children: [_jsx("span", { className: "dndev-text-base", style: {
                                             fontSize: 'var(--font-size-sm)',
                                             fontWeight: 'var(--font-weight-semibold)',
                                             color: 'var(--destructive)',
@@ -133,7 +133,7 @@ export const RouteErrorFallback = ({ error, resetError, componentStack, eventId,
                                     color: 'var(--foreground)',
                                     margin: 0,
                                     marginTop: 'var(--gap-sm)',
-                                }, children: errorMessage })] })), _jsxs(Stack, { gap: "medium", className: "dndev-w-full", children: [_jsx(Button, { variant: BUTTON_VARIANT.DESTRUCTIVE, icon: RotateCw, onClick: handleRetry, fullWidth: true, children: t('routeError.tryAgain', 'Try Again') }), _jsxs(Stack, { direction: "row", gap: "medium", justify: "center", children: [_jsx(Link, { path: "/", children: _jsx(Button, { variant: BUTTON_VARIANT.DEFAULT, icon: Home, fullWidth: true, children: t('routeError.goHome', 'Go Home') }) }), _jsx(Button, { variant: BUTTON_VARIANT.OUTLINE, icon: ArrowLeft, onClick: handleGoBack, fullWidth: true, children: t('routeError.goBack', 'Go Back') })] })] }), _jsx("p", { className: "dndev-text-base", style: {
+                                }, children: errorMessage })] })), _jsxs(Stack, { className: "dndev-w-full", children: [_jsx(Button, { variant: BUTTON_VARIANT.DESTRUCTIVE, icon: RotateCw, onClick: handleRetry, fullWidth: true, children: t('routeError.tryAgain', 'Try Again') }), _jsxs(Stack, { direction: "row", justify: "center", children: [_jsx(Link, { path: "/", children: _jsx(Button, { variant: BUTTON_VARIANT.DEFAULT, icon: Home, fullWidth: true, children: t('routeError.goHome', 'Go Home') }) }), _jsx(Button, { variant: BUTTON_VARIANT.OUTLINE, icon: ArrowLeft, onClick: handleGoBack, fullWidth: true, children: t('routeError.goBack', 'Go Back') })] })] }), _jsx("p", { className: "dndev-text-base", style: {
                             fontSize: 'var(--font-size-sm)',
                             color: 'var(--muted-foreground)',
                             margin: 0,

package/dist/internal/devtools/components/ConfigTab.js

@@ -57,5 +57,5 @@ export const ConfigTab = () => {
         label: _jsx(Text, { className: "dndev-font-mono dndev-text-xs", children: key }),
         value: _jsx(MaskedValue, { keyName: key, value: String(value) }),
     }));
-    return (_jsxs(Stack, { gap: "medium", style: { padding: 'var(--gap-md)' }, children: [_jsx(Card, { title: "Framework", subtitle: source.source, children: _jsx(DescriptionList, { items: frameworkItems }) }), summaryItems.length > 0 && (_jsx(Card, { title: "Discovery", children: _jsx(DescriptionList, { items: summaryItems }) })), envItems.length > 0 && (_jsx(Card, { title: "Environment", subtitle: `${envItems.length} variables`, children: _jsx(DescriptionList, { items: envItems }) }))] }));
+    return (_jsxs(Stack, { style: { padding: 'var(--gap-md)' }, children: [_jsx(Card, { title: "Framework", subtitle: source.source, children: _jsx(DescriptionList, { items: frameworkItems }) }), summaryItems.length > 0 && (_jsx(Card, { title: "Discovery", children: _jsx(DescriptionList, { items: summaryItems }) })), envItems.length > 0 && (_jsx(Card, { title: "Environment", subtitle: `${envItems.length} variables`, children: _jsx(DescriptionList, { items: envItems }) }))] }));
 };

package/dist/internal/devtools/components/CookieTab.js

@@ -144,7 +144,7 @@ export const CookieTab = () => {
                                         categories,
                                         timestamp,
                                         version,
-                                    }), variant: BUTTON_VARIANT.GHOST, onCopy: () => toast('success', 'Consent state copied') })] }), children: _jsx(DescriptionList, { items: consentStateItems }) }), _jsx(Card, { title: _jsxs(Stack, { direction: "row", align: "center", justify: "between", className: "dndev-w-full", children: [_jsx("span", { children: "Categories" }), _jsx(CopyToClipboard, { text: formatJSON(categories), variant: BUTTON_VARIANT.GHOST, onCopy: () => toast('success', 'Categories copied') })] }), children: _jsx(DescriptionList, { items: categoryItems }) }), _jsx(Card, { title: _jsxs(Stack, { direction: "row", align: "center", justify: "between", className: "dndev-w-full", children: [_jsx("span", { children: "Cookie Value" }), _jsxs(Stack, { direction: "row", gap: "tight", children: [_jsx(CopyToClipboard, { text: cookieValue || 'null', variant: BUTTON_VARIANT.GHOST, onCopy: () => toast('success', 'Cookie value copied') }), _jsx(Button, { onClick: handleClearCookie, icon: Trash2, variant: BUTTON_VARIANT.GHOST, title: "Clear Cookie", children: "Clear" })] })] }), children: _jsx("pre", { className: "dndev-overflow-y-auto dndev-font-mono dndev-text-xs dndev-max-h-60", children: cookieValue || 'No cookie found' }) }), _jsx(Card, { title: _jsxs(Stack, { direction: "row", align: "center", justify: "between", className: "dndev-w-full", children: [_jsx("span", { children: "DOM Elements" }), _jsx(CopyToClipboard, { text: formatJSON(domInfo), variant: BUTTON_VARIANT.GHOST, onCopy: () => toast('success', 'DOM info copied') })] }), children: _jsxs(Stack, { gap: "medium", children: [_jsxs("div", { children: [_jsx(Label, { className: "dndev-font-semibold", children: "Cookie Banner:" }), _jsxs(Stack, { gap: "tight", className: "dndev-ml-md", children: [_jsxs(Text, { children: ["Exists: ", domInfo.cookieBanner?.exists ? '✅' : '❌'] }), _jsxs(Text, { children: ["Visible: ", domInfo.cookieBanner?.visible ? '✅' : '❌'] }), _jsxs(Text, { children: ["z-index: ", domInfo.cookieBanner?.zIndex || 'N/A'] }), _jsxs(Text, { children: ["Position: ", domInfo.cookieBanner?.position || 'N/A'] })] })] }), _jsxs("div", { children: [_jsx(Label, { className: "dndev-font-semibold", children: "Dialogs:" }), _jsxs(Stack, { gap: "tight", className: "dndev-ml-md", children: [_jsxs(Text, { children: ["Count: ", domInfo.dialogs?.count || 0] }), _jsxs(Text, { children: ["Open: ", domInfo.dialogs?.open || 0] })] })] }), _jsxs("div", { children: [_jsx(Label, { className: "dndev-font-semibold", children: "Overlays:" }), _jsxs(Stack, { gap: "tight", className: "dndev-ml-md", children: [_jsxs(Text, { children: ["Count: ", domInfo.overlays?.count || 0] }), _jsxs(Text, { children: ["Visible: ", domInfo.overlays?.visible || 0] })] })] }), _jsxs("div", { children: [_jsx(Label, { className: "dndev-font-semibold", children: "Portals:" }), _jsx(Stack, { gap: "tight", className: "dndev-ml-md", children: _jsxs(Text, { children: ["Count: ", domInfo.portals?.count || 0] }) })] })] }) }), _jsx(Card, { title: _jsxs(Stack, { direction: "row", align: "center", justify: "between", className: "dndev-w-full", children: [_jsx("span", { children: "Z-Index Stacking" }), _jsx(CopyToClipboard, { text: formatJSON(zIndexInfo), variant: BUTTON_VARIANT.GHOST, onCopy: () => toast('success', 'Z-index info copied') })] }), children: _jsxs(Stack, { gap: "medium", children: [_jsxs("div", { children: [_jsx(Label, { className: "dndev-font-semibold", children: "CSS Variables:" }), _jsx(Stack, { gap: "tight", className: "dndev-ml-md dndev-font-mono dndev-text-sm", children: Object.entries(zIndexInfo.cssVariables || {}).map(([key, value]) => (_jsxs(Text, { children: [key, ": ", String(value) || 'not set'] }, key))) })] }), _jsxs("div", { children: [_jsx(Label, { className: "dndev-font-semibold", children: "Computed Values:" }), _jsx(Stack, { gap: "tight", className: "dndev-ml-md dndev-font-mono dndev-text-sm", children: Object.entries(zIndexInfo.computed || {}).map(([key, value]) => (_jsxs(Text, { children: [key, ": ", String(value)] }, key))) })] })] }) }), _jsx(Card, { title: _jsxs(Stack, { direction: "row", align: "center", justify: "between", className: "dndev-w-full", children: [_jsx("span", { children: "Full Store State" }), _jsx(CopyToClipboard, { text: formatJSON({
+                                    }), variant: BUTTON_VARIANT.GHOST, onCopy: () => toast('success', 'Consent state copied') })] }), children: _jsx(DescriptionList, { items: consentStateItems }) }), _jsx(Card, { title: _jsxs(Stack, { direction: "row", align: "center", justify: "between", className: "dndev-w-full", children: [_jsx("span", { children: "Categories" }), _jsx(CopyToClipboard, { text: formatJSON(categories), variant: BUTTON_VARIANT.GHOST, onCopy: () => toast('success', 'Categories copied') })] }), children: _jsx(DescriptionList, { items: categoryItems }) }), _jsx(Card, { title: _jsxs(Stack, { direction: "row", align: "center", justify: "between", className: "dndev-w-full", children: [_jsx("span", { children: "Cookie Value" }), _jsxs(Stack, { direction: "row", gap: "tight", children: [_jsx(CopyToClipboard, { text: cookieValue || 'null', variant: BUTTON_VARIANT.GHOST, onCopy: () => toast('success', 'Cookie value copied') }), _jsx(Button, { onClick: handleClearCookie, icon: Trash2, variant: BUTTON_VARIANT.GHOST, title: "Clear Cookie", children: "Clear" })] })] }), children: _jsx("pre", { className: "dndev-overflow-y-auto dndev-font-mono dndev-text-xs dndev-max-h-60", children: cookieValue || 'No cookie found' }) }), _jsx(Card, { title: _jsxs(Stack, { direction: "row", align: "center", justify: "between", className: "dndev-w-full", children: [_jsx("span", { children: "DOM Elements" }), _jsx(CopyToClipboard, { text: formatJSON(domInfo), variant: BUTTON_VARIANT.GHOST, onCopy: () => toast('success', 'DOM info copied') })] }), children: _jsxs(Stack, { children: [_jsxs("div", { children: [_jsx(Label, { className: "dndev-font-semibold", children: "Cookie Banner:" }), _jsxs(Stack, { gap: "tight", className: "dndev-ml-md", children: [_jsxs(Text, { children: ["Exists: ", domInfo.cookieBanner?.exists ? '✅' : '❌'] }), _jsxs(Text, { children: ["Visible: ", domInfo.cookieBanner?.visible ? '✅' : '❌'] }), _jsxs(Text, { children: ["z-index: ", domInfo.cookieBanner?.zIndex || 'N/A'] }), _jsxs(Text, { children: ["Position: ", domInfo.cookieBanner?.position || 'N/A'] })] })] }), _jsxs("div", { children: [_jsx(Label, { className: "dndev-font-semibold", children: "Dialogs:" }), _jsxs(Stack, { gap: "tight", className: "dndev-ml-md", children: [_jsxs(Text, { children: ["Count: ", domInfo.dialogs?.count || 0] }), _jsxs(Text, { children: ["Open: ", domInfo.dialogs?.open || 0] })] })] }), _jsxs("div", { children: [_jsx(Label, { className: "dndev-font-semibold", children: "Overlays:" }), _jsxs(Stack, { gap: "tight", className: "dndev-ml-md", children: [_jsxs(Text, { children: ["Count: ", domInfo.overlays?.count || 0] }), _jsxs(Text, { children: ["Visible: ", domInfo.overlays?.visible || 0] })] })] }), _jsxs("div", { children: [_jsx(Label, { className: "dndev-font-semibold", children: "Portals:" }), _jsx(Stack, { gap: "tight", className: "dndev-ml-md", children: _jsxs(Text, { children: ["Count: ", domInfo.portals?.count || 0] }) })] })] }) }), _jsx(Card, { title: _jsxs(Stack, { direction: "row", align: "center", justify: "between", className: "dndev-w-full", children: [_jsx("span", { children: "Z-Index Stacking" }), _jsx(CopyToClipboard, { text: formatJSON(zIndexInfo), variant: BUTTON_VARIANT.GHOST, onCopy: () => toast('success', 'Z-index info copied') })] }), children: _jsxs(Stack, { children: [_jsxs("div", { children: [_jsx(Label, { className: "dndev-font-semibold", children: "CSS Variables:" }), _jsx(Stack, { gap: "tight", className: "dndev-ml-md dndev-font-mono dndev-text-sm", children: Object.entries(zIndexInfo.cssVariables || {}).map(([key, value]) => (_jsxs(Text, { children: [key, ": ", String(value) || 'not set'] }, key))) })] }), _jsxs("div", { children: [_jsx(Label, { className: "dndev-font-semibold", children: "Computed Values:" }), _jsx(Stack, { gap: "tight", className: "dndev-ml-md dndev-font-mono dndev-text-sm", children: Object.entries(zIndexInfo.computed || {}).map(([key, value]) => (_jsxs(Text, { children: [key, ": ", String(value)] }, key))) })] })] }) }), _jsx(Card, { title: _jsxs(Stack, { direction: "row", align: "center", justify: "between", className: "dndev-w-full", children: [_jsx("span", { children: "Full Store State" }), _jsx(CopyToClipboard, { text: formatJSON({
                                         hasConsented,
                                         categories,
                                         timestamp,

package/dist/internal/devtools/components/DesignTab.js

@@ -359,11 +359,11 @@ export const DesignTab = () => {
         colorRatio.secondary <= 40 &&
         colorRatio.accent >= 5 &&
         colorRatio.accent <= 20;
-    return (_jsxs(Stack, { gap: "medium", style: { padding: 'var(--gap-md)' }, children: [_jsx(Accordion, { type: "single", collapsible: true, items: [
+    return (_jsxs(Stack, { style: { padding: 'var(--gap-md)' }, children: [_jsx(Accordion, { type: "single", collapsible: true, items: [
                     {
                         value: 'theme',
                         trigger: _jsx("span", { children: "Theme Info" }),
-                        content: (_jsxs(Stack, { gap: "medium", children: [_jsx(Card, { title: "Theme", subtitle: currentTheme, children: _jsx(DescriptionList, { items: themeItems }) }), _jsx(Card, { title: "CSS Variables", subtitle: `${Object.keys(cssVars).length} variables`, children: _jsx(ScrollArea, { className: "dndev-max-h-48", children: _jsx(Stack, { gap: "tight", children: Object.entries(cssVars).map(([name, value]) => (_jsxs(Stack, { direction: "row", align: "center", justify: "between", gap: "tight", children: [_jsx(Text, { className: "dndev-font-mono dndev-text-xs", children: name }), _jsxs(Stack, { direction: "row", align: "center", gap: "tight", children: [_jsx("div", { style: {
+                        content: (_jsxs(Stack, { children: [_jsx(Card, { title: "Theme", subtitle: currentTheme, children: _jsx(DescriptionList, { items: themeItems }) }), _jsx(Card, { title: "CSS Variables", subtitle: `${Object.keys(cssVars).length} variables`, children: _jsx(ScrollArea, { className: "dndev-max-h-48", children: _jsx(Stack, { gap: "tight", children: Object.entries(cssVars).map(([name, value]) => (_jsxs(Stack, { direction: "row", align: "center", justify: "between", gap: "tight", children: [_jsx(Text, { className: "dndev-font-mono dndev-text-xs", children: name }), _jsxs(Stack, { direction: "row", align: "center", gap: "tight", children: [_jsx("div", { style: {
                                                                     width: '1rem',
                                                                     height: '1rem',
                                                                     backgroundColor: `var(${name})`,

package/dist/internal/devtools/components/StoresTab.js

@@ -59,9 +59,9 @@ export const StoresTab = () => {
     }, [refreshStores]);
     const getDisplayName = (name) => STORE_NAMES[name] || name.replace(/-store$/, '').replace(/-/g, ' ');
     if (storeNames.length === 0) {
-        return (_jsx(Stack, { gap: "medium", style: { padding: 'var(--gap-md)' }, children: _jsx(Card, { title: "Stores", subtitle: "No stores registered", children: _jsx(Text, { className: "dndev-text-muted-foreground", children: "globalThis._DNDEV_STORES_ is empty or not initialized." }) }) }));
+        return (_jsx(Stack, { style: { padding: 'var(--gap-md)' }, children: _jsx(Card, { title: "Stores", subtitle: "No stores registered", children: _jsx(Text, { className: "dndev-text-muted-foreground", children: "globalThis._DNDEV_STORES_ is empty or not initialized." }) }) }));
     }
-    return (_jsx(Stack, { gap: "medium", style: { padding: 'var(--gap-md)' }, children: _jsx(Card, { title: _jsxs(Stack, { direction: "row", align: "center", justify: "between", className: "dndev-w-full", children: [_jsx("span", { children: "Stores" }), _jsxs(Stack, { direction: "row", align: "center", gap: "tight", children: [_jsx(Badge, { variant: BADGE_VARIANT.SECONDARY, children: storeNames.length }), _jsx(Button, { variant: BUTTON_VARIANT.GHOST, icon: RefreshCw, onClick: refreshStores, title: "Refresh stores" })] })] }), children: _jsx(Accordion, { type: "single", collapsible: true, items: storeNames.map((name) => {
+    return (_jsx(Stack, { style: { padding: 'var(--gap-md)' }, children: _jsx(Card, { title: _jsxs(Stack, { direction: "row", align: "center", justify: "between", className: "dndev-w-full", children: [_jsx("span", { children: "Stores" }), _jsxs(Stack, { direction: "row", align: "center", gap: "tight", children: [_jsx(Badge, { variant: BADGE_VARIANT.SECONDARY, children: storeNames.length }), _jsx(Button, { variant: BUTTON_VARIANT.GHOST, icon: RefreshCw, onClick: refreshStores, title: "Refresh stores" })] })] }), children: _jsx(Accordion, { type: "single", collapsible: true, items: storeNames.map((name) => {
                     const state = storeStates[name];
                     const hasError = state?._error;
                     return {

package/dist/internal/layout/config/presets/game.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"game.d.ts","sourceRoot":"","sources":["../../../../../src/internal/layout/config/presets/game.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AASnD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,UAAU,EAAE,YAkCxB,CAAC"}
+{"version":3,"file":"game.d.ts","sourceRoot":"","sources":["../../../../../src/internal/layout/config/presets/game.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAYnD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,UAAU,EAAE,YAwCxB,CAAC"}

package/dist/internal/layout/config/presets/game.js

@@ -13,6 +13,9 @@ import { DISPLAY } from '@donotdev/components';
 import { LanguageSelector } from '@donotdev/core';
 import { AuthHeader } from '../../../../components/auth';
 import { GameTitle, ThemeToggle, } from '../../../../components/layout/components';
+import { FooterCopyright } from '../../components/footer/FooterCopyright';
+import { FooterLegalLinks } from '../../components/footer/FooterLegalLinks';
+import { DEFAULT_SLOTS } from '../defaults';
 /**
  * Game preset - mobile gaming layout
  *
@@ -37,12 +40,14 @@ export const gamePreset = {
         mergedBar: {
             position: 'top',
             // Desktop → Mobile mapping:
-            trigger: () => _jsx(GameTitle, {}), // header.center → trigger (GameTitle, since header.start is null)
-            top: () => _jsx(GameTitle, {}), // header.center → top (GameTitle)
-            content: () => null, // No sidebar → content is null
-            bottom: () => (
-            // header.end → bottom (Auth, Language, Theme)
+            trigger: () => _jsx(GameTitle, {}), // header.center → trigger
+            top: () => (
+            // header.end → top (Auth, Language, Theme)
             _jsxs(_Fragment, { children: [_jsx(AuthHeader, { display: DISPLAY.AUTO }), _jsx(LanguageSelector, { display: DISPLAY.AUTO }), _jsx(ThemeToggle, { display: DISPLAY.AUTO })] })),
+            content: DEFAULT_SLOTS.sidebar.content, // Navigation menu
+            bottom: () => (
+            // Footer content: copyright + legal links (includes branding)
+            _jsxs(_Fragment, { children: [_jsx(FooterCopyright, {}), _jsx(FooterLegalLinks, {})] })),
         },
     },
 };

package/dist/internal/layout/zones/DnDevFooter.js

@@ -49,7 +49,7 @@ function DnDevFooterComponent({ app = {} }) {
         : copyrightConfig;
     // Desktop/Wide: 2-zone layout [Copyright] | [Links + DoNotDev]
     if (isLaptopOrDesktop) {
-        return (_jsx("footer", { role: "contentinfo", className: "footer", children: _jsxs(Stack, { direction: "row", align: "center", justify: "between", gap: "none", children: [showCopyright && (_jsx("div", { className: "dndev-flex dndev-justify-start", children: _jsx("span", { className: "footer-copyright", children: copyrightText }) })), _jsx("div", { className: "dndev-flex dndev-justify-end", children: _jsxs(Stack, { direction: "row", gap: "medium", align: "center", children: [links.map((link) => (_jsx(Link, { path: link.path, style: { fontSize: 'var(--font-size-xs)' }, children: maybeTranslate(t, link.label) }, link.path))), _jsx(FooterBranding, {})] }) })] }) }));
+        return (_jsx("footer", { role: "contentinfo", className: "footer", children: _jsxs(Stack, { direction: "row", align: "center", justify: "between", gap: "none", children: [showCopyright && (_jsx("div", { className: "dndev-flex dndev-justify-start", children: _jsx("span", { className: "footer-copyright", children: copyrightText }) })), _jsx("div", { className: "dndev-flex dndev-justify-end", children: _jsxs(Stack, { direction: "row", align: "center", children: [links.map((link) => (_jsx(Link, { path: link.path, style: { fontSize: 'var(--font-size-xs)' }, children: maybeTranslate(t, link.label) }, link.path))), _jsx(FooterBranding, {})] }) })] }) }));
     }
     // Mobile/Tablet: stacked layout
     return (_jsx("footer", { role: "contentinfo", className: "footer", children: _jsxs(Stack, { align: "center", gap: "tight", children: [showCopyright && (_jsx("span", { className: "footer-copyright", children: copyrightText })), _jsxs(Stack, { direction: "row", wrap: "wrap", gap: "tight", justify: "center", align: "center", children: [links.map((link) => (_jsx(Link, { path: link.path, style: { fontSize: 'var(--font-size-xs)' }, children: maybeTranslate(t, link.label) }, link.path))), _jsx(FooterBranding, {})] })] }) }));

package/dist/internal/layout/zones/DnDevMergedBar.js

@@ -36,7 +36,7 @@ function DnDevMergedBarComponent({ position, height, trigger, top, content, bott
         setOpen(false);
     }, [location.pathname]);
     // Build sheet content
-    const sheetNode = (_jsxs(Stack, { direction: "column", gap: "medium", className: "merged-bar-sheet-content", children: [top && (_jsxs(_Fragment, { children: [top, _jsx(Separator, { variant: SEPARATOR_VARIANT.MUTED })] })), content && _jsx("div", { className: "merged-bar-sheet-scroll", children: content }), bottom && (_jsxs(_Fragment, { children: [_jsx(Separator, { variant: SEPARATOR_VARIANT.MUTED }), bottom] }))] }));
+    const sheetNode = (_jsxs(Stack, { direction: "column", className: "merged-bar-sheet-content", children: [top && (_jsxs(_Fragment, { children: [top, _jsx(Separator, { variant: SEPARATOR_VARIANT.MUTED })] })), content && _jsx("div", { className: "merged-bar-sheet-scroll", children: content }), bottom && (_jsxs(_Fragment, { children: [_jsx(Separator, { variant: SEPARATOR_VARIANT.MUTED }), bottom] }))] }));
     const triggerButton = (_jsx(Button, { variant: BUTTON_VARIANT.GHOST, icon: Icon, "aria-label": "Open navigation" }));
     return (_jsx("div", { className: "merged-bar", "data-position": position, children: _jsxs(Stack, { direction: "row", align: "center", justify: "between", className: "merged-bar-trigger", children: [trigger, _jsx(Sheet, { trigger: triggerButton, side: sheetSide, open: open, onOpenChange: setOpen, title: t('sheet.navigation', { defaultValue: 'Navigation' }), children: sheetNode })] }) }));
 }

package/dist/routing/404.js

@@ -64,7 +64,7 @@ export default function NotFoundPage() {
     const handleBack = () => {
         navigate('back');
     };
-    return (_jsx(PageContainer, { variant: "docs", centered: true, children: _jsxs(Stack, { gap: "large", align: "center", justify: "center", children: [_jsxs(Stack, { gap: "medium", align: "center", children: [_jsx(Text, { level: "h1", style: {
+    return (_jsx(PageContainer, { variant: "docs", centered: true, children: _jsxs(Stack, { gap: "large", align: "center", justify: "center", children: [_jsxs(Stack, { align: "center", children: [_jsx(Text, { level: "h1", style: {
                                 fontSize: 'clamp(4rem, 12vw, 8rem)',
                                 fontWeight: 'var(--font-weight-bold)',
                                 lineHeight: 1,
@@ -95,10 +95,10 @@ export default function NotFoundPage() {
                                 overflow: 'hidden',
                                 textOverflow: 'ellipsis',
                                 border: '1px solid var(--border-hairline)',
-                            }, children: location.pathname }))] }), suggestedRoutes.length > 0 && (_jsxs(Stack, { gap: "medium", align: "center", children: [_jsx("p", { className: "dndev-text-base", style: {
+                            }, children: location.pathname }))] }), suggestedRoutes.length > 0 && (_jsxs(Stack, { align: "center", children: [_jsx("p", { className: "dndev-text-base", style: {
                                 fontSize: 'var(--font-size-md)',
                                 fontWeight: 'var(--font-weight-semibold)',
                                 margin: 0,
                                 color: 'var(--muted-foreground)',
-                            }, children: t('errors.notFound.suggestions', 'You might be looking for:') }), _jsx(Stack, { direction: "row", wrap: "wrap", justify: "center", gap: "tight", children: suggestedRoutes.map((route) => (_jsx(Link, { path: route.path, replace: true, children: _jsx(Button, { variant: BUTTON_VARIANT.OUTLINE, icon: _jsx(Icon, { icon: route.icon, fallback: LinkIcon }), "aria-label": t('errors.notFound.navigateTo', `Navigate to ${route.label}`, { label: route.label }), children: route.label }) }, route.path))) })] })), _jsxs(Stack, { direction: "row", wrap: "wrap", justify: "center", gap: "medium", children: [_jsx(Link, { path: "/", replace: true, children: _jsx(Button, { variant: BUTTON_VARIANT.DEFAULT, icon: Home, "aria-label": t('errors.notFound.goHome', 'Go to home page'), children: t('errors.notFound.goHome', 'Go Home') }) }), _jsx(Button, { variant: BUTTON_VARIANT.OUTLINE, icon: ArrowLeft, onClick: handleBack, "aria-label": t('errors.notFound.goBack', 'Go back to previous page'), children: t('errors.notFound.goBack', 'Go Back') })] })] }) }));
+                            }, children: t('errors.notFound.suggestions', 'You might be looking for:') }), _jsx(Stack, { direction: "row", wrap: "wrap", justify: "center", gap: "tight", children: suggestedRoutes.map((route) => (_jsx(Link, { path: route.path, replace: true, children: _jsx(Button, { variant: BUTTON_VARIANT.OUTLINE, icon: _jsx(Icon, { icon: route.icon, fallback: LinkIcon }), "aria-label": t('errors.notFound.navigateTo', `Navigate to ${route.label}`, { label: route.label }), children: route.label }) }, route.path))) })] })), _jsxs(Stack, { direction: "row", wrap: "wrap", justify: "center", children: [_jsx(Link, { path: "/", replace: true, children: _jsx(Button, { variant: BUTTON_VARIANT.DEFAULT, icon: Home, "aria-label": t('errors.notFound.goHome', 'Go to home page'), children: t('errors.notFound.goHome', 'Go Home') }) }), _jsx(Button, { variant: BUTTON_VARIANT.OUTLINE, icon: ArrowLeft, onClick: handleBack, "aria-label": t('errors.notFound.goBack', 'Go back to previous page'), children: t('errors.notFound.goBack', 'Go Back') })] })] }) }));
 }

package/dist/routing/AuthGuardFallback.js

@@ -50,14 +50,14 @@ export function AuthGuardFallback({ title, description, showBackButton = true, o
                     maxWidth: '28rem',
                     border: 'none',
                     boxShadow: 'var(--shadow-xl)',
-                }, title: _jsxs(Stack, { gap: "medium", children: [_jsx(Stack, { justify: "center", children: _jsx("div", { style: {
+                }, title: _jsxs(Stack, { children: [_jsx(Stack, { justify: "center", children: _jsx("div", { style: {
                                     borderRadius: '9999px',
                                     backgroundColor: 'color-mix(in oklab, var(--primary) 10%, transparent)',
                                     padding: 'var(--gap-md)',
                                 }, children: _jsx(Lock, { className: "dndev-size-touch", style: { color: 'var(--primary)' } }) }) }), _jsx("div", { style: {
                                 fontSize: 'var(--font-size-2xl)',
                                 fontWeight: 700,
-                            }, children: t('auth.fallback.title', 'Authentication Required') }), _jsx("p", { style: { color: 'var(--muted-foreground)' }, children: t('auth.fallback.description', 'Please sign in to access this page') })] }), children: _jsxs(Stack, { gap: "medium", children: [_jsxs(Stack, { gap: "large", children: [_jsx("div", { children: _jsx("p", { style: {
+                            }, children: t('auth.fallback.title', 'Authentication Required') }), _jsx("p", { style: { color: 'var(--muted-foreground)' }, children: t('auth.fallback.description', 'Please sign in to access this page') })] }), children: _jsxs(Stack, { children: [_jsxs(Stack, { gap: "large", children: [_jsx("div", { children: _jsx("p", { style: {
                                             fontSize: 'var(--font-size-sm)',
                                             color: 'var(--muted-foreground)',
                                         }, children: t('auth.fallback.chooseProvider') }) }), _jsx(Suspense, { fallback: _jsx("div", { children: "Loading providers..." }), children: _jsx(MultipleAuthProviders, { layout: "vertical", spacing: "tight", fullWidth: true, ariaLabel: t('auth.fallback.authOptions') }) })] }), showBackButton && (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsx("div", { children: _jsx(Button, { onClick: handleBack, className: "dndev-gap-sm", icon: ArrowLeft, children: t('common.back') }) })] })), _jsxs(Stack, { gap: "tight", style: {

package/dist/styles/index.css

@@ -3140,7 +3140,7 @@ em {
 
 .dndev-cta-actions {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   gap: var(--gap-md);
   justify-content: center;
 }
@@ -3175,13 +3175,6 @@ em {
       border-color: var(--foreground);
     }
 
-@media (width >= 768px) {
-
-.dndev-cta-actions {
-    flex-direction: row;
-}
-  }
-
 /* packages/components/src/atomic/Card/Card.css */
 
 /* Card layout - grid with gap */
@@ -3631,12 +3624,10 @@ em {
   /* Code-specific overrides: background color, text color, and layout */
   display: flex;
   flex-direction: column;
-  background: var(
-    --muted
-  ); /* Override surface gradient with code-specific dark background */
-  color: var(
-    --muted-foreground
-  ); /* Override surface text color for dark background */
+  background: var(--muted);
+  /* Override surface gradient with code-specific dark background */
+  color: var(--muted-foreground);
+  /* Override surface text color for dark background */
   overflow: hidden;
   font-family: var(--font-mono);
   font-size: var(--font-size-sm);
@@ -3710,8 +3701,6 @@ em {
   white-space: pre;
   overflow-x: auto;
   overflow-y: visible;
-  min-width: -moz-min-content;
-  min-width: min-content;
 }
 
 .dndev-code-pre[data-compact='true'] {
@@ -3728,16 +3717,19 @@ em {
           user-select: none;
   padding-inline-end: var(--gap-md);
   text-align: end;
-  font-size: inherit; /* Match parent code font-size */
+  font-size: inherit;
+  /* Match parent code font-size */
   opacity: var(--opacity-muted);
   width: 3rem;
   flex-shrink: 0;
   color: var(--muted-foreground);
-  line-height: 1.5; /* Consistent line height */
+  line-height: 1.5;
+  /* Consistent line height */
 }
 
 .dndev-code-line-number {
-  line-height: inherit; /* Inherit from parent */
+  line-height: inherit;
+  /* Inherit from parent */
 }
 
 .dndev-code-code {
@@ -3745,8 +3737,10 @@ em {
   min-width: 0;
   text-align: start;
   display: block;
-  line-height: 1.5; /* Match line numbers */
-  font-size: var(--font-size-sm); /* Explicit match with line numbers */
+  line-height: 1.5;
+  /* Match line numbers */
+  font-size: var(--font-size-sm);
+  /* Explicit match with line numbers */
 }
 
 /* Ensure shiki-generated code respects line-height AND font-size */
@@ -3754,7 +3748,8 @@ em {
 .dndev-code-code pre,
 .dndev-code-code code {
   line-height: inherit;
-  font-size: inherit; /* Match parent font-size */
+  font-size: inherit;
+  /* Match parent font-size */
 }
 
 /* packages/components/src/atomic/Command/Command.css */
@@ -7535,6 +7530,10 @@ input[type='number'] {
     font-weight: var(--font-weight-bold);
   }
 
+.dndev-text-base[data-italic] {
+    font-style: italic;
+  }
+
 /* packages/components/src/atomic/Toaster/Toaster.css */
 
 .dndev-toast-viewport {
@@ -7734,8 +7733,9 @@ input[type='number'] {
 
 .dndev-toggle-group {
   display: inline-flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 0;
+  gap: var(--gap-sm);
   padding: 0.125rem;
   border-radius: var(--radius-interactive);
   background-color: var(--muted);
@@ -7931,12 +7931,16 @@ input[type='number'] {
 
 .dndev-video-dialog {
   max-width: 90vw;
-  max-height: 90vh;
 }
 
 .dndev-video-dialog .dndev-modal-body {
     padding: 0;
+    overflow: hidden;
+  }
+
+.dndev-video-dialog .dndev-video-frame {
     aspect-ratio: 16/9;
+    max-height: calc(90vh - 5rem);
   }
 
 /* 6. Animation keyframes */
@@ -9073,9 +9077,16 @@ h4[data-variant='code'] {
   --sidebar-resize-handle-width: 6px;
 
   /* Content width - max constraint only, grid handles sidebar space */
-  /* PageContainer sets --max-content-width, main's 1fr handles available space */
+  /* PageContainer sets --max-content-width per variant, components use --content-width */
+  --max-content-width: 100%;
   --content-width: var(--max-content-width, 100%);
 
+  /* Narrow content (mobile-first PWA, app-like single column) - single source of truth */
+  --narrow-content-max: 37.5rem;
+  /* 600px */
+  --narrow-form-max: 30rem;
+  /* 480px - inner form/input width within narrow layout */
+
   /* Content Area Calculations */
   /* Header content area (excludes sidebar on some presets) */
   --header-content-width: 100%;
@@ -9308,52 +9319,74 @@ main[role='main'][data-routing-animation='none'] {
       auto
     );
   grid-template-columns: var(--sidebar-width) 1fr;
-
-  /* Mobile: Grid scrolls instead of main - footer scrolls with content */
 }
 
-@media (width <=1023px) {
-
-.dndev-layout {
-    overflow-y: auto;
-    overflow-x: hidden;
-    /* Keep footer row - grid scrolls so footer scrolls with content */
-    grid-template-areas:
-      'header header'
-      'sidebar main'
-      'footer footer';
-    grid-template-rows: var(--header-height) min-content auto;
-}
-  }
+/* Footer scroll mode: grid scrolls, footer scrolls with content */
 
-/* Footer scroll mode - grid scrolls, footer scrolls with content (opt-in for desktop) */
+/* Desktop: opt-in via data-footer-mode="scroll" */
 
 .dndev-layout[data-footer-mode='scroll'] {
   overflow-y: auto;
   overflow-x: hidden;
-  grid-template-rows: var(--header-height) min-content auto;
+  grid-template-rows: var(--header-height) 1fr auto;
 }
 
 .dndev-layout[data-footer-mode='scroll'] header[role='banner'] {
-  position: sticky;
-  top: 0;
-}
+    position: sticky;
+    top: 0;
+  }
+
+.dndev-layout[data-footer-mode='scroll'] aside.sidebar[role='navigation'] {
+    position: sticky;
+    top: var(--header-height);
+    height: calc(100dvh - var(--header-height));
+    align-self: start;
+  }
 
 .dndev-layout[data-footer-mode='scroll'] main[role='main'] {
-  overflow: visible;
-  min-height: -moz-min-content;
-  min-height: min-content;
-}
+    overflow-y: visible;
+    overflow-x: hidden;
+  }
 
 .dndev-layout[data-footer-mode='scroll'] footer[role='contentinfo'] {
-  height: auto;
-}
+    grid-column: 2 / -1;
+    height: auto;
+  }
 
 :is(.dndev-layout[data-footer-mode='scroll'] footer[role='contentinfo']) > * {
-    height: auto;
-    min-height: var(--footer-height);
+      height: auto;
+      min-height: var(--footer-height);
+    }
+
+/* Mobile: footer scroll mode ON by default (same rules) */
+
+@media (width <=1023px) {
+  .dndev-layout {
+    overflow-y: auto;
+    overflow-x: hidden;
+    grid-template-rows: var(--header-height) 1fr auto;
   }
 
+    .dndev-layout header[role='banner'] {
+      position: sticky;
+      top: 0;
+    }
+
+    .dndev-layout main[role='main'] {
+      overflow-y: visible;
+      overflow-x: hidden;
+    }
+
+    .dndev-layout footer[role='contentinfo'] {
+      height: auto;
+    }
+
+      :is(.dndev-layout footer[role='contentinfo']) > * {
+        height: auto;
+        min-height: var(--footer-height);
+      }
+}
+
 /* Presets with no footer at all */
 
 [data-layout='moolti'] footer[role='contentinfo'],
@@ -9718,17 +9751,6 @@ main[role='main'] > *:not(.breadcrumbs-container):first-of-type,main[role='main'
     flex: 1 1 auto;
   }
 
-/* Mobile: Grid scrolls, main doesn't */
-
-@media (width <=1023px) {
-
-main[role='main'] {
-    overflow: visible;
-    min-height: -moz-min-content;
-    min-height: min-content;
-}
-  }
-
 /* Footer: Full width by default, app presets start after sidebar */
 
 /* box-sizing: border-box ensures borders are included in height */
@@ -10207,32 +10229,26 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
 /* Standard width - responsive */
 
 .dndev-container[data-variant='standard'] {
-    --max-content-width: 100%;
+    --max-content-width: min(87.5rem, 100%);
+    max-width: var(--content-width);
+    /* 1480px max, but never exceeds container width */
   }
 
-@media (width >=1024px) {
-
-.dndev-container[data-variant='standard'] {
-      --max-content-width: 87.5rem;
-      /* 1480px */
-      /* Padding stays: part of centering space when max-width applies */
-  }
-    }
-
 /* Docs width - responsive */
 
 .dndev-container[data-variant='docs'] {
-    --max-content-width: 100%;
+    --max-content-width: min(56.25rem, 100%);
+    max-width: var(--content-width);
+    /* 900px max, but never exceeds container width */
   }
 
-@media (width >=1024px) {
+/* Narrow width - mobile-first single column (PWA, app-like on every device) */
 
-.dndev-container[data-variant='docs'] {
-      --max-content-width: 56.25rem;
-      /* 900px */
-      /* Padding stays: always prevents edge touching */
+.dndev-container[data-variant='narrow'] {
+    --max-content-width: min(var(--narrow-content-max), 100%);
+    max-width: var(--content-width);
+    /* 600px max, but never exceeds container width */
   }
-    }
 
 /* Fixed frame - fills parent exactly, prevents parent scroll */
 
@@ -10322,7 +10338,16 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
   width: 100%;
 }
 
-/* ScrollArea wrapper */
+/* Scroll wrapper - stretches to full width so scrollbar is at viewport edge */
+
+.dndev-game-container__scroll-wrapper {
+  flex: 1 1 0;
+  min-height: 0;
+  width: 100%;
+  align-self: stretch;
+}
+
+/* ScrollArea - fills wrapper */
 
 .dndev-game-container__scroll {
   width: 100%;
@@ -10361,17 +10386,37 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
   justify-content: space-between;
 }
 
-/* CTA Zone - Fixed at bottom */
+/* Narrow content wrapper - constrained by --narrow-content-max, centered inside scroll */
+
+/* height: 100% fills the scroll viewport so children can use percentage heights.
+   Content taller than viewport still scrolls — overflow propagates to the scroll container. */
+
+.dndev-game-container__content-narrow {
+  width: 100%;
+  max-width: var(--narrow-content-max);
+  margin-inline: auto;
+  height: 100%;
+}
+
+/* CTA Zone - Fixed at bottom; safe area for notched devices */
 
 .dndev-game-container__cta {
   display: flex;
   flex-direction: column;
   padding-top: var(--gap-md);
+  padding-bottom: env(safe-area-inset-bottom);
   border-top: 2px solid var(--border);
 }
 
 /* CTA Button */
 
+.dndev-game-container__cta-buttons {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  gap: var(--gap-sm);
+  width: 100%;
+}
+
 .dndev-game-container__cta-button {
   height: var(--touch-target);
   width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@donotdev/ui",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "type": "module",
   "private": false,
   "license": "SEE LICENSE IN LICENSE.md",
@@ -53,12 +53,12 @@
   },
   "peerDependencies": {
     "@donotdev/adv-comps": "^0.0.9",
-    "@donotdev/auth": "^0.0.5",
+    "@donotdev/auth": "^0.0.6",
     "@donotdev/billing": "^0.0.5",
     "@donotdev/components": "^0.0.15",
-    "@donotdev/core": "^0.0.19",
-    "@donotdev/crud": "^0.0.10",
-    "@donotdev/firebase": "^0.0.8",
+    "@donotdev/core": "^0.0.20",
+    "@donotdev/crud": "^0.0.11",
+    "@donotdev/firebase": "^0.0.9",
     "@donotdev/oauth": "^0.0.5",
     "firebase": "^12.8.0",
     "lucide-react": "^0.563.0",