@fragments-sdk/cli 0.2.2

package/src/viewer/components/PropsEditor.tsx

@@ -0,0 +1,512 @@
+import { useState } from "react";
+import type { PropDefinition } from "../../core/index.js";
+import clsx from "clsx";
+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 (
+      <div className="flex flex-col gap-6">
+        {propEntries.map(([name, prop]) => (
+          <PropControl
+            key={name}
+            name={name}
+            prop={prop}
+            value={values[name]}
+            onChange={(value) => onChange(name, value)}
+            compact
+          />
+        ))}
+        {hasChanges && (
+          <button
+            onClick={onReset}
+            className="flex items-center gap-1.5 px-2 py-1 text-xs font-medium text-[--color-accent] hover:bg-[--bg-hover] rounded transition-colors"
+          >
+            <RefreshIcon className="w-3 h-3" />
+            Reset
+          </button>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="border border-[--border] rounded-xl overflow-hidden bg-[--bg-elevated]">
+      {/* Header */}
+      <button
+        onClick={() => setIsCollapsed(!isCollapsed)}
+        className="w-full px-4 py-3 flex items-center justify-between bg-[--bg-secondary] border-b border-[--border-subtle] hover:bg-[--bg-hover] transition-colors"
+      >
+        <div className="flex items-center gap-2">
+          <ControlsIcon className="w-4 h-4 text-secondary" />
+          <span className="text-[13px] font-medium text-primary">
+            Props Editor
+          </span>
+          {hasChanges && (
+            <span className="px-1.5 py-0.5 text-[10px] font-medium bg-[--color-accent] text-white rounded">
+              Modified
+            </span>
+          )}
+        </div>
+        <ChevronDownIcon
+          className={clsx(
+            "w-4 h-4 text-tertiary transition-transform",
+            isCollapsed && "-rotate-90"
+          )}
+        />
+      </button>
+
+      {/* Content */}
+      {!isCollapsed && (
+        <div className="p-4 space-y-4">
+          {/* Reset button */}
+          {hasChanges && (
+            <button
+              onClick={onReset}
+              className="flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-[--color-accent] hover:bg-[--bg-hover] rounded transition-colors"
+            >
+              <RefreshIcon className="w-3.5 h-3.5" />
+              Reset to defaults
+            </button>
+          )}
+
+          {/* Prop controls */}
+          <div className="space-y-3">
+            {propEntries.map(([name, prop]) => (
+              <PropControl
+                key={name}
+                name={name}
+                prop={prop}
+                value={values[name]}
+                onChange={(value) => onChange(name, value)}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+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 (
+      <div className="flex gap-2">
+        <label className="text-[11px] font-medium text-secondary font-mono whitespace-nowrap min-w-[100px]">
+          {name}
+        </label>
+        {getControlForProp(prop, displayValue, onChange, true)}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      <div className="flex items-center gap-2">
+        <label className="text-[12px] font-medium text-primary font-mono">
+          {name}
+          {prop.required && (
+            <span className="text-[--color-danger] ml-0.5">*</span>
+          )}
+        </label>
+        <span className="text-[11px] text-tertiary">{prop.type}</span>
+        {prop.controlType && prop.controlType !== prop.type && (
+          <span className="text-[10px] text-tertiary bg-[--bg-tertiary] px-1.5 py-0.5 rounded">
+            {prop.controlType}
+          </span>
+        )}
+      </div>
+
+      {getControlForProp(prop, displayValue, onChange, false)}
+
+      {prop.description && (
+        <p className="text-[11px] text-tertiary leading-relaxed">
+          {prop.description}
+        </p>
+      )}
+    </div>
+  );
+}
+
+function BooleanControl({
+  value,
+  onChange,
+}: {
+  value: boolean;
+  onChange: (v: boolean) => void;
+}) {
+  return (
+    <button
+      onClick={() => onChange(!value)}
+      className={clsx(
+        "relative inline-flex h-6 w-11 items-center rounded-full transition-colors",
+        value ? "bg-[--color-accent]" : "bg-[--bg-tertiary]"
+      )}
+    >
+      <span
+        className={clsx(
+          "inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform",
+          value ? "translate-x-6" : "translate-x-1"
+        )}
+      />
+    </button>
+  );
+}
+
+function EnumControl({
+  value,
+  values,
+  onChange,
+}: {
+  value: string;
+  values: string[];
+  onChange: (v: string) => void;
+}) {
+  return (
+    <select
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      className="px-2.5 py-1.5 text-[12px] bg-[--bg-primary] border border-[--border] rounded-md text-primary focus:outline-none focus:ring-2 focus:ring-[--color-accent] focus:border-transparent"
+    >
+      {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) =>
+        onChange(
+          e.target.value
+            ? Number(e.target.value)
+            : (undefined as unknown as number)
+        )
+      }
+      className="px-2.5 py-1.5 text-[12px] font-mono bg-[--bg-primary] border border-[--border] rounded-md text-primary focus:outline-none focus:ring-2 focus:ring-[--color-accent] focus:border-transparent w-32"
+    />
+  );
+}
+
+function StringControl({
+  value,
+  onChange,
+  compact = false,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  compact?: boolean;
+}) {
+  return (
+    <input
+      type="text"
+      value={value ?? ""}
+      onChange={(e) => onChange(e.target.value)}
+      className={clsx(
+        "px-2 py-1 text-[11px] font-mono bg-[--bg-primary] border border-[--border] rounded text-primary focus:outline-none focus:ring-1 focus:ring-[--color-accent] focus:border-transparent",
+        compact ? "w-24" : "w-full max-w-xs px-2.5 py-1.5 text-[12px]"
+      )}
+    />
+  );
+}
+
+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 (
+      <div className="flex flex-col gap-2 flex-1">
+        <textarea
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          className="w-full px-2 py-1.5 text-[11px] font-mono bg-[--bg-primary] border border-[--border] rounded text-primary focus:outline-none focus:ring-1 focus:ring-[--color-accent] resize-y min-h-[60px]"
+          placeholder="() => console.log('clicked')"
+          autoFocus
+        />
+        <div className="flex gap-1.5">
+          <button
+            onClick={handleSave}
+            className="px-2 py-1 text-[10px] font-medium bg-[--color-accent] text-white rounded hover:opacity-90 transition-opacity"
+          >
+            Apply
+          </button>
+          <button
+            onClick={handleCancel}
+            className="px-2 py-1 text-[10px] font-medium text-tertiary hover:text-secondary hover:bg-[--bg-hover] rounded transition-colors"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <button
+      onClick={handleStartEdit}
+      className="px-2.5 py-1.5 text-[11px] font-mono text-tertiary bg-[--bg-tertiary] hover:bg-[--bg-hover] rounded-md w-fit text-left transition-colors cursor-pointer"
+      title="Click to edit function"
+    >
+      {getDisplayValue()}
+    </button>
+  );
+}
+
+function ColorControl({
+  value,
+  onChange,
+  presetColors,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  presetColors?: string[];
+}) {
+  return (
+    <div className="flex items-center gap-2">
+      <input
+        type="color"
+        value={value || "#000000"}
+        onChange={(e) => onChange(e.target.value)}
+        className="w-8 h-8 rounded border border-[--border] cursor-pointer bg-transparent"
+      />
+      <input
+        type="text"
+        value={value ?? ""}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder="#000000"
+        className="px-2 py-1 text-[11px] font-mono bg-[--bg-primary] border border-[--border] rounded text-primary focus:outline-none focus:ring-1 focus:ring-[--color-accent] w-24"
+      />
+      {presetColors && presetColors.length > 0 && (
+        <div className="flex gap-1 flex-wrap">
+          {presetColors.slice(0, 6).map((color) => (
+            <button
+              key={color}
+              onClick={() => onChange(color)}
+              className="w-5 h-5 rounded border border-[--border] hover:ring-2 hover:ring-[--color-accent]"
+              style={{ backgroundColor: color }}
+              title={color}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+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) => {
+        const date = e.target.value ? new Date(e.target.value).toISOString() : "";
+        onChange(date);
+      }}
+      className="px-2.5 py-1.5 text-[12px] bg-[--bg-primary] border border-[--border] rounded-md text-primary focus:outline-none focus:ring-2 focus:ring-[--color-accent] focus:border-transparent"
+    />
+  );
+}
+
+function RangeControl({
+  value,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+}: {
+  value: number;
+  onChange: (v: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+}) {
+  return (
+    <div className="flex items-center gap-3">
+      <input
+        type="range"
+        value={value ?? min}
+        min={min}
+        max={max}
+        step={step}
+        onChange={(e) => onChange(Number(e.target.value))}
+        className="flex-1 h-2 bg-[--bg-tertiary] rounded-lg appearance-none cursor-pointer accent-[--color-accent]"
+      />
+      <span className="text-[11px] font-mono text-secondary min-w-[3rem] text-right">
+        {value ?? min}
+      </span>
+    </div>
+  );
+}

package/src/viewer/components/PropsTable.tsx

@@ -0,0 +1,98 @@
+import type { PropDefinition } from '../../core/index.js';
+import { WarningIcon } from './Icons.js';
+
+interface PropsTableProps {
+  props: Record<string, PropDefinition>;
+}
+
+export function PropsTable({ props }: PropsTableProps) {
+  const propEntries = Object.entries(props);
+
+  if (propEntries.length === 0) return null;
+
+  return (
+    <section id="props" className="scroll-mt-24">
+      <h2 className="text-base font-semibold text-primary mb-4">Props</h2>
+      <div className="border border-[--border] rounded-xl overflow-hidden">
+        <table className="w-full text-[13px]">
+          <thead>
+            <tr className="bg-[--bg-secondary] border-b border-[--border-subtle]">
+              <th className="text-left px-4 py-3 text-[11px] font-medium text-tertiary uppercase tracking-wider">Prop</th>
+              <th className="text-left px-4 py-3 text-[11px] font-medium text-tertiary uppercase tracking-wider">Type</th>
+              <th className="text-left px-4 py-3 text-[11px] font-medium text-tertiary uppercase tracking-wider">Default</th>
+              <th className="text-left px-4 py-3 text-[11px] font-medium text-tertiary uppercase tracking-wider">Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            {propEntries.map(([name, prop], index) => (
+              <tr
+                key={name}
+                className={`hover:bg-[--bg-hover] transition-colors ${
+                  index !== propEntries.length - 1 ? 'border-b border-[--border-subtle]' : ''
+                }`}
+              >
+                <td className="px-4 py-3 align-top">
+                  <code className="text-[13px] font-mono text-primary font-medium">
+                    {name}
+                    {prop.required && <span className="text-[--color-danger] ml-0.5">*</span>}
+                  </code>
+                </td>
+                <td className="px-4 py-3 align-top">
+                  <PropType type={prop.type} values={prop.values} />
+                </td>
+                <td className="px-4 py-3 align-top">
+                  {prop.default !== undefined ? (
+                    <code className="text-[12px] font-mono bg-[--bg-tertiary] px-1.5 py-0.5 rounded text-secondary">
+                      {String(prop.default)}
+                    </code>
+                  ) : (
+                    <span className="text-[--text-muted]">—</span>
+                  )}
+                </td>
+                <td className="px-4 py-3 align-top">
+                  <div className="text-secondary leading-relaxed">{prop.description}</div>
+                  {prop.constraints && prop.constraints.length > 0 && (
+                    <div className="mt-2 space-y-1">
+                      {prop.constraints.map((constraint, index) => (
+                        <div
+                          key={index}
+                          className="text-[12px] text-[--color-warning] flex items-start gap-1.5"
+                        >
+                          <WarningIcon className="w-3 h-3 mt-0.5 flex-shrink-0" />
+                          <span>{constraint}</span>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </section>
+  );
+}
+
+function PropType({ type, values }: { type: string; values?: string[] }) {
+  if (type === 'enum' && values && values.length > 0) {
+    return (
+      <div className="flex flex-wrap gap-1">
+        {values.map((value, index) => (
+          <span key={value} className="inline-flex items-center">
+            <code className="text-[12px] font-mono bg-[--bg-tertiary] px-1.5 py-0.5 rounded text-[--color-accent]">
+              {value}
+            </code>
+            {index < values.length - 1 && <span className="text-[--text-muted] mx-1">|</span>}
+          </span>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <code className="text-[12px] font-mono text-secondary">
+      {type}
+    </code>
+  );
+}

package/src/viewer/components/RelationsSection.tsx

@@ -0,0 +1,57 @@
+import type { ComponentRelation } from '../../core/index.js';
+import clsx from 'clsx';
+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" className="scroll-mt-24">
+      <h2 className="text-base font-semibold text-primary mb-4">Related Components</h2>
+      <div className="grid sm:grid-cols-2 gap-3">
+        {relations.map((relation, index) => {
+          const config = getRelationshipConfig(relation.relationship);
+
+          return (
+            <button
+              key={index}
+              onClick={() => onNavigate?.(relation.component)}
+              className={clsx(
+                'group text-left p-4 rounded-xl border border-[--border]',
+                'bg-[--bg-elevated] hover:border-[--border-strong]',
+                'transition-all duration-150',
+                'focus:outline-none focus-visible:ring-2 focus-visible:ring-[--color-accent]'
+              )}
+            >
+              <div className="flex items-center gap-2 mb-1.5">
+                <span className="text-[13px] font-medium text-primary group-hover:text-[--color-accent] transition-colors">
+                  {relation.component}
+                </span>
+                <span className={clsx(
+                  'text-[10px] font-medium px-1.5 py-0.5 rounded',
+                  config.bg,
+                  config.text
+                )}>
+                  {config.label}
+                </span>
+              </div>
+              {relation.note && (
+                <p className="text-[13px] text-secondary leading-relaxed">{relation.note}</p>
+              )}
+              <div className="mt-2 flex items-center text-[12px] text-tertiary group-hover:text-secondary transition-colors">
+                <span>View component</span>
+                <ChevronRightIcon className="w-3 h-3 ml-1 group-hover:translate-x-0.5 transition-transform" />
+              </div>
+            </button>
+          );
+        })}
+      </div>
+    </section>
+  );
+}