@kitn.ai/ui/dist/elements/artifact.js

Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS.

import{c as a,m as P,s as ce,g as k,h as F,j as C,o as j,k as he,i as f,S as b,t as v,d as p,a as y,b as Z,l as J,u as Q,n as ge,p as X,e as fe,f as be}from"./chunks/define-CNSKFZCd.js";import{c as E}from"./chunks/cn-CU7UAWzk.js";import{B as z}from"./chunks/button-DBDZebGr.js";import{C as me,a as ve}from"./chunks/code-block-DZ6mz6vs.js";import{F as pe}from"./chunks/file-tree-DQzNQrbr.js";import{L as we}from"./chunks/loader-Cg6rO8tQ.js";import{a as xe}from"./chunks/arrow-left-GbBceGBE.js";import{I as Y}from"./chunks/Icon-C2LTALdM.js";import{r as ke,h as ye,c as ze}from"./chunks/rotate-cw-jpisOdOV.js";import{d as Te}from"./chunks/download-BDQwcFav.js";import{e as ee}from"./chunks/external-link-DJUmC7g2.js";import{f as Fe}from"./chunks/file-text-DOYfYvrh.js";import{m as Ce,a as Pe}from"./chunks/minimize-2-3kCdE0q3.js";var Re=[["path",{d:"M5 12h14",key:"1ays0h"}],["path",{d:"m12 5 7 7-7 7",key:"xquz4c"}]],Se=r=>a(Y,P(r,{name:"ArrowRight",iconNode:Re})),Oe=Se,Ne=[["path",{d:"M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z",key:"rwhkz3"}],["circle",{cx:"12",cy:"12",r:"3",key:"1v7zrd"}]],Ie=r=>a(Y,P(r,{name:"Eye",iconNode:Ne})),je=Ie;const Ee="6.0.227",re=`https://cdn.jsdelivr.net/npm/pdfjs-dist@${Ee}/build`,He=()=>import(`${re}/pdf.min.mjs`),Me=`${re}/pdf.worker.min.mjs`;let Ue=He,Le=Me,H=null;function $e(){if(!H){const r=Ue;H=(async()=>{const n=await r(),e=n.default??n;return e.GlobalWorkerOptions.workerSrc=Le,e})()}return H}async function Be(r,n,e){const l=await(await $e()).getDocument({url:r}).promise;n.replaceChildren();const s=typeof window<"u"&&window.devicePixelRatio?window.devicePixelRatio:1;for(let d=1;d<=l.numPages;d++){const c=await l.getPage(d),i=c.getViewport({scale:1}),h=i.width>0?e/i.width:1,u=c.getViewport({scale:h*s}),g=document.createElement("canvas");g.width=Math.max(1,Math.floor(u.width)),g.height=Math.max(1,Math.floor(u.height)),g.setAttribute("role","img"),g.setAttribute("aria-label",`Page ${d}`),g.style.width="100%",g.style.height="auto",g.style.display="block";const w=g.getContext("2d");n.appendChild(g),await c.render({canvasContext:w,viewport:u}).promise}return{pages:l.numPages}}var De=v('<div><div class="relative min-h-0 flex-1">'),Ae=v('<form class="min-w-0 flex-1"><label class=sr-only for=kai-artifact-path>Address</label><input id=kai-artifact-path name=kai-artifact-path type=text autocomplete=off placeholder="Enter a path or URL\u2026">'),Ve=v("<div class=flex-1 aria-hidden=true>"),We=v('<div role=tablist aria-label=View class="flex shrink-0 items-center gap-0.5 rounded-md bg-muted p-0.5">'),qe=v('<div data-artifact-toolbar class="flex shrink-0 items-center gap-1.5 border-b border-border bg-surface px-2 py-1.5">'),Ke=v("<button type=button role=tab>"),_e=v('<iframe class="absolute inset-0 h-full w-full border-0 bg-white">'),Ge=v('<div class="absolute inset-0 flex"><div class="w-56 shrink-0 overflow-auto border-r border-border bg-surface-sunken py-1.5 scrollbar-thin"></div><div class="min-w-0 flex-1 overflow-auto scrollbar-thin">'),Ze=v('<div class="flex h-full items-center justify-center p-6 text-sm text-muted-foreground">Select a file to view its source.'),Je=v('<div class="flex h-full items-center justify-center p-6 text-sm text-muted-foreground">No source \u2014 this file (<!>) has no code view.'),Qe=v(`<div role=region aria-label="PDF preview unavailable"class="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-card p-6 text-center"><div class="text-sm font-medium text-foreground"></div><div class="text-xs text-muted-foreground">Can't preview this PDF inline.</div><div class="flex flex-wrap items-center justify-center gap-2"><a class="inline-flex h-8 items-center gap-1.5 rounded-md border border-border bg-background px-3 text-xs font-medium text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"target=_blank rel="noopener noreferrer">Open in new tab</a><a class="inline-flex h-8 items-center gap-1.5 rounded-md border border-border bg-background px-3 text-xs font-medium text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"download>Download`),Xe=v('<div class="pointer-events-none absolute inset-0 flex items-center justify-center">'),Ye=v('<div class="absolute inset-0"><div role=region aria-label="PDF preview"tabindex=0 class="absolute inset-0 flex flex-col items-center gap-3 overflow-auto bg-surface-sunken p-3 scrollbar-thin focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset">');const er="allow-scripts allow-forms";function rr(r,n){if(r.url)return r.url;if(!n)return r.path;try{return new URL(r.path,n).href}catch{return r.path}}function tr(r,n){if(!r)return!1;const e=n.find(s=>s.url===r||s.path===r);if(e?.type==="pdf")return!0;const l=r.split(/[?#]/)[0];return/\.pdf$/i.test(l)}function nr(r){const n=P({files:[],defaultTab:"preview",sandbox:er,showNav:!0,showReload:!0,showHome:!0,showPathField:!0,showTabs:!0,expandable:!1,openInTab:!1,standalone:!1,readonlyPath:!1,maximized:!1},r),[e,l]=ce(n,["src","files","tab","defaultTab","activeFile","sandbox","iframeTitle","onNavigate","onTabChange","onFileSelect","maximized","onMaximizeChange","showNav","showReload","showHome","showPathField","showTabs","expandable","openInTab","standalone","readonlyPath","displayUrl","controllerRef","class"]),[s,d]=k(e.src?[e.src]:[]),[c,i]=k(e.src?0:-1),h=()=>s()[c()]??"",u=()=>c()>0,g=()=>c()<s().length-1,[w,M]=k(e.tab??e.defaultTab),[U,L]=k(e.activeFile),[ne,ae]=k(0),[R,S]=k(e.maximized??!1);F(()=>S(e.maximized??!1));const ie=()=>{var t;const o=!R();S(o),(t=e.onMaximizeChange)==null||t.call(e,o)},$=C(()=>{const t=h();return!!t&&t!=="about:blank"}),B=()=>{$()&&window.open(h(),"_blank","noopener,noreferrer")},D=C(()=>e.expandable&&!e.standalone),le=C(()=>e.showNav||e.showReload||e.showHome||e.showPathField||e.showTabs||D()||e.openInTab);let x;F(()=>{e.tab!==void 0&&M(e.tab)}),F(()=>L(e.activeFile)),F(J(()=>e.src,t=>{t&&t!==h()&&T(t)},{defer:!0}));const A=t=>t===void 0?void 0:e.files.find(o=>o.path===t),V=C(()=>A(U())),oe=C(()=>{const t=V();return!!t&&t.type!=="image"&&t.type!=="pdf"&&typeof t.code=="string"});function T(t){if(t===h()){N();return}d(o=>[...o.slice(0,c()+1),t]),i(o=>o+1),O()}function O(){var t;const o=h();x&&(x.src=o||"about:blank"),(t=e.onNavigate)==null||t.call(e,o)}function se(t){var o;t!==w()&&(M(t),(o=e.onTabChange)==null||o.call(e,t))}function W(t,o){var m;L(t),(m=e.onFileSelect)==null||m.call(e,t),T(rr(o,e.src))}const q=()=>{u()&&(i(t=>t-1),O())},K=()=>{g()&&(i(t=>t+1),O())};function N(){var t;const o=h();x&&(x.src="about:blank",x.src=o||"about:blank"),ae(m=>m+1),(t=e.onNavigate)==null||t.call(e,o)}const _=()=>{e.src&&T(e.src)},G=t=>{var o;R()!==t&&(S(t),(o=e.onMaximizeChange)==null||o.call(e,t))};j(()=>{var t;(t=e.controllerRef)==null||t.call(e,{back:()=>q(),forward:()=>K(),reload:()=>N(),home:()=>_(),navigate:o=>T(o),selectFile:o=>{const m=A(o);m&&W(o,m)},openExternal:()=>B(),maximize:()=>G(!0),restore:()=>G(!1)})});const de=()=>{var t,o;try{const m=(t=x?.contentWindow)==null?void 0:t.location.href;m&&m!=="about:blank"&&m!==h()&&(d(I=>[...I.slice(0,c()+1),m]),i(I=>I+1),(o=e.onNavigate)==null||o.call(e,m))}catch{}},ue=t=>{t.preventDefault();const o=t.currentTarget.elements.namedItem("kai-artifact-path");if(e.readonlyPath||e.displayUrl!=null){o&&(o.value=e.displayUrl??h());return}o&&o.value&&T(o.value)};return(()=>{var t=De(),o=t.firstChild;return he(t,P({get class(){return E("flex h-full w-full flex-col overflow-hidden bg-card text-card-foreground",e.standalone&&"rounded-xl border border-border",e.class)}},l),!1,!0),f(t,a(b,{get when(){return le()},get children(){return a(ar,{url:()=>e.displayUrl??h(),tab:w,canBack:u,canForward:g,canHome:()=>!!e.src,onBack:q,onForward:K,onReload:N,onHome:_,onSubmitPath:ue,onTab:se,showNav:()=>e.showNav,showReload:()=>e.showReload,showHome:()=>e.showHome,showPathField:()=>e.showPathField,showTabs:()=>e.showTabs,showExpand:D,showOpenInTab:()=>e.openInTab,maximized:R,onToggleMaximize:ie,canOpenInTab:$,onOpenInTab:B,readonlyPath:()=>e.readonlyPath||e.displayUrl!=null})}}),o),f(o,a(b,{get when(){return w()==="preview"},get fallback(){return a(lr,{get files(){return e.files},activeFile:U,activeFileObj:V,hasSource:oe,onSelect:W})},get children(){return a(b,{get when(){return tr(h(),e.files)},get fallback(){return a(ir,{ref:m=>x=m,src:h,get sandbox(){return e.sandbox},get title(){return e.iframeTitle??"Artifact preview"},onLoad:de})},get children(){return a(sr,{get url(){return h()},get reloadKey(){return ne()}})}})}})),t})()}function ar(r){return(()=>{var n=qe();return f(n,a(b,{get when(){return r.showNav()},get children(){return[a(z,{variant:"ghost",size:"icon-sm","aria-label":"Back",get disabled(){return!r.canBack()},onClick:()=>r.onBack(),get children(){return a(xe,{size:16,"aria-hidden":"true"})}}),a(z,{variant:"ghost",size:"icon-sm","aria-label":"Forward",get disabled(){return!r.canForward()},onClick:()=>r.onForward(),get children(){return a(Oe,{size:16,"aria-hidden":"true"})}})]}}),null),f(n,a(b,{get when(){return r.showReload()},get children(){return a(z,{variant:"ghost",size:"icon-sm","aria-label":"Reload",onClick:()=>r.onReload(),get children(){return a(ke,{size:15,"aria-hidden":"true"})}})}}),null),f(n,a(b,{get when(){return r.showHome()},get children(){return a(z,{variant:"ghost",size:"icon-sm","aria-label":"Home",get disabled(){return!r.canHome()},onClick:()=>r.onHome(),get children(){return a(ye,{size:15,"aria-hidden":"true"})}})}}),null),f(n,a(b,{get when(){return r.showPathField()},get children(){var e=Ae(),l=e.firstChild,s=l.nextSibling;return e.addEventListener("submit",d=>r.onSubmitPath(d)),p(s,"spellcheck",!1),y(d=>{var c=r.readonlyPath()||void 0,i=r.readonlyPath()?"true":void 0,h=E("h-7 w-full rounded-md border border-border px-2.5 text-xs text-foreground font-mono outline-none",r.readonlyPath()?"bg-muted/40 cursor-default":"bg-background focus-visible:ring-2 focus-visible:ring-ring");return c!==d.e&&(s.readOnly=d.e=c),i!==d.t&&p(s,"aria-readonly",d.t=i),h!==d.a&&Z(s,d.a=h),d},{e:void 0,t:void 0,a:void 0}),y(()=>s.value=r.url()),e}}),null),f(n,a(b,{get when(){return!r.showPathField()},get children(){return Ve()}}),null),f(n,a(b,{get when(){return r.showExpand()},get children(){return a(z,{variant:"ghost",size:"icon-sm",get"aria-label"(){return r.maximized()?"Collapse":"Expand"},get"aria-expanded"(){return r.maximized()},onClick:()=>r.onToggleMaximize(),get children(){return a(b,{get when(){return r.maximized()},get fallback(){return a(Pe,{size:15,"aria-hidden":"true"})},get children(){return a(Ce,{size:15,"aria-hidden":"true"})}})}})}}),null),f(n,a(b,{get when(){return r.showOpenInTab()},get children(){return a(z,{variant:"ghost",size:"icon-sm","aria-label":"Open in new tab",get disabled(){return!r.canOpenInTab()},onClick:()=>r.onOpenInTab(),get children(){return a(ee,{size:15,"aria-hidden":"true"})}})}}),null),f(n,a(b,{get when(){return r.showTabs()},get children(){var e=We();return f(e,a(te,{label:"Preview",get icon(){return a(je,{size:14,"aria-hidden":"true"})},get selected(){return r.tab()==="preview"},onClick:()=>r.onTab("preview")}),null),f(e,a(te,{label:"Code",get icon(){return a(ze,{size:14,"aria-hidden":"true"})},get selected(){return r.tab()==="code"},onClick:()=>r.onTab("code")}),null),e}}),null),n})()}function te(r){return(()=>{var n=Ke();return n.$$click=()=>r.onClick(),f(n,()=>r.icon,null),f(n,()=>r.label,null),y(e=>{var l=r.selected,s=E("inline-flex h-6 items-center gap-1.5 rounded px-2 text-xs font-medium transition-colors outline-none","focus-visible:ring-2 focus-visible:ring-ring",r.selected?"bg-background text-foreground shadow-sm":"text-muted-foreground hover:text-foreground");return l!==e.e&&p(n,"aria-selected",e.e=l),s!==e.t&&Z(n,e.t=s),e},{e:void 0,t:void 0}),n})()}function ir(r){return(()=>{var n=_e();n.addEventListener("load",()=>r.onLoad());var e=r.ref;return typeof e=="function"?Q(e,n):r.ref=n,y(l=>{var s=r.src()||"about:blank",d=r.sandbox,c=r.title;return s!==l.e&&p(n,"src",l.e=s),d!==l.t&&p(n,"sandbox",l.t=d),c!==l.a&&p(n,"title",l.a=c),l},{e:void 0,t:void 0,a:void 0}),n})()}function lr(r){return(()=>{var n=Ge(),e=n.firstChild,l=e.nextSibling;return f(e,a(pe,{get files(){return r.files},get activeFile(){return r.activeFile()},onSelect:(s,d)=>r.onSelect(s,d)})),f(l,a(b,{get when(){return r.activeFileObj()},get fallback(){return Ze()},get children(){return a(b,{get when(){return r.hasSource()},get fallback(){return(()=>{var s=Je(),d=s.firstChild,c=d.nextSibling;return c.nextSibling,f(s,()=>r.activeFileObj().type??"binary",c),s})()},get children(){return a(me,{class:"h-full rounded-none border-0",get children(){return a(ve,{get code(){return r.activeFileObj().code??""},get language(){return r.activeFileObj().language}})}})}})}})),n})()}function or(r){const n=()=>{const e=r.url.split(/[?#]/)[0];return e.slice(e.lastIndexOf("/")+1)||"document.pdf"};return(()=>{var e=Qe(),l=e.firstChild,s=l.nextSibling,d=s.nextSibling,c=d.firstChild;c.firstChild;var i=c.nextSibling,h=i.firstChild;return f(e,a(Fe,{size:40,class:"text-muted-foreground","aria-hidden":"true"}),l),f(l,n),f(c,a(ee,{size:13,"aria-hidden":"true"}),null),f(i,a(Te,{size:13,"aria-hidden":"true"}),h),y(u=>{var g=r.url,w=r.url;return g!==u.e&&p(c,"href",u.e=g),w!==u.t&&p(i,"href",u.t=w),u},{e:void 0,t:void 0}),e})()}function sr(r){const[n,e]=k("loading");let l,s=0,d;const c=async()=>{if(!l){e("error");return}const i=++s;e("loading");try{const h=l.clientWidth||600;await Be(r.url,l,h),i===s&&e("success")}catch{i===s&&e("error")}};return F(J(()=>[r.url,r.reloadKey],()=>{c()})),j(()=>{if(!l||typeof ResizeObserver>"u")return;const i=new ResizeObserver(()=>{n()==="success"&&(clearTimeout(d),d=setTimeout(()=>{c()},200))});i.observe(l),X(()=>{i.disconnect(),clearTimeout(d),s++})}),(()=>{var i=Ye(),h=i.firstChild;return Q(u=>l=u,h),f(i,a(b,{get when(){return ge(()=>!0)()&&n()==="loading"},get children(){var u=Xe();return f(u,a(we,{variant:"circular",size:"md"})),u}}),null),f(i,a(b,{get when(){return n()==="error"},get children(){return a(or,{get url(){return r.url}})}}),null),y(()=>p(h,"aria-busy",n()==="loading")),i})()}fe(["click"]);var dr=v("<style>:host{display:block;height:100%;min-height:0}"),ur=v('<div style="display:grid;grid-template-rows:minmax(0, 1fr);grid-template-columns:minmax(0, 1fr);height:100%;min-height:0">');be("kai-artifact",{src:void 0,files:[],tab:void 0,defaultTab:void 0,activeFile:void 0,sandbox:"allow-scripts allow-forms",iframeTitle:void 0,maximized:!1,expandable:!1,openInTab:!1,noNav:!1,noReload:!1,noHome:!1,noPathField:!1,noTabs:!1,standalone:!1,readonlyPath:!1,displayUrl:void 0},(r,{element:n,dispatch:e,flag:l,expose:s})=>{const[d,c]=k(l("maximized"));let i;s({back:()=>i?.back(),forward:()=>i?.forward(),reload:()=>i?.reload(),home:()=>i?.home(),navigate:u=>i?.navigate(u),selectFile:u=>i?.selectFile(u),openExternal:()=>i?.openExternal(),maximize:()=>i?.maximize(),restore:()=>i?.restore()});const h=u=>{c(u),n.dispatchEvent(new CustomEvent("kai-maximize-intent",{detail:{requested:u},bubbles:!0,composed:!0})),e("kai-maximize-change",{maximized:u})};return j(()=>{const u=g=>c(g.detail.maximized);n.addEventListener("kai-maximize-state",u),X(()=>n.removeEventListener("kai-maximize-state",u))}),[dr(),(()=>{var u=ur();return f(u,a(nr,{get src(){return r.src},get files(){return r.files},get tab(){return r.tab},get defaultTab(){return r.defaultTab},get activeFile(){return r.activeFile},get sandbox(){return r.sandbox},get iframeTitle(){return r.iframeTitle},get maximized(){return d()},get expandable(){return l("expandable")},get openInTab(){return l("openInTab")},get showNav(){return!l("noNav")},get showReload(){return!l("noReload")},get showHome(){return!l("noHome")},get showPathField(){return!l("noPathField")},get showTabs(){return!l("noTabs")},get standalone(){return l("standalone")},get readonlyPath(){return l("readonlyPath")},get displayUrl(){return r.displayUrl},onMaximizeChange:h,onNavigate:g=>e("kai-navigate",{url:g}),onTabChange:g=>e("kai-tab-change",{tab:g}),onFileSelect:g=>e("kai-file-select",{path:g}),controllerRef:g=>i=g})),u})()]});