@proton-app/renderer 0.0.3 → 0.0.4

package/dist/app.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+export type AppDefinition = {
+    layout?: ReactNode;
+    routes: Record<string, ReactNode>;
+};
+/**
+ * Declares an app: one layout wrapping a flat map of
+ * path → page. Paths use React Router syntax ("/editor/:songId").
+**/
+export declare const defineApp: (app: AppDefinition) => AppDefinition;
+export declare const AppRoutes: ({ app }: {
+    app: AppDefinition;
+}) => import("react").JSX.Element;

package/dist/app.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppRoutes = exports.defineApp = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_router_dom_1 = require("react-router-dom");
+/**
+ * Declares an app: one layout wrapping a flat map of
+ * path → page. Paths use React Router syntax ("/editor/:songId").
+**/
+const defineApp = (app) => app;
+exports.defineApp = defineApp;
+const AppRoutes = ({ app }) => ((0, jsx_runtime_1.jsx)(react_router_dom_1.Routes, { children: (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { element: app.layout ?? (0, jsx_runtime_1.jsx)(react_router_dom_1.Outlet, {}), children: Object.entries(app.routes).map(([path, element]) => ((0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: path, element: element }, path))) }) }));
+exports.AppRoutes = AppRoutes;

package/dist/assets/dash.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1em" height="1em">
+    <path 
+        d="M0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32z" 
+        fill="currentColor" 
+    />
+</svg>

package/dist/assets/x.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="1em" height="1em">
+    <path 
+        d="M55.1 73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L147.2 256 9.9 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192.5 301.3 329.9 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.8 256 375.1 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192.5 210.7 55.1 73.4z" 
+        fill="currentColor" 
+    />
+</svg>

package/dist/index.d.ts

@@ -1,2 +1,4 @@
-export declare function mountApp(app: React.ReactNode): void;
-export * from "./router";
+import { type AppDefinition } from "./app";
+export declare function mountApp(app: AppDefinition): void;
+export * from "./app";
+export * from "./layouts/_";

package/dist/index.js

@@ -18,9 +18,10 @@ exports.mountApp = mountApp;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const client_1 = require("react-dom/client");
 const react_router_dom_1 = require("react-router-dom");
+const app_1 = require("./app");
 function mountApp(app) {
-    const element = document.getElementById("root");
-    const root = (0, client_1.createRoot)(element);
-    root.render((0, jsx_runtime_1.jsx)(react_router_dom_1.HashRouter, { children: app }));
+    const root = (0, client_1.createRoot)(document.getElementById("root"));
+    root.render((0, jsx_runtime_1.jsx)(react_router_dom_1.HashRouter, { children: (0, jsx_runtime_1.jsx)(app_1.AppRoutes, { app: app }) }));
 }
-__exportStar(require("./router"), exports);
+__exportStar(require("./app"), exports);
+__exportStar(require("./layouts/_"), exports);

package/dist/layouts/_.d.ts

@@ -0,0 +1 @@
+export { default as NormalLayout } from "./normal";

package/dist/layouts/_.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NormalLayout = void 0;
+var normal_1 = require("./normal");
+Object.defineProperty(exports, "NormalLayout", { enumerable: true, get: function () { return __importDefault(normal_1).default; } });

package/dist/layouts/normal.d.ts

