@snowcone-app/canvas 0.1.0

package/dist/components/toolbars/SecondaryPanels.d.ts

@@ -0,0 +1,125 @@
+import { default as React } from 'react';
+import { ImageElement } from '../../core/ImageElement.js';
+import { StrokeConfig, CompositingScope } from '../../types/index.js';
+export interface CornerRadiusPanelProps {
+    value: number;
+    onChange: (value: number) => void;
+}
+export declare const CornerRadiusPanel: React.FC<CornerRadiusPanelProps>;
+export interface RotationPanelProps {
+    value: number;
+    onChange: (value: number) => void;
+    onRotate90: () => void;
+}
+export declare const RotationPanel: React.FC<RotationPanelProps>;
+export interface FontSizePanelProps {
+    value: number;
+    onChange: (value: number) => void;
+    /** Current text-box width. When null/undefined the width slider is
+     *  hidden (e.g. element type doesn't expose a width on transformData). */
+    widthValue?: number | null;
+    /** Called when the width slider moves. */
+    onWidthChange?: (value: number) => void;
+}
+export declare const FontSizePanel: React.FC<FontSizePanelProps>;
+export interface OpacityPanelProps {
+    /** Opacity value 0-1 */
+    value: number;
+    /** Called with 0-1 range */
+    onChange: (value: number) => void;
+}
+export declare const OpacityPanel: React.FC<OpacityPanelProps>;
+export interface ShapeCornerRadiusPanelProps {
+    value: number;
+    onChange: (value: number) => void;
+}
+export declare const ShapeCornerRadiusPanel: React.FC<ShapeCornerRadiusPanelProps>;
+export interface ShapeTransparencyPanelProps {
+    /** Fill opacity 0-1 */
+    value: number;
+    /** Called with 0-1 range */
+    onChange: (value: number) => void;
+}
+export declare const ShapeTransparencyPanel: React.FC<ShapeTransparencyPanelProps>;
+export interface ShapeSidesPanelProps {
+    value: number;
+    onChange: (value: number) => void;
+}
+export declare const ShapeSidesPanel: React.FC<ShapeSidesPanelProps>;
+export interface ShapePointsPanelProps {
+    value: number;
+    onChange: (value: number) => void;
+}
+export declare const ShapePointsPanel: React.FC<ShapePointsPanelProps>;
+export interface ShapeInnerRadiusPanelProps {
+    /** Inner radius 0-1 */
+    value: number;
+    /** Called with 0-1 range */
+    onChange: (value: number) => void;
+}
+export declare const ShapeInnerRadiusPanel: React.FC<ShapeInnerRadiusPanelProps>;
+export interface ShapeColorPanelProps {
+    value: string;
+    onChange: (color: string) => void;
+    documentColors: string[];
+    imageColors?: string[];
+}
+export declare const ShapeColorPanel: React.FC<ShapeColorPanelProps>;
+export interface TextColorPanelProps {
+    value: string;
+    onChange: (e: {
+        target: {
+            value: string;
+        };
+    }) => void;
+    documentColors: string[];
+    imageColors?: string[];
+}
+export declare const TextColorPanel: React.FC<TextColorPanelProps>;
+export type CompositingMode = 'clip' | 'knockout';
+export interface CompositingPanelProps {
+    mode: CompositingMode;
+    fill: boolean;
+    stroke: boolean;
+    scope: CompositingScope;
+    onModeChange: (mode: CompositingMode) => void;
+    onFillChange: (fill: boolean) => void;
+    onStrokeChange: (stroke: boolean) => void;
+    onScopeChange: (scope: CompositingScope) => void;
+}
+export declare const CompositingPanel: React.FC<CompositingPanelProps>;
+/** @deprecated Use CompositingPanel instead */
+export type KnockoutPanelProps = CompositingPanelProps;
+/** @deprecated Use CompositingPanel instead */
+export declare const KnockoutPanel: React.FC<CompositingPanelProps>;
+export interface DistressTexturePanelProps {
+    textureUrl: string;
+    /** Opacity 0-100 (percentage) */
+    opacity: number;
+    onTextureChange: (url: string) => void;
+    onOpacityChange: (pct: number) => void;
+}
+export declare const DistressTexturePanel: React.FC<DistressTexturePanelProps>;
+export interface ImageMaskPanelProps {
+    imageUrl: string;
+    maskType: 'clip' | 'alpha' | 'luma';
+    opacity: number;
+    inverted: boolean;
+    onImageChange: (url: string) => void;
+    onMaskTypeChange: (type: 'clip' | 'alpha' | 'luma') => void;
+    onOpacityChange: (pct: number) => void;
+    onInvertedChange: (inverted: boolean) => void;
+}
+export declare const ImageMaskPanel: React.FC<ImageMaskPanelProps>;
+export interface StrokePanelProps {
+    stroke?: StrokeConfig;
+    onChange: (stroke: StrokeConfig | undefined) => void;
+    documentColors?: string[];
+    imageColors?: string[];
+}
+export declare const StrokePanel: React.FC<StrokePanelProps>;
+export interface CropPanelContentProps {
+    element: ImageElement;
+    onElementUpdate: (element: ImageElement) => void;
+}
+export declare const CropPanelContent: React.FC<CropPanelContentProps>;

