@cratis/scene.react 4.8.0 → 4.10.0

package/index.ts

@@ -5,6 +5,7 @@ export * from './SceneElementView';
 export * from './renderer';
 export * from './core';
 export * from './NavBar';
+export * from './navigation';
 export * from './icons';
 export * from './packages';
 export * from './theme';

package/navigation/DestinationResolution.ts

@@ -0,0 +1,13 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { DestinationKind } from '@cratis/scene.model';
+
+export interface DestinationResolution {
+    kind: DestinationKind;
+    url?: string;
+    outlet?: string;
+    dialog?: string;
+    action: 'navigate' | 'openDialog' | 'openExternal';
+    diagnostics: string[];
+}

package/navigation/index.ts

@@ -0,0 +1,5 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export * from './DestinationResolution';
+export * from './resolveDestination';

package/navigation/resolveDestination.ts

@@ -0,0 +1,50 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { BindingScope, resolveBindingExpression } from '@cratis/scene.engine';
+import { DestinationKind, DestinationReference } from '@cratis/scene.model';
+import { DestinationResolution } from './DestinationResolution';
+
+/**
+ * Resolves a destination into a renderer-neutral navigation action, deep link and target outlet/dialog.
+ */
+export function resolveDestination(destination: DestinationReference, scope: BindingScope = {}): DestinationResolution {
+    const diagnostics: string[] = [];
+    const kind = destination.kind ?? (destination.dialog ? DestinationKind.Dialog : DestinationKind.Outlet);
+    const parameters = Object.entries(destination.routeParameterBindings ?? {})
+        .map(([name, binding]) => [name, String(resolveBindingExpression(binding, scope) ?? '')] as const);
+    const base = destination.route ?? identityRoute(destination);
+    if (!base && kind !== DestinationKind.Dialog) diagnostics.push('Destination has no routeable screen, stable identity or route.');
+
+    const url = base ? appendParameters(base, parameters) : undefined;
+    return {
+        kind,
+        url,
+        outlet: destination.outlet,
+        dialog: destination.dialog,
+        action: kind === DestinationKind.Dialog ? 'openDialog' : kind === DestinationKind.External ? 'openExternal' : 'navigate',
+        diagnostics,
+    };
+}
+
+function identityRoute(destination: DestinationReference): string | undefined {
+    if (destination.screen) return destination.screen;
+    const parts = [destination.module, destination.feature, destination.slice].filter((part): part is string => typeof part === 'string' && part.length > 0);
+    return parts.length ? parts.join('/') : undefined;
+}
+
+function appendParameters(route: string, parameters: readonly (readonly [string, string])[]): string {
+    if (!parameters.length) return route;
+    let replaced = route;
+    const unused: string[] = [];
+    for (const [name, value] of parameters) {
+        const marker = `{${name}}`;
+        if (replaced.includes(marker)) {
+            replaced = replaced.split(marker).join(encodeURIComponent(value));
+        } else {
+            unused.push(`${encodeURIComponent(name)}=${encodeURIComponent(value)}`);
+        }
+    }
+
+    return unused.length ? `${replaced}?${unused.join('&')}` : replaced;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cratis/scene.react",
-    "version": "4.8.0",
+    "version": "4.10.0",
     "description": "The React renderer implementing Scene.Engine's Renderer contract against real React/DOM.",
     "keywords": [
         "cratis",
@@ -51,12 +51,12 @@
         "build-storybook": "storybook build"
     },
     "dependencies": {
-        "@cratis/scene.engine": "4.8.0",
-        "@cratis/scene.model": "4.8.0"
+        "@cratis/scene.engine": "4.10.0",
+        "@cratis/scene.model": "4.10.0"
     },
     "devDependencies": {
-        "@cratis/scene.engine": "4.8.0",
-        "@cratis/scene.model": "4.8.0",
+        "@cratis/scene.engine": "4.10.0",
+        "@cratis/scene.model": "4.10.0",
         "@storybook/addon-links": "^10.6.1",
         "@storybook/react": "^10.6.1",
         "@storybook/react-vite": "^10.6.1",

package/packages/DesignTimeAction.ts

@@ -0,0 +1,24 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { DesignTimeActionDescriptor, SceneEdit } from '@cratis/scene.model';
+import { DesignTimeContext } from './DesignTimeContext';
+
+export interface DesignTimeActionContext extends DesignTimeContext {
+    commandMetadata?: { properties: { name: string; type: string; label?: string }[] };
+}
+
+export interface DesignTimeActionResult {
+    edits: SceneEdit[];
+    diagnostics: string[];
+}
+
+/**
+ * Executable package-owned design-time action. Hosts apply the returned edit batch through their own undo/redo.
+ */
+export interface DesignTimeAction {
+    descriptor: DesignTimeActionDescriptor;
+    isVisible(context: DesignTimeActionContext): boolean;
+    isEnabled(context: DesignTimeActionContext): boolean;
+    execute(context: DesignTimeActionContext): DesignTimeActionResult;
+}

package/packages/DesignTimeBundle.ts

@@ -0,0 +1,30 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ComponentType } from 'react';
+import { DesignTimeAction } from './DesignTimeAction';
+import { DesignTimeComponentProps } from './DesignTimeComponentProps';
+import { DesignTimePropertyDisplayProps } from './DesignTimePropertyDisplayProps';
+import { DesignTimePropertyEditorProps } from './DesignTimePropertyEditorProps';
+
+/**
+ * Optional React-only design-time surface a package may publish beside its runtime bundle.
+ */
+export interface DesignTimeBundle {
+    previews?: Record<string, ComponentType<DesignTimeComponentProps>>;
+    designers?: Record<string, ComponentType<DesignTimeComponentProps>>;
+    propertyEditors?: Record<string, ComponentType<DesignTimePropertyEditorProps>>;
+    propertyDisplays?: Record<string, ComponentType<DesignTimePropertyDisplayProps>>;
+    actions?: Record<string, DesignTimeAction>;
+}
+
+export function validateDesignTimeBundle(bundle: DesignTimeBundle | undefined): string[] {
+    if (!bundle) return [];
+    const problems: string[] = [];
+    for (const [name, action] of Object.entries(bundle.actions ?? {})) {
+        if (action.descriptor.id !== name) {
+            problems.push(`registers design-time action '${name}' with descriptor id '${action.descriptor.id}'`);
+        }
+    }
+    return problems;
+}

package/packages/DesignTimeComponentProps.ts

@@ -0,0 +1,11 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { DesignTimeContext } from './DesignTimeContext';
+
+/**
+ * Props for a package-provided preview or full component designer.
+ */
+export interface DesignTimeComponentProps {
+    context: DesignTimeContext;
+}

package/packages/DesignTimeContext.ts

@@ -0,0 +1,32 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import {
+    ComponentDescriptor,
+    EffectiveConfiguration,
+    ExternalComponent,
+    SceneEdit,
+    SceneElement,
+    Screen,
+    UiProfile,
+} from '@cratis/scene.model';
+import { BindingDiagnostic } from '@cratis/scene.engine';
+import { ScenePackageBundle } from './ScenePackageBundle';
+
+/**
+ * Canonical Scene state and host capabilities a package-side design-time contribution may read and edit.
+ */
+export interface DesignTimeContext {
+    element: ExternalComponent;
+    root: SceneElement;
+    screen?: Screen;
+    descriptor: ComponentDescriptor;
+    configuration?: EffectiveConfiguration;
+    profile: UiProfile;
+    bundles: ScenePackageBundle[];
+    permissions: Record<string, boolean>;
+    capabilities: Record<string, boolean>;
+    diagnostics: BindingDiagnostic[];
+    submitEdits(edits: SceneEdit[]): void;
+    submitAction(actionId: string, edits: SceneEdit[]): void;
+}

package/packages/DesignTimePropertyDisplayProps.ts

@@ -0,0 +1,14 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { PropertyDescriptor } from '@cratis/scene.model';
+import { DesignTimeContext } from './DesignTimeContext';
+
+/**
+ * Props for a package-provided read-only property display renderer.
+ */
+export interface DesignTimePropertyDisplayProps {
+    context: DesignTimeContext;
+    property: PropertyDescriptor;
+    value: unknown;
+}

package/packages/DesignTimePropertyEditorProps.ts

@@ -0,0 +1,15 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { PropertyDescriptor } from '@cratis/scene.model';
+import { DesignTimeContext } from './DesignTimeContext';
+
+/**
+ * Props for a package-provided property editor that writes canonical Scene edits.
+ */
+export interface DesignTimePropertyEditorProps {
+    context: DesignTimeContext;
+    property: PropertyDescriptor;
+    value: unknown;
+    setValue(value: unknown): void;
+}

package/packages/DesignTimeProvider.tsx

@@ -0,0 +1,25 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ReactNode, createContext, useContext } from 'react';
+import { DesignTimeContext } from './DesignTimeContext';
+
+const Context = createContext<DesignTimeContext | undefined>(undefined);
+
+export interface DesignTimeProviderProps {
+    context: DesignTimeContext;
+    children: ReactNode;
+}
+
+/**
+ * Makes the generic package-side design-time context available to nested package components.
+ */
+export function DesignTimeProvider({ context, children }: DesignTimeProviderProps) {
+    return <Context.Provider value={context}>{children}</Context.Provider>;
+}
+
+export function useDesignTimeContext(): DesignTimeContext {
+    const context = useContext(Context);
+    if (!context) throw new Error('No Scene design-time context is available.');
+    return context;
+}

