@kitn.ai/ui/dist/elements/screen.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{g as B,h as E,p as _,c as g,u as H,d as k,i as s,S,a as M,b as j,t as f,e as P,f as D,q as y}from"./chunks/define-CNSKFZCd.js";import{c as F}from"./chunks/cn-CU7UAWzk.js";import{c as G}from"./chunks/overlay-B1-MBI6h.js";import{a as J}from"./chunks/arrow-left-GbBceGBE.js";import{w as K}from"./chunks/disclosure-BcBs--Jf.js";var L=f('<button part=back type=button aria-label=Back class="inline-flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">'),N=f('<div part=body role=dialog aria-modal=true tabindex=-1><header part=header class="flex shrink-0 items-center gap-2 border-b border-border px-3 py-2"><h2 part=title class="min-w-0 flex-1 truncate text-sm font-semibold text-foreground"></h2><div class="flex shrink-0 items-center gap-1"></div></header><div class="min-h-0 flex-1 overflow-auto">');let Q=0;function T(t){var d;const[v,b]=B(t.defaultOpen??!1),h=`kai-screen-title-${++Q}`,m=()=>t.open!==void 0,l=()=>m()?!!t.open:v(),u=e=>{var r;m()||b(e),(r=t.onOpenChange)==null||r.call(t,e)};(d=t.controllerRef)==null||d.call(t,{open:l,setOpen:u});const n=G(l);let x,A=null,w=[];const C=()=>t.back!==!1,$=()=>{var e;return(e=t.onBack)==null?void 0:e.call(t)},q=()=>{var e;if(t.noInert)return;const r=(e=t.host)==null?void 0:e.call(t),o=r?.parentElement;if(!(!r||!o))for(const p of Array.from(o.children)){if(p===r)continue;const i=p;w.push({el:i,hadInert:i.hasAttribute("inert"),hadAriaHidden:i.getAttribute("aria-hidden")}),i.setAttribute("inert",""),i.setAttribute("aria-hidden","true")}},I=()=>{for(const{el:e,hadInert:r,hadAriaHidden:o}of w)r||e.removeAttribute("inert"),o===null?e.removeAttribute("aria-hidden"):e.setAttribute("aria-hidden",o);w=[]};E(e=>{const r=l();if(r&&!e)A=document.activeElement??null,q(),queueMicrotask(()=>x?.focus());else if(!r&&e){I();const o=A;A=null,o&&o.isConnected&&queueMicrotask(()=>o.focus())}return r},!1),_(I);const z=e=>{e.key==="Escape"&&(e.stopPropagation(),$())};return g(S,{get when(){return n.present()},get children(){var e=N(),r=e.firstChild,o=r.firstChild,p=o.nextSibling,i=r.nextSibling;return e.$$keydown=z,H(a=>{var c;x=a,n.setRef(a),(c=t.surfaceRef)==null||c.call(t,a)},e),k(e,"aria-labelledby",h),s(r,g(S,{get when(){return C()},get children(){var a=L();return a.$$click=$,s(a,g(J,{size:16,"aria-hidden":"true"})),a}}),o),k(o,"id",h),s(o,()=>t.titleSlot??t.title),s(p,()=>t.actions),s(i,()=>t.children),M(a=>{var c=n.state()==="open"?"":void 0,O=n.state()==="closed"?"":void 0,R=F("absolute inset-0 z-40 flex flex-col bg-background text-foreground outline-none","animate-in fade-in-0 slide-in-from-bottom-2 motion-reduce:animate-none","data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:slide-out-to-bottom-2");return c!==a.e&&k(e,"data-expanded",a.e=c),O!==a.t&&k(e,"data-closed",a.t=O),R!==a.a&&j(e,a.a=R),a},{e:void 0,t:void 0,a:void 0}),e}})}P(["keydown","click"]);var U=f("<slot>"),V=f("<slot name=title>"),W=f("<slot name=actions>");D("kai-screen",{open:void 0,defaultOpen:void 0,headline:void 0,back:void 0,noInert:void 0},(t,d)=>{const{flag:v,element:b,dispatch:h,expose:m}=d;let l,u;return K(d,()=>l,()=>t.open),m({focus:n=>u?.focus(n)}),g(T,{get defaultOpen(){return v("defaultOpen")},get back(){return!(t.back===!1||b.getAttribute("back")==="false")},get noInert(){return v("noInert")},host:()=>b,get titleSlot(){return(()=>{var n=V();return n._$owner=y(),s(n,()=>t.headline),n})()},get actions(){return(()=>{var n=W();return n._$owner=y(),n})()},onBack:()=>{h("kai-back",{})},controllerRef:n=>l=n,surfaceRef:n=>u=n,get children(){var n=U();return n._$owner=y(),n}})});