@donotdev/ui 0.0.12 → 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/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

@@ -3143,7 +3143,6 @@ em {
   flex-direction: row;
   gap: var(--gap-md);
   justify-content: center;
-
 }
 
 .dndev-cta-actions .dndev-interactive {
@@ -7531,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 {
@@ -7730,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);
@@ -7927,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 */
@@ -9076,6 +9084,8 @@ h4[data-variant='code'] {
   /* 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) */
@@ -9186,7 +9196,8 @@ main[role='main'][data-routing-animation='fade'] {
 /* Slide animation - keyframes handle opacity 0→1 */
 
 main[role='main'][data-routing-animation='slide'] {
-  animation: routeSlideIn var(--routing-default-duration, 300ms) ease-in forwards;
+  animation: routeSlideIn var(--routing-default-duration, 300ms) ease-in
+    forwards;
 }
 
 /* No animation - already visible by default, explicit for clarity */
@@ -9200,11 +9211,15 @@ main[role='main'][data-routing-animation='none'] {
 
 @media (width < 768px) {
   main[role='main'][data-routing-animation='fade'] {
-    animation: routeFadeIn var(--routing-mobile-duration, var(--routing-default-duration, 300ms)) ease-in forwards;
+    animation: routeFadeIn
+      var(--routing-mobile-duration, var(--routing-default-duration, 300ms))
+      ease-in forwards;
   }
 
   main[role='main'][data-routing-animation='slide'] {
-    animation: routeSlideIn var(--routing-mobile-duration, var(--routing-default-duration, 300ms)) ease-in forwards;
+    animation: routeSlideIn
+      var(--routing-mobile-duration, var(--routing-default-duration, 300ms))
+      ease-in forwards;
   }
 }
 
@@ -9212,11 +9227,15 @@ main[role='main'][data-routing-animation='none'] {
 
 @media (width >=768px) and (width <=1023px) {
   main[role='main'][data-routing-animation='fade'] {
-    animation: routeFadeIn var(--routing-tablet-duration, var(--routing-default-duration, 300ms)) ease-in forwards;
+    animation: routeFadeIn
+      var(--routing-tablet-duration, var(--routing-default-duration, 300ms))
+      ease-in forwards;
   }
 
   main[role='main'][data-routing-animation='slide'] {
-    animation: routeSlideIn var(--routing-tablet-duration, var(--routing-default-duration, 300ms)) ease-in forwards;
+    animation: routeSlideIn
+      var(--routing-tablet-duration, var(--routing-default-duration, 300ms))
+      ease-in forwards;
   }
 }
 
@@ -9224,11 +9243,15 @@ main[role='main'][data-routing-animation='none'] {
 
 @media (width >=1024px) and (width <=1439px) {
   main[role='main'][data-routing-animation='fade'] {
-    animation: routeFadeIn var(--routing-desktop-duration, var(--routing-default-duration, 300ms)) ease-in forwards;
+    animation: routeFadeIn
+      var(--routing-desktop-duration, var(--routing-default-duration, 300ms))
+      ease-in forwards;
   }
 
   main[role='main'][data-routing-animation='slide'] {
-    animation: routeSlideIn var(--routing-desktop-duration, var(--routing-default-duration, 300ms)) ease-in forwards;
+    animation: routeSlideIn
+      var(--routing-desktop-duration, var(--routing-default-duration, 300ms))
+      ease-in forwards;
   }
 }
 
@@ -9236,11 +9259,15 @@ main[role='main'][data-routing-animation='none'] {
 
 @media (width >=1440px) {
   main[role='main'][data-routing-animation='fade'] {
-    animation: routeFadeIn var(--routing-wide-duration, var(--routing-default-duration, 300ms)) ease-in forwards;
+    animation: routeFadeIn
+      var(--routing-wide-duration, var(--routing-default-duration, 300ms))
+      ease-in forwards;
   }
 
   main[role='main'][data-routing-animation='slide'] {
-    animation: routeSlideIn var(--routing-wide-duration, var(--routing-default-duration, 300ms)) ease-in forwards;
+    animation: routeSlideIn
+      var(--routing-wide-duration, var(--routing-default-duration, 300ms))
+      ease-in forwards;
   }
 }
 
@@ -9264,7 +9291,6 @@ main[role='main'][data-routing-animation='none'] {
 /* Mobile/Tablet: Hide sidebars - WCAG & Lighthouse best practices */
 
 @media (width <=1023px) {
-
   .dndev-layout aside[role='navigation'].sidebar,
   aside[role='navigation'].sidebar {
     display: none !important;
@@ -9288,8 +9314,10 @@ main[role='main'][data-routing-animation='none'] {
     'header header'
     'sidebar main'
     'footer footer';
-  grid-template-rows: var(--header-height) 1fr minmax(var(--footer-height),
-      auto);
+  grid-template-rows: var(--header-height) 1fr minmax(
+      var(--footer-height),
+      auto
+    );
   grid-template-columns: var(--sidebar-width) 1fr;
 }
 
@@ -9303,7 +9331,10 @@ main[role='main'][data-routing-animation='none'] {
   grid-template-rows: var(--header-height) 1fr auto;
 }
 
-.dndev-layout[data-footer-mode='scroll'] header[role='banner'] { position: sticky; top: 0; }
+.dndev-layout[data-footer-mode='scroll'] header[role='banner'] {
+    position: sticky;
+    top: 0;
+  }
 
 .dndev-layout[data-footer-mode='scroll'] aside.sidebar[role='navigation'] {
     position: sticky;
@@ -9312,14 +9343,20 @@ main[role='main'][data-routing-animation='none'] {
     align-self: start;
   }
 
-.dndev-layout[data-footer-mode='scroll'] main[role='main'] { overflow-y: visible; overflow-x: hidden; }
+.dndev-layout[data-footer-mode='scroll'] main[role='main'] {
+    overflow-y: visible;
+    overflow-x: hidden;
+  }
 
 .dndev-layout[data-footer-mode='scroll'] footer[role='contentinfo'] {
     grid-column: 2 / -1;
     height: auto;
   }
 
-:is(.dndev-layout[data-footer-mode='scroll'] footer[role='contentinfo']) > * { height: auto; min-height: var(--footer-height); }
+:is(.dndev-layout[data-footer-mode='scroll'] footer[role='contentinfo']) > * {
+      height: auto;
+      min-height: var(--footer-height);
+    }
 
 /* Mobile: footer scroll mode ON by default (same rules) */
 
@@ -9330,15 +9367,24 @@ main[role='main'][data-routing-animation='none'] {
     grid-template-rows: var(--header-height) 1fr auto;
   }
 
-    .dndev-layout header[role='banner'] { position: sticky; top: 0; }
+    .dndev-layout header[role='banner'] {
+      position: sticky;
+      top: 0;
+    }
 
-    .dndev-layout main[role='main'] { overflow-y: visible; overflow-x: hidden; }
+    .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); }
+      :is(.dndev-layout footer[role='contentinfo']) > * {
+        height: auto;
+        min-height: var(--footer-height);
+      }
 }
 
 /* Presets with no footer at all */
@@ -9506,7 +9552,8 @@ aside[role='navigation'].sidebar .dndev-sidebar-resize-handle:focus-visible {
 
 /* Active drag state */
 
-aside[role='navigation'].sidebar[data-dragging='true'] .dndev-sidebar-resize-handle {
+aside[role='navigation'].sidebar[data-dragging='true']
+  .dndev-sidebar-resize-handle {
   background: var(--primary);
 }
 
@@ -9522,7 +9569,10 @@ aside[role='navigation'].sidebar[data-dragging='true'] .dndev-sidebar-resize-han
 /* Landing: AUTO display mode - compact below wide breakpoint (< 1440px) */
 
 @media (width < 1440px) {
-  [data-layout='landing'] header[role='banner'] [data-display='auto'] .dndev-interactive-label {
+  [data-layout='landing']
+    header[role='banner']
+    [data-display='auto']
+    .dndev-interactive-label {
     display: none;
   }
 }
@@ -9695,7 +9745,6 @@ main[role='main'] {
   contain: layout style;
 
   /* First child after breadcrumbs grows to fill space */
-
 }
 
 main[role='main'] > *:not(.breadcrumbs-container):first-of-type,main[role='main'] > .breadcrumbs-container + * {
@@ -9823,7 +9872,6 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
 /* Mobile (<1024px): Show merged-bar, hide zones */
 
 @media (width <=1023px) {
-
   /* Presets with mergedBar: top (admin, moolti, game, docs) */
   [data-layout='admin'] .merged-bar[data-position='top'],
   [data-layout='moolti'] .merged-bar[data-position='top'],
@@ -10246,10 +10294,10 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
 
 /* Breakthrough pattern: only applies inside PageContainer */
 
-.dndev-container>.dndev-section-full-width,
-.dndev-container>.dndev-cta,
-.dndev-container>.dndev-hero-section,
-.dndev-container>.dndev-tech-bento {
+.dndev-container > .dndev-section-full-width,
+.dndev-container > .dndev-cta,
+.dndev-container > .dndev-hero-section,
+.dndev-container > .dndev-tech-bento {
   /* Break out of PageContainer padding and max-width constraint */
   /* Account for sidebar: --sidebar-width is 0px for presets without sidebar */
   width: calc(100dvw - var(--sidebar-width));
@@ -10290,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%;
@@ -10329,20 +10386,16 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
   justify-content: space-between;
 }
 
-/* Narrow content wrapper - constrained by --narrow-content-max (mobile-first PWA) */
+/* 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;
-  min-height: 0;
-  flex: 1 1 auto;
-  display: flex;
-  flex-direction: column;
-}
-
-.dndev-game-container__content-narrow .dndev-game-container__scroll {
-  width: 100%;
+  height: 100%;
 }
 
 /* CTA Zone - Fixed at bottom; safe area for notched devices */
@@ -10357,6 +10410,13 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
 
 /* 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.12",
+  "version": "0.0.13",
   "type": "module",
   "private": false,
   "license": "SEE LICENSE IN LICENSE.md",