@hanzogui/tauri 8.0.0

package/dist/esm/window.native.js

@@ -0,0 +1,66 @@
+import { useEffect, useState } from "react";
+import { isTauri } from "./isTauri.native.js";
+async function currentWindow() {
+  if (!isTauri()) return null;
+  var {
+    getCurrentWindow
+  } = await import("@tauri-apps/api/window");
+  return getCurrentWindow();
+}
+var windowControls = {
+  minimize: async function () {
+    var _this;
+    return (_this = await currentWindow()) === null || _this === void 0 ? void 0 : _this.minimize();
+  },
+  toggleMaximize: async function () {
+    var _this;
+    return (_this = await currentWindow()) === null || _this === void 0 ? void 0 : _this.toggleMaximize();
+  },
+  close: async function () {
+    var _this;
+    return (_this = await currentWindow()) === null || _this === void 0 ? void 0 : _this.close();
+  },
+  hide: async function () {
+    var _this;
+    return (_this = await currentWindow()) === null || _this === void 0 ? void 0 : _this.hide();
+  },
+  startDragging: async function () {
+    var _this;
+    return (_this = await currentWindow()) === null || _this === void 0 ? void 0 : _this.startDragging();
+  },
+  isMaximized: async function () {
+    var _this;
+    var _isMaximized;
+    return (_isMaximized = (_this = await currentWindow()) === null || _this === void 0 ? void 0 : _this.isMaximized()) !== null && _isMaximized !== void 0 ? _isMaximized : false;
+  },
+  setFullscreen: async function (v) {
+    var _this;
+    return (_this = await currentWindow()) === null || _this === void 0 ? void 0 : _this.setFullscreen(v);
+  }
+};
+function useWindowControls() {
+  var [isMaximized, setIsMaximized] = useState(false);
+  useEffect(function () {
+    if (!isTauri()) return;
+    var unlisten;
+    var active = true;
+    (async function () {
+      var win = await currentWindow();
+      if (!win || !active) return;
+      setIsMaximized(await win.isMaximized());
+      unlisten = await win.onResized(async function () {
+        setIsMaximized(await win.isMaximized());
+      });
+    })();
+    return function () {
+      active = false;
+      unlisten === null || unlisten === void 0 ? void 0 : unlisten();
+    };
+  }, []);
+  return {
+    ...windowControls,
+    isMaximized
+  };
+}
+export { useWindowControls, windowControls };
+//# sourceMappingURL=window.native.js.map

package/dist/esm/window.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useState","isTauri","currentWindow","getCurrentWindow","windowControls","minimize","_this","toggleMaximize","close","hide","startDragging","isMaximized","_isMaximized","setFullscreen","v"],"sources":["../../src/window.ts"],"sourcesContent":[null],"mappings":"AAAA,SAASA,SAAA,EAAWC,QAAA,QAAgB;AACpC,SAASC,OAAA,QAAe;AAOxB,eAAeC,cAAA,EAAgB;EAC7B,IAAI,CAACD,OAAA,CAAQ,GAAG,OAAO;EACvB;IAAME;EAAE,IAAiB,MAAI,MAAM,yBAAO;EAC1C,OAAOA,gBAAA,CAAiB;AAC1B;AAEO,IAAAC,cAAM;EACXC,QAAA,EAAU,eAAAA,CAAA,EAAa;IACvB,IAAAC,KAAA;IACA,OAAO,CAAAA,KAAA,SAAaJ,aAAM,QAAkB,QAAMI,KAAA,uBAAAA,KAAA,CAAAD,QAAA;EAClD;EACAE,cAAA,EAAe,eAAAA,CAAA,EAAa;IAC5B,IAAAD,KAAA;IACA,QAAAA,KAAe,SAAOJ,aAAsB,YAAc,IAAII,KAAA,UAAe,aAAAA,KAAA,CAAAC,cAAA;EAC/E;EAMOC,KAAA,EAAS,eAAAA,CAAA;IACd,IAAMF,KAAC;IAEP,QAAUA,KAAA,GAAM,MAAAJ,aAAA,gBAAAI,KAAA,uBAAAA,KAAA,CAAAE,KAAA;EACd;EACAC,IAAA,EAAI,eAAAA,CAAA;IACJ,IAAIH,KAAA;IACH,OAAC,CAAAA,KAAY,SAAAJ,aAAA,gBAAAI,KAAA,uBAAAA,KAAA,CAAAG,IAAA;EACZ;EACAC,aAAK,iBAAAA,CAAA,EAAgB;IACrB,IAAAJ,KAAA;IACA,QAAAA,KAAW,SAAMJ,aAAc,YAAY,IAAAI,KAAA,uBAAAA,KAAA,CAAAI,aAAA;EACzC;EAAsCC,WACvC,iBAAAA,CAAA;IACH,IAAGL,KAAA;IACH,IAAAM,YAAa;IACX,QAAAA,YAAS,IAAAN,KAAA,SAAAJ,aAAA,gBAAAI,KAAA,uBAAAA,KAAA,CAAAK,WAAA,gBAAAC,YAAA,cAAAA,YAAA;EACT;EAAWC,aACb,iBAAAA,CAAAC,CAAA;IACF,IAAKR,KAAA;IAEL,OAAS,CAAAA,KAAG,SAAAJ,aAAgB,QAAY,QAAAI,KAAA,uBAAAA,KAAA,CAAAO,aAAA,CAAAC,CAAA;EAC1C","ignoreList":[]}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@hanzogui/tauri",
+  "version": "8.0.0",
+  "description": "Tauri desktop adapter for Hanzo GUI — window controls, global shortcuts, fs/shell bridge so hanzogui components run in a Tauri webview.",
+  "files": [
+    "src",
+    "types",
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "types": "./src",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./src/index.ts",
+      "react-native": "./dist/esm/index.native.js",
+      "browser": "./dist/esm/index.mjs",
+      "module": "./dist/esm/index.mjs",
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.cjs",
+      "default": "./dist/esm/index.mjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "hanzogui-build --skip-types",
+    "watch": "hanzogui-build --skip-types --watch",
+    "clean": "hanzogui-build clean",
+    "clean:build": "hanzogui-build clean:build"
+  },
+  "dependencies": {
+    "@tauri-apps/api": "^2.6.0",
+    "@tauri-apps/plugin-fs": "^2.3.0",
+    "@tauri-apps/plugin-global-shortcut": "^2.2.1",
+    "@tauri-apps/plugin-shell": "^2.2.1"
+  },
+  "devDependencies": {
+    "@hanzogui/build": "8.0.0",
+    "@hanzo/gui": "8.0.0",
+    "react": ">=19"
+  },
+  "peerDependencies": {
+    "@hanzo/gui": "*",
+    "react": ">=19"
+  },
+  "license": "BSD-3-Clause",
+  "author": "Hanzo AI <dev@hanzo.ai>"
+}

