@tailorkit/react 0.1.0-beta.22 → 0.1.0-beta.24

package/dist/components/slot.d.ts

@@ -1,51 +1,9 @@
-import type { ViewInstance } from "@tailorkit/app/client";
+import type { ControlledSlotProps, SlotProps } from "@tailorkit/client-core";
 import type { SlotDefinitions, ViewDefinition } from "@tailorkit/core/schema";
 import type { ReactNode } from "react";
-import type { ViewContext, ViewName } from "../hooks/use-register-view";
-import type { TailorKitApp } from "../tailorkit";
+export type { ControlledSlotProps, SlotProps, SlotContext } from "@tailorkit/client-core";
 type DefaultViews = Record<`/${string}`, ViewDefinition>;
-type ContextPaths<TViews extends Record<string, ViewDefinition>, TView extends ViewName<TViews>> = {
-    [P in ViewName<TViews>]: P extends "/" | TView ? P : TView extends `${P}/${string}` ? P : never;
-}[ViewName<TViews>];
-type ContextFields<TView> = undefined extends ViewContext<TView> ? Partial<Exclude<ViewContext<TView>, undefined>> : ViewContext<TView>;
-export type SlotContext<TViews extends Record<string, ViewDefinition>, TView extends ViewName<TViews>> = {
-    [P in ContextPaths<TViews, TView>]: (context: ContextFields<TViews[P]>) => void;
-}[ContextPaths<TViews, TView>] extends (context: infer TContext) => void ? TContext : never;
-type InstanceProps<TSlot, TKey extends string, TValue> = boolean extends (TSlot extends {
-    multiple?: infer T;
-} ? T : false) ? {
-    [K in TKey]?: TValue;
-} : TSlot extends {
-    multiple: true;
-} ? {
-    [K in TKey]: TValue;
-} : {
-    [K in TKey]?: never;
-};
-export type SlotProps<TSlots extends SlotDefinitions = SlotDefinitions> = {
-    [TSlot in keyof TSlots & string]: {
-        app: TailorKitApp;
-        name: TSlot;
-    } & InstanceProps<TSlots[TSlot], "instanceKey", string>;
-}[keyof TSlots & string];
-export type ControlledSlotProps<TViews extends Record<string, ViewDefinition> = DefaultViews, TSlots extends SlotDefinitions = SlotDefinitions> = {
-    [TSlot in keyof TSlots & string]: {
-        [TView in Extract<ViewName<TViews>, TSlots[TSlot]["views"][number]>]: {
-            app: TailorKitApp;
-            name: TSlot;
-            view: TView;
-        } & (({
-            context: SlotContext<TViews, TView>;
-            status: "ready";
-        } & InstanceProps<TSlots[TSlot], "instance", ViewInstance>) | {
-            context?: never;
-            status: "loading" | "error";
-            instance?: never;
-        });
-    }[Extract<ViewName<TViews>, TSlots[TSlot]["views"][number]>];
-}[keyof TSlots & string];
 export type SlotComponent<TViews extends Record<string, ViewDefinition> = DefaultViews, TSlots extends SlotDefinitions = SlotDefinitions> = ((props: SlotProps<TSlots>) => ReactNode) & {
     Controlled: (props: ControlledSlotProps<TViews, TSlots>) => ReactNode;
 };
 export declare const Slot: SlotComponent;
-export {};

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

@@ -1,22 +1,5 @@
-import type { TailorKitApp } from "../tailorkit";
-import type { TailorKitAppsSnapshot, TailorKitStore } from "@tailorkit/client-core";
-export interface UseAppsOptions<TScopeNames extends string = string> {
-    scopes?: readonly TScopeNames[];
-    appIds?: readonly string[];
-}
-export interface UseAppsResult {
-    data: TailorKitApp[] | undefined;
-    error: Error | null;
-    isFetching: boolean;
-    isError: boolean;
-    isLoading: boolean;
-    isPending: boolean;
-    isSuccess: boolean;
-    refetch: () => Promise<void>;
-    status: "error" | "idle" | "loading" | "ready";
-}
+import type { AppsQueryOptions, QueryResult, TailorKitApp, TailorKitStore } from "@tailorkit/client-core";
+export type UseAppsOptions<TScopeNames extends string = string> = AppsQueryOptions<TScopeNames>;
+export type UseAppsResult = QueryResult<TailorKitApp[]>;
 export declare function useApps(options?: UseAppsOptions): UseAppsResult;
 export declare function useAppsStore(store: TailorKitStore, options?: UseAppsOptions): UseAppsResult;
