@tailorkit/react 0.1.0-beta.23 → 0.1.0-beta.25

package/dist/index.js

@@ -1,326 +1,16 @@
-// src/components/slot.tsx
-import { useCallback as useCallback4, useEffect as useEffect4, useId as useId2, useMemo as useMemo5, useRef as useRef3, useSyncExternalStore as useSyncExternalStore4 } from "react";
-
-// src/hooks/use-stable-context.ts
-import { useRef } from "react";
-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/hooks/use-views.ts
-import { createSlotStore, matchesApp as matchesApp3, serializeCacheKey } from "@tailorkit/client-core";
-import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useSyncExternalStore as useSyncExternalStore2 } from "react";
-
-// src/components/context.ts
-import { createContext, useContext } from "react";
-var TailorRootContext = createContext(null);
-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;
-}
-
-// src/hooks/use-apps.ts
-import { useCallback, useEffect, useMemo, useSyncExternalStore } from "react";
-import { matchesApp } from "@tailorkit/client-core";
-
-// src/scope-query.ts
-import { appendScopeSelection, normalizeScopeSelection } from "@tailorkit/client-core";
-
-// src/hooks/use-apps.ts
-import { matchesApp as matchesApp2 } from "@tailorkit/client-core";
-function useApps(options = {}) {
-  return useAppsStore(useTailorRootContext("useApps").store, options);
-}
-function useAppsStore(store, options = {}) {
-  const snapshot = useAppsSnapshot(store);
-  const scopes = normalizeScopeSelection(options.scopes);
-  const appIds = normalizeScopeSelection(options.appIds);
-  const data = useMemo(
-    () => snapshot.status === "ready" ? snapshot.apps.filter((app) => matchesApp(app, scopes.scopes, appIds.scopes)) : void 0,
-    [snapshot, scopes.key, appIds.key]
-  );
-  const refetch = useCallback(() => store.fetchApps({ force: true }), [store]);
-  return { ...toUseAppsResult(snapshot, refetch), data };
-}
-function useAppsSnapshot(store) {
-  const snapshot = useSyncExternalStore(
-    store.subscribeApps,
-    store.getAppsSnapshot,
-    store.getAppsSnapshot
-  );
-  useEffect(() => {
-    void store.fetchApps();
-  }, [store]);
-  return snapshot;
-}
-function toUseAppsResult(snapshot, refetch) {
-  return {
-    data: snapshot.status === "ready" ? snapshot.apps : void 0,
-    error: snapshot.error,
-    isFetching: snapshot.isFetching,
-    isError: snapshot.status === "error",
-    isLoading: snapshot.status === "loading",
-    isPending: snapshot.status === "idle" || snapshot.status === "loading",
-    isSuccess: snapshot.status === "ready",
-    refetch,
-    status: snapshot.status
-  };
-}
-
-// src/hooks/use-views.ts
-function useViews({ slot, scopes, appIds }) {
-  const { store } = useTailorRootContext("useViews");
-  const apps = useApps({ scopes, appIds });
-  const items = useResolvedSlot(slot, apps.data, apps.status, apps.error);
-  const refetch = useCallback2(async () => {
-    const multiple = store.client.meta().getSnapshot().data?.schema.slots[slot]?.multiple;
-    if (apps.isSuccess && multiple === true) {
-      await items.refetch();
-      return;
-    }
-    await apps.refetch();
-    let previousKey;
-    while (true) {
-      const discovery = store.getAppsSnapshot();
-      if (discovery.status !== "ready") return;
-      const schema = store.getMetaSnapshot().schema;
-      const options = {
-        apps: discovery.apps.filter((app) => matchesApp3(app, scopes, appIds)),
-        slot,
-        activeView: schema === null || schema.slots[slot]?.multiple === true ? store.views.getSnapshot() : null
-      };
-      const key = serializeCacheKey([options.apps, slot, options.activeView]);
-      if (key === previousKey) return;
-      previousKey = key;
-      await createSlotStore(store.client, options).fetch();
-    }
-  }, [store, slot, scopes, appIds, apps.isSuccess, apps.refetch, items.refetch]);
-  return { ...items, isFetching: apps.isFetching || items.isFetching, refetch };
-}
-function useAppSlot(app, slot) {
-  return useResolvedSlot(slot, [app], "ready", null);
-}
-function useResolvedSlot(slot, apps, appsStatus, appsError) {
-  const { store } = useTailorRootContext("useViews");
-  const activeView = useSyncExternalStore2(
-    store.views.subscribe,
-    store.views.getSnapshot,
-    store.views.getSnapshot
-  );
-  const meta = useSyncExternalStore2(store.subscribe, store.getMetaSnapshot, store.getMetaSnapshot);
-  const options = useStableContext({
-    apps: apps ?? [],
-    slot,
-    activeView: meta.schema === null || meta.schema.slots[slot]?.multiple === true ? activeView : null
-  });
-  const query = useMemo2(
-    () => createSlotStore(store.client, {
-      ...options,
-      appsStatus,
-      appsError
-    }),
-    [store.client, options, appsStatus, appsError]
-  );
-  const snapshot = useSyncExternalStore2(query.subscribe, query.getSnapshot, query.getSnapshot);
-  useEffect2(() => {
-    void query.fetch();
-  }, [query]);
-  const refetch = useCallback2(() => query.fetch({ force: true }), [query]);
-  return {
-    ...snapshot,
-    isError: snapshot.status === "error",
-    isPending: snapshot.status === "idle" || snapshot.status === "loading",
-    isLoading: snapshot.status === "loading",
-    isSuccess: snapshot.status === "ready",
-    refetch
-  };
-}
-
-// src/slot-view.ts
-import { resolveSlotView, selectSlotView } from "@tailorkit/client-core";
+// src/components/render-slot.tsx
+import { useStore as useStore2 } from "@nanostores/react";
+import { createSlotRuntime, buildThemeCss } from "@tailorkit/client-core";
+import { useEffect as useEffect2, useId as useId2, useMemo as useMemo3 } from "react";
 
 // src/primitives.tsx
