@mak-98/dirvi-app 0.0.0-stage → 0.11.0-beta.13

package/dist/ui/app-screen-renderer.d.ts

@@ -0,0 +1,27 @@
+import type { ComponentType } from 'react';
+import type { Config } from 'dirvi-apis';
+import type { Feedback, FeedbackApi, InputModeState, UserInput } from 'dirvi-lib';
+import { View } from './view.js';
+/**
+ * State and callbacks required by a React host screen.
+ *
+ * The screen owns host-specific concerns such as input subscription, viewport
+ * measurement, and host exit. App owns Dirvi state transitions and effects.
+ */
+export type AppScreenProps = {
+    readonly view: View;
+    readonly feedback: Feedback | undefined;
+    readonly feedbackApi: FeedbackApi;
+    readonly config: Config;
+    readonly inputState: InputModeState;
+    readonly handleInput: (userInput: UserInput) => void;
+    readonly onRowsChange: (rows: number) => void;
+};
+/**
+ * A host-specific React implementation of the Dirvi application screen.
+ *
+ * InkScreen is the terminal implementation. A future web or React Native host
+ * can provide a different component that conforms to this same contract.
+ */
+export type AppScreenRenderer = ComponentType<AppScreenProps>;
+//# sourceMappingURL=app-screen-renderer.d.ts.map

package/dist/ui/app-screen-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-screen-renderer.d.ts","sourceRoot":"","sources":["../../src/ui/app-screen-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,KAAK,EACV,QAAQ,EACR,WAAW,EACX,cAAc,EACd,SAAS,EACV,MAAM,WAAW,CAAC;AAEnB,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC;;;;;GAKG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC;IACpB,QAAQ,CAAC,QAAQ,EAAE,QAAQ,GAAG,SAAS,CAAC;IACxC,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAC;IAClC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,UAAU,EAAE,cAAc,CAAC;IAEpC,QAAQ,CAAC,WAAW,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACrD,QAAQ,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C,CAAC;AAEF;;;;;GAKG;AACH,MAAM,MAAM,iBAAiB,GAAG,aAAa,CAAC,cAAc,CAAC,CAAC"}

package/dist/ui/app-screen-renderer.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/color-resolver.d.ts

@@ -0,0 +1,3 @@
+import type { ColorConfig } from 'dirvi-apis';
+export declare function colorConfigToInkColor(colorConfig: ColorConfig, colorDepth?: number): string;
+//# sourceMappingURL=color-resolver.d.ts.map

package/dist/ui/color-resolver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-resolver.d.ts","sourceRoot":"","sources":["../../src/ui/color-resolver.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAuB9C,wBAAgB,qBAAqB,CACnC,WAAW,EAAE,WAAW,EACxB,UAAU,GAAE,MAAuC,GAClD,MAAM,CA2BR"}

package/dist/ui/color-resolver.js

@@ -0,0 +1,61 @@
+const ansi16Colors = [
+    [0, 0, 0],
+    [205, 49, 49],
+    [13, 188, 121],
+    [229, 229, 16],
+    [36, 114, 200],
+    [188, 63, 188],
+    [17, 168, 205],
+    [229, 229, 229],
+    [102, 102, 102],
+    [241, 76, 76],
+    [35, 209, 139],
+    [245, 245, 67],
+    [59, 142, 234],
+    [214, 112, 214],
+    [41, 184, 219],
+    [255, 255, 255],
+];
+export function colorConfigToInkColor(colorConfig, colorDepth = process.stderr.getColorDepth()) {
+    const { hex, ansi256, basic } = colorConfig;
+    if (colorDepth >= 24 && hex !== undefined) {
+        return hex;
+    }
+    if (colorDepth >= 8 && ansi256 !== undefined) {
+        return toHex(ansi256ToRgb(ansi256));
+    }
+    if (basic !== undefined) {
+        return basic;
+    }
+    // A more specific value was not configured. Let Ink/Chalk reduce the
+    // available richer value for the current terminal where necessary.
+    if (ansi256 !== undefined) {
+        return toHex(ansi256ToRgb(ansi256));
+    }
+    if (hex !== undefined) {
+        return hex;
+    }
+    // ColorConfigSchema guarantees at least one profile is configured.
+    throw new Error('Expected at least one terminal color profile');
+}
+function ansi256ToRgb(color) {
+    if (color < 16) {
+        return ansi16Colors[color];
+    }
+    if (color >= 232) {
+        const component = 8 + (color - 232) * 10;
+        return [component, component, component];
+    }
+    const cubeColor = color - 16;
+    const red = Math.floor(cubeColor / 36);
+    const green = Math.floor((cubeColor % 36) / 6);
+    const blue = cubeColor % 6;
+    const components = [0, 95, 135, 175, 215, 255];
+    return [components[red], components[green], components[blue]];
+}
+function toHex([red, green, blue]) {
+    return `#${toHexComponent(red)}${toHexComponent(green)}${toHexComponent(blue)}`;
+}
+function toHexComponent(component) {
+    return component.toString(16).padStart(2, '0');
+}

