@asharca/ui 0.1.0

package/dist/Overlays.d.ts

@@ -0,0 +1,24 @@
+import { ContextMenu as ContextMenuPrimitive, HoverCard as HoverCardPrimitive, Popover as PopoverPrimitive, Tooltip as TooltipPrimitive } from 'radix-ui';
+export declare const Popover: import("react").FC<PopoverPrimitive.PopoverProps>;
+export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const PopoverPortal: import("react").FC<PopoverPrimitive.PopoverPortalProps>;
+export declare const PopoverClose: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const PopoverContent: import("react").ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TooltipProvider: import("react").FC<TooltipPrimitive.TooltipProviderProps>;
+export declare const Tooltip: import("react").FC<TooltipPrimitive.TooltipProps>;
+export declare const TooltipTrigger: import("react").ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const TooltipPortal: import("react").FC<TooltipPrimitive.TooltipPortalProps>;
+export declare const TooltipContent: import("react").ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ContextMenu: import("react").FC<ContextMenuPrimitive.ContextMenuProps>;
+export declare const ContextMenuTrigger: import("react").ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuTriggerProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const ContextMenuPortal: import("react").FC<ContextMenuPrimitive.ContextMenuPortalProps>;
+export declare const ContextMenuSub: import("react").FC<ContextMenuPrimitive.ContextMenuSubProps>;
+export declare const ContextMenuContent: import("react").ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuItem: import("react").ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuSeparator: import("react").ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSeparatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuSubTrigger: import("react").ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubTriggerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuSubContent: import("react").ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const HoverCard: import("react").FC<HoverCardPrimitive.HoverCardProps>;
+export declare const HoverCardTrigger: import("react").ForwardRefExoticComponent<HoverCardPrimitive.HoverCardTriggerProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export declare const HoverCardPortal: import("react").FC<HoverCardPrimitive.HoverCardPortalProps>;
+export declare const HoverCardContent: import("react").ForwardRefExoticComponent<Omit<HoverCardPrimitive.HoverCardContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Overlays.js

