@fragments-sdk/cli 0.6.0 → 0.7.1

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.
Files changed (178) hide show
  1. package/dist/bin.js +529 -285
  2. package/dist/bin.js.map +1 -1
  3. package/dist/{chunk-F7ITZPDJ.js → chunk-32VIEOQY.js} +18 -18
  4. package/dist/chunk-32VIEOQY.js.map +1 -0
  5. package/dist/{chunk-SSLQXHNX.js → chunk-5ITIP3ES.js} +27 -27
  6. package/dist/chunk-5ITIP3ES.js.map +1 -0
  7. package/dist/{chunk-RVRTRESS.js → chunk-DQHWLAUV.js} +29 -29
  8. package/dist/chunk-DQHWLAUV.js.map +1 -0
  9. package/dist/{chunk-Q7GOHVOK.js → chunk-GCZMFLDI.js} +67 -32
  10. package/dist/chunk-GCZMFLDI.js.map +1 -0
  11. package/dist/{chunk-6JBGU74P.js → chunk-GHYYFAQN.js} +23 -23
  12. package/dist/chunk-GHYYFAQN.js.map +1 -0
  13. package/dist/{chunk-NWQ4CJOQ.js → chunk-GKX2HPZ6.js} +40 -40
  14. package/dist/chunk-GKX2HPZ6.js.map +1 -0
  15. package/dist/{chunk-D35RGPAG.js → chunk-U6VTHBNI.js} +499 -83
  16. package/dist/chunk-U6VTHBNI.js.map +1 -0
  17. package/dist/{core-SKRPJQZG.js → core-SFHPYR5H.js} +24 -26
  18. package/dist/{generate-7AF7WRVK.js → generate-54GJAWUY.js} +5 -5
  19. package/dist/generate-54GJAWUY.js.map +1 -0
  20. package/dist/index.d.ts +23 -27
  21. package/dist/index.js +10 -10
  22. package/dist/{init-WKGDPYI4.js → init-EIM5WNMP.js} +5 -5
  23. package/dist/{init-WKGDPYI4.js.map → init-EIM5WNMP.js.map} +1 -1
  24. package/dist/mcp-bin.js +73 -73
  25. package/dist/mcp-bin.js.map +1 -1
  26. package/dist/scan-KQBKUS64.js +12 -0
  27. package/dist/{service-F3E4JJM7.js → service-ED2LNCTU.js} +6 -6
  28. package/dist/{static-viewer-4LQZ5AGA.js → static-viewer-Q4F4QP5M.js} +4 -4
  29. package/dist/{test-CJDNJTPZ.js → test-6VN2DA3S.js} +19 -19
  30. package/dist/test-6VN2DA3S.js.map +1 -0
  31. package/dist/{tokens-JAJABYXP.js → tokens-P2B7ZAM3.js} +5 -5
  32. package/dist/{viewer-R3Q6WAMJ.js → viewer-GM7IQPPB.js} +199 -199
  33. package/dist/viewer-GM7IQPPB.js.map +1 -0
  34. package/package.json +2 -2
  35. package/src/ai.ts +5 -5
  36. package/src/analyze.ts +11 -11
  37. package/src/bin.ts +24 -1
  38. package/src/build.ts +64 -21
  39. package/src/commands/a11y.ts +6 -6
  40. package/src/commands/add.ts +11 -11
  41. package/src/commands/audit.ts +4 -4
  42. package/src/commands/baseline.ts +3 -3
  43. package/src/commands/build.ts +8 -8
  44. package/src/commands/compare.ts +20 -20
  45. package/src/commands/context.ts +16 -16
  46. package/src/commands/enhance.ts +36 -36
  47. package/src/commands/generate.ts +1 -1
  48. package/src/commands/graph.ts +274 -0
  49. package/src/commands/init.ts +1 -1
  50. package/src/commands/link/figma.ts +82 -82
  51. package/src/commands/link/index.ts +3 -3
  52. package/src/commands/link/storybook.ts +9 -9
  53. package/src/commands/list.ts +2 -2
  54. package/src/commands/reset.ts +15 -15
  55. package/src/commands/scan.ts +27 -27
  56. package/src/commands/storygen.ts +24 -24
  57. package/src/commands/validate.ts +2 -2
  58. package/src/commands/verify.ts +8 -8
  59. package/src/core/auto-props.ts +4 -4
  60. package/src/core/composition.test.ts +36 -36
  61. package/src/core/composition.ts +83 -20
  62. package/src/core/config.ts +6 -6
  63. package/src/core/{defineSegment.ts → defineFragment.ts} +16 -22
  64. package/src/core/discovery.ts +6 -6
  65. package/src/core/figma.ts +2 -2
  66. package/src/core/graph-extractor.test.ts +542 -0
  67. package/src/core/graph-extractor.ts +601 -0
  68. package/src/core/importAnalyzer.ts +6 -1
  69. package/src/core/index.ts +22 -23
  70. package/src/core/loader.ts +22 -22
  71. package/src/core/node.ts +5 -5
  72. package/src/core/parser.ts +31 -31
  73. package/src/core/previewLoader.ts +1 -1
  74. package/src/core/schema.ts +16 -16
  75. package/src/core/storyAdapter.test.ts +87 -87
  76. package/src/core/storyAdapter.ts +16 -16
  77. package/src/core/types.ts +21 -26
  78. package/src/diff.ts +22 -22
  79. package/src/index.ts +2 -2
  80. package/src/mcp/server.ts +80 -80
  81. package/src/migrate/__tests__/utils/utils.test.ts +3 -3
  82. package/src/migrate/bin.ts +4 -4
  83. package/src/migrate/converter.ts +16 -16
  84. package/src/migrate/index.ts +3 -3
  85. package/src/migrate/migrate.ts +3 -3
  86. package/src/migrate/parser.ts +8 -8
  87. package/src/migrate/report.ts +2 -2
  88. package/src/migrate/types.ts +4 -4
  89. package/src/screenshot.ts +22 -22
  90. package/src/service/__tests__/props-extractor.test.ts +15 -15
  91. package/src/service/analytics.ts +39 -39
  92. package/src/service/enhance/codebase-scanner.ts +1 -1
  93. package/src/service/enhance/index.ts +1 -1
  94. package/src/service/enhance/props-extractor.ts +2 -2
  95. package/src/service/enhance/types.ts +2 -2
  96. package/src/service/index.ts +2 -2
  97. package/src/service/metrics-store.ts +1 -1
  98. package/src/service/patch-generator.ts +1 -1
  99. package/src/setup.ts +52 -52
  100. package/src/shared/dev-server-client.ts +7 -7
  101. package/src/shared/fragment-loader.ts +59 -0
  102. package/src/shared/index.ts +1 -1
  103. package/src/shared/types.ts +4 -4
  104. package/src/static-viewer.ts +35 -35
  105. package/src/test/discovery.ts +6 -6
  106. package/src/test/index.ts +5 -5
  107. package/src/test/reporters/console.ts +1 -1
  108. package/src/test/reporters/junit.ts +1 -1
  109. package/src/test/runner.ts +7 -7
  110. package/src/test/types.ts +3 -3
  111. package/src/test/watch.ts +9 -9
  112. package/src/validators.ts +26 -26
  113. package/src/viewer/__tests__/render-utils.test.ts +28 -28
  114. package/src/viewer/__tests__/viewer-integration.test.ts +4 -4
  115. package/src/viewer/cli/health.ts +26 -26
  116. package/src/viewer/components/App.tsx +201 -103
  117. package/src/viewer/components/BottomPanel.tsx +17 -17
  118. package/src/viewer/components/CodePanel.tsx +3 -3
  119. package/src/viewer/components/CommandPalette.tsx +11 -11
  120. package/src/viewer/components/ComponentGraph.tsx +28 -28
  121. package/src/viewer/components/ComponentHeader.tsx +2 -2
  122. package/src/viewer/components/ContractPanel.tsx +6 -6
  123. package/src/viewer/components/FigmaEmbed.tsx +9 -9
  124. package/src/viewer/components/HealthDashboard.tsx +17 -17
  125. package/src/viewer/components/Icons.tsx +53 -1
  126. package/src/viewer/components/InteractionsPanel.tsx +2 -2
  127. package/src/viewer/components/IsolatedPreviewFrame.tsx +6 -6
  128. package/src/viewer/components/IsolatedRender.tsx +10 -10
  129. package/src/viewer/components/Layout.tsx +7 -3
  130. package/src/viewer/components/LeftSidebar.tsx +92 -114
  131. package/src/viewer/components/MultiViewportPreview.tsx +14 -14
  132. package/src/viewer/components/PreviewArea.tsx +11 -11
  133. package/src/viewer/components/PreviewFrameHost.tsx +77 -48
  134. package/src/viewer/components/PreviewToolbar.tsx +57 -10
  135. package/src/viewer/components/RightSidebar.tsx +9 -9
  136. package/src/viewer/components/Sidebar.tsx +17 -17
  137. package/src/viewer/components/StoryRenderer.tsx +2 -2
  138. package/src/viewer/components/TokenStylePanel.tsx +1 -1
  139. package/src/viewer/components/UsageSection.tsx +2 -2
  140. package/src/viewer/components/VariantMatrix.tsx +11 -11
  141. package/src/viewer/components/VariantRenderer.tsx +3 -3
  142. package/src/viewer/components/VariantTabs.tsx +2 -2
  143. package/src/viewer/components/ViewportSelector.tsx +56 -45
  144. package/src/viewer/components/_future/CreatePage.tsx +6 -6
  145. package/src/viewer/composition-renderer.ts +11 -11
  146. package/src/viewer/constants/ui.ts +4 -4
  147. package/src/viewer/entry.tsx +40 -40
  148. package/src/viewer/hooks/useFigmaIntegration.ts +1 -1
  149. package/src/viewer/hooks/usePreviewBridge.ts +5 -5
  150. package/src/viewer/hooks/useUrlState.ts +6 -6
  151. package/src/viewer/index.ts +2 -2
  152. package/src/viewer/intelligence/healthReport.ts +17 -17
  153. package/src/viewer/intelligence/styleDrift.ts +1 -1
  154. package/src/viewer/intelligence/usageScanner.ts +1 -1
  155. package/src/viewer/preview-frame.html +22 -13
  156. package/src/viewer/render-template.html +1 -1
  157. package/src/viewer/render-utils.ts +21 -21
  158. package/src/viewer/server.ts +18 -18
  159. package/src/viewer/styles/globals.css +42 -81
  160. package/src/viewer/utils/detectRelationships.ts +22 -22
  161. package/src/viewer/vite-plugin.ts +213 -213
  162. package/dist/chunk-6JBGU74P.js.map +0 -1
  163. package/dist/chunk-D35RGPAG.js.map +0 -1
  164. package/dist/chunk-F7ITZPDJ.js.map +0 -1
  165. package/dist/chunk-NWQ4CJOQ.js.map +0 -1
  166. package/dist/chunk-Q7GOHVOK.js.map +0 -1
  167. package/dist/chunk-RVRTRESS.js.map +0 -1
  168. package/dist/chunk-SSLQXHNX.js.map +0 -1
  169. package/dist/generate-7AF7WRVK.js.map +0 -1
  170. package/dist/scan-K6JNMCGM.js +0 -12
  171. package/dist/test-CJDNJTPZ.js.map +0 -1
  172. package/dist/viewer-R3Q6WAMJ.js.map +0 -1
  173. package/src/shared/segment-loader.ts +0 -59
  174. /package/dist/{core-SKRPJQZG.js.map → core-SFHPYR5H.js.map} +0 -0
  175. /package/dist/{scan-K6JNMCGM.js.map → scan-KQBKUS64.js.map} +0 -0
  176. /package/dist/{service-F3E4JJM7.js.map → service-ED2LNCTU.js.map} +0 -0
  177. /package/dist/{static-viewer-4LQZ5AGA.js.map → static-viewer-Q4F4QP5M.js.map} +0 -0
  178. /package/dist/{tokens-JAJABYXP.js.map → tokens-P2B7ZAM3.js.map} +0 -0
