@donotdev/ui 0.0.11 → 0.0.12

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/styles/index.css

@@ -3140,9 +3140,10 @@ em {
 
 .dndev-cta-actions {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   gap: var(--gap-md);
   justify-content: center;
+
 }
 
 .dndev-cta-actions .dndev-interactive {
@@ -3175,13 +3176,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 +3625,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 +3702,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 +3718,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 +3738,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 +3749,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 */
@@ -9073,9 +9069,14 @@ 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 */
+
   /* Content Area Calculations */
   /* Header content area (excludes sidebar on some presets) */
   --header-content-width: 100%;
@@ -9185,8 +9186,7 @@ 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,15 +9200,11 @@ 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;
   }
 }
 
@@ -9216,15 +9212,11 @@ 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;
   }
 }
 
@@ -9232,15 +9224,11 @@ 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;
   }
 }
 
@@ -9248,15 +9236,11 @@ 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;
   }
 }
 
@@ -9280,6 +9264,7 @@ 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;
@@ -9303,57 +9288,59 @@ 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;
-
-  /* Mobile: Grid scrolls instead of main - footer scrolls with content */
 }
 
-@media (width <=1023px) {
+/* Footer scroll mode: grid scrolls, footer scrolls with content */
 
-.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 (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;
-}
+.dndev-layout[data-footer-mode='scroll'] header[role='banner'] { position: sticky; top: 0; }
 
-.dndev-layout[data-footer-mode='scroll'] main[role='main'] {
-  overflow: visible;
-  min-height: -moz-min-content;
-  min-height: min-content;
-}
+.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'] footer[role='contentinfo'] {
-  height: auto;
-}
+.dndev-layout[data-footer-mode='scroll'] main[role='main'] { overflow-y: visible; overflow-x: hidden; }
 
-:is(.dndev-layout[data-footer-mode='scroll'] footer[role='contentinfo']) > * {
+.dndev-layout[data-footer-mode='scroll'] footer[role='contentinfo'] {
+    grid-column: 2 / -1;
     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) */
+
+@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'],
@@ -9519,8 +9506,7 @@ 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);
 }
 
@@ -9536,10 +9522,7 @@ aside[role='navigation'].sidebar[data-dragging='true']
 /* 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;
   }
 }
@@ -9712,23 +9695,13 @@ 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 + * {
     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 */
@@ -9850,6 +9823,7 @@ 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'],
@@ -10207,32 +10181,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 */
 
@@ -10278,10 +10246,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));
@@ -10361,12 +10329,29 @@ 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 (mobile-first PWA) */
+
+.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%;
+}
+
+/* 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);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@donotdev/ui",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "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",