@cratis/scene.components 0.1.0

package/dist/cjs/editors/filterDefinitions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filterDefinitions.js","sources":["../../../editors/filterDefinitions.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 { FilterDefinition, FilterOption, FilterValue } from '@cratis/components/Filter';\nimport { booleanProperty, numberProperty, objectArrayProperty, stringProperty, unionProperty } from '../properties';\n\n/** The value kinds a filter can be declared over. */\nconst filterTypes = ['string', 'number', 'date', 'custom'] as const;\n\n/**\n * Reads a `filters` property into the `FilterDefinition` list `FilterPanel` renders.\n *\n * A definition needs a `key` and a `label`; an entry without both is dropped, since a filter with no key\n * has nothing to filter on and one with no label cannot be shown. Everything else is optional and falls\n * through to the panel's own defaults.\n */\nexport function filterDefinitions(properties: Record<string, unknown>): FilterDefinition[] {\n    const entries = objectArrayProperty(properties, 'filters') ?? [];\n\n    return entries\n        .map((entry): FilterDefinition | undefined => {\n            const key = stringProperty(entry, 'key');\n            const label = stringProperty(entry, 'label');\n            if (key === undefined || label === undefined) return undefined;\n\n            return {\n                key,\n                label,\n                type: unionProperty(entry, 'type', filterTypes),\n                multi: booleanProperty(entry, 'multi'),\n                options: filterOptions(entry),\n                searchable: booleanProperty(entry, 'searchable'),\n                searchPlaceholder: stringProperty(entry, 'searchPlaceholder'),\n                buckets: numberProperty(entry, 'buckets'),\n            };\n        })\n        .filter((definition): definition is FilterDefinition => definition !== undefined);\n}\n\n/**\n * Reads one filter's selectable options. An option's `value` is what gets applied and its `key` is what\n * the panel tracks selection by; `value` falls back to the key so the common case of a plain string\n * choice needs only `key` and `label`.\n */\nfunction filterOptions(entry: Record<string, unknown>): FilterOption[] | undefined {\n    const options = objectArrayProperty(entry, 'options');\n    if (options === undefined) return undefined;\n\n    return options\n        .map((option): FilterOption | undefined => {\n            const key = stringProperty(option, 'key');\n            const label = stringProperty(option, 'label');\n            if (key === undefined || label === undefined) return undefined;\n\n            const value: FilterValue = stringProperty(option, 'value') ?? numberProperty(option, 'value') ?? booleanProperty(option, 'value') ?? key;\n            return { key, label, value, count: numberProperty(option, 'count') };\n        })\n        .filter((option): option is FilterOption => option !== undefined);\n}\n"],"names":["filterTypes","filterDefinitions","properties","entries","objectArrayProperty","map","entry","key","stringProperty","label","undefined","type","unionProperty","multi","booleanProperty","options","filterOptions","searchable","searchPlaceholder","buckets","numberProperty","filter","definition","option","value","count"],"mappings":";;;;AAAA;AACA;AAKA,sDACA,MAAMA,WAAAA,GAAc;AAAC,IAAA,QAAA;AAAU,IAAA,QAAA;AAAU,IAAA,MAAA;AAAQ,IAAA;AAAS,CAAA;AAE1D;;;;;;IAOO,SAASC,iBAAAA,CAAkBC,YAAmC,EAAA;AACjE,IAAA,MAAMC,OAAAA,GAAUC,8BAAAA,CAAoBF,YAAAA,EAAY,SAAA,CAAA,IAAc,EAAE;IAEhE,OAAOC,OAAAA,CACFE,GAAG,CAAC,CAACC,KAAAA,GAAAA;QACF,MAAMC,GAAAA,GAAMC,0BAAeF,KAAAA,EAAO,KAAA,CAAA;QAClC,MAAMG,KAAAA,GAAQD,0BAAeF,KAAAA,EAAO,OAAA,CAAA;AACpC,QAAA,IAAIC,GAAAA,KAAQG,SAAAA,IAAaD,KAAAA,KAAUC,SAAAA,EAAW,OAAOA,SAAAA;QAErD,OAAO;AACHH,YAAAA,GAAAA;AACAE,YAAAA,KAAAA;YACAE,IAAAA,EAAMC,wBAAAA,CAAcN,OAAO,MAAA,EAAQN,WAAAA,CAAAA;AACnCa,YAAAA,KAAAA,EAAOC,2BAAgBR,KAAAA,EAAO,OAAA,CAAA;AAC9BS,YAAAA,OAAAA,EAASC,aAAAA,CAAcV,KAAAA,CAAAA;AACvBW,YAAAA,UAAAA,EAAYH,2BAAgBR,KAAAA,EAAO,YAAA,CAAA;AACnCY,YAAAA,iBAAAA,EAAmBV,0BAAeF,KAAAA,EAAO,mBAAA,CAAA;AACzCa,YAAAA,OAAAA,EAASC,0BAAed,KAAAA,EAAO,SAAA;AACnC,SAAA;AACJ,IAAA,CAAA,CAAA,CACCe,MAAM,CAAC,CAACC,UAAAA,GAA+CA,UAAAA,KAAeZ,SAAAA,CAAAA;AAC/E;AAEA;;;;IAKA,SAASM,cAAcV,KAA8B,EAAA;IACjD,MAAMS,OAAAA,GAAUX,+BAAoBE,KAAAA,EAAO,SAAA,CAAA;IAC3C,IAAIS,OAAAA,KAAYL,WAAW,OAAOA,SAAAA;IAElC,OAAOK,OAAAA,CACFV,GAAG,CAAC,CAACkB,MAAAA,GAAAA;QACF,MAAMhB,GAAAA,GAAMC,0BAAee,MAAAA,EAAQ,KAAA,CAAA;QACnC,MAAMd,KAAAA,GAAQD,0BAAee,MAAAA,EAAQ,OAAA,CAAA;AACrC,QAAA,IAAIhB,GAAAA,KAAQG,SAAAA,IAAaD,KAAAA,KAAUC,SAAAA,EAAW,OAAOA,SAAAA;QAErD,MAAMc,KAAAA,GAAqBhB,0BAAee,MAAAA,EAAQ,OAAA,CAAA,IAAYH,0BAAeG,MAAAA,EAAQ,OAAA,CAAA,IAAYT,0BAAAA,CAAgBS,MAAAA,EAAQ,OAAA,CAAA,IAAYhB,GAAAA;QACrI,OAAO;AAAEA,YAAAA,GAAAA;AAAKE,YAAAA,KAAAA;AAAOe,YAAAA,KAAAA;AAAOC,YAAAA,KAAAA,EAAOL,0BAAeG,MAAAA,EAAQ,OAAA;AAAS,SAAA;AACvE,IAAA,CAAA,CAAA,CACCF,MAAM,CAAC,CAACE,MAAAA,GAAmCA,MAAAA,KAAWb,SAAAA,CAAAA;AAC/D;;;;"}

