@askrjs/themes 0.0.11 → 0.0.13

package/src/components/navbar/navbar.tsx

@@ -6,6 +6,7 @@ import { DropdownContent } from "../overlays/dropdown-content";
 import type { NavBrandProps, NavDropdownProps, NavGroupProps, NavbarProps } from "./navbar.types";
 
 const ASKR_FRAGMENT = Symbol.for("askr.fragment");
+const LayoutBlock = Block as (props: Record<string, unknown>) => JSX.Element;
 
 function flattenNavbarChildren(children: unknown): unknown[] {
   return toChildArray(children).flatMap((child) => {
@@ -45,7 +46,7 @@ export function Navbar(props: NavbarProps): JSX.Element {
 
   if (!collapseAt) {
     return (
-      <Block
+      <LayoutBlock
         as="nav"
         direction="row"
         align="center"
@@ -55,7 +56,7 @@ export function Navbar(props: NavbarProps): JSX.Element {
         data-slot="navbar"
       >
         {children}
-      </Block>
+      </LayoutBlock>
     );
   }
 
@@ -64,9 +65,9 @@ export function Navbar(props: NavbarProps): JSX.Element {
   const navChildren = navbarChildren.filter((child) => !isNavBrandChild(child));
   const hasNavContent = hasRenderableChildren(navChildren);
   const content = (
-    <Block direction="row" align="center" gap="md" width="full" data-slot="navbar-content">
+    <LayoutBlock direction="row" align="center" gap="md" width="full" data-slot="navbar-content">
       {navChildren}
-    </Block>
+    </LayoutBlock>
   );
   const collapse = hasNavContent ? (
     <details data-slot="navbar-collapse">
@@ -79,7 +80,7 @@ export function Navbar(props: NavbarProps): JSX.Element {
   ) : null;
 
   return (
-    <Block
+    <LayoutBlock
       as="nav"
       direction="row"
       align="center"
@@ -90,7 +91,7 @@ export function Navbar(props: NavbarProps): JSX.Element {
       data-slot="navbar"
     >
       {[...brandChildren, collapse]}
-    </Block>
+    </LayoutBlock>
   );
 }
 
@@ -98,9 +99,16 @@ export function NavBrand(props: NavBrandProps): JSX.Element {
   const { children, ...rest } = props;
 
   return (
-    <Block direction="row" align="center" gap="sm" shrink={false} {...rest} data-slot="nav-brand">
+    <LayoutBlock
+      direction="row"
+      align="center"
+      gap="sm"
+      shrink={false}
+      {...rest}
+      data-slot="nav-brand"
+    >
       {children}
-    </Block>
+    </LayoutBlock>
   );
 }
 
@@ -108,12 +116,12 @@ export function NavGroup(props: NavGroupProps): JSX.Element {
   const { align, children, label, title = label, ...rest } = props;
 
   return (
-    <Block align={align} gap="sm" {...rest} data-align={align} data-slot="nav-group">
+    <LayoutBlock align={align} gap="sm" {...rest} data-align={align} data-slot="nav-group">
       {title !== undefined ? <div data-slot="nav-group-label">{title}</div> : null}
-      <Block gap="xs" data-slot="nav-group-body">
+      <LayoutBlock gap="xs" data-slot="nav-group-body">
         {children}
-      </Block>
-    </Block>
+      </LayoutBlock>
+    </LayoutBlock>
   );
 }
 
@@ -121,7 +129,7 @@ export function NavDropdown(props: NavDropdownProps): JSX.Element {
   const { align = "end", children, label, side = "bottom", sideOffset = 6, ...rest } = props;
 
   return (
-    <Block direction="row" align="center" data-slot="nav-dropdown">
+    <LayoutBlock direction="row" align="center" data-slot="nav-dropdown">
       <Dropdown {...rest}>
         <DropdownTrigger class={classes("nav-item")} data-slot="nav-dropdown-trigger">
           {label}
@@ -136,6 +144,6 @@ export function NavDropdown(props: NavDropdownProps): JSX.Element {
           {children}
         </DropdownContent>
       </Dropdown>
-    </Block>
+    </LayoutBlock>
   );
 }

package/src/components/separator/separator.tsx

@@ -1,5 +1,6 @@
 import { Slot } from "@askrjs/askr/foundations";
 import { mergeProps } from "../_internal/merge-props";
+import { intrinsicElement } from "../_internal/jsx";
 import type { SeparatorAsChildProps, SeparatorNativeProps } from "./separator.types";
 
 export function Separator(props: SeparatorNativeProps): JSX.Element;
@@ -19,5 +20,5 @@ export function Separator(props: SeparatorNativeProps | SeparatorAsChildProps) {
     return <Slot asChild {...finalProps} children={children} />;
   }
 
-  return <div {...finalProps}>{children}</div>;
+  return intrinsicElement("div", finalProps, children);
 }

package/src/components/sidebar/index.ts

@@ -12,7 +12,7 @@ export {
   SidebarMenuBadge,
   SidebarMenuButton,
   SidebarMenuItem,
-  SidebarProvider,
+  SidebarScope,
   SidebarRail,
   SidebarTrigger,
 } from "./sidebar";

package/src/components/sidebar/sidebar.tsx

@@ -2,6 +2,7 @@ import { Slot } from "@askrjs/askr/foundations";
 import { Block } from "../block";
 import { classes } from "../_internal/classes";
 import { mergeProps } from "../_internal/merge-props";
+import { intrinsicElement } from "../_internal/jsx";
 import type {
   SidebarButtonProps,
   SidebarPartProps,
@@ -25,7 +26,6 @@ function sidebarPart(
   element: keyof JSX.IntrinsicElements = "div",
 ): JSX.Element {
   const { as, asChild, children, class: className, ...rest } = props;
-  const Element = (as ?? element) as "div";
   const finalProps = mergeProps(rest, {
     class: className,
     "data-slot": slot,
@@ -35,7 +35,7 @@ function sidebarPart(
     return <Slot asChild {...finalProps} children={children as JSX.Element} />;
   }
 
-  return <Element {...finalProps}>{children}</Element>;
+  return intrinsicElement(String(as ?? element), finalProps, children);
 }
 
 export function Sidebar(props: SidebarProps): JSX.Element {
@@ -69,8 +69,8 @@ export function Sidebar(props: SidebarProps): JSX.Element {
   );
 }
 
-export function SidebarProvider(props: SidebarPartProps): JSX.Element {
-  return sidebarPart(props, "sidebar-provider");
+export function SidebarScope(props: SidebarPartProps): JSX.Element {
+  return sidebarPart(props, "sidebar-scope");
 }
 
 export function SidebarInset(props: SidebarPartProps): JSX.Element {
@@ -136,7 +136,7 @@ export function SidebarMenuButton(props: SidebarButtonProps): JSX.Element {
   }
 
   return (
-    <button type={type} {...finalProps}>
+    <button type={type as "button" | "submit" | "reset" | undefined} {...finalProps}>
       {children}
     </button>
   );
@@ -146,7 +146,7 @@ export function SidebarMenuAction(props: SidebarButtonProps): JSX.Element {
   const { children, class: className, tooltip, tooltipSide, type = "button", ...rest } = props;
   return (
     <button
-      type={type}
+      type={type as "button" | "submit" | "reset" | undefined}
       {...mergeProps(rest, {
         class: classes(className),
         "data-slot": "sidebar-menu-action",
@@ -170,7 +170,7 @@ export function SidebarTrigger(props: SidebarButtonProps): JSX.Element {
   const { children, class: className, tooltip, tooltipSide, type = "button", ...rest } = props;
   return (
     <button
-      type={type}
+      type={type as "button" | "submit" | "reset" | undefined}
       {...mergeProps(rest, {
         class: classes("btn btn-ghost btn-icon", className),
         "data-slot": "sidebar-trigger",

package/src/components/skeleton/skeleton.tsx

@@ -2,6 +2,7 @@ import { Slot } from "@askrjs/askr/foundations";
 import { mergeLayoutStyles } from "../_internal/block-layout";
 import { classes } from "../_internal/classes";
 import { mergeProps } from "../_internal/merge-props";
+import { intrinsicElement } from "../_internal/jsx";
 import { styleDeclarationsToClass } from "../_internal/style";
 import type { SkeletonAsChildProps, SkeletonProps } from "./skeleton.types";
 
@@ -28,15 +29,12 @@ export function Skeleton(props: SkeletonProps | SkeletonAsChildProps) {
     className?: unknown;
     style?: unknown;
   };
-  const layoutClass = styleDeclarationsToClass(
-    mergeLayoutStyles(
-      {
-        blockSize: resolveSkeletonDimension(height),
-        inlineSize: resolveSkeletonDimension(width),
-      },
-      style,
-    ),
-  );
+  const dimensions: Record<string, string | number> = {};
+  const blockSize = resolveSkeletonDimension(height);
+  const inlineSize = resolveSkeletonDimension(width);
+  if (blockSize !== undefined) dimensions.blockSize = blockSize;
+  if (inlineSize !== undefined) dimensions.inlineSize = inlineSize;
+  const layoutClass = styleDeclarationsToClass(mergeLayoutStyles(dimensions, style));
   const finalProps = mergeProps(rest, {
     ref,
     class: classes(classProp, className, layoutClass),
@@ -49,5 +47,5 @@ export function Skeleton(props: SkeletonProps | SkeletonAsChildProps) {
     return <Slot asChild {...finalProps} children={children} />;
   }
 
-  return <div {...finalProps}>{children}</div>;
+  return intrinsicElement("div", finalProps, children);
 }

package/src/components/text/text.tsx

@@ -1,5 +1,6 @@
 import { classes } from "../_internal/classes";
 import { mergeProps } from "../_internal/merge-props";
+import { intrinsicElement } from "../_internal/jsx";
 import type { TextElement, TextProps } from "./text.types";
 
 const DEFAULT_ELEMENT = "p";
@@ -34,6 +35,5 @@ export function Text<TElement extends TextElement = "p">(props: TextProps<TEleme
     "data-truncate": truncate ? "true" : undefined,
   });
 
-  const Element = (as ?? DEFAULT_ELEMENT) as keyof JSX.IntrinsicElements;
-  return <Element {...finalProps}>{children}</Element>;
+  return intrinsicElement(as ?? DEFAULT_ELEMENT, finalProps, children);
 }

package/src/components/theme/index.ts

@@ -3,17 +3,17 @@ export {
   CAT_THEME_OPTIONS,
   DEFAULT_THEME_OPTIONS,
   ThemePicker,
-  ThemeProvider,
+  ThemeScope,
   ThemeToggle,
-  useTheme,
+  theme,
 } from "./theme";
 export type {
   CatThemeName,
-  ThemeContextValue,
+  ThemeScopeValue,
   ThemeName,
   ThemeOption,
   ThemePickerProps,
-  ThemeProviderProps,
+  ThemeScopeProps,
   ThemeToggleProps,
   ThemeToggleRenderContext,
 } from "./theme";

package/src/components/theme/theme.tsx

@@ -1,6 +1,5 @@
-import { defineContext, getSignal, readContext, state } from "@askrjs/askr";
+import { defineScope, getSignal, readScope, state } from "@askrjs/askr";
 import type { JSXElement } from "@askrjs/askr/foundations/structures";
-import { resource } from "@askrjs/askr/resources";
 import { Button } from "@askrjs/ui";
 import type { ButtonNativeProps, PressEvent } from "@askrjs/ui";
 
@@ -14,14 +13,14 @@ export type ThemeOption = {
   label: string;
 };
 
-export type ThemeContextValue = {
+export type ThemeScopeValue = {
   theme: () => ThemeName;
   setTheme: (theme: ThemeName) => void;
   themes: readonly ThemeOption[];
   storageKey: string;
 };
 
-export type ThemeProviderProps = {
+export type ThemeScopeProps = {
   children?: unknown;
   defaultTheme?: ThemeName;
   themes?: readonly ThemeOption[];
@@ -67,23 +66,26 @@ 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");
-// Passive mount sync should not overwrite a newer user/provider-initiated change.
-let rootThemeRevision = 0;
-let explicitRootThemeOwner: symbol | undefined;
-const registeredProviderSignals = new WeakSet<AbortSignal>();
+type ThemeCoordinator = ReturnType<typeof createThemeCoordinator>;
+type InternalThemeScopeValue = ThemeScopeValue & {
+  readonly coordinator: ThemeCoordinator | null;
+  readonly depth: number;
+};
 
-const ThemeContext = defineContext<ThemeContextValue>({
+const ThemeScopeContext = defineScope<InternalThemeScopeValue>({
   theme: () => "system",
   setTheme: () => undefined,
   themes: DEFAULT_THEME_OPTIONS,
   storageKey: DEFAULT_STORAGE_KEY,
+  coordinator: null,
+  depth: -1,
 });
 
-export function useTheme(): ThemeContextValue {
-  return readContext(ThemeContext);
+export function theme(): ThemeScopeValue {
+  return readScope(ThemeScopeContext);
 }
 
-export function ThemeProvider(props: ThemeProviderProps): JSX.Element {
+export function ThemeScope(props: ThemeScopeProps): JSX.Element {
   const {
     children,
     defaultTheme = "system",
@@ -91,88 +93,142 @@ export function ThemeProvider(props: ThemeProviderProps): JSX.Element {
     storageKey = DEFAULT_STORAGE_KEY,
   } = props;
 
-  const providerId = state<symbol>(Symbol("ThemeProvider"))();
-  const providerSignal = getSignal();
-  const themeState = state<ThemeName>(readStoredTheme(storageKey) ?? defaultTheme);
+  const scopeId = state<symbol>(Symbol("ThemeScope"))();
+  const scopeSignal = getSignal();
+  // The first render must be identical on the server and in the browser.
+  // Browser persistence is adopted from the committed root ref, after Askr's
+  // hydration verifier has accepted the server markup.
+  const themeState = state<ThemeName>(defaultTheme);
+  const persistenceAdoption = state({ complete: false })();
   const currentTheme = themeState();
-
-  if (!registeredProviderSignals.has(providerSignal)) {
-    registeredProviderSignals.add(providerSignal);
-    providerSignal.addEventListener(
-      "abort",
-      () => {
-        if (explicitRootThemeOwner === providerId) {
-          explicitRootThemeOwner = undefined;
-        }
-      },
-      { once: true },
-    );
-  }
+  const parentScope = readScope(ThemeScopeContext);
+  const ownedCoordinator = state<ThemeCoordinator>(createThemeCoordinator())();
+  const coordinator = parentScope.coordinator ?? ownedCoordinator;
+  const scopeDepth = parentScope.depth + 1;
+  coordinator.register(scopeId, scopeDepth, currentTheme, scopeSignal);
 
   const setTheme = (nextTheme: ThemeName) => {
     themeState.set(nextTheme);
     writeStoredTheme(storageKey, nextTheme);
-    explicitRootThemeOwner = providerId;
-    rootThemeRevision += 1;
-    syncThemeRoot(nextTheme);
+    coordinator.activate(scopeId, nextTheme);
   };
 
-  const value: ThemeContextValue = {
+  const value: InternalThemeScopeValue = {
     theme: themeState,
     setTheme,
     themes,
     storageKey,
+    coordinator,
+    depth: scopeDepth,
   };
 
   return (
-    <ThemeContext.Scope value={value}>
-      <ThemeRootSync providerId={providerId} theme={currentTheme} />
-      <div data-slot="theme-provider">{children}</div>
-    </ThemeContext.Scope>
+    <ThemeScopeContext value={value}>
+      <div
+        data-slot="theme-scope"
+        ref={
+          parentScope.coordinator === null
+            ? (element: HTMLElement | null) => {
+                coordinator.attach(element);
+                if (!element || persistenceAdoption.complete) return;
+                persistenceAdoption.complete = true;
+                const storedTheme = readStoredTheme(storageKey);
+                if (storedTheme && storedTheme !== themeState()) {
+                  themeState.set(storedTheme);
+                  coordinator.activate(scopeId, storedTheme);
+                }
+              }
+            : undefined
+        }
+      >
+        {children}
+      </div>
+    </ThemeScopeContext>
   );
 }
 
-function ThemeRootSync(props: { providerId: symbol; theme: ThemeName }): JSX.Element | null {
-  const { providerId, theme } = props;
-  const expectedRootThemeRevision = rootThemeRevision;
-
-  resource(
-    ({ signal }: { signal: AbortSignal }) => {
-      if (typeof window === "undefined") {
-        syncThemeRoot(theme);
-        return null;
+function createThemeCoordinator() {
+  const scopes = new Map<
+    symbol,
+    {
+      depth: number;
+      sequence: number;
+      theme: ThemeName;
+      signal: AbortSignal;
+    }
+  >();
+  let nextSequence = 0;
+  let explicitOwner: symbol | undefined;
+  let root: Node | null = null;
+  let scheduled = false;
+
+  const target = (): HTMLElement | null => {
+    if (root?.nodeType === 9) return (root as Document).documentElement;
+    if (root && "host" in root) return (root as ShadowRoot).host as HTMLElement;
+    return typeof document === "undefined" ? null : document.documentElement;
+  };
+  const syncActive = (): void => {
+    if (explicitOwner !== undefined) return;
+    let candidate: { depth: number; sequence: number; theme: ThemeName } | undefined;
+    for (const scope of scopes.values()) {
+      if (
+        !candidate ||
+        scope.depth > candidate.depth ||
+        (scope.depth === candidate.depth && scope.sequence > candidate.sequence)
+      ) {
+        candidate = scope;
       }
+    }
+    if (candidate) syncThemeTarget(target(), candidate.theme);
+  };
+  const schedule = (): void => {
+    if (typeof document === "undefined" || scheduled) return;
+    scheduled = true;
+    setTimeout(() => {
+      scheduled = false;
+      syncActive();
+    }, 0);
+  };
 
-      const timeoutId = window.setTimeout(() => {
-        if (!signal.aborted) {
-          syncThemeRoot(theme, {
-            expectedRevision: expectedRootThemeRevision,
-            passive: true,
-            providerId,
-          });
-        }
-      }, 0);
-
-      signal.addEventListener(
-        "abort",
-        () => {
-          window.clearTimeout(timeoutId);
-        },
-        { once: true },
-      );
-
-      return null;
+  return Object.freeze({
+    attach(element: HTMLElement | null) {
+      if (element) root = element.getRootNode();
+      schedule();
     },
-    [theme],
-  );
-
-  return null;
+    register(id: symbol, depth: number, themeName: ThemeName, signal: AbortSignal) {
+      const existing = scopes.get(id);
+      scopes.set(id, {
+        depth,
+        sequence: existing?.sequence ?? nextSequence++,
+        theme: themeName,
+        signal,
+      });
+      if (!existing) {
+        signal.addEventListener(
+          "abort",
+          () => {
+            scopes.delete(id);
+            if (explicitOwner === id) explicitOwner = undefined;
+            schedule();
+          },
+          { once: true },
+        );
+      }
+      schedule();
+    },
+    activate(id: symbol, themeName: ThemeName) {
+      const scope = scopes.get(id);
+      if (scope) scope.theme = themeName;
+      explicitOwner = id;
+      syncThemeTarget(target(), themeName);
+    },
+  });
 }
 
 export function ThemePicker(props: ThemePickerProps): JSX.Element {
-  const theme = useTheme();
-  const { themes = theme.themes, label = "Theme", ...rest } = props;
-  const currentTheme = theme.theme();
+  const activeTheme = theme();
+  const { themes = activeTheme.themes, label = "Theme", ...rest } = props;
+  const currentTheme = activeTheme.theme();
 
   return (
     <select
@@ -183,7 +239,7 @@ export function ThemePicker(props: ThemePickerProps): JSX.Element {
       onChange={(event: Event) => {
         const target = getThemePickerTarget(event);
         if (target) {
-          theme.setTheme(target.value as ThemeName);
+          activeTheme.setTheme(target.value as ThemeName);
         }
       }}
     >
@@ -214,7 +270,7 @@ function getThemePickerTarget(event: Event): HTMLSelectElement | null {
 }
 
 export function ThemeToggle(props: ThemeToggleProps): JSX.Element {
-  const theme = useTheme();
+  const activeTheme = theme();
   const {
     children,
     lightIcon,
@@ -225,7 +281,7 @@ export function ThemeToggle(props: ThemeToggleProps): JSX.Element {
     ...rest
   } = props;
 
-  const currentTheme = theme.theme();
+  const currentTheme = activeTheme.theme();
   const nextTheme = getNextTheme(currentTheme, themes, getResolvedSystemTheme());
   const renderContext = { theme: currentTheme, nextTheme };
   const ariaLabel = (rest as Record<string, unknown>)["aria-label"];
@@ -254,7 +310,7 @@ export function ThemeToggle(props: ThemeToggleProps): JSX.Element {
       onPress={(event) => {
         onPress?.(event);
         if (!event.defaultPrevented && !Object.is(nextTheme, currentTheme)) {
-          theme.setTheme(nextTheme);
+          activeTheme.setTheme(nextTheme);
         }
       }}
     >
@@ -348,7 +404,7 @@ function isJSXElement(value: unknown): value is JSXElement {
 function cloneThemeToggleIcon(icon: unknown, key?: string): unknown {
   if (Array.isArray(icon)) {
     const clonedChildren = icon.map((child) => cloneThemeToggleIcon(child));
-    if ((icon as Record<symbol, unknown>)[STATIC_CHILDREN] === true) {
+    if ((icon as unknown as Record<symbol, unknown>)[STATIC_CHILDREN] === true) {
       Object.defineProperty(clonedChildren, STATIC_CHILDREN, {
         value: true,
         configurable: true,
@@ -377,31 +433,11 @@ function cloneThemeToggleIcon(icon: unknown, key?: string): unknown {
   return clonedIcon;
 }
 
-function syncThemeRoot(
+function syncThemeTarget(
+  html: HTMLElement | null,
   themeChoice: ThemeName | null | undefined,
-  options?: { expectedRevision?: number; passive?: boolean; providerId?: symbol },
 ): void {
-  if (typeof document === "undefined") {
-    return;
-  }
-
-  const html = document.documentElement;
-
-  if (
-    options?.passive &&
-    options.expectedRevision !== undefined &&
-    options.expectedRevision !== rootThemeRevision
-  ) {
-    return;
-  }
-
-  if (
-    options?.passive &&
-    explicitRootThemeOwner !== undefined &&
-    explicitRootThemeOwner !== options.providerId
-  ) {
-    return;
-  }
+  if (!html) return;
 
   if (themeChoice == null) {
     html.removeAttribute("data-theme");

package/src/components.ts

@@ -141,7 +141,7 @@ export {
   ToastAction,
   ToastClose,
   ToastDescription,
-  ToastProvider,
+  ToastHost,
   ToastTitle,
   ToastViewport,
   Toggle,
@@ -240,7 +240,7 @@ export {
   SidebarMenuBadge,
   SidebarMenuButton,
   SidebarMenuItem,
-  SidebarProvider,
+  SidebarScope,
   SidebarRail,
   SidebarTrigger,
 } from "./components/sidebar";
@@ -254,9 +254,9 @@ export {
   CAT_THEME_OPTIONS,
   DEFAULT_THEME_OPTIONS,
   ThemePicker,
-  ThemeProvider,
+  ThemeScope,
   ThemeToggle,
-  useTheme,
+  theme,
 } from "./components/theme";
 export * from "./components/catalog";
 

package/src/overlays.ts

@@ -34,7 +34,7 @@ export {
   ToastAction,
   ToastClose,
   ToastDescription,
-  ToastProvider,
+  ToastHost,
   ToastTitle,
   ToastViewport,
   Tooltip,
@@ -115,8 +115,8 @@ export type {
   ToastDescriptionProps,
   ToastOwnProps,
   ToastProps,
-  ToastProviderOwnProps,
-  ToastProviderProps,
+  ToastHostOwnProps,
+  ToastHostProps,
   ToastTitleAsChildProps,
   ToastTitleProps,
   ToastViewportAsChildProps,

package/src/theme.ts

@@ -5,17 +5,17 @@ export {
   CAT_THEME_OPTIONS,
   DEFAULT_THEME_OPTIONS,
   ThemePicker,
-  ThemeProvider,
+  ThemeScope,
   ThemeToggle,
-  useTheme,
+  theme,
 } from "./components/theme";
 export type {
   CatThemeName,
-  ThemeContextValue,
+  ThemeScopeValue,
   ThemeName,
   ThemeOption,
   ThemePickerProps,
-  ThemeProviderProps,
+  ThemeScopeProps,
   ThemeToggleProps,
   ThemeToggleRenderContext,
 } from "./components/theme";