@cratis/scene.react 4.15.0 → 4.17.0

package/core/ScreenplayCoreComponents.tsx

@@ -1,7 +1,8 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { RegisteredComponentProps } from '../renderer';
+import { resolveArgumentSource } from '@cratis/scene.engine';
+import { RegisteredComponentProps, useRenderBindingScope } from '../renderer';
 
 function textProperty(properties: Record<string, unknown>, name: string, fallback = ''): string {
     return typeof properties[name] === 'string' ? properties[name] : fallback;
@@ -12,11 +13,31 @@ export function CoreData({ element }: RegisteredComponentProps) {
     return <span hidden data-scene-id={element.id} data-scene-data={textProperty(element.properties, 'typeName')} />;
 }
 
-/** Renders a modeled command action and emits a host-neutral command event when invoked. */
+/** One entry of a command action's argument mapping. */
+interface ArgumentMapping {
+    name?: unknown;
+    source?: unknown;
+}
+
+/**
+ * Renders a modeled command action and emits a host-neutral command event when invoked.
+ *
+ * The event carries the resolved `arguments`, by name, read when the action is invoked: a
+ * `component.<id>.<output>` source reads what another element publishes - such as what the user typed into
+ * an input - and any other source is a data-context path. Hosts that read the mapping from `element`
+ * themselves keep working.
+ */
 export function CoreAction({ element }: RegisteredComponentProps) {
     const command = textProperty(element.properties, 'command');
     const label = textProperty(element.properties, 'label', command);
-    const invoke = () => globalThis.dispatchEvent(new CustomEvent('cratis.scene.command', { detail: { command, element } }));
+    const scope = useRenderBindingScope();
+    const invoke = () => {
+        const mapping = Array.isArray(element.properties.arguments) ? element.properties.arguments as ArgumentMapping[] : [];
+        const args = Object.fromEntries(mapping
+            .filter((argument): argument is { name: string; source: string } => typeof argument.name === 'string' && typeof argument.source === 'string')
+            .map(argument => [argument.name, resolveArgumentSource(argument.source, scope)]));
+        globalThis.dispatchEvent(new CustomEvent('cratis.scene.command', { detail: { command, element, arguments: args } }));
+    };
     return <button type='button' data-scene-id={element.id} onClick={invoke}>{label}</button>;
 }
 

package/core/coreComponents.ts

@@ -7,6 +7,7 @@ import { CoreText } from './CoreText';
 import { CoreButton } from './CoreButton';
 import { CoreCard } from './CoreCard';
 import { CoreNavigationBar } from './CoreNavigationBar';
+import { CoreOutlet } from '../navigation/CoreOutlet';
 import {
     CoreAction,
     CoreCode,
@@ -41,4 +42,5 @@ export const coreComponents: ComponentRegistry = {
     [componentRegistryKey('core', 'code')]: CoreCode,
     [componentRegistryKey('core', 'file')]: CoreFile,
     [componentRegistryKey('core', 'navigationBar')]: CoreNavigationBar,
+    [componentRegistryKey('core', 'outlet')]: CoreOutlet,
 };

package/core/coreDescriptors.ts

@@ -53,6 +53,12 @@ export const coreDescriptors: ComponentDescriptor[] = [
             { path: 'label', label: 'Heading', group: 'Content', valueType: PropertyValueType.String },
         ],
     },
+    {
+        component: key('outlet'),
+        displayName: 'Outlet',
+        description: 'A named region another screen opens into. Placing a screen here keeps this screen on the page, and the placed screen may declare outlets of its own.',
+        properties: [{ path: 'name', label: 'Name', group: 'Navigation', valueType: PropertyValueType.String, constraints: { required: true } }],
+    },
     {
         component: key('navigationBar'),
         displayName: 'Navigation bar',

package/core/corePackage.ts

@@ -34,6 +34,7 @@ export const corePackageManifest: ScenePackage = {
         'code',
         'file',
         'navigationBar',
+        'outlet',
     ],
     layouts: [],
     screenTemplates: [],

package/dist/cjs/SceneElementView.js

@@ -4,6 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var scene_engine = require('@cratis/scene.engine');
 var RenderBindingScopeContext = require('./renderer/RenderBindingScopeContext.js');
+require('@cratis/scene.model');
 var createReactRenderer = require('./renderer/createReactRenderer.js');
 require('./interactions/useInteractions.js');
 require('./interactions/NotificationHost.js');

package/dist/cjs/SceneElementView.js.map

@@ -1 +1 @@
-{"version":3,"file":"SceneElementView.js","sources":["../../SceneElementView.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useMemo } from 'react';\nimport { applyEffectiveConfiguration, renderElement, BindingResolver } from '@cratis/scene.engine';\nimport { EffectiveConfiguration, SceneElement } from '@cratis/scene.model';\nimport { ComponentRegistry, RenderBindingScopeProvider, createReactRenderer, useRenderBindingResolver } from './renderer';\n\nexport interface SceneElementViewProps {\n    element: SceneElement;\n    registry: ComponentRegistry;\n    resolveBinding?: BindingResolver;\n    dataContext?: unknown;\n    queryResults?: Record<string, unknown>;\n    componentOutputs?: Record<string, Record<string, unknown>>;\n\n    /**\n     * The resolved configuration of the template chain the element sits in, from `resolveEffectiveConfiguration`.\n     * When given, each configurable component renders with its resolved properties - what a screen's own values add\n     * to an inherited template. It is the same data the editor shows, and the same code path whether the screen is\n     * being edited or played: there is no design-time mode.\n     */\n    configuration?: EffectiveConfiguration;\n\n    /** Called when rendered components publish or clear output properties for typed bindings. */\n    onComponentOutputsChanged?: (outputs: Record<string, Record<string, unknown>>) => void;\n}\n\n/**\n * Renders a Scene element tree with the real `Scene.React` renderer - the WYSIWYG building block Studio's\n * preview surface and Stage's shipped web bundle both consume unmodified.\n */\nexport function SceneElementView({\n    element,\n    registry,\n    resolveBinding,\n    configuration,\n    onComponentOutputsChanged,\n    dataContext,\n    queryResults,\n    componentOutputs,\n}: SceneElementViewProps) {\n    const configured = useMemo(() => configuration ? applyEffectiveConfiguration(element, configuration) : element, [element, configuration]);\n    return (\n        <RenderBindingScopeProvider\n            dataContext={dataContext}\n            queryResults={queryResults}\n            componentOutputs={componentOutputs}\n            resolveBinding={resolveBinding}\n            onComponentOutputsChanged={onComponentOutputsChanged}>\n            <RenderedElement element={configured} registry={registry} />\n        </RenderBindingScopeProvider>\n    );\n}\n\nfunction RenderedElement({ element, registry }: { element: SceneElement; registry: ComponentRegistry }) {\n    const renderer = useMemo(() => createReactRenderer(registry), [registry]);\n    const resolveBinding = useRenderBindingResolver();\n    return <>{renderElement(element, renderer, resolveBinding)}</>;\n}\n"],"names":["SceneElementView","element","registry","resolveBinding","configuration","onComponentOutputsChanged","dataContext","queryResults","componentOutputs","configured","useMemo","applyEffectiveConfiguration","_jsx","RenderBindingScopeProvider","RenderedElement","renderer","createReactRenderer","useRenderBindingResolver","_Fragment","renderElement"],"mappings":";;;;;;;;;;AA4BA;;;AAGC,IACM,SAASA,gBAAAA,CAAiB,EAC7BC,OAAO,EACPC,QAAQ,EACRC,cAAc,EACdC,aAAa,EACbC,yBAAyB,EACzBC,WAAW,EACXC,YAAY,EACZC,gBAAgB,EACI,EAAA;AACpB,IAAA,MAAMC,aAAaC,aAAAA,CAAQ,IAAMN,gBAAgBO,wCAAAA,CAA4BV,OAAAA,EAASG,iBAAiBH,OAAAA,EAAS;AAACA,QAAAA,OAAAA;AAASG,QAAAA;AAAc,KAAA,CAAA;AACxI,IAAA,qBACIQ,cAAA,CAACC,oDAAAA,EAAAA;QACGP,WAAAA,EAAaA,WAAAA;QACbC,YAAAA,EAAcA,YAAAA;QACdC,gBAAAA,EAAkBA,gBAAAA;QAClBL,cAAAA,EAAgBA,cAAAA;QAChBE,yBAAAA,EAA2BA,yBAAAA;AAC3B,QAAA,QAAA,gBAAAO,cAAA,CAACE,eAAAA,EAAAA;YAAgBb,OAAAA,EAASQ,UAAAA;YAAYP,QAAAA,EAAUA;;;AAG5D;AAEA,SAASY,eAAAA,CAAgB,EAAEb,OAAO,EAAEC,QAAQ,EAA0D,EAAA;AAClG,IAAA,MAAMa,QAAAA,GAAWL,aAAAA,CAAQ,IAAMM,uCAAAA,CAAoBd,QAAAA,CAAAA,EAAW;AAACA,QAAAA;AAAS,KAAA,CAAA;AACxE,IAAA,MAAMC,cAAAA,GAAiBc,kDAAAA,EAAAA;IACvB,qBAAOL,cAAA,CAAAM,mBAAA,EAAA;AAAGC,QAAAA,QAAAA,EAAAA,0BAAAA,CAAclB,SAASc,QAAAA,EAAUZ,cAAAA;;AAC/C;;"}
+{"version":3,"file":"SceneElementView.js","sources":["../../SceneElementView.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useMemo } from 'react';\nimport { applyEffectiveConfiguration, renderElement, BindingResolver } from '@cratis/scene.engine';\nimport { EffectiveConfiguration, SceneElement } from '@cratis/scene.model';\nimport { ComponentRegistry, RenderBindingScopeProvider, createReactRenderer, useRenderBindingResolver } from './renderer';\n\nexport interface SceneElementViewProps {\n    element: SceneElement;\n    registry: ComponentRegistry;\n    resolveBinding?: BindingResolver;\n    dataContext?: unknown;\n    queryResults?: Record<string, unknown>;\n    componentOutputs?: Record<string, Record<string, unknown>>;\n\n    /**\n     * The resolved configuration of the template chain the element sits in, from `resolveEffectiveConfiguration`.\n     * When given, each configurable component renders with its resolved properties - what a screen's own values add\n     * to an inherited template. It is the same data the editor shows, and the same code path whether the screen is\n     * being edited or played: there is no design-time mode.\n     */\n    configuration?: EffectiveConfiguration;\n\n    /** Called when rendered components publish or clear output properties for typed bindings. */\n    onComponentOutputsChanged?: (outputs: Record<string, Record<string, unknown>>) => void;\n}\n\n/**\n * Renders a Scene element tree with the real `Scene.React` renderer - the WYSIWYG building block Studio's\n * preview surface and Stage's shipped web bundle both consume unmodified.\n */\nexport function SceneElementView({\n    element,\n    registry,\n    resolveBinding,\n    configuration,\n    onComponentOutputsChanged,\n    dataContext,\n    queryResults,\n    componentOutputs,\n}: SceneElementViewProps) {\n    const configured = useMemo(() => configuration ? applyEffectiveConfiguration(element, configuration) : element, [element, configuration]);\n    return (\n        <RenderBindingScopeProvider\n            dataContext={dataContext}\n            queryResults={queryResults}\n            componentOutputs={componentOutputs}\n            resolveBinding={resolveBinding}\n            onComponentOutputsChanged={onComponentOutputsChanged}>\n            <RenderedElement element={configured} registry={registry} />\n        </RenderBindingScopeProvider>\n    );\n}\n\nfunction RenderedElement({ element, registry }: { element: SceneElement; registry: ComponentRegistry }) {\n    const renderer = useMemo(() => createReactRenderer(registry), [registry]);\n    const resolveBinding = useRenderBindingResolver();\n    return <>{renderElement(element, renderer, resolveBinding)}</>;\n}\n"],"names":["SceneElementView","element","registry","resolveBinding","configuration","onComponentOutputsChanged","dataContext","queryResults","componentOutputs","configured","useMemo","applyEffectiveConfiguration","_jsx","RenderBindingScopeProvider","RenderedElement","renderer","createReactRenderer","useRenderBindingResolver","_Fragment","renderElement"],"mappings":";;;;;;;;;;;AA4BA;;;AAGC,IACM,SAASA,gBAAAA,CAAiB,EAC7BC,OAAO,EACPC,QAAQ,EACRC,cAAc,EACdC,aAAa,EACbC,yBAAyB,EACzBC,WAAW,EACXC,YAAY,EACZC,gBAAgB,EACI,EAAA;AACpB,IAAA,MAAMC,aAAaC,aAAAA,CAAQ,IAAMN,gBAAgBO,wCAAAA,CAA4BV,OAAAA,EAASG,iBAAiBH,OAAAA,EAAS;AAACA,QAAAA,OAAAA;AAASG,QAAAA;AAAc,KAAA,CAAA;AACxI,IAAA,qBACIQ,cAAA,CAACC,oDAAAA,EAAAA;QACGP,WAAAA,EAAaA,WAAAA;QACbC,YAAAA,EAAcA,YAAAA;QACdC,gBAAAA,EAAkBA,gBAAAA;QAClBL,cAAAA,EAAgBA,cAAAA;QAChBE,yBAAAA,EAA2BA,yBAAAA;AAC3B,QAAA,QAAA,gBAAAO,cAAA,CAACE,eAAAA,EAAAA;YAAgBb,OAAAA,EAASQ,UAAAA;YAAYP,QAAAA,EAAUA;;;AAG5D;AAEA,SAASY,eAAAA,CAAgB,EAAEb,OAAO,EAAEC,QAAQ,EAA0D,EAAA;AAClG,IAAA,MAAMa,QAAAA,GAAWL,aAAAA,CAAQ,IAAMM,uCAAAA,CAAoBd,QAAAA,CAAAA,EAAW;AAACA,QAAAA;AAAS,KAAA,CAAA;AACxE,IAAA,MAAMC,cAAAA,GAAiBc,kDAAAA,EAAAA;IACvB,qBAAOL,cAAA,CAAAM,mBAAA,EAAA;AAAGC,QAAAA,QAAAA,EAAAA,0BAAAA,CAAclB,SAASc,QAAAA,EAAUZ,cAAAA;;AAC/C;;"}

package/dist/cjs/core/ScreenplayCoreComponents.js

@@ -1,9 +1,13 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var scene_engine = require('@cratis/scene.engine');
+require('react');
+var RenderBindingScopeContext = require('../renderer/RenderBindingScopeContext.js');
+require('@cratis/scene.model');
+require('../interactions/useInteractions.js');
+require('../interactions/NotificationHost.js');
 
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
 function textProperty(properties, name, fallback = '') {
     return typeof properties[name] === 'string' ? properties[name] : fallback;
 }
@@ -14,15 +18,31 @@ function textProperty(properties, name, fallback = '') {
         "data-scene-data": textProperty(element.properties, 'typeName')
     });
 }