package/packages/PackageHostConfiguration.ts

@@ -0,0 +1,98 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { DialogTemplate, Layout, ScreenTemplate, Theme, UiProfile } from '@cratis/scene.model';
+import { resolvePackageDependencies } from '@cratis/scene.engine';
+import { IconAdapterRegistry, createIconAdapterRegistry } from '../icons/IconAdapterRegistry';
+import { ScenePackageBundle, mergePackageRegistries, validatePackageBundle } from './ScenePackageBundle';
+
+export interface PackageHostPolicy {
+    allowExecutableImports: boolean;
+    allowNetworkAssets: boolean;
+}
+
+export interface PackageHostConfiguration {
+    bundles: ScenePackageBundle[];
+    profile: UiProfile;
+    policy: PackageHostPolicy;
+}
+
+export interface ResolvedPackageHost {
+    bundles: ScenePackageBundle[];
+    components: ReturnType<typeof mergePackageRegistries>;
+    layouts: Layout[];
+    screenTemplates: ScreenTemplate[];
+    dialogTemplates: DialogTemplate[];
+    themes: Theme[];
+    icons: IconAdapterRegistry;
+    assets: string[];
+    diagnostics: string[];
+}
+
+/**
+ * Resolves the approved package set a standalone or embedded React host uses.
+ */
+export function resolvePackageHost(configuration: PackageHostConfiguration): ResolvedPackageHost {
+    const diagnostics: string[] = [];
+    const names = new Map<string, number>();
+    for (const bundle of configuration.bundles) {
+        names.set(bundle.manifest.name, (names.get(bundle.manifest.name) ?? 0) + 1);
+    }
+
+    for (const [name, count] of names) {
+        if (count > 1) diagnostics.push(`Package '${name}' is approved more than once; duplicate bundles are ambiguous`);
+    }
+
+    const byName = new Map(configuration.bundles.map(bundle => [bundle.manifest.name, bundle]));
+    const selection = resolvePackageDependencies(configuration.profile.packages, configuration.bundles.map(bundle => bundle.manifest));
+    for (const missing of selection.missing) diagnostics.push(`Package '${missing.package}' depends on missing package '${missing.dependsOn}'`);
+    for (const conflict of selection.versionConflicts) {
+        diagnostics.push(`Package '${conflict.package}' requires '${conflict.dependsOn}' ${conflict.requiredRange} but approved version is ${conflict.actualVersion}`);
+    }
+    for (const cycle of selection.cycles) diagnostics.push(`Package dependency cycle: ${cycle.join(' -> ')}`);
+
+    const bundles: ScenePackageBundle[] = [];
+    const runtimeSingletons = new Map<string, string>();
+    const assets: string[] = [];
+
+    for (const packageName of selection.packages) {
+        const bundle = byName.get(packageName);
+        if (!bundle) {
+            diagnostics.push(`UI profile asks for '${packageName}' but the host did not approve a bundle for it`);
+            continue;
+        }
+
+        diagnostics.push(...validatePackageBundle(bundle).map(problem => `${packageName}: ${problem}`));
+        if (!configuration.policy.allowExecutableImports && bundle.designTime) {
+            diagnostics.push(`Package '${packageName}' provides executable design-time contributions, but host policy forbids them`);
+        }
+
+        const packageAssets = bundle.manifest.assets ?? [];
+        if (!configuration.policy.allowNetworkAssets && packageAssets.some(asset => /^https?:\/\//.test(asset))) {
+            diagnostics.push(`Package '${packageName}' declares network assets, but host policy forbids them`);
+        }
+        assets.push(...packageAssets);
+
+        for (const dependency of bundle.manifest.runtimeSingletons ?? []) {
+            const owner = runtimeSingletons.get(dependency);
+            if (owner && owner !== packageName) {
+                diagnostics.push(`Runtime singleton '${dependency}' is provided by both '${owner}' and '${packageName}'`);
+            }
+            runtimeSingletons.set(dependency, packageName);
+        }
+
+        bundles.push(bundle);
+    }
+
+    return {
+        bundles,
+        components: mergePackageRegistries(bundles),
+        layouts: bundles.flatMap(bundle => bundle.layouts ?? []),
+        screenTemplates: bundles.flatMap(bundle => bundle.screenTemplates ?? []),
+        dialogTemplates: bundles.flatMap(bundle => bundle.dialogTemplates ?? []),
+        themes: bundles.flatMap(bundle => bundle.themes ?? []),
+        icons: createIconAdapterRegistry(bundles.map(bundle => bundle.iconLibrary?.adapter).filter(adapter => adapter !== undefined)),
+        assets,
+        diagnostics,
+    };
+}

package/packages/ScenePackageBundle.ts

@@ -6,6 +6,7 @@ import { IconAdapterRegistry, createIconAdapterRegistry } from '../icons/IconAda
 import { IconLibraryBundle } from '../icons/IconLibraryBundle';
 import { ComponentRegistry } from '../renderer';
 import { ComponentsUiLibraryContract, validateComponentsUiLibraryContract } from './ComponentsUiLibraryContract';
+import { DesignTimeBundle, validateDesignTimeBundle } from './DesignTimeBundle';
 
 /**
  * What a package actually ships to a React renderer, as opposed to what it *declares*.
@@ -77,6 +78,9 @@ export interface ScenePackageBundle {
      * authored; hosts check the loaded export with validateComponentsUiLibraryMapping before rendering.
      */
     componentsUiLibrary?: ComponentsUiLibraryContract;
+
+    /** Optional React-only design-time tooling. Runtime hosts can omit it entirely. */
+    designTime?: DesignTimeBundle;
 }
 
 /**
@@ -156,6 +160,7 @@ export function validatePackageBundle(bundle: ScenePackageBundle): string[] {
 
     problems.push(...validateIconLibrary(bundle));
     problems.push(...validateDescriptors(bundle));
+    problems.push(...validateDesignTimeBundle(bundle.designTime));
 
     return problems;
 }

package/packages/index.ts

@@ -1,5 +1,14 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+export * from './DesignTimeAction';
+export * from './DesignTimeBundle';
+export * from './DesignTimeComponentProps';
+export * from './DesignTimeContext';
+export * from './DesignTimePropertyDisplayProps';
+export * from './DesignTimePropertyEditorProps';
+export * from './DesignTimeProvider';
+export * from '../navigation';
+export * from './PackageHostConfiguration';
 export * from './ScenePackageBundle';
 export * from './ComponentsUiLibraryContract';

package/renderer/AbortableQueryRunner.ts

@@ -0,0 +1,27 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export type QueryPerformer = (query: string, argumentsValue: unknown, signal: AbortSignal) => Promise<unknown>;
+
+/**
+ * Runs query bindings so a newer argument set aborts and ignores older work.
+ */
+export class AbortableQueryRunner {
+    #controller?: AbortController;
+    #generation = 0;
+
+    async run(query: string, argumentsValue: unknown, performer: QueryPerformer): Promise<unknown | undefined> {
+        this.#controller?.abort();
+        const controller = new AbortController();
+        const generation = ++this.#generation;
+        this.#controller = controller;
+        const result = await performer(query, argumentsValue, controller.signal);
+        return generation === this.#generation && !controller.signal.aborted ? result : undefined;
+    }
+
+    clear(): void {
+        this.#controller?.abort();
+        this.#generation++;
+        this.#controller = undefined;
+    }
+}

