@dbcdk/react-components 0.0.173 → 0.0.175

package/dist/hooks/useColorScheme.js

@@ -0,0 +1,72 @@
+'use client';
+import { useEffect, useSyncExternalStore } from 'react';
+import { isColorScheme, COLOR_SCHEME_STORAGE_KEY } from '../utils/color-scheme.constants';
+import { readCookie, writeCookie } from '../utils/cookie.utils';
+import { readLocalStorage, writeLocalStorage } from '../utils/localStorage.utils';
+
+function persistColorScheme(id) {
+  writeLocalStorage(COLOR_SCHEME_STORAGE_KEY, id);
+  writeCookie(COLOR_SCHEME_STORAGE_KEY, id);
+}
+function getDomColorScheme() {
+  return document.documentElement.dataset.theme;
+}
+function applyColorScheme(id) {
+  document.documentElement.dataset.theme = id;
+}
+let currentColorScheme = null;
+let resolved = false;
+const listeners = /* @__PURE__ */ new Set();
+function notify() {
+  listeners.forEach((listener) => listener());
+}
+function subscribe(listener) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+function getSnapshot() {
+  return currentColorScheme;
+}
+function getServerSnapshot() {
+  return null;
+}
+function resolveInitialColorScheme(initialColorScheme) {
+  const fromDomAttribute = getDomColorScheme();
+  let resolvedColorScheme = isColorScheme(fromDomAttribute) ? fromDomAttribute : initialColorScheme;
+  const fromCookie = readCookie(COLOR_SCHEME_STORAGE_KEY);
+  if (isColorScheme(fromCookie)) {
+    resolvedColorScheme = fromCookie;
+  } else {
+    const fromStorage = readLocalStorage(COLOR_SCHEME_STORAGE_KEY);
+    if (isColorScheme(fromStorage)) resolvedColorScheme = fromStorage;
+  }
+  return resolvedColorScheme;
+}
+function ensureResolved(initialColorScheme) {
+  if (resolved) return;
+  resolved = true;
+  const value = resolveInitialColorScheme(initialColorScheme);
+  applyColorScheme(value);
+  persistColorScheme(value);
+  currentColorScheme = value;
+  notify();
+}
+function switchColorScheme(id) {
+  applyColorScheme(id);
+  persistColorScheme(id);
+  currentColorScheme = id;
+  resolved = true;
+  notify();
+  return id;
+}
+function useColorScheme(initialColorScheme = "system") {
+  useEffect(() => {
+    ensureResolved(initialColorScheme);
+  }, [initialColorScheme]);
+  const colorScheme = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  return { colorScheme, switchColorScheme };
+}
+
+export { useColorScheme };

package/dist/hooks/useTheme.cjs

@@ -2,34 +2,59 @@
 'use strict';
 
 var react = require('react');
+var cookie_utils = require('../utils/cookie.utils');
+var localStorage_utils = require('../utils/localStorage.utils');
 var theme_constants = require('../utils/theme.constants');
 
