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

package/dist/vue/themeStore.js

@@ -0,0 +1,115 @@
+import { DEFAULT_LIGHT_TOKENS, readThemeTokens } from "../theme.js";
+// src/vue/themeStore.ts
+const THEME_ATTRIBUTES = [
+	"class",
+	"data-theme",
+	"data-mode"
+];
+const sameTokens = (a, b) => a.colorScheme === b.colorScheme && JSON.stringify(a.variables) === JSON.stringify(b.variables);
+/** Runs `callback` on the next animation frame and returns a cancel function. */
+const nextFrame = (callback) => {
+	if (typeof requestAnimationFrame === "function") {
+		const id = requestAnimationFrame(callback);
+		return () => cancelAnimationFrame(id);
+	}
+	const id = setTimeout(callback, 16);
+	return () => clearTimeout(id);
+};
+/**
+* One reader per (element, sources, options): every subscriber shares one
+* MutationObserver and one media listener, and a burst of mutations costs one
+* `readThemeTokens` per animation frame.
+*/
+function createThemeTokenStore(target, sources, options) {
+	const entry = {
+		tokens: void 0,
+		fresh: false,
+		listeners: /* @__PURE__ */ new Set(),
+		stop: void 0
+	};
+	const read = () => {
+		const next = readThemeTokens(target, sources);
+		if (entry.tokens && sameTokens(entry.tokens, next)) return false;
+		entry.tokens = next;
+		return true;
+	};
+	const start = () => {
+		let cancelFrame;
+		const update = () => {
+			cancelFrame = void 0;
+			if (read()) for (const listener of entry.listeners) listener();
+		};
+		const schedule = () => {
+			cancelFrame ??= nextFrame(update);
+		};
+		const doc = target.ownerDocument;
+		const observer = new MutationObserver(schedule);
+		observer.observe(doc.documentElement, {
+			attributes: true,
+			attributeFilter: [...THEME_ATTRIBUTES, "style"]
+		});
+		if (doc.body) observer.observe(doc.body, {
+			attributes: true,
+			attributeFilter: options.observeBodyStyle ? [...THEME_ATTRIBUTES, "style"] : THEME_ATTRIBUTES
+		});
+		if (target !== doc.documentElement && target !== doc.body) observer.observe(target, {
+			attributes: true,
+			attributeFilter: [...THEME_ATTRIBUTES, "style"]
+		});
+		const media = doc.defaultView?.matchMedia?.("(prefers-color-scheme: dark)");
+		media?.addEventListener("change", schedule);
+		schedule();
+		return () => {
+			observer.disconnect();
+			media?.removeEventListener("change", schedule);
+			cancelFrame?.();
+		};
+	};
+	return {
+		subscribe(listener) {
+			entry.listeners.add(listener);
+			entry.stop ??= start();
+			return () => {
+				entry.listeners.delete(listener);
+				if (entry.listeners.size === 0) {
+					entry.stop?.();
+					entry.stop = void 0;
+					entry.fresh = false;
+				}
+			};
+		},
+		getSnapshot() {
+			if (entry.stop && entry.tokens) return entry.tokens;
+			if (!entry.fresh) {
+				read();
+				entry.fresh = true;
+				queueMicrotask(() => {
+					entry.fresh = false;
+				});
+			}
+			return entry.tokens ?? DEFAULT_LIGHT_TOKENS;
+		},
+		get subscribers() {
+			return entry.listeners.size;
+		}
+	};
+}
+const stores = /* @__PURE__ */ new WeakMap();
+/** The shared store for this element, sources, and options. */
+function getThemeTokenStore(target, sources = {}, options = {}) {
+	const key = JSON.stringify([sources, options.observeBodyStyle ?? false]);
+	let byKey = stores.get(target);
+	if (!byKey) {
+		byKey = /* @__PURE__ */ new Map();
+		stores.set(target, byKey);
+	}
+	let store = byKey.get(key);
+	if (!store) {
+		store = createThemeTokenStore(target, sources, options);
+		byKey.set(key, store);
+	}
+	return store;
+}
+export { createThemeTokenStore, getThemeTokenStore };
+
+//# sourceMappingURL=themeStore.js.map

