@ohhwells/bridge 0.1.51 → 0.1.52

package/dist/index.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import React__default, { Ref } from 'react';
+import React__default, { Ref, ReactNode, DragEvent, PointerEvent } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
-import { Toggle as Toggle$1, Tooltip as Tooltip$1 } from 'radix-ui';
+import { Toggle as Toggle$1, DropdownMenu as DropdownMenu$1, Tooltip as Tooltip$1 } from 'radix-ui';
 
 declare function OhhwellsBridge(): React__default.ReactPortal | null;
 
@@ -167,34 +167,59 @@ declare const CustomToolbarButton: React.ForwardRefExoticComponent<React.ButtonH
 type ItemActionToolbarProps = {
     onEditLink?: () => void;
     onAddItem?: () => void;
-    onMore?: () => void;
+    onSelectParent?: () => void;
+    onDuplicate?: () => void;
+    /** Wired by OHH-458 — row is always shown (destructive). */
+    onDelete?: () => void;
     editLinkDisabled?: boolean;
     addItemDisabled?: boolean;
     moreDisabled?: boolean;
+    selectParentDisabled?: boolean;
+    duplicateDisabled?: boolean;
+    deleteDisabled?: boolean;
+    /** Hide Edit link — e.g. footer column frame selection. */
+    showEditLink?: boolean;
     /** Hide Add item — CTA buttons only show Edit link (prototype). */
     showAddItem?: boolean;
     /** Hide More — CTA buttons only show Edit link (prototype). */
     showMore?: boolean;
     /** Tooltip placement relative to each icon — Figma uses bottom. */
     tooltipSide?: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * Nav dropdown Open/Closed (OHH-468). When set, shows Closed|Open segment.
+     * `null` / `undefined` hides the control.
+     */
+    dropdownOpen?: boolean | null;
+    onDropdownOpenChange?: (open: boolean) => void;
+    /**
+     * Footer column Show/Hide heading (OHH-468). When set, shows Heading toggle.
+     * `null` / `undefined` hides the control.
+     */
+    headingVisible?: boolean | null;
+    onHeadingVisibleChange?: (visible: boolean) => void;
 };