package/dist/cjs/editors/timeMachineVersions.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var properties = require('../properties.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * Reads a `versions` property into the `Version` list `TimeMachine` renders.
+ *
+ * An entry without an `id`, a `label` and a parseable `timestamp` is dropped rather than defaulted,
+ * because `TimeMachine`'s whole job is to place versions on a timeline: a version invented at the epoch
+ * would not be a slightly wrong entry, it would silently reorder every real one around it. A dropped
+ * entry is visibly one item short; a fabricated one is a timeline that lies.
+ *
+ * `content` is rendered as text. A version whose content is a whole element tree is not something a
+ * property bag can carry, and pretending otherwise would be the wrong seam - that belongs in a screen
+ * template, not in a property.
+ */ function timeMachineVersions(properties$1) {
+    const entries = properties.objectArrayProperty(properties$1, 'versions') ?? [];
+    return entries.map((entry)=>{
+        const id = properties.stringProperty(entry, 'id');
+        const label = properties.stringProperty(entry, 'label');
+        const timestamp = timestampOf(entry);
+        if (id === undefined || label === undefined || timestamp === undefined) return undefined;
+        return {
+            id,
+            label,
+            timestamp,
+            content: properties.stringProperty(entry, 'content') ?? ''
+        };
+    }).filter((version)=>version !== undefined);
+}
+/**
+ * Reads an entry's `timestamp`, accepting both the ISO string a `.play` screen writes and the epoch
+ * number a serializer may produce, and rejecting anything that does not parse into a real date.
+ */ function timestampOf(entry) {
+    const value = properties.stringProperty(entry, 'timestamp') ?? properties.numberProperty(entry, 'timestamp');
+    if (value === undefined) return undefined;
+    const timestamp = new Date(value);
+    return Number.isNaN(timestamp.getTime()) ? undefined : timestamp;
+}
+
+exports.timeMachineVersions = timeMachineVersions;
+//# sourceMappingURL=timeMachineVersions.js.map

package/dist/cjs/editors/timeMachineVersions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeMachineVersions.js","sources":["../../../editors/timeMachineVersions.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 { Version } from '@cratis/components/TimeMachine';\nimport { numberProperty, objectArrayProperty, stringProperty } from '../properties';\n\n/**\n * Reads a `versions` property into the `Version` list `TimeMachine` renders.\n *\n * An entry without an `id`, a `label` and a parseable `timestamp` is dropped rather than defaulted,\n * because `TimeMachine`'s whole job is to place versions on a timeline: a version invented at the epoch\n * would not be a slightly wrong entry, it would silently reorder every real one around it. A dropped\n * entry is visibly one item short; a fabricated one is a timeline that lies.\n *\n * `content` is rendered as text. A version whose content is a whole element tree is not something a\n * property bag can carry, and pretending otherwise would be the wrong seam - that belongs in a screen\n * template, not in a property.\n */\nexport function timeMachineVersions(properties: Record<string, unknown>): Version[] {\n    const entries = objectArrayProperty(properties, 'versions') ?? [];\n\n    return entries\n        .map((entry): Version | undefined => {\n            const id = stringProperty(entry, 'id');\n            const label = stringProperty(entry, 'label');\n            const timestamp = timestampOf(entry);\n            if (id === undefined || label === undefined || timestamp === undefined) return undefined;\n\n            return { id, label, timestamp, content: stringProperty(entry, 'content') ?? '' };\n        })\n        .filter((version): version is Version => version !== undefined);\n}\n\n/**\n * Reads an entry's `timestamp`, accepting both the ISO string a `.play` screen writes and the epoch\n * number a serializer may produce, and rejecting anything that does not parse into a real date.\n */\nfunction timestampOf(entry: Record<string, unknown>): Date | undefined {\n    const value = stringProperty(entry, 'timestamp') ?? numberProperty(entry, 'timestamp');\n    if (value === undefined) return undefined;\n\n    const timestamp = new Date(value);\n    return Number.isNaN(timestamp.getTime()) ? undefined : timestamp;\n}\n"],"names":["timeMachineVersions","properties","entries","objectArrayProperty","map","entry","id","stringProperty","label","timestamp","timestampOf","undefined","content","filter","version","value","numberProperty","Date","Number","isNaN","getTime"],"mappings":";;;;AAAA;AACA;AAKA;;;;;;;;;;;IAYO,SAASA,mBAAAA,CAAoBC,YAAmC,EAAA;AACnE,IAAA,MAAMC,OAAAA,GAAUC,8BAAAA,CAAoBF,YAAAA,EAAY,UAAA,CAAA,IAAe,EAAE;IAEjE,OAAOC,OAAAA,CACFE,GAAG,CAAC,CAACC,KAAAA,GAAAA;QACF,MAAMC,EAAAA,GAAKC,0BAAeF,KAAAA,EAAO,IAAA,CAAA;QACjC,MAAMG,KAAAA,GAAQD,0BAAeF,KAAAA,EAAO,OAAA,CAAA;AACpC,QAAA,MAAMI,YAAYC,WAAAA,CAAYL,KAAAA,CAAAA;AAC9B,QAAA,IAAIC,OAAOK,SAAAA,IAAaH,KAAAA,KAAUG,SAAAA,IAAaF,SAAAA,KAAcE,WAAW,OAAOA,SAAAA;QAE/E,OAAO;AAAEL,YAAAA,EAAAA;AAAIE,YAAAA,KAAAA;AAAOC,YAAAA,SAAAA;YAAWG,OAAAA,EAASL,yBAAAA,CAAeF,OAAO,SAAA,CAAA,IAAc;AAAG,SAAA;AACnF,IAAA,CAAA,CAAA,CACCQ,MAAM,CAAC,CAACC,OAAAA,GAAgCA,OAAAA,KAAYH,SAAAA,CAAAA;AAC7D;AAEA;;;IAIA,SAASD,YAAYL,KAA8B,EAAA;AAC/C,IAAA,MAAMU,KAAAA,GAAQR,yBAAAA,CAAeF,KAAAA,EAAO,WAAA,CAAA,IAAgBW,0BAAeX,KAAAA,EAAO,WAAA,CAAA;IAC1E,IAAIU,KAAAA,KAAUJ,WAAW,OAAOA,SAAAA;IAEhC,MAAMF,SAAAA,GAAY,IAAIQ,IAAAA,CAAKF,KAAAA,CAAAA;AAC3B,IAAA,OAAOG,OAAOC,KAAK,CAACV,SAAAA,CAAUW,OAAO,MAAMT,SAAAA,GAAYF,SAAAA;AAC3D;;;;"}

package/dist/cjs/editors/useEditableCopy.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var react = require('react');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * Keeps a locally editable copy of a value a screen declares, resetting it whenever the declared value
+ * itself changes.
+ *
+ * The editors in `@cratis/components` are controlled components: `ObjectContentEditor`, `SchemaEditor`
+ * and `TimeMachine` all render what they are given and report changes through a callback. A Scene screen
+ * can only *declare* the starting value - a property bag has no way to receive a callback - so without
+ * somewhere to put the result, every one of these would render as a dead surface that discards every
+ * keystroke. Local state is what makes them behave like the editors they are while a screen is being
+ * designed; a host that needs the edits for real reads them off its own model, not off the screen.
+ *
+ * The reset is deliberately done during render rather than in an effect: Studio rewrites an element's
+ * properties as the designer types, and an effect-based reset would show one frame of the previous
+ * value every time.
+ */ function useEditableCopy(source) {
+    const [edited, setEdited] = react.useState(source);
+    const [lastSource, setLastSource] = react.useState(source);
+    if (lastSource !== source) {
+        setLastSource(source);
+        setEdited(source);
+        return [
+            source,
+            setEdited
+        ];
+    }
+    return [
+        edited,
+        setEdited
+    ];
+}
+
+exports.useEditableCopy = useEditableCopy;
+//# sourceMappingURL=useEditableCopy.js.map

package/dist/cjs/editors/useEditableCopy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEditableCopy.js","sources":["../../../editors/useEditableCopy.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 { useState } from 'react';\n\n/**\n * Keeps a locally editable copy of a value a screen declares, resetting it whenever the declared value\n * itself changes.\n *\n * The editors in `@cratis/components` are controlled components: `ObjectContentEditor`, `SchemaEditor`\n * and `TimeMachine` all render what they are given and report changes through a callback. A Scene screen\n * can only *declare* the starting value - a property bag has no way to receive a callback - so without\n * somewhere to put the result, every one of these would render as a dead surface that discards every\n * keystroke. Local state is what makes them behave like the editors they are while a screen is being\n * designed; a host that needs the edits for real reads them off its own model, not off the screen.\n *\n * The reset is deliberately done during render rather than in an effect: Studio rewrites an element's\n * properties as the designer types, and an effect-based reset would show one frame of the previous\n * value every time.\n */\nexport function useEditableCopy<T>(source: T): [T, (value: T) => void] {\n    const [edited, setEdited] = useState(source);\n    const [lastSource, setLastSource] = useState(source);\n\n    if (lastSource !== source) {\n        setLastSource(source);\n        setEdited(source);\n        return [source, setEdited];\n    }\n\n    return [edited, setEdited];\n}\n"],"names":["useEditableCopy","source","edited","setEdited","useState","lastSource","setLastSource"],"mappings":";;;;AAAA;AACA;AAIA;;;;;;;;;;;;;;IAeO,SAASA,eAAAA,CAAmBC,MAAS,EAAA;AACxC,IAAA,MAAM,CAACC,MAAAA,EAAQC,SAAAA,CAAU,GAAGC,cAAAA,CAASH,MAAAA,CAAAA;AACrC,IAAA,MAAM,CAACI,UAAAA,EAAYC,aAAAA,CAAc,GAAGF,cAAAA,CAASH,MAAAA,CAAAA;AAE7C,IAAA,IAAII,eAAeJ,MAAAA,EAAQ;QACvBK,aAAAA,CAAcL,MAAAA,CAAAA;QACdE,SAAAA,CAAUF,MAAAA,CAAAA;QACV,OAAO;AAACA,YAAAA,MAAAA;AAAQE,YAAAA;AAAU,SAAA;AAC9B,IAAA;IAEA,OAAO;AAACD,QAAAA,MAAAA;AAAQC,QAAAA;AAAU,KAAA;AAC9B;;;;"}

package/dist/cjs/forms/SceneCommandForm.js

@@ -0,0 +1,46 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var BindingKind = require('../bindings/BindingKind.js');
+var resolveElementBinding = require('../bindings/resolveElementBinding.js');
+var MissingBinding = require('../bindings/MissingBinding.js');
+var ArcRuntimeBoundary = require('../bindings/ArcRuntimeBoundary.js');
+var properties = require('../properties.js');
+
+/**
+ * `AutoCommandForm` types `exclude` as `(keyof TCommand)[]`, which collapses to `never[]` when the
+ * command type is only known at runtime - as it always is here, since the class arrives from the binding
+ * registry rather than from a type annotation. The conversion states the shape this adapter actually
+ * passes; the underlying component reads `exclude` as property names either way.
+ */ const AutoCommandForm = /*#__PURE__*/ react.lazy(async ()=>({
+        default: (await import('@cratis/components/CommandForm')).AutoCommandForm
+    }));
+/**
+ * The `Cratis.Components:commandForm` component - `AutoCommandForm` from `@cratis/components/CommandForm`.
+ *
+ * `AutoCommandForm` rather than `CommandForm`, because a screen that had to list every field by hand
+ * would go stale the moment a property is added to the command on the backend. `AutoCommandForm` reads
+ * the command's own property descriptors and picks a field component per property type, so the form
+ * follows the command - which is the same guarantee Arc's generated proxies give the rest of the stack.
+ *
+ * A screen that does want to place fields itself puts the field components from this package in the
+ * `content` slot and names them individually; `exclude` keeps `AutoCommandForm` from generating a second
+ * copy of anything placed that way.
+ */ function SceneCommandForm({ element }) {
+    const { name, target } = resolveElementBinding.resolveElementBinding(element, BindingKind.BindingKind.Command);
+    if (!target) return /*#__PURE__*/ jsxRuntime.jsx(MissingBinding.MissingBinding, {
+        element: element,
+        kind: BindingKind.BindingKind.Command,
+        name: name
+    });
+    return /*#__PURE__*/ jsxRuntime.jsx(ArcRuntimeBoundary.ArcRuntimeBoundary, {
+        children: /*#__PURE__*/ jsxRuntime.jsx(AutoCommandForm, {
+            command: target,
+            exclude: properties.stringArrayProperty(element.properties, 'exclude')
+        })
+    });
+}
+
+exports.SceneCommandForm = SceneCommandForm;
+//# sourceMappingURL=SceneCommandForm.js.map

package/dist/cjs/forms/SceneCommandForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SceneCommandForm.js","sources":["../../../forms/SceneCommandForm.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, lazy } from 'react';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { ArcRuntimeBoundary, BindingKind, BoundConstructor, MissingBinding, resolveElementBinding } from '../bindings';\nimport { stringArrayProperty } from '../properties';\n\ninterface AutoCommandFormElementProps {\n    command: BoundConstructor;\n    exclude?: string[];\n}\n\n/**\n * `AutoCommandForm` types `exclude` as `(keyof TCommand)[]`, which collapses to `never[]` when the\n * command type is only known at runtime - as it always is here, since the class arrives from the binding\n * registry rather than from a type annotation. The conversion states the shape this adapter actually\n * passes; the underlying component reads `exclude` as property names either way.\n */\nconst AutoCommandForm = lazy(async () => ({\n    default: (await import('@cratis/components/CommandForm')).AutoCommandForm as unknown as ComponentType<AutoCommandFormElementProps>,\n}));\n\n/**\n * The `Cratis.Components:commandForm` component - `AutoCommandForm` from `@cratis/components/CommandForm`.\n *\n * `AutoCommandForm` rather than `CommandForm`, because a screen that had to list every field by hand\n * would go stale the moment a property is added to the command on the backend. `AutoCommandForm` reads\n * the command's own property descriptors and picks a field component per property type, so the form\n * follows the command - which is the same guarantee Arc's generated proxies give the rest of the stack.\n *\n * A screen that does want to place fields itself puts the field components from this package in the\n * `content` slot and names them individually; `exclude` keeps `AutoCommandForm` from generating a second\n * copy of anything placed that way.\n */\nexport function SceneCommandForm({ element }: RegisteredComponentProps) {\n    const { name, target } = resolveElementBinding(element, BindingKind.Command);\n    if (!target) return <MissingBinding element={element} kind={BindingKind.Command} name={name} />;\n\n    return (\n        <ArcRuntimeBoundary>\n            <AutoCommandForm command={target} exclude={stringArrayProperty(element.properties, 'exclude')} />\n        </ArcRuntimeBoundary>\n    );\n}\n"],"names":["AutoCommandForm","lazy","default","SceneCommandForm","element","name","target","resolveElementBinding","BindingKind","Command","_jsx","MissingBinding","kind","ArcRuntimeBoundary","command","exclude","stringArrayProperty","properties"],"mappings":";;;;;;;;;;AAaA;;;;;AAKC,IACD,MAAMA,eAAAA,iBAAkBC,UAAAA,CAAK,WAAa;AACtCC,QAAAA,OAAAA,EAAS,CAAC,MAAM,OAAO,gCAAA,CAAgC,EAAGF;KAC9D,CAAA,CAAA;AAEA;;;;;;;;;;;AAWC,IACM,SAASG,gBAAAA,CAAiB,EAAEC,OAAO,EAA4B,EAAA;IAClE,MAAM,EAAEC,IAAI,EAAEC,MAAM,EAAE,GAAGC,2CAAAA,CAAsBH,OAAAA,EAASI,uBAAAA,CAAYC,OAAO,CAAA;IAC3E,IAAI,CAACH,MAAAA,EAAQ,qBAAOI,cAAA,CAACC,6BAAAA,EAAAA;QAAeP,OAAAA,EAASA,OAAAA;AAASQ,QAAAA,IAAAA,EAAMJ,wBAAYC,OAAO;QAAEJ,IAAAA,EAAMA;;AAEvF,IAAA,qBACIK,cAAA,CAACG,qCAAAA,EAAAA;AACG,QAAA,QAAA,gBAAAH,cAAA,CAACV,eAAAA,EAAAA;YAAgBc,OAAAA,EAASR,MAAAA;YAAQS,OAAAA,EAASC,8BAAAA,CAAoBZ,OAAAA,CAAQa,UAAU,EAAE,SAAA;;;AAG/F;;;;"}

