@llui/components 0.0.1

package/dist/components/floating-panel.d.ts

@@ -0,0 +1,171 @@
+import type { Send } from '@llui/dom';
+/**
+ * Floating panel — a draggable + resizable window-like surface, useful
+ * for dev tools overlays, pop-out inspectors, preview panels, etc. The
+ * state machine tracks position and size; the view layer wires pointer
+ * events on the drag handle and resize grips and dispatches the
+ * corresponding messages.
+ *
+ * Coordinates are in pixels relative to the positioning container
+ * (typically `position: fixed` relative to the viewport).
+ */
+export type ResizeHandle = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
+export interface FloatingPanelState {
+    position: {
+        x: number;
+        y: number;
+    };
+    size: {
+        width: number;
+        height: number;
+    };
+    minSize: {
+        width: number;
+        height: number;
+    };
+    maxSize: {
+        width: number;
+        height: number;
+    } | null;
+    open: boolean;
+    minimized: boolean;
+    maximized: boolean;
+    dragging: boolean;
+    resizing: ResizeHandle | null;
+    /** Snapshot of the pre-maximize geometry (for restore). */
+    restoreBounds: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | null;
+    disabled: boolean;
+}
+export type FloatingPanelMsg = {
+    type: 'open';
+} | {
+    type: 'close';
+} | {
+    type: 'minimize';
+} | {
+    type: 'restoreFromMinimized';
+} | {
+    type: 'maximize';
+} | {
+    type: 'restoreFromMaximized';
+} | {
+    type: 'toggleMinimize';
+} | {
+    type: 'toggleMaximize';
+} | {
+    type: 'dragStart';
+} | {
+    type: 'dragMove';
+    dx: number;
+    dy: number;
+} | {
+    type: 'dragEnd';
+} | {
+    type: 'resizeStart';
+    handle: ResizeHandle;
+} | {
+    type: 'resizeMove';
+    dx: number;
+    dy: number;
+} | {
+    type: 'resizeEnd';
+} | {
+    type: 'setPosition';
+    x: number;
+    y: number;
+} | {
+    type: 'setSize';
+    width: number;
+    height: number;
+};
+export interface FloatingPanelInit {
+    position?: {
+        x: number;
+        y: number;
+    };
+    size?: {
+        width: number;
+        height: number;
+    };
+    minSize?: {
+        width: number;
+        height: number;
+    };
+    maxSize?: {
+        width: number;
+        height: number;
+    } | null;
+    open?: boolean;
+    disabled?: boolean;
+}
+export declare function init(opts?: FloatingPanelInit): FloatingPanelState;
+export declare function update(state: FloatingPanelState, msg: FloatingPanelMsg): [FloatingPanelState, never[]];
+export interface FloatingPanelParts<S> {
+    root: {
+        role: 'dialog';
+        'aria-label': string;
+        'data-scope': 'floating-panel';
+        'data-part': 'root';
+        'data-dragging': (s: S) => '' | undefined;
+        'data-resizing': (s: S) => '' | undefined;
+        'data-minimized': (s: S) => '' | undefined;
+        'data-maximized': (s: S) => '' | undefined;
+        hidden: (s: S) => boolean;
+        style: (s: S) => string;
+    };
+    dragHandle: {
+        'data-scope': 'floating-panel';
+        'data-part': 'drag-handle';
+        onPointerDown: (e: PointerEvent) => void;
+    };
+    content: {
+        'data-scope': 'floating-panel';
+        'data-part': 'content';
+        hidden: (s: S) => boolean;
+    };
+    minimizeTrigger: {
+        type: 'button';
+        'aria-label': string;
+        'data-scope': 'floating-panel';
+        'data-part': 'minimize-trigger';
+        onClick: (e: MouseEvent) => void;
+    };
+    maximizeTrigger: {
+        type: 'button';
+        'aria-label': string;
+        'data-scope': 'floating-panel';
+        'data-part': 'maximize-trigger';
+        onClick: (e: MouseEvent) => void;
+    };
+    closeTrigger: {
+        type: 'button';
+        'aria-label': string;
+        'data-scope': 'floating-panel';
+        'data-part': 'close-trigger';
+        onClick: (e: MouseEvent) => void;
+    };
+    resizeHandle: (handle: ResizeHandle) => {
+        'data-scope': 'floating-panel';
+        'data-part': 'resize-handle';
+        'data-handle': ResizeHandle;
+        onPointerDown: (e: PointerEvent) => void;
+    };
+}
+export interface ConnectOptions {
+    label?: string;
+    minimizeLabel?: string;
+    maximizeLabel?: string;
+    closeLabel?: string;
+}
+export declare function connect<S>(get: (s: S) => FloatingPanelState, send: Send<FloatingPanelMsg>, opts?: ConnectOptions): FloatingPanelParts<S>;
+export declare const floatingPanel: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+};
+//# sourceMappingURL=floating-panel.d.ts.map