-/** Renders a modeled command action and emits a host-neutral command event when invoked. */ function CoreAction({ element }) {
+/**
+ * Renders a modeled command action and emits a host-neutral command event when invoked.
+ *
+ * The event carries the resolved `arguments`, by name, read when the action is invoked: a
+ * `component.<id>.<output>` source reads what another element publishes - such as what the user typed into
+ * an input - and any other source is a data-context path. Hosts that read the mapping from `element`
+ * themselves keep working.
+ */ function CoreAction({ element }) {
     const command = textProperty(element.properties, 'command');
     const label = textProperty(element.properties, 'label', command);
-    const invoke = ()=>globalThis.dispatchEvent(new CustomEvent('cratis.scene.command', {
+    const scope = RenderBindingScopeContext.useRenderBindingScope();
+    const invoke = ()=>{
+        const mapping = Array.isArray(element.properties.arguments) ? element.properties.arguments : [];
+        const args = Object.fromEntries(mapping.filter((argument)=>typeof argument.name === 'string' && typeof argument.source === 'string').map((argument)=>[
+                argument.name,
+                scene_engine.resolveArgumentSource(argument.source, scope)
+            ]));
+        globalThis.dispatchEvent(new CustomEvent('cratis.scene.command', {
             detail: {
                 command,
-                element
+                element,
+                arguments: args
             }
         }));
+    };
     return /*#__PURE__*/ jsxRuntime.jsx("button", {
         type: "button",
         "data-scene-id": element.id,

package/dist/cjs/core/ScreenplayCoreComponents.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenplayCoreComponents.js","sources":["../../../core/ScreenplayCoreComponents.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { RegisteredComponentProps } from '../renderer';\n\nfunction textProperty(properties: Record<string, unknown>, name: string, fallback = ''): string {\n    return typeof properties[name] === 'string' ? properties[name] : fallback;\n}\n\n/** Carries a Screenplay data declaration without adding visual chrome. */\nexport function CoreData({ element }: RegisteredComponentProps) {\n    return <span hidden data-scene-id={element.id} data-scene-data={textProperty(element.properties, 'typeName')} />;\n}\n\n/** Renders a modeled command action and emits a host-neutral command event when invoked. */\nexport function CoreAction({ element }: RegisteredComponentProps) {\n    const command = textProperty(element.properties, 'command');\n    const label = textProperty(element.properties, 'label', command);\n    const invoke = () => globalThis.dispatchEvent(new CustomEvent('cratis.scene.command', { detail: { command, element } }));\n    return <button type='button' data-scene-id={element.id} onClick={invoke}>{label}</button>;\n}\n\n/** Groups the nested content of a Screenplay section. */\nexport function CoreSection({ element, slots }: RegisteredComponentProps) {\n    const name = textProperty(element.properties, 'name');\n    return <section data-scene-id={element.id}>{name && <h2>{name}</h2>}{slots.content}</section>;\n}\n\n/** Renders navigation intent and emits a host-neutral navigation event. */\nexport function CoreNavigate({ element }: RegisteredComponentProps) {\n    const targetScreen = textProperty(element.properties, 'targetScreen');\n    const navigate = () => globalThis.dispatchEvent(new CustomEvent('cratis.scene.navigate', { detail: { targetScreen, element } }));\n    return <button type='button' data-scene-id={element.id} onClick={navigate}>{targetScreen}</button>;\n}\n\n/** Renders a Screenplay title directive. */\nexport function CoreTitle({ element }: RegisteredComponentProps) {\n    return <h1 data-scene-id={element.id}>{textProperty(element.properties, 'text')}</h1>;\n}\n\n/** Renders the structural shell of a Screenplay table. Query data is supplied by the host. */\nexport function CoreTable({ element, slots }: RegisteredComponentProps) {\n    return <section data-scene-id={element.id} role='table'><header role='row'>{slots.columns}</header></section>;\n}\n\n/** Renders a Screenplay table-column heading. */\nexport function CoreColumn({ element }: RegisteredComponentProps) {\n    const property = textProperty(element.properties, 'property');\n    return <span data-scene-id={element.id} role='columnheader'>{textProperty(element.properties, 'label', property)}</span>;\n}\n\n/** Renders the structural shell of a Screenplay summary. Query data is supplied by the host. */\nexport function CoreSummary({ element, slots }: RegisteredComponentProps) {\n    return <dl data-scene-id={element.id}>{slots.fields}</dl>;\n}\n\n/** Renders a Screenplay summary field label. */\nexport function CoreField({ element }: RegisteredComponentProps) {\n    const property = textProperty(element.properties, 'property');\n    return <dt data-scene-id={element.id}>{textProperty(element.properties, 'label', property)}</dt>;\n}\n\n/** Renders a Screenplay code block. */\nexport function CoreCode({ element }: RegisteredComponentProps) {\n    const language = textProperty(element.properties, 'language');\n    return <pre data-scene-id={element.id}><code data-language={language}>{textProperty(element.properties, 'code')}</code></pre>;\n}\n\n/** Makes an external screen-file reference visible until a host supplies that file. */\nexport function CoreFile({ element }: RegisteredComponentProps) {\n    return <p data-scene-id={element.id}>Screen source: {textProperty(element.properties, 'path')}</p>;\n}\n"],"names":["textProperty","properties","name","fallback","CoreData","element","_jsx","span","hidden","data-scene-id","id","data-scene-data","CoreAction","command","label","invoke","globalThis","dispatchEvent","CustomEvent","detail","button","type","onClick","CoreSection","slots","_jsxs","section","h2","content","CoreNavigate","targetScreen","navigate","CoreTitle","h1","CoreTable","role","header","columns","CoreColumn","property","CoreSummary","dl","fields","CoreField","dt","CoreCode","language","pre","code","data-language","CoreFile","p"],"mappings":"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"}
+{"version":3,"file":"ScreenplayCoreComponents.js","sources":["../../../core/ScreenplayCoreComponents.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { resolveArgumentSource } from '@cratis/scene.engine';\nimport { RegisteredComponentProps, useRenderBindingScope } from '../renderer';\n\nfunction textProperty(properties: Record<string, unknown>, name: string, fallback = ''): string {\n    return typeof properties[name] === 'string' ? properties[name] : fallback;\n}\n\n/** Carries a Screenplay data declaration without adding visual chrome. */\nexport function CoreData({ element }: RegisteredComponentProps) {\n    return <span hidden data-scene-id={element.id} data-scene-data={textProperty(element.properties, 'typeName')} />;\n}\n\n/** One entry of a command action's argument mapping. */\ninterface ArgumentMapping {\n    name?: unknown;\n    source?: unknown;\n}\n\n/**\n * Renders a modeled command action and emits a host-neutral command event when invoked.\n *\n * The event carries the resolved `arguments`, by name, read when the action is invoked: a\n * `component.<id>.<output>` source reads what another element publishes - such as what the user typed into\n * an input - and any other source is a data-context path. Hosts that read the mapping from `element`\n * themselves keep working.\n */\nexport function CoreAction({ element }: RegisteredComponentProps) {\n    const command = textProperty(element.properties, 'command');\n    const label = textProperty(element.properties, 'label', command);\n    const scope = useRenderBindingScope();\n    const invoke = () => {\n        const mapping = Array.isArray(element.properties.arguments) ? element.properties.arguments as ArgumentMapping[] : [];\n        const args = Object.fromEntries(mapping\n            .filter((argument): argument is { name: string; source: string } => typeof argument.name === 'string' && typeof argument.source === 'string')\n            .map(argument => [argument.name, resolveArgumentSource(argument.source, scope)]));\n        globalThis.dispatchEvent(new CustomEvent('cratis.scene.command', { detail: { command, element, arguments: args } }));\n    };\n    return <button type='button' data-scene-id={element.id} onClick={invoke}>{label}</button>;\n}\n\n/** Groups the nested content of a Screenplay section. */\nexport function CoreSection({ element, slots }: RegisteredComponentProps) {\n    const name = textProperty(element.properties, 'name');\n    return <section data-scene-id={element.id}>{name && <h2>{name}</h2>}{slots.content}</section>;\n}\n\n/** Renders navigation intent and emits a host-neutral navigation event. */\nexport function CoreNavigate({ element }: RegisteredComponentProps) {\n    const targetScreen = textProperty(element.properties, 'targetScreen');\n    const navigate = () => globalThis.dispatchEvent(new CustomEvent('cratis.scene.navigate', { detail: { targetScreen, element } }));\n    return <button type='button' data-scene-id={element.id} onClick={navigate}>{targetScreen}</button>;\n}\n\n/** Renders a Screenplay title directive. */\nexport function CoreTitle({ element }: RegisteredComponentProps) {\n    return <h1 data-scene-id={element.id}>{textProperty(element.properties, 'text')}</h1>;\n}\n\n/** Renders the structural shell of a Screenplay table. Query data is supplied by the host. */\nexport function CoreTable({ element, slots }: RegisteredComponentProps) {\n    return <section data-scene-id={element.id} role='table'><header role='row'>{slots.columns}</header></section>;\n}\n\n/** Renders a Screenplay table-column heading. */\nexport function CoreColumn({ element }: RegisteredComponentProps) {\n    const property = textProperty(element.properties, 'property');\n    return <span data-scene-id={element.id} role='columnheader'>{textProperty(element.properties, 'label', property)}</span>;\n}\n\n/** Renders the structural shell of a Screenplay summary. Query data is supplied by the host. */\nexport function CoreSummary({ element, slots }: RegisteredComponentProps) {\n    return <dl data-scene-id={element.id}>{slots.fields}</dl>;\n}\n\n/** Renders a Screenplay summary field label. */\nexport function CoreField({ element }: RegisteredComponentProps) {\n    const property = textProperty(element.properties, 'property');\n    return <dt data-scene-id={element.id}>{textProperty(element.properties, 'label', property)}</dt>;\n}\n\n/** Renders a Screenplay code block. */\nexport function CoreCode({ element }: RegisteredComponentProps) {\n    const language = textProperty(element.properties, 'language');\n    return <pre data-scene-id={element.id}><code data-language={language}>{textProperty(element.properties, 'code')}</code></pre>;\n}\n\n/** Makes an external screen-file reference visible until a host supplies that file. */\nexport function CoreFile({ element }: RegisteredComponentProps) {\n    return <p data-scene-id={element.id}>Screen source: {textProperty(element.properties, 'path')}</p>;\n}\n"],"names":["textProperty","properties","name","fallback","CoreData","element","_jsx","span","hidden","data-scene-id","id","data-scene-data","CoreAction","command","label","scope","useRenderBindingScope","invoke","mapping","Array","isArray","arguments","args","Object","fromEntries","filter","argument","source","map","resolveArgumentSource","globalThis","dispatchEvent","CustomEvent","detail","button","type","onClick","CoreSection","slots","_jsxs","section","h2","content","CoreNavigate","targetScreen","navigate","CoreTitle","h1","CoreTable","role","header","columns","CoreColumn","property","CoreSummary","dl","fields","CoreField","dt","CoreCode","language","pre","code","data-language","CoreFile","p"],"mappings":";;;;;;;;;;AAMA,SAASA,aAAaC,UAAmC,EAAEC,IAAY,EAAEC,WAAW,EAAE,EAAA;IAClF,OAAO,OAAOF,UAAU,CAACC,IAAAA,CAAK,KAAK,QAAA,GAAWD,UAAU,CAACC,IAAAA,CAAK,GAAGC,QAAAA;AACrE;AAEA,2EACO,SAASC,QAAAA,CAAS,EAAEC,OAAO,EAA4B,EAAA;AAC1D,IAAA,qBAAOC,cAAA,CAACC,MAAAA,EAAAA;QAAKC,MAAM,EAAA,IAAA;AAACC,QAAAA,eAAAA,EAAeJ,QAAQK,EAAE;QAAEC,iBAAAA,EAAiBX,YAAAA,CAAaK,OAAAA,CAAQJ,UAAU,EAAE,UAAA;;AACrG;AAQA;;;;;;;AAOC,IACM,SAASW,UAAAA,CAAW,EAAEP,OAAO,EAA4B,EAAA;AAC5D,IAAA,MAAMQ,OAAAA,GAAUb,YAAAA,CAAaK,OAAAA,CAAQJ,UAAU,EAAE,SAAA,CAAA;AACjD,IAAA,MAAMa,KAAAA,GAAQd,YAAAA,CAAaK,OAAAA,CAAQJ,UAAU,EAAE,OAAA,EAASY,OAAAA,CAAAA;AACxD,IAAA,MAAME,KAAAA,GAAQC,+CAAAA,EAAAA;AACd,IAAA,MAAMC,MAAAA,GAAS,IAAA;AACX,QAAA,MAAMC,OAAAA,GAAUC,KAAAA,CAAMC,OAAO,CAACf,QAAQJ,UAAU,CAACoB,SAAS,CAAA,GAAIhB,OAAAA,CAAQJ,UAAU,CAACoB,SAAS,GAAwB,EAAE;QACpH,MAAMC,IAAAA,GAAOC,OAAOC,WAAW,CAACN,QAC3BO,MAAM,CAAC,CAACC,QAAAA,GAA2D,OAAOA,QAAAA,CAASxB,IAAI,KAAK,QAAA,IAAY,OAAOwB,QAAAA,CAASC,MAAM,KAAK,QAAA,CAAA,CACnIC,GAAG,CAACF,CAAAA,QAAAA,GAAY;AAACA,gBAAAA,QAAAA,CAASxB,IAAI;gBAAE2B,kCAAAA,CAAsBH,QAAAA,CAASC,MAAM,EAAEZ,KAAAA;AAAO,aAAA,CAAA,CAAA;AACnFe,QAAAA,UAAAA,CAAWC,aAAa,CAAC,IAAIC,WAAAA,CAAY,sBAAA,EAAwB;YAAEC,MAAAA,EAAQ;AAAEpB,gBAAAA,OAAAA;AAASR,gBAAAA,OAAAA;gBAASgB,SAAAA,EAAWC;AAAK;AAAE,SAAA,CAAA,CAAA;AACrH,IAAA,CAAA;AACA,IAAA,qBAAOhB,cAAA,CAAC4B,QAAAA,EAAAA;QAAOC,IAAAA,EAAK,QAAA;AAAS1B,QAAAA,eAAAA,EAAeJ,QAAQK,EAAE;QAAE0B,OAAAA,EAASnB,MAAAA;AAASH,QAAAA,QAAAA,EAAAA;;AAC9E;AAEA,0DACO,SAASuB,WAAAA,CAAY,EAAEhC,OAAO,EAAEiC,KAAK,EAA4B,EAAA;AACpE,IAAA,MAAMpC,IAAAA,GAAOF,YAAAA,CAAaK,OAAAA,CAAQJ,UAAU,EAAE,MAAA,CAAA;AAC9C,IAAA,qBAAOsC,eAAA,CAACC,SAAAA,EAAAA;AAAQ/B,QAAAA,eAAAA,EAAeJ,QAAQK,EAAE;;AAAGR,YAAAA,IAAAA,kBAAQI,cAAA,CAACmC,IAAAA,EAAAA;AAAIvC,gBAAAA,QAAAA,EAAAA;;AAAYoC,YAAAA,KAAAA,CAAMI;;;AAC/E;AAEA,4EACO,SAASC,YAAAA,CAAa,EAAEtC,OAAO,EAA4B,EAAA;AAC9D,IAAA,MAAMuC,YAAAA,GAAe5C,YAAAA,CAAaK,OAAAA,CAAQJ,UAAU,EAAE,cAAA,CAAA;AACtD,IAAA,MAAM4C,WAAW,IAAMf,UAAAA,CAAWC,aAAa,CAAC,IAAIC,YAAY,uBAAA,EAAyB;YAAEC,MAAAA,EAAQ;AAAEW,gBAAAA,YAAAA;AAAcvC,gBAAAA;AAAQ;AAAE,SAAA,CAAA,CAAA;AAC7H,IAAA,qBAAOC,cAAA,CAAC4B,QAAAA,EAAAA;QAAOC,IAAAA,EAAK,QAAA;AAAS1B,QAAAA,eAAAA,EAAeJ,QAAQK,EAAE;QAAE0B,OAAAA,EAASS,QAAAA;AAAWD,QAAAA,QAAAA,EAAAA;;AAChF;AAEA,6CACO,SAASE,SAAAA,CAAU,EAAEzC,OAAO,EAA4B,EAAA;AAC3D,IAAA,qBAAOC,cAAA,CAACyC,IAAAA,EAAAA;AAAGtC,QAAAA,eAAAA,EAAeJ,QAAQK,EAAE;kBAAGV,YAAAA,CAAaK,OAAAA,CAAQJ,UAAU,EAAE,MAAA;;AAC5E;AAEA,+FACO,SAAS+C,SAAAA,CAAU,EAAE3C,OAAO,EAAEiC,KAAK,EAA4B,EAAA;AAClE,IAAA,qBAAOhC,cAAA,CAACkC,SAAAA,EAAAA;AAAQ/B,QAAAA,eAAAA,EAAeJ,QAAQK,EAAE;QAAEuC,IAAAA,EAAK,OAAA;AAAQ,QAAA,QAAA,gBAAA3C,cAAA,CAAC4C,QAAAA,EAAAA;YAAOD,IAAAA,EAAK,KAAA;AAAOX,YAAAA,QAAAA,EAAAA,KAAAA,CAAMa;;;AACtF;AAEA,kDACO,SAASC,UAAAA,CAAW,EAAE/C,OAAO,EAA4B,EAAA;AAC5D,IAAA,MAAMgD,QAAAA,GAAWrD,YAAAA,CAAaK,OAAAA,CAAQJ,UAAU,EAAE,UAAA,CAAA;AAClD,IAAA,qBAAOK,cAAA,CAACC,MAAAA,EAAAA;AAAKE,QAAAA,eAAAA,EAAeJ,QAAQK,EAAE;QAAEuC,IAAAA,EAAK,cAAA;kBAAgBjD,YAAAA,CAAaK,OAAAA,CAAQJ,UAAU,EAAE,OAAA,EAASoD,QAAAA;;AAC3G;AAEA,iGACO,SAASC,WAAAA,CAAY,EAAEjD,OAAO,EAAEiC,KAAK,EAA4B,EAAA;AACpE,IAAA,qBAAOhC,cAAA,CAACiD,IAAAA,EAAAA;AAAG9C,QAAAA,eAAAA,EAAeJ,QAAQK,EAAE;AAAG4B,QAAAA,QAAAA,EAAAA,KAAAA,CAAMkB;;AACjD;AAEA,iDACO,SAASC,SAAAA,CAAU,EAAEpD,OAAO,EAA4B,EAAA;AAC3D,IAAA,MAAMgD,QAAAA,GAAWrD,YAAAA,CAAaK,OAAAA,CAAQJ,UAAU,EAAE,UAAA,CAAA;AAClD,IAAA,qBAAOK,cAAA,CAACoD,IAAAA,EAAAA;AAAGjD,QAAAA,eAAAA,EAAeJ,QAAQK,EAAE;kBAAGV,YAAAA,CAAaK,OAAAA,CAAQJ,UAAU,EAAE,OAAA,EAASoD,QAAAA;;AACrF;AAEA,wCACO,SAASM,QAAAA,CAAS,EAAEtD,OAAO,EAA4B,EAAA;AAC1D,IAAA,MAAMuD,QAAAA,GAAW5D,YAAAA,CAAaK,OAAAA,CAAQJ,UAAU,EAAE,UAAA,CAAA;AAClD,IAAA,qBAAOK,cAAA,CAACuD,KAAAA,EAAAA;AAAIpD,QAAAA,eAAAA,EAAeJ,QAAQK,EAAE;AAAE,QAAA,QAAA,gBAAAJ,cAAA,CAACwD,MAAAA,EAAAA;YAAKC,eAAAA,EAAeH,QAAAA;sBAAW5D,YAAAA,CAAaK,OAAAA,CAAQJ,UAAU,EAAE,MAAA;;;AAC5G;AAEA,wFACO,SAAS+D,QAAAA,CAAS,EAAE3D,OAAO,EAA4B,EAAA;AAC1D,IAAA,qBAAOkC,eAAA,CAAC0B,GAAAA,EAAAA;AAAExD,QAAAA,eAAAA,EAAeJ,QAAQK,EAAE;;AAAE,YAAA,iBAAA;YAAgBV,YAAAA,CAAaK,OAAAA,CAAQJ,UAAU,EAAE,MAAA;;;AAC1F;;;;;;;;;;;;"}

package/dist/cjs/core/coreComponents.js

@@ -6,6 +6,7 @@ require('@cratis/scene.engine');
 require('@cratis/scene.model');
 require('../interactions/useInteractions.js');
 require('../interactions/NotificationHost.js');
+var CoreOutlet = require('../navigation/CoreOutlet.js');
 var ScenePackageBundle = require('../packages/ScenePackageBundle.js');
 require('../packages/runDesignTimeAction.js');
 var CoreText = require('./CoreText.js');
@@ -34,7 +35,8 @@ var ScreenplayCoreComponents = require('./ScreenplayCoreComponents.js');
     [ScenePackageBundle.componentRegistryKey('core', 'field')]: ScreenplayCoreComponents.CoreField,
     [ScenePackageBundle.componentRegistryKey('core', 'code')]: ScreenplayCoreComponents.CoreCode,
     [ScenePackageBundle.componentRegistryKey('core', 'file')]: ScreenplayCoreComponents.CoreFile,
-    [ScenePackageBundle.componentRegistryKey('core', 'navigationBar')]: CoreNavigationBar.CoreNavigationBar
+    [ScenePackageBundle.componentRegistryKey('core', 'navigationBar')]: CoreNavigationBar.CoreNavigationBar,
+    [ScenePackageBundle.componentRegistryKey('core', 'outlet')]: CoreOutlet.CoreOutlet
 };
 
 exports.coreComponents = coreComponents;

package/dist/cjs/core/coreComponents.js.map

@@ -1 +1 @@
-{"version":3,"file":"coreComponents.js","sources":["../../../core/coreComponents.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { ComponentRegistry } from '../renderer';\nimport { componentRegistryKey } from '../packages';\nimport { CoreText } from './CoreText';\nimport { CoreButton } from './CoreButton';\nimport { CoreCard } from './CoreCard';\nimport { CoreNavigationBar } from './CoreNavigationBar';\nimport {\n    CoreAction,\n    CoreCode,\n    CoreColumn,\n    CoreData,\n    CoreField,\n    CoreFile,\n    CoreNavigate,\n    CoreSection,\n    CoreSummary,\n    CoreTable,\n    CoreTitle,\n} from './ScreenplayCoreComponents';\n\n/**\n * The `core` package's component registry - the final fallback every `ui profile` resolves against\n * regardless of which other packages it lists (Scene#3).\n */\nexport const coreComponents: ComponentRegistry = {\n    [componentRegistryKey('core', 'text')]: CoreText,\n    [componentRegistryKey('core', 'button')]: CoreButton,\n    [componentRegistryKey('core', 'card')]: CoreCard,\n    [componentRegistryKey('core', 'data')]: CoreData,\n    [componentRegistryKey('core', 'action')]: CoreAction,\n    [componentRegistryKey('core', 'section')]: CoreSection,\n    [componentRegistryKey('core', 'navigate')]: CoreNavigate,\n    [componentRegistryKey('core', 'title')]: CoreTitle,\n    [componentRegistryKey('core', 'table')]: CoreTable,\n    [componentRegistryKey('core', 'column')]: CoreColumn,\n    [componentRegistryKey('core', 'summary')]: CoreSummary,\n    [componentRegistryKey('core', 'field')]: CoreField,\n    [componentRegistryKey('core', 'code')]: CoreCode,\n    [componentRegistryKey('core', 'file')]: CoreFile,\n    [componentRegistryKey('core', 'navigationBar')]: CoreNavigationBar,\n};\n"],"names":["coreComponents","componentRegistryKey","CoreText","CoreButton","CoreCard","CoreData","CoreAction","CoreSection","CoreNavigate","CoreTitle","CoreTable","CoreColumn","CoreSummary","CoreField","CoreCode","CoreFile","CoreNavigationBar"],"mappings":";;;;;;;;;;;;;;;;AAAA;AACA;AAsBA;;;UAIaA,cAAAA,GAAoC;IAC7C,CAACC,uCAAAA,CAAqB,MAAA,EAAQ,MAAA,CAAA,GAAUC,iBAAAA;IACxC,CAACD,uCAAAA,CAAqB,MAAA,EAAQ,QAAA,CAAA,GAAYE,qBAAAA;IAC1C,CAACF,uCAAAA,CAAqB,MAAA,EAAQ,MAAA,CAAA,GAAUG,iBAAAA;IACxC,CAACH,uCAAAA,CAAqB,MAAA,EAAQ,MAAA,CAAA,GAAUI,iCAAAA;IACxC,CAACJ,uCAAAA,CAAqB,MAAA,EAAQ,QAAA,CAAA,GAAYK,mCAAAA;IAC1C,CAACL,uCAAAA,CAAqB,MAAA,EAAQ,SAAA,CAAA,GAAaM,oCAAAA;IAC3C,CAACN,uCAAAA,CAAqB,MAAA,EAAQ,UAAA,CAAA,GAAcO,qCAAAA;IAC5C,CAACP,uCAAAA,CAAqB,MAAA,EAAQ,OAAA,CAAA,GAAWQ,kCAAAA;IACzC,CAACR,uCAAAA,CAAqB,MAAA,EAAQ,OAAA,CAAA,GAAWS,kCAAAA;IACzC,CAACT,uCAAAA,CAAqB,MAAA,EAAQ,QAAA,CAAA,GAAYU,mCAAAA;IAC1C,CAACV,uCAAAA,CAAqB,MAAA,EAAQ,SAAA,CAAA,GAAaW,oCAAAA;IAC3C,CAACX,uCAAAA,CAAqB,MAAA,EAAQ,OAAA,CAAA,GAAWY,kCAAAA;IACzC,CAACZ,uCAAAA,CAAqB,MAAA,EAAQ,MAAA,CAAA,GAAUa,iCAAAA;IACxC,CAACb,uCAAAA,CAAqB,MAAA,EAAQ,MAAA,CAAA,GAAUc,iCAAAA;IACxC,CAACd,uCAAAA,CAAqB,MAAA,EAAQ,eAAA,CAAA,GAAmBe;AACrD;;"}
+{"version":3,"file":"coreComponents.js","sources":["../../../core/coreComponents.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { ComponentRegistry } from '../renderer';\nimport { componentRegistryKey } from '../packages';\nimport { CoreText } from './CoreText';\nimport { CoreButton } from './CoreButton';\nimport { CoreCard } from './CoreCard';\nimport { CoreNavigationBar } from './CoreNavigationBar';\nimport { CoreOutlet } from '../navigation/CoreOutlet';\nimport {\n    CoreAction,\n    CoreCode,\n    CoreColumn,\n    CoreData,\n    CoreField,\n    CoreFile,\n    CoreNavigate,\n    CoreSection,\n    CoreSummary,\n    CoreTable,\n    CoreTitle,\n} from './ScreenplayCoreComponents';\n\n/**\n * The `core` package's component registry - the final fallback every `ui profile` resolves against\n * regardless of which other packages it lists (Scene#3).\n */\nexport const coreComponents: ComponentRegistry = {\n    [componentRegistryKey('core', 'text')]: CoreText,\n    [componentRegistryKey('core', 'button')]: CoreButton,\n    [componentRegistryKey('core', 'card')]: CoreCard,\n    [componentRegistryKey('core', 'data')]: CoreData,\n    [componentRegistryKey('core', 'action')]: CoreAction,\n    [componentRegistryKey('core', 'section')]: CoreSection,\n    [componentRegistryKey('core', 'navigate')]: CoreNavigate,\n    [componentRegistryKey('core', 'title')]: CoreTitle,\n    [componentRegistryKey('core', 'table')]: CoreTable,\n    [componentRegistryKey('core', 'column')]: CoreColumn,\n    [componentRegistryKey('core', 'summary')]: CoreSummary,\n    [componentRegistryKey('core', 'field')]: CoreField,\n    [componentRegistryKey('core', 'code')]: CoreCode,\n    [componentRegistryKey('core', 'file')]: CoreFile,\n    [componentRegistryKey('core', 'navigationBar')]: CoreNavigationBar,\n    [componentRegistryKey('core', 'outlet')]: CoreOutlet,\n};\n"],"names":["coreComponents","componentRegistryKey","CoreText","CoreButton","CoreCard","CoreData","CoreAction","CoreSection","CoreNavigate","CoreTitle","CoreTable","CoreColumn","CoreSummary","CoreField","CoreCode","CoreFile","CoreNavigationBar","CoreOutlet"],"mappings":";;;;;;;;;;;;;;;;;AAAA;AACA;AAuBA;;;UAIaA,cAAAA,GAAoC;IAC7C,CAACC,uCAAAA,CAAqB,MAAA,EAAQ,MAAA,CAAA,GAAUC,iBAAAA;IACxC,CAACD,uCAAAA,CAAqB,MAAA,EAAQ,QAAA,CAAA,GAAYE,qBAAAA;IAC1C,CAACF,uCAAAA,CAAqB,MAAA,EAAQ,MAAA,CAAA,GAAUG,iBAAAA;IACxC,CAACH,uCAAAA,CAAqB,MAAA,EAAQ,MAAA,CAAA,GAAUI,iCAAAA;IACxC,CAACJ,uCAAAA,CAAqB,MAAA,EAAQ,QAAA,CAAA,GAAYK,mCAAAA;IAC1C,CAACL,uCAAAA,CAAqB,MAAA,EAAQ,SAAA,CAAA,GAAaM,oCAAAA;IAC3C,CAACN,uCAAAA,CAAqB,MAAA,EAAQ,UAAA,CAAA,GAAcO,qCAAAA;IAC5C,CAACP,uCAAAA,CAAqB,MAAA,EAAQ,OAAA,CAAA,GAAWQ,kCAAAA;IACzC,CAACR,uCAAAA,CAAqB,MAAA,EAAQ,OAAA,CAAA,GAAWS,kCAAAA;IACzC,CAACT,uCAAAA,CAAqB,MAAA,EAAQ,QAAA,CAAA,GAAYU,mCAAAA;IAC1C,CAACV,uCAAAA,CAAqB,MAAA,EAAQ,SAAA,CAAA,GAAaW,oCAAAA;IAC3C,CAACX,uCAAAA,CAAqB,MAAA,EAAQ,OAAA,CAAA,GAAWY,kCAAAA;IACzC,CAACZ,uCAAAA,CAAqB,MAAA,EAAQ,MAAA,CAAA,GAAUa,iCAAAA;IACxC,CAACb,uCAAAA,CAAqB,MAAA,EAAQ,MAAA,CAAA,GAAUc,iCAAAA;IACxC,CAACd,uCAAAA,CAAqB,MAAA,EAAQ,eAAA,CAAA,GAAmBe,mCAAAA;IACjD,CAACf,uCAAAA,CAAqB,MAAA,EAAQ,QAAA,CAAA,GAAYgB;AAC9C;;"}

package/dist/cjs/core/coreDescriptors.js

@@ -109,6 +109,22 @@ const key = (name)=>ScenePackageBundle.componentRegistryKey('core', name);
             }
         ]
     },
+    {
+        component: key('outlet'),
+        displayName: 'Outlet',
+        description: 'A named region another screen opens into. Placing a screen here keeps this screen on the page, and the placed screen may declare outlets of its own.',
+        properties: [
+            {
+                path: 'name',
+                label: 'Name',
+                group: 'Navigation',
+                valueType: scene_model.PropertyValueType.String,
+                constraints: {
+                    required: true
+                }
+            }
+        ]
+    },
     {
         component: key('navigationBar'),
         displayName: 'Navigation bar',

package/dist/cjs/core/coreDescriptors.js.map

@@ -1 +1 @@
-{"version":3,"file":"coreDescriptors.js","sources":["../../../core/coreDescriptors.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { ComponentDescriptor, PropertyValueType } from '@cratis/scene.model';\nimport { componentRegistryKey } from '../packages';\n\nconst key = (name: string) => componentRegistryKey('core', name);\n\n/**\n * What can be edited on the `core` package's components.\n *\n * Only the components an author configures by hand are described: a button's label, an action's command and its\n * argument mapping, a column's heading, and the navigation bar. The Screenplay structural components - `data`,\n * `section`, `summary` - have nothing to edit that is not already a node in the tree.\n */\nexport const coreDescriptors: ComponentDescriptor[] = [\n    {\n        component: key('button'),\n        displayName: 'Button',\n        properties: [\n            { path: 'label', label: 'Label', group: 'Content', valueType: PropertyValueType.String, default: '' },\n        ],\n    },\n    {\n        component: key('action'),\n        displayName: 'Command action',\n        description: 'Invokes a modeled command. The command and its argument mapping are stored on the element; the host that handles the command event reads them.',\n        properties: [\n            { path: 'label', label: 'Label', group: 'Content', valueType: PropertyValueType.String },\n            {\n                path: 'command', label: 'Command', group: 'Behavior', valueType: PropertyValueType.String,\n                editorKind: 'stateChangeReference', constraints: { required: true },\n                description: 'The state change this action submits.',\n            },\n            {\n                path: 'arguments', label: 'Argument mapping', group: 'Behavior', valueType: PropertyValueType.Collection,\n                description: 'Where each command argument comes from.',\n                item: {\n                    label: 'Argument',\n                    properties: [\n                        { path: 'name', label: 'Argument', group: 'Behavior', valueType: PropertyValueType.String, constraints: { required: true } },\n                        { path: 'source', label: 'Source', group: 'Behavior', valueType: PropertyValueType.String, editorKind: 'bindingPath', constraints: { required: true } },\n                    ],\n                },\n            },\n        ],\n    },\n    {\n        component: key('column'),\n        displayName: 'Table column',\n        properties: [\n            { path: 'property', label: 'Result field', group: 'Data', valueType: PropertyValueType.String, editorKind: 'resultField', constraints: { required: true } },\n            { path: 'label', label: 'Heading', group: 'Content', valueType: PropertyValueType.String },\n        ],\n    },\n    {\n        component: key('navigationBar'),\n        displayName: 'Navigation bar',\n        description: 'A list of navigation items. A template author fixes the first item (Home) and can expose the list so that screens add their own.',\n        properties: [\n            { path: 'title', label: 'Title', group: 'Content', valueType: PropertyValueType.String, default: 'Navigation' },\n            {\n                path: 'items', label: 'Items', group: 'Content', valueType: PropertyValueType.Collection, default: [],\n                item: {\n                    label: 'Navigation item',\n                    properties: [\n                        { path: 'label', label: 'Label', group: 'Content', valueType: PropertyValueType.String, constraints: { required: true, minimumLength: 1 } },\n                        { path: 'icon', label: 'Icon', group: 'Content', valueType: PropertyValueType.Icon, editorKind: 'iconPicker' },\n                        { path: 'destination', label: 'Destination', group: 'Content', valueType: PropertyValueType.Destination, editorKind: 'screenPicker', constraints: { required: true } },\n                    ],\n                },\n            },\n        ],\n    },\n];\n"],"names":["key","name","componentRegistryKey","coreDescriptors","component","displayName","properties","path","label","group","valueType","PropertyValueType","String","default","description","editorKind","constraints","required","Collection","item","minimumLength","Icon","Destination"],"mappings":";;;;;;;;;;;AAAA;AACA;AAKA,MAAMA,GAAAA,GAAM,CAACC,IAAAA,GAAiBC,uCAAAA,CAAqB,MAAA,EAAQD,IAAAA,CAAAA;AAE3D;;;;;;UAOaE,eAAAA,GAAyC;AAClD,IAAA;AACIC,QAAAA,SAAAA,EAAWJ,GAAAA,CAAI,QAAA,CAAA;QACfK,WAAAA,EAAa,QAAA;QACbC,UAAAA,EAAY;AACR,YAAA;gBAAEC,IAAAA,EAAM,OAAA;gBAASC,KAAAA,EAAO,OAAA;gBAASC,KAAAA,EAAO,SAAA;AAAWC,gBAAAA,SAAAA,EAAWC,8BAAkBC,MAAM;gBAAEC,OAAAA,EAAS;AAAG;AACvG;AACL,KAAA;AACA,IAAA;AACIT,QAAAA,SAAAA,EAAWJ,GAAAA,CAAI,QAAA,CAAA;QACfK,WAAAA,EAAa,gBAAA;QACbS,WAAAA,EAAa,gJAAA;QACbR,UAAAA,EAAY;AACR,YAAA;gBAAEC,IAAAA,EAAM,OAAA;gBAASC,KAAAA,EAAO,OAAA;gBAASC,KAAAA,EAAO,SAAA;AAAWC,gBAAAA,SAAAA,EAAWC,8BAAkBC;AAAO,aAAA;AACvF,YAAA;gBACIL,IAAAA,EAAM,SAAA;gBAAWC,KAAAA,EAAO,SAAA;gBAAWC,KAAAA,EAAO,UAAA;AAAYC,gBAAAA,SAAAA,EAAWC,8BAAkBC,MAAM;gBACzFG,UAAAA,EAAY,sBAAA;gBAAwBC,WAAAA,EAAa;oBAAEC,QAAAA,EAAU;AAAK,iBAAA;gBAClEH,WAAAA,EAAa;AACjB,aAAA;AACA,YAAA;gBACIP,IAAAA,EAAM,WAAA;gBAAaC,KAAAA,EAAO,kBAAA;gBAAoBC,KAAAA,EAAO,UAAA;AAAYC,gBAAAA,SAAAA,EAAWC,8BAAkBO,UAAU;gBACxGJ,WAAAA,EAAa,yCAAA;gBACbK,IAAAA,EAAM;oBACFX,KAAAA,EAAO,UAAA;oBACPF,UAAAA,EAAY;AACR,wBAAA;4BAAEC,IAAAA,EAAM,MAAA;4BAAQC,KAAAA,EAAO,UAAA;4BAAYC,KAAAA,EAAO,UAAA;AAAYC,4BAAAA,SAAAA,EAAWC,8BAAkBC,MAAM;4BAAEI,WAAAA,EAAa;gCAAEC,QAAAA,EAAU;AAAK;AAAE,yBAAA;AAC3H,wBAAA;4BAAEV,IAAAA,EAAM,QAAA;4BAAUC,KAAAA,EAAO,QAAA;4BAAUC,KAAAA,EAAO,UAAA;AAAYC,4BAAAA,SAAAA,EAAWC,8BAAkBC,MAAM;4BAAEG,UAAAA,EAAY,aAAA;4BAAeC,WAAAA,EAAa;gCAAEC,QAAAA,EAAU;AAAK;AAAE;AACzJ;AACL;AACJ;AACH;AACL,KAAA;AACA,IAAA;AACIb,QAAAA,SAAAA,EAAWJ,GAAAA,CAAI,QAAA,CAAA;QACfK,WAAAA,EAAa,cAAA;QACbC,UAAAA,EAAY;AACR,YAAA;gBAAEC,IAAAA,EAAM,UAAA;gBAAYC,KAAAA,EAAO,cAAA;gBAAgBC,KAAAA,EAAO,MAAA;AAAQC,gBAAAA,SAAAA,EAAWC,8BAAkBC,MAAM;gBAAEG,UAAAA,EAAY,aAAA;gBAAeC,WAAAA,EAAa;oBAAEC,QAAAA,EAAU;AAAK;AAAE,aAAA;AAC1J,YAAA;gBAAEV,IAAAA,EAAM,OAAA;gBAASC,KAAAA,EAAO,SAAA;gBAAWC,KAAAA,EAAO,SAAA;AAAWC,gBAAAA,SAAAA,EAAWC,8BAAkBC;AAAO;AAC5F;AACL,KAAA;AACA,IAAA;AACIR,QAAAA,SAAAA,EAAWJ,GAAAA,CAAI,eAAA,CAAA;QACfK,WAAAA,EAAa,gBAAA;QACbS,WAAAA,EAAa,kIAAA;QACbR,UAAAA,EAAY;AACR,YAAA;gBAAEC,IAAAA,EAAM,OAAA;gBAASC,KAAAA,EAAO,OAAA;gBAASC,KAAAA,EAAO,SAAA;AAAWC,gBAAAA,SAAAA,EAAWC,8BAAkBC,MAAM;gBAAEC,OAAAA,EAAS;AAAa,aAAA;AAC9G,YAAA;gBACIN,IAAAA,EAAM,OAAA;gBAASC,KAAAA,EAAO,OAAA;gBAASC,KAAAA,EAAO,SAAA;AAAWC,gBAAAA,SAAAA,EAAWC,8BAAkBO,UAAU;AAAEL,gBAAAA,OAAAA,EAAS,EAAE;gBACrGM,IAAAA,EAAM;oBACFX,KAAAA,EAAO,iBAAA;oBACPF,UAAAA,EAAY;AACR,wBAAA;4BAAEC,IAAAA,EAAM,OAAA;4BAASC,KAAAA,EAAO,OAAA;4BAASC,KAAAA,EAAO,SAAA;AAAWC,4BAAAA,SAAAA,EAAWC,8BAAkBC,MAAM;4BAAEI,WAAAA,EAAa;gCAAEC,QAAAA,EAAU,IAAA;gCAAMG,aAAAA,EAAe;AAAE;AAAE,yBAAA;AAC1I,wBAAA;4BAAEb,IAAAA,EAAM,MAAA;4BAAQC,KAAAA,EAAO,MAAA;4BAAQC,KAAAA,EAAO,SAAA;AAAWC,4BAAAA,SAAAA,EAAWC,8BAAkBU,IAAI;4BAAEN,UAAAA,EAAY;AAAa,yBAAA;AAC7G,wBAAA;4BAAER,IAAAA,EAAM,aAAA;4BAAeC,KAAAA,EAAO,aAAA;4BAAeC,KAAAA,EAAO,SAAA;AAAWC,4BAAAA,SAAAA,EAAWC,8BAAkBW,WAAW;4BAAEP,UAAAA,EAAY,cAAA;4BAAgBC,WAAAA,EAAa;gCAAEC,QAAAA,EAAU;AAAK;AAAE;AACxK;AACL;AACJ;AACH;AACL;;;"}
+{"version":3,"file":"coreDescriptors.js","sources":["../../../core/coreDescriptors.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { ComponentDescriptor, PropertyValueType } from '@cratis/scene.model';\nimport { componentRegistryKey } from '../packages';\n\nconst key = (name: string) => componentRegistryKey('core', name);\n\n/**\n * What can be edited on the `core` package's components.\n *\n * Only the components an author configures by hand are described: a button's label, an action's command and its\n * argument mapping, a column's heading, and the navigation bar. The Screenplay structural components - `data`,\n * `section`, `summary` - have nothing to edit that is not already a node in the tree.\n */\nexport const coreDescriptors: ComponentDescriptor[] = [\n    {\n        component: key('button'),\n        displayName: 'Button',\n        properties: [\n            { path: 'label', label: 'Label', group: 'Content', valueType: PropertyValueType.String, default: '' },\n        ],\n    },\n    {\n        component: key('action'),\n        displayName: 'Command action',\n        description: 'Invokes a modeled command. The command and its argument mapping are stored on the element; the host that handles the command event reads them.',\n        properties: [\n            { path: 'label', label: 'Label', group: 'Content', valueType: PropertyValueType.String },\n            {\n                path: 'command', label: 'Command', group: 'Behavior', valueType: PropertyValueType.String,\n                editorKind: 'stateChangeReference', constraints: { required: true },\n                description: 'The state change this action submits.',\n            },\n            {\n                path: 'arguments', label: 'Argument mapping', group: 'Behavior', valueType: PropertyValueType.Collection,\n                description: 'Where each command argument comes from.',\n                item: {\n                    label: 'Argument',\n                    properties: [\n                        { path: 'name', label: 'Argument', group: 'Behavior', valueType: PropertyValueType.String, constraints: { required: true } },\n                        { path: 'source', label: 'Source', group: 'Behavior', valueType: PropertyValueType.String, editorKind: 'bindingPath', constraints: { required: true } },\n                    ],\n                },\n            },\n        ],\n    },\n    {\n        component: key('column'),\n        displayName: 'Table column',\n        properties: [\n            { path: 'property', label: 'Result field', group: 'Data', valueType: PropertyValueType.String, editorKind: 'resultField', constraints: { required: true } },\n            { path: 'label', label: 'Heading', group: 'Content', valueType: PropertyValueType.String },\n        ],\n    },\n    {\n        component: key('outlet'),\n        displayName: 'Outlet',\n        description: 'A named region another screen opens into. Placing a screen here keeps this screen on the page, and the placed screen may declare outlets of its own.',\n        properties: [{ path: 'name', label: 'Name', group: 'Navigation', valueType: PropertyValueType.String, constraints: { required: true } }],\n    },\n    {\n        component: key('navigationBar'),\n        displayName: 'Navigation bar',\n        description: 'A list of navigation items. A template author fixes the first item (Home) and can expose the list so that screens add their own.',\n        properties: [\n            { path: 'title', label: 'Title', group: 'Content', valueType: PropertyValueType.String, default: 'Navigation' },\n            {\n                path: 'items', label: 'Items', group: 'Content', valueType: PropertyValueType.Collection, default: [],\n                item: {\n                    label: 'Navigation item',\n                    properties: [\n                        { path: 'label', label: 'Label', group: 'Content', valueType: PropertyValueType.String, constraints: { required: true, minimumLength: 1 } },\n                        { path: 'icon', label: 'Icon', group: 'Content', valueType: PropertyValueType.Icon, editorKind: 'iconPicker' },\n                        { path: 'destination', label: 'Destination', group: 'Content', valueType: PropertyValueType.Destination, editorKind: 'screenPicker', constraints: { required: true } },\n                    ],\n                },\n            },\n        ],\n    },\n];\n"],"names":["key","name","componentRegistryKey","coreDescriptors","component","displayName","properties","path","label","group","valueType","PropertyValueType","String","default","description","editorKind","constraints","required","Collection","item","minimumLength","Icon","Destination"],"mappings":"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"}

package/dist/cjs/core/corePackage.js

@@ -32,7 +32,8 @@ var coreDescriptors = require('./coreDescriptors.js');
         'field',
         'code',
         'file',
-        'navigationBar'
+        'navigationBar',
+        'outlet'
     ],
     layouts: [],
     screenTemplates: [],

package/dist/cjs/core/corePackage.js.map

@@ -1 +1 @@
-{"version":3,"file":"corePackage.js","sources":["../../../core/corePackage.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { PackageKind, ScenePackage } from '@cratis/scene.model';\nimport { ScenePackageBundle } from '../packages';\nimport { coreComponents } from './coreComponents';\nimport { coreDescriptors } from './coreDescriptors';\n\n/**\n * The `core` package's declaration. Every other package is loaded by a host that reads its manifest;\n * `core` ships inside the renderer itself, because Scene#3 guarantees a bare name always has somewhere to\n * resolve regardless of which packages a profile lists. It is still declared the same way as any other -\n * a package picker should be able to show it, and the dependency resolver should be able to reason about\n * it, without a special case.\n */\nexport const corePackageManifest: ScenePackage = {\n    name: 'core',\n    version: '1.0.0',\n    kind: PackageKind.ComponentLibrary,\n    dependencies: [],\n    components: [\n        'text',\n        'button',\n        'card',\n        'data',\n        'action',\n        'section',\n        'navigate',\n        'title',\n        'table',\n        'column',\n        'summary',\n        'field',\n        'code',\n        'file',\n        'navigationBar',\n    ],\n    layouts: [],\n    screenTemplates: [],\n    dialogTemplates: [],\n    themes: [],\n    displayName: 'Core',\n    description: 'The built-in fallback vocabulary every ui profile resolves against.',\n    module: '@cratis/scene.react',\n    license: 'MIT',\n    licenseUrl: 'https://github.com/Cratis/Scene/blob/main/LICENSE',\n};\n\n/**\n * The `core` package as a loadable bundle.\n */\nexport const corePackage: ScenePackageBundle = {\n    manifest: corePackageManifest,\n    components: coreComponents,\n    descriptors: coreDescriptors,\n};\n"],"names":["corePackageManifest","name","version","kind","PackageKind","ComponentLibrary","dependencies","components","layouts","screenTemplates","dialogTemplates","themes","displayName","description","module","license","licenseUrl","corePackage","manifest","coreComponents","descriptors","coreDescriptors"],"mappings":";;;;;;AAAA;AACA;AAOA;;;;;;UAOaA,mBAAAA,GAAoC;IAC7CC,IAAAA,EAAM,MAAA;IACNC,OAAAA,EAAS,OAAA;AACTC,IAAAA,IAAAA,EAAMC,wBAAYC,gBAAgB;AAClCC,IAAAA,YAAAA,EAAc,EAAE;IAChBC,UAAAA,EAAY;AACR,QAAA,MAAA;AACA,QAAA,QAAA;AACA,QAAA,MAAA;AACA,QAAA,MAAA;AACA,QAAA,QAAA;AACA,QAAA,SAAA;AACA,QAAA,UAAA;AACA,QAAA,OAAA;AACA,QAAA,OAAA;AACA,QAAA,QAAA;AACA,QAAA,SAAA;AACA,QAAA,OAAA;AACA,QAAA,MAAA;AACA,QAAA,MAAA;AACA,QAAA;AACH,KAAA;AACDC,IAAAA,OAAAA,EAAS,EAAE;AACXC,IAAAA,eAAAA,EAAiB,EAAE;AACnBC,IAAAA,eAAAA,EAAiB,EAAE;AACnBC,IAAAA,MAAAA,EAAQ,EAAE;IACVC,WAAAA,EAAa,MAAA;IACbC,WAAAA,EAAa,qEAAA;IACbC,MAAAA,EAAQ,qBAAA;IACRC,OAAAA,EAAS,KAAA;IACTC,UAAAA,EAAY;AAChB;AAEA;;UAGaC,WAAAA,GAAkC;IAC3CC,QAAAA,EAAUlB,mBAAAA;IACVO,UAAAA,EAAYY,6BAAAA;IACZC,WAAAA,EAAaC;AACjB;;;"}
+{"version":3,"file":"corePackage.js","sources":["../../../core/corePackage.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { PackageKind, ScenePackage } from '@cratis/scene.model';\nimport { ScenePackageBundle } from '../packages';\nimport { coreComponents } from './coreComponents';\nimport { coreDescriptors } from './coreDescriptors';\n\n/**\n * The `core` package's declaration. Every other package is loaded by a host that reads its manifest;\n * `core` ships inside the renderer itself, because Scene#3 guarantees a bare name always has somewhere to\n * resolve regardless of which packages a profile lists. It is still declared the same way as any other -\n * a package picker should be able to show it, and the dependency resolver should be able to reason about\n * it, without a special case.\n */\nexport const corePackageManifest: ScenePackage = {\n    name: 'core',\n    version: '1.0.0',\n    kind: PackageKind.ComponentLibrary,\n    dependencies: [],\n    components: [\n        'text',\n        'button',\n        'card',\n        'data',\n        'action',\n        'section',\n        'navigate',\n        'title',\n        'table',\n        'column',\n        'summary',\n        'field',\n        'code',\n        'file',\n        'navigationBar',\n        'outlet',\n    ],\n    layouts: [],\n    screenTemplates: [],\n    dialogTemplates: [],\n    themes: [],\n    displayName: 'Core',\n    description: 'The built-in fallback vocabulary every ui profile resolves against.',\n    module: '@cratis/scene.react',\n    license: 'MIT',\n    licenseUrl: 'https://github.com/Cratis/Scene/blob/main/LICENSE',\n};\n\n/**\n * The `core` package as a loadable bundle.\n */\nexport const corePackage: ScenePackageBundle = {\n    manifest: corePackageManifest,\n    components: coreComponents,\n    descriptors: coreDescriptors,\n};\n"],"names":["corePackageManifest","name","version","kind","PackageKind","ComponentLibrary","dependencies","components","layouts","screenTemplates","dialogTemplates","themes","displayName","description","module","license","licenseUrl","corePackage","manifest","coreComponents","descriptors","coreDescriptors"],"mappings":";;;;;;AAAA;AACA;AAOA;;;;;;UAOaA,mBAAAA,GAAoC;IAC7CC,IAAAA,EAAM,MAAA;IACNC,OAAAA,EAAS,OAAA;AACTC,IAAAA,IAAAA,EAAMC,wBAAYC,gBAAgB;AAClCC,IAAAA,YAAAA,EAAc,EAAE;IAChBC,UAAAA,EAAY;AACR,QAAA,MAAA;AACA,QAAA,QAAA;AACA,QAAA,MAAA;AACA,QAAA,MAAA;AACA,QAAA,QAAA;AACA,QAAA,SAAA;AACA,QAAA,UAAA;AACA,QAAA,OAAA;AACA,QAAA,OAAA;AACA,QAAA,QAAA;AACA,QAAA,SAAA;AACA,QAAA,OAAA;AACA,QAAA,MAAA;AACA,QAAA,MAAA;AACA,QAAA,eAAA;AACA,QAAA;AACH,KAAA;AACDC,IAAAA,OAAAA,EAAS,EAAE;AACXC,IAAAA,eAAAA,EAAiB,EAAE;AACnBC,IAAAA,eAAAA,EAAiB,EAAE;AACnBC,IAAAA,MAAAA,EAAQ,EAAE;IACVC,WAAAA,EAAa,MAAA;IACbC,WAAAA,EAAa,qEAAA;IACbC,MAAAA,EAAQ,qBAAA;IACRC,OAAAA,EAAS,KAAA;IACTC,UAAAA,EAAY;AAChB;AAEA;;UAGaC,WAAAA,GAAkC;IAC3CC,QAAAA,EAAUlB,mBAAAA;IACVO,UAAAA,EAAYY,6BAAAA;IACZC,WAAAA,EAAaC;AACjB;;;"}

package/dist/cjs/index.js

@@ -6,6 +6,8 @@ var BindingOutputContext = require('./renderer/BindingOutputContext.js');
 var RenderBindingScopeContext = require('./renderer/RenderBindingScopeContext.js');
 var UnresolvedComponent = require('./renderer/UnresolvedComponent.js');
 var useBoundQuery = require('./renderer/useBoundQuery.js');
+var useValueOutput = require('./renderer/useValueOutput.js');
+var valueOutputProperty = require('./renderer/valueOutputProperty.js');
 var createReactRenderer = require('./renderer/createReactRenderer.js');
 var InteractiveComponent = require('./renderer/InteractiveComponent.js');
 var CoreText = require('./core/CoreText.js');
@@ -21,6 +23,7 @@ var extractNavigationItem = require('./NavBar/extractNavigationItem.js');
 var SceneNavigationContext = require('./navigation/SceneNavigationContext.js');
 var SceneNavigationHost = require('./navigation/SceneNavigationHost.js');
 var createBrowserSceneHistory = require('./navigation/createBrowserSceneHistory.js');
+var createHashSceneHistory = require('./navigation/createHashSceneHistory.js');
 var createMemorySceneHistory = require('./navigation/createMemorySceneHistory.js');
 var diagnoseRenderedNavigation = require('./navigation/diagnoseRenderedNavigation.js');
 var identityRoute = require('./navigation/identityRoute.js');
@@ -29,6 +32,10 @@ var navigationRouteKey = require('./navigation/navigationRouteKey.js');
 var resolveDestination = require('./navigation/resolveDestination.js');
 var sceneRoutesFrom = require('./navigation/sceneRoutesFrom.js');
 var useSceneHistoryNavigation = require('./navigation/useSceneHistoryNavigation.js');
+var CoreOutlet = require('./navigation/CoreOutlet.js');
+var SceneOutletContext = require('./navigation/SceneOutletContext.js');
+var collectOutletOwners = require('./navigation/collectOutletOwners.js');
+var placeInOutlet = require('./navigation/placeInOutlet.js');
 var IconAdapterRegistry = require('./icons/IconAdapterRegistry.js');
 var IconAdapterContext = require('./icons/IconAdapterContext.js');
 var useIconGlyph = require('./icons/useIconGlyph.js');
@@ -72,6 +79,9 @@ exports.useRenderBindingResolver = RenderBindingScopeContext.useRenderBindingRes
 exports.useRenderBindingScope = RenderBindingScopeContext.useRenderBindingScope;
 exports.UnresolvedComponent = UnresolvedComponent.UnresolvedComponent;
 exports.useBoundQuery = useBoundQuery.useBoundQuery;
+exports.useValueOutput = useValueOutput.useValueOutput;
+exports.valueOutputName = useValueOutput.valueOutputName;
+exports.valueOutputProperty = valueOutputProperty.valueOutputProperty;
 exports.createReactRenderer = createReactRenderer.createReactRenderer;
 exports.InteractiveComponent = InteractiveComponent.InteractiveComponent;
 exports.CoreText = CoreText.CoreText;
@@ -95,10 +105,12 @@ exports.corePackage = corePackage.corePackage;
 exports.corePackageManifest = corePackage.corePackageManifest;
 exports.NavBar = NavBar.NavBar;
 exports.extractNavigationItem = extractNavigationItem.extractNavigationItem;
+exports.SceneNavigationContextInternal = SceneNavigationContext.SceneNavigationContextInternal;
 exports.SceneNavigationProvider = SceneNavigationContext.SceneNavigationProvider;
 exports.useSceneNavigation = SceneNavigationContext.useSceneNavigation;
 exports.SceneNavigationHost = SceneNavigationHost.SceneNavigationHost;
 exports.createBrowserSceneHistory = createBrowserSceneHistory.createBrowserSceneHistory;
+exports.createHashSceneHistory = createHashSceneHistory.createHashSceneHistory;
 exports.createMemorySceneHistory = createMemorySceneHistory.createMemorySceneHistory;
 exports.diagnoseRenderedNavigation = diagnoseRenderedNavigation.diagnoseRenderedNavigation;
 exports.identityRoute = identityRoute.identityRoute;
@@ -107,6 +119,12 @@ exports.navigationRouteKey = navigationRouteKey.navigationRouteKey;
 exports.resolveDestination = resolveDestination.resolveDestination;
 exports.sceneRoutesFrom = sceneRoutesFrom.sceneRoutesFrom;
 exports.useSceneHistoryNavigation = useSceneHistoryNavigation.useSceneHistoryNavigation;
+exports.CoreOutlet = CoreOutlet.CoreOutlet;
+exports.SceneOutletContext = SceneOutletContext.SceneOutletContext;
+exports.useSceneOutlets = SceneOutletContext.useSceneOutlets;
+exports.collectOutletOwners = collectOutletOwners.collectOutletOwners;
+exports.outletComponentName = collectOutletOwners.outletComponentName;
+exports.placeInOutlet = placeInOutlet.placeInOutlet;
 exports.IconAdapterRegistry = IconAdapterRegistry.IconAdapterRegistry;
 exports.createIconAdapterRegistry = IconAdapterRegistry.createIconAdapterRegistry;
 exports.IconAdapterProvider = IconAdapterContext.IconAdapterProvider;

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/navigation/CoreOutlet.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var SceneElementView = require('../SceneElementView.js');
+var SceneNavigationContext = require('./SceneNavigationContext.js');
+var SceneOutletContext = require('./SceneOutletContext.js');
+
+/**
+ * A nested outlet a screen declares: `core:outlet` with a `name`. Inside a navigation host it renders the
+ * screen placed in that outlet - which may declare outlets of its own, so composition nests to any depth -
+ * and nothing while the outlet is empty. Outside a navigation host it renders the empty region.
+ */ function CoreOutlet({ element }) {
+    const name = typeof element.properties.name === 'string' ? element.properties.name : '';
+    const navigation = react.useContext(SceneNavigationContext.SceneNavigationContextInternal);
+    const outlets = SceneOutletContext.useSceneOutlets();
+    const placed = navigation?.outlets[name];
+    const screen = placed && outlets ? outlets.screens[placed] : undefined;
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        "data-scene-outlet": name,
+        "data-scene-outlet-screen": placed,
+        children: screen && outlets && /*#__PURE__*/ jsxRuntime.jsx(SceneElementView.SceneElementView, {
+            element: screen,
+            registry: outlets.registry,
+            dataContext: navigation?.bindingScope.dataContext,
+            queryResults: navigation?.bindingScope.queryResults
+        })
+    });
+}
+
+exports.CoreOutlet = CoreOutlet;
+//# sourceMappingURL=CoreOutlet.js.map

package/dist/cjs/navigation/CoreOutlet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CoreOutlet.js","sources":["../../../navigation/CoreOutlet.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useContext } from 'react';\nimport { RegisteredComponentProps } from '../renderer/ComponentRegistry';\nimport { SceneElementView } from '../SceneElementView';\nimport { SceneNavigationContextInternal } from './SceneNavigationContext';\nimport { useSceneOutlets } from './SceneOutletContext';\n\n/**\n * A nested outlet a screen declares: `core:outlet` with a `name`. Inside a navigation host it renders the\n * screen placed in that outlet - which may declare outlets of its own, so composition nests to any depth -\n * and nothing while the outlet is empty. Outside a navigation host it renders the empty region.\n */\nexport function CoreOutlet({ element }: RegisteredComponentProps) {\n    const name = typeof element.properties.name === 'string' ? element.properties.name : '';\n    const navigation = useContext(SceneNavigationContextInternal);\n    const outlets = useSceneOutlets();\n    const placed = navigation?.outlets[name];\n    const screen = placed && outlets ? outlets.screens[placed] : undefined;\n\n    return <div data-scene-outlet={name} data-scene-outlet-screen={placed}>\n        {screen && outlets && <SceneElementView element={screen} registry={outlets.registry}\n            dataContext={navigation?.bindingScope.dataContext} queryResults={navigation?.bindingScope.queryResults} />}\n    </div>;\n}\n"],"names":["CoreOutlet","element","name","properties","navigation","useContext","SceneNavigationContextInternal","outlets","useSceneOutlets","placed","screen","screens","undefined","_jsx","div","data-scene-outlet","data-scene-outlet-screen","SceneElementView","registry","dataContext","bindingScope","queryResults"],"mappings":";;;;;;;;AASA;;;;AAIC,IACM,SAASA,UAAAA,CAAW,EAAEC,OAAO,EAA4B,EAAA;AAC5D,IAAA,MAAMC,IAAAA,GAAO,OAAOD,OAAAA,CAAQE,UAAU,CAACD,IAAI,KAAK,QAAA,GAAWD,OAAAA,CAAQE,UAAU,CAACD,IAAI,GAAG,EAAA;AACrF,IAAA,MAAME,aAAaC,gBAAAA,CAAWC,qDAAAA,CAAAA;AAC9B,IAAA,MAAMC,OAAAA,GAAUC,kCAAAA,EAAAA;AAChB,IAAA,MAAMC,MAAAA,GAASL,UAAAA,EAAYG,OAAO,CAACL,IAAAA,CAAK;AACxC,IAAA,MAAMQ,SAASD,MAAAA,IAAUF,OAAAA,GAAUA,QAAQI,OAAO,CAACF,OAAO,GAAGG,SAAAA;AAE7D,IAAA,qBAAOC,cAAA,CAACC,KAAAA,EAAAA;QAAIC,mBAAAA,EAAmBb,IAAAA;QAAMc,0BAAAA,EAA0BP,MAAAA;AAC1DC,QAAAA,QAAAA,EAAAA,MAAAA,IAAUH,yBAAWM,cAAA,CAACI,iCAAAA,EAAAA;YAAiBhB,OAAAA,EAASS,MAAAA;AAAQQ,YAAAA,QAAAA,EAAUX,QAAQW,QAAQ;AAC/EC,YAAAA,WAAAA,EAAaf,YAAYgB,YAAAA,CAAaD,WAAAA;AAAaE,YAAAA,YAAAA,EAAcjB,YAAYgB,YAAAA,CAAaC;;;AAEtG;;"}

