@cratis/scene.components 4.14.0 → 4.16.0

package/dist/cjs/cratisComponentsPackageManifest.js

@@ -0,0 +1,126 @@
+'use strict';
+
+var scene_model = require('@cratis/scene.model');
+var cratisComponents = require('./cratisComponents.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * 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 `--cratis-*` token layer (`@cratis/components/tokens`) plus the component stylesheets and
+ * compiled Tailwind utilities in `@cratis/components/styles`. 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. `>=11.0.0` for PrimeReact: version 3.0.0
+ * declares `primereact@^11` as a peer dependency and is built against version 11's component set, so the
+ * span across the major boundary that the previous `>=10.9.0` range described is over. The `--cratis-*`
+ * tokens still resolve a version 10 theme variable as their last fallback, but that is an upgrade-window
+ * courtesy for an application with a compiled version 10 stylesheet still on the page - not a version of
+ * PrimeReact this package can be activated against. `^4.0.0` for Tailwind, because the utility sheet is
+ * compiled against Tailwind 4.
+ */ const cratisComponentsPackageManifest = {
+    name: cratisComponents.cratisComponentsPackageName,
+    version: '3.0.0',
+    kind: scene_model.PackageKind.ComponentLibrary,
+    dependencies: [
+        {
+            name: 'PrimeReact',
+            versionRange: '>=11.0.0'
+        },
+        {
+            name: 'Tailwind',
+            versionRange: '^4.0.0'
+        }
+    ],
+    components: [
+        'page',
+        'dataPage',
+        'formElement',
+        'singleResult',
+        'queryInputForm',
+        '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 is in front of it - the `--p-*` properties a
+    // PrimeReact 11 preset emits at runtime, or a Scene theme through this package's token bridge.
+    // 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. dataTable and table accept optional object-valued queryArguments for collection queries. singleResult displays one read-only scalar own resultField of an optional model using an explicit query, object queryArguments and enabled: true. queryInputForm commits explicit string inputs on submit to the same optional-single runtime; drafts never execute a query.",
+    module: '@cratis/scene.components',
+    license: 'MIT',
+    licenseUrl: 'https://github.com/Cratis/Scene/blob/main/LICENSE',
+    designTime: {
+        previews: [],
+        designers: [
+            'commandFormDesigner'
+        ],
+        // `commandFields` and `fieldWidths` are host editor kinds (Studio implements them); the package does not ship them.
+        propertyEditors: [
+            'commandBinding',
+            'commandFormLayout'
+        ],
+        propertyDisplays: [],
+        actions: [
+            'Cratis.Components.commandForm.generateFields'
+        ]
+    },
+    assets: [
+        '@cratis/components/styles',
+        '@cratis/components/tokens'
+    ],
+    runtimeSingletons: [
+        'react',
+        '@cratis/arc',
+        '@cratis/components'
+    ]
+};
+
+exports.cratisComponentsPackageManifest = cratisComponentsPackageManifest;
+//# sourceMappingURL=cratisComponentsPackageManifest.js.map

package/dist/cjs/cratisComponentsPackageManifest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cratisComponentsPackageManifest.js","sources":["../../cratisComponentsPackageManifest.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 { PackageKind, ScenePackage } from '@cratis/scene.model';\nimport { cratisComponentsPackageName } from './cratisComponents';\n\n/**\n * The `Cratis.Components` package's declaration - what a profile gets when it lists this package.\n *\n * This is the concrete case the whole package-dependency mechanism exists for. `@cratis/components` is\n * not a self-contained library: every component in it is a wrapper over a PrimeReact widget, and its own\n * styling is a `--cratis-*` token layer (`@cratis/components/tokens`) plus the component stylesheets and\n * compiled Tailwind utilities in `@cratis/components/styles`. Activate it in a profile without PrimeReact\n * and nothing renders; activate it without Tailwind and everything renders unstyled. Both are stated as\n * dependencies so a package picker can say so while the profile is being configured, instead of leaving\n * it to be discovered when the page opens.\n *\n * The version ranges are the real ones the library carries. `>=11.0.0` for PrimeReact: version 3.0.0\n * declares `primereact@^11` as a peer dependency and is built against version 11's component set, so the\n * span across the major boundary that the previous `>=10.9.0` range described is over. The `--cratis-*`\n * tokens still resolve a version 10 theme variable as their last fallback, but that is an upgrade-window\n * courtesy for an application with a compiled version 10 stylesheet still on the page - not a version of\n * PrimeReact this package can be activated against. `^4.0.0` for Tailwind, because the utility sheet is\n * compiled against Tailwind 4.\n */\nexport const cratisComponentsPackageManifest: ScenePackage = {\n    name: cratisComponentsPackageName,\n    version: '3.0.0',\n    kind: PackageKind.ComponentLibrary,\n    dependencies: [\n        { name: 'PrimeReact', versionRange: '>=11.0.0' },\n        { name: 'Tailwind', versionRange: '^4.0.0' },\n    ],\n    components: [\n        'page',\n        'dataPage',\n        'formElement',\n        'singleResult',\n        'queryInputForm',\n        'dataTable',\n        'table',\n        'observableDataTable',\n        'commandForm',\n        'inputTextField',\n        'numberField',\n        'checkboxField',\n        'textAreaField',\n        'dropdownField',\n        'sliderField',\n        'calendarField',\n        'colorPickerField',\n        'multiSelectField',\n        'chipsField',\n        'radioButtonField',\n        'radioGroupField',\n        'dialog',\n        'confirmationDialog',\n        'busyIndicatorDialog',\n        'commandDialog',\n        'stepperCommandDialog',\n        'icon',\n        'tooltip',\n        'dropdown',\n        'errorBoundary',\n        'objectContentEditor',\n        'objectNavigationalBar',\n        'schemaEditor',\n        'timeMachine',\n        'filterPanel',\n        'toolbar',\n        'toolbarButton',\n        'toolbarGroup',\n        'toolbarSeparator',\n    ],\n\n    // A component library ships components, and nothing else. Layouts, screen templates and dialog\n    // templates all belong to a Blueprint: they are decisions about what an application looks like as a\n    // whole, and this package deliberately makes none of them - it provides the Arc-bound composites a\n    // template is *built from*, so that a blueprint can place a `dataPage` in a slot and configure it,\n    // rather than shipping one opinionated data page nobody can rearrange.\n    layouts: [],\n    screenTemplates: [],\n    dialogTemplates: [],\n\n    // No themes either, for a different reason: `@cratis/components` has no palette of its own. It reads\n    // a `--cratis-*` variable layer that resolves whatever is in front of it - the `--p-*` properties a\n    // PrimeReact 11 preset emits at runtime, or a Scene theme through this package's token bridge.\n    // Shipping a theme here would be this library asserting a look it was specifically built not to have.\n    themes: [],\n\n    displayName: 'Cratis Components',\n    description: \"Cratis' Arc-bound data, form and dialog composites, built on PrimeReact and Tailwind. dataTable and table accept optional object-valued queryArguments for collection queries. singleResult displays one read-only scalar own resultField of an optional model using an explicit query, object queryArguments and enabled: true. queryInputForm commits explicit string inputs on submit to the same optional-single runtime; drafts never execute a query.\",\n    module: '@cratis/scene.components',\n    license: 'MIT',\n    licenseUrl: 'https://github.com/Cratis/Scene/blob/main/LICENSE',\n    designTime: {\n        previews: [],\n        designers: ['commandFormDesigner'],\n        // `commandFields` and `fieldWidths` are host editor kinds (Studio implements them); the package does not ship them.\n        propertyEditors: ['commandBinding', 'commandFormLayout'],\n        propertyDisplays: [],\n        actions: ['Cratis.Components.commandForm.generateFields'],\n    },\n    assets: ['@cratis/components/styles', '@cratis/components/tokens'],\n    runtimeSingletons: ['react', '@cratis/arc', '@cratis/components'],\n};\n"],"names":["cratisComponentsPackageManifest","name","cratisComponentsPackageName","version","kind","PackageKind","ComponentLibrary","dependencies","versionRange","components","layouts","screenTemplates","dialogTemplates","themes","displayName","description","module","license","licenseUrl","designTime","previews","designers","propertyEditors","propertyDisplays","actions","assets","runtimeSingletons"],"mappings":";;;;;AAAA;AACA;AAKA;;;;;;;;;;;;;;;;;;UAmBaA,+BAAAA,GAAgD;IACzDC,IAAAA,EAAMC,4CAAAA;IACNC,OAAAA,EAAS,OAAA;AACTC,IAAAA,IAAAA,EAAMC,wBAAYC,gBAAgB;IAClCC,YAAAA,EAAc;AACV,QAAA;YAAEN,IAAAA,EAAM,YAAA;YAAcO,YAAAA,EAAc;AAAW,SAAA;AAC/C,QAAA;YAAEP,IAAAA,EAAM,UAAA;YAAYO,YAAAA,EAAc;AAAS;AAC9C,KAAA;IACDC,UAAAA,EAAY;AACR,QAAA,MAAA;AACA,QAAA,UAAA;AACA,QAAA,aAAA;AACA,QAAA,cAAA;AACA,QAAA,gBAAA;AACA,QAAA,WAAA;AACA,QAAA,OAAA;AACA,QAAA,qBAAA;AACA,QAAA,aAAA;AACA,QAAA,gBAAA;AACA,QAAA,aAAA;AACA,QAAA,eAAA;AACA,QAAA,eAAA;AACA,QAAA,eAAA;AACA,QAAA,aAAA;AACA,QAAA,eAAA;AACA,QAAA,kBAAA;AACA,QAAA,kBAAA;AACA,QAAA,YAAA;AACA,QAAA,kBAAA;AACA,QAAA,iBAAA;AACA,QAAA,QAAA;AACA,QAAA,oBAAA;AACA,QAAA,qBAAA;AACA,QAAA,eAAA;AACA,QAAA,sBAAA;AACA,QAAA,MAAA;AACA,QAAA,SAAA;AACA,QAAA,UAAA;AACA,QAAA,eAAA;AACA,QAAA,qBAAA;AACA,QAAA,uBAAA;AACA,QAAA,cAAA;AACA,QAAA,aAAA;AACA,QAAA,aAAA;AACA,QAAA,SAAA;AACA,QAAA,eAAA;AACA,QAAA,cAAA;AACA,QAAA;AACH,KAAA;;;;;;AAODC,IAAAA,OAAAA,EAAS,EAAE;AACXC,IAAAA,eAAAA,EAAiB,EAAE;AACnBC,IAAAA,eAAAA,EAAiB,EAAE;;;;;AAMnBC,IAAAA,MAAAA,EAAQ,EAAE;IAEVC,WAAAA,EAAa,mBAAA;IACbC,WAAAA,EAAa,6bAAA;IACbC,MAAAA,EAAQ,0BAAA;IACRC,OAAAA,EAAS,KAAA;IACTC,UAAAA,EAAY,mDAAA;IACZC,UAAAA,EAAY;AACRC,QAAAA,QAAAA,EAAU,EAAE;QACZC,SAAAA,EAAW;AAAC,YAAA;AAAsB,SAAA;;QAElCC,eAAAA,EAAiB;AAAC,YAAA,gBAAA;AAAkB,YAAA;AAAoB,SAAA;AACxDC,QAAAA,gBAAAA,EAAkB,EAAE;QACpBC,OAAAA,EAAS;AAAC,YAAA;AAA+C;AAC7D,KAAA;IACAC,MAAAA,EAAQ;AAAC,QAAA,2BAAA;AAA6B,QAAA;AAA4B,KAAA;IAClEC,iBAAAA,EAAmB;AAAC,QAAA,OAAA;AAAS,QAAA,aAAA;AAAe,QAAA;AAAqB;AACrE;;"}

package/dist/cjs/cratisComponentsRuntimePackage.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var cratisComponents = require('./cratisComponents.js');
+var cratisComponentsDescriptors = require('./cratisComponentsDescriptors.js');
+var cratisComponentsPackageManifest = require('./cratisComponentsPackageManifest.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The `Cratis.Components` package without design-time contributions: the manifest, the components and their
+ * descriptors. The manifest still names the design-time extensions - that is data a host reads without
+ * loading them - but no designer, editor or action module is reachable from this bundle, which is what a
+ * runtime host imports from `@cratis/scene.components/runtime`.
+ *
+ * No `layouts`, `screenTemplates`, `dialogTemplates` or `themes` are provided, matching a manifest that
+ * declares none of them; `validatePackageBundle` is what proves the two halves agree.
+ */ const cratisComponentsRuntimePackage = {
+    manifest: cratisComponentsPackageManifest.cratisComponentsPackageManifest,
+    components: cratisComponents.cratisComponents,
+    descriptors: cratisComponentsDescriptors.cratisComponentsDescriptors
+};
+
+exports.cratisComponentsRuntimePackage = cratisComponentsRuntimePackage;
+//# sourceMappingURL=cratisComponentsRuntimePackage.js.map

package/dist/cjs/cratisComponentsRuntimePackage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cratisComponentsRuntimePackage.js","sources":["../../cratisComponentsRuntimePackage.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 { ScenePackageBundle } from '@cratis/scene.react';\nimport { cratisComponents } from './cratisComponents';\nimport { cratisComponentsDescriptors } from './cratisComponentsDescriptors';\nimport { cratisComponentsPackageManifest } from './cratisComponentsPackageManifest';\n\n/**\n * The `Cratis.Components` package without design-time contributions: the manifest, the components and their\n * descriptors. The manifest still names the design-time extensions - that is data a host reads without\n * loading them - but no designer, editor or action module is reachable from this bundle, which is what a\n * runtime host imports from `@cratis/scene.components/runtime`.\n *\n * No `layouts`, `screenTemplates`, `dialogTemplates` or `themes` are provided, matching a manifest that\n * declares none of them; `validatePackageBundle` is what proves the two halves agree.\n */\nexport const cratisComponentsRuntimePackage: ScenePackageBundle = {\n    manifest: cratisComponentsPackageManifest,\n    components: cratisComponents,\n    descriptors: cratisComponentsDescriptors,\n};\n"],"names":["cratisComponentsRuntimePackage","manifest","cratisComponentsPackageManifest","components","cratisComponents","descriptors","cratisComponentsDescriptors"],"mappings":";;;;;;AAAA;AACA;AAOA;;;;;;;;UASaA,8BAAAA,GAAqD;IAC9DC,QAAAA,EAAUC,+DAAAA;IACVC,UAAAA,EAAYC,iCAAAA;IACZC,WAAAA,EAAaC;AACjB;;"}

package/dist/cjs/designTime/cratisComponentsDesignTime.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var CommandFieldPropertyEditor = require('../forms/CommandFieldPropertyEditor.js');
+var CommandFormDesigner = require('../forms/CommandFormDesigner.js');
+var CommandFormLayoutEditor = require('../forms/CommandFormLayoutEditor.js');
+var generateCommandFieldsAction = require('../forms/generateCommandFieldsAction.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/** Every design-time contribution of `Cratis.Components`, under the names its manifest declares. */ const cratisComponentsDesignTime = {
+    designers: {
+        commandFormDesigner: CommandFormDesigner.CommandFormDesigner
+    },
+    propertyEditors: {
+        commandBinding: CommandFieldPropertyEditor.CommandFieldPropertyEditor,
+        commandFormLayout: CommandFormLayoutEditor.CommandFormLayoutEditor
+    },
+    actions: {
+        [generateCommandFieldsAction.generateCommandFieldsAction.descriptor.id]: generateCommandFieldsAction.generateCommandFieldsAction
+    }
+};
+
+exports.cratisComponentsDesignTime = cratisComponentsDesignTime;
+//# sourceMappingURL=cratisComponentsDesignTime.js.map

package/dist/cjs/designTime/cratisComponentsDesignTime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cratisComponentsDesignTime.js","sources":["../../../designTime/cratisComponentsDesignTime.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 { DesignTimeBundle } from '@cratis/scene.react';\nimport { CommandFieldPropertyEditor } from '../forms/CommandFieldPropertyEditor';\nimport { CommandFormDesigner } from '../forms/CommandFormDesigner';\nimport { CommandFormLayoutEditor } from '../forms/CommandFormLayoutEditor';\nimport { generateCommandFieldsAction } from '../forms/generateCommandFieldsAction';\n\n/** Every design-time contribution of `Cratis.Components`, under the names its manifest declares. */\nexport const cratisComponentsDesignTime: DesignTimeBundle = {\n    designers: {\n        commandFormDesigner: CommandFormDesigner,\n    },\n    propertyEditors: {\n        commandBinding: CommandFieldPropertyEditor,\n        commandFormLayout: CommandFormLayoutEditor,\n    },\n    actions: {\n        [generateCommandFieldsAction.descriptor.id]: generateCommandFieldsAction,\n    },\n};\n"],"names":["cratisComponentsDesignTime","designers","commandFormDesigner","CommandFormDesigner","propertyEditors","commandBinding","CommandFieldPropertyEditor","commandFormLayout","CommandFormLayoutEditor","actions","generateCommandFieldsAction","descriptor","id"],"mappings":";;;;;;;AAAA;AACA;AAQA,qGACO,MAAMA,0BAAAA,GAA+C;IACxDC,SAAAA,EAAW;QACPC,mBAAAA,EAAqBC;AACzB,KAAA;IACAC,eAAAA,EAAiB;QACbC,cAAAA,EAAgBC,qDAAAA;QAChBC,iBAAAA,EAAmBC;AACvB,KAAA;IACAC,OAAAA,EAAS;AACL,QAAA,CAACC,uDAAAA,CAA4BC,UAAU,CAACC,EAAE,GAAGF;AACjD;AACJ;;"}

package/dist/cjs/forms/CommandFormLayoutEditor.js

@@ -0,0 +1,73 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var scene_model = require('@cratis/scene.model');
+var scene_engine = require('@cratis/scene.engine');
+var commandFormLayout = require('./commandFormLayout.js');
+
+const layoutKeys = new Set(Object.values(scene_engine.CommandFormLayoutKey));
+/**
+ * Arranges a command form's fields from the keyboard. Each placed field is a focusable cell: the arrow keys
+ * move it one cell, and Shift with an arrow key resizes it. A valid change is submitted as one canonical
+ * edit of the `layout` property; an invalid one is announced and the committed layout is kept.
+ */ function CommandFormLayoutEditor({ context, property, value, setValue }) {
+    const layout = commandFormLayout.commandFormLayout({
+        layout: value
+    });
+    const [problem, setProblem] = react.useState();
+    if (!layout) return /*#__PURE__*/ jsxRuntime.jsxs("p", {
+        role: "note",
+        children: [
+            property.label,
+            ": no layout is authored yet."
+        ]
+    });
+    const onKeyDown = (field)=>(event)=>{
+            if (!layoutKeys.has(event.key)) return;
+            event.preventDefault();
+            const draft = scene_engine.applyCommandFormLayoutKey(layout, field, event.key, event.shiftKey, layout.placements.map((placement)=>placement.field));
+            if (!draft) return;
+            if (!draft.isValid) {
+                setProblem(draft.diagnostics[0].message);
+                return;
+            }
+            setProblem(undefined);
+            commit(draft.draft);
+        };
+    const commit = (next)=>{
+        setValue(next);
+        context.submitEdits([
+            {
+                kind: scene_model.SceneEditKind.SetProperty,
+                nodeId: context.element.id,
+                path: property.path,
+                value: next
+            }
+        ]);
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        role: "group",
+        "aria-label": property.label,
+        "aria-describedby": `${context.element.id}-layout-help`,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx("p", {
+                id: `${context.element.id}-layout-help`,
+                children: "Arrow keys move a field. Shift and an arrow key resize it."
+            }),
+            layout.placements.map((placement)=>/*#__PURE__*/ jsxRuntime.jsx("button", {
+                    type: "button",
+                    onKeyDown: onKeyDown(placement.field),
+                    "aria-label": `${placement.field}: row ${placement.row}, column ${placement.column}, spans ${placement.columnSpan ?? 1} column(s) and ${placement.rowSpan ?? 1} row(s)`,
+                    children: placement.field
+                }, placement.field)),
+            problem && /*#__PURE__*/ jsxRuntime.jsx("p", {
+                role: "alert",
+                children: problem
+            })
+        ]
+    });
+}
+
+exports.CommandFormLayoutEditor = CommandFormLayoutEditor;
+//# sourceMappingURL=CommandFormLayoutEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CommandFormLayoutEditor.js","sources":["../../../forms/CommandFormLayoutEditor.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 { KeyboardEvent, useState } from 'react';\nimport { CommandFormLayout, SceneEditKind } from '@cratis/scene.model';\nimport { CommandFormLayoutKey, applyCommandFormLayoutKey } from '@cratis/scene.engine';\nimport { DesignTimePropertyEditorProps } from '@cratis/scene.react';\nimport { commandFormLayout } from './commandFormLayout';\n\nconst layoutKeys = new Set<string>(Object.values(CommandFormLayoutKey));\n\n/**\n * Arranges a command form's fields from the keyboard. Each placed field is a focusable cell: the arrow keys\n * move it one cell, and Shift with an arrow key resizes it. A valid change is submitted as one canonical\n * edit of the `layout` property; an invalid one is announced and the committed layout is kept.\n */\nexport function CommandFormLayoutEditor({ context, property, value, setValue }: DesignTimePropertyEditorProps) {\n    const layout = commandFormLayout({ layout: value });\n    const [problem, setProblem] = useState<string>();\n    if (!layout) return <p role='note'>{property.label}: no layout is authored yet.</p>;\n\n    const onKeyDown = (field: string) => (event: KeyboardEvent<HTMLButtonElement>) => {\n        if (!layoutKeys.has(event.key)) return;\n        event.preventDefault();\n        const draft = applyCommandFormLayoutKey(layout, field, event.key as CommandFormLayoutKey, event.shiftKey, layout.placements.map(placement => placement.field));\n        if (!draft) return;\n        if (!draft.isValid) {\n            setProblem(draft.diagnostics[0].message);\n            return;\n        }\n\n        setProblem(undefined);\n        commit(draft.draft);\n    };\n\n    const commit = (next: CommandFormLayout) => {\n        setValue(next);\n        context.submitEdits([{ kind: SceneEditKind.SetProperty, nodeId: context.element.id, path: property.path, value: next }]);\n    };\n\n    return <div role='group' aria-label={property.label} aria-describedby={`${context.element.id}-layout-help`}>\n        <p id={`${context.element.id}-layout-help`}>Arrow keys move a field. Shift and an arrow key resize it.</p>\n        {layout.placements.map(placement => <button key={placement.field} type='button' onKeyDown={onKeyDown(placement.field)}\n            aria-label={`${placement.field}: row ${placement.row}, column ${placement.column}, spans ${placement.columnSpan ?? 1} column(s) and ${placement.rowSpan ?? 1} row(s)`}>\n            {placement.field}\n        </button>)}\n        {problem && <p role='alert'>{problem}</p>}\n    </div>;\n}\n"],"names":["layoutKeys","Set","Object","values","CommandFormLayoutKey","CommandFormLayoutEditor","context","property","value","setValue","layout","commandFormLayout","problem","setProblem","useState","_jsxs","p","role","label","onKeyDown","field","event","has","key","preventDefault","draft","applyCommandFormLayoutKey","shiftKey","placements","map","placement","isValid","diagnostics","message","undefined","commit","next","submitEdits","kind","SceneEditKind","SetProperty","nodeId","element","id","path","div","aria-label","aria-describedby","_jsx","button","type","row","column","columnSpan","rowSpan"],"mappings":"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"}

package/dist/cjs/forms/CommandFormRuntime.js

@@ -50,7 +50,7 @@ const NativeAutoCommandForm = CommandForm.AutoCommandForm;
     }
     return undefined;
 }
