@ohhwells/bridge 0.1.38 → 0.1.39-next.72

package/dist/index.d.cts

@@ -27,6 +27,7 @@ type LinkModalProps = {
     onClose: () => void;
     onSubmit: (target: string) => void;
 };
+type LinkModalStep = 'input' | 'sectionPicker' | 'confirmed';
 type SelectedPage = {
     path: string;
     title: string;
@@ -42,10 +43,55 @@ type LinkPopoverProps = LinkModalProps & {
     portalContainer?: HTMLElement | null;
 };
 /** Centered link editor dialog (shadcn Dialog + Radix). */
-declare function LinkPopover({ open, panelRef, portalContainer, onClose, ...editorProps }: LinkPopoverProps): react_jsx_runtime.JSX.Element;
+declare function LinkPopover({ open, panelRef, portalContainer, onClose, mode, pages, sections, sectionsByPath, initialTarget, existingTargets, onSubmit, }: LinkPopoverProps): react_jsx_runtime.JSX.Element;
 
+type UseLinkModalStateParams = {
+    open: boolean;
+    mode: LinkModalMode;
+    pages: LinkPage[];
+    sections: LinkSection[];
+    sectionsByPath?: Record<string, LinkSection[]>;
+    initialTarget?: string;
+    existingTargets: string[];
+    onClose: () => void;
+    onSubmit: (target: string) => void;
+};
+declare function useLinkModalState({ open, mode, pages, sections: _sections, sectionsByPath, initialTarget, existingTargets: _existingTargets, onClose, onSubmit, }: UseLinkModalStateParams): {
+    title: string;
+    submitLabel: string;
+    secondaryLabel: string;
+    searchValue: string;
+    selectedPage: SelectedPage | null;
+    selectedSection: SelectedSection | null;
+    step: LinkModalStep;
+    dropdownOpen: boolean;
+    setDropdownOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    urlError: string;
+    filteredPages: LinkPage[];
+    showBreadcrumb: false | SelectedSection | null;
+    showSectionPicker: false | SelectedPage | null;
+    showChooseSection: boolean | null;
+    showSectionRow: boolean | null;
+    isValid: boolean;
+    activeSections: LinkSection[];
+    handleInputChange: (value: string) => void;
+    handlePageSelect: (page: LinkPage) => void;
+    handleChooseSection: () => void;
+    handleSectionSelect: (section: LinkSection) => void;
+    handleBackToSections: () => void;
+    handleSectionPickerBack: () => void;
+    handleClose: () => void;
+    handleSecondary: () => void;
+    handleSubmit: () => void;
+};
+
+type LinkModalState = ReturnType<typeof useLinkModalState>;
+type LinkEditorPanelProps = {
+    state: LinkModalState;
+    onClose: () => void;
+};
 /** Link destination editor body — Figma node 8365:7616 / 8382:4161 */
-declare function LinkEditorPanel({ open, mode, pages, sections, sectionsByPath, initialTarget, existingTargets, onClose, onSubmit, }: LinkModalProps): react_jsx_runtime.JSX.Element;
+declare function LinkEditorPanel({ state, onClose }: LinkEditorPanelProps): react_jsx_runtime.JSX.Element;
 
 declare function parseTarget(target: string | null | undefined): {
     pageRoute: string;
@@ -86,6 +132,26 @@ 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>>;
+
 declare const CustomToolbar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare function CustomToolbarDivider({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
 declare const CustomToolbarButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
@@ -96,30 +162,35 @@ type ItemActionToolbarProps = {
     onEditLink?: () => void;
     onAddItem?: () => void;
     onMore?: () => void;
+    editLinkDisabled?: boolean;
     addItemDisabled?: boolean;
     moreDisabled?: 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, addItemDisabled, moreDisabled, tooltipSide, }: ItemActionToolbarProps): react_jsx_runtime.JSX.Element;
+declare function ItemActionToolbar({ onEditLink, onAddItem, onMore, editLinkDisabled, addItemDisabled, moreDisabled, tooltipSide, }: 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>;
-    /** Slotted Custom/Toolbar instance (item-action or other fill). */
+    /** Slotted Custom/Toolbar instance (item-action or other fill).  */
     toolbar?: React.ReactNode;
     showHandle?: boolean;
     dragDisabled?: boolean;
     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;
     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, 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;
@@ -128,4 +199,25 @@ declare function TooltipContent({ className, sideOffset, side, children, ...prop
 
 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 };
+type CarouselSlide = {
+    src: string;
+    alt: string;
+};
+/**
+ * Template hook. Owns the slide array in React state, stamps the DOM contract via `bind`, and
+ * listens for the bridge's change event so replace/add/delete re-render the component.
+ *
+ * `bind` is plain data attributes (no ref), so it spreads onto any element type without type
+ * friction; the hook finds its own container by key. Slides inside still need
+ * `data-ohw-carousel-slide={i}`.
+ *
+ *   const { images, bind } = useOhwCarousel('hero-carousel', content.images)
+ *   <div {...bind}>{images.map((img, i) => <Slide data-ohw-carousel-slide={i} … />)}</div>
+ */
+declare function useOhwCarousel(key: string, initial: CarouselSlide[]): {
+    images: CarouselSlide[];
+    setImages: React.Dispatch<React.SetStateAction<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 };

package/dist/index.d.ts

@@ -27,6 +27,7 @@ type LinkModalProps = {
     onClose: () => void;
     onSubmit: (target: string) => void;
 };
+type LinkModalStep = 'input' | 'sectionPicker' | 'confirmed';
 type SelectedPage = {
     path: string;
     title: string;
@@ -42,10 +43,55 @@ type LinkPopoverProps = LinkModalProps & {
     portalContainer?: HTMLElement | null;
 };
 /** Centered link editor dialog (shadcn Dialog + Radix). */
-declare function LinkPopover({ open, panelRef, portalContainer, onClose, ...editorProps }: LinkPopoverProps): react_jsx_runtime.JSX.Element;
+declare function LinkPopover({ open, panelRef, portalContainer, onClose, mode, pages, sections, sectionsByPath, initialTarget, existingTargets, onSubmit, }: LinkPopoverProps): react_jsx_runtime.JSX.Element;
 
+type UseLinkModalStateParams = {
+    open: boolean;
+    mode: LinkModalMode;
+    pages: LinkPage[];
+    sections: LinkSection[];
+    sectionsByPath?: Record<string, LinkSection[]>;
+    initialTarget?: string;
+    existingTargets: string[];
+    onClose: () => void;
+    onSubmit: (target: string) => void;
+};
+declare function useLinkModalState({ open, mode, pages, sections: _sections, sectionsByPath, initialTarget, existingTargets: _existingTargets, onClose, onSubmit, }: UseLinkModalStateParams): {
+    title: string;
+    submitLabel: string;
+    secondaryLabel: string;
+    searchValue: string;
+    selectedPage: SelectedPage | null;
+    selectedSection: SelectedSection | null;
+    step: LinkModalStep;
+    dropdownOpen: boolean;
+    setDropdownOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    urlError: string;
+    filteredPages: LinkPage[];
+    showBreadcrumb: false | SelectedSection | null;
+    showSectionPicker: false | SelectedPage | null;
+    showChooseSection: boolean | null;
+    showSectionRow: boolean | null;
+    isValid: boolean;
+    activeSections: LinkSection[];
+    handleInputChange: (value: string) => void;
+    handlePageSelect: (page: LinkPage) => void;
+    handleChooseSection: () => void;
+    handleSectionSelect: (section: LinkSection) => void;
+    handleBackToSections: () => void;
+    handleSectionPickerBack: () => void;
+    handleClose: () => void;
+    handleSecondary: () => void;
+    handleSubmit: () => void;
+};
+
+type LinkModalState = ReturnType<typeof useLinkModalState>;
+type LinkEditorPanelProps = {
+    state: LinkModalState;
+    onClose: () => void;
+};
 /** Link destination editor body — Figma node 8365:7616 / 8382:4161 */
-declare function LinkEditorPanel({ open, mode, pages, sections, sectionsByPath, initialTarget, existingTargets, onClose, onSubmit, }: LinkModalProps): react_jsx_runtime.JSX.Element;
+declare function LinkEditorPanel({ state, onClose }: LinkEditorPanelProps): react_jsx_runtime.JSX.Element;
 
 declare function parseTarget(target: string | null | undefined): {
     pageRoute: string;
@@ -86,6 +132,26 @@ 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>>;
+
 declare const CustomToolbar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare function CustomToolbarDivider({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
 declare const CustomToolbarButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
@@ -96,30 +162,35 @@ type ItemActionToolbarProps = {
     onEditLink?: () => void;
     onAddItem?: () => void;
     onMore?: () => void;
+    editLinkDisabled?: boolean;
     addItemDisabled?: boolean;
     moreDisabled?: 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, addItemDisabled, moreDisabled, tooltipSide, }: ItemActionToolbarProps): react_jsx_runtime.JSX.Element;
+declare function ItemActionToolbar({ onEditLink, onAddItem, onMore, editLinkDisabled, addItemDisabled, moreDisabled, tooltipSide, }: 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>;
-    /** Slotted Custom/Toolbar instance (item-action or other fill). */
+    /** Slotted Custom/Toolbar instance (item-action or other fill).  */
     toolbar?: React.ReactNode;
     showHandle?: boolean;
     dragDisabled?: boolean;
     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;
     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, 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;
@@ -128,4 +199,25 @@ declare function TooltipContent({ className, sideOffset, side, children, ...prop
 
 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 };
+type CarouselSlide = {
+    src: string;
+    alt: string;
+};
+/**
+ * Template hook. Owns the slide array in React state, stamps the DOM contract via `bind`, and
+ * listens for the bridge's change event so replace/add/delete re-render the component.
+ *
+ * `bind` is plain data attributes (no ref), so it spreads onto any element type without type
+ * friction; the hook finds its own container by key. Slides inside still need
+ * `data-ohw-carousel-slide={i}`.
+ *
+ *   const { images, bind } = useOhwCarousel('hero-carousel', content.images)
+ *   <div {...bind}>{images.map((img, i) => <Slide data-ohw-carousel-slide={i} … />)}</div>
+ */
+declare function useOhwCarousel(key: string, initial: CarouselSlide[]): {
+    images: CarouselSlide[];
+    setImages: React.Dispatch<React.SetStateAction<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 };