@fluxlay/react 1.1.0 → 1.1.1

package/README.md

@@ -82,10 +82,10 @@ function Wallpaper() {
 }
 ```
 
-| Field | Type | Description |
-|-------|------|-------------|
-| `rms` | `number` | RMS (Root Mean Square) volume level (0.0 – 1.0). |
-| `peak` | `number` | Peak volume level (0.0 – 1.0). |
+| Field      | Type       | Description                                                                     |
+| ---------- | ---------- | ------------------------------------------------------------------------------- |
+| `rms`      | `number`   | RMS (Root Mean Square) volume level (0.0 – 1.0).                                |
+| `peak`     | `number`   | Peak volume level (0.0 – 1.0).                                                  |
 | `spectrum` | `number[]` | Frequency spectrum split into 32 logarithmically-scaled bands (0.0 – 1.0 each). |
 
 ### `useMediaMetadata()`
@@ -115,16 +115,16 @@ sdk:
     interval_ms: 1000
 ```
 
-| Field | Type | Description |
-|-------|------|-------------|
-| `title` | `string \| null` | Track title. |
-| `artist` | `string \| null` | Artist name. |
-| `album` | `string \| null` | Album name. |
-| `artwork` | `string \| null` | Artwork as a data URL (`data:image/...;base64,...`). |
-| `duration` | `number \| null` | Track duration in seconds. |
-| `elapsedTime` | `number \| null` | Elapsed playback time in seconds. |
-| `playbackRate` | `number \| null` | Playback rate (0.0 = paused, 1.0 = playing). |
-| `isPlaying` | `boolean` | Whether media is currently playing. |
+| Field          | Type             | Description                                          |
+| -------------- | ---------------- | ---------------------------------------------------- |
+| `title`        | `string \| null` | Track title.                                         |
+| `artist`       | `string \| null` | Artist name.                                         |
+| `album`        | `string \| null` | Album name.                                          |
+| `artwork`      | `string \| null` | Artwork as a data URL (`data:image/...;base64,...`). |
+| `duration`     | `number \| null` | Track duration in seconds.                           |
+| `elapsedTime`  | `number \| null` | Elapsed playback time in seconds.                    |
+| `playbackRate` | `number \| null` | Playback rate (0.0 = paused, 1.0 = playing).         |
+| `isPlaying`    | `boolean`        | Whether media is currently playing.                  |
 
 ### `useShell(commandId, options?)`
 
@@ -135,20 +135,20 @@ import { useShell } from "@fluxlay/react";
 
 function Wallpaper() {
   const { result, isRunning } = useShell("my-command", {
-    refreshInterval: 5000, // re-run every 5 seconds
+    refreshInterval: 5000 // re-run every 5 seconds
   });
   return <pre>{result?.stdout}</pre>;
 }
 ```
 
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `refreshInterval` | `number` | `30000` | Auto-refresh interval in ms. `0` to disable. |
-| `showStdout` | `boolean` | `true` | Write stdout to the linked terminal. |
-| `showStderr` | `boolean` | `false` | Write stderr to the linked terminal. |
-| `terminal` | `TerminalInstance` | — | Terminal instance from `useTerminal`. |
-| `columns` | `number` | — | Pseudo-terminal column width. |
-| `lines` | `number` | — | Pseudo-terminal row height. |
+| Option            | Type               | Default | Description                                  |
+| ----------------- | ------------------ | ------- | -------------------------------------------- |
+| `refreshInterval` | `number`           | `30000` | Auto-refresh interval in ms. `0` to disable. |
+| `showStdout`      | `boolean`          | `true`  | Write stdout to the linked terminal.         |
+| `showStderr`      | `boolean`          | `false` | Write stderr to the linked terminal.         |
+| `terminal`        | `TerminalInstance` | —       | Terminal instance from `useTerminal`.        |
+| `columns`         | `number`           | —       | Pseudo-terminal column width.                |
+| `lines`           | `number`           | —       | Pseudo-terminal row height.                  |
 
 Returns `{ execute, isRunning, error, result }`.
 
@@ -162,18 +162,18 @@ import { useTerminal, useShell, TerminalThemes } from "@fluxlay/react";
 function Wallpaper() {
   const { terminalRef, instance } = useTerminal({
     fontSize: 13,
-    theme: TerminalThemes.tokyoNight,
+    theme: TerminalThemes.tokyoNight
   });
   useShell("my-command", { terminal: instance });
   return <div ref={terminalRef} />;
 }
 ```
 
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `fontSize` | `number` | `12` | Font size in pixels. |
-| `fontFamily` | `string` | system monospace | CSS font-family string. |
-| `theme` | `ITheme` | `TerminalThemes.dark.default` | xterm color theme. |
+| Option       | Type     | Default                       | Description             |
+| ------------ | -------- | ----------------------------- | ----------------------- |
+| `fontSize`   | `number` | `12`                          | Font size in pixels.    |
+| `fontFamily` | `string` | system monospace              | CSS font-family string. |
+| `theme`      | `ITheme` | `TerminalThemes.dark.default` | xterm color theme.      |
 
 Returns `{ terminalRef, instance }`.
 
@@ -192,17 +192,17 @@ console.log(result.stdout);
 
 Pre-built xterm color themes to pass to `useTerminal`.
 
-| Key | Variants |
-|-----|----------|
-| `dark` | `default`, `modern` |
-| `light` | `default`, `modern` |
-| `nord` | — |
-| `dracula` | — |
-| `gruvbox` | `dark`, `light` |
-| `solarized` | `dark`, `light` |
-| `oneDark` | — |
+| Key          | Variants                                |
+| ------------ | --------------------------------------- |
+| `dark`       | `default`, `modern`                     |
+| `light`      | `default`, `modern`                     |
+| `nord`       | —                                       |
+| `dracula`    | —                                       |
+| `gruvbox`    | `dark`, `light`                         |
+| `solarized`  | `dark`, `light`                         |
+| `oneDark`    | —                                       |
 | `catppuccin` | `latte`, `frappe`, `macchiato`, `mocha` |
