@cratis/scene.components 0.1.0

package/cratisComponentsPackage.ts

@@ -0,0 +1,101 @@
+// 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 '@cratis/scene.react';
+import { cratisComponents, cratisComponentsPackageName } from './cratisComponents';
+
+/**
+ * The `Cratis.Components` package's declaration - what a profile gets when it lists this package.
+ *
+ * This is the concrete case the whole package-dependency mechanism exists for. `@cratis/components` is
+ * not a self-contained library: every component in it is a wrapper over a PrimeReact widget, and its
+ * own styling is a compiled Tailwind utility sheet (`@cratis/components/styles`) plus a `--cratis-*`
+ * token layer. Activate it in a profile without PrimeReact and nothing renders; activate it without
+ * Tailwind and everything renders unstyled. Both are stated as dependencies so a package picker can say
+ * so while the profile is being configured, instead of leaving it to be discovered when the page opens.
+ *
+ * The version ranges are the real ones the library carries: `>=10.9.0` for PrimeReact because its
+ * `--cratis-*` tokens resolve PrimeReact 11's design tokens first and fall back to the version 10 theme
+ * variables, so it spans the upgrade window; `^4.0.0` for Tailwind because the utility sheet is compiled
+ * against Tailwind 4.
+ */
+export const cratisComponentsPackageManifest: ScenePackage = {
+    name: cratisComponentsPackageName,
+    version: '2.8.1',
+    kind: PackageKind.ComponentLibrary,
+    dependencies: [
+        { name: 'PrimeReact', versionRange: '>=10.9.0' },
+        { name: 'Tailwind', versionRange: '^4.0.0' },
+    ],
+    components: [
+        'page',
+        'dataPage',
+        'formElement',
+        'dataTable',
+        'table',
+        'observableDataTable',
+        'commandForm',
+        'inputTextField',
+        'numberField',
+        'checkboxField',
+        'textAreaField',
+        'dropdownField',
+        'sliderField',
+        'calendarField',
+        'colorPickerField',
+        'multiSelectField',
+        'chipsField',
+        'radioButtonField',
+        'radioGroupField',
+        'dialog',
+        'confirmationDialog',
+        'busyIndicatorDialog',
+        'commandDialog',
+        'stepperCommandDialog',
+        'icon',
+        'tooltip',
+        'dropdown',
+        'errorBoundary',
+        'objectContentEditor',
+        'objectNavigationalBar',
+        'schemaEditor',
+        'timeMachine',
+        'filterPanel',
+        'toolbar',
+        'toolbarButton',
+        'toolbarGroup',
+        'toolbarSeparator',
+    ],
+
+    // A component library ships components, and nothing else. Layouts, screen templates and dialog
+    // templates all belong to a Blueprint: they are decisions about what an application looks like as a
+    // whole, and this package deliberately makes none of them - it provides the Arc-bound composites a
+    // template is *built from*, so that a blueprint can place a `dataPage` in a slot and configure it,
+    // rather than shipping one opinionated data page nobody can rearrange.
+    layouts: [],
+    screenTemplates: [],
+    dialogTemplates: [],
+
+    // No themes either, for a different reason: `@cratis/components` has no palette of its own. It reads
+    // a `--cratis-*` variable layer that resolves whatever PrimeReact theme - or Scene theme, through
+    // this package's token bridge - happens to be active. Shipping a theme here would be this library
+    // asserting a look it was specifically built not to have.
+    themes: [],
+
+    displayName: 'Cratis Components',
+    description: "Cratis' Arc-bound data, form and dialog composites, built on PrimeReact and Tailwind.",
+    module: '@cratis/scene.components',
+};
+
+/**
+ * The `Cratis.Components` package as a loadable bundle - the manifest above, plus the React components
+ * behind the names it declares.
+ *
+ * No `layouts`, `screenTemplates`, `dialogTemplates` or `themes` are provided, matching a manifest that
+ * declares none of them; `validatePackageBundle` is what proves the two halves agree.
+ */
+export const cratisComponentsPackage: ScenePackageBundle = {
+    manifest: cratisComponentsPackageManifest,
+    components: cratisComponents,
+};

