@cratis/scene.react 4.27.0 → 4.29.0

package/core/coreDescriptors.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { ComponentDescriptor, PropertyValueType } from '@cratis/scene.model';
+import { ComponentDescriptor, PropertyEditorKind, PropertyValueType, ToolbarEmphasis } from '@cratis/scene.model';
 import { componentRegistryKey, describeComponents } from '../packages';
 import { coreComponentMetadata } from './coreComponentMetadata';
 
@@ -46,6 +46,33 @@ const describedCore: ComponentDescriptor[] = [
             },
         ],
     },
+    {
+        component: key('toolbarItem'),
+        displayName: 'Toolbar button',
+        description: 'One toolbar button. An Action button invokes a state change slice and opens it as a task dialog over the page; a button with no slice is allowed while designing and is flagged.',
+        properties: [
+            { path: 'label', label: 'Title', group: 'Content', valueType: PropertyValueType.String, default: 'Button' },
+            {
+                path: 'slice', label: 'Slice to invoke', group: 'Behavior', valueType: PropertyValueType.String,
+                editorKind: PropertyEditorKind.Slice, editorOptions: { kinds: ['StateChange'] },
+                description: 'Only State Change slices can be picked. State Views and Automations never take user input, so they are listed as unavailable.',
+            },
+            {
+                path: 'emphasis', label: 'Emphasis', group: 'Appearance', valueType: PropertyValueType.Enum, default: ToolbarEmphasis.Secondary,
+                editorKind: PropertyEditorKind.Enum,
+                choices: [
+                    { value: ToolbarEmphasis.Primary, label: 'Primary' },
+                    { value: ToolbarEmphasis.Secondary, label: 'Secondary' },
+                    { value: ToolbarEmphasis.Quiet, label: 'Quiet' },
+                ],
+            },
+            { path: 'icon', label: 'Icon', group: 'Appearance', valueType: PropertyValueType.Icon, editorKind: 'iconPicker' },
+            {
+                path: 'target', label: 'Command (legacy)', group: 'Behavior', valueType: PropertyValueType.String, editorKind: 'stateChangeReference',
+                description: 'A hand-typed command for a button that has no slice. It is converted to the slice that accepts the command when exactly one does; prefer a slice.',
+            },
+        ],
+    },
     {
         component: key('column'),
         displayName: 'Table column',

package/dist/cjs/core/coreDescriptors.js

@@ -89,6 +89,70 @@ const key = (name)=>ScenePackageBundle.componentRegistryKey('core', name);
             }
         ]
     },
+    {
+        component: key('toolbarItem'),
+        displayName: 'Toolbar button',
+        description: 'One toolbar button. An Action button invokes a state change slice and opens it as a task dialog over the page; a button with no slice is allowed while designing and is flagged.',
+        properties: [
+            {
+                path: 'label',
+                label: 'Title',
+                group: 'Content',
+                valueType: scene_model.PropertyValueType.String,
+                default: 'Button'
+            },
+            {
+                path: 'slice',
+                label: 'Slice to invoke',
+                group: 'Behavior',
+                valueType: scene_model.PropertyValueType.String,
+                editorKind: scene_model.PropertyEditorKind.Slice,
+                editorOptions: {
+                    kinds: [
+                        'StateChange'
+                    ]
+                },
+                description: 'Only State Change slices can be picked. State Views and Automations never take user input, so they are listed as unavailable.'
+            },
+            {
+                path: 'emphasis',
+                label: 'Emphasis',
+                group: 'Appearance',
+                valueType: scene_model.PropertyValueType.Enum,
+                default: scene_model.ToolbarEmphasis.Secondary,
+                editorKind: scene_model.PropertyEditorKind.Enum,
+                choices: [
+                    {
+                        value: scene_model.ToolbarEmphasis.Primary,
+                        label: 'Primary'
+                    },
+                    {
+                        value: scene_model.ToolbarEmphasis.Secondary,
+                        label: 'Secondary'
+                    },
+                    {
+                        value: scene_model.ToolbarEmphasis.Quiet,
+                        label: 'Quiet'
+                    }
+                ]
+            },
+            {
+                path: 'icon',
+                label: 'Icon',
+                group: 'Appearance',
+                valueType: scene_model.PropertyValueType.Icon,
+                editorKind: 'iconPicker'
+            },
+            {
+                path: 'target',
+                label: 'Command (legacy)',
+                group: 'Behavior',
+                valueType: scene_model.PropertyValueType.String,
+                editorKind: 'stateChangeReference',
+                description: 'A hand-typed command for a button that has no slice. It is converted to the slice that accepts the command when exactly one does; prefer a slice.'
+            }
+        ]
+    },
     {
         component: key('column'),
         displayName: 'Table column',

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, describeComponents } from '../packages';\nimport { coreComponentMetadata } from './coreComponentMetadata';\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 */\nconst describedCore: 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\n/** The `core` package's descriptors: the hand-written ones above with every component's category, icon, keywords and design mode (CMP1). */\nexport const coreDescriptors: ComponentDescriptor[] = describeComponents('core', describedCore, coreComponentMetadata);"],"names":["key","name","componentRegistryKey","describedCore","component","displayName","properties","path","label","group","valueType","PropertyValueType","String","default","description","editorKind","constraints","required","Collection","item","minimumLength","Icon","Destination","coreDescriptors","describeComponents","coreComponentMetadata"],"mappings":"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"}
+{"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, PropertyEditorKind, PropertyValueType, ToolbarEmphasis } from '@cratis/scene.model';\nimport { componentRegistryKey, describeComponents } from '../packages';\nimport { coreComponentMetadata } from './coreComponentMetadata';\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 */\nconst describedCore: 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('toolbarItem'),\n        displayName: 'Toolbar button',\n        description: 'One toolbar button. An Action button invokes a state change slice and opens it as a task dialog over the page; a button with no slice is allowed while designing and is flagged.',\n        properties: [\n            { path: 'label', label: 'Title', group: 'Content', valueType: PropertyValueType.String, default: 'Button' },\n            {\n                path: 'slice', label: 'Slice to invoke', group: 'Behavior', valueType: PropertyValueType.String,\n                editorKind: PropertyEditorKind.Slice, editorOptions: { kinds: ['StateChange'] },\n                description: 'Only State Change slices can be picked. State Views and Automations never take user input, so they are listed as unavailable.',\n            },\n            {\n                path: 'emphasis', label: 'Emphasis', group: 'Appearance', valueType: PropertyValueType.Enum, default: ToolbarEmphasis.Secondary,\n                editorKind: PropertyEditorKind.Enum,\n                choices: [\n                    { value: ToolbarEmphasis.Primary, label: 'Primary' },\n                    { value: ToolbarEmphasis.Secondary, label: 'Secondary' },\n                    { value: ToolbarEmphasis.Quiet, label: 'Quiet' },\n                ],\n            },\n            { path: 'icon', label: 'Icon', group: 'Appearance', valueType: PropertyValueType.Icon, editorKind: 'iconPicker' },\n            {\n                path: 'target', label: 'Command (legacy)', group: 'Behavior', valueType: PropertyValueType.String, editorKind: 'stateChangeReference',\n                description: 'A hand-typed command for a button that has no slice. It is converted to the slice that accepts the command when exactly one does; prefer a slice.',\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\n/** The `core` package's descriptors: the hand-written ones above with every component's category, icon, keywords and design mode (CMP1). */\nexport const coreDescriptors: ComponentDescriptor[] = describeComponents('core', describedCore, coreComponentMetadata);"],"names":["key","name","componentRegistryKey","describedCore","component","displayName","properties","path","label","group","valueType","PropertyValueType","String","default","description","editorKind","constraints","required","Collection","item","PropertyEditorKind","Slice","editorOptions","kinds","Enum","ToolbarEmphasis","Secondary","choices","value","Primary","Quiet","Icon","minimumLength","Destination","coreDescriptors","describeComponents","coreComponentMetadata"],"mappings":"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"}

