From e2c76f15ea922dc1681c86ccb3aef2ced63446dc Mon Sep 17 00:00:00 2001 From: lanmower <657315+lanmower@users.noreply.github.com> Date: Mon, 18 May 2026 09:47:51 +0000 Subject: [PATCH] chore(deps): refresh vendored upstream --- docs/vendor/components.js | 2 + docs/vendor/components/theme-toggle.js | 70 +++++++++++++++++++++++++ docs/vendor/kits/os/.version | 4 +- docs/vendor/kits/os/app-shell.css | 24 +++++++++ docs/vendor/kits/os/colors_and_type.css | 38 +++++++++++++- 5 files changed, 134 insertions(+), 4 deletions(-) create mode 100644 docs/vendor/components/theme-toggle.js diff --git a/docs/vendor/components.js b/docs/vendor/components.js index 646bc36..1b293da 100644 --- a/docs/vendor/components.js +++ b/docs/vendor/components.js @@ -42,6 +42,8 @@ export { ChatHeader, VoiceStrip, CommunityShell } from './components/community.js'; +export { ThemeToggle } from './components/theme-toggle.js'; + export { FREDDIE_PAGES, home, chat, voice, sessions, projects, agents, analytics, diff --git a/docs/vendor/components/theme-toggle.js b/docs/vendor/components/theme-toggle.js new file mode 100644 index 0000000..0fe984b --- /dev/null +++ b/docs/vendor/components/theme-toggle.js @@ -0,0 +1,70 @@ +// ThemeToggle — segmented auto/paper/ink radio bound to src/theme.js. +// +// Usage: +// import { ThemeToggle } from 'anentrypoint-design'; +// ThemeToggle() // segmented control +// ThemeToggle({ compact: true }) // single cycling glyph button +// +// Reads current mode from the theme controller; clicks call applyTheme() +// which persists, updates , and notifies listeners. + +import * as webjsx from '../../vendor/webjsx/index.js'; +import { applyTheme, getTheme, resolvedTheme, onThemeChange } from '../theme.js'; + +const h = webjsx.createElement; + +const MODES = [ + ['auto', '⌗', 'auto'], + ['paper', '☀', 'light'], + ['ink', '☾', 'dark'], +]; + +// Track instances so an OS-theme change while in 'auto' re-renders the +// glyph in the compact variant (the segmented variant doesn't need it). +const refresh = new Set(); +let _bound = false; +function bindOnce() { + if (_bound) return; + _bound = true; + onThemeChange(() => { for (const cb of refresh) cb(); }); +} + +export function ThemeToggle({ compact = false, onChange } = {}) { + bindOnce(); + const current = getTheme(); + + if (compact) { + const resolved = resolvedTheme(); + const glyph = current === 'auto' ? '⌗' : (resolved === 'ink' ? '☾' : '☀'); + const label = current === 'auto' ? `auto (${resolved})` : (current === 'ink' ? 'dark' : 'light'); + return h('button', { + class: 'btn ds-theme-toggle', + type: 'button', + 'aria-label': 'theme: ' + label, + title: 'theme: ' + label + ' — click to cycle', + onclick: () => { + const next = current === 'auto' ? 'paper' : (current === 'paper' ? 'ink' : 'auto'); + applyTheme(next); + if (onChange) try { onChange(next); } catch {} + } + }, h('span', { class: 'glyph' }, glyph), ' ', label); + } + + return h('div', { + class: 'ds-theme-toggle ds-segmented', + role: 'radiogroup', + 'aria-label': 'theme' + }, ...MODES.map(([mode, glyph, label]) => + h('button', { + key: mode, + type: 'button', + role: 'radio', + 'aria-checked': current === mode ? 'true' : 'false', + class: 'ds-seg-btn' + (current === mode ? ' is-on' : ''), + onclick: () => { + applyTheme(mode); + if (onChange) try { onChange(mode); } catch {} + } + }, h('span', { class: 'glyph' }, glyph), ' ', label) + )); +} diff --git a/docs/vendor/kits/os/.version b/docs/vendor/kits/os/.version index 86a68bf..0c868da 100644 --- a/docs/vendor/kits/os/.version +++ b/docs/vendor/kits/os/.version @@ -1,6 +1,6 @@ { "package": "anentrypoint-design", - "version": "0.0.104", - "refreshedAt": "2026-05-17T17:12:27.084Z", + "version": "0.0.111", + "refreshedAt": "2026-05-18T09:47:49.982Z", "source": "npm:anentrypoint-design@latest" } diff --git a/docs/vendor/kits/os/app-shell.css b/docs/vendor/kits/os/app-shell.css index d244918..dae4fe0 100644 --- a/docs/vendor/kits/os/app-shell.css +++ b/docs/vendor/kits/os/app-shell.css @@ -568,3 +568,27 @@ table tr.clickable:hover td { background: var(--bg-2); } .ds-file-row .name { font-weight: 500; } .ds-file-row .size { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); } .ds-file-row .time { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); } + +/* ============================================================ + Theme toggle (segmented + compact) — bound to src/theme.js + ============================================================ */ +.ds-segmented { + display: inline-flex; gap: 0; padding: 2px; + background: var(--bg-2); border-radius: var(--r-pill); + font-family: var(--ff-mono); font-size: var(--fs-xs); +} +.ds-segmented .ds-seg-btn { + background: transparent; border: 0; color: var(--fg-3); + padding: 4px 12px; border-radius: var(--r-pill); cursor: pointer; + display: inline-flex; align-items: center; gap: 6px; + transition: color var(--dur-base) var(--ease), background var(--dur-base) var(--ease); +} +.ds-segmented .ds-seg-btn:hover { color: var(--fg); } +.ds-segmented .ds-seg-btn.is-on { + background: var(--bg); color: var(--fg); + box-shadow: 0 1px 2px rgba(0,0,0,0.08); +} +.ds-theme-toggle.btn { + font-family: var(--ff-mono); font-size: var(--fs-xs); + display: inline-flex; align-items: center; gap: 6px; +} diff --git a/docs/vendor/kits/os/colors_and_type.css b/docs/vendor/kits/os/colors_and_type.css index ff53e6d..2540ff8 100644 --- a/docs/vendor/kits/os/colors_and_type.css +++ b/docs/vendor/kits/os/colors_and_type.css @@ -47,9 +47,17 @@ --accent-fg: var(--paper); --accent-tint: color-mix(in oklab, var(--accent) 18%, var(--bg)); - --panel-bg: var(--bg); - --panel-bg-2: var(--bg-2); + --panel-bg: var(--bg); + --panel-bg-2: var(--bg-2); --panel-accent: var(--accent); + --panel-1: var(--bg-2); + --panel-2: var(--bg-3); + --panel-3: color-mix(in oklab, var(--fg) 12%, transparent); + --panel-text: var(--fg); + --panel-text-2: var(--fg-2); + --panel-text-3: var(--fg-3); + --panel-accent-2: var(--accent-bright, var(--accent)); + --panel-shadow: 0 1px 0 color-mix(in oklab, var(--fg) 6%, transparent), 0 4px 14px color-mix(in oklab, var(--fg) 8%, transparent); /* Type — one family, used purposefully. Space Grotesk for everything non-mono. The display/narrow aliases stay so consumers that reference @@ -154,6 +162,32 @@ } } +/* Nested-scope safety: if .ds-247420 appears under another .ds-247420 (e.g. + mount() added the class to an inner element while the ancestor html + already had it), the inner element would otherwise re-trigger the root + light defaults and detach from the ancestor's data-theme override. Force + the inner element to inherit the ancestor's resolved tokens. */ +.ds-247420 .ds-247420 { + --bg: inherit; + --bg-2: inherit; + --bg-3: inherit; + --fg: inherit; + --fg-2: inherit; + --fg-3: inherit; + --panel-bg: inherit; + --panel-bg-2: inherit; + --accent: inherit; + --accent-fg: inherit; + --panel-1: inherit; + --panel-2: inherit; + --panel-3: inherit; + --panel-text: inherit; + --panel-text-2: inherit; + --panel-text-3: inherit; + --panel-accent-2: inherit; + --panel-shadow: inherit; +} + [data-density="compact"] { --density: 0.75; } [data-density="comfortable"] { --density: 1; } [data-density="spacious"] { --density: 1.35; }