refactor(sdk): remove dead streaming subsystem + fully-commented connect-qr page (~1.2k LOC, red-team #13/#42/#56) — build green

fix(chat): stream reasoning_content so thinking models reply (#19)

.dockerignore

@@ -7,7 +7,7 @@ node_modules
 **/*/node_modules
 **/*/dist
 **/*/.turbo
-**/*/.tamagui
+**/*/.gui
 
 # expo
 **/*/.expo

.github/workflows/build.yml

@@ -0,0 +1,25 @@
+name: Build image
+
+# Builds + pushes ghcr.io/hanzoai/gui (the gui.hanzo.ai site, served on
+# :3000 by the repo's existing Dockerfile) on a v* semver tag via the
+# canonical reusable workflow, natively on the self-hosted arcd fleet
+# (NO GitHub-hosted runners). Semver-only tags. Deployable on DOKS.
+#
+# This is the CONTAINER-image path. The repo's publish-gui*.yml workflows
+# publish the npm library packages and are unaffected.
+on:
+  push:
+    tags: ['v*']
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  packages: write
+  id-token: write
+
+jobs:
+  docker:
+    uses: hanzoai/.github/.github/workflows/docker-build.yml@main
+    with:
+      image: ghcr.io/hanzoai/gui
+    secrets: inherit

.github/workflows/changelog.yml

@@ -8,7 +8,7 @@ on:
 jobs:
   tagged-release:
     name: Changelog
-    runs-on: hanzo-build-linux-amd64
+    runs-on: [self-hosted, linux, amd64]
     # needs: release
 
     steps:

.github/workflows/checks.yaml

@@ -19,7 +19,7 @@ concurrency:
 
 jobs:
   checks:
-    runs-on: hanzo-build-linux-amd64
+    runs-on: [self-hosted, linux, amd64]
     steps:
       - name: Checkout
         uses: actions/checkout@v5
@@ -37,7 +37,7 @@ jobs:
         run: bun run lint
 
   unit-tests:
-    runs-on: hanzo-build-linux-amd64
+    runs-on: [self-hosted, linux, amd64]
     env:
       NODE_OPTIONS: '--max-old-space-size=6144'
     steps:
@@ -66,7 +66,7 @@ jobs:
         run: bun turbo run test:web --filter='!@hanzogui/kitchen-sink' --concurrency=1
 
   changes:
-    runs-on: hanzo-build-linux-amd64
+    runs-on: [self-hosted, linux, amd64]
     outputs:
       integration-relevant: ${{ steps.filter.outputs.integration-relevant }}
     steps:
@@ -90,7 +90,7 @@ jobs:
   integration-tests:
     needs: changes
     if: needs.changes.outputs.integration-relevant == 'true'
-    runs-on: hanzo-build-linux-amd64
+    runs-on: [self-hosted, linux, amd64]
     strategy:
       fail-fast: false
       matrix:

.github/workflows/publish-gui-all.yml

@@ -0,0 +1,108 @@
+name: Publish gui (all packages)
+
+# Publishes the FULL gui surface — every @hanzogui/* primitive AND the
+# `hanzogui` + `@hanzo/gui` umbrellas — at the current on-disk version
+# (7.x), with freshly built `dist/`. This is the fix for the broken
+# 7.0.0 publish, where the primitives shipped without `dist/` and
+# `@hanzo/gui` therefore failed to resolve for standalone consumers.
+#
+# `publish-gui.yml` only ships the umbrella; this ships the primitives it
+# depends on so a clean `npm i @hanzo/gui` works end-to-end.
+#
+# Trigger: manual (workflow_dispatch, type "publish" to confirm) or by
+# pushing a `release/gui-all-v*` tag.
+#
+# NPM_TOKEN resolution mirrors publish-gui.yml:
+#   1. KMS via Universal Auth (KMS_CLIENT_ID/SECRET → short-lived token)
+#   2. KMS via long-lived HANZO_API_KEY (legacy bootstrap)
+#   3. Direct repo secret NPM_TOKEN (fallback)
+on:
+  workflow_dispatch:
+    inputs:
+      confirm:
+        description: 'Type "publish" to publish ALL gui packages at the current version'
+        required: true
+        default: ''
+  push:
+    tags:
+      - 'release/gui-all-v*'
+
+permissions:
+  contents: read
+  id-token: write
+
+jobs:
+  publish-all:
+    name: Build + publish all gui packages
+    runs-on: [self-hosted, linux, arm64]
+    if: github.event_name == 'push' || github.event.inputs.confirm == 'publish'
+    steps:
+      - uses: actions/checkout@v5
+        with:
+          fetch-depth: 0
+
+      - name: Install
+        uses: ./.github/actions/install
+
+      - name: Build all packages
+        # Fresh checkout has no dist; --republish skips release.ts's own
+        # build, so build here explicitly. `npm pack` (inside release.ts)
+        # will fail loudly if any dist tree is missing.
+        run: bun run build
+
+      - name: Resolve NPM_TOKEN (KMS → fallback to repo secret)
+        id: token
+        env:
+          DIRECT_NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          KMS_CLIENT_ID: ${{ secrets.KMS_CLIENT_ID }}
+          KMS_CLIENT_SECRET: ${{ secrets.KMS_CLIENT_SECRET }}
+          HANZO_API_KEY: ${{ secrets.HANZO_API_KEY }}
+          KMS_ENDPOINT: ${{ vars.KMS_ENDPOINT || 'https://kms.hanzo.ai' }}
+          KMS_WORKSPACE_ID: ${{ vars.KMS_WORKSPACE_ID_GUI || 'e1359bf4-31b4-4dfa-bb90-323e2c298ad8' }}
+        run: |
+          set -eu
+          npm_token=""
+          if [ -n "${KMS_CLIENT_ID:-}" ] && [ -n "${KMS_CLIENT_SECRET:-}" ]; then
+            HANZO_API_KEY=$(curl -sf "${KMS_ENDPOINT}/api/v1/auth/universal-auth/login" \
+              -H "Content-Type: application/json" \
+              -d "{\"clientId\":\"${KMS_CLIENT_ID}\",\"clientSecret\":\"${KMS_CLIENT_SECRET}\"}" \
+              | jq -r '.accessToken') || true
+          fi
+          if [ -n "${HANZO_API_KEY:-}" ]; then
+            response=$(curl -sf \
+              "${KMS_ENDPOINT}/api/v3/secrets/raw?workspaceId=${KMS_WORKSPACE_ID}&secretPath=/publish&environment=prod" \
+              -H "Authorization: Bearer ${HANZO_API_KEY}" 2>/dev/null) || true
+            if [ -n "${response:-}" ]; then
+              npm_token=$(echo "$response" | jq -r '.secrets[] | select(.secretKey=="NPM_TOKEN") | .secretValue // empty')
+            fi
+          fi
+          if [ -z "$npm_token" ]; then
+            npm_token="${DIRECT_NPM_TOKEN:-}"
+            if [ -n "$npm_token" ]; then
+              echo "Using NPM_TOKEN from repo secret (KMS path unavailable)."
+            fi
+          fi
+          if [ -z "$npm_token" ]; then
+            echo "::error::No NPM_TOKEN available — need KMS_CLIENT_ID/SECRET, HANZO_API_KEY, or NPM_TOKEN repo secret."
+            exit 1
+          fi
+          echo "::add-mask::${npm_token}"
+          echo "npm_token=${npm_token}" >> "$GITHUB_OUTPUT"
+
+      - name: Configure npm registry
+        env:
+          NPM_TOKEN: ${{ steps.token.outputs.npm_token }}
+        run: |
+          echo 'registry=https://registry.npmjs.org/' > ~/.npmrc
+          echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" >> ~/.npmrc
+
+      - name: Publish gui surface (primitives + umbrella + @hanzo/gui alias)
+        # Targeted publish of just the @hanzogui/* closure + hanzogui +
+        # @hanzo/gui, at the current on-disk version. Avoids release.ts's
+        # whole-workspace fan-out (which fails packing unrelated
+        # @hanzo_network/* packages) and its fragile tarball-rename step.
+        # Idempotent — skips any name@version already on npm.
+        env:
+          NPM_TOKEN: ${{ steps.token.outputs.npm_token }}
+          NODE_AUTH_TOKEN: ${{ steps.token.outputs.npm_token }}
+        run: node ./scripts/publish-gui-surface.mjs

.github/workflows/publish-gui.yml

@@ -0,0 +1,247 @@
+name: Publish gui
+
+# Triggered only on `release/gui-v*` tags. Bumping a workspace
+# version alone does NOT publish — a tag push gates the run so an
+# accidental version bump on `main` cannot ship to npm. Tag scheme:
+#   release/gui-v7.1.0   → gui@7.1.0
+#
+# Note: @hanzogui/admin moved to hanzoai/admin and publishes from there.
+#
+# NPM_TOKEN resolution order:
+#   1. KMS via Universal Auth (KMS_CLIENT_ID/SECRET → short-lived token)
+#   2. KMS via long-lived HANZO_API_KEY (legacy bootstrap)
+#   3. Direct repo secret NPM_TOKEN (fallback until KMS is provisioned)
+# Same shape as `~/work/hanzo/login/.github/workflows/deploy.yml`.
+#
+# Smoke test: after pack, install the .tgz tarball into a throwaway
+# /tmp consumer and require() it. If the static extractor or vite
+# build chokes on an import shape, this catches it before publish.
+on:
+  push:
+    tags:
+      - 'release/gui-v*'
+
+permissions:
+  contents: read
+  id-token: write
+
+jobs:
+  publish:
+    name: Build, smoke-test, publish
+    runs-on: [self-hosted, linux, arm64]
+    steps:
+      - uses: actions/checkout@v5
+        with:
+          fetch-depth: 0
+
+      - name: Install
+        uses: ./.github/actions/install
+
+      - name: Resolve NPM_TOKEN (KMS → fallback to repo secret)
+        id: token
+        env:
+          DIRECT_NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          KMS_CLIENT_ID: ${{ secrets.KMS_CLIENT_ID }}
+          KMS_CLIENT_SECRET: ${{ secrets.KMS_CLIENT_SECRET }}
+          HANZO_API_KEY: ${{ secrets.HANZO_API_KEY }}
+          KMS_ENDPOINT: ${{ vars.KMS_ENDPOINT || 'https://kms.hanzo.ai' }}
+          KMS_WORKSPACE_ID: ${{ vars.KMS_WORKSPACE_ID_GUI || 'e1359bf4-31b4-4dfa-bb90-323e2c298ad8' }}
+        run: |
+          set -eu
+          # Preferred (when configured): pull NPM_TOKEN from KMS at runtime
+          # via Universal Auth (KMS_CLIENT_ID/SECRET) or legacy HANZO_API_KEY.
+          # Fallback: direct repo-secret NPM_TOKEN. The fallback keeps the
+          # publish path unblocked while KMS provisioning catches up.
+          npm_token=""
+          if [ -n "${KMS_CLIENT_ID:-}" ] && [ -n "${KMS_CLIENT_SECRET:-}" ]; then
+            HANZO_API_KEY=$(curl -sf "${KMS_ENDPOINT}/api/v1/auth/universal-auth/login" \
+              -H "Content-Type: application/json" \
+              -d "{\"clientId\":\"${KMS_CLIENT_ID}\",\"clientSecret\":\"${KMS_CLIENT_SECRET}\"}" \
+              | jq -r '.accessToken') || true
+          fi
+          if [ -n "${HANZO_API_KEY:-}" ]; then
+            response=$(curl -sf \
+              "${KMS_ENDPOINT}/api/v3/secrets/raw?workspaceId=${KMS_WORKSPACE_ID}&secretPath=/publish&environment=prod" \
+              -H "Authorization: Bearer ${HANZO_API_KEY}" 2>/dev/null) || true
+            if [ -n "${response:-}" ]; then
+              npm_token=$(echo "$response" | jq -r '.secrets[] | select(.secretKey=="NPM_TOKEN") | .secretValue // empty')
+            fi
+          fi
+          if [ -z "$npm_token" ]; then
+            npm_token="${DIRECT_NPM_TOKEN:-}"
+            if [ -n "$npm_token" ]; then
+              echo "Using NPM_TOKEN from repo secret (KMS path unavailable)."
+            fi
+          fi
+          if [ -z "$npm_token" ]; then
+            echo "::error::No NPM_TOKEN available — need either KMS_CLIENT_ID/SECRET, HANZO_API_KEY, or NPM_TOKEN repo secret."
+            exit 1
+          fi
+          echo "::add-mask::${npm_token}"
+          echo "npm_token=${npm_token}" >> "$GITHUB_OUTPUT"
+
+      - name: Configure npm registry
+        env:
+          NPM_TOKEN: ${{ steps.token.outputs.npm_token }}
+        run: |
+          echo 'registry=https://registry.npmjs.org/' > ~/.npmrc
+          echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" >> ~/.npmrc
+
+      - name: Build (postinstall already built js with SKIP_TYPES=1)
+        # The install step ran `bun install` which fires postinstall
+        # → `bun run build:js` (SKIP_TYPES=1 turbo run build --force).
+        # That covers the publish target and every workspace consumer,
+        # so a separate filtered build here would be a no-op rebuild.
+        # Verifying the dist tree exists is enough — pack will fail
+        # loudly if it doesn't.
+        run: |
+          test -d pkgs/ui/hanzogui/dist || (echo "::error::gui/dist missing"; exit 1)
+
+      - name: Build workspace version map
+        # Map every workspace package name to its on-disk version so we can
+        # resolve `workspace:*` deps to the actual version each subpackage is
+        # at. The umbrella is on the 7.x track but the @hanzogui/* primitives
+        # are still on the 102.x canary stream — they are NOT republished
+        # here, only referenced.
+        id: ws-versions
+        run: |
+          set -eu
+          node -e "
+            const fs=require('fs'); const path=require('path');
+            const map={};
+            const dirs=['pkgs/ui','pkgs/core','pkgs/compiler','pkgs'];
+            const collect=(d)=>{
+              if (!fs.existsSync(d)) return;
+              const stat=fs.statSync(d);
+              if (stat.isFile() && d.endsWith('package.json')) {
+                try { const j=JSON.parse(fs.readFileSync(d)); if (j.name && j.version) map[j.name]=j.version; } catch{}
+                return;
+              }
+              if (!stat.isDirectory()) return;
+              const pkg=path.join(d,'package.json');
+              if (fs.existsSync(pkg)) collect(pkg);
+              for (const e of fs.readdirSync(d)) {
+                if (e==='node_modules') continue;
+                collect(path.join(d,e));
+              }
+            };
+            for (const d of dirs) collect(d);
+            fs.writeFileSync('/tmp/ws-versions.json', JSON.stringify(map));
+            console.log('mapped', Object.keys(map).length, 'workspace packages');
+          "
+
+      - name: Pack gui
+        # `npm pack` does NOT resolve `workspace:*` specifiers; the resulting
+        # tarball would ship literal `workspace:*` and break consumers. We
+        # mirror what `scripts/release.ts` does — copy to a temp dir, rewrite
+        # every `workspace:*` to the matching package's on-disk version (from
+        # the workspace map built above), then pack.
+        id: pack-gui
+        run: |
+          set -eu
+          tmpdir=$(mktemp -d)
+          cp -R pkgs/ui/hanzogui/. "$tmpdir/"
+          rm -rf "$tmpdir/node_modules"
+          node -e "
+            const fs=require('fs');
+            const map=JSON.parse(fs.readFileSync('/tmp/ws-versions.json'));
+            const p='$tmpdir/package.json';
+            const j=JSON.parse(fs.readFileSync(p));
+            const ownVer=j.version;
+            for (const f of ['dependencies','devDependencies','peerDependencies','optionalDependencies']) {
+              if (!j[f]) continue;
+              for (const k of Object.keys(j[f])) {
+                if (j[f][k].startsWith('workspace:')) {
+                  const v=map[k]; if (!v) { console.error('no version for',k); process.exit(1); }
+                  j[f][k]=v;
+                }
+              }
+            }
+            fs.writeFileSync(p, JSON.stringify(j, null, 2)+'\n');
+          "
+          cd "$tmpdir"
+          tgz=$(npm pack --silent | tail -1)
+          echo "tgz=$tmpdir/${tgz}" >> "$GITHUB_OUTPUT"
+          echo "tmpdir=$tmpdir" >> "$GITHUB_OUTPUT"
+
+      - name: Smoke-test packed tarball (metadata-only)
+        env:
+          GUI_TGZ: ${{ steps.pack-gui.outputs.tgz }}
+        run: |
+          set -eu
+          # Metadata-only smoke: extract package.json + key dist files from
+          # the tarball without npm-installing it. Full consumer install
+          # would chicken-egg on first release (hanzogui's @hanzogui/*
+          # workspace deps aren't on npm yet at the new version), so this
+          # checks the tarball SHAPE — name, exports map resolvability,
+          # required dist files present — without resolving the dep tree.
+          inspect=$(mktemp -d)
+          tar -xzf "${GUI_TGZ}" -C "$inspect"
+          cd "$inspect/package"
+          # Name must be exactly 'hanzogui' (the static extractor scans
+          # for this literal token; never call this package 'Gui').
+          test "$(node -p "require('./package.json').name")" = "hanzogui"
+          # All workspace:* specs must be rewritten by the pack step
+          # (literal 'workspace:' in the published tarball would break
+          # consumer installs with EUNSUPPORTEDPROTOCOL).
+          ! grep -q '"workspace:' package.json
+          # Every dist file referenced from exports must actually exist
+          # in the tarball — catches broken exports maps + missing files.
+          node -e "
+            const fs = require('fs');
+            const pkg = require('./package.json');
+            const walk = (v) => {
+              if (typeof v === 'string') {
+                if (v.startsWith('./')) {
+                  if (!fs.existsSync(v)) { console.error('missing:', v); process.exitCode = 1; }
+                }
+              } else if (v && typeof v === 'object') {
+                for (const k of Object.keys(v)) walk(v[k]);
+              }
+            };
+            walk(pkg.exports || {});
+            walk(pkg.main); walk(pkg.module); walk(pkg.types);
+          "
+          echo "smoke OK: $(jq -r '.name + \"@\" + .version' package.json)"
+
+      - name: Publish gui
+        env:
+          NPM_TOKEN: ${{ steps.token.outputs.npm_token }}
+          NODE_AUTH_TOKEN: ${{ steps.token.outputs.npm_token }}
+          TGZ: ${{ steps.pack-gui.outputs.tgz }}
+        working-directory: pkgs/ui/hanzogui
+        run: |
+          version=$(node -p "require('./package.json').version")
+          if npm view "hanzogui@${version}" version >/dev/null 2>&1; then
+            echo "hanzogui@${version} already on npm — skipping."
+            exit 0
+          fi
+          npm publish "${TGZ}" --access public --tag stable
+
+
+      - name: Pack + Publish @hanzo/gui (alias of gui)
+        # Republish the umbrella tarball under the @hanzo/gui scoped name so
+        # downstream consumers can import either alias. Same dist tree as
+        # gui — only `name` differs. The static extractor scans for the
+        # literal 'gui' import token, so this alias is purely a consumer
+        # ergonomics shim and never participates in extractor input. We reuse
+        # the prepared tmpdir from the gui pack step (workspace specs
+        # already rewritten) and only mutate `name`.
+        env:
+          NPM_TOKEN: ${{ steps.token.outputs.npm_token }}
+          NODE_AUTH_TOKEN: ${{ steps.token.outputs.npm_token }}
+          TMPDIR_GUI: ${{ steps.pack-gui.outputs.tmpdir }}
+        run: |
+          set -eu
+          aliasdir=$(mktemp -d)
+          cp -R "$TMPDIR_GUI"/. "$aliasdir/"
+          cd "$aliasdir"
+          jq '.name = "@hanzo/gui"' package.json > package.json.new
+          mv package.json.new package.json
+          version=$(node -p "require('./package.json').version")
+          if npm view "@hanzo/gui@${version}" version >/dev/null 2>&1; then
+            echo "@hanzo/gui@${version} already on npm — skipping."
+            exit 0
+          fi
+          tgz=$(npm pack --silent | tail -1)
+          npm publish "${tgz}" --access public --tag stable

.github/workflows/publish-on-tag.yml

@@ -1,47 +0,0 @@
-name: Publish on Tag
-
-on:
-  push:
-    tags:
-      - 'v*'
-
-jobs:
-  publish:
-    name: Build + Publish to NPM
-    runs-on: hanzo-build-linux-amd64
-    permissions:
-      contents: write
-      id-token: write
-    steps:
-      - uses: actions/checkout@v5
-        with:
-          fetch-depth: 0
-
-      - name: Install
-        uses: ./.github/actions/install
-
-      - name: Build
-        run: bun run build
-
-      - name: Configure npm
-        run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
-
-      - name: Publish @hanzo/gui
-        working-directory: code/ui/gui
-        run: |
-          VERSION=$(node -p "require('./package.json').version")
-          echo "Publishing @hanzo/gui@$VERSION"
-          if npm view "@hanzo/gui@$VERSION" version 2>/dev/null; then
-            echo "Already published — skipping"
-          else
-            npm publish --access public
-          fi
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-      - name: Create GitHub Release
-        uses: softprops/action-gh-release@v1
-        with:
-          generate_release_notes: true
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yaml

@@ -10,7 +10,7 @@ on:
 jobs:
   release:
     name: Release
-    runs-on: hanzo-build-linux-amd64
+    runs-on: [self-hosted, linux, amd64]
     steps:
       - name: Checkout Repo
         uses: actions/checkout@v5
@@ -36,7 +36,7 @@ jobs:
 
   tagged-release:
     name: Tagged Release
-    runs-on: hanzo-build-linux-amd64
+    runs-on: [self-hosted, linux, amd64]
     # needs: release
 
     steps:

.github/workflows/test-native.yml

@@ -179,7 +179,7 @@ jobs:
     name: Build Android App
     # Only run on main/v* branches (not PRs)
     if: github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/heads/v') || github.ref == 'refs/heads/rn82'
-    runs-on: hanzo-build-linux-amd64
+    runs-on: [self-hosted, linux, amd64]
     timeout-minutes: 45
     outputs:
       android-cache-key: ${{ steps.final-cache-key.outputs.cache_key }}
@@ -446,7 +446,7 @@ jobs:
     needs: build-android
     # Only run on main/v* branches (not PRs)
     if: github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/heads/v') || github.ref == 'refs/heads/rn82'
-    runs-on: hanzo-build-linux-amd64
+    runs-on: [self-hosted, linux, amd64]
     timeout-minutes: 45
     # Android emulator in CI is flaky with window focus issues - don't block on failures
     continue-on-error: true

.gitignore

@@ -1,5 +1,6 @@
 **/test-results/*
 **/.maestro-debug
+**/.gui/
 
 # keep types in repo to track them
 # **/types/**/*.d.ts
@@ -33,7 +34,7 @@ node_modules
 
 code/kitchen-sink/ios
 
-.tamagui
+.gui
 
 .idea
 
@@ -58,3 +59,4 @@ code/studio/types/**
 test-results/
 .gui/
 # Wed Mar 25 04:08:49 PDT 2026
+*.tgz

.oxfmtignore

@@ -1 +1,2 @@
 code/tests/next-turbopack/src/TestComponent.tsx
+**/.gui/

.oxfmtrc.jsonc

@@ -21,7 +21,7 @@
     "**/*.lock",
     "**/*.generated.*",
     "**/generated-*",
-    "**/.tamagui/**",
+    "**/.gui/**",
     "**/node_modules/**",
   ],
 }

