@blukavantui/community 0.0.0-stage → 1.1.0

package/src/component-factories/profile-card.ts

@@ -0,0 +1,5 @@
+import {installProfileCard} from '../runtime/profile-card.js';
+import {bind} from "../component-runtime.js";
+import type * as T from "../types.js";
+export function createProfileCard(host:HTMLElement, options:T.ProfileCardOptions, events:T.ProfileCardEvents={}) {
+ installProfileCard();return bind<T.ProfileCardOptions>(host,"ProfileCard",{...{"ImageUrl": "", "ImageDescription": "", "FocalPoint": "50% 50%", "Name": "Alex Morgan", "Role": "Creative director", "Biography": "", "Variant": "Below", "AllowExpand": true, "ProfileUrl": "", "AccessibleLabel": "", "ExtendedClass": ""},...options},remember=>({Error: (message) => {return events.Error?.(message);}}),[],["Links"]);}

package/src/component-factories/qr-code.ts

@@ -0,0 +1,11 @@
+import {installQRCode} from '../runtime/qr-code.js';
+import { bind } from "../component-runtime.js";
+import type * as T from "../types.js";
+type NotificationRuntime={show(hostKey:string,message:T.BluNotificationMessage):string;update(hostKey:string,message:T.BluNotificationMessage):string;dismiss(hostKey:string,key?:string):void};
+export function createQRCode(host:HTMLElement,options:T.QRCodeOptions,events:T.QRCodeEvents={}){
+ installQRCode();
+ return bind(host,"QRCode",options,remember=>({
+  Refresh:(key)=>{return events.Refresh?.(key);},
+  Error:(message)=>{return events.Error?.(message);},
+ }),[],[]);
+}

package/src/component-factories/quote-card.ts

@@ -0,0 +1,5 @@
+import {installQuoteCard} from '../runtime/quote-card.js';
+import {bind} from "../component-runtime.js";
+import type * as T from "../types.js";
+export function createQuoteCard(host:HTMLElement, options:T.QuoteCardOptions, events:T.QuoteCardEvents={}) {
+ installQuoteCard();return bind<T.QuoteCardOptions>(host,"QuoteCard",{...{"Quote": "Good work starts with a conversation.", "Name": "Alex Morgan", "Role": "", "AvatarUrl": "", "LogoUrl": "", "Rating": 0, "AccessibleLabel": "", "ExtendedClass": ""},...options},remember=>({Error: (message) => {return events.Error?.(message);}}),[],[]);}

package/src/component-factories/shape-mask.ts

@@ -0,0 +1,6 @@
+import {installShapeMask} from '../runtime/shape-mask.js';
+import {bind} from '../component-runtime.js';
+import type {ShapeMaskOptions,ShapeMaskEvents} from '../types.js';
+export function createShapeMask(host:HTMLElement,options:ShapeMaskOptions,events:ShapeMaskEvents={}){
+ installShapeMask();return bind<ShapeMaskOptions>(host,'ShapeMask',options,remember=>({Loaded:url=>events.Loaded?.(url),Error:message=>events.Error?.(message)}),[],["Content"]);
+}

package/src/component-factories/sidebar.ts

