blots-editor 0.0.13 → 0.0.15

package/dist/view/utils/modal-frame.js

@@ -0,0 +1,75 @@
+import { Box, Text, useWindowSize } from "ink";
+import { useMouseRegion } from "ink-cartridge";
+import React, { useEffect, useRef, useState } from "react";
+import { clampFrame } from "../../utils/view/frame-clamp.js";
+/**
+ * Shared draggable modal frame used by the language and sensitivity pickers.
+ *
+ * Centered by flex layout until the user grabs it, then switches to absolute
+ * positioning and follows the cursor (clamped to the terminal). Border turns
+ * green while dragging. Callers provide the title, body and optional footer.
+ */
+export function ModalFrame({ title, children, footer, width = 36, }) {
+    const { columns, rows } = useWindowSize();
+    // null = centered by flex layout; set once dragging starts so the frame
+    // keeps following the cursor via absolute positioning (0-based coords).
+    const [pos, setPos] = useState(null);
+    const [dragging, setDragging] = useState(false);
+    // Where inside the frame the cursor was grabbed, so the frame doesn't
+    // jump so its top-left lands under the cursor on the first drag move.
+    const grabOffsetRef = useRef({ dx: 0, dy: 0 });
+    // The frame's size, captured at grab time — used by the resize clamp
+    // below (a non-null position implies a drag happened, so this is set).
+    const frameSizeRef = useRef({ width: 0, height: 0 });
+    const frameRef = useMouseRegion({
+        onDragStart: (event, rect) => {
+            grabOffsetRef.current = {
+                dx: event.x - rect.x,
+                dy: event.y - rect.y,
+            };
+            frameSizeRef.current = { width: rect.width, height: rect.height };
+            // Switch from flex centering to absolute positioning at the
+            // current rect — seamless, no jump on the first frame.
+            setPos({ top: rect.y - 1, left: rect.x - 1 });
+            setDragging(true);
+        },
+        onDragMove: (event, rect) => {
+            const { dx, dy } = grabOffsetRef.current;
+            const clamped = clampFrame(event.x - dx - 1, event.y - dy - 1, columns, rows, rect.width, rect.height);
+            // The information bar occupies the top row — keep the frame below
+            // it, same as the toolbar.
+            setPos({ top: Math.max(1, clamped.top), left: clamped.left });
+        },
+        onDragEnd: () => setDragging(false),
+    });
+    // The drag clamp only runs while dragging — a terminal resize can shrink
+    // the viewport under a dragged frame afterwards. Re-clamp on every size
+    // change so the frame never extends past the edge (top stays ≥ 1 so it
+    // cannot overlap the information bar). The centered state (pos null) is
+    // flex-laid-out and follows the terminal automatically; a non-null pos
+    // implies a drag happened, so frameSizeRef is populated.
+    useEffect(() => {
+        const { width, height } = frameSizeRef.current;
+        if (!width || !height) {
+            return;
+        }
+        setPos((current) => {
+            if (!current) {
+                return current;
+            }
+            const clamped = clampFrame(current.left, current.top, columns, rows, width, height);
+            const next = { top: Math.max(1, clamped.top), left: clamped.left };
+            return next.left === current.left && next.top === current.top ? current : next;
+        });
+    }, [columns, rows]);
+    return (
+    // paddingTop keeps the centered frame below the information bar even
+    // in short terminals where centering would push it into row 1.
+    React.createElement(Box, { width: "100%", height: "100%", paddingTop: 1, justifyContent: "center", alignItems: "center" },
+        React.createElement(Box, { ref: frameRef, position: pos ? "absolute" : undefined, top: pos?.top, left: pos?.left, flexDirection: "column", borderStyle: "bold", borderColor: dragging ? "green" : "white", 
+            // Match the editor surface so dialogs read as part of it.
+            backgroundColor: "#1e1e1e", borderBackgroundColor: "#1e1e1e", width: width, alignItems: "center", paddingX: 4, paddingY: 1, gap: 1 },
+            React.createElement(Text, { bold: true }, title),
+            children,
+            footer)));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "blots-editor",
-	"version": "0.0.13",
+	"version": "0.0.15",
 	"description": "A lightweight Markdown editor for the terminal, built on ink-cartridge",
 	"type": "module",
 	"main": "./dist/index.js",

package/dist/view/command-bar.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-/**
- * Modal command bar (like Helix's `:` prompt). Rendered as a modal layer
- * element, so it exclusively owns the keyboard while open — the editor's
- * bindings (including the insert-mode `*` wildcard) stay dormant.
- */
-export declare function CommandBar(): React.JSX.Element;

package/dist/view/information-bar.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-export type InformationBarProps = {
-    mode: string;
-    cursor?: {
-        line: number;
-        column: number;
-    };
-};
-/** Status bar: current mode (live) plus the cursor's 1-based position. */
-export declare function InformationBar({ mode, cursor }: InformationBarProps): React.JSX.Element;

package/dist/view/information-bar.js

@@ -1,13 +0,0 @@
-import { Box, Text } from "ink";
-import React from "react";
-/** Status bar: current mode (live) plus the cursor's 1-based position. */
-export function InformationBar({ mode, cursor }) {
-    return (React.createElement(Box, { width: "100%", height: 1, backgroundColor: "blue", flexDirection: "row", paddingLeft: 2 },
-        React.createElement(Text, { color: "white", bold: true }, mode),
-        cursor ? (React.createElement(Text, { color: "white" },
-            "  ",
-            "Ln ",
-            cursor.line + 1,
-            ", Col ",
-            cursor.column + 1)) : null));
-}

package/dist/view/modal-frame.js

@@ -1,43 +0,0 @@
-import { Box, Text, useWindowSize } from "ink";
-import { useMouseRegion } from "ink-cartridge";
-import React, { useRef, useState } from "react";
-import { clampFrame } from "./frame-clamp.js";
-/**
- * Shared draggable modal frame used by the language and sensitivity pickers.
- *
- * Centered by flex layout until the user grabs it, then switches to absolute
- * positioning and follows the cursor (clamped to the terminal). Border turns
- * green while dragging. Callers provide the title, body and optional footer.
- */
-export function ModalFrame({ title, children, footer, width = 36, }) {
-    const { columns, rows } = useWindowSize();
-    // null = centered by flex layout; set once dragging starts so the frame
-    // keeps following the cursor via absolute positioning (0-based coords).
-    const [pos, setPos] = useState(null);
-    const [dragging, setDragging] = useState(false);
-    // Where inside the frame the cursor was grabbed, so the frame doesn't
-    // jump so its top-left lands under the cursor on the first drag move.
-    const grabOffsetRef = useRef({ dx: 0, dy: 0 });
-    const frameRef = useMouseRegion({
-        onDragStart: (event, rect) => {
-            grabOffsetRef.current = {
-                dx: event.x - rect.x,
-                dy: event.y - rect.y,
-            };
-            // Switch from flex centering to absolute positioning at the
-            // current rect — seamless, no jump on the first frame.
-            setPos({ top: rect.y - 1, left: rect.x - 1 });
-            setDragging(true);
-        },
-        onDragMove: (event, rect) => {
-            const { dx, dy } = grabOffsetRef.current;
-            setPos(clampFrame(event.x - dx - 1, event.y - dy - 1, columns, rows, rect.width, rect.height));
-        },
-        onDragEnd: () => setDragging(false),
-    });
-    return (React.createElement(Box, { width: "100%", height: "100%", justifyContent: "center", alignItems: "center" },
-        React.createElement(Box, { ref: frameRef, position: pos ? "absolute" : undefined, top: pos?.top, left: pos?.left, flexDirection: "column", borderStyle: "bold", borderColor: dragging ? "green" : "white", backgroundColor: "black", width: width, alignItems: "center", paddingX: 4, paddingY: 1, gap: 1 },
-            React.createElement(Text, { bold: true }, title),
-            children,
-            footer)));
-}

package/dist/view/settings.d.ts

@@ -1,2 +0,0 @@
-import React from "react";
-export declare function Settings(): React.JSX.Element;

package/dist/view/tool-bar.d.ts

@@ -1,51 +0,0 @@
-import React from "react";
-import type { XtermMouseEvent } from "@cartridge-engine/keyboard-engine";
-/**
- * Props for a single tool button.
- *
- * @prop priority - Hit-test priority over whatever sits underneath (the editor
- *   surface). Buttons must win so clicking them does not also place the cursor.
- * @prop onClick - Called on mouse click and on ctrl+enter selection; the event
- *   is absent for the keyboard path.
- * @prop text - The text to display on the button.
- * @prop focused - Keyboard focus (normal-mode navigation); overrides hover.
- * @prop onDragStart/onDragMove/onDragEnd - Forwarded from the toolbar. The
- *   engine captures a drag on the pressed region only, so buttons must carry
- *   the drag handlers or dragging from a button would not move the bar.
- * @prop dragging - The bar is being dragged; buttons tint green like hover.
- */
-export type ToolButtonProps = {
-    priority: number;
-    onClick: (event?: XtermMouseEvent) => void;
-    text: string;
-    focused?: boolean;
-    onDragStart?: (event: XtermMouseEvent) => void;
-    onDragMove?: (event: XtermMouseEvent) => void;
-    onDragEnd?: (event: XtermMouseEvent) => void;
-    dragging?: boolean;
-};
-/** One tool entry; the list is the extension point for future tools. */
-export type Tool = {
-    id: string;
-    /** i18n key for the button label. */
-    labelKey: string;
-    /** Placeholder until the file-tree feature lands. */
-    onClick: (event?: XtermMouseEvent) => void;
-};
-export type ToolBarProps = {
-    /** Current keyboard mode, passed down by the editor; drives focus display. */
-    mode?: string | null;
-    /** Tools to render, centered in the bar. Defaults to the file-tree entry. */
-    tools?: Tool[];
-};
-/**
- * Floating toolbar, bottom-center of the terminal until the user drags it.
- * Dragging switches it to absolute positioning and clamps it inside the
- * terminal view (clampFrame). Purely presentational for now: one centered
- * button with hover/focus states. The editor owns the layer that hosts this
- * bar (and the ctrl+tab toggle); this component only adds the normal-mode
- * keyboard navigation (ctrl+left/ctrl+right move the focus ring, ctrl+enter
- * selects). Insert mode stays mouse-only because those bindings are
- * mode-restricted and never fire there.
- */
-export declare function ToolBar({ mode, tools }: ToolBarProps): React.JSX.Element;

package/dist/view/tool-bar.js

@@ -1,92 +0,0 @@
-import { Box, Text, measureElement, useWindowSize } from "ink";
-import { useI18n, useKeyboard, useMouseRegion } from "ink-cartridge";
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { clampFrame } from "./frame-clamp.js";
-function ToolButton({ priority, onClick, text, focused = false, onDragStart, onDragMove, onDragEnd, dragging = false, }) {
-    const [hover, setHover] = useState(false);
-    const ref = useMouseRegion({
-        onClick: (event) => onClick(event),
-        onEnter: () => setHover(true),
-        onLeave: () => setHover(false),
-        onDragStart,
-        onDragMove,
-        onDragEnd,
-    }, { priority });
-    // Focus is the keyboard state, so it outranks the transient hover color.
-    const borderColor = focused ? "blue" : hover || dragging ? "green" : "white";
-    return (React.createElement(Box, { ref: ref, borderColor: borderColor, borderStyle: "bold", 
-        // Match the editor's surface so the floating bar reads as part of it.
-        backgroundColor: "#1e1e1e", height: "100%", justifyContent: "center", alignItems: "center", paddingLeft: 2, paddingRight: 2 },
-        React.createElement(Text, null, text)));
-}
-const DEFAULT_TOOLS = [
-    {
-        id: "file-tree",
-        labelKey: "toolbar.fileTree",
-        onClick: () => {
-            // Business logic (opening the file tree) lands here later.
-        },
-    },
-];
-/**
- * Floating toolbar, bottom-center of the terminal until the user drags it.
- * Dragging switches it to absolute positioning and clamps it inside the
- * terminal view (clampFrame). Purely presentational for now: one centered
- * button with hover/focus states. The editor owns the layer that hosts this
- * bar (and the ctrl+tab toggle); this component only adds the normal-mode
- * keyboard navigation (ctrl+left/ctrl+right move the focus ring, ctrl+enter
- * selects). Insert mode stays mouse-only because those bindings are
- * mode-restricted and never fire there.
- */
-export function ToolBar({ mode = null, tools = DEFAULT_TOOLS }) {
-    const { rows, columns } = useWindowSize();
-    const { t } = useI18n();
-    const { boundKeyboard } = useKeyboard();
-    const [activeIndex, setActiveIndex] = useState(0);
-    // null = bar sits at the bottom-center via flex layout; once the user
-    // grabs it, absolute positioning takes over so it follows the cursor.
-    const [pos, setPos] = useState(null);
-    const [dragging, setDragging] = useState(false);
-    const barRef = useRef(null);
-    // Grab offset (where inside the bar the cursor went down) plus the bar's
-    // size at grab time, kept in a ref so drag moves need no re-measurement.
-    const grabRef = useRef({ dx: 0, dy: 0, width: 0, height: 0 });
-    const startDrag = useCallback((event) => {
-        const node = barRef.current;
-        if (!node) {
-            return;
-        }
-        // Measure the bar itself, not the hit region — a button may be the
-        // captured target, and its rect would put the bar's corner at the
-        // button's corner.
-        const m = measureElement(node);
-        grabRef.current = {
-            dx: event.x - m.x - 1,
-            dy: event.y - m.y - 1,
-            width: m.width,
-            height: m.height,
-        };
-        // Switch from flex centering to absolute positioning at the current
-        // rect — seamless, no jump on the first frame.
-        setPos({ top: m.y, left: m.x });
-        setDragging(true);
-    }, []);
-    const moveDrag = useCallback((event) => {
-        const { dx, dy, width, height } = grabRef.current;
-        setPos(clampFrame(event.x - dx - 1, event.y - dy - 1, columns, rows, width, height));
-    }, [columns, rows]);
-    const endDrag = useCallback(() => setDragging(false), []);
-    const showFocus = mode === "normal";
-    useEffect(() => {
-        const unbinds = [
-            boundKeyboard(["ctrl+left"], () => setActiveIndex((i) => (i - 1 + tools.length) % tools.length), { mode: "normal" }),
-            boundKeyboard(["ctrl+right"], () => setActiveIndex((i) => (i + 1) % tools.length), { mode: "normal" }),
-            boundKeyboard(["ctrl+return"], () => tools[activeIndex]?.onClick(), {
-                mode: "normal",
-            }),
-        ];
-        return () => unbinds.forEach((fn) => fn());
-    }, [boundKeyboard, tools, activeIndex]);
-    return (React.createElement(Box, { width: "100%", height: "100%", justifyContent: "center", alignItems: "flex-end" },
-        React.createElement(Box, { ref: barRef, position: pos ? "absolute" : undefined, top: pos?.top, left: pos?.left, height: 4, flexDirection: "row", justifyContent: "center", alignItems: "center" }, tools.map((tool, index) => (React.createElement(ToolButton, { key: tool.id, text: t(tool.labelKey), priority: 1, focused: showFocus && index === activeIndex, onClick: tool.onClick, dragging: dragging, onDragStart: startDrag, onDragMove: moveDrag, onDragEnd: endDrag }))))));
-}