@vestow/theme 0.1.0

package/css/typeset.css

@@ -0,0 +1,274 @@
+/* =============================================================================
+   Lớp văn xuôi `.typeset` — CSS THUẦN, điều khiển hoàn toàn bằng biến.
+
+       <article class="typeset">…</article>
+
+   Bảy biến dưới đây là toàn bộ API. Đặt lại chúng ở BẤT KỲ phần tử cha nào là
+   đổi được diện mạo của cả khối chữ mà không sửa một dòng markup:
+
+       .typeset-compact { --typeset-size: 13px; --typeset-flow: 1em; }
+
+   Đó đúng cơ chế của nhóm `--ui-control-*` / `--ui-field-*` trong tokens.css,
+   và nó qua cùng một tiêu chí kết nạp: có thứ BÊN NGOÀI khối chữ phải với vào
+   trong nó — trang /typeset, và về sau là từng trang docs muốn nhịp riêng.
+
+   VÌ SAO CẦN: năm trang của `apps/kit` — Addons, Components, Guides, Resources,
+   Tokens — đang chép nguyên văn cùng hai chuỗi class (`max-w-[75ch] text-pretty
+   text-[14.5px] leading-[1.7]` và hằng HEADING_2), kèm chép luôn cả đoạn chú
+   thích giải thích chúng. Đúng khuôn "13 file chép cùng một chuỗi class rồi
+   trôi khỏi nhau" mà `lib/focus.ts` sinh ra để dập.
+
+   KHÔNG có màu literal nào ở đây: mọi màu đều đọc token ngữ nghĩa, nên lớp này
+   tự đúng theo bảng màu và theo sáng/tối mà không khai lại gì.
+   ========================================================================== */
+
+:root {
+  /* Ba họ chữ. Mặc định trỏ vào token font của hệ, nên nạp lớp này vào mà không
+     đặt gì thêm thì diện mạo không đổi một chút nào. */
+  /* Rơi lui về token TOÀN CỤC chứ không về `--font-sans`: chọn họ chữ tiêu đề
+     ở trục chung thì khối văn xuôi phải đi theo, còn muốn khác thì đặt lại
+     đúng biến này ở phạm vi hẹp hơn. */
+  --typeset-font-heading: var(--font-heading);
+  --typeset-font-body: var(--font-sans);
+  --typeset-font-mono: var(--font-mono);
+
+  /* Cỡ chữ thân bài. 14.5px là con số năm trang docs đang dùng. */
+  --typeset-size: 14.5px;
+
+  /* Giãn dòng của thân bài. Tiêu đề có nhịp riêng — xem ghi chú dưới. */
+  --typeset-leading: 1.7;
+
+  /* Khoảng cách giữa hai khối liền nhau. Đơn vị `em` chứ không px: nó ăn theo
+     cỡ chữ của CHÍNH khối đó, nên đổi `--typeset-size` là nhịp dọc tự theo. */
+  --typeset-flow: 1.25em;
+
+  /* Bề rộng tối đa của một DÒNG CHỮ, không phải của cột.
+
+     Ranh giới này là quyết định đã có sẵn trong repo, chép nguyên ý: cột nội
+     dung lấp trọn track của lưới nên bảng, khối code và ảnh chạm được tới mép —
+     nhưng một dòng chữ dài 240 ký tự ở màn 2560px thì mắt mất dấu khi xuống
+     dòng. Hai nhu cầu khác nhau nên hai giới hạn khác nhau.
+
+     `ch` NẰM ĐƯỢC trong một custom property, và nó tính ở phần tử DÙNG chứ
+     không ở phần tử khai. Đã đo để chắc, vì trực giác nói ngược: dựng ba khối
+     14.5 / 16 / 24px rồi so `width: 75ch` với `width: var(--x)` (khai `75ch` ở
+     `:root`) — ba cặp trùng khít 721 / 795,59 / 1193,39px.
+
+     Nhờ vậy đoạn mở đầu 16px và đoạn thân bài 14.5px cùng ra khoảng 75 ký tự mà
+     chỉ phải khai một con số. */
+  --typeset-measure: 75ch;
+}
+
+.typeset {
+  font-family: var(--typeset-font-body);
+  font-size: var(--typeset-size);
+  line-height: var(--typeset-leading);
+  color: var(--foreground);
+
+  /* Cân lại chỗ ngắt dòng để không còn dòng cuối trơ một chữ. */
+  text-wrap: pretty;
+}
+
+/* --- Nhịp dọc -------------------------------------------------------------
+   Một luật duy nhất, đặt trên phần tử SAU. Không dùng `margin-bottom` cho từng
+   thẻ: hai lề kề nhau sẽ chồng (margin collapsing) và khoảng cách thật hoá ra
+   phụ thuộc thẻ nào đứng cạnh thẻ nào — đúng thứ đang muốn bỏ. */
+
+.typeset > * + * {
+  margin-block-start: var(--typeset-flow);
+}
+
+/* --- Bề rộng dòng ---------------------------------------------------------
+   Chỉ chặn khối MANG CHỮ. `pre`, `table`, `figure`, `img` cố ý đứng ngoài. */
+
+.typeset > p,
+.typeset > ul,
+.typeset > ol,
+.typeset > dl,
+.typeset > blockquote,
+.typeset > h1,
+.typeset > h2,
+.typeset > h3,
+.typeset > h4 {
+  max-inline-size: var(--typeset-measure);
+}
+
+/* --- Tiêu đề --------------------------------------------------------------
+   Cỡ khai bằng `em` nên cả thang tự co giãn theo `--typeset-size`.
+
+   Giãn dòng thì KHÔNG đọc thẳng `--typeset-leading`: ở 1.9 thì một tiêu đề hai
+   dòng sẽ rời hẳn ra thành hai câu không dính nhau. Nó đọc theo một PHẦN của
+   phần vượt trên 1 — `--typeset-leading: 1.7` cho ra 1.196 ở h1 — nên vặn nút
+   giãn dòng vẫn thấy tiêu đề nhúc nhích, mà không bao giờ nhúc nhích quá tay. */
+
+.typeset h1,
+.typeset h2,
+.typeset h3,
+.typeset h4 {
+  font-family: var(--typeset-font-heading);
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  text-wrap: balance;
+
+  /* Tiêu đề thuộc về phần chữ ngay DƯỚI nó, nên khoảng trên phải rộng hơn
+     khoảng dưới. Đây là lý do lề trên nhân lên chứ không dùng flow trần. */
+  margin-block-start: calc(var(--typeset-flow) * 1.9);
+}
+
+.typeset h1 {
+  font-size: 2.1em;
+  line-height: calc(1 + (var(--typeset-leading) - 1) * 0.28);
+  letter-spacing: -0.032em;
+}
+
+.typeset h2 {
+  font-size: 1.5em;
+  line-height: calc(1 + (var(--typeset-leading) - 1) * 0.36);
+  letter-spacing: -0.026em;
+}
+
+.typeset h3 {
+  font-size: 1.18em;
+  line-height: calc(1 + (var(--typeset-leading) - 1) * 0.48);
+}
+
+.typeset h4 {
+  font-size: 1em;
+  line-height: calc(1 + (var(--typeset-leading) - 1) * 0.6);
+}
+
+/* Khối đầu tiên không có gì ở trên để mà cách ra. */
+.typeset > :first-child {
+  margin-block-start: 0;
+}
+
+/* --- Danh sách ----------------------------------------------------------- */
+
+.typeset ul,
+.typeset ol {
+  padding-inline-start: 1.4em;
+}
+
+.typeset ul {
+  list-style: disc;
+}
+
+.typeset ol {
+  list-style: decimal;
+}
+
+.typeset li::marker {
+  color: var(--muted-foreground);
+}
+
+/* Mục trong cùng một danh sách đứng gần nhau hơn hai đoạn văn: chúng là một ý
+   bị bẻ nhỏ, không phải mấy ý rời nhau. */
+.typeset li + li,
+.typeset li > ul,
+.typeset li > ol {
+  margin-block-start: calc(var(--typeset-flow) * 0.35);
+}
+
+/* --- Code ---------------------------------------------------------------- */
+
+.typeset code {
+  font-family: var(--typeset-font-mono);
+
+  /* `0.88em` chứ không px: chữ mono ở cùng cỡ với chữ thường luôn trông to hơn
+     vì nó rộng bản. Hệ số ăn theo cỡ của đoạn chứa nó. */
+  font-size: 0.88em;
+  background: var(--code-bg);
+  color: var(--code-fg);
+  border-radius: var(--radius-sm);
+  padding: 0.12em 0.36em;
+}
+
+.typeset pre {
+  font-family: var(--typeset-font-mono);
+  font-size: 0.88em;
+  line-height: 1.7;
+  background: var(--code-bg);
+  color: var(--code-fg);
+  border-radius: var(--radius-md);
+  padding: 1em 1.15em;
+
+  /* Khối code KHÔNG bị chặn theo `--typeset-measure`, nên nó phải tự cuộn
+     ngang — nếu không một dòng code dài sẽ đẩy cả trang trượt theo. */
+  overflow-x: auto;
+}
+
+/* `code` lồng trong `pre` bỏ hết trang trí của bản inline: nền và padding đã là
+   việc của `pre`, để cả hai là ra một cái hộp nằm trong một cái hộp. */
+.typeset pre code {
+  background: none;
+  border-radius: 0;
+  padding: 0;
+  font-size: inherit;
+}
+
+/* --- Trích dẫn, đường kẻ, liên kết ---------------------------------------- */
+
+.typeset blockquote {
+  border-inline-start: 2px solid var(--border);
+  padding-inline-start: 1.1em;
+  color: var(--muted-foreground);
+  font-style: italic;
+}
+
+.typeset hr {
+  border: 0;
+  border-block-start: 1px solid var(--border);
+  margin-block: calc(var(--typeset-flow) * 2);
+}
+
+.typeset a {
+  color: var(--primary);
+  text-decoration: underline;
+
+  /* Gạch chân cách chữ ra một chút để không cắt qua phần đuôi của g, y, và
+     không đè lên dấu nặng của ạ, ợ — dấu tiếng Việt nằm đúng vùng đó. */
+  text-underline-offset: 3px;
+  text-decoration-thickness: 1px;
+}
+
+/* --- Bảng ---------------------------------------------------------------- */
+
+.typeset table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.94em;
+}
+
+.typeset th,
+.typeset td {
+  text-align: start;
+  padding: 0.55em 0.8em;
+  border-block-end: 1px solid var(--border);
+}
+
+.typeset th {
+  font-weight: 600;
+  color: var(--muted-foreground);
+  font-size: 0.92em;
+  letter-spacing: 0.01em;
+  text-transform: uppercase;
+}
+
+/* --- Ảnh ----------------------------------------------------------------- */
+
+.typeset img {
+  max-inline-size: 100%;
+  height: auto;
+  border-radius: var(--radius-md);
+}
+
+/* --- Chữ phụ ------------------------------------------------------------- */
+
+.typeset strong {
+  font-weight: 600;
+}
+
+.typeset small {
+  font-size: 0.86em;
+  color: var(--muted-foreground);
+}