package/dist/cjs/index.js

@@ -37,6 +37,13 @@ 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 SceneNavigationModelContext = require('./navigation/region/SceneNavigationModelContext.js');
+var NavigationRegionClassNames = require('./navigation/region/NavigationRegionClassNames.js');
+var NavigationRegionView = require('./navigation/region/NavigationRegionView.js');
+var currentModuleOf = require('./navigation/region/currentModuleOf.js');
+var navigationItemActive = require('./navigation/region/navigationItemActive.js');
+var navigationItemDestination = require('./navigation/region/navigationItemDestination.js');
+var navigationDestinations = require('./navigation/region/navigationDestinations.js');
 var IconAdapterRegistry = require('./icons/IconAdapterRegistry.js');
 var IconAdapterContext = require('./icons/IconAdapterContext.js');
 var useIconGlyph = require('./icons/useIconGlyph.js');
@@ -134,6 +141,15 @@ exports.useSceneOutlets = SceneOutletContext.useSceneOutlets;
 exports.collectOutletOwners = collectOutletOwners.collectOutletOwners;
 exports.outletComponentName = collectOutletOwners.outletComponentName;
 exports.placeInOutlet = placeInOutlet.placeInOutlet;
+exports.SceneNavigationModelProvider = SceneNavigationModelContext.SceneNavigationModelProvider;
+exports.useSceneNavigationModel = SceneNavigationModelContext.useSceneNavigationModel;
+exports.defaultNavigationRegionClassNames = NavigationRegionClassNames.defaultNavigationRegionClassNames;
+exports.NavigationRegionView = NavigationRegionView.NavigationRegionView;
+exports.currentModuleOf = currentModuleOf.currentModuleOf;
+exports.navigationItemActive = navigationItemActive.navigationItemActive;
+exports.defaultScreenFor = navigationItemDestination.defaultScreenFor;
+exports.navigationItemDestination = navigationItemDestination.navigationItemDestination;
+exports.navigationDestinations = navigationDestinations.navigationDestinations;
 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/SceneNavigationHost.js

@@ -9,6 +9,8 @@ var sceneRoutesFrom = require('./sceneRoutesFrom.js');
 var collectOutletOwners = require('./collectOutletOwners.js');
 var SceneOutletContext = require('./SceneOutletContext.js');
 var useSceneHistoryNavigation = require('./useSceneHistoryNavigation.js');
