@cratis/components 4.23.1 → 4.25.0

package/dist/esm/IconPicker/useGridColumns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGridColumns.js","sources":["../../../IconPicker/useGridColumns.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 { useEffect, useState, type RefObject } from 'react';\n\n/** How many columns a grid is assumed to have until it has been measured. */\nexport const defaultGridColumns = 4;\n\n/**\n * Counts the columns a CSS grid currently lays out, so Up and Down can move a whole row. The browser\n * resolves `repeat(auto-fill, …)` into real tracks, so the count is read back from the grid's computed\n * style whenever it resizes. Environments that cannot lay out - or measure - a grid keep the default.\n * @param grid The grid element.\n * @returns The grid's column count.\n */\nexport const useGridColumns = (grid: RefObject<HTMLElement | null>): number => {\n    const [columns, setColumns] = useState(defaultGridColumns);\n\n    useEffect(() => {\n        const element = grid.current;\n        if (!element || typeof ResizeObserver === 'undefined') return;\n        const measure = () => {\n            const tracks = getComputedStyle(element)\n                .gridTemplateColumns.split(' ')\n                .filter(track => track.endsWith('px')).length;\n            if (tracks > 0) setColumns(tracks);\n        };\n        measure();\n        const observer = new ResizeObserver(measure);\n        observer.observe(element);\n        return () => observer.disconnect();\n    }, [grid]);\n\n    return columns;\n};\n"],"names":[],"mappings":";;AAMO,MAAM,kBAAkB,GAAG;AAS3B,MAAM,cAAc,GAAG,CAAC,IAAmC,KAAY;IAC1E,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,kBAAkB,CAAC;IAE1D,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO;AAC5B,QAAA,IAAI,CAAC,OAAO,IAAI,OAAO,cAAc,KAAK,WAAW;YAAE;QACvD,MAAM,OAAO,GAAG,MAAK;AACjB,YAAA,MAAM,MAAM,GAAG,gBAAgB,CAAC,OAAO;AAClC,iBAAA,mBAAmB,CAAC,KAAK,CAAC,GAAG;AAC7B,iBAAA,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM;YACjD,IAAI,MAAM,GAAG,CAAC;gBAAE,UAAU,CAAC,MAAM,CAAC;AACtC,QAAA,CAAC;AACD,QAAA,OAAO,EAAE;AACT,QAAA,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC;AAC5C,QAAA,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC;AACzB,QAAA,OAAO,MAAM,QAAQ,CAAC,UAAU,EAAE;AACtC,IAAA,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;AAEV,IAAA,OAAO,OAAO;AAClB;;"}

package/dist/esm/IconPicker/useIconPickerBrowser.d.ts

@@ -0,0 +1,10 @@
+import type { IconPickerBrowser } from './IconPickerBrowser.js';
+import type { IconPickerEntry } from './IconPickerEntry.js';
+/**
+ * Holds the popout's search and filters and derives what they show. The search index is built once
+ * per catalog; typing only filters it, so a large library stays responsive.
+ * @param icons The catalog's icons.
+ * @returns What to show, and the controls that change it.
+ */
+export declare const useIconPickerBrowser: (icons: readonly IconPickerEntry[]) => IconPickerBrowser;
+//# sourceMappingURL=useIconPickerBrowser.d.ts.map

package/dist/esm/IconPicker/useIconPickerBrowser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIconPickerBrowser.d.ts","sourceRoot":"","sources":["../../../IconPicker/useIconPickerBrowser.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAqB,CAAC;AAC7D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAmB,CAAC;AAKzD;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,UAAW,SAAS,eAAe,EAAE,KAAG,iBAyCxE,CAAC"}

package/dist/esm/IconPicker/useIconPickerBrowser.js

