@donotdev/ui 0.0.3 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/dist/components/auth/AuthMenu.d.ts.map +1 -1
  2. package/dist/components/auth/AuthMenu.js +4 -4
  3. package/dist/components/common/FeatureCard.d.ts +7 -19
  4. package/dist/components/common/FeatureCard.d.ts.map +1 -1
  5. package/dist/components/common/FeatureCard.js +4 -28
  6. package/dist/components/common/TechBento.d.ts +15 -3
  7. package/dist/components/common/TechBento.d.ts.map +1 -1
  8. package/dist/components/common/TechBento.js +20 -2
  9. package/dist/dndev.css +258 -151
  10. package/dist/index.js +4 -4
  11. package/dist/internal/devtools/DebugTools.js +1 -1
  12. package/dist/internal/devtools/components/ConfigTab.d.ts.map +1 -1
  13. package/dist/internal/devtools/components/ConfigTab.js +8 -6
  14. package/dist/internal/devtools/components/DesignTab.d.ts.map +1 -1
  15. package/dist/internal/devtools/components/DesignTab.js +256 -45
  16. package/dist/internal/devtools/components/StoresTab.d.ts.map +1 -1
  17. package/dist/internal/initializers/BaseStoresInitializer.d.ts.map +1 -1
  18. package/dist/internal/initializers/BaseStoresInitializer.js +11 -1
  19. package/dist/internal/layout/components/AutoMetaTags.d.ts.map +1 -1
  20. package/dist/internal/layout/components/AutoMetaTags.js +6 -1
  21. package/dist/internal/layout/zones/DnDevFooter.js +2 -2
  22. package/dist/styles/index.css +258 -151
  23. package/dist/utils/assetResolver.d.ts.map +1 -1
  24. package/dist/utils/assetResolver.js +22 -11
  25. package/dist/utils/index.d.ts +1 -0
  26. package/dist/utils/index.d.ts.map +1 -1
  27. package/dist/utils/index.js +1 -0
  28. package/dist/utils/tList.d.ts +30 -0
  29. package/dist/utils/tList.d.ts.map +1 -0
  30. package/dist/utils/tList.js +51 -0
  31. package/dist/vite-routing/AppRoutes.d.ts.map +1 -1
  32. package/package.json +9 -9
@@ -18,9 +18,10 @@
18
18
  Used by: CSS @media queries, JavaScript hooks, responsive components
19
19
  Note: CSS variables don't work in @media, so we use hardcoded px values
20
20
  =========================== */
21
- --breakpoint-mobile: 768px;
22
- --breakpoint-tablet: 1024px; /* Key breakpoint, layout presets are based on mobile + tablet vs desktop+wide breakpoints */
23
- --breakpoint-desktop: 1440px;
21
+ --breakpoint-mobile: 768px; /* < 768 = mobile */
22
+ --breakpoint-tablet: 1024px; /* 768-1023 = tablet */
23
+ --breakpoint-laptop: 1440px; /* 1024-1439 = laptop (key layout split) */
24
+ --breakpoint-desktop: 1920px; /* 1440+ = desktop */
24
25
 
25
26
  /* ===========================
26
27
  INTERACTIVE ELEMENTS
@@ -285,28 +286,48 @@
285
286
  /* Compact (Admin/Data) - Dense, information-dense layouts - Minor Third (1.2×) */
286
287
 