package/dist/vue/themeStore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeStore.js","names":[],"sources":["../../src/vue/themeStore.ts"],"sourcesContent":["import {\n  DEFAULT_LIGHT_TOKENS,\n  readThemeTokens,\n  type ThemeTokenSources,\n  type ThemeTokens,\n} from \"../theme\";\n\nexport type ThemeObserveOptions = {\n  /**\n   * Also re-read when `<body>`'s `style` attribute changes. Off by default,\n   * because scroll-lock and dialog libraries rewrite it constantly; turn it on\n   * when the app sets theme variables through body styles.\n   */\n  observeBodyStyle?: boolean;\n};\n\nconst THEME_ATTRIBUTES = [\"class\", \"data-theme\", \"data-mode\"];\n\nconst sameTokens = (a: ThemeTokens, b: ThemeTokens) =>\n  a.colorScheme === b.colorScheme &&\n  JSON.stringify(a.variables) === JSON.stringify(b.variables);\n\n/** Runs `callback` on the next animation frame and returns a cancel function. */\nconst nextFrame = (callback: () => void): (() => void) => {\n  if (typeof requestAnimationFrame === \"function\") {\n    const id = requestAnimationFrame(callback);\n    return () => cancelAnimationFrame(id);\n  }\n  const id = setTimeout(callback, 16);\n  return () => clearTimeout(id);\n};\n\ntype Entry = {\n  tokens: ThemeTokens | undefined;\n  /** Snapshot read while nobody subscribes; valid for the current task. */\n  fresh: boolean;\n  listeners: Set<() => void>;\n  stop: (() => void) | undefined;\n};\n\n/**\n * One reader per (element, sources, options): every subscriber shares one\n * MutationObserver and one media listener, and a burst of mutations costs one\n * `readThemeTokens` per animation frame.\n */\nexport function createThemeTokenStore(\n  target: Element,\n  sources: ThemeTokenSources,\n  options: ThemeObserveOptions,\n) {\n  const entry: Entry = {\n    tokens: undefined,\n    fresh: false,\n    listeners: new Set(),\n    stop: undefined,\n  };\n\n  const read = () => {\n    const next = readThemeTokens(target, sources);\n    if (entry.tokens && sameTokens(entry.tokens, next)) return false;\n    entry.tokens = next;\n    return true;\n  };\n\n  const start = () => {\n    let cancelFrame: (() => void) | undefined;\n    const update = () => {\n      cancelFrame = undefined;\n      if (read()) for (const listener of entry.listeners) listener();\n    };\n    const schedule = () => {\n      cancelFrame ??= nextFrame(update);\n    };\n    const doc = target.ownerDocument;\n    const observer = new MutationObserver(schedule);\n    observer.observe(doc.documentElement, {\n      attributes: true,\n      attributeFilter: [...THEME_ATTRIBUTES, \"style\"],\n    });\n    if (doc.body) {\n      observer.observe(doc.body, {\n        attributes: true,\n        attributeFilter: options.observeBodyStyle\n          ? [...THEME_ATTRIBUTES, \"style\"]\n          : THEME_ATTRIBUTES,\n      });\n    }\n    if (target !== doc.documentElement && target !== doc.body) {\n      observer.observe(target, {\n        attributes: true,\n        attributeFilter: [...THEME_ATTRIBUTES, \"style\"],\n      });\n    }\n    const media = doc.defaultView?.matchMedia?.(\"(prefers-color-scheme: dark)\");\n    media?.addEventListener(\"change\", schedule);\n    // Anything that changed between the last read and now.\n    schedule();\n    return () => {\n      observer.disconnect();\n      media?.removeEventListener(\"change\", schedule);\n      cancelFrame?.();\n    };\n  };\n\n  return {\n    subscribe(listener: () => void) {\n      entry.listeners.add(listener);\n      entry.stop ??= start();\n      return () => {\n        entry.listeners.delete(listener);\n        if (entry.listeners.size === 0) {\n          entry.stop?.();\n          entry.stop = undefined;\n          entry.fresh = false;\n        }\n      };\n    },\n    getSnapshot(): ThemeTokens {\n      if (entry.stop && entry.tokens) return entry.tokens;\n      if (!entry.fresh) {\n        read();\n        entry.fresh = true;\n        queueMicrotask(() => {\n          entry.fresh = false;\n        });\n      }\n      return entry.tokens ?? DEFAULT_LIGHT_TOKENS;\n    },\n    get subscribers() {\n      return entry.listeners.size;\n    },\n  };\n}\n\nexport type ThemeTokenStore = ReturnType<typeof createThemeTokenStore>;\n\nconst stores = new WeakMap<Element, Map<string, ThemeTokenStore>>();\n\n/** The shared store for this element, sources, and options. */\nexport function getThemeTokenStore(\n  target: Element,\n  sources: ThemeTokenSources = {},\n  options: ThemeObserveOptions = {},\n): ThemeTokenStore {\n  const key = JSON.stringify([sources, options.observeBodyStyle ?? false]);\n  let byKey = stores.get(target);\n  if (!byKey) {\n    byKey = new Map();\n    stores.set(target, byKey);\n  }\n  let store = byKey.get(key);\n  if (!store) {\n    store = createThemeTokenStore(target, sources, options);\n    byKey.set(key, store);\n  }\n  return store;\n}\n"],"mappings":"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"}

