gorsee 0.2.4 → 0.2.6

package/dist-pkg/runtime/devtools.js

@@ -0,0 +1,132 @@
+import { escapeHTML } from "./html-escape.js";
+import { getHydrationDiagnostics } from "./hydration.js";
+import { getRouterNavigationDiagnostics } from "./router.js";
+import {
+  getReactiveTraceArtifact,
+  REACTIVE_TRACE_SCHEMA_VERSION
+} from "../reactive/diagnostics.js";
+export const RUNTIME_DEVTOOLS_SCHEMA_VERSION = 1;
+function sortTopNodes(trace, limit) {
+  return trace.nodes.map((node) => ({
+    id: node.id,
+    kind: node.kind,
+    label: node.label,
+    score: node.reads + node.writes + node.runs + node.invalidations,
+    reads: node.reads,
+    writes: node.writes,
+    runs: node.runs,
+    invalidations: node.invalidations
+  })).sort((left, right) => right.score - left.score || right.runs - left.runs || left.id - right.id).slice(0, Math.max(1, limit));
+}
+function summarizeRoutes(entries) {
+  return {
+    total: entries.length,
+    pages: entries.filter((entry) => !entry.isApi).length,
+    apis: entries.filter((entry) => entry.isApi).length,
+    loaders: entries.filter((entry) => entry.hasLoader).length,
+    middleware: entries.filter((entry) => entry.hasMiddleware).length
+  };
+}
+function summarizeSnapshot(navigation, hydration, topNodes, recentEvents) {
+  return {
+    navigationState: navigation.navigating ? "navigating" : "idle",
+    activeRoute: navigation.activeNavigation?.url ?? navigation.currentPath,
+    hydrationState: hydration.recoverableMismatch ? "recovering" : "stable",
+    mismatchCount: hydration.mismatches,
+    topReactiveNode: topNodes[0]?.label ?? topNodes[0]?.kind ?? null,
+    recentReactiveEventKinds: recentEvents.slice(-5).map((event) => event.kind)
+  };
+}
+export function createRuntimeDevtoolsSnapshot(options = {}) {
+  const trace = getReactiveTraceArtifact(), maxReactiveEvents = Math.max(1, options.maxReactiveEvents ?? 20), topNodes = sortTopNodes(trace, options.maxTopNodes ?? 5), recentEvents = trace.events.slice(-maxReactiveEvents), navigation = getRouterNavigationDiagnostics(), hydration = getHydrationDiagnostics(), routes = options.routes ? {
+    summary: summarizeRoutes(options.routes),
+    entries: [...options.routes]
+  } : void 0;
+  return {
+    schemaVersion: RUNTIME_DEVTOOLS_SCHEMA_VERSION,
+    generatedAt: new Date().toISOString(),
+    reactiveTraceSchemaVersion: REACTIVE_TRACE_SCHEMA_VERSION,
+    navigation,
+    hydration,
+    reactive: {
+      snapshot: trace.snapshot,
+      topNodes,
+      recentEvents,
+      trace: options.includeTrace ? trace : void 0
+    },
+    routes,
+    summary: summarizeSnapshot(navigation, hydration, topNodes, recentEvents)
+  };
+}
+function renderKeyValueGrid(entries) {
+  return `<div class="g-devtools-grid">${entries.map((entry) => `<div class="g-devtools-card"><div class="g-devtools-key">${escapeHTML(entry.key)}</div><div class="g-devtools-value">${escapeHTML(entry.value)}</div></div>`).join("")}</div>`;
+}
+export function renderRuntimeDevtoolsHTML(snapshot) {
+  const routeSummary = snapshot.routes ? renderKeyValueGrid([
+    { key: "Routes", value: String(snapshot.routes.summary.total) },
+    { key: "Pages", value: String(snapshot.routes.summary.pages) },
+    { key: "API", value: String(snapshot.routes.summary.apis) },
+    { key: "Loaders", value: String(snapshot.routes.summary.loaders) },
+    { key: "Middleware", value: String(snapshot.routes.summary.middleware) }
+  ]) : "", topNodes = snapshot.reactive.topNodes.length > 0 ? snapshot.reactive.topNodes.map((node) => `<tr><td>${escapeHTML(node.label ?? `#${node.id}`)}</td><td>${escapeHTML(node.kind)}</td><td>${node.score}</td><td>${node.runs}</td><td>${node.invalidations}</td></tr>`).join("") : '<tr><td colspan="5">No reactive activity captured</td></tr>', recentEvents = snapshot.reactive.recentEvents.length > 0 ? snapshot.reactive.recentEvents.map((event) => `<tr><td>${event.seq}</td><td>${escapeHTML(event.kind)}</td><td>${escapeHTML(event.label ?? "-")}</td><td>${escapeHTML(event.reason ?? event.detail ?? "-")}</td></tr>`).join("") : '<tr><td colspan="4">No reactive events captured</td></tr>', routeRows = snapshot.routes?.entries.length ? snapshot.routes.entries.map((route) => `<tr><td>${escapeHTML(route.path)}</td><td>${escapeHTML(route.methods.join(", ") || "GET")}</td><td>${route.isApi ? "API" : "Page"}</td><td>${route.hasLoader ? "Yes" : "-"}</td><td>${route.hasMiddleware ? "Yes" : "-"}</td></tr>`).join("") : "";
+  return `<div class="g-devtools">
+  <style>
+    .g-devtools{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:linear-gradient(180deg,#0f172a,#111827);color:#e5eefb;padding:24px;border-radius:18px}
+    .g-devtools h1,.g-devtools h2{margin:0 0 12px}
+    .g-devtools p{margin:0 0 12px;color:#b7c3d9}
+    .g-devtools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:12px 0 20px}
+    .g-devtools-card{background:#172033;border:1px solid #30415f;border-radius:12px;padding:12px}
+    .g-devtools-key{font-size:11px;text-transform:uppercase;color:#8ea3c7;margin-bottom:6px}
+    .g-devtools-value{font-size:18px;font-weight:700}
+    .g-devtools-table{width:100%;border-collapse:collapse;margin-top:12px}
+    .g-devtools-table th,.g-devtools-table td{padding:10px;border-bottom:1px solid #24324d;text-align:left;vertical-align:top}
+    .g-devtools-pill{display:inline-block;padding:4px 8px;border-radius:999px;background:#1d4ed833;color:#93c5fd;font-size:12px}
+    .g-devtools-section{margin-top:22px}
+  </style>
+  <h1>Gorsee Runtime Inspector</h1>
+  <p>Path: ${escapeHTML(snapshot.summary.activeRoute || "/")} | Navigation: ${escapeHTML(snapshot.summary.navigationState)} | Hydration: ${escapeHTML(snapshot.summary.hydrationState)}</p>
+  ${renderKeyValueGrid([
+    { key: "Hydration mismatches", value: String(snapshot.hydration.mismatches) },
+    { key: "Signals", value: String(snapshot.reactive.snapshot.signalsCreated) },
+    { key: "Computeds", value: String(snapshot.reactive.snapshot.computedCreated) },
+    { key: "Effects", value: String(snapshot.reactive.snapshot.effectCreated) },
+    { key: "Resources", value: String(snapshot.reactive.snapshot.resourcesCreated) },
+    { key: "Mutations", value: String(snapshot.reactive.snapshot.mutationsCreated) }
+  ])}
+  ${routeSummary}
+  <div class="g-devtools-section">
+    <h2>Top Reactive Nodes</h2>
+    <table class="g-devtools-table">
+      <thead><tr><th>Label</th><th>Kind</th><th>Score</th><th>Runs</th><th>Invalidations</th></tr></thead>
+      <tbody>${topNodes}</tbody>
+    </table>
+  </div>
+  <div class="g-devtools-section">
+    <h2>Recent Reactive Events</h2>
+    <table class="g-devtools-table">
+      <thead><tr><th>#</th><th>Kind</th><th>Label</th><th>Reason</th></tr></thead>
+      <tbody>${recentEvents}</tbody>
+    </table>
+  </div>
+  ${routeRows ? `<div class="g-devtools-section">
+    <h2>Route Tree</h2>
+    <table class="g-devtools-table">
+      <thead><tr><th>Path</th><th>Methods</th><th>Type</th><th>Loader</th><th>Middleware</th></tr></thead>
+      <tbody>${routeRows}</tbody>
+    </table>
+  </div>` : ""}
+</div>`;
+}
+export function renderRuntimeDevtoolsOverlay(snapshot, nonce = "") {
+  return `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8" />
+  <title>Gorsee Runtime Inspector</title>
+</head>
+<body>
+  ${nonce ? `<script nonce="${escapeHTML(nonce)}"></script>` : ""}
+  ${renderRuntimeDevtoolsHTML(snapshot)}
+</body>
+</html>`;
+}

package/dist-pkg/runtime/error-boundary.d.ts

@@ -0,0 +1,6 @@
+import type { GorseeRenderable } from "./renderable.js";
+export interface ErrorBoundaryProps {
+    fallback: GorseeRenderable | ((error: Error) => GorseeRenderable);
+    children: GorseeRenderable;
+}
+export declare function ErrorBoundary(props: ErrorBoundaryProps): GorseeRenderable;

package/dist-pkg/runtime/error-boundary.js

@@ -0,0 +1,17 @@
+import { createSignal } from "../reactive/signal.js";
+export function ErrorBoundary(props) {
+  const [error, setError] = createSignal(null);
+  try {
+    const children = typeof props.children === "function" ? props.children() : props.children;
+    return () => {
+      const err = error();
+      if (err)
+        return typeof props.fallback === "function" ? props.fallback(err) : props.fallback;
+      return children;
+    };
+  } catch (err) {
+    const errObj = err instanceof Error ? err : Error(String(err));
+    setError(errObj);
+    return typeof props.fallback === "function" ? props.fallback(errObj) : props.fallback;
+  }
+}

package/dist-pkg/runtime/event-replay.d.ts

@@ -0,0 +1,3 @@
+export declare const EVENT_REPLAY_SCRIPT = "<script data-g-event-replay>\n(function(){\n  var Q=[];\n  var E=[\"click\",\"input\",\"change\",\"submit\",\"keydown\",\"keyup\",\"focusin\",\"focusout\"];\n  function capture(e){\n    Q.push({type:e.type,target:e.target,timeStamp:e.timeStamp,\n      detail:e.type===\"input\"?e.target.value:undefined,\n      key:e.key||undefined});\n    if(e.type===\"submit\")e.preventDefault();\n  }\n  E.forEach(function(t){document.addEventListener(t,capture,{capture:true})});\n  window.__gorsee_events={\n    queue:Q,\n    stop:function(){E.forEach(function(t){document.removeEventListener(t,capture,{capture:true})})},\n    replay:function(root){\n      this.stop();\n      Q.forEach(function(ev){\n        if(ev.target&&root.contains(ev.target)){\n          ev.target.dispatchEvent(new Event(ev.type,{bubbles:true}));\n        }\n      });\n      Q.length=0;\n    }\n  };\n})();\n</script>";
+export declare function replayEvents(root: Element): void;
+export declare function stopEventCapture(): void;

package/{src/runtime/event-replay.ts → dist-pkg/runtime/event-replay.js}

@@ -1,9 +1,3 @@
-// Event Replay -- captures user interactions before hydration completes
-// Inspired by Angular's JSAction / Google Wiz
-//
-// This generates a small inline <script> (~400 bytes minified)
-// that should be placed before any app content in the HTML.
-
 export const EVENT_REPLAY_SCRIPT = `<script data-g-event-replay>
 (function(){
   var Q=[];
@@ -29,22 +23,26 @@ export const EVENT_REPLAY_SCRIPT = `<script data-g-event-replay>
     }
   };
 })();