@@ -0,0 +1,45 @@
+import { useState, useMemo } from 'react';
+import { createIconPickerIndex } from './createIconPickerIndex.js';
+import { groupIconPickerByCategory } from './groupIconPickerByCategory.js';
+import { searchIconPickerIndex } from './searchIconPickerIndex.js';
+
+const useIconPickerBrowser = (icons) => {
+    const [query, setQuery] = useState('');
+    const [category, setCategory] = useState();
+    const [library, setLibrary] = useState();
+    const index = useMemo(() => createIconPickerIndex(icons), [icons]);
+    return useMemo(() => {
+        const inLibrary = library === undefined ? index : index.filter(candidate => candidate.entry.library === library);
+        const searched = searchIconPickerIndex(inLibrary, query.trim());
+        const categories = groupIconPickerByCategory(searched);
+        const matchesCategory = category === undefined
+            ? searched
+            : searched.filter(candidate => category === ''
+                ? candidate.entry.categories.length === 0
+                : candidate.entry.categories.includes(category));
+        const matches = matchesCategory.map(candidate => candidate.entry);
+        const isFiltered = query.trim() !== '' || category !== undefined || library !== undefined;
+        return {
+            query,
+            setQuery,
+            category,
+            setCategory,
+            library,
+            setLibrary,
+            reset: () => {
+                setQuery('');
+                setCategory(undefined);
+                setLibrary(undefined);
+            },
+            isFiltered,
+            categories,
+            matchCount: matches.length,
+            matches,
+            groups: categories,
+            isGrouped: query.trim() === '' && category === undefined,
+        };
+    }, [index, query, category, library]);
+};
+
+export { useIconPickerBrowser };
+//# sourceMappingURL=useIconPickerBrowser.js.map

package/dist/esm/IconPicker/useIconPickerBrowser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIconPickerBrowser.js","sources":["../../../IconPicker/useIconPickerBrowser.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 { useMemo, useState } from 'react';\nimport type { IconPickerBrowser } from './IconPickerBrowser';\nimport type { IconPickerEntry } from './IconPickerEntry';\nimport { createIconPickerIndex } from './createIconPickerIndex';\nimport { groupIconPickerByCategory } from './groupIconPickerByCategory';\nimport { searchIconPickerIndex } from './searchIconPickerIndex';\n\n/**\n * Holds the popout's search and filters and derives what they show. The search index is built once\n * per catalog; typing only filters it, so a large library stays responsive.\n * @param icons The catalog's icons.\n * @returns What to show, and the controls that change it.\n */\nexport const useIconPickerBrowser = (icons: readonly IconPickerEntry[]): IconPickerBrowser => {\n    const [query, setQuery] = useState('');\n    const [category, setCategory] = useState<string | undefined>();\n    const [library, setLibrary] = useState<string | undefined>();\n    const index = useMemo(() => createIconPickerIndex(icons), [icons]);\n\n    return useMemo(() => {\n        const inLibrary = library === undefined ? index : index.filter(candidate => candidate.entry.library === library);\n        const searched = searchIconPickerIndex(inLibrary, query.trim());\n        const categories = groupIconPickerByCategory(searched);\n        const matchesCategory =\n            category === undefined\n                ? searched\n                : searched.filter(candidate =>\n                      category === ''\n                          ? candidate.entry.categories.length === 0\n                          : candidate.entry.categories.includes(category),\n                  );\n        const matches = matchesCategory.map(candidate => candidate.entry);\n        const isFiltered = query.trim() !== '' || category !== undefined || library !== undefined;\n\n        return {\n            query,\n            setQuery,\n            category,\n            setCategory,\n            library,\n            setLibrary,\n            reset: () => {\n                setQuery('');\n                setCategory(undefined);\n                setLibrary(undefined);\n            },\n            isFiltered,\n            categories,\n            matchCount: matches.length,\n            matches,\n            groups: categories,\n            isGrouped: query.trim() === '' && category === undefined,\n        };\n    }, [index, query, category, library]);\n};\n"],"names":[],"mappings":";;;;;AAgBO,MAAM,oBAAoB,GAAG,CAAC,KAAiC,KAAuB;IACzF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC;IACtC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,EAAsB;IAC9D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,EAAsB;AAC5D,IAAA,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,qBAAqB,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IAElE,OAAO,OAAO,CAAC,MAAK;AAChB,QAAA,MAAM,SAAS,GAAG,OAAO,KAAK,SAAS,GAAG,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,IAAI,SAAS,CAAC,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC;QAChH,MAAM,QAAQ,GAAG,qBAAqB,CAAC,SAAS,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC;AAC/D,QAAA,MAAM,UAAU,GAAG,yBAAyB,CAAC,QAAQ,CAAC;AACtD,QAAA,MAAM,eAAe,GACjB,QAAQ,KAAK;AACT,cAAE;cACA,QAAQ,CAAC,MAAM,CAAC,SAAS,IACrB,QAAQ,KAAK;kBACP,SAAS,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,KAAK;AACxC,kBAAE,SAAS,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,QAAQ,CAAC,CACtD;AACX,QAAA,MAAM,OAAO,GAAG,eAAe,CAAC,GAAG,CAAC,SAAS,IAAI,SAAS,CAAC,KAAK,CAAC;AACjE,QAAA,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,QAAQ,KAAK,SAAS,IAAI,OAAO,KAAK,SAAS;QAEzF,OAAO;YACH,KAAK;YACL,QAAQ;YACR,QAAQ;YACR,WAAW;YACX,OAAO;YACP,UAAU;YACV,KAAK,EAAE,MAAK;gBACR,QAAQ,CAAC,EAAE,CAAC;gBACZ,WAAW,CAAC,SAAS,CAAC;gBACtB,UAAU,CAAC,SAAS,CAAC;YACzB,CAAC;YACD,UAAU;YACV,UAAU;YACV,UAAU,EAAE,OAAO,CAAC,MAAM;YAC1B,OAAO;AACP,YAAA,MAAM,EAAE,UAAU;YAClB,SAAS,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,QAAQ,KAAK,SAAS;SAC3D;IACL,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;AACzC;;"}