package/dist/components/toolbars/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Toolbar components barrel export.
+ *
+ * Per-element toolbars and shared utilities for the contextual toolbar system.
+ */
+export { GroupElementToolbar } from './GroupElementToolbar.js';
+export type { GroupElementToolbarProps } from './GroupElementToolbar.js';
+export { CornerRadiusPanel, RotationPanel, OpacityPanel, FontSizePanel, ShapeCornerRadiusPanel, ShapeTransparencyPanel, ShapeSidesPanel, ShapePointsPanel, ShapeInnerRadiusPanel, ShapeColorPanel, TextColorPanel, CompositingPanel, KnockoutPanel, StrokePanel, CropPanelContent, DistressTexturePanel, ImageMaskPanel, } from './SecondaryPanels.js';
+export type { CompositingMode, StrokePanelProps, DistressTexturePanelProps, ImageMaskPanelProps } from './SecondaryPanels.js';
+export { ExpandedPanelIcon } from './ExpandedPanelIcon.js';
+export type { ExpandedPanelIconProps } from './ExpandedPanelIcon.js';
+export { EmbeddedToolbarLayout } from './EmbeddedToolbarLayout.js';
+export type { EmbeddedToolbarLayoutProps } from './EmbeddedToolbarLayout.js';
+export { FloatingCornerRadiusPanel, FloatingCropPanel } from './FloatingPanels.js';
+export { SecondaryPanelWrapper } from './shared/SecondaryPanelWrapper.js';
+export type { SecondaryPanelWrapperProps } from './shared/SecondaryPanelWrapper.js';
+export { ColorPanelWrapper } from './shared/ColorPanelWrapper.js';
+export type { ColorPanelWrapperProps } from './shared/ColorPanelWrapper.js';

package/dist/components/toolbars/shared/ColorPanelWrapper.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+export interface ColorPanelWrapperProps {
+    /** Whether this panel is currently open/expanded */
+    isOpen: boolean;
+    /** The panel content to render inside the wrapper */
+    children: React.ReactNode;
+}
+export declare const ColorPanelWrapper: React.FC<ColorPanelWrapperProps>;
+export default ColorPanelWrapper;

package/dist/components/toolbars/shared/SecondaryPanelWrapper.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+export interface SecondaryPanelWrapperProps {
+    /** Whether this panel is currently open/expanded */
+    isOpen: boolean;
+    /** The panel content to render inside the wrapper */
+    children: React.ReactNode;
+}
+export declare const SecondaryPanelWrapper: React.FC<SecondaryPanelWrapperProps>;
+export default SecondaryPanelWrapper;