-</script>`
-
-interface GorseeEventReplay {
-  queue: unknown[]
-  stop(): void
-  replay(root: Element): void
+</script>`;
+function getEventReplay() {
+  const value = globalThis.__gorsee_events;
+  if (!value || typeof value !== "object")
+    return;
+  return value;
 }
-
-function getEventReplay(): GorseeEventReplay | undefined {
-  return (globalThis as Record<string, unknown>).__gorsee_events as GorseeEventReplay | undefined
+export function replayEvents(root) {
+  const replay = getEventReplay()?.replay;
+  if (typeof replay !== "function")
+    return;
+  try {
+    replay(root);
+  } catch {}
 }
-
-export function replayEvents(root: Element): void {
-  getEventReplay()?.replay(root)
-}
-
-export function stopEventCapture(): void {
-  getEventReplay()?.stop()
+export function stopEventCapture() {
+  const stop = getEventReplay()?.stop;
+  if (typeof stop !== "function")
+    return;
+  try {
+    stop();
+  } catch {}
 }

package/dist-pkg/runtime/event-source.d.ts

@@ -0,0 +1,7 @@
+import { type SignalGetter } from "../reactive/signal.js";
+export interface EventSourceSignal<T> {
+    readonly value: SignalGetter<T>;
+    readonly connected: SignalGetter<boolean>;
+    close: () => void;
+}
+export declare function createEventSource<T>(url: string, event: string, initialValue: T): EventSourceSignal<T>;

package/dist-pkg/runtime/event-source.js

@@ -0,0 +1,24 @@
+import { createSignal } from "../reactive/signal.js";
+export function createEventSource(url, event, initialValue) {
+  const [value, setValue] = createSignal(initialValue), [connected, setConnected] = createSignal(!1);
+  if (typeof globalThis.EventSource > "u")
+    return { value, connected, close: () => {} };
+  const source = new EventSource(url);
+  source.addEventListener("open", () => {
+    setConnected(!0);
+  });
+  source.addEventListener(event, (e) => {
+    try {
+      const parsed = JSON.parse(String(e.data));
+      setValue(parsed);
+    } catch {}
+  });
+  source.addEventListener("error", () => {
+    setConnected(!1);
+  });
+  function close() {
+    source.close();
+    setConnected(!1);
+  }
+  return { value, connected, close };
+}

package/dist-pkg/runtime/form.d.ts

@@ -0,0 +1,24 @@
+import { type SignalGetter } from "../reactive/signal.js";
+export interface FormActionResult<T = unknown> {
+    ok?: boolean;
+    status?: number;
+    data?: T;
+    error?: string;
+    fieldErrors?: Record<string, string[]>;
+    formErrors?: string[];
+    values?: Record<string, string>;
+}
+export interface FormSubmitOptions<T = unknown> {
+    optimisticData?: T;
+}
+export interface FormState<T = unknown> {
+    submitting: SignalGetter<boolean>;
+    status: SignalGetter<"idle" | "submitting" | "success" | "error">;
+    error: SignalGetter<string | undefined>;
+    formErrors: SignalGetter<string[]>;
+    fieldErrors: SignalGetter<Record<string, string[]>>;
+    data: SignalGetter<T | undefined>;
+    submit: (formData: FormData | Record<string, string>, options?: FormSubmitOptions<T>) => Promise<FormActionResult<T>>;
+    reset: () => void;
+}
+export declare function useFormAction<T = unknown>(actionUrl?: string): FormState<T>;

package/dist-pkg/runtime/form.js

@@ -0,0 +1,65 @@
+import { createSignal } from "../reactive/signal.js";
+function isPlainFormActionResult(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function normalizeFormInput(input) {
+  return input instanceof FormData ? input : new URLSearchParams(input);
+}
+export function useFormAction(actionUrl) {
+  const [submitting, setSubmitting] = createSignal(!1), [status, setStatus] = createSignal("idle"), [error, setError] = createSignal(void 0), [formErrors, setFormErrors] = createSignal([]), [fieldErrors, setFieldErrors] = createSignal({}), [data, setData] = createSignal(void 0);
+  function reset() {
+    setSubmitting(!1);
+    setStatus("idle");
+    setError(void 0);
+    setFormErrors([]);
+    setFieldErrors({});
+    setData(void 0);
+  }
+  async function submit(input, options = {}) {
+    setSubmitting(!0);
+    setStatus("submitting");
+    setError(void 0);
+    setFormErrors([]);
+    setFieldErrors({});
+    if (options.optimisticData !== void 0)
+      setData(() => options.optimisticData);
+    try {
+      const url = actionUrl ?? location.pathname, res = await fetch(url, {
+        method: "POST",
+        body: normalizeFormInput(input),
+        headers: {
+          Accept: "application/json"
+        }
+      }), decoded = await res.json();
+      if (!isPlainFormActionResult(decoded))
+        throw Error("Malformed form action response");
+      const rawResult = decoded, result = {
+        ok: rawResult.ok ?? res.ok,
+        status: rawResult.status ?? res.status,
+        data: rawResult.data,
+        error: rawResult.error,
+        fieldErrors: rawResult.fieldErrors,
+        formErrors: rawResult.formErrors,
+        values: rawResult.values
+      };
+      if (result.ok === !1 || result.error || result.formErrors && result.formErrors.length > 0 || result.fieldErrors && Object.keys(result.fieldErrors).length > 0) {
+        setStatus("error");
+        setError(result.error);
+        setFormErrors(result.formErrors ?? []);
+        setFieldErrors(result.fieldErrors ?? {});
+        return result;
+      }
+      setStatus("success");
+      setData(() => result.data);
+      return result;
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      setStatus("error");
+      setError(message);
+      return { ok: !1, status: 500, error: message };
+    } finally {
+      setSubmitting(!1);
+    }
+  }
+  return { submitting, status, error, formErrors, fieldErrors, data, submit, reset };
+}

package/dist-pkg/runtime/head.d.ts

@@ -0,0 +1,7 @@
+interface HeadProps {
+    children?: unknown;
+}
+export declare function resetServerHead(): void;
+export declare function getServerHead(): string[];
+export declare function Head(props: HeadProps): null;
+export {};

package/dist-pkg/runtime/head.js

@@ -0,0 +1,90 @@
+let serverHeadElements = [];
+export function resetServerHead() {
+  serverHeadElements = [];
+}
+export function getServerHead() {
+  return serverHeadElements;
+}
+export function Head(props) {
+  const children = props.children;
+  if (!children)
+    return null;
+  if (typeof document < "u")
+    applyClientHead(children);
+  else
+    collectServerHead(children);
+  return null;
+}
+function isVNode(v) {
+  return typeof v === "object" && v !== null && "type" in v && "props" in v;
+}
+function collectServerHead(children) {
+  if (Array.isArray(children)) {
+    for (const child of children)
+      collectServerHead(child);
+    return;
+  }
+  if (!isVNode(children))
+    return;
+  const { type, props } = children;
+  if (type === "title" && props.children) {
+    serverHeadElements.push(`<title>${String(props.children)}</title>`);
+    return;
+  }
+  let tag = `<${type}`;
+  for (const [key, value] of Object.entries(props)) {
+    if (key === "children")
+      continue;
+    if (value != null)
+      tag += ` ${key}="${String(value)}"`;
+  }
+  if (props.children)
+    tag += `>${String(props.children)}</${type}>`;
+  else
+    tag += " />";
+  serverHeadElements.push(tag);
+}
+function applyClientHead(children) {
+  if (Array.isArray(children)) {
+    for (const child of children)
+      applyClientHead(child);
+    return;
+  }
+  if (!isVNode(children))
+    return;
+  const { type, props } = children;
+  if (type === "title") {
+    document.title = String(props.children ?? "");
+    return;
+  }
+  if (type === "meta") {
+    const name = props.name ?? props.property;
+    if (name) {
+      const existing = document.querySelector(`meta[name="${name}"], meta[property="${name}"]`);
+      if (existing) {
+        existing.setAttribute("content", String(props.content ?? ""));
+        return;
+      }
+    }
+    const meta = document.createElement("meta");
+    for (const [key, value] of Object.entries(props)) {
+      if (key === "children")
+        continue;
+      if (value != null)
+        meta.setAttribute(key, String(value));
+    }
+    document.head.appendChild(meta);
+    return;
+  }
+  if (type === "link") {
+    const el = document.createElement("link");
+    for (const [key, value] of Object.entries(props)) {
+      if (key === "children")
+        continue;
+      if (value != null)
+        el.setAttribute(key, String(value));
+    }
+    el.dataset.gHead = "";
+    document.head.appendChild(el);
+  }
+}

package/dist-pkg/runtime/html-escape.d.ts

@@ -0,0 +1,7 @@
+export declare const GORSEE_SIGNAL_MARKER = "__gorseeSignal";
+export declare function escapeHTML(value: string): string;
+export declare function escapeAttr(value: string): string;
+export declare const VOID_ELEMENTS: Set<string>;
+export declare function isSignal(value: unknown): value is () => unknown;
+export declare function isRenderableThunk(value: unknown): value is () => unknown;
+export declare function resolveValue(value: unknown): unknown;

package/dist-pkg/runtime/html-escape.js

@@ -0,0 +1,39 @@
+const HTML_ESCAPE_RE = /[&<>"']/g, ATTR_ESCAPE_RE = /["&]/g, HTML_ESCAPES = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#x27;"
+};
+export const GORSEE_SIGNAL_MARKER = "__gorseeSignal";
+export function escapeHTML(value) {
+  return value.replace(HTML_ESCAPE_RE, (ch) => HTML_ESCAPES[ch] ?? ch);
+}
+export function escapeAttr(value) {
+  return value.replace(ATTR_ESCAPE_RE, (ch) => HTML_ESCAPES[ch] ?? ch);
+}
+export const VOID_ELEMENTS = new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+export function isSignal(value) {
+  return typeof value === "function" && value[GORSEE_SIGNAL_MARKER] === !0;
+}
+export function isRenderableThunk(value) {
+  return typeof value === "function" && value.length === 0 && !isSignal(value);
+}
+export function resolveValue(value) {
+  return isSignal(value) ? value() : value;
+}

package/dist-pkg/runtime/hydration.d.ts

@@ -0,0 +1,15 @@
+export interface HydrationDiagnostics {
+    active: boolean;
+    mismatches: number;
+    recoverableMismatch: boolean;
+}
+export declare function isHydrating(): boolean;
+export declare function getHydrationMismatches(): number;
+export declare function getHydrationDiagnostics(): HydrationDiagnostics;
+export declare function resetHydrationDiagnostics(): void;
+export declare function enterHydration(root: Element): void;
+export declare function exitHydration(): HydrationDiagnostics;
+export declare function claimElement(expectedTag?: string): Element | null;
+export declare function claimText(expectedText?: string): Text | null;
+export declare function pushCursor(parent: Node): void;
+export declare function popCursor(): void;

package/dist-pkg/runtime/hydration.js

@@ -0,0 +1,103 @@
+const stack = [];
+let active = !1, mismatches = 0;
+export function isHydrating() {
+  return active;
+}
+export function getHydrationMismatches() {
+  return mismatches;
+}
+export function getHydrationDiagnostics() {
+  return { active, mismatches, recoverableMismatch: mismatches > 0 };
+}
+export function resetHydrationDiagnostics() {
+  mismatches = 0;
+}
+export function enterHydration(root) {
+  active = !0;
+  mismatches = 0;
+  stack.length = 0;
+  stack.push({ parent: root, index: 0 });
+}
+export function exitHydration() {
+  for (const cursor of stack)
+    mismatches += countRemainingMeaningfulNodes(cursor);
+  active = !1;
+  stack.length = 0;
+  if (mismatches > 0 && typeof console < "u")
+    console.warn(`[gorsee] Hydration completed with ${mismatches} mismatch(es). Server and client HTML may differ.`);
+  return getHydrationDiagnostics();
+}
+export function claimElement(expectedTag) {
+  const cursor = stack[stack.length - 1];
+  if (!cursor)
+    return null;
+  while (cursor.index < cursor.parent.childNodes.length) {
+    const node = cursor.parent.childNodes[cursor.index];
+    if (node.nodeType === 1) {
+      if (expectedTag && node.tagName.toLowerCase() !== expectedTag.toLowerCase()) {
+        mismatches++;
+        return null;
+      }
+      cursor.index++;
+      return node;
+    }
+    if (node.nodeType === 3 && node.textContent?.trim() === "") {
+      cursor.index++;
+      continue;
+    }
+    if (node.nodeType === 8) {
+      cursor.index++;
+      continue;
+    }
+    break;
+  }
+  return null;
+}
+export function claimText(expectedText) {
+  const cursor = stack[stack.length - 1];
+  if (!cursor)
+    return null;
+  while (cursor.index < cursor.parent.childNodes.length) {
+    const node = cursor.parent.childNodes[cursor.index];
+    if (node.nodeType === 3) {
+      cursor.index++;
+      const textNode = node;
+      if (expectedText !== void 0) {
+        const currentText = textNode.textContent ?? "";
+        if (currentText !== expectedText)
+          if (currentText.startsWith(expectedText) && expectedText.length < currentText.length) {
+            textNode.splitText(expectedText.length);
+            textNode.textContent = expectedText;
+          } else {
+            textNode.textContent = expectedText;
+            mismatches++;
+          }
+      }
+      return textNode;
+    }
+    if (node.nodeType === 8) {
+      cursor.index++;
+      continue;
+    }
+    break;
+  }
+  return null;
+}
+export function pushCursor(parent) {
+  stack.push({ parent, index: 0 });
+}
+export function popCursor() {
+  stack.pop();
+}
+function countRemainingMeaningfulNodes(cursor) {
+  let count = 0;
+  for (let i = cursor.index;i < cursor.parent.childNodes.length; i++) {
+    const node = cursor.parent.childNodes[i];
+    if (node.nodeType === 8)
+      continue;
+    if (node.nodeType === 3 && node.textContent?.trim() === "")
+      continue;
+    count++;
+  }
+  return count;
+}

package/dist-pkg/runtime/image.d.ts

@@ -0,0 +1,49 @@
+import type { GorseeRenderable } from "./renderable.js";
+export type ImageFormat = "avif" | "webp" | "jpeg" | "png";
+export type ImageFit = "cover" | "contain" | "fill" | "inside" | "outside";
+export interface ImageRemotePattern {
+    protocol?: "http:" | "https:";
+    hostname: string;
+    pathname?: string;
+}
+export interface ImageLoaderParams {
+    src: string;
+    width: number;
+    quality: number;
+    format?: ImageFormat;
+}
+export type ImageLoader = (params: ImageLoaderParams) => string;
+export interface ImageRuntimeConfig {
+    widths?: number[];
+    formats?: ImageFormat[];
+    quality?: number;
+    fit?: ImageFit;
+    loader?: ImageLoader;
+    remotePatterns?: ImageRemotePattern[];
+}
+export interface ImageProps {
+    src: string;
+    alt: string;
+    width?: number;
+    height?: number;
+    loading?: "lazy" | "eager";
+    priority?: boolean;
+    sizes?: string;
+    quality?: number;
+    fit?: ImageFit;
+    format?: ImageFormat;
+    formats?: ImageFormat[];
+    optimize?: boolean;
+    placeholder?: "empty" | "blur";
+    blurDataURL?: string;
+    class?: string;
+    className?: string;
+    config?: ImageRuntimeConfig;
+    [key: string]: unknown;
+}
+export declare function isAllowedRemoteImage(src: string, patterns?: ImageRemotePattern[]): boolean;
+export declare function defaultImageLoader(params: ImageLoaderParams): string;
+export declare function getImageCandidateWidths(width: number | undefined, widths?: number[]): number[];
+export declare function buildImageSrcSet(src: string, width: number | undefined, quality: number, loader: ImageLoader, format?: ImageFormat, widths?: number[]): string | undefined;
+export declare function getImageProps(props: ImageProps): Record<string, unknown>;
+export declare function Image(props: ImageProps): GorseeRenderable;