@astryxdesign/cli 0.6.4-canary.f0355e3 → 0.6.4

package/assets/docs/layout.doc.dense.mjs

@@ -33,35 +33,8 @@ export const docsDense = {
       section: 'Scaffold',
       title: 'Scaffold',
       content: [
-        {
-          type: 'prose',
-          text: 'pick shell, budget regions, choose nav, before content. steps: Shell, Navigation. rules for both:',
-        },
-        {
-          type: 'list',
-          items: [
-            'decide frame + region width budgets + fill-or-capped before content',
-            'state the reason for the nav choice, or inherit template pairing',
-            'raw px for structural widths; interior = tokens',
-          ],
-        },
-        {
-          type: 'list',
-          items: [
-            'build content-first, Card-wrapping each section',
-            'stretch prose/forms/lists across a wide region instead of capping with contentWidth',
-            'SideNav when the nav is really filters/controls, or must hold wide elements like breadcrumbs',
-            'TopNav when top-slot ownership is unclear, or hierarchy is deep or still growing',
-            'both bars when the ecosystem layer is thin',
-            'break template nav pairing without a reason',
-          ],
-        },
-      ],
-    },
-    {
-      section: 'Shell',
-      title: 'Shell',
-      content: [
+        // Shell
+        null,
         {
           type: 'prose',
           text: 'pick the shell + budget its regions before any content exists. structural widths are the one place raw px belongs; everything inside uses the scale.',
@@ -80,12 +53,8 @@ export const docsDense = {
           type: 'prose',
           text: 'verify: every region has a width budget + fill-or-capped + a container policy written down before any content.',
         },
-      ],
-    },
-    {
-      section: 'Navigation',
-      title: 'Navigation',
-      content: [
+        // Navigation
+        null,
         {
           type: 'prose',
           text: 'nav left open? default SideNav: it absorbs destinations you have not planned yet. app type + destination count are guiding indicators, not determining rules.',
@@ -104,45 +73,35 @@ export const docsDense = {
           type: 'prose',
           text: 'verify: you can state the reason in one sentence, and it still holds if the nav doubles. npx astryx build "<idea>" names the template to start from; scaffold it and the pairing is wired up.',
         },
-      ],
-    },
-    {
-      section: 'Structure',
-      title: 'Structure',
-      content: [
-        {
-          type: 'prose',
-          text: 'rank content per region, pick the weakest container that groups it. steps: Type hierarchy, Card or rows, Headers and footers, Side panels. rules for all:',
-        },
+        // Best practices
+        null,
         {
           type: 'list',
           items: [
-            'one lead per region; rank via weight+color; one primary action',
-            'leave body copy at its defaults; demote via weight+color, not size',
-            'default Section; weakest container that reads as a group',
-            'collections = rows (Table/List), edge-to-edge with dividers',
-            'side panel on select; it yields width at narrow sizes',
+            'decide frame + region width budgets + fill-or-capped before content',
+            'state the reason for the nav choice, or inherit template pairing',
+            'raw px for structural widths; interior = tokens',
           ],
         },
         {
           type: 'list',
           items: [
-            'grey + shrink body copy, so a whole region reads as metadata',
-            'the disabled color for content; it fails contrast, it is for disabled controls',
-            'card soup: each record in its own Card',
-            'cards-in-cards, or full-width Cards as page structure',
-            'a header/footer rebuilt inside the body, where it scrolls away with the rows',
-            'flexbox soup instead of Grid/Layout/Section/FormLayout',
-            'two competing primary actions in one region',
-            'Badge as decoration; use StatusDot/Token for status',
+            'build content-first, Card-wrapping each section',
+            'stretch prose/forms/lists across a wide region instead of capping with contentWidth',
+            'SideNav when the nav is really filters/controls, or must hold wide elements like breadcrumbs',
+            'TopNav when top-slot ownership is unclear, or hierarchy is deep or still growing',
+            'both bars when the ecosystem layer is thin',
+            'break template nav pairing without a reason',
           ],
         },
       ],
     },
     {
-      section: 'Type hierarchy',
-      title: 'Type hierarchy',
+      section: 'Structure',
+      title: 'Structure',
       content: [
+        // Type hierarchy
+        null,
         {
           type: 'prose',
           text: 'one lead per region, then rank with weight+color, not size. two text colors only: primary + secondary, nothing dimmer. body copy needs no props.',
@@ -161,12 +120,8 @@ export const docsDense = {
           type: 'prose',
           text: 'squint test: read lead, then support, then groups, in order. everything at once = raise contrast (weight/color), not borders and not smaller text.',
         },
-      ],
-    },
-    {
-      section: 'Card or rows',
-      title: 'Card or rows',
-      content: [
+        // Containers
+        null,
         {
           type: 'prose',
           text: 'weakest container that reads as a group, escalate only when it fails. weakest to strongest:',
@@ -185,12 +140,8 @@ export const docsDense = {
           type: 'prose',
           text: 'test: records -> rows (Table columnar, List single-line); self-contained widget or hard boundary -> Card; everything else -> Section.',
         },
-      ],
-    },
-    {
-      section: 'Headers and footers',
-      title: 'Headers and footers',
-      content: [
+        // Headers and footers
+        null,
         {
           type: 'prose',
           text: 'a region can pin a header/footer while its body scrolls. both are Layout slots, and padding set once on Layout reaches all three, so header/body/footer share one content line.',
@@ -209,12 +160,8 @@ export const docsDense = {
           type: 'prose',
           text: 'verify: scroll the body. header + footer stay put, dividers run full-bleed, all three still share one left content line.',
         },
-      ],
-    },
-    {
-      section: 'Side panels',
-      title: 'Side panels',
-      content: [
+        // Side panels
+        null,
         {
           type: 'prose',
           text: 'master-detail: select a row -> fixed-width side panel, no navigation away.',
@@ -232,43 +179,41 @@ export const docsDense = {
         null,
         {
           type: 'prose',
-          text: 'verify: at narrow widths the panel yields width instead of squeezing content (see Responsive contract), and only one element between the regions draws a border.',
-        },
-      ],
-    },
-    {
-      section: 'Spacing',
-      title: 'Spacing',
-      content: [
-        {
-          type: 'prose',
-          text: 'one content line per region, then tune gaps + density. steps: Alignment, Rhythm, Density and size. rules for all:',
+          text: 'verify: at narrow widths the panel yields width instead of squeezing content (see Breakpoints), and only one element between the regions draws a border.',
         },
+        // Best practices
+        null,
         {
           type: 'list',
           items: [
-            'container owns padding; children zero margins',
-            'one content line: text on line, hover bleeds to edge',
-            'one padding token across region header/body/footer',
-            'contrast tight vs generous gaps',
-            'one control size per row; density by use frequency',
+            'one lead per region; rank via weight+color; one primary action',
+            'leave body copy at its defaults; demote via weight+color, not size',
+            'default Section; weakest container that reads as a group',
+            'collections = rows (Table/List), edge-to-edge with dividers',
+            'side panel on select; it yields width at narrow sizes',
           ],
         },
         {
           type: 'list',
           items: [
-            'double padding (component past its heading); keep one inset owner',
-            'raw px for interior spacing; tokens only',
-            'one repeated gap everywhere',
-            'mixed control sizes in one row',
+            'grey + shrink body copy, so a whole region reads as metadata',
+            'the disabled color for content; it fails contrast, it is for disabled controls',
+            'card soup: each record in its own Card',
+            'cards-in-cards, or full-width Cards as page structure',
+            'a header/footer rebuilt inside the body, where it scrolls away with the rows',
+            'flexbox soup instead of Grid/Layout/Section/FormLayout',
+            'two competing primary actions in one region',
+            'Badge as decoration; use StatusDot/Token for status',
           ],
         },
       ],
     },
     {
-      section: 'Alignment',
-      title: 'Alignment',
+      section: 'Spacing',
+      title: 'Spacing',
       content: [
+        // Alignment
+        null,
         {
           type: 'prose',
           text: 'container owns padding + child gaps; children zero margins; interior spacing = token. one content line per region, hold the line not the padding: container_inset = content_line - component_intrinsic_inset.',
@@ -286,12 +231,8 @@ export const docsDense = {
           type: 'prose',
           text: 'verify: draw one vertical line down the left. every label touches it; only hover/selected backgrounds cross it.',
         },
-      ],
-    },
-    {
-      section: 'Rhythm',
-      title: 'Rhythm',
-      content: [
+        // Rhythm
+        null,
         {
           type: 'prose',
           text: 'grouping = contrast between tight and generous gaps, not one repeated value. same step everywhere = proximity does no work.',
@@ -309,12 +250,8 @@ export const docsDense = {
           type: 'prose',
           text: 'verify: borders removed, you can still name the groups from spacing alone. cannot = intervals too uniform. form fields excepted: FormLayout owns their spacing.',
         },
-      ],
-    },
-    {
-      section: 'Density and size',
-      title: 'Density and size',
-      content: [
+        // Density and size
+        null,
         {
           type: 'prose',
           text: 'density by use frequency; every control in a row shares one size so heights share a baseline.',
@@ -332,38 +269,35 @@ export const docsDense = {
           type: 'prose',
           text: 'verify: one size per row, paired with the density of the region it sits in.',
         },
-      ],
-    },
-    {
-      section: 'Breakpoints',
-      title: 'Breakpoints',
-      content: [
-        {
-          type: 'prose',
-          text: 'decide what each region does as width changes. step: Responsive contract. rules:',
-        },
+        // Best practices
+        null,
         {
           type: 'list',
           items: [
-            'write the contract down for every region before calling the layout done',
-            'decide per region: revealed, resized, or swapped at each width',
-            'drop a region rather than let it fight for width it lacks',
+            'container owns padding; children zero margins',
+            'one content line: text on line, hover bleeds to edge',
+            'one padding token across region header/body/footer',
+            'contrast tight vs generous gaps',
+            'one control size per row; density by use frequency',
           ],
         },
         {
           type: 'list',
           items: [
-            '3 regions at a width where none has usable space',
-            'shrink every region uniformly instead of swapping/dropping one',
-            'a CSS breakpoint the contract comment never mentions',
+            'double padding (component past its heading); keep one inset owner',
+            'raw px for interior spacing; tokens only',
+            'one repeated gap everywhere',
+            'mixed control sizes in one row',
           ],
         },
       ],
     },
     {
-      section: 'Responsive contract',
-      title: 'Responsive contract',
+      section: 'Breakpoints',
+      title: 'Breakpoints',
       content: [
+        // Responsive contract
+        null,
         {
           type: 'prose',
           text: 'lock what each region does as width changes; pair each contract line with the prop/hook that enforces it.',
@@ -382,6 +316,24 @@ export const docsDense = {
           type: 'prose',
           text: 'verify: every contract line names a mechanism, so the comment cannot drift from the behavior.',
         },
+        // Best practices
+        null,
+        {
+          type: 'list',
+          items: [
+            'write the contract down for every region before calling the layout done',
+            'decide per region: revealed, resized, or swapped at each width',
+            'drop a region rather than let it fight for width it lacks',
+          ],
+        },
+        {
+          type: 'list',
+          items: [
+            '3 regions at a width where none has usable space',
+            'shrink every region uniformly instead of swapping/dropping one',
+            'a CSS breakpoint the contract comment never mentions',
+          ],
+        },
       ],
     },
   ],