@cascivo/mcp 0.1.0 → 0.1.1

package/dist/registry.json

@@ -1,6 +1,6 @@
 {
   "version": "0.0.0",
-  "generatedAt": "2026-06-17",
+  "generatedAt": "2026-06-19",
   "components": [
     {
       "name": "accordion",
@@ -340,6 +340,130 @@
         }
       }
     },
+    {
+      "name": "app-shell",
+      "type": "component",
+      "description": "Sticky-header + full-height side-nav + single-scroll-container layout with an animated, accessible nav toggle.",
+      "category": "layout",
+      "version": "0.0.0",
+      "files": [
+        "https://raw.githubusercontent.com/urbanisierung/cascivo/main/packages/components/src/app-shell/app-shell.tsx",
+        "https://raw.githubusercontent.com/urbanisierung/cascivo/main/packages/components/src/app-shell/app-shell.module.css"
+      ],
+      "dependencies": ["@cascivo/core"],
+      "tags": ["shell", "layout", "sidebar", "navigation", "drawer", "responsive", "sticky"],
+      "meta": {
+        "name": "AppShell",
+        "description": "Sticky-header + full-height side-nav + single-scroll-container layout with an animated, accessible nav toggle.",
+        "category": "layout",
+        "states": ["open", "closed"],
+        "variants": [],
+        "sizes": [],
+        "props": [
+          {
+            "name": "header",
+            "type": "ReactNode",
+            "required": true,
+            "description": "Top bar (typically a ShellHeader). If a React element, its onMenuClick/menuExpanded are bound to the nav toggle."
+          },
+          {
+            "name": "nav",
+            "type": "ReactNode",
+            "required": false,
+            "description": "Side navigation (typically a SideNav). Fills full height and scrolls internally."
+          },
+          {
+            "name": "children",
+            "type": "ReactNode",
+            "required": true,
+            "description": "Main content, rendered inside the single scroll container."
+          },
+          {
+            "name": "footer",
+            "type": "ReactNode",
+            "required": false,
+            "description": "Optional footer pinned below the content area."
+          },
+          {
+            "name": "open",
+            "type": "boolean",
+            "required": false,
+            "description": "Controlled nav open/visible state. Omit for uncontrolled."
+          },
+          {
+            "name": "defaultOpen",
+            "type": "boolean",
+            "required": false,
+            "description": "Initial open state when uncontrolled. Defaults open on desktop, closed on small screens."
+          },
+          {
+            "name": "onOpenChange",
+            "type": "(open: boolean) => void",
+            "required": false,
+            "description": "Fired when the nav requests open/close (burger, Escape, scrim)."
+          }
+        ],
+        "tokens": [
+          "--cascivo-shell-aside-inline-size",
+          "--cascivo-shell-panel-inline-size",
+          "--cascivo-motion-emphasis",
+          "--cascivo-z-raised",
+          "--cascivo-z-overlay",
+          "--cascivo-color-foreground",
+          "--cascivo-color-background"
+        ],
+        "accessibility": {
+          "role": "none",
+          "wcag": "2.2-AA",
+          "keyboard": ["Escape"]
+        },
+        "examples": [
+          {
+            "title": "Header + SideNav + content",
+            "code": "<AppShell\n  header={<ShellHeader brand={{ name: 'Acme' }} />}\n  nav={<SideNav items={items} />}\n>\n  <h1>Dashboard</h1>\n</AppShell>",
+            "description": "The burger in ShellHeader toggles the SideNav automatically."
+          },
+          {
+            "title": "Controlled open",
+            "code": "<AppShell header={header} nav={nav} open={open.value} onOpenChange={(v) => (open.value = v)}>\n  …\n</AppShell>"
+          }
+        ],
+        "dependencies": ["@cascivo/core"],
+        "tags": ["shell", "layout", "sidebar", "navigation", "drawer", "responsive", "sticky"],
+        "intent": {
+          "whenToUse": [
+            "Building an application screen with a persistent header and side navigation",
+            "You want the header burger to toggle the side nav with an animated, accessible show/hide out of the box",
+            "You need one scroll container (the main area) with a fixed header and full-height nav"
+          ],
+          "whenNotToUse": [
+            "Marketing/document pages where the whole page should scroll — use a plain Header instead",
+            "A single, always-visible sidebar with no toggle — compose SideNav directly"
+          ],
+          "antiPatterns": [
+            {
+              "bad": "Animating the nav collapse with grid-template-columns: 1fr → 0fr on an auto-width sidebar",
+              "good": "AppShell animates an explicit inline-size (desktop) / transform (mobile drawer)",
+              "why": "fr units have no definite size to resolve against on a shrink-to-fit flex item, so the track never animates"
+            }
+          ],
+          "related": [
+            {
+              "name": "ShellHeader",
+              "relationship": "pairs-with",
+              "reason": "Provides the top bar and burger AppShell binds to the nav"
+            },
+            {
+              "name": "SideNav",
+              "relationship": "pairs-with",
+              "reason": "The side navigation AppShell lays out full-height"
+            }
+          ],
+          "a11yRationale": "The hidden nav uses transform/inline-size + inert (never display:none alone), so it stays in the a11y tree and is keyboard-reachable when open while leaving the tab order when closed; Escape and a scrim close the mobile drawer and focus returns to the toggle.",
+          "flexibility": []
+        }
+      }
+    },
     {
       "name": "aspect-ratio",
       "type": "component",
@@ -547,6 +671,128 @@
         }
       }
     },
