deck-plugin-sdk 0.15.1

package/types/components/TreeRow.d.ts

@@ -0,0 +1,41 @@
+// GENERATED by sdk/gen-types.mjs from Deck's source — do not edit.
+import type { ReactNode } from "react";
+export interface TreeRowProps {
+    /** Nesting level; sets the indent, 14px per level as in the editor. */
+    depth: number;
+    /** Highlighted as the current selection. */
+    active?: boolean;
+    /** Highlighted as a drag-over drop target. */
+    dropHint?: boolean;
+    /** Shown before the label: a chevron for a container, a spacer for a leaf. */
+    leading?: ReactNode;
+    label: ReactNode;
+    /** Right-aligned extras — counts, status letters, dirty dots. Never a <button>: a nested
+     *  control inside a draggable row swallows the press that would have started the drag. */
+    trailing?: ReactNode;
+    /** Colour applied to the label. */
+    tint?: string;
+    onClick?: () => void;
+    onDoubleClick?: () => void;
+    onContextMenu?: (e: React.MouseEvent) => void;
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+    draggable?: boolean;
+    onDragStart?: (e: React.DragEvent) => void;
+    onDragEnd?: (e: React.DragEvent) => void;
+    onDragEnter?: (e: React.DragEvent) => void;
+    onDragOver?: (e: React.DragEvent) => void;
+    onDragLeave?: (e: React.DragEvent) => void;
+    onDrop?: (e: React.DragEvent) => void;
+    /** Extra inline styles, merged last — used for the insert-before line on a reorder target. */
+    style?: React.CSSProperties;
+    title?: string;
+    /** Id this row reports when dragged or dropped on. Also makes it a hit-test target. */
+    dragId?: string;
+    /** Container this row belongs to, for "insert before this row" moves. */
+    dragParentId?: string | null;
+    /** "folder" accepts a drop into it; anything else is an insertion point. */
+    dragKind?: string;
+    onMouseDown?: (e: React.MouseEvent) => void;
+}
+export declare function TreeRow({ depth, active, dropHint, leading, label, trailing, tint, onClick, onDoubleClick, onContextMenu, onKeyDown, draggable, onDragStart, onDragEnd, onDragEnter, onDragOver, onDragLeave, onDrop, style, title, dragId, dragParentId, dragKind, onMouseDown, }: TreeRowProps): import("react").JSX.Element;
+export default TreeRow;

package/types/components/dragrow.d.ts

@@ -0,0 +1,34 @@
+// GENERATED by sdk/gen-types.mjs from Deck's source — do not edit.
+/** Marks an element as a draggable/droppable row. Read back during a drag by hit-testing. */
+export declare const ROW_ATTR = "data-drag-id";
+/** Optional: the id of the container a row belongs to, for "insert before this row" moves. */
+export declare const ROW_PARENT_ATTR = "data-drag-parent";
+/** Optional: "folder" rows accept a drop into them; anything else is an insertion point. */
+export declare const ROW_KIND_ATTR = "data-drag-kind";
+export interface DropTarget {
+    id: string;
+    parentId: string | null;
+    kind: string | null;
+}
+/** The row under a point, or null. Exported for the check. */
+export declare function rowAt(x: number, y: number): DropTarget | null;
+export interface DragState {
+    /** Id of the row being dragged, or null when idle. */
+    dragId: string | null;
+    /** Row currently under the cursor, or null. */
+    over: DropTarget | null;
+}
+/**
+ * Start a drag from a row's onMouseDown.
+ *
+ * Returns the live drag state plus the handler to attach. Nothing happens until the pointer
+ * moves past the threshold, so a plain click still reaches onClick untouched.
+ */
+export declare function useRowDrag(onDrop: (dragId: string, target: DropTarget | null, x: number, y: number) => void): {
+    startDrag: (id: string) => (e: React.MouseEvent) => void;
+    justDragged: () => boolean;
+    /** Id of the row being dragged, or null when idle. */
+    dragId: string | null;
+    /** Row currently under the cursor, or null. */
+    over: DropTarget | null;
+};

package/types/components/menuplace.d.ts

@@ -0,0 +1,30 @@
+// GENERATED by sdk/gen-types.mjs from Deck's source — do not edit.
+/** Where a menu of this size goes, given the cursor and the viewport. Pure, so it can be checked. */
+export interface Placement {
+    left: number;
+    top: number;
+    maxHeight?: number;
+}
+/**
+ * Place a menu box of `width` x `height` raised at (x, y).
+ *
+ * `height` must be the menu's NATURAL height, measured with any previous clamp lifted. Passing an
+ * already-clamped height is what made a menu near the bottom of the window measure short, fail
+ * the flip test, and render downward off the edge.
+ *
+ * Flips rather than merely clamping: a menu raised from the footer should open UPWARD from the
+ * cursor, not be shoved up so the cursor lands in its middle. When it fits in neither direction
+ * it takes the roomier side and scrolls within it.
+ */
+export declare function place(x: number, y: number, width: number, height: number, vw: number, vh: number, alignRight?: boolean, PAD?: number, 
+/**
+ * Where the menu's RIGHT edge goes when it flips, for an anchor that has width.
+ *
+ * A submenu opens at its parent row's right edge, so flipping it around that same point puts
+ * it straight on top of the parent — the thing it is a submenu OF disappears behind it. It has
+ * to flip around the parent's LEFT edge instead, which is what this carries. Without it the
+ * flip is correct arithmetic and the wrong place.
+ *
+ * Left out by a menu raised at a cursor, which has no width and so flips around itself.
+ */
+flipAt?: number): Placement;

