@cratis/components 1.8.2 → 1.9.1

package/dist/cjs/Toolbar/ToolbarSlot.js

@@ -0,0 +1,125 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('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 = React.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] = React.useState(() => new ToolbarSlotRegistry());
+    return jsxRuntime.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 = React.useContext(ToolbarSlotContext);
+    const subscribe = React.useCallback((fn) => {
+        if (!registry)
+            return () => { };
+        return registry.subscribe(fn);
+    }, [registry]);
+    const getSnapshot = React.useCallback(() => registry?.getSnapshot(slotName) ?? _emptySnapshot, [registry, slotName]);
+    return React.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 = React.useId();
+    const registry = React.useContext(ToolbarSlotContext);
+    // Re-register on every render so fresh closures are always captured.
+    // The registry skips notification when the content reference hasn't changed.
+    React.useLayoutEffect(() => {
+        registry?.register(slotName, id, children, order);
+    });
+    React.useEffect(() => () => registry?.unregister(slotName, id), [id, registry, slotName]);
+    return null;
+};
+
+exports.ToolbarSlot = ToolbarSlot;
+exports.ToolbarSlotProvider = ToolbarSlotProvider;
+exports.useToolbarSlot = useToolbarSlot;
+//# sourceMappingURL=ToolbarSlot.js.map

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

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

package/dist/cjs/Toolbar/index.js

@@ -3,10 +3,12 @@
 var Toolbar = require('./Toolbar.js');
 var ToolbarButton = require('./ToolbarButton.js');
 var ToolbarContext = require('./ToolbarContext.js');
+var ToolbarGroup = require('./ToolbarGroup.js');
 var ToolbarSection = require('./ToolbarSection.js');
 var ToolbarSeparator = require('./ToolbarSeparator.js');
 var ToolbarFanOutItem = require('./ToolbarFanOutItem.js');
 var ToolbarFolder = require('./ToolbarFolder.js');
+var ToolbarSlot = require('./ToolbarSlot.js');
 
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
@@ -14,8 +16,12 @@ var ToolbarFolder = require('./ToolbarFolder.js');
 exports.Toolbar = Toolbar.Toolbar;
 exports.ToolbarButton = ToolbarButton.ToolbarButton;
 exports.ToolbarContext = ToolbarContext.ToolbarContext;
+exports.ToolbarGroup = ToolbarGroup.ToolbarGroup;
 exports.ToolbarSection = ToolbarSection.ToolbarSection;
 exports.ToolbarSeparator = ToolbarSeparator.ToolbarSeparator;
 exports.ToolbarFanOutItem = ToolbarFanOutItem.ToolbarFanOutItem;
 exports.ToolbarFolder = ToolbarFolder.ToolbarFolder;
+exports.ToolbarSlot = ToolbarSlot.ToolbarSlot;
+exports.ToolbarSlotProvider = ToolbarSlot.ToolbarSlotProvider;
+exports.useToolbarSlot = ToolbarSlot.useToolbarSlot;
 //# sourceMappingURL=index.js.map

package/dist/cjs/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/cjs/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;

