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

package/profiles/client/packages/style/resolve.ts

@@ -1,127 +0,0 @@
-import { isStyleKey, getStyleProp, toStyleValue } from './shorthand.js';
-import { VIEWPORT_KEYS, PSEUDO_KEYS, type ViewportKey } from './breakpoints.js';
-
-const DEFAULT_TOKENS = new Set(['primary', 'muted', 'primary-foreground']);
-
-/** Layer già "plain" (getter chiamati dal runtime). base + flat style/class. */
-export type PlainLayer = {
-  base?: string;
-  [key: string]: string | number | boolean | PlainLayer | undefined;
-};
-
-export type ResolvedLayer = { class: string; style: Record<string, string> };
-
-const RESERVED = new Set([
-  ...VIEWPORT_KEYS,
-  ...PSEUDO_KEYS,
-]);
-
-function isReserved(key: string): boolean {
-  return RESERVED.has(key as 'mob');
-}
-
-/** Risolve un layer plain in class + style. Non considera mob/tab/des/hover/active. */
-export function resolveLayer(plain: PlainLayer, tokens?: Set<string>): ResolvedLayer {
-  const t = tokens ?? DEFAULT_TOKENS;
-  const classes: string[] = [];
-  const style: Record<string, string> = {};
-
-  if (plain.base) classes.push(plain.base.trim());
-
-  for (const [k, v] of Object.entries(plain)) {
-    if (k === 'base' || isReserved(k)) continue;
-    if (v === undefined || v === null) continue;
-
-    if (isStyleKey(k)) {
-      const prop = getStyleProp(k);
-      if (prop) {
-        let val = toStyleValue(v, t);
-        if (k === 'scale' && typeof v === 'number') val = `scale(${v})`;
-        style[prop] = val;
-      }
-    } else {
-      if (v === true) classes.push(k);
-      if (typeof v === 'string' && v) classes.push(v);
-    }
-  }
-
-  return {
-    class: classes.filter(Boolean).join(' '),
-    style,
-  };
-}
-
-/** Merge due resolved: second sovrascrive style, class è concatenata. */
-export function mergeResolved(a: ResolvedLayer, b: ResolvedLayer): ResolvedLayer {
-  return {
-    class: [a.class, b.class].filter(Boolean).join(' '),
-    style: { ...a.style, ...b.style },
-  };
-}
-
-/** Solo stile da un layer (per pseudo). Ignora base e classList. */
-export function resolvePseudoStyle(plain: PlainLayer, tokens?: Set<string>): Record<string, string> {
-  const t = tokens ?? DEFAULT_TOKENS;
-  const style: Record<string, string> = {};
-  for (const [k, v] of Object.entries(plain)) {
-    if (k === 'base' || isReserved(k)) continue;
-    if (!isStyleKey(k)) continue;
-    const prop = getStyleProp(k);
-    if (prop && v !== undefined && v !== null) {
-      let val = toStyleValue(v, t);
-      if (k === 'scale' && typeof v === 'number') val = `scale(${v})`;
-      style[prop] = val;
-    }
-  }
-  return style;
-}
-
-/** Da oggetto stile a stringa CSS (per iniettare regola :hover). */
-export function styleToCssText(style: Record<string, string>): string {
-  return Object.entries(style)
-    .map(([k, v]) => `${k}: ${v}`)
-    .join('; ');
-}
-
-/** Stesso formato di styleFlow (stringa | [base, layer] | layer), ma solo valori plain (no getter). */
-type FlowStyleValue =
-  | string
-  | [string, PlainLayer]
-  | (PlainLayer & { base?: string; mob?: PlainLayer; tab?: PlainLayer; des?: PlainLayer });
-
-/** Normalizza value in base + layer per un viewport. Usabile da React/altro: flowStyle(value, viewport) → { class, style }. */
-export function flowStyle(
-  value: FlowStyleValue | null | undefined,
-  viewport?: ViewportKey,
-  tokens?: Set<string>
-): ResolvedLayer {
-  if (value == null) return { class: '', style: {} };
-  let base = '';
-  let layer: PlainLayer = {};
-  if (typeof value === 'string') {
-    base = value;
-  } else if (Array.isArray(value)) {
-    base = typeof value[0] === 'string' ? value[0] : '';
-    layer = (value[1] && typeof value[1] === 'object' && !Array.isArray(value[1])) ? (value[1] as PlainLayer) : {};
-  } else if (typeof value === 'object' && !Array.isArray(value)) {
-    layer = { ...value };
-    base = typeof layer.base === 'string' ? layer.base : '';
-  }
-  const merged: PlainLayer = { base };
-  for (const [k, v] of Object.entries(layer)) {
-    if (k === 'base' || isReserved(k)) continue;
-    (merged as Record<string, unknown>)[k] = v;
-  }
-  if (viewport) {
-    const vp = layer[viewport];
-    if (vp && typeof vp === 'object' && !Array.isArray(vp)) {
-      const vpPlain = vp as PlainLayer;
-      if (vpPlain.base) merged.base = (merged.base ? `${merged.base} ` : '') + (vpPlain.base ?? '');
-      for (const [k, v] of Object.entries(vpPlain)) {
-        if (k === 'base' || isReserved(k)) continue;
-        (merged as Record<string, unknown>)[k] = v;
-      }
-    }
-  }
-  return resolveLayer(merged, tokens);
-}