package/dist/vue/useThemeTokens.d.ts

@@ -0,0 +1,6 @@
+import { type MaybeRefOrGetter, type ShallowRef } from "vue";
+import { type ThemeTokenSources, type ThemeTokens } from "../theme.js";
+import { type ThemeObserveOptions } from "./themeStore.js";
+/** One shared observer per element/source/options; subscriptions follow the component lifecycle. */
+export declare function useThemeTokens(element?: MaybeRefOrGetter<Element | null | undefined>, sources?: ThemeTokenSources, options?: ThemeObserveOptions): Readonly<ShallowRef<ThemeTokens>>;
+//# sourceMappingURL=useThemeTokens.d.ts.map

package/dist/vue/useThemeTokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThemeTokens.d.ts","mappings":"AAAA,OAAO,EAUL,KAAK,gBAAgB,EACrB,KAAK,UAAU,EAChB,MAAM,KAAK;AACZ,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,WAAW,EACjB,MAAM,aAAU;AACjB,OAAO,EAAsB,KAAK,mBAAmB,EAAE,MAAM,iBAAc;AAC3E;AACA,wBAAgB,cAAc,CAC5B,OAAO,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,EACtD,OAAO,CAAC,EAAE,iBAAiB,EAC3B,OAAO,GAAE,mBAAwB,GAChC,QAAQ,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC","names":[],"ignoreList":[],"sources":["../../src/vue/useThemeTokens.ts"],"sourcesContent":[null]}

package/dist/vue/useThemeTokens.js

@@ -0,0 +1,49 @@
+import { DEFAULT_LIGHT_TOKENS } from "../theme.js";
+import { getThemeTokenStore } from "./themeStore.js";
+import { onActivated, onBeforeUnmount, onDeactivated, onMounted, onServerPrefetch, readonly, shallowRef, toValue, watch } from "vue";
+// src/vue/useThemeTokens.ts
+/** One shared observer per element/source/options; subscriptions follow the component lifecycle. */
+function useThemeTokens(element, sources, options = {}) {
+	const target = () => toValue(element) ?? (typeof document === "undefined" ? void 0 : document.documentElement);
+	const tokens = shallowRef(target() ? getThemeTokenStore(target(), sources, options).getSnapshot() : DEFAULT_LIGHT_TOKENS);
+	let stop;
+	let active = false;
+	const disconnect = () => {
+		stop?.();
+		stop = void 0;
+	};
+	const connect = () => {
+		disconnect();
+		const current = target();
+		if (!active || !current) return;
+		const store = getThemeTokenStore(current, sources, options);
+		tokens.value = store.getSnapshot();
+		stop = store.subscribe(() => {
+			tokens.value = store.getSnapshot();
+		});
+	};
+	onServerPrefetch(() => {
+		tokens.value = DEFAULT_LIGHT_TOKENS;
+	});
+	onMounted(() => {
+		active = true;
+		connect();
+	});
+	onActivated(() => {
+		active = true;
+		connect();
+	});
+	onDeactivated(() => {
+		active = false;
+		disconnect();
+	});
+	onBeforeUnmount(() => {
+		active = false;
+		disconnect();
+	});
+	watch(target, connect, { flush: "post" });
+	return readonly(tokens);
+}
+export { useThemeTokens };
+
+//# sourceMappingURL=useThemeTokens.js.map

