@vadimcomanescu/nadicode-design-system 4.0.1 → 4.0.2

package/.agents/skills/seed/recipes/company-contact.md

@@ -1,234 +0,0 @@
-# Recipe: Company Contact
-
-Contact page with form, company information, and FAQ.
-
-## Route Pattern
-
-`/contact` or `/contatti`
-
-## Shell
-
-`marketing-shell` (HeaderBlock + FooterBlock)
-
----
-
-## Layout Blueprint (Desktop)
-
-```
-+------------------------------------------------+
-| HeaderBlock: Logo  [Nav links]  [CTA Button]   |
-+------------------------------------------------+
-|                                                 |
-|              HEADING                            |
-|    "Get in Touch"                               |
-|    Subtitle                                     |
-|                                                 |
-+------------------------------------------------+
-|                                                 |
-|   CONTACT BLOCK (2-col)                         |
-|   +-------------------+ +------------------+    |
-|   | Contact form      | | Company info     |    |
-|   | Name, Email,      | | Address, phone,  |    |
-|   | Subject, Message  | | email, map       |    |
-|   | [Submit]          | |                  |    |
-|   +-------------------+ +------------------+    |
-|                                                 |
-+------------------------------------------------+
-|                                                 |
-|   INFO CARDS (3-col)                            |
-|   +----------+ +----------+ +----------+        |
-|   | Email    | | Phone    | | Office   |        |
-|   +----------+ +----------+ +----------+        |
-|                                                 |
-+------------------------------------------------+
-|                                                 |
-|         FAQ (Accordion)                         |
-|                                                 |
-+------------------------------------------------+
-| FooterBlock: columns + social + legal           |
-+------------------------------------------------+
-```
-
----
-
-## Section Sequence
-
-### 1. Header
-
-```tsx
-<HeaderBlock logo={<Logo />} links={navLinks} actions={<Button>Book a Call</Button>} />
-```
-
-### 2. Heading
-
-```tsx
-<section className="py-16 md:py-24">
-  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-    <motion.div variants={heroStagger.container} initial="hidden" animate="visible">
-      <motion.h1 variants={heroStagger.child} className="text-4xl md:text-5xl font-bold tracking-tight">
-        Get in Touch
-      </motion.h1>
-      <motion.p variants={heroStagger.child} className="mt-4 text-lg text-text-secondary max-w-xl mx-auto">
-        Have a question or want to work together? We'd love to hear from you.
-      </motion.p>
-    </motion.div>
-  </div>
-</section>
-```
-
-### 3. Contact Block
-
-```tsx
-<ScrollFadeIn>
-  <section className="pb-16 md:pb-24">
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <ContactBlock
-        fields={contactFields}
-        companyInfo={companyInfo}
-        onSubmit={handleSubmit}
-      />
-    </div>
-  </section>
-</ScrollFadeIn>
-```
-
-### 4. Info Cards
-
-```tsx
-<ScrollFadeIn>
-  <section className="py-16 md:py-24 bg-muted">
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-        {contactChannels.map(channel => (
-          <Card key={channel.id} className="glass-panel p-6 text-center">
-            <channel.icon className="mx-auto mb-4 h-8 w-8 text-accent" />
-            <Heading level={4} size="title" >{channel.label}</Heading>
-            <Typography variant="body" className="mt-2 text-text-secondary">
-              {channel.value}
-            </Typography>
-          </Card>
-        ))}
-      </div>
-    </div>
-  </section>
-</ScrollFadeIn>
-```
-
-### 5. FAQ
-
-```tsx
-<ScrollFadeIn>
-  <section className="py-16 md:py-24">
-    <FAQBlock items={contactFaqItems} />
-  </section>
-</ScrollFadeIn>
-```
-
-### 6. Footer
-
-```tsx
-<FooterBlock columns={footerColumns} social={socialLinks} legal={legalLinks} />
-```
-
----
-
-## Animation Storyboard
-
-```
-ANIMATION STORYBOARD
-====================
-BUDGET: 600ms (above-fold) | SPRING: dramatic (heading), snappy (rest) | REDUCED: opacity-only
-
-T+0ms     [nav]        Header visible                  (instant)
-T+100ms   [headline]   Page heading                    {fadeInUp, dramatic}
-T+250ms   [subtitle]   Subtitle                        {fadeInUp, dramatic}
-
-SCROLL-TRIGGERED (below fold):
-[contact]      ScrollFadeIn at 20% visible    {fadeInUp, snappy}
-[info-cards]   ScrollFadeIn at 20% visible    {fadeInUp, snappy, stagger 100ms}
-[faq]          ScrollFadeIn at 20% visible    {fadeInUp, snappy}
-
-REDUCED MOTION: All items visible immediately, opacity 0->1 in 10ms
-```
-
----
-
-## Required Components
-
-| Component | Import Path | Purpose |
-|-----------|-------------|---------|
-| `HeaderBlock` | `@vadimcomanescu/nadicode-design-system/catalog/components` via `seedComponents` | Site navigation |
-| `FooterBlock` | `@vadimcomanescu/nadicode-design-system/catalog/components` via `seedComponents` | Site footer |
-| `Button` | `@vadimcomanescu/nadicode-design-system/button` | CTAs and form submit |
-| `ScrollFadeIn` | `@vadimcomanescu/nadicode-design-system/scroll-fade-in` | Below-fold animations |
-| `ContactBlock` | `@vadimcomanescu/nadicode-design-system/catalog/components` via `seedComponents` | Contact form + company info |
-
-### Allowed (optional)
-
-`FAQBlock`, `Card`, `FeatureGridBlock`, `Badge`, `HeroBlock`, `HeroSectionBlock`, `CallToActionBlock`, `Typography`
-
-### Forbidden
-
-`Sidebar`, `DataTable`, `FormWizard`, `AgentTeamPanel`, `PricingBlock`, `SettingsLayout`, `ChatLayout`
-
----
-
-## Required States
-
-| State | Trigger | Visual |
-|-------|---------|--------|
-| `default` | Page loaded | Form ready for input |
-| `form-submitting` | Form submit | Button shows loading spinner, fields disabled |
-| `form-success` | Submission succeeds | Success toast/message, form resets |
-| `form-error` | Submission fails | Error toast/message, form retains values |
-
----
-
-## Responsive Contract
-
-| Breakpoint | Heading | Contact Block | Info Cards | Content Width |
-|------------|---------|---------------|------------|---------------|
-| Mobile | text-center | Stacked (form above info) | 1 col | px-4 |
-| `sm:` | text-center | Stacked (form above info) | 2 col | px-6, max-w-7xl |
-| `lg:` | text-center | Side-by-side (form left, info right) | 3 col | px-8, max-w-7xl |
-
----
-
-## Styling Rules
-
-- Contact form container uses `glass-panel` for visual depth
-- Info cards use `glass-panel` with centered icon layout
-- Section backgrounds alternate: `bg-background` and `bg-muted`
-- Form inputs use standard Seed Input/Textarea components
-- Submit button uses `Button` with loading state
-- No raw palette colors; semantic tokens only
-
----
-
-## Accessibility
-
-- Page heading is `<h1>`, section headings are `<h2>`
-- Form fields have visible stacked labels (no floating labels)
-- Required fields marked with `aria-required="true"`
-- Form errors announced via `aria-live="polite"` region
-- Submit button disabled during submission with `aria-disabled`
-- Skip-nav link to main content
-- Mobile nav is keyboard accessible with focus trap
-
----
-
-## Reference Implementations
-
-- `src/components/blocks/ContactBlock.tsx`
-- `src/components/blocks/FAQBlock.tsx`
-
----
-
-## Verification
-
-```bash
-npx tsc --noEmit
-npm run lint
-npm run test
-npx vitest run src/test/css-variable-usage.test.ts
-```