package/src/viewer/preview-frame.html CHANGED
@@ -4,12 +4,6 @@
4
4
  <meta charset="UTF-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
  <title>Fragment Preview</title>
7
- <link rel="preconnect" href="https://fonts.googleapis.com" />
8
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9
- <link
10
- href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
11
- rel="stylesheet"
12
- />
13
7
  <style>
14
8
  /* Reset and base styles for isolated preview */
15
9
  *, *::before, *::after {
@@ -19,27 +13,42 @@
19
13
  html, body {
20
14
  margin: 0;
21
15
  padding: 0;
22
- font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
16
+ font-family: var(--fui-font-sans, 'Geist Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
23
17
  -webkit-font-smoothing: antialiased;
24
18
  -moz-osx-font-smoothing: grayscale;
25
19
  width: 100%;
26
20
  height: 100%;
27
- overflow: auto;
21
+ overflow: hidden;
28
22
  }
29
23
 
30
24
  body {
31
- background: transparent;
25
+ background: var(--fui-bg-primary, #ffffff);
32
26
  min-height: 100%;
33
27
  }
34
28
 
35
29
  #preview-root {
36
30
  width: 100%;
37
- min-height: 100%;
31
+ min-height: 100vh;
38
32
  display: flex;
39
- align-items: center;
40
- justify-content: center;
33
+ align-items: flex-start;
34
+ justify-content: flex-start;
41
35
  padding: 24px;
42
36
  box-sizing: border-box;
37
+ overflow: auto;
38
+ }
39
+
40
+ body[data-preview-mode='centered'] #preview-root {
41
+ align-items: center;
42
+ justify-content: center;
43
+ }
44
+
45
+ body[data-preview-mode='full-bleed'] #preview-root {
46
+ padding: 0;
47
+ min-height: 100vh;
48
+ }
49
+
50
+ body[data-preview-mode='full-bleed'] #preview-root > * {
51
+ width: 100%;
43
52
  }
