@ulearning/ai-generative-frame 0.0.0-stage → 1.0.0-next.0

package/src/repair/repair.ts

@@ -0,0 +1,202 @@
+import type { ConsoleEntry, WidgetError } from "../protocol";
+import { applyWidgetEdits, type WidgetEdit } from "../tools/edits";
+
+/** What one render of a widget produced; `previewWidget` returns a compatible shape. */
+export type RenderReport = {
+  errors: WidgetError[];
+  console: ConsoleEntry[];
+  blank: boolean;
+  height?: number;
+  screenshot?: string;
+};
+
+export type RepairFeedback = {
+  ok: boolean;
+  round: number;
+  errors: WidgetError[];
+  /** Warnings and errors from the console, most recent last. */
+  console: ConsoleEntry[];
+  blank: boolean;
+  height?: number;
+  screenshot?: string;
+  /** The feedback as text for a tool result or follow-up message. */
+  text: string;
+};
+
+export type GenerateContext = {
+  round: number;
+  /** The code from the previous round; undefined in the first round. */
+  previousCode: string | undefined;
+  /** Feedback on the previous round; undefined in the first round. */
+  feedback: RepairFeedback | undefined;
+};
+
+/** Either complete new code or exact replacements on the previous round's code. */
+export type GenerateResult = string | { edits: WidgetEdit[] };
+
+export type RepairRound = {
+  round: number;
+  code: string;
+  report: RenderReport;
+  feedback: RepairFeedback;
+};
+
+export type RepairLoopOptions = {
+  generate(context: GenerateContext): Promise<GenerateResult>;
+  render(code: string): Promise<RenderReport>;
+  /** Rounds including the first generation. Defaults to 3. */
+  maxRounds?: number;
+  /** Decides whether a render is good enough. Defaults to no errors and not blank. */
+  accept?(report: RenderReport): boolean;
+  /** Console entries carried into feedback. Defaults to 20. */
+  consoleLimit?: number;
+  /** Forward the screenshot to `generate`. Defaults to true. */
+  includeScreenshot?: boolean;
+};
+
+export type RepairLoopResult = {
+  ok: boolean;
+  code: string;
+  report: RenderReport;
+  rounds: RepairRound[];
+};
+
+const defaultAccept = (report: RenderReport) =>
+  report.errors.length === 0 && !report.blank;
+
+const describeError = (error: WidgetError) => {
+  const location =
+    error.line !== undefined
+      ? ` (line ${error.line}${error.column !== undefined ? `:${error.column}` : ""})`
+      : "";
+  const source =
+    error.source && error.kind !== "error" ? ` [${error.source}]` : "";
+  return `- ${error.kind}: ${error.message}${location}${source}`;
+};
+
+/** Turns a render report into structured, model-readable feedback. */
+export function buildRepairFeedback(
+  report: RenderReport,
+  options: {
+    round?: number;
+    ok?: boolean;
+    consoleLimit?: number;
+    includeScreenshot?: boolean;
+  } = {},
+): RepairFeedback {
+  const ok = options.ok ?? defaultAccept(report);
+  const consoleExcerpt = report.console
+    .filter((entry) => entry.level === "warn" || entry.level === "error")
+    .slice(-(options.consoleLimit ?? 20));
+
+  const lines: string[] = [];
+  if (ok) {
+    lines.push("The widget rendered without errors.");
+  } else {
+    lines.push("The widget did not render cleanly. Fix the causes below.");
+  }
+  if (report.errors.length > 0) {
+    lines.push(
+      "",
+      `Errors (${report.errors.length}):`,
+      ...report.errors.map(describeError),
+    );
+  }
+  if (report.blank) {
+    lines.push(
+      "",
+      "The widget rendered blank: nothing visible ended up on screen. Check that content is not hidden, that script-drawn areas have an explicit height, and that scripts ran without errors.",
+    );
+  }
+  if (consoleExcerpt.length > 0) {
+    lines.push(
+      "",
+      "Console:",
+      ...consoleExcerpt.map((entry) => `- ${entry.level}: ${entry.message}`),
+    );
+  }
+  if (report.height !== undefined) {
+    lines.push("", `Rendered height: ${report.height}px.`);
+  }
+
+  const includeScreenshot = options.includeScreenshot ?? true;
+  return {
+    ok,
+    round: options.round ?? 1,
+    errors: report.errors,
+    console: consoleExcerpt,
+    blank: report.blank,
+    ...(report.height !== undefined ? { height: report.height } : {}),
+    ...(includeScreenshot && report.screenshot
+      ? { screenshot: report.screenshot }
+      : {}),
+    text: lines.join("\n"),
+  };
+}
+
+/**
+ * Generates a widget, renders it, and feeds structured feedback back into
+ * generation until a render is accepted or the round budget runs out. Returns
+ * the best attempt: the last accepted one, otherwise the one with the fewest
+ * errors.
+ */
+export async function repairLoop(
+  options: RepairLoopOptions,
+): Promise<RepairLoopResult> {
+  const maxRounds = Math.max(1, options.maxRounds ?? 3);
+  const accept = options.accept ?? defaultAccept;
+  const rounds: RepairRound[] = [];
+  let previousCode: string | undefined;
+  let feedback: RepairFeedback | undefined;
+
+  for (let round = 1; round <= maxRounds; round++) {
+    const generated = await options.generate({ round, previousCode, feedback });
+    let code: string;
+    let report: RenderReport;
+    if (typeof generated === "string") {
+      code = generated;
+      report = await options.render(code);
+    } else {
+      const applied = applyWidgetEdits(previousCode ?? "", generated.edits);
+      if (applied.ok) {
+        code = applied.code;
+        report = await options.render(code);
+      } else {
+        code = previousCode ?? "";
+        report = {
+          errors: [
+            {
+              kind: "error",
+              message: `Edits were not applied: ${applied.error}`,
+            },
+          ],
+          console: [],
+          blank: false,
+        };
+      }
+    }
+
+    const ok = accept(report);
+    feedback = buildRepairFeedback(report, {
+      round,
+      ok,
+      ...(options.consoleLimit !== undefined
+        ? { consoleLimit: options.consoleLimit }
+        : {}),
+      ...(options.includeScreenshot !== undefined
+        ? { includeScreenshot: options.includeScreenshot }
+        : {}),
+    });
+    rounds.push({ round, code, report, feedback });
+    previousCode = code;
+    if (ok) return { ok: true, code, report, rounds };
+  }
+
+  const best = rounds.reduce((a, b) =>
+    b.report.errors.length + (b.report.blank ? 1 : 0) <
+    a.report.errors.length + (a.report.blank ? 1 : 0)
+      ? b
+      : a,
+  );
+  return { ok: false, code: best.code, report: best.report, rounds };
+}

