🧰 zesdk

🎨 Overview

zesdk packages the proven patterns of the Ze-family desktop apps (Zenote, ZeChat, ZeRunner…) into one small library: a unified design-token vocabulary with light/dark theming, a dual-runtime Tauri bridge, a data-driven app shell (sidebar, views, search, console, statusbar) and promise-based components — all plain ESM and plain CSS, no framework, no build step required.

✨ Features

• 🌸 One design language — Kawaii-Blue tokens, light + dark via data-theme; re-skin an app by overriding the brand ramp only.
• 🔌 Dual-runtime bridge — invoke/listen/convertFileSrc hit native Tauri IPC on desktop and /api/* HTTP + SSE in a plain browser, so every app gets a web mode for free.
• 🧱 App shell — createShell() builds the sidebar + header + views + footer skeleton; views are a registry, the sidebar tree is data-driven, the console drawer renders backend logs automatically.
• 🪟 Components — promise-based Modal (alert/confirm/prompt/custom/approval sheet), toast, context/dropdown Menu, persisted splitter, Ctrl+Shift+P command palette, lazy tabs, schema-driven settingsDialog.
• 🔒 Strict-CSP safe — Nunito + Inter bundled locally (SIL OFL); the kit never calls a CDN.
• 🚫 Zero dependencies — works with withGlobalTauri (no bundler) or as npm imports under Vite.

🚀 Getting started

npm install zesdk

<link rel="stylesheet" href="node_modules/zesdk/css/zesdk.css">

// app.js — boot only, keep it under 150 lines
import { createShell, createStore, invoke, toast } from "zesdk";

const store = createStore({ notes: [], current: null });

const shell = createShell({
  brand: { name: "MyApp", logo: "logo.png" },
  sidebar: { filter: true, collapsible: true },
  search: (q) => invoke("search_query", { q }),
  console: true,
  statusbar: true,
  store,
});

shell.views.register("notes", {
  title: "Notes",
  icon: "document",
  headerActions: [{ icon: "plus", label: "New note", primary: true, onClick: newNote }],
  mount(el, store) { /* build DOM once */ },
  show(store) { /* refresh data */ },
});

shell.views.show("notes");
toast.ok("Ready");

Bundler-free apps (zenote style) vendor the package once and import with relative paths:

cp -r node_modules/zesdk src/vendor/zesdk

📦 What's inside

| Import | Contents | |---|---| | zesdk | Everything below, re-exported | | zesdk/bridge | invoke, listen, convertFileSrc, getVersion, isWeb | | zesdk/store | createStore — reactive per-key state | | zesdk/dom | $, h, raw, escapeHtml, escapeRegExp, debounce, fmtDate, fmtBytes | | zesdk/icons | icon(name, size) — Feather-based set | | zesdk/theme | theme.set/get/toggle/onChange | | zesdk/shell | createShell — the app skeleton | | zesdk/components/* | Modal, toast, Menu, splitter, palette, tabs, settingsDialog | | zesdk/css/zesdk.css | tokens + base + components, single import |

📖 Documentation

Full API documentation with examples lives in the ZeSDK docs (docs/index.html — self-contained, open in any browser).

🦀 Companion crate

The Rust half — profile, vault, logger, search index, MCP server, web-mode server, CLI scaffolding — ships separately as the zecore crate.

📄 License

MIT © INFODEV. Bundled fonts under the SIL Open Font License.