package/data/SceneDataTable.tsx

@@ -0,0 +1,41 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { lazy } from 'react';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { ArcRuntimeBoundary, BindingKind, MissingBinding, resolveElementBinding } from '../bindings';
+import { booleanProperty, stringArrayProperty, stringProperty } from '../properties';
+
+const DataTableForQuery = lazy(async () => ({ default: (await import('@cratis/components/DataTables')).DataTableForQuery }));
+
+/**
+ * The `Cratis.Components:dataTable` component, also registered as `table` - `DataTableForQuery` from
+ * `@cratis/components/DataTables`.
+ *
+ * Registering it under the bare name `table` as well is override priority working as designed: a profile
+ * listing `core`, `PrimeReact` and `Cratis.Components` in that order resolves `table` here and records
+ * the other two as shadowed. That is the right outcome, because this is a strictly better `table` for a
+ * Cratis application - it performs the query, pages against the server, and wires filtering and sorting
+ * back into it, where PrimeReact's `DataTable` is handed rows and knows nothing about where they came from.
+ *
+ * The `query` property names an Arc query proxy; the columns come from the `content` slot.
+ */
+export function SceneDataTable({ element, slots }: RegisteredComponentProps) {
+    const { name, target } = resolveElementBinding(element, BindingKind.Query);
+    if (!target) return <MissingBinding element={element} kind={BindingKind.Query} name={name} />;
+
+    return (
+        <ArcRuntimeBoundary>
+            <DataTableForQuery
+                query={target}
+                emptyMessage={stringProperty(element.properties, 'emptyMessage') ?? ''}
+                dataKey={stringProperty(element.properties, 'dataKey')}
+                globalFilterFields={stringArrayProperty(element.properties, 'globalFilterFields')}
+                clientFiltering={booleanProperty(element.properties, 'clientFiltering')}
+                className={stringProperty(element.properties, 'className')}
+            >
+                {slots.content}
+            </DataTableForQuery>
+        </ArcRuntimeBoundary>
+    );
+}

package/data/SceneObservableDataTable.tsx

@@ -0,0 +1,41 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { lazy } from 'react';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { ArcRuntimeBoundary, BindingKind, MissingBinding, resolveElementBinding } from '../bindings';
+import { booleanProperty, stringArrayProperty, stringProperty } from '../properties';
+
+const DataTableForObservableQuery = lazy(async () => ({
+    default: (await import('@cratis/components/DataTables')).DataTableForObservableQuery,
+}));
+
+/**
+ * The `Cratis.Components:observableDataTable` component - `DataTableForObservableQuery` from
+ * `@cratis/components/DataTables`.
+ *
+ * A separate name rather than a flag on `dataTable`, because the distinction is in the *proxy* a host
+ * registers, not in how the table is configured: an observable query opens a WebSocket subscription and
+ * re-renders when the server's read model changes, and a plain query does not. A screen that names an
+ * observable query here is stating that its data is live, which is a design decision worth being able to
+ * read off the screen.
+ */
+export function SceneObservableDataTable({ element, slots }: RegisteredComponentProps) {
+    const { name, target } = resolveElementBinding(element, BindingKind.Query);
+    if (!target) return <MissingBinding element={element} kind={BindingKind.Query} name={name} />;
+
+    return (
+        <ArcRuntimeBoundary>
+            <DataTableForObservableQuery
+                query={target}
+                emptyMessage={stringProperty(element.properties, 'emptyMessage') ?? ''}
+                dataKey={stringProperty(element.properties, 'dataKey')}
+                globalFilterFields={stringArrayProperty(element.properties, 'globalFilterFields')}
+                clientFiltering={booleanProperty(element.properties, 'clientFiltering')}
+                className={stringProperty(element.properties, 'className')}
+            >
+                {slots.content}
+            </DataTableForObservableQuery>
+        </ArcRuntimeBoundary>
+    );
+}

package/data/for_SceneDataTable/when_the_query_binding_is_missing.tsx