package/src/repair.ts

@@ -0,0 +1,11 @@
+export {
+  repairLoop,
+  buildRepairFeedback,
+  type GenerateContext,
+  type GenerateResult,
+  type RenderReport,
+  type RepairFeedback,
+  type RepairLoopOptions,
+  type RepairLoopResult,
+  type RepairRound,
+} from "./repair/repair";

package/src/rpc.ts

@@ -0,0 +1,228 @@
+export type JsonRpcId = string | number;
+
+export type JsonRpcRequest = {
+  jsonrpc: "2.0";
+  id: JsonRpcId;
+  method: string;
+  params?: unknown;
+};
+
+export type JsonRpcNotification = {
+  jsonrpc: "2.0";
+  method: string;
+  params?: unknown;
+};
+
+export type JsonRpcResponse = {
+  jsonrpc: "2.0";
+  id: JsonRpcId;
+  result?: unknown;
+  error?: { code: number; message: string; data?: unknown };
+};
+
+export type JsonRpcMessage =
+  | JsonRpcRequest
+  | JsonRpcNotification
+  | JsonRpcResponse;
+
+export const RPC_ERROR = {
+  parseError: -32700,
+  invalidRequest: -32600,
+  methodNotFound: -32601,
+  invalidParams: -32602,
+  internalError: -32603,
+} as const;
+
+export class RpcError extends Error {
+  readonly code: number;
+  readonly data: unknown;
+
+  constructor(code: number, message: string, data?: unknown) {
+    super(message);
+    this.name = "RpcError";
+    this.code = code;
+    this.data = data;
+  }
+}
+
+/** The subset of `MessagePort` the peer uses. */
+export type RpcEndpoint = {
+  postMessage(message: unknown): void;
+  addEventListener(
+    type: "message",
+    listener: (event: MessageEvent) => void,
+  ): void;
+  removeEventListener(
+    type: "message",
+    listener: (event: MessageEvent) => void,
+  ): void;
+  start?(): void;
+};
+
+export type RpcHandlers = {
+  /** Resolves to the result; throw an `RpcError` to answer with a specific code. */
+  onRequest?: (method: string, params: unknown) => unknown;
+  onNotification?: (method: string, params: unknown) => void;
+};
+
+export type RpcPeer = {
+  request(
+    method: string,
+    params?: unknown,
+    options?: { timeoutMs?: number },
+  ): Promise<unknown>;
+  notify(method: string, params?: unknown): void;
+  /** Feeds a message received outside the endpoint, such as a window message. */
+  receive(message: unknown, reply?: (message: JsonRpcMessage) => void): void;
+  dispose(): void;
+};
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  typeof value === "object" && value !== null;
+
+export function isJsonRpcMessage(value: unknown): value is JsonRpcMessage {
+  return isRecord(value) && value["jsonrpc"] === "2.0";
+}
+
+const errorPayload = (error: unknown) => {
+  if (error instanceof RpcError) {
+    return {
+      code: error.code,
+      message: error.message,
+      ...(error.data !== undefined ? { data: error.data } : {}),
+    };
+  }
+  return {
+    code: RPC_ERROR.internalError,
+    message: error instanceof Error ? error.message : String(error),
+  };
+};
+
+/** A symmetric JSON-RPC 2.0 peer: both sides can send requests and notifications. */
+export function createRpcPeer(
+  endpoint: RpcEndpoint,
+  handlers: RpcHandlers = {},
+): RpcPeer {
+  let nextId = 1;
+  let disposed = false;
+  const pending = new Map<
+    JsonRpcId,
+    {
+      resolve: (value: unknown) => void;
+      reject: (error: unknown) => void;
+      timer: ReturnType<typeof setTimeout> | undefined;
+    }
+  >();
+
+  const post = (message: JsonRpcMessage) => {
+    if (disposed) return;
+    endpoint.postMessage(message);
+  };
+
+  const handleRequest = async (
+    request: JsonRpcRequest,
+    reply: (message: JsonRpcMessage) => void,
+  ) => {
+    try {
+      if (!handlers.onRequest) {
+        throw new RpcError(
+          RPC_ERROR.methodNotFound,
+          `Unknown method: ${request.method}`,
+        );
+      }
+      const result = await handlers.onRequest(request.method, request.params);
+      reply({ jsonrpc: "2.0", id: request.id, result: result ?? null });
+    } catch (error) {
+      reply({ jsonrpc: "2.0", id: request.id, error: errorPayload(error) });
+    }
+  };
+
+  const receive = (
+    message: unknown,
+    reply: (message: JsonRpcMessage) => void = post,
+  ) => {
+    if (disposed || !isJsonRpcMessage(message)) return;
+    const hasId =
+      "id" in message &&
+      (typeof message.id === "string" || typeof message.id === "number");
+
+    if ("method" in message && typeof message.method === "string") {
+      if (hasId) {
+        void handleRequest(message as JsonRpcRequest, reply);
+      } else {
+        try {
+          handlers.onNotification?.(message.method, message.params);
+        } catch {
+          // A failing notification handler has nobody to answer to.
+        }
+      }
+      return;
+    }
+
+    if (!hasId) return;
+    const response = message as JsonRpcResponse;
+    const entry = pending.get(response.id);
+    if (!entry) return;
+    pending.delete(response.id);
+    if (entry.timer !== undefined) clearTimeout(entry.timer);
+    if (response.error) {
+      entry.reject(
+        new RpcError(
+          response.error.code,
+          response.error.message,
+          response.error.data,
+        ),
+      );
+    } else {
+      entry.resolve(response.result);
+    }
+  };
+
+  const onMessage = (event: MessageEvent) => receive(event.data);
+  endpoint.addEventListener("message", onMessage);
+  endpoint.start?.();
+
+  return {
+    request(method, params, options) {
+      if (disposed) {
+        return Promise.reject(new Error("RPC peer is disposed"));
+      }
+      const id = nextId++;
+      return new Promise((resolve, reject) => {
+        const timeoutMs = options?.timeoutMs;
+        const timer =
+          timeoutMs === undefined
+            ? undefined
+            : setTimeout(() => {
+                pending.delete(id);
+                reject(new Error(`${method} timed out after ${timeoutMs}ms`));
+              }, timeoutMs);
+        pending.set(id, { resolve, reject, timer });
+        post({
+          jsonrpc: "2.0",
+          id,
+          method,
+          ...(params !== undefined ? { params } : {}),
+        });
+      });
+    },
+    notify(method, params) {
+      post({
+        jsonrpc: "2.0",
+        method,
+        ...(params !== undefined ? { params } : {}),
+      });
+    },
+    receive,
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      endpoint.removeEventListener("message", onMessage);
+      for (const entry of pending.values()) {
+        if (entry.timer !== undefined) clearTimeout(entry.timer);
+        entry.reject(new Error("RPC peer is disposed"));
+      }
+      pending.clear();
+    },
+  };
+}

