@ikonai/sdk-react-ui 0.0.1

package/base/base-div.d.ts

@@ -0,0 +1,2 @@
+import { IkonUiComponentResolver } from '../ikon-ui-registry';
+export declare function createBaseDivResolver(): IkonUiComponentResolver;

package/base/base-module.d.ts

@@ -0,0 +1,5 @@
+import { IkonUiComponentResolver, IkonUiModuleLoader, IkonUiRegistry } from '../ikon-ui-registry';
+export declare const IKON_UI_BASE_MODULE = "base";
+export declare function createBaseResolvers(): IkonUiComponentResolver[];
+export declare const loadBaseModule: IkonUiModuleLoader;
+export declare function registerBaseModule(registry: IkonUiRegistry): void;

package/ikon-ui-registry.d.ts

@@ -0,0 +1,15 @@
+import { UiComponentLibrary, UiComponentRenderer, UiElementNode } from './renderer';
+export type IkonUiComponentResolver = (node: UiElementNode) => UiComponentRenderer | undefined;
+export type IkonUiModuleLoaderResult = IkonUiComponentResolver | IkonUiComponentResolver[] | undefined | void;
+export type IkonUiModuleLoader = () => Promise<IkonUiModuleLoaderResult> | IkonUiModuleLoaderResult;
+export declare class IkonUiRegistry implements UiComponentLibrary {
+    private readonly baseResolvers;
+    private readonly moduleLoaders;
+    private readonly moduleResolvers;
+    private activeModuleOrder;
+    registerResolvers(resolvers: IkonUiComponentResolver | IkonUiComponentResolver[]): void;
+    registerModule(name: string, loader: IkonUiModuleLoader): void;
+    loadRegisteredModules(): Promise<boolean>;
+    resolve(node: UiElementNode): UiComponentRenderer | undefined;
+}
+export declare function createIkonUiRegistry(): IkonUiRegistry;

package/ikon-ui.d.ts

@@ -0,0 +1,31 @@
+import { IkonClient } from '../../sdk/src/index.ts';
+import { IkonUICore, IkonUiStreamListener, UiStyleListener, UiStylePayload } from '../../sdk-ui/src/index.ts';
+import { IkonUiStoreEntry } from './surface';
+export interface IkonUIConfig {
+    client?: IkonClient | null;
+    core?: IkonUICore;
+}
+type IkonUiListener = IkonUiStreamListener;
+export declare class IkonUi {
+    private readonly core;
+    private readonly ownsCore;
+    private readonly stores;
+    private readonly listeners;
+    private readonly unsubscribeUpdates;
+    private readonly unsubscribeClears;
+    private readonly unsubscribeStoreChanges;
+    constructor(config?: IkonUIConfig);
+    dispose(): void;
+    getStores(): ReadonlyMap<string, IkonUiStoreEntry>;
+    getUiStyles(): readonly UiStylePayload[];
+    subscribe(listener: IkonUiListener): () => void;
+    subscribeToStyles(listener: UiStyleListener): () => void;
+    private handleUiUpdate;
+    private handleUiStreamCleared;
+    private syncStreamSnapshot;
+    private syncAllStreams;
+    private ensureStoreEntry;
+    private updateCategory;
+    private notify;
+}
+export {};

package/index.d.ts

@@ -0,0 +1,9 @@
+export { IkonUi, type IkonUIConfig } from './ikon-ui';
+export { IkonUiRegistry, createIkonUiRegistry, type IkonUiComponentResolver, type IkonUiModuleLoader, type IkonUiModuleLoaderResult, } from './ikon-ui-registry';
+export { IkonUiSurface, IKON_UI_STREAM_CATEGORY, isIkonUiCategoryMatch, type IkonUiCategory, type IkonUiStoreEntry, } from './surface';
+export { useIkonStyles, type IkonUiStyleSource } from './use-ikon-styles';
+export { parseIkonUiInitPayload, normalizeIkonUiModuleList, readIkonUiModules, readIkonUiModulesFromSources, areIkonUiModuleListsEqual, type IkonUiInitInstruction, type IkonUiInitModulePayload, type IkonUiModuleList, } from './modules';
+export { IKON_UI_BASE_MODULE, createBaseResolvers, loadBaseModule, registerBaseModule, } from './base/base-module';
+export { UiRenderer, type UiRendererProps, UiComponentRegistry, createComponentLibrary, useUiStore, } from './renderer';
+export type { UiComponentRenderer, UiComponentLibrary, UiElementNode, UiRenderContext, UiComponentRendererProps, ParsedUiUpdate, UiSnapshot, UiFullSnapshot, UiDiffSnapshot, UiElementDiffNode, TextDelta, UiElementProps, UiUpdateType, UiStoreSnapshot, UiOptimisticPatchState, } from './renderer';
+export { UiStreamStore, type UiStylePayload } from '../../sdk-ui/src/index.ts';

package/index.js