package/dist/esm/IconPicker/useIsVisible.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Reports whether an element has come near the viewport, and stays true once it has - a preview that
+ * has been drawn is kept rather than torn down when scrolled away. Environments without
+ * `IntersectionObserver` treat everything as visible.
+ * @param margin How far outside the viewport counts as near, as a CSS margin.
+ * @returns A ref to put on the element, and whether it has been near the viewport.
+ */
+export declare const useIsVisible: (margin?: string) => {
+    ref: (element: HTMLElement | null) => void;
+    isVisible: boolean;
+};
+//# sourceMappingURL=useIsVisible.d.ts.map

package/dist/esm/IconPicker/useIsVisible.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsVisible.d.ts","sourceRoot":"","sources":["../../../IconPicker/useIsVisible.ts"],"names":[],"mappings":"AAKA;;;;;;GAMG;AACH,eAAO,MAAM,YAAY;mBAOP,WAAW,GAAG,IAAI;;CAkBnC,CAAC"}

package/dist/esm/IconPicker/useIsVisible.js

@@ -0,0 +1,23 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+
+const useIsVisible = (margin = '160px') => {
+    const [isVisible, setIsVisible] = useState(typeof IntersectionObserver === 'undefined');
+    const observer = useRef(undefined);
+    useEffect(() => () => observer.current?.disconnect(), []);
+    const ref = useCallback((element) => {
+        observer.current?.disconnect();
+        if (!element || isVisible || typeof IntersectionObserver === 'undefined')
+            return;
+        observer.current = new IntersectionObserver(entries => {
+            if (entries.some(entry => entry.isIntersecting)) {
+                setIsVisible(true);
+                observer.current?.disconnect();
+            }
+        }, { rootMargin: margin });
+        observer.current.observe(element);
+    }, [isVisible, margin]);
+    return { ref, isVisible };
+};
+
+export { useIsVisible };
+//# sourceMappingURL=useIsVisible.js.map