@@ -0,0 +1,48 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { expect } from 'chai';
+import { render, screen } from '@testing-library/react';
+import { externalComponent } from '../../given';
+import { clearBindings, registerQuery } from '../../bindings';
+import { SceneDataTable } from '../SceneDataTable';
+
+class AllInvoices {}
+
+describe('when the query binding is missing', () => {
+    beforeEach(() => clearBindings());
+    afterEach(() => clearBindings());
+
+    describe('and the screen names a query nothing is registered under', () => {
+        beforeEach(() => {
+            const element = externalComponent('Cratis.Components:dataTable', { query: 'AllInvoices', emptyMessage: 'No invoices' });
+            render(<SceneDataTable element={element} slots={{}} />);
+        });
+
+        it('should render a placeholder naming the binding rather than throwing', () =>
+            expect(screen.getByText("Unresolved query binding 'AllInvoices' on Cratis.Components:dataTable")).to.exist);
+    });
+
+    describe('and the screen names no query at all', () => {
+        beforeEach(() => {
+            const element = externalComponent('Cratis.Components:dataTable', { emptyMessage: 'No invoices' });
+            render(<SceneDataTable element={element} slots={{}} />);
+        });
+
+        it('should render a placeholder saying the binding is missing', () =>
+            expect(screen.getByText('Missing query binding on Cratis.Components:dataTable')).to.exist);
+    });
+
+    describe('and the named query is registered', () => {
+        beforeEach(() => {
+            registerQuery('AllInvoices', AllInvoices);
+            const element = externalComponent('Cratis.Components:dataTable', { query: 'AllInvoices', emptyMessage: 'No invoices' });
+            render(<SceneDataTable element={element} slots={{}} />);
+        });
+
+        it('should render no placeholder', () => (screen.queryByText(/query binding/) === null).should.be.true);
+
+        it('should hand off to the lazily loaded Arc-bound table', () =>
+            expect(document.querySelector('[data-scene-arc-loading]')).to.exist);
+    });
+});

package/data/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 './SceneDataTable';
+export * from './SceneObservableDataTable';

package/dialogs/SceneBusyIndicatorDialog.tsx

@@ -0,0 +1,29 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { lazy } from 'react';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { ArcRuntimeBoundary } from '../bindings';
+import { stringProperty } from '../properties';
+
+const BusyIndicatorDialog = lazy(async () => ({ default: (await import('@cratis/components/Dialogs')).BusyIndicatorDialog }));
+
+/**
+ * The `Cratis.Components:busyIndicatorDialog` component - `BusyIndicatorDialog` from
+ * `@cratis/components/Dialogs`.
+ *
+ * The blocking spinner shown while a long-running command is in flight. In a running application it is
+ * the Arc dialog host that renders it, threading its own `title` and `message` through; exposing it as a
+ * Scene component is what lets a screen show the same chrome at design time, so its wording and
+ * placement can be designed rather than discovered the first time an operation takes a while.
+ */
+export function SceneBusyIndicatorDialog({ element }: RegisteredComponentProps) {
+    return (
+        <ArcRuntimeBoundary>
+            <BusyIndicatorDialog
+                title={stringProperty(element.properties, 'title') ?? ''}
+                message={stringProperty(element.properties, 'message') ?? ''}
+            />
+        </ArcRuntimeBoundary>
+    );
+}

package/dialogs/SceneCommandDialog.tsx