package/dist/controller.d.ts

@@ -0,0 +1,56 @@
+import type { BaseId, ChartId, ColorMode, MenuAccentId, MenuAppearanceId, MenuColorId, PaletteId, StyleId, SurfaceId, ThemeState } from './registry.js';
+/**
+ * Theme controller thuần TypeScript — không Vue, không React, không Angular.
+ *
+ * Toàn bộ phần "khó mà dễ sai" của chín trục giao diện nằm ở đây: đọc localStorage,
+ * theo dõi `prefers-color-scheme`, ghi class/thuộc tính lên `<html>`. Vỏ bọc cho
+ * từng framework chỉ còn việc nối `subscribe()` vào hệ reactivity của nó.
+ *
+ * Đó là điều kiện để cây vue / cây react / woodblock-angular sau này không lệch
+ * nhau: nếu mỗi bên tự viết lại, chỉ cần một bên quên `colorScheme` hay đặt sai
+ * khoá localStorage là người dùng đổi framework sẽ mất lựa chọn đã lưu.
+ *
+ * KHÔNG chạm `document` ở tầng module: package phải import được trong SSR
+ * (Nuxt, Next). Mọi thứ đụng DOM chỉ xảy ra bên trong `init()`.
+ *
+ * Ghi chú về đuôi `.js` trong import ở trên: TypeScript giữ nguyên specifier khi
+ * emit, nên viết `./registry` sẽ ra file ESM mà Node không resolve được. Đây là
+ * package có build ra `dist`, khác với `packages/ui` (ship thẳng source).
+ */
+export interface ThemeController {
+    /** Ảnh chụp trạng thái hiện tại. Không reactive — dùng `subscribe`. */
+    getState: () => ThemeState;
+    /**
+     * Đăng ký lắng nghe. Gọi ngay một lần với trạng thái hiện tại, nên vỏ bọc
+     * framework không cần đọc riêng lúc khởi tạo. Trả về hàm huỷ đăng ký.
+     */
+    subscribe: (listener: (state: ThemeState) => void) => () => void;
+    /**
+     * Đọc localStorage, áp lên `<html>`, bắt đầu theo dõi `prefers-color-scheme`.
+     * Gọi bao nhiêu lần cũng được — lần thứ hai trở đi không làm gì thêm.
+     * Trả về hàm dọn dẹp (chỉ có tác dụng ở lần gọi đầu).
+     */
+    init: () => () => void;
+    setColorMode: (value: ColorMode) => void;
+    /** Đảo sáng/tối theo cái đang THẤY, nên từ `system` cũng đảo được. */
+    toggleColorMode: () => void;
+    setPalette: (value: PaletteId) => void;
+    setSurface: (value: SurfaceId) => void;
+    setStyle: (value: StyleId) => void;
+    setChart: (value: ChartId) => void;
+    setBase: (value: BaseId) => void;
+    setMenuAccent: (value: MenuAccentId) => void;
+    setMenuColor: (value: MenuColorId) => void;
+    setMenuAppearance: (value: MenuAppearanceId) => void;
+}
+export declare function createThemeController(): ThemeController;
+/**
+ * Instance dùng chung cho cả app.
+ *
+ * Ba trục giao diện là trạng thái của `<html>`, tức là singleton theo đúng
+ * nghĩa — hai controller song song sẽ ghi đè lẫn nhau và cái nào ghi sau thì
+ * thắng. Mọi vỏ bọc framework nên dùng đúng instance này; `createThemeController`
+ * để dành cho test hoặc cho trường hợp nhúng nhiều app vào một trang.
+ */
+export declare const themeController: ThemeController;
+//# sourceMappingURL=controller.d.ts.map