@@ -0,0 +1,98 @@
+import { node, slot, component, classes, safeUrl } from "../dom.js";
+import type {
+  ButtonOptions,
+  ButtonEvents,
+  BadgeOptions,
+  ChipOptions,
+  ChipEvents,
+  CardOptions,
+  BreadcrumbsOptions,
+  PageHeaderOptions,
+  SidebarOptions,
+  SidebarEvents,
+  SkeletonOptions,
+} from "../types.js";
+function breadcrumbs(p: BreadcrumbsOptions) {
+  const n = node("nav", classes("blu-breadcrumbs", p.ExtendedClass));
+  n.setAttribute("aria-label", p.AccessibleLabel || "Breadcrumbs");
+  const list = node("ol", "blu-breadcrumbs__list");
+  n.append(list);
+  p.Items.forEach((item, i) => {
+    const li = node("li", "blu-breadcrumbs__item");
+    if (i) {
+      const sep = node("span", "blu-breadcrumbs__separator", "/");
+      sep.setAttribute("aria-hidden", "true");
+      li.append(sep);
+    }
+    if (i === p.Items.length - 1 || !item.Url) {
+      const text = node("span", "blu-breadcrumbs__current", item.Label);
+      if (i === p.Items.length - 1) text.setAttribute("aria-current", "page");
+      li.append(text);
+    } else {
+      const a = node("a", "blu-breadcrumbs__link", item.Label);
+      a.href = safeUrl(item.Url);
+      li.append(a);
+    }
+    list.append(li);
+  });
+  return n;
+}
+export function createSidebar(
+  host: HTMLElement,
+  options: SidebarOptions,
+  events: SidebarEvents = {},
+) {
+  return component(host, options, (r, p, update) => {
+    const active = r.contains(document.activeElement) ? (document.activeElement as HTMLElement)?.dataset.navigationKey : undefined;
+    const previousScroll=r.querySelector(".blu-sidebar")?.scrollTop||0;
+    const n = node(
+      "aside",
+      classes(
+        "blu-sidebar" + (p.IsOpen === false ? " blu-sidebar--closed" : ""),
+        p.ExtendedClass,
+      ),
+    );
+    n.hidden = p.IsOpen === false;
+    n.setAttribute("aria-label", p.AccessibleLabel || "Navigation");
+    const c = node("div", "blu-sidebar__content blu-navigation-menu");
+    slot(c, p.Content);
+    for (const item of p.Items || []) {
+      if (item.IsGroup) {
+        c.append(node("div", "blu-navigation-menu__group-title", item.Label));
+        continue;
+      }
+      const b = item.Url ? node("a") : node("button");
+      if (b instanceof HTMLButtonElement) {
+        b.type = "button";
+        b.disabled = !!item.IsDisabled;
+      } else if (item.Url && !item.IsDisabled) b.href = safeUrl(item.Url);
+      b.dataset.navigationKey = item.Key;
+      b.className =
+        "blu-navigation-menu__link" +
+        (item.Key === p.ActiveKey ? " blu-navigation-menu__link--active" : "");
+      if (item.Key === p.ActiveKey) b.setAttribute("aria-current", "page");
+      if (item.IsDisabled) b.setAttribute("aria-disabled", "true");
+      if (item.IconUrl) {
+        const icon = node("img");
+        icon.src = safeUrl(item.IconUrl);
+        icon.alt = "";
+        b.append(icon);
+      }
+      b.append(node("span", "", item.Label));
+      b.onclick = (e) => {
+        if (item.IsDisabled) {
+          e.preventDefault();
+          return;
+        }
+        if (!item.Url) update({ ActiveKey: item.Key });
+        void events.Navigate?.(item.Key, e);
+      };
+      c.append(b);
+    }
+    n.append(c);
+    r.replaceChildren(n);
+    n.scrollTop=previousScroll;
+    requestAnimationFrame(()=>{const selected=n.querySelector<HTMLElement>('[aria-current="page"]');if(!selected||!n.isConnected)return;const a=selected.getBoundingClientRect(),p=n.getBoundingClientRect();if(a.top<p.top+12||a.bottom>p.bottom-12)n.scrollTop+=a.top-p.top-n.clientHeight/2+a.height/2;});
+    if (active) Array.from(r.querySelectorAll<HTMLElement>('[data-navigation-key]')).find(el => el.dataset.navigationKey === active)?.focus();
+  });
+}

package/src/component-factories/sparkline.ts

@@ -0,0 +1,8 @@
+import {installSparkline} from '../runtime/sparkline.js';
+import { bind } from "../component-runtime.js";
+import type * as T from "../types.js";
+type NotificationRuntime={show(hostKey:string,message:T.BluNotificationMessage):string;update(hostKey:string,message:T.BluNotificationMessage):string;dismiss(hostKey:string,key?:string):void};
+export function createSparkline(host:HTMLElement,options:T.SparklineOptions,events:T.SparklineEvents={}) {
+ installSparkline();
+ return bind(host,"Sparkline",options,()=>({Error:(message)=>events.Error?.(message)}),["Points"]);
+}

