@runtypelabs/persona 4.7.0 → 4.8.0

package/src/utils/spinner.ts

@@ -0,0 +1,45 @@
+import { cx } from "./dom";
+
+const SVG_NS = "http://www.w3.org/2000/svg";
+
+/**
+ * Reusable icon spinner: a small SVG ring with a faint full track plus a
+ * rotating arc.
+ *
+ * Icon-first loading is the norm for preview surfaces (Sandpack, YouTube/Figma/
+ * CodePen embeds, ChatGPT/Claude/v0) and every major design system (Apple HIG,
+ * Material, Carbon, Polaris, Geist); text-only "Loading…" is used by none, and
+ * HIG explicitly warns against the vague word "loading". So the default preview
+ * indicator is this spinner, with any work-naming label added only later as an
+ * escalation. The arc spins via a GPU-friendly `transform: rotate` keyframe
+ * (see `.persona-spinner` in widget.css); under `prefers-reduced-motion` the
+ * rotation stops and the static arc still reads as a progress ring.
+ *
+ * Structure and animation live in CSS (class `persona-spinner`); geometry here
+ * is viewBox-relative so the rendered size follows `--persona-artifact-spinner-size`.
+ */
+export function createSpinner(className?: string): SVGSVGElement {
+  const svg = document.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("class", cx("persona-spinner", className));
+  svg.setAttribute("viewBox", "0 0 24 24");
+  // Decorative: the loading state is announced by surrounding copy/labels, so
+  // the spinner itself must not add redundant noise to the accessibility tree.
+  svg.setAttribute("aria-hidden", "true");
+  svg.setAttribute("focusable", "false");
+
+  const track = document.createElementNS(SVG_NS, "circle");
+  track.setAttribute("class", "persona-spinner-track");
+  track.setAttribute("cx", "12");
+  track.setAttribute("cy", "12");
+  track.setAttribute("r", "9");
+
+  const arc = document.createElementNS(SVG_NS, "circle");
+  arc.setAttribute("class", "persona-spinner-arc");
+  arc.setAttribute("cx", "12");
+  arc.setAttribute("cy", "12");
+  arc.setAttribute("r", "9");
+
+  svg.appendChild(track);
+  svg.appendChild(arc);
+  return svg;
+}

package/src/utils/theme.test.ts

@@ -192,6 +192,38 @@ describe('theme utils', () => {
     expect(surfaceVars['--persona-artifact-toolbar-bg']).toBe('#f9fafb');
   });
 
+  it('maps artifact inline chrome tokens to dedicated CSS variables (with semantic refs)', () => {
+    const theme = createTheme({
+      components: {
+        artifact: {
+          inline: {
+            background: 'semantic.colors.surface',
+            border: '1px solid #e5e7eb',
+            borderRadius: '12px',
+            chromeBackground: 'semantic.colors.container',
+            chromeBorder: '#e5e7eb',
+            titleColor: 'palette.colors.gray.900',
+            mutedColor: 'palette.colors.gray.500',
+            frameHeight: '400px',
+          },
+        },
+      },
+    } as any);
+
+    const cssVars = themeToCssVariables(theme);
+
+    // semantic.* refs resolve to concrete colors; plain values pass through.
+    // surface and container both default to gray.50.
+    expect(cssVars['--persona-artifact-inline-bg']).toBe('#f9fafb');
+    expect(cssVars['--persona-artifact-inline-border']).toBe('1px solid #e5e7eb');
+    expect(cssVars['--persona-artifact-inline-radius']).toBe('12px');
+    expect(cssVars['--persona-artifact-inline-chrome-bg']).toBe('#f9fafb');
+    expect(cssVars['--persona-artifact-inline-chrome-border']).toBe('#e5e7eb');
+    expect(cssVars['--persona-artifact-inline-title-color']).toBe('#111827');
+    expect(cssVars['--persona-artifact-inline-muted-color']).toBe('#6b7280');
+    expect(cssVars['--persona-artifact-inline-frame-height']).toBe('400px');
+  });
+
   it('maps component bubble shadow tokens to consumer CSS variables', () => {
     const cfg = {
       colorScheme: 'light' as const,
@@ -305,4 +337,20 @@ describe('theme utils', () => {
       '0 1px 2px rgba(255,0,0,0.5)'
     );
   });
+
+  it('stamps the resolved color scheme on the root so scheme-scoped CSS (syntax palette) follows the widget, not the OS', () => {
+    const el = document.createElement('div');
+    applyThemeVariables(el, { colorScheme: 'light' });
+    expect(el.getAttribute('data-persona-color-scheme')).toBe('light');
+    applyThemeVariables(el, { colorScheme: 'dark' });
+    expect(el.getAttribute('data-persona-color-scheme')).toBe('dark');
+  });
+
+  it('maps components.code.background to --persona-code-bg', () => {
+    const theme = createTheme({
+      components: { code: { background: '#fafafa' } },
+    });
+    const cssVars = themeToCssVariables(theme);
+    expect(cssVars['--persona-code-bg']).toBe('#fafafa');
+  });
 });

