@cratis/components 4.24.0 → 4.25.0

package/dist/esm/ConfigurationEditor/OrderedItemDestinationField.js

@@ -0,0 +1,23 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const groupDestinations = (destinations) => {
+    const ungrouped = destinations.filter((destination) => !destination.group);
+    const groups = new Map();
+    for (const destination of destinations) {
+        if (!destination.group)
+            continue;
+        groups.set(destination.group, [...(groups.get(destination.group) ?? []), destination]);
+    }
+    return { ungrouped, groups };
+};
+const OrderedItemDestinationField = ({ item, editable, itemName, labels, destinations, message, messageId, parts, onChange, }) => {
+    const current = destinations.find((destination) => destination.id === item.destination);
+    const missing = item.destination !== undefined && current === undefined;
+    const feedback = message ?? (missing ? labels.destinationUnavailable : undefined);
+    const accessibleName = `${labels.destinationField}: ${itemName}`;
+    const { ungrouped, groups } = groupDestinations(destinations);
+    return (jsxs("div", { className: 'cratis-ordered-item__destination', children: [editable ? (jsxs("select", { ...parts?.destination, value: item.destination ?? '', "aria-label": accessibleName, "aria-invalid": feedback ? true : undefined, "aria-describedby": feedback ? messageId : undefined, onChange: (event) => onChange(event.target.value === '' ? undefined : event.target.value), className: `cratis-ordered-item__input ${parts?.destination?.className ?? ''}`, "data-cratis-part": 'destination', "data-control": 'destination', "data-invalid": feedback ? true : undefined, children: [jsx("option", { value: '', children: labels.noDestination }), missing && jsx("option", { value: item.destination, children: labels.destinationUnavailable }), ungrouped.map((destination) => (jsx("option", { value: destination.id, children: destination.label }, destination.id))), [...groups.entries()].map(([group, members]) => (jsx("optgroup", { label: group, children: members.map((destination) => (jsx("option", { value: destination.id, children: destination.label }, destination.id))) }, group)))] })) : (jsxs("span", { className: 'cratis-ordered-item__text', "data-control": 'destination', children: [jsxs("span", { className: 'cratis-ordered-item__hidden', children: [accessibleName, ": "] }), current ? current.label : labels.noDestination] })), feedback && (jsx("p", { ...parts?.message, id: messageId, role: 'alert', className: `cratis-ordered-item__message ${parts?.message?.className ?? ''}`, "data-cratis-part": 'message', "data-invalid": true, children: feedback }))] }));
+};
+
+export { OrderedItemDestinationField };
+//# sourceMappingURL=OrderedItemDestinationField.js.map

