@cratis/scene.react 3.6.0 → 4.0.0

package/core/CoreButton.tsx

@@ -6,10 +6,10 @@ import { RegisteredComponentProps } from '../renderer';
 /**
  * The `core:button` component - part of the minimum vocabulary a `ui profile` can always fall back to.
  */
-export function CoreButton({ element, slots }: RegisteredComponentProps) {
+export function CoreButton({ element, slots, interactions }: RegisteredComponentProps) {
     const label = typeof element.properties.label === 'string' ? element.properties.label : '';
     return (
-        <button type="button" data-scene-id={element.id}>
+        <button type="button" data-scene-id={element.id} {...interactions}>
             {label}
             {slots.content}
         </button>

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 createReactRenderer = require('./renderer/createReactRenderer.js');
+require('./interactions/useInteractions.js');
 
 /**
  * Renders a Scene element tree with the real `Scene.React` renderer - the WYSIWYG building block Studio's

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 { renderElement, BindingResolver } from '@cratis/scene.engine';\nimport { SceneElement } from '@cratis/scene.model';\nimport { ComponentRegistry, createReactRenderer } from './renderer';\n\nexport interface SceneElementViewProps {\n    element: SceneElement;\n    registry: ComponentRegistry;\n    resolveBinding: BindingResolver;\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({ element, registry, resolveBinding }: SceneElementViewProps) {\n    const renderer = useMemo(() => createReactRenderer(registry), [registry]);\n    return <>{renderElement(element, renderer, resolveBinding)}</>;\n}\n"],"names":["SceneElementView","element","registry","resolveBinding","renderer","useMemo","createReactRenderer","_jsx","_Fragment","renderElement"],"mappings":";;;;;;;AAcA;;;IAIO,SAASA,gBAAAA,CAAiB,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,cAAc,EAAyB,EAAA;AACzF,IAAA,MAAMC,QAAAA,GAAWC,aAAAA,CAAQ,IAAMC,uCAAAA,CAAoBJ,QAAAA,CAAAA,EAAW;AAACA,QAAAA;AAAS,KAAA,CAAA;IACxE,qBAAOK,cAAA,CAAAC,mBAAA,EAAA;AAAGC,QAAAA,QAAAA,EAAAA,0BAAAA,CAAcR,SAASG,QAAAA,EAAUD,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 { renderElement, BindingResolver } from '@cratis/scene.engine';\nimport { SceneElement } from '@cratis/scene.model';\nimport { ComponentRegistry, createReactRenderer } from './renderer';\n\nexport interface SceneElementViewProps {\n    element: SceneElement;\n    registry: ComponentRegistry;\n    resolveBinding: BindingResolver;\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({ element, registry, resolveBinding }: SceneElementViewProps) {\n    const renderer = useMemo(() => createReactRenderer(registry), [registry]);\n    return <>{renderElement(element, renderer, resolveBinding)}</>;\n}\n"],"names":["SceneElementView","element","registry","resolveBinding","renderer","useMemo","createReactRenderer","_jsx","_Fragment","renderElement"],"mappings":";;;;;;;;AAcA;;;IAIO,SAASA,gBAAAA,CAAiB,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,cAAc,EAAyB,EAAA;AACzF,IAAA,MAAMC,QAAAA,GAAWC,aAAAA,CAAQ,IAAMC,uCAAAA,CAAoBJ,QAAAA,CAAAA,EAAW;AAACA,QAAAA;AAAS,KAAA,CAAA;IACxE,qBAAOK,cAAA,CAAAC,mBAAA,EAAA;AAAGC,QAAAA,QAAAA,EAAAA,0BAAAA,CAAcR,SAASG,QAAAA,EAAUD,cAAAA;;AAC/C;;"}

package/dist/cjs/core/CoreButton.js

@@ -6,11 +6,12 @@ var jsxRuntime = require('react/jsx-runtime');
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 /**
  * The `core:button` component - part of the minimum vocabulary a `ui profile` can always fall back to.
- */ function CoreButton({ element, slots }) {
+ */ function CoreButton({ element, slots, interactions }) {
     const label = typeof element.properties.label === 'string' ? element.properties.label : '';
     return /*#__PURE__*/ jsxRuntime.jsxs("button", {
         type: "button",
         "data-scene-id": element.id,
+        ...interactions,
         children: [
             label,
             slots.content

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

@@ -1 +1 @@
-{"version":3,"file":"CoreButton.js","sources":["../../../core/CoreButton.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\n/**\n * The `core:button` component - part of the minimum vocabulary a `ui profile` can always fall back to.\n */\nexport function CoreButton({ element, slots }: RegisteredComponentProps) {\n    const label = typeof element.properties.label === 'string' ? element.properties.label : '';\n    return (\n        <button type=\"button\" data-scene-id={element.id}>\n            {label}\n            {slots.content}\n        </button>\n    );\n}\n"],"names":["CoreButton","element","slots","label","properties","_jsxs","button","type","data-scene-id","id","content"],"mappings":";;;;AAAA;AACA;AAIA;;AAEC,IACM,SAASA,UAAAA,CAAW,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;AACnE,IAAA,MAAMC,KAAAA,GAAQ,OAAOF,OAAAA,CAAQG,UAAU,CAACD,KAAK,KAAK,QAAA,GAAWF,OAAAA,CAAQG,UAAU,CAACD,KAAK,GAAG,EAAA;AACxF,IAAA,qBACIE,eAAA,CAACC,QAAAA,EAAAA;QAAOC,IAAAA,EAAK,QAAA;AAASC,QAAAA,eAAAA,EAAeP,QAAQQ,EAAE;;AAC1CN,YAAAA,KAAAA;AACAD,YAAAA,KAAAA,CAAMQ;;;AAGnB;;"}
+{"version":3,"file":"CoreButton.js","sources":["../../../core/CoreButton.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\n/**\n * The `core:button` component - part of the minimum vocabulary a `ui profile` can always fall back to.\n */\nexport function CoreButton({ element, slots, interactions }: RegisteredComponentProps) {\n    const label = typeof element.properties.label === 'string' ? element.properties.label : '';\n    return (\n        <button type=\"button\" data-scene-id={element.id} {...interactions}>\n            {label}\n            {slots.content}\n        </button>\n    );\n}\n"],"names":["CoreButton","element","slots","interactions","label","properties","_jsxs","button","type","data-scene-id","id","content"],"mappings":";;;;AAAA;AACA;AAIA;;IAGO,SAASA,UAAAA,CAAW,EAAEC,OAAO,EAAEC,KAAK,EAAEC,YAAY,EAA4B,EAAA;AACjF,IAAA,MAAMC,KAAAA,GAAQ,OAAOH,OAAAA,CAAQI,UAAU,CAACD,KAAK,KAAK,QAAA,GAAWH,OAAAA,CAAQI,UAAU,CAACD,KAAK,GAAG,EAAA;AACxF,IAAA,qBACIE,eAAA,CAACC,QAAAA,EAAAA;QAAOC,IAAAA,EAAK,QAAA;AAASC,QAAAA,eAAAA,EAAeR,QAAQS,EAAE;AAAG,QAAA,GAAGP,YAAY;;AAC5DC,YAAAA,KAAAA;AACAF,YAAAA,KAAAA,CAAMS;;;AAGnB;;"}

package/dist/cjs/index.js

@@ -3,6 +3,7 @@
 var SceneElementView = require('./SceneElementView.js');
 var UnresolvedComponent = require('./renderer/UnresolvedComponent.js');
 var createReactRenderer = require('./renderer/createReactRenderer.js');
+var InteractiveComponent = require('./renderer/InteractiveComponent.js');
 var CoreText = require('./core/CoreText.js');
 var CoreButton = require('./core/CoreButton.js');
 var CoreCard = require('./core/CoreCard.js');
@@ -14,12 +15,16 @@ var extractNavigationItem = require('./NavBar/extractNavigationItem.js');
 var ScenePackageBundle = require('./packages/ScenePackageBundle.js');
 var themeTokens = require('./theme/themeTokens.js');
 var SceneThemeProvider = require('./theme/SceneThemeProvider.js');
+var InteractionScope = require('./interactions/InteractionScope.js');
+var useInteractions = require('./interactions/useInteractions.js');
+var createBrowserDispatcher = require('./interactions/createBrowserDispatcher.js');
 
 
 
 exports.SceneElementView = SceneElementView.SceneElementView;
 exports.UnresolvedComponent = UnresolvedComponent.UnresolvedComponent;
 exports.createReactRenderer = createReactRenderer.createReactRenderer;
+exports.InteractiveComponent = InteractiveComponent.InteractiveComponent;
 exports.CoreText = CoreText.CoreText;
 exports.CoreButton = CoreButton.CoreButton;
 exports.CoreCard = CoreCard.CoreCard;
@@ -47,4 +52,9 @@ exports.themeTokenPrefix = themeTokens.themeTokenPrefix;
 exports.themeTokenProperty = themeTokens.themeTokenProperty;
 exports.SceneThemeProvider = SceneThemeProvider.SceneThemeProvider;
 exports.useSceneTheme = SceneThemeProvider.useSceneTheme;
+exports.InteractionScope = InteractionScope.InteractionScope;
+exports.attachmentFor = InteractionScope.attachmentFor;
+exports.useInteractionScope = InteractionScope.useInteractionScope;
+exports.useInteractions = useInteractions.useInteractions;
+exports.createBrowserDispatcher = createBrowserDispatcher.createBrowserDispatcher;
 //# sourceMappingURL=index.js.map

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/interactions/InteractionScope.js

@@ -0,0 +1,65 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+const Scope = /*#__PURE__*/ react.createContext(undefined);
+/**
+ * Provides the dispatcher, the resolution context and the enclosing attachments to everything beneath it.
+ *
+ * Attachments nest: a scope inside another scope appends to it rather than replacing it, so an element's
+ * enclosing chain is assembled by the tree rather than reconstructed at each leaf. That is what keeps the
+ * additive rule true in a renderer - a module's behavior is still in scope at a button six levels down,
+ * without the button knowing the module exists.
+ */ function InteractionScope({ children, dispatcher, context, attachments, onFindings }) {
+    const enclosing = react.useContext(Scope);
+    const value = react.useMemo(()=>({
+            dispatcher,
+            context,
+            attachments: [
+                ...enclosing?.attachments ?? [],
+                ...attachments
+            ],
+            onFindings: onFindings ?? enclosing?.onFindings
+        }), [
+        dispatcher,
+        context,
+        attachments,
+        onFindings,
+        enclosing
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx(Scope.Provider, {
+        value: value,
+        children: children
+    });
+}
+/**
+ * Reads the enclosing interaction scope.
+ *
+ * @returns The scope, or `undefined` when the tree is rendered without one.
+ * @remarks
+ * Rendering without a scope is legitimate - a preview surface showing what a screen looks like has nothing to
+ * dispatch to - so this answers `undefined` rather than throwing. What must not happen is an element silently
+ * appearing interactive when nothing can run; {@link useInteractions} is where that is decided.
+ */ function useInteractionScope() {
+    return react.useContext(Scope);
+}
+/**
+ * Builds the attachment list for one element, so a caller does not have to know the shape.
+ *
+ * @param level What is being attached to, used when reporting.
+ * @param behaviors The behaviors attached there.
+ * @returns The attachment, or an empty list when there are none.
+ */ function attachmentFor(level, behaviors) {
+    return behaviors && behaviors.length > 0 ? [
+        {
+            level,
+            behaviors
+        }
+    ] : [];
+}
+
+exports.InteractionScope = InteractionScope;
+exports.attachmentFor = attachmentFor;
+exports.useInteractionScope = useInteractionScope;
+//# sourceMappingURL=InteractionScope.js.map

package/dist/cjs/interactions/InteractionScope.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InteractionScope.js","sources":["../../../interactions/InteractionScope.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, useMemo } from 'react';\nimport { ActionDispatcher, BehaviorAttachment, InteractionContext, InteractionFinding } from '@cratis/scene.engine';\nimport { Behavior } from '@cratis/scene.model';\n\n/**\n * What the elements beneath a scope need in order to run an interaction.\n */\nexport interface InteractionScopeValue {\n    /** The seam that performs the effects. */\n    dispatcher: ActionDispatcher;\n\n    /** How bindings and localization resolve. */\n    context: InteractionContext;\n\n    /** The attachments enclosing this point, outermost first. */\n    attachments: BehaviorAttachment[];\n\n    /** Where a finding goes. Absent means nothing is listening, which is itself worth knowing. */\n    onFindings?: (findings: InteractionFinding[]) => void;\n}\n\nconst Scope = createContext<InteractionScopeValue | undefined>(undefined);\n\nexport interface InteractionScopeProps extends InteractionScopeValue {\n    children: ReactNode;\n}\n\n/**\n * Provides the dispatcher, the resolution context and the enclosing attachments to everything beneath it.\n *\n * Attachments nest: a scope inside another scope appends to it rather than replacing it, so an element's\n * enclosing chain is assembled by the tree rather than reconstructed at each leaf. That is what keeps the\n * additive rule true in a renderer - a module's behavior is still in scope at a button six levels down,\n * without the button knowing the module exists.\n */\nexport function InteractionScope({ children, dispatcher, context, attachments, onFindings }: InteractionScopeProps) {\n    const enclosing = useContext(Scope);\n\n    const value = useMemo<InteractionScopeValue>(() => ({\n        dispatcher,\n        context,\n        attachments: [...(enclosing?.attachments ?? []), ...attachments],\n        onFindings: onFindings ?? enclosing?.onFindings,\n    }), [dispatcher, context, attachments, onFindings, enclosing]);\n\n    return <Scope.Provider value={value}>{children}</Scope.Provider>;\n}\n\n/**\n * Reads the enclosing interaction scope.\n *\n * @returns The scope, or `undefined` when the tree is rendered without one.\n * @remarks\n * Rendering without a scope is legitimate - a preview surface showing what a screen looks like has nothing to\n * dispatch to - so this answers `undefined` rather than throwing. What must not happen is an element silently\n * appearing interactive when nothing can run; {@link useInteractions} is where that is decided.\n */\nexport function useInteractionScope(): InteractionScopeValue | undefined {\n    return useContext(Scope);\n}\n\n/**\n * Builds the attachment list for one element, so a caller does not have to know the shape.\n *\n * @param level What is being attached to, used when reporting.\n * @param behaviors The behaviors attached there.\n * @returns The attachment, or an empty list when there are none.\n */\nexport function attachmentFor(level: string, behaviors?: Behavior[]): BehaviorAttachment[] {\n    return behaviors && behaviors.length > 0 ? [{ level, behaviors }] : [];\n}\n"],"names":["Scope","createContext","undefined","InteractionScope","children","dispatcher","context","attachments","onFindings","enclosing","useContext","value","useMemo","_jsx","Provider","useInteractionScope","attachmentFor","level","behaviors","length"],"mappings":";;;;;AAwBA,MAAMA,sBAAQC,mBAAAA,CAAiDC,SAAAA,CAAAA;AAM/D;;;;;;;AAOC,IACM,SAASC,gBAAAA,CAAiB,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,OAAO,EAAEC,WAAW,EAAEC,UAAU,EAAyB,EAAA;AAC9G,IAAA,MAAMC,YAAYC,gBAAAA,CAAWV,KAAAA,CAAAA;IAE7B,MAAMW,KAAAA,GAAQC,aAAAA,CAA+B,KAAO;AAChDP,YAAAA,UAAAA;AACAC,YAAAA,OAAAA;YACAC,WAAAA,EAAa;AAAKE,gBAAAA,GAAAA,SAAAA,EAAWF,eAAe,EAAE;AAAMA,gBAAAA,GAAAA;AAAY,aAAA;AAChEC,YAAAA,UAAAA,EAAYA,cAAcC,SAAAA,EAAWD;AACzC,SAAA,CAAA,EAAI;AAACH,QAAAA,UAAAA;AAAYC,QAAAA,OAAAA;AAASC,QAAAA,WAAAA;AAAaC,QAAAA,UAAAA;AAAYC,QAAAA;AAAU,KAAA,CAAA;IAE7D,qBAAOI,cAAA,CAACb,MAAMc,QAAQ,EAAA;QAACH,KAAAA,EAAOA,KAAAA;AAAQP,QAAAA,QAAAA,EAAAA;;AAC1C;AAEA;;;;;;;;AAQC,IACM,SAASW,mBAAAA,GAAAA;AACZ,IAAA,OAAOL,gBAAAA,CAAWV,KAAAA,CAAAA;AACtB;AAEA;;;;;;AAMC,IACM,SAASgB,aAAAA,CAAcC,KAAa,EAAEC,SAAsB,EAAA;AAC/D,IAAA,OAAOA,SAAAA,IAAaA,SAAAA,CAAUC,MAAM,GAAG,CAAA,GAAI;AAAC,QAAA;AAAEF,YAAAA,KAAAA;AAAOC,YAAAA;AAAU;AAAE,KAAA,GAAG,EAAE;AAC1E;;;;"}

package/dist/cjs/interactions/createBrowserDispatcher.js

@@ -0,0 +1,102 @@
+'use strict';
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * Creates the dispatcher a browser host uses.
+ *
+ * This is the only place in Scene.React that knows an action has to *happen*. Everything about which actions
+ * run and in what order is the engine's, which is why this file is a list of one-line delegations and holds no
+ * rules of its own.
+ *
+ * @param host What the surrounding application can actually do.
+ * @returns The {@link ActionDispatcher}.
+ */ function createBrowserDispatcher(host = {}) {
+    const unsupported = (action)=>{
+        host.onUnsupported?.(action);
+        console.warn(`[scene] The host cannot '${action}', so the interaction stopped there.`);
+    };
+    return {
+        async executeCommand (command, args) {
+            if (!host.executeCommand) {
+                unsupported(`execute ${command}`);
+                // Reported as a failure, so the document's own `on failure` runs. Answering success would
+                // make a command that never reached a backend look like one that worked.
+                return {
+                    isSuccess: false,
+                    validationErrors: []
+                };
+            }
+            return host.executeCommand(command, args);
+        },
+        navigate (screen, args) {
+            if (host.navigate) {
+                host.navigate(screen, args);
+                return;
+            }
+            unsupported(`navigate to ${screen}`);
+        },
+        navigateBack () {
+            if (host.navigateBack) {
+                host.navigateBack();
+                return;
+            }
+            unsupported('navigate back');
+        },
+        async openDialog (dialogTemplate, args) {
+            if (!host.openDialog) {
+                unsupported(`open dialog ${dialogTemplate}`);
+                return {
+                    isConfirmed: false
+                };
+            }
+            return host.openDialog(dialogTemplate, args);
+        },
+        closeDialog () {
+            if (host.closeDialog) {
+                host.closeDialog();
+                return;
+            }
+            unsupported('close dialog');
+        },
+        async refreshQuery (query) {
+            if (host.refreshQuery) {
+                await host.refreshQuery(query);
+                return;
+            }
+            unsupported(`refresh ${query}`);
+        },
+        setState (target, value) {
+            if (host.setState) {
+                host.setState(target, value);
+                return;
+            }
+            unsupported(`set ${target}`);
+        },
+        notify (level, message) {
+            if (host.notify) {
+                host.notify(level, message);
+                return;
+            }
+            // The console is a poor notification, but it is a real one - and a host that has not wired
+            // notifications yet should still see what the document wanted to say.
+            console.log(`[scene:${level}] ${message}`);
+        },
+        async confirm (message) {
+            if (host.confirm) return host.confirm(message);
+            // The browser's own prompt is the honest default: a confirm exists to gate what follows, so
+            // answering `true` without asking anyone would remove the gate rather than approximate it.
+            return typeof globalThis.confirm === 'function' ? globalThis.confirm(message) : false;
+        },
+        async raise (trigger, args) {
+            if (host.raise) {
+                await host.raise(trigger, args);
+                return;
+            }
+            unsupported(`raise ${trigger}`);
+        }
+    };
+}
+
+exports.createBrowserDispatcher = createBrowserDispatcher;
+//# sourceMappingURL=createBrowserDispatcher.js.map

package/dist/cjs/interactions/createBrowserDispatcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createBrowserDispatcher.js","sources":["../../../interactions/createBrowserDispatcher.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 { ActionDispatcher, CommandOutcome, DialogOutcome } from '@cratis/scene.engine';\nimport { NotificationLevel } from '@cratis/scene.model';\n\n/**\n * What a host has to supply for an interaction to reach anything real.\n *\n * Every member is optional and every one that is missing is *reported* rather than quietly ignored. A host\n * that cannot execute commands is a legitimate state - a preview surface, a design tool - but a button that\n * appears to work and does nothing is not.\n */\nexport interface BrowserDispatcherHost {\n    /** Submits a command. The transport belongs to the host: Scene does not know what a backend is. */\n    executeCommand?: (command: string, args: Record<string, unknown>) => Promise<CommandOutcome>;\n\n    /** Navigates to a screen. The URL belongs to the host, which is why no route is constructed here. */\n    navigate?: (screen: string, args: Record<string, unknown>) => void;\n\n    /** Goes back. */\n    navigateBack?: () => void;\n\n    /** Opens a dialog and answers with what the user did. */\n    openDialog?: (dialogTemplate: string, args: Record<string, unknown>) => Promise<DialogOutcome>;\n\n    /** Closes the open dialog. */\n    closeDialog?: () => void;\n\n    /** Re-runs a query. */\n    refreshQuery?: (query: string) => Promise<void>;\n\n    /** Writes screen state. */\n    setState?: (target: string, value: unknown) => void;\n\n    /** Surfaces a message. Falls back to the console rather than to nothing. */\n    notify?: (level: NotificationLevel, message: string) => void;\n\n    /** Asks the user to confirm. Falls back to the browser's own prompt. */\n    confirm?: (message: string) => Promise<boolean>;\n\n    /** Raises an application trigger. */\n    raise?: (trigger: string, args: Record<string, unknown>) => Promise<void>;\n\n    /** Where an unsupported action is reported. */\n    onUnsupported?: (action: string) => void;\n}\n\n/**\n * Creates the dispatcher a browser host uses.\n *\n * This is the only place in Scene.React that knows an action has to *happen*. Everything about which actions\n * run and in what order is the engine's, which is why this file is a list of one-line delegations and holds no\n * rules of its own.\n *\n * @param host What the surrounding application can actually do.\n * @returns The {@link ActionDispatcher}.\n */\nexport function createBrowserDispatcher(host: BrowserDispatcherHost = {}): ActionDispatcher {\n    const unsupported = (action: string) => {\n        host.onUnsupported?.(action);\n        console.warn(`[scene] The host cannot '${action}', so the interaction stopped there.`);\n    };\n\n    return {\n        async executeCommand(command, args) {\n            if (!host.executeCommand) {\n                unsupported(`execute ${command}`);\n\n                // Reported as a failure, so the document's own `on failure` runs. Answering success would\n                // make a command that never reached a backend look like one that worked.\n                return { isSuccess: false, validationErrors: [] };\n            }\n\n            return host.executeCommand(command, args);\n        },\n\n        navigate(screen, args) {\n            if (host.navigate) {\n                host.navigate(screen, args);\n                return;\n            }\n\n            unsupported(`navigate to ${screen}`);\n        },\n\n        navigateBack() {\n            if (host.navigateBack) {\n                host.navigateBack();\n                return;\n            }\n\n            unsupported('navigate back');\n        },\n\n        async openDialog(dialogTemplate, args) {\n            if (!host.openDialog) {\n                unsupported(`open dialog ${dialogTemplate}`);\n                return { isConfirmed: false };\n            }\n\n            return host.openDialog(dialogTemplate, args);\n        },\n\n        closeDialog() {\n            if (host.closeDialog) {\n                host.closeDialog();\n                return;\n            }\n\n            unsupported('close dialog');\n        },\n\n        async refreshQuery(query) {\n            if (host.refreshQuery) {\n                await host.refreshQuery(query);\n                return;\n            }\n\n            unsupported(`refresh ${query}`);\n        },\n\n        setState(target, value) {\n            if (host.setState) {\n                host.setState(target, value);\n                return;\n            }\n\n            unsupported(`set ${target}`);\n        },\n\n        notify(level, message) {\n            if (host.notify) {\n                host.notify(level, message);\n                return;\n            }\n\n            // The console is a poor notification, but it is a real one - and a host that has not wired\n            // notifications yet should still see what the document wanted to say.\n            console.log(`[scene:${level}] ${message}`);\n        },\n\n        async confirm(message) {\n            if (host.confirm) return host.confirm(message);\n\n            // The browser's own prompt is the honest default: a confirm exists to gate what follows, so\n            // answering `true` without asking anyone would remove the gate rather than approximate it.\n            return typeof globalThis.confirm === 'function' ? globalThis.confirm(message) : false;\n        },\n\n        async raise(trigger, args) {\n            if (host.raise) {\n                await host.raise(trigger, args);\n                return;\n            }\n\n            unsupported(`raise ${trigger}`);\n        },\n    };\n}\n"],"names":["createBrowserDispatcher","host","unsupported","action","onUnsupported","console","warn","executeCommand","command","args","isSuccess","validationErrors","navigate","screen","navigateBack","openDialog","dialogTemplate","isConfirmed","closeDialog","refreshQuery","query","setState","target","value","notify","level","message","log","confirm","globalThis","raise","trigger"],"mappings":"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"}

package/dist/cjs/interactions/useInteractions.js

@@ -0,0 +1,122 @@
+'use strict';
+
+var react = require('react');
+var scene_engine = require('@cratis/scene.engine');
+var scene_model = require('@cratis/scene.model');
+var InteractionScope = require('./InteractionScope.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+const domTriggers = [
+    [
+        'onClick',
+        scene_model.InteractionTriggerKind.Click
+    ],
+    [
+        'onDoubleClick',
+        scene_model.InteractionTriggerKind.DoubleClick
+    ],
+    [
+        'onChange',
+        scene_model.InteractionTriggerKind.Change
+    ],
+    [
+        'onSubmit',
+        scene_model.InteractionTriggerKind.Submit
+    ],
+    [
+        'onSelect',
+        scene_model.InteractionTriggerKind.Select
+    ]
+];
+/**
+ * Wires the behaviors attached to an element to the events that start them.
+ *
+ * The hook resolves and runs; it decides nothing. Which bindings a trigger runs, in what order, and where a
+ * sequence stops are all the engine's, so a different renderer inherits the same semantics instead of
+ * reimplementing them - and so all of it stays testable without a DOM.
+ *
+ * Lifecycle triggers are handled here rather than by the caller because React is what knows when an element
+ * mounts: `load` and `unload` follow the element, and `enter` and `leave` follow the screen. An `interval`
+ * becomes a timer that is cleared on unmount, because a document declaring one is asking for it to run while
+ * the thing it is attached to is on screen and not afterwards.
+ *
+ * @param level What is being attached to, used when reporting a finding.
+ * @param behaviors The behaviors attached to this element.
+ * @returns The handlers to spread onto the rendered element.
+ */ function useInteractions(level, behaviors) {
+    const scope = InteractionScope.useInteractionScope();
+    const attachments = react.useMemo(()=>[
+            ...scope?.attachments ?? [],
+            ...InteractionScope.attachmentFor(level, behaviors)
+        ], [
+        scope,
+        level,
+        behaviors
+    ]);
+    const run = react.useCallback(async (kind)=>{
+        if (!scope) return;
+        const result = await scene_engine.runBindings(scene_engine.resolveBehaviors(attachments, kind), scope.dispatcher, scope.context);
+        if (result.findings.length > 0) scope.onFindings?.(result.findings);
+    }, [
+        scope,
+        attachments
+    ]);
+    // Mount and unmount, for the element and for the screen it is on. Running the unload and leave bindings
+    // from the cleanup is what makes them reliable: React guarantees it, a component remembering to call
+    // something on the way out does not.
+    react.useEffect(()=>{
+        void run(scene_model.InteractionTriggerKind.Load);
+        void run(scene_model.InteractionTriggerKind.Enter);
+        return ()=>{
+            void run(scene_model.InteractionTriggerKind.Unload);
+            void run(scene_model.InteractionTriggerKind.Leave);
+        };
+    }, [
+        run
+    ]);
+    react.useEffect(()=>{
+        const intervals = scene_engine.resolveIntervalBehaviors(attachments);
+        if (intervals.length === 0 || !scope) return;
+        const timers = intervals.map((candidate)=>{
+            const seconds = candidate.binding.trigger.seconds ?? 0;
+            return setInterval(()=>void scene_engine.runBindings([
+                    candidate
+                ], scope.dispatcher, scope.context), Math.max(seconds, 1) * 1000);
+        });
+        return ()=>timers.forEach(clearInterval);
+    }, [
+        attachments,
+        scope
+    ]);
+    return react.useMemo(()=>{
+        const handlers = {};
+        if (!scope) return handlers;
+        for (const [handler, kind] of domTriggers){
+            // Nothing attached for this trigger means no handler at all. Attaching an empty one would make
+            // every element look interactive and would stop clicks reaching whatever encloses it.
+            if (scene_engine.resolveBehaviors(attachments, kind).length === 0) continue;
+            if (handler === 'onSubmit') {
+                handlers.onSubmit = (event)=>{
+                    event.preventDefault();
+                    void run(kind);
+                };
+                continue;
+            }
+            handlers[handler] = (event)=>{
+                // An interaction that ran here is handled here. Without this, a click on a row inside a table
+                // that both declare `on click` would run the table's twice: once for the row, once on the way up.
+                event?.stopPropagation();
+                void run(kind);
+            };
+        }
+        return handlers;
+    }, [
+        scope,
+        attachments,
+        run
+    ]);
+}
+
+exports.useInteractions = useInteractions;
+//# sourceMappingURL=useInteractions.js.map

package/dist/cjs/interactions/useInteractions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInteractions.js","sources":["../../../interactions/useInteractions.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 { useCallback, useEffect, useMemo } from 'react';\nimport { BehaviorAttachment, resolveBehaviors, resolveIntervalBehaviors, runBindings } from '@cratis/scene.engine';\nimport { Behavior, InteractionTriggerKind } from '@cratis/scene.model';\nimport { attachmentFor, useInteractionScope } from './InteractionScope';\n\n/**\n * The DOM handlers an element should spread onto whatever it renders.\n *\n * Only the handlers a document actually asks for are present. An element with no `on click` gets no `onClick`,\n * so it does not become clickable - and, just as importantly, does not swallow the click from something\n * enclosing it that does.\n */\nexport interface InteractionHandlers {\n    onClick?: (event: { stopPropagation(): void }) => void;\n    onDoubleClick?: (event: { stopPropagation(): void }) => void;\n    onChange?: () => void;\n    onSubmit?: (event: { preventDefault(): void }) => void;\n    onSelect?: () => void;\n}\n\nconst domTriggers: [keyof InteractionHandlers, InteractionTriggerKind][] = [\n    ['onClick', InteractionTriggerKind.Click],\n    ['onDoubleClick', InteractionTriggerKind.DoubleClick],\n    ['onChange', InteractionTriggerKind.Change],\n    ['onSubmit', InteractionTriggerKind.Submit],\n    ['onSelect', InteractionTriggerKind.Select],\n];\n\n/**\n * Wires the behaviors attached to an element to the events that start them.\n *\n * The hook resolves and runs; it decides nothing. Which bindings a trigger runs, in what order, and where a\n * sequence stops are all the engine's, so a different renderer inherits the same semantics instead of\n * reimplementing them - and so all of it stays testable without a DOM.\n *\n * Lifecycle triggers are handled here rather than by the caller because React is what knows when an element\n * mounts: `load` and `unload` follow the element, and `enter` and `leave` follow the screen. An `interval`\n * becomes a timer that is cleared on unmount, because a document declaring one is asking for it to run while\n * the thing it is attached to is on screen and not afterwards.\n *\n * @param level What is being attached to, used when reporting a finding.\n * @param behaviors The behaviors attached to this element.\n * @returns The handlers to spread onto the rendered element.\n */\nexport function useInteractions(level: string, behaviors?: Behavior[]): InteractionHandlers {\n    const scope = useInteractionScope();\n\n    const attachments = useMemo<BehaviorAttachment[]>(\n        () => [...(scope?.attachments ?? []), ...attachmentFor(level, behaviors)],\n        [scope, level, behaviors]);\n\n    const run = useCallback(async (kind: InteractionTriggerKind) => {\n        if (!scope) return;\n\n        const result = await runBindings(resolveBehaviors(attachments, kind), scope.dispatcher, scope.context);\n        if (result.findings.length > 0) scope.onFindings?.(result.findings);\n    }, [scope, attachments]);\n\n    // Mount and unmount, for the element and for the screen it is on. Running the unload and leave bindings\n    // from the cleanup is what makes them reliable: React guarantees it, a component remembering to call\n    // something on the way out does not.\n    useEffect(() => {\n        void run(InteractionTriggerKind.Load);\n        void run(InteractionTriggerKind.Enter);\n\n        return () => {\n            void run(InteractionTriggerKind.Unload);\n            void run(InteractionTriggerKind.Leave);\n        };\n    }, [run]);\n\n    useEffect(() => {\n        const intervals = resolveIntervalBehaviors(attachments);\n        if (intervals.length === 0 || !scope) return;\n\n        const timers = intervals.map(candidate => {\n            const seconds = (candidate.binding.trigger as { seconds?: number }).seconds ?? 0;\n            return setInterval(\n                () => void runBindings([candidate], scope.dispatcher, scope.context),\n                Math.max(seconds, 1) * 1000);\n        });\n\n        return () => timers.forEach(clearInterval);\n    }, [attachments, scope]);\n\n    return useMemo(() => {\n        const handlers: InteractionHandlers = {};\n        if (!scope) return handlers;\n\n        for (const [handler, kind] of domTriggers) {\n            // Nothing attached for this trigger means no handler at all. Attaching an empty one would make\n            // every element look interactive and would stop clicks reaching whatever encloses it.\n            if (resolveBehaviors(attachments, kind).length === 0) continue;\n\n            if (handler === 'onSubmit') {\n                handlers.onSubmit = event => {\n                    event.preventDefault();\n                    void run(kind);\n                };\n                continue;\n            }\n\n            handlers[handler] = ((event?: { stopPropagation(): void }) => {\n                // An interaction that ran here is handled here. Without this, a click on a row inside a table\n                // that both declare `on click` would run the table's twice: once for the row, once on the way up.\n                event?.stopPropagation();\n                void run(kind);\n            }) as never;\n        }\n\n        return handlers;\n    }, [scope, attachments, run]);\n}\n"],"names":["domTriggers","InteractionTriggerKind","Click","DoubleClick","Change","Submit","Select","useInteractions","level","behaviors","scope","useInteractionScope","attachments","useMemo","attachmentFor","run","useCallback","kind","result","runBindings","resolveBehaviors","dispatcher","context","findings","length","onFindings","useEffect","Load","Enter","Unload","Leave","intervals","resolveIntervalBehaviors","timers","map","candidate","seconds","binding","trigger","setInterval","Math","max","forEach","clearInterval","handlers","handler","onSubmit","event","preventDefault","stopPropagation"],"mappings":"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"}

package/dist/cjs/renderer/InteractiveComponent.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var react = require('react');
+require('react/jsx-runtime');
+var useInteractions = require('../interactions/useInteractions.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * Resolves an element's interactions and hands them to the component that renders it.
+ *
+ * This exists as a component rather than as a call inside the renderer because resolving them is a hook, and a
+ * hook cannot run inside the plain function a {@link Renderer} is. Keeping the renderer plain is what lets the
+ * same element tree be rendered by something that is not React at all.
+ */ function InteractiveComponent({ component, element, slots }) {
+    const interactions = useInteractions.useInteractions(element.id, element.behaviors);
+    return /*#__PURE__*/ react.createElement(component, {
+        element,
+        slots,
+        interactions
+    });
+}
+
+exports.InteractiveComponent = InteractiveComponent;
+//# sourceMappingURL=InteractiveComponent.js.map

package/dist/cjs/renderer/InteractiveComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InteractiveComponent.js","sources":["../../../renderer/InteractiveComponent.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 { ComponentType, ReactNode, createElement } from 'react';\nimport { ExternalComponent } from '@cratis/scene.model';\nimport { useInteractions } from '../interactions';\nimport { RegisteredComponentProps } from './ComponentRegistry';\n\nexport interface InteractiveComponentProps {\n    component: ComponentType<RegisteredComponentProps>;\n    element: ExternalComponent;\n    slots: Record<string, ReactNode[]>;\n}\n\n/**\n * Resolves an element's interactions and hands them to the component that renders it.\n *\n * This exists as a component rather than as a call inside the renderer because resolving them is a hook, and a\n * hook cannot run inside the plain function a {@link Renderer} is. Keeping the renderer plain is what lets the\n * same element tree be rendered by something that is not React at all.\n */\nexport function InteractiveComponent({ component, element, slots }: InteractiveComponentProps) {\n    const interactions = useInteractions(element.id, element.behaviors);\n    return createElement(component, { element, slots, interactions });\n}\n"],"names":["InteractiveComponent","component","element","slots","interactions","useInteractions","id","behaviors","createElement"],"mappings":";;;;;;AAAA;AACA;AAaA;;;;;;IAOO,SAASA,oBAAAA,CAAqB,EAAEC,SAAS,EAAEC,OAAO,EAAEC,KAAK,EAA6B,EAAA;AACzF,IAAA,MAAMC,eAAeC,+BAAAA,CAAgBH,OAAAA,CAAQI,EAAE,EAAEJ,QAAQK,SAAS,CAAA;AAClE,IAAA,qBAAOC,oBAAcP,SAAAA,EAAW;AAAEC,QAAAA,OAAAA;AAASC,QAAAA,KAAAA;AAAOC,QAAAA;AAAa,KAAA,CAAA;AACnE;;"}

package/dist/cjs/renderer/createReactRenderer.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var react = require('react');
+var InteractiveComponent = require('./InteractiveComponent.js');
 var panelLayout = require('./panelLayout.js');
 var UnresolvedComponent = require('./UnresolvedComponent.js');
 
@@ -31,8 +32,9 @@ var UnresolvedComponent = require('./UnresolvedComponent.js');
         },
         renderExternalComponent (element, slots) {
             const Component = registry[element.componentName] ?? UnresolvedComponent.UnresolvedComponent;
-            return /*#__PURE__*/ react.createElement(Component, {
+            return /*#__PURE__*/ react.createElement(InteractiveComponent.InteractiveComponent, {
                 key: element.id,
+                component: Component,
                 element,
                 slots
             });

package/dist/cjs/renderer/createReactRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"createReactRenderer.js","sources":["../../../renderer/createReactRenderer.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, createElement } from 'react';\nimport { Renderer } from '@cratis/scene.engine';\nimport { ContentControl, ExternalComponent, ItemsControl, Panel } from '@cratis/scene.model';\nimport { ComponentRegistry } from './ComponentRegistry';\nimport { childStyle, panelStyle } from './panelLayout';\nimport { UnresolvedComponent } from './UnresolvedComponent';\n\n/**\n * Creates a {@link Renderer} that turns a Scene element tree into React elements.\n *\n * `ItemsControl` and `ContentControl` render as plain wrapping `div`s. A `Panel` renders as the\n * arrangement it declares - a grid, a stack, a wrap or a dock - because that is what those panels are\n * for; see `panelLayout` for the mapping. Arranging a *layout's slots* by `flow`/`freeform` is a\n * different thing and stays Scene#4's, layered on top of this renderer rather than folded into it.\n */\nexport function createReactRenderer(registry: ComponentRegistry): Renderer<ReactNode> {\n    return {\n        renderContentControl(element: ContentControl, content: ReactNode): ReactNode {\n            return createElement('div', { key: element.id, 'data-scene-id': element.id, 'data-scene-kind': 'ContentControl' }, content);\n        },\n\n        renderItemsControl(element: ItemsControl, items: ReactNode[]): ReactNode {\n            return createElement('div', { key: element.id, 'data-scene-id': element.id, 'data-scene-kind': 'ItemsControl' }, items);\n        },\n\n        renderExternalComponent(element: ExternalComponent, slots: Record<string, ReactNode[]>): ReactNode {\n            const Component = registry[element.componentName] ?? UnresolvedComponent;\n            return createElement(Component, { key: element.id, element, slots });\n        },\n\n        renderPanel(element: Panel, children: ReactNode[]): ReactNode {\n            // The rendered children arrive in the same order as `element.children`, so a panel that places\n            // its children individually - a grid cell, a docked edge - can wrap each one in the box that\n            // places it without needing to re-render anything.\n            const placed = children.map((child, index) => {\n                const style = childStyle(element, element.children[index], index);\n                return style\n                    ? createElement('div', { key: `${element.id}-${index}`, 'data-scene-placement': index, style }, child)\n                    : child;\n            });\n\n            return createElement(\n                'div',\n                { key: element.id, 'data-scene-id': element.id, 'data-scene-kind': 'Panel', style: panelStyle(element) },\n                placed);\n        },\n    };\n}\n"],"names":["createReactRenderer","registry","renderContentControl","element","content","createElement","key","id","renderItemsControl","items","renderExternalComponent","slots","Component","componentName","UnresolvedComponent","renderPanel","children","placed","map","child","index","style","childStyle","panelStyle"],"mappings":";;;;;;AAAA;AACA;AASA;;;;;;;IAQO,SAASA,mBAAAA,CAAoBC,QAA2B,EAAA;IAC3D,OAAO;QACHC,oBAAAA,CAAAA,CAAqBC,OAAuB,EAAEC,OAAkB,EAAA;AAC5D,YAAA,qBAAOC,oBAAc,KAAA,EAAO;AAAEC,gBAAAA,GAAAA,EAAKH,QAAQI,EAAE;AAAE,gBAAA,eAAA,EAAiBJ,QAAQI,EAAE;gBAAE,iBAAA,EAAmB;aAAiB,EAAGH,OAAAA,CAAAA;AACvH,QAAA,CAAA;QAEAI,kBAAAA,CAAAA,CAAmBL,OAAqB,EAAEM,KAAkB,EAAA;AACxD,YAAA,qBAAOJ,oBAAc,KAAA,EAAO;AAAEC,gBAAAA,GAAAA,EAAKH,QAAQI,EAAE;AAAE,gBAAA,eAAA,EAAiBJ,QAAQI,EAAE;gBAAE,iBAAA,EAAmB;aAAe,EAAGE,KAAAA,CAAAA;AACrH,QAAA,CAAA;QAEAC,uBAAAA,CAAAA,CAAwBP,OAA0B,EAAEQ,KAAkC,EAAA;AAClF,YAAA,MAAMC,YAAYX,QAAQ,CAACE,OAAAA,CAAQU,aAAa,CAAC,IAAIC,uCAAAA;AACrD,YAAA,qBAAOT,oBAAcO,SAAAA,EAAW;AAAEN,gBAAAA,GAAAA,EAAKH,QAAQI,EAAE;AAAEJ,gBAAAA,OAAAA;AAASQ,gBAAAA;AAAM,aAAA,CAAA;AACtE,QAAA,CAAA;QAEAI,WAAAA,CAAAA,CAAYZ,OAAc,EAAEa,QAAqB,EAAA;;;;AAI7C,YAAA,MAAMC,MAAAA,GAASD,QAAAA,CAASE,GAAG,CAAC,CAACC,KAAAA,EAAOC,KAAAA,GAAAA;AAChC,gBAAA,MAAMC,QAAQC,sBAAAA,CAAWnB,OAAAA,EAASA,QAAQa,QAAQ,CAACI,MAAM,EAAEA,KAAAA,CAAAA;gBAC3D,OAAOC,KAAAA,iBACDhB,oBAAc,KAAA,EAAO;AAAEC,oBAAAA,GAAAA,EAAK,GAAGH,OAAAA,CAAQI,EAAE,CAAC,CAAC,EAAEa,KAAAA,CAAAA,CAAO;oBAAE,sBAAA,EAAwBA,KAAAA;AAAOC,oBAAAA;AAAM,iBAAA,EAAGF,KAAAA,CAAAA,GAC9FA,KAAAA;AACV,YAAA,CAAA,CAAA;AAEA,YAAA,qBAAOd,oBACH,KAAA,EACA;AAAEC,gBAAAA,GAAAA,EAAKH,QAAQI,EAAE;AAAE,gBAAA,eAAA,EAAiBJ,QAAQI,EAAE;gBAAE,iBAAA,EAAmB,OAAA;AAASc,gBAAAA,KAAAA,EAAOE,sBAAAA,CAAWpB,OAAAA;aAAS,EACvGc,MAAAA,CAAAA;AACR,QAAA;AACJ,KAAA;AACJ;;"}
+{"version":3,"file":"createReactRenderer.js","sources":["../../../renderer/createReactRenderer.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, createElement } from 'react';\nimport { Renderer } from '@cratis/scene.engine';\nimport { ContentControl, ExternalComponent, ItemsControl, Panel } from '@cratis/scene.model';\nimport { ComponentRegistry } from './ComponentRegistry';\nimport { InteractiveComponent } from './InteractiveComponent';\nimport { childStyle, panelStyle } from './panelLayout';\nimport { UnresolvedComponent } from './UnresolvedComponent';\n\n/**\n * Creates a {@link Renderer} that turns a Scene element tree into React elements.\n *\n * `ItemsControl` and `ContentControl` render as plain wrapping `div`s. A `Panel` renders as the\n * arrangement it declares - a grid, a stack, a wrap or a dock - because that is what those panels are\n * for; see `panelLayout` for the mapping. Arranging a *layout's slots* by `flow`/`freeform` is a\n * different thing and stays Scene#4's, layered on top of this renderer rather than folded into it.\n */\nexport function createReactRenderer(registry: ComponentRegistry): Renderer<ReactNode> {\n    return {\n        renderContentControl(element: ContentControl, content: ReactNode): ReactNode {\n            return createElement('div', { key: element.id, 'data-scene-id': element.id, 'data-scene-kind': 'ContentControl' }, content);\n        },\n\n        renderItemsControl(element: ItemsControl, items: ReactNode[]): ReactNode {\n            return createElement('div', { key: element.id, 'data-scene-id': element.id, 'data-scene-kind': 'ItemsControl' }, items);\n        },\n\n        renderExternalComponent(element: ExternalComponent, slots: Record<string, ReactNode[]>): ReactNode {\n            const Component = registry[element.componentName] ?? UnresolvedComponent;\n            return createElement(InteractiveComponent, { key: element.id, component: Component, element, slots });\n        },\n\n        renderPanel(element: Panel, children: ReactNode[]): ReactNode {\n            // The rendered children arrive in the same order as `element.children`, so a panel that places\n            // its children individually - a grid cell, a docked edge - can wrap each one in the box that\n            // places it without needing to re-render anything.\n            const placed = children.map((child, index) => {\n                const style = childStyle(element, element.children[index], index);\n                return style\n                    ? createElement('div', { key: `${element.id}-${index}`, 'data-scene-placement': index, style }, child)\n                    : child;\n            });\n\n            return createElement(\n                'div',\n                { key: element.id, 'data-scene-id': element.id, 'data-scene-kind': 'Panel', style: panelStyle(element) },\n                placed);\n        },\n    };\n}\n"],"names":["createReactRenderer","registry","renderContentControl","element","content","createElement","key","id","renderItemsControl","items","renderExternalComponent","slots","Component","componentName","UnresolvedComponent","InteractiveComponent","component","renderPanel","children","placed","map","child","index","style","childStyle","panelStyle"],"mappings":";;;;;;;AAAA;AACA;AAUA;;;;;;;IAQO,SAASA,mBAAAA,CAAoBC,QAA2B,EAAA;IAC3D,OAAO;QACHC,oBAAAA,CAAAA,CAAqBC,OAAuB,EAAEC,OAAkB,EAAA;AAC5D,YAAA,qBAAOC,oBAAc,KAAA,EAAO;AAAEC,gBAAAA,GAAAA,EAAKH,QAAQI,EAAE;AAAE,gBAAA,eAAA,EAAiBJ,QAAQI,EAAE;gBAAE,iBAAA,EAAmB;aAAiB,EAAGH,OAAAA,CAAAA;AACvH,QAAA,CAAA;QAEAI,kBAAAA,CAAAA,CAAmBL,OAAqB,EAAEM,KAAkB,EAAA;AACxD,YAAA,qBAAOJ,oBAAc,KAAA,EAAO;AAAEC,gBAAAA,GAAAA,EAAKH,QAAQI,EAAE;AAAE,gBAAA,eAAA,EAAiBJ,QAAQI,EAAE;gBAAE,iBAAA,EAAmB;aAAe,EAAGE,KAAAA,CAAAA;AACrH,QAAA,CAAA;QAEAC,uBAAAA,CAAAA,CAAwBP,OAA0B,EAAEQ,KAAkC,EAAA;AAClF,YAAA,MAAMC,YAAYX,QAAQ,CAACE,OAAAA,CAAQU,aAAa,CAAC,IAAIC,uCAAAA;AACrD,YAAA,qBAAOT,oBAAcU,yCAAAA,EAAsB;AAAET,gBAAAA,GAAAA,EAAKH,QAAQI,EAAE;gBAAES,SAAAA,EAAWJ,SAAAA;AAAWT,gBAAAA,OAAAA;AAASQ,gBAAAA;AAAM,aAAA,CAAA;AACvG,QAAA,CAAA;QAEAM,WAAAA,CAAAA,CAAYd,OAAc,EAAEe,QAAqB,EAAA;;;;AAI7C,YAAA,MAAMC,MAAAA,GAASD,QAAAA,CAASE,GAAG,CAAC,CAACC,KAAAA,EAAOC,KAAAA,GAAAA;AAChC,gBAAA,MAAMC,QAAQC,sBAAAA,CAAWrB,OAAAA,EAASA,QAAQe,QAAQ,CAACI,MAAM,EAAEA,KAAAA,CAAAA;gBAC3D,OAAOC,KAAAA,iBACDlB,oBAAc,KAAA,EAAO;AAAEC,oBAAAA,GAAAA,EAAK,GAAGH,OAAAA,CAAQI,EAAE,CAAC,CAAC,EAAEe,KAAAA,CAAAA,CAAO;oBAAE,sBAAA,EAAwBA,KAAAA;AAAOC,oBAAAA;AAAM,iBAAA,EAAGF,KAAAA,CAAAA,GAC9FA,KAAAA;AACV,YAAA,CAAA,CAAA;AAEA,YAAA,qBAAOhB,oBACH,KAAA,EACA;AAAEC,gBAAAA,GAAAA,EAAKH,QAAQI,EAAE;AAAE,gBAAA,eAAA,EAAiBJ,QAAQI,EAAE;gBAAE,iBAAA,EAAmB,OAAA;AAASgB,gBAAAA,KAAAA,EAAOE,sBAAAA,CAAWtB,OAAAA;aAAS,EACvGgB,MAAAA,CAAAA;AACR,QAAA;AACJ,KAAA;AACJ;;"}

package/dist/esm/SceneElementView.js

@@ -2,6 +2,7 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { renderElement } from '@cratis/scene.engine';
 import { createReactRenderer } from './renderer/createReactRenderer.js';
+import './interactions/useInteractions.js';
 
 /**
  * Renders a Scene element tree with the real `Scene.React` renderer - the WYSIWYG building block Studio's

package/dist/esm/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 { renderElement, BindingResolver } from '@cratis/scene.engine';\nimport { SceneElement } from '@cratis/scene.model';\nimport { ComponentRegistry, createReactRenderer } from './renderer';\n\nexport interface SceneElementViewProps {\n    element: SceneElement;\n    registry: ComponentRegistry;\n    resolveBinding: BindingResolver;\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({ element, registry, resolveBinding }: SceneElementViewProps) {\n    const renderer = useMemo(() => createReactRenderer(registry), [registry]);\n    return <>{renderElement(element, renderer, resolveBinding)}</>;\n}\n"],"names":["SceneElementView","element","registry","resolveBinding","renderer","useMemo","createReactRenderer","_jsx","_Fragment","renderElement"],"mappings":";;;;;AAcA;;;IAIO,SAASA,gBAAAA,CAAiB,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,cAAc,EAAyB,EAAA;AACzF,IAAA,MAAMC,QAAAA,GAAWC,OAAAA,CAAQ,IAAMC,mBAAAA,CAAoBJ,QAAAA,CAAAA,EAAW;AAACA,QAAAA;AAAS,KAAA,CAAA;IACxE,qBAAOK,GAAA,CAAAC,QAAA,EAAA;AAAGC,QAAAA,QAAAA,EAAAA,aAAAA,CAAcR,SAASG,QAAAA,EAAUD,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 { renderElement, BindingResolver } from '@cratis/scene.engine';\nimport { SceneElement } from '@cratis/scene.model';\nimport { ComponentRegistry, createReactRenderer } from './renderer';\n\nexport interface SceneElementViewProps {\n    element: SceneElement;\n    registry: ComponentRegistry;\n    resolveBinding: BindingResolver;\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({ element, registry, resolveBinding }: SceneElementViewProps) {\n    const renderer = useMemo(() => createReactRenderer(registry), [registry]);\n    return <>{renderElement(element, renderer, resolveBinding)}</>;\n}\n"],"names":["SceneElementView","element","registry","resolveBinding","renderer","useMemo","createReactRenderer","_jsx","_Fragment","renderElement"],"mappings":";;;;;;AAcA;;;IAIO,SAASA,gBAAAA,CAAiB,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,cAAc,EAAyB,EAAA;AACzF,IAAA,MAAMC,QAAAA,GAAWC,OAAAA,CAAQ,IAAMC,mBAAAA,CAAoBJ,QAAAA,CAAAA,EAAW;AAACA,QAAAA;AAAS,KAAA,CAAA;IACxE,qBAAOK,GAAA,CAAAC,QAAA,EAAA;AAAGC,QAAAA,QAAAA,EAAAA,aAAAA,CAAcR,SAASG,QAAAA,EAAUD,cAAAA;;AAC/C;;"}

package/dist/esm/core/CoreButton.d.ts

@@ -1,3 +1,3 @@
 import { RegisteredComponentProps } from '../renderer';
-export declare function CoreButton({ element, slots }: RegisteredComponentProps): import("react").JSX.Element;
+export declare function CoreButton({ element, slots, interactions }: RegisteredComponentProps): import("react").JSX.Element;
 //# sourceMappingURL=CoreButton.d.ts.map

package/dist/esm/core/CoreButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CoreButton.d.ts","sourceRoot":"","sources":["../../../core/CoreButton.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAC;AAKvD,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,wBAAwB,+BAQtE"}
+{"version":3,"file":"CoreButton.d.ts","sourceRoot":"","sources":["../../../core/CoreButton.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAC;AAKvD,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,EAAE,wBAAwB,+BAQpF"}

package/dist/esm/core/CoreButton.js

@@ -4,11 +4,12 @@ import { jsxs } from 'react/jsx-runtime';
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 /**
  * The `core:button` component - part of the minimum vocabulary a `ui profile` can always fall back to.
- */ function CoreButton({ element, slots }) {
+ */ function CoreButton({ element, slots, interactions }) {
     const label = typeof element.properties.label === 'string' ? element.properties.label : '';
     return /*#__PURE__*/ jsxs("button", {
         type: "button",
         "data-scene-id": element.id,
+        ...interactions,
         children: [
             label,
             slots.content

package/dist/esm/core/CoreButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CoreButton.js","sources":["../../../core/CoreButton.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\n/**\n * The `core:button` component - part of the minimum vocabulary a `ui profile` can always fall back to.\n */\nexport function CoreButton({ element, slots }: RegisteredComponentProps) {\n    const label = typeof element.properties.label === 'string' ? element.properties.label : '';\n    return (\n        <button type=\"button\" data-scene-id={element.id}>\n            {label}\n            {slots.content}\n        </button>\n    );\n}\n"],"names":["CoreButton","element","slots","label","properties","_jsxs","button","type","data-scene-id","id","content"],"mappings":";;AAAA;AACA;AAIA;;AAEC,IACM,SAASA,UAAAA,CAAW,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;AACnE,IAAA,MAAMC,KAAAA,GAAQ,OAAOF,OAAAA,CAAQG,UAAU,CAACD,KAAK,KAAK,QAAA,GAAWF,OAAAA,CAAQG,UAAU,CAACD,KAAK,GAAG,EAAA;AACxF,IAAA,qBACIE,IAAA,CAACC,QAAAA,EAAAA;QAAOC,IAAAA,EAAK,QAAA;AAASC,QAAAA,eAAAA,EAAeP,QAAQQ,EAAE;;AAC1CN,YAAAA,KAAAA;AACAD,YAAAA,KAAAA,CAAMQ;;;AAGnB;;"}
+{"version":3,"file":"CoreButton.js","sources":["../../../core/CoreButton.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\n/**\n * The `core:button` component - part of the minimum vocabulary a `ui profile` can always fall back to.\n */\nexport function CoreButton({ element, slots, interactions }: RegisteredComponentProps) {\n    const label = typeof element.properties.label === 'string' ? element.properties.label : '';\n    return (\n        <button type=\"button\" data-scene-id={element.id} {...interactions}>\n            {label}\n            {slots.content}\n        </button>\n    );\n}\n"],"names":["CoreButton","element","slots","interactions","label","properties","_jsxs","button","type","data-scene-id","id","content"],"mappings":";;AAAA;AACA;AAIA;;IAGO,SAASA,UAAAA,CAAW,EAAEC,OAAO,EAAEC,KAAK,EAAEC,YAAY,EAA4B,EAAA;AACjF,IAAA,MAAMC,KAAAA,GAAQ,OAAOH,OAAAA,CAAQI,UAAU,CAACD,KAAK,KAAK,QAAA,GAAWH,OAAAA,CAAQI,UAAU,CAACD,KAAK,GAAG,EAAA;AACxF,IAAA,qBACIE,IAAA,CAACC,QAAAA,EAAAA;QAAOC,IAAAA,EAAK,QAAA;AAASC,QAAAA,eAAAA,EAAeR,QAAQS,EAAE;AAAG,QAAA,GAAGP,YAAY;;AAC5DC,YAAAA,KAAAA;AACAF,YAAAA,KAAAA,CAAMS;;;AAGnB;;"}

package/dist/esm/for_useInteractions/when_clicking_an_element_that_executes_a_command.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=when_clicking_an_element_that_executes_a_command.d.ts.map

package/dist/esm/for_useInteractions/when_clicking_an_element_that_executes_a_command.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"when_clicking_an_element_that_executes_a_command.d.ts","sourceRoot":"","sources":["../../../for_useInteractions/when_clicking_an_element_that_executes_a_command.tsx"],"names":[],"mappings":""}