package/dist/controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"controller.d.ts","sourceRoot":"","sources":["../src/controller.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,MAAM,EACN,OAAO,EACP,SAAS,EACT,YAAY,EACZ,gBAAgB,EAChB,WAAW,EACX,SAAS,EACT,OAAO,EACP,SAAS,EACT,UAAU,EACX,MAAM,eAAe,CAAA;AAgBtB;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAM,WAAW,eAAe;IAC9B,uEAAuE;IACvE,QAAQ,EAAE,MAAM,UAAU,CAAA;IAC1B;;;OAGG;IACH,SAAS,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,KAAK,MAAM,IAAI,CAAA;IAChE;;;;OAIG;IACH,IAAI,EAAE,MAAM,MAAM,IAAI,CAAA;IACtB,YAAY,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAA;IACxC,sEAAsE;IACtE,eAAe,EAAE,MAAM,IAAI,CAAA;IAC3B,UAAU,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAA;IACtC,UAAU,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAA;IACtC,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IAClC,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,aAAa,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAA;IAC5C,YAAY,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAA;IAC1C,iBAAiB,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAA;CACrD;AAyBD,wBAAgB,qBAAqB,IAAI,eAAe,CAwQvD;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,EAAE,eAAyC,CAAA"}

package/dist/controller.js

