@utopia-studio-design/design-system-cli 0.1.0 → 0.3.0

package/data/templates/saas-solution-homepage/template.manifest.json

@@ -0,0 +1,36 @@
+{
+  "id": "template-saas-solution-homepage",
+  "name": "SaaS Solution Website",
+  "category": "website-page",
+  "status": "available",
+  "purpose": "A complete product-led SaaS website family spanning marketing, product, proof, adoption, updates, integrations, and sales contact surfaces.",
+  "packageImport": "@utopia-studio-design/design-system",
+  "sourcePath": "templates/saas-solution-homepage/main.tsx",
+  "entryPath": "templates/saas-solution-homepage/index.html",
+  "shadcnFoundation": ["Navigation Menu", "Button", "Badge", "Card", "Input", "Select", "Textarea"],
+  "requiredTokens": ["background", "foreground", "muted-foreground", "surface", "surface-strong", "border", "primary", "ring", "radius-control", "radius-surface", "space-*", "motion-duration-*"],
+  "sections": ["Hero", "Product interface preview", "Core workflow", "Agents and automation", "Integrations", "Security and reliability", "Team proof", "Adoption CTA", "Footer"],
+  "pages": [
+    { "id": "home", "path": "index.html", "purpose": "Primary narrative and product proof" },
+    { "id": "product", "path": "product/index.html", "purpose": "Product overview and capability architecture" },
+    { "id": "agents", "path": "agents/index.html", "purpose": "Automation and agent governance" },
+    { "id": "integrations", "path": "integrations/index.html", "purpose": "Searchable integration directory" },
+    { "id": "integration-detail", "path": "integrations/slack/index.html", "purpose": "Integration capabilities and setup" },
+    { "id": "customers", "path": "customers/index.html", "purpose": "Customer proof library" },
+    { "id": "customer-story", "path": "customers/aster-labs/index.html", "purpose": "Long-form customer case study" },
+    { "id": "pricing", "path": "pricing/index.html", "purpose": "Plans, comparison, and FAQ" },
+    { "id": "changelog", "path": "changelog/index.html", "purpose": "Product update timeline" },
+    { "id": "contact-sales", "path": "contact-sales/index.html", "purpose": "Sales qualification form and success state" }
+  ],
+  "features": { "lightDark": true, "rtl": true, "responsive": true, "seededDemoData": true, "scrollAwareNavigation": true, "reducedMotion": true },
+  "useWhen": ["A SaaS product needs a complete product-led marketing narrative", "A real interface preview can carry the product proof", "Automation, integrations, and reliability are material buying criteria"],
+  "avoidWhen": ["The page is a single-feature launch", "The primary experience is editorial", "There is no reviewed product model behind the interface claims"],
+  "neverInvent": ["Do not copy Linear branding, copy, assets, or proprietary interface details", "Do not hard-code brand primitives inside reusable components", "Do not use left/right-only layout APIs where logical properties work", "Do not invent production customer claims from seeded demo content"],
+  "queryParameters": { "seed": "Integer used to deterministically select product, company, people, pricing, and proof data." },
+  "defaultUrl": "/templates/saas-solution-homepage/index.html?seed=1974341818#agents",
+  "themeContract": {
+    "default": "utopia-default",
+    "generationFlag": "--theme <id>",
+    "ownership": "The active theme owns dark/light semantic mappings; the template owns no brand primitives."
+  }
+}

package/lib/api.mjs