+    {
+      "name": "avatar-group",
+      "type": "component",
+      "description": "Overlapping stack of avatars with a max cap and an i18n-labelled +N overflow chip",
+      "category": "display",
+      "version": "0.0.0",
+      "files": [
+        "https://raw.githubusercontent.com/urbanisierung/cascivo/main/packages/components/src/avatar-group/avatar-group.tsx",
+        "https://raw.githubusercontent.com/urbanisierung/cascivo/main/packages/components/src/avatar-group/avatar-group.module.css"
+      ],
+      "dependencies": ["@cascivo/core", "@cascivo/components"],
+      "tags": ["avatar", "group", "stack", "overflow", "display"],
+      "meta": {
+        "name": "AvatarGroup",
+        "description": "Overlapping stack of avatars with a max cap and an i18n-labelled +N overflow chip",
+        "category": "display",
+        "states": ["default"],
+        "variants": [],
+        "sizes": [],
+        "props": [
+          {
+            "name": "max",
+            "type": "number",
+            "required": false,
+            "description": "Cap the number of visible avatars"
+          },
+          {
+            "name": "total",
+            "type": "number",
+            "required": false,
+            "description": "Override the total count used for the +N chip"
+          },
+          {
+            "name": "spacing",
+            "type": "'sm' | 'md' | 'lg'",
+            "required": false,
+            "default": "md"
+          },
+          {
+            "name": "isGrid",
+            "type": "boolean",
+            "required": false,
+            "default": "false"
+          },
+          {
+            "name": "labels",
+            "type": "AvatarGroupLabels",
+            "required": false
+          }
+        ],
+        "tokens": [
+          "--cascivo-color-surface",
+          "--cascivo-color-text-muted",
+          "--cascivo-space-2",
+          "--cascivo-text-xs"
+        ],
+        "accessibility": {
+          "role": "group",
+          "wcag": "2.2-AA",
+          "keyboard": []
+        },
+        "examples": [
+          {
+            "title": "Basic",
+            "code": "<AvatarGroup><Avatar fallback=\"A\" /><Avatar fallback=\"B\" /><Avatar fallback=\"C\" /></AvatarGroup>"
+          },
+          {
+            "title": "With max",
+            "code": "<AvatarGroup max={3}>{users.map((u) => <Avatar key={u.id} src={u.src} alt={u.name} />)}</AvatarGroup>"
+          },
+          {
+            "title": "Grid",
+            "code": "<AvatarGroup isGrid max={8}>{avatars}</AvatarGroup>"
+          }
+        ],
+        "dependencies": ["@cascivo/core", "@cascivo/components"],
+        "tags": ["avatar", "group", "stack", "overflow", "display"],
+        "intent": {
+          "whenToUse": [
+            "Showing several people compactly as an overlapping stack (collaborators, attendees, reviewers)",
+            "Capping a long list of avatars with a +N overflow chip",
+            "A facepile in a card header, table cell, or activity row"
+          ],
+          "whenNotToUse": [
+            "A single identity with a name — use User or Avatar",
+            "A selectable list of people — use a list/menu with checkboxes"
+          ],
+          "antiPatterns": [
+            {
+              "bad": "<AvatarGroup>{hundredsOfAvatars}</AvatarGroup> with no max",
+              "good": "<AvatarGroup max={5} total={120}>{avatars}</AvatarGroup>",
+              "why": "Without a max the row grows unbounded; a cap plus total keeps it compact and accurate"
+            }
+          ],
+          "related": [
+            {
+              "name": "Avatar",
+              "relationship": "contains",
+              "reason": "AvatarGroup arranges Avatar children and adds an overflow chip"
+            },
+            {
+              "name": "User",
+              "relationship": "alternative",
+              "reason": "Use User for a single labelled identity row"
+            }
+          ],
+          "a11yRationale": "The stack is a labelled group; the +N chip carries an i18n-defaulted aria-label (\"{count} more\") so the hidden count is announced, not conveyed by the chip text alone",
+          "flexibility": [
+            {
+              "area": "spacing",
+              "level": "flexible",
+              "note": "Pick the overlap that fits the surrounding density"
+            },
+            {
+              "area": "overflow label",
+              "level": "strict",
+              "note": "The +N label must come from i18n (builtin.avatarGroup.more or a labels override)"
+            }
+          ]
+        }
+      }
+    },
     {
       "name": "badge",
       "type": "component",
@@ -581,11 +827,32 @@
           }
         ],
         "tokens": [
+          "--cascivo-font-sans",
+          "--cascivo-font-medium",
+          "--cascivo-radius-badge",
+          "--cascivo-space-1",
+          "--cascivo-space-2",
+          "--cascivo-space-3",
+          "--cascivo-text-xs",
+          "--cascivo-leading-normal",
           "--cascivo-color-accent",
-          "--cascivo-color-success",
-          "--cascivo-color-warning",
-          "--cascivo-color-destructive",
-          "--cascivo-radius-badge"
+          "--cascivo-color-text-on-accent",
+          "--cascivo-color-bg-subtle",
+          "--cascivo-color-text",
+          "--cascivo-color-border",
+          "--cascivo-color-border-strong",
+          "--cascivo-color-success-subtle",
+          "--cascivo-color-success-foreground",
+          "--cascivo-color-warning-subtle",
+          "--cascivo-color-warning-foreground",
+          "--cascivo-color-destructive-subtle",
+          "--cascivo-color-destructive-foreground",
+          "--cascivo-color-primary",
+          "--cascivo-color-primary-content",
+          "--cascivo-color-info",
+          "--cascivo-color-info-content",
+          "--cascivo-color-error",
+          "--cascivo-color-error-content"
         ],
         "accessibility": {
           "role": "status",
@@ -920,7 +1187,8 @@
           "--cascivo-color-text-on-accent",
           "--cascivo-color-destructive",
           "--cascivo-radius-button",
-          "--cascivo-focus-ring"
+          "--cascivo-focus-ring",
+          "--cascivo-disabled-opacity"
         ],
         "accessibility": {
           "role": "button",
@@ -2015,7 +2283,7 @@
     {
       "name": "code-snippet",
       "type": "component",
-      "description": "Displays code (inline, single-line, or multi-line) with an optional copy button; no syntax highlighting",
+      "description": "Displays code (inline, single-line, or multi-line) with an optional copy button, lightweight built-in syntax highlighting for bash/css/js/ts, and an optional terminal-window look",
       "category": "display",
       "version": "0.0.0",
       "files": [
@@ -2023,10 +2291,22 @@
         "https://raw.githubusercontent.com/urbanisierung/cascivo/main/packages/components/src/code-snippet/code-snippet.module.css"
       ],
       "dependencies": ["@cascivo/core", "@cascivo/i18n"],
-      "tags": ["display", "code", "snippet", "copy", "pre"],
+      "tags": [
+        "display",
+        "code",
+        "snippet",
+        "copy",
+        "pre",
+        "syntax-highlighting",
+        "terminal",
+        "bash",
+        "css",
+        "js",
+        "ts"
+      ],
       "meta": {
         "name": "CodeSnippet",
-        "description": "Displays code (inline, single-line, or multi-line) with an optional copy button; no syntax highlighting",
+        "description": "Displays code (inline, single-line, or multi-line) with an optional copy button, lightweight built-in syntax highlighting for bash/css/js/ts, and an optional terminal-window look",
         "category": "display",
         "states": ["idle", "copied"],
         "variants": ["inline", "single", "multi"],
@@ -2049,7 +2329,19 @@
         },
         "examples": [],
         "dependencies": ["@cascivo/core", "@cascivo/i18n"],
-        "tags": ["display", "code", "snippet", "copy", "pre"],
+        "tags": [
+          "display",
+          "code",
+          "snippet",
+          "copy",
+          "pre",
+          "syntax-highlighting",
+          "terminal",
+          "bash",
+          "css",
+          "js",
+          "ts"
+        ],
         "intent": {
           "whenToUse": [
             "Showing a command, token, or path the user is expected to copy",
@@ -2058,7 +2350,7 @@
           ],
           "whenNotToUse": [
             "An editable code input — use a textarea or code editor",
-            "Long files needing syntax highlighting and folding — use a dedicated viewer"
+            "Whole source files needing folding, diagnostics, or many languages — use a dedicated viewer; the built-in highlighter is a presentational scan for bash/css/js/ts only"
           ],
           "antiPatterns": [
             {
@@ -2707,6 +2999,159 @@
         }
       }
     },
+    {
+      "name": "comparison",
+      "type": "component",
+      "description": "Reveals the difference between two layers with a draggable divider",
+      "category": "display",
+      "version": "0.0.0",
+      "files": [
+        "https://raw.githubusercontent.com/urbanisierung/cascivo/main/packages/components/src/comparison/comparison.tsx",
+        "https://raw.githubusercontent.com/urbanisierung/cascivo/main/packages/components/src/comparison/comparison.module.css"
+      ],
+      "dependencies": ["@cascivo/core", "@cascivo/i18n"],
+      "tags": ["comparison", "before-after", "image", "slider", "display"],
+      "meta": {
+        "name": "Comparison",
+        "description": "Reveals the difference between two layers with a draggable divider",
+        "category": "display",
+        "states": ["default"],
+        "variants": [],
+        "sizes": [],
+        "props": [
+          {
+            "name": "after",
+            "type": "ReactNode",
+            "required": true,
+            "description": "Base layer shown underneath"
+          },
+          {
+            "name": "before",
+            "type": "ReactNode",
+            "required": true,
+            "description": "Top layer revealed up to the divider"
+          },
+          {
+            "name": "position",
+            "type": "number",
+            "required": false,
+            "description": "Divider position 0–100 (controlled)"
+          },
+          {
+            "name": "defaultPosition",
+            "type": "number",
+            "required": false,
+            "default": "50"
+          },
+          {
+            "name": "onPositionChange",
+            "type": "(position: number) => void",
+            "required": false
+          },
+          {
+            "name": "orientation",
+            "type": "'horizontal' | 'vertical'",
+            "required": false,
+            "default": "horizontal"
+          },
+          {
+            "name": "keyboardStep",
+            "type": "number",
+            "required": false,
+            "default": "5"
+          },
+          {
+            "name": "label",
+            "type": "string",
+            "required": false
+          }
+        ],
+        "tokens": [
+          "--cascivo-radius-md",
+          "--cascivo-radius-full",
+          "--cascivo-color-surface",
+          "--cascivo-color-border",
+          "--cascivo-color-focus-ring",
+          "--cascivo-shadow-sm",
+          "--cascivo-target-min-coarse"
+        ],
+        "accessibility": {
+          "role": "slider",
+          "wcag": "2.2-AA",
+          "keyboard": [
+            "ArrowLeft",
+            "ArrowRight",
+            "ArrowUp",
+            "ArrowDown",
+            "Home",
+            "End",
+            "PageUp",
+            "PageDown"
+          ],
+          "apgPattern": "slider"
+        },
+        "examples": [
+          {
+            "title": "Image before/after",
+            "code": "<Comparison before={<img src=\"/edited.jpg\" alt=\"\" />} after={<img src=\"/original.jpg\" alt=\"Original\" />} label=\"Reveal edited image\" />"
+          },
+          {
+            "title": "Vertical",
+            "code": "<Comparison orientation=\"vertical\" before={<Before />} after={<After />} />"
+          },
+          {
+            "title": "Controlled",
+            "code": "<Comparison position={position} onPositionChange={setPosition} before={<Before />} after={<After />} />"
+          }
+        ],
+        "dependencies": ["@cascivo/core", "@cascivo/i18n"],
+        "tags": ["comparison", "before-after", "image", "slider", "display"],
+        "intent": {
+          "whenToUse": [
+            "Showing the difference between two versions of similar content (before/after edits, original vs processed)",
+            "Letting users interactively reveal one image or panel over another",
+            "Side-by-side visual demos where a draggable divider is clearer than two static images"
+          ],
+          "whenNotToUse": [
+            "Comparing more than two items — use a layout or table instead",
+            "Non-visual data comparison — use a table or chart",
+            "Static side-by-side images with no need for an interactive reveal"
+          ],
+          "antiPatterns": [
+            {
+              "bad": "<Comparison before={<Before />} after={<After />} /> with no label",
+              "good": "<Comparison label=\"Reveal edited photo\" before={<Before />} after={<After />} />",
+              "why": "The divider is a slider; without a label assistive tech announces an unnamed control"
+            }
+          ],
+          "related": [
+            {
+              "name": "Slider",
+              "relationship": "alternative",
+              "reason": "Use Slider for selecting a numeric value rather than revealing layered content"
+            },
+            {
+              "name": "Carousel",
+              "relationship": "alternative",
+              "reason": "Use Carousel to step through more than two pieces of content"
+            }
+          ],
+          "a11yRationale": "The divider is a role=\"slider\" with aria-valuemin/max/now and full keyboard support (Arrow/Home/End/PageUp/PageDown); aria-orientation reflects the axis so the value and direction are conveyed without sight",
+          "flexibility": [
+            {
+              "area": "orientation",
+              "level": "flexible",
+              "note": "Horizontal or vertical depending on the content"
+            },
+            {
+              "area": "label",
+              "level": "strict",
+              "note": "Provide a label (or rely on the i18n default) so the slider is named"
+            }
+          ]
+        }
+      }
+    },
     {
       "name": "contained-list",
       "type": "component",
@@ -5126,7 +5571,7 @@
           }
         ],
         "tokens": [
-          "--cascivo-font-sans",
+          "--cascivo-font-display",
           "--cascivo-font-semibold",
           "--cascivo-leading-tight",
           "--cascivo-tracking-tight",
@@ -5340,99 +5785,252 @@
             "name": "asChild",
             "type": "boolean",
             "required": false,
-            "default": "false"
+            "default": "false"
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "required": false,
+            "default": "false"
+          },
+          {
+            "name": "onClick",
+            "type": "React.MouseEventHandler<HTMLButtonElement>",
+            "required": false
+          }
+        ],
+        "tokens": [
+          "--cascivo-control-height-sm",
+          "--cascivo-control-height-md",
+          "--cascivo-control-height-lg",
+          "--cascivo-button-radius",
+          "--cascivo-radius-control",
+          "--cascivo-color-primary",
+          "--cascivo-color-primary-fg",
+          "--cascivo-color-bg-subtle",
+          "--cascivo-color-border",
+          "--cascivo-color-surface",
+          "--cascivo-focus-ring"
+        ],
+        "accessibility": {
+          "role": "button",
+          "wcag": "2.2-AA",
+          "keyboard": ["Enter", "Space"],
+          "apgPattern": "button",
+          "forcedColors": true
+        },
+        "examples": [
+          {
+            "title": "Ghost",
+            "code": "<IconButton label=\"Settings\"><GearIcon /></IconButton>"
+          },
+          {
+            "title": "Filled",
+            "code": "<IconButton label=\"Add\" variant=\"filled\" icon={<PlusIcon />} />"
+          },
+          {
+            "title": "As link",
+            "code": "<IconButton label=\"Home\" asChild><a href=\"/\"><HomeIcon /></a></IconButton>"
+          }
+        ],
+        "dependencies": ["@cascivo/core"],
+        "tags": ["action", "icon", "compact", "toolbar"],
+        "intent": {
+          "whenToUse": [
+            "A compact, recognizable action where an icon alone communicates intent (close, edit, more)",
+            "Dense toolbars or table rows where a text label would not fit"
+          ],
+          "whenNotToUse": [
+            "The action is not universally recognizable by its icon — use a Button with a text label",
+            "Navigating between pages — use an anchor (optionally via asChild)"
+          ],
+          "antiPatterns": [
+            {
+              "bad": "<IconButton label=\"\"><TrashIcon /></IconButton>",
+              "good": "<IconButton label=\"Delete item\"><TrashIcon /></IconButton>",
+              "why": "An icon-only control has no visible text, so the label prop is the only accessible name screen readers can announce"
+            }
+          ],
+          "related": [
+            {
+              "name": "Button",
+              "relationship": "alternative",
+              "reason": "Use a Button when the action needs a visible text label"
+            },
+            {
+              "name": "ButtonGroup",
+              "relationship": "contained-by",
+              "reason": "Icon buttons are commonly joined into a toolbar via ButtonGroup"
+            }
+          ],
+          "a11yRationale": "Renders a native <button> with a mandatory aria-label so the icon-only control always exposes an accessible name; focus, role, and Enter/Space activation come from the platform",
+          "content": {
+            "tone": "Imperative verb describing the action",
+            "notes": "The label is announced to screen readers; be specific (e.g. \"Delete item\", not \"Delete\")"
+          },
+          "flexibility": [
+            {
+              "area": "token names",
+              "level": "strict",
+              "note": "Sizing must resolve to --cascivo-control-height-* so it stays square and aligned with other controls"
+            },
+            {
+              "area": "icon choice",
+              "level": "flexible",
+              "note": "Any single icon node; consumer owns the icon set"
+            }
+          ]
+        }
+      }
+    },
+    {
+      "name": "image",
+      "type": "component",
+      "description": "Image with load state, blur-up placeholder, graceful fallback, and optional zoom",
+      "category": "display",
+      "version": "0.0.0",
+      "files": [
+        "https://raw.githubusercontent.com/urbanisierung/cascivo/main/packages/components/src/image/image.tsx",
+        "https://raw.githubusercontent.com/urbanisierung/cascivo/main/packages/components/src/image/image.module.css"
+      ],
+      "dependencies": ["@cascivo/core"],
+      "tags": ["image", "media", "display", "loading"],
+      "meta": {
+        "name": "Image",
+        "description": "Image with load state, blur-up placeholder, graceful fallback, and optional zoom",
+        "category": "display",
+        "states": ["loading", "loaded", "error"],
+        "variants": [],
+        "sizes": [],
+        "props": [
+          {
+            "name": "src",
+            "type": "string",
+            "required": false
+          },
+          {
+            "name": "alt",
+            "type": "string",
+            "required": false
+          },
+          {
+            "name": "fallbackSrc",
+            "type": "string",
+            "required": false,
+            "description": "Image shown if src fails to load"
+          },
+          {
+            "name": "width",
+            "type": "string | number",
+            "required": false
+          },
+          {
+            "name": "height",
+            "type": "string | number",
+            "required": false
+          },
+          {
+            "name": "radius",
+            "type": "'none' | 'sm' | 'md' | 'lg' | 'full'",
+            "required": false,
+            "default": "md"
+          },
+          {
+            "name": "zoom",
+            "type": "boolean",
+            "required": false,
+            "default": "false"
+          },
+          {
+            "name": "removeWrapper",
+            "type": "boolean",
+            "required": false,
+            "default": "false",
+            "description": "Render a bare <img> with no wrapper, placeholder, or zoom"
           },
           {
-            "name": "disabled",
+            "name": "isBlurred",
             "type": "boolean",
             "required": false,
             "default": "false"
-          },
-          {
-            "name": "onClick",
-            "type": "React.MouseEventHandler<HTMLButtonElement>",
-            "required": false
           }
         ],
         "tokens": [
-          "--cascivo-control-height-sm",
-          "--cascivo-control-height-md",
-          "--cascivo-control-height-lg",
-          "--cascivo-button-radius",
-          "--cascivo-radius-control",
-          "--cascivo-color-primary",
-          "--cascivo-color-primary-fg",
+          "--cascivo-radius-none",
+          "--cascivo-radius-sm",
+          "--cascivo-radius-md",
+          "--cascivo-radius-lg",
+          "--cascivo-radius-full",
           "--cascivo-color-bg-subtle",
           "--cascivo-color-border",
-          "--cascivo-color-surface",
-          "--cascivo-focus-ring"
+          "--cascivo-space-12"
         ],
         "accessibility": {
-          "role": "button",
+          "role": "img",
           "wcag": "2.2-AA",
-          "keyboard": ["Enter", "Space"],
-          "apgPattern": "button",
-          "forcedColors": true
+          "keyboard": [],
+          "reducedMotion": true
         },
         "examples": [
           {
-            "title": "Ghost",
-            "code": "<IconButton label=\"Settings\"><GearIcon /></IconButton>"
+            "title": "Basic",
+            "code": "<Image src=\"/photo.jpg\" alt=\"A photo\" width={320} height={240} />"
           },
           {
-            "title": "Filled",
-            "code": "<IconButton label=\"Add\" variant=\"filled\" icon={<PlusIcon />} />"
+            "title": "With fallback",
+            "code": "<Image src=\"/broken.jpg\" fallbackSrc=\"/placeholder.jpg\" alt=\"A photo\" />"
           },
           {
-            "title": "As link",
-            "code": "<IconButton label=\"Home\" asChild><a href=\"/\"><HomeIcon /></a></IconButton>"
+            "title": "Blurred placeholder",
+            "code": "<Image src=\"/photo.jpg\" alt=\"A photo\" isBlurred />"
+          },
+          {
+            "title": "Hover zoom",
+            "code": "<Image src=\"/photo.jpg\" alt=\"A photo\" zoom />"
           }
         ],
         "dependencies": ["@cascivo/core"],
-        "tags": ["action", "icon", "compact", "toolbar"],
+        "tags": ["image", "media", "display", "loading"],
         "intent": {
           "whenToUse": [
-            "A compact, recognizable action where an icon alone communicates intent (close, edit, more)",
-            "Dense toolbars or table rows where a text label would not fit"
+            "Displaying a content image that should show a placeholder while loading and degrade gracefully on error",
+            "Photos, thumbnails, or media that benefit from a blur-up placeholder or hover zoom",
+            "Any image where a broken src should fall back rather than show a broken-image icon"
           ],
           "whenNotToUse": [
-            "The action is not universally recognizable by its icon — use a Button with a text label",
-            "Navigating between pages — use an anchor (optionally via asChild)"
+            "Identity thumbnails for a person or entity — use Avatar",
+            "Purely decorative shapes or a fixed-ratio layout box with no load behavior — use AspectRatio"
           ],
           "antiPatterns": [
             {
-              "bad": "<IconButton label=\"\"><TrashIcon /></IconButton>",
-              "good": "<IconButton label=\"Delete item\"><TrashIcon /></IconButton>",
-              "why": "An icon-only control has no visible text, so the label prop is the only accessible name screen readers can announce"
+              "bad": "<Image src=\"/photo.jpg\" /> with no alt",
+              "good": "<Image src=\"/photo.jpg\" alt=\"Sunset over the bay\" />",
+              "why": "Without alt the image is invisible to assistive tech; pass an empty alt only for decorative images"
             }
           ],
           "related": [
             {
-              "name": "Button",
+              "name": "Avatar",
               "relationship": "alternative",
-              "reason": "Use a Button when the action needs a visible text label"
+              "reason": "Use Avatar for identity thumbnails with an initials fallback"
             },
             {
-              "name": "ButtonGroup",
-              "relationship": "contained-by",
-              "reason": "Icon buttons are commonly joined into a toolbar via ButtonGroup"
+              "name": "AspectRatio",
+              "relationship": "alternative",
+              "reason": "Use AspectRatio for a ratio box that does not own image load behavior"
             }
           ],
-          "a11yRationale": "Renders a native <button> with a mandatory aria-label so the icon-only control always exposes an accessible name; focus, role, and Enter/Space activation come from the platform",
-          "content": {
-            "tone": "Imperative verb describing the action",
-            "notes": "The label is announced to screen readers; be specific (e.g. \"Delete item\", not \"Delete\")"
-          },
+          "a11yRationale": "role=\"img\" with alt names the image; on error it shows a fallback image or neutral box so layout survives; the blur-up and zoom transitions are disabled under prefers-reduced-motion",
           "flexibility": [
             {
-              "area": "token names",
-              "level": "strict",
-              "note": "Sizing must resolve to --cascivo-control-height-* so it stays square and aligned with other controls"
+              "area": "radius",
+              "level": "flexible",
+              "note": "Pick the corner radius that matches the surrounding surface"
             },
             {
-              "area": "icon choice",
-              "level": "flexible",
-              "note": "Any single icon node; consumer owns the icon set"
+              "area": "token names",
+              "level": "strict",
+              "note": "Radius and placeholder colors must resolve to --cascivo-* tokens"
             }
           ]
         }
@@ -6994,6 +7592,13 @@
             "type": "'sm' | 'md' | 'lg'",
             "required": false,
             "default": "md"
+          },
+          {
+            "name": "draggable",
+            "type": "boolean",
+            "required": false,
+            "default": "false",
+            "description": "Allow dragging the dialog by its header"
           }
         ],
         "tokens": [
@@ -8961,6 +9566,131 @@
         }
       }
     },
