@profullstack/hqtui 0.1.0

package/dist/ui.d.ts

@@ -0,0 +1,194 @@
+import type { Surface, BorderStyle, Align } from "./surface.ts";
+import type { Color } from "./color.ts";
+import type { Theme } from "./theme.ts";
+import type { Capabilities } from "./capabilities.ts";
+import { type Rect, type Padding, type Size } from "./layout.ts";
+import { BrailleCanvas } from "./graphics/braille.ts";
+import * as W from "./widgets/index.ts";
+export interface HitRegion {
+    rect: Rect;
+    onClick?: (x: number, y: number, button: string) => void;
+    onScroll?: (delta: number) => void;
+    onHover?: (x: number, y: number) => void;
+}
+export interface FocusRegistration {
+    index: number;
+    focused: boolean;
+}
+/** Per-frame services the builder needs from the app. */
+export interface RenderContext {
+    theme: Theme;
+    capabilities: Capabilities;
+    width: number;
+    height: number;
+    /** Frames drawn since start. */
+    frame: number;
+    /** Milliseconds since the app started. */
+    elapsed: number;
+    focusIndex: number;
+    registerFocus(action?: () => void): FocusRegistration;
+    hit(region: HitRegion): void;
+    overlay(draw: (root: Surface) => void): void;
+    invalidate(): void;
+}
+export interface ContainerOptions {
+    gap?: number;
+    padding?: Padding;
+    /** Size along the parent's main axis. */
+    size?: Size;
+    width?: Size;
+    height?: Size;
+    min?: number;
+    max?: number;
+    background?: Color;
+}
+export interface PanelOptions extends ContainerOptions {
+    title?: string;
+    titleAlign?: Align;
+    titleColor?: Color;
+    subtitle?: string;
+    subtitleColor?: Color;
+    footer?: string;
+    border?: BorderStyle;
+    borderColor?: Color;
+    /** Draws the focused border color and joins the Tab order. */
+    focusable?: boolean;
+    focused?: boolean;
+    scroll?: number;
+}
+export interface GridOptions extends ContainerOptions {
+    columns?: Size[] | number;
+    rows?: Size[] | number;
+}
+export interface CellOptions {
+    colSpan?: number;
+    rowSpan?: number;
+}
+/**
+ * The builder. Every container collects its children first, then solves the
+ * layout once and draws — which is why `"1fr"` works without a retained tree.
+ */
+export declare class Container {
+    readonly surface: Surface;
+    readonly ctx: RenderContext;
+    readonly direction: "row" | "column";
+    private children;
+    private gap;
+    private inner;
+    constructor(surface: Surface, ctx: RenderContext, direction?: "row" | "column", options?: ContainerOptions);
+    get theme(): Theme;
+    get width(): number;
+    get height(): number;
+    /** Width available to a child laid out along the main axis. */
+    private get crossWidth();
+    private add;
+    private sizeOf;
+    /** Solve and draw. Called automatically for you by the app and by parents. */
+    flush(): void;
+    /** A horizontal container. Children default to equal shares. */
+    row(options?: ContainerOptions, build?: (row: Container) => void): this;
+    /** A vertical container. */
+    column(options?: ContainerOptions, build?: (column: Container) => void): this;
+    /**
+     * A CSS-ish grid. Children are placed in order and may span cells:
+     *
+     *   ui.grid({ columns: ["2fr", "1fr"], rows: [12, "1fr"] }, g => {
+     *     g.panel({ title: "CPU" });
+     *     g.panel({ title: "Memory", colSpan: 2 });
+     *   });
+     */
+    grid(options?: GridOptions, build?: (grid: GridContainer) => void): this;
+    /** A bordered panel. The callback receives its interior as a column. */
+    panel(options?: PanelOptions, build?: (panel: Container) => void): this;
+    /** A panel without a border — a grouping box that costs no rows. */
+    box(options?: PanelOptions, build?: (box: Container) => void): this;
+    /** Blank space. */
+    spacer(size?: Size): this;
+    /** A horizontal rule, optionally labelled. */
+    divider(options?: W.DividerOptions & ContainerOptions): this;
+    text(content: string, options?: W.TextOptions & ContainerOptions): this;
+    /** Muted secondary text. */
+    label(content: string, options?: W.TextOptions & ContainerOptions): this;
+    /** Bold heading in the theme's title color. */
+    heading(content: string, options?: W.TextOptions & ContainerOptions): this;
+    badge(options: W.BadgeOptions & ContainerOptions): this;
+    /** Aligned label/value pairs. */
+    keyValues(rows: W.KeyValueRow[], options?: Omit<W.KeyValueOptions, "rows"> & ContainerOptions): this;
+    table<Row>(options: W.TableOptions<Row> & ContainerOptions): this;
+    list(options: W.ListOptions & ContainerOptions): this;
+    tree(options: W.TreeOptions & ContainerOptions): this;
+    log(options: W.LogOptions & ContainerOptions): this;
+    /** `label ████████░░░ 42%` */
+    meter(options: W.MeterOptions & ContainerOptions): this;
+    /** A stack or grid of meters. */
+    meters(items: W.MetersOptions["items"], options?: Omit<W.MetersOptions, "items"> & ContainerOptions): this;
+    progress(options: W.ProgressOptions & ContainerOptions): this;
+    /** Braille line/area graph. Fills the space it is given. */
+    graph(options: W.GraphOptions & ContainerOptions): this;
+    /** A filled area graph — `graph` with `fill` on. */
+    areaGraph(options: W.GraphOptions & ContainerOptions): this;
+    /** Several series on one set of axes. */
+    multiGraph(series: W.GraphOptions["series"], options?: Omit<W.GraphOptions, "series"> & ContainerOptions): this;
+    sparkline(options: W.SparklineOptions & ContainerOptions): this;
+    histogram(options: W.ColumnsOptions & ContainerOptions): this;
+    /** A semicircular dial. Wants at least 9x5. */
+    gauge(options: W.GaugeOptions & ContainerOptions): this;
+    donut(options: W.DonutOptions & ContainerOptions): this;
+    /** Segmented temperature-style bar. */
+    heatBar(options: W.HeatBarOptions & ContainerOptions): this;
+    /** A button. Pass `onPress` and it joins the Tab order automatically. */
+    button(options: W.ButtonOptions & ContainerOptions & {
+        onPress?: () => void;
+    }): this;
+    /** A row of buttons, sized to their labels. */
+    buttons(items: (W.ButtonOptions & {
+        onPress?: () => void;
+    })[], options?: ContainerOptions & {
+        align?: Align;
+    }): this;
+    checkbox(options: W.CheckboxOptions & ContainerOptions & {
+        onToggle?: () => void;
+    }): this;
+    select(options: W.SelectOptions & ContainerOptions & {
+        onOpen?: () => void;
+    }): this;
+    textInput(options: W.TextInputOptions & ContainerOptions): this;
+    tabs(options: W.TabsOptions & ContainerOptions & {
+        onSelect?: (index: number) => void;
+    }): this;
+    statusBar(options: W.StatusBarOptions & ContainerOptions): this;
+    /** A centred dialog drawn above everything else this frame. */
+    modal(options: W.ModalOptions, build?: (modal: Container) => void): this;
+    commandPalette(options: W.CommandPaletteOptions): this;
+    tooltip(options: W.TooltipOptions): this;
+    /** Draw straight onto the framebuffer region. Nothing is off limits. */
+    draw(fn: (surface: Surface) => void, options?: ContainerOptions): this;
+    /** A Braille pixel canvas sized to the region, blitted when you are done. */
+    canvas(fn: (canvas: BrailleCanvas, surface: Surface) => void, options?: ContainerOptions & {
+        color?: Color;
+    }): this;
+    /**
+     * Pick a layout by available width:
+     *   ui.responsive({ 120: wide, 80: medium, 0: compact });
+     */
+    responsive(breakpoints: Record<number, (ui: Container) => void>): this;
+    /** Run `build` only when the container is at least this wide. */
+    when(condition: boolean, build: (ui: Container) => void): this;
+}
+/** Grid placement with spans. Cells are filled row-major. */
+export declare class GridContainer {
+    private surface;
+    private ctx;
+    private options;
+    private cells;
+    constructor(surface: Surface, ctx: RenderContext, options: GridOptions);
+    get theme(): Theme;
+    private track;
+    private push;
+    /** A panel occupying the next free cell (or several, with colSpan/rowSpan). */
+    panel(options?: PanelOptions & CellOptions, build?: (panel: Container) => void): this;
+    cell(options?: CellOptions & ContainerOptions, build?: (cell: Container) => void): this;
+    row(options?: CellOptions & ContainerOptions, build?: (row: Container) => void): this;
+    flush(): void;
+}
+//# sourceMappingURL=ui.d.ts.map

