@tailorkit/react 0.1.0-beta.2 → 0.1.0-beta.22

package/dist/index.js

@@ -1,133 +1,76 @@
-// src/tailor-kit.tsx
-import { useEffect as useEffect4, useId as useId2, useMemo as useMemo6, useSyncExternalStore as useSyncExternalStore3 } from "react";
+// src/components/slot.tsx
+import { useCallback as useCallback4, useEffect as useEffect4, useId as useId2, useMemo as useMemo5, useRef as useRef3, useSyncExternalStore as useSyncExternalStore4 } 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/hooks/use-stable-context.ts
+import { useRef } from "react";
+function useStableContext(value) {
+  const key = JSON.stringify(value);
+  const ref = useRef({ key, value });
+  if (ref.current.key !== key) {
+    ref.current = { key, value };
+  }
+  return ref.current.value;
 }
 
+// src/hooks/use-slot.ts
+import { createSlotStore, matchesApp as matchesApp3, serializeCacheKey } from "@tailorkit/client-core";
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useSyncExternalStore as useSyncExternalStore2 } from "react";
+
 // src/components/context.ts
 import { createContext, useContext } from "react";
 var TailorRootContext = createContext(null);
-function useTailorRootContext(component) {
+function useTailorRootContext(component, expectedClient) {
   const context = useContext(TailorRootContext);
   if (!context) {
-    throw new Error(`${component} must be rendered inside tailor.Root.`);
+    throw new Error(`${component} must be rendered inside Root.`);
+  }
+  if (expectedClient && context.client !== expectedClient) {
+    throw new Error(
+      `${component} was created for a different TailorKit client than the one passed to 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, useMemo, useSyncExternalStore } from "react";
+import { matchesApp } from "@tailorkit/client-core";
+
+// src/scope-query.ts
+import { appendScopeSelection, normalizeScopeSelection } from "@tailorkit/client-core";
 
 // 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);
-  };
+import { matchesApp as matchesApp2 } from "@tailorkit/client-core";
+function useApps(options = {}) {
+  return useAppsStore(useTailorRootContext("useApps").store, options);
+}
+function useAppsStore(store, options = {}) {
+  const snapshot = useAppsSnapshot(store);
+  const scopes = normalizeScopeSelection(options.scopes);
+  const appIds = normalizeScopeSelection(options.appIds);
+  const data = useMemo(
+    () => snapshot.status === "ready" ? snapshot.apps.filter((app) => matchesApp(app, scopes.scopes, appIds.scopes)) : void 0,
+    [snapshot, scopes.key, appIds.key]
+  );
+  const refetch = useCallback(() => store.fetchApps({ force: true }), [store]);
+  return { ...toUseAppsResult(snapshot, refetch), data };
+}
+function useAppsSnapshot(store) {
+  const snapshot = useSyncExternalStore(
+    store.subscribeApps,
+    store.getAppsSnapshot,
+    store.getAppsSnapshot
+  );
+  useEffect(() => {
+    void store.fetchApps();
+  }, [store]);
+  return snapshot;
 }
 function toUseAppsResult(snapshot, refetch) {
   return {
     data: snapshot.status === "ready" ? snapshot.apps : void 0,
     error: snapshot.error,
+    isFetching: snapshot.isFetching,
     isError: snapshot.status === "error",
     isLoading: snapshot.status === "loading",
     isPending: snapshot.status === "idle" || snapshot.status === "loading",
@@ -137,41 +80,82 @@ function toUseAppsResult(snapshot, refetch) {
   };
 }
 
-// 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 };
+// src/hooks/use-slot.ts
+function useSlot({ slot, scopes, appIds }) {
+  const { store } = useTailorRootContext("useSlot");
+  const apps = useApps({ scopes, appIds });
+  const items = useResolvedSlot(slot, apps.data, apps.status, apps.error);
+  const refetch = useCallback2(async () => {
+    const multiple = store.client.meta().getSnapshot().data?.schema.slots[slot]?.multiple;
+    if (apps.isSuccess && multiple === true) {
+      await items.refetch();
+      return;
     }
-    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]);
+    await apps.refetch();
+    let previousKey;
+    while (true) {
+      const discovery = store.getAppsSnapshot();
+      if (discovery.status !== "ready") return;
+      const schema = store.getMetaSnapshot().schema;
+      const options = {
+        apps: discovery.apps.filter((app) => matchesApp3(app, scopes, appIds)),
+        slot,
+        activeView: schema === null || schema.slots[slot]?.multiple === true ? store.views.getSnapshot() : null
+      };
+      const key = serializeCacheKey([options.apps, slot, options.activeView]);
+      if (key === previousKey) return;
+      previousKey = key;
+      await createSlotStore(store.client, options).fetch();
+    }
+  }, [store, slot, scopes, appIds, apps.isSuccess, apps.refetch, items.refetch]);
+  return { ...items, isFetching: apps.isFetching || items.isFetching, refetch };
+}
+function useAppSlot(app, slot) {
+  return useResolvedSlot(slot, [app], "ready", null);
+}
+function useResolvedSlot(slot, apps, appsStatus, appsError) {
+  const { store } = useTailorRootContext("useSlot");
+  const activeView = useSyncExternalStore2(
+    store.views.subscribe,
+    store.views.getSnapshot,
+    store.views.getSnapshot
+  );
+  const meta = useSyncExternalStore2(store.subscribe, store.getMetaSnapshot, store.getMetaSnapshot);
+  const options = useStableContext({
+    apps: apps ?? [],
+    slot,
+    activeView: meta.schema === null || meta.schema.slots[slot]?.multiple === true ? activeView : null
+  });
+  const query = useMemo2(
+    () => createSlotStore(store.client, {
+      ...options,
+      appsStatus,
+      appsError
+    }),
+    [store.client, options, appsStatus, appsError]
+  );
+  const snapshot = useSyncExternalStore2(query.subscribe, query.getSnapshot, query.getSnapshot);
+  useEffect2(() => {
+    void query.fetch();
+  }, [query]);
+  const refetch = useCallback2(() => query.fetch({ force: true }), [query]);
+  return {
+    ...snapshot,
+    isError: snapshot.status === "error",
+    isPending: snapshot.status === "idle" || snapshot.status === "loading",
+    isLoading: snapshot.status === "loading",
+    isSuccess: snapshot.status === "ready",
+    refetch
   };
 }
 
+// src/slot-view.ts
+import { resolveSlotView, selectSlotView } from "@tailorkit/client-core";
+
 // src/primitives.tsx
-import { createContext as createContext2, useContext as useContext2, useId, useMemo as useMemo4 } from "react";
+import { createContext as createContext2, useContext as useContext2, useId, useMemo as useMemo3 } from "react";
 import { resolveTheme } from "@tailorkit/core/primitives/theme";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var PrimitiveThemeContext = createContext2(null);
 var tokenGroups = [
   "space",
@@ -292,10 +276,10 @@ var buildPrimitiveCss = ({
   display,
   nodeId,
   props,
-  screenId,
+  viewId,
   theme
 }) => {
-  const selector = `[data-tailorkit-screen="${cssEscape(screenId)}"] [data-tailorkit-node="${cssEscape(
+  const selector = `[data-tailorkit-view="${cssEscape(viewId)}"] [data-tailorkit-node="${cssEscape(
     nodeId
   )}"]`;
   const base = [`display: ${display};`];
@@ -323,8 +307,8 @@ var buildPrimitiveCss = ({
   }
   return rules.join("\n");
 };
-var buildThemeCss = (screenId, theme) => {
-  const selector = `[data-tailorkit-screen="${cssEscape(screenId)}"]`;
+var buildThemeCss = (viewId, theme) => {
+  const selector = `[data-tailorkit-view="${cssEscape(viewId)}"]`;
   const declarations = [];
   const resolvedTheme = resolveTheme(theme);
   for (const group of tokenGroups) {
@@ -336,7 +320,7 @@ var buildThemeCss = (screenId, theme) => {
 };
 var usePrimitiveNodeId = () => {
   const id = useId();
-  return useMemo4(() => `tailorkit-${id.replaceAll(":", "")}`, [id]);
+  return useMemo3(() => `tailorkit-${id.replaceAll(":", "")}`, [id]);
 };
 var Primitive = ({
   children,
@@ -351,150 +335,44 @@ var Primitive = ({
     display,
     nodeId,
     props,
-    screenId: context.screenId,
+    viewId: context.viewId,
     theme: context.theme
   }) : "";
   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 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 })
 };
 
 // src/remote-view.tsx
 import {
   Component,
   Fragment,
-  createElement as createElement2,
+  createElement,
   memo,
-  useCallback as useCallback2,
+  useCallback as useCallback3,
   useContext as useContext3,
   useEffect as useEffect3,
-  useMemo as useMemo5,
+  useMemo as useMemo4,
   useRef as useRef2,
   useState,
-  useSyncExternalStore as useSyncExternalStore2
+  useSyncExternalStore as useSyncExternalStore3
 } 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);
-  }
-};
+import { NodeStore } from "@tailorkit/client-core";
 
 // 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 formatError = (error) => error.message;
 var RemoteErrorBoundary = class extends Component {
   state = { error: null };
@@ -506,17 +384,18 @@ 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({
   appUrl,
+  sourceText,
+  getBackendSession,
   components: components2,
   createIframe,
-  props,
-  runtimeUrl
+  props
 }) {
   const appKey = appUrl.toString();
   const storeRef = useRef2(null);
@@ -529,6 +408,12 @@ function RemoteViewHost({
     appKeyRef.current = appKey;
     store.clear();
   }
+  const hostRef = useRef2(null);
+  const propsRef = useRef2(props);
+  useEffect3(() => {
+    propsRef.current = props;
+    hostRef.current?.setProps(props);
+  }, [props]);
   const dispatchRef = useRef2(null);
   const [error, setError] = useState(null);
   const [status, setStatus] = useState("starting");
@@ -540,29 +425,31 @@ function RemoteViewHost({
   useEffect3(() => {
     ctxRef.current.components = components2;
   }, [components2]);
-  const ui = useMemo5(() => {
+  const ui = useMemo4(() => {
     const ctx = ctxRef.current;
-    return createElement2(
+    return createElement(
       RemoteUIContext.Provider,
       { value: ctx },
-      createElement2(
+      createElement(
         RemoteErrorBoundary,
         { key: appKey },
-        createElement2(RemoteRoot, { store: ctx.store })
+        createElement(RemoteRoot, { store: ctx.store })
       )
     );
   }, [appKey]);
   useEffect3(() => {
     const host = createIframeUiHost(appUrl, {
       createIframe,
+      sourceText,
+      getBackendSession,
       onError: (error2) => {
         console.error("TailorKit remote app failed", error2);
         setError(error2);
         setStatus("error");
       },
-      props,
-      runtimeUrl
+      props: propsRef.current
     });
+    hostRef.current = host;
     dispatchRef.current = (payload) => host.dispatch(payload);
     const unsubscribe = host.subscribe(() => {
       const tree = host.getSnapshot();
@@ -577,26 +464,27 @@ function RemoteViewHost({
     return () => {
       unsubscribe();
       dispatchRef.current = null;
+      hostRef.current = null;
       host.destroy();
     };
-  }, [appUrl, createIframe, props, runtimeUrl, store]);
+  }, [appUrl, createIframe, sourceText, getBackendSession, store]);
   if (status === "error" && error) {
-    return createElement2("div", null, formatError(error));
+    return createElement("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);
+  const subscribe = useCallback3((listener) => store.subscribeRoot(listener), [store]);
+  const getSnapshot = useCallback3(() => store.getRootId(), [store]);
+  const rootId = useSyncExternalStore3(subscribe, getSnapshot, getSnapshot);
   if (rootId === null) {
     return null;
   }
-  return /* @__PURE__ */ jsx3(RemoteView, { nodeId: rootId });
+  return /* @__PURE__ */ jsx2(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 children = node.children.map((child) => /* @__PURE__ */ jsx2(RemoteView, { nodeId: child.id }, child.id));
   const component = components2[node.type];
   if (component === void 0) {
     throw new Error(`TailorKit component "${node.type}" is not registered.`);
@@ -614,35 +502,236 @@ var RemoteElementView = memo(({ ctx, node }) => {
       });
     };
   }
-  return createElement2(component, props, ...children);
+  return createElement(component, props, ...children);
 });
-var RemoteView = memo(function RemoteView2({ nodeId }) {
+function RemoteViewComponent({ nodeId }) {
   const ctx = useContext3(RemoteUIContext);
   if (ctx === null) {
     return null;
   }
   const { store } = ctx;
-  const subscribe = useCallback2(
+  const subscribe = useCallback3(
     (listener) => store.subscribe(nodeId, listener),
     [store, nodeId]
   );
-  const getSnapshot = useCallback2(() => store.getNode(nodeId), [store, nodeId]);
-  const node = useSyncExternalStore2(subscribe, getSnapshot, getSnapshot);
+  const getSnapshot = useCallback3(() => store.getNode(nodeId), [store, nodeId]);
+  const node = useSyncExternalStore3(subscribe, getSnapshot, getSnapshot);
   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) => /* @__PURE__ */ jsx2(RemoteView, { nodeId: child.id }, child.id));
   if (node.kind === "fragment") {
-    return createElement2(Fragment, { key: node.id }, ...childElements);
+    return createElement(Fragment, { key: node.id }, ...childElements);
   }
-  return /* @__PURE__ */ jsx3(RemoteElementView, { node, ctx });
-});
+  return /* @__PURE__ */ jsx2(RemoteElementView, { node, ctx });
+}
+var RemoteView = memo(RemoteViewComponent);
+
+// src/components/slot.tsx
+import { toBaseUrl } from "@tailorkit/client-core";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function ManagedSlot({ app, name, instanceKey }) {
+  const { store } = useTailorRootContext("Slot");
+  const state = useSyncExternalStore4(
+    store.views.subscribe,
+    store.views.getSnapshot,
+    store.views.getSnapshot
+  );
+  if (state === null) return null;
+  return instanceKey === void 0 ? /* @__PURE__ */ jsx3(SlotRenderer, { app, name, state }) : /* @__PURE__ */ jsx3(InstanceSlot, { app, name, instanceKey, state });
+}
+function InstanceSlot({
+  app,
+  name,
+  instanceKey,
+  state
+}) {
+  const { store } = useTailorRootContext("Slot");
+  const instances = useAppSlot(app, name);
+  const meta = useSyncExternalStore4(store.subscribe, store.getMetaSnapshot, store.getMetaSnapshot);
+  const instance = instances.data?.find(
+    (item) => "key" in item && item.key === instanceKey
+  );
+  const resolved = instances.isSuccess && instance && meta.schema ? resolveSlotView(app.views ?? [], name, state, meta.schema) : null;
+  const view = resolved?.status === "ready" ? resolved.view : void 0;
+  const stableContext = useStableContext(resolved?.context);
+  const stableInstance = useStableContext(
+    instance ? { key: instance.key, metadata: instance.metadata, data: instance.data } : void 0
+  );
+  const readyState = useMemo5(
+    () => view === void 0 || !stableInstance ? null : {
+      controlled: true,
+      view,
+      context: stableContext,
+      status: "ready",
+      instance: stableInstance
+    },
+    [view, stableContext, stableInstance]
+  );
+  if (instances.isPending) return /* @__PURE__ */ jsx3("div", { role: "status", children: "Loading view\u2026" });
+  if (instances.error) return /* @__PURE__ */ jsx3("div", { role: "alert", children: instances.error.message });
+  if (meta.schema && meta.schema.slots[name]?.multiple !== true)
+    return /* @__PURE__ */ jsxs2("div", { role: "alert", children: [
+      'Slot "',
+      name,
+      '" does not support instances.'
+    ] });
+  if (!instance) return /* @__PURE__ */ jsxs2("div", { role: "alert", children: [
+    'View instance "',
+    instanceKey,
+    '" is unavailable.'
+  ] });
+  if (!readyState) return null;
+  return /* @__PURE__ */ jsx3(SlotRenderer, { app, name, state: readyState });
+}
+function ControlledSlot({
+  app,
+  name,
+  view,
+  context,
+  status,
+  instance
+}) {
+  useTailorRootContext("Slot.Controlled");
+  const stableContext = useStableContext(context);
+  const stableInstance = useStableContext(instance);
+  const state = useMemo5(
+    () => ({
+      controlled: true,
+      view,
+      context: stableContext,
+      status,
+      ...status === "ready" && stableInstance ? { instance: stableInstance } : {}
+    }),
+    [view, stableContext, status, stableInstance]
+  );
+  if (status === "ready" && !instance && app.views?.some(
+    (entry) => entry.slot === name && entry.path === view && entry.instances && !entry.disabled
+  )) {
+    return /* @__PURE__ */ jsx3("div", { role: "alert", children: "A view instance is required. Pass instance to Slot.Controlled." });
+  }
+  return /* @__PURE__ */ jsx3(SlotRenderer, { app, name, state });
+}
+var Slot = Object.assign(ManagedSlot, { Controlled: ControlledSlot });
+function SlotRenderer({ app, name, state }) {
+  const { store, client } = useTailorRootContext("Slot");
+  const reactId = useId2();
+  const getBackendSession = useMemo5(
+    () => store.client.endpoints.getSessionProvider(app),
+    [store.client, app.id, app.currentDeployment?.id, app.preview?.sessionId]
+  );
+  const meta = useSyncExternalStore4(store.subscribe, store.getMetaSnapshot, store.getMetaSnapshot);
+  const previewSessionId = app.preview?.sessionId ?? "";
+  const appRef = useRef3(app);
+  appRef.current = app;
+  const subscribePreview = useCallback4(
+    (listener) => {
+      const currentApp = appRef.current;
+      return currentApp.preview?.sessionId === previewSessionId ? store.previews.subscribe(currentApp, listener) : () => {
+      };
+    },
+    [store, previewSessionId]
+  );
+  const getPreviewSnapshot = useCallback4(
+    () => store.previews.getSnapshot(previewSessionId),
+    [store, previewSessionId]
+  );
+  const preview = useSyncExternalStore4(subscribePreview, getPreviewSnapshot, getPreviewSnapshot);
+  const props = useMemo5(
+    () => ({
+      ...state,
+      slot: name,
+      declaredViews: Object.keys(meta.schema?.views ?? {}),
+      supportedViews: meta.schema?.slots[name]?.views ?? []
+    }),
+    [state, name, meta.schema]
+  );
+  const appUrl = useMemo5(() => {
+    if (app.clientPath) return new URL(app.clientPath, store.baseUrl);
+    if (!meta.assetsBaseUrl || !app.projectId || !app.currentDeployment?.id) return null;
+    return new URL(
+      `projects/${app.projectId}/apps/${app.id}/deployments/${app.currentDeployment.id}/client/client.js`,
+      toBaseUrl(meta.assetsBaseUrl)
+    );
+  }, [app, store.baseUrl, meta.assetsBaseUrl]);
+  useEffect4(() => {
+    void store.fetchMeta();
+  }, [store]);
+  useEffect4(() => {
+    store.previews.updateApp(app);
+  }, [store, app]);
+  if (meta.schema === null || appUrl === null && preview.source === null) return null;
+  const multiple = meta.schema.slots[name]?.multiple === true;
+  if ("controlled" in state && state.status === "ready") {
+    if (multiple && !state.instance)
+      return /* @__PURE__ */ jsx3("div", { role: "alert", children: "A view instance is required. Pass instance to Slot.Controlled." });
+    if (!multiple && state.instance)
+      return /* @__PURE__ */ jsxs2("div", { role: "alert", children: [
+        'Slot "',
+        name,
+        '" does not support instances.'
+      ] });
+  }
+  if (!("controlled" in state)) {
+    const selected = selectSlotView(app.views ?? [], name, state.view, meta.schema);
+    if (selected?.instances && !multiple)
+      return /* @__PURE__ */ jsxs2("div", { role: "alert", children: [
+        'Slot "',
+        name,
+        '" does not support instances.'
+      ] });
+    if (multiple)
+      return /* @__PURE__ */ jsx3("div", { role: "alert", children: "A view instance key is required. Pass instanceKey to Slot." });
+  }
+  const viewId = `tailorkit-view-${reactId.replaceAll(":", "")}`;
+  return /* @__PURE__ */ jsx3(PrimitiveThemeContext.Provider, { value: { viewId, theme: client.theme }, 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: (appUrl ?? new URL(`preview/${previewSessionId}/client.js`, store.baseUrl)).toString(),
+        sourceText: preview.source ?? void 0,
+        getBackendSession,
+        components: client.components,
+        props
+      },
+      preview.revision || appUrl?.toString()
+    )
+  ] }) });
+}
+
+// src/tailorkit.tsx
+import { createTailorKitFetchClient } from "@tailorkit/client-core";
+import { createElement as createElement2 } from "react";
 
-// src/tailor-kit.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+// src/hooks/use-register-view.ts
+import { useEffect as useEffect5, useMemo as useMemo6 } from "react";
+function useRegisterView(view, options) {
+  const { store } = useTailorRootContext("useRegisterView");
+  const id = useMemo6(() => /* @__PURE__ */ Symbol("tailorkit-current-view"), []);
+  const status = options.status ?? "ready";
+  const context = "context" in options ? options.context : void 0;
+  const contextSnapshot = useStableContext(context);
+  useEffect5(
+    () => () => {
+      store.views.unregister(id);
+    },
+    [id, store]
+  );
+  useEffect5(() => {
+    store.views.register({
+      context: contextSnapshot,
+      id,
+      view,
+      status
+    });
+  }, [contextSnapshot, id, view, status, store]);
+}
+
+// src/tailorkit.tsx
 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) {
@@ -653,7 +742,6 @@ function createTailorKitClient(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) {
@@ -663,257 +751,165 @@ function createReactTailorKitClient(options) {
       }) {
         return renderer({
           props,
-          slots: { default: children }
+          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 clientConfig = {
+    baseUrl: options.baseUrl,
+    fetchClient: createTailorKitFetchClient({
+      baseUrl: options.baseUrl,
+      cache: options.cache,
+      fetch: options.fetch
+    }),
+    components: wrappedComponents,
+    theme
   };
   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();
+    ...clientConfig,
+    Slot: Object.assign(
+      function ClientSlot(props) {
+        useTailorRootContext("Slot", client);
+        return createElement2(Slot, props);
+      },
+      {
+        Controlled: function ClientControlledSlot(props) {
+          useTailorRootContext("Slot.Controlled", client);
+          return createElement2(Slot.Controlled, props);
+        }
+      }
+    ),
+    useApps: function useClientApps(options2) {
+      useTailorRootContext("useApps", client);
+      return useApps(options2);
+    },
+    useSlot: function useClientSlot(options2) {
+      useTailorRootContext("useSlot", client);
+      return useSlot(options2);
+    },
+    useRegisterView: function useClientRegisterView(view, options2) {
+      useTailorRootContext("useRegisterView", client);
+      useRegisterView(view, options2);
     }
   };
-  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 client;
+}
+
+// src/components/root.tsx
+import { useEffect as useEffect6, useMemo as useMemo8, useState as useState2 } from "react";
+import { createTailorKitStore, toBaseUrl as toBaseUrl2 } from "@tailorkit/client-core";
+
+// src/components/render.tsx
+import { cloneElement, createElement as createElement3, isValidElement, useMemo as useMemo7 } from "react";
+function useRender({
+  defaultTagName,
+  props,
+  render
+}) {
+  return useMemo7(() => {
+    if (render) {
+      if (!isValidElement(render)) {
+        throw new Error("The render prop must be a valid React element.");
       }
+      return cloneElement(render, mergeProps(render.props, props));
     }
-    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.`
-      );
+    return createElement3(defaultTagName, props);
+  }, [defaultTagName, props, render]);
+}
+function mergeProps(...propSets) {
+  const merged = {};
+  for (const props of propSets) {
+    if (!props) {
+      continue;
     }
-    currentScreen = selected;
-  };
-  return {
-    baseUrl,
-    fetchApps: (options = {}) => {
-      if (fetchAppsPromise && !options.force) {
-        return fetchAppsPromise;
+    for (const [key, value] of Object.entries(props)) {
+      if (value === void 0) {
+        continue;
       }
-      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 = {
-          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;
+      const existing = merged[key];
+      if (key === "className" && existing && value) {
+        merged[key] = `${existing} ${value}`;
+        continue;
       }
-      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"
+      if (key === "style" && existing && value) {
+        merged[key] = {
+          ...existing,
+          ...value
         };
-        emit();
-      }).catch((error) => {
-        metaSnapshot = {
-          ...metaSnapshot,
-          error: error instanceof Error ? error : new Error(String(error)),
-          status: "error"
+        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);
+          }
         };
-        emit();
-      });
-      return fetchMetaPromise;
-    },
-    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;
+        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;
       }
-      selectCurrentScreen();
-      emit();
-    },
-    subscribe: (listener) => {
-      listeners.add(listener);
-      return () => {
-        listeners.delete(listener);
-      };
-    },
-    unregisterScreen: (id) => {
-      screens.delete(id);
-      selectCurrentScreen();
-      emit();
     }
   };
 }
-function getScreenDepth(screen) {
-  return screen === "/" ? 0 : screen.split("/").filter(Boolean).length;
+function isEventHandler(key) {
+  return /^on[A-Z]/u.test(key);
 }
-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)
+
+// src/components/root.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Root({ apps: appsProp, children, render, client, ...props }) {
+  const baseUrl = toBaseUrl2(client.baseUrl).toString();
+  const [previous, setStore] = useState2(() => ({
+    store: createTailorKitStore(baseUrl, appsProp, client.fetchClient),
+    fetchClient: client.fetchClient
+  }));
+  const previousStore = previous.store;
+  let store = previousStore;
+  if (previousStore.baseUrl.toString() !== baseUrl || previous.fetchClient !== client.fetchClient) {
+    store = createTailorKitStore(baseUrl, appsProp, client.fetchClient);
+    setStore({ store, fetchClient: client.fetchClient });
+  }
+  useEffect6(() => {
+    store.setProvidedApps(appsProp);
+  }, [store, appsProp]);
+  useEffect6(() => () => store.previews.dispose(), [store]);
+  const context = useMemo8(
+    () => ({
+      store,
+      client
+    }),
+    [store, client]
   );
-}
-function toBaseUrl(value) {
-  const url = value instanceof URL ? new URL(value) : new URL(value);
-  if (!url.pathname.endsWith("/")) {
-    url.pathname = `${url.pathname}/`;
-  }
-  return url;
+  const element = render ? useRender({
+    defaultTagName: "div",
+    props: mergeProps({ children }, props),
+    render
+  }) : children;
+  return /* @__PURE__ */ jsx4(TailorRootContext.Provider, { value: context, children: element });
 }
 export {
+  Root,
+  Slot,
   components,
   createTailorKitClient,
   primitives