@weasel-js/labkit 0.1.0

package/dist/dragdrop/index.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/dragdrop/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/index.d.ts

@@ -0,0 +1,410 @@
+export { CanvasLayerDescriptor, CanvasStack, CanvasStackContext, CanvasStackContextValue, CanvasStackProps, screenToWorld, worldToScreen } from './canvas/index.js';
+export { ControlPanel } from './controls/index.js';
+import { C as ConfigField } from './_dts/types-Si4Fw-1F.js';
+export { a as CheckboxField, b as ColorField, c as ConfigFieldBase, d as ConfigFieldType, N as NumberField, S as SelectField, e as SelectOption, f as SliderField, T as TextField } from './_dts/types-Si4Fw-1F.js';
+import { I as Instrument } from './_dts/index-C6Yze7sQ.js';
+export { C as CanvasCapability, a as CanvasLayer, D as DragDropCapability, b as DragFeedback, H as HitResult, L as LayerCapability, c as LayerDescriptor, P as PaletteItem, d as Point, R as RenderContext, S as SystemEvent, U as UndoCapability, V as ViewTransform } from './_dts/index-C6Yze7sQ.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { S as StorageAdapter, W as WorkspaceRecord, e as SavedSnapshot } from './_dts/useExperimentState-eSvpwV_P.js';
+export { C as CreateLabStoreOptions, E as ExperimentStateHandle, b as LabStoreContext, c as LabStoreProvider, d as LabStoreState, U as UndoStack, f as WorkspaceIdContext, g as WorkspaceIdProvider, i as createMemoryAdapter, l as localStorageAdapter, n as noneAdapter, s as sessionStorageAdapter, u as urlHashAdapter, j as useExperimentState, k as useLabStore, m as useWorkspaceId } from './_dts/useExperimentState-eSvpwV_P.js';
+export { LayerList, LayerListProps } from './layers/index.js';
+export { FpsMeter, ScaleIndicator, ScaleIndicatorProps, Sidebar, SidebarProps, StatusBar, StatusBarProps, Toolbar, ToolbarProps } from './primitives/index.js';
+export { LayerStack, LayerStackItem, LayerStackProps } from './ui/layers/index.js';
+export { EventBus, EventListener, clearUndo, createEventBus, emptyStack, pushSnapshot, redo, undo } from './undo/index.js';
+import 'zustand/vanilla';
+
+interface CapabilityFlags {
+    hasCanvas: boolean;
+    hasLayers: boolean;
+    hasDragDrop: boolean;
+    hasUndo: boolean;
+}
+declare function detectCapabilities(instrument: Instrument<unknown, unknown>): CapabilityFlags;
+
+declare function defineInstrument<TS, TC>(spec: Instrument<TS, TC>): Instrument<TS, TC>;
+
+interface ValidationResult {
+    valid: boolean;
+    errors: string[];
+}
+declare function validateConfigSchema(fields: ConfigField[]): ValidationResult;
+
+interface GridDims {
+    cols: number;
+    rows: number;
+}
+declare function gridDims(count: number): GridDims;
+
+interface LabProps {
+    instruments: Instrument[];
+    defaultInstrument: string;
+    storage?: StorageAdapter | null;
+    storageKey?: string;
+    theme?: 'auto' | 'light' | 'interstellar';
+    /**
+     * Optional list of CSS colors used to compose the interstellar theme's
+     * cosmic backdrop. Each color becomes one radial-gradient blob on the
+     * dark void base. Order maps to a fixed spread of positions; extras wrap
+     * around. Ignored unless `theme="interstellar"` is active.
+     */
+    nebula?: readonly string[];
+    title?: string;
+    children?: ReactNode;
+}
+declare function Lab({ instruments, defaultInstrument, storage, storageKey, theme, nebula, title, children, }: LabProps): react_jsx_runtime.JSX.Element;
+
+interface LabContextValue {
+    instruments: Instrument[];
+    workspaces: WorkspaceRecord[];
+    addWorkspace: (instrumentName: string) => void;
+    cloneWorkspace: (id: string) => void;
+    closeWorkspace: (id: string) => void;
+    resetWorkspace: (id: string) => void;
+    savedSnapshots: SavedSnapshot[];
+    saveSnapshot: (workspaceId: string, name?: string) => void;
+    loadSnapshot: (workspaceId: string, snapshotId: string) => void;
+    deleteSnapshot: (snapshotId: string) => void;
+    theme: 'auto' | 'light' | 'interstellar';
+    setTheme: (t: 'auto' | 'light' | 'interstellar') => void;
+}
+declare const LabContext: react.Context<LabContextValue | null>;
+declare function useLabContext(): LabContextValue;
+
+type LabTheme = 'auto' | 'light' | 'interstellar';
+interface LabShellProps {
+    title: string;
+    children: ReactNode;
+    /** Optional content rendered into the header (e.g., action buttons). */
+    header?: ReactNode;
+    /** Optional content rendered into the footer. */
+    footer?: ReactNode;
+    /** Theme override. "auto" (default) follows prefers-color-scheme. */
+    theme?: LabTheme;
+}
+declare function LabShell({ title, children, header, footer, theme }: LabShellProps): react_jsx_runtime.JSX.Element;
+
+interface WorkspaceGridProps {
+    children: ReactNode;
+}
+declare function WorkspaceGrid({ children }: WorkspaceGridProps): react_jsx_runtime.JSX.Element;
+
+type CurveMark = {
+    kind: 'band';
+    x: [number, number];
+    color?: string;
+} | {
+    kind: 'line';
+    x: number;
+    color?: string;
+};
+interface CurveFieldProps {
+    /** Flat [x0, y0, x1, y1, …] — matches how curve-as-array configs
+     *  serialize in JSON snapshots. */
+    values: number[];
+    min: number;
+    max: number;
+    step: number;
+    /** Plot width in CSS px. Caller sizes (typically uses a ResizeObserver). */
+    width: number;
+    /** Plot height in CSS px. Default 110. */
+    height?: number;
+    /** Flat default curve. When provided, a Reset button restores it. */
+    defaults?: readonly number[];
+    onChange: (next: number[]) => void;
+    /** Optional vertical marks overlaid on the plot (e.g. landmarks). */
+    marks?: readonly CurveMark[];
+}
+/**
+ * A function-domain (y = f(x), x ∈ [0,1]) curve editor with per-stop
+ * numeric readouts and flip buttons. Wraps weasel-ui's
+ * `CurveEditor`; consumers wanting the raw editor (2D paths,
+ * custom anchors) should import it from `@weasel-js/labkit/weasel-ui`.
+ */
+declare function CurveField({ values, min, max, step, width, height, defaults, onChange, marks, }: CurveFieldProps): react_jsx_runtime.JSX.Element;
+
+interface SubpanelProps {
+    title: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+declare function Subpanel({ title, children, className }: SubpanelProps): react_jsx_runtime.JSX.Element;
+interface EffectCardProps {
+    /** Card title rendered in the title bar (e.g. effect kind label or a select). */
+    title: ReactNode;
+    /** Optional badge/chip displayed before the remove button (e.g. primary value summary). */
+    primary?: ReactNode;
+    /** Optional accent color in any CSS color form. Sets --lk-panel-accent on the card. */
+    accent?: string;
+    /** Optional ordinal badge that doubles as the drag handle (used by tail cards in SB). */
+    index?: number;
+    expanded?: boolean;
+    onToggleExpanded?: () => void;
+    onRemove?: () => void;
+    /**
+     * Drag-handle wiring. When provided, an inline handle (⋮⋮ icon or `index`)
+     * activates HTML5 drag on press. Consumer owns the drag/drop coordination —
+     * see EffectCardList for the batteries-included wrapper.
+     */
+    draggable?: boolean;
+    onPressHandle?: () => void;
+    onReleaseHandle?: () => void;
+    onDragStart?: (e: React.DragEvent<HTMLDivElement>) => void;
+    onDragEnd?: (e: React.DragEvent<HTMLDivElement>) => void;
+    onDragOver?: (e: React.DragEvent<HTMLDivElement>) => void;
+    onDragLeave?: (e: React.DragEvent<HTMLDivElement>) => void;
+    onDrop?: (e: React.DragEvent<HTMLDivElement>) => void;
+    dragging?: boolean;
+    children?: ReactNode;
+    className?: string;
+}
+declare function EffectCard({ title, primary, accent, index, expanded, onToggleExpanded, onRemove, draggable, onPressHandle, onReleaseHandle, onDragStart, onDragEnd, onDragOver, onDragLeave, onDrop, dragging, children, className, }: EffectCardProps): react_jsx_runtime.JSX.Element;
+interface EffectCardListItem {
+    id: string | number;
+}
+interface EffectCardListProps<T extends EffectCardListItem> {
+    items: ReadonlyArray<T>;
+    renderItem: (item: T, helpers: {
+        isExpanded: boolean;
+        isDragging: boolean;
+        toggleExpanded: () => void;
+        cardProps: Pick<EffectCardProps, 'expanded' | 'dragging' | 'draggable' | 'onToggleExpanded' | 'onPressHandle' | 'onReleaseHandle' | 'onDragStart' | 'onDragEnd' | 'onDragOver' | 'onDragLeave' | 'onDrop'>;
+    }) => ReactNode;
+    onReorder: (sourceId: T['id'], targetId: T['id'], position: 'before' | 'after') => void;
+    /** Optional rendered when the list is empty. */
+    empty?: ReactNode;
+    /** IDs to render expanded on first mount. Defaults to all collapsed. */
+    defaultExpandedIds?: ReadonlyArray<T['id']>;
+}
+declare function EffectCardList<T extends EffectCardListItem>({ items, renderItem, onReorder, empty, defaultExpandedIds, }: EffectCardListProps<T>): react_jsx_runtime.JSX.Element;
+
+interface PropertyGroupProps {
+    /** Title rendered between two rules at the top of the group. */
+    title: ReactNode;
+    /** When true the group renders nothing — useful for conditional sections. */
+    hidden?: boolean;
+    children: ReactNode;
+    className?: string;
+    /**
+     * How rows pack into the 2-column grid.
+     *   - `'auto-color'` (default): only color rows pair side-by-side; everything
+     *     else spans the full width.
+     *   - `'pairs'`: every row auto-places into the 2-column grid two-per-row.
+     */
+    pack?: 'auto-color' | 'pairs';
+}
+/**
+ * Visually-bordered group inside a PropertyList. Use to scope a set of
+ * related rows under a heading (e.g. "Aqua", "Bevel", "Dome" sections
+ * inside a fill effect's controls).
+ */
+declare function PropertyGroup({ title, hidden, children, className, pack, }: PropertyGroupProps): react_jsx_runtime.JSX.Element | null;
+
+interface PropertyPanelProps {
+    title?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+declare function PropertyPanel({ title, children, className }: PropertyPanelProps): react_jsx_runtime.JSX.Element;
+type PropertyListPack = 'auto-color' | 'pairs';
+interface PropertyListProps {
+    children: ReactNode;
+    className?: string;
+    /**
+     * How rows pack into the 2-column grid.
+     *   - `'auto-color'` (default): only color rows pair side-by-side; everything
+     *     else spans the full width. Right for sparse top-level panels.
+     *   - `'pairs'`: every row auto-places into the 2-column grid two-per-row.
+     *     Headers, subpanels, and full-width children (`<hr>`, curve blocks)
+     *     still span via `lk-property-list__span`. Right for dense effect bodies.
+     */
+    pack?: PropertyListPack;
+}
+/**
+ * Grid container for PropertyRows. Use standalone for chrome-less layouts, or
+ * nest inside <PropertyPanel/> for the standard glass card.
+ */
+declare function PropertyList({ children, className, pack }: PropertyListProps): react_jsx_runtime.JSX.Element;
+type PropertyRowVariant = 'default' | 'color' | 'checkbox';
+type PropertyRowLayout = 'block' | 'inline';
+interface PropertyRowProps {
+    label: ReactNode;
+    /** Right-aligned readout shown next to the label (e.g. current value). */
+    readout?: ReactNode;
+    variant?: PropertyRowVariant;
+    /**
+     * Label position relative to the control. "block" (default) stacks
+     * label above control; "inline" places the label to the left.
+     * Color and checkbox variants are always inline by their own nature.
+     */
+    layout?: PropertyRowLayout;
+    children: ReactNode;
+    htmlFor?: string;
+    className?: string;
+}
+declare function PropertyRow({ label, readout, variant, layout, children, htmlFor, className, }: PropertyRowProps): react_jsx_runtime.JSX.Element;
+interface SliderRowProps {
+    label: ReactNode;
+    value: number;
+    min: number;
+    max: number;
+    step?: number;
+    onChange: (next: number) => void;
+    /** Override how the value is rendered next to the label. Defaults to `value.toString()`. */
+    format?: (value: number) => ReactNode;
+    /**
+     * Optional suffix rendered next to the readout. A string becomes a
+     * baseline-aligned dim "word" unit (e.g. "px"); pass JSX like `<sup>°</sup>`
+     * to get the browser's native super positioning for symbol units.
+     */
+    unit?: ReactNode;
+    layout?: PropertyRowLayout;
+}
+declare function SliderRow({ label, value, min, max, step, onChange, format, unit, layout, }: SliderRowProps): react_jsx_runtime.JSX.Element;
+interface ColorRowProps {
+    label: ReactNode;
+    value: string;
+    onChange: (next: string) => void;
+    /** 0..1 alpha. When provided, a translucent slider renders beneath the swatch. */
+    alpha?: number;
+    onAlphaChange?: (next: number) => void;
+    /**
+     * Render the alpha track as inert (dimmed, no thumb, not-allowed cursor).
+     * Use when the color's consumer drops alpha so the affordance reads dead.
+     */
+    alphaDisabled?: boolean;
+}
+declare function ColorRow({ label, value, onChange, alpha, onAlphaChange, alphaDisabled, }: ColorRowProps): react_jsx_runtime.JSX.Element;
+interface CheckboxRowProps {
+    label: ReactNode;
+    value: boolean;
+    onChange: (next: boolean) => void;
+}
+declare function CheckboxRow({ label, value, onChange }: CheckboxRowProps): react_jsx_runtime.JSX.Element;
+interface TextRowProps {
+    label: ReactNode;
+    value: string;
+    onChange: (next: string) => void;
+    placeholder?: string;
+    maxLength?: number;
+    layout?: PropertyRowLayout;
+}
+declare function TextRow({ label, value, onChange, placeholder, maxLength, layout }: TextRowProps): react_jsx_runtime.JSX.Element;
+interface NumberRowProps {
+    label: ReactNode;
+    value: number;
+    onChange: (next: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    placeholder?: string;
+    layout?: PropertyRowLayout;
+}
+declare function NumberRow({ label, value, onChange, min, max, step, placeholder, layout, }: NumberRowProps): react_jsx_runtime.JSX.Element;
+interface SelectOption<T extends string> {
+    value: T;
+    label: ReactNode;
+}
+interface SelectRowProps<T extends string> {
+    label: ReactNode;
+    value: T;
+    options: ReadonlyArray<SelectOption<T>>;
+    onChange: (next: T) => void;
+    layout?: PropertyRowLayout;
+}
+declare function SelectRow<T extends string>({ label, value, options, onChange, layout, }: SelectRowProps<T>): react_jsx_runtime.JSX.Element;
+interface ToggleRowProps<T extends string> {
+    label: ReactNode;
+    value: T;
+    options: ReadonlyArray<SelectOption<T>>;
+    onChange: (next: T) => void;
+    layout?: PropertyRowLayout;
+}
+declare function ToggleRow<T extends string>({ label, value, options, onChange, layout, }: ToggleRowProps<T>): react_jsx_runtime.JSX.Element;
+
+interface WorkspaceToolbarContext {
+    workspaceId: string;
+    instrumentName: string;
+    hasUndo: boolean;
+    canUndo: boolean;
+    canRedo: boolean;
+    undo: () => void;
+    redo: () => void;
+    zoom: number;
+    setZoom: (z: number) => void;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    resetZoom: () => void;
+    hasCanvas: boolean;
+    savedSnapshots: SavedSnapshot[];
+    saveSnapshot: (name?: string) => void;
+    loadSnapshot: (snapshotId: string) => void;
+    clone: () => void;
+    reset: () => void;
+    close: () => void;
+    isLastWorkspace: boolean;
+}
+interface WorkspaceSidebarContext {
+    workspaceId: string;
+    instrumentName: string;
+    configFields: ConfigField[];
+    config: unknown;
+    setConfig: (key: string, value: unknown) => void;
+}
+interface WorkspaceStatusBarContext {
+    workspaceId: string;
+    instrumentName: string;
+    zoom: number;
+}
+type ToolbarSlot = (ctx: WorkspaceToolbarContext) => ReactNode;
+type SidebarSlot = (ctx: WorkspaceSidebarContext) => ReactNode;
+type StatusBarSlot = (ctx: WorkspaceStatusBarContext) => ReactNode;
+
+interface DefaultSidebarProps {
+    ctx: WorkspaceSidebarContext;
+}
+declare function DefaultSidebar({ ctx }: DefaultSidebarProps): react_jsx_runtime.JSX.Element;
+
+interface DefaultStatusBarProps {
+    ctx: WorkspaceStatusBarContext;
+}
+declare function DefaultStatusBar({ ctx }: DefaultStatusBarProps): react_jsx_runtime.JSX.Element;
+
+interface DefaultToolbarProps {
+    ctx: WorkspaceToolbarContext;
+}
+declare function DefaultToolbar({ ctx }: DefaultToolbarProps): react_jsx_runtime.JSX.Element;
+
+interface WorkspaceProps {
+    id: string;
+}
+declare function Workspace({ id }: WorkspaceProps): react_jsx_runtime.JSX.Element;
+
+interface UndoBindings {
+    canUndo: boolean;
+    canRedo: boolean;
+    undo: () => void;
+    redo: () => void;
+}
+interface WorkspaceChromeProps {
+    workspaceId: string;
+    record: WorkspaceRecord;
+    instrument: Instrument;
+    isLastWorkspace: boolean;
+    toolbar?: ToolbarSlot;
+    sidebar?: SidebarSlot;
+    statusBar?: StatusBarSlot;
+    undoBindings?: UndoBindings;
+    sidebarExtras?: ReactNode;
+    children: ReactNode;
+}
+declare function WorkspaceChrome({ workspaceId, record, instrument, isLastWorkspace, toolbar, sidebar, statusBar, undoBindings, sidebarExtras, children, }: WorkspaceChromeProps): react_jsx_runtime.JSX.Element;
+
+declare function addWorkspace(workspaces: WorkspaceRecord[], instruments: Instrument[], instrumentName: string): WorkspaceRecord[];
+declare function cloneWorkspace(workspaces: WorkspaceRecord[], id: string): WorkspaceRecord[];
+declare function closeWorkspace(workspaces: WorkspaceRecord[], id: string): WorkspaceRecord[];
+declare function resetWorkspace(workspaces: WorkspaceRecord[], id: string, instruments: Instrument[]): WorkspaceRecord[];
+
+export { CheckboxRow, ColorRow, ConfigField, CurveField, DefaultSidebar, DefaultStatusBar, DefaultToolbar, EffectCard, EffectCardList, Instrument, Lab, LabContext, LabShell, NumberRow, PropertyGroup, PropertyList, PropertyPanel, PropertyRow, SavedSnapshot, SelectRow, SliderRow, StorageAdapter, Subpanel, TextRow, ToggleRow, Workspace, WorkspaceChrome, WorkspaceGrid, WorkspaceRecord, addWorkspace, cloneWorkspace, closeWorkspace, defineInstrument, detectCapabilities, gridDims, resetWorkspace, useLabContext, validateConfigSchema };
+export type { CapabilityFlags, CheckboxRowProps, ColorRowProps, CurveFieldProps, CurveMark, DefaultSidebarProps, DefaultStatusBarProps, DefaultToolbarProps, EffectCardListItem, EffectCardListProps, EffectCardProps, GridDims, LabContextValue, LabProps, LabShellProps, LabTheme, NumberRowProps, PropertyGroupProps, PropertyListPack, PropertyListProps, PropertyPanelProps, PropertyRowLayout, PropertyRowProps, PropertyRowVariant, SelectRowProps, SidebarSlot, SliderRowProps, StatusBarSlot, SubpanelProps, TextRowProps, ToggleRowProps, ToolbarSlot, ValidationResult, WorkspaceChromeProps, WorkspaceGridProps, WorkspaceProps, WorkspaceSidebarContext, WorkspaceStatusBarContext, WorkspaceToolbarContext };