canvas-ui-sdk 0.3.23 → 4.0.0

package/registry/blocks/standard-data-table.json

@@ -1,7 +1,19 @@
 {
   "name": "standard-data-table",
   "type": "registry:block",
-  "description": "Data table with title, result count, sort/filter dropdowns, and action button. Rows have avatar + name/email/title/role columns.",
+  "description": "Tabular data display with sortable columns, avatar-enhanced rows, and row action menus. Header includes result count, sort/filter dropdowns, and primary action button. Full-width block (~400-800px depending on rows). Dense, text-heavy. Use for user directories, order lists, inventory tables, or any structured row-based data.",
+  "keywords": [
+    "table",
+    "data",
+    "rows",
+    "sortable",
+    "directory",
+    "list",
+    "inventory",
+    "orders",
+    "users"
+  ],
+  "visualWeight": "heavy",
   "files": [
     {
       "path": "components/blocks/standard-data-table.tsx",

package/registry/blocks/standard-list-with-image.json

@@ -1,7 +1,16 @@
 {
   "name": "standard-list-with-image",
   "type": "registry:block",
-  "description": "Blog/article-style list block with image thumbnails, title, author, date, description, and tags. Includes header with sort/filter controls.",
+  "description": "Vertical list of content items with square image thumbnails, title, author, date, description text, and tags. Header with sort/filter controls. Use for blog posts, articles, courses, events, or any content listing with images.",
+  "keywords": [
+    "list",
+    "articles",
+    "blog",
+    "content",
+    "thumbnails",
+    "courses"
+  ],
+  "visualWeight": "heavy",
   "files": [
     {
       "path": "components/blocks/standard-list-with-image.tsx",

package/registry/blocks/step-tracker.json

@@ -1,7 +1,15 @@
 {
   "name": "step-tracker",
   "type": "registry:block",
-  "description": "Horizontal multi-step progress indicator with numbered circles and connecting lines.",
+  "description": "Horizontal multi-step progress indicator with numbered circles connected by lines. Completed steps show checkmarks, current step is highlighted. Use in multi-step forms, wizards, or onboarding flows.",
+  "keywords": [
+    "steps",
+    "wizard",
+    "progress",
+    "tracker",
+    "multistep"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "components/blocks/step-tracker.tsx",

package/registry/blocks/store-location-map.json

@@ -1,7 +1,15 @@
 {
   "name": "store-location-map",
   "type": "registry:block",
-  "description": "Single store location card with address info, directions button, and embedded Google Maps iframe. Uses TitleGroup for header.",
+  "description": "Location card with address text, directions button, and embedded map iframe. Uses TitleGroup for header. Use for store locators, office locations, or any place-based information display.",
+  "keywords": [
+    "map",
+    "location",
+    "address",
+    "directions",
+    "store"
+  ],
+  "visualWeight": "medium",
   "files": [
     {
       "path": "components/blocks/store-location-map.tsx",

package/registry/blocks/team-cards-grid.json

@@ -1,7 +1,15 @@
 {
   "name": "team-cards-grid",
   "type": "registry:block",
-  "description": "Grid of team member cards with photos and roles.",
+  "description": "4-column grid of team member cards with portrait photos, name, and role/title text. Photos have responsive height. Use for team pages, about pages, staff directories, or leadership sections.",
+  "keywords": [
+    "team",
+    "members",
+    "people",
+    "staff",
+    "leadership"
+  ],
+  "visualWeight": "medium",
   "files": [
     {
       "path": "components/blocks/marketing/team-cards-grid.tsx",

package/registry/blocks/team-circular-grid.json

@@ -1,7 +1,15 @@
 {
   "name": "team-circular-grid",
   "type": "registry:block",
-  "description": "Team grid with circular avatar photos.",
+  "description": "Grid of team members with circular avatar photos, name, and role text. More compact than TeamCardsGrid. Use for advisory boards, small teams, or avatar-focused people grids.",
+  "keywords": [
+    "team",
+    "members",
+    "avatars",
+    "people",
+    "compact"
+  ],
+  "visualWeight": "medium",
   "files": [
     {
       "path": "components/blocks/marketing/team-circular-grid.tsx",

package/registry/blocks/terms-of-service-popup.json

@@ -1,7 +1,16 @@
 {
   "name": "terms-of-service-popup",
   "type": "registry:block",
-  "description": "",
+  "description": "Scrollable content viewer modal for terms/legal documents with styled scrollbar and confirm/decline action buttons. Centered dialog (~450px tall). Use for terms of service, privacy policies, legal agreements, or any long-form content that needs acceptance.",
+  "keywords": [
+    "terms",
+    "legal",
+    "modal",
+    "agreement",
+    "policy",
+    "tos"
+  ],
+  "visualWeight": "medium",
   "files": [
     {
       "path": "components/blocks/terms-of-service-popup.tsx",

package/registry/blocks/testimonial-carousel.json

@@ -1,12 +1,20 @@
 {
   "name": "testimonial-carousel",
   "type": "registry:block",
-  "description": "Dark testimonial carousel with quote, author, and navigation arrows.",
+  "description": "Dark-background testimonial carousel showing one quote at a time with author name, role, avatar, and left/right navigation arrows. Use for customer testimonials, user quotes, or endorsement sections.",
+  "keywords": [
+    "testimonials",
+    "quotes",
+    "reviews",
+    "social-proof",
+    "carousel"
+  ],
+  "visualWeight": "medium",
   "files": [
     {
       "path": "components/blocks/marketing/testimonial-carousel.tsx",
       "type": "registry:block",
-      "content": "\"use client\";\n\nimport { CaretLeft, CaretRight } from \"@phosphor-icons/react\";\nimport { useState } from \"react\";\nimport { Typography } from \"../../ui/typography\";\nimport { AVATAR_NICOLE_PALMER, AVATAR_ETHAN_BROOKS } from \"../demo-avatars\";\n\ninterface Testimonial {\n  id: string;\n  quote: string;\n  highlightedWords?: string[];\n  author: string;\n  location: string;\n  image: string;\n}\n\nconst defaultTestimonials: Testimonial[] = [\n  {\n    id: \"1\",\n    quote: '\"Great prices on incredible places! Booking is easy, and I always find the perfect stay. Highly recommend!\"',\n    highlightedWords: [\"Great prices\", \"easy\"],\n    author: \"Nicole Palmer\",\n    location: \"San Francisco, California\",\n    image: AVATAR_NICOLE_PALMER,\n  },\n  {\n    id: \"2\",\n    quote: '\"The experience was seamless from start to finish. I found exactly what I was looking for within minutes!\"',\n    highlightedWords: [\"seamless\", \"minutes\"],\n    author: \"Ethan Brooks\",\n    location: \"New York, NY\",\n    image: AVATAR_ETHAN_BROOKS,\n  },\n];\n\ninterface TestimonialCarouselProps {\n  testimonials?: Testimonial[];\n}\n\nexport function TestimonialCarousel({ testimonials = defaultTestimonials }: TestimonialCarouselProps) {\n  const [currentIndex, setCurrentIndex] = useState(0);\n  const current = testimonials[currentIndex];\n\n  const handlePrev = () => {\n    setCurrentIndex((prev) => (prev === 0 ? testimonials.length - 1 : prev - 1));\n  };\n\n  const handleNext = () => {\n    setCurrentIndex((prev) => (prev === testimonials.length - 1 ? 0 : prev + 1));\n  };\n\n  // Function to highlight specific words\n  const renderQuote = (quote: string, highlights?: string[]) => {\n    if (!highlights || highlights.length === 0) return quote;\n    \n    let result = quote;\n    highlights.forEach((word) => {\n      result = result.replace(\n        new RegExp(`(${word})`, \"gi\"),\n        `<span style=\"color: var(--canvas-highlight-orange);\">$1</span>`\n      );\n    });\n    return <span dangerouslySetInnerHTML={{ __html: result }} />;\n  };\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-dark-section-bg)\",\n      }}\n    >\n      <div \n        className=\"w-full max-w-[1200px] mx-auto flex flex-col lg:flex-row items-center\"\n        style={{ gap: \"var(--spacing-6xl)\" }}\n      >\n        {/* Content */}\n        <div className=\"flex-1 flex flex-col\" style={{ gap: \"var(--spacing-3xl)\" }}>\n          <Typography variant=\"h3\" as=\"p\" style={{ color: \"white\" }}>\n            {renderQuote(current.quote, current.highlightedWords)}\n          </Typography>\n          \n          <div className=\"flex flex-col\" style={{ gap: \"var(--spacing-2xl)\" }}>\n            <div>\n              <Typography variant=\"body-l\" style={{ color: \"white\" }}>\n                {current.author}\n              </Typography>\n              <Typography variant=\"body-l\" color=\"muted\" style={{ color: \"var(--canvas-text-placeholder)\" }}>\n                {current.location}\n              </Typography>\n            </div>\n            \n            {/* Navigation */}\n            <div className=\"flex gap-5\">\n              <button \n                onClick={handlePrev}\n                className=\"flex items-center justify-center hover:opacity-80 transition-opacity\"\n                style={{\n                  width: \"48px\",\n                  height: \"48px\",\n                  backgroundColor: \"var(--canvas-border)\",\n                  borderRadius: \"var(--spacing-md)\",\n                }}\n              >\n                <CaretLeft size={32} style={{ color: \"var(--canvas-text)\" }} weight=\"bold\" />\n              </button>\n              <button \n                onClick={handleNext}\n                className=\"flex items-center justify-center hover:opacity-80 transition-opacity\"\n                style={{\n                  width: \"48px\",\n                  height: \"48px\",\n                  backgroundColor: \"var(--canvas-border)\",\n                  borderRadius: \"var(--spacing-md)\",\n                }}\n              >\n                <CaretRight size={32} style={{ color: \"var(--canvas-text)\" }} weight=\"bold\" />\n              </button>\n            </div>\n          </div>\n        </div>\n        \n        {/* Image */}\n        <div \n          className=\"shrink-0 overflow-hidden hidden lg:block\"\n          style={{\n            width: \"320px\",\n            height: \"400px\",\n            borderRadius: \"var(--spacing-lg)\",\n          }}\n        >\n          <img \n            src={current.image} \n            alt={current.author}\n            className=\"w-full h-full object-cover\"\n          />\n        </div>\n      </div>\n    </section>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport { CaretLeft, CaretRight } from \"@phosphor-icons/react\";\nimport { useState } from \"react\";\nimport { Typography } from \"../../ui/typography\";\nimport { AVATAR_NICOLE_PALMER, AVATAR_ETHAN_BROOKS } from \"../demo-avatars\";\n\ninterface Testimonial {\n  id: string;\n  quote: string;\n  highlightedWords?: string[];\n  author: string;\n  location: string;\n  image: string;\n}\n\nconst defaultTestimonials: Testimonial[] = [\n  {\n    id: \"1\",\n    quote: '\"Great prices on incredible places! Booking is easy, and I always find the perfect stay. Highly recommend!\"',\n    highlightedWords: [\"Great prices\", \"easy\"],\n    author: \"Nicole Palmer\",\n    location: \"San Francisco, California\",\n    image: AVATAR_NICOLE_PALMER,\n  },\n  {\n    id: \"2\",\n    quote: '\"The experience was seamless from start to finish. I found exactly what I was looking for within minutes!\"',\n    highlightedWords: [\"seamless\", \"minutes\"],\n    author: \"Ethan Brooks\",\n    location: \"New York, NY\",\n    image: AVATAR_ETHAN_BROOKS,\n  },\n];\n\ninterface TestimonialCarouselProps {\n  testimonials?: Testimonial[];\n  /** Color variant: \"dark\" uses neutral dark section bg, \"primary\" uses primary-dark brand color */\n  variant?: \"dark\" | \"primary\";\n}\n\nexport function TestimonialCarousel({ testimonials = defaultTestimonials, variant = \"dark\" }: TestimonialCarouselProps) {\n  const isPrimary = variant === \"primary\";\n  const [currentIndex, setCurrentIndex] = useState(0);\n  const current = testimonials[currentIndex];\n\n  const handlePrev = () => {\n    setCurrentIndex((prev) => (prev === 0 ? testimonials.length - 1 : prev - 1));\n  };\n\n  const handleNext = () => {\n    setCurrentIndex((prev) => (prev === testimonials.length - 1 ? 0 : prev + 1));\n  };\n\n  // Function to highlight specific words\n  const renderQuote = (quote: string, highlights?: string[]) => {\n    if (!highlights || highlights.length === 0) return quote;\n    \n    let result = quote;\n    highlights.forEach((word) => {\n      result = result.replace(\n        new RegExp(`(${word})`, \"gi\"),\n        `<span style=\"color: var(--canvas-primary);\">$1</span>`\n      );\n    });\n    return <span dangerouslySetInnerHTML={{ __html: result }} />;\n  };\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: isPrimary ? \"var(--canvas-flair-bg)\" : \"var(--canvas-dark-section-bg)\",\n      }}\n    >\n      <div \n        className=\"w-full max-w-[1200px] mx-auto flex flex-col lg:flex-row items-center\"\n        style={{ gap: \"var(--spacing-6xl)\" }}\n      >\n        {/* Content */}\n        <div className=\"flex-1 flex flex-col\" style={{ gap: \"var(--spacing-3xl)\" }}>\n          <Typography variant=\"h3\" as=\"p\" style={{ color: \"white\" }}>\n            {renderQuote(current.quote, current.highlightedWords)}\n          </Typography>\n          \n          <div className=\"flex flex-col\" style={{ gap: \"var(--spacing-2xl)\" }}>\n            <div>\n              <Typography variant=\"body-l\" style={{ color: \"white\" }}>\n                {current.author}\n              </Typography>\n              <Typography variant=\"body-l\" style={{ color: \"rgba(255, 255, 255, 0.7)\" }}>\n                {current.location}\n              </Typography>\n            </div>\n            \n            {/* Navigation */}\n            <div className=\"flex gap-5\">\n              <button\n                onClick={handlePrev}\n                className=\"flex items-center justify-center hover:opacity-80 transition-opacity\"\n                style={{\n                  width: \"48px\",\n                  height: \"48px\",\n                  backgroundColor: isPrimary ? \"color-mix(in srgb, var(--canvas-flair-bg) 70%, white)\" : \"var(--canvas-border)\",\n                  borderRadius: \"var(--spacing-md)\",\n                }}\n              >\n                <CaretLeft size={32} style={{ color: isPrimary ? \"white\" : \"var(--canvas-text)\" }} weight=\"bold\" />\n              </button>\n              <button\n                onClick={handleNext}\n                className=\"flex items-center justify-center hover:opacity-80 transition-opacity\"\n                style={{\n                  width: \"48px\",\n                  height: \"48px\",\n                  backgroundColor: isPrimary ? \"color-mix(in srgb, var(--canvas-flair-bg) 70%, white)\" : \"var(--canvas-border)\",\n                  borderRadius: \"var(--spacing-md)\",\n                }}\n              >\n                <CaretRight size={32} style={{ color: isPrimary ? \"white\" : \"var(--canvas-text)\" }} weight=\"bold\" />\n              </button>\n            </div>\n          </div>\n        </div>\n        \n        {/* Image */}\n        <div \n          className=\"shrink-0 overflow-hidden hidden lg:block\"\n          style={{\n            width: \"320px\",\n            height: \"400px\",\n            borderRadius: \"var(--spacing-lg)\",\n          }}\n        >\n          <img \n            src={current.image} \n            alt={current.author}\n            className=\"w-full h-full object-cover\"\n          />\n        </div>\n      </div>\n    </section>\n  );\n}\n"
     }
   ],
   "dependencies": [

package/registry/blocks/tile-image-gallery.json

@@ -0,0 +1,26 @@
+{
+  "name": "tile-image-gallery",
+  "type": "registry:block",
+  "description": "Hero image gallery with one large image on the left and a 2x2 grid of thumbnails on the right, plus a 'View all' button overlay. Full-width block (~400px tall). Use at the top of product detail pages, listing pages, or property pages for immersive visual browsing.",
+  "keywords": [
+    "gallery",
+    "images",
+    "photos",
+    "tiles",
+    "product",
+    "listing"
+  ],
+  "visualWeight": "spacer",
+  "files": [
+    {
+      "path": "components/blocks/tile-image-gallery.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 TileGalleryImage {\n  /** Unique identifier */\n  id: string;\n  /** Image source URL */\n  src: string;\n  /** Alt text for the image */\n  alt?: string;\n}\n\nexport interface TileImageGalleryProps {\n  /** Array of images (first image is the large hero, next 4 fill the grid) */\n  images?: TileGalleryImage[];\n  /** Callback when \"View all\" button is clicked */\n  onViewAll?: () => void;\n  /** Label for the \"View all\" button */\n  viewAllLabel?: string;\n  /** Gallery height */\n  height?: string;\n  /** Additional class names */\n  className?: string;\n}\n\n// ============================================================================\n// Default Data\n// ============================================================================\n\nconst DEFAULT_IMAGES: TileGalleryImage[] = [\n  { id: \"1\", src: \"https://images.unsplash.com/photo-1590490360182-c33d955c4644?w=800&h=600&fit=crop\", alt: \"Hotel room\" },\n  { id: \"2\", src: \"https://images.unsplash.com/photo-1566073771259-6a8506099945?w=400&h=300&fit=crop\", alt: \"Hotel exterior\" },\n  { id: \"3\", src: \"https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?w=400&h=300&fit=crop\", alt: \"Hotel lobby\" },\n  { id: \"4\", src: \"https://images.unsplash.com/photo-1584132967334-10e028bd69f7?w=400&h=300&fit=crop\", alt: \"Hotel pool\" },\n  { id: \"5\", src: \"https://images.unsplash.com/photo-1571896349842-33c89424de2d?w=400&h=300&fit=crop\", alt: \"Hotel view\" },\n];\n\n// ============================================================================\n// TileImageGallery\n// ============================================================================\n\n/**\n * Canvas Design System - Tile Image Gallery\n *\n * A hero image gallery with one large image on the left and four smaller\n * images in a 2x2 grid on the right, plus a \"View all\" button overlay.\n * On mobile, only the main image is shown.\n */\nexport function TileImageGallery({\n  images = DEFAULT_IMAGES,\n  onViewAll,\n  viewAllLabel = \"View all\",\n  height = \"360px\",\n  className,\n}: TileImageGalleryProps) {\n  const [main, ...rest] = images;\n  const gridImages = rest.slice(0, 4);\n\n  return (\n    <div\n      className={cn(\"relative w-full overflow-hidden\", className)}\n      style={{ height }}\n    >\n      <div className=\"flex h-full\">\n        {/* Main large image */}\n        {main && (\n          <div\n            className=\"relative h-full shrink-0 w-full md:w-[57%]\"\n            style={{\n              borderRight: \"1px solid var(--canvas-background)\",\n            }}\n          >\n            <img\n              src={main.src}\n              alt={main.alt ?? \"\"}\n              className=\"absolute inset-0 w-full h-full object-cover\"\n            />\n          </div>\n        )}\n\n        {/* 2x2 thumbnail grid (hidden on mobile) */}\n        <div className=\"hidden md:flex flex-1 flex-col min-w-0\">\n          {/* Top row */}\n          <div className=\"flex flex-1 min-h-0\">\n            {gridImages[0] && (\n              <div\n                className=\"relative flex-1 min-w-0\"\n                style={{\n                  borderRight: \"1px solid var(--canvas-background)\",\n                  borderBottom: \"1px solid var(--canvas-background)\",\n                }}\n              >\n                <img\n                  src={gridImages[0].src}\n                  alt={gridImages[0].alt ?? \"\"}\n                  className=\"absolute inset-0 w-full h-full object-cover\"\n                />\n              </div>\n            )}\n            {gridImages[1] && (\n              <div className=\"relative flex-1 min-w-0\">\n                <img\n                  src={gridImages[1].src}\n                  alt={gridImages[1].alt ?? \"\"}\n                  className=\"absolute inset-0 w-full h-full object-cover\"\n                />\n              </div>\n            )}\n          </div>\n          {/* Bottom row */}\n          <div className=\"flex flex-1 min-h-0\">\n            {gridImages[2] && (\n              <div className=\"relative flex-1 min-w-0\">\n                <img\n                  src={gridImages[2].src}\n                  alt={gridImages[2].alt ?? \"\"}\n                  className=\"absolute inset-0 w-full h-full object-cover\"\n                />\n              </div>\n            )}\n            {gridImages[3] && (\n              <div\n                className=\"relative flex-1 min-w-0\"\n                style={{\n                  borderLeft: \"1px solid var(--canvas-background)\",\n                  borderTop: \"1px solid var(--canvas-background)\",\n                }}\n              >\n                <img\n                  src={gridImages[3].src}\n                  alt={gridImages[3].alt ?? \"\"}\n                  className=\"absolute inset-0 w-full h-full object-cover\"\n                />\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n\n      {/* View all button */}\n      <div\n        className=\"absolute\"\n        style={{\n          right: \"var(--spacing-xl)\",\n          bottom: \"var(--spacing-xl)\",\n        }}\n      >\n        <Button variant=\"neutral\" size=\"default\" onClick={onViewAll}>\n          {viewAllLabel}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"
+    }
+  ],
+  "dependencies": [],
+  "registryDependencies": [
+    "lib/utils",
+    "ui/button"
+  ]
+}

package/registry/blocks/title-group.json

@@ -1,7 +1,16 @@
 {
   "name": "title-group",
   "type": "registry:block",
-  "description": "",
+  "description": "Header section with title, subtitle, optional sort dropdown, filter popover, and action button. Compact (~48px tall). Use as the header for any content block — pairs with data tables, lists, card grids, or any section that needs a scannable title landmark.",
+  "keywords": [
+    "title",
+    "header",
+    "section",
+    "sort",
+    "filter",
+    "action"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "components/blocks/title-group.tsx",

package/registry/blocks/upvoting-posts-table.json

@@ -1,7 +1,16 @@
 {
   "name": "upvoting-posts-table",
   "type": "registry:block",
-  "description": "Social feed with upvoting posts, comments, and nested replies. Features header with sort/filter controls.",
+  "description": "Social feed with upvotable posts, comment threads, and nested replies. Each post has an upvote button with count, title, description, and author info. Use for feature request boards, community forums, Q&A sites, or feedback portals.",
+  "keywords": [
+    "forum",
+    "upvote",
+    "posts",
+    "community",
+    "feedback",
+    "feature-requests"
+  ],
+  "visualWeight": "heavy",
   "files": [
     {
       "path": "components/blocks/upvoting-posts-table.tsx",

package/registry/blocks/vertical-how-it-works.json

@@ -1,7 +1,15 @@
 {
   "name": "vertical-how-it-works",
   "type": "registry:block",
-  "description": "Vertical how it works with large numbers. Has light/dark variants.",
+  "description": "Vertical numbered list of steps with large step numbers, titles, and descriptions. Header with title and description. Light and dark variants. Use for process explanations, getting started guides, or numbered feature lists.",
+  "keywords": [
+    "steps",
+    "process",
+    "numbered",
+    "how-it-works",
+    "guide"
+  ],
+  "visualWeight": "medium",
   "files": [
     {
       "path": "components/blocks/marketing/vertical-how-it-works.tsx",

package/registry/blocks/vertical-step-tracker.json

@@ -1,7 +1,15 @@
 {
   "name": "vertical-step-tracker",
   "type": "registry:block",
-  "description": "Vertical step tracker for sidebar placement in multi-step flows.",
+  "description": "Vertical step tracker for sidebar placement in multi-step flows. Steps shown as a vertical list with numbers, titles, and optional descriptions. Use when horizontal space is limited.",
+  "keywords": [
+    "steps",
+    "wizard",
+    "progress",
+    "tracker",
+    "vertical"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "components/blocks/vertical-step-tracker.tsx",

package/registry/blocks/video-chat-controls.json

@@ -1,7 +1,15 @@
 {
   "name": "video-chat-controls",
   "type": "registry:block",
-  "description": "Row of circular buttons for video calls: camera, mic, cast, leave.",
+  "description": "Row of circular toggle buttons for video/audio calls: camera on/off, microphone on/off, screen cast, and leave/end call. Use at the bottom of any video conferencing or audio call interface.",
+  "keywords": [
+    "video",
+    "call",
+    "controls",
+    "camera",
+    "microphone"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "components/blocks/video-chat-controls.tsx",

package/registry/blocks/video-content-section.json

@@ -1,7 +1,15 @@
 {
   "name": "video-content-section",
   "type": "registry:block",
-  "description": "Video player area with metadata and description.",
+  "description": "Video player area with title, metadata (views, date, channel), description text, and social actions. Use for video detail pages, course lessons, or media content pages.",
+  "keywords": [
+    "video",
+    "player",
+    "content",
+    "media",
+    "description"
+  ],
+  "visualWeight": "heavy",
   "files": [
     {
       "path": "components/blocks/video-content-section.tsx",

package/registry/blocks/video-playlist.json

@@ -1,7 +1,15 @@
 {
   "name": "video-playlist",
   "type": "registry:block",
-  "description": "Sidebar playlist for video content with thumbnails.",
+  "description": "Sidebar playlist of video items with thumbnails, titles, and duration. Current video highlighted. Use for course lessons, tutorial series, or any sequential video content.",
+  "keywords": [
+    "playlist",
+    "videos",
+    "lessons",
+    "course",
+    "tutorial"
+  ],
+  "visualWeight": "medium",
   "files": [
     {
       "path": "components/blocks/video-playlist.tsx",

package/registry/blocks/video-popup.json

@@ -1,7 +1,15 @@
 {
   "name": "video-popup",
   "type": "registry:block",
-  "description": "",
+  "description": "YouTube video player modal displaying full-width video. Centered dialog. Use for video previews, tutorial popups, or any embedded video in a modal context.",
+  "keywords": [
+    "video",
+    "youtube",
+    "modal",
+    "player",
+    "tutorial"
+  ],
+  "visualWeight": "medium",
   "files": [
     {
       "path": "components/blocks/video-popup.tsx",

package/registry/blocks/view-profile-popup.json

@@ -1,7 +1,16 @@
 {
   "name": "view-profile-popup",
   "type": "registry:block",
-  "description": "",
+  "description": "Profile card modal with gradient banner, overlapping avatar, star rating, flexible detail rows (text/tags/icons), message/more-options buttons, and optional profile link. Centered dialog (~400px tall). Use for user profile previews, contact cards, or member detail popups.",
+  "keywords": [
+    "profile",
+    "modal",
+    "user",
+    "avatar",
+    "rating",
+    "contact"
+  ],
+  "visualWeight": "medium",
   "files": [
     {
       "path": "components/blocks/view-profile-popup.tsx",

package/registry/blocks/webcam-preview.json

@@ -1,7 +1,15 @@
 {
   "name": "webcam-preview",
   "type": "registry:block",
-  "description": "Live webcam preview component with optional overlay controls.",
+  "description": "Video preview component showing a webcam or video feed with optional overlay controls. Use for video call self-view, camera preview, or live streaming interfaces.",
+  "keywords": [
+    "video",
+    "webcam",
+    "camera",
+    "preview",
+    "stream"
+  ],
+  "visualWeight": "medium",
   "files": [
     {
       "path": "components/blocks/webcam-preview.tsx",

package/registry/hooks/use-css-variable-sync.json

@@ -1,7 +1,16 @@
 {
   "name": "use-css-variable-sync",
   "type": "registry:hook",
-  "description": "",
+  "description": "React hook that synchronizes CSS custom properties (design tokens) with a JavaScript theme object. Applies theme overrides by setting CSS variables on a target element. Use for runtime theme switching or dynamic theming.",
+  "keywords": [
+    "hook",
+    "css",
+    "variables",
+    "theme",
+    "sync",
+    "tokens"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "hooks/use-css-variable-sync.ts",

package/registry/hooks/use-mobile.json

@@ -1,7 +1,15 @@
 {
   "name": "use-mobile",
   "type": "registry:hook",
-  "description": "",
+  "description": "React hook that returns a boolean indicating if the viewport is mobile-sized (below 768px). Updates on window resize. Use for responsive behavior in components.",
+  "keywords": [
+    "hook",
+    "mobile",
+    "responsive",
+    "breakpoint",
+    "viewport"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "hooks/use-mobile.ts",