@@ -0,0 +1,152 @@
+import { existsSync, readFileSync, readdirSync } from 'node:fs'
+import { dirname, join, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const packageRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..')
+const workspaceRoot = resolve(packageRoot, '../..')
+const packagedDataRoot = join(packageRoot, 'data')
+const hasWorkspaceSource = existsSync(join(workspaceRoot, 'packages/design-system/src/manifests/components.json'))
+
+export const apiVersion = 1
+export const cliVersion = '0.3.0'
+export const mcpLaunch = {
+  command: 'npx',
+  args: ['-y', '--package', '@utopia-studio-design/design-system-cli', 'utopia-ds', 'mcp'],
+}
+
+export function paths(root = hasWorkspaceSource ? workspaceRoot : packagedDataRoot) {
+  return {
+    root,
+    manifests: hasWorkspaceSource && root === workspaceRoot ? join(root, 'packages/design-system/src/manifests') : join(root, 'manifests'),
+    docs: hasWorkspaceSource && root === workspaceRoot ? join(root, 'docs/design-system') : join(root, 'docs'),
+  }
+}
+
+function readJson(path) {
+  return JSON.parse(readFileSync(path, 'utf8'))
+}
+
+function normalize(value) {
+  return String(value).toLowerCase().replace(/[^a-z0-9]/g, '')
+}
+
+export function envelope(type, data, meta = {}) {
+  return { apiVersion, type, data, meta: { version: cliVersion, ...meta } }
+}
+
+export function getCatalog() {
+  return readJson(join(paths().manifests, 'catalog.json'))
+}
+
+export function listComponents() {
+  return [...readJson(join(paths().manifests, 'components.json')).components]
+    .sort((a, b) => a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: 'base' }))
+}
+
+export function getComponent(name) {
+  const key = normalize(name)
+  return listComponents().find((item) => normalize(item.name) === key) ?? null
+}
+
+export function listTemplates() {
+  return readJson(join(paths().manifests, 'templates.json')).templates
+}
+
+export function getTemplate(name) {
+  const key = normalize(name)
+  return listTemplates().find((item) => normalize(item.id) === key || normalize(item.title) === key) ?? null
+}
+
+export function listThemes() {
+  return readJson(join(paths().manifests, 'themes.json')).themes
+}
+
+export function getTheme(name) {
+  const key = normalize(name)
+  const entry = listThemes().find((item) => normalize(item.id) === key || normalize(item.name) === key)
+  if (!entry) return null
+  const policyPath = hasWorkspaceSource
+    ? join(workspaceRoot, entry.policyManifest)
+    : join(paths().manifests, entry.policyManifest.split('/').at(-1))
+  return { ...entry, policy: readJson(policyPath) }
+}
+
+export function listDocs() {
+  return readdirSync(paths().docs)
+    .filter((name) => name.endsWith('.md'))
+    .map((name) => name.slice(0, -3))
+    .sort()
+}
+
+export function getDoc(topic) {
+  const match = listDocs().find((name) => normalize(name) === normalize(topic))
+  if (!match) return null
+  return { topic: match, content: readFileSync(join(paths().docs, `${match}.md`), 'utf8') }
+}
+
+export function search(query) {
+  const terms = String(query).toLowerCase().split(/\s+/).filter(Boolean)
+  const score = (text) => terms.reduce((total, term) => total + (text.toLowerCase().includes(term) ? 1 : 0), 0)
+  const results = [
+    ...listComponents().map((item) => ({ kind: 'component', id: item.name, title: item.name, summary: [...item.useWhen, item.category].join(' '), item })),
+    ...listTemplates().map((item) => ({ kind: 'template', id: item.id, title: item.title, summary: `${item.category} ${item.purpose}`, item })),
+    ...listThemes().map((item) => ({ kind: 'theme', id: item.id, title: item.name, summary: item.role, item })),
+    ...listDocs().map((topic) => ({ kind: 'docs', id: topic, title: topic, summary: getDoc(topic)?.content.slice(0, 500) ?? '', item: { topic } })),
+  ]
+  return results
+    .map((result) => ({ ...result, score: score(`${result.title} ${result.summary}`) }))
+    .filter((result) => result.score > 0)
+    .sort((a, b) => b.score - a.score || a.title.localeCompare(b.title))
+    .map(({ summary: _summary, ...result }) => result)
+}
+
+export function capabilityManifest() {
+  return {
+    name: 'utopia-ds',
+    version: cliVersion,
+    description: 'Ceramic Design System interface for humans, agents, build tools, and MCP clients.',
+    transports: ['cli', 'json', 'mcp-stdio', 'programmatic-api'],
+    globalOptions: [
+      { flag: '--json', type: 'boolean', description: 'Return a typed JSON envelope.' },
+      { flag: '--dense', type: 'boolean', description: 'Return compact agent-readable text.' },
+    ],
+    commands: [
+      { name: 'init', args: ['[directory]'], flags: ['--yes', '--theme <id>'], responseType: 'init-result' },
+      { name: 'search', args: ['<query>'], flags: [], responseType: 'search-results' },
+      { name: 'component', args: ['<name>|--list'], flags: [], responseType: 'component|component-list' },
+      { name: 'template', args: ['<id>|--list'], flags: ['--skeleton', '--copy <directory>', '--theme <id>', '--force'], responseType: 'template|template-list|template-copy-result' },
+      { name: 'theme', args: ['<id>|--list', 'create <id> [directory]'], flags: ['--force'], responseType: 'theme|theme-list|theme-create-result' },
+      { name: 'docs', args: ['<topic>|--list'], flags: [], responseType: 'docs|docs-list' },
+      { name: 'manifest', args: [], flags: [], responseType: 'manifest' },
+      { name: 'doctor', args: [], flags: [], responseType: 'doctor-result' },
+      { name: 'mcp', args: [], flags: [], responseType: 'stdio-server' },
+    ],
+    mcp: {
+      ...mcpLaunch,
+      tools: ['search', 'list_components', 'get_component', 'list_templates', 'get_template', 'list_themes', 'get_theme', 'list_docs', 'get_docs', 'doctor'],
+    },
+  }
+}
+
+export function repositoryDoctor() {
+  const required = [
+    'catalog.json', 'components.json', 'templates.json', 'themes.json',
+  ].map((name) => join(paths().manifests, name))
+  const docs = ['quick-start-ai', 'arabic-friendly', 'theme-authoring'].map((name) => join(paths().docs, `${name}.md`))
+  const missing = [...required, ...docs].filter((path) => !existsSync(path))
+  return {
+    ok: missing.length === 0,
+    checks: {
+      manifests: required.every(existsSync),
+      docs: docs.every(existsSync),
+      components: listComponents().length,
+      templates: listTemplates().length,
+      themes: listThemes().length,
+      mcp: existsSync(join(packageRoot, 'bin/utopia-ds-mcp.mjs'))
+        && mcpLaunch.command === 'npx'
+        && mcpLaunch.args.includes('utopia-ds')
+        && mcpLaunch.args.at(-1) === 'mcp',
+    },
+    missing,
+  }
+}