@@ -0,0 +1,256 @@
+import { defaults, domTargets, isBaseId, isChartId, isColorMode, isMenuAccentId, isMenuAppearanceId, isMenuColorId, isPaletteId, isStyleId, isSurfaceId, storageKeys, } from './registry.js';
+function noop() { }
+function readStored(key, guard, fallback) {
+    try {
+        const raw = localStorage.getItem(key);
+        if (raw !== null && guard(raw))
+            return raw;
+    }
+    catch {
+        // localStorage có thể bị chặn (private mode, policy) -> dùng mặc định.
+    }
+    return fallback;
+}
+function writeStored(key, value) {
+    try {
+        localStorage.setItem(key, value);
+    }
+    catch {
+        // Không lưu được thì chỉ mất lựa chọn sau khi tải lại trang.
+    }
+}
+export function createThemeController() {
+    let colorMode = defaults.colorMode;
+    let palette = defaults.palette;
+    let surface = defaults.surface;
+    let style = defaults.style;
+    let chart = defaults.chart;
+    let base = defaults.base;
+    let menuAccent = defaults.menuAccent;
+    let menuColor = defaults.menuColor;
+    let menuAppearance = defaults.menuAppearance;
+    let systemPrefersDark = false;
+    let started = false;
+    const listeners = new Set();
+    const isDark = () => colorMode === 'system' ? systemPrefersDark : colorMode === 'dark';
+    const getState = () => ({
+        colorMode,
+        palette,
+        surface,
+        style,
+        chart,
+        base,
+        menuAccent,
+        menuColor,
+        menuAppearance,
+        isDark: isDark(),
+    });
+    function notify() {
+        const state = getState();
+        for (const listener of listeners)
+            listener(state);
+    }
+    /** Ghi cả chín trục lên `<html>`. Gọi lại được, không cộng dồn gì. */
+    function applyToDocument() {
+        if (typeof document === 'undefined')
+            return;
+        const root = document.documentElement;
+        const dark = isDark();
+        root.classList.toggle(domTargets.darkClass, dark);
+        // `color-scheme` để trình duyệt tự đổi màu scrollbar và control mặc định.
+        // Thiếu nó thì ô nhập ngày, dropdown gốc vẫn trắng giữa theme tối.
+        root.style.colorScheme = dark ? 'dark' : 'light';
+        // Giá trị mặc định không có khối CSS nào -> gỡ thuộc tính thay vì ghi vào.
+        if (palette === defaults.palette)
+            root.removeAttribute(domTargets.paletteAttribute);
+        else
+            root.setAttribute(domTargets.paletteAttribute, palette);
+        if (surface === defaults.surface)
+            root.removeAttribute(domTargets.surfaceAttribute);
+        else
+            root.setAttribute(domTargets.surfaceAttribute, surface);
+        if (style === defaults.style)
+            root.removeAttribute(domTargets.styleAttribute);
+        else
+            root.setAttribute(domTargets.styleAttribute, style);
+        // `theme` nghĩa là "để bảng màu quyết định", nên nó GỠ thuộc tính — giống
+        // hệt ba trục trên, chỉ khác là ở đây giá trị mặc định có tên riêng thay vì
+        // trùng tên một bộ.
+        if (chart === defaults.chart)
+            root.removeAttribute(domTargets.chartAttribute);
+        else
+            root.setAttribute(domTargets.chartAttribute, chart);
+        if (base === defaults.base)
+            root.removeAttribute(domTargets.baseAttribute);
+        else
+            root.setAttribute(domTargets.baseAttribute, base);
+        if (menuAccent === defaults.menuAccent)
+            root.removeAttribute(domTargets.menuAccentAttribute);
+        else
+            root.setAttribute(domTargets.menuAccentAttribute, menuAccent);
+        if (menuColor === defaults.menuColor)
+            root.removeAttribute(domTargets.menuColorAttribute);
+        else
+            root.setAttribute(domTargets.menuColorAttribute, menuColor);
+        if (menuAppearance === defaults.menuAppearance)
+            root.removeAttribute(domTargets.menuAppearanceAttribute);
+        else
+            root.setAttribute(domTargets.menuAppearanceAttribute, menuAppearance);
+    }
+    /** Đọc lại cả chín trục từ localStorage vào biến trong closure. */
+    function readStoredState() {
+        colorMode = readStored(storageKeys.colorMode, isColorMode, defaults.colorMode);
+        palette = readStored(storageKeys.palette, isPaletteId, defaults.palette);
+        surface = readStored(storageKeys.surface, isSurfaceId, defaults.surface);
+        style = readStored(storageKeys.style, isStyleId, defaults.style);
+        chart = readStored(storageKeys.chart, isChartId, defaults.chart);
+        base = readStored(storageKeys.base, isBaseId, defaults.base);
+        menuAccent = readStored(storageKeys.menuAccent, isMenuAccentId, defaults.menuAccent);
+        menuColor = readStored(storageKeys.menuColor, isMenuColorId, defaults.menuColor);
+        menuAppearance = readStored(storageKeys.menuAppearance, isMenuAppearanceId, defaults.menuAppearance);
+    }
+    function init() {
+        if (started || typeof window === 'undefined')
+            return noop;
+        started = true;
+        readStoredState();
+        const query = window.matchMedia('(prefers-color-scheme: dark)');
+        systemPrefersDark = query.matches;
+        const onSystemChange = (event) => {
+            systemPrefersDark = event.matches;
+            // Chỉ ảnh hưởng khi đang ở `system`, nhưng cứ áp lại cho gọn — hàm này
+            // idempotent nên không tốn gì.
+            applyToDocument();
+            notify();
+        };
+        query.addEventListener('change', onSystemChange);
+        /**
+         * Đồng bộ giữa các document CÙNG ORIGIN: tab thứ hai của app, và iframe
+         * xem trước của trang Blocks.
+         *
+         * `storage` chỉ phát ở document KHÁC document vừa ghi, nên không có vòng
+         * lặp — bên ghi đã tự áp rồi trong `setColorMode`/`setPalette`/`setSurface`/
+         * `setStyle`.
+         *
+         * `event.key === null` nghĩa là `localStorage.clear()`, khi đó đọc lại cả
+         * chín. KHÔNG so `event.storageArea` với `localStorage`: chỉ riêng việc chạm
+         * vào `localStorage` đã ném lỗi ở môi trường chặn cookie, mà so tên khoá
+         * thì đủ — chín khoá này không đụng ai.
+         */
+        const onStorage = (event) => {
+            const watched = [
+                storageKeys.colorMode,
+                storageKeys.palette,
+                storageKeys.surface,
+                storageKeys.style,
+                storageKeys.chart,
+                storageKeys.base,
+                storageKeys.menuAccent,
+                storageKeys.menuColor,
+                storageKeys.menuAppearance,
+            ];
+            if (event.key !== null && !watched.includes(event.key))
+                return;
+            readStoredState();
+            applyToDocument();
+            notify();
+        };
+        window.addEventListener('storage', onStorage);
+        applyToDocument();
+        notify();
+        return () => {
+            query.removeEventListener('change', onSystemChange);
+            window.removeEventListener('storage', onStorage);
+            started = false;
+        };
+    }
+    function setColorMode(value) {
+        colorMode = value;
+        writeStored(storageKeys.colorMode, value);
+        applyToDocument();
+        notify();
+    }
+    function setPalette(value) {
+        palette = value;
+        writeStored(storageKeys.palette, value);
+        applyToDocument();
+        notify();
+    }
+    function setSurface(value) {
+        surface = value;
+        writeStored(storageKeys.surface, value);
+        applyToDocument();
+        notify();
+    }
+    function setStyle(value) {
+        style = value;
+        writeStored(storageKeys.style, value);
+        applyToDocument();
+        notify();
+    }
+    function setChart(value) {
+        chart = value;
+        writeStored(storageKeys.chart, value);
+        applyToDocument();
+        notify();
+    }
+    function setBase(value) {
+        base = value;
+        writeStored(storageKeys.base, value);
+        applyToDocument();
+        notify();
+    }
+    function setMenuAccent(value) {
+        menuAccent = value;
+        writeStored(storageKeys.menuAccent, value);
+        applyToDocument();
+        notify();
+    }
+    function setMenuColor(value) {
+        menuColor = value;
+        writeStored(storageKeys.menuColor, value);
+        applyToDocument();
+        notify();
+    }
+    function setMenuAppearance(value) {
+        menuAppearance = value;
+        writeStored(storageKeys.menuAppearance, value);
+        applyToDocument();
+        notify();
+    }
+    function toggleColorMode() {
+        setColorMode(isDark() ? 'light' : 'dark');
+    }
+    function subscribe(listener) {
+        listeners.add(listener);
+        listener(getState());
+        return () => {
+            listeners.delete(listener);
+        };
+    }
+    return {
+        getState,
+        subscribe,
+        init,
+        setColorMode,
+        toggleColorMode,
+        setPalette,
+        setSurface,
+        setStyle,
+        setChart,
+        setBase,
+        setMenuAccent,
+        setMenuColor,
+        setMenuAppearance,
+    };
+}
+/**
+ * Instance dùng chung cho cả app.
+ *
+ * Ba trục giao diện là trạng thái của `<html>`, tức là singleton theo đúng
+ * nghĩa — hai controller song song sẽ ghi đè lẫn nhau và cái nào ghi sau thì
+ * thắng. Mọi vỏ bọc framework nên dùng đúng instance này; `createThemeController`
+ * để dành cho test hoặc cho trường hợp nhúng nhiều app vào một trang.
+ */
+export const themeController = createThemeController();
+//# sourceMappingURL=controller.js.map

