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

package/dist/index.js

@@ -1,6 +1,5 @@
 // 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";
+import { useCallback as useCallback4, useEffect as useEffect4, useId as useId2, useMemo as useMemo5, useRef as useRef3, useSyncExternalStore as useSyncExternalStore4 } from "react";
 
 // src/hooks/use-stable-context.ts
 import { useRef } from "react";
@@ -14,32 +13,8 @@ function useStableContext(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 {
-    ...composeViewContext(view.path, {
-      layers: activeView.layers,
-      declaredViews: Object.keys(schema.views)
-    }),
-    instances: Boolean(view.instances)
-  };
-}
-
-// src/hooks/use-slot-instances.ts
-import { useCallback, useEffect, useMemo, useRef as useRef2, useState, useSyncExternalStore } from "react";
+import { createSlotInstancesStore } 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";
@@ -57,114 +32,115 @@ function useTailorRootContext(component, expectedClient) {
   return context;
 }
 
+// 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 { matchesApp as matchesApp2 } from "@tailorkit/client-core";
+function useApps(options = {}) {
+  return useAppsStore(useTailorRootContext("useApps").store, options);
+}
+function useAppsStore(store, options = {}) {
+  const snapshot = useAppsSnapshot(store, options);
+  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, staleTime: options.staleTime }),
+    [store, options.staleTime]
+  );
+  return { ...toUseAppsResult(snapshot, refetch), data };
+}
+function useAppsSnapshot(store, options = {}) {
+  const snapshot = useSyncExternalStore(
+    store.subscribeApps,
+    store.getAppsSnapshot,
+    store.getAppsSnapshot
+  );
+  useEffect(() => {
+    void store.fetchApps(options);
+  }, [store, options.staleTime]);
+  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",
+    isSuccess: snapshot.status === "ready",
+    refetch,
+    status: snapshot.status
+  };
+}
+
 // src/hooks/use-slot-instances.ts
-var resolveInstances = reference("_tailorkit.instances.resolve", "action");
-function useSlotInstances({ app, slot }) {
+function useSlotInstances({
+  slot,
+  staleTime,
+  gcTime
+}) {
+  const apps = useApps();
+  const instances = useResolvedSlotInstances(slot, apps.data, apps.status, apps.error, {
+    staleTime,
+    gcTime
+  });
+  const refetch = useCallback2(async () => {
+    if (apps.isSuccess) await instances.refetch();
+    else await apps.refetch();
+  }, [apps.isSuccess, apps.refetch, instances.refetch]);
+  return { ...instances, isFetching: apps.isFetching || instances.isFetching, refetch };
+}
+function useAppSlotInstances(app, slot) {
+  return useResolvedSlotInstances(slot, [app], "ready", null);
+}
+function useResolvedSlotInstances(slot, apps, appsStatus, appsError, { staleTime, gcTime } = {}) {
   const { store } = useTailorRootContext("useSlotInstances");
-  const activeView = useSyncExternalStore(
+  const activeView = useSyncExternalStore2(
     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 options = useStableContext({ apps: apps ?? [], slot, activeView });
+  const query = useMemo2(
+    () => createSlotInstancesStore(store.client, {
+      ...options,
+      appsStatus,
+      appsError,
+      staleTime,
+      gcTime
+    }),
+    [store.client, options, appsStatus, appsError, staleTime, gcTime]
   );
-  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
-        });
-      }
-    };
-    if (!request.activeView) {
-      publish("idle");
-      return;
-    }
-    if (!request.views.some((view) => view.slot === slot && view.instances && !view.disabled)) {
-      publish("ready", []);
-      return;
-    }
-    publish("loading");
-    let client;
-    try {
-      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;
-      }
-      if (resolved.status !== "ready") {
-        if (resolved.status === "error")
-          throw new Error(`Context for view "${resolved.view}" is unavailable.`);
-        publish("loading");
-        return;
-      }
-      client = createClient({ getSession });
-      backend.current = client;
-      const instances = await client.action(resolveInstances, {
-        slot,
-        path: resolved.view,
-        context: resolved.context
-      });
-      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";
+  const snapshot = useSyncExternalStore2(query.subscribe, query.getSnapshot, query.getSnapshot);
+  useEffect2(() => {
+    void query.fetch();
+  }, [query]);
+  const refetch = useCallback2(() => query.fetch({ force: true }), [query]);
   return {
-    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",
+    ...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 useMemo2 } from "react";
+import { createContext as createContext2, useContext as useContext2, useId, useMemo as useMemo3 } from "react";
 import { resolveTheme } from "@tailorkit/core/primitives/theme";
 import { jsx, jsxs } from "react/jsx-runtime";
 var PrimitiveThemeContext = createContext2(null);