@@ -0,0 +1,42 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { lazy } from 'react';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { ArcRuntimeBoundary, BindingKind, MissingBinding, resolveElementBinding } from '../bindings';
+import { booleanProperty, stringProperty } from '../properties';
+
+const CommandDialog = lazy(async () => ({ default: (await import('@cratis/components/CommandDialog')).CommandDialog }));
+
+/**
+ * The `Cratis.Components:commandDialog` component - `CommandDialog` from `@cratis/components/CommandDialog`.
+ *
+ * A dialog whose confirm button *is* the command's execution: it binds the form to the command, submits
+ * on confirm, feeds the backend's validation results back onto the fields, and only closes when the
+ * command succeeded. That last part is the reason to use it rather than composing `dialog` with
+ * `commandForm` - a hand-composed pair has no way to keep the dialog open on a rejected command without
+ * reimplementing the protocol.
+ *
+ * The `command` property names an Arc command proxy; the fields go in the `content` slot.
+ */
+export function SceneCommandDialog({ element, slots }: RegisteredComponentProps) {
+    const { name, target } = resolveElementBinding(element, BindingKind.Command);
+    if (!target) return <MissingBinding element={element} kind={BindingKind.Command} name={name} />;
+
+    return (
+        <ArcRuntimeBoundary>
+            <CommandDialog
+                title={stringProperty(element.properties, 'title') ?? ''}
+                command={target}
+                visible={booleanProperty(element.properties, 'visible') ?? true}
+                width={stringProperty(element.properties, 'width')}
+                resizable={booleanProperty(element.properties, 'resizable')}
+                okLabel={stringProperty(element.properties, 'okLabel')}
+                cancelLabel={stringProperty(element.properties, 'cancelLabel')}
+                className={stringProperty(element.properties, 'className')}
+            >
+                {slots.content}
+            </CommandDialog>
+        </ArcRuntimeBoundary>
+    );
+}

package/dialogs/SceneConfirmationDialog.tsx

@@ -0,0 +1,23 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { lazy } from 'react';
+import { ArcRuntimeBoundary } from '../bindings';
+
+const ConfirmationDialog = lazy(async () => ({ default: (await import('@cratis/components/Dialogs')).ConfirmationDialog }));
+
+/**
+ * The `Cratis.Components:confirmationDialog` component - `ConfirmationDialog` from
+ * `@cratis/components/Dialogs`.
+ *
+ * Takes no properties by design: it is not a dialog a screen configures, it is the host that renders
+ * whatever confirmation the running application has asked for through Arc's dialog service. A screen
+ * places it once, near the root, and every `Are you sure?` in the application appears there.
+ */
+export function SceneConfirmationDialog() {
+    return (
+        <ArcRuntimeBoundary>
+            <ConfirmationDialog />
+        </ArcRuntimeBoundary>
+    );
+}

package/dialogs/SceneDialog.tsx

@@ -0,0 +1,41 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { lazy } from 'react';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { ArcRuntimeBoundary } from '../bindings';
+import { booleanProperty, stringProperty } from '../properties';
+
+const Dialog = lazy(async () => ({ default: (await import('@cratis/components/Dialogs')).Dialog }));
+
+/**
+ * The `Cratis.Components:dialog` component, registered under the bare name `dialog` - `Dialog` from
+ * `@cratis/components/Dialogs`.
+ *
+ * Shadowing PrimeReact's `dialog` deliberately. PrimeReact's is a modal frame and nothing more; this one
+ * resolves its result through Arc's dialog context, so a screen's dialog participates in the same
+ * request/response protocol as the rest of the application - a caller awaits a `DialogResult` instead of
+ * threading `visible` state and callbacks by hand.
+ *
+ * `visible` defaults to `true` because a dialog placed on a screen is being placed to be seen; a host
+ * that controls visibility sets the property explicitly.
+ */
+export function SceneDialog({ element, slots }: RegisteredComponentProps) {
+    return (
+        <ArcRuntimeBoundary>
+            <Dialog
+                title={stringProperty(element.properties, 'title') ?? ''}
+                visible={booleanProperty(element.properties, 'visible') ?? true}
+                width={stringProperty(element.properties, 'width')}
+                resizable={booleanProperty(element.properties, 'resizable')}
+                isValid={booleanProperty(element.properties, 'isValid')}
+                isBusy={booleanProperty(element.properties, 'isBusy')}
+                okLabel={stringProperty(element.properties, 'okLabel')}
+                cancelLabel={stringProperty(element.properties, 'cancelLabel')}
+                className={stringProperty(element.properties, 'className')}
+            >
+                {slots.content}
+            </Dialog>
+        </ArcRuntimeBoundary>
+    );
+}

package/dialogs/SceneStepperCommandDialog.tsx