package/src/TitleBar.tsx

@@ -0,0 +1,71 @@
+import { Text, XStack, styled } from '@hanzo/gui'
+import { useWindowControls } from './window'
+
+// A frameless-window titlebar built entirely from hanzogui primitives + tokens
+// (true-black `$background`, hairline `$borderColor`). It is the proof that a
+// hanzogui component drives the real Tauri OS window through the bridge. The bar
+// is draggable via Tauri's `data-tauri-drag-region`; the buttons call the
+// window controls. Renders harmlessly on the web (controls no-op off-Tauri).
+
+const Control = styled(XStack, {
+  width: 46,
+  height: 32,
+  alignItems: 'center',
+  justifyContent: 'center',
+  cursor: 'pointer',
+  hoverStyle: { backgroundColor: '$color4' },
+  pressStyle: { backgroundColor: '$color5' },
+  animation: 'quick',
+})
+
+const Glyph = styled(Text, {
+  fontFamily: '$mono',
+  fontSize: 13,
+  lineHeight: 13,
+  color: '$color11',
+})
+
+export type TitleBarProps = {
+  title?: string
+}
+
+export function TitleBar({ title = '' }: TitleBarProps) {
+  const { minimize, toggleMaximize, close } = useWindowControls()
+
+  return (
+    <XStack
+      // @ts-expect-error — Tauri drag region is a raw DOM attribute (web/webview)
+      data-tauri-drag-region
+      height={40}
+      alignItems="center"
+      backgroundColor="$background"
+      borderBottomWidth={1}
+      borderBottomColor="$borderColor"
+      userSelect="none"
+    >
+      <Text
+        flex={1}
+        paddingLeft="$3"
+        fontFamily="$body"
+        fontSize={13}
+        color="$color11"
+        // @ts-expect-error — raw DOM attribute so clicks on the title still drag
+        data-tauri-drag-region
+      >
+        {title}
+      </Text>
+
+      <XStack>
+        <Control onPress={() => minimize()}>
+          <Glyph>—</Glyph>
+        </Control>
+        <Control onPress={() => toggleMaximize()}>
+          <Glyph>▢</Glyph>
+        </Control>
+        <Control onPress={() => close()} hoverStyle={{ backgroundColor: '$red9' }}>
+          <Glyph>✕</Glyph>
+        </Control>
+      </XStack>
+    </XStack>
+  )
+}

package/src/index.ts

@@ -0,0 +1,13 @@
+// @hanzogui/tauri — the Tauri desktop weld for Hanzo GUI.
+//
+// hanzogui already targets web (Next/Vite) and native (Expo/RN). This adapter
+// adds the third host: a Tauri webview with a native bridge. The same hanzogui
+// component tree renders in the webview; this package gives it OS window
+// controls, global shortcuts, and fs/shell access — all guarded by isTauri() so
+// nothing breaks on the web.
+
+export { isTauri } from './isTauri'
+export { windowControls, useWindowControls } from './window'
+export { registerShortcut, unregisterShortcut, useGlobalShortcut } from './shortcuts'
+export { readTextFile, writeTextFile, openExternal } from './system'
+export { TitleBar, type TitleBarProps } from './TitleBar'

package/src/isTauri.ts