package/dist/cjs/forms/fields/CommandFormField.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('../../bindings/resolveElementBinding.js');
+var Placeholder = require('../../bindings/Placeholder.js');
+var ArcRuntimeBoundary = require('../../bindings/ArcRuntimeBoundary.js');
+var resolveFieldBinding = require('./resolveFieldBinding.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The part every command form field adapter does identically: resolve the element's `property` into a
+ * {@link FieldBinding}, place a visible placeholder when there is none, and isolate the lazily loaded
+ * Arc-bound field behind an {@link ArcRuntimeBoundary}.
+ *
+ * Factored out rather than repeated twelve times so that the behavior a screen author depends on - an
+ * unbound field shows up as an unbound field, and one broken field does not take the form with it - is
+ * defined once and cannot drift between field types.
+ */ function CommandFormField({ element, children }) {
+    const binding = resolveFieldBinding.resolveFieldBinding(element);
+    if (!binding) return /*#__PURE__*/ jsxRuntime.jsx(Placeholder.Placeholder, {
+        element: element,
+        problem: "Missing 'property'"
+    });
+    return /*#__PURE__*/ jsxRuntime.jsx(ArcRuntimeBoundary.ArcRuntimeBoundary, {
+        children: children(binding)
+    });
+}
+
+exports.CommandFormField = CommandFormField;
+//# sourceMappingURL=CommandFormField.js.map

package/dist/cjs/forms/fields/CommandFormField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandFormField.js","sources":["../../../../forms/fields/CommandFormField.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 } from 'react';\nimport { ExternalComponent } from '@cratis/scene.model';\nimport { ArcRuntimeBoundary, Placeholder } from '../../bindings';\nimport { FieldBinding } from './FieldBinding';\nimport { resolveFieldBinding } from './resolveFieldBinding';\n\nexport interface CommandFormFieldProps {\n    /** The element being adapted, read for its `property`, `title` and `description`. */\n    element: ExternalComponent;\n\n    /** Renders the real `@cratis/components` field, given the binding built from the element. */\n    children: (binding: FieldBinding) => ReactNode;\n}\n\n/**\n * The part every command form field adapter does identically: resolve the element's `property` into a\n * {@link FieldBinding}, place a visible placeholder when there is none, and isolate the lazily loaded\n * Arc-bound field behind an {@link ArcRuntimeBoundary}.\n *\n * Factored out rather than repeated twelve times so that the behavior a screen author depends on - an\n * unbound field shows up as an unbound field, and one broken field does not take the form with it - is\n * defined once and cannot drift between field types.\n */\nexport function CommandFormField({ element, children }: CommandFormFieldProps) {\n    const binding = resolveFieldBinding(element);\n    if (!binding) return <Placeholder element={element} problem=\"Missing 'property'\" />;\n\n    return <ArcRuntimeBoundary>{children(binding)}</ArcRuntimeBoundary>;\n}\n"],"names":["CommandFormField","element","children","binding","resolveFieldBinding","_jsx","Placeholder","problem","ArcRuntimeBoundary"],"mappings":";;;;;;;;AAAA;AACA;AAgBA;;;;;;;;AAQC,IACM,SAASA,gBAAAA,CAAiB,EAAEC,OAAO,EAAEC,QAAQ,EAAyB,EAAA;AACzE,IAAA,MAAMC,UAAUC,uCAAAA,CAAoBH,OAAAA,CAAAA;IACpC,IAAI,CAACE,OAAAA,EAAS,qBAAOE,cAAA,CAACC,uBAAAA,EAAAA;QAAYL,OAAAA,EAASA,OAAAA;QAASM,OAAAA,EAAQ;;AAE5D,IAAA,qBAAOF,cAAA,CAACG,qCAAAA,EAAAA;kBAAoBN,QAAAA,CAASC,OAAAA;;AACzC;;;;"}