package/dist/ui/hooks/useView.d.ts

@@ -0,0 +1,5 @@
+import type { CursorMethods, NavBranch, NavMethods, SerializableKey, State, StateMethods } from 'dirvi-lib';
+import type { PresentNode } from 'dirvi-apis';
+import { View } from '../view.js';
+export declare function useView<Id extends SerializableKey, Value>(navNode: NavBranch<Id>, state: State<Id, Value>, stateApi: StateMethods<Id, Value>, navNodeApi: NavMethods<Id, Value>, cursorMethods: CursorMethods<Id>, rowCount: number, presentNode: PresentNode<Id>): View;
+//# sourceMappingURL=useView.d.ts.map

package/dist/ui/hooks/useView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useView.d.ts","sourceRoot":"","sources":["../../../src/ui/hooks/useView.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,aAAa,EACb,SAAS,EACT,UAAU,EACV,eAAe,EACf,KAAK,EAAE,YAAY,EACpB,MAAM,WAAW,CAAC;AACnB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAgB,MAAM,YAAY,CAAC;AAMhD,wBAAgB,OAAO,CAAC,EAAE,SAAS,eAAe,EAAE,KAAK,EACvD,OAAO,EAAE,SAAS,CAAC,EAAE,CAAC,EACtB,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,EACvB,QAAQ,EAAE,YAAY,CAAC,EAAE,EAAE,KAAK,CAAC,EACjC,UAAU,EAAE,UAAU,CAAC,EAAE,EAAE,KAAK,CAAC,EACjC,aAAa,EAAE,aAAa,CAAC,EAAE,CAAC,EAChC,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,WAAW,CAAC,EAAE,CAAC,GAC3B,IAAI,CAyBN"}

package/dist/ui/hooks/useView.js

@@ -0,0 +1,32 @@
+import { useRef } from 'react';
+import { View } from '../view.js';
+const STATUS_BAR_HEIGHT = 1;
+// Hooks that keeps Ref of the viewport's start, and returns View sliced to
+// only the rows that should be visible.
+export function useView(navNode, state, stateApi, navNodeApi, cursorMethods, rowCount, presentNode) {
+    const viewportStartRef = useRef(0);
+    const viewportHeight = Math.max(0, rowCount - STATUS_BAR_HEIGHT);
+    if (viewportHeight === 0) {
+        return { rows: [] };
+    }
+    const rows = View.createRows(navNode, navNodeApi, stateApi.getCursor(state), cursorMethods, presentNode);
+    viewportStartRef.current = viewportStart(rows, viewportHeight, viewportStartRef.current);
+    return View.create(navNode, navNodeApi, stateApi.getCursor(state), cursorMethods, viewportHeight, viewportStartRef.current, presentNode);
+}
+function viewportStart(rows, viewportHeight, currentViewportStart) {
+    const scrollMargin = 3;
+    const cursorIndex = rows.findIndex((row) => row.cursor);
+    const maximumViewportStart = Math.max(0, rows.length - viewportHeight);
+    let viewportStart = currentViewportStart;
+    if (cursorIndex >= 0) {
+        const firstVisibleCursorIndex = viewportStart + scrollMargin;
+        const lastVisibleCursorIndex = viewportStart + viewportHeight - 1 - scrollMargin;
+        if (cursorIndex < firstVisibleCursorIndex) {
+            viewportStart = cursorIndex - scrollMargin;
+        }
+        else if (cursorIndex > lastVisibleCursorIndex) {
+            viewportStart = cursorIndex - viewportHeight + 1 + scrollMargin;
+        }
+    }
+    return Math.max(0, Math.min(viewportStart, maximumViewportStart));
+}

package/dist/ui/loading-screen-renderer.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentType } from 'react';
+export type LoadingScreenRenderer = ComponentType<{}>;
+//# sourceMappingURL=loading-screen-renderer.d.ts.map

package/dist/ui/loading-screen-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-screen-renderer.d.ts","sourceRoot":"","sources":["../../src/ui/loading-screen-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,MAAM,qBAAqB,GAAG,aAAa,CAAC,EAAE,CAAC,CAAC"}

