canvas-ui-sdk 0.3.23 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvas-ui-sdk",
-  "version": "0.3.23",
+  "version": "4.0.0",
   "type": "module",
   "description": "A comprehensive UI component library with design tokens for building beautiful interfaces",
   "bin": {

package/prompts/.cursorrules

@@ -0,0 +1,96 @@
+# Canvas Consumer App
+
+This is a Next.js app that uses the Canvas UI SDK component library.
+
+## Adding Components
+
+This project uses a **shadcn-style CLI** to copy component source files from `canvas-ui-sdk` into the project for full customization.
+
+### Available commands
+
+```bash
+# See all available components (145 total: layouts, blocks, UI primitives, hooks)
+npx canvas-ui list
+
+# Copy components into the project (auto-resolves dependencies)
+npx canvas-ui add <component-name> [component-name...]
+
+# Examples:
+npx canvas-ui add button                 # Copies button + utils
+npx canvas-ui add dashboard-shell        # Copies shell + sidebar + header + 15 deps
+npx canvas-ui add standard-data-table    # Copies table + pagination + deps
+```
+
+### How it works
+
+- Components are copied as **editable source files** into `src/components/`
+- UI primitives go to `src/components/ui/`
+- Layout shells go to `src/components/layout/`
+- Block components go to `src/components/blocks/<category>/`
+- Hooks go to `src/hooks/`
+- Utilities go to `src/lib/`
+- Import paths use `@/` aliases (e.g. `@/components/ui/button`, `@/lib/utils`)
+- npm dependencies (like `@radix-ui/*`, `class-variance-authority`) are auto-installed
+
+### When building a page
+
+1. Decide which layout shell fits (run `npx canvas-ui list` to see options)
+2. Add the layout: `npx canvas-ui add <shell-name>`
+3. Add any blocks needed: `npx canvas-ui add <block-name> [block-name...]`
+4. Import components from their local paths (e.g. `import { Button } from "@/components/ui/button"`)
+5. Customize the copied source files as needed
+
+### What stays in the npm package (do NOT copy these)
+
+- Design tokens / CSS variables (`canvas-ui-sdk/styles`)
+- Tailwind theme mappings (`canvas-ui-sdk/tailwind`)
+- Theme context and providers (`canvas-ui-sdk`)
+
+These are imported directly from the npm package, not copied.
+
+## Design Tokens
+
+When creating or modifying components, always use the canvas design token CSS variables. Never use raw Tailwind color classes (`bg-white`, `text-gray-500`, `border-gray-200`) or hardcoded pixel values for font sizes. Use the token system instead:
+
+- **Colors**: `var(--canvas-background)`, `var(--canvas-text)`, `var(--canvas-primary)`, `var(--canvas-border)`, etc.
+- **Typography**: `var(--typo-body-s-size)`, `var(--typo-body-m-size)`, `var(--typo-h4-size)`, `var(--typo-global-font)`, etc.
+- **Spacing**: `var(--spacing-sm)`, `var(--spacing-md)`, `var(--spacing-lg)`, etc.
+- **Radii**: `var(--radius-xs)`, `var(--radius-sm)`, `var(--radius-md)`, etc.
+- **Inputs**: `var(--canvas-border-input)`, `var(--input-standard-height)`, `var(--input-standard-radius)`, etc.
+- **Buttons**: `var(--btn-primary-bg)`, `var(--btn-standard-height)`, etc.
+
+Reference the SDK's `styles/tokens.reference.css` for the full list of available tokens.
+
+## Design Best Practices
+
+- **Prefer SDK components over hand-rolled layouts** for common UI patterns (stats, metrics, reviews, profile cards, data tables). Always check `npx canvas-ui list` or the MCP `list_components` tool before writing custom markup — the SDK likely has a component that handles it with proper spacing, alignment, and responsive behavior built in.
+- **Numeric displays need visual structure** — never render large numbers in a bare flex row without containment. Use `StatsCard` for profile/sidebar stats, `MetricCardsRow` for dashboard KPIs with change indicators, or `MetricsSection` for marketing hero stats. If none fits exactly, at minimum wrap numbers in a card container with dividers or border separators.
+- **Use Typography for text** — use the `Typography` component with heading variants (`h4`–`h6`) for stat values and `body-s` muted for labels. Avoid raw `fontSize`/`fontWeight` inline styles when Typography already handles token-correct sizing, font family, and line height.
+- **Customize components, don't rebuild them** — when a component is close but not perfect for a use case, import it and make small modifications (remove the card wrapper via className, adjust padding, hide a section) rather than rebuilding from scratch. Components encode spacing, alignment, typography scale, and responsive breakpoints that are easy to get wrong when hand-rolling.
+- **Use the MCP `review_design` tool** before finalizing layouts — it checks for common anti-patterns like uncontained numbers, missing visual hierarchy, or hand-rolled patterns that have SDK component equivalents.
+- **Block-first for content sections** — before writing custom JSX for any content section, check if the SDK has a block for it. Common mappings: Reviews → `ReviewsTable`, Image galleries → `TileImageGallery`, Activity feeds → `ActivityFeed`, Chat → `BottomInputChatWidget`, Data listings → `StandardDataTable` / `GridTilesList`, FAQ → `FaqsTable`, Social feeds → `SocialFeed`, Calendar → `MonthlyCalendarWidget`, Comments → `NestedCommentsTable`. The SDK has 119 blocks — hand-rolling what already exists wastes time and produces worse results.
+- **Always provide images** — components that accept image props (`TileImageGallery`, `LoginBrandingPanel`, `HeroSection`, `ProfileCard`, `DestinationCards`, etc.) should always receive relevant images. First check if the user has saved brand assets in the ThemeDrawer's Images panel — if available, use those. Otherwise, use high-quality Unsplash images that match the content context. Never leave image props empty when the component has a visual placeholder or broken default.
+- **Choose the right data format** — use `GridTilesList` (tile cards with images) when each item has a prominent visual (property photos, product images, portfolio pieces). Use `StandardDataTable` (tabular rows) for text-heavy data like user lists, transactions, or logs. When items have large images, the tile format is always more appropriate than squeezing them into small row avatars.
+
+## CSS Setup
+
+The app's `src/app/globals.css` imports:
+```css
+@import "tailwindcss";
+@import "canvas-ui-sdk/tailwind";
+@import "canvas-ui-sdk/styles";
+@source "../../node_modules/canvas-ui-sdk/dist";
+```
+
+## Project Structure
+
+```
+src/
+  app/           # Next.js app router pages
+  components/    # Copied Canvas UI components (editable)
+    ui/          # Primitives (button, input, dialog, etc.)
+    layout/      # Layout shells (dashboard-shell, sidebar, etc.)
+    blocks/      # Feature blocks (data-tables, forms, cards, etc.)
+  hooks/         # Copied hooks
+  lib/           # Utilities (utils.ts with cn() helper)
+```

package/prompts/.windsurfrules

@@ -0,0 +1,96 @@
+# Canvas Consumer App
+
+This is a Next.js app that uses the Canvas UI SDK component library.
+
+## Adding Components
+
+This project uses a **shadcn-style CLI** to copy component source files from `canvas-ui-sdk` into the project for full customization.
+
+### Available commands
+
+```bash
+# See all available components (145 total: layouts, blocks, UI primitives, hooks)
+npx canvas-ui list
+
+# Copy components into the project (auto-resolves dependencies)
+npx canvas-ui add <component-name> [component-name...]
+
+# Examples:
+npx canvas-ui add button                 # Copies button + utils
+npx canvas-ui add dashboard-shell        # Copies shell + sidebar + header + 15 deps
+npx canvas-ui add standard-data-table    # Copies table + pagination + deps
+```
+
+### How it works
+
+- Components are copied as **editable source files** into `src/components/`
+- UI primitives go to `src/components/ui/`
+- Layout shells go to `src/components/layout/`
+- Block components go to `src/components/blocks/<category>/`
+- Hooks go to `src/hooks/`
+- Utilities go to `src/lib/`
+- Import paths use `@/` aliases (e.g. `@/components/ui/button`, `@/lib/utils`)
+- npm dependencies (like `@radix-ui/*`, `class-variance-authority`) are auto-installed
+
+### When building a page
+
+1. Decide which layout shell fits (run `npx canvas-ui list` to see options)
+2. Add the layout: `npx canvas-ui add <shell-name>`
+3. Add any blocks needed: `npx canvas-ui add <block-name> [block-name...]`
+4. Import components from their local paths (e.g. `import { Button } from "@/components/ui/button"`)
+5. Customize the copied source files as needed
+
+### What stays in the npm package (do NOT copy these)
+
+- Design tokens / CSS variables (`canvas-ui-sdk/styles`)
+- Tailwind theme mappings (`canvas-ui-sdk/tailwind`)
+- Theme context and providers (`canvas-ui-sdk`)
+
+These are imported directly from the npm package, not copied.
+
+## Design Tokens
+
+When creating or modifying components, always use the canvas design token CSS variables. Never use raw Tailwind color classes (`bg-white`, `text-gray-500`, `border-gray-200`) or hardcoded pixel values for font sizes. Use the token system instead:
+
+- **Colors**: `var(--canvas-background)`, `var(--canvas-text)`, `var(--canvas-primary)`, `var(--canvas-border)`, etc.
+- **Typography**: `var(--typo-body-s-size)`, `var(--typo-body-m-size)`, `var(--typo-h4-size)`, `var(--typo-global-font)`, etc.
+- **Spacing**: `var(--spacing-sm)`, `var(--spacing-md)`, `var(--spacing-lg)`, etc.
+- **Radii**: `var(--radius-xs)`, `var(--radius-sm)`, `var(--radius-md)`, etc.
+- **Inputs**: `var(--canvas-border-input)`, `var(--input-standard-height)`, `var(--input-standard-radius)`, etc.
+- **Buttons**: `var(--btn-primary-bg)`, `var(--btn-standard-height)`, etc.
+
+Reference the SDK's `styles/tokens.reference.css` for the full list of available tokens.
+
+## Design Best Practices
+
+- **Prefer SDK components over hand-rolled layouts** for common UI patterns (stats, metrics, reviews, profile cards, data tables). Always check `npx canvas-ui list` or the MCP `list_components` tool before writing custom markup — the SDK likely has a component that handles it with proper spacing, alignment, and responsive behavior built in.
+- **Numeric displays need visual structure** — never render large numbers in a bare flex row without containment. Use `StatsCard` for profile/sidebar stats, `MetricCardsRow` for dashboard KPIs with change indicators, or `MetricsSection` for marketing hero stats. If none fits exactly, at minimum wrap numbers in a card container with dividers or border separators.
+- **Use Typography for text** — use the `Typography` component with heading variants (`h4`–`h6`) for stat values and `body-s` muted for labels. Avoid raw `fontSize`/`fontWeight` inline styles when Typography already handles token-correct sizing, font family, and line height.
+- **Customize components, don't rebuild them** — when a component is close but not perfect for a use case, import it and make small modifications (remove the card wrapper via className, adjust padding, hide a section) rather than rebuilding from scratch. Components encode spacing, alignment, typography scale, and responsive breakpoints that are easy to get wrong when hand-rolling.
+- **Use the MCP `review_design` tool** before finalizing layouts — it checks for common anti-patterns like uncontained numbers, missing visual hierarchy, or hand-rolled patterns that have SDK component equivalents.
+- **Block-first for content sections** — before writing custom JSX for any content section, check if the SDK has a block for it. Common mappings: Reviews → `ReviewsTable`, Image galleries → `TileImageGallery`, Activity feeds → `ActivityFeed`, Chat → `BottomInputChatWidget`, Data listings → `StandardDataTable` / `GridTilesList`, FAQ → `FaqsTable`, Social feeds → `SocialFeed`, Calendar → `MonthlyCalendarWidget`, Comments → `NestedCommentsTable`. The SDK has 119 blocks — hand-rolling what already exists wastes time and produces worse results.
+- **Always provide images** — components that accept image props (`TileImageGallery`, `LoginBrandingPanel`, `HeroSection`, `ProfileCard`, `DestinationCards`, etc.) should always receive relevant images. First check if the user has saved brand assets in the ThemeDrawer's Images panel — if available, use those. Otherwise, use high-quality Unsplash images that match the content context. Never leave image props empty when the component has a visual placeholder or broken default.
+- **Choose the right data format** — use `GridTilesList` (tile cards with images) when each item has a prominent visual (property photos, product images, portfolio pieces). Use `StandardDataTable` (tabular rows) for text-heavy data like user lists, transactions, or logs. When items have large images, the tile format is always more appropriate than squeezing them into small row avatars.
+
+## CSS Setup
+
+The app's `src/app/globals.css` imports:
+```css
+@import "tailwindcss";
+@import "canvas-ui-sdk/tailwind";
+@import "canvas-ui-sdk/styles";
+@source "../../node_modules/canvas-ui-sdk/dist";
+```
+
+## Project Structure
+
+```
+src/
+  app/           # Next.js app router pages
+  components/    # Copied Canvas UI components (editable)
+    ui/          # Primitives (button, input, dialog, etc.)
+    layout/      # Layout shells (dashboard-shell, sidebar, etc.)
+    blocks/      # Feature blocks (data-tables, forms, cards, etc.)
+  hooks/         # Copied hooks
+  lib/           # Utilities (utils.ts with cn() helper)
+```

package/prompts/CLAUDE.md

@@ -32,6 +32,17 @@ npx canvas-ui add standard-data-table    # Copies table + pagination + deps
 - Import paths use `@/` aliases (e.g. `@/components/ui/button`, `@/lib/utils`)
 - npm dependencies (like `@radix-ui/*`, `class-variance-authority`) are auto-installed
 
+### Default Page Templates
+
+When building common app pages, use these Canvas base templates by default:
+- **Account settings / user preferences** → `page-account` (AccountSettingsShell)
+- **Admin portal / admin dashboard** → `page-admin-portal` (DashboardShell)
+- **Login** → `page-login` (split layout with LoginBrandingPanel)
+- **Signup** → `page-login` (same template, adjust form fields)
+- **Password reset** → `page-reset-password` (split layout)
+
+Only deviate from these defaults when the user explicitly specifies a different template, provides a reference design that significantly differs, or describes requirements incompatible with the base templates.
+
 ### When building a page
 
 1. Decide which layout shell fits (run `npx canvas-ui list` to see options)
@@ -61,6 +72,17 @@ When creating or modifying components, always use the canvas design token CSS va
 
 Reference the SDK's `styles/tokens.reference.css` for the full list of available tokens.
 
+## Design Best Practices
+
+- **Prefer SDK components over hand-rolled layouts** for common UI patterns (stats, metrics, reviews, profile cards, data tables). Always check `npx canvas-ui list` or the MCP `list_components` tool before writing custom markup — the SDK likely has a component that handles it with proper spacing, alignment, and responsive behavior built in.
+- **Numeric displays need visual structure** — never render large numbers in a bare flex row without containment. Use `StatsCard` for profile/sidebar stats, `MetricCardsRow` for dashboard KPIs with change indicators, or `MetricsSection` for marketing hero stats. If none fits exactly, at minimum wrap numbers in a card container with dividers or border separators.
+- **Use Typography for text** — use the `Typography` component with heading variants (`h4`–`h6`) for stat values and `body-s` muted for labels. Avoid raw `fontSize`/`fontWeight` inline styles when Typography already handles token-correct sizing, font family, and line height.
+- **Customize components, don't rebuild them** — when a component is close but not perfect for a use case, import it and make small modifications (remove the card wrapper via className, adjust padding, hide a section) rather than rebuilding from scratch. Components encode spacing, alignment, typography scale, and responsive breakpoints that are easy to get wrong when hand-rolling.
+- **Use the MCP `review_design` tool** before finalizing layouts — it checks for common anti-patterns like uncontained numbers, missing visual hierarchy, or hand-rolled patterns that have SDK component equivalents.
+- **Block-first for content sections** — before writing custom JSX for any content section, check if the SDK has a block for it. Common mappings: Reviews → `ReviewsTable`, Image galleries → `TileImageGallery`, Activity feeds → `ActivityFeed`, Chat → `BottomInputChatWidget`, Data listings → `StandardDataTable` / `GridTilesList`, FAQ → `FaqsTable`, Social feeds → `SocialFeed`, Calendar → `MonthlyCalendarWidget`, Comments → `NestedCommentsTable`. The SDK has 119 blocks — hand-rolling what already exists wastes time and produces worse results.
+- **Always provide images** — components that accept image props (`TileImageGallery`, `LoginBrandingPanel`, `HeroSection`, `ProfileCard`, `DestinationCards`, etc.) should always receive relevant images. First check if the user has saved brand assets in the ThemeDrawer's Images panel — if available, use those. Otherwise, use high-quality Unsplash images that match the content context. Never leave image props empty when the component has a visual placeholder or broken default.
+- **Choose the right data format** — use `GridTilesList` (tile cards with images) when each item has a prominent visual (property photos, product images, portfolio pieces). Use `StandardDataTable` (tabular rows) for text-heavy data like user lists, transactions, or logs. When items have large images, the tile format is always more appropriate than squeezing them into small row avatars.
+
 ## CSS Setup
 
 The app's `src/app/globals.css` imports:

package/prompts/copilot-instructions.md

@@ -0,0 +1,96 @@
+# Canvas Consumer App
+
+This is a Next.js app that uses the Canvas UI SDK component library.
+
+## Adding Components
+
+This project uses a **shadcn-style CLI** to copy component source files from `canvas-ui-sdk` into the project for full customization.
+
+### Available commands
+
+```bash
+# See all available components (145 total: layouts, blocks, UI primitives, hooks)
+npx canvas-ui list
+
+# Copy components into the project (auto-resolves dependencies)
+npx canvas-ui add <component-name> [component-name...]
+
+# Examples:
+npx canvas-ui add button                 # Copies button + utils
+npx canvas-ui add dashboard-shell        # Copies shell + sidebar + header + 15 deps
+npx canvas-ui add standard-data-table    # Copies table + pagination + deps
+```
+
+### How it works
+
+- Components are copied as **editable source files** into `src/components/`
+- UI primitives go to `src/components/ui/`
+- Layout shells go to `src/components/layout/`
+- Block components go to `src/components/blocks/<category>/`
+- Hooks go to `src/hooks/`
+- Utilities go to `src/lib/`
+- Import paths use `@/` aliases (e.g. `@/components/ui/button`, `@/lib/utils`)
+- npm dependencies (like `@radix-ui/*`, `class-variance-authority`) are auto-installed
+
+### When building a page
+
+1. Decide which layout shell fits (run `npx canvas-ui list` to see options)
+2. Add the layout: `npx canvas-ui add <shell-name>`
+3. Add any blocks needed: `npx canvas-ui add <block-name> [block-name...]`
+4. Import components from their local paths (e.g. `import { Button } from "@/components/ui/button"`)
+5. Customize the copied source files as needed
+
+### What stays in the npm package (do NOT copy these)
+
+- Design tokens / CSS variables (`canvas-ui-sdk/styles`)
+- Tailwind theme mappings (`canvas-ui-sdk/tailwind`)
+- Theme context and providers (`canvas-ui-sdk`)
+
+These are imported directly from the npm package, not copied.
+
+## Design Tokens
+
+When creating or modifying components, always use the canvas design token CSS variables. Never use raw Tailwind color classes (`bg-white`, `text-gray-500`, `border-gray-200`) or hardcoded pixel values for font sizes. Use the token system instead:
+
+- **Colors**: `var(--canvas-background)`, `var(--canvas-text)`, `var(--canvas-primary)`, `var(--canvas-border)`, etc.
+- **Typography**: `var(--typo-body-s-size)`, `var(--typo-body-m-size)`, `var(--typo-h4-size)`, `var(--typo-global-font)`, etc.
+- **Spacing**: `var(--spacing-sm)`, `var(--spacing-md)`, `var(--spacing-lg)`, etc.
+- **Radii**: `var(--radius-xs)`, `var(--radius-sm)`, `var(--radius-md)`, etc.
+- **Inputs**: `var(--canvas-border-input)`, `var(--input-standard-height)`, `var(--input-standard-radius)`, etc.
+- **Buttons**: `var(--btn-primary-bg)`, `var(--btn-standard-height)`, etc.
+
+Reference the SDK's `styles/tokens.reference.css` for the full list of available tokens.
+
+## Design Best Practices
+
+- **Prefer SDK components over hand-rolled layouts** for common UI patterns (stats, metrics, reviews, profile cards, data tables). Always check `npx canvas-ui list` or the MCP `list_components` tool before writing custom markup — the SDK likely has a component that handles it with proper spacing, alignment, and responsive behavior built in.
+- **Numeric displays need visual structure** — never render large numbers in a bare flex row without containment. Use `StatsCard` for profile/sidebar stats, `MetricCardsRow` for dashboard KPIs with change indicators, or `MetricsSection` for marketing hero stats. If none fits exactly, at minimum wrap numbers in a card container with dividers or border separators.
+- **Use Typography for text** — use the `Typography` component with heading variants (`h4`–`h6`) for stat values and `body-s` muted for labels. Avoid raw `fontSize`/`fontWeight` inline styles when Typography already handles token-correct sizing, font family, and line height.
+- **Customize components, don't rebuild them** — when a component is close but not perfect for a use case, import it and make small modifications (remove the card wrapper via className, adjust padding, hide a section) rather than rebuilding from scratch. Components encode spacing, alignment, typography scale, and responsive breakpoints that are easy to get wrong when hand-rolling.
+- **Use the MCP `review_design` tool** before finalizing layouts — it checks for common anti-patterns like uncontained numbers, missing visual hierarchy, or hand-rolled patterns that have SDK component equivalents.
+- **Block-first for content sections** — before writing custom JSX for any content section, check if the SDK has a block for it. Common mappings: Reviews → `ReviewsTable`, Image galleries → `TileImageGallery`, Activity feeds → `ActivityFeed`, Chat → `BottomInputChatWidget`, Data listings → `StandardDataTable` / `GridTilesList`, FAQ → `FaqsTable`, Social feeds → `SocialFeed`, Calendar → `MonthlyCalendarWidget`, Comments → `NestedCommentsTable`. The SDK has 119 blocks — hand-rolling what already exists wastes time and produces worse results.
+- **Always provide images** — components that accept image props (`TileImageGallery`, `LoginBrandingPanel`, `HeroSection`, `ProfileCard`, `DestinationCards`, etc.) should always receive relevant images. First check if the user has saved brand assets in the ThemeDrawer's Images panel — if available, use those. Otherwise, use high-quality Unsplash images that match the content context. Never leave image props empty when the component has a visual placeholder or broken default.
+- **Choose the right data format** — use `GridTilesList` (tile cards with images) when each item has a prominent visual (property photos, product images, portfolio pieces). Use `StandardDataTable` (tabular rows) for text-heavy data like user lists, transactions, or logs. When items have large images, the tile format is always more appropriate than squeezing them into small row avatars.
+
+## CSS Setup
+
+The app's `src/app/globals.css` imports:
+```css
+@import "tailwindcss";
+@import "canvas-ui-sdk/tailwind";
+@import "canvas-ui-sdk/styles";
+@source "../../node_modules/canvas-ui-sdk/dist";
+```
+
+## Project Structure
+
+```
+src/
+  app/           # Next.js app router pages
+  components/    # Copied Canvas UI components (editable)
+    ui/          # Primitives (button, input, dialog, etc.)
+    layout/      # Layout shells (dashboard-shell, sidebar, etc.)
+    blocks/      # Feature blocks (data-tables, forms, cards, etc.)
+  hooks/         # Copied hooks
+  lib/           # Utilities (utils.ts with cn() helper)
+```

package/registry/blocks/activity-feed.json

@@ -1,7 +1,18 @@
 {
   "name": "activity-feed",
   "type": "registry:block",
-  "description": "Timeline-style activity feed showing user actions, comments, and file attachments with connecting lines. Supports status changes, comments with reactions, and file attachments.",
+  "description": "Timeline-style activity feed with vertical connecting lines between entries. Each entry shows user avatar, action description, timestamp, and optional attachments or reactions. Full-width block (~400-800px depending on items). Use for audit logs, project activity, notification history, or any chronological event stream.",
+  "keywords": [
+    "timeline",
+    "audit",
+    "log",
+    "history",
+    "events",
+    "chronological",
+    "feed",
+    "activity"
+  ],
+  "visualWeight": "heavy",
   "files": [
     {
       "path": "components/blocks/activity-feed.tsx",

package/registry/blocks/blog-cards.json

@@ -1,12 +1,20 @@
 {
   "name": "blog-cards",
   "type": "registry:block",
-  "description": "Grid of blog post cards with images, titles, dates.",
+  "description": "3-column grid of blog/article cards with large images, title, description, and 'Read more' link with arrow icon. Header with subtitle and title. Use for blog sections, news feeds, content highlights, or any editorial content grid.",
+  "keywords": [
+    "blog",
+    "articles",
+    "news",
+    "content",
+    "cards"
+  ],
+  "visualWeight": "medium",
   "files": [
     {
       "path": "components/blocks/marketing/blog-cards.tsx",
       "type": "registry:block",
-      "content": "\"use client\";\n\nimport { ArrowRight } from \"@phosphor-icons/react\";\nimport { Typography } from \"../../ui/typography\";\n\ninterface BlogPost {\n  id: string;\n  title: string;\n  description: string;\n  image: string;\n}\n\nconst defaultPosts: BlogPost[] = [\n  {\n    id: \"1\",\n    title: \"Top destinations to visit\",\n    description: \"Discover the most exciting and must-visit travel spots around the world, from iconic cities to hidden gems.\",\n    image: \"https://images.unsplash.com/photo-1502602898657-3e91760cbb34?w=400&h=340&fit=crop\",\n  },\n  {\n    id: \"2\",\n    title: \"Breathtaking natural wonders\",\n    description: \"Explore the world's most awe-inspiring landscapes, from towering mountains to stunning waterfalls and surreal deserts.\",\n    image: \"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=340&fit=crop\",\n  },\n  {\n    id: \"3\",\n    title: \"Must-try dishes in Italy\",\n    description: \"Indulge in Italy's most delicious and authentic dishes, from creamy pasta to crispy pizzas and decadent desserts.\",\n    image: \"https://images.unsplash.com/photo-1498579150354-977475b7ea0b?w=400&h=340&fit=crop\",\n  },\n];\n\ninterface BlogCardsProps {\n  subtitle?: string;\n  title?: string;\n  posts?: BlogPost[];\n}\n\nexport function BlogCards({ \n  subtitle = \"OUR BLOG\",\n  title = \"Get inspired\",\n  posts = defaultPosts,\n}: BlogCardsProps) {\n  return (\n    <section \n      className=\"w-full px-4 md:px-8 lg:px-20 py-16 md:py-24\"\n      style={{\n        backgroundColor: \"var(--canvas-background)\",\n      }}\n    >\n      <div className=\"w-full max-w-[1240px] mx-auto flex flex-col gap-16\">\n        {/* Header */}\n        <div className=\"flex flex-col gap-3 max-w-[768px]\">\n          <Typography variant=\"body-s\" as=\"p\" color=\"muted\">\n            {subtitle}\n          </Typography>\n          <Typography variant=\"h3\" as=\"h2\">\n            {title}\n          </Typography>\n        </div>\n\n        {/* Cards Grid */}\n        <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10\">\n          {posts.map((post) => (\n            <div \n              key={post.id}\n              className=\"flex flex-col overflow-hidden cursor-pointer group\"\n              style={{\n                border: \"1px solid var(--canvas-border)\",\n                borderRadius: \"var(--radius-xl)\",\n              }}\n            >\n              {/* Image */}\n              <div \n                className=\"w-full h-[340px] overflow-hidden\"\n                style={{\n                  borderBottom: \"1px solid var(--canvas-border)\",\n                }}\n              >\n                <img \n                  src={post.image} \n                  alt={post.title}\n                  className=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-300\"\n                />\n              </div>\n              \n              {/* Content */}\n              <div \n                className=\"flex flex-col gap-1 p-6\"\n              >\n                <Typography variant=\"body-xl\" as=\"h3\" style={{ fontWeight: 600 }}>\n                  {post.title}\n                </Typography>\n                <Typography variant=\"body-m\" color=\"muted\">\n                  {post.description}\n                </Typography>\n                \n                {/* Read more */}\n                <div className=\"flex items-center gap-2 pt-5\">\n                  <Typography variant=\"body-m\" as=\"span\" style={{ fontWeight: 500 }}>\n                    Read more\n                  </Typography>\n                  <div \n                    className=\"flex items-center justify-center\"\n                    style={{\n                      width: \"24px\",\n                      height: \"24px\",\n                      backgroundColor: \"var(--canvas-text)\",\n                      borderRadius: \"var(--radius-4xl)\",\n                    }}\n                  >\n                    <ArrowRight size={16} color=\"white\" weight=\"bold\" />\n                  </div>\n                </div>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport { ArrowRight } from \"@phosphor-icons/react\";\nimport { Typography } from \"../../ui/typography\";\n\ninterface BlogPost {\n  id: string;\n  title: string;\n  description: string;\n  image: string;\n}\n\nconst defaultPosts: BlogPost[] = [\n  {\n    id: \"1\",\n    title: \"Top destinations to visit\",\n    description: \"Discover the most exciting and must-visit travel spots around the world, from iconic cities to hidden gems.\",\n    image: \"https://images.unsplash.com/photo-1502602898657-3e91760cbb34?w=400&h=340&fit=crop\",\n  },\n  {\n    id: \"2\",\n    title: \"Breathtaking natural wonders\",\n    description: \"Explore the world's most awe-inspiring landscapes, from towering mountains to stunning waterfalls and surreal deserts.\",\n    image: \"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=340&fit=crop\",\n  },\n  {\n    id: \"3\",\n    title: \"Must-try dishes in Italy\",\n    description: \"Indulge in Italy's most delicious and authentic dishes, from creamy pasta to crispy pizzas and decadent desserts.\",\n    image: \"https://images.unsplash.com/photo-1498579150354-977475b7ea0b?w=400&h=340&fit=crop\",\n  },\n];\n\ninterface BlogCardsProps {\n  subtitle?: string;\n  title?: string;\n  posts?: BlogPost[];\n}\n\nexport function BlogCards({ \n  subtitle = \"OUR BLOG\",\n  title = \"Get inspired\",\n  posts = defaultPosts,\n}: BlogCardsProps) {\n  return (\n    <section \n      className=\"w-full px-4 md:px-8 lg:px-20 py-16 md:py-24\"\n      style={{\n        backgroundColor: \"var(--canvas-background)\",\n      }}\n    >\n      <div className=\"w-full max-w-[1240px] mx-auto flex flex-col gap-16\">\n        {/* Header */}\n        <div className=\"flex flex-col gap-3 max-w-[768px]\">\n          <Typography variant=\"body-s\" as=\"p\" color=\"muted\">\n            {subtitle}\n          </Typography>\n          <Typography variant=\"h3\" as=\"h2\">\n            {title}\n          </Typography>\n        </div>\n\n        {/* Cards Grid */}\n        <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10\">\n          {posts.map((post) => (\n            <div \n              key={post.id}\n              className=\"flex flex-col overflow-hidden cursor-pointer group\"\n              style={{\n                border: \"1px solid var(--canvas-border)\",\n                borderRadius: \"var(--radius-xl)\",\n              }}\n            >\n              {/* Image */}\n              <div \n                className=\"w-full h-[220px] sm:h-[340px] overflow-hidden\"\n                style={{\n                  borderBottom: \"1px solid var(--canvas-border)\",\n                }}\n              >\n                <img \n                  src={post.image} \n                  alt={post.title}\n                  className=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-300\"\n                />\n              </div>\n              \n              {/* Content */}\n              <div \n                className=\"flex flex-col gap-1 p-6\"\n              >\n                <Typography variant=\"body-xl\" as=\"h3\" style={{ fontWeight: 600 }}>\n                  {post.title}\n                </Typography>\n                <Typography variant=\"body-m\" color=\"muted\">\n                  {post.description}\n                </Typography>\n                \n                {/* Read more */}\n                <div className=\"flex items-center gap-2 pt-5\">\n                  <Typography variant=\"body-m\" as=\"span\" style={{ fontWeight: 500 }}>\n                    Read more\n                  </Typography>\n                  <div \n                    className=\"flex items-center justify-center\"\n                    style={{\n                      width: \"24px\",\n                      height: \"24px\",\n                      backgroundColor: \"var(--canvas-text)\",\n                      borderRadius: \"var(--radius-4xl)\",\n                    }}\n                  >\n                    <ArrowRight size={16} color=\"white\" weight=\"bold\" />\n                  </div>\n                </div>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n"
     }
   ],
   "dependencies": [

package/registry/blocks/bottom-action-bar.json

@@ -0,0 +1,27 @@
+{
+  "name": "bottom-action-bar",
+  "type": "registry:block",
+  "description": "Sticky bottom bar displaying price with unit and primary CTA button. Fixed to bottom of viewport (~64px tall). Use on mobile-friendly detail pages for persistent booking/purchase actions.",
+  "keywords": [
+    "bottom",
+    "action",
+    "bar",
+    "sticky",
+    "cta",
+    "mobile",
+    "price"
+  ],
+  "visualWeight": "light",
+  "files": [
+    {
+      "path": "components/blocks/bottom-action-bar.tsx",
+      "type": "registry:block",
+      "content": "\"use client\";\n\nimport { cn } from \"../../lib/utils\";\nimport { Button } from \"../ui/button\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface BottomActionBarProps {\n  /** Price display (e.g. \"$100\") */\n  price?: string;\n  /** Price unit label (e.g. \"per person\") */\n  priceUnit?: string;\n  /** CTA button label */\n  ctaLabel?: string;\n  /** CTA button click handler */\n  onCtaClick?: () => void;\n  /** Additional class names */\n  className?: string;\n}\n\n// ============================================================================\n// BottomActionBar\n// ============================================================================\n\n/**\n * Canvas Design System - Bottom Action Bar\n *\n * A sticky bottom bar displaying a price with unit and a primary CTA button.\n * Typically used on product/listing detail pages for mobile-friendly booking.\n */\nexport function BottomActionBar({\n  price = \"$100\",\n  priceUnit = \"per person\",\n  ctaLabel = \"Reserve now\",\n  onCtaClick,\n  className,\n}: BottomActionBarProps) {\n  return (\n    <div\n      className={cn(\"w-full\", className)}\n      style={{\n        backgroundColor: \"var(--canvas-background)\",\n        borderTop: \"1px solid var(--canvas-border)\",\n        boxShadow: \"0px 4px 16px 0px rgba(0,0,0,0.04)\",\n      }}\n    >\n      <div\n        className=\"flex items-center overflow-hidden\"\n        style={{\n          paddingLeft: \"var(--spacing-5xl)\",\n          paddingRight: \"var(--spacing-5xl)\",\n          paddingTop: \"var(--spacing-xl)\",\n          paddingBottom: \"var(--spacing-xl)\",\n          gap: \"var(--spacing-3xl)\",\n        }}\n      >\n        {/* Price */}\n        <div\n          className=\"flex flex-1 items-center min-w-0\"\n          style={{ gap: \"var(--spacing-xs)\" }}\n        >\n          <span\n            style={{\n              fontFamily: \"var(--typo-body-xl-font, var(--typo-global-font))\",\n              fontSize: \"var(--typo-body-xl-size)\",\n              fontWeight: 700,\n              lineHeight: \"30px\",\n              color: \"var(--canvas-text)\",\n            }}\n          >\n            {price}\n          </span>\n          <span\n            style={{\n              fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n              fontSize: \"var(--typo-body-s-size)\",\n              lineHeight: \"20px\",\n              color: \"var(--canvas-text-placeholder)\",\n            }}\n          >\n            {priceUnit}\n          </span>\n        </div>\n\n        {/* CTA */}\n        <Button variant=\"primary\" size=\"default\" onClick={onCtaClick}>\n          {ctaLabel}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"
+    }
+  ],
+  "dependencies": [],
+  "registryDependencies": [
+    "lib/utils",
+    "ui/button"
+  ]
+}

package/registry/blocks/bottom-input-chat-widget.json

@@ -1,7 +1,15 @@
 {
   "name": "bottom-input-chat-widget",
   "type": "registry:block",
-  "description": "Slack-style chat widget with message threads list and conversation view. Features bottom input bar with attachment support.",
+  "description": "Chat widget with two views: threads list (showing conversation previews) and conversation view (showing message bubbles). Bottom input bar with attachment support. Use for in-app messaging, support chat, or team communication.",
+  "keywords": [
+    "chat",
+    "widget",
+    "messaging",
+    "threads",
+    "support"
+  ],
+  "visualWeight": "heavy",
   "files": [
     {
       "path": "components/blocks/bottom-input-chat-widget.tsx",

package/registry/blocks/category-grid.json

@@ -1,12 +1,20 @@
 {
   "name": "category-grid",
   "type": "registry:block",
-  "description": "Grid of category cards with icons/images.",
+  "description": "5-column grid of category cards, each with a large icon, category title, and item count on a bordered card. Use for browse-by-category sections, service categories, or topic navigation grids.",
+  "keywords": [
+    "categories",
+    "grid",
+    "icons",
+    "browse",
+    "navigation"
+  ],
+  "visualWeight": "medium",
   "files": [
     {
       "path": "components/blocks/marketing/category-grid.tsx",
       "type": "registry:block",
-      "content": "\"use client\";\n\nimport { \n  Heart, Star, Sun, CurrencyDollar, Smiley, \n  Image, Coffee, Moon, Clock, MapPin \n} from \"@phosphor-icons/react\";\nimport { Typography } from \"../../ui/typography\";\n\ninterface CategoryItem {\n  id: string;\n  title: string;\n  count: string;\n  icon: React.ReactNode;\n}\n\nconst defaultCategories: CategoryItem[] = [\n  { id: \"1\", title: \"Most popular\", count: \"5,000 homes\", icon: <Heart size={48} /> },\n  { id: \"2\", title: \"Top rated\", count: \"5,000 homes\", icon: <Star size={48} /> },\n  { id: \"3\", title: \"Unique stays\", count: \"5,000 homes\", icon: <Sun size={48} /> },\n  { id: \"4\", title: \"Affordable\", count: \"5,000 homes\", icon: <CurrencyDollar size={48} /> },\n  { id: \"5\", title: \"Friendly staff\", count: \"5,000 homes\", icon: <Smiley size={48} /> },\n  { id: \"6\", title: \"Best views\", count: \"5,000 homes\", icon: <Image size={48} /> },\n  { id: \"7\", title: \"Cafes\", count: \"5,000 homes\", icon: <Coffee size={48} /> },\n  { id: \"8\", title: \"Night life\", count: \"5,000 homes\", icon: <Moon size={48} /> },\n  { id: \"9\", title: \"Open 24 hours\", count: \"5,000 homes\", icon: <Clock size={48} /> },\n  { id: \"10\", title: \"Best locations\", count: \"5,000 homes\", icon: <MapPin size={48} /> },\n];\n\ninterface CategoryGridProps {\n  title?: string;\n  categories?: CategoryItem[];\n}\n\nexport function CategoryGrid({ \n  title = \"Browse by category\", \n  categories = defaultCategories \n}: CategoryGridProps) {\n  return (\n    <section \n      className=\"w-full px-4 md:px-8 lg:px-10 py-10 md:py-16\"\n      style={{\n        backgroundColor: \"var(--canvas-background)\",\n      }}\n    >\n      <div className=\"w-full max-w-[1240px] mx-auto\">\n        {/* Header */}\n        <Typography variant=\"h3\" as=\"h2\" style={{ marginBottom: \"var(--spacing-6xl)\" }}>\n          {title}\n        </Typography>\n\n        {/* Categories Grid */}\n        <div className=\"grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-8\">\n          {categories.map((category) => (\n            <div \n              key={category.id}\n              className=\"flex flex-col items-center justify-center text-center cursor-pointer hover:shadow-md transition-shadow\"\n              style={{\n                height: \"158px\",\n                padding: \"var(--spacing-3xl)\",\n                border: \"1px solid var(--canvas-border)\",\n                borderRadius: \"var(--spacing-md)\",\n                gap: \"var(--spacing-md)\",\n                boxShadow: \"0px 1px 8px 0px rgba(0, 0, 0, 0.03)\",\n              }}\n            >\n              <div style={{ color: \"var(--canvas-text)\" }}>\n                {category.icon}\n              </div>\n              <div className=\"flex flex-col\" style={{ gap: \"var(--spacing-xxs)\" }}>\n                <Typography variant=\"body-xl\" className=\"font-semibold\">\n                  {category.title}\n                </Typography>\n                <Typography variant=\"body-m\" color=\"muted\">\n                  {category.count}\n                </Typography>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n\n"
+      "content": "\"use client\";\n\nimport { \n  Heart, Star, Sun, CurrencyDollar, Smiley, \n  Image, Coffee, Moon, Clock, MapPin \n} from \"@phosphor-icons/react\";\nimport { Typography } from \"../../ui/typography\";\n\ninterface CategoryItem {\n  id: string;\n  title: string;\n  count: string;\n  icon: React.ReactNode;\n}\n\nconst defaultCategories: CategoryItem[] = [\n  { id: \"1\", title: \"Most popular\", count: \"5,000 homes\", icon: <Heart size={48} /> },\n  { id: \"2\", title: \"Top rated\", count: \"5,000 homes\", icon: <Star size={48} /> },\n  { id: \"3\", title: \"Unique stays\", count: \"5,000 homes\", icon: <Sun size={48} /> },\n  { id: \"4\", title: \"Affordable\", count: \"5,000 homes\", icon: <CurrencyDollar size={48} /> },\n  { id: \"5\", title: \"Friendly staff\", count: \"5,000 homes\", icon: <Smiley size={48} /> },\n  { id: \"6\", title: \"Best views\", count: \"5,000 homes\", icon: <Image size={48} /> },\n  { id: \"7\", title: \"Cafes\", count: \"5,000 homes\", icon: <Coffee size={48} /> },\n  { id: \"8\", title: \"Night life\", count: \"5,000 homes\", icon: <Moon size={48} /> },\n  { id: \"9\", title: \"Open 24 hours\", count: \"5,000 homes\", icon: <Clock size={48} /> },\n  { id: \"10\", title: \"Best locations\", count: \"5,000 homes\", icon: <MapPin size={48} /> },\n];\n\ninterface CategoryGridProps {\n  title?: string;\n  categories?: CategoryItem[];\n}\n\nexport function CategoryGrid({ \n  title = \"Browse by category\", \n  categories = defaultCategories \n}: CategoryGridProps) {\n  return (\n    <section \n      className=\"w-full px-4 md:px-8 lg:px-10 py-10 md:py-16\"\n      style={{\n        backgroundColor: \"var(--canvas-background)\",\n      }}\n    >\n      <div className=\"w-full max-w-[1240px] mx-auto\">\n        {/* Header */}\n        <Typography variant=\"h3\" as=\"h2\" style={{ marginBottom: \"var(--spacing-6xl)\" }}>\n          {title}\n        </Typography>\n\n        {/* Categories Grid */}\n        <div className=\"grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-8\">\n          {categories.map((category) => (\n            <div \n              key={category.id}\n              className=\"flex flex-col items-center justify-center text-center cursor-pointer hover:shadow-md transition-shadow\"\n              style={{\n                height: \"158px\",\n                padding: \"var(--spacing-3xl)\",\n                border: \"1px solid var(--canvas-border)\",\n                borderRadius: \"var(--spacing-md)\",\n                gap: \"var(--spacing-md)\",\n                boxShadow: \"0px 1px 8px 0px rgba(0, 0, 0, 0.03)\",\n              }}\n            >\n              <div style={{ color: \"var(--canvas-text)\" }}>\n                {category.icon}\n              </div>\n              <div className=\"flex flex-col\" style={{ gap: \"var(--spacing-xxs)\" }}>\n                <Typography variant=\"body-xl\" className=\"font-semibold\">\n                  {category.title}\n                </Typography>\n                <Typography variant=\"body-m\" color=\"muted\">\n                  {category.count}\n                </Typography>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n\n"
     }
   ],
   "dependencies": [

package/registry/blocks/centered-hero.json

@@ -1,7 +1,15 @@
 {
   "name": "centered-hero",
   "type": "registry:block",
-  "description": "Simple centered hero for about/landing pages.",
+  "description": "Clean centered hero with large heading and subtitle text on a plain background. No image or search bar. Use for about pages, company pages, or minimal landing sections.",
+  "keywords": [
+    "hero",
+    "centered",
+    "minimal",
+    "about",
+    "clean"
+  ],
+  "visualWeight": "spacer",
   "files": [
     {
       "path": "components/blocks/marketing/centered-hero.tsx",

package/registry/blocks/chat-message.json

@@ -1,7 +1,14 @@
 {
   "name": "chat-message",
   "type": "registry:block",
-  "description": "",
+  "description": "Individual chat message component with avatar, sender name, timestamp, and message content. Supports sent/received alignment. Use inside chat interfaces for individual message rendering.",
+  "keywords": [
+    "chat",
+    "message",
+    "conversation",
+    "bubble"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "components/blocks/chat-message.tsx",

package/registry/blocks/circular-progress-bar-list.json

@@ -1,7 +1,17 @@
 {
   "name": "circular-progress-bar-list",
   "type": "registry:block",
-  "description": "List block with circular progress indicators showing completion percentages. Features header with sort/filter controls and item action menus.",
+  "description": "Vertical list of items, each with a circular progress indicator (percentage ring), title, description, and action menu. Header with sort/filter controls. Full-width block (~400-600px). Use for skill assessments, goal tracking, course completion, or any list where items have progress.",
+  "keywords": [
+    "progress",
+    "skills",
+    "goals",
+    "tracking",
+    "completion",
+    "circular",
+    "ring"
+  ],
+  "visualWeight": "heavy",
   "files": [
     {
       "path": "components/blocks/circular-progress-bar-list.tsx",

package/registry/blocks/confirmation-popup.json

@@ -1,7 +1,16 @@
 {
   "name": "confirmation-popup",
   "type": "registry:block",
-  "description": "",
+  "description": "Modal overlay with title, description text, and confirm/cancel action buttons. Confirm button supports destructive (red) and default (primary) variants. Compact centered dialog (~200px tall). Use for delete confirmations, discard warnings, or any yes/no decision.",
+  "keywords": [
+    "confirm",
+    "dialog",
+    "modal",
+    "delete",
+    "warning",
+    "destructive"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "components/blocks/confirmation-popup.tsx",

package/registry/blocks/contact-form-popup.json

@@ -1,7 +1,16 @@
 {
   "name": "contact-form-popup",
   "type": "registry:block",
-  "description": "",
+  "description": "Contact form modal with gradient banner, large overlapping avatar, and configurable form fields supporting text, email, tel, and textarea inputs. Centered dialog (~450px tall). Use for contact forms, inquiry submissions, or any user-to-user messaging form.",
+  "keywords": [
+    "contact",
+    "form",
+    "modal",
+    "message",
+    "email",
+    "inquiry"
+  ],
+  "visualWeight": "medium",
   "files": [
     {
       "path": "components/blocks/contact-form-popup.tsx",

package/registry/blocks/content-dropzone.json

@@ -2,6 +2,14 @@
   "name": "content-dropzone",
   "type": "registry:block",
   "description": "Placeholder dropzone for content areas. Shows dashed placeholder when empty; arranges children in a flex column with 32px (--spacing-4xl) gap between blocks. Within a block, use 12px (--spacing-lg) gap between title groups and their content.",
+  "keywords": [
+    "content",
+    "dropzone",
+    "container",
+    "layout",
+    "spacing"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "components/blocks/content-dropzone.tsx",

package/registry/blocks/content-with-image.json

@@ -1,7 +1,15 @@
 {
   "name": "content-with-image",
   "type": "registry:block",
-  "description": "Generic content section with image. Similar to FeatureWithImage.",
+  "description": "Two-column content section with image and text content side by side. Image position toggleable. Similar to FeatureWithImage but more generic. Use for any content + image layout.",
+  "keywords": [
+    "content",
+    "image",
+    "two-column",
+    "text",
+    "layout"
+  ],
+  "visualWeight": "medium",
   "files": [
     {
       "path": "components/blocks/marketing/content-with-image.tsx",