@datalayer/primer-addons 1.0.6 → 1.0.7

package/lib/components/index.d.ts

@@ -5,3 +5,4 @@ export * from "./closeable-flash/CloseableFlash";
 export * from "./icons/CircleIcon";
 export * from "./overlay/Overlay";
 export * from "./slider/Slider";
+export * from "./toolbar";

package/lib/components/index.js

@@ -5,3 +5,4 @@ export * from "./closeable-flash/CloseableFlash";
 export * from "./icons/CircleIcon";
 export * from "./overlay/Overlay";
 export * from "./slider/Slider";
+export * from "./toolbar";

package/lib/components/toolbar/FloatingToolbar.d.ts

@@ -0,0 +1,3 @@
+import type { FloatingToolbarProps } from './types';
+export declare function FloatingToolbar({ items, extraItems, anchorElement, isVisible, className, disabled, ariaLabel, portalContainer, }: FloatingToolbarProps): import("react").ReactPortal | null;
+export default FloatingToolbar;

package/lib/components/toolbar/FloatingToolbar.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * FloatingToolbar - A floating toolbar that positions itself near a selection or anchor.
+ *
+ * Uses createPortal and absolute positioning to float above content.
+ * Designed to be used as a text-selection floating format bar, or an inline AI action bar.
+ *
+ * Extensible: consumers register items via the `items` and `extraItems` props.
+ *
+ * Usage:
+ * ```tsx
+ * <FloatingToolbar
+ *   isVisible={hasSelection}
+ *   anchorElement={floatingAnchor}
+ *   items={formatItems}
+ *   extraItems={aiItems}
+ * />
+ * ```
+ *
+ * @module components/toolbar/FloatingToolbar
+ */
+import { useMemo, useRef, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { Box } from '../box/Box';
+import { ToolbarRenderer } from './ToolbarRenderer';
+/**
+ * Position the floating element relative to a DOMRect within an anchor element.
+ */
+function setFloatingPosition(targetRect, floatingElem, anchorElem, verticalGap = 10, horizontalOffset = 5) {
+    const scrollerElem = anchorElem.parentElement;
+    if (targetRect === null || !scrollerElem) {
+        floatingElem.style.opacity = '0';
+        floatingElem.style.transform = 'translateY(-4px)';
+        floatingElem.style.top = '-10000px';
+        floatingElem.style.left = '-10000px';
+        return;
+    }
+    const floatingElemRect = floatingElem.getBoundingClientRect();
+    const anchorElementRect = anchorElem.getBoundingClientRect();
+    const editorScrollerRect = scrollerElem.getBoundingClientRect();
+    let top = targetRect.top - floatingElemRect.height - verticalGap;
+    let left = targetRect.left -
+        horizontalOffset -
+        (anchorElementRect.left - editorScrollerRect.left);
+    // Keep within anchor bounds
+    if (top < anchorElementRect.top) {
+        top = targetRect.bottom + verticalGap;
+    }
+    if (left + floatingElemRect.width > editorScrollerRect.right) {
+        left = editorScrollerRect.right - floatingElemRect.width - horizontalOffset;
+    }
+    floatingElem.style.opacity = '1';
+    floatingElem.style.transform = 'translateY(0)';
+    floatingElem.style.top = `${top}px`;
+    floatingElem.style.left = `${left}px`;
+}
+export function FloatingToolbar({ items, extraItems, anchorElement, isVisible, className, disabled, ariaLabel = 'Floating toolbar', portalContainer, }) {
+    const floatingRef = useRef(null);
+    const allItems = useMemo(() => {
+        if (!extraItems?.length)
+            return items;
+        return [...items, ...extraItems];
+    }, [items, extraItems]);
+    const updatePosition = useCallback(() => {
+        const floatingElem = floatingRef.current;
+        if (!floatingElem || !anchorElement)
+            return;
+        const nativeSelection = window.getSelection();
+        if (!nativeSelection || nativeSelection.isCollapsed || !isVisible) {
+            floatingElem.style.opacity = '0';
+            floatingElem.style.transform = 'translateY(-4px)';
+            return;
+        }
+        const range = nativeSelection.getRangeAt(0);
+        const rangeRect = range.getBoundingClientRect();
+        setFloatingPosition(rangeRect, floatingElem, anchorElement);
+    }, [anchorElement, isVisible]);
+    // Update position on scroll and resize
+    useEffect(() => {
+        if (!isVisible)
+            return;
+        const update = () => updatePosition();
+        window.addEventListener('resize', update);
+        const scrollerElem = anchorElement?.parentElement;
+        if (scrollerElem) {
+            scrollerElem.addEventListener('scroll', update);
+        }
+        // Initial position
+        update();
+        return () => {
+            window.removeEventListener('resize', update);
+            if (scrollerElem) {
+                scrollerElem.removeEventListener('scroll', update);
+            }
+        };
+    }, [isVisible, updatePosition, anchorElement]);
+    if (!isVisible || allItems.length === 0) {
+        return null;
+    }
+    const container = portalContainer || anchorElement || document.body;
+    const toolbar = (_jsx(Box, { ref: floatingRef, className: className, role: "toolbar", "aria-label": ariaLabel, sx: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '2px',
+            px: 1,
+            py: '4px',
+            bg: 'canvas.overlay',
+            border: '1px solid',
+            borderColor: 'border.default',
+            borderRadius: 2,
+            boxShadow: 'shadow.large',
+            position: 'absolute',
+            zIndex: 10,
+            top: '-10000px',
+            left: '-10000px',
+            opacity: 0,
+            transition: 'opacity 0.15s ease, transform 0.15s ease',
+            transform: 'translateY(-4px)',
+        }, children: _jsx(ToolbarRenderer, { items: allItems, disabled: disabled, size: "small" }) }));
+    return createPortal(toolbar, container);
+}
+export default FloatingToolbar;

