@cratis/scene.react 0.1.0

package/.storybook/main.ts

@@ -0,0 +1,31 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { StorybookConfig } from "@storybook/react-vite";
+import { dirname, join, resolve } from "path";
+import { fileURLToPath } from "url";
+import type { InlineConfig } from 'vite';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const config: StorybookConfig = {
+    // Scoped to the package root only (not `**`) so this glob never reaches into `dist/`, which would
+    // otherwise index both the source .stories.tsx and its own tsc-emitted .stories.js as duplicates.
+    stories: ["../*.stories.@(js|jsx|mjs|ts|tsx)"],
+    addons: [getAbsolutePath("@storybook/addon-links")],
+    framework: { name: getAbsolutePath("@storybook/react-vite"), options: {} },
+    async viteFinal(config: InlineConfig) {
+        config.resolve = config.resolve || {};
+        config.resolve.alias = {
+            ...config.resolve.alias,
+            '@cratis/scene.engine': resolve(__dirname, '../../engine/index.ts'),
+            '@cratis/scene.model': resolve(__dirname, '../../model/index.ts'),
+        };
+        return config;
+    },
+};
+export default config;
+
+function getAbsolutePath(value: string): string {
+    return dirname(fileURLToPath(import.meta.resolve(join(value, "package.json"))));
+}

package/.storybook/preview.ts

@@ -0,0 +1,12 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    backgrounds: { default: 'light', values: [{ name: 'light', value: '#ffffff' }, { name: 'dark', value: '#1a1a1a' }] },
+    controls: { matchers: { color: /(background|color)$/i, date: /Date$/i } },
+  },
+};
+export default preview;

package/NavBar/NavBar.tsx

@@ -0,0 +1,53 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Contribution, NavigationItem } from '@cratis/scene.model';
+import { aggregateContributions } from '@cratis/scene.engine';
+import { extractNavigationItem } from './extractNavigationItem';
+
+export interface NavBarProps {
+    /** Every contribution in scope - `NavBar` aggregates the ones targeting `Navigation` itself. */
+    contributions: Contribution[];
+
+    /**
+     * Turns a {@link NavigationItem}'s target screen and route parameters into a concrete route - a URL
+     * path, a query string, or a native deep link. Owning this as a caller-supplied function, rather than
+     * a fixed URL scheme, is what makes `NavBar` usable unmodified across renderers (Cratis/Scene#2).
+     */
+    renderRoute: (item: NavigationItem) => string;
+}
+
+/**
+ * Renders the aggregated `Navigation` contributions from across the current element tree - part of
+ * Cratis/Scene#2. `NavBar` is not wired to a fixed source: pass it whatever contributions are currently
+ * in scope and it recomputes, the same way any contribution-point consumer does.
+ */
+export function NavBar({ contributions, renderRoute }: NavBarProps) {
+    const items = aggregateContributions(contributions, 'Navigation')
+        .map(extractNavigationItem)
+        .filter((item): item is NavigationItem => item !== undefined);
+
+    const hasGroups = items.some(item => item.group !== undefined);
+    if (!hasGroups) {
+        return (
+            <nav data-scene-navbar="">
+                {items.map(item => <NavBarItem key={item.targetScreen} item={item} href={renderRoute(item)} />)}
+            </nav>
+        );
+    }
+
+    const groupNames = [...new Set(items.map(item => item.group ?? ''))];
+    return (
+        <nav data-scene-navbar="">
+            {groupNames.map(groupName => (
+                <section key={groupName} data-scene-navbar-group={groupName}>
+                    {items.filter(item => (item.group ?? '') === groupName).map(item => <NavBarItem key={item.targetScreen} item={item} href={renderRoute(item)} />)}
+                </section>
+            ))}
+        </nav>
+    );
+}
+
+function NavBarItem({ item, href }: { item: NavigationItem; href: string }) {
+    return <a href={href}>{item.label}</a>;
+}

package/NavBar/extractNavigationItem.ts

