@voltro/web 0.1.0

package/dist/index.js

@@ -0,0 +1,141 @@
+import { AppClientsContext as e, useAppClient as t } from "./hooks.js";
+import { a as n, c as r, i, l as a, o, r as s, s as c, u as l } from "./frameworkBoot-DBOFujAI.js";
+import { a as u, c as d, i as f, l as p, o as m, s as h } from "./defaultFallbacks-Bg_X-9Wv.js";
+import { i as g, n as _, r as ee, t as te } from "./mount-BuFzlw1e.js";
+import { A as ne, B as re, C as ie, D as v, E as y, F as b, I as x, L as S, M as C, N as w, O as T, P as E, R as D, S as O, T as k, V as A, _ as j, a as M, b as N, c as P, d as F, f as I, g as L, h as R, i as z, j as B, k as V, l as ae, m as H, n as U, o as W, p as G, r as K, s as q, t as J, u as oe, v as se, w as ce, x as le, y as ue, z as de } from "./serverContext-D5-Dmh8d.js";
+import { createContext as fe, createElement as Y, useContext as pe } from "react";
+export * from "@voltro/client";
+export * from "@voltro/ui";
+//#region src/image.tsx
+var X = ({ src: e }) => e, Z = fe({ loader: X }), me = ({ loader: e, children: t }) => Y(Z.Provider, { value: { loader: e } }, t), Q = [
+	640,
+	750,
+	828,
+	1080,
+	1200,
+	1920,
+	2048,
+	3840
+], he = (e, t, n, r) => {
+	let i = n !== void 0 && !r ? Array.from(new Set(Q.filter((e) => e <= n * 2).concat(n))).sort((e, t) => e - t) : [...Q];
+	return {
+		srcSet: i.map((n) => `${e({
+			src: t,
+			width: n
+		})} ${n}w`).join(", "),
+		fallback: e({
+			src: t,
+			width: i[i.length - 1]
+		})
+	};
+}, ge = ({ src: e, alt: t, width: n, height: r, fill: i = !1, sizes: a, priority: o = !1, loader: s, placeholder: c = "empty", blurDataURL: l, style: u, ...d }) => {
+	let f = pe(Z).loader, p = s ?? f;
+	!i && (n === void 0 || r === void 0) && typeof console < "u" && console.warn(`<Image src="${e}"> needs both width and height (or fill) to reserve layout space and avoid CLS.`);
+	let { srcSet: m, fallback: h } = he(p, e, n, i), g = c === "blur" && l ? {
+		backgroundImage: `url(${l})`,
+		backgroundSize: "cover",
+		backgroundPosition: "center"
+	} : {}, _ = i ? {
+		position: "absolute",
+		inset: 0,
+		height: "100%",
+		width: "100%",
+		objectFit: "cover"
+	} : {};
+	return Y("img", {
+		src: h,
+		srcSet: m,
+		sizes: a ?? (i ? "100vw" : void 0),
+		alt: t,
+		...i ? {} : {
+			width: n,
+			height: r
+		},
+		loading: o ? "eager" : "lazy",
+		decoding: "async",
+		...o ? { fetchPriority: "high" } : {},
+		style: {
+			...g,
+			..._,
+			...u
+		},
+		...d
+	});
+}, $ = ({ to: e, children: t, className: n }) => Y("a", {
+	href: e,
+	className: n
+}, t), _e = {
+	position: "sticky",
+	top: 0,
+	zIndex: 10,
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between",
+	gap: "1.5rem",
+	padding: "1rem 1.5rem",
+	borderBottom: "1px solid var(--voltro-blog-border, rgba(127,127,127,0.2))",
+	backdropFilter: "blur(8px)"
+}, ve = {
+	maxWidth: "48rem",
+	margin: "0 auto",
+	padding: "2rem 1.5rem",
+	width: "100%"
+}, ye = (e) => {
+	let { brand: t, topNav: n, children: r, pathname: i, footer: a, breadcrumbs: o, headerRight: s } = e, c = e.Link ?? $, l = Y("nav", {
+		className: "voltro-blog-nav",
+		style: {
+			display: "flex",
+			gap: "1rem",
+			alignItems: "center"
+		}
+	}, ...n.map((e) => {
+		let t = i === e.href;
+		return Y(c, {
+			key: e.href,
+			to: e.href,
+			className: t ? "voltro-blog-nav-link is-active" : "voltro-blog-nav-link",
+			children: e.label
+		});
+	})), u = Y("header", {
+		className: "voltro-blog-header",
+		style: _e
+	}, Y("div", { className: "voltro-blog-brand" }, t), s ? Y("div", { style: {
+		display: "flex",
+		gap: "1rem",
+		alignItems: "center"
+	} }, l, s) : l), d = o && o.length > 0 ? Y("nav", {
+		className: "voltro-blog-breadcrumbs",
+		"aria-label": "Breadcrumb",
+		style: {
+			fontSize: "0.85rem",
+			opacity: .75,
+			marginBottom: "1rem",
+			display: "flex",
+			gap: "0.5rem"
+		}
+	}, ...o.flatMap((e, t) => {
+		let n = t === o.length - 1, r = e.href && !n ? Y(c, {
+			key: `c${t}`,
+			to: e.href,
+			children: e.label
+		}) : Y("span", {
+			key: `c${t}`,
+			"aria-current": n ? "page" : void 0
+		}, e.label);
+		return n ? [r] : [r, Y("span", { key: `s${t}` }, "/")];
+	})) : null;
+	return Y("div", { className: "voltro-blog-layout" }, u, Y("main", {
+		className: "voltro-blog-main",
+		style: ve
+	}, d, r), a ? Y("footer", {
+		className: "voltro-blog-footer",
+		style: {
+			maxWidth: "48rem",
+			margin: "0 auto",
+			padding: "2rem 1.5rem",
+			borderTop: "1px solid var(--voltro-blog-border, rgba(127,127,127,0.2))"
+		}
+	}, a) : null);
+}, be = "framework-web";
+//#endregion
+export { e as AppClientsContext, ye as BlogLayout, f as FallbackStringsProvider, ge as Image, me as ImageConfigProvider, W as Link, q as LoaderCache, P as LoaderDataContext, r as NavigationIndicator, w as NotFoundError, ae as PlainLink, a as ReconnectContext, E as RedirectError, oe as Router, F as RouterContext, J as ServerRequestContext, U as ServerRequestProvider, be as WEB_NAME, I as compileRoute, u as defaultFallbackStrings, G as externalUrl, H as findNotFound, s as formatPrintf, _ as getIslandComponent, de as getRouteSnapshot, h as getStatuses, ee as hydrateIslandsOnPage, i as installBrowserConsoleBridge, n as installServerLogRelay, b as isNotFound, x as isRedirect, g as island, R as lazyPageRoute, L as loaderCacheKey, j as matchRoute, te as mount, S as notFound, se as pageRoute, K as parseCookieHeader, X as passthroughImageLoader, ue as preloadRouteModule, d as pushStatus, D as redirect, o as registerClientTrace, N as resolveAnchorNavigation, le as resolveMeta, O as segmentLoaderKey, re as setRouteSnapshot, ie as sortRoutesByPriority, A as subscribeRouteSnapshot, p as subscribeStatuses, c as subscribeTraceErrors, t as useAppClient, ce as useBlocker, m as useFallbackStrings, k as useLoaderData, y as useLocation, v as useNavigate, T as useParams, V as usePrefetch, l as useReconnect, z as useSearchParams, M as useServerRequest, ne as useSetSearchParams, B as withHash, C as withQuery };