package/src/component-factories/split-section.ts

@@ -0,0 +1,5 @@
+import {installSplitSection} from '../runtime/split-section.js';
+import {bind} from "../component-runtime.js";
+import type * as T from "../types.js";
+export function createSplitSection(host:HTMLElement, options:T.SplitSectionOptions, events:T.SplitSectionEvents={}) {
+ installSplitSection();return bind<T.SplitSectionOptions>(host,"SplitSection",{...{"Eyebrow": "", "Title": "A different perspective.", "Description": "", "MediaSide": "Left", "Surface": "Default", "HeadingLevel": 2, "Spacing": "Comfortable", "AccessibleLabel": "", "ExtendedClass": ""},...options},remember=>({Error: (message) => {return events.Error?.(message);}}),[],["Media", "Content", "Actions"]);}

package/src/component-factories/splitter.ts

@@ -0,0 +1,105 @@
+import {installSplitter} from '../runtime/splitter.js';
+import { mountRoot, node, slot } from "../dom.js";
+import type * as T from "../types.js";
+type RawEvents = Record<string, (...args: any[]) => unknown>;
+type Raw = {
+  sync(id: string, options: object, events: RawEvents, owner: string): string;
+  destroy(owner: string): void;
+};
+function runtime(): Record<string, Raw> {
+  if (typeof window === "undefined")
+    throw new Error("Mount BluKavantUI in a browser, after the host is connected.");
+  return (window as unknown as { BluUICommunityRuntime: Record<string, Raw> })
+    .BluUICommunityRuntime;
+}
+function bind<P extends object>(
+  host: HTMLElement,
+  kind: string,
+  initial: P,
+  map: (p: P) => object,
+  events: (remember: (p: Partial<P>) => void) => RawEvents,
+  setup?: (root: HTMLElement, p: P) => void,
+): T.Component<P> {
+  const r = mountRoot(host),
+    key = r.id;
+  let props = { ...initial },
+    disposed = false;
+  const raw = runtime()[kind],
+    callbacks = events((p) => {
+      props = { ...props, ...p };
+    });
+  const update = (patch: Partial<P>) => {
+    if (disposed) throw new Error("Component is destroyed.");
+    props = { ...props, ...patch };
+    setup?.(r, props);
+    const error = raw.sync(r.id, map(props), callbacks, key);
+    if (error) throw new Error(error);
+  };
+  try {
+    update({});
+  } catch (e) {
+    raw.destroy(key);
+    r.remove();
+    throw e;
+  }
+  return {
+    element: r,
+    update,
+    destroy() {
+      if (disposed) return;
+      disposed = true;
+      raw.destroy(key);
+      r.remove();
+    },
+  };
+}
+export function createSplitter(
+  host: HTMLElement,
+  options: T.SplitterOptions,
+  events: T.SplitterEvents = {},
+) {
+ installSplitter();
+  let primary: HTMLElement,
+    secondary: HTMLElement,
+    lastPrimary: T.Slot | undefined,
+    lastSecondary: T.Slot | undefined;
+  return bind(
+    host,
+    "Splitter",
+    options,
+    (p) => {
+      const { PrimaryContent, SecondaryContent, ...rest } = p;
+      return rest;
+    },
+    (remember) => ({
+      LayoutChanged: (size, collapsed) => {
+        remember({ PrimarySize: size, IsCollapsed: collapsed });
+        return events.LayoutChanged?.(size, collapsed);
+      },
+      Error: (message) => events.Error?.(message),
+    }),
+    (root, p) => {
+      if (!primary) {
+        root.className = "blu-splitter";
+        primary = node("section", "blu-splitter__primary");
+        secondary = node("section", "blu-splitter__secondary");
+        root.append(
+          primary,
+          node("div", "blu-splitter__handle"),
+          secondary,
+          node("div", "blu-splitter__error"),
+        );
+      }
+      if (p.PrimaryContent !== lastPrimary) {
+        primary.replaceChildren();
+        slot(primary, p.PrimaryContent);
+        lastPrimary = p.PrimaryContent;
+      }
+      if (p.SecondaryContent !== lastSecondary) {
+        secondary.replaceChildren();
+        slot(secondary, p.SecondaryContent);
+        lastSecondary = p.SecondaryContent;
+      }
+    },
+  );
+}

