@layoutdesign/context 0.1.7

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 SuperDuper UI
+
+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/README.md

@@ -0,0 +1,424 @@
+# @layoutdesign/context
+
+**Give your AI agent a design system in one command.**
+
+[![npm version](https://img.shields.io/npm/v/@layoutdesign/context)](https://www.npmjs.com/package/@layoutdesign/context)
+[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](./LICENSE)
+[![Node >=18](https://img.shields.io/badge/node-%3E%3D18-blue)](https://nodejs.org)
+
+An MCP server and CLI that gives AI coding agents structured design system context — tokens, components, rules — so they produce on-brand UI instead of generic code.
+
+---
+
+## Quick Start
+
+Get set up in 60 seconds.
+
+```bash
+# Initialise your project with a starter kit
+npx @layoutdesign/context init --kit linear-lite
+
+# Auto-configure your AI coding agent
+npx @layoutdesign/context install
+```
+
+That's it. The `install` command detects Claude Code, Cursor, and Windsurf automatically and configures the MCP server for the current project.
+
+Your agent now has access to your full design system on every request.
+
+---
+
+## What It Does
+
+AI coding agents don't know your design system. They produce UI that looks generic, uses hardcoded colours, ignores your spacing scale, and references components that don't exist.
+
+`@layoutdesign/context` solves this by exposing your design system — tokens, components, rules — as MCP tools. Your agent calls `get_design_system` before writing UI, `get_tokens` when it needs exact values, and `check_compliance` before it finishes. The result is on-brand code from the first attempt.
+
+---
+
+## MCP Tools
+
+Ten tools are registered with the MCP server automatically.
+
+| Tool | Description |
+|------|-------------|
+| `get_design_system` | Returns the full DESIGN.md, or a filtered section (colours, typography, spacing, components). Use this before writing any UI. |
+| `get_tokens` | Returns design tokens in CSS custom properties, W3C DTCG JSON, or Tailwind config format. |
+| `get_component` | Returns the spec and code example for a named component. |
+| `list_components` | Lists all components defined in the active kit. |
+| `check_compliance` | Validates a code snippet against the design system — flags hardcoded colours, bad spacing, unknown tokens, and unrecognised components. |
+| `preview` | Pushes a component to the local live preview canvas at `localhost:4321`. Requires the preview server to be running. |
+| `push_to_figma` | Bridges to the Figma MCP server to create an editable Figma frame from component code. Requires Figma MCP to be configured separately. |
+| `design_in_figma` | Takes a natural language prompt (e.g. "A pricing card with 3 tiers") and returns design tokens, component specs, and step-by-step instructions for calling Figma MCP's `generate_figma_design`. Enables AI agents to design in Figma before writing code. Inputs: `prompt` (required), `fileKey` (optional), `viewports` (optional: desktop/tablet/mobile). |
+| `url_to_figma` | Captures a live website URL as editable Figma frames with auto-layout. Inputs: `url`, `viewports`, `outputMode` (newFile/existingFile/clipboard), `fileKey`. Requires both Figma MCP and Playwright MCP servers. |
+| `update_tokens` | Updates token values in `tokens.css`, `tokens.json`, and `DESIGN.md` simultaneously. Use when tweaking colours, spacing, or other tokens without re-extracting. Keeps the entire design system consistent. |
+
+---
+
+## CLI Commands
+
+| Command | Description |
+|---------|-------------|
+| `init` | Initialise `.layout/` in the current directory, optionally with a starter kit. |
+| `init --kit <name>` | Initialise with a specific kit (e.g. `linear-lite`). |
+| `serve` | Start the MCP server. This is what your AI agent connects to. |
+| `install` | Auto-configure MCP settings for Claude Code, Cursor, and Windsurf in one step. |
+| `install --target <tool>` | Target a specific tool: `claude`, `cursor`, or `windsurf`. |
+| `install --global` | Install globally so the MCP server is available in all projects (Claude Code only). |
+| `list` | List all available kits (free and pro). |
+| `use <kit>` | Switch the active kit in an existing `.layout/` directory. |
+| `import <path>` | Import a design system bundle exported from Layout (`.zip`). |
+
+**Examples:**
+
+```bash
+# Start with the Linear-inspired dark kit
+npx @layoutdesign/context init --kit linear-lite
+
+# Start with a blank template and write your own DESIGN.md
+npx @layoutdesign/context init
+
+# Auto-configure MCP settings for all supported editors
+npx @layoutdesign/context install
+
+# Auto-configure for Claude Code only
+npx @layoutdesign/context install --target claude
+
+# Install globally (available in all projects — each project uses its own .layout/)
+npx @layoutdesign/context install --global
+
+# Switch to a different kit
+npx @layoutdesign/context use stripe-lite
+
+# See all available kits
+npx @layoutdesign/context list
+
+# Import a bundle from Layout
+npx @layoutdesign/context import ./my-design-export.zip
+```
+
+---
+
+## Available Kits
+
+Three free starter kits are included. Premium kits are available at [layout.design/kits](https://layout.design/kits).
+
+### Free
+
+| Kit | Aesthetic | Description |
+|-----|-----------|-------------|
+| `linear-lite` | Dark, minimal, developer-focused | Developer tool design system inspired by Linear |
+| `stripe-lite` | Light, clean, high-trust | Payment UI design system inspired by Stripe |
+| `notion-lite` | Light, content-first, block-based | Productivity design system inspired by Notion |
+
+### Pro
+
+| Kit | Aesthetic | Components |
+|-----|-----------|------------|
+| `linear` | Dark, minimal, developer-focused | 24 components, all tokens |
+| `stripe` | Light, clean, high-trust | 20 components, all tokens |
+| `notion` | Light, content-first, block-based | 22 components, all tokens |
+| `revolut` | Dark fintech, data-rich | 30 components, all tokens |
+| `airbnb` | Warm, rounded, photo-forward | 25 components, all tokens |
+| `tiktok` | Dark, vibrant, video-first | 28 components, all tokens |
+| `netflix` | Dark, cinematic, content-forward | 18 components, all tokens |
+
+---
+
+## Setup Guides
+
+The easiest way to configure any supported editor is:
+
+```bash
+npx @layoutdesign/context install
+```
+
+This auto-detects Claude Code, Cursor, and Windsurf and configures the MCP server. For Claude Code it uses `claude mcp add` (the reliable method); for Cursor and Windsurf it writes the appropriate config file.
+
+### Per-Project vs Global
+
+By default, the MCP server is registered **per-project**. Each project needs its own `install`.
+
+For users working across multiple projects, install globally:
+
+```bash
+npx @layoutdesign/context install --global
+```
+
+The MCP server always reads `.layout/` from the current working directory, so each project uses its own design system — even with a global install.
+
+### Manual Setup
+
+If you prefer to configure manually:
+
+**Claude Code** (`.claude/settings.json`):
+
+```json
+{
+  "mcpServers": {
+    "layout": {
+      "command": "npx",
+      "args": ["-y", "@layoutdesign/context", "serve"]
+    }
+  }
+}
+```
+
+**Cursor** (`.cursor/mcp.json`):
+
+```json
+{
+  "mcpServers": {
+    "layout": {
+      "command": "npx",
+      "args": ["-y", "@layoutdesign/context", "serve"]
+    }
+  }
+}
+```
+
+**Windsurf** (`.windsurf/mcp.json`):
+
+```json
+{
+  "mcpServers": {
+    "layout": {
+      "command": "npx",
+      "args": ["-y", "@layoutdesign/context", "serve"]
+    }
+  }
+}
+```
+
+---
+
+## Live Preview
+
+The `preview` MCP tool and the preview canvas work together to give you visual verification without leaving your agent session.
+
+Start the preview server alongside the MCP server:
+
+```bash
+npx @layoutdesign/context serve
+```
+
+The preview canvas opens at `http://localhost:4321`. It features:
+
+- Dark UI with your active kit's design tokens applied
+- WebSocket-powered live updates — components render as the agent pushes them
+- Viewport toggles (mobile, tablet, desktop)
+- Source code panel to inspect what was rendered
+- TSX transpilation on the server — no browser-side build step
+
+When your agent calls the `preview` tool with a component, it appears in the canvas within milliseconds. Open the canvas in a browser tab alongside your editor and you have a live design review loop without any manual copy-paste.
+
+---
+
+## Figma Integration
+
+Three MCP tools bridge the gap between design and code using the [Figma MCP server](https://www.figma.com/developers/mcp): `push_to_figma`, `design_in_figma`, and `url_to_figma`.
+
+### Setup
+
+Add the Figma MCP server to your agent config alongside `design-context`. It uses OAuth — no API key required:
+
+```bash
+claude mcp add --transport http figma https://mcp.figma.com/mcp
+```
+
+Then authenticate when prompted. The Figma MCP server will open a browser tab for OAuth consent.
+
+### Figma Tools
+
+| Tool | What It Does |
+|------|--------------|
+| `push_to_figma` | Creates an editable Figma frame from component code. Returns a structured prompt for Figma MCP's `generate_figma_design`. |
+| `design_in_figma` | Takes a natural language prompt and returns design tokens, component specs, and step-by-step instructions for `generate_figma_design`. Design in Figma before writing any code. |
+| `url_to_figma` | Captures a live website URL as editable Figma frames with auto-layout. Requires Playwright MCP alongside Figma MCP. |
+
+### The Closed Loop
+
+```
+Developer prompts AI → AI calls get_design_system → generates TSX
+        ↓
+AI calls preview → renders at localhost:4321
+        ↓
+AI calls push_to_figma → editable frame in Figma
+        ↓
+Designer reviews → AI reads changes via Figma MCP → updates code
+```
+
+When `push_to_figma` is called, it returns a structured prompt ready to pass to the Figma MCP's `generate_figma_design` tool, including your component code and the relevant design tokens extracted from the active kit.
+
+---
+
+## Custom Design Systems
+
+You don't need a pre-built kit. You can write your own `DESIGN.md` and the MCP server will use it.
+
+**1. Create the `.layout/` directory:**
+
+```bash
+npx @layoutdesign/context init
+```
+
+This creates a blank template at `.layout/DESIGN.md` for you to fill in.
+
+**2. Edit `DESIGN.md` with your design system:**
+
+```markdown
+# My Design System
+
+## Colours
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| --color-primary | #0F172A | Primary actions |
+| --color-background | #FFFFFF | Page background |
+
+## Typography
+
+- **Font family:** Inter, system-ui, sans-serif
+- **Base size:** 16px
+
+## Components
+
+### Button
+
+Primary action button. Uses --color-primary as background.
+```
+
+**3. Optionally add token files:**
+
+```
+.layout/
+├── kit.json          # Metadata (name, version, description)
+├── DESIGN.md         # Human-readable design system spec
+├── tokens.css        # CSS custom properties
+├── tokens.json       # W3C DTCG tokens (optional)
+└── tailwind.config.js  # Tailwind theme extension (optional)
+```
+
+**4. Start the MCP server:**
+
+```bash
+npx @layoutdesign/context serve
+```
+
+The server reads whatever is in `.layout/` — no configuration needed.
+
+---
+
+## On-Disk Structure
+
+```
+.layout/
+├── kit.json            # Kit metadata (name, version, tier, component count)
+├── DESIGN.md           # Full design system spec — this is what agents read
+├── tokens.css          # CSS custom properties for all tokens
+├── tokens.json         # W3C DTCG tokens.json (for tooling integration)
+└── tailwind.config.js  # Tailwind theme config matching the token set
+```
+
+All files are plain text and checked into version control. Your whole team gets the same design context.
+
+---
+
+## Layout Integration
+
+[Layout](https://layout.design) extracts design systems from Figma files and live websites, then exports them as a `.zip` bundle ready for import.
+
+Use Layout to:
+
+- Extract tokens and components from an existing Figma file
+- Scrape a live website's design system (colours, typography, spacing, components)
+- Generate a structured `DESIGN.md` using Claude
+- Export a bundle containing `DESIGN.md`, `tokens.css`, `tokens.json`, and `tailwind.config.js`
+
+### Importing a Layout Export
+
+```bash
+npx @layoutdesign/context import ./my-design-export.zip
+```
+
+This extracts the bundle into `.layout/` and automatically merges design system rules into your project's root `CLAUDE.md` (using HTML comment markers for idempotent updates). Re-importing replaces the previous section cleanly.
+
+After importing, run `npx @layoutdesign/context install` to connect the MCP server.
+
+---
+
+## Compliance Checker
+
+The `check_compliance` tool validates a code snippet against your active kit and returns a structured result.
+
+### Rules
+
+| Rule | Severity | What It Catches |
+|------|----------|-----------------|
+| `hardcoded-colours` | Error | Hex values (`#fff`, `#6366F1`) and `rgb()`/`rgba()` that should reference tokens |
+| `hardcoded-spacing` | Warning | `margin: 12px` and similar pixel values that should use the spacing scale |
+| `missing-token-reference` | Warning | `var(--unknown-token)` calls not present in `tokens.css` |
+| `unknown-component` | Info | JSX components not listed in the kit's component inventory |
+
+### Response Shape
+
+```json
+{
+  "passed": false,
+  "issues": [
+    {
+      "rule": "hardcoded-colours",
+      "severity": "error",
+      "line": 4,
+      "message": "Hardcoded colour '#6366F1' — use var(--color-accent) instead"
+    },
+    {
+      "rule": "unknown-component",
+      "severity": "info",
+      "line": 12,
+      "message": "Component 'Tooltip' is not in the active kit's component list"
+    }
+  ]
+}
+```
+
+### Recommended Agent Workflow
+
+```
+1. get_design_system          — read the spec before writing
+2. get_tokens(format: "css")  — get exact token values
+3. [write component code]
+4. check_compliance(code)     — verify before finishing
+5. preview(code)              — visual check
+```
+
+---
+
+## Contributing
+
+PRs are welcome. The project is MIT licensed.
+
+```bash
+git clone https://github.com/uselayout/layout-context.git
+cd context
+npm install
+npm run build
+```
+
+The source is in `src/`. Key directories:
+
+- `src/mcp/tools/` — MCP tool handlers (one file per tool)
+- `src/kit/` — Kit loading, parsing, and registry
+- `src/compliance/` — Compliance rules
+- `src/preview/` — Preview server and WebSocket handler
+- `src/cli/` — CLI command implementations
+
+---
+
+## License
+
+MIT — see [LICENSE](./LICENSE).
+
+---
+
+Powered by [Layout](https://layout.design).

package/dist/bin/cli.d.ts

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+export {};
+//# sourceMappingURL=cli.d.ts.map

package/dist/bin/cli.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["../../bin/cli.ts"],"names":[],"mappings":""}

package/dist/bin/cli.js

@@ -0,0 +1,57 @@
+#!/usr/bin/env node
+import { Command } from "commander";
+import { createRequire } from "node:module";
+import { initCommand } from "../src/cli/init.js";
+import { serveCommand } from "../src/cli/serve.js";
+import { importCommand } from "../src/cli/import-zip.js";
+import { useCommand } from "../src/cli/use.js";
+import { listCommand } from "../src/cli/list.js";
+import { installCommand } from "../src/cli/install.js";
+const require = createRequire(import.meta.url);
+const pkg = require("../../package.json");
+const program = new Command();
+program
+    .name("layout-context")
+    .description("Design system context for AI coding agents — MCP server + CLI")
+    .version(pkg.version);
+program
+    .command("init")
+    .description("Scaffold a .layout/ directory in the current project")
+    .option("--kit <name>", "Start with a specific design kit")
+    .action(async (options) => {
+    await initCommand(options);
+});
+program
+    .command("serve")
+    .description("Start the MCP server (stdio transport)")
+    .action(async () => {
+    await serveCommand();
+});
+program
+    .command("import <zip-path>")
+    .description("Import a Layout export ZIP into .layout/")
+    .action(async (zipPath) => {
+    await importCommand(zipPath);
+});
+program
+    .command("use <kit-name>")
+    .description("Install a design kit from the registry")
+    .action(async (kitName) => {
+    await useCommand(kitName);
+});
+program
+    .command("list")
+    .description("Show all available design kits")
+    .action(async () => {
+    await listCommand();
+});
+program
+    .command("install")
+    .description("Auto-configure the MCP server for Claude Code, Cursor, or Windsurf")
+    .option("--target <tool>", "Specific tool: claude, cursor, or windsurf")
+    .option("--global", "Install globally (available in all projects, Claude Code only)")
+    .action(async (options) => {
+    await installCommand(options);
+});
+program.parse();
+//# sourceMappingURL=cli.js.map

package/dist/bin/cli.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.js","sourceRoot":"","sources":["../../bin/cli.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,MAAM,OAAO,GAAG,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC/C,MAAM,GAAG,GAAG,OAAO,CAAC,oBAAoB,CAAwB,CAAC;AAEjE,MAAM,OAAO,GAAG,IAAI,OAAO,EAAE,CAAC;AAE9B,OAAO;KACJ,IAAI,CAAC,gBAAgB,CAAC;KACtB,WAAW,CACV,+DAA+D,CAChE;KACA,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;AAExB,OAAO;KACJ,OAAO,CAAC,MAAM,CAAC;KACf,WAAW,CAAC,sDAAsD,CAAC;KACnE,MAAM,CAAC,cAAc,EAAE,kCAAkC,CAAC;KAC1D,MAAM,CAAC,KAAK,EAAE,OAAyB,EAAE,EAAE;IAC1C,MAAM,WAAW,CAAC,OAAO,CAAC,CAAC;AAC7B,CAAC,CAAC,CAAC;AAEL,OAAO;KACJ,OAAO,CAAC,OAAO,CAAC;KAChB,WAAW,CAAC,wCAAwC,CAAC;KACrD,MAAM,CAAC,KAAK,IAAI,EAAE;IACjB,MAAM,YAAY,EAAE,CAAC;AACvB,CAAC,CAAC,CAAC;AAEL,OAAO;KACJ,OAAO,CAAC,mBAAmB,CAAC;KAC5B,WAAW,CAAC,0CAA0C,CAAC;KACvD,MAAM,CAAC,KAAK,EAAE,OAAe,EAAE,EAAE;IAChC,MAAM,aAAa,CAAC,OAAO,CAAC,CAAC;AAC/B,CAAC,CAAC,CAAC;AAEL,OAAO;KACJ,OAAO,CAAC,gBAAgB,CAAC;KACzB,WAAW,CAAC,wCAAwC,CAAC;KACrD,MAAM,CAAC,KAAK,EAAE,OAAe,EAAE,EAAE;IAChC,MAAM,UAAU,CAAC,OAAO,CAAC,CAAC;AAC5B,CAAC,CAAC,CAAC;AAEL,OAAO;KACJ,OAAO,CAAC,MAAM,CAAC;KACf,WAAW,CAAC,gCAAgC,CAAC;KAC7C,MAAM,CAAC,KAAK,IAAI,EAAE;IACjB,MAAM,WAAW,EAAE,CAAC;AACtB,CAAC,CAAC,CAAC;AAEL,OAAO;KACJ,OAAO,CAAC,SAAS,CAAC;KAClB,WAAW,CAAC,oEAAoE,CAAC;KACjF,MAAM,CAAC,iBAAiB,EAAE,4CAA4C,CAAC;KACvE,MAAM,CAAC,UAAU,EAAE,gEAAgE,CAAC;KACpF,MAAM,CAAC,KAAK,EAAE,OAA8C,EAAE,EAAE;IAC/D,MAAM,cAAc,CAAC,OAAO,CAAC,CAAC;AAChC,CAAC,CAAC,CAAC;AAEL,OAAO,CAAC,KAAK,EAAE,CAAC"}

package/dist/src/cli/import-zip.d.ts

@@ -0,0 +1,2 @@
+export declare function importCommand(zipPath: string): Promise<void>;
+//# sourceMappingURL=import-zip.d.ts.map

package/dist/src/cli/import-zip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"import-zip.d.ts","sourceRoot":"","sources":["../../../src/cli/import-zip.ts"],"names":[],"mappings":"AA6BA,wBAAsB,aAAa,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CA8HlE"}

package/dist/src/cli/import-zip.js

@@ -0,0 +1,156 @@
+import fs from "node:fs";
+import path from "node:path";
+import os from "node:os";
+import { execFileSync } from "node:child_process";
+import chalk from "chalk";
+import { LAYOUT_DIR, KIT_MANIFEST_FILE, DESIGN_MD_FILE, TOKENS_CSS_FILE, TOKENS_JSON_FILE, TAILWIND_CONFIG_FILE, } from "../kit/types.js";
+/** Files we look for in the extracted ZIP and copy to .layout/ */
+const KNOWN_FILES = [
+    KIT_MANIFEST_FILE,
+    DESIGN_MD_FILE,
+    TOKENS_CSS_FILE,
+    TOKENS_JSON_FILE,
+    TAILWIND_CONFIG_FILE,
+    "CLAUDE.md",
+    "agents.md",
+];
+/** Markers used to find/replace the design system section in root CLAUDE.md */
+const SECTION_START = "<!-- layout:design-system:start -->";
+const SECTION_END = "<!-- layout:design-system:end -->";
+export async function importCommand(zipPath) {
+    const cwd = process.cwd();
+    const resolvedPath = path.resolve(cwd, zipPath);
+    if (!fs.existsSync(resolvedPath)) {
+        console.log(chalk.red("Error:"), `File not found: ${resolvedPath}`);
+        process.exit(1);
+    }
+    if (!resolvedPath.endsWith(".zip")) {
+        console.log(chalk.red("Error:"), "Expected a .zip file.");
+        process.exit(1);
+    }
+    // Check we're in a project directory, not somewhere random
+    const projectMarkers = ["package.json", ".git", "CLAUDE.md", "Cargo.toml", "pyproject.toml", "go.mod", "Gemfile"];
+    const isProjectDir = projectMarkers.some((m) => fs.existsSync(path.join(cwd, m)));
+    if (!isProjectDir) {
+        console.log(chalk.yellow("Warning:"), "This doesn't look like a project directory.");
+        console.log(chalk.dim(`  Run this from your project root (e.g. where package.json lives).`));
+        console.log(chalk.dim(`  Current directory: ${cwd}`));
+        console.log();
+    }
+    // Check that unzip is available
+    try {
+        execFileSync("which", ["unzip"], { stdio: "ignore" });
+    }
+    catch {
+        console.log(chalk.red("Error:"), "The 'unzip' command is required but not found.");
+        console.log(`  Install it with: ${chalk.cyan("sudo apt install unzip")} (Linux) or ${chalk.cyan("brew install unzip")} (macOS)`);
+        process.exit(1);
+    }
+    // Extract to a temp directory
+    const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), "layout-import-"));
+    try {
+        execFileSync("unzip", ["-o", "-q", resolvedPath, "-d", tmpDir], {
+            stdio: "ignore",
+        });
+    }
+    catch {
+        console.log(chalk.red("Error:"), "Failed to extract ZIP file.");
+        fs.rmSync(tmpDir, { recursive: true, force: true });
+        process.exit(1);
+    }
+    // Find the root of the extracted content.
+    // Layout ZIPs may have files at root or nested in a single directory.
+    const extractedRoot = findExtractedRoot(tmpDir);
+    const targetDir = path.join(process.cwd(), LAYOUT_DIR);
+    fs.mkdirSync(targetDir, { recursive: true });
+    const imported = [];
+    for (const fileName of KNOWN_FILES) {
+        const srcPath = path.join(extractedRoot, fileName);
+        if (fs.existsSync(srcPath)) {
+            fs.copyFileSync(srcPath, path.join(targetDir, fileName));
+            imported.push(fileName);
+        }
+    }
+    // Copy components directory if it exists
+    const componentsSrc = path.join(extractedRoot, "components");
+    if (fs.existsSync(componentsSrc) && fs.statSync(componentsSrc).isDirectory()) {
+        const componentsDest = path.join(targetDir, "components");
+        fs.cpSync(componentsSrc, componentsDest, { recursive: true });
+        imported.push("components/");
+    }
+    // Copy cursor rules if present
+    const cursorSrc = path.join(extractedRoot, ".cursor");
+    if (fs.existsSync(cursorSrc) && fs.statSync(cursorSrc).isDirectory()) {
+        const cursorDest = path.join(targetDir, ".cursor");
+        fs.cpSync(cursorSrc, cursorDest, { recursive: true });
+        imported.push(".cursor/");
+    }
+    // Clean up temp directory
+    fs.rmSync(tmpDir, { recursive: true, force: true });
+    if (imported.length === 0) {
+        console.log(chalk.yellow("Warning:"), "No recognised design system files found in the ZIP.");
+        console.log(`  Expected files: ${KNOWN_FILES.join(", ")}`);
+        return;
+    }
+    console.log(chalk.green("✓"), `Imported ${imported.length} item${imported.length === 1 ? "" : "s"} into .layout/:`);
+    console.log();
+    for (const file of imported) {
+        console.log(`  ${chalk.dim("•")} ${file}`);
+    }
+    // Merge design system rules into root CLAUDE.md
+    const mergedClaudeMd = mergeIntoRootClaudeMd();
+    if (mergedClaudeMd) {
+        console.log(`  ${chalk.dim("•")} ${mergedClaudeMd}`);
+    }
+    console.log();
+    console.log(`Run ${chalk.cyan("npx @layoutdesign/context install")} to connect the MCP server.`);
+}
+/**
+ * Merge the .layout/CLAUDE.md content into the project's root CLAUDE.md.
+ * Uses HTML comment markers so re-imports replace the previous section.
+ * Returns a description string for the import log, or null if nothing was merged.
+ */
+function mergeIntoRootClaudeMd() {
+    const layoutClaudeMd = path.join(process.cwd(), LAYOUT_DIR, "CLAUDE.md");
+    if (!fs.existsSync(layoutClaudeMd))
+        return null;
+    const designSection = fs.readFileSync(layoutClaudeMd, "utf-8").trim();
+    if (!designSection)
+        return null;
+    const wrappedSection = `${SECTION_START}\n${designSection}\n${SECTION_END}`;
+    const rootClaudeMd = path.join(process.cwd(), "CLAUDE.md");
+    if (fs.existsSync(rootClaudeMd)) {
+        const existing = fs.readFileSync(rootClaudeMd, "utf-8");
+        // Replace existing section if present
+        const startIdx = existing.indexOf(SECTION_START);
+        const endIdx = existing.indexOf(SECTION_END);
+        if (startIdx !== -1 && endIdx !== -1) {
+            const before = existing.slice(0, startIdx);
+            const after = existing.slice(endIdx + SECTION_END.length);
+            fs.writeFileSync(rootClaudeMd, before + wrappedSection + after);
+            return "CLAUDE.md (updated design system section)";
+        }
+        // Append to end
+        const separator = existing.endsWith("\n") ? "\n" : "\n\n";
+        fs.writeFileSync(rootClaudeMd, existing + separator + wrappedSection + "\n");
+        return "CLAUDE.md (appended design system section)";
+    }
+    // No root CLAUDE.md — create one
+    fs.writeFileSync(rootClaudeMd, wrappedSection + "\n");
+    return "CLAUDE.md (created with design system section)";
+}
+/**
+ * If the ZIP contains a single top-level directory, return that.
+ * Otherwise return the tmpDir itself.
+ */
+function findExtractedRoot(tmpDir) {
+    const entries = fs.readdirSync(tmpDir).filter((e) => !e.startsWith("."));
+    if (entries.length === 1) {
+        const single = path.join(tmpDir, entries[0]);
+        if (fs.statSync(single).isDirectory()) {
+            return single;
+        }
+    }
+    return tmpDir;
+}
+//# sourceMappingURL=import-zip.js.map