package/package.json

@@ -1,30 +1,32 @@
 {
   "name": "@utopia-studio-design/design-system-cli",
-  "version": "0.1.0",
-  "description": "CLI for installing, inspecting, and validating the Utopia Studio design system.",
+  "version": "0.3.0",
+  "description": "AI-readable CLI and MCP server for Ceramic Design System",
   "type": "module",
   "license": "MIT",
   "bin": {
-    "utopia-ds": "bin/utopia-ds.mjs"
+    "utopia-ds": "bin/utopia-ds.mjs",
+    "ceramic-mcp": "bin/utopia-ds-mcp.mjs"
+  },
+  "exports": {
+    ".": "./lib/api.mjs",
+    "./api": "./lib/api.mjs",
+    "./mcp": "./bin/utopia-ds-mcp.mjs"
   },
   "files": [
     "bin",
-    "templates",
-    "README.md",
-    "LICENSE"
+    "lib",
+    "data",
+    "README.md"
   ],
-  "publishConfig": {
-    "access": "public"
-  },
   "scripts": {
-    "build": "node bin/utopia-ds.mjs --help",
-    "check": "node bin/utopia-ds.mjs tokens > /tmp/utopia-ds-tokens.json && node bin/utopia-ds.mjs doctor --cwd ../..",
-    "prepublishOnly": "npm run check"
+    "sync-data": "node scripts/sync-data.mjs",
+    "prepack": "npm run sync-data"
   },
-  "dependencies": {
-    "@utopia-studio-design/design-system": "0.1.0"
+  "publishConfig": {
+    "access": "public"
   },
   "engines": {
-    "node": ">=18.18"
+    "node": ">=20"
   }
 }

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2026 The Utopia Studio
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/templates/agent-docs/examples.md

@@ -1,33 +0,0 @@
-# Site Examples
-
-Use this page as the human-readable companion to `site-examples.json`.
-
-## Source
-
-- Prefer `packages/design-system/src/manifests/site-examples.json` when it exists in the app.
-- If the manifest is installed through the package, read `node_modules/@utopia-studio-design/design-system/site-examples.json`.
-- Use this document as an index for humans and AI agents; keep detailed examples source-driven.
-
-## Rules
-
-- Use real Utopia sample copy before inventing placeholder content.
-- Preserve `sourceRoute` and source file references when generating docs or UI examples.
-- Use examples for content shape, tone, and component fit only.
-- Use `tokens.json`, `themes.json`, `components.json`, and `patterns.json` for design rules.
-
-## Expected Collections
-
-- `sourceRoutes`: route labels, hrefs, and source files.
-- `badges`: status and taxonomy labels with variants.
-- `cards`: Card-ready examples with eyebrow, title, body, href, source route, and component fit.
-- `heroes`: PageHero-ready examples with actions.
-- `ctas`: CtaSection-ready examples with actions.
-- `agentRules`: source-example rules for AI agents.
-
-## Workflow
-
-1. Read `site-examples.json`.
-2. Choose the collection that matches the component or template.
-3. Copy the content shape, not just the words.
-4. Keep Utopia-specific language and routes.
-5. Do not create generic SaaS metrics, fake companies, decorative cards, or placeholder copy.

package/templates/agent-docs/index.md

@@ -1,78 +0,0 @@
-# Utopia Studio Design System for AI Agents
-
-Use this as the canonical design guidance when generating Utopia Studio UI.
-
-## Intent
-
-The interface is architectural, editorial, precise, calm, and commercially credible.
-
-## Rules
-
-- Utopia is the default/reference theme, not the whole design system.
-- For the Utopia brand site, use TWK Lausanne, Special Black, White, Brick Red, Light Grey, and black/red tints.
-- For themeable apps/templates, map every visual decision through semantic roles in `themes.json`.
-- Use `site-examples.json` for real Utopia examples before writing placeholder content.
-- Use `docs/design-system/examples.md` when a human-readable source-example summary is enough.
-- Use `templates.json` for page structure before inventing layouts.
-- Keep all primary surfaces square.
-- Use hairline borders instead of shadows.
-- In the Utopia theme, Brick Red is action, focus, active states, and emphasis.
-- Do not create gradients, glass panels, decorative blobs, or rounded SaaS cards.
-- Use semantic headings and visible focus states.
-
-## Theme Decision Gate
-
-Before generating UI, decide:
-
-1. Is this for the Utopia Studio brand site?
-2. Is this for a themeable app/template?
-3. Is this a new theme?
-
-Use the locked `utopia` theme for the brand site. For themeable contexts, use semantic roles and make sure every role in `themes.json` is defined before using a new theme.
-
-## Core Components
-
-Before inventing UI, inspect each component's `agentContract` in `packages/design-system/src/manifests/components.json`.
-Read component `props`, `anatomy`, `states`, and `slots` before composing examples.
-Before writing docs examples, inspect `packages/design-system/src/manifests/site-examples.json`.
-When reading quickly, use `docs/design-system/examples.md` for the generated source-example summary.
-Before scaffolding a page, inspect `packages/design-system/src/manifests/templates.json`.
-
-- Button
-- IconButton
-- ButtonGroup
-- Card
-- Badge
-- PageHero
-- CtaSection
-- Topbar
-
-## Agent Contract
-
-Each manifest component should define:
-
-- `useWhen`
-- `avoidWhen`
-- `fallbackToShadcn`
-- `requiredTokens`
-- `neverInvent`
-- `validationChecklist`
-
-Component entries can also define:
-
-- `props`
-- `anatomy`
-- `states`
-- `slots`
-
-If a needed UI primitive is missing, first try `npx shadcn@latest add <primitive> --yes`, then layer Utopia tokens and rules on top.
-
-## CLI
-
-```sh
-utopia-ds init
-utopia-ds add button
-utopia-ds add card
-utopia-ds tokens
-utopia-ds doctor
-```

package/templates/agent-docs/llms.txt

@@ -1,33 +0,0 @@
-# Utopia Studio Design System
-
-Canonical package: @utopia-studio-design/design-system
-CLI package: @utopia-studio-design/design-system-cli
-
-Read first:
-- docs/design-system/agent-docs/index.md
-- docs/design-system/examples.md
-- packages/design-system/src/tokens.json
-- packages/design-system/src/manifests/components.json
-- packages/design-system/src/manifests/patterns.json
-- packages/design-system/src/manifests/themes.json
-- packages/design-system/src/manifests/site-examples.json
-- packages/design-system/src/manifests/templates.json
-
-Agent contract:
-- Read each component's agentContract before creating UI.
-- Read component props, anatomy, states, and slots before composing examples.
-- Prefer fallbackToShadcn via `npx shadcn@latest add <primitive> --yes`.
-- Never invent tokens, colors, shapes, or component APIs outside the manifest.
-- Utopia is the default/reference theme, not the whole design system.
-- For the Utopia brand site use the locked Utopia theme; for themeable apps/templates map decisions through semantic roles.
-- Use site-examples.json for real Utopia sample copy before inventing examples.
-- Use docs/design-system/examples.md when a human-readable source-example summary is enough.
-- Use templates.json for page structure before inventing layouts.
-
-Design rules:
-- Square geometry.
-- TWK Lausanne only.
-- Utopia theme palette: Brick Red, Special Black, White, Light Grey, and approved tints.
-- Themeable architecture: use semantic roles before raw values.
-- Borders over shadows.
-- No gradients, glassmorphism, blobs, or rounded SaaS cards.

package/templates/components/badge.tsx

@@ -1,12 +0,0 @@
-import * as React from 'react'
-
-import { cn } from '../../lib/utils'
-
-export function Badge({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn('inline-flex w-fit items-center border px-2.5 py-1 text-xs font-medium uppercase', className)}
-      {...props}
-    />
-  )
-}