@@ -0,0 +1,40 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { BindingExpression, Contribution, ExternalComponent, NavigationItem } from '@cratis/scene.model';
+
+/**
+ * Reads a {@link NavigationItem} out of a {@link Contribution} to the built-in `Navigation` contribution
+ * point. `Contribution.content` carries an {@link ExternalComponent} whose open `properties` bag holds the
+ * navigation-specific values (`label`, `targetScreen`, `routeParameterBindings`, `order`, `group`) - the
+ * same names as {@link NavigationItem}'s own fields. This property-bag contract is Scene#2's own choice,
+ * made without a real Screenplay-to-Scene translation to confirm it against (Stage#37 hasn't been built
+ * yet) - whoever builds that seam should either produce contributions matching this contract or this
+ * function should move to match whatever Stage#37 actually emits.
+ *
+ * @param contribution The contribution to read.
+ * @returns The extracted {@link NavigationItem}, or `undefined` when `contribution.content` isn't an {@link ExternalComponent} or is missing a required property.
+ */
+export function extractNavigationItem(contribution: Contribution): NavigationItem | undefined {
+    const content = contribution.content as Partial<ExternalComponent>;
+    if (!content.properties) {
+        return undefined;
+    }
+
+    const { label, targetScreen, routeParameterBindings, order, group } = content.properties as Record<string, unknown>;
+    if (typeof label !== 'string' || typeof targetScreen !== 'string') {
+        return undefined;
+    }
+
+    return {
+        label,
+        targetScreen,
+        routeParameterBindings: isBindingExpressionRecord(routeParameterBindings) ? routeParameterBindings : {},
+        order: typeof order === 'number' ? order : contribution.order,
+        group: typeof group === 'string' ? group : undefined,
+    };
+}
+
+function isBindingExpressionRecord(value: unknown): value is Record<string, BindingExpression> {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}

package/NavBar/for_NavBar/when_rendering_navigation_contributions.tsx

@@ -0,0 +1,62 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { render, screen } from '@testing-library/react';
+import { Contribution, ExternalComponent, HorizontalAlignment, VerticalAlignment, Visibility } from '@cratis/scene.model';
+import { NavBar } from '../NavBar';
+
+function navigationContribution(id: string, properties: Record<string, unknown>, order?: number): Contribution {
+    const content: ExternalComponent = {
+        id,
+        name: id,
+        properties,
+        visibility: Visibility.Visible,
+        isEnabled: true,
+        opacity: 1,
+        size: {},
+        zIndex: 0,
+        minimumSize: {},
+        maximumSize: {},
+        margin: { left: 0, top: 0, right: 0, bottom: 0 },
+        horizontalAlignment: HorizontalAlignment.Stretch,
+        verticalAlignment: VerticalAlignment.Stretch,
+        componentName: 'core:navigation-item',
+        slots: {},
+    };
+    return { contributionPointName: 'Navigation', content, order };
+}
+
+describe('when rendering navigation contributions', () => {
+    describe('and no item declares a group', () => {
+        const contributions = [
+            navigationContribution('adjustments', { label: 'Adjustments', targetScreen: 'Adjustments' }, 20),
+            navigationContribution('invoices', { label: 'Invoices', targetScreen: 'InvoiceList' }, 10),
+        ];
+
+        beforeEach(() => {
+            render(<NavBar contributions={contributions} renderRoute={item => `/${item.targetScreen}`} />);
+        });
+
+        it('should render every item as a link to its rendered route', () => {
+            screen.getByRole('link', { name: 'Invoices' }).getAttribute('href')!.should.equal('/InvoiceList');
+            screen.getByRole('link', { name: 'Adjustments' }).getAttribute('href')!.should.equal('/Adjustments');
+        });
+
+        it('should render items in aggregated order', () => {
+            const links = screen.getAllByRole('link').map(link => link.textContent);
+            links.should.deep.equal(['Invoices', 'Adjustments']);
+        });
+    });
+
+    describe('and a contribution cannot be extracted into a navigation item', () => {
+        const contributions = [navigationContribution('broken', { label: 'Broken' })];
+
+        beforeEach(() => {
+            render(<NavBar contributions={contributions} renderRoute={item => `/${item.targetScreen}`} />);
+        });
+
+        it('should skip it rather than render a broken link', () => {
+            screen.queryAllByRole('link').should.have.lengthOf(0);
+        });
+    });
+});

package/NavBar/for_extractNavigationItem/when_extracting_from_a_navigation_contribution.ts