@@ -0,0 +1,62 @@
+'use client';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, } from 'react';
+import { ContextMenu as ContextMenuPrimitive, HoverCard as HoverCardPrimitive, Popover as PopoverPrimitive, Tooltip as TooltipPrimitive, } from 'radix-ui';
+export const Popover = PopoverPrimitive.Root;
+export const PopoverTrigger = PopoverPrimitive.Trigger;
+export const PopoverPortal = PopoverPrimitive.Portal;
+export const PopoverClose = PopoverPrimitive.Close;
+export const PopoverContent = forwardRef(function PopoverContent(_a, ref) {
+    var { className, sideOffset = 4, collisionPadding = 8 } = _a, props = __rest(_a, ["className", "sideOffset", "collisionPadding"]);
+    return (_jsx(PopoverPrimitive.Content, Object.assign({}, props, { ref: ref, sideOffset: sideOffset, collisionPadding: collisionPadding, "data-toolplane-ui": "popover-content", className: `z-50 max-h-[var(--radix-popover-content-available-height)] max-w-[calc(100vw-1rem)] origin-[var(--radix-popover-content-transform-origin)] overflow-auto rounded-lg border border-border bg-popover p-3 text-popover-foreground shadow-lg outline-none data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ${className !== null && className !== void 0 ? className : ''}`.trim() })));
+});
+export const TooltipProvider = TooltipPrimitive.Provider;
+export const Tooltip = TooltipPrimitive.Root;
+export const TooltipTrigger = TooltipPrimitive.Trigger;
+export const TooltipPortal = TooltipPrimitive.Portal;
+export const TooltipContent = forwardRef(function TooltipContent(_a, ref) {
+    var { className, sideOffset = 6, collisionPadding = 8 } = _a, props = __rest(_a, ["className", "sideOffset", "collisionPadding"]);
+    return (_jsx(TooltipPrimitive.Content, Object.assign({}, props, { ref: ref, sideOffset: sideOffset, collisionPadding: collisionPadding, "data-toolplane-ui": "tooltip-content", className: `z-50 max-w-xs origin-[var(--radix-tooltip-content-transform-origin)] rounded-lg border border-border bg-popover px-3 py-2 text-xs text-popover-foreground shadow-lg outline-none data-[state=closed]:animate-out data-[state=delayed-open]:animate-in data-[state=closed]:fade-out-0 data-[state=delayed-open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=delayed-open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ${className !== null && className !== void 0 ? className : ''}`.trim() })));
+});
+export const ContextMenu = ContextMenuPrimitive.Root;
+export const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+export const ContextMenuPortal = ContextMenuPrimitive.Portal;
+export const ContextMenuSub = ContextMenuPrimitive.Sub;
+export const ContextMenuContent = forwardRef(function ContextMenuContent(_a, ref) {
+    var { className, collisionPadding = 8 } = _a, props = __rest(_a, ["className", "collisionPadding"]);
+    return (_jsx(ContextMenuPrimitive.Content, Object.assign({}, props, { ref: ref, collisionPadding: collisionPadding, "data-toolplane-ui": "context-menu-content", className: `z-50 max-h-[var(--radix-context-menu-content-available-height)] min-w-40 origin-[var(--radix-context-menu-content-transform-origin)] overflow-x-hidden overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md outline-none data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 ${className !== null && className !== void 0 ? className : ''}`.trim() })));
+});
+export const ContextMenuItem = forwardRef(function ContextMenuItem(_a, ref) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(ContextMenuPrimitive.Item, Object.assign({}, props, { ref: ref, "data-toolplane-ui": "context-menu-item", className: `relative flex min-h-8 cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground ${className !== null && className !== void 0 ? className : ''}`.trim() })));
+});
+export const ContextMenuSeparator = forwardRef(function ContextMenuSeparator(_a, ref) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(ContextMenuPrimitive.Separator, Object.assign({}, props, { ref: ref, "data-toolplane-ui": "context-menu-separator", className: `my-1 h-px bg-border ${className !== null && className !== void 0 ? className : ''}`.trim() })));
+});
+export const ContextMenuSubTrigger = forwardRef(function ContextMenuSubTrigger(_a, ref) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(ContextMenuPrimitive.SubTrigger, Object.assign({}, props, { ref: ref, "data-toolplane-ui": "context-menu-sub-trigger", className: `relative flex min-h-8 cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:bg-accent ${className !== null && className !== void 0 ? className : ''}`.trim() })));
+});
+export const ContextMenuSubContent = forwardRef(function ContextMenuSubContent(_a, ref) {
+    var { className, collisionPadding = 8 } = _a, props = __rest(_a, ["className", "collisionPadding"]);
+    return (_jsx(ContextMenuPrimitive.SubContent, Object.assign({}, props, { ref: ref, collisionPadding: collisionPadding, "data-toolplane-ui": "context-menu-sub-content", className: `z-50 min-w-40 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md outline-none data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 ${className !== null && className !== void 0 ? className : ''}`.trim() })));
+});
+export const HoverCard = HoverCardPrimitive.Root;
+export const HoverCardTrigger = HoverCardPrimitive.Trigger;
+export const HoverCardPortal = HoverCardPrimitive.Portal;
+export const HoverCardContent = forwardRef(function HoverCardContent(_a, ref) {
+    var { className, sideOffset = 8, collisionPadding = 8 } = _a, props = __rest(_a, ["className", "sideOffset", "collisionPadding"]);
+    return (_jsx(HoverCardPrimitive.Content, Object.assign({}, props, { ref: ref, sideOffset: sideOffset, collisionPadding: collisionPadding, "data-toolplane-ui": "hover-card-content", className: `z-50 max-w-[calc(100vw-1rem)] origin-[var(--radix-hover-card-content-transform-origin)] rounded-lg border border-border bg-popover p-3 text-popover-foreground shadow-xl outline-none data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ${className !== null && className !== void 0 ? className : ''}`.trim() })));
+});

package/dist/RotatingHeadline.d.ts

@@ -0,0 +1,4 @@
+export type RotatingHeadlineProps = {
+    words: string[];
+};
+export declare function RotatingHeadline({ words }: RotatingHeadlineProps): import("react").JSX.Element;

