@codellyson/framely-cli 0.1.0

package/studio/CompositionsView.jsx

@@ -0,0 +1,327 @@
+import { useState, useEffect } from 'react';
+import { TimelineProvider, getCompositionTree } from '@codellyson/framely';
+import { PlayerView } from './player/Player';
+import { RenderDialog } from './RenderDialog';
+import { ExportDialog } from './ShareDialog';
+import { TemplatesMarketplace } from './templates';
+import { PropsEditor } from './PropsEditor';
+import './CompositionsView.css';
+
+/**
+ * CompositionsView - Browse, preview, and export code-defined compositions.
+ * Includes a marketplace tab for discovering and using templates.
+ */
+export function CompositionsView({
+  compositions,
+  selectedId,
+  onSelectComposition,
+  onUseTemplate,
+}) {
+  const [activeTab, setActiveTab] = useState('compositions');
+  const [renderDialogOpen, setRenderDialogOpen] = useState(false);
+  const [exportDialogOpen, setExportDialogOpen] = useState(false);
+  const [expandedFolders, setExpandedFolders] = useState(new Set(['Tests', 'Templates']));
+  const [customProps, setCustomProps] = useState({});
+
+  const _compositionTree = getCompositionTree(); // For future use with folder tree
+  const selectedComp = compositions[selectedId];
+
+  // Reset custom props when composition changes
+  useEffect(() => {
+    if (selectedComp?.defaultProps) {
+      setCustomProps({ ...selectedComp.defaultProps });
+    } else {
+      setCustomProps({});
+    }
+  }, [selectedId, selectedComp?.defaultProps]);
+
+  // Current props = default props merged with custom edits
+  const currentProps = { ...(selectedComp?.defaultProps || {}), ...customProps };
+
+  // Toggle folder expansion
+  const toggleFolder = (folderName) => {
+    setExpandedFolders((prev) => {
+      const next = new Set(prev);
+      if (next.has(folderName)) {
+        next.delete(folderName);
+      } else {
+        next.add(folderName);
+      }
+      return next;
+    });
+  };
+
+  // Group compositions by folder
+  const groupedComps = {};
+  const rootComps = [];
+
+  Object.values(compositions).forEach((comp) => {
+    const folderPath = comp.folderPath || [];
+    if (folderPath.length > 0) {
+      const folder = folderPath[0];
+      if (!groupedComps[folder]) {
+        groupedComps[folder] = [];
+      }
+      groupedComps[folder].push(comp);
+    } else {
+      rootComps.push(comp);
+    }
+  });
+
+  // Handle using a template
+  const handleUseTemplate = (template, customId, customProps) => {
+    onUseTemplate?.(template, customId, customProps);
+    setActiveTab('compositions');
+  };
+
+  return (
+    <div className="compositions-view">
+      {/* Sidebar */}
+      <aside className="compositions-sidebar">
+        {/* Tab Switcher */}
+        <div className="compositions-tabs">
+          <button
+            className={`compositions-tab ${activeTab === 'compositions' ? 'active' : ''}`}
+            onClick={() => setActiveTab('compositions')}
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <rect x="3" y="3" width="7" height="7" rx="1" />
+              <rect x="14" y="3" width="7" height="7" rx="1" />
+              <rect x="3" y="14" width="7" height="7" rx="1" />
+              <rect x="14" y="14" width="7" height="7" rx="1" />
+            </svg>
+            Compositions
+          </button>
+          <button
+            className={`compositions-tab ${activeTab === 'marketplace' ? 'active' : ''}`}
+            onClick={() => setActiveTab('marketplace')}
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
+              <polyline points="9,22 9,12 15,12 15,22" />
+            </svg>
+            Marketplace
+          </button>
+        </div>
+
+        {activeTab === 'compositions' && (
+          <>
+            <div className="compositions-sidebar-header">
+              <h3>My Compositions</h3>
+              <span className="compositions-count">{Object.keys(compositions).length}</span>
+            </div>
+
+            <div className="compositions-list">
+          {/* Root-level compositions */}
+          {rootComps.map((comp) => (
+            <button
+              key={comp.id}
+              className={`compositions-item ${comp.id === selectedId ? 'active' : ''}`}
+              onClick={() => onSelectComposition(comp.id)}
+            >
+              <span className="compositions-item-icon">🎬</span>
+              <div className="compositions-item-info">
+                <div className="compositions-item-name">{comp.id}</div>
+                <div className="compositions-item-meta">
+                  {comp.width}×{comp.height} • {comp.fps}fps
+                </div>
+              </div>
+            </button>
+          ))}
+
+          {/* Folders */}
+          {Object.entries(groupedComps).map(([folder, comps]) => (
+            <div key={folder} className="compositions-folder">
+              <button
+                className="compositions-folder-header"
+                onClick={() => toggleFolder(folder)}
+              >
+                <span className="compositions-folder-icon">
+                  {expandedFolders.has(folder) ? '▼' : '▶'}
+                </span>
+                <span className="compositions-folder-name">{folder}</span>
+                <span className="compositions-folder-count">{comps.length}</span>
+              </button>
+              {expandedFolders.has(folder) && (
+                <div className="compositions-folder-items">
+                  {comps.map((comp) => (
+                    <button
+                      key={comp.id}
+                      className={`compositions-item ${comp.id === selectedId ? 'active' : ''}`}
+                      onClick={() => onSelectComposition(comp.id)}
+                    >
+                      <span className="compositions-item-icon">🎬</span>
+                      <div className="compositions-item-info">
+                        <div className="compositions-item-name">{comp.id}</div>
+                        <div className="compositions-item-meta">
+                          {comp.width}×{comp.height} • {comp.fps}fps
+                        </div>
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          ))}
+            </div>
+          </>
+        )}
+
+        {activeTab === 'marketplace' && (
+          <div className="compositions-sidebar-marketplace">
+            <p>Browse templates in the main panel</p>
+          </div>
+        )}
+      </aside>
+
+      {/* Main - Preview or Marketplace */}
+      <main className="compositions-main">
+        {activeTab === 'marketplace' ? (
+          <TemplatesMarketplace onUseTemplate={handleUseTemplate} />
+        ) : selectedComp ? (
+          selectedComp.component ? (
+            <TimelineProvider
+              fps={selectedComp.fps}
+              width={selectedComp.width}
+              height={selectedComp.height}
+              durationInFrames={selectedComp.durationInFrames}
+            >
+              <PlayerView
+                component={selectedComp.component}
+                compositionWidth={selectedComp.width}
+                compositionHeight={selectedComp.height}
+                inputProps={currentProps}
+              />
+            </TimelineProvider>
+          ) : (
+            <div className="compositions-template-placeholder">
+              <div className="template-placeholder-content">
+                <div className="template-placeholder-icon">📦</div>
+                <h3>{selectedComp._templateName || selectedComp.id}</h3>
+                <p>Template from marketplace</p>
+                <div className="template-placeholder-info">
+                  <span>{selectedComp.width}×{selectedComp.height}</span>
+                  <span>{selectedComp.fps} fps</span>
+                  <span>{(selectedComp.durationInFrames / selectedComp.fps).toFixed(1)}s</span>
+                </div>
+                <p className="template-placeholder-note">
+                  Remote template loading coming soon
+                </p>
+              </div>
+            </div>
+          )
+        ) : (
+          <div className="compositions-empty">
+            <p>Select a composition to preview</p>
+          </div>
+        )}
+      </main>
+
+      {/* Info Panel */}
+      <aside className="compositions-info">
+        {selectedComp ? (
+          <>
+            <div className="compositions-info-header">
+              <h2>{selectedComp.id}</h2>
+              {selectedComp.folderPath?.length > 0 && (
+                <span className="compositions-info-folder">
+                  {selectedComp.folderPath.join(' / ')}
+                </span>
+              )}
+            </div>
+
+            <div className="compositions-info-section">
+              <h4>Dimensions</h4>
+              <div className="compositions-info-grid">
+                <div className="compositions-info-item">
+                  <span className="label">Width</span>
+                  <span className="value">{selectedComp.width}px</span>
+                </div>
+                <div className="compositions-info-item">
+                  <span className="label">Height</span>
+                  <span className="value">{selectedComp.height}px</span>
+                </div>
+              </div>
+            </div>
+
+            <div className="compositions-info-section">
+              <h4>Timing</h4>
+              <div className="compositions-info-grid">
+                <div className="compositions-info-item">
+                  <span className="label">FPS</span>
+                  <span className="value">{selectedComp.fps}</span>
+                </div>
+                <div className="compositions-info-item">
+                  <span className="label">Frames</span>
+                  <span className="value">{selectedComp.durationInFrames}</span>
+                </div>
+                <div className="compositions-info-item full-width">
+                  <span className="label">Duration</span>
+                  <span className="value">
+                    {(selectedComp.durationInFrames / selectedComp.fps).toFixed(2)}s
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            {/* Props Editor - Customize template properties */}
+            {Object.keys(selectedComp.defaultProps || {}).length > 0 && (
+              <div className="compositions-info-section">
+                <h4>Customize</h4>
+                <PropsEditor
+                  defaultProps={selectedComp.defaultProps}
+                  onChange={setCustomProps}
+                />
+              </div>
+            )}
+
+            <div className="compositions-info-actions">
+              <button
+                className="compositions-action-btn primary"
+                onClick={() => setRenderDialogOpen(true)}
+              >
+                <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+                  <path d="M8 1v6h6M8 1L2 7l6 6V7" />
+                </svg>
+                Render Video
+              </button>
+              <button
+                className="compositions-action-btn"
+                onClick={() => setExportDialogOpen(true)}
+              >
+                <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
+                  <path d="M8 2v8M5 7l3 3 3-3M3 12v2h10v-2" />
+                </svg>
+                Export
+              </button>
+            </div>
+          </>
+        ) : (
+          <div className="compositions-info-empty">
+            <p>No composition selected</p>
+          </div>
+        )}
+      </aside>
+
+      {/* Dialogs */}
+      {selectedComp && (
+        <>
+          <RenderDialog
+            open={renderDialogOpen}
+            onClose={() => setRenderDialogOpen(false)}
+            composition={selectedComp}
+            inputProps={currentProps}
+          />
+          <ExportDialog
+            open={exportDialogOpen}
+            onClose={() => setExportDialogOpen(false)}
+            composition={selectedComp}
+            inputProps={currentProps}
+          />
+        </>
+      )}
+    </div>
+  );
+}
+
+export default CompositionsView;

package/studio/PropsEditor.css

@@ -0,0 +1,195 @@
+.props-editor {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4, 16px);
+  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
+}
+
+.props-editor-empty {
+  color: var(--zinc-500, #71717a);
+  font-size: var(--text-sm, 13px);
+  text-align: center;
+  padding: var(--space-5, 20px);
+}
+
+.props-editor-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1-5, 6px);
+}
+
+.props-editor-label {
+  font-size: var(--text-xs, 12px);
+  font-weight: 500;
+  color: var(--zinc-400, #a1a1aa);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* Text Input */
+.props-editor-text,
+.props-editor-number {
+  width: 100%;
+  padding: var(--space-2-5, 10px) var(--space-3, 12px);
+  font-size: var(--text-sm, 14px);
+  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
+  color: var(--zinc-100, #f4f4f5);
+  background: var(--zinc-800, #27272a);
+  border: 1px solid var(--zinc-700, #3f3f46);
+  border-radius: var(--radius-md, 6px);
+  outline: none;
+  transition: border-color var(--transition-fast, 0.2s), box-shadow var(--transition-fast, 0.2s);
+}
+
+.props-editor-text:focus,
+.props-editor-number:focus {
+  border-color: var(--indigo-500, #6366f1);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
+
+/* Textarea */
+.props-editor-textarea {
+  width: 100%;
+  padding: var(--space-2-5, 10px) var(--space-3, 12px);
+  font-size: var(--text-sm, 14px);
+  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
+  color: var(--zinc-100, #f4f4f5);
+  background: var(--zinc-800, #27272a);
+  border: 1px solid var(--zinc-700, #3f3f46);
+  border-radius: var(--radius-md, 6px);
+  outline: none;
+  resize: vertical;
+  min-height: 60px;
+  transition: border-color var(--transition-fast, 0.2s), box-shadow var(--transition-fast, 0.2s);
+}
+
+.props-editor-textarea:focus {
+  border-color: var(--indigo-500, #6366f1);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
+
+/* Color Input */
+.props-editor-color-input {
+  display: flex;
+  gap: var(--space-2, 8px);
+  align-items: center;
+}
+
+.props-editor-color-input input[type="color"] {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-md, 6px);
+  cursor: pointer;
+  background: none;
+}
+
+.props-editor-color-input input[type="color"]::-webkit-color-swatch-wrapper {
+  padding: 2px;
+}
+
+.props-editor-color-input input[type="color"]::-webkit-color-swatch {
+  border: 2px solid var(--zinc-700, #3f3f46);
+  border-radius: var(--radius-sm, 4px);
+}
+
+.props-editor-color-input input[type="text"] {
+  flex: 1;
+  padding: var(--space-2-5, 10px) var(--space-3, 12px);
+  font-size: var(--text-sm, 14px);
+  font-family: var(--font-mono, 'JetBrains Mono', monospace);
+  color: var(--zinc-100, #f4f4f5);
+  background: var(--zinc-800, #27272a);
+  border: 1px solid var(--zinc-700, #3f3f46);
+  border-radius: var(--radius-md, 6px);
+  outline: none;
+}
+
+.props-editor-color-input input[type="text"]:focus {
+  border-color: var(--indigo-500, #6366f1);
+}
+
+/* Color Array */
+.props-editor-color-array {
+  display: flex;
+  gap: var(--space-2, 8px);
+  flex-wrap: wrap;
+}
+
+.props-editor-color-array input[type="color"] {
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-md, 6px);
+  cursor: pointer;
+  background: none;
+}
+
+.props-editor-color-array input[type="color"]::-webkit-color-swatch-wrapper {
+  padding: 2px;
+}
+
+.props-editor-color-array input[type="color"]::-webkit-color-swatch {
+  border: 2px solid var(--zinc-700, #3f3f46);
+  border-radius: var(--radius-sm, 4px);
+}
+
+/* Toggle Switch */
+.props-editor-toggle {
+  position: relative;
+  display: inline-block;
+  width: 48px;
+  height: 26px;
+  cursor: pointer;
+}
+
+.props-editor-toggle input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.props-editor-toggle-slider {
+  position: absolute;
+  inset: 0;
+  background: var(--zinc-800, #27272a);
+  border: 1px solid var(--zinc-700, #3f3f46);
+  border-radius: 26px;
+  transition: var(--transition-fast, 0.2s);
+}
+
+.props-editor-toggle-slider::before {
+  content: '';
+  position: absolute;
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  background: var(--zinc-500, #71717a);
+  border-radius: 50%;
+  transition: var(--transition-fast, 0.2s);
+}
+
+.props-editor-toggle input:checked + .props-editor-toggle-slider {
+  background: var(--indigo-500, #6366f1);
+  border-color: var(--indigo-500, #6366f1);
+}
+
+.props-editor-toggle input:checked + .props-editor-toggle-slider::before {
+  transform: translateX(22px);
+  background: #fff;
+}
+
+/* Number Input Specific */
+.props-editor-number {
+  font-family: var(--font-mono, 'JetBrains Mono', monospace);
+  -moz-appearance: textfield;
+}
+
+.props-editor-number::-webkit-outer-spin-button,
+.props-editor-number::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}

package/studio/PropsEditor.tsx

@@ -0,0 +1,176 @@
+import { useState, useEffect } from 'react';
+import './PropsEditor.css';
+
+interface PropsEditorProps {
+  defaultProps: Record<string, unknown>;
+  onChange: (props: Record<string, unknown>) => void;
+}
+
+/**
+ * PropsEditor - Visual editor for composition props
+ * Auto-detects prop types and renders appropriate inputs
+ */
+export function PropsEditor({ defaultProps, onChange }: PropsEditorProps) {
+  const [props, setProps] = useState<Record<string, unknown>>({ ...defaultProps });
+
+  useEffect(() => {
+    setProps({ ...defaultProps });
+  }, [defaultProps]);
+
+  const handleChange = (key: string, value: unknown) => {
+    const newProps = { ...props, [key]: value };
+    setProps(newProps);
+    onChange(newProps);
+  };
+
+  const detectType = (key: string, value: unknown): string => {
+    // Check by key name patterns
+    const keyLower = key.toLowerCase();
+    if (keyLower.includes('color') || keyLower.includes('background')) return 'color';
+    if (keyLower.includes('show') || keyLower.includes('enable') || keyLower.includes('is')) return 'boolean';
+
+    // Check by value type
+    if (typeof value === 'boolean') return 'boolean';
+    if (typeof value === 'number') return 'number';
+    if (typeof value === 'string') {
+      // Check if it's a color hex
+      if (/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(value)) return 'color';
+      // Check if it's a long text
+      if (value.length > 50) return 'textarea';
+      return 'text';
+    }
+    if (Array.isArray(value)) return 'array';
+
+    return 'text';
+  };
+
+  const formatLabel = (key: string): string => {
+    return key
+      .replace(/([A-Z])/g, ' $1')
+      .replace(/^./, (str) => str.toUpperCase())
+      .trim();
+  };
+
+  const renderInput = (key: string, value: unknown) => {
+    const type = detectType(key, value);
+
+    switch (type) {
+      case 'color':
+        return (
+          <div className="props-editor-color-input">
+            <input
+              type="color"
+              value={String(value)}
+              onChange={(e) => handleChange(key, e.target.value)}
+            />
+            <input
+              type="text"
+              value={String(value)}
+              onChange={(e) => handleChange(key, e.target.value)}
+              placeholder="#000000"
+            />
+          </div>
+        );
+
+      case 'boolean':
+        return (
+          <label className="props-editor-toggle">
+            <input
+              type="checkbox"
+              checked={Boolean(value)}
+              onChange={(e) => handleChange(key, e.target.checked)}
+            />
+            <span className="props-editor-toggle-slider" />
+          </label>
+        );
+
+      case 'number':
+        return (
+          <input
+            type="number"
+            value={Number(value)}
+            onChange={(e) => handleChange(key, parseFloat(e.target.value) || 0)}
+            className="props-editor-number"
+          />
+        );
+
+      case 'textarea':
+        return (
+          <textarea
+            value={String(value)}
+            onChange={(e) => handleChange(key, e.target.value)}
+            className="props-editor-textarea"
+            rows={3}
+          />
+        );
+
+      case 'array':
+        // For color arrays, show multiple color pickers
+        if (Array.isArray(value) && value.every((v) => typeof v === 'string' && v.startsWith('#'))) {
+          return (
+            <div className="props-editor-color-array">
+              {(value as string[]).map((color, i) => (
+                <input
+                  key={i}
+                  type="color"
+                  value={color}
+                  onChange={(e) => {
+                    const newArray = [...(value as string[])];
+                    newArray[i] = e.target.value;
+                    handleChange(key, newArray);
+                  }}
+                />
+              ))}
+            </div>
+          );
+        }
+        return (
+          <input
+            type="text"
+            value={JSON.stringify(value)}
+            onChange={(e) => {
+              try {
+                handleChange(key, JSON.parse(e.target.value));
+              } catch {
+                // Invalid JSON, ignore
+              }
+            }}
+            className="props-editor-text"
+          />
+        );
+
+      default:
+        return (
+          <input
+            type="text"
+            value={String(value)}
+            onChange={(e) => handleChange(key, e.target.value)}
+            className="props-editor-text"
+          />
+        );
+    }
+  };
+
+  const entries = Object.entries(props);
+
+  if (entries.length === 0) {
+    return (
+      <div className="props-editor-empty">
+        <p>No customizable properties</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="props-editor">
+      {entries.map(([key, value]) => (
+        <div key={key} className="props-editor-field">
+          <label className="props-editor-label">{formatLabel(key)}</label>
+          {renderInput(key, value)}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default PropsEditor;