@fragments-sdk/cli 0.7.0 → 0.7.1

package/src/migrate/converter.ts

@@ -1,7 +1,7 @@
 /**
- * Storybook to Segments Converter
+ * Storybook to Fragments Converter
  *
- * Transforms parsed Storybook data into Segment definitions.
+ * Transforms parsed Storybook data into Fragment definitions.
  */
 
 import type { ParsedStoryFile, ParsedArgType, ConversionResult } from "./types.js";
@@ -22,9 +22,9 @@ function sanitizeComponentName(name: string): string {
 }
 
 /**
- * Convert a parsed story file into a segment definition.
+ * Convert a parsed story file into a fragment definition.
  */
-export function convertToSegment(parsed: ParsedStoryFile): ConversionResult {
+export function convertToFragment(parsed: ParsedStoryFile): ConversionResult {
   const warnings: string[] = [...parsed.warnings];
   const todos: string[] = [];
 
@@ -39,7 +39,7 @@ export function convertToSegment(parsed: ParsedStoryFile): ConversionResult {
 
     // Determine output file path for the error result
     const outputFile = parsed.filePath
-      .replace(/\.stories\.(tsx?|jsx?|mdx)$/, ".segment.tsx");
+      .replace(/\.stories\.(tsx?|jsx?|mdx)$/, ".fragment.tsx");
 
     return {
       sourceFile: parsed.filePath,
@@ -83,8 +83,8 @@ export function convertToSegment(parsed: ParsedStoryFile): ConversionResult {
     .filter(v => v.needsManualReview && v.skipReason)
     .map(v => ({ name: v.name, reason: v.skipReason! }));
 
-  // Generate the segment code with _generated metadata
-  const code = generateSegmentCode({
+  // Generate the fragment code with _generated metadata
+  const code = generateFragmentCode({
     componentName,
     componentImport: parsed.meta.componentImport,
     description: parsed.meta.description,
@@ -104,7 +104,7 @@ export function convertToSegment(parsed: ParsedStoryFile): ConversionResult {
 
   // Determine output file path
   const outputFile = parsed.filePath
-    .replace(/\.stories\.(tsx?|jsx?|mdx)$/, ".segment.tsx");
+    .replace(/\.stories\.(tsx?|jsx?|mdx)$/, ".fragment.tsx");
 
   return {
     sourceFile: parsed.filePath,
@@ -122,7 +122,7 @@ export function convertToSegment(parsed: ParsedStoryFile): ConversionResult {
 }
 
 /**
- * Convert Storybook argTypes to Segments props.
+ * Convert Storybook argTypes to Fragments props.
  */
 function convertArgTypesToProps(
   argTypes: Record<string, ParsedArgType>
@@ -494,13 +494,13 @@ interface GenerateOptions {
 }
 
 /**
- * Generate the full segment file code.
+ * Generate the full fragment file code.
  *
  * Note: We use a placeholder component instead of importing the real component.
- * This allows the segment build to work without needing all component dependencies.
+ * This allows the fragment build to work without needing all component dependencies.
  * The viewer will load the actual component at runtime.
  */
-function generateSegmentCode(options: GenerateOptions): string {
+function generateFragmentCode(options: GenerateOptions): string {
   const {
     componentName,
     componentImport,
@@ -549,11 +549,11 @@ ${generated.skippedVariants.map(sv => `      { name: "${escapeString(sv.name)}",
 `;
   }
 
-  // Import the actual component - this makes the segment immediately usable
-  return `import { defineSegment } from "@fragments/core";
+  // Import the actual component - this makes the fragment immediately usable
+  return `import { defineFragment } from "@fragments/core";
 import { ${componentName} } from "${componentImport}";
 
-export default defineSegment({
+export default defineFragment({
   component: ${componentName},
 
   meta: {
@@ -626,7 +626,7 @@ function formatPropsCode(props: Record<string, PropDef>): string {
  * Format variants array for code generation.
  *
  * Variants needing manual review get a placeholder render that won't crash.
- * This makes the segment file a starting point that humans can enhance.
+ * This makes the fragment file a starting point that humans can enhance.
  */
 function formatVariantsCode(componentName: string, variants: VariantDef[]): string {
   // Filter out variants that can't be rendered - they would cause runtime errors

package/src/migrate/index.ts

@@ -1,9 +1,9 @@
 /**
  * @fragments/migrate
  *
- * Storybook to Segments migration tool.
+ * Storybook to Fragments migration tool.
  *
- * Provides automated conversion of Storybook CSF files to Segments format,
+ * Provides automated conversion of Storybook CSF files to Fragments format,
  * preserving component documentation while adding AI-first capabilities.
  */
 
@@ -20,7 +20,7 @@ export {
 } from "./parser.js";
 
 // Converter
-export { convertToSegment } from "./converter.js";
+export { convertToFragment } from "./converter.js";
 
 // Report generator
 export { generateMigrationReport } from "./report.js";

package/src/migrate/migrate.ts

@@ -4,7 +4,7 @@
  * Orchestrates the full migration pipeline:
  * 1. Discover Storybook files
  * 2. Parse CSF format
- * 3. Convert to Segments
+ * 3. Convert to Fragments
  * 4. Write output files
  * 5. Generate report
  */
@@ -18,7 +18,7 @@ import type {
   ConversionResult,
 } from "./types.js";
 import { parseStoryFile } from "./parser.js";
-import { convertToSegment } from "./converter.js";
+import { convertToFragment } from "./converter.js";
 import { generateMigrationReport } from "./report.js";
 
 /**
@@ -42,7 +42,7 @@ export async function migrate(options: MigrateOptions): Promise<MigrationReport>
       const parsed = await parseStoryFile(storyFile);
 
       // Convert
-      const result = convertToSegment(parsed);
+      const result = convertToFragment(parsed);
 
       // Determine output path
       const outputDir = options.to ?? dirname(storyFile);

package/src/migrate/parser.ts

@@ -2,7 +2,7 @@
  * Storybook CSF Parser
  *
  * Parses Storybook Component Story Format (CSF) files and extracts
- * structured data that can be converted to Segments.
+ * structured data that can be converted to Fragments.
  *
  * Supports CSF 2.0 and 3.0 formats.
  */
@@ -214,9 +214,9 @@ function parseMeta(
 
   if (selectedTitle) {
     result.title = selectedTitle;
-    // Extract component name from title (last segment)
-    const segments = result.title.split("/");
-    result.componentName = segments[segments.length - 1];
+    // Extract component name from title (last fragment)
+    const fragments = result.title.split("/");
+    result.componentName = fragments[fragments.length - 1];
   }
 
   // Try to extract component reference
@@ -1100,13 +1100,13 @@ export function storyNameToTitle(name: string): string {
  * Extract category from Storybook title path.
  */
 export function extractCategory(title: string): string {
-  const segments = title.split("/");
+  const fragments = title.split("/");
 
-  // If we have at least 2 segments, use the second-to-last as category
+  // If we have at least 2 fragments, use the second-to-last as category
   // "Components/Forms/Input" -> "forms"
   // "Actions/Button" -> "actions"
-  if (segments.length >= 2) {
-    const category = segments[segments.length - 2];
+  if (fragments.length >= 2) {
+    const category = fragments[fragments.length - 2];
     return category.toLowerCase();
   }
 

package/src/migrate/report.ts

@@ -572,7 +572,7 @@ function renderAnalyticsSection(report: MigrationReport): string {
         <h2 class="section-title">Design System Analytics</h2>
         <div class="analytics-card">
           <p style="color: var(--text-secondary)">
-            Run <code>segments build && segments analyze</code> after migration to see design system analytics.
+            Run <code>fragments build && fragments analyze</code> after migration to see design system analytics.
           </p>
         </div>
       </section>
@@ -618,7 +618,7 @@ function renderFooter(): string {
   return `
     <footer class="footer">
       <p>Generated by <a href="#">${BRAND.name}</a> Migration Tool</p>
-      <p style="margin-top: 8px">Run <code>segments dev</code> to view your new design system documentation</p>
+      <p style="margin-top: 8px">Run <code>fragments dev</code> to view your new design system documentation</p>
     </footer>
   `;
 }

package/src/migrate/types.ts

@@ -94,9 +94,9 @@ export interface StorybookConfig {
 export interface ConversionResult {
   /** Original story file path */
   sourceFile: string;
-  /** Output segment file path */
+  /** Output fragment file path */
   outputFile: string;
-  /** Generated segment code */
+  /** Generated fragment code */
   code: string;
   /** Component name */
   componentName: string;
@@ -140,7 +140,7 @@ export interface MigrationReport {
   results: ConversionResult[];
   /** Categories discovered */
   categories: string[];
-  /** Analytics from the converted segments */
+  /** Analytics from the converted fragments */
   analytics?: {
     overallScore: number;
     coveragePercentage: number;
@@ -158,7 +158,7 @@ export interface MigrateOptions {
   to?: string;
   /** Dry run - don't write files */
   dryRun?: boolean;
-  /** Overwrite existing segment files */
+  /** Overwrite existing fragment files */
   overwrite?: boolean;
   /** Generate HTML report */
   report?: boolean;

package/src/screenshot.ts

@@ -2,11 +2,11 @@ import pc from 'picocolors';
 import {
   BRAND,
   DEFAULTS,
-  type SegmentsConfig,
-  type SegmentDefinition,
+  type FragmentsConfig,
+  type FragmentDefinition,
   type Theme,
 } from './core/index.js';
-import { discoverSegmentFiles, loadSegmentFile } from './core/node.js';
+import { discoverFragmentFiles, loadFragmentFile } from './core/node.js';
 import {
   BrowserPool,
   CaptureEngine,
@@ -56,7 +56,7 @@ export interface ScreenshotResult {
  * Execute the screenshot command
  */
 export async function runScreenshotCommand(
-  config: SegmentsConfig,
+  config: FragmentsConfig,
   configDir: string,
   options: ScreenshotCommandOptions = {}
 ): Promise<ScreenshotResult> {
@@ -72,11 +72,11 @@ export async function runScreenshotCommand(
   });
   await storage.initialize();
 
-  // Discover segments
-  const segmentFiles = await discoverSegmentFiles(config, configDir);
+  // Discover fragments
+  const fragmentFiles = await discoverFragmentFiles(config, configDir);
 
-  if (segmentFiles.length === 0) {
-    console.log(pc.yellow('No segment files found.'));
+  if (fragmentFiles.length === 0) {
+    console.log(pc.yellow('No fragment files found.'));
     return {
       success: true,
       captured: 0,
@@ -86,14 +86,14 @@ export async function runScreenshotCommand(
     };
   }
 
-  // Load all segments
-  const segments: Array<{ path: string; segment: SegmentDefinition }> = [];
+  // Load all fragments
+  const fragments: Array<{ path: string; fragment: FragmentDefinition }> = [];
 
-  for (const file of segmentFiles) {
+  for (const file of fragmentFiles) {
     try {
-      const segment = await loadSegmentFile(file.absolutePath);
-      if (segment) {
-        segments.push({ path: file.relativePath, segment });
+      const fragment = await loadFragmentFile(file.absolutePath);
+      if (fragment) {
+        fragments.push({ path: file.relativePath, fragment });
       }
     } catch (error) {
       errors.push({
@@ -105,11 +105,11 @@ export async function runScreenshotCommand(
   }
 
   // Filter by component if specified
-  const filteredSegments = options.component
-    ? segments.filter((s) => s.segment.meta.name === options.component)
-    : segments;
+  const filteredFragments = options.component
+    ? fragments.filter((s) => s.fragment.meta.name === options.component)
+    : fragments;
 
-  if (options.component && filteredSegments.length === 0) {
+  if (options.component && filteredFragments.length === 0) {
     console.log(pc.yellow(`Component "${options.component}" not found.`));
     return {
       success: false,
@@ -127,14 +127,14 @@ export async function runScreenshotCommand(
     render: () => unknown;
   }> = [];
 
-  for (const { segment } of filteredSegments) {
+  for (const { fragment } of filteredFragments) {
     const variants = options.variant
-      ? segment.variants.filter((v) => v.name === options.variant)
-      : segment.variants;
+      ? fragment.variants.filter((v) => v.name === options.variant)
+      : fragment.variants;
 
     for (const variant of variants) {
       variantsToCapture.push({
-        component: segment.meta.name,
+        component: fragment.meta.name,
         variant: variant.name,
         render: variant.render,
       });

package/src/service/__tests__/props-extractor.test.ts

@@ -9,7 +9,7 @@ import { tmpdir } from "node:os";
 import {
   extractPropsFromSource,
   extractPropsFromFile,
-  convertToSegmentProps,
+  convertToFragmentProps,
 } from "../enhance/props-extractor.js";
 
 let tempDir: string;
@@ -331,8 +331,8 @@ export function MyComponent(props: MyComponentProps) {
   });
 });
 
-describe("convertToSegmentProps", () => {
-  it("should convert extracted props to segment format", () => {
+describe("convertToFragmentProps", () => {
+  it("should convert extracted props to fragment format", () => {
     const source = `
 interface ButtonProps {
   /** Button variant */
@@ -346,20 +346,20 @@ interface ButtonProps {
 }
 `;
     const result = extractPropsFromSource(source, "Button.tsx");
-    const segmentProps = convertToSegmentProps(result.props);
+    const fragmentProps = convertToFragmentProps(result.props);
 
-    expect(segmentProps).toHaveProperty("variant");
-    expect(segmentProps.variant.type).toBe("enum");
-    expect(segmentProps.variant.values).toEqual(["primary", "secondary"]);
-    expect(segmentProps.variant.description).toBe("Button variant");
+    expect(fragmentProps).toHaveProperty("variant");
+    expect(fragmentProps.variant.type).toBe("enum");
+    expect(fragmentProps.variant.values).toEqual(["primary", "secondary"]);
+    expect(fragmentProps.variant.description).toBe("Button variant");
 
-    expect(segmentProps).toHaveProperty("disabled");
-    expect(segmentProps.disabled.type).toBe("boolean");
-    expect(segmentProps.disabled.required).toBe(false);
-    expect(segmentProps.disabled.default).toBe(false);
+    expect(fragmentProps).toHaveProperty("disabled");
+    expect(fragmentProps.disabled.type).toBe("boolean");
+    expect(fragmentProps.disabled.required).toBe(false);
+    expect(fragmentProps.disabled.default).toBe(false);
 
-    expect(segmentProps).toHaveProperty("onClick");
-    expect(segmentProps.onClick.type).toBe("function");
-    expect(segmentProps.onClick.required).toBe(true);
+    expect(fragmentProps).toHaveProperty("onClick");
+    expect(fragmentProps.onClick.type).toBe("function");
+    expect(fragmentProps.onClick.required).toBe(true);
   });
 });

package/src/service/analytics.ts

@@ -1,14 +1,14 @@
 /**
  * Analytics engine for design system insights.
  *
- * Analyzes compiled segments to provide:
+ * Analyzes compiled fragments to provide:
  * - Component inventory stats
  * - Documentation coverage
  * - Usage pattern insights
  * - Quality scores
  */
 
-import type { CompiledSegmentsFile, CompiledSegment } from "../core/index.js";
+import type { CompiledFragmentsFile, CompiledFragment } from "../core/index.js";
 
 /**
  * Overall design system analytics
@@ -157,25 +157,25 @@ export interface Recommendation {
 }
 
 /**
- * Analyze a compiled segments file and produce analytics
+ * Analyze a compiled fragments file and produce analytics
  */
 export function analyzeDesignSystem(
-  data: CompiledSegmentsFile
+  data: CompiledFragmentsFile
 ): DesignSystemAnalytics {
-  const segments = Object.values(data.segments);
+  const fragments = Object.values(data.fragments);
   const analyzedAt = new Date();
 
   // Build component summaries
-  const summaries = segments.map((s) => buildComponentSummary(s));
+  const summaries = fragments.map((s) => buildComponentSummary(s));
 
   // Calculate coverage
-  const coverage = calculateCoverage(segments, summaries);
+  const coverage = calculateCoverage(fragments, summaries);
 
   // Calculate quality insights
-  const quality = calculateQuality(segments, summaries);
+  const quality = calculateQuality(fragments, summaries);
 
   // Build distribution data
-  const distribution = buildDistribution(segments, summaries);
+  const distribution = buildDistribution(fragments, summaries);
 
   // Build inventory
   const inventory = buildInventory(summaries);
@@ -187,14 +187,14 @@ export function analyzeDesignSystem(
   const overallScore = calculateOverallScore(coverage, quality, summaries);
 
   // Collect all categories
-  const categories = [...new Set(segments.map((s) => s.meta.category))].sort();
+  const categories = [...new Set(fragments.map((s) => s.meta.category))].sort();
 
   return {
     analyzedAt,
     summary: {
-      totalComponents: segments.length,
-      totalVariants: segments.reduce((sum, s) => sum + s.variants.length, 0),
-      totalProps: segments.reduce(
+      totalComponents: fragments.length,
+      totalVariants: fragments.reduce((sum, s) => sum + s.variants.length, 0),
+      totalProps: fragments.reduce(
         (sum, s) => sum + Object.keys(s.props ?? {}).length,
         0
       ),
@@ -212,12 +212,12 @@ export function analyzeDesignSystem(
 /**
  * Build summary for a single component
  */
-function buildComponentSummary(segment: CompiledSegment): ComponentSummary {
-  const propCount = Object.keys(segment.props ?? {}).length;
-  const hasUsageWhen = (segment.usage?.when?.length ?? 0) > 0;
-  const hasUsageWhenNot = (segment.usage?.whenNot?.length ?? 0) > 0;
-  const hasGuidelines = (segment.usage?.guidelines?.length ?? 0) > 0;
-  const hasRelations = (segment.relations?.length ?? 0) > 0;
+function buildComponentSummary(fragment: CompiledFragment): ComponentSummary {
+  const propCount = Object.keys(fragment.props ?? {}).length;
+  const hasUsageWhen = (fragment.usage?.when?.length ?? 0) > 0;
+  const hasUsageWhenNot = (fragment.usage?.whenNot?.length ?? 0) > 0;
+  const hasGuidelines = (fragment.usage?.guidelines?.length ?? 0) > 0;
+  const hasRelations = (fragment.relations?.length ?? 0) > 0;
 
   // Calculate documentation score
   let docScore = 0;
@@ -225,7 +225,7 @@ function buildComponentSummary(segment: CompiledSegment): ComponentSummary {
 
   // Description (20 points)
   docTotal += 20;
-  if (segment.meta.description && segment.meta.description.length > 20) {
+  if (fragment.meta.description && fragment.meta.description.length > 20) {
     docScore += 20;
   }
 
@@ -248,7 +248,7 @@ function buildComponentSummary(segment: CompiledSegment): ComponentSummary {
   // Props documented (15 points)
   docTotal += 15;
   if (propCount > 0) {
-    const documentedProps = Object.values(segment.props ?? {}).filter(
+    const documentedProps = Object.values(fragment.props ?? {}).filter(
       (p) => p.description && p.description.length > 5
     ).length;
     docScore += Math.round((documentedProps / propCount) * 15);
@@ -257,10 +257,10 @@ function buildComponentSummary(segment: CompiledSegment): ComponentSummary {
   }
 
   return {
-    name: segment.meta.name,
-    category: segment.meta.category,
-    status: segment.meta.status ?? "stable",
-    variantCount: segment.variants.length,
+    name: fragment.meta.name,
+    category: fragment.meta.category,
+    status: fragment.meta.status ?? "stable",
+    variantCount: fragment.variants.length,
     propCount,
     hasUsageWhen,
     hasUsageWhenNot,
@@ -274,14 +274,14 @@ function buildComponentSummary(segment: CompiledSegment): ComponentSummary {
  * Calculate coverage analytics
  */
 function calculateCoverage(
-  segments: CompiledSegment[],
+  fragments: CompiledFragment[],
   summaries: ComponentSummary[]
 ): CoverageAnalytics {
-  const total = segments.length;
+  const total = fragments.length;
 
   const fields = {
     description: {
-      covered: segments.filter(
+      covered: fragments.filter(
         (s) => s.meta.description && s.meta.description.length > 10
       ).length,
       total,
@@ -303,7 +303,7 @@ function calculateCoverage(
       percentage: 0,
     },
     accessibility: {
-      covered: segments.filter((s) => (s.usage?.accessibility?.length ?? 0) > 0)
+      covered: fragments.filter((s) => (s.usage?.accessibility?.length ?? 0) > 0)
         .length,
       total,
       percentage: 0,
@@ -326,8 +326,8 @@ function calculateCoverage(
   };
 
   // Calculate prop coverage
-  for (const segment of segments) {
-    const props = Object.values(segment.props ?? {});
+  for (const fragment of fragments) {
+    const props = Object.values(fragment.props ?? {});
     fields.propDescriptions.total += props.length;
     fields.propConstraints.total += props.length;
 
@@ -377,7 +377,7 @@ function calculateCoverage(
  * Calculate quality analytics
  */
 function calculateQuality(
-  segments: CompiledSegment[],
+  fragments: CompiledFragment[],
   summaries: ComponentSummary[]
 ): QualityAnalytics {
   const missingWhenNot = summaries
@@ -399,10 +399,10 @@ function calculateQuality(
   const undocumentedProps: QualityAnalytics["undocumentedProps"] = [];
   const unconstrainedProps: QualityAnalytics["unconstrainedProps"] = [];
 
-  for (const segment of segments) {
-    for (const [propName, prop] of Object.entries(segment.props ?? {})) {
+  for (const fragment of fragments) {
+    for (const [propName, prop] of Object.entries(fragment.props ?? {})) {
       if (!prop.description || prop.description.length < 5) {
-        undocumentedProps.push({ component: segment.meta.name, prop: propName });
+        undocumentedProps.push({ component: fragment.meta.name, prop: propName });
       }
       if (
         (prop.constraints?.length ?? 0) === 0 &&
@@ -410,7 +410,7 @@ function calculateQuality(
         prop.type !== "function"
       ) {
         unconstrainedProps.push({
-          component: segment.meta.name,
+          component: fragment.meta.name,
           prop: propName,
         });
       }
@@ -431,7 +431,7 @@ function calculateQuality(
  * Build distribution data for charts
  */
 function buildDistribution(
-  segments: CompiledSegment[],
+  fragments: CompiledFragment[],
   summaries: ComponentSummary[]
 ): DistributionAnalytics {
   // Variants per component
@@ -464,8 +464,8 @@ function buildDistribution(
 
   // Tag frequency
   const tagMap = new Map<string, number>();
-  for (const segment of segments) {
-    for (const tag of segment.meta.tags ?? []) {
+  for (const fragment of fragments) {
+    for (const tag of fragment.meta.tags ?? []) {
       tagMap.set(tag, (tagMap.get(tag) ?? 0) + 1);
     }
   }

package/src/service/enhance/codebase-scanner.ts

@@ -54,7 +54,7 @@ const DEFAULT_EXCLUDE = [
   "**/*.test.*",
   "**/*.spec.*",
   "**/*.stories.*",
-  "**/*.segment.*",
+  "**/*.fragment.*",
   "**/storybook-static/**",
 ];
 

package/src/service/enhance/index.ts

@@ -112,7 +112,7 @@ export {
   extractPropsFromSource,
   extractPropsForComponent,
   extractAllComponentProps,
-  convertToSegmentProps,
+  convertToFragmentProps,
   type ExtractedProp,
   type PropsExtractionResult,
   type PropsExtractionOptions,

package/src/service/enhance/props-extractor.ts

@@ -559,9 +559,9 @@ function inferComponentName(filePath: string): string {
 }
 
 /**
- * Convert extracted props to PropDefinition format for segments.json
+ * Convert extracted props to PropDefinition format for fragments.json
  */
-export function convertToSegmentProps(
+export function convertToFragmentProps(
   props: ExtractedProp[]
 ): Record<string, PropDefinition> {
   const result: Record<string, PropDefinition> = {};

package/src/service/enhance/types.ts

@@ -290,13 +290,13 @@ export interface ExtractedDocs {
   /** JSDoc tags (deprecated, since, version, etc.) */
   tags: Record<string, string>;
 
-  /** Existing when/whenNot from segment file */
+  /** Existing when/whenNot from fragment file */
   existingWhen?: string[];
   existingWhenNot?: string[];
   existingGuidelines?: string[];
 
   /** Source of documentation */
-  sources?: ("jsdoc" | "storybook" | "markdown" | "segment")[];
+  sources?: ("jsdoc" | "storybook" | "markdown" | "fragment")[];
 }
 
 /**

package/src/service/index.ts

@@ -1,7 +1,7 @@
 /**
  * @fragments/service
  *
- * Screenshot capture and verification service for Segments.
+ * Screenshot capture and verification service for Fragments.
  * Provides browser pool management, screenshot capture, and visual diff capabilities.
  */
 
@@ -203,7 +203,7 @@ export {
   extractPropsFromSource,
   extractPropsForComponent,
   extractAllComponentProps,
-  convertToSegmentProps,
+  convertToFragmentProps,
   type ExtractedProp,
   type PropsExtractionResult,
   type PropsExtractionOptions,