@tailorkit/react 0.1.0-beta.4 → 0.1.0-beta.40

package/dist/index.js

@@ -1,342 +1,16 @@
-// src/tailor-kit.tsx
-import { useEffect as useEffect4, useId as useId2, useMemo as useMemo6, useSyncExternalStore as useSyncExternalStore3 } from "react";
-
-// src/components/root.tsx
-import { useMemo as useMemo2 } from "react";
-
-// src/components/render.tsx
-import { cloneElement, createElement, isValidElement, useMemo } from "react";
-function useRender({
-  defaultTagName,
-  props,
-  render
-}) {
-  return useMemo(() => {
-    if (render) {
-      if (!isValidElement(render)) {
-        throw new Error("The render prop must be a valid React element.");
-      }
-      return cloneElement(render, mergeProps(render.props, props));
-    }
-    return createElement(defaultTagName, props);
-  }, [defaultTagName, props, render]);
-}
-function mergeProps(...propSets) {
-  const merged = {};
-  for (const props of propSets) {
-    if (!props) {
-      continue;
-    }
-    for (const [key, value] of Object.entries(props)) {
-      if (value === void 0) {
-        continue;
-      }
-      const existing = merged[key];
-      if (key === "className" && existing && value) {
-        merged[key] = `${existing} ${value}`;
-        continue;
-      }
-      if (key === "style" && existing && value) {
-        merged[key] = {
-          ...existing,
-          ...value
-        };
-        continue;
-      }
-      if (key === "ref" && existing && value) {
-        merged[key] = composeRefs(existing, value);
-        continue;
-      }
-      if (isEventHandler(key) && typeof existing === "function" && typeof value === "function") {
-        merged[key] = (...args) => {
-          existing(...args);
-          const event = args[0];
-          if (!event?.defaultPrevented) {
-            value(...args);
-          }
-        };
-        continue;
-      }
-      merged[key] = value;
-    }
-  }
-  return merged;
-}
-function composeRefs(...refs) {
-  return (node) => {
-    for (const ref of refs) {
-      if (typeof ref === "function") {
-        ref(node);
-      } else if (ref) {
-        ref.current = node;
-      }
-    }
-  };
-}
-function isEventHandler(key) {
-  return /^on[A-Z]/u.test(key);
-}
-
-// src/components/context.ts
-import { createContext, useContext } from "react";
-var TailorRootContext = createContext(null);
-function useTailorRootContext(component) {
-  const context = useContext(TailorRootContext);
-  if (!context) {
-    throw new Error(`${component} must be rendered inside tailor.Root.`);
-  }
-  return context;
-}
-
-// src/components/root.tsx
-import { jsx } from "react/jsx-runtime";
-var EMPTY_APPS = [];
-function Root({ apps: appsProp, children, render, tailor, ...props }) {
-  const appsResult = tailor.useApps();
-  const apps = appsProp ?? appsResult.data ?? EMPTY_APPS;
-  const context = useMemo2(
-    () => ({
-      apps
-    }),
-    [apps]
-  );
-  const element = render ? useRender({
-    defaultTagName: "div",
-    props: mergeProps({ children }, props),
-    render
-  }) : children;
-  return /* @__PURE__ */ jsx(TailorRootContext.Provider, { value: context, children: element });
-}
-
-// src/hooks/use-apps.ts
-import { useCallback, useEffect, useSyncExternalStore } from "react";
-function createUseApps(store) {
-  return function useApps() {
-    const snapshot = useSyncExternalStore(
-      store.subscribe,
-      store.getAppsSnapshot,
-      store.getAppsSnapshot
-    );
-    useEffect(() => {
-      void store.fetchApps();
-    }, []);
-    const refetch = useCallback(() => store.fetchApps({ force: true }), []);
-    return toUseAppsResult(snapshot, refetch);
-  };
-}
-function toUseAppsResult(snapshot, refetch) {
-  return {
-    data: snapshot.status === "ready" ? snapshot.apps : void 0,
-    error: snapshot.error,
-    isError: snapshot.status === "error",
-    isLoading: snapshot.status === "loading",
-    isPending: snapshot.status === "idle" || snapshot.status === "loading",
-    isSuccess: snapshot.status === "ready",
-    refetch,
-    status: snapshot.status
-  };
-}
-
-// src/hooks/use-current-screen.ts
-import { useEffect as useEffect2, useMemo as useMemo3, useRef } from "react";
-function createUseCurrentScreen(store) {
-  return function useCurrentScreen(options) {
-    useTailorRootContext("tailor.useCurrentScreen");
-    const id = useMemo3(() => /* @__PURE__ */ Symbol("tailorkit-current-screen"), []);
-    const status = options.status ?? "ready";
-    const context = "context" in options ? options.context : void 0;
-    const contextKey = JSON.stringify(context);
-    const contextRef = useRef({ key: contextKey, value: context });
-    if (contextRef.current.key !== contextKey) {
-      contextRef.current = { key: contextKey, value: context };
-    }
-    const contextSnapshot = contextRef.current.value;
-    useEffect2(
-      () => () => {
-        store.unregisterScreen(id);
-      },
-      [id]
-    );
-    useEffect2(() => {
-      store.registerScreen({
-        context: contextSnapshot,
-        id,
-        screen: options.screen,
-        status
-      });
-    }, [contextSnapshot, id, options.screen, status]);
-  };
-}
+// src/components/render-slot.tsx
+import { useStore as useStore2 } from "@nanostores/react";
+import { createSlotRuntime, buildThemeCss } from "@tailorkit/client-core";
+import { useEffect as useEffect2, useId as useId2, useMemo as useMemo3, useState as useState2 } from "react";
 
 // src/primitives.tsx
