@inploi/plugin-kin 2.7.9 → 3.1.0

package/dist/components/button.d.ts

@@ -1,6 +1,6 @@
 export declare const buttonClass: (props?: ({
     variant?: "ghost" | "neutral" | "accent" | undefined;
-    size?: "iconSm" | "iconMd" | "sm" | "md" | undefined;
+    size?: "sm" | "md" | "iconSm" | "iconMd" | "iconLg" | undefined;
 } & ({
     class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
         [x: string]: any;

package/dist/components/launcher-icon.d.ts

@@ -0,0 +1,8 @@
+import { KinFloatingPlacement } from '../kin.protocol';
+
+export declare function LauncherIcon({ onOpen, placement, buttonRef, logo, }: {
+    onOpen: () => void;
+    placement?: KinFloatingPlacement;
+    buttonRef?: preact.RefObject<HTMLButtonElement>;
+    logo?: string | null;
+}): import("preact").JSX.Element;

package/dist/components/widget.d.ts

@@ -1,4 +1,4 @@
-import { KinPlacement, StarterPrompt } from '../kin';
+import { KinFloatingPlacement, KinLauncherConfig, StarterPrompt } from '../kin.protocol';
 
 export declare const shellClass: (props?: ({
     layout?: "embedded" | "closed" | "open" | undefined;
@@ -114,7 +114,7 @@ export declare const backdropClass: (props?: ({
         [x: string]: any;
     } | null | undefined;
 })) | undefined) => string;
-export declare function Widget({ starterPrompts, onSendMessage, onOpen, onClose, onConnect, onClearData, onUploadFile, placement, }: {
+export declare function Widget({ starterPrompts, onSendMessage, onOpen, onClose, onConnect, onClearData, onUploadFile, onClipInset, placement, launcher, logo, }: {
     starterPrompts: StarterPrompt[];
     onSendMessage: (content: string) => void;
     onOpen: () => void;
@@ -122,5 +122,16 @@ export declare function Widget({ starterPrompts, onSendMessage, onOpen, onClose,
     onConnect: () => void;
     onClearData: () => void;
     onUploadFile: (file: File, fileType: string) => void;
-    placement: KinPlacement;
+    onClipInset?: (inset: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    }) => void;
+    placement: {
+        desktop: KinFloatingPlacement;
+        mobile: KinFloatingPlacement;
+    };
+    launcher?: Required<KinLauncherConfig>;
+    logo?: string | null;
 }): import("preact").JSX.Element;

package/dist/index.d.ts

@@ -1 +1 @@
-export { kinPlugin, type Kin, type KinPlacement, type KinPlugin, type KinPluginParams, type KinRounded, type KinTheme, } from './kin';
+export { kinPlugin, type Kin, type KinAppearance, type KinFloatingPlacement, type KinLauncherConfig, type KinPlacement, type KinPlacementConfig, type KinPlugin, type KinPluginParams, type KinRounded, type KinTheme, type StarterPrompt, } from './kin';

package/dist/kin.client.d.ts

@@ -6,7 +6,7 @@ type HistoryMessage = {
     content: string;
     blocks?: unknown[];
 };
-type KinMessage = {
+export type KinMessage = {
     type: 'user_message' | 'response_start' | 'response_chunk' | 'response_end' | 'tool_call' | 'tool_result' | 'error' | 'system' | 'authenticated' | 'data_cleared' | 'guardrail_block' | 'history' | 'quick_replies' | 'upload_received' | 'file_processing' | 'file_processed' | 'job_detail' | 'job_detail_chunk' | 'job_detail_done' | 'job_detail_error';
     content?: string;
     tool?: string;
@@ -32,11 +32,10 @@ export declare const FILE_ACCEPT_STRING = ".pdf,.docx,.doc,.txt,.jpg,.jpeg,.png,
 type KinClientOptions = {
     url: string;
     onMessage: (message: KinMessage) => void;
-    onOpen: () => void;
     onClose: () => void;
     onError: (error: Event) => void;
 };
-export declare function createKinClient({ url, onMessage, onOpen, onClose, onError }: KinClientOptions): {
+export declare function createKinClient({ url, onMessage, onClose, onError }: KinClientOptions): {
     sendMessage: (content: string) => void;
     /**
      * Upload a file to the server

package/dist/kin.d.ts

@@ -1,47 +1,9 @@
-/** A starter prompt button shown in the empty state */
-export type StarterPrompt = {
-    /** Text displayed on the button */
-    label: string;
-    /** Message sent when clicked (can differ from label) */
-    message: string;
-};
-export type KinTheme = {
-    /** Primary accent color as HEX (e.g., "#FF4D00") */
-    accentColor: string;
-    /** Optional neutral base color as HEX (e.g., "#555555"). Defaults to medium gray. */
-    neutralColor?: string;
-    /** Light or dark mode */
-    mode: 'light' | 'dark';
-    /** Global rounding preset */
-    rounded?: KinRounded;
-};
-export type KinPlacement = 'left' | 'center' | 'right' | 'embedded';
-export type KinRounded = 'sm' | 'md' | 'lg';
-export type KinPluginParams = {
-    /** Override the agents service URL. Defaults to production (wss://agents.inploi.com). Only needed for local development. */
-    serviceUrl?: string;
-    /** Theme configuration */
-    theme?: KinTheme;
-    /** Starter prompts shown in empty state to help users begin */
-    starterPrompts?: StarterPrompt[];
-    /**
-     * Widget placement:
-     * - 'left' | 'center' | 'right': Floating positions on desktop
-     * - 'embedded': Inline mode (fills the provided container)
-     */
-    placement?: KinPlacement;
-    /**
-     * Container element or selector for embedded placement.
-     * If not provided in embedded placement, creates its own container.
-     */
-    container?: HTMLElement | string;
-};
+import { KinPluginParams, KinTheme } from './kin.protocol';
+
+export type { KinAppearance, KinFloatingPlacement, KinLauncherConfig, KinPlacement, KinPlacementConfig, KinPluginParams, KinRounded, KinTheme, StarterPrompt, } from './kin.protocol';
 export type KinPlugin = typeof kinPlugin;
 export type Kin = ReturnType<ReturnType<KinPlugin>>;
-/**
- * Creates the Kin plugin
- */
-export declare const kinPlugin: ({ serviceUrl, theme, starterPrompts, placement, container: containerOption, }: KinPluginParams) => ({ logger, publishableKey, env }: {
+export declare const kinPlugin: ({ serviceUrl, frameUrl: frameUrlOption, appearance, starterPrompts, container, }: KinPluginParams) => ({ logger, publishableKey, env }: {
     apiClient: import('@inploi/sdk').ApiClient;
     rpcClient: import('@inploi/sdk').InploiRpcClient;
     logger: import('@inploi/sdk').Logger;
@@ -53,6 +15,6 @@ export declare const kinPlugin: ({ serviceUrl, theme, starterPrompts, placement,
     open: () => void;
     close: () => void;
     toggle: () => void;
-    setTheme: (newTheme: KinTheme) => void;
+    setAppearance: (next?: Partial<KinTheme>) => void;
     destroy: () => void;
 };

package/dist/kin.protocol.d.ts

@@ -0,0 +1,118 @@
+import { MessageBlock } from './message-payload';
+
+export type StarterPrompt = {
+    label: string;
+    message: string;
+};
+export type KinRounded = 'sm' | 'md' | 'lg';
+export type KinTheme = {
+    accentColor: string;
+    neutralColor?: string;
+    mode: 'light' | 'dark';
+    rounded?: KinRounded;
+};
+export type KinFloatingPlacement = 'left' | 'center' | 'right';
+export type KinPlacement = KinFloatingPlacement | 'embedded';
+export type KinPlacementConfig = {
+    desktop?: KinFloatingPlacement;
+    mobile?: KinFloatingPlacement;
+};
+export type KinLauncherConfig = {
+    desktop?: 'input' | 'icon';
+    mobile?: 'input' | 'icon';
+};
+export type KinAppearance = {
+    accentColor?: string;
+    neutralColor?: string;
+    mode?: 'light' | 'dark';
+    rounded?: KinRounded;
+    placement?: KinPlacement | KinPlacementConfig;
+    launcher?: KinLauncherConfig;
+    zIndex?: number;
+    logo?: string | null;
+};
+export type KinPluginParams = {
+    serviceUrl?: string;
+    frameUrl?: string;
+    appearance?: KinAppearance;
+    starterPrompts?: StarterPrompt[];
+    container?: HTMLElement | string;
+};
+export type SyncedMessage = {
+    role: 'user' | 'assistant' | 'system';
+    content: string;
+    timestamp: string;
+    attachment?: {
+        name: string;
+    };
+    blocks?: MessageBlock[];
+};
+export type KinSyncSnapshot = {
+    syncKey: string;
+    sourceInstanceId: string;
+    revision: number;
+    type: 'messages_updated';
+    messages: SyncedMessage[];
+} | {
+    syncKey: string;
+    sourceInstanceId: string;
+    revision: number;
+    type: 'messages_cleared';
+};
+export type KinInitPayload = {
+    instanceId: string;
+    publishableKey: string;
+    anonymousId: string;
+    serviceUrl: string;
+    theme: KinTheme;
+    logo: string | null;
+    starterPrompts: StarterPrompt[];
+    placement: {
+        desktop: KinFloatingPlacement;
+        mobile: KinFloatingPlacement;
+    };
+    embedded: boolean;
+    launcher: Required<KinLauncherConfig>;
+};
+export type HostToFrameMessage = {
+    type: 'kin:init';
+    payload: KinInitPayload;
+} | {
+    type: 'kin:open';
+} | {
+    type: 'kin:close';
+} | {
+    type: 'kin:set-appearance';
+    payload: KinTheme;
+} | {
+    type: 'kin:destroy';
+} | {
+    type: 'kin:sync-snapshot';
+    payload: KinSyncSnapshot;
+};
+export type FrameToHostMessage = {
+    type: 'kin:ready';
+} | {
+    type: 'kin:request-close';
+} | {
+    type: 'kin:opened';
+} | {
+    type: 'kin:clip-inset';
+    payload: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+} | {
+    type: 'kin:state-snapshot';
+    payload: KinSyncSnapshot;
+} | {
+    type: 'kin:error';
+    payload: {
+        message: string;
+    };
+};
+export declare const isKinMessage: (v: unknown) => v is {
+    type: string;
+};

package/dist/kin.runtime.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/kin.state.d.ts

@@ -1,4 +1,5 @@
 import { VNode } from 'preact';
+import { KinSyncSnapshot } from './kin.protocol';
 import { MessageBlock } from './message-payload';
 
 export type Message = {
@@ -41,18 +42,24 @@ export declare const store: {
     setJobDetail: (jobId: string, patch: Partial<JobDetailState>) => void;
     appendJobSummaryChunk: (jobId: string, content: string) => void;
     finalizeJobSummary: (jobId: string, summary: string) => void;
+    configureSync: (config: {
+        syncKey: string;
+        sourceInstanceId: string;
+        emit: (snapshot: KinSyncSnapshot) => void;
+    } | null) => void;
+    applySyncSnapshot: (snapshot: KinSyncSnapshot) => void;
     addMessage: (message: Omit<Message, "id" | "timestamp">) => Message;
     removeMessage: (id: string) => void;
     startAssistantResponse: () => void;
     appendToLiveAssistantMessage: (content: string) => void;
     finishAssistantResponse: (options?: {
         commit?: boolean;
-        broadcast?: boolean;
+        sync?: boolean;
         blocks?: MessageBlock[];
     }) => void;
     clearAssistantResponse: () => void;
-    clearMessages: () => void;
-    setMessages: (newMessages: Array<Omit<Message, "id" | "timestamp">>) => void;
+    clearMessages: (sync?: boolean) => void;
+    setMessages: (newMessages: Array<Omit<Message, "id" | "timestamp">>, sync?: boolean) => void;
     setUploadState: (state: UploadState, fileName?: string, error?: string) => void;
     resetState: () => void;
 };

package/dist/kin.vars.d.ts

@@ -1,4 +1,4 @@
-import { KinRounded, KinTheme } from './kin';
+import { KinRounded, KinTheme } from './kin.protocol';
 
 export declare function generateVars(theme: KinTheme): string;
 export declare function generateRoundedVars(rounded: KinRounded): string;

package/dist/plugin-kin.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-45f58435.cjs");require("@inploi/sdk");exports.kinPlugin=e.kinPlugin;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const L=require("@inploi/sdk"),Y=r=>typeof r=="object"&&r!==null&&typeof r.type=="string"&&r.type.startsWith("kin:"),ee="inploi-kin-root",te=2147483647,k={accentColor:"#FF4D00",neutralColor:"#555555",mode:"light",rounded:"lg"},ne={production:"wss://agents.inploi.com",sandbox:"wss://agents.staging.inploi.com"},oe=(()=>{var g;if({}.VITE_KIN_FRAME_URL)return{}.VITE_KIN_FRAME_URL;const r=typeof document<"u"?(g=document.currentScript)==null?void 0:g.src:void 0;return r?new URL("./frame/index.html",r).href:null})(),ie=({serviceUrl:r,frameUrl:g,appearance:F={},starterPrompts:K=[],container:v})=>L.createPlugin(({logger:C,publishableKey:E,env:O})=>{const T=r??ne[O??"production"];if(!E)throw new Error("Kin plugin requires a publishableKey. Pass it to initialiseSdk().");const{accentColor:P=k.accentColor,neutralColor:D=k.neutralColor,mode:j=k.mode,rounded:q=k.rounded,placement:u="center",launcher:x={},zIndex:N=te,logo:V=null}=F,R=L.generateUUID(),n=u==="embedded",W=typeof u=="object"?{desktop:u.desktop??"center",mobile:u.mobile??"center"}:{desktop:n?"center":u,mobile:n?"center":u},z={desktop:x.desktop??"input",mobile:x.mobile??"icon"},B=String(N);let d={accentColor:P,neutralColor:D,mode:j,rounded:q},f="",w="",h="",U="",o=null,t=null,s=null,l=!1,I=n,m=n,y=null,p={top:"calc(100% - 64px)",right:"0",bottom:"0",left:"0"};const a=e=>{var i;w&&((i=t==null?void 0:t.contentWindow)==null||i.postMessage(e,w))},S=e=>{n||(e&&y===null?(y=document.documentElement.style.overflow,document.documentElement.style.overflow="hidden"):!e&&y!==null&&(document.documentElement.style.overflow=y,y=null))},_=()=>`inset(${p.top} ${p.right} ${p.bottom} ${p.left})`,c=e=>{m=e,!(e&&!l)&&(S(e),o&&(o.style.clipPath=e?"inset(0)":_(),o.style.pointerEvents=e||l&&I?"all":"none"))},M=e=>{if(e.source!==(t==null?void 0:t.contentWindow)||e.origin!==w||!Y(e.data))return;const i=e.data;switch(i.type){case"kin:ready":l=!0,t&&(t.style.visibility="visible"),m&&!n?(c(!0),a({type:"kin:open"})):n||c(!1);break;case"kin:request-close":c(!1);break;case"kin:opened":n||c(!0);break;case"kin:clip-inset":if(I=!0,!m){const{top:G,right:J,bottom:Q,left:X}=i.payload;p={top:`${G}px`,right:`${J}px`,bottom:`${Q}px`,left:`${X}px`},c(!1)}break;case"kin:state-snapshot":s==null||s.postMessage(i.payload);break;case"kin:error":C.error(i.payload.message);break}},Z=e=>{const i=e.data;!U||!i||i.syncKey!==U||i.sourceInstanceId===R||!l||a({type:"kin:sync-snapshot",payload:i})},b=()=>{if(!t){if(!f){if(f=g||oe||"",!f)throw new Error("Kin frame URL could not be resolved automatically. Pass `frameUrl` when using the npm build, or load the CDN bundle via a <script> tag.");w=new URL(f,window.location.href).origin}h||(h=L.getOrCreateAnonymousId(),U=[E,T,h].join("|")),o=document.createElement("div"),o.id=ee,n?(((typeof v=="string"?document.querySelector(v):v)??document.body).appendChild(o),o.style.cssText="position:relative;width:100%;height:100%"):(document.body.appendChild(o),o.style.cssText=`position:fixed;inset:0;z-index:${B};width:100vw;height:100dvh;pointer-events:none;clip-path:${_()}`),t=document.createElement("iframe"),t.src=f,t.title="Kin AI Chat",t.allow="clipboard-write",t.style.cssText="border:0;background:transparent;visibility:hidden;width:100%;height:100%",n&&(t.style.cssText+=";position:absolute;inset:0"),t.addEventListener("load",()=>a({type:"kin:init",payload:{instanceId:R,publishableKey:E,anonymousId:h,serviceUrl:T,theme:d,logo:V,starterPrompts:K,placement:W,embedded:n,launcher:z}}),{once:!0}),window.addEventListener("message",M),o.appendChild(t),typeof BroadcastChannel<"u"&&(s=new BroadcastChannel("kin-sync"),s.addEventListener("message",Z))}},H=()=>{window.removeEventListener("message",M),s==null||s.close(),s=null,t==null||t.remove(),t=null,o==null||o.remove(),o=null,l=!1,I=n,m=n,p={top:"calc(100% - 64px)",right:"0",bottom:"0",left:"0"},S(!1)},$=()=>{b(),c(!0),l&&a({type:"kin:open"})},A=()=>{c(!1),l&&a({type:"kin:close"})};return{prepare:()=>{typeof window>"u"||(b(),C.info("Kin plugin prepared"))},open:()=>{if(!(typeof window>"u")){if(n){b();return}$()}},close:()=>{typeof window>"u"||n||A()},toggle:()=>{if(!(typeof window>"u")){if(n){b();return}m?A():$()}},setAppearance:(e={})=>{d={accentColor:e.accentColor??d.accentColor,neutralColor:e.neutralColor??d.neutralColor,mode:e.mode??d.mode,rounded:e.rounded??d.rounded},l&&a({type:"kin:set-appearance",payload:d})},destroy:()=>{typeof window>"u"||(l&&a({type:"kin:destroy"}),H(),C.info("Kin plugin destroyed"))}}});exports.kinPlugin=ie;

package/dist/plugin-kin.js

@@ -1,5 +1,198 @@
-import { k } from "./index-d554999b.js";
-import "@inploi/sdk";
+import { createPlugin as X, generateUUID as Y, getOrCreateAnonymousId as ee } from "@inploi/sdk";
+const te = (r) => typeof r == "object" && r !== null && typeof r.type == "string" && r.type.startsWith("kin:"), ne = "inploi-kin-root", oe = 2147483647, k = {
+  accentColor: "#FF4D00",
+  neutralColor: "#555555",
+  mode: "light",
+  rounded: "lg"
+}, ie = {
+  production: "wss://agents.inploi.com",
+  sandbox: "wss://agents.staging.inploi.com"
+}, re = (() => {
+  var g;
+  if ({}.VITE_KIN_FRAME_URL)
+    return {}.VITE_KIN_FRAME_URL;
+  const r = typeof document < "u" ? (g = document.currentScript) == null ? void 0 : g.src : void 0;
+  return r ? new URL("./frame/index.html", r).href : null;
+})(), le = ({
+  serviceUrl: r,
+  frameUrl: g,
+  appearance: F = {},
+  starterPrompts: K = [],
+  container: v
+}) => X(({
+  logger: C,
+  publishableKey: E,
+  env: M
+}) => {
+  const L = r ?? ie[M ?? "production"];
+  if (!E)
+    throw new Error("Kin plugin requires a publishableKey. Pass it to initialiseSdk().");
+  const {
+    accentColor: O = k.accentColor,
+    neutralColor: D = k.neutralColor,
+    mode: P = k.mode,
+    rounded: j = k.rounded,
+    placement: p = "center",
+    launcher: x = {},
+    zIndex: q = oe,
+    logo: N = null
+  } = F, R = Y(), n = p === "embedded", V = typeof p == "object" ? {
+    desktop: p.desktop ?? "center",
+    mobile: p.mobile ?? "center"
+  } : {
+    desktop: n ? "center" : p,
+    mobile: n ? "center" : p
+  }, W = {
+    desktop: x.desktop ?? "input",
+    mobile: x.mobile ?? "icon"
+  }, z = String(q);
+  let d = {
+    accentColor: O,
+    neutralColor: D,
+    mode: P,
+    rounded: j
+  }, f = "", w = "", h = "", U = "", o = null, t = null, s = null, l = !1, I = n, m = n, y = null, u = {
+    top: "calc(100% - 64px)",
+    right: "0",
+    bottom: "0",
+    left: "0"
+  };
+  const a = (e) => {
+    var i;
+    w && ((i = t == null ? void 0 : t.contentWindow) == null || i.postMessage(e, w));
+  }, T = (e) => {
+    n || (e && y === null ? (y = document.documentElement.style.overflow, document.documentElement.style.overflow = "hidden") : !e && y !== null && (document.documentElement.style.overflow = y, y = null));
+  }, _ = () => `inset(${u.top} ${u.right} ${u.bottom} ${u.left})`, c = (e) => {
+    m = e, !(e && !l) && (T(e), o && (o.style.clipPath = e ? "inset(0)" : _(), o.style.pointerEvents = e || l && I ? "all" : "none"));
+  }, S = (e) => {
+    if (e.source !== (t == null ? void 0 : t.contentWindow) || e.origin !== w || !te(e.data))
+      return;
+    const i = e.data;
+    switch (i.type) {
+      case "kin:ready":
+        l = !0, t && (t.style.visibility = "visible"), m && !n ? (c(!0), a({
+          type: "kin:open"
+        })) : n || c(!1);
+        break;
+      case "kin:request-close":
+        c(!1);
+        break;
+      case "kin:opened":
+        n || c(!0);
+        break;
+      case "kin:clip-inset":
+        if (I = !0, !m) {
+          const {
+            top: H,
+            right: G,
+            bottom: J,
+            left: Q
+          } = i.payload;
+          u = {
+            top: `${H}px`,
+            right: `${G}px`,
+            bottom: `${J}px`,
+            left: `${Q}px`
+          }, c(!1);
+        }
+        break;
+      case "kin:state-snapshot":
+        s == null || s.postMessage(i.payload);
+        break;
+      case "kin:error":
+        C.error(i.payload.message);
+        break;
+    }
+  }, B = (e) => {
+    const i = e.data;
+    !U || !i || i.syncKey !== U || i.sourceInstanceId === R || !l || a({
+      type: "kin:sync-snapshot",
+      payload: i
+    });
+  }, b = () => {
+    if (!t) {
+      if (!f) {
+        if (f = g || re || "", !f)
+          throw new Error("Kin frame URL could not be resolved automatically. Pass `frameUrl` when using the npm build, or load the CDN bundle via a <script> tag.");
+        w = new URL(f, window.location.href).origin;
+      }
+      h || (h = ee(), U = [E, L, h].join("|")), o = document.createElement("div"), o.id = ne, n ? (((typeof v == "string" ? document.querySelector(v) : v) ?? document.body).appendChild(o), o.style.cssText = "position:relative;width:100%;height:100%") : (document.body.appendChild(o), o.style.cssText = `position:fixed;inset:0;z-index:${z};width:100vw;height:100dvh;pointer-events:none;clip-path:${_()}`), t = document.createElement("iframe"), t.src = f, t.title = "Kin AI Chat", t.allow = "clipboard-write", t.style.cssText = "border:0;background:transparent;visibility:hidden;width:100%;height:100%", n && (t.style.cssText += ";position:absolute;inset:0"), t.addEventListener("load", () => a({
+        type: "kin:init",
+        payload: {
+          instanceId: R,
+          publishableKey: E,
+          anonymousId: h,
+          serviceUrl: L,
+          theme: d,
+          logo: N,
+          starterPrompts: K,
+          placement: V,
+          embedded: n,
+          launcher: W
+        }
+      }), {
+        once: !0
+      }), window.addEventListener("message", S), o.appendChild(t), typeof BroadcastChannel < "u" && (s = new BroadcastChannel("kin-sync"), s.addEventListener("message", B));
+    }
+  }, Z = () => {
+    window.removeEventListener("message", S), s == null || s.close(), s = null, t == null || t.remove(), t = null, o == null || o.remove(), o = null, l = !1, I = n, m = n, u = {
+      top: "calc(100% - 64px)",
+      right: "0",
+      bottom: "0",
+      left: "0"
+    }, T(!1);
+  }, $ = () => {
+    b(), c(!0), l && a({
+      type: "kin:open"
+    });
+  }, A = () => {
+    c(!1), l && a({
+      type: "kin:close"
+    });
+  };
+  return {
+    prepare: () => {
+      typeof window > "u" || (b(), C.info("Kin plugin prepared"));
+    },
+    open: () => {
+      if (!(typeof window > "u")) {
+        if (n) {
+          b();
+          return;
+        }
+        $();
+      }
+    },
+    close: () => {
+      typeof window > "u" || n || A();
+    },
+    toggle: () => {
+      if (!(typeof window > "u")) {
+        if (n) {
+          b();
+          return;
+        }
+        m ? A() : $();
+      }
+    },
+    setAppearance: (e = {}) => {
+      d = {
+        accentColor: e.accentColor ?? d.accentColor,
+        neutralColor: e.neutralColor ?? d.neutralColor,
+        mode: e.mode ?? d.mode,
+        rounded: e.rounded ?? d.rounded
+      }, l && a({
+        type: "kin:set-appearance",
+        payload: d
+      });
+    },
+    destroy: () => {
+      typeof window > "u" || (l && a({
+        type: "kin:destroy"
+      }), Z(), C.info("Kin plugin destroyed"));
+    }
+  };
+});
 export {
-  k as kinPlugin
+  le as kinPlugin
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inploi/plugin-kin",
-  "version": "2.7.9",
+  "version": "3.1.0",
   "type": "module",
   "description": "Kin - A unified Talent Agent interface for hiring. One system, many roles.",
   "main": "dist/plugin-kin.js",
@@ -20,7 +20,7 @@
     }
   },
   "peerDependencies": {
-    "@inploi/sdk": ">=1.17.3"
+    "@inploi/sdk": ">=1.18.0"
   },
   "devDependencies": {
     "@preact/preset-vite": "2.5.0",
@@ -35,8 +35,8 @@
     "vite": "^4.4.5",
     "vite-plugin-dts": "^3.7.0",
     "vite-tsconfig-paths": "^4.2.1",
-    "@inploi/sdk": "1.17.3",
-    "tsconfig": "0.1.0"
+    "tsconfig": "0.1.0",
+    "@inploi/sdk": "1.18.0"
   },
   "dependencies": {
     "streamdown": "^2.3.0",
@@ -45,8 +45,9 @@
   "scripts": {
     "dev": "vite",
     "build:cdn": "VITE_MOCKS=false vite build --mode=cdn",
+    "build:frame": "VITE_MOCKS=false vite build --mode=frame",
     "build:npm": "VITE_MOCKS=false vite build --mode=production",
-    "build": "concurrently 'pnpm build:npm' 'pnpm run build:cdn'",
+    "build": "pnpm build:npm && pnpm build:cdn && pnpm build:frame",
     "check": "tsc"
   }
 }

package/dist/highlighted-body-B3W2YXNL-4579406d.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-45f58435.cjs");require("@inploi/sdk");var c=({code:g,language:l,raw:r,className:u,...s})=>{let{shikiTheme:t}=e.q(e.R),a=e.Ks(),[h,i]=e.h(r);return e.p(()=>{if(!a){i(r);return}let o=a.highlight({code:g,language:l,themes:t},n=>{i(n)});o&&i(o)},[g,l,t,a,r]),e.o(e.Qe,{className:u,language:l,result:h,...s})};exports.HighlightedCodeBlockBody=c;

package/dist/highlighted-body-B3W2YXNL-aa326909.js

@@ -1,18 +0,0 @@
-import { q as u, R as c, K as d, h as n, p, o as f, Q as k } from "./index-d554999b.js";
-import "@inploi/sdk";
-var N = ({ code: o, language: e, raw: a, className: s, ...h }) => {
-  let { shikiTheme: r } = u(c), l = d(), [t, g] = n(a);
-  return p(() => {
-    if (!l) {
-      g(a);
-      return;
-    }
-    let i = l.highlight({ code: o, language: e, themes: r }, (m) => {
-      g(m);
-    });
-    i && g(i);
-  }, [o, e, r, l, a]), f(k, { className: s, language: e, result: t, ...h });
-};
-export {
-  N as HighlightedCodeBlockBody
-};