package/dist/vue/useThemeTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThemeTokens.js","names":[],"sources":["../../src/vue/useThemeTokens.ts"],"sourcesContent":["import {\n  onActivated,\n  onBeforeUnmount,\n  onDeactivated,\n  onMounted,\n  onServerPrefetch,\n  readonly,\n  shallowRef,\n  toValue,\n  watch,\n  type MaybeRefOrGetter,\n  type ShallowRef,\n} from \"vue\";\nimport {\n  DEFAULT_LIGHT_TOKENS,\n  type ThemeTokenSources,\n  type ThemeTokens,\n} from \"../theme\";\nimport { getThemeTokenStore, type ThemeObserveOptions } from \"./themeStore\";\n/** One shared observer per element/source/options; subscriptions follow the component lifecycle. */\nexport function useThemeTokens(\n  element?: MaybeRefOrGetter<Element | null | undefined>,\n  sources?: ThemeTokenSources,\n  options: ThemeObserveOptions = {},\n): Readonly<ShallowRef<ThemeTokens>> {\n  const target = () =>\n    toValue(element) ??\n    (typeof document === \"undefined\" ? undefined : document.documentElement);\n  const tokens = shallowRef(\n    target()\n      ? getThemeTokenStore(target()!, sources, options).getSnapshot()\n      : DEFAULT_LIGHT_TOKENS,\n  );\n  let stop: (() => void) | undefined;\n  let active = false;\n  const disconnect = () => {\n    stop?.();\n    stop = undefined;\n  };\n  const connect = () => {\n    disconnect();\n    const current = target();\n    if (!active || !current) return;\n    const store = getThemeTokenStore(current, sources, options);\n    tokens.value = store.getSnapshot();\n    stop = store.subscribe(() => {\n      tokens.value = store.getSnapshot();\n    });\n  };\n  onServerPrefetch(() => {\n    tokens.value = DEFAULT_LIGHT_TOKENS;\n  });\n  onMounted(() => {\n    active = true;\n    connect();\n  });\n  onActivated(() => {\n    active = true;\n    connect();\n  });\n  onDeactivated(() => {\n    active = false;\n    disconnect();\n  });\n  onBeforeUnmount(() => {\n    active = false;\n    disconnect();\n  });\n  watch(target, connect, { flush: \"post\" });\n  return readonly(tokens);\n}\n"],"mappings":";;;;;AAoBA,SAAgB,eACd,SACA,SACA,UAA+B,CAAC,GACG;CACnC,MAAM,eACJ,QAAQ,OAAO,MACd,OAAO,aAAa,cAAc,KAAA,IAAY,SAAS;CAC1D,MAAM,SAAS,WACb,OAAO,IACH,mBAAmB,OAAO,GAAI,SAAS,OAAO,CAAC,CAAC,YAAY,IAC5D,oBACN;CACA,IAAI;CACJ,IAAI,SAAS;CACb,MAAM,mBAAmB;EACvB,OAAO;EACP,OAAO,KAAA;CACT;CACA,MAAM,gBAAgB;EACpB,WAAW;EACX,MAAM,UAAU,OAAO;EACvB,IAAI,CAAC,UAAU,CAAC,SAAS;EACzB,MAAM,QAAQ,mBAAmB,SAAS,SAAS,OAAO;EAC1D,OAAO,QAAQ,MAAM,YAAY;EACjC,OAAO,MAAM,gBAAgB;GAC3B,OAAO,QAAQ,MAAM,YAAY;EACnC,CAAC;CACH;CACA,uBAAuB;EACrB,OAAO,QAAQ;CACjB,CAAC;CACD,gBAAgB;EACd,SAAS;EACT,QAAQ;CACV,CAAC;CACD,kBAAkB;EAChB,SAAS;EACT,QAAQ;CACV,CAAC;CACD,oBAAoB;EAClB,SAAS;EACT,WAAW;CACb,CAAC;CACD,sBAAsB;EACpB,SAAS;EACT,WAAW;CACb,CAAC;CACD,MAAM,QAAQ,SAAS,EAAE,OAAO,OAAO,CAAC;CACxC,OAAO,SAAS,MAAM;AACxB"}

package/dist/vue/useWidget.d.ts

@@ -0,0 +1,10 @@
+import { type ComponentPublicInstance, type MaybeRefOrGetter, type ShallowRef } from "vue";
+import { type CreateWidgetOptions, type WidgetHandle } from "../widget.js";
+export type UseWidgetOptions = Omit<CreateWidgetOptions, "container" | "code">;
+export type UseWidgetResult = {
+    ref: (element: Element | ComponentPublicInstance | null) => void;
+    widget: Readonly<ShallowRef<WidgetHandle | null>>;
+};
+/** Mount options are read per activation. Handlers and tokens follow the latest options. */
+export declare function useWidget(options?: MaybeRefOrGetter<UseWidgetOptions>): UseWidgetResult;
+//# sourceMappingURL=useWidget.d.ts.map