@@ -331,7 +307,7 @@ var buildThemeCss = (viewId, theme) => {
 };
 var usePrimitiveNodeId = () => {
   const id = useId();
-  return useMemo2(() => `tailorkit-${id.replaceAll(":", "")}`, [id]);
+  return useMemo3(() => `tailorkit-${id.replaceAll(":", "")}`, [id]);
 };
 var Primitive = ({
   children,
@@ -367,122 +343,16 @@ import {
   Fragment,
   createElement,
   memo,
-  useCallback as useCallback2,
+  useCallback as useCallback3,
   useContext as useContext3,
-  useEffect as useEffect2,
-  useMemo as useMemo3,
-  useRef as useRef3,
-  useState as useState2,
-  useSyncExternalStore as useSyncExternalStore2
+  useEffect as useEffect3,
+  useMemo as useMemo4,
+  useRef as useRef2,
+  useState,
+  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";
@@ -515,34 +385,34 @@ function RemoteViewHost({
   props
 }) {
   const appKey = appUrl.toString();
-  const storeRef = useRef3(null);
+  const storeRef = useRef2(null);
   if (storeRef.current === null) {
     storeRef.current = new NodeStore();
   }
   const store = storeRef.current;
-  const appKeyRef = useRef3(appKey);
+  const appKeyRef = useRef2(appKey);
   if (appKeyRef.current !== appKey) {
     appKeyRef.current = appKey;
     store.clear();
   }
-  const hostRef = useRef3(null);
-  const propsRef = useRef3(props);
-  useEffect2(() => {
+  const hostRef = useRef2(null);
+  const propsRef = useRef2(props);
+  useEffect3(() => {
     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({
+  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
   });
-  useEffect2(() => {
+  useEffect3(() => {
     ctxRef.current.components = components2;
   }, [components2]);
-  const ui = useMemo3(() => {
+  const ui = useMemo4(() => {
     const ctx = ctxRef.current;
     return createElement(
       RemoteUIContext.Provider,
@@ -554,7 +424,7 @@ function RemoteViewHost({
       )
     );
   }, [appKey]);
-  useEffect2(() => {
+  useEffect3(() => {
     const host = createIframeUiHost(appUrl, {
       createIframe,
       sourceText,
@@ -591,9 +461,9 @@ function RemoteViewHost({
   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;
   }
@@ -627,12 +497,12 @@ function RemoteViewComponent({ nodeId }) {
     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;
   }
@@ -647,461 +517,12 @@ function RemoteViewComponent({ nodeId }) {
 }
 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 });
-      },
-      (appId, views) => {
-        const apps = appsSnapshot.apps.map((app) => app.id === appId ? { ...app, views } : app);
-        appsSnapshot = { ...appsSnapshot, apps, views: listViews(apps) };
-        emit();
-      }
-    )
-  };
-}
-function toBaseUrl(value) {
-  const url = value instanceof URL ? new URL(value) : new URL(value);
-  if (!url.pathname.endsWith("/")) {
-    url.pathname = `${url.pathname}/`;
-  }
-  return url;
-}
-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
-    }))
-  );
-}
-
 // 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 = useSyncExternalStore3(
+  const state = useSyncExternalStore4(
     store.views.subscribe,
     store.views.getSnapshot,
     store.views.getSnapshot
@@ -1116,14 +537,16 @@ function InstanceSlot({
   state
 }) {
   const { store } = useTailorRootContext("Slot");
-  const instances = useSlotInstances({ app, slot: name });
-  const meta = useSyncExternalStore3(store.subscribe, store.getMetaSnapshot, store.getMetaSnapshot);
+  const instances = useAppSlotInstances(app, name);
+  const meta = useSyncExternalStore4(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(
+  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,
@@ -1135,6 +558,12 @@ function InstanceSlot({
   );
   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,
@@ -1154,7 +583,7 @@ function ControlledSlot({
   useTailorRootContext("Slot.Controlled");
   const stableContext = useStableContext(context);
   const stableInstance = useStableContext(instance);
-  const state = useMemo4(
+  const state = useMemo5(
     () => ({
       controlled: true,
       view,
@@ -1175,15 +604,15 @@ 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 getBackendSession = useMemo5(
+    () => store.client.endpoints.getSessionProvider(app),
+    [store.client, app.id, app.currentDeployment?.id, app.preview?.sessionId]
   );
-  const meta = useSyncExternalStore3(store.subscribe, store.getMetaSnapshot, store.getMetaSnapshot);
+  const meta = useSyncExternalStore4(store.subscribe, store.getMetaSnapshot, store.getMetaSnapshot);
   const previewSessionId = app.preview?.sessionId ?? "";
-  const appRef = useRef4(app);
+  const appRef = useRef3(app);
   appRef.current = app;
-  const subscribePreview = useCallback3(
+  const subscribePreview = useCallback4(
     (listener) => {
       const currentApp = appRef.current;
       return currentApp.preview?.sessionId === previewSessionId ? store.previews.subscribe(currentApp, listener) : () => {
@@ -1191,12 +620,12 @@ function SlotRenderer({ app, name, state }) {
     },
     [store, previewSessionId]
   );
-  const getPreviewSnapshot = useCallback3(
+  const getPreviewSnapshot = useCallback4(
     () => store.previews.getSnapshot(previewSessionId),
     [store, previewSessionId]
   );
-  const preview = useSyncExternalStore3(subscribePreview, getPreviewSnapshot, getPreviewSnapshot);
-  const props = useMemo4(
+  const preview = useSyncExternalStore4(subscribePreview, getPreviewSnapshot, getPreviewSnapshot);
+  const props = useMemo5(
     () => ({
       ...state,
       slot: name,
@@ -1205,7 +634,7 @@ function SlotRenderer({ app, name, state }) {
     }),
     [state, name, meta.schema]
   );
-  const appUrl = useMemo4(() => {
+  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(
@@ -1213,16 +642,33 @@ function SlotRenderer({ app, name, state }) {
       toBaseUrl(meta.assetsBaseUrl)
     );
   }, [app, store.baseUrl, meta.assetsBaseUrl]);
-  useEffect3(() => {
+  useEffect4(() => {
     void store.fetchMeta();
   }, [store]);
-  useEffect3(() => {
+  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)
+    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(":", "")}`;
@@ -1243,23 +689,24 @@ function SlotRenderer({ app, name, state }) {
 }
 
 // src/tailorkit.tsx
+import { createTailorKitFetchClient } from "@tailorkit/client-core";
 import { createElement as createElement2 } from "react";
 
 // src/hooks/use-register-view.ts
-import { useEffect as useEffect4, useMemo as useMemo5 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo6 } from "react";
 function useRegisterView(view, options) {
   const { store } = useTailorRootContext("useRegisterView");
-  const id = useMemo5(() => /* @__PURE__ */ Symbol("tailorkit-current-view"), []);
+  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);
-  useEffect4(
+  useEffect5(
     () => () => {
       store.views.unregister(id);
     },
     [id, store]
   );
-  useEffect4(() => {
+  useEffect5(() => {
     store.views.register({
       context: contextSnapshot,
       id,
@@ -1269,70 +716,16 @@ function useRegisterView(view, options) {
   }, [contextSnapshot, id, view, status, store]);
 }
 
-// src/hooks/use-apps.ts
-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 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]
-  );
-  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
-  );
-  useEffect5(() => {
-    void store.fetchApps();
-  }, [store]);
-  return snapshot;
-}
-function toUseAppsResult(snapshot, refetch) {
-  return {
-    data: snapshot.status === "ready" ? snapshot.apps : void 0,
-    error: snapshot.error,
-    isError: snapshot.status === "error",
-    isLoading: snapshot.status === "loading",
-    isPending: snapshot.status === "idle" || snapshot.status === "loading",
-    isSuccess: snapshot.status === "ready",
-    refetch,
-    status: snapshot.status
-  };
-}
-
 // src/hooks/use-views.ts
 import { useCallback as useCallback5, useMemo as useMemo7 } from "react";
 function useViews(options = {}) {
   const { store } = useTailorRootContext("useViews");
-  const snapshot = useAppsSnapshot(store);
+  const snapshot = useAppsSnapshot(store, options);
   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)
+      (view) => (options.slot === void 0 || view.slot === options.slot) && matchesApp2(view.app, scopes.scopes, appIds.scopes)
     ) : void 0,
     [snapshot, scopes.key, appIds.key, options.slot]
   );
@@ -1369,6 +762,11 @@ function createReactTailorKitClient(options) {
   }
   const clientConfig = {
     baseUrl: options.baseUrl,
+    fetchClient: createTailorKitFetchClient({
+      baseUrl: options.baseUrl,
+      cache: options.cache,
+      fetch: options.fetch
+    }),
     components: wrappedComponents,
     theme
   };
@@ -1377,14 +775,12 @@ function createReactTailorKitClient(options) {
     Slot: Object.assign(
       function ClientSlot(props) {
         useTailorRootContext("Slot", client);
-        const TypedReactSlot = Slot;
-        return createElement2(TypedReactSlot, props);
+        return createElement2(Slot, props);
       },
       {
         Controlled: function ClientControlledSlot(props) {
           useTailorRootContext("Slot.Controlled", client);
-          const TypedControlledSlot = Slot.Controlled;
-          return createElement2(TypedControlledSlot, props);
+          return createElement2(Slot.Controlled, props);
         }
       }
     ),
@@ -1409,7 +805,8 @@ function createReactTailorKitClient(options) {
 }
 
 // src/components/root.tsx
-import { useEffect as useEffect6, useMemo as useMemo9, useState as useState3 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo9, 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 useMemo8 } from "react";
@@ -1487,12 +884,16 @@ function isEventHandler(key) {
 // src/components/root.tsx
 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] = useState3(() => createTailorKitStore(baseUrl, appsProp));
+  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) {
-    store = createTailorKitStore(baseUrl, appsProp);
-    setStore(store);
+  if (previousStore.baseUrl.toString() !== baseUrl || previous.fetchClient !== client.fetchClient) {
+    store = createTailorKitStore(baseUrl, appsProp, client.fetchClient);
+    setStore({ store, fetchClient: client.fetchClient });
   }
   useEffect6(() => {
     store.setProvidedApps(appsProp);