@donotdev/ui 0.0.10 → 0.0.12

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 */
@@ -4455,6 +4451,167 @@ em {
   padding-block: var(--gap-lg);
 }
 
+/* packages/components/src/advanced/ImageGallery/ImageGallery.css */
+
+.image-gallery {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-md);
+  outline: none;
+}
+
+.image-gallery:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+  border-radius: var(--radius-lg);
+}
+
+/* Empty state */
+
+.image-gallery--empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--muted);
+  border-radius: var(--radius-lg);
+}
+
+.image-gallery__placeholder {
+  color: var(--muted-foreground);
+  font-size: var(--font-size-sm);
+}
+
+/* Main image container */
+
+.image-gallery__main {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border-radius: var(--radius-surface);
+  background-color: var(--muted);
+}
+
+.image-gallery__main-image {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  display: block;
+  position: relative;
+}
+
+/* Navigation arrows */
+
+.image-gallery__nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border: none;
+  border-radius: var(--radius-full);
+  background-color: var(--background);
+  color: var(--foreground);
+  cursor: pointer;
+  opacity: 0;
+  transition:
+    opacity 0.2s ease,
+    background-color 0.2s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  z-index: 2;
+}
+
+.image-gallery__main:hover .image-gallery__nav,
+.image-gallery:focus-within .image-gallery__nav {
+  opacity: 1;
+}
+
+.image-gallery__nav:hover {
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+}
+
+.image-gallery__nav:focus-visible {
+  opacity: 1;
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
+.image-gallery__nav--prev {
+  inset-inline-start: var(--gap-md);
+}
+
+.image-gallery__nav--next {
+  inset-inline-end: var(--gap-md);
+}
+
+/* Thumbnails */
+
+.image-gallery__thumbnails {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gap-sm);
+}
+
+.image-gallery__thumbnail {
+  flex: 0 0 auto;
+  width: 80px;
+  height: 60px;
+  padding: 0;
+  border: 2px solid transparent;
+  border-radius: var(--radius-surface);
+  overflow: hidden;
+  cursor: pointer;
+  background: none;
+  transition:
+    border-color 0.2s ease,
+    transform 0.2s ease;
+}
+
+.image-gallery__thumbnail:hover {
+  border-color: var(--muted-foreground);
+}
+
+.image-gallery__thumbnail:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
+.image-gallery__thumbnail--selected {
+  border-color: var(--primary);
+}
+
+.image-gallery__thumbnail-image {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  display: block;
+}
+
+/* Responsive adjustments */
+
+@media (max-width: 640px) {
+  .image-gallery__thumbnail {
+    width: 60px;
+    height: 45px;
+  }
+
+  .image-gallery__nav {
+    width: 36px;
+    height: 36px;
+    opacity: 0.8;
+  }
+
+  .image-gallery__nav svg {
+    width: 20px;
+    height: 20px;
+  }
+}
+
 /* packages/components/src/atomic/Input/Input.css */
 
 /* Hide number input spinners - cleaner UI for price/range inputs */
@@ -7356,6 +7513,24 @@ input[type='number'] {
     font-size: var(--font-size-sm);
   }
 
+/* Font weight overrides (after level rules, so weight prop overrides level defaults) */
+
+.dndev-text-base[data-font-weight='normal'] {
+    font-weight: var(--font-weight-normal);
+  }
+
+.dndev-text-base[data-font-weight='medium'] {
+    font-weight: var(--font-weight-medium);
+  }
+
+.dndev-text-base[data-font-weight='semibold'] {
+    font-weight: var(--font-weight-semibold);
+  }
+
+.dndev-text-base[data-font-weight='bold'] {
+    font-weight: var(--font-weight-bold);
+  }
+
 /* packages/components/src/atomic/Toaster/Toaster.css */
 
 .dndev-toast-viewport {
@@ -8894,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%;
@@ -9006,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 */
@@ -9021,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;
   }
 }
 
@@ -9037,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;
   }
 }
 
@@ -9053,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;
   }
 }
 
@@ -9069,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;
   }
 }
 
@@ -9101,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;
@@ -9124,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) {
-
-.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;
-}
+.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'],
@@ -9340,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);
 }
 
@@ -9357,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;
   }
 }
@@ -9533,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 */
@@ -9671,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'],
@@ -10028,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 */
 
@@ -10099,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));
@@ -10182,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.10",
+  "version": "0.0.12",
   "type": "module",
   "private": false,
   "license": "SEE LICENSE IN LICENSE.md",
@@ -49,22 +49,22 @@
   "dependencies": {
     "@hookform/resolvers": "^5.2.2",
     "react-helmet-async": "^2.0.5",
-    "react-hook-form": "^7.71.0"
+    "react-hook-form": "^7.71.1"
   },
   "peerDependencies": {
-    "@donotdev/adv-comps": "^0.0.8",
-    "@donotdev/auth": "^0.0.5",
+    "@donotdev/adv-comps": "^0.0.9",
+    "@donotdev/auth": "^0.0.6",
     "@donotdev/billing": "^0.0.5",
-    "@donotdev/components": "^0.0.13",
-    "@donotdev/core": "^0.0.17",
-    "@donotdev/crud": "^0.0.8",
-    "@donotdev/firebase": "^0.0.6",
+    "@donotdev/components": "^0.0.15",
+    "@donotdev/core": "^0.0.20",
+    "@donotdev/crud": "^0.0.11",
+    "@donotdev/firebase": "^0.0.9",
     "@donotdev/oauth": "^0.0.5",
-    "firebase": "^12.5.0",
-    "lucide-react": "^0.562.0",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "react-router-dom": "^7.1.3",
+    "firebase": "^12.8.0",
+    "lucide-react": "^0.563.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-router-dom": "^7.13.0",
     "valibot": "^1.2.0"
   },
   "peerDependenciesMeta": {

package/dist/crud/components/DisplayFieldRenderer.d.ts

@@ -1,26 +0,0 @@
-import type { EntityField, FieldType, ValueTypeForField } from '@donotdev/core';
-import type { ReactElement } from 'react';
-interface DisplayFieldRendererBaseProps<T extends FieldType = FieldType> {
-    /** Field identifier */
-    name: string;
-    /** Field configuration */
-    config: EntityField<T>;
-    /** Translation function */
-    t: (key: string, options?: Record<string, any>) => string;
-    /** Field value to display */
-    value: ValueTypeForField<T>;
-    /** Additional CSS classes */
-    className?: string;
-}
-export type DisplayFieldRendererProps<T extends FieldType> = DisplayFieldRendererBaseProps<T>;
-/**
- * DisplayFieldRenderer selects and renders the appropriate display component
- * based on the field type for read-only display mode.
- *
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
- */
-export declare function DisplayFieldRenderer<T extends FieldType>({ name, config, t, value, className, }: DisplayFieldRendererProps<T>): ReactElement;
-export default DisplayFieldRenderer;
-//# sourceMappingURL=DisplayFieldRenderer.d.ts.map