@@ -0,0 +1,1106 @@
+import { createLogger as G } from "@ikonai/sdk";
+import { IkonUICore as Te, UiStreamStore as Re } from "@ikonai/sdk-ui";
+import { UiStreamStore as Mt } from "@ikonai/sdk-ui";
+import Ce, { useSyncExternalStore as we, Fragment as Ne, useMemo as Oe, memo as ke, useCallback as re, useEffect as ne } from "react";
+var z = { exports: {} }, j = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var se;
+function Ae() {
+  if (se) return j;
+  se = 1;
+  var n = Symbol.for("react.transitional.element"), e = Symbol.for("react.fragment");
+  function t(r, s, i) {
+    var a = null;
+    if (i !== void 0 && (a = "" + i), s.key !== void 0 && (a = "" + s.key), "key" in s) {
+      i = {};
+      for (var l in s)
+        l !== "key" && (i[l] = s[l]);
+    } else i = s;
+    return s = i.ref, {
+      $$typeof: n,
+      type: r,
+      key: a,
+      ref: s !== void 0 ? s : null,
+      props: i
+    };
+  }
+  return j.Fragment = e, j.jsx = t, j.jsxs = t, j;
+}
+var I = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var oe;
+function _e() {
+  return oe || (oe = 1, process.env.NODE_ENV !== "production" && function() {
+    function n(o) {
+      if (o == null) return null;
+      if (typeof o == "function")
+        return o.$$typeof === be ? null : o.displayName || o.name || null;
+      if (typeof o == "string") return o;
+      switch (o) {
+        case b:
+          return "Fragment";
+        case h:
+          return "Profiler";
+        case f:
+          return "StrictMode";
+        case k:
+          return "Suspense";
+        case x:
+          return "SuspenseList";
+        case ge:
+          return "Activity";
+      }
+      if (typeof o == "object")
+        switch (typeof o.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), o.$$typeof) {
+          case _:
+            return "Portal";
+          case C:
+            return (o.displayName || "Context") + ".Provider";
+          case y:
+            return (o._context.displayName || "Context") + ".Consumer";
+          case R:
+            var c = o.render;
+            return o = o.displayName, o || (o = c.displayName || c.name || "", o = o !== "" ? "ForwardRef(" + o + ")" : "ForwardRef"), o;
+          case Se:
+            return c = o.displayName || null, c !== null ? c : n(o.type) || "Memo";
+          case X:
+            c = o._payload, o = o._init;
+            try {
+              return n(o(c));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function e(o) {
+      return "" + o;
+    }
+    function t(o) {
+      try {
+        e(o);
+        var c = !1;
+      } catch {
+        c = !0;
+      }
+      if (c) {
+        c = console;
+        var m = c.error, S = typeof Symbol == "function" && Symbol.toStringTag && o[Symbol.toStringTag] || o.constructor.name || "Object";
+        return m.call(
+          c,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          S
+        ), e(o);
+      }
+    }
+    function r(o) {
+      if (o === b) return "<>";
+      if (typeof o == "object" && o !== null && o.$$typeof === X)
+        return "<...>";
+      try {
+        var c = n(o);
+        return c ? "<" + c + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function s() {
+      var o = F.A;
+      return o === null ? null : o.getOwner();
+    }
+    function i() {
+      return Error("react-stack-top-frame");
+    }
+    function a(o) {
+      if (H.call(o, "key")) {
+        var c = Object.getOwnPropertyDescriptor(o, "key").get;
+        if (c && c.isReactWarning) return !1;
+      }
+      return o.key !== void 0;
+    }
+    function l(o, c) {
+      function m() {
+        K || (K = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          c
+        ));
+      }
+      m.isReactWarning = !0, Object.defineProperty(o, "key", {
+        get: m,
+        configurable: !0
+      });
+    }
+    function u() {
+      var o = n(this.type);
+      return Z[o] || (Z[o] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), o = this.props.ref, o !== void 0 ? o : null;
+    }
+    function d(o, c, m, S, N, w, D, q) {
+      return m = w.ref, o = {
+        $$typeof: O,
+        type: o,
+        key: c,
+        props: w,
+        _owner: N
+      }, (m !== void 0 ? m : null) !== null ? Object.defineProperty(o, "ref", {
+        enumerable: !1,
+        get: u
+      }) : Object.defineProperty(o, "ref", { enumerable: !1, value: null }), o._store = {}, Object.defineProperty(o._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(o, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(o, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: D
+      }), Object.defineProperty(o, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: q
+      }), Object.freeze && (Object.freeze(o.props), Object.freeze(o)), o;
+    }
+    function p(o, c, m, S, N, w, D, q) {
+      var g = c.children;
+      if (g !== void 0)
+        if (S)
+          if (ve(g)) {
+            for (S = 0; S < g.length; S++)
+              E(g[S]);
+            Object.freeze && Object.freeze(g);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else E(g);
+      if (H.call(c, "key")) {
+        g = n(o);
+        var M = Object.keys(c).filter(function(Ee) {
+          return Ee !== "key";
+        });
+        S = 0 < M.length ? "{key: someKey, " + M.join(": ..., ") + ": ...}" : "{key: someKey}", te[g + S] || (M = 0 < M.length ? "{" + M.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          S,
+          g,
+          M,
+          g
+        ), te[g + S] = !0);
+      }
+      if (g = null, m !== void 0 && (t(m), g = "" + m), a(c) && (t(c.key), g = "" + c.key), "key" in c) {
+        m = {};
+        for (var Y in c)
+          Y !== "key" && (m[Y] = c[Y]);
+      } else m = c;
+      return g && l(
+        m,
+        typeof o == "function" ? o.displayName || o.name || "Unknown" : o
+      ), d(
+        o,
+        g,
+        w,
+        N,
+        s(),
+        m,
+        D,
+        q
+      );
+    }
+    function E(o) {
+      typeof o == "object" && o !== null && o.$$typeof === O && o._store && (o._store.validated = 1);
+    }
+    var T = Ce, O = Symbol.for("react.transitional.element"), _ = Symbol.for("react.portal"), b = Symbol.for("react.fragment"), f = Symbol.for("react.strict_mode"), h = Symbol.for("react.profiler"), y = Symbol.for("react.consumer"), C = Symbol.for("react.context"), R = Symbol.for("react.forward_ref"), k = Symbol.for("react.suspense"), x = Symbol.for("react.suspense_list"), Se = Symbol.for("react.memo"), X = Symbol.for("react.lazy"), ge = Symbol.for("react.activity"), be = Symbol.for("react.client.reference"), F = T.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, H = Object.prototype.hasOwnProperty, ve = Array.isArray, $ = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    T = {
+      "react-stack-bottom-frame": function(o) {
+        return o();
+      }
+    };
+    var K, Z = {}, Q = T["react-stack-bottom-frame"].bind(
+      T,
+      i
+    )(), ee = $(r(i)), te = {};
+    I.Fragment = b, I.jsx = function(o, c, m, S, N) {
+      var w = 1e4 > F.recentlyCreatedOwnerStacks++;
+      return p(
+        o,
+        c,
+        m,
+        !1,
+        S,
+        N,
+        w ? Error("react-stack-top-frame") : Q,
+        w ? $(r(o)) : ee
+      );
+    }, I.jsxs = function(o, c, m, S, N) {
+      var w = 1e4 > F.recentlyCreatedOwnerStacks++;
+      return p(
+        o,
+        c,
+        m,
+        !0,
+        S,
+        N,
+        w ? Error("react-stack-top-frame") : Q,
+        w ? $(r(o)) : ee
+      );
+    };
+  }()), I;
+}
+var ie;
+function Me() {
+  return ie || (ie = 1, process.env.NODE_ENV === "production" ? z.exports = Ae() : z.exports = _e()), z.exports;
+}
+var A = Me();
+function je(n) {
+  return we(
+    (e) => n.subscribe(e),
+    () => n.getSnapshot(),
+    () => n.getSnapshot()
+  );
+}
+const Ie = G("UIRenderer");
+function Pe(n) {
+  if (n === void 0)
+    return "{}";
+  if (typeof n == "string")
+    return n;
+  try {
+    return JSON.stringify(n);
+  } catch {
+    return "{}";
+  }
+}
+function me(n) {
+  const e = Le(n), t = Ue(n);
+  return e === n.children && t === n.styleIds ? n : {
+    ...n,
+    ...e !== n.children ? { children: e } : {},
+    ...t !== n.styleIds ? { styleIds: t } : {}
+  };
+}
+function Ue(n) {
+  const e = n.styleIds;
+  return Array.isArray(e) ? e : [];
+}
+function Le(n) {
+  const e = n.children;
+  return Array.isArray(e) ? e : [];
+}
+function xe({ node: n, renderer: e, library: t, context: r, className: s }) {
+  const i = me(n), a = i.children.map((u) => L(u, t, r)), l = e;
+  return /* @__PURE__ */ A.jsx(
+    l,
+    {
+      node: i,
+      context: r,
+      children: a,
+      className: s,
+      styleIds: i.styleIds
+    }
+  );
+}
+function L(n, e, t) {
+  const r = me(n), s = r.children;
+  if (r.type === "root")
+    return /* @__PURE__ */ A.jsx(Ne, { children: s.map((u) => L(u, e, t)) }, r.id);
+  const i = e.resolve(r);
+  if (!i)
+    return Ie.warn(`No renderer for node type ${r.type}`), null;
+  const a = r.styleIds, l = a.length > 0 ? a.join(" ") : void 0;
+  return /* @__PURE__ */ A.jsx(
+    xe,
+    {
+      node: r,
+      renderer: i,
+      library: e,
+      context: t,
+      className: l
+    },
+    r.id
+  );
+}
+function ze({ store: n, library: e, containerId: t, emptyFallback: r = null, onAction: s }) {
+  const i = je(n), a = t ?? i.rootContainerId;
+  if (!a) return r;
+  const l = i.containers.get(a);
+  if (!l) return r;
+  const u = {
+    getPayload: (d) => i.payloads.get(d),
+    renderChildren: (d) => Array.isArray(d) ? d.map((p) => L(p, e, u)) : [],
+    renderContainer: (d) => {
+      const p = i.containers.get(d);
+      return p ? L(p, e, u) : null;
+    },
+    dispatchAction: (d, p) => {
+      if (!d)
+        return;
+      const E = Pe(p);
+      s?.(d, E);
+    }
+  };
+  return L(l, e, u);
+}
+class Be {
+  constructor(e, t) {
+    if (this.fallback = t, e)
+      for (const [r, s] of e)
+        this.renderers.set(r, s);
+  }
+  renderers = /* @__PURE__ */ new Map();
+  register(e, t) {
+    this.renderers.set(e, t);
+  }
+  setFallback(e) {
+    this.fallback = e;
+  }
+  resolve(e) {
+    return this.renderers.get(e.type) ?? this.fallback;
+  }
+}
+function Et(n, e) {
+  const t = Object.entries(n);
+  return new Be(t, e);
+}
+const V = "ikon-ui";
+function Fe(n, e) {
+  return n === e;
+}
+function Tt({ stores: n, library: e, category: t = V, version: r, onAction: s }) {
+  const i = Oe(() => {
+    const a = [];
+    for (const [l, u] of n) {
+      if (!Fe(u.category, t))
+        continue;
+      const d = u.store.getSnapshot();
+      !d.rootContainerId || !d.containers.has(d.rootContainerId) || a.push({ key: l, store: u.store });
+    }
+    return a;
+  }, [n, t, r]);
+  return i.length === 0 ? null : /* @__PURE__ */ A.jsx(A.Fragment, { children: i.map(({ key: a, store: l }) => /* @__PURE__ */ A.jsx(ze, { store: l, library: e, onAction: s }, a)) });
+}
+const ae = G("IkonUI");
+class Rt {
+  core;
+  ownsCore;
+  stores = /* @__PURE__ */ new Map();
+  listeners = /* @__PURE__ */ new Set();
+  unsubscribeUpdates;
+  unsubscribeClears;
+  unsubscribeStoreChanges;
+  constructor(e) {
+    ae.debug("Created"), this.core = e?.core ?? new Te({ client: e?.client }), this.ownsCore = !e?.core, this.unsubscribeUpdates = this.core.subscribeToUiUpdates(this.handleUiUpdate), this.unsubscribeClears = this.core.subscribeToUiStreamCleared(this.handleUiStreamCleared), this.unsubscribeStoreChanges = this.core.uiStore.subscribe(this.syncStreamSnapshot), this.syncAllStreams();
+  }
+  dispose() {
+    this.unsubscribeUpdates(), this.unsubscribeClears(), this.unsubscribeStoreChanges(), this.ownsCore && this.core.dispose(), this.listeners.clear(), this.stores.clear(), ae.debug("Disposed");
+  }
+  getStores() {
+    return this.stores;
+  }
+  getUiStyles() {
+    return this.core.getUiStyles();
+  }
+  subscribe(e) {
+    return this.listeners.add(e), () => {
+      this.listeners.delete(e);
+    };
+  }
+  subscribeToStyles(e) {
+    return this.core.subscribeToUiStyles(e);
+  }
+  handleUiUpdate = (e, t) => {
+    const s = this.ensureStoreEntry(e).store.apply(t), i = this.updateCategory(e);
+    (s || i) && this.notify(e);
+  };
+  handleUiStreamCleared = (e) => {
+    this.stores.delete(e) && this.notify(e);
+  };
+  syncStreamSnapshot = (e) => {
+    const t = this.core.uiStore.getSnapshot(e);
+    if (!t || !t.rootContainerId) {
+      this.handleUiStreamCleared(e);
+      return;
+    }
+    const r = t.containers.get(t.rootContainerId);
+    if (!r) {
+      this.handleUiStreamCleared(e);
+      return;
+    }
+    const s = this.ensureStoreEntry(e), i = {
+      snapshot: {
+        type: "full",
+        version: t.version ?? 0,
+        metadata: { containerId: t.rootContainerId },
+        root: r
+      },
+      payloads: t.payloads
+    }, a = s.store.apply(i), l = this.updateCategory(e, t.category);
+    (a || l) && this.notify(e);
+  };
+  syncAllStreams() {
+    const e = this.core.uiStore.getSnapshots(), t = /* @__PURE__ */ new Set();
+    for (const r of e)
+      this.syncStreamSnapshot(r.streamId), t.add(r.streamId);
+    for (const r of this.stores.keys())
+      t.has(r) || (this.stores.delete(r), this.notify(r));
+  }
+  ensureStoreEntry(e) {
+    const t = this.stores.get(e);
+    if (t)
+      return t;
+    const r = {
+      category: V,
+      store: new Re()
+    };
+    return this.stores.set(e, r), r;
+  }
+  updateCategory(e, t) {
+    const r = this.stores.get(e);
+    if (!r)
+      return !1;
+    const s = t ?? this.core.uiStore.getSnapshot(e)?.category ?? V;
+    return r.category === s ? !1 : (this.stores.set(e, { ...r, category: s }), !0);
+  }
+  notify(e) {
+    for (const t of this.listeners)
+      t(e);
+  }
+}
+function $e() {
+  const n = ke(function({ node: t, context: r, className: s }) {
+    const i = t.children?.length ? r.renderChildren(t.children) : void 0;
+    return /* @__PURE__ */ A.jsx("div", { className: s, children: i });
+  });
+  return ({ type: e }) => {
+    if (e === "common.div")
+      return n;
+  };
+}
+const De = "base";
+function qe() {
+  return [$e()];
+}
+const Ye = async () => qe();
+function We(n) {
+  n.registerModule(De, Ye);
+}
+const P = G("UIRegistry");
+class Ve {
+  baseResolvers = [];
+  moduleLoaders = /* @__PURE__ */ new Map();
+  moduleResolvers = /* @__PURE__ */ new Map();
+  activeModuleOrder = [];
+  registerResolvers(e) {
+    const t = Array.isArray(e) ? e : [e];
+    this.baseResolvers.push(...t.filter(Boolean));
+  }
+  registerModule(e, t) {
+    const r = this.moduleLoaders.get(e);
+    if (!r) {
+      P.debug(`Register module ${e}`), this.moduleLoaders.set(e, t);
+      return;
+    }
+    r !== t && (P.debug(`Register module ${e} (replacing loader)`), this.moduleLoaders.set(e, t), this.moduleResolvers.delete(e));
+  }
+  async loadRegisteredModules() {
+    let e = !1;
+    for (const [r, s] of this.moduleLoaders.entries())
+      if (!this.moduleResolvers.has(r))
+        try {
+          const i = await s(), a = Ge(i);
+          this.moduleResolvers.set(r, a), P.debug(`Loaded module ${r}`), e = !0;
+        } catch (i) {
+          P.error(`[IkonUiRegistry] Failed to load module '${r}'.`, i);
+        }
+    const t = [];
+    for (const r of this.moduleLoaders.keys())
+      this.moduleResolvers.has(r) && t.push(r);
+    return Xe(t, this.activeModuleOrder) || (this.activeModuleOrder = t, e = !0), e;
+  }
+  resolve(e) {
+    for (const t of this.baseResolvers) {
+      const r = t(e);
+      if (r) return r;
+    }
+    for (const t of this.activeModuleOrder) {
+      const r = this.moduleResolvers.get(t);
+      if (!r) {
+        P.warn(`Missing resolvers for module ${t}`);
+        continue;
+      }
+      for (const s of r) {
+        const i = s(e);
+        if (i) return i;
+      }
+    }
+  }
+}
+function Ct() {
+  const n = new Ve();
+  return We(n), n.loadRegisteredModules(), n;
+}
+function Je(n) {
+  return Array.isArray(n) ? n : [n];
+}
+function Ge(n) {
+  return n ? Je(n).flatMap((e) => e ? Array.isArray(e) ? e.filter(Boolean) : [e] : []) : [];
+}
+function Xe(n, e) {
+  if (n.length !== e.length)
+    return !1;
+  for (let t = 0; t < n.length; t += 1)
+    if (n[t] !== e[t])
+      return !1;
+  return !0;
+}
+const ce = {
+  ease: [0.25, 0.1, 0.25, 1],
+  "ease-in": [0.42, 0, 1, 1],
+  "ease-out": [0, 0, 0.58, 1],
+  "ease-in-out": [0.42, 0, 0.58, 1],
+  "ease-in-sine": [0.47, 0, 0.745, 0.715],
+  "ease-out-sine": [0.39, 0.575, 0.565, 1],
+  "ease-in-out-sine": [0.445, 0.05, 0.55, 0.95],
+  "ease-in-quad": [0.55, 0.085, 0.68, 0.53],
+  "ease-out-quad": [0.25, 0.46, 0.45, 0.94],
+  "ease-in-out-quad": [0.455, 0.03, 0.515, 0.955],
+  "ease-in-cubic": [0.55, 0.055, 0.675, 0.19],
+  "ease-out-cubic": [0.215, 0.61, 0.355, 1],
+  "ease-in-out-cubic": [0.645, 0.045, 0.355, 1],
+  "ease-in-quart": [0.895, 0.03, 0.685, 0.22],
+  "ease-out-quart": [0.165, 0.84, 0.44, 1],
+  "ease-in-out-quart": [0.77, 0, 0.175, 1],
+  "ease-in-quint": [0.755, 0.05, 0.855, 0.06],
+  "ease-out-quint": [0.23, 1, 0.32, 1],
+  "ease-in-out-quint": [0.86, 0, 0.07, 1],
+  "ease-in-expo": [0.95, 0.05, 0.795, 0.035],
+  "ease-out-expo": [0.19, 1, 0.22, 1],
+  "ease-in-out-expo": [1, 0, 0, 1],
+  "ease-in-circ": [0.6, 0.04, 0.98, 0.335],
+  "ease-out-circ": [0.075, 0.82, 0.165, 1],
+  "ease-in-out-circ": [0.785, 0.135, 0.15, 0.86],
+  "ease-in-back": [0.6, -0.28, 0.735, 0.045],
+  "ease-out-back": [0.175, 0.885, 0.32, 1.275],
+  "ease-in-out-back": [0.68, -0.55, 0.265, 1.55]
+};
+function v(n) {
+  return n <= 0 ? 0 : n >= 1 ? 1 : n;
+}
+function le(n) {
+  if (n == null) return;
+  const e = `${n}`.trim();
+  if (!e) return;
+  const t = Number.parseFloat(e);
+  return Number.isFinite(t) ? t : void 0;
+}
+function ue(n) {
+  const e = globalThis.CSS;
+  return e?.escape ? e.escape(n) : n.replace(/[^a-zA-Z0-9_-]/g, (t) => `\\${t}`);
+}
+function de(n, e, t, r) {
+  const p = new Float32Array(11);
+  function E(f, h, y) {
+    return ((3 * h - 3 * y + 1) * f + (3 * y - 6 * h)) * f * f + 3 * h * f;
+  }
+  function T(f, h, y) {
+    return 3 * (3 * h - 3 * y + 1) * f * f + 2 * (3 * y - 6 * h) * f + 3 * h;
+  }
+  function O(f, h) {
+    for (let y = 0; y < 4; y += 1) {
+      const C = T(h, n, t);
+      if (C === 0)
+        return h;
+      const R = E(h, n, t) - f;
+      h -= R / C;
+    }
+    return h;
+  }
+  function _(f, h, y) {
+    let C = 0, R = 0, k = 0;
+    do
+      R = h + (y - h) / 2, C = E(R, n, t) - f, C > 0 ? y = R : h = R;
+    while (Math.abs(C) > 1e-7 && ++k < 10);
+    return R;
+  }
+  function b(f) {
+    let h = 0, y = 1;
+    const C = 10;
+    for (; y !== C && p[y] <= f; y += 1)
+      h += 0.1;
+    y -= 1;
+    const R = (f - p[y]) / (p[y + 1] - p[y]), k = h + R * 0.1, x = T(k, n, t);
+    return x >= 1e-3 ? O(f, k) : x === 0 ? k : _(f, h, h + 0.1);
+  }
+  for (let f = 0; f < 11; f += 1)
+    p[f] = E(f * 0.1, n, t);
+  return (f) => f <= 0 ? 0 : f >= 1 ? 1 : E(b(f), e, r);
+}
+function He(n) {
+  const e = /steps\(\s*([0-9]+)\s*(?:,\s*([a-z-]+)\s*)?\)/i.exec(n);
+  if (!e)
+    return (s) => v(s);
+  const t = Math.max(1, parseInt(e[1], 10)), r = (e[2] ?? "end").toLowerCase();
+  return r === "start" || r === "jump-start" ? (s) => v(Math.ceil(s * t) / t) : r === "none" || r === "jump-none" ? (s) => v(Math.round(s * t) / t) : r === "both" || r === "jump-both" ? (s) => v((Math.floor(s * t) + 0.5) / t) : (s) => v(Math.floor(s * t) / t);
+}
+function Ke(n) {
+  if (!n)
+    return (t) => v(t);
+  const e = n.trim().toLowerCase();
+  if (!e || e === "linear")
+    return (t) => v(t);
+  if (ce[e]) {
+    const [t, r, s, i] = ce[e], a = de(t, r, s, i);
+    return (l) => v(a(v(l)));
+  }
+  if (e.startsWith("cubic-bezier(") && e.endsWith(")")) {
+    const r = e.slice(13, -1).split(",").map((s) => Number.parseFloat(s.trim()));
+    if (r.length === 4 && r.every((s) => Number.isFinite(s))) {
+      const [s, i, a, l] = r, u = de(s, i, a, l);
+      return (d) => v(u(v(d)));
+    }
+  }
+  if (e.startsWith("steps(") && e.endsWith(")")) {
+    const t = He(e);
+    return (r) => t(v(r));
+  }
+  return (t) => v(t);
+}
+function Ze(n) {
+  if (!n)
+    return;
+  const e = /(-?\d+(?:\.\d+)?)\s*\.\.\s*(-?\d+(?:\.\d+)?)\s*->\s*(-?\d+(?:\.\d+)?)\s*\.\.\s*(-?\d+(?:\.\d+)?)/.exec(n);
+  if (!e)
+    return;
+  const [t, r, s, i] = e.slice(1).map((a) => Number.parseFloat(a));
+  if (![t, r, s, i].some((a) => !Number.isFinite(a)))
+    return { inStart: t, inEnd: r, outStart: s, outEnd: i };
+}
+class Qe {
+  bindingsByStyle = /* @__PURE__ */ new Map();
+  observer;
+  observeScheduled = !1;
+  pendingScanStyles = /* @__PURE__ */ new Set();
+  scanScheduled = !1;
+  elementStates = /* @__PURE__ */ new Map();
+  styleToElements = /* @__PURE__ */ new Map();
+  globalCleanups = /* @__PURE__ */ new Set();
+  registerStyle(e, t) {
+    if (!e)
+      return;
+    const r = this.parseMetadata(t);
+    if (!r) {
+      this.bindingsByStyle.delete(e), this.cleanupStyle(e);
+      return;
+    }
+    this.bindingsByStyle.set(e, r), this.cleanupStyle(e), this.ensureObserver(), this.scheduleScan(e);
+  }
+  reset() {
+    for (const e of Array.from(this.globalCleanups))
+      try {
+        e();
+      } catch (t) {
+        console.warn("[MotionController] Failed to cleanup binding listener", t);
+      }
+    this.globalCleanups.clear(), this.elementStates.clear(), this.styleToElements.clear(), this.bindingsByStyle.clear(), this.pendingScanStyles.clear(), this.scanScheduled = !1, this.observer && (this.observer.disconnect(), this.observer = void 0);
+  }
+  parseMetadata(e) {
+    if (e)
+      try {
+        const r = (JSON.parse(e).motionBindings ?? []).map((s) => this.parseBinding(s)).filter((s) => s !== void 0);
+        return r.length === 0 ? void 0 : { bindings: r };
+      } catch (t) {
+        console.warn("[MotionController] Failed to parse motion metadata", t);
+        return;
+      }
+  }
+  parseBinding(e) {
+    const t = e.source?.trim();
+    if (!t)
+      return;
+    const r = le(e.min) ?? 0, s = le(e.max), i = s === void 0 ? r + 100 : s, a = (e.clamp ?? "clamp").trim().toLowerCase(), l = !!e.reverse, u = Ke(e.ease), d = Ze(e.map), p = e.targetId?.trim() || void 0;
+    return Number.isNaN(r) || Number.isNaN(i) ? void 0 : {
+      source: t.toLowerCase(),
+      min: r,
+      max: i,
+      clamp: a === "freeze-start" || a === "freeze-end" || a === "unclamped" ? a : "clamp",
+      reverse: l,
+      ease: u,
+      map: d,
+      targetId: p
+    };
+  }
+  ensureObserver() {
+    if (typeof document > "u" || this.observer)
+      return;
+    const e = () => {
+      this.observer || typeof document > "u" || (this.observer = new MutationObserver((t) => this.handleMutations(t)), this.observer.observe(document.body, {
+        childList: !0,
+        subtree: !0,
+        attributes: !0,
+        attributeFilter: ["class"]
+      }));
+    };
+    document.readyState === "loading" ? this.observeScheduled || (this.observeScheduled = !0, document.addEventListener(
+      "DOMContentLoaded",
+      () => {
+        this.observeScheduled = !1, e();
+      },
+      { once: !0 }
+    )) : e();
+  }
+  scheduleScan(e) {
+    if (typeof document > "u" || (this.pendingScanStyles.add(e), this.scanScheduled))
+      return;
+    const t = () => {
+      if (this.pendingScanStyles.size === 0) {
+        this.scanScheduled = !1;
+        return;
+      }
+      const s = Array.from(this.pendingScanStyles);
+      this.pendingScanStyles.clear(), this.scanScheduled = !1;
+      for (const i of s)
+        this.scanExistingNodes(i);
+    }, r = () => {
+      this.scanScheduled = !0, typeof queueMicrotask == "function" ? queueMicrotask(t) : setTimeout(t, 0);
+    };
+    document.readyState === "loading" ? document.addEventListener(
+      "DOMContentLoaded",
+      () => {
+        r();
+      },
+      { once: !0 }
+    ) : r();
+  }
+  scanExistingNodes(e) {
+    const t = this.bindingsByStyle.get(e);
+    if (!t || typeof document > "u")
+      return;
+    const r = `.${ue(e)}`;
+    document.querySelectorAll(r).forEach((i) => this.applyStyleToElement(i, e, t));
+  }
+  applyStyleToElement(e, t, r) {
+    this.ensureStyleState(e, t) && this.attachBindings(e, t, r);
+  }
+  ensureStyleState(e, t) {
+    let r = this.elementStates.get(e);
+    if (r || (r = /* @__PURE__ */ new Map(), this.elementStates.set(e, r)), r.has(t))
+      return !1;
+    r.set(t, /* @__PURE__ */ new Set());
+    let s = this.styleToElements.get(t);
+    return s || (s = /* @__PURE__ */ new Set(), this.styleToElements.set(t, s)), s.add(e), !0;
+  }
+  attachBindings(e, t, r) {
+    for (const s of r.bindings)
+      this.attachBinding(e, t, s);
+  }
+  attachBinding(e, t, r) {
+    switch (r.source) {
+      case "scrolly":
+        this.attachScrollBinding(e, t, r);
+        break;
+    }
+  }
+  attachScrollBinding(e, t, r) {
+    const s = this.resolveScrollContainer(e, r);
+    if (!s)
+      return;
+    const i = () => {
+      this.applyBindingValues(e, r, s.scrollTop);
+    };
+    i();
+    const a = new AbortController();
+    s.addEventListener("scroll", i, { passive: !0, signal: a.signal }), this.registerCleanup(e, t, () => a.abort());
+    const l = () => i();
+    window.addEventListener("resize", l), this.registerCleanup(e, t, () => window.removeEventListener("resize", l));
+  }
+  resolveScrollContainer(e, t) {
+    if (t.targetId) {
+      const r = `[data-ikon-motion-source="${ue(t.targetId)}"]`, s = typeof document < "u" ? document.querySelector(r) : null;
+      if (s)
+        return s;
+    }
+    return e.closest('[data-ikon-container-type="scroll-view"]');
+  }
+  applyBindingValues(e, t, r) {
+    const s = t.max - t.min, i = s === 0 ? r > t.min ? 1 : 0 : (r - t.min) / s;
+    let a = this.applyClamp(i, t.clamp);
+    t.reverse && (a = 1 - a);
+    const l = t.ease(a), u = Number.isFinite(l) ? l : 0, d = u * 100;
+    if (e.style.setProperty("--tw-motion-bind-source-value", `${r}`), e.style.setProperty("--tw-motion-bind-progress-ratio", `${u}`), e.style.setProperty("--tw-motion-bind-progress", `${d}`), t.map) {
+      const p = this.applyMap(d, t.map);
+      p !== void 0 && e.style.setProperty("--tw-motion-bind-value", `${p}`);
+    } else
+      e.style.removeProperty("--tw-motion-bind-value");
+  }
+  applyClamp(e, t) {
+    if (!Number.isFinite(e))
+      return 0;
+    switch (t) {
+      case "freeze-start":
+        return e < 0 ? 0 : e;
+      case "freeze-end":
+        return e > 1 ? 1 : e;
+      case "unclamped":
+        return e;
+      default:
+        return v(e);
+    }
+  }
+  applyMap(e, t) {
+    const r = t.inEnd - t.inStart;
+    if (r === 0)
+      return t.outEnd;
+    const s = (e - t.inStart) / r;
+    return t.outStart + s * (t.outEnd - t.outStart);
+  }
+  registerCleanup(e, t, r) {
+    const i = this.elementStates.get(e)?.get(t);
+    i && (i.add(r), this.globalCleanups.add(r));
+  }
+  cleanupStyle(e) {
+    const t = this.styleToElements.get(e);
+    if (!t)
+      return;
+    const r = Array.from(t);
+    for (const s of r)
+      this.cleanupElementStyle(s, e);
+    this.styleToElements.delete(e);
+  }
+  cleanupElement(e) {
+    const t = this.elementStates.get(e);
+    if (!t)
+      return;
+    const r = Array.from(t.keys());
+    for (const s of r)
+      this.cleanupElementStyle(e, s);
+  }
+  cleanupElementStyle(e, t) {
+    const r = this.elementStates.get(e), s = r?.get(t);
+    if (!s)
+      return;
+    for (const a of s) {
+      try {
+        a();
+      } catch (l) {
+        console.warn("[MotionController] Failed to cleanup listener", l);
+      }
+      this.globalCleanups.delete(a);
+    }
+    s.clear(), r.delete(t);
+    const i = this.styleToElements.get(t);
+    i && (i.delete(e), i.size === 0 && this.styleToElements.delete(t)), r.size === 0 && (this.elementStates.delete(e), this.clearBindingProperties(e));
+  }
+  clearBindingProperties(e) {
+    e.style.removeProperty("--tw-motion-bind-source-value"), e.style.removeProperty("--tw-motion-bind-progress"), e.style.removeProperty("--tw-motion-bind-progress-ratio"), e.style.removeProperty("--tw-motion-bind-value");
+  }
+  handleMutations(e) {
+    for (const t of e)
+      t.type === "childList" ? (t.addedNodes.forEach((r) => this.scanNode(r)), t.removedNodes.forEach((r) => this.cleanupNode(r))) : t.type === "attributes" && t.target instanceof HTMLElement && this.handleClassMutation(t.target);
+  }
+  handleClassMutation(e) {
+    const t = this.elementStates.get(e);
+    if (!t) {
+      this.processElement(e);
+      return;
+    }
+    const r = new Set(Array.from(e.classList)), s = Array.from(t.keys());
+    for (const i of s)
+      r.has(i) || this.cleanupElementStyle(e, i);
+    this.processElement(e);
+  }
+  scanNode(e) {
+    if (!(e instanceof HTMLElement))
+      return;
+    this.processElement(e), e.querySelectorAll("[class]").forEach((r) => this.processElement(r));
+  }
+  cleanupNode(e) {
+    if (!(e instanceof HTMLElement))
+      return;
+    this.cleanupElement(e), e.querySelectorAll("[class]").forEach((r) => this.cleanupElement(r));
+  }
+  processElement(e) {
+    if (!(!e.classList || e.classList.length === 0))
+      for (const t of Array.from(e.classList)) {
+        const r = this.bindingsByStyle.get(t);
+        r && this.ensureStyleState(e, t) && this.attachBindings(e, t, r);
+      }
+  }
+}
+const fe = new Qe(), W = "ikon-ds";
+function wt(n) {
+  const e = re(({ styleId: r, css: s, common: i }) => {
+    if (!r || typeof document > "u") return;
+    let a = document.getElementById(W);
+    a || (a = document.createElement("style"), a.id = W, document.head.appendChild(a)), s && (a.innerHTML += s), fe.registerStyle(r, i);
+  }, []), t = re(() => {
+    typeof document < "u" && document.getElementById(W)?.remove(), fe.reset();
+  }, []);
+  return ne(() => {
+    if (!n) return;
+    for (const s of n.getUiStyles())
+      e(s);
+    const r = n.subscribeToStyles(e);
+    return () => {
+      r?.(), t();
+    };
+  }, [n, t, e]), ne(() => () => t(), [t]), { setStyle: e, reset: t };
+}
+var et = typeof global == "object" && global && global.Object === Object && global, tt = typeof self == "object" && self && self.Object === Object && self, rt = et || tt || Function("return this")(), B = rt.Symbol, ye = Object.prototype, nt = ye.hasOwnProperty, st = ye.toString, U = B ? B.toStringTag : void 0;
+function ot(n) {
+  var e = nt.call(n, U), t = n[U];
+  try {
+    n[U] = void 0;
+    var r = !0;
+  } catch {
+  }
+  var s = st.call(n);
+  return r && (e ? n[U] = t : delete n[U]), s;
+}
+var it = Object.prototype, at = it.toString;
+function ct(n) {
+  return at.call(n);
+}
+var lt = "[object Null]", ut = "[object Undefined]", he = B ? B.toStringTag : void 0;
+function dt(n) {
+  return n == null ? n === void 0 ? ut : lt : he && he in Object(n) ? ot(n) : ct(n);
+}
+function ft(n) {
+  return n != null && typeof n == "object";
+}
+var ht = Array.isArray, pt = "[object String]";
+function mt(n) {
+  return typeof n == "string" || !ht(n) && ft(n) && dt(n) == pt;
+}
+const pe = "ikonUiModules";
+function J(n) {
+  return typeof n == "object" && n !== null && !Array.isArray(n);
+}
+function yt(n) {
+  if (!Array.isArray(n))
+    return;
+  const e = /* @__PURE__ */ new Set();
+  for (const t of n) {
+    if (!mt(t)) continue;
+    const r = t.trim();
+    r && (e.has(r) || e.add(r));
+  }
+  return Array.from(e);
+}
+function Nt(n, e) {
+  if (n === e)
+    return !0;
+  if (!n || !e)
+    return !n && !e;
+  if (n.length !== e.length)
+    return !1;
+  for (let t = 0; t < n.length; t += 1)
+    if (n[t] !== e[t])
+      return !1;
+  return !0;
+}
+function St(n) {
+  if (!(!J(n) || !Object.prototype.hasOwnProperty.call(n, pe)))
+    return yt(n[pe]);
+}
+function Ot(...n) {
+  for (const e of n) {
+    const t = St(e);
+    if (t !== void 0)
+      return t;
+  }
+}
+function kt(n) {
+  if (!J(n))
+    return;
+  const e = n, t = Object.keys(e).find((u) => u.toLowerCase() === "modules");
+  if (!t)
+    return;
+  const r = e[t];
+  if (r === null)
+    return { resetToDefault: !0 };
+  if (!Array.isArray(r))
+    return;
+  const s = [], i = /* @__PURE__ */ new Map(), a = /* @__PURE__ */ new Set();
+  for (const u of r) {
+    if (typeof u == "string") {
+      const b = u.trim();
+      if (!b || a.has(b))
+        continue;
+      s.push(b), a.add(b);
+      continue;
+    }
+    if (!J(u))
+      continue;
+    const d = u, p = Object.keys(d).find((b) => b.toLowerCase() === "name");
+    if (!p)
+      continue;
+    const E = d[p];
+    if (typeof E != "string")
+      continue;
+    const T = E.trim();
+    if (!T)
+      continue;
+    const O = Object.keys(d).find((b) => b.toLowerCase() === "javascript"), _ = O ? d[O] : void 0;
+    typeof _ == "string" && i.set(T, _), a.has(T) || (s.push(T), a.add(T));
+  }
+  if (!s.length && i.size === 0)
+    return { modules: [] };
+  const l = Array.from(i.entries()).map(([u, d]) => ({
+    name: u,
+    javascript: d
+  }));
+  return l.length > 0 ? { modules: s, inlineModules: l } : { modules: s };
+}
+export {
+  De as IKON_UI_BASE_MODULE,
+  V as IKON_UI_STREAM_CATEGORY,
+  Rt as IkonUi,
+  Ve as IkonUiRegistry,
+  Tt as IkonUiSurface,
+  Be as UiComponentRegistry,
+  ze as UiRenderer,
+  Mt as UiStreamStore,
+  Nt as areIkonUiModuleListsEqual,
+  qe as createBaseResolvers,
+  Et as createComponentLibrary,
+  Ct as createIkonUiRegistry,
+  Fe as isIkonUiCategoryMatch,
+  Ye as loadBaseModule,
+  yt as normalizeIkonUiModuleList,
+  kt as parseIkonUiInitPayload,
+  St as readIkonUiModules,
+  Ot as readIkonUiModulesFromSources,
+  We as registerBaseModule,
+  wt as useIkonStyles,
+  je as useUiStore
+};

package/modules.d.ts

@@ -0,0 +1,15 @@
+export type IkonUiModuleList = readonly string[];
+export interface IkonUiInitModulePayload {
+    name: string;
+    javascript: string;
+}
+export interface IkonUiInitInstruction {
+    modules?: string[];
+    inlineModules?: IkonUiInitModulePayload[];
+    resetToDefault?: boolean;
+}
+export declare function normalizeIkonUiModuleList(value: unknown): string[] | undefined;
+export declare function areIkonUiModuleListsEqual(left: IkonUiModuleList | undefined, right: IkonUiModuleList | undefined): boolean;
+export declare function readIkonUiModules(source: unknown): string[] | undefined;
+export declare function readIkonUiModulesFromSources(...sources: unknown[]): string[] | undefined;
+export declare function parseIkonUiInitPayload(payload: unknown): IkonUiInitInstruction | undefined;

package/motion/motion-controller.d.ts

@@ -0,0 +1,39 @@
+import { UiStylePayload } from '../../../sdk-ui/src/index.ts';
+declare class MotionController {
+    private bindingsByStyle;
+    private observer?;
+    private observeScheduled;
+    private pendingScanStyles;
+    private scanScheduled;
+    private elementStates;
+    private styleToElements;
+    private globalCleanups;
+    registerStyle(styleId: string, payload?: UiStylePayload['common']): void;
+    reset(): void;
+    private parseMetadata;
+    private parseBinding;
+    private ensureObserver;
+    private scheduleScan;
+    private scanExistingNodes;
+    private applyStyleToElement;
+    private ensureStyleState;
+    private attachBindings;
+    private attachBinding;
+    private attachScrollBinding;
+    private resolveScrollContainer;
+    private applyBindingValues;
+    private applyClamp;
+    private applyMap;
+    private registerCleanup;
+    private cleanupStyle;
+    private cleanupElement;
+    private cleanupElementStyle;
+    private clearBindingProperties;
+    private handleMutations;
+    private handleClassMutation;
+    private scanNode;
+    private cleanupNode;
+    private processElement;
+}
+export declare const motionController: MotionController;
+export {};

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@ikonai/sdk-react-ui",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "types": "./index.d.ts"
+    }
+  },
+  "peerDependencies": {
+    "@ikonai/sdk": "*",
+    "@ikonai/sdk-ui": "*",
+    "react": "*",
+    "react-dom": "*"
+  }
+}