package/dist/cjs/navigation/SceneNavigationContext.js

@@ -4,6 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 
 const Context = /*#__PURE__*/ react.createContext(undefined);
+/** The navigation context itself, for components that render outside a host as well as inside one. */ const SceneNavigationContextInternal = Context;
 function SceneNavigationProvider({ value, children }) {
     return /*#__PURE__*/ jsxRuntime.jsx(Context.Provider, {
         value: value,
@@ -16,6 +17,7 @@ function useSceneNavigation() {
     return context;
 }
 
+exports.SceneNavigationContextInternal = SceneNavigationContextInternal;
 exports.SceneNavigationProvider = SceneNavigationProvider;
 exports.useSceneNavigation = useSceneNavigation;
 //# sourceMappingURL=SceneNavigationContext.js.map

package/dist/cjs/navigation/SceneNavigationContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"SceneNavigationContext.js","sources":["../../../navigation/SceneNavigationContext.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { ReactNode, createContext, useContext } from 'react';\nimport { BindingScope } from '@cratis/scene.engine';\nimport { DestinationReference } from '@cratis/scene.model';\nimport { DestinationResolution } from './DestinationResolution';\nimport { DialogResult } from './DialogResult';\n\nexport interface SceneNavigationContextValue {\n    currentScreen: string;\n    currentUrl?: string;\n    currentOutlet?: string;\n    currentDialog?: string;\n\n    /** The route parameters of the current entry - from the destination that opened it, or the deep link. */\n    currentParameters: Record<string, string>;\n\n    /** What the last dialog returned when it closed. */\n    dialogResult?: DialogResult;\n\n    /** A deep link that matched no route; the host fell back to its initial screen. */\n    unresolvedUrl?: string;\n    bindingScope: BindingScope;\n    navigate(destination: DestinationReference): DestinationResolution;\n\n    /** Closes the open dialog, returning to the entry that opened it, and records its result. */\n    closeDialog(result?: unknown): void;\n\n    /** Goes back one history entry. */\n    back(): void;\n}\n\nconst Context = createContext<SceneNavigationContextValue | undefined>(undefined);\n\nexport interface SceneNavigationProviderProps {\n    value: SceneNavigationContextValue;\n    children: ReactNode;\n}\n\nexport function SceneNavigationProvider({ value, children }: SceneNavigationProviderProps) {\n    return <Context.Provider value={value}>{children}</Context.Provider>;\n}\n\nexport function useSceneNavigation(): SceneNavigationContextValue {\n    const context = useContext(Context);\n    if (!context) throw new Error('No Scene navigation context is available.');\n    return context;\n}\n"],"names":["Context","createContext","undefined","SceneNavigationProvider","value","children","_jsx","Provider","useSceneNavigation","context","useContext","Error"],"mappings":";;;;;AAiCA,MAAMA,wBAAUC,mBAAAA,CAAuDC,SAAAA,CAAAA;AAOhE,SAASC,uBAAAA,CAAwB,EAAEC,KAAK,EAAEC,QAAQ,EAAgC,EAAA;IACrF,qBAAOC,cAAA,CAACN,QAAQO,QAAQ,EAAA;QAACH,KAAAA,EAAOA,KAAAA;AAAQC,QAAAA,QAAAA,EAAAA;;AAC5C;AAEO,SAASG,kBAAAA,GAAAA;AACZ,IAAA,MAAMC,UAAUC,gBAAAA,CAAWV,OAAAA,CAAAA;AAC3B,IAAA,IAAI,CAACS,OAAAA,EAAS,MAAM,IAAIE,KAAAA,CAAM,2CAAA,CAAA;IAC9B,OAAOF,OAAAA;AACX;;;"}
+{"version":3,"file":"SceneNavigationContext.js","sources":["../../../navigation/SceneNavigationContext.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { ReactNode, createContext, useContext } from 'react';\nimport { BindingScope } from '@cratis/scene.engine';\nimport { DestinationReference } from '@cratis/scene.model';\nimport { DestinationResolution } from './DestinationResolution';\nimport { DialogResult } from './DialogResult';\n\nexport interface SceneNavigationContextValue {\n    /** The screen the last navigation opened. */\n    currentScreen: string;\n\n    /** The screen in the primary region. */\n    primaryScreen: string;\n\n    /** Which screen each nested outlet shows, by outlet name. */\n    outlets: Record<string, string>;\n    currentUrl?: string;\n    currentOutlet?: string;\n    currentDialog?: string;\n\n    /** The route parameters of the current entry - from the destination that opened it, or the deep link. */\n    currentParameters: Record<string, string>;\n\n    /** What the last dialog returned when it closed. */\n    dialogResult?: DialogResult;\n\n    /** A deep link that matched no route; the host fell back to its initial screen. */\n    unresolvedUrl?: string;\n    bindingScope: BindingScope;\n    navigate(destination: DestinationReference): DestinationResolution;\n\n    /** Closes the open dialog, returning to the entry that opened it, and records its result. */\n    closeDialog(result?: unknown): void;\n\n    /** Goes back one history entry. */\n    back(): void;\n}\n\nconst Context = createContext<SceneNavigationContextValue | undefined>(undefined);\n\n/** The navigation context itself, for components that render outside a host as well as inside one. */\nexport const SceneNavigationContextInternal = Context;\n\nexport interface SceneNavigationProviderProps {\n    value: SceneNavigationContextValue;\n    children: ReactNode;\n}\n\nexport function SceneNavigationProvider({ value, children }: SceneNavigationProviderProps) {\n    return <Context.Provider value={value}>{children}</Context.Provider>;\n}\n\nexport function useSceneNavigation(): SceneNavigationContextValue {\n    const context = useContext(Context);\n    if (!context) throw new Error('No Scene navigation context is available.');\n    return context;\n}\n"],"names":["Context","createContext","undefined","SceneNavigationContextInternal","SceneNavigationProvider","value","children","_jsx","Provider","useSceneNavigation","context","useContext","Error"],"mappings":";;;;;AAwCA,MAAMA,wBAAUC,mBAAAA,CAAuDC,SAAAA,CAAAA;AAEvE,uGACO,MAAMC,8BAAAA,GAAiCH;AAOvC,SAASI,uBAAAA,CAAwB,EAAEC,KAAK,EAAEC,QAAQ,EAAgC,EAAA;IACrF,qBAAOC,cAAA,CAACP,QAAQQ,QAAQ,EAAA;QAACH,KAAAA,EAAOA,KAAAA;AAAQC,QAAAA,QAAAA,EAAAA;;AAC5C;AAEO,SAASG,kBAAAA,GAAAA;AACZ,IAAA,MAAMC,UAAUC,gBAAAA,CAAWX,OAAAA,CAAAA;AAC3B,IAAA,IAAI,CAACU,OAAAA,EAAS,MAAM,IAAIE,KAAAA,CAAM,2CAAA,CAAA;IAC9B,OAAOF,OAAAA;AACX;;;;"}

package/dist/cjs/navigation/SceneNavigationHost.js

@@ -6,10 +6,14 @@ var SceneElementView = require('../SceneElementView.js');
 var createMemorySceneHistory = require('./createMemorySceneHistory.js');
 var SceneNavigationContext = require('./SceneNavigationContext.js');
 var sceneRoutesFrom = require('./sceneRoutesFrom.js');
+var collectOutletOwners = require('./collectOutletOwners.js');
+var SceneOutletContext = require('./SceneOutletContext.js');
 var useSceneHistoryNavigation = require('./useSceneHistoryNavigation.js');
 
 /**
- * Executes Scene destinations against an in-memory rendered hierarchy: screen routes replace outlets,
+ * Executes Scene destinations against an in-memory rendered hierarchy: a destination into a nested outlet -
+ * one a screen declares with `core:outlet` - places its screen there and keeps the screens above it, to any
+ * depth; any other screen route replaces the primary region,
  * dialog destinations render dialog content over the screen that opened them, and external destinations
  * only report their resolved action. Every navigation is a history entry.
  */ function SceneNavigationHost({ screens, dialogs = {}, initialScreen, registry, bindingScope = {}, history, destinations, routes }) {
@@ -19,37 +23,50 @@ var useSceneHistoryNavigation = require('./useSceneHistoryNavigation.js');
         routes,
         screens
     ]);
-    const value = useSceneHistoryNavigation.useSceneHistoryNavigation(history ?? memoryHistory, routeTable, initialScreen, bindingScope);
-    const screen = screens[value.currentScreen];
+    const outletOwners = react.useMemo(()=>collectOutletOwners.collectOutletOwners(screens), [
+        screens
+    ]);
+    const value = useSceneHistoryNavigation.useSceneHistoryNavigation(history ?? memoryHistory, routeTable, initialScreen, bindingScope, outletOwners, destinations);
+    const outletContext = react.useMemo(()=>({
+            screens,
+            registry
+        }), [
+        registry,
+        screens
+    ]);
+    const screen = screens[value.primaryScreen];
     const dialog = value.currentDialog ? dialogs[value.currentDialog] : undefined;
-    return /*#__PURE__*/ jsxRuntime.jsxs(SceneNavigationContext.SceneNavigationProvider, {
+    return /*#__PURE__*/ jsxRuntime.jsx(SceneNavigationContext.SceneNavigationProvider, {
         value: value,
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsx("div", {
-                "data-scene-outlet": value.currentOutlet ?? 'primary',
-                "data-scene-url": value.currentUrl,
-                children: screen && /*#__PURE__*/ jsxRuntime.jsx(SceneElementView.SceneElementView, {
-                    element: screen,
-                    registry: registry,
-                    dataContext: bindingScope.dataContext,
-                    queryResults: bindingScope.queryResults,
-                    componentOutputs: bindingScope.componentOutputs
-                })
-            }),
-            dialog && /*#__PURE__*/ jsxRuntime.jsx("div", {
-                role: "dialog",
-                "aria-modal": "true",
-                "aria-label": value.currentDialog,
-                "data-scene-dialog": value.currentDialog,
-                children: /*#__PURE__*/ jsxRuntime.jsx(SceneElementView.SceneElementView, {
-                    element: dialog,
-                    registry: registry,
-                    dataContext: bindingScope.dataContext,
-                    queryResults: bindingScope.queryResults,
-                    componentOutputs: bindingScope.componentOutputs
+        children: /*#__PURE__*/ jsxRuntime.jsxs(SceneOutletContext.SceneOutletContext.Provider, {
+            value: outletContext,
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    "data-scene-outlet": value.primaryScreen === value.currentScreen ? value.currentOutlet ?? 'primary' : 'primary',
+                    "data-scene-url": value.currentUrl,
+                    children: screen && /*#__PURE__*/ jsxRuntime.jsx(SceneElementView.SceneElementView, {
+                        element: screen,
+                        registry: registry,
+                        dataContext: bindingScope.dataContext,
+                        queryResults: bindingScope.queryResults,
+                        componentOutputs: bindingScope.componentOutputs
+                    })
+                }),
+                dialog && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    role: "dialog",
+                    "aria-modal": "true",
+                    "aria-label": value.currentDialog,
+                    "data-scene-dialog": value.currentDialog,
+                    children: /*#__PURE__*/ jsxRuntime.jsx(SceneElementView.SceneElementView, {
+                        element: dialog,
+                        registry: registry,
+                        dataContext: bindingScope.dataContext,
+                        queryResults: bindingScope.queryResults,
+                        componentOutputs: bindingScope.componentOutputs
+                    })
                 })
-            })
-        ]
+            ]
+        })
     });
 }