@flow.os/style 0.0.1-dev.1771785969 → 0.0.1-dev.1771840262

package/visual-builder.ts

@@ -0,0 +1,822 @@
+/**
+ * Visual Style Builder – vanilla DOM.
+ * Con previewIframe: applicazione istantanea nel preview (zero latency) + patch al file in background.
+ * Senza: solo patch al file. Apri /builder.html per l’esperienza con iframe (nessun refresh).
+ */
+import { SHORTHAND_MAP, CSS_TO_SHORTHAND } from './shorthand.js';
+import type { StyleShorthandKey } from './shorthand.js';
+
+const PANEL_WIDTH = 300;
+const FLOW_STYLE_BUILDER_BUTTON_ID = 'flowStyleBuilder';
+const PANEL_ID = 'flowStyleBuilderPanel';
+const HIGHLIGHT_ID = 'flowStyleBuilderHighlight';
+const OVERLAY_ID = 'flowStyleBuilderOverlay';
+const PATCH_SERVER_URL = 'http://127.0.0.1:3757';
+const DEBOUNCE_MS = 300;
+const STORAGE_KEY_FILE = 'flowStyleBuilderFile';
+const STORAGE_KEY_LINE = 'flowStyleBuilderLine';
+
+const THEME = {
+  bg: '#0f1419',
+  surface: '#1a1f26',
+  border: '#2d3748',
+  accent: '#14b8a6',
+  accentDim: '#0d9488',
+  text: '#e2e8f0',
+  muted: '#94a3b8',
+} as const;
+
+export type VisualStyleBuilderOptions = {
+  /** Iframe che mostra l’app (stesso origin). Se presente: feedback istantaneo nel preview + nessun refresh. */
+  previewIframe?: HTMLIFrameElement;
+};
+
+type Overrides = Partial<Record<StyleShorthandKey | string, number | string>>;
+
+const GROUPS: { label: string; keys: (keyof typeof SHORTHAND_MAP)[] }[] = [
+  { label: 'Dimensioni', keys: ['w', 'h', 'minW', 'minH', 'maxW', 'maxH'] },
+  { label: 'Tipografia & colore', keys: ['text', 'color', 'bg'] },
+  { label: 'Layout', keys: ['display', 'flex', 'gap'] },
+  { label: 'Bordo & effetto', keys: ['rounded', 'opacity', 'scale'] },
+  { label: 'Posizione', keys: ['top', 'left', 'right', 'bottom'] },
+];
+
+const NUM_KEYS = new Set([
+  'p', 'pt', 'pr', 'pb', 'pl', 'm', 'mt', 'mr', 'mb', 'ml',
+  'w', 'h', 'minW', 'minH', 'maxW', 'maxH', 'gap', 'rounded', 'text', 'opacity',
+  'top', 'left', 'right', 'bottom',
+]);
+
+function getCssProp(shorthand: string): string | undefined {
+  return shorthand in SHORTHAND_MAP ? (SHORTHAND_MAP as Record<string, string>)[shorthand] : undefined;
+}
+
+function applyToElement(el: HTMLElement, shorthand: string, value: number | string): void {
+  const cssProp = getCssProp(shorthand);
+  if (!cssProp) return;
+  if (cssProp === 'transform' && typeof value === 'number') {
+    (el.style as unknown as Record<string, string>)['transform'] = `scale(${value})`;
+  } else if (typeof value === 'number') {
+    (el.style as unknown as Record<string, string>)[cssProp] = `${value}px`;
+  } else {
+    (el.style as unknown as Record<string, string>)[cssProp] = String(value);
+  }
+}
+
+function parsePx(value: string): number | string {
+  if (value === '') return '';
+  const n = parseFloat(value);
+  return !Number.isNaN(n) ? n : value;
+}
+
+function overridesToJson(overrides: Overrides): string {
+  const obj: Record<string, number | string> = {};
+  for (const [k, v] of Object.entries(overrides)) {
+    if (v !== '' && v !== undefined) obj[k] = v;
+  }
+  return JSON.stringify(obj, null, 2);
+}
+
+function setStyles(el: HTMLElement, s: Partial<CSSStyleDeclaration>): void {
+  for (const [k, v] of Object.entries(s)) {
+    if (v != null && typeof v === 'string') (el.style as unknown as Record<string, string>)[k] = v;
+  }
+}
+
+function createEl<K extends keyof HTMLElementTagNameMap>(
+  tag: K,
+  style?: Partial<CSSStyleDeclaration>,
+  attrs?: Record<string, string>
+): HTMLElementTagNameMap[K] {
+  const el = document.createElement(tag);
+  if (style) setStyles(el as unknown as HTMLElement, style);
+  if (attrs) for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, v);
+  return el;
+}
+
+export function initVisualStyleBuilder(options: VisualStyleBuilderOptions = {}): void {
+  if (document.getElementById(FLOW_STYLE_BUILDER_BUTTON_ID) || document.getElementById(PANEL_ID)) return;
+
+  const { previewIframe } = options;
+  let overrides: Overrides = {};
+  let currentFile = '';
+  let currentLine: number | null = null;
+  let debounceTimer = 0;
+
+  function getPreviewDoc(): Document | null {
+    return previewIframe?.contentDocument ?? document;
+  }
+
+  function applyOverridesToPreview(): void {
+    const doc = getPreviewDoc();
+    if (!doc || currentLine == null || !currentFile) return;
+    const sel = `[data-flow-style-line="${currentLine}"][data-flow-style-file="${currentFile}"]`;
+    const el = doc.querySelector(sel);
+    if (!el || !(el instanceof HTMLElement)) return;
+    for (const [key, v] of Object.entries(overrides)) {
+      if (v !== '' && v !== undefined) applyToElement(el, key, v);
+    }
+  }
+
+  let panelRight = true;
+  let activeTab: 'select' | 'elements' | 'style' = 'elements';
+  let hoverEl: HTMLElement | null = null;
+
+  const panel = createEl('div', {
+    position: 'fixed',
+    top: '0',
+    right: '0',
+    width: `${PANEL_WIDTH}px`,
+    height: '100vh',
+    background: THEME.bg,
+    color: THEME.text,
+    fontFamily: 'ui-sans-serif, system-ui, sans-serif',
+    fontSize: '12px',
+    boxShadow: '-4px 0 24px rgba(0,0,0,0.5)',
+    display: 'flex',
+    flexDirection: 'column',
+    zIndex: '2147483646',
+    overflow: 'hidden',
+  });
+  panel.id = PANEL_ID;
+
+  const highlight = createEl('div', {
+    position: 'fixed',
+    pointerEvents: 'none',
+    border: `2px solid ${THEME.accent}`,
+    borderRadius: '4px',
+    boxSizing: 'border-box',
+    zIndex: '2147483645',
+  });
+  highlight.id = HIGHLIGHT_ID;
+  highlight.style.display = 'none';
+  document.body.appendChild(highlight);
+
+  const overlay = createEl('div', {
+    position: 'fixed',
+    top: '0',
+    left: '0',
+    right: '0',
+    bottom: '0',
+    zIndex: '2147483644',
+    cursor: 'crosshair',
+  });
+  overlay.id = OVERLAY_ID;
+  overlay.style.display = 'none';
+  document.body.appendChild(overlay);
+
+  function setPanelSide(right: boolean): void {
+    panelRight = right;
+    const s = panel.style as unknown as Record<string, string>;
+    s['right'] = right ? '0' : '';
+    s['left'] = right ? '' : '0';
+  }
+
+  const header = createEl('header', {
+    padding: '10px 12px',
+    borderBottom: `1px solid ${THEME.border}`,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '10px',
+    flexShrink: '0',
+    background: THEME.surface,
+  });
+  const headerRow = createEl('div', { display: 'flex', alignItems: 'center', justifyContent: 'space-between' });
+  const positionBtn = createEl('button', {
+    padding: '6px',
+    border: `1px solid ${THEME.border}`,
+    borderRadius: '6px',
+    background: 'transparent',
+    color: THEME.muted,
+    cursor: 'pointer',
+  }) as HTMLButtonElement;
+  positionBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>';
+  positionBtn.title = 'Sposta pannello a sinistra';
+  positionBtn.addEventListener('click', () => {
+    setPanelSide(!panelRight);
+    positionBtn.innerHTML = panelRight
+      ? '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>'
+      : '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>';
+    positionBtn.title = panelRight ? 'Sposta pannello a sinistra' : 'Sposta pannello a destra';
+  });
+  headerRow.appendChild(positionBtn);
+  header.appendChild(headerRow);
+
+  const tabBar = createEl('div', { display: 'flex', gap: '4px' });
+  const tabs = [
+    { id: 'select' as const, label: 'Seleziona', icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"/></svg>' },
+    { id: 'elements' as const, label: 'Elementi', icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>' },
+    { id: 'style' as const, label: 'Stile', icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2"/></svg>' },
+  ];
+  const tabPanels = { select: createEl('div'), elements: createEl('div'), style: createEl('div') };
+  tabPanels.select.style.display = 'none';
+  tabPanels.style.style.display = 'none';
+  tabs.forEach((t) => {
+    const btn = createEl('button', {
+      flex: '1',
+      padding: '8px 6px',
+      border: 'none',
+      borderRadius: '6px',
+      background: activeTab === t.id ? THEME.accent : 'transparent',
+      color: activeTab === t.id ? THEME.bg : THEME.muted,
+      fontSize: '11px',
+      fontWeight: '600',
+      cursor: 'pointer',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: '4px',
+    }) as HTMLButtonElement;
+    btn.innerHTML = t.icon + ' ' + t.label;
+    btn.addEventListener('click', () => {
+      activeTab = t.id;
+      tabs.forEach((_, i) => {
+        const b = tabBar.children[i];
+        if (b instanceof HTMLElement) {
+          b.style.background = tabs[i]?.id === activeTab ? THEME.accent : 'transparent';
+          b.style.color = tabs[i]?.id === activeTab ? THEME.bg : THEME.muted;
+        }
+      });
+      (Object.keys(tabPanels) as (keyof typeof tabPanels)[]).forEach((k) => {
+        tabPanels[k].style.display = k === activeTab ? 'flex' : 'none';
+      });
+      tabPanels[activeTab].style.flexDirection = 'column';
+      tabPanels[activeTab].style.flex = '1';
+      tabPanels[activeTab].style.overflow = 'auto';
+      if (activeTab === 'select') {
+        overlay.style.display = '';
+        highlight.style.display = '';
+      } else {
+        overlay.style.display = 'none';
+        highlight.style.display = 'none';
+      }
+    });
+    tabBar.appendChild(btn);
+  });
+  header.appendChild(tabBar);
+  panel.appendChild(header);
+
+  tabPanels.elements.style.flexDirection = 'column';
+  tabPanels.elements.style.flex = '1';
+  tabPanels.elements.style.overflow = 'auto';
+  const fileRow = createEl('div', { padding: '10px 12px', borderBottom: `1px solid ${THEME.border}`, display: 'flex', gap: '8px', alignItems: 'center', flexWrap: 'wrap' });
+  const fileInput = createEl('input', {
+    flex: '1',
+    minWidth: '80px',
+    padding: '8px 10px',
+    border: `1px solid ${THEME.border}`,
+    borderRadius: '6px',
+    background: THEME.surface,
+    color: THEME.text,
+    fontSize: '12px',
+  }) as HTMLInputElement;
+  fileInput.placeholder = 'client/routes/index.tsx';
+  fileInput.value = 'client/routes/index.tsx';
+  const loadBtn = createEl('button', {
+    padding: '8px 14px',
+    border: 'none',
+    borderRadius: '6px',
+    fontSize: '12px',
+    fontWeight: '500',
+    cursor: 'pointer',
+    background: THEME.accent,
+    color: THEME.bg,
+  }) as HTMLButtonElement;
+  loadBtn.textContent = 'Carica';
+  fileRow.appendChild(fileInput);
+  fileRow.appendChild(loadBtn);
+  tabPanels.elements.appendChild(fileRow);
+  const blocksSection = createEl('div', { padding: '10px 12px', maxHeight: '160px', overflow: 'auto' });
+  const blocksLabel = createEl('div', { fontSize: '10px', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em', color: THEME.muted, marginBottom: '8px' });
+  blocksLabel.textContent = 'Blocchi s= / styleFlow=';
+  blocksSection.appendChild(blocksLabel);
+  const blocksList = createEl('div', { display: 'flex', flexDirection: 'column', gap: '6px' });
+  blocksSection.appendChild(blocksList);
+  tabPanels.elements.appendChild(blocksSection);
+
+  const selectHint = createEl('div', { padding: '16px', color: THEME.muted, fontSize: '13px', lineHeight: '1.5' });
+  selectHint.textContent = 'Passa col mouse sugli elementi per evidenziarli. Clicca su un elemento con s= o styleFlow= per modificarlo.';
+  tabPanels.select.appendChild(selectHint);
+
+  panel.appendChild(tabPanels.select);
+  panel.appendChild(tabPanels.elements);
+  panel.appendChild(tabPanels.style);
+
+  const scroll = createEl('div', { flex: '1', overflow: 'auto', padding: '12px' });
+  scroll.style.display = 'none';
+  tabPanels.style.appendChild(scroll);
+
+  const footer = createEl('div', {
+    padding: '12px',
+    borderTop: `1px solid ${THEME.border}`,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px',
+    background: THEME.surface,
+  });
+  const btnRow = createEl('div', { display: 'flex', gap: '8px', flexWrap: 'wrap' });
+  const copyObjBtn = createEl('button', {
+    padding: '8px 12px',
+    border: `1px solid ${THEME.border}`,
+    borderRadius: '6px',
+    fontSize: '12px',
+    fontWeight: '500',
+    cursor: 'pointer',
+    background: THEME.surface,
+    color: THEME.muted,
+  }) as HTMLButtonElement;
+  copyObjBtn.textContent = 'Copia oggetto';
+  const copyPropBtn = createEl('button', {
+    padding: '8px 12px',
+    border: `1px solid ${THEME.border}`,
+    borderRadius: '6px',
+    fontSize: '12px',
+    fontWeight: '500',
+    cursor: 'pointer',
+    background: THEME.surface,
+    color: THEME.muted,
+  }) as HTMLButtonElement;
+  copyPropBtn.textContent = 'Copia s={}';
+  btnRow.appendChild(copyObjBtn);
+  btnRow.appendChild(copyPropBtn);
+  footer.appendChild(btnRow);
+  footer.style.display = 'none';
+  tabPanels.style.appendChild(footer);
+
+  const emptyState = createEl('div', { padding: '20px', color: THEME.muted, fontSize: '13px', lineHeight: '1.5' });
+  emptyState.textContent = 'Usa il tab Seleziona per cliccare su un elemento, oppure tab Elementi per caricare i blocchi da file. Le modifiche si applicano al file subito.';
+  tabPanels.style.appendChild(emptyState);
+
+  const inputByKey: Record<string, HTMLInputElement> = {};
+  const colorByKey: Record<string, HTMLInputElement> = {};
+
+  function getStyleForPatch(): Record<string, number | string> {
+    const out: Record<string, number | string> = {};
+    for (const [k, v] of Object.entries(overrides)) {
+      if (v !== '' && v !== undefined) out[k] = v;
+    }
+    return out;
+  }
+
+  function schedulePatch(): void {
+    if (debounceTimer) window.clearTimeout(debounceTimer);
+    debounceTimer = window.setTimeout(() => {
+      debounceTimer = 0;
+      if (!currentFile || currentLine == null) return;
+      const style = getStyleForPatch();
+      if (Object.keys(style).length === 0) return;
+      fetch(`${PATCH_SERVER_URL}/__flow-style-patch`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ file: currentFile, line: currentLine, style }),
+      }).catch(() => {});
+    }, DEBOUNCE_MS);
+  }
+
+  function numInputWithStepper(key: string, v: string, isNum: boolean): HTMLElement {
+    const wrap = createEl('div', { display: 'flex', alignItems: 'center', gap: '4px', flex: '1', minWidth: '0' });
+    const step = 1;
+    const minusBtn = createEl('button', {
+      width: '28px',
+      height: '28px',
+      padding: '0',
+      border: `1px solid ${THEME.border}`,
+      borderRadius: '6px',
+      background: THEME.surface,
+      color: THEME.muted,
+      fontSize: '14px',
+      cursor: 'pointer',
+      flexShrink: '0',
+    }) as HTMLButtonElement;
+    minusBtn.textContent = '−';
+    const plusBtn = createEl('button', {
+      width: '28px',
+      height: '28px',
+      padding: '0',
+      border: `1px solid ${THEME.border}`,
+      borderRadius: '6px',
+      background: THEME.surface,
+      color: THEME.muted,
+      fontSize: '14px',
+      cursor: 'pointer',
+      flexShrink: '0',
+    }) as HTMLButtonElement;
+    plusBtn.textContent = '+';
+    const input = createEl('input', {
+      width: '3rem',
+      minWidth: '36px',
+      padding: '6px 8px',
+      border: `1px solid ${THEME.border}`,
+      borderRadius: '6px',
+      background: THEME.surface,
+      color: THEME.text,
+      fontSize: '12px',
+      textAlign: 'center',
+    }) as HTMLInputElement;
+    input.type = isNum ? 'number' : 'text';
+    input.value = v;
+    input.placeholder = isNum ? '0' : '';
+    const update = () => {
+      const next = isNum ? parsePx(input.value) : input.value;
+      overrides[key] = next;
+      applyOverridesToPreview();
+      schedulePatch();
+    };
+    minusBtn.addEventListener('click', () => {
+      const n = parseFloat(input.value);
+      if (!Number.isNaN(n)) {
+        input.value = String(n - step);
+        update();
+      }
+    });
+    plusBtn.addEventListener('click', () => {
+      const n = parseFloat(input.value);
+      if (!Number.isNaN(n)) {
+        input.value = String(n + step);
+        update();
+      } else if (input.value === '') {
+        input.value = String(step);
+        update();
+      }
+    });
+    input.addEventListener('input', update);
+    inputByKey[key] = input;
+    wrap.appendChild(minusBtn);
+    wrap.appendChild(input);
+    wrap.appendChild(plusBtn);
+    return wrap;
+  }
+
+  function renderBoxControl(
+    label: string,
+    mainKey: 'p' | 'm',
+    sideKeys: [string, string, string, string]
+  ): HTMLElement {
+    const [ptK, prK, pbK, plK] = sideKeys;
+    const wrap = createEl('div', { marginBottom: '18px' });
+    const header = createEl('div', {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '6px',
+      marginBottom: '8px',
+      fontSize: '10px',
+      fontWeight: '600',
+      textTransform: 'uppercase',
+      letterSpacing: '0.06em',
+      color: THEME.muted,
+    });
+    header.textContent = label;
+    const lockBtn = createEl('button', {
+      width: '22px',
+      height: '22px',
+      padding: '0',
+      border: `1px solid ${THEME.border}`,
+      borderRadius: '4px',
+      background: THEME.surface,
+      color: THEME.muted,
+      cursor: 'pointer',
+    }) as HTMLButtonElement;
+    let locked = true;
+    lockBtn.innerHTML = '<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>';
+    lockBtn.title = 'Sblocca lati';
+    const makeInput = (key: string, placeholder: string) => {
+      const inp = createEl('input', {
+        width: '100%',
+        minWidth: '24px',
+        padding: '4px 4px',
+        border: `1px solid ${THEME.border}`,
+        borderRadius: '4px',
+        background: THEME.surface,
+        color: THEME.text,
+        fontSize: '11px',
+        textAlign: 'center',
+      }) as HTMLInputElement;
+      inp.type = 'number';
+      inp.placeholder = placeholder;
+      inp.value = String(overrides[key] ?? '');
+      inp.addEventListener('input', () => {
+        const v = parsePx(inp.value);
+        overrides[key] = v;
+        applyOverridesToPreview();
+        schedulePatch();
+      });
+      (inputByKey as Record<string, HTMLInputElement>)[key] = inp;
+      return inp;
+    };
+    const topInp = makeInput(ptK, 'T');
+    const rightInp = makeInput(prK, 'R');
+    const bottomInp = makeInput(pbK, 'B');
+    const leftInp = makeInput(plK, 'L');
+    const allInp = makeInput(mainKey, '');
+    allInp.placeholder = '0';
+    allInp.value = String(overrides[mainKey] ?? overrides[ptK] ?? overrides[prK] ?? overrides[pbK] ?? overrides[plK] ?? '');
+    const grid = createEl('div', {
+      display: 'grid',
+      gridTemplateColumns: '28px 28px 28px',
+      gridTemplateRows: '28px 28px 28px',
+      gap: '2px',
+      alignItems: 'center',
+      justifyContent: 'center',
+    });
+    const topCell = createEl('div', { gridColumn: '2', gridRow: '1' });
+    topCell.appendChild(topInp);
+    const rightCell = createEl('div', { gridColumn: '3', gridRow: '2' });
+    rightCell.appendChild(rightInp);
+    const bottomCell = createEl('div', { gridColumn: '2', gridRow: '3' });
+    bottomCell.appendChild(bottomInp);
+    const leftCell = createEl('div', { gridColumn: '1', gridRow: '2' });
+    leftCell.appendChild(leftInp);
+    const center = createEl('div', { gridColumn: '2', gridRow: '2', width: '28px', height: '28px', border: `2px solid ${THEME.border}`, borderRadius: '4px', background: THEME.surface, display: 'flex', alignItems: 'center', justifyContent: 'center' });
+    center.appendChild(allInp);
+    const toggleLock = () => {
+      locked = !locked;
+      lockBtn.title = locked ? 'Sblocca lati' : 'Blocca tutti';
+      topCell.style.display = locked ? 'none' : 'block';
+      rightCell.style.display = locked ? 'none' : 'block';
+      bottomCell.style.display = locked ? 'none' : 'block';
+      leftCell.style.display = locked ? 'none' : 'block';
+      (center.style as unknown as Record<string, string>)['display'] = locked ? 'flex' : 'none';
+      if (locked) {
+        const v = overrides[mainKey] ?? overrides[ptK] ?? '';
+        overrides[mainKey] = v;
+        [ptK, prK, pbK, plK].forEach((k) => (overrides[k] = v));
+        topInp.value = rightInp.value = bottomInp.value = leftInp.value = allInp.value = String(v);
+      }
+    };
+    lockBtn.addEventListener('click', toggleLock);
+    if (locked) {
+      topCell.style.display = 'none';
+      rightCell.style.display = 'none';
+      bottomCell.style.display = 'none';
+      leftCell.style.display = 'none';
+    } else {
+      (center.style as unknown as Record<string, string>)['display'] = 'none';
+    }
+    allInp.addEventListener('input', () => {
+      if (locked) {
+        const v = parsePx(allInp.value);
+        overrides[mainKey] = v;
+        [ptK, prK, pbK, plK].forEach((k) => (overrides[k] = v));
+        topInp.value = rightInp.value = bottomInp.value = leftInp.value = String(v);
+        applyOverridesToPreview();
+        schedulePatch();
+      }
+    });
+    header.appendChild(lockBtn);
+    wrap.appendChild(header);
+    grid.appendChild(topCell);
+    grid.appendChild(leftCell);
+    grid.appendChild(center);
+    grid.appendChild(rightCell);
+    grid.appendChild(bottomCell);
+    wrap.appendChild(grid);
+    return wrap;
+  }
+
+  function renderGroups(): void {
+    scroll.innerHTML = '';
+    scroll.appendChild(renderBoxControl('Padding', 'p', ['pt', 'pr', 'pb', 'pl']));
+    scroll.appendChild(renderBoxControl('Margin', 'm', ['mt', 'mr', 'mb', 'ml']));
+    for (const g of GROUPS) {
+      const groupDiv = createEl('div', { marginBottom: '18px' });
+      const labelDiv = createEl('div', {
+        fontSize: '10px',
+        fontWeight: '600',
+        textTransform: 'uppercase',
+        letterSpacing: '0.06em',
+        color: THEME.muted,
+        marginBottom: '8px',
+      });
+      labelDiv.textContent = g.label;
+      groupDiv.appendChild(labelDiv);
+      for (const key of g.keys) {
+        const row = createEl('div', { display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' });
+        const label = createEl('span', { width: '36px', flexShrink: '0', color: THEME.muted, fontSize: '12px' });
+        label.textContent = key;
+        row.appendChild(label);
+        const isColor = key === 'color' || key === 'bg';
+        const isNum = NUM_KEYS.has(key);
+        const val = overrides[key];
+        const v = val === undefined || val === '' ? '' : String(val);
+        if (isColor) {
+          const colorWrap = createEl('div', { flex: '1', display: 'flex', gap: '8px', minWidth: '0' });
+          const colorInput = createEl('input', {
+            padding: '2px',
+            height: '28px',
+            width: '40px',
+            flexShrink: '0',
+            border: `1px solid ${THEME.border}`,
+            borderRadius: '6px',
+            background: THEME.surface,
+          }) as HTMLInputElement;
+          colorInput.type = 'color';
+          colorInput.value = /^#([0-9A-Fa-f]{3}){1,2}$/.test(v) ? v : '#000000';
+          const textInput = createEl('input', {
+            flex: '1',
+            padding: '6px 10px',
+            border: `1px solid ${THEME.border}`,
+            borderRadius: '6px',
+            background: THEME.surface,
+            color: THEME.text,
+            fontSize: '12px',
+            minWidth: '0',
+          }) as HTMLInputElement;
+          textInput.type = 'text';
+          textInput.value = v;
+          textInput.placeholder = '#hex';
+          const syncColor = () => {
+            overrides[key] = textInput.value;
+            if (/^#([0-9A-Fa-f]{3}){1,2}$/.test(textInput.value)) colorInput.value = textInput.value;
+            applyOverridesToPreview();
+            schedulePatch();
+          };
+          colorInput.addEventListener('input', () => {
+            overrides[key] = colorInput.value;
+            textInput.value = colorInput.value;
+            applyOverridesToPreview();
+            schedulePatch();
+          });
+          textInput.addEventListener('input', syncColor);
+          colorByKey[key] = colorInput;
+          inputByKey[key] = textInput;
+          colorWrap.appendChild(colorInput);
+          colorWrap.appendChild(textInput);
+          row.appendChild(colorWrap);
+        } else {
+          row.appendChild(numInputWithStepper(key, v, isNum));
+        }
+        groupDiv.appendChild(row);
+      }
+      scroll.appendChild(groupDiv);
+    }
+  }
+
+  function switchToStyleTab(): void {
+    activeTab = 'style';
+    tabs.forEach((_, i) => {
+      const b = tabBar.children[i];
+      if (b instanceof HTMLElement) {
+        b.style.background = tabs[i]?.id === 'style' ? THEME.accent : 'transparent';
+        b.style.color = tabs[i]?.id === 'style' ? THEME.bg : THEME.muted;
+      }
+    });
+    (Object.keys(tabPanels) as (keyof typeof tabPanels)[]).forEach((k) => {
+      tabPanels[k].style.display = k === 'style' ? 'flex' : 'none';
+    });
+    tabPanels.style.style.flexDirection = 'column';
+    tabPanels.style.style.flex = '1';
+    tabPanels.style.style.overflow = 'auto';
+    overlay.style.display = 'none';
+    highlight.style.display = 'none';
+  }
+
+  function selectBlock(file: string, line: number): void {
+    currentFile = file;
+    currentLine = line;
+    try {
+      sessionStorage.setItem(STORAGE_KEY_FILE, file);
+      sessionStorage.setItem(STORAGE_KEY_LINE, String(line));
+    } catch {}
+    switchToStyleTab();
+    fetch(`${PATCH_SERVER_URL}/__flow-style-read?file=${encodeURIComponent(file)}&line=${line}`)
+      .then((r) => (r.ok ? r.json() : Promise.reject(new Error('Read failed'))))
+      .then((data: { style?: Record<string, number | string> }) => {
+        overrides = { ...(data.style ?? {}) };
+        emptyState.style.display = 'none';
+        scroll.style.display = '';
+        footer.style.display = 'flex';
+        renderGroups();
+        applyOverridesToPreview();
+      })
+      .catch(() => {
+        overrides = {};
+        renderGroups();
+      });
+  }
+
+  function loadBlocks(file: string, thenSelectLine?: number): void {
+    file = file.trim();
+    if (!file) return;
+    fileInput.value = file;
+    fetch(`${PATCH_SERVER_URL}/__flow-style-blocks?file=${encodeURIComponent(file)}`)
+      .then((res) => {
+        if (!res.ok) throw new Error(res.statusText);
+        return res.json();
+      })
+      .then((data: { blocks?: { line: number }[] }) => {
+        const blocks = data.blocks ?? [];
+        blocksList.innerHTML = '';
+        currentFile = file;
+        if (blocks.length === 0) {
+          const msg = createEl('div', { fontSize: '12px', color: THEME.muted });
+          msg.textContent = 'Nessun blocco s= / styleFlow= trovato.';
+          blocksList.appendChild(msg);
+        } else {
+          for (const b of blocks) {
+            const btn = createEl('button', {
+              padding: '8px 12px',
+              textAlign: 'left',
+              border: `1px solid ${THEME.border}`,
+              borderRadius: '6px',
+              background: THEME.surface,
+              color: THEME.text,
+              fontSize: '12px',
+              cursor: 'pointer',
+            }) as HTMLButtonElement;
+            btn.textContent = `Riga ${b.line}`;
+            btn.addEventListener('click', () => selectBlock(file, b.line));
+            blocksList.appendChild(btn);
+          }
+        }
+        if (thenSelectLine != null && blocks.some((x) => x.line === thenSelectLine)) {
+          selectBlock(file, thenSelectLine);
+        }
+      })
+      .catch(() => {
+        blocksList.innerHTML = '';
+        const err = createEl('div', { fontSize: '12px', color: '#f87171' });
+        err.textContent = 'Errore caricamento blocchi';
+        blocksList.appendChild(err);
+      });
+  }
+
+  function getElementUnderCursor(e: MouseEvent): HTMLElement | null {
+    if (previewIframe?.contentDocument) {
+      const rect = previewIframe.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      if (x < 0 || y < 0 || x > rect.width || y > rect.height) return null;
+      const doc = previewIframe.contentDocument;
+      const el = doc.elementFromPoint(x, y);
+      return el instanceof HTMLElement ? el : null;
+    }
+    const el = document.elementsFromPoint(e.clientX, e.clientY).find(
+      (n) => n !== overlay && n !== highlight && !panel.contains(n)
+    );
+    return el instanceof HTMLElement ? el : null;
+  }
+
+  function getHighlightRect(el: HTMLElement): { top: number; left: number; width: number; height: number } {
+    const rect = el.getBoundingClientRect();
+    if (previewIframe?.contentDocument && el.ownerDocument === previewIframe.contentDocument) {
+      const frameRect = previewIframe.getBoundingClientRect();
+      return {
+        top: frameRect.top + rect.top,
+        left: frameRect.left + rect.left,
+        width: rect.width,
+        height: rect.height,
+      };
+    }
+    return { top: rect.top, left: rect.left, width: rect.width, height: rect.height };
+  }
+
+  overlay.addEventListener('mousemove', (e: MouseEvent) => {
+    hoverEl = getElementUnderCursor(e);
+    if (hoverEl && highlight.parentNode === document.body) {
+      const r = getHighlightRect(hoverEl);
+      highlight.style.top = `${r.top}px`;
+      highlight.style.left = `${r.left}px`;
+      highlight.style.width = `${r.width}px`;
+      highlight.style.height = `${r.height}px`;
+      highlight.style.display = '';
+    } else {
+      highlight.style.display = 'none';
+    }
+  });
+  overlay.addEventListener('click', (e: MouseEvent) => {
+    const el = getElementUnderCursor(e);
+    if (!el) return;
+    const file = el.getAttribute('data-flow-style-file');
+    const lineStr = el.getAttribute('data-flow-style-line');
+    if (file && lineStr) {
+      const line = parseInt(lineStr, 10);
+      if (!Number.isNaN(line)) {
+        e.preventDefault();
+        selectBlock(file, line);
+      }
+    }
+  });
+
+  loadBtn.addEventListener('click', () => loadBlocks(fileInput.value.trim()));
+
+  copyObjBtn.addEventListener('click', () => {
+    void navigator.clipboard.writeText(overridesToJson(overrides));
+  });
+  copyPropBtn.addEventListener('click', () => {
+    void navigator.clipboard.writeText(`s={${overridesToJson(overrides)}}`);
+  });
+
+  document.body.appendChild(panel);
+
+  // Ripristino dopo refresh: stesso file e blocco selezionato
+  try {
+    const savedFile = sessionStorage.getItem(STORAGE_KEY_FILE);
+    const savedLine = sessionStorage.getItem(STORAGE_KEY_LINE);
+    if (savedFile) {
+      const lineNum = savedLine ? parseInt(savedLine, 10) : NaN;
+      loadBlocks(savedFile, Number.isNaN(lineNum) ? undefined : lineNum);
+    }
+  } catch {}
+}
+
+export const VisualStyleBuilder = initVisualStyleBuilder;