@deseteral/biurko 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,7 @@
+Copyright Deseteral <github.com/deseteral>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,3 +1,51 @@
-# Temporary Holding Version
+# biurko
 
-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.
+## Installation
+
+```sh
+npm install --save @deseteral/biurko
+```
+
+## Development
+
+### Setup
+
+- Node.js `^22.18.0 || ^24.11.0 || >=26.0.0` for [Vite+](https://viteplus.dev/).
+- npm 11.20.0 (the version pinned in `package.json` and used by CI and orb setup).
+
+If needed, install the pinned npm version with `npm install --global npm@11.20.0`, then run `npm ci` to install dependencies from `package-lock.json`. Vite+ is installed locally; no global `vp` installation is required.
+
+The project’s `.npmrc` saves exact dependency versions, disables install lifecycle scripts, and requires newly resolved package versions to be at least 31 days old. The release-age setting requires npm 11.10.0 or newer.
+
+| Command                | Description                                            |
+| ---------------------- | ------------------------------------------------------ |
+| `npm run build`        | Build the ESM library and declarations with `vp pack`. |
+| `npm run build:demo`   | Build all three demo pages with `vp build`.            |
+| `npm run demo`         | Start the Vite+ dev server with the demo app.          |
+| `npm run typecheck`    | Run TypeScript type checking.                          |
+| `npm run lint`         | Run Oxlint rules and type checking.                    |
+| `npm run check`        | Check formatting, lint rules, and types together.      |
+| `npm run format`       | Format the project with Vite+ (Oxfmt).                 |
+| `npm run format:check` | Check formatting without modifying files.              |
+
+`vp pack` builds the library; `vp build demo/` builds the demo application. To run these local commands directly, use `npm exec --no -- vp`. There are currently no tests or test script.
+
+Formatting uses the `fmt` block in `vite.config.ts` and the existing `.editorconfig` style. Linting uses Oxlint's default rules with type-aware linting and type checking enabled in the `lint` block. Linting includes the library and demo code, excluding generated output. `vp check` checks formatting, lint rules, and types together; TypeScript checking remains available separately through `npm run typecheck`.
+
+CI runs formatting checks, type checking, and both builds on pushes and pull requests. Orb setup installs the pinned npm version when needed and runs `npm ci`; resume requires no additional setup.
+
+### Demo app
+
+```sh
+npm run demo
+```
+
+This starts a local dev server serving the `demo/` directory. There are three demo apps available:
+
+- `/` - vanilla DOM demo
+- `/react.html` - React integration demo
+- `/solid.html` - SolidJS integration demo
+
+## License
+
+This project is licensed under the [MIT license](LICENSE).

package/dist/adapters/react/index.d.ts

@@ -0,0 +1,53 @@
+import { n as WindowManagerOptions, p as WindowHandle, t as WindowManager } from "../../window-manager-X3GN3wrq.js";
+import { ReactNode } from "react";
+/**
+ * Props for the {@link BiurkoDesktop} component.
+ */
+interface BiurkoDesktopProps {
+  /** CSS class name applied to the desktop container. */
+  className?: string;
+  /**
+   * Child components rendered inside the desktop.
+   */
+  children: ReactNode;
+  /**
+   * Configuration options passed to the underlying {@link WindowManager}.
+   * Read only when the manager is initialized; later changes do not reconfigure it.
+   */
+  options?: WindowManagerOptions;
+  /**
+   * Optional render function to wrap each window's content with custom chrome (title bar, close button, etc.).
+   *
+   * @param handle - The handle of the window being rendered.
+   * @param content - A function that returns the window's content (the render function passed to `createWindow`).
+   * @returns The decorated window content to be portaled into the window surface.
+   */
+  renderWindow?: (handle: WindowHandle, content: () => ReactNode) => ReactNode;
+}
+/**
+ * The root desktop component for the React adapter.
+ * Initializes a {@link WindowManager} and provides it via React context. All windows created through
+ * the manager are rendered as React portals into their respective surface elements.
+ *
+ * Place your application UI (taskbar, menus, controls) as `children` - they will have access to
+ * the window manager through the {@link useWindowManager} hook.
+ * Pass a content render function as the second argument to the manager's `createWindow` method.
+ *
+ * @param props - Desktop configuration, child UI, and optional window content decorator.
+ * @returns The desktop container with child UI and window portals once initialized.
+ */
+export declare function BiurkoDesktop(props: BiurkoDesktopProps): ReactNode;
+/**
+ * A `WindowManager` instance typed for the React adapter.
+ * Each window's attached data is a render function returning a React node.
+ */
+type ReactWindowManager = WindowManager<() => ReactNode>;
+/**
+ * Returns the {@link WindowManager} instance from the nearest `<BiurkoDesktop>` ancestor.
+ * Use this hook to create, close, or inspect windows from any component within the desktop tree.
+ *
+ * @returns The desktop's window manager, with a content render function attached to each window.
+ * @throws Error if called outside of a `<BiurkoDesktop>` component tree.
+ */
+export declare function useWindowManager(): ReactWindowManager;
+export type { BiurkoDesktopProps };

package/dist/adapters/react/index.js

@@ -0,0 +1,65 @@
+import { t as WindowManager } from "../../window-manager-BIsSCt3U.js";
+import { createContext, useCallback, useContext, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/adapters/react/biurko-context.ts
+const BiurkoContext = createContext(null);
+/**
+* Returns the {@link WindowManager} instance from the nearest `<BiurkoDesktop>` ancestor.
+* Use this hook to create, close, or inspect windows from any component within the desktop tree.
+*
+* @returns The desktop's window manager, with a content render function attached to each window.
+* @throws Error if called outside of a `<BiurkoDesktop>` component tree.
+*/
+function useWindowManager() {
+	const windowManager = useContext(BiurkoContext);
+	if (!windowManager) throw new Error("useWindowManager must be used within React adapter context.");
+	return windowManager;
+}
+// src/adapters/react/BiurkoDesktop.tsx
+/**
+* The root desktop component for the React adapter.
+* Initializes a {@link WindowManager} and provides it via React context. All windows created through
+* the manager are rendered as React portals into their respective surface elements.
+*
+* Place your application UI (taskbar, menus, controls) as `children` - they will have access to
+* the window manager through the {@link useWindowManager} hook.
+* Pass a content render function as the second argument to the manager's `createWindow` method.
+*
+* @param props - Desktop configuration, child UI, and optional window content decorator.
+* @returns The desktop container with child UI and window portals once initialized.
+*/
+function BiurkoDesktop(props) {
+	const [windowManager, setWindowManager] = useState(null);
+	const [windows, setWindows] = useState([]);
+	const managerRef = useRef(null);
+	const initRef = useCallback((el) => {
+		if (!el || managerRef.current) return;
+		const manager = new WindowManager(el, props.options);
+		manager.addEventListener("window-opened", (e) => {
+			const { handle } = e.detail;
+			const surface = manager.getWindowSurface(handle);
+			const render = manager.getWindowData(handle);
+			if (!surface || !render) return;
+			setWindows((prev) => [...prev, {
+				handle,
+				surface,
+				render
+			}]);
+		});
+		manager.addEventListener("window-closed", (e) => {
+			setWindows((prev) => prev.filter((w) => w.handle !== e.detail.handle));
+		});
+		managerRef.current = manager;
+		setWindowManager(manager);
+	}, []);
+	return /* @__PURE__ */ jsx("div", {
+		ref: initRef,
+		className: props.className,
+		children: windowManager && /* @__PURE__ */ jsxs(BiurkoContext.Provider, {
+			value: windowManager,
+			children: [props.children, windows.map((w) => createPortal(props.renderWindow ? props.renderWindow(w.handle, w.render) : w.render(), w.surface, w.handle))]
+		})
+	});
+}
+export { BiurkoDesktop, useWindowManager };

package/dist/adapters/solid-js/index.d.ts

@@ -0,0 +1,53 @@
+import { n as WindowManagerOptions, p as WindowHandle, t as WindowManager } from "../../window-manager-X3GN3wrq.js";
+import { JSX } from "solid-js";
+/**
+ * Props for the {@link BiurkoDesktop} component.
+ */
+interface BiurkoDesktopProps {
+  /** CSS class name applied to the desktop container. */
+  class?: string;
+  /**
+   * Child components rendered inside the desktop.
+   */
+  children: JSX.Element;
+  /**
+   * Configuration options passed to the underlying {@link WindowManager}.
+   * Read only when the manager is initialized; later changes do not reconfigure it.
+   */
+  options?: WindowManagerOptions;
+  /**
+   * Optional render function to wrap each window's content with custom chrome (title bar, close button, etc.).
+   *
+   * @param handle - The handle of the window being rendered.
+   * @param content - A function that returns the window's content (the render function passed to `createWindow`).
+   * @returns The decorated window content to be portaled into the window surface.
+   */
+  renderWindow?: (handle: WindowHandle, content: () => JSX.Element) => JSX.Element;
+}
+/**
+ * The root desktop component for the SolidJS adapter.
+ * Initializes a {@link WindowManager} and provides it via SolidJS context. All windows created through
+ * the manager are rendered as SolidJS portals into their respective surface elements.
+ *
+ * Place your application UI (taskbar, menus, controls) as `children` - they will have access to
+ * the window manager through the {@link useWindowManager} function.
+ * Pass a content render function as the second argument to the manager's `createWindow` method.
+ *
+ * @param props - Desktop configuration, child UI, and optional window content decorator.
+ * @returns The desktop container with child UI and window portals once initialized.
+ */
+export declare function BiurkoDesktop(props: BiurkoDesktopProps): JSX.Element;
+/**
+ * A `WindowManager` instance typed for the Solid.js adapter.
+ * Each window's attached data is a render function returning a Solid.js JSX element.
+ */
+type SolidJsWindowManager = WindowManager<() => JSX.Element>;
+/**
+ * Returns the {@link WindowManager} instance from the nearest `<BiurkoDesktop>` ancestor.
+ * Use this to create, close, or inspect windows from any component within the desktop tree.
+ *
+ * @returns The desktop's window manager, with a content render function attached to each window.
+ * @throws Error if called outside of a `<BiurkoDesktop>` component tree.
+ */
+export declare function useWindowManager(): SolidJsWindowManager;
+export type { BiurkoDesktopProps };

package/dist/adapters/solid-js/index.js

@@ -0,0 +1,89 @@
+import { t as WindowManager } from "../../window-manager-BIsSCt3U.js";
+import { Portal, className, createComponent, effect, insert, memo, template, use } from "solid-js/web";
+import { For, Show, createContext, createSignal, useContext } from "solid-js";
+// src/adapters/solid-js/biurko-context.ts
+const BiurkoContext = createContext();
+/**
+* Returns the {@link WindowManager} instance from the nearest `<BiurkoDesktop>` ancestor.
+* Use this to create, close, or inspect windows from any component within the desktop tree.
+*
+* @returns The desktop's window manager, with a content render function attached to each window.
+* @throws Error if called outside of a `<BiurkoDesktop>` component tree.
+*/
+function useWindowManager() {
+	const windowManager = useContext(BiurkoContext);
+	if (!windowManager) throw new Error("useWindowManager must be used within Solid.js adapter context.");
+	return windowManager;
+}
+// src/adapters/solid-js/BiurkoDesktop.tsx
+/** @jsxImportSource solid-js */
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+/**
+* The root desktop component for the SolidJS adapter.
+* Initializes a {@link WindowManager} and provides it via SolidJS context. All windows created through
+* the manager are rendered as SolidJS portals into their respective surface elements.
+*
+* Place your application UI (taskbar, menus, controls) as `children` - they will have access to
+* the window manager through the {@link useWindowManager} function.
+* Pass a content render function as the second argument to the manager's `createWindow` method.
+*
+* @param props - Desktop configuration, child UI, and optional window content decorator.
+* @returns The desktop container with child UI and window portals once initialized.
+*/
+function BiurkoDesktop(props) {
+	const [windowManager, setWindowManager] = createSignal();
+	const [windows, setWindows] = createSignal([]);
+	const initRef = (el) => {
+		const manager = new WindowManager(el, props.options);
+		manager.addEventListener("window-opened", (e) => {
+			const { handle } = e.detail;
+			const surface = manager.getWindowSurface(handle);
+			const render = manager.getWindowData(handle);
+			if (!surface || !render) return;
+			setWindows((prev) => [...prev, {
+				handle,
+				surface,
+				render
+			}]);
+		});
+		manager.addEventListener("window-closed", (e) => {
+			setWindows((prev) => prev.filter((w) => w.handle !== e.detail.handle));
+		});
+		setWindowManager(manager);
+	};
+	return (() => {
+		var _el$ = _tmpl$();
+		use(initRef, _el$);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return windowManager();
+			},
+			children: (manager) => createComponent(BiurkoContext.Provider, {
+				get value() {
+					return manager();
+				},
+				get children() {
+					return [memo(() => props.children), createComponent(For, {
+						get each() {
+							return windows();
+						},
+						children: (w) => createComponent(Portal, {
+							get mount() {
+								return w.surface;
+							},
+							ref: (el) => {
+								el.style.display = "contents";
+							},
+							get children() {
+								return memo(() => !!props.renderWindow)() ? props.renderWindow(w.handle, w.render) : w.render();
+							}
+						})
+					})];
+				}
+			})
+		}));
+		effect(() => className(_el$, props.class));
+		return _el$;
+	})();
+}
+export { BiurkoDesktop, useWindowManager };

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import { a as WindowFocusedEventDetail, c as WindowOpenedEventDetail, d as CreateWindowOptions, f as DesktopMode, g as WindowRect, h as WindowPositionStrategy, i as WindowClosedEventDetail, l as WindowParentChangedEventDetail, m as WindowParentOptions, n as WindowManagerOptions, o as WindowManagerEventMap, p as WindowHandle, r as ViewportTranslatedEventDetail, s as WindowMovedEventDetail, t as WindowManager, u as WindowResizedEventDetail } from "./window-manager-X3GN3wrq.js";
+export { type CreateWindowOptions, type DesktopMode, type ViewportTranslatedEventDetail, type WindowClosedEventDetail, type WindowFocusedEventDetail, type WindowHandle, WindowManager, type WindowManagerEventMap, type WindowManagerOptions, type WindowMovedEventDetail, type WindowOpenedEventDetail, type WindowParentChangedEventDetail, type WindowParentOptions, type WindowPositionStrategy, type WindowRect, type WindowResizedEventDetail };

package/dist/index.js

@@ -0,0 +1 @@
+export { t as WindowManager } from "./window-manager-BIsSCt3U.js";