@fragments-sdk/cli 0.10.1 → 0.12.1

package/src/viewer/components/PropsEditor.tsx

@@ -1,506 +0,0 @@
-import { useState } from "react";
-import type { PropDefinition } from "../../core/index.js";
-import { Box, Stack, Text, Button, Badge, Card, Input, Select, Toggle } from "@fragments-sdk/ui";
-import { ControlsIcon, ChevronDownIcon, RefreshIcon } from "./Icons.js";
-
-interface PropsEditorProps {
-  props: Record<string, PropDefinition>;
-  values: Record<string, unknown>;
-  onChange: (name: string, value: unknown) => void;
-  onReset: () => void;
-  hasChanges: boolean;
-  compact?: boolean;
-}
-
-export function PropsEditor({
-  props,
-  values,
-  onChange,
-  onReset,
-  hasChanges,
-  compact = false,
-}: PropsEditorProps) {
-  const [isCollapsed, setIsCollapsed] = useState(false);
-  const propEntries = Object.entries(props);
-
-  if (propEntries.length === 0) return null;
-
-  // Compact mode - show controls in a single horizontal line
-  if (compact) {
-    return (
-      <Stack gap="lg">
-        {propEntries.map(([name, prop]) => (
-          <PropControl
-            key={name}
-            name={name}
-            prop={prop}
-            value={values[name]}
-            onChange={(value) => onChange(name, value)}
-            compact
-          />
-        ))}
-        {hasChanges && (
-          <Button variant="ghost" size="sm" onClick={onReset}>
-            <RefreshIcon style={{ width: 12, height: 12 }} />
-            Reset
-          </Button>
-        )}
-      </Stack>
-    );
-  }
-
-  return (
-    <Card>
-      {/* Header */}
-      <Button
-        variant="ghost"
-        fullWidth
-        onClick={() => setIsCollapsed(!isCollapsed)}
-        style={{ justifyContent: 'space-between', padding: '12px 16px', borderRadius: 0, borderBottom: '1px solid var(--border)' }}
-      >
-        <Stack direction="row" align="center" gap="sm">
-          <ControlsIcon style={{ width: 16, height: 16 }} />
-          <Text size="sm" weight="medium">Props Editor</Text>
-          {hasChanges && <Badge variant="info" size="sm">Modified</Badge>}
-        </Stack>
-        <ChevronDownIcon style={{ width: 16, height: 16, transition: 'transform 0.15s', transform: isCollapsed ? 'rotate(-90deg)' : 'rotate(0deg)' }} />
-      </Button>
-
-      {/* Content */}
-      {!isCollapsed && (
-        <Box padding="md">
-          <Stack gap="md">
-            {/* Reset button */}
-            {hasChanges && (
-              <Button variant="ghost" size="sm" onClick={onReset}>
-                <RefreshIcon style={{ width: 14, height: 14 }} />
-                Reset to defaults
-              </Button>
-            )}
-
-            {/* Prop controls */}
-            <Stack gap="sm">
-              {propEntries.map(([name, prop]) => (
-                <PropControl
-                  key={name}
-                  name={name}
-                  prop={prop}
-                  value={values[name]}
-                  onChange={(value) => onChange(name, value)}
-                />
-              ))}
-            </Stack>
-          </Stack>
-        </Box>
-      )}
-    </Card>
-  );
-}
-
-interface PropControlProps {
-  name: string;
-  prop: PropDefinition;
-  value: unknown;
-  onChange: (value: unknown) => void;
-  compact?: boolean;
-}
-
-/**
- * Determine which control to render based on prop type and controlType
- */
-function getControlForProp(
-  prop: PropDefinition,
-  displayValue: unknown,
-  onChange: (value: unknown) => void,
-  compact: boolean = false
-) {
-  // Check controlType first for special controls (color, date, range)
-  if (prop.controlType === "color") {
-    return (
-      <ColorControl
-        value={displayValue as string}
-        onChange={onChange}
-        presetColors={prop.controlOptions?.presetColors}
-      />
-    );
-  }
-
-  if (prop.controlType === "date") {
-    return <DateControl value={displayValue as string} onChange={onChange} />;
-  }
-
-  if (prop.controlType === "range") {
-    return (
-      <RangeControl
-        value={displayValue as number}
-        onChange={onChange}
-        min={prop.controlOptions?.min}
-        max={prop.controlOptions?.max}
-        step={prop.controlOptions?.step}
-      />
-    );
-  }
-
-  // Fall back to type-based controls
-  if (prop.type === "boolean") {
-    return <BooleanControl value={displayValue as boolean} onChange={onChange} />;
-  }
-
-  if (prop.type === "enum" && prop.values) {
-    return (
-      <EnumControl
-        value={displayValue as string}
-        values={prop.values as string[]}
-        onChange={onChange}
-      />
-    );
-  }
-
-  if (prop.type === "number") {
-    return <NumberControl value={displayValue as number} onChange={onChange} />;
-  }
-
-  if (prop.type === "string") {
-    return <StringControl value={displayValue as string} onChange={onChange} compact={compact} />;
-  }
-
-  if (prop.type === "function") {
-    return <FunctionControl value={displayValue} onChange={onChange} />;
-  }
-
-  return <StringControl value={String(displayValue)} onChange={onChange} compact={compact} />;
-}
-
-function PropControl({
-  name,
-  prop,
-  value,
-  onChange,
-  compact = false,
-}: PropControlProps) {
-  const displayValue = value ?? prop.default ?? "";
-
-  if (compact) {
-    return (
-      <Stack direction="row" gap="sm">
-        <Text as="label" size="xs" weight="medium" font="mono" style={{ whiteSpace: 'nowrap', minWidth: '100px' }} color="secondary">
-          {name}
-        </Text>
-        {getControlForProp(prop, displayValue, onChange, true)}
-      </Stack>
-    );
-  }
-
-  return (
-    <Stack gap="sm">
-      <Stack direction="row" align="center" gap="sm">
-        <Text as="label" size="xs" weight="medium" font="mono">
-          {name}
-          {prop.required && (
-            <span style={{ color: 'var(--color-danger, #ef4444)', marginLeft: '2px' }}>*</span>
-          )}
-        </Text>
-        <Text size="xs" color="tertiary">{prop.type}</Text>
-        {prop.controlType && prop.controlType !== prop.type && (
-          <Badge size="sm">{prop.controlType}</Badge>
-        )}
-      </Stack>
-
-      {getControlForProp(prop, displayValue, onChange, false)}
-
-      {prop.description && (
-        <Text as="p" size="xs" color="tertiary" style={{ lineHeight: 1.6 }}>
-          {prop.description}
-        </Text>
-      )}
-    </Stack>
-  );
-}
-
-function BooleanControl({
-  value,
-  onChange,
-}: {
-  value: boolean;
-  onChange: (v: boolean) => void;
-}) {
-  return (
-    <Toggle
-      checked={value}
-      onChange={() => onChange(!value)}
-    />
-  );
-}
-
-function EnumControl({
-  value,
-  values,
-  onChange,
-}: {
-  value: string;
-  values: string[];
-  onChange: (v: string) => void;
-}) {
-  return (
-    <Select
-      value={value}
-      onChange={(e: React.ChangeEvent<HTMLSelectElement>) => onChange(e.target.value)}
-    >
-      {values.map((v) => (
-        <option key={v} value={v}>
-          {v}
-        </option>
-      ))}
-    </Select>
-  );
-}
-
-function NumberControl({
-  value,
-  onChange,
-}: {
-  value: number;
-  onChange: (v: number) => void;
-}) {
-  return (
-    <Input
-      type="number"
-      value={value ?? ""}
-      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-        onChange(
-          e.target.value
-            ? Number(e.target.value)
-            : (undefined as unknown as number)
-        )
-      }
-      style={{ width: '128px', fontFamily: 'monospace' }}
-    />
-  );
-}
-
-function StringControl({
-  value,
-  onChange,
-  compact = false,
-}: {
-  value: string;
-  onChange: (v: string) => void;
-  compact?: boolean;
-}) {
-  return (
-    <Input
-      type="text"
-      value={value ?? ""}
-      onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
-      style={compact
-        ? { width: '96px', fontSize: '11px', fontFamily: 'monospace' }
-        : { width: '100%', maxWidth: '320px', fontFamily: 'monospace' }
-      }
-    />
-  );
-}
-
-function FunctionControl({
-  value,
-  onChange,
-}: {
-  value: unknown;
-  onChange: (v: unknown) => void;
-}) {
-  const [isEditing, setIsEditing] = useState(false);
-  const [inputValue, setInputValue] = useState('');
-
-  // Get a display string for the function
-  const getDisplayValue = () => {
-    if (typeof value === 'function') {
-      const fnStr = value.toString();
-      // Truncate if too long
-      if (fnStr.length > 50) {
-        return fnStr.slice(0, 47) + '...';
-      }
-      return fnStr;
-    }
-    if (typeof value === 'string' && value.trim()) {
-      return value;
-    }
-    return '() => {}';
-  };
-
-  const handleStartEdit = () => {
-    // Convert function to string for editing
-    if (typeof value === 'function') {
-      setInputValue(value.toString());
-    } else if (typeof value === 'string') {
-      setInputValue(value);
-    } else {
-      setInputValue('() => {}');
-    }
-    setIsEditing(true);
-  };
-
-  const handleSave = () => {
-    // Save as string - the parent will handle conversion
-    onChange(inputValue);
-    setIsEditing(false);
-  };
-
-  const handleCancel = () => {
-    setIsEditing(false);
-    setInputValue('');
-  };
-
-  if (isEditing) {
-    return (
-      <Stack gap="sm" style={{ flex: 1 }}>
-        <textarea
-          value={inputValue}
-          onChange={(e) => setInputValue(e.target.value)}
-          style={{
-            width: '100%',
-            padding: '6px 8px',
-            fontSize: '11px',
-            fontFamily: 'monospace',
-            background: 'var(--bg-primary)',
-            border: '1px solid var(--border)',
-            borderRadius: '4px',
-            color: 'var(--text-primary)',
-            outline: 'none',
-            resize: 'vertical',
-            minHeight: '60px',
-          }}
-          placeholder="() => console.log('clicked')"
-          autoFocus
-        />
-        <Stack direction="row" gap="sm">
-          <Button variant="primary" size="sm" onClick={handleSave}>Apply</Button>
-          <Button variant="ghost" size="sm" onClick={handleCancel}>Cancel</Button>
-        </Stack>
-      </Stack>
-    );
-  }
-
-  return (
-    <button
-      onClick={handleStartEdit}
-      style={{
-        padding: '6px 10px',
-        fontSize: '11px',
-        fontFamily: 'monospace',
-        color: 'var(--text-tertiary)',
-        background: 'var(--bg-secondary)',
-        borderRadius: '6px',
-        width: 'fit-content',
-        textAlign: 'left',
-        transition: 'background 0.15s',
-        cursor: 'pointer',
-        border: 'none',
-      }}
-      title="Click to edit function"
-    >
-      {getDisplayValue()}
-    </button>
-  );
-}
-
-function ColorControl({
-  value,
-  onChange,
-  presetColors,
-}: {
-  value: string;
-  onChange: (v: string) => void;
-  presetColors?: string[];
-}) {
-  return (
-    <Stack direction="row" align="center" gap="sm">
-      <input
-        type="color"
-        value={value || "#000000"}
-        onChange={(e) => onChange(e.target.value)}
-        style={{ width: '32px', height: '32px', borderRadius: '4px', border: '1px solid var(--border)', cursor: 'pointer', background: 'transparent' }}
-      />
-      <Input
-        type="text"
-        value={value ?? ""}
-        onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
-        placeholder="#000000"
-        style={{ width: '96px', fontSize: '11px', fontFamily: 'monospace' }}
-      />
-      {presetColors && presetColors.length > 0 && (
-        <Stack direction="row" gap="xs" wrap>
-          {presetColors.slice(0, 6).map((color) => (
-            <button
-              key={color}
-              onClick={() => onChange(color)}
-              style={{
-                width: '20px',
-                height: '20px',
-                borderRadius: '4px',
-                border: '1px solid var(--border)',
-                backgroundColor: color,
-                cursor: 'pointer',
-                padding: 0,
-              }}
-              title={color}
-            />
-          ))}
-        </Stack>
-      )}
-    </Stack>
-  );
-}
-
-function DateControl({
-  value,
-  onChange,
-}: {
-  value: string;
-  onChange: (v: string) => void;
-}) {
-  // Convert ISO string to datetime-local format for input
-  const inputValue = value
-    ? new Date(value).toISOString().slice(0, 16)
-    : "";
-
-  return (
-    <Input
-      type="datetime-local"
-      value={inputValue}
-      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-        const date = e.target.value ? new Date(e.target.value).toISOString() : "";
-        onChange(date);
-      }}
-    />
-  );
-}
-
-function RangeControl({
-  value,
-  onChange,
-  min = 0,
-  max = 100,
-  step = 1,
-}: {
-  value: number;
-  onChange: (v: number) => void;
-  min?: number;
-  max?: number;
-  step?: number;
-}) {
-  return (
-    <Stack direction="row" align="center" gap="sm">
-      <input
-        type="range"
-        value={value ?? min}
-        min={min}
-        max={max}
-        step={step}
-        onChange={(e) => onChange(Number(e.target.value))}
-        style={{ flex: 1, height: '8px', background: 'var(--bg-secondary)', borderRadius: '8px', cursor: 'pointer', accentColor: 'var(--color-accent)' }}
-      />
-      <Text size="xs" font="mono" color="secondary" style={{ minWidth: '3rem', textAlign: 'right' }}>
-        {value ?? min}
-      </Text>
-    </Stack>
-  );
-}