package/dist/components/ui/PresetCarousel.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+export interface PresetItem {
+    id: string;
+    name: string;
+    thumbnailUrl?: string;
+}
+export interface PresetCarouselProps {
+    /** Array of preset items to display */
+    presets: PresetItem[];
+    /** Currently selected preset ID, or empty string for "Off" */
+    selectedId: string;
+    /** Called when a preset is selected. Empty string means "Off". */
+    onSelect: (id: string) => void;
+    /** Show an "Off" button as the first item. Default: true */
+    showOff?: boolean;
+    /** Thumbnail size in pixels. Default: 40 */
+    size?: number;
+    /** Accessible label for the carousel */
+    ariaLabel?: string;
+}
+export declare const PresetCarousel: React.FC<PresetCarouselProps>;

package/dist/components/ui/SecondaryPanel.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+export interface SecondaryPanelProps {
+    /** Panel content */
+    children: React.ReactNode;
+    /** Additional class name for styling/identification */
+    className?: string;
+    /** Padding variant (default: 'normal') */
+    padding?: 'none' | 'compact' | 'normal';
+    /** Whether to add data-preserve-selection attribute (default: true) */
+    preserveSelection?: boolean;
+    /**
+     * Size of the invisible "safe zone" around the panel that still preserves selection.
+     * Prevents accidental deselection when dragging sliders and going slightly outside.
+     * Default: 24px
+     */
+    safeZone?: number;
+}
+/**
+ * SecondaryPanel - Container for secondary toolbar panels
+ *
+ * Features:
+ * - Consistent padding and styling
+ * - Touch handling to prevent parent scroll interference
+ * - data-preserve-selection to prevent accidental deselection
+ * - Invisible safe zone around panel edges
+ */
+export declare const SecondaryPanel: React.FC<SecondaryPanelProps>;
+export default SecondaryPanel;

package/dist/components/ui/SliderRow.d.ts

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+export interface SliderRowProps {
+    /** Label displayed to the left of the slider */
+    label: string;
+    /** Current value */
+    value: number;
+    /** Callback when value changes */
+    onChange: (value: number) => void;
+    /** Minimum value */
+    min: number;
+    /** Maximum value */
+    max: number;
+    /** Step increment (default: 1) */
+    step?: number;
+    /** Unit to display after value (e.g., "%", "°", "px") */
+    unit?: string;
+    /** Show number input field (default: false) */
+    showInput?: boolean;
+    /** Width of the number input (default: '56px') */
+    inputWidth?: string;
+    /** Additional class name for the container */
+    className?: string;
+    /** Layout variant: 'inline' (default) or 'stacked' */
+    variant?: 'inline' | 'stacked';
+}
+/**
+ * SliderRow - A labeled slider with optional input and value display
+ */
+export declare const SliderRow: React.FC<SliderRowProps>;
+export default SliderRow;

package/dist/components/ui/collapsed-toolbar-header.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+export interface CollapsedToolbarHeaderProps {
+    /** Iconify icon string (e.g., "lucide:square-round-corner") or custom React node */
+    icon: string | React.ReactNode;
+    /** Label text to display */
+    label: string;
+    /** Callback when close button is clicked */
+    onClose: () => void;
+    /** Additional CSS classes */
+    className?: string;
+    /** Close button style: 'icon' shows X, 'done' shows Done button */
+    closeButtonStyle?: 'icon' | 'done';
+}
+export declare const CollapsedToolbarHeader: React.FC<CollapsedToolbarHeaderProps>;

package/dist/components/ui/custom-icons.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+interface IconProps {
+    className?: string;
+    size?: number | string;
+}
+/**
+ * Rotate Left icon (lucide-style stroked version)
+ */
+export declare const RotateLeftIcon: React.FC<IconProps>;
+/**
+ * Rotate Right icon (lucide-style stroked version)
+ */
+export declare const RotateRightIcon: React.FC<IconProps>;
+/**
+ * Sparkles icon (based on gravity-ui:sparkles)
+ * Two sparkle shapes - main 4-point star and smaller accent
+ */
+export declare const SparklesIcon: React.FC<IconProps>;
+export declare const CustomIcons: {
+    readonly 'rotate-left': React.FC<IconProps>;
+    readonly 'rotate-right': React.FC<IconProps>;
+    readonly sparkles: React.FC<IconProps>;
+};
+export type CustomIconName = keyof typeof CustomIcons;
+export {};

