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

package/style-builder/index.ts

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

package/style-builder/panel.ts

@@ -0,0 +1,69 @@
+/** Pannello laterale del Flow Style Builder. */
+
+import { createEl } from './dom.js';
+import { PANEL_ID, PANEL_WIDTH, THEME } from './constants.js';
+
+export function createPanel(initialRight: boolean, onClose: () => void): {
+  element: HTMLDivElement;
+  open: () => void;
+  close: () => void;
+} {
+  const panel = createEl('div', {
+    position: 'fixed',
+    top: '0',
+    width: `${PANEL_WIDTH}px`,
+    height: '100vh',
+    background: THEME.bg,
+    color: THEME.text,
+    fontFamily: 'ui-sans-serif, system-ui, sans-serif',
+    fontSize: '12px',
+    boxShadow: '0 0 24px rgba(0,0,0,0.4)',
+    display: 'none',
+    flexDirection: 'column',
+    zIndex: '2147483646',
+    overflow: 'hidden',
+  });
+  panel.id = PANEL_ID;
+
+  function open(): void {
+    const s = panel.style as unknown as Record<string, string>;
+    s['right'] = initialRight ? '0' : '';
+    s['left'] = initialRight ? '' : '0';
+    panel.style.display = 'flex';
+  }
+
+  function close(): void {
+    panel.style.display = 'none';
+  }
+
+  const header = createEl('div', {
+    padding: '10px 12px',
+    borderBottom: `1px solid ${THEME.border}`,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    background: THEME.surface,
+  });
+  const title = createEl('span', { fontWeight: '600', fontSize: '13px' });
+  title.textContent = 'Flow Style Builder';
+  const closeBtn = createEl('button', {
+    padding: '6px',
+    border: `1px solid ${THEME.border}`,
+    borderRadius: '6px',
+    background: 'transparent',
+    color: THEME.muted,
+    cursor: 'pointer',
+  }) as HTMLButtonElement;
+  closeBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>';
+  closeBtn.title = 'Chiudi';
+  closeBtn.addEventListener('click', onClose);
+  header.appendChild(title);
+  header.appendChild(closeBtn);
+  panel.appendChild(header);
+
+  const body = createEl('div', { flex: '1', overflow: 'auto', padding: '12px', color: THEME.muted });
+  body.textContent = 'Contenuto da aggiungere.';
+  panel.appendChild(body);
+
+  return { element: panel, open, close };
+}

package/style-builder/position.ts

@@ -0,0 +1,25 @@
+/** Posizione del pulsante: uno dei quattro angoli. */
+
+import { MARGIN } from './constants.js';
+
+export type FlowStyleBuilderPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+
+/** Passa la posizione (es. flowStyleBuilder: flowStyleBuilder('bottom-right') in flow.config). */
+export function flowStyleBuilder(position: FlowStyleBuilderPosition): FlowStyleBuilderPosition {
+  return position;
+}
+
+export function cornerToStyles(corner: FlowStyleBuilderPosition): Partial<CSSStyleDeclaration> {
+  const m = `${MARGIN}px`;
+  switch (corner) {
+    case 'top-left':
+      return { top: m, left: m, right: '', bottom: '' };
+    case 'top-right':
+      return { top: m, left: '', right: m, bottom: '' };
+    case 'bottom-left':
+      return { top: '', left: m, right: '', bottom: m };
+    case 'bottom-right':
+    default:
+      return { top: '', left: '', right: m, bottom: m };
+  }
+}