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

package/gen.ts

@@ -95,7 +95,7 @@ async function main() {
   await rm(packagesDir, { recursive: true, force: true });
 
   const rootPkg = (await Bun.file(join(REPO_ROOT, "package.json")).json()) as { dependencies?: Record<string, string> };
-  const flowDepNames = Object.keys(rootPkg.dependencies ?? {}).filter((k) => k === "@flow-os" || k.startsWith("@flow-os/"));
+  const flowDepNames = Object.keys(rootPkg.dependencies ?? {}).filter((k) => k.startsWith("@flow-os"));
 
   for (const [id, profile] of Object.entries(config.profiles)) {
     const dest = join(profilesDir, id);
@@ -120,9 +120,12 @@ async function main() {
       if (!dir) continue;
       const folderName = basename(dir);
       const destPkg = join(profilePackagesDir, folderName);
-      await copyWithExclude(dir, destPkg, ["node_modules", ".git", "dist"]);
+      const copyExclude = ["node_modules", ".git", "dist"];
+      if (folderName === "flow-os") copyExclude.push("client", "server", "router", "style", "extension");
+      await copyWithExclude(dir, destPkg, copyExclude);
       deps[pkgName] = "file:./packages/" + folderName;
     }
+    delete deps["@flow-os"];
     pkg.dependencies = deps;
     delete (pkg as Record<string, unknown>).workspaces;
     await Bun.write(pkgPath, JSON.stringify(pkg, null, 2));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-flow-os",
-  "version": "0.0.1-dev.1771614697",
+  "version": "0.0.1-dev.1771615015",
   "type": "module",
   "bin": {
     "create-flow-os": "./index.ts"

package/packages/core/client/routes/index.tsx

@@ -0,0 +1,47 @@
+import { state } from '@flow-os/core';
+
+export default function Home() {
+  const [count, setCount] = state(0);
+
+  return (
+    <div styleFlow='flex'>
+      <h1 class="text-2xl bg-[#b57070]  font-bold text-primary">Flow</h1>
+      <p>
+        <a href="/about">Vai ad About</a>
+      </p>
+      <p>
+        Contatore: <span>{count}</span>
+      </p>
+      <p
+        class="transition-all text-2vw"
+        classFlow={{
+          text: [count, 'px'],
+
+        }}
+      >
+        Dimensione reattiva (cresce con il contatore)
+      </p>
+      <button type="button" onClick={() => setCount(count() + 1)}>
+        +1
+      </button>
+      <div
+        styleFlow={[
+          "rounded font-sans font-bold transition-all-300",
+          {
+            base: "border border-#720000 ",
+            p: 4,
+            color:"#816e29",
+            mb: () => count() * 2,
+            mob: { p: 2 },
+            tab: { p: 4 },
+            des: { p: 6 },
+            hover: { bg: "primary", scale: 1.02 },
+            active: { scale: 0.98 },
+          },
+        ]}
+      >
+        styleFlow: base + responsive (mob/tab/des) + hover/active
+      </div>
+    </div>
+  );
+}

package/packages/router/client/root.tsx

@@ -0,0 +1,16 @@
+import './root.css';
+import { App } from '@flow-os/router';
+import { state } from '@flow-os/core';
+
+export const fallback = undefined;
+
+export default function Root() {
+  return (
+    <>
+      <nav>
+        <a href="/">Home</a> | <a href="/about">About</a>
+      </nav>
+      <App />
+    </>
+  );
+}

package/profiles/client/client/routes/about.tsx

@@ -1,4 +1,4 @@
-import { state, effect } from '@flow-os';
+import { state, effect } from '@flow-os/core';
 
 export default function About() {
   const [count, setCount] = state(0);

package/profiles/client/client/routes/index.tsx

@@ -1,5 +1,5 @@
 // @flow-package: core
-import { state } from '@flow-os';
+import { state } from '@flow-os/core';
 
 export default function Home() {
   const [count, setCount] = state(0);

package/profiles/client/package.json

@@ -1,8 +1,7 @@
 {
-  "name": "flow-framework",
+  "name": "placeholder",
   "version": "0.0.0",
   "private": true,
-  "workspaces": ["packages/*"],
   "type": "module",
   "scripts": {
     "dev": "bunx --bun vite --config flow.config.ts",
@@ -14,19 +13,16 @@
     "fmt:check": "oxfmt --check"
   },
   "dependencies": {
-    "@flow-os/client": "workspace:*",
-    "@flow-os/server": "workspace:*",
-    "@flow-os": "workspace:*",
-    "@flow-os/router": "workspace:*",
-    "@flow-os/style": "workspace:*"
+    "@flow-os/client": "file:./packages/client",
+    "@flow-os/server": "^0.0.1",
+    "@flow-os/core": "file:./packages/flow-os",
+    "@flow-os/router": "file:./packages/router",
+    "@flow-os/style": "file:./packages/style"
   },
   "devDependencies": {
     "bun-types": "~1.2.0",
-    "oxfmt": "^0.33.0",
-    "oxlint": "^0.15.0",
     "typescript": "~5.7.0",
-    "vite": "^7.3.1",
-    "vite-plugin-oxlint": "^1.6.0"
+    "vite": "^7.3.1"
   },
   "packageManager": "bun@1.3.9"
-}
+}

package/profiles/client/packages/client/dom.ts

@@ -2,4 +2,4 @@
  * Re-export degli helper DOM da @flow-os (normalizeChild, setContent).
  * Usato dal runtime client e da chi importa da @flow-os/client.
  */
-export { normalizeChild, setContent } from '@flow-os';
+export { normalizeChild, setContent } from '@flow-os/core';

package/profiles/client/packages/client/features/attrs.ts

@@ -1,4 +1,4 @@
-import { effect } from '@flow-os';
+import { effect } from '@flow-os/core';
 import { isGetter } from './utils.js';
 
 /** Props gestite altrove (non passare qui). */

package/profiles/client/packages/client/features/class-flow.ts

@@ -1,4 +1,4 @@
-import { effect } from '@flow-os';
+import { effect } from '@flow-os/core';
 import { isGetter } from './utils.js';
 
 export function toStyleValue(v: unknown): string {

package/profiles/client/packages/client/features/style-flow.ts

@@ -1,4 +1,4 @@
-import { effect } from '@flow-os';
+import { effect } from '@flow-os/core';
 import { isGetter } from './utils.js';
 import {
   VIEWPORT_KEYS,

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

@@ -1,4 +1,4 @@
-import { effect } from '@flow-os';
+import { effect } from '@flow-os/core';
 import { isGetter } from './utils.js';
 import { setStyleProp, toStyleValue } from './class-flow.js';
 

package/profiles/client/packages/client/features/viewport.ts

@@ -1,4 +1,4 @@
-import { state } from '@flow-os';
+import { state } from '@flow-os/core';
 import type { ViewportKey } from '@flow-os/style';
 import { getViewportKeyFromWidth } from '@flow-os/style';
 

package/profiles/client/packages/client/jsx.ts

@@ -1,5 +1,5 @@
 /// <reference path="./jsx-types.d.ts" />
-import { effect } from '@flow-os';
+import { effect } from '@flow-os/core';
 import { isGetter } from './features/utils.js';
 import {
   applyClassFlow,

package/profiles/client/packages/client/package.json

@@ -5,7 +5,7 @@
   "main": "./index.ts",
   "types": "./index.ts",
   "dependencies": {
-    "@flow-os": "workspace:*",
+    "@flow-os/core": "workspace:*",
     "@flow-os/router": "workspace:*",
     "@flow-os/style": "workspace:*"
   },

package/profiles/client/packages/flow-os/dom.ts

@@ -0,0 +1,43 @@
+/**
+ * Helper DOM per Show/For: normalizza children (getter, string, Node, array) e setContent.
+ */
+import { effect } from './state.js';
+
+function isGetter(fn: unknown): fn is () => unknown {
+  return typeof fn === 'function' && fn.length === 0;
+}
+
+export function normalizeChild(c: unknown): Node | string | null {
+  if (c == null) return null;
+  if (typeof c === 'string' || typeof c === 'number') return String(c);
+  if (c instanceof Node) return c;
+  if (isGetter(c)) {
+    const text = document.createTextNode('');
+    effect(() => {
+      text.textContent = String(c());
+    });
+    return text;
+  }
+  if (Array.isArray(c)) {
+    const frag = document.createDocumentFragment();
+    for (const x of c) {
+      const n = normalizeChild(x);
+      if (n !== null) frag.appendChild(typeof n === 'string' ? document.createTextNode(n) : n);
+    }
+    return frag;
+  }
+  return null;
+}
+
+export function setContent(el: HTMLElement, c: unknown): void {
+  const n = normalizeChild(c);
+  if (n === null) {
+    el.replaceChildren();
+    return;
+  }
+  if (typeof n === 'string') {
+    el.replaceChildren(document.createTextNode(n));
+    return;
+  }
+  el.replaceChildren(n);
+}

package/profiles/client/packages/flow-os/for.ts

@@ -0,0 +1,42 @@
+/**
+ * For: lista reattiva. each={() => T[]}, children (item, index) => content.
+ * Opzionale key (item, index) => string|number per reconciliation keyed.
+ */
+import { effect } from './state.js';
+import { normalizeChild } from './dom.js';
+
+function isGetter(fn: unknown): fn is () => unknown {
+  return typeof fn === 'function' && fn.length === 0;
+}
+
+function appendNormalized(parent: Node, c: unknown): void {
+  const n = normalizeChild(c);
+  if (n === null) return;
+  parent.appendChild(typeof n === 'string' ? document.createTextNode(n) : n);
+}
+
+/** For: rende una lista reattiva. each=getter array, children=(item, index)=>content, fallback=vuoto. */
+export function For<T>(props: {
+  each: (() => T[]) | T[];
+  fallback?: unknown;
+  children: (item: T, index: number) => unknown;
+}): HTMLElement {
+  const container = document.createElement('span');
+  container.style.display = 'contents';
+  const getList = isGetter(props.each) ? props.each : () => props.each as T[];
+  effect(() => {
+    const list = getList();
+    const len = Array.isArray(list) ? list.length : 0;
+    if (len === 0) {
+      appendNormalized(container, props.fallback);
+      return;
+    }
+    container.replaceChildren();
+    for (let i = 0; i < len; i++) {
+      const item = list[i];
+      if (item === undefined) continue;
+      appendNormalized(container, props.children(item, i));
+    }
+  });
+  return container;
+}

package/profiles/client/packages/flow-os/index.ts

@@ -0,0 +1,5 @@
+export { state, effect } from './state.js';
+export { onMount, onCleanup } from './lifecycle.js';
+export { Show, Switch, Match } from './show-switch.js';
+export { For } from './for.js';
+export { normalizeChild, setContent } from './dom.js';

package/profiles/client/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/client/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/client/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/client/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/client/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/client/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/client/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/client/packages/style/extension/.vscodeignore

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

package/profiles/client/packages/style/extension/README.md

@@ -0,0 +1,7 @@
+# Flow Style — Color Picker
+
+- **Pallino** (cerchio) prima di ogni colore `#hex` o `rgb(...)`.
+- **Quadratino** dell’editor sul colore: **click** → picker nativo inline.
+- Alternativa: **Ctrl+Shift+C** con cursore sul colore → input hex/rgb.
+
+Installazione: Install from VSIX → `flow-style-colors-0.0.1.vsix`.