@kitn.ai/ui/dist/elements/editable-label.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 y,h as g,i as E,c as k,a as D,d as q,b as S,S as C,t as x,A as p,u as R,e as K,f as j}from"./chunks/define-CNSKFZCd.js";import{c as $}from"./chunks/cn-CU7UAWzk.js";import{I as F}from"./chunks/input-DZD67EvW.js";var I=x("<span>"),T=x("<span part=text>");function V(a){const[s,r]=y(!!a.editing);g(()=>r(!!a.editing));const[n,u]=y(a.value);g(()=>u(a.value));let c,l=!1;const f=()=>{const e=c?.querySelector("input");e&&(e.focus(),e.select())};g(()=>{s()&&queueMicrotask(f)});const m=()=>{a.disabled||r(!0)},v=e=>{var d;p(s)&&(r(!1),e!==p(n)&&(u(e),(d=a.onRename)==null||d.call(a,e)))},o=()=>{var e;p(s)&&(r(!1),(e=a.onCancel)==null||e.call(a))},h=e=>{const d=e.currentTarget;e.key==="Enter"?(e.preventDefault(),l=!0,v(d.value)):e.key==="Escape"&&(e.preventDefault(),l=!0,o())},t=e=>{if(l){l=!1;return}v(e)};return(()=>{var e=I(),d=c;return typeof d=="function"?R(d,e):c=e,E(e,k(C,{get when(){return s()},get fallback(){return(()=>{var b=T();return b.$$keydown=i=>{!a.disabled&&(i.key==="Enter"||i.key==="F2")&&(i.preventDefault(),m())},b.$$dblclick=m,E(b,()=>n()||a.placeholder||""),D(i=>{var A=a.disabled?void 0:0,w=$("inline-block max-w-full truncate rounded px-1 py-0.5 text-sm text-foreground",a.disabled?"cursor-default opacity-60":"cursor-text hover:bg-muted",!n()&&"text-muted-foreground");return A!==i.e&&q(b,"tabindex",i.e=A),w!==i.t&&S(b,i.t=w),i},{e:void 0,t:void 0}),b})()},get children(){return k(F,{get value(){return n()},get placeholder(){return a.placeholder},get disabled(){return a.disabled},size:"sm",class:"h-7 py-0",get"aria-label"(){return a.placeholder??"Edit label"},onKeyDown:h,onValueChange:t})}})),D(()=>S(e,$("inline-flex max-w-full items-center",a.class))),e})()}K(["dblclick","keydown"]);var z=x("<style>:host{display:inline-flex}");j("kai-editable-label",{value:void 0,editing:!1,placeholder:void 0,disabled:!1},(a,s)=>{const{element:r,dispatch:n,flag:u,expose:c}=s,[l,f]=y(a.value??r.getAttribute("value")??""),m=t=>t==null?r.getAttribute("value")??"":String(t);Object.defineProperty(r,"value",{get:()=>l(),set:t=>{const e=m(t);p(l)!==e&&f(e)},configurable:!0,enumerable:!0}),g(()=>{const t=l();t?r.getAttribute("value")!==t&&r.setAttribute("value",t):r.hasAttribute("value")&&r.removeAttribute("value")});const[v,o]=y(u("editing"));g(()=>o(u("editing"))),g(()=>{v()?r.hasAttribute("editing")||r.setAttribute("editing",""):r.hasAttribute("editing")&&r.removeAttribute("editing")});const h=()=>{var t;return((t=r.shadowRoot)==null?void 0:t.querySelector("input"))??null};return c({edit:()=>{u("disabled")||o(!0)},commit:()=>{var t;(t=h())==null||t.blur()},cancel:()=>{const t=h();t?t.dispatchEvent(new KeyboardEvent("keydown",{key:"Escape",bubbles:!0,composed:!0})):p(v)&&(o(!1),n("kai-cancel",{}))}}),[z(),k(V,{get value(){return l()},get editing(){return v()},get placeholder(){return a.placeholder},get disabled(){return u("disabled")},onRename:t=>{o(!1),t!==p(l)&&(f(t),n("kai-rename",{value:t}))},onCancel:()=>{o(!1),n("kai-cancel",{})}})]});