package/dist/RotatingHeadline.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+export function RotatingHeadline({ words }) {
+    var _a, _b;
+    const [wordIndex, setWordIndex] = useState(0);
+    useEffect(() => {
+        if (typeof window.matchMedia === 'function'
+            && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+            return;
+        }
+        const timers = words.slice(1).map((_, index) => window.setTimeout(() => setWordIndex(index + 1), (index + 1) * 950));
+        return () => timers.forEach(window.clearTimeout);
+    }, [words]);
+    const activeWord = (_b = (_a = words[wordIndex]) !== null && _a !== void 0 ? _a : words[0]) !== null && _b !== void 0 ? _b : '';
+    return (_jsxs("span", { "data-toolplane-ui": "rotating-headline", className: "relative inline-grid text-muted-foreground", children: [words.map((word) => (_jsx("span", { "aria-hidden": true, className: "invisible col-start-1 row-start-1", children: word }, word))), _jsx("span", { "aria-hidden": true, className: "tp-rotating-headline__word col-start-1 row-start-1", children: activeWord }, activeWord)] }));
+}

package/dist/SafeStreamdown.d.ts

@@ -0,0 +1,5 @@
+import { type StreamdownProps } from 'streamdown';
+export type SafeStreamdownProps = StreamdownProps & {
+    preserveSoftBreaks?: boolean;
+};
+export declare function SafeStreamdown({ allowElement, components, disallowedElements, preserveSoftBreaks, remarkPlugins, ...props }: SafeStreamdownProps): import("react").JSX.Element;

package/dist/SafeStreamdown.js

@@ -0,0 +1,57 @@
+'use client';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import remarkBreaks from 'remark-breaks';
+import { defaultRemarkPlugins, Streamdown } from 'streamdown';
+const BLOCKED_RAW_HTML_ELEMENTS = [
+    'base',
+    'embed',
+    'iframe',
+    'link',
+    'meta',
+    'object',
+    'script',
+    'style',
+];
+const BLOCKED_RAW_HTML_ELEMENT_SET = new Set(BLOCKED_RAW_HTML_ELEMENTS);
+function BlockedRawHtmlElement() {
+    return null;
+}
+const BLOCKED_RAW_HTML_COMPONENTS = Object.fromEntries(BLOCKED_RAW_HTML_ELEMENTS.map((tag) => [tag, BlockedRawHtmlElement]));
+const SOFT_BREAK_REMARK_PLUGINS = [
+    ...Object.values(defaultRemarkPlugins),
+    remarkBreaks,
+];
+export function SafeStreamdown(_a) {
+    var { allowElement, components, disallowedElements, preserveSoftBreaks = false, remarkPlugins } = _a, props = __rest(_a, ["allowElement", "components", "disallowedElements", "preserveSoftBreaks", "remarkPlugins"]);
+    const safeComponents = useMemo(() => (Object.assign(Object.assign({}, components), BLOCKED_RAW_HTML_COMPONENTS)), [components]);
+    const safeDisallowedElements = useMemo(() => {
+        const tags = new Set(disallowedElements !== null && disallowedElements !== void 0 ? disallowedElements : []);
+        BLOCKED_RAW_HTML_ELEMENTS.forEach((tag) => tags.add(tag));
+        return Array.from(tags);
+    }, [disallowedElements]);
+    const safeAllowElement = useCallback((element, index, parent) => {
+        var _a;
+        if (BLOCKED_RAW_HTML_ELEMENT_SET.has(element.tagName.toLowerCase())) {
+            return false;
+        }
+        return (_a = allowElement === null || allowElement === void 0 ? void 0 : allowElement(element, index, parent)) !== null && _a !== void 0 ? _a : true;
+    }, [allowElement]);
+    const effectiveRemarkPlugins = useMemo(() => {
+        if (!preserveSoftBreaks)
+            return remarkPlugins;
+        return remarkPlugins ? [...remarkPlugins, remarkBreaks] : SOFT_BREAK_REMARK_PLUGINS;
+    }, [preserveSoftBreaks, remarkPlugins]);
+    return (_jsx(Streamdown, Object.assign({}, props, { allowElement: safeAllowElement, components: safeComponents, disallowedElements: safeDisallowedElements, remarkPlugins: effectiveRemarkPlugins })));
+}

