@dropsh/plugin-tui 0.5.7 → 0.5.8

package/dist/plugins/tui/src/browse-app.d.ts

@@ -0,0 +1,7 @@
+import type React from "react";
+import type { Router } from "./router.js";
+export interface BrowseProps {
+    router: Router;
+    onExit: () => void;
+}
+export declare function Browse({ router, onExit }: BrowseProps): React.ReactElement;

package/dist/plugins/tui/src/browse-app.js

@@ -1,11 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text, useInput } from "ink";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { FocusRegistryProvider, useFocusRegistry } from "./link.js";
 // Inner component: has access to the focus registry so Enter can read the
 // focused link target and ask the router to navigate to it.
 function Keys({ router, onExit, focusedIndex, setFocusedIndex, bump, setError, setNavSeq, }) {
     const reg = useFocusRegistry();
+    // Guards against a second Enter landing while a navigation is still pending,
+    // which would push a duplicate screen onto the router stack.
+    const navigating = useRef(false);
     useInput((input, key) => {
         if (input === "q" || key.escape) {
             const hasMore = router.back();
@@ -24,8 +27,11 @@ function Keys({ router, onExit, focusedIndex, setFocusedIndex, bump, setError, s
         if (key.downArrow)
             setFocusedIndex((i) => Math.min(Math.max(0, reg.count() - 1), i + 1));
         if (key.return) {
+            if (navigating.current)
+                return;
             const target = reg.targetAt(focusedIndex);
             if (target) {
+                navigating.current = true;
                 void router
                     .navigate(target.route, target.params)
                     .then(() => {
@@ -37,6 +43,9 @@ function Keys({ router, onExit, focusedIndex, setFocusedIndex, bump, setError, s
                     .catch((err) => {
                     setError(err instanceof Error ? err.message : String(err));
                     bump();
+                })
+                    .finally(() => {
+                    navigating.current = false;
                 });
             }
         }
@@ -49,6 +58,14 @@ export function Browse({ router, onExit }) {
     const [error, setError] = useState(null);
     const [navSeq, setNavSeq] = useState(0);
     const bump = () => setNonce((n) => n + 1);
+    // Surface controller-initiated (fire-and-forget) navigation errors on the
+    // same red error line as host-level ones.
+    useEffect(() => {
+        router.setErrorHandler((msg) => {
+            setError(msg);
+            setNonce((n) => n + 1);
+        });
+    }, [router]);
     const element = router.current();
     return (_jsxs(FocusRegistryProvider, { focusedIndex: focusedIndex, children: [_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { flexDirection: "column", children: element }, navSeq), error !== null ? _jsxs(Text, { color: "red", children: ["Error: ", error] }) : null, _jsx(Text, { dimColor: true, children: "(\u2191/\u2193: move, enter: open, q/esc: back)" })] }), _jsx(Keys, { router: router, onExit: onExit, focusedIndex: focusedIndex, setFocusedIndex: setFocusedIndex, bump: bump, setError: setError, setNavSeq: setNavSeq })] }));
 }

package/dist/plugins/tui/src/entity-list.d.ts

@@ -0,0 +1,12 @@
+import type { JsonApiResource } from "dropsh/plugin";
+import { type ReactElement } from "react";
+import type { BuildContext } from "./types.js";
+export declare abstract class TuiEntityList {
+    static entityType: string;
+    static bundle?: string;
+    abstract build(resources: JsonApiResource[], ctx: BuildContext): ReactElement;
+}
+export declare class GenericEntityList extends TuiEntityList {
+    static entityType: string;
+    build(resources: JsonApiResource[], ctx: BuildContext): ReactElement;
+}

package/dist/plugins/tui/src/entity-view.d.ts

@@ -0,0 +1,14 @@
+import type { JsonApiResource } from "dropsh/plugin";
+import { type ReactElement } from "react";
+import type { BuildContext, ViewModeMap } from "./types.js";
+export declare abstract class TuiEntityView {
+    static entityType: string;
+    static bundle?: string;
+    static viewModes: ViewModeMap;
+    abstract build(entity: JsonApiResource, ctx: BuildContext): ReactElement;
+}
+export declare class GenericEntityView extends TuiEntityView {
+    static entityType: string;
+    static viewModes: ViewModeMap;
+    build(entity: JsonApiResource, ctx: BuildContext): ReactElement;
+}

package/dist/plugins/tui/src/entity-view.js

@@ -1,4 +1,5 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { renderMarkdown } from "@dropsh/plugin-markdown/render";
 import { Box, Text } from "ink";
 import { splitType } from "./jsonapi-type.js";
 import { TuiLink } from "./link.js";
@@ -11,9 +12,21 @@ export class GenericEntityView extends TuiEntityView {
     static entityType = "*";
     static viewModes = { default: {} };
     build(entity, ctx) {
-        const attrs = entity.attributes ?? {};
         const rels = entity.relationships ?? {};
-        return (_jsxs(Box, { flexDirection: "column", children: [Object.entries(attrs).map(([key, value]) => (_jsxs(Text, { children: [key, ": ", typeof value === "string" ? value : JSON.stringify(value)] }, `a:${key}`))), Object.entries(rels).map(([key, rel]) => {
+        // Reuse the markdown renderer for the attribute pane (AC: "the detail pane
+        // reuses the markdown renderer"). Relationships are stripped from the copy
+        // fed to markdown so they stay focusable `TuiLink`s below, keeping in-pane
+        // navigation working instead of the markdown renderer's inert `[type/id]`.
+        const attrDoc = {
+            data: {
+                type: entity.type,
+                id: entity.id,
+                ...(entity.attributes ? { attributes: entity.attributes } : {}),
+            },
+        };
+        const renderCtx = { command: "read", viewMode: ctx.viewMode };
+        const markdown = renderMarkdown(attrDoc, renderCtx);
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: markdown }), Object.entries(rels).map(([key, rel]) => {
                     const data = rel.data;
                     if (!data || Array.isArray(data))
                         return _jsxs(Text, { children: [key, ": \u2014"] }, `r:${key}`);

package/dist/plugins/tui/src/index.d.ts

@@ -0,0 +1,14 @@
+import type { DropSHPlugin, JsonApiDocument, RenderContext } from "dropsh/plugin";
+import type { TuiSubPlugin } from "./types.js";
+export { GenericEntityList, TuiEntityList } from "./entity-list.js";
+export { GenericEntityView, TuiEntityView } from "./entity-view.js";
+export { TuiLink } from "./link.js";
+export type { BuildContext, LinkDescriptor, TuiController, TuiRoute, TuiSubPlugin, ViewModeMap, } from "./types.js";
+export interface TuiOptions {
+    plugins?: TuiSubPlugin[];
+}
+export declare function initialTarget(doc: JsonApiDocument, ctx: RenderContext): {
+    route: string;
+    params: Record<string, string>;
+};
+export declare function tuiPlugin(tuiOpts?: TuiOptions): DropSHPlugin;

package/dist/plugins/tui/src/index.js

@@ -47,6 +47,7 @@ export function tuiPlugin(tuiOpts = {}) {
     return {
         id: "tui",
         requiredModules: [],
+        dependencies: [{ plugin: "@dropsh/plugin-markdown" }],
         async extendSchema(_entityType, _bundle, schema) {
             return schema;
         },

package/dist/plugins/tui/src/jsonapi-type.d.ts

@@ -0,0 +1,6 @@
+import type { JsonApiResource } from "dropsh/plugin";
+export declare function splitType(type: string): {
+    entityType: string;
+    bundle?: string;
+};
+export declare function label(res: JsonApiResource): string;

package/dist/plugins/tui/src/link.d.ts

@@ -0,0 +1,20 @@
+import type React from "react";
+import type { LinkDescriptor } from "./types.js";
+interface FocusRegistry {
+    register(id: symbol, target: LinkDescriptor): void;
+    unregister(id: symbol): void;
+    indexOf(id: symbol): number;
+    count(): number;
+    focusedIndex: number;
+    targetAt(i: number): LinkDescriptor | undefined;
+}
+export declare function useFocusRegistry(): FocusRegistry;
+export declare function FocusRegistryProvider({ focusedIndex, children, }: {
+    focusedIndex?: number;
+    children: React.ReactNode;
+}): React.ReactElement;
+export declare function TuiLink({ target, children, }: {
+    target: LinkDescriptor;
+    children: React.ReactNode;
+}): React.ReactElement;
+export {};

package/dist/plugins/tui/src/registry.d.ts

@@ -0,0 +1,7 @@
+import type { EntityListClass, EntityViewClass, TuiRoute, TuiSubPlugin } from "./types.js";
+export interface Registry {
+    resolveView(entityType: string, bundle?: string): EntityViewClass;
+    resolveList(entityType: string, bundle?: string): EntityListClass;
+    routes: Map<string, TuiRoute>;
+}
+export declare function buildRegistry(plugins: TuiSubPlugin[]): Registry;

package/dist/plugins/tui/src/registry.js

@@ -23,7 +23,7 @@ function coreRoutes() {
         path: "/{type}/{bundle}/{id}",
         controller: async (params, ctx) => {
             const ViewClass = ctx.resolveView(params.type, params.bundle);
-            const include = ViewClass?.viewModes?.[ctx.viewMode]?.include;
+            const include = ViewClass.viewModes[ctx.viewMode]?.include;
             const path = params.bundle
                 ? `${params.type}/${params.bundle}/${params.id}`
                 : `${params.type}/${params.id}`;

package/dist/plugins/tui/src/router.d.ts

@@ -0,0 +1,15 @@
+import type { JsonApiClient } from "dropsh/plugin";
+import type { ReactElement } from "react";
+import type { Registry } from "./registry.js";
+export interface Router {
+    stackDepth(): number;
+    current(): ReactElement | null;
+    navigate(route: string, params: Record<string, string>, seededDoc?: import("dropsh/plugin").JsonApiDocument): Promise<void>;
+    back(): boolean;
+    setErrorHandler(fn: (message: string) => void): void;
+}
+export declare function createRouter(opts: {
+    registry: Registry;
+    client: JsonApiClient;
+    viewMode: string;
+}): Router;

package/dist/plugins/tui/src/router.js

@@ -1,5 +1,8 @@
 export function createRouter(opts) {
     const stack = [];
+    let errorHandler = (message) => {
+        console.error(`tui navigation error: ${message}`);
+    };
     async function navigate(routeName, params, seededDoc) {
         const route = opts.registry.routes.get(routeName);
         if (!route)
@@ -10,8 +13,11 @@ export function createRouter(opts) {
             ...(seededDoc !== undefined ? { seededDoc } : {}),
             navigate: (r, p) => {
                 // Host-level navigation surfaces errors in the UI; a controller-initiated
-                // navigation failure must not become an unhandled rejection / crash.
-                void navigate(r, p).catch(() => { });
+                // navigation failure must not become an unhandled rejection / crash, but
+                // it is reported through the registered error handler, not swallowed.
+                void navigate(r, p).catch((err) => {
+                    errorHandler(err instanceof Error ? err.message : String(err));
+                });
             },
             resolveView: opts.registry.resolveView,
             resolveList: opts.registry.resolveList,
@@ -27,5 +33,8 @@ export function createRouter(opts) {
             stack.pop();
             return stack.length > 0;
         },
+        setErrorHandler(fn) {
+            errorHandler = fn;
+        },
     };
 }

package/dist/plugins/tui/src/types.d.ts

@@ -0,0 +1,49 @@
+import type { JsonApiClient, JsonApiDocument } from "dropsh/plugin";
+import type { ReactElement } from "react";
+export interface LinkDescriptor {
+    route: string;
+    params: Record<string, string>;
+}
+export interface BuildContext {
+    viewMode: string;
+    doc: JsonApiDocument;
+    link(route: string, params: Record<string, string>): LinkDescriptor;
+}
+export type ViewModeMap = Record<string, {
+    include?: string[];
+}>;
+export interface ControllerContext {
+    client: JsonApiClient;
+    viewMode: string;
+    seededDoc?: JsonApiDocument;
+    navigate(route: string, params: Record<string, string>): void;
+    resolveView(entityType: string, bundle?: string): EntityViewClass;
+    resolveList(entityType: string, bundle?: string): EntityListClass;
+}
+export type TuiController = (params: Record<string, string>, ctx: ControllerContext) => Promise<ReactElement>;
+export interface TuiRoute {
+    name: string;
+    path: string;
+    controller: TuiController;
+}
+export interface EntityViewClass {
+    entityType: string;
+    bundle?: string;
+    viewModes: ViewModeMap;
+    new (): {
+        build(entity: import("dropsh/plugin").JsonApiResource, ctx: BuildContext): ReactElement;
+    };
+}
+export interface EntityListClass {
+    entityType: string;
+    bundle?: string;
+    new (): {
+        build(resources: import("dropsh/plugin").JsonApiResource[], ctx: BuildContext): ReactElement;
+    };
+}
+export type EntityHandlerClass = EntityViewClass | EntityListClass;
+export interface TuiSubPlugin {
+    id: string;
+    entities?: EntityHandlerClass[];
+    routes?: TuiRoute[];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dropsh/plugin-tui",
-  "version": "0.5.7",
+  "version": "0.5.8",
   "type": "module",
   "main": "./dist/plugins/tui/src/index.js",
   "exports": {
@@ -18,14 +18,14 @@
   "dependencies": {
     "ink": "^5.0.0",
     "react": "^18.3.0",
-    "@dropsh/plugin-markdown": "0.5.7"
+    "@dropsh/plugin-markdown": "0.5.8"
   },
   "devDependencies": {
     "@types/react": "^18.3.0",
     "ink-testing-library": "^4.0.0",
     "typescript": "^5.6.0",
     "vitest": "^2.1.0",
-    "dropsh": "0.5.7"
+    "dropsh": "0.5.8"
   },
   "scripts": {
     "build": "tsc",