@askrjs/themes 0.0.16 → 0.0.19

package/src/components/_internal/style.ts

@@ -1,6 +1,110 @@
-import { cspNonce } from "@askrjs/askr";
+import * as Askr from "@askrjs/askr";
 
 const cssPropertyNameCache = new Map<string, string>();
+const MAX_PROPERTY_CACHE = 256;
+
+const CSS_UNSAFE_RE = /[{}<>\\]/;
+const CSS_URI_SCHEME_RE = /(?:^|[\s(,])([a-z][a-z0-9+.-]*):/i;
+const CSS_FUNCTION_NAME_RE = /([a-z-][a-z0-9-]*)\s*\(/gi;
+const CSS_ALLOWED_FUNCTIONS = new Set([
+  "var",
+  "calc",
+  "min",
+  "max",
+  "clamp",
+  "minmax",
+  "repeat",
+  "rgb",
+  "rgba",
+  "hsl",
+  "hsla",
+  "lab",
+  "lch",
+  "oklab",
+  "oklch",
+  "color",
+  "color-mix",
+  "translate",
+  "translatex",
+  "translatey",
+  "translatez",
+  "scale",
+  "scalex",
+  "scaley",
+  "scalez",
+  "rotate",
+  "rotatex",
+  "rotatey",
+  "rotatez",
+  "skew",
+  "skewx",
+  "skewy",
+  "matrix",
+  "matrix3d",
+  "linear-gradient",
+  "radial-gradient",
+  "conic-gradient",
+  "repeating-linear-gradient",
+  "repeating-radial-gradient",
+  "repeating-conic-gradient",
+  "cubic-bezier",
+  "steps",
+]);
+
+function isSafeCssPropertyName(name: string): boolean {
+  if (name.startsWith("--")) return /^--[a-zA-Z0-9_-]+$/.test(name);
+  return /^[a-zA-Z_][a-zA-Z0-9_-]*$/.test(name);
+}
+
+function isSafeCssValue(value: string): boolean {
+  if (CSS_UNSAFE_RE.test(value) || CSS_URI_SCHEME_RE.test(value)) return false;
+
+  for (const match of value.matchAll(CSS_FUNCTION_NAME_RE)) {
+    if (!CSS_ALLOWED_FUNCTIONS.has(match[1]!.toLowerCase())) return false;
+  }
+
+  return true;
+}
+
+function splitCssDeclarations(value: string): string[] {
+  const declarations: string[] = [];
+  let start = 0;
+  let depth = 0;
+  let quote: string | undefined;
+
+  for (let index = 0; index < value.length; index += 1) {
+    const char = value[index]!;
+    if (quote) {
+      if (char === quote && value[index - 1] !== "\\") quote = undefined;
+      continue;
+    }
+    if (char === '"' || char === "'") {
+      quote = char;
+      continue;
+    }
+    if (char === "(") depth += 1;
+    if (char === ")" && depth > 0) depth -= 1;
+    if (char === ";" && depth === 0) {
+      declarations.push(value.slice(start, index));
+      start = index + 1;
+    }
+  }
+
+  declarations.push(value.slice(start));
+  return declarations;
+}
+
+function serializeCssString(value: string): string {
+  const entries: Array<[string, string]> = [];
+  for (const candidate of splitCssDeclarations(value)) {
+    const separator = candidate.indexOf(":");
+    if (separator <= 0) continue;
+    const key = candidate.slice(0, separator).trim();
+    const cssValue = candidate.slice(separator + 1).trim();
+    if (key && cssValue) entries.push([key, cssValue]);
+  }
+  return serializeCssDeclarations(Object.fromEntries(entries));
+}
 
 function cssPropertyName(name: string): string {
   let cached = cssPropertyNameCache.get(name);
@@ -20,7 +124,9 @@ function cssPropertyName(name: string): string {
     }
   }
 
-  cssPropertyNameCache.set(name, result);
+  if (cssPropertyNameCache.size < MAX_PROPERTY_CACHE) {
+    cssPropertyNameCache.set(name, result);
+  }
   return result;
 }
 
@@ -34,7 +140,17 @@ export function serializeCssDeclarations(styles: Record<string, unknown>): strin
       continue;
     }
 
