@kitn.ai/ui
Version:
Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS.
2 lines (1 loc) • 9.68 kB
JavaScript
import{c as u,m as M,s as ee,j as V,g as j,i as s,S,a as O,b as H,d as $,k as te,F as I,t as b,G as L,e as ne}from"./define-CNSKFZCd.js";import{c as F}from"./cn-CU7UAWzk.js";import{c as re}from"./chevron-right-ChzBcNJ-.js";import{I as P}from"./Icon-C2LTALdM.js";import{f as ie}from"./file-text-DOYfYvrh.js";import{f as ae}from"./folder-DBDUBANz.js";var de=[["path",{d:"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z",key:"1rqfz7"}],["path",{d:"M14 2v4a2 2 0 0 0 2 2h4",key:"tnqrlb"}],["circle",{cx:"10",cy:"12",r:"2",key:"737tya"}],["path",{d:"m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22",key:"wt3hpn"}]],oe=e=>u(P,M(e,{name:"FileImage",iconNode:de})),le=oe,se=[["path",{d:"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z",key:"1rqfz7"}],["path",{d:"M14 2v4a2 2 0 0 0 2 2h4",key:"tnqrlb"}],["path",{d:"M9 13v-1h6v1",key:"1bb014"}],["path",{d:"M12 12v6",key:"3ahymv"}],["path",{d:"M11 18h2",key:"12mj7e"}]],ue=e=>u(P,M(e,{name:"FileType",iconNode:se})),ce=ue,he=[["path",{d:"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z",key:"1rqfz7"}],["path",{d:"M14 2v4a2 2 0 0 0 2 2h4",key:"tnqrlb"}]],fe=e=>u(P,M(e,{name:"File",iconNode:he})),pe=fe,ge=[["path",{d:"m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2",key:"usdka0"}]],ve=e=>u(P,M(e,{name:"FolderOpen",iconNode:ge})),me=ve,ke=b('<span class="text-tool-green tabular-nums">+'),be=b('<span class="text-tool-red tabular-nums">-'),xe=b("<button type=button>"),ye=b('<div part=summary class="flex items-center gap-2 px-2 py-1.5 text-xs text-muted-foreground border-b border-border"><span class="font-medium text-foreground"> <!> changed'),we=b("<div role=tree aria-label=Files>"),Se=b("<div role=group>"),$e=b('<div role=none><div role=treeitem data-tree-kind=folder><span class="truncate font-medium">'),Fe=b('<span part=stat-additions class="text-tool-green tabular-nums">+'),Ce=b('<span part=stat-deletions class="text-tool-red tabular-nums">-'),De=b("<span part=status>"),Me=b('<span class="ml-auto flex items-center gap-1.5 shrink-0 pl-2 text-xs"aria-hidden=true>'),qe=b('<div role=treeitem data-tree-kind=file><span class="w-3.5 shrink-0"></span><span>');const R={added:{letter:"A",label:"added",class:"text-tool-green"},modified:{letter:"M",label:"modified",class:"text-tool-amber"},deleted:{letter:"D",label:"deleted",class:"text-tool-red"},renamed:{letter:"R",label:"renamed",class:"text-tool-blue"},untracked:{letter:"U",label:"untracked",class:"text-muted-foreground"}};function Ae(e){const n={children:[]};for(const t of e){const f=t.path.split("/").filter(l=>l.length>0);if(f.length===0)continue;let v=n;for(let l=0;l<f.length-1;l++){const x=f[l],a=f.slice(0,l+1).join("/");let d=v.children.find(k=>k.kind==="folder"&&k.name===x);d||(d={kind:"folder",name:x,path:a,children:[]},v.children.push(d)),v=d}const w=f[f.length-1],c=v.children.find(l=>l.kind==="file"&&l.name===w);c?c.file=t:v.children.push({kind:"file",name:w,path:t.path,file:t})}return U(n.children),n.children}function U(e){e.sort((n,t)=>n.kind!==t.kind?n.kind==="folder"?-1:1:n.name.localeCompare(t.name,void 0,{sensitivity:"base"}));for(const n of e)n.kind==="folder"&&U(n.children)}function G(e,n,t=[]){for(const f of e)t.push(f),f.kind==="folder"&&n(f.path)&&G(f.children,n,t);return t}function Ee(e){switch(e){case"image":return le;case"pdf":return ce;case"html":return ie;default:return pe}}function _(e,n=[]){for(const t of e)t.kind==="folder"&&(n.push(t.path),_(t.children,n));return n}function B(e,n=[]){for(const t of e)t.kind==="folder"?B(t.children,n):n.push(t.file);return n}function ze(e){return e.status!==void 0||e.additions!==void 0||e.deletions!==void 0}function He(e,n){if(!ze(n))return;const t=[];return n.status&&t.push(R[n.status].label),n.additions!==void 0&&t.push(`${n.additions} addition${n.additions===1?"":"s"}`),n.deletions!==void 0&&t.push(`${n.deletions} deletion${n.deletions===1?"":"s"}`),[e,...t].join(", ")}function Ne(e){const n=M({files:[]},e),[t,f]=ee(n,["files","activeFile","onSelect","defaultExpanded","summary","class"]),v=V(()=>Ae(t.files)),w=()=>t.defaultExpanded===void 0,[c,l]=j(new Set(t.defaultExpanded??[]),{equals:!1}),[x,a]=j(new Set,{equals:!1}),d=r=>w()?!x().has(r):c().has(r),k=r=>{w()?a(o=>{const p=new Set(o);return p.has(r)?p.delete(r):p.add(r),p}):l(o=>{const p=new Set(o);return p.has(r)?p.delete(r):p.add(r),p})},y=V(()=>_(v())),i=V(()=>B(v())),h=()=>i().length,q=()=>i().reduce((r,o)=>r+(o.additions??0),0),A=()=>i().reduce((r,o)=>r+(o.deletions??0),0),C=()=>y().some(r=>d(r)),K=()=>{w()?a(new Set(y())):l(new Set)},N=()=>{w()?a(new Set):l(new Set(y()))},Q=()=>C()?K():N(),[W,T]=j(),Z=r=>{var o;T(r.path),(o=t.onSelect)==null||o.call(t,r.path,r.file)},X=(r,o)=>{const p=G(v(),d),D=p.findIndex(m=>m.path===o.path&&m.kind===o.kind),g=m=>{var E,z;if(!m)return;T(m.path);const Y=`[data-tree-path="${Oe(m.path)}"][data-tree-kind="${m.kind}"]`;(z=(E=r.currentTarget.closest('[role="tree"]'))==null?void 0:E.querySelector(Y))==null||z.focus()};switch(r.key){case"ArrowDown":r.preventDefault(),g(p[D+1]);break;case"ArrowUp":r.preventDefault(),g(p[D-1]);break;case"ArrowRight":r.preventDefault(),o.kind==="folder"&&(d(o.path)?g(p[D+1]):k(o.path));break;case"ArrowLeft":r.preventDefault(),o.kind==="folder"&&d(o.path)&&k(o.path);break;case"Enter":case" ":r.preventDefault(),o.kind==="folder"?k(o.path):Z(o);break}};return[u(S,{get when(){return t.summary},get children(){var r=ye(),o=r.firstChild,p=o.firstChild,D=p.nextSibling;return D.nextSibling,s(o,h,p),s(o,()=>h()===1?"file":"files",D),s(r,u(S,{get when(){return q()>0},get children(){var g=ke();return g.firstChild,s(g,q,null),g}}),null),s(r,u(S,{get when(){return A()>0},get children(){var g=be();return g.firstChild,s(g,A,null),g}}),null),s(r,u(S,{get when(){return y().length>0},get children(){var g=xe();return g.$$click=Q,s(g,()=>C()?"Collapse all":"Expand all"),O(m=>{var E=F("ml-auto rounded-md px-1.5 py-0.5 font-medium text-muted-foreground outline-none","hover:bg-muted hover:text-foreground","focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"),z=C()?"Collapse all folders":"Expand all folders";return E!==m.e&&H(g,m.e=E),z!==m.t&&$(g,"aria-label",m.t=z),m},{e:void 0,t:void 0}),g}}),null),r}}),(()=>{var r=we();return te(r,M({get class(){return F("text-sm select-none",t.class)}},f),!1,!0),s(r,u(I,{get each(){return v()},children:o=>u(J,{node:o,depth:0,isOpen:d,toggle:k,activeFile:()=>t.activeFile,focusedPath:W,onSelectFile:Z,onKeyDown:X})})),r})()]}function J(e){const n=()=>e.node,t=()=>e.node.kind==="folder"&&e.isOpen(e.node.path),f=()=>e.node.kind==="file"&&e.activeFile()===e.node.path,v=()=>{const c=e.focusedPath();return c!==void 0?e.node.path===c?0:-1:f()?0:-1},w=()=>({"padding-left":`${e.depth*12+8}px`});return u(S,{get when(){return e.node.kind==="folder"},get fallback(){const c=e.node.file,l=He(n().name,c),x=l!==void 0,a=c.status?R[c.status]:void 0;return(()=>{var d=qe(),k=d.firstChild,y=k.nextSibling;return d.$$keydown=i=>e.onKeyDown(i,e.node),d.$$click=()=>e.onSelectFile(e.node),$(d,"aria-label",l),s(d,()=>{const i=Ee(c.type);return u(i,{size:14,class:"shrink-0 opacity-70","aria-hidden":"true"})},y),s(y,()=>n().name),s(d,u(S,{when:x,get children(){var i=Me();return s(i,u(S,{get when(){return c.additions!==void 0},get children(){var h=Fe();return h.firstChild,s(h,()=>c.additions,null),h}}),null),s(i,u(S,{get when(){return c.deletions!==void 0},get children(){var h=Ce();return h.firstChild,s(h,()=>c.deletions,null),h}}),null),s(i,u(S,{when:a,get children(){var h=De();return s(h,()=>a.letter),O(()=>H(h,F("w-3 text-center font-mono font-semibold",a.class))),h}}),null),i}}),null),O(i=>{var h=f(),q=e.node.path,A=v(),C=F("flex items-center gap-1.5 rounded-md py-1 pr-2 cursor-pointer outline-none","focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",f()?"bg-primary/10 text-foreground font-medium":"text-muted-foreground hover:bg-muted hover:text-foreground"),K=w(),N=F("truncate",x&&"min-w-0 flex-1");return h!==i.e&&$(d,"aria-selected",i.e=h),q!==i.t&&$(d,"data-tree-path",i.t=q),A!==i.a&&$(d,"tabindex",i.a=A),C!==i.o&&H(d,i.o=C),i.i=L(d,K,i.i),N!==i.n&&H(y,i.n=N),i},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0,n:void 0}),d})()},get children(){var c=$e(),l=c.firstChild,x=l.firstChild;return l.$$keydown=a=>e.onKeyDown(a,e.node),l.$$click=()=>e.toggle(e.node.path),s(l,u(re,{size:14,get class(){return F("shrink-0 transition-transform opacity-70",t()&&"rotate-90")},"aria-hidden":"true"}),x),s(l,()=>{const a=t()?me:ae;return u(a,{size:14,class:"shrink-0 text-primary/80","aria-hidden":"true"})},x),s(x,()=>n().name),s(c,u(S,{get when(){return t()},get children(){var a=Se();return s(a,u(I,{get each(){return e.node.children},children:d=>u(J,{node:d,get depth(){return e.depth+1},get isOpen(){return e.isOpen},get toggle(){return e.toggle},get activeFile(){return e.activeFile},get focusedPath(){return e.focusedPath},get onSelectFile(){return e.onSelectFile},get onKeyDown(){return e.onKeyDown}})})),a}}),null),O(a=>{var d=t(),k=e.node.path,y=v(),i=F("flex items-center gap-1.5 rounded-md py-1 pr-2 cursor-pointer outline-none text-foreground","hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"),h=w();return d!==a.e&&$(l,"aria-expanded",a.e=d),k!==a.t&&$(l,"data-tree-path",a.t=k),y!==a.a&&$(l,"tabindex",a.a=y),i!==a.o&&H(l,a.o=i),a.i=L(l,h,a.i),a},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0}),c}})}function Oe(e){return typeof CSS<"u"&&typeof CSS.escape=="function"?CSS.escape(e):e.replace(/["\\]/g,"\\$&")}ne(["click","keydown"]);export{Ne as F};