create-flow-os 0.0.1-dev.1771840262 → 0.0.1-dev.1771979366

package/profiles/full/packages/style/visual-builder.ts

@@ -1,822 +0,0 @@
-/**
- * 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;