import { JSX } from 'solid-js'; /** * Context handed to every element facade. `E` is the element's event map — * `{ eventName: detailType }` — which types `dispatch` so a facade can only fire * its declared events with the right `detail` shape. */ export interface WebComponentContext> { /** The custom-element host node. */ element: HTMLElement; /** Fire a non-bubbling, non-composed CustomEvent off the host. Consumers * listen directly on the element (`el.addEventListener(...)`). Typed by the * element's event map `E`. */ dispatch: (type: K, detail?: E[K]) => void; /** * Resolve a boolean flag from a prop the way HTML authors expect. * * `component-register` parses a *bare* boolean attribute (``) to * `undefined`, not `true` — so a facade can't rely on the prop value alone. * `flag('removable')` returns ON when the property is `true`, OR when the * matching attribute is present and not explicitly `="false"`. So all of * ``, ``, and `el.removable = true` turn it * on; ``, absent, and `el.removable = false` turn it off. * * `name` is the camelCase prop name; the matching kebab attribute is derived. */ flag: (name: string) => boolean; /** * Expose imperative methods on the host element instance — the input half of a * component's interaction surface (`el.focus()`, `el.clear()`, `el.scrollToBottom()`, * …), the counterpart to the events `dispatch` fires. Call once from the facade * with closures over its internal state/refs; each entry is assigned to the host, * so a consumer calls it directly: `document.querySelector('kai-prompt-input').focus()`. * Overriding a native method name (e.g. `focus`) shadows it on the instance so it * can target the right control inside the shadow root (the WebAwesome/Shoelace * convention). Methods are attached when the facade renders (on element upgrade). */ expose: (methods: Record unknown>) => void; } type FacadeComponent = (props: P, ctx: WebComponentContext) => JSX.Element; /** * Register a Solid facade as a Shadow-DOM custom element. * * - Renders into the element's shadow root (solid-element's default), with the * compiled kit CSS injected via a `