@tooee/layout 0.1.0

package/README.md

@@ -0,0 +1,5 @@
+# @tooee/layout
+
+Standard app chrome (title bar, status bar) for Tooee.
+
+Part of the [Tooee](https://github.com/gingerhendrix/tooee) monorepo. See the main repo for documentation.

package/dist/AppLayout.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode, RefObject } from "react";
+import type { ScrollBoxRenderable } from "@opentui/core";
+import type { StatusBarItem } from "./StatusBar.jsx";
+import type { SearchBarProps } from "./SearchBar.jsx";
+export interface AppLayoutSearchBar extends SearchBarProps {
+    active: boolean;
+}
+export interface AppLayoutProps {
+    titleBar?: {
+        title: string;
+        subtitle?: string;
+    };
+    statusBar: {
+        items: StatusBarItem[];
+    };
+    scrollRef?: RefObject<ScrollBoxRenderable | null>;
+    scrollProps?: {
+        stickyScroll?: boolean;
+        stickyStart?: "bottom" | "top";
+        focused?: boolean;
+    };
+    searchBar?: AppLayoutSearchBar;
+    overlay?: ReactNode;
+    children: ReactNode;
+}
+export declare function AppLayout({ titleBar, statusBar, scrollRef, scrollProps, searchBar, overlay, children, }: AppLayoutProps): ReactNode;
+//# sourceMappingURL=AppLayout.d.ts.map

package/dist/AppLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppLayout.d.ts","sourceRoot":"","sources":["../src/AppLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAA;AAGxD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAEpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAIrD,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACxD,MAAM,EAAE,OAAO,CAAA;CAChB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC/C,SAAS,EAAE;QAAE,KAAK,EAAE,aAAa,EAAE,CAAA;KAAE,CAAA;IACrC,SAAS,CAAC,EAAE,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAA;IACjD,WAAW,CAAC,EAAE;QACZ,YAAY,CAAC,EAAE,OAAO,CAAA;QACtB,WAAW,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;QAC9B,OAAO,CAAC,EAAE,OAAO,CAAA;KAClB,CAAA;IACD,SAAS,CAAC,EAAE,kBAAkB,CAAA;IAC9B,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,SAAS,EACT,WAAW,EACX,SAAS,EACT,OAAO,EACP,QAAQ,GACT,EAAE,cAAc,aAqChB"}

package/dist/AppLayout.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { TitleBar } from "./TitleBar.jsx";
+import { StatusBar } from "./StatusBar.jsx";
+import { SearchBar } from "./SearchBar.jsx";
+import { useTheme } from "@tooee/themes";
+import { useCurrentOverlay } from "@tooee/overlays";
+export function AppLayout({ titleBar, statusBar, scrollRef, scrollProps, searchBar, overlay, children, }) {
+    const { theme } = useTheme();
+    const contextOverlay = useCurrentOverlay();
+    const activeOverlay = overlay ?? contextOverlay;
+    return (_jsxs("box", { flexDirection: "column", width: "100%", height: "100%", backgroundColor: theme.background, children: [titleBar && _jsx(TitleBar, { title: titleBar.title, subtitle: titleBar.subtitle }), _jsxs("box", { style: { flexGrow: 1, position: "relative" }, children: [_jsx("scrollbox", { ref: scrollRef, style: { flexGrow: 1 }, stickyScroll: scrollProps?.stickyScroll, stickyStart: scrollProps?.stickyStart, focused: scrollProps?.focused ?? true, children: children }), activeOverlay && (_jsx("box", { position: "absolute", left: 0, top: 0, width: "100%", height: "100%", children: activeOverlay }))] }), searchBar?.active ? (_jsx(SearchBar, { query: searchBar.query, onQueryChange: searchBar.onQueryChange, onSubmit: searchBar.onSubmit, onCancel: searchBar.onCancel, matchCount: searchBar.matchCount, currentMatch: searchBar.currentMatch })) : (_jsx(StatusBar, { items: statusBar.items }))] }));
+}
+//# sourceMappingURL=AppLayout.js.map

