@cratis/scene.react 4.9.0 → 4.11.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/SceneNavigationContext.tsx

@@ -0,0 +1,34 @@
+// 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 { BindingScope } from '@cratis/scene.engine';
+import { DestinationReference } from '@cratis/scene.model';
+import { DestinationResolution } from './DestinationResolution';
+
+export interface SceneNavigationContextValue {
+    currentScreen: string;
+    currentUrl?: string;
+    currentOutlet?: string;
+    currentDialog?: string;
+    bindingScope: BindingScope;
+    navigate(destination: DestinationReference): DestinationResolution;
+    closeDialog(): void;
+}
+
+const Context = createContext<SceneNavigationContextValue | undefined>(undefined);
+
+export interface SceneNavigationProviderProps {
+    value: SceneNavigationContextValue;
+    children: ReactNode;
+}
+
+export function SceneNavigationProvider({ value, children }: SceneNavigationProviderProps) {
+    return <Context.Provider value={value}>{children}</Context.Provider>;
+}
+
+export function useSceneNavigation(): SceneNavigationContextValue {
+    const context = useContext(Context);
+    if (!context) throw new Error('No Scene navigation context is available.');
+    return context;
+}

package/navigation/SceneNavigationHost.tsx

@@ -0,0 +1,67 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useCallback, useMemo, useState } from 'react';
+import { BindingScope } from '@cratis/scene.engine';
+import { DestinationKind, DestinationReference, SceneElement } from '@cratis/scene.model';
+import { SceneElementView } from '../SceneElementView';
+import { ComponentRegistry } from '../renderer';
+import { SceneNavigationContextValue, SceneNavigationProvider } from './SceneNavigationContext';
+import { resolveDestination } from './resolveDestination';
+
+export interface SceneNavigationHostProps {
+    screens: Record<string, SceneElement>;
+    dialogs?: Record<string, SceneElement>;
+    initialScreen: string;
+    registry: ComponentRegistry;
+    bindingScope?: BindingScope;
+}
+
+/**
+ * Executes Scene destinations against an in-memory rendered hierarchy: screen routes replace outlets,
+ * dialog destinations render dialog content, and external destinations only report their resolved action.
+ */
+export function SceneNavigationHost({ screens, dialogs = {}, initialScreen, registry, bindingScope = {} }: SceneNavigationHostProps) {
+    const [currentScreen, setCurrentScreen] = useState(initialScreen);
+    const [currentUrl, setCurrentUrl] = useState<string | undefined>(initialScreen);
+    const [currentOutlet, setCurrentOutlet] = useState<string | undefined>();
+    const [currentDialog, setCurrentDialog] = useState<string | undefined>();
+
+    const navigate = useCallback((destination: DestinationReference) => {
+        const resolution = resolveDestination(destination, bindingScope);
+        if (resolution.kind === DestinationKind.Dialog) {
+            setCurrentDialog(resolution.dialog);
+            return resolution;
+        }
+
+        if (resolution.kind !== DestinationKind.External) {
+            setCurrentScreen(destination.screen ?? destination.slice ?? currentScreen);
+            setCurrentOutlet(resolution.outlet);
+        }
+
+        setCurrentUrl(resolution.url);
+        return resolution;
+    }, [bindingScope, currentScreen]);
+
+    const value = useMemo<SceneNavigationContextValue>(() => ({
+        currentScreen,
+        currentUrl,
+        currentOutlet,
+        currentDialog,
+        bindingScope,
+        navigate,
+        closeDialog: () => setCurrentDialog(undefined),
+    }), [bindingScope, currentDialog, currentOutlet, currentScreen, currentUrl, navigate]);
+
+    const screen = screens[currentScreen];
+    const dialog = currentDialog ? dialogs[currentDialog] : undefined;
+
+    return <SceneNavigationProvider value={value}>
+        <div data-scene-outlet={currentOutlet ?? 'primary'} data-scene-url={currentUrl}>
+            {screen && <SceneElementView element={screen} registry={registry} dataContext={bindingScope.dataContext} queryResults={bindingScope.queryResults} componentOutputs={bindingScope.componentOutputs} />}
+        </div>
+        {dialog && <div role='dialog' data-scene-dialog={currentDialog}>
+            <SceneElementView element={dialog} registry={registry} dataContext={bindingScope.dataContext} queryResults={bindingScope.queryResults} componentOutputs={bindingScope.componentOutputs} />
+        </div>}
+    </SceneNavigationProvider>;
+}

package/navigation/index.ts