package/templates/components/brand-action.tsx

@@ -1,32 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority'
-import type * as React from 'react'
-
-import { cn } from '../../lib/utils'
-
-const brandActionVariants = cva('brand-action', {
-  variants: {
-    variant: {
-      primary: 'brand-action--primary',
-      secondary: 'brand-action--secondary',
-      ghost: 'brand-action--ghost',
-    },
-  },
-  defaultVariants: {
-    variant: 'primary',
-  },
-})
-
-export interface BrandActionProps
-  extends React.AnchorHTMLAttributes<HTMLAnchorElement>,
-    VariantProps<typeof brandActionVariants> {
-  label: string
-}
-
-export function BrandAction({ className, label, variant, ...props }: BrandActionProps) {
-  return (
-    <a className={cn(brandActionVariants({ className, variant }))} {...props}>
-      <span>{label}</span>
-      {variant === 'primary' || !variant ? <span aria-hidden="true">-&gt;</span> : null}
-    </a>
-  )
-}

package/templates/components/button-group.tsx

@@ -1,30 +0,0 @@
-import * as React from 'react'
-
-import { cn } from '../../lib/utils'
-import { Button, type ButtonProps } from './button'
-
-export function ButtonGroup({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn('utopia-button-group', className)}
-      role="group"
-      {...props}
-    />
-  )
-}
-
-export const ButtonGroupButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant = 'secondary', ...props }, ref) => (
-    <Button
-      className={cn('utopia-button-group__button', className)}
-      ref={ref}
-      variant={variant}
-      {...props}
-    />
-  ),
-)
-
-ButtonGroupButton.displayName = 'ButtonGroupButton'