-function getCookie(name) {
-  const match = document.cookie.match(new RegExp(`(?:^|; )${name}=([^;]*)`));
-  return match ? decodeURIComponent(match[1]) : null;
-}
-function persistTheme(id) {
-  try {
-    localStorage.setItem(theme_constants.THEME_STORAGE_KEY, id);
-  } catch {
-    console.error("Failed to access localStorage");
-  }
-  try {
-    document.cookie = `${theme_constants.THEME_STORAGE_KEY}=${encodeURIComponent(
-      id
-    )}; Path=/; Max-Age=${60 * 60 * 24 * 365}`;
-  } catch {
-    console.error("Failed to set theme cookie");
-  }
+const PRELOAD_ID_PREFIX = "dbc-theme-preload-";
+function persistTheme(storageKey, id) {
+  localStorage_utils.writeLocalStorage(storageKey, id);
+  cookie_utils.writeCookie(storageKey, id);
 }
 function getDomTheme() {
-  return document.documentElement.dataset.theme;
+  return document.documentElement.dataset.productTheme;
 }
 function applyTheme(id) {
-  document.documentElement.dataset.theme = id;
+  document.documentElement.dataset.productTheme = id;
+}
+function findLink(linkId) {
+  return document.getElementById(linkId);
+}
+function findPreloadLink(id) {
+  return document.getElementById(`${PRELOAD_ID_PREFIX}${id}`);
+}
+function ensureStylesheet(id, href, linkId, onReady) {
+  var _a;
+  if (!href) {
+    onReady();
+    return;
+  }
+  const active = findLink(linkId);
+  if (active && active.getAttribute("href") === href && active.rel === "stylesheet") {
+    onReady();
+    return;
+  }
+  const preload = findPreloadLink(id);
+  const link = (_a = active != null ? active : preload) != null ? _a : document.createElement("link");
+  const wasConnected = link.isConnected;
+  link.id = linkId;
+  link.rel = "stylesheet";
+  link.removeAttribute("as");
+  link.href = href;
+  if (preload && preload !== link) preload.remove();
+  let settled = false;
+  const finish = () => {
+    if (settled) return;
+    settled = true;
+    onReady();
+  };
+  link.addEventListener("load", finish, { once: true });
+  link.addEventListener("error", finish, { once: true });
+  if (!wasConnected) document.head.appendChild(link);
 }
 let currentTheme = null;
 let resolved = false;
+let preloadScheduled = false;
 const listeners = /* @__PURE__ */ new Set();
 function notify() {
   listeners.forEach((listener) => listener());
@@ -46,44 +71,85 @@ function getSnapshot() {
 function getServerSnapshot() {
   return null;
 }
-function resolveInitialTheme(initialTheme) {
-  const themeFromDataAttributes = getDomTheme();
-  let resolvedTheme = theme_constants.isThemeVariant(themeFromDataAttributes) ? themeFromDataAttributes : initialTheme;
-  const fromCookie = getCookie(theme_constants.THEME_STORAGE_KEY);
-  if (theme_constants.isThemeVariant(fromCookie)) {
-    resolvedTheme = fromCookie;
-  } else {
-    try {
-      const fromStorage = localStorage.getItem(theme_constants.THEME_STORAGE_KEY);
-      if (theme_constants.isThemeVariant(fromStorage)) resolvedTheme = fromStorage;
-    } catch {
-      console.error("Failed to access localStorage");
-    }
-  }
-  return resolvedTheme;
+function resolveInitialTheme(storageKey, defaultTheme) {
+  const fromDom = getDomTheme();
+  if (fromDom) return fromDom;
+  const fromCookie = cookie_utils.readCookie(storageKey);
+  if (fromCookie) return fromCookie;
+  const fromStorage = localStorage_utils.readLocalStorage(storageKey);
+  if (fromStorage) return fromStorage;
+  return defaultTheme;
 }
-function ensureResolved(initialTheme) {
+function ensureResolved(hrefs, defaultTheme, storageKey, linkId) {
   if (resolved) return;
   resolved = true;
-  const value = resolveInitialTheme(initialTheme);
-  applyTheme(value);
-  persistTheme(value);
-  currentTheme = value;
-  notify();
+  const value = resolveInitialTheme(storageKey, defaultTheme);
+  const finish = () => {
+    applyTheme(value);
+    persistTheme(storageKey, value);
+    currentTheme = value;
+    notify();
+  };
+  if (value === defaultTheme) {
+    finish();
+    return;
+  }
+  ensureStylesheet(value, hrefs[value], linkId, finish);
 }
-function switchTheme(id) {
-  applyTheme(id);
-  persistTheme(id);
-  currentTheme = id;
-  resolved = true;
-  notify();
-  return id;
+function schedulePreload(hrefs, defaultTheme) {
+  if (preloadScheduled) return;
+  preloadScheduled = true;
+  const run = () => {
+    var _a;
+    for (const [id, href] of Object.entries(hrefs)) {
+      if (id === defaultTheme || !href) continue;
+      if (((_a = findLink(theme_constants.THEME_LINK_ID)) == null ? void 0 : _a.getAttribute("href")) === href) continue;
+      if (findPreloadLink(id)) continue;
+      const link = document.createElement("link");
+      link.id = `${PRELOAD_ID_PREFIX}${id}`;
+      link.rel = "preload";
+      link.as = "style";
+      link.href = href;
+      document.head.appendChild(link);
+    }
+  };
+  const requestIdle = window.requestIdleCallback;
+  if (typeof requestIdle === "function") {
+    requestIdle(run);
+  } else {
+    setTimeout(run, 1);
+  }
 }
-function useTheme(initialTheme = "system") {
+function switchThemeInternal(hrefs, defaultTheme, storageKey, linkId, id) {
+  const finish = () => {
+    applyTheme(id);
+    persistTheme(storageKey, id);
+    currentTheme = id;
+    resolved = true;
+    notify();
+  };
+  if (id === defaultTheme) {
+    finish();
+    return;
+  }
+  ensureStylesheet(id, hrefs[id], linkId, finish);
+}
+function useTheme(options) {
+  const {
+    defaultTheme,
+    hrefs = {},
+    linkId = theme_constants.THEME_LINK_ID,
+    preloadOthers = true,
+    storageKey = theme_constants.THEME_STORAGE_KEY
+  } = options;
   react.useEffect(() => {
-    ensureResolved(initialTheme);
-  }, [initialTheme]);
+    ensureResolved(hrefs, defaultTheme, storageKey, linkId);
+    if (preloadOthers) schedulePreload(hrefs, defaultTheme);
+  }, []);
   const theme = react.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  function switchTheme(id) {
+    switchThemeInternal(hrefs, defaultTheme, storageKey, linkId, id);
+  }
   return { theme, switchTheme };
 }
 

package/dist/hooks/useTheme.d.ts

@@ -1,6 +1,18 @@
-import type { ThemeVariant } from '../utils/theme.constants';
-export type { ThemeVariant };
-export declare function useTheme(initialTheme?: ThemeVariant): {
-    theme: ThemeVariant | null;
-    switchTheme: (id: ThemeVariant) => ThemeVariant;
+import type { ThemeHrefs, ThemeId } from '../styles/themes/types';
+export type { ThemeHrefs, ThemeId };
+export interface UseThemeOptions {
+    /** The theme the app already loads via a normal static import — never
+     * fetched/linked dynamically, just applied via the attribute. */
+    defaultTheme: ThemeId;
+    /** Per-theme CSS URL, for any theme not already loaded some other way. */
+    hrefs?: ThemeHrefs;
+    /** DOM id for the `<link>` element used for the currently active non-default theme. */
+    linkId?: string;
+    /** Warm the browser cache for every other theme at idle time. Default true. */
+    preloadOthers?: boolean;
+    storageKey?: string;
+}
+export declare function useTheme(options: UseThemeOptions): {
+    theme: ThemeId | null;
+    switchTheme: (id: ThemeId) => void;
 };

package/dist/hooks/useTheme.js

@@ -1,33 +1,58 @@
 'use client';
 import { useEffect, useSyncExternalStore } from 'react';
-import { isThemeVariant, THEME_STORAGE_KEY } from '../utils/theme.constants';
+import { readCookie, writeCookie } from '../utils/cookie.utils';
+import { readLocalStorage, writeLocalStorage } from '../utils/localStorage.utils';
+import { THEME_STORAGE_KEY, THEME_LINK_ID } from '../utils/theme.constants';
 
-function getCookie(name) {
-  const match = document.cookie.match(new RegExp(`(?:^|; )${name}=([^;]*)`));
-  return match ? decodeURIComponent(match[1]) : null;
-}
-function persistTheme(id) {
-  try {
-    localStorage.setItem(THEME_STORAGE_KEY, id);
-  } catch {
-    console.error("Failed to access localStorage");
-  }
-  try {
-    document.cookie = `${THEME_STORAGE_KEY}=${encodeURIComponent(
-      id
-    )}; Path=/; Max-Age=${60 * 60 * 24 * 365}`;
-  } catch {
-    console.error("Failed to set theme cookie");
-  }
+const PRELOAD_ID_PREFIX = "dbc-theme-preload-";
+function persistTheme(storageKey, id) {
+  writeLocalStorage(storageKey, id);
+  writeCookie(storageKey, id);
 }
 function getDomTheme() {
-  return document.documentElement.dataset.theme;
+  return document.documentElement.dataset.productTheme;
 }
 function applyTheme(id) {
-  document.documentElement.dataset.theme = id;
+  document.documentElement.dataset.productTheme = id;
+}
+function findLink(linkId) {
+  return document.getElementById(linkId);
+}
+function findPreloadLink(id) {
+  return document.getElementById(`${PRELOAD_ID_PREFIX}${id}`);
+}
+function ensureStylesheet(id, href, linkId, onReady) {
+  var _a;
+  if (!href) {
+    onReady();
+    return;
+  }
+  const active = findLink(linkId);
+  if (active && active.getAttribute("href") === href && active.rel === "stylesheet") {
+    onReady();
+    return;
+  }
+  const preload = findPreloadLink(id);
+  const link = (_a = active != null ? active : preload) != null ? _a : document.createElement("link");
+  const wasConnected = link.isConnected;
+  link.id = linkId;
+  link.rel = "stylesheet";
+  link.removeAttribute("as");
+  link.href = href;
+  if (preload && preload !== link) preload.remove();
+  let settled = false;
+  const finish = () => {
+    if (settled) return;
+    settled = true;
+    onReady();
+  };
+  link.addEventListener("load", finish, { once: true });
+  link.addEventListener("error", finish, { once: true });
+  if (!wasConnected) document.head.appendChild(link);
 }
 let currentTheme = null;
 let resolved = false;
+let preloadScheduled = false;
 const listeners = /* @__PURE__ */ new Set();
 function notify() {
   listeners.forEach((listener) => listener());
@@ -44,44 +69,85 @@ function getSnapshot() {
 function getServerSnapshot() {
   return null;
 }
-function resolveInitialTheme(initialTheme) {
-  const themeFromDataAttributes = getDomTheme();
-  let resolvedTheme = isThemeVariant(themeFromDataAttributes) ? themeFromDataAttributes : initialTheme;
-  const fromCookie = getCookie(THEME_STORAGE_KEY);
-  if (isThemeVariant(fromCookie)) {
-    resolvedTheme = fromCookie;
-  } else {
-    try {
-      const fromStorage = localStorage.getItem(THEME_STORAGE_KEY);
-      if (isThemeVariant(fromStorage)) resolvedTheme = fromStorage;
-    } catch {
-      console.error("Failed to access localStorage");
-    }
-  }
-  return resolvedTheme;
+function resolveInitialTheme(storageKey, defaultTheme) {
+  const fromDom = getDomTheme();
+  if (fromDom) return fromDom;
+  const fromCookie = readCookie(storageKey);
+  if (fromCookie) return fromCookie;
+  const fromStorage = readLocalStorage(storageKey);
+  if (fromStorage) return fromStorage;
+  return defaultTheme;
 }
-function ensureResolved(initialTheme) {
+function ensureResolved(hrefs, defaultTheme, storageKey, linkId) {
   if (resolved) return;
   resolved = true;
-  const value = resolveInitialTheme(initialTheme);
-  applyTheme(value);
-  persistTheme(value);
-  currentTheme = value;
-  notify();
+  const value = resolveInitialTheme(storageKey, defaultTheme);
+  const finish = () => {
+    applyTheme(value);
+    persistTheme(storageKey, value);
+    currentTheme = value;
+    notify();
+  };
+  if (value === defaultTheme) {
+    finish();
+    return;
+  }
+  ensureStylesheet(value, hrefs[value], linkId, finish);
 }
-function switchTheme(id) {
-  applyTheme(id);
-  persistTheme(id);
-  currentTheme = id;
-  resolved = true;
-  notify();
-  return id;
+function schedulePreload(hrefs, defaultTheme) {
+  if (preloadScheduled) return;
+  preloadScheduled = true;
+  const run = () => {
+    var _a;
+    for (const [id, href] of Object.entries(hrefs)) {
+      if (id === defaultTheme || !href) continue;
+      if (((_a = findLink(THEME_LINK_ID)) == null ? void 0 : _a.getAttribute("href")) === href) continue;
+      if (findPreloadLink(id)) continue;
+      const link = document.createElement("link");
+      link.id = `${PRELOAD_ID_PREFIX}${id}`;
+      link.rel = "preload";
+      link.as = "style";
+      link.href = href;
+      document.head.appendChild(link);
+    }
+  };
+  const requestIdle = window.requestIdleCallback;
+  if (typeof requestIdle === "function") {
+    requestIdle(run);
+  } else {
+    setTimeout(run, 1);
+  }
 }
-function useTheme(initialTheme = "system") {
+function switchThemeInternal(hrefs, defaultTheme, storageKey, linkId, id) {
+  const finish = () => {
+    applyTheme(id);
+    persistTheme(storageKey, id);
+    currentTheme = id;
+    resolved = true;
+    notify();
+  };
+  if (id === defaultTheme) {
+    finish();
+    return;
+  }
+  ensureStylesheet(id, hrefs[id], linkId, finish);
+}
+function useTheme(options) {
+  const {
+    defaultTheme,
+    hrefs = {},
+    linkId = THEME_LINK_ID,
+    preloadOthers = true,
+    storageKey = THEME_STORAGE_KEY
+  } = options;
   useEffect(() => {
-    ensureResolved(initialTheme);
-  }, [initialTheme]);
+    ensureResolved(hrefs, defaultTheme, storageKey, linkId);
+    if (preloadOthers) schedulePreload(hrefs, defaultTheme);
+  }, []);
   const theme = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  function switchTheme(id) {
+    switchThemeInternal(hrefs, defaultTheme, storageKey, linkId, id);
+  }
   return { theme, switchTheme };
 }
 

package/dist/index.cjs

@@ -1,7 +1,9 @@
 'use strict';
 
+var colorScheme_constants = require('./utils/color-scheme.constants');
 var ThemeScript = require('./components/theme-script/ThemeScript');
 var theme_constants = require('./utils/theme.constants');
+var types = require('./styles/themes/types');
 var Icon = require('./components/icon/Icon');
 var UserDisplay = require('./components/user-display/UserDisplay');
 var Headline = require('./components/headline/Headline');
@@ -46,6 +48,12 @@ var CheckboxGroup = require('./components/forms/checkbox-group/CheckboxGroup');
 
 
 
+Object.keys(colorScheme_constants).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return colorScheme_constants[k]; }
+	});
+});
 Object.keys(ThemeScript).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,
@@ -58,6 +66,12 @@ Object.keys(theme_constants).forEach(function (k) {
 		get: function () { return theme_constants[k]; }
 	});
 });
+Object.keys(types).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return types[k]; }
+	});
+});
 Object.keys(Icon).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,