+    {
+      "name": "qr-code",
+      "type": "component",
+      "description": "Encodes a URL or short text into a scannable SVG QR code",
+      "category": "display",
+      "version": "0.0.0",
+      "files": [
+        "https://raw.githubusercontent.com/urbanisierung/cascivo/main/packages/components/src/qr-code/qr-code.tsx",
+        "https://raw.githubusercontent.com/urbanisierung/cascivo/main/packages/components/src/qr-code/qr-code.module.css"
+      ],
+      "dependencies": ["@cascivo/core", "@cascivo/i18n"],
+      "tags": ["qr", "qr-code", "barcode", "encode", "display"],
+      "meta": {
+        "name": "QrCode",
+        "description": "Encodes a URL or short text into a scannable SVG QR code",
+        "category": "display",
+        "states": ["default"],
+        "variants": [],
+        "sizes": [],
+        "props": [
+          {
+            "name": "value",
+            "type": "string",
+            "required": true,
+            "description": "Text or URL to encode"
+          },
+          {
+            "name": "size",
+            "type": "number",
+            "required": false,
+            "default": "128"
+          },
+          {
+            "name": "errorCorrection",
+            "type": "'L' | 'M' | 'Q' | 'H'",
+            "required": false,
+            "default": "M",
+            "description": "Higher levels tolerate more damage but hold less data"
+          },
+          {
+            "name": "radius",
+            "type": "string",
+            "required": false,
+            "description": "CSS length rounding the corners"
+          },
+          {
+            "name": "fill",
+            "type": "string",
+            "required": false,
+            "default": "currentColor"
+          },
+          {
+            "name": "background",
+            "type": "string",
+            "required": false,
+            "default": "transparent"
+          },
+          {
+            "name": "label",
+            "type": "string",
+            "required": false
+          }
+        ],
+        "tokens": ["--cascivo-color-text"],
+        "accessibility": {
+          "role": "img",
+          "wcag": "2.2-AA",
+          "keyboard": []
+        },
+        "examples": [
+          {
+            "title": "URL",
+            "code": "<QrCode value=\"https://cascivo.dev\" />"
+          },
+          {
+            "title": "High error correction",
+            "code": "<QrCode value=\"https://cascivo.dev\" errorCorrection=\"H\" size={200} />"
+          },
+          {
+            "title": "Custom colors",
+            "code": "<QrCode value=\"cascivo\" fill=\"var(--cascivo-color-accent)\" background=\"var(--cascivo-color-surface)\" />"
+          }
+        ],
+        "dependencies": ["@cascivo/core", "@cascivo/i18n"],
+        "tags": ["qr", "qr-code", "barcode", "encode", "display"],
+        "intent": {
+          "whenToUse": [
+            "Letting users scan a URL, contact, or short token with a phone camera",
+            "Bridging print or screen to a digital destination",
+            "Sharing a link where typing it would be error-prone"
+          ],
+          "whenNotToUse": [
+            "Encoding long or sensitive payloads — QR codes are public and capacity-limited",
+            "Where a plain, copyable link or button is more accessible"
+          ],
+          "antiPatterns": [
+            {
+              "bad": "<QrCode value={veryLongString} />",
+              "good": "<QrCode value=\"https://cascivo.dev/s/abc\" />",
+              "why": "Long payloads force a dense, hard-to-scan code; encode a short URL that redirects instead"
+            }
+          ],
+          "related": [
+            {
+              "name": "CopyButton",
+              "relationship": "pairs-with",
+              "reason": "Offer a copyable link alongside the QR code for non-camera contexts"
+            }
+          ],
+          "a11yRationale": "Rendered as role=\"img\" with an accessible label so screen-reader users know a QR code is present; the underlying link should also be available as text since a QR code is not operable by assistive tech",
+          "flexibility": [
+            {
+              "area": "errorCorrection",
+              "level": "flexible",
+              "note": "Raise to Q/H when the code may be printed small or partially obscured"
+            },
+            {
+              "area": "colors",
+              "level": "flexible",
+              "note": "Defaults to currentColor; keep sufficient contrast between fill and background to stay scannable"
+            }
+          ]
+        }
+      }
+    },
     {
       "name": "radial-progress",
       "type": "component",
@@ -9377,83 +10107,188 @@
             "name": "disabled",
             "type": "boolean",
             "required": false,
-            "default": "false"
+            "default": "false"
+          },
+          {
+            "name": "readOnly",
+            "type": "boolean",
+            "required": false,
+            "default": "false"
+          },
+          {
+            "name": "labels",
+            "type": "RatingGroupLabels",
+            "required": false
+          }
+        ],
+        "tokens": [
+          "--cascivo-color-warning",
+          "--cascivo-color-border-strong",
+          "--cascivo-color-accent",
+          "--cascivo-radius-sm"
+        ],
+        "accessibility": {
+          "role": "radiogroup",
+          "wcag": "2.2-AA",
+          "keyboard": ["Tab", "Space", "Enter"]
+        },
+        "examples": [
+          {
+            "title": "Basic",
+            "code": "<RatingGroup value={3} onValueChange={() => {}} />"
+          },
+          {
+            "title": "Read only",
+            "code": "<RatingGroup value={4} readOnly />"
+          }
+        ],
+        "dependencies": ["@cascivo/core"],
+        "tags": ["form", "rating", "stars", "input", "feedback"],
+        "intent": {
+          "whenToUse": [
+            "Capturing a discrete subjective rating on a small fixed scale (e.g. 1–5 stars)",
+            "Displaying an existing rating read-only as a compact star summary"
+          ],
+          "whenNotToUse": [
+            "Choosing along a continuous or large numeric range — use Slider",
+            "Entering an exact bounded number with steppers — use NumberInput",
+            "A non-rating single choice among labeled options — use Radio or SegmentedControl"
+          ],
+          "antiPatterns": [
+            {
+              "bad": "<Slider min={1} max={5} step={1} /> labeled as a star rating",
+              "good": "<RatingGroup value={rating} onValueChange={setRating} />",
+              "why": "A slider communicates a continuous magnitude; RatingGroup uses radio semantics so each star is an exclusive discrete choice announced as \"N of M stars\""
+            }
+          ],
+          "related": [
+            {
+              "name": "Slider",
+              "relationship": "alternative",
+              "reason": "Use for continuous or larger numeric ranges"
+            },
+            {
+              "name": "NumberInput",
+              "relationship": "alternative",
+              "reason": "Use when an exact typed number is needed rather than a rating"
+            }
+          ],
+          "a11yRationale": "Each star is a <button role=\"radio\"> inside a role=\"radiogroup\" with aria-checked on the selected value and an aria-label like \"3 of 5 stars\"; when readOnly or disabled the stars drop out of the tab order so a non-interactive rating is not announced as actionable.",
+          "flexibility": [
+            {
+              "area": "token names",
+              "level": "strict",
+              "note": "Star styling must resolve to the listed --cascivo-* tokens"
+            },
+            {
+              "area": "scale and labels",
+              "level": "flexible",
+              "note": "max sets the scale and labels.rating customizes the per-star announcement"
+            }
+          ]
+        }
+      }
+    },
+    {
+      "name": "relative-time",
+      "type": "component",
+      "description": "Displays a date as a localized phrase relative to now, auto-updating",
+      "category": "display",
+      "version": "0.0.0",
+      "files": [
+        "https://raw.githubusercontent.com/urbanisierung/cascivo/main/packages/components/src/relative-time/relative-time.tsx",
+        "https://raw.githubusercontent.com/urbanisierung/cascivo/main/packages/components/src/relative-time/relative-time.module.css"
+      ],
+      "dependencies": ["@cascivo/core", "@cascivo/i18n"],
+      "tags": ["time", "date", "relative", "i18n", "display"],
+      "meta": {
+        "name": "RelativeTime",
+        "description": "Displays a date as a localized phrase relative to now, auto-updating",
+        "category": "display",
+        "states": ["default"],
+        "variants": [],
+        "sizes": [],
+        "props": [
+          {
+            "name": "date",
+            "type": "Date | number | string",
+            "required": true
+          },
+          {
+            "name": "sync",
+            "type": "boolean",
+            "required": false,
+            "default": "true"
           },
           {
-            "name": "readOnly",
-            "type": "boolean",
+            "name": "now",
+            "type": "number",
             "required": false,
-            "default": "false"
+            "description": "Override \"now\" (ms); disables the interval"
           },
           {
-            "name": "labels",
-            "type": "RatingGroupLabels",
+            "name": "format",
+            "type": "Intl.RelativeTimeFormatOptions",
             "required": false
           }
         ],
-        "tokens": [
-          "--cascivo-color-warning",
-          "--cascivo-color-border-strong",
-          "--cascivo-color-accent",
-          "--cascivo-radius-sm"
-        ],
+        "tokens": [],
         "accessibility": {
-          "role": "radiogroup",
+          "role": "time",
           "wcag": "2.2-AA",
-          "keyboard": ["Tab", "Space", "Enter"]
+          "keyboard": []
         },
         "examples": [
           {
             "title": "Basic",
-            "code": "<RatingGroup value={3} onValueChange={() => {}} />"
+            "code": "<RelativeTime date={post.createdAt} />"
           },
           {
-            "title": "Read only",
-            "code": "<RatingGroup value={4} readOnly />"
+            "title": "Natural language",
+            "code": "<RelativeTime date={date} format={{ numeric: \"auto\" }} />"
+          },
+          {
+            "title": "Static (no ticking)",
+            "code": "<RelativeTime date={date} sync={false} />"
           }
         ],
-        "dependencies": ["@cascivo/core"],
-        "tags": ["form", "rating", "stars", "input", "feedback"],
+        "dependencies": ["@cascivo/core", "@cascivo/i18n"],
+        "tags": ["time", "date", "relative", "i18n", "display"],
         "intent": {
           "whenToUse": [
-            "Capturing a discrete subjective rating on a small fixed scale (e.g. 1–5 stars)",
-            "Displaying an existing rating read-only as a compact star summary"
+            "Showing how long ago something happened in human terms (\"3 minutes ago\")",
+            "Timestamps in feeds, comments, and activity logs where recency matters more than precision",
+            "Anywhere a self-updating relative time is friendlier than an absolute date"
           ],
           "whenNotToUse": [
-            "Choosing along a continuous or large numeric range — use Slider",
-            "Entering an exact bounded number with steppers — use NumberInput",
-            "A non-rating single choice among labeled options — use Radio or SegmentedControl"
+            "Precise timestamps in tables or audit logs — use formatDate for an exact, sortable value",
+            "Dates far in the past/future where \"2 years ago\" is less useful than the actual date"
           ],
           "antiPatterns": [
             {
-              "bad": "<Slider min={1} max={5} step={1} /> labeled as a star rating",
-              "good": "<RatingGroup value={rating} onValueChange={setRating} />",
-              "why": "A slider communicates a continuous magnitude; RatingGroup uses radio semantics so each star is an exclusive discrete choice announced as \"N of M stars\""
+              "bad": "<RelativeTime date={date} /> as the only representation of a legal/audit timestamp",
+              "good": "<time>{formatDate(date)}</time> for exact records; RelativeTime for casual recency",
+              "why": "Relative phrases lose precision; the exact date belongs in records (RelativeTime still exposes it via title/datetime)"
             }
           ],
           "related": [
             {
-              "name": "Slider",
-              "relationship": "alternative",
-              "reason": "Use for continuous or larger numeric ranges"
-            },
-            {
-              "name": "NumberInput",
-              "relationship": "alternative",
-              "reason": "Use when an exact typed number is needed rather than a rating"
+              "name": "Stat",
+              "relationship": "pairs-with",
+              "reason": "Use alongside Stat to timestamp a metric’s last update"
             }
           ],
-          "a11yRationale": "Each star is a <button role=\"radio\"> inside a role=\"radiogroup\" with aria-checked on the selected value and an aria-label like \"3 of 5 stars\"; when readOnly or disabled the stars drop out of the tab order so a non-interactive rating is not announced as actionable.",
+          "a11yRationale": "Renders a native <time> element with a machine-readable datetime and the absolute date in the title, so the precise instant is available even though the visible text is relative",
           "flexibility": [
             {
-              "area": "token names",
-              "level": "strict",
-              "note": "Star styling must resolve to the listed --cascivo-* tokens"
+              "area": "format",
+              "level": "flexible",
+              "note": "Pass Intl.RelativeTimeFormat options (e.g. numeric: \"auto\") to tune the wording"
             },
             {
-              "area": "scale and labels",
+              "area": "sync",
               "level": "flexible",
-              "note": "max sets the scale and labels.rating customizes the per-star announcement"
+              "note": "Disable ticking for static contexts or long-past dates"
             }
           ]
         }
@@ -9625,6 +10460,13 @@
             "default": "vertical",
             "description": "Which axes may scroll"
           },
+          {
+            "name": "edges",
+            "type": "'shadow' | 'mask' | 'none'",
+            "required": false,
+            "default": "shadow",
+            "description": "Edge affordance: box-shadow, a mask-image fade, or none"
+          },
           {
             "name": "children",
             "type": "ReactNode",
@@ -12934,6 +13776,127 @@
         }
       }
     },
