create-theokit 1.23.5 → 1.23.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-theokit",
-  "version": "1.23.5",
+  "version": "1.23.6",
   "type": "module",
   "description": "Scaffold a new TheoKit project",
   "license": "Apache-2.0",

package/templates/surfaces/desktop/.github/workflows/release.yml.tmpl

@@ -0,0 +1,83 @@
+# Cross-platform desktop release — builds {{name}} for macOS (Apple Silicon + Intel),
+# Linux (x64 + arm64) and Windows, then drafts a GitHub release with the installers.
+#
+# WHY a matrix of native runners: Tauri does NOT support cross-compiling between operating
+# systems (macOS/Linux bundles REQUIRE their own host; only Windows-NSIS-from-Linux is a
+# last-resort exception). Each target therefore builds on its own runner — the documented
+# best practice: https://v2.tauri.app/distribute/pipelines/github/
+#
+# ⚠️ PREREQUISITE — the sidecar must be a real binary, not the dev shim.
+#    `tauri build` runs `scripts/build-sidecar.mjs`, which in DEV writes a POSIX shell shim
+#    that execs this repo's local `tsx` (absolute build-time paths, requires Node on the user's
+#    machine). That shim is NOT portable to end users, and `build-sidecar.mjs` intentionally
+#    FAILS on Windows (Tauri needs a `.exe`). Before this workflow can ship a working app you
+#    MUST compile `sidecar/sidecar.ts` to a self-contained per-platform binary at
+#    `src-tauri/binaries/theo-sidecar-<target-triple>[.exe]`. See README-surface.md § Packaging.
+#
+# Trigger: push to the `release` branch, or run manually (Actions → Run workflow).
+name: release-desktop
+
+on:
+  workflow_dispatch:
+  push:
+    branches: [release]
+
+jobs:
+  build:
+    permissions:
+      contents: write
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - platform: macos-latest # Apple Silicon → .app / .dmg
+            args: --target aarch64-apple-darwin
+          - platform: macos-latest # Intel → .app / .dmg
+            args: --target x86_64-apple-darwin
+          - platform: ubuntu-22.04 # Linux x64 → .deb / .AppImage / .rpm
+            args: ''
+          - platform: ubuntu-22.04-arm # Linux arm64
+            args: ''
+          - platform: windows-latest # Windows → .exe (NSIS) / .msi
+            args: ''
+
+    runs-on: ${{ matrix.platform }}
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install Linux system dependencies
+        if: startsWith(matrix.platform, 'ubuntu')
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf xdg-utils
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: npm
+
+      - name: Install Rust (stable)
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          targets: ${{ matrix.platform == 'macos-latest' && 'aarch64-apple-darwin,x86_64-apple-darwin' || '' }}
+
+      - name: Rust cache
+        uses: swatinem/rust-cache@v2
+        with:
+          workspaces: ./src-tauri -> target
+
+      - name: Install frontend dependencies
+        run: npm install
+
+      - name: Build + release with Tauri
+        uses: tauri-apps/tauri-action@v0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tagName: {{name}}-v__VERSION__
+          releaseName: '{{name}} v__VERSION__'
+          releaseBody: 'See the assets below to download and install this version.'
+          releaseDraft: true
+          prerelease: false
+          args: ${{ matrix.args }}

package/templates/surfaces/desktop/README-surface.md.tmpl