package/renderer/component-library.d.ts

@@ -0,0 +1,31 @@
+import { UiComponentLibrary, UiComponentRenderer, UiElementNode } from './types';
+/**
+ * Minimal, fixed registry of UI renderers keyed by element type.
+ *
+ * Use this when you have a known, static set of renderers (e.g. embedding
+ * your own component library) and do not need the dynamic module-loading
+ * capabilities of `IkonUiRegistry`.
+ *
++ Example:
+ * ```ts
+ * const library = createComponentLibrary({
+ *   'common.div': myDivRenderer,
+ *   'custom.card': myCardRenderer,
+ * });
+ * ```
+ */
+export declare class UiComponentRegistry implements UiComponentLibrary {
+    private fallback?;
+    private readonly renderers;
+    constructor(entries?: Iterable<[string, UiComponentRenderer]>, fallback?: UiComponentRenderer | undefined);
+    register(type: string, renderer: UiComponentRenderer): void;
+    setFallback(renderer: UiComponentRenderer | undefined): void;
+    resolve(node: UiElementNode): UiComponentRenderer | undefined;
+}
+/**
+ * Convenience factory to build a `UiComponentRegistry` from a plain object.
+ *
+ * Prefer this when you already have a simple mapping of element type to
+ * renderer. If you need dynamic module loading, use `IkonUiRegistry` instead.
+ */
+export declare function createComponentLibrary(components: Record<string, UiComponentRenderer>, fallback?: UiComponentRenderer): UiComponentLibrary;

