@askrjs/themes 0.0.19 → 0.0.21

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 & {
@@ -198,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,
@@ -239,6 +252,7 @@ function createThemeCoordinator() {
     setTimeout(() => {
       scheduled = false;
       syncActive();
+      if (scopes.size === 0) removeEmptyGeneratedStyleRegistries(root);
     }, 0);
   };
 
@@ -462,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));
@@ -484,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 } : {};
@@ -493,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/entries/accordion.ts

@@ -0,0 +1 @@
+export * from "@askrjs/ui/accordion";

package/src/entries/alert-dialog.ts

@@ -0,0 +1 @@
+export * from "@askrjs/ui/alert-dialog";

package/src/entries/alert.ts

@@ -0,0 +1 @@
+export * from "../components/alert";

package/src/entries/aspect-ratio.ts

@@ -0,0 +1 @@
+export * from "../components/aspect-ratio";

package/src/entries/avatar.ts

@@ -0,0 +1 @@
+export * from "@askrjs/ui/avatar";

package/src/entries/badge.ts

@@ -0,0 +1 @@
+export * from "../components/badge";

package/src/entries/breadcrumb.ts

@@ -0,0 +1,9 @@
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+} from "../components/catalog";

package/src/entries/button-group.ts

@@ -0,0 +1 @@
+export * from "../components/button-group";

package/src/entries/button.ts

@@ -0,0 +1 @@
+export * from "@askrjs/ui/button";

package/src/entries/calendar.ts

@@ -0,0 +1,14 @@
+export {
+  Calendar,
+  CalendarHeader,
+  CalendarCaption,
+  CalendarNav,
+  CalendarPreviousButton,
+  CalendarNextButton,
+  CalendarGrid,
+  CalendarHead,
+  CalendarBody,
+  CalendarRow,
+  CalendarCell,
+  CalendarDay,
+} from "../components/catalog";

package/src/entries/card.ts

@@ -0,0 +1 @@
+export * from "../components/card";

package/src/entries/carousel.ts

@@ -0,0 +1,7 @@
+export {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+} from "../components/catalog";

package/src/entries/checkbox.ts

@@ -0,0 +1 @@
+export * from "@askrjs/ui/checkbox";

package/src/entries/collapsible.ts

@@ -0,0 +1 @@
+export * from "@askrjs/ui/collapsible";

package/src/entries/combobox.ts

@@ -0,0 +1 @@
+export { Combobox, ComboboxInput, ComboboxList, ComboboxOption } from "../components/catalog";

package/src/entries/command.ts

@@ -0,0 +1,13 @@
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandHeader,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandGroupHeading,
+  CommandItem,
+  CommandSeparator,
+  CommandShortcut,
+} from "../components/catalog";

package/src/entries/context-menu.ts

@@ -0,0 +1,10 @@
+export {
+  Dropdown as ContextMenu,
+  DropdownGroup as ContextMenuGroup,
+  DropdownItem as ContextMenuItem,
+  DropdownLabel as ContextMenuLabel,
+  DropdownPortal as ContextMenuPortal,
+  DropdownSeparator as ContextMenuSeparator,
+  DropdownTrigger as ContextMenuTrigger,
+} from "@askrjs/ui/dropdown";
+export { DropdownContent as ContextMenuContent } from "../components/overlays/dropdown-content";

package/src/entries/data-table.ts

@@ -0,0 +1 @@
+export { DataTable } from "../components/catalog";

package/src/entries/date-picker.ts

@@ -0,0 +1 @@
+export { DatePicker, DatePickerInput } from "../components/catalog";

package/src/entries/dialog.ts

@@ -0,0 +1 @@
+export * from "@askrjs/ui/dialog";

package/src/entries/direction.ts

@@ -0,0 +1 @@
+export { Direction } from "../components/catalog";

package/src/entries/drawer.ts

@@ -0,0 +1,10 @@
+export {
+  Dialog as Drawer,
+  DialogClose as DrawerClose,
+  DialogContent as DrawerContent,
+  DialogDescription as DrawerDescription,
+  DialogOverlay as DrawerOverlay,
+  DialogPortal as DrawerPortal,
+  DialogTitle as DrawerTitle,
+  DialogTrigger as DrawerTrigger,
+} from "@askrjs/ui/dialog";

package/src/entries/dropdown-menu.ts

@@ -0,0 +1,10 @@
+export {
+  Dropdown as DropdownMenu,
+  DropdownGroup as DropdownMenuGroup,
+  DropdownItem as DropdownMenuItem,
+  DropdownLabel as DropdownMenuLabel,
+  DropdownPortal as DropdownMenuPortal,
+  DropdownSeparator as DropdownMenuSeparator,
+  DropdownTrigger as DropdownMenuTrigger,
+} from "@askrjs/ui/dropdown";
+export { DropdownContent as DropdownMenuContent } from "../components/overlays/dropdown-content";

package/src/entries/empty.ts

@@ -0,0 +1,8 @@
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+} from "../components/catalog";

package/src/entries/field.ts

@@ -0,0 +1 @@
+export * from "../components/field";

package/src/entries/form.ts

@@ -0,0 +1 @@
+export * from "@askrjs/ui/form";

package/src/entries/hover-card.ts

@@ -0,0 +1 @@
+export * from "@askrjs/ui/hover-card";

package/src/entries/input-group.ts

@@ -0,0 +1 @@
+export * from "../components/input-group";

package/src/entries/input-otp.ts