-export { matchesApp } from "@tailorkit/client-core";
-export declare function useAppsSnapshot(store: TailorKitStore): TailorKitAppsSnapshot;
-export declare function toUseAppsResult(snapshot: TailorKitAppsSnapshot, refetch: () => Promise<void>): UseAppsResult;

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

@@ -0,0 +1,6 @@
+import type { ViewDefinition } from "@tailorkit/core/schema";
+import type { ViewName, ViewState } from "@tailorkit/client-core";
+export type { ViewName, ViewContext, ViewOptions, ViewState } from "@tailorkit/client-core";
+type DefaultViews = Record<`/${string}`, ViewDefinition>;
+export type UseViewContext<TViews extends Record<string, ViewDefinition>> = <TView extends ViewName<TViews>>(view: TView, options: ViewState<TViews, NoInfer<TView>>) => void;
+export declare function useViewContext<TViews extends Record<string, ViewDefinition> = DefaultViews, TView extends ViewName<TViews> = ViewName<TViews>>(view: TView, options: ViewState<TViews, NoInfer<TView>>): void;

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

@@ -0,0 +1,6 @@
+import type { ViewsQueryOptions, ViewsQueryResult } from "@tailorkit/client-core";
+export type { SlotItem } from "@tailorkit/client-core";
+export type UseViewsOptions<TScopeNames extends string = string, TSlot extends string = string> = ViewsQueryOptions<TScopeNames, TSlot>;
+export type UseViewsResult<TMultiple extends boolean = boolean> = ViewsQueryResult<TMultiple>;
+/** Subscribe to the shared views query using React's lifecycle. */
+export declare function useViews(options: UseViewsOptions): UseViewsResult;

package/dist/index.d.ts

@@ -4,6 +4,6 @@ export { components, createTailorKitClient } from "./tailorkit";
 export type { TailorKitApp, TailorKitClientConfig, TailorKitInstance } from "./tailorkit";
 export { Root } from "./components/root";
 export type { UseAppsOptions, UseAppsResult } from "./hooks/use-apps";
-export type { SlotItem, UseSlotOptions, UseSlotResult } from "./hooks/use-slot";
-export type { UseRegisterView, ViewOptions, ViewState } from "./hooks/use-register-view";
+export type { SlotItem, UseViewsOptions, UseViewsResult } from "./hooks/use-views";
+export type { UseViewContext, ViewOptions, ViewState } from "./hooks/use-view-context";
 export { primitives } from "./primitives";

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-slot.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-slot.ts
-function useSlot({ slot, scopes, appIds }) {
-  const { store } = useTailorRootContext("useSlot");
-  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("useSlot");
-  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";
+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,105 @@ function RemoteViewComponent({ nodeId }) {
 }
 var RemoteView = memo(RemoteViewComponent);
 
+// src/components/context.ts
+import { createContext as createContext3, useContext as useContext3 } from "react";
+var TailorRootContext = createContext3(null);
+function useTailorRootContext(component, expectedClient) {
+  const context = useContext3(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/components/slot.tsx
-import { toBaseUrl } from "@tailorkit/client-core";
 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 ManagedSlot(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 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]
-  );
-  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 });
+function ControlledSlot(props) {
+  return /* @__PURE__ */ jsx3(SlotRenderer, { mode: "controlled", ...props });
 }
 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]