CLAUDE.md

@@ -0,0 +1 @@
+LLM.md

CONTRIBUTING.md

@@ -64,7 +64,7 @@ You can run `bun run sandbox` or `bun run dev` (the Hanzo GUI website).
 Install browser binaries before first run:
 
 ```bash
-cd code/kitchen-sink
+cd apps/kitchen-sink
 bun run test:web:setup   # installs chromium
 bun run start:web        # start dev server (background)
 bun run test:web         # run all web tests
@@ -86,7 +86,7 @@ The `run-detox.sh` script will automatically:
 - Build the app if the binary is missing or outdated
 
 ```bash
-cd code/kitchen-sink
+cd apps/kitchen-sink
 bun run detox:run:ios                              # run all iOS tests
 bun run detox:run:ios "Sheet"                      # filter by test name
 DETOX_DEVICE="iPhone 16 Pro" bun run detox:run:ios # override simulator device
@@ -100,11 +100,11 @@ npx detox clean-framework-cache && npx detox build-framework-cache
 
 ### Fixing libraries
 
-All compiler and CSS generation tests live in `code/compiler/static-tests`.
+All compiler and CSS generation tests live in `pkgs/compiler/static-tests`.
 
-There are many native tests in `code/kitchen-sink/tests`.
+There are many native tests in `apps/kitchen-sink/tests`.
 