package/dist/esm/CommandDialog/CommandStepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommandStepper.d.ts","sourceRoot":"","sources":["../../../CommandDialog/CommandStepper.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAA2B,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGhF,OAAO,EAKH,KAAK,gBAAgB,EACxB,MAAM,4BAA4B,CAAC;AACpC,OAAO,sBAAsB,CAAC;AAM9B,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,YAAY,EACrD,aAAa,GAAG,gBAAgB,GAAG,QAAQ,GAAG,cAAc,GAAG,OAAO,GAAG,KAAK,GAAG,IAAI,GAAG,WAAW,GAAG,UAAU,CACnH,CAAC;AAEF,MAAM,WAAW,0BAA2B,SAAQ,yBAAyB;IAEzE,UAAU,EAAE,MAAM,CAAC;IAEnB,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAE1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,kBAAkB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjD,oBAAoB,CAAC,EAAE,CAAC,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IAE3D,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;IAErD,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC;IAE/C,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,QAAQ,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,mBAAmB,CAAC,QAAQ,SAAS,MAAM,EAAE,SAAS,GAAG,MAAM,CAC5E,SAAQ,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAE,UAAU,CAAC,EAC3D,IAAI,CAAC,0BAA0B,EAAE,YAAY,GAAG,cAAc,GAAG,oBAAoB,GAAG,sBAAsB,GAAG,eAAe,GAAG,cAAc,GAAG,kBAAkB,GAAG,UAAU,CAAC;IAExL,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAmDD,eAAO,MAAM,qBAAqB,GAAI,+TA0BnC,0BAA0B,4CA2I5B,CAAC;AAuGF,eAAO,MAAM,cAAc,GAAI,QAAQ,SAAS,MAAM,GAAG,MAAM,EAAE,SAAS,GAAG,MAAM,EAC/E,OAAO,mBAAmB,CAAC,QAAQ,EAAE,SAAS,CAAC,4CAmDlD,CAAC"}
+{"version":3,"file":"CommandStepper.d.ts","sourceRoot":"","sources":["../../../CommandDialog/CommandStepper.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAA2B,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGhF,OAAO,EAKH,KAAK,gBAAgB,EACxB,MAAM,4BAA4B,CAAC;AACpC,OAAO,sBAAsB,CAAC;AAM9B,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,YAAY,EACrD,aAAa,GAAG,gBAAgB,GAAG,QAAQ,GAAG,cAAc,GAAG,OAAO,GAAG,KAAK,GAAG,IAAI,GAAG,WAAW,GAAG,UAAU,CACnH,CAAC;AAEF,MAAM,WAAW,0BAA2B,SAAQ,yBAAyB;IAEzE,UAAU,EAAE,MAAM,CAAC;IAEnB,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAE1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,kBAAkB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjD,oBAAoB,CAAC,EAAE,CAAC,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IAE3D,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;IAErD,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC;IAE/C,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,QAAQ,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,mBAAmB,CAAC,QAAQ,SAAS,MAAM,EAAE,SAAS,GAAG,MAAM,CAC5E,SAAQ,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAE,UAAU,CAAC,EAC3D,IAAI,CAAC,0BAA0B,EAAE,YAAY,GAAG,cAAc,GAAG,oBAAoB,GAAG,sBAAsB,GAAG,eAAe,GAAG,cAAc,GAAG,kBAAkB,GAAG,UAAU,CAAC;IAExL,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAmDD,eAAO,MAAM,qBAAqB,GAAI,+TA0BnC,0BAA0B,4CAmJ5B,CAAC;AAuGF,eAAO,MAAM,cAAc,GAAI,QAAQ,SAAS,MAAM,GAAG,MAAM,EAAE,SAAS,GAAG,MAAM,EAC/E,OAAO,mBAAmB,CAAC,QAAQ,EAAE,SAAS,CAAC,4CAmDlD,CAAC"}

package/dist/esm/CommandDialog/CommandStepper.js

@@ -101,6 +101,9 @@ const CommandStepperContent = ({ activeStep, visitedSteps, children, onActiveSte
         onChangeStep?.(event);
         const index = event.index;
         if (typeof index === 'number') {
+            if (index > activeStep && isCurrentStepInvalid) {
+                return;
+            }
             if (index > activeStep) {
                 onVisitedStepsChange?.(new Set(visitedSteps).add(activeStep));
             }
@@ -111,6 +114,9 @@ const CommandStepperContent = ({ activeStep, visitedSteps, children, onActiveSte
         onActiveStepChange?.(Math.max(0, activeStep - 1));
     };
     const handleNext = () => {
+        if (isCurrentStepInvalid) {
+            return;
+        }
         onVisitedStepsChange?.(new Set(visitedSteps).add(activeStep));
         onActiveStepChange?.(Math.min(stepCount - 1, activeStep + 1));
     };

package/dist/esm/CommandDialog/CommandStepper.js.map

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

package/dist/esm/Toolbar/Toolbar.css

@@ -60,9 +60,10 @@
 /*
  * The section is a fixed-size container that transitions smoothly between
  * the dimensions required by each context.
- * overflow is intentionally left as visible so that absolutely-positioned
+ * Overflow stays visible in the settled state so absolutely-positioned
  * children (e.g. fan-out panels) can extend beyond the section's bounds.
- * Inactive contexts are hidden via opacity/pointer-events, not overflow clipping.
+ * During a context resize transition, a temporary modifier clips incoming
+ * content so buttons do not float outside the current toolbar bounds.
  */
 .toolbar-section {
     position: relative;
@@ -71,6 +72,10 @@
         height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+.toolbar-section--transitioning {
+    overflow: hidden;
+}
+
 /*
  * Every context is absolutely stacked at the top-left of the section.
  * Only the active one is visible; the others fade out and lose pointer events.
@@ -212,3 +217,101 @@
     opacity: 1;
     pointer-events: auto;
 }
+
+/* List-mode folder panel — vertical stack instead of a grid */
+.toolbar-folder-panel--list {
+    display: flex;
+    flex-direction: column;
+    min-width: 10rem;
+}
+
+/* ── Toolbar button — list mode ──────────────────────────────────────────── */
+
+/*
+ * Inside a list-mode folder the button fills the available width and renders
+ * its icon and title label side by side, left-aligned.
+ */
+.toolbar-button--list {
+    width: 100%;
+    justify-content: flex-start;
+}
+
+.toolbar-button__label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: inherit;
+    white-space: nowrap;
+}
+
+/* ── Toolbar group ───────────────────────────────────────────────────────── */
+
+/*
+ * When a Toolbar contains ToolbarGroup children it becomes a transparent
+ * layout wrapper — each group renders as its own pill.
+ */
+.toolbar:has(.toolbar-group) {
+    background: transparent;
+    border: none;
+    box-shadow: none;
+    padding: 0;
+    gap: 0.5rem;
+}
+
+/*
+ * Each ToolbarGroup is a self-contained pill that matches the visual style
+ * of a standalone Toolbar.
+ */
+.toolbar-group {
+    background: var(--surface-card);
+    border: 1px solid var(--surface-border);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+
+/* ── Toolbar slot transition (ToolbarGroup slot content) ─────────────────── */
+
+/*
+ * Size-morphing container for slot content inside a ToolbarGroup.
+ * Mirrors the .toolbar-section transition parameters for visual consistency —
+ * the container resizes smoothly while content cross-fades.
+ */
+.toolbar-slot-section {
+    position: relative;
+    overflow: hidden;
+    transition:
+        width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+        height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes toolbar-slot-fade-in {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+@keyframes toolbar-slot-fade-out {
+    from { opacity: 1; }
+    to   { opacity: 0; }
+}
+
+/*
+ * Incoming slot content — fades in on mount.
+ * Duration matches the toolbar-context opacity transition (0.2s ease).
+ */
+.toolbar-slot-incoming {
+    position: absolute;
+    top: 0;
+    left: 0;
+    animation: toolbar-slot-fade-in 0.2s ease forwards;
+}
+
+/*
+ * Outgoing slot content — fades out, then React unmounts it after
+ * the animation completes.
+ */
+.toolbar-slot-outgoing {
+    position: absolute;
+    top: 0;
+    left: 0;
+    animation: toolbar-slot-fade-out 0.2s ease forwards;
+    pointer-events: none;
+}

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

@@ -5,7 +5,6 @@ export default meta;
 type Story = StoryObj<typeof Toolbar>;
 export declare const WithReactNodeIcons: Story;
 export declare const Default: Story;
-export declare const MultipleGroups: Story;
 export declare const WithActiveButton: Story;
 export declare const WithContexts: Story;
 export declare const WithSeparators: Story;
@@ -15,4 +14,10 @@ export declare const WithFolderOneButton: Story;
 export declare const WithFolderFourButtons: Story;
 export declare const WithFolderTwentyButtons: Story;
 export declare const DragAndDrop: Story;
+export declare const WithGroups: Story;
+export declare const WithFolderListMode: Story;
+export declare const FolderGridVsList: Story;
+export declare const WithSlotInGroup: Story;
+export declare const WithSlotInContext: Story;
+export declare const WithMultipleSlotContributors: Story;
 //# sourceMappingURL=Toolbar.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.stories.d.ts","sourceRoot":"","sources":["../../../Toolbar/Toolbar.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAQpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAM9B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAgCtC,eAAO,MAAM,kBAAkB,EAAE,KAyChC,CAAC;AAGF,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,KAgB5B,CAAC;AAGF,eAAO,MAAM,gBAAgB,EAAE,KAqC9B,CAAC;AASF,eAAO,MAAM,YAAY,EAAE,KAoD1B,CAAC;AASF,eAAO,MAAM,cAAc,EAAE,KAW5B,CAAC;AAMF,eAAO,MAAM,OAAO,EAAE,KAwBrB,CAAC;AAQF,eAAO,MAAM,UAAU,EAAE,KA+CxB,CAAC;AAGF,eAAO,MAAM,mBAAmB,EAAE,KAUjC,CAAC;AAGF,eAAO,MAAM,qBAAqB,EAAE,KAYnC,CAAC;AAGF,eAAO,MAAM,uBAAuB,EAAE,KAYrC,CAAC;AAWF,eAAO,MAAM,WAAW,EAAE,KAgDzB,CAAC"}
+{"version":3,"file":"Toolbar.stories.d.ts","sourceRoot":"","sources":["../../../Toolbar/Toolbar.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAUpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAM9B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAgCtC,eAAO,MAAM,kBAAkB,EAAE,KAyChC,CAAC;AAGF,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAGF,eAAO,MAAM,gBAAgB,EAAE,KAqC9B,CAAC;AASF,eAAO,MAAM,YAAY,EAAE,KAoD1B,CAAC;AASF,eAAO,MAAM,cAAc,EAAE,KAW5B,CAAC;AAMF,eAAO,MAAM,OAAO,EAAE,KAwBrB,CAAC;AAQF,eAAO,MAAM,UAAU,EAAE,KA+CxB,CAAC;AAGF,eAAO,MAAM,mBAAmB,EAAE,KAUjC,CAAC;AAGF,eAAO,MAAM,qBAAqB,EAAE,KAYnC,CAAC;AAGF,eAAO,MAAM,uBAAuB,EAAE,KAYrC,CAAC;AAWF,eAAO,MAAM,WAAW,EAAE,KAgDzB,CAAC;AAWF,eAAO,MAAM,UAAU,EAAE,KAmBxB,CAAC;AAWF,eAAO,MAAM,kBAAkB,EAAE,KAahC,CAAC;AAKF,eAAO,MAAM,gBAAgB,EAAE,KA+B9B,CAAC;AAeF,eAAO,MAAM,eAAe,EAAE,KA+D7B,CAAC;AAUF,eAAO,MAAM,iBAAiB,EAAE,KA6E/B,CAAC;AAMF,eAAO,MAAM,4BAA4B,EAAE,KAsC1C,CAAC"}

package/dist/esm/Toolbar/Toolbar.stories.js

@@ -1,12 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
 import { Toolbar } from './Toolbar';
 import { ToolbarButton } from './ToolbarButton';
 import { ToolbarContext } from './ToolbarContext';
 import { ToolbarFanOutItem } from './ToolbarFanOutItem';
 import { ToolbarFolder } from './ToolbarFolder';
+import { ToolbarGroup } from './ToolbarGroup';
 import { ToolbarSection } from './ToolbarSection';
 import { ToolbarSeparator } from './ToolbarSeparator';
+import { ToolbarSlot, ToolbarSlotProvider } from './ToolbarSlot';
 const meta = {
     title: 'Components/Toolbar',
     component: Toolbar,
@@ -44,20 +46,17 @@ export const WithReactNodeIcons = {
         const StarIcon = () => (_jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', width: '20', height: '20', fill: 'currentColor', "aria-hidden": 'true', children: _jsx("path", { d: 'M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z' }) }));
         const TriangleIcon = () => (_jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', width: '20', height: '20', fill: 'currentColor', "aria-hidden": 'true', children: _jsx("path", { d: 'M12 2L2 22h20L12 2z' }) }));
         const PentagonIcon = () => (_jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', width: '20', height: '20', fill: 'currentColor', "aria-hidden": 'true', children: _jsx("path", { d: 'M12 2l9.5 6.9-3.6 11.1H6.1L2.5 8.9 12 2z' }) }));
-        return (_jsxs(Toolbar, { children: [_jsx(ToolbarButton, { icon: _jsx(CircleIcon, {}), tooltip: 'Circle' }), _jsx(ToolbarButton, { icon: _jsx(SquareIcon, {}), tooltip: 'Rectangle' }), _jsxs(ToolbarFanOutItem, { icon: _jsx(StarIcon, {}), tooltip: 'More shapes', children: [_jsx(ToolbarButton, { icon: _jsx(TriangleIcon, {}), tooltip: 'Triangle' }), _jsx(ToolbarButton, { icon: _jsx(PentagonIcon, {}), tooltip: 'Pentagon' })] }), _jsx(ToolbarButton, { icon: 'pi pi-undo', tooltip: 'Undo' })] }));
+        return (_jsxs(Toolbar, { children: [_jsx(ToolbarButton, { icon: _jsx(CircleIcon, {}), title: 'Circle' }), _jsx(ToolbarButton, { icon: _jsx(SquareIcon, {}), title: 'Rectangle' }), _jsxs(ToolbarFanOutItem, { icon: _jsx(StarIcon, {}), tooltip: 'More shapes', children: [_jsx(ToolbarButton, { icon: _jsx(TriangleIcon, {}), title: 'Triangle' }), _jsx(ToolbarButton, { icon: _jsx(PentagonIcon, {}), title: 'Pentagon' })] }), _jsx(ToolbarButton, { icon: 'pi pi-undo', title: 'Undo' })] }));
     },
 };
 export const Default = {
-    render: () => (_jsxs(Toolbar, { children: [_jsx(ToolbarButton, { icon: 'pi pi-arrow-up-left', tooltip: 'Select' }), _jsx(ToolbarButton, { icon: 'pi pi-clone', tooltip: 'Layers' }), _jsx(ToolbarButton, { icon: 'pi pi-circle', tooltip: 'Shapes' }), _jsx(ToolbarButton, { icon: 'pi pi-stop', tooltip: 'Rectangle' }), _jsx(ToolbarButton, { icon: 'pi pi-file', tooltip: 'Sticky note' })] })),
-};
-export const MultipleGroups = {
-    render: () => (_jsxs("div", { className: 'flex flex-col gap-2', children: [_jsxs(Toolbar, { children: [_jsx(ToolbarButton, { icon: 'pi pi-arrow-up-left', tooltip: 'Select' }), _jsx(ToolbarButton, { icon: 'pi pi-clone', tooltip: 'Layers' }), _jsx(ToolbarButton, { icon: 'pi pi-circle', tooltip: 'Shapes' }), _jsx(ToolbarButton, { icon: 'pi pi-stop', tooltip: 'Rectangle' }), _jsx(ToolbarButton, { icon: 'pi pi-file', tooltip: 'Sticky note' })] }), _jsxs(Toolbar, { children: [_jsx(ToolbarButton, { icon: 'pi pi-undo', tooltip: 'Undo' }), _jsx(ToolbarButton, { icon: 'pi pi-refresh', tooltip: 'Redo' })] })] })),
+    render: () => (_jsxs(Toolbar, { children: [_jsx(ToolbarButton, { icon: 'pi pi-arrow-up-left', title: 'Select' }), _jsx(ToolbarButton, { icon: 'pi pi-clone', title: 'Layers' }), _jsx(ToolbarButton, { icon: 'pi pi-circle', title: 'Shapes' }), _jsx(ToolbarButton, { icon: 'pi pi-stop', title: 'Rectangle' }), _jsx(ToolbarButton, { icon: 'pi pi-file', title: 'Sticky note' })] })),
 };
 export const WithActiveButton = {
     render: () => {
         const ActiveDemo = () => {
             const [active, setActive] = useState('select');
-            return (_jsxs(Toolbar, { children: [_jsx(ToolbarButton, { icon: 'pi pi-arrow-up-left', tooltip: 'Select', active: active === 'select', onClick: () => setActive('select') }), _jsx(ToolbarButton, { icon: 'pi pi-clone', tooltip: 'Layers', active: active === 'layers', onClick: () => setActive('layers') }), _jsx(ToolbarButton, { icon: 'pi pi-stop', tooltip: 'Rectangle', active: active === 'rectangle', onClick: () => setActive('rectangle') }), _jsx(ToolbarButton, { icon: 'pi pi-file', tooltip: 'Sticky note', active: active === 'sticky', onClick: () => setActive('sticky') })] }));
+            return (_jsxs(Toolbar, { children: [_jsx(ToolbarButton, { icon: 'pi pi-arrow-up-left', title: 'Select', active: active === 'select', onClick: () => setActive('select') }), _jsx(ToolbarButton, { icon: 'pi pi-clone', title: 'Layers', active: active === 'layers', onClick: () => setActive('layers') }), _jsx(ToolbarButton, { icon: 'pi pi-stop', title: 'Rectangle', active: active === 'rectangle', onClick: () => setActive('rectangle') }), _jsx(ToolbarButton, { icon: 'pi pi-file', title: 'Sticky note', active: active === 'sticky', onClick: () => setActive('sticky') })] }));
         };
         return _jsx(ActiveDemo, {});
     },
@@ -66,7 +65,7 @@ export const WithContexts = {
     render: () => {
         const WithContextsDemo = () => {
             const [currentContext, setCurrentContext] = useState('drawing');
-            return (_jsxs("div", { className: 'flex flex-col items-center gap-6', children: [_jsxs(Toolbar, { children: [_jsx(ToolbarButton, { icon: 'pi pi-arrow-up-left', tooltip: 'Select' }), _jsxs(ToolbarSection, { activeContext: currentContext, children: [_jsxs(ToolbarContext, { name: 'drawing', children: [_jsx(ToolbarButton, { icon: 'pi pi-pencil', tooltip: 'Draw' }), _jsx(ToolbarButton, { icon: 'pi pi-stop', tooltip: 'Rectangle' }), _jsx(ToolbarButton, { icon: 'pi pi-circle', tooltip: 'Circle' }), _jsx(ToolbarButton, { icon: 'pi pi-minus', tooltip: 'Line' })] }), _jsxs(ToolbarContext, { name: 'text', children: [_jsx(ToolbarButton, { icon: 'pi pi-align-center', tooltip: 'Align Center' }), _jsx(ToolbarButton, { icon: 'pi pi-align-left', tooltip: 'Align Left' })] })] }), _jsx(ToolbarButton, { icon: 'pi pi-undo', tooltip: 'Undo' })] }), _jsxs("div", { className: 'flex gap-2', children: [_jsx("button", { type: 'button', onClick: () => setCurrentContext('drawing'), className: `px-3 py-1 rounded text-sm transition-colors ${currentContext === 'drawing'
+            return (_jsxs("div", { className: 'flex flex-col items-center gap-6', children: [_jsxs(Toolbar, { children: [_jsx(ToolbarButton, { icon: 'pi pi-arrow-up-left', title: 'Select' }), _jsxs(ToolbarSection, { activeContext: currentContext, children: [_jsxs(ToolbarContext, { name: 'drawing', children: [_jsx(ToolbarButton, { icon: 'pi pi-pencil', title: 'Draw' }), _jsx(ToolbarButton, { icon: 'pi pi-stop', title: 'Rectangle' }), _jsx(ToolbarButton, { icon: 'pi pi-circle', title: 'Circle' }), _jsx(ToolbarButton, { icon: 'pi pi-minus', title: 'Line' })] }), _jsxs(ToolbarContext, { name: 'text', children: [_jsx(ToolbarButton, { icon: 'pi pi-align-center', title: 'Align Center' }), _jsx(ToolbarButton, { icon: 'pi pi-align-left', title: 'Align Left' })] })] }), _jsx(ToolbarButton, { icon: 'pi pi-undo', title: 'Undo' })] }), _jsxs("div", { className: 'flex gap-2', children: [_jsx("button", { type: 'button', onClick: () => setCurrentContext('drawing'), className: `px-3 py-1 rounded text-sm transition-colors ${currentContext === 'drawing'
                                     ? 'bg-blue-600 text-white'
                                     : 'bg-gray-600 text-gray-200 hover:bg-gray-500'}`, children: "Drawing tools" }), _jsx("button", { type: 'button', onClick: () => setCurrentContext('text'), className: `px-3 py-1 rounded text-sm transition-colors ${currentContext === 'text'
                                     ? 'bg-blue-600 text-white'
@@ -76,7 +75,7 @@ export const WithContexts = {
     },
 };
 export const WithSeparators = {
-    render: () => (_jsxs(Toolbar, { orientation: 'horizontal', children: [_jsx(ToolbarButton, { icon: 'pi pi-th-large', tooltip: 'Overview', tooltipPosition: 'bottom' }), _jsx(ToolbarSeparator, { orientation: 'horizontal' }), _jsx(ToolbarButton, { icon: 'pi pi-minus', tooltip: 'Zoom out', tooltipPosition: 'bottom' }), _jsx(ToolbarButton, { icon: 'pi pi-plus', tooltip: 'Zoom in', tooltipPosition: 'bottom' }), _jsx(ToolbarSeparator, { orientation: 'horizontal' }), _jsx(ToolbarButton, { icon: 'pi pi-question-circle', tooltip: 'Help', tooltipPosition: 'bottom' })] })),
+    render: () => (_jsxs(Toolbar, { orientation: 'horizontal', children: [_jsx(ToolbarButton, { icon: 'pi pi-th-large', title: 'Overview', tooltipPosition: 'bottom' }), _jsx(ToolbarSeparator, { orientation: 'horizontal' }), _jsx(ToolbarButton, { icon: 'pi pi-minus', title: 'Zoom out', tooltipPosition: 'bottom' }), _jsx(ToolbarButton, { icon: 'pi pi-plus', title: 'Zoom in', tooltipPosition: 'bottom' }), _jsx(ToolbarSeparator, { orientation: 'horizontal' }), _jsx(ToolbarButton, { icon: 'pi pi-question-circle', title: 'Help', tooltipPosition: 'bottom' })] })),
 };
 export const ZoomBar = {
     render: () => {
@@ -85,7 +84,7 @@ export const ZoomBar = {
             const zoomOut = () => setZoom(current => Math.max(50, current - 10));
             const zoomIn = () => setZoom(current => Math.min(300, current + 10));
             const resetZoom = () => setZoom(100);
-            return (_jsxs(Toolbar, { orientation: 'horizontal', children: [_jsx(ToolbarButton, { icon: 'pi pi-th-large', tooltip: 'Overview', tooltipPosition: 'bottom' }), _jsx(ToolbarSeparator, { orientation: 'horizontal' }), _jsx(ToolbarButton, { icon: 'pi pi-minus', tooltip: 'Zoom out', tooltipPosition: 'bottom', onClick: zoomOut }), _jsx(ToolbarButton, { text: `${zoom}%`, tooltip: 'Reset zoom', tooltipPosition: 'bottom', onClick: resetZoom }), _jsx(ToolbarButton, { icon: 'pi pi-plus', tooltip: 'Zoom in', tooltipPosition: 'bottom', onClick: zoomIn }), _jsx(ToolbarSeparator, { orientation: 'horizontal' }), _jsx(ToolbarButton, { icon: 'pi pi-question-circle', tooltip: 'Help', tooltipPosition: 'bottom' })] }));
+            return (_jsxs(Toolbar, { orientation: 'horizontal', children: [_jsx(ToolbarButton, { icon: 'pi pi-th-large', title: 'Overview', tooltipPosition: 'bottom' }), _jsx(ToolbarSeparator, { orientation: 'horizontal' }), _jsx(ToolbarButton, { icon: 'pi pi-minus', title: 'Zoom out', tooltipPosition: 'bottom', onClick: zoomOut }), _jsx(ToolbarButton, { text: `${zoom}%`, title: 'Reset zoom', tooltipPosition: 'bottom', onClick: resetZoom }), _jsx(ToolbarButton, { icon: 'pi pi-plus', title: 'Zoom in', tooltipPosition: 'bottom', onClick: zoomIn }), _jsx(ToolbarSeparator, { orientation: 'horizontal' }), _jsx(ToolbarButton, { icon: 'pi pi-question-circle', title: 'Help', tooltipPosition: 'bottom' })] }));
         };
         return _jsx(ZoomBarDemo, {});
     },
@@ -94,26 +93,26 @@ export const WithFanOut = {
     render: () => {
         const WithFanOutDemo = () => {
             const [activeTool, setActiveTool] = useState('select');
-            return (_jsxs("div", { className: 'flex flex-col gap-2', children: [_jsxs(Toolbar, { children: [_jsx(ToolbarButton, { icon: 'pi pi-arrow-up-left', tooltip: 'Select', active: activeTool === 'select', onClick: () => setActiveTool('select') }), _jsxs(ToolbarFanOutItem, { icon: 'pi pi-th-large', tooltip: 'Shapes', children: [_jsx(ToolbarButton, { icon: 'pi pi-th-large', tooltip: 'Shapes', onClick: () => setActiveTool('shapes') }), _jsx(ToolbarButton, { icon: 'pi pi-exclamation-circle', tooltip: 'Info', onClick: () => setActiveTool('info') }), _jsx(ToolbarButton, { icon: 'pi pi-eye', tooltip: 'Preview', onClick: () => setActiveTool('preview') }), _jsx(ToolbarButton, { icon: 'pi pi-cog', tooltip: 'Settings', onClick: () => setActiveTool('settings') }), _jsx(ToolbarButton, { icon: 'pi pi-external-link', tooltip: 'Open', onClick: () => setActiveTool('open') })] }), _jsx(ToolbarButton, { icon: 'pi pi-stop', tooltip: 'Rectangle', active: activeTool === 'rectangle', onClick: () => setActiveTool('rectangle') }), _jsx(ToolbarButton, { icon: 'pi pi-file', tooltip: 'Sticky note', active: activeTool === 'sticky', onClick: () => setActiveTool('sticky') })] }), _jsxs(Toolbar, { children: [_jsx(ToolbarButton, { icon: 'pi pi-undo', tooltip: 'Undo' }), _jsx(ToolbarButton, { icon: 'pi pi-refresh', tooltip: 'Redo' })] })] }));
+            return (_jsxs("div", { className: 'flex flex-col gap-2', children: [_jsxs(Toolbar, { children: [_jsx(ToolbarButton, { icon: 'pi pi-arrow-up-left', title: 'Select', active: activeTool === 'select', onClick: () => setActiveTool('select') }), _jsxs(ToolbarFanOutItem, { icon: 'pi pi-th-large', tooltip: 'Shapes', children: [_jsx(ToolbarButton, { icon: 'pi pi-th-large', title: 'Shapes', onClick: () => setActiveTool('shapes') }), _jsx(ToolbarButton, { icon: 'pi pi-exclamation-circle', title: 'Info', onClick: () => setActiveTool('info') }), _jsx(ToolbarButton, { icon: 'pi pi-eye', title: 'Preview', onClick: () => setActiveTool('preview') }), _jsx(ToolbarButton, { icon: 'pi pi-cog', title: 'Settings', onClick: () => setActiveTool('settings') }), _jsx(ToolbarButton, { icon: 'pi pi-external-link', title: 'Open', onClick: () => setActiveTool('open') })] }), _jsx(ToolbarButton, { icon: 'pi pi-stop', title: 'Rectangle', active: activeTool === 'rectangle', onClick: () => setActiveTool('rectangle') }), _jsx(ToolbarButton, { icon: 'pi pi-file', title: 'Sticky note', active: activeTool === 'sticky', onClick: () => setActiveTool('sticky') })] }), _jsxs(Toolbar, { children: [_jsx(ToolbarButton, { icon: 'pi pi-undo', title: 'Undo' }), _jsx(ToolbarButton, { icon: 'pi pi-refresh', title: 'Redo' })] })] }));
         };
         return _jsx(WithFanOutDemo, {});
     },
 };
 export const WithFolderOneButton = {
-    render: () => (_jsxs(Toolbar, { children: [_jsx(ToolbarButton, { icon: 'pi pi-arrow-up-left', tooltip: 'Select' }), _jsx(ToolbarFolder, { icon: 'pi pi-th-large', tooltip: 'Folder (1 item)', children: _jsx(ToolbarButton, { icon: folderIcons[0], tooltip: 'Action 1' }) }), _jsx(ToolbarButton, { icon: 'pi pi-stop', tooltip: 'Rectangle' })] })),
+    render: () => (_jsxs(Toolbar, { children: [_jsx(ToolbarButton, { icon: 'pi pi-arrow-up-left', title: 'Select' }), _jsx(ToolbarFolder, { icon: 'pi pi-th-large', title: 'Folder (1 item)', children: _jsx(ToolbarButton, { icon: folderIcons[0], title: 'Action 1' }) }), _jsx(ToolbarButton, { icon: 'pi pi-stop', title: 'Rectangle' })] })),
 };
 export const WithFolderFourButtons = {
-    render: () => (_jsxs(Toolbar, { children: [_jsx(ToolbarButton, { icon: 'pi pi-arrow-up-left', tooltip: 'Select' }), _jsx(ToolbarFolder, { icon: 'pi pi-th-large', tooltip: 'Folder (4 items)', children: folderIcons.slice(0, 4).map((icon, index) => (_jsx(ToolbarButton, { icon: icon, tooltip: `Action ${index + 1}` }, `folder-4-${index}`))) }), _jsx(ToolbarButton, { icon: 'pi pi-stop', tooltip: 'Rectangle' })] })),
+    render: () => (_jsxs(Toolbar, { children: [_jsx(ToolbarButton, { icon: 'pi pi-arrow-up-left', title: 'Select' }), _jsx(ToolbarFolder, { icon: 'pi pi-th-large', title: 'Folder (4 items)', children: folderIcons.slice(0, 4).map((icon, index) => (_jsx(ToolbarButton, { icon: icon, title: `Action ${index + 1}` }, `folder-4-${index}`))) }), _jsx(ToolbarButton, { icon: 'pi pi-stop', title: 'Rectangle' })] })),
 };
 export const WithFolderTwentyButtons = {
-    render: () => (_jsxs(Toolbar, { children: [_jsx(ToolbarButton, { icon: 'pi pi-arrow-up-left', tooltip: 'Select' }), _jsx(ToolbarFolder, { icon: 'pi pi-th-large', tooltip: 'Folder (20 items)', children: folderIcons.slice(0, 20).map((icon, index) => (_jsx(ToolbarButton, { icon: icon, tooltip: `Action ${index + 1}` }, `folder-20-${index}`))) }), _jsx(ToolbarButton, { icon: 'pi pi-stop', tooltip: 'Rectangle' })] })),
+    render: () => (_jsxs(Toolbar, { children: [_jsx(ToolbarButton, { icon: 'pi pi-arrow-up-left', title: 'Select' }), _jsx(ToolbarFolder, { icon: 'pi pi-th-large', title: 'Folder (20 items)', children: folderIcons.slice(0, 20).map((icon, index) => (_jsx(ToolbarButton, { icon: icon, title: `Action ${index + 1}` }, `folder-20-${index}`))) }), _jsx(ToolbarButton, { icon: 'pi pi-stop', title: 'Rectangle' })] })),
 };
 export const DragAndDrop = {
     render: () => {
         const DragAndDropDemo = () => {
             const [dropped, setDropped] = useState(null);
             const [isDragOver, setIsDragOver] = useState(false);
-            return (_jsxs("div", { className: 'flex gap-6 items-start', children: [_jsxs(Toolbar, { draggable: true, onItemDragStart: (data) => setDropped(`Dragging: ${data.tool}`), children: [_jsx(ToolbarButton, { icon: 'pi pi-pencil', tooltip: 'Pencil', data: { tool: 'pencil' } }), _jsx(ToolbarButton, { icon: 'pi pi-stop', tooltip: 'Rectangle', data: { tool: 'rectangle' } }), _jsx(ToolbarButton, { icon: 'pi pi-circle', tooltip: 'Circle', data: { tool: 'circle' } }), _jsx(ToolbarButton, { icon: 'pi pi-minus', tooltip: 'Line', data: { tool: 'line' } })] }), _jsx("div", { onDragOver: (event) => { event.preventDefault?.(); setIsDragOver(true); }, onDragLeave: () => setIsDragOver(false), onDrop: (event) => {
+            return (_jsxs("div", { className: 'flex gap-6 items-start', children: [_jsxs(Toolbar, { draggable: true, onItemDragStart: (data) => setDropped(`Dragging: ${data.tool}`), children: [_jsx(ToolbarButton, { icon: 'pi pi-pencil', title: 'Pencil', data: { tool: 'pencil' } }), _jsx(ToolbarButton, { icon: 'pi pi-stop', title: 'Rectangle', data: { tool: 'rectangle' } }), _jsx(ToolbarButton, { icon: 'pi pi-circle', title: 'Circle', data: { tool: 'circle' } }), _jsx(ToolbarButton, { icon: 'pi pi-minus', title: 'Line', data: { tool: 'line' } })] }), _jsx("div", { onDragOver: (event) => { event.preventDefault?.(); setIsDragOver(true); }, onDragLeave: () => setIsDragOver(false), onDrop: (event) => {
                             event.preventDefault?.();
                             setIsDragOver(false);
                             const raw = event.dataTransfer.getData('application/json');
@@ -131,4 +130,58 @@ export const DragAndDrop = {
         return _jsx(DragAndDropDemo, {});
     },
 };
+export const WithGroups = {
+    render: () => (_jsxs(Toolbar, { children: [_jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { icon: 'pi pi-arrow-up-left', title: 'Select' }), _jsx(ToolbarButton, { icon: 'pi pi-hand-paper', title: 'Pan' })] }), _jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { icon: 'pi pi-pencil', title: 'Draw' }), _jsx(ToolbarButton, { icon: 'pi pi-stop', title: 'Rectangle' }), _jsx(ToolbarButton, { icon: 'pi pi-circle', title: 'Circle' }), _jsx(ToolbarButton, { icon: 'pi pi-minus', title: 'Line' })] }), _jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { icon: 'pi pi-undo', title: 'Undo' }), _jsx(ToolbarButton, { icon: 'pi pi-refresh', title: 'Redo' })] })] })),
+};
+export const WithFolderListMode = {
+    render: () => (_jsxs(Toolbar, { children: [_jsx(ToolbarButton, { icon: 'pi pi-arrow-up-left', title: 'Select' }), _jsxs(ToolbarFolder, { icon: 'pi pi-th-large', title: 'Tools', mode: 'list', children: [_jsx(ToolbarButton, { icon: 'pi pi-pencil', title: 'Draw freehand' }), _jsx(ToolbarButton, { icon: 'pi pi-stop', title: 'Rectangle' }), _jsx(ToolbarButton, { icon: 'pi pi-circle', title: 'Ellipse' }), _jsx(ToolbarButton, { icon: 'pi pi-minus', title: 'Straight line' })] }), _jsx(ToolbarButton, { icon: 'pi pi-undo', title: 'Undo' })] })),
+};
+export const FolderGridVsList = {
+    render: () => (_jsxs("div", { className: 'flex gap-8 items-start', children: [_jsxs("div", { className: 'flex flex-col items-center gap-2', children: [_jsx("span", { style: { color: 'var(--text-color-secondary)', fontSize: '0.75rem' }, children: "Grid (default)" }), _jsx(Toolbar, { children: _jsxs(ToolbarFolder, { icon: 'pi pi-th-large', title: 'Tools', mode: 'grid', children: [_jsx(ToolbarButton, { icon: 'pi pi-pencil', title: 'Draw' }), _jsx(ToolbarButton, { icon: 'pi pi-stop', title: 'Rectangle' }), _jsx(ToolbarButton, { icon: 'pi pi-circle', title: 'Ellipse' }), _jsx(ToolbarButton, { icon: 'pi pi-minus', title: 'Line' }), _jsx(ToolbarButton, { icon: 'pi pi-cog', title: 'Settings' }), _jsx(ToolbarButton, { icon: 'pi pi-star', title: 'Favorite' })] }) })] }), _jsxs("div", { className: 'flex flex-col items-center gap-2', children: [_jsx("span", { style: { color: 'var(--text-color-secondary)', fontSize: '0.75rem' }, children: "List" }), _jsx(Toolbar, { children: _jsxs(ToolbarFolder, { icon: 'pi pi-list', title: 'Tools', mode: 'list', children: [_jsx(ToolbarButton, { icon: 'pi pi-pencil', title: 'Draw freehand' }), _jsx(ToolbarButton, { icon: 'pi pi-stop', title: 'Rectangle' }), _jsx(ToolbarButton, { icon: 'pi pi-circle', title: 'Ellipse' }), _jsx(ToolbarButton, { icon: 'pi pi-minus', title: 'Straight line' }), _jsx(ToolbarButton, { icon: 'pi pi-cog', title: 'Settings' }), _jsx(ToolbarButton, { icon: 'pi pi-star', title: 'Favorite' })] }) })] })] })),
+};
+export const WithSlotInGroup = {
+    render: () => {
+        const WithSlotInGroupDemo = () => {
+            const [mode, setMode] = useState('draw');
+            const drawTools = useMemo(() => (_jsxs(_Fragment, { children: [_jsx(ToolbarButton, { icon: 'pi pi-pencil', title: 'Pencil' }), _jsx(ToolbarButton, { icon: 'pi pi-eraser', title: 'Eraser' }), _jsx(ToolbarButton, { icon: 'pi pi-palette', title: 'Color' }), _jsx(ToolbarButton, { icon: 'pi pi-bolt', title: 'Airbrush' }), _jsx(ToolbarButton, { icon: 'pi pi-image', title: 'Stamp' }), _jsx(ToolbarButton, { icon: 'pi pi-filter', title: 'Blur' }), _jsx(ToolbarButton, { icon: 'pi pi-sun', title: 'Dodge' }), _jsx(ToolbarButton, { icon: 'pi pi-moon', title: 'Burn' })] })), []);
+            const shapeTools = useMemo(() => (_jsxs(_Fragment, { children: [_jsx(ToolbarButton, { icon: 'pi pi-stop', title: 'Rectangle' }), _jsx(ToolbarButton, { icon: 'pi pi-circle', title: 'Circle' }), _jsx(ToolbarButton, { icon: 'pi pi-minus', title: 'Line' }), _jsx(ToolbarButton, { icon: 'pi pi-sort-up', title: 'Triangle' }), _jsx(ToolbarButton, { icon: 'pi pi-star', title: 'Polygon' })] })), []);
+            const selectTools = useMemo(() => (_jsxs(_Fragment, { children: [_jsx(ToolbarButton, { icon: 'pi pi-arrows-alt', title: 'Move' }), _jsx(ToolbarButton, { icon: 'pi pi-clone', title: 'Duplicate' }), _jsx(ToolbarButton, { icon: 'pi pi-refresh', title: 'Rotate' }), _jsx(ToolbarButton, { icon: 'pi pi-expand', title: 'Scale' })] })), []);
+            return (_jsxs(ToolbarSlotProvider, { children: [mode === 'draw' && _jsx(ToolbarSlot, { slotName: 'tool-options', children: drawTools }), mode === 'shape' && _jsx(ToolbarSlot, { slotName: 'tool-options', children: shapeTools }), mode === 'select' && _jsx(ToolbarSlot, { slotName: 'tool-options', children: selectTools }), _jsxs(Toolbar, { children: [_jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { icon: 'pi pi-pencil', title: 'Draw mode', active: mode === 'draw', onClick: () => setMode('draw') }), _jsx(ToolbarButton, { icon: 'pi pi-stop', title: 'Shape mode', active: mode === 'shape', onClick: () => setMode('shape') }), _jsx(ToolbarButton, { icon: 'pi pi-arrow-up-left', title: 'Select mode', active: mode === 'select', onClick: () => setMode('select') })] }), _jsx(ToolbarGroup, { slotName: 'tool-options' })] })] }));
+        };
+        return _jsx(WithSlotInGroupDemo, {});
+    },
+};
+export const WithSlotInContext = {
+    render: () => {
+        const WithSlotInContextDemo = () => {
+            const [currentContext, setCurrentContext] = useState('drawing');
+            const [slotContent, setSlotContent] = useState('favorite');
+            const favoriteBtn = useMemo(() => _jsx(ToolbarButton, { icon: 'pi pi-star', title: 'Favorite' }), []);
+            const bookmarkBtn = useMemo(() => _jsx(ToolbarButton, { icon: 'pi pi-bookmark', title: 'Bookmark' }), []);
+            return (_jsx(ToolbarSlotProvider, { children: _jsxs("div", { className: 'flex flex-col items-center gap-6', children: [_jsx(Toolbar, { children: _jsxs(ToolbarSection, { activeContext: currentContext, children: [_jsxs(ToolbarContext, { name: 'drawing', slotName: 'drawing-extras', children: [_jsx(ToolbarButton, { icon: 'pi pi-pencil', title: 'Draw' }), _jsx(ToolbarButton, { icon: 'pi pi-stop', title: 'Rectangle' })] }), _jsxs(ToolbarContext, { name: 'text', children: [_jsx(ToolbarButton, { icon: 'pi pi-align-left', title: 'Align Left' }), _jsx(ToolbarButton, { icon: 'pi pi-align-center', title: 'Align Center' })] })] }) }), slotContent === 'favorite' && _jsx(ToolbarSlot, { slotName: 'drawing-extras', order: 5, children: favoriteBtn }), slotContent === 'bookmark' && _jsx(ToolbarSlot, { slotName: 'drawing-extras', order: 5, children: bookmarkBtn }), _jsxs("div", { className: 'flex flex-col gap-4 items-center', children: [_jsxs("div", { className: 'flex flex-col gap-2 items-center', children: [_jsx("span", { className: 'text-xs', style: { color: 'var(--text-color-secondary)' }, children: "Context" }), _jsx("div", { className: 'flex gap-2', children: ['drawing', 'text'].map(ctx => (_jsx("button", { type: 'button', onClick: () => setCurrentContext(ctx), className: `px-3 py-1 rounded text-sm transition-colors ${currentContext === ctx
+                                                    ? 'bg-blue-600 text-white'
+                                                    : 'bg-gray-600 text-gray-200 hover:bg-gray-500'}`, children: ctx }, ctx))) })] }), _jsxs("div", { className: 'flex flex-col gap-2 items-center', children: [_jsx("span", { className: 'text-xs', style: { color: 'var(--text-color-secondary)' }, children: "Slot content (drawing-extras)" }), _jsx("div", { className: 'flex gap-2', children: ['none', 'favorite', 'bookmark'].map(s => (_jsx("button", { type: 'button', onClick: () => setSlotContent(s), className: `px-3 py-1 rounded text-sm transition-colors ${slotContent === s
+                                                    ? 'bg-blue-600 text-white'
+                                                    : 'bg-gray-600 text-gray-200 hover:bg-gray-500'}`, children: s === 'none' ? 'None' : s === 'favorite' ? 'Favorite ★' : 'Bookmark 🔖' }, s))) })] })] })] }) }));
+        };
+        return _jsx(WithSlotInContextDemo, {});
+    },
+};
+export const WithMultipleSlotContributors = {
+    render: () => {
+        const ButtonA = () => {
+            const btn = useMemo(() => _jsx(ToolbarButton, { icon: 'pi pi-star', title: 'Slot A (order 10)' }), []);
+            return _jsx(ToolbarSlot, { slotName: 'shared', order: 10, children: btn });
+        };
+        const ButtonB = () => {
+            const btn = useMemo(() => _jsx(ToolbarButton, { icon: 'pi pi-heart', title: 'Slot B (order 5)' }), []);
+            return _jsx(ToolbarSlot, { slotName: 'shared', order: 5, children: btn });
+        };
+        const ButtonC = () => {
+            const btn = useMemo(() => _jsx(ToolbarButton, { icon: 'pi pi-bell', title: 'Slot C (order 20)' }), []);
+            return _jsx(ToolbarSlot, { slotName: 'shared', order: 20, children: btn });
+        };
+        return (_jsx(ToolbarSlotProvider, { children: _jsxs("div", { className: 'flex gap-6 items-start', children: [_jsx(Toolbar, { children: _jsx(ToolbarGroup, { slotName: 'shared', children: _jsx(ToolbarButton, { icon: 'pi pi-pencil', title: 'Draw (always first)' }) }) }), _jsxs("div", { className: 'flex flex-col gap-1 p-4 rounded-lg border text-sm', style: { borderColor: 'var(--surface-border)', background: 'var(--surface-ground)', color: 'var(--text-color-secondary)' }, children: [_jsx("strong", { style: { color: 'var(--text-color)' }, children: "Three independent contributors" }), _jsx("p", { children: "Rendered order: B (5) \u2192 A (10) \u2192 C (20)" }), _jsx(ButtonA, {}), _jsx(ButtonB, {}), _jsx(ButtonC, {})] })] }) }));
+    },
+};
 //# sourceMappingURL=Toolbar.stories.js.map