package/dist/cjs/forms/fields/SceneCalendarField.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var properties = require('../../properties.js');
+var CommandFormField = require('./CommandFormField.js');
+
+const CalendarField = /*#__PURE__*/ react.lazy(async ()=>({
+        default: (await import('@cratis/components/CommandForm')).CalendarField
+    }));
+/** Whether times are shown on a 12- or 24-hour clock. */ const hourFormats = [
+    '12',
+    '24'
+];
+/**
+ * The `Cratis.Components:calendarField` component - `CalendarField` from `@cratis/components/CommandForm`.
+ *
+ * Binds to a `Date` property, so the command receives a real date rather than the string an
+ * `<input type="date">` produces - which matters because the backend's command record is typed and a
+ * string would fail model binding rather than the field.
+ *
+ * `minDate` and `maxDate` are deliberately not exposed: they would have to come out of the property bag
+ * as strings and be parsed here, and a bound range that silently misparses is worse than no bound range.
+ * A date range that has to be enforced belongs in the command's validator, where it is authoritative.
+ */ function SceneCalendarField({ element }) {
+    return /*#__PURE__*/ jsxRuntime.jsx(CommandFormField.CommandFormField, {
+        element: element,
+        children: (binding)=>/*#__PURE__*/ jsxRuntime.jsx(CalendarField, {
+                ...binding,
+                placeholder: properties.stringProperty(element.properties, 'placeholder'),
+                dateFormat: properties.stringProperty(element.properties, 'dateFormat'),
+                showIcon: properties.booleanProperty(element.properties, 'showIcon'),
+                showTime: properties.booleanProperty(element.properties, 'showTime'),
+                hourFormat: properties.unionProperty(element.properties, 'hourFormat', hourFormats),
+                className: properties.stringProperty(element.properties, 'className')
+            })
+    });
+}
+
+exports.SceneCalendarField = SceneCalendarField;
+//# sourceMappingURL=SceneCalendarField.js.map

package/dist/cjs/forms/fields/SceneCalendarField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SceneCalendarField.js","sources":["../../../../forms/fields/SceneCalendarField.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 { lazy } from 'react';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, stringProperty, unionProperty } from '../../properties';\nimport { CommandFormField } from './CommandFormField';\n\nconst CalendarField = lazy(async () => ({ default: (await import('@cratis/components/CommandForm')).CalendarField }));\n\n/** Whether times are shown on a 12- or 24-hour clock. */\nconst hourFormats = ['12', '24'] as const;\n\n/**\n * The `Cratis.Components:calendarField` component - `CalendarField` from `@cratis/components/CommandForm`.\n *\n * Binds to a `Date` property, so the command receives a real date rather than the string an\n * `<input type=\"date\">` produces - which matters because the backend's command record is typed and a\n * string would fail model binding rather than the field.\n *\n * `minDate` and `maxDate` are deliberately not exposed: they would have to come out of the property bag\n * as strings and be parsed here, and a bound range that silently misparses is worse than no bound range.\n * A date range that has to be enforced belongs in the command's validator, where it is authoritative.\n */\nexport function SceneCalendarField({ element }: RegisteredComponentProps) {\n    return (\n        <CommandFormField element={element}>\n            {binding => (\n                <CalendarField\n                    {...binding}\n                    placeholder={stringProperty(element.properties, 'placeholder')}\n                    dateFormat={stringProperty(element.properties, 'dateFormat')}\n                    showIcon={booleanProperty(element.properties, 'showIcon')}\n                    showTime={booleanProperty(element.properties, 'showTime')}\n                    hourFormat={unionProperty(element.properties, 'hourFormat', hourFormats)}\n                    className={stringProperty(element.properties, 'className')}\n                />\n            )}\n        </CommandFormField>\n    );\n}\n"],"names":["CalendarField","lazy","default","hourFormats","SceneCalendarField","element","_jsx","CommandFormField","binding","placeholder","stringProperty","properties","dateFormat","showIcon","booleanProperty","showTime","hourFormat","unionProperty","className"],"mappings":";;;;;;;AAQA,MAAMA,aAAAA,iBAAgBC,UAAAA,CAAK,WAAa;AAAEC,QAAAA,OAAAA,EAAS,CAAC,MAAM,OAAO,gCAAA,CAAgC,EAAGF;KAAc,CAAA,CAAA;AAElH,0DACA,MAAMG,WAAAA,GAAc;AAAC,IAAA,IAAA;AAAM,IAAA;AAAK,CAAA;AAEhC;;;;;;;;;;AAUC,IACM,SAASC,kBAAAA,CAAmB,EAAEC,OAAO,EAA4B,EAAA;AACpE,IAAA,qBACIC,cAAA,CAACC,iCAAAA,EAAAA;QAAiBF,OAAAA,EAASA,OAAAA;AACtBG,QAAAA,QAAAA,EAAAA,CAAAA,wBACGF,cAAA,CAACN,aAAAA,EAAAA;AACI,gBAAA,GAAGQ,OAAO;gBACXC,WAAAA,EAAaC,yBAAAA,CAAeL,OAAAA,CAAQM,UAAU,EAAE,aAAA,CAAA;gBAChDC,UAAAA,EAAYF,yBAAAA,CAAeL,OAAAA,CAAQM,UAAU,EAAE,YAAA,CAAA;gBAC/CE,QAAAA,EAAUC,0BAAAA,CAAgBT,OAAAA,CAAQM,UAAU,EAAE,UAAA,CAAA;gBAC9CI,QAAAA,EAAUD,0BAAAA,CAAgBT,OAAAA,CAAQM,UAAU,EAAE,UAAA,CAAA;AAC9CK,gBAAAA,UAAAA,EAAYC,wBAAAA,CAAcZ,OAAAA,CAAQM,UAAU,EAAE,YAAA,EAAcR,WAAAA,CAAAA;gBAC5De,SAAAA,EAAWR,yBAAAA,CAAeL,OAAAA,CAAQM,UAAU,EAAE,WAAA;;;AAKlE;;;;"}

package/dist/cjs/forms/fields/SceneCheckboxField.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var properties = require('../../properties.js');
+var CommandFormField = require('./CommandFormField.js');
+
+const CheckboxField = /*#__PURE__*/ react.lazy(async ()=>({
+        default: (await import('@cratis/components/CommandForm')).CheckboxField
+    }));
+/**
+ * The `Cratis.Components:checkboxField` component - `CheckboxField` from `@cratis/components/CommandForm`.
+ *
+ * `label` is the text beside the box and is distinct from `title`, which is the field's own label above
+ * it - a checkbox usually wants only one of the two, and which one is a layout decision the screen makes.
+ */ function SceneCheckboxField({ element }) {
+    return /*#__PURE__*/ jsxRuntime.jsx(CommandFormField.CommandFormField, {
+        element: element,
+        children: (binding)=>/*#__PURE__*/ jsxRuntime.jsx(CheckboxField, {
+                ...binding,
+                label: properties.stringProperty(element.properties, 'label'),
+                className: properties.stringProperty(element.properties, 'className')
+            })
+    });
+}
+
+exports.SceneCheckboxField = SceneCheckboxField;
+//# sourceMappingURL=SceneCheckboxField.js.map

