@tailorkit/react 0.1.0-beta.8 → 0.1.0-beta.9

package/dist/index.js

@@ -1,80 +1,205 @@
-// src/tailor-kit.tsx
-import { useEffect as useEffect4, useId as useId2, useMemo as useMemo6, useSyncExternalStore as useSyncExternalStore3 } from "react";
-
-// src/components/root.tsx
-import { useMemo as useMemo2 } from "react";
+// src/components/app-view.tsx
+import { useEffect as useEffect2, useId as useId2, useMemo as useMemo3, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { isViewAncestor as isViewAncestor2 } from "@tailorkit/core/views";
 
-// src/components/render.tsx
-import { cloneElement, createElement, isValidElement, useMemo } from "react";
-function useRender({
-  defaultTagName,
-  props,
-  render
-}) {
-  return useMemo(() => {
-    if (render) {
-      if (!isValidElement(render)) {
-        throw new Error("The render prop must be a valid React element.");
+// src/view-registry.ts
+import { getViewDepth, isViewAncestor } from "@tailorkit/core/views";
+function createViewRegistry() {
+  const entries = /* @__PURE__ */ new Map();
+  const listeners = /* @__PURE__ */ new Set();
+  let snapshot = null;
+  let nextOrder = 0;
+  let scheduled = false;
+  const publish = () => {
+    if (scheduled) {
+      return;
+    }
+    scheduled = true;
+    queueMicrotask(() => {
+      scheduled = false;
+      const ordered = [...entries.values()].toSorted(
+        (a, b) => getViewDepth(b.view) - getViewDepth(a.view) || b.order - a.order
+      );
+      const selected = ordered[0];
+      if (selected) {
+        const peers = ordered.filter(
+          (entry) => getViewDepth(entry.view) === getViewDepth(selected.view)
+        );
+        if (peers.length > 1) {
+          console.warn(
+            `TailorKit found multiple active views at the same hierarchy depth: ${peers.toReversed().map((entry) => `"${entry.view}"`).join(
+              ", "
+            )}. TailorKit selected "${selected.view}" by mount order. Only one route at a hierarchy depth should call useView.`
+          );
+        }
+        snapshot = {
+          view: selected.view,
+          layers: ordered.filter((entry) => isViewAncestor(entry.view, selected.view)).toReversed().map((entry) => ({ path: entry.view, context: entry.context, status: entry.status }))
+        };
+      } else {
+        snapshot = null;
       }
-      return cloneElement(render, mergeProps(render.props, props));
+      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();
     }
-    return createElement(defaultTagName, props);
-  }, [defaultTagName, props, render]);
+  };
 }
-function mergeProps(...propSets) {
-  const merged = {};
-  for (const props of propSets) {
-    if (!props) {
-      continue;
+
+// src/store.ts
+function createTailorKitStore(baseUrlInput, initialApps) {
+  const baseUrl = toBaseUrl(baseUrlInput);
+  const listeners = /* @__PURE__ */ new Set();
+  let providedApps = initialApps;
+  let appsSnapshot = {
+    apps: initialApps ?? [],
+    error: null,
+    status: initialApps === void 0 ? "idle" : "ready"
+  };
+  let metaSnapshot = {
+    assetsBaseUrl: null,
+    error: null,
+    schema: null,
+    status: "idle"
+  };
+  let fetchAppsPromise = null;
+  let fetchMetaPromise = null;
+  let fetchAppsRequestId = 0;
+  const emit = () => {
+    for (const listener of listeners) {
+      listener();
     }
-    for (const [key, value] of Object.entries(props)) {
-      if (value === void 0) {
-        continue;
+  };
+  const store = {
+    baseUrl,
+    views: createViewRegistry(),
+    setProvidedApps(apps) {
+      if (providedApps === apps) {
+        return;
       }
-      const existing = merged[key];
-      if (key === "className" && existing && value) {
-        merged[key] = `${existing} ${value}`;
-        continue;
+      providedApps = apps;
+      fetchAppsRequestId += 1;
+      fetchAppsPromise = null;
+      appsSnapshot = {
+        apps: apps ?? [],
+        error: null,
+        status: apps === void 0 ? "idle" : "ready"
+      };
+      emit();
+      if (apps === void 0) {
+        void store.fetchApps();
       }
-      if (key === "style" && existing && value) {
-        merged[key] = {
-          ...existing,
-          ...value
-        };
-        continue;
+    },
+    fetchApps: (options = {}) => {
+      if (providedApps !== void 0) {
+        return Promise.resolve();
       }
-      if (key === "ref" && existing && value) {
-        merged[key] = composeRefs(existing, value);
-        continue;
+      if (fetchAppsPromise && !options.force) {
+        return fetchAppsPromise;
       }
-      if (isEventHandler(key) && typeof existing === "function" && typeof value === "function") {
-        merged[key] = (...args) => {
-          existing(...args);
-          const event = args[0];
-          if (!event?.defaultPrevented) {
-            value(...args);
-          }
+      appsSnapshot = { ...appsSnapshot, status: "loading" };
+      emit();
+      const requestId = ++fetchAppsRequestId;
+      fetchAppsPromise = fetch(new URL("apps", baseUrl)).then(async (response) => {
+        if (!response.ok) {
+          throw new Error(`Unable to fetch TailorKit apps from ${baseUrl.toString()}.`);
+        }
+        const apps = await response.json();
+        if (requestId !== fetchAppsRequestId) {
+          return;
+        }
+        appsSnapshot = {
+          apps,
+          error: null,
+          status: "ready"
         };
-        continue;
-      }
-      merged[key] = value;
-    }
-  }
-  return merged;
-}
-function composeRefs(...refs) {
-  return (node) => {
-    for (const ref of refs) {
-      if (typeof ref === "function") {
-        ref(node);
-      } else if (ref) {
-        ref.current = node;
+        emit();
+      }).catch((error) => {
+        if (requestId !== fetchAppsRequestId) {
+          return;
+        }
+        appsSnapshot = {
+          ...appsSnapshot,
+          error: error instanceof Error ? error : new Error(String(error)),
+          status: "error"
+        };
+        emit();
+      });
+      return fetchAppsPromise;
+    },
+    fetchMeta: () => {
+      if (fetchMetaPromise) {
+        return fetchMetaPromise;
       }
+      metaSnapshot = { ...metaSnapshot, status: "loading" };
+      emit();
+      fetchMetaPromise = fetch(new URL("meta", baseUrl)).then(async (response) => {
+        if (!response.ok) {
+          throw new Error(`Unable to fetch TailorKit metadata from ${baseUrl.toString()}.`);
+        }
+        const meta = await response.json();
+        metaSnapshot = {
+          assetsBaseUrl: meta.assetsBaseUrl ?? null,
+          error: null,
+          schema: meta.schema,
+          status: "ready"
+        };
+        emit();
+      }).catch((error) => {
+        metaSnapshot = {
+          ...metaSnapshot,
+          error: error instanceof Error ? error : new Error(String(error)),
+          status: "error"
+        };
+        emit();
+      });
+      return fetchMetaPromise;
+    },
+    getAppsSnapshot: () => appsSnapshot,
+    getMetaSnapshot: () => metaSnapshot,
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
     }
   };
+  return store;
 }
-function isEventHandler(key) {
-  return /^on[A-Z]/u.test(key);
+function toBaseUrl(value) {
+  const url = value instanceof URL ? new URL(value) : new URL(value);
+  if (!url.pathname.endsWith("/")) {
+    url.pathname = `${url.pathname}/`;
+  }
+  return url;
+}
+
+// src/hooks/use-stable-context.ts
+import { useRef } from "react";
+function useStableContext(value) {
+  const key = JSON.stringify(value);
+  const ref = useRef({ key, value });
+  if (ref.current.key !== key) {
+    ref.current = { key, value };
+  }
+  return ref.current.value;
 }
 
 // src/components/context.ts
@@ -83,95 +208,15 @@ var TailorRootContext = createContext(null);
 function useTailorRootContext(component) {
   const context = useContext(TailorRootContext);
   if (!context) {
-    throw new Error(`${component} must be rendered inside tailor.Root.`);
+    throw new Error(`${component} must be rendered inside Root.`);
   }
   return context;
 }
 
-// src/components/root.tsx
-import { jsx } from "react/jsx-runtime";
-var EMPTY_APPS = [];
-function Root({ apps: appsProp, children, render, tailor, ...props }) {
-  const appsResult = tailor.useApps();
-  const apps = appsProp ?? appsResult.data ?? EMPTY_APPS;
-  const context = useMemo2(
-    () => ({
-      apps
-    }),
-    [apps]
-  );
-  const element = render ? useRender({
-    defaultTagName: "div",
-    props: mergeProps({ children }, props),
-    render
-  }) : children;
-  return /* @__PURE__ */ jsx(TailorRootContext.Provider, { value: context, children: element });
-}
-
-// src/hooks/use-apps.ts
-import { useCallback, useEffect, useSyncExternalStore } from "react";
-function createUseApps(store) {
-  return function useApps() {
-    const snapshot = useSyncExternalStore(
-      store.subscribe,
-      store.getAppsSnapshot,
-      store.getAppsSnapshot
-    );
-    useEffect(() => {
-      void store.fetchApps();
-    }, []);
-    const refetch = useCallback(() => store.fetchApps({ force: true }), []);
-    return toUseAppsResult(snapshot, refetch);
-  };
-}
-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-current-screen.ts
-import { useEffect as useEffect2, useMemo as useMemo3, useRef } from "react";
-function createUseCurrentScreen(store) {
-  return function useCurrentScreen(options) {
-    useTailorRootContext("tailor.useCurrentScreen");
-    const id = useMemo3(() => /* @__PURE__ */ Symbol("tailorkit-current-screen"), []);
-    const status = options.status ?? "ready";
-    const context = "context" in options ? options.context : void 0;
-    const contextKey = JSON.stringify(context);
-    const contextRef = useRef({ key: contextKey, value: context });
-    if (contextRef.current.key !== contextKey) {
-      contextRef.current = { key: contextKey, value: context };
-    }
-    const contextSnapshot = contextRef.current.value;
-    useEffect2(
-      () => () => {
-        store.unregisterScreen(id);
-      },
-      [id]
-    );
-    useEffect2(() => {
-      store.registerScreen({
-        context: contextSnapshot,
-        id,
-        screen: options.screen,
-        status
-      });
-    }, [contextSnapshot, id, options.screen, status]);
-  };
-}
-
 // src/primitives.tsx
-import { createContext as createContext2, useContext as useContext2, useId, useMemo as useMemo4 } from "react";
+import { createContext as createContext2, useContext as useContext2, useId, useMemo } from "react";
 import { resolveTheme } from "@tailorkit/core/primitives/theme";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var PrimitiveThemeContext = createContext2(null);
 var tokenGroups = [
   "space",
@@ -292,10 +337,10 @@ var buildPrimitiveCss = ({
   display,
   nodeId,
   props,
-  screenId,
+  viewId,
   theme
 }) => {
-  const selector = `[data-tailorkit-screen="${cssEscape(screenId)}"] [data-tailorkit-node="${cssEscape(
+  const selector = `[data-tailorkit-view="${cssEscape(viewId)}"] [data-tailorkit-node="${cssEscape(
     nodeId
   )}"]`;
   const base = [`display: ${display};`];
@@ -323,8 +368,8 @@ var buildPrimitiveCss = ({
   }
   return rules.join("\n");
 };
-var buildThemeCss = (screenId, theme) => {
-  const selector = `[data-tailorkit-screen="${cssEscape(screenId)}"]`;
+var buildThemeCss = (viewId, theme) => {
+  const selector = `[data-tailorkit-view="${cssEscape(viewId)}"]`;
   const declarations = [];
   const resolvedTheme = resolveTheme(theme);
   for (const group of tokenGroups) {
@@ -336,7 +381,7 @@ var buildThemeCss = (screenId, theme) => {
 };
 var usePrimitiveNodeId = () => {
   const id = useId();
-  return useMemo4(() => `tailorkit-${id.replaceAll(":", "")}`, [id]);
+  return useMemo(() => `tailorkit-${id.replaceAll(":", "")}`, [id]);
 };
 var Primitive = ({
   children,
@@ -351,34 +396,34 @@ var Primitive = ({
     display,
     nodeId,
     props,
-    screenId: context.screenId,
+    viewId: context.viewId,
     theme: context.theme
   }) : "";
   return /* @__PURE__ */ jsxs(Element, { "data-tailorkit-node": nodeId, children: [
-    css === "" ? null : /* @__PURE__ */ jsx2("style", { "data-tailorkit-node-style": nodeId, children: css }),
+    css === "" ? null : /* @__PURE__ */ jsx("style", { "data-tailorkit-node-style": nodeId, children: css }),
     children
   ] });
 };
 var primitives = {
-  Box: ({ props, children }) => /* @__PURE__ */ jsx2(Primitive, { display: "block", element: "div", props, children }),
-  Flex: ({ props, children }) => /* @__PURE__ */ jsx2(Primitive, { display: "flex", element: "div", props, children }),
-  Grid: ({ props, children }) => /* @__PURE__ */ jsx2(Primitive, { display: "grid", element: "div", props, children }),
-  Inline: ({ props, children }) => /* @__PURE__ */ jsx2(Primitive, { display: "inline", element: "span", props, children })
+  Box: ({ props, children }) => /* @__PURE__ */ jsx(Primitive, { display: "block", element: "div", props, children }),
+  Flex: ({ props, children }) => /* @__PURE__ */ jsx(Primitive, { display: "flex", element: "div", props, children }),
+  Grid: ({ props, children }) => /* @__PURE__ */ jsx(Primitive, { display: "grid", element: "div", props, children }),
+  Inline: ({ props, children }) => /* @__PURE__ */ jsx(Primitive, { display: "inline", element: "span", props, children })
 };
 
 // src/remote-view.tsx
 import {
   Component,
   Fragment,
-  createElement as createElement2,
+  createElement,
   memo,
-  useCallback as useCallback2,
+  useCallback,
   useContext as useContext3,
-  useEffect as useEffect3,
-  useMemo as useMemo5,
+  useEffect,
+  useMemo as useMemo2,
   useRef as useRef2,
   useState,
-  useSyncExternalStore as useSyncExternalStore2
+  useSyncExternalStore
 } from "react";
 import { createIframeUiHost } from "@tailorkit/sandbox/host";
 
@@ -494,7 +539,7 @@ import { createContext as createContext3 } from "react";
 var RemoteUIContext = createContext3(null);
 
 // src/remote-view.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var formatError = (error) => error.message;
 var RemoteErrorBoundary = class extends Component {
   state = { error: null };
@@ -506,7 +551,7 @@ var RemoteErrorBoundary = class extends Component {
   }
   render() {
     if (this.state.error) {
-      return createElement2("div", null, formatError(this.state.error));
+      return createElement("div", null, formatError(this.state.error));
     }
     return this.props.children;
   }
@@ -528,6 +573,12 @@ function RemoteViewHost({
     appKeyRef.current = appKey;
     store.clear();
   }
+  const hostRef = useRef2(null);
+  const propsRef = useRef2(props);
+  useEffect(() => {
+    propsRef.current = props;
+    hostRef.current?.setProps(props);
+  }, [props]);
   const dispatchRef = useRef2(null);
   const [error, setError] = useState(null);
   const [status, setStatus] = useState("starting");
@@ -536,22 +587,22 @@ function RemoteViewHost({
     dispatch: (payload) => dispatchRef.current?.(payload),
     store
   });
-  useEffect3(() => {
+  useEffect(() => {
     ctxRef.current.components = components2;
   }, [components2]);
-  const ui = useMemo5(() => {
+  const ui = useMemo2(() => {
     const ctx = ctxRef.current;
-    return createElement2(
+    return createElement(
       RemoteUIContext.Provider,
       { value: ctx },
-      createElement2(
+      createElement(
         RemoteErrorBoundary,
         { key: appKey },
-        createElement2(RemoteRoot, { store: ctx.store })
+        createElement(RemoteRoot, { store: ctx.store })
       )
     );
   }, [appKey]);
-  useEffect3(() => {
+  useEffect(() => {
     const host = createIframeUiHost(appUrl, {
       createIframe,
       onError: (error2) => {
@@ -559,8 +610,9 @@ function RemoteViewHost({
         setError(error2);
         setStatus("error");
       },
-      props
+      props: propsRef.current
     });
+    hostRef.current = host;
     dispatchRef.current = (payload) => host.dispatch(payload);
     const unsubscribe = host.subscribe(() => {
       const tree = host.getSnapshot();
@@ -575,26 +627,27 @@ function RemoteViewHost({
     return () => {
       unsubscribe();
       dispatchRef.current = null;
+      hostRef.current = null;
       host.destroy();
     };
-  }, [appUrl, createIframe, props, store]);
+  }, [appUrl, createIframe, store]);
   if (status === "error" && error) {
-    return createElement2("div", null, formatError(error));
+    return createElement("div", null, formatError(error));
   }
   return ui;
 }
 function RemoteRoot({ store }) {
-  const subscribe = useCallback2((listener) => store.subscribeRoot(listener), [store]);
-  const getSnapshot = useCallback2(() => store.getRootId(), [store]);
-  const rootId = useSyncExternalStore2(subscribe, getSnapshot, getSnapshot);
+  const subscribe = useCallback((listener) => store.subscribeRoot(listener), [store]);
+  const getSnapshot = useCallback(() => store.getRootId(), [store]);
+  const rootId = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
   if (rootId === null) {
     return null;
   }
-  return /* @__PURE__ */ jsx3(RemoteView, { nodeId: rootId });
+  return /* @__PURE__ */ jsx2(RemoteView, { nodeId: rootId });
 }
 var RemoteElementView = memo(({ ctx, node }) => {
   const { dispatch, components: components2 } = ctx;
-  const children = node.children.map((child) => /* @__PURE__ */ jsx3(RemoteView, { nodeId: child.id }, child.id));
+  const children = node.children.map((child) => /* @__PURE__ */ jsx2(RemoteView, { nodeId: child.id }, child.id));
   const component = components2[node.type];
   if (component === void 0) {
     throw new Error(`TailorKit component "${node.type}" is not registered.`);
@@ -612,7 +665,7 @@ var RemoteElementView = memo(({ ctx, node }) => {
       });
     };
   }
-  return createElement2(component, props, ...children);
+  return createElement(component, props, ...children);
 });
 var RemoteView = memo(function RemoteView2({ nodeId }) {
   const ctx = useContext3(RemoteUIContext);
@@ -620,27 +673,109 @@ var RemoteView = memo(function RemoteView2({ nodeId }) {
     return null;
   }
   const { store } = ctx;
-  const subscribe = useCallback2(
+  const subscribe = useCallback(
     (listener) => store.subscribe(nodeId, listener),
     [store, nodeId]
   );
-  const getSnapshot = useCallback2(() => store.getNode(nodeId), [store, nodeId]);
-  const node = useSyncExternalStore2(subscribe, getSnapshot, getSnapshot);
+  const getSnapshot = useCallback(() => store.getNode(nodeId), [store, nodeId]);
+  const node = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
   if (node === null) {
     return null;
   }
   if (node.kind === "text") {
     return node.text;
   }
-  const childElements = node.children.map((child) => /* @__PURE__ */ jsx3(RemoteView2, { nodeId: child.id }, child.id));
+  const childElements = node.children.map((child) => /* @__PURE__ */ jsx2(RemoteView2, { nodeId: child.id }, child.id));
   if (node.kind === "fragment") {
-    return createElement2(Fragment, { key: node.id }, ...childElements);
+    return createElement(Fragment, { key: node.id }, ...childElements);
   }
-  return /* @__PURE__ */ jsx3(RemoteElementView, { node, ctx });
+  return /* @__PURE__ */ jsx2(RemoteElementView, { node, ctx });
 });
 
+// src/components/app-view.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var AppView = ({
+  app,
+  slot,
+  createIframe,
+  fallback = null,
+  ...viewProps
+}) => {
+  const { store, client } = useTailorRootContext("AppView");
+  const { theme, components: wrappedComponents } = client;
+  const reactId = useId2();
+  const currentView = useSyncExternalStore2(
+    store.views.subscribe,
+    store.views.getSnapshot,
+    store.views.getSnapshot
+  );
+  const view = viewProps.view;
+  const suppliedContext = viewProps.context;
+  const context = useStableContext(suppliedContext);
+  const status = viewProps.status ?? "ready";
+  const props = useMemo3(() => {
+    if (view !== void 0) {
+      return {
+        slot,
+        view,
+        layers: [
+          ...(currentView?.layers ?? []).filter(
+            (layer) => layer.path !== view && isViewAncestor2(layer.path, view)
+          ),
+          { path: view, context, status }
+        ]
+      };
+    }
+    return currentView === null ? void 0 : { slot, ...currentView };
+  }, [context, currentView, view, status, slot]);
+  const meta = useSyncExternalStore2(store.subscribe, store.getMetaSnapshot, store.getMetaSnapshot);
+  const runtimeProps = useMemo3(
+    () => props === void 0 ? void 0 : {
+      ...props,
+      declaredViews: Object.keys(meta.schema?.views ?? {}),
+      supportedViews: meta.schema?.slots[slot]?.views ?? []
+    },
+    [props, meta.schema, slot]
+  );
+  const assetsBaseUrl = app.clientPath ? null : meta.assetsBaseUrl;
+  const appUrl = useMemo3(
+    () => resolveAppUrl(app, store.baseUrl, assetsBaseUrl),
+    [app, assetsBaseUrl, store.baseUrl]
+  );
+  useEffect2(() => {
+    void store.fetchMeta();
+  }, [store]);
+  if (props === void 0 || appUrl === null || meta.schema === null) {
+    return fallback;
+  }
+  const viewId = `tailorkit-view-${reactId.replaceAll(":", "")}`;
+  return /* @__PURE__ */ jsx3(PrimitiveThemeContext.Provider, { value: { viewId, theme }, children: /* @__PURE__ */ jsxs2("div", { "data-tailorkit-view": viewId, children: [
+    /* @__PURE__ */ jsx3("style", { "data-tailorkit-theme-style": viewId, children: buildThemeCss(viewId, theme) }),
+    /* @__PURE__ */ jsx3(
+      RemoteViewHost,
+      {
+        appUrl: appUrl.toString(),
+        components: wrappedComponents,
+        createIframe,
+        props: runtimeProps
+      }
+    )
+  ] }) });
+};
+function resolveAppUrl(app, baseUrl, assetsBaseUrl) {
+  if (app.clientPath) {
+    return new URL(app.clientPath, baseUrl);
+  }
+  if (!assetsBaseUrl || !app.projectId || !app.currentDeployment?.id) {
+    return null;
+  }
+  return new URL(
+    `projects/${app.projectId}/apps/${app.id}/deployments/${app.currentDeployment.id}/files/client.js`,
+    toBaseUrl(assetsBaseUrl)
+  );
+}
+
 // src/tailor-kit.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 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) {
@@ -651,7 +786,6 @@ function createTailorKitClient(options) {
 }
 function createReactTailorKitClient(options) {
   const wrappedComponents = {};
-  const store = createTailorKitStore(options.baseUrl);
   const theme = options.theme ?? {};
   for (const [name, renderer] of Object.entries(options.components ?? {})) {
     if (renderer) {
@@ -668,249 +802,172 @@ function createReactTailorKitClient(options) {
       wrappedComponents[toComponentTagName(name)] = TailorKitComponent;
     }
   }
-  const useApps = createUseApps(store);
-  const useCurrentScreen = createUseCurrentScreen(store);
-  const AppView = ({
-    app,
-    createIframe,
-    fallback = null,
-    ...screenProps
-  }) => {
-    const reactId = useId2();
-    const currentScreen = useSyncExternalStore3(
-      store.subscribe,
-      store.getCurrentScreen,
-      store.getCurrentScreen
-    );
-    const screen = screenProps.screen;
-    const context = screenProps.context;
-    const status = screenProps.status ?? "ready";
-    const props = useMemo6(() => {
-      if (screen !== void 0) {
-        return {
-          screen: {
-            context,
-            path: screen,
-            status
-          }
-        };
+  return { baseUrl: options.baseUrl, components: wrappedComponents, theme };
+}
+
+// src/components/root.tsx
+import { useEffect as useEffect3, useMemo as useMemo5, useState as useState2 } from "react";
+
+// src/components/render.tsx
+import { cloneElement, createElement as createElement2, isValidElement, useMemo as useMemo4 } from "react";
+function useRender({
+  defaultTagName,
+  props,
+  render
+}) {
+  return useMemo4(() => {
+    if (render) {
+      if (!isValidElement(render)) {
+        throw new Error("The render prop must be a valid React element.");
       }
-      return currentScreen === null ? void 0 : {
-        screen: {
-          context: currentScreen.context,
-          path: currentScreen.screen,
-          status: currentScreen.status
-        }
-      };
-    }, [context, currentScreen, screen, status]);
-    const meta = useSyncExternalStore3(
-      store.subscribe,
-      store.getMetaSnapshot,
-      store.getMetaSnapshot
-    );
-    const assetsBaseUrl = app.clientPath ? null : meta.assetsBaseUrl;
-    const appUrl = useMemo6(
-      () => resolveAppUrl(app, store.baseUrl, assetsBaseUrl),
-      [app, assetsBaseUrl]
-    );
-    useEffect4(() => {
-      void store.fetchMeta();
-    }, []);
-    if (props === void 0 || appUrl === null) {
-      return fallback;
+      return cloneElement(render, mergeProps(render.props, props));
     }
-    const screenId = `tailorkit-screen-${reactId.replaceAll(":", "")}`;
-    return /* @__PURE__ */ jsx4(PrimitiveThemeContext.Provider, { value: { screenId, theme }, children: /* @__PURE__ */ jsxs2("div", { "data-tailorkit-screen": screenId, children: [
-      /* @__PURE__ */ jsx4("style", { "data-tailorkit-theme-style": screenId, children: buildThemeCss(screenId, theme) }),
-      /* @__PURE__ */ jsx4(
-        RemoteViewHost,
-        {
-          appUrl,
-          components: wrappedComponents,
-          createIframe,
-          props
-        }
-      )
-    ] }) });
-  };
-  const client = {
-    AppView,
-    Root: (props) => /* @__PURE__ */ jsx4(Root, { ...props, tailor: client }),
-    getApp: store.getApp,
-    getApps: store.getApps,
-    useApps,
-    useCurrentScreen
-  };
-  return {
-    ...client
-  };
+    return createElement2(defaultTagName, props);
+  }, [defaultTagName, props, render]);
 }
-function createTailorKitStore(baseUrlInput) {
-  const baseUrl = toBaseUrl(baseUrlInput);
-  const listeners = /* @__PURE__ */ new Set();
-  const screens = /* @__PURE__ */ new Map();
-  let appsSnapshot = {
-    apps: [],
-    error: null,
-    status: "idle"
-  };
-  let metaSnapshot = {
-    assetsBaseUrl: null,
-    error: null,
-    schema: null,
-    status: "idle"
-  };
-  let currentScreen = null;
-  let fetchAppsPromise = null;
-  let fetchMetaPromise = null;
-  let fetchAppsRequestId = 0;
-  let nextOrder = 0;
-  const emit = () => {
-    for (const listener of listeners) {
-      listener();
+function mergeProps(...propSets) {
+  const merged = {};
+  for (const props of propSets) {
+    if (!props) {
+      continue;
     }
-  };
-  const selectCurrentScreen = () => {
-    let selected = null;
-    for (const screen of screens.values()) {
-      const depth = getScreenDepth(screen.screen);
-      const selectedDepth = selected === null ? -1 : getScreenDepth(selected.screen);
-      if (selected === null || depth > selectedDepth) {
-        selected = screen;
-      }
-      if (selected !== null && depth === selectedDepth && screen.order > selected.order) {
-        selected = screen;
+    for (const [key, value] of Object.entries(props)) {
+      if (value === void 0) {
+        continue;
       }
-    }
-    const deepestScreens = selected === null ? [] : [...screens.values()].filter(
-      (screen) => getScreenDepth(screen.screen) === getScreenDepth(selected.screen)
-    );
-    if (typeof console !== "undefined" && selected !== null && deepestScreens.length > 1) {
-      const screenNames = deepestScreens.map((screen) => `"${screen.screen}"`).join(", ");
-      console.warn(
-        `TailorKit found multiple active screens at the same hierarchy depth: ${screenNames}. TailorKit selected "${selected.screen}" by mount order. Only one route at a hierarchy depth should call useCurrentScreen.`
-      );
-    }
-    currentScreen = selected;
-  };
-  return {
-    baseUrl,
-    fetchApps: (options = {}) => {
-      if (fetchAppsPromise && !options.force) {
-        return fetchAppsPromise;
+      const existing = merged[key];
+      if (key === "className" && existing && value) {
+        merged[key] = `${existing} ${value}`;
+        continue;
       }
-      appsSnapshot = { ...appsSnapshot, status: "loading" };
-      emit();
-      const requestId = ++fetchAppsRequestId;
-      fetchAppsPromise = fetch(new URL("apps", baseUrl)).then(async (response) => {
-        if (!response.ok) {
-          throw new Error(`Unable to fetch TailorKit apps from ${baseUrl.toString()}.`);
-        }
-        const apps = await response.json();
-        if (requestId !== fetchAppsRequestId) {
-          return;
-        }
-        appsSnapshot = {
-          apps,
-          error: null,
-          status: "ready"
-        };
-        emit();
-      }).catch((error) => {
-        if (requestId !== fetchAppsRequestId) {
-          return;
-        }
-        appsSnapshot = {
-          ...appsSnapshot,
-          error: error instanceof Error ? error : new Error(String(error)),
-          status: "error"
+      if (key === "style" && existing && value) {
+        merged[key] = {
+          ...existing,
+          ...value
         };
-        emit();
-      });
-      return fetchAppsPromise;
-    },
-    fetchMeta: () => {
-      if (fetchMetaPromise) {
-        return fetchMetaPromise;
+        continue;
       }
-      metaSnapshot = { ...metaSnapshot, status: "loading" };
-      emit();
-      fetchMetaPromise = fetch(new URL("meta", baseUrl)).then(async (response) => {
-        if (!response.ok) {
-          throw new Error(`Unable to fetch TailorKit metadata from ${baseUrl.toString()}.`);
-        }
-        const meta = await response.json();
-        metaSnapshot = {
-          assetsBaseUrl: meta.assetsBaseUrl ?? null,
-          error: null,
-          schema: meta.schema,
-          status: "ready"
-        };
-        emit();
-      }).catch((error) => {
-        metaSnapshot = {
-          ...metaSnapshot,
-          error: error instanceof Error ? error : new Error(String(error)),
-          status: "error"
+      if (key === "ref" && existing && value) {
+        merged[key] = composeRefs(existing, value);
+        continue;
+      }
+      if (isEventHandler(key) && typeof existing === "function" && typeof value === "function") {
+        merged[key] = (...args) => {
+          existing(...args);
+          const event = args[0];
+          if (!event?.defaultPrevented) {
+            value(...args);
+          }
         };
-        emit();
-      });
-      return fetchMetaPromise;
-    },
-    getApp: (id) => appsSnapshot.apps.find((app) => app.id === id),
-    getApps: () => appsSnapshot.apps,
-    getAppsSnapshot: () => appsSnapshot,
-    getCurrentScreen: () => currentScreen,
-    getMetaSnapshot: () => metaSnapshot,
-    registerScreen: (entry) => {
-      const existing = screens.get(entry.id);
-      screens.set(entry.id, {
-        ...entry,
-        order: existing?.order ?? nextOrder
-      });
-      if (!existing) {
-        nextOrder += 1;
+        continue;
+      }
+      merged[key] = value;
+    }
+  }
+  return merged;
+}
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
       }
-      selectCurrentScreen();
-      emit();
-    },
-    subscribe: (listener) => {
-      listeners.add(listener);
-      return () => {
-        listeners.delete(listener);
-      };
-    },
-    unregisterScreen: (id) => {
-      screens.delete(id);
-      selectCurrentScreen();
-      emit();
     }
   };
 }
-function getScreenDepth(screen) {
-  return screen === "/" ? 0 : screen.split("/").filter(Boolean).length;
+function isEventHandler(key) {
+  return /^on[A-Z]/u.test(key);
 }
-function resolveAppUrl(app, baseUrl, assetsBaseUrl) {
-  if (app.clientPath) {
-    return new URL(app.clientPath, baseUrl);
-  }
-  if (!assetsBaseUrl || !app.projectId || !app.currentDeployment?.id) {
-    return null;
+
+// 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] = useState2(() => createTailorKitStore(baseUrl, appsProp));
+  let store = previousStore;
+  if (previousStore.baseUrl.toString() !== baseUrl) {
+    store = createTailorKitStore(baseUrl, appsProp);
+    setStore(store);
   }
-  return new URL(
-    `projects/${app.projectId}/apps/${app.id}/deployments/${app.currentDeployment.id}/files/client.js`,
-    toBaseUrl(assetsBaseUrl)
+  useEffect3(() => {
+    store.setProvidedApps(appsProp);
+  }, [store, appsProp]);
+  const context = useMemo5(
+    () => ({
+      store,
+      client
+    }),
+    [store, client]
+  );
+  const element = render ? useRender({
+    defaultTagName: "div",
+    props: mergeProps({ children }, props),
+    render
+  }) : 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 toBaseUrl(value) {
-  const url = value instanceof URL ? new URL(value) : new URL(value);
-  if (!url.pathname.endsWith("/")) {
-    url.pathname = `${url.pathname}/`;
-  }
-  return url;
+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
+  primitives,
+  useApps,
+  useView
 };