@@ -0,0 +1,51 @@
+import { type NavItem } from "@bouku/core";
+export type NavItemT = {
+    label: string;
+    icon?: React.ReactNode;
+    isActive: boolean;
+};
+export declare const TabItemBase: ({ label, icon, isActive }: Omit<NavItemT, "id">) => import("react").JSX.Element;
+/**
+ * Title Bar component.
+ *
+ * Application-level title bar used in the root layout.
+ * Renders a horizontal bar with logo and window controls.
+ * Uses `draggable` class to replace frame of Electron
+ * window and make the app move on the user's screen.
+**/
+export declare const TitleBar: ({ banner }: {
+    banner: string;
+}) => import("react").JSX.Element;
+type Props = {
+    style?: string;
+    banner: string;
+    tabs?: NavItem[];
+};
+/**
+ * Root Layout.
+ *
+ * Application-level layout wrapper used by all routes.
+ * Provides a full-screen column layout with a persistent title
+ * bar and a centered content area for routed pages.
+ *
+ * @param children - Page content.
+**/
+declare const NormalLayout: ({ style, banner, tabs }: Props) => import("react").JSX.Element;
+/**
+ * Tab Navigation Component.
+ *
+ * A `TabItem` wrapper that integrates with React Router.
+ * Derives active state from the current URL and renders a
+ * navigable tab using a router `<Link>`.
+ *
+ * Behavior:
+ * - Builds a route from the provided `id` (/[id]).
+ * - Marks tab as active when the pathname includes that route.
+ * - Delegates all visual rendering to `TabItem`.
+ * - Nested routes keep the parent tab active.
+ *
+ * @param id - Route identifier used to construct the URL.
+ * @param props - Remaining `NavItem` props forwarded to `TabItem`.
+**/
+export declare const TabItem: ({ href, ...props }: NavItem) => import("react").JSX.Element;
+export default NormalLayout;

package/dist/layouts/normal.js

@@ -0,0 +1,73 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabItem = exports.TitleBar = exports.TabItemBase = void 0;
+const react_1 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_router_dom_1 = require("react-router-dom");
+const core_1 = require("@bouku/core");
+const dash_svg_1 = __importDefault(require("../assets/dash.svg"));
+const x_svg_1 = __importDefault(require("../assets/x.svg"));
+const app = () => window.api.app;
+const TabItemBase = ({ label, icon, isActive }) => ((0, jsx_runtime_1.jsxs)("div", { className: (0, core_1.cn)(stylesT, isActive && "!bg-surface-light text-primary hover:cursor-default"), children: [icon && (0, jsx_runtime_1.jsx)("div", { className: (0, core_1.cn)("duration-200", isActive && "text-accent"), children: icon }), label] }));
+exports.TabItemBase = TabItemBase;
+const stylesT = (0, core_1.css)({
+    base: "flex items-center gap-2 px-2 py-1 rounded-xs duration-200 cursor-pointer",
+    color: "bg-surface-dark hover:bg-surface border border-border-dark",
+    text: "font-medium text-sm text-primary-dark"
+});
+/**
+ * Title Bar component.
+ *
+ * Application-level title bar used in the root layout.
+ * Renders a horizontal bar with logo and window controls.
+ * Uses `draggable` class to replace frame of Electron
+ * window and make the app move on the user's screen.
+**/
+const TitleBar = ({ banner }) => ((0, jsx_runtime_1.jsxs)("div", { className: s.container, style: { WebkitAppRegion: "drag" }, children: [(0, jsx_runtime_1.jsx)("div", { className: s.subcontainer, children: (0, jsx_runtime_1.jsx)("img", { className: "w-auto h-6", src: banner, alt: "Logo" }) }), (0, jsx_runtime_1.jsxs)(core_1.RowBox, { style: s.actions, children: [(0, jsx_runtime_1.jsx)(core_1.Button, { size: "xs", variant: "ghost", style: s.minimize, icon: (0, jsx_runtime_1.jsx)(dash_svg_1.default, {}), action: () => app().minimize() }), (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "ghost", style: s.close, icon: (0, jsx_runtime_1.jsx)(x_svg_1.default, {}), action: () => app().close() })] })] }));
+exports.TitleBar = TitleBar;
+const s = {
+    container: "bg-background-light border-b border-border-dark",
+    subcontainer: "grow p-4 draggable",
+    actions: "gap-2 items-center px-4",
+    minimize: "hover:!text-primary-darker",
+    close: "hover:!text-error"
+};
+/**
+ * Root Layout.
+ *
+ * Application-level layout wrapper used by all routes.
+ * Provides a full-screen column layout with a persistent title
+ * bar and a centered content area for routed pages.
+ *
+ * @param children - Page content.
+**/
+const NormalLayout = ({ style, banner, tabs }) => ((0, jsx_runtime_1.jsxs)(core_1.ColumnBox, { style: styles.page, children: [(0, jsx_runtime_1.jsx)(exports.TitleBar, { banner: banner }), (0, jsx_runtime_1.jsxs)(core_1.ColumnBox, { style: styles.content, center: true, children: [tabs && ((0, jsx_runtime_1.jsx)(core_1.RowBox, { style: "items-center gap-3 w-full p-5 pb-0", children: tabs.map((t, i) => (0, react_1.createElement)(exports.TabItem, { ...t, key: i })) })), (0, jsx_runtime_1.jsx)("div", { className: (0, core_1.cn)("flex flex-col grow gap-4 w-full overflow-hidden", style), children: (0, jsx_runtime_1.jsx)(react_router_dom_1.Outlet, {}) })] })] }));
+/**
+ * Tab Navigation Component.
+ *
+ * A `TabItem` wrapper that integrates with React Router.
+ * Derives active state from the current URL and renders a
+ * navigable tab using a router `<Link>`.
+ *
+ * Behavior:
+ * - Builds a route from the provided `id` (/[id]).
+ * - Marks tab as active when the pathname includes that route.
+ * - Delegates all visual rendering to `TabItem`.
+ * - Nested routes keep the parent tab active.
+ *
+ * @param id - Route identifier used to construct the URL.
+ * @param props - Remaining `NavItem` props forwarded to `TabItem`.
+**/
+const TabItem = ({ href, ...props }) => {
+    const isActive = !!(0, react_router_dom_1.useMatch)(href + "/*");
+    return ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, { to: href, children: (0, jsx_runtime_1.jsx)(exports.TabItemBase, { isActive: isActive, ...props }) }));
+};
+exports.TabItem = TabItem;
+const styles = {
+    page: "w-screen h-screen bg-background overflow-hidden",
+    content: "grow gap-4 w-full overflow-hidden"
+};
+exports.default = NormalLayout;

