@cratis/components 1.0.5 → 1.1.0

package/dist/cjs/Common/Tooltip.css

@@ -0,0 +1,10 @@
+/* Copyright (c) Cratis. All rights reserved. */
+/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
+
+/* ── Tooltip bubble ──────────────────────────────────────────────────────── */
+.tooltip-bubble {
+    background: var(--surface-100);
+    color: var(--text-color);
+    border: 1px solid var(--surface-border);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}

package/dist/cjs/Common/Tooltip.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('./Tooltip.css');
+
+const POSITION_CLASSES = {
+    right: 'left-full ml-2 top-1/2 -translate-y-1/2',
+    left: 'right-full mr-2 top-1/2 -translate-y-1/2',
+    top: 'bottom-full mb-2 left-1/2 -translate-x-1/2',
+    bottom: 'top-full mt-2 left-1/2 -translate-x-1/2',
+};
+const Tooltip = ({ content, position = 'top', children }) => (jsxRuntime.jsxs("div", { className: 'relative group inline-flex', children: [children, jsxRuntime.jsx("div", { role: 'tooltip', className: `tooltip-bubble pointer-events-none absolute ${POSITION_CLASSES[position]} z-50
+                text-xs px-2 py-1 rounded
+                whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-150 delay-200`, style: { fontFamily: 'system-ui, sans-serif' }, children: content })] }));
+
+exports.Tooltip = Tooltip;
+//# sourceMappingURL=Tooltip.js.map

package/dist/cjs/Common/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sources":["../../../Common/Tooltip.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 React from 'react';\nimport './Tooltip.css';\n\n/** Position of the tooltip relative to its trigger element. */\nexport type TooltipPosition = 'top' | 'right' | 'bottom' | 'left';\n\n/** Props for the {@link Tooltip} component. */\nexport interface TooltipProps {\n    /** The text to display inside the tooltip. */\n    content: string;\n    /** Where the tooltip appears relative to the trigger (default: 'top'). */\n    position?: TooltipPosition;\n    /** The element that triggers the tooltip on hover. */\n    children: React.ReactNode;\n}\n\nconst POSITION_CLASSES: Record<TooltipPosition, string> = {\n    right:  'left-full ml-2 top-1/2 -translate-y-1/2',\n    left:   'right-full mr-2 top-1/2 -translate-y-1/2',\n    top:    'bottom-full mb-2 left-1/2 -translate-x-1/2',\n    bottom: 'top-full mt-2 left-1/2 -translate-x-1/2',\n};\n\n/**\n * A CSS-only hover tooltip wrapper. Wraps any child element and displays\n * a styled floating label on hover without relying on native browser tooltips.\n */\nexport const Tooltip: React.FC<TooltipProps> = ({ content, position = 'top', children }) => (\n    <div className='relative group inline-flex'>\n        {children}\n        <div\n            role='tooltip'\n            className={`tooltip-bubble pointer-events-none absolute ${POSITION_CLASSES[position]} z-50\n                text-xs px-2 py-1 rounded\n                whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-150 delay-200`}\n            style={{ fontFamily: 'system-ui, sans-serif' }}\n        >\n            {content}\n        </div>\n    </div>\n);\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAmBA,MAAM,gBAAgB,GAAoC;AACtD,IAAA,KAAK,EAAG,yCAAyC;AACjD,IAAA,IAAI,EAAI,0CAA0C;AAClD,IAAA,GAAG,EAAK,4CAA4C;AACpD,IAAA,MAAM,EAAE,yCAAyC;CACpD;AAMM,MAAM,OAAO,GAA2B,CAAC,EAAE,OAAO,EAAE,QAAQ,GAAG,KAAK,EAAE,QAAQ,EAAE,MACnFA,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4BAA4B,EAAA,QAAA,EAAA,CACtC,QAAQ,EACTC,wBACI,IAAI,EAAC,SAAS,EACd,SAAS,EAAE,CAAA,4CAAA,EAA+C,gBAAgB,CAAC,QAAQ,CAAC,CAAA;;AAEc,6GAAA,CAAA,EAClG,KAAK,EAAE,EAAE,UAAU,EAAE,uBAAuB,EAAE,EAAA,QAAA,EAE7C,OAAO,EAAA,CACN,CAAA,EAAA,CACJ;;;;"}

package/dist/cjs/Common/index.js

@@ -3,10 +3,12 @@
 var ErrorBoundary = require('./ErrorBoundary.js');
 var Page = require('./Page.js');
 var FormElement = require('./FormElement.js');
+var Tooltip = require('./Tooltip.js');
 
 
 
 exports.ErrorBoundary = ErrorBoundary.ErrorBoundary;
 exports.Page = Page.Page;
 exports.FormElement = FormElement.FormElement;
+exports.Tooltip = Tooltip.Tooltip;
 //# sourceMappingURL=index.js.map

package/dist/cjs/Common/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/dist/cjs/Toolbar/Toolbar.css