package/dist/vue/useWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWidget.d.ts","mappings":"AAAA,OAAO,EASL,KAAK,uBAAuB,EAC5B,KAAK,gBAAgB,EACrB,KAAK,UAAU,EAChB,MAAM,KAAK;AAEZ,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,YAAY,EAElB,MAAM,cAAW;AAElB,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,EAAE,WAAW,GAAG,MAAM,CAAC;AAC9E,MAAM,MAAM,eAAe,GAAG;IAC5B,GAAG,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,uBAAuB,GAAG,IAAI,KAAK,IAAI;IAChE,MAAM,EAAE,QAAQ,CAAC,UAAU,CAAC,YAAY,GAAG,IAAI,CAAC,CAAC;CAClD;AAgBD;AACA,wBAAgB,SAAS,CACvB,OAAO,GAAE,gBAAgB,CAAC,gBAAgB,CAAM,GAC/C,eAAe","names":[],"ignoreList":[],"sources":["../../src/vue/useWidget.ts"],"sourcesContent":[null]}

package/dist/vue/useWidget.js

@@ -0,0 +1,81 @@
+import { RPC_ERROR, RpcError } from "../rpc.js";
+import { createWidget } from "../widget.js";
+import { onActivated, onBeforeUnmount, onDeactivated, onMounted, shallowReadonly, shallowRef, toValue, watch } from "vue";
+// src/vue/useWidget.ts
+const HANDLER_KEYS = Object.keys({
+	onPrompt: true,
+	onMessage: true,
+	onOpenLink: true,
+	onCallTool: true,
+	onInitialized: true,
+	onRequestDisplayMode: true,
+	onUpdateModelContext: true,
+	onCopyText: true,
+	onWidgetState: true,
+	onResize: true,
+	onError: true,
+	onLog: true
+});
+/** Mount options are read per activation. Handlers and tokens follow the latest options. */
+function useWidget(options = {}) {
+	const element = shallowRef(null);
+	const active = shallowRef(false);
+	const widget = shallowRef(null);
+	let widgetState;
+	let sentTokens;
+	onMounted(() => {
+		active.value = true;
+	});
+	onActivated(() => {
+		active.value = true;
+	});
+	onDeactivated(() => {
+		active.value = false;
+	});
+	onBeforeUnmount(() => {
+		active.value = false;
+	});
+	watch([element, active], ([container, enabled], _previous, onCleanup) => {
+		if (!container || !enabled) return;
+		const initial = toValue(options);
+		const handlers = {};
+		for (const key of HANDLER_KEYS) {
+			if (!initial[key]) continue;
+			handlers[key] = (...args) => {
+				const handler = toValue(options)[key];
+				if (!handler) throw new RpcError(RPC_ERROR.methodNotFound, `${key} is no longer handled`);
+				return handler(...args);
+			};
+		}
+		const handle = createWidget({
+			...initial,
+			...handlers,
+			...widgetState ? { initialState: widgetState.value } : {},
+			onWidgetState: (state) => {
+				widgetState = { value: state };
+				toValue(options).onWidgetState?.(state);
+			},
+			container
+		});
+		sentTokens = initial.tokens;
+		widget.value = handle;
+		onCleanup(() => {
+			widget.value = null;
+			handle.dispose();
+		});
+	}, { flush: "sync" });
+	watch(() => toValue(options).tokens, (tokens) => {
+		if (!widget.value || !tokens || sentTokens === tokens) return;
+		sentTokens = tokens;
+		widget.value.setTheme(tokens);
+	}, { flush: "post" });
+	return {
+		ref: (next) => {
+			element.value = next instanceof HTMLElement ? next : null;
+		},
+		widget: shallowReadonly(widget)
+	};
+}
+export { useWidget };
+
+//# sourceMappingURL=useWidget.js.map