package/lib/components/toolbar/Toolbar.d.ts

@@ -0,0 +1,3 @@
+import type { ToolbarProps } from './types';
+export declare function Toolbar({ items, extraItems, className, disabled, ariaLabel, }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
+export default Toolbar;

package/lib/components/toolbar/Toolbar.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Toolbar - Fixed/sticky toolbar component.
+ *
+ * An extensible toolbar that renders ToolbarItems using Primer React components.
+ * Designed to be used as a rich text editor toolbar or any fixed toolbar.
+ *
+ * Usage:
+ * ```tsx
+ * <Toolbar
+ *   items={[
+ *     { key: 'bold', type: 'button', icon: BoldIcon, ariaLabel: 'Bold', onClick: () => {} },
+ *     { key: 'divider-1', type: 'divider' },
+ *     { key: 'heading', type: 'dropdown', ariaLabel: 'Heading', label: 'Normal', options: [...] },
+ *   ]}
+ *   extraItems={pluginItems}
+ * />
+ * ```
+ *
+ * @module components/toolbar/Toolbar
+ */
+import { useMemo } from 'react';
+import { Box } from '../box/Box';
+import { ToolbarRenderer } from './ToolbarRenderer';
+export function Toolbar({ items, extraItems, className, disabled, ariaLabel = 'Editor toolbar', }) {
+    const allItems = useMemo(() => {
+        if (!extraItems?.length)
+            return items;
+        return [...items, ...extraItems];
+    }, [items, extraItems]);
+    return (_jsx(Box, { className: className, role: "toolbar", "aria-label": ariaLabel, sx: {
+            display: 'flex',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+            gap: '2px',
+            px: 2,
+            py: 1,
+            bg: 'canvas.default',
+            borderBottom: '1px solid',
+            borderColor: 'border.default',
+            position: 'sticky',
+            top: 0,
+            zIndex: 2,
+        }, children: _jsx(ToolbarRenderer, { items: allItems, disabled: disabled, size: "medium" }) }));
+}
+export default Toolbar;

package/lib/components/toolbar/ToolbarButton.d.ts

@@ -0,0 +1,8 @@
+import type { ToolbarButtonItem } from './types';
+export interface ToolbarButtonProps {
+    item: ToolbarButtonItem;
+    /** Size variant: 'small' for floating toolbar, 'medium' for fixed toolbar */
+    size?: 'small' | 'medium';
+}
+export declare function ToolbarButton({ item, size }: ToolbarButtonProps): import("react/jsx-runtime").JSX.Element;
+export default ToolbarButton;

package/lib/components/toolbar/ToolbarButton.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * ToolbarButton - A single button in a Toolbar.
+ *
+ * Renders a native <button> with a direct Octicon icon.
+ * Avoids Primer's IconButton and Tooltip components to prevent invariant
+ * violations in Primer v37 (Tooltip requires a native interactive child,
+ * and IconButton's internal Tooltip conflicts with external wrappers).
+ *
+ * Uses the native HTML `title` attribute for tooltip behaviour.
+ *
+ * @module components/toolbar/ToolbarButton
+ */
+import { isValidElement } from 'react';
+export function ToolbarButton({ item, size = 'medium' }) {
+    const { ariaLabel, title, icon, label, isActive, onClick, disabled } = item;
+    // Resolve icon → React element.
+    // Octicon components use React.forwardRef, which returns an *object*
+    // (typeof === 'object'), NOT a function.  So we check isValidElement first
+    // (already-instantiated JSX), then treat anything else as a component type.
+    let iconElement = null;
+    if (icon) {
+        if (isValidElement(icon)) {
+            iconElement = icon;
+        }
+        else {
+            // Component type: function component, forwardRef, or memo wrapper
+            const IconComp = icon;
+            iconElement = _jsx(IconComp, { size: 16 });
+        }
+    }
+    else if (label) {
+        // Fallback: render text label (e.g. "x₂" for subscript)
+        iconElement = _jsx("span", { style: { fontSize: 12, fontWeight: 600, lineHeight: 1 }, children: label });
+    }
+    const btnSize = size === 'small' ? 28 : 32;
+    return (_jsx("button", { type: "button", "aria-label": ariaLabel, title: title, onClick: onClick, disabled: disabled, style: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: btnSize,
+            height: btnSize,
+            padding: 0,
+            margin: 0,
+            border: 'none',
+            borderRadius: 6,
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            background: isActive ? 'var(--bgColor-accent-muted, rgba(9,105,218,0.1))' : 'transparent',
+            color: isActive ? 'var(--fgColor-accent, #0969da)' : 'var(--fgColor-muted, #656d76)',
+            opacity: disabled ? 0.5 : 1,
+            lineHeight: 1,
+        }, onMouseEnter: (e) => {
+            if (!disabled) {
+                e.currentTarget.style.background = 'var(--bgColor-neutral-muted, rgba(175,184,193,0.2))';
+                e.currentTarget.style.color = 'var(--fgColor-default, #1f2328)';
+            }
+        }, onMouseLeave: (e) => {
+            e.currentTarget.style.background = isActive
+                ? 'var(--bgColor-accent-muted, rgba(9,105,218,0.1))'
+                : 'transparent';
+            e.currentTarget.style.color = isActive
+                ? 'var(--fgColor-accent, #0969da)'
+                : 'var(--fgColor-muted, #656d76)';
+        }, children: iconElement }));
+}
+export default ToolbarButton;

package/lib/components/toolbar/ToolbarDivider.d.ts

@@ -0,0 +1,6 @@
+export interface ToolbarDividerProps {
+    /** Orientation: vertical for horizontal toolbars, horizontal for vertical */
+    orientation?: 'vertical' | 'horizontal';
+}
+export declare function ToolbarDivider({ orientation }: ToolbarDividerProps): import("react/jsx-runtime").JSX.Element;
+export default ToolbarDivider;

package/lib/components/toolbar/ToolbarDivider.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * ToolbarDivider - A vertical divider between toolbar items.
+ *
+ * @module components/toolbar/ToolbarDivider
+ */
+import { Box } from '../box/Box';
+export function ToolbarDivider({ orientation = 'vertical' }) {
+    return (_jsx(Box, { sx: {
+            ...(orientation === 'vertical'
+                ? {
+                    width: '1px',
+                    height: '20px',
+                    mx: 1,
+                }
+                : {
+                    height: '1px',
+                    width: '100%',
+                    my: 1,
+                }),
+            bg: 'border.muted',
+            flexShrink: 0,
+        } }));
+}
+export default ToolbarDivider;

package/lib/components/toolbar/ToolbarDropdown.d.ts

@@ -0,0 +1,8 @@
+import type { ToolbarDropdownItem } from './types';
+export interface ToolbarDropdownProps {
+    item: ToolbarDropdownItem;
+    /** Size variant */
+    size?: 'small' | 'medium';
+}
+export declare function ToolbarDropdown({ item, size }: ToolbarDropdownProps): import("react/jsx-runtime").JSX.Element;
+export default ToolbarDropdown;

package/lib/components/toolbar/ToolbarDropdown.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * ToolbarDropdown - A dropdown menu in a Toolbar.
+ *
+ * Uses Primer React ActionMenu for accessible dropdown menus.
+ *
+ * @module components/toolbar/ToolbarDropdown
+ */
+import { isValidElement } from 'react';
+import { ActionMenu, ActionList, Text } from '@primer/react';
+import { Box } from '../box/Box';
+function renderIcon(icon) {
+    if (!icon)
+        return null;
+    if (typeof icon === 'function') {
+        const IconComp = icon;
+        return _jsx(IconComp, { size: 16 });
+    }
+    if (isValidElement(icon)) {
+        return icon;
+    }
+    return null;
+}
+export function ToolbarDropdown({ item, size = 'medium' }) {
+    const { ariaLabel, icon, label, options, disabled } = item;
+    return (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Button, { "aria-label": ariaLabel, disabled: disabled, variant: "invisible", size: size, sx: {
+                    color: 'fg.muted',
+                    fontWeight: 'normal',
+                    fontSize: size === 'small' ? 0 : 1,
+                    px: 2,
+                    '&:hover:not([disabled])': {
+                        bg: 'neutral.muted',
+                        color: 'fg.default',
+                    },
+                }, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [renderIcon(icon), label && (_jsx(Text, { sx: { fontSize: size === 'small' ? 0 : 1 }, children: label }))] }) }), _jsx(ActionMenu.Overlay, { width: "auto", children: _jsx(ActionList, { children: options.map(option => (_jsxs(ActionList.Item, { onSelect: option.onClick, disabled: option.disabled, active: option.isActive, children: [option.icon && (_jsx(ActionList.LeadingVisual, { children: renderIcon(option.icon) })), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%', gap: 3 }, children: [_jsx(Text, { children: option.label }), option.shortcut && (_jsx(Text, { sx: { color: 'fg.subtle', fontSize: 0, fontFamily: 'mono' }, children: option.shortcut }))] })] }, option.key))) }) })] }));
+}
+export default ToolbarDropdown;

package/lib/components/toolbar/ToolbarRenderer.d.ts

@@ -0,0 +1,11 @@
+import type { ToolbarItem } from './types';
+export interface ToolbarRendererProps {
+    items: ToolbarItem[];
+    disabled?: boolean;
+    size?: 'small' | 'medium';
+}
+/**
+ * Sort items by order, then render each one according to its type.
+ */
+export declare function ToolbarRenderer({ items, disabled, size }: ToolbarRendererProps): import("react/jsx-runtime").JSX.Element;
+export default ToolbarRenderer;

package/lib/components/toolbar/ToolbarRenderer.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * ToolbarRenderer - Renders an array of ToolbarItems.
+ *
+ * Shared logic between Toolbar and FloatingToolbar.
+ *
+ * @module components/toolbar/ToolbarRenderer
+ */
+import { Fragment } from 'react';
+import { ToolbarButton } from './ToolbarButton';
+import { ToolbarDropdown } from './ToolbarDropdown';
+import { ToolbarDivider } from './ToolbarDivider';
+/**
+ * Sort items by order, then render each one according to its type.
+ */
+export function ToolbarRenderer({ items, disabled, size = 'medium' }) {
+    const sorted = [...items]
+        .filter(item => !item.hidden)
+        .sort((a, b) => (a.order ?? 100) - (b.order ?? 100));
+    return (_jsx(_Fragment, { children: sorted.map(item => {
+            const itemDisabled = disabled || item.disabled;
+            switch (item.type) {
+                case 'button':
+                    return (_jsx(Fragment, { children: _jsx(ToolbarButton, { item: { ...item, disabled: itemDisabled }, size: size }) }, item.key));
+                case 'dropdown':
+                    return (_jsx(Fragment, { children: _jsx(ToolbarDropdown, { item: { ...item, disabled: itemDisabled }, size: size }) }, item.key));
+                case 'divider':
+                    return (_jsx(Fragment, { children: _jsx(ToolbarDivider, {}) }, item.key));
+                case 'custom':
+                    return _jsx(Fragment, { children: item.render() }, item.key);
+                default:
+                    return null;
+            }
+        }) }));
+}
+export default ToolbarRenderer;

package/lib/components/toolbar/index.d.ts

@@ -0,0 +1,7 @@
+export * from './types';
+export * from './Toolbar';
+export * from './FloatingToolbar';
+export * from './ToolbarButton';
+export * from './ToolbarDropdown';
+export * from './ToolbarDivider';
+export * from './ToolbarRenderer';

package/lib/components/toolbar/index.js

@@ -0,0 +1,11 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from './types';
+export * from './Toolbar';
+export * from './FloatingToolbar';
+export * from './ToolbarButton';
+export * from './ToolbarDropdown';
+export * from './ToolbarDivider';
+export * from './ToolbarRenderer';

package/lib/components/toolbar/types.d.ts

@@ -0,0 +1,134 @@
+import type { ReactNode } from 'react';
+import type { IconProps } from '@primer/octicons-react';
+/**
+ * Toolbar item types that can be registered in a toolbar.
+ */
+export type ToolbarItemType = 'button' | 'dropdown' | 'divider' | 'custom';
+/**
+ * Base toolbar item definition.
+ */
+export interface ToolbarItemBase {
+    /** Unique key for the item */
+    key: string;
+    /** Item type */
+    type: ToolbarItemType;
+    /** Sort order (lower = earlier). Default: 100 */
+    order?: number;
+    /** Group name for logical grouping */
+    group?: string;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Whether to hide the item */
+    hidden?: boolean;
+}
+/**
+ * Toolbar button item definition.
+ */
+export interface ToolbarButtonItem extends ToolbarItemBase {
+    type: 'button';
+    /** Accessible label */
+    ariaLabel: string;
+    /** Tooltip text */
+    title?: string;
+    /** Icon component (Octicon or custom) */
+    icon?: React.ComponentType<IconProps> | ReactNode;
+    /** Text label */
+    label?: string;
+    /** Whether the button is in an active/pressed state */
+    isActive?: boolean;
+    /** Click handler */
+    onClick: () => void;
+    /** Keyboard shortcut hint (e.g., "⌘B") */
+    shortcut?: string;
+}
+/**
+ * Dropdown option for ToolbarDropdownItem.
+ */
+export interface ToolbarDropdownOption {
+    /** Unique key */
+    key: string;
+    /** Display label */
+    label: string;
+    /** Icon component or element */
+    icon?: React.ComponentType<IconProps> | ReactNode;
+    /** Whether this option is active/selected */
+    isActive?: boolean;
+    /** Click handler */
+    onClick: () => void;
+    /** Keyboard shortcut hint */
+    shortcut?: string;
+    /** Whether the option is disabled */
+    disabled?: boolean;
+}
+/**
+ * Toolbar dropdown item definition.
+ */
+export interface ToolbarDropdownItem extends ToolbarItemBase {
+    type: 'dropdown';
+    /** Accessible label */
+    ariaLabel: string;
+    /** Tooltip text */
+    title?: string;
+    /** Icon component or element for the trigger */
+    icon?: React.ComponentType<IconProps> | ReactNode;
+    /** Text label for the trigger */
+    label?: string;
+    /** Dropdown options */
+    options: ToolbarDropdownOption[];
+}
+/**
+ * Toolbar divider item definition.
+ */
+export interface ToolbarDividerItem extends ToolbarItemBase {
+    type: 'divider';
+}
+/**
+ * Toolbar custom item definition.
+ */
+export interface ToolbarCustomItem extends ToolbarItemBase {
+    type: 'custom';
+    /** Custom render function */
+    render: () => ReactNode;
+}
+/**
+ * Union of all toolbar item types.
+ */
+export type ToolbarItem = ToolbarButtonItem | ToolbarDropdownItem | ToolbarDividerItem | ToolbarCustomItem;
+/**
+ * Props for the extensible Toolbar component.
+ */
+export interface ToolbarProps {
+    /** Array of toolbar items to render */
+    items: ToolbarItem[];
+    /** Additional CSS class name */
+    className?: string;
+    /** Whether the entire toolbar is disabled */
+    disabled?: boolean;
+    /** Additional items to append (for extensibility) */
+    extraItems?: ToolbarItem[];
+    /** Aria label for the toolbar */
+    ariaLabel?: string;
+}
+/**
+ * Props for the extensible FloatingToolbar component.
+ */
+export interface FloatingToolbarProps {
+    /** Array of toolbar items to render */
+    items: ToolbarItem[];
+    /** The anchor element to position relative to */
+    anchorElement?: HTMLElement | null;
+    /** Whether the floating toolbar is visible */
+    isVisible: boolean;
+    /** Additional CSS class name */
+    className?: string;
+    /** Whether the entire toolbar is disabled */
+    disabled?: boolean;
+    /** Additional items to append (for extensibility) */
+    extraItems?: ToolbarItem[];
+    /** Aria label for the toolbar */
+    ariaLabel?: string;
+    /** Callback when the toolbar requests to close */
+    onClose?: () => void;
+    /** Portal container element. Defaults to document.body */
+    portalContainer?: HTMLElement;
+}

package/lib/components/toolbar/types.js

@@ -0,0 +1,5 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export {};

package/package.json

@@ -1,16 +1,19 @@
 {
   "name": "@datalayer/primer-addons",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "license": "BSD-3-Clause",
   "scripts": {
-    "dev": "vite",
-    "start": "vite",
     "build": "tsc && vite build",
-    "watch": "tsc -w",
+    "build-storybook": "storybook build",
+    "build:lib": "npm run clean:lib&& tsc -b",
+    "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
+    "dev": "vite",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
+    "start": "vite",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "watch": "tsc -w",
+    "watch:lib": "tsc -b -w"
   },
   "main": "lib/index.js",
   "files": [