@@ -0,0 +1,7 @@
+// 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 './SceneNavigationContext';
+export * from './SceneNavigationHost';
+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.9.0",
+    "version": "4.11.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.9.0",
-        "@cratis/scene.model": "4.9.0"
+        "@cratis/scene.engine": "4.11.0",
+        "@cratis/scene.model": "4.11.0"
     },
     "devDependencies": {
-        "@cratis/scene.engine": "4.9.0",
-        "@cratis/scene.model": "4.9.0",
+        "@cratis/scene.engine": "4.11.0",
+        "@cratis/scene.model": "4.11.0",
         "@storybook/addon-links": "^10.6.1",
         "@storybook/react": "^10.6.1",
         "@storybook/react-vite": "^10.6.1",

package/packages/DesignTimeAction.ts

@@ -1,11 +1,10 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { ComponentDescriptor, DesignTimeActionDescriptor, ExternalComponent, SceneEdit } from '@cratis/scene.model';
+import { DesignTimeActionDescriptor, SceneEdit } from '@cratis/scene.model';
+import { DesignTimeContext } from './DesignTimeContext';
 
-export interface DesignTimeActionContext {
-    element: ExternalComponent;
-    descriptor: ComponentDescriptor;
+export interface DesignTimeActionContext extends DesignTimeContext {
     commandMetadata?: { properties: { name: string; type: string; label?: string }[] };
 }
 

package/packages/DesignTimeBundle.ts

@@ -1,17 +1,20 @@
 // 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 } from 'react';
+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<{ children?: ReactNode }>>;
-    designers?: Record<string, ComponentType<{ children?: ReactNode }>>;
-    propertyEditors?: Record<string, ComponentType<Record<string, unknown>>>;
-    propertyDisplays?: Record<string, ComponentType<{ value: unknown }>>;
+    previews?: Record<string, ComponentType<DesignTimeComponentProps>>;
+    designers?: Record<string, ComponentType<DesignTimeComponentProps>>;
+    propertyEditors?: Record<string, ComponentType<DesignTimePropertyEditorProps>>;
+    propertyDisplays?: Record<string, ComponentType<DesignTimePropertyDisplayProps>>;
     actions?: Record<string, DesignTimeAction>;
 }
 

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/EmbeddedPackageHost.tsx

@@ -0,0 +1,10 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { PackageHostView, PackageHostViewProps } from './PackageHostView';
+import { PackageHostRenderMode } from './PackageHostRenderMode';
+
+/** An embedded package host example surface for application or designer panes. */
+export function EmbeddedPackageHost(props: Omit<PackageHostViewProps, 'mode'>) {
+    return <PackageHostView {...props} mode={PackageHostRenderMode.Embedded} />;
+}

package/packages/PackageHostAssets.tsx

@@ -0,0 +1,18 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export interface PackageHostAssetsProps {
+    assets: string[];
+    fonts: string[];
+}
+
+/**
+ * Emits package-declared browser assets for a package host example.
+ */
+export function PackageHostAssets({ assets, fonts }: PackageHostAssetsProps) {
+    const fontSet = new Set(fonts);
+    return <>
+        {assets.filter(asset => !fontSet.has(asset)).map(asset => <link key={asset} rel='stylesheet' href={asset} data-scene-package-asset={asset} />)}
+        {fonts.map(font => <link key={font} rel='preload' href={font} as='font' crossOrigin='' data-scene-package-font={font} />)}
+    </>;
+}

package/packages/PackageHostConfiguration.ts

@@ -1,12 +1,17 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { UiProfile } from '@cratis/scene.model';
-import { ScenePackageBundle, mergePackageRegistries } from './ScenePackageBundle';
+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;
+
+    /** Whether this host is resolving optional design-time bundles in addition to runtime contributions. */
+    loadDesignTime?: boolean;
 }
 
 export interface PackageHostConfiguration {
@@ -18,6 +23,14 @@ export interface PackageHostConfiguration {
 export interface ResolvedPackageHost {
     bundles: ScenePackageBundle[];
     components: ReturnType<typeof mergePackageRegistries>;
+    layouts: Layout[];
+    screenTemplates: ScreenTemplate[];
+    dialogTemplates: DialogTemplate[];
+    themes: Theme[];
+    icons: IconAdapterRegistry;
+    assets: string[];
+    fonts: string[];
+    blocked: boolean;
     diagnostics: string[];
 }
 
@@ -26,20 +39,44 @@ export interface ResolvedPackageHost {
  */
 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 configuration.profile.packages) {
+    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;
         }
 
-        if (!configuration.policy.allowNetworkAssets && (bundle.manifest.assets ?? []).some(asset => /^https?:\/\//.test(asset))) {
+        diagnostics.push(...validatePackageBundle(bundle).map(problem => `${packageName}: ${problem}`));
+        if (configuration.policy.loadDesignTime === true && !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);
@@ -52,5 +89,25 @@ export function resolvePackageHost(configuration: PackageHostConfiguration): Res
         bundles.push(bundle);
     }
 
-    return { bundles, components: mergePackageRegistries(bundles), diagnostics };
+    const blocked = diagnostics.length > 0;
+    const approved = blocked ? [] : bundles;
+    const approvedAssets = blocked ? [] : assets;
+
+    return {
+        bundles: approved,
+        components: mergePackageRegistries(approved),
+        layouts: approved.flatMap(bundle => bundle.layouts ?? []),
+        screenTemplates: approved.flatMap(bundle => bundle.screenTemplates ?? []),
+        dialogTemplates: approved.flatMap(bundle => bundle.dialogTemplates ?? []),
+        themes: approved.flatMap(bundle => bundle.themes ?? []),
+        icons: createIconAdapterRegistry(approved.map(bundle => bundle.iconLibrary?.adapter).filter(adapter => adapter !== undefined)),
+        assets: approvedAssets,
+        fonts: approvedAssets.filter(isFontAsset),
+        blocked,
+        diagnostics,
+    };
+}
+
+function isFontAsset(asset: string): boolean {
+    return /\.(woff2?|otf|ttf)(\?|$)/.test(asset) || asset.includes('/fonts/');
 }

package/packages/PackageHostRenderMode.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.
+
+/**
+ * The host surface rendering a resolved package profile.
+ */
+export enum PackageHostRenderMode {
+    Standalone = 'standalone',
+    Embedded = 'embedded',
+    WebView = 'webView',
+}

package/packages/PackageHostView.tsx

@@ -0,0 +1,43 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { SceneElement } from '@cratis/scene.model';
+import { SceneElementView } from '../SceneElementView';
+import { PackageHostAssets } from './PackageHostAssets';
+import { PackageHostConfiguration, resolvePackageHost } from './PackageHostConfiguration';
+import { PackageHostRenderMode } from './PackageHostRenderMode';
+
+export interface PackageHostViewProps {
+    configuration: PackageHostConfiguration;
+    element: SceneElement;
+    mode?: PackageHostRenderMode;
+    dataContext?: unknown;
+    queryResults?: Record<string, unknown>;
+    componentOutputs?: Record<string, Record<string, unknown>>;
+}
+
+/**
+ * Renders a Scene element through an approved package host. Diagnostics are blocking: no rejected bundle,
+ * component, asset or design-time contribution is rendered after policy/dependency validation fails.
+ */
+export function PackageHostView({
+    configuration,
+    element,
+    mode = PackageHostRenderMode.Embedded,
+    dataContext,
+    queryResults,
+    componentOutputs,
+}: PackageHostViewProps) {
+    const host = resolvePackageHost(configuration);
+    if (host.blocked) {
+        return <section role='alert' data-scene-host-mode={mode} data-scene-host-blocked='true'>
+            <h2>Scene package host blocked rendering</h2>
+            <ul>{host.diagnostics.map(diagnostic => <li key={diagnostic}>{diagnostic}</li>)}</ul>
+        </section>;
+    }
+
+    return <section data-scene-host-mode={mode} data-scene-host-blocked='false'>
+        <PackageHostAssets assets={host.assets} fonts={host.fonts} />
+        <SceneElementView element={element} registry={host.components} dataContext={dataContext} queryResults={queryResults} componentOutputs={componentOutputs} />
+    </section>;
+}

package/packages/StandalonePackageHost.tsx

@@ -0,0 +1,10 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { PackageHostView, PackageHostViewProps } from './PackageHostView';
+import { PackageHostRenderMode } from './PackageHostRenderMode';
+
+/** A standalone browser package host example surface. */
+export function StandalonePackageHost(props: Omit<PackageHostViewProps, 'mode'>) {
+    return <PackageHostView {...props} mode={PackageHostRenderMode.Standalone} />;
+}

package/packages/WebViewPackageHost.tsx

@@ -0,0 +1,10 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { PackageHostView, PackageHostViewProps } from './PackageHostView';
+import { PackageHostRenderMode } from './PackageHostRenderMode';
+
+/** A constrained webview package host example surface. */
+export function WebViewPackageHost(props: Omit<PackageHostViewProps, 'mode'>) {
+    return <PackageHostView {...props} mode={PackageHostRenderMode.WebView} />;
+}

package/packages/index.ts

@@ -3,6 +3,18 @@
 
 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 './EmbeddedPackageHost';
+export * from './PackageHostAssets';
 export * from './PackageHostConfiguration';
+export * from './PackageHostRenderMode';
+export * from './PackageHostView';
 export * from './ScenePackageBundle';
+export * from './StandalonePackageHost';
+export * from './WebViewPackageHost';
 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;
+    }
+}