-import { createContext as createContext2, useContext as useContext2, useId, useMemo as useMemo3 } from "react";
-import { resolveTheme } from "@tailorkit/core/primitives/theme";
+import { createContext, useContext, useId, useMemo } from "react";
+import { buildPrimitiveCss } from "@tailorkit/client-core";
 import { jsx, 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,
-  viewId,
-  theme
-}) => {
-  const selector = `[data-tailorkit-view="${cssEscape(viewId)}"] [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 = (viewId, theme) => {
-  const selector = `[data-tailorkit-view="${cssEscape(viewId)}"]`;
-  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 PrimitiveThemeContext = createContext(null);
 var usePrimitiveNodeId = () => {
   const id = useId();
-  return useMemo3(() => `tailorkit-${id.replaceAll(":", "")}`, [id]);
+  return useMemo(() => `tailorkit-${id.replaceAll(":", "")}`, [id]);
 };
 var Primitive = ({
   children,
@@ -328,7 +18,7 @@ var Primitive = ({
   element,
   props
 }) => {
-  const context = useContext2(PrimitiveThemeContext);
+  const context = useContext(PrimitiveThemeContext);
   const nodeId = usePrimitiveNodeId();
   const Element = element;
   const css = context ? buildPrimitiveCss({
@@ -351,28 +41,20 @@ var primitives = {
 };
 
 // src/remote-view.tsx
+import { useStore } from "@nanostores/react";
 import {
   Component,
   Fragment,
   createElement,
+  createContext as createContext2,
   memo,
-  useCallback as useCallback3,
-  useContext as useContext3,
-  useEffect as useEffect3,
-  useMemo as useMemo4,
-  useRef as useRef2,
-  useState,
-  useSyncExternalStore as useSyncExternalStore3
+  useContext as useContext2,
+  useEffect,
+  useMemo as useMemo2
 } from "react";
-import { createIframeUiHost } from "@tailorkit/sandbox/host";
-import { NodeStore } from "@tailorkit/client-core";
-
-// src/remote-context.ts
-import { createContext as createContext3 } from "react";
-var RemoteUIContext = createContext3(null);
-
-// src/remote-view.tsx
+import { createRemoteViewStore, createRemoteElementProps } from "@tailorkit/client-core";
 import { jsx as jsx2 } from "react/jsx-runtime";
+var RemoteUIContext = createContext2(null);
 var formatError = (error) => error.message;
 var RemoteErrorBoundary = class extends Component {
   state = { error: null };
@@ -398,124 +80,44 @@ function RemoteViewHost({
   props
 }) {
   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 hostRef = useRef2(null);
-  const propsRef = useRef2(props);
-  useEffect3(() => {
-    propsRef.current = props;
-    hostRef.current?.setProps(props);
-  }, [props]);
-  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 = useMemo4(() => {
-    const ctx = ctxRef.current;
-    return createElement(
-      RemoteUIContext.Provider,
-      { value: ctx },
-      createElement(
-        RemoteErrorBoundary,
-        { key: appKey },
-        createElement(RemoteRoot, { store: ctx.store })
-      )
-    );
-  }, [appKey]);
-  useEffect3(() => {
-    const host = createIframeUiHost(appUrl, {
-      createIframe,
-      sourceText,
-      getBackendSession,
-      onError: (error2) => {
-        console.error("TailorKit remote app failed", error2);
-        setError(error2);
-        setStatus("error");
-      },
-      props: propsRef.current
-    });
-    hostRef.current = host;
-    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;
-      hostRef.current = null;
-      host.destroy();
-    };
-  }, [appUrl, createIframe, sourceText, getBackendSession, store]);
-  if (status === "error" && error) {
-    return createElement("div", null, formatError(error));
+  const store = useMemo2(() => createRemoteViewStore({ components: components2, props }), [appKey]);
+  const snapshot = useStore(store.state);
+  useEffect(() => {
+    store.setComponents(components2);
+  }, [components2, store]);
+  useEffect(() => {
+    store.setProps(props);
+  }, [props, store]);
+  useEffect(
+    () => store.mount({ appUrl, sourceText, getBackendSession, createIframe }),
+    [appUrl, sourceText, getBackendSession, createIframe, store]
+  );
+  if (snapshot.status === "error" && snapshot.error) {
+    return createElement("div", null, formatError(snapshot.error));
   }
-  return ui;
+  return /* @__PURE__ */ jsx2(RemoteUIContext.Provider, { value: store, children: /* @__PURE__ */ jsx2(RemoteErrorBoundary, { children: /* @__PURE__ */ jsx2(RemoteRoot, { store }) }, `${appKey}:${snapshot.generation}`) });
 }
 function RemoteRoot({ store }) {
-  const subscribe = useCallback3((listener) => store.subscribeRoot(listener), [store]);
-  const getSnapshot = useCallback3(() => store.getRootId(), [store]);
-  const rootId = useSyncExternalStore3(subscribe, getSnapshot, getSnapshot);
-  if (rootId === null) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx2(RemoteView, { nodeId: rootId });
+  const rootId = useStore(store.nodes.root);
+  return rootId === null ? null : /* @__PURE__ */ jsx2(RemoteView, { nodeId: rootId });
 }
 var RemoteElementView = memo(({ ctx, node }) => {
-  const { dispatch, components: components2 } = ctx;
+  const componentStore = useMemo2(() => ctx.selectComponent(node.type), [ctx, node.type]);
+  const component = useStore(componentStore);
   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.`);
   }
