@wire-dsl/web 0.0.7 → 0.1.0

package/src/components/WireLiveHeader.tsx

@@ -0,0 +1,469 @@
+import React from 'react';
+import { ChevronDown, Download, FolderOpen, Plus, Save, FileDown } from 'lucide-react';
+
+export interface WireLiveHeaderProps {
+  currentFileName: string;
+  isDirty: boolean;
+  onNew: () => void;
+  onOpen: () => void;
+  onSave: () => void;
+  onSaveAs?: () => void;
+  onRename: (newName: string) => void;
+  onExport: () => void;
+  onExampleSelect?: (exampleName: string) => void;
+  examples?: string[];
+}
+
+export const WireLiveHeader: React.FC<WireLiveHeaderProps> = ({
+  currentFileName,
+  isDirty,
+  onNew,
+  onOpen,
+  onSave,
+  onSaveAs,
+  onRename,
+  onExport,
+  onExampleSelect,
+  examples = [
+    'simple-dashboard',
+    'simple-multi-screen',
+    'admin-dashboard',
+    'form-example',
+    'analytics-dashboard',
+  ],
+}) => {
+  const [examplesOpen, setExamplesOpen] = React.useState(false);
+  const [isRenamingFile, setIsRenamingFile] = React.useState(false);
+  const [editingFileName, setEditingFileName] = React.useState(currentFileName);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  // Remove .wire extension from filename for display
+  const fileNameWithoutExt = React.useMemo(() => {
+    return currentFileName.endsWith('.wire') ? currentFileName.slice(0, -5) : currentFileName;
+  }, [currentFileName]);
+
+  React.useEffect(() => {
+    setEditingFileName(fileNameWithoutExt);
+  }, [fileNameWithoutExt]);
+
+  React.useEffect(() => {
+    if (isRenamingFile && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isRenamingFile]);
+
+  const handleRenameSubmit = () => {
+    if (editingFileName.trim()) {
+      const newNameWithoutExt = editingFileName.trim();
+      const newNameWithExt = newNameWithoutExt.endsWith('.wire')
+        ? newNameWithoutExt
+        : `${newNameWithoutExt}.wire`;
+
+      if (newNameWithExt !== currentFileName) {
+        onRename(newNameWithExt);
+      }
+    } else {
+      setEditingFileName(fileNameWithoutExt);
+    }
+    setIsRenamingFile(false);
+  };
+
+  const handleRenameKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleRenameSubmit();
+    } else if (e.key === 'Escape') {
+      setIsRenamingFile(false);
+      setEditingFileName(fileNameWithoutExt);
+    }
+  };
+
+  return (
+    <header
+      style={{
+        height: '64px',
+        backgroundColor: '#ffffff',
+        borderBottom: '1px solid #e5e7eb',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingLeft: '24px',
+        paddingRight: '24px',
+        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.05)',
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', gap: '24px' }}>
+        {/* Logo y nombre */}
+        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+          <div
+            style={{
+              width: '32px',
+              height: '32px',
+              backgroundColor: '#3b82f6',
+              borderRadius: '8px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontSize: '18px',
+              fontWeight: 'bold',
+            }}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="234"
+              height="242"
+              viewBox="0 0 234 242"
+              role="img"
+              aria-label="Wire-DSL logo"
+            >
+              <defs>
+                <radialGradient id="bgGrad" cx="30%" cy="25%" r="75%">
+                  <stop offset="0%" stopColor="#FFFFAA" stopOpacity="1" />
+                  <stop offset="55%" stopColor="#AAAAAA" stopOpacity="1" />
+                  <stop offset="100%" stopColor="#AADDDD" stopOpacity="1" />
+                </radialGradient>
+
+                <radialGradient id="nodeGrad" cx="33%" cy="33%" r="75%">
+                  <stop offset="0%" stopColor="#EEEEEE" stopOpacity="1" />
+                  <stop offset="100%" stopColor="#AAAAAA" stopOpacity="1" />
+                </radialGradient>
+
+                <linearGradient id="strokeGrad" x1="0" y1="0" x2="1" y2="1">
+                  <stop offset="0%" stopColor="#F4F4F4" stopOpacity="1" />
+                  <stop offset="100%" stopColor="#DADADA" stopOpacity="1" />
+                </linearGradient>
+              </defs>
+
+              <g fill="none" strokeLinecap="round" strokeLinejoin="round" transform="translate(0, 30)">
+                <g>
+                  <circle cx="44" cy="45" r="15" fill="url(#nodeGrad)" />
+                  <circle cx="86" cy="136" r="15" fill="url(#nodeGrad)" />
+                  <circle cx="117" cy="56" r="15" fill="url(#nodeGrad)" />
+                  <circle cx="148" cy="136" r="15" fill="url(#nodeGrad)" />
+                  <circle cx="190" cy="45" r="15" fill="url(#nodeGrad)" />
+                </g>
+
+                <path
+                  d="M 44 45 L 86 136 L 117 56 L 148 136 L 190 45"
+                  stroke="url(#strokeGrad)"
+                  strokeWidth="18"
+                />
+              </g>
+            </svg>
+          </div>
+          <h1 style={{ fontSize: '18px', fontWeight: '600', color: '#111827', margin: 0 }}>
+            Wire Live
+          </h1>
+          <span
+            style={{
+              fontSize: '11px',
+              backgroundColor: '#f3f4f6',
+              color: '#4b5563',
+              paddingLeft: '8px',
+              paddingRight: '8px',
+              paddingTop: '4px',
+              paddingBottom: '4px',
+              borderRadius: '6px',
+              fontWeight: '500',
+            }}
+          >
+            open-source
+          </span>
+        </div>
+
+        {/* Separador */}
+        <div style={{ width: '1px', height: '32px', backgroundColor: '#e5e7eb' }} />
+
+        {/* Archivo actual */}
+        <div
+          style={{
+            fontSize: '14px',
+            color: '#4b5563',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+          }}
+        >
+          {isRenamingFile ? (
+            <input
+              ref={inputRef}
+              type="text"
+              value={editingFileName}
+              onChange={(e) => setEditingFileName(e.target.value)}
+              onBlur={handleRenameSubmit}
+              onKeyDown={handleRenameKeyDown}
+              style={{
+                fontSize: '14px',
+                fontWeight: '500',
+                color: '#111827',
+                padding: '4px 8px',
+                border: '2px solid #3b82f6',
+                borderRadius: '4px',
+                fontFamily: 'inherit',
+                outline: 'none',
+              }}
+            />
+          ) : (
+            <span
+              onClick={() => setIsRenamingFile(true)}
+              style={{
+                fontWeight: '500',
+                color: '#111827',
+                cursor: 'pointer',
+                padding: '4px 6px',
+                borderRadius: '4px',
+                transition: 'background-color 0.2s',
+              }}
+              onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = '#f3f4f6')}
+              onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = 'transparent')}
+              title="Click to rename"
+            >
+              {currentFileName}
+            </span>
+          )}
+          {isDirty && <span style={{ color: '#f59e0b', fontSize: '10px' }}>● unsaved</span>}
+        </div>
+      </div>
+
+      {/* Botones de acción */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+        {/* Nuevo */}
+        <button
+          onClick={onNew}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            paddingLeft: '12px',
+            paddingRight: '12px',
+            paddingTop: '8px',
+            paddingBottom: '8px',
+            fontSize: '14px',
+            fontWeight: '500',
+            color: '#374151',
+            backgroundColor: 'transparent',
+            border: 'none',
+            borderRadius: '6px',
+            cursor: 'pointer',
+            transition: 'background-color 0.2s',
+          }}
+          onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = '#f3f4f6')}
+          onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = 'transparent')}
+          title="Nuevo archivo (Ctrl+N)"
+        >
+          <Plus size={16} />
+          New
+        </button>
+
+        {/* Abrir */}
+        <button
+          onClick={onOpen}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            paddingLeft: '12px',
+            paddingRight: '12px',
+            paddingTop: '8px',
+            paddingBottom: '8px',
+            fontSize: '14px',
+            fontWeight: '500',
+            color: '#374151',
+            backgroundColor: 'transparent',
+            border: 'none',
+            borderRadius: '6px',
+            cursor: 'pointer',
+            transition: 'background-color 0.2s',
+          }}
+          onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = '#f3f4f6')}
+          onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = 'transparent')}
+          title="Abrir archivo (Ctrl+O)"
+        >
+          <FolderOpen size={16} />
+          Open
+        </button>
+
+        {/* Guardar */}
+        <button
+          onClick={onSave}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            paddingLeft: '12px',
+            paddingRight: '12px',
+            paddingTop: '8px',
+            paddingBottom: '8px',
+            fontSize: '14px',
+            fontWeight: '500',
+            color: isDirty ? '#3b82f6' : '#374151',
+            backgroundColor: isDirty ? '#eff6ff' : 'transparent',
+            border: isDirty ? '1px solid #93c5fd' : 'none',
+            borderRadius: '6px',
+            cursor: 'pointer',
+            transition: 'all 0.2s',
+          }}
+          onMouseEnter={(e) => {
+            if (isDirty) {
+              e.currentTarget.style.backgroundColor = '#dbeafe';
+            } else {
+              e.currentTarget.style.backgroundColor = '#f3f4f6';
+            }
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.backgroundColor = isDirty ? '#eff6ff' : 'transparent';
+          }}
+          title="Guardar archivo (Ctrl+S)"
+        >
+          <Save size={16} />
+          Save
+        </button>
+
+        {/* Guardar Como */}
+        {onSaveAs && (
+          <button
+            onClick={onSaveAs}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              paddingLeft: '12px',
+              paddingRight: '12px',
+              paddingTop: '8px',
+              paddingBottom: '8px',
+              fontSize: '14px',
+              fontWeight: '500',
+              color: '#374151',
+              backgroundColor: 'transparent',
+              border: 'none',
+              borderRadius: '6px',
+              cursor: 'pointer',
+              transition: 'background-color 0.2s',
+            }}
+            onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = '#f3f4f6')}
+            onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = 'transparent')}
+            title="Guardar como (Ctrl+Shift+S)"
+          >
+            <FileDown size={16} />
+            Save As
+          </button>
+        )}
+
+        {/* Ejemplos */}
+        <div style={{ position: 'relative' }}>
+          <button
+            onClick={() => setExamplesOpen(!examplesOpen)}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              paddingLeft: '12px',
+              paddingRight: '12px',
+              paddingTop: '8px',
+              paddingBottom: '8px',
+              fontSize: '14px',
+              fontWeight: '500',
+              color: '#374151',
+              backgroundColor: 'transparent',
+              border: 'none',
+              borderRadius: '6px',
+              cursor: 'pointer',
+              transition: 'background-color 0.2s',
+            }}
+            onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = '#f3f4f6')}
+            onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = 'transparent')}
+          >
+            Examples
+            <ChevronDown
+              size={16}
+              style={{
+                transform: examplesOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+                transition: 'transform 0.2s',
+              }}
+            />
+          </button>
+
+          {examplesOpen && (
+            <div
+              style={{
+                position: 'absolute',
+                top: '100%',
+                right: '0',
+                marginTop: '8px',
+                backgroundColor: '#ffffff',
+                border: '1px solid #e5e7eb',
+                borderRadius: '8px',
+                boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
+                zIndex: 1000,
+                minWidth: '160px',
+              }}
+            >
+              {examples.map((example, index) => (
+                <button
+                  key={example}
+                  onClick={() => {
+                    onExampleSelect?.(example);
+                    setExamplesOpen(false);
+                  }}
+                  style={{
+                    width: '100%',
+                    textAlign: 'left',
+                    paddingLeft: '16px',
+                    paddingRight: '16px',
+                    paddingTop: '10px',
+                    paddingBottom: '10px',
+                    fontSize: '14px',
+                    color: '#374151',
+                    backgroundColor: 'transparent',
+                    border: 'none',
+                    cursor: 'pointer',
+                    transition: 'background-color 0.2s',
+                    borderTopLeftRadius: index === 0 ? '8px' : '0px',
+                    borderTopRightRadius: index === 0 ? '8px' : '0px',
+                    borderBottomLeftRadius: index === examples.length - 1 ? '8px' : '0px',
+                    borderBottomRightRadius: index === examples.length - 1 ? '8px' : '0px',
+                  }}
+                  onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = '#f9fafb')}
+                  onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = 'transparent')}
+                >
+                  {example}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Separador */}
+        <div style={{ width: '1px', height: '32px', backgroundColor: '#e5e7eb' }} />
+
+        {/* Exportar */}
+        <button
+          onClick={onExport}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            paddingLeft: '16px',
+            paddingRight: '16px',
+            paddingTop: '8px',
+            paddingBottom: '8px',
+            fontSize: '14px',
+            fontWeight: '600',
+            color: '#ffffff',
+            backgroundColor: '#3b82f6',
+            border: 'none',
+            borderRadius: '6px',
+            cursor: 'pointer',
+            transition: 'background-color 0.2s',
+          }}
+          onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = '#2563eb')}
+          onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = '#3b82f6')}
+          title="Exportar como SVG"
+        >
+          <Download size={16} />
+          Export SVG
+        </button>
+      </div>
+    </header>
+  );
+};