package/renderer/BindingOutputContext.tsx

@@ -0,0 +1,69 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ReactNode, createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+
+export interface ComponentBindingOutputs {
+    setOutput(property: string, value: unknown): void;
+    clearOutput(property: string): void;
+    clearAll(): void;
+}
+
+export interface BindingOutputProviderValue {
+    outputs: Record<string, Record<string, unknown>>;
+    outputFor(elementId: string): ComponentBindingOutputs;
+}
+
+const emptyOutputs: ComponentBindingOutputs = {
+    setOutput: () => undefined,
+    clearOutput: () => undefined,
+    clearAll: () => undefined,
+};
+
+const Context = createContext<BindingOutputProviderValue | undefined>(undefined);
+
+export interface BindingOutputProviderProps {
+    children: ReactNode;
+    onOutputsChanged?: (outputs: Record<string, Record<string, unknown>>) => void;
+}
+
+/**
+ * Tracks component output properties for typed component-property bindings and clears them with component lifecycle.
+ */
+export function BindingOutputProvider({ children, onOutputsChanged }: BindingOutputProviderProps) {
+    const [outputs, setOutputs] = useState<Record<string, Record<string, unknown>>>({});
+
+    useEffect(() => {
+        onOutputsChanged?.(outputs);
+    }, [onOutputsChanged, outputs]);
+
+    const outputFor = useCallback((elementId: string): ComponentBindingOutputs => ({
+        setOutput: (property: string, propertyValue: unknown) => setOutputs(current => ({
+            ...current,
+            [elementId]: { ...(current[elementId] ?? {}), [property]: propertyValue },
+        })),
+        clearOutput: (property: string) => setOutputs(current => {
+            const elementOutputs = { ...(current[elementId] ?? {}) };
+            delete elementOutputs[property];
+            return { ...current, [elementId]: elementOutputs };
+        }),
+        clearAll: () => setOutputs(current => {
+            const next = { ...current };
+            delete next[elementId];
+            return next;
+        }),
+    }), []);
+
+    const value = useMemo<BindingOutputProviderValue>(() => ({ outputs, outputFor }), [outputs, outputFor]);
+
+    return <Context.Provider value={value}>{children}</Context.Provider>;
+}
+
+export function useBindingOutputs(elementId: string): ComponentBindingOutputs {
+    const outputFor = useContext(Context)?.outputFor;
+    return useMemo(() => outputFor?.(elementId) ?? emptyOutputs, [outputFor, elementId]);
+}
+
+export function useBindingOutputScope(): Record<string, Record<string, unknown>> {
+    return useContext(Context)?.outputs ?? {};
+}