package/dist/Sidebar.d.ts

@@ -0,0 +1,9 @@
+import { type ButtonHTMLAttributes, type HTMLAttributes } from 'react';
+export type SidebarActionRailProps = HTMLAttributes<HTMLDivElement> & {
+    active?: boolean;
+    hasLeadingSlot?: boolean;
+    revealOnCellFocus?: boolean;
+};
+export declare function SidebarActionRail({ active, children, className, hasLeadingSlot, revealOnCellFocus, ...props }: SidebarActionRailProps): import("react").JSX.Element;
+export type SidebarActionButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
+export declare const SidebarActionButton: import("react").ForwardRefExoticComponent<SidebarActionButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/Sidebar.js

@@ -0,0 +1,24 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, } from 'react';
+function cx(...classes) {
+    return classes.filter(Boolean).join(' ');
+}
+export function SidebarActionRail(_a) {
+    var { active = false, children, className, hasLeadingSlot = false, revealOnCellFocus = false } = _a, props = __rest(_a, ["active", "children", "className", "hasLeadingSlot", "revealOnCellFocus"]);
+    return (_jsx("div", Object.assign({}, props, { "data-active": active || undefined, "data-toolplane-ui": "sidebar-action-rail", className: cx('-ml-1.5 pointer-events-none grid shrink-0 grid-cols-[0fr] opacity-0 transition-[grid-template-columns,opacity] duration-150 motion-reduce:transition-none', hasLeadingSlot ? 'mr-0' : '-mr-1', 'focus-within:pointer-events-auto focus-within:grid-cols-[1fr] focus-within:opacity-100 group-hover:pointer-events-auto group-hover:grid-cols-[1fr] group-hover:opacity-100', 'has-data-[state=open]:pointer-events-auto has-data-[state=open]:grid-cols-[1fr] has-data-[state=open]:opacity-100 group-data-[state=open]:pointer-events-auto group-data-[state=open]:grid-cols-[1fr] group-data-[state=open]:opacity-100', 'data-[active=true]:pointer-events-auto data-[active=true]:grid-cols-[1fr] data-[active=true]:opacity-100', revealOnCellFocus && 'group-has-[:focus-visible]:pointer-events-auto group-has-[:focus-visible]:grid-cols-[1fr] group-has-[:focus-visible]:opacity-100', className), children: _jsx("div", { className: "flex min-w-0 items-center overflow-hidden", children: children }) })));
+}
+export const SidebarActionButton = forwardRef(function SidebarActionButton(_a, ref) {
+    var { className, type = 'button' } = _a, props = __rest(_a, ["className", "type"]);
+    return (_jsx("button", Object.assign({}, props, { ref: ref, type: type, "data-toolplane-ui": "sidebar-action-button", className: cx('pointer-events-none flex size-5 shrink-0 items-center justify-center rounded-lg text-muted-foreground opacity-0 outline-none transition-all duration-150', 'hover:bg-accent hover:text-foreground focus-visible:pointer-events-auto focus-visible:bg-accent focus-visible:text-foreground focus-visible:opacity-100', 'group-hover:pointer-events-auto group-hover:opacity-100 group-data-[state=open]:pointer-events-auto group-data-[state=open]:opacity-100 data-[active=true]:pointer-events-auto data-[active=true]:opacity-100 data-[deleting=true]:pointer-events-auto data-[deleting=true]:opacity-100', className) })));
+});

package/dist/WorkspaceTabBar.d.ts