@@ -0,0 +1,50 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { lazy } from 'react';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { ArcRuntimeBoundary, BindingKind, MissingBinding, resolveElementBinding } from '../bindings';
+import { booleanProperty, stringProperty, unionProperty } from '../properties';
+
+const StepperCommandDialog = lazy(async () => ({
+    default: (await import('@cratis/components/CommandDialog')).StepperCommandDialog,
+}));
+
+/** Whether the step headers run across the top or down the side. */
+const orientations = ['horizontal', 'vertical'] as const;
+
+/**
+ * The `Cratis.Components:stepperCommandDialog` component - `StepperCommandDialog` from
+ * `@cratis/components/CommandDialog`.
+ *
+ * `commandDialog` split across steps, for a command with more fields than fit one screen. It stays a
+ * single command: the steps partition the *fields*, not the intent, and nothing is submitted until the
+ * last step - so a half-finished wizard leaves no trace, which is exactly what a command should do.
+ *
+ * `linear` decides whether a step can be skipped ahead of the one before it. The step panels go in the
+ * `content` slot.
+ */
+export function SceneStepperCommandDialog({ element, slots }: RegisteredComponentProps) {
+    const { name, target } = resolveElementBinding(element, BindingKind.Command);
+    if (!target) return <MissingBinding element={element} kind={BindingKind.Command} name={name} />;
+
+    return (
+        <ArcRuntimeBoundary>
+            <StepperCommandDialog
+                title={stringProperty(element.properties, 'title') ?? ''}
+                command={target}
+                visible={booleanProperty(element.properties, 'visible') ?? true}
+                width={stringProperty(element.properties, 'width')}
+                linear={booleanProperty(element.properties, 'linear')}
+                orientation={unionProperty(element.properties, 'orientation', orientations)}
+                okLabel={stringProperty(element.properties, 'okLabel')}
+                nextLabel={stringProperty(element.properties, 'nextLabel')}
+                previousLabel={stringProperty(element.properties, 'previousLabel')}
+                showCancel={booleanProperty(element.properties, 'showCancel')}
+                cancelLabel={stringProperty(element.properties, 'cancelLabel')}
+            >
+                {slots.content}
+            </StepperCommandDialog>
+        </ArcRuntimeBoundary>
+    );
+}

package/dialogs/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 './SceneDialog';
+export * from './SceneConfirmationDialog';
+export * from './SceneBusyIndicatorDialog';
+export * from './SceneCommandDialog';
+export * from './SceneStepperCommandDialog';

package/dist/cjs/bindings/ArcRuntimeBoundary.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var Common = require('@cratis/components/Common');
+
+/**
+ * Isolates one Arc-bound component so that neither loading it nor failing to load it can take the
+ * surrounding screen down with it.
+ *
+ * The Arc-bound half of `@cratis/components` - `DataPage`, the data tables, `CommandForm` and its
+ * fields, every dialog - reaches `@cratis/arc` and `@cratis/arc.react` at import time. Those are peer
+ * dependencies the *host* supplies, and a design surface is not a host: Studio previews a screen without
+ * an Arc client, without a backend, and often without a single binding registered. This package
+ * therefore imports every Arc-bound component through a dynamic `import()` rather than a static one, so
+ * that a screen made only of the library's Arc-free components never pulls the Arc runtime in at all.
+ *
+ * That deferral has two visible states, and this covers both: `Suspense` while the chunk is in flight,
+ * and the library's own `ErrorBoundary` when it cannot be loaded - which is what a host without Arc
+ * installed will see. One dashed-out region, not a blank screen and not a thrown render.
+ *
+ * `ErrorBoundary` is used by composition rather than by writing another one: an error boundary is the
+ * one thing React still requires a class for, and `@cratis/components` already ships that class.
+ */ function ArcRuntimeBoundary({ children }) {
+    return /*#__PURE__*/ jsxRuntime.jsx(Common.ErrorBoundary, {
+        children: /*#__PURE__*/ jsxRuntime.jsx(react.Suspense, {
+            fallback: /*#__PURE__*/ jsxRuntime.jsx("span", {
+                "data-scene-arc-loading": "",
+                children: "Loading"
+            }),
+            children: children
+        })
+    });
+}
+
+exports.ArcRuntimeBoundary = ArcRuntimeBoundary;
+//# sourceMappingURL=ArcRuntimeBoundary.js.map

