@wallarm-org/claude-design 4.9.0 → 4.10.0

package/README.md

@@ -1,7 +1,7 @@
 # Wallarm Design System for Claude Design
 
 Install [Wallarm Design System](https://github.com/wallarm/design-system) in Claude Design from
-one prompt. Paste the prompt from the [Claude Design guide](https://wallarm.github.io/design-system/ai/claude-design)
+one prompt. Paste the prompt from the [Claude Design guide](https://wallarm.github.io/design-system/ai/claude-design#your-own-copy)
 into a Claude Design chat; Claude runs:
 
 ```bash
@@ -14,9 +14,10 @@ The command writes `wallarm-design-system/` and never prompts:
 | --- | --- |
 | `project/` | The system to publish as a Design System artifact: runtime bundle, tokens, CSS, fonts, component guides and previews. Its index lists no asset groups until `index` adds them |
 | `assets/`, `assets.json` | The icon and logo SVGs for the system's galleries, uploaded as assets (not files), and their manifest (group, name, path, sha256, size, type, in gallery order) |
-| `SETUP.md` | Claude's steps: publish the system, install it on a canvas, add and check the sampler |
+| `SETUP.md` | Claude's steps: publish the system, install it on a canvas, add and check the sampler and the app skeleton |
 | `UPDATE.md` | Claude's steps to update an installed system to this release (also written alone by `update`) |
 | `wallarm-sampler.dc.html` | The sampler artboard, linked to the canvas's `ds/wallarm-design-system/` copy |
+| `wallarm-app.dc.html` | The app skeleton (the system's `app-skeleton.dc.html`), linked the same way; Claude edits only its `APP` object |
 | `files.json` | Each written file with its sha256 |
 | `removed.json` | With `--existing`: the paths an update drops |
 
@@ -63,7 +64,7 @@ and `dist/` from `../design-system` (`DESIGN_SYSTEM_DIR` in `src/config.ts`); th
 `@wallarm-org/design-system` package is not affected. Each stable release publishes this package
 from `deploy-site.yml` (job `claude-design`): it runs `export`, sets the version to the tag and
 runs `pnpm publish`, whose `prepack` (`src/pack.ts`) packs `.claude-design/` into `dist/` with
-the rendered `content/SETUP.md` and `content/UPDATE.md` and the canvas sampler. Wallarm's own artifact is synced by hand
+the rendered `content/SETUP.md` and `content/UPDATE.md` and the canvas sampler and skeleton. Wallarm's own artifact is synced by hand
 with the [`claude-design-sync`](../../.claude/skills/claude-design-sync/SKILL.md) skill; the
 designer guide is `apps/website/docs/ai/claude-design.mdx`. What Storybook does not show, and
 so Claude Design cannot learn: [CLAUDE_DESIGN_GAP.md](./CLAUDE_DESIGN_GAP.md).
@@ -79,11 +80,11 @@ All under `src/`. Outside it: `bin/claude-design.js` (the npm CLI, plain Node ES
 | `tokens/` | Design tokens |
 | `docs/` | Component guides, prop types and the project README (embeds `design-system/src/guidelines/rules.md`) |
 | `previews/` | Story previews |
-| `sampler/` | The canonical screen `sampler.dc.html`, checked against the built CSS, tokens and exports, and shipped at the project root |
+| `sampler/` | The canonical screen `sampler.dc.html` and the app skeleton `app-skeleton.dc.html` (the README's "Start here"), checked against the built CSS, tokens and exports, and shipped at the project root |
 | `assets/` | Icons, fonts and the cover |
 | `harness/` | React 18 tests that mount the built bundle and previews |
 | `config.ts` | Artifact identity, namespace, budgets |
-| `pack.ts` | `prepack`: `.claude-design/` → `dist/` for npm (SVGs moved to `dist/assets/` with `assets.json`, rendered `SETUP.md` and `UPDATE.md`, canvas sampler) |
+| `pack.ts` | `prepack`: `.claude-design/` → `dist/` for npm (SVGs moved to `dist/assets/` with `assets.json`, rendered `SETUP.md` and `UPDATE.md`, canvas sampler and skeleton) |
 | `build.ts`, `verify.ts` | Builder and repeatability check |
 
 ### Commands

package/dist/SETUP.md

@@ -1,17 +1,18 @@
-# Install Wallarm Design System 4.9.0 in Claude Design
+# Install Wallarm Design System 4.10.0 in Claude Design
 
-This guide ships with Wallarm Design System 4.9.0. Work through the steps in order and run each check before moving on.
+This guide ships with Wallarm Design System 4.10.0. Work through the steps in order and run each check before moving on.
 
 The export wrote `wallarm-design-system/`:
 
 | Path | Contents | Publish it |
 | --- | --- | --- |
-| `project/` | The design system: 373 files | Yes: every file, unchanged |
+| `project/` | The design system: 374 files | Yes: every file, unchanged |
 | `assets/` | The icon and logo galleries: 583 SVG files in Logos (1), Icons (582) | As assets, in step 1 |
 | `assets.json` | Each SVG's group, name, path and sha256 | No |
 | `SETUP.md` | This guide | No |
 | `UPDATE.md` | The update guide, for a later release | No |
 | `wallarm-sampler.dc.html` | The sampler artboard, for step 4 | To the canvas, in step 4 |
+| `wallarm-app.dc.html` | The app skeleton, for step 6 | To the canvas, in step 6 |
 | `files.json` | Every file the export wrote, with its sha256 | No |
 | `removed.json` | Paths an update drops. Written only with `--existing` | No |
 | `blobs.json` | You write it in step 1: each SVG's path and the url its upload returned. The `index` command rewrites it keyed by sha256. The `update` command deletes it | No |
@@ -26,7 +27,7 @@ Create a new **Design System** artifact titled `Wallarm Design System`, with the
    - Send `project/components/index.d.ts` with the content type `text/plain`; the artifact refuses it otherwise. Every other file's type follows its extension.
    - A publish takes at most 255 files, so send the files in batches of up to 200.
 2. **Icons and logos.** The galleries are asset uploads, not files: never publish anything from `wallarm-design-system/assets/` as a file under `project/`.
-   1. Run `npx -y @wallarm-org/claude-design@4.9.0 index --blobs wallarm-design-system/blobs.json`. It exits 3 and lists in `wallarm-design-system/upload.json` the local paths of the SVGs to upload (identical SVGs share one upload).
+   1. Run `npx -y @wallarm-org/claude-design@4.10.0 index --blobs wallarm-design-system/blobs.json`. It exits 3 and lists in `wallarm-design-system/upload.json` the local paths of the SVGs to upload (identical SVGs share one upload).
    2. Upload them in the order listed: the Artifact tool's publish with the system's `url`, `asset: true` and `file_paths` set to the next 25 paths from `upload.json`, copied as they are. With `upload_asset`, if that is the tool you have, send at most 10 per call. The first install takes about 24 calls. If an upload is refused, show the person the error and stop.
    3. After each call, add one entry per uploaded file to `wallarm-design-system/blobs.json`, a JSON object: the path as `upload.json` lists it, mapped to the `url` the result gives for that file, for example `{"wallarm-design-system/assets/Icons/activity.svg": "https://…/_blob/<id>"}`. Copy the url, not the asset's `id`. If the result has no url but gives each file's sha256 and id (as `upload_asset` does), key the entry by that sha256 instead.
    4. Run the `index` command again. It rewrites `blobs.json` keyed by sha256; keep its entries and add new ones after them. Exit 3: upload the paths it lists now and run it again. Exit 0: it wrote the asset groups into `project/design-system.json`.
@@ -34,7 +35,7 @@ Create a new **Design System** artifact titled `Wallarm Design System`, with the
 
 In artboards, icons are still `WallarmDS.Icons.<Name>` and the logo `WallarmDS.Logo`, from `components/bundle.js`; the galleries show them on the system's page.
 
-Check: every `project/` path in `wallarm-design-system/files.json` (373 files) is in the artifact, its title is `Wallarm Design System`, and `project/design-system.json` has a `lastChange.note` that starts with `v4.9.0:`. The Artifact tool's `list` with the system's `url` and `scope: "assets"` shows at least 580 assets. The system's page shows the asset groups Logos (1), Icons (582), with every icon drawn (no broken image). The page may add `project/manifest.json` and files under `project/api/`; they don't count. Give the person the artifact's link: they need it to install the system on other canvases and to update it.
+Check: every `project/` path in `wallarm-design-system/files.json` (374 files) is in the artifact, its title is `Wallarm Design System`, and `project/design-system.json` has a `lastChange.note` that starts with `v4.10.0:`. The Artifact tool's `list` with the system's `url` and `scope: "assets"` shows at least 580 assets. The system's page shows the asset groups Logos (1), Icons (582), with every icon drawn (no broken image). The page may add `project/manifest.json` and files under `project/api/`; they don't count. Give the person the artifact's link: they need it to install the system on other canvases and to update it.
 
 If a publish is refused for a reason this step doesn't cover, show the person the error and stop. Don't edit or rename files to get past it.
 
@@ -103,7 +104,31 @@ If you can't see the canvas or its console, ask the person to check each item an
 
 The sampler is light only. For a dark artboard, set `theme="dark"` on its `WallarmDS.Root`, as the README says.
 
-When every check passes, tell the person the Wallarm Design System is ready, give them the system link, and wait for their design request.
+## 6. Build the app skeleton
+
+`wallarm-design-system/wallarm-app.dc.html` is the person's application frame: the console header, the product rail, a product menu and an empty page. They design their screens inside it. It is the same file as the system's `project/app-skeleton.dc.html`, with canvas link lines.
+
+1. Publish it to the canvas at `project/wallarm-app.dc.html` exactly as step 4 publishes the sampler, with the same folder rule for its three link lines.
+2. Merge this key into `boards` in `project/canvas.json` and append `"wallarm-app.dc.html"` to `order`, as in step 4. It sits right of the sampler; if the canvas has other boards, the step 4 placement rule applies.
+
+   ```json
+   {"wallarm-app.dc.html":{"x":1520,"y":0,"w":1440,"h":900,"title":"Wallarm app","expand":"fill"}}
+   ```
+
+3. If the person's message names their product, its menu items or its pages (for example "My product: API Security. Menu: Overview, API Discovery; group Detect & Respond: Attacks, Incidents"), edit the board's `APP` object, the block that starts with `var APP = {` at the top of its script, and change nothing else in the file:
+   - `nav.productLabel` is the product's name and `nav.productPath` is `/` plus its kebab-case id. Make the matching `rail` entry carry the same `label` and `path`; keep or replace the other rail products as they ask.
+   - `nav.items` follows the menu they gave, in their order: a page is `{ type: 'link', id, label, path }`; a named group of pages is `{ type: 'group', id, label, defaultExpanded: true, children: [links] }`; a label over a run of entries is `{ type: 'section-header', id, label }`. Use `type: 'drill'` only if they ask for an entity picker. `id` and `path` are the label in kebab-case with punctuation dropped (`API Discovery` → `api-discovery`, `Detect & Respond` → `detect-respond`), each path one segment and unique. Give every top-level link and group an `icon` (a `WallarmDS.Icons` name as a string), or give none: mixed icons misalign the menu.
+   - `start` is the first link's `path`. A link may take `action`, the label of its page's primary button, and `dividerAfter`, only when they name them; drop the sample's otherwise.
+
+   If the message names none of these, keep the sample product as it is.
+
+Check, as in step 5 (ask the person if you can't see the canvas):
+
+- A board titled `Wallarm app` shows the header (logo, search, tenant, assistant, notification bell with 2 unread, help), the rail (Home, the products, and Settings and the account at the bottom), the product menu, the breadcrumb and a page titled after the first menu item with the `Ask Claude to design this screen` empty state.
+- The console has no `[WallarmDS]` warning and no error. `[WallarmDS] icon "…" is not in WallarmDS.Icons` means an `icon` in `APP` is misspelled: fix the name there.
+- Click another menu item: the menu highlights it, and the breadcrumb and the page title follow.
+
+When every check passes, tell the person the Wallarm Design System is ready, give them the system link, and say the canvas has two boards: the sampler, a reference screen, and their app skeleton. Ask for the screens they want and design each one inside the skeleton's `Page`, as the README's "Start here" step 3 says: title and action through `APP` (add a menu link for a screen that has none), `PageDescription` and a `PageToolbar` around a new `PageContent` as the pattern guide says, `fixed-height` on a list page, the screen's data in `renderVals()`, and the shell kept. Then wait for their design request.
 
 ## Update to a new release
 
@@ -116,8 +141,10 @@ To update a system the person already has, run `npx -y @wallarm-org/claude-desig
 | The publish is refused for `index.d.ts` | Send `project/components/index.d.ts` as `text/plain`. |
 | The publish is refused for too many files | Send smaller batches, as step 1 says. |
 | The `index` command exits 3 | Upload the paths in `upload.json`, add their urls to `blobs.json` and run it again. An entry it names as invalid has a key that matches no SVG or a value that isn't a 32-character blob id or `/_blob/<id>` url: copy it again from `upload.json` and the upload result. |
-| Publishing `project/design-system.json` is refused as stale | The system's page saved a newer index. Save the version the refusal hands back as `current-index.json` (copy it; don't retype it), run `npx -y @wallarm-org/claude-design@4.9.0 index --blobs wallarm-design-system/blobs.json --index current-index.json`, and publish the index again. Nothing needs uploading again. |
+| Publishing `project/design-system.json` is refused as stale | The system's page saved a newer index. Save the version the refusal hands back as `current-index.json` (copy it; don't retype it), run `npx -y @wallarm-org/claude-design@4.10.0 index --blobs wallarm-design-system/blobs.json --index current-index.json`, and publish the index again. Nothing needs uploading again. |
 | The gallery is empty or shows broken images | `project/design-system.json` was published before the `index` command exited 0, or with a wrong url. Fix `blobs.json`, run `index` again and publish the index again. |
+| The skeleton shows no menu, or a click doesn't move the highlight | `APP.nav` is broken: every node needs `type`, `id` and `label`, every link a one-segment `path`, and `start` must be one of those paths. Fix the object; change nothing else. |
+| The rail's products, the page title or the tenant are empty | The canvas runtime ignores `children="{{…}}"` holes. Tell the person and report it with the version (4.10.0). |
 | No sampler board shows | The file isn't at `project/wallarm-sampler.dc.html`, or `project/canvas.json` has no `"wallarm-sampler.dc.html"` in `boards` or `order`. |
 | Components render unstyled | The link lines don't reach `project/ds/wallarm-design-system/`. The artboard must sit directly in `project/`, and the folder name must match step 2. |
 | `WallarmDS is not defined` | `components/bundle.js` isn't loaded: same cause as above. |
@@ -127,4 +154,4 @@ To update a system the person already has, run `npx -y @wallarm-org/claude-desig
 | Text shows in the system font | The fonts in `project/fonts/` weren't published or installed. Check step 1's file check and step 2. |
 | The export command fails or can't reach npm | Show the person its output and stop. |
 
-Never edit a file in the system artifact or under `project/ds/wallarm-design-system/` on a canvas to make a check pass. If a check still fails, tell the person which check, what you saw and the version (4.9.0). Problems go to https://github.com/wallarm/design-system/issues.
+Never edit a file in the system artifact or under `project/ds/wallarm-design-system/` on a canvas to make a check pass. If a check still fails, tell the person which check, what you saw and the version (4.10.0). Problems go to https://github.com/wallarm/design-system/issues.

package/dist/UPDATE.md

@@ -1,6 +1,6 @@
-# Update Wallarm Design System to 4.9.0 in Claude Design
+# Update Wallarm Design System to 4.10.0 in Claude Design
 
-This guide updates a Wallarm Design System artifact the person installed in Claude Design to 4.9.0. Work through the steps in order and run each check before moving on.
+This guide updates a Wallarm Design System artifact the person installed in Claude Design to 4.10.0. Work through the steps in order and run each check before moving on.
 
 ## 0. Find the system
 
@@ -18,15 +18,15 @@ Check: `current-files.json` is a JSON array that has `project/design-system.json
 
 ## 2. Export the release
 
-Run this command; it pins 4.9.0, the release of this guide:
+Run this command; it pins 4.10.0, the release of this guide:
 
 ```bash
-npx -y @wallarm-org/claude-design@4.9.0 export --overwrite --existing current-files.json
+npx -y @wallarm-org/claude-design@4.10.0 export --overwrite --existing current-files.json
 ```
 
 Exit 0 or 3 are both done; on 3 the output names the manual step, which is removing the paths in `wallarm-design-system/removed.json` (steps 3 and 6). Any other exit: show the person the output and stop.
 
-Check: `wallarm-design-system/files.json` and `wallarm-design-system/SETUP.md` exist, and `wallarm-design-system/SETUP.md` is for 4.9.0. The steps below point into it.
+Check: `wallarm-design-system/files.json` and `wallarm-design-system/SETUP.md` exist, and `wallarm-design-system/SETUP.md` is for 4.10.0. The steps below point into it.
 
 ## 3. Confirm removals
 
@@ -42,14 +42,14 @@ Publish `wallarm-design-system/project/` to the same artifact link: every file e
 2. Run this exact command, and use it unchanged on every run below:
 
    ```bash
-   npx -y @wallarm-org/claude-design@4.9.0 index --blobs wallarm-design-system/blobs.json --index current-index.json
+   npx -y @wallarm-org/claude-design@4.10.0 index --blobs wallarm-design-system/blobs.json --index current-index.json
    ```
 
    It reuses the blob id of every SVG whose sha256 the current index already has, so `upload.json` lists only the new and changed SVGs. Exit 3: upload them and add their urls to `blobs.json` as SETUP.md step 1's "Icons and logos" says (items 2 and 3), then run the command again. Exit 0: nothing (more) needs uploading.
 3. Right before publishing, read `project/design-system.json` again into `current-index.json` as in item 1 (the system's page may have saved it meanwhile), and run the command again: it exits 0 and merges this release into the index just read.
 4. Publish `project/design-system.json` at once, last and alone.
 
-Check: every `project/` path in `wallarm-design-system/files.json` (373 files) is in the artifact, `project/design-system.json` has a `lastChange.note` that starts with `v4.9.0:`, and the page shows Logos (1), Icons (582) with no broken image. `project/manifest.json` and files under `project/api/` are written by the system's page: they don't count and stay.
+Check: every `project/` path in `wallarm-design-system/files.json` (374 files) is in the artifact, `project/design-system.json` has a `lastChange.note` that starts with `v4.10.0:`, and the page shows Logos (1), Icons (582) with no broken image. `project/manifest.json` and files under `project/api/` are written by the system's page: they don't count and stay.
 
 ## 6. Remove dropped files
 
@@ -69,7 +69,9 @@ On one canvas you reinstalled in step 7:
 2. Publish the new sampler to `project/wallarm-sampler.dc.html` as SETUP.md step 4 says. Read `project/canvas.json` right before merging into it (the canvas writes it when boards move), keep its board's `x` and `y` and its place in `order`.
 3. Run the checks in SETUP.md step 5.
 
-When every check passes, tell the person the system is on 4.9.0, give them the system link, and wait for their request.
+Never replace or edit `project/wallarm-app.dc.html` on an update: the app skeleton is the person's own work (their product, menu and screens). Only the sampler is refreshed. Tell the person so; if they want the new release's skeleton too, add it as a new board as SETUP.md step 6 says, under another file name such as `wallarm-app-new.dc.html`.
+
+When every check passes, tell the person the system is on 4.10.0, give them the system link, and wait for their request.
 
 ## When something looks wrong
 
@@ -81,4 +83,4 @@ When every check passes, tell the person the system is on 4.9.0, give them the s
 | The gallery is empty or shows broken images | `project/design-system.json` was published before the `index` command exited 0, or with a wrong url. Fix `blobs.json`, run `index` again and publish the index again. |
 | A canvas shows an older version | Install the system again on that canvas. |
 
-Anything else: see "When something looks wrong" in `wallarm-design-system/SETUP.md`. Never edit a file in the system artifact or under a canvas's `project/ds/` folder to make a check pass. If a check still fails, tell the person which check, what you saw and the version (4.9.0). Problems go to https://github.com/wallarm/design-system/issues.
+Anything else: see "When something looks wrong" in `wallarm-design-system/SETUP.md`. Never edit a file in the system artifact or under a canvas's `project/ds/` folder to make a check pass. If a check still fails, tell the person which check, what you saw and the version (4.10.0). Problems go to https://github.com/wallarm/design-system/issues.

package/dist/project/README.md

@@ -4,9 +4,28 @@ Generated from wallarm/design-system — change it in code and run /claude-desig
 
 Wallarm's product UI system uses the real library components, semantic tokens and Geist fonts. Build with components first, style with semantic tokens second, and reach for primitives last. The generated canvas bundle uses the page's React 18 runtime.
 
+## Start here
+
+On a Design canvas, every screen lives inside the app skeleton: [`app-skeleton.dc.html`](app-skeleton.dc.html), the console frame with the header, the product rail, a product menu (`RemoteShell` from a `NavConfig`) and an empty `Page`. Set it up before the first screen:
+
+1. If the canvas has `project/wallarm-app.dc.html`, that is the person's skeleton: use it and never replace it. Otherwise copy this system's `app-skeleton.dc.html` to `project/wallarm-app.dc.html`. On a canvas this system is installed in `project/ds/<folder>/`, the folder this README is in; boards sit directly in `project/`. If that folder has no `app-skeleton.dc.html`, read `project/app-skeleton.dc.html` from the design system artifact the canvas was installed from. In the copy, replace the three link lines in `<head>` with these four, `<folder>` being that folder's name, and change nothing else:
+
+   ```html
+   <script src="./support.js"></script>
+   <link rel="stylesheet" href="ds/<folder>/tokens.css">
+   <link rel="stylesheet" href="ds/<folder>/components/bundle.css">
+   <script src="ds/<folder>/components/bundle.js"></script>
+   ```
+
+   Add it as the first board: merge `"wallarm-app.dc.html": {"x": 0, "y": 0, "w": 1440, "h": 900, "title": "Wallarm app", "expand": "fill"}` into `boards` in `project/canvas.json` (right of the other boards if there are any: `x` is their largest `x + w` plus 80) and append `"wallarm-app.dc.html"` to `order`.
+2. Set up the shell only through its `APP` object, the block that starts with `var APP = {` at the top of its script, from the person's request: the product's name and path, its menu (`link`, `group` and `section-header` nodes; `drill` only if asked; ids and paths in kebab-case with punctuation dropped, `Detect & Respond` → `detect-respond`), the rail's products and `start`, the first link's path. Give every top-level link and group an `icon` (a `WallarmDS.Icons` name), or give none. When you rebuild the menu, drop the sample's `action` and `dividerAfter` unless the person names them. The comment above the object describes each field. With no product named, keep the sample. Leave the header, rails and product menu markup as it is.
+3. Design each requested screen inside the skeleton's `Page`, following its pattern guide. Set `start` to the path of the screen's menu link; if the screen has no link, add one to `APP.nav.items`, in kebab-case like the others, and set `start` to it. The link's label is the page title and its `action` the primary button. Keep `PageHeader`; add `PageDescription` in its `PageHeaderGroup` and a `PageToolbar` (search, tabs, filters) between `PageHeader` and `PageContent`; on a page that lists rows, set `fixed-height="{{yes}}"` on `Page`. Replace the `EmptyState` in `PageContent` with the screen. The screen's own data (table rows, counts) goes in `renderVals()`, outside `APP`. For several screens, make one board per screen: a copy of the skeleton under a new file name, with its own `start`.
+
+Skip the skeleton only when the person asks for a standalone component or a screen without the app frame. The console must show no `[WallarmDS]` warning, and clicking a menu item moves the highlight, the breadcrumb and the page title.
+
 ## Rules
 
-These are the design system's own rules (`src/guidelines/rules.md`), embedded at build time. On the canvas, read `get_guideline` as "the pattern guide": they ship in the npm package under `dist/guidelines/` (`rules.md`, `foundations/`, `patterns/`) and through the MCP server's `get_guideline` tool.
+These are the design system's own rules (`src/guidelines/rules.md`), embedded at build time. On the canvas, read `get_guideline` as "the pattern guide": they ship in the npm package under `dist/guidelines/` (`rules.md`, `foundations/`, `patterns/`, `templates/`) and through the MCP server's `get_guideline` tool.
 
 Every numeric utility is in px, not 4px steps: p-16 is 16px, p-4 is 4px. Translate Tailwind habits (p-4 → p-16, gap-6 → gap-24, w-64 → w-256).
 
@@ -14,29 +33,30 @@ Before composing a screen, call get_guideline for the pattern (app shell, list p
 
 - p-5, gap-3, p-10 → stay on the scale: 1, 2, 4, 6, 8, 12, 16, 20, 24, 28, 32, 40, 48, 64…
 - space-y-4, margins per child → <VStack gap={16}>, <HStack gap={8}>
-- Padded page wrapper → Page > PageHeader / PageToolbar / PageContent own the 24px gutter
+- Padded page wrapper → PageHeader / PageToolbar / PageContent own the 24px gutter
 - p-* on Card, DrawerBody, DialogBody, PageToolbar, Table → none; they own their padding
 - className on Text, Heading, Field, Drawer/Dialog Header/Body/Footer → wrap in your own element
 - Raw <h1>, <p>, <label> → <Heading as="h2" size="lg">, <Text size="sm">, Field
-- <Text> default (16px) for body → size="sm" (md is only an alias of sm)
-- leading-none (0px), leading-5 (5px) → leading-sm or leading-20
+- <Text> default (16px) for body → size="sm"
+- leading-none (0px), leading-5 (5px) → leading-sm, leading-20
 - weight="semibold" → weight is light|regular|medium|bold (medium = 450)
-- bg-primary, text-muted, bg-card, bg-white, text-gray-500 → bg-bg-primary, text-text-secondary, bg-bg-surface-1
+- bg-primary, text-muted, bg-card, bg-white → bg-bg-primary, text-text-secondary, bg-bg-surface-1
 - text-error, bg-red-500 → danger tokens; categorical color → Badge color
 - dark: variant, setting data-theme → semantic tokens, useTheme().setTheme()
 - rounded-lg, rounded, rounded-[15px] → rounded-8 (controls), rounded-12 (panels)
 - shadow-* on DS components, z-* on overlays → never; they own both
 - focus:ring → focus-visible:ring-3 ring-focus-primary outline-none
-- size, DIALOG_SIZES, DRAWER_SIZES → width: Dialog 400 confirm, 560 default, 960 picker; Drawer 640 default, 700 Timeline form
+- size, DIALOG/DRAWER_SIZES → width: Dialog 400 confirm, 560 default, 960 picker; Drawer 640 default, 700 Timeline form
 - Dialog, useToast from the root → @wallarm-org/design-system/Dialog, /Toast
 - Field invalid → error on the control + FieldError
+- Table actions column → meta.renderMenuAction on the master column
 - Hand-built side menu → RemoteShell config={NavConfig}
 - ConfirmDialog, FilterBar, Combobox → compose Dialog parts, PageToolbar + FilterDropdown, Select + useSelectSearch
 - data-slot in tests → data-testid
 
 ## Screen sampler
 
-[`sampler.dc.html`](sampler.dc.html) is one canonical 1440-wide screen built only from this system through `x-import`: `AppShell`, a resource list `Page` with `PageHeader` and its create action, a `PageToolbar` with search and status tabs, an entity `Table` with a status `Badge` column and an always-visible actions column, a no-results `EmptyState`, and a detail `Drawer` opened by `open` with an empty nested table. It follows the `resource-list-page`, `entity-table` and `detail-drawer` pattern guides. Start a screen from it rather than from raw `div`s; the export checks that every class it uses exists in `components/bundle.css`.
+[`sampler.dc.html`](sampler.dc.html) is one canonical 1440-wide screen built only from this system through `x-import`: `AppShell`, a resource list `Page` with `PageHeader` and its create action, a `PageToolbar` with search and status tabs, an entity `Table` with a status `Badge` column and the row menu in the master cell (`meta.renderMenuAction`), a no-results `EmptyState`, and a detail `Drawer` opened by `open` with an empty nested table. It follows the `resource-list-page`, `entity-table` and `detail-drawer` pattern guides. Start a screen from it rather than from raw `div`s; the export checks that every class it uses exists in `components/bundle.css`.
 
 ## Content
 
@@ -83,7 +103,7 @@ Before composing a screen, call get_guideline for the pattern (app shell, list p
 
 ## Layout on a canvas
 
-- Start from the [screen sampler](#screen-sampler). `AppShell` is the frame; `Card` → `CardHeader` / `CardContent` / `CardFooter` groups content.
+- Start inside the [app skeleton](#start-here); the [screen sampler](#screen-sampler) shows a finished screen. `AppShell` is the frame; `Card` → `CardHeader` / `CardContent` / `CardFooter` groups content.
 - A number prop such as `gap` is a `{{hole}}` from `renderVals()`: `gap="{{rowGap}}"` with `rowGap: 6`.
 - When a raw grid is unavoidable, use the layout kit: `grid grid-cols-4 gap-16`, `md:grid-cols-2`, `col-span-2`, `w-1/3`, `max-w-7xl`, `divide-y divide-border-primary-light`, `first:`/`last:` padding and border resets. Give flex and grid children `min-w-0` so they can shrink.
 - Responsive variants (`sm:`, `md:`, `lg:`, `xl:`) follow the viewport, not the artboard.
@@ -247,17 +267,27 @@ This is the separate Claude Design build; the npm package still targets React 19
 - color-data-viz-1: source placeholder omitted.
 - color-transparent: unsupported color value "transparent" (light); retained in bundle.css.
 - drawer-level-ratio: unsupported component value; retained in bundle.css.
-- src/guidelines/patterns/app-layout.stories.tsx: pattern story, not a component; the screen sampler covers the patterns on a canvas.
-- src/guidelines/patterns/auth-page.stories.tsx: pattern story, not a component; the screen sampler covers the patterns on a canvas.
-- src/guidelines/patterns/confirmation-dialogs.stories.tsx: pattern story, not a component; the screen sampler covers the patterns on a canvas.
-- src/guidelines/patterns/create-edit-forms.stories.tsx: pattern story, not a component; the screen sampler covers the patterns on a canvas.
-- src/guidelines/patterns/detail-drawer.stories.tsx: pattern story, not a component; the screen sampler covers the patterns on a canvas.
-- src/guidelines/patterns/empty-states.stories.tsx: pattern story, not a component; the screen sampler covers the patterns on a canvas.
-- src/guidelines/patterns/entity-table.stories.tsx: pattern story, not a component; the screen sampler covers the patterns on a canvas.
-- src/guidelines/patterns/feedback-toasts.stories.tsx: pattern story, not a component; the screen sampler covers the patterns on a canvas.
-- src/guidelines/patterns/filtering.stories.tsx: pattern story, not a component; the screen sampler covers the patterns on a canvas.
-- src/guidelines/patterns/resource-list-page.stories.tsx: pattern story, not a component; the screen sampler covers the patterns on a canvas.
-- src/guidelines/patterns/settings-page.stories.tsx: pattern story, not a component; the screen sampler covers the patterns on a canvas.
+- src/guidelines/patterns/app-layout.stories.tsx: pattern or template story, not a component; the screen sampler covers the patterns on a canvas.
+- src/guidelines/patterns/auth-page.stories.tsx: pattern or template story, not a component; the screen sampler covers the patterns on a canvas.
+- src/guidelines/patterns/complex-drawer.stories.tsx: pattern or template story, not a component; the screen sampler covers the patterns on a canvas.
+- src/guidelines/patterns/confirmation-dialogs.stories.tsx: pattern or template story, not a component; the screen sampler covers the patterns on a canvas.
+- src/guidelines/patterns/create-edit-forms.stories.tsx: pattern or template story, not a component; the screen sampler covers the patterns on a canvas.
+- src/guidelines/patterns/detail-drawer.stories.tsx: pattern or template story, not a component; the screen sampler covers the patterns on a canvas.
+- src/guidelines/patterns/empty-states.stories.tsx: pattern or template story, not a component; the screen sampler covers the patterns on a canvas.
+- src/guidelines/patterns/entity-table.stories.tsx: pattern or template story, not a component; the screen sampler covers the patterns on a canvas.
+- src/guidelines/patterns/error-states.stories.tsx: pattern or template story, not a component; the screen sampler covers the patterns on a canvas.
+- src/guidelines/patterns/feedback-toasts.stories.tsx: pattern or template story, not a component; the screen sampler covers the patterns on a canvas.
+- src/guidelines/patterns/filtering.stories.tsx: pattern or template story, not a component; the screen sampler covers the patterns on a canvas.
+- src/guidelines/patterns/resource-list-page.stories.tsx: pattern or template story, not a component; the screen sampler covers the patterns on a canvas.
+- src/guidelines/patterns/settings-page.stories.tsx: pattern or template story, not a component; the screen sampler covers the patterns on a canvas.
+- src/guidelines/templates/ai-assistant.stories.tsx: pattern or template story, not a component; the screen sampler covers the patterns on a canvas.
+- src/guidelines/templates/api-inventory.stories.tsx: pattern or template story, not a component; the screen sampler covers the patterns on a canvas.
+- src/guidelines/templates/attack-events.stories.tsx: pattern or template story, not a component; the screen sampler covers the patterns on a canvas.
+- src/guidelines/templates/incident-detail.stories.tsx: pattern or template story, not a component; the screen sampler covers the patterns on a canvas.
+- src/guidelines/templates/integrations-settings.stories.tsx: pattern or template story, not a component; the screen sampler covers the patterns on a canvas.
+- src/guidelines/templates/page-states.stories.tsx: pattern or template story, not a component; the screen sampler covers the patterns on a canvas.
+- src/guidelines/templates/rule-editor.stories.tsx: pattern or template story, not a component; the screen sampler covers the patterns on a canvas.
+- src/guidelines/templates/security-dashboard.stories.tsx: pattern or template story, not a component; the screen sampler covers the patterns on a canvas.
 - src/icons/module/Icons.stories.tsx: icon gallery story, not a component; use `WallarmDS.Icons.<Name>`.
 - src/theme/Pixel.stories.tsx: theme gallery story, not a component; see tokens.css.
 - temp-token: source placeholder omitted.

package/dist/project/app-skeleton.dc.html

@@ -0,0 +1,268 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Wallarm app</title>
+<link rel="stylesheet" href="tokens.css">
+<link rel="stylesheet" href="components/bundle.css">
+<script src="components/bundle.js"></script>
+</head>
+<body>
+<!-- App skeleton: the console frame (AppShell) with a product's RemoteShell. Customize it by
+     editing only the APP object at the top of the script; design screens inside its Page. -->
+<x-dc>
+<x-import component-from-global-scope="WallarmDS.Root" theme="light">
+  <x-import component-from-global-scope="WallarmDS.AppShell">
+    <x-import component-from-global-scope="WallarmDS.AppShellHeader">
+      <x-import component-from-global-scope="WallarmDS.TopHeader">
+        <x-import component-from-global-scope="WallarmDS.TopHeaderLogo" href="/" on-click="{{onRailClick}}">
+          <x-import component-from-global-scope="WallarmDS.Logo" size="md"></x-import>
+        </x-import>
+        <!-- Header actions, in this order: search, separator, tenant, assistant, notifications, help. -->
+        <x-import component-from-global-scope="WallarmDS.TopHeaderActions">
+          <x-import component-from-global-scope="WallarmDS.Button" variant="ghost" color="neutral" size="small" aria-label="Search">
+            <x-import component-from-global-scope="WallarmDS.Icons.Search"></x-import>
+          </x-import>
+          <x-import component-from-global-scope="WallarmDS.TopHeaderSeparator"></x-import>
+          <x-import component-from-global-scope="WallarmDS.Button" variant="ghost" color="neutral" size="small" children="{{tenantLabel}}"></x-import>
+          <x-import component-from-global-scope="WallarmDS.ChatTrigger"></x-import>
+          <x-import component-from-global-scope="WallarmDS.NotificationCenter" data-testid="notifications">
+            <x-import component-from-global-scope="WallarmDS.NotificationCenterTrigger" count="{{unreadCount}}"></x-import>
+            <x-import component-from-global-scope="WallarmDS.NotificationCenterContent">
+              <x-import component-from-global-scope="WallarmDS.NotificationCenterHeader">
+                <x-import component-from-global-scope="WallarmDS.NotificationCenterTitle"></x-import>
+                <x-import component-from-global-scope="WallarmDS.NotificationCenterHeaderActions">
+                  <x-import component-from-global-scope="WallarmDS.NotificationCenterHeaderAction">Mark all as read</x-import>
+                </x-import>
+              </x-import>
+              <x-import component-from-global-scope="WallarmDS.NotificationCenterTabs" default-value="new">
+                <x-import component-from-global-scope="WallarmDS.NotificationCenterTabsList">
+                  <x-import component-from-global-scope="WallarmDS.TabsTrigger" value="new">New <x-import component-from-global-scope="WallarmDS.NumericBadge" size="small">2</x-import></x-import>
+                  <x-import component-from-global-scope="WallarmDS.TabsTrigger" value="read">Read</x-import>
+                </x-import>
+                <x-import component-from-global-scope="WallarmDS.TabsContent" value="new">
+                  <x-import component-from-global-scope="WallarmDS.NotificationCenterBody">
+                    <x-import component-from-global-scope="WallarmDS.NotificationCenterList">
+                      <x-import component-from-global-scope="WallarmDS.NotificationCenterItem" unread="{{yes}}">
+                        <x-import component-from-global-scope="WallarmDS.NotificationCenterItemTitle">New attack detected on api.example.com</x-import>
+                        <x-import component-from-global-scope="WallarmDS.NotificationCenterItemTime" value="{{sentAt1}}"></x-import>
+                        <x-import component-from-global-scope="WallarmDS.NotificationCenterItemDescription">214 SQL injection attempts from 12 IPs in the last 10 minutes.</x-import>
+                      </x-import>
+                      <x-import component-from-global-scope="WallarmDS.NotificationCenterItem" unread="{{yes}}">
+                        <x-import component-from-global-scope="WallarmDS.NotificationCenterItemTitle">Node wallarm-node-3 is offline</x-import>
+                        <x-import component-from-global-scope="WallarmDS.NotificationCenterItemTime" value="{{sentAt2}}"></x-import>
+                        <x-import component-from-global-scope="WallarmDS.NotificationCenterItemDescription">No heartbeat for 15 minutes. Traffic fails over to wallarm-node-1.</x-import>
+                      </x-import>
+                    </x-import>
+                  </x-import>
+                </x-import>
+                <x-import component-from-global-scope="WallarmDS.TabsContent" value="read">
+                  <x-import component-from-global-scope="WallarmDS.NotificationCenterBody">
+                    <x-import component-from-global-scope="WallarmDS.NotificationCenterList">
+                      <x-import component-from-global-scope="WallarmDS.NotificationCenterItem">
+                        <x-import component-from-global-scope="WallarmDS.NotificationCenterItemTitle">Weekly API discovery report is ready</x-import>
+                        <x-import component-from-global-scope="WallarmDS.NotificationCenterItemTime" value="{{sentAt3}}"></x-import>
+                        <x-import component-from-global-scope="WallarmDS.NotificationCenterItemDescription">38 new endpoints this week, 5 of them handling sensitive data.</x-import>
+                      </x-import>
+                    </x-import>
+                  </x-import>
+                </x-import>
+              </x-import>
+            </x-import>
+          </x-import>
+          <x-import component-from-global-scope="WallarmDS.Button" variant="ghost" color="neutral" size="small" aria-label="Help">
+            <x-import component-from-global-scope="WallarmDS.Icons.CircleHelp"></x-import>
+          </x-import>
+        </x-import>
+      </x-import>
+    </x-import>
+    <x-import component-from-global-scope="WallarmDS.AppShellRail">
+      <x-import component-from-global-scope="WallarmDS.NavRail" data-testid="nav-rail">
+        <!-- Home, then the products from APP.rail; the one at APP.nav.productPath is active. -->
+        <x-import component-from-global-scope="WallarmDS.NavRailBody" children="{{railItems}}"></x-import>
+        <!-- Settings and the account menu always live in the rail footer. -->
+        <x-import component-from-global-scope="WallarmDS.NavRailFooter">
+          <x-import component-from-global-scope="WallarmDS.NavRailItem" href="/settings" icon="{{settingsIcon}}" label="Settings" on-click="{{onRailClick}}"></x-import>
+          <x-import component-from-global-scope="WallarmDS.DropdownMenu" positioning="{{accountMenuPositioning}}">
+            <x-import component-from-global-scope="WallarmDS.DropdownMenuTrigger">
+              <x-import component-from-global-scope="WallarmDS.NavRailItem" icon="{{userIcon}}" label="{{userName}}" avatar="{{yes}}"></x-import>
+            </x-import>
+            <x-import component-from-global-scope="WallarmDS.DropdownMenuContent" class-name="w-200">
+              <x-import component-from-global-scope="WallarmDS.DropdownMenuItem">
+                <x-import component-from-global-scope="WallarmDS.DropdownMenuItemIcon">
+                  <x-import component-from-global-scope="WallarmDS.Icons.Settings"></x-import>
+                </x-import>
+                <x-import component-from-global-scope="WallarmDS.DropdownMenuItemText">Profile settings</x-import>
+              </x-import>
+              <x-import component-from-global-scope="WallarmDS.DropdownMenuSeparator"></x-import>
+              <x-import component-from-global-scope="WallarmDS.DropdownMenuItem">
+                <x-import component-from-global-scope="WallarmDS.DropdownMenuItemIcon">
+                  <x-import component-from-global-scope="WallarmDS.Icons.LogOut"></x-import>
+                </x-import>
+                <x-import component-from-global-scope="WallarmDS.DropdownMenuItemText">Sign out</x-import>
+              </x-import>
+            </x-import>
+          </x-import>
+        </x-import>
+      </x-import>
+    </x-import>
+    <x-import component-from-global-scope="WallarmDS.AppShellRemote">
+      <!-- The product: RemoteShell builds the panel and the trail from APP.nav; the URL is its only state. -->
+      <x-import component-from-global-scope="WallarmDS.RemoteShell" config="{{navConfig}}" base-path="{{productPath}}" pathname="{{pathname}}" on-navigate="{{onNavigate}}" data-testid="product-shell">
+        <x-import component-from-global-scope="WallarmDS.RemoteShellPanel"></x-import>
+        <x-import component-from-global-scope="WallarmDS.RemoteShellBreadcrumb"></x-import>
+        <x-import component-from-global-scope="WallarmDS.RemoteShellContent">
+          <!-- Design the requested screen here: keep PageHeader, add PageDescription and a PageToolbar before PageContent, fixed-height on a list, and replace PageContent's EmptyState. -->
+          <x-import component-from-global-scope="WallarmDS.Page" name="{{pageName}}" full-size="{{yes}}" data-testid="page">
+            <x-import component-from-global-scope="WallarmDS.PageHeader">
+              <x-import component-from-global-scope="WallarmDS.PageHeaderGroup">
+                <x-import component-from-global-scope="WallarmDS.PageTitle" children="{{pageTitle}}"></x-import>
+              </x-import>
+              <x-import component-from-global-scope="WallarmDS.PageActions" children="{{pageActions}}"></x-import>
+            </x-import>
+            <x-import component-from-global-scope="WallarmDS.PageContent">
+              <x-import component-from-global-scope="WallarmDS.EmptyState" type="collection-empty">
+                <x-import component-from-global-scope="WallarmDS.EmptyStateIllustration">
+                  <x-import component-from-global-scope="WallarmDS.Icons.PenTool"></x-import>
+                </x-import>
+                <x-import component-from-global-scope="WallarmDS.EmptyStateMessage">
+                  <x-import component-from-global-scope="WallarmDS.EmptyStateTitle">Ask Claude to design this screen</x-import>
+                  <x-import component-from-global-scope="WallarmDS.EmptyStateDescription">Describe what this page shows and Claude builds it here, inside the app frame.</x-import>
+                </x-import>
+              </x-import>
+            </x-import>
+          </x-import>
+        </x-import>
+      </x-import>
+    </x-import>
+  </x-import>
+</x-import>
+</x-dc>
+<script type="text/x-dc" data-dc-script data-props="{&quot;$preview&quot;:{&quot;width&quot;:1440,&quot;height&quot;:900}}">
+/* ===== APP: the person's product. Change the shell only here; everything below reads from it.
+   A screen's own data (rows, counts) goes in renderVals(), not here. =====
+   rail:  the Wallarm products in the 1st rail (label, path, icon). The one whose path is
+          nav.productPath is active; Home and Settings are always there.
+   nav:   the product's RemoteShell NavConfig. Node types: 'link' (id, label, path, icon?),
+          'group' (id, label, icon?, defaultExpanded?, children), 'section-header' (id, label),
+          'drill' only when asked. ids and paths are kebab-case; a path is one segment.
+          Icons are WallarmDS.Icons names as strings. A link may have `action`: the label of
+          its page's primary button.
+   start: the path of the link the board opens on: the first link, or the screen this board designs.
+   tenant, user: the header's tenant switcher and the account menu's name. */
+var APP = {
+  tenant: 'Acme Bank',
+  user: 'Maria Lopez',
+  rail: [
+    { label: 'API Security', path: '/api-security', icon: 'ShieldCheck' },
+    { label: 'Edge', path: '/edge', icon: 'Cloud' },
+    { label: 'Security Testing', path: '/security-testing', icon: 'FlaskConical' },
+    { label: 'AI Hypervisor', path: '/ai-hypervisor', icon: 'Bot' }
+  ],
+  nav: {
+    productLabel: 'API Security',
+    productPath: '/api-security',
+    items: [
+      { type: 'link', id: 'overview', label: 'Overview', path: 'overview', icon: 'Activity' },
+      { type: 'link', id: 'api-discovery', label: 'API Discovery', path: 'api-discovery', icon: 'Search' },
+      { type: 'link', id: 'api-specifications', label: 'API Specifications', path: 'api-specifications', icon: 'Layers', action: 'Upload specification', dividerAfter: true },
+      { type: 'section-header', id: 'detect', label: 'Detect & Respond' },
+      { type: 'group', id: 'events', label: 'Events', icon: 'Zap', defaultExpanded: true, children: [
+        { type: 'link', id: 'attacks', label: 'Attacks', path: 'attacks' },
+        { type: 'link', id: 'incidents', label: 'Incidents', path: 'incidents' },
+        { type: 'link', id: 'sessions', label: 'Sessions', path: 'sessions' }
+      ] }
+    ]
+  },
+  start: 'overview'
+};
+/* ===== End of APP. ===== */
+
+var minutesAgo = function (minutes) { return new Date(Date.now() - minutes * 60000); };
+var warned = {};
+
+class Component extends DCLogic {
+  constructor(props) {
+    super(props);
+    this.state = { pathname: APP.nav.productPath + '/' + (APP.start || firstLink(APP.nav.items).path) };
+  }
+  renderVals() {
+    var h = React.createElement;
+    var DS = WallarmDS;
+    var self = this;
+    var icon = function (name) {
+      if (!name) return undefined;
+      if (!DS.Icons[name] && !warned[name]) {
+        warned[name] = true;
+        console.warn('[WallarmDS] icon "' + name + '" is not in WallarmDS.Icons; fix it in APP.');
+      }
+      return DS.Icons[name];
+    };
+    // NavConfig with icon names resolved; `action` stays out of the config.
+    var toNode = function (node) {
+      var out = {};
+      for (var key in node) if (key !== 'action') out[key] = node[key];
+      if (node.icon) out.icon = icon(node.icon);
+      if (node.children) out.children = node.children.map(toNode);
+      return out;
+    };
+    var segments = this.state.pathname.split('/').filter(Boolean);
+    var page = findLink(APP.nav.items, segments[segments.length - 1]) || firstLink(APP.nav.items);
+    var onRailClick = function (event) { event.preventDefault(); };
+    var railItems = [
+      h(DS.NavRailItem, { key: 'home', href: '/', icon: DS.Icons.Home, label: 'Home', onClick: onRailClick }),
+      h(DS.NavRailSeparator, { key: 'separator' })
+    ].concat(APP.rail.map(function (product) {
+      return h(DS.NavRailItem, {
+        key: product.path,
+        href: product.path,
+        icon: icon(product.icon) || DS.Icons.Layers,
+        label: product.label,
+        active: product.path === APP.nav.productPath,
+        onClick: onRailClick
+      });
+    }));
+    return {
+      yes: true,
+      tenantLabel: [APP.tenant, h(DS.Icons.ChevronUpDown, { key: 'chevron' })],
+      unreadCount: 2,
+      sentAt1: minutesAgo(3),
+      sentAt2: minutesAgo(22),
+      sentAt3: minutesAgo(60 * 24),
+      railItems: railItems,
+      onRailClick: onRailClick,
+      settingsIcon: DS.Icons.Settings,
+      userIcon: DS.Icons.UserRound,
+      userName: APP.user,
+      accountMenuPositioning: { placement: 'right-end', gutter: 6, offset: { crossAxis: 12 } },
+      navConfig: { productLabel: APP.nav.productLabel, productPath: APP.nav.productPath, items: APP.nav.items.map(toNode) },
+      productPath: APP.nav.productPath,
+      pathname: this.state.pathname,
+      onNavigate: function (to) { self.setState({ pathname: to }); },
+      pageName: page.id,
+      pageTitle: page.label,
+      pageActions: page.action ? h(DS.Button, { size: 'medium' }, page.action) : null
+    };
+  }
+}
+
+// The first link in menu order, and the link whose path is `path`, through groups and drills.
+function firstLink(items) {
+  for (var i = 0; i < items.length; i++) {
+    if (items[i].type === 'link') return items[i];
+    var inner = items[i].children && firstLink(items[i].children);
+    if (inner) return inner;
+  }
+  return null;
+}
+function findLink(items, path) {
+  for (var i = 0; i < items.length; i++) {
+    if (items[i].type === 'link' && items[i].path === path) return items[i];
+    var inner = items[i].children && findLink(items[i].children, path);
+    if (inner) return inner;
+  }
+  return null;
+}
+</script>
+</body>
+</html>

package/dist/project/components/AreaChart/README.md

@@ -130,10 +130,6 @@ const meta = {
   },
   parameters: {
     layout: 'centered',
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=11973-4142&m=dev',
-    },
     docs: { description: { component: DESCRIPTION } },
   },
   tags: ['autodocs'],