package/dist/cjs/forms/fields/SceneCheckboxField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SceneCheckboxField.js","sources":["../../../../forms/fields/SceneCheckboxField.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 { lazy } from 'react';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { stringProperty } from '../../properties';\nimport { CommandFormField } from './CommandFormField';\n\nconst CheckboxField = lazy(async () => ({ default: (await import('@cratis/components/CommandForm')).CheckboxField }));\n\n/**\n * The `Cratis.Components:checkboxField` component - `CheckboxField` from `@cratis/components/CommandForm`.\n *\n * `label` is the text beside the box and is distinct from `title`, which is the field's own label above\n * it - a checkbox usually wants only one of the two, and which one is a layout decision the screen makes.\n */\nexport function SceneCheckboxField({ element }: RegisteredComponentProps) {\n    return (\n        <CommandFormField element={element}>\n            {binding => (\n                <CheckboxField\n                    {...binding}\n                    label={stringProperty(element.properties, 'label')}\n                    className={stringProperty(element.properties, 'className')}\n                />\n            )}\n        </CommandFormField>\n    );\n}\n"],"names":["CheckboxField","lazy","default","SceneCheckboxField","element","_jsx","CommandFormField","binding","label","stringProperty","properties","className"],"mappings":";;;;;;;AAQA,MAAMA,aAAAA,iBAAgBC,UAAAA,CAAK,WAAa;AAAEC,QAAAA,OAAAA,EAAS,CAAC,MAAM,OAAO,gCAAA,CAAgC,EAAGF;KAAc,CAAA,CAAA;AAElH;;;;;AAKC,IACM,SAASG,kBAAAA,CAAmB,EAAEC,OAAO,EAA4B,EAAA;AACpE,IAAA,qBACIC,cAAA,CAACC,iCAAAA,EAAAA;QAAiBF,OAAAA,EAASA,OAAAA;AACtBG,QAAAA,QAAAA,EAAAA,CAAAA,wBACGF,cAAA,CAACL,aAAAA,EAAAA;AACI,gBAAA,GAAGO,OAAO;gBACXC,KAAAA,EAAOC,yBAAAA,CAAeL,OAAAA,CAAQM,UAAU,EAAE,OAAA,CAAA;gBAC1CC,SAAAA,EAAWF,yBAAAA,CAAeL,OAAAA,CAAQM,UAAU,EAAE,WAAA;;;AAKlE;;;;"}

package/dist/cjs/forms/fields/SceneChipsField.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var properties = require('../../properties.js');
+var CommandFormField = require('./CommandFormField.js');
+
+const ChipsField = /*#__PURE__*/ react.lazy(async ()=>({
+        default: (await import('@cratis/components/CommandForm')).ChipsField
+    }));
+/**
+ * The `Cratis.Components:chipsField` component - `ChipsField` from `@cratis/components/CommandForm`.
+ *
+ * A free-form list of strings - tags, labels, recipients - where the values are typed rather than picked.
+ * `multiSelectField` is the right choice whenever the values come from a known set; this one exists for
+ * when they do not.
+ */ function SceneChipsField({ element }) {
+    return /*#__PURE__*/ jsxRuntime.jsx(CommandFormField.CommandFormField, {
+        element: element,
+        children: (binding)=>/*#__PURE__*/ jsxRuntime.jsx(ChipsField, {
+                ...binding,
+                placeholder: properties.stringProperty(element.properties, 'placeholder'),
+                max: properties.numberProperty(element.properties, 'max'),
+                separator: properties.stringProperty(element.properties, 'separator'),
+                addOnBlur: properties.booleanProperty(element.properties, 'addOnBlur'),
+                allowDuplicate: properties.booleanProperty(element.properties, 'allowDuplicate'),
+                className: properties.stringProperty(element.properties, 'className')
+            })
+    });
+}
+
+exports.SceneChipsField = SceneChipsField;
+//# sourceMappingURL=SceneChipsField.js.map

package/dist/cjs/forms/fields/SceneChipsField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SceneChipsField.js","sources":["../../../../forms/fields/SceneChipsField.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 { lazy } from 'react';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, numberProperty, stringProperty } from '../../properties';\nimport { CommandFormField } from './CommandFormField';\n\nconst ChipsField = lazy(async () => ({ default: (await import('@cratis/components/CommandForm')).ChipsField }));\n\n/**\n * The `Cratis.Components:chipsField` component - `ChipsField` from `@cratis/components/CommandForm`.\n *\n * A free-form list of strings - tags, labels, recipients - where the values are typed rather than picked.\n * `multiSelectField` is the right choice whenever the values come from a known set; this one exists for\n * when they do not.\n */\nexport function SceneChipsField({ element }: RegisteredComponentProps) {\n    return (\n        <CommandFormField element={element}>\n            {binding => (\n                <ChipsField\n                    {...binding}\n                    placeholder={stringProperty(element.properties, 'placeholder')}\n                    max={numberProperty(element.properties, 'max')}\n                    separator={stringProperty(element.properties, 'separator')}\n                    addOnBlur={booleanProperty(element.properties, 'addOnBlur')}\n                    allowDuplicate={booleanProperty(element.properties, 'allowDuplicate')}\n                    className={stringProperty(element.properties, 'className')}\n                />\n            )}\n        </CommandFormField>\n    );\n}\n"],"names":["ChipsField","lazy","default","SceneChipsField","element","_jsx","CommandFormField","binding","placeholder","stringProperty","properties","max","numberProperty","separator","addOnBlur","booleanProperty","allowDuplicate","className"],"mappings":";;;;;;;AAQA,MAAMA,UAAAA,iBAAaC,UAAAA,CAAK,WAAa;AAAEC,QAAAA,OAAAA,EAAS,CAAC,MAAM,OAAO,gCAAA,CAAgC,EAAGF;KAAW,CAAA,CAAA;AAE5G;;;;;;AAMC,IACM,SAASG,eAAAA,CAAgB,EAAEC,OAAO,EAA4B,EAAA;AACjE,IAAA,qBACIC,cAAA,CAACC,iCAAAA,EAAAA;QAAiBF,OAAAA,EAASA,OAAAA;AACtBG,QAAAA,QAAAA,EAAAA,CAAAA,wBACGF,cAAA,CAACL,UAAAA,EAAAA;AACI,gBAAA,GAAGO,OAAO;gBACXC,WAAAA,EAAaC,yBAAAA,CAAeL,OAAAA,CAAQM,UAAU,EAAE,aAAA,CAAA;gBAChDC,GAAAA,EAAKC,yBAAAA,CAAeR,OAAAA,CAAQM,UAAU,EAAE,KAAA,CAAA;gBACxCG,SAAAA,EAAWJ,yBAAAA,CAAeL,OAAAA,CAAQM,UAAU,EAAE,WAAA,CAAA;gBAC9CI,SAAAA,EAAWC,0BAAAA,CAAgBX,OAAAA,CAAQM,UAAU,EAAE,WAAA,CAAA;gBAC/CM,cAAAA,EAAgBD,0BAAAA,CAAgBX,OAAAA,CAAQM,UAAU,EAAE,gBAAA,CAAA;gBACpDO,SAAAA,EAAWR,yBAAAA,CAAeL,OAAAA,CAAQM,UAAU,EAAE,WAAA;;;AAKlE;;;;"}

package/dist/cjs/forms/fields/SceneColorPickerField.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var properties = require('../../properties.js');
+var CommandFormField = require('./CommandFormField.js');
+
+const ColorPickerField = /*#__PURE__*/ react.lazy(async ()=>({
+        default: (await import('@cratis/components/CommandForm')).ColorPickerField
+    }));
+/**
+ * The `Cratis.Components:colorPickerField` component - `ColorPickerField` from
+ * `@cratis/components/CommandForm`.
+ *
+ * Binds a color to a string property. `inline` decides whether the picker is always open or opens from a
+ * swatch, which is a layout decision rather than a behavioral one.
+ */ function SceneColorPickerField({ element }) {
+    return /*#__PURE__*/ jsxRuntime.jsx(CommandFormField.CommandFormField, {
+        element: element,
+        children: (binding)=>/*#__PURE__*/ jsxRuntime.jsx(ColorPickerField, {
+                ...binding,
+                inline: properties.booleanProperty(element.properties, 'inline'),
+                defaultColor: properties.stringProperty(element.properties, 'defaultColor'),
+                className: properties.stringProperty(element.properties, 'className')
+            })
+    });
+}
+
+exports.SceneColorPickerField = SceneColorPickerField;
+//# sourceMappingURL=SceneColorPickerField.js.map