-| `monokaiPro` | — |
-| `tokyoNight` | — |
-| `nightOwl` | — |
-| `everforest` | `dark`, `light` |
+| `monokaiPro` | —                                       |
+| `tokyoNight` | —                                       |
+| `nightOwl`   | —                                       |
+| `everforest` | `dark`, `light`                         |

package/dist/index.d.mts

@@ -0,0 +1,383 @@
+import * as _$react from "react";
+import { FitAddon } from "@xterm/addon-fit";
+import * as _$_xterm_xterm0 from "@xterm/xterm";
+import { ITheme, Terminal } from "@xterm/xterm";
+//#region src/transport/index.d.ts
+/** The result returned after executing a shell command. */
+interface ShellResult {
+  /** Standard output produced by the command. */
+  stdout: string;
+  /** Standard error produced by the command. */
+  stderr: string;
+  /** Exit status code of the process, or `null` if the process was terminated by a signal. */
+  statusCode: number | null;
+  /** Whether the command exited successfully (status code 0). */
+  success: boolean;
+  /** Signal number that terminated the process, or `null` if it exited normally. */
+  signal: number | null;
+}
+/** System audio information streamed from the Fluxlay backend. */
+interface AudioInfo {
+  /** RMS (Root Mean Square) volume level (0.0 - 1.0). */
+  rms: number;
+  /** Peak volume level (0.0 - 1.0). */
+  peak: number;
+  /** Frequency spectrum split into logarithmically-scaled bands (0.0 - 1.0 each). The number of bands is configurable via `useAudio({ numBands })`. */
+  spectrum: number[];
+}
+/** System hardware and performance information streamed from the Fluxlay backend. */
+interface SystemMonitorInfo {
+  /** Overall CPU usage percentage (0.0 - 100.0). */
+  cpuUsage: number;
+  /** Per-core CPU usage percentages (0.0 - 100.0 each). */
+  cpuPerCore: number[];
+  /** Per-core CPU frequency in MHz. */
+  cpuFrequencyMhz: number[];
+  /** Total physical memory in bytes. */
+  memoryTotal: number;
+  /** Used physical memory in bytes. */
+  memoryUsed: number;
+  /** Memory usage percentage (0.0 - 100.0). */
+  memoryUsage: number;
+  /** Total swap space in bytes. */
+  swapTotal: number;
+  /** Used swap space in bytes. */
+  swapUsed: number;
+  /** Swap usage percentage (0.0 - 100.0). */
+  swapUsage: number;
+  /** Battery charge level (0.0 - 100.0), or `null` if no battery is present. */
+  batteryLevel: number | null;
+  /** Whether the battery is currently charging, or `null` if no battery is present. */
+  batteryCharging: boolean | null;
+  /** Network receive speed in bytes per second. */
+  networkRxBytesPerSec: number;
+  /** Network transmit speed in bytes per second. */
+  networkTxBytesPerSec: number;
+  /** Disk read speed in bytes per second. */
+  diskReadBytesPerSec: number;
+  /** Disk write speed in bytes per second. */
+  diskWriteBytesPerSec: number;
+  /** Number of running processes. */
+  processCount: number;
+  /** System uptime in seconds. */
+  uptimeSecs: number;
+  /** Load average for the past 1, 5, and 15 minutes. */
+  loadAverage: [number, number, number];
+  /** Per-disk storage information. */
+  disks: DiskInfo[];
+  /** System hostname. */
+  hostname: string;
+  /** Operating system name and version. */
+  osName: string;
+  /** CPU model name (e.g. "Apple M2 Pro"). */
+  cpuBrand: string;
+  /** Number of physical CPU cores. */
+  physicalCoreCount: number;
+  /** Number of logical CPU cores (threads). */
+  logicalCoreCount: number;
+  /** CPU architecture (e.g. "aarch64", "x86_64"). */
+  cpuArch: string;
+  /** Kernel version string. */
+  kernelVersion: string;
+}
+/** Storage information for a single disk/volume. */
+interface DiskInfo {
+  /** Mount point path (e.g. "/", "/home"). */
+  mountPoint: string;
+  /** Disk/volume name. */
+  name: string;
+  /** Total capacity in bytes. */
+  totalBytes: number;
+  /** Available (free) space in bytes. */
+  availableBytes: number;
+  /** Usage percentage (0.0 - 100.0). */
+  usage: number;
+}
+/** Media metadata information for the currently playing track. */
+interface MediaMetadataInfo {
+  /** Track title, or `null` if unavailable. */
+  title: string | null;
+  /** Artist name, or `null` if unavailable. */
+  artist: string | null;
+  /** Album name, or `null` if unavailable. */
+  album: string | null;
+  /** Artwork as a data URL (e.g. "data:image/jpeg;base64,..."), or `null` if unavailable. */
+  artwork: string | null;
+  /** Track duration in seconds, or `null` if unavailable. */
+  duration: number | null;
+  /** Elapsed playback time in seconds, or `null` if unavailable. */
+  elapsedTime: number | null;
+  /** Playback rate (0.0 = paused, 1.0 = playing), or `null` if unavailable. */
+  playbackRate: number | null;
+  /** Whether media is currently playing. */
+  isPlaying: boolean;
+}
+/** Custom property values set by the end user via the Fluxlay settings UI. */
+type PropertyValues = Record<string, number | string | boolean>;
+//#endregion
+//#region src/hooks/use-audio.d.ts
+/** Options for the audio stream. */
+interface AudioOptions {
+  /** Number of frequency spectrum bands. Default is 32. */
+  numBands?: number;
+}
+/**
+ * React hook that subscribes to system audio information streamed from
+ * the Fluxlay backend.
+ *
+ * Returns the current audio state including RMS volume, peak level,
+ * and frequency spectrum data, useful for building audio visualizers.
+ *
+ * @param options - Optional audio configuration.
+ * @returns The current audio info as `{ rms, peak, spectrum }`.
+ */
+declare function useAudio(options?: AudioOptions): AudioInfo;
+//#endregion
+//#region src/hooks/use-media-metadata.d.ts
+/** Options for the media metadata stream. */
+interface MediaMetadataOptions {
+  /** Polling interval in milliseconds. Default is 1000. */
+  intervalMs?: number;
+}
+/**
+ * React hook that subscribes to media metadata streamed from the
+ * Fluxlay backend.
+ *
+ * Returns information about the currently playing track from system
+ * media players (e.g. Spotify, Apple Music), including title, artist,
+ * album artwork, and playback state — useful for building
+ * music-reactive wallpapers.
+ *
+ * @param options - Optional media metadata configuration.
+ * @returns The current media metadata info.
+ */
+declare function useMediaMetadata(options?: MediaMetadataOptions): MediaMetadataInfo;
+//#endregion
+//#region src/hooks/use-mouse.d.ts
+/**
+ * React hook that subscribes to global mouse position events streamed from
+ * the Fluxlay backend.
+ *
+ * The Y axis is inverted so that positive values point upward, matching a
+ * standard mathematical coordinate system rather than the screen coordinate
+ * system where Y grows downward.
+ *
+ * The subscription is scoped to the window identified by the `window_label`
+ * query parameter of the current URL, defaulting to `"main"`.
+ *
+ * @returns The current mouse position as `{ x, y }`.
+ */
+declare function useMousePosition(): {
+  x: number;
+  y: number;
+};
+//#endregion
+//#region src/hooks/use-properties.d.ts
+/**
+ * React hook that provides the current custom property values defined
+ * in the wallpaper manifest and customized by the end user.
+ *
+ * Fetches initial values on mount and subscribes to real-time updates
+ * via the properties stream.
+ *
+ * @typeParam T - Shape of the property values object.
+ * @returns The current property values typed as `T`.
+ */
+declare function useProperties<T extends PropertyValues = PropertyValues>(): T;
+//#endregion
+//#region src/shell.d.ts
+/** Options that control how a shell command is executed. */
+interface ShellOptions {
+  /** Number of columns (character width) of the pseudo-terminal. */
+  columns?: number;
+  /** Number of rows (line height) of the pseudo-terminal. */
+  lines?: number;
+}
+/**
+ * Runs a pre-declared shell command from fluxlay.yaml.
+ *
+ * @param commandId The ID of the command declared in the manifest's `shell` section.
+ * @param options Options for command execution.
+ * @returns The standard output and error of the command.
+ * @throws An error if the command fails or the ID is invalid.
+ */
+declare function runShell(commandId: string, options?: ShellOptions): Promise<ShellResult>;
+//#endregion
+//#region src/hooks/use-terminal.d.ts
+/** Options for the {@link useTerminal} hook. */
+interface UseTerminalOptions {
+  /**
+   * Font size in pixels used by the terminal.
+   * @defaultValue 12
+   */
+  fontSize?: number;
+  /**
+   * CSS font-family string applied to the terminal.
+   * Defaults to a system monospace font stack.
+   */
+  fontFamily?: string;
+  /**
+   * Color theme applied to the terminal.
+   * @defaultValue {@link TerminalThemes.dark.default}
+   */
+  theme?: ITheme;
+}
+/** Holds the xterm {@link Terminal} and its associated {@link FitAddon}. */
+interface TerminalInstance {
+  /** The underlying xterm Terminal instance. */
+  terminal: Terminal;
+  /** The FitAddon used to resize the terminal to match its container element. */
+  fitAddon: FitAddon;
+}
+/**
+ * React hook that creates and manages a read-only xterm terminal rendered
+ * inside a `<div>` element.
+ *
+ * The terminal is configured for display-only use: stdin is disabled, the
+ * cursor is hidden, and the scrollback buffer is removed. Custom CSS overrides
+ * are injected into `document.head` to make the terminal behave as an inline
+ * block that expands to fill its container width.
+ *
+ * The terminal is disposed and the injected styles are removed when the
+ * component unmounts or when `fontSize` / `fontFamily` change.
+ *
+ * @param options Display configuration for the terminal.
+ * @returns An object containing:
+ *   - `terminalRef` – a React ref that must be attached to the container `<div>`.
+ *   - `instance` – the {@link TerminalInstance} once the terminal is mounted, or `null`.
+ */
+declare function useTerminal(options?: UseTerminalOptions): {
+  terminalRef: _$react.RefObject<HTMLDivElement | null>;
+  instance: TerminalInstance | null;
+};
+//#endregion
+//#region src/hooks/use-shell.d.ts
+/** Options for the {@link useShell} hook. */
+interface UseShellOptions extends ShellOptions {
+  /**
+   * Interval in milliseconds at which the command is automatically re-executed.
+   * Set to `0` to disable auto-refresh.
+   * @defaultValue 30000
+   */
+  refreshInterval?: number;
+  /**
+   * Whether to write the command's stdout to the linked terminal.
+   * @defaultValue true
+   */
+  showStdout?: boolean;
+  /**
+   * Whether to write the command's stderr to the linked terminal.
+   * @defaultValue false
+   */
+  showStderr?: boolean;
+  /**
+   * Optional terminal instance returned by {@link useTerminal}.
+   * When provided, command output is rendered directly into the terminal and
+   * the terminal dimensions are used as the pseudo-terminal size.
+   */
+  terminal?: TerminalInstance | null;
+}
+/**
+ * React hook that executes a pre-declared Fluxlay shell command and
+ * optionally renders its output into an xterm terminal.
+ *
+ * The command runs once on mount and is re-executed whenever `commandId`
+ * changes or the `refreshInterval` elapses.
+ *
+ * @param commandId The ID of the command declared in `fluxlay.yaml`.
+ * @param options Configuration options for execution and display behaviour.
+ * @returns An object containing:
+ *   - `execute` – manually triggers the command.
+ *   - `isRunning` – `true` while the command is in progress.
+ *   - `error` – error message string when the last execution failed, otherwise `null`.
+ *   - `result` – the {@link ShellResult} of the last completed execution, or `null`.
+ */
+declare function useShell(commandId: string, options?: UseShellOptions): {
+  execute: () => Promise<void>;
+  isRunning: boolean;
+  error: string | null;
+  result: ShellResult | null;
+};
+//#endregion
+//#region src/hooks/use-system-monitor.d.ts
+/** Polling interval options for each system monitor category (in milliseconds). */
+interface SystemMonitorOptions {
+  /** CPU usage polling interval in ms. */
+  cpuIntervalMs?: number;
+  /** Memory usage polling interval in ms. */
+  memoryIntervalMs?: number;
+  /** Network throughput polling interval in ms. */
+  networkIntervalMs?: number;
+  /** Disk I/O polling interval in ms. */
+  diskIoIntervalMs?: number;
+  /** Disk space polling interval in ms. */
+  diskSpaceIntervalMs?: number;
+  /** Battery status polling interval in ms. */
+  batteryIntervalMs?: number;
+  /** Process count polling interval in ms. */
+  processIntervalMs?: number;
+  /** Load average polling interval in ms. */
+  loadAverageIntervalMs?: number;
+}
+/**
+ * React hook that subscribes to system hardware information streamed
+ * from the Fluxlay backend.
+ *
+ * Returns real-time system metrics including CPU usage, memory usage,
+ * battery status, and network throughput — useful for building
+ * system-reactive wallpapers (e.g. cyberpunk HUDs, hardware monitors).
+ *
+ * @param options - Optional polling interval configuration for each category.
+ * @returns The current system monitor info.
+ */
+declare function useSystemMonitor(options?: SystemMonitorOptions): SystemMonitorInfo;
+//#endregion
+//#region src/themes/index.d.ts
+/**
+ * Collection of pre-built xterm color themes.
+ *
+ * Pass any of these values to the `theme` option of {@link useTerminal}.
+ *
+ * @example
+ * ```tsx
+ * const { terminalRef, instance } = useTerminal({
+ *   theme: TerminalThemes.dracula,
+ * });
+ * ```
+ */
+declare const TerminalThemes: {
+  /** Dark themes with a transparent background. */readonly dark: {
+    /** Default dark theme using Tailwind color palette. */readonly default: _$_xterm_xterm0.ITheme; /** Modern dark theme using Slate/Rose color palette. */
+    readonly modern: _$_xterm_xterm0.ITheme;
+  }; /** Light themes. */
+  readonly light: {
+    /** Default light theme. */readonly default: _$_xterm_xterm0.ITheme; /** Modern light theme. */
+    readonly modern: _$_xterm_xterm0.ITheme;
+  }; /** Nord theme — an arctic, north-bluish color palette. */
+  readonly nord: _$_xterm_xterm0.ITheme; /** Dracula theme — a dark theme with vivid accent colors. */
+  readonly dracula: _$_xterm_xterm0.ITheme; /** Gruvbox themes — a retro groove color scheme. */
+  readonly gruvbox: {
+    /** Gruvbox dark variant. */readonly dark: _$_xterm_xterm0.ITheme; /** Gruvbox light variant. */
+    readonly light: _$_xterm_xterm0.ITheme;
+  }; /** Solarized themes — a precision color scheme with reduced brightness. */
+  readonly solarized: {
+    /** Solarized dark variant. */readonly dark: _$_xterm_xterm0.ITheme; /** Solarized light variant. */
+    readonly light: _$_xterm_xterm0.ITheme;
+  }; /** One Dark theme — based on Atom's One Dark syntax theme. */
+  readonly oneDark: _$_xterm_xterm0.ITheme; /** Catppuccin themes — a soothing pastel color scheme. */
+  readonly catppuccin: {
+    /** Catppuccin Latte — the light variant. */readonly latte: _$_xterm_xterm0.ITheme; /** Catppuccin Frappé — a cool medium-dark variant. */
+    readonly frappe: _$_xterm_xterm0.ITheme; /** Catppuccin Macchiato — a warm medium-dark variant. */
+    readonly macchiato: _$_xterm_xterm0.ITheme; /** Catppuccin Mocha — the darkest variant. */
+    readonly mocha: _$_xterm_xterm0.ITheme;
+  }; /** Monokai Pro theme — a refined dark theme inspired by Monokai. */
+  readonly monokaiPro: _$_xterm_xterm0.ITheme; /** Tokyo Night theme — a dark theme inspired by Tokyo city lights. */
+  readonly tokyoNight: _$_xterm_xterm0.ITheme; /** Night Owl theme — optimized for late-night coding with low brightness. */
+  readonly nightOwl: _$_xterm_xterm0.ITheme; /** Everforest themes — a green-tinted theme inspired by forests. */
+  readonly everforest: {
+    /** Everforest dark variant. */readonly dark: _$_xterm_xterm0.ITheme; /** Everforest light variant. */
+    readonly light: _$_xterm_xterm0.ITheme;
+  };
+};
+//#endregion
+export { AudioOptions, MediaMetadataOptions, ShellOptions, type ShellResult, SystemMonitorOptions, TerminalInstance, TerminalThemes, UseShellOptions, UseTerminalOptions, runShell, useAudio, useMediaMetadata, useMousePosition, useProperties, useShell, useSystemMonitor, useTerminal };