package/src/runtime/diagnostics.ts

@@ -0,0 +1,165 @@
+import type { ConsoleEntry, ConsoleLevel, WidgetError } from "../protocol";
+
+const MAX_CONSOLE = 200;
+const MAX_ERRORS = 50;
+const MAX_MESSAGE = 1000;
+
+const LEVELS: readonly ConsoleLevel[] = [
+  "log",
+  "info",
+  "warn",
+  "error",
+  "debug",
+];
+
+const truncate = (text: string) =>
+  text.length > MAX_MESSAGE ? `${text.slice(0, MAX_MESSAGE)}…` : text;
+
+export const formatValue = (value: unknown): string => {
+  if (typeof value === "string") return value;
+  if (value instanceof Error)
+    return value.stack ?? `${value.name}: ${value.message}`;
+  if (typeof value === "object" && value !== null) {
+    if (typeof Node !== "undefined" && value instanceof Node) {
+      return `<${value.nodeName.toLowerCase()}>`;
+    }
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return String(value);
+    }
+  }
+  return String(value);
+};
+
+export type Diagnostics = {
+  readonly errors: WidgetError[];
+  readonly console: ConsoleEntry[];
+  record(error: WidgetError): void;
+  dispose(): void;
+};
+
+export type DiagnosticsOptions = {
+  onError?: (error: WidgetError) => void;
+  onConsole?: (entry: ConsoleEntry) => void;
+};
+
+/** Captures errors, console output, failed resources, and CSP violations in a window. */
+export function installDiagnostics(
+  win: Window & typeof globalThis,
+  options: DiagnosticsOptions = {},
+): Diagnostics {
+  const errors: WidgetError[] = [];
+  const consoleEntries: ConsoleEntry[] = [];
+
+  const record = (error: WidgetError) => {
+    const normalized: WidgetError = {
+      ...error,
+      message: truncate(error.message),
+    };
+    if (errors.length < MAX_ERRORS) errors.push(normalized);
+    options.onError?.(normalized);
+  };
+
+  const onError = (event: ErrorEvent | Event) => {
+    const target = event.target;
+    if (target && target !== win && target instanceof win.Element) {
+      const src =
+        target.getAttribute("src") ?? target.getAttribute("href") ?? undefined;
+      record({
+        kind: "resource",
+        message: `Failed to load <${target.localName}>${src ? ` ${src}` : ""}`,
+        ...(src ? { source: src } : {}),
+      });
+      return;
+    }
+    const e = event as ErrorEvent;
+    const stack = e.error instanceof Error ? e.error.stack : undefined;
+    record({
+      kind: "error",
+      message: e.message || formatValue(e.error),
+      ...(e.filename ? { source: e.filename } : {}),
+      ...(e.lineno ? { line: e.lineno } : {}),
+      ...(e.colno ? { column: e.colno } : {}),
+      ...(stack ? { stack: truncate(stack) } : {}),
+    });
+  };
+
+  const onRejection = (event: PromiseRejectionEvent) => {
+    const reason: unknown = event.reason;
+    const stack = reason instanceof Error ? reason.stack : undefined;
+    record({
+      kind: "unhandledrejection",
+      message: reason instanceof Error ? reason.message : formatValue(reason),
+      ...(stack ? { stack: truncate(stack) } : {}),
+    });
+  };
+
+  const onViolation = (event: SecurityPolicyViolationEvent) => {
+    record({
+      kind: "csp",
+      message: `Blocked by Content Security Policy (${event.effectiveDirective}): ${event.blockedURI || "inline"}`,
+      ...(event.blockedURI ? { source: event.blockedURI } : {}),
+      ...(event.lineNumber ? { line: event.lineNumber } : {}),
+    });
+  };
+
+  win.addEventListener("error", onError, true);
+  win.addEventListener("unhandledrejection", onRejection);
+  win.document.addEventListener("securitypolicyviolation", onViolation);
+
+  const originals = new Map<ConsoleLevel, (...args: unknown[]) => void>();
+  for (const level of LEVELS) {
+    const original = win.console[level];
+    originals.set(level, original);
+    win.console[level] = (...args: unknown[]) => {
+      const entry: ConsoleEntry = {
+        level,
+        message: truncate(args.map(formatValue).join(" ")),
+      };
+      consoleEntries.push(entry);
+      if (consoleEntries.length > MAX_CONSOLE) consoleEntries.shift();
+      options.onConsole?.(entry);
+      original.apply(win.console, args);
+    };
+  }
+
+  return {
+    errors,
+    console: consoleEntries,
+    record,
+    dispose() {
+      win.removeEventListener("error", onError, true);
+      win.removeEventListener("unhandledrejection", onRejection);
+      win.document.removeEventListener("securitypolicyviolation", onViolation);
+      for (const [level, original] of originals) win.console[level] = original;
+    },
+  };
+}
+
+const VISUAL_SELECTOR =
+  "svg, canvas, img, video, picture, iframe, input, button, select, textarea, progress, meter";
+
+/** True when the widget rendered nothing a person could see. */
+export function isBlankRender(root: HTMLElement): boolean {
+  const rect = root.getBoundingClientRect();
+  if (rect.height < 2 || rect.width < 2) return true;
+  if ((root.textContent ?? "").trim().length > 0) return false;
+  for (const el of Array.from(root.querySelectorAll(VISUAL_SELECTOR))) {
+    const r = el.getBoundingClientRect();
+    if (r.width >= 2 && r.height >= 2) return false;
+  }
+  for (const el of Array.from(root.querySelectorAll("*"))) {
+    const style = root.ownerDocument.defaultView?.getComputedStyle(el);
+    if (!style) continue;
+    const painted =
+      (style.backgroundColor !== "rgba(0, 0, 0, 0)" &&
+        style.backgroundColor !== "transparent") ||
+      style.backgroundImage !== "none" ||
+      parseFloat(style.borderTopWidth) > 0;
+    if (!painted) continue;
+    const r = el.getBoundingClientRect();
+    if (r.width >= 2 && r.height >= 2) return false;
+  }
+  return true;
+}