@@ -0,0 +1 @@
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "../components/catalog";

package/src/entries/input.ts

@@ -0,0 +1 @@
+export * from "@askrjs/ui/input";

package/src/entries/item.ts

@@ -0,0 +1,11 @@
+export {
+  Item,
+  ItemGroup,
+  ItemHeader,
+  ItemMedia,
+  ItemContent,
+  ItemTitle,
+  ItemDescription,
+  ItemActions,
+  ItemFooter,
+} from "../components/catalog";

package/src/entries/kbd.ts

@@ -0,0 +1 @@
+export { Kbd } from "../components/catalog";

package/src/entries/label.ts

@@ -0,0 +1 @@
+export * from "@askrjs/ui/label";

package/src/entries/menubar.ts

@@ -0,0 +1 @@
+export * from "@askrjs/ui/menubar";

package/src/entries/native-select.ts

@@ -0,0 +1 @@
+export { NativeSelect } from "../components/catalog";

package/src/entries/navigation-menu.ts

@@ -0,0 +1,10 @@
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuTrigger,
+  NavigationMenuContent,
+  NavigationMenuLink,
+  NavigationMenuViewport,
+  NavigationMenuIndicator,
+} from "../components/catalog";

package/src/entries/pagination.ts

@@ -0,0 +1,9 @@
+export {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+} from "../components/catalog";

package/src/entries/popover.ts

@@ -0,0 +1 @@
+export * from "@askrjs/ui/popover";

package/src/entries/progress.ts

@@ -0,0 +1 @@
+export * from "@askrjs/ui/progress";

package/src/entries/radio-group.ts

@@ -0,0 +1 @@
+export * from "@askrjs/ui/radio-group";

package/src/entries/resizable.ts

@@ -0,0 +1 @@
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "../components/catalog";

package/src/entries/scroll-area.ts

@@ -0,0 +1 @@
+export * from "@askrjs/ui/scroll-area";

package/src/entries/select.ts

@@ -0,0 +1 @@
+export * from "@askrjs/ui/select";

package/src/entries/separator.ts

@@ -0,0 +1 @@
+export * from "../components/separator";

package/src/entries/sheet.ts

@@ -0,0 +1,14 @@
+export {
+  Dialog as Sheet,
+  DialogClose as SheetClose,
+  DialogOverlay as SheetOverlay,
+  DialogPortal as SheetPortal,
+  DialogTrigger as SheetTrigger,
+} from "@askrjs/ui/dialog";
+export {
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "../components/catalog";

package/src/entries/sidebar.ts

@@ -0,0 +1 @@
+export * from "../components/sidebar";

package/src/entries/skeleton.ts

@@ -0,0 +1 @@
+export * from "../components/skeleton";

package/src/entries/slider.ts

@@ -0,0 +1 @@
+export * from "@askrjs/ui/slider";

package/src/entries/sonner.ts

@@ -0,0 +1 @@
+export { Sonner, Toaster } from "../components/catalog";

package/src/entries/spinner.ts

@@ -0,0 +1 @@
+export * from "../components/spinner";

package/src/entries/switch.ts

@@ -0,0 +1 @@
+export * from "@askrjs/ui/switch";

package/src/entries/table.ts

@@ -0,0 +1 @@
+export * from "@askrjs/ui/table";

package/src/entries/tabs.ts

@@ -0,0 +1,2 @@
+export { Pill, Pills, Tab, Tabs } from "../components/nav";
+export { TabsContent, TabsList, TabsTrigger } from "../components/catalog";

package/src/entries/textarea.ts

@@ -0,0 +1 @@
+export * from "@askrjs/ui/textarea";

package/src/entries/toast.ts

@@ -0,0 +1 @@
+export * from "@askrjs/ui/toast";

package/src/entries/toggle-group.ts

@@ -0,0 +1 @@
+export * from "@askrjs/ui/toggle-group";

package/src/entries/toggle.ts

@@ -0,0 +1 @@
+export * from "@askrjs/ui/toggle";

package/src/entries/tooltip.ts

@@ -0,0 +1 @@
+export * from "@askrjs/ui/tooltip";

package/src/entries/typography.ts

@@ -0,0 +1,12 @@
+export {
+  Typography,
+  TypographyH1,
+  TypographyH2,
+  TypographyH3,
+  TypographyH4,
+  TypographyP,
+  TypographyBlockquote,
+  TypographyList,
+  TypographyLead,
+  TypographyMuted,
+} from "../components/catalog";

package/src/parity.ts

@@ -1,4 +1,4 @@
-export const SHADCN_THEME_COMPONENTS = [
+export const THEME_COMPONENTS = [
   "Accordion",
   "Alert",
   "AlertDialog",
@@ -60,9 +60,9 @@ export const SHADCN_THEME_COMPONENTS = [
   "Typography",
 ] as const;
 
-export const SHADCN_CHART_COMPONENT = "Chart" as const;
+export const EXCLUDED_CHART_COMPONENT = "Chart" as const;
 
-export const SHADCN_THEME_COMPONENT_SUBPATHS = [
+export const THEME_COMPONENT_SUBPATHS = [
   "accordion",
   "alert",
   "alert-dialog",

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/foundations.css

@@ -0,0 +1,6 @@
+@import "./tokens.css";
+@import "./styles/base/reset.css";
+@import "./styles/base/typography.css";
+@import "./styles/base/text.css";
+@import "./styles/base/icon.css";
+@import "./styles/base/utilities.css";

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;