+function SlotRenderer(options) {
+  const { store, client } = useTailorRootContext(
+    options.mode === "managed" ? "Slot" : "Slot.Controlled"
   );
-  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 reactId = useId2();
+  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 { createTailorKitClientConfig, createComponentRegistry } from "@tailorkit/client-core";
 import { createElement as createElement2 } from "react";
 
-// src/hooks/use-register-view.ts
-import { useEffect as useEffect5, useMemo as useMemo6 } from "react";
-function useRegisterView(view, options) {
-  const { store } = useTailorRootContext("useRegisterView");
-  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(
+// src/hooks/use-view-context.ts
+import { useEffect as useEffect3, useMemo as useMemo4 } from "react";
+function useViewContext(view, options) {
+  const { store } = useTailorRootContext("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 { useStore as useStore3 } from "@nanostores/react";
+import { useMemo as useMemo5 } from "react";
+import { appsQueryKey, createAppsQuery } from "@tailorkit/client-core";
+function useApps(options = {}) {
+  return useAppsStore(useTailorRootContext("useApps").store, options);
+}
+function useAppsStore(store, options = {}) {
+  const key = appsQueryKey(options);
+  const query = useMemo5(() => createAppsQuery(store, options), [store, key]);
+  return useStore3(query.state);
+}
+
+// src/hooks/use-views.ts
+import { useStore as useStore4 } from "@nanostores/react";
+import { useMemo as useMemo6 } from "react";
+import { appsQueryKey as appsQueryKey2, createViewsQuery } from "@tailorkit/client-core";
+function useViews(options) {
+  const { store } = useTailorRootContext("useViews");
+  const key = appsQueryKey2(options);
+  const query = useMemo6(() => createViewsQuery(store, options), [store, key, options.slot]);
+  return useStore4(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,33 +238,18 @@ 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(
@@ -786,21 +268,21 @@ function createReactTailorKitClient(options) {
       useTailorRootContext("useApps", client);
       return useApps(options2);
     },
-    useSlot: function useClientSlot(options2) {
-      useTailorRootContext("useSlot", client);
-      return useSlot(options2);
+    useViews: function useClientViews(options2) {
+      useTailorRootContext("useViews", client);
+      return useViews(options2);
     },
-    useRegisterView: function useClientRegisterView(view, options2) {
-      useTailorRootContext("useRegisterView", client);
-      useRegisterView(view, options2);
+    useViewContext: function useClientViewContext(view, options2) {
+      useTailorRootContext("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";
+import { useEffect as useEffect4, useMemo as useMemo8, useState } from "react";
+import { createTailorKitStore, toBaseUrl } from "@tailorkit/client-core";
 
 // src/components/render.tsx
 import { cloneElement, createElement as createElement3, isValidElement, useMemo as useMemo7 } from "react";
@@ -878,8 +360,8 @@ function isEventHandler(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(() => ({
+  const baseUrl = toBaseUrl(client.baseUrl).toString();
+  const [previous, setStore] = useState(() => ({
     store: createTailorKitStore(baseUrl, appsProp, client.fetchClient),
     fetchClient: client.fetchClient
   }));
@@ -889,10 +371,10 @@ function Root({ apps: appsProp, children, render, client, ...props }) {
     store = createTailorKitStore(baseUrl, appsProp, client.fetchClient);
     setStore({ store, fetchClient: client.fetchClient });
   }
-  useEffect6(() => {
+  useEffect4(() => {
     store.setProvidedApps(appsProp);
   }, [store, appsProp]);
-  useEffect6(() => () => store.previews.dispose(), [store]);
+  useEffect4(() => () => store.previews.dispose(), [store]);
   const context = useMemo8(
     () => ({
       store,

package/dist/primitives.d.ts

@@ -1,12 +1,11 @@
 import type { CSSProperties, ReactNode } from "react";
 import type { TailorKitTheme } from "@tailorkit/core/schema";
-type PrimitiveProps = Record<string, unknown>;
+import type { PrimitiveProps } from "@tailorkit/client-core";
 interface PrimitiveThemeContextValue {
     viewId: string;
     theme: TailorKitTheme;
 }
 export declare const PrimitiveThemeContext: import("react").Context<PrimitiveThemeContextValue | null>;
-export declare const buildThemeCss: (viewId: string, theme: TailorKitTheme) => string;
 export declare const primitives: {
     readonly Box: ({ props, children }: {
         props: PrimitiveProps;

package/dist/tailorkit.d.ts

@@ -1,81 +1,32 @@
-import type { TailorKitFetchClient, TailorKitCacheOptions } from "@tailorkit/client-core";
+import type { AnyComponentDefinition, ComponentRenderer, ComponentRenderers, CompleteComponentRenderers, TailorKitClientConfig, TailorKitServerShape, ServerComponents, ServerViews, ServerSlots, ServerScopeNames, SlotMultiple } from "@tailorkit/client-core";
+export type { TailorKitClientConfig } from "@tailorkit/client-core";
+import type { TailorKitCacheOptions } from "@tailorkit/client-core";
 import type { ReactNode } from "react";
-import type { TailorKitTheme, CallbackMap, ComponentDefinition, ComponentProps, Schema, ViewDefinition, SlotDefinitions, TailorKitSchema } from "@tailorkit/core/schema";
+import type { TailorKitTheme, ViewDefinition, SlotDefinitions, TailorKitSchema } from "@tailorkit/core/schema";
 import type { primitives } from "./primitives";
-import type { UseRegisterView } from "./hooks/use-register-view";
+import type { UseViewContext } from "./hooks/use-view-context";
 import type { UseAppsOptions, UseAppsResult } from "./hooks/use-apps";
-import type { UseSlotOptions, UseSlotResult } from "./hooks/use-slot";
+import type { UseViewsOptions, UseViewsResult } from "./hooks/use-views";
 import type { SlotComponent } from "./components/slot";
-type AnyComponentDefinition = ComponentDefinition<Schema | undefined, CallbackMap, boolean | undefined>;
-type ComponentRenderer<TComponent extends AnyComponentDefinition> = (args: {
-    props: ComponentProps<TComponent>;
-    children?: TComponent extends {
-        children: true;
-    } ? ReactNode : never;
-}) => ReactNode;
-type ComponentRenderers<TComponents extends Record<string, AnyComponentDefinition>> = {
-    [TName in keyof TComponents]?: ComponentRenderer<TComponents[TName]>;
-};
-type CompleteComponentRenderers<TComponents extends Record<string, AnyComponentDefinition>> = {
-    [TName in keyof TComponents]-?: ComponentRenderer<TComponents[TName]>;
-};
 export type { TailorKitApp } from "@tailorkit/client-core";
-export interface TailorKitClientConfig {
-    readonly baseUrl: string | URL;
-    readonly fetchClient?: TailorKitFetchClient;
-    readonly components: Record<string, unknown>;
-    readonly theme: TailorKitTheme;
-}
 export interface TailorKitInstance<TViews extends Record<string, ViewDefinition> = Record<string, ViewDefinition>, TSlots extends SlotDefinitions = SlotDefinitions, TScopeNames extends string = string> extends TailorKitClientConfig {
     readonly $slots?: TSlots;
     readonly $views?: TViews;
     readonly Slot: SlotComponent<TViews, TSlots>;
     readonly useApps: (options?: UseAppsOptions<TScopeNames>) => UseAppsResult;
-    readonly useSlot: <TSlot extends keyof TSlots & string>(options: UseSlotOptions<TScopeNames, TSlot>) => UseSlotResult<SlotMultiple<TSlots[TSlot]>>;
-    readonly useRegisterView: UseRegisterView<TViews>;
+    readonly useViews: <TSlot extends keyof TSlots & string>(options: UseViewsOptions<TScopeNames, TSlot>) => UseViewsResult<SlotMultiple<TSlots[TSlot]>>;
+    readonly useViewContext: UseViewContext<TViews>;
 }
-type SlotMultiple<TSlot> = TSlot extends {
-    multiple: infer TMultiple extends boolean;
-} ? TMultiple : TSlot extends {
-    multiple?: infer TMultiple extends boolean;
-} ? TMultiple | false : false;
 type PrimitiveRenderers = typeof primitives;
 type CustomComponentRenderers<TComponents extends Record<string, AnyComponentDefinition>> = {
-    [TName in Exclude<keyof TComponents, keyof PrimitiveRenderers>]?: ComponentRenderer<TComponents[TName]>;
-};
-export declare function components<TComponents extends Record<string, AnyComponentDefinition>>(_schema: TailorKitSchema<TComponents, Record<string, ViewDefinition>>, customComponents: CustomComponentRenderers<TComponents>): ComponentRenderers<TComponents>;
-interface TailorKitServerShape {
-    $internal: {
-        schema: {
-            components: Record<string, unknown>;
-            views: Record<string, unknown>;
-        };
-    };
-}
-type ServerComponentMap<TTailor extends TailorKitServerShape> = TTailor["$internal"]["schema"]["components"];
-type ServerComponents<TTailor extends TailorKitServerShape> = {
-    [TName in keyof ServerComponentMap<TTailor>]: ServerComponentMap<TTailor>[TName] extends AnyComponentDefinition ? ServerComponentMap<TTailor>[TName] : never;
-};
-type ServerViewMap<TTailor extends TailorKitServerShape> = TTailor["$internal"]["schema"]["views"];
-type ServerScopeNames<TTailor extends TailorKitServerShape> = TTailor extends {
-    handler: (request: Request, options: infer TOptions) => unknown;
-} ? TOptions extends {
-    authenticate: infer TAuthenticate;
-} ? TAuthenticate extends (...args: infer _TArgs) => infer TResult ? Extract<Awaited<TResult>, {
-    scopes: unknown;
-}> extends {
-    scopes: infer TScopes;
-} ? keyof TScopes & string : never : never : never : never;
-type ServerViews<TTailor extends TailorKitServerShape> = {
-    [TName in keyof ServerViewMap<TTailor>]: ServerViewMap<TTailor>[TName] extends ViewDefinition ? ServerViewMap<TTailor>[TName] : never;
+    [TName in Exclude<keyof TComponents, keyof PrimitiveRenderers>]?: ComponentRenderer<TComponents[TName], ReactNode>;
 };
+export declare function components<TComponents extends Record<string, AnyComponentDefinition>>(_schema: TailorKitSchema<TComponents, Record<string, ViewDefinition>>, customComponents: CustomComponentRenderers<TComponents>): ComponentRenderers<TComponents, ReactNode>;
 export declare function createTailorKitClient<TTailor extends TailorKitServerShape>(options: {
     baseUrl: string | URL;
-    components?: CompleteComponentRenderers<ServerComponents<TTailor>>;
+    components?: CompleteComponentRenderers<ServerComponents<TTailor>, ReactNode>;
     theme?: TailorKitTheme;
     cache?: TailorKitCacheOptions;
     fetch?: typeof fetch;
-}): TailorKitInstance<ServerViews<TTailor>, TTailor extends {
-    readonly $slots?: infer V extends SlotDefinitions;
-} ? V : SlotDefinitions, ServerScopeNames<TTailor>>;
-export type { ViewOptions } from "./hooks/use-register-view";
+}): TailorKitInstance<ServerViews<TTailor>, ServerSlots<TTailor>, ServerScopeNames<TTailor>>;
+export type { ViewOptions } from "./hooks/use-view-context";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailorkit/react",
-  "version": "0.1.0-beta.22",
+  "version": "0.1.0-beta.24",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -22,12 +22,14 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.9",
+    "@nanostores/react": "2.0.1",
     "@standard-schema/spec": "^1.1.0",
-    "@tailorkit/app": "0.1.0-beta.22",
-    "@tailorkit/client-core": "0.1.0-beta.22",
-    "@tailorkit/client-platform": "0.1.0-beta.22",
-    "@tailorkit/core": "0.1.0-beta.22",
-    "@tailorkit/sandbox": "0.1.0-beta.22"
+    "@tailorkit/app": "0.1.0-beta.24",
+    "@tailorkit/client-core": "0.1.0-beta.24",
+    "@tailorkit/client-platform": "0.1.0-beta.24",
+    "@tailorkit/core": "0.1.0-beta.24",
+    "@tailorkit/sandbox": "0.1.0-beta.24",
+    "nanostores": "1.5.4"
   },
   "devDependencies": {
     "@tailorkit/config": "0.0.0",

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

@@ -1,25 +0,0 @@
-import type { StandardJSONSchemaV1 } from "@standard-schema/spec";
-import type { ViewDefinition } from "@tailorkit/core/schema";
-type DefaultViews = Record<`/${string}`, ViewDefinition>;
-export type ViewName<TViews extends Record<string, ViewDefinition>> = keyof TViews & string;
-export type ViewContext<TView> = TView extends StandardJSONSchemaV1 ? StandardJSONSchemaV1.InferOutput<TView> : Record<string, never>;
-interface ReadyViewOptions<TViews extends Record<string, ViewDefinition>, TView extends ViewName<TViews>> {
-    context: ViewContext<TViews[TView]>;
-    view: TView;
-    status?: "ready";
-}
-interface LoadingViewOptions<TView extends string> {
-    context?: never;
-    view: TView;
-    status: "loading";
-}
-interface ErrorViewOptions<TView extends string> {
-    context?: never;
-    view: TView;
-    status: "error";
-}
-export type ViewOptions<TViews extends Record<string, ViewDefinition> = DefaultViews, TView extends ViewName<TViews> = ViewName<TViews>> = TView extends ViewName<TViews> ? ReadyViewOptions<TViews, TView> | LoadingViewOptions<TView> | ErrorViewOptions<TView> : never;
-export type ViewState<TViews extends Record<string, ViewDefinition> = DefaultViews, TView extends ViewName<TViews> = ViewName<TViews>> = Omit<ReadyViewOptions<TViews, TView>, "view"> | Omit<LoadingViewOptions<TView>, "view"> | Omit<ErrorViewOptions<TView>, "view">;
-export type UseRegisterView<TViews extends Record<string, ViewDefinition>> = <TView extends ViewName<TViews>>(view: TView, options: ViewState<TViews, NoInfer<TView>>) => void;
-export declare function useRegisterView<TViews extends Record<string, ViewDefinition> = DefaultViews, TView extends ViewName<TViews> = ViewName<TViews>>(view: TView, options: ViewState<TViews, NoInfer<TView>>): void;
-export {};

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

@@ -1,13 +0,0 @@
-import type { TailorKitApp, SlotItem } from "@tailorkit/client-core";
-import type { UseAppsOptions, UseAppsResult } from "./use-apps";
-export type { SlotItem } from "@tailorkit/client-core";
-export interface UseSlotOptions<TScopeNames extends string = string, TSlot extends string = string> extends UseAppsOptions<TScopeNames> {
-    slot: TSlot;
-}
-export interface UseSlotResult<TMultiple extends boolean = boolean> extends Omit<UseAppsResult, "data"> {
-    data: SlotItem<TMultiple>[] | undefined;
-}
-/** List apps for single-view slots or resolve instances for multiple-view slots. */
-export declare function useSlot({ slot, scopes, appIds }: UseSlotOptions): UseSlotResult;
-/** Managed Slot resolves only its explicitly supplied app. */
-export declare function useAppSlot(app: TailorKitApp, slot: string): UseSlotResult;

package/dist/hooks/use-stable-context.d.ts

@@ -1,2 +0,0 @@
-/** Keep equivalent JSON context values stable without requiring callers to memoize. */
-export declare function useStableContext<T>(value: T): T;

package/dist/remote-context.d.ts

@@ -1,8 +0,0 @@
-import type { HostToIframePayload } from "@tailorkit/sandbox/protocol";
-import type { NodeStore } from "@tailorkit/client-core";
-export interface RemoteViewContext {
-    components: Record<string, unknown>;
-    dispatch: (payload: HostToIframePayload) => void;
-    store: NodeStore;
-}
-export declare const RemoteUIContext: import("react").Context<RemoteViewContext | null>;

package/dist/scope-query.d.ts

@@ -1 +0,0 @@
-export { appendScopeSelection, normalizeScopeSelection } from "@tailorkit/client-core";

package/dist/slot-view.d.ts

@@ -1 +0,0 @@
-export { resolveSlotView, selectSlotView } from "@tailorkit/client-core";