-/** Item-action fill for Custom/Toolbar — Edit link / Add item / More (no separators). */
-declare function ItemActionToolbar({ onEditLink, onAddItem, onMore, editLinkDisabled, addItemDisabled, moreDisabled, showAddItem, showMore, tooltipSide, }: ItemActionToolbarProps): react_jsx_runtime.JSX.Element;
+/** Item-action fill for Custom/Toolbar — Edit link / Add item / More (+ OHH-468 toggles). */
+declare function ItemActionToolbar({ onEditLink, onAddItem, onSelectParent, onDuplicate, onDelete, editLinkDisabled, addItemDisabled, moreDisabled, selectParentDisabled, duplicateDisabled, deleteDisabled, showEditLink, showAddItem, showMore, tooltipSide, dropdownOpen, onDropdownOpenChange, headingVisible, onHeadingVisibleChange, }: ItemActionToolbarProps): react_jsx_runtime.JSX.Element;
 
 type ItemInteractionState = 'default' | 'hover' | 'sibling-hint' | 'active-top' | 'active-bottom' | 'dragging';
 type ItemInteractionLayerProps = {
     rect: DOMRect;
     state: ItemInteractionState;
-    elRef?: React.Ref<HTMLDivElement>;
+    elRef?: Ref<HTMLDivElement>;
     /** Slotted Custom/Toolbar instance (item-action or other fill). */
-    toolbar?: React.ReactNode;
+    toolbar?: ReactNode;
+    /**
+     * When set with active-bottom, park the toolbar under this rect instead of
+     * under `rect` (open nav dropdown panel — chrome stays on the trigger only).
+     */
+    toolbarBelowRect?: DOMRect | null;
     showHandle?: boolean;
     dragDisabled?: boolean;
     dragHandleLabel?: string;
-    onDragHandleDragStart?: (e: React.DragEvent<HTMLButtonElement>) => void;
-    onDragHandleDragEnd?: (e: React.DragEvent<HTMLButtonElement>) => void;
+    onDragHandleDragStart?: (e: DragEvent<HTMLButtonElement>) => void;
+    onDragHandleDragEnd?: (e: DragEvent<HTMLButtonElement>) => void;
     /** Press on the item chrome (not handle/toolbar) — starts press-to-drag. */
-    onItemPointerDown?: (e: React.PointerEvent<HTMLDivElement>) => void;
+    onItemPointerDown?: (e: PointerEvent<HTMLDivElement>) => void;
     /** Click on chrome without a drag — typically enter text edit. */
     onItemClick?: (clientX: number, clientY: number) => void;
     /**
@@ -206,7 +231,25 @@ type ItemInteractionLayerProps = {
     chromeGap?: number;
     className?: string;
 };
-declare function ItemInteractionLayer({ rect, state, elRef, toolbar, showHandle, dragDisabled, dragHandleLabel, onDragHandleDragStart, onDragHandleDragEnd, onItemPointerDown, onItemClick, itemDragSurface, chromeGap, className, }: ItemInteractionLayerProps): react_jsx_runtime.JSX.Element | null;
+declare function ItemInteractionLayer({ rect, state, elRef, toolbar, toolbarBelowRect, showHandle, dragDisabled, dragHandleLabel, onDragHandleDragStart, onDragHandleDragEnd, onItemPointerDown, onItemClick, itemDragSurface, chromeGap, className, }: ItemInteractionLayerProps): react_jsx_runtime.JSX.Element | null;
+
+declare function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenu$1.Root>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenu$1.Trigger>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuGroup({ className, ...props }: React.ComponentProps<typeof DropdownMenu$1.Group>): react_jsx_runtime.JSX.Element;
+/**
+ * Figma Dropdown Menu (4:6588 / 8202:1581):
+ * border, radius 6, shadow-md, min 128px / typical 224px width.
+ */
+declare function DropdownMenuContent({ className, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenu$1.Content>): react_jsx_runtime.JSX.Element;
+/**
+ * Figma Command Base / CMDK Item — leading icon at left 8px, label at pl-8.
+ */
+declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenu$1.Item> & {
+    inset?: boolean;
+    variant?: 'default' | 'destructive';
+}): react_jsx_runtime.JSX.Element;
+/** Full-bleed section divider — Figma section border-t (not inset hairline). */
+declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenu$1.Separator>): react_jsx_runtime.JSX.Element;
 
 declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof Tooltip$1.Provider>): react_jsx_runtime.JSX.Element;
 declare function Tooltip({ ...props }: React.ComponentProps<typeof Tooltip$1.Root>): react_jsx_runtime.JSX.Element;
@@ -242,4 +285,4 @@ declare function useOhwCarousel(key: string, initial: CarouselSlide[]): {
     bind: Record<string, string>;
 };
 
-export { type CarouselSlide, CustomToolbar, CustomToolbarButton, CustomToolbarDivider, DragHandle, DropIndicator, type DropIndicatorProps, ItemActionToolbar, type ItemActionToolbarProps, ItemInteractionLayer, type ItemInteractionLayerProps, type ItemInteractionState, LinkEditorPanel, type LinkModalMode, type LinkModalProps, type LinkPage, LinkPopover, type LinkSection, OhhwellsBridge, SchedulingWidget, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, buildTarget, dropIndicatorVariants, filterAvailablePages, getEditModeInitialState, isEditSessionActive, isValidUrl, parseTarget, toggleVariants, useOhwCarousel, validateUrlInput };
+export { type CarouselSlide, CustomToolbar, CustomToolbarButton, CustomToolbarDivider, DragHandle, DropIndicator, type DropIndicatorProps, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, ItemActionToolbar, type ItemActionToolbarProps, ItemInteractionLayer, type ItemInteractionLayerProps, type ItemInteractionState, LinkEditorPanel, type LinkModalMode, type LinkModalProps, type LinkPage, LinkPopover, type LinkSection, OhhwellsBridge, SchedulingWidget, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, buildTarget, dropIndicatorVariants, filterAvailablePages, getEditModeInitialState, isEditSessionActive, isValidUrl, parseTarget, toggleVariants, useOhwCarousel, validateUrlInput };

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import React__default, { Ref } from 'react';
+import React__default, { Ref, ReactNode, DragEvent, PointerEvent } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
-import { Toggle as Toggle$1, Tooltip as Tooltip$1 } from 'radix-ui';
+import { Toggle as Toggle$1, DropdownMenu as DropdownMenu$1, Tooltip as Tooltip$1 } from 'radix-ui';
 
 declare function OhhwellsBridge(): React__default.ReactPortal | null;
 