package/dist/components/floating-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating-panel.d.ts","sourceRoot":"","sources":["../../src/components/floating-panel.ts"],"names":[],"mappings":"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"}

package/dist/components/floating-panel.js

@@ -0,0 +1,198 @@
+function clamp(v, min, max) {
+    return Math.max(min, Math.min(max, v));
+}
+export function init(opts = {}) {
+    return {
+        position: opts.position ?? { x: 100, y: 100 },
+        size: opts.size ?? { width: 400, height: 300 },
+        minSize: opts.minSize ?? { width: 200, height: 150 },
+        maxSize: opts.maxSize ?? null,
+        open: opts.open ?? true,
+        minimized: false,
+        maximized: false,
+        dragging: false,
+        resizing: null,
+        restoreBounds: null,
+        disabled: opts.disabled ?? false,
+    };
+}
+function clampSize(width, height, min, max) {
+    const maxW = max?.width ?? Infinity;
+    const maxH = max?.height ?? Infinity;
+    return {
+        width: clamp(width, min.width, maxW),
+        height: clamp(height, min.height, maxH),
+    };
+}
+function applyResize(state, dx, dy, handle) {
+    let { x, y } = state.position;
+    let { width, height } = state.size;
+    if (handle.includes('e'))
+        width += dx;
+    if (handle.includes('w')) {
+        width -= dx;
+        x += dx;
+    }
+    if (handle.includes('s'))
+        height += dy;
+    if (handle.includes('n')) {
+        height -= dy;
+        y += dy;
+    }
+    const size = clampSize(width, height, state.minSize, state.maxSize);
+    // If clamping changed width/height, undo the x/y shift by that delta.
+    if (handle.includes('w'))
+        x += width - size.width;
+    if (handle.includes('n'))
+        y += height - size.height;
+    return { ...state, position: { x, y }, size };
+}
+export function update(state, msg) {
+    if (state.disabled)
+        return [state, []];
+    switch (msg.type) {
+        case 'open':
+            return [{ ...state, open: true }, []];
+        case 'close':
+            return [{ ...state, open: false, dragging: false, resizing: null }, []];
+        case 'minimize':
+            return [{ ...state, minimized: true, dragging: false, resizing: null }, []];
+        case 'restoreFromMinimized':
+            return [{ ...state, minimized: false }, []];
+        case 'toggleMinimize':
+            return [{ ...state, minimized: !state.minimized }, []];
+        case 'maximize': {
+            if (state.maximized)
+                return [state, []];
+            return [
+                {
+                    ...state,
+                    maximized: true,
+                    restoreBounds: {
+                        x: state.position.x,
+                        y: state.position.y,
+                        width: state.size.width,
+                        height: state.size.height,
+                    },
+                },
+                [],
+            ];
+        }
+        case 'restoreFromMaximized': {
+            if (!state.maximized || !state.restoreBounds) {
+                return [{ ...state, maximized: false }, []];
+            }
+            const b = state.restoreBounds;
+            return [
+                {
+                    ...state,
+                    maximized: false,
+                    position: { x: b.x, y: b.y },
+                    size: { width: b.width, height: b.height },
+                    restoreBounds: null,
+                },
+                [],
+            ];
+        }
+        case 'toggleMaximize':
+            return update(state, {
+                type: state.maximized ? 'restoreFromMaximized' : 'maximize',
+            });
+        case 'dragStart':
+            if (state.maximized)
+                return [state, []];
+            return [{ ...state, dragging: true }, []];
+        case 'dragMove':
+            if (!state.dragging)
+                return [state, []];
+            return [
+                {
+                    ...state,
+                    position: {
+                        x: state.position.x + msg.dx,
+                        y: state.position.y + msg.dy,
+                    },
+                },
+                [],
+            ];
+        case 'dragEnd':
+            return [{ ...state, dragging: false }, []];
+        case 'resizeStart':
+            if (state.maximized)
+                return [state, []];
+            return [{ ...state, resizing: msg.handle }, []];
+        case 'resizeMove':
+            if (state.resizing === null)
+                return [state, []];
+            return [applyResize(state, msg.dx, msg.dy, state.resizing), []];
+        case 'resizeEnd':
+            return [{ ...state, resizing: null }, []];
+        case 'setPosition':
+            return [{ ...state, position: { x: msg.x, y: msg.y } }, []];
+        case 'setSize': {
+            const size = clampSize(msg.width, msg.height, state.minSize, state.maxSize);
+            return [{ ...state, size }, []];
+        }
+    }
+}
+export function connect(get, send, opts = {}) {
+    return {
+        root: {
+            role: 'dialog',
+            'aria-label': opts.label ?? 'Floating panel',
+            'data-scope': 'floating-panel',
+            'data-part': 'root',
+            'data-dragging': (s) => (get(s).dragging ? '' : undefined),
+            'data-resizing': (s) => (get(s).resizing !== null ? '' : undefined),
+            'data-minimized': (s) => (get(s).minimized ? '' : undefined),
+            'data-maximized': (s) => (get(s).maximized ? '' : undefined),
+            hidden: (s) => !get(s).open,
+            style: (s) => {
+                const st = get(s);
+                if (st.maximized)
+                    return 'position:fixed;inset:0;width:auto;height:auto;';
+                return (`position:fixed;` +
+                    `left:${st.position.x}px;top:${st.position.y}px;` +
+                    `width:${st.size.width}px;height:${st.size.height}px;`);
+            },
+        },
+        dragHandle: {
+            'data-scope': 'floating-panel',
+            'data-part': 'drag-handle',
+            onPointerDown: () => send({ type: 'dragStart' }),
+        },
+        content: {
+            'data-scope': 'floating-panel',
+            'data-part': 'content',
+            hidden: (s) => get(s).minimized,
+        },
+        minimizeTrigger: {
+            type: 'button',
+            'aria-label': opts.minimizeLabel ?? 'Minimize',
+            'data-scope': 'floating-panel',
+            'data-part': 'minimize-trigger',
+            onClick: () => send({ type: 'toggleMinimize' }),
+        },
+        maximizeTrigger: {
+            type: 'button',
+            'aria-label': opts.maximizeLabel ?? 'Maximize',
+            'data-scope': 'floating-panel',
+            'data-part': 'maximize-trigger',
+            onClick: () => send({ type: 'toggleMaximize' }),
+        },
+        closeTrigger: {
+            type: 'button',
+            'aria-label': opts.closeLabel ?? 'Close',
+            'data-scope': 'floating-panel',
+            'data-part': 'close-trigger',
+            onClick: () => send({ type: 'close' }),
+        },
+        resizeHandle: (handle) => ({
+            'data-scope': 'floating-panel',
+            'data-part': 'resize-handle',
+            'data-handle': handle,
+            onPointerDown: () => send({ type: 'resizeStart', handle }),
+        }),
+    };
+}
+export const floatingPanel = { init, update, connect };

