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

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

@@ -1,174 +1,20 @@
-export const APP_ID = 'flow-app';
+// ========== Core ==========
+// App = root component (one <App /> in layout). run = call once in entry: run(App, import.meta.glob('./routes/**/*.tsx'))
+export { App, run } from './router.js';
 
-/** 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;
-}
+// ========== Utilities ==========
+export { go, params } from './router.js';
+export { base, path, href, query, setQuery } from './utils.js';
+/*
+base() => 'https://localhost:5173'
 
-export type RouteModule = {
-  default: (() => Node) | ((params: Record<string, string>) => Node) | (() => string) | string;
-};
+path() => '/posts/123'
 
-export type RunOptions = {
-  /** Nodo (o factory) mostrato mentre la route lazy viene caricata. */
-  fallback?: Node | (() => Node);
-  /** Pagina 404: se fornita, viene mostrata full-page (sostituisce tutto #app, senza layout comune). */
-  notFound?: Node | ((path: string) => Node);
-};
+href() => 'https://localhost:5173/posts/123'
 
-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('/');
-}
+params() => ['posts', '123']
 
-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;
-}
+query() => URLSearchParams { page: '2' }
 
-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;
-}
-
-type RouterOptions = {
-  fallback?: Node | (() => Node);
-  notFound?: Node | ((path: string) => Node);
-  /** Per 404 full-page: elemento #app e factory del layout da ripristinare quando si naviga via. */
-  appRoot?: HTMLElement;
-  getLayout?: () => Node;
-};
-
-export function createRouter(
-  modules: Record<string, () => Promise<RouteModule>>,
-  container: HTMLElement,
-  options: RouterOptions = {}
-) {
-  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;
-  const fullPageNotFound = Boolean(options.appRoot && options.getLayout && options.notFound);
-
-  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 params = match(pattern, path);
-      if (params === null) continue;
-      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)(params)
-          : (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;
-    }
-    const nfNode = typeof notFound === 'function' ? notFound(pathname) : notFound;
-    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')!);
-      }
-    });
-  }
-
-  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.`
-    );
-  const routerOptions: RouterOptions = {
-    fallback: options?.fallback,
-    notFound: options?.notFound,
-  };
-  if (options?.notFound != null) {
-    routerOptions.appRoot = app;
-    routerOptions.getLayout = () => App();
-  }
-  createRouter(modules, appContainer as HTMLElement, routerOptions).start();
-}
+setQuery({ page: '2' }) => 'https://localhost:5173/posts/123?page=2'
+*/

package/profiles/client/packages/router/matcher.ts

@@ -0,0 +1,105 @@
+import type { RouteEntry } from './types.js';
+
+const CATCH_ALL_PREFIX = ':*';
+
+/**
+ * Converts a file-path key (e.g. from import.meta.glob) to a route pattern.
+ * - `routes/index.ts` → ''
+ * - `routes/about.ts` → 'about'
+ * - `routes/posts/[id].ts` → 'posts/:id'
+ * - `routes/docs/[...slug].ts` → 'docs/:*slug'
+ */
+export function pathToPattern(key: string): string {
+  const afterRoutes = key.replace(/^.*[/\\]routes[/\\]?/i, '').replace(/\.tsx?$/i, '');
+  const segments = afterRoutes.split(/[/\\]/).filter(Boolean);
+  if (segments.length === 0 || segments[0] === 'index') return '';
+
+  const patternParts = segments.map((seg) => {
+    if (seg.startsWith('[...') && seg.endsWith(']')) {
+      const name = seg.slice(4, -1);
+      return name ? `${CATCH_ALL_PREFIX}${name}` : `${CATCH_ALL_PREFIX}rest`;
+    }
+    if (seg.startsWith('[') && seg.endsWith(']')) {
+      return ':' + seg.slice(1, -1);
+    }
+    return seg;
+  });
+
+  return patternParts.join('/');
+}
+
+/**
+ * Returns true if the pattern string contains a catch-all segment.
+ */
+export function isCatchAllPattern(pattern: string): boolean {
+  return pattern.includes(CATCH_ALL_PREFIX);
+}
+
+/**
+ * Counts static (non-param) segments for route sort order.
+ */
+export function countStaticSegments(pattern: string): number {
+  if (!pattern) return 0;
+  return pattern.split('/').filter((s) => s && !s.startsWith(':') && !s.startsWith(CATCH_ALL_PREFIX)).length;
+}
+
+/**
+ * Matches a path against a pattern. Supports :param and :*catchAll.
+ * - :param matches one segment.
+ * - :*name matches the rest of the path (one param with path segments joined by '/').
+ * Returns params object or null if no match.
+ */
+export function match(pattern: string, path: string): Record<string, string> | null {
+  const patternSegs = pattern ? pattern.split('/').filter(Boolean) : [];
+  const pathSegs = path.replace(/^\//, '').split('/').filter(Boolean);
+
+  const params: Record<string, string> = {};
+  let pi = 0;
+
+  for (let i = 0; i < patternSegs.length; i++) {
+    const seg = patternSegs[i]!;
+    if (seg.startsWith(CATCH_ALL_PREFIX)) {
+      const name = seg.slice(CATCH_ALL_PREFIX.length) || 'rest';
+      params[name] = pathSegs.slice(pi).join('/');
+      return params;
+    }
+    if (pi >= pathSegs.length) return null;
+    if (seg.startsWith(':')) {
+      params[seg.slice(1)] = pathSegs[pi] ?? '';
+      pi++;
+      continue;
+    }
+    if (seg !== pathSegs[pi]) return null;
+    pi++;
+  }
+
+  return pi === pathSegs.length ? params : null;
+}
+
+/**
+ * Builds sorted route entries: more specific first (static > dynamic > catch-all),
+ * then by segment count descending.
+ */
+export function buildRouteEntries(
+  modules: Record<string, () => Promise<import('./types.js').RouteModule>>
+): RouteEntry[] {
+  const entries: RouteEntry[] = Object.entries(modules).map(([key, loader]) => {
+    const pattern = pathToPattern(key);
+    return {
+      pattern,
+      loader,
+      staticSegments: countStaticSegments(pattern),
+      catchAll: isCatchAllPattern(pattern),
+    };
+  });
+
+  entries.sort((a, b) => {
+    if (a.catchAll !== b.catchAll) return a.catchAll ? 1 : -1;
+    if (a.staticSegments !== b.staticSegments) return b.staticSegments - a.staticSegments;
+    const lenA = a.pattern.split('/').filter(Boolean).length;
+    const lenB = b.pattern.split('/').filter(Boolean).length;
+    return lenB - lenA;
+  });
+
+  return entries;
+}

package/profiles/client/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/client/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/client/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/client/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/client/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"
     }
   }
-}
+}