package/dist/vue/useWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWidget.js","names":[],"sources":["../../src/vue/useWidget.ts"],"sourcesContent":["import {\n  onActivated,\n  onBeforeUnmount,\n  onDeactivated,\n  onMounted,\n  shallowReadonly,\n  shallowRef,\n  toValue,\n  watch,\n  type ComponentPublicInstance,\n  type MaybeRefOrGetter,\n  type ShallowRef,\n} from \"vue\";\nimport { RPC_ERROR, RpcError } from \"../rpc\";\nimport {\n  createWidget,\n  type CreateWidgetOptions,\n  type WidgetHandle,\n  type WidgetHandlers,\n} from \"../widget\";\n\nexport type UseWidgetOptions = Omit<CreateWidgetOptions, \"container\" | \"code\">;\nexport type UseWidgetResult = {\n  ref: (element: Element | ComponentPublicInstance | null) => void;\n  widget: Readonly<ShallowRef<WidgetHandle | null>>;\n};\nconst HANDLER_KEYS = Object.keys({\n  onPrompt: true,\n  onMessage: true,\n  onOpenLink: true,\n  onCallTool: true,\n  onInitialized: true,\n  onRequestDisplayMode: true,\n  onUpdateModelContext: true,\n  onCopyText: true,\n  onWidgetState: true,\n  onResize: true,\n  onError: true,\n  onLog: true,\n} satisfies Record<keyof WidgetHandlers, true>) as (keyof WidgetHandlers)[];\n\n/** Mount options are read per activation. Handlers and tokens follow the latest options. */\nexport function useWidget(\n  options: MaybeRefOrGetter<UseWidgetOptions> = {},\n): UseWidgetResult {\n  const element = shallowRef<HTMLElement | null>(null);\n  const active = shallowRef(false);\n  const widget = shallowRef<WidgetHandle | null>(null);\n  let widgetState: { value: unknown } | undefined;\n  let sentTokens: UseWidgetOptions[\"tokens\"];\n  onMounted(() => {\n    active.value = true;\n  });\n  onActivated(() => {\n    active.value = true;\n  });\n  onDeactivated(() => {\n    active.value = false;\n  });\n  onBeforeUnmount(() => {\n    active.value = false;\n  });\n  watch(\n    [element, active],\n    ([container, enabled], _previous, onCleanup) => {\n      if (!container || !enabled) return;\n      const initial = toValue(options);\n      const handlers: Record<string, unknown> = {};\n      for (const key of HANDLER_KEYS) {\n        if (!initial[key]) continue;\n        handlers[key] = (...args: unknown[]) => {\n          const handler = toValue(options)[key] as\n            | ((...args: unknown[]) => unknown)\n            | undefined;\n          if (!handler)\n            throw new RpcError(\n              RPC_ERROR.methodNotFound,\n              `${key} is no longer handled`,\n            );\n          return handler(...args);\n        };\n      }\n      const handle = createWidget({\n        ...initial,\n        ...(handlers as WidgetHandlers),\n        ...(widgetState ? { initialState: widgetState.value } : {}),\n        onWidgetState: (state) => {\n          widgetState = { value: state };\n          toValue(options).onWidgetState?.(state);\n        },\n        container,\n      });\n      sentTokens = initial.tokens;\n      widget.value = handle;\n      onCleanup(() => {\n        widget.value = null;\n        handle.dispose();\n      });\n    },\n    { flush: \"sync\" },\n  );\n  watch(\n    () => toValue(options).tokens,\n    (tokens) => {\n      if (!widget.value || !tokens || sentTokens === tokens) return;\n      sentTokens = tokens;\n      widget.value.setTheme(tokens);\n    },\n    { flush: \"post\" },\n  );\n  return {\n    ref: (next) => {\n      element.value = next instanceof HTMLElement ? next : null;\n    },\n    widget: shallowReadonly(widget),\n  };\n}\n"],"mappings":";;;;AA0BA,MAAM,eAAe,OAAO,KAAK;CAC/B,UAAU;CACV,WAAW;CACX,YAAY;CACZ,YAAY;CACZ,eAAe;CACf,sBAAsB;CACtB,sBAAsB;CACtB,YAAY;CACZ,eAAe;CACf,UAAU;CACV,SAAS;CACT,OAAO;AACT,CAA8C;;AAG9C,SAAgB,UACd,UAA8C,CAAC,GAC9B;CACjB,MAAM,UAAU,WAA+B,IAAI;CACnD,MAAM,SAAS,WAAW,KAAK;CAC/B,MAAM,SAAS,WAAgC,IAAI;CACnD,IAAI;CACJ,IAAI;CACJ,gBAAgB;EACd,OAAO,QAAQ;CACjB,CAAC;CACD,kBAAkB;EAChB,OAAO,QAAQ;CACjB,CAAC;CACD,oBAAoB;EAClB,OAAO,QAAQ;CACjB,CAAC;CACD,sBAAsB;EACpB,OAAO,QAAQ;CACjB,CAAC;CACD,MACE,CAAC,SAAS,MAAM,IACf,CAAC,WAAW,UAAU,WAAW,cAAc;EAC9C,IAAI,CAAC,aAAa,CAAC,SAAS;EAC5B,MAAM,UAAU,QAAQ,OAAO;EAC/B,MAAM,WAAoC,CAAC;EAC3C,KAAK,MAAM,OAAO,cAAc;GAC9B,IAAI,CAAC,QAAQ,MAAM;GACnB,SAAS,QAAQ,GAAG,SAAoB;IACtC,MAAM,UAAU,QAAQ,OAAO,CAAC,CAAC;IAGjC,IAAI,CAAC,SACH,MAAM,IAAI,SACR,UAAU,gBACV,GAAG,IAAI,sBACT;IACF,OAAO,QAAQ,GAAG,IAAI;GACxB;EACF;EACA,MAAM,SAAS,aAAa;GAC1B,GAAG;GACH,GAAI;GACJ,GAAI,cAAc,EAAE,cAAc,YAAY,MAAM,IAAI,CAAC;GACzD,gBAAgB,UAAU;IACxB,cAAc,EAAE,OAAO,MAAM;IAC7B,QAAQ,OAAO,CAAC,CAAC,gBAAgB,KAAK;GACxC;GACA;EACF,CAAC;EACD,aAAa,QAAQ;EACrB,OAAO,QAAQ;EACf,gBAAgB;GACd,OAAO,QAAQ;GACf,OAAO,QAAQ;EACjB,CAAC;CACH,GACA,EAAE,OAAO,OAAO,CAClB;CACA,YACQ,QAAQ,OAAO,CAAC,CAAC,SACtB,WAAW;EACV,IAAI,CAAC,OAAO,SAAS,CAAC,UAAU,eAAe,QAAQ;EACvD,aAAa;EACb,OAAO,MAAM,SAAS,MAAM;CAC9B,GACA,EAAE,OAAO,OAAO,CAClB;CACA,OAAO;EACL,MAAM,SAAS;GACb,QAAQ,QAAQ,gBAAgB,cAAc,OAAO;EACvD;EACA,QAAQ,gBAAgB,MAAM;CAChC;AACF"}