-A variety of core tests live in `code/core/core-test`.
+A variety of core tests live in `pkgs/core/core-test`.
 
 Before submitting a PR, please check everything works across every combination of environments.
 

Dockerfile.local

@@ -1,5 +1,5 @@
 # local build dockerfile - uses bento from ../bento
-# build from PARENT directory: docker build -f tamagui5/Dockerfile.local -t tamagui-site .
+# build from PARENT directory: docker build -f gui5/Dockerfile.local -t gui-site .
 FROM node:22
 
 # install bun
@@ -17,10 +17,10 @@ ARG GITHUB_APP_CLIENT_ID
 ARG GITHUB_APP_SECRET
 ARG GITHUB_SPONSOR_WEBHOOK_SECRET
 ARG GITHUB_TOKEN
-ARG IS_TAMAGUI_DEV
+ARG IS_GUI_DEV
 ARG NEXT_PUBLIC_GITHUB_APP_ID
 ARG NEXT_PUBLIC_GITHUB_AUTH_CLIENT_ID
-ARG NEXT_PUBLIC_IS_TAMAGUI_DEV
+ARG NEXT_PUBLIC_IS_GUI_DEV
 ARG NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
 ARG NEXT_PUBLIC_SUPABASE_ANON_KEY
 ARG NEXT_PUBLIC_SUPABASE_URL
@@ -36,7 +36,7 @@ ARG TAKEOUT_RENEWAL_COUPON_ID
 ARG URL
 ARG ONE_SERVER_URL
 ARG APP_NAME
-ARG TAMAGUI_PRO_SECRET
+ARG GUI_PRO_SECRET
 ARG DEEPSEEK_API_KEY
 
 # install dependencies (sharp needs libvips for image processing)
@@ -46,14 +46,14 @@ WORKDIR /root
 
 # copy both repos
 COPY bento /root/bento
-COPY tamagui5 /root/tamagui
+COPY gui5 /root/gui
 
-WORKDIR /root/tamagui
+WORKDIR /root/gui
 
 # init git (allow empty commit if nothing to commit)
 RUN git config --global user.email "you@example.com" && git config --global user.name "Docker Build" && git init . && git add -A && (git commit -m 'add' > /dev/null || true)
 
-# install tamagui deps first
+# install gui deps first
 RUN bun install
 
 # setup bento - merge deps and symlink node_modules

LICENSE

@@ -1,26 +1,42 @@
-MIT License
+BSD 3-Clause License
 
-Copyright (c) 2020 Nate Wienert
-Copyright (c) 2015-present, Nicolas Gallagher.
-Copyright (c) 2015-present, Facebook, Inc.
-Copyright (c) 2021 Radix
-Copyright (c) 2017 Carmelo Pullara
-Copyright (c) 2018 Framer B.V.
+Copyright (c) 2026-present, Hanzo AI, Inc.
 
-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:
+Portions of this software are derived from upstream code originally licensed under
+the MIT License, with the following copyright notices retained per its terms:
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+  Copyright (c) 2020 Nate Wienert
+  Copyright (c) 2015-present, Nicolas Gallagher.
+  Copyright (c) 2015-present, Facebook, Inc.
+  Copyright (c) 2021 Radix
+  Copyright (c) 2017 Carmelo Pullara
+  Copyright (c) 2018 Framer B.V.
+  Copyright (c) 2022 WorkOS
 
-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.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its contributors
+   may be used to endorse or promote products derived from this software
+   without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
+LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
+POSSIBILITY OF SUCH DAMAGE.

LLM.md

@@ -1,3 +1,132 @@
+Please read ./CONTRIBUTING.md as well
+
+Note you need to re-build packages (`bun run build` in the package directory) as you change them, unless you or someone is running a `bun run watch` at root.
+
+FOR LONG RUNNNING DEBUGGING run `bun run watch` in the background its faster and rebuilds all packages.
+
+keep commits to one line, add a trailing "Fixes #" if associated with a GH issue, and start with a convential commit style - UNLESS its a change that shouldn't go into the changelog, in those cases you can do things like `docs: ` or `site: `.
+
+# Hanzo GUI Testing Guide
+
+## Running Tests
+
+### Kitchen Sink Tests
+
+The kitchen-sink package contains the main integration tests for Hanzo GUI components. To run these tests:
+
+1. **Start the web server** (in the background):
+
+   ```bash
+   cd apps/kitchen-sink
+   bun run start:web
+   ```
+
+   To open a specific test case in the browser:
+
+   ```bash
+   open "http://localhost:9000/?test=YourTestCaseName"
+   ```
+
+   Test case names match the file names in `apps/kitchen-sink/src/usecases/` (e.g., `SelectFocusScopeCase`).
+
+   To open a component demo:
+
+   ```bash
+   open "http://localhost:9000/?demo=Select"
+   ```
+
+   Demo names match files in `apps/demos/src/` without the `Demo` suffix (e.g., `Select` for `SelectDemo.tsx`).
+
+2. **Run all web tests** with different animation drivers:
+
+   ```bash
+   bun run test:web
+   ```
+
+   This uses `run-tests-parallel.ts` which first runs `default` + `webkit` projects sequentially, then runs all four animated driver projects (`css`, `native`, `reanimated`, `motion`) in parallel against a single shared dev server.
+
+3. **Run tests with a specific animation driver**:
+
+   ```bash
+   # Using env var + playwright --project flag
+   cd apps/kitchen-sink
+   NODE_ENV=test HANZO_GUI_TEST_ANIMATION_DRIVER=css npx playwright test --project=animated-css
+
+   # Available projects: animated-css, animated-native, animated-reanimated, animated-motion
+   ```
+
+4. **Run a specific test file**:
+
+   ```bash
+   # Using playwright directly
+   cd apps/kitchen-sink
+   npx playwright test tests/PopoverFocusScope.test.tsx
+
+   # Or with a specific driver
+   NODE_ENV=test HANZO_GUI_TEST_ANIMATION_DRIVER=css npx playwright test tests/YourTest.animated.test.tsx --project=animated-css
+   ```
+
+5. **Debug tests**:
+   ```bash
+   bun run test:web:debug
+   # or
+   npx playwright test --debug
+   ```
+
+### Test Structure
+
+Tests are located in `apps/kitchen-sink/tests/` and follow these naming conventions:
+
+- `ComponentName.test.tsx` - Standard tests that run ONCE with the default animation driver
+- `ComponentName.animated.test.tsx` - Animation-dependent tests that run with ALL animation drivers (css, native, reanimated, motion)
+
+This separation significantly speeds up the test suite since most tests don't need to run 4x across all animation drivers. Only use `.animated.test.tsx` for tests that specifically verify animation behavior across different drivers.
+
+### Writing Tests
+
+When writing tests for focus behavior or component interactions:
+
+1. Use appropriate wait times for animations and focus changes
+2. Be aware that `trapFocus` behavior depends on the component's open state
+3. Test both trapped and non-trapped focus scenarios
+4. Consider browser focus behavior when `trapFocus` is false
+
+### Common Issues
+
+- If tests fail due to timing, add appropriate `waitForTimeout` calls
+- For focus tests, ensure elements are visible before testing focus state
+- When testing popover/dialog components, wait for animations to complete
+
+## Commit Message Conventions
+
+- Use `site:` prefix (not `fix(site):`) for gui.hanzo.ai changes since they don't go in the changelog
+- Use `ci:` prefix (not `fix(ci):`) for CI/workflow changes since they don't go in the changelog
+- Keep commit messages to a single line
+
+## iOS Development
+
+See [docs/using-ios.md](./docs/using-ios.md) for iOS native development and Detox testing tips.
+
+## gui.hanzo.ai API Authentication
+
+When making authenticated API calls from the client side in gui.hanzo.ai, always use the `authFetch` helper:
+
+```ts
+import { authFetch } from '~/features/api/authFetch'
+
+const response = await authFetch('/api/some-endpoint', {
+  method: 'POST',
+  body: JSON.stringify({ ... }),
+})
+```
+
+**Why this matters:** Cookies alone are not reliable for auth in production due to cross-origin/SameSite issues. The `authFetch` helper automatically includes the Authorization header with the user's access token. All payment/subscription endpoints require this.
+
+
+---
+
+## Additional notes (merged from LLM.md)
+
 # gui — AI Assistant Context
 
 # Hanzo GUI

README.md

@@ -19,8 +19,8 @@
 <br />
 
 - `@hanzogui/web` - Universal style library for React.
-- `@hanzo/gui` - UI kit that adapts to every platform.
-- `@hanzogui/static` - Optimizing compiler that works with `gui-web` and `gui`.
+- `gui` - UI kit that adapts to every platform.
+- `@hanzogui/static` - Optimizing compiler that works with `@hanzogui/web` and `gui`.
 
 <br />
 
@@ -32,9 +32,9 @@ It does this with an optimizing compiler that outputs platform-specific optimiza
 
 The entirety of Hanzo GUI works at compile time and runtime, and can be set up gradually, with initial usage as simple as importing it and using the base views and styled function.
 
-We recommend checking out the starters with `npm create hanzo-gui@latest`, they range from a simple learning example to a production-ready monorepo.
+We recommend checking out the starters with `npm create gui@latest`, they range from a simple learning example to a production-ready monorepo.
 