package/dist/cjs/bindings/ArcRuntimeBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArcRuntimeBoundary.js","sources":["../../../bindings/ArcRuntimeBoundary.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, Suspense } from 'react';\nimport { ErrorBoundary } from '@cratis/components/Common';\n\nexport interface ArcRuntimeBoundaryProps {\n    /** The lazily loaded, Arc-bound content this boundary isolates. */\n    children: ReactNode;\n}\n\n/**\n * Isolates one Arc-bound component so that neither loading it nor failing to load it can take the\n * surrounding screen down with it.\n *\n * The Arc-bound half of `@cratis/components` - `DataPage`, the data tables, `CommandForm` and its\n * fields, every dialog - reaches `@cratis/arc` and `@cratis/arc.react` at import time. Those are peer\n * dependencies the *host* supplies, and a design surface is not a host: Studio previews a screen without\n * an Arc client, without a backend, and often without a single binding registered. This package\n * therefore imports every Arc-bound component through a dynamic `import()` rather than a static one, so\n * that a screen made only of the library's Arc-free components never pulls the Arc runtime in at all.\n *\n * That deferral has two visible states, and this covers both: `Suspense` while the chunk is in flight,\n * and the library's own `ErrorBoundary` when it cannot be loaded - which is what a host without Arc\n * installed will see. One dashed-out region, not a blank screen and not a thrown render.\n *\n * `ErrorBoundary` is used by composition rather than by writing another one: an error boundary is the\n * one thing React still requires a class for, and `@cratis/components` already ships that class.\n */\nexport function ArcRuntimeBoundary({ children }: ArcRuntimeBoundaryProps) {\n    return (\n        <ErrorBoundary>\n            <Suspense fallback={<span data-scene-arc-loading=''>Loading</span>}>{children}</Suspense>\n        </ErrorBoundary>\n    );\n}\n"],"names":["ArcRuntimeBoundary","children","_jsx","ErrorBoundary","Suspense","fallback","span","data-scene-arc-loading"],"mappings":";;;;;;AAWA;;;;;;;;;;;;;;;;;AAiBC,IACM,SAASA,kBAAAA,CAAmB,EAAEC,QAAQ,EAA2B,EAAA;AACpE,IAAA,qBACIC,cAAA,CAACC,oBAAAA,EAAAA;AACG,QAAA,QAAA,gBAAAD,cAAA,CAACE,cAAAA,EAAAA;AAASC,YAAAA,QAAAA,gBAAUH,cAAA,CAACI,MAAAA,EAAAA;gBAAKC,wBAAAA,EAAuB,EAAA;AAAG,gBAAA,QAAA,EAAA;;AAAiBN,YAAAA,QAAAA,EAAAA;;;AAGjF;;;;"}

package/dist/cjs/bindings/BindingKind.js

@@ -0,0 +1,19 @@
+'use strict';
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * What a name in a screen is expected to resolve to when it is looked up in the binding registry.
+ *
+ * Queries and commands are kept apart rather than sharing one namespace because they are opposite halves
+ * of CQRS and a screen means exactly one of them at each site: `data Invoices via query AllInvoices`
+ * cannot be satisfied by a command of the same name, and letting it be satisfied would turn a modeling
+ * mistake into a runtime one.
+ */ var BindingKind = /*#__PURE__*/ function(BindingKind) {
+    /** An Arc query proxy - what a data table or data page reads its rows from. */ BindingKind["Query"] = "query";
+    /** An Arc command proxy - what a command form or command dialog submits. */ BindingKind["Command"] = "command";
+    return BindingKind;
+}({});
+
+exports.BindingKind = BindingKind;
+//# sourceMappingURL=BindingKind.js.map

