@seed-design/cli 1.2.2 → 1.4.0-alpha.0

package/src/commands/docs.ts

@@ -0,0 +1,312 @@
+import { fetchDocsIndex } from "@/src/utils/fetch";
+import * as p from "@clack/prompts";
+import type { CAC } from "cac";
+import { z } from "zod";
+import { BASE_URL } from "../constants";
+import { analytics } from "../utils/analytics";
+import { highlight } from "../utils/color";
+import {
+  CliCancelError,
+  CliError,
+  handleCliError,
+  isCliCancelError,
+  isVerboseMode,
+} from "../utils/error";
+import type { DocsCategory, DocsItem, DocsSection } from "../schema";
+
+const GITHUB_SNIPPET_BASE =
+  "https://raw.githubusercontent.com/daangn/seed-design/refs/heads/dev/docs/registry";
+
+const docsOptionsSchema = z.object({
+  query: z.string().optional(),
+  baseUrl: z.string().optional(),
+});
+
+function buildSnippetUrl(registryId: string, snippetPath: string): string {
+  return `${GITHUB_SNIPPET_BASE}/${registryId}/${snippetPath}`;
+}
+
+function printDocsResult(item: DocsItem, baseUrl: string) {
+  const docLink = `${baseUrl}${item.docUrl}`;
+  const llmsLink = `${baseUrl}/llms${item.docUrl}.txt`;
+
+  const lines = [item.id, `- docs: ${docLink}`, `- llms.txt: ${llmsLink}`];
+
+  if (item.snippetKey && item.snippets && item.snippets.length > 0) {
+    const [registryId] = item.snippetKey.split(":");
+    if (registryId === "ui" || registryId === "breeze") {
+      if (item.snippets.length === 1) {
+        lines.push(`- snippet: ${buildSnippetUrl(registryId, item.snippets[0].path)}`);
+      } else {
+        lines.push("- snippet:");
+        for (const snippet of item.snippets) {
+          lines.push(`   - ${snippet.label}: ${buildSnippetUrl(registryId, snippet.path)}`);
+        }
+      }
+    }
+  }
+
+  p.log.message(lines.join("\n"));
+}
+
+/**
+ * Parse a path-style query into segments.
+ * e.g. "react/components/action-button" → ["react", "components", "action-button"]
+ */
+function parseQueryPath(query: string): string[] {
+  return query
+    .split("/")
+    .map((s) => s.trim())
+    .filter(Boolean);
+}
+
+/**
+ * Search all items across all categories/sections.
+ */
+function searchAllItems(
+  categories: DocsCategory[],
+  query: string,
+): { item: DocsItem; categoryLabel: string; sectionLabel: string }[] {
+  const q = query.toLowerCase();
+  return categories.flatMap((cat) =>
+    cat.sections.flatMap((sec) =>
+      sec.items
+        .filter((item) => item.id.toLowerCase().includes(q) || item.title.toLowerCase().includes(q))
+        .map((item) => ({
+          item,
+          categoryLabel: cat.label,
+          sectionLabel: sec.label,
+        })),
+    ),
+  );
+}
+
+async function selectItem(items: DocsItem[]): Promise<DocsItem> {
+  const selected = await p.select({
+    message: "항목을 선택해주세요",
+    options: items.map((item) => ({
+      label: `${item.deprecated ? "(deprecated) " : ""}${item.title}`,
+      value: item,
+      hint: item.description,
+    })),
+  });
+  if (p.isCancel(selected)) throw new CliCancelError();
+  return selected;
+}
+
+async function selectSection(sections: DocsSection[]): Promise<DocsSection> {
+  const selected = await p.select({
+    message: "섹션을 선택해주세요",
+    options: sections.map((sec) => ({
+      label: sec.label,
+      value: sec,
+      hint: `${sec.items.length}개 항목`,
+    })),
+  });
+  if (p.isCancel(selected)) throw new CliCancelError();
+  return selected;
+}
+
+async function selectCategory(categories: DocsCategory[]): Promise<DocsCategory> {
+  const selected = await p.select({
+    message: "카테고리를 선택해주세요",
+    options: categories.map((cat) => ({
+      label: cat.label,
+      value: cat,
+      hint: `${cat.sections.reduce((sum, s) => sum + s.items.length, 0)}개 항목`,
+    })),
+  });
+  if (p.isCancel(selected)) throw new CliCancelError();
+  return selected;
+}
+
+export const docsCommand = (cli: CAC) => {
+  cli
+    .command("docs [query]", "문서 링크, llms.txt 링크, 스니펫 링크를 조회합니다")
+    .option("-u, --baseUrl <baseUrl>", `레지스트리의 기본 URL (기본값: ${BASE_URL})`, {
+      default: BASE_URL,
+    })
+    .example("seed-design docs")
+    .example("seed-design docs action-button")
+    .example("seed-design docs react")
+    .example("seed-design docs react/components")
+    .example("seed-design docs react/components/action-button")
+    .action(async (query, opts) => {
+      const startTime = Date.now();
+      const verbose = isVerboseMode(opts);
+      p.intro("seed-design docs");
+
+      try {
+        const parsed = docsOptionsSchema.safeParse({ query, ...opts });
+        if (!parsed.success) {
+          throw parsed.error;
+        }
+
+        const { data: options } = parsed;
+        const baseUrl = options.baseUrl ?? BASE_URL;
+
+        const { start, stop } = p.spinner();
+        start("문서 목록을 가져오고 있어요...");
+
+        const docsIndex = await (async () => {
+          try {
+            const index = await fetchDocsIndex({ baseUrl });
+            stop("문서 목록을 가져왔어요.");
+            return index;
+          } catch (error) {
+            stop("문서 목록을 가져오지 못했어요.");
+            throw error;
+          }
+        })();
+
+        const { categories } = docsIndex;
+        let selectedItem: DocsItem;
+
+        if (options.query) {
+          const segments = parseQueryPath(options.query);
+
+          // Try to resolve as path: category / section / item
+          const matchedCategory = categories.find((c) => c.id === segments[0]);
+
+          if (matchedCategory && segments.length >= 2) {
+            const matchedSection = matchedCategory.sections.find((s) => s.id === segments[1]);
+
+            if (matchedSection && segments.length >= 3) {
+              // Full path: category/section/item
+              const matchedItem = matchedSection.items.find((i) => i.id === segments[2]);
+              if (matchedItem) {
+                selectedItem = matchedItem;
+              } else {
+                // Item not found in section — search within the section
+                const q = segments[2].toLowerCase();
+                const matched = matchedSection.items.filter(
+                  (i) => i.id.toLowerCase().includes(q) || i.title.toLowerCase().includes(q),
+                );
+                if (matched.length === 0) {
+                  throw new CliError({
+                    message: `${highlight(options.query)}: 문서를 찾을 수 없어요.`,
+                    hint: `\`seed-design docs ${matchedCategory.id}/${matchedSection.id}\`로 목록을 확인해보세요.`,
+                  });
+                }
+                if (matched.length === 1) {
+                  selectedItem = matched[0];
+                } else {
+                  selectedItem = await selectItem(matched);
+                }
+              }
+            } else if (matchedSection) {
+              // category/section — select item within section
+              selectedItem = await selectItem(matchedSection.items);
+            } else {
+              // category/??? — search within category
+              const q = segments[1].toLowerCase();
+              const matched = matchedCategory.sections.flatMap((s) =>
+                s.items
+                  .filter(
+                    (i) => i.id.toLowerCase().includes(q) || i.title.toLowerCase().includes(q),
+                  )
+                  .map((item) => ({ item, sectionLabel: s.label })),
+              );
+
+              if (matched.length === 0) {
+                throw new CliError({
+                  message: `${highlight(options.query)}: 문서를 찾을 수 없어요.`,
+                  hint: `\`seed-design docs ${matchedCategory.id}\`로 목록을 확인해보세요.`,
+                });
+              }
+              if (matched.length === 1) {
+                selectedItem = matched[0].item;
+              } else {
+                const selected = await p.select({
+                  message: `${highlight(segments[1])}에 해당하는 항목을 선택해주세요`,
+                  options: matched.map(({ item, sectionLabel }) => ({
+                    label: `[${sectionLabel}] ${item.title}`,
+                    value: item,
+                    hint: item.description,
+                  })),
+                });
+                if (p.isCancel(selected)) throw new CliCancelError();
+                selectedItem = selected;
+              }
+            }
+          } else if (matchedCategory) {
+            // Single segment matching a category — drill into it
+            if (matchedCategory.sections.length === 1) {
+              selectedItem = await selectItem(matchedCategory.sections[0].items);
+            } else {
+              const section = await selectSection(matchedCategory.sections);
+              selectedItem = await selectItem(section.items);
+            }
+          } else {
+            // No category match — global search
+            const matched = searchAllItems(categories, options.query);
+
+            if (matched.length === 0) {
+              throw new CliError({
+                message: `${highlight(options.query)}: 문서를 찾을 수 없어요.`,
+                hint: "`seed-design docs`로 전체 목록을 확인해보세요.",
+              });
+            }
+            if (matched.length === 1) {
+              selectedItem = matched[0].item;
+            } else {
+              const selected = await p.select({
+                message: `${highlight(options.query)}에 해당하는 항목을 선택해주세요`,
+                options: matched.map(({ item, categoryLabel, sectionLabel }) => ({
+                  label: `[${categoryLabel} > ${sectionLabel}] ${item.title}`,
+                  value: item,
+                  hint: item.description,
+                })),
+              });
+              if (p.isCancel(selected)) throw new CliCancelError();
+              selectedItem = selected;
+            }
+          }
+        } else {
+          // Full interactive flow: category → section → item
+          const category = await selectCategory(categories);
+
+          let section: DocsSection;
+          if (category.sections.length === 1) {
+            section = category.sections[0];
+          } else {
+            section = await selectSection(category.sections);
+          }
+
+          selectedItem = await selectItem(section.items);
+        }
+
+        printDocsResult(selectedItem, baseUrl);
+        p.outro("완료했어요.");
+
+        const duration = Date.now() - startTime;
+        try {
+          await analytics.track(process.cwd(), {
+            event: "docs",
+            properties: {
+              query: options.query ?? null,
+              item_id: selectedItem.id,
+              has_snippet: !!(selectedItem.snippets && selectedItem.snippets.length > 0),
+              duration_ms: duration,
+            },
+          });
+        } catch (telemetryError) {
+          if (verbose) {
+            console.error("[Telemetry] docs tracking failed:", telemetryError);
+          }
+        }
+      } catch (error) {
+        if (isCliCancelError(error)) {
+          p.outro(highlight(error.message));
+          process.exit(0);
+        }
+
+        handleCliError(error, {
+          defaultMessage: "문서 조회에 실패했어요.",
+          defaultHint: "`--verbose` 옵션으로 상세 오류를 확인해보세요.",
+          verbose,
+        });
+        process.exit(1);
+      }
+    });
+};