package/.agents/skills/seed/recipes/crud-form.md

@@ -1,233 +0,0 @@
-# Recipe: CRUD Form
-
-Create or edit entity pages with sectioned form groups and validation.
-
-## Route Patterns
-
-- `/[entity]/new` (create)
-- `/[entity]/[id]/edit` (edit)
-
-## Shell
-
-`app-shell` (Sidebar + top bar + SearchCommand)
-
----
-
-## Layout Blueprint (Desktop)
-
-```
-+--+---------------------------------------------+
-|  | Breadcrumb: Home > [Entity] > New            |
-|S | Page Title                        [Cancel]   |
-|I |                                               |
-|D | +------------------------------------------+  |
-|E | | Section 1: Basic Information     glass-panel|
-|B | | +--------------------------------------+ |  |
-|A | | | Label                                | |  |
-|R | | | [Input]                               | |  |
-|  | | | Label                                | |  |
-|  | | | [Textarea]                            | |  |
-|  | | +--------------------------------------+ |  |
-|  | +------------------------------------------+  |
-|  |                                               |
-|  | +------------------------------------------+  |
-|  | | Section 2: Configuration       glass-panel|  |
-|  | | [Select]  [Switch]  [Checkbox]           |  |
-|  | +------------------------------------------+  |
-|  |                                               |
-|  | +------------------------------------------+  |
-|  | | Actions Row                              |  |
-|  | | [Delete]              [Cancel] [Save]    |  |
-|  | +------------------------------------------+  |
-+--+---------------------------------------------+
-```
-
----
-
-## Section Sequence
-
-### 1. Page Header
-
-```tsx
-<div className="flex items-center justify-between">
-  <div>
-    <Breadcrumb>...</Breadcrumb>
-    <Heading level={2} size="section" >{isEdit ? `Edit ${name}` : `New ${entityType}`}</Heading>
-  </div>
-  <Button variant="ghost" onClick={handleCancel}>Cancel</Button>
-</div>
-```
-
-### 2. Form Sections (grouped in Cards)
-
-```tsx
-<Form {...form}>
-  <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-    {/* Section 1 */}
-    <Card className="glass-panel p-6">
-      <Heading level={4} size="title"  className="mb-4">Basic Information</Heading>
-      <div className="space-y-4">
-        <FormField control={form.control} name="name" render={({ field }) => (
-          <FormItem>
-            <FormLabel>Name</FormLabel>
-            <FormControl><Input {...field} /></FormControl>
-            <FormMessage />
-          </FormItem>
-        )} />
-        <FormField control={form.control} name="description" render={({ field }) => (
-          <FormItem>
-            <FormLabel>Description</FormLabel>
-            <FormControl><Textarea {...field} /></FormControl>
-            <FormMessage />
-          </FormItem>
-        )} />
-      </div>
-    </Card>
-
-    {/* Section 2 */}
-    <Card className="glass-panel p-6">
-      <Heading level={4} size="title"  className="mb-4">Configuration</Heading>
-      <div className="space-y-4">
-        {/* Select, Switch, Checkbox fields */}
-      </div>
-    </Card>
-
-    {/* Actions */}
-    <div className="flex items-center justify-between pt-4">
-      {isEdit && (
-        <AlertDialog>
-          <AlertDialogTrigger asChild>
-            <Button variant="destructive">Delete</Button>
-          </AlertDialogTrigger>
-          {/* Delete confirmation */}
-        </AlertDialog>
-      )}
-      <div className="flex items-center gap-3 ml-auto">
-        <Button variant="outline" onClick={handleCancel}>Cancel</Button>
-        <Button type="submit" disabled={!isDirty || isSubmitting}>
-          {isSubmitting ? <Spinner className="mr-2" /> : null}
-          {isEdit ? "Save Changes" : "Create"}
-        </Button>
-      </div>
-    </div>
-  </form>
-</Form>
-```
-
----
-
-## Animation Storyboard
-
-```
-ANIMATION STORYBOARD
-====================
-BUDGET: 400ms | SPRING: snappy | REDUCED: opacity-only
-
-T+0ms     [shell]     Sidebar + top bar visible    (instant)
-T+50ms    [header]    Title + breadcrumb            {fadeInUp, snappy}
-T+130ms   [section-1] First form section            {fadeInUp, snappy}
-T+230ms   [section-2] Second form section           {fadeInUp, snappy}
-T+330ms   [actions]   Action buttons row            {fadeIn, snappy}
-
-REDUCED MOTION: All items visible immediately
-```
-
----
-
-## Required Components
-
-| Component | Import Path | Purpose |
-|-----------|-------------|---------|
-| `Form` | `@vadimcomanescu/nadicode-design-system/form` | Form wrapper (react-hook-form) |
-| `FormField` | `@vadimcomanescu/nadicode-design-system/form` | Field binding |
-| `FormItem` | `@vadimcomanescu/nadicode-design-system/form` | Field container |
-| `FormLabel` | `@vadimcomanescu/nadicode-design-system/form` | Stacked label (above input) |
-| `FormControl` | `@vadimcomanescu/nadicode-design-system/form` | Control wrapper |
-| `FormMessage` | `@vadimcomanescu/nadicode-design-system/form` | Validation error message |
-| `Input` | `@vadimcomanescu/nadicode-design-system/input` | Text inputs |
-| `Textarea` | `@vadimcomanescu/nadicode-design-system/textarea` | Long text |
-| `Select` | `@vadimcomanescu/nadicode-design-system/select` | Dropdowns |
-| `Switch` | `@vadimcomanescu/nadicode-design-system/switch` | Toggles |
-| `Checkbox` | `@vadimcomanescu/nadicode-design-system/checkbox` | Boolean fields |
-| `Button` | `@vadimcomanescu/nadicode-design-system/button` | Submit, cancel, delete |
-| `Card` | `@vadimcomanescu/nadicode-design-system/card` | Section containers |
-| `Typography` | `@vadimcomanescu/nadicode-design-system/typography` | Section headings |
-| `Breadcrumb` | `@vadimcomanescu/nadicode-design-system/breadcrumb` | Navigation context |
-| `AlertDialog` | `@vadimcomanescu/nadicode-design-system/alert-dialog` | Delete confirmation |
-| `Alert` | `@vadimcomanescu/nadicode-design-system/alert` | Submission errors |
-| `Spinner` | `@vadimcomanescu/nadicode-design-system/spinner` | Submit loading |
-| `Skeleton` | `@vadimcomanescu/nadicode-design-system/skeleton` | Loading state (edit mode) |
-
-### Allowed (optional)
-
-`Field`, `Label`, `DatePicker`, `Combobox`, `TagInput`, `RadioGroup`, `Slider`, `FileUpload`, `InputOTP`, `NativeSelect`, `InputGroup`, `Tooltip`
-
-### Forbidden
-
-`DataTable`, `HeroBlock`, chart components, decorative effects, text effects, agentic components
-
----
-
-## Required States
-
-| State | Trigger | Visual |
-|-------|---------|--------|
-| `loading` | Edit mode: fetching entity | Skeleton form sections |
-| `pristine` | Form loaded, no changes | Submit button disabled |
-| `dirty` | User modified a field | Submit button enabled, optional unsaved indicator |
-| `submitting` | Form submitted | Submit button shows Spinner, form disabled |
-| `validation-error` | Invalid fields | `FormMessage` below invalid fields (red text) |
-| `submission-error` | Server error on submit | `Alert` variant="destructive" at top of form |
-| `success` | Saved successfully | Toast "Saved" + redirect to list page |
-
----
-
-## Responsive Contract
-
-| Breakpoint | Layout | Actions |
-|------------|--------|---------|
-| Mobile | Single column, cards full width | Stacked buttons, full width |
-| `sm:` | Single column, max-w-2xl centered | Inline buttons, right-aligned |
-| `lg:` | Single column within sidebar layout | Same as sm |
-
----
-
-## Styling Rules
-
-- Form sections: `glass-panel p-6`
-- Labels: always stacked above inputs (never inline, never floating)
-- Field spacing: `space-y-4` within sections
-- Section spacing: `space-y-6`
-- Required fields: visual asterisk on label
-- Error text: `text-destructive text-sm`
-- Delete button: `variant="destructive"`, left-aligned, separated from save/cancel
-- Max form width: `max-w-2xl mx-auto` for readability
-
----
-
-## Accessibility
-
-- All inputs have associated `<label>` via `FormLabel`
-- Error messages linked via `aria-describedby`
-- Required fields have `aria-required="true"`
-- Delete uses `AlertDialog` with confirmation
-- Tab order: fields top-to-bottom, then cancel, then save
-- Form has `noValidate` (custom validation via react-hook-form)
-
----
-
-## Reference Implementations
-
-- `src/components/blocks/CreateBlock.tsx`
-- `src/components/ui/Form.tsx` (form primitives)
-
----
-
-## Verification
-
-```bash
-npx tsc --noEmit
-npm run lint
-npm run test
-npx vitest run src/test/css-variable-usage.test.ts
-```