package/profiles/client/packages/style/server.ts

@@ -1,299 +0,0 @@
-/**
- * Server per il Visual Style Builder: espone POST /__flow-style-patch per modificare
- * i file sorgente (s= / styleFlow=). Avviabile da CLI o dal plugin Vite.
- */
-import fs from 'node:fs';
-import path from 'node:path';
-import http from 'node:http';
-
-const DEFAULT_PORT = 3757;
-
-export type StyleFlowServerOptions = {
-  port?: number;
-  root?: string;
-};
-
-/** Trova la posizione della } che chiude la { aperta a openIdx (con nesting). */
-function findMatchingClose(content: string, openIdx: number): number {
-  let depth = 0;
-  for (let i = openIdx; i < content.length; i++) {
-    const c = content[i];
-    if (c === '{') depth++;
-    else if (c === '}') {
-      depth--;
-      if (depth === 0) return i;
-    }
-  }
-  return -1;
-}
-
-/** Trova l’oggetto s= o styleFlow= che contiene la riga (1-based); ritorna [start, end] degli indici. */
-/** Trova tutti i blocchi s= o styleFlow= nel file; ritorna [{ line }] riga 1-based. */
-function findAllStyleBlocks(content: string): { line: number }[] {
-  const blocks: { line: number }[] = [];
-  const re = /\s(s|styleFlow)\s*=\s*\{/g;
-  let m: RegExpExecArray | null;
-  while ((m = re.exec(content)) !== null) {
-    const line = content.slice(0, m.index).split(/\r?\n/).length;
-    const openIdx = content.indexOf('{', m.index);
-    if (findMatchingClose(content, openIdx) >= 0) blocks.push({ line });
-  }
-  return blocks;
-}
-
-const SHORTHAND_KEYS = [
-  'p', 'pt', 'pr', 'pb', 'pl', 'm', 'mt', 'mr', 'mb', 'ml',
-  'w', 'h', 'minW', 'minH', 'maxW', 'maxH', 'gap', 'rounded', 'text', 'color', 'bg',
-  'display', 'flex', 'opacity', 'top', 'left', 'right', 'bottom',
-];
-
-/** Estrae valori semplici dall inner per le chiavi note. */
-function parseStyleInner(inner: string): Record<string, number | string> {
-  const out: Record<string, number | string> = {};
-  for (const key of SHORTHAND_KEYS) {
-    const re = new RegExp(`(?:^|[,\\n])\\s*(?:${key}|"${key}")\\s*:\\s*((-?\\d+(?:\\.\\d+)?)|"([^"]*)"|'([^']*)')`, 'g');
-    const m = re.exec(inner);
-    if (!m) continue;
-    if (m[2] !== undefined) out[key] = parseFloat(m[2]);
-    else if (m[3] !== undefined) out[key] = m[3];
-    else if (m[4] !== undefined) out[key] = m[4];
-  }
-  return out;
-}
-
-function findStyleObjectRange(content: string, line: number): [number, number] | null {
-  const lines = content.split(/\r?\n/);
-  const lineIdx = Math.max(0, line - 1);
-  const propNames = ['s=', 'styleFlow='];
-  let searchLineIdx = lineIdx;
-  while (searchLineIdx >= 0) {
-    const row = lines[searchLineIdx] ?? '';
-    for (const name of propNames) {
-      const idx = row.indexOf(name);
-      if (idx !== -1) {
-        const openBrace = row.indexOf('{', idx);
-        if (openBrace !== -1) {
-          const globalOpen = lines.slice(0, searchLineIdx).join('\n').length + openBrace;
-          const closeIdx = findMatchingClose(content, globalOpen);
-          if (closeIdx !== -1) return [globalOpen, closeIdx];
-        }
-      }
-    }
-    searchLineIdx--;
-  }
-  return null;
-}
-
-function findValueRange(inner: string, key: string): [number, number] | null {
-  const reKey = new RegExp(`(?:^|[,\\n])\\s*(?:${key}|"${key}")\\s*:\\s*`, 'g');
-  const m = reKey.exec(inner);
-  if (!m) return null;
-  const valueStart = m.index + m[0].length;
-  let i = valueStart;
-  const ch = inner[i];
-  if (ch === '"' || ch === "'") {
-    const q = ch;
-    i++;
-    while (i < inner.length) {
-      if (inner[i] === '\\') i += 2;
-      else if (inner[i] === q) return [valueStart, i + 1];
-      else i++;
-    }
-    return null;
-  }
-  if (ch === '{' || ch === '[') {
-    const close = findMatchingClose(inner, i);
-    return close >= 0 ? [valueStart, close + 1] : null;
-  }
-  while (i < inner.length && /[0-9.eE+-]/.test(inner[i] ?? '')) i++;
-  while (i < inner.length && /[\s)]/.test(inner[i] ?? '')) i++;
-  if (i < inner.length && inner[i] === ')') i++;
-  return [valueStart, i];
-}
-
-/** Merge nel file: aggiorna solo le chiavi in style nell’oggetto esistente (s= o styleFlow=). */
-function getStyleObjectFromInner(fullInner: string): { inner: string; patchStart: number; patchEnd: number } {
-  const trimmed = fullInner.trim();
-  if (!trimmed.startsWith('[')) {
-    return { inner: fullInner, patchStart: 0, patchEnd: fullInner.length };
-  }
-  const firstBrace = fullInner.indexOf('{');
-  if (firstBrace === -1) return { inner: fullInner, patchStart: 0, patchEnd: fullInner.length };
-  const closeBrace = findMatchingClose(fullInner, firstBrace);
-  if (closeBrace === -1) return { inner: fullInner, patchStart: 0, patchEnd: fullInner.length };
-  return {
-    inner: fullInner.slice(firstBrace + 1, closeBrace),
-    patchStart: firstBrace + 1,
-    patchEnd: closeBrace,
-  };
-}
-
-function patchStyleInFile(
-  content: string,
-  line: number,
-  style: Record<string, number | string>
-): string {
-  const range = findStyleObjectRange(content, line);
-  if (!range) return content;
-  const [openIdx, closeIdx] = range;
-  const fullInner = content.slice(openIdx + 1, closeIdx);
-  const { inner: innerSlice, patchStart, patchEnd } = getStyleObjectFromInner(fullInner);
-  let inner = innerSlice;
-  for (const [key, value] of Object.entries(style)) {
-    const serialized = typeof value === 'number' ? String(value) : JSON.stringify(value);
-    const valRange = findValueRange(inner, key);
-    if (valRange) {
-      const [vs, ve] = valRange;
-      inner = inner.slice(0, vs) + serialized + inner.slice(ve);
-    } else {
-      const trim = inner.trimEnd();
-      inner = trim + (trim.endsWith(',') ? '' : ',') + `\n  ${key}: ${serialized}`;
-    }
-  }
-  return (
-    content.slice(0, openIdx + 1 + patchStart) +
-    inner +
-    content.slice(openIdx + 1 + patchEnd)
-  );
-}
-
-function createServer(options: StyleFlowServerOptions = {}) {
-  const port = options.port ?? DEFAULT_PORT;
-  const root = path.resolve(options.root ?? process.cwd());
-
-  const server = http.createServer((req, res) => {
-    res.setHeader('Access-Control-Allow-Origin', '*');
-    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
-    res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
-
-    if (req.method === 'OPTIONS') {
-      res.writeHead(204);
-      res.end();
-      return;
-    }
-
-    const url = req.url ?? '';
-    const urlObj = url.startsWith('/') ? new URL(url, 'http://localhost') : null;
-    const pathname = urlObj?.pathname ?? url.split('?')[0];
-    const fileParam = urlObj?.searchParams.get('file');
-    const lineParam = urlObj?.searchParams.get('line');
-
-    if (req.method === 'GET' && pathname === '/__flow-style-blocks' && fileParam) {
-      try {
-        const file = fileParam.trim();
-        const safePath = path.normalize(file).replace(/^(\.\.(\/|\\|$))+/, '');
-        const absPath = path.join(root, safePath);
-        if (!absPath.startsWith(root)) {
-          res.writeHead(403, { 'Content-Type': 'application/json' });
-          res.end(JSON.stringify({ error: 'Invalid path' }));
-          return;
-        }
-        const content = fs.readFileSync(absPath, 'utf8');
-        const blocks = findAllStyleBlocks(content);
-        res.writeHead(200, { 'Content-Type': 'application/json' });
-        res.end(JSON.stringify({ blocks }));
-      } catch (err) {
-        res.writeHead(500, { 'Content-Type': 'application/json' });
-        res.end(JSON.stringify({ error: err instanceof Error ? err.message : 'Unknown error' }));
-      }
-      return;
-    }
-
-    if (req.method === 'GET' && pathname === '/__flow-style-read' && fileParam && lineParam) {
-      try {
-        const file = fileParam.trim();
-        const line = parseInt(lineParam, 10);
-        const safePath = path.normalize(file).replace(/^(\.\.(\/|\\|$))+/, '');
-        const absPath = path.join(root, safePath);
-        if (!absPath.startsWith(root)) {
-          res.writeHead(403, { 'Content-Type': 'application/json' });
-          res.end(JSON.stringify({ error: 'Invalid path' }));
-          return;
-        }
-        const content = fs.readFileSync(absPath, 'utf8');
-        const range = findStyleObjectRange(content, line);
-        if (!range) {
-          res.writeHead(404, { 'Content-Type': 'application/json' });
-          res.end(JSON.stringify({ error: 'Block not found' }));
-          return;
-        }
-        const fullInner = content.slice(range[0] + 1, range[1]);
-        const { inner } = getStyleObjectFromInner(fullInner);
-        const style = parseStyleInner(inner);
-        res.writeHead(200, { 'Content-Type': 'application/json' });
-        res.end(JSON.stringify({ style }));
-      } catch (err) {
-        res.writeHead(500, { 'Content-Type': 'application/json' });
-        res.end(JSON.stringify({ error: err instanceof Error ? err.message : 'Unknown error' }));
-      }
-      return;
-    }
-
-    if (req.method !== 'POST' || pathname !== '/__flow-style-patch') {
-      res.writeHead(404, { 'Content-Type': 'application/json' });
-      res.end(JSON.stringify({ error: 'Not found' }));
-      return;
-    }
-
-    let body = '';
-    req.on('data', (chunk) => (body += chunk));
-    req.on('end', () => {
-      try {
-        const { file, line, style } = JSON.parse(body) as {
-          file?: string;
-          line?: number;
-          style?: Record<string, number | string>;
-        };
-        if (!file || typeof line !== 'number' || !style || typeof style !== 'object') {
-          res.writeHead(400, { 'Content-Type': 'application/json' });
-          res.end(JSON.stringify({ error: 'file, line, style required' }));
-          return;
-        }
-        const safePath = path.normalize(file).replace(/^(\.\.(\/|\\|$))+/, '');
-        const absPath = path.join(root, safePath);
-        if (!absPath.startsWith(root)) {
-          res.writeHead(403, { 'Content-Type': 'application/json' });
-          res.end(JSON.stringify({ error: 'Invalid path' }));
-          return;
-        }
-        const content = fs.readFileSync(absPath, 'utf8');
-        const next = patchStyleInFile(content, line, style);
-        fs.writeFileSync(absPath, next, 'utf8');
-        res.writeHead(200, { 'Content-Type': 'application/json' });
-        res.end(JSON.stringify({ ok: true }));
-      } catch (err) {
-        res.writeHead(500, { 'Content-Type': 'application/json' });
-        res.end(
-          JSON.stringify({
-            error: err instanceof Error ? err.message : 'Unknown error',
-          })
-        );
-      }
-    });
-  });
-
-  return { server, port };
-}
-
-/**
- * Avvia il server di patch per il Style Builder.
- * Chiamabile da script o dal plugin Vite.
- */
-export function styleFlowServer(options: StyleFlowServerOptions = {}): void {
-  const port = options.port ?? DEFAULT_PORT;
-  const root = options.root ?? process.cwd();
-  const { server } = createServer({ port, root });
-  server.listen(port, '127.0.0.1', () => {
-    console.log(`[flow-style] Patch server http://127.0.0.1:${port} (root: ${root})`);
-  });
-}
-
-/** Per uso interno del plugin Vite: ritorna l'istanza e la porta. */
-export function createStyleFlowServer(options: StyleFlowServerOptions = {}): {
-  server: http.Server;
-  port: number;
-} {
-  const port = options.port ?? DEFAULT_PORT;
-  const { server } = createServer({ ...options, port });
-  return { server, port };
-}

