@cratis/components 4.24.0 → 4.25.0

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

@@ -0,0 +1,18 @@
+import type { OrderedItem } from './OrderedItem.js';
+import type { OrderedItemCapabilities } from './OrderedItemCapabilities.js';
+import type { OrderedItemLabels } from './OrderedItemLabels.js';
+import type { OrderedItemValidation } from './OrderedItemValidation.js';
+/**
+ * Validates an item as it would be after a change: first the rules the editor owns, then the host's.
+ * The result is empty when the item is valid.
+ *
+ * @param item The item as it would be.
+ * @param items The collection as it would be.
+ * @param capabilities What the host allows.
+ * @param labels The strings to report with.
+ * @param validate The host's rules, if any.
+ */
+export declare const validateOrderedItem: <TItem extends OrderedItem>(item: TItem, items: ReadonlyArray<TItem>, capabilities: OrderedItemCapabilities, labels: Required<OrderedItemLabels>, validate?: (item: TItem, items: ReadonlyArray<TItem>) => OrderedItemValidation | undefined) => OrderedItemValidation;
+/** Whether a validation result holds any message. */
+export declare const hasOrderedItemValidation: (validation: OrderedItemValidation | undefined) => boolean;
+//# sourceMappingURL=validateOrderedItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"validateOrderedItem.d.ts","sourceRoot":"","sources":["../../../ConfigurationEditor/validateOrderedItem.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAe,CAAC;AACjD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,8BAA2B,CAAC;AACzE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAqB,CAAC;AAC7D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,4BAAyB,CAAC;AAGrE;;;;;;;;;GASG;AACH,eAAO,MAAM,mBAAmB,GAAI,KAAK,SAAS,WAAW,QACnD,KAAK,SACJ,aAAa,CAAC,KAAK,CAAC,gBACb,uBAAuB,UAC7B,QAAQ,CAAC,iBAAiB,CAAC,aACxB,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,qBAAqB,GAAG,SAAS,KAC3F,qBAcF,CAAC;AAEF,qDAAqD;AACrD,eAAO,MAAM,wBAAwB,eAAgB,qBAAqB,GAAG,SAAS,KAAG,OACqC,CAAC"}

package/dist/esm/ConfigurationEditor/validateOrderedItem.js

@@ -0,0 +1,21 @@
+import { resolveOrderedItemFieldAccess } from './resolveOrderedItemFieldAccess.js';
+
+const validateOrderedItem = (item, items, capabilities, labels, validate) => {
+    const messages = {};
+    if (resolveOrderedItemFieldAccess(capabilities, 'label') === 'editable' && item.label.trim().length === 0) {
+        messages.label = labels.labelRequired;
+    }
+    const supplied = validate?.(item, items);
+    if (supplied) {
+        for (const [key, message] of Object.entries(supplied)) {
+            if (typeof message === 'string' && message.length > 0 && messages[key] === undefined) {
+                messages[key] = message;
+            }
+        }
+    }
+    return messages;
+};
+const hasOrderedItemValidation = (validation) => validation !== undefined && Object.values(validation).some((message) => typeof message === 'string' && message.length > 0);
+
+export { hasOrderedItemValidation, validateOrderedItem };
+//# sourceMappingURL=validateOrderedItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"validateOrderedItem.js","sources":["../../../ConfigurationEditor/validateOrderedItem.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 type { OrderedItem } from './OrderedItem';\nimport type { OrderedItemCapabilities } from './OrderedItemCapabilities';\nimport type { OrderedItemLabels } from './OrderedItemLabels';\nimport type { OrderedItemValidation } from './OrderedItemValidation';\nimport { resolveOrderedItemFieldAccess } from './resolveOrderedItemFieldAccess';\n\n/**\n * Validates an item as it would be after a change: first the rules the editor owns, then the host's.\n * The result is empty when the item is valid.\n *\n * @param item The item as it would be.\n * @param items The collection as it would be.\n * @param capabilities What the host allows.\n * @param labels The strings to report with.\n * @param validate The host's rules, if any.\n */\nexport const validateOrderedItem = <TItem extends OrderedItem>(\n    item: TItem,\n    items: ReadonlyArray<TItem>,\n    capabilities: OrderedItemCapabilities,\n    labels: Required<OrderedItemLabels>,\n    validate?: (item: TItem, items: ReadonlyArray<TItem>) => OrderedItemValidation | undefined,\n): OrderedItemValidation => {\n    const messages: OrderedItemValidation = {};\n    if (resolveOrderedItemFieldAccess(capabilities, 'label') === 'editable' && item.label.trim().length === 0) {\n        messages.label = labels.labelRequired;\n    }\n    const supplied = validate?.(item, items);\n    if (supplied) {\n        for (const [key, message] of Object.entries(supplied)) {\n            if (typeof message === 'string' && message.length > 0 && messages[key as keyof OrderedItemValidation] === undefined) {\n                messages[key as keyof OrderedItemValidation] = message;\n            }\n        }\n    }\n    return messages;\n};\n\n/** Whether a validation result holds any message. */\nexport const hasOrderedItemValidation = (validation: OrderedItemValidation | undefined): boolean =>\n    validation !== undefined && Object.values(validation).some((message) => typeof message === 'string' && message.length > 0);\n"],"names":[],"mappings":";;AAmBO,MAAM,mBAAmB,GAAG,CAC/B,IAAW,EACX,KAA2B,EAC3B,YAAqC,EACrC,MAAmC,EACnC,QAA0F,KACnE;IACvB,MAAM,QAAQ,GAA0B,EAAE;IAC1C,IAAI,6BAA6B,CAAC,YAAY,EAAE,OAAO,CAAC,KAAK,UAAU,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,EAAE;AACvG,QAAA,QAAQ,CAAC,KAAK,GAAG,MAAM,CAAC,aAAa;IACzC;IACA,MAAM,QAAQ,GAAG,QAAQ,GAAG,IAAI,EAAE,KAAK,CAAC;IACxC,IAAI,QAAQ,EAAE;AACV,QAAA,KAAK,MAAM,CAAC,GAAG,EAAE,OAAO,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;AACnD,YAAA,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,QAAQ,CAAC,GAAkC,CAAC,KAAK,SAAS,EAAE;AACjH,gBAAA,QAAQ,CAAC,GAAkC,CAAC,GAAG,OAAO;YAC1D;QACJ;IACJ;AACA,IAAA,OAAO,QAAQ;AACnB;AAGO,MAAM,wBAAwB,GAAG,CAAC,UAA6C,KAClF,UAAU,KAAK,SAAS,IAAI,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,KAAK,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC;;"}

package/dist/esm/Toolbar/ToolbarButton.d.ts

