@ohhwells/bridge 0.1.40 → 0.1.42-next.100

package/dist/index.d.cts

@@ -132,8 +132,34 @@ declare function SchedulingWidget({ notifyOnConnect, initialScheduleId, insertAf
 
 declare const DragHandle: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
 
+/**
+ * Visual drop-gap line for navbar / footer / repeater reorder.
+ * Figma: Custom/Drop Indicator (8140:1731) — CSS class `.ov-gap-line`
+ *
+ * Opacity (Figma docs):
+ * - default: 0 (hidden)
+ * - hover: 1
+ * - dragIdle: 0.4
+ * - dragActive: 1
+ */
+declare const dropIndicatorVariants: (props?: ({
+    direction?: "horizontal" | "vertical" | null | undefined;
+    state?: "default" | "hover" | "dragIdle" | "dragActive" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type DropIndicatorProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof dropIndicatorVariants>;
+declare const DropIndicator: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
+    direction?: "horizontal" | "vertical" | null | undefined;
+    state?: "default" | "hover" | "dragIdle" | "dragActive" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Custom/Toolbar shell (Figma 7320:11058).
+ * One pill, two fills — text formatting or item actions. No hardcoded colors.
+ */
 declare const CustomToolbar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/** Separators belong on the text-format fill only — not item-actions. */
 declare function CustomToolbarDivider({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
+/** Figma Toggle: 28×28, radius calc(var(--radius)-2px)=6px, icon 16. */
 declare const CustomToolbarButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
     active?: boolean;
 } & React.RefAttributes<HTMLButtonElement>>;
@@ -145,11 +171,15 @@ type ItemActionToolbarProps = {
     editLinkDisabled?: boolean;
     addItemDisabled?: boolean;
     moreDisabled?: 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';
 };
-/** Item-action fill for Custom/Toolbar — Edit link / Add item / More. */
-declare function ItemActionToolbar({ onEditLink, onAddItem, onMore, editLinkDisabled, addItemDisabled, moreDisabled, tooltipSide, }: ItemActionToolbarProps): react_jsx_runtime.JSX.Element;
+/** 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;
 
 type ItemInteractionState = 'default' | 'hover' | 'sibling-hint' | 'active-top' | 'active-bottom' | 'dragging';
 type ItemInteractionLayerProps = {
@@ -163,16 +193,32 @@ type ItemInteractionLayerProps = {
     dragHandleLabel?: string;
     onDragHandleDragStart?: (e: React.DragEvent<HTMLButtonElement>) => void;
     onDragHandleDragEnd?: (e: React.DragEvent<HTMLButtonElement>) => void;
+    /** Press on the item chrome (not handle/toolbar) — starts press-to-drag. */
+    onItemPointerDown?: (e: React.PointerEvent<HTMLDivElement>) => void;
+    /** Click on chrome without a drag — typically enter text edit. */
+    onItemClick?: (clientX: number, clientY: number) => void;
+    /**
+     * Full-bleed press-drag surface over the selection.
+     * Disable for footer column frames so child links keep grab cursor / hover.
+     */
+    itemDragSurface?: boolean;
+    /** Gap between element and chrome border — Figma inset is 4px. */
     chromeGap?: number;
     className?: string;
 };
-declare function ItemInteractionLayer({ rect, state, elRef, toolbar, showHandle, dragDisabled, dragHandleLabel, onDragHandleDragStart, onDragHandleDragEnd, chromeGap, className, }: ItemInteractionLayerProps): react_jsx_runtime.JSX.Element | null;
+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 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;
 declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof Tooltip$1.Trigger>): react_jsx_runtime.JSX.Element;
-declare function TooltipContent({ className, sideOffset, side, children, ...props }: React.ComponentProps<typeof Tooltip$1.Content>): react_jsx_runtime.JSX.Element;
+/**
+ * Tooltip content — CSS caret (not Radix Arrow) so `sideOffset` is the true
+ * trigger↔tooltip gap. Default 6px matches item-action toolbar AC.
+ */
+declare function TooltipContent({ className, sideOffset, side, children, hideArrow, ...props }: React.ComponentProps<typeof Tooltip$1.Content> & {
+    hideArrow?: boolean;
+}): react_jsx_runtime.JSX.Element;
 
 declare function isEditSessionActive(): boolean;
 
-export { CustomToolbar, CustomToolbarButton, CustomToolbarDivider, DragHandle, 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, filterAvailablePages, getEditModeInitialState, isEditSessionActive, isValidUrl, parseTarget, toggleVariants, validateUrlInput };
+export { 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, validateUrlInput };

package/dist/index.d.ts

@@ -132,8 +132,34 @@ declare function SchedulingWidget({ notifyOnConnect, initialScheduleId, insertAf
 
 declare const DragHandle: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
 
+/**
+ * Visual drop-gap line for navbar / footer / repeater reorder.
+ * Figma: Custom/Drop Indicator (8140:1731) — CSS class `.ov-gap-line`
+ *
+ * Opacity (Figma docs):
+ * - default: 0 (hidden)
+ * - hover: 1
+ * - dragIdle: 0.4
+ * - dragActive: 1
+ */
+declare const dropIndicatorVariants: (props?: ({
+    direction?: "horizontal" | "vertical" | null | undefined;
+    state?: "default" | "hover" | "dragIdle" | "dragActive" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type DropIndicatorProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof dropIndicatorVariants>;
+declare const DropIndicator: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
+    direction?: "horizontal" | "vertical" | null | undefined;
+    state?: "default" | "hover" | "dragIdle" | "dragActive" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Custom/Toolbar shell (Figma 7320:11058).
+ * One pill, two fills — text formatting or item actions. No hardcoded colors.
+ */
 declare const CustomToolbar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/** Separators belong on the text-format fill only — not item-actions. */
 declare function CustomToolbarDivider({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
+/** Figma Toggle: 28×28, radius calc(var(--radius)-2px)=6px, icon 16. */
 declare const CustomToolbarButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
     active?: boolean;
 } & React.RefAttributes<HTMLButtonElement>>;
@@ -145,11 +171,15 @@ type ItemActionToolbarProps = {
     editLinkDisabled?: boolean;
     addItemDisabled?: boolean;
     moreDisabled?: 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';
 };
-/** Item-action fill for Custom/Toolbar — Edit link / Add item / More. */
-declare function ItemActionToolbar({ onEditLink, onAddItem, onMore, editLinkDisabled, addItemDisabled, moreDisabled, tooltipSide, }: ItemActionToolbarProps): react_jsx_runtime.JSX.Element;
+/** 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;
 
 type ItemInteractionState = 'default' | 'hover' | 'sibling-hint' | 'active-top' | 'active-bottom' | 'dragging';
 type ItemInteractionLayerProps = {
@@ -163,16 +193,32 @@ type ItemInteractionLayerProps = {
     dragHandleLabel?: string;
     onDragHandleDragStart?: (e: React.DragEvent<HTMLButtonElement>) => void;
     onDragHandleDragEnd?: (e: React.DragEvent<HTMLButtonElement>) => void;
+    /** Press on the item chrome (not handle/toolbar) — starts press-to-drag. */
+    onItemPointerDown?: (e: React.PointerEvent<HTMLDivElement>) => void;
+    /** Click on chrome without a drag — typically enter text edit. */
+    onItemClick?: (clientX: number, clientY: number) => void;
+    /**
+     * Full-bleed press-drag surface over the selection.
+     * Disable for footer column frames so child links keep grab cursor / hover.
+     */
+    itemDragSurface?: boolean;
+    /** Gap between element and chrome border — Figma inset is 4px. */
     chromeGap?: number;
     className?: string;
 };
-declare function ItemInteractionLayer({ rect, state, elRef, toolbar, showHandle, dragDisabled, dragHandleLabel, onDragHandleDragStart, onDragHandleDragEnd, chromeGap, className, }: ItemInteractionLayerProps): react_jsx_runtime.JSX.Element | null;
+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 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;
 declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof Tooltip$1.Trigger>): react_jsx_runtime.JSX.Element;
-declare function TooltipContent({ className, sideOffset, side, children, ...props }: React.ComponentProps<typeof Tooltip$1.Content>): react_jsx_runtime.JSX.Element;
+/**
+ * Tooltip content — CSS caret (not Radix Arrow) so `sideOffset` is the true
+ * trigger↔tooltip gap. Default 6px matches item-action toolbar AC.
+ */
+declare function TooltipContent({ className, sideOffset, side, children, hideArrow, ...props }: React.ComponentProps<typeof Tooltip$1.Content> & {
+    hideArrow?: boolean;
+}): react_jsx_runtime.JSX.Element;
 
 declare function isEditSessionActive(): boolean;
 
-export { CustomToolbar, CustomToolbarButton, CustomToolbarDivider, DragHandle, 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, filterAvailablePages, getEditModeInitialState, isEditSessionActive, isValidUrl, parseTarget, toggleVariants, validateUrlInput };
+export { 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, validateUrlInput };