+var SceneNavigationModelContext = require('./region/SceneNavigationModelContext.js');
+var navigationDestinations = require('./region/navigationDestinations.js');
 
 /**
  * Executes Scene destinations against an in-memory rendered hierarchy: a destination into a nested outlet -
@@ -16,7 +18,11 @@ var useSceneHistoryNavigation = require('./useSceneHistoryNavigation.js');
  * 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 }) {
+ */ function SceneNavigationHost({ screens, dialogs = {}, initialScreen, registry, bindingScope = {}, history, destinations: authoredDestinations, routes, navigationModel, frame }) {
+    const destinations = react.useMemo(()=>authoredDestinations ?? (navigationModel ? navigationDestinations.navigationDestinations(navigationModel.structure, navigationModel.navigation, navigationModel.screenFor) : undefined), [
+        authoredDestinations,
+        navigationModel
+    ]);
     const [memoryHistory] = react.useState(()=>createMemorySceneHistory.createMemorySceneHistory());
     const routeTable = react.useMemo(()=>routes ?? sceneRoutesFrom.sceneRoutesFrom(Object.keys(screens), destinations), [
         destinations,
@@ -36,22 +42,23 @@ var useSceneHistoryNavigation = require('./useSceneHistoryNavigation.js');
     ]);
     const screen = screens[value.primaryScreen];
     const dialog = value.currentDialog ? dialogs[value.currentDialog] : undefined;
-    return /*#__PURE__*/ jsxRuntime.jsx(SceneNavigationContext.SceneNavigationProvider, {
+    const outlet = /*#__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
+        })
+    });
+    const page = /*#__PURE__*/ jsxRuntime.jsx(SceneNavigationContext.SceneNavigationProvider, {
         value: value,
         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
-                    })
-                }),
+                frame ? frame(outlet) : outlet,
                 dialog && /*#__PURE__*/ jsxRuntime.jsx("div", {
                     role: "dialog",
                     "aria-modal": "true",
@@ -68,6 +75,10 @@ var useSceneHistoryNavigation = require('./useSceneHistoryNavigation.js');
             ]
         })
     });
+    return navigationModel ? /*#__PURE__*/ jsxRuntime.jsx(SceneNavigationModelContext.SceneNavigationModelProvider, {
+        model: navigationModel,
+        children: page
+    }) : page;
 }
 
 exports.SceneNavigationHost = SceneNavigationHost;

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