-/** Private lazy entry point: importing the Scene registry must not import Arc. */ function CommandFormRuntime({ command, inputs, exclude, submitLabel, columns = 1, layout }) {
+/** Private lazy entry point: importing the Scene registry must not import Arc. */ function CommandFormRuntime({ command, inputs, exclude, submitLabel, columns = 1, layout, compact = false }) {
     const error = capability(command, inputs, exclude);
     if (error) return /*#__PURE__*/ jsxRuntime.jsx("div", {
         role: "alert",
@@ -58,18 +58,20 @@ const NativeAutoCommandForm = CommandForm.AutoCommandForm;
     });
     // The registry's never-argument constructor is erased; Arc creates this checked proxy with no args.
     if (inputs) {
-        const formLayout = scene_engine.normalizeCommandFormLayout(layout, inputs);
-        const diagnostics = scene_engine.validateCommandFormLayout(formLayout, inputs.map((input)=>input.property));
+        const authoredLayout = scene_engine.normalizeCommandFormLayout(layout, inputs);
+        const diagnostics = scene_engine.validateCommandFormLayout(authoredLayout, inputs.map((input)=>input.property));
         if (diagnostics.length) return /*#__PURE__*/ jsxRuntime.jsx("div", {
             role: "alert",
             children: diagnostics[0].message
         });
+        const formLayout = compact ? scene_engine.stackCommandFormLayout(authoredLayout) : authoredLayout;
         const columnsCss = formLayout.columns.map((column)=>scene_engine.formWidthToCss(column.width) ?? 'minmax(0, 1fr)').join(' ') || `repeat(${Math.max(1, columns)}, minmax(0, 1fr))`;
         return /*#__PURE__*/ jsxRuntime.jsxs(commands.CommandForm, {
             command: command,
             showTitles: false,
             children: [
                 /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    "data-scene-form-columns": formLayout.columns.length,
                     style: {
                         display: 'grid',
                         gridTemplateColumns: columnsCss,

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

@@ -1 +1 @@
-{"version":3,"file":"CommandFormRuntime.js","sources":["../../../forms/CommandFormRuntime.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 type { ComponentType, ReactNode } from 'react';\nimport { AutoCommandForm } from '@cratis/components/CommandForm';\nimport { CommandForm } from '@cratis/arc.react/commands';\nimport { formWidthToCss, normalizeCommandFormLayout, validateCommandFormLayout } from '@cratis/scene.engine';\nimport { Guid } from '@cratis/fundamentals';\nimport type { BoundConstructor } from '../bindings';\nimport type { CommandInput } from './commandInputs';\nimport type { CommandFormLayout } from '@cratis/scene.model';\nimport { CommandFormSubmit } from './CommandFormSubmit';\nimport { ExplicitCommandField } from './ExplicitCommandField';\n\ninterface CommandFormRuntimeProps {\n    command: BoundConstructor;\n    inputs?: CommandInput[];\n    exclude?: string[];\n    submitLabel: string;\n    columns?: number;\n    layout?: CommandFormLayout;\n}\n\n// Runtime bindings erase the proxy's keys; the optional footer is a Components >=4.13 contract.\nconst NativeAutoCommandForm = AutoCommandForm as unknown as ComponentType<{\n    command: BoundConstructor;\n    exclude?: string[];\n    footer?: ReactNode;\n}>;\n\ntype Descriptor = { name: string; type: unknown; isOptional: boolean };\n\n/** Verify the whole command before mounting any native form: partial forms must never execute. */\nfunction capability(command: BoundConstructor, inputs?: CommandInput[], exclude?: string[]): string | undefined {\n    let descriptors: unknown;\n    try { descriptors = (new command() as { propertyDescriptors?: unknown }).propertyDescriptors; }\n    catch { return 'Unable to inspect command proxy'; }\n    if (!Array.isArray(descriptors)) return 'Command proxy has no property descriptors';\n    const byName = new Map<string, Descriptor>();\n    for (const descriptor of descriptors) {\n        if (!descriptor || typeof descriptor.name !== 'string' || !descriptor.name ||\n            typeof descriptor.isOptional !== 'boolean' || byName.has(descriptor.name)) return 'Ambiguous or invalid command property descriptors';\n        byName.set(descriptor.name, descriptor);\n    }\n    if (inputs) {\n        for (const input of inputs) {\n            const descriptor = byName.get(input.property);\n            if (!descriptor) return `Unknown command property '${input.property}'`;\n            if (descriptor.type !== (input.type === 'guid' ? Guid : String)) return `Command property '${input.property}' type does not match '${input.type}'`;\n        }\n        for (const descriptor of byName.values()) {\n            if (!descriptor.isOptional && !inputs.some(input => input.property === descriptor.name)) return `Required command property '${descriptor.name}' has no input`;\n        }\n    } else {\n        for (const descriptor of byName.values()) {\n            if (!descriptor.isOptional && (exclude?.includes(descriptor.name) ||\n                ![String, Number, Boolean, Date].includes(descriptor.type as typeof String))) {\n                return `Required command property '${descriptor.name}' has no supported automatic field; declare inputs`;\n            }\n        }\n    }\n    return undefined;\n}\n\n/** Private lazy entry point: importing the Scene registry must not import Arc. */\nexport default function CommandFormRuntime({ command, inputs, exclude, submitLabel, columns = 1, layout }: CommandFormRuntimeProps) {\n    const error = capability(command, inputs, exclude);\n    if (error) return <div role='alert'>{error}</div>;\n    // The registry's never-argument constructor is erased; Arc creates this checked proxy with no args.\n    if (inputs) {\n        const formLayout = normalizeCommandFormLayout(layout, inputs);\n        const diagnostics = validateCommandFormLayout(formLayout, inputs.map(input => input.property));\n        if (diagnostics.length) return <div role='alert'>{diagnostics[0].message}</div>;\n        const columnsCss = formLayout.columns.map(column => formWidthToCss(column.width) ?? 'minmax(0, 1fr)').join(' ') || `repeat(${Math.max(1, columns)}, minmax(0, 1fr))`;\n        return <CommandForm command={command as unknown as new () => object} showTitles={false}>\n            <div style={{ display: 'grid', gridTemplateColumns: columnsCss, columnGap: formWidthToCss(formLayout.columnGap) ?? '1rem', rowGap: formWidthToCss(formLayout.rowGap) ?? '1rem' }}>\n                {inputs.map(input => <ExplicitCommandField key={input.property} input={input} placement={formLayout.placements.find(placement => placement.field === input.property) ?? input.placement} />)}\n            </div>\n            <CommandFormSubmit label={submitLabel} />\n        </CommandForm>;\n    }\n    return <NativeAutoCommandForm command={command} exclude={exclude} footer={<CommandFormSubmit label={submitLabel} />} />;\n}\n"],"names":["NativeAutoCommandForm","AutoCommandForm","capability","command","inputs","exclude","descriptors","propertyDescriptors","Array","isArray","byName","Map","descriptor","name","isOptional","has","set","input","get","property","type","Guid","String","values","some","includes","Number","Boolean","Date","undefined","CommandFormRuntime","submitLabel","columns","layout","error","_jsx","div","role","formLayout","normalizeCommandFormLayout","diagnostics","validateCommandFormLayout","map","length","message","columnsCss","column","formWidthToCss","width","join","Math","max","_jsxs","CommandForm","showTitles","style","display","gridTemplateColumns","columnGap","rowGap","ExplicitCommandField","placement","placements","find","field","CommandFormSubmit","label","footer"],"mappings":"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"}
+{"version":3,"file":"CommandFormRuntime.js","sources":["../../../forms/CommandFormRuntime.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 type { ComponentType, ReactNode } from 'react';\nimport { AutoCommandForm } from '@cratis/components/CommandForm';\nimport { CommandForm } from '@cratis/arc.react/commands';\nimport { formWidthToCss, normalizeCommandFormLayout, stackCommandFormLayout, validateCommandFormLayout } from '@cratis/scene.engine';\nimport { Guid } from '@cratis/fundamentals';\nimport type { BoundConstructor } from '../bindings';\nimport type { CommandInput } from './commandInputs';\nimport type { CommandFormLayout } from '@cratis/scene.model';\nimport { CommandFormSubmit } from './CommandFormSubmit';\nimport { ExplicitCommandField } from './ExplicitCommandField';\n\ninterface CommandFormRuntimeProps {\n    command: BoundConstructor;\n    inputs?: CommandInput[];\n    exclude?: string[];\n    submitLabel: string;\n    columns?: number;\n    layout?: CommandFormLayout;\n\n    /** At a compact width the fields stack in one column, in reading order. */\n    compact?: boolean;\n}\n\n// Runtime bindings erase the proxy's keys; the optional footer is a Components >=4.13 contract.\nconst NativeAutoCommandForm = AutoCommandForm as unknown as ComponentType<{\n    command: BoundConstructor;\n    exclude?: string[];\n    footer?: ReactNode;\n}>;\n\ntype Descriptor = { name: string; type: unknown; isOptional: boolean };\n\n/** Verify the whole command before mounting any native form: partial forms must never execute. */\nfunction capability(command: BoundConstructor, inputs?: CommandInput[], exclude?: string[]): string | undefined {\n    let descriptors: unknown;\n    try { descriptors = (new command() as { propertyDescriptors?: unknown }).propertyDescriptors; }\n    catch { return 'Unable to inspect command proxy'; }\n    if (!Array.isArray(descriptors)) return 'Command proxy has no property descriptors';\n    const byName = new Map<string, Descriptor>();\n    for (const descriptor of descriptors) {\n        if (!descriptor || typeof descriptor.name !== 'string' || !descriptor.name ||\n            typeof descriptor.isOptional !== 'boolean' || byName.has(descriptor.name)) return 'Ambiguous or invalid command property descriptors';\n        byName.set(descriptor.name, descriptor);\n    }\n    if (inputs) {\n        for (const input of inputs) {\n            const descriptor = byName.get(input.property);\n            if (!descriptor) return `Unknown command property '${input.property}'`;\n            if (descriptor.type !== (input.type === 'guid' ? Guid : String)) return `Command property '${input.property}' type does not match '${input.type}'`;\n        }\n        for (const descriptor of byName.values()) {\n            if (!descriptor.isOptional && !inputs.some(input => input.property === descriptor.name)) return `Required command property '${descriptor.name}' has no input`;\n        }\n    } else {\n        for (const descriptor of byName.values()) {\n            if (!descriptor.isOptional && (exclude?.includes(descriptor.name) ||\n                ![String, Number, Boolean, Date].includes(descriptor.type as typeof String))) {\n                return `Required command property '${descriptor.name}' has no supported automatic field; declare inputs`;\n            }\n        }\n    }\n    return undefined;\n}\n\n/** Private lazy entry point: importing the Scene registry must not import Arc. */\nexport default function CommandFormRuntime({ command, inputs, exclude, submitLabel, columns = 1, layout, compact = false }: CommandFormRuntimeProps) {\n    const error = capability(command, inputs, exclude);\n    if (error) return <div role='alert'>{error}</div>;\n    // The registry's never-argument constructor is erased; Arc creates this checked proxy with no args.\n    if (inputs) {\n        const authoredLayout = normalizeCommandFormLayout(layout, inputs);\n        const diagnostics = validateCommandFormLayout(authoredLayout, inputs.map(input => input.property));\n        if (diagnostics.length) return <div role='alert'>{diagnostics[0].message}</div>;\n        const formLayout = compact ? stackCommandFormLayout(authoredLayout) : authoredLayout;\n        const columnsCss = formLayout.columns.map(column => formWidthToCss(column.width) ?? 'minmax(0, 1fr)').join(' ') || `repeat(${Math.max(1, columns)}, minmax(0, 1fr))`;\n        return <CommandForm command={command as unknown as new () => object} showTitles={false}>\n            <div data-scene-form-columns={formLayout.columns.length} style={{ display: 'grid', gridTemplateColumns: columnsCss, columnGap: formWidthToCss(formLayout.columnGap) ?? '1rem', rowGap: formWidthToCss(formLayout.rowGap) ?? '1rem' }}>\n                {inputs.map(input => <ExplicitCommandField key={input.property} input={input} placement={formLayout.placements.find(placement => placement.field === input.property) ?? input.placement} />)}\n            </div>\n            <CommandFormSubmit label={submitLabel} />\n        </CommandForm>;\n    }\n    return <NativeAutoCommandForm command={command} exclude={exclude} footer={<CommandFormSubmit label={submitLabel} />} />;\n}\n"],"names":["NativeAutoCommandForm","AutoCommandForm","capability","command","inputs","exclude","descriptors","propertyDescriptors","Array","isArray","byName","Map","descriptor","name","isOptional","has","set","input","get","property","type","Guid","String","values","some","includes","Number","Boolean","Date","undefined","CommandFormRuntime","submitLabel","columns","layout","compact","error","_jsx","div","role","authoredLayout","normalizeCommandFormLayout","diagnostics","validateCommandFormLayout","map","length","message","formLayout","stackCommandFormLayout","columnsCss","column","formWidthToCss","width","join","Math","max","_jsxs","CommandForm","showTitles","data-scene-form-columns","style","display","gridTemplateColumns","columnGap","rowGap","ExplicitCommandField","placement","placements","find","field","CommandFormSubmit","label","footer"],"mappings":"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"}

package/dist/cjs/forms/SceneCommandForm.js

@@ -2,6 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
+var scene_model = require('@cratis/scene.model');
 var BindingKind = require('../bindings/BindingKind.js');
 var resolveElementBinding = require('../bindings/resolveElementBinding.js');
 var MissingBinding = require('../bindings/MissingBinding.js');
@@ -53,7 +54,10 @@ function commandKey(command) {
             },
             ...commandFormLayout.commandFormLayout(element.properties) === undefined ? {} : {
                 layout: commandFormLayout.commandFormLayout(element.properties)
-            }
+            },
+            ...properties.stringProperty(element.properties, 'widthSizeClass') === scene_model.WidthSizeClass.Compact ? {
+                compact: true
+            } : {}
         }, commandKey(target))
     });
 }

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

@@ -1 +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 { lazy } from 'react';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { ArcRuntimeBoundary, BindingKind, MissingBinding, resolveElementBinding } from '../bindings';\nimport type { BoundConstructor } from '../bindings';\nimport { numberProperty, stringArrayProperty, stringProperty, unionProperty } from '../properties';\nimport { commandFormLayout } from './commandFormLayout';\nimport { commandInputs } from './commandInputs';\n\nconst CommandFormRuntime = lazy(() => import('./CommandFormRuntime'));\n\n// Arc's useCommand constructs the proxy only on mount. Key by the actual registered class,\n// not its Scene name (which may be re-registered with a different route or roles).\nconst commandKeys = new WeakMap<BoundConstructor, number>();\nlet nextCommandKey = 0;\nfunction commandKey(command: BoundConstructor): number {\n    let key = commandKeys.get(command);\n    if (key === undefined) {\n        key = ++nextCommandKey;\n        commandKeys.set(command, key);\n    }\n    return key;\n}\n\n/**\n * Auto mode follows supported native proxy descriptors; opt-in inputs bind exactly named fields\n * inside a single native Arc form. Neither mode consumes the content slot.\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    const mode = unionProperty(element.properties, 'mode', ['auto', 'manual'] as const) ?? (Object.hasOwn(element.properties, 'inputs') ? 'manual' : 'auto');\n    const inputs = mode === 'manual' ? commandInputs(element.properties) : undefined;\n    if (mode === 'manual' && !inputs) return <div role='alert'>Invalid command form inputs declaration</div>;\n\n    return (\n        <ArcRuntimeBoundary>\n            <CommandFormRuntime\n                key={commandKey(target)}\n                command={target}\n                inputs={inputs}\n                exclude={stringArrayProperty(element.properties, 'exclude')}\n                submitLabel={stringProperty(element.properties, 'submitLabel') ?? 'Submit'}\n                {...(numberProperty(element.properties, 'columns') === undefined ? {} : { columns: numberProperty(element.properties, 'columns') })}\n                {...(commandFormLayout(element.properties) === undefined ? {} : { layout: commandFormLayout(element.properties) })}\n            />\n        </ArcRuntimeBoundary>\n    );\n}\n"],"names":["CommandFormRuntime","lazy","commandKeys","WeakMap","nextCommandKey","commandKey","command","key","get","undefined","set","SceneCommandForm","element","name","target","resolveElementBinding","BindingKind","Command","_jsx","MissingBinding","kind","mode","unionProperty","properties","Object","hasOwn","inputs","commandInputs","div","role","ArcRuntimeBoundary","exclude","stringArrayProperty","submitLabel","stringProperty","numberProperty","columns","commandFormLayout","layout"],"mappings":";;;;;;;;;;;;AAWA,MAAMA,kBAAAA,iBAAqBC,UAAAA,CAAK,IAAM,oDAAO,yBAAA,KAAA,CAAA;AAE7C;AACA;AACA,MAAMC,cAAc,IAAIC,OAAAA,EAAAA;AACxB,IAAIC,cAAAA,GAAiB,CAAA;AACrB,SAASC,WAAWC,OAAyB,EAAA;IACzC,IAAIC,GAAAA,GAAML,WAAAA,CAAYM,GAAG,CAACF,OAAAA,CAAAA;AAC1B,IAAA,IAAIC,QAAQE,SAAAA,EAAW;AACnBF,QAAAA,GAAAA,GAAM,EAAEH,cAAAA;QACRF,WAAAA,CAAYQ,GAAG,CAACJ,OAAAA,EAASC,GAAAA,CAAAA;AAC7B,IAAA;IACA,OAAOA,GAAAA;AACX;AAEA;;;AAGC,IACM,SAASI,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,MAAMQ,IAAAA,GAAOC,wBAAAA,CAAcV,OAAAA,CAAQW,UAAU,EAAE,MAAA,EAAQ;AAAC,QAAA,MAAA;AAAQ,QAAA;KAAS,CAAA,KAAeC,OAAOC,MAAM,CAACb,QAAQW,UAAU,EAAE,QAAA,CAAA,GAAY,QAAA,GAAW,MAAK,CAAA;AACtJ,IAAA,MAAMG,SAASL,IAAAA,KAAS,QAAA,GAAWM,2BAAAA,CAAcf,OAAAA,CAAQW,UAAU,CAAA,GAAId,SAAAA;AACvE,IAAA,IAAIY,IAAAA,KAAS,QAAA,IAAY,CAACK,MAAAA,EAAQ,qBAAOR,cAAA,CAACU,KAAAA,EAAAA;QAAIC,IAAAA,EAAK,OAAA;AAAQ,QAAA,QAAA,EAAA;;AAE3D,IAAA,qBACIX,cAAA,CAACY,qCAAAA,EAAAA;AACG,QAAA,QAAA,gBAAAZ,cAAA,CAAClB,kBAAAA,EAAAA;YAEGM,OAAAA,EAASQ,MAAAA;YACTY,MAAAA,EAAQA,MAAAA;YACRK,OAAAA,EAASC,8BAAAA,CAAoBpB,OAAAA,CAAQW,UAAU,EAAE,SAAA,CAAA;AACjDU,YAAAA,WAAAA,EAAaC,yBAAAA,CAAetB,OAAAA,CAAQW,UAAU,EAAE,aAAA,CAAA,IAAkB,QAAA;AACjE,YAAA,GAAIY,0BAAevB,OAAAA,CAAQW,UAAU,EAAE,SAAA,CAAA,KAAed,SAAAA,GAAY,EAAC,GAAI;gBAAE2B,OAAAA,EAASD,yBAAAA,CAAevB,OAAAA,CAAQW,UAAU,EAAE,SAAA;aAAY;AACjI,YAAA,GAAIc,oCAAkBzB,OAAAA,CAAQW,UAAU,CAAA,KAAMd,SAAAA,GAAY,EAAC,GAAI;gBAAE6B,MAAAA,EAAQD,mCAAAA,CAAkBzB,QAAQW,UAAU;;WANzGlB,UAAAA,CAAWS,MAAAA,CAAAA;;AAUhC;;"}
+{"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 { lazy } from 'react';\nimport { WidthSizeClass } from '@cratis/scene.model';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { ArcRuntimeBoundary, BindingKind, MissingBinding, resolveElementBinding } from '../bindings';\nimport type { BoundConstructor } from '../bindings';\nimport { numberProperty, stringArrayProperty, stringProperty, unionProperty } from '../properties';\nimport { commandFormLayout } from './commandFormLayout';\nimport { commandInputs } from './commandInputs';\n\nconst CommandFormRuntime = lazy(() => import('./CommandFormRuntime'));\n\n// Arc's useCommand constructs the proxy only on mount. Key by the actual registered class,\n// not its Scene name (which may be re-registered with a different route or roles).\nconst commandKeys = new WeakMap<BoundConstructor, number>();\nlet nextCommandKey = 0;\nfunction commandKey(command: BoundConstructor): number {\n    let key = commandKeys.get(command);\n    if (key === undefined) {\n        key = ++nextCommandKey;\n        commandKeys.set(command, key);\n    }\n    return key;\n}\n\n/**\n * Auto mode follows supported native proxy descriptors; opt-in inputs bind exactly named fields\n * inside a single native Arc form. Neither mode consumes the content slot.\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    const mode = unionProperty(element.properties, 'mode', ['auto', 'manual'] as const) ?? (Object.hasOwn(element.properties, 'inputs') ? 'manual' : 'auto');\n    const inputs = mode === 'manual' ? commandInputs(element.properties) : undefined;\n    if (mode === 'manual' && !inputs) return <div role='alert'>Invalid command form inputs declaration</div>;\n\n    return (\n        <ArcRuntimeBoundary>\n            <CommandFormRuntime\n                key={commandKey(target)}\n                command={target}\n                inputs={inputs}\n                exclude={stringArrayProperty(element.properties, 'exclude')}\n                submitLabel={stringProperty(element.properties, 'submitLabel') ?? 'Submit'}\n                {...(numberProperty(element.properties, 'columns') === undefined ? {} : { columns: numberProperty(element.properties, 'columns') })}\n                {...(commandFormLayout(element.properties) === undefined ? {} : { layout: commandFormLayout(element.properties) })}\n                {...(stringProperty(element.properties, 'widthSizeClass') === WidthSizeClass.Compact ? { compact: true } : {})}\n            />\n        </ArcRuntimeBoundary>\n    );\n}\n"],"names":["CommandFormRuntime","lazy","commandKeys","WeakMap","nextCommandKey","commandKey","command","key","get","undefined","set","SceneCommandForm","element","name","target","resolveElementBinding","BindingKind","Command","_jsx","MissingBinding","kind","mode","unionProperty","properties","Object","hasOwn","inputs","commandInputs","div","role","ArcRuntimeBoundary","exclude","stringArrayProperty","submitLabel","stringProperty","numberProperty","columns","commandFormLayout","layout","WidthSizeClass","Compact","compact"],"mappings":";;;;;;;;;;;;;AAYA,MAAMA,kBAAAA,iBAAqBC,UAAAA,CAAK,IAAM,oDAAO,yBAAA,KAAA,CAAA;AAE7C;AACA;AACA,MAAMC,cAAc,IAAIC,OAAAA,EAAAA;AACxB,IAAIC,cAAAA,GAAiB,CAAA;AACrB,SAASC,WAAWC,OAAyB,EAAA;IACzC,IAAIC,GAAAA,GAAML,WAAAA,CAAYM,GAAG,CAACF,OAAAA,CAAAA;AAC1B,IAAA,IAAIC,QAAQE,SAAAA,EAAW;AACnBF,QAAAA,GAAAA,GAAM,EAAEH,cAAAA;QACRF,WAAAA,CAAYQ,GAAG,CAACJ,OAAAA,EAASC,GAAAA,CAAAA;AAC7B,IAAA;IACA,OAAOA,GAAAA;AACX;AAEA;;;AAGC,IACM,SAASI,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,MAAMQ,IAAAA,GAAOC,wBAAAA,CAAcV,OAAAA,CAAQW,UAAU,EAAE,MAAA,EAAQ;AAAC,QAAA,MAAA;AAAQ,QAAA;KAAS,CAAA,KAAeC,OAAOC,MAAM,CAACb,QAAQW,UAAU,EAAE,QAAA,CAAA,GAAY,QAAA,GAAW,MAAK,CAAA;AACtJ,IAAA,MAAMG,SAASL,IAAAA,KAAS,QAAA,GAAWM,2BAAAA,CAAcf,OAAAA,CAAQW,UAAU,CAAA,GAAId,SAAAA;AACvE,IAAA,IAAIY,IAAAA,KAAS,QAAA,IAAY,CAACK,MAAAA,EAAQ,qBAAOR,cAAA,CAACU,KAAAA,EAAAA;QAAIC,IAAAA,EAAK,OAAA;AAAQ,QAAA,QAAA,EAAA;;AAE3D,IAAA,qBACIX,cAAA,CAACY,qCAAAA,EAAAA;AACG,QAAA,QAAA,gBAAAZ,cAAA,CAAClB,kBAAAA,EAAAA;YAEGM,OAAAA,EAASQ,MAAAA;YACTY,MAAAA,EAAQA,MAAAA;YACRK,OAAAA,EAASC,8BAAAA,CAAoBpB,OAAAA,CAAQW,UAAU,EAAE,SAAA,CAAA;AACjDU,YAAAA,WAAAA,EAAaC,yBAAAA,CAAetB,OAAAA,CAAQW,UAAU,EAAE,aAAA,CAAA,IAAkB,QAAA;AACjE,YAAA,GAAIY,0BAAevB,OAAAA,CAAQW,UAAU,EAAE,SAAA,CAAA,KAAed,SAAAA,GAAY,EAAC,GAAI;gBAAE2B,OAAAA,EAASD,yBAAAA,CAAevB,OAAAA,CAAQW,UAAU,EAAE,SAAA;aAAY;AACjI,YAAA,GAAIc,oCAAkBzB,OAAAA,CAAQW,UAAU,CAAA,KAAMd,SAAAA,GAAY,EAAC,GAAI;gBAAE6B,MAAAA,EAAQD,mCAAAA,CAAkBzB,QAAQW,UAAU;aAAG;AAChH,YAAA,GAAIW,0BAAetB,OAAAA,CAAQW,UAAU,EAAE,gBAAA,CAAA,KAAsBgB,0BAAAA,CAAeC,OAAO,GAAG;gBAAEC,OAAAA,EAAS;AAAK,aAAA,GAAI;WAPtGpC,UAAAA,CAAWS,MAAAA,CAAAA;;AAWhC;;"}