package/dist/ui/loading-screen-renderer.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/view.d.ts

@@ -0,0 +1,28 @@
+import type { HighlightToken, PresentNode } from 'dirvi-apis';
+import type { Cursor, NavBranch, NavMethods, SerializableKey, CursorMethods } from 'dirvi-lib';
+type ViewRowBase = {
+    id: string;
+    indent: number;
+    content: string;
+    cursor: boolean;
+    selected: boolean;
+    highlight: HighlightToken;
+};
+export type ViewRow = (ViewRowBase & {
+    type: 'leaf';
+}) | (ViewRowBase & {
+    type: 'branch';
+    foldedCount: number;
+}) | (ViewRowBase & {
+    type: 'fold';
+    foldedCount: number;
+});
+export type View = {
+    rows: ViewRow[];
+};
+export declare const View: {
+    createRows<Id extends SerializableKey, Value>(rootNode: NavBranch<Id>, navNodeApi: NavMethods<Id, Value>, cursor: Cursor<Id>, cursorMethods: CursorMethods<Id>, presentNode: PresentNode<Id>): ViewRow[];
+    create<Id extends SerializableKey, Value>(rootNode: NavBranch<Id>, navNodeApi: NavMethods<Id, Value>, cursor: Cursor<Id>, cursorMethods: CursorMethods<Id>, viewportHeight: number, viewportStart: number, presentNode: PresentNode<Id>): View;
+};
+export {};
+//# sourceMappingURL=view.d.ts.map

package/dist/ui/view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.d.ts","sourceRoot":"","sources":["../../src/ui/view.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EACd,WAAW,EACZ,MAAM,YAAY,CAAC;AAEpB,OAAO,KAAK,EACV,MAAM,EAGN,SAAS,EAET,UAAU,EACV,eAAe,EAAE,aAAa,EAC/B,MAAM,WAAW,CAAC;AAEnB,KAAK,WAAW,GAAG;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,cAAc,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,OAAO,GACf,CAAC,WAAW,GAAG;IACb,IAAI,EAAE,MAAM,CAAC;CACd,CAAC,GACF,CAAC,WAAW,GAAG;IACb,IAAI,EAAE,QAAQ,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC,GACF,CAAC,WAAW,GAAG;IACb,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC,CAAC;AAEP,MAAM,MAAM,IAAI,GAAG;IACjB,IAAI,EAAE,OAAO,EAAE,CAAC;CACjB,CAAC;AASF,eAAO,MAAM,IAAI;eACJ,EAAE,SAAS,eAAe,EAAE,KAAK,YAChC,SAAS,CAAC,EAAE,CAAC,cACX,UAAU,CAAC,EAAE,EAAE,KAAK,CAAC,UACzB,MAAM,CAAC,EAAE,CAAC,iBACH,aAAa,CAAC,EAAE,CAAC,eACnB,WAAW,CAAC,EAAE,CAAC,GAC3B,OAAO,EAAE;WAwCL,EAAE,SAAS,eAAe,EAAE,KAAK,YAC5B,SAAS,CAAC,EAAE,CAAC,cACX,UAAU,CAAC,EAAE,EAAE,KAAK,CAAC,UACzB,MAAM,CAAC,EAAE,CAAC,iBACH,aAAa,CAAC,EAAE,CAAC,kBAChB,MAAM,iBACP,MAAM,eACR,WAAW,CAAC,EAAE,CAAC,GAC3B,IAAI;CAOR,CAAC"}

package/dist/ui/view.js