-import { createContext as createContext2, useContext as useContext2, useId, useMemo as useMemo4 } from "react";
-import { resolveTheme } from "@tailorkit/core/primitives/theme";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var PrimitiveThemeContext = createContext2(null);
-var tokenGroups = [
-  "space",
-  "radius",
-  "background",
-  "border",
-  "borderColor",
-  "textColor"
-];
-var cssEscape = (value) => {
-  const css = globalThis.CSS;
-  if (typeof css?.escape === "function") {
-    return css.escape(value);
-  }
-  return value.replaceAll(/[^A-Za-z0-9_-]/gu, "\\$&");
-};
-var toCssValue = (group, value) => {
-  if (typeof value === "number") {
-    return `${value}px`;
-  }
-  if (group === "size" || group === "raw") {
-    return value;
-  }
-  return `var(--tailorkit-${group}-${cssEscape(value)})`;
-};
-var toResponsiveEntries = (value) => {
-  if (value === void 0) {
-    return [];
-  }
-  if (!(value && typeof value === "object") || Array.isArray(value)) {
-    return [["base", value]];
-  }
-  return Object.entries(value).filter(
-    (entry) => entry[1] !== void 0
-  );
-};
-var declarationsForProp = (prop, value) => {
-  if (prop === "columns") {
-    return [`grid-template-columns: repeat(${String(value)}, minmax(0, 1fr));`];
-  }
-  const tokenDeclarations = {
-    background: ["background", "background"],
-    border: ["border", "border"],
-    borderColor: ["borderColor", "border-color"],
-    textColor: ["textColor", "color"]
-  };
-  const tokenDeclaration = tokenDeclarations[prop];
-  if (tokenDeclaration) {
-    const [group, property] = tokenDeclaration;
-    if (prop === "border") {
-      return [`border-style: ${toCssValue(group, value)};`, "border-width: 1px;"];
-    }
-    return [`${property}: ${toCssValue(group, value)};`];
-  }
-  if (prop === "gap" || prop === "margin" || prop === "padding") {
-    return [`${prop}: ${toCssValue("space", value)};`];
-  }
-  if (prop === "height" || prop === "width") {
-    return [`${prop}: ${toCssValue("size", value)};`];
-  }
-  if (prop === "radius") {
-    return [`border-radius: ${toCssValue("radius", value)};`];
-  }
-  if (prop === "align") {
-    return [`align-items: ${toFlexAlignment(value)};`];
-  }
-  if (prop === "justify") {
-    return [`justify-content: ${toFlexJustification(value)};`];
-  }
-  if (prop === "direction") {
-    return [`flex-direction: ${toCssValue("raw", value)};`];
-  }
-  if (prop === "overflow") {
-    return [`overflow: ${toCssValue("raw", value)};`];
-  }
-  if (prop === "grow") {
-    return [`flex-grow: ${String(value)};`];
-  }
-  if (prop === "shrink") {
-    return [`flex-shrink: ${String(value)};`];
-  }
-  if (prop === "minHeight") {
-    return [`min-height: ${toCssValue("size", value)};`];
-  }
-  if (prop === "minWidth") {
-    return [`min-width: ${toCssValue("size", value)};`];
-  }
-  if (prop === "basis") {
-    return [`flex-basis: ${toCssValue("size", value)};`];
-  }
-  if (prop === "wrap") {
-    return [`flex-wrap: ${toCssValue("raw", value)};`];
-  }
-  return [];
-};
-var toFlexAlignment = (value) => {
-  if (value === "start") {
-    return "flex-start";
-  }
-  if (value === "end") {
-    return "flex-end";
-  }
-  return String(value);
-};
-var toFlexJustification = (value) => {
-  if (value === "start") {
-    return "flex-start";
-  }
-  if (value === "end") {
-    return "flex-end";
-  }
-  if (value === "between") {
-    return "space-between";
-  }
-  return String(value);
-};
-var buildPrimitiveCss = ({
-  display,
-  nodeId,
-  props,
-  screenId,
-  theme
-}) => {
-  const selector = `[data-tailorkit-screen="${cssEscape(screenId)}"] [data-tailorkit-node="${cssEscape(
-    nodeId
-  )}"]`;
-  const base = [`display: ${display};`];
-  const byBreakpoint = /* @__PURE__ */ new Map();
-  for (const [prop, rawValue] of Object.entries(props)) {
-    for (const [breakpoint, value] of toResponsiveEntries(rawValue)) {
-      const declarations = declarationsForProp(prop, value);
-      if (declarations.length === 0) {
-        continue;
-      }
-      const target = breakpoint === "base" ? base : byBreakpoint.get(breakpoint) ?? [];
-      target.push(...declarations);
-      if (breakpoint !== "base") {
-        byBreakpoint.set(breakpoint, target);
-      }
-    }
-  }
-  const rules = [`${selector} { ${base.join(" ")} }`];
-  for (const [breakpoint, declarations] of byBreakpoint) {
-    const minWidth = theme.breakpoints?.[breakpoint];
-    if (!minWidth) {
-      continue;
-    }
-    rules.push(`@media (min-width: ${minWidth}) { ${selector} { ${declarations.join(" ")} } }`);
-  }
-  return rules.join("\n");
-};
-var buildThemeCss = (screenId, theme) => {
-  const selector = `[data-tailorkit-screen="${cssEscape(screenId)}"]`;
-  const declarations = [];
-  const resolvedTheme = resolveTheme(theme);
-  for (const group of tokenGroups) {
-    for (const [name, value] of Object.entries(resolvedTheme.tokens?.[group] ?? {})) {
-      declarations.push(`--tailorkit-${group}-${cssEscape(name)}: ${value};`);
-    }
-  }
-  return `${selector} { ${declarations.join(" ")} }`;
-};
+import { buildPrimitiveCss } from "@tailorkit/client-core";
+import { createContext, useContext, useId, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var PrimitiveThemeContext = createContext(null);
 var usePrimitiveNodeId = () => {
   const id = useId();
-  return useMemo4(() => `tailorkit-${id.replaceAll(":", "")}`, [id]);
+  return useMemo(() => `tailorkit-${id.replaceAll(":", "")}`, [id]);
 };
 var Primitive = ({
   children,
@@ -344,160 +18,113 @@ var Primitive = ({
   element,
   props
 }) => {
-  const context = useContext2(PrimitiveThemeContext);
+  const context = useContext(PrimitiveThemeContext);
   const nodeId = usePrimitiveNodeId();
   const Element = element;
   const css = context ? buildPrimitiveCss({
     display,
     nodeId,
     props,
-    screenId: context.screenId,
-    theme: context.theme
+    theme: context.theme,
+    viewId: context.viewId
   }) : "";
   return /* @__PURE__ */ jsxs(Element, { "data-tailorkit-node": nodeId, children: [
-    css === "" ? null : /* @__PURE__ */ jsx2("style", { "data-tailorkit-node-style": nodeId, children: css }),
+    css === "" ? null : /* @__PURE__ */ jsx("style", { "data-tailorkit-node-style": nodeId, children: css }),
     children
   ] });
 };
+var isStringValue = (value) => typeof value === "string";
+var isPressCallback = (value) => typeof value === "function";
+var Pressable = ({
+  props,
+  children
+}) => {
+  const context = useContext(PrimitiveThemeContext);
+  const nodeId = usePrimitiveNodeId();
+  const displays = {
+    box: "block",
+    flex: "flex",
+    grid: "grid",
+    inline: "inline-flex"
+  };
+  const { ariaLabel, layout, onPress } = props;
+  const display = layout === "box" || layout === "flex" || layout === "grid" ? displays[layout] : displays.inline;
+  const disabled = props.disabled === true;
+  const css = context ? buildPrimitiveCss({
+    display,
+    nodeId,
+    pressable: true,
+    props,
+    theme: context.theme,
+    viewId: context.viewId
+  }) : "";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    css === "" ? null : /* @__PURE__ */ jsx("style", { "data-tailorkit-node-style": nodeId, children: css }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-label": isStringValue(ariaLabel) ? ariaLabel : void 0,
+        "data-tailorkit-node": nodeId,
+        disabled,
+        onClick: () => {
+          if (!disabled && isPressCallback(onPress)) {
+            onPress();
+          }
+        },
+        type: "button",
+        children
+      }
+    )
+  ] });
+};
 var primitives = {
-  Box: ({ props, slots }) => /* @__PURE__ */ jsx2(Primitive, { display: "block", element: "div", props, children: slots.default }),
-  Flex: ({ props, slots }) => /* @__PURE__ */ jsx2(Primitive, { display: "flex", element: "div", props, children: slots.default }),
-  Grid: ({ props, slots }) => /* @__PURE__ */ jsx2(Primitive, { display: "grid", element: "div", props, children: slots.default }),
-  Inline: ({ props, slots }) => /* @__PURE__ */ jsx2(Primitive, { display: "inline", element: "span", props, children: slots.default })
+  Box: ({
+    props,
+    children
+  }) => /* @__PURE__ */ jsx(Primitive, { display: "block", element: "div", props, children }),
+  Flex: ({
+    props,
+    children
+  }) => /* @__PURE__ */ jsx(Primitive, { display: "flex", element: "div", props, children }),
+  Grid: ({
+    props,
+    children
+  }) => /* @__PURE__ */ jsx(Primitive, { display: "grid", element: "div", props, children }),
+  Inline: ({
+    props,
+    children
+  }) => /* @__PURE__ */ jsx(Primitive, { display: "inline", element: "span", props, children }),
+  Pressable: ({
+    props,
+    children
+  }) => /* @__PURE__ */ jsx(Pressable, { props, children })
 };
 
 // src/remote-view.tsx