package/dist/components/hover-card.d.ts

@@ -0,0 +1,85 @@
+import type { Send, TransitionOptions } from '@llui/dom';
+import { type Placement } from '../utils/floating';
+/**
+ * Hover card — richer tooltip-like popup triggered by hover or focus.
+ * Unlike tooltip, it uses `role="dialog"` (not `role="tooltip"`) and
+ * allows interactive content. Content can be hovered without closing.
+ */
+export interface HoverCardState {
+    open: boolean;
+}
+export type HoverCardMsg = {
+    type: 'show';
+} | {
+    type: 'hide';
+} | {
+    type: 'setOpen';
+    open: boolean;
+};
+export interface HoverCardInit {
+    open?: boolean;
+}
+export declare function init(opts?: HoverCardInit): HoverCardState;
+export declare function update(state: HoverCardState, msg: HoverCardMsg): [HoverCardState, never[]];
+export interface HoverCardParts<S> {
+    trigger: {
+        id: string;
+        'aria-haspopup': 'dialog';
+        'aria-expanded': (s: S) => boolean;
+        'aria-controls': string;
+        'data-state': (s: S) => 'open' | 'closed';
+        'data-scope': 'hover-card';
+        'data-part': 'trigger';
+        onPointerEnter: (e: PointerEvent) => void;
+        onPointerLeave: (e: PointerEvent) => void;
+        onFocus: (e: FocusEvent) => void;
+        onBlur: (e: FocusEvent) => void;
+    };
+    positioner: {
+        'data-scope': 'hover-card';
+        'data-part': 'positioner';
+        style: string;
+    };
+    content: {
+        role: 'dialog';
+        id: string;
+        'data-state': (s: S) => 'open' | 'closed';
+        'data-scope': 'hover-card';
+        'data-part': 'content';
+        onPointerEnter: (e: PointerEvent) => void;
+        onPointerLeave: (e: PointerEvent) => void;
+    };
+    arrow: {
+        'data-scope': 'hover-card';
+        'data-part': 'arrow';
+    };
+}
+export interface ConnectOptions {
+    id: string;
+    /** ms before showing on hover (default: 700). */
+    openDelay?: number;
+    /** ms before hiding after pointer leaves (default: 300). */
+    closeDelay?: number;
+}
+export declare function connect<S>(get: (s: S) => HoverCardState, send: Send<HoverCardMsg>, opts: ConnectOptions): HoverCardParts<S>;
+export interface OverlayOptions<S> {
+    get: (s: S) => HoverCardState;
+    send: Send<HoverCardMsg>;
+    parts: HoverCardParts<S>;
+    content: () => Node[];
+    placement?: Placement;
+    offset?: number;
+    flip?: boolean;
+    shift?: boolean;
+    transition?: TransitionOptions;
+    target?: string | HTMLElement;
+    arrowSelector?: string;
+}
+export declare function overlay<S>(opts: OverlayOptions<S>): Node[];
+export declare const hoverCard: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+    overlay: typeof overlay;
+};
+//# sourceMappingURL=hover-card.d.ts.map

