@donotdev/ui 0.0.11 → 0.0.13

package/dist/dndev.css

@@ -3144,7 +3144,7 @@ em {
 
 .dndev-cta-actions {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   gap: var(--gap-md);
   justify-content: center;
 }
@@ -3179,13 +3179,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 */
@@ -3635,12 +3628,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);
@@ -3714,8 +3705,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'] {
@@ -3732,16 +3721,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 {
@@ -3749,8 +3741,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 */
@@ -3758,7 +3752,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 */
@@ -7539,6 +7534,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 {
@@ -7738,8 +7737,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);
@@ -7935,12 +7935,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 */
@@ -9077,9 +9081,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%;
@@ -9312,52 +9323,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'],
@@ -9722,17 +9755,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 */
@@ -10211,32 +10233,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 */
 
@@ -10326,7 +10342,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%;
@@ -10365,17 +10390,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%;