create-flow-os 0.0.1-dev.1771614697 → 0.0.1-dev.1771615015

package/profiles/full/packages/flow-os/lifecycle.ts

@@ -0,0 +1,6 @@
+/** Esegue il callback dopo il mount (microtask: subito dopo il sync corrente). */
+export function onMount(fn: () => void): void {
+  queueMicrotask(fn);
+}
+
+export { onCleanup } from './state.js';

package/profiles/full/packages/flow-os/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@flow-os/core",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./index.ts",
+  "types": "./index.ts",
+  "dependencies": {},
+  "exports": {
+    ".": {
+      "types": "./index.ts",
+      "import": "./index.ts",
+      "default": "./index.ts"
+    }
+  }
+}

package/profiles/full/packages/flow-os/show-switch.ts

@@ -0,0 +1,56 @@
+/**
+ * Show: rendering condizionale (when/fallback).
+ * Switch: primo branch con when() truthy, altrimenti fallback.
+ */
+import { effect } from './state.js';
+import { setContent } from './dom.js';
+
+function isGetter(fn: unknown): fn is () => unknown {
+  return typeof fn === 'function' && fn.length === 0;
+}
+
+/** Show: quando when() è truthy mostra children, altrimenti fallback. */
+export function Show(props: {
+  when: (() => unknown) | unknown;
+  fallback?: unknown;
+  children?: unknown;
+}): HTMLElement {
+  const wrapper = document.createElement('span');
+  wrapper.style.display = 'contents';
+  const getWhen = isGetter(props.when) ? props.when : () => props.when;
+  effect(() => {
+    setContent(wrapper, getWhen() ? props.children : props.fallback);
+  });
+  return wrapper;
+}
+
+export type MatchBranch = { when: () => boolean; children: unknown };
+
+/** Switch: primo branch con when() truthy, altrimenti fallback. branches = [{ when, children }, ...]. */
+export function Switch(props: {
+  fallback?: unknown;
+  branches: MatchBranch[];
+}): HTMLElement {
+  const wrapper = document.createElement('span');
+  wrapper.style.display = 'contents';
+  effect(() => {
+    const list = props.branches;
+    for (let i = 0; i < list.length; i++) {
+      const b = list[i];
+      if (b === undefined) continue;
+      const cond = isGetter(b.when) ? b.when() : b.when;
+      if (cond) {
+        setContent(wrapper, b.children);
+        return;
+      }
+    }
+    setContent(wrapper, props.fallback);
+  });
+  return wrapper;
+}
+
+/** Helper per costruire i branch di Switch: Match({ when: () => cond, children: <Node/> }) => branch. */
+export function Match(props: { when: (() => boolean) | boolean; children?: unknown }): MatchBranch {
+  const whenFn = isGetter(props.when) ? props.when : () => Boolean(props.when);
+  return { when: whenFn, children: props.children };
+}

package/profiles/full/packages/flow-os/state.ts

@@ -0,0 +1,56 @@
+type Subscriber = () => void;
+type SubscriberSet = Set<Subscriber>;
+
+interface EffectRecord {
+  run: () => void;
+  deps: Set<SubscriberSet>;
+  cleanups: Array<() => void>;
+}
+
+let currentEffect: EffectRecord | null = null;
+
+export function state<T>(initialValue: T): [() => T, (value: T | ((prev: T) => T)) => void] {
+  let value = initialValue;
+  const subscribers: SubscriberSet = new Set();
+
+  function get(): T {
+    if (currentEffect !== null) {
+      subscribers.add(currentEffect.run);
+      currentEffect.deps.add(subscribers);
+    }
+    return value;
+  }
+
+  function set(next: T | ((prev: T) => T)): void {
+    const nextValue = typeof next === 'function' ? (next as (prev: T) => T)(value) : next;
+    if (Object.is(value, nextValue)) return;
+    value = nextValue;
+    const copy = Array.from(subscribers);
+    copy.forEach((fn) => fn());
+  }
+
+  return [get, set];
+}
+
+export function effect(fn: Subscriber): void {
+  const deps = new Set<SubscriberSet>();
+  const cleanups: Array<() => void> = [];
+  const run: Subscriber = () => {
+    for (const fn of cleanups) fn();
+    cleanups.length = 0;
+    deps.forEach((subs) => subs.delete(run));
+    deps.clear();
+    const prev = currentEffect;
+    currentEffect = { run, deps, cleanups };
+    try {
+      fn();
+    } finally {
+      currentEffect = prev;
+    }
+  };
+  run();
+}
+
+export function onCleanup(fn: () => void): void {
+  if (currentEffect !== null) currentEffect.cleanups.push(fn);
+}