+    {
+      "name": "toc",
+      "type": "component",
+      "description": "Table of contents with scroll-spy highlighting of the active section",
+      "category": "navigation",
+      "version": "0.0.0",
+      "files": [
+        "https://raw.githubusercontent.com/urbanisierung/cascivo/main/packages/components/src/toc/toc.tsx",
+        "https://raw.githubusercontent.com/urbanisierung/cascivo/main/packages/components/src/toc/toc.module.css"
+      ],
+      "dependencies": ["@cascivo/core", "@cascivo/i18n"],
+      "tags": ["toc", "table-of-contents", "navigation", "scroll-spy", "anchor"],
+      "meta": {
+        "name": "Toc",
+        "description": "Table of contents with scroll-spy highlighting of the active section",
+        "category": "navigation",
+        "states": [],
+        "variants": [],
+        "sizes": [],
+        "props": [
+          {
+            "name": "items",
+            "type": "{ id: string; label: string; level?: number }[]",
+            "required": true
+          },
+          {
+            "name": "activeId",
+            "type": "string",
+            "required": false,
+            "description": "Controlled active item id; disables built-in scroll-spy when set"
+          },
+          {
+            "name": "onActiveChange",
+            "type": "(id: string) => void",
+            "required": false
+          },
+          {
+            "name": "labels",
+            "type": "{ nav?: string }",
+            "required": false
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "required": false
+          }
+        ],
+        "tokens": [
+          "--cascivo-font-sans",
+          "--cascivo-color-text",
+          "--cascivo-color-text-muted",
+          "--cascivo-color-accent",
+          "--cascivo-focus-ring",
+          "--cascivo-target-min-coarse"
+        ],
+        "accessibility": {
+          "role": "navigation",
+          "wcag": "2.2-AA",
+          "keyboard": ["Tab", "Enter"]
+        },
+        "examples": [
+          {
+            "title": "Basic",
+            "code": "<Toc items={[{ id: 'intro', label: 'Introduction' }, { id: 'usage', label: 'Usage' }, { id: 'api', label: 'API', level: 3 }]} />"
+          },
+          {
+            "title": "Controlled active item",
+            "code": "<Toc activeId=\"usage\" items={[{ id: 'intro', label: 'Introduction' }, { id: 'usage', label: 'Usage' }]} />",
+            "description": "Pass activeId to drive the highlight yourself; scroll-spy is disabled."
+          }
+        ],
+        "dependencies": ["@cascivo/core", "@cascivo/i18n"],
+        "tags": ["toc", "table-of-contents", "navigation", "scroll-spy", "anchor"],
+        "intent": {
+          "whenToUse": [
+            "Long-form pages (docs, articles) that benefit from in-page jump links",
+            "Highlighting which section is currently in view as the reader scrolls"
+          ],
+          "whenNotToUse": [
+            "Top-level site navigation between pages — use NavigationMenu or SideNav",
+            "Showing hierarchy depth of the current page — use Breadcrumb"
+          ],
+          "antiPatterns": [
+            {
+              "bad": "Using Toc as the primary site navigation between routes",
+              "good": "<NavigationMenu> / <SideNav> for cross-page navigation",
+              "why": "Toc links to sections within the current document, not to other pages"
+            }
+          ],
+          "related": [
+            {
+              "name": "SideNav",
+              "relationship": "alternative",
+              "reason": "SideNav navigates between pages; Toc navigates within one page"
+            },
+            {
+              "name": "Breadcrumb",
+              "relationship": "alternative",
+              "reason": "Breadcrumb shows ancestor hierarchy; Toc shows in-page sections"
+            }
+          ],
+          "a11yRationale": "Rendered as a <nav> landmark with a label; entries are real anchor links and the active one is marked aria-current=\"location\" so assistive tech announces the current section",
+          "content": {
+            "tone": "Short labels matching the section headings",
+            "notes": "Labels should mirror the on-page heading text"
+          },
+          "flexibility": [
+            {
+              "area": "activeId",
+              "level": "flexible",
+              "note": "Control the highlight externally, or omit it for built-in scroll-spy"
+            },
+            {
+              "area": "token names",
+              "level": "strict",
+              "note": "Colors, focus ring, and touch target must resolve to --cascivo-* tokens"
+            }
+          ]
+        }
+      }
+    },
     {
       "name": "toggle",
       "type": "component",
@@ -13646,6 +14609,112 @@
         }
       }
     },