package/dist/cjs/bindings/BindingKind.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BindingKind.js","sources":["../../../bindings/BindingKind.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\n/**\n * What a name in a screen is expected to resolve to when it is looked up in the binding registry.\n *\n * Queries and commands are kept apart rather than sharing one namespace because they are opposite halves\n * of CQRS and a screen means exactly one of them at each site: `data Invoices via query AllInvoices`\n * cannot be satisfied by a command of the same name, and letting it be satisfied would turn a modeling\n * mistake into a runtime one.\n */\nexport enum BindingKind {\n    /** An Arc query proxy - what a data table or data page reads its rows from. */\n    Query = 'query',\n\n    /** An Arc command proxy - what a command form or command dialog submits. */\n    Command = 'command',\n}\n"],"names":["BindingKind"],"mappings":";;AAAA;AACA;AAEA;;;;;;;IAQO,IAAKA,WAAAA,iBAAAA,SAAAA,WAAAA,EAAAA;oFACqE,WAAA,CAAA,OAAA,CAAA,GAAA,OAAA;iFAGH,WAAA,CAAA,SAAA,CAAA,GAAA,SAAA;AAJlEA,IAAAA,OAAAA,WAAAA;AAMX,CAAA,CAAA,EAAA;;;;"}

package/dist/cjs/bindings/MissingBinding.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Placeholder = require('./Placeholder.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The placeholder an Arc-bound adapter renders instead of its real component when the binding it needs
+ * is not available.
+ *
+ * It names the binding, because that is the only actionable part: the fix is either to register that
+ * name in the host or to correct the name in the screen, and the message has to be enough to tell those
+ * two apart without opening a debugger.
+ */ function MissingBinding({ element, kind, name }) {
+    const problem = name === undefined ? `Missing ${kind} binding` : `Unresolved ${kind} binding '${name}'`;
+    return /*#__PURE__*/ jsxRuntime.jsx(Placeholder.Placeholder, {
+        element: element,
+        problem: problem
+    });
+}
+
+exports.MissingBinding = MissingBinding;
+//# sourceMappingURL=MissingBinding.js.map

package/dist/cjs/bindings/MissingBinding.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MissingBinding.js","sources":["../../../bindings/MissingBinding.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 { ExternalComponent } from '@cratis/scene.model';\nimport { BindingKind } from './BindingKind';\nimport { Placeholder } from './Placeholder';\n\nexport interface MissingBindingProps {\n    /** The element whose binding could not be satisfied. */\n    element: ExternalComponent;\n\n    /** Whether a query or a command was wanted. */\n    kind: BindingKind;\n\n    /**\n     * The name the screen asked for, or `undefined` when the screen never named one. The two are\n     * different mistakes and get different messages - a screen that names `AllInvoices` needs the host\n     * to register it, while a screen that names nothing needs editing.\n     */\n    name?: string;\n}\n\n/**\n * The placeholder an Arc-bound adapter renders instead of its real component when the binding it needs\n * is not available.\n *\n * It names the binding, because that is the only actionable part: the fix is either to register that\n * name in the host or to correct the name in the screen, and the message has to be enough to tell those\n * two apart without opening a debugger.\n */\nexport function MissingBinding({ element, kind, name }: MissingBindingProps) {\n    const problem = name === undefined ? `Missing ${kind} binding` : `Unresolved ${kind} binding '${name}'`;\n    return <Placeholder element={element} problem={problem} />;\n}\n"],"names":["MissingBinding","element","kind","name","problem","undefined","_jsx","Placeholder"],"mappings":";;;;;AAAA;AACA;AAqBA;;;;;;;IAQO,SAASA,cAAAA,CAAe,EAAEC,OAAO,EAAEC,IAAI,EAAEC,IAAI,EAAuB,EAAA;AACvE,IAAA,MAAMC,UAAUD,IAAAA,KAASE,SAAAA,GAAY,CAAC,QAAQ,EAAEH,KAAK,QAAQ,CAAC,GAAG,CAAC,WAAW,EAAEA,IAAAA,CAAK,UAAU,EAAEC,IAAAA,CAAK,CAAC,CAAC;AACvG,IAAA,qBAAOG,cAAA,CAACC,uBAAAA,EAAAA;QAAYN,OAAAA,EAASA,OAAAA;QAASG,OAAAA,EAASA;;AACnD;;;;"}

package/dist/cjs/bindings/Placeholder.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The stand-in an adapter renders when it has been given a screen it cannot honor - a binding name
+ * nothing is registered under, or a required property the screen never set.
+ *
+ * Deliberately the same presentation as `UnresolvedComponent` in `@cratis/scene.react`: a dashed red box
+ * that states the problem in monospace. They are the same class of failure seen at two different depths -
+ * the renderer could not find the component, or the component could not find what it needs - and a
+ * designer scanning a preview should recognize both instantly as "something here is not wired up".
+ *
+ * Rendering this rather than throwing is the whole point. Studio's design-time preview usually has no
+ * bindings registered at all, and it still has to show a usable layout: one unbound table must cost one
+ * dashed box, not the entire screen.
+ */ function Placeholder({ element, problem }) {
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        "data-scene-id": element.id,
+        "data-scene-placeholder": element.componentName,
+        style: {
+            border: '1px dashed red',
+            color: 'red',
+            padding: '0.25rem 0.5rem',
+            fontFamily: 'monospace'
+        },
+        children: [
+            problem,
+            " on ",
+            element.componentName
+        ]
+    });
+}
+
+exports.Placeholder = Placeholder;
+//# sourceMappingURL=Placeholder.js.map