package/src/component-factories/statistic.ts

@@ -0,0 +1,10 @@
+import {installStatistic} from '../runtime/statistic.js';
+import { bind } from "../component-runtime.js";
+import type * as T from "../types.js";
+type NotificationRuntime={show(hostKey:string,message:T.BluNotificationMessage):string;update(hostKey:string,message:T.BluNotificationMessage):string;dismiss(hostKey:string,key?:string):void};
+export function createStatistic(host:HTMLElement,options:T.StatisticOptions,events:T.StatisticEvents={}){
+ installStatistic();
+ return bind(host,"Statistic",options,remember=>({
+  Error:(message)=>{return events.Error?.(message);},
+ }),[],[]);
+}

package/src/component-factories/text-highlight.ts

@@ -0,0 +1,5 @@
+import {installTextHighlight} from '../runtime/text-highlight.js';
+import {bind} from "../component-runtime.js";
+import type * as T from "../types.js";
+export function createTextHighlight(host:HTMLElement, options:T.TextHighlightOptions, events:T.TextHighlightEvents={}) {
+ installTextHighlight();return bind<T.TextHighlightOptions>(host,"TextHighlight",{...{"Text": "Something worth noticing", "Style": "Marker", "Color": "Primary", "IsAnimated": false, "AccessibleLabel": "", "ExtendedClass": ""},...options},remember=>({Error: (message) => {return events.Error?.(message);}}),[],[]);}

package/src/component-factories/time-picker.ts

@@ -0,0 +1,6 @@
+import {installTimePicker} from '../runtime/time-picker.js';
+import {bind} from '../component-runtime.js';
+import type {TimePickerOptions,PickerEvents} from '../types.js';
+export function createTimePicker(host:HTMLElement,options:TimePickerOptions={},events:PickerEvents={}){
+ installTimePicker();return bind<TimePickerOptions>(host,'TimePicker',options,remember=>({Change:(value)=>{remember({Value:value});return events.Change?.(value);},ValidationChanged:(valid,message)=>events.ValidationChanged?.(valid,message),OpenChanged:open=>events.OpenChanged?.(open),Error:message=>events.Error?.(message)}),[],[]);
+}

package/src/component-factories/timeline.ts

@@ -0,0 +1,11 @@
+import {installTimeline} from '../runtime/timeline.js';
+import { bind } from "../component-runtime.js";
+import type * as T from "../types.js";
+type NotificationRuntime={show(hostKey:string,message:T.BluNotificationMessage):string;update(hostKey:string,message:T.BluNotificationMessage):string;dismiss(hostKey:string,key?:string):void};
+export function createTimeline(host:HTMLElement,options:T.TimelineOptions,events:T.TimelineEvents={}){
+ installTimeline();
+ return bind(host,"Timeline",options,remember=>({
+  ItemClick:(key)=>{return events.ItemClick?.(key);},
+  Error:(message)=>{return events.Error?.(message);},
+ }),["Items"],[]);
+}

package/src/component-factories/tour.ts

@@ -0,0 +1,13 @@
+import {installTour} from '../runtime/tour.js';
+import { bind } from "../component-runtime.js";
+import type * as T from "../types.js";
+type NotificationRuntime={show(hostKey:string,message:T.BluNotificationMessage):string;update(hostKey:string,message:T.BluNotificationMessage):string;dismiss(hostKey:string,key?:string):void};
+export function createTour(host:HTMLElement,options:T.TourOptions,events:T.TourEvents={}){
+ installTour();
+ return bind(host,"Tour",options,remember=>({
+  OpenChanged:(isOpen,reason)=>{remember({IsOpen:isOpen});return events.OpenChanged?.(isOpen,reason);},
+  StepChanged:(currentStep,key)=>{remember({CurrentStep:currentStep});return events.StepChanged?.(currentStep,key);},
+  Completed:(key)=>{return events.Completed?.(key);},
+  Error:(message)=>{return events.Error?.(message);},
+ }),["Steps"],[]);
+}

