canvas-ui-sdk 0.3.23 → 4.0.0

package/registry/blocks/core-values-grid.json

@@ -1,12 +1,20 @@
 {
   "name": "core-values-grid",
   "type": "registry:block",
-  "description": "Grid of value cards with icons and descriptions.",
+  "description": "3-column grid of value cards, each with an icon in a square container, title, and description text. Centered header with subtitle, title, and description. Light and dark variants. Use for core values, company principles, service benefits, or feature grids.",
+  "keywords": [
+    "values",
+    "principles",
+    "benefits",
+    "features",
+    "grid"
+  ],
+  "visualWeight": "medium",
   "files": [
     {
       "path": "components/blocks/marketing/core-values-grid.tsx",
       "type": "registry:block",
-      "content": "\"use client\";\n\nimport {\n  Rocket,\n  UserFocus,\n  UsersFour,\n  Eye,\n  Books,\n  Lightning,\n} from \"@phosphor-icons/react\";\nimport { ReactNode } from \"react\";\nimport { Typography } from \"../../ui/typography\";\n\ninterface Value {\n  icon: ReactNode;\n  title: string;\n  description: string;\n}\n\ninterface CoreValuesGridProps {\n  variant?: \"light\" | \"dark\";\n  subtitle?: string;\n  title?: string;\n  description?: string;\n  values?: Value[];\n}\n\nconst defaultValues: Value[] = [\n  {\n    icon: <Rocket size={32} weight=\"duotone\" />,\n    title: \"Innovation\",\n    description:\n      \"We are committed to constantly pushing boundaries and exploring new ideas, technologies, and solutions to drive innovation and progress\",\n  },\n  {\n    icon: <UserFocus size={32} weight=\"duotone\" />,\n    title: \"Customers first\",\n    description:\n      \"Our customers are at the center of everything we do, and we are dedicated to providing them with the best possible experience and support\",\n  },\n  {\n    icon: <UsersFour size={32} weight=\"duotone\" />,\n    title: \"Teamwork\",\n    description:\n      \"We believe in the power of collaboration and teamwork, and we strive to foster a supportive and inclusive environment\",\n  },\n  {\n    icon: <Eye size={32} weight=\"duotone\" />,\n    title: \"Accountability\",\n    description:\n      \"We take responsibility for our actions and decisions, and we hold ourselves accountable to the highest standards\",\n  },\n  {\n    icon: <Books size={32} weight=\"duotone\" />,\n    title: \"Continuous learning\",\n    description:\n      \"We believe in the importance of continuous learning and growth, and we encourage our team members to pursue development opportunities\",\n  },\n  {\n    icon: <Lightning size={32} weight=\"duotone\" />,\n    title: \"Agility\",\n    description:\n      \"We are adaptable and nimble, and we embrace change as an opportunity to grow and improve\",\n  },\n];\n\nexport function CoreValuesGrid({\n  variant = \"light\",\n  subtitle = \"CORE VALUES\",\n  title = \"How we work\",\n  description = \"Guided by our core values, we strive to exceed expectations and create meaningful experiences\",\n  values = defaultValues,\n}: CoreValuesGridProps) {\n  const isDark = variant === \"dark\";\n\n  return (\n    <section\n      className=\"w-full px-6 md:px-20 py-16 md:py-24\"\n      style={{\n        backgroundColor: isDark\n          ? \"var(--canvas-dark-section-bg)\"\n          : \"var(--canvas-background)\",\n      }}\n    >\n      <div className=\"max-w-[1240px] mx-auto flex flex-col items-center gap-10 md:gap-12\">\n        {/* Header */}\n        <div className=\"flex flex-col items-center gap-4 md:gap-6 max-w-[768px] text-center\">\n          <div className=\"flex flex-col items-center gap-3\">\n            <Typography variant=\"body-xs\" as=\"span\" color=\"muted\" className=\"uppercase tracking-wide\">\n              {subtitle}\n            </Typography>\n            <Typography\n              variant=\"h3\"\n              as=\"h2\"\n              {...(isDark && { style: { color: \"white\" } })}\n            >\n              {title}\n            </Typography>\n          </div>\n          <Typography\n            variant=\"body-l\"\n            color=\"muted\"\n            className=\"max-w-[576px]\"\n            {...(isDark && { style: { color: \"rgba(255, 255, 255, 0.7)\" } })}\n          >\n            {description}\n          </Typography>\n        </div>\n\n        {/* Values Grid */}\n        <div className=\"grid grid-cols-1 md:grid-cols-3 gap-12 md:gap-20 w-full\">\n          {values.map((value, index) => (\n            <div key={index} className=\"flex flex-col gap-5\">\n              {/* Icon */}\n              <div\n                className=\"w-16 h-16 rounded-lg flex items-center justify-center\"\n                style={{\n                  backgroundColor: \"var(--canvas-border)\",\n                  color: \"var(--canvas-text)\",\n                }}\n              >\n                {value.icon}\n              </div>\n\n              {/* Text */}\n              <div className=\"flex flex-col gap-2\">\n                <Typography\n                  variant=\"h6\"\n                  as=\"h3\"\n                  {...(isDark && { style: { color: \"white\" } })}\n                >\n                  {value.title}\n                </Typography>\n                <Typography\n                  variant=\"body-m\"\n                  color=\"muted\"\n                  {...(isDark && { style: { color: \"rgba(255, 255, 255, 0.7)\" } })}\n                >\n                  {value.description}\n                </Typography>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport {\n  Rocket,\n  UserFocus,\n  UsersFour,\n  Eye,\n  Books,\n  Lightning,\n} from \"@phosphor-icons/react\";\nimport { ReactNode } from \"react\";\nimport { Typography } from \"../../ui/typography\";\n\ninterface Value {\n  icon: ReactNode;\n  title: string;\n  description: string;\n}\n\ninterface CoreValuesGridProps {\n  variant?: \"light\" | \"dark\";\n  subtitle?: string;\n  title?: string;\n  description?: string;\n  values?: Value[];\n}\n\nconst defaultValues: Value[] = [\n  {\n    icon: <Rocket size={32} weight=\"duotone\" />,\n    title: \"Innovation\",\n    description:\n      \"We are committed to constantly pushing boundaries and exploring new ideas, technologies, and solutions to drive innovation and progress\",\n  },\n  {\n    icon: <UserFocus size={32} weight=\"duotone\" />,\n    title: \"Customers first\",\n    description:\n      \"Our customers are at the center of everything we do, and we are dedicated to providing them with the best possible experience and support\",\n  },\n  {\n    icon: <UsersFour size={32} weight=\"duotone\" />,\n    title: \"Teamwork\",\n    description:\n      \"We believe in the power of collaboration and teamwork, and we strive to foster a supportive and inclusive environment\",\n  },\n  {\n    icon: <Eye size={32} weight=\"duotone\" />,\n    title: \"Accountability\",\n    description:\n      \"We take responsibility for our actions and decisions, and we hold ourselves accountable to the highest standards\",\n  },\n  {\n    icon: <Books size={32} weight=\"duotone\" />,\n    title: \"Continuous learning\",\n    description:\n      \"We believe in the importance of continuous learning and growth, and we encourage our team members to pursue development opportunities\",\n  },\n  {\n    icon: <Lightning size={32} weight=\"duotone\" />,\n    title: \"Agility\",\n    description:\n      \"We are adaptable and nimble, and we embrace change as an opportunity to grow and improve\",\n  },\n];\n\nexport function CoreValuesGrid({\n  variant = \"light\",\n  subtitle = \"CORE VALUES\",\n  title = \"How we work\",\n  description = \"Guided by our core values, we strive to exceed expectations and create meaningful experiences\",\n  values = defaultValues,\n}: CoreValuesGridProps) {\n  const isDark = variant === \"dark\";\n\n  return (\n    <section\n      className=\"w-full px-6 md:px-20 py-16 md:py-24\"\n      style={{\n        backgroundColor: isDark\n          ? \"var(--canvas-dark-section-bg)\"\n          : \"var(--canvas-background)\",\n      }}\n    >\n      <div className=\"max-w-[1240px] mx-auto flex flex-col items-center gap-10 md:gap-12\">\n        {/* Header */}\n        <div className=\"flex flex-col items-center gap-4 md:gap-6 max-w-[768px] text-center\">\n          <div className=\"flex flex-col items-center gap-3\">\n            <Typography variant=\"body-xs\" as=\"span\" color=\"muted\" className=\"uppercase tracking-wide\">\n              {subtitle}\n            </Typography>\n            <Typography\n              variant=\"h3\"\n              as=\"h2\"\n              {...(isDark && { style: { color: \"white\" } })}\n            >\n              {title}\n            </Typography>\n          </div>\n          <Typography\n            variant=\"body-l\"\n            color=\"muted\"\n            className=\"max-w-[576px]\"\n            {...(isDark && { style: { color: \"rgba(255, 255, 255, 0.7)\" } })}\n          >\n            {description}\n          </Typography>\n        </div>\n\n        {/* Values Grid */}\n        <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-12 lg:gap-20 w-full\">\n          {values.map((value, index) => (\n            <div key={index} className=\"flex flex-col gap-5\">\n              {/* Icon */}\n              <div\n                className=\"w-16 h-16 rounded-lg flex items-center justify-center\"\n                style={{\n                  backgroundColor: \"var(--canvas-border)\",\n                  color: \"var(--canvas-text)\",\n                }}\n              >\n                {value.icon}\n              </div>\n\n              {/* Text */}\n              <div className=\"flex flex-col gap-2\">\n                <Typography\n                  variant=\"h6\"\n                  as=\"h3\"\n                  {...(isDark && { style: { color: \"white\" } })}\n                >\n                  {value.title}\n                </Typography>\n                <Typography\n                  variant=\"body-m\"\n                  color=\"muted\"\n                  {...(isDark && { style: { color: \"rgba(255, 255, 255, 0.7)\" } })}\n                >\n                  {value.description}\n                </Typography>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n"
     }
   ],
   "dependencies": [

package/registry/blocks/credit-card-display.json

@@ -1,7 +1,15 @@
 {
   "name": "credit-card-display",
   "type": "registry:block",
-  "description": "Visual credit card display showing card details.",
+  "description": "Visual credit/debit card display showing card number (masked), cardholder name, expiry date, and card type logo. Use for payment method displays, saved cards, or financial account interfaces.",
+  "keywords": [
+    "credit-card",
+    "payment",
+    "card",
+    "financial",
+    "billing"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "components/blocks/credit-card-display.tsx",

package/registry/blocks/cta-banner.json

@@ -1,12 +1,20 @@
 {
   "name": "cta-banner",
   "type": "registry:block",
-  "description": "Call to action banner with title and button.",
+  "description": "Full-width call-to-action banner with heading text and primary action button. Use for newsletter signups, contact prompts, trial starts, or any conversion-focused section.",
+  "keywords": [
+    "cta",
+    "call-to-action",
+    "conversion",
+    "signup",
+    "banner"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "components/blocks/marketing/cta-banner.tsx",
       "type": "registry:block",
-      "content": "\"use client\";\n\nimport { Button } from \"../../ui/button\";\nimport { Typography } from \"../../ui/typography\";\n\ninterface CtaBannerProps {\n  title?: string;\n  buttonText?: string;\n  onButtonClick?: () => void;\n}\n\nexport function CtaBanner({ \n  title = \"Ready for your next adventure?\",\n  buttonText = \"Book now\",\n  onButtonClick \n}: CtaBannerProps) {\n  return (\n    <section \n      className=\"w-full px-4 md:px-8 lg:px-10\"\n    >\n      <div \n        className=\"w-full flex flex-col items-center justify-center text-center\"\n        style={{\n          backgroundColor: \"var(--canvas-dark-section-bg)\",\n          borderRadius: \"var(--radius-3xl)\",\n          padding: \"var(--spacing-6xl) var(--spacing-5xl) var(--spacing-7xl)\",\n          gap: \"var(--spacing-4xl)\",\n        }}\n      >\n        <Typography \n          variant=\"h3\" \n          as=\"h2\"\n          style={{ color: \"white\" }}\n        >\n          {title}\n        </Typography>\n        <Button \n          variant=\"primary\" \n          size=\"lg\"\n          onClick={onButtonClick}\n        >\n          {buttonText}\n        </Button>\n      </div>\n    </section>\n  );\n}\n\n"
+      "content": "\"use client\";\n\nimport { Button } from \"../../ui/button\";\nimport { Typography } from \"../../ui/typography\";\n\ninterface CtaBannerProps {\n  title?: string;\n  buttonText?: string;\n  onButtonClick?: () => void;\n}\n\nexport function CtaBanner({ \n  title = \"Ready for your next adventure?\",\n  buttonText = \"Book now\",\n  onButtonClick \n}: CtaBannerProps) {\n  return (\n    <section \n      className=\"w-full px-4 md:px-8 lg:px-10\"\n    >\n      <div \n        className=\"w-full flex flex-col items-center justify-center text-center\"\n        style={{\n          backgroundColor: \"var(--canvas-dark-section-bg)\",\n          borderRadius: \"var(--radius-3xl)\",\n          padding: \"var(--spacing-6xl) var(--spacing-5xl) var(--spacing-7xl)\",\n          gap: \"var(--spacing-4xl)\",\n        }}\n      >\n        <Typography\n          variant=\"h3\"\n          as=\"h2\"\n          style={{ color: \"white\", maxWidth: 640, textAlign: \"center\" }}\n        >\n          {title}\n        </Typography>\n        <Button \n          variant=\"primary\" \n          size=\"lg\"\n          onClick={onButtonClick}\n        >\n          {buttonText}\n        </Button>\n      </div>\n    </section>\n  );\n}\n\n"
     }
   ],
   "dependencies": [],

package/registry/blocks/destination-cards.json

@@ -1,7 +1,16 @@
 {
   "name": "destination-cards",
   "type": "registry:block",
-  "description": "Grid of destination cards with images and titles.",
+  "description": "4-column card grid with large images, title, item count, and price. Each card has hover zoom effect. Header with title and 'Explore more' link. Use for featured categories, popular items, highlighted locations, or any curated collection showcase.",
+  "keywords": [
+    "cards",
+    "grid",
+    "categories",
+    "featured",
+    "browse",
+    "destinations"
+  ],
+  "visualWeight": "medium",
   "files": [
     {
       "path": "components/blocks/marketing/destination-cards.tsx",

package/registry/blocks/detail-drawer.json

@@ -1,7 +1,16 @@
 {
   "name": "detail-drawer",
   "type": "registry:block",
-  "description": "Right-side detail drawer with tabbed content. Info tab shows metadata fields (with avatars, badges, links), rich content sections, and file attachments. Comments tab shows a chat-style thread with sender names, timestamps, and a comment input.",
+  "description": "Right-side sliding drawer with tabbed content. Info tab shows metadata fields (with avatars, badges, links), rich content sections, and file attachments. Comments tab shows a chat-style thread. Use for row detail views, task details, record inspection, or any side-panel detail interface.",
+  "keywords": [
+    "drawer",
+    "detail",
+    "side-panel",
+    "inspect",
+    "comments",
+    "overlay"
+  ],
+  "visualWeight": "heavy",
   "files": [
     {
       "path": "components/blocks/detail-drawer.tsx",

package/registry/blocks/details-popup.json

@@ -1,7 +1,16 @@
 {
   "name": "details-popup",
   "type": "registry:block",
-  "description": "",
+  "description": "Read-only details viewer modal displaying label-value pairs. Centered dialog (~300px tall). Use for displaying product specs, property information, record details, or any structured metadata.",
+  "keywords": [
+    "details",
+    "view",
+    "modal",
+    "specs",
+    "metadata",
+    "info"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "components/blocks/details-popup.tsx",

package/registry/blocks/editable-list.json

@@ -0,0 +1,29 @@
+{
+  "name": "editable-list",
+  "type": "registry:block",
+  "description": "Editable list where users can add items via input field and remove them with trash icon buttons. Compact inline element. Use for tag lists, skill lists, or any dynamic list where users add/remove items.",
+  "keywords": [
+    "list",
+    "editable",
+    "add",
+    "remove",
+    "tags",
+    "dynamic"
+  ],
+  "visualWeight": "light",
+  "files": [
+    {
+      "path": "components/blocks/editable-list.tsx",
+      "type": "registry:block",
+      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Trash2, Plus } from \"lucide-react\";\nimport { TextInput } from \"../ui/text-input\";\nimport { Label } from \"../ui/label\";\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface EditableListProps {\n  /** Label displayed above the list */\n  label?: string;\n  /** Current list items */\n  items?: string[];\n  /** Callback when items change */\n  onItemsChange?: (items: string[]) => void;\n  /** Placeholder text for the add input */\n  addPlaceholder?: string;\n  /** Whether the list is disabled */\n  disabled?: boolean;\n  /** Additional class names */\n  className?: string;\n}\n\n// ---------------------------------------------------------------------------\n// EditableList\n// ---------------------------------------------------------------------------\n\nexport function EditableList({\n  label,\n  items: controlledItems,\n  onItemsChange,\n  addPlaceholder = \"Enter item\",\n  disabled = false,\n  className,\n}: EditableListProps) {\n  const [internalItems, setInternalItems] = React.useState<string[]>(\n    controlledItems ?? []\n  );\n  const [inputValue, setInputValue] = React.useState(\"\");\n\n  const items = controlledItems ?? internalItems;\n\n  const updateItems = (newItems: string[]) => {\n    setInternalItems(newItems);\n    onItemsChange?.(newItems);\n  };\n\n  const handleAdd = () => {\n    const trimmed = inputValue.trim();\n    if (!trimmed) return;\n    updateItems([...items, trimmed]);\n    setInputValue(\"\");\n  };\n\n  const handleRemove = (index: number) => {\n    updateItems(items.filter((_, i) => i !== index));\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === \"Enter\") {\n      e.preventDefault();\n      handleAdd();\n    }\n  };\n\n  return (\n    <div\n      className={cn(\"flex flex-col w-full\", className)}\n      style={{ gap: \"var(--spacing-xs)\" }}\n    >\n      {label && (\n        <Label\n          className=\"text-[var(--canvas-primary)]\"\n          style={{\n            fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n            fontSize: \"var(--typo-body-s-size)\",\n            lineHeight: \"var(--typo-body-s-line-height)\",\n          }}\n        >\n          {label}\n        </Label>\n      )}\n\n      {/* List items */}\n      <div className=\"flex flex-col\">\n        {items.map((item, index) => (\n          <div\n            key={index}\n            className=\"flex items-center justify-between border-b border-[var(--canvas-border)]\"\n            style={{\n              padding: \"var(--spacing-lg) 0\",\n            }}\n          >\n            <span\n              style={{\n                fontFamily: \"var(--typo-body-m-font, var(--typo-global-font))\",\n                fontSize: \"var(--typo-body-m-size)\",\n                lineHeight: \"var(--typo-body-m-line-height)\",\n                color: \"var(--canvas-text)\",\n              }}\n            >\n              {item}\n            </span>\n            {!disabled && (\n              <button\n                type=\"button\"\n                onClick={() => handleRemove(index)}\n                className=\"flex items-center justify-center text-[var(--canvas-text-muted)] hover:text-[var(--canvas-text)] transition-colors\"\n                style={{\n                  width: \"var(--spacing-3xl)\",\n                  height: \"var(--spacing-3xl)\",\n                }}\n              >\n                <Trash2 className=\"size-4\" />\n              </button>\n            )}\n          </div>\n        ))}\n      </div>\n\n      {/* Add input row */}\n      {!disabled && (\n        <div\n          className=\"flex items-center w-full\"\n          style={{\n            gap: \"var(--spacing-md)\",\n            paddingTop: \"var(--spacing-md)\",\n          }}\n        >\n          <div className=\"flex-1\">\n            <Label\n              style={{\n                fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n                fontSize: \"var(--typo-body-s-size)\",\n                lineHeight: \"var(--typo-body-s-line-height)\",\n                color: \"var(--canvas-text)\",\n                marginBottom: \"var(--spacing-xs)\",\n                display: \"block\",\n              }}\n            >\n              Label\n            </Label>\n            <TextInput\n              placeholder={addPlaceholder}\n              value={inputValue}\n              onChange={(e) => setInputValue(e.target.value)}\n              onKeyDown={handleKeyDown}\n            />\n          </div>\n          <button\n            type=\"button\"\n            onClick={handleAdd}\n            className=\"flex items-center justify-center text-[var(--canvas-text-muted)] hover:text-[var(--canvas-text)] transition-colors self-end\"\n            style={{\n              width: \"var(--input-standard-height)\",\n              height: \"var(--input-standard-height)\",\n            }}\n          >\n            <Plus className=\"size-5\" />\n          </button>\n        </div>\n      )}\n    </div>\n  );\n}\n"
+    }
+  ],
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "lib/utils",
+    "ui/text-input",
+    "ui/label"
+  ]
+}

package/registry/blocks/empty-state.json

@@ -1,12 +1,20 @@
 {
   "name": "empty-state",
   "type": "registry:block",
-  "description": "",
+  "description": "Centered empty state display with emoji/icon, title, and optional description inside a dashed border card. Compact (~200px tall). Use when a list, table, or content area has no data to show.",
+  "keywords": [
+    "empty",
+    "placeholder",
+    "no-data",
+    "no-results",
+    "blank"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "components/blocks/empty-state.tsx",
       "type": "registry:block",
-      "content": "\"use client\";\n\nimport { cn } from \"../../lib/utils\";\n\ninterface EmptyStateProps {\n  icon: string;\n  title: string;\n  description?: string;\n  className?: string;\n}\n\nexport function EmptyState({ icon, title, description, className }: EmptyStateProps) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-col items-center justify-center py-12 px-6\",\n        \"rounded-xl border-2 border-dashed border-[var(--canvas-border)]\",\n        \"bg-[var(--canvas-surface)]\",\n        className\n      )}\n    >\n      <span className=\"text-4xl mb-3\">{icon}</span>\n      <p className=\"text-[var(--canvas-text-muted)] font-medium text-center\">\n        {title}\n      </p>\n      {description && (\n        <p className=\"text-[var(--canvas-text-placeholder)] text-center mt-1 max-w-md\" style={{ fontSize: \"var(--typo-body-s-size)\" }}>\n          {description}\n        </p>\n      )}\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport { cn } from \"../../lib/utils\";\n\ninterface EmptyStateProps {\n  icon: string;\n  title: string;\n  description?: string;\n  className?: string;\n}\n\nexport function EmptyState({ icon, title, description, className }: EmptyStateProps) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-col items-center justify-center py-12 px-6\",\n        \"rounded-xl border-2 border-dashed border-[var(--canvas-border)]\",\n        \"bg-[var(--canvas-surface)]\",\n        className\n      )}\n    >\n      <span className=\"text-4xl mb-3\">{icon}</span>\n      <p className=\"text-[var(--canvas-text-muted)] font-medium text-center\" style={{ fontFamily: \"var(--typo-body-m-font, var(--typo-global-font))\" }}>\n        {title}\n      </p>\n      {description && (\n        <p className=\"text-[var(--canvas-text-placeholder)] text-center mt-1 max-w-md\" style={{ fontSize: \"var(--typo-body-s-size)\", fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\" }}>\n          {description}\n        </p>\n      )}\n    </div>\n  );\n}\n"
     }
   ],
   "dependencies": [],

package/registry/blocks/faq-accordion.json

@@ -1,7 +1,15 @@
 {
   "name": "faq-accordion",
   "type": "registry:block",
-  "description": "Expandable FAQ accordion for pricing pages.",
+  "description": "Expandable FAQ accordion with question titles and expandable answer text. Use for pricing FAQ sections, help pages, or any expandable Q&A content.",
+  "keywords": [
+    "faq",
+    "questions",
+    "answers",
+    "accordion",
+    "help"
+  ],
+  "visualWeight": "medium",
   "files": [
     {
       "path": "components/blocks/pricing/faq-accordion.tsx",

package/registry/blocks/faqs-table.json

@@ -1,7 +1,16 @@
 {
   "name": "faqs-table",
   "type": "registry:block",
-  "description": "Expandable FAQ list with accordion behavior. Shows questions with plus/minus toggle icons, revealing answers one at a time.",
+  "description": "Expandable FAQ list with accordion behavior. Shows question text with plus/minus toggle icons, revealing answer text one at a time. Full-width block (~300-600px depending on items). Use for FAQ sections, help centers, or any question-and-answer content.",
+  "keywords": [
+    "faq",
+    "questions",
+    "answers",
+    "accordion",
+    "help",
+    "expandable"
+  ],
+  "visualWeight": "medium",
   "files": [
     {
       "path": "components/blocks/faqs-table.tsx",

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

@@ -1,7 +1,15 @@
 {
   "name": "feature-with-image",
   "type": "registry:block",
-  "description": "Feature highlight with image and text side by side.",
+  "description": "Two-column feature section with large image on one side and heading, description, benefit list, and CTA button on the other. Image position toggleable (left/right). Stacks vertically on mobile. Use for product features, service explanations, or benefit showcases.",
+  "keywords": [
+    "feature",
+    "two-column",
+    "image",
+    "benefits",
+    "product"
+  ],
+  "visualWeight": "medium",
   "files": [
     {
       "path": "components/blocks/marketing/feature-with-image.tsx",

package/registry/blocks/featured-news-cards.json

@@ -1,12 +1,20 @@
 {
   "name": "featured-news-cards",
   "type": "registry:block",
-  "description": "Featured news/press cards section.",
+  "description": "2-column grid of large news/press cards with images, headlines, descriptions, and 'Read more' links. Centered header with subtitle, title, and description. Light and dark variants. Use for press coverage, news highlights, blog features, or content spotlights.",
+  "keywords": [
+    "news",
+    "press",
+    "articles",
+    "featured",
+    "highlights"
+  ],
+  "visualWeight": "medium",
   "files": [
     {
       "path": "components/blocks/marketing/featured-news-cards.tsx",
       "type": "registry:block",
-      "content": "\"use client\";\n\nimport { ArrowRight } from \"@phosphor-icons/react\";\nimport { Typography } from \"../../ui/typography\";\n\ninterface NewsItem {\n  title: string;\n  description: string;\n  image: string;\n  href?: string;\n}\n\ninterface FeaturedNewsCardsProps {\n  variant?: \"light\" | \"dark\";\n  subtitle?: string;\n  title?: string;\n  description?: string;\n  items?: NewsItem[];\n}\n\nconst defaultItems: NewsItem[] = [\n  {\n    title: \"How this company is using AI to 10x its revenue\",\n    description:\n      \"Explore how this company is leveraging AI to enhance innovation, streamline operations, and improve customer experiences\",\n    image:\n      \"https://images.unsplash.com/photo-1497366216548-37526070297c?w=800&h=500&fit=crop\",\n    href: \"#\",\n  },\n  {\n    title: \"Fundraise on confidence\",\n    description:\n      \"Discover how our founders successfully raised over $200 million and gain insights to fuel your own fundraising journey.\",\n    image:\n      \"https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=800&h=500&fit=crop\",\n    href: \"#\",\n  },\n];\n\nexport function FeaturedNewsCards({\n  variant = \"light\",\n  subtitle = \"IN THE PRESS\",\n  title = \"Featured news\",\n  description = \"Stay updated with the latest headlines, media coverage, and featured stories about us from top publications\",\n  items = defaultItems,\n}: FeaturedNewsCardsProps) {\n  const isDark = variant === \"dark\";\n\n  return (\n    <section\n      className=\"w-full px-6 md:px-20 py-16 md:py-24\"\n      style={{\n        backgroundColor: isDark\n          ? \"var(--canvas-dark-section-bg)\"\n          : \"var(--canvas-background)\",\n      }}\n    >\n      <div className=\"max-w-[1240px] mx-auto flex flex-col items-center gap-12 md:gap-16\">\n        {/* Header */}\n        <div className=\"flex flex-col items-center gap-4 md:gap-6 max-w-[768px] text-center\">\n          <div className=\"flex flex-col items-center gap-3\">\n            <Typography variant=\"body-xs\" as=\"span\" color=\"muted\" className=\"uppercase tracking-wide\">\n              {subtitle}\n            </Typography>\n            <Typography\n              variant=\"h3\"\n              as=\"h2\"\n              {...(isDark && { style: { color: \"white\" } })}\n            >\n              {title}\n            </Typography>\n          </div>\n          <Typography\n            variant=\"body-l\"\n            color=\"muted\"\n            {...(isDark && { style: { color: \"rgba(255, 255, 255, 0.7)\" } })}\n          >\n            {description}\n          </Typography>\n        </div>\n\n        {/* News Cards */}\n        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-10 w-full\">\n          {items.map((item, index) => (\n            <div\n              key={index}\n              className=\"rounded-xl overflow-hidden\"\n              style={{\n                backgroundColor: isDark\n                  ? \"var(--canvas-dark-card-bg)\"\n                  : \"var(--canvas-background)\",\n                border: isDark ? \"none\" : \"1px solid var(--canvas-border)\",\n              }}\n            >\n              {/* Image */}\n              <div className=\"w-full h-[220px] md:h-[340px]\">\n                <img\n                  src={item.image}\n                  alt={item.title}\n                  className=\"w-full h-full object-cover\"\n                />\n              </div>\n\n              {/* Content */}\n              <div className=\"flex flex-col gap-1 p-6\">\n                <Typography\n                  variant=\"h6\"\n                  as=\"h3\"\n                  {...(isDark && { style: { color: \"white\" } })}\n                >\n                  {item.title}\n                </Typography>\n                <Typography\n                  variant=\"body-m\"\n                  color=\"muted\"\n                  {...(isDark && { style: { color: \"rgba(255, 255, 255, 0.7)\" } })}\n                >\n                  {item.description}\n                </Typography>\n\n                {/* Read More Link */}\n                <a\n                  href={item.href || \"#\"}\n                  className=\"flex items-center gap-2 pt-5 group\"\n                >\n                  <Typography\n                    variant=\"body-m\"\n                    as=\"span\"\n                    {...(isDark && { style: { color: \"white\" } })}\n                  >\n                    Read more\n                  </Typography>\n                  <div\n                    className=\"w-6 h-6 rounded-full flex items-center justify-center group-hover:translate-x-1 transition-transform\"\n                    style={{\n                      backgroundColor: isDark\n                        ? \"rgba(255, 255, 255, 0.5)\"\n                        : \"var(--canvas-text)\",\n                    }}\n                  >\n                    <ArrowRight size={16} weight=\"bold\" color=\"white\" />\n                  </div>\n                </a>\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 NewsItem {\n  title: string;\n  description: string;\n  image: string;\n  href?: string;\n}\n\ninterface FeaturedNewsCardsProps {\n  variant?: \"light\" | \"dark\";\n  subtitle?: string;\n  title?: string;\n  description?: string;\n  items?: NewsItem[];\n}\n\nconst defaultItems: NewsItem[] = [\n  {\n    title: \"How this company is using AI to 10x its revenue\",\n    description:\n      \"Explore how this company is leveraging AI to enhance innovation, streamline operations, and improve customer experiences\",\n    image:\n      \"https://images.unsplash.com/photo-1497366216548-37526070297c?w=800&h=500&fit=crop\",\n    href: \"#\",\n  },\n  {\n    title: \"Fundraise on confidence\",\n    description:\n      \"Discover how our founders successfully raised over $200 million and gain insights to fuel your own fundraising journey.\",\n    image:\n      \"https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=800&h=500&fit=crop\",\n    href: \"#\",\n  },\n];\n\nexport function FeaturedNewsCards({\n  variant = \"light\",\n  subtitle = \"IN THE PRESS\",\n  title = \"Featured news\",\n  description = \"Stay updated with the latest headlines, media coverage, and featured stories about us from top publications\",\n  items = defaultItems,\n}: FeaturedNewsCardsProps) {\n  const isDark = variant === \"dark\";\n\n  return (\n    <section\n      className=\"w-full px-6 md:px-20 py-16 md:py-24\"\n      style={{\n        backgroundColor: isDark\n          ? \"var(--canvas-dark-section-bg)\"\n          : \"var(--canvas-background)\",\n      }}\n    >\n      <div className=\"max-w-[1240px] mx-auto flex flex-col items-center gap-12 md:gap-16\">\n        {/* Header */}\n        <div className=\"flex flex-col items-center gap-4 md:gap-6 max-w-[768px] text-center\">\n          <div className=\"flex flex-col items-center gap-3\">\n            <Typography variant=\"body-xs\" as=\"span\" color=\"muted\" className=\"uppercase tracking-wide\">\n              {subtitle}\n            </Typography>\n            <Typography\n              variant=\"h3\"\n              as=\"h2\"\n              {...(isDark && { style: { color: \"white\" } })}\n            >\n              {title}\n            </Typography>\n          </div>\n          <Typography\n            variant=\"body-l\"\n            color=\"muted\"\n            {...(isDark && { style: { color: \"rgba(255, 255, 255, 0.7)\" } })}\n          >\n            {description}\n          </Typography>\n        </div>\n\n        {/* News Cards */}\n        <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-8 sm:gap-10 w-full\">\n          {items.map((item, index) => (\n            <div\n              key={index}\n              className=\"rounded-xl overflow-hidden\"\n              style={{\n                backgroundColor: isDark\n                  ? \"var(--canvas-dark-card-bg)\"\n                  : \"var(--canvas-background)\",\n                border: isDark ? \"none\" : \"1px solid var(--canvas-border)\",\n              }}\n            >\n              {/* Image */}\n              <div className=\"w-full h-[220px] md:h-[340px]\">\n                <img\n                  src={item.image}\n                  alt={item.title}\n                  className=\"w-full h-full object-cover\"\n                />\n              </div>\n\n              {/* Content */}\n              <div className=\"flex flex-col gap-1 p-6\">\n                <Typography\n                  variant=\"h6\"\n                  as=\"h3\"\n                  {...(isDark && { style: { color: \"white\" } })}\n                >\n                  {item.title}\n                </Typography>\n                <Typography\n                  variant=\"body-m\"\n                  color=\"muted\"\n                  {...(isDark && { style: { color: \"rgba(255, 255, 255, 0.7)\" } })}\n                >\n                  {item.description}\n                </Typography>\n\n                {/* Read More Link */}\n                <a\n                  href={item.href || \"#\"}\n                  className=\"flex items-center gap-2 pt-5 group\"\n                >\n                  <Typography\n                    variant=\"body-m\"\n                    as=\"span\"\n                    {...(isDark && { style: { color: \"white\" } })}\n                  >\n                    Read more\n                  </Typography>\n                  <div\n                    className=\"w-6 h-6 rounded-full flex items-center justify-center group-hover:translate-x-1 transition-transform\"\n                    style={{\n                      backgroundColor: isDark\n                        ? \"rgba(255, 255, 255, 0.5)\"\n                        : \"var(--canvas-text)\",\n                    }}\n                  >\n                    <ArrowRight size={16} weight=\"bold\" color=\"white\" />\n                  </div>\n                </a>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n"
     }
   ],
   "dependencies": [

package/registry/blocks/featured-places.json

@@ -1,12 +1,20 @@
 {
   "name": "featured-places",
   "type": "registry:block",
-  "description": "Featured places section with filter pills and card grid.",
+  "description": "3-column card grid with filter pill tabs at top, image cards with name, rating, item count, and price. Header with title and 'Explore more' link. Use for filterable catalogs, featured products, or curated collections with category filtering.",
+  "keywords": [
+    "cards",
+    "grid",
+    "filter",
+    "featured",
+    "catalog"
+  ],
+  "visualWeight": "medium",
   "files": [
     {
       "path": "components/blocks/marketing/featured-places.tsx",
       "type": "registry:block",
-      "content": "\"use client\";\n\nimport { ArrowRight, Star, Camera, Buildings, Palette, Mountains } from \"@phosphor-icons/react\";\nimport { Typography } from \"../../ui/typography\";\nimport { useState } from \"react\";\n\ninterface FeaturedPlace {\n  id: string;\n  name: string;\n  count: string;\n  price: string;\n  rating: number;\n  image: string;\n}\n\ninterface FilterPill {\n  id: string;\n  label: string;\n  icon: React.ReactNode;\n}\n\nconst defaultFilters: FilterPill[] = [\n  { id: \"views\", label: \"Amazing views\", icon: <Camera size={20} /> },\n  { id: \"cities\", label: \"Top cities\", icon: <Buildings size={20} /> },\n  { id: \"design\", label: \"Design\", icon: <Palette size={20} /> },\n  { id: \"countryside\", label: \"Countryside\", icon: <Mountains size={20} /> },\n];\n\nconst defaultPlaces: FeaturedPlace[] = [\n  {\n    id: \"1\",\n    name: \"Sausalito, California\",\n    count: \"246 homes\",\n    price: \"from $240\",\n    rating: 4.92,\n    image: \"https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=400&h=300&fit=crop\",\n  },\n  {\n    id: \"2\",\n    name: \"Portola Valley, California\",\n    count: \"634 homes\",\n    price: \"from $354\",\n    rating: 4.98,\n    image: \"https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=400&h=300&fit=crop\",\n  },\n  {\n    id: \"3\",\n    name: \"San Francisco, California\",\n    count: \"194 homes\",\n    price: \"from $278\",\n    rating: 4.87,\n    image: \"https://images.unsplash.com/photo-1449844908441-8829872d2607?w=400&h=300&fit=crop\",\n  },\n  {\n    id: \"4\",\n    name: \"Sonoma, California\",\n    count: \"176 homes\",\n    price: \"from $543\",\n    rating: 4.96,\n    image: \"https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=400&h=300&fit=crop\",\n  },\n  {\n    id: \"5\",\n    name: \"Half Moon Bay, California\",\n    count: \"83 homes\",\n    price: \"from $389\",\n    rating: 4.82,\n    image: \"https://images.unsplash.com/photo-1600047509807-ba8f99d2cdde?w=400&h=300&fit=crop\",\n  },\n  {\n    id: \"6\",\n    name: \"Sebastopol, California\",\n    count: \"65 homes\",\n    price: \"from $176\",\n    rating: 4.84,\n    image: \"https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?w=400&h=300&fit=crop\",\n  },\n];\n\nexport function FeaturedPlaces() {\n  const [activeFilter, setActiveFilter] = useState(\"views\");\n\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        <div className=\"flex items-center justify-between\" style={{ marginBottom: \"var(--spacing-3xl)\" }}>\n          <Typography variant=\"h3\" as=\"h2\">\n            Featured places\n          </Typography>\n          <button \n            className=\"flex items-center gap-2 hover:opacity-80 transition-opacity\"\n            style={{ paddingTop: \"var(--spacing-2xl)\" }}\n          >\n            <Typography variant=\"body-l\" as=\"span\" style={{ fontWeight: 600 }}>\n              Explore 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          </button>\n        </div>\n\n        {/* Filter Pills */}\n        <div className=\"flex flex-wrap gap-4 mb-6\" style={{ marginBottom: \"var(--spacing-3xl)\" }}>\n          {defaultFilters.map((filter) => (\n            <button\n              key={filter.id}\n              onClick={() => setActiveFilter(filter.id)}\n              className=\"flex items-center gap-2 transition-colors\"\n              style={{\n                height: \"44px\",\n                padding: \"0 var(--spacing-xl)\",\n                borderRadius: \"var(--spacing-5xl)\",\n                border: `1px solid ${activeFilter === filter.id ? \"var(--canvas-primary)\" : \"var(--canvas-border)\"}`,\n                backgroundColor: activeFilter === filter.id ? \"var(--canvas-surface-brand)\" : \"var(--canvas-background)\",\n                color: activeFilter === filter.id ? \"var(--canvas-primary)\" : \"var(--canvas-text-placeholder)\",\n                fontFamily: \"var(--typo-global-font)\",\n                fontSize: \"var(--typo-body-s-size)\",\n                fontWeight: 500,\n              }}\n            >\n              {filter.icon}\n              {filter.label}\n            </button>\n          ))}\n        </div>\n\n        {/* Cards Grid */}\n        <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10\">\n          {defaultPlaces.map((place) => (\n            <div \n              key={place.id}\n              className=\"group cursor-pointer overflow-hidden\"\n              style={{\n                border: \"1px solid var(--canvas-border)\",\n                borderRadius: \"var(--radius-xl)\",\n              }}\n            >\n              <div \n                className=\"w-full overflow-hidden\"\n                style={{ \n                  height: \"240px\",\n                  borderBottom: \"1px solid var(--canvas-border)\",\n                }}\n              >\n                <img \n                  src={place.image} \n                  alt={place.name}\n                  className=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-300\"\n                />\n              </div>\n              <div \n                className=\"flex flex-col\"\n                style={{ \n                  padding: \"0 var(--spacing-3xl) var(--spacing-3xl)\",\n                  gap: \"var(--spacing-xs)\",\n                }}\n              >\n                <div className=\"flex items-center justify-between mt-6\">\n                  <Typography variant=\"body-xl\" as=\"h3\" style={{ fontWeight: 600 }}>\n                    {place.name}\n                  </Typography>\n                  <div className=\"flex items-center gap-1\">\n                    <Star size={16} weight=\"fill\" style={{ color: \"var(--canvas-primary)\" }} />\n                    <Typography variant=\"body-s\" as=\"span\">\n                      {place.rating}\n                    </Typography>\n                  </div>\n                </div>\n                <Typography variant=\"body-m\" color=\"muted\">\n                  {place.count}\n                </Typography>\n                <Typography variant=\"h6\" as=\"p\" className=\"mt-5\">\n                  {place.price}\n                </Typography>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport { ArrowRight, Star, Camera, Buildings, Palette, Mountains } from \"@phosphor-icons/react\";\nimport { Typography } from \"../../ui/typography\";\nimport { useState } from \"react\";\n\ninterface FeaturedPlace {\n  id: string;\n  name: string;\n  count: string;\n  price: string;\n  rating: number;\n  image: string;\n}\n\ninterface FilterPill {\n  id: string;\n  label: string;\n  icon: React.ReactNode;\n}\n\nconst defaultFilters: FilterPill[] = [\n  { id: \"views\", label: \"Amazing views\", icon: <Camera size={20} /> },\n  { id: \"cities\", label: \"Top cities\", icon: <Buildings size={20} /> },\n  { id: \"design\", label: \"Design\", icon: <Palette size={20} /> },\n  { id: \"countryside\", label: \"Countryside\", icon: <Mountains size={20} /> },\n];\n\nconst defaultPlaces: FeaturedPlace[] = [\n  {\n    id: \"1\",\n    name: \"Sausalito, California\",\n    count: \"246 homes\",\n    price: \"from $240\",\n    rating: 4.92,\n    image: \"https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=400&h=300&fit=crop\",\n  },\n  {\n    id: \"2\",\n    name: \"Portola Valley, California\",\n    count: \"634 homes\",\n    price: \"from $354\",\n    rating: 4.98,\n    image: \"https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=400&h=300&fit=crop\",\n  },\n  {\n    id: \"3\",\n    name: \"San Francisco, California\",\n    count: \"194 homes\",\n    price: \"from $278\",\n    rating: 4.87,\n    image: \"https://images.unsplash.com/photo-1449844908441-8829872d2607?w=400&h=300&fit=crop\",\n  },\n  {\n    id: \"4\",\n    name: \"Sonoma, California\",\n    count: \"176 homes\",\n    price: \"from $543\",\n    rating: 4.96,\n    image: \"https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=400&h=300&fit=crop\",\n  },\n  {\n    id: \"5\",\n    name: \"Half Moon Bay, California\",\n    count: \"83 homes\",\n    price: \"from $389\",\n    rating: 4.82,\n    image: \"https://images.unsplash.com/photo-1600047509807-ba8f99d2cdde?w=400&h=300&fit=crop\",\n  },\n  {\n    id: \"6\",\n    name: \"Sebastopol, California\",\n    count: \"65 homes\",\n    price: \"from $176\",\n    rating: 4.84,\n    image: \"https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?w=400&h=300&fit=crop\",\n  },\n];\n\ninterface FeaturedPlacesProps {\n  /** Custom places to display instead of defaults */\n  places?: FeaturedPlace[];\n}\n\nexport function FeaturedPlaces({ places }: FeaturedPlacesProps = {}) {\n  const [activeFilter, setActiveFilter] = useState(\"views\");\n  const displayPlaces = places ?? defaultPlaces;\n\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        <div className=\"flex items-center justify-between\" style={{ marginBottom: \"var(--spacing-3xl)\" }}>\n          <Typography variant=\"h3\" as=\"h2\">\n            Featured places\n          </Typography>\n          <button \n            className=\"flex items-center gap-2 hover:opacity-80 transition-opacity\"\n            style={{ paddingTop: \"var(--spacing-2xl)\" }}\n          >\n            <Typography variant=\"body-l\" as=\"span\" style={{ fontWeight: 600 }}>\n              Explore 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          </button>\n        </div>\n\n        {/* Filter Pills */}\n        <div className=\"flex flex-wrap gap-4 mb-6\" style={{ marginBottom: \"var(--spacing-3xl)\" }}>\n          {defaultFilters.map((filter) => (\n            <button\n              key={filter.id}\n              onClick={() => setActiveFilter(filter.id)}\n              className=\"flex items-center gap-2 transition-colors\"\n              style={{\n                height: \"44px\",\n                padding: \"0 var(--spacing-xl)\",\n                borderRadius: \"var(--spacing-5xl)\",\n                border: `1px solid ${activeFilter === filter.id ? \"var(--canvas-primary)\" : \"var(--canvas-border)\"}`,\n                backgroundColor: activeFilter === filter.id ? \"var(--canvas-surface-brand)\" : \"var(--canvas-background)\",\n                color: activeFilter === filter.id ? \"var(--canvas-primary)\" : \"var(--canvas-text-placeholder)\",\n                fontFamily: \"var(--typo-global-font)\",\n                fontSize: \"var(--typo-body-s-size)\",\n                fontWeight: 500,\n              }}\n            >\n              {filter.icon}\n              {filter.label}\n            </button>\n          ))}\n        </div>\n\n        {/* Cards Grid */}\n        <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10\">\n          {displayPlaces.map((place) => (\n            <div \n              key={place.id}\n              className=\"group cursor-pointer overflow-hidden\"\n              style={{\n                border: \"1px solid var(--canvas-border)\",\n                borderRadius: \"var(--radius-xl)\",\n              }}\n            >\n              <div \n                className=\"w-full overflow-hidden\"\n                style={{ \n                  height: \"240px\",\n                  borderBottom: \"1px solid var(--canvas-border)\",\n                }}\n              >\n                <img \n                  src={place.image} \n                  alt={place.name}\n                  className=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-300\"\n                />\n              </div>\n              <div \n                className=\"flex flex-col\"\n                style={{ \n                  padding: \"0 var(--spacing-3xl) var(--spacing-3xl)\",\n                  gap: \"var(--spacing-xs)\",\n                }}\n              >\n                <div className=\"flex items-center justify-between mt-6\">\n                  <Typography variant=\"body-xl\" as=\"h3\" style={{ fontWeight: 600 }}>\n                    {place.name}\n                  </Typography>\n                  <div className=\"flex items-center gap-1\">\n                    <Star size={16} weight=\"fill\" style={{ color: \"var(--canvas-primary)\" }} />\n                    <Typography variant=\"body-s\" as=\"span\">\n                      {place.rating}\n                    </Typography>\n                  </div>\n                </div>\n                <Typography variant=\"body-m\" color=\"muted\">\n                  {place.count}\n                </Typography>\n                <Typography variant=\"h6\" as=\"p\" className=\"mt-5\">\n                  {place.price}\n                </Typography>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n"
     }
   ],
   "dependencies": [

package/registry/blocks/features-comparison.json

@@ -1,7 +1,15 @@
 {
   "name": "features-comparison",
   "type": "registry:block",
-  "description": "Feature comparison table across pricing tiers.",
+  "description": "Feature comparison table showing plan names across columns and feature rows with check/cross indicators. Use for comparing pricing tiers, product editions, or service levels side by side.",
+  "keywords": [
+    "comparison",
+    "features",
+    "plans",
+    "table",
+    "tiers"
+  ],
+  "visualWeight": "heavy",
   "files": [
     {
       "path": "components/blocks/pricing/features-comparison.tsx",

package/registry/blocks/feedback-popup.json

@@ -1,7 +1,15 @@
 {
   "name": "feedback-popup",
   "type": "registry:block",
-  "description": "",
+  "description": "Compact feedback collection modal with textarea for free-text input. Centered dialog (~250px tall). Use for user feedback, bug reports, feature requests, or any free-text submission.",
+  "keywords": [
+    "feedback",
+    "modal",
+    "textarea",
+    "comment",
+    "report"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "components/blocks/feedback-popup.tsx",

package/registry/blocks/filter-popover.json

@@ -1,7 +1,14 @@
 {
   "name": "filter-popover",
   "type": "registry:block",
-  "description": "Popover with filter controls (checkboxes, date ranges, etc.).",
+  "description": "Popover dropdown with filter controls (checkboxes, date ranges, sliders). Triggered by a filter button. Use for refining lists, tables, or search results.",
+  "keywords": [
+    "filter",
+    "popover",
+    "dropdown",
+    "refine"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "components/blocks/filter-popover.tsx",

package/registry/blocks/fixed-column-data-table.json

@@ -1,7 +1,17 @@
 {
   "name": "fixed-column-data-table",
   "type": "registry:block",
-  "description": "Data table with fixed first column (Name with avatar) that stays visible during horizontal scroll. Ideal for invoice-style tables with columns: Amount, Status badge, Logo, Company, Date Sent.",
+  "description": "Data table with fixed first column (name with avatar) that stays visible during horizontal scroll. Remaining columns scroll horizontally. Full-width block (~400-800px). Dense, text-heavy. Use for wide data sets like invoices, financial reports, or comparison tables where the row identifier must stay visible.",
+  "keywords": [
+    "table",
+    "fixed-column",
+    "scroll",
+    "wide",
+    "invoices",
+    "financial",
+    "comparison"
+  ],
+  "visualWeight": "heavy",
   "files": [
     {
       "path": "components/blocks/fixed-column-data-table.tsx",

package/registry/blocks/flair-banner.json

@@ -1,7 +1,15 @@
 {
   "name": "flair-banner",
   "type": "registry:block",
-  "description": "Dark blue hero banner with large title text. Used at top of pages.",
+  "description": "Full-width dark blue hero banner with large title text. Use at the top of content pages for visual emphasis. Pairs well with PageHeaderSection below it.",
+  "keywords": [
+    "banner",
+    "hero",
+    "header",
+    "decorative",
+    "flair"
+  ],
+  "visualWeight": "spacer",
   "files": [
     {
       "path": "components/blocks/flair-banner.tsx",

package/registry/blocks/footer-navbar.json

@@ -1,7 +1,15 @@
 {
   "name": "footer-navbar",
   "type": "registry:block",
-  "description": "Footer with logo, nav links, and social icons.",
+  "description": "Full-width footer with company logo, multi-column navigation link groups, and social media icons. Use at the bottom of any marketing or content page.",
+  "keywords": [
+    "footer",
+    "navigation",
+    "links",
+    "social",
+    "bottom"
+  ],
+  "visualWeight": "medium",
   "files": [
     {
       "path": "components/blocks/marketing/footer-navbar.tsx",