package/dist/index.d.ts

@@ -1,5 +1,7 @@
+export * from './utils/color-scheme.constants';
 export * from './components/theme-script/ThemeScript';
 export * from './utils/theme.constants';
+export * from './styles/themes/types';
 export * from './components/icon/Icon';
 export * from './components/user-display/UserDisplay';
 export * from './components/headline/Headline';

package/dist/index.js

@@ -1,5 +1,7 @@
+export * from './utils/color-scheme.constants';
 export * from './components/theme-script/ThemeScript';
 export * from './utils/theme.constants';
+export * from './styles/themes/types';
 export * from './components/icon/Icon';
 export * from './components/user-display/UserDisplay';
 export * from './components/headline/Headline';

package/dist/styles/themes/dbc/colors.css

@@ -215,6 +215,7 @@ html {
   /* Focus */
   --color-focus-ring: var(--dbc-blue-300);
   --focus-ring: 0 0 0 3px light-dark(rgba(12, 62, 227, 0.25), rgba(59, 130, 246, 0.35));
+  --color-field-focus: var(--color-brand);
 
   /* Syntax (JSON viewer) */
   --color-syntax-accent: var(--dbc-blue-300);
@@ -240,11 +241,22 @@ html {
   --button-fg-primary: var(--color-fg-on-brand);
 
   /* Product / logo lockup — generic defaults; apps with a custom identity
-     override these tokens only (see e.g. filmstriben-budget/theme.css) */
-  --color-logo: var(--color-brand);
+     override these tokens only (see e.g. filmstriben/theme.css) */
+  --color-logo: var(--color-fg-default);
   --color-logo-bg: color-mix(in srgb, var(--color-logo) 10%, var(--color-bg-surface));
   --color-logo-fg: var(--color-fg-default);
 
+  /* Navbar */
+  --color-navbar-bg: var(--color-bg-surface);
+  --color-navbar-fg: var(--color-fg-default);
+  --color-navbar-fg-muted: var(--color-fg-muted);
+  --color-navbar-border: var(--color-border-default);
+  /* Active nav-link accent — deliberately its own token, not --color-logo:
+     the two happen to agree in some themes (filmstriben: both yellow) but
+     not others (dbc: logo is neutral fg-default, but the active link should
+     still read as brand-colored, not the same shade as inactive text) */
+  --color-navbar-brand: var(--color-brand);
+
   /* Tables */
   --table-header-bg: light-dark(#f3f4f6, #1b2533);
   --table-row-bg: light-dark(#ffffff, #111827);