feat: add Section layout component with width validation and runtime support

This commit introduces the new Section layout component to the agent-html DSL:
- Add Section to layout tag types and allowed attributes
- Implement width validation for Section (supports full, content, reader)
- Add Section runtime component with responsive width styling
- Add test fixtures and validation tests for Section
- Update documentation and examples to include Section usage
- Add local workspace file system access support for project management
- Refactor example dashboard to use Section components

Author: Sayhi-bzb

.agents/skills/agent-html/references/examples.md

@@ -15,18 +15,21 @@ Use the closest valid fixture before inventing new structure.
 - `icon-basic.xml`
 - `image-basic.xml`
 - `minimal-page.xml`
+- `section-width.xml`
 - `text-basic.xml`
 
 ## Invalid Patterns
 
 - `bare-text-under-grid.xml`
+- `bare-text-under-section.xml`
 - `carousel-missing-content.xml`
 - `chart-missing-series.xml`
 - `image-invalid-fit.xml`
 - `image-invalid-src.xml`
 - `image-with-child.xml`
 - `layout-gap-not-allowed.xml`
 - `missing-tabs-trigger-value.xml`
+- `section-invalid-width.xml`
 - `text-with-child.xml`
 - `unknown-icon-name.xml`
 - `unknown-tag.xml`

.agents/skills/agent-html/references/grammar.md

@@ -18,6 +18,7 @@
 
 - `Cluster justify="start" wrap="true"`
 - `Grid columns="2"`
+- `Section width="content"`
 - `Alert variant="default"`
 - `Card size="default"`
 - `Carousel orientation="horizontal"`
@@ -28,6 +29,7 @@
 ## Layout
 
 - `Page:title=string -> Layout | UI`
+- `Section:width?="full|content|reader" -> Layout | UI`
 - `Stack -> Layout | UI`
 - `Cluster:justify?="start|center|end|between", wrap?="true|false" -> Layout | UI`
 - `Grid:columns?="1|2|3|4" -> Layout | UI`
@@ -92,9 +94,13 @@
 
 ```xml
 <Page title="Gallery Preview">
-  <Stack>
-    <Text variant="muted">Use Text for standalone copy inside layout nodes.</Text>
+  <Section width="reader">
+    <Stack>
+      <Text variant="muted">Use Text for standalone copy inside layout nodes.</Text>
+    </Stack>
+  </Section>
 
+  <Section>
     <Card>
       <CardHeader>
         <CardTitle>Controls</CardTitle>
@@ -121,7 +127,9 @@
         </Tabs>
       </CardContent>
     </Card>
+  </Section>
 
+  <Section>
     <Grid columns="2">
       <Card>
         <CardContent>
@@ -155,7 +163,7 @@
         </CardContent>
       </Card>
     </Grid>
-  </Stack>
+  </Section>
 </Page>
 ```