package/dist/AppLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppLayout.js","sourceRoot":"","sources":["../src/AppLayout.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE3C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE3C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAoBnD,MAAM,UAAU,SAAS,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,SAAS,EACT,WAAW,EACX,SAAS,EACT,OAAO,EACP,QAAQ,GACO;IACf,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC5B,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAA;IAC1C,MAAM,aAAa,GAAG,OAAO,IAAI,cAAc,CAAA;IAC/C,OAAO,CACL,eAAK,aAAa,EAAC,QAAQ,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,eAAe,EAAE,KAAK,CAAC,UAAU,aACrF,QAAQ,IAAI,KAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,CAAC,QAAQ,GAAI,EAC7E,eAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,aAC/C,oBACE,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,EACtB,YAAY,EAAE,WAAW,EAAE,YAAY,EACvC,WAAW,EAAE,WAAW,EAAE,WAAW,EACrC,OAAO,EAAE,WAAW,EAAE,OAAO,IAAI,IAAI,YAEpC,QAAQ,GACC,EACX,aAAa,IAAI,CAChB,cAAK,QAAQ,EAAC,UAAU,EAAC,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,YACjE,aAAa,GACV,CACP,IACG,EACL,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,CACnB,KAAC,SAAS,IACR,KAAK,EAAE,SAAS,CAAC,KAAK,EACtB,aAAa,EAAE,SAAS,CAAC,aAAa,EACtC,QAAQ,EAAE,SAAS,CAAC,QAAQ,EAC5B,QAAQ,EAAE,SAAS,CAAC,QAAQ,EAC5B,UAAU,EAAE,SAAS,CAAC,UAAU,EAChC,YAAY,EAAE,SAAS,CAAC,YAAY,GACpC,CACH,CAAC,CAAC,CAAC,CACF,KAAC,SAAS,IAAC,KAAK,EAAE,SAAS,CAAC,KAAK,GAAI,CACtC,IACG,CACP,CAAA;AACH,CAAC"}

package/dist/SearchBar.d.ts

@@ -0,0 +1,10 @@
+export interface SearchBarProps {
+    query: string;
+    onQueryChange: (query: string) => void;
+    onSubmit: () => void;
+    onCancel: () => void;
+    matchCount?: number;
+    currentMatch?: number;
+}
+export declare function SearchBar({ query, onQueryChange, onSubmit, onCancel: _onCancel, matchCount, currentMatch, }: SearchBarProps): import("react").ReactNode;
+//# sourceMappingURL=SearchBar.d.ts.map

package/dist/SearchBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../src/SearchBar.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAa,EACb,QAAQ,EACR,QAAQ,EAAE,SAAS,EACnB,UAAU,EACV,YAAY,GACb,EAAE,cAAc,6BAoChB"}

package/dist/SearchBar.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { useTheme } from "@tooee/themes";
+export function SearchBar({ query, onQueryChange, onSubmit, onCancel: _onCancel, matchCount, currentMatch, }) {
+    const { theme } = useTheme();
+    const matchDisplay = matchCount !== undefined && matchCount > 0
+        ? `${(currentMatch ?? 0) + 1}/${matchCount}`
+        : matchCount === 0 && query.length > 0
+            ? "No matches"
+            : "";
+    return (_jsxs("box", { style: {
+            flexDirection: "row",
+            flexShrink: 0,
+            backgroundColor: theme.backgroundPanel,
+            paddingLeft: 1,
+            paddingRight: 1,
+        }, children: [_jsx("text", { content: "/", style: { fg: theme.accent } }), _jsx("input", { value: query, focused: true, onInput: onQueryChange, onSubmit: onSubmit, backgroundColor: "transparent", focusedBackgroundColor: "transparent", textColor: theme.text, cursorColor: theme.accent, cursorStyle: { style: "line", blinking: true }, style: { flexGrow: 1 } }), matchDisplay ? _jsx("text", { content: ` ${matchDisplay}`, style: { fg: theme.textMuted } }) : null] }));
+}
+//# sourceMappingURL=SearchBar.js.map

