@tailorkit/react 0.1.0-beta.13 → 0.1.0-beta.16

package/dist/components/app-view.d.ts

@@ -1,3 +1,3 @@
 import type { ReactNode } from "react";
-import type { AppViewProps } from "../tailor-kit";
+import type { AppViewProps } from "../tailorkit";
 export declare const AppView: ({ app, slot, createIframe, fallback, ...viewProps }: AppViewProps) => ReactNode;

package/dist/components/context.d.ts

@@ -1,8 +1,8 @@
 import type { TailorKitStore } from "../store";
-import type { TailorKitInstance } from "../tailor-kit";
+import type { TailorKitClientConfig } from "../tailorkit";
 export interface TailorRootContextValue {
     store: TailorKitStore;
-    client: TailorKitInstance;
+    client: TailorKitClientConfig;
 }
 export declare const TailorRootContext: import("react").Context<TailorRootContextValue | null>;
-export declare function useTailorRootContext(component: string): TailorRootContextValue;
+export declare function useTailorRootContext(component: string, expectedClient?: TailorKitClientConfig): TailorRootContextValue;

package/dist/components/root.d.ts

@@ -1,9 +1,9 @@
 import type { ReactNode } from "react";
-import type { TailorKitApp, TailorKitInstance } from "../tailor-kit";
+import type { TailorKitApp, TailorKitClientConfig } from "../tailorkit";
 import type { ComponentProps } from "./render";
 export interface RootProps extends ComponentProps<"div"> {
     apps?: TailorKitApp[];
     children?: ReactNode;
-    client: TailorKitInstance;
+    client: TailorKitClientConfig;
 }
 export declare function Root({ apps: appsProp, children, render, client, ...props }: RootProps): ReactNode;

package/dist/hooks/use-apps.d.ts

@@ -1,5 +1,8 @@
-import type { TailorKitApp } from "../tailor-kit";
+import type { TailorKitApp } from "../tailorkit";
 import type { TailorKitStore } from "../store";