package/renderer/index.d.ts

@@ -0,0 +1,4 @@
+export { UiRenderer, type UiRendererProps } from './ui-renderer';
+export { UiComponentRegistry, createComponentLibrary, } from './component-library';
+export { useUiStore } from './use-ui-store';
+export type { UiComponentRenderer, UiComponentLibrary, UiElementNode, UiRenderContext, UiComponentRendererProps, ParsedUiUpdate, UiSnapshot, UiFullSnapshot, UiDiffSnapshot, UiElementDiffNode, TextDelta, UiElementProps, UiUpdateType, UiStoreSnapshot, UiOptimisticPatchState, } from './types';

package/renderer/types.d.ts

@@ -0,0 +1,21 @@
+import { UIPayload } from '../../../platform-generated/src/index.ts';
+import { UiElementNode } from '../../../sdk-ui/src/index.ts';
+import { ComponentType, ReactNode } from 'react';
+export { type UiUpdateType, type UiElementProps, type UiElementNode, type UiElementDiffNode, type UiSnapshot, type UiFullSnapshot, type UiDiffSnapshot, type UiSnapshotMetadata, type UiOptimisticPatchMetadata, type UiOptimisticReconcileMetadata, type TextDelta, type ParsedUiUpdate, type UiStoreSnapshot, type UiOptimisticPatchState, } from '../../../sdk-ui/src/index.ts';
+export interface UiRenderContext {
+    getPayload(key: string): UIPayload | undefined;
+    renderChildren(nodes: readonly UiElementNode[]): ReactNode;
+    renderContainer(containerId: string): ReactNode;
+    dispatchAction(actionId: string, payload?: unknown): void;
+}
+export interface UiComponentRendererProps {
+    readonly node: UiElementNode;
+    readonly context: UiRenderContext;
+    readonly children: readonly ReactNode[];
+    readonly className?: string;
+    readonly styleIds: readonly string[];
+}
+export type UiComponentRenderer = ComponentType<UiComponentRendererProps>;
+export interface UiComponentLibrary {
+    resolve(node: UiElementNode): UiComponentRenderer | undefined;
+}