@@ -167,34 +167,59 @@ declare const CustomToolbarButton: React.ForwardRefExoticComponent<React.ButtonH
 type ItemActionToolbarProps = {
     onEditLink?: () => void;
     onAddItem?: () => void;
-    onMore?: () => void;
+    onSelectParent?: () => void;
+    onDuplicate?: () => void;
+    /** Wired by OHH-458 — row is always shown (destructive). */
+    onDelete?: () => void;
     editLinkDisabled?: boolean;
     addItemDisabled?: boolean;
     moreDisabled?: boolean;
+    selectParentDisabled?: boolean;
+    duplicateDisabled?: boolean;
+    deleteDisabled?: boolean;
+    /** Hide Edit link — e.g. footer column frame selection. */
+    showEditLink?: boolean;
     /** Hide Add item — CTA buttons only show Edit link (prototype). */
     showAddItem?: boolean;
     /** Hide More — CTA buttons only show Edit link (prototype). */
     showMore?: boolean;
     /** Tooltip placement relative to each icon — Figma uses bottom. */
     tooltipSide?: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * Nav dropdown Open/Closed (OHH-468). When set, shows Closed|Open segment.
+     * `null` / `undefined` hides the control.
+     */
+    dropdownOpen?: boolean | null;
+    onDropdownOpenChange?: (open: boolean) => void;
+    /**
+     * Footer column Show/Hide heading (OHH-468). When set, shows Heading toggle.
+     * `null` / `undefined` hides the control.
+     */
+    headingVisible?: boolean | null;
+    onHeadingVisibleChange?: (visible: boolean) => void;
 };