package/dist/mount-BuFzlw1e.js

@@ -0,0 +1,74 @@
+import { t as e } from "./frameworkBoot-DBOFujAI.js";
+import { StrictMode as t, createElement as n } from "react";
+import { createRoot as r, hydrateRoot as i } from "react-dom/client";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/islands.tsx
+var o = /* @__PURE__ */ new Map(), s = (e, t) => {
+	o.set(t.name, e);
+	let r = t.hydrate ?? "visible", i = (i) => n("div", {
+		"data-voltro-island": "",
+		"data-island-name": t.name,
+		"data-island-hydrate": r,
+		"data-island-props": l(i)
+	}, n(e, i));
+	return i.displayName = `Island(${t.name})`, i;
+}, c = (e) => o.get(e), l = (e) => JSON.stringify(e ?? {}).replace(/</g, "\\u003c"), u = (e) => {
+	if (!e) return {};
+	try {
+		return JSON.parse(e);
+	} catch {
+		return {};
+	}
+}, d = () => {
+	let e = document.querySelectorAll("[data-voltro-island]:not([data-voltro-hydrated])");
+	for (let t of e) {
+		let e = t.dataset.islandName ?? "", r = o.get(e);
+		if (!r) {
+			console.warn(`[voltro] island "${e}" referenced in DOM but not registered. Did the island file get imported in this bundle?`);
+			continue;
+		}
+		let a = u(t.dataset.islandProps ?? null), s = t.dataset.islandHydrate ?? "visible";
+		t.setAttribute("data-voltro-hydrated", "pending");
+		let c = () => {
+			t.getAttribute("data-voltro-hydrated") !== "done" && (t.setAttribute("data-voltro-hydrated", "done"), i(t, n(r, a)));
+		};
+		if (s === "load") c();
+		else if (s === "idle") {
+			let e = globalThis.requestIdleCallback;
+			e ? e(c) : setTimeout(c, 0);
+		} else if (s === "visible") {
+			let e = new IntersectionObserver((t) => {
+				t.some((e) => e.isIntersecting) && (e.disconnect(), c());
+			}, { rootMargin: "64px" });
+			e.observe(t);
+		} else if (s === "interaction") {
+			let e = () => {
+				t.removeEventListener("pointerdown", e), t.removeEventListener("keydown", e), c();
+			};
+			t.addEventListener("pointerdown", e, { passive: !0 }), t.addEventListener("keydown", e);
+		}
+	}
+}, f = (e) => `${window.location.protocol === "https:" ? "wss:" : "ws:"}//${window.location.host}/ws/${e}`, p = (n, o) => {
+	let s = document.getElementById(o.rootId ?? "root");
+	if (!s) throw Error(`@voltro/web: no #${o.rootId ?? "root"} element in the document`);
+	let c = Object.entries(o.apis).map(([e, t]) => ({
+		name: e,
+		group: t.group,
+		descriptors: t.descriptors ?? {},
+		wsUrl: t.wsUrl ?? f(e),
+		headers: t.headers
+	})), l = document.getElementById("__voltro_state__") !== null && s.children.length > 0, u = document.querySelector("meta[name=\"voltro-interactive\"]")?.getAttribute("content") ?? "full";
+	if (u === "none") return;
+	if (u === "islands") {
+		d();
+		return;
+	}
+	let p = /* @__PURE__ */ a(t, { children: /* @__PURE__ */ a(e, {
+		App: n,
+		apis: c,
+		...o.Devtools ? { Devtools: o.Devtools } : {}
+	}) });
+	l ? i(s, p) : r(s).render(p);
+};
+//#endregion
+export { s as i, c as n, d as r, p as t };