package/dist/cjs/forms/fields/SceneColorPickerField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SceneColorPickerField.js","sources":["../../../../forms/fields/SceneColorPickerField.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 { lazy } from 'react';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, stringProperty } from '../../properties';\nimport { CommandFormField } from './CommandFormField';\n\nconst ColorPickerField = lazy(async () => ({ default: (await import('@cratis/components/CommandForm')).ColorPickerField }));\n\n/**\n * The `Cratis.Components:colorPickerField` component - `ColorPickerField` from\n * `@cratis/components/CommandForm`.\n *\n * Binds a color to a string property. `inline` decides whether the picker is always open or opens from a\n * swatch, which is a layout decision rather than a behavioral one.\n */\nexport function SceneColorPickerField({ element }: RegisteredComponentProps) {\n    return (\n        <CommandFormField element={element}>\n            {binding => (\n                <ColorPickerField\n                    {...binding}\n                    inline={booleanProperty(element.properties, 'inline')}\n                    defaultColor={stringProperty(element.properties, 'defaultColor')}\n                    className={stringProperty(element.properties, 'className')}\n                />\n            )}\n        </CommandFormField>\n    );\n}\n"],"names":["ColorPickerField","lazy","default","SceneColorPickerField","element","_jsx","CommandFormField","binding","inline","booleanProperty","properties","defaultColor","stringProperty","className"],"mappings":";;;;;;;AAQA,MAAMA,gBAAAA,iBAAmBC,UAAAA,CAAK,WAAa;AAAEC,QAAAA,OAAAA,EAAS,CAAC,MAAM,OAAO,gCAAA,CAAgC,EAAGF;KAAiB,CAAA,CAAA;AAExH;;;;;;AAMC,IACM,SAASG,qBAAAA,CAAsB,EAAEC,OAAO,EAA4B,EAAA;AACvE,IAAA,qBACIC,cAAA,CAACC,iCAAAA,EAAAA;QAAiBF,OAAAA,EAASA,OAAAA;AACtBG,QAAAA,QAAAA,EAAAA,CAAAA,wBACGF,cAAA,CAACL,gBAAAA,EAAAA;AACI,gBAAA,GAAGO,OAAO;gBACXC,MAAAA,EAAQC,0BAAAA,CAAgBL,OAAAA,CAAQM,UAAU,EAAE,QAAA,CAAA;gBAC5CC,YAAAA,EAAcC,yBAAAA,CAAeR,OAAAA,CAAQM,UAAU,EAAE,cAAA,CAAA;gBACjDG,SAAAA,EAAWD,yBAAAA,CAAeR,OAAAA,CAAQM,UAAU,EAAE,WAAA;;;AAKlE;;;;"}

package/dist/cjs/forms/fields/SceneDropdownField.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var properties = require('../../properties.js');
+var CommandFormField = require('./CommandFormField.js');
+
+const DropdownField = /*#__PURE__*/ react.lazy(async ()=>({
+        default: (await import('@cratis/components/CommandForm')).DropdownField
+    }));
+/**
+ * The `Cratis.Components:dropdownField` component - `DropdownField` from `@cratis/components/CommandForm`.
+ *
+ * Single selection from a fixed list the screen carries inline. `optionLabel` and `optionValue` default
+ * to `label` and `value`, the shape an authored list takes when nobody says otherwise, so the common
+ * case needs only `options`.
+ *
+ * Options that have to come from the backend are a different component: bind the list to a query with
+ * `dataTable`, or register the lookup as its own query. A property bag is the wrong place for data.
+ */ function SceneDropdownField({ element }) {
+    return /*#__PURE__*/ jsxRuntime.jsx(CommandFormField.CommandFormField, {
+        element: element,
+        children: (binding)=>/*#__PURE__*/ jsxRuntime.jsx(DropdownField, {
+                ...binding,
+                options: properties.objectArrayProperty(element.properties, 'options') ?? [],
+                optionLabel: properties.stringProperty(element.properties, 'optionLabel') ?? 'label',
+                optionValue: properties.stringProperty(element.properties, 'optionValue') ?? 'value',
+                placeholder: properties.stringProperty(element.properties, 'placeholder'),
+                className: properties.stringProperty(element.properties, 'className')
+            })
+    });
+}
+
+exports.SceneDropdownField = SceneDropdownField;
+//# sourceMappingURL=SceneDropdownField.js.map

package/dist/cjs/forms/fields/SceneDropdownField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SceneDropdownField.js","sources":["../../../../forms/fields/SceneDropdownField.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 { lazy } from 'react';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { objectArrayProperty, stringProperty } from '../../properties';\nimport { CommandFormField } from './CommandFormField';\n\nconst DropdownField = lazy(async () => ({ default: (await import('@cratis/components/CommandForm')).DropdownField }));\n\n/**\n * The `Cratis.Components:dropdownField` component - `DropdownField` from `@cratis/components/CommandForm`.\n *\n * Single selection from a fixed list the screen carries inline. `optionLabel` and `optionValue` default\n * to `label` and `value`, the shape an authored list takes when nobody says otherwise, so the common\n * case needs only `options`.\n *\n * Options that have to come from the backend are a different component: bind the list to a query with\n * `dataTable`, or register the lookup as its own query. A property bag is the wrong place for data.\n */\nexport function SceneDropdownField({ element }: RegisteredComponentProps) {\n    return (\n        <CommandFormField element={element}>\n            {binding => (\n                <DropdownField\n                    {...binding}\n                    options={objectArrayProperty(element.properties, 'options') ?? []}\n                    optionLabel={stringProperty(element.properties, 'optionLabel') ?? 'label'}\n                    optionValue={stringProperty(element.properties, 'optionValue') ?? 'value'}\n                    placeholder={stringProperty(element.properties, 'placeholder')}\n                    className={stringProperty(element.properties, 'className')}\n                />\n            )}\n        </CommandFormField>\n    );\n}\n"],"names":["DropdownField","lazy","default","SceneDropdownField","element","_jsx","CommandFormField","binding","options","objectArrayProperty","properties","optionLabel","stringProperty","optionValue","placeholder","className"],"mappings":";;;;;;;AAQA,MAAMA,aAAAA,iBAAgBC,UAAAA,CAAK,WAAa;AAAEC,QAAAA,OAAAA,EAAS,CAAC,MAAM,OAAO,gCAAA,CAAgC,EAAGF;KAAc,CAAA,CAAA;AAElH;;;;;;;;;AASC,IACM,SAASG,kBAAAA,CAAmB,EAAEC,OAAO,EAA4B,EAAA;AACpE,IAAA,qBACIC,cAAA,CAACC,iCAAAA,EAAAA;QAAiBF,OAAAA,EAASA,OAAAA;AACtBG,QAAAA,QAAAA,EAAAA,CAAAA,wBACGF,cAAA,CAACL,aAAAA,EAAAA;AACI,gBAAA,GAAGO,OAAO;AACXC,gBAAAA,OAAAA,EAASC,8BAAAA,CAAoBL,OAAAA,CAAQM,UAAU,EAAE,cAAc,EAAE;AACjEC,gBAAAA,WAAAA,EAAaC,yBAAAA,CAAeR,OAAAA,CAAQM,UAAU,EAAE,aAAA,CAAA,IAAkB,OAAA;AAClEG,gBAAAA,WAAAA,EAAaD,yBAAAA,CAAeR,OAAAA,CAAQM,UAAU,EAAE,aAAA,CAAA,IAAkB,OAAA;gBAClEI,WAAAA,EAAaF,yBAAAA,CAAeR,OAAAA,CAAQM,UAAU,EAAE,aAAA,CAAA;gBAChDK,SAAAA,EAAWH,yBAAAA,CAAeR,OAAAA,CAAQM,UAAU,EAAE,WAAA;;;AAKlE;;;;"}

package/dist/cjs/forms/fields/SceneInputTextField.js