-  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"
-      });
-    };
-  }
+  const props = createRemoteElementProps(node, ctx.dispatch);
   return createElement(component, props, ...children);
 });
 function RemoteViewComponent({ nodeId }) {
-  const ctx = useContext3(RemoteUIContext);
-  if (ctx === null) {
-    return null;
-  }
-  const { store } = ctx;
-  const subscribe = useCallback3(
-    (listener) => store.subscribe(nodeId, listener),
-    [store, nodeId]
-  );
-  const getSnapshot = useCallback3(() => store.getNode(nodeId), [store, nodeId]);
-  const node = useSyncExternalStore3(subscribe, getSnapshot, getSnapshot);
+  const ctx = useContext2(RemoteUIContext);
+  return ctx === null ? null : /* @__PURE__ */ jsx2(RemoteNodeView, { ctx, nodeId });
+}
+function RemoteNodeView({ ctx, nodeId }) {
+  const nodeStore = useMemo2(() => ctx.nodes.selectNode(nodeId), [ctx, nodeId]);
+  const node = useStore(nodeStore);
   if (node === null) {
     return null;
   }
@@ -530,210 +132,128 @@ function RemoteViewComponent({ nodeId }) {
 }
 var RemoteView = memo(RemoteViewComponent);
 
-// src/components/slot.tsx
-import { toBaseUrl } from "@tailorkit/client-core";
+// src/components/context.ts
+import { createContext as createContext3, useContext as useContext3 } from "react";
+var TailorkitContext = createContext3(null);
+function useTailorkitContext(component, expectedClient) {
+  const context = useContext3(TailorkitContext);
+  if (!context) {
+    throw new Error(`${component} must be rendered inside a TailorKit Provider.`);
+  }
+  if (expectedClient && context.client !== expectedClient) {
+    throw new Error(
+      `${component} was created for a different TailorKit client than the surrounding Provider.`
+    );
+  }
+  return context;
+}
+
+// src/components/render-slot.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function ManagedSlot({ app, name, instanceKey }) {
-  const { store } = useTailorRootContext("Slot");
-  const state = useSyncExternalStore4(
-    store.views.subscribe,
-    store.views.getSnapshot,
-    store.views.getSnapshot
-  );
-  if (state === null) return null;
-  return instanceKey === void 0 ? /* @__PURE__ */ jsx3(SlotRenderer, { app, name, state }) : /* @__PURE__ */ jsx3(InstanceSlot, { app, name, instanceKey, state });
+function ManagedRenderSlot(props) {
+  return /* @__PURE__ */ jsx3(SlotRenderer, { mode: "managed", ...props });
 }
-function InstanceSlot({
-  app,
-  name,
-  instanceKey,
-  state
-}) {
-  const { store } = useTailorRootContext("Slot");
-  const instances = useAppSlot(app, name);
-  const meta = useSyncExternalStore4(store.subscribe, store.getMetaSnapshot, store.getMetaSnapshot);
-  const instance = instances.data?.find(
-    (item) => "key" in item && item.key === instanceKey
-  );
-  const resolved = instances.isSuccess && instance && meta.schema ? resolveSlotView(app.views ?? [], name, state, meta.schema) : null;
-  const view = resolved?.status === "ready" ? resolved.view : void 0;
-  const stableContext = useStableContext(resolved?.context);
-  const stableInstance = useStableContext(
-    instance ? { key: instance.key, metadata: instance.metadata, data: instance.data } : void 0
-  );
-  const readyState = useMemo5(
-    () => view === void 0 || !stableInstance ? null : {
-      controlled: true,
-      view,
-      context: stableContext,
-      status: "ready",
-      instance: stableInstance
-    },
-    [view, stableContext, stableInstance]
-  );
-  if (instances.isPending) return /* @__PURE__ */ jsx3("div", { role: "status", children: "Loading view\u2026" });
-  if (instances.error) return /* @__PURE__ */ jsx3("div", { role: "alert", children: instances.error.message });
-  if (meta.schema && meta.schema.slots[name]?.multiple !== true)
-    return /* @__PURE__ */ jsxs2("div", { role: "alert", children: [
-      'Slot "',
-      name,
-      '" does not support instances.'
-    ] });
-  if (!instance) return /* @__PURE__ */ jsxs2("div", { role: "alert", children: [
-    'View instance "',
-    instanceKey,
-    '" is unavailable.'
-  ] });
-  if (!readyState) return null;
-  return /* @__PURE__ */ jsx3(SlotRenderer, { app, name, state: readyState });
+function ControlledRenderSlot(props) {
+  return /* @__PURE__ */ jsx3(SlotRenderer, { mode: "controlled", ...props });
 }
-function ControlledSlot({
-  app,
-  name,
-  view,
-  context,
-  status,
-  instance
-}) {
-  useTailorRootContext("Slot.Controlled");
-  const stableContext = useStableContext(context);
-  const stableInstance = useStableContext(instance);
-  const state = useMemo5(
-    () => ({
-      controlled: true,
-      view,
-      context: stableContext,
-      status,
-      ...status === "ready" && stableInstance ? { instance: stableInstance } : {}
-    }),
-    [view, stableContext, status, stableInstance]
+var RenderSlot = Object.assign(ManagedRenderSlot, {
+  Controlled: ControlledRenderSlot
+});
+function SlotRenderer(options) {
+  const { store, client } = useTailorkitContext(
+    options.mode === "managed" ? "RenderSlot" : "RenderSlot.Controlled"
   );
-  if (status === "ready" && !instance && app.views?.some(
-    (entry) => entry.slot === name && entry.path === view && entry.instances && !entry.disabled
-  )) {
-    return /* @__PURE__ */ jsx3("div", { role: "alert", children: "A view instance is required. Pass instance to Slot.Controlled." });
-  }
-  return /* @__PURE__ */ jsx3(SlotRenderer, { app, name, state });
-}
-var Slot = Object.assign(ManagedSlot, { Controlled: ControlledSlot });
-function SlotRenderer({ app, name, state }) {
-  const { store, client } = useTailorRootContext("Slot");
   const reactId = useId2();
-  const getBackendSession = useMemo5(
-    () => store.client.endpoints.getSessionProvider(app),
-    [store.client, app.id, app.currentDeployment?.id, app.preview?.sessionId]
-  );
-  const meta = useSyncExternalStore4(store.subscribe, store.getMetaSnapshot, store.getMetaSnapshot);
-  const previewSessionId = app.preview?.sessionId ?? "";
-  const appRef = useRef3(app);
-  appRef.current = app;
-  const subscribePreview = useCallback4(
-    (listener) => {
-      const currentApp = appRef.current;
-      return currentApp.preview?.sessionId === previewSessionId ? store.previews.subscribe(currentApp, listener) : () => {
-      };
-    },
-    [store, previewSessionId]
-  );
-  const getPreviewSnapshot = useCallback4(
-    () => store.previews.getSnapshot(previewSessionId),
-    [store, previewSessionId]
-  );
-  const preview = useSyncExternalStore4(subscribePreview, getPreviewSnapshot, getPreviewSnapshot);
-  const props = useMemo5(
-    () => ({
-      ...state,
-      slot: name,
-      declaredViews: Object.keys(meta.schema?.views ?? {}),
-      supportedViews: meta.schema?.slots[name]?.views ?? []
-    }),
-    [state, name, meta.schema]
-  );
-  const appUrl = useMemo5(() => {
-    if (app.clientPath) return new URL(app.clientPath, store.baseUrl);
-    if (!meta.assetsBaseUrl || !app.projectId || !app.currentDeployment?.id) return null;
-    return new URL(
-      `projects/${app.projectId}/apps/${app.id}/deployments/${app.currentDeployment.id}/client/client.js`,
-      toBaseUrl(meta.assetsBaseUrl)
-    );
-  }, [app, store.baseUrl, meta.assetsBaseUrl]);
-  useEffect4(() => {
-    void store.fetchMeta();
-  }, [store]);
-  useEffect4(() => {
-    store.previews.updateApp(app);
-  }, [store, app]);
-  if (meta.schema === null || appUrl === null && preview.source === null) return null;
-  const multiple = meta.schema.slots[name]?.multiple === true;
-  if ("controlled" in state && state.status === "ready") {
-    if (multiple && !state.instance)
-      return /* @__PURE__ */ jsx3("div", { role: "alert", children: "A view instance is required. Pass instance to Slot.Controlled." });
-    if (!multiple && state.instance)
-      return /* @__PURE__ */ jsxs2("div", { role: "alert", children: [
-        'Slot "',
-        name,
-        '" does not support instances.'
-      ] });
-  }
-  if (!("controlled" in state)) {
-    const selected = selectSlotView(app.views ?? [], name, state.view, meta.schema);
-    if (selected?.instances && !multiple)
-      return /* @__PURE__ */ jsxs2("div", { role: "alert", children: [
-        'Slot "',
-        name,
-        '" does not support instances.'
-      ] });
-    if (multiple)
-      return /* @__PURE__ */ jsx3("div", { role: "alert", children: "A view instance key is required. Pass instanceKey to Slot." });
-  }
+  const runtime = useMemo3(() => createSlotRuntime(store, options), [store]);
+  useEffect2(() => runtime.setInput(options), [runtime, options]);
+  const snapshot = useStore2(runtime.state);
+  if (snapshot.status === "hidden") return null;
+  if (snapshot.status === "loading") return /* @__PURE__ */ jsx3("div", { role: "status", children: snapshot.message });
+  if (snapshot.status === "error") return /* @__PURE__ */ jsx3("div", { role: "alert", children: snapshot.error.message });
   const viewId = `tailorkit-view-${reactId.replaceAll(":", "")}`;
   return /* @__PURE__ */ jsx3(PrimitiveThemeContext.Provider, { value: { viewId, theme: client.theme }, children: /* @__PURE__ */ jsxs2("div", { "data-tailorkit-view": viewId, children: [
     /* @__PURE__ */ jsx3("style", { "data-tailorkit-theme-style": viewId, children: buildThemeCss(viewId, client.theme) }),
     /* @__PURE__ */ jsx3(
       RemoteViewHost,
       {
-        appUrl: (appUrl ?? new URL(`preview/${previewSessionId}/client.js`, store.baseUrl)).toString(),
-        sourceText: preview.source ?? void 0,
-        getBackendSession,
+        appUrl: snapshot.appUrl,
+        sourceText: snapshot.sourceText,
+        getBackendSession: snapshot.getBackendSession,
         components: client.components,
-        props
+        props: snapshot.props
       },
-      preview.revision || appUrl?.toString()
+      snapshot.hostKey
     )
   ] }) });
 }
 
 // src/tailorkit.tsx
-import { createTailorKitFetchClient } from "@tailorkit/client-core";
-import { createElement as createElement2 } from "react";
+import {
+  createTailorKitClientConfig,
+  createComponentRegistry,
+  createTailorKitStore
+} from "@tailorkit/client-core";
+import { createElement as createElement2, useEffect as useEffect4, useMemo as useMemo8, useState } from "react";
 
 // src/hooks/use-view-context.ts
-import { useEffect as useEffect5, useMemo as useMemo6 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo4 } from "react";
 function useViewContext(view, options) {
-  const { store } = useTailorRootContext("useViewContext");
-  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(
+  const { store } = useTailorkitContext("useViewContext");
+  const id = useMemo4(() => /* @__PURE__ */ Symbol("tailorkit-current-view"), []);
+  const { context, loading, error } = options;
+  useEffect3(
     () => () => {
       store.views.unregister(id);
     },
     [id, store]
   );
-  useEffect5(() => {
-    store.views.register({
-      context: contextSnapshot,
-      id,
-      view,
-      status
-    });
-  }, [contextSnapshot, id, view, status, store]);
+  useEffect3(() => {
+    store.views.register({ id, view, context, loading, error });
+  }, [id, view, context, loading, error, store]);
+}
+
+// src/hooks/use-apps.ts
+import { useMemo as useMemo6 } from "react";
+import { appsQueryKey, createAppsQuery } from "@tailorkit/client-core";
+
+// src/hooks/use-query-result.ts
+import { useStore as useStore3 } from "@nanostores/react";
+import { useMemo as useMemo5 } from "react";
+function useQueryResult(state) {
+  const result = useStore3(state);
+  return useMemo5(
+    () => ({
+      data: result.data,
+      isPending: result.isPending,
+      error: result.error,
+      isRefetching: result.isFetching && !result.isPending,
+      fetch: result.refetch
+    }),
+    [result]
+  );
+}
+
+// src/hooks/use-apps.ts
+function useApps(options = {}) {
+  return useAppsStore(useTailorkitContext("useApps").store, options);
+}
+function useAppsStore(store, options = {}) {
+  const key = appsQueryKey(options);
+  const query = useMemo6(() => createAppsQuery(store, options), [store, key]);
+  return useQueryResult(query.state);
+}
+
+// src/hooks/use-views.ts
+import { useMemo as useMemo7 } from "react";
+import { appsQueryKey as appsQueryKey2, createViewsQuery } from "@tailorkit/client-core";
+function useViews(options) {
+  const { store } = useTailorkitContext("useViews");
+  const key = appsQueryKey2(options);
+  const query = useMemo7(() => createViewsQuery(store, options), [store, key, options.slot]);
+  return useQueryResult(query.state);
 }
 
 // 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) {
   return customComponents;
 }
@@ -741,175 +261,63 @@ function createTailorKitClient(options) {
   return createReactTailorKitClient(options);
 }
 function createReactTailorKitClient(options) {
-  const wrappedComponents = {};
-  const theme = options.theme ?? {};
-  for (const [name, renderer] of Object.entries(options.components ?? {})) {
-    if (renderer) {
-      const TailorKitComponent = function TailorKitComponent2({
-        children,
-        ...props
-      }) {
-        return renderer({
-          props,
-          children
-        });
-      };
-      wrappedComponents[name] = TailorKitComponent;
-      wrappedComponents[toComponentTagName(name)] = TailorKitComponent;
-    }
-  }
-  const clientConfig = {
-    baseUrl: options.baseUrl,
-    fetchClient: createTailorKitFetchClient({
-      baseUrl: options.baseUrl,
-      cache: options.cache,
-      fetch: options.fetch
-    }),
-    components: wrappedComponents,
-    theme
-  };
+  const wrappedComponents = createComponentRegistry(options.components ?? {}, (renderer) => {
+    return function TailorKitComponent({
+      children,
+      ...props
+    }) {
+      return renderer({
+        props,
+        children
+      });
+    };
+  });
+  const clientConfig = createTailorKitClientConfig({ ...options, components: wrappedComponents });
   const client = {
     ...clientConfig,
-    Slot: Object.assign(
-      function ClientSlot(props) {
-        useTailorRootContext("Slot", client);
-        return createElement2(Slot, props);
+    Provider: function TailorKitProvider({ children, apps }) {
+      const [store] = useState(
+        () => createTailorKitStore(client.baseUrl, apps, client.fetchClient)
+      );
+      useEffect4(() => {
+        store.setProvidedApps(apps);
+      }, [store, apps]);
+      useEffect4(() => () => store.previews.dispose(), [store]);
+      const context = useMemo8(() => ({ store, client }), [store]);
+      return createElement2(TailorkitContext.Provider, { value: context }, children);
+    },
+    RenderSlot: Object.assign(
+      function ClientRenderSlot(props) {
+        useTailorkitContext("RenderSlot", client);
+        return createElement2(RenderSlot, props);
       },
       {
-        Controlled: function ClientControlledSlot(props) {
-          useTailorRootContext("Slot.Controlled", client);
-          return createElement2(Slot.Controlled, props);
+        Controlled: function ClientControlledRenderSlot(props) {
+          useTailorkitContext("RenderSlot.Controlled", client);
+          return createElement2(
+            RenderSlot.Controlled,
+            props
+          );
         }
       }
     ),
     useApps: function useClientApps(options2) {
-      useTailorRootContext("useApps", client);
+      useTailorkitContext("useApps", client);
       return useApps(options2);
     },
     useViews: function useClientViews(options2) {
-      useTailorRootContext("useViews", client);
+      useTailorkitContext("useViews", client);
       return useViews(options2);
     },
     useViewContext: function useClientViewContext(view, options2) {
-      useTailorRootContext("useViewContext", client);
+      useTailorkitContext("useViewContext", client);
       useViewContext(view, options2);
     }
   };
   return client;
 }
-
-// src/components/root.tsx
-import { useEffect as useEffect6, useMemo as useMemo8, useState as useState2 } from "react";
-import { createTailorKitStore, toBaseUrl as toBaseUrl2 } from "@tailorkit/client-core";
-
-// src/components/render.tsx
-import { cloneElement, createElement as createElement3, isValidElement, useMemo as useMemo7 } from "react";
-function useRender({
-  defaultTagName,
-  props,
-  render
-}) {
-  return useMemo7(() => {
-    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 createElement3(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/root.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-function Root({ apps: appsProp, children, render, client, ...props }) {
-  const baseUrl = toBaseUrl2(client.baseUrl).toString();
-  const [previous, setStore] = useState2(() => ({
-    store: createTailorKitStore(baseUrl, appsProp, client.fetchClient),
-    fetchClient: client.fetchClient
-  }));
-  const previousStore = previous.store;
-  let store = previousStore;
-  if (previousStore.baseUrl.toString() !== baseUrl || previous.fetchClient !== client.fetchClient) {
-    store = createTailorKitStore(baseUrl, appsProp, client.fetchClient);
-    setStore({ store, fetchClient: client.fetchClient });
-  }
-  useEffect6(() => {
-    store.setProvidedApps(appsProp);
-  }, [store, appsProp]);
-  useEffect6(() => () => store.previews.dispose(), [store]);
-  const context = useMemo8(
-    () => ({
-      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 });
-}
 export {
-  Root,
-  Slot,
+  RenderSlot,
   components,
   createTailorKitClient,
   primitives