package/src/runtime/generated.ts

@@ -0,0 +1,2 @@
+// Generated by scripts/build-runtime.mjs from src/runtime. Do not edit by hand.
+export const runtimeSource: string = "(function(){let e={write:`genframe/write`,end:`genframe/end`,replace:`genframe/replace`,screenshot:`genframe/screenshot`,inspect:`genframe/inspect`,clearStorage:`genframe/clear-storage`,hostContextChanged:`ui/notifications/host-context-changed`,toolInputPartial:`ui/notifications/tool-input-partial`,toolInput:`ui/notifications/tool-input`,toolResult:`ui/notifications/tool-result`,ready:`genframe/ready`,initialize:`ui/initialize`,initialized:`ui/notifications/initialized`,sizeChanged:`ui/notifications/size-changed`,openLink:`ui/open-link`,message:`ui/message`,callTool:`tools/call`,requestDisplayMode:`ui/request-display-mode`,updateModelContext:`ui/update-model-context`,copyText:`genframe/copy-text`,widgetState:`genframe/widget-state`,log:`genframe/log`,error:`genframe/error`},t=/^<svg[\\s>/]/i;function n(e){let n=e.trimStart();if(n.startsWith(`<?xml`)){let e=n.indexOf(`>`);if(e===-1)return`html`;n=n.slice(e+1).trimStart()}for(;n.startsWith(`<!--`);){let e=n.indexOf(`-->`,4);if(e===-1)return`html`;n=n.slice(e+3).trimStart()}return t.test(n)?`svg`:`html`}let r={parseError:-32700,invalidRequest:-32600,methodNotFound:-32601,invalidParams:-32602,internalError:-32603};var i=class extends Error{code;data;constructor(e,t,n){super(t),this.name=`RpcError`,this.code=e,this.data=n}};let a=e=>typeof e==`object`&&!!e;function o(e){return a(e)&&e.jsonrpc===`2.0`}let s=e=>e instanceof i?{code:e.code,message:e.message,...e.data===void 0?{}:{data:e.data}}:{code:r.internalError,message:e instanceof Error?e.message:String(e)};function c(e,t={}){let n=1,a=!1,c=/* @__PURE__ */ new Map,l=t=>{a||e.postMessage(t)},u=async(e,n)=>{try{if(!t.onRequest)throw new i(r.methodNotFound,`Unknown method: ${e.method}`);let a=await t.onRequest(e.method,e.params);n({jsonrpc:`2.0`,id:e.id,result:a??null})}catch(t){n({jsonrpc:`2.0`,id:e.id,error:s(t)})}},d=(e,n=l)=>{if(a||!o(e))return;let r=`id`in e&&(typeof e.id==`string`||typeof e.id==`number`);if(`method`in e&&typeof e.method==`string`){if(r)u(e,n);else try{t.onNotification?.(e.method,e.params)}catch{}return}if(!r)return;let s=e,d=c.get(s.id);d&&(c.delete(s.id),d.timer!==void 0&&clearTimeout(d.timer),s.error?d.reject(new i(s.error.code,s.error.message,s.error.data)):d.resolve(s.result))},f=e=>d(e.data);return e.addEventListener(`message`,f),e.start?.(),{request(e,t,r){if(a)return Promise.reject(/* @__PURE__ */ Error(`RPC peer is disposed`));let i=n++;return new Promise((n,a)=>{let o=r?.timeoutMs,s=o===void 0?void 0:setTimeout(()=>{c.delete(i),a(/* @__PURE__ */ Error(`${e} timed out after ${o}ms`))},o);c.set(i,{resolve:n,reject:a,timer:s}),l({jsonrpc:`2.0`,id:i,method:e,...t===void 0?{}:{params:t}})})},notify(e,t){l({jsonrpc:`2.0`,method:e,...t===void 0?{}:{params:t}})},receive:d,dispose(){if(!a){a=!0,e.removeEventListener(`message`,f);for(let e of c.values())e.timer!==void 0&&clearTimeout(e.timer),e.reject(/* @__PURE__ */ Error(`RPC peer is disposed`));c.clear()}}}}let l=`1.0.0-next.0`,u=1e3,d=[`log`,`info`,`warn`,`error`,`debug`],f=e=>e.length>u?`${e.slice(0,u)}…`:e,p=e=>{if(typeof e==`string`)return e;if(e instanceof Error)return e.stack??`${e.name}: ${e.message}`;if(typeof e==`object`&&e){if(typeof Node<`u`&&e instanceof Node)return`<${e.nodeName.toLowerCase()}>`;try{return JSON.stringify(e)}catch{return String(e)}}return String(e)};function m(e,t={}){let n=[],r=[],i=e=>{let r={...e,message:f(e.message)};n.length<50&&n.push(r),t.onError?.(r)},a=t=>{let n=t.target;if(n&&n!==e&&n instanceof e.Element){let e=n.getAttribute(`src`)??n.getAttribute(`href`)??void 0;i({kind:`resource`,message:`Failed to load <${n.localName}>${e?` ${e}`:``}`,...e?{source:e}:{}});return}let r=t,a=r.error instanceof Error?r.error.stack:void 0;i({kind:`error`,message:r.message||p(r.error),...r.filename?{source:r.filename}:{},...r.lineno?{line:r.lineno}:{},...r.colno?{column:r.colno}:{},...a?{stack:f(a)}:{}})},o=e=>{let t=e.reason,n=t instanceof Error?t.stack:void 0;i({kind:`unhandledrejection`,message:t instanceof Error?t.message:p(t),...n?{stack:f(n)}:{}})},s=e=>{i({kind:`csp`,message:`Blocked by Content Security Policy (${e.effectiveDirective}): ${e.blockedURI||`inline`}`,...e.blockedURI?{source:e.blockedURI}:{},...e.lineNumber?{line:e.lineNumber}:{}})};e.addEventListener(`error`,a,!0),e.addEventListener(`unhandledrejection`,o),e.document.addEventListener(`securitypolicyviolation`,s);let c=/* @__PURE__ */ new Map;for(let n of d){let i=e.console[n];c.set(n,i),e.console[n]=(...a)=>{let o={level:n,message:f(a.map(p).join(` `))};r.push(o),r.length>200&&r.shift(),t.onConsole?.(o),i.apply(e.console,a)}}return{errors:n,console:r,record:i,dispose(){e.removeEventListener(`error`,a,!0),e.removeEventListener(`unhandledrejection`,o),e.document.removeEventListener(`securitypolicyviolation`,s);for(let[t,n]of c)e.console[t]=n}}}function h(e){let t=e.getBoundingClientRect();if(t.height<2||t.width<2)return!0;if((e.textContent??``).trim().length>0)return!1;for(let t of Array.from(e.querySelectorAll(`svg, canvas, img, video, picture, iframe, input, button, select, textarea, progress, meter`))){let e=t.getBoundingClientRect();if(e.width>=2&&e.height>=2)return!1}for(let t of Array.from(e.querySelectorAll(`*`))){let n=e.ownerDocument.defaultView?.getComputedStyle(t);if(!n||!(n.backgroundColor!==`rgba(0, 0, 0, 0)`&&n.backgroundColor!==`transparent`||n.backgroundImage!==`none`||parseFloat(n.borderTopWidth)>0))continue;let r=t.getBoundingClientRect();if(r.width>=2&&r.height>=2)return!1}return!0}let g=/* @__PURE__ */ new Set([`style`,`script`,`meta`,`link`,`title`,`base`]);function _(e){let t=e.toLowerCase().lastIndexOf(`<style`);if(t===-1)return e;let n=e.charAt(t+6);return n!==``&&!/[\\s>/]/.test(n)||e.toLowerCase().includes(`</style`,t)?e:e.slice(0,t)}function v(e,t){let n=e.createElement(`template`);n.innerHTML=t;let r=n.content,i=[];for(let t of Array.from(r.querySelectorAll(`script`)))t.replaceWith(e.createComment(`gf-script`)),i.push(t);return{fragment:r,scripts:i}}let y=(e,t)=>{if(e.nodeType!==t.nodeType)return!1;if(e.nodeType!==Node.ELEMENT_NODE)return!0;let n=e,r=t;return n.localName===r.localName&&n.namespaceURI===r.namespaceURI&&n.getAttribute(`id`)===r.getAttribute(`id`)},b=(e,t)=>{for(let n of Array.from(t.attributes))if(e.getAttributeNS(n.namespaceURI,n.localName)!==n.value)try{n.namespaceURI?e.setAttributeNS(n.namespaceURI,n.name,n.value):e.setAttribute(n.name,n.value)}catch{}for(let n of Array.from(e.attributes))t.hasAttributeNS(n.namespaceURI,n.localName)||e.removeAttributeNS(n.namespaceURI,n.localName)},x=(e,t,n)=>{if(e.nodeType!==Node.ELEMENT_NODE){e.nodeValue!==t.nodeValue&&(e.nodeValue=t.nodeValue);return}let r=e,i=t;b(r,i),r instanceof HTMLTemplateElement&&i instanceof HTMLTemplateElement?r.innerHTML!==i.innerHTML&&r.content.replaceChildren(i.content):S(r,i,n)};function S(e,t,n){let r=Array.from(t.childNodes),i=e.firstChild;for(let t=0;t<r.length;t++){let a=r[t];if(!i){e.appendChild(a),n.onAdded(a);continue}if(y(i,a)){x(i,a,n),i=i.nextSibling;continue}let o=r[t+1];if(o&&y(i,o)){e.insertBefore(a,i),n.onAdded(a);continue}let s=i.nextSibling;s&&y(s,a)?(i.remove(),x(s,a,n),i=s.nextSibling):(e.replaceChild(a,i),n.onAdded(a),i=s)}for(;i;){let e=i.nextSibling;i.remove(),i=e}}let C=e=>{let t=!1,n=()=>{t||(t=!0,cancelAnimationFrame(r),clearTimeout(i),e())},r=requestAnimationFrame(n),i=setTimeout(n,50);return()=>{t=!0,cancelAnimationFrame(r),clearTimeout(i)}},w=(e=()=>{})=>(t,n)=>{let r=t.ownerDocument.createElementNS(n.namespaceURI??`http://www.w3.org/1999/xhtml`,`script`);for(let e of Array.from(n.attributes))try{r.setAttribute(e.name,e.value)}catch{}r.textContent=n.textContent;let i=r.getAttribute(`src`)??r.getAttribute(`href`);return i?new Promise(n=>{let a=setTimeout(()=>{e(`Script timed out: ${i}`,i),n()},15e3);r.addEventListener(`load`,()=>{clearTimeout(a),n()}),r.addEventListener(`error`,()=>{clearTimeout(a),e(`Script failed to load: ${i}`,i),n()}),t.replaceWith(r)}):(t.replaceWith(r),Promise.resolve())},T=e=>{if(e.nodeType!==Node.ELEMENT_NODE)return;let t=e;g.has(t.localName)||typeof t.animate!=`function`||t.animate([{opacity:0},{opacity:1}],{duration:200,easing:`ease-out`})};function E(e){let{root:t}=e,r=t.ownerDocument,i=e.schedule??C,a=e.runScript??w(e.onScriptError),o=``,s=`html`,c=!1,l=!1,u,d,f=[],p={onAdded(t){e.animate?.()&&T(t)}},m=i=>{u?.(),u=void 0;let a=i?o:_(o);if(a===d)return;d=a,s=n(o),t.dataset.kind=s;let c=v(r,a);f=c.scripts,S(t,c.fragment,p),e.onRender?.(s)},h=async()=>{let e=r.createTreeWalker(t,NodeFilter.SHOW_COMMENT),n=[];for(let t=e.nextNode();t;t=e.nextNode())t.nodeValue===`gf-script`&&n.push(t);let i=f;for(let e=0;e<n.length&&e<i.length;e++)await a(n[e],i[e]);i.length>0&&!l&&(l=!0,r.dispatchEvent(new Event(`DOMContentLoaded`,{bubbles:!0})),r.defaultView?.dispatchEvent(new Event(`load`)))};return{get source(){return o},get kind(){return s},get ended(){return c},get scriptsRan(){return l},write(e){if(c)throw Error(`Cannot write after end; use replace`);e&&(o+=e,u??=i(()=>{u=void 0,m(!1)}))},async end(){c||(c=!0,m(!0),await h())},async replace(e){c=!0,o=e,m(!0),await h()},flush(){u&&m(c)}}}let D=`http://www.w3.org/1999/xhtml`,O=`http://www.w3.org/2000/svg`,k=4096,A=/* @__PURE__ */ new Set([`script`,`noscript`,`template`]),j=e=>{let t=/* @__PURE__ */ new Map,n,r,i,a=()=>{if(n)return;i=e.createElement(`div`),i.setAttribute(`aria-hidden`,`true`),i.style.cssText=`all:initial;position:absolute;left:-99999px;top:0;visibility:hidden;contain:strict;width:0;height:0;`;let t=i.attachShadow({mode:`closed`});n=e.createElement(`div`),r=e.createElementNS(O,`svg`),n.appendChild(r),t.appendChild(n),e.body.appendChild(i)};return{get(i){let o=`${i.namespaceURI}|${i.localName}`,s=t.get(o);if(s)return s;a();let c=e.createElementNS(i.namespaceURI??D,i.localName);(i.namespaceURI===O?r:n).appendChild(c);let l=e.defaultView.getComputedStyle(c);s=/* @__PURE__ */ new Map;for(let e=0;e<l.length;e++){let t=l.item(e);s.set(t,l.getPropertyValue(t))}return c.remove(),t.set(o,s),s},dispose(){i?.remove()}}},M=(e,t,n)=>{let r=document.createElement(`canvas`);return r.width=Math.max(1,t),r.height=Math.max(1,n),r.getContext(`2d`).drawImage(e,0,0,t,n),r.toDataURL(`image/png`)},N=(e,t,n)=>{if(e.nodeType===Node.TEXT_NODE)return e.cloneNode();if(e.nodeType!==Node.ELEMENT_NODE)return null;let r=e;if(A.has(r.localName))return null;let i=r.ownerDocument.defaultView,a=i.getComputedStyle(r),o;if(r instanceof i.HTMLCanvasElement){o=r.ownerDocument.createElement(`img`);try{o.setAttribute(`src`,r.toDataURL(`image/png`))}catch{}}else if(r instanceof i.HTMLImageElement&&r.complete&&r.naturalWidth>0&&!r.src.startsWith(`data:`)){o=r.cloneNode(!1);try{o.setAttribute(`src`,M(r,r.naturalWidth,r.naturalHeight))}catch{}}else o=r.cloneNode(!1);r instanceof i.HTMLInputElement?r.type===`checkbox`||r.type===`radio`?r.checked?o.setAttribute(`checked`,``):o.removeAttribute(`checked`):o.setAttribute(`value`,r.value):r instanceof i.HTMLTextAreaElement?o.textContent=r.value:r instanceof i.HTMLSelectElement&&o.setAttribute(`data-gf-value`,r.value);let s=t.get(r),c=[];for(let e=0;e<a.length;e++){let t=a.item(e);if(t.startsWith(`--`))continue;let r=a.getPropertyValue(t);(r!==s.get(t)||n&&r!==n.getPropertyValue(t))&&c.push(`${t}:${r}`)}if((a.animationName!==`none`||a.transitionProperty!==`none`)&&c.push(`animation:none`,`transition:none`),o.setAttribute(`style`,c.join(`;`)),!(r instanceof i.HTMLTextAreaElement))for(let e of Array.from(r.childNodes)){let n=N(e,t,a);n&&o.appendChild(n)}if(r instanceof i.HTMLSelectElement)for(let e of Array.from(o.querySelectorAll(`option`)))(e.getAttribute(`value`)===r.value||e.textContent===r.value)&&e.setAttribute(`selected`,``);return o},P=e=>{let t=[];for(let n of Array.from(e.styleSheets)){let e;try{e=n.cssRules}catch{continue}for(let n of Array.from(e))n.constructor.name===`CSSFontFaceRule`&&!/url\\((?!\\s*[\"']?data:)/i.test(n.cssText)&&t.push(n.cssText)}return t.join(`\n`)},F=e=>{let t=e.getBoundingClientRect(),n=Math.max(1,Math.ceil(t.width));return{layoutWidth:n,width:Math.max(n,Math.ceil(e.scrollWidth)),height:Math.max(1,Math.ceil(Math.max(t.height,e.scrollHeight)))}},I=e=>new Promise((t,n)=>{let r=new Image;r.onload=()=>t(r),r.onerror=()=>n(/* @__PURE__ */ Error(`The serialized widget failed to rasterize`)),r.src=e});async function L(e,t={}){let n=e.ownerDocument,r=n.defaultView;await n.fonts?.ready;let{layoutWidth:i,width:a,height:o}=F(e),s=j(n),c;try{c=N(e,s,r.getComputedStyle(n.body))}finally{s.dispose()}let l=n.createElementNS(D,`div`);l.setAttribute(`style`,`width:${a}px;height:${o}px;overflow:hidden;`),c&&l.appendChild(c),c instanceof Element&&c.setAttribute(`style`,`${c.getAttribute(`style`)??``};width:${i}px;margin:0;`);let u=P(n),d=new XMLSerializer().serializeToString(l),f=`<svg xmlns=\"${O}\" width=\"${a}\" height=\"${o}\" viewBox=\"0 0 ${a} ${o}\"><foreignObject x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">`+(u?`<style xmlns=\"${D}\">${u.replace(/</g,`\\\\3c `)}</style>`:``)+d+`</foreignObject></svg>`,p=await I(`data:image/svg+xml;charset=utf-8,${encodeURIComponent(f)}`),m=t.scale??Math.min(r.devicePixelRatio||1,2),h=Math.max(.1,Math.min(m,k/a,k/o)),g=n.createElement(`canvas`);g.width=Math.round(a*h),g.height=Math.round(o*h);let _=g.getContext(`2d`);if(!_)throw Error(`Canvas 2D context is unavailable`);let v=t.background??r.getComputedStyle(n.documentElement).getPropertyValue(`--color-background`).trim();return v&&(_.fillStyle=v,_.fillRect(0,0,g.width,g.height)),_.scale(h,h),_.drawImage(p,0,0,a,o),{dataUrl:g.toDataURL(`image/png`),width:a,height:o}}function R(e){let t=e.getBoundingClientRect();return{width:Math.ceil(t.width),height:Math.ceil(t.height)}}function z(e){let t=R(e);return t.width>0?t:void 0}async function B(e){let t=[],n=async(e,n)=>{try{await n()!==!1&&t.push(e)}catch{}};return await n(`localStorage`,()=>e.localStorage.clear()),await n(`sessionStorage`,()=>e.sessionStorage.clear()),await n(`indexedDB`,async()=>{let t=e.indexedDB;if(typeof t?.databases!=`function`)return!1;let n=await t.databases();return await Promise.all(n.map(({name:e})=>e&&new Promise(n=>{let r=t.deleteDatabase(e);r.onsuccess=r.onerror=r.onblocked=()=>n()}))),!0}),await n(`cacheStorage`,async()=>{if(!e.caches)return!1;for(let t of await e.caches.keys())await e.caches.delete(t);return!0}),await n(`cookies`,()=>{for(let t of e.document.cookie.split(`;`)){let n=t.split(`=`)[0]?.trim();n&&(e.document.cookie=`${n}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`)}}),{cleared:t}}let V=/^--[\\w-]+$/;function H(t=window){let n=t.document,a=n.getElementById(`gf-config`),o=JSON.parse(a?.textContent??`{}`);a?.remove();let s=n.getElementById(`gf-root`)??n.body,u,d={},f=null,p=null,g=null,_={width:0,height:0},v=m(t,{onError:t=>u?.notify(e.error,t),onConsole:t=>{(t.level===`warn`||t.level===`error`)&&u?.notify(e.log,t)}}),y=t.matchMedia?.(`(prefers-reduced-motion: reduce)`),b=E({root:s,animate:()=>o.animate!==!1&&!y?.matches,onScriptError:(e,t)=>v.record({kind:`script`,message:e,...t?{source:t}:{}})}),x=()=>R(s),S,C=()=>{S=void 0;let t=z(s);if(!t)return;let r=d.containerDimensions?.maxHeight;n.documentElement.style.overflowY=typeof r==`number`&&t.height>r?`auto`:`hidden`,(t.width!==_.width||t.height!==_.height)&&(_=t,u?.notify(e.sizeChanged,t))},w=()=>{S??=t.requestAnimationFrame(C)};typeof t.ResizeObserver==`function`&&new t.ResizeObserver(w).observe(s);let T=e=>{let r=d.theme;d={...d,...e};let i=n.documentElement.style,a=!1;(e.theme===`light`||e.theme===`dark`)&&(i.colorScheme=e.theme,n.documentElement.dataset.theme=e.theme,a=e.theme!==r);let o=e.styles?.variables;if(o&&typeof o==`object`){for(let[e,t]of Object.entries(o))V.test(e)&&typeof t==`string`&&i.setProperty(e,t);a=!0}a&&t.dispatchEvent(new CustomEvent(`themechange`,{detail:{theme:d.theme,variables:d.styles?.variables}}))},D=()=>{if(!u)throw Error(`generative-frame is not connected to its host`);return u},O=t=>D().request(e.message,{role:`user`,content:[{type:`text`,text:String(t)}]}),k=t=>D().request(e.openLink,{url:String(t)}),A=(t,n)=>D().request(e.callTool,{name:t,...n===void 0?{}:{arguments:n}}),j=t=>D().request(e.requestDisplayMode,{mode:t}),M=t=>D().request(e.updateModelContext,t),N=async t=>{await D().request(e.copyText,{text:String(t)})},P={version:l,get theme(){return d.theme},get context(){return d},get toolInput(){return f},get toolOutput(){return p},get state(){return g},sendPrompt:O,openLink:k,callTool:A,requestDisplayMode:j,updateModelContext:M,copyText:N,setState:t=>{g=t,D().notify(e.widgetState,{state:t})},on(e,n){return t.addEventListener(e,n),()=>t.removeEventListener(e,n)}},F=t;F.genframe=P,F.sendPrompt=O,F.openLink=k,t.navigator.clipboard?Object.defineProperty(t.navigator.clipboard,\"writeText\",{configurable:!0,value:N}):Object.defineProperty(t.navigator,\"clipboard\",{configurable:!0,value:{writeText:N}}),t.open=(e=>(e!==void 0&&k(String(e)).catch(()=>{}),null)),n.addEventListener(`click`,e=>{if(e.defaultPrevented||!(e.target instanceof t.Element))return;let n=e.target.closest(`a[href]`);if(!n)return;let r=n.getAttribute(`href`)??``;if(r.startsWith(`#`))return;let i;try{i=new URL(r,o.hostOrigin)}catch{return}(i.protocol===`http:`||i.protocol===`https:`)&&(e.preventDefault(),k(i.href).catch(()=>{}))},!0);let I=()=>({size:x(),blank:h(s),errorCount:v.errors.length}),H=()=>({kind:b.kind,ended:b.ended,size:x(),blank:b.ended?h(s):!1,errors:[...v.errors],console:[...v.console]}),U=async(n,a)=>{let o=a??{};switch(n){case e.end:return await b.end(),w(),I();case e.replace:if(typeof o.code!=`string`)throw new i(r.invalidParams,`replace requires a string 'code'`);return await b.replace(o.code),w(),I();case e.screenshot:return b.flush(),L(s,o);case e.inspect:return b.flush(),H();case e.clearStorage:return B(t);default:throw new i(r.methodNotFound,`Unknown method: ${n}`)}},W=(n,r)=>{let i=r??{};switch(n){case e.write:typeof i.chunk==`string`&&b.write(i.chunk);return;case e.hostContextChanged:T(i);return;case e.toolInputPartial:case e.toolInput:{let r=i.arguments;f=r&&typeof r==`object`?r:{},t.dispatchEvent(new CustomEvent(`toolinput`,{detail:{arguments:f,partial:n===e.toolInputPartial}}));return}case e.toolResult:p=i.structuredContent===void 0?i:i.structuredContent,t.dispatchEvent(new CustomEvent(`toolresult`,{detail:i}));return;default:return}},G=(t,n)=>{u=c(t,{onRequest:U,onNotification:W}),g=n.state??null,T(n.context??{}),u.notify(e.ready,{version:l}),w();for(let t of v.errors)u.notify(e.error,t)},K=0,q=()=>{K++,K>100&&t.clearInterval(Y),t.parent.postMessage({type:`genframe:ready`},o.hostOrigin)},J=e=>{if(e.source!==t.parent||e.origin!==o.hostOrigin)return;let n=e.data;n?.type===`genframe:init`&&e.ports[0]&&(t.removeEventListener(`message`,J),t.clearInterval(Y),G(e.ports[0],n))};t.addEventListener(`message`,J);let Y=t.setInterval(q,100);q()}H()})();";