package/dist/esm/IconPicker/useIsVisible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsVisible.js","sources":["../../../IconPicker/useIsVisible.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 { useCallback, useEffect, useRef, useState } from 'react';\n\n/**\n * Reports whether an element has come near the viewport, and stays true once it has - a preview that\n * has been drawn is kept rather than torn down when scrolled away. Environments without\n * `IntersectionObserver` treat everything as visible.\n * @param margin How far outside the viewport counts as near, as a CSS margin.\n * @returns A ref to put on the element, and whether it has been near the viewport.\n */\nexport const useIsVisible = (margin = '160px') => {\n    const [isVisible, setIsVisible] = useState(typeof IntersectionObserver === 'undefined');\n    const observer = useRef<IntersectionObserver | undefined>(undefined);\n\n    useEffect(() => () => observer.current?.disconnect(), []);\n\n    const ref = useCallback(\n        (element: HTMLElement | null) => {\n            observer.current?.disconnect();\n            if (!element || isVisible || typeof IntersectionObserver === 'undefined') return;\n            observer.current = new IntersectionObserver(\n                entries => {\n                    if (entries.some(entry => entry.isIntersecting)) {\n                        setIsVisible(true);\n                        observer.current?.disconnect();\n                    }\n                },\n                { rootMargin: margin },\n            );\n            observer.current.observe(element);\n        },\n        [isVisible, margin],\n    );\n\n    return { ref, isVisible };\n};\n"],"names":[],"mappings":";;MAYa,YAAY,GAAG,CAAC,MAAM,GAAG,OAAO,KAAI;AAC7C,IAAA,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,OAAO,oBAAoB,KAAK,WAAW,CAAC;AACvF,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAmC,SAAS,CAAC;AAEpE,IAAA,SAAS,CAAC,MAAM,MAAM,QAAQ,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC;AAEzD,IAAA,MAAM,GAAG,GAAG,WAAW,CACnB,CAAC,OAA2B,KAAI;AAC5B,QAAA,QAAQ,CAAC,OAAO,EAAE,UAAU,EAAE;QAC9B,IAAI,CAAC,OAAO,IAAI,SAAS,IAAI,OAAO,oBAAoB,KAAK,WAAW;YAAE;QAC1E,QAAQ,CAAC,OAAO,GAAG,IAAI,oBAAoB,CACvC,OAAO,IAAG;AACN,YAAA,IAAI,OAAO,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,cAAc,CAAC,EAAE;gBAC7C,YAAY,CAAC,IAAI,CAAC;AAClB,gBAAA,QAAQ,CAAC,OAAO,EAAE,UAAU,EAAE;YAClC;AACJ,QAAA,CAAC,EACD,EAAE,UAAU,EAAE,MAAM,EAAE,CACzB;AACD,QAAA,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC;AACrC,IAAA,CAAC,EACD,CAAC,SAAS,EAAE,MAAM,CAAC,CACtB;AAED,IAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE;AAC7B;;"}

package/dist/esm/IconPicker/useNarrowViewport.d.ts

@@ -0,0 +1,9 @@
+/** Viewports at most this wide show the popout as a contained sheet rather than anchored to the trigger. */
+export declare const narrowViewportQuery = "(max-width: 30rem)";
+/**
+ * Whether the viewport is narrow enough that the popout should be a sheet. Server rendering and
+ * environments without `matchMedia` are never narrow.
+ * @returns True on a narrow viewport.
+ */
+export declare const useNarrowViewport: () => boolean;
+//# sourceMappingURL=useNarrowViewport.d.ts.map

package/dist/esm/IconPicker/useNarrowViewport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNarrowViewport.d.ts","sourceRoot":"","sources":["../../../IconPicker/useNarrowViewport.ts"],"names":[],"mappings":"AAKA,4GAA4G;AAC5G,eAAO,MAAM,mBAAmB,uBAAuB,CAAC;AAYxD;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,QAAO,OAA6D,CAAC"}