package/profiles/full/packages/router/index.ts

@@ -0,0 +1,139 @@
+export const APP_ID = 'flow-app';
+
+/** Contenitore dove il router monta la pagina corrente. In root: <App /> (da @flow-os/router). */
+export function App(): HTMLDivElement {
+  const el = document.createElement('div');
+  el.id = APP_ID;
+  el.setAttribute('role', 'main');
+  return el;
+}
+
+export type RouteModule = {
+  default: (() => Node) | ((params: Record<string, string>) => Node) | (() => string) | string;
+};
+
+export type RunOptions = {
+  /** Nodo (o factory) mostrato mentre la route lazy viene caricata. */
+  fallback?: Node | (() => Node);
+};
+
+function pathToPattern(key: string): string {
+  const afterRoutes = key.replace(/^.*[/\\]routes[/\\]?/i, '').replace(/\.tsx?$/i, '');
+  const s = afterRoutes.split(/[/\\]/).filter(Boolean).join('/');
+  if (s === 'index' || s === '') return '';
+  return s
+    .split('/')
+    .map((x) => (x.startsWith('[') && x.endsWith(']') ? `:${x.slice(1, -1)}` : x))
+    .join('/');
+}
+
+function match(pattern: string, path: string): Record<string, string> | null {
+  const pa = pattern ? pattern.split('/').filter(Boolean) : [];
+  const ph = path.replace(/^\//, '').split('/').filter(Boolean);
+  if (pa.length !== ph.length) return null;
+  const params: Record<string, string> = {};
+  for (let i = 0; i < pa.length; i++) {
+    if (pa[i]!.startsWith(':')) params[pa[i]!.slice(1)] = ph[i] ?? '';
+    else if (pa[i] !== ph[i]) return null;
+  }
+  return params;
+}
+
+function setContent(container: HTMLElement, content: Node | string): void {
+  container.innerHTML = '';
+  if (typeof content === 'string') container.textContent = content;
+  else container.appendChild(content);
+}
+
+function defaultNotFound(path: string): Node {
+  const wrap = document.createElement('div');
+  wrap.setAttribute('role', 'alert');
+  const h = document.createElement('h1');
+  h.textContent = '404';
+  const p = document.createElement('p');
+  p.textContent = `Pagina non trovata: ${path || '/'}`;
+  wrap.append(h, p);
+  return wrap;
+}
+
+export function createRouter(
+  modules: Record<string, () => Promise<RouteModule>>,
+  container: HTMLElement,
+  options: { fallback?: Node | (() => Node); notFound?: Node | ((path: string) => Node) } = {}
+) {
+  const routes = Object.entries(modules).map(([key, loader]) => ({
+    pattern: pathToPattern(key),
+    loader,
+  }));
+  routes.sort(
+    (a, b) =>
+      b.pattern.split('/').filter(Boolean).length - a.pattern.split('/').filter(Boolean).length
+  );
+  const notFound = options.notFound ?? defaultNotFound;
+
+  async function render(pathname: string): Promise<boolean> {
+    const path = pathname === '/' ? '' : pathname.slice(1);
+    for (const { pattern, loader } of routes) {
+      const params = match(pattern, path);
+      if (params === null) continue;
+      const fallbackNode =
+        options.fallback != null
+          ? typeof options.fallback === 'function'
+            ? options.fallback()
+            : options.fallback
+          : null;
+      if (fallbackNode) setContent(container, fallbackNode);
+      const mod = await loader();
+      const def = mod.default;
+      if (typeof def === 'function') {
+        const out = def.length
+          ? (def as (p: Record<string, string>) => Node)(params)
+          : (def as () => Node | string)();
+        if (out instanceof Node) setContent(container, out);
+        else if (typeof out === 'string') container.innerHTML = out;
+        else container.innerHTML = '';
+      } else setContent(container, typeof def === 'string' ? def : (def as unknown as Node));
+      return true;
+    }
+    const nfNode = typeof notFound === 'function' ? notFound(pathname) : notFound;
+    setContent(container, nfNode);
+    return false;
+  }
+
+  function go(path: string, replace = false): void {
+    const p = path.startsWith('/') ? path : `/${path}`;
+    render(p).then((ok) => {
+      if (ok) (replace ? history.replaceState : history.pushState).call(history, null, '', p);
+    });
+  }
+
+  function start(): void {
+    render(location.pathname || '/');
+    window.addEventListener('popstate', () => render(location.pathname || '/'));
+    document.addEventListener('click', (e) => {
+      const a = (e.target as Element).closest('a');
+      if (a?.getAttribute('href')?.startsWith('/') && !a.href.startsWith('//')) {
+        e.preventDefault();
+        go(a.getAttribute('href')!);
+      }
+    });
+  }
+
+  return { go, start };
+}
+
+/** Monta App e avvia il router. Da usare nell'entry virtuale. */
+export function run(
+  App: () => Node,
+  modules: Record<string, () => Promise<RouteModule>>,
+  options?: RunOptions
+): void {
+  const app = document.getElementById('app')!;
+  app.appendChild(App());
+  const appContainer = document.getElementById(APP_ID);
+  if (!appContainer)
+    throw new Error(
+      `#${APP_ID} not found: use <App /> from @flow-os/router in your root layout.`
+    );
+  createRouter(modules, appContainer as HTMLElement, options).start();
+}

package/profiles/full/packages/router/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@flow-os/router",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./index.ts",
+  "types": "./index.ts",
+  "exports": {
+    ".": { "types": "./index.ts", "import": "./index.ts", "default": "./index.ts" }
+  }
+}

