create-flow-os 0.0.1-dev.1771785969 → 0.0.1-dev.1771840262

package/profiles/server/packages/router/router.ts

@@ -0,0 +1,185 @@
+import type { RouteModule, RouterOptions, RunOptions } from './types.js';
+import { buildRouteEntries } from './matcher.js';
+import { match } from './matcher.js';
+
+let currentRouter: RouterAPI | null = null;
+let currentParams: Record<string, string> = {};
+
+export const APP_ID = 'flow-app';
+
+/** Root container where the router mounts the current page. Use once in root as <App />. */
+export function App(): HTMLDivElement {
+  const el = document.createElement('div');
+  el.id = APP_ID;
+  el.setAttribute('role', 'main');
+  return el;
+}
+
+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 = `Page not found: ${path || '/'}`;
+  wrap.append(h, p);
+  return wrap;
+}
+
+export interface RouterAPI {
+  /** Navigate to a path. Use replace=true to avoid adding a history entry. */
+  go(path: string, replace?: boolean): void;
+  /** Start listening to popstate and link clicks. Call once after mounting App. */
+  start(): void;
+}
+
+const NOT_FOUND_PATTERN = '404';
+
+export function createRouter(
+  modules: Record<string, () => Promise<RouteModule>>,
+  container: HTMLElement,
+  options: RouterOptions = {}
+): RouterAPI {
+  const allEntries = buildRouteEntries(modules);
+  const routes = allEntries.filter((e) => e.pattern !== NOT_FOUND_PATTERN);
+  const notFoundLoader = allEntries.find((e) => e.pattern === NOT_FOUND_PATTERN)?.loader ?? null;
+
+  const notFound: Node | ((path: string) => Node | Promise<Node>) =
+    options.notFound ??
+    (notFoundLoader
+      ? (path) =>
+          notFoundLoader().then((mod) => {
+            const def = mod.default;
+            return typeof def === 'function' ? (def as (p: string) => Node)(path) : (def as unknown as Node);
+          })
+      : defaultNotFound);
+  const fullPageNotFound = Boolean(
+    options.appRoot && options.getLayout && (options.notFound != null || notFoundLoader != null)
+  );
+
+  function getContainer(): HTMLElement | null {
+    return document.getElementById(APP_ID);
+  }
+
+  async function render(pathname: string): Promise<boolean> {
+    const path = pathname === '/' ? '' : pathname.slice(1);
+
+    for (const { pattern, loader } of routes) {
+      const routeParams = match(pattern, path);
+      if (routeParams === null) continue;
+
+      currentParams = routeParams;
+      let target = getContainer();
+      if (fullPageNotFound && !target) {
+        options.appRoot!.innerHTML = '';
+        options.appRoot!.appendChild(options.getLayout!());
+        target = getContainer();
+      }
+      if (!target) continue;
+
+      const fallbackNode =
+        options.fallback != null
+          ? typeof options.fallback === 'function'
+            ? options.fallback()
+            : options.fallback
+          : null;
+      if (fallbackNode) setContent(target, fallbackNode);
+
+      const mod = await loader();
+      const def = mod.default;
+      if (typeof def === 'function') {
+        const out = def.length
+          ? (def as (p: Record<string, string>) => Node)(routeParams)
+          : (def as () => Node | string)();
+        if (out instanceof Node) setContent(target, out);
+        else if (typeof out === 'string') target.innerHTML = out;
+        else target.innerHTML = '';
+      } else {
+        setContent(target, typeof def === 'string' ? def : (def as unknown as Node));
+      }
+      return true;
+    }
+
+    currentParams = {};
+    const nfRaw = typeof notFound === 'function' ? notFound(pathname) : notFound;
+    const nfNode = nfRaw && typeof (nfRaw as Promise<unknown>).then === 'function' ? await (nfRaw as Promise<Node>) : (nfRaw as Node);
+    if (fullPageNotFound) {
+      options.appRoot!.innerHTML = '';
+      options.appRoot!.appendChild(nfNode);
+    } else {
+      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')!);
+      }
+    });
+  }
+
+  const api: RouterAPI = { go, start };
+  currentRouter = api;
+  return api;
+}
+
+/**
+ * Navigate to a path. Import and use anywhere; works after run() (or createRouter().start()) has been called.
+ * No-op if the router is not started yet.
+ */
+export function go(path: string, replace = false): void {
+  currentRouter?.go(path, replace);
+}
+
+/** Current route params. params() → all, params('id') → one. */
+export function params(): Record<string, string>;
+export function params(name: string): string | undefined;
+export function params(name?: string): Record<string, string> | string | undefined {
+  if (name === undefined) return { ...currentParams };
+  return currentParams[name] ?? undefined;
+}
+
+/**
+ * Mounts App and starts the router. Use in your virtual entry.
+ * Returns the router API so you can call go() (and start()) from outside.
+ */
+export function run(
+  AppFactory: () => Node,
+  modules: Record<string, () => Promise<RouteModule>>,
+  options?: RunOptions
+): RouterAPI {
+  const app = document.getElementById('app')!;
+  app.appendChild(AppFactory());
+  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.`);
+  }
+  const routerOptions: RouterOptions = {
+    fallback: options?.fallback,
+    notFound: options?.notFound,
+    appRoot: app,
+    getLayout: () => AppFactory(),
+  };
+  const api = createRouter(modules, appContainer as HTMLElement, routerOptions);
+  api.start();
+  return api;
+}

package/profiles/server/packages/router/types.ts

@@ -0,0 +1,34 @@
+/** Route module: default can be a component (with optional params), a factory, or raw string/Node. */
+export type RouteModule = {
+  default:
+    | (() => Node)
+    | ((params: Record<string, string>) => Node)
+    | (() => string)
+    | string;
+};
+
+/** Options for run(): fallback while loading, custom 404. */
+export type RunOptions = {
+  /** Node (or factory) shown while the lazy route is loading. */
+  fallback?: Node | (() => Node);
+  /** 404 page: if provided, shown full-page (replaces entire #app, no shared layout). */
+  notFound?: Node | ((path: string) => Node);
+};
+
+/** Internal router options (fallback, notFound, full-page 404 wiring). */
+export type RouterOptions = {
+  fallback?: Node | (() => Node);
+  notFound?: Node | ((path: string) => Node | Promise<Node>);
+  appRoot?: HTMLElement;
+  getLayout?: () => Node;
+};
+
+/** Internal: normalized route entry for matching. */
+export type RouteEntry = {
+  pattern: string;
+  loader: () => Promise<RouteModule>;
+  /** Number of static segments (for sort order). */
+  staticSegments: number;
+  /** True if pattern ends with catch-all. */
+  catchAll: boolean;
+};

package/profiles/server/packages/router/utils.ts

@@ -0,0 +1,45 @@
+/** Origin: protocol + host (e.g. https://localhost:5173 or https://example.com). */
+export function base(): string {
+  return typeof location !== 'undefined' ? location.origin : '';
+}
+
+/** Current pathname (e.g. /posts/123). */
+export function path(p?: string): string {
+  const raw = p ?? (typeof location !== 'undefined' ? location.pathname || '/' : '/');
+  return raw.startsWith('/') ? raw : `/${raw}`;
+}
+
+/** Full path + search + hash. No args = current. */
+export function href(p?: string): string {
+  const basePath = path(p);
+  if (typeof location === 'undefined') return basePath;
+  return basePath + (location.search ?? '') + (location.hash ?? '');
+}
+
+/** Query (after ?). query() → all as object, query('key') → one value. */
+export function query(): Record<string, string>;
+export function query(name: string): string | null;
+export function query(name?: string): Record<string, string> | string | null {
+  const s = typeof location !== 'undefined' ? location.search : '';
+  const p = new URLSearchParams(s);
+  if (name !== undefined) return p.get(name);
+  const out: Record<string, string> = {};
+  p.forEach((v, k) => (out[k] = v));
+  return out;
+}
+
+/** New path with query updated. go(setQuery({ page: '2' })) to navigate. */
+export function setQuery(
+  obj: Record<string, string | number | boolean | undefined | null>,
+  p?: string
+): string {
+  const basePath = path(p);
+  const current = query();
+  const next = { ...current };
+  for (const [key, value] of Object.entries(obj)) {
+    if (value === undefined || value === null) delete next[key];
+    else next[key] = String(value);
+  }
+  const search = new URLSearchParams(next).toString();
+  return search ? `${basePath}?${search}` : basePath;
+}

package/profiles/server/packages/style/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/profiles/server/packages/style/package.json

@@ -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/profiles/server/packages/style/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/profiles/server/packages/style/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);
+}