44
53
 
45
54
  /* Hide scrollbars but allow scrolling */
@@ -110,7 +119,7 @@
110
119
  }
111
120
  </style>
112
121
  </head>
113
- <body>
122
+ <body data-preview-mode="centered">
114
123
  <main>
115
124
  <h1 class="sr-only">Component Preview</h1>
116
125
  <div id="preview-root">
package/src/viewer/render-template.html CHANGED
@@ -3,7 +3,7 @@
3
3
  <head>
4
4
  <meta charset="UTF-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>Segments Render</title>
6
+ <title>Fragments Render</title>
7
7
  <link rel="preconnect" href="https://fonts.googleapis.com" />
8
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9
9
  <link
package/src/viewer/render-utils.ts CHANGED
@@ -15,7 +15,7 @@ export interface RenderRequest {
15
15
  };
16
16
  }
17
17
 
18
- export interface SegmentInfo {
18
+ export interface FragmentInfo {
19
19
  name: string;
20
20
  path: string;
21
21
  }
@@ -60,32 +60,32 @@ export function serializePropsToJsx(props: Record<string, unknown>): string {
60
60
  }
61
61
 
62
62
  /**
63
- * Find a segment by component name.
64
- * Returns the segment info if found, null otherwise.
63
+ * Find a fragment by component name.
64
+ * Returns the fragment info if found, null otherwise.
65
65
  */
66
- export function findSegmentByName(
66
+ export function findFragmentByName(
67
67
  componentName: string,
68
- segments: Array<{ path: string; segment: { meta: { name: string } } }>
69
- ): SegmentInfo | null {
70
- const match = segments.find(
71
- (s) => s.segment.meta.name.toLowerCase() === componentName.toLowerCase()
68
+ fragments: Array<{ path: string; fragment: { meta: { name: string } } }>
69
+ ): FragmentInfo | null {
70
+ const match = fragments.find(
71
+ (s) => s.fragment.meta.name.toLowerCase() === componentName.toLowerCase()
72
72
  );
73
73
 
74
74
  if (!match) return null;
75
75
 
76
76
  return {
77
- name: match.segment.meta.name,
77
+ name: match.fragment.meta.name,
78
78
  path: match.path,
79
79
  };
80
80
  }
81
81
 
82
82
  /**
83
- * Get list of available component names from loaded segments.
83
+ * Get list of available component names from loaded fragments.
84
84
  */
85
85
  export function getAvailableComponents(
86
- segments: Array<{ segment: { meta: { name: string } } }>
86
+ fragments: Array<{ fragment: { meta: { name: string } } }>
87
87
  ): string[] {
88
- return segments.map((s) => s.segment.meta.name).sort();
88
+ return fragments.map((s) => s.fragment.meta.name).sort();
89
89
  }
90
90
 
91
91
  /**
@@ -93,7 +93,7 @@ export function getAvailableComponents(
93
93
  * This script imports the component and renders it with the given props.
94
94
  */
95
95
  export function generateRenderScript(
96
- segmentPath: string,
96
+ fragmentPath: string,
97
97
  componentName: string,
98
98
  props: Record<string, unknown> = {}
99
99
  ): string {
@@ -112,20 +112,20 @@ export function generateRenderScript(
112
112
  import React from "react";
113
113
  import { createRoot } from "react-dom/client";
114
114
 
115
- // Import the segment to get the component
115
+ // Import the fragment to get the component
116
116
  async function render() {
117
117
  const root = document.getElementById("render-root");
118
118
 
119
119
  try {
120
- // Dynamic import of the segment file
121
- const segmentModule = await import("${segmentPath}");
122
- const segment = segmentModule.default;
120
+ // Dynamic import of the fragment file
121
+ const fragmentModule = await import("${fragmentPath}");
122
+ const fragment = fragmentModule.default;
123
123
 
124
- if (!segment || !segment.component) {
125
- throw new Error("Segment does not export a component");
124
+ if (!fragment || !fragment.component) {
125
+ throw new Error("Fragment does not export a component");
126
126
  }
127
127
 
128
- const Component = segment.component;
128
+ const Component = fragment.component;
129
129
 
130
130
  // Create React root and render
131
131
  const reactRoot = createRoot(root);
@@ -166,5 +166,5 @@ render();
166
166
  * This creates a unique ID that Vite can resolve.
167
167
  */
168
168
  export function generateRenderModuleId(componentName: string, requestId: string): string {
169
- return `virtual:segments-render-${componentName}-${requestId}`;
169
+ return `virtual:fragments-render-${componentName}-${requestId}`;
170
170
  }
package/src/viewer/server.ts CHANGED
@@ -1,13 +1,13 @@
1
1
  /**
2
- * Segments Dev Server
2
+ * Fragments Dev Server
3
3
  *
4
4
  * Runs a Vite dev server that:
5
5
  * 1. Uses the project's existing Vite/build configuration
6
6
  * 2. Has access to all project dependencies
7
7
  * 3. Can render actual components with proper styling
8
- * 4. Supports HMR for segment file changes
8
+ * 4. Supports HMR for fragment file changes
9
9
  *
10
- * This is the "Storybook-like" experience for Segments.
10
+ * This is the "Storybook-like" experience for Fragments.
11
11
  */
12
12
 
13
13
  import {
@@ -21,8 +21,8 @@ import react from "@vitejs/plugin-react";
21
21
  import { resolve, dirname, join } from "node:path";
22
22
  import { existsSync, realpathSync } from "node:fs";
23
23
  import { fileURLToPath } from "node:url";
24
- import { loadConfig, discoverSegmentFiles, discoverInstalledFragments } from "../core/node.js";
25
- import { segmentsPlugin } from "./vite-plugin.js";
24
+ import { loadConfig, discoverFragmentFiles, discoverInstalledFragments } from "../core/node.js";
25
+ import { fragmentsPlugin } from "./vite-plugin.js";
26
26
 
27
27
  const __dirname = dirname(fileURLToPath(import.meta.url));
28
28
  // At runtime, __dirname is dist/. Viewer assets live in src/viewer/.
@@ -34,7 +34,7 @@ const uiLibRoot = resolve(packagesRoot, "../libs/ui/src");
34
34
  export interface DevServerOptions {
35
35
  /** Port to run the server on */
36
36
  port?: number;
37
- /** Path to segments config file */
37
+ /** Path to fragments config file */
38
38
  configPath?: string;
39
39
  /** Open browser on start */
40
40
  open?: boolean;
@@ -43,7 +43,7 @@ export interface DevServerOptions {
43
43
  }
44
44
 
45
45
  /**
46
- * Create and start the Segments dev server.
46
+ * Create and start the Fragments dev server.
47
47
  *
48
48
  * The server runs WITHIN the project's context, meaning:
49
49
  * - All project dependencies are available
@@ -64,14 +64,14 @@ export async function createDevServer(
64
64
 
65
65
  console.log("\n🔧 Loading configuration...");
66
66
 
67
- // Load segments config
67
+ // Load fragments config
68
68
  const { config, configDir } = await loadConfig(configPath);
69
69
 
70
- // Discover segment files (local + installed packages)
71
- const segmentFiles = await discoverSegmentFiles(config, configDir);
70
+ // Discover fragment files (local + installed packages)
71
+ const fragmentFiles = await discoverFragmentFiles(config, configDir);
72
72
  const installedFiles = await discoverInstalledFragments(projectRoot);
73
- const allSegmentFiles = [...segmentFiles, ...installedFiles];
74
- console.log(`📦 Found ${segmentFiles.length} local + ${installedFiles.length} installed fragment file(s)`);
73
+ const allFragmentFiles = [...fragmentFiles, ...installedFiles];
74
+ console.log(`📦 Found ${fragmentFiles.length} local + ${installedFiles.length} installed fragment file(s)`);
75
75
 
76
76
  // Try to load project's Vite config
77
77
  let projectViteConfig: InlineConfig = {};
@@ -112,8 +112,8 @@ export async function createDevServer(
112
112
  })
113
113
  )];
114
114
 
115
- // Our Segments-specific configuration
116
- const segmentsConfig: InlineConfig = {
115
+ // Our Fragments-specific configuration
116
+ const fragmentsConfig: InlineConfig = {
117
117
  configFile: false, // Don't load config again
118
118
  root: projectRoot, // Run from PROJECT root
119
119
  base: "/",
@@ -131,9 +131,9 @@ export async function createDevServer(
131
131
  // React support (if not already in project config)
132
132
  ...(hasReactPlugin(projectViteConfig) ? [] : [react()]),
133
133
 
134
- // Segments plugins (array including SVGR)
135
- ...segmentsPlugin({
136
- segmentFiles: allSegmentFiles,
134
+ // Fragments plugins (array including SVGR)
135
+ ...fragmentsPlugin({
136
+ fragmentFiles: allFragmentFiles,
137
137
  config,
138
138
  projectRoot,
139
139
  }),
@@ -170,7 +170,7 @@ export async function createDevServer(
170
170
 
171
171
  // Merge project config with our config
172
172
  // Project config takes precedence for most things
173
- const mergedConfig = mergeConfig(projectViteConfig, segmentsConfig);
173
+ const mergedConfig = mergeConfig(projectViteConfig, fragmentsConfig);
174
174
 
175
175
  console.log("🚀 Starting dev server...\n");
176
176
 
package/src/viewer/styles/globals.css CHANGED
@@ -1,90 +1,50 @@
1
1
  /* ============================================
2
2
  * Fragments Viewer Theme System
3
3
  * ============================================
4
- * The viewer shell (sidebar, toolbar, panels) uses these variables.
5
- * These are INDEPENDENT from the UI library's --fui-* variables.
6
- *
7
- * The UI library components are rendered in the preview area which
8
- * has its own scoped --fui-* variables (see below).
4
+ * The viewer shell (sidebar, toolbar, panels) mirrors @fragments/ui
5
+ * tokens so previews and shell feel like the live docs experience.
9
6
  * ============================================ */
10
7
 
11
- /* Light mode (default) */
12
8
  :root {
13
- --bg-primary: #ffffff;
14
- --bg-secondary: #f2f2f2;
15
- --bg-tertiary: #f5f5f5;
16
- --bg-elevated: #ffffff;
17
- --bg-hover: rgba(0, 0, 0, 0.04);
18
- --bg-active: rgba(0, 0, 0, 0.08);
19
-
20
- --text-primary: #171717;
21
- --text-secondary: #525252;
22
- --text-tertiary: #a3a3a3;
23
- --text-muted: #d4d4d4;
24
-
25
- --border: rgba(0, 0, 0, 0.08);
26
- --border-subtle: rgba(0, 0, 0, 0.04);
27
- --border-strong: rgba(0, 0, 0, 0.12);
28
-
29
- --color-accent: #10a37f;
30
- --color-accent-hover: #0d8a6a;
31
- --color-accent-subtle: rgba(16, 163, 127, 0.1);
32
-
33
- --color-success: #10a37f;
34
- --color-success-bg: rgba(16, 163, 127, 0.1);
35
- --color-warning: #f59e0b;
36
- --color-warning-bg: rgba(245, 158, 11, 0.1);
37
- --color-danger: #ef4444;
38
- --color-danger-bg: rgba(239, 68, 68, 0.1);
39
- --color-info: #3b82f6;
40
- --color-info-bg: rgba(59, 130, 246, 0.1);
41
-
42
- --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
43
- --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
44
- --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
45
-
46
- --radius-sm: 6px;
47
- --radius-md: 8px;
48
- --radius-lg: 12px;
49
-
50
- --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
51
- --transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
52
- }
53
-
54
- /* Dark mode - applied when .dark class is on html */
55
- .dark {
56
- --bg-primary: #0d0d0d;
57
- --bg-secondary: #171717;
58
- --bg-tertiary: #1f1f1f;
59
- --bg-elevated: #1a1a1a;
60
- --bg-hover: rgba(255, 255, 255, 0.04);
61
- --bg-active: rgba(255, 255, 255, 0.08);
62
-
63
- --text-primary: #ececec;
64
- --text-secondary: #9a9a9a;
65
- --text-tertiary: #666666;
66
- --text-muted: #404040;
67
-
68
- --border: rgba(255, 255, 255, 0.08);
69
- --border-subtle: rgba(255, 255, 255, 0.04);
70
- --border-strong: rgba(255, 255, 255, 0.12);
71
-
72
- --color-accent: #10a37f;
73
- --color-accent-hover: #1eb894;
74
- --color-accent-subtle: rgba(16, 163, 127, 0.15);
75
-
76
- --color-success: #10a37f;
77
- --color-success-bg: rgba(16, 163, 127, 0.15);
78
- --color-warning: #f59e0b;
79
- --color-warning-bg: rgba(245, 158, 11, 0.15);
80
- --color-danger: #ef4444;
81
- --color-danger-bg: rgba(239, 68, 68, 0.15);
82
- --color-info: #60a5fa;
83
- --color-info-bg: rgba(96, 165, 250, 0.15);
84
-
85
- --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
86
- --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
87
- --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
9
+ --bg-primary: var(--fui-bg-primary, #ffffff);
10
+ --bg-secondary: var(--fui-bg-secondary, #f7f7f8);
11
+ --bg-tertiary: var(--fui-bg-tertiary, #f2f2f2);
12
+ --bg-elevated: var(--fui-bg-elevated, #ffffff);
13
+ --bg-hover: var(--fui-bg-hover, rgba(0, 0, 0, 0.06));
14
+ --bg-active: var(--fui-bg-active, rgba(0, 0, 0, 0.1));
15
+
16
+ --text-primary: var(--fui-text-primary, #171717);
17
+ --text-secondary: var(--fui-text-secondary, #525252);
18
+ --text-tertiary: var(--fui-text-tertiary, #8a8a8a);
19
+ --text-muted: var(--fui-text-tertiary, #8a8a8a);
20
+
21
+ --border: var(--fui-border, rgba(0, 0, 0, 0.1));
22
+ --border-subtle: var(--fui-border, rgba(0, 0, 0, 0.1));
23
+ --border-strong: var(--fui-border-strong, rgba(0, 0, 0, 0.16));
24
+
25
+ --color-accent: var(--fui-color-accent, #10a37f);
26
+ --color-accent-hover: var(--fui-color-accent-hover, #0d8a6a);
27
+ --color-accent-subtle: var(--fui-color-success-bg, rgba(16, 163, 127, 0.1));
28
+
29
+ --color-success: var(--fui-color-success, #10a37f);
30
+ --color-success-bg: var(--fui-color-success-bg, rgba(16, 163, 127, 0.1));
31
+ --color-warning: var(--fui-color-warning, #f59e0b);
32
+ --color-warning-bg: var(--fui-color-warning-bg, rgba(245, 158, 11, 0.1));
33
+ --color-danger: var(--fui-color-danger, #ef4444);
34
+ --color-danger-bg: var(--fui-color-danger-bg, rgba(239, 68, 68, 0.1));
35
+ --color-info: var(--fui-color-info, #3b82f6);
36
+ --color-info-bg: var(--fui-color-info-bg, rgba(59, 130, 246, 0.1));
37
+
38
+ --shadow-sm: var(--fui-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
39
+ --shadow-md: var(--fui-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.08));
40
+ --shadow-lg: var(--fui-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.12));
41
+
42
+ --radius-sm: var(--fui-radius-sm, 6px);
43
+ --radius-md: var(--fui-radius-md, 8px);
44
+ --radius-lg: var(--fui-radius-lg, 12px);
45
+
46
+ --transition-fast: var(--fui-transition-fast, 150ms ease);
47
+ --transition-normal: var(--fui-transition-normal, 200ms ease);
88
48
  }
89
49
 
90
50
  /* ============================================
@@ -105,6 +65,7 @@ html {
105
65
  }
106
66
 
107
67
  body {
68
+ font-family: var(--fui-font-sans, 'Geist Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
108
69
  background-color: var(--bg-primary);
109
70
  color: var(--text-primary);
110
71
  -webkit-font-smoothing: antialiased;
package/src/viewer/utils/detectRelationships.ts CHANGED
@@ -9,7 +9,7 @@
9
9
  */
10
10
 
11
11
  import { isValidElement, type ReactNode, type ReactElement, Children } from "react";
12
- import type { SegmentDefinition, ComponentRelation, RelationshipType } from "../../core/index.js";
12
+ import type { FragmentDefinition, ComponentRelation, RelationshipType } from "../../core/index.js";
13
13
 
14
14
  interface DetectedRelationship {
15
15
  component: string;
@@ -85,32 +85,32 @@ function collectComponentNames(
85
85
  * Get cached set of known component names
86
86
  */
87
87
  function getKnownComponents(
88
- allSegments: Array<{ path: string; segment: SegmentDefinition }>
88
+ allFragments: Array<{ path: string; fragment: FragmentDefinition }>
89
89
  ): Set<string> {
90
- // Invalidate cache if segment count changed
91
- if (!knownComponentsCache || knownComponentsCache.count !== allSegments.length) {
90
+ // Invalidate cache if fragment count changed
91
+ if (!knownComponentsCache || knownComponentsCache.count !== allFragments.length) {
92
92
  knownComponentsCache = {
93
- count: allSegments.length,
94
- set: new Set(allSegments.map(s => s.segment.meta.name)),
93
+ count: allFragments.length,
94
+ set: new Set(allFragments.map(s => s.fragment.meta.name)),
95
95
  };
96
96
  }
97
97
  return knownComponentsCache.set;
98
98
  }
99
99
 
100
100
  /**
101
- * Detect composition relationships from a segment's variants
101
+ * Detect composition relationships from a fragment's variants
102
102
  */
103
103
  export function detectCompositionRelationships(
104
- segment: SegmentDefinition,
105
- allSegments: Array<{ path: string; segment: SegmentDefinition }>
104
+ fragment: FragmentDefinition,
105
+ allFragments: Array<{ path: string; fragment: FragmentDefinition }>
106
106
  ): DetectedRelationship[] {
107
107
  const relationships: DetectedRelationship[] = [];
108
- const componentName = segment.meta.name;
109
- const knownComponents = getKnownComponents(allSegments);
108
+ const componentName = fragment.meta.name;
109
+ const knownComponents = getKnownComponents(allFragments);
110
110
  const usedComponents = new Set<string>();
111
111
 
112
112
  // Analyze each variant's render output
113
- for (const variant of segment.variants || []) {
113
+ for (const variant of fragment.variants || []) {
114
114
  try {
115
115
  const rendered = variant.render();
116
116
  const componentNames = collectComponentNames(rendered);
@@ -152,8 +152,8 @@ export function detectCompositionRelationships(
152
152
  * - Components share overlapping variant patterns (future enhancement)
153
153
  */
154
154
  export function detectSiblingRelationships(
155
- _segment: SegmentDefinition,
156
- _allSegments: Array<{ path: string; segment: SegmentDefinition }>
155
+ _fragment: FragmentDefinition,
156
+ _allFragments: Array<{ path: string; fragment: FragmentDefinition }>
157
157
  ): DetectedRelationship[] {
158
158
  // Disabled: Category-based sibling detection creates noise
159
159
  // Meaningful sibling relationships should be defined manually
@@ -174,8 +174,8 @@ export function detectSiblingRelationships(
174
174
  * but that requires NLP/semantic analysis which is out of scope.
175
175
  */
176
176
  export function detectAlternativeRelationships(
177
- _segment: SegmentDefinition,
178
- _allSegments: Array<{ path: string; segment: SegmentDefinition }>
177
+ _fragment: FragmentDefinition,
178
+ _allFragments: Array<{ path: string; fragment: FragmentDefinition }>
179
179
  ): DetectedRelationship[] {
180
180
  // Disabled: Pattern-based alternative detection is too weak
181
181
  // Meaningful alternatives should be defined manually with clear rationale
@@ -187,10 +187,10 @@ export function detectAlternativeRelationships(
187
187
  * Uses caching to avoid expensive render() calls on subsequent views
188
188
  */
189
189
  export function detectAllRelationships(
190
- segment: SegmentDefinition,
191
- allSegments: Array<{ path: string; segment: SegmentDefinition }>
190
+ fragment: FragmentDefinition,
191
+ allFragments: Array<{ path: string; fragment: FragmentDefinition }>
192
192
  ): DetectedRelationship[] {
193
- const cacheKey = segment.meta.name;
193
+ const cacheKey = fragment.meta.name;
194
194
  const now = Date.now();
195
195
 
196
196
  // Check cache first
@@ -200,9 +200,9 @@ export function detectAllRelationships(
200
200
  }
201
201
 
202
202
  const all = [
203
- ...detectCompositionRelationships(segment, allSegments),
204
- ...detectSiblingRelationships(segment, allSegments),
205
- ...detectAlternativeRelationships(segment, allSegments),
203
+ ...detectCompositionRelationships(fragment, allFragments),
204
+ ...detectSiblingRelationships(fragment, allFragments),
205
+ ...detectAlternativeRelationships(fragment, allFragments),
206
206
  ];
207
207
 
208
208
  // Deduplicate by component name, keeping highest confidence