package/templates/components/button.tsx

@@ -1,44 +0,0 @@
-import * as React from 'react'
-import { Slot } from '@radix-ui/react-slot'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-import { cn } from '../../lib/utils'
-
-const buttonVariants = cva(
-  'utopia-button inline-flex shrink-0 items-center justify-center disabled:pointer-events-none disabled:opacity-50',
-  {
-    variants: {
-      variant: {
-        primary: '',
-        default: '',
-        destructive: 'bg-[hsl(var(--destructive))] text-[hsl(var(--destructive-foreground))]',
-        secondary: 'bg-[hsl(var(--secondary))] text-[hsl(var(--secondary-foreground))]',
-        outline: 'border-[hsl(var(--border))] bg-transparent text-[hsl(var(--foreground))]',
-        ghost: 'border-transparent bg-transparent text-[hsl(var(--foreground))]',
-        link: 'h-auto min-h-0 border-0 bg-transparent px-0 underline underline-offset-4 hover:text-[hsl(var(--primary))]',
-      },
-      size: {
-        default: '',
-        sm: 'h-[var(--button-height)] px-[var(--button-padding-x)]',
-        lg: 'h-12',
-        icon: 'size-11 p-0',
-      },
-    },
-    defaultVariants: { variant: 'primary', size: 'default' },
-  },
-)
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
-}
-
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ asChild = false, className, size, variant, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button'
-    return <Comp className={cn(buttonVariants({ className, size, variant }))} ref={ref} {...props} />
-  },
-)
-
-Button.displayName = 'Button'

