@fragments-sdk/core 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +84 -0
- package/dist/index.d.ts +2873 -0
- package/dist/index.js +1431 -0
- package/dist/index.js.map +1 -0
- package/package.json +75 -0
- package/src/__tests__/preview-runtime.test.tsx +111 -0
- package/src/composition.test.ts +262 -0
- package/src/composition.ts +318 -0
- package/src/constants.ts +114 -0
- package/src/context.ts +2 -0
- package/src/defineFragment.ts +141 -0
- package/src/figma.ts +263 -0
- package/src/fragment-types.ts +214 -0
- package/src/index.ts +207 -0
- package/src/performance-presets.ts +142 -0
- package/src/preview-runtime.tsx +144 -0
- package/src/schema.ts +229 -0
- package/src/storyAdapter.test.ts +571 -0
- package/src/storyAdapter.ts +761 -0
- package/src/storyFilters.test.ts +350 -0
- package/src/storyFilters.ts +253 -0
- package/src/storybook-csf.ts +11 -0
- package/src/token-parser.ts +321 -0
- package/src/token-types.ts +287 -0
- package/src/types.ts +784 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,2873 @@
|
|
|
1
|
+
import { ComponentType, ReactNode, JSX } from 'react';
|
|
2
|
+
import { CompiledBlock, CompiledFragment } from '@fragments-sdk/context/types';
|
|
3
|
+
export { CompiledBlock, CompiledFragment, CompiledFragmentsFile, CompiledTokenData, CompiledTokenEntry } from '@fragments-sdk/context/types';
|
|
4
|
+
import { z } from 'zod';
|
|
5
|
+
export { ContextOptions, ContextResult, generateContext } from '@fragments-sdk/context/generate';
|
|
6
|
+
import { ComponentGraph } from '@fragments-sdk/context/graph';
|
|
7
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
8
|
+
import { toId as toId$1, storyNameFromExport as storyNameFromExport$1, isExportStory as isExportStory$1 } from '@storybook/csf';
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Brand constants for easy rebranding if domain availability requires it.
|
|
12
|
+
* All naming throughout the codebase should reference these constants.
|
|
13
|
+
*/
|
|
14
|
+
declare const BRAND: {
|
|
15
|
+
/** Display name (e.g., "Fragments") */
|
|
16
|
+
readonly name: "Fragments";
|
|
17
|
+
/** Lowercase name for file paths and CLI (e.g., "fragments") */
|
|
18
|
+
readonly nameLower: "fragments";
|
|
19
|
+
/** File extension for fragment definition files (e.g., ".fragment.tsx") */
|
|
20
|
+
readonly fileExtension: ".fragment.tsx";
|
|
21
|
+
/** Legacy file extension for segments (still supported for migration) */
|
|
22
|
+
readonly legacyFileExtension: ".segment.tsx";
|
|
23
|
+
/** JSON file extension for compiled output */
|
|
24
|
+
readonly jsonExtension: ".fragment.json";
|
|
25
|
+
/** Default output file name (e.g., "fragments.json") */
|
|
26
|
+
readonly outFile: "fragments.json";
|
|
27
|
+
/** Config file name (e.g., "fragments.config.ts") */
|
|
28
|
+
readonly configFile: "fragments.config.ts";
|
|
29
|
+
/** Legacy config file name (still supported for migration) */
|
|
30
|
+
readonly legacyConfigFile: "segments.config.ts";
|
|
31
|
+
/** CLI command name (e.g., "fragments") */
|
|
32
|
+
readonly cliCommand: "fragments";
|
|
33
|
+
/** Package scope (e.g., "@fragments") */
|
|
34
|
+
readonly packageScope: "@fragments";
|
|
35
|
+
/** Directory for storing fragments, registry, and cache */
|
|
36
|
+
readonly dataDir: ".fragments";
|
|
37
|
+
/** Components subdirectory within .fragments/ */
|
|
38
|
+
readonly componentsDir: "components";
|
|
39
|
+
/** Registry file name */
|
|
40
|
+
readonly registryFile: "registry.json";
|
|
41
|
+
/** Context file name (AI-ready markdown) */
|
|
42
|
+
readonly contextFile: "context.md";
|
|
43
|
+
/** Screenshots subdirectory */
|
|
44
|
+
readonly screenshotsDir: "screenshots";
|
|
45
|
+
/** Cache subdirectory (gitignored) */
|
|
46
|
+
readonly cacheDir: "cache";
|
|
47
|
+
/** Diff output subdirectory (gitignored) */
|
|
48
|
+
readonly diffDir: "diff";
|
|
49
|
+
/** Manifest filename */
|
|
50
|
+
readonly manifestFile: "manifest.json";
|
|
51
|
+
/** Prefix for localStorage keys (e.g., "fragments-") */
|
|
52
|
+
readonly storagePrefix: "fragments-";
|
|
53
|
+
/** Static viewer HTML file name */
|
|
54
|
+
readonly viewerHtmlFile: "fragments-viewer.html";
|
|
55
|
+
/** MCP tool name prefix (e.g., "fragments_") */
|
|
56
|
+
readonly mcpToolPrefix: "fragments_";
|
|
57
|
+
/** File extension for block definition files */
|
|
58
|
+
readonly blockFileExtension: ".block.ts";
|
|
59
|
+
/** @deprecated Use blockFileExtension instead */
|
|
60
|
+
readonly recipeFileExtension: ".recipe.ts";
|
|
61
|
+
/** Vite plugin namespace */
|
|
62
|
+
readonly vitePluginNamespace: "fragments-core-shim";
|
|
63
|
+
};
|
|
64
|
+
type Brand = typeof BRAND;
|
|
65
|
+
/**
|
|
66
|
+
* Default configuration values for the service.
|
|
67
|
+
* These can be overridden in fragments.config.ts
|
|
68
|
+
*/
|
|
69
|
+
declare const DEFAULTS: {
|
|
70
|
+
/** Default viewport dimensions */
|
|
71
|
+
readonly viewport: {
|
|
72
|
+
readonly width: 1280;
|
|
73
|
+
readonly height: 800;
|
|
74
|
+
};
|
|
75
|
+
/** Default diff threshold (percentage) */
|
|
76
|
+
readonly diffThreshold: 5;
|
|
77
|
+
/** Browser pool size */
|
|
78
|
+
readonly poolSize: 3;
|
|
79
|
+
/** Idle timeout before browser shutdown (ms) - 5 minutes */
|
|
80
|
+
readonly idleTimeoutMs: number;
|
|
81
|
+
/** Delay after render before capture (ms) */
|
|
82
|
+
readonly captureDelayMs: 100;
|
|
83
|
+
/** Font loading timeout (ms) */
|
|
84
|
+
readonly fontTimeoutMs: 3000;
|
|
85
|
+
/** Default theme */
|
|
86
|
+
readonly theme: "light";
|
|
87
|
+
/** Dev server port */
|
|
88
|
+
readonly port: 6006;
|
|
89
|
+
};
|
|
90
|
+
type Defaults = typeof DEFAULTS;
|
|
91
|
+
|
|
92
|
+
/**
|
|
93
|
+
* A React component that can be used in a fragment definition.
|
|
94
|
+
* This type is intentionally broad to support various React component patterns
|
|
95
|
+
* including FC, forwardRef, memo, and class components across different React versions.
|
|
96
|
+
*/
|
|
97
|
+
type FragmentComponent<TProps = any> = ComponentType<TProps> | ((props: TProps) => ReactNode | JSX.Element | null);
|
|
98
|
+
/**
|
|
99
|
+
* Metadata about the component
|
|
100
|
+
*/
|
|
101
|
+
interface FragmentMeta$1 {
|
|
102
|
+
/** Component display name */
|
|
103
|
+
name: string;
|
|
104
|
+
/** Brief description of the component's purpose */
|
|
105
|
+
description: string;
|
|
106
|
+
/** Category for organizing components (e.g., "actions", "forms", "layout") */
|
|
107
|
+
category: string;
|
|
108
|
+
/** Optional tags for additional categorization */
|
|
109
|
+
tags?: string[];
|
|
110
|
+
/** Component status */
|
|
111
|
+
status?: "stable" | "beta" | "deprecated" | "experimental";
|
|
112
|
+
/** Version when component was introduced */
|
|
113
|
+
since?: string;
|
|
114
|
+
/** External npm packages required by this component (displayed in docs Setup section) */
|
|
115
|
+
dependencies?: Array<{
|
|
116
|
+
name: string;
|
|
117
|
+
version: string;
|
|
118
|
+
reason?: string;
|
|
119
|
+
}>;
|
|
120
|
+
/** Figma frame URL for design verification */
|
|
121
|
+
figma?: string;
|
|
122
|
+
/** Figma property mappings (how Figma props map to code props) */
|
|
123
|
+
figmaProps?: Record<string, FigmaPropMapping>;
|
|
124
|
+
}
|
|
125
|
+
/**
|
|
126
|
+
* Figma property mapping types - describes how a Figma property maps to code
|
|
127
|
+
*/
|
|
128
|
+
type FigmaPropMapping = FigmaStringMapping | FigmaBooleanMapping | FigmaEnumMapping | FigmaInstanceMapping | FigmaChildrenMapping | FigmaTextContentMapping;
|
|
129
|
+
/** Maps a Figma text property to a string prop */
|
|
130
|
+
interface FigmaStringMapping {
|
|
131
|
+
__type: 'figma-string';
|
|
132
|
+
figmaProperty: string;
|
|
133
|
+
}
|
|
134
|
+
/** Maps a Figma boolean property to a boolean prop (with optional value mapping) */
|
|
135
|
+
interface FigmaBooleanMapping {
|
|
136
|
+
__type: 'figma-boolean';
|
|
137
|
+
figmaProperty: string;
|
|
138
|
+
valueMapping?: {
|
|
139
|
+
true: unknown;
|
|
140
|
+
false: unknown;
|
|
141
|
+
};
|
|
142
|
+
}
|
|
143
|
+
/** Maps a Figma variant property to an enum prop */
|
|
144
|
+
interface FigmaEnumMapping {
|
|
145
|
+
__type: 'figma-enum';
|
|
146
|
+
figmaProperty: string;
|
|
147
|
+
valueMapping: Record<string, unknown>;
|
|
148
|
+
}
|
|
149
|
+
/** References a nested Figma component instance */
|
|
150
|
+
interface FigmaInstanceMapping {
|
|
151
|
+
__type: 'figma-instance';
|
|
152
|
+
figmaProperty: string;
|
|
153
|
+
}
|
|
154
|
+
/** Renders children from Figma layer names */
|
|
155
|
+
interface FigmaChildrenMapping {
|
|
156
|
+
__type: 'figma-children';
|
|
157
|
+
layers: string[];
|
|
158
|
+
}
|
|
159
|
+
/** Extracts text content from a Figma text layer */
|
|
160
|
+
interface FigmaTextContentMapping {
|
|
161
|
+
__type: 'figma-text-content';
|
|
162
|
+
layer: string;
|
|
163
|
+
}
|
|
164
|
+
/**
|
|
165
|
+
* Usage guidelines for AI agents and developers
|
|
166
|
+
*/
|
|
167
|
+
interface FragmentUsage$1 {
|
|
168
|
+
/** When to use this component */
|
|
169
|
+
when: string[];
|
|
170
|
+
/** When NOT to use this component (with alternatives) */
|
|
171
|
+
whenNot: string[];
|
|
172
|
+
/** Additional usage guidelines and best practices */
|
|
173
|
+
guidelines?: string[];
|
|
174
|
+
/** Accessibility considerations */
|
|
175
|
+
accessibility?: string[];
|
|
176
|
+
}
|
|
177
|
+
/**
|
|
178
|
+
* Prop type definitions
|
|
179
|
+
*/
|
|
180
|
+
type PropType = {
|
|
181
|
+
type: "string";
|
|
182
|
+
pattern?: string;
|
|
183
|
+
} | {
|
|
184
|
+
type: "number";
|
|
185
|
+
min?: number;
|
|
186
|
+
max?: number;
|
|
187
|
+
} | {
|
|
188
|
+
type: "boolean";
|
|
189
|
+
} | {
|
|
190
|
+
type: "enum";
|
|
191
|
+
values: readonly string[];
|
|
192
|
+
} | {
|
|
193
|
+
type: "function";
|
|
194
|
+
signature?: string;
|
|
195
|
+
} | {
|
|
196
|
+
type: "node";
|
|
197
|
+
} | {
|
|
198
|
+
type: "element";
|
|
199
|
+
} | {
|
|
200
|
+
type: "object";
|
|
201
|
+
shape?: Record<string, PropDefinition>;
|
|
202
|
+
} | {
|
|
203
|
+
type: "array";
|
|
204
|
+
items?: PropType;
|
|
205
|
+
} | {
|
|
206
|
+
type: "union";
|
|
207
|
+
types: PropType[];
|
|
208
|
+
} | {
|
|
209
|
+
type: "custom";
|
|
210
|
+
typescript: string;
|
|
211
|
+
};
|
|
212
|
+
/**
|
|
213
|
+
* Storybook control types for UI rendering
|
|
214
|
+
*/
|
|
215
|
+
type ControlType = "text" | "number" | "range" | "boolean" | "select" | "multi-select" | "radio" | "inline-radio" | "check" | "inline-check" | "object" | "file" | "color" | "date";
|
|
216
|
+
/**
|
|
217
|
+
* Definition for a single prop
|
|
218
|
+
*/
|
|
219
|
+
interface PropDefinition {
|
|
220
|
+
/** The prop type */
|
|
221
|
+
type: PropType["type"];
|
|
222
|
+
/** For enum types, the allowed values */
|
|
223
|
+
values?: readonly string[];
|
|
224
|
+
/** Default value if not provided */
|
|
225
|
+
default?: unknown;
|
|
226
|
+
/** Description of what this prop does */
|
|
227
|
+
description: string;
|
|
228
|
+
/** Whether this prop is required */
|
|
229
|
+
required?: boolean;
|
|
230
|
+
/** Usage constraints for AI agents */
|
|
231
|
+
constraints?: string[];
|
|
232
|
+
/** Additional type details for complex types */
|
|
233
|
+
typeDetails?: Omit<PropType, "type">;
|
|
234
|
+
/** Original Storybook control type for UI rendering (e.g., "color", "date", "range") */
|
|
235
|
+
controlType?: ControlType;
|
|
236
|
+
/** Control options (e.g., min/max for range, presetColors for color) */
|
|
237
|
+
controlOptions?: {
|
|
238
|
+
min?: number;
|
|
239
|
+
max?: number;
|
|
240
|
+
step?: number;
|
|
241
|
+
presetColors?: string[];
|
|
242
|
+
};
|
|
243
|
+
}
|
|
244
|
+
/**
|
|
245
|
+
* Relationship types between components
|
|
246
|
+
*/
|
|
247
|
+
type RelationshipType = "alternative" | "sibling" | "parent" | "child" | "composition" | "complementary" | "used-by";
|
|
248
|
+
/**
|
|
249
|
+
* Relationship to another component
|
|
250
|
+
*/
|
|
251
|
+
interface ComponentRelation {
|
|
252
|
+
/** Name of the related component */
|
|
253
|
+
component: string;
|
|
254
|
+
/** Type of relationship */
|
|
255
|
+
relationship: RelationshipType;
|
|
256
|
+
/** Explanation of the relationship */
|
|
257
|
+
note: string;
|
|
258
|
+
}
|
|
259
|
+
/**
|
|
260
|
+
* Loader function type for async data loading before render
|
|
261
|
+
*/
|
|
262
|
+
type VariantLoader = () => Promise<Record<string, unknown>>;
|
|
263
|
+
/**
|
|
264
|
+
* Play function context passed during interaction testing
|
|
265
|
+
*/
|
|
266
|
+
interface PlayFunctionContext {
|
|
267
|
+
/** The rendered canvas element containing the story */
|
|
268
|
+
canvasElement: HTMLElement;
|
|
269
|
+
/** Args passed to the story */
|
|
270
|
+
args: Record<string, unknown>;
|
|
271
|
+
/** Step function for organizing interactions */
|
|
272
|
+
step: (name: string, fn: () => Promise<void>) => Promise<void>;
|
|
273
|
+
}
|
|
274
|
+
/**
|
|
275
|
+
* Play function type for interaction testing
|
|
276
|
+
*/
|
|
277
|
+
type PlayFunction = (context: PlayFunctionContext) => Promise<void>;
|
|
278
|
+
/**
|
|
279
|
+
* Options passed to variant render function
|
|
280
|
+
*/
|
|
281
|
+
interface VariantRenderOptions {
|
|
282
|
+
/** Props/args to override the variant defaults */
|
|
283
|
+
args?: Record<string, unknown>;
|
|
284
|
+
/** Data loaded from async loaders */
|
|
285
|
+
loadedData?: Record<string, unknown>;
|
|
286
|
+
}
|
|
287
|
+
/**
|
|
288
|
+
* A single variant/example of the component
|
|
289
|
+
*/
|
|
290
|
+
interface FragmentVariant {
|
|
291
|
+
/** Variant name */
|
|
292
|
+
name: string;
|
|
293
|
+
/** Description of when to use this variant */
|
|
294
|
+
description: string;
|
|
295
|
+
/** Render function that returns the component example
|
|
296
|
+
* @param options - Optional args overrides and loaded data
|
|
297
|
+
*/
|
|
298
|
+
render: (options?: VariantRenderOptions) => ReactNode;
|
|
299
|
+
/** Optional code string for display (auto-generated if not provided) */
|
|
300
|
+
code?: string;
|
|
301
|
+
/** Figma frame URL for this specific variant (overrides meta.figma) */
|
|
302
|
+
figma?: string;
|
|
303
|
+
/** Whether this variant has a Storybook play function (for display purposes) */
|
|
304
|
+
hasPlayFunction?: boolean;
|
|
305
|
+
/** The actual play function for interaction testing */
|
|
306
|
+
play?: PlayFunction;
|
|
307
|
+
/** Storybook story ID for this variant (generated by @storybook/csf toId) */
|
|
308
|
+
storyId?: string;
|
|
309
|
+
/** Optional tags for this variant (inherited from story tags) */
|
|
310
|
+
tags?: string[];
|
|
311
|
+
/** Async loaders to execute before rendering (from Storybook loaders) */
|
|
312
|
+
loaders?: VariantLoader[];
|
|
313
|
+
/** The args/props used to render this variant (for code generation) */
|
|
314
|
+
args?: Record<string, unknown>;
|
|
315
|
+
}
|
|
316
|
+
/**
|
|
317
|
+
* Agent-optimized contract metadata
|
|
318
|
+
* Provides compact, structured data for AI code generation
|
|
319
|
+
*/
|
|
320
|
+
interface FragmentContract {
|
|
321
|
+
/** Short prop descriptions for agents (e.g., "variant: primary|secondary (required)") */
|
|
322
|
+
propsSummary?: string[];
|
|
323
|
+
/** Accessibility rule IDs for lookup in glossary (e.g., "A11Y_BTN_LABEL") */
|
|
324
|
+
a11yRules?: string[];
|
|
325
|
+
/** Banned patterns in codebase - triggers warnings during code review */
|
|
326
|
+
bans?: Array<{
|
|
327
|
+
/** Pattern to match (regex string or literal) */
|
|
328
|
+
pattern: string;
|
|
329
|
+
/** Message explaining why this pattern is banned and what to use instead */
|
|
330
|
+
message: string;
|
|
331
|
+
}>;
|
|
332
|
+
/** Scenario tags for use-case matching (e.g., "form.submit", "navigation.primary") */
|
|
333
|
+
scenarioTags?: string[];
|
|
334
|
+
/** Per-component performance budget override in bytes (gzipped). Overrides global budget. */
|
|
335
|
+
performanceBudget?: number;
|
|
336
|
+
}
|
|
337
|
+
/**
|
|
338
|
+
* Provenance tracking for generated fragments
|
|
339
|
+
* Helps distinguish human-authored from machine-generated content
|
|
340
|
+
*/
|
|
341
|
+
interface FragmentGenerated {
|
|
342
|
+
/** Source of this fragment definition */
|
|
343
|
+
source: "storybook" | "manual" | "ai";
|
|
344
|
+
/** Original source file (e.g., "Button.stories.tsx") */
|
|
345
|
+
sourceFile?: string;
|
|
346
|
+
/** Confidence score from 0-1 (how reliable the extraction was) */
|
|
347
|
+
confidence?: number;
|
|
348
|
+
/** ISO timestamp when this was generated */
|
|
349
|
+
timestamp?: string;
|
|
350
|
+
}
|
|
351
|
+
/**
|
|
352
|
+
* AI-specific metadata for playground context generation
|
|
353
|
+
* Provides hints for AI code generation about component composition
|
|
354
|
+
*/
|
|
355
|
+
interface AIMetadata {
|
|
356
|
+
/** How this component is composed with others */
|
|
357
|
+
compositionPattern?: "compound" | "simple" | "controlled";
|
|
358
|
+
/** Sub-component names (without parent prefix, e.g., "Header" not "Card.Header") */
|
|
359
|
+
subComponents?: string[];
|
|
360
|
+
/** Sub-components that must be present for valid composition */
|
|
361
|
+
requiredChildren?: string[];
|
|
362
|
+
/** Common usage patterns as JSX strings for AI reference */
|
|
363
|
+
commonPatterns?: string[];
|
|
364
|
+
}
|
|
365
|
+
/**
|
|
366
|
+
* Complete fragment definition
|
|
367
|
+
*/
|
|
368
|
+
interface FragmentDefinition<TProps = unknown> {
|
|
369
|
+
/** The component being documented */
|
|
370
|
+
component: FragmentComponent<TProps>;
|
|
371
|
+
/** Component metadata */
|
|
372
|
+
meta: FragmentMeta$1;
|
|
373
|
+
/** Usage guidelines */
|
|
374
|
+
usage: FragmentUsage$1;
|
|
375
|
+
/** Props documentation */
|
|
376
|
+
props: Record<string, PropDefinition>;
|
|
377
|
+
/** Relationships to other components */
|
|
378
|
+
relations?: ComponentRelation[];
|
|
379
|
+
/** Component variants/examples */
|
|
380
|
+
variants: FragmentVariant[];
|
|
381
|
+
/** Agent-optimized contract metadata */
|
|
382
|
+
contract?: FragmentContract;
|
|
383
|
+
/** AI-specific metadata for playground context generation */
|
|
384
|
+
ai?: AIMetadata;
|
|
385
|
+
/** Provenance tracking (for generated fragments) */
|
|
386
|
+
_generated?: FragmentGenerated;
|
|
387
|
+
}
|
|
388
|
+
/**
|
|
389
|
+
* Registry generation options
|
|
390
|
+
*/
|
|
391
|
+
interface RegistryOptions {
|
|
392
|
+
/** Only include components that have a corresponding .stories.tsx file */
|
|
393
|
+
requireStory?: boolean;
|
|
394
|
+
/** Only include components that are exported (public API) */
|
|
395
|
+
publicOnly?: boolean;
|
|
396
|
+
/** Maximum depth for category inference from directory structure (default: 1) */
|
|
397
|
+
categoryDepth?: number;
|
|
398
|
+
/** Include props in registry (default: false - AI can read TypeScript directly) */
|
|
399
|
+
includeProps?: boolean;
|
|
400
|
+
/** Include full fragment data in registry (default: false - reference fragmentPath instead) */
|
|
401
|
+
embedFragments?: boolean;
|
|
402
|
+
}
|
|
403
|
+
/**
|
|
404
|
+
* Design token configuration
|
|
405
|
+
*/
|
|
406
|
+
interface TokenConfig {
|
|
407
|
+
/**
|
|
408
|
+
* Glob patterns for files to scan for tokens
|
|
409
|
+
* e.g., ["src/styles/theme.scss", "src/styles/variables.css"]
|
|
410
|
+
*/
|
|
411
|
+
include: string[];
|
|
412
|
+
/**
|
|
413
|
+
* Glob patterns to exclude
|
|
414
|
+
* @example ["node_modules"]
|
|
415
|
+
*/
|
|
416
|
+
exclude?: string[];
|
|
417
|
+
/**
|
|
418
|
+
* Map CSS selectors to theme names
|
|
419
|
+
* @example { ":root": "default", "[data-theme='dark']": "dark" }
|
|
420
|
+
*/
|
|
421
|
+
themeSelectors?: Record<string, string>;
|
|
422
|
+
/** Enable token comparison in style diffs (default: true) */
|
|
423
|
+
enabled?: boolean;
|
|
424
|
+
}
|
|
425
|
+
/**
|
|
426
|
+
* CI configuration for automated compliance checks
|
|
427
|
+
*/
|
|
428
|
+
interface CIConfig {
|
|
429
|
+
/** Minimum compliance percentage to pass (default: 80) */
|
|
430
|
+
minCompliance?: number;
|
|
431
|
+
/** Whether to fail on any visual regression */
|
|
432
|
+
failOnDiff?: boolean;
|
|
433
|
+
/** Whether to output JSON format */
|
|
434
|
+
jsonOutput?: boolean;
|
|
435
|
+
}
|
|
436
|
+
/**
|
|
437
|
+
* Snippet policy configuration.
|
|
438
|
+
* Controls snippet/render quality enforcement in `fragments validate`.
|
|
439
|
+
*/
|
|
440
|
+
interface SnippetPolicyConfig {
|
|
441
|
+
/** Validation mode: warn (non-blocking) or error (blocking). Default: warn */
|
|
442
|
+
mode?: "warn" | "error";
|
|
443
|
+
/** Validate snippet strings only, or snippet strings + render functions. Default: snippet+render */
|
|
444
|
+
scope?: "snippet" | "snippet+render";
|
|
445
|
+
/** Require authored snippets to be full, copy-pasteable examples with imports. Default: true */
|
|
446
|
+
requireFullSnippet?: boolean;
|
|
447
|
+
/** Allow these external modules for JSX components in snippets/renders. */
|
|
448
|
+
allowedExternalModules?: string[];
|
|
449
|
+
}
|
|
450
|
+
/**
|
|
451
|
+
* Storybook adapter filtering configuration.
|
|
452
|
+
* Controls which Storybook stories are included when generating fragments.
|
|
453
|
+
*/
|
|
454
|
+
interface StorybookFilterConfig {
|
|
455
|
+
/** Glob-style patterns for component names to explicitly exclude */
|
|
456
|
+
exclude?: string[];
|
|
457
|
+
/** Glob-style patterns for component names to force-include (bypasses all heuristic filters) */
|
|
458
|
+
include?: string[];
|
|
459
|
+
/** Exclude stories with "Deprecated" in the title (default: true) */
|
|
460
|
+
excludeDeprecated?: boolean;
|
|
461
|
+
/** Exclude test stories (title ending /test(s) or *.test.stories.* files) (default: true) */
|
|
462
|
+
excludeTests?: boolean;
|
|
463
|
+
/** Exclude SVG icon components (names matching Svg[A-Z]*) (default: true) */
|
|
464
|
+
excludeSvgIcons?: boolean;
|
|
465
|
+
/** Exclude sub-components detected by directory structure (default: true) */
|
|
466
|
+
excludeSubComponents?: boolean;
|
|
467
|
+
}
|
|
468
|
+
/**
|
|
469
|
+
* Config file structure
|
|
470
|
+
*/
|
|
471
|
+
interface FragmentsConfig {
|
|
472
|
+
/** Glob patterns for finding fragment/fragment files */
|
|
473
|
+
include: string[];
|
|
474
|
+
/** Glob patterns to exclude */
|
|
475
|
+
exclude?: string[];
|
|
476
|
+
/** Glob patterns for finding component files (for coverage validation) */
|
|
477
|
+
components?: string[];
|
|
478
|
+
/** Output path for compiled output */
|
|
479
|
+
outFile?: string;
|
|
480
|
+
/** Framework adapter to use */
|
|
481
|
+
framework?: "react" | "vue" | "svelte";
|
|
482
|
+
/** Figma file URL for the design system (used by `fragments link`) */
|
|
483
|
+
figmaFile?: string;
|
|
484
|
+
/** Figma access token (alternative to FIGMA_ACCESS_TOKEN env var) */
|
|
485
|
+
figmaToken?: string;
|
|
486
|
+
/** Screenshot configuration */
|
|
487
|
+
screenshots?: ScreenshotConfig;
|
|
488
|
+
/** Service configuration */
|
|
489
|
+
service?: ServiceConfig;
|
|
490
|
+
/** Registry generation options */
|
|
491
|
+
registry?: RegistryOptions;
|
|
492
|
+
/** Design token discovery and mapping configuration */
|
|
493
|
+
tokens?: TokenConfig;
|
|
494
|
+
/** CI pipeline configuration */
|
|
495
|
+
ci?: CIConfig;
|
|
496
|
+
/** Snippet/render policy validation */
|
|
497
|
+
snippets?: SnippetPolicyConfig;
|
|
498
|
+
/** Performance budgets: preset name or custom config */
|
|
499
|
+
performance?: string | {
|
|
500
|
+
preset?: string;
|
|
501
|
+
budgets?: {
|
|
502
|
+
bundleSize?: number;
|
|
503
|
+
};
|
|
504
|
+
};
|
|
505
|
+
/** Storybook adapter filtering configuration */
|
|
506
|
+
storybook?: StorybookFilterConfig;
|
|
507
|
+
}
|
|
508
|
+
/**
|
|
509
|
+
* Screenshot capture configuration
|
|
510
|
+
*/
|
|
511
|
+
interface ScreenshotConfig {
|
|
512
|
+
/** Default viewport for captures */
|
|
513
|
+
viewport?: Viewport;
|
|
514
|
+
/** Diff threshold percentage (0-100) */
|
|
515
|
+
threshold?: number;
|
|
516
|
+
/** Additional delay after render before capture (ms) */
|
|
517
|
+
delay?: number;
|
|
518
|
+
/** Output directory for baselines (relative to project root) */
|
|
519
|
+
outputDir?: string;
|
|
520
|
+
/** Themes to capture */
|
|
521
|
+
themes?: Theme[];
|
|
522
|
+
}
|
|
523
|
+
/**
|
|
524
|
+
* Service configuration
|
|
525
|
+
*/
|
|
526
|
+
interface ServiceConfig {
|
|
527
|
+
/** Browser pool size */
|
|
528
|
+
poolSize?: number;
|
|
529
|
+
/** Idle timeout before shutdown (ms) */
|
|
530
|
+
idleTimeout?: number;
|
|
531
|
+
}
|
|
532
|
+
/**
|
|
533
|
+
* Viewport dimensions
|
|
534
|
+
*/
|
|
535
|
+
interface Viewport {
|
|
536
|
+
width: number;
|
|
537
|
+
height: number;
|
|
538
|
+
deviceScaleFactor?: number;
|
|
539
|
+
}
|
|
540
|
+
/**
|
|
541
|
+
* Theme identifier
|
|
542
|
+
*/
|
|
543
|
+
type Theme = "light" | "dark";
|
|
544
|
+
/**
|
|
545
|
+
* Screenshot metadata
|
|
546
|
+
*/
|
|
547
|
+
interface Screenshot {
|
|
548
|
+
/** PNG image data */
|
|
549
|
+
data: Buffer;
|
|
550
|
+
/** SHA-256 hash of image data (for change detection) */
|
|
551
|
+
hash: string;
|
|
552
|
+
/** Viewport used for capture */
|
|
553
|
+
viewport: Viewport;
|
|
554
|
+
/** When this screenshot was taken */
|
|
555
|
+
capturedAt: Date;
|
|
556
|
+
/** Capture metadata */
|
|
557
|
+
metadata: ScreenshotMetadata;
|
|
558
|
+
}
|
|
559
|
+
/**
|
|
560
|
+
* Screenshot metadata
|
|
561
|
+
*/
|
|
562
|
+
interface ScreenshotMetadata {
|
|
563
|
+
/** Component name */
|
|
564
|
+
component: string;
|
|
565
|
+
/** Variant name */
|
|
566
|
+
variant: string;
|
|
567
|
+
/** Theme used */
|
|
568
|
+
theme: Theme;
|
|
569
|
+
/** Time to render the component (ms) */
|
|
570
|
+
renderTimeMs: number;
|
|
571
|
+
/** Time to capture the screenshot (ms) */
|
|
572
|
+
captureTimeMs: number;
|
|
573
|
+
}
|
|
574
|
+
/**
|
|
575
|
+
* Result of comparing two screenshots
|
|
576
|
+
*/
|
|
577
|
+
interface DiffResult {
|
|
578
|
+
/** Whether images are considered matching (below threshold) */
|
|
579
|
+
matches: boolean;
|
|
580
|
+
/** Percentage of pixels that differ (0-100) */
|
|
581
|
+
diffPercentage: number;
|
|
582
|
+
/** Number of differing pixels */
|
|
583
|
+
diffPixelCount: number;
|
|
584
|
+
/** Total pixels compared */
|
|
585
|
+
totalPixels: number;
|
|
586
|
+
/** PNG image highlighting differences */
|
|
587
|
+
diffImage?: Buffer;
|
|
588
|
+
/** Bounding boxes of changed regions */
|
|
589
|
+
changedRegions: BoundingBox[];
|
|
590
|
+
/** Time taken to compute diff (ms) */
|
|
591
|
+
diffTimeMs: number;
|
|
592
|
+
}
|
|
593
|
+
/**
|
|
594
|
+
* Bounding box for changed region
|
|
595
|
+
*/
|
|
596
|
+
interface BoundingBox {
|
|
597
|
+
x: number;
|
|
598
|
+
y: number;
|
|
599
|
+
width: number;
|
|
600
|
+
height: number;
|
|
601
|
+
}
|
|
602
|
+
/**
|
|
603
|
+
* Baseline information stored in manifest
|
|
604
|
+
*/
|
|
605
|
+
interface BaselineInfo {
|
|
606
|
+
/** Component name */
|
|
607
|
+
component: string;
|
|
608
|
+
/** Variant name */
|
|
609
|
+
variant: string;
|
|
610
|
+
/** Theme */
|
|
611
|
+
theme: Theme;
|
|
612
|
+
/** Relative path to image file */
|
|
613
|
+
path: string;
|
|
614
|
+
/** SHA-256 hash */
|
|
615
|
+
hash: string;
|
|
616
|
+
/** Viewport used */
|
|
617
|
+
viewport: Viewport;
|
|
618
|
+
/** When captured */
|
|
619
|
+
capturedAt: string;
|
|
620
|
+
/** File size in bytes */
|
|
621
|
+
fileSize: number;
|
|
622
|
+
}
|
|
623
|
+
/**
|
|
624
|
+
* Manifest file structure
|
|
625
|
+
*/
|
|
626
|
+
interface Manifest {
|
|
627
|
+
/** Schema version */
|
|
628
|
+
version: "1.0.0";
|
|
629
|
+
/** When manifest was generated */
|
|
630
|
+
generatedAt: string;
|
|
631
|
+
/** Configuration used for capture */
|
|
632
|
+
config: {
|
|
633
|
+
defaultViewport: Viewport;
|
|
634
|
+
defaultThreshold: number;
|
|
635
|
+
captureDelay: number;
|
|
636
|
+
};
|
|
637
|
+
/** All baselines indexed by component/variant */
|
|
638
|
+
baselines: Record<string, Record<string, BaselineInfo>>;
|
|
639
|
+
}
|
|
640
|
+
/**
|
|
641
|
+
* Verification request from AI agents
|
|
642
|
+
*/
|
|
643
|
+
interface VerifyRequest {
|
|
644
|
+
/** Component name */
|
|
645
|
+
component: string;
|
|
646
|
+
/** Variant name */
|
|
647
|
+
variant: string;
|
|
648
|
+
/** Theme to verify against */
|
|
649
|
+
theme?: Theme;
|
|
650
|
+
/** Override diff threshold */
|
|
651
|
+
threshold?: number;
|
|
652
|
+
}
|
|
653
|
+
/**
|
|
654
|
+
* Verification result
|
|
655
|
+
*/
|
|
656
|
+
interface VerifyResult {
|
|
657
|
+
/** Overall verdict */
|
|
658
|
+
verdict: "pass" | "fail" | "error";
|
|
659
|
+
/** Whether diff is below threshold */
|
|
660
|
+
matches: boolean;
|
|
661
|
+
/** Percentage of pixels that differ */
|
|
662
|
+
diffPercentage: number;
|
|
663
|
+
/** Current screenshot (base64 PNG) */
|
|
664
|
+
screenshot: string;
|
|
665
|
+
/** Baseline screenshot (base64 PNG) */
|
|
666
|
+
baseline: string;
|
|
667
|
+
/** Diff image if different (base64 PNG) */
|
|
668
|
+
diffImage?: string;
|
|
669
|
+
/** Human-readable notes */
|
|
670
|
+
notes: string[];
|
|
671
|
+
/** Error message if verdict is "error" */
|
|
672
|
+
error?: string;
|
|
673
|
+
/** Performance metrics */
|
|
674
|
+
timing: {
|
|
675
|
+
renderMs: number;
|
|
676
|
+
captureMs: number;
|
|
677
|
+
diffMs: number;
|
|
678
|
+
totalMs: number;
|
|
679
|
+
};
|
|
680
|
+
}
|
|
681
|
+
|
|
682
|
+
/**
|
|
683
|
+
* Block definition — a named composition pattern showing how
|
|
684
|
+
* design system components wire together for a common use case.
|
|
685
|
+
*/
|
|
686
|
+
interface BlockDefinition {
|
|
687
|
+
name: string;
|
|
688
|
+
description: string;
|
|
689
|
+
category: string;
|
|
690
|
+
components: string[];
|
|
691
|
+
code: string;
|
|
692
|
+
tags?: string[];
|
|
693
|
+
}
|
|
694
|
+
/**
|
|
695
|
+
* @deprecated Use BlockDefinition instead
|
|
696
|
+
*/
|
|
697
|
+
type RecipeDefinition = BlockDefinition;
|
|
698
|
+
/**
|
|
699
|
+
* @deprecated Use CompiledBlock instead
|
|
700
|
+
*/
|
|
701
|
+
type CompiledRecipe = CompiledBlock;
|
|
702
|
+
|
|
703
|
+
/**
|
|
704
|
+
* Performance budget presets and classification utilities.
|
|
705
|
+
*
|
|
706
|
+
* ESLint model: global defaults, zero-config, auto-measurement.
|
|
707
|
+
* Users configure 0-3 numbers. Per-component overrides are the `eslint-disable` equivalent.
|
|
708
|
+
*/
|
|
709
|
+
interface PerformanceBudgets {
|
|
710
|
+
/** Maximum gzipped bundle size in bytes */
|
|
711
|
+
bundleSize: number;
|
|
712
|
+
}
|
|
713
|
+
interface PerformanceConfig {
|
|
714
|
+
preset: string;
|
|
715
|
+
budgets: PerformanceBudgets;
|
|
716
|
+
}
|
|
717
|
+
type ComplexityTier = 'lightweight' | 'moderate' | 'heavy';
|
|
718
|
+
interface PerformanceData {
|
|
719
|
+
/** Gzipped bundle size in bytes */
|
|
720
|
+
bundleSize: number;
|
|
721
|
+
/** Raw (minified, not gzipped) bundle size in bytes */
|
|
722
|
+
rawSize: number;
|
|
723
|
+
/** Complexity classification */
|
|
724
|
+
complexity: ComplexityTier;
|
|
725
|
+
/** Percentage of budget used (0-100+) */
|
|
726
|
+
budgetPercent: number;
|
|
727
|
+
/** Whether the component exceeds its budget */
|
|
728
|
+
overBudget: boolean;
|
|
729
|
+
/** ISO timestamp when measured */
|
|
730
|
+
measuredAt: string;
|
|
731
|
+
}
|
|
732
|
+
interface PerformanceSummary {
|
|
733
|
+
/** Preset name used */
|
|
734
|
+
preset: string;
|
|
735
|
+
/** Budget applied in bytes */
|
|
736
|
+
budget: number;
|
|
737
|
+
/** Total components measured */
|
|
738
|
+
total: number;
|
|
739
|
+
/** Number of components over budget */
|
|
740
|
+
overBudget: number;
|
|
741
|
+
/** Distribution by tier */
|
|
742
|
+
tiers: Record<ComplexityTier, number>;
|
|
743
|
+
}
|
|
744
|
+
declare const PRESET_NAMES: readonly string[];
|
|
745
|
+
/**
|
|
746
|
+
* Resolve a performance config from user input.
|
|
747
|
+
* Accepts a preset name string or a custom config object.
|
|
748
|
+
*/
|
|
749
|
+
declare function resolvePerformanceConfig(input: string | {
|
|
750
|
+
preset?: string;
|
|
751
|
+
budgets?: Partial<PerformanceBudgets>;
|
|
752
|
+
} | undefined): PerformanceConfig;
|
|
753
|
+
/**
|
|
754
|
+
* Classify a component's complexity based on gzipped bundle size.
|
|
755
|
+
*
|
|
756
|
+
* - lightweight: < 5KB — simple, leaf components
|
|
757
|
+
* - moderate: < 15KB — typical composed components
|
|
758
|
+
* - heavy: >= 15KB — complex widgets with dependencies
|
|
759
|
+
*/
|
|
760
|
+
declare function classifyComplexity(gzipBytes: number): ComplexityTier;
|
|
761
|
+
/**
|
|
762
|
+
* Format bytes to a human-readable string (e.g. "2.1KB", "15.3KB").
|
|
763
|
+
*/
|
|
764
|
+
declare function formatBytes(bytes: number): string;
|
|
765
|
+
/**
|
|
766
|
+
* Create a visual budget bar for terminal output.
|
|
767
|
+
*/
|
|
768
|
+
declare function budgetBar(percent: number, width?: number): string;
|
|
769
|
+
|
|
770
|
+
/**
|
|
771
|
+
* Design Token Types for Fragments
|
|
772
|
+
*
|
|
773
|
+
* These types define the structure for CSS custom property (CSS variable) discovery,
|
|
774
|
+
* parsing, and reverse lookup capabilities. The token system enables:
|
|
775
|
+
*
|
|
776
|
+
* 1. Automatic discovery of design tokens from CSS/SCSS files
|
|
777
|
+
* 2. Reverse lookup: given a computed value, find which token(s) produce it
|
|
778
|
+
* 3. Detection of hardcoded values vs token usage
|
|
779
|
+
* 4. AI-friendly fix suggestions
|
|
780
|
+
*/
|
|
781
|
+
/**
|
|
782
|
+
* Token categories for grouping and filtering
|
|
783
|
+
*/
|
|
784
|
+
type TokenCategory = "color" | "spacing" | "typography" | "radius" | "shadow" | "sizing" | "border" | "animation" | "z-index" | "other";
|
|
785
|
+
/**
|
|
786
|
+
* A single design token (CSS custom property)
|
|
787
|
+
*/
|
|
788
|
+
interface DesignToken {
|
|
789
|
+
/** Token name with leading dashes (e.g., "--color-primary") */
|
|
790
|
+
name: string;
|
|
791
|
+
/** Raw value as written in CSS (e.g., "var(--color-cobalt-50)") */
|
|
792
|
+
rawValue: string;
|
|
793
|
+
/** Fully resolved value (e.g., "#0051c2") */
|
|
794
|
+
resolvedValue: string;
|
|
795
|
+
/** Inferred category based on naming convention */
|
|
796
|
+
category: TokenCategory;
|
|
797
|
+
/**
|
|
798
|
+
* Token level in the design system hierarchy:
|
|
799
|
+
* - 1 = Base/primitive tokens (raw values like colors, sizes)
|
|
800
|
+
* - 2 = Semantic tokens (references to base tokens with meaning)
|
|
801
|
+
* - 3 = Component tokens (component-specific tokens)
|
|
802
|
+
*/
|
|
803
|
+
level: 1 | 2 | 3;
|
|
804
|
+
/**
|
|
805
|
+
* Reference chain showing how the value was resolved
|
|
806
|
+
* e.g., ["--color-primary", "--color-cobalt-50"] means
|
|
807
|
+
* --color-primary references --color-cobalt-50
|
|
808
|
+
*/
|
|
809
|
+
referenceChain: string[];
|
|
810
|
+
/** Source file where this token was defined */
|
|
811
|
+
sourceFile: string;
|
|
812
|
+
/** Line number in source file */
|
|
813
|
+
lineNumber?: number;
|
|
814
|
+
/** Theme this token belongs to (e.g., "default", "dark", "light") */
|
|
815
|
+
theme: string;
|
|
816
|
+
/** CSS selector where this token is defined (e.g., ":root", "[data-theme='dark']") */
|
|
817
|
+
selector: string;
|
|
818
|
+
/** Optional description from comments */
|
|
819
|
+
description?: string;
|
|
820
|
+
}
|
|
821
|
+
/**
|
|
822
|
+
* Token registry for fast lookups
|
|
823
|
+
*/
|
|
824
|
+
interface TokenRegistry {
|
|
825
|
+
/** Lookup by token name (e.g., "--color-primary") */
|
|
826
|
+
byName: Map<string, DesignToken>;
|
|
827
|
+
/**
|
|
828
|
+
* REVERSE lookup: resolved value -> token names
|
|
829
|
+
* Key is normalized value (e.g., "#0051c2" lowercase)
|
|
830
|
+
* Value is array of token names that resolve to this value
|
|
831
|
+
*/
|
|
832
|
+
byValue: Map<string, string[]>;
|
|
833
|
+
/** Tokens grouped by theme */
|
|
834
|
+
byTheme: Map<string, DesignToken[]>;
|
|
835
|
+
/** Tokens grouped by category */
|
|
836
|
+
byCategory: Map<TokenCategory, DesignToken[]>;
|
|
837
|
+
/** Registry metadata */
|
|
838
|
+
meta: TokenRegistryMeta;
|
|
839
|
+
}
|
|
840
|
+
/**
|
|
841
|
+
* Token registry metadata
|
|
842
|
+
*/
|
|
843
|
+
interface TokenRegistryMeta {
|
|
844
|
+
/** When tokens were discovered */
|
|
845
|
+
discoveredAt: Date;
|
|
846
|
+
/** Source files that were parsed */
|
|
847
|
+
sourceFiles: string[];
|
|
848
|
+
/** Total number of tokens discovered */
|
|
849
|
+
totalTokens: number;
|
|
850
|
+
/** Time taken to parse (ms) */
|
|
851
|
+
parseTimeMs: number;
|
|
852
|
+
/** Number of circular references detected */
|
|
853
|
+
circularRefs: number;
|
|
854
|
+
/** Number of unresolved references */
|
|
855
|
+
unresolvedRefs: number;
|
|
856
|
+
}
|
|
857
|
+
/**
|
|
858
|
+
* Enhanced style diff item with token information
|
|
859
|
+
*/
|
|
860
|
+
interface EnhancedStyleDiffItem {
|
|
861
|
+
/** CSS property name (e.g., "backgroundColor") */
|
|
862
|
+
property: string;
|
|
863
|
+
/** Value from Figma design */
|
|
864
|
+
figma: string;
|
|
865
|
+
/** Value from rendered component */
|
|
866
|
+
rendered: string;
|
|
867
|
+
/** Whether values match (within tolerance) */
|
|
868
|
+
match: boolean;
|
|
869
|
+
/** Token name if Figma value matches a known token */
|
|
870
|
+
figmaToken?: string;
|
|
871
|
+
/** Token name if rendered value uses a token */
|
|
872
|
+
renderedToken?: string;
|
|
873
|
+
/**
|
|
874
|
+
* True if rendered value doesn't use a token but should
|
|
875
|
+
* (i.e., Figma uses a token but code uses hardcoded value)
|
|
876
|
+
*/
|
|
877
|
+
isHardcoded: boolean;
|
|
878
|
+
/** Suggested fix if hardcoded */
|
|
879
|
+
suggestedFix?: TokenFix;
|
|
880
|
+
}
|
|
881
|
+
/**
|
|
882
|
+
* Token-based fix suggestion
|
|
883
|
+
*/
|
|
884
|
+
interface TokenFix {
|
|
885
|
+
/** Token name to use (e.g., "--color-primary") */
|
|
886
|
+
tokenName: string;
|
|
887
|
+
/** Token's resolved value */
|
|
888
|
+
tokenValue: string;
|
|
889
|
+
/** Code snippet to fix the issue */
|
|
890
|
+
codeFix: string;
|
|
891
|
+
/** Confidence score 0-1 */
|
|
892
|
+
confidence: number;
|
|
893
|
+
/** Human-readable explanation */
|
|
894
|
+
reason: string;
|
|
895
|
+
}
|
|
896
|
+
/**
|
|
897
|
+
* Result of parsing a CSS/SCSS file for tokens
|
|
898
|
+
*/
|
|
899
|
+
interface TokenParseResult {
|
|
900
|
+
/** Tokens discovered in the file */
|
|
901
|
+
tokens: DesignToken[];
|
|
902
|
+
/** Errors encountered during parsing */
|
|
903
|
+
errors: TokenParseError[];
|
|
904
|
+
/** Warnings (non-fatal issues) */
|
|
905
|
+
warnings: string[];
|
|
906
|
+
/** Parse time in ms */
|
|
907
|
+
parseTimeMs: number;
|
|
908
|
+
}
|
|
909
|
+
/**
|
|
910
|
+
* Error during token parsing
|
|
911
|
+
*/
|
|
912
|
+
interface TokenParseError {
|
|
913
|
+
/** Error message */
|
|
914
|
+
message: string;
|
|
915
|
+
/** File where error occurred */
|
|
916
|
+
file: string;
|
|
917
|
+
/** Line number if known */
|
|
918
|
+
line?: number;
|
|
919
|
+
/** The problematic content if available */
|
|
920
|
+
content?: string;
|
|
921
|
+
}
|
|
922
|
+
/**
|
|
923
|
+
* Request to match a value to tokens
|
|
924
|
+
*/
|
|
925
|
+
interface TokenMatchRequest {
|
|
926
|
+
/** The value to find tokens for (e.g., "#0051c2") */
|
|
927
|
+
value: string;
|
|
928
|
+
/** Property type hint for better matching (e.g., "color") */
|
|
929
|
+
propertyType?: "color" | "spacing" | "typography" | "other";
|
|
930
|
+
/** Specific theme to search in */
|
|
931
|
+
theme?: string;
|
|
932
|
+
}
|
|
933
|
+
/**
|
|
934
|
+
* Result of token matching
|
|
935
|
+
*/
|
|
936
|
+
interface TokenMatchResult {
|
|
937
|
+
/** Exact matches (same resolved value) */
|
|
938
|
+
exactMatches: DesignToken[];
|
|
939
|
+
/** Close matches (similar value, useful for colors) */
|
|
940
|
+
closeMatches: Array<{
|
|
941
|
+
token: DesignToken;
|
|
942
|
+
/** How close the match is (0-1, 1 = exact) */
|
|
943
|
+
similarity: number;
|
|
944
|
+
}>;
|
|
945
|
+
/** Whether any match was found */
|
|
946
|
+
found: boolean;
|
|
947
|
+
}
|
|
948
|
+
/**
|
|
949
|
+
* Summary of token usage in a component
|
|
950
|
+
*/
|
|
951
|
+
interface TokenUsageSummary {
|
|
952
|
+
/** Total CSS properties checked */
|
|
953
|
+
totalProperties: number;
|
|
954
|
+
/** Properties using design tokens */
|
|
955
|
+
usingTokens: number;
|
|
956
|
+
/** Properties with hardcoded values */
|
|
957
|
+
hardcoded: number;
|
|
958
|
+
/** Properties matching but not using tokens explicitly */
|
|
959
|
+
implicitMatches: number;
|
|
960
|
+
/** Compliance percentage (usingTokens / totalProperties * 100) */
|
|
961
|
+
compliancePercent: number;
|
|
962
|
+
/** List of hardcoded properties with fix suggestions */
|
|
963
|
+
hardcodedProperties: EnhancedStyleDiffItem[];
|
|
964
|
+
}
|
|
965
|
+
|
|
966
|
+
declare const figmaPropMappingSchema: z.ZodDiscriminatedUnion<"__type", [z.ZodObject<{
|
|
967
|
+
__type: z.ZodLiteral<"figma-string">;
|
|
968
|
+
figmaProperty: z.ZodString;
|
|
969
|
+
}, "strip", z.ZodTypeAny, {
|
|
970
|
+
__type: "figma-string";
|
|
971
|
+
figmaProperty: string;
|
|
972
|
+
}, {
|
|
973
|
+
__type: "figma-string";
|
|
974
|
+
figmaProperty: string;
|
|
975
|
+
}>, z.ZodObject<{
|
|
976
|
+
__type: z.ZodLiteral<"figma-boolean">;
|
|
977
|
+
figmaProperty: z.ZodString;
|
|
978
|
+
valueMapping: z.ZodOptional<z.ZodObject<{
|
|
979
|
+
true: z.ZodUnknown;
|
|
980
|
+
false: z.ZodUnknown;
|
|
981
|
+
}, "strip", z.ZodTypeAny, {
|
|
982
|
+
true?: unknown;
|
|
983
|
+
false?: unknown;
|
|
984
|
+
}, {
|
|
985
|
+
true?: unknown;
|
|
986
|
+
false?: unknown;
|
|
987
|
+
}>>;
|
|
988
|
+
}, "strip", z.ZodTypeAny, {
|
|
989
|
+
__type: "figma-boolean";
|
|
990
|
+
figmaProperty: string;
|
|
991
|
+
valueMapping?: {
|
|
992
|
+
true?: unknown;
|
|
993
|
+
false?: unknown;
|
|
994
|
+
} | undefined;
|
|
995
|
+
}, {
|
|
996
|
+
__type: "figma-boolean";
|
|
997
|
+
figmaProperty: string;
|
|
998
|
+
valueMapping?: {
|
|
999
|
+
true?: unknown;
|
|
1000
|
+
false?: unknown;
|
|
1001
|
+
} | undefined;
|
|
1002
|
+
}>, z.ZodObject<{
|
|
1003
|
+
__type: z.ZodLiteral<"figma-enum">;
|
|
1004
|
+
figmaProperty: z.ZodString;
|
|
1005
|
+
valueMapping: z.ZodRecord<z.ZodString, z.ZodUnknown>;
|
|
1006
|
+
}, "strip", z.ZodTypeAny, {
|
|
1007
|
+
__type: "figma-enum";
|
|
1008
|
+
figmaProperty: string;
|
|
1009
|
+
valueMapping: Record<string, unknown>;
|
|
1010
|
+
}, {
|
|
1011
|
+
__type: "figma-enum";
|
|
1012
|
+
figmaProperty: string;
|
|
1013
|
+
valueMapping: Record<string, unknown>;
|
|
1014
|
+
}>, z.ZodObject<{
|
|
1015
|
+
__type: z.ZodLiteral<"figma-instance">;
|
|
1016
|
+
figmaProperty: z.ZodString;
|
|
1017
|
+
}, "strip", z.ZodTypeAny, {
|
|
1018
|
+
__type: "figma-instance";
|
|
1019
|
+
figmaProperty: string;
|
|
1020
|
+
}, {
|
|
1021
|
+
__type: "figma-instance";
|
|
1022
|
+
figmaProperty: string;
|
|
1023
|
+
}>, z.ZodObject<{
|
|
1024
|
+
__type: z.ZodLiteral<"figma-children">;
|
|
1025
|
+
layers: z.ZodArray<z.ZodString, "many">;
|
|
1026
|
+
}, "strip", z.ZodTypeAny, {
|
|
1027
|
+
__type: "figma-children";
|
|
1028
|
+
layers: string[];
|
|
1029
|
+
}, {
|
|
1030
|
+
__type: "figma-children";
|
|
1031
|
+
layers: string[];
|
|
1032
|
+
}>, z.ZodObject<{
|
|
1033
|
+
__type: z.ZodLiteral<"figma-text-content">;
|
|
1034
|
+
layer: z.ZodString;
|
|
1035
|
+
}, "strip", z.ZodTypeAny, {
|
|
1036
|
+
__type: "figma-text-content";
|
|
1037
|
+
layer: string;
|
|
1038
|
+
}, {
|
|
1039
|
+
__type: "figma-text-content";
|
|
1040
|
+
layer: string;
|
|
1041
|
+
}>]>;
|
|
1042
|
+
declare const fragmentMetaSchema: z.ZodObject<{
|
|
1043
|
+
name: z.ZodString;
|
|
1044
|
+
description: z.ZodString;
|
|
1045
|
+
category: z.ZodString;
|
|
1046
|
+
tags: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
|
|
1047
|
+
status: z.ZodOptional<z.ZodEnum<["stable", "beta", "deprecated", "experimental"]>>;
|
|
1048
|
+
since: z.ZodOptional<z.ZodString>;
|
|
1049
|
+
dependencies: z.ZodOptional<z.ZodArray<z.ZodObject<{
|
|
1050
|
+
name: z.ZodString;
|
|
1051
|
+
version: z.ZodString;
|
|
1052
|
+
reason: z.ZodOptional<z.ZodString>;
|
|
1053
|
+
}, "strip", z.ZodTypeAny, {
|
|
1054
|
+
name: string;
|
|
1055
|
+
version: string;
|
|
1056
|
+
reason?: string | undefined;
|
|
1057
|
+
}, {
|
|
1058
|
+
name: string;
|
|
1059
|
+
version: string;
|
|
1060
|
+
reason?: string | undefined;
|
|
1061
|
+
}>, "many">>;
|
|
1062
|
+
figma: z.ZodOptional<z.ZodString>;
|
|
1063
|
+
figmaProps: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodDiscriminatedUnion<"__type", [z.ZodObject<{
|
|
1064
|
+
__type: z.ZodLiteral<"figma-string">;
|
|
1065
|
+
figmaProperty: z.ZodString;
|
|
1066
|
+
}, "strip", z.ZodTypeAny, {
|
|
1067
|
+
__type: "figma-string";
|
|
1068
|
+
figmaProperty: string;
|
|
1069
|
+
}, {
|
|
1070
|
+
__type: "figma-string";
|
|
1071
|
+
figmaProperty: string;
|
|
1072
|
+
}>, z.ZodObject<{
|
|
1073
|
+
__type: z.ZodLiteral<"figma-boolean">;
|
|
1074
|
+
figmaProperty: z.ZodString;
|
|
1075
|
+
valueMapping: z.ZodOptional<z.ZodObject<{
|
|
1076
|
+
true: z.ZodUnknown;
|
|
1077
|
+
false: z.ZodUnknown;
|
|
1078
|
+
}, "strip", z.ZodTypeAny, {
|
|
1079
|
+
true?: unknown;
|
|
1080
|
+
false?: unknown;
|
|
1081
|
+
}, {
|
|
1082
|
+
true?: unknown;
|
|
1083
|
+
false?: unknown;
|
|
1084
|
+
}>>;
|
|
1085
|
+
}, "strip", z.ZodTypeAny, {
|
|
1086
|
+
__type: "figma-boolean";
|
|
1087
|
+
figmaProperty: string;
|
|
1088
|
+
valueMapping?: {
|
|
1089
|
+
true?: unknown;
|
|
1090
|
+
false?: unknown;
|
|
1091
|
+
} | undefined;
|
|
1092
|
+
}, {
|
|
1093
|
+
__type: "figma-boolean";
|
|
1094
|
+
figmaProperty: string;
|
|
1095
|
+
valueMapping?: {
|
|
1096
|
+
true?: unknown;
|
|
1097
|
+
false?: unknown;
|
|
1098
|
+
} | undefined;
|
|
1099
|
+
}>, z.ZodObject<{
|
|
1100
|
+
__type: z.ZodLiteral<"figma-enum">;
|
|
1101
|
+
figmaProperty: z.ZodString;
|
|
1102
|
+
valueMapping: z.ZodRecord<z.ZodString, z.ZodUnknown>;
|
|
1103
|
+
}, "strip", z.ZodTypeAny, {
|
|
1104
|
+
__type: "figma-enum";
|
|
1105
|
+
figmaProperty: string;
|
|
1106
|
+
valueMapping: Record<string, unknown>;
|
|
1107
|
+
}, {
|
|
1108
|
+
__type: "figma-enum";
|
|
1109
|
+
figmaProperty: string;
|
|
1110
|
+
valueMapping: Record<string, unknown>;
|
|
1111
|
+
}>, z.ZodObject<{
|
|
1112
|
+
__type: z.ZodLiteral<"figma-instance">;
|
|
1113
|
+
figmaProperty: z.ZodString;
|
|
1114
|
+
}, "strip", z.ZodTypeAny, {
|
|
1115
|
+
__type: "figma-instance";
|
|
1116
|
+
figmaProperty: string;
|
|
1117
|
+
}, {
|
|
1118
|
+
__type: "figma-instance";
|
|
1119
|
+
figmaProperty: string;
|
|
1120
|
+
}>, z.ZodObject<{
|
|
1121
|
+
__type: z.ZodLiteral<"figma-children">;
|
|
1122
|
+
layers: z.ZodArray<z.ZodString, "many">;
|
|
1123
|
+
}, "strip", z.ZodTypeAny, {
|
|
1124
|
+
__type: "figma-children";
|
|
1125
|
+
layers: string[];
|
|
1126
|
+
}, {
|
|
1127
|
+
__type: "figma-children";
|
|
1128
|
+
layers: string[];
|
|
1129
|
+
}>, z.ZodObject<{
|
|
1130
|
+
__type: z.ZodLiteral<"figma-text-content">;
|
|
1131
|
+
layer: z.ZodString;
|
|
1132
|
+
}, "strip", z.ZodTypeAny, {
|
|
1133
|
+
__type: "figma-text-content";
|
|
1134
|
+
layer: string;
|
|
1135
|
+
}, {
|
|
1136
|
+
__type: "figma-text-content";
|
|
1137
|
+
layer: string;
|
|
1138
|
+
}>]>>>;
|
|
1139
|
+
}, "strip", z.ZodTypeAny, {
|
|
1140
|
+
name: string;
|
|
1141
|
+
description: string;
|
|
1142
|
+
category: string;
|
|
1143
|
+
status?: "stable" | "beta" | "deprecated" | "experimental" | undefined;
|
|
1144
|
+
tags?: string[] | undefined;
|
|
1145
|
+
since?: string | undefined;
|
|
1146
|
+
dependencies?: {
|
|
1147
|
+
name: string;
|
|
1148
|
+
version: string;
|
|
1149
|
+
reason?: string | undefined;
|
|
1150
|
+
}[] | undefined;
|
|
1151
|
+
figma?: string | undefined;
|
|
1152
|
+
figmaProps?: Record<string, {
|
|
1153
|
+
__type: "figma-string";
|
|
1154
|
+
figmaProperty: string;
|
|
1155
|
+
} | {
|
|
1156
|
+
__type: "figma-boolean";
|
|
1157
|
+
figmaProperty: string;
|
|
1158
|
+
valueMapping?: {
|
|
1159
|
+
true?: unknown;
|
|
1160
|
+
false?: unknown;
|
|
1161
|
+
} | undefined;
|
|
1162
|
+
} | {
|
|
1163
|
+
__type: "figma-enum";
|
|
1164
|
+
figmaProperty: string;
|
|
1165
|
+
valueMapping: Record<string, unknown>;
|
|
1166
|
+
} | {
|
|
1167
|
+
__type: "figma-instance";
|
|
1168
|
+
figmaProperty: string;
|
|
1169
|
+
} | {
|
|
1170
|
+
__type: "figma-children";
|
|
1171
|
+
layers: string[];
|
|
1172
|
+
} | {
|
|
1173
|
+
__type: "figma-text-content";
|
|
1174
|
+
layer: string;
|
|
1175
|
+
}> | undefined;
|
|
1176
|
+
}, {
|
|
1177
|
+
name: string;
|
|
1178
|
+
description: string;
|
|
1179
|
+
category: string;
|
|
1180
|
+
status?: "stable" | "beta" | "deprecated" | "experimental" | undefined;
|
|
1181
|
+
tags?: string[] | undefined;
|
|
1182
|
+
since?: string | undefined;
|
|
1183
|
+
dependencies?: {
|
|
1184
|
+
name: string;
|
|
1185
|
+
version: string;
|
|
1186
|
+
reason?: string | undefined;
|
|
1187
|
+
}[] | undefined;
|
|
1188
|
+
figma?: string | undefined;
|
|
1189
|
+
figmaProps?: Record<string, {
|
|
1190
|
+
__type: "figma-string";
|
|
1191
|
+
figmaProperty: string;
|
|
1192
|
+
} | {
|
|
1193
|
+
__type: "figma-boolean";
|
|
1194
|
+
figmaProperty: string;
|
|
1195
|
+
valueMapping?: {
|
|
1196
|
+
true?: unknown;
|
|
1197
|
+
false?: unknown;
|
|
1198
|
+
} | undefined;
|
|
1199
|
+
} | {
|
|
1200
|
+
__type: "figma-enum";
|
|
1201
|
+
figmaProperty: string;
|
|
1202
|
+
valueMapping: Record<string, unknown>;
|
|
1203
|
+
} | {
|
|
1204
|
+
__type: "figma-instance";
|
|
1205
|
+
figmaProperty: string;
|
|
1206
|
+
} | {
|
|
1207
|
+
__type: "figma-children";
|
|
1208
|
+
layers: string[];
|
|
1209
|
+
} | {
|
|
1210
|
+
__type: "figma-text-content";
|
|
1211
|
+
layer: string;
|
|
1212
|
+
}> | undefined;
|
|
1213
|
+
}>;
|
|
1214
|
+
declare const fragmentUsageSchema: z.ZodObject<{
|
|
1215
|
+
when: z.ZodArray<z.ZodString, "many">;
|
|
1216
|
+
whenNot: z.ZodArray<z.ZodString, "many">;
|
|
1217
|
+
guidelines: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
|
|
1218
|
+
accessibility: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
|
|
1219
|
+
}, "strip", z.ZodTypeAny, {
|
|
1220
|
+
when: string[];
|
|
1221
|
+
whenNot: string[];
|
|
1222
|
+
guidelines?: string[] | undefined;
|
|
1223
|
+
accessibility?: string[] | undefined;
|
|
1224
|
+
}, {
|
|
1225
|
+
when: string[];
|
|
1226
|
+
whenNot: string[];
|
|
1227
|
+
guidelines?: string[] | undefined;
|
|
1228
|
+
accessibility?: string[] | undefined;
|
|
1229
|
+
}>;
|
|
1230
|
+
declare const propDefinitionSchema: z.ZodObject<{
|
|
1231
|
+
type: z.ZodType<string, z.ZodTypeDef, string>;
|
|
1232
|
+
values: z.ZodOptional<z.ZodReadonly<z.ZodArray<z.ZodString, "many">>>;
|
|
1233
|
+
default: z.ZodOptional<z.ZodUnknown>;
|
|
1234
|
+
description: z.ZodOptional<z.ZodString>;
|
|
1235
|
+
required: z.ZodOptional<z.ZodBoolean>;
|
|
1236
|
+
constraints: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
|
|
1237
|
+
typeDetails: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
|
|
1238
|
+
}, "strip", z.ZodTypeAny, {
|
|
1239
|
+
type: string;
|
|
1240
|
+
values?: readonly string[] | undefined;
|
|
1241
|
+
description?: string | undefined;
|
|
1242
|
+
default?: unknown;
|
|
1243
|
+
required?: boolean | undefined;
|
|
1244
|
+
constraints?: string[] | undefined;
|
|
1245
|
+
typeDetails?: Record<string, unknown> | undefined;
|
|
1246
|
+
}, {
|
|
1247
|
+
type: string;
|
|
1248
|
+
values?: readonly string[] | undefined;
|
|
1249
|
+
description?: string | undefined;
|
|
1250
|
+
default?: unknown;
|
|
1251
|
+
required?: boolean | undefined;
|
|
1252
|
+
constraints?: string[] | undefined;
|
|
1253
|
+
typeDetails?: Record<string, unknown> | undefined;
|
|
1254
|
+
}>;
|
|
1255
|
+
declare const componentRelationSchema: z.ZodObject<{
|
|
1256
|
+
component: z.ZodString;
|
|
1257
|
+
relationship: z.ZodEnum<["alternative", "sibling", "parent", "child", "composition", "complementary", "used-by"]>;
|
|
1258
|
+
note: z.ZodString;
|
|
1259
|
+
}, "strip", z.ZodTypeAny, {
|
|
1260
|
+
component: string;
|
|
1261
|
+
relationship: "alternative" | "sibling" | "parent" | "child" | "composition" | "complementary" | "used-by";
|
|
1262
|
+
note: string;
|
|
1263
|
+
}, {
|
|
1264
|
+
component: string;
|
|
1265
|
+
relationship: "alternative" | "sibling" | "parent" | "child" | "composition" | "complementary" | "used-by";
|
|
1266
|
+
note: string;
|
|
1267
|
+
}>;
|
|
1268
|
+
declare const fragmentVariantSchema: z.ZodObject<{
|
|
1269
|
+
name: z.ZodString;
|
|
1270
|
+
description: z.ZodString;
|
|
1271
|
+
render: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodUnknown>;
|
|
1272
|
+
code: z.ZodOptional<z.ZodString>;
|
|
1273
|
+
figma: z.ZodOptional<z.ZodString>;
|
|
1274
|
+
}, "strip", z.ZodTypeAny, {
|
|
1275
|
+
name: string;
|
|
1276
|
+
description: string;
|
|
1277
|
+
render: (...args: unknown[]) => unknown;
|
|
1278
|
+
code?: string | undefined;
|
|
1279
|
+
figma?: string | undefined;
|
|
1280
|
+
}, {
|
|
1281
|
+
name: string;
|
|
1282
|
+
description: string;
|
|
1283
|
+
render: (...args: unknown[]) => unknown;
|
|
1284
|
+
code?: string | undefined;
|
|
1285
|
+
figma?: string | undefined;
|
|
1286
|
+
}>;
|
|
1287
|
+
/**
|
|
1288
|
+
* Schema for banned patterns in codebase
|
|
1289
|
+
*/
|
|
1290
|
+
declare const fragmentBanSchema: z.ZodObject<{
|
|
1291
|
+
pattern: z.ZodString;
|
|
1292
|
+
message: z.ZodString;
|
|
1293
|
+
}, "strip", z.ZodTypeAny, {
|
|
1294
|
+
pattern: string;
|
|
1295
|
+
message: string;
|
|
1296
|
+
}, {
|
|
1297
|
+
pattern: string;
|
|
1298
|
+
message: string;
|
|
1299
|
+
}>;
|
|
1300
|
+
/**
|
|
1301
|
+
* Schema for agent-optimized contract metadata
|
|
1302
|
+
*/
|
|
1303
|
+
declare const fragmentContractSchema: z.ZodObject<{
|
|
1304
|
+
propsSummary: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
|
|
1305
|
+
a11yRules: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
|
|
1306
|
+
bans: z.ZodOptional<z.ZodArray<z.ZodObject<{
|
|
1307
|
+
pattern: z.ZodString;
|
|
1308
|
+
message: z.ZodString;
|
|
1309
|
+
}, "strip", z.ZodTypeAny, {
|
|
1310
|
+
pattern: string;
|
|
1311
|
+
message: string;
|
|
1312
|
+
}, {
|
|
1313
|
+
pattern: string;
|
|
1314
|
+
message: string;
|
|
1315
|
+
}>, "many">>;
|
|
1316
|
+
scenarioTags: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
|
|
1317
|
+
performanceBudget: z.ZodOptional<z.ZodNumber>;
|
|
1318
|
+
}, "strip", z.ZodTypeAny, {
|
|
1319
|
+
propsSummary?: string[] | undefined;
|
|
1320
|
+
a11yRules?: string[] | undefined;
|
|
1321
|
+
bans?: {
|
|
1322
|
+
pattern: string;
|
|
1323
|
+
message: string;
|
|
1324
|
+
}[] | undefined;
|
|
1325
|
+
scenarioTags?: string[] | undefined;
|
|
1326
|
+
performanceBudget?: number | undefined;
|
|
1327
|
+
}, {
|
|
1328
|
+
propsSummary?: string[] | undefined;
|
|
1329
|
+
a11yRules?: string[] | undefined;
|
|
1330
|
+
bans?: {
|
|
1331
|
+
pattern: string;
|
|
1332
|
+
message: string;
|
|
1333
|
+
}[] | undefined;
|
|
1334
|
+
scenarioTags?: string[] | undefined;
|
|
1335
|
+
performanceBudget?: number | undefined;
|
|
1336
|
+
}>;
|
|
1337
|
+
/**
|
|
1338
|
+
* Schema for provenance tracking of generated fragments
|
|
1339
|
+
*/
|
|
1340
|
+
declare const fragmentGeneratedSchema: z.ZodObject<{
|
|
1341
|
+
source: z.ZodEnum<["storybook", "manual", "ai"]>;
|
|
1342
|
+
sourceFile: z.ZodOptional<z.ZodString>;
|
|
1343
|
+
confidence: z.ZodOptional<z.ZodNumber>;
|
|
1344
|
+
timestamp: z.ZodOptional<z.ZodString>;
|
|
1345
|
+
}, "strip", z.ZodTypeAny, {
|
|
1346
|
+
source: "storybook" | "manual" | "ai";
|
|
1347
|
+
sourceFile?: string | undefined;
|
|
1348
|
+
confidence?: number | undefined;
|
|
1349
|
+
timestamp?: string | undefined;
|
|
1350
|
+
}, {
|
|
1351
|
+
source: "storybook" | "manual" | "ai";
|
|
1352
|
+
sourceFile?: string | undefined;
|
|
1353
|
+
confidence?: number | undefined;
|
|
1354
|
+
timestamp?: string | undefined;
|
|
1355
|
+
}>;
|
|
1356
|
+
/**
|
|
1357
|
+
* Schema for AI-specific metadata for playground context generation
|
|
1358
|
+
*/
|
|
1359
|
+
declare const aiMetadataSchema: z.ZodObject<{
|
|
1360
|
+
compositionPattern: z.ZodOptional<z.ZodEnum<["compound", "simple", "controlled", "wrapper"]>>;
|
|
1361
|
+
subComponents: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
|
|
1362
|
+
requiredChildren: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
|
|
1363
|
+
commonPatterns: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
|
|
1364
|
+
}, "strip", z.ZodTypeAny, {
|
|
1365
|
+
compositionPattern?: "compound" | "simple" | "controlled" | "wrapper" | undefined;
|
|
1366
|
+
subComponents?: string[] | undefined;
|
|
1367
|
+
requiredChildren?: string[] | undefined;
|
|
1368
|
+
commonPatterns?: string[] | undefined;
|
|
1369
|
+
}, {
|
|
1370
|
+
compositionPattern?: "compound" | "simple" | "controlled" | "wrapper" | undefined;
|
|
1371
|
+
subComponents?: string[] | undefined;
|
|
1372
|
+
requiredChildren?: string[] | undefined;
|
|
1373
|
+
commonPatterns?: string[] | undefined;
|
|
1374
|
+
}>;
|
|
1375
|
+
/**
|
|
1376
|
+
* Schema for block definitions
|
|
1377
|
+
*/
|
|
1378
|
+
declare const blockDefinitionSchema: z.ZodObject<{
|
|
1379
|
+
name: z.ZodString;
|
|
1380
|
+
description: z.ZodString;
|
|
1381
|
+
category: z.ZodString;
|
|
1382
|
+
components: z.ZodArray<z.ZodString, "many">;
|
|
1383
|
+
code: z.ZodString;
|
|
1384
|
+
tags: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
|
|
1385
|
+
}, "strip", z.ZodTypeAny, {
|
|
1386
|
+
components: string[];
|
|
1387
|
+
code: string;
|
|
1388
|
+
name: string;
|
|
1389
|
+
description: string;
|
|
1390
|
+
category: string;
|
|
1391
|
+
tags?: string[] | undefined;
|
|
1392
|
+
}, {
|
|
1393
|
+
components: string[];
|
|
1394
|
+
code: string;
|
|
1395
|
+
name: string;
|
|
1396
|
+
description: string;
|
|
1397
|
+
category: string;
|
|
1398
|
+
tags?: string[] | undefined;
|
|
1399
|
+
}>;
|
|
1400
|
+
declare const fragmentDefinitionSchema: z.ZodObject<{
|
|
1401
|
+
component: z.ZodAny;
|
|
1402
|
+
meta: z.ZodObject<{
|
|
1403
|
+
name: z.ZodString;
|
|
1404
|
+
description: z.ZodString;
|
|
1405
|
+
category: z.ZodString;
|
|
1406
|
+
tags: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
|
|
1407
|
+
status: z.ZodOptional<z.ZodEnum<["stable", "beta", "deprecated", "experimental"]>>;
|
|
1408
|
+
since: z.ZodOptional<z.ZodString>;
|
|
1409
|
+
dependencies: z.ZodOptional<z.ZodArray<z.ZodObject<{
|
|
1410
|
+
name: z.ZodString;
|
|
1411
|
+
version: z.ZodString;
|
|
1412
|
+
reason: z.ZodOptional<z.ZodString>;
|
|
1413
|
+
}, "strip", z.ZodTypeAny, {
|
|
1414
|
+
name: string;
|
|
1415
|
+
version: string;
|
|
1416
|
+
reason?: string | undefined;
|
|
1417
|
+
}, {
|
|
1418
|
+
name: string;
|
|
1419
|
+
version: string;
|
|
1420
|
+
reason?: string | undefined;
|
|
1421
|
+
}>, "many">>;
|
|
1422
|
+
figma: z.ZodOptional<z.ZodString>;
|
|
1423
|
+
figmaProps: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodDiscriminatedUnion<"__type", [z.ZodObject<{
|
|
1424
|
+
__type: z.ZodLiteral<"figma-string">;
|
|
1425
|
+
figmaProperty: z.ZodString;
|
|
1426
|
+
}, "strip", z.ZodTypeAny, {
|
|
1427
|
+
__type: "figma-string";
|
|
1428
|
+
figmaProperty: string;
|
|
1429
|
+
}, {
|
|
1430
|
+
__type: "figma-string";
|
|
1431
|
+
figmaProperty: string;
|
|
1432
|
+
}>, z.ZodObject<{
|
|
1433
|
+
__type: z.ZodLiteral<"figma-boolean">;
|
|
1434
|
+
figmaProperty: z.ZodString;
|
|
1435
|
+
valueMapping: z.ZodOptional<z.ZodObject<{
|
|
1436
|
+
true: z.ZodUnknown;
|
|
1437
|
+
false: z.ZodUnknown;
|
|
1438
|
+
}, "strip", z.ZodTypeAny, {
|
|
1439
|
+
true?: unknown;
|
|
1440
|
+
false?: unknown;
|
|
1441
|
+
}, {
|
|
1442
|
+
true?: unknown;
|
|
1443
|
+
false?: unknown;
|
|
1444
|
+
}>>;
|
|
1445
|
+
}, "strip", z.ZodTypeAny, {
|
|
1446
|
+
__type: "figma-boolean";
|
|
1447
|
+
figmaProperty: string;
|
|
1448
|
+
valueMapping?: {
|
|
1449
|
+
true?: unknown;
|
|
1450
|
+
false?: unknown;
|
|
1451
|
+
} | undefined;
|
|
1452
|
+
}, {
|
|
1453
|
+
__type: "figma-boolean";
|
|
1454
|
+
figmaProperty: string;
|
|
1455
|
+
valueMapping?: {
|
|
1456
|
+
true?: unknown;
|
|
1457
|
+
false?: unknown;
|
|
1458
|
+
} | undefined;
|
|
1459
|
+
}>, z.ZodObject<{
|
|
1460
|
+
__type: z.ZodLiteral<"figma-enum">;
|
|
1461
|
+
figmaProperty: z.ZodString;
|
|
1462
|
+
valueMapping: z.ZodRecord<z.ZodString, z.ZodUnknown>;
|
|
1463
|
+
}, "strip", z.ZodTypeAny, {
|
|
1464
|
+
__type: "figma-enum";
|
|
1465
|
+
figmaProperty: string;
|
|
1466
|
+
valueMapping: Record<string, unknown>;
|
|
1467
|
+
}, {
|
|
1468
|
+
__type: "figma-enum";
|
|
1469
|
+
figmaProperty: string;
|
|
1470
|
+
valueMapping: Record<string, unknown>;
|
|
1471
|
+
}>, z.ZodObject<{
|
|
1472
|
+
__type: z.ZodLiteral<"figma-instance">;
|
|
1473
|
+
figmaProperty: z.ZodString;
|
|
1474
|
+
}, "strip", z.ZodTypeAny, {
|
|
1475
|
+
__type: "figma-instance";
|
|
1476
|
+
figmaProperty: string;
|
|
1477
|
+
}, {
|
|
1478
|
+
__type: "figma-instance";
|
|
1479
|
+
figmaProperty: string;
|
|
1480
|
+
}>, z.ZodObject<{
|
|
1481
|
+
__type: z.ZodLiteral<"figma-children">;
|
|
1482
|
+
layers: z.ZodArray<z.ZodString, "many">;
|
|
1483
|
+
}, "strip", z.ZodTypeAny, {
|
|
1484
|
+
__type: "figma-children";
|
|
1485
|
+
layers: string[];
|
|
1486
|
+
}, {
|
|
1487
|
+
__type: "figma-children";
|
|
1488
|
+
layers: string[];
|
|
1489
|
+
}>, z.ZodObject<{
|
|
1490
|
+
__type: z.ZodLiteral<"figma-text-content">;
|
|
1491
|
+
layer: z.ZodString;
|
|
1492
|
+
}, "strip", z.ZodTypeAny, {
|
|
1493
|
+
__type: "figma-text-content";
|
|
1494
|
+
layer: string;
|
|
1495
|
+
}, {
|
|
1496
|
+
__type: "figma-text-content";
|
|
1497
|
+
layer: string;
|
|
1498
|
+
}>]>>>;
|
|
1499
|
+
}, "strip", z.ZodTypeAny, {
|
|
1500
|
+
name: string;
|
|
1501
|
+
description: string;
|
|
1502
|
+
category: string;
|
|
1503
|
+
status?: "stable" | "beta" | "deprecated" | "experimental" | undefined;
|
|
1504
|
+
tags?: string[] | undefined;
|
|
1505
|
+
since?: string | undefined;
|
|
1506
|
+
dependencies?: {
|
|
1507
|
+
name: string;
|
|
1508
|
+
version: string;
|
|
1509
|
+
reason?: string | undefined;
|
|
1510
|
+
}[] | undefined;
|
|
1511
|
+
figma?: string | undefined;
|
|
1512
|
+
figmaProps?: Record<string, {
|
|
1513
|
+
__type: "figma-string";
|
|
1514
|
+
figmaProperty: string;
|
|
1515
|
+
} | {
|
|
1516
|
+
__type: "figma-boolean";
|
|
1517
|
+
figmaProperty: string;
|
|
1518
|
+
valueMapping?: {
|
|
1519
|
+
true?: unknown;
|
|
1520
|
+
false?: unknown;
|
|
1521
|
+
} | undefined;
|
|
1522
|
+
} | {
|
|
1523
|
+
__type: "figma-enum";
|
|
1524
|
+
figmaProperty: string;
|
|
1525
|
+
valueMapping: Record<string, unknown>;
|
|
1526
|
+
} | {
|
|
1527
|
+
__type: "figma-instance";
|
|
1528
|
+
figmaProperty: string;
|
|
1529
|
+
} | {
|
|
1530
|
+
__type: "figma-children";
|
|
1531
|
+
layers: string[];
|
|
1532
|
+
} | {
|
|
1533
|
+
__type: "figma-text-content";
|
|
1534
|
+
layer: string;
|
|
1535
|
+
}> | undefined;
|
|
1536
|
+
}, {
|
|
1537
|
+
name: string;
|
|
1538
|
+
description: string;
|
|
1539
|
+
category: string;
|
|
1540
|
+
status?: "stable" | "beta" | "deprecated" | "experimental" | undefined;
|
|
1541
|
+
tags?: string[] | undefined;
|
|
1542
|
+
since?: string | undefined;
|
|
1543
|
+
dependencies?: {
|
|
1544
|
+
name: string;
|
|
1545
|
+
version: string;
|
|
1546
|
+
reason?: string | undefined;
|
|
1547
|
+
}[] | undefined;
|
|
1548
|
+
figma?: string | undefined;
|
|
1549
|
+
figmaProps?: Record<string, {
|
|
1550
|
+
__type: "figma-string";
|
|
1551
|
+
figmaProperty: string;
|
|
1552
|
+
} | {
|
|
1553
|
+
__type: "figma-boolean";
|
|
1554
|
+
figmaProperty: string;
|
|
1555
|
+
valueMapping?: {
|
|
1556
|
+
true?: unknown;
|
|
1557
|
+
false?: unknown;
|
|
1558
|
+
} | undefined;
|
|
1559
|
+
} | {
|
|
1560
|
+
__type: "figma-enum";
|
|
1561
|
+
figmaProperty: string;
|
|
1562
|
+
valueMapping: Record<string, unknown>;
|
|
1563
|
+
} | {
|
|
1564
|
+
__type: "figma-instance";
|
|
1565
|
+
figmaProperty: string;
|
|
1566
|
+
} | {
|
|
1567
|
+
__type: "figma-children";
|
|
1568
|
+
layers: string[];
|
|
1569
|
+
} | {
|
|
1570
|
+
__type: "figma-text-content";
|
|
1571
|
+
layer: string;
|
|
1572
|
+
}> | undefined;
|
|
1573
|
+
}>;
|
|
1574
|
+
usage: z.ZodObject<{
|
|
1575
|
+
when: z.ZodArray<z.ZodString, "many">;
|
|
1576
|
+
whenNot: z.ZodArray<z.ZodString, "many">;
|
|
1577
|
+
guidelines: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
|
|
1578
|
+
accessibility: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
|
|
1579
|
+
}, "strip", z.ZodTypeAny, {
|
|
1580
|
+
when: string[];
|
|
1581
|
+
whenNot: string[];
|
|
1582
|
+
guidelines?: string[] | undefined;
|
|
1583
|
+
accessibility?: string[] | undefined;
|
|
1584
|
+
}, {
|
|
1585
|
+
when: string[];
|
|
1586
|
+
whenNot: string[];
|
|
1587
|
+
guidelines?: string[] | undefined;
|
|
1588
|
+
accessibility?: string[] | undefined;
|
|
1589
|
+
}>;
|
|
1590
|
+
props: z.ZodRecord<z.ZodString, z.ZodObject<{
|
|
1591
|
+
type: z.ZodType<string, z.ZodTypeDef, string>;
|
|
1592
|
+
values: z.ZodOptional<z.ZodReadonly<z.ZodArray<z.ZodString, "many">>>;
|
|
1593
|
+
default: z.ZodOptional<z.ZodUnknown>;
|
|
1594
|
+
description: z.ZodOptional<z.ZodString>;
|
|
1595
|
+
required: z.ZodOptional<z.ZodBoolean>;
|
|
1596
|
+
constraints: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
|
|
1597
|
+
typeDetails: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
|
|
1598
|
+
}, "strip", z.ZodTypeAny, {
|
|
1599
|
+
type: string;
|
|
1600
|
+
values?: readonly string[] | undefined;
|
|
1601
|
+
description?: string | undefined;
|
|
1602
|
+
default?: unknown;
|
|
1603
|
+
required?: boolean | undefined;
|
|
1604
|
+
constraints?: string[] | undefined;
|
|
1605
|
+
typeDetails?: Record<string, unknown> | undefined;
|
|
1606
|
+
}, {
|
|
1607
|
+
type: string;
|
|
1608
|
+
values?: readonly string[] | undefined;
|
|
1609
|
+
description?: string | undefined;
|
|
1610
|
+
default?: unknown;
|
|
1611
|
+
required?: boolean | undefined;
|
|
1612
|
+
constraints?: string[] | undefined;
|
|
1613
|
+
typeDetails?: Record<string, unknown> | undefined;
|
|
1614
|
+
}>>;
|
|
1615
|
+
relations: z.ZodOptional<z.ZodArray<z.ZodObject<{
|
|
1616
|
+
component: z.ZodString;
|
|
1617
|
+
relationship: z.ZodEnum<["alternative", "sibling", "parent", "child", "composition", "complementary", "used-by"]>;
|
|
1618
|
+
note: z.ZodString;
|
|
1619
|
+
}, "strip", z.ZodTypeAny, {
|
|
1620
|
+
component: string;
|
|
1621
|
+
relationship: "alternative" | "sibling" | "parent" | "child" | "composition" | "complementary" | "used-by";
|
|
1622
|
+
note: string;
|
|
1623
|
+
}, {
|
|
1624
|
+
component: string;
|
|
1625
|
+
relationship: "alternative" | "sibling" | "parent" | "child" | "composition" | "complementary" | "used-by";
|
|
1626
|
+
note: string;
|
|
1627
|
+
}>, "many">>;
|
|
1628
|
+
variants: z.ZodArray<z.ZodObject<{
|
|
1629
|
+
name: z.ZodString;
|
|
1630
|
+
description: z.ZodString;
|
|
1631
|
+
render: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodUnknown>;
|
|
1632
|
+
code: z.ZodOptional<z.ZodString>;
|
|
1633
|
+
figma: z.ZodOptional<z.ZodString>;
|
|
1634
|
+
}, "strip", z.ZodTypeAny, {
|
|
1635
|
+
name: string;
|
|
1636
|
+
description: string;
|
|
1637
|
+
render: (...args: unknown[]) => unknown;
|
|
1638
|
+
code?: string | undefined;
|
|
1639
|
+
figma?: string | undefined;
|
|
1640
|
+
}, {
|
|
1641
|
+
name: string;
|
|
1642
|
+
description: string;
|
|
1643
|
+
render: (...args: unknown[]) => unknown;
|
|
1644
|
+
code?: string | undefined;
|
|
1645
|
+
figma?: string | undefined;
|
|
1646
|
+
}>, "many">;
|
|
1647
|
+
contract: z.ZodOptional<z.ZodObject<{
|
|
1648
|
+
propsSummary: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
|
|
1649
|
+
a11yRules: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
|
|
1650
|
+
bans: z.ZodOptional<z.ZodArray<z.ZodObject<{
|
|
1651
|
+
pattern: z.ZodString;
|
|
1652
|
+
message: z.ZodString;
|
|
1653
|
+
}, "strip", z.ZodTypeAny, {
|
|
1654
|
+
pattern: string;
|
|
1655
|
+
message: string;
|
|
1656
|
+
}, {
|
|
1657
|
+
pattern: string;
|
|
1658
|
+
message: string;
|
|
1659
|
+
}>, "many">>;
|
|
1660
|
+
scenarioTags: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
|
|
1661
|
+
performanceBudget: z.ZodOptional<z.ZodNumber>;
|
|
1662
|
+
}, "strip", z.ZodTypeAny, {
|
|
1663
|
+
propsSummary?: string[] | undefined;
|
|
1664
|
+
a11yRules?: string[] | undefined;
|
|
1665
|
+
bans?: {
|
|
1666
|
+
pattern: string;
|
|
1667
|
+
message: string;
|
|
1668
|
+
}[] | undefined;
|
|
1669
|
+
scenarioTags?: string[] | undefined;
|
|
1670
|
+
performanceBudget?: number | undefined;
|
|
1671
|
+
}, {
|
|
1672
|
+
propsSummary?: string[] | undefined;
|
|
1673
|
+
a11yRules?: string[] | undefined;
|
|
1674
|
+
bans?: {
|
|
1675
|
+
pattern: string;
|
|
1676
|
+
message: string;
|
|
1677
|
+
}[] | undefined;
|
|
1678
|
+
scenarioTags?: string[] | undefined;
|
|
1679
|
+
performanceBudget?: number | undefined;
|
|
1680
|
+
}>>;
|
|
1681
|
+
ai: z.ZodOptional<z.ZodObject<{
|
|
1682
|
+
compositionPattern: z.ZodOptional<z.ZodEnum<["compound", "simple", "controlled", "wrapper"]>>;
|
|
1683
|
+
subComponents: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
|
|
1684
|
+
requiredChildren: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
|
|
1685
|
+
commonPatterns: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
|
|
1686
|
+
}, "strip", z.ZodTypeAny, {
|
|
1687
|
+
compositionPattern?: "compound" | "simple" | "controlled" | "wrapper" | undefined;
|
|
1688
|
+
subComponents?: string[] | undefined;
|
|
1689
|
+
requiredChildren?: string[] | undefined;
|
|
1690
|
+
commonPatterns?: string[] | undefined;
|
|
1691
|
+
}, {
|
|
1692
|
+
compositionPattern?: "compound" | "simple" | "controlled" | "wrapper" | undefined;
|
|
1693
|
+
subComponents?: string[] | undefined;
|
|
1694
|
+
requiredChildren?: string[] | undefined;
|
|
1695
|
+
commonPatterns?: string[] | undefined;
|
|
1696
|
+
}>>;
|
|
1697
|
+
_generated: z.ZodOptional<z.ZodObject<{
|
|
1698
|
+
source: z.ZodEnum<["storybook", "manual", "ai"]>;
|
|
1699
|
+
sourceFile: z.ZodOptional<z.ZodString>;
|
|
1700
|
+
confidence: z.ZodOptional<z.ZodNumber>;
|
|
1701
|
+
timestamp: z.ZodOptional<z.ZodString>;
|
|
1702
|
+
}, "strip", z.ZodTypeAny, {
|
|
1703
|
+
source: "storybook" | "manual" | "ai";
|
|
1704
|
+
sourceFile?: string | undefined;
|
|
1705
|
+
confidence?: number | undefined;
|
|
1706
|
+
timestamp?: string | undefined;
|
|
1707
|
+
}, {
|
|
1708
|
+
source: "storybook" | "manual" | "ai";
|
|
1709
|
+
sourceFile?: string | undefined;
|
|
1710
|
+
confidence?: number | undefined;
|
|
1711
|
+
timestamp?: string | undefined;
|
|
1712
|
+
}>>;
|
|
1713
|
+
}, "strip", z.ZodTypeAny, {
|
|
1714
|
+
meta: {
|
|
1715
|
+
name: string;
|
|
1716
|
+
description: string;
|
|
1717
|
+
category: string;
|
|
1718
|
+
status?: "stable" | "beta" | "deprecated" | "experimental" | undefined;
|
|
1719
|
+
tags?: string[] | undefined;
|
|
1720
|
+
since?: string | undefined;
|
|
1721
|
+
dependencies?: {
|
|
1722
|
+
name: string;
|
|
1723
|
+
version: string;
|
|
1724
|
+
reason?: string | undefined;
|
|
1725
|
+
}[] | undefined;
|
|
1726
|
+
figma?: string | undefined;
|
|
1727
|
+
figmaProps?: Record<string, {
|
|
1728
|
+
__type: "figma-string";
|
|
1729
|
+
figmaProperty: string;
|
|
1730
|
+
} | {
|
|
1731
|
+
__type: "figma-boolean";
|
|
1732
|
+
figmaProperty: string;
|
|
1733
|
+
valueMapping?: {
|
|
1734
|
+
true?: unknown;
|
|
1735
|
+
false?: unknown;
|
|
1736
|
+
} | undefined;
|
|
1737
|
+
} | {
|
|
1738
|
+
__type: "figma-enum";
|
|
1739
|
+
figmaProperty: string;
|
|
1740
|
+
valueMapping: Record<string, unknown>;
|
|
1741
|
+
} | {
|
|
1742
|
+
__type: "figma-instance";
|
|
1743
|
+
figmaProperty: string;
|
|
1744
|
+
} | {
|
|
1745
|
+
__type: "figma-children";
|
|
1746
|
+
layers: string[];
|
|
1747
|
+
} | {
|
|
1748
|
+
__type: "figma-text-content";
|
|
1749
|
+
layer: string;
|
|
1750
|
+
}> | undefined;
|
|
1751
|
+
};
|
|
1752
|
+
usage: {
|
|
1753
|
+
when: string[];
|
|
1754
|
+
whenNot: string[];
|
|
1755
|
+
guidelines?: string[] | undefined;
|
|
1756
|
+
accessibility?: string[] | undefined;
|
|
1757
|
+
};
|
|
1758
|
+
props: Record<string, {
|
|
1759
|
+
type: string;
|
|
1760
|
+
values?: readonly string[] | undefined;
|
|
1761
|
+
description?: string | undefined;
|
|
1762
|
+
default?: unknown;
|
|
1763
|
+
required?: boolean | undefined;
|
|
1764
|
+
constraints?: string[] | undefined;
|
|
1765
|
+
typeDetails?: Record<string, unknown> | undefined;
|
|
1766
|
+
}>;
|
|
1767
|
+
variants: {
|
|
1768
|
+
name: string;
|
|
1769
|
+
description: string;
|
|
1770
|
+
render: (...args: unknown[]) => unknown;
|
|
1771
|
+
code?: string | undefined;
|
|
1772
|
+
figma?: string | undefined;
|
|
1773
|
+
}[];
|
|
1774
|
+
ai?: {
|
|
1775
|
+
compositionPattern?: "compound" | "simple" | "controlled" | "wrapper" | undefined;
|
|
1776
|
+
subComponents?: string[] | undefined;
|
|
1777
|
+
requiredChildren?: string[] | undefined;
|
|
1778
|
+
commonPatterns?: string[] | undefined;
|
|
1779
|
+
} | undefined;
|
|
1780
|
+
component?: any;
|
|
1781
|
+
relations?: {
|
|
1782
|
+
component: string;
|
|
1783
|
+
relationship: "alternative" | "sibling" | "parent" | "child" | "composition" | "complementary" | "used-by";
|
|
1784
|
+
note: string;
|
|
1785
|
+
}[] | undefined;
|
|
1786
|
+
contract?: {
|
|
1787
|
+
propsSummary?: string[] | undefined;
|
|
1788
|
+
a11yRules?: string[] | undefined;
|
|
1789
|
+
bans?: {
|
|
1790
|
+
pattern: string;
|
|
1791
|
+
message: string;
|
|
1792
|
+
}[] | undefined;
|
|
1793
|
+
scenarioTags?: string[] | undefined;
|
|
1794
|
+
performanceBudget?: number | undefined;
|
|
1795
|
+
} | undefined;
|
|
1796
|
+
_generated?: {
|
|
1797
|
+
source: "storybook" | "manual" | "ai";
|
|
1798
|
+
sourceFile?: string | undefined;
|
|
1799
|
+
confidence?: number | undefined;
|
|
1800
|
+
timestamp?: string | undefined;
|
|
1801
|
+
} | undefined;
|
|
1802
|
+
}, {
|
|
1803
|
+
meta: {
|
|
1804
|
+
name: string;
|
|
1805
|
+
description: string;
|
|
1806
|
+
category: string;
|
|
1807
|
+
status?: "stable" | "beta" | "deprecated" | "experimental" | undefined;
|
|
1808
|
+
tags?: string[] | undefined;
|
|
1809
|
+
since?: string | undefined;
|
|
1810
|
+
dependencies?: {
|
|
1811
|
+
name: string;
|
|
1812
|
+
version: string;
|
|
1813
|
+
reason?: string | undefined;
|
|
1814
|
+
}[] | undefined;
|
|
1815
|
+
figma?: string | undefined;
|
|
1816
|
+
figmaProps?: Record<string, {
|
|
1817
|
+
__type: "figma-string";
|
|
1818
|
+
figmaProperty: string;
|
|
1819
|
+
} | {
|
|
1820
|
+
__type: "figma-boolean";
|
|
1821
|
+
figmaProperty: string;
|
|
1822
|
+
valueMapping?: {
|
|
1823
|
+
true?: unknown;
|
|
1824
|
+
false?: unknown;
|
|
1825
|
+
} | undefined;
|
|
1826
|
+
} | {
|
|
1827
|
+
__type: "figma-enum";
|
|
1828
|
+
figmaProperty: string;
|
|
1829
|
+
valueMapping: Record<string, unknown>;
|
|
1830
|
+
} | {
|
|
1831
|
+
__type: "figma-instance";
|
|
1832
|
+
figmaProperty: string;
|
|
1833
|
+
} | {
|
|
1834
|
+
__type: "figma-children";
|
|
1835
|
+
layers: string[];
|
|
1836
|
+
} | {
|
|
1837
|
+
__type: "figma-text-content";
|
|
1838
|
+
layer: string;
|
|
1839
|
+
}> | undefined;
|
|
1840
|
+
};
|
|
1841
|
+
usage: {
|
|
1842
|
+
when: string[];
|
|
1843
|
+
whenNot: string[];
|
|
1844
|
+
guidelines?: string[] | undefined;
|
|
1845
|
+
accessibility?: string[] | undefined;
|
|
1846
|
+
};
|
|
1847
|
+
props: Record<string, {
|
|
1848
|
+
type: string;
|
|
1849
|
+
values?: readonly string[] | undefined;
|
|
1850
|
+
description?: string | undefined;
|
|
1851
|
+
default?: unknown;
|
|
1852
|
+
required?: boolean | undefined;
|
|
1853
|
+
constraints?: string[] | undefined;
|
|
1854
|
+
typeDetails?: Record<string, unknown> | undefined;
|
|
1855
|
+
}>;
|
|
1856
|
+
variants: {
|
|
1857
|
+
name: string;
|
|
1858
|
+
description: string;
|
|
1859
|
+
render: (...args: unknown[]) => unknown;
|
|
1860
|
+
code?: string | undefined;
|
|
1861
|
+
figma?: string | undefined;
|
|
1862
|
+
}[];
|
|
1863
|
+
ai?: {
|
|
1864
|
+
compositionPattern?: "compound" | "simple" | "controlled" | "wrapper" | undefined;
|
|
1865
|
+
subComponents?: string[] | undefined;
|
|
1866
|
+
requiredChildren?: string[] | undefined;
|
|
1867
|
+
commonPatterns?: string[] | undefined;
|
|
1868
|
+
} | undefined;
|
|
1869
|
+
component?: any;
|
|
1870
|
+
relations?: {
|
|
1871
|
+
component: string;
|
|
1872
|
+
relationship: "alternative" | "sibling" | "parent" | "child" | "composition" | "complementary" | "used-by";
|
|
1873
|
+
note: string;
|
|
1874
|
+
}[] | undefined;
|
|
1875
|
+
contract?: {
|
|
1876
|
+
propsSummary?: string[] | undefined;
|
|
1877
|
+
a11yRules?: string[] | undefined;
|
|
1878
|
+
bans?: {
|
|
1879
|
+
pattern: string;
|
|
1880
|
+
message: string;
|
|
1881
|
+
}[] | undefined;
|
|
1882
|
+
scenarioTags?: string[] | undefined;
|
|
1883
|
+
performanceBudget?: number | undefined;
|
|
1884
|
+
} | undefined;
|
|
1885
|
+
_generated?: {
|
|
1886
|
+
source: "storybook" | "manual" | "ai";
|
|
1887
|
+
sourceFile?: string | undefined;
|
|
1888
|
+
confidence?: number | undefined;
|
|
1889
|
+
timestamp?: string | undefined;
|
|
1890
|
+
} | undefined;
|
|
1891
|
+
}>;
|
|
1892
|
+
/**
|
|
1893
|
+
* Config schema - validates required fields, passes through optional config objects.
|
|
1894
|
+
* Type definitions are in types.ts - schema just ensures basic structure.
|
|
1895
|
+
*/
|
|
1896
|
+
declare const fragmentsConfigSchema: z.ZodObject<{
|
|
1897
|
+
include: z.ZodArray<z.ZodString, "many">;
|
|
1898
|
+
exclude: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
|
|
1899
|
+
components: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
|
|
1900
|
+
outFile: z.ZodOptional<z.ZodString>;
|
|
1901
|
+
framework: z.ZodOptional<z.ZodEnum<["react", "vue", "svelte"]>>;
|
|
1902
|
+
figmaFile: z.ZodOptional<z.ZodString>;
|
|
1903
|
+
figmaToken: z.ZodOptional<z.ZodString>;
|
|
1904
|
+
screenshots: z.ZodOptional<z.ZodObject<{}, "passthrough", z.ZodTypeAny, z.objectOutputType<{}, z.ZodTypeAny, "passthrough">, z.objectInputType<{}, z.ZodTypeAny, "passthrough">>>;
|
|
1905
|
+
service: z.ZodOptional<z.ZodObject<{}, "passthrough", z.ZodTypeAny, z.objectOutputType<{}, z.ZodTypeAny, "passthrough">, z.objectInputType<{}, z.ZodTypeAny, "passthrough">>>;
|
|
1906
|
+
registry: z.ZodOptional<z.ZodObject<{}, "passthrough", z.ZodTypeAny, z.objectOutputType<{}, z.ZodTypeAny, "passthrough">, z.objectInputType<{}, z.ZodTypeAny, "passthrough">>>;
|
|
1907
|
+
tokens: z.ZodOptional<z.ZodObject<{
|
|
1908
|
+
include: z.ZodArray<z.ZodString, "many">;
|
|
1909
|
+
}, "passthrough", z.ZodTypeAny, z.objectOutputType<{
|
|
1910
|
+
include: z.ZodArray<z.ZodString, "many">;
|
|
1911
|
+
}, z.ZodTypeAny, "passthrough">, z.objectInputType<{
|
|
1912
|
+
include: z.ZodArray<z.ZodString, "many">;
|
|
1913
|
+
}, z.ZodTypeAny, "passthrough">>>;
|
|
1914
|
+
snippets: z.ZodOptional<z.ZodObject<{
|
|
1915
|
+
mode: z.ZodOptional<z.ZodEnum<["warn", "error"]>>;
|
|
1916
|
+
scope: z.ZodOptional<z.ZodEnum<["snippet", "snippet+render"]>>;
|
|
1917
|
+
requireFullSnippet: z.ZodOptional<z.ZodBoolean>;
|
|
1918
|
+
allowedExternalModules: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
|
|
1919
|
+
}, "strip", z.ZodTypeAny, {
|
|
1920
|
+
mode?: "warn" | "error" | undefined;
|
|
1921
|
+
scope?: "snippet" | "snippet+render" | undefined;
|
|
1922
|
+
requireFullSnippet?: boolean | undefined;
|
|
1923
|
+
allowedExternalModules?: string[] | undefined;
|
|
1924
|
+
}, {
|
|
1925
|
+
mode?: "warn" | "error" | undefined;
|
|
1926
|
+
scope?: "snippet" | "snippet+render" | undefined;
|
|
1927
|
+
requireFullSnippet?: boolean | undefined;
|
|
1928
|
+
allowedExternalModules?: string[] | undefined;
|
|
1929
|
+
}>>;
|
|
1930
|
+
performance: z.ZodOptional<z.ZodUnion<[z.ZodEnum<["strict", "standard", "relaxed"]>, z.ZodObject<{
|
|
1931
|
+
preset: z.ZodOptional<z.ZodEnum<["strict", "standard", "relaxed"]>>;
|
|
1932
|
+
budgets: z.ZodOptional<z.ZodObject<{
|
|
1933
|
+
bundleSize: z.ZodOptional<z.ZodNumber>;
|
|
1934
|
+
}, "strip", z.ZodTypeAny, {
|
|
1935
|
+
bundleSize?: number | undefined;
|
|
1936
|
+
}, {
|
|
1937
|
+
bundleSize?: number | undefined;
|
|
1938
|
+
}>>;
|
|
1939
|
+
}, "strip", z.ZodTypeAny, {
|
|
1940
|
+
preset?: "strict" | "standard" | "relaxed" | undefined;
|
|
1941
|
+
budgets?: {
|
|
1942
|
+
bundleSize?: number | undefined;
|
|
1943
|
+
} | undefined;
|
|
1944
|
+
}, {
|
|
1945
|
+
preset?: "strict" | "standard" | "relaxed" | undefined;
|
|
1946
|
+
budgets?: {
|
|
1947
|
+
bundleSize?: number | undefined;
|
|
1948
|
+
} | undefined;
|
|
1949
|
+
}>]>>;
|
|
1950
|
+
storybook: z.ZodOptional<z.ZodObject<{
|
|
1951
|
+
exclude: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
|
|
1952
|
+
include: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
|
|
1953
|
+
excludeDeprecated: z.ZodOptional<z.ZodBoolean>;
|
|
1954
|
+
excludeTests: z.ZodOptional<z.ZodBoolean>;
|
|
1955
|
+
excludeSvgIcons: z.ZodOptional<z.ZodBoolean>;
|
|
1956
|
+
excludeSubComponents: z.ZodOptional<z.ZodBoolean>;
|
|
1957
|
+
}, "strip", z.ZodTypeAny, {
|
|
1958
|
+
include?: string[] | undefined;
|
|
1959
|
+
exclude?: string[] | undefined;
|
|
1960
|
+
excludeDeprecated?: boolean | undefined;
|
|
1961
|
+
excludeTests?: boolean | undefined;
|
|
1962
|
+
excludeSvgIcons?: boolean | undefined;
|
|
1963
|
+
excludeSubComponents?: boolean | undefined;
|
|
1964
|
+
}, {
|
|
1965
|
+
include?: string[] | undefined;
|
|
1966
|
+
exclude?: string[] | undefined;
|
|
1967
|
+
excludeDeprecated?: boolean | undefined;
|
|
1968
|
+
excludeTests?: boolean | undefined;
|
|
1969
|
+
excludeSvgIcons?: boolean | undefined;
|
|
1970
|
+
excludeSubComponents?: boolean | undefined;
|
|
1971
|
+
}>>;
|
|
1972
|
+
}, "strip", z.ZodTypeAny, {
|
|
1973
|
+
include: string[];
|
|
1974
|
+
components?: string[] | undefined;
|
|
1975
|
+
screenshots?: z.objectOutputType<{}, z.ZodTypeAny, "passthrough"> | undefined;
|
|
1976
|
+
storybook?: {
|
|
1977
|
+
include?: string[] | undefined;
|
|
1978
|
+
exclude?: string[] | undefined;
|
|
1979
|
+
excludeDeprecated?: boolean | undefined;
|
|
1980
|
+
excludeTests?: boolean | undefined;
|
|
1981
|
+
excludeSvgIcons?: boolean | undefined;
|
|
1982
|
+
excludeSubComponents?: boolean | undefined;
|
|
1983
|
+
} | undefined;
|
|
1984
|
+
exclude?: string[] | undefined;
|
|
1985
|
+
outFile?: string | undefined;
|
|
1986
|
+
framework?: "react" | "vue" | "svelte" | undefined;
|
|
1987
|
+
figmaFile?: string | undefined;
|
|
1988
|
+
figmaToken?: string | undefined;
|
|
1989
|
+
service?: z.objectOutputType<{}, z.ZodTypeAny, "passthrough"> | undefined;
|
|
1990
|
+
registry?: z.objectOutputType<{}, z.ZodTypeAny, "passthrough"> | undefined;
|
|
1991
|
+
tokens?: z.objectOutputType<{
|
|
1992
|
+
include: z.ZodArray<z.ZodString, "many">;
|
|
1993
|
+
}, z.ZodTypeAny, "passthrough"> | undefined;
|
|
1994
|
+
snippets?: {
|
|
1995
|
+
mode?: "warn" | "error" | undefined;
|
|
1996
|
+
scope?: "snippet" | "snippet+render" | undefined;
|
|
1997
|
+
requireFullSnippet?: boolean | undefined;
|
|
1998
|
+
allowedExternalModules?: string[] | undefined;
|
|
1999
|
+
} | undefined;
|
|
2000
|
+
performance?: "strict" | "standard" | "relaxed" | {
|
|
2001
|
+
preset?: "strict" | "standard" | "relaxed" | undefined;
|
|
2002
|
+
budgets?: {
|
|
2003
|
+
bundleSize?: number | undefined;
|
|
2004
|
+
} | undefined;
|
|
2005
|
+
} | undefined;
|
|
2006
|
+
}, {
|
|
2007
|
+
include: string[];
|
|
2008
|
+
components?: string[] | undefined;
|
|
2009
|
+
screenshots?: z.objectInputType<{}, z.ZodTypeAny, "passthrough"> | undefined;
|
|
2010
|
+
storybook?: {
|
|
2011
|
+
include?: string[] | undefined;
|
|
2012
|
+
exclude?: string[] | undefined;
|
|
2013
|
+
excludeDeprecated?: boolean | undefined;
|
|
2014
|
+
excludeTests?: boolean | undefined;
|
|
2015
|
+
excludeSvgIcons?: boolean | undefined;
|
|
2016
|
+
excludeSubComponents?: boolean | undefined;
|
|
2017
|
+
} | undefined;
|
|
2018
|
+
exclude?: string[] | undefined;
|
|
2019
|
+
outFile?: string | undefined;
|
|
2020
|
+
framework?: "react" | "vue" | "svelte" | undefined;
|
|
2021
|
+
figmaFile?: string | undefined;
|
|
2022
|
+
figmaToken?: string | undefined;
|
|
2023
|
+
service?: z.objectInputType<{}, z.ZodTypeAny, "passthrough"> | undefined;
|
|
2024
|
+
registry?: z.objectInputType<{}, z.ZodTypeAny, "passthrough"> | undefined;
|
|
2025
|
+
tokens?: z.objectInputType<{
|
|
2026
|
+
include: z.ZodArray<z.ZodString, "many">;
|
|
2027
|
+
}, z.ZodTypeAny, "passthrough"> | undefined;
|
|
2028
|
+
snippets?: {
|
|
2029
|
+
mode?: "warn" | "error" | undefined;
|
|
2030
|
+
scope?: "snippet" | "snippet+render" | undefined;
|
|
2031
|
+
requireFullSnippet?: boolean | undefined;
|
|
2032
|
+
allowedExternalModules?: string[] | undefined;
|
|
2033
|
+
} | undefined;
|
|
2034
|
+
performance?: "strict" | "standard" | "relaxed" | {
|
|
2035
|
+
preset?: "strict" | "standard" | "relaxed" | undefined;
|
|
2036
|
+
budgets?: {
|
|
2037
|
+
bundleSize?: number | undefined;
|
|
2038
|
+
} | undefined;
|
|
2039
|
+
} | undefined;
|
|
2040
|
+
}>;
|
|
2041
|
+
/**
|
|
2042
|
+
* @deprecated Use blockDefinitionSchema instead
|
|
2043
|
+
*/
|
|
2044
|
+
declare const recipeDefinitionSchema: z.ZodObject<{
|
|
2045
|
+
name: z.ZodString;
|
|
2046
|
+
description: z.ZodString;
|
|
2047
|
+
category: z.ZodString;
|
|
2048
|
+
components: z.ZodArray<z.ZodString, "many">;
|
|
2049
|
+
code: z.ZodString;
|
|
2050
|
+
tags: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
|
|
2051
|
+
}, "strip", z.ZodTypeAny, {
|
|
2052
|
+
components: string[];
|
|
2053
|
+
code: string;
|
|
2054
|
+
name: string;
|
|
2055
|
+
description: string;
|
|
2056
|
+
category: string;
|
|
2057
|
+
tags?: string[] | undefined;
|
|
2058
|
+
}, {
|
|
2059
|
+
components: string[];
|
|
2060
|
+
code: string;
|
|
2061
|
+
name: string;
|
|
2062
|
+
description: string;
|
|
2063
|
+
category: string;
|
|
2064
|
+
tags?: string[] | undefined;
|
|
2065
|
+
}>;
|
|
2066
|
+
|
|
2067
|
+
/**
|
|
2068
|
+
* Define a fragment for a component.
|
|
2069
|
+
*
|
|
2070
|
+
* This is the main API for creating fragment documentation.
|
|
2071
|
+
* It provides runtime validation and type safety.
|
|
2072
|
+
*
|
|
2073
|
+
* @example
|
|
2074
|
+
* ```tsx
|
|
2075
|
+
* import { defineFragment } from '@fragments-sdk/cli/core';
|
|
2076
|
+
* import { Button } from './Button';
|
|
2077
|
+
*
|
|
2078
|
+
* export default defineFragment({
|
|
2079
|
+
* component: Button,
|
|
2080
|
+
* meta: {
|
|
2081
|
+
* name: 'Button',
|
|
2082
|
+
* description: 'Primary action trigger',
|
|
2083
|
+
* category: 'actions',
|
|
2084
|
+
* },
|
|
2085
|
+
* usage: {
|
|
2086
|
+
* when: ['User needs to trigger an action'],
|
|
2087
|
+
* whenNot: ['Navigation without side effects'],
|
|
2088
|
+
* },
|
|
2089
|
+
* props: {
|
|
2090
|
+
* variant: {
|
|
2091
|
+
* type: 'enum',
|
|
2092
|
+
* values: ['primary', 'secondary'],
|
|
2093
|
+
* default: 'primary',
|
|
2094
|
+
* description: 'Visual style',
|
|
2095
|
+
* },
|
|
2096
|
+
* },
|
|
2097
|
+
* variants: [
|
|
2098
|
+
* {
|
|
2099
|
+
* name: 'Default',
|
|
2100
|
+
* description: 'Default button',
|
|
2101
|
+
* render: () => <Button>Click me</Button>,
|
|
2102
|
+
* },
|
|
2103
|
+
* ],
|
|
2104
|
+
* });
|
|
2105
|
+
* ```
|
|
2106
|
+
*/
|
|
2107
|
+
declare function defineFragment<TProps>(definition: FragmentDefinition<TProps>): FragmentDefinition<TProps>;
|
|
2108
|
+
/**
|
|
2109
|
+
* Compile a fragment definition to JSON-serializable format.
|
|
2110
|
+
* Used for generating fragments.json for AI consumption.
|
|
2111
|
+
*/
|
|
2112
|
+
declare function compileFragment(definition: FragmentDefinition, filePath: string): CompiledFragment;
|
|
2113
|
+
/**
|
|
2114
|
+
* Define a composition block.
|
|
2115
|
+
*
|
|
2116
|
+
* Blocks are pure data describing how design system components
|
|
2117
|
+
* wire together for common use cases.
|
|
2118
|
+
*/
|
|
2119
|
+
declare function defineBlock(definition: BlockDefinition): BlockDefinition;
|
|
2120
|
+
/**
|
|
2121
|
+
* @deprecated Use defineBlock instead
|
|
2122
|
+
*/
|
|
2123
|
+
declare const defineRecipe: typeof defineBlock;
|
|
2124
|
+
/**
|
|
2125
|
+
* Compile a block definition to JSON-serializable format.
|
|
2126
|
+
*/
|
|
2127
|
+
declare function compileBlock(definition: BlockDefinition, filePath: string): CompiledBlock;
|
|
2128
|
+
/**
|
|
2129
|
+
* @deprecated Use compileBlock instead
|
|
2130
|
+
*/
|
|
2131
|
+
declare const compileRecipe: typeof compileBlock;
|
|
2132
|
+
/**
|
|
2133
|
+
* Type helper for extracting props type from a component
|
|
2134
|
+
*/
|
|
2135
|
+
type InferProps<T> = T extends FragmentComponent<infer P> ? P : never;
|
|
2136
|
+
|
|
2137
|
+
declare const toId: typeof toId$1;
|
|
2138
|
+
declare const storyNameFromExport: typeof storyNameFromExport$1;
|
|
2139
|
+
declare const isExportStory: typeof isExportStory$1;
|
|
2140
|
+
|
|
2141
|
+
/**
|
|
2142
|
+
* Runtime adapter for converting Storybook CSF modules to Fragment definitions.
|
|
2143
|
+
*
|
|
2144
|
+
* This operates on IMPORTED modules at runtime, not source code parsing.
|
|
2145
|
+
* By leveraging Vite's module system, we get 100% accurate render functions
|
|
2146
|
+
* without any regex or AST parsing complexity.
|
|
2147
|
+
*
|
|
2148
|
+
* Supports Storybook 8.x with both CSF2 (Template.bind) and CSF3 (object stories).
|
|
2149
|
+
*/
|
|
2150
|
+
|
|
2151
|
+
/**
|
|
2152
|
+
* Storybook decorator function signature
|
|
2153
|
+
*/
|
|
2154
|
+
type Decorator = (Story: () => ReactNode, context: StoryContext) => ReactNode;
|
|
2155
|
+
/**
|
|
2156
|
+
* Storybook loader function signature
|
|
2157
|
+
*/
|
|
2158
|
+
type Loader = (context: StoryContext) => Promise<Record<string, unknown>>;
|
|
2159
|
+
/**
|
|
2160
|
+
* Storybook play function signature (internal, extends StoryContext)
|
|
2161
|
+
*/
|
|
2162
|
+
type StorybookPlayFunction = (context: StorybookPlayFunctionContext) => Promise<void>;
|
|
2163
|
+
/**
|
|
2164
|
+
* Context passed to Storybook play functions (extends StoryContext for compatibility)
|
|
2165
|
+
*/
|
|
2166
|
+
interface StorybookPlayFunctionContext extends StoryContext {
|
|
2167
|
+
canvasElement: HTMLElement;
|
|
2168
|
+
step: (name: string, fn: () => Promise<void>) => Promise<void>;
|
|
2169
|
+
}
|
|
2170
|
+
/**
|
|
2171
|
+
* Context passed to decorators and render functions
|
|
2172
|
+
*/
|
|
2173
|
+
interface StoryContext {
|
|
2174
|
+
args: Record<string, unknown>;
|
|
2175
|
+
argTypes: Record<string, StoryArgType>;
|
|
2176
|
+
globals: Record<string, unknown>;
|
|
2177
|
+
parameters: Record<string, unknown>;
|
|
2178
|
+
id: string;
|
|
2179
|
+
kind: string;
|
|
2180
|
+
name: string;
|
|
2181
|
+
story: string;
|
|
2182
|
+
viewMode: "story" | "docs";
|
|
2183
|
+
loaded: Record<string, unknown>;
|
|
2184
|
+
abortSignal: AbortSignal;
|
|
2185
|
+
componentId: string;
|
|
2186
|
+
title: string;
|
|
2187
|
+
}
|
|
2188
|
+
/**
|
|
2189
|
+
* Storybook Meta (default export)
|
|
2190
|
+
*/
|
|
2191
|
+
interface StoryMeta {
|
|
2192
|
+
title?: string;
|
|
2193
|
+
component?: ComponentType<unknown>;
|
|
2194
|
+
subcomponents?: Record<string, ComponentType<unknown>>;
|
|
2195
|
+
tags?: string[];
|
|
2196
|
+
parameters?: Record<string, unknown> & {
|
|
2197
|
+
docs?: {
|
|
2198
|
+
description?: {
|
|
2199
|
+
component?: string;
|
|
2200
|
+
};
|
|
2201
|
+
};
|
|
2202
|
+
};
|
|
2203
|
+
argTypes?: Record<string, StoryArgType>;
|
|
2204
|
+
args?: Record<string, unknown>;
|
|
2205
|
+
decorators?: Decorator[];
|
|
2206
|
+
loaders?: Loader[];
|
|
2207
|
+
render?: (args: Record<string, unknown>, context?: StoryContext) => ReactNode;
|
|
2208
|
+
includeStories?: string[] | RegExp;
|
|
2209
|
+
excludeStories?: string[] | RegExp;
|
|
2210
|
+
}
|
|
2211
|
+
/**
|
|
2212
|
+
* Storybook argType definition
|
|
2213
|
+
*/
|
|
2214
|
+
interface StoryArgType {
|
|
2215
|
+
control?: string | false | {
|
|
2216
|
+
type: string;
|
|
2217
|
+
min?: number;
|
|
2218
|
+
max?: number;
|
|
2219
|
+
step?: number;
|
|
2220
|
+
presetColors?: string[];
|
|
2221
|
+
};
|
|
2222
|
+
options?: string[];
|
|
2223
|
+
description?: string;
|
|
2224
|
+
table?: {
|
|
2225
|
+
defaultValue?: {
|
|
2226
|
+
summary: string;
|
|
2227
|
+
};
|
|
2228
|
+
type?: {
|
|
2229
|
+
summary: string;
|
|
2230
|
+
};
|
|
2231
|
+
category?: string;
|
|
2232
|
+
subcategory?: string;
|
|
2233
|
+
disable?: boolean;
|
|
2234
|
+
};
|
|
2235
|
+
type?: {
|
|
2236
|
+
name: string;
|
|
2237
|
+
required?: boolean;
|
|
2238
|
+
};
|
|
2239
|
+
name?: string;
|
|
2240
|
+
defaultValue?: unknown;
|
|
2241
|
+
if?: {
|
|
2242
|
+
arg?: string;
|
|
2243
|
+
exists?: boolean;
|
|
2244
|
+
};
|
|
2245
|
+
mapping?: Record<string, unknown>;
|
|
2246
|
+
action?: string;
|
|
2247
|
+
}
|
|
2248
|
+
/**
|
|
2249
|
+
* Storybook Story export (CSF3)
|
|
2250
|
+
*/
|
|
2251
|
+
interface Story {
|
|
2252
|
+
args?: Record<string, unknown>;
|
|
2253
|
+
argTypes?: Record<string, StoryArgType>;
|
|
2254
|
+
render?: (args: Record<string, unknown>, context?: StoryContext) => ReactNode;
|
|
2255
|
+
decorators?: Decorator[];
|
|
2256
|
+
loaders?: Loader[];
|
|
2257
|
+
play?: StorybookPlayFunction;
|
|
2258
|
+
parameters?: Record<string, unknown> & {
|
|
2259
|
+
docs?: {
|
|
2260
|
+
description?: {
|
|
2261
|
+
story?: string;
|
|
2262
|
+
};
|
|
2263
|
+
};
|
|
2264
|
+
};
|
|
2265
|
+
name?: string;
|
|
2266
|
+
storyName?: string;
|
|
2267
|
+
tags?: string[];
|
|
2268
|
+
}
|
|
2269
|
+
/**
|
|
2270
|
+
* CSF2 story function (from Template.bind({})) with args attached
|
|
2271
|
+
*/
|
|
2272
|
+
type CSF2Story = ((args: Record<string, unknown>) => ReactNode) & {
|
|
2273
|
+
args?: Record<string, unknown>;
|
|
2274
|
+
argTypes?: Record<string, StoryArgType>;
|
|
2275
|
+
decorators?: Decorator[];
|
|
2276
|
+
loaders?: Loader[];
|
|
2277
|
+
play?: StorybookPlayFunction;
|
|
2278
|
+
parameters?: Record<string, unknown>;
|
|
2279
|
+
storyName?: string;
|
|
2280
|
+
};
|
|
2281
|
+
/**
|
|
2282
|
+
* A complete Storybook module with default meta and named story exports
|
|
2283
|
+
*/
|
|
2284
|
+
interface StoryModule {
|
|
2285
|
+
default: StoryMeta;
|
|
2286
|
+
[exportName: string]: Story | CSF2Story | StoryMeta | unknown;
|
|
2287
|
+
}
|
|
2288
|
+
/**
|
|
2289
|
+
* Global configuration from preview.tsx
|
|
2290
|
+
*/
|
|
2291
|
+
interface PreviewConfig {
|
|
2292
|
+
decorators?: Decorator[];
|
|
2293
|
+
parameters?: Record<string, unknown>;
|
|
2294
|
+
globalTypes?: Record<string, unknown>;
|
|
2295
|
+
args?: Record<string, unknown>;
|
|
2296
|
+
argTypes?: Record<string, StoryArgType>;
|
|
2297
|
+
loaders?: Loader[];
|
|
2298
|
+
}
|
|
2299
|
+
/**
|
|
2300
|
+
* Set the global preview configuration loaded from .storybook/preview.tsx
|
|
2301
|
+
*/
|
|
2302
|
+
declare function setPreviewConfig(config: PreviewConfig): void;
|
|
2303
|
+
/**
|
|
2304
|
+
* Get the current global preview configuration
|
|
2305
|
+
*/
|
|
2306
|
+
declare function getPreviewConfig(): PreviewConfig;
|
|
2307
|
+
/**
|
|
2308
|
+
* Convert a Storybook module to a Fragment definition at runtime.
|
|
2309
|
+
*
|
|
2310
|
+
* @param storyModule - The imported Storybook module
|
|
2311
|
+
* @param filePath - File path for metadata extraction
|
|
2312
|
+
* @returns A complete FragmentDefinition ready for the viewer
|
|
2313
|
+
*/
|
|
2314
|
+
declare function storyModuleToFragment(storyModule: StoryModule, filePath: string): FragmentDefinition | null;
|
|
2315
|
+
|
|
2316
|
+
/**
|
|
2317
|
+
* Smart filtering for Storybook adapter.
|
|
2318
|
+
*
|
|
2319
|
+
* Two layers:
|
|
2320
|
+
* 1. Per-file heuristics — checkStoryExclusion() checks title, tags, component name, etc.
|
|
2321
|
+
* 2. Cross-file sub-component detection — detectSubComponentPaths() uses directory structure.
|
|
2322
|
+
*
|
|
2323
|
+
* All functions are pure (no I/O, no side effects) for easy testing.
|
|
2324
|
+
*/
|
|
2325
|
+
|
|
2326
|
+
type ExclusionReason = 'deprecated' | 'test-story' | 'svg-icon' | 'tag-excluded' | 'empty-variants' | 'sub-component' | 'config-excluded';
|
|
2327
|
+
interface ExclusionResult {
|
|
2328
|
+
excluded: boolean;
|
|
2329
|
+
reason?: ExclusionReason;
|
|
2330
|
+
detail?: string;
|
|
2331
|
+
}
|
|
2332
|
+
interface CheckStoryExclusionOpts {
|
|
2333
|
+
storybookTitle?: string;
|
|
2334
|
+
componentName: string;
|
|
2335
|
+
componentDisplayName?: string;
|
|
2336
|
+
componentFunctionName?: string;
|
|
2337
|
+
tags?: string[];
|
|
2338
|
+
variantCount: number;
|
|
2339
|
+
filePath: string;
|
|
2340
|
+
config: StorybookFilterConfig;
|
|
2341
|
+
}
|
|
2342
|
+
/**
|
|
2343
|
+
* Per-file exclusion check. Returns `{ excluded: true, reason, detail }` when
|
|
2344
|
+
* the fragment should be filtered out, or `{ excluded: false }` when it should
|
|
2345
|
+
* be kept.
|
|
2346
|
+
*
|
|
2347
|
+
* Config `include` trumps everything — if a name matches `include`, it is
|
|
2348
|
+
* never excluded by heuristics.
|
|
2349
|
+
*/
|
|
2350
|
+
declare function checkStoryExclusion(opts: CheckStoryExclusionOpts): ExclusionResult;
|
|
2351
|
+
/**
|
|
2352
|
+
* Given all story file relative paths, detect which ones are sub-components
|
|
2353
|
+
* based on directory structure.
|
|
2354
|
+
*
|
|
2355
|
+
* Heuristic: within a directory, if one story file's base name matches the
|
|
2356
|
+
* directory name, it is the "primary" component. All other story files in
|
|
2357
|
+
* the same directory are considered sub-components.
|
|
2358
|
+
*
|
|
2359
|
+
* Example:
|
|
2360
|
+
* src/components/Form/Form.stories.tsx → primary ("Form")
|
|
2361
|
+
* src/components/Form/Checkbox.stories.tsx → sub-component of "Form"
|
|
2362
|
+
* src/components/Form/RadioGroup.stories.tsx → sub-component of "Form"
|
|
2363
|
+
*
|
|
2364
|
+
* Returns a Map from relative path → parent component name.
|
|
2365
|
+
* Paths NOT in the map are standalone components.
|
|
2366
|
+
*/
|
|
2367
|
+
declare function detectSubComponentPaths(storyFiles: Array<{
|
|
2368
|
+
relativePath: string;
|
|
2369
|
+
}>): Map<string, string>;
|
|
2370
|
+
/**
|
|
2371
|
+
* Check if a component name matches the `storybook.include` patterns.
|
|
2372
|
+
* Include is a force-include that bypasses all heuristic filters.
|
|
2373
|
+
*/
|
|
2374
|
+
declare function isForceIncluded(name: string, config: StorybookFilterConfig): boolean;
|
|
2375
|
+
/**
|
|
2376
|
+
* Check if a component name matches the `storybook.exclude` patterns.
|
|
2377
|
+
*/
|
|
2378
|
+
declare function isConfigExcluded(name: string, config: StorybookFilterConfig): boolean;
|
|
2379
|
+
|
|
2380
|
+
/**
|
|
2381
|
+
* Figma property mapping DSL
|
|
2382
|
+
*
|
|
2383
|
+
* Provides helpers for mapping Figma component properties to code props.
|
|
2384
|
+
* Inspired by Figma Code Connect's API.
|
|
2385
|
+
*
|
|
2386
|
+
* @example
|
|
2387
|
+
* ```tsx
|
|
2388
|
+
* import { defineFragment, figma } from '@fragments-sdk/cli/core';
|
|
2389
|
+
*
|
|
2390
|
+
* export default defineFragment({
|
|
2391
|
+
* component: Button,
|
|
2392
|
+
* meta: {
|
|
2393
|
+
* name: 'Button',
|
|
2394
|
+
* description: 'Primary action trigger',
|
|
2395
|
+
* category: 'actions',
|
|
2396
|
+
* figma: 'https://figma.com/file/abc/Design?node-id=1-2',
|
|
2397
|
+
* figmaProps: {
|
|
2398
|
+
* children: figma.string('Label'),
|
|
2399
|
+
* disabled: figma.boolean('Disabled'),
|
|
2400
|
+
* variant: figma.enum('Type', {
|
|
2401
|
+
* 'Primary': 'primary',
|
|
2402
|
+
* 'Secondary': 'secondary',
|
|
2403
|
+
* }),
|
|
2404
|
+
* },
|
|
2405
|
+
* },
|
|
2406
|
+
* // ...
|
|
2407
|
+
* });
|
|
2408
|
+
* ```
|
|
2409
|
+
*/
|
|
2410
|
+
|
|
2411
|
+
/**
|
|
2412
|
+
* Map a Figma text property to a string prop.
|
|
2413
|
+
*
|
|
2414
|
+
* @param figmaProperty - The name of the text property in Figma
|
|
2415
|
+
* @returns A string mapping descriptor
|
|
2416
|
+
*
|
|
2417
|
+
* @example
|
|
2418
|
+
* ```tsx
|
|
2419
|
+
* figmaProps: {
|
|
2420
|
+
* label: figma.string('Button Text'),
|
|
2421
|
+
* placeholder: figma.string('Placeholder'),
|
|
2422
|
+
* }
|
|
2423
|
+
* ```
|
|
2424
|
+
*/
|
|
2425
|
+
declare function string(figmaProperty: string): FigmaStringMapping;
|
|
2426
|
+
/**
|
|
2427
|
+
* Map a Figma boolean property to a boolean prop.
|
|
2428
|
+
* Optionally map true/false to different values.
|
|
2429
|
+
*
|
|
2430
|
+
* @param figmaProperty - The name of the boolean property in Figma
|
|
2431
|
+
* @param valueMapping - Optional mapping of true/false to other values
|
|
2432
|
+
* @returns A boolean mapping descriptor
|
|
2433
|
+
*
|
|
2434
|
+
* @example
|
|
2435
|
+
* ```tsx
|
|
2436
|
+
* figmaProps: {
|
|
2437
|
+
* disabled: figma.boolean('Disabled'),
|
|
2438
|
+
* // Map boolean to string values
|
|
2439
|
+
* size: figma.boolean('Large', { true: 'lg', false: 'md' }),
|
|
2440
|
+
* }
|
|
2441
|
+
* ```
|
|
2442
|
+
*/
|
|
2443
|
+
declare function boolean(figmaProperty: string, valueMapping?: {
|
|
2444
|
+
true: unknown;
|
|
2445
|
+
false: unknown;
|
|
2446
|
+
}): FigmaBooleanMapping;
|
|
2447
|
+
/**
|
|
2448
|
+
* Map a Figma variant property to an enum prop.
|
|
2449
|
+
*
|
|
2450
|
+
* @param figmaProperty - The name of the variant property in Figma
|
|
2451
|
+
* @param valueMapping - Mapping of Figma values to code values
|
|
2452
|
+
* @returns An enum mapping descriptor
|
|
2453
|
+
*
|
|
2454
|
+
* @example
|
|
2455
|
+
* ```tsx
|
|
2456
|
+
* figmaProps: {
|
|
2457
|
+
* variant: figma.enum('Type', {
|
|
2458
|
+
* 'Primary': 'primary',
|
|
2459
|
+
* 'Secondary': 'secondary',
|
|
2460
|
+
* 'Outline': 'outline',
|
|
2461
|
+
* }),
|
|
2462
|
+
* size: figma.enum('Size', {
|
|
2463
|
+
* 'Small': 'sm',
|
|
2464
|
+
* 'Medium': 'md',
|
|
2465
|
+
* 'Large': 'lg',
|
|
2466
|
+
* }),
|
|
2467
|
+
* }
|
|
2468
|
+
* ```
|
|
2469
|
+
*/
|
|
2470
|
+
declare function enumValue<T extends Record<string, unknown>>(figmaProperty: string, valueMapping: T): FigmaEnumMapping;
|
|
2471
|
+
/**
|
|
2472
|
+
* Reference a nested Figma component instance.
|
|
2473
|
+
* Use this when a prop accepts a component that's represented
|
|
2474
|
+
* as an instance swap in Figma.
|
|
2475
|
+
*
|
|
2476
|
+
* @param figmaProperty - The name of the instance property in Figma
|
|
2477
|
+
* @returns An instance mapping descriptor
|
|
2478
|
+
*
|
|
2479
|
+
* @example
|
|
2480
|
+
* ```tsx
|
|
2481
|
+
* figmaProps: {
|
|
2482
|
+
* icon: figma.instance('Icon'),
|
|
2483
|
+
* avatar: figma.instance('Avatar'),
|
|
2484
|
+
* }
|
|
2485
|
+
* ```
|
|
2486
|
+
*/
|
|
2487
|
+
declare function instance(figmaProperty: string): FigmaInstanceMapping;
|
|
2488
|
+
/**
|
|
2489
|
+
* Render children from specific Figma layers.
|
|
2490
|
+
* Use this when children are represented as named layers in Figma.
|
|
2491
|
+
*
|
|
2492
|
+
* @param layers - Array of layer names to include as children
|
|
2493
|
+
* @returns A children mapping descriptor
|
|
2494
|
+
*
|
|
2495
|
+
* @example
|
|
2496
|
+
* ```tsx
|
|
2497
|
+
* figmaProps: {
|
|
2498
|
+
* children: figma.children(['Title', 'Description', 'Actions']),
|
|
2499
|
+
* }
|
|
2500
|
+
* ```
|
|
2501
|
+
*/
|
|
2502
|
+
declare function children(layers: string[]): FigmaChildrenMapping;
|
|
2503
|
+
/**
|
|
2504
|
+
* Extract text content from a Figma text layer.
|
|
2505
|
+
* Use this when a prop should be the actual text from a layer.
|
|
2506
|
+
*
|
|
2507
|
+
* @param layer - The name of the text layer in Figma
|
|
2508
|
+
* @returns A text content mapping descriptor
|
|
2509
|
+
*
|
|
2510
|
+
* @example
|
|
2511
|
+
* ```tsx
|
|
2512
|
+
* figmaProps: {
|
|
2513
|
+
* title: figma.textContent('Header Text'),
|
|
2514
|
+
* description: figma.textContent('Body Text'),
|
|
2515
|
+
* }
|
|
2516
|
+
* ```
|
|
2517
|
+
*/
|
|
2518
|
+
declare function textContent(layer: string): FigmaTextContentMapping;
|
|
2519
|
+
/**
|
|
2520
|
+
* Figma property mapping helpers.
|
|
2521
|
+
*
|
|
2522
|
+
* Use these to define how Figma properties map to your component props.
|
|
2523
|
+
* The mappings are used for:
|
|
2524
|
+
* - Generating accurate code snippets in Figma Dev Mode
|
|
2525
|
+
* - AI agents understanding the design-to-code relationship
|
|
2526
|
+
* - Automated design verification
|
|
2527
|
+
*/
|
|
2528
|
+
declare const figma: {
|
|
2529
|
+
readonly string: typeof string;
|
|
2530
|
+
readonly boolean: typeof boolean;
|
|
2531
|
+
readonly enum: typeof enumValue;
|
|
2532
|
+
readonly instance: typeof instance;
|
|
2533
|
+
readonly children: typeof children;
|
|
2534
|
+
readonly textContent: typeof textContent;
|
|
2535
|
+
};
|
|
2536
|
+
/**
|
|
2537
|
+
* Helper type to check if a value is a Figma prop mapping
|
|
2538
|
+
*/
|
|
2539
|
+
declare function isFigmaPropMapping(value: unknown): value is FigmaStringMapping | FigmaBooleanMapping | FigmaEnumMapping | FigmaInstanceMapping | FigmaChildrenMapping | FigmaTextContentMapping;
|
|
2540
|
+
/**
|
|
2541
|
+
* Resolve a Figma prop mapping to an actual value given Figma property values.
|
|
2542
|
+
*
|
|
2543
|
+
* @param mapping - The Figma prop mapping
|
|
2544
|
+
* @param figmaValues - Object containing Figma property values
|
|
2545
|
+
* @returns The resolved value for the code prop
|
|
2546
|
+
*/
|
|
2547
|
+
declare function resolveFigmaMapping(mapping: FigmaStringMapping | FigmaBooleanMapping | FigmaEnumMapping | FigmaInstanceMapping | FigmaChildrenMapping | FigmaTextContentMapping, figmaValues: Record<string, unknown>): unknown;
|
|
2548
|
+
|
|
2549
|
+
/**
|
|
2550
|
+
* TypeScript types for Fragment JSON files.
|
|
2551
|
+
* These types correspond to the JSON schemas in ./schema/
|
|
2552
|
+
*/
|
|
2553
|
+
/**
|
|
2554
|
+
* Figma design links and mappings
|
|
2555
|
+
*/
|
|
2556
|
+
interface FragmentFigma {
|
|
2557
|
+
/** Figma file URL */
|
|
2558
|
+
file?: string;
|
|
2559
|
+
/** Default Figma node ID for this component */
|
|
2560
|
+
nodeId?: string;
|
|
2561
|
+
/** Mapping of variant names to Figma node IDs */
|
|
2562
|
+
variants?: Record<string, string>;
|
|
2563
|
+
}
|
|
2564
|
+
/**
|
|
2565
|
+
* Anti-pattern with optional alternative
|
|
2566
|
+
*/
|
|
2567
|
+
interface FragmentDoNotItem {
|
|
2568
|
+
/** What not to do */
|
|
2569
|
+
text: string;
|
|
2570
|
+
/** Component name to use instead */
|
|
2571
|
+
instead?: string;
|
|
2572
|
+
}
|
|
2573
|
+
/**
|
|
2574
|
+
* Usage pattern with code example
|
|
2575
|
+
*/
|
|
2576
|
+
interface FragmentPattern {
|
|
2577
|
+
/** Pattern name */
|
|
2578
|
+
name: string;
|
|
2579
|
+
/** Code example */
|
|
2580
|
+
code: string;
|
|
2581
|
+
/** When to use this pattern */
|
|
2582
|
+
description?: string;
|
|
2583
|
+
}
|
|
2584
|
+
/**
|
|
2585
|
+
* Usage guidelines for AI agents and developers
|
|
2586
|
+
*/
|
|
2587
|
+
interface FragmentUsage {
|
|
2588
|
+
/** Scenarios when this component should be used */
|
|
2589
|
+
when?: string[];
|
|
2590
|
+
/** Anti-patterns and what to use instead */
|
|
2591
|
+
doNot?: (string | FragmentDoNotItem)[];
|
|
2592
|
+
/** Common usage patterns with code examples */
|
|
2593
|
+
patterns?: FragmentPattern[];
|
|
2594
|
+
}
|
|
2595
|
+
/**
|
|
2596
|
+
* Accessibility requirements and guidelines
|
|
2597
|
+
*/
|
|
2598
|
+
interface FragmentAccessibility {
|
|
2599
|
+
/** ARIA role this component implements */
|
|
2600
|
+
role?: string;
|
|
2601
|
+
/** Accessibility requirements */
|
|
2602
|
+
requirements?: string[];
|
|
2603
|
+
/** Keyboard interaction patterns (key -> description) */
|
|
2604
|
+
keyboard?: Record<string, string>;
|
|
2605
|
+
}
|
|
2606
|
+
/**
|
|
2607
|
+
* Relationships to other components
|
|
2608
|
+
*/
|
|
2609
|
+
interface FragmentRelated {
|
|
2610
|
+
/** Similar components that might be alternatives */
|
|
2611
|
+
similar?: string[];
|
|
2612
|
+
/** Components commonly used together with this one */
|
|
2613
|
+
composedWith?: string[];
|
|
2614
|
+
/** Parent components or patterns where this is commonly used */
|
|
2615
|
+
usedIn?: string[];
|
|
2616
|
+
}
|
|
2617
|
+
/**
|
|
2618
|
+
* Administrative metadata
|
|
2619
|
+
*/
|
|
2620
|
+
interface FragmentMeta {
|
|
2621
|
+
/** Team or person responsible for this component */
|
|
2622
|
+
owner?: string;
|
|
2623
|
+
/** Component lifecycle status */
|
|
2624
|
+
status?: "draft" | "experimental" | "beta" | "stable" | "deprecated";
|
|
2625
|
+
/** Version when this component was introduced */
|
|
2626
|
+
since?: string;
|
|
2627
|
+
/** Version when this component was deprecated */
|
|
2628
|
+
deprecatedSince?: string;
|
|
2629
|
+
/** Why this component was deprecated and what to use instead */
|
|
2630
|
+
deprecatedReason?: string;
|
|
2631
|
+
/** Tags for categorization and search */
|
|
2632
|
+
tags?: string[];
|
|
2633
|
+
}
|
|
2634
|
+
/**
|
|
2635
|
+
* Fragment JSON file structure (.fragment.json)
|
|
2636
|
+
* Contains enrichment metadata for a component
|
|
2637
|
+
*/
|
|
2638
|
+
interface Fragment {
|
|
2639
|
+
/** JSON Schema reference */
|
|
2640
|
+
$schema?: string;
|
|
2641
|
+
/** Component name (must match the component export name) */
|
|
2642
|
+
name: string;
|
|
2643
|
+
/** Brief description of the component's purpose */
|
|
2644
|
+
description?: string;
|
|
2645
|
+
/** Figma design links and mappings */
|
|
2646
|
+
figma?: FragmentFigma;
|
|
2647
|
+
/** Usage guidelines for AI agents and developers */
|
|
2648
|
+
usage?: FragmentUsage;
|
|
2649
|
+
/** Accessibility requirements and guidelines */
|
|
2650
|
+
accessibility?: FragmentAccessibility;
|
|
2651
|
+
/** Relationships to other components */
|
|
2652
|
+
related?: FragmentRelated;
|
|
2653
|
+
/** Administrative metadata */
|
|
2654
|
+
meta?: FragmentMeta;
|
|
2655
|
+
}
|
|
2656
|
+
/**
|
|
2657
|
+
* Prop entry in the registry
|
|
2658
|
+
*/
|
|
2659
|
+
interface RegistryPropEntry {
|
|
2660
|
+
/** TypeScript type (e.g., 'string', 'boolean', enum values) */
|
|
2661
|
+
type?: string;
|
|
2662
|
+
/** Simplified type category */
|
|
2663
|
+
typeKind?: "string" | "number" | "boolean" | "enum" | "object" | "array" | "function" | "node" | "element" | "union" | "unknown";
|
|
2664
|
+
/** For enum types, the allowed values */
|
|
2665
|
+
options?: string[];
|
|
2666
|
+
/** Default value if specified */
|
|
2667
|
+
default?: unknown;
|
|
2668
|
+
/** Whether this prop is required */
|
|
2669
|
+
required?: boolean;
|
|
2670
|
+
/** Prop description from JSDoc or TypeScript */
|
|
2671
|
+
description?: string;
|
|
2672
|
+
}
|
|
2673
|
+
/**
|
|
2674
|
+
* Component entry in the registry (simplified - focuses on paths and enrichment)
|
|
2675
|
+
*/
|
|
2676
|
+
interface RegistryComponentEntry {
|
|
2677
|
+
/** Relative path to the component source file */
|
|
2678
|
+
path: string;
|
|
2679
|
+
/** Relative path to the .fragment.json file (if exists) */
|
|
2680
|
+
fragmentPath?: string;
|
|
2681
|
+
/** Relative path to the .stories.tsx file (if exists) */
|
|
2682
|
+
storyPath?: string;
|
|
2683
|
+
/** Component category (inferred from directory or fragment) */
|
|
2684
|
+
category?: string;
|
|
2685
|
+
/** Component lifecycle status (from fragment) */
|
|
2686
|
+
status?: "draft" | "experimental" | "beta" | "stable" | "deprecated";
|
|
2687
|
+
/** Component description (from fragment or JSDoc) */
|
|
2688
|
+
description?: string;
|
|
2689
|
+
/** Has human-authored enrichment (fragment file exists with content beyond skeleton) */
|
|
2690
|
+
hasEnrichment?: boolean;
|
|
2691
|
+
/** Extracted prop definitions - only included if config.registry.includeProps is true */
|
|
2692
|
+
props?: Record<string, RegistryPropEntry>;
|
|
2693
|
+
/** Named exports from the component file */
|
|
2694
|
+
exports?: string[];
|
|
2695
|
+
/** Component dependencies (other components used) */
|
|
2696
|
+
dependencies?: string[];
|
|
2697
|
+
/** Merged fragment enrichment data - only included if config.registry.embedFragments is true */
|
|
2698
|
+
fragment?: Fragment;
|
|
2699
|
+
}
|
|
2700
|
+
/**
|
|
2701
|
+
* Minimal component index (.fragments/index.json)
|
|
2702
|
+
* Ultra-light name → path mapping for quick lookups
|
|
2703
|
+
*/
|
|
2704
|
+
interface FragmentIndex {
|
|
2705
|
+
/** Schema version */
|
|
2706
|
+
version: string;
|
|
2707
|
+
/** When this index was generated */
|
|
2708
|
+
generatedAt: string;
|
|
2709
|
+
/** Simple name → path mapping */
|
|
2710
|
+
components: Record<string, string>;
|
|
2711
|
+
/** Categories for grouping */
|
|
2712
|
+
categories?: Record<string, string[]>;
|
|
2713
|
+
}
|
|
2714
|
+
/**
|
|
2715
|
+
* Registry file structure (.fragments/registry.json)
|
|
2716
|
+
* Component index with resolved paths and optional metadata
|
|
2717
|
+
*/
|
|
2718
|
+
interface FragmentRegistry {
|
|
2719
|
+
/** JSON Schema reference */
|
|
2720
|
+
$schema?: string;
|
|
2721
|
+
/** Schema version */
|
|
2722
|
+
version: string;
|
|
2723
|
+
/** When this registry was generated */
|
|
2724
|
+
generatedAt: string;
|
|
2725
|
+
/** Component count for quick reference */
|
|
2726
|
+
componentCount: number;
|
|
2727
|
+
/** Component index keyed by component name */
|
|
2728
|
+
components: Record<string, RegistryComponentEntry>;
|
|
2729
|
+
/** Components grouped by category */
|
|
2730
|
+
categories?: Record<string, string[]>;
|
|
2731
|
+
}
|
|
2732
|
+
/**
|
|
2733
|
+
* Context file options for generation
|
|
2734
|
+
*/
|
|
2735
|
+
interface FragmentContextOptions {
|
|
2736
|
+
/** Output format */
|
|
2737
|
+
format?: "markdown" | "json";
|
|
2738
|
+
/** Compact mode - minimal output for token efficiency */
|
|
2739
|
+
compact?: boolean;
|
|
2740
|
+
/** What to include in the output */
|
|
2741
|
+
include?: {
|
|
2742
|
+
/** Include prop details (default: true) */
|
|
2743
|
+
props?: boolean;
|
|
2744
|
+
/** Include code examples (default: false) */
|
|
2745
|
+
code?: boolean;
|
|
2746
|
+
/** Include related components (default: true) */
|
|
2747
|
+
relations?: boolean;
|
|
2748
|
+
};
|
|
2749
|
+
}
|
|
2750
|
+
|
|
2751
|
+
/**
|
|
2752
|
+
* Token Parser — extracts CSS custom property declarations from SCSS/CSS files.
|
|
2753
|
+
*
|
|
2754
|
+
* Parses files for `--prefix-*: value;` declarations and groups them
|
|
2755
|
+
* by SCSS comment sections (e.g., `// Typography`, `// Colors`).
|
|
2756
|
+
* Falls back to naming-convention-based categorization when comments
|
|
2757
|
+
* are absent.
|
|
2758
|
+
*/
|
|
2759
|
+
interface ParsedToken {
|
|
2760
|
+
/** Full CSS variable name (e.g., "--fui-color-accent") */
|
|
2761
|
+
name: string;
|
|
2762
|
+
/** Raw value from the declaration (e.g., "#{$fui-space-4}" or "16px") */
|
|
2763
|
+
value?: string;
|
|
2764
|
+
/** Resolved value after SCSS variable substitution (e.g., "16px") */
|
|
2765
|
+
resolvedValue?: string;
|
|
2766
|
+
/** Category inferred from SCSS comment or naming convention */
|
|
2767
|
+
category: string;
|
|
2768
|
+
/** Description from inline comment, if any */
|
|
2769
|
+
description?: string;
|
|
2770
|
+
}
|
|
2771
|
+
interface TokenParseOutput {
|
|
2772
|
+
/** Detected prefix (e.g., "--fui-") */
|
|
2773
|
+
prefix: string;
|
|
2774
|
+
/** Tokens grouped by category */
|
|
2775
|
+
categories: Record<string, ParsedToken[]>;
|
|
2776
|
+
/** Total number of tokens found */
|
|
2777
|
+
total: number;
|
|
2778
|
+
}
|
|
2779
|
+
/**
|
|
2780
|
+
* Parse a SCSS or CSS file and extract CSS custom property declarations.
|
|
2781
|
+
*
|
|
2782
|
+
* Handles two grouping strategies:
|
|
2783
|
+
* 1. Comment-based: Uses `// Category` comments above groups of declarations
|
|
2784
|
+
* 2. Naming-based: Falls back to inferring category from variable name patterns
|
|
2785
|
+
*
|
|
2786
|
+
* Also resolves SCSS variable interpolations (e.g., `#{$fui-space-4}` → `16px`)
|
|
2787
|
+
* when the SCSS variable definitions are found in the same file content.
|
|
2788
|
+
*/
|
|
2789
|
+
declare function parseTokenFile(content: string, filePath: string): TokenParseOutput;
|
|
2790
|
+
|
|
2791
|
+
interface CompositionWarning {
|
|
2792
|
+
type: "missing_parent" | "missing_child" | "missing_composition" | "redundant_alternative" | "deprecated" | "experimental";
|
|
2793
|
+
component: string;
|
|
2794
|
+
message: string;
|
|
2795
|
+
relatedComponent?: string;
|
|
2796
|
+
}
|
|
2797
|
+
interface CompositionSuggestion {
|
|
2798
|
+
component: string;
|
|
2799
|
+
reason: string;
|
|
2800
|
+
relationship: RelationshipType | "category_gap";
|
|
2801
|
+
sourceComponent: string;
|
|
2802
|
+
}
|
|
2803
|
+
interface CompositionGuideline {
|
|
2804
|
+
component: string;
|
|
2805
|
+
guideline: string;
|
|
2806
|
+
}
|
|
2807
|
+
interface CompositionAnalysis {
|
|
2808
|
+
/** The validated component names (filtered to those that exist) */
|
|
2809
|
+
components: string[];
|
|
2810
|
+
/** Components requested but not found in the registry */
|
|
2811
|
+
unknown: string[];
|
|
2812
|
+
/** Issues with the current selection */
|
|
2813
|
+
warnings: CompositionWarning[];
|
|
2814
|
+
/** Components to consider adding */
|
|
2815
|
+
suggestions: CompositionSuggestion[];
|
|
2816
|
+
/** Relevant usage guidelines for the selected components */
|
|
2817
|
+
guidelines: CompositionGuideline[];
|
|
2818
|
+
}
|
|
2819
|
+
/**
|
|
2820
|
+
* Analyzes a set of components as a composition group.
|
|
2821
|
+
* Returns warnings about missing relations, usage conflicts,
|
|
2822
|
+
* and suggestions for additional components.
|
|
2823
|
+
*
|
|
2824
|
+
* When a ComponentGraph is provided via `options.graph`, the analysis is
|
|
2825
|
+
* enhanced with graph-based dependency detection and block-based suggestions.
|
|
2826
|
+
*
|
|
2827
|
+
* Browser-safe: no Node.js APIs used.
|
|
2828
|
+
*/
|
|
2829
|
+
declare function analyzeComposition(fragments: Record<string, CompiledFragment>, componentNames: string[], _context?: string, options?: {
|
|
2830
|
+
graph?: ComponentGraph;
|
|
2831
|
+
}): CompositionAnalysis;
|
|
2832
|
+
|
|
2833
|
+
/**
|
|
2834
|
+
* Minimal contract for rendering a preview variant.
|
|
2835
|
+
* Compatible with fragment variants and Storybook-adapted variants.
|
|
2836
|
+
*/
|
|
2837
|
+
interface PreviewVariantLike {
|
|
2838
|
+
render: (options?: VariantRenderOptions) => ReactNode;
|
|
2839
|
+
loaders?: VariantLoader[];
|
|
2840
|
+
}
|
|
2841
|
+
interface PreviewRuntimeState {
|
|
2842
|
+
content: ReactNode | null;
|
|
2843
|
+
isLoading: boolean;
|
|
2844
|
+
error: Error | null;
|
|
2845
|
+
loadedData?: Record<string, unknown>;
|
|
2846
|
+
}
|
|
2847
|
+
interface PreviewRuntimeOptions {
|
|
2848
|
+
variant?: PreviewVariantLike | null;
|
|
2849
|
+
loadedData?: Record<string, unknown>;
|
|
2850
|
+
}
|
|
2851
|
+
/**
|
|
2852
|
+
* Execute all variant loaders and merge their payloads.
|
|
2853
|
+
* `loadedData` is applied last so host-level overrides win.
|
|
2854
|
+
*/
|
|
2855
|
+
declare function executeVariantLoaders(loaders: VariantLoader[] | undefined, loadedData?: Record<string, unknown>): Promise<Record<string, unknown> | undefined>;
|
|
2856
|
+
/**
|
|
2857
|
+
* Resolve a full runtime state (loader execution + render) in one async call.
|
|
2858
|
+
* This is useful for testing and for hook/component orchestration.
|
|
2859
|
+
*/
|
|
2860
|
+
declare function resolvePreviewRuntimeState(options: PreviewRuntimeOptions): Promise<PreviewRuntimeState>;
|
|
2861
|
+
/**
|
|
2862
|
+
* Hook for rendering a preview variant with loader support.
|
|
2863
|
+
*/
|
|
2864
|
+
declare function usePreviewVariantRuntime(options: PreviewRuntimeOptions): PreviewRuntimeState;
|
|
2865
|
+
interface PreviewVariantRuntimeProps extends PreviewRuntimeOptions {
|
|
2866
|
+
children: (state: PreviewRuntimeState) => ReactNode;
|
|
2867
|
+
}
|
|
2868
|
+
/**
|
|
2869
|
+
* Render-prop component wrapper around `usePreviewVariantRuntime`.
|
|
2870
|
+
*/
|
|
2871
|
+
declare function PreviewVariantRuntime({ variant, loadedData, children, }: PreviewVariantRuntimeProps): react_jsx_runtime.JSX.Element;
|
|
2872
|
+
|
|
2873
|
+
export { type AIMetadata, BRAND, type BaselineInfo, type BlockDefinition, type BoundingBox, type Brand, type CSF2Story, type CheckStoryExclusionOpts, type CompiledRecipe, type ComplexityTier, type ComponentRelation, type CompositionAnalysis, type CompositionGuideline, type CompositionSuggestion, type CompositionWarning, type ControlType, DEFAULTS, type Decorator, type Defaults, type DesignToken, type DiffResult, type EnhancedStyleDiffItem, type ExclusionReason, type ExclusionResult, type FigmaBooleanMapping, type FigmaChildrenMapping, type FigmaEnumMapping, type FigmaInstanceMapping, type FigmaPropMapping, type FigmaStringMapping, type FigmaTextContentMapping, type Fragment, type FragmentAccessibility, type FragmentComponent, type FragmentContextOptions, type FragmentContract, type FragmentDefinition, type FragmentDoNotItem, type FragmentFigma, type FragmentGenerated, type FragmentIndex, type FragmentMeta as FragmentJsonMeta, type FragmentUsage as FragmentJsonUsage, type FragmentMeta$1 as FragmentMeta, type FragmentPattern, type FragmentRegistry, type FragmentRelated, type FragmentUsage$1 as FragmentUsage, type FragmentVariant, type FragmentsConfig, type InferProps, type Loader, type Manifest, PRESET_NAMES, type ParsedToken, type PerformanceData as PerfData, type PerformanceSummary as PerfSummary, type PerformanceBudgets, type PerformanceConfig, type PlayFunction, type PlayFunctionContext, type PreviewConfig, type PreviewRuntimeOptions, type PreviewRuntimeState, type PreviewVariantLike, PreviewVariantRuntime, type PropDefinition, type PropType, type RecipeDefinition, type RegistryComponentEntry, type RegistryOptions, type RegistryPropEntry, type RelationshipType, type Screenshot, type ScreenshotConfig, type ScreenshotMetadata, type ServiceConfig, type SnippetPolicyConfig, type Story, type StoryArgType, type StoryContext, type StoryMeta, type StoryModule, type StorybookFilterConfig, type Theme, type TokenCategory, type TokenConfig, type TokenFix, type TokenMatchRequest, type TokenMatchResult, type TokenParseError, type TokenParseOutput, type TokenParseResult, type TokenRegistry, type TokenRegistryMeta, type TokenUsageSummary, type VariantLoader, type VerifyRequest, type VerifyResult, type Viewport, aiMetadataSchema, analyzeComposition, blockDefinitionSchema, budgetBar, checkStoryExclusion, classifyComplexity, compileBlock, compileFragment, compileRecipe, componentRelationSchema, defineBlock, defineFragment, defineRecipe, detectSubComponentPaths, executeVariantLoaders, figma, figmaPropMappingSchema, formatBytes, fragmentBanSchema, fragmentContractSchema, fragmentDefinitionSchema, fragmentGeneratedSchema, fragmentMetaSchema, fragmentUsageSchema, fragmentVariantSchema, fragmentsConfigSchema, getPreviewConfig, isConfigExcluded, isExportStory, isFigmaPropMapping, isForceIncluded, parseTokenFile, propDefinitionSchema, recipeDefinitionSchema, resolveFigmaMapping, resolvePerformanceConfig, resolvePreviewRuntimeState, setPreviewConfig, storyModuleToFragment, storyNameFromExport, toId, usePreviewVariantRuntime };
|