@@ -1 +1 @@
-{"version":3,"file":"SceneNavigationHost.js","sources":["../../../navigation/SceneNavigationHost.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, useState } from 'react';\nimport { BindingScope } from '@cratis/scene.engine';\nimport { DestinationReference, SceneElement } from '@cratis/scene.model';\nimport { SceneElementView } from '../SceneElementView';\nimport { ComponentRegistry } from '../renderer';\nimport { createMemorySceneHistory } from './createMemorySceneHistory';\nimport { SceneHistory } from './SceneHistory';\nimport { SceneNavigationProvider } from './SceneNavigationContext';\nimport { SceneRoute } from './SceneRoute';\nimport { sceneRoutesFrom } from './sceneRoutesFrom';\nimport { collectOutletOwners } from './collectOutletOwners';\nimport { SceneOutletContext } from './SceneOutletContext';\nimport { useSceneHistoryNavigation } from './useSceneHistoryNavigation';\n\nexport interface SceneNavigationHostProps {\n    screens: Record<string, SceneElement>;\n    dialogs?: Record<string, SceneElement>;\n    initialScreen: string;\n    registry: ComponentRegistry;\n    bindingScope?: BindingScope;\n\n    /**\n     * Where entries are recorded. `createBrowserSceneHistory()` drives the address bar, so deep links,\n     * refresh and back/forward work; the default is an in-memory history for embedded hosts.\n     */\n    history?: SceneHistory;\n\n    /** The destinations the application navigates to, so their route overrides can be deep linked. */\n    destinations?: DestinationReference[];\n\n    /** An explicit route table, used instead of the one derived from `screens` and `destinations`. */\n    routes?: SceneRoute[];\n}\n\n/**\n * Executes Scene destinations against an in-memory rendered hierarchy: a destination into a nested outlet -\n * one a screen declares with `core:outlet` - places its screen there and keeps the screens above it, to any\n * depth; any other screen route replaces the primary region,\n * dialog destinations render dialog content over the screen that opened them, and external destinations\n * only report their resolved action. Every navigation is a history entry.\n */\nexport function SceneNavigationHost({ screens, dialogs = {}, initialScreen, registry, bindingScope = {}, history, destinations, routes }: SceneNavigationHostProps) {\n    const [memoryHistory] = useState(() => createMemorySceneHistory());\n    const routeTable = useMemo(() => routes ?? sceneRoutesFrom(Object.keys(screens), destinations), [destinations, routes, screens]);\n    const outletOwners = useMemo(() => collectOutletOwners(screens), [screens]);\n    const value = useSceneHistoryNavigation(history ?? memoryHistory, routeTable, initialScreen, bindingScope, outletOwners, destinations);\n    const outletContext = useMemo(() => ({ screens, registry }), [registry, screens]);\n\n    const screen = screens[value.primaryScreen];\n    const dialog = value.currentDialog ? dialogs[value.currentDialog] : undefined;\n\n    return <SceneNavigationProvider value={value}><SceneOutletContext.Provider value={outletContext}>\n        <div data-scene-outlet={value.primaryScreen === value.currentScreen ? value.currentOutlet ?? 'primary' : 'primary'} data-scene-url={value.currentUrl}>\n            {screen && <SceneElementView element={screen} registry={registry} dataContext={bindingScope.dataContext} queryResults={bindingScope.queryResults} componentOutputs={bindingScope.componentOutputs} />}\n        </div>\n        {dialog && <div role='dialog' aria-modal='true' aria-label={value.currentDialog} data-scene-dialog={value.currentDialog}>\n            <SceneElementView element={dialog} registry={registry} dataContext={bindingScope.dataContext} queryResults={bindingScope.queryResults} componentOutputs={bindingScope.componentOutputs} />\n        </div>}\n    </SceneOutletContext.Provider></SceneNavigationProvider>;\n}\n"],"names":["SceneNavigationHost","screens","dialogs","initialScreen","registry","bindingScope","history","destinations","routes","memoryHistory","useState","createMemorySceneHistory","routeTable","useMemo","sceneRoutesFrom","Object","keys","outletOwners","collectOutletOwners","value","useSceneHistoryNavigation","outletContext","screen","primaryScreen","dialog","currentDialog","undefined","_jsx","SceneNavigationProvider","_jsxs","SceneOutletContext","Provider","div","data-scene-outlet","currentScreen","currentOutlet","data-scene-url","currentUrl","SceneElementView","element","dataContext","queryResults","componentOutputs","role","aria-modal","aria-label","data-scene-dialog"],"mappings":";;;;;;;;;;;;AAqCA;;;;;;IAOO,SAASA,mBAAAA,CAAoB,EAAEC,OAAO,EAAEC,OAAAA,GAAU,EAAE,EAAEC,aAAa,EAAEC,QAAQ,EAAEC,YAAAA,GAAe,EAAE,EAAEC,OAAO,EAAEC,YAAY,EAAEC,MAAM,EAA4B,EAAA;AAC9J,IAAA,MAAM,CAACC,aAAAA,CAAc,GAAGC,cAAAA,CAAS,IAAMC,iDAAAA,EAAAA,CAAAA;IACvC,MAAMC,UAAAA,GAAaC,cAAQ,IAAML,MAAAA,IAAUM,gCAAgBC,MAAAA,CAAOC,IAAI,CAACf,OAAAA,CAAAA,EAAUM,YAAAA,CAAAA,EAAe;AAACA,QAAAA,YAAAA;AAAcC,QAAAA,MAAAA;AAAQP,QAAAA;AAAQ,KAAA,CAAA;AAC/H,IAAA,MAAMgB,YAAAA,GAAeJ,aAAAA,CAAQ,IAAMK,uCAAAA,CAAoBjB,OAAAA,CAAAA,EAAU;AAACA,QAAAA;AAAQ,KAAA,CAAA;AAC1E,IAAA,MAAMkB,QAAQC,mDAAAA,CAA0Bd,OAAAA,IAAWG,eAAeG,UAAAA,EAAYT,aAAAA,EAAeE,cAAcY,YAAAA,EAAcV,YAAAA,CAAAA;IACzH,MAAMc,aAAAA,GAAgBR,aAAAA,CAAQ,KAAO;AAAEZ,YAAAA,OAAAA;AAASG,YAAAA;AAAS,SAAA,CAAA,EAAI;AAACA,QAAAA,QAAAA;AAAUH,QAAAA;AAAQ,KAAA,CAAA;AAEhF,IAAA,MAAMqB,MAAAA,GAASrB,OAAO,CAACkB,KAAAA,CAAMI,aAAa,CAAC;IAC3C,MAAMC,MAAAA,GAASL,MAAMM,aAAa,GAAGvB,OAAO,CAACiB,KAAAA,CAAMM,aAAa,CAAC,GAAGC,SAAAA;AAEpE,IAAA,qBAAOC,cAAA,CAACC,8CAAAA,EAAAA;QAAwBT,KAAAA,EAAOA,KAAAA;gCAAOU,eAAA,CAACC,sCAAmBC,QAAQ,EAAA;YAACZ,KAAAA,EAAOE,aAAAA;;8BAC9EM,cAAA,CAACK,KAAAA,EAAAA;oBAAIC,mBAAAA,EAAmBd,KAAAA,CAAMI,aAAa,KAAKJ,KAAAA,CAAMe,aAAa,GAAGf,KAAAA,CAAMgB,aAAa,IAAI,SAAA,GAAY,SAAA;AAAWC,oBAAAA,gBAAAA,EAAgBjB,MAAMkB,UAAU;AAC/If,oBAAAA,QAAAA,EAAAA,MAAAA,kBAAUK,cAAA,CAACW,iCAAAA,EAAAA;wBAAiBC,OAAAA,EAASjB,MAAAA;wBAAQlB,QAAAA,EAAUA,QAAAA;AAAUoC,wBAAAA,WAAAA,EAAanC,aAAamC,WAAW;AAAEC,wBAAAA,YAAAA,EAAcpC,aAAaoC,YAAY;AAAEC,wBAAAA,gBAAAA,EAAkBrC,aAAaqC;;;AAEpLlB,gBAAAA,MAAAA,kBAAUG,cAAA,CAACK,KAAAA,EAAAA;oBAAIW,IAAAA,EAAK,QAAA;oBAASC,YAAAA,EAAW,MAAA;AAAOC,oBAAAA,YAAAA,EAAY1B,MAAMM,aAAa;AAAEqB,oBAAAA,mBAAAA,EAAmB3B,MAAMM,aAAa;AACnH,oBAAA,QAAA,gBAAAE,cAAA,CAACW,iCAAAA,EAAAA;wBAAiBC,OAAAA,EAASf,MAAAA;wBAAQpB,QAAAA,EAAUA,QAAAA;AAAUoC,wBAAAA,WAAAA,EAAanC,aAAamC,WAAW;AAAEC,wBAAAA,YAAAA,EAAcpC,aAAaoC,YAAY;AAAEC,wBAAAA,gBAAAA,EAAkBrC,aAAaqC;;;;;;AAGlL;;"}
+{"version":3,"file":"SceneNavigationHost.js","sources":["../../../navigation/SceneNavigationHost.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, useMemo, useState } from 'react';\nimport { BindingScope } from '@cratis/scene.engine';\nimport { DestinationReference, SceneElement } from '@cratis/scene.model';\nimport { SceneElementView } from '../SceneElementView';\nimport { ComponentRegistry } from '../renderer';\nimport { createMemorySceneHistory } from './createMemorySceneHistory';\nimport { SceneHistory } from './SceneHistory';\nimport { SceneNavigationProvider } from './SceneNavigationContext';\nimport { SceneRoute } from './SceneRoute';\nimport { sceneRoutesFrom } from './sceneRoutesFrom';\nimport { collectOutletOwners } from './collectOutletOwners';\nimport { SceneOutletContext } from './SceneOutletContext';\nimport { useSceneHistoryNavigation } from './useSceneHistoryNavigation';\nimport { SceneNavigationModel } from './region/SceneNavigationModel';\nimport { SceneNavigationModelProvider } from './region/SceneNavigationModelContext';\nimport { navigationDestinations } from './region/navigationDestinations';\n\nexport interface SceneNavigationHostProps {\n    screens: Record<string, SceneElement>;\n    dialogs?: Record<string, SceneElement>;\n    initialScreen: string;\n    registry: ComponentRegistry;\n    bindingScope?: BindingScope;\n\n    /**\n     * Where entries are recorded. `createBrowserSceneHistory()` drives the address bar, so deep links,\n     * refresh and back/forward work; the default is an in-memory history for embedded hosts.\n     */\n    history?: SceneHistory;\n\n    /** The destinations the application navigates to, so their route overrides can be deep linked. */\n    destinations?: DestinationReference[];\n\n    /**\n     * The application's structure and navigation. Navigation regions rendered inside the host (`NavigationRegionView`) read it,\n     * and - when `destinations` is not given - the destinations of every navigation item become the deep-linkable ones.\n     */\n    navigationModel?: SceneNavigationModel;\n\n    /**\n     * Wraps the primary outlet in the application's chrome - a topbar, a sidebar, a toolbar. The chrome is part of the host,\n     * so it stays mounted while the screens inside it change and navigation regions keep their state.\n     */\n    frame?(content: ReactNode): ReactNode;\n\n    /** An explicit route table, used instead of the one derived from `screens` and `destinations`. */\n    routes?: SceneRoute[];\n}\n\n/**\n * Executes Scene destinations against an in-memory rendered hierarchy: a destination into a nested outlet -\n * one a screen declares with `core:outlet` - places its screen there and keeps the screens above it, to any\n * depth; any other screen route replaces the primary region,\n * dialog destinations render dialog content over the screen that opened them, and external destinations\n * only report their resolved action. Every navigation is a history entry.\n */\nexport function SceneNavigationHost({ screens, dialogs = {}, initialScreen, registry, bindingScope = {}, history, destinations: authoredDestinations, routes, navigationModel, frame }: SceneNavigationHostProps) {\n    const destinations = useMemo(\n        () => authoredDestinations ?? (navigationModel ? navigationDestinations(navigationModel.structure, navigationModel.navigation, navigationModel.screenFor) : undefined),\n        [authoredDestinations, navigationModel]);\n    const [memoryHistory] = useState(() => createMemorySceneHistory());\n    const routeTable = useMemo(() => routes ?? sceneRoutesFrom(Object.keys(screens), destinations), [destinations, routes, screens]);\n    const outletOwners = useMemo(() => collectOutletOwners(screens), [screens]);\n    const value = useSceneHistoryNavigation(history ?? memoryHistory, routeTable, initialScreen, bindingScope, outletOwners, destinations);\n    const outletContext = useMemo(() => ({ screens, registry }), [registry, screens]);\n\n    const screen = screens[value.primaryScreen];\n    const dialog = value.currentDialog ? dialogs[value.currentDialog] : undefined;\n\n    const outlet = <div data-scene-outlet={value.primaryScreen === value.currentScreen ? value.currentOutlet ?? 'primary' : 'primary'} data-scene-url={value.currentUrl}>\n        {screen && <SceneElementView element={screen} registry={registry} dataContext={bindingScope.dataContext} queryResults={bindingScope.queryResults} componentOutputs={bindingScope.componentOutputs} />}\n    </div>;\n    const page = <SceneNavigationProvider value={value}><SceneOutletContext.Provider value={outletContext}>\n        {frame ? frame(outlet) : outlet}\n        {dialog && <div role='dialog' aria-modal='true' aria-label={value.currentDialog} data-scene-dialog={value.currentDialog}>\n            <SceneElementView element={dialog} registry={registry} dataContext={bindingScope.dataContext} queryResults={bindingScope.queryResults} componentOutputs={bindingScope.componentOutputs} />\n        </div>}\n    </SceneOutletContext.Provider></SceneNavigationProvider>;\n\n    return navigationModel ? <SceneNavigationModelProvider model={navigationModel}>{page}</SceneNavigationModelProvider> : page;\n}\n"],"names":["SceneNavigationHost","screens","dialogs","initialScreen","registry","bindingScope","history","destinations","authoredDestinations","routes","navigationModel","frame","useMemo","navigationDestinations","structure","navigation","screenFor","undefined","memoryHistory","useState","createMemorySceneHistory","routeTable","sceneRoutesFrom","Object","keys","outletOwners","collectOutletOwners","value","useSceneHistoryNavigation","outletContext","screen","primaryScreen","dialog","currentDialog","outlet","_jsx","div","data-scene-outlet","currentScreen","currentOutlet","data-scene-url","currentUrl","SceneElementView","element","dataContext","queryResults","componentOutputs","page","SceneNavigationProvider","_jsxs","SceneOutletContext","Provider","role","aria-modal","aria-label","data-scene-dialog","SceneNavigationModelProvider","model"],"mappings":"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"}