+    {
+      "name": "user",
+      "type": "component",
+      "description": "Identity composite: an avatar with a name, description, and optional action slot",
+      "category": "display",
+      "version": "0.0.0",
+      "files": [
+        "https://raw.githubusercontent.com/urbanisierung/cascivo/main/packages/components/src/user/user.tsx",
+        "https://raw.githubusercontent.com/urbanisierung/cascivo/main/packages/components/src/user/user.module.css"
+      ],
+      "dependencies": ["@cascivo/core", "@cascivo/components"],
+      "tags": ["user", "avatar", "identity", "display"],
+      "meta": {
+        "name": "User",
+        "description": "Identity composite: an avatar with a name, description, and optional action slot",
+        "category": "display",
+        "states": ["default"],
+        "variants": [],
+        "sizes": [],
+        "props": [
+          {
+            "name": "name",
+            "type": "ReactNode",
+            "required": true
+          },
+          {
+            "name": "description",
+            "type": "ReactNode",
+            "required": false
+          },
+          {
+            "name": "avatarProps",
+            "type": "AvatarProps",
+            "required": false,
+            "description": "Forwarded to the composed <Avatar>"
+          }
+        ],
+        "tokens": [
+          "--cascivo-color-text",
+          "--cascivo-color-text-muted",
+          "--cascivo-space-3",
+          "--cascivo-text-sm",
+          "--cascivo-text-xs"
+        ],
+        "accessibility": {
+          "role": "group",
+          "wcag": "2.2-AA",
+          "keyboard": []
+        },
+        "examples": [
+          {
+            "title": "Basic",
+            "code": "<User name=\"Jane Doe\" description=\"jane@acme.com\" avatarProps={{ src: \"/jane.jpg\", alt: \"Jane Doe\" }} />"
+          },
+          {
+            "title": "With action",
+            "code": "<User name=\"Jane Doe\" description=\"Admin\"><IconButton aria-label=\"More\" /></User>"
+          }
+        ],
+        "dependencies": ["@cascivo/core", "@cascivo/components"],
+        "tags": ["user", "avatar", "identity", "display"],
+        "intent": {
+          "whenToUse": [
+            "Showing a person with their name and a secondary line (email, role) next to an avatar",
+            "Identity rows inside menus, tables, navbars, and account switchers",
+            "A compact, labelled identity primitive too granular for a page-section block"
+          ],
+          "whenNotToUse": [
+            "Just an image with no name/description — use Avatar directly",
+            "A full profile card with rich content — compose a Card instead"
+          ],
+          "antiPatterns": [
+            {
+              "bad": "<User name=\"\" avatarProps={{ src: \"/jane.jpg\" }} />",
+              "good": "<User name=\"Jane Doe\" avatarProps={{ src: \"/jane.jpg\", alt: \"Jane Doe\" }} />",
+              "why": "The name is the accessible identity label; an empty name leaves the avatar unlabelled"
+            }
+          ],
+          "related": [
+            {
+              "name": "Avatar",
+              "relationship": "contains",
+              "reason": "User wraps Avatar and forwards avatarProps to it"
+            },
+            {
+              "name": "AvatarGroup",
+              "relationship": "alternative",
+              "reason": "Use AvatarGroup to show several identities as an overlapping stack"
+            }
+          ],
+          "a11yRationale": "The composite is a labelled group; the name provides the accessible identity and the avatar carries its own role=\"img\"/alt — no redundant roles",
+          "flexibility": [
+            {
+              "area": "description",
+              "level": "flexible",
+              "note": "Any ReactNode — email, role, or a status line"
+            },
+            {
+              "area": "token names",
+              "level": "strict",
+              "note": "Name and description colors must resolve to --cascivo-* tokens"
+            }
+          ]
+        }
+      }
+    },
     {
       "name": "visually-hidden",
       "type": "component",
@@ -18157,6 +19226,24 @@
         "dark": "/blocks/screenshots/dashboard-table-dark.png"
       }
     },