package/src/commands/init.ts

@@ -3,7 +3,12 @@ import { z } from "zod";
 import { analytics } from "../utils/analytics";
 import { highlight } from "../utils/color";
 import { handleCliError, isCliCancelError, isVerboseMode } from "../utils/error";
-import { DEFAULT_INIT_CONFIG, promptInitConfig, writeInitConfigFile } from "../utils/init-config";
+import {
+  DEFAULT_INIT_CONFIG,
+  detectFramework,
+  promptInitConfig,
+  writeInitConfigFile,
+} from "../utils/init-config";
 
 import type { Config } from "@/src/utils/get-config";
 
@@ -37,7 +42,9 @@ export const initCommand = (cli: CAC) => {
 
         const options = parsed.data;
         const isDefaultMode = options.yes || options.default;
-        const config: Config = isDefaultMode ? DEFAULT_INIT_CONFIG : await promptInitConfig();
+        const config: Config = isDefaultMode
+          ? { ...DEFAULT_INIT_CONFIG, framework: detectFramework(options.cwd) }
+          : await promptInitConfig(options.cwd);
 
         const { start, stop } = p.spinner();
         start("seed-design.json 파일 생성중...");

package/src/index.ts

@@ -3,6 +3,7 @@
 import { addCommand } from "@/src/commands/add";
 import { addAllCommand } from "@/src/commands/add-all";
 import { compatCommand } from "@/src/commands/compat";
+import { docsCommand } from "@/src/commands/docs";
 import { initCommand } from "@/src/commands/init";
 import { getPackageInfo } from "@/src/utils/get-package-info";
 import { cac } from "cac";
@@ -19,6 +20,7 @@ async function main() {
   addCommand(CLI);
   addAllCommand(CLI);
   compatCommand(CLI);
+  docsCommand(CLI);
   initCommand(CLI);
 
   CLI.version(packageInfo.version || "1.0.0", "-v, --version");

package/src/schema.ts

@@ -45,16 +45,14 @@ export const publicRegistrySchema = z.object({
   hideFromCLICatalog: z.boolean().optional(),
 
   items: z.array(
-    publicRegistryItemSchema
-      .omit({ snippets: true })
-      .extend({
-        snippets: z.array(
-          z.object({
-            path: z.string(),
-            dependencies: z.record(z.string(), z.string()).optional(),
-          }),
-        ),
-      }),
+    publicRegistryItemSchema.omit({ snippets: true }).extend({
+      snippets: z.array(
+        z.object({
+          path: z.string(),
+          dependencies: z.record(z.string(), z.string()).optional(),
+        }),
+      ),
+    }),
   ),
 });
 
@@ -66,3 +64,41 @@ export const publicAvailableRegistriesSchema = z.array(z.object({ id: z.string()
 export type PublicRegistryItem = z.infer<typeof publicRegistryItemSchema>;
 export type PublicRegistry = z.infer<typeof publicRegistrySchema>;
 export type PublicAvailableRegistries = z.infer<typeof publicAvailableRegistriesSchema>;
+
+///////////////////////////////////////////////////////////////
+
+export const docsSnippetSchema = z.object({
+  label: z.string(),
+  path: z.string(),
+});
+
+export const docsItemSchema = z.object({
+  id: z.string(),
+  title: z.string(),
+  description: z.string().optional(),
+  docUrl: z.string(),
+  deprecated: z.boolean().optional(),
+  snippetKey: z.string().optional(),
+  snippets: z.array(docsSnippetSchema).optional(),
+});
+
+export const docsSectionSchema = z.object({
+  id: z.string(),
+  label: z.string(),
+  items: z.array(docsItemSchema),
+});
+
+export const docsCategorySchema = z.object({
+  id: z.string(),
+  label: z.string(),
+  sections: z.array(docsSectionSchema),
+});
+
+export const docsIndexSchema = z.object({
+  categories: z.array(docsCategorySchema),
+});
+
+export type DocsItem = z.infer<typeof docsItemSchema>;
+export type DocsSection = z.infer<typeof docsSectionSchema>;
+export type DocsCategory = z.infer<typeof docsCategorySchema>;
+export type DocsIndex = z.infer<typeof docsIndexSchema>;

package/src/tests/resolve-dependencies.test.ts

@@ -3,7 +3,7 @@ import { resolveDependencies } from "../utils/resolve-dependencies";
 import type { PublicRegistry } from "@/src/schema";
 
 describe("resolveDependencies", () => {
-  it("should resolve a simple item without dependencies", () => {
+  it("의존성이 없는 단일 아이템을 해석해야 한다", () => {
     const publicRegistries: PublicRegistry[] = [
       {
         id: "ui",
@@ -36,7 +36,7 @@ describe("resolveDependencies", () => {
     expect(result.npmDependenciesToAdd.size).toBe(0);
   });
 
-  it("should resolve npm dependencies", () => {
+  it("npm 의존성을 수집해야 한다", () => {
     const publicRegistries: PublicRegistry[] = [
       {
         id: "ui",
@@ -61,7 +61,7 @@ describe("resolveDependencies", () => {
     expect(result.npmDependenciesToAdd.has("clsx")).toBe(true);
   });
 
-  it("should resolve inner dependencies recursively", () => {
+  it("innerDependencies를 재귀적으로 해석해야 한다", () => {
     const publicRegistries: PublicRegistry[] = [
       {
         id: "ui",
@@ -131,7 +131,7 @@ describe("resolveDependencies", () => {
     expect(result.npmDependenciesToAdd.has("framer-motion")).toBe(true);
   });
 
-  it("should handle multiple selected items", () => {
+  it("여러 선택 아이템을 함께 처리해야 한다", () => {
     const publicRegistries: PublicRegistry[] = [
       {
         id: "ui",
@@ -161,7 +161,7 @@ describe("resolveDependencies", () => {
     expect(result.registryItemsToAdd[0].items.map((i) => i.id)).toEqual(["button", "chip"]);
   });
 
-  it("should prevent duplicate items", () => {
+  it("중복 아이템을 제거해야 한다", () => {
     const publicRegistries: PublicRegistry[] = [
       {
         id: "ui",
@@ -186,7 +186,7 @@ describe("resolveDependencies", () => {
       },
     ];
 
-    // Select both dialog and button, but button is already a dependency of dialog
+    // dialog와 button을 동시에 선택해도 button은 dialog 의존성으로 이미 포함된다.
     const result = resolveDependencies({
       selectedItemKeys: ["ui:dialog", "ui:button"],
       publicRegistries,
@@ -194,12 +194,12 @@ describe("resolveDependencies", () => {
 
     expect(result.registryItemsToAdd).toHaveLength(1);
     expect(result.registryItemsToAdd[0].items).toHaveLength(2);
-    // Button should appear only once
+    // button은 한 번만 포함되어야 한다.
     const buttonCount = result.registryItemsToAdd[0].items.filter((i) => i.id === "button").length;
     expect(buttonCount).toBe(1);
   });
 
-  it("should handle nested inner dependencies", () => {
+  it("중첩된 innerDependencies를 처리해야 한다", () => {
     const publicRegistries: PublicRegistry[] = [
       {
         id: "ui",
@@ -268,7 +268,7 @@ describe("resolveDependencies", () => {
     expect(result.npmDependenciesToAdd.has("lodash")).toBe(true);
   });
 
-  it("should throw error for invalid snippet format", () => {
+  it("잘못된 스니펫 포맷이면 에러를 던져야 한다", () => {
     const publicRegistries: PublicRegistry[] = [];
 
     expect(() =>
@@ -279,7 +279,7 @@ describe("resolveDependencies", () => {
     ).toThrowError('Invalid snippet format: "invalid-format"');
   });
 
-  it("should throw error for non-existent snippet", () => {
+  it("존재하지 않는 스니펫이면 에러를 던져야 한다", () => {
     const publicRegistries: PublicRegistry[] = [
       {
         id: "ui",
@@ -295,7 +295,7 @@ describe("resolveDependencies", () => {
     ).toThrowError('Cannot find snippet: "ui:non-existent"');
   });
 
-  it("should throw error for missing inner dependency", () => {
+  it("inner dependency가 누락되면 에러를 던져야 한다", () => {
     const publicRegistries: PublicRegistry[] = [
       {
         id: "ui",
@@ -327,7 +327,7 @@ describe("resolveDependencies", () => {
     ).toThrowError("Cannot find dependency item: breeze:missing");
   });
 
-  it("should handle multiple registries with multiple items", () => {
+  it("여러 레지스트리와 아이템을 함께 처리해야 한다", () => {
     const publicRegistries: PublicRegistry[] = [
       {
         id: "ui",
@@ -378,7 +378,7 @@ describe("resolveDependencies", () => {
     expect(result.npmDependenciesToAdd.has("framer-motion")).toBe(true);
   });
 
-  it("should collect all npm dependencies from nested dependencies", () => {
+  it("중첩 의존성의 npm 패키지를 모두 수집해야 한다", () => {
     const publicRegistries: PublicRegistry[] = [
       {
         id: "ui",

package/src/utils/analytics.ts

@@ -60,9 +60,8 @@ async function track(cwd: string, { event, properties = {} }: TrackOptions): Pro
 
   const fullEvent = `${EVENT_PREFIX}.${event}`;
 
-  // Dev 모드: 콘솔에만 출력
+  // Dev 모드: 텔레메트리 전송 생략
   if (process.env.NODE_ENV === "dev") {
-    console.log(`📊 [Telemetry] ${fullEvent}`, properties);
     return;
   }
 

package/src/utils/compatibility.ts

@@ -6,8 +6,19 @@ import path from "path";
 import { intersects, satisfies, valid, validRange } from "semver";
 import { highlight } from "./color";
 
-export const COMPAT_PACKAGE_NAMES = ["@seed-design/react", "@seed-design/css"] as const;
-export type CompatPackageName = (typeof COMPAT_PACKAGE_NAMES)[number];
+const REACT_COMPAT_PACKAGES = ["@seed-design/react", "@seed-design/css"] as const;
+const LYNX_COMPAT_PACKAGES = ["@seed-design/lynx-react", "@seed-design/lynx-css"] as const;
+
+/** @deprecated Use getCompatPackageNames(framework) instead */
+export const COMPAT_PACKAGE_NAMES = REACT_COMPAT_PACKAGES;
+
+export type CompatPackageName =
+  | (typeof REACT_COMPAT_PACKAGES)[number]
+  | (typeof LYNX_COMPAT_PACKAGES)[number];
+
+export function getCompatPackageNames(framework: string): readonly CompatPackageName[] {
+  return framework === "lynx" ? LYNX_COMPAT_PACKAGES : REACT_COMPAT_PACKAGES;
+}
 
 const WORKSPACE_VERSION_PREFIX = "workspace:";
 const NPM_ALIAS_PREFIX = "npm:";
@@ -28,6 +39,7 @@ export interface CompatibilityReport {
 
 export function getProjectSeedPackageVersionSpecs(
   cwd: string,
+  framework = "react",
 ): Partial<Record<CompatPackageName, string>> {
   try {
     const packageInfo = getPackageInfo(cwd);
@@ -38,8 +50,9 @@ export function getProjectSeedPackageVersionSpecs(
       ...packageInfo.optionalDependencies,
     };
     const result: Partial<Record<CompatPackageName, string>> = {};
+    const compatPackages = getCompatPackageNames(framework);
 
-    for (const packageName of COMPAT_PACKAGE_NAMES) {
+    for (const packageName of compatPackages) {
       const value = packageDeps[packageName];
       if (typeof value === "string") {
         result[packageName] = value;
@@ -56,10 +69,12 @@ export function analyzeRegistryItemCompatibility({
   publicRegistries,
   itemKeys,
   projectPackageVersions,
+  framework = "react",
 }: {
   publicRegistries: PublicRegistry[];
   itemKeys: string[];
   projectPackageVersions: Partial<Record<CompatPackageName, string>>;
+  framework?: string;
 }): CompatibilityReport {
   const checkedItemKeys = Array.from(new Set(itemKeys));
   const itemMap = new Map<string, PublicRegistry["items"][number]>(
@@ -69,14 +84,15 @@ export function analyzeRegistryItemCompatibility({
   );
 
   const issues: CompatibilityIssue[] = [];
+  const compatPackages = getCompatPackageNames(framework);
 
   for (const itemKey of checkedItemKeys) {
     const item = itemMap.get(itemKey);
     if (!item) continue;
 
-    const requiredRangesByPackage = collectRequiredRangesByPackage(item);
+    const requiredRangesByPackage = collectRequiredRangesByPackage(item, framework);
 
-    for (const packageName of COMPAT_PACKAGE_NAMES) {
+    for (const packageName of compatPackages) {
       const requiredRanges = Array.from(requiredRangesByPackage[packageName] ?? []);
 
       if (!requiredRanges.length) continue;
@@ -135,15 +151,19 @@ export function analyzeRegistryItemCompatibility({
 export function logCompatibilityReport({
   report,
   title,
+  framework = "react",
 }: {
   report: CompatibilityReport;
   title: string;
+  framework?: string;
 }) {
   if (!report.issues.length) return;
 
+  const compatPackages = getCompatPackageNames(framework);
+
   p.log.warn(title);
   p.log.info(
-    `현재 프로젝트 버전: ${COMPAT_PACKAGE_NAMES.map((packageName) => `${packageName}@${highlight(report.projectPackageVersions[packageName] ?? "미설치")}`).join(", ")}`,
+    `현재 프로젝트 버전: ${compatPackages.map((packageName) => `${packageName}@${highlight(report.projectPackageVersions[packageName] ?? "미설치")}`).join(", ")}`,
   );
 
   const issuesByItem = new Map<string, CompatibilityIssue[]>();
@@ -207,14 +227,18 @@ export function findInstalledSnippetItemKeys({
   return installedItemKeys;
 }
 
-function collectRequiredRangesByPackage(item: PublicRegistry["items"][number]) {
+function collectRequiredRangesByPackage(
+  item: PublicRegistry["items"][number],
+  framework = "react",
+) {
+  const compatPackages = getCompatPackageNames(framework);
   const requiredRangesByPackage = Object.fromEntries(
-    COMPAT_PACKAGE_NAMES.map((packageName) => [packageName, new Set<string>()]),
+    compatPackages.map((packageName) => [packageName, new Set<string>()]),
   ) as Record<CompatPackageName, Set<string>>;
 
   for (const snippet of item.snippets) {
     for (const [packageName, requiredRange] of Object.entries(snippet.dependencies ?? {})) {
-      if (!isCompatPackageName(packageName)) continue;
+      if (!isCompatPackageName(packageName, framework)) continue;
       requiredRangesByPackage[packageName].add(requiredRange);
     }
   }
@@ -286,6 +310,9 @@ function getSnippetPathCandidates(originalPath: string): string[] {
   return Array.from(candidates);
 }
 
-function isCompatPackageName(packageName: string): packageName is CompatPackageName {
-  return COMPAT_PACKAGE_NAMES.includes(packageName as CompatPackageName);
+function isCompatPackageName(
+  packageName: string,
+  framework = "react",
+): packageName is CompatPackageName {
+  return (getCompatPackageNames(framework) as readonly string[]).includes(packageName);
 }