@c2n/mcp 0.0.16 → 0.0.17

package/data/registry.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "c2nVersion": "0.0.16",
+  "c2nVersion": "0.0.17",
   "categories": [
     "Inputs",
     "Buttons",
@@ -22744,6 +22744,899 @@
       ],
       "hasGallery": true
     },
+    "log-viewer": {
+      "id": "log-viewer",
+      "package": "@c2n/log-viewer",
+      "title": "Log Viewer",
+      "description": "Explore large logs with variable-height virtual scrolling and sticky tabular attributes.",
+      "intro": "Read thousands of log entries without rendering thousands of rows. `c2-log-viewer` combines **virtual scrolling for variable-height text** with **sticky attributes** that keep a long entry's context visible. Single-line messages, wrapped output and multiline traces can share the same viewport.",
+      "category": "Data display",
+      "status": "stable",
+      "docsUrl": "https://code2nguyen.github.io/web-components/components/log-viewer",
+      "elements": [
+        {
+          "tag": "c2-log-viewer",
+          "className": "LogViewer",
+          "modulePath": "@c2n/log-viewer",
+          "description": "A text-only, variable-height virtual log viewport. Filters and search are controlled by the application.\nWith the viewport focused, Home jumps to the first entry and End follows the latest; Ctrl/Command variants also work.",
+          "attributes": [
+            {
+              "name": "tabular",
+              "type": "boolean",
+              "default": "true",
+              "description": "Align attributes vertically in columns; false displays concatenated entry text."
+            },
+            {
+              "name": "wrap",
+              "type": "boolean",
+              "default": "false",
+              "description": "Break text to fit the available column or viewport width."
+            }
+          ],
+          "slots": [],
+          "events": [],
+          "cssParts": [
+            {
+              "name": "token",
+              "description": "Colored log token; severity and timestamp tokens use the existing level and timestamp colors"
+            },
+            {
+              "name": "copy-icon",
+              "description": "Copy and success SVG icon"
+            },
+            {
+              "name": "copy-button",
+              "description": "Copy the complete message of a visible entry; revealed on hover or keyboard focus"
+            },
+            {
+              "name": "highlight",
+              "description": "Matching visible entry or plain text slice in highlight mode"
+            },
+            {
+              "name": "viewport",
+              "description": "Keyboard accessible scroll surface"
+            },
+            {
+              "name": "content",
+              "description": "Virtual content and its total scroll extent"
+            },
+            {
+              "name": "entry",
+              "description": "Visible tabular entry"
+            },
+            {
+              "name": "cell",
+              "description": "Attribute column containing its sticky text"
+            },
+            {
+              "name": "text",
+              "description": "Plain text content"
+            },
+            {
+              "name": "empty",
+              "description": "Empty state"
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--c2-log-viewer--height",
+              "type": "CSS value",
+              "default": "480px",
+              "part": "",
+              "property": "height",
+              "description": "Viewport height"
+            },
+            {
+              "name": "--c2-log-viewer--background",
+              "type": "color",
+              "default": "#0b1220",
+              "part": "",
+              "property": "background",
+              "description": "Terminal surface"
+            },
+            {
+              "name": "--c2-log-viewer--color",
+              "type": "color",
+              "default": "#d3deee",
+              "part": "",
+              "property": "color",
+              "description": "Text color"
+            },
+            {
+              "name": "--c2-log-viewer--font-family",
+              "type": "CSS value",
+              "default": "ui-monospace, monospace",
+              "part": "",
+              "property": "font-family",
+              "description": "Text font"
+            },
+            {
+              "name": "--c2-log-viewer--font-size",
+              "type": "CSS value",
+              "default": "13px",
+              "part": "",
+              "property": "font-size",
+              "description": "Text size"
+            },
+            {
+              "name": "--c2-log-viewer--line-height",
+              "type": "CSS value",
+              "default": "1.65",
+              "part": "",
+              "property": "line-height",
+              "description": "Line spacing"
+            },
+            {
+              "name": "--c2-log-viewer--border",
+              "type": "CSS value",
+              "default": "1px solid #263449",
+              "part": "",
+              "property": "border",
+              "description": "Outer edge"
+            },
+            {
+              "name": "--c2-log-viewer--border-radius",
+              "type": "CSS value",
+              "default": "12px",
+              "part": "",
+              "property": "border-radius",
+              "description": "Outer corners"
+            },
+            {
+              "name": "--c2-log-viewer__message--min-width",
+              "type": "CSS value",
+              "default": "240px",
+              "part": "message",
+              "property": "min-width",
+              "description": "Minimum primary column width"
+            },
+            {
+              "name": "--c2-log-viewer__cell--padding",
+              "type": "CSS value",
+              "default": "8px 12px",
+              "part": "cell",
+              "property": "padding",
+              "description": "Attribute cell inset included in row measurements"
+            },
+            {
+              "name": "--c2-log-viewer__text--inset",
+              "type": "CSS value",
+              "default": "12px",
+              "part": "text",
+              "property": "inset",
+              "description": "Horizontal inset for continuous text"
+            },
+            {
+              "name": "--c2-log-viewer__empty--padding",
+              "type": "CSS value",
+              "default": "24px",
+              "part": "empty",
+              "property": "padding",
+              "description": "Empty state inset"
+            },
+            {
+              "name": "--c2-log-viewer__empty--color",
+              "type": "color",
+              "default": "#94a3b8",
+              "part": "empty",
+              "property": "color",
+              "description": "Empty state text"
+            },
+            {
+              "name": "--c2-log-viewer__viewport__focus--outline",
+              "type": "CSS value",
+              "default": "2px solid #60a5fa",
+              "part": "viewport",
+              "state": "focus",
+              "property": "outline",
+              "description": "Keyboard focus indicator"
+            },
+            {
+              "name": "--c2-log-viewer__timestamp--color",
+              "type": "color",
+              "default": "#94a3b8",
+              "part": "timestamp",
+              "property": "color",
+              "description": "Timestamp text"
+            },
+            {
+              "name": "--c2-log-viewer__attribute--color",
+              "type": "color",
+              "default": "#a5b4cc",
+              "part": "attribute",
+              "property": "color",
+              "description": "Secondary attribute text"
+            },
+            {
+              "name": "--c2-log-viewer__level--color",
+              "type": "color",
+              "default": "#c4b5fd",
+              "part": "level",
+              "property": "color",
+              "description": "Unclassified level text"
+            },
+            {
+              "name": "--c2-log-viewer__level__info--color",
+              "type": "color",
+              "default": "#6ee7b7",
+              "part": "level/info",
+              "property": "color",
+              "description": "Info level text"
+            },
+            {
+              "name": "--c2-log-viewer__level__warning--color",
+              "type": "color",
+              "default": "#fcd34d",
+              "part": "level/warning",
+              "property": "color",
+              "description": "Warn and warning level text"
+            },
+            {
+              "name": "--c2-log-viewer__level__error--color",
+              "type": "color",
+              "default": "#fda4af",
+              "part": "level",
+              "state": "error",
+              "property": "color",
+              "description": "Error and fatal level text"
+            },
+            {
+              "name": "--c2-log-viewer__entry--box-shadow",
+              "type": "CSS value",
+              "default": "inset 0 -1px 0 #1b293d",
+              "part": "entry",
+              "property": "box-shadow",
+              "description": "Subtle row divider without changing measured geometry"
+            },
+            {
+              "name": "--c2-log-viewer__entry__hover--background",
+              "type": "color",
+              "default": "#142238",
+              "part": "entry",
+              "state": "hover",
+              "property": "background",
+              "description": "Hovered row surface"
+            },
+            {
+              "name": "--c2-log-viewer__entry__highlighted--background",
+              "type": "color",
+              "default": "#17304c",
+              "part": "entry",
+              "state": "highlighted",
+              "property": "background",
+              "description": "Matching entry surface in highlight mode"
+            },
+            {
+              "name": "--c2-log-viewer__entry__highlighted--box-shadow",
+              "type": "CSS value",
+              "default": "inset 3px 0 0 #60a5fa",
+              "part": "entry",
+              "state": "highlighted",
+              "property": "box-shadow",
+              "description": "Matching entry accent without changing measured geometry"
+            },
+            {
+              "name": "--c2-log-viewer__copy--size",
+              "type": "CSS value",
+              "default": "28px",
+              "part": "copy",
+              "property": "size",
+              "description": "Copy button size"
+            },
+            {
+              "name": "--c2-log-viewer__copy--icon-size",
+              "type": "CSS value",
+              "default": "55%",
+              "part": "copy",
+              "property": "icon-size",
+              "description": "Copy and success icon width and height"
+            },
+            {
+              "name": "--c2-log-viewer__copy--stroke-width",
+              "type": "number",
+              "default": "1.8",
+              "part": "copy",
+              "property": "stroke-width",
+              "description": "Copy and success SVG stroke width"
+            },
+            {
+              "name": "--c2-log-viewer__copy--inset",
+              "type": "CSS value",
+              "default": "8px",
+              "part": "copy",
+              "property": "inset",
+              "description": "Copy button offset from viewport edges"
+            },
+            {
+              "name": "--c2-log-viewer__copy--padding-top",
+              "type": "CSS value",
+              "default": "4px",
+              "part": "copy",
+              "property": "padding-top",
+              "description": "Space above the copy button within an entry"
+            },
+            {
+              "name": "--c2-log-viewer__copy--background",
+              "type": "color",
+              "default": "transparent",
+              "part": "copy",
+              "property": "background",
+              "description": "Copy button surface"
+            },
+            {
+              "name": "--c2-log-viewer__copy--color",
+              "type": "color",
+              "default": "#dbeafe",
+              "part": "copy",
+              "property": "color",
+              "description": "Copy icon color"
+            },
+            {
+              "name": "--c2-log-viewer__copy--border",
+              "type": "CSS value",
+              "default": "none",
+              "part": "copy",
+              "property": "border",
+              "description": "Copy button edge"
+            },
+            {
+              "name": "--c2-log-viewer__copy--border-radius",
+              "type": "CSS value",
+              "default": "6px",
+              "part": "copy",
+              "property": "border-radius",
+              "description": "Copy button corners"
+            },
+            {
+              "name": "--c2-log-viewer__copy__hover--background",
+              "type": "color",
+              "default": "#2a4263",
+              "part": "copy",
+              "state": "hover",
+              "property": "background",
+              "description": "Hovered copy button surface"
+            },
+            {
+              "name": "--c2-log-viewer__copy__focus--outline",
+              "type": "CSS value",
+              "default": "2px solid #60a5fa",
+              "part": "copy",
+              "state": "focus",
+              "property": "outline",
+              "description": "Copy button keyboard focus"
+            },
+            {
+              "name": "--c2-log-viewer__token--color",
+              "type": "color",
+              "default": "#93c5fd",
+              "part": "token",
+              "property": "color",
+              "description": "Quoted values, numbers, URLs and recognizable IDs in log text"
+            }
+          ]
+        }
+      ],
+      "composition": {
+        "internal": [],
+        "slotted": [],
+        "usedBy": []
+      },
+      "install": {
+        "npm": "npm install @c2n/log-viewer @c2n/theme",
+        "import": "import '@c2n/log-viewer'",
+        "importClass": "import { LogViewer } from '@c2n/log-viewer'"
+      },
+      "examples": [
+        {
+          "kind": "gallery",
+          "label": "Default",
+          "section": "Real log streams",
+          "description": "Default Real log streams example for c2-log-viewer.",
+          "isDefault": true,
+          "tags": [
+            "c2-log-viewer"
+          ],
+          "html": "<c2-log-viewer class=\"server-default\" data-log-viewer-demo=\"virtual\" wrap aria-label=\"Server access log with 10,000 requests\"></c2-log-viewer>",
+          "css": ".server-default { width: 100%; height: 340px; }"
+        },
+        {
+          "kind": "gallery",
+          "label": "Commerce checkout · sticky context",
+          "section": "Real log streams",
+          "description": "Commerce checkout · sticky context Real log streams example for c2-log-viewer.",
+          "isDefault": false,
+          "tags": [
+            "c2-log-viewer"
+          ],
+          "html": "<c2-log-viewer class=\"commerce-trace\" data-log-viewer-demo=\"sticky\" wrap aria-label=\"Checkout incident with sticky attributes\"></c2-log-viewer>",
+          "css": ".commerce-trace { width: 100%; height: 340px; }"
+        },
+        {
+          "kind": "gallery",
+          "label": "Server output · continuous text",
+          "section": "Real log streams",
+          "description": "Server output · continuous text Real log streams example for c2-log-viewer.",
+          "isDefault": false,
+          "tags": [
+            "c2-log-viewer"
+          ],
+          "html": "<c2-log-viewer class=\"server-plain\" data-log-viewer-demo=\"server\" tabular=\"false\" wrap aria-label=\"Continuous server output\"></c2-log-viewer>",
+          "css": ".server-plain { width: 100%; height: 300px; }"
+        },
+        {
+          "kind": "gallery",
+          "label": "Commerce operations · highlighted matches",
+          "section": "Real log streams",
+          "description": "Commerce operations · highlighted matches Real log streams example for c2-log-viewer.",
+          "isDefault": false,
+          "tags": [
+            "c2-log-viewer"
+          ],
+          "html": "<c2-log-viewer class=\"commerce-matches\" data-log-viewer-demo=\"matches\" wrap aria-label=\"Commerce logs with warnings and errors highlighted\"></c2-log-viewer>",
+          "css": ".commerce-matches { width: 100%; height: 340px; }"
+        },
+        {
+          "kind": "gallery",
+          "label": "Commerce operations · light theme",
+          "section": "Real log streams",
+          "description": "Commerce operations · light theme Real log streams example for c2-log-viewer.",
+          "isDefault": false,
+          "tags": [
+            "c2-log-viewer"
+          ],
+          "html": "<c2-log-viewer class=\"commerce-light\" data-log-viewer-demo=\"commerce\" wrap aria-label=\"Online store checkout and order logs\"></c2-log-viewer>",
+          "css": ".commerce-light {\n  width: 100%; height: 320px;\n  --c2-log-viewer--background: #f8fafc;\n  --c2-log-viewer--color: #1e293b;\n  --c2-log-viewer--border: 1px solid #cbd5e1;\n  --c2-log-viewer__token--color: #1d4ed8;\n  --c2-log-viewer__timestamp--color: #64748b;\n  --c2-log-viewer__attribute--color: #475569;\n  --c2-log-viewer__level--color: #6d28d9;\n  --c2-log-viewer__level__info--color: #047857;\n  --c2-log-viewer__level__warning--color: #92400e;\n  --c2-log-viewer__level__error--color: #be123c;\n  --c2-log-viewer__entry--box-shadow: inset 0 -1px 0 #e2e8f0;\n  --c2-log-viewer__entry__hover--background: #eef2ff;\n  --c2-log-viewer__entry__highlighted--background: #dbeafe;\n  --c2-log-viewer__entry__highlighted--box-shadow: inset 3px 0 0 #2563eb;\n}"
+        },
+        {
+          "kind": "preview",
+          "label": "Preview",
+          "html": "<c2-log-viewer data-log-viewer-demo=\"preview\" wrap aria-label=\"Store server log\" style=\"height:180px;width:300px\"></c2-log-viewer>"
+        }
+      ],
+      "hasGallery": true
+    },
+    "masonry": {
+      "id": "masonry",
+      "package": "@c2n/masonry",
+      "title": "Masonry",
+      "description": "Automatically pack differently sized dashboard tiles, then move or resize them in edit mode.",
+      "intro": "`c2-masonry` packs direct `c2-masonry-item` children into the earliest available cells. It is useful when cards or charts have explicit row and column spans but the application should not manage coordinates. For fixed, author-positioned tracks, use [`c2-dashboard`](/web-components/components/dashboard) instead. Content stays in the application's markup, so forms and links work normally. If it is taller than a tile's declared height, it scrolls inside the tile.",
+      "category": "Layout",
+      "status": "stable",
+      "docsUrl": "https://code2nguyen.github.io/web-components/components/masonry",
+      "elements": [
+        {
+          "tag": "c2-masonry",
+          "className": "Masonry",
+          "modulePath": "@c2n/masonry",
+          "description": "Automatically packs direct `c2-masonry-item` children into the first available grid cells.\nUse `c2-dashboard` when the application must choose fixed coordinates instead.",
+          "attributes": [
+            {
+              "name": "editable",
+              "type": "boolean",
+              "default": "false",
+              "description": "Shows separate move and resize controls when every tile has a unique identity."
+            },
+            {
+              "name": "save-layout",
+              "type": "boolean",
+              "default": "true",
+              "description": "Saves committed user layouts to localStorage and restores them on load. Use `save-layout=\"false\"` to opt out."
+            },
+            {
+              "name": "storage-key",
+              "type": "string | undefined",
+              "description": "Optional stable localStorage key; otherwise the page URL and element ID or position identify this container."
+            }
+          ],
+          "slots": [
+            {
+              "name": "default",
+              "description": "Direct `c2-masonry-item` children to pack."
+            }
+          ],
+          "events": [
+            {
+              "name": "layout-error",
+              "type": "CustomEvent<MasonryLayoutErrorDetail>",
+              "description": "Invalid tile identities, spans, or supplied snapshot; does not bubble."
+            },
+            {
+              "name": "layout-change",
+              "type": "CustomEvent<MasonryLayoutChangeDetail>",
+              "description": "Fired exactly once after a real user move or resize commit; does not bubble. Detail includes a complete restorable snapshot."
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "grid",
+              "description": "Packed grid region."
+            },
+            {
+              "name": "placeholder",
+              "description": "Candidate occupied area during an edit session."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--c2-masonry--gap",
+              "type": "pixel",
+              "default": "8px",
+              "part": "",
+              "property": "gap",
+              "description": "Gap between cells and tiles."
+            },
+            {
+              "name": "--c2-masonry--row-height",
+              "type": "pixel",
+              "default": "8px",
+              "part": "",
+              "property": "row-height",
+              "description": "Height of one grid row."
+            },
+            {
+              "name": "--c2-masonry--padding",
+              "type": "padding",
+              "default": "0px",
+              "part": "",
+              "property": "padding",
+              "description": "Inset around the grid."
+            },
+            {
+              "name": "--c2-masonry--background",
+              "type": "color",
+              "default": "transparent",
+              "part": "",
+              "property": "background",
+              "description": "Grid background."
+            },
+            {
+              "name": "--c2-masonry--border",
+              "type": "border",
+              "default": "none",
+              "part": "",
+              "property": "border",
+              "description": "Outer border."
+            },
+            {
+              "name": "--c2-masonry--border-radius",
+              "type": "border-radius",
+              "default": "0px",
+              "part": "",
+              "property": "border-radius",
+              "description": "Outer corner radius."
+            },
+            {
+              "name": "--c2-masonry__placeholder--background",
+              "type": "color",
+              "default": "rgb(37 99 235 / 8%)",
+              "part": "placeholder",
+              "property": "background",
+              "token": "--c2-theme--color-primary",
+              "description": "Candidate tile fill."
+            },
+            {
+              "name": "--c2-masonry__placeholder--border",
+              "type": "border",
+              "default": "2px dashed #2563eb",
+              "part": "placeholder",
+              "property": "border",
+              "token": "--c2-theme--color-primary",
+              "description": "Candidate tile edge."
+            },
+            {
+              "name": "--c2-masonry__placeholder--border-radius",
+              "type": "border-radius",
+              "default": "6px",
+              "part": "placeholder",
+              "property": "border-radius",
+              "token": "--c2-theme--radius-md",
+              "description": "Candidate corners."
+            },
+            {
+              "name": "--c2-masonry__motion--duration",
+              "type": "time",
+              "default": "160ms",
+              "part": "motion",
+              "property": "duration",
+              "description": "Decorative movement duration."
+            },
+            {
+              "name": "--c2-masonry__motion--timing-function",
+              "type": "timing-function",
+              "default": "ease",
+              "part": "motion",
+              "property": "timing-function",
+              "description": "Decorative movement easing."
+            }
+          ]
+        },
+        {
+          "tag": "c2-masonry-item",
+          "className": "MasonryItem",
+          "modulePath": "@c2n/masonry/masonry-item.js",
+          "description": "A fixed-span content tile placed by its parent `c2-masonry`. Tall content scrolls within the tile.",
+          "attributes": [
+            {
+              "name": "item-id",
+              "type": "string | undefined",
+              "description": "Stable identity used for editing and application snapshots."
+            },
+            {
+              "name": "label",
+              "type": "string | undefined",
+              "description": "Human-readable name used for the scroll region and edit controls."
+            },
+            {
+              "name": "rows",
+              "type": "number",
+              "default": "10",
+              "description": "Positive integer row span shared across size ranges."
+            },
+            {
+              "name": "cols",
+              "type": "number",
+              "default": "3",
+              "description": "Positive integer base column span."
+            },
+            {
+              "name": "cols-xs",
+              "type": "number | undefined",
+              "description": "Optional positive column span for containers narrower than 600 px."
+            },
+            {
+              "name": "cols-sm",
+              "type": "number | undefined",
+              "description": "Optional positive column span for 600–959.99 px containers."
+            },
+            {
+              "name": "cols-md",
+              "type": "number | undefined",
+              "description": "Optional positive column span for 960–1279.99 px containers."
+            },
+            {
+              "name": "cols-lg",
+              "type": "number | undefined",
+              "description": "Optional positive column span for containers at least 1280 px wide."
+            }
+          ],
+          "slots": [
+            {
+              "name": "default",
+              "description": "Application-owned tile content."
+            },
+            {
+              "name": "move-icon",
+              "description": "Optional move-handle icon; an inline grip is provided by default."
+            }
+          ],
+          "events": [],
+          "cssParts": [
+            {
+              "name": "content",
+              "description": "Keyboard-reachable scrolling region containing the application content."
+            },
+            {
+              "name": "controls",
+              "description": "Group of edit-only move and resize controls."
+            },
+            {
+              "name": "move-handle",
+              "description": "Button that starts a move operation."
+            },
+            {
+              "name": "resize-handle",
+              "description": "Keyboard-reachable bottom edge that starts a resize operation."
+            },
+            {
+              "name": "resize-edge",
+              "description": "Pointer resize target on the right edge."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--c2-masonry-item--background",
+              "type": "color",
+              "default": "transparent",
+              "part": "",
+              "property": "background",
+              "description": "Tile surface."
+            },
+            {
+              "name": "--c2-masonry-item--border",
+              "type": "border",
+              "default": "none",
+              "part": "",
+              "property": "border",
+              "description": "Tile border."
+            },
+            {
+              "name": "--c2-masonry-item--border-radius",
+              "type": "border-radius",
+              "default": "0px",
+              "part": "",
+              "property": "border-radius",
+              "description": "Tile corner radius."
+            },
+            {
+              "name": "--c2-masonry-item--box-shadow",
+              "type": "box-shadow",
+              "default": "none",
+              "part": "",
+              "property": "box-shadow",
+              "description": "Tile elevation."
+            },
+            {
+              "name": "--c2-masonry-item__content--padding",
+              "type": "padding",
+              "default": "0px",
+              "part": "content",
+              "property": "padding",
+              "description": "Content inset."
+            },
+            {
+              "name": "--c2-masonry-item__controls--gap",
+              "type": "pixel",
+              "default": "4px",
+              "part": "controls",
+              "property": "gap",
+              "description": "Move-handle inset from the top and right borders."
+            },
+            {
+              "name": "--c2-masonry-item__controls--background",
+              "type": "color",
+              "default": "transparent",
+              "part": "controls",
+              "property": "background",
+              "description": "Surface behind the move-handle corner."
+            },
+            {
+              "name": "--c2-masonry-item__handle--size",
+              "type": "pixel",
+              "default": "32px",
+              "part": "handle",
+              "property": "size",
+              "description": "Move-handle hit target size."
+            },
+            {
+              "name": "--c2-masonry-item__resize-handle--size",
+              "type": "pixel",
+              "default": "8px",
+              "part": "resize-handle",
+              "property": "size",
+              "description": "Invisible resize-edge hit-zone depth."
+            },
+            {
+              "name": "--c2-masonry-item__resize-edge__hover--color",
+              "type": "color",
+              "default": "rgb(37 99 235 / 35%)",
+              "part": "resize-edge",
+              "state": "hover",
+              "property": "color",
+              "description": "Right and bottom border color while the tile is hovered or focused."
+            },
+            {
+              "name": "--c2-masonry-item__handle--icon-size",
+              "type": "pixel",
+              "default": "16px",
+              "part": "handle",
+              "property": "icon-size",
+              "description": "Built-in move icon size."
+            },
+            {
+              "name": "--c2-masonry-item__handle--color",
+              "type": "color",
+              "default": "#18181b",
+              "part": "handle",
+              "property": "color",
+              "token": "--c2-theme--color-on-surface",
+              "description": "Move-handle foreground."
+            },
+            {
+              "name": "--c2-masonry-item__handle--background",
+              "type": "color",
+              "default": "transparent",
+              "part": "handle",
+              "property": "background",
+              "description": "Move-handle surface."
+            },
+            {
+              "name": "--c2-masonry-item__handle--border-radius",
+              "type": "border-radius",
+              "default": "6px",
+              "part": "handle",
+              "property": "border-radius",
+              "token": "--c2-theme--radius-md",
+              "description": "Edit-control corners."
+            },
+            {
+              "name": "--c2-masonry-item__handle__hover--background",
+              "type": "color",
+              "default": "transparent",
+              "part": "handle",
+              "state": "hover",
+              "property": "background",
+              "description": "Hovered move-handle surface."
+            },
+            {
+              "name": "--c2-masonry-item__handle__focus--outline",
+              "type": "outline",
+              "default": "2px solid #2563eb",
+              "part": "handle",
+              "state": "focus",
+              "property": "outline",
+              "token": "--c2-theme--focus-ring",
+              "description": "Keyboard focus indicator."
+            },
+            {
+              "name": "--c2-masonry-item__dragging--opacity",
+              "type": "opacity",
+              "default": "0.92",
+              "part": "dragging",
+              "property": "opacity",
+              "description": "Active tile opacity."
+            },
+            {
+              "name": "--c2-masonry-item__dragging--box-shadow",
+              "type": "box-shadow",
+              "default": "0 12px 28px rgb(15 23 42 / 24%)",
+              "part": "dragging",
+              "property": "box-shadow",
+              "token": "--c2-theme--shadow-md",
+              "description": "Active tile elevation."
+            }
+          ]
+        }
+      ],
+      "composition": {
+        "internal": [],
+        "slotted": [
+          "c2-masonry-item"
+        ],
+        "usedBy": [
+          "c2-masonry"
+        ]
+      },
+      "install": {
+        "npm": "npm install @c2n/masonry @c2n/theme",
+        "import": "import '@c2n/masonry'",
+        "importClass": "import { Masonry } from '@c2n/masonry'"
+      },
+      "examples": [
+        {
+          "kind": "gallery",
+          "label": "Default",
+          "section": "Gallery",
+          "description": "Default Gallery example for c2-masonry.",
+          "isDefault": true,
+          "tags": [
+            "c2-masonry",
+            "c2-masonry-item"
+          ],
+          "html": "<c2-masonry client:only=\"lit\" class=\"masonry-default\">\n  <c2-masonry-item item-id=\"throughput\" label=\"Throughput\" rows=\"12\" cols=\"3\" cols-sm=\"4\" cols-md=\"5\" cols-lg=\"6\">\n    <div class=\"masonry-default-tile\"><h3>Orders processed</h3><strong>18,642</strong><p><span class=\"positive\">↑ 8.2%</span> from last week</p><svg class=\"sparkline\" viewBox=\"0 0 240 50\" preserveAspectRatio=\"none\" aria-hidden=\"true\"><path d=\"M2 42 27 35 53 39 79 27 104 31 130 18 156 23 183 12 208 16 238 5\" /></svg></div>\n  </c2-masonry-item>\n  <c2-masonry-item item-id=\"queue\" label=\"Queue\" rows=\"12\" cols=\"2\" cols-sm=\"2\" cols-md=\"2\" cols-lg=\"3\">\n    <div class=\"masonry-default-tile\"><h3>Open queue</h3><strong>142</strong><p>Across 7 regions</p><ul class=\"mini-list\"><li><span>Priority</span><b>18</b></li><li><span>On track</span><b>124</b></li></ul></div>\n  </c2-masonry-item>\n  <c2-masonry-item item-id=\"health\" label=\"Health\" rows=\"10\" cols=\"2\" cols-sm=\"3\" cols-md=\"3\" cols-lg=\"3\">\n    <div class=\"masonry-default-tile\"><h3>Service availability</h3><strong>99.9%</strong><p>30-day rolling window</p><div class=\"progress-track\" aria-label=\"Availability is 99.9 percent\"><span></span></div></div>\n  </c2-masonry-item>\n  <c2-masonry-item item-id=\"deploys\" label=\"Deploys\" rows=\"10\" cols=\"2\" cols-sm=\"3\" cols-md=\"3\" cols-lg=\"3\">\n    <div class=\"masonry-default-tile\"><h3>Deployments today</h3><strong>3</strong><p>All checks passing</p><ul class=\"mini-list\"><li><span>North region</span><span>09:42</span></li><li><span>West region</span><span>08:18</span></li></ul></div>\n  </c2-masonry-item>\n</c2-masonry>",
+          "css": ".masonry-default {\n  display: block;\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n}\n\n.masonry-default-tile {\n  box-sizing: border-box;\n  height: 100%;\n  padding: 16px;\n  border: 1px solid #e4e4e7;\n  border-radius: 10px;\n  background: #ffffff;\n  color: #18181b;\n  font-size: 12px;\n}\n\n.masonry-default-tile h3 {\n  margin: 0;\n  color: #71717a;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.masonry-default-tile strong {\n  display: block;\n  margin-top: 8px;\n  font-size: 25px;\n  line-height: 1.1;\n  letter-spacing: -0.04em;\n}\n\n.masonry-default-tile p {\n  margin: 6px 0 0;\n  color: #71717a;\n}\n\n.masonry-default-tile .positive {\n  color: #15803d;\n  font-weight: 600;\n}\n\n.masonry-default-tile .sparkline {\n  display: block;\n  width: 100%;\n  height: 48px;\n  margin-top: 14px;\n}\n\n.masonry-default-tile .sparkline path {\n  fill: none;\n  stroke: #2563eb;\n  stroke-width: 3;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n.masonry-default-tile .progress-track {\n  height: 7px;\n  margin-top: 15px;\n  border-radius: 999px;\n  background: #e4e4e7;\n}\n\n.masonry-default-tile .progress-track span {\n  display: block;\n  width: 99.9%;\n  height: 100%;\n  border-radius: inherit;\n  background: #22c55e;\n}\n\n.masonry-default-tile .mini-list {\n  display: grid;\n  gap: 7px;\n  margin: 12px 0 0;\n  padding: 0;\n  list-style: none;\n  color: #52525b;\n}\n\n.masonry-default-tile .mini-list li {\n  display: flex;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.masonry-default-tile .mini-list li span {\n  color: #52525b;\n}"
+        },
+        {
+          "kind": "gallery",
+          "label": "Night watch",
+          "section": "Gallery",
+          "description": "Night watch Gallery example for c2-masonry.",
+          "isDefault": false,
+          "tags": [
+            "c2-masonry",
+            "c2-masonry-item"
+          ],
+          "html": "<c2-masonry client:only=\"lit\" class=\"night-watch\" editable>\n  <c2-masonry-item item-id=\"requests\" label=\"Requests\" rows=\"13\" cols=\"3\" cols-sm=\"4\" cols-md=\"5\" cols-lg=\"6\"><h3>Requests / min</h3><strong>12,804</strong><p><span class=\"night-positive\">↑ 6.8%</span> from yesterday</p><svg class=\"night-trend\" viewBox=\"0 0 240 58\" preserveAspectRatio=\"none\" aria-hidden=\"true\"><path d=\"M2 47 29 42 54 45 80 31 107 35 133 22 159 27 184 15 211 20 238 7\" /></svg></c2-masonry-item>\n  <c2-masonry-item item-id=\"errors\" label=\"Errors\" rows=\"10\" cols=\"2\" cols-sm=\"2\" cols-md=\"2\" cols-lg=\"3\"><h3>Error rate</h3><strong>0.03%</strong><p>Below 0.1% threshold</p></c2-masonry-item>\n  <c2-masonry-item item-id=\"latency\" label=\"Latency\" rows=\"10\" cols=\"2\" cols-sm=\"3\" cols-md=\"3\" cols-lg=\"3\"><h3>P95 latency</h3><strong>218 ms</strong><p>Target under 250 ms</p></c2-masonry-item>\n  <c2-masonry-item item-id=\"regions\" label=\"Regions\" rows=\"10\" cols=\"2\" cols-sm=\"3\" cols-md=\"3\" cols-lg=\"3\"><h3>Regional health</h3><ul class=\"night-list\"><li><span>North</span><b>Healthy</b></li><li><span>West</span><b>Healthy</b></li><li><span>East</span><b>Degraded</b></li></ul></c2-masonry-item>\n</c2-masonry>",
+          "css": ".night-watch {\n  display: block;\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  --c2-masonry--gap: 8px;\n  --c2-masonry--row-height: 9px;\n  --c2-masonry--padding: 12px;\n  --c2-masonry--background: #101827;\n  --c2-masonry--border-radius: 14px;\n  --c2-masonry__placeholder--background: rgb(56 189 248 / 20%);\n  --c2-masonry__placeholder--border: 2px dashed #38bdf8;\n  --c2-masonry-item--background: #1e293b;\n  --c2-masonry-item--border: 1px solid #334155;\n  --c2-masonry-item--border-radius: 10px;\n  --c2-masonry-item__content--padding: 14px;\n  --c2-masonry-item__handle--background: #334155;\n  --c2-masonry-item__handle--color: #f8fafc;\n  --c2-masonry-item__handle__hover--background: #475569;\n}\n\n.night-watch h3 {\n  margin: 0 80px 6px 0;\n  color: #94a3b8;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.night-watch strong {\n  display: block;\n  color: #f8fafc;\n  font-size: 27px;\n  line-height: 1.1;\n  letter-spacing: -0.04em;\n}\n\n.night-watch p {\n  margin: 7px 0 0;\n  color: #94a3b8;\n  font-size: 12px;\n}\n\n.night-watch .night-positive {\n  color: #5eead4;\n  font-weight: 600;\n}\n\n.night-watch .night-trend {\n  display: block;\n  width: 100%;\n  height: 58px;\n  margin-top: 15px;\n}\n\n.night-watch .night-trend path {\n  fill: none;\n  stroke: #38bdf8;\n  stroke-width: 3;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n.night-watch .night-list {\n  display: grid;\n  gap: 9px;\n  margin: 14px 0 0;\n  padding: 0;\n  list-style: none;\n  color: #cbd5e1;\n  font-size: 12px;\n}\n\n.night-watch .night-list li {\n  display: flex;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.night-watch .night-list li span {\n  color: #cbd5e1;\n}\n\n.night-watch .night-list b {\n  color: #f8fafc;\n}"
+        },
+        {
+          "kind": "preview",
+          "label": "Preview",
+          "html": "<c2-masonry style=\"width:260px;--c2-masonry--gap:6px;--c2-masonry--row-height:9px;--c2-masonry--padding:6px;--c2-masonry--background:#f4f4f5;--c2-masonry--border-radius:8px;--c2-masonry-item--background:#fff;--c2-masonry-item--border:1px solid #e4e4e7;--c2-masonry-item--border-radius:6px;--c2-masonry-item__content--padding:8px\">\n  <c2-masonry-item item-id=\"traffic\" label=\"Traffic\" rows=\"5\" cols=\"3\">Traffic · 18.4k</c2-masonry-item>\n  <c2-masonry-item item-id=\"orders\" label=\"Orders\" rows=\"5\" cols=\"2\">Orders · 142</c2-masonry-item>\n</c2-masonry>"
+        }
+      ],
+      "hasGallery": true
+    },
     "mat-icon": {
       "id": "mat-icon",
       "package": "@c2n/mat-icon",
@@ -42131,9 +43024,10 @@
             {
               "name": "--c2-switch__thumb--size",
               "type": "pixel",
-              "default": "16px",
+              "default": "calc(var(--c2-switch__track--height,20px)-2*var(--c2-switch__thumb--offset,2px))",
               "part": "thumb",
-              "property": "size"
+              "property": "size",
+              "description": "Defaults to the track height minus the offset on both edges."
             },
             {
               "name": "--c2-switch__thumb--offset",
@@ -44019,6 +44913,12 @@
           "modulePath": "@c2n/tabs",
           "description": "Tab strip that shows one content panel at a time.\n\nLight-DOM children are split in two groups: every `<c2-tab for=\"…\">` becomes a tab in the header\n(they slot themselves into `tab`), every other child is a panel whose `id` matches a tab's `for`.\nOnly the panel of the selected tab is rendered. The header is a `tablist`: Arrow keys, Home and\nEnd move between tabs, Enter and Space activate the focused one.",
           "attributes": [
+            {
+              "name": "aria-label",
+              "type": "string | null",
+              "default": "null",
+              "description": "Accessible name for the tab list."
+            },
             {
               "name": "selected-tab",
               "type": "string",
@@ -50981,6 +51881,9 @@
     "c2-link-button": "link-button",
     "c2-list": "list",
     "c2-list-item": "list-item",
+    "c2-log-viewer": "log-viewer",
+    "c2-masonry": "masonry",
+    "c2-masonry-item": "masonry",
     "c2-mat-icon": "mat-icon",
     "c2-menu": "menu",
     "c2-menu-item": "menu",
@@ -51065,6 +51968,8 @@
     "@c2n/link-button": "link-button",
     "@c2n/list": "list",
     "@c2n/list-item": "list-item",
+    "@c2n/log-viewer": "log-viewer",
+    "@c2n/masonry": "masonry",
     "@c2n/mat-icon": "mat-icon",
     "@c2n/menu": "menu",
     "@c2n/modal": "modal",
@@ -51118,7 +52023,7 @@
         "light": "#0265dc",
         "dark": "#5aa3ff",
         "description": "Accent colour: filled buttons, selected states, focused borders, links.",
-        "usedBy": 57
+        "usedBy": 59
       },
       {
         "name": "--c2-theme--color-primary-hover",
@@ -51190,7 +52095,7 @@
         "light": "#18181b",
         "dark": "#f4f4f5",
         "description": "Primary text colour.",
-        "usedBy": 63
+        "usedBy": 64
       },
       {
         "name": "--c2-theme--color-on-surface-variant",
@@ -51303,7 +52208,7 @@
         "category": "radius",
         "light": "6px",
         "description": "Default radius: buttons, inputs, list items, tooltips.",
-        "usedBy": 51
+        "usedBy": 53
       },
       {
         "name": "--c2-theme--radius-lg",
@@ -51346,7 +52251,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": 39
+        "usedBy": 40
       },
       {
         "name": "--c2-theme--disabled-opacity",
@@ -51368,7 +52273,7 @@
         "light": "0 8px 24px rgba(24, 24, 27, 0.08)",
         "dark": "0 8px 24px rgba(0, 0, 0, 0.45)",
         "description": "Shadow of popovers, menus and tooltips.",
-        "usedBy": 10
+        "usedBy": 11
       },
       {
         "name": "--c2-theme--shadow-lg",
@@ -51867,6 +52772,13 @@
       "--c2-list-item__selected__hover--background": "--c2-theme--color-primary-container",
       "--c2-list-item__focus--outline": "--c2-theme--focus-ring",
       "--c2-list-item__disabled--opacity": "--c2-theme--disabled-opacity",
+      "--c2-masonry__placeholder--background": "--c2-theme--color-primary",
+      "--c2-masonry__placeholder--border": "--c2-theme--color-primary",
+      "--c2-masonry__placeholder--border-radius": "--c2-theme--radius-md",
+      "--c2-masonry-item__handle--color": "--c2-theme--color-on-surface",
+      "--c2-masonry-item__handle--border-radius": "--c2-theme--radius-md",
+      "--c2-masonry-item__handle__focus--outline": "--c2-theme--focus-ring",
+      "--c2-masonry-item__dragging--box-shadow": "--c2-theme--shadow-md",
       "--c2-menu--background": "--c2-theme--color-surface",
       "--c2-menu--border-top": "--c2-theme--color-outline-variant",
       "--c2-menu--border-right": "--c2-theme--color-outline-variant",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c2n/mcp",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "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": "d04bcc1c278febafc95f94904d68ea583d380e05"
+  "gitHead": "0f012d5c8f91bb1bf7c1a39437147f76802c6a6f"
 }