package/dist/cjs/bindings/Placeholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Placeholder.js","sources":["../../../bindings/Placeholder.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 { ExternalComponent } from '@cratis/scene.model';\n\nexport interface PlaceholderProps {\n    /**\n     * The element that could not be rendered as configured. Its `componentName` names what was being\n     * rendered, which is most of what makes the placeholder actionable.\n     */\n    element: ExternalComponent;\n\n    /**\n     * What is wrong, phrased as the problem rather than the remedy - `Unresolved query binding 'AllInvoices'`.\n     */\n    problem: string;\n}\n\n/**\n * The stand-in an adapter renders when it has been given a screen it cannot honor - a binding name\n * nothing is registered under, or a required property the screen never set.\n *\n * Deliberately the same presentation as `UnresolvedComponent` in `@cratis/scene.react`: a dashed red box\n * that states the problem in monospace. They are the same class of failure seen at two different depths -\n * the renderer could not find the component, or the component could not find what it needs - and a\n * designer scanning a preview should recognize both instantly as \"something here is not wired up\".\n *\n * Rendering this rather than throwing is the whole point. Studio's design-time preview usually has no\n * bindings registered at all, and it still has to show a usable layout: one unbound table must cost one\n * dashed box, not the entire screen.\n */\nexport function Placeholder({ element, problem }: PlaceholderProps) {\n    return (\n        <div\n            data-scene-id={element.id}\n            data-scene-placeholder={element.componentName}\n            style={{ border: '1px dashed red', color: 'red', padding: '0.25rem 0.5rem', fontFamily: 'monospace' }}\n        >\n            {problem} on {element.componentName}\n        </div>\n    );\n}\n"],"names":["Placeholder","element","problem","_jsxs","div","data-scene-id","id","data-scene-placeholder","componentName","style","border","color","padding","fontFamily"],"mappings":";;;;AAAA;AACA;AAiBA;;;;;;;;;;;;AAYC,IACM,SAASA,WAAAA,CAAY,EAAEC,OAAO,EAAEC,OAAO,EAAoB,EAAA;AAC9D,IAAA,qBACIC,eAAA,CAACC,KAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeJ,QAAQK,EAAE;AACzBC,QAAAA,wBAAAA,EAAwBN,QAAQO,aAAa;QAC7CC,KAAAA,EAAO;YAAEC,MAAAA,EAAQ,gBAAA;YAAkBC,KAAAA,EAAO,KAAA;YAAOC,OAAAA,EAAS,gBAAA;YAAkBC,UAAAA,EAAY;AAAY,SAAA;;AAEnGX,YAAAA,OAAAA;AAAQ,YAAA,MAAA;AAAKD,YAAAA,OAAAA,CAAQO;;;AAGlC;;;;"}