@cratis/components 1.8.2 → 1.9.0

package/dist/esm/Toolbar/ToolbarFolder.js

@@ -1,15 +1,19 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useRef, useMemo, Children, useEffect } from 'react';
 import { IconDisplay } from '../Common/Icon.js';
 import { Tooltip } from '../Common/Tooltip.js';
+import { ToolbarFolderContext } from './ToolbarFolderContext.js';
 
 /**
- * A toolbar folder that reveals a dynamically sized button grid when clicked.
+ * A toolbar folder that reveals a panel of buttons when clicked.
  *
- * The grid keeps a compact footprint for small sets and grows naturally as more
- * items are added. It also balances rows/columns so large sets remain visually even.
+ * **Grid mode** (default): items are arranged in a balanced grid that grows naturally as
+ * more items are added and keeps a compact footprint for small sets.
+ *
+ * **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.
  */
-const ToolbarFolder = ({ icon, tooltip, tooltipPosition = 'right', folderDirection = 'right', maxColumns = 5, children, }) => {
+const ToolbarFolder = ({ icon, title, tooltipPosition = 'right', folderDirection = 'right', mode = 'grid', maxColumns = 5, children, }) => {
     const [isExpanded, setIsExpanded] = useState(false);
     const containerRef = useRef(null);
     const items = useMemo(() => Children.toArray(children).filter(child => child !== null && child !== undefined), [children]);
@@ -39,9 +43,10 @@ const ToolbarFolder = ({ icon, tooltip, tooltipPosition = 'right', folderDirecti
     const activeClass = isExpanded ? 'toolbar-button--active' : '';
     const panelVisibleClass = isExpanded ? 'toolbar-folder-panel--visible' : '';
     const directionClass = `toolbar-folder-panel--${folderDirection}`;
-    return (jsxs("div", { className: 'toolbar-folder-item', ref: containerRef, children: [jsx(Tooltip, { content: tooltip, position: tooltipPosition, children: jsx("button", { type: 'button', "aria-label": tooltip, "aria-expanded": isExpanded, onClick: toggleExpanded, className: `toolbar-button w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer ${activeClass}`, children: jsx(IconDisplay, { icon: icon, className: 'text-lg' }) }) }), jsx("div", { className: `toolbar-folder-panel ${directionClass} ${panelVisibleClass}`, style: {
-                    gridTemplateColumns: `repeat(${columns}, minmax(2.5rem, 2.5rem))`,
-                }, children: items })] }));
+    const modeClass = mode === 'list' ? 'toolbar-folder-panel--list' : '';
+    return (jsx(ToolbarFolderContext.Provider, { value: mode, children: jsxs("div", { className: 'toolbar-folder-item', ref: containerRef, children: [jsx(Tooltip, { content: title, position: tooltipPosition, children: jsx("button", { type: 'button', "aria-label": title, "aria-expanded": isExpanded, onClick: toggleExpanded, className: `toolbar-button w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer ${activeClass}`, children: jsx(IconDisplay, { icon: icon, className: 'text-lg' }) }) }), jsx("div", { className: `toolbar-folder-panel ${directionClass} ${panelVisibleClass} ${modeClass}`, style: mode === 'grid' ? {
+                        gridTemplateColumns: `repeat(${columns}, minmax(2.5rem, 2.5rem))`,
+                    } : undefined, children: items })] }) }));
 };
 
 export { ToolbarFolder };

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

@@ -1 +1 @@
-{"version":3,"file":"ToolbarFolder.js","sources":["../../../Toolbar/ToolbarFolder.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"ToolbarFolder.js","sources":["../../../Toolbar/ToolbarFolder.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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"}

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

@@ -0,0 +1,4 @@
+export type ToolbarFolderMode = 'grid' | 'list';
+export declare const ToolbarFolderContext: import("react").Context<ToolbarFolderMode>;
+export declare const useToolbarFolderMode: () => ToolbarFolderMode;
+//# sourceMappingURL=ToolbarFolderContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarFolderContext.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarFolderContext.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;AAMhD,eAAO,MAAM,oBAAoB,4CAA2C,CAAC;AAM7E,eAAO,MAAM,oBAAoB,QAAO,iBAAqD,CAAC"}

package/dist/esm/Toolbar/ToolbarFolderContext.js

@@ -0,0 +1,17 @@
+import { createContext, useContext } from 'react';
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * Internal context propagated from {@link ToolbarFolder} to its children.
+ * Allows {@link ToolbarButton} to adapt its rendering to the folder's display mode.
+ */
+const ToolbarFolderContext = createContext('grid');
+/**
+ * Returns the current {@link ToolbarFolderMode}.
+ * Defaults to `'grid'` when used outside a {@link ToolbarFolder}.
+ */
+const useToolbarFolderMode = () => useContext(ToolbarFolderContext);
+
+export { ToolbarFolderContext, useToolbarFolderMode };
+//# sourceMappingURL=ToolbarFolderContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarFolderContext.js","sources":["../../../Toolbar/ToolbarFolderContext.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAAA;AACA;AAOA;;;AAGG;MACU,oBAAoB,GAAG,aAAa,CAAoB,MAAM;AAE3E;;;AAGG;AACI,MAAM,oBAAoB,GAAG,MAAyB,UAAU,CAAC,oBAAoB;;;;"}

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

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export interface ToolbarGroupProps {
+    children?: ReactNode;
+    slotName?: string;
+    orientation?: 'vertical' | 'horizontal';
+}
+export declare const ToolbarGroup: ({ children, slotName, orientation }: ToolbarGroupProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ToolbarGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarGroup.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarGroup.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAA6D,MAAM,OAAO,CAAC;AA4G7F,MAAM,WAAW,iBAAiB;IAE9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IAQrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CAC3C;AAmBD,eAAO,MAAM,YAAY,GAAI,qCAAkD,iBAAiB,4CAS/F,CAAC"}

package/dist/esm/Toolbar/ToolbarGroup.js

@@ -0,0 +1,100 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useCallback, useLayoutEffect, useEffect } from 'react';
+import { useToolbarSlot } from './ToolbarSlot.js';
+
+/** How long the fade-out animation runs (ms). React unmounts exiting content after this. */
+const SLOT_TRANSITION_MS = 220;
+/**
+ * Renders slot items with a cross-fade and size-morph transition that mirrors the
+ * {@link ToolbarSection} / {@link ToolbarContext} animation:
+ *
+ * - The slot container resizes smoothly to fit the incoming content.
+ * - The outgoing content fades out while the incoming content fades in simultaneously.
+ *
+ * The size update is intentionally deferred to {@link useEffect} (after paint) so that
+ * the opacity animations start one frame before the resize — matching the feel of
+ * {@link ToolbarSection} context switching.
+ */
+const SlotTransition = ({ slotName, flexClass }) => {
+    const liveItems = useToolbarSlot(slotName);
+    // `current` is the content fading in (or already settled at full opacity).
+    // `exiting` is the previous content fading out, kept alive until its animation completes.
+    const [current, setCurrent] = useState(liveItems);
+    const [exiting, setExiting] = useState([]);
+    const [exitRevision, setExitRevision] = useState(0);
+    // Track `current` in a ref so the liveItems effect can read the latest value
+    // without needing it in its dependency array (avoids an unnecessary re-run loop).
+    const currentRef = useRef(current);
+    currentRef.current = current;
+    const incomingRef = useRef(null);
+    const [size, setSize] = useState(null);
+    const timerRef = useRef(undefined);
+    const hasMountedRef = useRef(false);
+    const measureIncoming = useCallback(() => {
+        if (incomingRef.current) {
+            setSize({
+                width: incomingRef.current.offsetWidth,
+                height: incomingRef.current.offsetHeight,
+            });
+        }
+    }, []);
+    // Set the initial size synchronously before the first paint — no layout flash.
+    useLayoutEffect(() => {
+        measureIncoming();
+    }, []); // mount only
+    // Detect live-items reference change → start cross-fade transition.
+    useEffect(() => {
+        if (liveItems === currentRef.current)
+            return;
+        const old = currentRef.current;
+        if (timerRef.current !== undefined)
+            clearTimeout(timerRef.current);
+        setCurrent(liveItems);
+        if (old.length > 0) {
+            setExiting(old);
+            setExitRevision(r => r + 1);
+            timerRef.current = setTimeout(() => setExiting([]), SLOT_TRANSITION_MS);
+        }
+    }, [liveItems]);
+    // Re-measure the incoming content whenever `current` changes so the container
+    // can size-morph. useEffect (not useLayoutEffect) is intentional: we let the
+    // opacity animation start one frame before the resize — matching ToolbarSection.
+    useEffect(() => {
+        if (!hasMountedRef.current) {
+            hasMountedRef.current = true;
+            return; // initial measurement handled by useLayoutEffect above
+        }
+        measureIncoming();
+    }, [current, measureIncoming]);
+    useEffect(() => () => {
+        if (timerRef.current !== undefined)
+            clearTimeout(timerRef.current);
+    }, []);
+    if (current.length === 0 && exiting.length === 0)
+        return null;
+    return (jsxs("div", { className: 'toolbar-slot-section', style: size ? { width: size.width, height: size.height } : undefined, children: [jsx("div", { ref: incomingRef, className: `toolbar-slot-incoming inline-flex ${flexClass} items-center gap-1`, children: current }), exiting.length > 0 && (jsx("div", { className: `toolbar-slot-outgoing inline-flex ${flexClass} items-center gap-1`, children: exiting }, exitRevision))] }));
+};
+/**
+ * A logical sub-grouping of toolbar items within a {@link Toolbar}.
+ *
+ * Use `ToolbarGroup` to cluster related buttons into a visually cohesive unit.
+ * Groups can participate in the slot system by providing a `slotName` — external
+ * components anywhere in the {@link ToolbarSlotProvider} tree can then inject additional
+ * buttons at a chosen position via {@link ToolbarSlot}.
+ *
+ * @example
+ * ```tsx
+ * <Toolbar>
+ *     <ToolbarGroup slotName="canvas-tools">
+ *         <ToolbarButton icon="pi pi-pencil" title="Draw" />
+ *     </ToolbarGroup>
+ * </Toolbar>
+ * ```
+ */
+const ToolbarGroup = ({ children, slotName, orientation = 'vertical' }) => {
+    const flexClass = orientation === 'horizontal' ? 'flex-row' : 'flex-col';
+    return (jsxs("div", { className: `toolbar-group inline-flex ${flexClass} items-center gap-1 p-2 rounded-2xl`, children: [children, slotName && jsx(SlotTransition, { slotName: slotName, flexClass: flexClass })] }));
+};
+
+export { ToolbarGroup };
+//# sourceMappingURL=ToolbarGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarGroup.js","sources":["../../../Toolbar/ToolbarGroup.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"ToolbarSection.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarSection.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA0B,SAAS,EAA6E,MAAM,OAAO,CAAC;AAKrI,MAAM,WAAW,mBAAmB;IAMhC,aAAa,CAAC,EAAE,MAAM,CAAC;IAGvB,QAAQ,EAAE,SAAS,CAAC;IAGpB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CAC3C;AAaD,eAAO,MAAM,cAAc,GAAI,0CAAuD,mBAAmB,4CAwGxG,CAAC"}
+{"version":3,"file":"ToolbarSection.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarSection.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA0B,SAAS,EAA6E,MAAM,OAAO,CAAC;AA0BrI,MAAM,WAAW,mBAAmB;IAMhC,aAAa,CAAC,EAAE,MAAM,CAAC;IAGvB,QAAQ,EAAE,SAAS,CAAC;IAGpB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CAC3C;AAaD,eAAO,MAAM,cAAc,GAAI,0CAAuD,mBAAmB,4CAkIxG,CAAC"}

package/dist/esm/Toolbar/ToolbarSection.js

@@ -1,6 +1,20 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useRef, useState, Children, isValidElement, useCallback, useLayoutEffect, useEffect } from 'react';
+import { useToolbarSlot } from './ToolbarSlot.js';
 
+/** Width/height transition duration used by the section resize animation (ms). */
+const SECTION_TRANSITION_MS = 350;
+/**
+ * Renders the children of a single {@link ToolbarContext} together with any slot items
+ * that have been registered under the context's `slotName`.
+ *
+ * Extracted into its own component so that the `useToolbarSlot` hook can be called
+ * inside it — hooks cannot be called inside a callback or loop in the parent.
+ */
+const ContextRenderer = ({ children, slotName }) => {
+    const slotItems = useToolbarSlot(slotName ?? '');
+    return (jsxs(Fragment, { children: [children, slotName && slotItems.length > 0 && slotItems] }));
+};
 /**
  * A section within a {@link Toolbar} that supports multiple named contexts.
  *
@@ -16,7 +30,10 @@ const ToolbarSection = ({ activeContext, children, orientation = 'vertical' }) =
     const contextRefs = useRef({});
     const resizeObserverRef = useRef(null);
     const mutationObserverRef = useRef(null);
+    const transitionTimeoutRef = useRef(null);
+    const previousContextRef = useRef(null);
     const [size, setSize] = useState(null);
+    const [isTransitioning, setIsTransitioning] = useState(false);
     const contexts = Children.toArray(children).filter((child) => isValidElement(child) && typeof child.props.name === 'string');
     // Default to the first context if activeContext is not provided
     const effectiveContext = activeContext ?? contexts[0]?.props?.name ?? '';
@@ -26,8 +43,8 @@ const ToolbarSection = ({ activeContext, children, orientation = 'vertical' }) =
         const ref = contextRefs.current[contextName];
         if (ref) {
             setSize({
-                width: Math.max(ref.offsetWidth, ref.scrollWidth),
-                height: Math.max(ref.offsetHeight, ref.scrollHeight),
+                width: ref.offsetWidth,
+                height: ref.offsetHeight,
             });
         }
     }, []);
@@ -36,6 +53,24 @@ const ToolbarSection = ({ activeContext, children, orientation = 'vertical' }) =
     useLayoutEffect(() => {
         measureAndSetSize(effectiveContext);
     }, []); // run only on mount
+    // Clip content only while the section is morphing between contexts so incoming
+    // buttons do not float outside the current bounds during growth.
+    useEffect(() => {
+        if (previousContextRef.current === null) {
+            previousContextRef.current = effectiveContext;
+            return;
+        }
+        if (previousContextRef.current === effectiveContext)
+            return;
+        previousContextRef.current = effectiveContext;
+        setIsTransitioning(true);
+        if (transitionTimeoutRef.current)
+            clearTimeout(transitionTimeoutRef.current);
+        transitionTimeoutRef.current = setTimeout(() => {
+            setIsTransitioning(false);
+            transitionTimeoutRef.current = null;
+        }, SECTION_TRANSITION_MS);
+    }, [effectiveContext]);
     // After a context switch, let the browser paint the opacity transition first,
     // then update the explicit size so the CSS width/height transition kicks in.
     useEffect(() => {
@@ -75,10 +110,14 @@ const ToolbarSection = ({ activeContext, children, orientation = 'vertical' }) =
             mutationObserverRef.current = null;
         };
     }, [effectiveContext, measureAndSetSize]);
-    return (jsx("div", { className: 'toolbar-section', style: size ? { width: size.width, height: size.height } : undefined, children: contexts.map((child) => {
-            const { name, children: contextChildren } = child.props;
+    useEffect(() => () => {
+        if (transitionTimeoutRef.current)
+            clearTimeout(transitionTimeoutRef.current);
+    }, []);
+    return (jsx("div", { className: `toolbar-section ${isTransitioning ? 'toolbar-section--transitioning' : ''}`, style: size ? { width: size.width, height: size.height } : undefined, children: contexts.map((child) => {
+            const { name, children: contextChildren, slotName } = child.props;
             const isActive = name === effectiveContext;
-            return (jsx("div", { ref: (element) => { contextRefs.current[name] = element; }, className: `toolbar-context inline-flex ${flexClass} items-center gap-1 ${isActive ? 'toolbar-context--active' : 'toolbar-context--inactive'}`, children: contextChildren }, name));
+            return (jsx("div", { ref: (element) => { contextRefs.current[name] = element; }, className: `toolbar-context inline-flex ${flexClass} items-center gap-1 ${isActive ? 'toolbar-context--active' : 'toolbar-context--inactive'}`, children: jsx(ContextRenderer, { slotName: slotName, children: contextChildren }) }, name));
         }) }));
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"ToolbarSection.js","sources":["../../../Toolbar/ToolbarSection.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"ToolbarSection.js","sources":["../../../Toolbar/ToolbarSection.tsx"],"sourcesContent":[null],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;AAQA;AACA,MAAM,qBAAqB,GAAG,GAAG;AAEjC;;;;;;AAMG;AACH,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAA8C,KAAI;IAC3F,MAAM,SAAS,GAAG,cAAc,CAAC,QAAQ,IAAI,EAAE,CAAC;AAChD,IAAA,QACIA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACK,QAAQ,EACR,QAAQ,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,SAAS,CAAA,EAAA,CAC/C;AAEX,CAAC;AAkBD;;;;;;;;;;AAUG;AACI,MAAM,cAAc,GAAG,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,WAAW,GAAG,UAAU,EAAuB,KAAI;AACzG,IAAA,MAAM,WAAW,GAAG,MAAM,CAAwC,EAAE,CAAC;AACrE,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAwB,IAAI,CAAC;AAC7D,IAAA,MAAM,mBAAmB,GAAG,MAAM,CAA0B,IAAI,CAAC;AACjE,IAAA,MAAM,oBAAoB,GAAG,MAAM,CAAuC,IAAI,CAAC;AAC/E,IAAA,MAAM,kBAAkB,GAAG,MAAM,CAAgB,IAAI,CAAC;IACtD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAA2C,IAAI,CAAC;IAChF,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAE7D,IAAA,MAAM,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAC9C,CAAC,KAAK,KACF,cAAc,CAAC,KAAK,CAAC,IAAI,OAAQ,KAAK,CAAC,KAA6B,CAAC,IAAI,KAAK,QAAQ,CAC7F;;AAGD,IAAA,MAAM,gBAAgB,GAAG,aAAa,IAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,KAA6B,EAAE,IAAI,IAAI,EAAE;AAEjG,IAAA,MAAM,SAAS,GAAG,WAAW,KAAK,YAAY,GAAG,UAAU,GAAG,UAAU;;AAGxE,IAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,CAAC,WAAmB,KAAI;QAC1D,MAAM,GAAG,GAAG,WAAW,CAAC,OAAO,CAAC,WAAW,CAAC;QAC5C,IAAI,GAAG,EAAE;AACL,YAAA,OAAO,CAAC;gBACJ,KAAK,EAAE,GAAG,CAAC,WAAW;gBACtB,MAAM,EAAE,GAAG,CAAC,YAAY;AAC3B,aAAA,CAAC;QACN;IACJ,CAAC,EAAE,EAAE,CAAC;;;IAIN,eAAe,CAAC,MAAK;QACjB,iBAAiB,CAAC,gBAAgB,CAAC;AACvC,IAAA,CAAC,EAAE,EAAE,CAAC,CAAC;;;IAIP,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,kBAAkB,CAAC,OAAO,KAAK,IAAI,EAAE;AACrC,YAAA,kBAAkB,CAAC,OAAO,GAAG,gBAAgB;YAC7C;QACJ;AACA,QAAA,IAAI,kBAAkB,CAAC,OAAO,KAAK,gBAAgB;YAAE;AAErD,QAAA,kBAAkB,CAAC,OAAO,GAAG,gBAAgB;QAC7C,kBAAkB,CAAC,IAAI,CAAC;QAExB,IAAI,oBAAoB,CAAC,OAAO;AAAE,YAAA,YAAY,CAAC,oBAAoB,CAAC,OAAO,CAAC;AAC5E,QAAA,oBAAoB,CAAC,OAAO,GAAG,UAAU,CAAC,MAAK;YAC3C,kBAAkB,CAAC,KAAK,CAAC;AACzB,YAAA,oBAAoB,CAAC,OAAO,GAAG,IAAI;QACvC,CAAC,EAAE,qBAAqB,CAAC;AAC7B,IAAA,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC;;;IAItB,SAAS,CAAC,MAAK;QACX,iBAAiB,CAAC,gBAAgB,CAAC;AACvC,IAAA,CAAC,EAAE,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;;IAGzC,SAAS,CAAC,MAAK;QACX,MAAM,oBAAoB,GAAG,WAAW,CAAC,OAAO,CAAC,gBAAgB,CAAC;QAClE,IAAI,CAAC,oBAAoB,IAAI,OAAO,cAAc,KAAK,WAAW,EAAE;YAChE;QACJ;QAEA,iBAAiB,CAAC,gBAAgB,CAAC;AAEnC,QAAA,mBAAmB,CAAC,OAAO,EAAE,UAAU,EAAE;AACzC,QAAA,iBAAiB,CAAC,OAAO,EAAE,UAAU,EAAE;AAEvC,QAAA,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,MAAK;YACrC,iBAAiB,CAAC,gBAAgB,CAAC;AACvC,QAAA,CAAC,CAAC;AAEF,QAAA,QAAQ,CAAC,OAAO,CAAC,oBAAoB,CAAC;AACtC,QAAA,iBAAiB,CAAC,OAAO,GAAG,QAAQ;AAEpC,QAAA,IAAI,OAAO,gBAAgB,KAAK,WAAW,EAAE;AACzC,YAAA,MAAM,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,MAAK;gBAC/C,iBAAiB,CAAC,gBAAgB,CAAC;AACvC,YAAA,CAAC,CAAC;AACF,YAAA,gBAAgB,CAAC,OAAO,CAAC,oBAAoB,EAAE;AAC3C,gBAAA,SAAS,EAAE,IAAI;AACf,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,UAAU,EAAE,IAAI;AACnB,aAAA,CAAC;AACF,YAAA,mBAAmB,CAAC,OAAO,GAAG,gBAAgB;QAClD;AAEA,QAAA,OAAO,MAAK;YACR,QAAQ,CAAC,UAAU,EAAE;AACrB,YAAA,IAAI,iBAAiB,CAAC,OAAO,KAAK,QAAQ,EAAE;AACxC,gBAAA,iBAAiB,CAAC,OAAO,GAAG,IAAI;YACpC;AAEA,YAAA,mBAAmB,CAAC,OAAO,EAAE,UAAU,EAAE;AACzC,YAAA,mBAAmB,CAAC,OAAO,GAAG,IAAI;AACtC,QAAA,CAAC;AACL,IAAA,CAAC,EAAE,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;AAEzC,IAAA,SAAS,CAAC,MAAM,MAAK;QACjB,IAAI,oBAAoB,CAAC,OAAO;AAAE,YAAA,YAAY,CAAC,oBAAoB,CAAC,OAAO,CAAC;IAChF,CAAC,EAAE,EAAE,CAAC;IAEN,QACIC,aACI,SAAS,EAAE,mBAAmB,eAAe,GAAG,gCAAgC,GAAG,EAAE,CAAA,CAAE,EACvF,KAAK,EAAE,IAAI,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,SAAS,YAEnE,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,KAAI;AACpB,YAAA,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,eAAe,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC,KAA4B;AACxF,YAAA,MAAM,QAAQ,GAAG,IAAI,KAAK,gBAAgB;YAE1C,QACIA,aAEI,GAAG,EAAE,CAAC,OAAO,KAAI,EAAG,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,EAC1D,SAAS,EAAE,CAAA,4BAAA,EAA+B,SAAS,uBAC/C,QAAQ,GAAG,yBAAyB,GAAG,2BAC3C,CAAA,CAAE,EAAA,QAAA,EAEFA,GAAA,CAAC,eAAe,EAAA,EAAC,QAAQ,EAAE,QAAQ,EAAA,QAAA,EAAG,eAAe,GAAmB,EAAA,EANnE,IAAI,CAOP;QAEd,CAAC,CAAC,EAAA,CACA;AAEd;;;;"}

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

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export interface ToolbarSlotProviderProps {
+    children: ReactNode;
+}
+export declare const ToolbarSlotProvider: ({ children }: ToolbarSlotProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useToolbarSlot: (slotName: string) => ReactNode[];
+export interface ToolbarSlotProps {
+    slotName: string;
+    order?: number;
+    children: ReactNode;
+}
+export declare const ToolbarSlot: ({ slotName, order, children }: ToolbarSlotProps) => null;
+//# sourceMappingURL=ToolbarSlot.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarSlot.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarSlot.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAiB,SAAS,EAA8F,MAAM,OAAO,CAAC;AAkF7I,MAAM,WAAW,wBAAwB;IAKrC,QAAQ,EAAE,SAAS,CAAC;CACvB;AAQD,eAAO,MAAM,mBAAmB,GAAI,cAAc,wBAAwB,4CAGzE,CAAC;AAQF,eAAO,MAAM,cAAc,GAAI,UAAU,MAAM,KAAG,SAAS,EAQ1D,CAAC;AAGF,MAAM,WAAW,gBAAgB;IAK7B,QAAQ,EAAE,MAAM,CAAC;IAMjB,KAAK,CAAC,EAAE,MAAM,CAAC;IAMf,QAAQ,EAAE,SAAS,CAAC;CACvB;AAkBD,eAAO,MAAM,WAAW,GAAI,+BAAmC,gBAAgB,SAa9E,CAAC"}

package/dist/esm/Toolbar/ToolbarSlot.js

@@ -0,0 +1,121 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useId, useContext, useLayoutEffect, useEffect, useState, useCallback, useSyncExternalStore } from 'react';
+
+/** Stable empty snapshot returned when a slot name has no registered content. */
+const _emptySnapshot = [];
+/**
+ * Registry for named toolbar slot entries.
+ * Maintained outside React state so slot registrations never re-render the provider.
+ */
+class ToolbarSlotRegistry {
+    _slots = new Map();
+    _snapshots = new Map();
+    _subscribers = new Set();
+    /**
+     * Register or update a slot entry.
+     * Notifies subscribers only when the content reference or order actually changes.
+     */
+    register(slotName, id, content, order) {
+        if (!this._slots.has(slotName)) {
+            this._slots.set(slotName, new Map());
+        }
+        const slotMap = this._slots.get(slotName);
+        const previous = slotMap.get(id);
+        if (previous?.content === content && previous?.order === order)
+            return;
+        slotMap.set(id, { content, order });
+        this._recompute(slotName);
+        this._notify();
+    }
+    /** Remove a slot entry and notify subscribers. */
+    unregister(slotName, id) {
+        const slotMap = this._slots.get(slotName);
+        if (!slotMap?.has(id))
+            return;
+        slotMap.delete(id);
+        this._recompute(slotName);
+        this._notify();
+    }
+    /** Subscribe to any slot change. Returns an unsubscribe function. */
+    subscribe(fn) {
+        this._subscribers.add(fn);
+        return () => this._subscribers.delete(fn);
+    }
+    /**
+     * Returns a stable snapshot of sorted slot contents for the given slot name.
+     * The reference only changes when the slot set actually changes.
+     */
+    getSnapshot(slotName) {
+        return this._snapshots.get(slotName) ?? _emptySnapshot;
+    }
+    _recompute(slotName) {
+        const slotMap = this._slots.get(slotName);
+        if (!slotMap || slotMap.size === 0) {
+            this._snapshots.delete(slotName);
+            return;
+        }
+        this._snapshots.set(slotName, [...slotMap.values()]
+            .sort((a, b) => a.order - b.order)
+            .map(entry => entry.content));
+    }
+    _notify() {
+        this._subscribers.forEach(fn => fn());
+    }
+}
+const ToolbarSlotContext = createContext(null);
+/**
+ * Provides the toolbar slot registry to the component tree.
+ *
+ * Mount once above both the toolbar and the components that fill slots.
+ * Each provider creates an isolated registry — nesting providers creates isolated scopes.
+ */
+const ToolbarSlotProvider = ({ children }) => {
+    const [registry] = useState(() => new ToolbarSlotRegistry());
+    return jsx(ToolbarSlotContext.Provider, { value: registry, children: children });
+};
+/**
+ * Returns the sorted slot contents for a given `slotName` as a stable array.
+ * Returns an empty array when no {@link ToolbarSlotProvider} is present or when the slot has no content.
+ *
+ * Suitable for direct use inside components that host a slot (e.g. {@link ToolbarGroup}).
+ */
+const useToolbarSlot = (slotName) => {
+    const registry = useContext(ToolbarSlotContext);
+    const subscribe = useCallback((fn) => {
+        if (!registry)
+            return () => { };
+        return registry.subscribe(fn);
+    }, [registry]);
+    const getSnapshot = useCallback(() => registry?.getSnapshot(slotName) ?? _emptySnapshot, [registry, slotName]);
+    return useSyncExternalStore(subscribe, getSnapshot);
+};
+/**
+ * Teleports its children into the named toolbar slot without prop drilling.
+ * Renders nothing itself — place it anywhere inside a {@link ToolbarSlotProvider} tree.
+ *
+ * The nearest {@link ToolbarGroup} or {@link ToolbarContext} with a matching `slotName`
+ * will render the content. Use {@link ToolbarSlotProps.order} to control position relative to
+ * other {@link ToolbarSlot} entries in the same slot.
+ *
+ * @example
+ * ```tsx
+ * // In a feature component, inject a button into the 'canvas-tools' slot:
+ * <ToolbarSlot slotName="canvas-tools" order={10}>
+ *     <ToolbarButton icon="pi pi-star" title="Favorite" />
+ * </ToolbarSlot>
+ * ```
+ */
+const ToolbarSlot = ({ slotName, order = 0, children }) => {
+    const id = useId();
+    const registry = useContext(ToolbarSlotContext);
+    // Re-register on every render so fresh closures are always captured.
+    // The registry skips notification when the content reference hasn't changed.
+    useLayoutEffect(() => {
+        registry?.register(slotName, id, children, order);
+    });
+    useEffect(() => () => registry?.unregister(slotName, id), [id, registry, slotName]);
+    return null;
+};
+
+export { ToolbarSlot, ToolbarSlotProvider, useToolbarSlot };
+//# sourceMappingURL=ToolbarSlot.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarSlot.js","sources":["../../../Toolbar/ToolbarSlot.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"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"}

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

@@ -4,6 +4,8 @@ export { ToolbarButton } from './ToolbarButton';
 export type { ToolbarButtonProps } from './ToolbarButton';
 export { ToolbarContext } from './ToolbarContext';
 export type { ToolbarContextProps } from './ToolbarContext';
+export { ToolbarGroup } from './ToolbarGroup';
+export type { ToolbarGroupProps } from './ToolbarGroup';
 export { ToolbarSection } from './ToolbarSection';
 export type { ToolbarSectionProps } from './ToolbarSection';
 export { ToolbarSeparator } from './ToolbarSeparator';
@@ -12,4 +14,7 @@ export { ToolbarFanOutItem } from './ToolbarFanOutItem';
 export type { ToolbarFanOutItemProps } from './ToolbarFanOutItem';
 export { ToolbarFolder } from './ToolbarFolder';
 export type { ToolbarFolderProps } from './ToolbarFolder';
+export type { ToolbarFolderMode } from './ToolbarFolderContext';
+export { ToolbarSlot, ToolbarSlotProvider, useToolbarSlot } from './ToolbarSlot';
+export type { ToolbarSlotProps, ToolbarSlotProviderProps } from './ToolbarSlot';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../Toolbar/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../Toolbar/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,YAAY,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACjF,YAAY,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC"}

package/dist/esm/Toolbar/index.js

@@ -1,10 +1,12 @@
 export { Toolbar } from './Toolbar.js';
 export { ToolbarButton } from './ToolbarButton.js';
 export { ToolbarContext } from './ToolbarContext.js';
+export { ToolbarGroup } from './ToolbarGroup.js';
 export { ToolbarSection } from './ToolbarSection.js';
 export { ToolbarSeparator } from './ToolbarSeparator.js';
 export { ToolbarFanOutItem } from './ToolbarFanOutItem.js';
 export { ToolbarFolder } from './ToolbarFolder.js';
+export { ToolbarSlot, ToolbarSlotProvider, useToolbarSlot } from './ToolbarSlot.js';
 
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../Toolbar/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAAA;AACA"}
+{"version":3,"file":"index.js","sources":["../../../Toolbar/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;AAAA;AACA"}

package/dist/esm/tailwind-utilities.css

@@ -335,6 +335,9 @@
   .block {
     display: block;
   }
+  .contents {
+    display: contents;
+  }
   .flex {
     display: flex;
   }
@@ -371,6 +374,9 @@
   .flex-1 {
     flex: 1;
   }
+  .flex-shrink-0 {
+    flex-shrink: 0;
+  }
   .flex-grow {
     flex-grow: 1;
   }
@@ -409,6 +415,9 @@
   .justify-center {
     justify-content: center;
   }
+  .justify-start {
+    justify-content: flex-start;
+  }
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
@@ -424,6 +433,9 @@
   .gap-6 {
     gap: calc(var(--spacing) * 6);
   }
+  .gap-8 {
+    gap: calc(var(--spacing) * 8);
+  }
   .space-y-2 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;