@@ -0,0 +1,53 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Contribution, ExternalComponent, HorizontalAlignment, NavigationItem, VerticalAlignment, Visibility } from '@cratis/scene.model';
+import { extractNavigationItem } from '../extractNavigationItem';
+
+function navigationContribution(properties: Record<string, unknown>, order?: number): Contribution {
+    const content: ExternalComponent = {
+        id: 'nav-item',
+        name: 'nav-item',
+        properties,
+        visibility: Visibility.Visible,
+        isEnabled: true,
+        opacity: 1,
+        size: {},
+        zIndex: 0,
+        minimumSize: {},
+        maximumSize: {},
+        margin: { left: 0, top: 0, right: 0, bottom: 0 },
+        horizontalAlignment: HorizontalAlignment.Stretch,
+        verticalAlignment: VerticalAlignment.Stretch,
+        componentName: 'core:navigation-item',
+        slots: {},
+    };
+    return { contributionPointName: 'Navigation', content, order };
+}
+
+describe('when extracting from a navigation contribution', () => {
+    describe('and the required properties are present', () => {
+        let result: NavigationItem | undefined;
+
+        beforeEach(() => {
+            result = extractNavigationItem(navigationContribution({ label: 'Invoices', targetScreen: 'InvoiceList', group: 'Sales' }, 10));
+        });
+
+        it('should extract the label', () => result!.label.should.equal('Invoices'));
+        it('should extract the target screen', () => result!.targetScreen.should.equal('InvoiceList'));
+        it('should extract the group', () => result!.group!.should.equal('Sales'));
+        it('should fall back to the contribution order when the properties bag has none', () => result!.order!.should.equal(10));
+    });
+
+    describe('and the label is missing', () => {
+        it('should return undefined', () => {
+            (extractNavigationItem(navigationContribution({ targetScreen: 'InvoiceList' })) === undefined).should.be.true;
+        });
+    });
+
+    describe('and the target screen is missing', () => {
+        it('should return undefined', () => {
+            (extractNavigationItem(navigationContribution({ label: 'Invoices' })) === undefined).should.be.true;
+        });
+    });
+});

package/NavBar/index.ts

@@ -0,0 +1,5 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export * from './NavBar';
+export * from './extractNavigationItem';

package/README.md