@@ -0,0 +1,45 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var properties = require('../../properties.js');
+var CommandFormField = require('./CommandFormField.js');
+
+const InputTextField = /*#__PURE__*/ react.lazy(async ()=>({
+        default: (await import('@cratis/components/CommandForm')).InputTextField
+    }));
+/**
+ * The HTML input types `InputTextField` supports, as a tuple so `unionProperty` narrows an authored
+ * string to exactly one of them and falls back to the component's own default for anything else.
+ */ const inputTypes = [
+    'text',
+    'email',
+    'password',
+    'color',
+    'date',
+    'datetime-local',
+    'time',
+    'url',
+    'tel',
+    'search'
+];
+/**
+ * The `Cratis.Components:inputTextField` component - `InputTextField` from `@cratis/components/CommandForm`.
+ *
+ * The single-line text field, and the one a screen reaches for most. `type` carries all the way through
+ * to the HTML input, so `email`, `password` and `url` fields are this component too rather than separate
+ * names - the browser's own keyboard and validation behavior is what differs, not the binding.
+ */ function SceneInputTextField({ element }) {
+    return /*#__PURE__*/ jsxRuntime.jsx(CommandFormField.CommandFormField, {
+        element: element,
+        children: (binding)=>/*#__PURE__*/ jsxRuntime.jsx(InputTextField, {
+                ...binding,
+                type: properties.unionProperty(element.properties, 'type', inputTypes),
+                placeholder: properties.stringProperty(element.properties, 'placeholder'),
+                className: properties.stringProperty(element.properties, 'className')
+            })
+    });
+}
+
+exports.SceneInputTextField = SceneInputTextField;
+//# sourceMappingURL=SceneInputTextField.js.map

package/dist/cjs/forms/fields/SceneInputTextField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SceneInputTextField.js","sources":["../../../../forms/fields/SceneInputTextField.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 { lazy } from 'react';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { stringProperty, unionProperty } from '../../properties';\nimport { CommandFormField } from './CommandFormField';\n\nconst InputTextField = lazy(async () => ({ default: (await import('@cratis/components/CommandForm')).InputTextField }));\n\n/**\n * The HTML input types `InputTextField` supports, as a tuple so `unionProperty` narrows an authored\n * string to exactly one of them and falls back to the component's own default for anything else.\n */\nconst inputTypes = ['text', 'email', 'password', 'color', 'date', 'datetime-local', 'time', 'url', 'tel', 'search'] as const;\n\n/**\n * The `Cratis.Components:inputTextField` component - `InputTextField` from `@cratis/components/CommandForm`.\n *\n * The single-line text field, and the one a screen reaches for most. `type` carries all the way through\n * to the HTML input, so `email`, `password` and `url` fields are this component too rather than separate\n * names - the browser's own keyboard and validation behavior is what differs, not the binding.\n */\nexport function SceneInputTextField({ element }: RegisteredComponentProps) {\n    return (\n        <CommandFormField element={element}>\n            {binding => (\n                <InputTextField\n                    {...binding}\n                    type={unionProperty(element.properties, 'type', inputTypes)}\n                    placeholder={stringProperty(element.properties, 'placeholder')}\n                    className={stringProperty(element.properties, 'className')}\n                />\n            )}\n        </CommandFormField>\n    );\n}\n"],"names":["InputTextField","lazy","default","inputTypes","SceneInputTextField","element","_jsx","CommandFormField","binding","type","unionProperty","properties","placeholder","stringProperty","className"],"mappings":";;;;;;;AAQA,MAAMA,cAAAA,iBAAiBC,UAAAA,CAAK,WAAa;AAAEC,QAAAA,OAAAA,EAAS,CAAC,MAAM,OAAO,gCAAA,CAAgC,EAAGF;KAAe,CAAA,CAAA;AAEpH;;;AAGC,IACD,MAAMG,UAAAA,GAAa;AAAC,IAAA,MAAA;AAAQ,IAAA,OAAA;AAAS,IAAA,UAAA;AAAY,IAAA,OAAA;AAAS,IAAA,MAAA;AAAQ,IAAA,gBAAA;AAAkB,IAAA,MAAA;AAAQ,IAAA,KAAA;AAAO,IAAA,KAAA;AAAO,IAAA;AAAS,CAAA;AAEnH;;;;;;AAMC,IACM,SAASC,mBAAAA,CAAoB,EAAEC,OAAO,EAA4B,EAAA;AACrE,IAAA,qBACIC,cAAA,CAACC,iCAAAA,EAAAA;QAAiBF,OAAAA,EAASA,OAAAA;AACtBG,QAAAA,QAAAA,EAAAA,CAAAA,wBACGF,cAAA,CAACN,cAAAA,EAAAA;AACI,gBAAA,GAAGQ,OAAO;AACXC,gBAAAA,IAAAA,EAAMC,wBAAAA,CAAcL,OAAAA,CAAQM,UAAU,EAAE,MAAA,EAAQR,UAAAA,CAAAA;gBAChDS,WAAAA,EAAaC,yBAAAA,CAAeR,OAAAA,CAAQM,UAAU,EAAE,aAAA,CAAA;gBAChDG,SAAAA,EAAWD,yBAAAA,CAAeR,OAAAA,CAAQM,UAAU,EAAE,WAAA;;;AAKlE;;;;"}

package/dist/cjs/forms/fields/SceneMultiSelectField.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var properties = require('../../properties.js');
+var CommandFormField = require('./CommandFormField.js');
+
+const MultiSelectField = /*#__PURE__*/ react.lazy(async ()=>({
+        default: (await import('@cratis/components/CommandForm')).MultiSelectField
+    }));
+/** How the current selection is summarized in the closed control. */ const displayModes = [
+    'comma',
+    'chip'
+];
+/**
+ * The `Cratis.Components:multiSelectField` component - `MultiSelectField` from
+ * `@cratis/components/CommandForm`.
+ *
+ * The many-valued counterpart to `dropdownField`, binding to a collection property on the command rather
+ * than a scalar one.
+ */ function SceneMultiSelectField({ element }) {
+    return /*#__PURE__*/ jsxRuntime.jsx(CommandFormField.CommandFormField, {
+        element: element,
+        children: (binding)=>/*#__PURE__*/ jsxRuntime.jsx(MultiSelectField, {
+                ...binding,
+                options: properties.objectArrayProperty(element.properties, 'options') ?? [],
+                optionLabel: properties.stringProperty(element.properties, 'optionLabel') ?? 'label',
+                optionValue: properties.stringProperty(element.properties, 'optionValue') ?? 'value',
+                placeholder: properties.stringProperty(element.properties, 'placeholder'),
+                display: properties.unionProperty(element.properties, 'display', displayModes),
+                maxSelectedLabels: properties.numberProperty(element.properties, 'maxSelectedLabels'),
+                filter: properties.booleanProperty(element.properties, 'filter'),
+                showClear: properties.booleanProperty(element.properties, 'showClear'),
+                className: properties.stringProperty(element.properties, 'className')
+            })
+    });
+}
+
+exports.SceneMultiSelectField = SceneMultiSelectField;
+//# sourceMappingURL=SceneMultiSelectField.js.map