287
288
  [data-density='compact'] {
288
- --font-size-base: 0.875rem; /* 14px */
289
- --font-size-lg: 1.05rem; /* base × 1.2¹ */
290
- --font-size-xl: 1.26rem; /* base × 1. */
291
- --font-size-2xl: 1.512rem; /* base × 1. */
292
- --font-size-3xl: 1.814rem; /* base × 1.2⁴ */
293
- --gap-sm: 0.375rem; /* 6px - tighter than standard */
294
- --gap-md: 0.75rem; /* 12px */
295
- --gap-lg: 1.5rem; /* 24px */
289
+ /* Base sizes: Fluid responsiveness for all text, zoom-safe */
290
+ --font-size-base: clamp(0.875rem, 0.8125rem + 0.25vw, 0.9375rem); /* 14-15px fluid */
291
+ --font-size-lg: clamp(1.05rem, 0.9375rem + 0.5vw, 1.125rem); /* 17-18px fluid */
292
+ --font-size-xl: clamp(1.26rem, 1.125rem + 0.75vw, 1.375rem); /* 20-22px fluid */
293
+ /* Display sizes: Musical scale + fluid responsiveness */
294
+ --font-size-2xl: clamp(
295
+ 1.512rem,
296
+ 1.375rem + 0.75vw,
297
+ 1.625rem
298
+ ); /* 24-26px fluid */
299
+ --font-size-3xl: clamp(
300
+ 1.814rem,
301
+ 1.625rem + 1vw,
302
+ 2rem
303
+ ); /* 29-32px fluid */
304
+ --gap-sm: clamp(0.375rem, 0.3125rem + 0.25vw, 0.5rem); /* 6-8px fluid */
305
+ --gap-md: clamp(0.75rem, 0.625rem + 0.5vw, 0.875rem); /* 12-14px fluid, zoom-safe */
306
+ --gap-lg: clamp(1.5rem, 1.25rem + 1vw, 1.75rem); /* 24-28px fluid, zoom-safe */
296
307
  --line-height: 1.2; /* Minor Third - All text */
297
308
  }
298
309
 
299
310
  /* Standard (Docs/SaaS) - DEFAULT, balanced for readability */
300
311
 
301
312
  [data-density='standard'] {
302
- --font-size-base: 1rem; /* 16px */
303
- --font-size-lg: 1.25rem; /* 20px - base × 1.25¹ */
304
- --font-size-xl: 1.563rem; /* 25px - base × 1.25² */
305
- --font-size-2xl: 1.953rem; /* 31px - base × 1.25³ */
306
- --font-size-3xl: 2.441rem; /* 39px - base × 1.25⁴ - hero text */
307
- --gap-sm: 0.5rem; /* 8px - explicit default */
308
- --gap-md: 1rem; /* 16px */
309
- --gap-lg: 2rem; /* 32px */
313
+ /* Base sizes: Fluid responsiveness for all text, zoom-safe */
314
+ --font-size-base: clamp(1rem, 0.9375rem + 0.25vw, 1.0625rem); /* 16-17px fluid */
315
+ --font-size-lg: clamp(1.25rem, 1.125rem + 0.5vw, 1.375rem); /* 20-22px fluid */
316
+ --font-size-xl: clamp(1.563rem, 1.375rem + 0.75vw, 1.75rem); /* 25-28px fluid */
317
+ /* Display sizes: Musical scale + fluid responsiveness */
318
+ --font-size-2xl: clamp(
319
+ 1.953rem,
320
+ 1.75rem + 1vw,
321
+ 2.25rem
322
+ ); /* 31-36px fluid */
323
+ --font-size-3xl: clamp(
324
+ 2.441rem,
325
+ 2rem + 1.5vw,
326
+ 3rem
327
+ ); /* 39-48px fluid - hero text */
328
+ --gap-sm: clamp(0.5rem, 0.4375rem + 0.25vw, 0.625rem); /* 8-10px fluid */
329
+ --gap-md: clamp(1rem, 0.875rem + 0.5vw, 1.25rem); /* 16-20px fluid, zoom-safe */
330
+ --gap-lg: clamp(2rem, 1.75rem + 1vw, 2.5rem); /* 32-40px fluid, zoom-safe */
310
331
  --line-height: 1.25; /* Major Third - All text */
311
332
  }
312
333
 
@@ -538,49 +559,16 @@ a:focus-visible {
538
559
  border-radius: var(--radius-interactive);
539
560
  }
540
561
 
541
- /* ===========================
542
- BASE LIST STYLING
543
- Use text-base styles for lists
544
- =========================== */
545
-
546
- /* Content lists only - not navigation menus */
547
-
548
- main ul,
549
- main ol,
550
- article ul,
551
- article ol {
552
- font-weight: 500;
553
- line-height: var(--line-height);
554
- color: var(--foreground);
555
- background: transparent !important;
556
- list-style-position: outside;
557
- padding-inline-start: var(--gap-lg);
558
- margin-block: var(--gap-md);
559
- }
560
-
561
- main ul,
562
- article ul {
563
- list-style-type: disc;
564
- }
565
-
566
- main ol,
567
- article ol {
568
- list-style-type: decimal;
569
- }
562
+ /* Main element - no focus outline (programmatic focus for keyboard nav) */
570
563
 
