@mdbase-dev/ui 0.1.0-beta.117

package/dist/theme.js

@@ -0,0 +1,59 @@
+/** Every mdbase surface stores an explicit System, Light or Dark choice under this key. */
+export const THEME_STORAGE_KEY = "mdbase:theme";
+export const themePreferences = ["system", "light", "dark"];
+/** Browser chrome colours matching the light and dark canvas tokens. */
+export const themeColors = { light: "#fcfcfd", dark: "#1b1d23" };
+export function normalizeThemePreference(value) {
+    return themePreferences.includes(value)
+        ? value
+        : "system";
+}
+/** Storage may be absent (server rendering, extension pages) or blocked; both mean System. */
+export function loadThemePreference(storage) {
+    try {
+        return normalizeThemePreference((storage ?? localStorage).getItem(THEME_STORAGE_KEY));
+    }
+    catch {
+        return "system";
+    }
+}
+function prefersDark() {
+    return typeof matchMedia === "function"
+        && matchMedia("(prefers-color-scheme: dark)").matches;
+}
+export function resolveDarkTheme(root = document.documentElement) {
+    const applied = root.dataset.theme;
+    return applied === "dark" || (applied !== "light" && prefersDark());
+}
+export function observeTheme(listener, root = document.documentElement) {
+    const observer = new MutationObserver(listener);
+    observer.observe(root, { attributeFilter: ["data-theme"] });
+    const media = typeof matchMedia === "function"
+        ? matchMedia("(prefers-color-scheme: dark)")
+        : null;
+    media?.addEventListener("change", listener);
+    return () => {
+        observer.disconnect();
+        media?.removeEventListener("change", listener);
+    };
+}
+export function applyThemePreference(preference, root = document.documentElement) {
+    if (preference === "system")
+        root.removeAttribute("data-theme");
+    else
+        root.dataset.theme = preference;
+    const dark = preference === "dark" || (preference === "system" && prefersDark());
+    if (typeof document !== "undefined") {
+        document.querySelector('meta[name="theme-color"]')
+            ?.setAttribute("content", dark ? themeColors.dark : themeColors.light);
+    }
+}
+export function saveThemePreference(preference, storage, root = document.documentElement) {
+    try {
+        (storage ?? localStorage).setItem(THEME_STORAGE_KEY, preference);
+    }
+    catch {
+        // Theme selection still applies for this session when storage is unavailable.
+    }
+    applyThemePreference(preference, root);
+}

package/package.json

@@ -0,0 +1,105 @@
+{
+  "name": "@mdbase-dev/ui",
+  "version": "0.1.0-beta.117",
+  "private": false,
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mdbase-dev/mdbase-connect.git",
+    "directory": "packages/app-ui"
+  },
+  "homepage": "https://mdbase.dev",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    "./app-switcher": {
+      "types": "./dist/AppSwitcher.d.ts",
+      "import": "./dist/AppSwitcher.js"
+    },
+    "./apps": {
+      "types": "./dist/apps.d.ts",
+      "import": "./dist/apps.js"
+    },
+    "./brand": {
+      "types": "./dist/brand.d.ts",
+      "import": "./dist/brand.js"
+    },
+    "./codemirror": {
+      "types": "./dist/codemirror.d.ts",
+      "import": "./dist/codemirror.js"
+    },
+    "./command-palette": {
+      "types": "./dist/CommandPalette.d.ts",
+      "import": "./dist/CommandPalette.js"
+    },
+    "./dialog": {
+      "types": "./dist/Dialog.d.ts",
+      "import": "./dist/Dialog.js"
+    },
+    "./popover": {
+      "types": "./dist/popover.d.ts",
+      "import": "./dist/popover.js"
+    },
+    "./save-notice": {
+      "types": "./dist/SaveNotice.d.ts",
+      "import": "./dist/SaveNotice.js"
+    },
+    "./screens": {
+      "types": "./dist/screens.d.ts",
+      "import": "./dist/screens.js"
+    },
+    "./select": {
+      "types": "./dist/Select.d.ts",
+      "import": "./dist/Select.js"
+    },
+    "./theme": {
+      "types": "./dist/theme.d.ts",
+      "import": "./dist/theme.js"
+    },
+    "./theme-select": {
+      "types": "./dist/ThemeSelect.d.ts",
+      "import": "./dist/ThemeSelect.js"
+    },
+    "./brand.css": "./css/brand.css",
+    "./controls.css": "./css/controls.css",
+    "./fonts.css": "./css/fonts.css",
+    "./motion.css": "./css/motion.css",
+    "./palette.css": "./css/palette.css",
+    "./screens.css": "./css/screens.css",
+    "./tokens.css": "./css/tokens.css"
+  },
+  "files": [
+    "css",
+    "dist",
+    "README.md"
+  ],
+  "dependencies": {
+    "@fontsource/atkinson-hyperlegible": "^5.3.0",
+    "@fontsource/azeret-mono": "^5.3.0"
+  },
+  "peerDependencies": {
+    "@codemirror/view": "^6.0.0",
+    "react": "^19.2.0"
+  },
+  "devDependencies": {
+    "@codemirror/view": "^6.43.12",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "typescript": "^7.0.2",
+    "vitest": "^4.1.10"
+  },
+  "peerDependenciesMeta": {
+    "@codemirror/view": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\" && tsc -p tsconfig.json",
+    "test": "vitest run",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  }
+}