+import { useStore } from "@nanostores/react";
+import {
+  createRemoteViewStore,
+  createRemoteElementProps
+} from "@tailorkit/client-core";
 import {
   Component,
-  Fragment,
-  createElement as createElement2,
+  Fragment as Fragment2,
+  createElement,
+  createContext as createContext2,
   memo,
-  useCallback as useCallback2,
-  useContext as useContext3,
-  useEffect as useEffect3,
-  useMemo as useMemo5,
-  useRef as useRef2,
-  useState,
-  useSyncExternalStore as useSyncExternalStore2
+  useContext as useContext2,
+  useEffect,
+  useMemo as useMemo2,
+  useState
 } from "react";
-import { createIframeUiHost } from "@tailorkit/sandbox/host";
-
-// src/node-store.ts
-var childIds = (children) => children.map((c) => c.id).join(",");
-var nodeSignature = (node) => {
-  if (node.kind === "text") {
-    return `text:${node.text}`;
-  }
-  if (node.kind === "fragment") {
-    return `frag:${childIds(node.children)}`;
-  }
-  const propsStr = JSON.stringify(node.props);
-  const callbacksStr = (node.callbacks ?? []).map((binding) => `${binding.callback}:${binding.event}`).join(",");
-  return `elem:${node.type}|${childIds(node.children)}|${propsStr}|${callbacksStr}`;
-};
-var flattenTree = (node, out) => {
-  out.set(node.id, node);
-  if (node.kind === "text") {
-    return;
-  }
-  for (const child of node.children) {
-    flattenTree(child, out);
-  }
-};
-var NodeStore = class {
-  nodes = /* @__PURE__ */ new Map();
-  signatures = /* @__PURE__ */ new Map();
-  nodeListeners = /* @__PURE__ */ new Map();
-  rootListeners = /* @__PURE__ */ new Set();
-  rootId = null;
-  clear() {
-    const nodeIds = [...this.nodeListeners.keys()];
-    const hadRoot = this.rootId !== null;
-    this.nodes = /* @__PURE__ */ new Map();
-    this.signatures = /* @__PURE__ */ new Map();
-    this.rootId = null;
-    for (const id of nodeIds) {
-      const subs = this.nodeListeners.get(id);
-      if (subs) {
-        for (const l of subs) {
-          l();
-        }
-      }
-    }
-    if (hadRoot) {
-      for (const l of this.rootListeners) {
-        l();
-      }
-    }
-  }
-  setSnapshot(tree) {
-    const next = /* @__PURE__ */ new Map();
-    flattenTree(tree, next);
-    const changed = /* @__PURE__ */ new Set();
-    for (const [id, node] of next) {
-      const sig = nodeSignature(node);
-      if (this.signatures.get(id) !== sig) {
-        changed.add(id);
-        this.signatures.set(id, sig);
-      }
-    }
-    for (const id of this.signatures.keys()) {
-      if (!next.has(id)) {
-        this.signatures.delete(id);
-      }
-    }
-    this.nodes = next;
-    const prevRootId = this.rootId;
-    this.rootId = tree.id;
-    for (const id of changed) {
-      const subs = this.nodeListeners.get(id);
-      if (subs) {
-        for (const l of subs) {
-          l();
-        }
-      }
-    }
-    if (prevRootId !== this.rootId) {
-      for (const l of this.rootListeners) {
-        l();
-      }
-    }
-  }
-  getRootId() {
-    return this.rootId;
-  }
-  getNode(id) {
-    return this.nodes.get(id) ?? null;
-  }
-  subscribe(id, listener) {
-    let subs = this.nodeListeners.get(id);
-    if (!subs) {
-      subs = /* @__PURE__ */ new Set();
-      this.nodeListeners.set(id, subs);
-    }
-    subs.add(listener);
-    return () => {
-      subs.delete(listener);
-      if (subs.size === 0) {
-        this.nodeListeners.delete(id);
-      }
-    };
-  }
-  subscribeRoot(listener) {
-    this.rootListeners.add(listener);
-    return () => this.rootListeners.delete(listener);
-  }
-};
-
-// src/remote-context.ts
-import { createContext as createContext3 } from "react";
-var RemoteUIContext = createContext3(null);
-
-// src/remote-view.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var RemoteUIContext = createContext2(null);
 var formatError = (error) => error.message;
 var RemoteErrorBoundary = class extends Component {
-  state = { error: null };
+  constructor(props) {
+    super(props);
+    this.state = { error: null };
+  }
   static getDerivedStateFromError(error) {
     return { error };
   }
@@ -506,415 +133,359 @@ var RemoteErrorBoundary = class extends Component {
   }
   render() {
     if (this.state.error) {
-      return createElement2("div", null, formatError(this.state.error));
+      return createElement("div", null, formatError(this.state.error));
     }
     return this.props.children;
   }
 };