package/dist/SearchBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../src/SearchBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAWxC,MAAM,UAAU,SAAS,CAAC,EACxB,KAAK,EACL,aAAa,EACb,QAAQ,EACR,QAAQ,EAAE,SAAS,EACnB,UAAU,EACV,YAAY,GACG;IACf,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE5B,MAAM,YAAY,GAChB,UAAU,KAAK,SAAS,IAAI,UAAU,GAAG,CAAC;QACxC,CAAC,CAAC,GAAG,CAAC,YAAY,IAAI,CAAC,CAAC,GAAG,CAAC,IAAI,UAAU,EAAE;QAC5C,CAAC,CAAC,UAAU,KAAK,CAAC,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;YACpC,CAAC,CAAC,YAAY;YACd,CAAC,CAAC,EAAE,CAAA;IAEV,OAAO,CACL,eACE,KAAK,EAAE;YACL,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,CAAC;YACb,eAAe,EAAE,KAAK,CAAC,eAAe;YACtC,WAAW,EAAE,CAAC;YACd,YAAY,EAAE,CAAC;SAChB,aAED,eAAM,OAAO,EAAC,GAAG,EAAC,KAAK,EAAE,EAAE,EAAE,EAAE,KAAK,CAAC,MAAM,EAAE,GAAI,EACjD,gBACE,KAAK,EAAE,KAAK,EACZ,OAAO,QACP,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAC,aAAa,EAC7B,sBAAsB,EAAC,aAAa,EACpC,SAAS,EAAE,KAAK,CAAC,IAAI,EACrB,WAAW,EAAE,KAAK,CAAC,MAAM,EACzB,WAAW,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,EAC9C,KAAK,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,GACtB,EACD,YAAY,CAAC,CAAC,CAAC,eAAM,OAAO,EAAE,IAAI,YAAY,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,KAAK,CAAC,SAAS,EAAE,GAAI,CAAC,CAAC,CAAC,IAAI,IACxF,CACP,CAAA;AACH,CAAC"}

package/dist/StatusBar.d.ts

@@ -0,0 +1,10 @@
+interface StatusBarProps {
+    items: StatusBarItem[];
+}
+export interface StatusBarItem {
+    label: string;
+    value?: string;
+}
+export declare function StatusBar({ items }: StatusBarProps): import("react").ReactNode;
+export {};
+//# sourceMappingURL=StatusBar.d.ts.map

package/dist/StatusBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBar.d.ts","sourceRoot":"","sources":["../src/StatusBar.tsx"],"names":[],"mappings":"AAEA,UAAU,cAAc;IACtB,KAAK,EAAE,aAAa,EAAE,CAAA;CACvB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,EAAE,cAAc,6BAqBlD"}

package/dist/StatusBar.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { useTheme } from "@tooee/themes";
+export function StatusBar({ items }) {
+    const { theme } = useTheme();
+    return (_jsx("box", { style: {
+            flexDirection: "row",
+            flexShrink: 0,
+            backgroundColor: theme.backgroundPanel,
+            padding: 0,
+            paddingLeft: 1,
+            paddingRight: 1,
+        }, children: items.map((item, index) => (_jsxs("box", { style: { marginRight: 2, flexDirection: "row" }, children: [_jsx("text", { content: item.label, style: { fg: theme.textMuted } }), item.value && _jsx("text", { content: ` ${item.value}`, style: { fg: theme.text } })] }, index))) }));
+}
+//# sourceMappingURL=StatusBar.js.map