package/dist/esm/IconPicker/useNarrowViewport.js

@@ -0,0 +1,15 @@
+import { useSyncExternalStore } from 'react';
+
+const narrowViewportQuery = '(max-width: 30rem)';
+const subscribe = (notify) => {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
+        return () => undefined;
+    const query = window.matchMedia(narrowViewportQuery);
+    query.addEventListener('change', notify);
+    return () => query.removeEventListener('change', notify);
+};
+const read = () => typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia(narrowViewportQuery).matches;
+const useNarrowViewport = () => useSyncExternalStore(subscribe, read, () => false);
+
+export { narrowViewportQuery, useNarrowViewport };
+//# sourceMappingURL=useNarrowViewport.js.map

package/dist/esm/IconPicker/useNarrowViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNarrowViewport.js","sources":["../../../IconPicker/useNarrowViewport.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 { useSyncExternalStore } from 'react';\n\n/** Viewports at most this wide show the popout as a contained sheet rather than anchored to the trigger. */\nexport const narrowViewportQuery = '(max-width: 30rem)';\n\nconst subscribe = (notify: () => void) => {\n    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return () => undefined;\n    const query = window.matchMedia(narrowViewportQuery);\n    query.addEventListener('change', notify);\n    return () => query.removeEventListener('change', notify);\n};\n\nconst read = () =>\n    typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia(narrowViewportQuery).matches;\n\n/**\n * Whether the viewport is narrow enough that the popout should be a sheet. Server rendering and\n * environments without `matchMedia` are never narrow.\n * @returns True on a narrow viewport.\n */\nexport const useNarrowViewport = (): boolean => useSyncExternalStore(subscribe, read, () => false);\n"],"names":[],"mappings":";;AAMO,MAAM,mBAAmB,GAAG;AAEnC,MAAM,SAAS,GAAG,CAAC,MAAkB,KAAI;IACrC,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,OAAO,MAAM,CAAC,UAAU,KAAK,UAAU;AAAE,QAAA,OAAO,MAAM,SAAS;IACpG,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,mBAAmB,CAAC;AACpD,IAAA,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,CAAC;IACxC,OAAO,MAAM,KAAK,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,CAAC;AAC5D,CAAC;AAED,MAAM,IAAI,GAAG,MACT,OAAO,MAAM,KAAK,WAAW,IAAI,OAAO,MAAM,CAAC,UAAU,KAAK,UAAU,IAAI,MAAM,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAC,OAAO;AAOvH,MAAM,iBAAiB,GAAG,MAAe,oBAAoB,CAAC,SAAS,EAAE,IAAI,EAAE,MAAM,KAAK;;"}

package/dist/esm/IconPicker/useRovingFocus.d.ts

@@ -0,0 +1,29 @@
+import { type KeyboardEvent, type RefObject } from 'react';
+/** What {@link useRovingFocus} hands to the container and each item. */
+export interface RovingFocus {
+    /** The container the items live in. */
+    containerRef: RefObject<HTMLDivElement | null>;
+    /** Moves focus between items; put on the container. */
+    onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+    /**
+     * The props of the item at an index: its tab stop, its index marker, and the focus handler that
+     * keeps the tab stop where focus last was.
+     * @param index The item's index.
+     */
+    itemProps: (index: number) => {
+        tabIndex: number;
+        onFocus: () => void;
+        [attribute: `data-${string}`]: number;
+    };
+}
+/**
+ * A roving tab stop over a row or grid of items: one item is reachable with Tab, and the arrow keys,
+ * Home and End move focus among the rest. Items are located through their `data-roving-index`
+ * attribute, so they can be any element.
+ * @param count How many items there are.
+ * @param columns How many items make a row. Zero for a single row, where only Left/Right move focus.
+ * @param preferredIndex The item to make the tab stop when focus has not moved yet, such as the selection.
+ * @returns What to put on the container and on each item.
+ */
+export declare const useRovingFocus: (count: number, columns: number, preferredIndex?: number) => RovingFocus;
+//# sourceMappingURL=useRovingFocus.d.ts.map

