@fragments-sdk/viewer 0.2.1

package/src/components/PropsEditor.tsx

@@ -0,0 +1,506 @@
+import { useState } from "react";
+import type { PropDefinition } from '@fragments-sdk/core';
+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/components/PropsTable.tsx

@@ -0,0 +1,111 @@
+import { useMemo } from 'react';
+import type { PropDefinition } from '@fragments-sdk/core';
+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/components/RelationsSection.tsx

@@ -0,0 +1,88 @@
+import { useState } from 'react';
+import type { ComponentRelation } from '@fragments-sdk/core';
+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>
+  );
+}