package/dist/cjs/forms/fields/SceneMultiSelectField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SceneMultiSelectField.js","sources":["../../../../forms/fields/SceneMultiSelectField.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 { lazy } from 'react';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, numberProperty, objectArrayProperty, stringProperty, unionProperty } from '../../properties';\nimport { CommandFormField } from './CommandFormField';\n\nconst MultiSelectField = lazy(async () => ({ default: (await import('@cratis/components/CommandForm')).MultiSelectField }));\n\n/** How the current selection is summarized in the closed control. */\nconst displayModes = ['comma', 'chip'] as const;\n\n/**\n * The `Cratis.Components:multiSelectField` component - `MultiSelectField` from\n * `@cratis/components/CommandForm`.\n *\n * The many-valued counterpart to `dropdownField`, binding to a collection property on the command rather\n * than a scalar one.\n */\nexport function SceneMultiSelectField({ element }: RegisteredComponentProps) {\n    return (\n        <CommandFormField element={element}>\n            {binding => (\n                <MultiSelectField\n                    {...binding}\n                    options={objectArrayProperty(element.properties, 'options') ?? []}\n                    optionLabel={stringProperty(element.properties, 'optionLabel') ?? 'label'}\n                    optionValue={stringProperty(element.properties, 'optionValue') ?? 'value'}\n                    placeholder={stringProperty(element.properties, 'placeholder')}\n                    display={unionProperty(element.properties, 'display', displayModes)}\n                    maxSelectedLabels={numberProperty(element.properties, 'maxSelectedLabels')}\n                    filter={booleanProperty(element.properties, 'filter')}\n                    showClear={booleanProperty(element.properties, 'showClear')}\n                    className={stringProperty(element.properties, 'className')}\n                />\n            )}\n        </CommandFormField>\n    );\n}\n"],"names":["MultiSelectField","lazy","default","displayModes","SceneMultiSelectField","element","_jsx","CommandFormField","binding","options","objectArrayProperty","properties","optionLabel","stringProperty","optionValue","placeholder","display","unionProperty","maxSelectedLabels","numberProperty","filter","booleanProperty","showClear","className"],"mappings":";;;;;;;AAQA,MAAMA,gBAAAA,iBAAmBC,UAAAA,CAAK,WAAa;AAAEC,QAAAA,OAAAA,EAAS,CAAC,MAAM,OAAO,gCAAA,CAAgC,EAAGF;KAAiB,CAAA,CAAA;AAExH,sEACA,MAAMG,YAAAA,GAAe;AAAC,IAAA,OAAA;AAAS,IAAA;AAAO,CAAA;AAEtC;;;;;;AAMC,IACM,SAASC,qBAAAA,CAAsB,EAAEC,OAAO,EAA4B,EAAA;AACvE,IAAA,qBACIC,cAAA,CAACC,iCAAAA,EAAAA;QAAiBF,OAAAA,EAASA,OAAAA;AACtBG,QAAAA,QAAAA,EAAAA,CAAAA,wBACGF,cAAA,CAACN,gBAAAA,EAAAA;AACI,gBAAA,GAAGQ,OAAO;AACXC,gBAAAA,OAAAA,EAASC,8BAAAA,CAAoBL,OAAAA,CAAQM,UAAU,EAAE,cAAc,EAAE;AACjEC,gBAAAA,WAAAA,EAAaC,yBAAAA,CAAeR,OAAAA,CAAQM,UAAU,EAAE,aAAA,CAAA,IAAkB,OAAA;AAClEG,gBAAAA,WAAAA,EAAaD,yBAAAA,CAAeR,OAAAA,CAAQM,UAAU,EAAE,aAAA,CAAA,IAAkB,OAAA;gBAClEI,WAAAA,EAAaF,yBAAAA,CAAeR,OAAAA,CAAQM,UAAU,EAAE,aAAA,CAAA;AAChDK,gBAAAA,OAAAA,EAASC,wBAAAA,CAAcZ,OAAAA,CAAQM,UAAU,EAAE,SAAA,EAAWR,YAAAA,CAAAA;gBACtDe,iBAAAA,EAAmBC,yBAAAA,CAAed,OAAAA,CAAQM,UAAU,EAAE,mBAAA,CAAA;gBACtDS,MAAAA,EAAQC,0BAAAA,CAAgBhB,OAAAA,CAAQM,UAAU,EAAE,QAAA,CAAA;gBAC5CW,SAAAA,EAAWD,0BAAAA,CAAgBhB,OAAAA,CAAQM,UAAU,EAAE,WAAA,CAAA;gBAC/CY,SAAAA,EAAWV,yBAAAA,CAAeR,OAAAA,CAAQM,UAAU,EAAE,WAAA;;;AAKlE;;;;"}

package/dist/cjs/forms/fields/SceneNumberField.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var properties = require('../../properties.js');
+var CommandFormField = require('./CommandFormField.js');
+
+const NumberField = /*#__PURE__*/ react.lazy(async ()=>({
+        default: (await import('@cratis/components/CommandForm')).NumberField
+    }));
+/**
+ * The `Cratis.Components:numberField` component - `NumberField` from `@cratis/components/CommandForm`.
+ *
+ * PrimeReact's `InputNumber` behind the command binding, so the bound property stays a number rather
+ * than the string an `<input type="number">` would hand back. `min`, `max` and `step` are client-side
+ * affordances only - the authoritative check is still the backend's validation on the command.
+ */ function SceneNumberField({ element }) {
+    return /*#__PURE__*/ jsxRuntime.jsx(CommandFormField.CommandFormField, {
+        element: element,
+        children: (binding)=>/*#__PURE__*/ jsxRuntime.jsx(NumberField, {
+                ...binding,
+                placeholder: properties.stringProperty(element.properties, 'placeholder'),
+                min: properties.numberProperty(element.properties, 'min'),
+                max: properties.numberProperty(element.properties, 'max'),
+                step: properties.numberProperty(element.properties, 'step'),
+                className: properties.stringProperty(element.properties, 'className')
+            })
+    });
+}
+
+exports.SceneNumberField = SceneNumberField;
+//# sourceMappingURL=SceneNumberField.js.map

package/dist/cjs/forms/fields/SceneNumberField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SceneNumberField.js","sources":["../../../../forms/fields/SceneNumberField.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 { lazy } from 'react';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { numberProperty, stringProperty } from '../../properties';\nimport { CommandFormField } from './CommandFormField';\n\nconst NumberField = lazy(async () => ({ default: (await import('@cratis/components/CommandForm')).NumberField }));\n\n/**\n * The `Cratis.Components:numberField` component - `NumberField` from `@cratis/components/CommandForm`.\n *\n * PrimeReact's `InputNumber` behind the command binding, so the bound property stays a number rather\n * than the string an `<input type=\"number\">` would hand back. `min`, `max` and `step` are client-side\n * affordances only - the authoritative check is still the backend's validation on the command.\n */\nexport function SceneNumberField({ element }: RegisteredComponentProps) {\n    return (\n        <CommandFormField element={element}>\n            {binding => (\n                <NumberField\n                    {...binding}\n                    placeholder={stringProperty(element.properties, 'placeholder')}\n                    min={numberProperty(element.properties, 'min')}\n                    max={numberProperty(element.properties, 'max')}\n                    step={numberProperty(element.properties, 'step')}\n                    className={stringProperty(element.properties, 'className')}\n                />\n            )}\n        </CommandFormField>\n    );\n}\n"],"names":["NumberField","lazy","default","SceneNumberField","element","_jsx","CommandFormField","binding","placeholder","stringProperty","properties","min","numberProperty","max","step","className"],"mappings":";;;;;;;AAQA,MAAMA,WAAAA,iBAAcC,UAAAA,CAAK,WAAa;AAAEC,QAAAA,OAAAA,EAAS,CAAC,MAAM,OAAO,gCAAA,CAAgC,EAAGF;KAAY,CAAA,CAAA;AAE9G;;;;;;AAMC,IACM,SAASG,gBAAAA,CAAiB,EAAEC,OAAO,EAA4B,EAAA;AAClE,IAAA,qBACIC,cAAA,CAACC,iCAAAA,EAAAA;QAAiBF,OAAAA,EAASA,OAAAA;AACtBG,QAAAA,QAAAA,EAAAA,CAAAA,wBACGF,cAAA,CAACL,WAAAA,EAAAA;AACI,gBAAA,GAAGO,OAAO;gBACXC,WAAAA,EAAaC,yBAAAA,CAAeL,OAAAA,CAAQM,UAAU,EAAE,aAAA,CAAA;gBAChDC,GAAAA,EAAKC,yBAAAA,CAAeR,OAAAA,CAAQM,UAAU,EAAE,KAAA,CAAA;gBACxCG,GAAAA,EAAKD,yBAAAA,CAAeR,OAAAA,CAAQM,UAAU,EAAE,KAAA,CAAA;gBACxCI,IAAAA,EAAMF,yBAAAA,CAAeR,OAAAA,CAAQM,UAAU,EAAE,MAAA,CAAA;gBACzCK,SAAAA,EAAWN,yBAAAA,CAAeL,OAAAA,CAAQM,UAAU,EAAE,WAAA;;;AAKlE;;;;"}

package/dist/cjs/forms/fields/SceneRadioButtonField.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var properties = require('../../properties.js');
+var CommandFormField = require('./CommandFormField.js');
+
+const RadioButtonField = /*#__PURE__*/ react.lazy(async ()=>({
+        default: (await import('@cratis/components/CommandForm')).RadioButtonField
+    }));
+/**
+ * The `Cratis.Components:radioButtonField` component - `RadioButtonField` from
+ * `@cratis/components/CommandForm`.
+ *
+ * One button of a mutually exclusive set, for a screen that needs the choices placed individually rather
+ * than as a block. `buttonValue` is the value this particular button writes to the bound property, and
+ * the whole set is tied together by every button naming the same `property`.
+ *
+ * `buttonValue` is read as a string first and a number second, since a choice is usually a string but a
+ * numeric code is common enough that forcing it through as `'1'` would bind the wrong value.
+ */ function SceneRadioButtonField({ element }) {
+    const buttonValue = properties.stringProperty(element.properties, 'buttonValue') ?? properties.numberProperty(element.properties, 'buttonValue') ?? '';
+    return /*#__PURE__*/ jsxRuntime.jsx(CommandFormField.CommandFormField, {
+        element: element,
+        children: (binding)=>/*#__PURE__*/ jsxRuntime.jsx(RadioButtonField, {
+                ...binding,
+                buttonValue: buttonValue,
+                label: properties.stringProperty(element.properties, 'label'),
+                className: properties.stringProperty(element.properties, 'className')
+            })
+    });
+}
+
+exports.SceneRadioButtonField = SceneRadioButtonField;
+//# sourceMappingURL=SceneRadioButtonField.js.map