canvas-ui-sdk 0.1.6 → 0.1.7

package/dist/cli/index.js

@@ -0,0 +1,516 @@
+// cli/src/index.ts
+import { Command } from "commander";
+
+// cli/src/commands/init.ts
+import fs2 from "fs-extra";
+import path2 from "path";
+import chalk from "chalk";
+import ora from "ora";
+import prompts from "prompts";
+
+// cli/src/types.ts
+var DEFAULT_CONFIG = {
+  aliases: {
+    components: "@/components",
+    ui: "@/components/ui",
+    lib: "@/lib",
+    hooks: "@/hooks"
+  },
+  tailwind: {
+    css: "src/app/globals.css"
+  }
+};
+
+// cli/src/utils/installer.ts
+import { execa } from "execa";
+import fs from "fs-extra";
+import path from "path";
+function detectPackageManager(cwd) {
+  if (fs.existsSync(path.join(cwd, "bun.lockb")) || fs.existsSync(path.join(cwd, "bun.lock"))) return "bun";
+  if (fs.existsSync(path.join(cwd, "pnpm-lock.yaml"))) return "pnpm";
+  if (fs.existsSync(path.join(cwd, "yarn.lock"))) return "yarn";
+  return "npm";
+}
+async function installPackages(packages, cwd) {
+  if (packages.length === 0) return;
+  const pm = detectPackageManager(cwd);
+  const args = pm === "npm" ? ["install", ...packages] : pm === "yarn" ? ["add", ...packages] : pm === "pnpm" ? ["add", ...packages] : ["add", ...packages];
+  await execa(pm, args, { cwd, stdio: "pipe" });
+}
+
+// cli/src/commands/init.ts
+var CONFIG_FILE = "canvas-ui.json";
+async function init() {
+  const cwd = process.cwd();
+  if (fs2.existsSync(path2.join(cwd, CONFIG_FILE))) {
+    const { overwrite } = await prompts({
+      type: "confirm",
+      name: "overwrite",
+      message: `${CONFIG_FILE} already exists. Overwrite?`,
+      initial: false
+    });
+    if (!overwrite) {
+      console.log("Aborted.");
+      return;
+    }
+  }
+  if (!fs2.existsSync(path2.join(cwd, "package.json"))) {
+    console.log(
+      chalk.red("No package.json found. Please run this in a project directory.")
+    );
+    process.exit(1);
+  }
+  console.log(chalk.bold("\nInitializing Canvas UI SDK...\n"));
+  const answers = await prompts([
+    {
+      type: "text",
+      name: "cssPath",
+      message: "Where is your global CSS file?",
+      initial: DEFAULT_CONFIG.tailwind.css
+    },
+    {
+      type: "text",
+      name: "componentsAlias",
+      message: "Components import alias:",
+      initial: DEFAULT_CONFIG.aliases.components
+    },
+    {
+      type: "text",
+      name: "libAlias",
+      message: "Lib/utils import alias:",
+      initial: DEFAULT_CONFIG.aliases.lib
+    },
+    {
+      type: "text",
+      name: "hooksAlias",
+      message: "Hooks import alias:",
+      initial: DEFAULT_CONFIG.aliases.hooks
+    }
+  ]);
+  if (!answers.cssPath) {
+    console.log("Aborted.");
+    return;
+  }
+  const config = {
+    aliases: {
+      components: answers.componentsAlias,
+      ui: `${answers.componentsAlias}/ui`,
+      lib: answers.libAlias,
+      hooks: answers.hooksAlias
+    },
+    tailwind: {
+      css: answers.cssPath
+    }
+  };
+  const spinner = ora("Writing configuration...").start();
+  await fs2.writeJSON(path2.join(cwd, CONFIG_FILE), config, { spaces: 2 });
+  spinner.succeed("Created canvas-ui.json");
+  const pm = detectPackageManager(cwd);
+  spinner.start(`Installing canvas-ui-sdk via ${pm}...`);
+  try {
+    await installPackages(["canvas-ui-sdk"], cwd);
+    spinner.succeed("Installed canvas-ui-sdk");
+  } catch {
+    spinner.warn(
+      "Could not install canvas-ui-sdk automatically. Run: npm install canvas-ui-sdk"
+    );
+  }
+  spinner.start("Installing base dependencies...");
+  try {
+    await installPackages(["clsx", "tailwind-merge"], cwd);
+    spinner.succeed("Installed clsx and tailwind-merge");
+  } catch {
+    spinner.warn(
+      "Could not install base deps. Run: npm install clsx tailwind-merge"
+    );
+  }
+  spinner.start("Creating directory structure...");
+  const dirs = [
+    resolveAlias(config.aliases.ui, cwd),
+    path2.join(resolveAlias(config.aliases.components, cwd), "blocks"),
+    path2.join(resolveAlias(config.aliases.components, cwd), "layout"),
+    resolveAlias(config.aliases.lib, cwd),
+    resolveAlias(config.aliases.hooks, cwd)
+  ];
+  for (const dir of dirs) {
+    await fs2.ensureDir(dir);
+  }
+  spinner.succeed("Created component directories");
+  const cssPath = path2.join(cwd, config.tailwind.css);
+  if (fs2.existsSync(cssPath)) {
+    spinner.start("Updating globals.css...");
+    let css = await fs2.readFile(cssPath, "utf-8");
+    const importsToAdd = [
+      '@import "canvas-ui-sdk/tailwind";',
+      '@import "canvas-ui-sdk/styles";'
+    ];
+    let modified = false;
+    for (const imp of importsToAdd) {
+      if (!css.includes(imp)) {
+        const tailwindImport = '@import "tailwindcss"';
+        if (css.includes(tailwindImport)) {
+          const idx = css.indexOf(tailwindImport);
+          const lineEnd = css.indexOf("\n", idx);
+          css = css.slice(0, lineEnd + 1) + imp + "\n" + css.slice(lineEnd + 1);
+        } else {
+          css = imp + "\n" + css;
+        }
+        modified = true;
+      }
+    }
+    const sourceDirective = '@source "./components";';
+    if (!css.includes(sourceDirective) && !css.includes("@source")) {
+      const lastImport = css.lastIndexOf("@import");
+      if (lastImport !== -1) {
+        const lineEnd = css.indexOf("\n", css.indexOf(";", lastImport));
+        css = css.slice(0, lineEnd + 1) + sourceDirective + "\n" + css.slice(lineEnd + 1);
+      } else {
+        css = sourceDirective + "\n" + css;
+      }
+      modified = true;
+    }
+    if (modified) {
+      await fs2.writeFile(cssPath, css);
+      spinner.succeed("Updated globals.css with Canvas UI imports");
+    } else {
+      spinner.succeed("globals.css already has Canvas UI imports");
+    }
+  } else {
+    spinner.info(
+      `globals.css not found at ${config.tailwind.css}. You'll need to add the imports manually.`
+    );
+  }
+  spinner.start("Copying lib/utils.ts...");
+  const utilsContent = `import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+`;
+  const utilsPath = path2.join(
+    resolveAlias(config.aliases.lib, cwd),
+    "utils.ts"
+  );
+  await fs2.writeFile(utilsPath, utilsContent);
+  spinner.succeed("Created lib/utils.ts");
+  console.log(
+    chalk.green("\n\u2713 Canvas UI SDK initialized successfully!\n")
+  );
+  console.log("Next steps:");
+  console.log(
+    `  ${chalk.cyan("npx canvas-ui add button")}         Add a component`
+  );
+  console.log(
+    `  ${chalk.cyan("npx canvas-ui add dashboard-shell")} Add a layout shell`
+  );
+  console.log();
+}
+function resolveAlias(alias, cwd) {
+  const stripped = alias.replace(/^@\//, "").replace(/^~\//, "");
+  return path2.join(cwd, "src", stripped);
+}
+
+// cli/src/commands/add.ts
+import fs4 from "fs-extra";
+import path4 from "path";
+import chalk2 from "chalk";
+import ora2 from "ora";
+
+// cli/src/utils/registry.ts
+import fs3 from "fs-extra";
+import path3 from "path";
+function getRegistryDir() {
+  const candidates = [
+    path3.resolve(import.meta.dirname, "../../registry"),
+    path3.resolve(import.meta.dirname, "../../../registry"),
+    path3.resolve(process.cwd(), "node_modules/canvas-ui-sdk/registry")
+  ];
+  for (const candidate of candidates) {
+    if (fs3.existsSync(path3.join(candidate, "index.json"))) {
+      return candidate;
+    }
+  }
+  throw new Error(
+    "Could not find canvas-ui registry. Make sure canvas-ui-sdk is installed."
+  );
+}
+async function loadRegistryIndex() {
+  const registryDir = getRegistryDir();
+  const indexPath = path3.join(registryDir, "index.json");
+  return fs3.readJSON(indexPath);
+}
+async function loadRegistryItem(name) {
+  const registryDir = getRegistryDir();
+  for (const subdir of ["ui", "blocks", "layout", "hooks", "lib"]) {
+    const itemPath = path3.join(registryDir, subdir, `${name}.json`);
+    if (fs3.existsSync(itemPath)) {
+      return fs3.readJSON(itemPath);
+    }
+  }
+  return null;
+}
+
+// cli/src/utils/resolver.ts
+async function resolveAll(names) {
+  const resolved = /* @__PURE__ */ new Map();
+  const npmDeps = /* @__PURE__ */ new Set();
+  async function resolve(name) {
+    if (resolved.has(name)) return;
+    const item = await loadRegistryItem(name);
+    if (!item) {
+      console.warn(`  Warning: component "${name}" not found in registry, skipping`);
+      return;
+    }
+    resolved.set(name, item);
+    for (const dep of item.dependencies) {
+      npmDeps.add(dep);
+    }
+    for (const dep of item.registryDependencies) {
+      await resolve(dep);
+    }
+  }
+  for (const name of names) {
+    await resolve(name);
+  }
+  if (!resolved.has("utils")) {
+    await resolve("utils");
+  }
+  return {
+    items: [...resolved.values()],
+    npmDeps: [...npmDeps]
+  };
+}
+
+// cli/src/utils/transform.ts
+var NPM_PACKAGE_REWRITES = {
+  "../../context/theme-context": {
+    pkg: "canvas-ui-sdk",
+    named: true
+  },
+  "../../lib/theme-defaults": {
+    pkg: "canvas-ui-sdk",
+    named: true
+  },
+  "../../lib/css-variable-sync": {
+    pkg: "canvas-ui-sdk",
+    named: true
+  }
+};
+function transformSource(content, filePath, config) {
+  let result = content;
+  for (const [from, to] of Object.entries(NPM_PACKAGE_REWRITES)) {
+    result = result.replace(
+      new RegExp(`from\\s+["']${escapeRegex(from)}["']`, "g"),
+      `from "${to.pkg}"`
+    );
+  }
+  result = result.replace(
+    /from\s+["']\.\.\/\.\.\/lib\/(\w+)["']/g,
+    `from "${config.aliases.lib}/$1"`
+  );
+  result = result.replace(
+    /from\s+["']\.\.\/\.\.\/hooks\/([\w-]+)["']/g,
+    `from "${config.aliases.hooks}/$1"`
+  );
+  result = result.replace(
+    /from\s+["']\.\.\/ui\/([\w-]+)["']/g,
+    `from "${config.aliases.ui}/$1"`
+  );
+  result = result.replace(
+    /from\s+["']\.\.\/blocks\/([\w-]+)["']/g,
+    `from "${config.aliases.components}/blocks/$1"`
+  );
+  if (filePath.startsWith("components/layout/")) {
+    result = result.replace(
+      /from\s+["']\.\/([\w-]+)["']/g,
+      `from "${config.aliases.components}/layout/$1"`
+    );
+  } else if (filePath.startsWith("components/blocks/marketing/")) {
+    result = result.replace(
+      /from\s+["']\.\/([\w-]+)["']/g,
+      `from "${config.aliases.components}/blocks/marketing/$1"`
+    );
+  } else if (filePath.startsWith("components/blocks/pricing/")) {
+    result = result.replace(
+      /from\s+["']\.\/([\w-]+)["']/g,
+      `from "${config.aliases.components}/blocks/pricing/$1"`
+    );
+  } else if (filePath.startsWith("components/blocks/")) {
+    result = result.replace(
+      /from\s+["']\.\/([\w-]+)["']/g,
+      `from "${config.aliases.components}/blocks/$1"`
+    );
+  }
+  return result;
+}
+function escapeRegex(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+// cli/src/commands/add.ts
+var CONFIG_FILE2 = "canvas-ui.json";
+async function add(componentNames) {
+  const cwd = process.cwd();
+  const configPath = path4.join(cwd, CONFIG_FILE2);
+  if (!fs4.existsSync(configPath)) {
+    console.log(
+      chalk2.red(
+        `No ${CONFIG_FILE2} found. Run ${chalk2.cyan("npx canvas-ui init")} first.`
+      )
+    );
+    process.exit(1);
+  }
+  const config = await fs4.readJSON(configPath);
+  if (componentNames.length === 0) {
+    console.log(chalk2.red("Please specify at least one component to add."));
+    console.log(`
+Usage: ${chalk2.cyan("npx canvas-ui add <component> [component...]")}`);
+    console.log(`
+Run ${chalk2.cyan("npx canvas-ui list")} to see available components.`);
+    process.exit(1);
+  }
+  const spinner = ora2("Loading registry...").start();
+  const index = await loadRegistryIndex();
+  const validNames = new Set(index.items.map((i) => i.name));
+  const invalid = componentNames.filter((n) => !validNames.has(n));
+  if (invalid.length > 0) {
+    spinner.fail(`Unknown components: ${invalid.join(", ")}`);
+    console.log(`
+Run ${chalk2.cyan("npx canvas-ui list")} to see available components.`);
+    process.exit(1);
+  }
+  spinner.succeed("Registry loaded");
+  spinner.start("Resolving dependencies...");
+  const { items, npmDeps } = await resolveAll(componentNames);
+  spinner.succeed(
+    `Resolved ${items.length} components (${items.length - componentNames.length} dependencies)`
+  );
+  const existing = [];
+  const toWrite = [];
+  for (const item of items) {
+    for (const file of item.files) {
+      const targetPath = resolveFilePath(file.path, config, cwd);
+      if (fs4.existsSync(targetPath)) {
+        existing.push(file.path);
+      }
+      toWrite.push({ item, targetPath });
+    }
+  }
+  if (existing.length > 0) {
+    console.log(
+      chalk2.yellow(`
+  Files that already exist (will be overwritten):`)
+    );
+    for (const f of existing) {
+      console.log(chalk2.dim(`    ${f}`));
+    }
+    console.log();
+  }
+  spinner.start("Writing component files...");
+  let filesWritten = 0;
+  for (const { item, targetPath } of toWrite) {
+    for (const file of item.files) {
+      const transformed = transformSource(file.content, file.path, config);
+      await fs4.ensureDir(path4.dirname(targetPath));
+      await fs4.writeFile(targetPath, transformed);
+      filesWritten++;
+    }
+  }
+  spinner.succeed(`Wrote ${filesWritten} files`);
+  if (npmDeps.length > 0) {
+    const pkgJsonPath = path4.join(cwd, "package.json");
+    let installed = /* @__PURE__ */ new Set();
+    if (fs4.existsSync(pkgJsonPath)) {
+      const pkgJson = await fs4.readJSON(pkgJsonPath);
+      installed = /* @__PURE__ */ new Set([
+        ...Object.keys(pkgJson.dependencies || {}),
+        ...Object.keys(pkgJson.devDependencies || {})
+      ]);
+    }
+    const toInstall = npmDeps.filter((dep) => !installed.has(dep));
+    if (toInstall.length > 0) {
+      spinner.start(`Installing ${toInstall.length} npm packages...`);
+      try {
+        await installPackages(toInstall, cwd);
+        spinner.succeed(`Installed: ${toInstall.join(", ")}`);
+      } catch (err) {
+        spinner.warn(
+          `Could not auto-install packages. Run manually:
+  npm install ${toInstall.join(" ")}`
+        );
+      }
+    }
+  }
+  console.log(chalk2.green("\n\u2713 Components added successfully!\n"));
+  const requested = new Set(componentNames);
+  const deps = items.filter((i) => !requested.has(i.name));
+  for (const name of componentNames) {
+    const item = items.find((i) => i.name === name);
+    if (item) {
+      console.log(
+        `  ${chalk2.green("+")} ${chalk2.bold(name)} ${chalk2.dim(`\u2192 ${item.files[0]?.path}`)}`
+      );
+    }
+  }
+  if (deps.length > 0) {
+    console.log(chalk2.dim("\n  Dependencies:"));
+    for (const dep of deps) {
+      console.log(
+        `  ${chalk2.green("+")} ${dep.name} ${chalk2.dim(`\u2192 ${dep.files[0]?.path}`)}`
+      );
+    }
+  }
+  console.log();
+}
+async function list() {
+  const spinner = ora2("Loading registry...").start();
+  const index = await loadRegistryIndex();
+  spinner.stop();
+  const byType = {};
+  for (const item of index.items) {
+    const type = item.type.replace("registry:", "");
+    if (!byType[type]) byType[type] = [];
+    byType[type].push(item);
+  }
+  const typeLabels = {
+    ui: "UI Primitives",
+    block: "Blocks",
+    layout: "Layout Shells",
+    hook: "Hooks",
+    lib: "Utilities"
+  };
+  for (const [type, items] of Object.entries(byType)) {
+    console.log(chalk2.bold(`
+${typeLabels[type] || type} (${items.length})`));
+    for (const item of items) {
+      const desc = item.description ? chalk2.dim(` \u2014 ${item.description.slice(0, 60)}`) : "";
+      console.log(`  ${chalk2.cyan(item.name)}${desc}`);
+    }
+  }
+  console.log();
+}
+function resolveFilePath(registryPath, config, cwd) {
+  const aliasPrefix = config.aliases.components.replace(/^@\//, "").replace(/^~\//, "");
+  const libPrefix = config.aliases.lib.replace(/^@\//, "").replace(/^~\//, "");
+  const hooksPrefix = config.aliases.hooks.replace(/^@\//, "").replace(/^~\//, "");
+  let resolved;
+  if (registryPath.startsWith("components/")) {
+    resolved = registryPath.replace("components/", `${aliasPrefix}/`);
+  } else if (registryPath.startsWith("lib/")) {
+    resolved = registryPath.replace("lib/", `${libPrefix}/`);
+  } else if (registryPath.startsWith("hooks/")) {
+    resolved = registryPath.replace("hooks/", `${hooksPrefix}/`);
+  } else {
+    resolved = registryPath;
+  }
+  return path4.join(cwd, "src", resolved);
+}
+
+// cli/src/index.ts
+var program = new Command();
+program.name("canvas-ui").description("CLI for adding Canvas UI SDK components to your project").version("0.1.0");
+program.command("init").description("Initialize Canvas UI SDK in your project").action(init);
+program.command("add").description("Add components to your project").argument("<components...>", "Component names to add").action(add);
+program.command("list").description("List all available components").action(list);
+program.parse();

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "canvas-ui-sdk",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "type": "module",
   "description": "A comprehensive UI component library with design tokens for building beautiful interfaces",
+  "bin": {
+    "canvas-ui": "./dist/cli/index.js"
+  },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -26,10 +29,12 @@
   "files": [
     "dist",
     "styles",
+    "registry",
     "mcp/dist"
   ],
   "scripts": {
-    "build": "tsup && node -e \"const fs = require('fs'); for (const f of ['dist/index.js','dist/charts.js']) { const c = fs.readFileSync(f,'utf8'); fs.writeFileSync(f, '\\\"use client\\\";\\n' + c); }\"",
+    "build": "tsup && node -e \"const fs = require('fs'); for (const f of ['dist/index.js','dist/charts.js']) { const c = fs.readFileSync(f,'utf8'); fs.writeFileSync(f, '\\\"use client\\\";\\n' + c); }\" && npm run cli:build",
+    "cli:build": "npx tsx scripts/generate-registry.ts && tsup --config tsup.cli.config.ts",
     "dev": "tsup --watch",
     "lint": "eslint src/",
     "typecheck": "tsc --noEmit",
@@ -82,11 +87,22 @@
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0"
   },
+  "optionalDependencies": {
+    "chalk": "^5.4.0",
+    "commander": "^13.0.0",
+    "execa": "^9.5.0",
+    "fs-extra": "^11.2.0",
+    "ora": "^8.2.0",
+    "prompts": "^2.4.2"
+  },
   "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
     "@types/node": "^20",
+    "@types/prompts": "^2.4.9",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "eslint": "^9",
+    "next": "^16.1.6",
     "tsup": "^8.0.0",
     "typescript": "^5"
   },

package/registry/blocks/activity-feed.json

@@ -0,0 +1,19 @@
+{
+  "name": "activity-feed",
+  "type": "registry:block",
+  "description": "Timeline-style activity feed showing user actions, comments, and file attachments with connecting lines. Supports status changes, comments with reactions, and file attachments.",
+  "files": [
+    {
+      "path": "components/blocks/activity-feed.tsx",
+      "type": "registry:block",
+      "content": "\"use client\";\n\nimport { cn } from \"../../lib/utils\";\nimport { Avatar, AvatarImage, AvatarFallback } from \"../ui/avatar\";\nimport { Check, Heart, MessageCircle, FileText } from \"lucide-react\";\n\n// ============================================\n// Types\n// ============================================\n\nexport interface ActivityAuthor {\n  id: string;\n  name: string;\n  avatarUrl?: string;\n}\n\nexport interface ActivityAttachment {\n  id: string;\n  name: string;\n  size: string;\n  type?: \"document\" | \"image\" | \"other\";\n}\n\nexport interface BaseActivityItem {\n  id: string;\n  author: ActivityAuthor;\n  timestamp: string;\n}\n\nexport interface StatusChangeActivity extends BaseActivityItem {\n  type: \"status_change\";\n  action: \"completed\" | \"updated\" | \"started\" | \"archived\";\n  projectName: string;\n}\n\nexport interface CommentActivity extends BaseActivityItem {\n  type: \"comment\";\n  projectName: string;\n  content: string;\n  likes: number;\n  replies: number;\n  isLiked?: boolean;\n}\n\nexport interface AttachmentActivity extends BaseActivityItem {\n  type: \"attachment\";\n  action: \"completed\" | \"uploaded\" | \"shared\";\n  projectName: string;\n  attachment: ActivityAttachment;\n}\n\nexport type ActivityItem = StatusChangeActivity | CommentActivity | AttachmentActivity;\n\nexport interface ActivityFeedProps {\n  /** Section title */\n  title?: string;\n  /** Section subtitle */\n  subtitle?: string;\n  /** Activity items to display */\n  items?: ActivityItem[];\n  /** Callback when like button is clicked */\n  onLike?: (itemId: string) => void;\n  /** Callback when reply button is clicked */\n  onReply?: (itemId: string) => void;\n  /** Callback when attachment is clicked */\n  onAttachmentClick?: (itemId: string, attachmentId: string) => void;\n  /** Additional class names */\n  className?: string;\n}\n\n// ============================================\n// Default Data\n// ============================================\n\nconst defaultItems: ActivityItem[] = [\n  {\n    id: \"1\",\n    type: \"status_change\",\n    author: {\n      id: \"raj\",\n      name: \"Raj Mishra\",\n      avatarUrl: \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face\",\n    },\n    action: \"completed\",\n    projectName: \"Acme Project\",\n    timestamp: \"Today at 8:15 AM\",\n  },\n  {\n    id: \"2\",\n    type: \"comment\",\n    author: {\n      id: \"raj\",\n      name: \"Raj Mishra\",\n      avatarUrl: \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face\",\n    },\n    projectName: \"Acme Project\",\n    content: \"Thank you Mary, the invoice looks great! Could you email it to Jeffrey and the Acme team and ask them to please pay by tomorrow?\",\n    likes: 30,\n    replies: 10,\n    isLiked: true,\n    timestamp: \"Yesterday at 11:25 AM\",\n  },\n  {\n    id: \"3\",\n    type: \"attachment\",\n    author: {\n      id: \"mary\",\n      name: \"Mary Trott\",\n      avatarUrl: \"https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150&h=150&fit=crop&crop=face\",\n    },\n    action: \"completed\",\n    projectName: \"Acme Project\",\n    attachment: {\n      id: \"inv-1\",\n      name: \"Invoice #23J2KF\",\n      size: \"10 MB\",\n      type: \"document\",\n    },\n    timestamp: \"3 days ago\",\n  },\n];\n\n// ============================================\n// Sub-components\n// ============================================\n\ninterface ActivityLineProps {\n  showLine: boolean;\n  height?: string;\n}\n\nfunction ActivityLine({ showLine, height = \"64px\" }: ActivityLineProps) {\n  if (!showLine) return null;\n  return (\n    <div\n      style={{\n        width: \"1px\",\n        height,\n        backgroundColor: \"var(--canvas-border-disabled)\",\n      }}\n    />\n  );\n}\n\ninterface StatusIconProps {\n  status: \"completed\" | \"updated\" | \"started\" | \"archived\";\n}\n\nfunction StatusIcon({ status }: StatusIconProps) {\n  if (status === \"completed\") {\n    return (\n      <div\n        className=\"flex items-center justify-center shrink-0\"\n        style={{\n          width: \"48px\",\n          height: \"48px\",\n          backgroundColor: \"var(--canvas-success)\",\n          borderRadius: \"var(--spacing-3xl)\",\n          border: \"1px solid var(--canvas-border)\",\n        }}\n      >\n        <Check size={20} color=\"white\" strokeWidth={2.5} />\n      </div>\n    );\n  }\n  \n  // Default fallback for other statuses\n  return (\n    <div\n      className=\"flex items-center justify-center shrink-0\"\n      style={{\n        width: \"48px\",\n        height: \"48px\",\n        backgroundColor: \"var(--canvas-surface)\",\n        borderRadius: \"var(--spacing-3xl)\",\n        border: \"1px solid var(--canvas-border)\",\n      }}\n    />\n  );\n}\n\ninterface ActivityAvatarProps {\n  avatarUrl?: string;\n  name: string;\n}\n\nfunction ActivityAvatar({ avatarUrl, name }: ActivityAvatarProps) {\n  return (\n    <Avatar\n      className=\"shrink-0\"\n      style={{\n        width: \"48px\",\n        height: \"48px\",\n        borderRadius: \"var(--spacing-3xl)\",\n        border: \"1px solid var(--canvas-border)\",\n      }}\n    >\n      <AvatarImage src={avatarUrl} alt={name} />\n      <AvatarFallback>\n        {name.split(\" \").map(n => n[0]).join(\"\").slice(0, 2)}\n      </AvatarFallback>\n    </Avatar>\n  );\n}\n\ninterface AttachmentCardProps {\n  attachment: ActivityAttachment;\n  onClick?: () => void;\n}\n\nfunction AttachmentCard({ attachment, onClick }: AttachmentCardProps) {\n  return (\n    <div\n      className=\"flex items-center cursor-pointer\"\n      style={{\n        backgroundColor: \"var(--canvas-background)\",\n        border: \"1px solid var(--canvas-border)\",\n        borderRadius: \"var(--radius-2xl)\",\n        padding: \"var(--spacing-xl)\",\n        boxShadow: \"0px 1px 8px 0px rgba(0, 0, 0, 0.03)\",\n        gap: \"0\",\n      }}\n      onClick={onClick}\n    >\n      {/* Icon container */}\n      <div\n        className=\"flex items-center justify-center shrink-0\"\n        style={{\n          width: \"64px\",\n          height: \"64px\",\n          backgroundColor: \"var(--canvas-surface-brand)\",\n          border: \"1px solid var(--canvas-primary)\",\n          borderRadius: \"var(--radius-md)\",\n        }}\n      >\n        <FileText size={32} style={{ color: \"var(--canvas-primary)\" }} />\n      </div>\n      \n      {/* File info */}\n      <div\n        className=\"flex flex-col justify-center\"\n        style={{\n          paddingLeft: \"var(--spacing-xl)\",\n          paddingRight: \"var(--spacing-xl)\",\n          paddingTop: \"var(--spacing-md)\",\n          paddingBottom: \"var(--spacing-md)\",\n        }}\n      >\n        <span\n          style={{\n            fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n            fontSize: \"var(--typo-body-s-size)\",\n            fontWeight: \"var(--typo-body-s-weight)\",\n            lineHeight: \"var(--typo-body-s-line-height)\",\n            color: \"var(--canvas-text)\",\n          }}\n        >\n          {attachment.name}\n        </span>\n        <span\n          style={{\n            fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n            fontSize: \"var(--typo-body-s-size)\",\n            fontWeight: \"var(--typo-body-s-weight)\",\n            lineHeight: \"var(--typo-body-s-line-height)\",\n            color: \"var(--canvas-text-placeholder)\",\n          }}\n        >\n          {attachment.size}\n        </span>\n      </div>\n    </div>\n  );\n}\n\ninterface CommentCardProps {\n  content: string;\n  likes: number;\n  replies: number;\n  isLiked?: boolean;\n  onLike?: () => void;\n  onReply?: () => void;\n}\n\nfunction CommentCard({ content, likes, replies, isLiked, onLike, onReply }: CommentCardProps) {\n  return (\n    <div\n      className=\"flex flex-col w-full\"\n      style={{\n        backgroundColor: \"var(--canvas-background)\",\n        border: \"1px solid var(--canvas-border)\",\n        borderRadius: \"var(--radius-md)\",\n        padding: \"var(--spacing-4xl)\",\n        boxShadow: \"0px 1px 8px 0px rgba(0, 0, 0, 0.03)\",\n        gap: \"var(--spacing-lg)\",\n        maxWidth: \"580px\",\n      }}\n    >\n      {/* Comment content */}\n      <p\n        style={{\n          fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n          fontSize: \"var(--typo-body-s-size)\",\n          fontWeight: \"var(--typo-body-s-weight)\",\n          lineHeight: \"var(--typo-body-s-line-height)\",\n          color: \"var(--canvas-text)\",\n          margin: 0,\n        }}\n      >\n        {content}\n      </p>\n      \n      {/* Action icons */}\n      <div\n        className=\"flex items-center\"\n        style={{\n          gap: \"var(--spacing-lg)\",\n          paddingTop: \"var(--spacing-xxs)\",\n          paddingBottom: \"var(--spacing-xxs)\",\n        }}\n      >\n        <button\n          onClick={onLike}\n          className=\"flex items-center justify-center p-0 border-0 bg-transparent cursor-pointer\"\n        >\n          <Heart\n            size={20}\n            fill={isLiked ? \"var(--canvas-destructive)\" : \"none\"}\n            color={isLiked ? \"var(--canvas-destructive)\" : \"var(--canvas-text)\"}\n          />\n        </button>\n        <button\n          onClick={onReply}\n          className=\"flex items-center justify-center p-0 border-0 bg-transparent cursor-pointer\"\n        >\n          <MessageCircle size={20} style={{ color: \"var(--canvas-text)\" }} />\n        </button>\n      </div>\n      \n      {/* Stats */}\n      <div\n        className=\"flex items-start\"\n        style={{\n          gap: \"var(--spacing-xl)\",\n          paddingTop: \"var(--spacing-xs)\",\n        }}\n      >\n        <span\n          style={{\n            fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n            fontSize: \"var(--typo-body-s-size)\",\n            fontWeight: 500,\n            lineHeight: \"var(--typo-body-s-line-height)\",\n            color: \"var(--canvas-text-placeholder)\",\n          }}\n        >\n          {likes} likes\n        </span>\n        <span\n          style={{\n            fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n            fontSize: \"var(--typo-body-s-size)\",\n            fontWeight: 500,\n            lineHeight: \"var(--typo-body-s-line-height)\",\n            color: \"var(--canvas-text-placeholder)\",\n          }}\n        >\n          {replies} replies\n        </span>\n      </div>\n    </div>\n  );\n}\n\nfunction getActionText(action: string): string {\n  switch (action) {\n    case \"completed\":\n      return \"marked\";\n    case \"updated\":\n      return \"updated\";\n    case \"started\":\n      return \"started\";\n    case \"uploaded\":\n      return \"uploaded\";\n    case \"shared\":\n      return \"shared\";\n    default:\n      return action;\n  }\n}\n\nfunction getActionSuffix(action: string): string {\n  switch (action) {\n    case \"completed\":\n      return \"as complete\";\n    case \"updated\":\n      return \"\";\n    case \"started\":\n      return \"\";\n    default:\n      return \"\";\n  }\n}\n\n// ============================================\n// Main Component\n// ============================================\n\n/**\n * Canvas Design System - Activity Feed Block\n * \n * A timeline-style activity feed showing user actions, comments, and file\n * attachments with connecting lines. Useful for project updates, notifications,\n * and collaboration views.\n * \n * @example\n * ```tsx\n * <ActivityFeed\n *   title=\"Project status\"\n *   subtitle=\"Last updated today\"\n *   items={activityItems}\n *   onLike={(id) => console.log(\"Liked\", id)}\n * />\n * ```\n */\nexport function ActivityFeed({\n  title = \"Project status\",\n  subtitle = \"Last updated today\",\n  items = defaultItems,\n  onLike,\n  onReply,\n  onAttachmentClick,\n  className,\n}: ActivityFeedProps) {\n  return (\n    <div \n      className={cn(\"flex flex-col w-full\", className)}\n      style={{ gap: \"var(--spacing-3xl)\" }}\n    >\n      {/* Header Section */}\n      <div \n        className=\"flex flex-wrap items-start w-full overflow-hidden\"\n        style={{ gap: \"var(--spacing-xl)\" }}\n      >\n        <div \n          className=\"flex flex-col flex-1 min-w-[200px]\"\n          style={{ gap: \"var(--spacing-xs)\" }}\n        >\n          <h2\n            style={{\n              fontFamily: \"var(--typo-h6-font, var(--typo-global-font))\",\n              fontSize: \"var(--typo-h6-size)\",\n              fontWeight: \"var(--typo-h6-weight)\",\n              letterSpacing: \"var(--typo-h6-spacing)\",\n              lineHeight: \"var(--typo-h6-line-height)\",\n              color: \"var(--canvas-text)\",\n              margin: 0,\n            }}\n          >\n            {title}\n          </h2>\n          <p\n            style={{\n              fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n              fontSize: \"var(--typo-body-s-size)\",\n              fontWeight: \"var(--typo-body-s-weight)\",\n              lineHeight: \"var(--typo-body-s-line-height)\",\n              color: \"var(--canvas-text-muted)\",\n              margin: 0,\n            }}\n          >\n            {subtitle}\n          </p>\n        </div>\n      </div>\n\n      {/* Activity List */}\n      <div className=\"flex flex-col w-full overflow-hidden\">\n        {items.map((item, index) => {\n          const isLast = index === items.length - 1;\n          \n          return (\n            <div\n              key={item.id}\n              className=\"flex flex-col w-full\"\n              style={{\n                paddingTop: index === 0 ? \"0\" : \"var(--spacing-xl)\",\n                paddingBottom: isLast ? \"0\" : \"var(--spacing-xl)\",\n              }}\n            >\n              <div\n                className=\"flex w-full\"\n                style={{ gap: \"var(--spacing-xl)\" }}\n              >\n                {/* Left column - Avatar/Icon with line */}\n                <div\n                  className=\"flex flex-col items-center shrink-0\"\n                  style={{ gap: \"var(--spacing-md)\" }}\n                >\n                  {item.type === \"status_change\" ? (\n                    <StatusIcon status={item.action} />\n                  ) : (\n                    <ActivityAvatar\n                      avatarUrl={item.author.avatarUrl}\n                      name={item.author.name}\n                    />\n                  )}\n                  <ActivityLine showLine={!isLast} height={item.type === \"comment\" ? \"100%\" : \"64px\"} />\n                </div>\n\n                {/* Right column - Content */}\n                <div\n                  className=\"flex flex-col flex-1 min-w-0\"\n                  style={{ gap: \"var(--spacing-lg)\" }}\n                >\n                  {/* Activity header row */}\n                  <div\n                    className=\"flex flex-col justify-center\"\n                    style={{\n                      minHeight: \"48px\",\n                      gap: \"0\",\n                    }}\n                  >\n                    {/* Title line */}\n                    <p\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                        margin: 0,\n                      }}\n                    >\n                      <span\n                        style={{\n                          fontWeight: 600,\n                          color: \"var(--canvas-text)\",\n                        }}\n                      >\n                        {item.author.name}\n                      </span>\n                      {\" \"}\n                      <span\n                        style={{\n                          fontWeight: \"var(--typo-body-s-weight)\",\n                          color: \"var(--canvas-text-placeholder)\",\n                        }}\n                      >\n                        {item.type === \"comment\" ? \"comments on\" : getActionText((item as StatusChangeActivity | AttachmentActivity).action)}\n                      </span>\n                      {\" \"}\n                      <span\n                        style={{\n                          fontWeight: \"var(--typo-body-s-weight)\",\n                          color: \"var(--canvas-text)\",\n                        }}\n                      >\n                        {item.type === \"comment\" \n                          ? (item as CommentActivity).projectName\n                          : (item as StatusChangeActivity | AttachmentActivity).projectName\n                        }\n                      </span>\n                      {item.type !== \"comment\" && getActionSuffix((item as StatusChangeActivity | AttachmentActivity).action) && (\n                        <>\n                          {\" \"}\n                          <span\n                            style={{\n                              fontWeight: \"var(--typo-body-s-weight)\",\n                              color: \"var(--canvas-text-placeholder)\",\n                            }}\n                          >\n                            {getActionSuffix((item as StatusChangeActivity | AttachmentActivity).action)}\n                          </span>\n                        </>\n                      )}\n                    </p>\n                    \n                    {/* Timestamp */}\n                    <p\n                      style={{\n                        fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n                        fontSize: \"var(--typo-body-s-size)\",\n                        fontWeight: \"var(--typo-body-s-weight)\",\n                        lineHeight: \"var(--typo-body-s-line-height)\",\n                        color: \"var(--canvas-text-placeholder)\",\n                        margin: 0,\n                      }}\n                    >\n                      {item.timestamp}\n                    </p>\n                  </div>\n\n                  {/* Additional content based on type */}\n                  {item.type === \"comment\" && (\n                    <CommentCard\n                      content={(item as CommentActivity).content}\n                      likes={(item as CommentActivity).likes}\n                      replies={(item as CommentActivity).replies}\n                      isLiked={(item as CommentActivity).isLiked}\n                      onLike={() => onLike?.(item.id)}\n                      onReply={() => onReply?.(item.id)}\n                    />\n                  )}\n\n                  {item.type === \"attachment\" && (\n                    <AttachmentCard\n                      attachment={(item as AttachmentActivity).attachment}\n                      onClick={() => onAttachmentClick?.(item.id, (item as AttachmentActivity).attachment.id)}\n                    />\n                  )}\n                </div>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"
+    }
+  ],
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "utils",
+    "avatar"
+  ]
+}

package/registry/blocks/blog-cards.json

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