package/profiles/client/packages/style/shorthand.ts

@@ -1,96 +0,0 @@
-/**
- * Shorthand → CSS property. Solo chiavi "pure" (no suffisso tipo mb-10).
- * Usato per decidere se una chiave è stile (valore number/string/getter) o classList (bool/getter).
- */
-export const SHORTHAND_MAP = {
-  text: 'fontSize',
-  mb: 'marginBottom',
-  mt: 'marginTop',
-  ml: 'marginLeft',
-  mr: 'marginRight',
-  mx: 'marginLeft',
-  my: 'marginTop',
-  m: 'margin',
-  pb: 'paddingBottom',
-  pt: 'paddingTop',
-  pl: 'paddingLeft',
-  pr: 'paddingRight',
-  px: 'paddingLeft',
-  py: 'paddingTop',
-  p: 'padding',
-  w: 'width',
-  h: 'height',
-  minW: 'minWidth',
-  minH: 'minHeight',
-  maxW: 'maxWidth',
-  maxH: 'maxHeight',
-  gap: 'gap',
-  rounded: 'borderRadius',
-  top: 'top',
-  left: 'left',
-  right: 'right',
-  bottom: 'bottom',
-  color: 'color',
-  bg: 'background',
-  scale: 'transform',
-  outline: 'outline',
-  opacity: 'opacity',
-  flex: 'flex',
-  display: 'display',
-} as const satisfies Record<string, string>;
-
-export type StyleShorthandKey = keyof typeof SHORTHAND_MAP;
-
-const SHORTHAND_SET = new Set<string>(Object.keys(SHORTHAND_MAP));
-
-export function isStyleKey(key: string): boolean {
-  return key.startsWith('--') || SHORTHAND_SET.has(key);
-}
-
-export function getStyleProp(key: string): string | undefined {
-  if (key.startsWith('--')) return key;
-  return key in SHORTHAND_MAP ? SHORTHAND_MAP[key as StyleShorthandKey] : undefined;
-}
-
-/** CSS property → shorthand (per visual builder: leggere stile da DOM e copiare come styleFlow). */
-export const CSS_TO_SHORTHAND: Record<string, string> = {
-  fontSize: 'text',
-  marginBottom: 'mb',
-  marginTop: 'mt',
-  marginLeft: 'ml',
-  marginRight: 'mr',
-  margin: 'm',
-  paddingBottom: 'pb',
-  paddingTop: 'pt',
-  paddingLeft: 'pl',
-  paddingRight: 'pr',
-  padding: 'p',
-  width: 'w',
-  height: 'h',
-  minWidth: 'minW',
-  minHeight: 'minH',
-  maxWidth: 'maxW',
-  maxHeight: 'maxH',
-  gap: 'gap',
-  borderRadius: 'rounded',
-  top: 'top',
-  left: 'left',
-  right: 'right',
-  bottom: 'bottom',
-  color: 'color',
-  background: 'bg',
-  transform: 'scale',
-  outline: 'outline',
-  opacity: 'opacity',
-  flex: 'flex',
-  display: 'display',
-};
-
-/** Numero → "Npx", altrimenti stringa. Token "primary" → var(--color-primary) se in tokens. (scale gestito in resolve.) */
-export function toStyleValue(v: unknown, tokens?: Set<string>): string {
-  if (v == null) return '';
-  if (typeof v === 'number') return `${v}px`;
-  const s = String(v);
-  if (tokens && tokens.has(s)) return `var(--color-${s})`;
-  return s;
-}