@@ -0,0 +1,12 @@
+/**
+ * True when running inside a Tauri webview. Tauri v2 injects
+ * `window.__TAURI_INTERNALS__` (and `window.isTauri`) into the page. Every
+ * bridge call guards on this so the same hanzogui component runs unchanged on
+ * the web — off-Tauri the native calls are no-ops.
+ */
+export function isTauri(): boolean {
+  return (
+    typeof window !== 'undefined' &&
+    (!!(window as any).__TAURI_INTERNALS__ || (window as any).isTauri === true)
+  )
+}

package/src/shortcuts.ts

@@ -0,0 +1,37 @@
+import { useEffect } from 'react'
+import { isTauri } from './isTauri'
+
+// Global (OS-wide) shortcuts via @tauri-apps/plugin-global-shortcut. Off-Tauri
+// these no-op, so a component can register e.g. ⌘K to summon a CommandPalette
+// and the same code degrades to an in-page key handler on the web.
+
+export async function registerShortcut(
+  accelerator: string,
+  handler: () => void
+): Promise<void> {
+  if (!isTauri()) return
+  const { register } = await import('@tauri-apps/plugin-global-shortcut')
+  await register(accelerator, (event) => {
+    if (event.state === 'Pressed') handler()
+  })
+}
+
+export async function unregisterShortcut(accelerator: string): Promise<void> {
+  if (!isTauri()) return
+  const { unregister } = await import('@tauri-apps/plugin-global-shortcut')
+  await unregister(accelerator)
+}
+
+/** Register `accelerator` for the lifetime of the component. */
+export function useGlobalShortcut(accelerator: string, handler: () => void) {
+  useEffect(() => {
+    if (!isTauri()) return
+    let cancelled = false
+    registerShortcut(accelerator, handler).catch(() => {})
+    return () => {
+      cancelled = true
+      void cancelled
+      unregisterShortcut(accelerator).catch(() => {})
+    }
+  }, [accelerator, handler])
+}

package/src/system.ts

@@ -0,0 +1,27 @@
+import { isTauri } from './isTauri'
+
+// Thin fs + shell bridge. Each guards on isTauri() and dynamically imports the
+// Tauri plugin, so the web build stays clean. Off-Tauri, reads/opens reject or
+// fall back to the browser (openExternal uses window.open).
+
+export async function readTextFile(path: string): Promise<string> {
+  if (!isTauri()) throw new Error('readTextFile is only available under Tauri')
+  const { readTextFile } = await import('@tauri-apps/plugin-fs')
+  return readTextFile(path)
+}
+
+export async function writeTextFile(path: string, contents: string): Promise<void> {
+  if (!isTauri()) throw new Error('writeTextFile is only available under Tauri')
+  const { writeTextFile } = await import('@tauri-apps/plugin-fs')
+  return writeTextFile(path, contents)
+}
+
+/** Open a URL in the user's default browser (Tauri) or a new tab (web). */
+export async function openExternal(url: string): Promise<void> {
+  if (!isTauri()) {
+    if (typeof window !== 'undefined') window.open(url, '_blank', 'noopener')
+    return
+  }
+  const { open } = await import('@tauri-apps/plugin-shell')
+  await open(url)
+}

package/src/window.ts

@@ -0,0 +1,51 @@
+import { useEffect, useState } from 'react'
+import { isTauri } from './isTauri'
+
+// Window controls for a frameless Tauri window (`decorations: false`). Each call
+// dynamically imports the Tauri API so a web bundle never hard-links it, and
+// no-ops off-Tauri. This is the native bridge that lets a hanzogui titlebar
+// drive the real OS window.
+
+async function currentWindow() {
+  if (!isTauri()) return null
+  const { getCurrentWindow } = await import('@tauri-apps/api/window')
+  return getCurrentWindow()
+}
+
+export const windowControls = {
+  minimize: async () => (await currentWindow())?.minimize(),
+  toggleMaximize: async () => (await currentWindow())?.toggleMaximize(),
+  close: async () => (await currentWindow())?.close(),
+  hide: async () => (await currentWindow())?.hide(),
+  startDragging: async () => (await currentWindow())?.startDragging(),
+  isMaximized: async () => (await currentWindow())?.isMaximized() ?? false,
+  setFullscreen: async (v: boolean) => (await currentWindow())?.setFullscreen(v),
+}
+
+/**
+ * React hook exposing the window controls plus live maximized state. Bind these
+ * to a hanzogui titlebar — see {@link TitleBar}.
+ */
+export function useWindowControls() {
+  const [isMaximized, setIsMaximized] = useState(false)
+
+  useEffect(() => {
+    if (!isTauri()) return
+    let unlisten: (() => void) | undefined
+    let active = true
+    ;(async () => {
+      const win = await currentWindow()
+      if (!win || !active) return
+      setIsMaximized(await win.isMaximized())
+      unlisten = await win.onResized(async () => {
+        setIsMaximized(await win.isMaximized())
+      })
+    })()
+    return () => {
+      active = false
+      unlisten?.()
+    }
+  }, [])
+
+  return { ...windowControls, isMaximized }
+}