package/dist/mount.d.ts

@@ -0,0 +1,70 @@
+import { ComponentType } from 'react';
+import { Rpc } from '@effect/rpc';
+import { RpcGroup } from '@effect/rpc';
+
+/**
+ * Boot the framework's React stack against the given app. Resolves the
+ * typed rpc client for each api in parallel, renders the user's component
+ * tree inside the framework runtime + clients providers, and in dev mode
+ * auto-recovers each client in-place when its dev server restarts.
+ */
+export declare const mount: (App: ComponentType, options: MountOptions) => void;
+
+export declare interface MountApiSpec<Rpcs extends Rpc.Any = Rpc.Any> {
+    /** The RpcGroup this api speaks. */
+    readonly group: RpcGroup.RpcGroup<Rpcs>;
+    /** Per-rpc-tag descriptor metadata: `{ kind, source?, targets? }`. The
+     *  framework's auto-optimistic flow reads this to know which mutation
+     *  affects which cached query. The CLI's codegen emits it as
+     *  `appDescriptors` next to `appGroup`. */
+    readonly descriptors?: Readonly<Record<string, {
+        readonly kind: 'query' | 'mutation' | 'action' | 'stream' | 'workflow';
+        readonly source?: string;
+        readonly targets?: ReadonlyArray<{
+            readonly table: string;
+            readonly op: 'insert' | 'update' | 'delete';
+            readonly order?: 'prepend' | 'append';
+        }>;
+    }>>;
+    /** Explicit WebSocket URL for this api. Required for external apis
+     *  (where there's no Vite proxy). Defaults to same-origin `/ws/<name>`
+     *  for workspace apis served via the framework's dev proxy. */
+    readonly wsUrl?: string;
+    /** Auth headers sent with EVERY rpc request over the socket — this is how
+     *  a cross-origin api authenticates WS subscriptions. They ride in the
+     *  @effect/rpc message frame, NOT the WS handshake (a browser can't set
+     *  upgrade headers). Pass a thunk to fetch a rotating token fresh on every
+     *  (re)connect, e.g. `headers: async () => ({ authorization: 'Bearer ' +
+     *  (await supabase.auth.getSession()).data.session?.access_token })`; a
+     *  static object is also accepted. Do NOT hardcode a secret literal — it
+     *  ships to the client and is visible in source; resolve it at runtime. */
+    readonly headers?: ResolvableHeaders;
+}
+
+export declare interface MountOptions {
+    /** Map of api name → spec. The name is the lookup key for hooks
+     *  (`useAppClient<T>(name)`, `useSubscription(name, ...)`, etc.). */
+    readonly apis: Record<string, MountApiSpec>;
+    /** Override the root element id. Defaults to 'root'. */
+    readonly rootId?: string;
+    /** Optional in-page devtools overlay component. Wired up by the
+     *  CLI's generated `main.tsx` when `import.meta.env.DEV` is truthy
+     *  and the app hasn't set `disableDevtools` in app.config.ts.
+     *  Renders INSIDE the FrameworkBoot tree so its hooks
+     *  (useFrameworkRuntimes, useLoaderData, …) resolve normally.
+     *  PascalCase because it is a React component reference rendered
+     *  as <Devtools/>. */
+    readonly Devtools?: ComponentType;
+}
+
+/**
+ * Auth headers for an api's WS rpc client. @effect/rpc sends these in the
+ * per-request MESSAGE frame (NOT the WS upgrade — a browser can't set upgrade
+ * headers), so the server's AuthMiddleware sees them on every call; this is
+ * what lets a cross-origin api authenticate WS subscriptions. A thunk is
+ * resolved fresh on every (re)connect, so a rotating token (e.g. a Supabase
+ * access token) is pulled anew per connect instead of freezing at first mount.
+ */
+declare type ResolvableHeaders = Record<string, string> | (() => Record<string, string> | Promise<Record<string, string>>);
+
+export { }

package/dist/mount.js

@@ -0,0 +1,2 @@
+import { t as e } from "./mount-BuFzlw1e.js";
+export { e as mount };