@@ -0,0 +1,131 @@
+/* Copyright (c) Cratis. All rights reserved. */
+/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
+
+/* ── Toolbar container ───────────────────────────────────────────────────── */
+.toolbar {
+    background: var(--surface-card);
+    border: 1px solid var(--surface-border);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+/* ── Toolbar button ──────────────────────────────────────────────────────── */
+.toolbar-button {
+    color: var(--text-color-secondary);
+    background: transparent;
+    border: none;
+    transition: background 0.15s, color 0.15s;
+}
+
+.toolbar-button:hover {
+    background: var(--surface-100);
+    color: var(--text-color);
+}
+
+.toolbar-button--active {
+    background: var(--primary-color);
+    color: var(--primary-color-text);
+}
+
+.toolbar-button--active:hover {
+    background: var(--primary-color);
+    color: var(--primary-color-text);
+}
+
+/* ── Toolbar project name label ──────────────────────────────────────────── */
+.toolbar-project-name {
+    padding: 0 8px;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--text-color);
+    white-space: nowrap;
+}
+
+/* ── Toolbar section (context switching) ────────────────────────────────── */
+
+/*
+ * 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
+ * children (e.g. fan-out panels) can extend beyond the section's bounds.
+ * Inactive contexts are hidden via opacity/pointer-events, not overflow clipping.
+ */
+.toolbar-section {
+    position: relative;
+    transition:
+        width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+        height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/*
+ * 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.
+ */
+.toolbar-context {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transition: opacity 0.2s ease;
+}
+
+.toolbar-context--active {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.toolbar-context--inactive {
+    opacity: 0;
+    pointer-events: none;
+}
+
+/* ── Toolbar fan-out item ────────────────────────────────────────────────── */
+
+/*
+ * The wrapper provides the positioning context for the absolutely-placed panel.
+ */
+.toolbar-fanout-item {
+    position: relative;
+}
+
+/*
+ * The fan-out panel is a floating pill that mirrors the Toolbar container style.
+ * When collapsed, it's hidden. When expanded, it appears elevated at the same
+ * position as the trigger button, with the trigger button as the first item.
+ * Vertically centered with where the collapsed button would be.
+ */
+.toolbar-fanout-panel {
+    position: absolute;
+    top: 50%;
+    left: calc(-0.5rem - 1px);
+    transform: translateY(-50%);
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.5rem;
+    background: var(--surface-card);
+    border: 1px solid var(--surface-border);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    border-radius: 1rem;
+    white-space: nowrap;
+    z-index: 10;
+    pointer-events: none;
+    opacity: 0;
+    clip-path: inset(0 100% 0 0 round 1rem);
+    transition:
+        clip-path 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+        opacity 0.2s ease;
+}
+
+/* Panel fans out to the left — reveal animates right → left */
+.toolbar-fanout-panel--left {
+    left: auto;
+    right: calc(-0.5rem - 1px);
+    clip-path: inset(0 0 0 100% round 1rem);
+}
+
+/* Expanded state — fully visible, pointer events restored */
+.toolbar-fanout-panel--visible {
+    clip-path: inset(0 0 0 0 round 1rem);
+    opacity: 1;
+    pointer-events: auto;
+}

package/dist/cjs/Toolbar/Toolbar.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('./Toolbar.css');
+
+const Toolbar = ({ children, orientation = 'vertical' }) => (jsxRuntime.jsx("div", { className: `toolbar inline-flex ${orientation === 'horizontal' ? 'flex-row' : 'flex-col'} items-center gap-1 p-2 rounded-2xl`, children: children }));
+
+exports.Toolbar = Toolbar;
+//# sourceMappingURL=Toolbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.js","sources":["../../../Toolbar/Toolbar.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 { ReactNode } from 'react';\nimport './Toolbar.css';\n\n/** Props for the {@link Toolbar} component. */\nexport interface ToolbarProps {\n    /** The {@link ToolbarButton} elements to render inside this toolbar group. */\n    children: ReactNode;\n    /** Layout direction of the toolbar (default: 'vertical'). */\n    orientation?: 'vertical' | 'horizontal';\n}\n\n/**\n * A toolbar container that groups icon buttons with a rounded border,\n * mimicking the style of tools panels found in canvas-based applications.\n * Supports both vertical (default) and horizontal orientations.\n */\nexport const Toolbar = ({ children, orientation = 'vertical' }: ToolbarProps) => (\n    <div\n        className={`toolbar inline-flex ${\n            orientation === 'horizontal' ? 'flex-row' : 'flex-col'\n        } items-center gap-1 p-2 rounded-2xl`}\n    >\n        {children}\n    </div>\n);\n"],"names":["_jsx"],"mappings":";;;;;AAmBO,MAAM,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAE,WAAW,GAAG,UAAU,EAAgB,MACxEA,cAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,CAAA,oBAAA,EACP,WAAW,KAAK,YAAY,GAAG,UAAU,GAAG,UAChD,CAAA,mCAAA,CAAqC,EAAA,QAAA,EAEpC,QAAQ,EAAA,CACP;;;;"}

package/dist/cjs/Toolbar/ToolbarButton.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Tooltip = require('../Common/Tooltip.js');
+
+const ToolbarButton = ({ icon, tooltip, active = false, onClick, tooltipPosition = 'right' }) => {
+    const activeClass = active ? 'toolbar-button--active' : '';
+    return (jsxRuntime.jsx(Tooltip.Tooltip, { content: tooltip, position: tooltipPosition, children: jsxRuntime.jsx("button", { type: 'button', "aria-label": tooltip, onClick: onClick, className: `toolbar-button w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer ${activeClass}`, children: jsxRuntime.jsx("i", { className: `${icon} text-lg` }) }) }));
+};
+
+exports.ToolbarButton = ToolbarButton;
+//# sourceMappingURL=ToolbarButton.js.map

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

@@ -0,0 +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 { Tooltip } from '../Common/Tooltip';\nimport type { TooltipPosition } from '../Common/Tooltip';\n\n/** Props for the {@link ToolbarButton} component. */\nexport interface ToolbarButtonProps {\n    /** The PrimeIcons CSS class to use as the icon (e.g. 'pi pi-home'). */\n    icon: string;\n\n    /** Tooltip text shown when the user hovers over the button. */\n    tooltip: 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\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 = ({ icon, tooltip, active = false, onClick, tooltipPosition = 'right' }: ToolbarButtonProps) => {\n    const activeClass = active ? 'toolbar-button--active' : '';\n\n    return (\n        <Tooltip content={tooltip} position={tooltipPosition}>\n            <button\n                type='button'\n                aria-label={tooltip}\n                onClick={onClick}\n                className={`toolbar-button w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer ${activeClass}`}\n            >\n                <i className={`${icon} text-lg`} />\n            </button>\n        </Tooltip>\n    );\n};\n"],"names":["_jsx","Tooltip"],"mappings":";;;;;MA4Ba,aAAa,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,GAAG,KAAK,EAAE,OAAO,EAAE,eAAe,GAAG,OAAO,EAAsB,KAAI;IACvH,MAAM,WAAW,GAAG,MAAM,GAAG,wBAAwB,GAAG,EAAE;AAE1D,IAAA,QACIA,cAAA,CAACC,eAAO,EAAA,EAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAA,QAAA,EAChDD,cAAA,CAAA,QAAA,EAAA,EACI,IAAI,EAAC,QAAQ,gBACD,OAAO,EACnB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,CAAA,oFAAA,EAAuF,WAAW,EAAE,EAAA,QAAA,EAE/GA,cAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAE,GAAG,IAAI,CAAA,QAAA,CAAU,GAAI,EAAA,CAC9B,EAAA,CACH;AAElB;;;;"}

package/dist/cjs/Toolbar/ToolbarContext.js

@@ -0,0 +1,6 @@
+'use strict';
+
+const ToolbarContext = () => null;
+
+exports.ToolbarContext = ToolbarContext;
+//# sourceMappingURL=ToolbarContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarContext.js","sources":["../../../Toolbar/ToolbarContext.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 { FC, ReactNode } from 'react';\n\n/** Props for the {@link ToolbarContext} component. */\nexport interface ToolbarContextProps {\n    /** Unique name identifying this context within a {@link ToolbarSection}. */\n    name: string;\n    /** The toolbar items to render when this context is active. */\n    children: ReactNode;\n}\n\n/**\n * Defines a named context (a set of toolbar items) within a {@link ToolbarSection}.\n * The section renders only the active context at a time and animates between them.\n *\n * This is a data-only component; its rendering is fully managed by {@link ToolbarSection}.\n */\nexport const ToolbarContext: FC<ToolbarContextProps> = () => null;\n"],"names":[],"mappings":";;MAmBa,cAAc,GAA4B,MAAM;;;;"}

package/dist/cjs/Toolbar/ToolbarFanOutItem.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Tooltip = require('../Common/Tooltip.js');
+
+const ToolbarFanOutItem = ({ icon, tooltip, tooltipPosition = 'right', fanOutDirection = 'right', children, }) => {
+    const [isExpanded, setIsExpanded] = React.useState(false);
+    const containerRef = React.useRef(null);
+    const handleToggle = () => {
+        setIsExpanded(!isExpanded);
+    };
+    React.useEffect(() => {
+        if (!isExpanded)
+            return;
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setIsExpanded(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isExpanded]);
+    const activeClass = isExpanded ? 'toolbar-button--active' : '';
+    const panelVisibleClass = isExpanded ? 'toolbar-fanout-panel--visible' : '';
+    const directionClass = `toolbar-fanout-panel--${fanOutDirection}`;
+    return (jsxRuntime.jsxs("div", { className: 'toolbar-fanout-item', ref: containerRef, children: [jsxRuntime.jsx(Tooltip.Tooltip, { content: tooltip, position: tooltipPosition, children: jsxRuntime.jsx("button", { type: 'button', "aria-label": tooltip, "aria-expanded": isExpanded, onClick: handleToggle, className: `toolbar-button w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer ${activeClass}`, children: jsxRuntime.jsx("i", { className: `${icon} text-lg` }) }) }), jsxRuntime.jsx("div", { className: `toolbar-fanout-panel ${directionClass} ${panelVisibleClass}`, children: children })] }));
+};
+
+exports.ToolbarFanOutItem = ToolbarFanOutItem;
+//# sourceMappingURL=ToolbarFanOutItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarFanOutItem.js","sources":["../../../Toolbar/ToolbarFanOutItem.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 { ReactNode, useEffect, useRef, useState } from 'react';\nimport { Tooltip } from '../Common/Tooltip';\nimport type { TooltipPosition } from '../Common/Tooltip';\n\n/** Props for the {@link ToolbarFanOutItem} component. */\nexport interface ToolbarFanOutItemProps {\n    /** The PrimeIcons CSS class to use as the trigger icon (e.g. 'pi pi-home'). */\n    icon: string;\n\n    /** Tooltip text shown when hovering over the trigger button. */\n    tooltip: string;\n\n    /** Position of the tooltip relative to the trigger button (default: 'right'). */\n    tooltipPosition?: TooltipPosition;\n\n    /** Direction the panel fans out from the trigger button (default: 'right'). */\n    fanOutDirection?: 'right' | 'left';\n\n    /** The toolbar items to render inside the fan-out panel. */\n    children: ReactNode;\n}\n\n/**\n * A toolbar button that fans out a horizontal panel of sub-tool buttons when clicked.\n *\n * Place this inside a vertical {@link Toolbar}. When the button is clicked, a pill-shaped\n * panel slides out to the side (right by default) containing the provided children.\n * The panel animates in/out using a clip-path reveal transition.\n *\n * - Clicking the button again closes the panel\n * - Clicking anywhere outside the panel also closes it\n */\nexport const ToolbarFanOutItem = ({\n    icon,\n    tooltip,\n    tooltipPosition = 'right',\n    fanOutDirection = 'right',\n    children,\n}: ToolbarFanOutItemProps) => {\n    const [isExpanded, setIsExpanded] = useState(false);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const handleToggle = () => {\n        setIsExpanded(!isExpanded);\n    };\n\n    // Close the fan-out when clicking outside\n    useEffect(() => {\n        if (!isExpanded) return;\n\n        const handleClickOutside = (event: MouseEvent) => {\n            if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n                setIsExpanded(false);\n            }\n        };\n\n        document.addEventListener('mousedown', handleClickOutside);\n        return () => {\n            document.removeEventListener('mousedown', handleClickOutside);\n        };\n    }, [isExpanded]);\n\n    const activeClass = isExpanded ? 'toolbar-button--active' : '';\n    const panelVisibleClass = isExpanded ? 'toolbar-fanout-panel--visible' : '';\n    const directionClass = `toolbar-fanout-panel--${fanOutDirection}`;\n\n    return (\n        <div className='toolbar-fanout-item' ref={containerRef}>\n            <Tooltip content={tooltip} position={tooltipPosition}>\n                <button\n                    type='button'\n                    aria-label={tooltip}\n                    aria-expanded={isExpanded}\n                    onClick={handleToggle}\n                    className={`toolbar-button w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer ${activeClass}`}\n                >\n                    <i className={`${icon} text-lg`} />\n                </button>\n            </Tooltip>\n            <div className={`toolbar-fanout-panel ${directionClass} ${panelVisibleClass}`}>\n                {children}\n            </div>\n        </div>\n    );\n};\n"],"names":["useState","useRef","useEffect","_jsxs","_jsx","Tooltip"],"mappings":";;;;;;MAmCa,iBAAiB,GAAG,CAAC,EAC9B,IAAI,EACJ,OAAO,EACP,eAAe,GAAG,OAAO,EACzB,eAAe,GAAG,OAAO,EACzB,QAAQ,GACa,KAAI;IACzB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;AACnD,IAAA,MAAM,YAAY,GAAGC,YAAM,CAAiB,IAAI,CAAC;IAEjD,MAAM,YAAY,GAAG,MAAK;AACtB,QAAA,aAAa,CAAC,CAAC,UAAU,CAAC;AAC9B,IAAA,CAAC;IAGDC,eAAS,CAAC,MAAK;AACX,QAAA,IAAI,CAAC,UAAU;YAAE;AAEjB,QAAA,MAAM,kBAAkB,GAAG,CAAC,KAAiB,KAAI;AAC7C,YAAA,IAAI,YAAY,CAAC,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;gBAC9E,aAAa,CAAC,KAAK,CAAC;YACxB;AACJ,QAAA,CAAC;AAED,QAAA,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC;AAC1D,QAAA,OAAO,MAAK;AACR,YAAA,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC;AACjE,QAAA,CAAC;AACL,IAAA,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;IAEhB,MAAM,WAAW,GAAG,UAAU,GAAG,wBAAwB,GAAG,EAAE;IAC9D,MAAM,iBAAiB,GAAG,UAAU,GAAG,+BAA+B,GAAG,EAAE;AAC3E,IAAA,MAAM,cAAc,GAAG,CAAA,sBAAA,EAAyB,eAAe,EAAE;AAEjE,IAAA,QACIC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qBAAqB,EAAC,GAAG,EAAE,YAAY,EAAA,QAAA,EAAA,CAClDC,cAAA,CAACC,eAAO,EAAA,EAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAA,QAAA,EAChDD,cAAA,CAAA,QAAA,EAAA,EACI,IAAI,EAAC,QAAQ,EAAA,YAAA,EACD,OAAO,EAAA,eAAA,EACJ,UAAU,EACzB,OAAO,EAAE,YAAY,EACrB,SAAS,EAAE,CAAA,oFAAA,EAAuF,WAAW,CAAA,CAAE,EAAA,QAAA,EAE/GA,cAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAE,CAAA,EAAG,IAAI,UAAU,EAAA,CAAI,EAAA,CAC9B,EAAA,CACH,EACVA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAA,qBAAA,EAAwB,cAAc,CAAA,CAAA,EAAI,iBAAiB,CAAA,CAAE,EAAA,QAAA,EACxE,QAAQ,EAAA,CACP,CAAA,EAAA,CACJ;AAEd;;;;"}

package/dist/cjs/Toolbar/ToolbarSection.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+const ToolbarSection = ({ activeContext, children, orientation = 'vertical' }) => {
+    const contextRefs = React.useRef({});
+    const [size, setSize] = React.useState(null);
+    const contexts = React.Children.toArray(children).filter((child) => React.isValidElement(child) && typeof child.props.name === 'string');
+    const effectiveContext = activeContext ?? contexts[0]?.props?.name ?? '';
+    const flexClass = orientation === 'horizontal' ? 'flex-row' : 'flex-col';
+    const measureAndSetSize = React.useCallback((contextName) => {
+        const ref = contextRefs.current[contextName];
+        if (ref) {
+            setSize({ width: ref.offsetWidth, height: ref.offsetHeight });
+        }
+    }, []);
+    React.useLayoutEffect(() => {
+        measureAndSetSize(effectiveContext);
+    }, []);
+    React.useEffect(() => {
+        measureAndSetSize(effectiveContext);
+    }, [effectiveContext, measureAndSetSize]);
+    return (jsxRuntime.jsx("div", { className: 'toolbar-section', style: size ? { width: size.width, height: size.height } : undefined, children: contexts.map((child) => {
+            const { name, children: contextChildren } = child.props;
+            const isActive = name === effectiveContext;
+            return (jsxRuntime.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));
+        }) }));
+};
+
+exports.ToolbarSection = ToolbarSection;
+//# sourceMappingURL=ToolbarSection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarSection.js","sources":["../../../Toolbar/ToolbarSection.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 { Children, ReactElement, ReactNode, isValidElement, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport type { ToolbarContextProps } from './ToolbarContext';\n\n/** Props for the {@link ToolbarSection} component. */\nexport interface ToolbarSectionProps {\n    /**\n     * The name of the currently active context.\n     * Change this to trigger the fade-out / morph / fade-in animation.\n     * Defaults to the first context if not specified.\n     */\n    activeContext?: string;\n\n    /** {@link ToolbarContext} elements that define each context's toolbar items. */\n    children: ReactNode;\n\n    /** Layout direction matching the parent {@link Toolbar} (default: 'vertical'). */\n    orientation?: 'vertical' | 'horizontal';\n}\n\n/**\n * A section within a {@link Toolbar} that supports multiple named contexts.\n *\n * When {@link activeContext} changes:\n * - The current items fade out.\n * - The section smoothly morphs to the dimensions required by the new context.\n * - The new items fade in.\n *\n * Contexts are defined by placing {@link ToolbarContext} children inside this section.\n * Switching contexts only affects this section; other sections are unaffected.\n */\nexport const ToolbarSection = ({ activeContext, children, orientation = 'vertical' }: ToolbarSectionProps) => {\n    const contextRefs = useRef<Record<string, HTMLDivElement | null>>({});\n    const [size, setSize] = useState<{ width: number; height: number } | null>(null);\n\n    const contexts = Children.toArray(children).filter(\n        (child): child is ReactElement<ToolbarContextProps> =>\n            isValidElement(child) && typeof (child.props as ToolbarContextProps).name === 'string'\n    );\n\n    // Default to the first context if activeContext is not provided\n    const effectiveContext = activeContext ?? (contexts[0]?.props as ToolbarContextProps)?.name ?? '';\n\n    const flexClass = orientation === 'horizontal' ? 'flex-row' : 'flex-col';\n\n    /** Measure the given context's natural dimensions and update the section size. */\n    const measureAndSetSize = useCallback((contextName: string) => {\n        const ref = contextRefs.current[contextName];\n        if (ref) {\n            setSize({ width: ref.offsetWidth, height: ref.offsetHeight });\n        }\n    }, []);\n\n    // Set the initial size synchronously before the first browser paint so there is no layout flash.\n    // Empty dependency array is intentional: ongoing context changes are handled by the useEffect below.\n    useLayoutEffect(() => {\n        measureAndSetSize(effectiveContext);\n    }, []); // run only on mount\n\n    // After a context switch, let the browser paint the opacity transition first,\n    // then update the explicit size so the CSS width/height transition kicks in.\n    useEffect(() => {\n        measureAndSetSize(effectiveContext);\n    }, [effectiveContext, measureAndSetSize]);\n\n    return (\n        <div\n            className='toolbar-section'\n            style={size ? { width: size.width, height: size.height } : undefined}\n        >\n            {contexts.map((child) => {\n                const { name, children: contextChildren } = child.props as ToolbarContextProps;\n                const isActive = name === effectiveContext;\n\n                return (\n                    <div\n                        key={name}\n                        ref={(element) => { contextRefs.current[name] = element; }}\n                        className={`toolbar-context inline-flex ${flexClass} items-center gap-1 ${\n                            isActive ? 'toolbar-context--active' : 'toolbar-context--inactive'\n                        }`}\n                    >\n                        {contextChildren}\n                    </div>\n                );\n            })}\n        </div>\n    );\n};\n"],"names":["useRef","useState","Children","isValidElement","useCallback","useLayoutEffect","useEffect","_jsx"],"mappings":";;;;;AAkCO,MAAM,cAAc,GAAG,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,WAAW,GAAG,UAAU,EAAuB,KAAI;AACzG,IAAA,MAAM,WAAW,GAAGA,YAAM,CAAwC,EAAE,CAAC;IACrE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAGC,cAAQ,CAA2C,IAAI,CAAC;AAEhF,IAAA,MAAM,QAAQ,GAAGC,cAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAC9C,CAAC,KAAK,KACFC,oBAAc,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,GAAGC,iBAAW,CAAC,CAAC,WAAmB,KAAI;QAC1D,MAAM,GAAG,GAAG,WAAW,CAAC,OAAO,CAAC,WAAW,CAAC;QAC5C,IAAI,GAAG,EAAE;AACL,YAAA,OAAO,CAAC,EAAE,KAAK,EAAE,GAAG,CAAC,WAAW,EAAE,MAAM,EAAE,GAAG,CAAC,YAAY,EAAE,CAAC;QACjE;IACJ,CAAC,EAAE,EAAE,CAAC;IAINC,qBAAe,CAAC,MAAK;QACjB,iBAAiB,CAAC,gBAAgB,CAAC;IACvC,CAAC,EAAE,EAAE,CAAC;IAINC,eAAS,CAAC,MAAK;QACX,iBAAiB,CAAC,gBAAgB,CAAC;AACvC,IAAA,CAAC,EAAE,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;AAEzC,IAAA,QACIC,cAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAC,iBAAiB,EAC3B,KAAK,EAAE,IAAI,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,SAAS,EAAA,QAAA,EAEnE,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,KAAI;YACpB,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,eAAe,EAAE,GAAG,KAAK,CAAC,KAA4B;AAC9E,YAAA,MAAM,QAAQ,GAAG,IAAI,KAAK,gBAAgB;AAE1C,YAAA,QACIA,cAAA,CAAA,KAAA,EAAA,EAEI,GAAG,EAAE,CAAC,OAAO,KAAI,EAAG,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,EAC1D,SAAS,EAAE,+BAA+B,SAAS,CAAA,oBAAA,EAC/C,QAAQ,GAAG,yBAAyB,GAAG,2BAC3C,EAAE,EAAA,QAAA,EAED,eAAe,IANX,IAAI,CAOP;QAEd,CAAC,CAAC,EAAA,CACA;AAEd;;;;"}

package/dist/cjs/Toolbar/index.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var Toolbar = require('./Toolbar.js');
+var ToolbarButton = require('./ToolbarButton.js');
+var ToolbarContext = require('./ToolbarContext.js');
+var ToolbarSection = require('./ToolbarSection.js');
+var ToolbarFanOutItem = require('./ToolbarFanOutItem.js');
+
+
+
+exports.Toolbar = Toolbar.Toolbar;
+exports.ToolbarButton = ToolbarButton.ToolbarButton;
+exports.ToolbarContext = ToolbarContext.ToolbarContext;
+exports.ToolbarSection = ToolbarSection.ToolbarSection;
+exports.ToolbarFanOutItem = ToolbarFanOutItem.ToolbarFanOutItem;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/dist/cjs/index.js

@@ -12,6 +12,7 @@ var index$8 = require('./ObjectNavigationalBar/index.js');
 var index$9 = require('./PivotViewer/index.js');
 var index$a = require('./SchemaEditor/index.js');
 var index$b = require('./TimeMachine/index.js');
+var index$c = require('./Toolbar/index.js');
 
 
 
@@ -27,4 +28,5 @@ exports.ObjectNavigationalBar = index$8;
 exports.PivotViewer = index$9;
 exports.SchemaEditor = index$a;
 exports.TimeMachine = index$b;
+exports.Toolbar = index$c;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/Common/Tooltip.css

@@ -0,0 +1,10 @@
+/* Copyright (c) Cratis. All rights reserved. */
+/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
+
+/* ── Tooltip bubble ──────────────────────────────────────────────────────── */
+.tooltip-bubble {
+    background: var(--surface-100);
+    color: var(--text-color);
+    border: 1px solid var(--surface-border);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}

package/dist/esm/Common/Tooltip.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './Tooltip.css';
+export type TooltipPosition = 'top' | 'right' | 'bottom' | 'left';
+export interface TooltipProps {
+    content: string;
+    position?: TooltipPosition;
+    children: React.ReactNode;
+}
+export declare const Tooltip: React.FC<TooltipProps>;
+//# sourceMappingURL=Tooltip.d.ts.map

package/dist/esm/Common/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../Common/Tooltip.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,eAAe,CAAC;AAGvB,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAGlE,MAAM,WAAW,YAAY;IAEzB,OAAO,EAAE,MAAM,CAAC;IAEhB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAE3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAaD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAa1C,CAAC"}

package/dist/esm/Common/Tooltip.js

@@ -0,0 +1,15 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import './Tooltip.css';
+
+const POSITION_CLASSES = {
+    right: 'left-full ml-2 top-1/2 -translate-y-1/2',
+    left: 'right-full mr-2 top-1/2 -translate-y-1/2',
+    top: 'bottom-full mb-2 left-1/2 -translate-x-1/2',
+    bottom: 'top-full mt-2 left-1/2 -translate-x-1/2',
+};
+const Tooltip = ({ content, position = 'top', children }) => (jsxs("div", { className: 'relative group inline-flex', children: [children, jsx("div", { role: 'tooltip', className: `tooltip-bubble pointer-events-none absolute ${POSITION_CLASSES[position]} z-50
+                text-xs px-2 py-1 rounded
+                whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-150 delay-200`, style: { fontFamily: 'system-ui, sans-serif' }, children: content })] }));
+
+export { Tooltip };
+//# sourceMappingURL=Tooltip.js.map

package/dist/esm/Common/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sources":["../../../Common/Tooltip.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 React from 'react';\nimport './Tooltip.css';\n\n/** Position of the tooltip relative to its trigger element. */\nexport type TooltipPosition = 'top' | 'right' | 'bottom' | 'left';\n\n/** Props for the {@link Tooltip} component. */\nexport interface TooltipProps {\n    /** The text to display inside the tooltip. */\n    content: string;\n    /** Where the tooltip appears relative to the trigger (default: 'top'). */\n    position?: TooltipPosition;\n    /** The element that triggers the tooltip on hover. */\n    children: React.ReactNode;\n}\n\nconst POSITION_CLASSES: Record<TooltipPosition, string> = {\n    right:  'left-full ml-2 top-1/2 -translate-y-1/2',\n    left:   'right-full mr-2 top-1/2 -translate-y-1/2',\n    top:    'bottom-full mb-2 left-1/2 -translate-x-1/2',\n    bottom: 'top-full mt-2 left-1/2 -translate-x-1/2',\n};\n\n/**\n * A CSS-only hover tooltip wrapper. Wraps any child element and displays\n * a styled floating label on hover without relying on native browser tooltips.\n */\nexport const Tooltip: React.FC<TooltipProps> = ({ content, position = 'top', children }) => (\n    <div className='relative group inline-flex'>\n        {children}\n        <div\n            role='tooltip'\n            className={`tooltip-bubble pointer-events-none absolute ${POSITION_CLASSES[position]} z-50\n                text-xs px-2 py-1 rounded\n                whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-150 delay-200`}\n            style={{ fontFamily: 'system-ui, sans-serif' }}\n        >\n            {content}\n        </div>\n    </div>\n);\n"],"names":["_jsxs","_jsx"],"mappings":";;;AAmBA,MAAM,gBAAgB,GAAoC;AACtD,IAAA,KAAK,EAAG,yCAAyC;AACjD,IAAA,IAAI,EAAI,0CAA0C;AAClD,IAAA,GAAG,EAAK,4CAA4C;AACpD,IAAA,MAAM,EAAE,yCAAyC;CACpD;AAMM,MAAM,OAAO,GAA2B,CAAC,EAAE,OAAO,EAAE,QAAQ,GAAG,KAAK,EAAE,QAAQ,EAAE,MACnFA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4BAA4B,EAAA,QAAA,EAAA,CACtC,QAAQ,EACTC,aACI,IAAI,EAAC,SAAS,EACd,SAAS,EAAE,CAAA,4CAAA,EAA+C,gBAAgB,CAAC,QAAQ,CAAC,CAAA;;AAEc,6GAAA,CAAA,EAClG,KAAK,EAAE,EAAE,UAAU,EAAE,uBAAuB,EAAE,EAAA,QAAA,EAE7C,OAAO,EAAA,CACN,CAAA,EAAA,CACJ;;;;"}

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

@@ -1,4 +1,5 @@
 export * from './ErrorBoundary';
 export * from './Page';
 export * from './FormElement';
+export * from './Tooltip';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../Common/index.ts"],"names":[],"mappings":"AAGA,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../Common/index.ts"],"names":[],"mappings":"AAGA,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC"}

package/dist/esm/Common/index.js

@@ -1,4 +1,5 @@
 export { ErrorBoundary } from './ErrorBoundary.js';
 export { Page } from './Page.js';
 export { FormElement } from './FormElement.js';
+export { Tooltip } from './Tooltip.js';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/esm/Toolbar/Toolbar.css

@@ -0,0 +1,131 @@
+/* Copyright (c) Cratis. All rights reserved. */
+/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
+
+/* ── Toolbar container ───────────────────────────────────────────────────── */
+.toolbar {
+    background: var(--surface-card);
+    border: 1px solid var(--surface-border);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+/* ── Toolbar button ──────────────────────────────────────────────────────── */
+.toolbar-button {
+    color: var(--text-color-secondary);
+    background: transparent;
+    border: none;
+    transition: background 0.15s, color 0.15s;
+}
+
+.toolbar-button:hover {
+    background: var(--surface-100);
+    color: var(--text-color);
+}
+
+.toolbar-button--active {
+    background: var(--primary-color);
+    color: var(--primary-color-text);
+}
+
+.toolbar-button--active:hover {
+    background: var(--primary-color);
+    color: var(--primary-color-text);
+}
+
+/* ── Toolbar project name label ──────────────────────────────────────────── */
+.toolbar-project-name {
+    padding: 0 8px;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--text-color);
+    white-space: nowrap;
+}
+
+/* ── Toolbar section (context switching) ────────────────────────────────── */
+
+/*
+ * 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
+ * children (e.g. fan-out panels) can extend beyond the section's bounds.
+ * Inactive contexts are hidden via opacity/pointer-events, not overflow clipping.
+ */
+.toolbar-section {
+    position: relative;
+    transition:
+        width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+        height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/*
+ * 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.
+ */
+.toolbar-context {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transition: opacity 0.2s ease;
+}
+
+.toolbar-context--active {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.toolbar-context--inactive {
+    opacity: 0;
+    pointer-events: none;
+}
+
+/* ── Toolbar fan-out item ────────────────────────────────────────────────── */
+
+/*
+ * The wrapper provides the positioning context for the absolutely-placed panel.
+ */
+.toolbar-fanout-item {
+    position: relative;
+}
+
+/*
+ * The fan-out panel is a floating pill that mirrors the Toolbar container style.
+ * When collapsed, it's hidden. When expanded, it appears elevated at the same
+ * position as the trigger button, with the trigger button as the first item.
+ * Vertically centered with where the collapsed button would be.
+ */
+.toolbar-fanout-panel {
+    position: absolute;
+    top: 50%;
+    left: calc(-0.5rem - 1px);
+    transform: translateY(-50%);
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.5rem;
+    background: var(--surface-card);
+    border: 1px solid var(--surface-border);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    border-radius: 1rem;
+    white-space: nowrap;
+    z-index: 10;
+    pointer-events: none;
+    opacity: 0;
+    clip-path: inset(0 100% 0 0 round 1rem);
+    transition:
+        clip-path 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+        opacity 0.2s ease;
+}
+
+/* Panel fans out to the left — reveal animates right → left */
+.toolbar-fanout-panel--left {
+    left: auto;
+    right: calc(-0.5rem - 1px);
+    clip-path: inset(0 0 0 100% round 1rem);
+}
+
+/* Expanded state — fully visible, pointer events restored */
+.toolbar-fanout-panel--visible {
+    clip-path: inset(0 0 0 0 round 1rem);
+    opacity: 1;
+    pointer-events: auto;
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../Toolbar/Toolbar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,eAAe,CAAC;AAGvB,MAAM,WAAW,YAAY;IAEzB,QAAQ,EAAE,SAAS,CAAC;IAEpB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CAC3C;AAOD,eAAO,MAAM,OAAO,GAAI,2BAAwC,YAAY,4CAQ3E,CAAC"}

package/dist/esm/Toolbar/Toolbar.js

@@ -0,0 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
+import './Toolbar.css';
+
+const Toolbar = ({ children, orientation = 'vertical' }) => (jsx("div", { className: `toolbar inline-flex ${orientation === 'horizontal' ? 'flex-row' : 'flex-col'} items-center gap-1 p-2 rounded-2xl`, children: children }));
+
+export { Toolbar };
+//# sourceMappingURL=Toolbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.js","sources":["../../../Toolbar/Toolbar.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 { ReactNode } from 'react';\nimport './Toolbar.css';\n\n/** Props for the {@link Toolbar} component. */\nexport interface ToolbarProps {\n    /** The {@link ToolbarButton} elements to render inside this toolbar group. */\n    children: ReactNode;\n    /** Layout direction of the toolbar (default: 'vertical'). */\n    orientation?: 'vertical' | 'horizontal';\n}\n\n/**\n * A toolbar container that groups icon buttons with a rounded border,\n * mimicking the style of tools panels found in canvas-based applications.\n * Supports both vertical (default) and horizontal orientations.\n */\nexport const Toolbar = ({ children, orientation = 'vertical' }: ToolbarProps) => (\n    <div\n        className={`toolbar inline-flex ${\n            orientation === 'horizontal' ? 'flex-row' : 'flex-col'\n        } items-center gap-1 p-2 rounded-2xl`}\n    >\n        {children}\n    </div>\n);\n"],"names":["_jsx"],"mappings":";;;AAmBO,MAAM,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAE,WAAW,GAAG,UAAU,EAAgB,MACxEA,GAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,CAAA,oBAAA,EACP,WAAW,KAAK,YAAY,GAAG,UAAU,GAAG,UAChD,CAAA,mCAAA,CAAqC,EAAA,QAAA,EAEpC,QAAQ,EAAA,CACP;;;;"}

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Toolbar } from './Toolbar';
+declare const meta: Meta<typeof Toolbar>;
+export default meta;
+type Story = StoryObj<typeof Toolbar>;
+export declare const Default: Story;
+export declare const MultipleGroups: Story;
+export declare const WithActiveButton: Story;
+export declare const WithContexts: Story;
+export declare const WithFanOut: Story;
+//# sourceMappingURL=Toolbar.stories.d.ts.map

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

@@ -0,0 +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;AAMpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAM9B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAGtC,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;AAQF,eAAO,MAAM,UAAU,EAAE,KA+CxB,CAAC"}