@@ -0,0 +1,33 @@
+import { type ComponentType, type ReactNode } from 'react';
+type Icon = ComponentType<{
+    className?: string;
+}>;
+export type WorkspaceTab = {
+    id: string;
+    icon: Icon;
+    label: string;
+    pinned: boolean;
+};
+export type WorkspaceTabBarLabels = {
+    close: (label: string) => string;
+    navigation: string;
+    newTab: string;
+    openInNewWindow: (label: string) => string;
+    pin: (label: string) => string;
+    unpin: (label: string) => string;
+};
+export declare const workspaceTabBarDefaultLabels: WorkspaceTabBarLabels;
+export type WorkspaceTabBarProps = {
+    actions?: ReactNode;
+    activeTabId: string;
+    labels?: Partial<WorkspaceTabBarLabels>;
+    onClose: (id: string) => void;
+    onNewTab: () => void;
+    onOpenInNewWindow: (id: string) => void;
+    onReorder: (sourceId: string, targetId: string) => void;
+    onSelect: (id: string) => void;
+    onTogglePinned: (id: string) => void;
+    tabs: WorkspaceTab[];
+};
+export declare function WorkspaceTabBar({ actions, activeTabId, labels: labelsOverride, onClose, onNewTab, onOpenInNewWindow, onReorder, onSelect, onTogglePinned, tabs, }: WorkspaceTabBarProps): import("react").JSX.Element;
+export {};

package/dist/WorkspaceTabBar.js