@@ -53,3 +53,17 @@ externalBin that a shell shim cannot satisfy (`build:sidecar` fails loud on win3
 before building. Options: **Node SEA** (single-executable app — runs under Node, where the stream works),
 or `bun build --compile`/`pkg` (verify the ai-sdk token stream survives your bundler first). Replace the
 `build:sidecar` script with your compile command and keep the same output path.
+
+### Cross-platform release (macOS · Linux · Windows)
+
+Tauri does **not** cross-compile between operating systems — macOS/Linux bundles must be built on their own
+host, and only Windows-NSIS-from-Linux is a fragile last resort ([docs](https://v2.tauri.app/distribute/pipelines/github/)).
+The best practice is a **matrix of native CI runners**, so this surface ships
+`.github/workflows/release.yml`: on push to a `release` branch (or a manual run) it builds `{{name}}` on
+`macos-latest` (Apple Silicon **and** Intel), `ubuntu-22.04` (x64 + arm64) and `windows-latest`, then drafts
+a GitHub release with the installers (`.dmg`/`.app`, `.deb`/`.AppImage`/`.rpm`, `.msi`/NSIS `.exe`).
+
+Before that workflow can ship a **working** app, resolve the sidecar gap above (the CI `tauri build` runs the
+same `build:sidecar`, which fails on the Windows runner and produces a non-portable shim on macOS/Linux). For
+public distribution you also need **code signing** — macOS notarization (Apple Developer ID) and a Windows
+signing certificate; see [Tauri › Distribute](https://v2.tauri.app/distribute/).

package/templates/surfaces/desktop/frontend/src/App.tsx.tmpl

@@ -42,7 +42,6 @@ const transport = new ChannelTransport({ source: createTauriChannelSource(tauri.
 
 // The window is frameless (`decorations: false` in tauri.conf.json) so the OS title bar can't clash with
 // the app background — the app owns its top bar. These drive the native window from our custom controls.
-// (The drag + these calls need `core:window:*` permissions in `src-tauri/capabilities/default.json`.)
 const appWindow = (
   globalThis as {
     __TAURI__?: {
@@ -75,40 +74,30 @@ const STARTERS: QuickAction[] = [
 ]
 
 // App-level layout in inline styles (the desktop bundle has no Tailwind). Colors read the theme CSS vars
-// `@theokit/ui` sets, so light/dark + the theme switcher cascade exactly like the web surface.
+// `@theokit/ui` sets — and those vars are `oklch()` colors, so wrap them in `color-mix(in oklch, …)` for
+// alpha (NOT `hsl(var(--x) / a)`, which is invalid CSS and silently renders transparent).
 const styles = {
   page: {
     display: 'flex',
     flexDirection: 'column',
     height: '100vh',
-    background: 'hsl(var(--background))',
-    color: 'hsl(var(--foreground))',
+    background: 'var(--background)',
+    color: 'var(--foreground)',
   },
   header: {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'space-between',
-    // A faint gray wash (4% of the text color over the background) makes the frameless title bar
-    // read as a distinct strip in BOTH themes, without breaking the seamless feel.
-    background: 'hsl(var(--foreground) / 0.04)',
-    borderBottom: '1px solid hsl(var(--border) / 0.6)',
-    padding: '8px 16px',
+    // The frameless title bar is its own DISTINCT band: the `--muted` surface reads clearly apart
+    // from the content background (adapts to light/dark), with a border to seal the strip.
+    background: 'var(--muted)',
+    borderBottom: '1px solid var(--border)',
+    // Slim title bar — thin vertical padding keeps the strip compact.
+    padding: '3px 12px',
   },
   brand: { display: 'inline-flex', alignItems: 'center', gap: 8 },
-  brandName: { fontWeight: 600, fontSize: 13, letterSpacing: '-0.01em' },
-  headerRight: { display: 'inline-flex', alignItems: 'center', gap: 4 },
-  winBtn: {
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: 28,
-    height: 28,
-    border: 'none',
-    borderRadius: 6,
-    background: 'transparent',
-    color: 'hsl(var(--muted-foreground))',
-    cursor: 'pointer',
-  },
+  brandName: { fontWeight: 600, fontSize: 12, letterSpacing: '-0.01em' },
+  headerRight: { display: 'inline-flex', alignItems: 'center', gap: 2 },
   scroll: { flex: 1, overflowY: 'auto', minHeight: 0 },
   column: {
     margin: '0 auto',
@@ -120,8 +109,8 @@ const styles = {
     padding: 24,
   },
   composerBar: {
-    borderTop: '1px solid hsl(var(--border) / 0.6)',
-    background: 'hsl(var(--background) / 0.5)',
+    borderTop: '1px solid color-mix(in oklch, var(--border) 60%, transparent)',
+    background: 'color-mix(in oklch, var(--background) 50%, transparent)',
   },
   composerInner: { margin: '0 auto', width: '100%', maxWidth: 768, padding: '16px 24px' },
 } satisfies Record<string, CSSProperties>
@@ -151,43 +140,55 @@ export function App(): ReactElement {
 
   return (
     <TheoUIProvider>
+      {/* Window controls need :hover feedback — inline styles can't do pseudo-classes, so the button
+          appearance (incl. hover, and the classic red close) lives in this small stylesheet. */}
+      <style>{`
+        .tk-winbtn {
+          display: inline-flex; align-items: center; justify-content: center;
+          width: 20px; height: 20px; border: none; border-radius: 6px;
+          background: transparent; color: var(--muted-foreground); cursor: pointer;
+          transition: background 0.12s ease, color 0.12s ease;
+        }
+        .tk-winbtn:hover { background: color-mix(in oklch, var(--foreground) 12%, transparent); color: var(--foreground); }
+        .tk-winbtn--close:hover { background: #e5484d; color: #fff; }
+      `}</style>
       <div style={styles.page}>
         {/* Frameless title bar: `data-tauri-drag-region` makes the whole strip drag the window; the
-            background is the app background (with a faint wash), so the bar reads as one with the
-            content. Interactive children (theme switcher, window buttons) still receive clicks. */}
+            background is the `--muted` band, so the bar reads as a distinct strip. Interactive
+            children (theme switcher, window buttons) still receive clicks. */}
         <header style={styles.header} data-tauri-drag-region>
           <span style={styles.brand}>
-            <Bot size={18} style={{ color: 'hsl(var(--primary))' }} aria-hidden />
-            <span style={styles.brandName}>{{name}} — TheoKit agent</span>
+            <Bot size={18} style={{ color: 'var(--primary)' }} aria-hidden />
+            <span style={styles.brandName}>{{name}}</span>
           </span>
           <span style={styles.headerRight}>
             <ThemeSwitcher />
             <button
               type="button"
-              style={styles.winBtn}
+              className="tk-winbtn"
               onClick={minimizeWindow}
               aria-label="Minimize"
               title="Minimize"
             >
-              <Minus size={16} />
+              <Minus size={15} />
             </button>
             <button
               type="button"
-              style={styles.winBtn}
+              className="tk-winbtn"
               onClick={maximizeWindow}
               aria-label="Maximize"
               title="Maximize"
             >
-              <Square size={13} />
+              <Square size={12} />
             </button>
             <button
               type="button"
-              style={styles.winBtn}
+              className="tk-winbtn tk-winbtn--close"
               onClick={closeWindow}
               aria-label="Close"
               title="Close"
             >
-              <X size={16} />
+              <X size={15} />
             </button>
           </span>
         </header>