@tailorkit/react 0.1.0-beta.0

package/dist/index.js

@@ -0,0 +1,920 @@
+// 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/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.");
+      }
+      return cloneElement(render, mergeProps(render.props, props));
+    }
+    return createElement(defaultTagName, props);
+  }, [defaultTagName, props, render]);
+}
+function mergeProps(...propSets) {
+  const merged = {};
+  for (const props of propSets) {
+    if (!props) {
+      continue;
+    }
+    for (const [key, value] of Object.entries(props)) {
+      if (value === void 0) {
+        continue;
+      }
+      const existing = merged[key];
+      if (key === "className" && existing && value) {
+        merged[key] = `${existing} ${value}`;
+        continue;
+      }
+      if (key === "style" && existing && value) {
+        merged[key] = {
+          ...existing,
+          ...value
+        };
+        continue;
+      }
+      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);
+          }
+        };
+        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;
+      }
+    }
+  };
+}
+function isEventHandler(key) {
+  return /^on[A-Z]/u.test(key);
+}
+
+// src/components/context.ts
+import { createContext, useContext } from "react";
+var TailorRootContext = createContext(null);
+function useTailorRootContext(component) {
+  const context = useContext(TailorRootContext);
+  if (!context) {
+    throw new Error(`${component} must be rendered inside tailor.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 { resolveTheme } from "@tailorkit/core/primitives/theme";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var PrimitiveThemeContext = createContext2(null);
+var tokenGroups = [
+  "space",
+  "radius",
+  "background",
+  "border",
+  "borderColor",
+  "textColor"
+];
+var cssEscape = (value) => {
+  const css = globalThis.CSS;
+  if (typeof css?.escape === "function") {
+    return css.escape(value);
+  }
+  return value.replaceAll(/[^A-Za-z0-9_-]/gu, "\\$&");
+};
+var toCssValue = (group, value) => {
+  if (typeof value === "number") {
+    return `${value}px`;
+  }
+  if (group === "size" || group === "raw") {
+    return value;
+  }
+  return `var(--tailorkit-${group}-${cssEscape(value)})`;
+};
+var toResponsiveEntries = (value) => {
+  if (value === void 0) {
+    return [];
+  }
+  if (!(value && typeof value === "object") || Array.isArray(value)) {
+    return [["base", value]];
+  }
+  return Object.entries(value).filter(
+    (entry) => entry[1] !== void 0
+  );
+};
+var declarationsForProp = (prop, value) => {
+  if (prop === "columns") {
+    return [`grid-template-columns: repeat(${String(value)}, minmax(0, 1fr));`];
+  }
+  const tokenDeclarations = {
+    background: ["background", "background"],
+    border: ["border", "border"],
+    borderColor: ["borderColor", "border-color"],
+    textColor: ["textColor", "color"]
+  };
+  const tokenDeclaration = tokenDeclarations[prop];
+  if (tokenDeclaration) {
+    const [group, property] = tokenDeclaration;
+    if (prop === "border") {
+      return [`border-style: ${toCssValue(group, value)};`, "border-width: 1px;"];
+    }
+    return [`${property}: ${toCssValue(group, value)};`];
+  }
+  if (prop === "gap" || prop === "margin" || prop === "padding") {
+    return [`${prop}: ${toCssValue("space", value)};`];
+  }
+  if (prop === "height" || prop === "width") {
+    return [`${prop}: ${toCssValue("size", value)};`];
+  }
+  if (prop === "radius") {
+    return [`border-radius: ${toCssValue("radius", value)};`];
+  }
+  if (prop === "align") {
+    return [`align-items: ${toFlexAlignment(value)};`];
+  }
+  if (prop === "justify") {
+    return [`justify-content: ${toFlexJustification(value)};`];
+  }
+  if (prop === "direction") {
+    return [`flex-direction: ${toCssValue("raw", value)};`];
+  }
+  if (prop === "overflow") {
+    return [`overflow: ${toCssValue("raw", value)};`];
+  }
+  if (prop === "grow") {
+    return [`flex-grow: ${String(value)};`];
+  }
+  if (prop === "shrink") {
+    return [`flex-shrink: ${String(value)};`];
+  }
+  if (prop === "minHeight") {
+    return [`min-height: ${toCssValue("size", value)};`];
+  }
+  if (prop === "minWidth") {
+    return [`min-width: ${toCssValue("size", value)};`];
+  }
+  if (prop === "basis") {
+    return [`flex-basis: ${toCssValue("size", value)};`];
+  }
+  if (prop === "wrap") {
+    return [`flex-wrap: ${toCssValue("raw", value)};`];
+  }
+  return [];
+};
+var toFlexAlignment = (value) => {
+  if (value === "start") {
+    return "flex-start";
+  }
+  if (value === "end") {
+    return "flex-end";
+  }
+  return String(value);
+};
+var toFlexJustification = (value) => {
+  if (value === "start") {
+    return "flex-start";
+  }
+  if (value === "end") {
+    return "flex-end";
+  }
+  if (value === "between") {
+    return "space-between";
+  }
+  return String(value);
+};
+var buildPrimitiveCss = ({
+  display,
+  nodeId,
+  props,
+  screenId,
+  theme
+}) => {
+  const selector = `[data-tailorkit-screen="${cssEscape(screenId)}"] [data-tailorkit-node="${cssEscape(
+    nodeId
+  )}"]`;
+  const base = [`display: ${display};`];
+  const byBreakpoint = /* @__PURE__ */ new Map();
+  for (const [prop, rawValue] of Object.entries(props)) {
+    for (const [breakpoint, value] of toResponsiveEntries(rawValue)) {
+      const declarations = declarationsForProp(prop, value);
+      if (declarations.length === 0) {
+        continue;
+      }
+      const target = breakpoint === "base" ? base : byBreakpoint.get(breakpoint) ?? [];
+      target.push(...declarations);
+      if (breakpoint !== "base") {
+        byBreakpoint.set(breakpoint, target);
+      }
+    }
+  }
+  const rules = [`${selector} { ${base.join(" ")} }`];
+  for (const [breakpoint, declarations] of byBreakpoint) {
+    const minWidth = theme.breakpoints?.[breakpoint];
+    if (!minWidth) {
+      continue;
+    }
+    rules.push(`@media (min-width: ${minWidth}) { ${selector} { ${declarations.join(" ")} } }`);
+  }
+  return rules.join("\n");
+};
+var buildThemeCss = (screenId, theme) => {
+  const selector = `[data-tailorkit-screen="${cssEscape(screenId)}"]`;
+  const declarations = [];
+  const resolvedTheme = resolveTheme(theme);
+  for (const group of tokenGroups) {
+    for (const [name, value] of Object.entries(resolvedTheme.tokens?.[group] ?? {})) {
+      declarations.push(`--tailorkit-${group}-${cssEscape(name)}: ${value};`);
+    }
+  }
+  return `${selector} { ${declarations.join(" ")} }`;
+};
+var usePrimitiveNodeId = () => {
+  const id = useId();
+  return useMemo4(() => `tailorkit-${id.replaceAll(":", "")}`, [id]);
+};
+var Primitive = ({
+  children,
+  display,
+  element,
+  props
+}) => {
+  const context = useContext2(PrimitiveThemeContext);
+  const nodeId = usePrimitiveNodeId();
+  const Element = element;
+  const css = context ? buildPrimitiveCss({
+    display,
+    nodeId,
+    props,
+    screenId: context.screenId,
+    theme: context.theme
+  }) : "";
+  return /* @__PURE__ */ jsxs(Element, { "data-tailorkit-node": nodeId, children: [
+    css === "" ? null : /* @__PURE__ */ jsx2("style", { "data-tailorkit-node-style": nodeId, children: css }),
+    children
+  ] });
+};
+var primitives = {
+  Box: ({ props, slots }) => /* @__PURE__ */ jsx2(Primitive, { display: "block", element: "div", props, children: slots.default }),
+  Flex: ({ props, slots }) => /* @__PURE__ */ jsx2(Primitive, { display: "flex", element: "div", props, children: slots.default }),
+  Grid: ({ props, slots }) => /* @__PURE__ */ jsx2(Primitive, { display: "grid", element: "div", props, children: slots.default }),
+  Inline: ({ props, slots }) => /* @__PURE__ */ jsx2(Primitive, { display: "inline", element: "span", props, children: slots.default })
+};
+
+// src/remote-view.tsx
+import {
+  Component,
+  Fragment,
+  createElement as createElement2,
+  memo,
+  useCallback as useCallback2,
+  useContext as useContext3,
+  useEffect as useEffect3,
+  useMemo as useMemo5,
+  useRef as useRef2,
+  useState,
+  useSyncExternalStore as useSyncExternalStore2
+} from "react";
+import { createIframeUiHost } from "@tailorkit/sandbox/host";
+
+// src/node-store.ts
+var childIds = (children) => children.map((c) => c.id).join(",");
+var nodeSignature = (node) => {
+  if (node.kind === "text") {
+    return `text:${node.text}`;
+  }
+  if (node.kind === "fragment") {
+    return `frag:${childIds(node.children)}`;
+  }
+  const propsStr = JSON.stringify(node.props);
+  const callbacksStr = (node.callbacks ?? []).map((binding) => `${binding.callback}:${binding.event}`).join(",");
+  return `elem:${node.type}|${childIds(node.children)}|${propsStr}|${callbacksStr}`;
+};
+var flattenTree = (node, out) => {
+  out.set(node.id, node);
+  if (node.kind === "text") {
+    return;
+  }
+  for (const child of node.children) {
+    flattenTree(child, out);
+  }
+};
+var NodeStore = class {
+  nodes = /* @__PURE__ */ new Map();
+  signatures = /* @__PURE__ */ new Map();
+  nodeListeners = /* @__PURE__ */ new Map();
+  rootListeners = /* @__PURE__ */ new Set();
+  rootId = null;
+  clear() {
+    const nodeIds = [...this.nodeListeners.keys()];
+    const hadRoot = this.rootId !== null;
+    this.nodes = /* @__PURE__ */ new Map();
+    this.signatures = /* @__PURE__ */ new Map();
+    this.rootId = null;
+    for (const id of nodeIds) {
+      const subs = this.nodeListeners.get(id);
+      if (subs) {
+        for (const l of subs) {
+          l();
+        }
+      }
+    }
+    if (hadRoot) {
+      for (const l of this.rootListeners) {
+        l();
+      }
+    }
+  }
+  setSnapshot(tree) {
+    const next = /* @__PURE__ */ new Map();
+    flattenTree(tree, next);
+    const changed = /* @__PURE__ */ new Set();
+    for (const [id, node] of next) {
+      const sig = nodeSignature(node);
+      if (this.signatures.get(id) !== sig) {
+        changed.add(id);
+        this.signatures.set(id, sig);
+      }
+    }
+    for (const id of this.signatures.keys()) {
+      if (!next.has(id)) {
+        this.signatures.delete(id);
+      }
+    }
+    this.nodes = next;
+    const prevRootId = this.rootId;
+    this.rootId = tree.id;
+    for (const id of changed) {
+      const subs = this.nodeListeners.get(id);
+      if (subs) {
+        for (const l of subs) {
+          l();
+        }
+      }
+    }
+    if (prevRootId !== this.rootId) {
+      for (const l of this.rootListeners) {
+        l();
+      }
+    }
+  }
+  getRootId() {
+    return this.rootId;
+  }
+  getNode(id) {
+    return this.nodes.get(id) ?? null;
+  }
+  subscribe(id, listener) {
+    let subs = this.nodeListeners.get(id);
+    if (!subs) {
+      subs = /* @__PURE__ */ new Set();
+      this.nodeListeners.set(id, subs);
+    }
+    subs.add(listener);
+    return () => {
+      subs.delete(listener);
+      if (subs.size === 0) {
+        this.nodeListeners.delete(id);
+      }
+    };
+  }
+  subscribeRoot(listener) {
+    this.rootListeners.add(listener);
+    return () => this.rootListeners.delete(listener);
+  }
+};
+
+// src/remote-context.ts
+import { createContext as createContext3 } from "react";
+var RemoteUIContext = createContext3(null);
+
+// src/remote-view.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var formatError = (error) => error.message;
+var RemoteErrorBoundary = class extends Component {
+  state = { error: null };
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  static componentDidCatch(error) {
+    console.error("TailorKit remote app failed", error);
+  }
+  render() {
+    if (this.state.error) {
+      return createElement2("div", null, formatError(this.state.error));
+    }
+    return this.props.children;
+  }
+};
+function RemoteViewHost({
+  appUrl,
+  components: components2,
+  createIframe,
+  props,
+  runtimeUrl
+}) {
+  const appKey = appUrl.toString();
+  const storeRef = useRef2(null);
+  if (storeRef.current === null) {
+    storeRef.current = new NodeStore();
+  }
+  const store = storeRef.current;
+  const appKeyRef = useRef2(appKey);
+  if (appKeyRef.current !== appKey) {
+    appKeyRef.current = appKey;
+    store.clear();
+  }
+  const dispatchRef = useRef2(null);
+  const [error, setError] = useState(null);
+  const [status, setStatus] = useState("starting");
+  const ctxRef = useRef2({
+    components: components2,
+    dispatch: (payload) => dispatchRef.current?.(payload),
+    store
+  });
+  useEffect3(() => {
+    ctxRef.current.components = components2;
+  }, [components2]);
+  const ui = useMemo5(() => {
+    const ctx = ctxRef.current;
+    return createElement2(
+      RemoteUIContext.Provider,
+      { value: ctx },
+      createElement2(
+        RemoteErrorBoundary,
+        { key: appKey },
+        createElement2(RemoteRoot, { store: ctx.store })
+      )
+    );
+  }, [appKey]);
+  useEffect3(() => {
+    const host = createIframeUiHost(appUrl, {
+      createIframe,
+      onError: (error2) => {
+        console.error("TailorKit remote app failed", error2);
+        setError(error2);
+        setStatus("error");
+      },
+      props,
+      runtimeUrl
+    });
+    dispatchRef.current = (payload) => host.dispatch(payload);
+    const unsubscribe = host.subscribe(() => {
+      const tree = host.getSnapshot();
+      if (tree !== null) {
+        store.setSnapshot(tree);
+        setStatus("ready");
+      }
+    });
+    setStatus("starting");
+    setError(null);
+    host.mount();
+    return () => {
+      unsubscribe();
+      dispatchRef.current = null;
+      host.destroy();
+    };
+  }, [appUrl, createIframe, props, runtimeUrl, store]);
+  if (status === "error" && error) {
+    return createElement2("div", null, formatError(error));
+  }
+  return ui;
+}
+function RemoteRoot({ store }) {
+  const subscribe = useCallback2((listener) => store.subscribeRoot(listener), [store]);
+  const getSnapshot = useCallback2(() => store.getRootId(), [store]);
+  const rootId = useSyncExternalStore2(subscribe, getSnapshot, getSnapshot);
+  if (rootId === null) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx3(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 component = components2[node.type];
+  if (component === void 0) {
+    throw new Error(`TailorKit component "${node.type}" is not registered.`);
+  }
+  const props = { ...node.props };
+  for (const binding of node.callbacks ?? []) {
+    props[binding.callback] = (...args) => {
+      dispatch({
+        data: {
+          args: args.slice(0, binding.inputCount),
+          event: binding.event,
+          nodeId: node.id
+        },
+        type: "dispatchCallback"
+      });
+    };
+  }
+  return createElement2(component, props, ...children);
+});
+var RemoteView = memo(function RemoteView2({ nodeId }) {
+  const ctx = useContext3(RemoteUIContext);
+  if (ctx === null) {
+    return null;
+  }
+  const { store } = ctx;
+  const subscribe = useCallback2(
+    (listener) => store.subscribe(nodeId, listener),
+    [store, nodeId]
+  );
+  const getSnapshot = useCallback2(() => store.getNode(nodeId), [store, nodeId]);
+  const node = useSyncExternalStore2(subscribe, getSnapshot, getSnapshot);
+  if (node === null) {
+    return null;
+  }
+  if (node.kind === "text") {
+    return node.text;
+  }
+  const childElements = node.children.map((child) => /* @__PURE__ */ jsx3(RemoteView2, { nodeId: child.id }, child.id));
+  if (node.kind === "fragment") {
+    return createElement2(Fragment, { key: node.id }, ...childElements);
+  }
+  return /* @__PURE__ */ jsx3(RemoteElementView, { node, ctx });
+});
+
+// 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) {
+  return customComponents;
+}
+function createTailorKitClient(options) {
+  return createReactTailorKitClient(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) {
+      const TailorKitComponent = function TailorKitComponent2({
+        children,
+        ...props
+      }) {
+        return renderer({
+          props,
+          slots: { default: children }
+        });
+      };
+      wrappedComponents[name] = TailorKitComponent;
+      wrappedComponents[toComponentTagName(name)] = TailorKitComponent;
+    }
+  }
+  const useApps = createUseApps(store);
+  const useCurrentScreen = createUseCurrentScreen(store);
+  const AppView = ({
+    app,
+    createIframe,
+    fallback = null,
+    runtimeUrl,
+    ...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 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;
+    }
+    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,
+          runtimeUrl
+        }
+      )
+    ] }) });
+  };
+  const client = {
+    AppView,
+    Root: (props) => /* @__PURE__ */ jsx4(Root, { ...props, tailor: client }),
+    getApp: store.getApp,
+    getApps: store.getApps,
+    useApps,
+    useCurrentScreen
+  };
+  return {
+    ...client
+  };
+}
+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();
+    }
+  };
+  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;
+      }
+    }
+    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;
+      }
+      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"
+        };
+        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;
+    },
+    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;
+      }
+      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 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)
+  );
+}
+function toBaseUrl(value) {
+  const url = value instanceof URL ? new URL(value) : new URL(value);
+  if (!url.pathname.endsWith("/")) {
+    url.pathname = `${url.pathname}/`;
+  }
+  return url;
+}
+export {
+  components,
+  createTailorKitClient,
+  primitives
+};