package/dist/index.mjs

@@ -0,0 +1,32 @@
+import{useCallback as e,useEffect as t,useRef as n,useState as r}from"react";import{FitAddon as i}from"@xterm/addon-fit";import{Terminal as a}from"@xterm/xterm";import"@xterm/xterm/css/xterm.css";var o=class{get baseUrl(){return`http://127.0.0.1:${new URLSearchParams(window.location.search).get(`fluxlay_port`)||`1421`}/v1`}pendingInvokes=new Map;async invoke(e,t){let n=new URLSearchParams(window.location.search).get(`window_label`)||`main`,r=`${e}:${n}:${JSON.stringify(t)}`;if(this.pendingInvokes.has(r))return this.pendingInvokes.get(r);let i=(async()=>{try{let r=await fetch(`${this.baseUrl}/${e}?window_label=${n}`,{method:`POST`,headers:{"Content-Type":`application/json`},body:JSON.stringify(t)});if(!r.ok)throw Error(`Failed to invoke ${e}: ${r.statusText}`);return await r.json()}finally{this.pendingInvokes.delete(r)}})();return this.pendingInvokes.set(r,i),i}subscribe(e,t,n){let r=new AbortController,i=new URLSearchParams(window.location.search).get(`window_label`)||`main`,a=new URLSearchParams({window_label:i,...n}),o=`${this.baseUrl}/${e}?${a.toString()}`;return(async()=>{try{let n=await fetch(o,{signal:r.signal});if(!n.ok||!n.body)throw Error(`Failed to subscribe to ${e}: ${n.statusText}`);let i=n.body.getReader(),a=new TextDecoder,s=``;for(;;){let{done:e,value:n}=await i.read();if(e)break;s+=a.decode(n,{stream:!0});let r=s.split(`
+`);s=r.pop()||``;for(let e of r){let n=e.trim();if(n)try{t(JSON.parse(n))}catch(e){console.error(`Failed to parse NDJSON line:`,e)}}}}catch(t){t.name!==`AbortError`&&console.error(`Error in subscription to ${e}:`,t)}})(),()=>{r.abort()}}};const s=new o;function c(e){let[n,i]=r({rms:0,peak:0,spectrum:[]}),a=e?.numBands;return t(()=>{let e={};a!==void 0&&(e.num_bands=String(a));let t=s.subscribe(`audio-stream`,e=>i(e),e);return()=>{t()}},[a]),n}const l=new o;function u(e){let[n,i]=r({title:null,artist:null,album:null,artwork:null,duration:null,elapsedTime:null,playbackRate:null,isPlaying:!1}),a=e?.intervalMs;return t(()=>{let e={};a!==void 0&&(e.interval_ms=String(a));let t=l.subscribe(`media-metadata-stream`,e=>i(e),e);return()=>{t()}},[a]),n}const d=new o;function f(){let[e,n]=r({x:0,y:0});return t(()=>{let e=new URLSearchParams(window.location.search).get(`window_label`)||`main`,t=d.subscribe(`mouse-stream`,e=>{n({x:e.x,y:-e.y})},{window_label:e});return()=>{t()}},[]),e}const p=new o;function m(){let[e,n]=r({});return t(()=>{p.invoke(`properties`,{}).then(n);let e=p.subscribe(`properties-stream`,e=>n(e));return()=>{e()}},[]),e}const h=new o;async function g(e,t){return await h.invoke(`run-script`,{scriptId:e,columns:t?.columns,lines:t?.lines})}function _(i,a={}){let{showStdout:o=!0,showStderr:s=!1,refreshInterval:c=3e4,terminal:l}=a,[u,d]=r(!1),[f,p]=r(null),[m,h]=r(null),_=n(a);t(()=>{_.current=a},[a]);let v=e(async()=>{if(!u){d(!0),p(null);try{let e=_.current,t=e.columns,n=e.lines;l&&(l.fitAddon.fit(),t=l.terminal.cols,n=l.terminal.rows);let r=await g(i,{...e,columns:t,lines:n});h(r),r.success||p(`Command failed with status ${r.statusCode}: ${r.stderr}`)}catch(e){p(String(e))}finally{d(!1)}}},[i,l]);return t(()=>{if(!l||!m)return;let{terminal:e}=l;if(e.reset(),m.success){let t=``;o&&(t+=m.stdout),s&&(t+=m.stderr);let n=t.trimEnd();if(n){e.write(n);let t=n.split(`
+`).length;e.resize(e.cols,Math.max(1,t))}else e.resize(e.cols,1)}else{let t=`Command failed with status ${m.statusCode}: ${m.stderr}`;e.write(`\x1b[31m${t.trimEnd()}\x1b[0m`),e.resize(e.cols,1)}},[l,m,o,s]),t(()=>{v()},[i]),t(()=>{if(!c)return;let e=setInterval(v,c);return()=>clearInterval(e)},[v,c]),{execute:v,isRunning:u,error:f,result:m}}const v=new o;function y(e){let[n,i]=r({cpuUsage:0,cpuPerCore:[],cpuFrequencyMhz:[],memoryTotal:0,memoryUsed:0,memoryUsage:0,swapTotal:0,swapUsed:0,swapUsage:0,batteryLevel:null,batteryCharging:null,networkRxBytesPerSec:0,networkTxBytesPerSec:0,diskReadBytesPerSec:0,diskWriteBytesPerSec:0,processCount:0,uptimeSecs:0,loadAverage:[0,0,0],disks:[],hostname:``,osName:``,cpuBrand:``,physicalCoreCount:0,logicalCoreCount:0,cpuArch:``,kernelVersion:``}),a=e?.cpuIntervalMs,o=e?.memoryIntervalMs,s=e?.networkIntervalMs,c=e?.diskIoIntervalMs,l=e?.diskSpaceIntervalMs,u=e?.batteryIntervalMs,d=e?.processIntervalMs,f=e?.loadAverageIntervalMs;return t(()=>{let e={};a!==void 0&&(e.cpu_interval_ms=String(a)),o!==void 0&&(e.memory_interval_ms=String(o)),s!==void 0&&(e.network_interval_ms=String(s)),c!==void 0&&(e.disk_io_interval_ms=String(c)),l!==void 0&&(e.disk_space_interval_ms=String(l)),u!==void 0&&(e.battery_interval_ms=String(u)),d!==void 0&&(e.process_interval_ms=String(d)),f!==void 0&&(e.load_average_interval_ms=String(f));let t=v.subscribe(`system-monitor-stream`,e=>i(e),e);return()=>{t()}},[a,o,s,c,l,u,d,f]),n}const b={dark:{default:{background:`#00000000`,foreground:`#ffffff`,cursor:`#00000000`,black:`#000000`,red:`#ef4444`,green:`#22c55e`,yellow:`#f59e0b`,blue:`#3b82f6`,magenta:`#a855f7`,cyan:`#06b6d4`,white:`#ffffff`,brightBlack:`#71717a`,brightRed:`#f87171`,brightGreen:`#4ade80`,brightYellow:`#fbbf24`,brightBlue:`#60a5fa`,brightMagenta:`#c084fc`,brightCyan:`#22d3ee`,brightWhite:`#ffffff`},modern:{background:`#00000000`,foreground:`#e2e8f0`,cursor:`#00000000`,black:`#1e293b`,red:`#f43f5e`,green:`#10b981`,yellow:`#f59e0b`,blue:`#3b82f6`,magenta:`#8b5cf6`,cyan:`#06b6d4`,white:`#f1f5f9`,brightBlack:`#475569`,brightRed:`#fb7185`,brightGreen:`#34d399`,brightYellow:`#fbbf24`,brightBlue:`#60a5fa`,brightMagenta:`#a78bfa`,brightCyan:`#22d3ee`,brightWhite:`#ffffff`}},light:{default:{background:`#00000000`,foreground:`#18181b`,cursor:`#00000000`,black:`#000000`,red:`#ef4444`,green:`#22c55e`,yellow:`#f59e0b`,blue:`#3b82f6`,magenta:`#a855f7`,cyan:`#06b6d4`,white:`#ffffff`,brightBlack:`#71717a`,brightRed:`#f87171`,brightGreen:`#4ade80`,brightYellow:`#fbbf24`,brightBlue:`#60a5fa`,brightMagenta:`#c084fc`,brightCyan:`#22d3ee`,brightWhite:`#ffffff`},modern:{background:`#00000000`,foreground:`#334155`,cursor:`#00000000`,black:`#0f172a`,red:`#dc2626`,green:`#16a34a`,yellow:`#d97706`,blue:`#2563eb`,magenta:`#7c3aed`,cyan:`#0891b2`,white:`#f8fafc`,brightBlack:`#64748b`,brightRed:`#ef4444`,brightGreen:`#22c55e`,brightYellow:`#f59e0b`,brightBlue:`#3b82f6`,brightMagenta:`#8b5cf6`,brightCyan:`#06b6d4`,brightWhite:`#ffffff`}},nord:{background:`#2E3440`,foreground:`#D8DEE9`,cursor:`#D8DEE9`,black:`#3B4252`,red:`#BF616A`,green:`#A3BE8C`,yellow:`#EBCB8B`,blue:`#81A1C1`,magenta:`#B48EAD`,cyan:`#88C0D0`,white:`#E5E9F0`,brightBlack:`#4C566A`,brightRed:`#BF616A`,brightGreen:`#A3BE8C`,brightYellow:`#EBCB8B`,brightBlue:`#81A1C1`,brightMagenta:`#B48EAD`,brightCyan:`#8FBCBB`,brightWhite:`#ECEFF4`},dracula:{background:`#282a36`,foreground:`#f8f8f2`,cursor:`#f8f8f2`,black:`#21222c`,red:`#ff5555`,green:`#50fa7b`,yellow:`#f1fa8c`,blue:`#bd93f9`,magenta:`#ff79c6`,cyan:`#8be9fd`,white:`#f8f8f2`,brightBlack:`#6272a4`,brightRed:`#ff6e6e`,brightGreen:`#69ff94`,brightYellow:`#ffffa5`,brightBlue:`#d6acff`,brightMagenta:`#ff92df`,brightCyan:`#a4ffff`,brightWhite:`#ffffff`},gruvbox:{dark:{background:`#282828`,foreground:`#ebdbb2`,cursor:`#ebdbb2`,black:`#282828`,red:`#cc241d`,green:`#98971a`,yellow:`#d79921`,blue:`#458588`,magenta:`#b16286`,cyan:`#689d6a`,white:`#a89984`,brightBlack:`#928374`,brightRed:`#fb4934`,brightGreen:`#b8bb26`,brightYellow:`#fabd2f`,brightBlue:`#83a598`,brightMagenta:`#d3869b`,brightCyan:`#8ec07c`,brightWhite:`#ebdbb2`},light:{background:`#fbf1c7`,foreground:`#3c3836`,cursor:`#3c3836`,black:`#fbf1c7`,red:`#cc241d`,green:`#98971a`,yellow:`#d79921`,blue:`#458588`,magenta:`#b16286`,cyan:`#689d6a`,white:`#7c6f64`,brightBlack:`#928374`,brightRed:`#9d0006`,brightGreen:`#79740e`,brightYellow:`#b57614`,brightBlue:`#076678`,brightMagenta:`#8f3f71`,brightCyan:`#427b58`,brightWhite:`#3c3836`}},solarized:{dark:{background:`#002b36`,foreground:`#839496`,cursor:`#93a1a1`,black:`#073642`,red:`#dc322f`,green:`#859900`,yellow:`#b58900`,blue:`#268bd2`,magenta:`#d33682`,cyan:`#2aa198`,white:`#eee8d5`,brightBlack:`#002b36`,brightRed:`#cb4b16`,brightGreen:`#586e75`,brightYellow:`#657b83`,brightBlue:`#839496`,brightMagenta:`#6c71c4`,brightCyan:`#93a1a1`,brightWhite:`#fdf6e3`},light:{background:`#fdf6e3`,foreground:`#657b83`,cursor:`#586e75`,black:`#073642`,red:`#dc322f`,green:`#859900`,yellow:`#b58900`,blue:`#268bd2`,magenta:`#d33682`,cyan:`#2aa198`,white:`#eee8d5`,brightBlack:`#002b36`,brightRed:`#cb4b16`,brightGreen:`#586e75`,brightYellow:`#657b83`,brightBlue:`#839496`,brightMagenta:`#6c71c4`,brightCyan:`#93a1a1`,brightWhite:`#fdf6e3`}},oneDark:{background:`#282c34`,foreground:`#abb2bf`,cursor:`#528bff`,black:`#282c34`,red:`#e06c75`,green:`#98c379`,yellow:`#e5c07b`,blue:`#61afef`,magenta:`#c678dd`,cyan:`#56b6c2`,white:`#abb2bf`,brightBlack:`#5c6370`,brightRed:`#e06c75`,brightGreen:`#98c379`,brightYellow:`#e5c07b`,brightBlue:`#61afef`,brightMagenta:`#c678dd`,brightCyan:`#56b6c2`,brightWhite:`#ffffff`},catppuccin:{latte:{background:`#eff1f5`,foreground:`#4c4f69`,cursor:`#dc8a78`,black:`#5c5f77`,red:`#d20f39`,green:`#40a02b`,yellow:`#df8e1d`,blue:`#1e66f5`,magenta:`#ea76cb`,cyan:`#179299`,white:`#acb0be`,brightBlack:`#6c6f85`,brightRed:`#d20f39`,brightGreen:`#40a02b`,brightYellow:`#df8e1d`,brightBlue:`#1e66f5`,brightMagenta:`#ea76cb`,brightCyan:`#179299`,brightWhite:`#bcc0cc`},frappe:{background:`#303446`,foreground:`#c6d0f5`,cursor:`#f2d5cf`,black:`#51576d`,red:`#e78284`,green:`#a6d189`,yellow:`#e5c890`,blue:`#8caaee`,magenta:`#f4b8e4`,cyan:`#81c8be`,white:`#b5bfe2`,brightBlack:`#626880`,brightRed:`#e78284`,brightGreen:`#a6d189`,brightYellow:`#e5c890`,brightBlue:`#8caaee`,brightMagenta:`#f4b8e4`,brightCyan:`#81c8be`,brightWhite:`#a5adce`},macchiato:{background:`#24273a`,foreground:`#cad3f5`,cursor:`#f4dbd6`,black:`#494d64`,red:`#ed8796`,green:`#a6da95`,yellow:`#eed49f`,blue:`#8aadf4`,magenta:`#f5bde6`,cyan:`#8bd5ca`,white:`#b8c0e0`,brightBlack:`#5b6078`,brightRed:`#ed8796`,brightGreen:`#a6da95`,brightYellow:`#eed49f`,brightBlue:`#8aadf4`,brightMagenta:`#f5bde6`,brightCyan:`#8bd5ca`,brightWhite:`#a5adcb`},mocha:{background:`#1e1e2e`,foreground:`#cdd6f4`,cursor:`#f5e0dc`,black:`#45475a`,red:`#f38ba8`,green:`#a6e3a1`,yellow:`#f9e2af`,blue:`#89b4fa`,magenta:`#f5c2e7`,cyan:`#94e2d5`,white:`#bac2de`,brightBlack:`#585b70`,brightRed:`#f38ba8`,brightGreen:`#a6e3a1`,brightYellow:`#f9e2af`,brightBlue:`#89b4fa`,brightMagenta:`#f5c2e7`,brightCyan:`#94e2d5`,brightWhite:`#a6adc8`}},monokaiPro:{background:`#2D2A2E`,foreground:`#FCFCFA`,cursor:`#FCFCFA`,black:`#403E41`,red:`#FF6188`,green:`#A9DC76`,yellow:`#FFD866`,blue:`#FC9867`,magenta:`#AB9DF2`,cyan:`#78DCE8`,white:`#FCFCFA`,brightBlack:`#727072`,brightRed:`#FF6188`,brightGreen:`#A9DC76`,brightYellow:`#FFD866`,brightBlue:`#FC9867`,brightMagenta:`#AB9DF2`,brightCyan:`#78DCE8`,brightWhite:`#FCFCFA`},tokyoNight:{background:`#1a1b26`,foreground:`#a9b1d6`,cursor:`#c0caf5`,black:`#32344a`,red:`#f7768e`,green:`#9ece6a`,yellow:`#e0af68`,blue:`#7aa2f7`,magenta:`#ad8ee6`,cyan:`#449dab`,white:`#787c99`,brightBlack:`#444b6a`,brightRed:`#ff7a93`,brightGreen:`#b9f27c`,brightYellow:`#ff9e64`,brightBlue:`#7da6ff`,brightMagenta:`#bb9af7`,brightCyan:`#0db9d7`,brightWhite:`#acb0d0`},nightOwl:{background:`#011627`,foreground:`#d6deeb`,cursor:`#80a4c2`,black:`#011627`,red:`#ef5350`,green:`#22da6e`,yellow:`#addb67`,blue:`#82aaff`,magenta:`#c792ea`,cyan:`#21c7a8`,white:`#ffffff`,brightBlack:`#575656`,brightRed:`#ef5350`,brightGreen:`#22da6e`,brightYellow:`#ffeb95`,brightBlue:`#82aaff`,brightMagenta:`#c792ea`,brightCyan:`#7fdbca`,brightWhite:`#ffffff`},everforest:{dark:{background:`#2b3339`,foreground:`#d3c6aa`,cursor:`#d3c6aa`,black:`#4b565c`,red:`#e67e80`,green:`#a7c080`,yellow:`#dbbc7f`,blue:`#7fbbb3`,magenta:`#d699b6`,cyan:`#83c092`,white:`#d3c6aa`,brightBlack:`#4b565c`,brightRed:`#e67e80`,brightGreen:`#a7c080`,brightYellow:`#dbbc7f`,brightBlue:`#7fbbb3`,brightMagenta:`#d699b6`,brightCyan:`#83c092`,brightWhite:`#d3c6aa`},light:{background:`#fdf6e3`,foreground:`#5c6a72`,cursor:`#5c6a72`,black:`#fdf6e3`,red:`#f85552`,green:`#8da101`,yellow:`#dfa000`,blue:`#3a94c5`,magenta:`#df69ba`,cyan:`#35a77c`,white:`#dfddc8`,brightBlack:`#5c6a72`,brightRed:`#f85552`,brightGreen:`#8da101`,brightYellow:`#dfa000`,brightBlue:`#3a94c5`,brightMagenta:`#df69ba`,brightCyan:`#35a77c`,brightWhite:`#5c6a72`}}};function x(e={}){let{fontSize:o=12,fontFamily:s=`ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`,theme:c=b.dark.default}=e,l=n(null),[u,d]=r(null);return t(()=>{if(!l.current)return;let e=document.createElement(`style`);e.textContent=`
+      .xterm-char-measure-element {
+        position: absolute !important;
+        top: 0 !important;
+        left: -9999px !important;
+        visibility: hidden !important;
+        pointer-events: none !important;
+      }
+      .xterm-helper-textarea {
+        position: absolute !important;
+        opacity: 0 !important;
+        left: -9999px !important;
+        pointer-events: none !important;
+      }
+      .xterm-viewport {
+        display: none !important;
+      }
+      .xterm-screen {
+        display: block !important;
+        width: 100% !important;
+        height: auto !important;
+      }
+      .xterm-rows {
+        line-height: normal !important;
+        user-select: text !important; /* Allow native HTML text selection. */
+      }
+      .xterm-selection {
+        display: none !important; /* Hide xterm's own selection overlay. */
+      }
+    `,document.head.appendChild(e);let t=new a({fontSize:o,fontFamily:s,disableStdin:!0,cursorBlink:!1,convertEol:!0,scrollback:0,theme:c}),n=new i;return t.loadAddon(n),t.open(l.current),t.write(`\x1B[?25l`),d({terminal:t,fitAddon:n}),()=>{document.head.contains(e)&&document.head.removeChild(e),t.dispose(),d(null)}},[o,s]),{terminalRef:l,instance:u}}export{b as TerminalThemes,g as runShell,c as useAudio,u as useMediaMetadata,f as useMousePosition,m as useProperties,_ as useShell,y as useSystemMonitor,x as useTerminal};