package/templates/components/card.tsx

@@ -1,23 +0,0 @@
-import * as React from 'react'
-
-import { cn } from '../../lib/utils'
-
-export function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn('utopia-card', className)} {...props} />
-}
-
-export function CardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn('grid gap-1.5 p-5', className)} {...props} />
-}
-
-export function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
-  return <h3 className={cn('m-0 text-2xl font-medium leading-tight', className)} {...props} />
-}
-
-export function CardDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
-  return <p className={cn('m-0 text-sm leading-6 opacity-75', className)} {...props} />
-}
-
-export function CardContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn('p-5 pt-0', className)} {...props} />
-}

package/templates/components/cta-section.tsx

@@ -1,34 +0,0 @@
-import { cn } from '../../lib/utils'
-import { BrandAction } from './brand-action'
-
-type CtaAction = {
-  href: string
-  label: string
-  variant?: 'primary' | 'secondary' | 'ghost'
-}
-
-export function CtaSection({
-  actions,
-  className,
-  eyebrow,
-  title,
-}: {
-  actions: CtaAction[]
-  className?: string
-  eyebrow: string
-  title: string
-}) {
-  return (
-    <section className={cn('brand-cta-section', className)}>
-      <div className="brand-cta-section__inner">
-        <p className="brand-cta-section__eyebrow">{eyebrow}</p>
-        <h2 className="m-0 text-[length:var(--type-hero-title)] font-bold leading-none">{title}</h2>
-        <div className="brand-cta-section__actions">
-          {actions.map((action) => (
-            <BrandAction key={action.label} {...action} />
-          ))}
-        </div>
-      </div>
-    </section>
-  )
-}

package/templates/components/icon-button.tsx

@@ -1,44 +0,0 @@
-import * as React from 'react'
-
-import { cn } from '../../lib/utils'
-import { Button, type ButtonProps } from './button'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip'
-
-export interface IconButtonProps
-  extends Omit<ButtonProps, 'children' | 'size'> {
-  children: React.ReactNode
-  label: string
-  tooltip?: string
-}
-
-export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ children, className, label, tooltip, variant = 'ghost', ...props }, ref) => {
-    const control = (
-      <Button
-        aria-label={label}
-        className={cn('utopia-icon-button', className)}
-        ref={ref}
-        size="icon"
-        variant={variant}
-        {...props}
-      >
-        {children}
-      </Button>
-    )
-
-    if (!tooltip) {
-      return control
-    }
-
-    return (
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>{control}</TooltipTrigger>
-          <TooltipContent>{tooltip}</TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-    )
-  },
-)
-
-IconButton.displayName = 'IconButton'