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

package/build/config.ts

@@ -27,8 +27,8 @@ const cyan = (s: string) => `\x1b[36m${s}\x1b[0m`;
 const bold = (s: string) => `\x1b[1m${s}\x1b[0m`;
 const dim = (s: string) => `\x1b[2m${s}\x1b[0m`;
 const stripAnsi = (s: string) => s.replace(/\x1b\[[0-9;]*m/g, '');
-const CONTENT_W = 48;
-const BORDER_W = 52;
+const MIN_CONTENT_W = 40;
+const EXTRA_BOX_WIDTH = 20;
 
 function getNetworkUrl(port: number): string | null {
   const ifaces = os.networkInterfaces();
@@ -68,25 +68,32 @@ function resolveAlias(): Record<string, string> {
   return alias;
 }
 
+const FLOW_STYLE_POSITIONS = ['top-left', 'top-right', 'bottom-left', 'bottom-right'] as const;
+export type FlowStyleBuilderPosition = (typeof FLOW_STYLE_POSITIONS)[number];
+
 export type FlowConfigOptions = {
   /** Porta del dev server. Default: 3000 */
   port?: number;
   /** Esporre su rete. Default: true */
   host?: boolean;
   /**
-   * Backend in dev: passa flowServer() per usare il server Flow (API da server/routes).
-   * Per Go, Rust, Nitro o altro: non passare server e avvia il backend separatamente;
-   * opzionalmente aggiungi in plugins un proxy verso la porta del tuo backend.
+   * Backend in dev: true = server Flow (come flowServer() da @flow.os/server), false/undefined = nessuno.
+   * Puoi anche passare un plugin Vite (es. server: flowServer() da @flow.os/server).
    */
-  server?: Plugin;
+  server?: Plugin | boolean;
   /** Plugin Vite aggiuntivi. Default: [] */
   plugins?: Plugin[];
+  /**
+   * In dev: Flow Style Builder. Passa la posizione (es. 'bottom-right').
+   * Se non lo usi, non mettere la proprietà. Per i plugin Vite: flowStyleBuilder('bottom-right') da @flow.os/style.
+   */
+  flowStyleBuilder?: FlowStyleBuilderPosition;
 };
 
 const DEFAULTS = {
   port: 3000,
   host: true,
-  server: undefined as Plugin | undefined,
+  server: undefined as Plugin | boolean | undefined,
   plugins: [] as Plugin[],
 };
 
@@ -103,22 +110,37 @@ function flowServerUrlPlugin(hostEnabled: boolean): Plugin {
         const localHost = host === '::' || host === '0.0.0.0' ? 'localhost' : host;
         const localUrl = `http://${localHost}:${port}/`;
         const networkUrl = hostEnabled ? getNetworkUrl(port) : null;
+        const styleServerUrl = (server as { __flowStyleServerUrl?: string }).__flowStyleServerUrl;
+
+        const styleLine = styleServerUrl ? dim('Style server: ') + cyan(styleServerUrl) : '';
+        const contents = [
+          bold('Flow OS'),
+          cyan('🏠') + ' ' + dim('Local:   ') + cyan(localUrl),
+          networkUrl ? cyan('🌐') + ' ' + dim('Network: ') + cyan(networkUrl) : '',
+          styleLine,
+        ].filter(Boolean);
+        // Larghezza fissa: max lunghezza testo + extra così il rettangolo chiude bene a destra
+        const contentWidth =
+          Math.max(MIN_CONTENT_W, ...contents.map((c) => stripAnsi(c).length)) + EXTRA_BOX_WIDTH;
+        const borderW = contentWidth + 3;
 
         const line = (content: string) => {
-          const pad = Math.max(0, CONTENT_W - stripAnsi(content).length);
-          return dim('  │  ') + content + ' '.repeat(pad) + dim('  │');
+          const pad = Math.max(0, contentWidth - stripAnsi(content).length);
+          return dim(' │ ') + content + ' '.repeat(pad) + dim(' │');
         };
-        const border = (c: string) => dim('  ' + c + '─'.repeat(BORDER_W) + (c === '╭' ? '╮' : '╯'));
-        const out: string[] = [
-          '',
-          border('╭'),
-          line(bold('Flow OS') + dim('  is running')),
-          line(cyan('◆') + '  ' + dim('Local:   ') + cyan(localUrl)),
-          ...(networkUrl ? [line(dim('Network: ') + cyan(networkUrl))] : []),
-          border('╰'),
-          '',
+        const top = dim(' ╭') + '─'.repeat(borderW) + dim('╮');
+        const bottom = dim(' ╰') + '─'.repeat(borderW) + dim('╯');
+
+        const lines = [
+          top,
+          line(bold('Flow OS')),
+          line(cyan('🏠') + ' ' + dim('Local:   ') + cyan(localUrl)),
+          networkUrl ? line(cyan('🌐') + ' ' + dim('Network: ') + cyan(networkUrl)) : line(''),
+          ...(styleLine ? [line(styleLine)] : []),
+          bottom,
         ];
-        console.log(out.join('\n'));
+        // Sovrascrive le 2 righe sopra (comando shell + echo di bun)
+        process.stdout.write('\x1b[2A\r' + lines.join('\n') + '\n');
       });
     },
   };
