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

package/README.md

@@ -4,6 +4,23 @@ Stili: shorthand, breakpoints, pseudo, resolve, CSS.
 
 ## API (`index.ts`)
 
-- `SHORTHAND_MAP`, `isStyleKey`, `getStyleProp`, `toStyleValue`, `StyleShorthandKey`, `VIEWPORT_KEYS`, `PSEUDO_KEYS`, `VIEWPORT_WIDTHS`, `getViewportKeyFromWidth`, `ViewportKey`, `PseudoKey`, `resolveLayer`, `mergeResolved`, `resolvePseudoStyle`, `styleToCssText`, `PlainLayer`, `ResolvedLayer`.
+- `SHORTHAND_MAP`, `CSS_TO_SHORTHAND`, `isStyleKey`, `getStyleProp`, `toStyleValue`, `StyleShorthandKey`, `VIEWPORT_KEYS`, `PSEUDO_KEYS`, `VIEWPORT_WIDTHS`, `getViewportKeyFromWidth`, `ViewportKey`, `PseudoKey`, `resolveLayer`, `mergeResolved`, `resolvePseudoStyle`, `styleToCssText`, `PlainLayer`, `ResolvedLayer`.
+
+## Visual Style Builder
+
+Builder visivo per sviluppare più velocemente: seleziona un elemento (div, p, span, …) nella pagina e modificalo dal **menu laterale** (colori, padding, margin, dimensioni, flex, gap, rounded, ecc.) in **tempo reale**. Le modifiche vengono applicate subito al DOM; puoi poi **copiare l’oggetto** da incollare nel codice (`s={...}` o styleFlow).
+
+- **React**: monta il componente dove serve (es. solo in dev):
+  ```tsx
+  import { VisualStyleBuilder } from '@flow.os/style';
+  // in root o layout: <VisualStyleBuilder />
+  ```
+- **App senza React** (es. Flow client): in dev chiama il mount dopo il load. Richiede `react` e `react-dom` installati (es. devDependencies):
+  ```ts
+  import { initVisualStyleBuilder } from '@flow.os/style';
+  if (import.meta.env.DEV) initVisualStyleBuilder();
+  ```
+
+Il pannello mostra tag e classi dell’elemento selezionato, gruppi di proprietà (Spacing, Dimensioni, Tipografia e colore, Layout, Bordo e effetto, Posizione) e pulsanti **Copia oggetto** / **Copia s={}** per incollare nel sorgente.
 
 Extension Vite/VS Code in `extension/` (progetto separato).

package/index.ts

@@ -1,16 +1,30 @@
-export { SHORTHAND_MAP, isStyleKey, getStyleProp, toStyleValue } from './shorthand.js';
-export type { StyleShorthandKey } from './shorthand.js';
-export {
-  VIEWPORT_KEYS,
-  PSEUDO_KEYS,
-  VIEWPORT_WIDTHS,
-  getViewportKeyFromWidth,
-} from './breakpoints.js';
+// ───────────────────────────────────────────────────────────────────────────────
+// For other frameworks for wrapping App
+// <FlowStyle>  <App />  </FlowStyle>
+// ───────────────────────────────────────────────────────────────────────────────
+export { flowStyle as FlowStyle } from './resolve.js';
+
+
+// ───────────────────────────────────────────────────────────────────────────────
+// Visual builder (UI)
+// ───────────────────────────────────────────────────────────────────────────────
+export { VisualStyleBuilder, initVisualStyleBuilder } from './visual-builder.js';
+export type { VisualStyleBuilderOptions } from './visual-builder.js';
+
+// Plugin Vite (node only): usa import('@flow.os/style/vite-plugin').styleFlowServerPlugin()
+
+// ───────────────────────────────────────────────────────────────────────────────
+// Flow Style Builder – sempre esportato da style; pulsante trascinabile + pannello
+// ───────────────────────────────────────────────────────────────────────────────
+export { initFlowStyleBuilder, flowStyleBuilder } from './style-builder/index.js';
+export type { FlowStyleBuilderOptions, FlowStyleBuilderPosition } from './style-builder/index.js';
+
+
+// ───────────────────────────────────────────────────────────────────────────────
+// For @flow.os/client internal use
+// ───────────────────────────────────────────────────────────────────────────────
+export { resolveLayer, resolvePseudoStyle, styleToCssText } from './resolve.js';
+export { VIEWPORT_KEYS, PSEUDO_KEYS, getViewportKeyFromWidth } from './breakpoints.js';
+export type { PlainLayer } from './resolve.js';
 export type { ViewportKey, PseudoKey } from './breakpoints.js';