package/types/components/ui.d.ts

@@ -0,0 +1,102 @@
+// GENERATED by sdk/gen-types.mjs from Deck's source — do not edit.
+import { type ReactNode } from "react";
+/**
+ * A labelled row: caption, control, optional hint.
+ *
+ * A div, NOT a label. A <label> forwards a click anywhere inside it to the first labelable
+ * control it contains, which is right for a single input and wrong for anything else — the
+ * plugin list put several buttons in one Field, and clicking a plugin's toggle fired the remove
+ * button two rows up because that button came first in the DOM.
+ *
+ * Callers wrapping exactly one input and wanting click-to-focus can use a <label> themselves;
+ * most of these wrap a control that is already its own click target.
+ */
+export declare function Field({ label, hint, children }: {
+    label: string;
+    hint?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function TextInput(props: React.InputHTMLAttributes<HTMLInputElement>): import("react").JSX.Element;
+/** Native OS time picker, styled dark. value/onChange are "HH:mm" strings. */
+export declare function TimeInput({ value, onChange, className, }: {
+    value: string;
+    onChange: (v: string) => void;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function Select(props: React.SelectHTMLAttributes<HTMLSelectElement>): import("react").JSX.Element;
+export declare function PrimaryButton({ children, ...p }: React.ButtonHTMLAttributes<HTMLButtonElement>): import("react").JSX.Element;
+export declare function GhostButton({ children, ...p }: React.ButtonHTMLAttributes<HTMLButtonElement>): import("react").JSX.Element;
+/**
+ * A segmented control.
+ *
+ * `layoutId` names the sliding pill. Framer Motion matches that id across the WHOLE tree, so two
+ * segmented controls sharing one animate the pill between them — pass a distinct id wherever a
+ * screen draws more than one (a per-row control, say). The default keeps the single-control case
+ * a one-liner.
+ */
+export declare function Segmented<T extends string>({ value, onChange, options, layoutId, }: {
+    value: T;
+    onChange: (v: T) => void;
+    options: {
+        value: T;
+        label: string;
+    }[];
+    layoutId?: string;
+}): import("react").JSX.Element;
+/** Underlined tabs. `layoutId` behaves as in Segmented above. */
+export declare function Tabs<T extends string>({ value, onChange, options, layoutId, }: {
+    value: T;
+    onChange: (v: T) => void;
+    options: {
+        value: T;
+        label: string;
+    }[];
+    layoutId?: string;
+}): import("react").JSX.Element;
+export declare function DayPicker({ value, onChange, }: {
+    value: string[];
+    onChange: (days: string[]) => void;
+}): import("react").JSX.Element;
+/** One readout in the footer strip: an icon, a short label, and an optional click. */
+export declare function StatusItem({ icon, color, label, title, onClick, }: {
+    icon: React.ReactNode;
+    color: string;
+    label: string;
+    title?: string;
+    onClick?: () => void;
+}): import("react").JSX.Element;
+/**
+ * A footer readout that opens a details panel above the strip.
+ *
+ * Each one owns its own anchor and outside-click handling, so adding a readout is a matter of
+ * writing its panel — not another ref threaded into a shared listener. `open`/`onToggle` stay
+ * lifted by the caller so only one panel can be open at a time; a plugin that holds its own
+ * boolean simply gets a panel that does not close Deck's others, which is usually fine.
+ */
+export declare function StatusPopover({ open, onToggle, onClose, item, children, width }: {
+    open: boolean;
+    onToggle: () => void;
+    onClose: () => void;
+    /** The clickable readout itself. */
+    item: React.ReactNode;
+    /** Panel contents, rendered only while open. */
+    children: React.ReactNode;
+    /** Tailwind width class, when the default 16rem is too narrow for the panel's columns. */
+    width?: string;
+}): import("react").JSX.Element;
+/** Panel heading: what it is, and the one number that matters. */
+export declare function PanelHead({ label, value }: {
+    label: string;
+    value?: string;
+}): import("react").JSX.Element;
+/** A labelled switch row: title, description, toggle. */
+export declare function Row({ title, desc, on, onChange }: {
+    title: string;
+    desc: string;
+    on: boolean;
+    onChange: (v: boolean) => void;
+}): import("react").JSX.Element;
+export declare function Toggle({ on, onChange }: {
+    on: boolean;
+    onChange: (v: boolean) => void;
+}): import("react").JSX.Element;

package/types/components/useResize.d.ts

@@ -0,0 +1,24 @@
+// GENERATED by sdk/gen-types.mjs from Deck's source — do not edit.
+/**
+ * A draggable split. Returns the size in px, the props for the divider, and whether a drag is
+ * in progress — the last so an animated pane can turn its transition off while dragging, or the
+ * spring re-targets on every mousemove and the pane lags the cursor.
+ *
+ * Listeners go on `window`, not the divider, so a fast drag that outruns the pointer keeps
+ * resizing instead of stopping the moment the cursor leaves the 4px handle.
+ */
+export declare function useResize({ initial, min, max, direction, invert, }: {
+    initial: number;
+    min: number;
+    max: number;
+    direction: "horizontal" | "vertical";
+    /**
+     * Set when the resized pane sits AFTER the handle (below it, or to its right).
+     *
+     * Without this the drag runs backwards: dragging the handle down increases clientY, which
+     * would grow a pane that is actually being squeezed from above.
+     */
+    invert?: boolean;
+}): readonly [number, {
+    readonly onMouseDown: (e: React.MouseEvent) => void;
+}, boolean];