@@ -0,0 +1,56 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ExternalLink, Pin, Plus, X } from 'lucide-react';
+import { useEffect, useRef, useState, } from 'react';
+export const workspaceTabBarDefaultLabels = {
+    close: (label) => `Close ${label}`,
+    navigation: 'Open pages',
+    newTab: 'New tab',
+    openInNewWindow: (label) => `Open ${label} in new window`,
+    pin: (label) => `Pin ${label}`,
+    unpin: (label) => `Unpin ${label}`,
+};
+export function WorkspaceTabBar({ actions, activeTabId, labels: labelsOverride, onClose, onNewTab, onOpenInNewWindow, onReorder, onSelect, onTogglePinned, tabs, }) {
+    const labels = Object.assign(Object.assign({}, workspaceTabBarDefaultLabels), labelsOverride);
+    const [draggingId, setDraggingId] = useState(null);
+    const activeRef = useRef(null);
+    useEffect(() => {
+        var _a, _b;
+        (_b = (_a = activeRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, { block: 'nearest', inline: 'nearest' });
+    }, [activeTabId, tabs.length]);
+    return (_jsxs("nav", { "aria-label": labels.navigation, "data-toolplane-ui": "workspace-tab-bar", className: "flex h-11 shrink-0 bg-shell px-2", children: [_jsxs("ol", { className: "flex min-w-0 flex-1 items-center gap-1 overflow-x-auto py-1 [&::-webkit-scrollbar]:hidden", children: [tabs.map((tab) => (_jsx(WorkspaceTabButton, { tab: tab, active: tab.id === activeTabId, canClose: tabs.length > 1, draggingId: draggingId, labels: labels, onClose: onClose, onDragChange: setDraggingId, onNewWindow: onOpenInNewWindow, onReorder: onReorder, onSelect: onSelect, onTogglePinned: onTogglePinned, activeButtonRef: tab.id === activeTabId ? activeRef : undefined }, tab.id))), _jsx("li", { className: "shrink-0", children: _jsx("button", { type: "button", "aria-label": labels.newTab, title: labels.newTab, onClick: onNewTab, className: "ui-button-ghost ui-icon-button", children: _jsx(Plus, { className: "size-4" }) }) })] }), actions] }));
+}
+function WorkspaceTabButton({ active, activeButtonRef, canClose, draggingId, labels, onClose, onDragChange, onNewWindow, onReorder, onSelect, onTogglePinned, tab, }) {
+    const dragAllowed = Boolean(draggingId && draggingId !== tab.id);
+    const controls = active || draggingId === tab.id;
+    const stop = (event) => event.stopPropagation();
+    const Icon = tab.icon;
+    return (_jsxs("li", { "data-tab-id": tab.id, "data-active": active ? 'true' : undefined, draggable: true, onDragEnd: () => onDragChange(null), onDragStart: (event) => {
+            event.dataTransfer.effectAllowed = 'move';
+            event.dataTransfer.setData('text/plain', tab.id);
+            onDragChange(tab.id);
+        }, onDragOver: (event) => {
+            if (!dragAllowed)
+                return;
+            event.preventDefault();
+            event.dataTransfer.dropEffect = 'move';
+        }, onDrop: (event) => {
+            if (!draggingId || draggingId === tab.id)
+                return;
+            event.preventDefault();
+            onReorder(draggingId, tab.id);
+            onDragChange(null);
+        }, className: `group flex h-[30px] min-w-24 max-w-56 shrink-0 items-center rounded-[10px] transition-[background-color,color,transform] duration-150 ${active ? 'bg-background text-foreground ring-1 ring-border/70' : 'text-muted-foreground hover:bg-accent/70 hover:text-foreground'} ${draggingId === tab.id ? 'scale-[0.98] opacity-50' : ''}`, children: [_jsxs("button", { ref: activeButtonRef, type: "button", "aria-current": active ? 'page' : undefined, title: tab.label, onAuxClick: (event) => {
+                    if (event.button === 1)
+                        onClose(tab.id);
+                }, onClick: () => onSelect(tab.id), onDoubleClick: () => onClose(tab.id), className: "flex min-w-0 flex-1 items-center gap-1.5 px-2 text-left text-xs", children: [_jsx(Icon, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: tab.label })] }), _jsxs("div", { className: "mr-1 flex shrink-0 items-center", children: [_jsx("button", { type: "button", "aria-pressed": tab.pinned, "aria-label": tab.pinned ? labels.unpin(tab.label) : labels.pin(tab.label), title: tab.pinned ? labels.unpin(tab.label) : labels.pin(tab.label), onClick: (event) => {
+                            stop(event);
+                            onTogglePinned(tab.id);
+                        }, className: `flex size-[18px] items-center justify-center rounded-sm transition-colors hover:bg-foreground/10 ${tab.pinned ? (controls ? 'bg-brand-soft text-accent-foreground' : 'bg-brand-soft/50 text-accent-foreground/60 group-hover:bg-brand-soft group-hover:text-accent-foreground group-focus-within:bg-brand-soft group-focus-within:text-accent-foreground') : (controls ? '' : 'opacity-0 group-hover:opacity-100 group-focus-within:opacity-100')}`, children: _jsx(Pin, { className: `size-3 ${tab.pinned ? 'fill-current' : ''}` }) }), _jsxs("div", { className: `flex items-center transition-opacity ${controls ? 'opacity-100' : 'opacity-0 group-hover:opacity-100 group-focus-within:opacity-100'}`, children: [_jsx("button", { type: "button", "aria-label": labels.openInNewWindow(tab.label), title: labels.openInNewWindow(tab.label), onClick: (event) => {
+                                    stop(event);
+                                    onNewWindow(tab.id);
+                                }, className: "flex size-[18px] items-center justify-center rounded-sm hover:bg-foreground/10", children: _jsx(ExternalLink, { className: "size-3" }) }), canClose ? (_jsx("button", { type: "button", "aria-label": labels.close(tab.label), title: labels.close(tab.label), onClick: (event) => {
+                                    stop(event);
+                                    onClose(tab.id);
+                                }, className: "flex size-[18px] items-center justify-center rounded-sm hover:bg-foreground/10", children: _jsx(X, { className: "size-3" }) })) : null] })] })] }));
+}

package/dist/chat-markdown.d.ts

@@ -0,0 +1 @@
+export declare function hasMermaidFence(markdown: string): boolean;

package/dist/chat-markdown.js

