@askrjs/themes 0.0.8 → 0.0.9

package/src/components/shell/shell-responsive.tsx

@@ -46,28 +46,92 @@ export function isShellPanelChild(child: unknown, panelComponent: unknown): chil
   return isJsxElement(child) && child.type === panelComponent;
 }
 
+function renderShellChildKey(child: unknown, index: number, keyPrefix: string): string {
+  return isJsxElement(child) && child.key != null ? String(child.key) : `${keyPrefix}-${index}`;
+}
+
+function keyMissingShellChildren(children: unknown[], keyPrefix: string): unknown[] {
+  let keyedChildren: unknown[] | undefined;
+
+  for (let index = 0; index < children.length; index += 1) {
+    const child = children[index];
+
+    if (isJsxElement(child) && child.key == null) {
+      keyedChildren ??= children.slice(0, index);
+      keyedChildren.push({
+        ...child,
+        key: `${keyPrefix}-${index}`,
+      });
+      continue;
+    }
+
+    keyedChildren?.push(child);
+  }
+
+  return keyedChildren ?? children;
+}
+
+function hasPanelProps(
+  props: Record<string, unknown> | undefined,
+  panelProps: ShellResponsivePanelProps,
+): boolean {
+  return (
+    props?.active === panelProps.active &&
+    props?.collapseLabel === panelProps.collapseLabel &&
+    props?.onClose === panelProps.onClose &&
+    props?.open === panelProps.open &&
+    props?.panelId === panelProps.panelId
+  );
+}
+
+function applyShellPanelProps(
+  children: unknown[],
+  keyPrefix: string,
+  panelProps: ShellResponsivePanelProps,
+): unknown[] {
+  let panelChildren: unknown[] | undefined;
+
+  for (let index = 0; index < children.length; index += 1) {
+    const child = children[index];
+
+    if (!isJsxElement(child)) {
+      panelChildren?.push(child);
+      continue;
+    }
+
+    const props = child.props as Record<string, unknown> | undefined;
+
+    if (hasPanelProps(props, panelProps)) {
+      panelChildren?.push(child);
+      continue;
+    }
+
+    panelChildren ??= children.slice(0, index);
+    panelChildren.push({
+      ...child,
+      key: child.key != null ? child.key : `${keyPrefix}-${index}`,
+      props: {
+        ...props,
+        active: panelProps.active,
+        collapseLabel: panelProps.collapseLabel,
+        onClose: panelProps.onClose,
+        open: panelProps.open,
+        panelId: panelProps.panelId,
+      },
+    });
+  }
+
+  return panelChildren ?? children;
+}
+
 export function renderKeyedShellChildren(children: unknown, keyPrefix: string): JSX.Element {
   const childList = toChildArray(children);
-  const needsKeying = childList.some((child) => isJsxElement(child) && child.key == null);
-  const keyedChildren = needsKeying
-    ? childList.map((child, index) => {
-        if (!isJsxElement(child) || child.key != null) {
-          return child;
-        }
-
-        return {
-          ...child,
-          key: `${keyPrefix}-${index}`,
-        };
-      })
-    : childList;
+  const keyedChildren = keyMissingShellChildren(childList, keyPrefix);
 
   return (
     <For
       each={() => keyedChildren}
-      by={(child, index) =>
-        isJsxElement(child) && child.key != null ? String(child.key) : `${keyPrefix}-${index}`
-      }
+      by={(child, index) => renderShellChildKey(child, index, keyPrefix)}
     >
       {(child) => child as never}
     </For>
@@ -80,60 +144,12 @@ export function renderKeyedShellPanelChildren(
   panelProps: ShellResponsivePanelProps,
 ): JSX.Element {
   const childList = toChildArray(children);
-  const needsPanelProps = childList.some((child) => {
-    if (!isJsxElement(child)) {
-      return false;
-    }
-
-    const props = child.props as Record<string, unknown> | undefined;
-
-    return (
-      props?.active !== panelProps.active ||
-      props?.collapseLabel !== panelProps.collapseLabel ||
-      props?.onClose !== panelProps.onClose ||
-      props?.open !== panelProps.open ||
-      props?.panelId !== panelProps.panelId
-    );
-  });
-  const keyedChildren = needsPanelProps
-    ? childList.map((child, index) => {
-        if (!isJsxElement(child)) {
-          return child;
-        }
-
-        const props = child.props as Record<string, unknown> | undefined;
-
-        if (
-          props?.active === panelProps.active &&
-          props?.collapseLabel === panelProps.collapseLabel &&
-          props?.onClose === panelProps.onClose &&
-          props?.open === panelProps.open &&
-          props?.panelId === panelProps.panelId
-        ) {
-          return child;
-        }
-
-        return {
-          ...child,
-          key: child.key != null ? child.key : `${keyPrefix}-${index}`,
-          props: {
-            ...props,
-            active: panelProps.active,
-            collapseLabel: panelProps.collapseLabel,
-            onClose: panelProps.onClose,
-            open: panelProps.open,
-            panelId: panelProps.panelId,
-          },
-        };
-      })
-    : childList;
+  const keyedChildren = applyShellPanelProps(childList, keyPrefix, panelProps);
 
   return (
     <For
       each={() => keyedChildren}
-      by={(child, index) =>
-        isJsxElement(child) && child.key != null ? String(child.key) : `${keyPrefix}-${index}`
-      }
+      by={(child, index) => renderShellChildKey(child, index, keyPrefix)}
     >
       {(child) => child as never}
     </For>

package/src/components/sidebar/sidebar.tsx

@@ -19,7 +19,10 @@ import type { CollapseIconPlacement } from "../shell/shell-nav.types";
 
 type SidebarChildren = {
   brand?: unknown;
-  items: unknown[];
+  drawerItems: unknown[];
+  drawerSourceItems: unknown[];
+  explicitPanelItems: unknown[];
+  toggle?: SidebarToggleConfig;
 };
 
 type SidebarToggleConfig = {
@@ -27,38 +30,49 @@ type SidebarToggleConfig = {
   expandedIcon?: unknown;
 };
 
+function isSidebarToggleChild(child: unknown): boolean {
+  return isJsxElement(child) && child.type === SidebarToggle;
+}
+
 function splitSidebarChildren(children: unknown[]): SidebarChildren {
-  const brandIndex = children.findIndex((child) => isJsxElement(child) && child.type === NavBrand);
+  const explicitPanelItems: unknown[] = [];
+  const drawerSourceItems: unknown[] = [];
+  let drawerItems: unknown[] | undefined;
+  let brand: unknown;
+  let hasBrand = false;
+  let hasToggle = false;
+  let toggle: SidebarToggleConfig | undefined;
 
-  if (brandIndex === -1) {
-    return { items: children };
-  }
+  for (const child of children) {
+    if (isShellPanelChild(child, SidebarPanel)) {
+      explicitPanelItems.push(child);
+      continue;
+    }
 
-  return {
-    brand: children[brandIndex],
-    items: children.filter((_, index) => index !== brandIndex),
-  };
-}
+    if (!hasToggle && isSidebarToggleChild(child)) {
+      hasToggle = true;
+      toggle = (child as { props?: SidebarToggleConfig } | undefined)?.props;
+      continue;
+    }
 
-function isSidebarToggleChild(child: unknown): boolean {
-  return isJsxElement(child) && child.type === SidebarToggle;
-}
+    drawerSourceItems.push(child);
 
-function splitSidebarToggle(children: unknown[]): {
-  items: unknown[];
-  toggle?: SidebarToggleConfig;
-} {
-  const toggleIndex = children.findIndex((child) => isSidebarToggleChild(child));
+    if (!hasBrand && isJsxElement(child) && child.type === NavBrand) {
+      brand = child;
+      hasBrand = true;
+      drawerItems ??= drawerSourceItems.slice(0, drawerSourceItems.length - 1);
+      continue;
+    }
 
-  if (toggleIndex === -1) {
-    return { items: children };
+    drawerItems?.push(child);
   }
 
-  const toggleChild = children[toggleIndex] as { props?: SidebarToggleConfig } | undefined;
-
   return {
-    items: children.filter((_, index) => index !== toggleIndex),
-    toggle: toggleChild?.props,
+    brand: hasBrand ? brand : undefined,
+    drawerItems: drawerItems ?? drawerSourceItems,
+    drawerSourceItems,
+    explicitPanelItems,
+    toggle,
   };
 }
 
@@ -152,8 +166,7 @@ export function Sidebar(props: SidebarProps): JSX.Element {
   const effectiveCollapseLabel =
     collapseLabel ?? (typeof ariaLabel === "string" ? ariaLabel : undefined) ?? "Menu";
   const childItems = toChildArray(children);
-  const explicitPanelItems = childItems.filter((child) => isShellPanelChild(child, SidebarPanel));
-  const contentItems = childItems.filter((child) => !isShellPanelChild(child, SidebarPanel));
+  const sidebarChildren = splitSidebarChildren(childItems);
   const isResponsive = breakpoint !== undefined;
   const responsiveCollapsedState = state(isResponsive ? isSidebarCollapsed(breakpoint) : false);
   const drawerOpenState = state(false);
@@ -202,10 +215,11 @@ export function Sidebar(props: SidebarProps): JSX.Element {
 
     setRailCollapsed(!isRailCollapsed);
   };
-  const { items: drawerSourceItems, toggle: railToggleConfig } = splitSidebarToggle(contentItems);
-  const { brand: drawerBrand, items: drawerItems } = splitSidebarChildren(drawerSourceItems);
-  const desktopChildren = renderKeyedShellChildren(drawerSourceItems, "sidebar-desktop");
-  const drawerChildren = renderKeyedShellChildren(drawerItems, "sidebar-drawer");
+  const desktopChildren = renderKeyedShellChildren(
+    sidebarChildren.drawerSourceItems,
+    "sidebar-desktop",
+  );
+  const drawerChildren = renderKeyedShellChildren(sidebarChildren.drawerItems, "sidebar-drawer");
 
   const contextValue = {
     active: () => isResponsive,
@@ -227,12 +241,16 @@ export function Sidebar(props: SidebarProps): JSX.Element {
     panelId,
   };
   const panels =
-    explicitPanelItems.length > 0 ? (
-      renderKeyedShellPanelChildren(explicitPanelItems, "sidebar-panel", panelContext)
+    sidebarChildren.explicitPanelItems.length > 0 ? (
+      renderKeyedShellPanelChildren(
+        sidebarChildren.explicitPanelItems,
+        "sidebar-panel",
+        panelContext,
+      )
     ) : isResponsive ? (
       <SidebarPanel
         active={isResponsive}
-        brand={drawerBrand}
+        brand={sidebarChildren.brand}
         collapseLabel={effectiveCollapseLabel}
         onClose={closeDrawer}
         onClick={closeDrawerOnNavActivation}
@@ -305,7 +323,7 @@ export function Sidebar(props: SidebarProps): JSX.Element {
                   {renderSidebarRailContents(
                     effectiveCollapseLabel,
                     isRailCollapsed,
-                    railToggleConfig,
+                    sidebarChildren.toggle,
                   )}
                 </button>
               </div>

package/src/components/theme/theme.tsx

@@ -1,4 +1,4 @@
-import { defineContext, readContext, state } from "@askrjs/askr";
+import { defineContext, getSignal, readContext, state } from "@askrjs/askr";
 import type { JSXElement } from "@askrjs/askr/foundations/structures";
 import { resource } from "@askrjs/askr/resources";
 import { Button } from "@askrjs/ui";
@@ -65,6 +65,10 @@ export const CAT_THEME_OPTIONS: readonly ThemeOption[] = [
 ];
 
 const DEFAULT_STORAGE_KEY = "askr-theme";
+// Passive mount sync should not overwrite a newer user/provider-initiated change.
+let rootThemeRevision = 0;
+let explicitRootThemeOwner: symbol | undefined;
+const registeredProviderSignals = new WeakSet<AbortSignal>();
 
 const ThemeContext = defineContext<ThemeContextValue>({
   theme: () => "system",
@@ -85,12 +89,29 @@ 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 currentTheme = themeState();
 
+  if (!registeredProviderSignals.has(providerSignal)) {
+    registeredProviderSignals.add(providerSignal);
+    providerSignal.addEventListener(
+      "abort",
+      () => {
+        if (explicitRootThemeOwner === providerId) {
+          explicitRootThemeOwner = undefined;
+        }
+      },
+      { once: true },
+    );
+  }
+
   const setTheme = (nextTheme: ThemeName) => {
     themeState.set(nextTheme);
     writeStoredTheme(storageKey, nextTheme);
+    explicitRootThemeOwner = providerId;
+    rootThemeRevision += 1;
     syncThemeRoot(nextTheme);
   };
 
@@ -103,14 +124,15 @@ export function ThemeProvider(props: ThemeProviderProps): JSX.Element {
 
   return (
     <ThemeContext.Scope value={value}>
-      <ThemeRootSync theme={currentTheme} />
+      <ThemeRootSync providerId={providerId} theme={currentTheme} />
       <div data-slot="theme-provider">{children}</div>
     </ThemeContext.Scope>
   );
 }
 
-function ThemeRootSync(props: { theme: ThemeName }): JSX.Element | null {
-  const { theme } = props;
+function ThemeRootSync(props: { providerId: symbol; theme: ThemeName }): JSX.Element | null {
+  const { providerId, theme } = props;
+  const expectedRootThemeRevision = rootThemeRevision;
 
   resource(
     ({ signal }: { signal: AbortSignal }) => {
@@ -121,7 +143,11 @@ function ThemeRootSync(props: { theme: ThemeName }): JSX.Element | null {
 
       const timeoutId = window.setTimeout(() => {
         if (!signal.aborted) {
-          syncThemeRoot(theme);
+          syncThemeRoot(theme, {
+            expectedRevision: expectedRootThemeRevision,
+            passive: true,
+            providerId,
+          });
         }
       }, 0);
 
@@ -144,20 +170,23 @@ function ThemeRootSync(props: { theme: ThemeName }): JSX.Element | null {
 export function ThemePicker(props: ThemePickerProps): JSX.Element {
   const theme = useTheme();
   const { themes = theme.themes, label = "Theme", ...rest } = props;
+  const currentTheme = theme.theme();
 
   return (
     <select
       {...rest}
       aria-label={rest["aria-label"] ?? label}
       data-slot="theme-picker"
-      value={theme.theme()}
+      value={currentTheme}
       onChange={(event: Event) => {
-        const target = event.currentTarget as HTMLSelectElement;
-        theme.setTheme(target.value as ThemeName);
+        const target = getThemePickerTarget(event);
+        if (target) {
+          theme.setTheme(target.value as ThemeName);
+        }
       }}
     >
       {themes.map((option) => (
-        <option key={option.value} value={option.value}>
+        <option key={option.value} value={option.value} selected={option.value === currentTheme}>
           {option.label}
         </option>
       ))}
@@ -165,6 +194,23 @@ export function ThemePicker(props: ThemePickerProps): JSX.Element {
   );
 }
 
+function getThemePickerTarget(event: Event): HTMLSelectElement | null {
+  if (typeof HTMLSelectElement === "undefined") {
+    return null;
+  }
+
+  const path = typeof event.composedPath === "function" ? event.composedPath() : [];
+  const candidates = [event.target, event.currentTarget, ...path];
+
+  for (const candidate of candidates) {
+    if (candidate instanceof HTMLSelectElement) {
+      return candidate;
+    }
+  }
+
+  return null;
+}
+
 export function ThemeToggle(props: ThemeToggleProps): JSX.Element {
   const theme = useTheme();
   const {
@@ -199,7 +245,9 @@ export function ThemeToggle(props: ThemeToggleProps): JSX.Element {
       data-next-theme={nextTheme}
       onPress={(event) => {
         onPress?.(event);
-        if (!event.defaultPrevented) theme.setTheme(nextTheme);
+        if (!event.defaultPrevented && !Object.is(nextTheme, currentTheme)) {
+          theme.setTheme(nextTheme);
+        }
       }}
     >
       <span data-slot="theme-toggle-content">{content}</span>
@@ -255,13 +303,32 @@ function cloneThemeToggleIcon(icon: unknown): unknown {
   };
 }
 
-function syncThemeRoot(themeChoice: ThemeName | null | undefined): void {
+function syncThemeRoot(
+  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 (themeChoice == null) {
     html.removeAttribute("data-theme");
     html.removeAttribute("data-theme-choice");
@@ -280,7 +347,8 @@ function syncThemeRoot(themeChoice: ThemeName | null | undefined): void {
 function readStoredTheme(storageKey: string): ThemeName | undefined {
   if (typeof window === "undefined") return undefined;
   try {
-    return (window.localStorage.getItem(storageKey) as ThemeName | null) ?? undefined;
+    const storedTheme = window.localStorage.getItem(storageKey);
+    return storedTheme ? (storedTheme as ThemeName) : undefined;
   } catch {
     return undefined;
   }

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

@@ -19,12 +19,18 @@
 }
 
 :where(.avatar-fallback, [data-slot="avatar-fallback"]) {
+  box-sizing: border-box;
   display: inline-grid;
   place-items: center;
   inline-size: 100%;
   block-size: 100%;
+  min-inline-size: 0;
+  max-inline-size: 100%;
   font-size: var(--ak-font-size-sm);
   font-weight: var(--ak-font-weight-semibold);
   line-height: 1;
-  overflow-wrap: anywhere;
+  overflow: hidden;
+  overflow-wrap: normal;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }

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

@@ -15,7 +15,8 @@
   font-weight: var(--ak-font-weight-semibold);
   line-height: 1;
   letter-spacing: 0;
-  overflow-wrap: anywhere;
+  overflow-wrap: normal;
+  word-break: normal;
 }
 
 :where(.badge, [data-slot="badge"]) > :where([data-slot="icon"]) {

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

@@ -57,7 +57,9 @@
   color: var(--ak-color-text-muted);
   font-weight: var(--ak-font-weight-semibold);
   letter-spacing: 0.04em;
+  overflow-wrap: normal;
   text-transform: uppercase;
+  word-break: normal;
   white-space: normal;
 }
 

package/src/themes/default/styles/forms/select.css

@@ -125,16 +125,22 @@
 }
 
 :where(.select-item, [data-slot="select-item"]) {
+  appearance: none;
   display: flex;
   align-items: center;
+  inline-size: 100%;
   min-height: var(--ak-density-control-height-md);
   padding: 0 var(--ak-density-control-padding-x-md);
+  border: 0;
   border-radius: var(--ak-radius-md);
+  background: transparent;
   color: var(--ak-color-text);
   cursor: pointer;
+  font-family: inherit;
   font-size: var(--ak-font-size-sm);
   font-weight: var(--ak-font-weight-medium);
   overflow-wrap: anywhere;
+  text-align: start;
   transition:
     background var(--ak-duration-fast) var(--ak-ease-standard),
     color var(--ak-duration-fast) var(--ak-ease-standard);

package/src/themes/default/styles/shell/navbar.css

@@ -1,6 +1,7 @@
 @layer components {
   :where(.navbar, [data-slot="navbar"]) {
     position: relative;
+    container-type: inline-size;
     display: flex;
     flex-direction: column;
     align-items: stretch;
@@ -157,7 +158,7 @@
     min-inline-size: 0;
   }
 
-  @media (min-width: 48rem) {
+  @container (min-width: 48rem) {
     :where(.navbar-shell, [data-slot="navbar-shell"]):has(
       > :where(.navbar-group[data-align="center"], [data-slot="navbar-group"][data-align="center"])
     ) {

package/templates/theme/styles/display/avatar.css

@@ -19,12 +19,18 @@
 }
 
 :where(.avatar-fallback, [data-slot="avatar-fallback"]) {
+  box-sizing: border-box;
   display: inline-grid;
   place-items: center;
   inline-size: 100%;
   block-size: 100%;
+  min-inline-size: 0;
+  max-inline-size: 100%;
   font-size: var(--ak-font-size-sm);
   font-weight: var(--ak-font-weight-semibold);
   line-height: 1;
-  overflow-wrap: anywhere;
+  overflow: hidden;
+  overflow-wrap: normal;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }

package/templates/theme/styles/display/badge.css

@@ -15,7 +15,8 @@
   font-weight: var(--ak-font-weight-semibold);
   line-height: 1;
   letter-spacing: 0;
-  overflow-wrap: anywhere;
+  overflow-wrap: normal;
+  word-break: normal;
 }
 
 :where(.badge, [data-slot="badge"]) > :where([data-slot="icon"]) {

package/templates/theme/styles/display/table.css

@@ -57,7 +57,9 @@
   color: var(--ak-color-text-muted);
   font-weight: var(--ak-font-weight-semibold);
   letter-spacing: 0.04em;
+  overflow-wrap: normal;
   text-transform: uppercase;
+  word-break: normal;
   white-space: normal;
 }
 

package/templates/theme/styles/forms/select.css

@@ -125,16 +125,22 @@
 }
 
 :where(.select-item, [data-slot="select-item"]) {
+  appearance: none;
   display: flex;
   align-items: center;
+  inline-size: 100%;
   min-height: var(--ak-density-control-height-md);
   padding: 0 var(--ak-density-control-padding-x-md);
+  border: 0;
   border-radius: var(--ak-radius-md);
+  background: transparent;
   color: var(--ak-color-text);
   cursor: pointer;
+  font-family: inherit;
   font-size: var(--ak-font-size-sm);
   font-weight: var(--ak-font-weight-medium);
   overflow-wrap: anywhere;
+  text-align: start;
   transition:
     background var(--ak-duration-fast) var(--ak-ease-standard),
     color var(--ak-duration-fast) var(--ak-ease-standard);

package/templates/theme/styles/shell/navbar.css

@@ -1,6 +1,7 @@
 @layer components {
   :where(.navbar, [data-slot="navbar"]) {
     position: relative;
+    container-type: inline-size;
     display: flex;
     flex-direction: column;
     align-items: stretch;
@@ -157,7 +158,7 @@
     min-inline-size: 0;
   }
 
-  @media (min-width: 48rem) {
+  @container (min-width: 48rem) {
     :where(.navbar-shell, [data-slot="navbar-shell"]):has(
       > :where(.navbar-group[data-align="center"], [data-slot="navbar-group"][data-align="center"])
     ) {