package/dist/esm/IconPicker/useRovingFocus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRovingFocus.d.ts","sourceRoot":"","sources":["../../../IconPicker/useRovingFocus.ts"],"names":[],"mappings":"AAGA,OAAO,EAA+B,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQxF,wEAAwE;AACxE,MAAM,WAAW,WAAW;IACxB,uCAAuC;IACvC,YAAY,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAE/C,uDAAuD;IACvD,SAAS,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEvD;;;;OAIG;IACH,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK;QAC1B,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,CAAC,SAAS,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,CAAC;KACzC,CAAC;CACL;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,UAAW,MAAM,WAAW,MAAM,8BAAuB,WA6DnF,CAAC"}

package/dist/esm/IconPicker/useRovingFocus.js

@@ -0,0 +1,70 @@
+import { useRef, useState, useEffect } from 'react';
+
+const itemAttribute = 'data-roving-index';
+const isRightToLeft = (element) => getComputedStyle(element).direction === 'rtl' || element.closest('[dir="rtl"]') !== null;
+const useRovingFocus = (count, columns, preferredIndex = 0) => {
+    const containerRef = useRef(null);
+    const [focusedIndex, setFocusedIndex] = useState();
+    const tabStop = focusedIndex !== undefined && focusedIndex < count ? focusedIndex : Math.min(Math.max(preferredIndex, 0), Math.max(count - 1, 0));
+    useEffect(() => {
+        if (focusedIndex !== undefined && focusedIndex >= count)
+            setFocusedIndex(undefined);
+    }, [count, focusedIndex]);
+    const focusItem = (index) => {
+        const target = containerRef.current?.querySelector(`[${itemAttribute}="${index}"]`);
+        if (!target)
+            return;
+        setFocusedIndex(index);
+        target.focus();
+    };
+    const onKeyDown = (event) => {
+        if (event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        const current = event.target.closest(`[${itemAttribute}]`);
+        if (!current || !containerRef.current?.contains(current))
+            return;
+        const index = Number(current.getAttribute(itemAttribute));
+        const step = columns > 0 ? columns : 0;
+        const forward = isRightToLeft(containerRef.current) ? 'ArrowLeft' : 'ArrowRight';
+        let next;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowLeft':
+                next = event.key === forward ? index + 1 : index - 1;
+                break;
+            case 'ArrowDown':
+                if (step > 0)
+                    next = index + step;
+                break;
+            case 'ArrowUp':
+                if (step > 0)
+                    next = index - step;
+                break;
+            case 'Home':
+                next = 0;
+                break;
+            case 'End':
+                next = count - 1;
+                break;
+            default:
+                return;
+        }
+        if (next === undefined)
+            return;
+        event.preventDefault();
+        if (next >= 0 && next < count)
+            focusItem(next);
+    };
+    return {
+        containerRef,
+        onKeyDown,
+        itemProps: index => ({
+            tabIndex: index === tabStop ? 0 : -1,
+            onFocus: () => setFocusedIndex(index),
+            [itemAttribute]: index,
+        }),
+    };
+};
+
+export { useRovingFocus };
+//# sourceMappingURL=useRovingFocus.js.map

