feat: migration web components layout

.github/workflows/pr-head.yaml

@@ -37,11 +37,6 @@ jobs:
       - name: Build Storybook
         run: npm run build-storybook
 
-      - name: Verify combined Storybook in Chromium
-        run: |
-          npx playwright install --with-deps chromium
-          node bin/storybook/smoke-test.mjs
-
       - name: Build Form Configurator
         run: npm run build:form-configurator
 

CLAUDE.md

@@ -68,17 +68,18 @@ Path aliases defined in `libs/ui/vitest.alias.ts` and `libs/ui/tsconfig.json`: `
 
 **Build output** — Vite produces both ESM (`.js`, `preserveModules`) and CJS (`.cjs`) to `dist/libs/ui`. Post-build step (`scripts/postbuild-types.mjs`) patches `.d.ts` exports. React and `@emotion/*` are externalized. `bin/export-theme.js` serializes `defaultTheme` to JSON from the built dist; it runs automatically as part of `npm run storybook` and `npm run build-storybook`.
 
-**Shared Storybook** — `npm run storybook` manages the React host (6006) and native Web Components preview (6007) together. Open only the host. Framework-neutral pages listed in `bin/storybook/shared-docs.json` appear at the root, before React, without a prefix. Other MDX and component stories receive a central `React/` title prefix; do not duplicate it in their titles. Keep React integration examples under React, even when their topic also has shared design guidance. The combined static artifact is `libs/ui/storybook-static`, with the child under `web-components/`. Use generated story IDs for links and run `storybook:check-links` after the combined build. Package-only validation uses `node bin/storybook/check-links.mjs --package` and indexes source stories without building previews. Do not regenerate the frozen legacy route inventory to conceal missing entries. Redirects support both original links and interim React-prefixed links to shared pages. The native catalog covers all 23 published atoms and two molecules. `node bin/storybook/smoke-test.mjs` verifies native rendering and representative interactions after the combined build. Keep Angular and Vue native-element harness coverage aligned with the supported catalog.
-
-**Package subpaths** — the published package exposes four explicit subpaths (wildcards are intentionally removed to prevent internal path coupling):
-
-| Subpath                        | Contents                                                                           |
-| ------------------------------ | ---------------------------------------------------------------------------------- |
-| `gd-design-library`            | Components, hooks, tokens, assets                                                  |
-| `gd-design-library/renderer`   | `renderA2UISpec`, `A2UI_RENDERER_COMPONENT_TYPES`, `A2UICustomComponentDefinition` |
-| `gd-design-library/ai`         | Prompt builders, schemas, discovery, A2UI spec tools                               |
-| `gd-design-library/tokens`     | Raw token modules and `defaultTheme` without the component tree                    |
-| `gd-design-library/styles.css` | Global CSS reset + Google Fonts (Fira Sans/Code) — **must be imported explicitly** |
+**Shared Storybook** — `npm run storybook` manages the React host (6006) and native Web Components preview (6007) together. Open only the host. Framework-neutral pages listed in `bin/storybook/shared-docs.json` appear at the root, before React, without a prefix. Other MDX and component stories receive a central `React/` title prefix; do not duplicate it in their titles. Keep React integration examples under React, even when their topic also has shared design guidance. The combined static artifact is `libs/ui/storybook-static`, with the child under `web-components/`. Use generated story IDs for links and run `storybook:check-links` after the combined build. Package-only validation uses `node bin/storybook/check-links.mjs --package` and indexes source stories without building previews. Do not regenerate the frozen legacy route inventory to conceal missing entries. Redirects support both original links and interim React-prefixed links to shared pages. The native catalog covers all 23 published atoms, two molecules, and five layout elements. `node bin/storybook/smoke-test.mjs` verifies native rendering and representative interactions after the combined build. Keep Angular and Vue native-element harness coverage aligned with the supported catalog.
+
+**Package subpaths** — the published package exposes five explicit subpaths (wildcards are intentionally removed to prevent internal path coupling):
+
+| Subpath                        | Contents                                                                              |
+| ------------------------------ | ------------------------------------------------------------------------------------- |
+| `gd-design-library`            | Components, hooks, tokens, assets                                                     |
+| `gd-design-library/renderer`   | `renderA2UISpec`, `A2UI_RENDERER_COMPONENT_TYPES`, `A2UICustomComponentDefinition`    |
+| `gd-design-library/ai`         | Prompt builders, schemas, discovery, A2UI spec tools                                  |
+| `gd-design-library/tokens`     | Raw token modules and `defaultTheme` without the component tree                       |
+| `gd-design-library/icons`      | `iconCatalog` SVG data shared by React `Icon` and Web Components `gd-icon` (no React) |
+| `gd-design-library/styles.css` | Global CSS reset + Google Fonts (Fira Sans/Code) — **must be imported explicitly**    |
 
 `styles.css` is not auto-imported by the main entry. App entry points must add `import 'gd-design-library/styles.css'` explicitly.
 

Dockerfile.storybook

@@ -3,7 +3,6 @@ WORKDIR /app
 
 COPY package.json package-lock.json nx.json tsconfig.base.json .npmrc .prettierrc eslint.config.mjs ./
 COPY libs/ui/ libs/ui/
-COPY libs/design-core/ libs/design-core/
 COPY libs/web-components/ libs/web-components/
 COPY libs/form-configurator/ libs/form-configurator/
 COPY libs/react-native/package.json libs/react-native/package.json

README.md

@@ -14,7 +14,6 @@ Not published, and under active investigation:
 
 | Package                                  | Description                                                                                                  |
 | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
-| `gd-design-core` (`libs/design-core`)    | Framework-agnostic state stores + token resolution. No React, no Lit, no `gd-design-library` dependency      |
 | `web-components` (`libs/web-components`) | Lit custom-element port GridKit atoms. `private: true` — see [Web Components](libs/web-components/README.md) |
 
 ## Quick start
@@ -73,7 +72,7 @@ Shared **Introduction**, **Theme & Tokens**, and framework-neutral **Patterns &
 appear at the top level, before the framework catalogs.
 One entry point contains two peer catalogs: **React** (components and React-specific guides)
 and **Web Components** (native custom-element stories). The Web Components catalog currently
-contains native stories and controls for all 23 published atoms and two molecules.
+contains native stories and controls for all 23 published atoms, two molecules, and five layout elements.
 
 `npm run storybook` manages both preview servers automatically; open `http://localhost:6006`.
 Ports 6006 and 6007 must be free. There is no separate Web Components startup command.
@@ -101,7 +100,7 @@ list to refresh when a story disappears. Link checks cover source documentation
 Native browser smoke checks run with `node bin/storybook/smoke-test.mjs` after the combined build.
 They render every native story and exercise representative custom events, state changes,
 semantic output, truncation, and popover dismissal. Angular and Vue harnesses render every
-supported atom family and both molecules through native custom elements.
+supported atom family, both molecules, and all five layout elements through native custom elements.
 
 ## Verification (gd-design-library)
 

bin/generate-icon-catalog.ts

@@ -25,4 +25,4 @@ const output =
   `export const iconCatalog = ${JSON.stringify(catalog, null, 2)} as const;\n\n` +
   `export type GridKitIconName = keyof typeof iconCatalog;\n`;
 
-writeFileSync(resolve(import.meta.dirname, '../libs/design-core/src/icons/catalog.ts'), output);
+writeFileSync(resolve(import.meta.dirname, '../libs/ui/src/icons/catalog.ts'), output);

bin/storybook/check-links.mjs

@@ -3,7 +3,7 @@ import { existsSync, mkdtempSync, readFileSync, readdirSync, rmSync } from 'node
 import { tmpdir } from 'node:os';
 import { extname, join, relative, sep } from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { legacyReactIds, legacyRouteAliases, sharedDocIds } from './routes.mjs';
+import { legacyReactIds, sharedDocIds } from './routes.mjs';
 import { validateLinks } from './link-validation.mjs';
 
 const root = fileURLToPath(new URL('../../', import.meta.url));
@@ -49,7 +49,7 @@ if (built) {
 
 const errors = [];
 for (const id of legacyReactIds) {
-  const canonical = legacyRouteAliases[id] ?? (sharedDocIds.includes(id) ? id : `react-${id}`);
+  const canonical = sharedDocIds.includes(id) ? id : `react-${id}`;
   if (!indexes.react.entries[canonical]) errors.push(`Missing migrated entry: ${canonical}`);
 }
 for (const id of sharedDocIds) {
@@ -67,30 +67,13 @@ if (built) {
     errors.push('Shared documentation must appear before React in the built sidebar order');
 }
 if (!indexes.webComponents.entries['introduction-overview--overview']) errors.push('Missing Web Components overview');
-
-// Docs is the component landing format in both catalogs: it keeps the overview,
-// controls, source, and initial example together. Default remains an example
-// story only where the source component defines one.
-for (const [catalog, index] of Object.entries(indexes)) {
-  const componentEntries = Object.values(index.entries).filter((entry) => {
-    const title = entry.title.replace(/^React\//, '');
-    return /^(Atoms|Molecules|Organisms|Layout & Structure|Templates)\//.test(title);
-  });
-  const titles = [...new Set(componentEntries.map((entry) => entry.title))];
-  for (const title of titles) {
-    const entries = componentEntries.filter((entry) => entry.title === title);
-    const docs = entries.find((entry) => entry.type === 'docs');
-    if (!docs) errors.push(`${catalog}: ${title} is missing its Docs landing entry`);
-    if (built && docs && entries[0]?.id !== docs.id)
-      errors.push(`${catalog}: ${title} must open with Docs before its example stories`);
-  }
-}
 for (const [group, names] of [
   ['atoms', ['avatar', 'button', 'checkbox', 'input', 'select', 'typography']],
   ['molecules', ['counter', 'menu']],
 ]) {
   for (const name of names) {
-    for (const variant of ['docs']) {
+    const primaryStory = name === 'input' ? 'primary-default-with-label-and-helper-text' : 'default';
+    for (const variant of ['docs', primaryStory]) {
       const id = `${group}-${name}--${variant}`;
       if (!indexes.webComponents.entries[id]) errors.push(`Missing native Web Components entry: ${id}`);
     }

bin/storybook/legacy-react-ids.json

@@ -116,17 +116,13 @@
   "atoms-link--with-accessibility",
   "atoms-link--with-sizes",
   "atoms-link--with-underline",
-  "atoms-loader--custom-loader-tailwind-class-bounce-animation",
   "atoms-loader--default",
   "atoms-loader--default-tokens",
   "atoms-loader--docs",
-  "atoms-loader--inline-loader-button-variant",
   "atoms-loader--loader-names",
   "atoms-loader--loader-rounded",
-  "atoms-loader--loader-section-variant",
   "atoms-loader--loader-sizes",
   "atoms-loader--loader-variants-with-wrapper-view-as-header-tag",
-  "atoms-loader--section-loader-button-variant",
   "atoms-loader--with-accessibility",
   "atoms-select--color-error",
   "atoms-select--color-primary",