+export interface UseAppsOptions<TScopeNames extends string = string> {
+    scopes?: readonly TScopeNames[];
+}
 export interface UseAppsResult {
     data: TailorKitApp[] | undefined;
     error: Error | null;
@@ -10,5 +13,5 @@ export interface UseAppsResult {
     refetch: () => Promise<void>;
     status: "error" | "idle" | "loading" | "ready";
 }
-export declare function useApps(): UseAppsResult;
-export declare function useAppsStore(store: TailorKitStore): UseAppsResult;
+export declare function useApps(options?: UseAppsOptions): UseAppsResult;
+export declare function useAppsStore(store: TailorKitStore, options?: UseAppsOptions): UseAppsResult;

package/dist/hooks/use-view.d.ts

@@ -1,8 +1,8 @@
 import type { StandardJSONSchemaV1 } from "@standard-schema/spec";
 import type { ViewDefinition } from "@tailorkit/core/schema";
-import type { RegisteredViews } from "../tailor-kit";
+type DefaultViews = Record<`/${string}`, ViewDefinition>;
 export type ViewName<TViews extends Record<string, ViewDefinition>> = keyof TViews & string;
-export type ViewContext<TView> = TView extends ViewDefinition<infer TContext> ? TContext extends StandardJSONSchemaV1 ? StandardJSONSchemaV1.InferOutput<TContext> : Record<string, never> : never;
+export type ViewContext<TView> = TView extends StandardJSONSchemaV1 ? StandardJSONSchemaV1.InferOutput<TView> : Record<string, never>;
 interface ReadyViewOptions<TViews extends Record<string, ViewDefinition>, TView extends ViewName<TViews>> {
     context: ViewContext<TViews[TView]>;
     view: TView;
@@ -18,7 +18,8 @@ interface ErrorViewOptions<TView extends string> {
     view: TView;
     status: "error";
 }
-export type ViewOptions<TViews extends Record<string, ViewDefinition> = RegisteredViews, TView extends ViewName<TViews> = ViewName<TViews>> = TView extends ViewName<TViews> ? ReadyViewOptions<TViews, TView> | LoadingViewOptions<TView> | ErrorViewOptions<TView> : never;
-export type ViewState<TViews extends Record<string, ViewDefinition> = RegisteredViews, TView extends ViewName<TViews> = ViewName<TViews>> = Omit<ReadyViewOptions<TViews, TView>, "view"> | Omit<LoadingViewOptions<TView>, "view"> | Omit<ErrorViewOptions<TView>, "view">;
-export declare function useView<TView extends ViewName<RegisteredViews>>(view: TView, options: ViewState<RegisteredViews, NoInfer<TView>>): void;
+export type ViewOptions<TViews extends Record<string, ViewDefinition> = DefaultViews, TView extends ViewName<TViews> = ViewName<TViews>> = TView extends ViewName<TViews> ? ReadyViewOptions<TViews, TView> | LoadingViewOptions<TView> | ErrorViewOptions<TView> : never;
+export type ViewState<TViews extends Record<string, ViewDefinition> = DefaultViews, TView extends ViewName<TViews> = ViewName<TViews>> = Omit<ReadyViewOptions<TViews, TView>, "view"> | Omit<LoadingViewOptions<TView>, "view"> | Omit<ErrorViewOptions<TView>, "view">;
+export type UseView<TViews extends Record<string, ViewDefinition>> = <TView extends ViewName<TViews>>(view: TView, options: ViewState<TViews, NoInfer<TView>>) => void;
+export declare function useView<TViews extends Record<string, ViewDefinition> = DefaultViews, TView extends ViewName<TViews> = ViewName<TViews>>(view: TView, options: ViewState<TViews, NoInfer<TView>>): void;
 export {};

package/dist/index.d.ts

@@ -1,8 +1,7 @@
 export { AppView } from "./components/app-view";
-export { components, createTailorKitClient } from "./tailor-kit";
-export type { AppViewProps, TailorKitApp, TailorKitInstance, Register } from "./tailor-kit";
+export { components, createTailorKitClient } from "./tailorkit";
+export type { AppViewProps, TailorKitApp, TailorKitClientConfig, TailorKitInstance, } from "./tailorkit";
 export { Root } from "./components/root";
-export { useApps } from "./hooks/use-apps";
-export { useView } from "./hooks/use-view";
-export type { ViewOptions, ViewState } from "./hooks/use-view";
+export type { UseAppsOptions, UseAppsResult } from "./hooks/use-apps";
+export type { UseView, ViewOptions, ViewState } from "./hooks/use-view";
 export { primitives } from "./primitives";

package/dist/index.js

@@ -1,5 +1,6 @@
 // src/components/app-view.tsx
-import { useEffect as useEffect2, useId as useId2, useMemo as useMemo3, useSyncExternalStore as useSyncExternalStore2 } from "react";
+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/view-registry.ts
@@ -63,25 +64,287 @@ function createViewRegistry() {
   };
 }
 
+// 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) {
+  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 };
+        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/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, previewSessionId) {
+function createTailorKitStore(baseUrlInput, initialApps) {
   const baseUrl = toBaseUrl(baseUrlInput);
   const listeners = /* @__PURE__ */ new Set();
   let providedApps = initialApps;
-  let appsSnapshot = {
+  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 fetchAppsPromise = null;
   let fetchMetaPromise = null;
-  let fetchAppsRequestId = 0;
+  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();
@@ -95,58 +358,65 @@ function createTailorKitStore(baseUrlInput, initialApps, previewSessionId) {
         return;
       }
       providedApps = apps;
-      fetchAppsRequestId += 1;
-      fetchAppsPromise = null;
-      appsSnapshot = {
+      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) {
-        void store.fetchApps();
+        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 (fetchAppsPromise && !options.force) {
-        return fetchAppsPromise;
+      if (entry.promise && !options.force) {
+        return entry.promise;
       }
-      appsSnapshot = { ...appsSnapshot, status: "loading" };
+      entry.snapshot = { ...entry.snapshot, status: "loading" };
       emit();
-      const requestId = ++fetchAppsRequestId;
+      const requestId = ++entry.requestId;
       const appsUrl = new URL("apps", baseUrl);
-      if (previewSessionId) {
-        appsUrl.searchParams.set("previewSessionId", previewSessionId);
-      }
-      fetchAppsPromise = fetch(appsUrl).then(async (response) => {
+      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 !== fetchAppsRequestId) {
+        if (requestId !== entry.requestId) {
           return;
         }
-        appsSnapshot = {
+        entry.snapshot = {
           apps,
           error: null,
           status: "ready"
         };
         emit();
       }).catch((error) => {
-        if (requestId !== fetchAppsRequestId) {
+        if (requestId !== entry.requestId) {
           return;
         }
-        appsSnapshot = {
-          ...appsSnapshot,
+        entry.snapshot = {
+          ...entry.snapshot,
           error: error instanceof Error ? error : new Error(String(error)),
           status: "error"
         };
         emit();
       });
-      return fetchAppsPromise;
+      return entry.promise;
     },
     fetchMeta: () => {
       if (fetchMetaPromise) {
@@ -176,16 +446,39 @@ function createTailorKitStore(baseUrlInput, initialApps, previewSessionId) {
       });
       return fetchMetaPromise;
     },
-    getAppsSnapshot: () => appsSnapshot,
+    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);
+        }
+      };
     }
   };
-  return store;
+  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 });
+        }
+      }
+    })
+  };
 }
 function toBaseUrl(value) {
   const url = value instanceof URL ? new URL(value) : new URL(value);
@@ -209,11 +502,16 @@ function useStableContext(value) {
 // src/components/context.ts
 import { createContext, useContext } from "react";
 var TailorRootContext = createContext(null);
-function useTailorRootContext(component) {
+function useTailorRootContext(component, expectedClient) {
   const context = useContext(TailorRootContext);
   if (!context) {
     throw new Error(`${component} must be rendered inside 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;
 }
 
@@ -562,6 +860,8 @@ var RemoteErrorBoundary = class extends Component {
 };
 function RemoteViewHost({
   appUrl,
+  sourceText,
+  getBackendSession,
   components: components2,
   createIframe,
   props
@@ -609,6 +909,8 @@ function RemoteViewHost({
   useEffect(() => {
     const host = createIframeUiHost(appUrl, {
       createIframe,
+      sourceText,
+      getBackendSession,
       onError: (error2) => {
         console.error("TailorKit remote app failed", error2);
         setError(error2);
@@ -634,7 +936,7 @@ function RemoteViewHost({
       hostRef.current = null;
       host.destroy();
     };
-  }, [appUrl, createIframe, store]);
+  }, [appUrl, createIframe, sourceText, getBackendSession, store]);
   if (status === "error" && error) {
     return createElement("div", null, formatError(error));
   }
@@ -709,6 +1011,10 @@ var AppView = ({
   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(
     store.views.subscribe,
     store.views.getSnapshot,
@@ -734,6 +1040,29 @@ var AppView = ({
     return currentView === null ? void 0 : { slot, ...currentView };
   }, [context, currentView, view, status, slot]);
   const meta = useSyncExternalStore2(store.subscribe, store.getMetaSnapshot, store.getMetaSnapshot);
+  const previewSessionId = app.preview?.sessionId ?? "";
+  const appRef = useRef3(app);
+  appRef.current = app;
+  const subscribePreview = useCallback2(
+    (listener) => {
+      const currentApp = appRef.current;
+      return currentApp.preview?.sessionId === previewSessionId ? store.previews.subscribe(currentApp, listener) : () => {
+      };
+    },
+    [store, previewSessionId]
+  );
+  const getPreviewSnapshot = useCallback2(
+    () => 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,
@@ -750,7 +1079,7 @@ var AppView = ({
   useEffect2(() => {
     void store.fetchMeta();
   }, [store]);
-  if (props === void 0 || appUrl === null || meta.schema === null) {
+  if (props === void 0 || appUrl === null && previewSnapshot.source === null || meta.schema === null) {
     return fallback;
   }
   const viewId = `tailorkit-view-${reactId.replaceAll(":", "")}`;
@@ -759,11 +1088,14 @@ var AppView = ({
     /* @__PURE__ */ jsx3(
       RemoteViewHost,
       {
-        appUrl: appUrl.toString(),
+        appUrl: (appUrl ?? new URL(`preview/${previewSessionId}/client.js`, store.baseUrl)).toString(),
+        sourceText: previewSnapshot.source ?? void 0,
+        getBackendSession,
         components: wrappedComponents,
         createIframe,
         props: runtimeProps
-      }
+      },
+      previewSnapshot.revision || appUrl?.toString()
     )
   ] }) });
 };
@@ -775,12 +1107,77 @@ function resolveAppUrl(app, baseUrl, assetsBaseUrl) {
     return null;
   }
   return new URL(
-    `projects/${app.projectId}/apps/${app.id}/deployments/${app.currentDeployment.id}/files/client.js`,
+    `projects/${app.projectId}/apps/${app.id}/deployments/${app.currentDeployment.id}/client/client.js`,
     toBaseUrl(assetsBaseUrl)
   );
 }
 
-// src/tailor-kit.tsx
+// 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"), []);
+  const status = options.status ?? "ready";
+  const context = "context" in options ? options.context : void 0;
+  const contextSnapshot = useStableContext(context);
+  useEffect3(
+    () => () => {
+      store.views.unregister(id);
+    },
+    [id, store]
+  );
+  useEffect3(() => {
+    store.views.register({
+      context: contextSnapshot,
+      id,
+      view,
+      status
+    });
+  }, [contextSnapshot, id, view, status, store]);
+}
+
+// src/hooks/use-apps.ts
+import { useCallback as useCallback3, useEffect as useEffect4, useSyncExternalStore as useSyncExternalStore3 } from "react";
+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)
+  );
+  useEffect4(() => {
+    void store.fetchApps({ scopes: selection.scopes });
+  }, [store, selection.key]);
+  const refetch = useCallback3(
+    () => store.fetchApps({ force: true, scopes: selection.scopes }),
+    [store, selection.key]
+  );
+  return toUseAppsResult(snapshot, refetch);
+}
+function toUseAppsResult(snapshot, refetch) {
+  return {
+    data: snapshot.status === "ready" ? snapshot.apps : void 0,
+    error: snapshot.error,
+    isError: snapshot.status === "error",
+    isLoading: snapshot.status === "loading",
+    isPending: snapshot.status === "idle" || snapshot.status === "loading",
+    isSuccess: snapshot.status === "ready",
+    refetch,
+    status: snapshot.status
+  };
+}
+
+// src/tailorkit.tsx
 var componentTagPrefix = "tailorkit-";
 var toComponentTagName = (name) => `${componentTagPrefix}${name.replaceAll(/([a-z0-9])([A-Z])/gu, "$1-$2").replaceAll(/[\s_]+/gu, "-").toLowerCase()}`;
 function components(_schema, customComponents) {
@@ -807,32 +1204,51 @@ function createReactTailorKitClient(options) {
       wrappedComponents[toComponentTagName(name)] = TailorKitComponent;
     }
   }
-  return {
+  const clientConfig = {
     baseUrl: options.baseUrl,
     components: wrappedComponents,
-    previewSessionId: options.previewSessionId,
     theme
   };
+  const client = {
+    ...clientConfig,
+    AppView: function ClientAppView(props) {
+      useTailorRootContext("AppView", client);
+      const TypedReactAppView = AppView;
+      return createElement2(
+        TypedReactAppView,
+        props
+      );
+    },
+    useApps: function useClientApps(options2) {
+      useTailorRootContext("useApps", client);
+      return useApps(options2);
+    },
+    useView: function useClientView(view, options2) {
+      useTailorRootContext("useView", client);
+      useView(view, options2);
+    }
+  };
+  return client;
 }
 
 // src/components/root.tsx
-import { useEffect as useEffect3, useMemo as useMemo5, useState as useState2 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo6, useState as useState2 } from "react";
 
 // src/components/render.tsx
-import { cloneElement, createElement as createElement2, isValidElement, useMemo as useMemo4 } from "react";
+import { cloneElement, createElement as createElement3, isValidElement, useMemo as useMemo5 } from "react";
 function useRender({
   defaultTagName,
   props,
   render
 }) {
-  return useMemo4(() => {
+  return useMemo5(() => {
     if (render) {
       if (!isValidElement(render)) {
         throw new Error("The render prop must be a valid React element.");
       }
       return cloneElement(render, mergeProps(render.props, props));
     }
-    return createElement2(defaultTagName, props);
+    return createElement3(defaultTagName, props);
   }, [defaultTagName, props, render]);
 }
 function mergeProps(...propSets) {
@@ -895,18 +1311,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, client.previewSessionId)
-  );
+  const [previousStore, setStore] = useState2(() => createTailorKitStore(baseUrl, appsProp));
   let store = previousStore;
   if (previousStore.baseUrl.toString() !== baseUrl) {
-    store = createTailorKitStore(baseUrl, appsProp, client.previewSessionId);
+    store = createTailorKitStore(baseUrl, appsProp);
     setStore(store);
   }
-  useEffect3(() => {
+  useEffect5(() => {
     store.setProvidedApps(appsProp);
   }, [store, appsProp]);
-  const context = useMemo5(
+  useEffect5(() => () => store.previews.dispose(), [store]);
+  const context = useMemo6(
     () => ({
       store,
       client
@@ -920,66 +1335,10 @@ function Root({ apps: appsProp, children, render, client, ...props }) {
   }) : children;
   return /* @__PURE__ */ jsx4(TailorRootContext.Provider, { value: context, children: element });
 }
-
-// src/hooks/use-apps.ts
-import { useCallback as useCallback2, useEffect as useEffect4, useSyncExternalStore as useSyncExternalStore3 } from "react";
-function useApps() {
-  return useAppsStore(useTailorRootContext("useApps").store);
-}
-function useAppsStore(store) {
-  const snapshot = useSyncExternalStore3(
-    store.subscribe,
-    store.getAppsSnapshot,
-    store.getAppsSnapshot
-  );
-  useEffect4(() => {
-    void store.fetchApps();
-  }, [store]);
-  const refetch = useCallback2(() => store.fetchApps({ force: true }), [store]);
-  return toUseAppsResult(snapshot, refetch);
-}
-function toUseAppsResult(snapshot, refetch) {
-  return {
-    data: snapshot.status === "ready" ? snapshot.apps : void 0,
-    error: snapshot.error,
-    isError: snapshot.status === "error",
-    isLoading: snapshot.status === "loading",
-    isPending: snapshot.status === "idle" || snapshot.status === "loading",
-    isSuccess: snapshot.status === "ready",
-    refetch,
-    status: snapshot.status
-  };
-}
-
-// src/hooks/use-view.ts
-import { useEffect as useEffect5, useMemo as useMemo6 } from "react";
-function useView(view, options) {
-  const { store } = useTailorRootContext("useView");
-  const id = useMemo6(() => /* @__PURE__ */ Symbol("tailorkit-current-view"), []);
-  const status = options.status ?? "ready";
-  const context = "context" in options ? options.context : void 0;
-  const contextSnapshot = useStableContext(context);
-  useEffect5(
-    () => () => {
-      store.views.unregister(id);
-    },
-    [id, store]
-  );
-  useEffect5(() => {
-    store.views.register({
-      context: contextSnapshot,
-      id,
-      view,
-      status
-    });
-  }, [contextSnapshot, id, view, status, store]);
-}
 export {
   AppView,
   Root,
   components,
   createTailorKitClient,
-  primitives,
-  useApps,
-  useView
+  primitives
 };

package/dist/preview-manager.d.ts

@@ -0,0 +1,11 @@
+import type { TailorKitApp } from "./tailorkit";
+export interface PreviewSnapshot {
+    revision: number;
+    source: string | null;
+}
+export declare function createPreviewManager(baseUrl: URL, onEnded: () => void): {
+    getSnapshot: (sessionId: string) => PreviewSnapshot;
+    updateApp: (app: TailorKitApp) => void;
+    subscribe: (app: TailorKitApp, listener: () => void) => (() => void);
+    dispose: () => void;
+};

package/dist/remote-view.d.ts

@@ -1,11 +1,16 @@
+import type { Session } from "@tailorkit/app/client";
 import type { ReactNode } from "react";
 interface RemoteViewHostProps {
     appUrl: string | URL;
+    sourceText?: string;
+    getBackendSession?: (options: {
+        refresh: boolean;
+    }) => Promise<Session>;
     components: Record<string, unknown>;
     createIframe?: () => HTMLIFrameElement;
     props?: Record<string, unknown>;
 }
-export declare function RemoteViewHost({ appUrl, components, createIframe, props, }: RemoteViewHostProps): ReactNode;
+export declare function RemoteViewHost({ appUrl, sourceText, getBackendSession, components, createIframe, props, }: RemoteViewHostProps): ReactNode;
 interface RemoteViewProps {
     nodeId: string;
 }

package/dist/scope-query.d.ts

@@ -0,0 +1,5 @@
+export declare function appendScopeSelection(url: URL, scopes?: readonly string[]): void;
+export declare function normalizeScopeSelection(scopes?: readonly string[]): {
+    key: string;
+    scopes?: readonly string[];
+};

package/dist/store.d.ts

@@ -1,5 +1,5 @@
 import type { TailorKitSchemaSpecType } from "@tailorkit/core/spec";
-import type { TailorKitApp } from "./tailor-kit";
+import type { TailorKitApp } from "./tailorkit";
 export interface TailorKitAppsSnapshot {
     apps: TailorKitApp[];
     error: Error | null;
@@ -12,7 +12,7 @@ interface TailorKitMetaSnapshot {
     status: "error" | "idle" | "loading" | "ready";
 }
 export type TailorKitStore = ReturnType<typeof createTailorKitStore>;
-export declare function createTailorKitStore(baseUrlInput: string | URL, initialApps?: TailorKitApp[], previewSessionId?: string): {
+export declare function createTailorKitStore(baseUrlInput: string | URL, initialApps?: TailorKitApp[]): {
     baseUrl: URL;
     views: {
         getSnapshot: () => import("@tailorkit/core/views").ActiveView | null;
@@ -23,11 +23,19 @@ export declare function createTailorKitStore(baseUrlInput: string | URL, initial
     setProvidedApps(apps: TailorKitApp[] | undefined): void;
     fetchApps: (options?: {
         force?: boolean;
+        scopes?: readonly string[];
     }) => Promise<void>;
     fetchMeta: () => Promise<void>;
-    getAppsSnapshot: () => TailorKitAppsSnapshot;
+    getAppsSnapshot: (scopes?: readonly string[]) => TailorKitAppsSnapshot;
     getMetaSnapshot: () => TailorKitMetaSnapshot;
     subscribe: (listener: () => void) => (() => void);
+    subscribeApps: (scopes: readonly string[] | undefined, listener: () => void) => (() => void);
+    previews: {
+        getSnapshot: (sessionId: string) => import("./preview-manager").PreviewSnapshot;
+        updateApp: (app: TailorKitApp) => void;
+        subscribe: (app: TailorKitApp, listener: () => void) => (() => void);
+        dispose: () => void;
+    };
 };
 export declare function toBaseUrl(value: string | URL): URL;
 export {};

package/dist/{tailor-kit.d.ts → tailorkit.d.ts}

@@ -1,7 +1,8 @@
 import type { ReactNode } from "react";
 import type { TailorKitTheme, CallbackMap, ComponentDefinition, ComponentProps, Schema, ViewDefinition, SlotDefinitions, TailorKitSchema } from "@tailorkit/core/schema";
 import type { primitives } from "./primitives";
-import type { ViewOptions, ViewName } from "./hooks/use-view";
+import type { UseView, ViewName, ViewOptions } from "./hooks/use-view";
+import type { UseAppsOptions, UseAppsResult } from "./hooks/use-apps";
 type AnyComponentDefinition = ComponentDefinition<Schema | undefined, CallbackMap, boolean | undefined>;
 type ComponentRenderer<TComponent extends AnyComponentDefinition> = (args: {
     props: ComponentProps<TComponent>;
@@ -30,7 +31,9 @@ export interface TailorKitApp {
     name?: string;
     preview?: {
         sessionId: string;
-        status: "connected" | "offline";
+        expiresAt: string;
+        websocketUrl: string;
+        token: string;
     };
 }
 interface AppViewBaseProps {
@@ -47,37 +50,26 @@ type AppViewViewProps<TViews extends Record<string, ViewDefinition>, TView exten
     view?: never;
     status?: never;
 } | ViewOptions<TViews, TView>;
-export type AppViewProps<TViews extends Record<string, ViewDefinition> = RegisteredViews, TView extends ViewName<TViews> = ViewName<TViews>> = {
-    [V in RegisteredSlots]: AppViewBaseProps & {
+export type AppViewProps<TViews extends Record<string, ViewDefinition> = Record<`/${string}`, ViewDefinition>, TView extends ViewName<TViews> = ViewName<TViews>, TSlots extends SlotDefinitions = SlotDefinitions> = {
+    [V in keyof TSlots & string]: AppViewBaseProps & {
         slot: V;
-    } & AppViewViewProps<TViews, Extract<TView, SlotView<V>>>;
-}[RegisteredSlots];
-export interface Register {
-}
-export type RegisteredViews = Register extends {
-    client: TailorKitInstance<infer S>;
-} ? S : Record<`/${string}`, ViewDefinition>;
-type RegisteredSlotMap = Register extends {
-    client: {
-        readonly $slots?: infer V;
-    };
-} ? V : SlotDefinitions;
-export type RegisteredSlots = keyof RegisteredSlotMap & string;
-type SlotView<V extends RegisteredSlots> = RegisteredSlotMap[V] extends {
+    } & AppViewViewProps<TViews, Extract<TView, SlotView<TSlots, V>>>;
+}[keyof TSlots & string];
+type SlotView<TSlots extends SlotDefinitions, V extends keyof TSlots & string> = TSlots[V] extends {
     views: readonly (infer P)[];
 } ? Extract<P, string> : never;
-export interface TailorKitInstance<TViews extends Record<string, ViewDefinition> = Record<string, ViewDefinition>, TSlots extends SlotDefinitions = SlotDefinitions> {
-    readonly $slots?: TSlots;
-    readonly $views?: TViews;
+export interface TailorKitClientConfig {
     readonly baseUrl: string | URL;
-    /**
-     * A host-selected, scope-authorized local-development preview session.
-     * The host handler resolves this server-side before returning app URLs.
-     */
-    readonly previewSessionId?: string;
     readonly components: Record<string, unknown>;
     readonly theme: TailorKitTheme;
 }
+export interface TailorKitInstance<TViews extends Record<string, ViewDefinition> = Record<string, ViewDefinition>, TSlots extends SlotDefinitions = SlotDefinitions, TScopeNames extends string = string> extends TailorKitClientConfig {
+    readonly $slots?: TSlots;
+    readonly $views?: TViews;
+    readonly AppView: (props: AppViewProps<TViews, ViewName<TViews>, TSlots>) => ReactNode;
+    readonly useApps: (options?: UseAppsOptions<TScopeNames>) => UseAppsResult;
+    readonly useView: UseView<TViews>;
+}
 type PrimitiveRenderers = typeof primitives;
 type CustomComponentRenderers<TComponents extends Record<string, AnyComponentDefinition>> = {
     [TName in Exclude<keyof TComponents, keyof PrimitiveRenderers>]?: ComponentRenderer<TComponents[TName]>;
@@ -87,7 +79,7 @@ interface TailorKitServerShape {
     $internal: {
         schema: {
             components: Record<string, unknown>;
-            views: Record<string, unknown>;
+            contexts: Record<string, unknown>;
         };
     };
 }
@@ -95,16 +87,24 @@ type ServerComponentMap<TTailor extends TailorKitServerShape> = TTailor["$intern
 type ServerComponents<TTailor extends TailorKitServerShape> = {
     [TName in keyof ServerComponentMap<TTailor>]: ServerComponentMap<TTailor>[TName] extends AnyComponentDefinition ? ServerComponentMap<TTailor>[TName] : never;
 };
-type ServerViewMap<TTailor extends TailorKitServerShape> = TTailor["$internal"]["schema"]["views"];
+type ServerViewMap<TTailor extends TailorKitServerShape> = TTailor["$internal"]["schema"]["contexts"];
+type ServerScopeNames<TTailor extends TailorKitServerShape> = TTailor extends {
+    handler: (request: Request, options: infer TOptions) => unknown;
+} ? TOptions extends {
+    authenticate: infer TAuthenticate;
+} ? TAuthenticate extends (...args: infer _TArgs) => infer TResult ? Extract<Awaited<TResult>, {
+    scopes: unknown;
+}> extends {
+    scopes: infer TScopes;
+} ? keyof TScopes & string : never : never : never : never;
 type ServerViews<TTailor extends TailorKitServerShape> = {
     [TName in keyof ServerViewMap<TTailor>]: ServerViewMap<TTailor>[TName] extends ViewDefinition ? ServerViewMap<TTailor>[TName] : never;
 };
 export declare function createTailorKitClient<TTailor extends TailorKitServerShape>(options: {
     baseUrl: string | URL;
-    previewSessionId?: string;
     components?: CompleteComponentRenderers<ServerComponents<TTailor>>;
     theme?: TailorKitTheme;
 }): TailorKitInstance<ServerViews<TTailor>, TTailor extends {
     readonly $slots?: infer V extends SlotDefinitions;
-} ? V : SlotDefinitions>;
+} ? V : SlotDefinitions, ServerScopeNames<TTailor>>;
 export type { ViewOptions } from "./hooks/use-view";

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@tailorkit/react",
-  "version": "0.1.0-beta.13",
+  "version": "0.1.0-beta.16",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/AlfieJones/tailorkit.git",
+    "url": "git+https://github.com/tailorkit-labs/TailorKit.git",
     "directory": "packages/react"
   },
   "files": [
@@ -23,20 +23,21 @@
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.9",
     "@standard-schema/spec": "^1.1.0",
-    "@tailorkit/core": "0.1.0-beta.13",
-    "@tailorkit/sandbox": "0.1.0-beta.13"
+    "@tailorkit/app": "0.1.0-beta.16",
+    "@tailorkit/client-platform": "0.1.0-beta.16",
+    "@tailorkit/core": "0.1.0-beta.16",
+    "@tailorkit/sandbox": "0.1.0-beta.16"
   },
   "devDependencies": {
     "@tailorkit/config": "0.0.0",
     "@testing-library/react": "^16.3.3",
-    "@types/node": "26.2.0",
+    "@types/node": "26.6.3",
     "@types/react": "^19.3.0",
     "happy-dom": "^20.14.5",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "tsup": "^8.5.1",
-    "typescript": "^7.0.2",
-    "vitest": "^5.0.0"
+    "typescript": "^7.0.2"
   },
   "peerDependencies": {
     "react": ">=19.2.6"
@@ -44,6 +45,6 @@
   "scripts": {
     "build": "tsup src/index.ts --format esm --target node20 --clean && tsc -p tsconfig.build.json",
     "check-types": "tsc --noEmit",
-    "test": "vitest run"
+    "test": "vp test run"
   }
 }