package/renderer/ui-renderer.d.ts

@@ -0,0 +1,11 @@
+import { UiStreamStore } from '../../../sdk-ui/src/index.ts';
+import { ReactNode } from 'react';
+import { UiComponentLibrary } from './types';
+export interface UiRendererProps {
+    readonly store: UiStreamStore;
+    readonly library: UiComponentLibrary;
+    readonly containerId?: string;
+    readonly emptyFallback?: ReactNode;
+    readonly onAction?: (actionId: string, payloadJson: string) => void;
+}
+export declare function UiRenderer({ store, library, containerId, emptyFallback, onAction }: UiRendererProps): ReactNode;

package/renderer/use-ui-store.d.ts

@@ -0,0 +1,3 @@
+import { UiStreamStore } from '../../../sdk-ui/src/index.ts';
+import { UiStoreSnapshot } from './types';
+export declare function useUiStore(store: UiStreamStore): UiStoreSnapshot;

package/surface.d.ts

@@ -0,0 +1,18 @@
+import { UIStreamCategories } from '../../platform-generated/src/index.ts';
+import { UiStreamStore } from '../../sdk-ui/src/index.ts';
+import { UiComponentLibrary } from './renderer';
+export declare const IKON_UI_STREAM_CATEGORY: "ikon-ui";
+export type IkonUiCategory = UIStreamCategories | typeof IKON_UI_STREAM_CATEGORY | (string & {});
+export interface IkonUiStoreEntry {
+    category: IkonUiCategory;
+    store: UiStreamStore;
+}
+export declare function isIkonUiCategoryMatch(entryCategory: IkonUiCategory, targetCategory: IkonUiCategory): boolean;
+export interface IkonUiSurfaceProps {
+    stores: ReadonlyMap<string, IkonUiStoreEntry>;
+    library: UiComponentLibrary;
+    category?: IkonUiCategory;
+    version?: number;
+    onAction?: (actionId: string, payload?: string) => void;
+}
+export declare function IkonUiSurface({ stores, library, category, version, onAction }: IkonUiSurfaceProps): import("react/jsx-runtime").JSX.Element | null;

package/use-ikon-styles.d.ts

@@ -0,0 +1,9 @@
+import { UiStyleListener, UiStylePayload } from '../../sdk-ui/src/index.ts';
+export interface IkonUiStyleSource {
+    getUiStyles(): Iterable<UiStylePayload> | readonly UiStylePayload[];
+    subscribeToStyles(listener: UiStyleListener): () => void;
+}
+export declare function useIkonStyles(source?: IkonUiStyleSource | null): {
+    setStyle: ({ styleId, css, common }: UiStylePayload) => void;
+    reset: () => void;
+};