package/dist/esm/ConfigurationEditor/OrderedItemDestinationField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderedItemDestinationField.js","sources":["../../../ConfigurationEditor/OrderedItemDestinationField.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 { ConfigurationDestination } from './ConfigurationDestination';\nimport type { OrderedItem } from './OrderedItem';\nimport type { OrderedItemEditorParts } from './OrderedItemEditorParts';\nimport type { OrderedItemLabels } from './OrderedItemLabels';\n\ninterface DestinationFieldProps<TItem extends OrderedItem> {\n    item: TItem;\n    editable: boolean;\n    itemName: string;\n    labels: Required<OrderedItemLabels>;\n    destinations: ReadonlyArray<ConfigurationDestination>;\n    message: string | undefined;\n    messageId: string;\n    parts: OrderedItemEditorParts | undefined;\n    onChange: (destination: string | undefined) => void;\n}\n\nconst groupDestinations = (destinations: ReadonlyArray<ConfigurationDestination>) => {\n    const ungrouped = destinations.filter((destination) => !destination.group);\n    const groups = new Map<string, ConfigurationDestination[]>();\n    for (const destination of destinations) {\n        if (!destination.group) continue;\n        groups.set(destination.group, [...(groups.get(destination.group) ?? []), destination]);\n    }\n    return { ungrouped, groups };\n};\n\n/**\n * The destination field of one item: a select over the host's destinations, or the destination's\n * name as text. A destination the host no longer lists stays selectable-as-current and is flagged.\n */\nexport const OrderedItemDestinationField = <TItem extends OrderedItem>({\n    item,\n    editable,\n    itemName,\n    labels,\n    destinations,\n    message,\n    messageId,\n    parts,\n    onChange,\n}: DestinationFieldProps<TItem>) => {\n    const current = destinations.find((destination) => destination.id === item.destination);\n    const missing = item.destination !== undefined && current === undefined;\n    const feedback = message ?? (missing ? labels.destinationUnavailable : undefined);\n    const accessibleName = `${labels.destinationField}: ${itemName}`;\n    const { ungrouped, groups } = groupDestinations(destinations);\n\n    return (\n        <div className='cratis-ordered-item__destination'>\n            {editable ? (\n                <select\n                    {...parts?.destination}\n                    value={item.destination ?? ''}\n                    aria-label={accessibleName}\n                    aria-invalid={feedback ? true : undefined}\n                    aria-describedby={feedback ? messageId : undefined}\n                    onChange={(event) => onChange(event.target.value === '' ? undefined : event.target.value)}\n                    className={`cratis-ordered-item__input ${parts?.destination?.className ?? ''}`}\n                    data-cratis-part='destination'\n                    data-control='destination'\n                    data-invalid={feedback ? true : undefined}\n                >\n                    <option value=''>{labels.noDestination}</option>\n                    {missing && <option value={item.destination}>{labels.destinationUnavailable}</option>}\n                    {ungrouped.map((destination) => (\n                        <option key={destination.id} value={destination.id}>{destination.label}</option>\n                    ))}\n                    {[...groups.entries()].map(([group, members]) => (\n                        <optgroup key={group} label={group}>\n                            {members.map((destination) => (\n                                <option key={destination.id} value={destination.id}>{destination.label}</option>\n                            ))}\n                        </optgroup>\n                    ))}\n                </select>\n            ) : (\n                <span className='cratis-ordered-item__text' data-control='destination'>\n                    <span className='cratis-ordered-item__hidden'>{accessibleName}: </span>\n                    {current ? current.label : labels.noDestination}\n                </span>\n            )}\n            {feedback && (\n                <p {...parts?.message} id={messageId} role='alert' className={`cratis-ordered-item__message ${parts?.message?.className ?? ''}`} data-cratis-part='message' data-invalid>\n                    {feedback}\n                </p>\n            )}\n        </div>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/ConfigurationEditor/OrderedItemEditor.d.ts

@@ -0,0 +1,74 @@
+import { type ReactNode } from 'react';
+import type { IconPickerAllowed } from '../IconPicker/IconPickerAllowed.js';
+import type { IconPickerCatalog } from '../IconPicker/IconPickerCatalog.js';
+import type { IconPickerLabels } from '../IconPicker/IconPickerLabels.js';
+import type { ConfigurationDestination } from './ConfigurationDestination.js';
+import type { ConfigurationIconReference } from './ConfigurationIconReference.js';
+import type { OrderedItem } from './OrderedItem.js';
+import type { OrderedItemCapabilities } from './OrderedItemCapabilities.js';
+import type { OrderedItemEditorParts } from './OrderedItemEditorParts.js';
+import type { OrderedItemIconFieldProps } from './OrderedItemIconFieldProps.js';
+import type { OrderedItemLabels } from './OrderedItemLabels.js';
+import type { OrderedItemProposal } from './OrderedItemProposal.js';
+import type { OrderedItemValidation } from './OrderedItemValidation.js';
+/** Props for the {@link OrderedItemEditor} component. */
+export interface OrderedItemEditorProps<TItem extends OrderedItem = OrderedItem> {
+    /** The configurable items, in order. The editor is controlled: it shows exactly these. */
+    items: ReadonlyArray<TItem>;
+    /** Fixed (inherited) items. Shown separately and locked: they have no controls and are never part of a proposal. */
+    fixedItems?: ReadonlyArray<TItem>;
+    /** What the host allows. Restricted controls are not offered and restricted proposals are never emitted. */
+    capabilities: OrderedItemCapabilities;
+    /**
+     * Receives a validated, permitted proposal. Apply it by passing new `items`; ignore it to cancel.
+     * The host remains responsible for authoritative permission checks and persistence.
+     */
+    onChange: (proposal: OrderedItemProposal<TItem>) => void;
+    /** The destinations offered by the destination field. */
+    destinations?: ReadonlyArray<ConfigurationDestination>;
+    /** Creates the item an add proposal carries. The host assigns its stable id. Without it, adding is unavailable. */
+    createItem?: () => TItem;
+    /**
+     * The icons the host offers, as an {@link IconPicker} catalog. When supplied, the icon field is the
+     * Components icon picker; there is no separate icon grid. Icon references are qualified
+     * `{ library, key, variant? }` identities, never names or markup.
+     */
+    iconCatalog?: IconPickerCatalog;
+    /** Restricts which catalog icons can be chosen. Other icons are listed but cannot be selected. */
+    allowedIcons?: IconPickerAllowed;
+    /** Overrides for the icon picker's own labels. */
+    iconPickerLabels?: IconPickerLabels;
+    /**
+     * Overrides the icon field with the host's own chooser, taking precedence over `iconCatalog`.
+     * Without it and without an `iconCatalog`, the icon is shown as text.
+     */
+    renderIconField?: (props: OrderedItemIconFieldProps<TItem>) => ReactNode;
+    /** Tells whether the host's catalog can still supply an icon. An unavailable icon is flagged in text. */
+    isIconAvailable?: (icon: ConfigurationIconReference) => boolean;
+    /** The host's validation rules, run on the item as it would be. A message blocks the proposal. */
+    validate?: (item: TItem, items: ReadonlyArray<TItem>) => OrderedItemValidation | undefined;
+    /** Validation feedback from the host, by item id, for example from a server-side check. */
+    validation?: Readonly<Record<string, OrderedItemValidation>>;
+    /** Overrides for the editor's strings. Unset fields fall back to English. */
+    labels?: OrderedItemLabels;
+    /** The editor's accessible name. */
+    'aria-label'?: string;
+    /** The id of the element naming the editor. */
+    'aria-labelledby'?: string;
+    /** Extra class name on the editor's root. */
+    className?: string;
+    /** Pass-through attributes for the editor's stable parts. */
+    pt?: OrderedItemEditorParts;
+}
+/**
+ * An ordered collection editor for configuring a component such as a navigation: labeled items with
+ * an icon and a destination, that can be added, removed and reordered.
+ *
+ * The editor is controlled and policy-free. The host says what is allowed through `capabilities`,
+ * supplies the destinations and the icon chooser, and receives validated proposals through
+ * `onChange`. Fixed items are listed separately and locked, in text as well as in state, so the
+ * difference never rests on opacity. Reordering works by dragging the handle, with the handle's
+ * arrow keys, and with labeled move-up and move-down buttons; focus follows the item that moved.
+ */
+export declare const OrderedItemEditor: <TItem extends OrderedItem = OrderedItem>({ items, fixedItems, capabilities, onChange, destinations, createItem, renderIconField, isIconAvailable, iconCatalog, allowedIcons, iconPickerLabels, validate, validation, labels: suppliedLabels, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, pt, }: OrderedItemEditorProps<TItem>) => import("react").JSX.Element;
+//# sourceMappingURL=OrderedItemEditor.d.ts.map

package/dist/esm/ConfigurationEditor/OrderedItemEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderedItemEditor.d.ts","sourceRoot":"","sources":["../../../ConfigurationEditor/OrderedItemEditor.tsx"],"names":[],"mappings":"AAGA,OAAO,EAQH,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oCAAiC,CAAC;AACzE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oCAAiC,CAAC;AACzE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mCAAgC,CAAC;AAEvE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA4B,CAAC;AAC3E,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,iCAA8B,CAAC;AAC/E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAe,CAAC;AACjD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,8BAA2B,CAAC;AACzE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,6BAA0B,CAAC;AAEvE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gCAA6B,CAAC;AAC7E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAqB,CAAC;AAC7D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAAuB,CAAC;AACjE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,4BAAyB,CAAC;AAUrE,yDAAyD;AACzD,MAAM,WAAW,sBAAsB,CAAC,KAAK,SAAS,WAAW,GAAG,WAAW;IAC3E,0FAA0F;IAC1F,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IAE5B,oHAAoH;IACpH,UAAU,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IAElC,4GAA4G;IAC5G,YAAY,EAAE,uBAAuB,CAAC;IAEtC;;;OAGG;IACH,QAAQ,EAAE,CAAC,QAAQ,EAAE,mBAAmB,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IAEzD,yDAAyD;IACzD,YAAY,CAAC,EAAE,aAAa,CAAC,wBAAwB,CAAC,CAAC;IAEvD,mHAAmH;IACnH,UAAU,CAAC,EAAE,MAAM,KAAK,CAAC;IAEzB;;;;OAIG;IACH,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAEhC,kGAAkG;IAClG,YAAY,CAAC,EAAE,iBAAiB,CAAC;IAEjC,kDAAkD;IAClD,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IAEpC;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,yBAAyB,CAAC,KAAK,CAAC,KAAK,SAAS,CAAC;IAEzE,yGAAyG;IACzG,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,0BAA0B,KAAK,OAAO,CAAC;IAEhE,kGAAkG;IAClG,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,qBAAqB,GAAG,SAAS,CAAC;IAE3F,2FAA2F;IAC3F,UAAU,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAE7D,6EAA6E;IAC7E,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAE3B,oCAAoC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,+CAA+C;IAC/C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,6DAA6D;IAC7D,EAAE,CAAC,EAAE,sBAAsB,CAAC;CAC/B;AA4BD;;;;;;;;;GASG;AACH,eAAO,MAAM,iBAAiB,GAAI,KAAK,SAAS,WAAW,GAAG,WAAW,oRAmBtE,sBAAsB,CAAC,KAAK,CAAC,gCA0R/B,CAAC"}

package/dist/esm/ConfigurationEditor/OrderedItemEditor.js

@@ -0,0 +1,188 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useMemo, useId, useRef, useState, useLayoutEffect, useCallback } from 'react';
+import { isIconPickerAllowed } from '../IconPicker/isIconPickerAllowed.js';
+import { OrderedItemRow } from './OrderedItemRow.js';
+import { moveOrderedItem } from './moveOrderedItem.js';
+import { resolveOrderedItemFieldAccess } from './resolveOrderedItemFieldAccess.js';
+import { resolveOrderedItemDropIndex } from './resolveOrderedItemDropIndex.js';
+import { resolveOrderedItemLabels } from './resolveOrderedItemLabels.js';
+import { validateOrderedItem, hasOrderedItemValidation } from './validateOrderedItem.js';
+
+const dragType = 'application/x-cratis-ordered-item';
+const sameIcon = (left, right) => left === right ||
+    (left !== undefined && right !== undefined && left.library === right.library && left.key === right.key && left.variant === right.variant);
+const withField = (item, field, value) => {
+    const next = { ...item, [field]: value };
+    if (value === undefined)
+        delete next[field];
+    return next;
+};
+const OrderedItemEditor = ({ items, fixedItems = [], capabilities, onChange, destinations = [], createItem, renderIconField, isIconAvailable, iconCatalog, allowedIcons, iconPickerLabels, validate, validation, labels: suppliedLabels, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, pt, }) => {
+    const labels = useMemo(() => resolveOrderedItemLabels(suppliedLabels), [suppliedLabels]);
+    const baseId = useId();
+    const rootRef = useRef(null);
+    const pending = useRef(null);
+    const restoring = useRef(false);
+    const [localValidation, setLocalValidation] = useState({});
+    const [drag, setDrag] = useState(null);
+    const [announcement, setAnnouncement] = useState('');
+    const canAdd = capabilities.add &&
+        createItem !== undefined &&
+        (capabilities.maxItems === undefined || items.length < capabilities.maxItems);
+    const atMaximum = capabilities.add && capabilities.maxItems !== undefined && items.length >= capabilities.maxItems;
+    useLayoutEffect(() => {
+        const target = pending.current;
+        const root = rootRef.current;
+        if (!target || !root)
+            return;
+        const row = target.itemId === undefined
+            ? root
+            : Array.from(root.querySelectorAll('[data-item-id]')).find((element) => element.dataset.itemId === target.itemId);
+        if (!row)
+            return;
+        const control = Array.from(row.querySelectorAll('[data-control]')).find((element) => element.dataset.control === target.control);
+        const focusable = control ?? (target.itemId === undefined ? undefined : row);
+        if (!focusable)
+            return;
+        restoring.current = true;
+        focusable.focus();
+        restoring.current = false;
+        pending.current = null;
+        if (target.announce && target.itemId !== undefined) {
+            const index = items.findIndex((item) => item.id === target.itemId);
+            if (index >= 0)
+                setAnnouncement(labels.moved(items[index].label || labels.untitled, index + 1, items.length));
+        }
+    });
+    const move = useCallback((item, toIndex, control) => {
+        if (!capabilities.reorder)
+            return;
+        const fromIndex = items.findIndex((candidate) => candidate.id === item.id);
+        if (fromIndex < 0 || toIndex < 0 || toIndex >= items.length || toIndex === fromIndex)
+            return;
+        pending.current = { itemId: item.id, control, announce: true };
+        onChange({ kind: 'move', item: items[fromIndex], fromIndex, toIndex, items: moveOrderedItem(items, fromIndex, toIndex) });
+    }, [capabilities.reorder, items, onChange]);
+    const handleMove = (item, delta, control) => {
+        const index = items.findIndex((candidate) => candidate.id === item.id);
+        if (index >= 0)
+            move(item, index + delta, control);
+    };
+    const handleField = (item, field, value) => {
+        if (resolveOrderedItemFieldAccess(capabilities, field) !== 'editable')
+            return;
+        if (field === 'icon' && allowedIcons !== undefined && iconCatalog !== undefined && value !== undefined) {
+            const picked = value;
+            const entry = iconCatalog.icons.find((candidate) => candidate.library === picked.library && candidate.key === picked.key && candidate.variant === picked.variant);
+            if (entry !== undefined && !isIconPickerAllowed(entry, allowedIcons))
+                return;
+        }
+        const index = items.findIndex((candidate) => candidate.id === item.id);
+        if (index < 0)
+            return;
+        const previous = items[index];
+        const unchanged = field === 'icon'
+            ? sameIcon(previous.icon, value)
+            : previous[field] === value;
+        if (unchanged)
+            return;
+        const next = withField(previous, field, value);
+        const nextItems = items.map((candidate, position) => (position === index ? next : candidate));
+        const messages = validateOrderedItem(next, nextItems, capabilities, labels, validate);
+        if (hasOrderedItemValidation(messages)) {
+            setLocalValidation((current) => ({ ...current, [item.id]: messages }));
+            return;
+        }
+        setLocalValidation((current) => {
+            if (!(item.id in current))
+                return current;
+            const { [item.id]: _cleared, ...rest } = current;
+            return rest;
+        });
+        onChange({ kind: 'update', item: next, previous, field, items: nextItems });
+    };
+    const handleFieldBlur = (item) => {
+        setLocalValidation((current) => {
+            if (!(item.id in current))
+                return current;
+            const { [item.id]: _cleared, ...rest } = current;
+            return rest;
+        });
+    };
+    const handleRemove = (item) => {
+        if (!capabilities.remove)
+            return;
+        const index = items.findIndex((candidate) => candidate.id === item.id);
+        if (index < 0)
+            return;
+        const neighbor = items[index + 1] ?? items[index - 1];
+        pending.current = neighbor
+            ? { itemId: neighbor.id, control: 'remove', announce: false }
+            : { itemId: undefined, control: 'add', announce: false };
+        onChange({ kind: 'remove', item: items[index], index, items: items.filter((_, position) => position !== index) });
+    };
+    const handleAdd = () => {
+        if (!canAdd || !createItem)
+            return;
+        const item = createItem();
+        pending.current = { itemId: item.id, control: 'label', announce: false };
+        onChange({ kind: 'add', item, index: items.length, items: [...items, item] });
+    };
+    const handleDragStart = (item, event) => {
+        if (!capabilities.reorder) {
+            event.preventDefault();
+            return;
+        }
+        event.dataTransfer.setData(dragType, item.id);
+        event.dataTransfer.effectAllowed = 'move';
+        const row = event.currentTarget.closest('li');
+        if (row && typeof event.dataTransfer.setDragImage === 'function')
+            event.dataTransfer.setDragImage(row, 0, 0);
+        setDrag({ id: item.id });
+    };
+    const handleDragOver = (item, event) => {
+        if (!drag)
+            return;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = 'move';
+        const rectangle = event.currentTarget.getBoundingClientRect();
+        const position = event.clientY < rectangle.top + rectangle.height / 2 ? 'before' : 'after';
+        setDrag((current) => current && (current.overId !== item.id || current.position !== position)
+            ? { ...current, overId: item.id, position }
+            : current);
+    };
+    const handleDrop = (item, event) => {
+        if (!drag)
+            return;
+        event.preventDefault();
+        const rectangle = event.currentTarget.getBoundingClientRect();
+        const position = event.clientY < rectangle.top + rectangle.height / 2 ? 'before' : 'after';
+        const fromIndex = items.findIndex((candidate) => candidate.id === drag.id);
+        const overIndex = items.findIndex((candidate) => candidate.id === item.id);
+        setDrag(null);
+        if (fromIndex < 0 || overIndex < 0)
+            return;
+        move(items[fromIndex], resolveOrderedItemDropIndex(fromIndex, overIndex, position), 'handle');
+    };
+    const restrictions = [
+        ['add', capabilities.add],
+        ['remove', capabilities.remove],
+        ['reorder', capabilities.reorder],
+        ['label', resolveOrderedItemFieldAccess(capabilities, 'label') === 'editable'],
+        ['icon', resolveOrderedItemFieldAccess(capabilities, 'icon') === 'editable'],
+        ['destination', resolveOrderedItemFieldAccess(capabilities, 'destination') === 'editable'],
+    ].flatMap(([key, allowed]) => (!allowed && capabilities.reasons?.[key] ? [capabilities.reasons[key]] : []));
+    const mergedValidation = (item) => {
+        const local = localValidation[item.id];
+        const supplied = validation?.[item.id];
+        return local || supplied ? { ...supplied, ...local } : undefined;
+    };
+    const renderRow = (item, index, count, locked) => (jsx(OrderedItemRow, { item: item, index: index, count: count, locked: locked, capabilities: capabilities, labels: labels, destinations: destinations, validation: locked ? validation?.[item.id] : mergedValidation(item), baseId: baseId, parts: pt, renderIconField: renderIconField, isIconAvailable: isIconAvailable, iconCatalog: iconCatalog, allowedIcons: allowedIcons, iconPickerLabels: iconPickerLabels, dragging: drag?.id === item.id, dropPosition: drag?.overId === item.id && drag.id !== item.id ? drag.position : undefined, onField: handleField, onFieldBlur: handleFieldBlur, onMove: handleMove, onRemove: handleRemove, onDragStart: handleDragStart, onDragOver: handleDragOver, onDrop: handleDrop, onDragEnd: () => setDrag(null) }, item.id));
+    const fixedTitleId = `${baseId}-fixed`;
+    const localTitleId = `${baseId}-local`;
+    return (jsxs("div", { ...pt?.root, ref: rootRef, role: 'group', "aria-label": ariaLabelledBy ? undefined : ariaLabel ?? labels.localItems, "aria-labelledby": ariaLabelledBy, className: ['cratis-ordered-item-editor', pt?.root?.className, className].filter(Boolean).join(' '), onKeyDownCapture: () => { pending.current = null; }, onPointerDownCapture: () => { pending.current = null; }, onFocusCapture: () => { if (!restoring.current)
+            pending.current = null; }, "data-cratis-part": 'root', children: [fixedItems.length > 0 && (jsxs("section", { ...pt?.section, "aria-labelledby": fixedTitleId, className: `cratis-ordered-item-editor__section ${pt?.section?.className ?? ''}`, "data-cratis-part": 'section', "data-section": 'fixed', children: [jsx("h3", { ...pt?.sectionTitle, id: fixedTitleId, className: `cratis-ordered-item-editor__title ${pt?.sectionTitle?.className ?? ''}`, "data-cratis-part": 'sectionTitle', children: labels.fixedItems }), jsx("ul", { ...pt?.list, className: `cratis-ordered-item-editor__list ${pt?.list?.className ?? ''}`, "data-cratis-part": 'list', children: fixedItems.map((item, index) => renderRow(item, index, fixedItems.length, true)) })] })), jsxs("section", { ...pt?.section, "aria-labelledby": localTitleId, className: `cratis-ordered-item-editor__section ${pt?.section?.className ?? ''}`, "data-cratis-part": 'section', "data-section": 'local', children: [jsx("h3", { ...pt?.sectionTitle, id: localTitleId, className: `cratis-ordered-item-editor__title ${pt?.sectionTitle?.className ?? ''}`, "data-cratis-part": 'sectionTitle', children: labels.localItems }), items.length === 0 ? (jsx("p", { ...pt?.empty, className: `cratis-ordered-item-editor__empty ${pt?.empty?.className ?? ''}`, "data-cratis-part": 'empty', children: labels.empty })) : (jsx("ul", { ...pt?.list, className: `cratis-ordered-item-editor__list ${pt?.list?.className ?? ''}`, "data-cratis-part": 'list', children: items.map((item, index) => renderRow(item, index, items.length, false)) })), restrictions.map((reason) => (jsx("p", { ...pt?.message, className: `cratis-ordered-item__message cratis-ordered-item__message--note ${pt?.message?.className ?? ''}`, "data-cratis-part": 'message', children: reason }, reason))), capabilities.add && createItem && (jsxs(Fragment, { children: [jsx("button", { ...pt?.add, type: 'button', "aria-disabled": !canAdd || undefined, onClick: handleAdd, className: `cratis-ordered-item__button cratis-ordered-item-editor__add ${pt?.add?.className ?? ''}`, "data-cratis-part": 'add', "data-control": 'add', children: labels.add }), atMaximum && (jsx("p", { ...pt?.message, className: `cratis-ordered-item__message cratis-ordered-item__message--note ${pt?.message?.className ?? ''}`, "data-cratis-part": 'message', children: capabilities.reasons?.add ?? labels.maxItemsReached }))] }))] }), jsx("div", { ...pt?.status, role: 'status', "aria-live": 'polite', className: `cratis-ordered-item__hidden ${pt?.status?.className ?? ''}`, "data-cratis-part": 'status', children: announcement })] }));
+};
+
+export { OrderedItemEditor };
+//# sourceMappingURL=OrderedItemEditor.js.map

package/dist/esm/ConfigurationEditor/OrderedItemEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderedItemEditor.js","sources":["../../../ConfigurationEditor/OrderedItemEditor.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 {\n    useCallback,\n    useId,\n    useLayoutEffect,\n    useMemo,\n    useRef,\n    useState,\n    type DragEvent,\n    type ReactNode,\n} from 'react';\nimport type { IconPickerAllowed } from '../IconPicker/IconPickerAllowed';\nimport type { IconPickerCatalog } from '../IconPicker/IconPickerCatalog';\nimport type { IconPickerLabels } from '../IconPicker/IconPickerLabels';\nimport { isIconPickerAllowed } from '../IconPicker/isIconPickerAllowed';\nimport type { ConfigurationDestination } from './ConfigurationDestination';\nimport type { ConfigurationIconReference } from './ConfigurationIconReference';\nimport type { OrderedItem } from './OrderedItem';\nimport type { OrderedItemCapabilities } from './OrderedItemCapabilities';\nimport type { OrderedItemEditorParts } from './OrderedItemEditorParts';\nimport type { OrderedItemField } from './OrderedItemField';\nimport type { OrderedItemIconFieldProps } from './OrderedItemIconFieldProps';\nimport type { OrderedItemLabels } from './OrderedItemLabels';\nimport type { OrderedItemProposal } from './OrderedItemProposal';\nimport type { OrderedItemValidation } from './OrderedItemValidation';\nimport { OrderedItemRow } from './OrderedItemRow';\nimport { moveOrderedItem } from './moveOrderedItem';\nimport { resolveOrderedItemFieldAccess } from './resolveOrderedItemFieldAccess';\nimport { resolveOrderedItemDropIndex } from './resolveOrderedItemDropIndex';\nimport { resolveOrderedItemLabels } from './resolveOrderedItemLabels';\nimport { hasOrderedItemValidation, validateOrderedItem } from './validateOrderedItem';\n\nconst dragType = 'application/x-cratis-ordered-item';\n\n/** Props for the {@link OrderedItemEditor} component. */\nexport interface OrderedItemEditorProps<TItem extends OrderedItem = OrderedItem> {\n    /** The configurable items, in order. The editor is controlled: it shows exactly these. */\n    items: ReadonlyArray<TItem>;\n\n    /** Fixed (inherited) items. Shown separately and locked: they have no controls and are never part of a proposal. */\n    fixedItems?: ReadonlyArray<TItem>;\n\n    /** What the host allows. Restricted controls are not offered and restricted proposals are never emitted. */\n    capabilities: OrderedItemCapabilities;\n\n    /**\n     * Receives a validated, permitted proposal. Apply it by passing new `items`; ignore it to cancel.\n     * The host remains responsible for authoritative permission checks and persistence.\n     */\n    onChange: (proposal: OrderedItemProposal<TItem>) => void;\n\n    /** The destinations offered by the destination field. */\n    destinations?: ReadonlyArray<ConfigurationDestination>;\n\n    /** Creates the item an add proposal carries. The host assigns its stable id. Without it, adding is unavailable. */\n    createItem?: () => TItem;\n\n    /**\n     * The icons the host offers, as an {@link IconPicker} catalog. When supplied, the icon field is the\n     * Components icon picker; there is no separate icon grid. Icon references are qualified\n     * `{ library, key, variant? }` identities, never names or markup.\n     */\n    iconCatalog?: IconPickerCatalog;\n\n    /** Restricts which catalog icons can be chosen. Other icons are listed but cannot be selected. */\n    allowedIcons?: IconPickerAllowed;\n\n    /** Overrides for the icon picker's own labels. */\n    iconPickerLabels?: IconPickerLabels;\n\n    /**\n     * Overrides the icon field with the host's own chooser, taking precedence over `iconCatalog`.\n     * Without it and without an `iconCatalog`, the icon is shown as text.\n     */\n    renderIconField?: (props: OrderedItemIconFieldProps<TItem>) => ReactNode;\n\n    /** Tells whether the host's catalog can still supply an icon. An unavailable icon is flagged in text. */\n    isIconAvailable?: (icon: ConfigurationIconReference) => boolean;\n\n    /** The host's validation rules, run on the item as it would be. A message blocks the proposal. */\n    validate?: (item: TItem, items: ReadonlyArray<TItem>) => OrderedItemValidation | undefined;\n\n    /** Validation feedback from the host, by item id, for example from a server-side check. */\n    validation?: Readonly<Record<string, OrderedItemValidation>>;\n\n    /** Overrides for the editor's strings. Unset fields fall back to English. */\n    labels?: OrderedItemLabels;\n\n    /** The editor's accessible name. */\n    'aria-label'?: string;\n\n    /** The id of the element naming the editor. */\n    'aria-labelledby'?: string;\n\n    /** Extra class name on the editor's root. */\n    className?: string;\n\n    /** Pass-through attributes for the editor's stable parts. */\n    pt?: OrderedItemEditorParts;\n}\n\ninterface PendingFocus {\n    itemId: string | undefined;\n    control: string;\n    announce: boolean;\n}\n\ninterface DragState {\n    id: string;\n    overId?: string;\n    position?: 'before' | 'after';\n}\n\nconst sameIcon = (left: ConfigurationIconReference | undefined, right: ConfigurationIconReference | undefined) =>\n    left === right ||\n    (left !== undefined && right !== undefined && left.library === right.library && left.key === right.key && left.variant === right.variant);\n\nconst withField = <TItem extends OrderedItem>(\n    item: TItem,\n    field: OrderedItemField,\n    value: string | ConfigurationIconReference | undefined,\n): TItem => {\n    const next = { ...item, [field]: value };\n    if (value === undefined) delete (next as Record<string, unknown>)[field];\n    return next;\n};\n\n/**\n * An ordered collection editor for configuring a component such as a navigation: labeled items with\n * an icon and a destination, that can be added, removed and reordered.\n *\n * The editor is controlled and policy-free. The host says what is allowed through `capabilities`,\n * supplies the destinations and the icon chooser, and receives validated proposals through\n * `onChange`. Fixed items are listed separately and locked, in text as well as in state, so the\n * difference never rests on opacity. Reordering works by dragging the handle, with the handle's\n * arrow keys, and with labeled move-up and move-down buttons; focus follows the item that moved.\n */\nexport const OrderedItemEditor = <TItem extends OrderedItem = OrderedItem>({\n    items,\n    fixedItems = [],\n    capabilities,\n    onChange,\n    destinations = [],\n    createItem,\n    renderIconField,\n    isIconAvailable,\n    iconCatalog,\n    allowedIcons,\n    iconPickerLabels,\n    validate,\n    validation,\n    labels: suppliedLabels,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    className,\n    pt,\n}: OrderedItemEditorProps<TItem>) => {\n    const labels = useMemo(() => resolveOrderedItemLabels(suppliedLabels), [suppliedLabels]);\n    const baseId = useId();\n    const rootRef = useRef<HTMLDivElement>(null);\n    const pending = useRef<PendingFocus | null>(null);\n    const restoring = useRef(false);\n    const [localValidation, setLocalValidation] = useState<Record<string, OrderedItemValidation>>({});\n    const [drag, setDrag] = useState<DragState | null>(null);\n    const [announcement, setAnnouncement] = useState('');\n\n    const canAdd =\n        capabilities.add &&\n        createItem !== undefined &&\n        (capabilities.maxItems === undefined || items.length < capabilities.maxItems);\n    const atMaximum = capabilities.add && capabilities.maxItems !== undefined && items.length >= capabilities.maxItems;\n\n    useLayoutEffect(() => {\n        const target = pending.current;\n        const root = rootRef.current;\n        if (!target || !root) return;\n        const row = target.itemId === undefined\n            ? root\n            : Array.from(root.querySelectorAll<HTMLElement>('[data-item-id]')).find((element) => element.dataset.itemId === target.itemId);\n        if (!row) return;\n        const control = Array.from(row.querySelectorAll<HTMLElement>('[data-control]')).find(\n            (element) => element.dataset.control === target.control,\n        );\n        const focusable = control ?? (target.itemId === undefined ? undefined : row);\n        if (!focusable) return;\n        restoring.current = true;\n        focusable.focus();\n        restoring.current = false;\n        pending.current = null;\n        if (target.announce && target.itemId !== undefined) {\n            const index = items.findIndex((item) => item.id === target.itemId);\n            if (index >= 0) setAnnouncement(labels.moved(items[index].label || labels.untitled, index + 1, items.length));\n        }\n    });\n\n    const move = useCallback((item: TItem, toIndex: number, control: string) => {\n        if (!capabilities.reorder) return;\n        const fromIndex = items.findIndex((candidate) => candidate.id === item.id);\n        if (fromIndex < 0 || toIndex < 0 || toIndex >= items.length || toIndex === fromIndex) return;\n        pending.current = { itemId: item.id, control, announce: true };\n        onChange({ kind: 'move', item: items[fromIndex], fromIndex, toIndex, items: moveOrderedItem(items, fromIndex, toIndex) });\n    }, [capabilities.reorder, items, onChange]);\n\n    const handleMove = (item: TItem, delta: -1 | 1, control: string) => {\n        const index = items.findIndex((candidate) => candidate.id === item.id);\n        if (index >= 0) move(item, index + delta, control);\n    };\n\n    const handleField = (item: TItem, field: OrderedItemField, value: string | ConfigurationIconReference | undefined) => {\n        if (resolveOrderedItemFieldAccess(capabilities, field) !== 'editable') return;\n        if (field === 'icon' && allowedIcons !== undefined && iconCatalog !== undefined && value !== undefined) {\n            const picked = value as ConfigurationIconReference;\n            const entry = iconCatalog.icons.find(\n                (candidate) => candidate.library === picked.library && candidate.key === picked.key && candidate.variant === picked.variant,\n            );\n            if (entry !== undefined && !isIconPickerAllowed(entry, allowedIcons)) return;\n        }\n        const index = items.findIndex((candidate) => candidate.id === item.id);\n        if (index < 0) return;\n        const previous = items[index];\n        const unchanged = field === 'icon'\n            ? sameIcon(previous.icon, value as ConfigurationIconReference | undefined)\n            : previous[field] === value;\n        if (unchanged) return;\n        const next = withField(previous, field, value);\n        const nextItems = items.map((candidate, position) => (position === index ? next : candidate));\n        const messages = validateOrderedItem(next, nextItems, capabilities, labels, validate);\n        if (hasOrderedItemValidation(messages)) {\n            setLocalValidation((current) => ({ ...current, [item.id]: messages }));\n            return;\n        }\n        setLocalValidation((current) => {\n            if (!(item.id in current)) return current;\n            const { [item.id]: _cleared, ...rest } = current;\n            return rest;\n        });\n        onChange({ kind: 'update', item: next, previous, field, items: nextItems });\n    };\n\n    const handleFieldBlur = (item: TItem) => {\n        setLocalValidation((current) => {\n            if (!(item.id in current)) return current;\n            const { [item.id]: _cleared, ...rest } = current;\n            return rest;\n        });\n    };\n\n    const handleRemove = (item: TItem) => {\n        if (!capabilities.remove) return;\n        const index = items.findIndex((candidate) => candidate.id === item.id);\n        if (index < 0) return;\n        const neighbor = items[index + 1] ?? items[index - 1];\n        pending.current = neighbor\n            ? { itemId: neighbor.id, control: 'remove', announce: false }\n            : { itemId: undefined, control: 'add', announce: false };\n        onChange({ kind: 'remove', item: items[index], index, items: items.filter((_, position) => position !== index) });\n    };\n\n    const handleAdd = () => {\n        if (!canAdd || !createItem) return;\n        const item = createItem();\n        pending.current = { itemId: item.id, control: 'label', announce: false };\n        onChange({ kind: 'add', item, index: items.length, items: [...items, item] });\n    };\n\n    const handleDragStart = (item: TItem, event: DragEvent<HTMLButtonElement>) => {\n        if (!capabilities.reorder) {\n            event.preventDefault();\n            return;\n        }\n        event.dataTransfer.setData(dragType, item.id);\n        event.dataTransfer.effectAllowed = 'move';\n        const row = event.currentTarget.closest('li');\n        if (row && typeof event.dataTransfer.setDragImage === 'function') event.dataTransfer.setDragImage(row, 0, 0);\n        setDrag({ id: item.id });\n    };\n\n    const handleDragOver = (item: TItem, event: DragEvent<HTMLLIElement>) => {\n        if (!drag) return;\n        event.preventDefault();\n        event.dataTransfer.dropEffect = 'move';\n        const rectangle = event.currentTarget.getBoundingClientRect();\n        const position = event.clientY < rectangle.top + rectangle.height / 2 ? 'before' : 'after';\n        setDrag((current) =>\n            current && (current.overId !== item.id || current.position !== position)\n                ? { ...current, overId: item.id, position }\n                : current,\n        );\n    };\n\n    const handleDrop = (item: TItem, event: DragEvent<HTMLLIElement>) => {\n        if (!drag) return;\n        event.preventDefault();\n        const rectangle = event.currentTarget.getBoundingClientRect();\n        const position = event.clientY < rectangle.top + rectangle.height / 2 ? 'before' : 'after';\n        const fromIndex = items.findIndex((candidate) => candidate.id === drag.id);\n        const overIndex = items.findIndex((candidate) => candidate.id === item.id);\n        setDrag(null);\n        if (fromIndex < 0 || overIndex < 0) return;\n        move(items[fromIndex], resolveOrderedItemDropIndex(fromIndex, overIndex, position), 'handle');\n    };\n\n    const restrictions = (\n        [\n            ['add', capabilities.add],\n            ['remove', capabilities.remove],\n            ['reorder', capabilities.reorder],\n            ['label', resolveOrderedItemFieldAccess(capabilities, 'label') === 'editable'],\n            ['icon', resolveOrderedItemFieldAccess(capabilities, 'icon') === 'editable'],\n            ['destination', resolveOrderedItemFieldAccess(capabilities, 'destination') === 'editable'],\n        ] as const\n    ).flatMap(([key, allowed]) => (!allowed && capabilities.reasons?.[key] ? [capabilities.reasons[key] as string] : []));\n\n    const mergedValidation = (item: TItem): OrderedItemValidation | undefined => {\n        const local = localValidation[item.id];\n        const supplied = validation?.[item.id];\n        return local || supplied ? { ...supplied, ...local } : undefined;\n    };\n\n    const renderRow = (item: TItem, index: number, count: number, locked: boolean) => (\n        <OrderedItemRow\n            key={item.id}\n            item={item}\n            index={index}\n            count={count}\n            locked={locked}\n            capabilities={capabilities}\n            labels={labels}\n            destinations={destinations}\n            validation={locked ? validation?.[item.id] : mergedValidation(item)}\n            baseId={baseId}\n            parts={pt}\n            renderIconField={renderIconField}\n            isIconAvailable={isIconAvailable}\n            iconCatalog={iconCatalog}\n            allowedIcons={allowedIcons}\n            iconPickerLabels={iconPickerLabels}\n            dragging={drag?.id === item.id}\n            dropPosition={drag?.overId === item.id && drag.id !== item.id ? drag.position : undefined}\n            onField={handleField}\n            onFieldBlur={handleFieldBlur}\n            onMove={handleMove}\n            onRemove={handleRemove}\n            onDragStart={handleDragStart}\n            onDragOver={handleDragOver}\n            onDrop={handleDrop}\n            onDragEnd={() => setDrag(null)}\n        />\n    );\n\n    const fixedTitleId = `${baseId}-fixed`;\n    const localTitleId = `${baseId}-local`;\n\n    return (\n        <div\n            {...pt?.root}\n            ref={rootRef}\n            role='group'\n            aria-label={ariaLabelledBy ? undefined : ariaLabel ?? labels.localItems}\n            aria-labelledby={ariaLabelledBy}\n            className={['cratis-ordered-item-editor', pt?.root?.className, className].filter(Boolean).join(' ')}\n            onKeyDownCapture={() => { pending.current = null; }}\n            onPointerDownCapture={() => { pending.current = null; }}\n            onFocusCapture={() => { if (!restoring.current) pending.current = null; }}\n            data-cratis-part='root'\n        >\n            {fixedItems.length > 0 && (\n                <section\n                    {...pt?.section}\n                    aria-labelledby={fixedTitleId}\n                    className={`cratis-ordered-item-editor__section ${pt?.section?.className ?? ''}`}\n                    data-cratis-part='section'\n                    data-section='fixed'\n                >\n                    <h3 {...pt?.sectionTitle} id={fixedTitleId} className={`cratis-ordered-item-editor__title ${pt?.sectionTitle?.className ?? ''}`} data-cratis-part='sectionTitle'>\n                        {labels.fixedItems}\n                    </h3>\n                    <ul {...pt?.list} className={`cratis-ordered-item-editor__list ${pt?.list?.className ?? ''}`} data-cratis-part='list'>\n                        {fixedItems.map((item, index) => renderRow(item, index, fixedItems.length, true))}\n                    </ul>\n                </section>\n            )}\n            <section\n                {...pt?.section}\n                aria-labelledby={localTitleId}\n                className={`cratis-ordered-item-editor__section ${pt?.section?.className ?? ''}`}\n                data-cratis-part='section'\n                data-section='local'\n            >\n                <h3 {...pt?.sectionTitle} id={localTitleId} className={`cratis-ordered-item-editor__title ${pt?.sectionTitle?.className ?? ''}`} data-cratis-part='sectionTitle'>\n                    {labels.localItems}\n                </h3>\n                {items.length === 0 ? (\n                    <p {...pt?.empty} className={`cratis-ordered-item-editor__empty ${pt?.empty?.className ?? ''}`} data-cratis-part='empty'>\n                        {labels.empty}\n                    </p>\n                ) : (\n                    <ul {...pt?.list} className={`cratis-ordered-item-editor__list ${pt?.list?.className ?? ''}`} data-cratis-part='list'>\n                        {items.map((item, index) => renderRow(item, index, items.length, false))}\n                    </ul>\n                )}\n                {restrictions.map((reason) => (\n                    <p key={reason} {...pt?.message} className={`cratis-ordered-item__message cratis-ordered-item__message--note ${pt?.message?.className ?? ''}`} data-cratis-part='message'>\n                        {reason}\n                    </p>\n                ))}\n                {capabilities.add && createItem && (\n                    <>\n                        <button\n                            {...pt?.add}\n                            type='button'\n                            aria-disabled={!canAdd || undefined}\n                            onClick={handleAdd}\n                            className={`cratis-ordered-item__button cratis-ordered-item-editor__add ${pt?.add?.className ?? ''}`}\n                            data-cratis-part='add'\n                            data-control='add'\n                        >\n                            {labels.add}\n                        </button>\n                        {atMaximum && (\n                            <p {...pt?.message} className={`cratis-ordered-item__message cratis-ordered-item__message--note ${pt?.message?.className ?? ''}`} data-cratis-part='message'>\n                                {capabilities.reasons?.add ?? labels.maxItemsReached}\n                            </p>\n                        )}\n                    </>\n                )}\n            </section>\n            <div\n                {...pt?.status}\n                role='status'\n                aria-live='polite'\n                className={`cratis-ordered-item__hidden ${pt?.status?.className ?? ''}`}\n                data-cratis-part='status'\n            >\n                {announcement}\n            </div>\n        </div>\n    );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/ConfigurationEditor/OrderedItemEditorParts.d.ts

@@ -0,0 +1,43 @@
+import type { ButtonHTMLAttributes, InputHTMLAttributes, SelectHTMLAttributes } from 'react';
+import type { ConfigurationEditorPartAttributes } from './ConfigurationEditorPartAttributes.js';
+/**
+ * Stable Cratis-owned parts for styling an {@link OrderedItemEditor}. Each is marked with a matching
+ * `data-cratis-part` attribute and receives what is passed here; the editor's own wiring wins.
+ */
+export interface OrderedItemEditorParts {
+    /** The editor root. */
+    root?: ConfigurationEditorPartAttributes<HTMLDivElement>;
+    /** A section of items: the fixed items or the configurable items. Carries `data-section`. */
+    section?: ConfigurationEditorPartAttributes<HTMLElement>;
+    /** A section's heading. */
+    sectionTitle?: ConfigurationEditorPartAttributes<HTMLHeadingElement>;
+    /** A section's list of items. */
+    list?: ConfigurationEditorPartAttributes<HTMLUListElement>;
+    /** One item. Carries `data-locked`, `data-dragging` and `data-drop-position`. */
+    item?: ConfigurationEditorPartAttributes<HTMLLIElement>;
+    /** The control that starts a drag and reorders with the arrow keys. */
+    handle?: ButtonHTMLAttributes<HTMLButtonElement>;
+    /** The move-up action. */
+    moveUp?: ButtonHTMLAttributes<HTMLButtonElement>;
+    /** The move-down action. */
+    moveDown?: ButtonHTMLAttributes<HTMLButtonElement>;
+    /** The label input. */
+    label?: InputHTMLAttributes<HTMLInputElement>;
+    /** The wrapper of the icon field. Carries `data-unavailable` for an icon the catalog cannot supply. */
+    icon?: ConfigurationEditorPartAttributes<HTMLDivElement>;
+    /** The destination select. */
+    destination?: SelectHTMLAttributes<HTMLSelectElement>;
+    /** The remove action. */
+    remove?: ButtonHTMLAttributes<HTMLButtonElement>;
+    /** The add action. */
+    add?: ButtonHTMLAttributes<HTMLButtonElement>;
+    /** A validation message or a reason a control is restricted. */
+    message?: ConfigurationEditorPartAttributes<HTMLParagraphElement>;
+    /** The text that says an item is locked. */
+    state?: ConfigurationEditorPartAttributes<HTMLSpanElement>;
+    /** The text shown for an empty collection. */
+    empty?: ConfigurationEditorPartAttributes<HTMLParagraphElement>;
+    /** The live region that announces a move. */
+    status?: ConfigurationEditorPartAttributes<HTMLDivElement>;
+}
+//# sourceMappingURL=OrderedItemEditorParts.d.ts.map

package/dist/esm/ConfigurationEditor/OrderedItemEditorParts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderedItemEditorParts.d.ts","sourceRoot":"","sources":["../../../ConfigurationEditor/OrderedItemEditorParts.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAC7F,OAAO,KAAK,EAAE,iCAAiC,EAAE,MAAM,wCAAqC,CAAC;AAE7F;;;GAGG;AACH,MAAM,WAAW,sBAAsB;IACnC,uBAAuB;IACvB,IAAI,CAAC,EAAE,iCAAiC,CAAC,cAAc,CAAC,CAAC;IAEzD,6FAA6F;IAC7F,OAAO,CAAC,EAAE,iCAAiC,CAAC,WAAW,CAAC,CAAC;IAEzD,2BAA2B;IAC3B,YAAY,CAAC,EAAE,iCAAiC,CAAC,kBAAkB,CAAC,CAAC;IAErE,iCAAiC;IACjC,IAAI,CAAC,EAAE,iCAAiC,CAAC,gBAAgB,CAAC,CAAC;IAE3D,iFAAiF;IACjF,IAAI,CAAC,EAAE,iCAAiC,CAAC,aAAa,CAAC,CAAC;IAExD,uEAAuE;IACvE,MAAM,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IAEjD,0BAA0B;IAC1B,MAAM,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IAEjD,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IAEnD,uBAAuB;IACvB,KAAK,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAE9C,uGAAuG;IACvG,IAAI,CAAC,EAAE,iCAAiC,CAAC,cAAc,CAAC,CAAC;IAEzD,8BAA8B;IAC9B,WAAW,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IAEtD,yBAAyB;IACzB,MAAM,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IAEjD,sBAAsB;IACtB,GAAG,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IAE9C,gEAAgE;IAChE,OAAO,CAAC,EAAE,iCAAiC,CAAC,oBAAoB,CAAC,CAAC;IAElE,4CAA4C;IAC5C,KAAK,CAAC,EAAE,iCAAiC,CAAC,eAAe,CAAC,CAAC;IAE3D,8CAA8C;IAC9C,KAAK,CAAC,EAAE,iCAAiC,CAAC,oBAAoB,CAAC,CAAC;IAEhE,6CAA6C;IAC7C,MAAM,CAAC,EAAE,iCAAiC,CAAC,cAAc,CAAC,CAAC;CAC9D"}

package/dist/esm/ConfigurationEditor/OrderedItemEditorParts.js

@@ -0,0 +1,4 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+export {};
+//# sourceMappingURL=OrderedItemEditorParts.js.map

package/dist/esm/ConfigurationEditor/OrderedItemEditorParts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderedItemEditorParts.js","sourceRoot":"","sources":["../../../ConfigurationEditor/OrderedItemEditorParts.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,qGAAqG","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 { ButtonHTMLAttributes, InputHTMLAttributes, SelectHTMLAttributes } from 'react';\nimport type { ConfigurationEditorPartAttributes } from './ConfigurationEditorPartAttributes';\n\n/**\n * Stable Cratis-owned parts for styling an {@link OrderedItemEditor}. Each is marked with a matching\n * `data-cratis-part` attribute and receives what is passed here; the editor's own wiring wins.\n */\nexport interface OrderedItemEditorParts {\n    /** The editor root. */\n    root?: ConfigurationEditorPartAttributes<HTMLDivElement>;\n\n    /** A section of items: the fixed items or the configurable items. Carries `data-section`. */\n    section?: ConfigurationEditorPartAttributes<HTMLElement>;\n\n    /** A section's heading. */\n    sectionTitle?: ConfigurationEditorPartAttributes<HTMLHeadingElement>;\n\n    /** A section's list of items. */\n    list?: ConfigurationEditorPartAttributes<HTMLUListElement>;\n\n    /** One item. Carries `data-locked`, `data-dragging` and `data-drop-position`. */\n    item?: ConfigurationEditorPartAttributes<HTMLLIElement>;\n\n    /** The control that starts a drag and reorders with the arrow keys. */\n    handle?: ButtonHTMLAttributes<HTMLButtonElement>;\n\n    /** The move-up action. */\n    moveUp?: ButtonHTMLAttributes<HTMLButtonElement>;\n\n    /** The move-down action. */\n    moveDown?: ButtonHTMLAttributes<HTMLButtonElement>;\n\n    /** The label input. */\n    label?: InputHTMLAttributes<HTMLInputElement>;\n\n    /** The wrapper of the icon field. Carries `data-unavailable` for an icon the catalog cannot supply. */\n    icon?: ConfigurationEditorPartAttributes<HTMLDivElement>;\n\n    /** The destination select. */\n    destination?: SelectHTMLAttributes<HTMLSelectElement>;\n\n    /** The remove action. */\n    remove?: ButtonHTMLAttributes<HTMLButtonElement>;\n\n    /** The add action. */\n    add?: ButtonHTMLAttributes<HTMLButtonElement>;\n\n    /** A validation message or a reason a control is restricted. */\n    message?: ConfigurationEditorPartAttributes<HTMLParagraphElement>;\n\n    /** The text that says an item is locked. */\n    state?: ConfigurationEditorPartAttributes<HTMLSpanElement>;\n\n    /** The text shown for an empty collection. */\n    empty?: ConfigurationEditorPartAttributes<HTMLParagraphElement>;\n\n    /** The live region that announces a move. */\n    status?: ConfigurationEditorPartAttributes<HTMLDivElement>;\n}\n"]}

package/dist/esm/ConfigurationEditor/OrderedItemField.d.ts

@@ -0,0 +1,3 @@
+/** The fields of an {@link OrderedItem} the editor can expose. */
+export type OrderedItemField = 'label' | 'icon' | 'destination';
+//# sourceMappingURL=OrderedItemField.d.ts.map

package/dist/esm/ConfigurationEditor/OrderedItemField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderedItemField.d.ts","sourceRoot":"","sources":["../../../ConfigurationEditor/OrderedItemField.ts"],"names":[],"mappings":"AAGA,kEAAkE;AAClE,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,MAAM,GAAG,aAAa,CAAC"}

package/dist/esm/ConfigurationEditor/OrderedItemField.js

@@ -0,0 +1,4 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+export {};
+//# sourceMappingURL=OrderedItemField.js.map

package/dist/esm/ConfigurationEditor/OrderedItemField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderedItemField.js","sourceRoot":"","sources":["../../../ConfigurationEditor/OrderedItemField.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,qGAAqG","sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\n/** The fields of an {@link OrderedItem} the editor can expose. */\nexport type OrderedItemField = 'label' | 'icon' | 'destination';\n"]}

package/dist/esm/ConfigurationEditor/OrderedItemFieldAccess.d.ts

@@ -0,0 +1,9 @@
+/**
+ * What a host lets a person do with one field.
+ *
+ * - `'editable'` — the field has an input.
+ * - `'readonly'` — the value is shown as text and cannot change.
+ * - `'hidden'` — the field is not shown. This is also the meaning of a field the host leaves out.
+ */
+export type OrderedItemFieldAccess = 'editable' | 'readonly' | 'hidden';
+//# sourceMappingURL=OrderedItemFieldAccess.d.ts.map

package/dist/esm/ConfigurationEditor/OrderedItemFieldAccess.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderedItemFieldAccess.d.ts","sourceRoot":"","sources":["../../../ConfigurationEditor/OrderedItemFieldAccess.ts"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,MAAM,MAAM,sBAAsB,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAC"}

package/dist/esm/ConfigurationEditor/OrderedItemFieldAccess.js

@@ -0,0 +1,4 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+export {};
+//# sourceMappingURL=OrderedItemFieldAccess.js.map

package/dist/esm/ConfigurationEditor/OrderedItemFieldAccess.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderedItemFieldAccess.js","sourceRoot":"","sources":["../../../ConfigurationEditor/OrderedItemFieldAccess.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,qGAAqG","sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\n/**\n * What a host lets a person do with one field.\n *\n * - `'editable'` — the field has an input.\n * - `'readonly'` — the value is shown as text and cannot change.\n * - `'hidden'` — the field is not shown. This is also the meaning of a field the host leaves out.\n */\nexport type OrderedItemFieldAccess = 'editable' | 'readonly' | 'hidden';\n"]}

package/dist/esm/ConfigurationEditor/OrderedItemIconField.d.ts

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+import type { IconPickerAllowed } from '../IconPicker/IconPickerAllowed.js';
+import type { IconPickerCatalog } from '../IconPicker/IconPickerCatalog.js';
+import type { IconPickerLabels } from '../IconPicker/IconPickerLabels.js';
+import type { ConfigurationIconReference } from './ConfigurationIconReference.js';
+import type { OrderedItem } from './OrderedItem.js';
+import type { OrderedItemEditorParts } from './OrderedItemEditorParts.js';
+import type { OrderedItemIconFieldProps } from './OrderedItemIconFieldProps.js';
+import type { OrderedItemLabels } from './OrderedItemLabels.js';
+interface IconFieldProps<TItem extends OrderedItem> {
+    item: TItem;
+    editable: boolean;
+    itemName: string;
+    labels: Required<OrderedItemLabels>;
+    message: string | undefined;
+    messageId: string;
+    parts: OrderedItemEditorParts | undefined;
+    renderIconField?: (props: OrderedItemIconFieldProps<TItem>) => ReactNode;
+    isIconAvailable?: (icon: ConfigurationIconReference) => boolean;
+    iconCatalog?: IconPickerCatalog;
+    allowedIcons?: IconPickerAllowed;
+    iconPickerLabels?: IconPickerLabels;
+    onChange: (icon: ConfigurationIconReference) => void;
+}
+/**
+ * The icon field of one item. `renderIconField` overrides everything; otherwise the Components
+ * {@link IconPicker} is used when the host supplies an `iconCatalog`. With neither, the icon is
+ * shown as text, because choosing an icon needs the host's catalog.
+ */
+export declare const OrderedItemIconField: <TItem extends OrderedItem>({ item, editable, itemName, labels, message, messageId, parts, renderIconField, isIconAvailable, iconCatalog, allowedIcons, iconPickerLabels, onChange, }: IconFieldProps<TItem>) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=OrderedItemIconField.d.ts.map

package/dist/esm/ConfigurationEditor/OrderedItemIconField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderedItemIconField.d.ts","sourceRoot":"","sources":["../../../ConfigurationEditor/OrderedItemIconField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oCAAiC,CAAC;AACzE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oCAAiC,CAAC;AACzE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mCAAgC,CAAC;AACvE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,iCAA8B,CAAC;AAC/E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAe,CAAC;AACjD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,6BAA0B,CAAC;AACvE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gCAA6B,CAAC;AAC7E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAqB,CAAC;AAE7D,UAAU,cAAc,CAAC,KAAK,SAAS,WAAW;IAC9C,IAAI,EAAE,KAAK,CAAC;IACZ,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAAC;IACpC,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,sBAAsB,GAAG,SAAS,CAAC;IAC1C,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,yBAAyB,CAAC,KAAK,CAAC,KAAK,SAAS,CAAC;IACzE,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,0BAA0B,KAAK,OAAO,CAAC;IAChE,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,QAAQ,EAAE,CAAC,IAAI,EAAE,0BAA0B,KAAK,IAAI,CAAC;CACxD;AAKD;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAAI,KAAK,SAAS,WAAW,6JAc3D,cAAc,CAAC,KAAK,CAAC,gCA8DvB,CAAC"}

package/dist/esm/ConfigurationEditor/OrderedItemIconField.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { IconPicker } from '../IconPicker/IconPicker.js';
+
+const describe = (icon) => `${icon.library}/${icon.key}${icon.variant ? `:${icon.variant}` : ''}`;
+const OrderedItemIconField = ({ item, editable, itemName, labels, message, messageId, parts, renderIconField, isIconAvailable, iconCatalog, allowedIcons, iconPickerLabels, onChange, }) => {
+    const unavailable = item.icon !== undefined && isIconAvailable?.(item.icon) === false;
+    const feedback = message ?? (unavailable ? labels.iconUnavailable : undefined);
+    const accessibleName = `${labels.iconField}: ${itemName}`;
+    if (renderIconField === undefined && iconCatalog !== undefined) {
+        const pickerMessage = message ?? (unavailable ? labels.iconUnavailable : undefined);
+        return (jsx("div", { ...parts?.icon, className: `cratis-ordered-item__icon ${parts?.icon?.className ?? ''}`, "data-cratis-part": 'icon', "data-control": 'icon', "data-unavailable": unavailable || undefined, children: jsx(IconPicker, { value: item.icon, onChange: onChange, catalog: iconCatalog, allowed: allowedIcons, readOnly: !editable, validationMessage: pickerMessage, labels: iconPickerLabels, "aria-label": accessibleName }) }));
+    }
+    return (jsxs("div", { ...parts?.icon, className: `cratis-ordered-item__icon ${parts?.icon?.className ?? ''}`, "data-cratis-part": 'icon', "data-control": 'icon', "data-unavailable": unavailable || undefined, children: [renderIconField ? (renderIconField({
+                item,
+                value: item.icon,
+                onChange,
+                readOnly: !editable,
+                'aria-label': accessibleName,
+                'aria-describedby': feedback ? messageId : undefined,
+                invalid: feedback !== undefined,
+                validationMessage: feedback,
+            })) : (jsxs("span", { className: 'cratis-ordered-item__text', children: [jsxs("span", { className: 'cratis-ordered-item__hidden', children: [accessibleName, ": "] }), item.icon ? describe(item.icon) : labels.noIcon] })), feedback && (jsx("p", { ...parts?.message, id: messageId, role: 'alert', className: `cratis-ordered-item__message ${parts?.message?.className ?? ''}`, "data-cratis-part": 'message', "data-invalid": true, children: feedback }))] }));
+};
+
+export { OrderedItemIconField };
+//# sourceMappingURL=OrderedItemIconField.js.map

package/dist/esm/ConfigurationEditor/OrderedItemIconField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderedItemIconField.js","sources":["../../../ConfigurationEditor/OrderedItemIconField.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 { ReactNode } from 'react';\nimport { IconPicker } from '../IconPicker/IconPicker';\nimport type { IconPickerAllowed } from '../IconPicker/IconPickerAllowed';\nimport type { IconPickerCatalog } from '../IconPicker/IconPickerCatalog';\nimport type { IconPickerLabels } from '../IconPicker/IconPickerLabels';\nimport type { ConfigurationIconReference } from './ConfigurationIconReference';\nimport type { OrderedItem } from './OrderedItem';\nimport type { OrderedItemEditorParts } from './OrderedItemEditorParts';\nimport type { OrderedItemIconFieldProps } from './OrderedItemIconFieldProps';\nimport type { OrderedItemLabels } from './OrderedItemLabels';\n\ninterface IconFieldProps<TItem extends OrderedItem> {\n    item: TItem;\n    editable: boolean;\n    itemName: string;\n    labels: Required<OrderedItemLabels>;\n    message: string | undefined;\n    messageId: string;\n    parts: OrderedItemEditorParts | undefined;\n    renderIconField?: (props: OrderedItemIconFieldProps<TItem>) => ReactNode;\n    isIconAvailable?: (icon: ConfigurationIconReference) => boolean;\n    iconCatalog?: IconPickerCatalog;\n    allowedIcons?: IconPickerAllowed;\n    iconPickerLabels?: IconPickerLabels;\n    onChange: (icon: ConfigurationIconReference) => void;\n}\n\nconst describe = (icon: ConfigurationIconReference): string =>\n    `${icon.library}/${icon.key}${icon.variant ? `:${icon.variant}` : ''}`;\n\n/**\n * The icon field of one item. `renderIconField` overrides everything; otherwise the Components\n * {@link IconPicker} is used when the host supplies an `iconCatalog`. With neither, the icon is\n * shown as text, because choosing an icon needs the host's catalog.\n */\nexport const OrderedItemIconField = <TItem extends OrderedItem>({\n    item,\n    editable,\n    itemName,\n    labels,\n    message,\n    messageId,\n    parts,\n    renderIconField,\n    isIconAvailable,\n    iconCatalog,\n    allowedIcons,\n    iconPickerLabels,\n    onChange,\n}: IconFieldProps<TItem>) => {\n    const unavailable = item.icon !== undefined && isIconAvailable?.(item.icon) === false;\n    const feedback = message ?? (unavailable ? labels.iconUnavailable : undefined);\n    const accessibleName = `${labels.iconField}: ${itemName}`;\n\n    if (renderIconField === undefined && iconCatalog !== undefined) {\n        // The picker renders its own validation message under the trigger, so none is added here.\n        const pickerMessage = message ?? (unavailable ? labels.iconUnavailable : undefined);\n        return (\n            <div\n                {...parts?.icon}\n                className={`cratis-ordered-item__icon ${parts?.icon?.className ?? ''}`}\n                data-cratis-part='icon'\n                data-control='icon'\n                data-unavailable={unavailable || undefined}\n            >\n                <IconPicker\n                    value={item.icon}\n                    onChange={onChange}\n                    catalog={iconCatalog}\n                    allowed={allowedIcons}\n                    readOnly={!editable}\n                    validationMessage={pickerMessage}\n                    labels={iconPickerLabels}\n                    aria-label={accessibleName}\n                />\n            </div>\n        );\n    }\n\n    return (\n        <div\n            {...parts?.icon}\n            className={`cratis-ordered-item__icon ${parts?.icon?.className ?? ''}`}\n            data-cratis-part='icon'\n            data-control='icon'\n            data-unavailable={unavailable || undefined}\n        >\n            {renderIconField ? (\n                renderIconField({\n                    item,\n                    value: item.icon,\n                    onChange,\n                    readOnly: !editable,\n                    'aria-label': accessibleName,\n                    'aria-describedby': feedback ? messageId : undefined,\n                    invalid: feedback !== undefined,\n                    validationMessage: feedback,\n                })\n            ) : (\n                <span className='cratis-ordered-item__text'>\n                    <span className='cratis-ordered-item__hidden'>{accessibleName}: </span>\n                    {item.icon ? describe(item.icon) : labels.noIcon}\n                </span>\n            )}\n            {feedback && (\n                <p {...parts?.message} id={messageId} role='alert' className={`cratis-ordered-item__message ${parts?.message?.className ?? ''}`} data-cratis-part='message' data-invalid>\n                    {feedback}\n                </p>\n            )}\n        </div>\n    );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}