package/package.json

@@ -1,47 +1,43 @@
 {
   "name": "@fluxlay/react",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "SDK for building Fluxlay wallpapers with React",
-  "license": "SEE LICENSE IN LICENSE.txt",
-  "homepage": "https://fluxlay.com",
   "keywords": [
-    "fluxlay",
-    "wallpaper",
     "desktop",
+    "fluxlay",
     "react",
-    "sdk"
+    "sdk",
+    "wallpaper"
   ],
-  "type": "module",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "style": "./dist/sdk.css",
+  "homepage": "https://fluxlay.com",
+  "license": "SEE LICENSE IN LICENSE.txt",
   "files": [
     "dist"
   ],
+  "type": "module",
+  "main": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    },
-    "./dist/sdk.css": "./dist/sdk.css"
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
+    }
   },
   "dependencies": {
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/xterm": "^6.0.0"
   },
-  "peerDependencies": {
-    "react": "^19.0.0"
-  },
   "devDependencies": {
     "@types/react": "^19.2.14",
     "react": "^19.2.4",
-    "typescript": "^5.9.3",
-    "vite": "^8.0.0",
-    "vite-plugin-dts": "^4.5.4"
+    "tsdown": "^0.21.7",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0"
   },
   "scripts": {
-    "build": "vite build",
-    "check": "biome check --write",
-    "typecheck": "tsc --noEmit"
+    "build": "tsdown",
+    "check": "oxlint --type-aware --type-check --fix && oxfmt --write ."
   }
 }