@@ -0,0 +1,40 @@
+# Scene
+
+The object model and runtime for Screenplay-based UIs: `Scene.Model` (platform-agnostic screens, layouts,
+forms, contribution points, ui profiles and themes), `Scene.Engine` (binding/resolution runtime), and
+`Scene.React` (the React renderer).
+
+## Packages / Deployables
+
+[![Nuget](https://img.shields.io/nuget/v/Cratis.Scene.Model?logo=nuget)](http://nuget.org/packages/Cratis.Scene.Model)
+[![NPM](https://img.shields.io/npm/v/@cratis/scene.model?label=@cratis/scene.model&logo=npm)](https://www.npmjs.com/package/@cratis/scene.model)
+[![NPM](https://img.shields.io/npm/v/@cratis/scene.engine?label=@cratis/scene.engine&logo=npm)](https://www.npmjs.com/package/@cratis/scene.engine)
+[![NPM](https://img.shields.io/npm/v/@cratis/scene.react?label=@cratis/scene.react&logo=npm)](https://www.npmjs.com/package/@cratis/scene.react)
+
+## Builds
+
+[![.NET Build](https://github.com/cratis/scene/actions/workflows/dotnet-build.yml/badge.svg)](https://github.com/cratis/scene/actions/workflows/dotnet-build.yml)
+[![JavaScript Build](https://github.com/cratis/scene/actions/workflows/javascript-build.yml/badge.svg)](https://github.com/cratis/scene/actions/workflows/javascript-build.yml)
+
+## Description
+
+Scene owns the *object model and runtime* half of the Screenplay stack. `Scene.Model` is the platform-agnostic
+C# object model that Stage translates Screenplay's parsed language constructs into, and that Studio's
+design-time tooling reads and writes. `Scene.Engine` walks that graph, resolves bindings (data, action, form,
+navigation contribution) and drives whichever renderer is plugged in — it does not know React exists.
+`Scene.React` is one renderer implementing the abstract vocabulary against real React/DOM; sibling positions
+are reserved for future `Scene.Native` / `Scene.Desktop` renderers. Vendor and internal component packages
+(PrimeReact, internal widget libraries) are adapters plugging into the renderer contract, not part of it.
+
+The design-time editor built on top of this object model lives in Studio, not here — see
+[StudioIssues#156](https://github.com/Cratis/StudioIssues/issues/156).
+
+## Support
+
+Cratis is an open community, and we are glad to help users, teams evaluating the stack, and contributors.
+
+| Channel | Details |
+|---|---|
+| Discord | Join the community on [Discord](https://discord.gg/kt4AMpV8WV) for questions and discussions |
+| GitHub Issues | [Report bugs or request features](https://github.com/Cratis/Scene/issues) |
+| Documentation | Read the docs at [cratis.io](https://cratis.io) |

package/SceneElementView.stories.tsx

@@ -0,0 +1,67 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Control, ExternalComponent, HorizontalAlignment, Panel, VerticalAlignment, Visibility } from '@cratis/scene.model';
+import { SceneElementView } from './SceneElementView';
+import { coreComponents } from './core';
+
+function control(id: string): Control {
+    return {
+        id,
+        name: id,
+        properties: {},
+        visibility: Visibility.Visible,
+        isEnabled: true,
+        opacity: 1,
+        size: {},
+        zIndex: 0,
+        minimumSize: {},
+        maximumSize: {},
+        margin: { left: 0, top: 0, right: 0, bottom: 0 },
+        horizontalAlignment: HorizontalAlignment.Stretch,
+        verticalAlignment: VerticalAlignment.Stretch,
+        borderThickness: { left: 0, top: 0, right: 0, bottom: 0 },
+        padding: { left: 0, top: 0, right: 0, bottom: 0 },
+        tabIndex: 0,
+    };
+}
+
+function coreComponent(id: string, componentName: string, properties: Record<string, unknown> = {}): ExternalComponent {
+    return { ...control(id), properties, componentName, slots: {} };
+}
+
+const card: ExternalComponent = {
+    ...control('welcome-card'),
+    componentName: 'core:card',
+    slots: { content: [coreComponent('welcome-text', 'core:text', { text: 'Welcome to Scene' })] },
+};
+
+const root: Panel = { ...control('root'), children: [card] };
+
+const meta = {
+    title: 'Scene/SceneElementView',
+    component: SceneElementView,
+    tags: ['autodocs'],
+    parameters: { layout: 'padded' },
+} satisfies Meta<typeof SceneElementView>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const CoreCardWithText: Story = {
+    args: {
+        element: root,
+        registry: coreComponents,
+        resolveBinding: () => undefined,
+    },
+};
+
+export const UnresolvedComponent: Story = {
+    args: {
+        element: coreComponent('missing', 'vendor:fancy-widget'),
+        registry: coreComponents,
+        resolveBinding: () => undefined,
+    },
+};

package/SceneElementView.tsx

@@ -0,0 +1,22 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useMemo } from 'react';
+import { renderElement, BindingResolver } from '@cratis/scene.engine';
+import { SceneElement } from '@cratis/scene.model';
+import { ComponentRegistry, createReactRenderer } from './renderer';
+
+export interface SceneElementViewProps {
+    element: SceneElement;
+    registry: ComponentRegistry;
+    resolveBinding: BindingResolver;
+}
+
+/**
+ * Renders a Scene element tree with the real `Scene.React` renderer - the WYSIWYG building block Studio's
+ * preview surface and Stage's shipped web bundle both consume unmodified.
+ */
+export function SceneElementView({ element, registry, resolveBinding }: SceneElementViewProps) {
+    const renderer = useMemo(() => createReactRenderer(registry), [registry]);
+    return <>{renderElement(element, renderer, resolveBinding)}</>;
+}

package/core/CoreButton.tsx

@@ -0,0 +1,17 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { 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) {
+    const label = typeof element.properties.label === 'string' ? element.properties.label : '';
+    return (
+        <button type="button" data-scene-id={element.id}>
+            {label}
+            {slots.content}
+        </button>
+    );
+}

package/core/CoreCard.tsx

@@ -0,0 +1,15 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { RegisteredComponentProps } from '../renderer';
+
+/**
+ * The `core:card` component - part of the minimum vocabulary a `ui profile` can always fall back to.
+ */
+export function CoreCard({ element, slots }: RegisteredComponentProps) {
+    return (
+        <section data-scene-id={element.id} style={{ border: '1px solid #ccc', borderRadius: 4, padding: '0.75rem' }}>
+            {slots.content}
+        </section>
+    );
+}

package/core/CoreText.tsx

@@ -0,0 +1,13 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { RegisteredComponentProps } from '../renderer';
+
+/**
+ * The `core:text` component - the minimum vocabulary a `ui profile` can always fall back to, regardless
+ * of which packages it lists, per Scene#3's `core` fallback guarantee.
+ */
+export function CoreText({ element }: RegisteredComponentProps) {
+    const text = typeof element.properties.text === 'string' ? element.properties.text : '';
+    return <span data-scene-id={element.id}>{text}</span>;
+}

package/core/coreComponents.ts

@@ -0,0 +1,18 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ComponentRegistry } from '../renderer';
+import { componentRegistryKey } from '../packages';
+import { CoreText } from './CoreText';
+import { CoreButton } from './CoreButton';
+import { CoreCard } from './CoreCard';
+
+/**
+ * The `core` package's component registry - the final fallback every `ui profile` resolves against
+ * regardless of which other packages it lists (Scene#3).
+ */
+export const coreComponents: ComponentRegistry = {
+    [componentRegistryKey('core', 'text')]: CoreText,
+    [componentRegistryKey('core', 'button')]: CoreButton,
+    [componentRegistryKey('core', 'card')]: CoreCard,
+};

package/core/corePackage.ts

@@ -0,0 +1,36 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { PackageKind, ScenePackage } from '@cratis/scene.model';
+import { ScenePackageBundle } from '../packages';
+import { coreComponents } from './coreComponents';
+
+/**
+ * The `core` package's declaration. Every other package is loaded by a host that reads its manifest;
+ * `core` ships inside the renderer itself, because Scene#3 guarantees a bare name always has somewhere to
+ * resolve regardless of which packages a profile lists. It is still declared the same way as any other -
+ * a package picker should be able to show it, and the dependency resolver should be able to reason about
+ * it, without a special case.
+ */
+export const corePackageManifest: ScenePackage = {
+    name: 'core',
+    version: '1.0.0',
+    kind: PackageKind.ComponentLibrary,
+    dependencies: [],
+    components: ['text', 'button', 'card'],
+    layouts: [],
+    screenTemplates: [],
+    dialogTemplates: [],
+    themes: [],
+    displayName: 'Core',
+    description: 'The built-in fallback vocabulary every ui profile resolves against.',
+    module: '@cratis/scene.react',
+};
+
+/**
+ * The `core` package as a loadable bundle.
+ */
+export const corePackage: ScenePackageBundle = {
+    manifest: corePackageManifest,
+    components: coreComponents,
+};

package/core/index.ts

@@ -0,0 +1,8 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export * from './CoreText';
+export * from './CoreButton';
+export * from './CoreCard';
+export * from './coreComponents';
+export * from './corePackage';

package/dist/cjs/NavBar/NavBar.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var scene_engine = require('@cratis/scene.engine');
+var extractNavigationItem = require('./extractNavigationItem.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * Renders the aggregated `Navigation` contributions from across the current element tree - part of
+ * Cratis/Scene#2. `NavBar` is not wired to a fixed source: pass it whatever contributions are currently
+ * in scope and it recomputes, the same way any contribution-point consumer does.
+ */ function NavBar({ contributions, renderRoute }) {
+    const items = scene_engine.aggregateContributions(contributions, 'Navigation').map(extractNavigationItem.extractNavigationItem).filter((item)=>item !== undefined);
+    const hasGroups = items.some((item)=>item.group !== undefined);
+    if (!hasGroups) {
+        return /*#__PURE__*/ jsxRuntime.jsx("nav", {
+            "data-scene-navbar": "",
+            children: items.map((item)=>/*#__PURE__*/ jsxRuntime.jsx(NavBarItem, {
+                    item: item,
+                    href: renderRoute(item)
+                }, item.targetScreen))
+        });
+    }
+    const groupNames = [
+        ...new Set(items.map((item)=>item.group ?? ''))
+    ];
+    return /*#__PURE__*/ jsxRuntime.jsx("nav", {
+        "data-scene-navbar": "",
+        children: groupNames.map((groupName)=>/*#__PURE__*/ jsxRuntime.jsx("section", {
+                "data-scene-navbar-group": groupName,
+                children: items.filter((item)=>(item.group ?? '') === groupName).map((item)=>/*#__PURE__*/ jsxRuntime.jsx(NavBarItem, {
+                        item: item,
+                        href: renderRoute(item)
+                    }, item.targetScreen))
+            }, groupName))
+    });
+}
+function NavBarItem({ item, href }) {
+    return /*#__PURE__*/ jsxRuntime.jsx("a", {
+        href: href,
+        children: item.label
+    });
+}
+
+exports.NavBar = NavBar;
+//# sourceMappingURL=NavBar.js.map

package/dist/cjs/NavBar/NavBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavBar.js","sources":["../../../NavBar/NavBar.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 { Contribution, NavigationItem } from '@cratis/scene.model';\nimport { aggregateContributions } from '@cratis/scene.engine';\nimport { extractNavigationItem } from './extractNavigationItem';\n\nexport interface NavBarProps {\n    /** Every contribution in scope - `NavBar` aggregates the ones targeting `Navigation` itself. */\n    contributions: Contribution[];\n\n    /**\n     * Turns a {@link NavigationItem}'s target screen and route parameters into a concrete route - a URL\n     * path, a query string, or a native deep link. Owning this as a caller-supplied function, rather than\n     * a fixed URL scheme, is what makes `NavBar` usable unmodified across renderers (Cratis/Scene#2).\n     */\n    renderRoute: (item: NavigationItem) => string;\n}\n\n/**\n * Renders the aggregated `Navigation` contributions from across the current element tree - part of\n * Cratis/Scene#2. `NavBar` is not wired to a fixed source: pass it whatever contributions are currently\n * in scope and it recomputes, the same way any contribution-point consumer does.\n */\nexport function NavBar({ contributions, renderRoute }: NavBarProps) {\n    const items = aggregateContributions(contributions, 'Navigation')\n        .map(extractNavigationItem)\n        .filter((item): item is NavigationItem => item !== undefined);\n\n    const hasGroups = items.some(item => item.group !== undefined);\n    if (!hasGroups) {\n        return (\n            <nav data-scene-navbar=\"\">\n                {items.map(item => <NavBarItem key={item.targetScreen} item={item} href={renderRoute(item)} />)}\n            </nav>\n        );\n    }\n\n    const groupNames = [...new Set(items.map(item => item.group ?? ''))];\n    return (\n        <nav data-scene-navbar=\"\">\n            {groupNames.map(groupName => (\n                <section key={groupName} data-scene-navbar-group={groupName}>\n                    {items.filter(item => (item.group ?? '') === groupName).map(item => <NavBarItem key={item.targetScreen} item={item} href={renderRoute(item)} />)}\n                </section>\n            ))}\n        </nav>\n    );\n}\n\nfunction NavBarItem({ item, href }: { item: NavigationItem; href: string }) {\n    return <a href={href}>{item.label}</a>;\n}\n"],"names":["NavBar","contributions","renderRoute","items","aggregateContributions","map","extractNavigationItem","filter","item","undefined","hasGroups","some","group","_jsx","nav","data-scene-navbar","NavBarItem","href","targetScreen","groupNames","Set","groupName","section","data-scene-navbar-group","a","label"],"mappings":";;;;;;AAAA;AACA;AAkBA;;;;AAIC,IACM,SAASA,MAAAA,CAAO,EAAEC,aAAa,EAAEC,WAAW,EAAe,EAAA;IAC9D,MAAMC,KAAAA,GAAQC,mCAAAA,CAAuBH,aAAAA,EAAe,YAAA,CAAA,CAC/CI,GAAG,CAACC,2CAAAA,CAAAA,CACJC,MAAM,CAAC,CAACC,IAAAA,GAAiCA,IAAAA,KAASC,SAAAA,CAAAA;IAEvD,MAAMC,SAAAA,GAAYP,MAAMQ,IAAI,CAACH,CAAAA,IAAAA,GAAQA,IAAAA,CAAKI,KAAK,KAAKH,SAAAA,CAAAA;AACpD,IAAA,IAAI,CAACC,SAAAA,EAAW;AACZ,QAAA,qBACIG,cAAA,CAACC,KAAAA,EAAAA;YAAIC,mBAAAA,EAAkB,EAAA;AAClBZ,YAAAA,QAAAA,EAAAA,KAAAA,CAAME,GAAG,CAACG,CAAAA,IAAAA,iBAAQK,cAAA,CAACG,UAAAA,EAAAA;oBAAmCR,IAAAA,EAAMA,IAAAA;AAAMS,oBAAAA,IAAAA,EAAMf,WAAAA,CAAYM,IAAAA;AAAjDA,iBAAAA,EAAAA,IAAAA,CAAKU,YAAY,CAAA;;AAGjE,IAAA;AAEA,IAAA,MAAMC,UAAAA,GAAa;WAAI,IAAIC,GAAAA,CAAIjB,MAAME,GAAG,CAACG,CAAAA,IAAAA,GAAQA,IAAAA,CAAKI,KAAK,IAAI,EAAA,CAAA;AAAK,KAAA;AACpE,IAAA,qBACIC,cAAA,CAACC,KAAAA,EAAAA;QAAIC,mBAAAA,EAAkB,EAAA;AAClBI,QAAAA,QAAAA,EAAAA,UAAAA,CAAWd,GAAG,CAACgB,CAAAA,SAAAA,iBACZR,cAAA,CAACS,SAAAA,EAAAA;gBAAwBC,yBAAAA,EAAyBF,SAAAA;AAC7ClB,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMI,MAAM,CAACC,CAAAA,IAAAA,GAASA,CAAAA,IAAAA,CAAKI,KAAK,IAAI,EAAC,MAAOS,SAAAA,CAAAA,CAAWhB,GAAG,CAACG,CAAAA,qBAAQK,cAAA,CAACG,UAAAA,EAAAA;wBAAmCR,IAAAA,EAAMA,IAAAA;AAAMS,wBAAAA,IAAAA,EAAMf,WAAAA,CAAYM,IAAAA;AAAjDA,qBAAAA,EAAAA,IAAAA,CAAKU,YAAY,CAAA;AAD5FG,aAAAA,EAAAA,SAAAA,CAAAA;;AAM9B;AAEA,SAASL,UAAAA,CAAW,EAAER,IAAI,EAAES,IAAI,EAA0C,EAAA;AACtE,IAAA,qBAAOJ,cAAA,CAACW,GAAAA,EAAAA;QAAEP,IAAAA,EAAMA,IAAAA;AAAOT,QAAAA,QAAAA,EAAAA,IAAAA,CAAKiB;;AAChC;;;;"}

package/dist/cjs/NavBar/extractNavigationItem.js

@@ -0,0 +1,38 @@
+'use strict';
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * Reads a {@link NavigationItem} out of a {@link Contribution} to the built-in `Navigation` contribution
+ * point. `Contribution.content` carries an {@link ExternalComponent} whose open `properties` bag holds the
+ * navigation-specific values (`label`, `targetScreen`, `routeParameterBindings`, `order`, `group`) - the
+ * same names as {@link NavigationItem}'s own fields. This property-bag contract is Scene#2's own choice,
+ * made without a real Screenplay-to-Scene translation to confirm it against (Stage#37 hasn't been built
+ * yet) - whoever builds that seam should either produce contributions matching this contract or this
+ * function should move to match whatever Stage#37 actually emits.
+ *
+ * @param contribution The contribution to read.
+ * @returns The extracted {@link NavigationItem}, or `undefined` when `contribution.content` isn't an {@link ExternalComponent} or is missing a required property.
+ */ function extractNavigationItem(contribution) {
+    const content = contribution.content;
+    if (!content.properties) {
+        return undefined;
+    }
+    const { label, targetScreen, routeParameterBindings, order, group } = content.properties;
+    if (typeof label !== 'string' || typeof targetScreen !== 'string') {
+        return undefined;
+    }
+    return {
+        label,
+        targetScreen,
+        routeParameterBindings: isBindingExpressionRecord(routeParameterBindings) ? routeParameterBindings : {},
+        order: typeof order === 'number' ? order : contribution.order,
+        group: typeof group === 'string' ? group : undefined
+    };
+}
+function isBindingExpressionRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+exports.extractNavigationItem = extractNavigationItem;
+//# sourceMappingURL=extractNavigationItem.js.map

package/dist/cjs/NavBar/extractNavigationItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"extractNavigationItem.js","sources":["../../../NavBar/extractNavigationItem.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 { BindingExpression, Contribution, ExternalComponent, NavigationItem } from '@cratis/scene.model';\n\n/**\n * Reads a {@link NavigationItem} out of a {@link Contribution} to the built-in `Navigation` contribution\n * point. `Contribution.content` carries an {@link ExternalComponent} whose open `properties` bag holds the\n * navigation-specific values (`label`, `targetScreen`, `routeParameterBindings`, `order`, `group`) - the\n * same names as {@link NavigationItem}'s own fields. This property-bag contract is Scene#2's own choice,\n * made without a real Screenplay-to-Scene translation to confirm it against (Stage#37 hasn't been built\n * yet) - whoever builds that seam should either produce contributions matching this contract or this\n * function should move to match whatever Stage#37 actually emits.\n *\n * @param contribution The contribution to read.\n * @returns The extracted {@link NavigationItem}, or `undefined` when `contribution.content` isn't an {@link ExternalComponent} or is missing a required property.\n */\nexport function extractNavigationItem(contribution: Contribution): NavigationItem | undefined {\n    const content = contribution.content as Partial<ExternalComponent>;\n    if (!content.properties) {\n        return undefined;\n    }\n\n    const { label, targetScreen, routeParameterBindings, order, group } = content.properties as Record<string, unknown>;\n    if (typeof label !== 'string' || typeof targetScreen !== 'string') {\n        return undefined;\n    }\n\n    return {\n        label,\n        targetScreen,\n        routeParameterBindings: isBindingExpressionRecord(routeParameterBindings) ? routeParameterBindings : {},\n        order: typeof order === 'number' ? order : contribution.order,\n        group: typeof group === 'string' ? group : undefined,\n    };\n}\n\nfunction isBindingExpressionRecord(value: unknown): value is Record<string, BindingExpression> {\n    return typeof value === 'object' && value !== null && !Array.isArray(value);\n}\n"],"names":["extractNavigationItem","contribution","content","properties","undefined","label","targetScreen","routeParameterBindings","order","group","isBindingExpressionRecord","value","Array","isArray"],"mappings":";;AAAA;AACA;AAIA;;;;;;;;;;;IAYO,SAASA,qBAAAA,CAAsBC,YAA0B,EAAA;IAC5D,MAAMC,OAAAA,GAAUD,aAAaC,OAAO;IACpC,IAAI,CAACA,OAAAA,CAAQC,UAAU,EAAE;QACrB,OAAOC,SAAAA;AACX,IAAA;AAEA,IAAA,MAAM,EAAEC,KAAK,EAAEC,YAAY,EAAEC,sBAAsB,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAGP,QAAQC,UAAU;AACxF,IAAA,IAAI,OAAOE,KAAAA,KAAU,QAAA,IAAY,OAAOC,iBAAiB,QAAA,EAAU;QAC/D,OAAOF,SAAAA;AACX,IAAA;IAEA,OAAO;AACHC,QAAAA,KAAAA;AACAC,QAAAA,YAAAA;QACAC,sBAAAA,EAAwBG,yBAAAA,CAA0BH,sBAAAA,CAAAA,GAA0BA,sBAAAA,GAAyB,EAAC;AACtGC,QAAAA,KAAAA,EAAO,OAAOA,KAAAA,KAAU,QAAA,GAAWA,KAAAA,GAAQP,aAAaO,KAAK;QAC7DC,KAAAA,EAAO,OAAOA,KAAAA,KAAU,QAAA,GAAWA,KAAAA,GAAQL;AAC/C,KAAA;AACJ;AAEA,SAASM,0BAA0BC,KAAc,EAAA;IAC7C,OAAO,OAAOA,UAAU,QAAA,IAAYA,KAAAA,KAAU,QAAQ,CAACC,KAAAA,CAAMC,OAAO,CAACF,KAAAA,CAAAA;AACzE;;;;"}

package/dist/cjs/SceneElementView.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var scene_engine = require('@cratis/scene.engine');
+var createReactRenderer = require('./renderer/createReactRenderer.js');
+
+/**
+ * Renders a Scene element tree with the real `Scene.React` renderer - the WYSIWYG building block Studio's
+ * preview surface and Stage's shipped web bundle both consume unmodified.
+ */ function SceneElementView({ element, registry, resolveBinding }) {
+    const renderer = react.useMemo(()=>createReactRenderer.createReactRenderer(registry), [
+        registry
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: scene_engine.renderElement(element, renderer, resolveBinding)
+    });
+}
+
+exports.SceneElementView = SceneElementView;
+//# sourceMappingURL=SceneElementView.js.map

package/dist/cjs/SceneElementView.js.map

@@ -0,0 +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;;;;"}