package/dist/cjs/navigation/region/NavigationRegionClassNames.js

@@ -0,0 +1,21 @@
+'use strict';
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The class names a {@link NavigationRegionView} puts on its nodes. The renderer carries no look of its own: a package
+ * gives the nodes its vocabulary (`blueprint.default` uses its `layout-menu` classes) and a stylesheet does the rest.
+ * State is always on data attributes as well - `data-active`, `data-expanded`, `data-read-only`, `data-origin`.
+ */ /** The class names used when a host passes none. */ const defaultNavigationRegionClassNames = {
+    root: 'scene-nav',
+    list: 'scene-nav-list',
+    item: 'scene-nav-item',
+    link: 'scene-nav-link',
+    icon: 'scene-nav-icon',
+    label: 'scene-nav-label',
+    toggle: 'scene-nav-toggle',
+    submenu: 'scene-nav-submenu'
+};
+
+exports.defaultNavigationRegionClassNames = defaultNavigationRegionClassNames;
+//# sourceMappingURL=NavigationRegionClassNames.js.map

package/dist/cjs/navigation/region/NavigationRegionClassNames.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationRegionClassNames.js","sources":["../../../../navigation/region/NavigationRegionClassNames.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\n\n/**\n * The class names a {@link NavigationRegionView} puts on its nodes. The renderer carries no look of its own: a package\n * gives the nodes its vocabulary (`blueprint.default` uses its `layout-menu` classes) and a stylesheet does the rest.\n * State is always on data attributes as well - `data-active`, `data-expanded`, `data-read-only`, `data-origin`.\n */\nexport interface NavigationRegionClassNames {\n    /** The `nav` landmark. */\n    root: string;\n\n    /** Each list of items. */\n    list: string;\n\n    /** Each item's `li`. */\n    item: string;\n\n    /** The link of an item. */\n    link: string;\n\n    /** The icon of an item. */\n    icon: string;\n\n    /** The title of an item. */\n    label: string;\n\n    /** The button that expands or collapses an item's sub-items. */\n    toggle: string;\n\n    /** The list of an item's sub-items. */\n    submenu: string;\n}\n\n/** The class names used when a host passes none. */\nexport const defaultNavigationRegionClassNames: NavigationRegionClassNames = {\n    root: 'scene-nav',\n    list: 'scene-nav-list',\n    item: 'scene-nav-item',\n    link: 'scene-nav-link',\n    icon: 'scene-nav-icon',\n    label: 'scene-nav-label',\n    toggle: 'scene-nav-toggle',\n    submenu: 'scene-nav-submenu',\n};\n"],"names":["defaultNavigationRegionClassNames","root","list","item","link","icon","label","toggle","submenu"],"mappings":";;AAAA;AACA;AAGA;;;;AAIC,yDA4BM,MAAMA,iCAAAA,GAAgE;IACzEC,IAAAA,EAAM,WAAA;IACNC,IAAAA,EAAM,gBAAA;IACNC,IAAAA,EAAM,gBAAA;IACNC,IAAAA,EAAM,gBAAA;IACNC,IAAAA,EAAM,gBAAA;IACNC,KAAAA,EAAO,iBAAA;IACPC,MAAAA,EAAQ,kBAAA;IACRC,OAAAA,EAAS;AACb;;"}