package/dist/StatusBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBar.js","sourceRoot":"","sources":["../src/StatusBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAWxC,MAAM,UAAU,SAAS,CAAC,EAAE,KAAK,EAAkB;IACjD,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC5B,OAAO,CACL,cACE,KAAK,EAAE;YACL,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,CAAC;YACb,eAAe,EAAE,KAAK,CAAC,eAAe;YACtC,OAAO,EAAE,CAAC;YACV,WAAW,EAAE,CAAC;YACd,YAAY,EAAE,CAAC;SAChB,YAEA,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,eAAiB,KAAK,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,aAC9D,eAAM,OAAO,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,KAAK,CAAC,SAAS,EAAE,GAAI,EAC5D,IAAI,CAAC,KAAK,IAAI,eAAM,OAAO,EAAE,IAAI,IAAI,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,KAAK,CAAC,IAAI,EAAE,GAAI,KAFrE,KAAK,CAGT,CACP,CAAC,GACE,CACP,CAAA;AACH,CAAC"}

package/dist/TitleBar.d.ts

@@ -0,0 +1,7 @@
+interface TitleBarProps {
+    title: string;
+    subtitle?: string;
+}
+export declare function TitleBar({ title, subtitle }: TitleBarProps): import("react").ReactNode;
+export {};
+//# sourceMappingURL=TitleBar.d.ts.map

package/dist/TitleBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TitleBar.d.ts","sourceRoot":"","sources":["../src/TitleBar.tsx"],"names":[],"mappings":"AAEA,UAAU,aAAa;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,aAAa,6BAiB1D"}

package/dist/TitleBar.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { useTheme } from "@tooee/themes";
+export function TitleBar({ title, subtitle }) {
+    const { theme } = useTheme();
+    return (_jsxs("box", { style: {
+            flexDirection: "row",
+            flexShrink: 0,
+            backgroundColor: theme.backgroundPanel,
+            padding: 0,
+            paddingLeft: 1,
+            paddingRight: 1,
+        }, children: [_jsx("text", { content: title, style: { fg: theme.primary } }), subtitle && _jsx("text", { content: ` — ${subtitle}`, style: { fg: theme.textMuted } })] }));
+}
+//# sourceMappingURL=TitleBar.js.map

package/dist/TitleBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TitleBar.js","sourceRoot":"","sources":["../src/TitleBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAOxC,MAAM,UAAU,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAiB;IACzD,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC5B,OAAO,CACL,eACE,KAAK,EAAE;YACL,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,CAAC;YACb,eAAe,EAAE,KAAK,CAAC,eAAe;YACtC,OAAO,EAAE,CAAC;YACV,WAAW,EAAE,CAAC;YACd,YAAY,EAAE,CAAC;SAChB,aAED,eAAM,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,KAAK,CAAC,OAAO,EAAE,GAAI,EACrD,QAAQ,IAAI,eAAM,OAAO,EAAE,MAAM,QAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,KAAK,CAAC,SAAS,EAAE,GAAI,IAC5E,CACP,CAAA;AACH,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { AppLayout } from "./AppLayout.jsx";
+export type { AppLayoutProps, AppLayoutSearchBar } from "./AppLayout.jsx";
+export { StatusBar } from "./StatusBar.jsx";
+export type { StatusBarItem } from "./StatusBar.jsx";
+export { TitleBar } from "./TitleBar.jsx";
+export { SearchBar } from "./SearchBar.jsx";
+export type { SearchBarProps } from "./SearchBar.jsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAC3C,YAAY,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAC3C,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAC3C,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/index.js