package/dist/cjs/forms/generateCommandFieldsAction.js

@@ -13,7 +13,7 @@ const generateCommandFieldsAction = {
         description: 'Creates a deterministic editable field layout from the selected command metadata.'
     },
     isVisible: (context)=>context.element.componentName.endsWith(':commandForm'),
-    isEnabled: (context)=>Array.isArray(context.commandMetadata?.properties) && !Array.isArray(context.element.properties.inputs),
+    isEnabled: (context)=>Array.isArray(context.commandMetadata?.properties) && context.element.properties.inputs === undefined,
     execute: (context)=>generateCommandFields(context)
 };
 function generateCommandFields(context) {
@@ -24,6 +24,7 @@ function generateCommandFields(context) {
             'No command metadata was supplied.'
         ]
     };
+    // Authored fields, or a binding that supplies them, are never overwritten.
     if (Array.isArray(context.element.properties.inputs)) {
         return {
             edits: [],
@@ -32,6 +33,14 @@ function generateCommandFields(context) {
             ]
         };
     }
+    if (context.element.properties.inputs !== undefined) {
+        return {
+            edits: [],
+            diagnostics: [
+                'The form\'s fields come from a binding; Generate fields will not overwrite it.'
+            ]
+        };
+    }
     return {
         diagnostics: [],
         edits: [

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

@@ -1 +1 @@
-{"version":3,"file":"generateCommandFieldsAction.js","sources":["../../../forms/generateCommandFieldsAction.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 { DesignTimeAction, DesignTimeActionContext, DesignTimeActionResult } from '@cratis/scene.react';\nimport { DesignTimeActionPlacement, SceneEditKind } from '@cratis/scene.model';\n\nexport const generateCommandFieldsAction: DesignTimeAction = {\n    descriptor: {\n        id: 'Cratis.Components.commandForm.generateFields',\n        label: 'Generate fields',\n        placement: DesignTimeActionPlacement.Toolbar,\n        availability: 'commandForm.canGenerateFields',\n        description: 'Creates a deterministic editable field layout from the selected command metadata.',\n    },\n    isVisible: context => context.element.componentName.endsWith(':commandForm'),\n    isEnabled: context => Array.isArray(context.commandMetadata?.properties) && !Array.isArray(context.element.properties.inputs),\n    execute: context => generateCommandFields(context),\n};\n\nfunction generateCommandFields(context: DesignTimeActionContext): DesignTimeActionResult {\n    const properties = context.commandMetadata?.properties ?? [];\n    if (!properties.length) return { edits: [], diagnostics: ['No command metadata was supplied.'] };\n    if (Array.isArray(context.element.properties.inputs)) {\n        return { edits: [], diagnostics: ['The form already has authored fields; Generate fields will not overwrite them.'] };\n    }\n\n    return {\n        diagnostics: [],\n        edits: [{\n            kind: SceneEditKind.SetProperty,\n            nodeId: context.element.id,\n            path: 'inputs',\n            value: properties.map((property, index) => ({\n                property: property.name,\n                type: property.type === 'Guid' || property.type === 'guid' ? 'guid' : 'string',\n                label: property.label ?? humanize(property.name),\n                column: (index % 2) + 1,\n                width: '1fr',\n            })),\n        }],\n    };\n}\n\nfunction humanize(name: string): string {\n    return name.replace(/([a-z0-9])([A-Z])/g, '$1 $2').replace(/^./, value => value.toUpperCase());\n}\n"],"names":["generateCommandFieldsAction","descriptor","id","label","placement","DesignTimeActionPlacement","Toolbar","availability","description","isVisible","context","element","componentName","endsWith","isEnabled","Array","isArray","commandMetadata","properties","inputs","execute","generateCommandFields","length","edits","diagnostics","kind","SceneEditKind","SetProperty","nodeId","path","value","map","property","index","name","type","humanize","column","width","replace","toUpperCase"],"mappings":";;;;AAAA;AACA;MAKaA,2BAAAA,GAAgD;IACzDC,UAAAA,EAAY;QACRC,EAAAA,EAAI,8CAAA;QACJC,KAAAA,EAAO,iBAAA;AACPC,QAAAA,SAAAA,EAAWC,sCAA0BC,OAAO;QAC5CC,YAAAA,EAAc,+BAAA;QACdC,WAAAA,EAAa;AACjB,KAAA;IACAC,SAAAA,EAAWC,CAAAA,UAAWA,OAAAA,CAAQC,OAAO,CAACC,aAAa,CAACC,QAAQ,CAAC,cAAA,CAAA;AAC7DC,IAAAA,SAAAA,EAAWJ,CAAAA,OAAAA,GAAWK,KAAAA,CAAMC,OAAO,CAACN,OAAAA,CAAQO,eAAe,EAAEC,UAAAA,CAAAA,IAAe,CAACH,KAAAA,CAAMC,OAAO,CAACN,OAAAA,CAAQC,OAAO,CAACO,UAAU,CAACC,MAAM,CAAA;IAC5HC,OAAAA,EAASV,CAAAA,UAAWW,qBAAAA,CAAsBX,OAAAA;AAC9C;AAEA,SAASW,sBAAsBX,OAAgC,EAAA;AAC3D,IAAA,MAAMQ,UAAAA,GAAaR,OAAAA,CAAQO,eAAe,EAAEC,cAAc,EAAE;AAC5D,IAAA,IAAI,CAACA,UAAAA,CAAWI,MAAM,EAAE,OAAO;AAAEC,QAAAA,KAAAA,EAAO,EAAE;QAAEC,WAAAA,EAAa;AAAC,YAAA;AAAoC;AAAC,KAAA;IAC/F,IAAIT,KAAAA,CAAMC,OAAO,CAACN,OAAAA,CAAQC,OAAO,CAACO,UAAU,CAACC,MAAM,CAAA,EAAG;QAClD,OAAO;AAAEI,YAAAA,KAAAA,EAAO,EAAE;YAAEC,WAAAA,EAAa;AAAC,gBAAA;AAAiF;AAAC,SAAA;AACxH,IAAA;IAEA,OAAO;AACHA,QAAAA,WAAAA,EAAa,EAAE;QACfD,KAAAA,EAAO;AAAC,YAAA;AACJE,gBAAAA,IAAAA,EAAMC,0BAAcC,WAAW;gBAC/BC,MAAAA,EAAQlB,OAAAA,CAAQC,OAAO,CAACT,EAAE;gBAC1B2B,IAAAA,EAAM,QAAA;AACNC,gBAAAA,KAAAA,EAAOZ,WAAWa,GAAG,CAAC,CAACC,QAAAA,EAAUC,SAAW;AACxCD,wBAAAA,QAAAA,EAAUA,SAASE,IAAI;wBACvBC,IAAAA,EAAMH,QAAAA,CAASG,IAAI,KAAK,MAAA,IAAUH,SAASG,IAAI,KAAK,SAAS,MAAA,GAAS,QAAA;AACtEhC,wBAAAA,KAAAA,EAAO6B,QAAAA,CAAS7B,KAAK,IAAIiC,QAAAA,CAASJ,SAASE,IAAI,CAAA;wBAC/CG,MAAAA,EAASJ,QAAQ,CAAA,GAAK,CAAA;wBACtBK,KAAAA,EAAO;qBACX,CAAA;AACJ;AAAE;AACN,KAAA;AACJ;AAEA,SAASF,SAASF,IAAY,EAAA;IAC1B,OAAOA,IAAAA,CAAKK,OAAO,CAAC,oBAAA,EAAsB,OAAA,CAAA,CAASA,OAAO,CAAC,IAAA,EAAMT,CAAAA,KAAAA,GAASA,KAAAA,CAAMU,WAAW,EAAA,CAAA;AAC/F;;"}
+{"version":3,"file":"generateCommandFieldsAction.js","sources":["../../../forms/generateCommandFieldsAction.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 { DesignTimeAction, DesignTimeActionContext, DesignTimeActionResult } from '@cratis/scene.react';\nimport { DesignTimeActionPlacement, SceneEditKind } from '@cratis/scene.model';\n\nexport const generateCommandFieldsAction: DesignTimeAction = {\n    descriptor: {\n        id: 'Cratis.Components.commandForm.generateFields',\n        label: 'Generate fields',\n        placement: DesignTimeActionPlacement.Toolbar,\n        availability: 'commandForm.canGenerateFields',\n        description: 'Creates a deterministic editable field layout from the selected command metadata.',\n    },\n    isVisible: context => context.element.componentName.endsWith(':commandForm'),\n    isEnabled: context => Array.isArray(context.commandMetadata?.properties) && context.element.properties.inputs === undefined,\n    execute: context => generateCommandFields(context),\n};\n\nfunction generateCommandFields(context: DesignTimeActionContext): DesignTimeActionResult {\n    const properties = context.commandMetadata?.properties ?? [];\n    if (!properties.length) return { edits: [], diagnostics: ['No command metadata was supplied.'] };\n    // Authored fields, or a binding that supplies them, are never overwritten.\n    if (Array.isArray(context.element.properties.inputs)) {\n        return { edits: [], diagnostics: ['The form already has authored fields; Generate fields will not overwrite them.'] };\n    }\n    if (context.element.properties.inputs !== undefined) {\n        return { edits: [], diagnostics: ['The form\\'s fields come from a binding; Generate fields will not overwrite it.'] };\n    }\n\n    return {\n        diagnostics: [],\n        edits: [{\n            kind: SceneEditKind.SetProperty,\n            nodeId: context.element.id,\n            path: 'inputs',\n            value: properties.map((property, index) => ({\n                property: property.name,\n                type: property.type === 'Guid' || property.type === 'guid' ? 'guid' : 'string',\n                label: property.label ?? humanize(property.name),\n                column: (index % 2) + 1,\n                width: '1fr',\n            })),\n        }],\n    };\n}\n\nfunction humanize(name: string): string {\n    return name.replace(/([a-z0-9])([A-Z])/g, '$1 $2').replace(/^./, value => value.toUpperCase());\n}\n"],"names":["generateCommandFieldsAction","descriptor","id","label","placement","DesignTimeActionPlacement","Toolbar","availability","description","isVisible","context","element","componentName","endsWith","isEnabled","Array","isArray","commandMetadata","properties","inputs","undefined","execute","generateCommandFields","length","edits","diagnostics","kind","SceneEditKind","SetProperty","nodeId","path","value","map","property","index","name","type","humanize","column","width","replace","toUpperCase"],"mappings":";;;;AAAA;AACA;MAKaA,2BAAAA,GAAgD;IACzDC,UAAAA,EAAY;QACRC,EAAAA,EAAI,8CAAA;QACJC,KAAAA,EAAO,iBAAA;AACPC,QAAAA,SAAAA,EAAWC,sCAA0BC,OAAO;QAC5CC,YAAAA,EAAc,+BAAA;QACdC,WAAAA,EAAa;AACjB,KAAA;IACAC,SAAAA,EAAWC,CAAAA,UAAWA,OAAAA,CAAQC,OAAO,CAACC,aAAa,CAACC,QAAQ,CAAC,cAAA,CAAA;AAC7DC,IAAAA,SAAAA,EAAWJ,CAAAA,OAAAA,GAAWK,KAAAA,CAAMC,OAAO,CAACN,OAAAA,CAAQO,eAAe,EAAEC,UAAAA,CAAAA,IAAeR,QAAQC,OAAO,CAACO,UAAU,CAACC,MAAM,KAAKC,SAAAA;IAClHC,OAAAA,EAASX,CAAAA,UAAWY,qBAAAA,CAAsBZ,OAAAA;AAC9C;AAEA,SAASY,sBAAsBZ,OAAgC,EAAA;AAC3D,IAAA,MAAMQ,UAAAA,GAAaR,OAAAA,CAAQO,eAAe,EAAEC,cAAc,EAAE;AAC5D,IAAA,IAAI,CAACA,UAAAA,CAAWK,MAAM,EAAE,OAAO;AAAEC,QAAAA,KAAAA,EAAO,EAAE;QAAEC,WAAAA,EAAa;AAAC,YAAA;AAAoC;AAAC,KAAA;;IAE/F,IAAIV,KAAAA,CAAMC,OAAO,CAACN,OAAAA,CAAQC,OAAO,CAACO,UAAU,CAACC,MAAM,CAAA,EAAG;QAClD,OAAO;AAAEK,YAAAA,KAAAA,EAAO,EAAE;YAAEC,WAAAA,EAAa;AAAC,gBAAA;AAAiF;AAAC,SAAA;AACxH,IAAA;AACA,IAAA,IAAIf,QAAQC,OAAO,CAACO,UAAU,CAACC,MAAM,KAAKC,SAAAA,EAAW;QACjD,OAAO;AAAEI,YAAAA,KAAAA,EAAO,EAAE;YAAEC,WAAAA,EAAa;AAAC,gBAAA;AAAiF;AAAC,SAAA;AACxH,IAAA;IAEA,OAAO;AACHA,QAAAA,WAAAA,EAAa,EAAE;QACfD,KAAAA,EAAO;AAAC,YAAA;AACJE,gBAAAA,IAAAA,EAAMC,0BAAcC,WAAW;gBAC/BC,MAAAA,EAAQnB,OAAAA,CAAQC,OAAO,CAACT,EAAE;gBAC1B4B,IAAAA,EAAM,QAAA;AACNC,gBAAAA,KAAAA,EAAOb,WAAWc,GAAG,CAAC,CAACC,QAAAA,EAAUC,SAAW;AACxCD,wBAAAA,QAAAA,EAAUA,SAASE,IAAI;wBACvBC,IAAAA,EAAMH,QAAAA,CAASG,IAAI,KAAK,MAAA,IAAUH,SAASG,IAAI,KAAK,SAAS,MAAA,GAAS,QAAA;AACtEjC,wBAAAA,KAAAA,EAAO8B,QAAAA,CAAS9B,KAAK,IAAIkC,QAAAA,CAASJ,SAASE,IAAI,CAAA;wBAC/CG,MAAAA,EAASJ,QAAQ,CAAA,GAAK,CAAA;wBACtBK,KAAAA,EAAO;qBACX,CAAA;AACJ;AAAE;AACN,KAAA;AACJ;AAEA,SAASF,SAASF,IAAY,EAAA;IAC1B,OAAOA,IAAAA,CAAKK,OAAO,CAAC,oBAAA,EAAsB,OAAA,CAAA,CAASA,OAAO,CAAC,IAAA,EAAMT,CAAAA,KAAAA,GAASA,KAAAA,CAAMU,WAAW,EAAA,CAAA;AAC/F;;"}

package/dist/cjs/index.js

@@ -53,6 +53,9 @@ var SceneToolbarSeparator = require('./toolbar/SceneToolbarSeparator.js');
 var cratisComponents = require('./cratisComponents.js');
 var cratisComponentsDescriptors = require('./cratisComponentsDescriptors.js');
 var cratisComponentsPackage = require('./cratisComponentsPackage.js');
+var cratisComponentsRuntimePackage = require('./cratisComponentsRuntimePackage.js');
+var cratisComponentsDesignTime = require('./designTime/cratisComponentsDesignTime.js');
+var cratisComponentsPackageManifest = require('./cratisComponentsPackageManifest.js');
 
 
 
@@ -129,5 +132,7 @@ exports.cratisComponents = cratisComponents.cratisComponents;
 exports.cratisComponentsPackageName = cratisComponents.cratisComponentsPackageName;
 exports.cratisComponentsDescriptors = cratisComponentsDescriptors.cratisComponentsDescriptors;
 exports.cratisComponentsPackage = cratisComponentsPackage.cratisComponentsPackage;
-exports.cratisComponentsPackageManifest = cratisComponentsPackage.cratisComponentsPackageManifest;
+exports.cratisComponentsRuntimePackage = cratisComponentsRuntimePackage.cratisComponentsRuntimePackage;
+exports.cratisComponentsDesignTime = cratisComponentsDesignTime.cratisComponentsDesignTime;
+exports.cratisComponentsPackageManifest = cratisComponentsPackageManifest.cratisComponentsPackageManifest;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/runtime.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var cratisComponents = require('./cratisComponents.js');
+var cratisComponentsDescriptors = require('./cratisComponentsDescriptors.js');
+var cratisComponentsPackageManifest = require('./cratisComponentsPackageManifest.js');
+var cratisComponentsRuntimePackage = require('./cratisComponentsRuntimePackage.js');
+
+
+
+exports.cratisComponents = cratisComponents.cratisComponents;
+exports.cratisComponentsPackageName = cratisComponents.cratisComponentsPackageName;
+exports.cratisComponentsDescriptors = cratisComponentsDescriptors.cratisComponentsDescriptors;
+exports.cratisComponentsPackageManifest = cratisComponentsPackageManifest.cratisComponentsPackageManifest;
+exports.cratisComponentsRuntimePackage = cratisComponentsRuntimePackage.cratisComponentsRuntimePackage;
+//# sourceMappingURL=runtime.js.map

package/dist/cjs/runtime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"runtime.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/dist/esm/cratisComponentsDescriptors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cratisComponentsDescriptors.d.ts","sourceRoot":"","sources":["../../cratisComponentsDescriptors.ts"],"names":[],"mappings":"AAGA,OAAO,EAAkC,mBAAmB,EAAsF,MAAM,qBAAqB,CAAC;AAiF9K,eAAO,MAAM,2BAA2B,EAAE,mBAAmB,EAiB5D,CAAC"}
+{"version":3,"file":"cratisComponentsDescriptors.d.ts","sourceRoot":"","sources":["../../cratisComponentsDescriptors.ts"],"names":[],"mappings":"AAGA,OAAO,EAAkC,mBAAmB,EAAsF,MAAM,qBAAqB,CAAC;AAsF9K,eAAO,MAAM,2BAA2B,EAAE,mBAAmB,EAiB5D,CAAC"}

package/dist/esm/cratisComponentsDescriptors.js

@@ -109,6 +109,24 @@ const commandFormProperties = [
         editorKind: 'commandFormLayout',
         description: 'Typed command-form geometry: columns, gaps and field placements. Independent of auto/manual field generation.'
     },
+    {
+        path: 'widthSizeClass',
+        label: 'Width size class',
+        group: 'Layout',
+        valueType: PropertyValueType.Enum,
+        default: 'Regular',
+        choices: [
+            {
+                value: 'Regular',
+                label: 'Regular'
+            },
+            {
+                value: 'Compact',
+                label: 'Compact'
+            }
+        ],
+        description: 'The width size class the host evaluated. At Compact the fields of a manual form stack in one column in reading order.'
+    },
     {
         path: 'fieldWidths',
         label: 'Legacy field widths',