package/dist/ui.d.ts.map

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

package/dist/ui.js

@@ -0,0 +1,439 @@
+import { inset, stack, solve, isEmpty, } from "./layout.js";
+import { stringWidth, wrap } from "./unicode.js";
+import { BrailleCanvas } from "./graphics/braille.js";
+import * as W from "./widgets/index.js";
+/**
+ * The builder. Every container collects its children first, then solves the
+ * layout once and draws — which is why `"1fr"` works without a retained tree.
+ */
+export class Container {
+    surface;
+    ctx;
+    direction;
+    children = [];
+    gap;
+    inner;
+    constructor(surface, ctx, direction = "column", options = {}) {
+        this.surface = surface;
+        this.ctx = ctx;
+        this.direction = direction;
+        this.gap = options.gap ?? 0;
+        this.inner = options.padding ? surface.inset(options.padding) : surface;
+        if (options.background !== undefined)
+            surface.fill({ bg: options.background });
+    }
+    get theme() {
+        return this.surface.theme;
+    }
+    get width() {
+        return this.inner.width;
+    }
+    get height() {
+        return this.inner.height;
+    }
+    /** Width available to a child laid out along the main axis. */
+    get crossWidth() {
+        return this.direction === "column" ? this.inner.width : this.inner.height;
+    }
+    add(draw, constraint = {}) {
+        this.children.push({ draw, constraint });
+        return this;
+    }
+    sizeOf(o, fallback, intrinsic) {
+        const explicit = o?.size ?? (this.direction === "column" ? o?.height : o?.width);
+        if (explicit !== undefined)
+            return { size: explicit, min: o?.min, max: o?.max, intrinsic };
+        // Intrinsic sizes describe height. Along a row, a widget takes the space it is given.
+        const size = this.direction === "row" ? "fill" : fallback;
+        return { size, min: o?.min, max: o?.max, intrinsic };
+    }
+    /** Solve and draw. Called automatically for you by the app and by parents. */
+    flush() {
+        if (this.children.length === 0 || isEmpty(this.inner.rect))
+            return;
+        const rects = stack(this.inner.rect, this.children.map((c) => c.constraint), this.direction, this.gap);
+        this.children.forEach((child, i) => {
+            const rect = rects[i];
+            if (!rect || isEmpty(rect))
+                return;
+            child.draw(this.inner.region(rect));
+        });
+        this.children.length = 0;
+    }
+    // ---------------------------------------------------------------- layout
+    /** A horizontal container. Children default to equal shares. */
+    row(options = {}, build) {
+        return this.add((surface) => {
+            const container = new Container(surface, this.ctx, "row", options);
+            build?.(container);
+            container.flush();
+        }, this.sizeOf(options, "fill"));
+    }
+    /** A vertical container. */
+    column(options = {}, build) {
+        return this.add((surface) => {
+            const container = new Container(surface, this.ctx, "column", options);
+            build?.(container);
+            container.flush();
+        }, this.sizeOf(options, "fill"));
+    }
+    /**
+     * A CSS-ish grid. Children are placed in order and may span cells:
+     *
+     *   ui.grid({ columns: ["2fr", "1fr"], rows: [12, "1fr"] }, g => {
+     *     g.panel({ title: "CPU" });
+     *     g.panel({ title: "Memory", colSpan: 2 });
+     *   });
+     */
+    grid(options = {}, build) {
+        return this.add((surface) => {
+            const container = new GridContainer(surface, this.ctx, options);
+            build?.(container);
+            container.flush();
+        }, this.sizeOf(options, "fill"));
+    }
+    /** A bordered panel. The callback receives its interior as a column. */
+    panel(options = {}, build) {
+        const focus = options.focusable ? this.ctx.registerFocus() : undefined;
+        return this.add((surface) => {
+            const focused = options.focused ?? focus?.focused ?? false;
+            const boxOptions = {
+                title: options.title,
+                titleAlign: options.titleAlign,
+                titleColor: options.titleColor,
+                subtitle: options.subtitle,
+                subtitleColor: options.subtitleColor,
+                footer: options.footer,
+                border: options.border ?? "rounded",
+                borderColor: options.borderColor ?? (focused ? this.theme.borderFocused : this.theme.border),
+                bg: options.background,
+            };
+            const interior = surface.box(boxOptions);
+            const container = new Container(interior, this.ctx, "column", {
+                gap: options.gap,
+                padding: options.padding ?? [0, 1],
+            });
+            build?.(container);
+            container.flush();
+        }, this.sizeOf(options, "fill"));
+    }
+    /** A panel without a border — a grouping box that costs no rows. */
+    box(options = {}, build) {
+        return this.panel({ ...options, border: options.border ?? "none" }, build);
+    }
+    /** Blank space. */
+    spacer(size = "fill") {
+        return this.add(() => { }, { size });
+    }
+    /** A horizontal rule, optionally labelled. */
+    divider(options = {}) {
+        return this.add((s) => W.drawDivider(s, options), this.sizeOf(options, "auto", 1));
+    }
+    // ------------------------------------------------------------------ text
+    text(content, options = {}) {
+        const lines = options.wrap ? wrap(content, this.crossWidth).length : content.split("\n").length;
+        return this.add((s) => W.drawText(s, content, options), this.sizeOf(options, "auto", lines));
+    }
+    /** Muted secondary text. */
+    label(content, options = {}) {
+        return this.text(content, { fg: this.theme.muted, ...options });
+    }
+    /** Bold heading in the theme's title color. */
+    heading(content, options = {}) {
+        return this.text(content, { fg: this.theme.title, bold: true, ...options });
+    }
+    badge(options) {
+        return this.add((s) => W.drawBadge(s, options), this.sizeOf(options, "auto", 1));
+    }
+    /** Aligned label/value pairs. */
+    keyValues(rows, options = {}) {
+        return this.add((s) => W.drawKeyValues(s, { ...options, rows }), this.sizeOf(options, "auto", rows.length));
+    }
+    // ------------------------------------------------------------------ data
+    table(options) {
+        const intrinsic = options.rows.length + (options.header === false ? 0 : 1);
+        return this.add((s) => W.drawTable(s, options), this.sizeOf(options, "fill", intrinsic));
+    }
+    list(options) {
+        return this.add((s) => W.drawList(s, options), this.sizeOf(options, "fill", options.items.length));
+    }
+    tree(options) {
+        return this.add((s) => W.drawTree(s, options), this.sizeOf(options, "fill"));
+    }
+    log(options) {
+        return this.add((s) => W.drawLog(s, options), this.sizeOf(options, "fill", options.entries.length));
+    }
+    // --------------------------------------------------------------- metrics
+    /** `label ████████░░░ 42%` */
+    meter(options) {
+        return this.add((s) => W.drawMeter(s, options), this.sizeOf(options, "auto", 1));
+    }
+    /** A stack or grid of meters. */
+    meters(items, options = {}) {
+        const columns = Math.max(1, options.columns ?? 1);
+        const rows = Math.ceil(items.length / columns);
+        return this.add((s) => W.drawMeters(s, { ...options, items }), this.sizeOf(options, "auto", rows));
+    }
+    progress(options) {
+        return this.add((s) => W.drawProgress(s, options), this.sizeOf(options, "auto", 1));
+    }
+    /** Braille line/area graph. Fills the space it is given. */
+    graph(options) {
+        return this.add((s) => W.drawGraph(s, options), this.sizeOf(options, "fill"));
+    }
+    /** A filled area graph — `graph` with `fill` on. */
+    areaGraph(options) {
+        return this.graph({ fill: true, ...options });
+    }
+    /** Several series on one set of axes. */
+    multiGraph(series, options = {}) {
+        return this.graph({ ...options, series });
+    }
+    sparkline(options) {
+        return this.add((s) => W.drawSparklineWidget(s, options), this.sizeOf(options, "auto", 1));
+    }
+    histogram(options) {
+        return this.add((s) => W.drawColumns(s, options), this.sizeOf(options, "fill"));
+    }
+    /** A semicircular dial. Wants at least 9x5. */
+    gauge(options) {
+        return this.add((s) => W.drawGauge(s, options), this.sizeOf(options, "fill"));
+    }
+    donut(options) {
+        return this.add((s) => W.drawDonut(s, options), this.sizeOf(options, "fill"));
+    }
+    /** Segmented temperature-style bar. */
+    heatBar(options) {
+        return this.add((s) => W.drawHeatBar(s, options), this.sizeOf(options, "auto", 1));
+    }
+    // ---------------------------------------------------------------- inputs
+    /** A button. Pass `onPress` and it joins the Tab order automatically. */
+    button(options) {
+        const focus = this.ctx.registerFocus(options.onPress);
+        return this.add((s) => {
+            W.drawButton(s, { ...options, focused: options.focused ?? focus.focused });
+            this.ctx.hit({ rect: s.hitRect(), onClick: () => options.onPress?.() });
+        }, this.sizeOf(options, "auto", 1));
+    }
+    /** A row of buttons, sized to their labels. */
+    buttons(items, options = {}) {
+        return this.row({ ...options, size: options.size ?? 1 }, (row) => {
+            if (options.align === "right")
+                row.spacer("fill");
+            items.forEach((item) => {
+                row.button({ ...item, width: stringWidth(item.label) + 2, size: stringWidth(item.label) + 2 });
+                row.spacer(2);
+            });
+            if (options.align !== "right")
+                row.spacer("fill");
+        });
+    }
+    checkbox(options) {
+        const focus = this.ctx.registerFocus(options.onToggle);
+        return this.add((s) => {
+            W.drawCheckbox(s, { ...options, focused: options.focused ?? focus.focused });
+            this.ctx.hit({ rect: s.hitRect(), onClick: () => options.onToggle?.() });
+        }, this.sizeOf(options, "auto", 1));
+    }
+    select(options) {
+        const focus = this.ctx.registerFocus(options.onOpen);
+        return this.add((s) => {
+            W.drawSelect(s, { ...options, focused: options.focused ?? focus.focused });
+            this.ctx.hit({ rect: s.hitRect(), onClick: () => options.onOpen?.() });
+        }, this.sizeOf(options, "auto", options.open ? (options.options?.length ?? 0) + 1 : 1));
+    }
+    textInput(options) {
+        const focus = this.ctx.registerFocus();
+        return this.add((s) => W.drawTextInput(s, { ...options, focused: options.focused ?? focus.focused }), this.sizeOf(options, "auto", 1));
+    }
+    tabs(options) {
+        return this.add((s) => {
+            W.drawTabs(s, options);
+            if (options.onSelect) {
+                let x = 0;
+                options.tabs.forEach((tab, i) => {
+                    const w = stringWidth(tab) + 4;
+                    const r = s.hitRect();
+                    this.ctx.hit({
+                        rect: { x: r.x + x, y: r.y, width: w, height: 1 },
+                        onClick: () => options.onSelect?.(i),
+                    });
+                    x += w;
+                });
+            }
+        }, this.sizeOf(options, "auto", 1));
+    }
+    statusBar(options) {
+        return this.add((s) => W.drawStatusBar(s, options), this.sizeOf(options, "auto", 1));
+    }
+    // -------------------------------------------------------------- overlays
+    /** A centred dialog drawn above everything else this frame. */
+    modal(options, build) {
+        this.ctx.overlay((root) => {
+            const inner = W.drawModal(root, options);
+            if (build) {
+                const container = new Container(inner, this.ctx, "column", { padding: [1, 1] });
+                build(container);
+                container.flush();
+            }
+        });
+        return this;
+    }
+    commandPalette(options) {
+        this.ctx.overlay((root) => W.drawCommandPalette(root, options));
+        return this;
+    }
+    tooltip(options) {
+        this.ctx.overlay((root) => W.drawTooltip(root, options));
+        return this;
+    }
+    // --------------------------------------------------------- escape hatches
+    /** Draw straight onto the framebuffer region. Nothing is off limits. */
+    draw(fn, options = {}) {
+        return this.add(fn, this.sizeOf(options, "fill"));
+    }
+    /** A Braille pixel canvas sized to the region, blitted when you are done. */
+    canvas(fn, options = {}) {
+        return this.add((surface) => {
+            const canvas = new BrailleCanvas(surface.width, surface.height);
+            fn(canvas, surface);
+            const color = options.color ?? this.theme.accent;
+            for (let row = 0; row < canvas.rows; row++) {
+                for (let col = 0; col < canvas.cols; col++) {
+                    const value = canvas.cell(col, row);
+                    if (value !== 0)
+                        surface.char(col, row, value, { fg: color });
+                }
+            }
+        }, this.sizeOf(options, "fill"));
+    }
+    /**
+     * Pick a layout by available width:
+     *   ui.responsive({ 120: wide, 80: medium, 0: compact });
+     */
+    responsive(breakpoints) {
+        const widths = Object.keys(breakpoints)
+            .map(Number)
+            .sort((a, b) => b - a);
+        const chosen = widths.find((w) => this.width >= w) ?? widths[widths.length - 1];
+        breakpoints[chosen]?.(this);
+        return this;
+    }
+    /** Run `build` only when the container is at least this wide. */
+    when(condition, build) {
+        if (condition)
+            build(this);
+        return this;
+    }
+}
+/** Grid placement with spans. Cells are filled row-major. */
+export class GridContainer {
+    surface;
+    ctx;
+    options;
+    cells = [];
+    constructor(surface, ctx, options) {
+        this.surface = options.padding ? surface.inset(options.padding) : surface;
+        this.ctx = ctx;
+        this.options = options;
+    }
+    get theme() {
+        return this.surface.theme;
+    }
+    track(spec, fallback) {
+        if (Array.isArray(spec))
+            return spec;
+        const count = spec ?? fallback;
+        return new Array(Math.max(1, count)).fill("1fr");
+    }
+    push(options, draw) {
+        this.cells.push({ options, draw });
+        return this;
+    }
+    /** A panel occupying the next free cell (or several, with colSpan/rowSpan). */
+    panel(options = {}, build) {
+        return this.push(options, (surface) => {
+            const container = new Container(surface, this.ctx, "column");
+            container.panel(options, build);
+            container.flush();
+        });
+    }
+    cell(options = {}, build) {
+        return this.push(options, (surface) => {
+            const container = new Container(surface, this.ctx, "column", options);
+            build?.(container);
+            container.flush();
+        });
+    }
+    row(options = {}, build) {
+        return this.push(options, (surface) => {
+            const container = new Container(surface, this.ctx, "row", options);
+            build?.(container);
+            container.flush();
+        });
+    }
+    flush() {
+        if (this.cells.length === 0 || isEmpty(this.surface.rect))
+            return;
+        const gap = this.options.gap ?? 0;
+        const columnSpec = this.track(this.options.columns, Math.min(this.cells.length, 3));
+        const rowCount = Array.isArray(this.options.rows)
+            ? this.options.rows.length
+            : (this.options.rows ?? Math.ceil(this.cells.length / columnSpec.length));
+        const rowSpec = this.track(this.options.rows, rowCount);
+        const colWidths = solve(this.surface.width, columnSpec.map((size) => ({ size })), gap);
+        const rowHeights = solve(this.surface.height, rowSpec.map((size) => ({ size })), gap);
+        const occupied = new Set();
+        let cursor = 0;
+        for (const cell of this.cells) {
+            const colSpan = Math.max(1, cell.options.colSpan ?? 1);
+            const rowSpan = Math.max(1, cell.options.rowSpan ?? 1);
+            // Find the next free slot that fits the span.
+            let placed = false;
+            while (!placed && cursor < colWidths.length * rowHeights.length + colWidths.length) {
+                const col = cursor % colWidths.length;
+                const row = Math.floor(cursor / colWidths.length);
+                if (row >= rowHeights.length)
+                    break;
+                let free = col + colSpan <= colWidths.length;
+                if (free) {
+                    for (let r = row; r < row + rowSpan && free; r++) {
+                        for (let c = col; c < col + colSpan && free; c++) {
+                            if (occupied.has(`${c},${r}`))
+                                free = false;
+                        }
+                    }
+                }
+                if (!free) {
+                    cursor++;
+                    continue;
+                }
+                for (let r = row; r < row + rowSpan; r++) {
+                    for (let c = col; c < col + colSpan; c++)
+                        occupied.add(`${c},${r}`);
+                }
+                let x = this.surface.rect.x;
+                for (let c = 0; c < col; c++)
+                    x += colWidths[c] + gap;
+                let y = this.surface.rect.y;
+                for (let r = 0; r < row; r++)
+                    y += rowHeights[r] + gap;
+                let width = 0;
+                for (let c = col; c < col + colSpan && c < colWidths.length; c++)
+                    width += colWidths[c] + gap;
+                width = Math.max(0, width - gap);
+                let height = 0;
+                for (let r = row; r < row + rowSpan && r < rowHeights.length; r++)
+                    height += rowHeights[r] + gap;
+                height = Math.max(0, height - gap);
+                const rect = { x, y, width, height };
+                if (!isEmpty(rect))
+                    cell.draw(this.surface.region(rect));
+                placed = true;
+                cursor++;
+            }
+        }
+        this.cells.length = 0;
+    }
+}
+//# sourceMappingURL=ui.js.map