+    {
+      "name": "faq",
+      "type": "block",
+      "displayName": "FAQ Accordion",
+      "description": "Frequently-asked-questions section composed from the Accordion component, with a centered, readable measure.",
+      "category": "marketing",
+      "version": "0.0.0",
+      "files": [
+        "https://raw.githubusercontent.com/urbanisierung/cascivo/main/packages/components/src/blocks/faq/faq.tsx",
+        "https://raw.githubusercontent.com/urbanisierung/cascivo/main/packages/components/src/blocks/faq/faq.module.css"
+      ],
+      "dependencies": ["@cascivo/react"],
+      "tags": ["marketing", "faq", "accordion", "questions"],
+      "screenshot": {
+        "light": "/blocks/screenshots/faq-light.png",
+        "dark": "/blocks/screenshots/faq-dark.png"
+      }
+    },
     {
       "name": "marketing-features",
       "type": "block",
@@ -18193,6 +19280,24 @@
         "dark": "/blocks/screenshots/marketing-hero-dark.png"
       }
     },
+    {
+      "name": "pricing",
+      "type": "block",
+      "displayName": "Pricing Tiers",
+      "description": "Responsive three-tier pricing section composed from Card, Badge, and Button, with a highlighted featured plan.",
+      "category": "marketing",
+      "version": "0.0.0",
+      "files": [
+        "https://raw.githubusercontent.com/urbanisierung/cascivo/main/packages/components/src/blocks/pricing/pricing.tsx",
+        "https://raw.githubusercontent.com/urbanisierung/cascivo/main/packages/components/src/blocks/pricing/pricing.module.css"
+      ],
+      "dependencies": ["@cascivo/react"],
+      "tags": ["marketing", "pricing", "plans", "cards"],
+      "screenshot": {
+        "light": "/blocks/screenshots/pricing-light.png",
+        "dark": "/blocks/screenshots/pricing-dark.png"
+      }
+    },
     {
       "name": "settings-profile",
       "type": "block",
@@ -18210,6 +19315,42 @@
         "light": "/blocks/screenshots/settings-profile-light.png",
         "dark": "/blocks/screenshots/settings-profile-dark.png"
       }