package/src/components/index.ts

@@ -0,0 +1,5 @@
+export { WireLiveEditor } from './WireLiveEditor';
+export { WireLiveHeader } from './WireLiveHeader';
+export { MonacoEditorComponent } from './MonacoEditorComponent';
+export type { MonacoEditorProps } from './MonacoEditorComponent';
+export type { WireLiveHeaderProps } from './WireLiveHeader';

package/src/hooks/useCanvasZoom.ts

@@ -0,0 +1,137 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+
+export interface CanvasZoomState {
+  zoom: number;
+  fitZoom: number;
+}
+
+/**
+ * Canvas zoom hook - manages zoom level exactly like VS Code extension
+ * - Stores original SVG dimensions (extracted from DOM, not prop)
+ * - Calculates fitZoom based on available space when preview ref is ready
+ * - Defaults to fitZoom on mount
+ * - Uses scale multiplier for zoom calculations
+ */
+export const useCanvasZoom = () => {
+  const [state, setState] = useState<CanvasZoomState>({
+    zoom: 1,
+    fitZoom: 1,
+  });
+
+  const previewRef = useRef<HTMLDivElement | null>(null);
+  const svgOriginalWidthRef = useRef<number>(0);
+  const svgOriginalHeightRef = useRef<number>(0);
+
+  /**
+   * Calculate fit zoom based on available preview space
+   * Same formula as VS Code extension
+   */
+  const calculateFitZoom = useCallback(() => {
+    if (!previewRef.current || svgOriginalWidthRef.current <= 0 || svgOriginalHeightRef.current <= 0) {
+      return 1;
+    }
+
+    const padding = 40;
+    const availWidth = previewRef.current.clientWidth - padding;
+    const availHeight = previewRef.current.clientHeight - padding;
+
+    const fit = Math.min(
+      availWidth / svgOriginalWidthRef.current,
+      availHeight / svgOriginalHeightRef.current
+    );
+    
+    // Return fit value clamped to [0.1, 1]
+    return Math.min(fit, 1);
+  }, []);
+
+  /**
+   * Extract original SVG dimensions from DOM and initialize zoom
+   * Called when SVG is first rendered. Only initializes zoom on first call.
+   * Subsequent calls only update original dimensions.
+   */
+  const extractAndInitialize = useCallback(() => {
+    if (!previewRef.current) return;
+
+    const svgElement = previewRef.current.querySelector('svg');
+    if (!svgElement) return;
+
+    // Extract width and height from SVG attributes (set by renderToSVG)
+    const width = parseFloat(svgElement.getAttribute('width') || '0');
+    const height = parseFloat(svgElement.getAttribute('height') || '0');
+
+    if (width > 0 && height > 0) {
+      const isFirstTime = svgOriginalWidthRef.current === 0;
+      
+      svgOriginalWidthRef.current = width;
+      svgOriginalHeightRef.current = height;
+
+      // Only initialize zoom on first extraction
+      if (isFirstTime) {
+        const fitZoomValue = calculateFitZoom();
+        setState({
+          zoom: fitZoomValue,
+          fitZoom: fitZoomValue,
+        });
+      } else {
+        // Subsequent calls: update fitZoom in case viewport changed, but keep zoom as-is
+        const fitZoomValue = calculateFitZoom();
+        setState((prev) => ({
+          ...prev,
+          fitZoom: fitZoomValue,
+        }));
+      }
+    }
+  }, [calculateFitZoom]);
+
+
+
+  const zoomIn = useCallback(() => {
+    setState((prev) => ({
+      ...prev,
+      zoom: Math.min(prev.zoom + 0.1, 3),
+    }));
+  }, []);
+
+  const zoomOut = useCallback(() => {
+    setState((prev) => ({
+      ...prev,
+      zoom: Math.max(prev.zoom - 0.1, 0.1),
+    }));
+  }, []);
+
+  const resetZoom = useCallback(() => {
+    setState((prev) => ({
+      ...prev,
+      zoom: prev.fitZoom,
+    }));
+  }, []);
+
+  const handleWheel = useCallback(
+    (e: React.WheelEvent<HTMLDivElement>) => {
+      if (!e.ctrlKey && !e.metaKey) return;
+
+      e.preventDefault();
+      const direction = e.deltaY > 0 ? -1 : 1;
+      setState((prev) => ({
+        ...prev,
+        zoom: Math.max(0.1, Math.min(prev.zoom + 0.1 * direction, 3)),
+      }));
+    },
+    []
+  );
+
+  return {
+    zoom: state.zoom,
+    fitZoom: state.fitZoom,
+    originalWidth: svgOriginalWidthRef.current,
+    originalHeight: svgOriginalHeightRef.current,
+    zoomIn,
+    zoomOut,
+    resetZoom,
+    handleWheel,
+    setPreviewRef: (ref: HTMLDivElement | null) => {
+      previewRef.current = ref;
+    },
+    extractAndInitialize,
+  };
+};