package/profiles/full/packages/server/core.ts

@@ -0,0 +1,140 @@
+/// <reference types="node" />
+import { readdirSync } from 'fs';
+import { join } from 'path';
+import type { FlowHandler, FlowRequest } from './index.js';
+
+const METHOD_SUFFIXES = [
+  '.get',
+  '.post',
+  '.put',
+  '.delete',
+  '.patch',
+  '.head',
+  '.options',
+] as const;
+
+export type RouteMeta = { path: string; method: string; filePath: string };
+
+function fileSegmentToRoute(segment: string): string {
+  return segment.replace(/^\[([^\]]+)\]$/, ':$1');
+}
+
+function parseRoutePath(relativePath: string): { path: string; method: string } | null {
+  const lower = relativePath.toLowerCase();
+  for (const suffix of METHOD_SUFFIXES) {
+    const ext = lower.endsWith('.tsx') ? '.tsx' : '.ts';
+    if (lower.endsWith(suffix + ext)) {
+      const withoutExt = relativePath.slice(0, -(suffix.length + ext.length));
+      const segments = withoutExt.split(/[/\\]/).filter(Boolean);
+      const routeSegments = segments.map((s) => fileSegmentToRoute(s));
+      const path = '/' + routeSegments.join('/');
+      const pathNorm = path === '/index' ? '/' : path;
+      const method = suffix.slice(1).toUpperCase();
+      return { path: pathNorm, method };
+    }
+  }
+  return null;
+}
+
+export function walkRoutes(dir: string, base = ''): RouteMeta[] {
+  let entries: Array<{ name: string; isDirectory(): boolean; isFile(): boolean }>;
+  try {
+    entries = readdirSync(dir, { withFileTypes: true }) as Array<{
+      name: string;
+      isDirectory(): boolean;
+      isFile(): boolean;
+    }>;
+  } catch {
+    return [];
+  }
+  const routes: RouteMeta[] = [];
+  for (const e of entries) {
+    const name = e.name;
+    const rel = base ? `${base}/${name}` : name;
+    if (e.isDirectory()) {
+      routes.push(...walkRoutes(join(dir, name), rel));
+    } else if (e.isFile() && (name.endsWith('.ts') || name.endsWith('.tsx'))) {
+      const parsed = parseRoutePath(rel);
+      if (parsed) routes.push({ ...parsed, filePath: join(dir, name) });
+    }
+  }
+  return routes;
+}
+
+function routePatternToRegex(path: string): { re: RegExp; keys: string[] } {
+  const keys: string[] = [];
+  const pattern =
+    '^' +
+    path.replace(/:(\w+)/g, (_, key) => {
+      keys.push(key);
+      return '([^/]+)';
+    }) +
+    '$';
+  return { re: new RegExp(pattern), keys };
+}
+
+export type LoadHandler = (filePath: string) => Promise<{ default: FlowHandler }>;
+
+type RouteEntry = {
+  method: string;
+  re: RegExp;
+  keys: string[];
+  handler: FlowHandler;
+};
+
+export async function createFlowServer(
+  routesDir: string,
+  loadHandler: LoadHandler
+): Promise<{
+  dispatch: (pathname: string, method: string, request: Request) => Promise<Response | null>;
+  matches: (pathname: string, method: string) => boolean;
+}> {
+  const routeList = walkRoutes(routesDir);
+  const routes: RouteEntry[] = [];
+
+  for (const r of routeList) {
+    const mod = await loadHandler(r.filePath);
+    const handler = mod.default;
+    if (!handler) continue;
+    const { re, keys } = routePatternToRegex(r.path);
+    routes.push({ method: r.method, re, keys, handler });
+  }
+
+  function getMatch(
+    pathname: string,
+    method: string
+  ): { handler: FlowHandler; params: Record<string, string> } | null {
+    const norm = pathname.split('?')[0] || '/';
+    for (const route of routes) {
+      if (route.method !== method) continue;
+      const m = route.re.exec(norm);
+      if (!m) continue;
+      const params: Record<string, string> = {};
+      route.keys.forEach((k, i) => (params[k] = m[i + 1] ?? ''));
+      return { handler: route.handler, params };
+    }
+    return null;
+  }
+
+  async function dispatch(
+    pathname: string,
+    method: string,
+    request: Request
+  ): Promise<Response | null> {
+    const match = getMatch(pathname, method);
+    if (!match) return null;
+    const flowReq = request as FlowRequest;
+    flowReq.params = match.params;
+    const out = await match.handler(flowReq);
+    if (out instanceof Response) return out;
+    return new Response(JSON.stringify(out), {
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+
+  function matches(pathname: string, method: string): boolean {
+    return getMatch(pathname, method) !== null;
+  }
+
+  return { dispatch, matches };
+}

package/profiles/full/packages/server/index.ts

@@ -0,0 +1,24 @@
+/**
+ * API native: Request/Response (Bun/Web). Zero dipendenze.
+ * Per route dinamiche usa request.params (iniettato dal router).
+ */
+
+export { flowServer } from './plugin.js';
+export type FlowRequest = Request & { params: Record<string, string> };
+
+export type FlowHandler = (
+  request: FlowRequest
+) => Response | Promise<Response> | object | Promise<object>;
+
+/**
+ * Wrapper per gli handler: ritorna oggetti come JSON, Response come sono.
+ */
+export function defineHandler(fn: FlowHandler): FlowHandler {
+  return async (request: FlowRequest) => {
+    const out = await fn(request);
+    if (out instanceof Response) return out;
+    return new Response(JSON.stringify(out), {
+      headers: { 'Content-Type': 'application/json' },
+    });
+  };
+}

package/profiles/full/packages/server/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@flow-os/server",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./index.ts",
+  "types": "./index.ts",
+  "bin": "./start.ts",
+  "dependencies": {},
+  "peerDependencies": {
+    "vite": ">=5.0.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./index.ts",
+      "import": "./index.ts",
+      "default": "./index.ts"
+    },
+    "./vite": {
+      "types": "./plugin.ts",
+      "import": "./plugin.ts",
+      "default": "./plugin.ts"
+    },
+    "./production": {
+      "types": "./production.ts",
+      "import": "./production.ts",
+      "default": "./production.ts"
+    }
+  }
+}

package/profiles/full/packages/server/plugin.ts

@@ -0,0 +1,79 @@
+/// <reference types="node" />
+import { resolve } from 'path';
+import { pathToFileURL } from 'url';
+import type { Plugin } from 'vite';
+import { createFlowServer, type LoadHandler } from './core.js';
+import type { FlowHandler } from './index.js';
+
+type NodeReq = import('http').IncomingMessage;
+type NodeRes = import('http').ServerResponse;
+
+function nodeRequestToWebRequest(req: NodeReq, baseUrl: string): Request {
+  const url = (req.url ?? '/').startsWith('http') ? req.url! : baseUrl + (req.url ?? '/');
+  const opts: RequestInit = {
+    method: req.method ?? 'GET',
+    headers: req.headers as HeadersInit,
+  };
+  if (req.method !== 'GET' && req.method !== 'HEAD') {
+    (opts as RequestInit & { duplex?: string }).body = req as unknown as BodyInit;
+    (opts as RequestInit & { duplex?: string }).duplex = 'half';
+  }
+  return new Request(url, opts);
+}
+
+async function webResponseToNodeResponse(webRes: Response, res: NodeRes): Promise<void> {
+  res.writeHead(webRes.status, Object.fromEntries(webRes.headers));
+  if (webRes.body) {
+    const buf = Buffer.from(await webRes.arrayBuffer());
+    res.end(buf);
+  } else {
+    res.end();
+  }
+}
+
+export function flowServerMiddleware(
+  dispatch: (pathname: string, method: string, request: Request) => Promise<Response | null>,
+  matches: (pathname: string, method: string) => boolean
+): (req: NodeReq, res: NodeRes, next: () => void) => void {
+  return (req, res, next) => {
+    const pathname = req.url?.split('?')[0] ?? '/';
+    const method = req.method ?? 'GET';
+    if (!matches(pathname, method)) return next();
+    const baseUrl = `http://${req.headers.host ?? 'localhost'}`;
+    const request = nodeRequestToWebRequest(req, baseUrl);
+    dispatch(pathname, method, request)
+      .then((response) => {
+        if (response) return webResponseToNodeResponse(response, res);
+        next();
+      })
+      .catch((err) => {
+        res.writeHead(500, { 'Content-Type': 'text/plain' });
+        res.end(String(err?.message ?? err));
+      });
+  };
+}
+
+export type FlowServerOptions = {
+  /** Cartella route API (file-based). Default: server/routes */
+  routesDir?: string;
+};
+
+type ConnectStack = Array<{ route: string; handle: (req: NodeReq, res: NodeRes, next: () => void) => void }>;
+
+export function flowServer(options?: FlowServerOptions): Plugin {
+  const routesDir = options?.routesDir ?? resolve(process.cwd(), 'server', 'routes');
+  return {
+    name: 'flow-server',
+    enforce: 'pre',
+    configureServer: async (server) => {
+      const loadHandler: LoadHandler = (filePath) =>
+        server.ssrLoadModule(pathToFileURL(filePath).href) as Promise<{ default: FlowHandler }>;
+      const { dispatch, matches } = await createFlowServer(routesDir, loadHandler);
+      const middleware = flowServerMiddleware(dispatch, matches);
+      (server.middlewares as unknown as { stack: ConnectStack }).stack.unshift({
+        route: '',
+        handle: middleware,
+      });
+    },
+  };
+}

package/profiles/full/packages/server/production.ts

@@ -0,0 +1,75 @@
+import { join, resolve } from 'path';
+import { pathToFileURL } from 'url';
+import { createFlowServer } from './core.js';
+
+declare const Bun: {
+  file(path: string): { exists(): Promise<boolean> };
+  serve(options: { port: number; hostname: string; fetch(req: Request): Promise<Response> }): { hostname: string; port: number };
+};
+
+export type ProductionServerOptions = {
+  /** Cartella route (es. server/routes). Default: server/routes */
+  routesDir?: string;
+  /** Cartella statici (es. dist). Default: dist */
+  staticDir?: string;
+  /** Porta. Default: 3000 */
+  port?: number;
+  /** Hostname. Default: 0.0.0.0 */
+  hostname?: string;
+};
+
+/**
+ * Serve un file dalla cartella staticDir. pathname = / -> index.html.
+ * Se il file non esiste (SPA client-side routing) ritorna index.html.
+ */
+async function serveStatic(staticDir: string, pathname: string): Promise<Response> {
+  const path = pathname === '/' ? '/index.html' : pathname;
+  const filePath = join(staticDir, path.replace(/^\//, ''));
+  try {
+    const file = Bun.file(filePath);
+    if (await file.exists()) {
+      return new Response(file as unknown as BodyInit, { headers: { 'Cache-Control': 'public, max-age=0' } });
+    }
+  } catch {
+    // ignore
+  }
+  // SPA fallback: qualsiasi path non trovato → index.html
+  const indexFile = Bun.file(join(staticDir, 'index.html'));
+  if (await indexFile.exists()) return new Response(indexFile as unknown as BodyInit);
+  return new Response('Not Found', { status: 404 });
+}
+
+/**
+ * Avvia il server di produzione: API da routesDir + statici da staticDir.
+ * Usa Bun.serve() (solo Bun).
+ */
+export async function runProductionServer(options: ProductionServerOptions = {}): Promise<void> {
+  const cwd = process.cwd();
+  const routesDir = resolve(cwd, options.routesDir ?? 'server/routes');
+  const staticDir = resolve(cwd, options.staticDir ?? 'dist');
+  const port = options.port ?? 3000;
+  const hostname = options.hostname ?? '0.0.0.0';
+
+  const loadHandler = async (filePath: string) => {
+    return import(pathToFileURL(filePath).href) as Promise<{ default: import('./index.js').FlowHandler }>;
+  };
+
+  const { dispatch, matches } = await createFlowServer(routesDir, loadHandler);
+
+  const server = Bun.serve({
+    port,
+    hostname,
+    async fetch(req: Request) {
+      const url = new URL(req.url);
+      const pathname = url.pathname;
+      const method = req.method;
+
+      const apiRes = await dispatch(pathname, method, req);
+      if (apiRes) return apiRes;
+
+      return serveStatic(staticDir, pathname);
+    },
+  });
+
+  console.log(`Server: http://${server.hostname}:${server.port}`);
+}

package/profiles/full/packages/server/start.ts

@@ -0,0 +1,15 @@
+#!/usr/bin/env bun
+/**
+ * Entry produzione: lancia il server (statici + API).
+ * Uso: bunx @flow-os/server oppure "start": "bunx @flow-os/server" in package.json.
+ */
+import { runProductionServer } from './production.js';
+
+const port = process.env['PORT'] ? Number(process.env['PORT']) : 3000;
+
+runProductionServer({
+  routesDir: 'server/routes',
+  staticDir: 'dist',
+  port,
+  hostname: '0.0.0.0',
+});

package/profiles/full/packages/style/breakpoints.ts

@@ -0,0 +1,20 @@
+/** Chiavi viewport: ordine da piccolo a grande (merge sovrascrive). */
+export const VIEWPORT_KEYS = ['mob', 'tab', 'des'] as const;
+export type ViewportKey = (typeof VIEWPORT_KEYS)[number];
+
+/** Chiavi pseudo-stato (hover, active, focus). */
+export const PSEUDO_KEYS = ['hover', 'active', 'focus', 'focusVisible'] as const;
+export type PseudoKey = (typeof PSEUDO_KEYS)[number];
+
+/** Larghezze min (px) per viewport. mob < 640, tab 640–1023, des 1024+. */
+export const VIEWPORT_WIDTHS: Record<ViewportKey, number> = {
+  mob: 0,
+  tab: 640,
+  des: 1024,
+};
+
+export function getViewportKeyFromWidth(w: number): ViewportKey {
+  if (w >= 1024) return 'des';
+  if (w >= 640) return 'tab';
+  return 'mob';
+}

package/profiles/full/packages/style/extension/.vscodeignore

@@ -0,0 +1,5 @@
+.vscode/**
+src/**
+tsconfig.json
+.gitignore
+**/*.map