571
- main li,
572
- article li {
573
- font-weight: 500;
574
- line-height: var(--line-height);
575
- color: var(--foreground);
576
- background: transparent !important;
577
- margin-block: var(--gap-sm);
578
- padding-inline-start: var(--gap-sm);
564
+ main:focus-visible {
565
+ outline: none;
579
566
  }
580
567
 
581
568
  /* ===========================
582
- BASE TYPOGRAPHY STYLING
583
- Use text-base styles for headings and paragraphs
569
+ BASE TYPOGRAPHY - RESET ONLY
570
+ Zero margins, components own their spacing
571
+ Use .prose wrapper for content pages (docs, markdown)
584
572
  =========================== */
585
573
 
586
574
  h1,
@@ -589,49 +577,71 @@ h3,
589
577
  h4,
590
578
  h5,
591
579
  h6 {
592
- font-weight: 500;
580
+ font-weight: var(--font-weight-medium);
593
581
  line-height: var(--line-height);
594
582
  color: var(--foreground);
595
583
  background: transparent;
596
- margin-block: var(--gap-md);
597
584
  }
598
585
 
599
586
  h1 {
600
587
  font-family: var(--font-headline);
601
588
  font-size: var(--font-size-3xl);
602
- font-weight: 700;
589
+ font-weight: var(--font-weight-bold);
603
590
  letter-spacing: -0.02em;
604
591
  }
605
592
 
606
593
  h2 {
607
594
  font-family: var(--font-headline);
608
595
  font-size: var(--font-size-2xl);
609
- font-weight: 700;
596
+ font-weight: var(--font-weight-bold);
610
597
  letter-spacing: -0.01em;
611
598
  }
612
599
 
613
600
  h3 {
614
601
  font-size: var(--font-size-xl);
615
- font-weight: 600;
602
+ font-weight: var(--font-weight-semibold);
616
603
  }
617
604
 
618
605
  h4 {
619
606
  font-size: var(--font-size-lg);
620
- font-weight: 600;
607
+ font-weight: var(--font-weight-semibold);
621
608
  }
622
609
 
623
610
  h5,
624
611
  h6 {
625
612
  font-size: var(--font-size-base);
626
- font-weight: 600;
613
+ font-weight: var(--font-weight-semibold);
627
614
  }
628
615
 
629
616
  p {
630
- font-weight: 500;
617
+ font-weight: var(--font-weight-medium);
618
+ line-height: var(--line-height);
619
+ color: var(--foreground);
620
+ background: transparent;
621
+ }
622
+
623
+ ul,
624
+ ol {
625
+ font-weight: var(--font-weight-medium);
626
+ line-height: var(--line-height);
627
+ color: var(--foreground);
628
+ background: transparent;
629
+ list-style-position: outside;
630
+ }
631
+
632
+ ul {
633
+ list-style-type: disc;
634
+ }
635
+
636
+ ol {
637
+ list-style-type: decimal;
638
+ }
639
+
640
+ li {
641
+ font-weight: var(--font-weight-medium);
631
642
  line-height: var(--line-height);
632
643
  color: var(--foreground);
633
644
  background: transparent;
634
- margin-block: var(--gap-md);
635
645
  }
636
646
 
637
647
  /* Semantic HTML - strong and em */
@@ -2365,14 +2375,15 @@ em {
2365
2375
  margin-top: var(--gap-md);
2366
2376
  }
2367
2377
 
2368
- /* Tech card */
2378
+ /* Tech card - override Card's grid layout for centered content */
2369
2379
 
2370
2380
  .dndev-tech-card {
2371
2381
  height: 100%;
2372
2382
  min-height: 120px;
2373
- display: flex;
2383
+ display: flex !important; /* Override Card's grid layout */
2374
2384
  align-items: center;
2375
2385
  justify-content: center;
2386
+ align-content: center; /* Override Card's align-content: start */
2376
2387
  transition:
2377
2388
  border-color 0.2s ease,
2378
2389
  box-shadow 0.2s ease;
@@ -2482,7 +2493,8 @@ em {
2482
2493
  border-inline-end: none;
2483
2494
  border-block-start: none;
2484
2495
  border-block-end: none;
2485
- border-radius: var(--radius-interactive) var(--radius-surface) var(--radius-surface) var(--radius-interactive);
2496
+ border-radius: var(--radius-interactive) var(--radius-surface)
2497
+ var(--radius-surface) var(--radius-interactive);
2486
2498
  overflow: hidden;
2487
2499
  }
2488
2500
 
@@ -2884,13 +2896,40 @@ em {
2884
2896
  /* packages/components/src/atomic/CallToAction/CallToAction.css */
2885
2897
 
2886
2898
  .dndev-cta {
2887
- /* Full width gradient */
2899
+ /* Default gradient */
2888
2900
  background: linear-gradient(to right, var(--secondary), var(--background));
2889
2901
  color: var(--foreground);
2890
2902
  /* Padding for background - vertical only, horizontal handled by content */
2891
2903
  padding-block: var(--gap-lg);
2892
2904
  }
2893
2905
 
2906
+ /* Tone variants - leverage existing data-tone system */
2907
+
2908
+ .dndev-cta[data-tone='base'] {
2909
+ background: linear-gradient(to right, var(--secondary), var(--background));
2910
+ }
2911
+
2912
+ .dndev-cta[data-tone='muted'] {
2913
+ background: linear-gradient(to right, var(--muted), var(--background));
2914
+ }
2915
+
2916
+ .dndev-cta[data-tone='accent'] {
2917
+ background: linear-gradient(
2918
+ to right,
2919
+ color-mix(in oklab, var(--accent) 10%, transparent),
2920
+ var(--background)
2921
+ );
2922
+ }
2923
+
2924
+ .dndev-cta[data-tone='contrast'] {
2925
+ background: linear-gradient(to right, var(--foreground), var(--background));
2926
+ color: var(--background);
2927
+ }
2928
+
2929
+ .dndev-cta[data-tone='elevated'] {
2930
+ background: linear-gradient(to right, var(--secondary), var(--background));
2931
+ }
2932
+
2894
2933
  .dndev-cta-content {
2895
2934
  display: flex;
2896
2935
  flex-direction: column;
@@ -2971,19 +3010,35 @@ em {
2971
3010
  .dndev-card {
2972
3011
  display: grid;
2973
3012
  gap: var(--gap-md);
3013
+ text-align: start;
3014
+ align-content: start;
3015
+ }
3016
+
3017
+ .dndev-card-header {
3018
+ display: flex;
3019
+ flex-direction: column;
3020
+ }
3021
+
3022
+ .dndev-card-header > .dndev-stack {
3023
+ min-width: 0;
3024
+ }
3025
+
3026
+ .dndev-card-header > .dndev-stack > .dndev-card-title {
3027
+ flex: 1;
3028
+ min-width: 0;
2974
3029
  }
2975
3030
 
2976
3031
  .dndev-card-title {
2977
- font-size: var(--font-size-xl);
2978
- font-weight: 600;
2979
- color: inherit; /* Inherit from surface variant */
2980
3032
  margin: 0;
3033
+ min-width: 0;
3034
+ word-wrap: break-word;
2981
3035
  }
2982
3036
 
2983
3037
  .dndev-card-subtitle {
2984
- font-size: var(--font-size-base);
2985
- font-weight: 600;
2986
- color: inherit; /* Inherit from surface variant */
3038
+ margin-top: 0;
3039
+ margin-bottom: 0;
3040
+ min-width: 0;
3041
+ word-wrap: break-word;
2987
3042
  }
2988
3043
 
2989
3044
  /* packages/components/src/atomic/Checkbox/Checkbox.css */
@@ -3696,9 +3751,35 @@ em {
3696
3751
  display: grid;
3697
3752
  min-width: 0;
3698
3753
  width: 100%;
3754
+ /* Default: use mobile columns */
3755
+ grid-template-columns: repeat(var(--grid-cols-mobile, 1), 1fr);
3756
+ }
3757
+
3758
+ /* Responsive columns via media queries */
3759
+
3760
+ /* Tablet: 768px+ */
3761
+
3762
+ @media (min-width: 768px) {
3763
+ .dndev-grid-component {
3764
+ grid-template-columns: repeat(var(--grid-cols-tablet, 1), 1fr);
3765
+ }
3766
+ }
3767
+
3768
+ /* Laptop: 1024px+ (key layout split) */
3769
+
3770
+ @media (min-width: 1024px) {
3771
+ .dndev-grid-component {
3772
+ grid-template-columns: repeat(var(--grid-cols-laptop, 1), 1fr);
3773
+ }
3699
3774
  }
3700
3775
 
3701
- /* Grid template columns are set via inline styles for maximum flexibility */
3776
+ /* Desktop: 1440px+ */
3777
+
3778
+ @media (min-width: 1440px) {
3779
+ .dndev-grid-component {
3780
+ grid-template-columns: repeat(var(--grid-cols-desktop, 1), 1fr);
3781
+ }
3782
+ }
3702
3783
 
3703
3784
  /* Spacing from CSS variables */
3704
3785
 
@@ -3843,21 +3924,7 @@ em {
3843
3924
  }
3844
3925
 
3845
3926
  .dndev-hero-subtitle {
3846
- font-size: var(--font-size-xl);
3847
- }
3848
-
3849
- /* Responsive Content Visibility */
3850
-
3851
- @media (width < 1024px) {
3852
- .dndev-hero-section .dndev-desktop-only {
3853
- display: none !important;
3854
- }
3855
- }
3856
-
3857
- @media (width >= 1024px) {
3858
- .dndev-hero-section .dndev-mobile-only {
3859
- display: none !important;
3860
- }
3927
+ font-size: var(--font-size-lg); /* 20px - muted via component */
3861
3928
  }
3862
3929
 
3863
3930
  /* packages/components/src/atomic/HoverCard/HoverCard.css */
@@ -4170,16 +4237,13 @@ em {
4170
4237
  .dndev-list {
4171
4238
  display: flex;
4172
4239
  flex-direction: column;
4173
- gap: var(--gap-none);
4240
+ gap: var(--gap-sm);
4174
4241
  padding-inline-start: 0; /* Controllable via parent/style prop */
4242
+ margin: 0;
4175
4243
  list-style-position: outside;
4176
- /* text-align: inherit from parent (removed hardcoded start) */
4244
+ text-align: start; /* Always start-aligned, even when parent is centered */
4177
4245
  }
4178
4246
 
4179
- .dndev-list[data-gap='none'] {
4180
- gap: var(--gap-none);
4181
- }
4182
-
4183
4247
  .dndev-list[data-gap='tight'] {
4184
4248
  gap: var(--gap-sm);
4185
4249
  }
@@ -4228,29 +4292,18 @@ em {
4228
4292
  font-size: var(--font-size-base);
4229
4293
  }
4230
4294
 
4231
- /* Default: native list items (no flex) - preserves markers */
4295
+ /* Always use flex layout for consistent alignment */
4232
4296
 
4233
4297
  .dndev-list .dndev-list-item {
4234
4298
  font-size: var(--font-size-sm);
4235
- /* No display: flex by default - allows native markers */
4236
-
4237
- /* Modern ::marker styling (2026 best practice) */
4299
+ display: flex;
4300
+ align-items: flex-start;
4301
+ gap: var(--gap-sm);
4302
+ list-style: none; /* Remove native marker */
4303
+ margin-block: 0;
4304
+ padding-inline-start: 0;
4238
4305
  }
4239
4306
 
4240
- :is(.dndev-list .dndev-list-item)::marker {
4241
- color: currentColor;
4242
- }
4243
-
4244
- /* Only use flex when icon is present */
4245
-
4246
- :is(.dndev-list .dndev-list-item):has(.dndev-list-item-icon) {
4247
- display: flex;
4248
- align-items: center; /* Center vertically */
4249
- gap: var(--gap-sm);
4250
- list-style: none; /* Remove native marker when using icon */
4251
- padding-inline-start: 0; /* Reset padding when flex */
4252
- }
4253
-
4254
4307
  :is(.dndev-list .dndev-list-item) .dndev-list-item-icon {
4255
4308
  display: flex;
4256
4309
  align-items: center;
@@ -4605,23 +4658,43 @@ em {
4605
4658
  margin-inline: auto; /* Self-center in parent */
4606
4659
  }
4607
4660
 
4608
- .dndev-radio-group[data-cols='2'] { grid-template-columns: repeat(2, auto); }
4661
+ .dndev-radio-group[data-cols='2'] {
4662
+ grid-template-columns: repeat(2, auto);
4663
+ }
4609
4664
 
4610
- .dndev-radio-group[data-cols='3'] { grid-template-columns: repeat(3, auto); }
4665
+ .dndev-radio-group[data-cols='3'] {
4666
+ grid-template-columns: repeat(3, auto);
4667
+ }
4611
4668
 
4612
- .dndev-radio-group[data-cols='4'] { grid-template-columns: repeat(4, auto); }
4669
+ .dndev-radio-group[data-cols='4'] {
4670
+ grid-template-columns: repeat(4, auto);
4671
+ }
4613
4672
 
4614
- .dndev-radio-group[data-cols='5'] { grid-template-columns: repeat(5, auto); }
4673
+ .dndev-radio-group[data-cols='5'] {
4674
+ grid-template-columns: repeat(5, auto);
4675
+ }
4615
4676
 
4616
- .dndev-radio-group[data-cols='6'] { grid-template-columns: repeat(6, auto); }
4677
+ .dndev-radio-group[data-cols='6'] {
4678
+ grid-template-columns: repeat(6, auto);
4679
+ }
4617
4680
 
4618
- .dndev-radio-group[data-cols='10'] { grid-template-columns: repeat(10, auto); }
4681
+ .dndev-radio-group[data-cols='10'] {
4682
+ grid-template-columns: repeat(10, auto);
4683
+ }
4619
4684
 
4620
- .dndev-radio-group[data-cols='12'] { grid-template-columns: repeat(12, auto); }
4685
+ .dndev-radio-group[data-cols='12'] {
4686
+ grid-template-columns: repeat(12, auto);
4687
+ }
4621
4688
 
4622
- .dndev-radio-group[data-cols='auto-fit'] { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); width: 100%; }
4689
+ .dndev-radio-group[data-cols='auto-fit'] {
4690
+ grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
4691
+ width: 100%;
4692
+ }
4623
4693
 
4624
- .dndev-radio-group[data-cols='auto-fill'] { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); width: 100%; }
4694
+ .dndev-radio-group[data-cols='auto-fill'] {
4695
+ grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
4696
+ width: 100%;
4697
+ }
4625
4698
 
4626
4699
  /* Variant colors for checked labels - override base pattern */
4627
4700
 
@@ -4891,23 +4964,13 @@ em {
4891
4964
  }
4892
4965
  }
4893
4966
 
4894
- /* Section title: LG, uppercase, accent pop color, tracking */
4967
+ /* Section title: uppercase, accent color, letter spacing */
4895
4968
 
4896
4969
  .dndev-section-title {
4897
- display: block;
4898
- font-size: var(--font-size-lg);
4899
- font-weight: var(--font-weight-semibold);
4900
4970
  text-transform: uppercase;
4901
4971
  letter-spacing: 0.2em;
4902
- color: var(--accent);
4903
- margin-bottom: var(--gap-lg);
4904
- }
4905
-
4906
- /* Grid container with default gap */
4907
-
4908
- .dndev-section-grid {
4909
- display: grid;
4910
- gap: var(--gap-md);
4972
+ color: var(--accent) !important;
4973
+ margin-block-end: var(--gap-md);
4911
4974
  }
4912
4975
 
4913
4976
  .dndev-section-full-width[data-text-align='start'] .dndev-section-content {
@@ -6088,7 +6151,7 @@ em {
6088
6151
  }
6089
6152
 
6090
6153
  .dndev-text-base {
6091
- font-weight: 500;
6154
+ font-weight: var(--font-weight-medium);
6092
6155
  line-height: var(--line-height);
6093
6156
  background-color: transparent; /* Text never has background, only color changes */
6094
6157
  }
@@ -6125,28 +6188,36 @@ em {
6125
6188
  color: var(--destructive);
6126
6189
  }
6127
6190
 
6191
+ .dndev-text-base[data-variant='code'] {
6192
+ font-family: var(--font-mono);
6193
+ font-size: 0.9em;
6194
+ background: var(--muted);
6195
+ padding: 0.1em 0.4em;
6196
+ border-radius: var(--radius-interactive);
6197
+ }
6198
+
6128
6199
  /* Level overrides */
6129
6200
 
6130
6201
  .dndev-text-base[data-level='h1'] {
6131
6202
  font-size: var(--font-size-3xl);
6132
- font-weight: 700;
6203
+ font-weight: var(--font-weight-bold);
6133
6204
  letter-spacing: -0.02em;
6134
6205
  }
6135
6206
 
6136
6207
  .dndev-text-base[data-level='h2'] {
6137
- font-size: var(--font-size-2xl);
6138
- font-weight: 700;
6139
- letter-spacing: -0.01em;
6208
+ font-size: var(--font-size-lg);
6209
+ font-weight: var(--font-weight-semibold);
6140
6210
  }
6141
6211
 
6142
6212
  .dndev-text-base[data-level='h3'] {
6143
- font-size: var(--font-size-xl);
6144
- font-weight: 600;
6213
+ font-size: var(--font-size-lg);
6214
+ font-weight: var(--font-weight-semibold);
6145
6215
  }
6146
6216
 
6147
6217
  .dndev-text-base[data-level='h4'] {
6148
- font-size: var(--font-size-lg);
6149
- font-weight: 600;
6218
+ font-size: var(--font-size-base);
6219
+ font-weight: var(--font-weight-medium);
6220
+ color: var(--muted-foreground);
6150
6221
  }
6151
6222
 
6152
6223
  .dndev-text-base[data-level='body'] {
@@ -7430,6 +7501,40 @@ h4[data-variant='code'] {
7430
7501
  border: 0;
7431
7502
  }
7432
7503
 
7504
+ /* ===========================
7505
+ PROSE - SEMANTIC TYPOGRAPHY FOR CONTENT PAGES
7506
+ Wrap docs/markdown/article content in .prose for semantic margins
7507
+ Components are unaffected - they own their own spacing
7508
+ =========================== */
7509
+
7510
+ .prose h1,.prose h2,.prose h3,.prose h4,.prose h5,.prose h6 {
7511
+ margin-block: var(--gap-md);
7512
+ }
7513
+
7514
+ .prose p {
7515
+ margin-block: var(--gap-md);
7516
+ }
7517
+
7518
+ .prose ul,.prose ol {
7519
+ padding-inline-start: var(--gap-lg);
7520
+ margin-block: var(--gap-md);
7521
+ }
7522
+
7523
+ .prose li {
7524
+ margin-block: var(--gap-sm);
7525
+ padding-inline-start: var(--gap-sm);
7526
+ }
7527
+
7528
+ /* First/last child: remove top/bottom margin for clean container edges */
7529
+
7530
+ .prose > :first-child {
7531
+ margin-block-start: 0;
7532
+ }
7533
+
7534
+ .prose > :last-child {
7535
+ margin-block-end: 0;
7536
+ }
7537
+
7433
7538
  /* ===========================
7434
7539
  SHADOW CONTROL (Universal)
7435
7540
  Works with any element
@@ -7867,18 +7972,20 @@ main[role='main'][data-routing-animation='none'] {
7867
7972
  display: grid;
7868
7973
  /* ONE DRY grid structure: 3 rows, 2 columns */
7869
7974
  /* Footer starts at sidebar edge (column 2) - when sidebar-width is 0px, footer starts at left edge */
7975
+ /* Footer grows with content wrapping. For pixel-perfect calc() accuracy when footer wraps,
7976
+ implement ResizeObserver to update --footer-height dynamically. */
7870
7977
  grid-template-areas:
7871
7978
  'header header'
7872
7979
  'sidebar main'
7873
7980
  'footer footer';
7874
- grid-template-rows: var(--header-height) 1fr var(--footer-height);
7981
+ grid-template-rows: var(--header-height) 1fr minmax(var(--footer-height), auto);
7875
7982
  grid-template-columns: var(--sidebar-width) 1fr;
7876
7983
 
7877
7984
  /* Game layout: Grid rows adjust based on breakpoint (footer hidden on tablet/mobile) */
7878
7985
  }
7879
7986
 
7880
7987
  [data-layout='game']:root .dndev-layout {
7881
- grid-template-rows: var(--header-height) 1fr var(--footer-height);
7988
+ grid-template-rows: var(--header-height) 1fr minmax(var(--footer-height), auto);
7882
7989
  }
7883
7990
 
7884
7991
  /* ===========================
@@ -8230,7 +8337,7 @@ footer[role='contentinfo'] {
8230
8337
  grid-area: footer;
8231
8338
  box-sizing: border-box;
8232
8339
  grid-column: 1 / -1;
8233
- height: var(--footer-height);
8340
+ min-height: var(--footer-height);
8234
8341
  z-index: var(--z-footer);
8235
8342
 
8236
8343
  /* Theme-aware styling - 100% controlled by theme system */
@@ -1 +1 @@
1
- {"version":3,"file":"assetResolver.d.ts","sourceRoot":"","sources":["../../src/utils/assetResolver.ts"],"names":[],"mappings":"AAaA;;;;;;GAMG;AACH,MAAM,WAAW,YAAY;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;GAMG;AACH,MAAM,WAAW,UAAU;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,UAAU,cAAc;IACtB,GAAG,EAAE,OAAO,CAAC;IACb,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;CACf;AAED,UAAU,aAAa;IACrB,IAAI,CAAC,EAAE;QACL,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QACxB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QACzB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;KACtB,CAAC;IACF,OAAO,CAAC,EAAE;QACR,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QACxB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QACzB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;QACrB,GAAG,CAAC,EAAE,UAAU,CAAC;KAClB,CAAC;IACF,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,aAAa,CAAC,EAAE;QACd,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QACpB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;KACrB,CAAC;IACF,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,GAAG,CAAC,EAAE,MAAM,EAAE,CAAC;CAChB;AAKD;;;;;;;GAOG;AACH,qBAAa,aAAa;IACxB,OAAO,CAAC,MAAM,CAAC,KAAK,CAA0B;IAE9C;;OAEG;IACH,MAAM,CAAC,iBAAiB,IAAI,cAAc;IAyC1C;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,mBAAmB;IAmBlC;;;OAGG;IACH,MAAM,CAAC,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAYzC;;OAEG;IACH,MAAM,CAAC,gBAAgB,IAAI,aAAa,GAAG,IAAI;IAM/C;;;;OAIG;IACH,MAAM,CAAC,iBAAiB,IAAI,MAAM,GAAG,IAAI;IAKzC;;;OAGG;IACH,MAAM,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM;IAe/C;;;OAGG;IACH,OAAO,CAAC,MAAM,CAAC,gBAAgB;IAgB/B;;;OAGG;IACH,MAAM,CAAC,iBAAiB,IAAI,UAAU;IAkDtC;;OAEG;IACH,MAAM,CAAC,cAAc,IAAI,MAAM;IAuB/B;;;OAGG;IACH,MAAM,CAAC,UAAU,IAAI,IAAI;IASzB;;OAEG;IACH,MAAM,CAAC,YAAY;;;;;;;;CAQpB;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAEvD;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,IAAI,UAAU,CAE9C;AAgBD,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"assetResolver.d.ts","sourceRoot":"","sources":["../../src/utils/assetResolver.ts"],"names":[],"mappings":"AAaA;;;;;;GAMG;AACH,MAAM,WAAW,YAAY;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;GAMG;AACH,MAAM,WAAW,UAAU;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,UAAU,cAAc;IACtB,GAAG,EAAE,OAAO,CAAC;IACb,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;CACf;AAED,UAAU,aAAa;IACrB,IAAI,CAAC,EAAE;QACL,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QACxB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QACzB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;KACtB,CAAC;IACF,OAAO,CAAC,EAAE;QACR,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QACxB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QACzB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;QACrB,GAAG,CAAC,EAAE,UAAU,CAAC;KAClB,CAAC;IACF,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,aAAa,CAAC,EAAE;QACd,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QACpB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;KACrB,CAAC;IACF,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,GAAG,CAAC,EAAE,MAAM,EAAE,CAAC;CAChB;AAKD;;;;;;;GAOG;AACH,qBAAa,aAAa;IACxB,OAAO,CAAC,MAAM,CAAC,KAAK,CAA0B;IAE9C;;OAEG;IACH,MAAM,CAAC,iBAAiB,IAAI,cAAc;IAyC1C;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,mBAAmB;IAmBlC;;;OAGG;IACH,MAAM,CAAC,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAYzC;;OAEG;IACH,MAAM,CAAC,gBAAgB,IAAI,aAAa,GAAG,IAAI;IAM/C;;;;OAIG;IACH,MAAM,CAAC,iBAAiB,IAAI,MAAM,GAAG,IAAI;IAKzC;;;OAGG;IACH,MAAM,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM;IAe/C;;;OAGG;IACH,OAAO,CAAC,MAAM,CAAC,gBAAgB;IAgB/B;;;OAGG;IACH,MAAM,CAAC,iBAAiB,IAAI,UAAU;IA6DtC;;OAEG;IACH,MAAM,CAAC,cAAc,IAAI,MAAM;IAuB/B;;;OAGG;IACH,MAAM,CAAC,UAAU,IAAI,IAAI;IASzB;;OAEG;IACH,MAAM,CAAC,YAAY;;;;;;;;CAQpB;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAEvD;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,IAAI,UAAU,CAE9C;AAgBD,eAAe,aAAa,CAAC"}