package/src/component-factories/transfer-list.ts

@@ -0,0 +1,159 @@
+import {installTransfer} from '../runtime/transfer.js';
+import { component, node } from "../dom.js";
+import { buttonElement } from "../primitives.js";
+import type { TransferListOptions, TransferListEvents } from "../types.js";
+interface Row {
+  Key: string;
+  Label: string;
+  Description: string;
+  IsDisabled: boolean;
+  IsMarked: boolean;
+}
+interface TransferRuntime {
+  project(
+    items: string,
+    selected: string,
+    availableSearch: string,
+    selectedSearch: string,
+  ): {
+    AvailableRowsJson: string;
+    SelectedRowsJson: string;
+    AvailableCount: number;
+    SelectedCount: number;
+  };
+  move(items: string, selected: string, rows: string, add: boolean): string;
+}
+export function createTransferList(
+  host: HTMLElement,
+  options: TransferListOptions,
+  events: TransferListEvents = {},
+) {
+ installTransfer();
+  const searches = { available: "", selected: "" };
+  return component(host, options, (root, p, update) => {
+    const runtime = (
+      window as unknown as { BluUICommunityRuntime: { Transfer: TransferRuntime } }
+    ).BluUICommunityRuntime.Transfer;
+    const data = JSON.stringify(p.Items),
+      selection = JSON.stringify(p.SelectedKeys || []),
+      projection = runtime.project(
+        data,
+        selection,
+        searches.available,
+        searches.selected,
+      );
+    const rows: { available: Row[]; selected: Row[] } = {
+      available: JSON.parse(projection.AvailableRowsJson),
+      selected: JSON.parse(projection.SelectedRowsJson),
+    };
+    const box = node("div", "blu-transfer"),
+      layout = node("div", "blu-transfer__layout");
+    box.append(layout);
+    const pane = (side: "available" | "selected", label: string) => {
+      const panel = node("div", "blu-transfer__pane");
+      panel.setAttribute("role", "group");
+      panel.setAttribute("aria-label", label);
+      panel.append(
+        node(
+          "div",
+          "blu-transfer__heading",
+          label +
+            " (" +
+            (side === "available"
+              ? projection.AvailableCount
+              : projection.SelectedCount) +
+            ")",
+        ),
+      );
+      if (p.ShowSearch !== false) {
+        const wrap = node("div", "blu-transfer__search"),
+          input = node("input");
+        input.type = "search";
+        input.dataset.side = side;
+        input.setAttribute("aria-label", "Search " + label);
+        input.placeholder = "Search " + label;
+        input.value = searches[side];
+        input.disabled = !!p.IsDisabled;
+        input.oninput = () => {
+          searches[side] = input.value;
+          update({});
+          root
+            .querySelector<HTMLInputElement>(`input[data-side="${side}"]`)
+            ?.focus();
+        };
+        wrap.append(input);
+        panel.append(wrap);
+      }
+      const list = node("div", "blu-transfer__list");
+      list.setAttribute("role", "list");
+      panel.append(list);
+      if (!rows[side].length)
+        list.append(node("p", "blu-transfer__empty", "No matching items."));
+      for (const item of rows[side]) {
+        const line = node(
+          "div",
+          "blu-transfer__row" +
+            (item.IsDisabled ? " blu-transfer__row--disabled" : ""),
+        );
+        line.setAttribute("role", "listitem");
+        const c = node("input");
+        c.type = "checkbox";
+        c.disabled = !!(item.IsDisabled || p.IsDisabled);
+        c.setAttribute(
+          "aria-label",
+          `Mark ${item.Label} to ${side === "available" ? "add" : "remove"}`,
+        );
+        c.onchange = () => {
+          item.IsMarked = c.checked;
+        };
+        const copy = node("div", "blu-transfer__copy");
+        copy.append(
+          node("span", "blu-transfer__label", item.Label),
+          node("span", "blu-transfer__description", item.Description),
+        );
+        line.append(c, copy);
+        list.append(line);
+      }
+      layout.append(panel);
+    };
+    pane("available", p.AvailableLabel || "Available");
+    const commands = node("div", "blu-transfer__commands");
+    layout.append(commands);
+    const move = (add: boolean) => {
+      const keys = JSON.parse(
+        runtime.move(
+          data,
+          selection,
+          JSON.stringify(rows[add ? "available" : "selected"]),
+          add,
+        ),
+      );
+      update({ SelectedKeys: keys });
+      root
+        .querySelector<HTMLButtonElement>(add ? "button" : "button:last-child")
+        ?.focus();
+      void events.SelectionChanged?.(keys);
+    };
+    commands.append(
+      buttonElement(
+        { Label: "Add checked", Size: "Small", IsDisabled: p.IsDisabled },
+        { Click: () => move(true) },
+      ),
+      buttonElement(
+        {
+          Label: "Remove checked",
+          Size: "Small",
+          Variant: "Outlined",
+          IsDisabled: p.IsDisabled,
+        },
+        { Click: () => move(false) },
+      ),
+    );
+    pane("selected", p.SelectedLabel || "Selected");
+    // Keep the live region mounted so selection changes are announced reliably.
+    let status = root.querySelector<HTMLElement>(".blu-transfer__status");
+    if (!status) { status = node("p", "blu-transfer__status"); status.setAttribute("role", "status"); }
+    root.replaceChildren(box, status);
+    status.textContent = projection.SelectedCount + " selected.";
+  });
+}

