@askrjs/themes 0.0.17 → 0.0.20

package/src/components/theme/theme.tsx

@@ -1,6 +1,6 @@
 import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { defineScope, getSignal, readScope, state } from "@askrjs/askr";
-import type { JSXElement } from "@askrjs/askr/foundations/structures";
+import { cloneElement, isElement, type JSXElement } from "@askrjs/askr/foundations/structures";
 import { Button } from "@askrjs/ui";
 import type { ButtonNativeProps, PressEvent } from "@askrjs/ui";
 
@@ -67,7 +67,6 @@ export const CAT_THEME_OPTIONS: readonly ThemeOption[] = [
 
 const DEFAULT_STORAGE_KEY = "askr-theme";
 const STATIC_CHILDREN = Symbol.for("askr.static-children");
-const STATIC_CHILD_SLOTS_CACHE = Symbol.for("__askrStaticChildSlots");
 const documentThemeCoordinators = new WeakMap<Document, ThemeCoordinator>();
 type ThemeCoordinator = ReturnType<typeof createThemeCoordinator>;
 type InternalThemeScopeValue = ThemeScopeValue & {
@@ -110,7 +109,9 @@ export function ThemeScope(props: ThemeScopeProps): JSX.Element {
   const ownedCoordinator = state<ThemeCoordinator>(getDefaultThemeCoordinator())();
   const coordinator = parentScope.coordinator ?? ownedCoordinator;
   const scopeDepth = parentScope.depth + 1;
-  coordinator.register(scopeId, scopeDepth, currentTheme, scopeSignal);
+  coordinator.register(scopeId, scopeDepth, currentTheme, scopeSignal, (nextTheme) => {
+    if (themeState() !== nextTheme) themeState.set(nextTheme);
+  });
 
   const setTheme = (nextTheme: ThemeName) => {
     themeState.set(nextTheme);
@@ -143,6 +144,29 @@ export function ThemeScope(props: ThemeScopeProps): JSX.Element {
                   (nextTheme) => localResolvedSystemTheme.set(nextTheme),
                   scopeSignal,
                 );
+                if (element && typeof window !== "undefined") {
+                  const onStorage = (event: StorageEvent) => {
+                    let storageMatches = event.storageArea == null;
+                    try {
+                      storageMatches ||= event.storageArea === window.localStorage;
+                    } catch {
+                      // Locked-down/private contexts may deny access to localStorage.
+                    }
+                    if (!storageMatches || event.key !== storageKey) {
+                      return;
+                    }
+                    const nextTheme = event.newValue as ThemeName | null;
+                    if (!nextTheme) return;
+                    themeState.set(nextTheme);
+                    coordinator.activate(scopeId, nextTheme);
+                  };
+                  window.addEventListener("storage", onStorage);
+                  scopeSignal.addEventListener(
+                    "abort",
+                    () => window.removeEventListener("storage", onStorage),
+                    { once: true },
+                  );
+                }
                 if (!element || persistenceAdoption.complete) return;
                 persistenceAdoption.complete = true;
                 const storedTheme = readStoredTheme(storageKey);
@@ -173,6 +197,20 @@ function getDefaultThemeCoordinator(): ThemeCoordinator {
   return coordinator;
 }
 
+function removeEmptyGeneratedStyleRegistries(root: Node | null): void {
+  const ownerDocument =
+    root?.nodeType === 9
+      ? (root as Document)
+      : (root?.ownerDocument ?? (typeof document === "undefined" ? null : document));
+  if (!ownerDocument) return;
+
+  for (const registry of ownerDocument.querySelectorAll<HTMLStyleElement>(
+    "style[data-askr-style-registry]",
+  )) {
+    if (!registry.textContent?.trim()) registry.remove();
+  }
+}
+
 function createThemeCoordinator() {
   const scopes = new Map<
     symbol,
@@ -181,6 +219,7 @@ function createThemeCoordinator() {
       sequence: number;
       theme: ThemeName;
       signal: AbortSignal;
+      onThemeChange: (themeName: ThemeName) => void;
     }
   >();
   let nextSequence = 0;
@@ -213,6 +252,7 @@ function createThemeCoordinator() {
     setTimeout(() => {
       scheduled = false;
       syncActive();
+      if (scopes.size === 0) removeEmptyGeneratedStyleRegistries(root);
     }, 0);
   };
 
@@ -234,13 +274,20 @@ function createThemeCoordinator() {
       }
       schedule();
     },
-    register(id: symbol, depth: number, themeName: ThemeName, signal: AbortSignal) {
+    register(
+      id: symbol,
+      depth: number,
+      themeName: ThemeName,
+      signal: AbortSignal,
+      onThemeChange: (themeName: ThemeName) => void,
+    ) {
       const existing = scopes.get(id);
       scopes.set(id, {
         depth,
         sequence: existing?.sequence ?? nextSequence++,
         theme: themeName,
         signal,
+        onThemeChange,
       });
       if (!existing) {
         signal.addEventListener(
@@ -259,6 +306,13 @@ function createThemeCoordinator() {
       const scope = scopes.get(id);
       if (scope) scope.theme = themeName;
       explicitOwner = id;
+      const ownerDepth = scope?.depth;
+      for (const [scopeId, registered] of scopes) {
+        if (scopeId !== id && registered.depth === ownerDepth) {
+          registered.theme = themeName;
+          registered.onThemeChange(themeName);
+        }
+      }
       syncThemeTarget(target(), themeName);
     },
   });
@@ -422,16 +476,6 @@ function renderThemeToggleIconSlots(
   ));
 }
 
-function isJSXElement(value: unknown): value is JSXElement {
-  return (
-    typeof value === "object" &&
-    value !== null &&
-    "$$typeof" in value &&
-    "type" in value &&
-    "props" in value
-  );
-}
-
 function cloneThemeToggleIcon(icon: unknown, key?: string): unknown {
   if (Array.isArray(icon)) {
     const clonedChildren = icon.map((child) => cloneThemeToggleIcon(child));
@@ -444,7 +488,7 @@ function cloneThemeToggleIcon(icon: unknown, key?: string): unknown {
     return clonedChildren;
   }
 
-  if (!isJSXElement(icon)) return icon;
+  if (!isElement(icon)) return icon;
 
   const props = icon.props as Record<string, unknown> | undefined;
   const clonedProps = props ? { ...props } : {};
@@ -453,15 +497,11 @@ function cloneThemeToggleIcon(icon: unknown, key?: string): unknown {
     clonedProps.children = cloneThemeToggleIcon(clonedProps.children);
   }
 
-  const iconKey = (icon.key ?? key ?? null) as string | number | null;
-  const clonedIcon = {
-    ...icon,
-    key: iconKey,
-    props: clonedProps,
-  };
-
-  delete (clonedIcon as Record<symbol, unknown>)[STATIC_CHILD_SLOTS_CACHE];
-  return clonedIcon;
+  const clonedIcon = cloneElement(icon, clonedProps);
+  return {
+    ...clonedIcon,
+    key: icon.key ?? key ?? null,
+  } satisfies JSXElement;
 }
 
 function syncThemeTarget(

package/src/ssr.ts

@@ -1,6 +1,7 @@
-import { styleRulesForHtml } from "./components/_internal/style";
-
 const STYLE_REGISTRY_ATTR = "data-askr-style-registry";
+const STYLE_CLASS_PREFIX = "ak-style-";
+const CLASS_ATTRIBUTE_PATTERN = /\sclass=(?:"([^"]*)"|'([^']*)')/g;
+const MAX_STYLE_RULES = 512;
 
 type DocumentRenderArgsLike = {
   appHtml: string;
@@ -22,6 +23,16 @@ function escapeStyleRawText(value: string): string {
   return value.replace(/<\/style/gi, "<\\/style");
 }
 
+function generatedStyleClasses(html: string): Set<string> {
+  const classes = new Set<string>();
+  for (const attribute of html.matchAll(CLASS_ATTRIBUTE_PATTERN)) {
+    for (const className of (attribute[1] ?? attribute[2] ?? "").split(/\s+/)) {
+      if (className.startsWith(STYLE_CLASS_PREFIX)) classes.add(className);
+    }
+  }
+  return classes;
+}
+
 function findHeadEnd(html: string): number {
   let index = 0;
   while (index < html.length) {
@@ -72,24 +83,38 @@ export function withThemeStyles<TArgs extends DocumentRenderArgsLike>(
   return (args) => {
     const documentHtml = documentRenderer(args);
     const registeredStyles = args.context.styles;
-    const rules = registeredStyles
-      ? (() => {
-          const styles = new Map<string, string>();
-          for (const style of registeredStyles) {
-            if (!style.id || !style.cssText) {
-              throw new TypeError("Invalid SSR theme style registration.");
-            }
-            const existing = styles.get(style.id);
-            if (existing !== undefined && existing !== style.cssText) {
-              throw new RangeError(
-                `SSR style registration collision for ${JSON.stringify(style.id)}.`,
-              );
-            }
-            styles.set(style.id, style.cssText);
-          }
-          return Array.from(styles.values());
-        })()
-      : styleRulesForHtml(args.appHtml);
+    const generatedClasses = generatedStyleClasses(documentHtml);
+    if (registeredStyles === undefined) {
+      if (generatedClasses.size > 0) {
+        throw new Error(
+          "Generated theme classes require request-local SSR style registrations from @askrjs/askr.",
+        );
+      }
+      return documentHtml;
+    }
+
+    const styles = new Map<string, string>();
+    for (const style of registeredStyles) {
+      if (!style.id || !style.cssText) {
+        throw new TypeError("Invalid SSR theme style registration.");
+      }
+      const existing = styles.get(style.id);
+      if (existing !== undefined && existing !== style.cssText) {
+        throw new RangeError(`SSR style registration collision for ${JSON.stringify(style.id)}.`);
+      }
+      styles.set(style.id, style.cssText);
+      if (styles.size > MAX_STYLE_RULES) {
+        throw new RangeError("Theme style registry capacity exceeded.");
+      }
+    }
+    for (const className of generatedClasses) {
+      if (!styles.has(className)) {
+        throw new Error(
+          `Missing request-local SSR style registration for ${JSON.stringify(className)}.`,
+        );
+      }
+    }
+    const rules = Array.from(styles.values());
     if (rules.length === 0) return documentHtml;
 
     const nonce =

package/src/themes/default/styles/display/coverage.css

@@ -6,8 +6,10 @@
 }
 
 :where([data-slot="theme-picker"]) {
+  appearance: none;
   display: inline-flex;
-  min-block-size: var(--ak-density-control-height-md);
+  block-size: var(--ak-density-control-height-md, 2.25rem);
+  min-block-size: var(--ak-density-control-height-md, 2.25rem);
   min-inline-size: min(8rem, 100%);
   max-inline-size: 100%;
   padding-inline: var(--ak-density-control-padding-x-md) 2.1rem;

package/src/themes/default/styles/layout/block.css

@@ -24,17 +24,21 @@
 }
 
 :where([data-slot="nav-group-label"]) {
+  max-inline-size: 100%;
   margin: 0;
   color: var(--ak-color-text-muted);
   font-size: var(--ak-font-size-xs);
   font-weight: var(--ak-font-weight-medium);
   line-height: var(--ak-line-height-tight);
+  overflow-wrap: anywhere;
 }
 
 :where([data-slot="nav-item"]) {
+  max-inline-size: 100%;
   min-block-size: 2rem;
   color: var(--ak-color-text-muted);
   text-decoration: none;
+  white-space: normal;
   transition:
     background var(--ak-duration-fast) var(--ak-ease-standard),
     color var(--ak-duration-fast) var(--ak-ease-standard);

package/src/themes/default/tokens.css

@@ -158,7 +158,7 @@
   --ak-section-3: var(--ak-space-6);
   --ak-section-4: var(--ak-space-7);
 
-  --ak-z-dropdown: 1000;
+  --ak-z-dropdown: 1500;
   --ak-z-index-base: auto;
   --ak-z-index-sm: 10;
   --ak-z-index-md: 100;

package/templates/theme/tokens.css

@@ -158,7 +158,7 @@
   --ak-section-3: var(--ak-space-6);
   --ak-section-4: var(--ak-space-7);
 
-  --ak-z-dropdown: 1000;
+  --ak-z-dropdown: 1500;
   --ak-z-index-base: auto;
   --ak-z-index-sm: 10;
   --ak-z-index-md: 100;