Fix dev server directory events and output cleanup races.

.github/workflows/ci.yml

@@ -43,6 +43,25 @@ jobs:
       - name: Check line endings
         run: yarn check-eol
 
+      - name: Regenerate Regor component metadata
+        run: yarn regor-components
+
+      - name: Regenerate embedded scripts
+        run: yarn embed
+
+      - name: Format repository
+        run: yarn format
+
+      - name: Verify generated and formatted files are committed
+        shell: bash
+        run: |
+          if [[ -n "$(git status --porcelain --untracked-files=all)" ]]; then
+            echo "::error::Run yarn regor-components, yarn embed, and yarn format locally, then commit the resulting changes."
+            git status --short --untracked-files=all
+            git diff --stat
+            exit 1
+          fi
+
       - name: Lint without changing files
         run: yarn lint:ci
 

frontend/docs/componentGuide.ts

@@ -121,6 +121,12 @@ export function registerComponentGuideStyles() {
       .select('.layout-demo-item--tall')
       .css({ minHeight: '4rem', fontSize: '1.3rem' })
     root.select('.layout-demo-scroll').css({ overflowX: 'auto', minWidth: '0' })
+    root.select('.layout-playground-frame').css({ height: '20rem' })
+    root.select('.layout-playground-frame--compact').css({ height: '14rem' })
+    root.select('.layout-playground-frame--tall').css({ height: '28rem' })
+    root.select('.layout-playground-width--narrow').css({ width: '24rem' })
+    root.select('.layout-playground-width--medium').css({ width: '40rem' })
+    root.select('.layout-playground-width--wide').css({ width: '60rem' })
     root
       .select('.layout-demo-track--narrow')
       .css({ width: '9rem', minHeight: '7rem' })

frontend/purestack.studio/components/layout/flex/flex.mdx

@@ -40,6 +40,28 @@ nav:
 ```
 
 
+## Interactive playground
+
+Start with a preset, then explore direction, distribution, alignment, and wrapping. **Shared baseline** uses the framework's typography utilities to make baseline alignment visible. **Flexible first item** uses `flex-1` to show how item growth consumes free space; **Wrapping cards** makes line wrapping easy to compare with nowrap and reverse wrapping. Item sizing uses the component's `flex-none`, `flex-auto`, `flex-fill`, and `flex-1` utilities.
+
+Change the preview width and height to explore both axes. Responsive overrides follow the browser viewport, so resize your browser to cross a breakpoint. Open **Responsive overrides** to configure direction, alignment, distribution, and wrapping independently at each breakpoint. The live readout shows the active settings, and the generated markup includes your component props and utility classes.
+
+<Tabs group="flex-doc-playground" selectedTab="flex-doc-playground-preview" ariaLabel="Flex playground example and source" tone="neutral" variant="surface" tabVariant="underline">
+  <TabPane id="flex-doc-playground-preview" label="Preview">
+    <div class="component-preview-stage">
+      <RegorApp id="flex-playground" src="./playground.ts"/>
+    </div>
+  </TabPane>
+  <TabPane id="flex-doc-playground-mdx" label="playground.mdx">
+```html
+<RegorApp id="flex-playground" src="./playground.ts"/>
+```
+  </TabPane>
+  <TabPane id="flex-doc-playground-ts" label="playground.ts">
+    <import-codeblock src="./playground.ts"/>
+  </TabPane>
+</Tabs>
+
 ## A responsive toolbar
 
 Resize the viewport: the title and action stack first, then share a row.