takomi 2.0.5 → 2.0.7

package/assets/.agent/skills/21st-dev-components/scripts/_shared.mjs

@@ -0,0 +1,304 @@
+import path from "path";
+
+export const CATEGORY_INDEX = {
+  announcement: { label: "Announcements", count: 10, url: "https://21st.dev/s/announcement" },
+  background: { label: "Backgrounds", count: 33, url: "https://21st.dev/s/background" },
+  border: { label: "Borders", count: 12, url: "https://21st.dev/s/border" },
+  "call-to-action": { label: "Calls to Action", count: 34, url: "https://21st.dev/s/call-to-action" },
+  comparison: { label: "Comparisons", count: 6, url: "https://21st.dev/s/comparison" },
+  dock: { label: "Docks", count: 6, url: "https://21st.dev/s/dock" },
+  features: { label: "Features", count: 36, url: "https://21st.dev/s/features" },
+  footer: { label: "Footers", count: 14, url: "https://21st.dev/s/footer" },
+  hero: { label: "Heroes", count: 73, url: "https://21st.dev/s/hero" },
+  hook: { label: "Hooks", count: 31, url: "https://21st.dev/s/hook" },
+  image: { label: "Images", count: 26, url: "https://21st.dev/s/image" },
+  map: { label: "Maps", count: 2, url: "https://21st.dev/s/map" },
+  "navbar-navigation": { label: "Navigation Menus", count: 11, url: "https://21st.dev/s/navbar-navigation" },
+  "pricing-section": { label: "Pricing Sections", count: 17, url: "https://21st.dev/s/pricing-section" },
+  "scroll-area": { label: "Scroll Areas", count: 24, url: "https://21st.dev/s/scroll-area" },
+  shader: { label: "Shaders", count: 15, url: "https://21st.dev/s/shader" },
+  testimonials: { label: "Testimonials", count: 15, url: "https://21st.dev/s/testimonials" },
+  text: { label: "Texts", count: 58, url: "https://21st.dev/s/text" },
+  video: { label: "Videos", count: 9, url: "https://21st.dev/s/video" },
+  accordion: { label: "Accordions", count: 40, url: "https://21st.dev/s/accordion" },
+  "ai-chat": { label: "AI Chats", count: 30, url: "https://21st.dev/s/ai-chat" },
+  alert: { label: "Alerts", count: 23, url: "https://21st.dev/s/alert" },
+  avatar: { label: "Avatars", count: 17, url: "https://21st.dev/s/avatar" },
+  badge: { label: "Badges", count: 25, url: "https://21st.dev/s/badge" },
+  button: { label: "Buttons", count: 130, url: "https://21st.dev/s/button" },
+  calendar: { label: "Calendars", count: 34, url: "https://21st.dev/s/calendar" },
+  card: { label: "Cards", count: 79, url: "https://21st.dev/s/card" },
+  carousel: { label: "Carousels", count: 16, url: "https://21st.dev/s/carousel" },
+  checkbox: { label: "Checkboxes", count: 19, url: "https://21st.dev/s/checkbox" },
+  "date-picker": { label: "Date Pickers", count: 12, url: "https://21st.dev/s/date-picker" },
+  "modal-dialog": { label: "Dialogs / Modals", count: 37, url: "https://21st.dev/s/modal-dialog" },
+  dropdown: { label: "Dropdowns", count: 25, url: "https://21st.dev/s/dropdown" },
+  "empty-state": { label: "Empty States", count: 1, url: "https://21st.dev/s/empty-state" },
+  "file-tree": { label: "File Trees", count: 2, url: "https://21st.dev/s/file-tree" },
+  "upload-download": { label: "File Uploads", count: 7, url: "https://21st.dev/s/upload-download" },
+  form: { label: "Forms", count: 23, url: "https://21st.dev/s/form" },
+  icons: { label: "Icons", count: 10, url: "https://21st.dev/s/icons" },
+  input: { label: "Inputs", count: 102, url: "https://21st.dev/s/input" },
+  link: { label: "Links", count: 13, url: "https://21st.dev/s/link" },
+  menu: { label: "Menus", count: 18, url: "https://21st.dev/s/menu" },
+  notification: { label: "Notifications", count: 5, url: "https://21st.dev/s/notification" },
+  number: { label: "Numbers", count: 18, url: "https://21st.dev/s/number" },
+  pagination: { label: "Paginations", count: 20, url: "https://21st.dev/s/pagination" },
+  popover: { label: "Popovers", count: 23, url: "https://21st.dev/s/popover" },
+  "radio-group": { label: "Radio Groups", count: 22, url: "https://21st.dev/s/radio-group" },
+  select: { label: "Selects", count: 62, url: "https://21st.dev/s/select" },
+  sidebar: { label: "Sidebars", count: 10, url: "https://21st.dev/s/sidebar" },
+  "sign-in": { label: "Sign Ins", count: 4, url: "https://21st.dev/s/sign-in" },
+  "registration-signup": { label: "Sign ups", count: 4, url: "https://21st.dev/s/registration-signup" },
+  slider: { label: "Sliders", count: 45, url: "https://21st.dev/s/slider" },
+  "spinner-loader": { label: "Spinner Loaders", count: 21, url: "https://21st.dev/s/spinner-loader" },
+  table: { label: "Tables", count: 30, url: "https://21st.dev/s/table" },
+  tabs: { label: "Tabs", count: 38, url: "https://21st.dev/s/tabs" },
+  "chip-tag": { label: "Tags", count: 6, url: "https://21st.dev/s/chip-tag" },
+  textarea: { label: "Text Areas", count: 22, url: "https://21st.dev/s/textarea" },
+  toast: { label: "Toasts", count: 2, url: "https://21st.dev/s/toast" },
+  toggle: { label: "Toggles", count: 12, url: "https://21st.dev/s/toggle" },
+  tooltip: { label: "Tooltips", count: 28, url: "https://21st.dev/s/tooltip" },
+};
+
+export const SECTION_CATEGORY_MAP = {
+  announcement: ["announcement", "badge", "text", "link"],
+  header: ["announcement", "navbar-navigation", "button", "dropdown"],
+  navbar: ["navbar-navigation", "button", "dropdown", "menu"],
+  navigation: ["navbar-navigation", "sidebar", "dropdown", "menu"],
+  hero: ["hero", "call-to-action", "background", "text", "image"],
+  cta: ["call-to-action", "button", "badge", "text"],
+  features: ["features", "card", "icons", "number"],
+  logos: ["image", "icons", "scroll-area"],
+  testimonials: ["testimonials", "card", "carousel"],
+  pricing: ["pricing-section", "comparison", "card", "button"],
+  faq: ["accordion", "text"],
+  footer: ["footer", "link", "button"],
+  sidebar: ["sidebar", "menu", "navbar-navigation", "scroll-area"],
+  form: ["form", "input", "textarea", "select", "button"],
+  dashboard: ["sidebar", "table", "card", "tabs", "pagination"],
+  auth: ["sign-in", "registration-signup", "form", "input", "button"],
+  gallery: ["image", "carousel", "card", "video"],
+  blog: ["text", "card", "image", "pagination"],
+  stats: ["number", "card", "features"],
+  table: ["table", "pagination", "tabs"],
+  modal: ["modal-dialog", "popover", "button"],
+  chat: ["ai-chat", "input", "button", "avatar"],
+  map: ["map", "card", "popover"],
+};
+
+export function parseArgs(argv) {
+  const parsed = { _: [] };
+
+  for (let i = 0; i < argv.length; i += 1) {
+    const arg = argv[i];
+
+    if (!arg.startsWith("--")) {
+      parsed._.push(arg);
+      continue;
+    }
+
+    const [rawKey, inlineValue] = arg.slice(2).split("=", 2);
+    const key = rawKey.trim();
+    const nextValue = inlineValue ?? argv[i + 1];
+    const hasNextValue = inlineValue !== undefined || (nextValue && !nextValue.startsWith("--"));
+
+    if (!hasNextValue) {
+      parsed[key] = true;
+      continue;
+    }
+
+    const value = inlineValue ?? nextValue;
+    if (inlineValue === undefined) {
+      i += 1;
+    }
+
+    if (parsed[key] === undefined) {
+      parsed[key] = value;
+    } else if (Array.isArray(parsed[key])) {
+      parsed[key].push(value);
+    } else {
+      parsed[key] = [parsed[key], value];
+    }
+  }
+
+  return parsed;
+}
+
+export function forceArray(value) {
+  if (value === undefined) return [];
+  return Array.isArray(value) ? value : [value];
+}
+
+export async function fetchText(url) {
+  const response = await fetch(url, {
+    headers: {
+      "user-agent": "takomi-21st-dev-components/1.0",
+      accept: "text/html,application/json,text/plain,*/*",
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(`Request failed for ${url}: ${response.status} ${response.statusText}`);
+  }
+
+  return response.text();
+}
+
+export function safeJsonParse(value) {
+  try {
+    return JSON.parse(value);
+  } catch {
+    return null;
+  }
+}
+
+export function slugifySectionName(section) {
+  return section
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+}
+
+export function normalizeSections(sectionInput) {
+  if (!sectionInput) return [];
+
+  const trimmed = sectionInput.trim();
+  if (trimmed.startsWith("[")) {
+    const parsed = safeJsonParse(trimmed);
+    if (Array.isArray(parsed)) {
+      return parsed.map((item) => String(item).trim()).filter(Boolean);
+    }
+  }
+
+  return trimmed
+    .split(",")
+    .map((item) => item.trim())
+    .filter(Boolean);
+}
+
+export function getSectionCategories(section) {
+  const key = slugifySectionName(section);
+  return SECTION_CATEGORY_MAP[key] ?? [];
+}
+
+export function categoryDetails(slug) {
+  return CATEGORY_INDEX[slug] ?? { label: slug, count: null, url: `https://21st.dev/s/${slug}` };
+}
+
+export function extractNextFlightPayloads(html) {
+  const marker = 'self.__next_f.push([1,"';
+  const payloads = [];
+  let cursor = 0;
+
+  while (true) {
+    const start = html.indexOf(marker, cursor);
+    if (start === -1) break;
+
+    let i = start + marker.length;
+    let raw = "";
+
+    while (i < html.length) {
+      if (html[i] === '"' && html.slice(i, i + 3) === '"])') {
+        break;
+      }
+
+      if (html[i] === "\\") {
+        raw += html.slice(i, i + 2);
+        i += 2;
+        continue;
+      }
+
+      raw += html[i];
+      i += 1;
+    }
+
+    const decoded = safeJsonParse(`"${raw}"`);
+    if (typeof decoded === "string") {
+      payloads.push(decoded);
+    }
+
+    cursor = i + 3;
+  }
+
+  return payloads;
+}
+
+export function findJsonString(text, key) {
+  const pattern = new RegExp(`${escapeRegex(key)}"((?:[^"\\\\]|\\\\.)*)"`);
+  const match = pattern.exec(text);
+  if (!match) return null;
+  return safeJsonParse(`"${match[1]}"`);
+}
+
+export function findJsonObject(text, key, predicate = null) {
+  let cursor = 0;
+
+  while (true) {
+    const start = text.indexOf(key, cursor);
+    if (start === -1) return null;
+
+    const braceIndex = text.indexOf("{", start + key.length);
+    if (braceIndex === -1) return null;
+
+    const objectText = sliceBalancedJsonObject(text, braceIndex);
+    if (!objectText) return null;
+
+    const parsed = safeJsonParse(objectText);
+    if (parsed && (!predicate || predicate(parsed))) {
+      return parsed;
+    }
+
+    cursor = braceIndex + 1;
+  }
+}
+
+export function sliceBalancedJsonObject(text, startIndex) {
+  let depth = 0;
+  let inString = false;
+  let escaped = false;
+
+  for (let i = startIndex; i < text.length; i += 1) {
+    const char = text[i];
+
+    if (inString) {
+      if (escaped) {
+        escaped = false;
+      } else if (char === "\\") {
+        escaped = true;
+      } else if (char === '"') {
+        inString = false;
+      }
+      continue;
+    }
+
+    if (char === '"') {
+      inString = true;
+      continue;
+    }
+
+    if (char === "{") {
+      depth += 1;
+      continue;
+    }
+
+    if (char === "}") {
+      depth -= 1;
+      if (depth === 0) {
+        return text.slice(startIndex, i + 1);
+      }
+    }
+  }
+
+  return null;
+}
+
+export function deriveOutputPath(baseDir, sourceUrl) {
+  const url = new URL(sourceUrl);
+  const fileName = path.basename(url.pathname) || "source.txt";
+  return path.join(baseDir, fileName);
+}
+
+function escapeRegex(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}

package/assets/.agent/skills/21st-dev-components/scripts/build-manual-handoff-template.mjs

@@ -0,0 +1,115 @@
+#!/usr/bin/env node
+
+import fs from "fs/promises";
+import path from "path";
+import {
+  categoryDetails,
+  getSectionCategories,
+  normalizeSections,
+  parseArgs,
+} from "./_shared.mjs";
+
+function printUsage() {
+  console.log(`Usage:
+  node scripts/build-manual-handoff-template.mjs --sections hero,features,pricing [--reference-url <url>] [--goal <text>] [--out <file>]
+
+Examples:
+  node scripts/build-manual-handoff-template.mjs --sections hero,features,footer
+  node scripts/build-manual-handoff-template.mjs --sections '["navbar","hero","pricing"]' --reference-url https://example.com --out handoff.md
+`);
+}
+
+function buildTemplate({ sections, referenceUrl, goal }) {
+  const renderedSections = sections.map((section) => {
+    const categories = getSectionCategories(section);
+    const categoryLines = categories.length
+      ? categories
+          .map((slug) => {
+            const details = categoryDetails(slug);
+            const countSuffix = details.count ? ` (${details.count})` : "";
+            return `- ${details.label}${countSuffix}: ${details.url}`;
+          })
+          .join("\n")
+      : "- Add any relevant 21st.dev category URLs you used.";
+
+    return `## ${section}
+
+Suggested 21st.dev categories:
+${categoryLines}
+
+Chosen 21st.dev URLs:
+- 
+
+Copy prompt or notes:
+\`\`\`md
+\`\`\`
+
+Component code blocks:
+\`\`\`tsx
+\`\`\`
+
+Dependencies:
+- 
+
+Placement / styling notes:
+- 
+`;
+  });
+
+  return `# 21st.dev Manual Handoff
+
+Reference URL:
+${referenceUrl || ""}
+
+Page goal:
+${goal || ""}
+
+Desired page order:
+- ${sections.join("\n- ")}
+
+General project notes:
+- Framework:
+- Styling stack:
+- Existing component path:
+- Constraints:
+
+${renderedSections.join("\n")}
+`;
+}
+
+async function main() {
+  const args = parseArgs(process.argv.slice(2));
+  if (args.help || args.h) {
+    printUsage();
+    process.exit(0);
+  }
+
+  const sectionsInput = args.sections ?? args._[0];
+  const sections = normalizeSections(sectionsInput);
+
+  if (sections.length === 0) {
+    printUsage();
+    process.exit(1);
+  }
+
+  const template = buildTemplate({
+    sections,
+    referenceUrl: args["reference-url"] ?? "",
+    goal: args.goal ?? "",
+  });
+
+  if (args.out) {
+    const outputPath = path.resolve(process.cwd(), args.out);
+    await fs.mkdir(path.dirname(outputPath), { recursive: true });
+    await fs.writeFile(outputPath, template, "utf8");
+    console.log(outputPath);
+    return;
+  }
+
+  process.stdout.write(template);
+}
+
+main().catch((error) => {
+  console.error(error.message);
+  process.exit(1);
+});

package/assets/.agent/skills/21st-dev-components/scripts/fetch-21st-source.mjs

@@ -0,0 +1,65 @@
+#!/usr/bin/env node
+
+import fs from "fs/promises";
+import path from "path";
+import { deriveOutputPath, fetchText, forceArray, parseArgs } from "./_shared.mjs";
+
+function printUsage() {
+  console.log(`Usage:
+  node scripts/fetch-21st-source.mjs --url <cdn-url> [--url <cdn-url> ...] [--out-dir <dir>] [--json]
+
+Examples:
+  node scripts/fetch-21st-source.mjs --url https://cdn.21st.dev/user_Codehagen/hero-badge.tsx
+  node scripts/fetch-21st-source.mjs --url https://cdn.21st.dev/a.tsx --url https://cdn.21st.dev/b.tsx --out-dir tmp/21st
+`);
+}
+
+async function main() {
+  const args = parseArgs(process.argv.slice(2));
+  if (args.help || args.h) {
+    printUsage();
+    process.exit(0);
+  }
+
+  const urls = [...forceArray(args.url), ...args._].filter(Boolean);
+  if (urls.length === 0) {
+    printUsage();
+    process.exit(1);
+  }
+
+  const results = [];
+  for (const url of urls) {
+    const content = await fetchText(url);
+    results.push({
+      url,
+      fileName: path.basename(new URL(url).pathname) || "source.txt",
+      content,
+    });
+  }
+
+  if (args["out-dir"]) {
+    const outDir = path.resolve(process.cwd(), args["out-dir"]);
+    await fs.mkdir(outDir, { recursive: true });
+
+    for (const result of results) {
+      const outputPath = deriveOutputPath(outDir, result.url);
+      await fs.writeFile(outputPath, result.content, "utf8");
+      result.outputPath = outputPath;
+    }
+
+    console.log(JSON.stringify(results.map(({ content, ...rest }) => rest), null, 2));
+    return;
+  }
+
+  if (args.json || results.length > 1) {
+    console.log(JSON.stringify(results, null, 2));
+    return;
+  }
+
+  process.stdout.write(results[0].content);
+}
+
+main().catch((error) => {
+  console.error(error.message);
+  process.exit(1);
+});

package/assets/.agent/skills/21st-dev-components/scripts/resolve-21st-component.mjs

@@ -0,0 +1,115 @@
+#!/usr/bin/env node
+
+import {
+  extractNextFlightPayloads,
+  fetchText,
+  findJsonObject,
+  findJsonString,
+  parseArgs,
+} from "./_shared.mjs";
+
+function printUsage() {
+  console.log(`Usage:
+  node scripts/resolve-21st-component.mjs --url <21st-component-url> [--json]
+
+Examples:
+  node scripts/resolve-21st-component.mjs --url https://21st.dev/community/components/Codehagen/hero-badge/default --json
+  node scripts/resolve-21st-component.mjs --url https://21st.dev/community/components/Codehagen/hero-badge/default
+`);
+}
+
+function normalizeMetadata(url, html) {
+  const payloadText = extractNextFlightPayloads(html).join("\n");
+  const component = findJsonObject(payloadText, '"component":', (value) => typeof value?.component_slug === "string");
+  const demo = findJsonObject(payloadText, '"demo":', (value) => typeof value?.demo_slug === "string");
+  const registryDependencies =
+    findJsonObject(payloadText, '"registryDependencies":') ??
+    findJsonObject(payloadText, '"registry_dependencies":');
+  const npmDependenciesOfRegistryDependencies =
+    findJsonObject(payloadText, '"npmDependenciesOfRegistryDependencies":') ??
+    findJsonObject(payloadText, '"npm_dependencies_of_registry_dependencies":');
+  const tailwindConfig = findJsonObject(payloadText, '"tailwindConfig":');
+  const globalCss = findJsonString(payloadText, '"globalCss":"');
+  const demoCodeInline = findJsonString(payloadText, '"demoCode":"');
+
+  if (!component) {
+    throw new Error("Could not locate structured component metadata in the 21st.dev page payload.");
+  }
+
+  return {
+    inputUrl: url,
+    fetchedAt: new Date().toISOString(),
+    title: component.name ?? component.component_slug,
+    componentName: component.name ?? null,
+    componentSlug: component.component_slug ?? null,
+    componentNames: Array.isArray(component.component_names) ? component.component_names : [],
+    author: component.user?.username ?? component.user?.name ?? component.user_id ?? null,
+    authorProfile: component.user?.website_url ?? component.user?.github_url ?? null,
+    description: component.description ?? null,
+    license: component.license ?? null,
+    tags: Array.isArray(component.tags) ? component.tags.map((tag) => tag.slug ?? tag.name).filter(Boolean) : [],
+    dependencies: component.dependencies ?? {},
+    demoDependencies: demo?.demo_dependencies ?? component.demo_dependencies ?? {},
+    demoDirectRegistryDependencies:
+      demo?.demo_direct_registry_dependencies ??
+      component.demo_direct_registry_dependencies ??
+      [],
+    directRegistryDependencies: component.direct_registry_dependencies ?? [],
+    registryDependencies: registryDependencies ?? {},
+    npmDependenciesOfRegistryDependencies: npmDependenciesOfRegistryDependencies ?? {},
+    codeUrl: component.code ?? null,
+    demoCodeUrl: demo?.demo_code ?? component.demo_code ?? null,
+    previewUrl: demo?.preview_url ?? component.preview_url ?? null,
+    videoUrl: demo?.video_url ?? component.video_url ?? null,
+    compiledCssUrl: demo?.compiled_css ?? component.compiled_css ?? null,
+    tailwindConfig,
+    globalCss,
+    demoCodeInline,
+    websiteUrl: component.website_url ?? null,
+    downloadsCount: component.downloads_count ?? null,
+    likesCount: component.likes_count ?? null,
+    demoName: demo?.name ?? null,
+    demoSlug: demo?.demo_slug ?? null,
+  };
+}
+
+async function main() {
+  const args = parseArgs(process.argv.slice(2));
+  if (args.help || args.h) {
+    printUsage();
+    process.exit(0);
+  }
+
+  const url = args.url ?? args._[0];
+  if (!url) {
+    printUsage();
+    process.exit(1);
+  }
+
+  const html = await fetchText(url);
+  const metadata = normalizeMetadata(url, html);
+
+  if (args.json) {
+    console.log(JSON.stringify(metadata, null, 2));
+    return;
+  }
+
+  const lines = [
+    `Title: ${metadata.title ?? "Unknown"}`,
+    `Author: ${metadata.author ?? "Unknown"}`,
+    `Component Slug: ${metadata.componentSlug ?? "Unknown"}`,
+    `Demo Slug: ${metadata.demoSlug ?? "Unknown"}`,
+    `Tags: ${metadata.tags.join(", ") || "None"}`,
+    `Dependencies: ${Object.keys(metadata.dependencies).join(", ") || "None"}`,
+    `Code URL: ${metadata.codeUrl ?? "None"}`,
+    `Demo Code URL: ${metadata.demoCodeUrl ?? "None"}`,
+    `Preview URL: ${metadata.previewUrl ?? "None"}`,
+  ];
+
+  console.log(lines.join("\n"));
+}
+
+main().catch((error) => {
+  console.error(error.message);
+  process.exit(1);
+});