package/profiles/client/packages/style/style-builder/button.ts

@@ -1,41 +0,0 @@
-/** Pulsante tondo del Flow Style Builder. */
-
-import { createEl } from './dom.js';
-import { BUTTON_ID, BUTTON_SIZE, THEME } from './constants.js';
-import { cornerToStyles } from './position.js';
-import type { FlowStyleBuilderPosition } from './position.js';
-
-export function createButton(
-  corner: FlowStyleBuilderPosition,
-  onClick: () => void
-): HTMLButtonElement {
-  const size = `${BUTTON_SIZE}px`;
-  const btn = createEl('button', {
-    position: 'fixed',
-    width: size,
-    height: size,
-    minWidth: size,
-    minHeight: size,
-    maxWidth: size,
-    maxHeight: size,
-    boxSizing: 'border-box',
-    borderRadius: '50%',
-    border: `2px solid ${THEME.border}`,
-    background: THEME.surface,
-    color: THEME.accent,
-    cursor: 'pointer',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexShrink: '0',
-    zIndex: '2147483647',
-    boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
-  }) as HTMLButtonElement;
-  btn.id = BUTTON_ID;
-  btn.innerHTML = '<svg width="24" height="24" 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>';
-  btn.title = 'Flow Style Builder';
-
-  Object.assign(btn.style, cornerToStyles(corner));
-  btn.addEventListener('click', onClick);
-  return btn;
-}

