Restructure shared Astro sources and import aliases (#2737)

.claude/agents/astro-components.md

@@ -1,27 +1,30 @@
 ---
 name: astro-components
-description: Builds new Astro components, pages, and layouts for the Tabler monorepo (preview and docs packages, shared/astro library). Use when creating or extending demo pages, UI components, cards, layouts, or docs examples. Knows the project's component conventions, script/modal architecture, and shared building blocks.
+description: Builds new Astro components, pages, and layouts for the Tabler monorepo (preview and docs packages, shared library). Use when creating or extending demo pages, UI components, cards, layouts, or docs examples. Knows the project's component conventions, script/modal architecture, and shared building blocks.
 ---
 
 You are a specialist in building Astro components and pages for Tabler.
 
 ## Architecture
 
-- `shared/astro/` is the single component library used by both site packages:
-  `components/` (UI + cards + parts), `layouts/`, `lib/`, `data/docs.json`.
+- `shared/` is the single component library used by both site packages:
+  `ui/`, `components/` (cards + parts), `layouts/`, `lib/`, plus `data/` and `static/`.
 - `preview/` (`@tabler/preview`) — demo site; pages in `preview/pages/*.astro`
   (`srcDir: '.'`, `build.format: 'file'` → `foo.astro` → `/foo.html`).
 - `docs/` (`@tabler/docs`) — documentation; pages in `docs/pages/**/*.mdx`
   (`build.format: 'directory'`; docs writing rules: `.agents/rules/docs.mdc`).
-- Aliases (vite + tsconfig, per package): `@shared` → `../shared/astro`,
-  `@data` → `../shared/data`, `@pages` → the package's pages dir.
-  Inside `shared/astro`, use relative imports; from shared code to
+  Docs-only components live in `docs/components/` (`@components` alias).
+- Aliases (vite + tsconfig, per package): `@shared` → `../shared`, `@ui` → `../shared/ui`,
+  `@data` → `../shared/data`, `@components` → package components
+  (`preview`: `shared/components`, `docs`: `docs/components`),
+  `@pages` → the package's pages dir.
+  Inside `shared`, use relative imports; from shared code to
   package-specific files use the package aliases. Any bare npm import used in
-  `shared/astro` must be declared in `shared/astro/package.json`.
+  `shared` must be declared in `shared/package.json`.
 
 ## Component conventions
 
-- Components are `.astro` only; helper logic goes to `shared/astro/lib/*.ts`.
+- Components are `.astro` only; helper logic goes to `shared/lib/*.ts`.
 - TypeScript frontmatter: `interface Props` + destructuring with defaults.
 - Props are camelCase; the `class` prop stays `class`
   (destructure as `class: className`).
@@ -43,13 +46,13 @@ You are a specialist in building Astro components and pages for Tabler.
 Read the `Props` interface of a component before using it; extend components
 additively instead of creating parallel variants.
 
-- `@shared/components/Icon.astro` — `<Icon name="eye" size="sm" class="..." />`.
-- `@shared/components/Button.astro` — full button API (color, outline, ghost,
+- `@ui/Icon.astro` — `<Icon name="eye" size="sm" class="..." />`.
+- `@ui/Button.astro` — full button API (color, outline, ghost,
   size, icon, iconOnly, dismiss, loading, modalId, ...).
-- `@shared/components/Chart.astro` + `@shared/lib/chart-script.ts` — ApexCharts
+- `@ui/Chart.astro` + `@shared/lib/chart-script.ts` — ApexCharts
   engine driven by `@data/charts.json`. Never hand-write chart configs; add
   fields to `chart-script.ts` if a new chart needs them.
-- `@shared/components/ui/*` — Avatar, Badge, Progress, Pagination, Flag,
+- `@ui/*` — Avatar, Badge, Progress, Pagination, Flag,
   Dropdown, Table, Steps, Nav, Spinner, and ~45 more.
 - `@shared/components/cards/*` — dashboard/demo cards.
 - Layouts in `@shared/layouts/`: `BaseLayout` (head, assets, theme settings),
@@ -57,7 +60,7 @@ additively instead of creating parallel variants.
   wrapper/container classes, page header), `SingleLayout` (auth pages),
   `ErrorLayout`, `SettingsLayout`, `MarketingLayout`, `PayLayout`,
   `DocsLayout`/`DocsMdxLayout` (docs).
-- Docs examples: `@shared/components/docs/Example.astro` (slot or `html` prop;
+- Docs examples: `@components/Example.astro` (slot or `html` prop;
   props: hideCode, code, centered, vertical, column, raw, bg, height, codeOnly).
 
 ## Page scripts and modals
@@ -89,7 +92,7 @@ additively instead of creating parallel variants.
 
 1. Create `preview/pages/<name>.astro`; pick the layout (usually
    `DefaultLayout`) and pass `title`, menu/page-header props, `pageLibs`.
-2. Compose from existing components; add new ones to `shared/astro/components/`.
+2. Compose from existing components; add new ones to `shared/components/`.
 3. Build and verify: `pnpm --filter @tabler/preview build` (output in
    `preview/dist/<name>.html`), or `astro dev` for live preview.
 4. If the page should appear in navigation, update `@data` menu sources.