+    },
+    {
+      "name": "site-footer",
+      "type": "block",
+      "displayName": "Site Footer",
+      "description": "Multi-column site footer composed from Link and Separator, with a brand blurb, link columns, and a legal row.",
+      "category": "marketing",
+      "version": "0.0.0",
+      "files": [
+        "https://raw.githubusercontent.com/urbanisierung/cascivo/main/packages/components/src/blocks/site-footer/site-footer.tsx",
+        "https://raw.githubusercontent.com/urbanisierung/cascivo/main/packages/components/src/blocks/site-footer/site-footer.module.css"
+      ],
+      "dependencies": ["@cascivo/react"],
+      "tags": ["marketing", "footer", "navigation", "links"],
+      "screenshot": {
+        "light": "/blocks/screenshots/site-footer-light.png",
+        "dark": "/blocks/screenshots/site-footer-dark.png"
+      }
+    },
+    {
+      "name": "testimonials",
+      "type": "block",
+      "displayName": "Testimonials",
+      "description": "Responsive testimonial grid composed from Card and Avatar, with a quote and attribution per card.",
+      "category": "marketing",
+      "version": "0.0.0",
+      "files": [
+        "https://raw.githubusercontent.com/urbanisierung/cascivo/main/packages/components/src/blocks/testimonials/testimonials.tsx",
+        "https://raw.githubusercontent.com/urbanisierung/cascivo/main/packages/components/src/blocks/testimonials/testimonials.module.css"
+      ],
+      "dependencies": ["@cascivo/react"],
+      "tags": ["marketing", "testimonials", "social-proof", "cards"],
+      "screenshot": {
+        "light": "/blocks/screenshots/testimonials-light.png",
+        "dark": "/blocks/screenshots/testimonials-dark.png"
+      }
     }
   ]
 }