package/src/component-factories/tree-select.ts

@@ -0,0 +1,83 @@
+import {installTreeSelect} from '../runtime/tree-select.js';
+import { mountRoot, node, slot } from "../dom.js";
+import type * as T from "../types.js";
+type RawEvents = Record<string, (...args: any[]) => unknown>;
+type Raw = {
+  sync(id: string, options: object, events: RawEvents, owner: string): string;
+  destroy(owner: string): void;
+};
+function runtime(): Record<string, Raw> {
+  if (typeof window === "undefined")
+    throw new Error("Mount BluKavantUI in a browser, after the host is connected.");
+  return (window as unknown as { BluUICommunityRuntime: Record<string, Raw> })
+    .BluUICommunityRuntime;
+}
+function bind<P extends object>(
+  host: HTMLElement,
+  kind: string,
+  initial: P,
+  map: (p: P) => object,
+  events: (remember: (p: Partial<P>) => void) => RawEvents,
+  setup?: (root: HTMLElement, p: P) => void,
+): T.Component<P> {
+  const r = mountRoot(host),
+    key = r.id;
+  let props = { ...initial },
+    disposed = false;
+  const raw = runtime()[kind],
+    callbacks = events((p) => {
+      props = { ...props, ...p };
+    });
+  const update = (patch: Partial<P>) => {
+    if (disposed) throw new Error("Component is destroyed.");
+    props = { ...props, ...patch };
+    setup?.(r, props);
+    const error = raw.sync(r.id, map(props), callbacks, key);
+    if (error) throw new Error(error);
+  };
+  try {
+    update({});
+  } catch (e) {
+    raw.destroy(key);
+    r.remove();
+    throw e;
+  }
+  return {
+    element: r,
+    update,
+    destroy() {
+      if (disposed) return;
+      disposed = true;
+      raw.destroy(key);
+      r.remove();
+    },
+  };
+}
+export function createTreeSelect(
+  host: HTMLElement,
+  options: T.TreeSelectOptions,
+  events: T.TreeSelectEvents = {},
+) {
+ installTreeSelect();
+  return bind(
+    host,
+    "TreeSelect",
+    options,
+    (p) => {
+      const { Nodes, SelectedKeys, ...rest } = p;
+      return {
+        ...rest,
+        NodesJson: JSON.stringify(Nodes),
+        SelectedKeysJson: JSON.stringify(SelectedKeys || []),
+      };
+    },
+    (remember) => ({
+      SelectionChanged: (j: string) => {
+        const keys = JSON.parse(j);
+        remember({ SelectedKeys: keys });
+        return events.SelectionChanged?.(keys);
+      },
+      Error: (message) => events.Error?.(message),
+    }),
+  );
+}

