@kitn.ai/ui/dist/elements/embed.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 i,m as A,s as G,g as D,j as h,o as H,h as M,l as N,k as J,i as u,S as w,u as K,a as y,d as m,z as Q,t as f,e as W,f as X}from"./chunks/define-CNSKFZCd.js";import{c as ee}from"./chunks/cn-CU7UAWzk.js";import{I as re}from"./chunks/Icon-C2LTALdM.js";import{e as te}from"./chunks/external-link-DJUmC7g2.js";import{t as oe}from"./chunks/triangle-alert-B07fX3Q8.js";import{v as ae}from"./chunks/video-MKp3LmNT.js";import{e as ne}from"./chunks/card-routing-C986KuUA.js";var ie=[["polygon",{points:"6 3 20 12 6 21 6 3",key:"1oa8hb"}]],se=e=>i(re,A(e,{name:"Play",iconNode:ie})),le=se;const x="allow-scripts allow-same-origin allow-presentation allow-popups allow-popups-to-escape-sandbox",$="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen",ue=new Set;function ce(e){const r=O(e);return r!==void 0&&ue.has(r)}function O(e){try{return new URL(e).origin}catch{return}}function T(e){let r;try{r=new URL(e)}catch{return}const a=r.hostname.replace(/^www\./,"");if(a==="youtu.be")return E(r.pathname.slice(1));if(a==="youtube.com"||a==="m.youtube.com"||a==="youtube-nocookie.com"){const s=r.searchParams.get("v");if(s)return E(s);const g=r.pathname.match(/^\/(?:shorts|embed|v)\/([^/?#]+)/);if(g)return E(g[1])}}function V(e){let r;try{r=new URL(e)}catch{return}const a=r.hostname.replace(/^www\./,"");if(a!=="vimeo.com"&&a!=="player.vimeo.com")return;const s=r.pathname.match(/(?:^|\/)(\d+)(?:\/|$)/);return s?s[1]:void 0}function E(e){return/^[A-Za-z0-9_-]+$/.test(e)?e:void 0}function de(e){const r=e.start?`&start=${e.start}`:"";switch(e.provider){case"youtube":{const a=e.id??(e.url?T(e.url):void 0);if(!a)throw new Error("youtube embed: missing or unparseable id/url");return{embedUrl:`https://www.youtube-nocookie.com/embed/${a}?autoplay=1&rel=0${r}`,posterUrl:e.poster??`https://i.ytimg.com/vi/${a}/hqdefault.jpg`,sandbox:x,allow:$}}case"vimeo":{const a=e.id??(e.url?V(e.url):void 0);if(!a)throw new Error("vimeo embed: missing or unparseable id/url");return{embedUrl:`https://player.vimeo.com/video/${a}?autoplay=1&dnt=1${e.start?`#t=${e.start}s`:""}`,posterUrl:e.poster,sandbox:x,allow:$}}case"generic":{if(!e.url)throw new Error("generic embed: missing url");if(me(e.url),!ce(e.url))throw new Error(`generic embed: origin not allowlisted \u2014 call configureEmbedAllowlist([...]) to permit ${O(e.url)??e.url}`);return{embedUrl:e.url,posterUrl:e.poster,sandbox:x,allow:$}}}}function me(e){let r;try{r=new URL(e).protocol}catch{throw new Error(`generic embed: invalid url "${e}"`)}if(r!=="https:")throw new Error(`generic embed: only https player URLs are allowed (got ${r})`)}function fe(e){switch(e.provider){case"youtube":{const r=e.id??(e.url?T(e.url):void 0);return r?`https://www.youtube.com/watch?v=${r}`:e.url}case"vimeo":{const r=e.id??(e.url?V(e.url):void 0);return r?`https://vimeo.com/${r}`:e.url}case"generic":return e.url}}function pe(e){switch(e){case"youtube":return"YouTube";case"vimeo":return"Vimeo";case"generic":return"site"}}function ve(e){switch(e){case"4:3":return"4 / 3";case"1:1":return"1 / 1";case"9:16":return"9 / 16";default:return"16 / 9"}}var be=f('<div tabindex=-1 class="absolute inset-0 outline-none"><iframe allowfullscreen class="absolute inset-0 h-full w-full border-0">'),ge=f('<button type=button class="inline-flex shrink-0 items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring">Open on '),he=f('<div><div class="relative w-full bg-black"></div><div class="flex items-center justify-between gap-2 px-3 py-2"><span class="flex min-w-0 items-center gap-1.5 text-sm text-foreground"><span class=truncate>'),we=f(`<div role=img aria-label="Can't load this video"class="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-muted p-4 text-center text-sm text-muted-foreground"><span>Can't load this video`),ye=f('<img class="absolute inset-0 h-full w-full object-cover">'),ke=f('<button type=button class="group absolute inset-0 flex h-full w-full items-center justify-center outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"><span class="relative flex h-14 w-14 items-center justify-center rounded-full bg-black/60 text-white shadow-lg transition-transform motion-safe:group-hover:scale-110"aria-hidden=true>'),xe=f('<div class="absolute inset-0 bg-gradient-to-br from-zinc-800 to-zinc-950"aria-hidden=true>');function $e(e){const[r,a]=G(e,["cardId","data","onEmit","class"]),s=o=>{var p;return(p=r.onEmit)==null?void 0:p.call(r,o)},[g,U]=D(!1),[Y,I]=D(!1);let k;const c=h(()=>{try{return{ok:!0,value:de(r.data)}}catch(o){return{ok:!1,error:o instanceof Error?o.message:String(o)}}}),Z=h(()=>ve(r.data.aspectRatio)),_=()=>r.data.title??"Embedded video",C=h(()=>c().ok&&!Y()?c().value.posterUrl:void 0),z=h(()=>fe(r.data)),j=()=>pe(r.data.provider);H(()=>s({kind:"ready",cardId:r.cardId})),M(N(c,o=>{o.ok||s({kind:"error",cardId:r.cardId,message:o.error})})),M(N(()=>r.data,()=>{U(!1),I(!1)},{defer:!0}));const L=()=>{c().ok&&(U(!0),queueMicrotask(()=>k?.focus()))},B=o=>{(o.key==="Enter"||o.key===" ")&&(o.preventDefault(),L())},F=()=>{const o=z();o&&s({kind:"open",cardId:r.cardId,url:o,target:"tab"})};return(()=>{var o=he(),p=o.firstChild,R=p.nextSibling,S=R.firstChild,P=S.firstChild;return J(o,A({get class(){return ee("overflow-hidden rounded-xl border border-border bg-card text-card-foreground",r.class)}},a),!1,!0),u(p,i(w,{get when(){return c().ok},get fallback(){return(()=>{var t=we(),l=t.firstChild;return u(t,i(oe,{size:28,"aria-hidden":"true"}),l),t})()},get children(){return i(w,{get when(){return g()},get fallback(){return(()=>{var t=ke(),l=t.firstChild;return t.$$keydown=B,t.$$click=()=>L(),u(t,i(w,{get when(){return C()},get fallback(){return xe()},get children(){var n=ye();return n.addEventListener("error",()=>I(!0)),y(d=>{var v=C(),b=r.data.title??"";return v!==d.e&&m(n,"src",d.e=v),b!==d.t&&m(n,"alt",d.t=b),d},{e:void 0,t:void 0}),n}}),l),u(l,i(le,{size:26,fill:"currentColor"})),y(()=>m(t,"aria-label",`Play ${r.data.title??"video"}`)),t})()},get children(){var t=be(),l=t.firstChild;return K(n=>k=n,t),y(n=>{var d=c().value.embedUrl,v=_(),b=c().value.sandbox,q=c().value.allow;return d!==n.e&&m(l,"src",n.e=d),v!==n.t&&m(l,"title",n.t=v),b!==n.a&&m(l,"sandbox",n.a=b),q!==n.o&&m(l,"allow",n.o=q),n},{e:void 0,t:void 0,a:void 0,o:void 0}),t}})}})),u(S,i(ae,{size:14,class:"shrink-0 opacity-70","aria-hidden":"true"}),P),u(P,()=>r.data.title??j()),u(R,i(w,{get when(){return z()},get children(){var t=ge();return t.firstChild,t.$$click=()=>F(),u(t,j,null),u(t,i(te,{size:12,"aria-hidden":"true"}),null),t}}),null),y(t=>Q(p,"aspect-ratio",Z())),o})()}W(["click","keydown"]),X("kai-embed",{cardId:void 0,data:void 0},(e,{element:r})=>i($e,{get cardId(){return e.cardId??""},get data(){return e.data??{provider:"generic"}},onEmit:a=>ne(r,a)}));