package/dist/components/ui/icons.d.ts

@@ -0,0 +1,100 @@
+/**
+ * Icon Constants
+ *
+ * Centralized icon definitions using lucide (preferred) with custom icons where needed.
+ * Import icons from here instead of using iconify strings directly.
+ */
+export declare const icons: {
+    readonly plus: "lucide:plus";
+    readonly minus: "lucide:minus";
+    readonly close: "lucide:x";
+    readonly check: "lucide:check";
+    readonly menu: "lucide:menu";
+    readonly moreHorizontal: "lucide:ellipsis";
+    readonly moreVertical: "lucide:ellipsis-vertical";
+    readonly chevronDown: "lucide:chevron-down";
+    readonly chevronUp: "lucide:chevron-up";
+    readonly chevronLeft: "lucide:chevron-left";
+    readonly chevronRight: "lucide:chevron-right";
+    readonly text: "lucide:type";
+    readonly image: "lucide:image";
+    readonly layers: "lucide:layers";
+    readonly shapes: "lucide:shapes";
+    readonly trash: "lucide:trash-2";
+    readonly copy: "lucide:copy";
+    readonly pencil: "lucide:pencil";
+    readonly scissors: "lucide:scissors";
+    readonly save: "lucide:save";
+    readonly folderOpen: "lucide:folder-open";
+    readonly download: "lucide:download";
+    readonly upload: "lucide:upload";
+    readonly eye: "lucide:eye";
+    readonly eyeOff: "lucide:eye-off";
+    readonly lock: "lucide:lock";
+    readonly lockOpen: "lucide:lock-open";
+    readonly search: "lucide:search";
+    readonly link: "lucide:link";
+    readonly settings: "lucide:settings";
+    readonly palette: "lucide:palette";
+    readonly sun: "lucide:sun";
+    readonly moon: "lucide:moon";
+    readonly rotateLeft: "lucide:rotate-ccw";
+    readonly rotateRight: "lucide:rotate-cw";
+    readonly rotateCcwSquare: "lucide:rotate-ccw-square";
+    readonly bold: "lucide:bold";
+    readonly italic: "lucide:italic";
+    readonly underline: "lucide:underline";
+    readonly alignLeft: "lucide:align-left";
+    readonly alignCenter: "lucide:align-center";
+    readonly alignRight: "lucide:align-right";
+    readonly alignJustify: "lucide:align-justify";
+    readonly play: "lucide:play";
+    readonly pause: "lucide:pause";
+    readonly crop: "lucide:crop";
+    readonly flipHorizontal: "lucide:flip-horizontal-2";
+    readonly flipVertical: "lucide:flip-vertical-2";
+    readonly blend: "lucide:blend";
+    readonly cornerRadius: "lucide:square-round-corner";
+    readonly grip: "lucide:grip-vertical";
+    readonly folder: "lucide:folder";
+    readonly file: "lucide:file";
+    readonly fileText: "lucide:file-text";
+    readonly layerForward: "lucide:bring-to-front";
+    readonly layerBackward: "lucide:send-to-back";
+    readonly group: "lucide:group";
+    readonly ungroup: "lucide:ungroup";
+    readonly undo: "lucide:undo-2";
+    readonly redo: "lucide:redo-2";
+    readonly zoomIn: "lucide:zoom-in";
+    readonly zoomOut: "lucide:zoom-out";
+    readonly fitScreen: "lucide:scan";
+    readonly maximize: "lucide:maximize";
+    readonly move: "lucide:move";
+    readonly resize: "lucide:maximize-2";
+    readonly share: "lucide:share";
+    readonly externalLink: "lucide:external-link";
+    readonly cloudUpload: "lucide:cloud-upload";
+    readonly info: "lucide:info";
+    readonly helpCircle: "lucide:help-circle";
+    readonly alertCircle: "lucide:alert-circle";
+    readonly alertTriangle: "lucide:triangle-alert";
+    readonly checkCircle: "lucide:circle-check";
+    readonly arrowLeft: "lucide:arrow-left";
+    readonly arrowRight: "lucide:arrow-right";
+    readonly arrowUp: "lucide:arrow-up";
+    readonly arrowDown: "lucide:arrow-down";
+    readonly layout: "lucide:layout-grid";
+    readonly grid: "lucide:grid-3x3";
+    readonly list: "lucide:list";
+    readonly droplet: "lucide:droplet";
+    readonly paintBucket: "lucide:paint-bucket";
+    readonly letterSpacing: "lucide:space";
+    readonly lineHeight: "lucide:arrow-up-down";
+    readonly wand: "lucide:wand-2";
+    readonly rocket: "lucide:rocket";
+    readonly refresh: "lucide:refresh-cw";
+    readonly circle: "lucide:circle";
+    readonly circleFill: "lucide:circle-dot";
+};
+export type IconName = keyof typeof icons;
+export { RotateLeftIcon, RotateRightIcon, SparklesIcon } from './custom-icons';