-export {
-  resolveLayer,
-  mergeResolved,
-  resolvePseudoStyle,
-  styleToCssText,
-} from './resolve.js';
-export type { PlainLayer, ResolvedLayer } from './resolve.js';
+export type { StyleShorthandKey } from './shorthand.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flow.os/style",
-  "version": "0.0.1-dev.1771783145",
+  "version": "0.0.1-dev.1771840262",
   "license": "PolyForm-Shield-1.0.0",
   "type": "module",
   "main": "./index.ts",
@@ -10,6 +10,11 @@
       "types": "./index.ts",
       "import": "./index.ts",
       "default": "./index.ts"
+    },
+    "./vite-plugin": {
+      "types": "./vite-plugin.ts",
+      "import": "./vite-plugin.ts",
+      "default": "./vite-plugin.ts"
     }
   }
 }

package/react.ts

@@ -0,0 +1,68 @@
+/**
+ * React: use styleFlow or s prop (same as Flow framework).
+ * 1. Call initFlowStyle(React) once in entry.
+ * 2. Wrap app in <FlowStyleRoot>.
+ * 3. Use <div styleFlow={...} /> or <div s={...} />.
+ * Peer dependency: react >= 18.
+ */
+import React from 'react';
+import { useState, useEffect } from 'react';
+import { flowStyle } from './resolve.js';
+import { getViewportKeyFromWidth } from './breakpoints.js';
+import type { ViewportKey } from './breakpoints.js';
+
+let currentViewport: ViewportKey =
+  typeof window !== 'undefined' ? getViewportKeyFromWidth(window.innerWidth) : 'mob';
+
+let patched = false;
+
+export type FlowStyleValue = Parameters<typeof flowStyle>[0];
+
+/**
+ * Call once in your entry (e.g. main.tsx). Then use styleFlow or s prop (same as Flow framework).
+ */
+export function initFlowStyle(ReactLib: typeof React): void {
+  if (patched) return;
+  const orig = ReactLib.createElement;
+  (ReactLib as unknown as { createElement: typeof React.createElement }).createElement = function (
+    type: unknown,
+    config: Record<string, unknown> | null,
+    ...args: unknown[]
+  ) {
+    const flowValue = config?.styleFlow ?? config?.s;
+    if (flowValue != null) {
+      const resolved = flowStyle(flowValue as FlowStyleValue, currentViewport);
+      const prevStyle = (config!.style as Record<string, string>) ?? {};
+      config = { ...config };
+      config.className = [config.className, resolved.class].filter(Boolean).join(' ');
+      config.style = { ...resolved.style, ...prevStyle };
+      delete config.styleFlow;
+      delete config.s;
+    }
+    return (orig as (...a: unknown[]) => React.ReactElement).call(this, type, config, ...args);
+  };
+  patched = true;
+}
+
+/** Wrap your app so viewport updates on resize; then use styleFlow or s on any element. */
+export function FlowStyleRoot({ children }: { children: React.ReactNode }): React.ReactElement {
+  const [viewport, setViewport] = useState<ViewportKey>(() => currentViewport);
+
+  useEffect(() => {
+    currentViewport = viewport;
+  }, [viewport]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const onResize = () => {
+      const next = getViewportKeyFromWidth(window.innerWidth);
+      currentViewport = next;
+      setViewport(next);
+    };
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
+  }, []);
+
+  return <>{children}</>;
+}
+

package/resolve.ts

@@ -1,5 +1,5 @@
 import { isStyleKey, getStyleProp, toStyleValue } from './shorthand.js';
-import { VIEWPORT_KEYS, PSEUDO_KEYS } from './breakpoints.js';
+import { VIEWPORT_KEYS, PSEUDO_KEYS, type ViewportKey } from './breakpoints.js';
 
 const DEFAULT_TOKENS = new Set(['primary', 'muted', 'primary-foreground']);
 
@@ -82,3 +82,46 @@ export function styleToCssText(style: Record<string, string>): string {
     .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/server.ts

@@ -0,0 +1,299 @@
+/**
+ * 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/shorthand.ts

@@ -52,6 +52,40 @@ export function getStyleProp(key: string): string | undefined {
   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 '';

package/style-builder/button.ts

@@ -0,0 +1,41 @@
+/** 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/style-builder/constants.ts

@@ -0,0 +1,16 @@
+/** 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/style-builder/dom.ts

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