package/dist/components/hover-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hover-card.d.ts","sourceRoot":"","sources":["../../src/components/hover-card.ts"],"names":[],"mappings":"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"}

package/dist/components/hover-card.js

@@ -0,0 +1,128 @@
+import { show, portal, onMount, div } from '@llui/dom';
+import { attachFloating } from '../utils/floating';
+export function init(opts = {}) {
+    return { open: opts.open ?? false };
+}
+export function update(state, msg) {
+    switch (msg.type) {
+        case 'show':
+            return [{ ...state, open: true }, []];
+        case 'hide':
+            return [{ ...state, open: false }, []];
+        case 'setOpen':
+            return [{ ...state, open: msg.open }, []];
+    }
+}
+export function connect(get, send, opts) {
+    const base = opts.id;
+    const triggerId = `${base}:trigger`;
+    const contentId = `${base}:content`;
+    const openDelay = opts.openDelay ?? 700;
+    const closeDelay = opts.closeDelay ?? 300;
+    let openTimer = null;
+    let closeTimer = null;
+    const clearTimers = () => {
+        if (openTimer) {
+            clearTimeout(openTimer);
+            openTimer = null;
+        }
+        if (closeTimer) {
+            clearTimeout(closeTimer);
+            closeTimer = null;
+        }
+    };
+    const scheduleOpen = () => {
+        clearTimers();
+        openTimer = setTimeout(() => {
+            openTimer = null;
+            send({ type: 'show' });
+        }, openDelay);
+    };
+    const scheduleClose = () => {
+        clearTimers();
+        closeTimer = setTimeout(() => {
+            closeTimer = null;
+            send({ type: 'hide' });
+        }, closeDelay);
+    };
+    return {
+        trigger: {
+            id: triggerId,
+            'aria-haspopup': 'dialog',
+            'aria-expanded': (s) => get(s).open,
+            'aria-controls': contentId,
+            'data-state': (s) => (get(s).open ? 'open' : 'closed'),
+            'data-scope': 'hover-card',
+            'data-part': 'trigger',
+            onPointerEnter: scheduleOpen,
+            onPointerLeave: scheduleClose,
+            onFocus: scheduleOpen,
+            onBlur: scheduleClose,
+        },
+        positioner: {
+            'data-scope': 'hover-card',
+            'data-part': 'positioner',
+            style: 'position:absolute;top:0;left:0;',
+        },
+        content: {
+            role: 'dialog',
+            id: contentId,
+            'data-state': (s) => (get(s).open ? 'open' : 'closed'),
+            'data-scope': 'hover-card',
+            'data-part': 'content',
+            onPointerEnter: () => {
+                if (closeTimer) {
+                    clearTimeout(closeTimer);
+                    closeTimer = null;
+                }
+            },
+            onPointerLeave: scheduleClose,
+        },
+        arrow: {
+            'data-scope': 'hover-card',
+            'data-part': 'arrow',
+        },
+    };
+}
+export function overlay(opts) {
+    const target = opts.target ?? 'body';
+    const placement = opts.placement ?? 'bottom';
+    const offset = opts.offset ?? 8;
+    const flip = opts.flip !== false;
+    const shift = opts.shift !== false;
+    const parts = opts.parts;
+    const contentId = parts.content.id;
+    const triggerId = parts.trigger.id;
+    return show({
+        when: (s) => opts.get(s).open,
+        render: () => portal({
+            target,
+            render: () => {
+                onMount(() => {
+                    const contentEl = document.getElementById(contentId);
+                    const triggerEl = document.getElementById(triggerId);
+                    if (!contentEl || !triggerEl)
+                        return;
+                    const positioner = contentEl.closest('[data-part="positioner"]');
+                    const floatingEl = positioner ?? contentEl;
+                    const arrow = opts.arrowSelector
+                        ? contentEl.querySelector(opts.arrowSelector)
+                        : null;
+                    return attachFloating({
+                        anchor: triggerEl,
+                        floating: floatingEl,
+                        placement,
+                        offset,
+                        flip,
+                        shift,
+                        arrow: arrow ?? undefined,
+                    });
+                });
+                return [div(parts.positioner, opts.content())];
+            },
+        }),
+        enter: opts.transition?.enter,
+        leave: opts.transition?.leave,
+    });
+}
+export const hoverCard = { init, update, connect, overlay };