package/profiles/client/packages/style/style-builder/constants.ts

@@ -1,16 +0,0 @@
-/** Costanti UI del Flow Style Builder. */
-
-export const BUTTON_ID = 'flowStyleBuilder';
-export const PANEL_ID = 'flowStyleBuilderPanel';
-export const MARGIN = 16;
-export const BUTTON_SIZE = 48;
-export const PANEL_WIDTH = 300;
-
-export const THEME = {
-  bg: '#0f1419',
-  surface: '#1a1f26',
-  border: '#2d3748',
-  accent: '#14b8a6',
-  text: '#e2e8f0',
-  muted: '#94a3b8',
-} as const;

package/profiles/client/packages/style/style-builder/dom.ts

@@ -1,18 +0,0 @@
-/** Helper DOM per il Flow Style Builder. */
-
-export 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;
-  }
-}
-
-export 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;
-}

package/profiles/client/packages/style/style-builder/index.ts

@@ -1,48 +0,0 @@
-/**
- * Flow Style Builder – pulsante tondo fisso in un angolo,
- * al click apre il pannello laterale (sx o dx in base alla posizione).
- */
-
-import { BUTTON_ID, PANEL_ID } from './constants.js';
-import { createPanel } from './panel.js';
-import { createButton } from './button.js';
-import { flowStyleBuilder } from './position.js';
-import type { FlowStyleBuilderPosition } from './position.js';
-
-export type { FlowStyleBuilderPosition };
-export { flowStyleBuilder };
-
-export type FlowStyleBuilderOptions = {
-  /** Iframe che mostra l'app (stesso origin). */
-  previewIframe?: HTMLIFrameElement;
-  /** Posizione del pulsante (obbligatoria da flow.config). */
-  position: FlowStyleBuilderPosition;
-};
-
-/** Inizializza il Flow Style Builder: pulsante fisso in angolo + pannello laterale al click. */
-export function initFlowStyleBuilder(options: FlowStyleBuilderOptions): void {
-  if (document.getElementById(BUTTON_ID) || document.getElementById(PANEL_ID)) return;
-
-  const corner = options.position;
-  let panelOpen = false;
-  const panelRight = corner === 'top-right' || corner === 'bottom-right';
-
-  const { element: panel, open: openPanel, close: closePanel } = createPanel(panelRight, () => {
-    panelOpen = false;
-    closePanel();
-  });
-
-  document.body.appendChild(panel);
-
-  const btn = createButton(corner, () => {
-    if (panelOpen) {
-      panelOpen = false;
-      closePanel();
-    } else {
-      panelOpen = true;
-      openPanel();
-    }
-  });
-
-  document.body.appendChild(btn);
-}