package/renderer/ComponentRegistry.ts

@@ -4,6 +4,7 @@
 import { ComponentType, ReactNode } from 'react';
 import { ExternalComponent } from '@cratis/scene.model';
 import { InteractionHandlers } from '../interactions';
+import { ComponentBindingOutputs } from './BindingOutputContext';
 
 /**
  * The props every registered component receives.
@@ -21,6 +22,9 @@ export interface RegisteredComponentProps {
      * specification, or a gallery. Spreading it is safe either way.
      */
     interactions?: InteractionHandlers;
+
+    /** Component output property writer for typed element-to-element bindings. */
+    bindingOutputs?: ComponentBindingOutputs;
 }
 
 /**

package/renderer/InteractiveComponent.tsx

@@ -1,10 +1,12 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { ComponentType, ReactNode, createElement } from 'react';
-import { ExternalComponent } from '@cratis/scene.model';
+import { ComponentType, ReactNode, createElement, useEffect, useMemo } from 'react';
+import { BindingExpression, ExternalComponent } from '@cratis/scene.model';
 import { useInteractions } from '../interactions';
+import { useBindingOutputs } from './BindingOutputContext';
 import { RegisteredComponentProps } from './ComponentRegistry';
+import { useRenderBindingResolver } from './RenderBindingScopeContext';
 
 export interface InteractiveComponentProps {
     component: ComponentType<RegisteredComponentProps>;
@@ -21,5 +23,30 @@ export interface InteractiveComponentProps {
  */
 export function InteractiveComponent({ component, element, slots }: InteractiveComponentProps) {
     const interactions = useInteractions(element.id, element.behaviors);
-    return createElement(component, { element, slots, interactions });
+    const bindingOutputs = useBindingOutputs(element.id);
+    const resolveBinding = useRenderBindingResolver();
+    const resolvedElement = useMemo(() => ({
+        ...element,
+        properties: resolveProperties(element.properties, resolveBinding),
+    }), [element, resolveBinding]);
+    useEffect(() => () => bindingOutputs.clearAll(), [element.id]);
+    return createElement(component, { element: resolvedElement, slots, interactions, bindingOutputs });
+}
+
+function resolveProperties(properties: Record<string, unknown>, resolveBinding: (binding: BindingExpression) => unknown): Record<string, unknown> {
+    return Object.fromEntries(Object.entries(properties).map(([name, value]) => [name, resolveValue(value, resolveBinding)]));
+}
+
+function resolveValue(value: unknown, resolveBinding: (binding: BindingExpression) => unknown): unknown {
+    if (isBindingExpression(value)) return resolveBinding(value);
+    if (Array.isArray(value)) return value.map(entry => resolveValue(entry, resolveBinding));
+    if (value !== null && typeof value === 'object') {
+        return Object.fromEntries(Object.entries(value as Record<string, unknown>).map(([name, entry]) => [name, resolveValue(entry, resolveBinding)]));
+    }
+
+    return value;
+}
+
+function isBindingExpression(value: unknown): value is BindingExpression {
+    return value !== null && typeof value === 'object' && !Array.isArray(value) && typeof (value as Record<string, unknown>).path === 'string';
 }