package/dist/esm/IconPicker/useRovingFocus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRovingFocus.js","sources":["../../../IconPicker/useRovingFocus.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 { useEffect, useRef, useState, type KeyboardEvent, type RefObject } from 'react';\n\n/** The attribute every roving item carries, holding its index. */\nconst itemAttribute = 'data-roving-index';\n\nconst isRightToLeft = (element: HTMLElement) =>\n    getComputedStyle(element).direction === 'rtl' || element.closest('[dir=\"rtl\"]') !== null;\n\n/** What {@link useRovingFocus} hands to the container and each item. */\nexport interface RovingFocus {\n    /** The container the items live in. */\n    containerRef: RefObject<HTMLDivElement | null>;\n\n    /** Moves focus between items; put on the container. */\n    onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;\n\n    /**\n     * The props of the item at an index: its tab stop, its index marker, and the focus handler that\n     * keeps the tab stop where focus last was.\n     * @param index The item's index.\n     */\n    itemProps: (index: number) => {\n        tabIndex: number;\n        onFocus: () => void;\n        [attribute: `data-${string}`]: number;\n    };\n}\n\n/**\n * A roving tab stop over a row or grid of items: one item is reachable with Tab, and the arrow keys,\n * Home and End move focus among the rest. Items are located through their `data-roving-index`\n * attribute, so they can be any element.\n * @param count How many items there are.\n * @param columns How many items make a row. Zero for a single row, where only Left/Right move focus.\n * @param preferredIndex The item to make the tab stop when focus has not moved yet, such as the selection.\n * @returns What to put on the container and on each item.\n */\nexport const useRovingFocus = (count: number, columns: number, preferredIndex = 0): RovingFocus => {\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const [focusedIndex, setFocusedIndex] = useState<number | undefined>();\n\n    // The tab stop falls back to the preferred item when the focused one is no longer in the list.\n    const tabStop = focusedIndex !== undefined && focusedIndex < count ? focusedIndex : Math.min(Math.max(preferredIndex, 0), Math.max(count - 1, 0));\n\n    useEffect(() => {\n        if (focusedIndex !== undefined && focusedIndex >= count) setFocusedIndex(undefined);\n    }, [count, focusedIndex]);\n\n    const focusItem = (index: number) => {\n        const target = containerRef.current?.querySelector<HTMLElement>(`[${itemAttribute}=\"${index}\"]`);\n        if (!target) return;\n        setFocusedIndex(index);\n        target.focus();\n    };\n\n    const onKeyDown = (event: KeyboardEvent<HTMLElement>) => {\n        if (event.altKey || event.ctrlKey || event.metaKey) return;\n        const current = (event.target as HTMLElement).closest<HTMLElement>(`[${itemAttribute}]`);\n        if (!current || !containerRef.current?.contains(current)) return;\n        const index = Number(current.getAttribute(itemAttribute));\n        const step = columns > 0 ? columns : 0;\n        // Right and Left name visual directions, so they swap places in a right-to-left layout.\n        const forward = isRightToLeft(containerRef.current) ? 'ArrowLeft' : 'ArrowRight';\n        let next: number | undefined;\n        switch (event.key) {\n            case 'ArrowRight':\n            case 'ArrowLeft':\n                next = event.key === forward ? index + 1 : index - 1;\n                break;\n            case 'ArrowDown':\n                if (step > 0) next = index + step;\n                break;\n            case 'ArrowUp':\n                if (step > 0) next = index - step;\n                break;\n            case 'Home':\n                next = 0;\n                break;\n            case 'End':\n                next = count - 1;\n                break;\n            default:\n                return;\n        }\n        if (next === undefined) return;\n        event.preventDefault();\n        if (next >= 0 && next < count) focusItem(next);\n    };\n\n    return {\n        containerRef,\n        onKeyDown,\n        itemProps: index => ({\n            tabIndex: index === tabStop ? 0 : -1,\n            onFocus: () => setFocusedIndex(index),\n            [itemAttribute]: index,\n        }),\n    };\n};\n"],"names":[],"mappings":";;AAMA,MAAM,aAAa,GAAG,mBAAmB;AAEzC,MAAM,aAAa,GAAG,CAAC,OAAoB,KACvC,gBAAgB,CAAC,OAAO,CAAC,CAAC,SAAS,KAAK,KAAK,IAAI,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC,KAAK,IAAI;AA+BrF,MAAM,cAAc,GAAG,CAAC,KAAa,EAAE,OAAe,EAAE,cAAc,GAAG,CAAC,KAAiB;AAC9F,IAAA,MAAM,YAAY,GAAG,MAAM,CAAwB,IAAI,CAAC;IACxD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,EAAsB;AAGtE,IAAA,MAAM,OAAO,GAAG,YAAY,KAAK,SAAS,IAAI,YAAY,GAAG,KAAK,GAAG,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,cAAc,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;IAEjJ,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,YAAY,KAAK,SAAS,IAAI,YAAY,IAAI,KAAK;YAAE,eAAe,CAAC,SAAS,CAAC;AACvF,IAAA,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;AAEzB,IAAA,MAAM,SAAS,GAAG,CAAC,KAAa,KAAI;AAChC,QAAA,MAAM,MAAM,GAAG,YAAY,CAAC,OAAO,EAAE,aAAa,CAAc,CAAA,CAAA,EAAI,aAAa,CAAA,EAAA,EAAK,KAAK,CAAA,EAAA,CAAI,CAAC;AAChG,QAAA,IAAI,CAAC,MAAM;YAAE;QACb,eAAe,CAAC,KAAK,CAAC;QACtB,MAAM,CAAC,KAAK,EAAE;AAClB,IAAA,CAAC;AAED,IAAA,MAAM,SAAS,GAAG,CAAC,KAAiC,KAAI;QACpD,IAAI,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO;YAAE;AACpD,QAAA,MAAM,OAAO,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAAc,CAAA,CAAA,EAAI,aAAa,CAAA,CAAA,CAAG,CAAC;QACxF,IAAI,CAAC,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,QAAQ,CAAC,OAAO,CAAC;YAAE;QAC1D,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;AACzD,QAAA,MAAM,IAAI,GAAG,OAAO,GAAG,CAAC,GAAG,OAAO,GAAG,CAAC;AAEtC,QAAA,MAAM,OAAO,GAAG,aAAa,CAAC,YAAY,CAAC,OAAO,CAAC,GAAG,WAAW,GAAG,YAAY;AAChF,QAAA,IAAI,IAAwB;AAC5B,QAAA,QAAQ,KAAK,CAAC,GAAG;AACb,YAAA,KAAK,YAAY;AACjB,YAAA,KAAK,WAAW;AACZ,gBAAA,IAAI,GAAG,KAAK,CAAC,GAAG,KAAK,OAAO,GAAG,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC;gBACpD;AACJ,YAAA,KAAK,WAAW;gBACZ,IAAI,IAAI,GAAG,CAAC;AAAE,oBAAA,IAAI,GAAG,KAAK,GAAG,IAAI;gBACjC;AACJ,YAAA,KAAK,SAAS;gBACV,IAAI,IAAI,GAAG,CAAC;AAAE,oBAAA,IAAI,GAAG,KAAK,GAAG,IAAI;gBACjC;AACJ,YAAA,KAAK,MAAM;gBACP,IAAI,GAAG,CAAC;gBACR;AACJ,YAAA,KAAK,KAAK;AACN,gBAAA,IAAI,GAAG,KAAK,GAAG,CAAC;gBAChB;AACJ,YAAA;gBACI;;QAER,IAAI,IAAI,KAAK,SAAS;YAAE;QACxB,KAAK,CAAC,cAAc,EAAE;AACtB,QAAA,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,GAAG,KAAK;YAAE,SAAS,CAAC,IAAI,CAAC;AAClD,IAAA,CAAC;IAED,OAAO;QACH,YAAY;QACZ,SAAS;AACT,QAAA,SAAS,EAAE,KAAK,KAAK;AACjB,YAAA,QAAQ,EAAE,KAAK,KAAK,OAAO,GAAG,CAAC,GAAG,EAAE;AACpC,YAAA,OAAO,EAAE,MAAM,eAAe,CAAC,KAAK,CAAC;YACrC,CAAC,aAAa,GAAG,KAAK;SACzB,CAAC;KACL;AACL;;"}

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