package/dist/controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"controller.js","sourceRoot":"","sources":["../src/controller.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * `@vestow/theme` — nguồn duy nhất của Design Token, dùng chung cho mọi
+ * framework.
+ *
+ * Phần CSS không đi qua entry này; nạp thẳng bằng đường dẫn:
+ *
+ *     @import "@vestow/theme/css/tailwind.css";  // app dùng Tailwind v4
+ *     @import "@vestow/theme/css/index.css";     // mọi chỗ còn lại
+ */
+export type { ThemeController } from './controller.js';
+export { createThemeController, themeController } from './controller.js';
+export type { Preset, TokenMap } from './preset.js';
+export { clearPreset, definePreset, PRESET_STYLE_ID, presetToCss } from './preset.js';
+export type { BaseId, BaseOption, ChartId, ChartOption, ColorMode, MenuAccentId, MenuAccentOption, MenuAppearanceId, MenuAppearanceOption, MenuColorId, MenuColorOption, PaletteId, PaletteOption, StyleId, StyleOption, SurfaceId, SurfaceOption, ThemeState, } from './registry.js';
+export { bases, chartPalettes, colorModes, defaults, domTargets, isBaseId, isChartId, isColorMode, isMenuAccentId, isMenuAppearanceId, isMenuColorId, isPaletteId, isStyleId, isSurfaceId, menuAccents, menuAppearances, menuColors, palettes, storageKeys, styleVariants, surfaces, } from './registry.js';
+export type { TokenName } from './token-names.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEtD,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAExE,YAAY,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEnD,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAErF,YAAY,EACV,MAAM,EACN,UAAU,EACV,OAAO,EACP,WAAW,EACX,SAAS,EACT,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,oBAAoB,EACpB,WAAW,EACX,eAAe,EACf,SAAS,EACT,aAAa,EACb,OAAO,EACP,WAAW,EACX,SAAS,EACT,aAAa,EACb,UAAU,GACX,MAAM,eAAe,CAAA;AAEtB,OAAO,EACL,KAAK,EACL,aAAa,EACb,UAAU,EACV,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,SAAS,EACT,WAAW,EACX,cAAc,EACd,kBAAkB,EAClB,aAAa,EACb,WAAW,EACX,SAAS,EACT,WAAW,EACX,WAAW,EACX,eAAe,EACf,UAAU,EACV,QAAQ,EACR,WAAW,EACX,aAAa,EACb,QAAQ,GACT,MAAM,eAAe,CAAA;AAEtB,YAAY,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA"}

package/dist/index.js

@@ -0,0 +1,13 @@
+/**
+ * `@vestow/theme` — nguồn duy nhất của Design Token, dùng chung cho mọi
+ * framework.
+ *
+ * Phần CSS không đi qua entry này; nạp thẳng bằng đường dẫn:
+ *
+ *     @import "@vestow/theme/css/tailwind.css";  // app dùng Tailwind v4
+ *     @import "@vestow/theme/css/index.css";     // mọi chỗ còn lại
+ */
+export { createThemeController, themeController } from './controller.js';
+export { clearPreset, definePreset, PRESET_STYLE_ID, presetToCss } from './preset.js';
+export { bases, chartPalettes, colorModes, defaults, domTargets, isBaseId, isChartId, isColorMode, isMenuAccentId, isMenuAppearanceId, isMenuColorId, isPaletteId, isStyleId, isSurfaceId, menuAccents, menuAppearances, menuColors, palettes, storageKeys, styleVariants, surfaces, } from './registry.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAIxE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAuBrF,OAAO,EACL,KAAK,EACL,aAAa,EACb,UAAU,EACV,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,SAAS,EACT,WAAW,EACX,cAAc,EACd,kBAAkB,EAClB,aAAa,EACb,WAAW,EACX,SAAS,EACT,WAAW,EACX,WAAW,EACX,eAAe,EACf,UAAU,EACV,QAAQ,EACR,WAAW,EACX,aAAa,EACb,QAAQ,GACT,MAAM,eAAe,CAAA"}