@c2n/mcp 0.0.10 → 0.0.12

package/data/registry.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "c2nVersion": "0.0.10",
+  "c2nVersion": "0.0.12",
   "categories": [
     "Inputs",
     "Buttons",
@@ -11664,7 +11664,7 @@
               "default": "420px",
               "part": "",
               "property": "max-height",
-              "description": "The editor scrolls past this height."
+              "description": "The editor scrolls past this height. A height set on the element itself reaches the editor (the label and supporting text keep theirs); set this to `none` to fill it."
             },
             {
               "name": "--c2-code-editor--padding-block",
@@ -14062,6 +14062,832 @@
       ],
       "hasGallery": true
     },
+    "dashboard": {
+      "id": "dashboard",
+      "package": "@c2n/dashboard",
+      "title": "Dashboard",
+      "description": "Grid of resizable panes, dragged by the edges they share.",
+      "intro": "`c2-dashboard` is a CSS grid whose tracks the user can drag. Its children are `c2-dash-card` panes, each placed by",
+      "category": "Layout",
+      "status": "stable",
+      "docsUrl": "https://code2nguyen.github.io/web-components/components/dashboard",
+      "elements": [
+        {
+          "tag": "c2-dashboard",
+          "className": "Dashboard",
+          "modulePath": "@c2n/dashboard",
+          "description": "Grid of resizable panes. The children are `c2-dash-card` elements, placed by their `col`/`row` attributes; each\none draws drag handles on the edges it shares with a neighbour, and dragging one resizes the whole track, so the\ncards on either side stay aligned. `columns` and `rows` take a track count (`columns=\"3\"` is three equal columns)\nor an explicit track list (`columns=\"320px 1fr\"`); a track is switched to pixels the first time it is dragged, and\nthe `fr` tracks around it give up the space in proportion to their weight, down to the minimums. With a\n`storage-key` the sizes survive a reload.\n\n`layouts` makes the grid responsive without a remount: each entry names a media query and the tracks and card\nplacements to use while it matches, the first match wins, and every entry keeps its own stored sizes under\n`<storage-key>@<media>`.\n\nPlacement is the application's: the grid never re-places cards on its own. A pane removed or hidden at runtime\nleaves its cells empty and its neighbours where they were, and a pane added at runtime lands exactly where its\n`col`/`row` say, on top of whatever is already there if that cell is taken. To close a gap, or to make room, set\nthe cards' `col`/`row`/`col-span`/`row-span` or hand the grid a `layout` record — both are applied in place.\n\nThe grid is the sizing authority: a card never sets its own width. Give the element a height (or place it in a\nflex/grid parent that does) whenever the rows use `fr`, since the row tracks divide the host's height.",
+          "attributes": [
+            {
+              "name": "columns",
+              "type": "number | string | string[]",
+              "default": "2",
+              "description": "Column count (`3`) or an explicit track list (`'320px 1fr'`). Each entry must be one simple size."
+            },
+            {
+              "name": "rows",
+              "type": "number | string | string[]",
+              "default": "1",
+              "description": "Row count (`2`) or an explicit track list (`'auto 1fr'`)."
+            },
+            {
+              "name": "min-column-width",
+              "type": "number",
+              "default": "50",
+              "description": "Floor for every column, in pixels. A card's own `min-width` raises it for the tracks that card covers."
+            },
+            {
+              "name": "min-row-height",
+              "type": "number",
+              "default": "50",
+              "description": "Floor for every row, in pixels. A card's own `min-height` raises it for the tracks that card covers."
+            },
+            {
+              "name": "storage-key",
+              "type": "string | undefined",
+              "default": "undefined",
+              "description": "`localStorage` key the track sizes are stored under. Without it the grid starts from the authored tracks."
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The `c2-dash-card` panes. Anything else becomes an ordinary grid item, placed by your own CSS."
+            }
+          ],
+          "events": [
+            {
+              "name": "layout-change",
+              "type": "CustomEvent<DashboardLayoutChangeDetail>",
+              "description": "The track sizes changed: a gesture ended, `reset()` was called, or another entry of `layouts` took over. Does not bubble: listen on the element."
+            }
+          ],
+          "cssParts": [],
+          "cssProperties": [
+            {
+              "name": "--c2-dashboard--gap",
+              "type": "pixel",
+              "default": "8px",
+              "part": "",
+              "property": "gap",
+              "description": "Gutter between the cards. The whole gutter drags: each card's handle is centred on its edge and as thick as the gap (never under `--c2-dash-card__handle--size`)."
+            },
+            {
+              "name": "--c2-dashboard--padding",
+              "type": "padding",
+              "default": "0px",
+              "part": "",
+              "property": "padding",
+              "description": "Inset around the tracks. With a `background` it is what turns the gutters into a visible frame between the panes."
+            },
+            {
+              "name": "--c2-dashboard--background",
+              "type": "background",
+              "default": "transparent",
+              "part": "",
+              "property": "background"
+            },
+            {
+              "name": "--c2-dashboard--border",
+              "type": "border",
+              "default": "none",
+              "part": "",
+              "property": "border"
+            },
+            {
+              "name": "--c2-dashboard--border-radius",
+              "type": "border-radius",
+              "default": "0px",
+              "part": "",
+              "property": "border-radius"
+            }
+          ]
+        },
+        {
+          "tag": "c2-dash-card",
+          "className": "DashCard",
+          "modulePath": "@c2n/dashboard/dash-card.js",
+          "description": "One pane of a `c2-dashboard`. It owns its place in the grid (`col`, `row`, `col-span`, `row-span`), the drag\nhandles on the edges it shares with a neighbour, and the optional expand controls; it draws no surface of its\nown, so put a `c2-card` — or any markup — in the default slot.\n\nA handle resizes the whole grid track, never just this card, and it only appears where there is a neighbour to\ntake the space from: the right edge has one when another column follows, the left edge when one precedes. Drag\nit, or focus it and use the arrow keys (10px a step, 1px with Shift).\n\nFilling the `header`, `actions` or `footer` slot turns on that row; with the header and actions both empty the\nexpand controls float over the top-right corner of the pane instead. An expanded card covers its neighbours on\nan opaque `--c2-dash-card__expanded--background` (the theme's surface colour), while the card itself stays\ntransparent at rest.\n\nA card that arrives while the grid is already on screen fades and scales in; one that leaves — through the\ngrid's `layout` record (`visible: false`) or through `dismiss()`, which removes the element once the animation\nhas played — fades out the same way. Cards present at load do not animate, and `prefers-reduced-motion` turns\nboth off.\n\nEvery built-in icon is a slot whose fallback is the default drawing, so a pane can use the host application's own\nicon set without giving up the behaviour.",
+          "attributes": [
+            {
+              "name": "card-id",
+              "type": "string | undefined",
+              "default": "undefined",
+              "description": "Identifier the grid's `layout` record is keyed by."
+            },
+            {
+              "name": "col",
+              "type": "number",
+              "default": "1",
+              "description": "1-based column the card starts in."
+            },
+            {
+              "name": "row",
+              "type": "number",
+              "default": "1",
+              "description": "1-based row the card starts in."
+            },
+            {
+              "name": "col-span",
+              "type": "number",
+              "default": "1",
+              "description": "Number of columns the card occupies."
+            },
+            {
+              "name": "row-span",
+              "type": "number",
+              "default": "1",
+              "description": "Number of rows the card occupies."
+            },
+            {
+              "name": "min-width",
+              "type": "number",
+              "default": "0",
+              "description": "Smallest width in pixels the card accepts; it raises the minimum of every column it covers."
+            },
+            {
+              "name": "min-height",
+              "type": "number",
+              "default": "0",
+              "description": "Smallest height in pixels the card accepts; it raises the minimum of every row it covers."
+            },
+            {
+              "name": "resize",
+              "type": "DashCardResize",
+              "default": "'both'",
+              "description": "Which edges carry a drag handle."
+            },
+            {
+              "name": "expand-width",
+              "type": "boolean",
+              "default": "false",
+              "description": "Offers a control that expands the card across every column."
+            },
+            {
+              "name": "expand-height",
+              "type": "boolean",
+              "default": "false",
+              "description": "Offers a control that expands the card across every row."
+            },
+            {
+              "name": "expand-full",
+              "type": "boolean",
+              "default": "false",
+              "description": "Offers a control that expands the card over the whole grid."
+            },
+            {
+              "name": "expanded",
+              "type": "DashCardExpanded",
+              "default": "'none'",
+              "description": "How far the card is currently expanded. Settable, so an app can expand a card from its own control."
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Pane content. It fills the pane: the body is a column flex box and every slotted child is a `flex: 1` item with `min-height: 0`, so a chart or an editor follows the row track without a `height: 100%` chain."
+            },
+            {
+              "name": "header",
+              "description": "Title area of the header row; filling it turns the row on."
+            },
+            {
+              "name": "actions",
+              "description": "Your own controls at the end of the header row, before the built-in expand buttons and separated from them by `--c2-dash-card__actions--gap`."
+            },
+            {
+              "name": "controls",
+              "description": "Your own controls inside the built-in group, immediately before the expand buttons — for a button that belongs with them, such as a refresh or a close."
+            },
+            {
+              "name": "footer",
+              "description": "Status bar under the pane content; filling it turns the row on."
+            },
+            {
+              "name": "expand-width-icon",
+              "description": "Icon of the full-width control while the card is not expanded that way."
+            },
+            {
+              "name": "collapse-width-icon",
+              "description": "Icon of the full-width control while it is."
+            },
+            {
+              "name": "expand-height-icon",
+              "description": "Icon of the full-height control while the card is not expanded that way."
+            },
+            {
+              "name": "collapse-height-icon",
+              "description": "Icon of the full-height control while it is."
+            },
+            {
+              "name": "expand-full-icon",
+              "description": "Icon of the fullscreen control while the card is not expanded."
+            },
+            {
+              "name": "collapse-full-icon",
+              "description": "Icon of the fullscreen control while it is."
+            }
+          ],
+          "events": [
+            {
+              "name": "expand-change",
+              "type": "CustomEvent<DashCardExpandChangeDetail>",
+              "description": "The card was expanded or collapsed through one of its own controls. Does not bubble: listen on the element."
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "header",
+              "description": "The header row, or the floating control group when the header and actions slots are empty."
+            },
+            {
+              "name": "body",
+              "description": "The wrapper around the default slot."
+            },
+            {
+              "name": "footer",
+              "description": "The footer row."
+            },
+            {
+              "name": "controls",
+              "description": "The group holding the `controls` slot and the built-in expand buttons."
+            },
+            {
+              "name": "control",
+              "description": "One built-in expand button."
+            },
+            {
+              "name": "handle",
+              "description": "Every drag handle. Each also carries the part of its edge."
+            },
+            {
+              "name": "handle-left",
+              "description": "The handle on the left edge."
+            },
+            {
+              "name": "handle-right",
+              "description": "The handle on the right edge."
+            },
+            {
+              "name": "handle-top",
+              "description": "The handle on the top edge."
+            },
+            {
+              "name": "handle-bottom",
+              "description": "The handle on the bottom edge."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--c2-dash-card--background",
+              "type": "background",
+              "default": "transparent",
+              "part": "",
+              "property": "background"
+            },
+            {
+              "name": "--c2-dash-card--border",
+              "type": "border",
+              "default": "none",
+              "part": "",
+              "property": "border"
+            },
+            {
+              "name": "--c2-dash-card--border-radius",
+              "type": "border-radius",
+              "default": "0px",
+              "part": "",
+              "property": "border-radius"
+            },
+            {
+              "name": "--c2-dash-card--box-shadow",
+              "type": "box-shadow",
+              "default": "none",
+              "part": "",
+              "property": "box-shadow"
+            },
+            {
+              "name": "--c2-dash-card--padding",
+              "type": "padding",
+              "default": "0px",
+              "part": "",
+              "property": "padding"
+            },
+            {
+              "name": "--c2-dash-card--overflow",
+              "type": "overflow",
+              "default": "hidden",
+              "part": "",
+              "property": "overflow",
+              "description": "`hidden` keeps the content inside the track; switch it to `visible` for a pane that has to overflow, such as one holding a menu."
+            },
+            {
+              "name": "--c2-dash-card__expanded--background",
+              "type": "background",
+              "default": "#ffffff",
+              "part": "",
+              "state": "expanded",
+              "property": "background",
+              "token": "--c2-theme--color-surface",
+              "description": "Fill while the card is expanded over its neighbours, so they do not show through; the card's own `background` stays transparent."
+            },
+            {
+              "name": "--c2-dash-card__expanded--z-index",
+              "type": "number",
+              "default": "20",
+              "part": "",
+              "state": "expanded",
+              "property": "z-index"
+            },
+            {
+              "name": "--c2-dash-card__enter--animation-duration",
+              "type": "duration",
+              "default": "200ms",
+              "part": "enter",
+              "property": "animation-duration",
+              "token": "--c2-theme--motion-scale",
+              "description": "Fade and scale-in of a card added to a grid that is already on screen, or shown again through the layout record. `0ms` disables it."
+            },
+            {
+              "name": "--c2-dash-card__leave--animation-duration",
+              "type": "duration",
+              "default": "160ms",
+              "part": "leave",
+              "property": "animation-duration",
+              "token": "--c2-theme--motion-scale",
+              "description": "Fade-out before a card is hidden by the layout record or removed by `dismiss()`. `0ms` disables it."
+            },
+            {
+              "name": "--c2-dash-card__expanded--animation-duration",
+              "type": "duration",
+              "default": "200ms",
+              "part": "",
+              "state": "expanded",
+              "property": "animation-duration",
+              "token": "--c2-theme--motion-scale",
+              "description": "Length of the scale-in the card plays when it expands or collapses. Ignored under `prefers-reduced-motion`."
+            },
+            {
+              "name": "--c2-dash-card__header--min-height",
+              "type": "pixel",
+              "default": "44px",
+              "part": "header",
+              "property": "min-height"
+            },
+            {
+              "name": "--c2-dash-card__header--padding-block",
+              "type": "padding",
+              "default": "8px",
+              "part": "header",
+              "property": "padding-block"
+            },
+            {
+              "name": "--c2-dash-card__header--padding-inline",
+              "type": "padding",
+              "default": "12px",
+              "part": "header",
+              "property": "padding-inline"
+            },
+            {
+              "name": "--c2-dash-card__header--gap",
+              "type": "pixel",
+              "default": "12px",
+              "part": "header",
+              "property": "gap"
+            },
+            {
+              "name": "--c2-dash-card__header--background",
+              "type": "background",
+              "default": "transparent",
+              "part": "header",
+              "property": "background"
+            },
+            {
+              "name": "--c2-dash-card__header--border-bottom",
+              "type": "border",
+              "default": "none",
+              "part": "header",
+              "property": "border-bottom"
+            },
+            {
+              "name": "--c2-dash-card__header--color",
+              "type": "color",
+              "default": "#18181b",
+              "part": "header",
+              "property": "color",
+              "token": "--c2-theme--color-on-surface"
+            },
+            {
+              "name": "--c2-dash-card__header--font-size",
+              "type": "pixel",
+              "default": "14px",
+              "part": "header",
+              "property": "font-size",
+              "token": "--c2-theme--font-size-md"
+            },
+            {
+              "name": "--c2-dash-card__header--font-weight",
+              "type": "font-weight",
+              "default": "600",
+              "part": "header",
+              "property": "font-weight",
+              "token": "--c2-theme--font-weight-semibold"
+            },
+            {
+              "name": "--c2-dash-card__footer--min-height",
+              "type": "pixel",
+              "default": "36px",
+              "part": "footer",
+              "property": "min-height"
+            },
+            {
+              "name": "--c2-dash-card__footer--padding-block",
+              "type": "padding",
+              "default": "6px",
+              "part": "footer",
+              "property": "padding-block"
+            },
+            {
+              "name": "--c2-dash-card__footer--padding-inline",
+              "type": "padding",
+              "default": "12px",
+              "part": "footer",
+              "property": "padding-inline"
+            },
+            {
+              "name": "--c2-dash-card__footer--gap",
+              "type": "pixel",
+              "default": "8px",
+              "part": "footer",
+              "property": "gap"
+            },
+            {
+              "name": "--c2-dash-card__footer--background",
+              "type": "background",
+              "default": "transparent",
+              "part": "footer",
+              "property": "background"
+            },
+            {
+              "name": "--c2-dash-card__footer--border-top",
+              "type": "border",
+              "default": "none",
+              "part": "footer",
+              "property": "border-top"
+            },
+            {
+              "name": "--c2-dash-card__footer--color",
+              "type": "color",
+              "default": "#71717a",
+              "part": "footer",
+              "property": "color",
+              "token": "--c2-theme--color-on-surface-variant"
+            },
+            {
+              "name": "--c2-dash-card__footer--font-size",
+              "type": "pixel",
+              "default": "12px",
+              "part": "footer",
+              "property": "font-size",
+              "token": "--c2-theme--font-size-sm"
+            },
+            {
+              "name": "--c2-dash-card__actions--gap",
+              "type": "pixel",
+              "default": "8px",
+              "part": "actions",
+              "property": "gap"
+            },
+            {
+              "name": "--c2-dash-card__controls--gap",
+              "type": "pixel",
+              "default": "2px",
+              "part": "controls",
+              "property": "gap"
+            },
+            {
+              "name": "--c2-dash-card__controls--offset",
+              "type": "pixel",
+              "default": "4px",
+              "part": "controls",
+              "property": "offset",
+              "description": "Inset of the floating control group from the top-right corner, used only while the header row is off."
+            },
+            {
+              "name": "--c2-dash-card__control--size",
+              "type": "pixel",
+              "default": "24px",
+              "part": "control",
+              "property": "size"
+            },
+            {
+              "name": "--c2-dash-card__control--icon-size",
+              "type": "pixel",
+              "default": "16px",
+              "part": "control",
+              "property": "icon-size"
+            },
+            {
+              "name": "--c2-dash-card__control--border-radius",
+              "type": "border-radius",
+              "default": "6px",
+              "part": "control",
+              "property": "border-radius",
+              "token": "--c2-theme--radius-md"
+            },
+            {
+              "name": "--c2-dash-card__control--color",
+              "type": "color",
+              "default": "#71717a",
+              "part": "control",
+              "property": "color",
+              "token": "--c2-theme--color-on-surface-variant"
+            },
+            {
+              "name": "--c2-dash-card__control--background",
+              "type": "background",
+              "default": "transparent",
+              "part": "control",
+              "property": "background"
+            },
+            {
+              "name": "--c2-dash-card__control__hover--background",
+              "type": "background",
+              "default": "#f4f4f5",
+              "part": "control",
+              "state": "hover",
+              "property": "background",
+              "token": "--c2-theme--color-surface-container"
+            },
+            {
+              "name": "--c2-dash-card__control__hover--color",
+              "type": "color",
+              "default": "#18181b",
+              "part": "control",
+              "state": "hover",
+              "property": "color",
+              "token": "--c2-theme--color-on-surface"
+            },
+            {
+              "name": "--c2-dash-card__control__focus--outline",
+              "type": "outline",
+              "default": "2px solid rgba(2, 101, 220, 0.4)",
+              "part": "control",
+              "state": "focus",
+              "property": "outline",
+              "token": "--c2-theme--focus-ring"
+            },
+            {
+              "name": "--c2-dash-card__control__focus--outline-offset",
+              "type": "pixel",
+              "default": "2px",
+              "part": "control",
+              "state": "focus",
+              "property": "outline-offset"
+            },
+            {
+              "name": "--c2-dash-card__handle--size",
+              "type": "pixel",
+              "default": "6px",
+              "part": "handle",
+              "property": "size",
+              "description": "Smallest thickness of the grab area on an edge. Inside a grid the handle is as thick as the gutter when that is wider, centred on the edge, so the whole gutter drags."
+            },
+            {
+              "name": "--c2-dash-card__handle--inset",
+              "type": "pixel",
+              "default": "2px",
+              "part": "handle",
+              "property": "inset",
+              "description": "Gap between the handle's visible bar and the ends of the edge."
+            },
+            {
+              "name": "--c2-dash-card__handle--background",
+              "type": "background",
+              "default": "transparent",
+              "part": "handle",
+              "property": "background"
+            },
+            {
+              "name": "--c2-dash-card__handle__hover--background",
+              "type": "background",
+              "default": "rgba(2, 101, 220, 0.2)",
+              "part": "handle",
+              "state": "hover",
+              "property": "background",
+              "token": "--c2-theme--color-primary-glow"
+            },
+            {
+              "name": "--c2-dash-card__handle__active--background",
+              "type": "background",
+              "default": "rgb(2, 101, 220)",
+              "part": "handle",
+              "state": "active",
+              "property": "background",
+              "token": "--c2-theme--color-primary"
+            },
+            {
+              "name": "--c2-dash-card__handle--border-radius",
+              "type": "border-radius",
+              "default": "999px",
+              "part": "handle",
+              "property": "border-radius",
+              "token": "--c2-theme--radius-full"
+            },
+            {
+              "name": "--c2-dash-card__handle--transition-duration",
+              "type": "duration",
+              "default": "150ms",
+              "part": "handle",
+              "property": "transition-duration",
+              "token": "--c2-theme--motion-scale"
+            },
+            {
+              "name": "--c2-dash-card__handle__focus--outline",
+              "type": "outline",
+              "default": "2px solid rgba(2, 101, 220, 0.4)",
+              "part": "handle",
+              "state": "focus",
+              "property": "outline",
+              "token": "--c2-theme--focus-ring"
+            }
+          ]
+        }
+      ],
+      "composition": {
+        "internal": [],
+        "slotted": [],
+        "usedBy": []
+      },
+      "install": {
+        "npm": "npm install @c2n/dashboard @c2n/theme",
+        "import": "import '@c2n/dashboard'",
+        "importClass": "import { Dashboard } from '@c2n/dashboard'"
+      },
+      "presets": {
+        "html": "<c2-dashboard style=\"height:200px\" columns=\"1fr 2fr\" rows=\"1fr 1fr\"><c2-dash-card col=\"1\" row=\"1\" row-span=\"2\"><span slot=\"header\">Watchlist</span></c2-dash-card><c2-dash-card col=\"2\" row=\"1\"><span slot=\"header\">Price</span></c2-dash-card><c2-dash-card col=\"2\" row=\"2\"><span slot=\"header\">Orders</span></c2-dash-card></c2-dashboard>",
+        "items": [
+          {
+            "name": "Panes",
+            "description": "A bordered white surface per pane, set off against a light canvas the gutters show through.",
+            "css": {
+              "--c2-dashboard--gap": "10px",
+              "--c2-dashboard--padding": "10px",
+              "--c2-dashboard--background": "#f1f2f4",
+              "--c2-dashboard--border-radius": "12px",
+              "--c2-dash-card--background": "#ffffff",
+              "--c2-dash-card--border": "1px solid #e4e4e7",
+              "--c2-dash-card--border-radius": "8px",
+              "--c2-dash-card__expanded--background": "#ffffff",
+              "--c2-dash-card__header--border-bottom": "1px solid #e4e4e7"
+            }
+          },
+          {
+            "name": "Seamless",
+            "description": "No gutter to speak of: the grid background shows through as a hairline and the handle is what you aim at.",
+            "css": {
+              "--c2-dashboard--gap": "1px",
+              "--c2-dashboard--padding": "1px",
+              "--c2-dashboard--background": "#d4d4d8",
+              "--c2-dashboard--border-radius": "10px",
+              "--c2-dash-card--background": "#ffffff",
+              "--c2-dash-card__expanded--background": "#ffffff",
+              "--c2-dash-card__handle--size": "9px",
+              "--c2-dash-card__handle__hover--background": "#0265dc"
+            }
+          },
+          {
+            "name": "Terminal",
+            "description": "Dark panes, a compact monospace header row and a green handle under the pointer.",
+            "css": {
+              "--c2-dashboard--gap": "6px",
+              "--c2-dashboard--padding": "6px",
+              "--c2-dashboard--background": "#09090b",
+              "--c2-dash-card--background": "#18181b",
+              "--c2-dash-card--border": "1px solid #27272a",
+              "--c2-dash-card--border-radius": "4px",
+              "--c2-dash-card__expanded--background": "#18181b",
+              "--c2-dash-card__header--color": "#a1a1aa",
+              "--c2-dash-card__header--font-size": "12px",
+              "--c2-dash-card__header--min-height": "28px",
+              "--c2-dash-card__header--border-bottom": "1px solid #27272a",
+              "--c2-dash-card__handle__hover--background": "#22c55e",
+              "--c2-dash-card__handle__active--background": "#4ade80"
+            }
+          },
+          {
+            "name": "Soft",
+            "description": "Floating cards: no border, a large radius and a shadow, over a generous gutter.",
+            "css": {
+              "--c2-dashboard--gap": "14px",
+              "--c2-dashboard--padding": "14px",
+              "--c2-dashboard--background": "#f1f2f4",
+              "--c2-dashboard--border-radius": "18px",
+              "--c2-dash-card--background": "#ffffff",
+              "--c2-dash-card--border-radius": "14px",
+              "--c2-dash-card--box-shadow": "0 1px 2px rgba(9, 9, 11, 0.06), 0 8px 24px rgba(9, 9, 11, 0.06)",
+              "--c2-dash-card__expanded--background": "#ffffff",
+              "--c2-dash-card__header--font-weight": "500",
+              "--c2-dash-card__handle__hover--background": "rgba(9, 9, 11, 0.18)",
+              "--c2-dash-card__handle__active--background": "rgba(9, 9, 11, 0.38)"
+            }
+          }
+        ]
+      },
+      "examples": [
+        {
+          "kind": "usage",
+          "label": "Three panes, drag any shared edge",
+          "html": "<c2-dashboard client:only=\"lit\" class=\"demo-grid\" columns=\"320px 1fr\" rows=\"1fr 1fr\">\n  <c2-dash-card col=\"1\" row=\"1\" row-span=\"2\" min-width=\"200\">\n    <span slot=\"header\">Watchlist</span>\n    <div class=\"demo-pane\">column, both rows</div>\n  </c2-dash-card>\n  <c2-dash-card col=\"2\" row=\"1\" min-height=\"60\">\n    <span slot=\"header\">Price</span>\n    <div class=\"demo-pane\">top right</div>\n  </c2-dash-card>\n  <c2-dash-card col=\"2\" row=\"2\">\n    <span slot=\"header\">Orders</span>\n    <div class=\"demo-pane\">bottom right</div>\n  </c2-dash-card>\n</c2-dashboard>",
+          "css": ".demo-grid {\n  height: 220px;\n  --c2-dashboard--gap: 10px;\n  --c2-dashboard--padding: 10px;\n  --c2-dashboard--background: var(--c2-theme--color-surface-container);\n  --c2-dashboard--border-radius: var(--c2-theme--radius-lg);\n  --c2-dash-card--background: var(--c2-theme--color-surface);\n  --c2-dash-card--border: var(--c2-theme--border);\n  --c2-dash-card--border-radius: var(--c2-theme--radius-md);\n  --c2-dash-card__expanded--background: var(--c2-theme--color-surface);\n  --c2-dash-card__header--border-bottom: var(--c2-theme--border);\n}\n\n.demo-pane {\n  display: grid;\n  height: 100%;\n  place-items: center;\n  font-size: 13px;\n  color: var(--c2-theme--color-on-surface-variant);\n}"
+        },
+        {
+          "kind": "usage",
+          "label": "Expand controls, and a pane that cannot be resized",
+          "html": "<c2-dashboard client:only=\"lit\" class=\"demo-grid\" columns=\"2\" rows=\"1\">\n  <c2-dash-card col=\"1\" row=\"1\" expand-full>\n    <span slot=\"header\">Chart</span>\n    <div class=\"demo-pane\">expand me over the grid</div>\n  </c2-dash-card>\n  <c2-dash-card col=\"2\" row=\"1\" resize=\"none\">\n    <div class=\"demo-pane\">resize=\"none\", controls float</div>\n  </c2-dash-card>\n</c2-dashboard>",
+          "css": ".demo-grid {\n  height: 220px;\n  --c2-dashboard--gap: 10px;\n  --c2-dashboard--padding: 10px;\n  --c2-dashboard--background: var(--c2-theme--color-surface-container);\n  --c2-dashboard--border-radius: var(--c2-theme--radius-lg);\n  --c2-dash-card--background: var(--c2-theme--color-surface);\n  --c2-dash-card--border: var(--c2-theme--border);\n  --c2-dash-card--border-radius: var(--c2-theme--radius-md);\n  --c2-dash-card__expanded--background: var(--c2-theme--color-surface);\n  --c2-dash-card__header--border-bottom: var(--c2-theme--border);\n}\n\n.demo-pane {\n  display: grid;\n  height: 100%;\n  place-items: center;\n  font-size: 13px;\n  color: var(--c2-theme--color-on-surface-variant);\n}"
+        },
+        {
+          "kind": "gallery",
+          "label": "Trading desk",
+          "section": "Presets",
+          "description": "Trading desk Presets example for c2-dashboard.",
+          "isDefault": false,
+          "tags": [
+            "c2-dashboard",
+            "c2-dash-card",
+            "c2-badge",
+            "c2-list",
+            "c2-list-item",
+            "c2-icon-button",
+            "c2-line-chart",
+            "c2-chart-series",
+            "c2-table",
+            "c2-table-column"
+          ],
+          "html": "<c2-dashboard client:only=\"lit\" class=\"desk\" columns=\"260px 1fr\" rows=\"1fr 1fr\" storage-key=\"c2n-demo-desk\">\n  <c2-dash-card col=\"1\" row=\"1\" row-span=\"2\" min-width=\"200\" card-id=\"watchlist\" expand-full>\n    <span slot=\"header\">Watchlist</span>\n    <c2-badge slot=\"actions\" tone=\"success\">Live</c2-badge>\n    <c2-list value=\"aapl\">\n      <c2-list-item value=\"aapl\"><span class=\"desk-quote\">AAPL <span class=\"desk-up\">+1.24%</span></span></c2-list-item>\n      <c2-list-item value=\"msft\"><span class=\"desk-quote\">MSFT <span class=\"desk-up\">+0.62%</span></span></c2-list-item>\n      <c2-list-item value=\"nvda\"><span class=\"desk-quote\">NVDA <span class=\"desk-down\">−2.08%</span></span></c2-list-item>\n      <c2-list-item value=\"amzn\"><span class=\"desk-quote\">AMZN <span class=\"desk-up\">+0.41%</span></span></c2-list-item>\n      <c2-list-item value=\"tsla\"><span class=\"desk-quote\">TSLA <span class=\"desk-down\">−1.13%</span></span></c2-list-item>\n    </c2-list>\n    <span slot=\"footer\">5 instruments</span>\n  </c2-dash-card>\n\n  <c2-dash-card col=\"2\" row=\"1\" min-height=\"120\" card-id=\"price\" expand-full>\n    <span slot=\"header\">AAPL · quarterly revenue</span>\n    <c2-icon-button slot=\"actions\" aria-label=\"Refresh\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"23 4 23 10 17 10\"></polyline><polyline points=\"1 20 1 14 7 14\"></polyline><path d=\"M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15\"></path></svg>\n    </c2-icon-button>\n    <c2-line-chart\n      x-field=\"date\"\n      x-type=\"time\"\n      curve=\"smooth\"\n      points=\"none\"\n      legend=\"none\"\n      data='[{\"date\":\"2023-12-30\",\"revenue\":119.575},{\"date\":\"2024-03-30\",\"revenue\":90.753},{\"date\":\"2024-06-29\",\"revenue\":85.777},{\"date\":\"2024-09-28\",\"revenue\":94.93},{\"date\":\"2024-12-28\",\"revenue\":124.3},{\"date\":\"2025-03-29\",\"revenue\":95.359},{\"date\":\"2025-06-28\",\"revenue\":94.036},{\"date\":\"2025-09-27\",\"revenue\":102.466}]'\n    >\n      <c2-chart-series field=\"revenue\" label=\"Revenue\"></c2-chart-series>\n    </c2-line-chart>\n    <span slot=\"footer\">USD billions · FY2024–25</span>\n  </c2-dash-card>\n\n  <c2-dash-card col=\"2\" row=\"2\" card-id=\"orders\" expand-full>\n    <span slot=\"header\">Working orders</span>\n    <c2-icon-button slot=\"controls\" aria-label=\"Order settings\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"1\"></circle><circle cx=\"19\" cy=\"12\" r=\"1\"></circle><circle cx=\"5\" cy=\"12\" r=\"1\"></circle></svg>\n    </c2-icon-button>\n    <c2-table row-key=\"id\" rows='[{\"id\":\"1\",\"symbol\":\"AAPL\",\"side\":\"Buy\",\"qty\":1200,\"limit\":214.5,\"status\":\"Working\"},{\"id\":\"2\",\"symbol\":\"NVDA\",\"side\":\"Sell\",\"qty\":400,\"limit\":118.2,\"status\":\"Working\"},{\"id\":\"3\",\"symbol\":\"MSFT\",\"side\":\"Buy\",\"qty\":250,\"limit\":402.1,\"status\":\"Partial\"},{\"id\":\"4\",\"symbol\":\"TSLA\",\"side\":\"Sell\",\"qty\":900,\"limit\":241,\"status\":\"Working\"},{\"id\":\"5\",\"symbol\":\"AMZN\",\"side\":\"Buy\",\"qty\":150,\"limit\":186.75,\"status\":\"Queued\"}]'>\n      <c2-table-column field=\"symbol\" header=\"Symbol\" width=\"100px\"></c2-table-column>\n      <c2-table-column field=\"side\" header=\"Side\" width=\"80px\"></c2-table-column>\n      <c2-table-column field=\"qty\" header=\"Qty\" width=\"1fr\" align=\"end\" format=\"number\"></c2-table-column>\n      <c2-table-column field=\"limit\" header=\"Limit\" width=\"1fr\" align=\"end\" format=\"number\"></c2-table-column>\n      <c2-table-column field=\"status\" header=\"Status\" width=\"110px\"></c2-table-column>\n    </c2-table>\n    <span slot=\"footer\">5 orders · updated 14:32</span>\n  </c2-dash-card>\n</c2-dashboard>",
+          "css": ".desk {\n  height: 460px;\n  --c2-dashboard--gap: 10px;\n  --c2-dashboard--padding: 10px;\n  --c2-dashboard--background: #f1f2f4;\n  --c2-dashboard--border-radius: 14px;\n  --c2-dash-card--background: #ffffff;\n  --c2-dash-card--border: 1px solid #e4e4e7;\n  --c2-dash-card--border-radius: 10px;\n  --c2-dash-card__expanded--background: #ffffff;\n  --c2-dash-card__header--min-height: 40px;\n  --c2-dash-card__header--font-size: 13px;\n  --c2-dash-card__header--border-bottom: 1px solid #e4e4e7;\n  --c2-dash-card__footer--border-top: 1px solid #e4e4e7;\n}\n\n/* `body` is a part, so the pane's content area can be made to stretch whatever is inside it. */\n.desk c2-dash-card::part(body) {\n  display: grid;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.desk c2-line-chart {\n  --c2-chart--height: 100%;\n  --c2-chart--padding: 8px;\n  --c2-chart--background: transparent;\n  --c2-chart--border-top: none;\n  --c2-chart--border-right: none;\n  --c2-chart--border-bottom: none;\n  --c2-chart--border-left: none;\n}\n\n.desk c2-table {\n  width: 100%;\n  height: 100%;\n  --c2-table--border-top: none;\n  --c2-table--border-right: none;\n  --c2-table--border-bottom: none;\n  --c2-table--border-left: none;\n  --c2-table--font-size: 12px;\n}\n\n.desk c2-list {\n  height: 100%;\n  overflow: auto;\n  --c2-list--border-top: none;\n  --c2-list--border-right: none;\n  --c2-list--border-bottom: none;\n  --c2-list--border-left: none;\n  --c2-list--padding-top: 6px;\n  --c2-list--padding-bottom: 6px;\n}\n\n.desk-quote {\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  gap: 12px;\n  font-size: 13px;\n}\n\n.desk-up {\n  color: #16a34a;\n}\n\n.desk-down {\n  color: #dc2626;\n}"
+        },
+        {
+          "kind": "gallery",
+          "label": "Default",
+          "section": "Presets",
+          "description": "Default Presets example for c2-dashboard.",
+          "isDefault": true,
+          "tags": [
+            "c2-dashboard",
+            "c2-dash-card"
+          ],
+          "html": "<c2-dashboard client:only=\"lit\" class=\"bare\" columns=\"2\" rows=\"1\">\n  <c2-dash-card col=\"1\" row=\"1\"><div class=\"bare-pane\">Pane one</div></c2-dash-card>\n  <c2-dash-card col=\"2\" row=\"1\"><div class=\"bare-pane\">Pane two</div></c2-dash-card>\n</c2-dashboard>",
+          "css": ".bare {\n  height: 220px;\n  padding: 10px;\n  background: #f4f4f5;\n  border-radius: 12px;\n}\n\n.bare-pane {\n  display: grid;\n  height: 100%;\n  place-items: center;\n  font-size: 13px;\n  color: #71717a;\n  background: #ffffff;\n  border: 1px solid #e4e4e7;\n  border-radius: 8px;\n}"
+        },
+        {
+          "kind": "gallery",
+          "label": "Seamless",
+          "section": "Presets",
+          "description": "Seamless Presets example for c2-dashboard.",
+          "isDefault": false,
+          "tags": [
+            "c2-dashboard",
+            "c2-dash-card"
+          ],
+          "html": "<c2-dashboard client:only=\"lit\" class=\"seamless\" columns=\"1fr 1fr 1fr\" rows=\"1\">\n  <c2-dash-card col=\"1\" row=\"1\"><span slot=\"header\">Markets</span></c2-dash-card>\n  <c2-dash-card col=\"2\" row=\"1\"><span slot=\"header\">Positions</span></c2-dash-card>\n  <c2-dash-card col=\"3\" row=\"1\"><span slot=\"header\">Activity</span></c2-dash-card>\n</c2-dashboard>",
+          "css": ".seamless {\n  height: 220px;\n  --c2-dashboard--gap: 1px;\n  --c2-dashboard--padding: 1px;\n  --c2-dashboard--background: #d4d4d8;\n  --c2-dashboard--border-radius: 10px;\n  --c2-dash-card--background: #ffffff;\n  --c2-dash-card__expanded--background: #ffffff;\n  --c2-dash-card__header--color: #52525b;\n  --c2-dash-card__header--font-size: 13px;\n  --c2-dash-card__header--min-height: 34px;\n  --c2-dash-card__handle--size: 9px;\n  --c2-dash-card__handle__hover--background: #0265dc;\n}"
+        },
+        {
+          "kind": "gallery",
+          "label": "Terminal",
+          "section": "Presets",
+          "description": "Terminal Presets example for c2-dashboard.",
+          "isDefault": false,
+          "tags": [
+            "c2-dashboard",
+            "c2-dash-card"
+          ],
+          "html": "<c2-dashboard client:only=\"lit\" class=\"terminal\" columns=\"1fr 2fr\" rows=\"1fr 1fr\">\n  <c2-dash-card col=\"1\" row=\"1\" row-span=\"2\" expand-full>\n    <span slot=\"header\">processes</span>\n  </c2-dash-card>\n  <c2-dash-card col=\"2\" row=\"1\" expand-full>\n    <span slot=\"header\">output</span>\n  </c2-dash-card>\n  <c2-dash-card col=\"2\" row=\"2\">\n    <span slot=\"header\">logs</span>\n  </c2-dash-card>\n</c2-dashboard>",
+          "css": ".terminal {\n  height: 220px;\n  --c2-dashboard--gap: 6px;\n  --c2-dashboard--padding: 6px;\n  --c2-dashboard--background: #09090b;\n  --c2-dashboard--border-radius: 6px;\n  --c2-dash-card--background: #18181b;\n  --c2-dash-card--border: 1px solid #27272a;\n  --c2-dash-card--border-radius: 4px;\n  --c2-dash-card__expanded--background: #18181b;\n  --c2-dash-card__header--color: #a1a1aa;\n  --c2-dash-card__header--font-size: 12px;\n  --c2-dash-card__header--min-height: 28px;\n  --c2-dash-card__header--border-bottom: 1px solid #27272a;\n  --c2-dash-card__control--color: #71717a;\n  --c2-dash-card__control__hover--background: #27272a;\n  --c2-dash-card__control__hover--color: #fafafa;\n  --c2-dash-card__handle__hover--background: #22c55e;\n  --c2-dash-card__handle__active--background: #4ade80;\n}"
+        },
+        {
+          "kind": "gallery",
+          "label": "Soft",
+          "section": "Presets",
+          "description": "Soft Presets example for c2-dashboard.",
+          "isDefault": false,
+          "tags": [
+            "c2-dashboard",
+            "c2-dash-card"
+          ],
+          "html": "<c2-dashboard client:only=\"lit\" class=\"soft\" columns=\"1fr 1fr\" rows=\"1\">\n  <c2-dash-card col=\"1\" row=\"1\" expand-full><span slot=\"header\">Revenue</span></c2-dash-card>\n  <c2-dash-card col=\"2\" row=\"1\" expand-full><span slot=\"header\">Churn</span></c2-dash-card>\n</c2-dashboard>",
+          "css": ".soft {\n  height: 220px;\n  --c2-dashboard--gap: 14px;\n  --c2-dashboard--padding: 14px;\n  --c2-dashboard--background: #f1f2f4;\n  --c2-dashboard--border-radius: 18px;\n  --c2-dash-card--background: #ffffff;\n  --c2-dash-card--border-radius: 14px;\n  --c2-dash-card--box-shadow: 0 1px 2px rgba(9, 9, 11, 0.06), 0 8px 24px rgba(9, 9, 11, 0.08);\n  --c2-dash-card__expanded--background: #ffffff;\n  --c2-dash-card__header--font-weight: 500;\n  --c2-dash-card__handle__hover--background: rgba(9, 9, 11, 0.18);\n  --c2-dash-card__handle__active--background: rgba(9, 9, 11, 0.38);\n}"
+        },
+        {
+          "kind": "preview",
+          "label": "Preview",
+          "html": "<c2-dashboard columns=\"1fr 1fr\" rows=\"1fr 1fr\" style=\"width:260px;height:150px;--c2-dashboard--gap:6px;--c2-dashboard--padding:6px;--c2-dashboard--background:var(--c2-theme--color-surface-container);--c2-dashboard--border-radius:10px;--c2-dash-card--background:var(--c2-theme--color-surface);--c2-dash-card--border:var(--c2-theme--border);--c2-dash-card--border-radius:6px;--c2-dash-card__header--font-size:11px;--c2-dash-card__header--min-height:0;--c2-dash-card__header--padding-block:6px;--c2-dash-card__header--padding-inline:8px\">\n  <c2-dash-card col=\"1\" row=\"1\" row-span=\"2\"><span slot=\"header\">Watchlist</span></c2-dash-card>\n  <c2-dash-card col=\"2\" row=\"1\"><span slot=\"header\">Price</span></c2-dash-card>\n  <c2-dash-card col=\"2\" row=\"2\"><span slot=\"header\">Orders</span></c2-dash-card>\n</c2-dashboard>"
+        }
+      ],
+      "hasGallery": true
+    },
     "date-input": {
       "id": "date-input",
       "package": "@c2n/date-input",
@@ -49472,6 +50298,8 @@
     "c2-color-select": "color-select",
     "c2-color-slider": "color-slider",
     "c2-copy-button": "copy-button",
+    "c2-dash-card": "dashboard",
+    "c2-dashboard": "dashboard",
     "c2-date-input": "date-input",
     "c2-date-selector": "date-selector",
     "c2-details": "details",
@@ -49557,6 +50385,7 @@
     "@c2n/color-select": "color-select",
     "@c2n/color-slider": "color-slider",
     "@c2n/copy-button": "copy-button",
+    "@c2n/dashboard": "dashboard",
     "@c2n/date-input": "date-input",
     "@c2n/date-selector": "date-selector",
     "@c2n/details": "details",
@@ -49622,7 +50451,7 @@
         "light": "#0265dc",
         "dark": "#5aa3ff",
         "description": "Accent colour: filled buttons, selected states, focused borders, links.",
-        "usedBy": 56
+        "usedBy": 57
       },
       {
         "name": "--c2-theme--color-primary-hover",
@@ -49662,7 +50491,7 @@
         "light": "rgba(2, 101, 220, 0.2)",
         "dark": "rgba(90, 163, 255, 0.28)",
         "description": "Accent tint for luminous borders and decorative glows.",
-        "usedBy": 0
+        "usedBy": 1
       },
       {
         "name": "--c2-theme--color-surface",
@@ -49670,7 +50499,7 @@
         "light": "#ffffff",
         "dark": "#18181b",
         "description": "Default surface of inputs, lists, cards, dialogs.",
-        "usedBy": 47
+        "usedBy": 48
       },
       {
         "name": "--c2-theme--color-surface-container-low",
@@ -49686,7 +50515,7 @@
         "light": "#f4f4f5",
         "dark": "#27272a",
         "description": "Hover surface for rows and icon buttons.",
-        "usedBy": 34
+        "usedBy": 35
       },
       {
         "name": "--c2-theme--color-on-surface",
@@ -49694,7 +50523,7 @@
         "light": "#18181b",
         "dark": "#f4f4f5",
         "description": "Primary text colour.",
-        "usedBy": 61
+        "usedBy": 63
       },
       {
         "name": "--c2-theme--color-on-surface-variant",
@@ -49702,7 +50531,7 @@
         "light": "#71717a",
         "dark": "#a1a1aa",
         "description": "Secondary text, placeholders, icons, supporting text.",
-        "usedBy": 94
+        "usedBy": 96
       },
       {
         "name": "--c2-theme--color-outline",
@@ -49772,14 +50601,14 @@
         "category": "font",
         "light": "12px",
         "description": "Small text: supporting text, tooltips, descriptions, timestamps.",
-        "usedBy": 34
+        "usedBy": 35
       },
       {
         "name": "--c2-theme--font-size-md",
         "category": "font",
         "light": "14px",
         "description": "Body text: buttons, inputs, list items, dialog content.",
-        "usedBy": 44
+        "usedBy": 45
       },
       {
         "name": "--c2-theme--font-weight-medium",
@@ -49793,7 +50622,7 @@
         "category": "font",
         "light": "600",
         "description": "Semibold weight: dialog titles, list headings, avatars.",
-        "usedBy": 21
+        "usedBy": 22
       },
       {
         "name": "--c2-theme--radius-sm",
@@ -49807,7 +50636,7 @@
         "category": "radius",
         "light": "6px",
         "description": "Default radius: buttons, inputs, list items, tooltips.",
-        "usedBy": 50
+        "usedBy": 51
       },
       {
         "name": "--c2-theme--radius-lg",
@@ -49828,7 +50657,7 @@
         "category": "radius",
         "light": "999px",
         "description": "Pill / circle radius: avatars, icon buttons.",
-        "usedBy": 19
+        "usedBy": 20
       },
       {
         "name": "--c2-theme--border-width",
@@ -49850,7 +50679,7 @@
         "light": "2px solid rgba(2, 101, 220, 0.4)",
         "dark": "2px solid rgba(90, 163, 255, 0.5)",
         "description": "Focus-visible outline of every component.",
-        "usedBy": 37
+        "usedBy": 39
       },
       {
         "name": "--c2-theme--disabled-opacity",
@@ -49864,7 +50693,7 @@
         "category": "motion",
         "light": "1",
         "description": "Multiplier applied to every transition and animation duration (0 disables motion).",
-        "usedBy": 19
+        "usedBy": 23
       },
       {
         "name": "--c2-theme--shadow-md",
@@ -50251,6 +51080,25 @@
       "--c2-copy-button__container__focus--outline": "--c2-theme--focus-ring",
       "--c2-copy-button__container__disabled--opacity": "--c2-theme--disabled-opacity",
       "--c2-copy-button--transition-duration": "--c2-theme--motion-scale",
+      "--c2-dash-card__expanded--background": "--c2-theme--color-surface",
+      "--c2-dash-card__enter--animation-duration": "--c2-theme--motion-scale",
+      "--c2-dash-card__leave--animation-duration": "--c2-theme--motion-scale",
+      "--c2-dash-card__expanded--animation-duration": "--c2-theme--motion-scale",
+      "--c2-dash-card__header--color": "--c2-theme--color-on-surface",
+      "--c2-dash-card__header--font-size": "--c2-theme--font-size-md",
+      "--c2-dash-card__header--font-weight": "--c2-theme--font-weight-semibold",
+      "--c2-dash-card__footer--color": "--c2-theme--color-on-surface-variant",
+      "--c2-dash-card__footer--font-size": "--c2-theme--font-size-sm",
+      "--c2-dash-card__control--border-radius": "--c2-theme--radius-md",
+      "--c2-dash-card__control--color": "--c2-theme--color-on-surface-variant",
+      "--c2-dash-card__control__hover--background": "--c2-theme--color-surface-container",
+      "--c2-dash-card__control__hover--color": "--c2-theme--color-on-surface",
+      "--c2-dash-card__control__focus--outline": "--c2-theme--focus-ring",
+      "--c2-dash-card__handle__hover--background": "--c2-theme--color-primary-glow",
+      "--c2-dash-card__handle__active--background": "--c2-theme--color-primary",
+      "--c2-dash-card__handle--border-radius": "--c2-theme--radius-full",
+      "--c2-dash-card__handle--transition-duration": "--c2-theme--motion-scale",
+      "--c2-dash-card__handle__focus--outline": "--c2-theme--focus-ring",
       "--c2-date-input--border": "--c2-theme--border",
       "--c2-date-input--border-radius": "--c2-theme--radius-md",
       "--c2-date-input--color": "--c2-theme--color-on-surface",
@@ -50890,6 +51738,6 @@
     "workflow": "# The c2n application workflow\n\nBuild screens from `@c2n/*` web components with as little code as possible. Three layers, applied in this order.\n\n## 1. Theme once\n\n- Install `@c2n/theme` next to the component packages you use.\n- Import `@c2n/theme/theme.css` once at the application root (tokens + base theme). If the app already owns a token system, import only `@c2n/theme/base.css` and bridge your tokens onto the `--c2-theme--*` names.\n- Override the tokens that differ from the defaults on `:root` (light) and under your dark-mode selector. About 35 tokens (`--c2-theme--color-primary`, `--c2-theme--radius-md`, `--c2-theme--font-family`, `--c2-theme--focus-ring`, …) drive every component.\n- Never set component variables globally when a token exists for the job.\n\n## 2. Use the tags directly\n\n- Register an element with a side-effect import (`import '@c2n/button'`) at the application entry, or in the module that renders it.\n- Write plain markup: `<c2-button>Save</c2-button>`. Attributes, slots and events come from the component API (MCP `get_component`, or `node_modules/@c2n/<name>/custom-elements.json`).\n- Retrieve `get_examples` next: begin from the unmodified Default sample, then select gallery examples by use case. Use `get_presets` when structured values are more useful than a complete pattern.\n- Icons are components: `c2-feather-<name>` from `@c2n/feather-icons/icons/<name>.js`, sized and coloured through `--c2-feather-icon--size|color|stroke-width`.\n- A component that appears once with the themed default look needs nothing else.\n\n## 3. Name what repeats\n\nThe decision rule, cheapest first:\n\n| Situation                                                                         | Do this                                                                                                      |\n| --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |\n| The element appears once, default look is fine                                    | plain tag                                                                                                    |\n| Same look repeats, markup is otherwise plain                                      | **CSS-class variant**: a class that sets `--c2-<component>__…` variables                                     |\n| Same look **and** the same attributes / slots / accessible name repeat            | **wrapper component** in your framework (Astro/React/Vue/Lit) that renders the c2 element                    |\n| The variant must be its own tag (used from strings, other Lit templates, shipped) | **Lit subclass** of the component with the variables baked into `static styles`                              |\n| Several c2 components plus some logic repeat                                      | **composed component**: children's variables set on `:host`/a class, attributes forwarded, events re-emitted |\n| No c2 component fits                                                              | app-level component styled with the same `--c2-theme--*` tokens; avoid patching installed packages locally   |\n\nEvery variant lives in one directory (`src/components/ui/`, `src/ui/`…), one file per variant, under the app's own prefix (`app-*`, `site-*`, `my-*`), never `c2-*`.\n\n## 4. Verify\n\n- Every element used is registered (no `HTMLUnknownElement`, no empty tags).\n- `@c2n/theme` is imported exactly once; tokens overridden on `:root` and the dark selector.\n- Prefer CSS custom properties. Every `::part()` selector must name a CSS part documented by `get_component`; no repeated inline `style=\"--c2-…\"`.\n- Every variable, attribute, slot and event name exists in the component API.\n- Variant tags contain a hyphen and do not start with `c2-`.\n- Light and dark both look right; build, lint and type-check pass.\n",
     "theming": "# Theming c2n components\n\n## Layers\n\n1. **Tokens** `--c2-theme--<name>` (from `@c2n/theme/tokens.css`, ~35 of them). Set by the application.\n2. **Base theme** `@c2n/theme/base.css`: `--c2-<component>__<part>--<prop>: var(--c2-theme--<token>, <component default>)` on `:root`/`:host` for every mapped component variable. Generated from the component manifests.\n3. **Component variables** `--c2-<component>__<part>[__<state>]--<property>`: the fine-grained escape hatch. Set on an element, a class or any ancestor; they always win over the base theme.\n4. **Variant components** built from 2 and 3.\n\n## Install\n\n```ts\nimport '@c2n/theme/theme.css' // tokens + base theme, once\n```\n\n```css\n:root {\n  --c2-theme--color-primary: #7c3aed;\n  --c2-theme--color-primary-hover: #6d28d9;\n  --c2-theme--radius-md: 10px;\n  --c2-theme--font-family: 'Inter', system-ui, sans-serif;\n}\n```\n\n## Bring your own tokens\n\n```css\n@import '@c2n/theme/base.css';\n:root {\n  --c2-theme--color-primary: var(--brand-600);\n  --c2-theme--color-on-primary: var(--brand-on-600);\n  --c2-theme--color-surface: var(--surface);\n  --c2-theme--color-on-surface: var(--text);\n  --c2-theme--color-outline: var(--border);\n  --c2-theme--radius-md: var(--radius);\n  --c2-theme--font-family: var(--font-sans);\n  --c2-theme--focus-ring: 2px solid var(--brand-600);\n}\n```\n\nDark mode then follows the app's own switch because the bridged values flip.\n\n## Dark mode with the shipped tokens\n\n`tokens.css` sets light values on `:root` and dark values under `[data-theme='dark']` and `.c2-dark`, with `prefers-color-scheme: dark` as the fallback when no `data-theme` attribute is present. `data-theme=\"light\"` / `.c2-light` opts a subtree out. Selectors are not tied to the root element, so any subtree can be inverted.\n\n## Token groups\n\n- Colour roles: `color-primary`, `color-primary-hover`, `color-primary-active`, `color-on-primary`, `color-primary-container`, `color-surface`, `color-surface-container-low`, `color-surface-container`, `color-on-surface`, `color-on-surface-variant`, `color-outline`, `color-outline-variant`, `color-outline-strong`, `color-error`, `color-scrim`, `color-inverse-surface`, `color-on-inverse-surface`.\n- Typography: `font-family` (unset by default: components inherit the page font), `font-size-sm|md`, `font-weight-medium|semibold`.\n- Shape: `radius-sm|md|lg|xl|full`.\n- Borders: `border-width`, `border` (composite: the whole resting border shorthand; falls back to `border-width solid color-outline`).\n- Interaction: `focus-ring` (outline shorthand), `disabled-opacity`, `motion-scale` (multiplies every duration; `0` disables motion).\n- Elevation: `shadow-md`, `shadow-lg`.\n\nComposite tokens wrap their primitives: `var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #bcbcc6))`, so set the shorthand or just the colour.\n\n## What the base theme does not cover\n\nSizes, paddings, gaps, identity colours (avatar fallbacks), status colours, the code viewer's syntax theme, and variables without a default (they inherit). Use component variables or a variant for those. `@c2n/theme/report.json` lists what is mapped per package; MCP `get_theme` with a `tag` shows the mapping of one component.\n\n## Grammar and states\n\n`--c2-<component>__<part>[__<state>]--<property>`: `__` separates component / part / state, `--` separates the CSS property. States: `hover`, `active`, `focus`, `selected`, `disabled`, `open`, `error`, `read-only`. Example: `--c2-checkbox__container__selected--background-color`.\n",
     "variant-components": "# Variant and composed components\n\nA variant is one c2 component with a fixed look (CSS variables) and, sometimes, fixed attributes, slots or accessible name. A composed component is several c2 components plus glue. Both normally set children's CSS variables on the host element or a class. Use `::part()` only for a part documented by `get_component` and only when the public variables cannot express the change.\n\n## Shape 1: CSS-class variant\n\n```css\n.danger-button {\n  --c2-button__container--background-color: var(--c2-theme--color-error);\n  --c2-button__container__hover--background-color: color-mix(in srgb, var(--c2-theme--color-error), black 12%);\n}\n```\n\n```html\n<c2-button class=\"danger-button\">Delete</c2-button>\n```\n\nUse when only the look differs. Keep variant classes in one stylesheet (`ui/variants.css`). Read variable names from the component API; do not invent them.\n\n## Shape 2: wrapper component\n\nWhen attributes, slots or the accessible name repeat as well. Framework-native, zero runtime cost beyond the c2 element. Example (Astro; the same idea in React/Vue/Svelte):\n\n```astro\n---\n// SiteIconButton.astro — c2-icon-button with the app's size and a tooltip that defaults to the label.\ninterface Props {\n  label: string\n  size?: 'sm' | 'md'\n  class?: string\n  [attr: string]: unknown\n}\nconst { label, size = 'md', class: className = '', ...rest } = Astro.props\n---\n\n<c2-icon-button class={`site-icon-button site-icon-button--${size} ${className}`} aria-label={label} tooltip={label} {...rest}>\n  <slot />\n</c2-icon-button>\n<style is:global>\n  .site-icon-button {\n    --c2-icon-button--border-radius: var(--c2-theme--radius-sm);\n    --c2-icon-button__hover--background-color: var(--c2-theme--color-surface-container);\n  }\n  .site-icon-button--sm {\n    --c2-icon-button__state-layer--size: 30px;\n    --c2-icon-button__icon--width: 16px;\n    --c2-icon-button__icon--height: 16px;\n  }\n  .site-icon-button--md {\n    --c2-icon-button__state-layer--size: 36px;\n    --c2-icon-button__icon--width: 18px;\n    --c2-icon-button__icon--height: 18px;\n  }\n</style>\n```\n\nForward unknown props as attributes (`{...rest}`) so callers keep the full c2 API (`disabled`, `data-*`, `aria-*`).\n\n## Shape 3: Lit subclass\n\nWhen the variant must be a tag of its own. The docs studio's Code tab and MCP `generate_variant` produce this:\n\n```ts\nimport { css } from 'lit'\nimport { Button } from '@c2n/button'\n\nexport class DangerButton extends Button {\n  static override styles = [\n    Button.styles,\n    css`\n      :host {\n        --c2-button__container--background-color: var(--c2-theme--color-error);\n      }\n    `,\n  ]\n  override connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('running', '') // fixed attributes go here\n  }\n}\nif (!customElements.get('app-danger-button')) customElements.define('app-danger-button', DangerButton)\n```\n\nImport the class from the module that defines the element (`@c2n/tabs/tab.js` for `c2-tab`, `@c2n/feather-icons/icons/<name>.js` for icons). Importing it also registers the original `c2-*` tag, which is fine. Never `customElements.define` a `c2-` name.\nGuard registration with `customElements.get()` so development HMR or repeated module evaluation cannot define the same tag twice.\n\n## Composed components\n\nSeveral c2 components and some logic repeat: a search field (`c2-text-field` + `c2-list`), a settings dialog (`c2-modal` + form controls), a toolbar (`c2-icon-button`s + `c2-tooltip`s).\n\n- Set the children's variables on the composed component's class or `:host` (custom properties inherit through shadow boundaries): `.search-palette__field { --c2-text-field--border-top: none; }`.\n- Forward the attributes callers should control as properties/attributes of the composed component.\n- Re-emit the child events callers need. In Lit use `redispatchEvent(this, event)` from `@c2n/core/dom-helper.js`; elsewhere `dispatchEvent(new CustomEvent(...))`.\n- Let the primitives keep their responsibilities (a `c2-modal` already traps focus, closes on Escape and backdrop click, locks scrolling and restores focus): write only the glue.\n- Declare composition in JSDoc (`@internalcomponent c2-list`, `@slotcomponent c2-list-item`) when the composed component is itself a Lit element with a manifest.\n\n## Naming and placement\n\n- Own prefix: `app-*`, `site-*`, `my-*`. A custom element name must contain a hyphen.\n- One file per variant, one directory (`src/components/ui/`), exported from a barrel.\n- Three-line header comment: what it wraps, which variables it fixes, where it is used.\n",
-    "frameworks": "# Using c2n components per framework\n\nAll components are standard custom elements (Lit 3). Register with a side-effect import; then they are plain HTML.\n\n## Events (every framework)\n\nEach component that fires events exports an event map (`TableEventMap`, `SelectEventMap`, …) from the same module as its class, and declares typed `addEventListener` overloads, so the detail narrows with no cast:\n\n```ts\ntable.addEventListener('selection-change', (event) => event.detail.rows) // TableRow[]\n```\n\n`EventMapOf<T>` from `@c2n/core/event-helper.js` recovers a component's map for code that is generic over elements. Use the map type instead of hand-writing `CustomEvent<{ value: string[] }>`.\n\n`selection-change` **does not bubble** — `c2-list`, `c2-select`, `c2-table`, `c2-tabs` and `c2-virtual-list` all fire it, so a listener goes on the element itself, never on an ancestor. `c2-tabs` fires `selection-change`, not `change`.\n\nEvery form-associated component fires plain `input` and `change` alongside its semantic event, which is what generic two-way bindings listen for.\n\nA duplicate `customElements.define` warns and keeps the first definition instead of throwing.\n\n## Plain HTML / Vite / any bundler\n\n```html\n<script type=\"module\">\n  import '@c2n/theme/theme.css'\n  import '@c2n/button'\n</script>\n<c2-button>Save</c2-button>\n```\n\nWith a bundler, put the imports in the entry module (`main.ts`). CSS imports work through the bundler's CSS handling.\n\n## Lit\n\nImport what you render at the top of the component module (`import '@c2n/text-field'`). Extend a component for a tag variant (`class AppField extends TextField`). Re-emit child events with `redispatchEvent` from `@c2n/core/dom-helper.js`. Set child variables in your `static styles` on `:host` or on a class.\n\n## Astro\n\n- Islands (`@astrojs/lit`): `import { Button } from '@c2n/button'` in the frontmatter, `<Button client:load>` in the template. SSR'd with declarative shadow DOM, hydrated on load. Pass **kebab-case attributes** only (a prop whose name matches an element property is set as a property and forces `defer-hydration`). A `client:only` island must not contain islands: its children end up in a `<template>` and nothing hydrates; the parent module registers the children instead.\n- Plain tags + client script: `<c2-button>` in the template and `import '@c2n/button'` inside a `<script>`. Cheaper for repeated markup (no shadow-DOM copy per instance); guard the flash with `c2-button:not(:defined) { visibility: hidden }`.\n- Scoped `<style>` does not reach elements rendered by child components; use `is:global` (or `:global()`) for variant classes.\n\n## React 19\n\nCustom elements work as JSX tags. React 19 passes primitive props as attributes and functions as event listeners for `on*` names; for custom events attach listeners with a `ref` (`ref.current.addEventListener('selection-change', …)`).\n\nTypes: `import '@c2n/<name>/react'` — one line per package, in any `.d.ts` — declares the tags in `JSX.IntrinsicElements` with props derived from the element class. Do not hand-write the mapping. React 18 and older: pass attributes as strings and use refs for events and properties.\n\n## Vue 3\n\nTell the compiler about the tags: `compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-')` (in `@vitejs/plugin-vue`'s `template.compilerOptions`); without it every `c2-*` tag is treated as a Vue component and renders nothing. Register the elements at module scope before `mount()`: Vue chooses between a property and an attribute with `key in el`, so a binding on an element that has not upgraded yet falls back to an attribute.\n\nTypes: `import '@c2n/<name>/vue'` registers the tags with Volar, and `\"extends\": [..., \"@c2n/framework-types/tsconfig.vue.json\"]` supplies the matching `vueCompilerOptions` (`strictTemplates`, plus the `v-model` prop mapping so `v-model` binds `value`/`checked` rather than `modelValue`). Declare no local `vueCompilerOptions` next to it — a local one replaces the inherited object rather than merging.\n\n- Events: `@selection-change`, `@submit-message` bind by their real kebab-case name — Vue calls `addEventListener` with the name as written. The handler gets a plain `Event`, so narrow it (`(event as CustomEvent<{ value: string[] }>).detail`).\n- `v-model` works on `c2-text-field` / `c2-textarea`: on a custom element Vue compiles it to the plain-text model directive, which sets `el.value` and listens for `input`, and both components expose `value` and re-emit the native `input` event.\n- `.prop` forces a DOM property (`:value.prop=\"selected\"` for array/object values); `.attr` forces an attribute (`:align.attr=\"side\"`), needed when a property is not reflected but the component styles it with `:host([attr])` — `c2-chat-message`'s `align` is the case to know.\n- A static attribute stays an attribute, so spell it the way the component declares it (`row-key`, not `rowKey`).\n\n## Angular\n\n`CUSTOM_ELEMENTS_SCHEMA` on the component is the only required configuration. `[rows]=\"…\"` writes a property with `setProperty`; `(selection-change)` binds the event by its real name. A **static** attribute stays an attribute, so a camelCase property needs `[rowKey]=\"'id'\"` or the real attribute name (`row-key`) — the lowercase spelling `rowkey` is ignored and logs a warning.\n\nForms: Angular's built-in value accessors match `input`/`select`/`textarea` only, so `ngModel` and `formControlName` do nothing on a c2 control without `@c2n/angular`. Add `imports: [FormsModule, ...C2_FORM_ACCESSORS]`.\n\nThe schema turns off template type checking, so `$event` is a bare `Event`: take the component's event-map type in the handler rather than `$any` at the call site.\n\n## Svelte\n\nSvelte binds attributes and `on:` events directly.\n\n## Table cells\n\n`renderCell` cannot return framework markup (it is handed to Lit). Mark the column `cell-slot` and render one light-DOM child per row into `slot=\"cell:<row key>:<field>\"`; the children stay in the document, so ordinary CSS reaches them. Requires `row-key`; `renderCell`/the column format is the fallback.\n\n## Editor support outside TypeScript\n\n`@c2n/framework-types` ships `dist/html-custom-data.json` (point `html.customData` at it for VS Code / Volar) and `dist/web-types.json` (picked up automatically by the JetBrains IDEs). Both are generated from the custom-elements manifests, and cover plain HTML, Angular templates and Vue SFCs.\n\n## Server-side rendering and static HTML\n\n- Components must not touch `document`/`window` at module scope; the c2 components guard with `isServer`.\n- Without SSR of the shadow DOM, hide unregistered tags until they upgrade: `c2-modal:not(:defined) { display: none }` (dialogs, lists) or `visibility: hidden` (layout-stable chrome).\n- Theme CSS is plain CSS; load it in the document head so the first paint is themed.\n"
+    "frameworks": "# Using c2n components per framework\n\nAll components are standard custom elements (Lit 3). Register with a side-effect import; then they are plain HTML.\n\n## Events (every framework)\n\nEach component that fires events exports an event map (`TableEventMap`, `SelectEventMap`, …) from the same module as its class, and declares typed `addEventListener` overloads, so the detail narrows with no cast:\n\n```ts\ntable.addEventListener('selection-change', (event) => event.detail.rows) // TableRow[]\n```\n\n`EventMapOf<T>` from `@c2n/core/event-helper.js` recovers a component's map for code that is generic over elements. Use the map type instead of hand-writing `CustomEvent<{ value: string[] }>`.\n\n`selection-change` **does not bubble** — `c2-list`, `c2-select`, `c2-table`, `c2-tabs` and `c2-virtual-list` all fire it, so a listener goes on the element itself, never on an ancestor. `c2-tabs` fires `selection-change`, not `change`.\n\nEvery form-associated component fires plain `input` and `change` alongside its semantic event, which is what generic two-way bindings listen for.\n\nA duplicate `customElements.define` warns and keeps the first definition instead of throwing.\n\n## Plain HTML / Vite / any bundler\n\n```html\n<script type=\"module\">\n  import '@c2n/theme/theme.css'\n  import '@c2n/button'\n</script>\n<c2-button>Save</c2-button>\n```\n\nWith a bundler, put the imports in the entry module (`main.ts`). CSS imports work through the bundler's CSS handling.\n\n## Lit\n\nImport what you render at the top of the component module (`import '@c2n/text-field'`). Extend a component for a tag variant (`class AppField extends TextField`). Re-emit child events with `redispatchEvent` from `@c2n/core/dom-helper.js`. Set child variables in your `static styles` on `:host` or on a class.\n\n## Astro\n\n- Islands (`@astrojs/lit`): `import { Button } from '@c2n/button'` in the frontmatter, `<Button client:load>` in the template. SSR'd with declarative shadow DOM, hydrated on load. Pass **kebab-case attributes** only (a prop whose name matches an element property is set as a property and forces `defer-hydration`). A `client:only` island must not contain islands: its children end up in a `<template>` and nothing hydrates; the parent module registers the children instead.\n- Plain tags + client script: `<c2-button>` in the template and `import '@c2n/button'` inside a `<script>`. Cheaper for repeated markup (no shadow-DOM copy per instance); guard the flash with `c2-button:not(:defined) { visibility: hidden }`.\n- Scoped `<style>` does not reach elements rendered by child components; use `is:global` (or `:global()`) for variant classes.\n\n## React 19\n\nCustom elements work as JSX tags. React 19 passes primitive props as attributes and functions as event listeners for `on*` names; for custom events attach listeners with a `ref` (`ref.current.addEventListener('selection-change', …)`).\n\nTypes: `import '@c2n/<name>/react'` — one line per package, in any `.d.ts` — declares the tags in `JSX.IntrinsicElements` with props derived from the element class, plus each kebab-case attribute name (`row-key` next to `rowKey`). Do not hand-write the mapping. React 18 and older: pass attributes as strings and use refs for events and properties.\n\n**Server-rendered React (Next.js, React Router SSR):** write a camelCase property by its kebab-case attribute name — `min-width`, `expand-full`, `storage-key`, not `minWidth`. The server writes a custom element's props into the HTML verbatim, the parser lowercases them (`minwidth`) and hydration does not set properties, so the camelCase spelling reaches the element as an attribute it does not declare. The component forwards that lookalike to the real attribute and logs a warning, so the value is not lost, but the kebab-case name is what the types list and what needs no forwarding. Object and array props (`rows`) stringify on the server: set them in an effect through a ref.\n\n## Vue 3\n\nTell the compiler about the tags: `compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-')` (in `@vitejs/plugin-vue`'s `template.compilerOptions`); without it every `c2-*` tag is treated as a Vue component and renders nothing. Register the elements at module scope before `mount()`: Vue chooses between a property and an attribute with `key in el`, so a binding on an element that has not upgraded yet falls back to an attribute.\n\nTypes: `import '@c2n/<name>/vue'` registers the tags with Volar, and `\"extends\": [..., \"@c2n/framework-types/tsconfig.vue.json\"]` supplies the matching `vueCompilerOptions` (`strictTemplates`, plus the `v-model` prop mapping so `v-model` binds `value`/`checked` rather than `modelValue`). Declare no local `vueCompilerOptions` next to it — a local one replaces the inherited object rather than merging.\n\n- Events: `@selection-change`, `@submit-message` bind by their real kebab-case name — Vue calls `addEventListener` with the name as written. The handler gets a plain `Event`, so narrow it (`(event as CustomEvent<{ value: string[] }>).detail`).\n- `v-model` works on `c2-text-field` / `c2-textarea`: on a custom element Vue compiles it to the plain-text model directive, which sets `el.value` and listens for `input`, and both components expose `value` and re-emit the native `input` event.\n- `.prop` forces a DOM property (`:value.prop=\"selected\"` for array/object values); `.attr` forces an attribute (`:align.attr=\"side\"`), needed when a property is not reflected but the component styles it with `:host([attr])` — `c2-chat-message`'s `align` is the case to know.\n- A static attribute stays an attribute, so spell it the way the component declares it (`row-key`, not `rowKey`).\n\n## Angular\n\n`CUSTOM_ELEMENTS_SCHEMA` on the component is the only required configuration. `[rows]=\"…\"` writes a property with `setProperty`; `(selection-change)` binds the event by its real name. A **static** attribute stays an attribute, so a camelCase property needs `[rowKey]=\"'id'\"` or the real attribute name (`row-key`) — the lowercase spelling `rowkey` is forwarded to `row-key` with a warning.\n\nForms: Angular's built-in value accessors match `input`/`select`/`textarea` only, so `ngModel` and `formControlName` do nothing on a c2 control without `@c2n/angular`. Add `imports: [FormsModule, ...C2_FORM_ACCESSORS]`.\n\nThe schema turns off template type checking, so `$event` is a bare `Event`: take the component's event-map type in the handler rather than `$any` at the call site.\n\n## Svelte\n\nSvelte binds attributes and `on:` events directly.\n\n## Table cells\n\n`renderCell` cannot return framework markup (it is handed to Lit). Mark the column `cell-slot` and render one light-DOM child per row into `slot=\"cell:<row key>:<field>\"`; the children stay in the document, so ordinary CSS reaches them. Requires `row-key`; `renderCell`/the column format is the fallback.\n\n## Editor support outside TypeScript\n\n`@c2n/framework-types` ships `dist/html-custom-data.json` (point `html.customData` at it for VS Code / Volar) and `dist/web-types.json` (picked up automatically by the JetBrains IDEs). Both are generated from the custom-elements manifests, and cover plain HTML, Angular templates and Vue SFCs.\n\n## Server-side rendering and static HTML\n\n- Components must not touch `document`/`window` at module scope; the c2 components guard with `isServer`.\n- Without SSR of the shadow DOM, hide unregistered tags until they upgrade: `c2-modal:not(:defined) { display: none }` (dialogs, lists) or `visibility: hidden` (layout-stable chrome).\n- Server-rendered markup only carries attributes, so spell camelCase properties as their kebab-case attribute (`row-key`); see the React section for why the camelCase spelling is lost on the way.\n- Theme CSS is plain CSS; load it in the document head so the first paint is themed.\n- \"Lit is in dev mode. Not recommended for production!\" in a dev server (Next.js, Vite) is expected: Lit publishes a `development` export condition with extra checks and warnings, and dev servers resolve it. A production build resolves the default condition and the message is gone; nothing to configure.\n"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c2n/mcp",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "MCP server exposing the c2n web components (API, examples, presets, theme tokens, variant generation) to AI agents",
   "type": "module",
   "bin": {
@@ -101,5 +101,5 @@
     "@c2n/config": "*",
     "custom-elements-manifest": "2.1.0"
   },
-  "gitHead": "8d57710b3345fcb01cdb4cb15d2d43ba8bf21642"
+  "gitHead": "43e38b42ac221ffeef99a773c42dd3356961d26a"
 }