@@ -0,0 +1,5 @@
+export { AppLayout } from "./AppLayout.jsx";
+export { StatusBar } from "./StatusBar.jsx";
+export { TitleBar } from "./TitleBar.jsx";
+export { SearchBar } from "./SearchBar.jsx";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE3C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE3C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA"}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@tooee/layout",
+  "version": "0.1.0",
+  "description": "Standard app chrome (title bar, status bar) for Tooee",
+  "license": "MIT",
+  "author": "Gareth Andrew",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gingerhendrix/tooee.git",
+    "directory": "packages/layout"
+  },
+  "homepage": "https://github.com/gingerhendrix/tooee",
+  "bugs": "https://github.com/gingerhendrix/tooee/issues",
+  "keywords": ["tui", "terminal", "cli", "opentui", "layout"],
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": {
+        "@tooee/source": "./src/index.ts",
+        "default": "./dist/index.js"
+      }
+    }
+  },
+  "files": ["dist", "src"],
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@tooee/themes": "0.0.0",
+    "@tooee/overlays": "0.0.0"
+  },
+  "devDependencies": {
+    "@opentui/core": "^0.1.67",
+    "@opentui/react": "^0.1.67",
+    "@types/bun": "^1.3.5",
+    "@types/react": "^19.1.10",
+    "typescript": "^5.8.3"
+  },
+  "peerDependencies": {
+    "@opentui/core": "^0.1.67",
+    "@opentui/react": "^0.1.67",
+    "react": "^18.0.0 || ^19.0.0"
+  }
+}

package/src/AppLayout.tsx

@@ -0,0 +1,74 @@
+import type { ReactNode, RefObject } from "react"
+import type { ScrollBoxRenderable } from "@opentui/core"
+import { TitleBar } from "./TitleBar.jsx"
+import { StatusBar } from "./StatusBar.jsx"
+import type { StatusBarItem } from "./StatusBar.jsx"
+import { SearchBar } from "./SearchBar.jsx"
+import type { SearchBarProps } from "./SearchBar.jsx"
+import { useTheme } from "@tooee/themes"
+import { useCurrentOverlay } from "@tooee/overlays"
+
+export interface AppLayoutSearchBar extends SearchBarProps {
+  active: boolean
+}
+
+export interface AppLayoutProps {
+  titleBar?: { title: string; subtitle?: string }
+  statusBar: { items: StatusBarItem[] }
+  scrollRef?: RefObject<ScrollBoxRenderable | null>
+  scrollProps?: {
+    stickyScroll?: boolean
+    stickyStart?: "bottom" | "top"
+    focused?: boolean
+  }
+  searchBar?: AppLayoutSearchBar
+  overlay?: ReactNode
+  children: ReactNode
+}
+
+export function AppLayout({
+  titleBar,
+  statusBar,
+  scrollRef,
+  scrollProps,
+  searchBar,
+  overlay,
+  children,
+}: AppLayoutProps) {
+  const { theme } = useTheme()
+  const contextOverlay = useCurrentOverlay()
+  const activeOverlay = overlay ?? contextOverlay
+  return (
+    <box flexDirection="column" width="100%" height="100%" backgroundColor={theme.background}>
+      {titleBar && <TitleBar title={titleBar.title} subtitle={titleBar.subtitle} />}
+      <box style={{ flexGrow: 1, position: "relative" }}>
+        <scrollbox
+          ref={scrollRef}
+          style={{ flexGrow: 1 }}
+          stickyScroll={scrollProps?.stickyScroll}
+          stickyStart={scrollProps?.stickyStart}
+          focused={scrollProps?.focused ?? true}
+        >
+          {children}
+        </scrollbox>
+        {activeOverlay && (
+          <box position="absolute" left={0} top={0} width="100%" height="100%">
+            {activeOverlay}
+          </box>
+        )}
+      </box>
+      {searchBar?.active ? (
+        <SearchBar
+          query={searchBar.query}
+          onQueryChange={searchBar.onQueryChange}
+          onSubmit={searchBar.onSubmit}
+          onCancel={searchBar.onCancel}
+          matchCount={searchBar.matchCount}
+          currentMatch={searchBar.currentMatch}
+        />
+      ) : (
+        <StatusBar items={statusBar.items} />
+      )}
+    </box>
+  )
+}