-function RemoteViewHost({
+var RemoteRoot = ({ store }) => {
+  const rootId = useStore(store.nodes.root);
+  return rootId === null ? null : /* @__PURE__ */ jsx2(RemoteView, { nodeId: rootId });
+};
+var RemoteViewHost = ({
   appUrl,
+  sourceText,
+  toolBridge,
+  getBackendSession,
   components: components2,
   createIframe,
-  props,
-  runtimeUrl
-}) {
+  props
+}) => {
   const appKey = appUrl.toString();
-  const storeRef = useRef2(null);
-  if (storeRef.current === null) {
-    storeRef.current = new NodeStore();
-  }
-  const store = storeRef.current;
-  const appKeyRef = useRef2(appKey);
-  if (appKeyRef.current !== appKey) {
-    appKeyRef.current = appKey;
-    store.clear();
-  }
-  const dispatchRef = useRef2(null);
-  const [error, setError] = useState(null);
-  const [status, setStatus] = useState("starting");
-  const ctxRef = useRef2({
-    components: components2,
-    dispatch: (payload) => dispatchRef.current?.(payload),
-    store
-  });
-  useEffect3(() => {
-    ctxRef.current.components = components2;
-  }, [components2]);
-  const ui = useMemo5(() => {
-    const ctx = ctxRef.current;
-    return createElement2(
-      RemoteUIContext.Provider,
-      { value: ctx },
-      createElement2(
-        RemoteErrorBoundary,
-        { key: appKey },
-        createElement2(RemoteRoot, { store: ctx.store })
-      )
-    );
-  }, [appKey]);
-  useEffect3(() => {
-    const host = createIframeUiHost(appUrl, {
+  const [state, setState] = useState(() => ({
+    appKey,
+    store: createRemoteViewStore({ components: components2, props })
+  }));
+  if (state.appKey !== appKey) {
+    setState({ appKey, store: createRemoteViewStore({ components: components2, props }) });
+  }
+  const { store } = state;
+  const snapshot = useStore(store.state);
+  useEffect(() => {
+    store.setComponents(components2);
+  }, [components2, store]);
+  useEffect(() => {
+    store.setProps(props);
+  }, [props, store]);
+  useEffect(
+    () => store.mount({
+      appUrl,
       createIframe,
-      onError: (error2) => {
-        console.error("TailorKit remote app failed", error2);
-        setError(error2);
-        setStatus("error");
-      },
-      props,
-      runtimeUrl
-    });
-    dispatchRef.current = (payload) => host.dispatch(payload);
-    const unsubscribe = host.subscribe(() => {
-      const tree = host.getSnapshot();
-      if (tree !== null) {
-        store.setSnapshot(tree);
-        setStatus("ready");
-      }
-    });
-    setStatus("starting");
-    setError(null);
-    host.mount();
-    return () => {
-      unsubscribe();
-      dispatchRef.current = null;
-      host.destroy();
-    };
-  }, [appUrl, createIframe, props, runtimeUrl, store]);
-  if (status === "error" && error) {
-    return createElement2("div", null, formatError(error));
-  }
-  return ui;
-}
-function RemoteRoot({ store }) {
-  const subscribe = useCallback2((listener) => store.subscribeRoot(listener), [store]);
-  const getSnapshot = useCallback2(() => store.getRootId(), [store]);
-  const rootId = useSyncExternalStore2(subscribe, getSnapshot, getSnapshot);
-  if (rootId === null) {
-    return null;
+      getBackendSession,
+      sourceText,
+      toolBridge
+    }),
+    [appUrl, sourceText, toolBridge, getBackendSession, createIframe, store]
+  );
+  if (snapshot.status === "error" && snapshot.error) {
+    return createElement("div", null, formatError(snapshot.error));
   }
-  return /* @__PURE__ */ jsx3(RemoteView, { nodeId: rootId });
-}
-var RemoteElementView = memo(({ ctx, node }) => {
-  const { dispatch, components: components2 } = ctx;
-  const children = node.children.map((child) => /* @__PURE__ */ jsx3(RemoteView, { nodeId: child.id }, child.id));
-  const component = components2[node.type];
+  return /* @__PURE__ */ jsx2(RemoteUIContext.Provider, { value: store, children: /* @__PURE__ */ jsx2(RemoteErrorBoundary, { children: /* @__PURE__ */ jsx2(RemoteRoot, { store }) }, `${appKey}:${snapshot.generation}`) });
+};
+var RemoteElementViewComponent = ({
+  ctx,
+  node
+}) => {
+  const componentStore = useMemo2(
+    () => ctx.selectComponent(node.type),
+    [ctx, node.type]
+  );
+  const component = useStore(componentStore);
+  const children = node.children.map((child) => (
+    // oxlint-disable-next-line no-use-before-define -- This deferred callback runs after initialization; the definitions are mutually dependent.
+    /* @__PURE__ */ jsx2(RemoteView, { nodeId: child.id }, child.id)
+  ));
   if (component === void 0) {
     throw new Error(`TailorKit component "${node.type}" is not registered.`);
   }
-  const props = { ...node.props };
-  for (const binding of node.callbacks ?? []) {
-    props[binding.callback] = (...args) => {
-      dispatch({
-        data: {
-          args: args.slice(0, binding.inputCount),
-          event: binding.event,
-          nodeId: node.id
-        },
-        type: "dispatchCallback"
-      });
-    };
-  }
-  return createElement2(component, props, ...children);
-});
-var RemoteView = memo(function RemoteView2({ nodeId }) {
-  const ctx = useContext3(RemoteUIContext);
-  if (ctx === null) {
-    return null;
-  }
-  const { store } = ctx;
-  const subscribe = useCallback2(
-    (listener) => store.subscribe(nodeId, listener),
-    [store, nodeId]
+  const props = createRemoteElementProps(node, ctx.dispatch.bind(ctx));
+  return createElement(
+    /* oxlint-disable typescript/no-unsafe-type-assertion -- The renderer was supplied through the typed component registry; React's createElement overload erases its heterogeneous props. */
+    component,
+    /* oxlint-enable typescript/no-unsafe-type-assertion */
+    props,
+    ...children
   );
-  const getSnapshot = useCallback2(() => store.getNode(nodeId), [store, nodeId]);
-  const node = useSyncExternalStore2(subscribe, getSnapshot, getSnapshot);
+};
+var RemoteElementView = memo(RemoteElementViewComponent);
+var RemoteNodeView = ({
+  ctx,
+  nodeId
+}) => {
+  const nodeStore = useMemo2(() => ctx.nodes.selectNode(nodeId), [ctx, nodeId]);
+  const node = useStore(nodeStore);
   if (node === null) {
     return null;
   }
   if (node.kind === "text") {
     return node.text;
   }
-  const childElements = node.children.map((child) => /* @__PURE__ */ jsx3(RemoteView2, { nodeId: child.id }, child.id));
+  const childElements = node.children.map((child) => (
+    // oxlint-disable-next-line no-use-before-define -- This deferred callback runs after initialization; the definitions are mutually dependent.
+    /* @__PURE__ */ jsx2(RemoteView, { nodeId: child.id }, child.id)
+  ));
   if (node.kind === "fragment") {
-    return createElement2(Fragment, { key: node.id }, ...childElements);
+    return createElement(Fragment2, { key: node.id }, ...childElements);
+  }
+  return /* @__PURE__ */ jsx2(RemoteElementView, { node, ctx });
+};
+var RemoteViewComponent = ({ nodeId }) => {
+  const ctx = useContext2(RemoteUIContext);
+  return ctx === null ? null : /* @__PURE__ */ jsx2(RemoteNodeView, { ctx, nodeId });
+};
+var RemoteView = memo(RemoteViewComponent);
+
+// src/components/context.ts
+import { createContext as createContext3, useContext as useContext3 } from "react";
+var TailorkitContext = createContext3(
+  null
+);
+var useTailorkitContext = (component, expectedClient) => {
+  const context = useContext3(TailorkitContext);
+  if (!context) {
+    throw new Error(
+      `${component} must be rendered inside a TailorKit Provider.`
+    );
+  }
+  if (expectedClient && context.client !== expectedClient) {
+    throw new Error(
+      `${component} was created for a different TailorKit client than the surrounding Provider.`
+    );
+  }
+  return context;
+};
+
+// src/components/render-slot.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var SlotRenderer = (options) => {
+  const { store, client } = useTailorkitContext(
+    options.mode === "managed" ? "RenderSlot" : "RenderSlot.Controlled"
+  );
+  const reactId = useId2();
+  const [state, setState] = useState2(() => ({
+    runtime: createSlotRuntime(store, options),
+    store
+  }));
+  if (state.store !== store) {
+    setState({ runtime: createSlotRuntime(store, options), store });
+  }
+  const { runtime } = state;
+  useEffect2(() => {
+    runtime.setInput(options);
+  }, [runtime, options]);
+  const snapshot = useStore2(runtime.state);
+  const viewId = `tailorkit-view-${reactId.replaceAll(":", "")}`;
+  const themeContext = useMemo3(
+    () => ({ theme: client.theme, viewId }),
+    [client.theme, viewId]
+  );
+  if (snapshot.status === "hidden") {
+    return null;
   }
-  return /* @__PURE__ */ jsx3(RemoteElementView, { node, ctx });
-});
+  if (snapshot.status === "loading") {
+    return /* @__PURE__ */ jsx3("output", { children: snapshot.message });
+  }
+  if (snapshot.status === "error") {
+    return /* @__PURE__ */ jsx3("div", { role: "alert", children: snapshot.error.message });
+  }
+  return /* @__PURE__ */ jsx3(PrimitiveThemeContext.Provider, { value: themeContext, children: /* @__PURE__ */ jsxs2("div", { "data-tailorkit-view": viewId, children: [
+    /* @__PURE__ */ jsx3("style", { "data-tailorkit-theme-style": viewId, children: buildThemeCss(viewId, client.theme) }),
+    /* @__PURE__ */ jsx3(
+      RemoteViewHost,
+      {
+        appUrl: snapshot.appUrl,
+        sourceText: snapshot.sourceText,
+        toolBridge: snapshot.toolBridge,
+        getBackendSession: snapshot.getBackendSession,
+        components: client.components,
+        props: snapshot.props
+      },
+      snapshot.hostKey
+    )
+  ] }) });
+};
+var ManagedRenderSlot = (props) => /* @__PURE__ */ jsx3(SlotRenderer, { mode: "managed", ...props });
+var ControlledRenderSlot = (props) => /* @__PURE__ */ jsx3(SlotRenderer, { mode: "controlled", ...props });
+var RenderSlot = Object.assign(
+  ManagedRenderSlot,
+  {
+    Controlled: ControlledRenderSlot
+  }
+);
+
+// src/tailorkit.tsx
+import {
+  createTailorKitClientConfig,
+  createComponentRegistry,
+  createTailorKitStore
+} from "@tailorkit/client-core";
+import { createElement as createElement2, useEffect as useEffect4, useMemo as useMemo8, useState as useState3 } from "react";
 
-// src/tailor-kit.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-var componentTagPrefix = "tailorkit-";
-var toComponentTagName = (name) => `${componentTagPrefix}${name.replaceAll(/([a-z0-9])([A-Z])/gu, "$1-$2").replaceAll(/[\s_]+/gu, "-").toLowerCase()}`;
-function components(_schema, customComponents) {
-  return customComponents;
-}
-function createTailorKitClient(options) {
-  return createReactTailorKitClient(options);
-}
-function createReactTailorKitClient(options) {
-  const wrappedComponents = {};
-  const store = createTailorKitStore(options.baseUrl);
-  const theme = options.theme ?? {};
-  for (const [name, renderer] of Object.entries(options.components ?? {})) {
-    if (renderer) {
-      const TailorKitComponent = function TailorKitComponent2({
+// src/hooks/use-apps.ts
+import { createValueMemo, createAppsQuery } from "@tailorkit/client-core";
+import { useMemo as useMemo5 } from "react";
+
+// src/hooks/use-query-result.ts
+import { useStore as useStore3 } from "@nanostores/react";
+import { useMemo as useMemo4 } from "react";
+var useQueryResult = (state) => {
+  const result = useStore3(state);
+  return useMemo4(
+    () => ({
+      data: result.data,
+      error: result.error,
+      fetch: result.refetch,
+      isPending: result.isPending,
+      isRefetching: result.isFetching && !result.isPending
+    }),
+    [result]
+  );
+};
+
+// src/hooks/use-apps.ts
+var useAppsStore = (store, options = {}) => {
+  const memoOptions = useMemo5(() => createValueMemo(), []);
+  const stableOptions = memoOptions({
+    appIds: options.appIds === void 0 ? void 0 : [...new Set(options.appIds)].toSorted(),
+    scopes: options.scopes === void 0 ? void 0 : [...new Set(options.scopes)].toSorted()
+  });
+  const query = useMemo5(
+    () => createAppsQuery(store, stableOptions),
+    [store, stableOptions]
+  );
+  return useQueryResult(query.state);
+};
+var useApps = (options = {}) => useAppsStore(useTailorkitContext("useApps").store, options);
+
+// src/hooks/use-view-context.ts
+import { useEffect as useEffect3, useMemo as useMemo6 } from "react";
+var useViewContext = (view, options) => {
+  const { store } = useTailorkitContext("useViewContext");
+  const id = useMemo6(() => /* @__PURE__ */ Symbol("tailorkit-current-view"), []);
+  const { context, loading, error } = options;
+  useEffect3(
+    () => () => {
+      store.views.unregister(id);
+    },
+    [id, store]
+  );
+  useEffect3(() => {
+    store.views.register({ context, error, id, loading, view });
+  }, [id, view, context, loading, error, store]);
+};
+
+// src/hooks/use-views.ts
+import { createValueMemo as createValueMemo2, createViewsQuery } from "@tailorkit/client-core";
+import { useMemo as useMemo7 } from "react";
+var useViews = (options) => {
+  const { store } = useTailorkitContext("useViews");
+  const memoOptions = useMemo7(() => createValueMemo2(), []);
+  const stableOptions = memoOptions({
+    appIds: options.appIds === void 0 ? void 0 : [...new Set(options.appIds)].toSorted(),
+    scopes: options.scopes === void 0 ? void 0 : [...new Set(options.scopes)].toSorted(),
+    slot: options.slot
+  });
+  const query = useMemo7(
+    () => createViewsQuery(store, stableOptions),
+    [store, stableOptions]
+  );
+  return useQueryResult(query.state);
+};
+
+// src/tailorkit.tsx
+var components = (_contract, customComponents) => (
+  /* oxlint-disable typescript/no-unsafe-type-assertion -- The wrapper preserves the declared component or slot props and changes only the rendering adapter; the generic key-to-props relationship is erased at this boundary. */
+  customComponents
+);
+var createReactTailorKitClient = (options) => {
+  const wrappedComponents = createComponentRegistry(
+    options.components ?? {},
+    (renderer) => (
+      // oxlint-disable-next-line typescript/promise-function-async -- Client components must render synchronously; ReactNode also permits Promise results for server components.
+      function TailorKitComponent({
         children,
         ...props
       }) {
-        return renderer({
-          props,
-          slots: { default: children }
-        });
-      };
-      wrappedComponents[name] = TailorKitComponent;
-      wrappedComponents[toComponentTagName(name)] = TailorKitComponent;
-    }
-  }
-  const useApps = createUseApps(store);
-  const useCurrentScreen = createUseCurrentScreen(store);
-  const AppView = ({
-    app,
-    createIframe,
-    fallback = null,
-    runtimeUrl,
-    ...screenProps
-  }) => {
-    const reactId = useId2();
-    const currentScreen = useSyncExternalStore3(
-      store.subscribe,
-      store.getCurrentScreen,
-      store.getCurrentScreen
-    );
-    const screen = screenProps.screen;
-    const context = screenProps.context;
-    const status = screenProps.status ?? "ready";
-    const props = useMemo6(() => {
-      if (screen !== void 0) {
-        return {
-          screen: {
-            context,
-            path: screen,
-            status
-          }
-        };
-      }
-      return currentScreen === null ? void 0 : {
-        screen: {
-          context: currentScreen.context,
-          path: currentScreen.screen,
-          status: currentScreen.status
-        }
-      };
-    }, [context, currentScreen, screen, status]);
-    const meta = useSyncExternalStore3(
-      store.subscribe,
-      store.getMetaSnapshot,
-      store.getMetaSnapshot
-    );
-    const assetsBaseUrl = app.clientPath ? null : meta.assetsBaseUrl;
-    const appUrl = useMemo6(
-      () => resolveAppUrl(app, store.baseUrl, assetsBaseUrl),
-      [app, assetsBaseUrl]
-    );
-    useEffect4(() => {
-      void store.fetchMeta();
-    }, []);
-    if (props === void 0 || appUrl === null) {
-      return fallback;
-    }
-    const screenId = `tailorkit-screen-${reactId.replaceAll(":", "")}`;
-    return /* @__PURE__ */ jsx4(PrimitiveThemeContext.Provider, { value: { screenId, theme }, children: /* @__PURE__ */ jsxs2("div", { "data-tailorkit-screen": screenId, children: [
-      /* @__PURE__ */ jsx4("style", { "data-tailorkit-theme-style": screenId, children: buildThemeCss(screenId, theme) }),
-      /* @__PURE__ */ jsx4(
-        RemoteViewHost,
-        {
-          appUrl,
-          components: wrappedComponents,
-          createIframe,
-          props,
-          runtimeUrl
+        const rendererArgs = { props };
+        if (children !== void 0) {
+          rendererArgs.children = children;
         }
-      )
-    ] }) });
-  };
-  const client = {
-    AppView,
-    Root: (props) => /* @__PURE__ */ jsx4(Root, { ...props, tailor: client }),
-    getApp: store.getApp,
-    getApps: store.getApps,
-    useApps,
-    useCurrentScreen
-  };
-  return {
-    ...client
-  };
-}
-function createTailorKitStore(baseUrlInput) {
-  const baseUrl = toBaseUrl(baseUrlInput);
-  const listeners = /* @__PURE__ */ new Set();
-  const screens = /* @__PURE__ */ new Map();
-  let appsSnapshot = {
-    apps: [],
-    error: null,
-    status: "idle"
-  };
-  let metaSnapshot = {
-    assetsBaseUrl: null,
-    error: null,
-    schema: null,
-    status: "idle"
-  };
-  let currentScreen = null;
-  let fetchAppsPromise = null;
-  let fetchMetaPromise = null;
-  let fetchAppsRequestId = 0;
-  let nextOrder = 0;
-  const emit = () => {
-    for (const listener of listeners) {
-      listener();
-    }
-  };
-  const selectCurrentScreen = () => {
-    let selected = null;
-    for (const screen of screens.values()) {
-      const depth = getScreenDepth(screen.screen);
-      const selectedDepth = selected === null ? -1 : getScreenDepth(selected.screen);
-      if (selected === null || depth > selectedDepth) {
-        selected = screen;
-      }
-      if (selected !== null && depth === selectedDepth && screen.order > selected.order) {
-        selected = screen;
+        return renderer(
+          rendererArgs
+        );
       }
-    }
-    const deepestScreens = selected === null ? [] : [...screens.values()].filter(
-      (screen) => getScreenDepth(screen.screen) === getScreenDepth(selected.screen)
-    );
-    if (typeof console !== "undefined" && selected !== null && deepestScreens.length > 1) {
-      const screenNames = deepestScreens.map((screen) => `"${screen.screen}"`).join(", ");
-      console.warn(
-        `TailorKit found multiple active screens at the same hierarchy depth: ${screenNames}. TailorKit selected "${selected.screen}" by mount order. Only one route at a hierarchy depth should call useCurrentScreen.`
-      );
-    }
-    currentScreen = selected;
+    )
+  );
+  const clientConfig = createTailorKitClientConfig({
+    ...options,
+    components: wrappedComponents
+  });
+  const ClientRenderSlot = (props) => {
+    useTailorkitContext("RenderSlot", client);
+    return createElement2(RenderSlot, props);
   };
-  return {
-    baseUrl,
-    fetchApps: (options = {}) => {
-      if (fetchAppsPromise && !options.force) {
-        return fetchAppsPromise;
-      }
-      appsSnapshot = { ...appsSnapshot, status: "loading" };
-      emit();
-      const requestId = ++fetchAppsRequestId;
-      fetchAppsPromise = fetch(new URL("apps", baseUrl)).then(async (response) => {
-        if (!response.ok) {
-          throw new Error(`Unable to fetch TailorKit apps from ${baseUrl.toString()}.`);
-        }
-        const apps = await response.json();
-        if (requestId !== fetchAppsRequestId) {
-          return;
-        }
-        appsSnapshot = {
+  const client = {
+    ...clientConfig,
+    Provider: function Provider({ children, apps }) {
+      const [store] = useState3(
+        () => createTailorKitStore({
           apps,
-          error: null,
-          status: "ready"
-        };
-        emit();
-      }).catch((error) => {
-        if (requestId !== fetchAppsRequestId) {
-          return;
-        }
-        appsSnapshot = {
-          ...appsSnapshot,
-          error: error instanceof Error ? error : new Error(String(error)),
-          status: "error"
-        };
-        emit();
-      });
-      return fetchAppsPromise;
-    },
-    fetchMeta: () => {
-      if (fetchMetaPromise) {
-        return fetchMetaPromise;
-      }
-      metaSnapshot = { ...metaSnapshot, status: "loading" };
-      emit();
-      fetchMetaPromise = fetch(new URL("meta", baseUrl)).then(async (response) => {
-        if (!response.ok) {
-          throw new Error(`Unable to fetch TailorKit metadata from ${baseUrl.toString()}.`);
-        }
-        const meta = await response.json();
-        metaSnapshot = {
-          assetsBaseUrl: meta.assetsBaseUrl ?? null,
-          error: null,
-          schema: meta.schema,
-          status: "ready"
-        };
-        emit();
-      }).catch((error) => {
-        metaSnapshot = {
-          ...metaSnapshot,
-          error: error instanceof Error ? error : new Error(String(error)),
-          status: "error"
-        };
-        emit();
-      });
-      return fetchMetaPromise;
+          assetsBaseUrl: client.assetsBaseUrl,
+          baseUrl: client.baseUrl,
+          client: clientConfig.fetchClient,
+          contract: client.contract,
+          tools: client.tools
+        })
+      );
+      useEffect4(() => {
+        store.setProvidedApps(apps);
+      }, [store, apps]);
+      useEffect4(
+        () => () => {
+          store.previews.dispose();
+        },
+        [store]
+      );
+      const context = useMemo8(() => ({ client, store }), [store]);
+      return createElement2(
+        TailorkitContext.Provider,
+        { value: context },
+        children
+      );
     },
-    getApp: (id) => appsSnapshot.apps.find((app) => app.id === id),
-    getApps: () => appsSnapshot.apps,
-    getAppsSnapshot: () => appsSnapshot,
-    getCurrentScreen: () => currentScreen,
-    getMetaSnapshot: () => metaSnapshot,
-    registerScreen: (entry) => {
-      const existing = screens.get(entry.id);
-      screens.set(entry.id, {
-        ...entry,
-        order: existing?.order ?? nextOrder
-      });
-      if (!existing) {
-        nextOrder += 1;
+    RenderSlot: Object.assign(ClientRenderSlot, {
+      Controlled: function Controlled(props) {
+        useTailorkitContext("RenderSlot.Controlled", client);
+        return createElement2(
+          RenderSlot.Controlled,
+          /* oxlint-disable typescript/no-unsafe-type-assertion -- The wrapper preserves the declared component or slot props and changes only the rendering adapter; the generic key-to-props relationship is erased at this boundary. */
+          props
+          /* oxlint-enable typescript/no-unsafe-type-assertion */
+        );
       }
-      selectCurrentScreen();
-      emit();
+    }),
+    useApps: function useApps2(optionsValue) {
+      useTailorkitContext("useApps", client);
+      return useApps(optionsValue);
     },
-    subscribe: (listener) => {
-      listeners.add(listener);
-      return () => {
-        listeners.delete(listener);
-      };
+    useViewContext: function useViewContext2(view, optionsValue2) {
+      useTailorkitContext("useViewContext", client);
+      useViewContext(view, optionsValue2);
     },
-    unregisterScreen: (id) => {
-      screens.delete(id);
-      selectCurrentScreen();
-      emit();
+    useViews: function useViews2(optionsValue3) {
+      useTailorkitContext("useViews", client);
+      return (
+        /* oxlint-disable typescript/no-unsafe-type-assertion -- The wrapper preserves the declared component or slot props and changes only the rendering adapter; the generic key-to-props relationship is erased at this boundary. */
+        useViews(optionsValue3)
+      );
     }
   };
-}
-function getScreenDepth(screen) {
-  return screen === "/" ? 0 : screen.split("/").filter(Boolean).length;
-}
-function resolveAppUrl(app, baseUrl, assetsBaseUrl) {
-  if (app.clientPath) {
-    return new URL(app.clientPath, baseUrl);
-  }
-  if (!assetsBaseUrl || !app.projectId || !app.currentDeployment?.id) {
-    return null;
-  }
-  return new URL(
-    `projects/${app.projectId}/apps/${app.id}/deployments/${app.currentDeployment.id}/files/client.js`,
-    toBaseUrl(assetsBaseUrl)
-  );
-}
-function toBaseUrl(value) {
-  const url = value instanceof URL ? new URL(value) : new URL(value);
-  if (!url.pathname.endsWith("/")) {
-    url.pathname = `${url.pathname}/`;
-  }
-  return url;
-}
+  return client;
+};
+var createClient = (options) => createReactTailorKitClient(options);
 export {
+  RenderSlot,
   components,
-  createTailorKitClient,
+  createClient,
   primitives
 };