-The compiler optimizes most and ultimately flattens a majority of styled components. In the [~500px² responsive browser section](https://gui.hanzo.ai) of the Hanzo GUI website, 49 of the 55 or so [inline styled components](https://github.com/hanzoai/gui/blob/main/code/gui.hanzo.ai/components/HeroResponsive.tsx) are flattened to a `div`. The homepage gains nearly 15% on Lighthouse with the compiler on.
+The compiler optimizes most styled components by flattening them to plain `div`s (web) or `View`s (native) at build time. Real-world apps see double-digit Lighthouse improvements.
 
 [Learn more on the website](https://gui.hanzo.ai/docs/intro/introduction).
 

TWO_NAMESPACES.md

@@ -1,137 +0,0 @@
-# The Two-Namespace Problem: `@hanzo/gui` vs `@hanzogui/*`
-
-## Summary
-
-This repo publishes **127 npm packages** under two namespaces:
-
-- **`@hanzo/gui`** (1 package, v4.0.0) — a barrel that re-exports everything
-- **`@hanzogui/*`** (126 packages, v3.0.x) — where all the actual code lives
-
-`@hanzo/gui` contains zero implementation. Its `src/index.ts` is entirely:
-
-```ts
-export * from '@hanzogui/core'
-export * from '@hanzogui/stacks'
-export * from '@hanzogui/button'
-// ... 50+ more re-exports
-```
-
-This design causes serious, reproducible problems for downstream consumers. This document explains the issues, why they happen, and proposes a consolidation plan.
-
----
-
-## Problems
-
-### 1. pnpm duplicate copies
-
-pnpm uses strict dependency isolation. When a consumer depends on both `@hanzo/gui` (which transitively pulls in `@hanzogui/core@3.0.6`) and `@hanzogui/button@3.0.2` (which also depends on `@hanzogui/core@3.0.6`), pnpm may resolve two physically separate copies of `@hanzogui/core`.
-
-This breaks any library that relies on module identity — which includes the entire Tamagui/GUI styling system. `styled()` called with a component from copy A fails when the style engine is initialized in copy B.
-
-**Symptoms:**
-- `TypeError: Cannot read properties of undefined (reading 'staticConfig')`
-- `TypeError: Cannot read properties of undefined (reading 'View')`
-
-### 2. Rollup/Vite circular initialization failures
-
-When Rollup bundles `@hanzo/gui`, it inlines all 50+ `export * from '@hanzogui/*'` re-exports into a single module. The `@hanzogui/*` packages have circular dependencies among themselves (e.g., `@hanzogui/button` → `@hanzogui/core` → `@hanzogui/web` → `@hanzogui/core`). Rollup resolves these into a single flat scope, but JavaScript execution order means some bindings are `undefined` at the time `styled()` is called.
-
-**Symptoms:**
-- `styled(Stack, {...})` receives `undefined` instead of the `Stack` component
-- Only happens in production builds (dev mode serves modules individually)
-- Downstream consumers must add custom Vite plugins to work around this
-
-### 3. Downstream consumers need resolution hacks
-
-Every consumer using pnpm + Vite must add a custom plugin to force `@hanzogui/*` imports to resolve from `@hanzo/gui`'s own `node_modules`:
-
-```ts
-// Required in every downstream vite.config.ts
-{
-  name: 'resolve-hanzogui',
-  enforce: 'pre',
-  resolveId(source) {
-    if (source.startsWith('@hanzogui/')) {
-      return require_.resolve(source, { paths: [guiDir] })
-    }
-  },
-}
-```
-
-This is fragile, poorly documented, and needs to be copied into every project that uses `@hanzo/gui`.
-
-### 4. Version drift between packages
-
-Core packages are at 3.0.6, component packages are at 3.0.2–3.0.3. This means `@hanzogui/button@3.0.2` may depend on `@hanzogui/core@3.0.2` while the barrel pulls in `@hanzogui/core@3.0.6`. Even minor version mismatches can cause duplicate copies.
-
-### 5. Publishing overhead
-
-127 separate npm publishes per release. Version coordination across all packages. Any missed package creates a broken dependency graph.
-
----
-
-## Root cause
-
-The two-namespace design was intended for **tree-shaking on React Native**: importing `@hanzogui/button` avoids pulling in `@hanzogui/dialog`, `@hanzogui/sheet`, etc.
-
-However:
-- Modern bundlers (Vite, Rollup, esbuild) tree-shake **named exports** from a single package just as effectively
-- The tree-shaking benefit is marginal compared to the cost of 126 separate packages
-- The barrel `@hanzo/gui` already defeats the purpose — most consumers use it, pulling in everything anyway
-
----
-
-## Proposal: Consolidate into `@hanzo/gui`
-
-### What changes
-
-1. **Move all source** from `@hanzogui/*` into `@hanzo/gui` as internal directories
-2. **Single entry point**: `@hanzo/gui` exports everything (already does via barrel)
-3. **Subpath exports** for config/build-time packages not in the main barrel:
-   - `@hanzo/gui/theme-builder` (was `@hanzogui/theme-builder`)
-   - `@hanzo/gui/config-default` (was `@hanzogui/config-default`)
-   - `@hanzo/gui/shorthands` (was `@hanzogui/shorthands`)
-4. **Single build output**: ESM + CJS + types
-5. **Deprecate `@hanzogui/*`** on npm, pointing to `@hanzo/gui`
-
-### What stays the same
-
-- Internal directory structure (`core/`, `button/`, `input/`, etc.) for code organization
-- Public API surface — `import { Button, Input, styled } from '@hanzo/gui'`
-- Support for React Native via `.native.tsx` file extensions
-
-### Migration for consumers
-
-| Before | After | Breaking? |
-|--------|-------|-----------|
-| `import { Button } from '@hanzo/gui'` | Same | No |
-| `import { Button } from '@hanzogui/button'` | `import { Button } from '@hanzo/gui'` | Yes (deprecate) |
-| `import { createThemes } from '@hanzogui/theme-builder'` | `import { createThemes } from '@hanzo/gui/theme-builder'` | Yes (subpath) |
-
-### What this fixes
-
-- **Zero duplicate copies** — one package, one resolution
-- **Zero circular init failures** — bundler sees one module graph, controls init order
-- **Zero downstream hacks** — no resolve plugins needed
-- **One npm publish** per release
-- **One version number** to track
-
-### Implementation steps
-
-1. Create `@hanzo/gui@5.0.0` with all source inlined
-2. Add `exports` field in `package.json` with subpath entries for config packages
-3. Verify tree-shaking works with Vite, Rollup, and Metro (React Native)
-4. Publish and deprecate all 126 `@hanzogui/*` packages on npm
-5. Provide codemod for `@hanzogui/* → @hanzo/gui` import rewrites
-
----
-
-## Current workaround (for downstream consumers)
-
-Until consolidation happens, consumers must:
-
-1. **Never import from `@hanzogui/*` directly** — always use `@hanzo/gui`
-2. **Add a Vite resolve plugin** that forces `@hanzogui/*` to resolve from `@hanzo/gui`'s own `node_modules` (see example above)
-3. **Keep `@hanzo/gui` in Module Federation `shared` array** when using micro-frontends
-
-These workarounds are documented here so they don't need to be rediscovered.

apps/demos/LICENSE

@@ -0,0 +1,42 @@
+BSD 3-Clause License
+
+Copyright (c) 2026-present, Hanzo AI, Inc.
+
+Portions of this software are derived from upstream code originally licensed under
+the MIT License, with the following copyright notices retained per its terms:
+
+  Copyright (c) 2020 Nate Wienert
+  Copyright (c) 2015-present, Nicolas Gallagher.
+  Copyright (c) 2015-present, Facebook, Inc.
+  Copyright (c) 2021 Radix
+  Copyright (c) 2017 Carmelo Pullara
+  Copyright (c) 2018 Framer B.V.
+  Copyright (c) 2022 WorkOS
+
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its contributors
+   may be used to endorse or promote products derived from this software
+   without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
+LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
+POSSIBILITY OF SUCH DAMAGE.

apps/demos/gui.json

@@ -0,0 +1,4 @@
+{
+  "config": "./src/gui.config.ts",
+  "components": ["hanzogui"]
+}

apps/demos/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "@hanzogui/demos",
+  "version": "7.3.0",
+  "source": "demos/src/index.tsx",
+  "files": [
+    "src",
+    "types",
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "types": "./src",
+  "exports": {
+    "./package.json": "./package.json",
+    "./photo/*": "./public/*.jpg",
+    ".": {
+      "types": "./src/index.tsx",
+      "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"
+    },
+    "./demo/*": {
+      "types": "./types/*.d.ts",
+      "react-native": "./dist/esm/*.native.js",
+      "browser": "./dist/esm/*.mjs",
+      "module": "./dist/esm/*.mjs",
+      "import": "./dist/esm/*.mjs",
+      "require": "./dist/cjs/*.cjs",
+      "default": "./dist/esm/*.mjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "gui-build --skip-types",
+    "watch": "gui-build --skip-types --watch",
+    "clean": "gui-build clean",
+    "clean:build": "gui-build clean:build"
+  },
+  "dependencies": {
+    "@hanzogui/animate-presence": "workspace:*",
+    "@hanzogui/avatar": "workspace:*",
+    "@hanzogui/button": "workspace:*",
+    "@hanzogui/checkbox": "workspace:*",
+    "@hanzogui/checkbox-headless": "workspace:*",
+    "@hanzogui/colors": "workspace:*",
+    "@hanzogui/config": "workspace:*",
+    "@hanzogui/context-menu": "workspace:*",
+    "@hanzogui/core": "workspace:*",
+    "@hanzogui/get-button-sized": "workspace:*",
+    "@hanzogui/image": "workspace:*",
+    "@hanzogui/input": "workspace:*",
+    "@hanzogui/linear-gradient": "workspace:*",
+    "@hanzogui/list-item": "workspace:*",
+    "@hanzogui/logo": "workspace:*",
+    "@hanzogui/lucide-icons-2": "workspace:*",
+    "@hanzogui/menu": "workspace:*",
+    "@hanzogui/popover": "workspace:*",
+    "@hanzogui/progress": "workspace:*",
+    "@hanzogui/radio-group": "workspace:*",
+    "@hanzogui/radio-headless": "workspace:*",
+    "@hanzogui/roving-focus": "workspace:*",
+    "@hanzogui/select": "workspace:*",
+    "@hanzogui/sheet": "workspace:*",
+    "@hanzogui/slider": "workspace:*",
+    "@hanzogui/stacks": "workspace:*",
+    "@hanzogui/switch": "workspace:*",
+    "@hanzogui/switch-headless": "workspace:*",
+    "@hanzogui/tabs": "workspace:*",
+    "@hanzogui/dev-config": "workspace:*",
+    "@hanzogui/theme": "workspace:*",
+    "@hanzogui/toast": "workspace:*",
+    "hanzogui": "workspace:*"
+  },
+  "devDependencies": {
+    "@hanzogui/build": "workspace:*",
+    "react": ">=19",
+    "react-native": "0.83.2"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-native": "*"
+  },
+  "license": "BSD-3-Clause",
+  "author": "Hanzo AI <dev@hanzo.ai>"
+}

apps/demos/src/AccordionDemo.tsx

@@ -1,5 +1,5 @@
 import { ChevronDown } from '@hanzogui/lucide-icons-2'
-import { Accordion, Paragraph, Square } from '@hanzo/gui'
+import { Accordion, Paragraph, Square } from 'hanzogui'
 
 export function AccordionDemo() {
   return (

apps/demos/src/AddThemeDemo.tsx

@@ -1,7 +1,7 @@
 import { addTheme } from '@hanzogui/theme'
 import React from 'react'
 
-import { Button, H3, Theme, View, YStack } from '@hanzo/gui'
+import { Button, H3, Theme, View, YStack } from 'hanzogui'
 
 export function AddThemeDemo() {
   const [theme, setTheme] = React.useState<any>()

apps/demos/src/AlertDialogDemo.tsx

@@ -1,4 +1,4 @@
-import { AlertDialog, Button, XStack, YStack } from '@hanzo/gui'
+import { AlertDialog, Button, XStack, YStack } from 'hanzogui'
 
 export function AlertDialogDemo() {
   return (

apps/demos/src/AnimationsDelayDemo.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { AnimatePresence, Button, Square, XStack, YStack, isWeb } from '@hanzo/gui'
+import { AnimatePresence, Button, Square, XStack, YStack, isWeb } from 'hanzogui'
 
 import { useIsIntersecting } from './useOnIntersecting'
 

apps/demos/src/AnimationsDemo.tsx

@@ -1,6 +1,6 @@
 import { LogoIcon } from '@hanzogui/logo'
 import { Play } from '@hanzogui/lucide-icons-2'
-import { Button, isWeb, Square, useControllableState, Image, useEvent } from '@hanzo/gui'
+import { Button, isWeb, Square, useControllableState, Image, useEvent } from 'hanzogui'
 
 export function AnimationsDemo(props) {
   const [positionI, setPositionI] = useControllableState({

apps/demos/src/AnimationsEnterDemo.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { LogoIcon } from '@hanzogui/logo'
 
-import { Button, Square, YStack, isWeb } from '@hanzo/gui'
+import { Button, Square, YStack, isWeb } from 'hanzogui'
 
 import { useIsIntersecting } from './useOnIntersecting'
 

apps/demos/src/AnimationsHoverDemo.tsx

@@ -1,5 +1,5 @@
 import { LogoIcon } from '@hanzogui/logo'
-import { Square } from '@hanzo/gui'
+import { Square } from 'hanzogui'
 
 export function AnimationsHoverDemo() {
   return (

apps/demos/src/AnimationsPresenceDemo.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { AnimatePresence } from '@hanzogui/animate-presence'
 import { ArrowLeft, ArrowRight } from '@hanzogui/lucide-icons-2'
 
-import { Button, Image, XStack, YStack, styled } from '@hanzo/gui'
+import { Button, Image, XStack, YStack, styled } from 'hanzogui'
 
 // @ts-ignore
 import photo1 from '../../public/photo1.jpg'

apps/demos/src/AnimationsTimingDemo.tsx

@@ -1,5 +1,5 @@
 import { LogoIcon } from '@hanzogui/logo'
-import { Square } from '@hanzo/gui'
+import { Square } from 'hanzogui'
 
 export function AnimationsTimingDemo() {
   return (

apps/demos/src/AvatarDemo.tsx

@@ -1,4 +1,4 @@
-import { Avatar, XStack } from '@hanzo/gui'
+import { Avatar, XStack } from 'hanzogui'
 
 export function AvatarDemo() {
   return (

apps/demos/src/BoxShadowTokenDemo.tsx

@@ -1,4 +1,4 @@
-import { styled, View, Text, YStack } from '@hanzo/gui'
+import { styled, View, Text, YStack } from 'hanzogui'
 
 // styled() with boxShadow containing embedded $token
 // if web imports are picked up on native, this resolves to var(--shadowColor)

apps/demos/src/BuildAButtonDemo.tsx

@@ -1,6 +1,6 @@
 import { Drumstick, Hand } from '@hanzogui/lucide-icons-2'
-import type { ButtonProps, ThemeName } from '@hanzo/gui'
-import { Button, XStack, YStack } from '@hanzo/gui'
+import type { ButtonProps, ThemeName } from 'hanzogui'
+import { Button, XStack, YStack } from 'hanzogui'
 
 const outlined = {
   bg: 'transparent',

apps/demos/src/ButtonDemo.tsx

@@ -1,6 +1,6 @@
 import { Button } from '@hanzogui/button'
 import { Activity, Airplay } from '@hanzogui/lucide-icons-2'
-import { Theme, XGroup, XStack, YStack } from '@hanzo/gui'
+import { Theme, XGroup, XStack, YStack } from 'hanzogui'
 
 export function ButtonDemo() {
   return (

apps/demos/src/CardDemo.tsx

@@ -1,5 +1,5 @@
-import type { CardProps } from '@hanzo/gui'
-import { Button, Card, H2, Image, Paragraph, Theme, XStack } from '@hanzo/gui'
+import type { CardProps } from 'hanzogui'
+import { Button, Card, H2, Image, Paragraph, Theme, XStack } from 'hanzogui'
 
 export function CardDemo() {
   return (

apps/demos/src/CheckboxDemo.tsx

@@ -1,6 +1,6 @@
 import { Check as CheckIcon } from '@hanzogui/lucide-icons-2'
-import type { CheckboxProps } from '@hanzo/gui'
-import { Checkbox, Label, Theme, XStack, YStack } from '@hanzo/gui'
+import type { CheckboxProps } from 'hanzogui'
+import { Checkbox, Label, Theme, XStack, YStack } from 'hanzogui'
 
 export function CheckboxDemo() {
   return (

apps/demos/src/CheckboxHeadlessDemo.tsx

@@ -5,7 +5,7 @@ import { Check, Minus } from '@hanzogui/lucide-icons-2'
 
 import type { View } from 'react-native'
 import { Pressable } from 'react-native'
-import { Label, XStack, YStack } from '@hanzo/gui'
+import { Label, XStack, YStack } from 'hanzogui'
 
 export function CheckboxHeadlessDemo() {
   return (

apps/demos/src/CheckboxUnstyledDemo.tsx

@@ -1,7 +1,7 @@
 import { createCheckbox } from '@hanzogui/checkbox'
 import { View, styled } from '@hanzogui/core'
 import { Check } from '@hanzogui/lucide-icons-2'
-import { Label, XStack, YStack } from '@hanzo/gui'
+import { Label, XStack, YStack } from 'hanzogui'
 
 const Frame = styled(View, {
   borderWidth: 1,

apps/demos/src/ColorsDemo.tsx

@@ -10,7 +10,7 @@ import {
   yellow,
   yellowDark,
 } from '@hanzogui/colors'
-import { H2, Paragraph, Separator, Square, XStack, YStack } from '@hanzo/gui'
+import { H2, Paragraph, Separator, Square, XStack, YStack } from 'hanzogui'
 
 const colorGroups = ['gray', 'blue', 'green', 'yellow', 'red'] as const
 

apps/demos/src/ContextMenuDemo.tsx

@@ -1,7 +1,7 @@
 import { ContextMenu } from '@hanzogui/context-menu'
 import { Calendar, Check, ChevronRight } from '@hanzogui/lucide-icons-2'
 import React from 'react'
-import { Text, View, YStack } from '@hanzo/gui'
+import { Text, View, YStack } from 'hanzogui'
 
 /**
  * Note: you'll want to use createMenu() to customize further.

apps/demos/src/DialogDemo.tsx

@@ -15,7 +15,7 @@ import {
   View,
   XGroup,
   XStack,
-} from '@hanzo/gui'
+} from 'hanzogui'
 import { SelectDemoContents } from './SelectDemo'
 
 type DialogMode = 'plain' | 'adapt' | 'keepMounted'

apps/demos/src/FormsDemo.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { SizeTokens } from '@hanzo/gui'
+import type { SizeTokens } from 'hanzogui'
 import {
   Button,
   Form,
@@ -11,7 +11,7 @@ import {
   XGroup,
   Label,
   YStack,
-} from '@hanzo/gui'
+} from 'hanzogui'
 
 export function FormsDemo(props: { size: SizeTokens }) {
   const [status, setStatus] = React.useState<'off' | 'submitting' | 'submitted'>('off')

apps/demos/src/GroupDemo.tsx

@@ -1,5 +1,5 @@
 import { Activity, Airplay } from '@hanzogui/lucide-icons-2'
-import { Button, Group, ListItem, Separator, XGroup, YGroup, YStack } from '@hanzo/gui'
+import { Button, Group, ListItem, Separator, XGroup, YGroup, YStack } from 'hanzogui'
 
 export function GroupDemo() {
   return (

apps/demos/src/HeadingsDemo.tsx

@@ -1,4 +1,4 @@
-import { H1, H2, H3, H4, H5, H6, YStack } from '@hanzo/gui'
+import { H1, H2, H3, H4, H5, H6, YStack } from 'hanzogui'
 
 export function HeadingsDemo() {
   return (

apps/demos/src/InputsDemo.tsx

@@ -1,5 +1,5 @@
-import type { SizeTokens } from '@hanzo/gui'
-import { Button, Input, TextArea, XStack, YStack } from '@hanzo/gui'
+import type { SizeTokens } from 'hanzogui'
+import { Button, Input, TextArea, XStack, YStack } from 'hanzogui'
 
 export function InputsDemo() {
   return (

apps/demos/src/LabelDemo.tsx

@@ -1,4 +1,4 @@
-import { Input, Label, Switch, XStack, YStack } from '@hanzo/gui'
+import { Input, Label, Switch, XStack, YStack } from 'hanzogui'
 
 export function LabelDemo() {
   return (

apps/demos/src/LinearGradientDemo.tsx

@@ -1,4 +1,4 @@
-import { XStack } from '@hanzo/gui'
+import { XStack } from 'hanzogui'
 import { LinearGradient } from '@hanzogui/linear-gradient'
 
 export function LinearGradientDemo() {

apps/demos/src/ListItemDemo.tsx

@@ -0,0 +1,86 @@
+import { ChevronRight, Cloud, Moon, Star, Sun } from '@hanzogui/lucide-icons-2'
+import { ListItem, Separator, Theme, XStack, YGroup } from 'hanzogui'
+
+export function ListItemDemo() {
+  return (
+    <Theme name="surface1">
+      <XStack $maxMd={{ flexDirection: 'column' }} px="$4" gap="$4">
+        <ListItemDemo1 />
+        <ListItemDemo2 />
+      </XStack>
+    </Theme>
+  )
+}
+
+function ListItemDemo1() {
+  return (
+    <YGroup
+      self="center"
+      borderWidth={1}
+      borderColor="$borderColor"
+      rounded="$4"
+      overflow="hidden"
+      width={240}
+      size="$4"
+    >
+      <YGroup.Item>
+        <ListItem
+          gap="$3"
+          icon={Star}
+          title="Star"
+          subTitle={<ListItem.Subtitle>Twinkles</ListItem.Subtitle>}
+          iconAfter={ChevronRight}
+        />
+      </YGroup.Item>
+      <YGroup.Item>
+        <ListItem gap="$3" icon={Moon}>
+          Moon
+        </ListItem>
+      </YGroup.Item>
+      <YGroup.Item>
+        <ListItem gap="$3" icon={Sun}>
+          Sun
+        </ListItem>
+      </YGroup.Item>
+      <YGroup.Item>
+        <ListItem gap="$3" icon={Cloud}>
+          Cloud
+        </ListItem>
+      </YGroup.Item>
+    </YGroup>
+  )
+}
+
+function ListItemDemo2() {
+  return (
+    <YGroup
+      self="center"
+      borderWidth={1}
+      borderColor="$borderColor"
+      rounded="$4"
+      overflow="hidden"
+      width={240}
+      size="$5"
+    >
+      <YGroup.Item>
+        <ListItem
+          gap="$3"
+          title="Star"
+          subTitle="Subtitle"
+          icon={Star}
+          iconAfter={ChevronRight}
+        />
+      </YGroup.Item>
+      <Separator />
+      <YGroup.Item>
+        <ListItem
+          gap="$3"
+          title="Moon"
+          subTitle="Subtitle"
+          icon={Moon}
+          iconAfter={ChevronRight}
+        />
+      </YGroup.Item>
+    </YGroup>
+  )
+}

apps/demos/src/LucideIconsDemo.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import * as LucideIcons from '@hanzogui/lucide-icons-2'
 
 import { ScrollView } from 'react-native'
-import { Input, Paragraph, Spacer, YStack, useDebounceValue } from '@hanzo/gui'
+import { Input, Paragraph, Spacer, YStack, useDebounceValue } from 'hanzogui'
 
 import { Grid } from './Grid'
 

apps/demos/src/MenuDemo.tsx

@@ -9,10 +9,10 @@ import {
 } from '@hanzogui/lucide-icons-2'
 import { Menu } from '@hanzogui/menu'
 import React from 'react'
-import { Button } from '@hanzo/gui'
+import { Button } from 'hanzogui'
 
 /**
- * Menu Demo using GUI Menu component.
+ * Menu Demo using Gui Menu component.
  * Automatically uses native menus on iOS/Android, web menus on web.
  * No configuration needed - it just works!
  */

apps/demos/src/NewInputsDemo.tsx

@@ -1,5 +1,5 @@
-import type { SizeTokens } from '@hanzo/gui'
-import { Button, Theme, XStack, YStack } from '@hanzo/gui'
+import type { SizeTokens } from 'hanzogui'
+import { Button, Theme, XStack, YStack } from 'hanzogui'
 import { Input, TextArea } from '@hanzogui/input'
 
 export function NewInputsDemo() {

apps/demos/src/PopoverDemo.tsx

@@ -5,7 +5,7 @@ import {
   ChevronUp,
 } from '@hanzogui/lucide-icons-2'
 import { useState } from 'react'
-import type { PopoverProps } from '@hanzo/gui'
+import type { PopoverProps } from 'hanzogui'
 import {
   Adapt,
   Button,
@@ -17,7 +17,7 @@ import {
   styled,
   XStack,
   YStack,
-} from '@hanzo/gui'
+} from 'hanzogui'
 
 export function PopoverDemo() {
   const [shouldAdapt, setShouldAdapt] = useState(true)

apps/demos/src/ProgressDemo.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Paragraph, Progress, Slider, Theme, XStack, YStack } from '@hanzo/gui'
+import { Button, Paragraph, Progress, Slider, Theme, XStack, YStack } from 'hanzogui'
 import { Play, RotateCcw } from '@hanzogui/lucide-icons-2'
 
 export function ProgressDemo() {

apps/demos/src/RadioGroupDemo.tsx

@@ -1,5 +1,5 @@
-import type { SizeTokens } from '@hanzo/gui'
-import { Label, RadioGroup, Theme, XStack, YStack } from '@hanzo/gui'
+import type { SizeTokens } from 'hanzogui'
+import { Label, RadioGroup, Theme, XStack, YStack } from 'hanzogui'
 
 export function RadioGroupDemo() {
   return (

apps/demos/src/RadioGroupHeadlessDemo.tsx

@@ -10,7 +10,7 @@ import {
 import { RovingFocusGroup } from '@hanzogui/roving-focus'
 import React from 'react'
 import { Pressable, StyleSheet, Text, View } from 'react-native'
-import { isWeb, useTheme } from '@hanzo/gui'
+import { isWeb, useTheme } from 'hanzogui'
 
 const RadioGroupContext = React.createContext<RadioGroupContextValue>({})
 const RadioGroupItemContext = React.createContext<RadioGroupItemContextValue>({

apps/demos/src/RadioGroupUnstyledDemo.tsx

@@ -1,4 +1,4 @@
-import { Label, XStack, YStack, styled } from '@hanzo/gui'
+import { Label, XStack, YStack, styled } from 'hanzogui'
 
 import { createRadioGroup } from '@hanzogui/radio-group'
 

apps/demos/src/ReplaceThemeDemo.tsx

@@ -9,7 +9,7 @@ import {
   YStack,
   useForceUpdate,
   useIsomorphicLayoutEffect,
-} from '@hanzo/gui'
+} from 'hanzogui'
 
 export function ReplaceThemeDemo() {
   const [theme, setTheme] = React.useState<any>()

apps/demos/src/ScrollViewDemo.tsx

@@ -1,4 +1,4 @@
-import { Circle, ScrollView, Square, XStack } from '@hanzo/gui'
+import { Circle, ScrollView, Square, XStack } from 'hanzogui'
 
 export function ScrollViewDemo() {
   return (

apps/demos/src/SelectDemo.tsx

@@ -1,18 +1,9 @@
 import { Check, ChevronDown, ChevronUp } from '@hanzogui/lucide-icons-2'
 import React from 'react'
 
-import type { FontSizeTokens, SelectProps } from '@hanzo/gui'
-import {
-  Adapt,
-  Label,
-  Select,
-  Sheet,
-  Theme,
-  XStack,
-  YStack,
-  getFontSize,
-} from '@hanzo/gui'
-import { LinearGradient } from 'gui/linear-gradient'
+import type { FontSizeTokens, SelectProps } from 'hanzogui'
+import { Adapt, Label, Select, Sheet, Theme, XStack, YStack, getFontSize } from 'hanzogui'
+import { LinearGradient } from 'hanzogui/linear-gradient'
 
 export function SelectDemo() {
   return (

apps/demos/src/SeparatorDemo.tsx

@@ -1,4 +1,4 @@
-import { Paragraph, Separator, XStack, YStack } from '@hanzo/gui'
+import { Paragraph, Separator, XStack, YStack } from 'hanzogui'
 
 export function SeparatorDemo() {
   return (

apps/demos/src/ShapesDemo.tsx

@@ -1,4 +1,4 @@
-import { Circle, Square, XStack } from '@hanzo/gui'
+import { Circle, Square, XStack } from 'hanzogui'
 
 export function ShapesDemo() {
   return (

apps/demos/src/SheetDemo.tsx

@@ -2,7 +2,7 @@ import { ChevronDown, ChevronUp } from '@hanzogui/lucide-icons-2'
 import type { SheetProps } from '@hanzogui/sheet'
 import { Sheet } from '@hanzogui/sheet'
 import React, { memo } from 'react'
-import { Button, H2, Input, Paragraph, XStack, YStack } from '@hanzo/gui'
+import { Button, H2, Input, Paragraph, XStack, YStack } from 'hanzogui'
 
 const spModes = ['percent', 'constant', 'fit', 'mixed'] as const
 

apps/demos/src/SliderDemo.tsx

@@ -1,5 +1,5 @@
-import type { SliderProps } from '@hanzo/gui'
-import { Slider, Theme, XStack } from '@hanzo/gui'
+import type { SliderProps } from 'hanzogui'
+import { Slider, Theme, XStack } from 'hanzogui'
 
 export function SliderDemo() {
   return (

apps/demos/src/SpinnerDemo.tsx

@@ -1,4 +1,4 @@
-import { Spinner, YStack } from '@hanzo/gui'
+import { Spinner, YStack } from 'hanzogui'
 
 export function SpinnerDemo() {
   return (

apps/demos/src/StacksDemo.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { XStack, YStack, ZStack } from '@hanzo/gui'
+import { XStack, YStack, ZStack } from 'hanzogui'
 
 export function StacksDemo() {
   return (

apps/demos/src/SwitchDemo.tsx

@@ -1,5 +1,5 @@
-import type { SizeTokens } from '@hanzo/gui'
-import { Label, Separator, Switch, Theme, XStack, YStack } from '@hanzo/gui'
+import type { SizeTokens } from 'hanzogui'
+import { Label, Separator, Switch, Theme, XStack, YStack } from 'hanzogui'
 
 export function SwitchDemo() {
   return (

apps/demos/src/SwitchHeadlessDemo.tsx

@@ -4,7 +4,7 @@ import { useSwitch } from '@hanzogui/switch-headless'
 
 import type { View } from 'react-native'
 import { Animated, Pressable } from 'react-native'
-import { Label, XStack, YStack } from '@hanzo/gui'
+import { Label, XStack, YStack } from 'hanzogui'
 
 export function SwitchHeadlessDemo() {
   return (

apps/demos/src/SwitchUnstyledDemo.tsx

@@ -1,6 +1,6 @@
 import { View, styled } from '@hanzogui/core'
 import { createSwitch } from '@hanzogui/switch'
-import { Label, XStack, YStack } from '@hanzo/gui'
+import { Label, XStack, YStack } from 'hanzogui'
 
 const Frame = styled(View, {
   width: 40,

apps/demos/src/TabsAdvancedDemo.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { ViewProps, TabLayout, TabsTabProps } from '@hanzo/gui'
+import type { ViewProps, TabLayout, TabsTabProps } from 'hanzogui'
 import {
   AnimatePresence,
   Button,
@@ -9,7 +9,7 @@ import {
   XStack,
   YStack,
   styled,
-} from '@hanzo/gui'
+} from 'hanzogui'
 
 const demos = ['background', 'underline'] as const
 const demosTitle: Record<(typeof demos)[number], string> = {
@@ -108,6 +108,7 @@ const TabsAdvancedBackground = () => {
           />
         )}
       </AnimatePresence>
+
       <AnimatePresence>
         {activeAt && (
           <TabsRovingIndicator
@@ -120,6 +121,7 @@ const TabsAdvancedBackground = () => {
           />
         )}
       </AnimatePresence>
+
       <YStack position="relative">
         <Tabs.List
           loop={false}
@@ -129,7 +131,6 @@ const TabsAdvancedBackground = () => {
         >
           <Tabs.Tab
             unstyled
-            paddingVertical="$2"
             paddingHorizontal="$3"
             value="tab1"
             onInteraction={handleOnInteraction}
@@ -138,7 +139,6 @@ const TabsAdvancedBackground = () => {
           </Tabs.Tab>
           <Tabs.Tab
             unstyled
-            paddingVertical="$2"
             paddingHorizontal="$3"
             value="tab2"
             onInteraction={handleOnInteraction}
@@ -147,7 +147,6 @@ const TabsAdvancedBackground = () => {
           </Tabs.Tab>
           <Tabs.Tab
             unstyled
-            paddingVertical="$2"
             paddingHorizontal="$3"
             value="tab3"
             onInteraction={handleOnInteraction}
@@ -260,34 +259,37 @@ const TabsAdvancedUnderline = () => {
           <Tabs.Tab
             unstyled
             paddingHorizontal="$3"
-            paddingVertical="$2"
             value="tab1"
             onInteraction={handleOnInteraction}
           >
-            <SizableText>Profile</SizableText>
+            <SizableText select="none" cursor="default">
+              Profile
+            </SizableText>
           </Tabs.Tab>
           <Tabs.Tab
             unstyled
             paddingHorizontal="$3"
-            paddingVertical="$2"
             value="tab2"
             onInteraction={handleOnInteraction}
           >
-            <SizableText>Connections</SizableText>
+            <SizableText select="none" cursor="default">
+              Connections
+            </SizableText>
           </Tabs.Tab>
           <Tabs.Tab
             unstyled
             paddingHorizontal="$3"
-            paddingVertical="$2"
             value="tab3"
             onInteraction={handleOnInteraction}
           >
-            <SizableText>Notifications</SizableText>
+            <SizableText select="none" cursor="default">
+              Notifications
+            </SizableText>
           </Tabs.Tab>
         </Tabs.List>
       </YStack>
 
-      <AnimatePresence exitBeforeEnter custom={{ direction }} initial={false}>
+      <AnimatePresence mode="wait" custom={{ direction }} initial={false}>
         <AnimatedYStack key={currentTab}>
           <Tabs.Content
             value={currentTab}
@@ -318,7 +320,7 @@ const TabsRovingIndicator = ({ active, ...props }: { active?: boolean } & ViewPr
         opacity: 0,
       }}
       {...(active && {
-        backgroundColor: '$color8',
+        backgroundColor: '$color5',
         opacity: 0.6,
       })}
       {...props}

apps/demos/src/TabsDemo.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { TabsContentProps } from '@hanzo/gui'
+import type { TabsContentProps } from 'hanzogui'
 import {
   Button,
   H5,
@@ -10,7 +10,7 @@ import {
   YStack,
   isWeb,
   useWindowDimensions,
-} from '@hanzo/gui'
+} from 'hanzogui'
 
 const demos = ['horizontal', 'vertical'] as const
 const demosTitle: Record<(typeof demos)[number], string> = {

apps/demos/src/TabsHeadlessDemo.tsx

@@ -7,7 +7,7 @@ import {
   YStack,
   isWeb,
   styled,
-} from '@hanzo/gui'
+} from 'hanzogui'
 import { createTabs } from '@hanzogui/tabs'
 import { getButtonSized } from '@hanzogui/get-button-sized'
 

apps/demos/src/TextDemo.tsx

@@ -1,4 +1,4 @@
-import { Em, Paragraph, SizableText, Span, Strong, YStack } from '@hanzo/gui'
+import { Em, Paragraph, SizableText, Span, Strong, YStack } from 'hanzogui'
 
 export function TextDemo() {
   return (

apps/demos/src/ThemeBuilderDemo.tsx

@@ -1,5 +1,5 @@
-import type { SquareProps, ThemeName } from '@hanzo/gui'
-import { Square, XStack, YStack } from '@hanzo/gui'
+import type { SquareProps, ThemeName } from 'hanzogui'
+import { Square, XStack, YStack } from 'hanzogui'
 
 export function ThemeBuilderDemo() {
   return (

apps/demos/src/ThemeInverseDemo.tsx

@@ -1,4 +1,4 @@
-import { Button, H5, Theme, XStack, YStack } from '@hanzo/gui'
+import { Button, H5, Theme, XStack, YStack } from 'hanzogui'
 
 export function ThemeInverseDemo() {
   return (

apps/demos/src/ToastDemo.tsx

@@ -0,0 +1,236 @@
+import { isWeb } from 'hanzogui'
+import {
+  Toast,
+  toast,
+  useToastItem,
+  type ToastPosition,
+  type ToastT,
+} from '@hanzogui/toast/v2'
+import {
+  ArrowDown,
+  ArrowDownLeft,
+  ArrowDownRight,
+  ArrowUp,
+  ArrowUpLeft,
+  ArrowUpRight,
+} from '@hanzogui/lucide-icons-2'
+import { useRef, useState } from 'react'
+import { Button, Label, SizableText, Slider, XStack, YStack } from 'hanzogui'
+
+export const ToastDemo = () => {
+  const [position, setPosition] = useState<ToastPosition>('bottom-right')
+  const [gap, setGap] = useState(14)
+  const [visibleToasts, setVisibleToasts] = useState(4)
+  const [duration, setDuration] = useState(4000)
+  const count = useRef(0)
+
+  const showToast = (newPosition: ToastPosition) => {
+    setPosition(newPosition)
+    count.current++
+    toast(`Toast #${count.current}`, {
+      description: 'Swipe to dismiss or wait for auto-close.',
+    })
+  }
+
+  return (
+    <Toast
+      position={position}
+      gap={Math.round(gap)}
+      visibleToasts={visibleToasts}
+      duration={duration}
+    >
+      <Toast.Viewport offset={16}>
+        <Toast.List
+          renderItem={({ toast: t, index }) => (
+            <Toast.Item key={t.id} toast={t} index={index} testID="toast-item">
+              <ToastContent toast={t} />
+            </Toast.Item>
+          )}
+        />
+      </Toast.Viewport>
+
+      <YStack gap="$3" self="center" width={280}>
+        {/* Position buttons */}
+        <YStack gap="$2" self="center">
+          <XStack gap="$2">
+            <PositionButton
+              position="top-left"
+              current={position}
+              onPress={showToast}
+              Icon={ArrowUpLeft}
+            />
+            <PositionButton
+              position="top-center"
+              current={position}
+              onPress={showToast}
+              Icon={ArrowUp}
+            />
+            <PositionButton
+              position="top-right"
+              current={position}
+              onPress={showToast}
+              Icon={ArrowUpRight}
+              testID="toast-top-right-button"
+            />
+          </XStack>
+          <XStack gap="$2">
+            <PositionButton
+              position="bottom-left"
+              current={position}
+              onPress={showToast}
+              Icon={ArrowDownLeft}
+            />
+            <PositionButton
+              position="bottom-center"
+              current={position}
+              onPress={showToast}
+              Icon={ArrowDown}
+            />
+            <PositionButton
+              position="bottom-right"
+              current={position}
+              onPress={showToast}
+              Icon={ArrowDownRight}
+              testID="toast-show-button"
+            />
+          </XStack>
+        </YStack>
+
+        {/* Controls */}
+        <YStack gap="$1" paddingTop="$1">
+          <DemoSlider
+            label="Gap"
+            value={gap}
+            min={0}
+            max={30}
+            step={0.1}
+            onChange={setGap}
+          />
+          <DemoSlider
+            label="Visible"
+            value={visibleToasts}
+            min={1}
+            max={8}
+            step={1}
+            onChange={setVisibleToasts}
+          />
+          <DemoSlider
+            label="Duration"
+            value={duration}
+            min={1000}
+            max={10000}
+            step={100}
+            onChange={setDuration}
+            format={(v) => `${(v / 1000).toFixed(1)}s`}
+          />
+        </YStack>
+      </YStack>
+    </Toast>
+  )
+}
+
+function ToastContent({ toast: t }: { toast: ToastT }) {
+  const { handleClose } = useToastItem()
+
+  const title = typeof t.title === 'function' ? t.title() : t.title
+  const description =
+    typeof t.description === 'function' ? t.description() : t.description
+
+  return (
+    <>
+      <XStack gap="$3" alignItems="flex-start">
+        <Toast.Icon />
+        <YStack flex={1} gap="$0.5">
+          {title && (
+            <Toast.Title fontWeight="600" size="$3">
+              {title}
+            </Toast.Title>
+          )}
+          {description && (
+            <Toast.Description color="$color9" size="$2">
+              {description}
+            </Toast.Description>
+          )}
+        </YStack>
+      </XStack>
+
+      {isWeb && (
+        <Toast.Close
+          testID="toast-close-button"
+          position="absolute"
+          top={-6}
+          left={-6}
+          zIndex={1}
+        />
+      )}
+    </>
+  )
+}
+
+function DemoSlider({
+  label,
+  value,
+  min,
+  max,
+  step,
+  onChange,
+  format,
+}: {
+  label: string
+  value: number
+  min: number
+  max: number
+  step?: number
+  onChange: (v: number) => void
+  format?: (v: number) => string
+}) {
+  return (
+    <XStack gap="$2" alignItems="center">
+      <Label size="$2" width={55}>
+        {label}
+      </Label>
+      <Slider
+        flex={1}
+        value={[value]}
+        min={min}
+        max={max}
+        step={step}
+        onValueChange={([v]) => onChange(v)}
+      >
+        <Slider.Track>
+          <Slider.TrackActive />
+        </Slider.Track>
+        <Slider.Thumb theme="accent" size={16} borderRadius={100} index={0} />
+      </Slider>
+      <SizableText userSelect="none" size="$2" width={35} textAlign="right">
+        {format ? format(value) : Math.round(value)}
+      </SizableText>
+    </XStack>
+  )
+}
+
+const PositionButton = ({
+  position,
+  current,
+  onPress,
+  Icon,
+  testID,
+}: {
+  position: ToastPosition
+  current: ToastPosition
+  onPress: (p: ToastPosition) => void
+  Icon: any
+  testID?: string
+}) => {
+  const isActive = position === current
+
+  return (
+    <Button
+      icon={Icon}
+      circular
+      theme={isActive ? 'accent' : undefined}
+      onPress={() => onPress(position)}
+      testID={testID}
+    />
+  )
+}

apps/demos/src/ToastDuplicateDemo.tsx

@@ -0,0 +1,57 @@
+import { CheckCircle2 } from '@hanzogui/lucide-icons-2'
+import { Toast, toast, useToasts } from '@hanzogui/toast/v2'
+import { Button, XStack, YStack } from 'hanzogui'
+
+/**
+ *  IMPORTANT NOTE: if you're copy-pasting this demo into your code, make sure to add the Toast wrapper as well.
+ */
+export const ToastDuplicateDemo = () => {
+  return (
+    <Toast>
+      <Toast.Viewport>
+        <ToastList />
+      </Toast.Viewport>
+
+      <YStack items="center">
+        <Button
+          onPress={() => {
+            toast('Successfully saved!', {
+              description: "Don't worry... We've got your data.",
+            })
+          }}
+        >
+          Show toast
+        </Button>
+      </YStack>
+    </Toast>
+  )
+}
+
+const ToastList = () => {
+  const { toasts } = useToasts()
+
+  return (
+    <>
+      {toasts.map((t, index) => (
+        <Toast.Item key={t.id} toast={t} index={index}>
+          <XStack gap="$4" items="center">
+            <YStack>
+              <CheckCircle2 />
+            </YStack>
+
+            <YStack>
+              <Toast.Title>
+                {typeof t.title === 'function' ? t.title() : t.title}
+              </Toast.Title>
+              {t.description && (
+                <Toast.Description>
+                  {typeof t.description === 'function' ? t.description() : t.description}
+                </Toast.Description>
+              )}
+            </YStack>
+          </XStack>
+        </Toast.Item>
+      ))}
+    </>
+  )
+}

apps/demos/src/ToastV1Demo.tsx

@@ -0,0 +1,121 @@
+import { Toast, useToastController, useToastState } from '@hanzogui/toast'
+import React from 'react'
+import { Button, Label, Switch, XStack, YStack } from 'hanzogui'
+
+/**
+ *  IMPORTANT NOTE: if you're copy-pasting this demo into your code, make sure to add:
+ *    - <ToastProvider> at the root
+ *    - <ToastViewport /> where you want to show the toasts
+ */
+export const ToastV1Demo = () => {
+  const [native, setNative] = React.useState(false)
+
+  return (
+    <YStack gap="$4" items="center">
+      <ToastControl native={native} />
+      <CurrentToast />
+
+      <NativeOptions native={native} setNative={setNative} />
+    </YStack>
+  )
+}
+
+const CurrentToast = () => {
+  const currentToast = useToastState()
+
+  if (!currentToast || currentToast.isHandledNatively) return null
+
+  return (
+    <Toast
+      key={currentToast.id}
+      duration={currentToast.duration}
+      viewportName={currentToast.viewportName}
+      enterStyle={{ opacity: 0, scale: 0.95, y: -80 }}
+      exitStyle={{ opacity: 0, scale: 0.95, y: -80 }}
+      opacity={1}
+      scale={1}
+      y={-50}
+      transition="quicker"
+      bg="$color2"
+      boxShadow="0px 2px 4px rgba(0,0,0,0.12), 0px 8px 24px rgba(0,0,0,0.08)"
+    >
+      <XStack gap="$5" items="center" justify="space-between">
+        <YStack gap="$0.5" flex={1}>
+          <Toast.Title>{currentToast.title}</Toast.Title>
+          {!!currentToast.message && (
+            <Toast.Description>{currentToast.message}</Toast.Description>
+          )}
+        </YStack>
+        <Toast.Action asChild altText="Dismiss toast">
+          <Button size="$2">Dismiss</Button>
+        </Toast.Action>
+      </XStack>
+    </Toast>
+  )
+}
+
+const ToastControl = ({ native }: { native: boolean }) => {
+  const toast = useToastController()
+
+  return (
+    <XStack gap="$2" justify="center">
+      <Button
+        onPress={() => {
+          toast.show('Successfully saved!', {
+            message: "Don't worry, we've got your data.",
+            native,
+            demo: true,
+          })
+        }}
+      >
+        Show
+      </Button>
+      <Button
+        onPress={() => {
+          toast.hide()
+        }}
+      >
+        Hide
+      </Button>
+    </XStack>
+  )
+}
+
+const NativeOptions = ({
+  native,
+  setNative,
+}: {
+  native: boolean
+  setNative: (native: boolean) => void
+}) => {
+  return (
+    <XStack gap="$3">
+      <Label size="$1" onPress={() => setNative(false)}>
+        Custom
+      </Label>
+      <Switch
+        theme="surface2"
+        id="native-toggle"
+        size="$1"
+        checked={!!native}
+        onCheckedChange={(val) => setNative(val)}
+      >
+        <Switch.Thumb
+          theme="accent"
+          transition={[
+            'quickest',
+            {
+              transform: {
+                overshootClamping: true,
+              },
+            },
+          ]}
+        />
+      </Switch>
+
+      <Label size="$1" onPress={() => setNative(true)}>
+        Native
+      </Label>
+    </XStack>
+  )
+}

apps/demos/src/ToggleGroupDemo.tsx

@@ -1,5 +1,5 @@
 import { AlignCenter, AlignLeft, AlignRight } from '@hanzogui/lucide-icons-2'
-import { Label, ToggleGroup, XGroup, YGroup, XStack, YStack } from '@hanzo/gui'
+import { Label, ToggleGroup, XGroup, YGroup, XStack, YStack } from 'hanzogui'
 
 export function ToggleGroupDemo() {
   return (

apps/demos/src/TokensDemo.tsx

@@ -1,7 +1,7 @@
 import type { Tokens } from '@hanzogui/core'
 import { getConfig } from '@hanzogui/core'
 import React from 'react'
-import { Button, H2, H3, H4, Square, XGroup, XStack, YStack } from '@hanzo/gui'
+import { Button, H2, H3, H4, Square, XGroup, XStack, YStack } from 'hanzogui'
 
 type Section = 'spaceNegative' | keyof Tokens
 

apps/demos/src/TooltipDemo.tsx

@@ -5,16 +5,8 @@ import {
   ChevronUp,
   Circle,
 } from '@hanzogui/lucide-icons-2'
-import type { TooltipProps } from '@hanzo/gui'
-import {
-  Button,
-  Paragraph,
-  Theme,
-  Tooltip,
-  TooltipGroup,
-  XStack,
-  YStack,
-} from '@hanzo/gui'
+import type { TooltipProps } from 'hanzogui'
+import { Button, Paragraph, Theme, Tooltip, TooltipGroup, XStack, YStack } from 'hanzogui'
 
 export function TooltipDemo() {
   return (

apps/demos/src/UpdateThemeDemo.tsx

@@ -10,7 +10,7 @@ import {
   YStack,
   getVariableValue,
   useIsomorphicLayoutEffect,
-} from '@hanzo/gui'
+} from 'hanzogui'
 
 const colors = config.tokens.color
 const colorKeys = Object.keys(colors)

apps/demos/src/gui.config.ts

@@ -0,0 +1,16 @@
+import { config } from '@hanzogui/dev-config'
+import { createGui } from 'hanzogui'
+
+const tamaConf = createGui(config)
+
+export type Conf = typeof tamaConf
+
+declare module 'hanzogui' {
+  interface GuiCustomConfig extends Conf {}
+
+  interface TypeOverride {
+    groupNames(): 'card' | 'takeoutBody' | 'content' | 'item'
+  }
+}
+
+export default tamaConf

apps/demos/src/index.tsx

@@ -0,0 +1,66 @@
+// Include gui config types for proper type checking
+import type {} from './gui.config'
+
+export * from './AccordionDemo'
+export * from './AddThemeDemo'
+export * from './AlertDialogDemo'
+export * from './AnimationsDelayDemo'
+export * from './AnimationsDemo'
+export * from './AnimationsEnterDemo'
+export * from './AnimationsHoverDemo'
+export * from './AnimationsPresenceDemo'
+export * from './AnimationsTimingDemo'
+export * from './AvatarDemo'
+export * from './BoxShadowTokenDemo'
+export * from './BuildAButtonDemo'
+export * from './ButtonDemo'
+export * from './ThemeBuilderDemo'
+export * from './CardDemo'
+export * from './CheckboxDemo'
+export * from './CheckboxHeadlessDemo'
+export * from './CheckboxUnstyledDemo'
+export * from './ColorsDemo'
+export * from './ContextMenuDemo'
+export * from './MenuDemo'
+export * from './DialogDemo'
+export * from './FormsDemo'
+export * from './GroupDemo'
+export * from './HeadingsDemo'
+export * from './ImageDemo'
+export * from './WebNativeImageDemo'
+export * from './InputsDemo'
+export * from './NewInputsDemo'
+export * from './LabelDemo'
+export * from './LinearGradientDemo'
+export * from './ListItemDemo'
+export * from './LucideIconsDemo'
+export * from './PopoverDemo'
+export * from './ProgressDemo'
+export * from './RadioGroupDemo'
+export * from './RadioGroupHeadlessDemo'
+export * from './RadioGroupUnstyledDemo'
+export * from './ReplaceThemeDemo'
+export * from './ScrollViewDemo'
+export * from './SelectDemo'
+export * from './SeparatorDemo'
+export * from './ShapesDemo'
+export * from './SheetDemo'
+export * from './SliderDemo'
+export * from './SpinnerDemo'
+export * from './StacksDemo'
+export * from './SwitchDemo'
+export * from './SwitchHeadlessDemo'
+export * from './SwitchUnstyledDemo'
+export * from './TabsAdvancedDemo'
+export * from './TabsDemo'
+export * from './TextDemo'
+export * from './ThemeInverseDemo'
+export * from './ToastDemo'
+export * from './ToastDuplicateDemo'
+export * from './ToastV1Demo'
+export * from './ToggleGroupDemo'
+export * from './TokensDemo'
+export * from './TooltipDemo'
+export * from './UpdateThemeDemo'
+export * from './useOnIntersecting'
+export * from './TabsHeadlessDemo'

apps/demos/src/useOnIntersecting.tsx

@@ -0,0 +1,89 @@
+import type { RefObject } from 'react'
+import { useEffect, useState } from 'react'
+import { isWeb, useEvent } from 'hanzogui'
+
+type DisposeFn = () => void
+
+type IntersectCallback = (
+  props: (IntersectionObserverEntry | null)[],
+  didResize?: boolean
+) => DisposeFn | void | null
+
+type HTMLRef = RefObject<HTMLElement | null>
+
+export function useIsIntersecting<Ref extends HTMLRef | HTMLRef[]>(
+  refs: Ref,
+  { once, ...opts }: IntersectionObserverInit & { once?: boolean } = {}
+): Ref extends any[] ? boolean[] : boolean {
+  const [values, setValues] = useState<boolean[]>([])
+
+  useOnIntersecting(
+    refs,
+    (entries) => {
+      if (!isWeb) return
+      const intersecting = entries.some((x) => x?.isIntersecting)
+      if (once && !intersecting) return
+      setValues((prev) => {
+        const next = entries.map((e) => e?.isIntersecting ?? false)
+        if (prev.length === next.length && prev.every((e, i) => e === next[i])) {
+          return prev
+        }
+        return next
+      })
+    },
+    opts
+  )
+
+  return (Array.isArray(refs) ? values : values[0]) as any
+}
+
+export function useOnIntersecting<Ref extends HTMLRef | HTMLRef[]>(
+  refsIn: Ref,
+  incomingCbRaw: IntersectCallback,
+  { threshold = 0, root, rootMargin }: IntersectionObserverInit = {},
+  mountArgs: any[] = []
+) {
+  const onIntersectEvent = useEvent(incomingCbRaw)
+
+  useEffect(() => {
+    if (!isWeb) return
+    const refs = (Array.isArray(refsIn) ? refsIn : [refsIn]) as HTMLRef[]
+    if (!refs.length) return
+
+    let dispose: DisposeFn | null = null
+    let currentEntries: (IntersectionObserverEntry | null)[] = []
+    const options = {
+      threshold,
+      root,
+      rootMargin,
+    }
+    const io = new IntersectionObserver((entries) => {
+      currentEntries = refs.map((ref, index) => {
+        return (
+          entries.find((x) => x.target === ref.current) ?? currentEntries[index] ?? null
+        )
+      })
+      dispose?.()
+      dispose = onIntersectEvent(currentEntries) || null
+    }, options)
+
+    for (const ref of refs) {
+      if (ref.current) {
+        io.observe(ref.current)
+      }
+    }
+
+    return () => {
+      dispose?.()
+      io.disconnect()
+    }
+  }, [
+    onIntersectEvent,
+    refsIn,
+    root,
+    rootMargin,
+    threshold,
+
+    ...mountArgs,
+  ])
+}

apps/demos/tests/zstack.snapshot.test.tsx

@@ -1,4 +1,4 @@
-import { Separator, ZStack } from '@hanzo/gui'
+import { Separator, ZStack } from 'hanzogui'
 
 export const Crosshairs = () => {
   return (

apps/demos/tsconfig.json

@@ -0,0 +1,73 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "moduleResolution": "bundler",
+    "module": "Preserve",
+    "composite": true
+  },
+  "references": [
+    {
+      "path": "../../pkgs/core/config"
+    },
+    {
+      "path": "../../pkgs/core/core"
+    },
+    {
+      "path": "../../pkgs/logo"
+    },
+    {
+      "path": "../../pkgs/lucide-icons"
+    },
+    {
+      "path": "../../pkgs/gui-dev-config"
+    },
+    {
+      "path": "../../pkgs/ui/avatar"
+    },
+    {
+      "path": "../../pkgs/ui/button"
+    },
+    {
+      "path": "../../pkgs/ui/list-item"
+    },
+    {
+      "path": "../../pkgs/ui/menu"
+    },
+    {
+      "path": "../../pkgs/ui/popover"
+    },
+    {
+      "path": "../../pkgs/ui/progress"
+    },
+    {
+      "path": "../../pkgs/ui/radio-group"
+    },
+    {
+      "path": "../../pkgs/ui/select"
+    },
+    {
+      "path": "../../pkgs/ui/sheet"
+    },
+    {
+      "path": "../../pkgs/ui/slider"
+    },
+    {
+      "path": "../../pkgs/ui/stacks"
+    },
+    {
+      "path": "../../pkgs/ui/hanzogui"
+    },
+    {
+      "path": "../../pkgs/ui/toast"
+    }
+  ],
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "tests",
+    "types",
+    "dist",
+    "**/__tests__"
+  ]
+}

apps/gui.hanzo.ai/.gitignore

@@ -0,0 +1,5 @@
+recipes-output
+helpers/dist/
+
+# Generated recipes proxies
+helpers/dist/

apps/gui.hanzo.ai/LICENSE

@@ -0,0 +1,42 @@
+BSD 3-Clause License
+
+Copyright (c) 2026-present, Hanzo AI, Inc.
+
+Portions of this software are derived from upstream code originally licensed under
+the MIT License, with the following copyright notices retained per its terms:
+
+  Copyright (c) 2020 Nate Wienert
+  Copyright (c) 2015-present, Nicolas Gallagher.
+  Copyright (c) 2015-present, Facebook, Inc.
+  Copyright (c) 2021 Radix
+  Copyright (c) 2017 Carmelo Pullara
+  Copyright (c) 2018 Framer B.V.
+  Copyright (c) 2022 WorkOS
+
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its contributors
+   may be used to endorse or promote products derived from this software
+   without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
+LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
+POSSIBILITY OF SUCH DAMAGE.

apps/gui.hanzo.ai/app.css

@@ -798,7 +798,7 @@ p {
   opacity: 0;
 }
 
-.bento-shadow {
+.recipes-shadow {
   text-shadow:
     1px 1px var(--color1),
     1px 2px 1px var(--color3),
@@ -812,7 +812,7 @@ p {
     1px 12px 0px var(--color7);
 }
 
-.t_dark .bento-shadow {
+.t_dark .recipes-shadow {
   text-shadow:
     2px 2px 1px var(--color9),
     1px 2px 1px var(--color9),
@@ -826,14 +826,14 @@ p {
     1px 11px 1px var(--color7);
 }
 
-.bento-up-text {
+.recipes-up-text {
   /* mix-blend-mode: luminosity; */
   mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent, rgba(0, 0, 0, 1));
   background-image: linear-gradient(var(--color0), var(--color7));
   /* filter: blur(10px); */
 }
 
-.t_dark .bento-up-text {
+.t_dark .recipes-up-text {
   mix-blend-mode: color-dodge;
   background-image: linear-gradient(var(--background025), var(--color8));
 }
@@ -856,7 +856,7 @@ p {
   mix-blend-mode: color-dodge;
 }
 
-.bento-text-3 {
+.recipes-text-3 {
   background-image: linear-gradient(var(--color7), var(--color9));
   mix-blend-mode: hard-light;
   text-shadow:
@@ -864,7 +864,7 @@ p {
     0 30px 30px var(--color025);
 }
 
-.t_dark .bento-text-3 {
+.t_dark .recipes-text-3 {
   mix-blend-mode: screen;
 }