package/renderer/RenderBindingScopeContext.tsx

@@ -0,0 +1,73 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ReactNode, createContext, useCallback, useContext, useMemo, useRef } from 'react';
+import { BindingResolver, BindingScope, resolveBindingExpression } from '@cratis/scene.engine';
+import { BindingExpression, BindingNullBehavior } from '@cratis/scene.model';
+import { BindingOutputProvider, useBindingOutputScope } from './BindingOutputContext';
+
+interface RenderBindingScopeValue {
+    resolveBinding: BindingResolver;
+    scope: BindingScope;
+}
+
+const Context = createContext<RenderBindingScopeValue | undefined>(undefined);
+
+export interface RenderBindingScopeProviderProps {
+    children: ReactNode;
+    dataContext?: unknown;
+    queryResults?: Record<string, unknown>;
+    componentOutputs?: Record<string, Record<string, unknown>>;
+    resolveBinding?: BindingResolver;
+    onComponentOutputsChanged?: (outputs: Record<string, Record<string, unknown>>) => void;
+}
+
+/**
+ * Provides the inherited reactive binding scope for a rendered Scene tree.
+ */
+export function RenderBindingScopeProvider(props: RenderBindingScopeProviderProps) {
+    const current = useContext(Context);
+    if (current) return <>{props.children}</>;
+
+    return (
+        <BindingOutputProvider onOutputsChanged={props.onComponentOutputsChanged}>
+            <RenderBindingScopeInner {...props} />
+        </BindingOutputProvider>
+    );
+}
+
+function RenderBindingScopeInner({ children, dataContext, queryResults, componentOutputs, resolveBinding }: RenderBindingScopeProviderProps) {
+    const outputs = useBindingOutputScope();
+    const previousValues = useRef(new Map<string, unknown>());
+    const scope = useMemo<BindingScope>(() => ({
+        dataContext,
+        queryResults,
+        componentOutputs: { ...(componentOutputs ?? {}), ...outputs },
+    }), [componentOutputs, dataContext, outputs, queryResults]);
+
+    const resolver = useCallback<BindingResolver>((binding: BindingExpression) => {
+        if (!binding.kind && resolveBinding) return resolveBinding(binding);
+
+        const key = JSON.stringify(binding);
+        const value = resolveBindingExpression(binding, scope);
+        if (binding.nullBehavior === BindingNullBehavior.Preserve && value === undefined) {
+            return previousValues.current.get(key);
+        }
+
+        if (value !== undefined) previousValues.current.set(key, value);
+        return value;
+    }, [resolveBinding, scope]);
+
+    const value = useMemo<RenderBindingScopeValue>(() => ({ resolveBinding: resolver, scope }), [resolver, scope]);
+    return <Context.Provider value={value}>{children}</Context.Provider>;
+}
+
+export function useRenderBindingResolver(): BindingResolver {
+    const context = useContext(Context);
+    if (!context) throw new Error('No Scene render binding scope is available.');
+    return context.resolveBinding;
+}
+
+export function useRenderBindingScope(): BindingScope {
+    return useContext(Context)?.scope ?? {};
+}

package/renderer/index.ts

@@ -1,7 +1,10 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+export * from './AbortableQueryRunner';
+export * from './BindingOutputContext';
 export * from './ComponentRegistry';
+export * from './RenderBindingScopeContext';
 export * from './UnresolvedComponent';
 export * from './createReactRenderer';
 export * from './InteractiveComponent';