@cratis/scene.components 4.16.0 → 4.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cratis/scene.components",
-    "version": "4.16.0",
+    "version": "4.17.0",
     "description": "The Cratis Components package: exposes @cratis/components' Arc-bound data, form and dialog composites as Scene components. Built on PrimeReact and Tailwind, and declares both as dependencies.",
     "keywords": [
         "cratis",
@@ -59,17 +59,17 @@
         "build-storybook": "storybook build"
     },
     "dependencies": {
-        "@cratis/scene.engine": "4.16.0",
-        "@cratis/scene.model": "4.16.0",
-        "@cratis/scene.react": "4.16.0"
+        "@cratis/scene.engine": "4.17.0",
+        "@cratis/scene.model": "4.17.0",
+        "@cratis/scene.react": "4.17.0"
     },
     "devDependencies": {
         "@cratis/arc": "22.50.5",
         "@cratis/arc.react": "22.50.5",
         "@cratis/components": "4.25.0",
-        "@cratis/scene.engine": "4.16.0",
-        "@cratis/scene.model": "4.16.0",
-        "@cratis/scene.react": "4.16.0",
+        "@cratis/scene.engine": "4.17.0",
+        "@cratis/scene.model": "4.17.0",
+        "@cratis/scene.react": "4.17.0",
         "@storybook/addon-links": "^10.6.1",
         "@storybook/react": "^10.6.1",
         "@storybook/react-vite": "^10.6.1",

package/toolbar/SceneToolbarButton.tsx

@@ -1,8 +1,10 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+import { useContext } from 'react';
 import { ToolbarButton } from '@cratis/components/Toolbar';
-import { RegisteredComponentProps } from '@cratis/scene.react';
+import { DestinationReference } from '@cratis/scene.model';
+import { RegisteredComponentProps, SceneNavigationContextInternal } from '@cratis/scene.react';
 import { booleanProperty, stringProperty, unionProperty } from '../properties';
 
 /** Which side of the button its tooltip appears on. */
@@ -16,8 +18,21 @@ const tooltipPositions = ['top', 'right', 'bottom', 'left'] as const;
  * icons. It defaults to the `text` property rather than to an empty string, so a button that has a
  * visible label is never left nameless.
  */
-export function SceneToolbarButton({ element }: RegisteredComponentProps) {
+/**
+ * A toolbar button. Its authored `destination` - a screen in an outlet, or a dialog - is executed by the
+ * enclosing navigation host; outside one it is announced with the host-neutral `cratis.scene.navigate` event.
+ * Interactions attached by the document run first.
+ */
+export function SceneToolbarButton({ element, interactions }: RegisteredComponentProps) {
     const text = stringProperty(element.properties, 'text');
+    const navigation = useContext(SceneNavigationContextInternal);
+    const destination = isDestination(element.properties.destination) ? element.properties.destination : undefined;
+    const onClick = () => {
+        interactions?.onClick?.({ stopPropagation: () => undefined });
+        if (!destination) return;
+        if (navigation) navigation.navigate(destination);
+        else globalThis.dispatchEvent(new CustomEvent('cratis.scene.navigate', { detail: { destination, element } }));
+    };
 
     return (
         <ToolbarButton
@@ -26,6 +41,13 @@ export function SceneToolbarButton({ element }: RegisteredComponentProps) {
             title={stringProperty(element.properties, 'title') ?? text ?? ''}
             active={booleanProperty(element.properties, 'active')}
             tooltipPosition={unionProperty(element.properties, 'tooltipPosition', tooltipPositions)}
+            onClick={onClick}
         />
     );
 }
+
+function isDestination(value: unknown): value is DestinationReference {
+    if (value === null || typeof value !== 'object' || Array.isArray(value)) return false;
+    const candidate = value as Record<string, unknown>;
+    return ['screen', 'module', 'route', 'dialog'].some(key => typeof candidate[key] === 'string');
+}