@c2n/mcp 0.0.10 → 0.0.11

package/data/registry.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "c2nVersion": "0.0.10",
+  "c2nVersion": "0.0.11",
   "categories": [
     "Inputs",
     "Buttons",
@@ -14062,6 +14062,812 @@
       ],
       "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\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 and the gesture ended. 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 drag handles sit inside the cards, so a gutter under ~6px is hard to grab."
+            },
+            {
+              "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, so\ngive it — or the card inside it — a background.\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. Give it `height: 100%` (a `c2-card` already stretches) so it follows the row track."
+            },
+            {
+              "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",
+              "part": "",
+              "state": "expanded",
+              "property": "background",
+              "description": "Fill while the card is expanded over its neighbours; falls back to `--c2-dash-card--background`, which is transparent, so set one of the two."
+            },
+            {
+              "name": "--c2-dash-card__expanded--z-index",
+              "type": "number",
+              "default": "20",
+              "part": "",
+              "state": "expanded",
+              "property": "z-index"
+            },
+            {
+              "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": "Thickness of the grab area on an edge. It reaches into the pane, so it stays grabbable however wide the grid gutter is."
+            },
+            {
+              "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 +50278,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 +50365,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 +50431,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 +50471,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",
@@ -49686,7 +50495,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 +50503,7 @@
         "light": "#18181b",
         "dark": "#f4f4f5",
         "description": "Primary text colour.",
-        "usedBy": 61
+        "usedBy": 63
       },
       {
         "name": "--c2-theme--color-on-surface-variant",
@@ -49702,7 +50511,7 @@
         "light": "#71717a",
         "dark": "#a1a1aa",
         "description": "Secondary text, placeholders, icons, supporting text.",
-        "usedBy": 94
+        "usedBy": 96
       },
       {
         "name": "--c2-theme--color-outline",
@@ -49772,14 +50581,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 +50602,7 @@
         "category": "font",
         "light": "600",
         "description": "Semibold weight: dialog titles, list headings, avatars.",
-        "usedBy": 21
+        "usedBy": 22
       },
       {
         "name": "--c2-theme--radius-sm",
@@ -49807,7 +50616,7 @@
         "category": "radius",
         "light": "6px",
         "description": "Default radius: buttons, inputs, list items, tooltips.",
-        "usedBy": 50
+        "usedBy": 51
       },
       {
         "name": "--c2-theme--radius-lg",
@@ -49828,7 +50637,7 @@
         "category": "radius",
         "light": "999px",
         "description": "Pill / circle radius: avatars, icon buttons.",
-        "usedBy": 19
+        "usedBy": 20
       },
       {
         "name": "--c2-theme--border-width",
@@ -49850,7 +50659,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 +50673,7 @@
         "category": "motion",
         "light": "1",
         "description": "Multiplier applied to every transition and animation duration (0 disables motion).",
-        "usedBy": 19
+        "usedBy": 21
       },
       {
         "name": "--c2-theme--shadow-md",
@@ -50251,6 +51060,22 @@
       "--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--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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c2n/mcp",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "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": "bf962fba5e49a0ac7555a082584e262949d323a5"
 }