@fragments-sdk/cli 0.5.2 → 0.7.0

package/src/viewer/components/PropsEditor.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import type { PropDefinition } from "../../core/index.js";
-import clsx from "clsx";
+import { Input, Select, Toggle } from "@fragments/ui";
 import { ControlsIcon, ChevronDownIcon, RefreshIcon } from "./Icons.js";
 
 interface PropsEditorProps {
@@ -28,7 +28,7 @@ export function PropsEditor({
   // Compact mode - show controls in a single horizontal line
   if (compact) {
     return (
-      <div className="flex flex-col gap-6">
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
         {propEntries.map(([name, prop]) => (
           <PropControl
             key={name}
@@ -42,9 +42,22 @@ export function PropsEditor({
         {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"
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '6px',
+              padding: '4px 8px',
+              fontSize: '12px',
+              fontWeight: 500,
+              color: 'var(--color-accent)',
+              background: 'transparent',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: 'pointer',
+              transition: 'background 0.15s',
+            }}
           >
-            <RefreshIcon className="w-3 h-3" />
+            <RefreshIcon style={{ width: 12, height: 12 }} />
             Reset
           </button>
         )}
@@ -53,47 +66,75 @@ export function PropsEditor({
   }
 
   return (
-    <div className="border border-[--border] rounded-xl overflow-hidden bg-[--bg-elevated]">
+    <div style={{ border: '1px solid var(--border)', borderRadius: '12px', overflow: 'hidden', background: 'var(--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"
+        style={{
+          width: '100%',
+          padding: '12px 16px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          background: 'var(--bg-secondary)',
+          borderBottom: '1px solid var(--border)',
+          cursor: 'pointer',
+          transition: 'background 0.15s',
+          border: 'none',
+          color: 'inherit',
+        }}
       >
-        <div className="flex items-center gap-2">
-          <ControlsIcon className="w-4 h-4 text-secondary" />
-          <span className="text-[13px] font-medium text-primary">
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          <ControlsIcon style={{ width: 16, height: 16, color: 'var(--text-secondary)' }} />
+          <span style={{ fontSize: '13px', fontWeight: 500, color: 'var(--text-primary)' }}>
             Props Editor
           </span>
           {hasChanges && (
-            <span className="px-1.5 py-0.5 text-[10px] font-medium bg-[--color-accent] text-white rounded">
+            <span style={{ padding: '2px 6px', fontSize: '10px', fontWeight: 500, background: 'var(--color-accent)', color: '#fff', borderRadius: '4px' }}>
               Modified
             </span>
           )}
         </div>
         <ChevronDownIcon
-          className={clsx(
-            "w-4 h-4 text-tertiary transition-transform",
-            isCollapsed && "-rotate-90"
-          )}
+          style={{
+            width: 16,
+            height: 16,
+            color: 'var(--text-tertiary)',
+            transition: 'transform 0.15s',
+            transform: isCollapsed ? 'rotate(-90deg)' : 'rotate(0deg)',
+          }}
         />
       </button>
 
       {/* Content */}
       {!isCollapsed && (
-        <div className="p-4 space-y-4">
+        <div style={{ padding: '16px', display: 'flex', flexDirection: 'column', gap: '16px' }}>
           {/* 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"
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '6px',
+                padding: '6px 10px',
+                fontSize: '12px',
+                fontWeight: 500,
+                color: 'var(--color-accent)',
+                background: 'transparent',
+                border: 'none',
+                borderRadius: '4px',
+                cursor: 'pointer',
+                transition: 'background 0.15s',
+              }}
             >
-              <RefreshIcon className="w-3.5 h-3.5" />
+              <RefreshIcon style={{ width: 14, height: 14 }} />
               Reset to defaults
             </button>
           )}
 
           {/* Prop controls */}
-          <div className="space-y-3">
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
             {propEntries.map(([name, prop]) => (
               <PropControl
                 key={name}
@@ -195,8 +236,8 @@ function PropControl({
 
   if (compact) {
     return (
-      <div className="flex gap-2">
-        <label className="text-[11px] font-medium text-secondary font-mono whitespace-nowrap min-w-[100px]">
+      <div style={{ display: 'flex', gap: '8px' }}>
+        <label style={{ fontSize: '11px', fontWeight: 500, color: 'var(--text-secondary)', fontFamily: 'monospace', whiteSpace: 'nowrap', minWidth: '100px' }}>
           {name}
         </label>
         {getControlForProp(prop, displayValue, onChange, true)}
@@ -205,17 +246,17 @@ function PropControl({
   }
 
   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">
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+        <label style={{ fontSize: '12px', fontWeight: 500, color: 'var(--text-primary)', fontFamily: 'monospace' }}>
           {name}
           {prop.required && (
-            <span className="text-[--color-danger] ml-0.5">*</span>
+            <span style={{ color: 'var(--color-danger, #ef4444)', marginLeft: '2px' }}>*</span>
           )}
         </label>
-        <span className="text-[11px] text-tertiary">{prop.type}</span>
+        <span style={{ fontSize: '11px', color: 'var(--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">
+          <span style={{ fontSize: '10px', color: 'var(--text-tertiary)', background: 'var(--bg-secondary)', padding: '2px 6px', borderRadius: '4px' }}>
             {prop.controlType}
           </span>
         )}
@@ -224,7 +265,7 @@ function PropControl({
       {getControlForProp(prop, displayValue, onChange, false)}
 
       {prop.description && (
-        <p className="text-[11px] text-tertiary leading-relaxed">
+        <p style={{ fontSize: '11px', color: 'var(--text-tertiary)', lineHeight: 1.6 }}>
           {prop.description}
         </p>
       )}
@@ -240,20 +281,10 @@ function BooleanControl({
   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>
+    <Toggle
+      checked={value}
+      onChange={() => onChange(!value)}
+    />
   );
 }
 
@@ -267,17 +298,16 @@ function EnumControl({
   onChange: (v: string) => void;
 }) {
   return (
-    <select
+    <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"
+      onChange={(e: React.ChangeEvent<HTMLSelectElement>) => onChange(e.target.value)}
     >
       {values.map((v) => (
         <option key={v} value={v}>
           {v}
         </option>
       ))}
-    </select>
+    </Select>
   );
 }
 
@@ -289,17 +319,17 @@ function NumberControl({
   onChange: (v: number) => void;
 }) {
   return (
-    <input
+    <Input
       type="number"
       value={value ?? ""}
-      onChange={(e) =>
+      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
         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"
+      style={{ width: '128px', fontFamily: 'monospace' }}
     />
   );
 }
@@ -314,14 +344,14 @@ function StringControl({
   compact?: boolean;
 }) {
   return (
-    <input
+    <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]"
-      )}
+      onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
+      style={compact
+        ? { width: '96px', fontSize: '11px', fontFamily: 'monospace' }
+        : { width: '100%', maxWidth: '320px', fontFamily: 'monospace' }
+      }
     />
   );
 }
@@ -377,24 +407,56 @@ function FunctionControl({
 
   if (isEditing) {
     return (
-      <div className="flex flex-col gap-2 flex-1">
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', 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]"
+          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
         />
-        <div className="flex gap-1.5">
+        <div style={{ display: 'flex', gap: '6px' }}>
           <button
             onClick={handleSave}
-            className="px-2 py-1 text-[10px] font-medium bg-[--color-accent] text-white rounded hover:opacity-90 transition-opacity"
+            style={{
+              padding: '4px 8px',
+              fontSize: '10px',
+              fontWeight: 500,
+              background: 'var(--color-accent)',
+              color: '#fff',
+              borderRadius: '4px',
+              border: 'none',
+              cursor: 'pointer',
+              transition: 'opacity 0.15s',
+            }}
           >
             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"
+            style={{
+              padding: '4px 8px',
+              fontSize: '10px',
+              fontWeight: 500,
+              color: 'var(--text-tertiary)',
+              background: 'transparent',
+              borderRadius: '4px',
+              border: 'none',
+              cursor: 'pointer',
+              transition: 'color 0.15s, background 0.15s',
+            }}
           >
             Cancel
           </button>
@@ -406,7 +468,19 @@ function FunctionControl({
   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"
+      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()}
@@ -424,28 +498,35 @@ function ColorControl({
   presetColors?: string[];
 }) {
   return (
-    <div className="flex items-center gap-2">
+    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
       <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"
+        style={{ width: '32px', height: '32px', borderRadius: '4px', border: '1px solid var(--border)', cursor: 'pointer', background: 'transparent' }}
       />
-      <input
+      <Input
         type="text"
         value={value ?? ""}
-        onChange={(e) => onChange(e.target.value)}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => 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"
+        style={{ width: '96px', fontSize: '11px', fontFamily: 'monospace' }}
       />
       {presetColors && presetColors.length > 0 && (
-        <div className="flex gap-1 flex-wrap">
+        <div style={{ display: 'flex', gap: '4px', flexWrap: '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 }}
+              style={{
+                width: '20px',
+                height: '20px',
+                borderRadius: '4px',
+                border: '1px solid var(--border)',
+                backgroundColor: color,
+                cursor: 'pointer',
+                padding: 0,
+              }}
               title={color}
             />
           ))}
@@ -468,14 +549,13 @@ function DateControl({
     : "";
 
   return (
-    <input
+    <Input
       type="datetime-local"
       value={inputValue}
-      onChange={(e) => {
+      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
         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"
     />
   );
 }
@@ -494,7 +574,7 @@ function RangeControl({
   step?: number;
 }) {
   return (
-    <div className="flex items-center gap-3">
+    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
       <input
         type="range"
         value={value ?? min}
@@ -502,9 +582,9 @@ function RangeControl({
         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]"
+        style={{ flex: 1, height: '8px', background: 'var(--bg-secondary)', borderRadius: '8px', cursor: 'pointer', accentColor: 'var(--color-accent)' }}
       />
-      <span className="text-[11px] font-mono text-secondary min-w-[3rem] text-right">
+      <span style={{ fontSize: '11px', fontFamily: 'monospace', color: 'var(--text-secondary)', minWidth: '3rem', textAlign: 'right' }}>
         {value ?? min}
       </span>
     </div>

package/src/viewer/components/PropsTable.tsx

@@ -1,98 +1,111 @@
+import { useMemo } from 'react';
 import type { PropDefinition } from '../../core/index.js';
+import { Table, createColumns, Badge, Text, Stack } from '@fragments/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);
 
-  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>
+  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]
   );
-}
 
-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>
-    );
-  }
+  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 (
-    <code className="text-[12px] font-mono text-secondary">
-      {type}
-    </code>
+    <section id="props" style={{ scrollMarginTop: '96px' }}>
+      <Text as="h2" size="md" weight="semibold" style={{ marginBottom: '16px' }}>Props</Text>
+      <Table
+        columns={columns}
+        data={data}
+        size="sm"
+        bordered
+        getRowId={(row) => row.name}
+      />
+    </section>
   );
 }