package/src/SearchBar.tsx

@@ -0,0 +1,55 @@
+import { useTheme } from "@tooee/themes"
+
+export interface SearchBarProps {
+  query: string
+  onQueryChange: (query: string) => void
+  onSubmit: () => void
+  onCancel: () => void
+  matchCount?: number
+  currentMatch?: number
+}
+
+export function SearchBar({
+  query,
+  onQueryChange,
+  onSubmit,
+  onCancel: _onCancel,
+  matchCount,
+  currentMatch,
+}: SearchBarProps) {
+  const { theme } = useTheme()
+
+  const matchDisplay =
+    matchCount !== undefined && matchCount > 0
+      ? `${(currentMatch ?? 0) + 1}/${matchCount}`
+      : matchCount === 0 && query.length > 0
+        ? "No matches"
+        : ""
+
+  return (
+    <box
+      style={{
+        flexDirection: "row",
+        flexShrink: 0,
+        backgroundColor: theme.backgroundPanel,
+        paddingLeft: 1,
+        paddingRight: 1,
+      }}
+    >
+      <text content="/" style={{ fg: theme.accent }} />
+      <input
+        value={query}
+        focused
+        onInput={onQueryChange}
+        onSubmit={onSubmit}
+        backgroundColor="transparent"
+        focusedBackgroundColor="transparent"
+        textColor={theme.text}
+        cursorColor={theme.accent}
+        cursorStyle={{ style: "line", blinking: true }}
+        style={{ flexGrow: 1 }}
+      />
+      {matchDisplay ? <text content={` ${matchDisplay}`} style={{ fg: theme.textMuted }} /> : null}
+    </box>
+  )
+}

package/src/StatusBar.tsx

@@ -0,0 +1,33 @@
+import { useTheme } from "@tooee/themes"
+
+interface StatusBarProps {
+  items: StatusBarItem[]
+}
+
+export interface StatusBarItem {
+  label: string
+  value?: string
+}
+
+export function StatusBar({ items }: StatusBarProps) {
+  const { theme } = useTheme()
+  return (
+    <box
+      style={{
+        flexDirection: "row",
+        flexShrink: 0,
+        backgroundColor: theme.backgroundPanel,
+        padding: 0,
+        paddingLeft: 1,
+        paddingRight: 1,
+      }}
+    >
+      {items.map((item, index) => (
+        <box key={index} style={{ marginRight: 2, flexDirection: "row" }}>
+          <text content={item.label} style={{ fg: theme.textMuted }} />
+          {item.value && <text content={` ${item.value}`} style={{ fg: theme.text }} />}
+        </box>
+      ))}
+    </box>
+  )
+}

package/src/TitleBar.tsx

@@ -0,0 +1,25 @@
+import { useTheme } from "@tooee/themes"
+
+interface TitleBarProps {
+  title: string
+  subtitle?: string
+}
+
+export function TitleBar({ title, subtitle }: TitleBarProps) {
+  const { theme } = useTheme()
+  return (
+    <box
+      style={{
+        flexDirection: "row",
+        flexShrink: 0,
+        backgroundColor: theme.backgroundPanel,
+        padding: 0,
+        paddingLeft: 1,
+        paddingRight: 1,
+      }}
+    >
+      <text content={title} style={{ fg: theme.primary }} />
+      {subtitle && <text content={` — ${subtitle}`} style={{ fg: theme.textMuted }} />}
+    </box>
+  )
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+export { AppLayout } from "./AppLayout.jsx"
+export type { AppLayoutProps, AppLayoutSearchBar } from "./AppLayout.jsx"
+export { StatusBar } from "./StatusBar.jsx"
+export type { StatusBarItem } from "./StatusBar.jsx"
+export { TitleBar } from "./TitleBar.jsx"
+export { SearchBar } from "./SearchBar.jsx"
+export type { SearchBarProps } from "./SearchBar.jsx"