-    const declaration = `${cssPropertyName(key)}:${String(value)}`;
+    const rawProperty = key.trim();
+    if (!isSafeCssPropertyName(rawProperty)) {
+      continue;
+    }
+    const property = cssPropertyName(rawProperty).trim();
+    const cssValue = String(value).trim();
+    if (!cssValue || !isSafeCssValue(cssValue)) {
+      continue;
+    }
+
+    const declaration = `${property}:${cssValue}`;
     result = result ? `${result};${declaration}` : declaration;
   }
 
@@ -59,16 +175,86 @@ export function mergeCssVar(style: unknown, name: string, value: string): string
 
 const STYLE_REGISTRY_ATTR = "data-askr-style-registry";
 const STYLE_CLASS_PREFIX = "ak-style-";
+const MAX_STYLE_RULES = 512;
+const MAX_SSR_STYLE_CACHE = 4096;
 
-const styleClassCache = new Map<string, string>();
+type StyleRule = {
+  className: string;
+  declarations: string;
+  rule: string;
+};
+
+const styleRulesByClass = new Map<string, StyleRule>();
 type StyleRegistry = {
   element: HTMLStyleElement;
-  rules: Map<string, { className: string; rule: string }>;
+  ruleCount: number;
+  rules: Map<string, StyleRule>;
 };
 const registries = new WeakMap<Document, Map<string, StyleRegistry>>();
