@fragments-sdk/cli 0.9.0 → 0.9.1

package/src/viewer/components/FragmentEditor.tsx

@@ -1,6 +1,7 @@
 import { useState, useCallback } from "react";
 import { useForm, useFieldArray, Controller } from "react-hook-form";
 import type { Fragment, FragmentUsage, FragmentMeta } from "../../core/index.js";
+import { Box, Text, Button, Stack } from "@fragments-sdk/ui";
 import { ChevronDownIcon } from "./Icons.js";
 
 interface FragmentEditorProps {
@@ -50,32 +51,6 @@ const inputStyle: React.CSSProperties = {
   boxSizing: 'border-box',
 };
 
-const labelStyle: React.CSSProperties = {
-  display: 'block',
-  fontSize: '12px',
-  fontWeight: 500,
-  color: 'var(--text-secondary)',
-  marginBottom: '6px',
-};
-
-const removeButtonStyle: React.CSSProperties = {
-  padding: '0 8px',
-  color: 'var(--text-secondary)',
-  background: 'none',
-  border: 'none',
-  cursor: 'pointer',
-  fontSize: '16px',
-};
-
-const addButtonStyle: React.CSSProperties = {
-  fontSize: '12px',
-  color: 'var(--color-accent)',
-  background: 'none',
-  border: 'none',
-  cursor: 'pointer',
-  padding: 0,
-};
-
 export function FragmentEditor({
   componentName,
   fragment,
@@ -196,20 +171,20 @@ export function FragmentEditor({
       style={{ height: '100%', display: 'flex', flexDirection: 'column', background: 'var(--bg-primary)' }}
     >
       {/* Header */}
-      <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--border)', background: 'var(--bg-secondary)' }}>
-        <h3 style={{ fontSize: '14px', fontWeight: 600, color: 'var(--text-primary)', margin: 0 }}>Fragment Editor</h3>
-        <p style={{ fontSize: '12px', color: 'var(--text-secondary)', marginTop: '2px', marginBottom: 0 }}>
+      <Box paddingX="md" paddingY="sm" borderBottom background="secondary">
+        <Text as="h3" size="sm" weight="semibold" style={{ margin: 0 }}>Fragment Editor</Text>
+        <Text size="xs" color="secondary" style={{ marginTop: '2px' }}>
           Enrich {componentName} with metadata
-        </p>
-      </div>
+        </Text>
+      </Box>
 
       {/* Scrollable content */}
-      <div style={{ flex: 1, overflowY: 'auto' }}>
+      <Box overflow="auto" style={{ flex: 1 }}>
         {/* Basic Info */}
-        <div style={{ padding: '16px', borderBottom: '1px solid var(--border)' }}>
-          <label style={labelStyle}>
+        <Box padding="md" borderBottom>
+          <Text as="label" size="xs" weight="medium" color="secondary" style={{ display: 'block', marginBottom: '6px' }}>
             Description
-          </label>
+          </Text>
           <textarea
             {...register("description")}
             rows={3}
@@ -219,7 +194,7 @@ export function FragmentEditor({
             }}
             placeholder="Brief description of the component's purpose..."
           />
-        </div>
+        </Box>
 
         {/* Usage Section */}
         <Section
@@ -229,44 +204,47 @@ export function FragmentEditor({
         >
           {/* When to Use */}
           <div style={{ marginBottom: '16px' }}>
-            <label style={{ ...labelStyle, marginBottom: '8px' }}>
+            <Text as="label" size="xs" weight="medium" color="secondary" style={{ display: 'block', marginBottom: '8px' }}>
               When to Use
-            </label>
-            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+            </Text>
+            <Stack gap="sm">
               {whenFields.map((field, index) => (
-                <div key={field.id} style={{ display: 'flex', gap: '8px' }}>
+                <Stack key={field.id} direction="row" gap="sm">
                   <input
                     {...register(`usage.when.${index}` as const)}
                     style={{ ...inputStyle, flex: 1 }}
                     placeholder="Scenario..."
                   />
-                  <button
+                  <Button
                     type="button"
+                    variant="ghost"
+                    size="sm"
                     onClick={() => removeWhen(index)}
-                    style={removeButtonStyle}
                   >
                     &times;
-                  </button>
-                </div>
+                  </Button>
+                </Stack>
               ))}
-              <button
+              <Button
                 type="button"
+                variant="ghost"
+                size="sm"
                 onClick={() => appendWhen("")}
-                style={addButtonStyle}
+                style={{ padding: 0, alignSelf: 'flex-start' }}
               >
                 + Add scenario
-              </button>
-            </div>
+              </Button>
+            </Stack>
           </div>
 
           {/* Do Not */}
           <div>
-            <label style={{ ...labelStyle, marginBottom: '8px' }}>
+            <Text as="label" size="xs" weight="medium" color="secondary" style={{ display: 'block', marginBottom: '8px' }}>
               Do Not
-            </label>
-            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+            </Text>
+            <Stack gap="sm">
               {doNotFields.map((field, index) => (
-                <div key={field.id} style={{ display: 'flex', gap: '8px' }}>
+                <Stack key={field.id} direction="row" gap="sm">
                   <input
                     {...register(`usage.doNot.${index}.text` as const)}
                     style={{ ...inputStyle, flex: 1 }}
@@ -277,23 +255,26 @@ export function FragmentEditor({
                     style={{ ...inputStyle, width: '128px' }}
                     placeholder="Instead..."
                   />
-                  <button
+                  <Button
                     type="button"
+                    variant="ghost"
+                    size="sm"
                     onClick={() => removeDoNot(index)}
-                    style={removeButtonStyle}
                   >
                     &times;
-                  </button>
-                </div>
+                  </Button>
+                </Stack>
               ))}
-              <button
+              <Button
                 type="button"
+                variant="ghost"
+                size="sm"
                 onClick={() => appendDoNot({ text: "", instead: "" })}
-                style={addButtonStyle}
+                style={{ padding: 0, alignSelf: 'flex-start' }}
               >
                 + Add anti-pattern
-              </button>
-            </div>
+              </Button>
+            </Stack>
           </div>
         </Section>
 
@@ -304,9 +285,9 @@ export function FragmentEditor({
           onToggle={() => toggleSection("accessibility")}
         >
           <div style={{ marginBottom: '16px' }}>
-            <label style={labelStyle}>
+            <Text as="label" size="xs" weight="medium" color="secondary" style={{ display: 'block', marginBottom: '6px' }}>
               ARIA Role
-            </label>
+            </Text>
             <input
               {...register("accessibility.role")}
               style={inputStyle}
@@ -315,12 +296,12 @@ export function FragmentEditor({
           </div>
 
           <div>
-            <label style={{ ...labelStyle, marginBottom: '8px' }}>
+            <Text as="label" size="xs" weight="medium" color="secondary" style={{ display: 'block', marginBottom: '8px' }}>
               Requirements
-            </label>
-            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+            </Text>
+            <Stack gap="sm">
               {requirementsFields.map((field, index) => (
-                <div key={field.id} style={{ display: 'flex', gap: '8px' }}>
+                <Stack key={field.id} direction="row" gap="sm">
                   <input
                     {...register(
                       `accessibility.requirements.${index}` as const
@@ -328,23 +309,26 @@ export function FragmentEditor({
                     style={{ ...inputStyle, flex: 1 }}
                     placeholder="Requirement..."
                   />
-                  <button
+                  <Button
                     type="button"
+                    variant="ghost"
+                    size="sm"
                     onClick={() => removeRequirement(index)}
-                    style={removeButtonStyle}
                   >
                     &times;
-                  </button>
-                </div>
+                  </Button>
+                </Stack>
               ))}
-              <button
+              <Button
                 type="button"
+                variant="ghost"
+                size="sm"
                 onClick={() => appendRequirement("")}
-                style={addButtonStyle}
+                style={{ padding: 0, alignSelf: 'flex-start' }}
               >
                 + Add requirement
-              </button>
-            </div>
+              </Button>
+            </Stack>
           </div>
         </Section>
 
@@ -385,9 +369,9 @@ export function FragmentEditor({
         >
           <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px', marginBottom: '16px' }}>
             <div>
-              <label style={labelStyle}>
+              <Text as="label" size="xs" weight="medium" color="secondary" style={{ display: 'block', marginBottom: '6px' }}>
                 Status
-              </label>
+              </Text>
               <select
                 {...register("meta.status")}
                 style={inputStyle}
@@ -400,9 +384,9 @@ export function FragmentEditor({
               </select>
             </div>
             <div>
-              <label style={labelStyle}>
+              <Text as="label" size="xs" weight="medium" color="secondary" style={{ display: 'block', marginBottom: '6px' }}>
                 Since Version
-              </label>
+              </Text>
               <input
                 {...register("meta.since")}
                 style={inputStyle}
@@ -411,9 +395,9 @@ export function FragmentEditor({
             </div>
           </div>
           <div style={{ marginBottom: '16px' }}>
-            <label style={labelStyle}>
+            <Text as="label" size="xs" weight="medium" color="secondary" style={{ display: 'block', marginBottom: '6px' }}>
               Owner
-            </label>
+            </Text>
             <input
               {...register("meta.owner")}
               style={inputStyle}
@@ -421,29 +405,19 @@ export function FragmentEditor({
             />
           </div>
         </Section>
-      </div>
+      </Box>
 
       {/* Footer with save button */}
-      <div style={{ padding: '12px 16px', borderTop: '1px solid var(--border)', background: 'var(--bg-secondary)' }}>
-        <button
+      <Box paddingX="md" paddingY="sm" borderTop background="secondary">
+        <Button
           type="submit"
+          variant="primary"
+          fullWidth
           disabled={!isDirty || saving}
-          style={{
-            width: '100%',
-            padding: '8px 16px',
-            fontSize: '14px',
-            fontWeight: 500,
-            borderRadius: '8px',
-            transition: 'background-color 150ms',
-            border: 'none',
-            cursor: isDirty && !saving ? 'pointer' : 'not-allowed',
-            background: isDirty && !saving ? 'var(--color-accent)' : 'var(--bg-secondary)',
-            color: isDirty && !saving ? 'white' : 'var(--text-tertiary)',
-          }}
         >
           {saving ? "Saving..." : "Save Fragment"}
-        </button>
-      </div>
+        </Button>
+      </Box>
     </form>
   );
 }
@@ -459,7 +433,7 @@ function Section({ title, expanded, onToggle, children }: SectionProps) {
   const [hovered, setHovered] = useState(false);
 
   return (
-    <div style={{ borderBottom: '1px solid var(--border)' }}>
+    <Box borderBottom>
       <button
         type="button"
         onClick={onToggle}
@@ -477,9 +451,9 @@ function Section({ title, expanded, onToggle, children }: SectionProps) {
           cursor: 'pointer',
         }}
       >
-        <span style={{ fontSize: '12px', fontWeight: 600, color: 'var(--text-primary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+        <Text size="xs" weight="semibold" style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }}>
           {title}
-        </span>
+        </Text>
         <ChevronDownIcon
           style={{
             width: '16px',
@@ -490,8 +464,8 @@ function Section({ title, expanded, onToggle, children }: SectionProps) {
           }}
         />
       </button>
-      {expanded && <div style={{ padding: '16px' }}>{children}</div>}
-    </div>
+      {expanded && <Box padding="md">{children}</Box>}
+    </Box>
   );
 }
 
@@ -514,35 +488,38 @@ function RelatedField({
 
   return (
     <div style={{ marginBottom: '16px' }}>
-      <label style={{ display: 'block', fontSize: '12px', fontWeight: 500, color: 'var(--text-secondary)', marginBottom: '2px' }}>
+      <Text as="label" size="xs" weight="medium" color="secondary" style={{ display: 'block', marginBottom: '2px' }}>
         {label}
-      </label>
-      <p style={{ fontSize: '10px', color: 'var(--text-tertiary)', marginBottom: '8px', marginTop: 0 }}>{description}</p>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+      </Text>
+      <Text size="xs" color="tertiary" style={{ marginBottom: '8px', marginTop: 0, fontSize: '10px' }}>{description}</Text>
+      <Stack gap="sm">
         {fields.map((field, index) => (
-          <div key={field.id} style={{ display: 'flex', gap: '8px' }}>
+          <Stack key={field.id} direction="row" gap="sm">
             <input
               {...register(`${name}.${index}` as const)}
               style={{ ...inputStyle, flex: 1 }}
               placeholder="ComponentName"
             />
-            <button
+            <Button
               type="button"
+              variant="ghost"
+              size="sm"
               onClick={() => remove(index)}
-              style={removeButtonStyle}
             >
               &times;
-            </button>
-          </div>
+            </Button>
+          </Stack>
         ))}
-        <button
+        <Button
           type="button"
+          variant="ghost"
+          size="sm"
           onClick={() => append("")}
-          style={addButtonStyle}
+          style={{ padding: 0, alignSelf: 'flex-start' }}
         >
           + Add component
-        </button>
-      </div>
+        </Button>
+      </Stack>
     </div>
   );
 }

package/src/viewer/components/HeaderSearch.tsx

@@ -0,0 +1,24 @@
+import type { RefObject } from "react";
+import { Header, Input } from "@fragments-sdk/ui";
+
+interface HeaderSearchProps {
+  value: string;
+  onChange: (value: string) => void;
+  inputRef: RefObject<HTMLInputElement>;
+}
+
+export function HeaderSearch({ value, onChange, inputRef }: HeaderSearchProps) {
+  return (
+    <Header.Search expandable>
+      <Input
+        ref={inputRef}
+        value={value}
+        onChange={onChange}
+        placeholder="Search components"
+        aria-label="Search components"
+        size="sm"
+        style={{ width: "240px" }}
+      />
+    </Header.Search>
+  );
+}

package/src/viewer/components/HealthDashboard.tsx

@@ -16,6 +16,20 @@ import {
 } from '../hooks/useA11yCache.js';
 import type { A11ySummary, CachedA11yResult } from '../types/a11y.js';
 
+/** Normalize category to Title Case for display */
+function titleCase(str: string): string {
+  return str.replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+/** Normalize category to a canonical key so "Form" and "Forms" merge into one group */
+function categoryKey(raw: string): string {
+  const tc = titleCase(raw.trim());
+  if (tc.length > 4 && tc.endsWith('s') && !tc.endsWith('ss')) {
+    return tc.slice(0, -1);
+  }
+  return tc;
+}
+
 interface HealthDashboardProps {
   fragments: Array<{ path: string; fragment: FragmentDefinition }>;
   onNavigate?: (componentName: string) => void;
@@ -68,7 +82,7 @@ function calculateCoverage(
 
   for (const { fragment } of fragments) {
     const cat = fragment.meta.category || 'uncategorized';
-    categories.add(cat);
+    categories.add(categoryKey(cat));
 
     if (fragment.meta.description && fragment.meta.description.trim().length > 10) {
       documented++;
@@ -89,7 +103,7 @@ function calculateCoverage(
 
     components.push({
       name: fragment.meta.name,
-      category: cat,
+      category: titleCase(cat),
       variantCount,
       status: fragment.meta.status || 'stable',
     });

package/src/viewer/components/Icons.tsx

@@ -301,6 +301,15 @@ export function EmptyIcon({ className, style }: IconProps) {
   );
 }
 
+// GitHub
+export function GitHubIcon({ className, style }: IconProps) {
+  return (
+    <svg className={className} style={style} width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+    </svg>
+  );
+}
+
 // Figma
 export function FigmaIcon({ className, style }: IconProps) {
   return (