package/dist/cjs/navigation/region/NavigationRegionView.js

@@ -0,0 +1,283 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var scene_model = require('@cratis/scene.model');
+var scene_engine = require('@cratis/scene.engine');
+var SceneIcon = require('../../icons/SceneIcon.js');
+var IconAdapterContext = require('../../icons/IconAdapterContext.js');
+var resolveDestination = require('../resolveDestination.js');
+var SceneNavigationContext = require('../SceneNavigationContext.js');
+var NavigationRegionClassNames = require('./NavigationRegionClassNames.js');
+var SceneNavigationModelContext = require('./SceneNavigationModelContext.js');
+var currentModuleOf = require('./currentModuleOf.js');
+var navigationItemActive = require('./navigationItemActive.js');
+var navigationItemDestination = require('./navigationItemDestination.js');
+
+function itemKey(path) {
+    return path.join('/');
+}
+function containsActive(item, isActive) {
+    return isActive(item) || (item.children ?? []).some((child)=>containsActive(child, isActive));
+}
+/**
+ * Renders the effective navigation of one region - a topbar or a sidebar - for the application or a module.
+ *
+ * - **Items** come from `effectiveNavigation`, so inherit/extend/override is already applied; nothing here re-implements
+ *   it. A topbar is flat; a sidebar nests, collapses, and expands the parents of the active item.
+ * - **Active state** follows what the navigation host shows: an item is active (`aria-current`, `data-active`) when the
+ *   screen it opens is the one in its slot, so items rendering into different slots are active at once.
+ * - **Activation** goes through the enclosing navigation host (`navigate`), which renders the target in the item's slot -
+ *   the `outlet` of the destination; outside a host it announces `cratis.scene.navigate`.
+ * - **Authorization**: `isVisible` of the model hides items, it does not disable them.
+ * - **Keyboard**: arrows (left/right in a topbar, up/down in a sidebar), Home and End move between items; in a sidebar
+ *   right expands and left collapses (or goes to the parent).
+ *
+ * Nothing here draws design chrome: items carry `data-read-only` and `data-origin` for a design layer to style.
+ */ function NavigationRegionView({ region, module, application = false, model: modelProp, label, expand = 'active', classNames, renderIcon, renderAdornment, hrefFor, onActivate }) {
+    const contextModel = SceneNavigationModelContext.useSceneNavigationModel();
+    const model = modelProp ?? contextModel;
+    if (!model) throw new Error('NavigationRegionView needs a navigation model: pass `model` or render it inside a SceneNavigationModelProvider.');
+    const navigation = react.useContext(SceneNavigationContext.SceneNavigationContextInternal);
+    const adapters = IconAdapterContext.useIconAdapters();
+    const names = {
+        ...NavigationRegionClassNames.defaultNavigationRegionClassNames,
+        ...classNames
+    };
+    const index = react.useMemo(()=>model.structure instanceof scene_engine.ApplicationStructureIndex ? model.structure : new scene_engine.ApplicationStructureIndex(model.structure), [
+        model.structure
+    ]);
+    const screenFor = model.screenFor ?? navigationItemDestination.defaultScreenFor;
+    const sidebar = region === scene_model.NavigationRegionKind.Sidebar;
+    const placement = react.useMemo(()=>({
+            primaryScreen: navigation?.primaryScreen,
+            outlets: navigation?.outlets ?? {}
+        }), [
+        navigation?.outlets,
+        navigation?.primaryScreen
+    ]);
+    const scope = application ? undefined : module ?? currentModuleOf.currentModuleOf(index, placement.primaryScreen);
+    const resolved = react.useMemo(()=>scene_engine.effectiveNavigation(index, model.navigation, scope, region), [
+        index,
+        model.navigation,
+        scope,
+        region
+    ]);
+    const isActive = (item)=>placement.primaryScreen !== undefined && navigationItemActive.navigationItemActive(item, {
+            primaryScreen: placement.primaryScreen,
+            outlets: placement.outlets
+        }, screenFor, !sidebar);
+    const isVisible = model.isVisible ?? (()=>true);
+    const visible = react.useMemo(()=>{
+        const keep = (items)=>items.filter(isVisible).map((item)=>item.children ? {
+                    ...item,
+                    children: keep(item.children)
+                } : item);
+        return keep(resolved.items);
+    }, [
+        resolved,
+        model.isVisible
+    ]);
+    const activeKey = JSON.stringify([
+        placement.primaryScreen,
+        placement.outlets,
+        scope
+    ]);
+    const [toggled, setToggled] = react.useState({
+        key: activeKey,
+        state: {}
+    });
+    const overrides = toggled.key === activeKey ? toggled.state : {};
+    const [focused, setFocused] = react.useState();
+    const root = react.useRef(null);
+    const isExpanded = (item, key)=>overrides[key] ?? (expand === 'all' || containsActive(item, isActive));
+    const toggle = (key, expanded)=>setToggled({
+            key: activeKey,
+            state: {
+                ...overrides,
+                [key]: expanded
+            }
+        });
+    const activate = (item)=>{
+        const destination = navigationItemDestination.navigationItemDestination(item, screenFor);
+        if (destination === undefined) return;
+        if (navigation) {
+            navigation.navigate(destination);
+        } else {
+            globalThis.dispatchEvent(new CustomEvent('cratis.scene.navigate', {
+                detail: {
+                    targetScreen: destination.screen ?? '',
+                    destination,
+                    item
+                }
+            }));
+        }
+        onActivate?.(item, destination);
+    };
+    const links = ()=>Array.from(root.current?.querySelectorAll('[data-scene-nav-link]') ?? []);
+    const focusLink = (element)=>{
+        if (!element) return;
+        setFocused(element.getAttribute('data-scene-nav-link') ?? undefined);
+        element.focus();
+    };
+    const onKeyDown = (event)=>{
+        const all = links();
+        const position = all.findIndex((link)=>link === document.activeElement);
+        if (position < 0) return;
+        const next = sidebar ? 'ArrowDown' : 'ArrowRight';
+        const previous = sidebar ? 'ArrowUp' : 'ArrowLeft';
+        const current = all[position];
+        const key = current.getAttribute('data-scene-nav-link');
+        const owner = current.closest('[data-scene-nav-item]');
+        const hasChildren = owner?.getAttribute('data-scene-nav-parent') === 'true';
+        const expanded = owner?.getAttribute('data-expanded') === 'true';
+        let target;
+        if (event.key === next) target = all[Math.min(position + 1, all.length - 1)];
+        else if (event.key === previous) target = all[Math.max(position - 1, 0)];
+        else if (event.key === 'Home') target = all[0];
+        else if (event.key === 'End') target = all[all.length - 1];
+        else if (sidebar && event.key === 'ArrowRight' && hasChildren) {
+            if (!expanded) toggle(key, true);
+            else target = all[position + 1];
+        } else if (sidebar && event.key === 'ArrowLeft') {
+            if (hasChildren && expanded) toggle(key, false);
+            else {
+                const parent = owner?.parentElement?.closest('[data-scene-nav-item]')?.querySelector(':scope > [data-scene-nav-link]');
+                if (parent) target = parent;
+            }
+        } else return;
+        event.preventDefault();
+        focusLink(target);
+    };
+    const tabStop = focused ?? undefined;
+    const firstActive = (items, path)=>{
+        for (const item of items){
+            const key = itemKey([
+                ...path,
+                item.id
+            ]);
+            if (isActive(item)) return key;
+            const inner = firstActive(item.children ?? [], [
+                ...path,
+                item.id
+            ]);
+            if (inner !== undefined && isExpanded(item, key)) return inner;
+        }
+        return undefined;
+    };
+    const firstKey = visible.length > 0 ? itemKey([
+        visible[0].id
+    ]) : undefined;
+    const stop = tabStop ?? firstActive(visible, []) ?? firstKey;
+    const icon = (item)=>{
+        if (item.icon === undefined) return null;
+        const drawn = renderIcon ? renderIcon(item.icon) : adapters ? (()=>{
+            const reference = scene_model.parseIconReference(item.icon);
+            return reference ? /*#__PURE__*/ jsxRuntime.jsx(SceneIcon.SceneIcon, {
+                reference: reference,
+                adapters: adapters
+            }) : null;
+        })() : null;
+        return drawn === null ? null : /*#__PURE__*/ jsxRuntime.jsx("span", {
+            className: names.icon,
+            "aria-hidden": "true",
+            "data-scene-icon": item.icon,
+            children: drawn
+        });
+    };
+    const renderItems = (items, path, level)=>items.map((item)=>{
+            const key = itemKey([
+                ...path,
+                item.id
+            ]);
+            const destination = navigationItemDestination.navigationItemDestination(item, screenFor);
+            const active = isActive(item);
+            const children = item.children ?? [];
+            const parent = sidebar && children.length > 0;
+            const expanded = parent && isExpanded(item, key);
+            const url = destination ? resolveDestination.resolveDestination(destination).url : undefined;
+            const href = destination ? hrefFor ? hrefFor(destination, url) : url ? `#/${url}` : undefined : undefined;
+            const onClick = (event)=>{
+                if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) return;
+                event.preventDefault();
+                if (destination) activate(item);
+                else if (parent) toggle(key, !expanded);
+            };
+            const content = /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                children: [
+                    icon(item),
+                    /*#__PURE__*/ jsxRuntime.jsx("span", {
+                        className: names.label,
+                        children: item.title
+                    }),
+                    renderAdornment?.(item)
+                ]
+            });
+            return /*#__PURE__*/ jsxRuntime.jsxs("li", {
+                className: names.item,
+                "data-scene-nav-item": item.id,
+                "data-scene-nav-parent": parent ? 'true' : undefined,
+                "data-active": active,
+                "data-active-descendant": !active && parent && children.some((child)=>containsActive(child, isActive)) ? true : undefined,
+                "data-expanded": parent ? expanded : undefined,
+                "data-origin": item.origin,
+                "data-read-only": item.readOnly,
+                "data-slot": item.slot,
+                "data-level": level,
+                children: [
+                    destination || parent ? /*#__PURE__*/ jsxRuntime.jsx("a", {
+                        className: names.link,
+                        href: href ?? '#',
+                        "data-scene-nav-link": key,
+                        "aria-current": active ? 'page' : undefined,
+                        "aria-expanded": parent && !destination ? expanded : undefined,
+                        tabIndex: key === stop ? 0 : -1,
+                        onClick: onClick,
+                        onFocus: ()=>setFocused(key),
+                        children: content
+                    }) : /*#__PURE__*/ jsxRuntime.jsx("span", {
+                        className: names.link,
+                        "aria-disabled": "true",
+                        "data-scene-nav-link": key,
+                        tabIndex: -1,
+                        children: content
+                    }),
+                    parent && /*#__PURE__*/ jsxRuntime.jsx("button", {
+                        type: "button",
+                        className: names.toggle,
+                        tabIndex: -1,
+                        "aria-expanded": expanded,
+                        "aria-controls": `${key}-items`,
+                        "aria-label": `${expanded ? 'Collapse' : 'Expand'} ${item.title}`,
+                        onClick: ()=>toggle(key, !expanded)
+                    }),
+                    parent && expanded && /*#__PURE__*/ jsxRuntime.jsx("ul", {
+                        id: `${key}-items`,
+                        className: `${names.list} ${names.submenu}`,
+                        children: renderItems(children, [
+                            ...path,
+                            item.id
+                        ], level + 1)
+                    })
+                ]
+            }, item.id);
+        });
+    return /*#__PURE__*/ jsxRuntime.jsx("nav", {
+        ref: root,
+        className: names.root,
+        "aria-label": label ?? (sidebar ? 'Sidebar' : 'Topbar'),
+        "data-scene-nav-region": region,
+        "data-scene-nav-sources": resolved.sources.kind,
+        "data-scene-nav-sources-label": resolved.sources.label,
+        "data-scene-nav-module": scope,
+        "data-scene-nav-mode": resolved.mode,
+        onKeyDown: onKeyDown,
+        children: /*#__PURE__*/ jsxRuntime.jsx("ul", {
+            className: names.list,
+            children: renderItems(visible, [], 0)
+        })
+    });
+}
+
+exports.NavigationRegionView = NavigationRegionView;
+//# sourceMappingURL=NavigationRegionView.js.map