-const MAX_STYLE_RULES = 512;
+function countRegisteredRules(value: string | null): number {
+  return value?.match(/\.ak-style-[a-z0-9]+\{/g)?.length ?? 0;
+}
+
+function styleClassName(declarations: string): string {
+  let first = 0xdeadbeef ^ declarations.length;
+  let second = 0x41c6ce57 ^ declarations.length;
+
+  for (let index = 0; index < declarations.length; index += 1) {
+    const code = declarations.charCodeAt(index);
+    first = Math.imul(first ^ code, 2_654_435_761);
+    second = Math.imul(second ^ code, 1_597_334_677);
+  }
+
+  first =
+    Math.imul(first ^ (first >>> 16), 2_246_822_507) ^
+    Math.imul(second ^ (second >>> 13), 3_266_489_909);
+  second =
+    Math.imul(second ^ (second >>> 16), 2_246_822_507) ^
+    Math.imul(first ^ (first >>> 13), 3_266_489_909);
+
+  return `${STYLE_CLASS_PREFIX}${(second >>> 0).toString(36)}${(first >>> 0).toString(36)}`;
+}
+
+function escapeStyleRawText(value: string): string {
+  return value.replace(/<\//g, "<\\/");
+}
+
+function styleRuleFor(declarations: string): StyleRule {
+  const className = styleClassName(declarations);
+  const existing = styleRulesByClass.get(className);
+  if (existing) {
+    if (existing.declarations !== declarations) {
+      throw new RangeError("Theme style class collision detected.");
+    }
+    return existing;
+  }
+
+  const entry = {
+    className,
+    declarations,
+    rule: `.${className}{${escapeStyleRawText(declarations)}}`,
+  };
+  return entry;
+}
+
+function rememberStyleRule(entry: StyleRule): void {
+  styleRulesByClass.delete(entry.className);
+  styleRulesByClass.set(entry.className, entry);
+  while (styleRulesByClass.size > MAX_SSR_STYLE_CACHE) {
+    const oldest = styleRulesByClass.keys().next().value;
+    if (oldest === undefined) break;
+    styleRulesByClass.delete(oldest);
+  }
+}
 
-let nextStyleClassId = 0;
+function registerSSRStyle(entry: StyleRule): void {
+  const register = (
+    Askr as typeof Askr & {
+      registerSSRStyle?: (id: string, cssText: string) => void;
+    }
+  ).registerSSRStyle;
+  register?.(entry.className, entry.rule);
+}
 
 function ensureStyleRegistry(nonce: string | undefined): StyleRegistry | null {
   if (typeof document === "undefined") return null;
@@ -81,17 +267,31 @@ function ensureStyleRegistry(nonce: string | undefined): StyleRegistry | null {
   const current = documentRegistries.get(key);
   if (current?.element.isConnected) return current;
 
-  const styleElement = document.createElement("style");
-  styleElement.setAttribute(STYLE_REGISTRY_ATTR, "true");
-  if (nonce !== undefined) styleElement.nonce = nonce;
-  (document.head ?? document.documentElement).append(styleElement);
-  const registry: StyleRegistry = { element: styleElement, rules: new Map() };
+  const existingStyleElements = Array.from(
+    document.querySelectorAll<HTMLStyleElement>(`style[${STYLE_REGISTRY_ATTR}]`),
+  );
+  const styleElement =
+    existingStyleElements.find((element) => (element.nonce || undefined) === nonce) ??
+    (nonce === undefined && existingStyleElements.length === 1
+      ? existingStyleElements[0]
+      : undefined) ??
+    document.createElement("style");
+  if (!styleElement.isConnected) {
+    styleElement.setAttribute(STYLE_REGISTRY_ATTR, "true");
+    if (nonce !== undefined) styleElement.nonce = nonce;
+    (document.head ?? document.documentElement).append(styleElement);
+  }
+  const registry: StyleRegistry = {
+    element: styleElement,
+    ruleCount: countRegisteredRules(styleElement.textContent),
+    rules: new Map(),
+  };
   documentRegistries.set(key, registry);
   return registry;
 }
 
 function normalizeDeclarations(declarations: string): string {
-  return declarations.trim().replace(/;+\s*$/, "");
+  return serializeCssString(declarations);
 }
 
 export function styleDeclarationsToClass(declarations: string | undefined): string | undefined {
@@ -100,27 +300,48 @@ export function styleDeclarationsToClass(declarations: string | undefined): stri
   const normalized = normalizeDeclarations(declarations);
   if (!normalized) return undefined;
 
-  const nonce = cspNonce();
+  const entry = styleRuleFor(normalized);
+  const nonce = Askr.cspNonce();
   const registry = ensureStyleRegistry(nonce);
   const registered = registry?.rules.get(normalized);
-  if (registered) return registered.className;
-
-  let className = styleClassCache.get(normalized);
-  if (className === undefined) {
-    className = `${STYLE_CLASS_PREFIX}${++nextStyleClassId}`;
-    styleClassCache.set(normalized, className);
+  if (registered) {
+    registerSSRStyle(registered);
+    return registered.className;
   }
 
   if (registry) {
-    const styleElement = registry.element;
-    if (styleElement) {
-      if (registry.rules.size >= MAX_STYLE_RULES)
+    if (!registry.rules.has(normalized) && !registry.element.textContent?.includes(entry.rule)) {
+      if (registry.ruleCount >= MAX_STYLE_RULES) {
+        throw new RangeError("Theme style registry capacity exceeded.");
+      }
+    }
+    if (!registry.element.textContent?.includes(entry.rule)) {
+      registry.element.append(entry.rule, "\n");
+      registry.ruleCount += 1;
+    }
+    registry.rules.set(normalized, entry);
+  }
+
+  rememberStyleRule(entry);
+  registerSSRStyle(entry);
+
+  return entry.className;
+}
+
+export function styleRulesForHtml(html: string): string[] {
+  const rules = new Map<string, string>();
+  const classAttributePattern = /\sclass=(?:"([^"]*)"|'([^']*)')/g;
+
+  for (const attribute of html.matchAll(classAttributePattern)) {
+    const value = attribute[1] ?? attribute[2] ?? "";
+    for (const className of value.split(/\s+/)) {
+      const entry = styleRulesByClass.get(className);
+      if (entry) rules.set(className, entry.rule);
+      if (rules.size > MAX_STYLE_RULES) {
         throw new RangeError("Theme style registry capacity exceeded.");
-      const rule = `.${className}{${normalized}}`;
-      registry.rules.set(normalized, { className, rule });
-      styleElement.append(rule, "\n");
+      }
     }
   }
 
-  return className;
+  return Array.from(rules.values());
 }

package/src/components/alert/alert.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { classes } from "../_internal/classes";
 import { Close } from "../close";
 import type { AlertProps } from "./alert.types";

package/src/components/alert/alert.types.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
 
 export type AlertVariant = "default" | "info" | "success" | "warning" | "danger";

package/src/components/aside/aside.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Block } from "../block";
 import type { AsideProps } from "./aside.types";
 

package/src/components/aspect-ratio/aspect-ratio.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Slot } from "@askrjs/askr/foundations";
 import { mergeProps } from "../_internal/merge-props";
 import { mergeLayoutStyles } from "../_internal/block-layout";

package/src/components/aspect-ratio/aspect-ratio.types.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import type { JSXElement } from "@askrjs/askr/foundations";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
 

package/src/components/badge/badge.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Slot } from "@askrjs/askr/foundations";
 import { classes } from "../_internal/classes";
 import { mergeProps } from "../_internal/merge-props";

package/src/components/badge/badge.types.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import type { JSXElement } from "@askrjs/askr/foundations";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
 

package/src/components/block/block.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Slot } from "@askrjs/askr/foundations";
 import { classes } from "../_internal/classes";
 import {
@@ -15,8 +16,8 @@ const DEFAULT_ELEMENT = "div";
 export function Block(props: BlockNativeProps): JSX.Element;
 export function Block(props: BlockAsChildProps): JSX.Element;
 export function Block(props: BlockNativeProps | BlockAsChildProps) {
-  const as = "as" in props ? props.as : DEFAULT_ELEMENT;
   const {
+    as: asProp,
     asChild,
     children,
     ref,
@@ -25,10 +26,12 @@ export function Block(props: BlockNativeProps | BlockAsChildProps) {
     style: userStyle,
     ...rest
   } = props as (BlockNativeProps | BlockAsChildProps) & {
+    as?: BlockNativeProps["as"];
     class?: unknown;
     className?: unknown;
     style?: unknown;
   };
+  const as = asProp ?? DEFAULT_ELEMENT;
 
   const { blockProps, rest: passthroughProps } = splitBlockLayoutProps(rest);
   const layoutStyle: Record<string, string | number> = {};

package/src/components/block/block.types.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import type { JSXElement } from "@askrjs/askr/foundations";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
 import type {

package/src/components/brand/brand.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Slot } from "@askrjs/askr/foundations";
 import { classes } from "../_internal/classes";
 import { mergeProps } from "../_internal/merge-props";
@@ -16,14 +17,17 @@ export function Brand<TElement extends "div" | "a" | "span" = "div">(
   props: BrandProps<TElement>,
 ): JSX.Element {
   const {
+    as: asProp,
     asChild,
     children,
     class: classProp,
     className,
     ref,
     ...rest
-  } = props as BrandNativeProps | BrandAsChildProps;
-  const as = "as" in props ? props.as : undefined;
+  } = props as (BrandNativeProps | BrandAsChildProps) & {
+    as?: "div" | "a" | "span";
+  };
+  const as = asProp;
 
   const finalProps = mergeProps(rest, {
     ref,

package/src/components/brand/brand.types.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
 
 export type BrandElement = "div" | "a" | "span";

package/src/components/button-group/button-group.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { classes } from "../_internal/classes";
 import { ButtonGroupProps } from "./button-group.types";
 

package/src/components/button-group/button-group.types.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
 
 export type ButtonGroupOrientation = "horizontal" | "vertical";

package/src/components/card/card.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { classes } from "../_internal/classes";
 import { mergeProps } from "../_internal/merge-props";
 import type {

package/src/components/card/card.types.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
 
 export type CardVariant = "default" | "raised";

package/src/components/catalog.tsx

@@ -1,11 +1,16 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Slot } from "@askrjs/askr/foundations";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
-import { DialogContent } from "@askrjs/ui";
+import { DialogContent, DialogDescription, DialogTitle } from "@askrjs/ui";
 import { Block } from "./block";
 import { classes } from "./_internal/classes";
 import { mergeProps } from "./_internal/merge-props";
 
 const CatalogDialogContent = DialogContent as (props: Record<string, unknown>) => JSX.Element;
+const CatalogDialogTitle = DialogTitle as (props: Record<string, unknown>) => JSX.Element;
+const CatalogDialogDescription = DialogDescription as (
+  props: Record<string, unknown>,
+) => JSX.Element;
 
 type CatalogElement = keyof JSX.IntrinsicElements;
 
@@ -42,13 +47,18 @@ function catalogPart(props: CatalogComponentProps, defaults: CatalogDefaults): J
 }
 
 function buttonPart(props: CatalogComponentProps, slot: string, className?: string): JSX.Element {
-  const { children, ref, class: classProp, type = "button", ...rest } = props;
+  const { as, asChild, children, ref, class: classProp, type = "button", ...rest } = props;
+  void as;
   const finalProps = mergeProps(rest, {
     ref,
     class: classes(className, classProp),
     "data-slot": slot,
   });
 
+  if (asChild) {
+    return <Slot asChild {...finalProps} children={children as JSX.Element} />;
+  }
+
   return (
     <button type={type as "button" | "submit" | "reset"} {...finalProps}>
       {children}
@@ -249,6 +259,7 @@ export function CalendarDay(
   const { disabled, outside, rangeEnd, rangeMiddle, rangeStart, selected, today, ...rest } = props;
   return buttonPart(
     {
+      disabled,
       "aria-disabled": disabled ? "true" : undefined,
       "aria-selected": selected ? "true" : undefined,
       "data-disabled": disabled ? "" : undefined,
@@ -661,11 +672,11 @@ export function SheetFooter(props: CatalogComponentProps): JSX.Element {
 }
 
 export function SheetTitle(props: CatalogComponentProps): JSX.Element {
-  return catalogPart(props, { slot: "sheet-title", element: "h2" });
+  return <CatalogDialogTitle {...props} data-slot="sheet-title" />;
 }
 
 export function SheetDescription(props: CatalogComponentProps): JSX.Element {
-  return catalogPart(props, { slot: "sheet-description", element: "p" });
+  return <CatalogDialogDescription {...props} data-slot="sheet-description" />;
 }
 
 export function Toaster(props: CatalogComponentProps): JSX.Element {

package/src/components/close/close.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Button, type ButtonNativeProps } from "@askrjs/ui";
 import { classes } from "../_internal/classes";
 import type { CloseNativeProps } from "./close.types";

package/src/components/container/container.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Block } from "../block";
 import type { ContainerProps } from "./container.types";
 

package/src/components/empty-state/empty-state.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Block } from "../block";
 import type { EmptyStateProps } from "./empty-state.types";
 

package/src/components/field/field.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { classes } from "../_internal/classes";
 import { mergeProps } from "../_internal/merge-props";
 import type { FieldErrorProps, FieldHintProps, FieldProps } from "./field.types";

package/src/components/field/field.types.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
 
 type DivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref">;

package/src/components/footer/footer.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Block } from "../block";
 import { classes } from "../_internal/classes";
 import { mergeProps } from "../_internal/merge-props";

package/src/components/footer/footer.types.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import type { BlockElementProps } from "../block";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
 

package/src/components/grid/grid.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { classes } from "../_internal/classes";
 import { mergeLayoutStyles } from "../_internal/block-layout";
 import { mergeProps } from "../_internal/merge-props";

package/src/components/grid/grid.types.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
 import type { BlockSpace, ResponsiveValue } from "../_internal/block-layout";
 

package/src/components/header/header.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Block } from "../block";
 import type { HeaderProps } from "./header.types";
 

package/src/components/input-group/input-group.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Slot } from "@askrjs/askr/foundations";
 import { mergeProps } from "@askrjs/askr/foundations/utilities";
 import { classes } from "../_internal/classes";

package/src/components/input-group/input-group.types.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import type { JSXElement } from "@askrjs/askr/foundations";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
 

package/src/components/jsx-types.ts

@@ -0,0 +1,16 @@
+import type { JSXElement } from "@askrjs/askr/foundations/structures";
+
+declare global {
+  namespace JSX {
+    interface Element extends JSXElement {
+      readonly __askrThemesJsxElementBrand?: never;
+    }
+
+    interface IntrinsicElements {
+      // @ts-ignore The Askr source types already provide a compatible fallback index.
+      [element: string]: Record<string, unknown>;
+    }
+  }
+}
+
+export {};

package/src/components/main/main.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Block } from "../block";
 import type { MainProps } from "./main.types";