@@ -128,7 +150,13 @@ function flowServerUrlPlugin(hostEnabled: boolean): Plugin {
 export default function config(
   options: FlowConfigOptions = {}
 ): () => Promise<ReturnType<typeof import('vite').defineConfig>> {
-  const { port: optPort = DEFAULTS.port, host = DEFAULTS.host, server = DEFAULTS.server, plugins = DEFAULTS.plugins } = options;
+  const {
+    port: optPort = DEFAULTS.port,
+    host = DEFAULTS.host,
+    server = DEFAULTS.server,
+    plugins = DEFAULTS.plugins,
+    flowStyleBuilder,
+  } = options;
   return async () => {
     let port: number;
     if (process.env.FLOW_DEV_PORT) {
@@ -136,10 +164,27 @@ export default function config(
     } else {
       port = await findFreePort(3000, 3020);
     }
+    const serverPlugin: Plugin | undefined =
+      server === true
+        ? (await import('@flow.os/server')).flowServer()
+        : typeof server === 'object' && server != null
+          ? server
+          : undefined;
+    const flowStyleBuilderPosition: FlowStyleBuilderPosition | undefined =
+      typeof flowStyleBuilder === 'string' && (FLOW_STYLE_POSITIONS as readonly string[]).includes(flowStyleBuilder)
+        ? flowStyleBuilder
+        : undefined;
     const { flow } = await import('./vite.js');
+    const stylePlugin =
+      flowStyleBuilderPosition != null
+        ? (await import('@flow.os/style/vite-plugin')).styleFlowServerPlugin()
+        : undefined;
     const allPlugins = [
+      ...(stylePlugin ? [stylePlugin] : []),
       flowServerUrlPlugin(host === true),
-      ...(server ? [server, flow(), ...plugins] : [flow(), ...plugins]),
+      ...(serverPlugin
+        ? [serverPlugin, flow({ flowStyleBuilder: flowStyleBuilderPosition }), ...plugins]
+        : [flow({ flowStyleBuilder: flowStyleBuilderPosition }), ...plugins]),
     ];
     const alias = resolveAlias();
     const baseLogger = createLogger('info');
@@ -147,7 +192,7 @@ export default function config(
       ...baseLogger,
       info: (msg: string, opts?: { clear?: boolean }) => {
         const t = msg.replace(/\s+/g, ' ');
-        if (/VITE\s+v?\d|ready\s+in|Local:\s*http|Network:\s*http|press\s+h\s+enter|Port\s+\d+\s+is\s+in\s+use/i.test(t)) return;
+        if (/VITE\s+v?\d|ready\s+in|Local:\s*http|Network:\s*http|press\s+h\s+enter|Port\s+\d+\s+is\s+in\s+use|optimizing\s+dependencies|re-optimizing/i.test(t)) return;
         baseLogger.info(msg, opts);
       },
     };

package/build/vite.ts

@@ -4,12 +4,49 @@ import { resolve } from 'path';
 import type { Plugin } from 'vite';
 
 const FLOW_ENTRY_ID = '\0flow-entry';
-const ENTRY_CODE = `import * as root from '/client/root.tsx';
-import { run } from '@flow.os/router';
-const opts = {};
-if (root.fallback != null) opts.fallback = root.fallback;
-if (root.notFound != null) opts.notFound = root.notFound;
-run(root.default, import.meta.glob('/client/routes/**/*.tsx'), Object.keys(opts).length ? opts : undefined);
+
+const POSITIONS = ['top-left', 'top-right', 'bottom-left', 'bottom-right'] as const;
+type Position = (typeof POSITIONS)[number];
+
+function isPosition(s: unknown): s is Position {
+  return typeof s === 'string' && (POSITIONS as readonly string[]).includes(s);
+}
+
+function getEntryWithBuilder(position: Position): string {
+  const pos = JSON.stringify(position);
+  return `(async () => {
+  const isPreview = typeof window !== 'undefined' && new URLSearchParams(window.location.search).has('preview');
+  if (import.meta.env.DEV && !isPreview) {
+    const app = document.getElementById('app');
+    if (app) {
+      app.innerHTML = '';
+      app.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100vh;z-index:1';
+      const iframe = document.createElement('iframe');
+      iframe.setAttribute('data-flow-preview', '1');
+      iframe.src = window.location.pathname + '?preview=1' + (window.location.hash || '');
+      iframe.style.cssText = 'width:100%;height:100%;border:0';
+      app.appendChild(iframe);
+      const { initFlowStyleBuilder } = await import('@flow.os/style');
+      initFlowStyleBuilder({ previewIframe: iframe, position: ${pos} });
+    }
+    return;
+  }
+  const root = await import('/client/root.tsx');
+  const { run } = await import('@flow.os/router');
+  const opts = {};
+  if (root.fallback != null) opts.fallback = root.fallback;
+  run(root.default, import.meta.glob('/client/routes/**/*.tsx'), Object.keys(opts).length ? opts : undefined);
+})();
+`;
+}
+
+const ENTRY_DEFAULT = `(async () => {
+  const root = await import('/client/root.tsx');
+  const { run } = await import('@flow.os/router');
+  const opts = {};
+  if (root.fallback != null) opts.fallback = root.fallback;
+  run(root.default, import.meta.glob('/client/routes/**/*.tsx'), Object.keys(opts).length ? opts : undefined);
+})();
 `;
 
 /** Reset stili browser: niente margin/padding di default, layout full viewport. */
@@ -21,7 +58,14 @@ const HTML = `<!DOCTYPE html>
 <body><div id="app"></div><script type="module" src="/entry.tsx"></script></body>
 </html>`;
 
-export function flow(): Plugin {
+export type FlowPluginOptions = {
+  flowStyleBuilder?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+};
+
+export function flow(options: FlowPluginOptions = {}): Plugin {
+  const flowStyleBuilder = options.flowStyleBuilder;
+  const position: Position | undefined = flowStyleBuilder != null && isPosition(flowStyleBuilder) ? flowStyleBuilder : undefined;
+  const entryCode = position != null ? getEntryWithBuilder(position) : ENTRY_DEFAULT;
   const cwd = process.cwd();
   return {
     name: 'flow',
@@ -41,7 +85,7 @@ export function flow(): Plugin {
       return id === '/entry.tsx' ? FLOW_ENTRY_ID : null;
     },
     load(id) {
-      return id === FLOW_ENTRY_ID ? ENTRY_CODE : null;
+      return id === FLOW_ENTRY_ID ? entryCode : null;
     },
     buildEnd(err) {
       if (err) {

package/features/attrs.ts

@@ -2,7 +2,7 @@ import { effect } from '@flow.os/core';
 import { isGetter } from './utils.js';
 
 /** Props gestite altrove (non passare qui). */
-const SKIP = new Set(['children', 'class', 'className', 'classList', 'classFlow', 'style', 'styleFlow']);
+const SKIP = new Set(['children', 'class', 'className', 'classList', 'classFlow', 'style', 's', 'styleFlow']);
 
 export function applyAttrs(el: HTMLElement, rest: Record<string, unknown>): void {
   for (const [k, v] of Object.entries(rest)) {

package/index.ts

@@ -1,6 +1,7 @@
 /// <reference path="./runtime/jsx-types.d.ts" />
-// API pubblica: tutto da qui o da subpath (./config, ./vite, ./jsx-runtime, ./jsx-dev-runtime)
+// Like Tailwind: one package. Use s or styleFlow in JSX; FlowStyle() for imperative / other frameworks.
 export { Fragment, jsx, jsxs, jsxDEV } from './runtime/jsx.js';
 export { normalizeChild, setContent } from './runtime/dom.js';
 export { default as config } from './build/config.js';
 export { applyClassFlow, applyClassAndClassList, applyStyle, applyStyleFlow, applyAttrs } from './features/index.js';
+export { FlowStyle } from '@flow.os/style';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flow.os/client",
-  "version": "0.0.1-dev.1771785969",
+  "version": "0.0.1-dev.1771840262",
   "license": "PolyForm-Shield-1.0.0",
   "type": "module",
   "main": "./index.ts",

package/runtime/jsx-types.d.ts

@@ -49,6 +49,8 @@ declare global {
       class?: string | (() => string) | (string | (() => string))[];
       classList?: Record<string, boolean | (() => boolean)>;
       classFlow?: (() => Record<string, string | number>) | Record<string, ClassFlowValue>;
+      /** Style layer: string | [base, layer] | layer. Use s or styleFlow, same thing. */
+      s?: StyleFlow;
       styleFlow?: StyleFlow;
       style?: Record<string, string | number | (() => string | number)>;
       children?: unknown;

package/runtime/jsx.ts

@@ -54,11 +54,13 @@ function applyProps(el: HTMLElement, props: Props): void {
     classList,
     classFlow,
     style: styleProp,
+    s,
     styleFlow,
     ...rest
   } = props;
-  if (styleFlow != null) {
-    applyStyleFlow(el, styleFlow);
+  const styleFlowValue = s ?? styleFlow;
+  if (styleFlowValue != null) {
+    applyStyleFlow(el, styleFlowValue);
   } else {
     applyClassFlow(el, classFlow);
     applyClassAndClassList(el, classProp, classNameProp, classList);