@ohhwells/bridge 0.1.41 → 0.1.42-next.81

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +13 -1
  2. package/dist/index.cjs +1737 -489
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +48 -3
  5. package/dist/index.d.ts +48 -3
  6. package/dist/index.js +1688 -443
  7. package/dist/index.js.map +1 -1
  8. package/dist/styles.css +42 -18
  9. package/package.json +1 -1
package/dist/index.d.cts CHANGED
@@ -132,6 +132,26 @@ declare function SchedulingWidget({ notifyOnConnect, initialScheduleId, insertAf
132
132
 
133
133
  declare const DragHandle: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
134
134
 
135
+ /**
136
+ * Visual drop-gap line for navbar / footer / repeater reorder.
137
+ * Figma: Custom/Drop Indicator (8140:1731) — CSS class `.ov-gap-line`
138
+ *
139
+ * Opacity (Figma docs):
140
+ * - default: 0 (hidden)
141
+ * - hover: 1
142
+ * - dragIdle: 0.4
143
+ * - dragActive: 1
144
+ */
145
+ declare const dropIndicatorVariants: (props?: ({
146
+ direction?: "horizontal" | "vertical" | null | undefined;
147
+ state?: "default" | "hover" | "dragIdle" | "dragActive" | null | undefined;
148
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
149
+ type DropIndicatorProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof dropIndicatorVariants>;
150
+ declare const DropIndicator: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
151
+ direction?: "horizontal" | "vertical" | null | undefined;
152
+ state?: "default" | "hover" | "dragIdle" | "dragActive" | null | undefined;
153
+ } & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
154
+
135
155
  declare const CustomToolbar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
136
156
  declare function CustomToolbarDivider({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
137
157
  declare const CustomToolbarButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
@@ -156,17 +176,21 @@ type ItemInteractionLayerProps = {
156
176
  rect: DOMRect;
157
177
  state: ItemInteractionState;
158
178
  elRef?: React.Ref<HTMLDivElement>;
159
- /** Slotted Custom/Toolbar instance (item-action or other fill). */
179
+ /** Slotted Custom/Toolbar instance (item-action or other fill). */
160
180
  toolbar?: React.ReactNode;
161
181
  showHandle?: boolean;
162
182
  dragDisabled?: boolean;
163
183
  dragHandleLabel?: string;
164
184
  onDragHandleDragStart?: (e: React.DragEvent<HTMLButtonElement>) => void;
165
185
  onDragHandleDragEnd?: (e: React.DragEvent<HTMLButtonElement>) => void;
186
+ /** Press on the item chrome (not handle/toolbar) — starts press-to-drag. */
187
+ onItemPointerDown?: (e: React.PointerEvent<HTMLDivElement>) => void;
188
+ /** Click on chrome without a drag — typically enter text edit. */
189
+ onItemClick?: (clientX: number, clientY: number) => void;
166
190
  chromeGap?: number;
167
191
  className?: string;
168
192
  };
169
- declare function ItemInteractionLayer({ rect, state, elRef, toolbar, showHandle, dragDisabled, dragHandleLabel, onDragHandleDragStart, onDragHandleDragEnd, chromeGap, className, }: ItemInteractionLayerProps): react_jsx_runtime.JSX.Element | null;
193
+ declare function ItemInteractionLayer({ rect, state, elRef, toolbar, showHandle, dragDisabled, dragHandleLabel, onDragHandleDragStart, onDragHandleDragEnd, onItemPointerDown, onItemClick, chromeGap, className, }: ItemInteractionLayerProps): react_jsx_runtime.JSX.Element | null;
170
194
 
171
195
  declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof Tooltip$1.Provider>): react_jsx_runtime.JSX.Element;
172
196
  declare function Tooltip({ ...props }: React.ComponentProps<typeof Tooltip$1.Root>): react_jsx_runtime.JSX.Element;
@@ -175,4 +199,25 @@ declare function TooltipContent({ className, sideOffset, side, children, ...prop
175
199
 
176
200
  declare function isEditSessionActive(): boolean;
177
201
 
178
- 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 };
202
+ type CarouselSlide = {
203
+ src: string;
204
+ alt: string;
205
+ };
206
+ /**
207
+ * Template hook. Owns the slide array in React state, stamps the DOM contract via `bind`, and
208
+ * listens for the bridge's change event so replace/add/delete re-render the component.
209
+ *
210
+ * `bind` is plain data attributes (no ref), so it spreads onto any element type without type
211
+ * friction; the hook finds its own container by key. Slides inside still need
212
+ * `data-ohw-carousel-slide={i}`.
213
+ *
214
+ * const { images, bind } = useOhwCarousel('hero-carousel', content.images)
215
+ * <div {...bind}>{images.map((img, i) => <Slide data-ohw-carousel-slide={i} … />)}</div>
216
+ */
217
+ declare function useOhwCarousel(key: string, initial: CarouselSlide[]): {
218
+ images: CarouselSlide[];
219
+ setImages: React.Dispatch<React.SetStateAction<CarouselSlide[]>>;
220
+ bind: Record<string, string>;
221
+ };
222
+
223
+ 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 CHANGED
@@ -132,6 +132,26 @@ declare function SchedulingWidget({ notifyOnConnect, initialScheduleId, insertAf
132
132
 
133
133
  declare const DragHandle: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
134
134
 
135
+ /**
136
+ * Visual drop-gap line for navbar / footer / repeater reorder.
137
+ * Figma: Custom/Drop Indicator (8140:1731) — CSS class `.ov-gap-line`
138
+ *
139
+ * Opacity (Figma docs):
140
+ * - default: 0 (hidden)
141
+ * - hover: 1
142
+ * - dragIdle: 0.4
143
+ * - dragActive: 1
144
+ */
145
+ declare const dropIndicatorVariants: (props?: ({
146
+ direction?: "horizontal" | "vertical" | null | undefined;
147
+ state?: "default" | "hover" | "dragIdle" | "dragActive" | null | undefined;
148
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
149
+ type DropIndicatorProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof dropIndicatorVariants>;
150
+ declare const DropIndicator: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
151
+ direction?: "horizontal" | "vertical" | null | undefined;
152
+ state?: "default" | "hover" | "dragIdle" | "dragActive" | null | undefined;
153
+ } & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
154
+
135
155
  declare const CustomToolbar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
136
156
  declare function CustomToolbarDivider({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
137
157
  declare const CustomToolbarButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
@@ -156,17 +176,21 @@ type ItemInteractionLayerProps = {
156
176
  rect: DOMRect;
157
177
  state: ItemInteractionState;
158
178
  elRef?: React.Ref<HTMLDivElement>;
159
- /** Slotted Custom/Toolbar instance (item-action or other fill). */
179
+ /** Slotted Custom/Toolbar instance (item-action or other fill). */
160
180
  toolbar?: React.ReactNode;
161
181
  showHandle?: boolean;
162
182
  dragDisabled?: boolean;
163
183
  dragHandleLabel?: string;
164
184
  onDragHandleDragStart?: (e: React.DragEvent<HTMLButtonElement>) => void;
165
185
  onDragHandleDragEnd?: (e: React.DragEvent<HTMLButtonElement>) => void;
186
+ /** Press on the item chrome (not handle/toolbar) — starts press-to-drag. */
187
+ onItemPointerDown?: (e: React.PointerEvent<HTMLDivElement>) => void;
188
+ /** Click on chrome without a drag — typically enter text edit. */
189
+ onItemClick?: (clientX: number, clientY: number) => void;
166
190
  chromeGap?: number;
167
191
  className?: string;
168
192
  };
169
- declare function ItemInteractionLayer({ rect, state, elRef, toolbar, showHandle, dragDisabled, dragHandleLabel, onDragHandleDragStart, onDragHandleDragEnd, chromeGap, className, }: ItemInteractionLayerProps): react_jsx_runtime.JSX.Element | null;
193
+ declare function ItemInteractionLayer({ rect, state, elRef, toolbar, showHandle, dragDisabled, dragHandleLabel, onDragHandleDragStart, onDragHandleDragEnd, onItemPointerDown, onItemClick, chromeGap, className, }: ItemInteractionLayerProps): react_jsx_runtime.JSX.Element | null;
170
194
 
171
195
  declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof Tooltip$1.Provider>): react_jsx_runtime.JSX.Element;
172
196
  declare function Tooltip({ ...props }: React.ComponentProps<typeof Tooltip$1.Root>): react_jsx_runtime.JSX.Element;
@@ -175,4 +199,25 @@ declare function TooltipContent({ className, sideOffset, side, children, ...prop
175
199
 
176
200
  declare function isEditSessionActive(): boolean;
177
201
 
178
- 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 };
202
+ type CarouselSlide = {
203
+ src: string;
204
+ alt: string;
205
+ };
206
+ /**
207
+ * Template hook. Owns the slide array in React state, stamps the DOM contract via `bind`, and
208
+ * listens for the bridge's change event so replace/add/delete re-render the component.
209
+ *
210
+ * `bind` is plain data attributes (no ref), so it spreads onto any element type without type
211
+ * friction; the hook finds its own container by key. Slides inside still need
212
+ * `data-ohw-carousel-slide={i}`.
213
+ *
214
+ * const { images, bind } = useOhwCarousel('hero-carousel', content.images)
215
+ * <div {...bind}>{images.map((img, i) => <Slide data-ohw-carousel-slide={i} … />)}</div>
216
+ */
217
+ declare function useOhwCarousel(key: string, initial: CarouselSlide[]): {
218
+ images: CarouselSlide[];
219
+ setImages: React.Dispatch<React.SetStateAction<CarouselSlide[]>>;
220
+ bind: Record<string, string>;
221
+ };
222
+
223
+ 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 };