package/src/viewer/components/PropsTable.tsx

@@ -1,111 +0,0 @@
-import { useMemo } from 'react';
-import type { PropDefinition } from '../../core/index.js';
-import { DataTable, createColumns, Badge, Text, Stack } from '@fragments-sdk/ui';
-import { WarningIcon } from './Icons.js';
-
-interface PropsTableProps {
-  props: Record<string, PropDefinition>;
-}
-
-interface PropRow {
-  name: string;
-  required: boolean;
-  type: string;
-  values?: string[];
-  default: unknown;
-  description: string;
-  constraints?: string[];
-}
-
-export function PropsTable({ props }: PropsTableProps) {
-  const propEntries = Object.entries(props);
-
-  const data = useMemo<PropRow[]>(() =>
-    propEntries.map(([name, prop]) => ({
-      name,
-      required: !!prop.required,
-      type: prop.type,
-      values: prop.values,
-      default: prop.default,
-      description: prop.description,
-      constraints: prop.constraints,
-    })),
-    [propEntries]
-  );
-
-  const columns = useMemo(() => createColumns<PropRow>([
-    {
-      key: 'name',
-      header: 'Prop',
-      cell: (row) => (
-        <Text font="mono" size="sm" weight="medium">
-          {row.name}
-          {row.required && <span style={{ color: 'var(--color-danger, #ef4444)', marginLeft: '2px' }}>*</span>}
-        </Text>
-      ),
-    },
-    {
-      key: 'type',
-      header: 'Type',
-      cell: (row) => {
-        if (row.type === 'enum' && row.values && row.values.length > 0) {
-          return (
-            <Stack direction="row" gap="xs" style={{ flexWrap: 'wrap' }}>
-              {row.values.map((value, index) => (
-                <span key={value} style={{ display: 'inline-flex', alignItems: 'center' }}>
-                  <Badge size="sm">{value}</Badge>
-                  {index < row.values!.length - 1 && <Text size="xs" color="tertiary" style={{ margin: '0 4px' }}>|</Text>}
-                </span>
-              ))}
-            </Stack>
-          );
-        }
-        return <Text font="mono" size="xs" color="secondary">{row.type}</Text>;
-      },
-    },
-    {
-      key: 'default',
-      header: 'Default',
-      cell: (row) => {
-        if (row.default !== undefined) {
-          return <Text font="mono" size="xs" color="secondary">{String(row.default)}</Text>;
-        }
-        return <Text color="tertiary">&mdash;</Text>;
-      },
-    },
-    {
-      key: 'description',
-      header: 'Description',
-      cell: (row) => (
-        <Stack gap="xs">
-          <Text size="sm" color="secondary">{row.description}</Text>
-          {row.constraints && row.constraints.length > 0 && (
-            <Stack gap="xs">
-              {row.constraints.map((constraint, index) => (
-                <Stack key={index} direction="row" gap="xs" align="start" style={{ fontSize: '12px', color: 'var(--color-warning, #f59e0b)' }}>
-                  <WarningIcon style={{ width: 12, height: 12, marginTop: '2px', flexShrink: 0 }} />
-                  <span>{constraint}</span>
-                </Stack>
-              ))}
-            </Stack>
-          )}
-        </Stack>
-      ),
-    },
-  ]), []);
-
-  if (propEntries.length === 0) return null;
-
-  return (
-    <section id="props" style={{ scrollMarginTop: '96px' }}>
-      <Text as="h2" size="md" weight="semibold" style={{ marginBottom: '16px' }}>Props</Text>
-      <DataTable
-        columns={columns}
-        data={data}
-        size="sm"
-        bordered
-        getRowId={(row) => row.name}
-      />
-    </section>
-  );
-}