@@ -48,6 +48,9 @@ export interface ToolbarButtonProps {
 /**
  * An icon button with a tooltip, intended to be placed inside a {@link Toolbar}.
  * Uses the shared {@link Tooltip} component for consistent hover labels.
+ *
+ * Inside a drawer {@link ToolbarFolder} the button renders as a labeled tile instead, with its
+ * `title` always visible, so a drawer can be composed from children as well as from `items`.
  */
-export declare const ToolbarButton: ({ icon, text, title, active, onClick, tooltipPosition, draggable, data, onDragStart, className, pt, }: ToolbarButtonProps) => import("react").JSX.Element;
+export declare const ToolbarButton: (props: ToolbarButtonProps) => import("react").JSX.Element;
 //# sourceMappingURL=ToolbarButton.d.ts.map

package/dist/esm/Toolbar/ToolbarButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarButton.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarButton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACR,oBAAoB,EACpB,cAAc,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAgB,CAAC;AAE3C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAmB,CAAC;AAMzD,wDAAwD;AACxD,MAAM,WAAW,kBAAkB;IAC/B,0BAA0B;IAC1B,IAAI,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IAC/C,oBAAoB;IACpB,IAAI,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;IACvC,gCAAgC;IAChC,KAAK,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;CAC3C;AAED,qDAAqD;AACrD,MAAM,WAAW,kBAAkB;IAC/B,2FAA2F;IAC3F,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ,2GAA2G;IAC3G,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAC;IAEd,oEAAoE;IACpE,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,yEAAyE;IACzE,eAAe,CAAC,EAAE,eAAe,CAAC;IAElC,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,qCAAqC;IACrC,EAAE,CAAC,EAAE,kBAAkB,CAAC;IAExB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACpF;AAED;;;GAGG;AACH,eAAO,MAAM,aAAa,0GAYvB,kBAAkB,gCAuGpB,CAAC"}
+{"version":3,"file":"ToolbarButton.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarButton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACR,oBAAoB,EACpB,cAAc,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAgB,CAAC;AAE3C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAmB,CAAC;AAQzD,wDAAwD;AACxD,MAAM,WAAW,kBAAkB;IAC/B,0BAA0B;IAC1B,IAAI,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IAC/C,oBAAoB;IACpB,IAAI,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;IACvC,gCAAgC;IAChC,KAAK,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;CAC3C;AAED,qDAAqD;AACrD,MAAM,WAAW,kBAAkB;IAC/B,2FAA2F;IAC3F,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ,2GAA2G;IAC3G,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAC;IAEd,oEAAoE;IACpE,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,yEAAyE;IACzE,eAAe,CAAC,EAAE,eAAe,CAAC;IAElC,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,qCAAqC;IACrC,EAAE,CAAC,EAAE,kBAAkB,CAAC;IAExB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACpF;AAuHD;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,UAAW,kBAAkB,gCAuBtD,CAAC"}

package/dist/esm/Toolbar/ToolbarButton.js

@@ -1,12 +1,14 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { IconDisplay } from '../Common/Icon.js';
 import { Tooltip } from '../Common/Tooltip.js';
 import { useToolbarDragContext } from './ToolbarDragContext.js';
+import { useToolbarDrawer } from './ToolbarDrawerContext.js';
+import { ToolbarDrawerTile } from './ToolbarDrawerTile.js';
 import { useToolbarFolderMode } from './ToolbarFolderContext.js';
 import { useToolbarItemVisibility } from './ToolbarItemVisibilityContext.js';
 import { useRovingTool } from '../Common/ToolbarRovingContext.js';
 
-const ToolbarButton = ({ icon, text, title, active, onClick, tooltipPosition = 'right', draggable, data, onDragStart, className, pt, }) => {
+const ToolbarButtonContent = ({ icon, text, title, active, onClick, tooltipPosition = 'right', draggable, data, onDragStart, className, pt, }) => {
     const dragContext = useToolbarDragContext();
     const folderMode = useToolbarFolderMode();
     const isToolbarItemVisible = useToolbarItemVisibility();
@@ -30,6 +32,14 @@ const ToolbarButton = ({ icon, text, title, active, onClick, tooltipPosition = '
     const buttonContent = hasText ? (jsx("span", { ...pt?.label, className: `toolbar-button__text ${pt?.label?.className ?? ''}`, "data-cratis-part": 'label', children: text })) : resolvedIcon === null ? null : (jsx("span", { ...pt?.icon, className: pt?.icon?.className, "data-cratis-part": 'icon', children: jsx(IconDisplay, { icon: resolvedIcon, className: 'cratis:text-lg' }) }));
     return (jsx(Tooltip, { content: title, position: tooltipPosition, disabled: !isToolbarItemVisible, children: jsx("button", { "aria-pressed": active, ...pt?.root, ...rovingTool, type: 'button', "aria-label": title, onClick: onClick, draggable: isDraggable, onDragStart: isDraggable ? handleDragStart : undefined, className: `toolbar-button ${buttonSizeClass} cratis:flex cratis:items-center cratis:justify-center cratis:rounded-lg cratis:cursor-pointer ${activeClass} ${draggableClass} ${pt?.root?.className ?? ''} ${className ?? ''}`, "data-cratis-part": 'button', "data-active": active || undefined, "data-selected": active || undefined, children: buttonContent }) }));
 };
+const ToolbarButton = (props) => {
+    const drawer = useToolbarDrawer();
+    const dragContext = useToolbarDragContext();
+    if (drawer === null) {
+        return jsx(ToolbarButtonContent, { ...props });
+    }
+    return (jsx(ToolbarDrawerTile, { title: props.title, icon: props.icon, active: props.active, draggable: props.draggable ?? dragContext.draggable, data: props.data, onClick: props.onClick, onDragStart: props.onDragStart, className: props.className, root: props.pt?.root, iconPart: props.pt?.icon, label: props.pt?.label }));
+};
 
 export { ToolbarButton };
 //# sourceMappingURL=ToolbarButton.js.map

package/dist/esm/Toolbar/ToolbarButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarButton.js","sources":["../../../Toolbar/ToolbarButton.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 {\n    ButtonHTMLAttributes,\n    HTMLAttributes,\n} from 'react';\nimport { IconDisplay } from '../Common/Icon';\nimport type { Icon } from '../Common/Icon';\nimport { Tooltip } from '../Common/Tooltip';\nimport type { TooltipPosition } from '../Common/Tooltip';\nimport { useToolbarDragContext } from './ToolbarDragContext';\nimport { useToolbarFolderMode } from './ToolbarFolderContext';\nimport { useToolbarItemVisibility } from './ToolbarItemVisibilityContext';\nimport { useRovingTool } from '../Common/ToolbarRovingContext';\n\n/** Stable part attributes for {@link ToolbarButton}. */\nexport interface ToolbarButtonParts {\n    /** Native button root. */\n    root?: ButtonHTMLAttributes<HTMLButtonElement>;\n    /** Icon wrapper. */\n    icon?: HTMLAttributes<HTMLSpanElement>;\n    /** Text/title label wrapper. */\n    label?: HTMLAttributes<HTMLSpanElement>;\n}\n\n/** Props for the {@link ToolbarButton} component. */\nexport interface ToolbarButtonProps {\n    /** React icon node or consumer-owned icon-font class. Components installs no icon font. */\n    icon?: Icon;\n\n    /** Optional text-first content (for example `120%`); when non-empty it renders instead of {@link icon}. */\n    text?: string;\n\n    /** Title text shown when the user hovers over the button. */\n    title: string;\n\n    /** Whether the button is currently in the active/selected state. */\n    active?: boolean;\n\n    /** Callback invoked when the button is clicked. */\n    onClick?: () => void;\n\n    /** Position of the tooltip relative to the button (default: 'right'). */\n    tooltipPosition?: TooltipPosition;\n\n    /** Extra class name for the native button. */\n    className?: string;\n\n    /** Stable button part attributes. */\n    pt?: ToolbarButtonParts;\n\n    /**\n     * Whether this button can be dragged onto a surface.\n     * When omitted the value is inherited from the parent {@link Toolbar}'s `draggable` prop.\n     */\n    draggable?: boolean;\n\n    /**\n     * Optional data associated with this button for identification during drag &amp; drop.\n     * The value is passed to {@link onDragStart} and serialised onto the HTML5\n     * `DataTransfer` object as `application/json` so drop targets can read it.\n     */\n    data?: unknown;\n\n    /**\n     * Callback invoked when a drag operation starts on this button.\n     * Receives the button's {@link data} and the originating drag event.\n     */\n    onDragStart?: (data: unknown, event: React.DragEvent<HTMLButtonElement>) => void;\n}\n\n/**\n * An icon button with a tooltip, intended to be placed inside a {@link Toolbar}.\n * Uses the shared {@link Tooltip} component for consistent hover labels.\n */\nexport const ToolbarButton = ({\n    icon,\n    text,\n    title,\n    active,\n    onClick,\n    tooltipPosition = 'right',\n    draggable,\n    data,\n    onDragStart,\n    className,\n    pt,\n}: ToolbarButtonProps) => {\n    const dragContext = useToolbarDragContext();\n    const folderMode = useToolbarFolderMode();\n    const isToolbarItemVisible = useToolbarItemVisibility();\n    const rovingTool = useRovingTool<HTMLButtonElement>(pt?.root?.tabIndex, pt?.root?.onFocus);\n    const isListMode = folderMode === 'list';\n    const isDraggable = draggable ?? dragContext.draggable;\n\n    const handleDragStart = (event: React.DragEvent<HTMLButtonElement>) => {\n        event.dataTransfer.setData('application/json', JSON.stringify(data ?? null));\n        event.dataTransfer.effectAllowed = 'copy';\n        onDragStart?.(data, event);\n        dragContext.onItemDragStart?.(data, event);\n    };\n\n    const activeClass = active ? 'toolbar-button--active' : '';\n    const draggableClass = isDraggable ? 'toolbar-button--draggable' : '';\n    const hasText = typeof text === 'string' && text.length > 0;\n    const resolvedIcon = icon !== undefined && icon !== null && (typeof icon !== 'string' || icon.length > 0) ? icon : null;\n\n    // List mode: icon + title label rendered side by side (no floating tooltip needed).\n    if (isListMode) {\n        return (\n            <button\n                aria-pressed={active}\n                {...pt?.root}\n                {...rovingTool}\n                type='button'\n                aria-label={title}\n                onClick={onClick}\n                draggable={isDraggable}\n                onDragStart={isDraggable ? handleDragStart : undefined}\n                className={`toolbar-button toolbar-button--list cratis:h-10 cratis:px-3 cratis:w-full cratis:flex cratis:items-center cratis:justify-start cratis:gap-2 cratis:rounded-lg cratis:cursor-pointer ${activeClass} ${draggableClass} ${pt?.root?.className ?? ''} ${className ?? ''}`}\n                data-cratis-part='button'\n                data-active={active || undefined}\n                data-selected={active || undefined}\n            >\n                {resolvedIcon !== null && (\n                    <span\n                        {...pt?.icon}\n                        className={pt?.icon?.className}\n                        data-cratis-part='icon'\n                    >\n                        <IconDisplay\n                            icon={resolvedIcon}\n                            className='cratis:text-lg cratis:flex-shrink-0'\n                        />\n                    </span>\n                )}\n                <span\n                    {...pt?.label}\n                    className={`toolbar-button__label ${pt?.label?.className ?? ''}`}\n                    data-cratis-part='label'\n                >\n                    {title}\n                </span>\n            </button>\n        );\n    }\n\n    const buttonSizeClass = hasText ? 'cratis:h-10 cratis:px-3 cratis:min-w-[4rem]' : 'cratis:w-10 cratis:h-10';\n    const buttonContent = hasText ? (\n        <span\n            {...pt?.label}\n            className={`toolbar-button__text ${pt?.label?.className ?? ''}`}\n            data-cratis-part='label'\n        >\n            {text}\n        </span>\n    ) : resolvedIcon === null ? null : (\n        <span\n            {...pt?.icon}\n            className={pt?.icon?.className}\n            data-cratis-part='icon'\n        >\n            <IconDisplay icon={resolvedIcon} className='cratis:text-lg' />\n        </span>\n    );\n\n    return (\n        <Tooltip\n            content={title}\n            position={tooltipPosition}\n            disabled={!isToolbarItemVisible}\n        >\n            <button\n                aria-pressed={active}\n                {...pt?.root}\n                {...rovingTool}\n                type='button'\n                aria-label={title}\n                onClick={onClick}\n                draggable={isDraggable}\n                onDragStart={isDraggable ? handleDragStart : undefined}\n                className={`toolbar-button ${buttonSizeClass} cratis:flex cratis:items-center cratis:justify-center cratis:rounded-lg cratis:cursor-pointer ${activeClass} ${draggableClass} ${pt?.root?.className ?? ''} ${className ?? ''}`}\n                data-cratis-part='button'\n                data-active={active || undefined}\n                data-selected={active || undefined}\n            >\n                {buttonContent}\n            </button>\n        </Tooltip>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"ToolbarButton.js","sources":["../../../Toolbar/ToolbarButton.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 {\n    ButtonHTMLAttributes,\n    HTMLAttributes,\n} from 'react';\nimport { IconDisplay } from '../Common/Icon';\nimport type { Icon } from '../Common/Icon';\nimport { Tooltip } from '../Common/Tooltip';\nimport type { TooltipPosition } from '../Common/Tooltip';\nimport { useToolbarDragContext } from './ToolbarDragContext';\nimport { useToolbarDrawer } from './ToolbarDrawerContext';\nimport { ToolbarDrawerTile } from './ToolbarDrawerTile';\nimport { useToolbarFolderMode } from './ToolbarFolderContext';\nimport { useToolbarItemVisibility } from './ToolbarItemVisibilityContext';\nimport { useRovingTool } from '../Common/ToolbarRovingContext';\n\n/** Stable part attributes for {@link ToolbarButton}. */\nexport interface ToolbarButtonParts {\n    /** Native button root. */\n    root?: ButtonHTMLAttributes<HTMLButtonElement>;\n    /** Icon wrapper. */\n    icon?: HTMLAttributes<HTMLSpanElement>;\n    /** Text/title label wrapper. */\n    label?: HTMLAttributes<HTMLSpanElement>;\n}\n\n/** Props for the {@link ToolbarButton} component. */\nexport interface ToolbarButtonProps {\n    /** React icon node or consumer-owned icon-font class. Components installs no icon font. */\n    icon?: Icon;\n\n    /** Optional text-first content (for example `120%`); when non-empty it renders instead of {@link icon}. */\n    text?: string;\n\n    /** Title text shown when the user hovers over the button. */\n    title: string;\n\n    /** Whether the button is currently in the active/selected state. */\n    active?: boolean;\n\n    /** Callback invoked when the button is clicked. */\n    onClick?: () => void;\n\n    /** Position of the tooltip relative to the button (default: 'right'). */\n    tooltipPosition?: TooltipPosition;\n\n    /** Extra class name for the native button. */\n    className?: string;\n\n    /** Stable button part attributes. */\n    pt?: ToolbarButtonParts;\n\n    /**\n     * Whether this button can be dragged onto a surface.\n     * When omitted the value is inherited from the parent {@link Toolbar}'s `draggable` prop.\n     */\n    draggable?: boolean;\n\n    /**\n     * Optional data associated with this button for identification during drag &amp; drop.\n     * The value is passed to {@link onDragStart} and serialised onto the HTML5\n     * `DataTransfer` object as `application/json` so drop targets can read it.\n     */\n    data?: unknown;\n\n    /**\n     * Callback invoked when a drag operation starts on this button.\n     * Receives the button's {@link data} and the originating drag event.\n     */\n    onDragStart?: (data: unknown, event: React.DragEvent<HTMLButtonElement>) => void;\n}\n\nconst ToolbarButtonContent = ({\n    icon,\n    text,\n    title,\n    active,\n    onClick,\n    tooltipPosition = 'right',\n    draggable,\n    data,\n    onDragStart,\n    className,\n    pt,\n}: ToolbarButtonProps) => {\n    const dragContext = useToolbarDragContext();\n    const folderMode = useToolbarFolderMode();\n    const isToolbarItemVisible = useToolbarItemVisibility();\n    const rovingTool = useRovingTool<HTMLButtonElement>(pt?.root?.tabIndex, pt?.root?.onFocus);\n    const isListMode = folderMode === 'list';\n    const isDraggable = draggable ?? dragContext.draggable;\n\n    const handleDragStart = (event: React.DragEvent<HTMLButtonElement>) => {\n        event.dataTransfer.setData('application/json', JSON.stringify(data ?? null));\n        event.dataTransfer.effectAllowed = 'copy';\n        onDragStart?.(data, event);\n        dragContext.onItemDragStart?.(data, event);\n    };\n\n    const activeClass = active ? 'toolbar-button--active' : '';\n    const draggableClass = isDraggable ? 'toolbar-button--draggable' : '';\n    const hasText = typeof text === 'string' && text.length > 0;\n    const resolvedIcon = icon !== undefined && icon !== null && (typeof icon !== 'string' || icon.length > 0) ? icon : null;\n\n    // List mode: icon + title label rendered side by side (no floating tooltip needed).\n    if (isListMode) {\n        return (\n            <button\n                aria-pressed={active}\n                {...pt?.root}\n                {...rovingTool}\n                type='button'\n                aria-label={title}\n                onClick={onClick}\n                draggable={isDraggable}\n                onDragStart={isDraggable ? handleDragStart : undefined}\n                className={`toolbar-button toolbar-button--list cratis:h-10 cratis:px-3 cratis:w-full cratis:flex cratis:items-center cratis:justify-start cratis:gap-2 cratis:rounded-lg cratis:cursor-pointer ${activeClass} ${draggableClass} ${pt?.root?.className ?? ''} ${className ?? ''}`}\n                data-cratis-part='button'\n                data-active={active || undefined}\n                data-selected={active || undefined}\n            >\n                {resolvedIcon !== null && (\n                    <span\n                        {...pt?.icon}\n                        className={pt?.icon?.className}\n                        data-cratis-part='icon'\n                    >\n                        <IconDisplay\n                            icon={resolvedIcon}\n                            className='cratis:text-lg cratis:flex-shrink-0'\n                        />\n                    </span>\n                )}\n                <span\n                    {...pt?.label}\n                    className={`toolbar-button__label ${pt?.label?.className ?? ''}`}\n                    data-cratis-part='label'\n                >\n                    {title}\n                </span>\n            </button>\n        );\n    }\n\n    const buttonSizeClass = hasText ? 'cratis:h-10 cratis:px-3 cratis:min-w-[4rem]' : 'cratis:w-10 cratis:h-10';\n    const buttonContent = hasText ? (\n        <span\n            {...pt?.label}\n            className={`toolbar-button__text ${pt?.label?.className ?? ''}`}\n            data-cratis-part='label'\n        >\n            {text}\n        </span>\n    ) : resolvedIcon === null ? null : (\n        <span\n            {...pt?.icon}\n            className={pt?.icon?.className}\n            data-cratis-part='icon'\n        >\n            <IconDisplay icon={resolvedIcon} className='cratis:text-lg' />\n        </span>\n    );\n\n    return (\n        <Tooltip\n            content={title}\n            position={tooltipPosition}\n            disabled={!isToolbarItemVisible}\n        >\n            <button\n                aria-pressed={active}\n                {...pt?.root}\n                {...rovingTool}\n                type='button'\n                aria-label={title}\n                onClick={onClick}\n                draggable={isDraggable}\n                onDragStart={isDraggable ? handleDragStart : undefined}\n                className={`toolbar-button ${buttonSizeClass} cratis:flex cratis:items-center cratis:justify-center cratis:rounded-lg cratis:cursor-pointer ${activeClass} ${draggableClass} ${pt?.root?.className ?? ''} ${className ?? ''}`}\n                data-cratis-part='button'\n                data-active={active || undefined}\n                data-selected={active || undefined}\n            >\n                {buttonContent}\n            </button>\n        </Tooltip>\n    );\n};\n\n/**\n * An icon button with a tooltip, intended to be placed inside a {@link Toolbar}.\n * Uses the shared {@link Tooltip} component for consistent hover labels.\n *\n * Inside a drawer {@link ToolbarFolder} the button renders as a labeled tile instead, with its\n * `title` always visible, so a drawer can be composed from children as well as from `items`.\n */\nexport const ToolbarButton = (props: ToolbarButtonProps) => {\n    const drawer = useToolbarDrawer();\n    const dragContext = useToolbarDragContext();\n\n    if (drawer === null) {\n        return <ToolbarButtonContent {...props} />;\n    }\n\n    return (\n        <ToolbarDrawerTile\n            title={props.title}\n            icon={props.icon}\n            active={props.active}\n            draggable={props.draggable ?? dragContext.draggable}\n            data={props.data}\n            onClick={props.onClick}\n            onDragStart={props.onDragStart}\n            className={props.className}\n            root={props.pt?.root}\n            iconPart={props.pt?.icon}\n            label={props.pt?.label}\n        />\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/Toolbar/ToolbarDrawerContext.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Internal context a drawer {@link ToolbarFolder} provides to the tiles inside it. Its presence is
+ * what makes a {@link ToolbarButton} render as a labeled tile instead of an icon-only cell.
+ */
+export interface ToolbarDrawerContextValue {
+    /** Reports that a tile drag started or ended, so the drawer can reflect the drag lifecycle. */
+    setDragging: (dragging: boolean) => void;
+}
+/** Context provided by a drawer {@link ToolbarFolder}; `null` everywhere else. */
+export declare const ToolbarDrawerContext: import("react").Context<ToolbarDrawerContextValue | null>;
+/** Returns the enclosing drawer, or `null` when the caller is not inside a drawer folder. */
+export declare const useToolbarDrawer: () => ToolbarDrawerContextValue | null;
+//# sourceMappingURL=ToolbarDrawerContext.d.ts.map

package/dist/esm/Toolbar/ToolbarDrawerContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarDrawerContext.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarDrawerContext.ts"],"names":[],"mappings":"AAKA;;;GAGG;AACH,MAAM,WAAW,yBAAyB;IACtC,+FAA+F;IAC/F,WAAW,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C;AAED,kFAAkF;AAClF,eAAO,MAAM,oBAAoB,2DAAwD,CAAC;AAE1F,6FAA6F;AAC7F,eAAO,MAAM,gBAAgB,QAAO,yBAAyB,GAAG,IAAwC,CAAC"}

package/dist/esm/Toolbar/ToolbarDrawerContext.js

@@ -0,0 +1,7 @@
+import { createContext, useContext } from 'react';
+
+const ToolbarDrawerContext = createContext(null);
+const useToolbarDrawer = () => useContext(ToolbarDrawerContext);
+
+export { ToolbarDrawerContext, useToolbarDrawer };
+//# sourceMappingURL=ToolbarDrawerContext.js.map

package/dist/esm/Toolbar/ToolbarDrawerContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarDrawerContext.js","sources":["../../../Toolbar/ToolbarDrawerContext.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 { createContext, useContext } from 'react';\n\n/**\n * Internal context a drawer {@link ToolbarFolder} provides to the tiles inside it. Its presence is\n * what makes a {@link ToolbarButton} render as a labeled tile instead of an icon-only cell.\n */\nexport interface ToolbarDrawerContextValue {\n    /** Reports that a tile drag started or ended, so the drawer can reflect the drag lifecycle. */\n    setDragging: (dragging: boolean) => void;\n}\n\n/** Context provided by a drawer {@link ToolbarFolder}; `null` everywhere else. */\nexport const ToolbarDrawerContext = createContext<ToolbarDrawerContextValue | null>(null);\n\n/** Returns the enclosing drawer, or `null` when the caller is not inside a drawer folder. */\nexport const useToolbarDrawer = (): ToolbarDrawerContextValue | null => useContext(ToolbarDrawerContext);\n"],"names":[],"mappings":";;MAea,oBAAoB,GAAG,aAAa,CAAmC,IAAI;AAGjF,MAAM,gBAAgB,GAAG,MAAwC,UAAU,CAAC,oBAAoB;;"}

package/dist/esm/Toolbar/ToolbarDrawerItem.d.ts

@@ -0,0 +1,23 @@
+import type { Icon } from '../Common/Icon.js';
+/**
+ * One entry of a catalogue shown as a labeled tile inside a drawer {@link ToolbarFolder}.
+ *
+ * The drawer never interprets {@link payload}: the exact value supplied here is delivered unchanged
+ * to the consumer when the tile is activated and when it is dragged, so the consumer decides what
+ * the item means and where it is inserted.
+ */
+export interface ToolbarDrawerItem {
+    /** Stable identity of the item. Used as the React key and never derived from {@link title}. */
+    id: string;
+    /** Always-visible, localizable tile label. Also the tile's accessible name. */
+    title: string;
+    /** Icon shown above the label. */
+    icon: Icon;
+    /** Consumer-owned data delivered unchanged on activation and on drag. */
+    payload: unknown;
+    /** Whether the item is unavailable. A disabled tile stays focusable so its reason can be read. */
+    disabled?: boolean;
+    /** Explanation shown as the tile description when {@link disabled}. */
+    disabledReason?: string;
+}
+//# sourceMappingURL=ToolbarDrawerItem.d.ts.map

package/dist/esm/Toolbar/ToolbarDrawerItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarDrawerItem.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarDrawerItem.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAgB,CAAC;AAE3C;;;;;;GAMG;AACH,MAAM,WAAW,iBAAiB;IAC9B,+FAA+F;IAC/F,EAAE,EAAE,MAAM,CAAC;IAEX,+EAA+E;IAC/E,KAAK,EAAE,MAAM,CAAC;IAEd,kCAAkC;IAClC,IAAI,EAAE,IAAI,CAAC;IAEX,yEAAyE;IACzE,OAAO,EAAE,OAAO,CAAC;IAEjB,kGAAkG;IAClG,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,uEAAuE;IACvE,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B"}

package/dist/esm/Toolbar/ToolbarDrawerItem.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=ToolbarDrawerItem.js.map

package/dist/esm/Toolbar/ToolbarDrawerItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarDrawerItem.js","sourceRoot":"","sources":["../../../Toolbar/ToolbarDrawerItem.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 { Icon } from '../Common/Icon';\n\n/**\n * One entry of a catalogue shown as a labeled tile inside a drawer {@link ToolbarFolder}.\n *\n * The drawer never interprets {@link payload}: the exact value supplied here is delivered unchanged\n * to the consumer when the tile is activated and when it is dragged, so the consumer decides what\n * the item means and where it is inserted.\n */\nexport interface ToolbarDrawerItem {\n    /** Stable identity of the item. Used as the React key and never derived from {@link title}. */\n    id: string;\n\n    /** Always-visible, localizable tile label. Also the tile's accessible name. */\n    title: string;\n\n    /** Icon shown above the label. */\n    icon: Icon;\n\n    /** Consumer-owned data delivered unchanged on activation and on drag. */\n    payload: unknown;\n\n    /** Whether the item is unavailable. A disabled tile stays focusable so its reason can be read. */\n    disabled?: boolean;\n\n    /** Explanation shown as the tile description when {@link disabled}. */\n    disabledReason?: string;\n}\n"]}

package/dist/esm/Toolbar/ToolbarDrawerPlacement.d.ts

@@ -0,0 +1,57 @@
+/** Edges of an element, in viewport coordinates. */
+export interface ToolbarDrawerRectangle {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+}
+/** Inputs for {@link resolveToolbarDrawerPlacement}. */
+export interface ToolbarDrawerPlacementRequest {
+    /** The folder trigger the drawer is anchored to. */
+    trigger: ToolbarDrawerRectangle;
+    /** Natural (unconstrained) size of the drawer. */
+    panel: {
+        width: number;
+        height: number;
+    };
+    /** Size of the viewport the drawer has to stay inside. */
+    viewport: {
+        width: number;
+        height: number;
+    };
+    /** Orientation of the owning toolbar. */
+    orientation: 'vertical' | 'horizontal';
+    /** Preferred side for a vertical toolbar. A horizontal toolbar prefers `'bottom'`. */
+    preferredHorizontalSide: 'right' | 'left';
+    /** Space kept between the drawer and the trigger. */
+    gap: number;
+    /** Space kept between the drawer and the viewport edge. */
+    margin: number;
+}
+/** Where a drawer ends up relative to its trigger. */
+export interface ToolbarDrawerPlacement {
+    /** The side of the trigger the drawer opens towards. */
+    side: 'right' | 'left' | 'top' | 'bottom';
+    /** Offset along the cross axis that keeps the drawer inside the viewport. */
+    shift: number;
+    /**
+     * Offset along the opening axis, towards the trigger. Non-zero only when the drawer fits on
+     * neither side, so it overlaps the toolbar rather than leaving the viewport.
+     */
+    mainShift: number;
+    /** Largest height the drawer may take before it scrolls. */
+    maxHeight: number;
+    /** Largest width the drawer may take. */
+    maxWidth: number;
+}
+/**
+ * Decides which side of its trigger a drawer opens towards and how far it has to move along the
+ * cross axis to stay inside the viewport.
+ *
+ * A drawer first tries its preferred side, flips to the opposite side when it does not fit there
+ * and the opposite side offers more room, and finally slides along the cross axis. When it fits on
+ * neither side it moves back over the toolbar instead of leaving the viewport. When the drawer is
+ * larger than the viewport allows, `maxHeight` and `maxWidth` bound it so its content scrolls.
+ */
+export declare const resolveToolbarDrawerPlacement: (request: ToolbarDrawerPlacementRequest) => ToolbarDrawerPlacement;
+//# sourceMappingURL=ToolbarDrawerPlacement.d.ts.map

package/dist/esm/Toolbar/ToolbarDrawerPlacement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarDrawerPlacement.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarDrawerPlacement.ts"],"names":[],"mappings":"AAGA,oDAAoD;AACpD,MAAM,WAAW,sBAAsB;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,wDAAwD;AACxD,MAAM,WAAW,6BAA6B;IAC1C,oDAAoD;IACpD,OAAO,EAAE,sBAAsB,CAAC;IAChC,kDAAkD;IAClD,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACzC,0DAA0D;IAC1D,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,yCAAyC;IACzC,WAAW,EAAE,UAAU,GAAG,YAAY,CAAC;IACvC,sFAAsF;IACtF,uBAAuB,EAAE,OAAO,GAAG,MAAM,CAAC;IAC1C,qDAAqD;IACrD,GAAG,EAAE,MAAM,CAAC;IACZ,2DAA2D;IAC3D,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,sDAAsD;AACtD,MAAM,WAAW,sBAAsB;IACnC,wDAAwD;IACxD,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;IAC1C,6EAA6E;IAC7E,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB,4DAA4D;IAC5D,SAAS,EAAE,MAAM,CAAC;IAClB,yCAAyC;IACzC,QAAQ,EAAE,MAAM,CAAC;CACpB;AASD;;;;;;;;GAQG;AACH,eAAO,MAAM,6BAA6B,YAAa,6BAA6B,KAAG,sBA2CtF,CAAC"}

package/dist/esm/Toolbar/ToolbarDrawerPlacement.js

@@ -0,0 +1,51 @@
+const clampShift = (start, size, limit, margin) => {
+    const minimumStart = margin;
+    const maximumStart = Math.max(minimumStart, limit - margin - size);
+    const clamped = Math.min(Math.max(start, minimumStart), maximumStart);
+    return clamped - start;
+};
+const resolveToolbarDrawerPlacement = (request) => {
+    const { trigger, panel, viewport, orientation, preferredHorizontalSide, gap, margin } = request;
+    const maxHeight = Math.max(0, viewport.height - margin * 2);
+    const maxWidth = Math.max(0, viewport.width - margin * 2);
+    const panelWidth = Math.min(panel.width, maxWidth);
+    const panelHeight = Math.min(panel.height, maxHeight);
+    if (orientation === 'horizontal') {
+        const roomBelow = viewport.height - margin - trigger.bottom - gap;
+        const roomAbove = trigger.top - margin - gap;
+        const fitsBelow = roomBelow >= panelHeight;
+        const fitsAbove = roomAbove >= panelHeight;
+        const side = fitsBelow || (!fitsAbove && roomBelow >= roomAbove) ? 'bottom' : 'top';
+        const centered = (trigger.left + trigger.right) / 2 - panelWidth / 2;
+        const overflow = Math.max(0, panelHeight - (side === 'bottom' ? roomBelow : roomAbove));
+        return {
+            side,
+            shift: clampShift(centered, panelWidth, viewport.width, margin),
+            mainShift: side === 'bottom' ? -overflow : overflow,
+            maxHeight,
+            maxWidth,
+        };
+    }
+    const roomRight = viewport.width - margin - trigger.right - gap;
+    const roomLeft = trigger.left - margin - gap;
+    const preferredRoom = preferredHorizontalSide === 'right' ? roomRight : roomLeft;
+    const oppositeRoom = preferredHorizontalSide === 'right' ? roomLeft : roomRight;
+    const fitsPreferred = preferredRoom >= panelWidth;
+    const fitsOpposite = oppositeRoom >= panelWidth;
+    const flip = !fitsPreferred && (fitsOpposite || oppositeRoom > preferredRoom);
+    const side = flip
+        ? (preferredHorizontalSide === 'right' ? 'left' : 'right')
+        : preferredHorizontalSide;
+    const centered = (trigger.top + trigger.bottom) / 2 - panelHeight / 2;
+    const overflow = Math.max(0, panelWidth - (side === 'right' ? roomRight : roomLeft));
+    return {
+        side,
+        shift: clampShift(centered, panelHeight, viewport.height, margin),
+        mainShift: side === 'right' ? -overflow : overflow,
+        maxHeight,
+        maxWidth,
+    };
+};
+
+export { resolveToolbarDrawerPlacement };
+//# sourceMappingURL=ToolbarDrawerPlacement.js.map

package/dist/esm/Toolbar/ToolbarDrawerPlacement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarDrawerPlacement.js","sources":["../../../Toolbar/ToolbarDrawerPlacement.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\n/** Edges of an element, in viewport coordinates. */\nexport interface ToolbarDrawerRectangle {\n    left: number;\n    top: number;\n    right: number;\n    bottom: number;\n}\n\n/** Inputs for {@link resolveToolbarDrawerPlacement}. */\nexport interface ToolbarDrawerPlacementRequest {\n    /** The folder trigger the drawer is anchored to. */\n    trigger: ToolbarDrawerRectangle;\n    /** Natural (unconstrained) size of the drawer. */\n    panel: { width: number; height: number };\n    /** Size of the viewport the drawer has to stay inside. */\n    viewport: { width: number; height: number };\n    /** Orientation of the owning toolbar. */\n    orientation: 'vertical' | 'horizontal';\n    /** Preferred side for a vertical toolbar. A horizontal toolbar prefers `'bottom'`. */\n    preferredHorizontalSide: 'right' | 'left';\n    /** Space kept between the drawer and the trigger. */\n    gap: number;\n    /** Space kept between the drawer and the viewport edge. */\n    margin: number;\n}\n\n/** Where a drawer ends up relative to its trigger. */\nexport interface ToolbarDrawerPlacement {\n    /** The side of the trigger the drawer opens towards. */\n    side: 'right' | 'left' | 'top' | 'bottom';\n    /** Offset along the cross axis that keeps the drawer inside the viewport. */\n    shift: number;\n    /**\n     * Offset along the opening axis, towards the trigger. Non-zero only when the drawer fits on\n     * neither side, so it overlaps the toolbar rather than leaving the viewport.\n     */\n    mainShift: number;\n    /** Largest height the drawer may take before it scrolls. */\n    maxHeight: number;\n    /** Largest width the drawer may take. */\n    maxWidth: number;\n}\n\nconst clampShift = (start: number, size: number, limit: number, margin: number): number => {\n    const minimumStart = margin;\n    const maximumStart = Math.max(minimumStart, limit - margin - size);\n    const clamped = Math.min(Math.max(start, minimumStart), maximumStart);\n    return clamped - start;\n};\n\n/**\n * Decides which side of its trigger a drawer opens towards and how far it has to move along the\n * cross axis to stay inside the viewport.\n *\n * A drawer first tries its preferred side, flips to the opposite side when it does not fit there\n * and the opposite side offers more room, and finally slides along the cross axis. When it fits on\n * neither side it moves back over the toolbar instead of leaving the viewport. When the drawer is\n * larger than the viewport allows, `maxHeight` and `maxWidth` bound it so its content scrolls.\n */\nexport const resolveToolbarDrawerPlacement = (request: ToolbarDrawerPlacementRequest): ToolbarDrawerPlacement => {\n    const { trigger, panel, viewport, orientation, preferredHorizontalSide, gap, margin } = request;\n    const maxHeight = Math.max(0, viewport.height - margin * 2);\n    const maxWidth = Math.max(0, viewport.width - margin * 2);\n    const panelWidth = Math.min(panel.width, maxWidth);\n    const panelHeight = Math.min(panel.height, maxHeight);\n\n    if (orientation === 'horizontal') {\n        const roomBelow = viewport.height - margin - trigger.bottom - gap;\n        const roomAbove = trigger.top - margin - gap;\n        const fitsBelow = roomBelow >= panelHeight;\n        const fitsAbove = roomAbove >= panelHeight;\n        const side = fitsBelow || (!fitsAbove && roomBelow >= roomAbove) ? 'bottom' : 'top';\n        const centered = (trigger.left + trigger.right) / 2 - panelWidth / 2;\n        const overflow = Math.max(0, panelHeight - (side === 'bottom' ? roomBelow : roomAbove));\n        return {\n            side,\n            shift: clampShift(centered, panelWidth, viewport.width, margin),\n            mainShift: side === 'bottom' ? -overflow : overflow,\n            maxHeight,\n            maxWidth,\n        };\n    }\n\n    const roomRight = viewport.width - margin - trigger.right - gap;\n    const roomLeft = trigger.left - margin - gap;\n    const preferredRoom = preferredHorizontalSide === 'right' ? roomRight : roomLeft;\n    const oppositeRoom = preferredHorizontalSide === 'right' ? roomLeft : roomRight;\n    const fitsPreferred = preferredRoom >= panelWidth;\n    const fitsOpposite = oppositeRoom >= panelWidth;\n    const flip = !fitsPreferred && (fitsOpposite || oppositeRoom > preferredRoom);\n    const side = flip\n        ? (preferredHorizontalSide === 'right' ? 'left' : 'right')\n        : preferredHorizontalSide;\n    const centered = (trigger.top + trigger.bottom) / 2 - panelHeight / 2;\n    const overflow = Math.max(0, panelWidth - (side === 'right' ? roomRight : roomLeft));\n    return {\n        side,\n        shift: clampShift(centered, panelHeight, viewport.height, margin),\n        mainShift: side === 'right' ? -overflow : overflow,\n        maxHeight,\n        maxWidth,\n    };\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/Toolbar/ToolbarDrawerTile.d.ts

@@ -0,0 +1,43 @@
+import { type ButtonHTMLAttributes, type DragEvent, type HTMLAttributes } from 'react';
+import type { Icon } from '../Common/Icon.js';
+/** Props for the internal labeled tile rendered inside a drawer {@link ToolbarFolder}. */
+export interface ToolbarDrawerTileProps {
+    /** Always-visible label and accessible name. */
+    title: string;
+    /** Icon shown above the label. */
+    icon?: Icon;
+    /** Whether the tile is the active/selected one. */
+    active?: boolean;
+    /** Whether the tile is unavailable. */
+    disabled?: boolean;
+    /** Explanation of why the tile is unavailable. */
+    disabledReason?: string;
+    /** Whether the tile can be dragged. */
+    draggable: boolean;
+    /** Data delivered to drag callbacks and serialized onto the `DataTransfer`. */
+    data?: unknown;
+    /** Catalogue identity exposed as `data-item-id` so styling and tests can address one tile. */
+    itemId?: string;
+    /** Called when the tile is activated by pointer, Enter or Space. */
+    onClick?: () => void;
+    /** Called when a drag starts on the tile. */
+    onDragStart?: (data: unknown, event: DragEvent<HTMLButtonElement>) => void;
+    /** Called when a drag that started on the tile ends, whether dropped or cancelled. */
+    onDragEnd?: (data: unknown, event: DragEvent<HTMLButtonElement>) => void;
+    /** Extra class name for the native button. */
+    className?: string;
+    /** Attributes for the native button. */
+    root?: ButtonHTMLAttributes<HTMLButtonElement>;
+    /** Attributes for the icon wrapper. */
+    iconPart?: HTMLAttributes<HTMLSpanElement>;
+    /** Attributes for the label. */
+    label?: HTMLAttributes<HTMLSpanElement>;
+}
+/**
+ * A labeled drawer tile: a prominent icon with an always-visible title.
+ *
+ * A disabled tile stays focusable and reports `aria-disabled` so assistive technology can still
+ * read why it is unavailable; it neither activates nor drags.
+ */
+export declare const ToolbarDrawerTile: ({ title, icon, active, disabled, disabledReason, draggable, data, itemId, onClick, onDragStart, onDragEnd, className, root, iconPart, label, }: ToolbarDrawerTileProps) => import("react").JSX.Element;
+//# sourceMappingURL=ToolbarDrawerTile.d.ts.map

package/dist/esm/Toolbar/ToolbarDrawerTile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarDrawerTile.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarDrawerTile.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAS,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAE9F,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAgB,CAAC;AAK3C,0FAA0F;AAC1F,MAAM,WAAW,sBAAsB;IACnC,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,mDAAmD;IACnD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uCAAuC;IACvC,SAAS,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,8FAA8F;IAC9F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC3E,sFAAsF;IACtF,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACzE,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,IAAI,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IAC/C,uCAAuC;IACvC,QAAQ,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;IAC3C,gCAAgC;IAChC,KAAK,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;CAC3C;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,mJAgB3B,sBAAsB,gCAkExB,CAAC"}

package/dist/esm/Toolbar/ToolbarDrawerTile.js

@@ -0,0 +1,31 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
+import { IconDisplay } from '../Common/Icon.js';
+import { useRovingTool } from '../Common/ToolbarRovingContext.js';
+import { useToolbarDragContext } from './ToolbarDragContext.js';
+import { useToolbarDrawer } from './ToolbarDrawerContext.js';
+
+const ToolbarDrawerTile = ({ title, icon, active, disabled, disabledReason, draggable, data, itemId, onClick, onDragStart, onDragEnd, className, root, iconPart, label, }) => {
+    const dragContext = useToolbarDragContext();
+    const drawer = useToolbarDrawer();
+    const rovingTool = useRovingTool(root?.tabIndex, root?.onFocus);
+    const reasonId = useId();
+    const isDraggable = draggable && !disabled;
+    const hasReason = disabled === true && typeof disabledReason === 'string' && disabledReason.length > 0;
+    const resolvedIcon = icon !== undefined && icon !== null && (typeof icon !== 'string' || icon.length > 0) ? icon : null;
+    const handleDragStart = (event) => {
+        event.dataTransfer.setData('application/json', JSON.stringify(data ?? null));
+        event.dataTransfer.effectAllowed = 'copy';
+        drawer?.setDragging(true);
+        onDragStart?.(data, event);
+        dragContext.onItemDragStart?.(data, event);
+    };
+    const handleDragEnd = (event) => {
+        drawer?.setDragging(false);
+        onDragEnd?.(data, event);
+    };
+    return (jsxs("button", { "aria-pressed": active, ...root, ...rovingTool, type: 'button', title: hasReason ? disabledReason : root?.title, "aria-disabled": disabled || undefined, "aria-describedby": hasReason ? reasonId : root?.['aria-describedby'], onClick: disabled ? undefined : onClick, draggable: isDraggable, onDragStart: isDraggable ? handleDragStart : undefined, onDragEnd: isDraggable ? handleDragEnd : undefined, className: `toolbar-button toolbar-drawer-tile ${isDraggable ? 'toolbar-button--draggable' : ''} ${active ? 'toolbar-button--active' : ''} ${root?.className ?? ''} ${className ?? ''}`, "data-cratis-part": 'toolbar-folder-tile', "data-item-id": itemId, "data-disabled": disabled || undefined, "data-active": active || undefined, "data-selected": active || undefined, children: [resolvedIcon !== null && (jsx("span", { "aria-hidden": 'true', ...iconPart, className: `toolbar-drawer-tile__icon ${iconPart?.className ?? ''}`, "data-cratis-part": 'toolbar-folder-tile-icon', children: jsx(IconDisplay, { icon: resolvedIcon, className: 'cratis:text-2xl' }) })), jsx("span", { ...label, className: `toolbar-drawer-tile__label ${label?.className ?? ''}`, "data-cratis-part": 'toolbar-folder-tile-label', children: title }), hasReason && (jsx("span", { id: reasonId, className: 'toolbar-drawer-tile__reason', children: disabledReason }))] }));
+};
+
+export { ToolbarDrawerTile };
+//# sourceMappingURL=ToolbarDrawerTile.js.map

package/dist/esm/Toolbar/ToolbarDrawerTile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarDrawerTile.js","sources":["../../../Toolbar/ToolbarDrawerTile.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 { useId, type ButtonHTMLAttributes, type DragEvent, type HTMLAttributes } from 'react';\nimport { IconDisplay } from '../Common/Icon';\nimport type { Icon } from '../Common/Icon';\nimport { useRovingTool } from '../Common/ToolbarRovingContext';\nimport { useToolbarDragContext } from './ToolbarDragContext';\nimport { useToolbarDrawer } from './ToolbarDrawerContext';\n\n/** Props for the internal labeled tile rendered inside a drawer {@link ToolbarFolder}. */\nexport interface ToolbarDrawerTileProps {\n    /** Always-visible label and accessible name. */\n    title: string;\n    /** Icon shown above the label. */\n    icon?: Icon;\n    /** Whether the tile is the active/selected one. */\n    active?: boolean;\n    /** Whether the tile is unavailable. */\n    disabled?: boolean;\n    /** Explanation of why the tile is unavailable. */\n    disabledReason?: string;\n    /** Whether the tile can be dragged. */\n    draggable: boolean;\n    /** Data delivered to drag callbacks and serialized onto the `DataTransfer`. */\n    data?: unknown;\n    /** Catalogue identity exposed as `data-item-id` so styling and tests can address one tile. */\n    itemId?: string;\n    /** Called when the tile is activated by pointer, Enter or Space. */\n    onClick?: () => void;\n    /** Called when a drag starts on the tile. */\n    onDragStart?: (data: unknown, event: DragEvent<HTMLButtonElement>) => void;\n    /** Called when a drag that started on the tile ends, whether dropped or cancelled. */\n    onDragEnd?: (data: unknown, event: DragEvent<HTMLButtonElement>) => void;\n    /** Extra class name for the native button. */\n    className?: string;\n    /** Attributes for the native button. */\n    root?: ButtonHTMLAttributes<HTMLButtonElement>;\n    /** Attributes for the icon wrapper. */\n    iconPart?: HTMLAttributes<HTMLSpanElement>;\n    /** Attributes for the label. */\n    label?: HTMLAttributes<HTMLSpanElement>;\n}\n\n/**\n * A labeled drawer tile: a prominent icon with an always-visible title.\n *\n * A disabled tile stays focusable and reports `aria-disabled` so assistive technology can still\n * read why it is unavailable; it neither activates nor drags.\n */\nexport const ToolbarDrawerTile = ({\n    title,\n    icon,\n    active,\n    disabled,\n    disabledReason,\n    draggable,\n    data,\n    itemId,\n    onClick,\n    onDragStart,\n    onDragEnd,\n    className,\n    root,\n    iconPart,\n    label,\n}: ToolbarDrawerTileProps) => {\n    const dragContext = useToolbarDragContext();\n    const drawer = useToolbarDrawer();\n    const rovingTool = useRovingTool<HTMLButtonElement>(root?.tabIndex, root?.onFocus);\n    const reasonId = useId();\n    const isDraggable = draggable && !disabled;\n    const hasReason = disabled === true && typeof disabledReason === 'string' && disabledReason.length > 0;\n    const resolvedIcon = icon !== undefined && icon !== null && (typeof icon !== 'string' || icon.length > 0) ? icon : null;\n\n    const handleDragStart = (event: DragEvent<HTMLButtonElement>) => {\n        event.dataTransfer.setData('application/json', JSON.stringify(data ?? null));\n        event.dataTransfer.effectAllowed = 'copy';\n        drawer?.setDragging(true);\n        onDragStart?.(data, event);\n        dragContext.onItemDragStart?.(data, event);\n    };\n\n    const handleDragEnd = (event: DragEvent<HTMLButtonElement>) => {\n        drawer?.setDragging(false);\n        onDragEnd?.(data, event);\n    };\n\n    return (\n        <button\n            aria-pressed={active}\n            {...root}\n            {...rovingTool}\n            type='button'\n            title={hasReason ? disabledReason : root?.title}\n            aria-disabled={disabled || undefined}\n            aria-describedby={hasReason ? reasonId : root?.['aria-describedby']}\n            onClick={disabled ? undefined : onClick}\n            draggable={isDraggable}\n            onDragStart={isDraggable ? handleDragStart : undefined}\n            onDragEnd={isDraggable ? handleDragEnd : undefined}\n            className={`toolbar-button toolbar-drawer-tile ${isDraggable ? 'toolbar-button--draggable' : ''} ${active ? 'toolbar-button--active' : ''} ${root?.className ?? ''} ${className ?? ''}`}\n            data-cratis-part='toolbar-folder-tile'\n            data-item-id={itemId}\n            data-disabled={disabled || undefined}\n            data-active={active || undefined}\n            data-selected={active || undefined}\n        >\n            {resolvedIcon !== null && (\n                <span\n                    aria-hidden='true'\n                    {...iconPart}\n                    className={`toolbar-drawer-tile__icon ${iconPart?.className ?? ''}`}\n                    data-cratis-part='toolbar-folder-tile-icon'\n                >\n                    <IconDisplay icon={resolvedIcon} className='cratis:text-2xl' />\n                </span>\n            )}\n            <span\n                {...label}\n                className={`toolbar-drawer-tile__label ${label?.className ?? ''}`}\n                data-cratis-part='toolbar-folder-tile-label'\n            >\n                {title}\n            </span>\n            {hasReason && (\n                <span id={reasonId} className='toolbar-drawer-tile__reason'>\n                    {disabledReason}\n                </span>\n            )}\n        </button>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/Toolbar/ToolbarFolder.d.ts

@@ -1,6 +1,8 @@
-import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react';
+import { type ButtonHTMLAttributes, type DragEvent, type HTMLAttributes, type ReactNode } from 'react';
 import type { Icon } from '../Common/Icon.js';
 import type { TooltipPosition } from '../Common/Tooltip.js';
+import type { ToolbarDrawerItem } from './ToolbarDrawerItem.js';
+import type { ToolbarFolderPresentation } from './ToolbarFolderPresentation.js';
 import type { ToolbarFolderMode } from './ToolbarFolderContext.js';
 /** Stable part attributes for {@link ToolbarFolder}. */
 export interface ToolbarFolderParts {
@@ -10,6 +12,18 @@ export interface ToolbarFolderParts {
     trigger?: ButtonHTMLAttributes<HTMLButtonElement>;
     /** Expanded item panel. */
     panel?: HTMLAttributes<HTMLDivElement>;
+    /** Drawer presentation: the header row holding the title and the close action. */
+    drawerHeader?: HTMLAttributes<HTMLDivElement>;
+    /** Drawer presentation: the visible heading. */
+    drawerTitle?: HTMLAttributes<HTMLSpanElement>;
+    /** Drawer presentation: the native close button. */
+    drawerClose?: ButtonHTMLAttributes<HTMLButtonElement>;
+    /** Drawer presentation: each labeled tile rendered from `items`. */
+    tile?: ButtonHTMLAttributes<HTMLButtonElement>;
+    /** Drawer presentation: the icon wrapper inside each tile rendered from `items`. */
+    tileIcon?: HTMLAttributes<HTMLSpanElement>;
+    /** Drawer presentation: the label inside each tile rendered from `items`. */
+    tileLabel?: HTMLAttributes<HTMLSpanElement>;
 }
 /** Props for the {@link ToolbarFolder} component. */
 export interface ToolbarFolderProps {
@@ -28,14 +42,42 @@ export interface ToolbarFolderProps {
      * - `'list'` — items are stacked vertically with the icon and title label shown side by side.
      */
     mode?: ToolbarFolderMode;
-    /** Maximum number of columns to render before adding more rows (default: 5). Only applies to `grid` mode. */
+    /**
+     * How the expanded panel is presented (default: `'compact'`, the existing popout).
+     * Set `'drawer'` for a headed panel with a visible title, a close action and labeled tiles.
+     */
+    presentation?: ToolbarFolderPresentation;
+    /** Maximum number of columns to render before adding more rows (default: 5, or 3 for the drawer). Not used in `list` mode. */
     maxColumns?: number;
+    /** Drawer presentation: visible heading. Defaults to {@link title}. */
+    heading?: string;
+    /** Drawer presentation: accessible name of the close button. Falls back to `messages.toolbar.closeDrawer`, then `Close`. */
+    closeLabel?: string;
+    /**
+     * Drawer presentation: a data-driven catalogue rendered as labeled tiles before any `children`.
+     * Each item's `payload` is delivered unchanged to {@link onActivate} and on drag; items are never
+     * normalized or filtered.
+     */
+    items?: ReadonlyArray<ToolbarDrawerItem>;
+    /** Drawer presentation: called when a catalogue tile is activated by click, Enter or Space. The consumer decides the insertion target. */
+    onActivate?: (item: ToolbarDrawerItem) => void;
+    /** Drawer presentation: called when a drag of a catalogue tile starts. */
+    onItemDragStart?: (item: ToolbarDrawerItem, event: DragEvent<HTMLButtonElement>) => void;
+    /** Drawer presentation: called when a drag of a catalogue tile ends, whether it was dropped or cancelled. */
+    onItemDragEnd?: (item: ToolbarDrawerItem, event: DragEvent<HTMLButtonElement>) => void;
+    /** Drawer presentation: whether catalogue tiles can be dragged (default: `true`). */
+    draggable?: boolean;
+    /**
+     * Drawer presentation: close the drawer after a tile is activated or a drag is dropped
+     * (default: `false`, so several items can be inserted in a row). A cancelled drag never closes it.
+     */
+    closeOnInsert?: boolean;
     /** Extra class name for the folder root. */
     className?: string;
     /** Stable folder attributes. */
     pt?: ToolbarFolderParts;
-    /** The toolbar buttons shown when the folder is expanded. */
-    children: ReactNode;
+    /** The toolbar buttons shown when the folder is expanded. Optional when a drawer supplies `items`. */
+    children?: ReactNode;
 }
 /**
  * A toolbar folder that reveals a panel of buttons when clicked.
@@ -45,6 +87,10 @@ export interface ToolbarFolderProps {
  *
  * **List mode**: items are stacked vertically with their icon and title label rendered
  * side by side — useful when labels add important context to icon-only buttons.
+ *
+ * **Drawer presentation** (`presentation='drawer'`): a headed panel with a visible title, a close
+ * action and labeled icon tiles. Tiles come from a data-driven `items` catalogue and/or `children`.
+ * The drawer only presents the palette: dropping a tile and deciding what it creates stay with the consumer.
  */
-export declare const ToolbarFolder: ({ icon, title, tooltipPosition, folderDirection, mode, maxColumns, className, pt, children, }: ToolbarFolderProps) => import("react").JSX.Element;
+export declare const ToolbarFolder: ({ icon, title, tooltipPosition, folderDirection, mode, presentation, maxColumns, heading, closeLabel, items: catalogue, onActivate, onItemDragStart, onItemDragEnd, draggable, closeOnInsert, className, pt, children, }: ToolbarFolderProps) => import("react").JSX.Element;
 //# sourceMappingURL=ToolbarFolder.d.ts.map

package/dist/esm/Toolbar/ToolbarFolder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarFolder.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarFolder.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEH,KAAK,oBAAoB,EACzB,KAAK,cAAc,EACnB,KAAK,SAAS,EAOjB,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAgB,CAAC;AAE3C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAmB,CAAC;AAMzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAAwB,CAAC;AAEhE,wDAAwD;AACxD,MAAM,WAAW,kBAAkB;IAC/B,+CAA+C;IAC/C,IAAI,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IACtC,6BAA6B;IAC7B,OAAO,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IAClD,2BAA2B;IAC3B,KAAK,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC1C;AAED,qDAAqD;AACrD,MAAM,WAAW,kBAAkB;IAC/B,wDAAwD;IACxD,IAAI,EAAE,IAAI,CAAC;IAEX,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IAEd,iFAAiF;IACjF,eAAe,CAAC,EAAE,eAAe,CAAC;IAElC,6EAA6E;IAC7E,eAAe,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAEnC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;IAEzB,6GAA6G;IAC7G,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,gCAAgC;IAChC,EAAE,CAAC,EAAE,kBAAkB,CAAC;IAExB,6DAA6D;IAC7D,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,kGAUvB,kBAAkB,gCAkIpB,CAAC"}
+{"version":3,"file":"ToolbarFolder.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarFolder.tsx"],"names":[],"mappings":"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"}