@fragments-sdk/cli 0.7.0 → 0.7.2

package/src/viewer/components/VariantMatrix.tsx

@@ -12,7 +12,7 @@
 
 import { useState, useMemo, useRef, useCallback } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import type { SegmentVariant } from "../../core/index.js";
+import type { FragmentVariant } from "../../core/index.js";
 import { ErrorBoundary } from "./ErrorBoundary.js";
 import { StoryRenderer, LoaderIndicator } from "./StoryRenderer.js";
 import { IsolatedPreviewFrame } from "./IsolatedPreviewFrame.js";
@@ -21,11 +21,11 @@ import { getBackgroundStyle, type BackgroundOption } from "./PreviewToolbar.js";
 
 interface VariantMatrixProps {
   /** All variants to display */
-  variants: SegmentVariant[];
+  variants: FragmentVariant[];
   /** Component name for error display */
   componentName: string;
-  /** Segment path for iframe rendering */
-  segmentPath: string;
+  /** Fragment path for iframe rendering */
+  fragmentPath: string;
   /** Current zoom level */
   zoom: number;
   /** Preview theme */
@@ -60,7 +60,7 @@ const VIRTUALIZATION_THRESHOLD = 12;
 export function VariantMatrix({
   variants,
   componentName,
-  segmentPath,
+  fragmentPath,
   zoom,
   previewTheme,
   background,
@@ -204,7 +204,7 @@ export function VariantMatrix({
                           variant={variant}
                           index={index}
                           componentName={componentName}
-                          segmentPath={segmentPath}
+                          fragmentPath={fragmentPath}
                           scale={effectiveScale}
                           minHeight={gridConfig.minHeight}
                           previewTheme={previewTheme}
@@ -236,7 +236,7 @@ export function VariantMatrix({
                 variant={variant}
                 index={index}
                 componentName={componentName}
-                segmentPath={segmentPath}
+                fragmentPath={fragmentPath}
                 scale={effectiveScale}
                 minHeight={gridConfig.minHeight}
                 previewTheme={previewTheme}
@@ -256,10 +256,10 @@ export function VariantMatrix({
 }
 
 interface VariantCardProps {
-  variant: SegmentVariant;
+  variant: FragmentVariant;
   index: number;
   componentName: string;
-  segmentPath: string;
+  fragmentPath: string;
   scale: number;
   minHeight: string;
   previewTheme: "light" | "dark";
@@ -275,7 +275,7 @@ function VariantCard({
   variant,
   index,
   componentName,
-  segmentPath,
+  fragmentPath,
   scale,
   minHeight,
   previewTheme,
@@ -378,7 +378,7 @@ function VariantCard({
       >
         {useIframeIsolation ? (
           <IsolatedPreviewFrame
-            segmentPath={segmentPath}
+            fragmentPath={fragmentPath}
             variantName={variant.name}
             theme={previewTheme}
             width="100%"

package/src/viewer/components/VariantRenderer.tsx

@@ -1,11 +1,11 @@
 // @ts-nocheck
 import React, { type ReactNode, Suspense } from 'react';
-import type { SegmentVariant } from '../../core/index.js';
+import type { FragmentVariant } from '../../core/index.js';
 import { ErrorBoundary } from './ErrorBoundary.js';
 
 interface VariantRendererProps {
   /** The variant to render */
-  variant: SegmentVariant;
+  variant: FragmentVariant;
 
   /** Optional loading fallback for async components */
   loadingFallback?: ReactNode;
@@ -54,7 +54,7 @@ export function VariantRenderer({
 
 interface VariantGridProps {
   /** Variants to render */
-  variants: SegmentVariant[];
+  variants: FragmentVariant[];
 
   /** Number of columns in the grid */
   columns?: number;

package/src/viewer/components/VariantTabs.tsx

@@ -1,9 +1,9 @@
 import { Tabs } from '@fragments/ui';
-import type { SegmentVariant } from '../../core/index.js';
+import type { FragmentVariant } from '../../core/index.js';
 import { PlayIcon } from './Icons.js';
 
 interface VariantTabsProps {
-  variants: SegmentVariant[];
+  variants: FragmentVariant[];
   activeIndex: number;
   onSelect: (index: number) => void;
 }

package/src/viewer/components/_future/CreatePage.tsx

@@ -158,7 +158,7 @@ export function CreatePage() {
 
   const generateCssVariables = () => {
     const palette = generateColorScheme(primaryColor, colorSchemeType);
-    let css = `/* ${formValues.projectName} - Generated by Segments */
+    let css = `/* ${formValues.projectName} - Generated by Fragments */
 :root {
   /* Primary Colors */
   --color-primary: ${palette[0]};
@@ -209,7 +209,7 @@ ${currentPalette.map((c, i) => `  --palette-${i + 1}: ${c};`).join('\n')}
   };
 
   const generateTailwindConfig = () => {
-    return `// tailwind.config.js - Generated by Segments
+    return `// tailwind.config.js - Generated by Fragments
 /** @type {import('tailwindcss').Config} */
 export default {
   darkMode: 'class',
@@ -707,9 +707,9 @@ ${currentPalette.map((c, i) => `        palette${i + 1}: '${c}',`).join('\n')}
                 <h3 className="text-sm font-medium text-primary mb-2">Quick Start</h3>
                 <div className="flex items-center gap-2 p-3 rounded-lg bg-[--bg-tertiary] font-mono text-sm">
                   <span className="text-tertiary">$</span>
-                  <code className="text-primary flex-1">npx segment-ui init {formValues.projectName}</code>
+                  <code className="text-primary flex-1">npx fragment-ui init {formValues.projectName}</code>
                   <button
-                    onClick={() => navigator.clipboard.writeText(`npx segment-ui init ${formValues.projectName}`)}
+                    onClick={() => navigator.clipboard.writeText(`npx fragment-ui init ${formValues.projectName}`)}
                     className="px-2 py-1 text-xs rounded bg-[--bg-hover] text-secondary hover:text-primary transition-colors"
                   >
                     Copy
@@ -752,7 +752,7 @@ ${currentPalette.map((c, i) => `        palette${i + 1}: '${c}',`).join('\n')}
               {/* Config JSON */}
               <div>
                 <div className="flex items-center justify-between mb-2">
-                  <h3 className="text-sm font-medium text-primary">segment.config.json</h3>
+                  <h3 className="text-sm font-medium text-primary">fragment.config.json</h3>
                   <button
                     onClick={() => navigator.clipboard.writeText(generateExportConfig())}
                     className="px-2 py-1 text-xs rounded bg-[--bg-hover] text-secondary hover:text-primary transition-colors"
@@ -779,7 +779,7 @@ ${currentPalette.map((c, i) => `        palette${i + 1}: '${c}',`).join('\n')}
                   const url = URL.createObjectURL(blob);
                   const a = document.createElement('a');
                   a.href = url;
-                  a.download = 'segment.config.json';
+                  a.download = 'fragment.config.json';
                   a.click();
                 }}
                 className="px-4 py-2 text-sm font-medium rounded-lg text-white transition-colors"

package/src/viewer/composition-renderer.ts

@@ -9,9 +9,9 @@
 import type { ComponentNode } from "./jsx-parser.js";
 
 /**
- * Segment file information for component lookup
+ * Fragment file information for component lookup
  */
-export interface SegmentFileInfo {
+export interface FragmentFileInfo {
   absolutePath: string;
   relativePath: string;
   componentName: string;
@@ -23,7 +23,7 @@ export interface SegmentFileInfo {
 export interface CompositionRenderOptions {
   /** The parsed component tree */
   tree: ComponentNode | ComponentNode[];
-  /** Map of component names to their segment file paths */
+  /** Map of component names to their fragment file paths */
   componentPaths: Map<string, string>;
   /** Optional theme ('light' or 'dark') */
   theme?: "light" | "dark";
@@ -85,9 +85,9 @@ ${imports}
     for (const item of loadedComponents) {
       if (item && item.mod) {
         // Handle both default export and named component export
-        const segment = item.mod.default;
-        if (segment && segment.component) {
-          C[item.name] = segment.component;
+        const fragment = item.mod.default;
+        if (fragment && fragment.component) {
+          C[item.name] = fragment.component;
         } else if (typeof item.mod.default === "function") {
           C[item.name] = item.mod.default;
         }
@@ -312,20 +312,20 @@ function serializeValue(value: unknown): string {
 }
 
 /**
- * Build a map of component names to their segment file paths
+ * Build a map of component names to their fragment file paths
  */
 export function buildComponentPathMap(
   components: string[],
-  segments: Array<{ path: string; name: string; absolutePath: string }>
+  fragments: Array<{ path: string; name: string; absolutePath: string }>
 ): Map<string, string> {
   const map = new Map<string, string>();
 
   for (const component of components) {
-    const segment = segments.find(
+    const fragment = fragments.find(
       (s) => s.name.toLowerCase() === component.toLowerCase()
     );
-    if (segment) {
-      map.set(component, segment.absolutePath);
+    if (fragment) {
+      map.set(component, fragment.absolutePath);
     }
   }
 

package/src/viewer/entry.tsx

@@ -116,7 +116,7 @@ class AppErrorBoundary extends Component<{ children: ReactNode }, { hasError: bo
             Check the browser console for more details. Common causes:
           </p>
           <ul style={{ color: '#6b7280', marginTop: '8px', paddingLeft: '20px', fontSize: '13px' }}>
-            <li>Syntax errors in segment or component files</li>
+            <li>Syntax errors in fragment or component files</li>
             <li>Missing or undefined imports</li>
             <li>Components that crash during render</li>
             <li>Invalid props passed to components</li>
@@ -132,56 +132,56 @@ class AppErrorBoundary extends Component<{ children: ReactNode }, { hasError: bo
 // Declare global types
 declare global {
   interface Window {
-    __SEGMENTS__?: Array<{
+    __FRAGMENTS__?: Array<{
       path: string;
-      segment: import("../core/index.js").SegmentDefinition;
+      fragment: import("../core/index.js").FragmentDefinition;
     }>;
-    __SEGMENTS_CONFIG__?: import("../core/index.js").SegmentsConfig;
-    __SEGMENTS_ERROR__?: string;
+    __FRAGMENTS_CONFIG__?: import("../core/index.js").FragmentsConfig;
+    __FRAGMENTS_ERROR__?: string;
   }
 }
 
-type SegmentItem = {
+type FragmentItem = {
   path: string;
-  segment: import("../core/index.js").SegmentDefinition;
+  fragment: import("../core/index.js").FragmentDefinition;
 };
 
-// Initialize segments from window or empty array
-let segments: SegmentItem[] = window.__SEGMENTS__ ?? [];
-let loadError: string | null = window.__SEGMENTS_ERROR__ ?? null;
+// Initialize fragments from window or empty array
+let fragments: FragmentItem[] = window.__FRAGMENTS__ ?? [];
+let loadError: string | null = window.__FRAGMENTS_ERROR__ ?? null;
 let appRoot: Root | null = null;
 
 // Filter helper
-function filterValidSegments(items: SegmentItem[]): SegmentItem[] {
-  return items.filter(s => s && s.segment && s.segment.meta);
+function filterValidFragments(items: FragmentItem[]): FragmentItem[] {
+  return items.filter(s => s && s.fragment && s.fragment.meta);
 }
 
 // Async loader for virtual module (runs after initial render)
-async function loadSegmentsFromVirtualModule(): Promise<void> {
-  if (segments.length > 0 || loadError) {
-    // Already have segments or error from window
+async function loadFragmentsFromVirtualModule(): Promise<void> {
+  if (fragments.length > 0 || loadError) {
+    // Already have fragments or error from window
     return;
   }
 
   try {
     // @ts-expect-error Virtual module
     const virtualModule = await import("virtual:fragments");
-    // Wait for lazy-loaded segments
-    if (virtualModule.segmentsPromise) {
-      segments = await virtualModule.segmentsPromise;
+    // Wait for lazy-loaded fragments
+    if (virtualModule.fragmentsPromise) {
+      fragments = await virtualModule.fragmentsPromise;
     } else {
-      segments = virtualModule.segments;
+      fragments = virtualModule.fragments;
     }
-    segments = filterValidSegments(segments);
+    fragments = filterValidFragments(fragments);
   } catch (e) {
     const error = e as Error;
-    loadError = error.message || "Failed to load segments";
+    loadError = error.message || "Failed to load fragments";
     console.error("[Fragments] Failed to load:", error);
   }
 }
 
-// Filter initial segments
-segments = filterValidSegments(segments);
+// Filter initial fragments
+fragments = filterValidFragments(fragments);
 
 // Error display component
 function ErrorDisplay({ error }: { error: string }) {
@@ -193,7 +193,7 @@ function ErrorDisplay({ error }: { error: string }) {
       margin: '0 auto',
     }}>
       <h1 style={{ color: '#dc2626', marginBottom: '16px' }}>
-        Failed to Load Segments
+        Failed to Load Fragments
       </h1>
       <pre style={{
         background: '#fef2f2',
@@ -212,7 +212,7 @@ function ErrorDisplay({ error }: { error: string }) {
         Check the console for more details. Common issues:
       </p>
       <ul style={{ color: '#6b7280', marginTop: '8px', paddingLeft: '20px' }}>
-        <li>Segment files have syntax errors</li>
+        <li>Fragment files have syntax errors</li>
         <li>Components are not exported correctly</li>
         <li>Missing dependencies</li>
       </ul>
@@ -226,11 +226,11 @@ if (rootElement) {
   appRoot = createRoot(rootElement);
 
   const renderApp = (showSkeleton = false) => {
-    const currentSegments = window.__SEGMENTS__ ?? segments;
-    const currentError = loadError || window.__SEGMENTS_ERROR__;
+    const currentFragments = window.__FRAGMENTS__ ?? fragments;
+    const currentError = loadError || window.__FRAGMENTS_ERROR__;
 
     // Show skeleton while loading
-    if (showSkeleton && currentSegments.length === 0 && !currentError) {
+    if (showSkeleton && currentFragments.length === 0 && !currentError) {
       appRoot?.render(
         <ThemeProvider>
           <AppSkeleton />
@@ -239,8 +239,8 @@ if (rootElement) {
       return;
     }
 
-    // Show error if we have one and no valid segments
-    if (currentError && currentSegments.length === 0) {
+    // Show error if we have one and no valid fragments
+    if (currentError && currentFragments.length === 0) {
       appRoot?.render(<ErrorDisplay error={currentError} />);
       return;
     }
@@ -249,30 +249,30 @@ if (rootElement) {
       <ThemeProvider>
         <ToastProvider position="bottom-right" duration={3000}>
           <AppErrorBoundary>
-            <App segments={currentSegments} />
+            <App fragments={currentFragments} />
           </AppErrorBoundary>
         </ToastProvider>
       </ThemeProvider>
     );
   };
 
-  // Show skeleton immediately if no segments yet
-  if (segments.length === 0 && !loadError) {
+  // Show skeleton immediately if no fragments yet
+  if (fragments.length === 0 && !loadError) {
     renderApp(true);
 
-    // Load segments asynchronously and re-render
-    loadSegmentsFromVirtualModule().then(() => {
+    // Load fragments asynchronously and re-render
+    loadFragmentsFromVirtualModule().then(() => {
       renderApp(false);
     });
   } else {
-    // We have segments from window, render immediately
+    // We have fragments from window, render immediately
     renderApp(false);
   }
 
-  // Listen for HMR updates from Segments plugin
-  window.addEventListener("segments:update", () => {
+  // Listen for HMR updates from Fragments plugin
+  window.addEventListener("fragments:update", () => {
     console.log("[Fragments] Refreshing viewer...");
-    // Re-render with updated segments
+    // Re-render with updated fragments
     renderApp(false);
   });
 }
@@ -285,7 +285,7 @@ if (import.meta.hot) {
 
   // Subscribe to a11y invalidation events from Vite plugin
   // @ts-expect-error Vite HMR types
-  import.meta.hot.on("segments:a11y-invalidate", (data: {
+  import.meta.hot.on("fragments:a11y-invalidate", (data: {
     components: string[];
     file: string;
     timestamp: number;

package/src/viewer/hooks/useFigmaIntegration.ts

@@ -30,7 +30,7 @@ export function useFigmaIntegration(options: UseFigmaIntegrationOptions = {}) {
     setFigmaStyles({ status: 'loading' });
 
     try {
-      const response = await fetch('/segments/figma-styles', {
+      const response = await fetch('/fragments/figma-styles', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ figmaUrl }),

package/src/viewer/hooks/usePreviewBridge.ts

@@ -12,7 +12,7 @@ import { useRef, useEffect, useCallback, useState, type RefObject } from 'react'
  */
 export type ParentMessage =
   | { type: 'init'; frameId: string }
-  | { type: 'render'; segmentPath: string; variantName: string; props?: Record<string, unknown> }
+  | { type: 'render'; fragmentPath: string; variantName: string; props?: Record<string, unknown> }
   | { type: 'theme'; theme: 'light' | 'dark' }
   | { type: 'resize'; width: number; height: number };
 
@@ -161,7 +161,7 @@ export function usePreviewBridge(iframeRef: RefObject<HTMLIFrameElement | null>)
    * Send a render request to the iframe
    */
   const render = useCallback((
-    segmentPath: string,
+    fragmentPath: string,
     variantName: string,
     props?: Record<string, unknown>
   ) => {
@@ -180,7 +180,7 @@ export function usePreviewBridge(iframeRef: RefObject<HTMLIFrameElement | null>)
     setIsRendering(true);
     setLastError(null);
 
-    sendMessage({ type: 'render', segmentPath, variantName, props });
+    sendMessage({ type: 'render', fragmentPath, variantName, props });
 
     // Set timeout
     const timeoutId = setTimeout(() => {
@@ -242,7 +242,7 @@ export function usePreviewBridge(iframeRef: RefObject<HTMLIFrameElement | null>)
  */
 export function useFrameBridge() {
   const [renderRequest, setRenderRequest] = useState<{
-    segmentPath: string;
+    fragmentPath: string;
     variantName: string;
     props?: Record<string, unknown>;
   } | null>(null);
@@ -273,7 +273,7 @@ export function useFrameBridge() {
       switch (message.type) {
         case 'render':
           setRenderRequest({
-            segmentPath: message.segmentPath,
+            fragmentPath: message.fragmentPath,
             variantName: message.variantName,
             props: message.props,
           });

package/src/viewer/hooks/useUrlState.ts

@@ -290,20 +290,20 @@ export function useUrlState() {
 }
 
 /**
- * Find a segment by name or path
- * Generic to preserve the full type of the segment
+ * Find a fragment by name or path
+ * Generic to preserve the full type of the fragment
  */
-export function findSegmentByName<T extends { path: string; segment: { meta: { name: string } } }>(
-  segments: T[],
+export function findFragmentByName<T extends { path: string; fragment: { meta: { name: string } } }>(
+  fragments: T[],
   nameOrPath: string
 ): T | undefined {
   // Try exact path match first
-  const byPath = segments.find((s) => s.path === nameOrPath);
+  const byPath = fragments.find((s) => s.path === nameOrPath);
   if (byPath) return byPath;
 
   // Try name match (case-insensitive)
   const nameLower = nameOrPath.toLowerCase();
-  return segments.find((s) => s.segment.meta.name.toLowerCase() === nameLower);
+  return fragments.find((s) => s.fragment.meta.name.toLowerCase() === nameLower);
 }
 
 /**

package/src/viewer/index.ts

@@ -3,8 +3,8 @@ export { createDevServer } from "./server.js";
 export type { DevServerOptions } from "./server.js";
 
 // Vite Plugin
-export { segmentsPlugin } from "./vite-plugin.js";
-export type { SegmentsPluginOptions } from "./vite-plugin.js";
+export { fragmentsPlugin } from "./vite-plugin.js";
+export type { FragmentsPluginOptions } from "./vite-plugin.js";
 
 // Note: Viewer components (App, Layout, etc.) are NOT exported here.
 // They use @fragments/ui which is a Vite-only alias and can't be resolved by Node.js.

package/src/viewer/intelligence/healthReport.ts

@@ -3,7 +3,7 @@
  * Aggregates usage, drift, and documentation data into a comprehensive health report
  */
 
-import type { SegmentDefinition } from '../../core/index.js';
+import type { FragmentDefinition } from '../../core/index.js';
 import type { FullScanResult, UsageScanResult } from './usageScanner.js';
 import type { DriftReport, DriftSummary, FullDriftResult } from './styleDrift.js';
 import { aggregateDriftReports, getWorstOffenders } from './styleDrift.js';
@@ -66,8 +66,8 @@ export interface HealthReport {
 }
 
 export interface HealthReportOptions {
-  /** Segments to analyze */
-  segments: Array<{ path: string; segment: SegmentDefinition }>;
+  /** Fragments to analyze */
+  fragments: Array<{ path: string; fragment: FragmentDefinition }>;
   /** Usage scan results (optional) */
   usageScan?: FullScanResult;
   /** Drift reports (optional) */
@@ -95,10 +95,10 @@ function toGrade(score: number): 'A' | 'B' | 'C' | 'D' | 'F' {
  * Calculate usage statistics from scan results
  */
 function calculateUsageStats(
-  segments: Array<{ path: string; segment: SegmentDefinition }>,
+  fragments: Array<{ path: string; fragment: FragmentDefinition }>,
   usageScan?: FullScanResult
 ): UsageStats {
-  const allComponentNames = segments.map((s) => s.segment.meta.name);
+  const allComponentNames = fragments.map((s) => s.fragment.meta.name);
 
   if (!usageScan) {
     return {
@@ -167,27 +167,27 @@ function calculateDriftStats(driftReports?: DriftReport[]): StyleDriftStats {
 }
 
 /**
- * Calculate documentation statistics from segments
+ * Calculate documentation statistics from fragments
  */
 function calculateDocumentationStats(
-  segments: Array<{ path: string; segment: SegmentDefinition }>
+  fragments: Array<{ path: string; fragment: FragmentDefinition }>
 ): DocumentationStats {
   const documented: string[] = [];
   const undocumented: string[] = [];
   const missingDescriptions: string[] = [];
   const missingUsage: string[] = [];
 
-  for (const { segment } of segments) {
-    const name = segment.meta.name;
+  for (const { fragment } of fragments) {
+    const name = fragment.meta.name;
 
     // Check for description
-    const hasDescription = segment.meta.description && segment.meta.description.trim().length > 10;
+    const hasDescription = fragment.meta.description && fragment.meta.description.trim().length > 10;
 
     // Check for usage guidelines
-    const hasUsage = segment.usage && (segment.usage.when.length > 0 || segment.usage.whenNot.length > 0);
+    const hasUsage = fragment.usage && (fragment.usage.when.length > 0 || fragment.usage.whenNot.length > 0);
 
     // Check for variants
-    const hasVariants = segment.variants && segment.variants.length > 0;
+    const hasVariants = fragment.variants && fragment.variants.length > 0;
 
     if (hasDescription && hasVariants) {
       documented.push(name);
@@ -204,8 +204,8 @@ function calculateDocumentationStats(
     }
   }
 
-  const documentationRate = segments.length > 0
-    ? Math.round((documented.length / segments.length) * 100)
+  const documentationRate = fragments.length > 0
+    ? Math.round((documented.length / fragments.length) * 100)
     : 0;
 
   return {
@@ -362,11 +362,11 @@ function calculateOverallScore(
  * Generate a comprehensive health report
  */
 export function generateHealthReport(options: HealthReportOptions): HealthReport {
-  const { segments, usageScan, driftReports, tokenData } = options;
+  const { fragments, usageScan, driftReports, tokenData } = options;
 
-  const usage = calculateUsageStats(segments, usageScan);
+  const usage = calculateUsageStats(fragments, usageScan);
   const styleDrift = calculateDriftStats(driftReports);
-  const documentation = calculateDocumentationStats(segments);
+  const documentation = calculateDocumentationStats(fragments);
   const tokens = calculateTokenStats(tokenData);
 
   const overallScore = calculateOverallScore(usage, styleDrift, documentation, tokens);

package/src/viewer/intelligence/styleDrift.ts

@@ -3,7 +3,7 @@
  * Analyzes style drift between Figma designs and rendered components
  */
 
-import type { SegmentDefinition, DesignToken } from '../../core/index.js';
+import type { FragmentDefinition, DesignToken } from '../../core/index.js';
 
 export type DriftSeverity = 'high' | 'medium' | 'low';
 

package/src/viewer/intelligence/usageScanner.ts

@@ -94,7 +94,7 @@ function findFiles(
     } else if (entry.isFile() && extensions.some((ext) => entry.name.endsWith(ext))) {
       // Skip test and story files
       if (entry.name.includes('.test.') || entry.name.includes('.spec.') ||
-          entry.name.includes('.stories.') || entry.name.includes('.segment.')) {
+          entry.name.includes('.stories.') || entry.name.includes('.fragment.')) {
         continue;
       }
       files.push(fullPath);

package/src/viewer/render-template.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Segments Render</title>
+    <title>Fragments Render</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link