package/dist/components/ui/index.d.ts

@@ -0,0 +1,48 @@
+export { Label } from '@snowcone-app/ui';
+export { Switch } from '@snowcone-app/ui';
+export { Separator } from '@snowcone-app/ui';
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from '@snowcone-app/ui';
+export { Spinner, spinnerVariants } from '@snowcone-app/ui';
+export type { SpinnerProps } from '@snowcone-app/ui';
+export { Surface, surfaceVariants, useSurface, SurfaceContext } from '@snowcone-app/ui';
+export type { SurfaceProps } from '@snowcone-app/ui';
+export { TextField } from '@snowcone-app/ui';
+export type { TextFieldProps } from '@snowcone-app/ui';
+export { Kbd, kbdVariants } from '@snowcone-app/ui';
+export type { KbdProps } from '@snowcone-app/ui';
+export { Fieldset, Legend } from '@snowcone-app/ui';
+export type { FieldsetProps, LegendProps } from '@snowcone-app/ui';
+export { Link, LinkIcon, linkVariants } from '@snowcone-app/ui';
+export type { LinkProps } from '@snowcone-app/ui';
+export { Tabs, TabsList, TabsTrigger, TabsContent, TabsRoot } from '@snowcone-app/ui';
+export { RadioGroup, RadioGroupItem, Radio } from '@snowcone-app/ui';
+export { Collapsible, CollapsibleTrigger, CollapsibleContent, CollapsibleRoot, Disclosure, DisclosureTrigger, DisclosureContent, } from '@snowcone-app/ui';
+export { Textarea, TextArea } from '@snowcone-app/ui';
+export type { TextareaProps } from '@snowcone-app/ui';
+export { Input } from '@snowcone-app/ui';
+export type { InputProps } from '@snowcone-app/ui';
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, TooltipRoot } from '@snowcone-app/ui';
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@snowcone-app/ui';
+export { Checkbox } from '@snowcone-app/ui';
+export { Badge, Chip, badgeVariants } from '@snowcone-app/ui';
+export type { BadgeProps } from '@snowcone-app/ui';
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, } from '@snowcone-app/ui';
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, } from '@snowcone-app/ui';
+export { Button, buttonVariants } from '@snowcone-app/ui';
+export type { ButtonProps } from '@snowcone-app/ui';
+export { Slider, SliderTrack, SliderThumb, SliderFill, SliderOutput } from '@snowcone-app/ui';
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverRoot } from '@snowcone-app/ui';
+export { ToolbarButton } from './toolbar-button';
+export type { ToolbarButtonProps } from './toolbar-button';
+export { NormalizedIcon, getIconSet, getScaleFactor, getNormalizedSize, SET_SCALE_FACTORS, SIZE_PRESETS, } from './normalized-icon';
+export type { NormalizedIconProps } from './normalized-icon';
+export { CollapsedToolbarHeader } from './collapsed-toolbar-header';
+export type { CollapsedToolbarHeaderProps } from './collapsed-toolbar-header';
+export { SliderRow } from './SliderRow';
+export type { SliderRowProps } from './SliderRow';
+export { SecondaryPanel } from './SecondaryPanel';
+export type { SecondaryPanelProps } from './SecondaryPanel';
+export { PresetCarousel } from './PresetCarousel';
+export type { PresetCarouselProps, PresetItem } from './PresetCarousel';
+export { icons, type IconName } from './icons';
+export { RotateLeftIcon, RotateRightIcon, SparklesIcon, CustomIcons, type CustomIconName } from './custom-icons';

