@tailorkit/react 0.1.0-beta.18 → 0.1.0-beta.19

package/dist/index.js

@@ -1,522 +1,170 @@
-// src/components/app-view.tsx
-import { createSessionProvider } from "@tailorkit/app/client";
-import { useCallback as useCallback2, useEffect as useEffect2, useId as useId2, useMemo as useMemo3, useRef as useRef3, useSyncExternalStore as useSyncExternalStore2 } from "react";
-import { isViewAncestor as isViewAncestor2 } from "@tailorkit/core/views";
+// src/components/slot.tsx
+import { createSessionProvider as createSessionProvider2 } from "@tailorkit/app/client";
+import { useCallback as useCallback3, useEffect as useEffect3, useId as useId2, useMemo as useMemo4, useRef as useRef4, useSyncExternalStore as useSyncExternalStore3 } from "react";
 
-// src/view-registry.ts
-import { getViewDepth, isViewAncestor } from "@tailorkit/core/views";
-function createViewRegistry() {
-  const entries = /* @__PURE__ */ new Map();
-  const listeners = /* @__PURE__ */ new Set();
-  let snapshot = null;
-  let nextOrder = 0;
-  let scheduled = false;
-  const publish = () => {
-    if (scheduled) {
-      return;
-    }
-    scheduled = true;
-    queueMicrotask(() => {
-      scheduled = false;
-      const ordered = [...entries.values()].toSorted(
-        (a, b) => getViewDepth(b.view) - getViewDepth(a.view) || b.order - a.order
-      );
-      const selected = ordered[0];
-      if (selected) {
-        const peers = ordered.filter(
-          (entry) => getViewDepth(entry.view) === getViewDepth(selected.view)
-        );
-        if (peers.length > 1) {
-          console.warn(
-            `TailorKit found multiple active views at the same hierarchy depth: ${peers.toReversed().map((entry) => `"${entry.view}"`).join(
-              ", "
-            )}. TailorKit selected "${selected.view}" by mount order. Only one route at a hierarchy depth should call useView.`
-          );
-        }
-        snapshot = {
-          view: selected.view,
-          layers: ordered.filter((entry) => isViewAncestor(entry.view, selected.view)).toReversed().map((entry) => ({ path: entry.view, context: entry.context, status: entry.status }))
-        };
-      } else {
-        snapshot = null;
-      }
-      for (const listener of listeners) {
-        listener();
-      }
-    });
-  };
+// 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-instances.ts
+import { createClient, createSessionProvider, reference } from "@tailorkit/app/client";
+
+// src/slot-view.ts
+import { composeViewContext, getViewHierarchy } from "@tailorkit/core/views";
+function selectSlotView(views, slot, activePath, schema) {
+  const supported = schema.slots[slot]?.views ?? [];
+  const path = getViewHierarchy(activePath).find(
+    (path2) => supported.includes(path2) && views.some((view2) => view2.slot === slot && view2.path === path2)
+  );
+  const view = views.find((view2) => view2.slot === slot && view2.path === path);
+  return !view || view.disabled ? null : view;
+}
+function resolveSlotView(views, slot, activeView, schema) {
+  const view = selectSlotView(views, slot, activeView.view, schema);
+  if (!view) return null;
   return {
-    getSnapshot: () => snapshot,
-    subscribe(listener) {
-      listeners.add(listener);
-      return () => {
-        listeners.delete(listener);
-      };
-    },
-    register(entry) {
-      entries.set(entry.id, { ...entry, order: entries.get(entry.id)?.order ?? nextOrder++ });
-      publish();
-    },
-    unregister(id) {
-      entries.delete(id);
-      publish();
-    }
+    ...composeViewContext(view.path, {
+      layers: activeView.layers,
+      declaredViews: Object.keys(schema.views)
+    }),
+    instances: Boolean(view.instances)
   };
 }
 
-// src/preview-manager.ts
-import {
-  createPreviewWebSocketClient,
-  previewMetadataSchema
-} from "@tailorkit/client-platform/preview";
-var empty = { revision: 0, source: null };
-function viewerTokenExpiresAt(metadata) {
-  const expiresAt = Number(metadata.token.split(".", 1)[0]);
-  return Number.isSafeInteger(expiresAt) ? expiresAt : 0;
-}
-function bytesFromBase64(value) {
-  const raw = atob(value);
-  const bytes = new Uint8Array(raw.length);
-  for (let index = 0; index < raw.length; index++) {
-    bytes[index] = raw.codePointAt(index) ?? 0;
+// src/hooks/use-slot-instances.ts
+import { useCallback, useEffect, useMemo, useRef as useRef2, useState, useSyncExternalStore } from "react";
+
+// src/components/context.ts
+import { createContext, useContext } from "react";
+var TailorRootContext = createContext(null);
+function useTailorRootContext(component, expectedClient) {
+  const context = useContext(TailorRootContext);
+  if (!context) {
+    throw new Error(`${component} must be rendered inside Root.`);
   }
-  return bytes;
-}
-async function verify(candidate) {
-  let source = null;
-  for (const [fileIndex, file] of candidate.manifest.files.entries()) {
-    const parts = candidate.files[fileIndex];
-    if (!parts || parts.length !== file.chunks || parts.some((part) => part === null)) {
-      return null;
-    }
-    const bytes = new Uint8Array(file.size);
-    let offset = 0;
-    for (const part of parts) {
-      if (!part) {
-        return null;
-      }
-      bytes.set(part, offset);
-      offset += part.length;
-    }
-    if (offset !== file.size) {
-      return null;
-    }
-    const digest = [...new Uint8Array(await crypto.subtle.digest("SHA-256", bytes))].map((byte) => byte.toString(16).padStart(2, "0")).join("");
-    if (digest !== file.sha256) {
-      return null;
-    }
-    if (file.path === "client.js") {
-      source = new TextDecoder().decode(bytes);
-    }
+  if (expectedClient && context.client !== expectedClient) {
+    throw new Error(
+      `${component} was created for a different TailorKit client than the one passed to Root.`
+    );
   }
-  return source;
+  return context;
 }
-function createPreviewManager(baseUrl, onEnded) {
-  const entries = /* @__PURE__ */ new Map();
-  const notify = (entry) => {
-    for (const listener of entry.listeners) {
-      listener();
-    }
-  };
-  const close = (entry) => {
-    if (entry.reconnect) {
-      clearTimeout(entry.reconnect);
-    }
-    entry.reconnect = null;
-    const socket = entry.socket;
-    entry.socket = null;
-    socket?.close();
-    entry.connecting = false;
-    entry.candidate = null;
-  };
-  const end = (entry) => {
-    close(entry);
-    entry.metadata = null;
-    entry.snapshot = empty;
-    notify(entry);
-    onEnded();
-  };
-  const handleEvent = async (entry, event) => {
-    if (event.type === "ended") {
-      end(entry);
-      return;
-    }
-    if (event.revision <= entry.snapshot.revision) {
-      return;
-    }
-    if (event.type === "begin") {
-      entry.candidate = {
-        revision: event.revision,
-        manifest: event.manifest,
-        files: event.manifest.files.map((file) => Array.from({ length: file.chunks }, () => null))
-      };
-      return;
-    }
-    const candidate = entry.candidate;
-    if (!candidate || candidate.revision !== event.revision) {
-      return;
-    }
-    if (event.type === "chunk") {
-      const file = candidate.manifest.files[event.fileIndex];
-      const slots = candidate.files[event.fileIndex];
-      if (!file || !slots || event.chunkIndex < 0 || event.chunkIndex >= slots.length || slots[event.chunkIndex]) {
-        entry.candidate = null;
-        return;
-      }
-      const bytes = bytesFromBase64(event.base64);
-      if (bytes.length !== Math.min(256 * 1024, file.size - event.chunkIndex * 256 * 1024)) {
-        entry.candidate = null;
-        return;
+
+// src/hooks/use-slot-instances.ts
+var resolveInstances = reference("_tailorkit.instances.resolve", "action");
+function useSlotInstances({ app, slot }) {
+  const { store } = useTailorRootContext("useSlotInstances");
+  const activeView = useSyncExternalStore(
+    store.views.subscribe,
+    store.views.getSnapshot,
+    store.views.getSnapshot
+  );
+  const request = useStableContext({
+    baseUrl: store.baseUrl.toString(),
+    appId: app.id,
+    deploymentId: app.currentDeployment?.id,
+    views: app.views ?? [],
+    slot,
+    activeView
+  });
+  const getSession = useMemo(
+    () => createSessionProvider({ baseUrl: store.baseUrl, appId: app.id }),
+    [store, app.id, app.currentDeployment?.id]
+  );
+  const [snapshot, setSnapshot] = useState({
+    request: null,
+    data: void 0,
+    error: null,
+    status: "idle"
+  });
+  const generation = useRef2(0);
+  const backend = useRef2(null);
+  const refetch = useCallback(async () => {
+    const id = ++generation.current;
+    backend.current?.close();
+    backend.current = null;
+    const publish = (status2, data, error = null) => {
+      if (id === generation.current) {
+        setSnapshot({
+          request,
+          status: status2,
+          data,
+          error
+        });
       }
-      slots[event.chunkIndex] = bytes;
+    };
+    if (!request.activeView) {
+      publish("idle");
       return;
     }
-    if (event.type === "complete") {
-      const source = await verify(candidate);
-      if (source !== null && entry.candidate === candidate && candidate.revision > entry.snapshot.revision) {
-        entry.snapshot = { revision: candidate.revision, source };
-        notify(entry);
-      }
-      if (entry.candidate === candidate) {
-        entry.candidate = null;
-      }
-    }
-  };
-  const connect = async (entry) => {
-    if (!entry.listeners.size || !entry.app.preview || entry.socket || entry.connecting) {
+    if (!request.views.some((view) => view.slot === slot && view.instances && !view.disabled)) {
+      publish("ready", []);
       return;
     }
-    entry.connecting = true;
-    const appMetadata = entry.app.preview;
-    let metadata = entry.metadata && viewerTokenExpiresAt(entry.metadata) > Math.max(Date.now(), viewerTokenExpiresAt(appMetadata)) ? entry.metadata : appMetadata;
+    publish("loading");
+    let client;
     try {
-      const refresh = new URL("preview/metadata", baseUrl);
-      refresh.searchParams.set("sessionId", metadata.sessionId);
-      const response = await fetch(refresh, { credentials: "same-origin" });
-      if (response.ok) {
-        metadata = previewMetadataSchema.parse(await response.json());
-        entry.metadata = metadata;
-      } else if (response.status === 404) {
-        end(entry);
+      await store.fetchMeta({ force: store.getMetaSnapshot().status === "error" });
+      if (id !== generation.current) return;
+      const meta = store.getMetaSnapshot();
+      if (meta.error) throw meta.error;
+      if (!meta.schema) throw new Error("TailorKit metadata is unavailable.");
+      const resolved = resolveSlotView(request.views, slot, request.activeView, meta.schema);
+      if (!resolved?.instances) {
+        publish("ready", []);
         return;
       }
-    } catch {
-    }
-    if (!entry.listeners.size) {
-      entry.connecting = false;
-      return;
-    }
-    const socket = new WebSocket(metadata.websocketUrl, metadata.token);
-    entry.socket = socket;
-    entry.connecting = false;
-    socket.addEventListener("open", () => {
-      entry.delay = 1e3;
-      const client = createPreviewWebSocketClient(socket);
-      void (async () => {
-        try {
-          const stream = await client.subscribe();
-          for await (const event of stream) {
-            await handleEvent(entry, event);
-          }
-        } catch {
-        } finally {
-          socket.close();
-        }
-      })();
-    });
-    socket.addEventListener("error", () => socket.close());
-    socket.addEventListener("close", () => {
-      if (entry.socket !== socket) {
+      if (resolved.status !== "ready") {
+        if (resolved.status === "error")
+          throw new Error(`Context for view "${resolved.view}" is unavailable.`);
+        publish("loading");
         return;
       }
-      entry.socket = null;
-      entry.candidate = null;
-      if (entry.listeners.size) {
-        entry.reconnect = setTimeout(() => {
-          entry.reconnect = null;
-          void connect(entry);
-        }, entry.delay);
-        entry.delay = Math.min(entry.delay * 2, 3e4);
-      }
-    });
-  };
-  return {
-    getSnapshot: (sessionId) => entries.get(sessionId)?.snapshot ?? empty,
-    updateApp: (app) => {
-      const sessionId = app.preview?.sessionId;
-      const entry = sessionId && entries.get(sessionId);
-      if (entry) {
-        entry.app = app;
-      }
-    },
-    subscribe: (app, listener) => {
-      const sessionId = app.preview?.sessionId;
-      if (!sessionId) {
-        return () => {
-        };
-      }
-      let entry = entries.get(sessionId);
-      if (!entry) {
-        entry = {
-          app,
-          metadata: null,
-          candidate: null,
-          listeners: /* @__PURE__ */ new Set(),
-          snapshot: empty,
-          socket: null,
-          connecting: false,
-          reconnect: null,
-          delay: 1e3
-        };
-        entries.set(sessionId, entry);
-      }
-      entry.app = app;
-      entry.listeners.add(listener);
-      void connect(entry);
-      return () => {
-        entry?.listeners.delete(listener);
-        if (entry && !entry.listeners.size) {
-          close(entry);
-          entries.delete(sessionId);
-        }
-      };
-    },
-    dispose: () => {
-      for (const entry of entries.values()) {
-        close(entry);
-      }
-      entries.clear();
-    }
-  };
-}
-
-// src/scope-query.ts
-function appendScopeSelection(url, scopes) {
-  if (scopes === void 0) {
-    return;
-  }
-  if (scopes.length === 0) {
-    url.searchParams.append("scopes", "");
-    return;
-  }
-  for (const scope of scopes) {
-    url.searchParams.append("scopes", scope);
-  }
-}
-function normalizeScopeSelection(scopes) {
-  if (scopes === void 0) {
-    return { key: "*" };
-  }
-  const names = [...new Set(scopes)].sort();
-  return { key: JSON.stringify(names), scopes: names };
-}
-
-// src/store.ts
-function createTailorKitStore(baseUrlInput, initialApps) {
-  const baseUrl = toBaseUrl(baseUrlInput);
-  const listeners = /* @__PURE__ */ new Set();
-  let providedApps = initialApps;
-  let unrequestedSnapshot = {
-    apps: initialApps ?? [],
-    error: null,
-    status: initialApps === void 0 ? "idle" : "ready"
-  };
-  const appsEntries = /* @__PURE__ */ new Map();
-  let metaSnapshot = {
-    assetsBaseUrl: null,
-    error: null,
-    schema: null,
-    status: "idle"
-  };
-  let fetchMetaPromise = null;
-  const getAppsEntry = (scopes) => {
-    const selection = normalizeScopeSelection(scopes);
-    let entry = appsEntries.get(selection.key);
-    if (!entry) {
-      entry = {
-        scopes: selection.scopes,
-        snapshot: unrequestedSnapshot,
-        promise: null,
-        requestId: 0,
-        requested: false,
-        subscribers: 0
-      };
-      appsEntries.set(selection.key, entry);
-    }
-    return entry;
-  };
-  const emit = () => {
-    for (const listener of listeners) {
-      listener();
-    }
-  };
-  const store = {
-    baseUrl,
-    views: createViewRegistry(),
-    setProvidedApps(apps) {
-      if (providedApps === apps) {
-        return;
-      }
-      providedApps = apps;
-      unrequestedSnapshot = {
-        apps: apps ?? [],
-        error: null,
-        status: apps === void 0 ? "idle" : "ready"
-      };
-      for (const entry of appsEntries.values()) {
-        entry.requestId += 1;
-        entry.promise = null;
-        entry.snapshot = unrequestedSnapshot;
-      }
-      emit();
-      if (apps === void 0) {
-        for (const entry of appsEntries.values()) {
-          if (entry.requested && entry.subscribers > 0) {
-            void store.fetchApps({ scopes: entry.scopes });
-          }
-        }
-      }
-    },
-    fetchApps: (options = {}) => {
-      const entry = getAppsEntry(options.scopes);
-      entry.requested = true;
-      if (providedApps !== void 0) {
-        return Promise.resolve();
-      }
-      if (entry.promise && !options.force) {
-        return entry.promise;
-      }
-      entry.snapshot = { ...entry.snapshot, status: "loading" };
-      emit();
-      const requestId = ++entry.requestId;
-      const appsUrl = new URL("apps", baseUrl);
-      appendScopeSelection(appsUrl, entry.scopes);
-      entry.promise = fetch(appsUrl).then(async (response) => {
-        if (!response.ok) {
-          throw new Error(`Unable to fetch TailorKit apps from ${baseUrl.toString()}.`);
-        }
-        const apps = await response.json();
-        if (requestId !== entry.requestId) {
-          return;
-        }
-        entry.snapshot = {
-          apps,
-          error: null,
-          status: "ready"
-        };
-        emit();
-      }).catch((error) => {
-        if (requestId !== entry.requestId) {
-          return;
-        }
-        entry.snapshot = {
-          ...entry.snapshot,
-          error: error instanceof Error ? error : new Error(String(error)),
-          status: "error"
-        };
-        emit();
-      });
-      return entry.promise;
-    },
-    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();
+      client = createClient({ getSession });
+      backend.current = client;
+      const instances = await client.action(resolveInstances, {
+        slot,
+        path: resolved.view,
+        context: resolved.context
       });
-      return fetchMetaPromise;
-    },
-    getAppsSnapshot: (scopes) => appsEntries.get(normalizeScopeSelection(scopes).key)?.snapshot ?? unrequestedSnapshot,
-    getMetaSnapshot: () => metaSnapshot,
-    subscribe: (listener) => {
-      listeners.add(listener);
-      return () => {
-        listeners.delete(listener);
-      };
-    },
-    subscribeApps: (scopes, listener) => {
-      const selection = normalizeScopeSelection(scopes);
-      const entry = getAppsEntry(selection.scopes);
-      entry.subscribers += 1;
-      listeners.add(listener);
-      return () => {
-        listeners.delete(listener);
-        entry.subscribers -= 1;
-        if (entry.subscribers === 0) {
-          entry.requestId += 1;
-          appsEntries.delete(selection.key);
-        }
-      };
+      publish("ready", instances);
+    } catch (error) {
+      publish("error", void 0, error instanceof Error ? error : new Error(String(error)));
+    } finally {
+      client?.close();
+      if (backend.current === client) backend.current = null;
     }
-  };
+  }, [request, store, slot, getSession]);
+  useEffect(() => {
+    void refetch();
+    return () => {
+      generation.current += 1;
+      backend.current?.close();
+      backend.current = null;
+    };
+  }, [refetch]);
+  const status = snapshot.request === request ? snapshot.status : activeView ? "loading" : "idle";
   return {
-    ...store,
-    previews: createPreviewManager(baseUrl, () => {
-      for (const entry of appsEntries.values()) {
-        if (entry.requested && entry.subscribers > 0) {
-          void store.fetchApps({ force: true, scopes: entry.scopes });
-        }
-      }
-    })
+    data: snapshot.request === request ? snapshot.data : void 0,
+    error: snapshot.request === request ? snapshot.error : null,
+    status,
+    isPending: status === "idle" || status === "loading",
+    isLoading: status === "loading",
+    isSuccess: status === "ready",
+    isError: status === "error",
+    refetch
   };
 }
-function toBaseUrl(value) {
-  const url = value instanceof URL ? new URL(value) : new URL(value);
-  if (!url.pathname.endsWith("/")) {
-    url.pathname = `${url.pathname}/`;
-  }
-  return url;
-}
-
-// 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/components/context.ts
-import { createContext, useContext } from "react";
-var TailorRootContext = createContext(null);
-function useTailorRootContext(component, expectedClient) {
-  const context = useContext(TailorRootContext);
-  if (!context) {
-    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/primitives.tsx
-import { createContext as createContext2, useContext as useContext2, useId, useMemo } from "react";
+import { createContext as createContext2, useContext as useContext2, useId, useMemo as useMemo2 } from "react";
 import { resolveTheme } from "@tailorkit/core/primitives/theme";
 import { jsx, jsxs } from "react/jsx-runtime";
 var PrimitiveThemeContext = createContext2(null);
@@ -683,7 +331,7 @@ var buildThemeCss = (viewId, theme) => {
 };
 var usePrimitiveNodeId = () => {
   const id = useId();
-  return useMemo(() => `tailorkit-${id.replaceAll(":", "")}`, [id]);
+  return useMemo2(() => `tailorkit-${id.replaceAll(":", "")}`, [id]);
 };
 var Primitive = ({
   children,
@@ -719,13 +367,13 @@ import {
   Fragment,
   createElement,
   memo,
-  useCallback,
+  useCallback as useCallback2,
   useContext as useContext3,
-  useEffect,
-  useMemo as useMemo2,
-  useRef as useRef2,
-  useState,
-  useSyncExternalStore
+  useEffect as useEffect2,
+  useMemo as useMemo3,
+  useRef as useRef3,
+  useState as useState2,
+  useSyncExternalStore as useSyncExternalStore2
 } from "react";
 import { createIframeUiHost } from "@tailorkit/sandbox/host";
 
@@ -855,195 +503,687 @@ var RemoteErrorBoundary = class extends Component {
     if (this.state.error) {
       return createElement("div", null, formatError(this.state.error));
     }
-    return this.props.children;
-  }
-};
-function RemoteViewHost({
-  appUrl,
-  sourceText,
-  getBackendSession,
-  components: components2,
-  createIframe,
-  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 hostRef = useRef2(null);
-  const propsRef = useRef2(props);
-  useEffect(() => {
-    propsRef.current = props;
-    hostRef.current?.setProps(props);
-  }, [props]);
-  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
-  });
-  useEffect(() => {
-    ctxRef.current.components = components2;
-  }, [components2]);
-  const ui = useMemo2(() => {
-    const ctx = ctxRef.current;
-    return createElement(
-      RemoteUIContext.Provider,
-      { value: ctx },
-      createElement(
-        RemoteErrorBoundary,
-        { key: appKey },
-        createElement(RemoteRoot, { store: ctx.store })
-      )
-    );
-  }, [appKey]);
-  useEffect(() => {
-    const host = createIframeUiHost(appUrl, {
-      createIframe,
-      sourceText,
-      getBackendSession,
-      onError: (error2) => {
-        console.error("TailorKit remote app failed", error2);
-        setError(error2);
-        setStatus("error");
+    return this.props.children;
+  }
+};
+function RemoteViewHost({
+  appUrl,
+  sourceText,
+  getBackendSession,
+  components: components2,
+  createIframe,
+  props
+}) {
+  const appKey = appUrl.toString();
+  const storeRef = useRef3(null);
+  if (storeRef.current === null) {
+    storeRef.current = new NodeStore();
+  }
+  const store = storeRef.current;
+  const appKeyRef = useRef3(appKey);
+  if (appKeyRef.current !== appKey) {
+    appKeyRef.current = appKey;
+    store.clear();
+  }
+  const hostRef = useRef3(null);
+  const propsRef = useRef3(props);
+  useEffect2(() => {
+    propsRef.current = props;
+    hostRef.current?.setProps(props);
+  }, [props]);
+  const dispatchRef = useRef3(null);
+  const [error, setError] = useState2(null);
+  const [status, setStatus] = useState2("starting");
+  const ctxRef = useRef3({
+    components: components2,
+    dispatch: (payload) => dispatchRef.current?.(payload),
+    store
+  });
+  useEffect2(() => {
+    ctxRef.current.components = components2;
+  }, [components2]);
+  const ui = useMemo3(() => {
+    const ctx = ctxRef.current;
+    return createElement(
+      RemoteUIContext.Provider,
+      { value: ctx },
+      createElement(
+        RemoteErrorBoundary,
+        { key: appKey },
+        createElement(RemoteRoot, { store: ctx.store })
+      )
+    );
+  }, [appKey]);
+  useEffect2(() => {
+    const host = createIframeUiHost(appUrl, {
+      createIframe,
+      sourceText,
+      getBackendSession,
+      onError: (error2) => {
+        console.error("TailorKit remote app failed", error2);
+        setError(error2);
+        setStatus("error");
+      },
+      props: propsRef.current
+    });
+    hostRef.current = host;
+    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;
+      hostRef.current = null;
+      host.destroy();
+    };
+  }, [appUrl, createIframe, sourceText, getBackendSession, store]);
+  if (status === "error" && 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);
+  if (rootId === null) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx2(RemoteView, { nodeId: rootId });
+}
+var RemoteElementView = memo(({ ctx, node }) => {
+  const { dispatch, components: components2 } = ctx;
+  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.`);
+  }
+  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 createElement(component, props, ...children);
+});
+function RemoteViewComponent({ nodeId }) {
+  const ctx = useContext3(RemoteUIContext);
+  if (ctx === null) {
+    return null;
+  }
+  const { store } = ctx;
+  const subscribe = useCallback2(
+    (listener) => store.subscribe(nodeId, listener),
+    [store, nodeId]
+  );
+  const getSnapshot = useCallback2(() => store.getNode(nodeId), [store, nodeId]);
+  const node = useSyncExternalStore2(subscribe, getSnapshot, getSnapshot);
+  if (node === null) {
+    return null;
+  }
+  if (node.kind === "text") {
+    return node.text;
+  }
+  const childElements = node.children.map((child) => /* @__PURE__ */ jsx2(RemoteView, { nodeId: child.id }, child.id));
+  if (node.kind === "fragment") {
+    return createElement(Fragment, { key: node.id }, ...childElements);
+  }
+  return /* @__PURE__ */ jsx2(RemoteElementView, { node, ctx });
+}
+var RemoteView = memo(RemoteViewComponent);
+
+// src/view-registry.ts
+import { getViewDepth, isViewAncestor } from "@tailorkit/core/views";
+function createViewRegistry() {
+  const entries = /* @__PURE__ */ new Map();
+  const listeners = /* @__PURE__ */ new Set();
+  let snapshot = null;
+  let nextOrder = 0;
+  let scheduled = false;
+  const publish = () => {
+    if (scheduled) {
+      return;
+    }
+    scheduled = true;
+    queueMicrotask(() => {
+      scheduled = false;
+      const ordered = [...entries.values()].toSorted(
+        (a, b) => getViewDepth(b.view) - getViewDepth(a.view) || b.order - a.order
+      );
+      const selected = ordered[0];
+      if (selected) {
+        const peers = ordered.filter(
+          (entry) => getViewDepth(entry.view) === getViewDepth(selected.view)
+        );
+        if (peers.length > 1) {
+          console.warn(
+            `TailorKit found multiple active views at the same hierarchy depth: ${peers.toReversed().map((entry) => `"${entry.view}"`).join(
+              ", "
+            )}. TailorKit selected "${selected.view}" by mount order. Only one route at a hierarchy depth should call useRegisterView.`
+          );
+        }
+        snapshot = {
+          view: selected.view,
+          layers: ordered.filter((entry) => isViewAncestor(entry.view, selected.view)).toReversed().map((entry) => ({ path: entry.view, context: entry.context, status: entry.status }))
+        };
+      } else {
+        snapshot = null;
+      }
+      for (const listener of listeners) {
+        listener();
+      }
+    });
+  };
+  return {
+    getSnapshot: () => snapshot,
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    register(entry) {
+      entries.set(entry.id, { ...entry, order: entries.get(entry.id)?.order ?? nextOrder++ });
+      publish();
+    },
+    unregister(id) {
+      entries.delete(id);
+      publish();
+    }
+  };
+}
+
+// src/preview-manager.ts
+import {
+  createPreviewWebSocketClient,
+  previewMetadataSchema
+} from "@tailorkit/client-platform/preview";
+var empty = { revision: 0, source: null };
+function viewerTokenExpiresAt(metadata) {
+  const expiresAt = Number(metadata.token.split(".", 1)[0]);
+  return Number.isSafeInteger(expiresAt) ? expiresAt : 0;
+}
+function bytesFromBase64(value) {
+  const raw = atob(value);
+  const bytes = new Uint8Array(raw.length);
+  for (let index = 0; index < raw.length; index++) {
+    bytes[index] = raw.codePointAt(index) ?? 0;
+  }
+  return bytes;
+}
+async function verify(candidate) {
+  let source = null;
+  for (const [fileIndex, file] of candidate.manifest.files.entries()) {
+    const parts = candidate.files[fileIndex];
+    if (!parts || parts.length !== file.chunks || parts.some((part) => part === null)) {
+      return null;
+    }
+    const bytes = new Uint8Array(file.size);
+    let offset = 0;
+    for (const part of parts) {
+      if (!part) {
+        return null;
+      }
+      bytes.set(part, offset);
+      offset += part.length;
+    }
+    if (offset !== file.size) {
+      return null;
+    }
+    const digest = [...new Uint8Array(await crypto.subtle.digest("SHA-256", bytes))].map((byte) => byte.toString(16).padStart(2, "0")).join("");
+    if (digest !== file.sha256) {
+      return null;
+    }
+    if (file.path === "client.js") {
+      source = new TextDecoder().decode(bytes);
+    }
+  }
+  return source;
+}
+function createPreviewManager(baseUrl, onEnded, onViews) {
+  const entries = /* @__PURE__ */ new Map();
+  const notify = (entry) => {
+    for (const listener of entry.listeners) {
+      listener();
+    }
+  };
+  const close = (entry) => {
+    if (entry.reconnect) {
+      clearTimeout(entry.reconnect);
+    }
+    entry.reconnect = null;
+    const socket = entry.socket;
+    entry.socket = null;
+    socket?.close();
+    entry.connecting = false;
+    entry.candidate = null;
+  };
+  const end = (entry) => {
+    close(entry);
+    entry.metadata = null;
+    entry.snapshot = empty;
+    notify(entry);
+    onEnded();
+  };
+  const handleEvent = async (entry, event) => {
+    if (event.type === "ended") {
+      end(entry);
+      return;
+    }
+    if (event.revision <= entry.snapshot.revision) {
+      return;
+    }
+    if (event.type === "begin") {
+      entry.candidate = {
+        revision: event.revision,
+        manifest: event.manifest,
+        files: event.manifest.files.map((file) => Array.from({ length: file.chunks }, () => null))
+      };
+      return;
+    }
+    const candidate = entry.candidate;
+    if (!candidate || candidate.revision !== event.revision) {
+      return;
+    }
+    if (event.type === "chunk") {
+      const file = candidate.manifest.files[event.fileIndex];
+      const slots = candidate.files[event.fileIndex];
+      if (!file || !slots || event.chunkIndex < 0 || event.chunkIndex >= slots.length || slots[event.chunkIndex]) {
+        entry.candidate = null;
+        return;
+      }
+      const bytes = bytesFromBase64(event.base64);
+      if (bytes.length !== Math.min(256 * 1024, file.size - event.chunkIndex * 256 * 1024)) {
+        entry.candidate = null;
+        return;
+      }
+      slots[event.chunkIndex] = bytes;
+      return;
+    }
+    if (event.type === "complete") {
+      const source = await verify(candidate);
+      if (source !== null && entry.candidate === candidate && candidate.revision > entry.snapshot.revision) {
+        entry.snapshot = { revision: candidate.revision, source };
+        if (candidate.manifest.views !== void 0)
+          onViews?.(entry.app.id, candidate.manifest.views);
+        notify(entry);
+      }
+      if (entry.candidate === candidate) {
+        entry.candidate = null;
+      }
+    }
+  };
+  const connect = async (entry) => {
+    if (!entry.listeners.size || !entry.app.preview || entry.socket || entry.connecting) {
+      return;
+    }
+    entry.connecting = true;
+    const appMetadata = entry.app.preview;
+    let metadata = entry.metadata && viewerTokenExpiresAt(entry.metadata) > Math.max(Date.now(), viewerTokenExpiresAt(appMetadata)) ? entry.metadata : appMetadata;
+    try {
+      const refresh = new URL("preview/metadata", baseUrl);
+      refresh.searchParams.set("sessionId", metadata.sessionId);
+      const response = await fetch(refresh, { credentials: "same-origin" });
+      if (response.ok) {
+        metadata = previewMetadataSchema.parse(await response.json());
+        entry.metadata = metadata;
+      } else if (response.status === 404) {
+        end(entry);
+        return;
+      }
+    } catch {
+    }
+    if (!entry.listeners.size) {
+      entry.connecting = false;
+      return;
+    }
+    const socket = new WebSocket(metadata.websocketUrl, metadata.token);
+    entry.socket = socket;
+    entry.connecting = false;
+    socket.addEventListener("open", () => {
+      entry.delay = 1e3;
+      const client = createPreviewWebSocketClient(socket);
+      void (async () => {
+        try {
+          const stream = await client.subscribe();
+          for await (const event of stream) {
+            await handleEvent(entry, event);
+          }
+        } catch {
+        } finally {
+          socket.close();
+        }
+      })();
+    });
+    socket.addEventListener("error", () => socket.close());
+    socket.addEventListener("close", () => {
+      if (entry.socket !== socket) {
+        return;
+      }
+      entry.socket = null;
+      entry.candidate = null;
+      if (entry.listeners.size) {
+        entry.reconnect = setTimeout(() => {
+          entry.reconnect = null;
+          void connect(entry);
+        }, entry.delay);
+        entry.delay = Math.min(entry.delay * 2, 3e4);
+      }
+    });
+  };
+  return {
+    getSnapshot: (sessionId) => entries.get(sessionId)?.snapshot ?? empty,
+    updateApp: (app) => {
+      const sessionId = app.preview?.sessionId;
+      const entry = sessionId && entries.get(sessionId);
+      if (entry) {
+        entry.app = app;
+      }
+    },
+    subscribe: (app, listener) => {
+      const sessionId = app.preview?.sessionId;
+      if (!sessionId) {
+        return () => {
+        };
+      }
+      let entry = entries.get(sessionId);
+      if (!entry) {
+        entry = {
+          app,
+          metadata: null,
+          candidate: null,
+          listeners: /* @__PURE__ */ new Set(),
+          snapshot: empty,
+          socket: null,
+          connecting: false,
+          reconnect: null,
+          delay: 1e3
+        };
+        entries.set(sessionId, entry);
+      }
+      entry.app = app;
+      entry.listeners.add(listener);
+      void connect(entry);
+      return () => {
+        entry?.listeners.delete(listener);
+        if (entry && !entry.listeners.size) {
+          close(entry);
+          entries.delete(sessionId);
+        }
+      };
+    },
+    dispose: () => {
+      for (const entry of entries.values()) {
+        close(entry);
+      }
+      entries.clear();
+    }
+  };
+}
+
+// src/store.ts
+function createTailorKitStore(baseUrlInput, initialApps) {
+  const baseUrl = toBaseUrl(baseUrlInput);
+  const listeners = /* @__PURE__ */ new Set();
+  let providedApps = initialApps;
+  let appsSnapshot = {
+    apps: initialApps ?? [],
+    views: listViews(initialApps ?? []),
+    error: null,
+    status: initialApps === void 0 ? "idle" : "ready"
+  };
+  let appsPromise = null;
+  let appsRequestId = 0;
+  let appsRequested = false;
+  let appsSubscribers = 0;
+  let metaSnapshot = {
+    assetsBaseUrl: null,
+    error: null,
+    schema: null,
+    status: "idle"
+  };
+  let fetchMetaPromise = null;
+  let metaRequestId = 0;
+  const emit = () => {
+    for (const listener of listeners) {
+      listener();
+    }
+  };
+  const store = {
+    baseUrl,
+    views: createViewRegistry(),
+    setProvidedApps(apps) {
+      if (providedApps === apps) {
+        return;
+      }
+      providedApps = apps;
+      appsRequestId += 1;
+      appsPromise = null;
+      appsSnapshot = {
+        apps: apps ?? [],
+        views: listViews(apps ?? []),
+        error: null,
+        status: apps === void 0 ? "idle" : "ready"
+      };
+      emit();
+      if (apps === void 0 && appsRequested && appsSubscribers > 0) {
+        void store.fetchApps();
+      }
+    },
+    fetchApps: (options = {}) => {
+      appsRequested = true;
+      if (providedApps !== void 0) {
+        return Promise.resolve();
+      }
+      if (appsPromise && !options.force) {
+        return appsPromise;
+      }
+      appsSnapshot = { ...appsSnapshot, error: null, status: "loading" };
+      emit();
+      const requestId = ++appsRequestId;
+      appsPromise = 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 !== appsRequestId) return;
+        appsSnapshot = { apps, views: listViews(apps), error: null, status: "ready" };
+        emit();
+      }).catch((error) => {
+        if (requestId !== appsRequestId) return;
+        appsSnapshot = {
+          ...appsSnapshot,
+          error: error instanceof Error ? error : new Error(String(error)),
+          status: "error"
+        };
+        emit();
+      });
+      return appsPromise;
+    },
+    fetchMeta: (options = {}) => {
+      if (fetchMetaPromise && !options.force) {
+        return fetchMetaPromise;
+      }
+      metaSnapshot = { ...metaSnapshot, error: null, status: "loading" };
+      emit();
+      const requestId = ++metaRequestId;
+      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();
+        if (requestId !== metaRequestId) return;
+        metaSnapshot = {
+          assetsBaseUrl: meta.assetsBaseUrl ?? null,
+          error: null,
+          schema: meta.schema,
+          status: "ready"
+        };
+        emit();
+      }).catch((error) => {
+        if (requestId !== metaRequestId) return;
+        metaSnapshot = {
+          ...metaSnapshot,
+          error: error instanceof Error ? error : new Error(String(error)),
+          status: "error"
+        };
+        emit();
+      });
+      return fetchMetaPromise;
+    },
+    getAppsSnapshot: () => appsSnapshot,
+    getMetaSnapshot: () => metaSnapshot,
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    subscribeApps: (listener) => {
+      appsSubscribers += 1;
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+        appsSubscribers -= 1;
+      };
+    }
+  };
+  return {
+    ...store,
+    previews: createPreviewManager(
+      baseUrl,
+      () => {
+        if (appsRequested) void store.fetchApps({ force: true });
       },
-      props: propsRef.current
-    });
-    hostRef.current = host;
-    dispatchRef.current = (payload) => host.dispatch(payload);
-    const unsubscribe = host.subscribe(() => {
-      const tree = host.getSnapshot();
-      if (tree !== null) {
-        store.setSnapshot(tree);
-        setStatus("ready");
+      (appId, views) => {
+        const apps = appsSnapshot.apps.map((app) => app.id === appId ? { ...app, views } : app);
+        appsSnapshot = { ...appsSnapshot, apps, views: listViews(apps) };
+        emit();
       }
-    });
-    setStatus("starting");
-    setError(null);
-    host.mount();
-    return () => {
-      unsubscribe();
-      dispatchRef.current = null;
-      hostRef.current = null;
-      host.destroy();
-    };
-  }, [appUrl, createIframe, sourceText, getBackendSession, store]);
-  if (status === "error" && error) {
-    return createElement("div", null, formatError(error));
-  }
-  return ui;
+    )
+  };
 }
-function RemoteRoot({ store }) {
-  const subscribe = useCallback((listener) => store.subscribeRoot(listener), [store]);
-  const getSnapshot = useCallback(() => store.getRootId(), [store]);
-  const rootId = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-  if (rootId === null) {
-    return null;
+function toBaseUrl(value) {
+  const url = value instanceof URL ? new URL(value) : new URL(value);
+  if (!url.pathname.endsWith("/")) {
+    url.pathname = `${url.pathname}/`;
   }
-  return /* @__PURE__ */ jsx2(RemoteView, { nodeId: rootId });
+  return url;
 }
-var RemoteElementView = memo(({ ctx, node }) => {
-  const { dispatch, components: components2 } = ctx;
-  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.`);
-  }
-  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 createElement(component, props, ...children);
-});
-function RemoteViewComponent({ nodeId }) {
-  const ctx = useContext3(RemoteUIContext);
-  if (ctx === null) {
-    return null;
-  }
-  const { store } = ctx;
-  const subscribe = useCallback(
-    (listener) => store.subscribe(nodeId, listener),
-    [store, nodeId]
+function listViews(apps) {
+  return apps.flatMap(
+    (app) => (app.views ?? []).filter((view) => !view.disabled).map(({ slot, path, instances }) => ({
+      id: JSON.stringify([app.id, slot, path]),
+      ...instances ? { instances } : {},
+      app,
+      slot,
+      path
+    }))
   );
-  const getSnapshot = useCallback(() => store.getNode(nodeId), [store, nodeId]);
-  const node = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-  if (node === null) {
-    return null;
-  }
-  if (node.kind === "text") {
-    return node.text;
-  }
-  const childElements = node.children.map((child) => /* @__PURE__ */ jsx2(RemoteView, { nodeId: child.id }, child.id));
-  if (node.kind === "fragment") {
-    return createElement(Fragment, { key: node.id }, ...childElements);
-  }
-  return /* @__PURE__ */ jsx2(RemoteElementView, { node, ctx });
 }
-var RemoteView = memo(RemoteViewComponent);
 
-// src/components/app-view.tsx
+// src/components/slot.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var AppView = ({
-  app,
-  slot,
-  createIframe,
-  fallback = null,
-  ...viewProps
-}) => {
-  const { store, client } = useTailorRootContext("AppView");
-  const { theme, components: wrappedComponents } = client;
-  const reactId = useId2();
-  const getBackendSession = useMemo3(
-    () => createSessionProvider({ baseUrl: store.baseUrl, appId: app.id }),
-    [store.baseUrl, app.id]
-  );
-  const currentView = useSyncExternalStore2(
+function ManagedSlot({ app, name, instanceKey }) {
+  const { store } = useTailorRootContext("Slot");
+  const state = useSyncExternalStore3(
     store.views.subscribe,
     store.views.getSnapshot,
     store.views.getSnapshot
   );
-  const view = viewProps.view;
-  const suppliedContext = viewProps.context;
-  const context = useStableContext(suppliedContext);
-  const status = viewProps.status ?? "ready";
-  const props = useMemo3(() => {
-    if (view !== void 0) {
-      return {
-        slot,
-        view,
-        layers: [
-          ...(currentView?.layers ?? []).filter(
-            (layer) => layer.path !== view && isViewAncestor2(layer.path, view)
-          ),
-          { path: view, context, status }
-        ]
-      };
-    }
-    return currentView === null ? void 0 : { slot, ...currentView };
-  }, [context, currentView, view, status, slot]);
-  const meta = useSyncExternalStore2(store.subscribe, store.getMetaSnapshot, store.getMetaSnapshot);
+  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 = useSlotInstances({ app, slot: name });
+  const meta = useSyncExternalStore3(store.subscribe, store.getMetaSnapshot, store.getMetaSnapshot);
+  const instance = instances.data?.find((instance2) => instance2.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);
+  const readyState = useMemo4(
+    () => 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 (!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 = useMemo4(
+    () => ({
+      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 = useMemo4(
+    () => createSessionProvider2({ baseUrl: store.baseUrl, appId: app.id }),
+    [store.baseUrl, app.id, app.currentDeployment?.id]
+  );
+  const meta = useSyncExternalStore3(store.subscribe, store.getMetaSnapshot, store.getMetaSnapshot);
   const previewSessionId = app.preview?.sessionId ?? "";
-  const appRef = useRef3(app);
+  const appRef = useRef4(app);
   appRef.current = app;
-  const subscribePreview = useCallback2(
+  const subscribePreview = useCallback3(
     (listener) => {
       const currentApp = appRef.current;
       return currentApp.preview?.sessionId === previewSessionId ? store.previews.subscribe(currentApp, listener) : () => {
@@ -1051,85 +1191,75 @@ var AppView = ({
     },
     [store, previewSessionId]
   );
-  const getPreviewSnapshot = useCallback2(
+  const getPreviewSnapshot = useCallback3(
     () => store.previews.getSnapshot(previewSessionId),
     [store, previewSessionId]
   );
-  const previewSnapshot = useSyncExternalStore2(
-    subscribePreview,
-    getPreviewSnapshot,
-    getPreviewSnapshot
-  );
-  useEffect2(() => {
-    store.previews.updateApp(app);
-  }, [store, app]);
-  const runtimeProps = useMemo3(
-    () => props === void 0 ? void 0 : {
-      ...props,
+  const preview = useSyncExternalStore3(subscribePreview, getPreviewSnapshot, getPreviewSnapshot);
+  const props = useMemo4(
+    () => ({
+      ...state,
+      slot: name,
       declaredViews: Object.keys(meta.schema?.views ?? {}),
-      supportedViews: meta.schema?.slots[slot]?.views ?? []
-    },
-    [props, meta.schema, slot]
-  );
-  const assetsBaseUrl = app.clientPath ? null : meta.assetsBaseUrl;
-  const appUrl = useMemo3(
-    () => resolveAppUrl(app, store.baseUrl, assetsBaseUrl),
-    [app, assetsBaseUrl, store.baseUrl]
+      supportedViews: meta.schema?.slots[name]?.views ?? []
+    }),
+    [state, name, meta.schema]
   );
-  useEffect2(() => {
+  const appUrl = useMemo4(() => {
+    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]);
+  useEffect3(() => {
     void store.fetchMeta();
   }, [store]);
-  if (props === void 0 || appUrl === null && previewSnapshot.source === null || meta.schema === null) {
-    return fallback;
+  useEffect3(() => {
+    store.previews.updateApp(app);
+  }, [store, app]);
+  if (meta.schema === null || appUrl === null && preview.source === null) return null;
+  if (!("controlled" in state)) {
+    const selected = selectSlotView(app.views ?? [], name, state.view, meta.schema);
+    if (selected?.instances)
+      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 }, children: /* @__PURE__ */ jsxs2("div", { "data-tailorkit-view": viewId, children: [
-    /* @__PURE__ */ jsx3("style", { "data-tailorkit-theme-style": viewId, children: buildThemeCss(viewId, theme) }),
+  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: previewSnapshot.source ?? void 0,
+        sourceText: preview.source ?? void 0,
         getBackendSession,
-        components: wrappedComponents,
-        createIframe,
-        props: runtimeProps
+        components: client.components,
+        props
       },
-      previewSnapshot.revision || appUrl?.toString()
+      preview.revision || appUrl?.toString()
     )
   ] }) });
-};
-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}/client/client.js`,
-    toBaseUrl(assetsBaseUrl)
-  );
 }
 
 // src/tailorkit.tsx
 import { createElement as createElement2 } from "react";
 
-// src/hooks/use-view.ts
-import { useEffect as useEffect3, useMemo as useMemo4 } from "react";
-function useView(view, options) {
-  const { store } = useTailorRootContext("useView");
-  const id = useMemo4(() => /* @__PURE__ */ Symbol("tailorkit-current-view"), []);
+// src/hooks/use-register-view.ts
+import { useEffect as useEffect4, useMemo as useMemo5 } from "react";
+function useRegisterView(view, options) {
+  const { store } = useTailorRootContext("useRegisterView");
+  const id = useMemo5(() => /* @__PURE__ */ Symbol("tailorkit-current-view"), []);
   const status = options.status ?? "ready";
   const context = "context" in options ? options.context : void 0;
   const contextSnapshot = useStableContext(context);
-  useEffect3(
+  useEffect4(
     () => () => {
       store.views.unregister(id);
     },
     [id, store]
   );
-  useEffect3(() => {
+  useEffect4(() => {
     store.views.register({
       context: contextSnapshot,
       id,
@@ -1140,29 +1270,45 @@ function useView(view, options) {
 }
 
 // src/hooks/use-apps.ts
-import { useCallback as useCallback3, useEffect as useEffect4, useSyncExternalStore as useSyncExternalStore3 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect5, useMemo as useMemo6, useSyncExternalStore as useSyncExternalStore4 } from "react";
+
+// src/scope-query.ts
+function normalizeScopeSelection(scopes) {
+  if (scopes === void 0) {
+    return { key: "*" };
+  }
+  const names = [...new Set(scopes)].sort();
+  return { key: JSON.stringify(names), scopes: names };
+}
+
+// src/hooks/use-apps.ts
 function useApps(options = {}) {
   return useAppsStore(useTailorRootContext("useApps").store, options);
 }
 function useAppsStore(store, options = {}) {
-  const selection = normalizeScopeSelection(options.scopes);
-  const subscribe = useCallback3(
-    (listener) => store.subscribeApps(selection.scopes, listener),
-    [store, selection.key]
-  );
-  const snapshot = useSyncExternalStore3(
-    subscribe,
-    () => store.getAppsSnapshot(selection.scopes),
-    () => store.getAppsSnapshot(selection.scopes)
+  const snapshot = useAppsSnapshot(store);
+  const scopes = normalizeScopeSelection(options.scopes);
+  const appIds = normalizeScopeSelection(options.appIds);
+  const data = useMemo6(
+    () => snapshot.status === "ready" ? snapshot.apps.filter((app) => matchesApp(app, scopes.scopes, appIds.scopes)) : void 0,
+    [snapshot, scopes.key, appIds.key]
   );
-  useEffect4(() => {
-    void store.fetchApps({ scopes: selection.scopes });
-  }, [store, selection.key]);
-  const refetch = useCallback3(
-    () => store.fetchApps({ force: true, scopes: selection.scopes }),
-    [store, selection.key]
+  const refetch = useCallback4(() => store.fetchApps({ force: true }), [store]);
+  return { ...toUseAppsResult(snapshot, refetch), data };
+}
+function matchesApp(app, scopes, appIds) {
+  return (scopes === void 0 || app.scope !== void 0 && scopes.includes(app.scope.name)) && (appIds === void 0 || appIds.includes(app.id));
+}
+function useAppsSnapshot(store) {
+  const snapshot = useSyncExternalStore4(
+    store.subscribeApps,
+    store.getAppsSnapshot,
+    store.getAppsSnapshot
   );
-  return toUseAppsResult(snapshot, refetch);
+  useEffect5(() => {
+    void store.fetchApps();
+  }, [store]);
+  return snapshot;
 }
 function toUseAppsResult(snapshot, refetch) {
   return {
@@ -1177,6 +1323,23 @@ function toUseAppsResult(snapshot, refetch) {
   };
 }
 
+// src/hooks/use-views.ts
+import { useCallback as useCallback5, useMemo as useMemo7 } from "react";
+function useViews(options = {}) {
+  const { store } = useTailorRootContext("useViews");
+  const snapshot = useAppsSnapshot(store);
+  const scopes = normalizeScopeSelection(options.scopes);
+  const appIds = normalizeScopeSelection(options.appIds);
+  const data = useMemo7(
+    () => snapshot.status === "ready" ? snapshot.views.filter(
+      (view) => (options.slot === void 0 || view.slot === options.slot) && matchesApp(view.app, scopes.scopes, appIds.scopes)
+    ) : void 0,
+    [snapshot, scopes.key, appIds.key, options.slot]
+  );
+  const refetch = useCallback5(() => store.fetchApps({ force: true }), [store]);
+  return { ...toUseAppsResult(snapshot, refetch), data };
+}
+
 // src/tailorkit.tsx
 var componentTagPrefix = "tailorkit-";
 var toComponentTagName = (name) => `${componentTagPrefix}${name.replaceAll(/([a-z0-9])([A-Z])/gu, "$1-$2").replaceAll(/[\s_]+/gu, "-").toLowerCase()}`;
@@ -1211,37 +1374,51 @@ function createReactTailorKitClient(options) {
   };
   const client = {
     ...clientConfig,
-    AppView: function ClientAppView(props) {
-      useTailorRootContext("AppView", client);
-      const TypedReactAppView = AppView;
-      return createElement2(
-        TypedReactAppView,
-        props
-      );
-    },
+    Slot: Object.assign(
+      function ClientSlot(props) {
+        useTailorRootContext("Slot", client);
+        const TypedReactSlot = Slot;
+        return createElement2(TypedReactSlot, props);
+      },
+      {
+        Controlled: function ClientControlledSlot(props) {
+          useTailorRootContext("Slot.Controlled", client);
+          const TypedControlledSlot = Slot.Controlled;
+          return createElement2(TypedControlledSlot, props);
+        }
+      }
+    ),
     useApps: function useClientApps(options2) {
       useTailorRootContext("useApps", client);
       return useApps(options2);
     },
-    useView: function useClientView(view, options2) {
-      useTailorRootContext("useView", client);
-      useView(view, options2);
+    useViews: function useClientViews(options2) {
+      useTailorRootContext("useViews", client);
+      return useViews(options2);
+    },
+    useSlotInstances: function useClientSlotInstances(options2) {
+      useTailorRootContext("useSlotInstances", client);
+      return useSlotInstances(options2);
+    },
+    useRegisterView: function useClientRegisterView(view, options2) {
+      useTailorRootContext("useRegisterView", client);
+      useRegisterView(view, options2);
     }
   };
   return client;
 }
 
 // src/components/root.tsx
-import { useEffect as useEffect5, useMemo as useMemo6, useState as useState2 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo9, useState as useState3 } from "react";
 
 // src/components/render.tsx
-import { cloneElement, createElement as createElement3, isValidElement, useMemo as useMemo5 } from "react";
+import { cloneElement, createElement as createElement3, isValidElement, useMemo as useMemo8 } from "react";
 function useRender({
   defaultTagName,
   props,
   render
 }) {
-  return useMemo5(() => {
+  return useMemo8(() => {
     if (render) {
       if (!isValidElement(render)) {
         throw new Error("The render prop must be a valid React element.");
@@ -1311,17 +1488,17 @@ function isEventHandler(key) {
 import { jsx as jsx4 } from "react/jsx-runtime";
 function Root({ apps: appsProp, children, render, client, ...props }) {
   const baseUrl = toBaseUrl(client.baseUrl).toString();
-  const [previousStore, setStore] = useState2(() => createTailorKitStore(baseUrl, appsProp));
+  const [previousStore, setStore] = useState3(() => createTailorKitStore(baseUrl, appsProp));
   let store = previousStore;
   if (previousStore.baseUrl.toString() !== baseUrl) {
     store = createTailorKitStore(baseUrl, appsProp);
     setStore(store);
   }
-  useEffect5(() => {
+  useEffect6(() => {
     store.setProvidedApps(appsProp);
   }, [store, appsProp]);
-  useEffect5(() => () => store.previews.dispose(), [store]);
-  const context = useMemo6(
+  useEffect6(() => () => store.previews.dispose(), [store]);
+  const context = useMemo9(
     () => ({
       store,
       client
@@ -1336,8 +1513,8 @@ function Root({ apps: appsProp, children, render, client, ...props }) {
   return /* @__PURE__ */ jsx4(TailorRootContext.Provider, { value: context, children: element });
 }
 export {
-  AppView,
   Root,
+  Slot,
   components,
   createTailorKitClient,
   primitives