package/src/component-factories/tree-view.ts

@@ -0,0 +1,115 @@
+import {installTree} from '../runtime/tree.js';
+import { mountRoot, node, slot } from "../dom.js";
+import type * as T from "../types.js";
+type RawEvents = Record<string, (...args: any[]) => unknown>;
+type Raw = {
+  sync(id: string, options: object, events: RawEvents, owner: string): string;
+  destroy(owner: string): void;
+};
+function runtime(): Record<string, Raw> {
+  if (typeof window === "undefined")
+    throw new Error("Mount BluKavantUI in a browser, after the host is connected.");
+  return (window as unknown as { BluUICommunityRuntime: Record<string, Raw> })
+    .BluUICommunityRuntime;
+}
+function bind<P extends object>(
+  host: HTMLElement,
+  kind: string,
+  initial: P,
+  map: (p: P) => object,
+  events: (remember: (p: Partial<P>) => void) => RawEvents,
+  setup?: (root: HTMLElement, p: P) => void,
+): T.Component<P> {
+  const r = mountRoot(host),
+    key = r.id;
+  let props = { ...initial },
+    disposed = false;
+  const raw = runtime()[kind],
+    callbacks = events((p) => {
+      props = { ...props, ...p };
+    });
+  const update = (patch: Partial<P>) => {
+    if (disposed) throw new Error("Component is destroyed.");
+    props = { ...props, ...patch };
+    setup?.(r, props);
+    const error = raw.sync(r.id, map(props), callbacks, key);
+    if (error) throw new Error(error);
+  };
+  try {
+    update({});
+  } catch (e) {
+    raw.destroy(key);
+    r.remove();
+    throw e;
+  }
+  return {
+    element: r,
+    update,
+    destroy() {
+      if (disposed) return;
+      disposed = true;
+      raw.destroy(key);
+      r.remove();
+    },
+  };
+}
+export function createTreeView(
+  host: HTMLElement,
+  options: T.TreeViewOptions,
+  events: T.TreeViewEvents = {},
+): T.Component<T.TreeViewOptions> {
+ installTree();
+  const r = mountRoot(host);
+  r.className = "blu-tree";
+  let props = { ...options },
+    disposed = false;
+  const raw = (
+    runtime() as unknown as {
+      Tree: {
+        create(id: string, p: object, e: RawEvents): void;
+        update(id: string, p: object): void;
+        destroy(id: string): void;
+      };
+    }
+  ).Tree;
+  const map = () => {
+    const { Nodes, InitialExpandedKeys, ...rest } = props;
+    return {
+      ...rest,
+      NodesJson: JSON.stringify(Nodes),
+      InitialExpandedKeysJson: JSON.stringify(InitialExpandedKeys || []),
+    };
+  };
+  try {
+    raw.create(r.id, map(), {
+      SelectionChanged: (key) => {
+        props.SelectedKey = key;
+        return events.SelectionChanged?.(key);
+      },
+      ExpandedChanged: (j) => {
+        const keys = JSON.parse(j);
+        props.InitialExpandedKeys = keys;
+        return events.ExpandedChanged?.(keys);
+      },
+      Error: (message) => events.Error?.(message),
+    });
+  } catch (e) {
+    raw.destroy(r.id);
+    r.remove();
+    throw e;
+  }
+  return {
+    element: r,
+    update(p) {
+      if (disposed) throw new Error("Component is destroyed.");
+      props = { ...props, ...p };
+      raw.update(r.id, map());
+    },
+    destroy() {
+      if (disposed) return;
+      disposed = true;
+      raw.destroy(r.id);
+      r.remove();
+    },
+  };
+}