-/** Item-action fill for Custom/Toolbar — Edit link / Add item / More (no separators). */
-declare function ItemActionToolbar({ onEditLink, onAddItem, onMore, editLinkDisabled, addItemDisabled, moreDisabled, showAddItem, showMore, tooltipSide, }: ItemActionToolbarProps): react_jsx_runtime.JSX.Element;
+/** Item-action fill for Custom/Toolbar — Edit link / Add item / More (+ OHH-468 toggles). */
+declare function ItemActionToolbar({ onEditLink, onAddItem, onSelectParent, onDuplicate, onDelete, editLinkDisabled, addItemDisabled, moreDisabled, selectParentDisabled, duplicateDisabled, deleteDisabled, showEditLink, showAddItem, showMore, tooltipSide, dropdownOpen, onDropdownOpenChange, headingVisible, onHeadingVisibleChange, }: ItemActionToolbarProps): react_jsx_runtime.JSX.Element;
 
 type ItemInteractionState = 'default' | 'hover' | 'sibling-hint' | 'active-top' | 'active-bottom' | 'dragging';
 type ItemInteractionLayerProps = {
     rect: DOMRect;
     state: ItemInteractionState;
-    elRef?: React.Ref<HTMLDivElement>;
+    elRef?: Ref<HTMLDivElement>;
     /** Slotted Custom/Toolbar instance (item-action or other fill). */
-    toolbar?: React.ReactNode;
+    toolbar?: ReactNode;
+    /**
+     * When set with active-bottom, park the toolbar under this rect instead of
+     * under `rect` (open nav dropdown panel — chrome stays on the trigger only).
+     */
+    toolbarBelowRect?: DOMRect | null;
     showHandle?: boolean;
     dragDisabled?: boolean;
     dragHandleLabel?: string;
-    onDragHandleDragStart?: (e: React.DragEvent<HTMLButtonElement>) => void;
-    onDragHandleDragEnd?: (e: React.DragEvent<HTMLButtonElement>) => void;
+    onDragHandleDragStart?: (e: DragEvent<HTMLButtonElement>) => void;
+    onDragHandleDragEnd?: (e: DragEvent<HTMLButtonElement>) => void;
     /** Press on the item chrome (not handle/toolbar) — starts press-to-drag. */
-    onItemPointerDown?: (e: React.PointerEvent<HTMLDivElement>) => void;
+    onItemPointerDown?: (e: PointerEvent<HTMLDivElement>) => void;
     /** Click on chrome without a drag — typically enter text edit. */
     onItemClick?: (clientX: number, clientY: number) => void;
     /**
@@ -206,7 +231,25 @@ type ItemInteractionLayerProps = {
     chromeGap?: number;
     className?: string;
 };
-declare function ItemInteractionLayer({ rect, state, elRef, toolbar, showHandle, dragDisabled, dragHandleLabel, onDragHandleDragStart, onDragHandleDragEnd, onItemPointerDown, onItemClick, itemDragSurface, chromeGap, className, }: ItemInteractionLayerProps): react_jsx_runtime.JSX.Element | null;
+declare function ItemInteractionLayer({ rect, state, elRef, toolbar, toolbarBelowRect, showHandle, dragDisabled, dragHandleLabel, onDragHandleDragStart, onDragHandleDragEnd, onItemPointerDown, onItemClick, itemDragSurface, chromeGap, className, }: ItemInteractionLayerProps): react_jsx_runtime.JSX.Element | null;
+
+declare function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenu$1.Root>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenu$1.Trigger>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuGroup({ className, ...props }: React.ComponentProps<typeof DropdownMenu$1.Group>): react_jsx_runtime.JSX.Element;
+/**
+ * Figma Dropdown Menu (4:6588 / 8202:1581):
+ * border, radius 6, shadow-md, min 128px / typical 224px width.
+ */
+declare function DropdownMenuContent({ className, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenu$1.Content>): react_jsx_runtime.JSX.Element;
+/**
+ * Figma Command Base / CMDK Item — leading icon at left 8px, label at pl-8.
+ */
+declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenu$1.Item> & {
+    inset?: boolean;
+    variant?: 'default' | 'destructive';
+}): react_jsx_runtime.JSX.Element;
+/** Full-bleed section divider — Figma section border-t (not inset hairline). */
+declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenu$1.Separator>): react_jsx_runtime.JSX.Element;
 
 declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof Tooltip$1.Provider>): react_jsx_runtime.JSX.Element;
 declare function Tooltip({ ...props }: React.ComponentProps<typeof Tooltip$1.Root>): react_jsx_runtime.JSX.Element;
@@ -242,4 +285,4 @@ declare function useOhwCarousel(key: string, initial: CarouselSlide[]): {
     bind: Record<string, string>;
 };
 
-export { type CarouselSlide, CustomToolbar, CustomToolbarButton, CustomToolbarDivider, DragHandle, DropIndicator, type DropIndicatorProps, ItemActionToolbar, type ItemActionToolbarProps, ItemInteractionLayer, type ItemInteractionLayerProps, type ItemInteractionState, LinkEditorPanel, type LinkModalMode, type LinkModalProps, type LinkPage, LinkPopover, type LinkSection, OhhwellsBridge, SchedulingWidget, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, buildTarget, dropIndicatorVariants, filterAvailablePages, getEditModeInitialState, isEditSessionActive, isValidUrl, parseTarget, toggleVariants, useOhwCarousel, validateUrlInput };
+export { type CarouselSlide, CustomToolbar, CustomToolbarButton, CustomToolbarDivider, DragHandle, DropIndicator, type DropIndicatorProps, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, ItemActionToolbar, type ItemActionToolbarProps, ItemInteractionLayer, type ItemInteractionLayerProps, type ItemInteractionState, LinkEditorPanel, type LinkModalMode, type LinkModalProps, type LinkPage, LinkPopover, type LinkSection, OhhwellsBridge, SchedulingWidget, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, buildTarget, dropIndicatorVariants, filterAvailablePages, getEditModeInitialState, isEditSessionActive, isValidUrl, parseTarget, toggleVariants, useOhwCarousel, validateUrlInput };