package/src/utils/theme.ts

@@ -194,6 +194,13 @@ export const applyThemeVariables = (
   for (const [name, value] of Object.entries(cssVars)) {
     element.style.setProperty(name, value);
   }
+
+  // Stamp the resolved scheme so stylesheet rules can key scheme-specific
+  // defaults (e.g. the syntax-highlight palette) off the widget's own color
+  // scheme instead of the OS prefers-color-scheme, which diverges whenever a
+  // host pins colorScheme. Re-applied on every theme application, so live
+  // config updates and theme-observer callbacks keep it current.
+  element.setAttribute("data-persona-color-scheme", getColorScheme(config));
 };
 
 export const createThemeObserver = (

package/src/utils/tokens.ts

@@ -13,6 +13,11 @@ import {
   DEFAULT_FLOATING_LAUNCHER_WIDTH,
 } from '../defaults';
 
+// Detached/docked panel defaults, shared by the panel token defaults, the alias
+// fallbacks below, host-layout, the theme editor, and the artifact gate.
+export const DEFAULT_PANEL_INSET = '16px';
+export const DEFAULT_PANEL_CANVAS_BACKGROUND = 'transparent';
+
 export const DEFAULT_PALETTE = {
   colors: {
     primary: {
@@ -287,6 +292,8 @@ export const DEFAULT_COMPONENTS: ComponentTokens = {
     maxHeight: 'calc(100vh - 80px)',
     borderRadius: 'palette.radius.xl',
     shadow: 'palette.shadows.xl',
+    inset: DEFAULT_PANEL_INSET,
+    canvasBackground: DEFAULT_PANEL_CANVAS_BACKGROUND,
   },
   header: {
     // Header role: solid primary
@@ -742,6 +749,10 @@ export function themeToCssVariables(theme: PersonaTheme): Record<string, string>
     cssVars['--persona-components-panel-shadow'] ??
     cssVars['--persona-palette-shadows-xl'] ??
     '0 25px 50px -12px rgba(0, 0, 0, 0.25)';
+  cssVars['--persona-panel-inset'] =
+    cssVars['--persona-components-panel-inset'] ?? DEFAULT_PANEL_INSET;
+  cssVars['--persona-panel-canvas-bg'] =
+    cssVars['--persona-components-panel-canvasBackground'] ?? DEFAULT_PANEL_CANVAS_BACKGROUND;
   cssVars['--persona-launcher-shadow'] =
     cssVars['--persona-components-launcher-shadow'] ??
     '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)';
@@ -967,6 +978,10 @@ export function themeToCssVariables(theme: PersonaTheme): Record<string, string>
     if (t.iconBorder) cssVars['--persona-artifact-toolbar-icon-border'] = t.iconBorder;
     if (t.toggleGroupGap) cssVars['--persona-artifact-toolbar-toggle-group-gap'] = t.toggleGroupGap;
     if (t.toggleBorderRadius) cssVars['--persona-artifact-toolbar-toggle-radius'] = t.toggleBorderRadius;
+    if (t.toggleGroupPadding) cssVars['--persona-artifact-toolbar-toggle-group-padding'] = t.toggleGroupPadding;
+    if (t.toggleGroupBorder) cssVars['--persona-artifact-toolbar-toggle-group-border'] = t.toggleGroupBorder;
+    if (t.toggleGroupBorderRadius) cssVars['--persona-artifact-toolbar-toggle-group-radius'] = t.toggleGroupBorderRadius;
+    if (t.toggleGroupBackground) cssVars['--persona-artifact-toolbar-toggle-group-bg'] = resolveTokenValue(theme, t.toggleGroupBackground) ?? t.toggleGroupBackground;
     if (t.copyBackground) cssVars['--persona-artifact-toolbar-copy-bg'] = t.copyBackground;
     if (t.copyBorder) cssVars['--persona-artifact-toolbar-copy-border'] = t.copyBorder;
     if (t.copyColor) cssVars['--persona-artifact-toolbar-copy-color'] = t.copyColor;
@@ -1015,6 +1030,80 @@ export function themeToCssVariables(theme: PersonaTheme): Record<string, string>
       cssVars['--persona-artifact-toolbar-bg'] = toolbarBg;
     }
   }
+  if (artifact?.card) {
+    const t = artifact.card;
+    if (t.background) cssVars['--persona-artifact-card-bg'] = t.background;
+    if (t.border) cssVars['--persona-artifact-card-border'] = t.border;
+    if (t.borderRadius) cssVars['--persona-artifact-card-radius'] = t.borderRadius;
+    if (t.hoverBackground) cssVars['--persona-artifact-card-hover-bg'] = t.hoverBackground;
+    if (t.hoverBorderColor) cssVars['--persona-artifact-card-hover-border'] = t.hoverBorderColor;
+  }
+  if (artifact?.inline) {
+    const t = artifact.inline;
+    if (t.background) {
+      cssVars['--persona-artifact-inline-bg'] =
+        resolveTokenValue(theme, t.background) ?? t.background;
+    }
+    if (t.border) cssVars['--persona-artifact-inline-border'] = t.border;
+    if (t.borderRadius) cssVars['--persona-artifact-inline-radius'] = t.borderRadius;
+    if (t.chromeBackground) {
+      cssVars['--persona-artifact-inline-chrome-bg'] =
+        resolveTokenValue(theme, t.chromeBackground) ?? t.chromeBackground;
+    }
+    if (t.chromeBorder) {
+      cssVars['--persona-artifact-inline-chrome-border'] =
+        resolveTokenValue(theme, t.chromeBorder) ?? t.chromeBorder;
+    }
+    if (t.titleColor) {
+      cssVars['--persona-artifact-inline-title-color'] =
+        resolveTokenValue(theme, t.titleColor) ?? t.titleColor;
+    }
+    if (t.mutedColor) {
+      cssVars['--persona-artifact-inline-muted-color'] =
+        resolveTokenValue(theme, t.mutedColor) ?? t.mutedColor;
+    }
+    if (t.frameHeight) cssVars['--persona-artifact-inline-frame-height'] = t.frameHeight;
+  }
+
+  // Code (syntax-highlighted artifact source view) tokens.
+  const code = components?.code;
+  if (code) {
+    if (code.keywordColor) cssVars['--persona-code-keyword-color'] = code.keywordColor;
+    if (code.stringColor) cssVars['--persona-code-string-color'] = code.stringColor;
+    if (code.commentColor) cssVars['--persona-code-comment-color'] = code.commentColor;
+    if (code.numberColor) cssVars['--persona-code-number-color'] = code.numberColor;
+    if (code.tagColor) cssVars['--persona-code-tag-color'] = code.tagColor;
+    if (code.attrColor) cssVars['--persona-code-attr-color'] = code.attrColor;
+    if (code.propertyColor) cssVars['--persona-code-property-color'] = code.propertyColor;
+    if (code.lineNumberColor) cssVars['--persona-code-line-number-color'] = code.lineNumberColor;
+    if (code.gutterBorderColor) cssVars['--persona-code-gutter-border-color'] = code.gutterBorderColor;
+    if (code.background)
+      cssVars['--persona-code-bg'] = resolveTokenValue(theme, code.background) ?? code.background;
+  }
+
+  // Interactive-state defaults. The default preset resolves container === surface,
+  // which turns every hover/active rule that falls back to --persona-container
+  // into a visual no-op; anchor those states one gray step down in that case.
+  // Component config emitted above must keep winning, so only fill vars not set.
+  const stateSurface = cssVars['--persona-surface'];
+  const stateContainer = cssVars['--persona-container'];
+  const gray100 = cssVars['--persona-palette-colors-gray-100'] ?? '#f3f4f6';
+  const gray200 = cssVars['--persona-palette-colors-gray-200'] ?? '#e5e7eb';
+  const gray300 = cssVars['--persona-palette-colors-gray-300'] ?? '#d1d5db';
+  const flatTheme = !stateContainer || stateContainer === stateSurface;
+  const hoverBgDefault = flatTheme ? gray100 : stateContainer;
+  const activeBgDefault = flatTheme ? gray200 : stateContainer;
+  cssVars['--persona-icon-btn-hover-bg'] = cssVars['--persona-icon-btn-hover-bg'] ?? hoverBgDefault;
+  cssVars['--persona-icon-btn-active-bg'] = cssVars['--persona-icon-btn-active-bg'] ?? activeBgDefault;
+  if (flatTheme) {
+    cssVars['--persona-icon-btn-active-border'] =
+      cssVars['--persona-icon-btn-active-border'] ?? gray300;
+  }
+  cssVars['--persona-label-btn-hover-bg'] = cssVars['--persona-label-btn-hover-bg'] ?? hoverBgDefault;
+  cssVars['--persona-artifact-tab-hover-bg'] =
+    cssVars['--persona-artifact-tab-hover-bg'] ?? hoverBgDefault;
+  cssVars['--persona-artifact-card-hover-bg'] =
+    cssVars['--persona-artifact-card-hover-bg'] ?? hoverBgDefault;
 
   return cssVars;
 }
@@ -1041,6 +1130,8 @@ export const THEME_ZONES = {
   container: 'Main widget container',
   'artifact-pane': 'Artifact sidebar',
   'artifact-toolbar': 'Artifact toolbar',
+  'artifact-inline': 'Inline artifact block',
+  'artifact-inline-chrome': 'Inline artifact title bar',
 } as const;
 
 export type ThemeZone = keyof typeof THEME_ZONES;

package/src/utils/tool-loading-animation.test.ts

@@ -0,0 +1,32 @@
+// @vitest-environment jsdom
+
+import { describe, expect, it } from "vitest";
+import { appendCharSpans } from "./tool-loading-animation";
+
+const NBSP = String.fromCharCode(0xa0);
+
+describe("appendCharSpans", () => {
+  it("wraps each character in a persona-tool-char span with a staggered index", () => {
+    const container = document.createElement("div");
+    const next = appendCharSpans(container, "ab", 0);
+
+    const spans = container.querySelectorAll(".persona-tool-char");
+    expect(spans.length).toBe(2);
+    expect((spans[0] as HTMLElement).style.getPropertyValue("--char-index")).toBe("0");
+    expect((spans[1] as HTMLElement).style.getPropertyValue("--char-index")).toBe("1");
+    expect(spans[0].textContent).toBe("a");
+    expect(spans[1].textContent).toBe("b");
+    expect(next).toBe(2);
+  });
+
+  it("renders spaces as non-breaking spaces and honors the start index", () => {
+    const container = document.createElement("div");
+    const next = appendCharSpans(container, "a b", 5);
+
+    const spans = container.querySelectorAll(".persona-tool-char");
+    expect(spans.length).toBe(3);
+    expect((spans[0] as HTMLElement).style.getPropertyValue("--char-index")).toBe("5");
+    expect(spans[1].textContent).toBe(NBSP);
+    expect(next).toBe(8);
+  });
+});

package/src/utils/tool-loading-animation.ts

@@ -0,0 +1,24 @@
+import { createElement } from "./dom";
+
+/**
+ * Append text as individual animated character spans.
+ * Each character becomes a `persona-tool-char` span carrying a `--char-index`
+ * custom property so the shimmer/rainbow keyframes can stagger their delay.
+ * Spaces are rendered as non-breaking spaces so they animate like any other
+ * character. Returns the next available character index.
+ */
+export const appendCharSpans = (
+  container: HTMLElement,
+  text: string,
+  startIndex: number
+): number => {
+  let idx = startIndex;
+  for (const char of text) {
+    const span = createElement("span", "persona-tool-char");
+    span.style.setProperty("--char-index", String(idx));
+    span.textContent = char === " " ? "\u00A0" : char;
+    container.appendChild(span);
+    idx++;
+  }
+  return idx;
+};

package/dist/chunk-DFBSCFYN.js

@@ -1 +0,0 @@
-var a=class{constructor(e=24e3,t={}){this.ctx=null;this.nextStartTime=0;this.activeSources=[];this.finishedCallbacks=[];this.startedCallbacks=[];this.playing=!1;this.streamEnded=!1;this.pendingCount=0;this.started=!1;this.userPaused=!1;this.pendingBuffers=[];this.pendingSamples=0;this.remainder=null;var s;this.sampleRate=e;let i=Math.max(0,(s=t.prebufferMs)!=null?s:0);this.waterlineSamples=Math.round(e*i/1e3),this.buffering=this.waterlineSamples>0}ensureContext(){if(!this.ctx){let t=typeof window!="undefined"?window:void 0;if(!t)throw new Error("AudioPlaybackManager requires a browser environment");let i=t.AudioContext||t.webkitAudioContext;this.ctx=new i({sampleRate:this.sampleRate})}let e=this.ctx;return e.state==="suspended"&&!this.userPaused&&e.resume(),e}enqueue(e){if(e.length===0)return;let t=e;if(this.remainder){let s=new Uint8Array(this.remainder.length+e.length);s.set(this.remainder),s.set(e,this.remainder.length),t=s,this.remainder=null}if(t.length%2!==0&&(this.remainder=new Uint8Array([t[t.length-1]]),t=t.subarray(0,t.length-1)),t.length===0)return;let i=this.pcmToFloat32(t);i.length!==0&&(this.buffering?(this.pendingBuffers.push(i),this.pendingSamples+=i.length,this.pendingSamples>=this.waterlineSamples&&this.releaseBuffer()):this.scheduleSamples(i))}markStreamEnd(){this.pendingBuffers.length>0&&this.releaseBuffer(),this.streamEnded=!0,this.checkFinished()}flush(){for(let e of this.activeSources)try{e.stop(),e.disconnect()}catch{}this.activeSources=[],this.pendingCount=0,this.nextStartTime=0,this.playing=!1,this.streamEnded=!1,this.finishedCallbacks=[],this.startedCallbacks=[],this.remainder=null,this.pendingBuffers=[],this.pendingSamples=0,this.buffering=this.waterlineSamples>0,this.started=!1}isPlaying(){return this.playing}onFinished(e){this.finishedCallbacks.push(e)}onStarted(e){this.startedCallbacks.push(e)}pause(){this.userPaused=!0,this.ctx&&this.ctx.state==="running"&&this.ctx.suspend()}resume(){this.userPaused=!1,this.ctx&&this.ctx.state==="suspended"&&this.ctx.resume()}async destroy(){this.flush(),this.ctx&&(await this.ctx.close(),this.ctx=null)}releaseBuffer(){this.buffering=!1;let e=this.pendingBuffers;this.pendingBuffers=[],this.pendingSamples=0;for(let t of e)this.scheduleSamples(t)}scheduleSamples(e){if(e.length===0)return;let t=this.ensureContext(),i=t.createBuffer(1,e.length,this.sampleRate);i.getChannelData(0).set(e);let s=t.createBufferSource();s.buffer=i,s.connect(t.destination);let n=t.currentTime;if(this.nextStartTime===0?this.nextStartTime=n:this.nextStartTime<n&&(this.nextStartTime=n,this.waterlineSamples>0&&(this.buffering=!0)),s.start(this.nextStartTime),this.nextStartTime+=i.duration,this.activeSources.push(s),this.pendingCount++,this.playing=!0,!this.started){this.started=!0;let r=this.startedCallbacks.slice();this.startedCallbacks=[];for(let h of r)h()}s.onended=()=>{let r=this.activeSources.indexOf(s);r!==-1&&this.activeSources.splice(r,1),this.pendingCount--,this.checkFinished()}}checkFinished(){if(this.streamEnded&&this.pendingCount<=0&&this.pendingBuffers.length===0){this.playing=!1,this.streamEnded=!1;let e=this.finishedCallbacks.slice();this.finishedCallbacks=[];for(let t of e)t()}}pcmToFloat32(e){let t=Math.floor(e.length/2),i=new Float32Array(t),s=new DataView(e.buffer,e.byteOffset,e.byteLength);for(let n=0;n<t;n++){let r=s.getInt16(n*2,!0);i[n]=r/32768}return i}};export{a};

package/dist/runtype-tts-entry-HFUV2UF7.js

@@ -1 +0,0 @@
-import{a as c}from"./chunk-DFBSCFYN.js";function g(o){return o.replace(/\/+$/,"")}var m=class{constructor(e){this.opts=e;this.id="runtype-tts";this.supportsPause=!0;this.player=null;this.playerPromise=null;this.generation=0}ensurePlayer(){var e,t;return(t=this.playerPromise)!=null?t:this.playerPromise=Promise.resolve(this.opts.createPlaybackEngine?this.opts.createPlaybackEngine():new c(24e3,{prebufferMs:(e=this.opts.prebufferMs)!=null?e:200})).then(r=>this.player=r)}speak(e,t){let r=++this.generation;this.run(r,e,t)}async run(e,t,r){var i,a,p,h;try{let n=await this.ensurePlayer();if(e!==this.generation)return;n.flush(),n.resume(),n.onStarted(()=>{var s;e===this.generation&&((s=r.onStart)==null||s.call(r))}),n.onFinished(()=>{var s;e===this.generation&&((s=r.onEnd)==null||s.call(r))});let u=`${g(this.opts.host)}/v1/agents/${encodeURIComponent(this.opts.agentId)}/speak`,y=await fetch(u,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${this.opts.clientToken}`},body:JSON.stringify({text:t.text,voice:(i=t.voice)!=null?i:this.opts.voice,format:"pcm"})});if(e!==this.generation)return;if(!y.ok||!y.body)throw new Error(await S(y));let v=y.body.getReader();for(;;){let{done:s,value:d}=await v.read();if(e!==this.generation){await v.cancel().catch(()=>{});return}if(s)break;d&&d.byteLength>0&&n.enqueue(d)}n.markStreamEnd()}catch(n){if(e!==this.generation)return;let u=n instanceof Error?n:new Error(String(n));(p=(a=this.opts).onError)==null||p.call(a,u),(h=r.onError)==null||h.call(r,u)}}pause(){var e;(e=this.player)==null||e.pause()}resume(){var e;(e=this.player)==null||e.resume()}stop(){var e;this.generation++,(e=this.player)==null||e.flush()}destroy(){var e;this.generation++,(e=this.player)==null||e.destroy(),this.player=null,this.playerPromise=null}};async function S(o){var e,t;try{let r=await o.json();return r.detail?`${(e=r.error)!=null?e:`Runtype TTS ${o.status}`}: ${r.detail}`:(t=r.error)!=null?t:`Runtype TTS request failed (${o.status})`}catch{return`Runtype TTS request failed (${o.status})`}}var f=class{constructor(e,t,r={}){this.primary=e;this.fallback=t;this.options=r;this.id="fallback";this.active=e}get supportsPause(){return this.active.supportsPause}speak(e,t){this.active=this.primary;let r=!1;this.primary.speak(e,{onStart:()=>{var i;r=!0,(i=t.onStart)==null||i.call(t)},onEnd:()=>{var i;return(i=t.onEnd)==null?void 0:i.call(t)},onError:i=>{var a,p,h;if(r){(a=t.onError)==null||a.call(t,i);return}(h=(p=this.options).onFallback)==null||h.call(p,i),this.active=this.fallback,this.fallback.speak(e,t)}})}pause(){this.active.pause()}resume(){this.active.resume()}stop(){this.active.stop()}destroy(){var e,t,r,i;(t=(e=this.primary).destroy)==null||t.call(e),(i=(r=this.fallback).destroy)==null||i.call(r)}};export{f as FallbackSpeechEngine,m as RuntypeSpeechEngine};

package/dist/session-reconnect-U77QFUR7.js

@@ -1 +0,0 @@
-var k=[1e3,2e3,4e3,8e3,8e3];function T(e){let t=0,r=null,i=null,g=!1,b=()=>{if(i&&(clearTimeout(i),i=null),r){let n=r;r=null,n()}},v=()=>{let n=e.getStatus();n!=="resuming"&&n!=="paused"||b()},p=()=>{typeof document!="undefined"&&document.visibilityState==="hidden"||v()},R=()=>{v()},C=()=>{g||(typeof document!="undefined"&&document.addEventListener("visibilitychange",p),typeof window!="undefined"&&window.addEventListener("online",R),g=!0)},m=()=>{g&&(typeof document!="undefined"&&document.removeEventListener("visibilitychange",p),typeof window!="undefined"&&window.removeEventListener("online",R),g=!1)},M=n=>new Promise(s=>{r=s,i=setTimeout(()=>{i=null,r=null,s()},n)}),E=()=>{var d;let n=e.getResumable();e.clearResumable(),e.setReconnecting(!1),t=0,m(),e.setAbortController(null);let s=!1;for(let c of e.getMessages())c.streaming&&(c.streaming=!1,s=!0);let l=e.buildErrorContent("Connection lost and the response could not be resumed.");l?e.appendMessage({id:`reconnect-failed-${(d=n==null?void 0:n.executionId)!=null?d:e.nextSequence()}`,role:"assistant",content:l,createdAt:new Date().toISOString(),streaming:!1,sequence:e.nextSequence()}):s&&e.notifyMessagesChanged(),e.setStreaming(!1),e.setStatus("idle"),e.onError(new Error("Durable session reconnect failed."))},x=async()=>{var d,c,y,S,w,A;let n=(c=(d=e.config.reconnect)==null?void 0:d.backoffMs)!=null?c:k,s=(S=(y=e.config.reconnect)==null?void 0:y.maxAttempts)!=null?S:n.length,l=e.config.reconnectStream;if(!l){e.setReconnecting(!1);return}for(;e.getResumable()&&t<s;){t+=1,e.setStatus("resuming");let o=e.getResumable(),I=o.lastEventId,u=new AbortController;e.setAbortController(u),e.emitReconnect({phase:"resuming",handle:o,attempt:t});let f=null;try{let a=await l({executionId:o.executionId,after:o.lastEventId,signal:u.signal});a&&a.ok&&a.body&&(f=a.body)}catch{f=null}if(u.signal.aborted)return;if(f){let a=(w=e.getMessages().find(W=>W.id===o.assistantMessageId))==null?void 0:w.content,L=typeof a=="string"?a:"";try{await e.resumeConnect(f,o.assistantMessageId,L)}catch{}if(u.signal.aborted)return;if(!e.getResumable()){e.setReconnecting(!1),t=0,m(),e.emitReconnect({phase:"resumed",handle:o});return}e.getResumable().lastEventId!==I&&(t=0)}if(e.getResumable()&&t<s&&(e.setStatus("paused"),await M((A=n[Math.min(t-1,n.length-1)])!=null?A:1e3),u.signal.aborted))return}e.getResumable()&&E()};return{begin(){t=0,C(),x()},teardown(){i&&(clearTimeout(i),i=null),r=null,t=0,m()},wake:b}}export{T as createReconnectController};