package/dist/components/ui/normalized-icon.d.ts

@@ -0,0 +1,63 @@
+import { default as React } from 'react';
+export interface NormalizedIconProps {
+    /** Iconify icon string (e.g., "lucide:crop" or "gravity-ui:bold") */
+    icon: string;
+    /** Size preset - 'toolbar' is responsive (24px mobile, 20px desktop) */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'toolbar';
+    /** Additional CSS classes (e.g., for color) */
+    className?: string;
+}
+/**
+ * Scaling factors per icon set to achieve visual consistency.
+ *
+ * These values compensate for differences in stroke width and viewbox padding
+ * across icon sets. Lucide (1.0) is the reference.
+ *
+ * Rationale:
+ * - gravity-ui: Thinner strokes, needs +15% to match visual weight
+ * - lucide: Reference set, no adjustment needed
+ * - hugeicons: Similar visual weight to lucide
+ * - mdi: Slightly bolder strokes, reduce by 5%
+ * - fa6-solid: Solid fill is visually heavy, reduce by 20%
+ */
+declare const SET_SCALE_FACTORS: Record<string, number>;
+/**
+ * Per-icon offset corrections for centering.
+ * Some icons have asymmetric viewbox padding and need manual offset.
+ * Values are in pixels at base size, scaled proportionally.
+ */
+declare const ICON_OFFSETS: Record<string, {
+    x: number;
+    y: number;
+}>;
+/**
+ * Base pixel sizes for each preset.
+ * 'toolbar' is special - it has mobile and desktop values.
+ */
+declare const SIZE_PRESETS: Record<string, number | {
+    mobile: number;
+    desktop: number;
+}>;
+/**
+ * Extract the icon set prefix from an icon string.
+ * @example getIconSet("gravity-ui:plus") => "gravity-ui"
+ * @example getIconSet("lucide:crop") => "lucide"
+ */
+declare function getIconSet(icon: string): string;
+/**
+ * Get the scale factor for an icon set.
+ */
+declare function getScaleFactor(iconSet: string): number;
+/**
+ * Get the offset correction for a specific icon.
+ */
+declare function getIconOffset(icon: string): {
+    x: number;
+    y: number;
+} | null;
+/**
+ * Calculate the normalized pixel size for an icon.
+ */
+declare function getNormalizedSize(baseSize: number, iconSet: string): number;
+export declare const NormalizedIcon: React.FC<NormalizedIconProps>;
+export { getIconSet, getScaleFactor, getIconOffset, getNormalizedSize, SET_SCALE_FACTORS, SIZE_PRESETS, ICON_OFFSETS };

package/dist/components/ui/toolbar-button.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+export interface ToolbarButtonProps {
+    /** Iconify icon string (e.g., "lucide:crop" or "gravity-ui:bold") or React node for custom icons */
+    icon: string | React.ReactNode;
+    /** Click handler */
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Active/pressed state - applies primary color styling */
+    active?: boolean;
+    /** Tooltip text (if provided, wraps button in Tooltip) */
+    tooltip?: string;
+    /** Tooltip delay in ms (default: 300) */
+    tooltipDelay?: number;
+    /** Temporarily disable the tooltip (useful for preventing tooltip flicker after click) */
+    tooltipDisabled?: boolean;
+    /** Accessible label */
+    'aria-label'?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Optional mouse leave handler (for tooltip management) */
+    onMouseLeave?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+export declare const ToolbarButton: React.ForwardRefExoticComponent<ToolbarButtonProps & React.RefAttributes<HTMLButtonElement>>;