@@ -0,0 +1,131 @@
+function foldId(parentPath, firstId) {
+    return `fold:${JSON.stringify([...parentPath, firstId])}`;
+}
+export const View = {
+    createRows(rootNode, navNodeApi, cursor, cursorMethods, presentNode) {
+        const rootCursor = { path: [] };
+        const inlineFoldIds = new Set();
+        if (rootNode.children !== null) {
+            for (const position of navNodeApi.cursors(rootNode.children)) {
+                if (cursorMethods.isFoldCursor(position)) {
+                    inlineFoldIds.add(foldId(position.parentPath, position.firstId));
+                }
+            }
+        }
+        const rootRow = viewRowForEntry(rootNode, null, cursorMethods.equal(cursor, rootCursor), navNodeApi, presentNode, inlineFoldIds);
+        if (rootNode.children === null) {
+            return [rootRow];
+        }
+        return [
+            rootRow,
+            ...viewRowsAtNode(rootNode.children, [], navNodeApi, cursor, cursorMethods, presentNode, inlineFoldIds),
+        ];
+    },
+    create(rootNode, navNodeApi, cursor, cursorMethods, viewportHeight, viewportStart, presentNode) {
+        const rows = View.createRows(rootNode, navNodeApi, cursor, cursorMethods, presentNode);
+        return {
+            rows: rows.slice(viewportStart, viewportStart + viewportHeight),
+        };
+    },
+};
+/**
+ * Converts one NavNode and its descendants into display ViewRows.
+ *
+ * `parentPath` is the path of that directory. For example:
+ *
+ *   []              root directory
+ *   ['src']         root/src
+ *   ['src', 'lib']  root/src/lib
+ */
+function viewRowsAtNode(node, parentPath, navNodeApi, cursor, cursorMethods, presentNode, inlineFoldIds) {
+    const rows = [];
+    for (const entry of node.entries) {
+        if (navNodeApi.entryIsFold(entry)) {
+            const firstEntry = entry.folded[0];
+            // Match navigation's guard for empty or richer future fold contents.
+            if (firstEntry === undefined || navNodeApi.entryIsFold(firstEntry)) {
+                continue;
+            }
+            const id = foldId(parentPath, firstEntry.id);
+            // Unordered summaries belong to the parent, not separate rows.
+            if (!inlineFoldIds.has(id)) {
+                continue;
+            }
+            const entryCursor = {
+                parentPath: [...parentPath],
+                firstId: firstEntry.id,
+            };
+            // Reuse the first hidden entry's highlight until folds have a presenter.
+            const { highlight } = presentNode(firstEntry.id, navNodeApi.entryIsBranch(firstEntry));
+            rows.push({
+                id,
+                indent: parentPath.length + 1,
+                content: `… ${entry.folded.length} folded`,
+                cursor: cursorMethods.equal(cursor, entryCursor),
+                selected: false,
+                highlight,
+                type: 'fold',
+                foldedCount: entry.folded.length,
+            });
+            // Hidden descendants are never rendered separately.
+            continue;
+        }
+        const entryCursor = {
+            path: [...parentPath, entry.id],
+        };
+        const isCursor = cursorMethods.equal(cursor, entryCursor);
+        rows.push(viewRowForEntry(entry, parentPath, isCursor, navNodeApi, presentNode, inlineFoldIds));
+        // Case where there's no branches
+        if (!navNodeApi.entryIsBranch(entry) || entry.children === null) {
+            continue;
+        }
+        rows.push(...viewRowsAtNode(entry.children, [...parentPath, entry.id], navNodeApi, cursor, cursorMethods, presentNode, inlineFoldIds));
+    }
+    return rows;
+}
+function viewRowForEntry(entry, parentPath, cursor, navNodeApi, presentNode, inlineFoldIds) {
+    const id = entryId(parentPath ?? [], entry.id);
+    const indent = parentPath ? parentPath.length + 1 : 0;
+    const selected = false;
+    if (navNodeApi.entryIsBranch(entry)) {
+        const { content, highlight } = presentNode(entry.id, true);
+        const entryPath = parentPath === null ? [] : [...parentPath, entry.id];
+        const foldedCount = entry.children?.entries.reduce((count, entry) => {
+            if (!navNodeApi.entryIsFold(entry)) {
+                return count;
+            }
+            const firstEntry = entry.folded[0];
+            if (firstEntry === undefined || navNodeApi.entryIsFold(firstEntry)) {
+                return count;
+            }
+            // Ordered folds already have their own rows.
+            if (inlineFoldIds.has(foldId(entryPath, firstEntry.id))) {
+                return count;
+            }
+            return count + entry.folded.length;
+        }, 0) ?? 0;
+        return {
+            id,
+            indent,
+            selected,
+            cursor,
+            content: content,
+            highlight,
+            type: 'branch',
+            foldedCount,
+        };
+    }
+    const { content, highlight } = presentNode(entry.id, false);
+    return {
+        id,
+        indent,
+        selected,
+        cursor,
+        content,
+        highlight,
+        type: 'leaf',
+    };
+}
+function entryId(parentPath, entryName) {
+    return `entry:${JSON.stringify([...parentPath, entryName])}`;
+}

package/package.json

@@ -1,6 +1,37 @@
 {
   "name": "@mak-98/dirvi-app",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.11.0-beta.13",
+  "description": "Shared React application logic for dirvi hosts.",
+  "type": "module",
+  "license": "GPL-3.0-or-later",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "dirvi-apis": "0.11.0-beta.13",
+    "dirvi-lib": "0.11.0-beta.13",
+    "zod": "^4.4.3"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.20.1",
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
+    "typescript": "^5.0.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "format": "prettier . --write"
+  }
 }

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.