package/dist/router.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-type RouterConfig = Record<string, {
+export type RouterConfig = Record<string, {
     layout: ReactNode;
     routes: Record<string, {
         param?: string;
@@ -9,4 +9,3 @@ type RouterConfig = Record<string, {
 export declare const AppRouter: ({ config }: {
     config: RouterConfig;
 }) => import("react").JSX.Element;
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proton-app/renderer",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",
@@ -17,19 +17,21 @@
     "react-router-dom": "^7.12.0"
   },
   "exports": {
-    ".": "./dist/index.js",
-    "./styles.css": "./dist/styles.css"
+    ".": "./dist/index.js"
   },
   "engines": {},
   "scripts": {
-    "build": "tsc"
+    "build": "tsc && node -e \"require('fs').cpSync('src/assets','dist/assets',{recursive:true})\""
   },
   "devDependencies": {
     "@types/node": "^24.3.1",
-    "@types/react": "^19.1.10",
+    "@types/react": "^19.3.0",
     "@types/react-dom": "^19.2.3",
     "react": "^19.1.1",
     "react-router-dom": "^7.12.0",
     "typescript": "^5.9.2"
+  },
+  "dependencies": {
+    "@bouku/core": "^0.5.5"
   }
 }

package/dist/mount.d.ts

@@ -1 +0,0 @@
-export declare function mountApp(app: React.ReactNode): void;

package/dist/mount.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.mountApp = mountApp;
-const client_1 = require("react-dom/client");
-function mountApp(app) {
-    const element = document.getElementById("root");
-    const root = (0, client_1.createRoot)(element);
-    root.render(app);
-}