@@ -0,0 +1,4 @@
+const mermaidFencePattern = /(?:^|\n)[ \t>]*(?:[*+-][ \t]+|\d{1,9}[.)][ \t]+)?(?:`{3,}|~{3,})[ \t]*mermaid\b/i;
+export function hasMermaidFence(markdown) {
+    return mermaidFencePattern.test(markdown);
+}

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+export * from './Brand.js';
+export * from './ChatShell.js';
+export * from './ChatThread.js';
+export * from './chat-markdown.js';
+export * from './ContentPage.js';
+export * from './Controls.js';
+export * from './ConversationSidebar.js';
+export * from './Dialog.js';
+export * from './Feedback.js';
+export * from './Forms.js';
+export * from './Layout.js';
+export * from './Navigation.js';
+export * from './Overlays.js';
+export * from './RotatingHeadline.js';
+export * from './SafeStreamdown.js';
+export * from './Sidebar.js';
+export * from './WorkspaceTabBar.js';

package/dist/index.js

@@ -0,0 +1,17 @@
+export * from "./Brand.js";
+export * from "./ChatShell.js";
+export * from "./ChatThread.js";
+export * from "./chat-markdown.js";
+export * from "./ContentPage.js";
+export * from "./Controls.js";
+export * from "./ConversationSidebar.js";
+export * from "./Dialog.js";
+export * from "./Feedback.js";
+export * from "./Forms.js";
+export * from "./Layout.js";
+export * from "./Navigation.js";
+export * from "./Overlays.js";
+export * from "./RotatingHeadline.js";
+export * from "./SafeStreamdown.js";
+export * from "./Sidebar.js";
+export * from "./WorkspaceTabBar.js";

package/package.json

@@ -0,0 +1,107 @@
+{
+  "name": "@asharca/ui",
+  "version": "0.1.0",
+  "description": "Reusable ToolPlane components and chat UI for React applications.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "keywords": [
+    "toolplane",
+    "react",
+    "ui",
+    "chat",
+    "assistant-ui",
+    "tailwindcss"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/asharca/ToolPlane.git",
+    "directory": "packages/ui"
+  },
+  "homepage": "https://github.com/asharca/ToolPlane/tree/main/packages/ui",
+  "bugs": {
+    "url": "https://github.com/asharca/ToolPlane/issues"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "sideEffects": [
+    "./src/styles.css"
+  ],
+  "files": [
+    "dist",
+    "src/styles.css",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./controls": {
+      "types": "./dist/Controls.d.ts",
+      "import": "./dist/Controls.js"
+    },
+    "./dialog": {
+      "types": "./dist/Dialog.d.ts",
+      "import": "./dist/Dialog.js"
+    },
+    "./feedback": {
+      "types": "./dist/Feedback.d.ts",
+      "import": "./dist/Feedback.js"
+    },
+    "./forms": {
+      "types": "./dist/Forms.d.ts",
+      "import": "./dist/Forms.js"
+    },
+    "./layout": {
+      "types": "./dist/Layout.d.ts",
+      "import": "./dist/Layout.js"
+    },
+    "./navigation": {
+      "types": "./dist/Navigation.d.ts",
+      "import": "./dist/Navigation.js"
+    },
+    "./overlays": {
+      "types": "./dist/Overlays.d.ts",
+      "import": "./dist/Overlays.js"
+    },
+    "./chat-shell": {
+      "types": "./dist/ChatShell.d.ts",
+      "import": "./dist/ChatShell.js"
+    },
+    "./chat-thread": {
+      "types": "./dist/ChatThread.d.ts",
+      "import": "./dist/ChatThread.js"
+    },
+    "./conversation-sidebar": {
+      "types": "./dist/ConversationSidebar.d.ts",
+      "import": "./dist/ConversationSidebar.js"
+    },
+    "./styles.css": "./src/styles.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@assistant-ui/react": "^0.14.26",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.0"
+  },
+  "dependencies": {
+    "@assistant-ui/react-streamdown": "0.3.5",
+    "@streamdown/code": "^1.1.1",
+    "@streamdown/mermaid": "^1.0.2",
+    "lucide-react": "^1.21.0",
+    "radix-ui": "1.6.2",
+    "remark-breaks": "^4.0.0",
+    "streamdown": "^2.5.0"
+  },
+  "scripts": {
+    "build": "node --input-type=module -e \"import { rmSync } from 'node:fs'; rmSync('dist', { recursive: true, force: true })\" && tsc -p tsconfig.json",
+    "postbuild": "node --input-type=module -e \"import { readFileSync, writeFileSync } from 'node:fs'; const path = 'dist/index.d.ts'; writeFileSync(path, readFileSync(path, 'utf8').replaceAll('.tsx', '.js').replaceAll('.ts', '.js'))\""
+  }
+}