@tailorkit/react 0.1.0-beta.14 → 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,6 +1,6 @@
 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 StandardJSONSchemaV1 ? StandardJSONSchemaV1.InferOutput<TView> : Record<string, never>;
 interface ReadyViewOptions<TViews extends Record<string, ViewDefinition>, TView extends ViewName<TViews>> {
@@ -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,4 +1,5 @@
 // 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";
 
@@ -289,25 +290,61 @@ function createPreviewManager(baseUrl, onEnded) {
   };
 }
 
+// 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 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();
@@ -321,55 +358,65 @@ function createTailorKitStore(baseUrlInput, initialApps) {
         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);
-      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) {
@@ -399,19 +446,37 @@ function createTailorKitStore(baseUrlInput, initialApps) {
       });
       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,
     previews: createPreviewManager(baseUrl, () => {
-      void store.fetchApps({ force: true });
+      for (const entry of appsEntries.values()) {
+        if (entry.requested && entry.subscribers > 0) {
+          void store.fetchApps({ force: true, scopes: entry.scopes });
+        }
+      }
     })
   };
 }
@@ -437,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;
 }
 
@@ -791,6 +861,7 @@ var RemoteErrorBoundary = class extends Component {
 function RemoteViewHost({
   appUrl,
   sourceText,
+  getBackendSession,
   components: components2,
   createIframe,
   props
@@ -839,6 +910,7 @@ function RemoteViewHost({
     const host = createIframeUiHost(appUrl, {
       createIframe,
       sourceText,
+      getBackendSession,
       onError: (error2) => {
         console.error("TailorKit remote app failed", error2);
         setError(error2);
@@ -864,7 +936,7 @@ function RemoteViewHost({
       hostRef.current = null;
       host.destroy();
     };
-  }, [appUrl, createIframe, sourceText, store]);
+  }, [appUrl, createIframe, sourceText, getBackendSession, store]);
   if (status === "error" && error) {
     return createElement("div", null, formatError(error));
   }
@@ -939,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,
@@ -1014,6 +1090,7 @@ var AppView = ({
       {
         appUrl: (appUrl ?? new URL(`preview/${previewSessionId}/client.js`, store.baseUrl)).toString(),
         sourceText: previewSnapshot.source ?? void 0,
+        getBackendSession,
         components: wrappedComponents,
         createIframe,
         props: runtimeProps
@@ -1030,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) {
@@ -1062,31 +1204,51 @@ function createReactTailorKitClient(options) {
       wrappedComponents[toComponentTagName(name)] = TailorKitComponent;
     }
   }
-  return {
+  const clientConfig = {
     baseUrl: options.baseUrl,
     components: wrappedComponents,
     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) {
@@ -1155,11 +1317,11 @@ function Root({ apps: appsProp, children, render, client, ...props }) {
     store = createTailorKitStore(baseUrl, appsProp);
     setStore(store);
   }
-  useEffect3(() => {
+  useEffect5(() => {
     store.setProvidedApps(appsProp);
   }, [store, appsProp]);
-  useEffect3(() => () => store.previews.dispose(), [store]);
-  const context = useMemo5(
+  useEffect5(() => () => store.previews.dispose(), [store]);
+  const context = useMemo6(
     () => ({
       store,
       client
@@ -1173,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 useCallback3, 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 = useCallback3(() => 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

@@ -1,4 +1,4 @@
-import type { TailorKitApp } from "./tailor-kit";
+import type { TailorKitApp } from "./tailorkit";
 export interface PreviewSnapshot {
     revision: number;
     source: string | null;

package/dist/remote-view.d.ts

@@ -1,12 +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, sourceText, 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;
@@ -23,11 +23,13 @@ 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;

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>;
@@ -49,32 +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;
     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]>;
@@ -93,6 +88,15 @@ 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"]["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;
 };
@@ -102,5 +106,5 @@ export declare function createTailorKitClient<TTailor extends TailorKitServerSha
     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.14",
+  "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,21 +23,21 @@
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.9",
     "@standard-schema/spec": "^1.1.0",
-    "@tailorkit/client-platform": "0.1.0-beta.14",
-    "@tailorkit/core": "0.1.0-beta.14",
-    "@tailorkit/sandbox": "0.1.0-beta.14"
+    "@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"
@@ -45,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"
   }
 }