package/src/viewer/components/RelationsSection.tsx

@@ -1,88 +0,0 @@
-import { useState } from 'react';
-import type { ComponentRelation } from '../../core/index.js';
-import { getRelationshipConfig } from '../constants/ui.js';
-import { ChevronRightIcon } from './Icons.js';
-
-interface RelationsSectionProps {
-  relations: ComponentRelation[];
-  onNavigate?: (componentName: string) => void;
-}
-
-export function RelationsSection({ relations, onNavigate }: RelationsSectionProps) {
-  if (relations.length === 0) return null;
-
-  return (
-    <section id="relations" style={{ scrollMarginTop: '96px' }}>
-      <h2 style={{ fontSize: '16px', fontWeight: 600, color: 'var(--text-primary)', marginBottom: '16px' }}>Related Components</h2>
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: '12px' }}>
-        {relations.map((relation, index) => (
-          <RelationButton key={index} relation={relation} onNavigate={onNavigate} />
-        ))}
-      </div>
-    </section>
-  );
-}
-
-function RelationButton({ relation, onNavigate }: { relation: ComponentRelation; onNavigate?: (componentName: string) => void }) {
-  const config = getRelationshipConfig(relation.relationship);
-  const [hovered, setHovered] = useState(false);
-
-  return (
-    <button
-      onClick={() => onNavigate?.(relation.component)}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-      style={{
-        textAlign: 'left',
-        padding: '16px',
-        borderRadius: '12px',
-        border: `1px solid ${hovered ? 'var(--border-strong)' : 'var(--border)'}`,
-        background: 'var(--bg-elevated)',
-        transition: 'all 150ms',
-        cursor: 'pointer',
-        outline: 'none',
-      }}
-    >
-      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '6px' }}>
-        <span style={{
-          fontSize: '13px',
-          fontWeight: 500,
-          color: hovered ? 'var(--color-accent)' : 'var(--text-primary)',
-          transition: 'color 150ms',
-        }}>
-          {relation.component}
-        </span>
-        <span style={{
-          fontSize: '10px',
-          fontWeight: 500,
-          padding: '2px 6px',
-          borderRadius: '4px',
-          background: config.bgColor ?? 'var(--bg-tertiary)',
-          color: config.textColor ?? 'var(--text-secondary)',
-        }}>
-          {config.label}
-        </span>
-      </div>
-      {relation.note && (
-        <p style={{ fontSize: '13px', color: 'var(--text-secondary)', lineHeight: 1.6, margin: 0 }}>{relation.note}</p>
-      )}
-      <div style={{
-        marginTop: '8px',
-        display: 'flex',
-        alignItems: 'center',
-        fontSize: '12px',
-        color: hovered ? 'var(--text-secondary)' : 'var(--text-tertiary)',
-        transition: 'color 150ms',
-      }}>
-        <span>View component</span>
-        <ChevronRightIcon style={{
-          width: '12px',
-          height: '12px',
-          marginLeft: '4px',
-          transform: hovered ? 'translateX(2px)' : 'translateX(0)',
-          transition: 'transform 150ms',
-        }} />
-      </div>
-    </button>
-  );
-}