package/dist/vue.d.ts

@@ -0,0 +1,5 @@
+export { Widget, type WidgetProps } from "./vue/Widget.js";
+export { useWidget, type UseWidgetOptions, type UseWidgetResult, } from "./vue/useWidget.js";
+export { useThemeTokens } from "./vue/useThemeTokens.js";
+export type { ThemeObserveOptions } from "./vue/themeStore.js";
+//# sourceMappingURL=vue.d.ts.map

package/dist/vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue.d.ts","mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAc;AACvD,OAAO,EACL,SAAS,EACT,KAAK,gBAAgB,EACrB,KAAK,eAAe,GACrB,MAAM,oBAAiB;AACxB,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAsB;AACrD,YAAY,EAAE,mBAAmB,EAAE,MAAM,qBAAkB","names":[],"ignoreList":[],"sources":["../src/vue.ts"],"sourcesContent":[null]}

package/dist/vue.js

@@ -0,0 +1,4 @@
+import { useThemeTokens } from "./vue/useThemeTokens.js";
+import { useWidget } from "./vue/useWidget.js";
+import { Widget } from "./vue/Widget.js";
+export { Widget, useThemeTokens, useWidget };

package/dist/widget.d.ts

@@ -0,0 +1,129 @@
+import { SafeContentFrame } from "@ulearning/ai-safe-content-frame";
+import type { CspOptions } from "./csp.js";
+import { type ClearStorageResult, type ConsoleEntry, type DisplayMode, type EndResult, type FrameInspection, type HostContext, type McpAppInitializeParams, type ScreenshotOptions, type WidgetError, type WidgetSize } from "./protocol.js";
+import { type ThemeTokens } from "./theme.js";
+export type UiMessageParams = {
+    role?: string;
+    content?: {
+        type: string;
+        text?: string;
+    }[];
+    [key: string]: unknown;
+};
+export type ToolCallRequest = {
+    name: string;
+    arguments?: Record<string, unknown>;
+};
+export type WidgetHandlers = {
+    /** A widget called `sendPrompt(text)`, possibly without a user gesture; let the user review it before it is sent as their message. */
+    onPrompt?: (text: string) => unknown;
+    /** Raw MCP Apps `ui/message`. Takes precedence over `onPrompt`. */
+    onMessage?: (params: UiMessageParams) => unknown;
+    /** Defaults to opening an `http(s)` URL in a new tab with `noopener`. */
+    onOpenLink?: (url: string) => unknown;
+    onCallTool?: (call: ToolCallRequest) => unknown;
+    onInitialized?: (params: McpAppInitializeParams) => void;
+    onRequestDisplayMode?: (request: {
+        mode: DisplayMode;
+    }) => unknown;
+    onUpdateModelContext?: (params: unknown) => unknown;
+    /** A widget called `genframe.copyText(text)` or `navigator.clipboard.writeText(text)`. The request alone does not show the user asked for the copy, so confirm with them, such as through a Copy control the host renders, before writing the clipboard. Without it, copying fails in the widget. */
+    onCopyText?: (text: string) => unknown;
+    onWidgetState?: (state: unknown) => void;
+    onResize?: (size: WidgetSize) => void;
+    onError?: (error: WidgetError) => void;
+    onLog?: (entry: ConsoleEntry) => void;
+};
+export type CreateWidgetOptions = WidgetHandlers & {
+    container: HTMLElement;
+    /** Scopes the frame origin, see `SafeContentFrame`. Defaults to `"generative-frame"`. */
+    product?: string;
+    /** A preconfigured `SafeContentFrame`, for example with `useShadowDom`. */
+    frame?: SafeContentFrame;
+    /**
+     * Loads the Safe Content Frame shim from a domain you host instead of
+     * the default service. Widgets are isolated from your app and from each
+     * other only when the domain is a public suffix on the Public Suffix List.
+     */
+    unsafeShimDomain?: string;
+    /**
+     * Renders in a `sandbox="allow-scripts"` frame with an opaque (`null`)
+     * origin instead of Safe Content Frame: no shim domain, and no storage or
+     * cookies. Cannot be combined with `id`, `frame`, or `unsafeShimDomain`.
+     */
+    opaqueOrigin?: boolean;
+    /**
+     * Gives the widget a stable origin, so its localStorage, IndexedDB, and
+     * cookies persist across reloads for this id on this host origin. Choose
+     * it on the host (never from model output); widgets with the same id share
+     * storage. Without an id, every frame gets a fresh origin.
+     */
+    id?: string;
+    csp?: CspOptions | string;
+    tokens?: ThemeTokens;
+    /** Extra host context fields (locale, display mode, …) merged over the theme. */
+    context?: HostContext;
+    animate?: boolean;
+    css?: string;
+    /** The iframe never grows past this height; taller content scrolls inside it. */
+    maxHeight?: number;
+    minHeight?: number;
+    readyTimeoutMs?: number;
+    initialState?: unknown;
+    /** Complete code to render immediately, as `write(code)` then `end()`. */
+    code?: string;
+};
+export type WidgetInspection = FrameInspection & {
+    code: string;
+};
+export type Screenshot = {
+    dataUrl: string;
+    width: number;
+    height: number;
+};
+export type WidgetEventMap = {
+    ready: undefined;
+    resize: WidgetSize;
+    error: WidgetError;
+    log: ConsoleEntry;
+    end: EndResult;
+};
+export type WidgetHandle = {
+    /** Resolves once the frame runtime is connected; rejects if it never connects. */
+    readonly ready: Promise<void>;
+    /** All code written so far. */
+    readonly code: string;
+    readonly ended: boolean;
+    readonly iframe: HTMLIFrameElement | undefined;
+    /** Appends streamed code. Rendering is coalesced to animation frames. */
+    write(chunk: string): void;
+    /** Marks the code complete and runs held scripts in order. */
+    end(): Promise<EndResult>;
+    /** Renders new complete code, morphing in place or remounting when scripts already ran. A newer call removes a remount still in progress, whose promise rejects. */
+    replace(code: string): Promise<EndResult>;
+    setTheme(tokens: ThemeTokens): void;
+    setContext(context: HostContext): void;
+    notifyToolInput(args: Record<string, unknown>, options?: {
+        partial?: boolean;
+    }): void;
+    notifyToolResult(result: unknown): void;
+    screenshot(options?: ScreenshotOptions): Promise<Screenshot>;
+    inspect(): Promise<WidgetInspection>;
+    on<K extends keyof WidgetEventMap>(event: K, listener: (payload: WidgetEventMap[K]) => void): () => void;
+    dispose(): void;
+};
+/** The Safe Content Frame salt behind a widget id's stable origin. */
+export declare const widgetStorageSalt: (id: string) => string;
+/**
+ * Mounts a widget frame in `container`. The frame loads a bootstrap document
+ * once through Safe Content Frame; code then streams in over a private
+ * `MessagePort`, so every chunk renders without reloading the frame.
+ */
+export declare function createWidget(options: CreateWidgetOptions): WidgetHandle;
+/**
+ * Clears what widgets with this `id` stored (localStorage, sessionStorage,
+ * IndexedDB, Cache Storage, and cookies) by loading a hidden frame on the
+ * same origin. Resolves with the storage kinds that were cleared.
+ */
+export declare function clearWidgetStorage(id: string, options?: Pick<CreateWidgetOptions, "product" | "unsafeShimDomain" | "readyTimeoutMs">): Promise<ClearStorageResult>;
+//# sourceMappingURL=widget.d.ts.map

package/dist/widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"widget.d.ts","mappings":"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","names":[],"ignoreList":[],"sources":["../src/widget.ts"],"sourcesContent":[null]}