package/.agents/skills/seed/recipes/crud-list-detail.md

@@ -1,230 +0,0 @@
-# Recipe: CRUD List + Detail
-
-Entity management page with search, filter, sort, and record inspection.
-
-## Route Patterns
-
-- `/[entity]` (list view)
-- `/[entity]/[id]` (detail view, optional -- can use Dialog/Sheet instead)
-
-## Shell
-
-`app-shell` (Sidebar + top bar + SearchCommand)
-
----
-
-## Layout Blueprint (Desktop)
-
-```
-+--+---------------------------------------------+
-|  | Breadcrumb: Home > [Entity]                  |
-|S | Page Title        [Search] [Filter] [+ New]  |
-|I |                                               |
-|D | +------------------------------------------+  |
-|E | | DataTable                                |  |
-|B | | [ ] Name        Status    Date    Actions|  |
-|A | | [ ] Record 1    Active    Jan 1   ...    |  |
-|R | | [ ] Record 2    Pending   Jan 2   ...    |  |
-|  | | [ ] Record 3    Active    Jan 3   ...    |  |
-|  | | ...                                      |  |
-|  | +------------------------------------------+  |
-|  |                                               |
-|  | [< Prev]  Page 1 of 10  [Next >]             |
-+--+---------------------------------------------+
-
-Detail (Dialog/Sheet overlay):
-+--+---------------------------------------------+
-|  | ...list in background...                     |
-|  |        +---------------------------+         |
-|  |        | Sheet/Dialog              |         |
-|  |        | Entity Name               |         |
-|  |        | Status: [Badge]           |         |
-|  |        |                           |         |
-|  |        | Details section           |         |
-|  |        | Related records section   |         |
-|  |        |                           |         |
-|  |        | [Edit] [Archive] [Delete] |         |
-|  |        +---------------------------+         |
-+--+---------------------------------------------+
-```
-
----
-
-## Section Sequence
-
-### 1. Page Header + Controls
-
-```tsx
-<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-  <div>
-    <Breadcrumb>...</Breadcrumb>
-    <Heading level={2} size="section" >Entities</Heading>
-  </div>
-  <div className="flex items-center gap-3">
-    <Input placeholder="Search..." startIcon={<SearchIcon size={16} />} className="w-64" />
-    <Select>{/* Filter options */}</Select>
-    <Button><PlusIcon size={16} /> New Entity</Button>
-  </div>
-</div>
-```
-
-### 2. Data Table
-
-```tsx
-<Card className="glass-panel">
-  <DataTable
-    columns={columns}
-    data={entities}
-    onRowClick={openDetail}
-    selectable
-  />
-</Card>
-```
-
-### 3. Pagination
-
-```tsx
-<div className="flex items-center justify-between mt-4">
-  <Typography variant="small" className="text-text-secondary">
-    Showing {start}-{end} of {total}
-  </Typography>
-  <Pagination current={page} total={totalPages} onPageChange={setPage} />
-</div>
-```
-
-### 4. Detail Panel (Sheet or Dialog)
-
-```tsx
-<Sheet open={!!selectedEntity} onOpenChange={closeDetail}>
-  <SheetContent className="sm:max-w-lg">
-    <SheetHeader>
-      <SheetTitle>{entity.name}</SheetTitle>
-      <Badge>{entity.status}</Badge>
-    </SheetHeader>
-    <div className="space-y-6 mt-6">
-      {/* Detail fields */}
-      {/* Related records */}
-    </div>
-    <SheetFooter>
-      <Button variant="outline">Edit</Button>
-      <AlertDialog>
-        <AlertDialogTrigger asChild>
-          <Button variant="destructive">Delete</Button>
-        </AlertDialogTrigger>
-        {/* Confirmation dialog */}
-      </AlertDialog>
-    </SheetFooter>
-  </SheetContent>
-</Sheet>
-```
-
----
-
-## Animation Storyboard
-
-```
-ANIMATION STORYBOARD
-====================
-BUDGET: 400ms | SPRING: snappy | REDUCED: opacity-only
-
-T+0ms     [shell]     Sidebar + top bar visible    (instant)
-T+50ms    [header]    Title + controls fade in      {fadeInUp, snappy}
-T+130ms   [table]     Table container fades in      {fadeIn, snappy}
-T+200ms   [rows]      Table rows stagger            {blockStagger, 40ms, max 10}
-T+400ms   [pagination] Pagination fades in          {fadeIn, snappy}
-
-DETAIL PANEL:
-T+0ms     [overlay]   Backdrop appears              {fadeIn, 150ms}
-T+0ms     [sheet]     Sheet slides in from right    {slideInRight, gentle}
-
-REDUCED MOTION: All items visible immediately
-```
-
----
-
-## Required Components
-
-| Component | Import Path | Purpose |
-|-----------|-------------|---------|
-| `DataTable` | `@vadimcomanescu/nadicode-design-system/data-table` | Main data display |
-| `Pagination` | `@vadimcomanescu/nadicode-design-system/pagination` | Page navigation |
-| `Input` | `@vadimcomanescu/nadicode-design-system/input` | Search field |
-| `Select` | `@vadimcomanescu/nadicode-design-system/select` | Filter dropdown |
-| `Button` | `@vadimcomanescu/nadicode-design-system/button` | Actions (new, edit, delete) |
-| `Badge` | `@vadimcomanescu/nadicode-design-system/badge` | Status indicators |
-| `Card` | `@vadimcomanescu/nadicode-design-system/card` | Table container |
-| `Sheet` | `@vadimcomanescu/nadicode-design-system/sheet` | Detail side panel |
-| `AlertDialog` | `@vadimcomanescu/nadicode-design-system/alert-dialog` | Delete confirmation |
-| `Typography` | `@vadimcomanescu/nadicode-design-system/typography` | Titles |
-| `Breadcrumb` | `@vadimcomanescu/nadicode-design-system/breadcrumb` | Navigation context |
-| `Skeleton` | `@vadimcomanescu/nadicode-design-system/skeleton` | Loading state |
-| `Empty` | `@vadimcomanescu/nadicode-design-system/empty` | No-data state |
-
-### Allowed (optional)
-
-`Dialog`, `Tabs`, `DropdownMenu`, `ContextMenu`, `Tooltip`, `Table`, `Checkbox`
-
-### Forbidden
-
-`HeroBlock`, `PricingBlock`, decorative effects, text effects, `FormWizard`, chart components
-
----
-
-## Required States
-
-| State | Trigger | Visual |
-|-------|---------|--------|
-| `loading` | Initial data fetch | Skeleton table rows (5 rows) |
-| `empty` | Zero records | `Empty` with entity icon, "No [entities] yet", "Create your first [entity]" CTA |
-| `has-data` | Data loaded | Full DataTable with records |
-| `filtering` | Active filter/search | Table with filtered results, active filter indicators |
-| `empty-filter` | Filter returns zero | `Empty` with "No results match", "Clear filters" CTA |
-| `error` | API failure | `Alert` variant="destructive" with retry |
-
----
-
-## Responsive Contract
-
-| Breakpoint | Table | Filters | Detail Panel |
-|------------|-------|---------|--------------|
-| Mobile | Card list (hidden columns) | Filter button -> Sheet | Full-screen Sheet |
-| `sm:` | Table (key columns) | Inline search + filter button | Sheet side="right" |
-| `lg:` | Full table all columns | Persistent search + filter bar | Sheet max-w-lg |
-
----
-
-## Styling Rules
-
-- Table container: `glass-panel`
-- Status badges: semantic variants (`success`, `warning`, `destructive`, `default`)
-- Row hover: `hover:bg-surface-hover`
-- Selected rows: `bg-surface-active`
-- No raw palette colors
-
----
-
-## Accessibility
-
-- Table has proper `<thead>`, `<tbody>` structure
-- Sortable columns have `aria-sort` attribute
-- Row actions have `aria-label`
-- Delete uses `AlertDialog` for confirmation (keyboard trap)
-- Search input has `role="search"` wrapper
-
----
-
-## Reference Implementations
-
-- `src/components/blocks/DataGridBlock.tsx`
-- `src/components/blocks/DirectoryBlock.tsx`
-
----
-
-## Verification
-
-```bash
-npx tsc --noEmit
-npm run lint
-npm run test
-npx vitest run src/test/css-variable-usage.test.ts
-```