@tailorkit/client-core 0.1.0-beta.22 → 0.1.0-beta.24

package/dist/chunk-N4X53WS2.js

@@ -0,0 +1,669 @@
+import {
+  createValueMemo,
+  matchesApp,
+  normalizeScopeSelection,
+  refetchViews
+} from "./chunk-LNGQREZV.js";
+import {
+  createSlotStore,
+  createSnapshotStore,
+  resolveSlotView,
+  selectSlotView,
+  serializeCacheKey,
+  switchStore,
+  toBaseUrl
+} from "./chunk-BLDTSDUG.js";
+
+// src/store/local/node-store.ts
+import { atom, computed } from "nanostores";
+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}:${binding.inputCount}`).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 {
+  state = atom({ nodes: /* @__PURE__ */ new Map(), rootId: null });
+  root = computed(this.state, (snapshot) => snapshot.rootId);
+  signatures = /* @__PURE__ */ new Map();
+  clear() {
+    this.signatures.clear();
+    this.state.set({ nodes: /* @__PURE__ */ new Map(), rootId: null });
+  }
+  setSnapshot(tree) {
+    const previous = this.state.get();
+    const next = /* @__PURE__ */ new Map();
+    flattenTree(tree, next);
+    let changed = previous.rootId !== tree.id || previous.nodes.size !== next.size;
+    for (const [id, node] of next) {
+      const signature = nodeSignature(node);
+      const previousNode = previous.nodes.get(id);
+      if (previousNode && this.signatures.get(id) === signature) {
+        next.set(id, previousNode);
+      } else {
+        changed = true;
+        this.signatures.set(id, signature);
+      }
+    }
+    for (const id of this.signatures.keys()) {
+      if (!next.has(id)) {
+        this.signatures.delete(id);
+      }
+    }
+    if (changed) {
+      this.state.set({ nodes: next, rootId: tree.id });
+    }
+  }
+  getRootId() {
+    return this.state.get().rootId;
+  }
+  getNode(id) {
+    return this.state.get().nodes.get(id) ?? null;
+  }
+  selectNode(id) {
+    return computed(this.state, (snapshot) => snapshot.nodes.get(id) ?? null);
+  }
+  subscribe(id, listener) {
+    const node = this.selectNode(id);
+    return node.listen(listener);
+  }
+  subscribeRoot(listener) {
+    return this.root.listen(listener);
+  }
+};
+
+// src/store/local/remote-view.ts
+import { atom as atom2, batch, computed as computed2 } from "nanostores";
+import { createIframeUiHost } from "@tailorkit/sandbox/host";
+function createRemoteViewStore(options = {}, createHost = createIframeUiHost) {
+  const nodes = new NodeStore();
+  const components = atom2(options.components ?? {});
+  const state = atom2({ status: "starting", error: null, generation: 0 });
+  let props = options.props;
+  let current = null;
+  const stop = (run) => {
+    if (run.stopped) return;
+    run.stopped = true;
+    if (current === run) current = null;
+    run.unsubscribe?.();
+    run.host?.destroy();
+  };
+  const reset = () => {
+    batch(() => {
+      nodes.clear();
+      state.set({ status: "starting", error: null, generation: state.get().generation });
+    });
+  };
+  return {
+    nodes,
+    components,
+    state,
+    selectComponent: (name) => computed2(components, (registry) => registry[name]),
+    setComponents: (registry) => components.set(registry),
+    setProps(next) {
+      props = next;
+      current?.host?.setProps(next);
+    },
+    dispatch(payload) {
+      current?.host?.dispatch(payload);
+    },
+    mount({ appUrl, ...hostOptions }) {
+      if (current) stop(current);
+      const generation = state.get().generation + 1;
+      batch(() => {
+        nodes.clear();
+        state.set({ status: "starting", error: null, generation });
+      });
+      const run = { host: null, unsubscribe: null, stopped: false };
+      current = run;
+      const reportError = (error) => {
+        if (current !== run || run.stopped) return;
+        console.error("TailorKit remote app failed", error);
+        state.set({ status: "error", error, generation });
+      };
+      try {
+        const host = createHost(appUrl, { ...hostOptions, props, onError: reportError });
+        run.host = host;
+        run.unsubscribe = host.subscribe(() => {
+          if (current !== run || run.stopped) return;
+          const tree = host.getSnapshot();
+          if (tree !== null) {
+            batch(() => {
+              nodes.setSnapshot(tree);
+              const previous = state.get();
+              if (previous.status !== "ready") {
+                state.set({ status: "ready", error: null, generation });
+              }
+            });
+          }
+        });
+        host.mount();
+      } catch (error) {
+        reportError(error instanceof Error ? error : new Error(String(error)));
+        stop(run);
+      }
+      return () => {
+        if (current !== run) return;
+        stop(run);
+        reset();
+      };
+    },
+    destroy() {
+      if (current) stop(current);
+      reset();
+    }
+  };
+}
+function createRemoteElementProps(node, dispatch) {
+  const props = { ...node.props };
+  for (const binding of node.callbacks ?? []) {
+    props[binding.callback] = (...args) => {
+      dispatch({
+        type: "dispatchCallback",
+        data: { nodeId: node.id, event: binding.event, args: args.slice(0, binding.inputCount) }
+      });
+    };
+  }
+  return props;
+}
+
+// src/store/local/view-context.ts
+import { atom as atom3 } from "nanostores";
+import { getViewDepth, isViewAncestor } from "@tailorkit/core/views";
+
+// src/store/local/view-context-diagnostics.ts
+import { createViewContextValidator } from "@tailorkit/core/spec";
+function createViewContextDiagnostics() {
+  const validators = /* @__PURE__ */ new WeakMap();
+  return (entry, definition) => {
+    if (entry.status !== "ready" || !definition) return null;
+    const { context, view } = entry;
+    if (context === void 0) {
+      return definition.context && !definition.contextOptional ? {
+        message: `TailorKit view "${view}" is ready without its required context. Supply context or set loading: true while it is unavailable.`
+      } : null;
+    }
+    if (context === null || typeof context !== "object" || Array.isArray(context)) {
+      return {
+        message: `TailorKit view "${view}" requires an object context that matches the view's schema.`
+      };
+    }
+    if (!definition.context) return null;
+    let validation = validators.get(definition.context);
+    if (!validation) {
+      try {
+        validation = { validate: createViewContextValidator(definition.context) };
+      } catch (error) {
+        validation = { error };
+      }
+      validators.set(definition.context, validation);
+    }
+    if ("error" in validation) {
+      return {
+        message: `TailorKit could not validate context for view "${view}" against its JSON Schema.`,
+        details: validation.error
+      };
+    }
+    const issues = validation.validate(context);
+    return issues ? {
+      message: `TailorKit view "${view}" received context that does not match the view's schema.`,
+      details: issues
+    } : null;
+  };
+}
+
+// src/store/local/view-context.ts
+function createViewContextStore(client) {
+  const entries = /* @__PURE__ */ new Map();
+  const state = atom3(null);
+  let nextOrder = 0;
+  let scheduled = false;
+  let metadataScheduled = false;
+  let stopMetadata = null;
+  const metadata = client.meta();
+  const diagnose = createViewContextDiagnostics();
+  const keys = /* @__PURE__ */ new Map();
+  const diagnostics = /* @__PURE__ */ new Map();
+  const check = (entry) => {
+    const definition = metadata.getSnapshot().data?.schema?.views?.[entry.view];
+    const diagnostic = diagnose(entry, definition);
+    if (!diagnostic) {
+      diagnostics.delete(entry.id);
+      return;
+    }
+    const key = JSON.stringify([entry.view, entry.context, diagnostic.message]);
+    if (key !== diagnostics.get(entry.id)) {
+      diagnostics.set(entry.id, key);
+      if (diagnostic.details === void 0) {
+        console.error(diagnostic.message);
+      } else {
+        console.error(diagnostic.message, diagnostic.details);
+      }
+    }
+  };
+  const observeMetadata = () => {
+    if (!stopMetadata) {
+      stopMetadata = metadata.subscribe(() => {
+        for (const entry of entries.values()) check(entry);
+      });
+    }
+    if (metadataScheduled) return;
+    metadataScheduled = true;
+    queueMicrotask(() => {
+      metadataScheduled = false;
+      if (entries.size > 0 && metadata.getSnapshot().status === "idle") {
+        void metadata.fetch();
+      }
+    });
+  };
+  const publish = () => {
+    if (scheduled) {
+      return;
+    }
+    scheduled = true;
+    queueMicrotask(() => {
+      scheduled = false;
+      for (const id of diagnostics.keys()) {
+        if (!entries.has(id)) diagnostics.delete(id);
+      }
+      const ordered = [...entries.values()].toSorted(
+        (a, b) => getViewDepth(b.view) - getViewDepth(a.view) || b.order - a.order
+      );
+      const selected = ordered[0];
+      if (selected) {
+        const peers = ordered.filter(
+          (entry) => getViewDepth(entry.view) === getViewDepth(selected.view)
+        );
+        if (peers.length > 1) {
+          console.warn(
+            `TailorKit found multiple active views at the same hierarchy depth: ${peers.toReversed().map((entry) => `"${entry.view}"`).join(
+              ", "
+            )}. TailorKit selected "${selected.view}" by mount order. Only one route at a hierarchy depth should register a view.`
+          );
+        }
+        state.set({
+          view: selected.view,
+          layers: ordered.filter((entry) => isViewAncestor(entry.view, selected.view)).toReversed().map((entry) => ({ path: entry.view, context: entry.context, status: entry.status }))
+        });
+      } else {
+        state.set(null);
+      }
+    });
+  };
+  return {
+    state,
+    getSnapshot: () => state.get(),
+    subscribe: (listener) => state.listen(listener),
+    register(input) {
+      const status = input.error != null ? "error" : input.loading ? "loading" : "ready";
+      const context = status === "ready" ? input.context : void 0;
+      const key = JSON.stringify({ view: input.view, context, status });
+      if (keys.get(input.id) === key) return;
+      const entry = {
+        id: input.id,
+        view: input.view,
+        context,
+        status,
+        order: entries.get(input.id)?.order ?? nextOrder++
+      };
+      entries.set(input.id, entry);
+      keys.set(input.id, key);
+      observeMetadata();
+      check(entry);
+      publish();
+    },
+    unregister(id) {
+      if (!entries.delete(id)) return;
+      keys.delete(id);
+      if (entries.size === 0) {
+        stopMetadata?.();
+        stopMetadata = null;
+      }
+      publish();
+    }
+  };
+}
+
+// src/store/local/slot-runtime.ts
+import { atom as atom4 } from "nanostores";
+
+// src/store/query.ts
+import { computed as computed3 } from "nanostores";
+function appsQueryKey(options) {
+  return serializeCacheKey([
+    normalizeScopeSelection(options.scopes).key,
+    normalizeScopeSelection(options.appIds).key
+  ]);
+}
+function result(snapshot, refetch) {
+  return {
+    data: snapshot.data,
+    error: snapshot.error,
+    status: snapshot.status,
+    isFetching: snapshot.isFetching,
+    isError: snapshot.status === "error",
+    isLoading: snapshot.status === "loading",
+    isPending: snapshot.status === "idle" || snapshot.status === "loading",
+    isSuccess: snapshot.status === "ready",
+    refetch
+  };
+}
+function createAppsQuery(store, options = {}) {
+  const refetch = () => store.fetchApps({ force: true });
+  let previous;
+  let snapshot;
+  const state = createSnapshotStore(
+    () => {
+      const current = store.fetch.apps.state.get();
+      if (current !== previous) {
+        previous = current;
+        snapshot = result(
+          {
+            ...current,
+            data: current.status === "ready" ? current.apps.filter((app) => matchesApp(app, options.scopes, options.appIds)) : void 0
+          },
+          refetch
+        );
+      }
+      return snapshot;
+    },
+    (listener) => {
+      const stop = store.fetch.apps.state.listen(listener);
+      void store.fetchApps();
+      return stop;
+    }
+  );
+  return { state, refetch, fetch: store.fetchApps };
+}
+function createViewsQuery(store, options) {
+  return viewsQuery(store, options);
+}
+function createAppViewsQuery(store, app, slot) {
+  return viewsQuery(store, { slot }, app);
+}
+function viewsQuery(store, options, app) {
+  let previousKey;
+  let previousError;
+  let selected;
+  let query;
+  const refetch = () => {
+    selection.get();
+    return app ? query.fetch({ force: true }) : refetchViews(store, options);
+  };
+  const selection = computed3(
+    [store.fetch.apps.state, store.fetch.meta.state, store.views.state],
+    (discovery, metadata, active) => {
+      const apps = app ? [app] : discovery.status === "ready" ? discovery.apps.filter(
+        (candidate) => matchesApp(candidate, options.scopes, options.appIds)
+      ) : [];
+      const appsStatus = app ? "ready" : discovery.status;
+      const appsError = app ? null : discovery.error;
+      const activeView = metadata.schema === null || metadata.schema.slots[options.slot]?.multiple === true ? active : null;
+      const key = serializeCacheKey([apps, options.slot, activeView, appsStatus]);
+      if (key !== previousKey || appsError !== previousError) {
+        previousKey = key;
+        previousError = appsError;
+        const slot = createSlotStore(store.client, {
+          apps,
+          slot: options.slot,
+          activeView,
+          appsStatus,
+          appsError
+        });
+        query = slot;
+        let last;
+        let fetching;
+        let snapshot;
+        selected = createSnapshotStore(
+          () => {
+            const current = slot.state.get();
+            const appsFetching = !app && store.fetch.apps.state.get().isFetching;
+            if (current !== last || fetching !== appsFetching) {
+              last = current;
+              fetching = appsFetching;
+              snapshot = result(
+                { ...current, isFetching: appsFetching || current.isFetching },
+                refetch
+              );
+            }
+            return snapshot;
+          },
+          (listener) => {
+            const stopSlot = slot.state.listen(listener);
+            const stopApps = app ? () => {
+            } : store.fetch.apps.state.listen(listener);
+            void slot.fetch();
+            return () => {
+              stopSlot();
+              stopApps();
+            };
+          }
+        );
+      }
+      return selected;
+    }
+  );
+  const source = switchStore(selection);
+  const state = createSnapshotStore(source.get, (listener) => {
+    const stop = source.listen(listener);
+    if (!app) void store.fetchApps();
+    return stop;
+  });
+  return { state, refetch };
+}
+
+// src/store/local/slot-runtime.ts
+var hidden = { status: "hidden" };
+var loading = { status: "loading", message: "Loading view\u2026" };
+var failure = (message) => ({
+  status: "error",
+  error: new Error(message)
+});
+function createSlotRuntime(store, initial) {
+  const memoInput = createValueMemo();
+  const input = atom4(memoInput(initial));
+  let queryKey;
+  let query = null;
+  let previewSession;
+  let preview;
+  let previousSnapshot;
+  let snapshotKey;
+  const getQuery = () => {
+    const options = input.get();
+    if (options.mode !== "managed" || options.instanceKey === void 0 || store.views.state.get() === null)
+      return null;
+    const key = serializeCacheKey([options.app, options.name]);
+    if (key !== queryKey) {
+      queryKey = key;
+      query = createAppViewsQuery(store, options.app, options.name);
+    }
+    return query;
+  };
+  const getPreview = () => {
+    const session = input.get().app.preview?.sessionId ?? "";
+    if (session !== previewSession) {
+      previewSession = session;
+      preview = store.previews.getStore(() => input.get().app);
+    }
+    return preview;
+  };
+  const resolve = () => {
+    const options = input.get();
+    const { app, name } = options;
+    const active = store.views.state.get();
+    let viewState;
+    if (options.mode === "managed") {
+      if (active === null) return hidden;
+      viewState = active;
+      if (options.instanceKey !== void 0) {
+        const instances = getQuery().state.get();
+        if (instances.isPending) return loading;
+        if (instances.error) return { status: "error", error: instances.error };
+        const schema2 = store.fetch.meta.state.get().schema;
+        if (schema2 && schema2.slots[name]?.multiple !== true)
+          return failure(`Slot "${name}" does not support instances.`);
+        const instance = instances.data?.find(
+          (item) => "key" in item && item.key === options.instanceKey
+        );
+        if (!instance) return failure(`View instance "${options.instanceKey}" is unavailable.`);
+        const resolved = instances.isSuccess && schema2 ? resolveSlotView(app.views ?? [], name, active, schema2) : null;
+        if (resolved?.status !== "ready") return hidden;
+        viewState = {
+          controlled: true,
+          view: resolved.view,
+          context: resolved.context,
+          status: "ready",
+          instance: { key: instance.key, metadata: instance.metadata, data: instance.data }
+        };
+      }
+    } else {
+      viewState = {
+        controlled: true,
+        view: options.view,
+        status: options.status,
+        context: options.status === "ready" ? options.context : void 0,
+        ...options.status === "ready" && options.instance ? { instance: options.instance } : {}
+      };
+      if (options.status === "ready" && !options.instance && app.views?.some(
+        (view) => view.slot === name && view.path === options.view && view.instances && !view.disabled
+      )) {
+        return failure("A view instance is required. Pass instance to Slot.Controlled.");
+      }
+    }
+    const metadata = store.fetch.meta.state.get();
+    const source = getPreview().get();
+    const appUrl = app.clientPath ? new URL(app.clientPath, store.baseUrl) : metadata.assetsBaseUrl && app.projectId && app.currentDeployment?.id ? new URL(
+      `projects/${app.projectId}/apps/${app.id}/deployments/${app.currentDeployment.id}/client/client.js`,
+      toBaseUrl(metadata.assetsBaseUrl)
+    ) : null;
+    if (metadata.schema === null || appUrl === null && source.source === null) return hidden;
+    const schema = metadata.schema;
+    const multiple = schema.slots[name]?.multiple === true;
+    if ("controlled" in viewState && viewState.status === "ready") {
+      if (multiple && !viewState.instance)
+        return failure("A view instance is required. Pass instance to Slot.Controlled.");
+      if (!multiple && viewState.instance)
+        return failure(`Slot "${name}" does not support instances.`);
+    }
+    if (!("controlled" in viewState)) {
+      const selected = selectSlotView(app.views ?? [], name, viewState.view, schema);
+      if (selected?.instances && !multiple)
+        return failure(`Slot "${name}" does not support instances.`);
+      if (multiple) return failure("A view instance key is required. Pass instanceKey to Slot.");
+    }
+    return {
+      status: "render",
+      appUrl: (appUrl ?? new URL(`preview/${app.preview?.sessionId ?? ""}/client.js`, store.baseUrl)).toString(),
+      sourceText: source.source ?? void 0,
+      hostKey: source.revision || appUrl?.toString() || `preview/${app.preview?.sessionId ?? ""}`,
+      props: {
+        ...viewState,
+        slot: name,
+        declaredViews: Object.keys(schema.views),
+        supportedViews: schema.slots[name]?.views ?? []
+      },
+      getBackendSession: store.client.endpoints.getSessionProvider(app)
+    };
+  };
+  const state = createSnapshotStore(
+    () => {
+      const snapshot = resolve();
+      const key = snapshot.status === "error" ? JSON.stringify(["error", snapshot.error.message]) : JSON.stringify(snapshot);
+      if (key !== snapshotKey || snapshot.status === "render" && previousSnapshot?.status === "render" && snapshot.getBackendSession !== previousSnapshot.getBackendSession) {
+        snapshotKey = key;
+        previousSnapshot = snapshot;
+      }
+      return previousSnapshot;
+    },
+    (listener) => {
+      let active = true;
+      let updating = false;
+      let queued = false;
+      let requestedMetadata = false;
+      let observedQuery = null;
+      let observedPreview = null;
+      let stopQuery;
+      let stopPreview;
+      const refresh = () => {
+        if (!active) return;
+        if (updating) {
+          queued = true;
+          return;
+        }
+        updating = true;
+        do {
+          queued = false;
+          const nextQuery = getQuery();
+          if (nextQuery !== observedQuery) {
+            const stopPrevious = stopQuery;
+            observedQuery = nextQuery;
+            stopQuery = nextQuery?.state.listen(refresh);
+            stopPrevious?.();
+          }
+          const hasView = input.get().mode === "controlled" || store.views.state.get() !== null;
+          const nextPreview = hasView ? getPreview() : null;
+          if (nextPreview !== observedPreview) {
+            const stopPrevious = stopPreview;
+            observedPreview = nextPreview;
+            stopPreview = nextPreview?.listen(refresh);
+            stopPrevious?.();
+          }
+          if (hasView && !requestedMetadata) {
+            requestedMetadata = true;
+            void store.fetchMeta();
+          } else if (!hasView) {
+            requestedMetadata = false;
+          }
+          listener();
+        } while (queued && active);
+        updating = false;
+      };
+      const stopInput = input.listen(refresh);
+      const stopView = store.views.state.listen(refresh);
+      const stopMeta = store.fetch.meta.state.listen(refresh);
+      refresh();
+      return () => {
+        active = false;
+        stopInput();
+        stopView();
+        stopMeta();
+        stopQuery?.();
+        stopPreview?.();
+      };
+    }
+  );
+  return {
+    state,
+    setInput(options) {
+      store.previews.updateApp(options.app);
+      input.set(memoInput(options));
+    }
+  };
+}
+
+export {
+  createViewContextStore,
+  NodeStore,
+  createRemoteViewStore,
+  createRemoteElementProps,
+  appsQueryKey,
+  createAppsQuery,
+  createViewsQuery,
+  createAppViewsQuery,
+  createSlotRuntime
+};