@objectifthunes/whiteboard 0.4.0 → 0.5.0

package/README.md

@@ -68,6 +68,11 @@ Every component is driven by `--wb-*` CSS custom properties. Override on `:root`
 
 See the live demo for the full prop reference and copy-pasteable examples per component.
 
+## New in 0.5
+
+- **`Draggable` / `DraggableSurface`** — screen-space dragging for overlay chrome, no `WhiteboardShell` required. Keep your CSS anchoring; the drag is a `translate()` delta on top, so layouts stay responsive. Drags from any non-interactive area, snaps to the whiteboard grid on release, honours the global `whiteboard-snap-now` event, persists per `id` in localStorage. Double-click resets one element; `resetDraggables()` resets all.
+- `Toolbar` reads slightly larger (roomier padding, `--wb-fs-md` buttons) — it's app chrome, not a panel row.
+
 ## New in 0.4
 
 Battle-tested additions from building a real app on the kit:

package/dist/index.d.ts

@@ -194,6 +194,40 @@ declare interface DividerProps extends HTMLAttributes<HTMLElement> {
     orientation?: 'horizontal' | 'vertical';
 }
 
+/**
+ * Screen-space dragging for overlay chrome — toolbars, legends, log
+ * panes — WITHOUT a WhiteboardShell. Keep your CSS anchoring (top/right/
+ * bottom/left, even percentage centring on a parent): the drag is a
+ * translate() delta on top of it, so layouts stay responsive and reset
+ * is just "delta = 0".
+ *
+ * - drags from any non-interactive area (inputs, buttons, canvases keep
+ *   their own pointer behaviour)
+ * - snaps to WHITEBOARD_GRID on release; honours the global
+ *   `whiteboard-snap-now` event dispatched by ZoomBar
+ * - double-click an empty area to reset one element;
+ *   `resetDraggables()` resets them all
+ * - position persists per `id` in localStorage
+ */
+export declare function Draggable({ id, snap, persist, disabled, className, style, children, ...props }: DraggableProps): JSX_2.Element;
+
+declare interface DraggableProps extends HTMLAttributes<HTMLDivElement> {
+    /** Stable id — keys persistence and the reset registry. */
+    id: string;
+    /** Snap the offset to the whiteboard grid on release. Default true. */
+    snap?: boolean;
+    /** Remember the offset in localStorage. Default true. */
+    persist?: boolean;
+    disabled?: boolean;
+}
+
+/** A Surface you can drag — the overlay-panel workhorse. */
+export declare function DraggableSurface({ padding, className, ...props }: DraggableSurfaceProps): JSX_2.Element;
+
+declare interface DraggableSurfaceProps extends DraggableProps {
+    padding?: 'none' | 'sm' | 'md';
+}
+
 export declare function EmptyState({ title, description, action }: EmptyStateProps): JSX_2.Element;
 
 declare interface EmptyStateProps {
@@ -495,6 +529,9 @@ declare interface Props_6 {
     fallbackMessage?: string;
 }
 
+/** Snap every Draggable back to its anchored position (and clear persistence). */
+export declare function resetDraggables(): void;
+
 export declare function SectionDescription({ as, className, ...props }: TypographyProps): ReactElement<any, string | JSXElementConstructor<any>>;
 
 export declare function SectionTitle({ as, className, ...props }: TypographyProps): ReactElement<any, string | JSXElementConstructor<any>>;