@askrjs/themes 0.0.19 → 0.0.21

package/dist/entries/tabs.d.ts

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

package/dist/entries/tabs.js

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

package/dist/entries/textarea.d.ts

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

package/dist/entries/textarea.js

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

package/dist/entries/toast.d.ts

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

package/dist/entries/toast.js

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

package/dist/entries/toggle-group.d.ts

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

package/dist/entries/toggle-group.js

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

package/dist/entries/toggle.d.ts

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

package/dist/entries/toggle.js

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

package/dist/entries/tooltip.d.ts

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

package/dist/entries/tooltip.js

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

package/dist/entries/typography.d.ts

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

package/dist/entries/typography.js

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

package/dist/ssr.js

@@ -1,12 +1,19 @@
-import { styleRulesForHtml } from "./components/_internal/style.js";
 //#region src/ssr.ts
 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;
 function escapeHtmlAttribute(value) {
 	return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 function escapeStyleRawText(value) {
 	return value.replace(/<\/style/gi, "<\\/style");
 }
+function generatedStyleClasses(html) {
+	const classes = /* @__PURE__ */ new Set();
+	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) {
 	let index = 0;
 	while (index < html.length) {
@@ -44,16 +51,21 @@ function withThemeStyles(documentRenderer) {
 	return (args) => {
 		const documentHtml = documentRenderer(args);
 		const registeredStyles = args.context.styles;
-		const rules = registeredStyles ? (() => {
-			const styles = /* @__PURE__ */ new Map();
-			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 !== void 0 && 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 === void 0) {
+			if (generatedClasses.size > 0) throw new Error("Generated theme classes require request-local SSR style registrations from @askrjs/askr.");
+			return documentHtml;
+		}
+		const styles = /* @__PURE__ */ new Map();
+		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 !== void 0 && 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 = args.context.cspNonce === void 0 ? "" : ` nonce="${escapeHtmlAttribute(args.context.cspNonce)}"`;
 		return injectIntoHead(documentHtml, `<style ${STYLE_REGISTRY_ATTR}="true"${nonce}>${escapeStyleRawText(rules.join("\n"))}\n</style>`);

package/dist/ssr.js.map

@@ -1 +1 @@
-{"version":3,"file":"ssr.js","names":[],"sources":["../src/ssr.ts"],"sourcesContent":["import { styleRulesForHtml } from \"./components/_internal/style\";\n\nconst STYLE_REGISTRY_ATTR = \"data-askr-style-registry\";\n\ntype DocumentRenderArgsLike = {\n  appHtml: string;\n  context: {\n    cspNonce?: string;\n    styles?: readonly { id: string; cssText: string }[];\n  };\n};\n\nfunction escapeHtmlAttribute(value: string): string {\n  return value\n    .replace(/&/g, \"&amp;\")\n    .replace(/\"/g, \"&quot;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\");\n}\n\nfunction escapeStyleRawText(value: string): string {\n  return value.replace(/<\\/style/gi, \"<\\\\/style\");\n}\n\nfunction findHeadEnd(html: string): number {\n  let index = 0;\n  while (index < html.length) {\n    if (html.startsWith(\"<!--\", index)) {\n      const commentEnd = html.indexOf(\"-->\", index + 4);\n      index = commentEnd < 0 ? html.length : commentEnd + 3;\n      continue;\n    }\n\n    const rawTextStart = html.slice(index).match(/^<\\s*(script|style|title|textarea)(?:\\s|>)/i);\n    if (rawTextStart) {\n      const rawTextEndPattern = new RegExp(`</\\\\s*${rawTextStart[1]}\\\\s*>`, \"ig\");\n      rawTextEndPattern.lastIndex = index + rawTextStart[0].length;\n      const rawTextEnd = rawTextEndPattern.exec(html);\n      if (!rawTextEnd) return -1;\n      index = rawTextEnd.index + rawTextEnd[0].length;\n      continue;\n    }\n\n    const headEnd = html.slice(index).match(/^<\\/\\s*head\\s*>/i);\n    if (headEnd) return index;\n    index += 1;\n  }\n  return -1;\n}\n\nfunction injectIntoHead(html: string, content: string): string {\n  const headEnd = findHeadEnd(html);\n  if (headEnd >= 0) {\n    return `${html.slice(0, headEnd)}${content}${html.slice(headEnd)}`;\n  }\n\n  const bodyStart = html.search(/<body(?:\\s[^>]*)?>/i);\n  if (bodyStart >= 0) {\n    return `${html.slice(0, bodyStart)}<head>${content}</head>${html.slice(bodyStart)}`;\n  }\n\n  return `${content}${html}`;\n}\n\n/**\n * Wrap an Askr SSR/SSG document renderer so generated theme rules used by the\n * rendered app are available before hydration.\n */\nexport function withThemeStyles<TArgs extends DocumentRenderArgsLike>(\n  documentRenderer: (args: TArgs) => string,\n): (args: TArgs) => string {\n  return (args) => {\n    const documentHtml = documentRenderer(args);\n    const registeredStyles = args.context.styles;\n    const rules = registeredStyles\n      ? (() => {\n          const styles = new Map<string, string>();\n          for (const style of registeredStyles) {\n            if (!style.id || !style.cssText) {\n              throw new TypeError(\"Invalid SSR theme style registration.\");\n            }\n            const existing = styles.get(style.id);\n            if (existing !== undefined && existing !== style.cssText) {\n              throw new RangeError(\n                `SSR style registration collision for ${JSON.stringify(style.id)}.`,\n              );\n            }\n            styles.set(style.id, style.cssText);\n          }\n          return Array.from(styles.values());\n        })()\n      : styleRulesForHtml(args.appHtml);\n    if (rules.length === 0) return documentHtml;\n\n    const nonce =\n      args.context.cspNonce === undefined\n        ? \"\"\n        : ` nonce=\"${escapeHtmlAttribute(args.context.cspNonce)}\"`;\n    const registry = `<style ${STYLE_REGISTRY_ATTR}=\"true\"${nonce}>${escapeStyleRawText(rules.join(\"\\n\"))}\\n</style>`;\n    return injectIntoHead(documentHtml, registry);\n  };\n}\n"],"mappings":";;AAEA,MAAM,sBAAsB;AAU5B,SAAS,oBAAoB,OAAuB;CAClD,OAAO,MACJ,QAAQ,MAAM,OAAO,CAAC,CACtB,QAAQ,MAAM,QAAQ,CAAC,CACvB,QAAQ,MAAM,MAAM,CAAC,CACrB,QAAQ,MAAM,MAAM;AACzB;AAEA,SAAS,mBAAmB,OAAuB;CACjD,OAAO,MAAM,QAAQ,cAAc,WAAW;AAChD;AAEA,SAAS,YAAY,MAAsB;CACzC,IAAI,QAAQ;CACZ,OAAO,QAAQ,KAAK,QAAQ;EAC1B,IAAI,KAAK,WAAW,QAAQ,KAAK,GAAG;GAClC,MAAM,aAAa,KAAK,QAAQ,OAAO,QAAQ,CAAC;GAChD,QAAQ,aAAa,IAAI,KAAK,SAAS,aAAa;GACpD;EACF;EAEA,MAAM,eAAe,KAAK,MAAM,KAAK,CAAC,CAAC,MAAM,6CAA6C;EAC1F,IAAI,cAAc;GAChB,MAAM,oBAAoB,IAAI,OAAO,SAAS,aAAa,GAAG,QAAQ,IAAI;GAC1E,kBAAkB,YAAY,QAAQ,aAAa,EAAE,CAAC;GACtD,MAAM,aAAa,kBAAkB,KAAK,IAAI;GAC9C,IAAI,CAAC,YAAY,OAAO;GACxB,QAAQ,WAAW,QAAQ,WAAW,EAAE,CAAC;GACzC;EACF;EAGA,IADgB,KAAK,MAAM,KAAK,CAAC,CAAC,MAAM,kBAC9B,GAAG,OAAO;EACpB,SAAS;CACX;CACA,OAAO;AACT;AAEA,SAAS,eAAe,MAAc,SAAyB;CAC7D,MAAM,UAAU,YAAY,IAAI;CAChC,IAAI,WAAW,GACb,OAAO,GAAG,KAAK,MAAM,GAAG,OAAO,IAAI,UAAU,KAAK,MAAM,OAAO;CAGjE,MAAM,YAAY,KAAK,OAAO,qBAAqB;CACnD,IAAI,aAAa,GACf,OAAO,GAAG,KAAK,MAAM,GAAG,SAAS,EAAE,QAAQ,QAAQ,SAAS,KAAK,MAAM,SAAS;CAGlF,OAAO,GAAG,UAAU;AACtB;;;;;AAMA,SAAgB,gBACd,kBACyB;CACzB,QAAQ,SAAS;EACf,MAAM,eAAe,iBAAiB,IAAI;EAC1C,MAAM,mBAAmB,KAAK,QAAQ;EACtC,MAAM,QAAQ,0BACH;GACL,MAAM,yBAAS,IAAI,IAAoB;GACvC,KAAK,MAAM,SAAS,kBAAkB;IACpC,IAAI,CAAC,MAAM,MAAM,CAAC,MAAM,SACtB,MAAM,IAAI,UAAU,uCAAuC;IAE7D,MAAM,WAAW,OAAO,IAAI,MAAM,EAAE;IACpC,IAAI,aAAa,KAAA,KAAa,aAAa,MAAM,SAC/C,MAAM,IAAI,WACR,wCAAwC,KAAK,UAAU,MAAM,EAAE,EAAE,EACnE;IAEF,OAAO,IAAI,MAAM,IAAI,MAAM,OAAO;GACpC;GACA,OAAO,MAAM,KAAK,OAAO,OAAO,CAAC;EACnC,EAAA,CAAG,IACH,kBAAkB,KAAK,OAAO;EAClC,IAAI,MAAM,WAAW,GAAG,OAAO;EAE/B,MAAM,QACJ,KAAK,QAAQ,aAAa,KAAA,IACtB,KACA,WAAW,oBAAoB,KAAK,QAAQ,QAAQ,EAAE;EAE5D,OAAO,eAAe,cAAc,UADT,oBAAoB,SAAS,MAAM,GAAG,mBAAmB,MAAM,KAAK,IAAI,CAAC,EAAE,WAC1D;CAC9C;AACF"}
+{"version":3,"file":"ssr.js","names":[],"sources":["../src/ssr.ts"],"sourcesContent":["const STYLE_REGISTRY_ATTR = \"data-askr-style-registry\";\nconst STYLE_CLASS_PREFIX = \"ak-style-\";\nconst CLASS_ATTRIBUTE_PATTERN = /\\sclass=(?:\"([^\"]*)\"|'([^']*)')/g;\nconst MAX_STYLE_RULES = 512;\n\ntype DocumentRenderArgsLike = {\n  appHtml: string;\n  context: {\n    cspNonce?: string;\n    styles?: readonly { id: string; cssText: string }[];\n  };\n};\n\nfunction escapeHtmlAttribute(value: string): string {\n  return value\n    .replace(/&/g, \"&amp;\")\n    .replace(/\"/g, \"&quot;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\");\n}\n\nfunction escapeStyleRawText(value: string): string {\n  return value.replace(/<\\/style/gi, \"<\\\\/style\");\n}\n\nfunction generatedStyleClasses(html: string): Set<string> {\n  const classes = new Set<string>();\n  for (const attribute of html.matchAll(CLASS_ATTRIBUTE_PATTERN)) {\n    for (const className of (attribute[1] ?? attribute[2] ?? \"\").split(/\\s+/)) {\n      if (className.startsWith(STYLE_CLASS_PREFIX)) classes.add(className);\n    }\n  }\n  return classes;\n}\n\nfunction findHeadEnd(html: string): number {\n  let index = 0;\n  while (index < html.length) {\n    if (html.startsWith(\"<!--\", index)) {\n      const commentEnd = html.indexOf(\"-->\", index + 4);\n      index = commentEnd < 0 ? html.length : commentEnd + 3;\n      continue;\n    }\n\n    const rawTextStart = html.slice(index).match(/^<\\s*(script|style|title|textarea)(?:\\s|>)/i);\n    if (rawTextStart) {\n      const rawTextEndPattern = new RegExp(`</\\\\s*${rawTextStart[1]}\\\\s*>`, \"ig\");\n      rawTextEndPattern.lastIndex = index + rawTextStart[0].length;\n      const rawTextEnd = rawTextEndPattern.exec(html);\n      if (!rawTextEnd) return -1;\n      index = rawTextEnd.index + rawTextEnd[0].length;\n      continue;\n    }\n\n    const headEnd = html.slice(index).match(/^<\\/\\s*head\\s*>/i);\n    if (headEnd) return index;\n    index += 1;\n  }\n  return -1;\n}\n\nfunction injectIntoHead(html: string, content: string): string {\n  const headEnd = findHeadEnd(html);\n  if (headEnd >= 0) {\n    return `${html.slice(0, headEnd)}${content}${html.slice(headEnd)}`;\n  }\n\n  const bodyStart = html.search(/<body(?:\\s[^>]*)?>/i);\n  if (bodyStart >= 0) {\n    return `${html.slice(0, bodyStart)}<head>${content}</head>${html.slice(bodyStart)}`;\n  }\n\n  return `${content}${html}`;\n}\n\n/**\n * Wrap an Askr SSR/SSG document renderer so generated theme rules used by the\n * rendered app are available before hydration.\n */\nexport function withThemeStyles<TArgs extends DocumentRenderArgsLike>(\n  documentRenderer: (args: TArgs) => string,\n): (args: TArgs) => string {\n  return (args) => {\n    const documentHtml = documentRenderer(args);\n    const registeredStyles = args.context.styles;\n    const generatedClasses = generatedStyleClasses(documentHtml);\n    if (registeredStyles === undefined) {\n      if (generatedClasses.size > 0) {\n        throw new Error(\n          \"Generated theme classes require request-local SSR style registrations from @askrjs/askr.\",\n        );\n      }\n      return documentHtml;\n    }\n\n    const styles = new Map<string, string>();\n    for (const style of registeredStyles) {\n      if (!style.id || !style.cssText) {\n        throw new TypeError(\"Invalid SSR theme style registration.\");\n      }\n      const existing = styles.get(style.id);\n      if (existing !== undefined && existing !== style.cssText) {\n        throw new RangeError(`SSR style registration collision for ${JSON.stringify(style.id)}.`);\n      }\n      styles.set(style.id, style.cssText);\n      if (styles.size > MAX_STYLE_RULES) {\n        throw new RangeError(\"Theme style registry capacity exceeded.\");\n      }\n    }\n    for (const className of generatedClasses) {\n      if (!styles.has(className)) {\n        throw new Error(\n          `Missing request-local SSR style registration for ${JSON.stringify(className)}.`,\n        );\n      }\n    }\n    const rules = Array.from(styles.values());\n    if (rules.length === 0) return documentHtml;\n\n    const nonce =\n      args.context.cspNonce === undefined\n        ? \"\"\n        : ` nonce=\"${escapeHtmlAttribute(args.context.cspNonce)}\"`;\n    const registry = `<style ${STYLE_REGISTRY_ATTR}=\"true\"${nonce}>${escapeStyleRawText(rules.join(\"\\n\"))}\\n</style>`;\n    return injectIntoHead(documentHtml, registry);\n  };\n}\n"],"mappings":"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"}

package/dist/themes/default/index.css

@@ -145,7 +145,7 @@
   --ak-section-2: var(--ak-space-5);
   --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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@askrjs/themes",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "description": "Default theme tokens, styles, and component presets for Askr apps.",
   "keywords": [
     "askr",
@@ -58,245 +58,29 @@
       "types": "./dist/ssr.d.ts",
       "import": "./dist/ssr.js"
     },
-    "./accordion": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./alert": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./alert-dialog": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./aspect-ratio": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./avatar": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./badge": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./breadcrumb": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./button": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./button-group": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./calendar": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./card": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./carousel": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./checkbox": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./collapsible": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./combobox": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./command": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./context-menu": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./data-table": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./date-picker": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./dialog": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./direction": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./drawer": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./dropdown-menu": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./empty": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./field": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./form": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./hover-card": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./input": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./input-group": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./input-otp": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./item": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./kbd": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./label": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./menubar": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./native-select": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./navigation-menu": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./pagination": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./popover": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./progress": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./radio-group": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./resizable": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./scroll-area": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./select": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./separator": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./sheet": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./sidebar": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./skeleton": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./slider": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./sonner": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./spinner": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./switch": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./table": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./tabs": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
+    "./*": {
+      "types": "./dist/entries/*.d.ts",
+      "import": "./dist/entries/*.js"
     },
-    "./textarea": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./toast": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./toggle": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
+    "./default/tokens.css": {
+      "types": "./src/css.d.ts",
+      "default": "./src/themes/default/tokens.css"
     },
-    "./toggle-group": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
+    "./default/foundations.css": {
+      "types": "./src/css.d.ts",
+      "default": "./src/themes/default/foundations.css"
     },
-    "./tooltip": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
+    "./default/input.css": {
+      "types": "./src/css.d.ts",
+      "default": "./src/themes/default/styles/forms/input.css"
     },
-    "./typography": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
+    "./default/label.css": {
+      "types": "./src/css.d.ts",
+      "default": "./src/themes/default/styles/forms/label.css"
     },
-    "./default/tokens.css": {
+    "./default/styles/*": {
       "types": "./src/css.d.ts",
-      "default": "./src/themes/default/tokens.css"
+      "default": "./src/themes/default/styles/*"
     },
     "./templates/*": {
       "types": "./src/css.d.ts",
@@ -326,14 +110,15 @@
     "typecheck": "tsc -p tsconfig.pack.json --noEmit",
     "build": "vp pack",
     "pack:check": "node tests/package-artifacts.js",
-    "check": "npm run lint && npm run typecheck && npm test && npm run build && npm run test:installed && npm run test:publint && npm run pack:check",
+    "test:bundle": "node tests/granular-bundle.js",
+    "check": "npm run lint && npm run typecheck && npm test && npm run build && npm run test:installed && npm run test:publint && npm run pack:check && npm run test:bundle",
     "prepack": "npm run build",
     "prepublishOnly": "npm run check",
     "test:checks": "vp test run -c vitest.test.checks.config.ts"
   },
   "devDependencies": {
-    "@askrjs/askr": ">=0.0.64 <0.1.0",
-    "@askrjs/ui": ">=0.0.13 <0.1.0",
+    "@askrjs/askr": ">=0.0.85 <0.1.0",
+    "@askrjs/ui": ">=0.0.24 <0.1.0",
     "@askrjs/vite": ">=0.0.5 <0.1.0",
     "@tsdown/css": "0.22.8",
     "@types/node": "^26.0.0",
@@ -346,11 +131,11 @@
     "vite-plus": "^0.2.4"
   },
   "peerDependencies": {
-    "@askrjs/askr": ">=0.0.64 <0.1.0",
-    "@askrjs/ui": ">=0.0.13 <0.1.0"
+    "@askrjs/askr": ">=0.0.85 <0.1.0",
+    "@askrjs/ui": ">=0.0.24 <0.1.0"
   },
   "engines": {
-    "node": ">=18"
+    "node": ">=24.15.0"
   },
   "packageManager": "npm@11.17.0"
 }

package/src/components/_internal/block-layout.ts

@@ -200,7 +200,7 @@ function resolveTokenValue(
   return tokens[trimmed] ?? trimmed;
 }
 
-function resolveSpaceValue(value: string | number): string | number {
+export function resolveSpaceValue(value: string | number): string | number {
   return resolveTokenValue(value, SPACE_TOKEN_MAP);
 }
 
@@ -243,7 +243,7 @@ function resolveShadowValue(value: BlockShadow): string | undefined {
   return String(resolveTokenValue(value, SHADOW_TOKEN_MAP));
 }
 
-function setResponsiveVar<T>(
+export function setResponsiveVar<T>(
   styles: Record<string, string | number>,
   property: string,
   value: ResponsiveValue<T> | undefined,

package/src/components/_internal/style.ts

@@ -176,7 +176,7 @@ 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 MAX_COLLISION_CACHE = 4096;
 
 type StyleRule = {
   className: string;
@@ -184,7 +184,7 @@ type StyleRule = {
   rule: string;
 };
 
-const styleRulesByClass = new Map<string, StyleRule>();
+const styleCollisionCache = new Map<string, StyleRule>();
 type StyleRegistry = {
   element: HTMLStyleElement;
   ruleCount: number;
@@ -221,7 +221,7 @@ function escapeStyleRawText(value: string): string {
 
 function styleRuleFor(declarations: string): StyleRule {
   const className = styleClassName(declarations);
-  const existing = styleRulesByClass.get(className);
+  const existing = styleCollisionCache.get(className);
   if (existing) {
     if (existing.declarations !== declarations) {
       throw new RangeError("Theme style class collision detected.");
@@ -238,12 +238,12 @@ function styleRuleFor(declarations: string): StyleRule {
 }
 
 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;
+  styleCollisionCache.delete(entry.className);
+  styleCollisionCache.set(entry.className, entry);
+  while (styleCollisionCache.size > MAX_COLLISION_CACHE) {
+    const oldest = styleCollisionCache.keys().next().value;
     if (oldest === undefined) break;
-    styleRulesByClass.delete(oldest);
+    styleCollisionCache.delete(oldest);
   }
 }
 
@@ -327,21 +327,3 @@ export function styleDeclarationsToClass(declarations: string | undefined): stri
 
   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.");
-      }
-    }
-  }
-
-  return Array.from(rules.values());
-}

package/src/components/grid/grid.tsx

@@ -1,46 +1,13 @@
 import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { classes } from "../_internal/classes";
-import { mergeLayoutStyles } from "../_internal/block-layout";
+import { mergeLayoutStyles, resolveSpaceValue, setResponsiveVar } from "../_internal/block-layout";
 import { mergeProps } from "../_internal/merge-props";
 import { intrinsicElement } from "../_internal/jsx";
 import { styleDeclarationsToClass } from "../_internal/style";
-import type { BlockSpace, LayoutBreakpoint, ResponsiveValue } from "../_internal/block-layout";
+import type { BlockSpace } from "../_internal/block-layout";
 import type { GridAlign, GridColumns, GridElement, GridProps } from "./grid.types";
 
 const DEFAULT_ELEMENT = "div";
-const BREAKPOINTS: readonly LayoutBreakpoint[] = ["base", "sm", "md", "lg", "xl"];
-
-const SPACE_TOKEN_MAP: Record<BlockSpace, string> = {
-  "0": "0",
-  xs: "var(--ak-space-xs)",
-  sm: "var(--ak-space-sm)",
-  md: "var(--ak-space-md)",
-  lg: "var(--ak-space-lg)",
-  xl: "var(--ak-space-xl)",
-  "2xl": "var(--ak-space-2xl)",
-  "3xl": "var(--ak-space-3xl)",
-  page: "var(--ak-layout-page-gutter)",
-};
-
-function isResponsiveValue<T>(
-  value: ResponsiveValue<T> | undefined,
-): value is Partial<Record<LayoutBreakpoint, T>> {
-  return Boolean(
-    value &&
-    typeof value === "object" &&
-    !Array.isArray(value) &&
-    BREAKPOINTS.some((breakpoint) => breakpoint in value),
-  );
-}
-
-function normalizeResponsiveValue<T>(
-  value: ResponsiveValue<T> | undefined,
-): Partial<Record<LayoutBreakpoint, T>> | undefined {
-  if (value === undefined) return undefined;
-  if (isResponsiveValue(value)) return value;
-  return { base: value };
-}
-
 function resolveColumns(value: GridColumns): string {
   if (typeof value === "number") {
     return `repeat(${value}, minmax(0, 1fr))`;
@@ -51,7 +18,7 @@ function resolveColumns(value: GridColumns): string {
 }
 
 function resolveGap(value: BlockSpace): string {
-  return SPACE_TOKEN_MAP[value] ?? value;
+  return String(resolveSpaceValue(value));
 }
 
 function resolveAlign(value: GridAlign): string {
@@ -60,24 +27,6 @@ function resolveAlign(value: GridAlign): string {
   return value;
 }
 
-function setResponsiveVar<T>(
-  styles: Record<string, string | number>,
-  property: string,
-  value: ResponsiveValue<T> | undefined,
-  resolve: (value: T) => string | number | undefined,
-) {
-  const normalized = normalizeResponsiveValue(value);
-  if (!normalized) return;
-
-  for (const breakpoint of BREAKPOINTS) {
-    const breakpointValue = normalized[breakpoint];
-    if (breakpointValue === undefined) continue;
-    const resolved = resolve(breakpointValue);
-    if (resolved === undefined || resolved === "") continue;
-    styles[`--ak-grid-${property}-${breakpoint}`] = resolved;
-  }
-}
-
 export function Grid<TElement extends GridElement = "div">(
   props: GridProps<TElement>,
 ): JSX.Element {
@@ -99,9 +48,9 @@ export function Grid<TElement extends GridElement = "div">(
   };
 
   const styles: Record<string, string | number> = {};
-  setResponsiveVar(styles, "columns", columns, resolveColumns);
-  setResponsiveVar(styles, "gap", gap, resolveGap);
-  setResponsiveVar(styles, "align", align, resolveAlign);
+  setResponsiveVar(styles, "grid-columns", columns, resolveColumns);
+  setResponsiveVar(styles, "grid-gap", gap, resolveGap);
+  setResponsiveVar(styles, "grid-align", align, resolveAlign);
 
   const generatedClass = styleDeclarationsToClass(mergeLayoutStyles(styles, userStyle));
   const finalProps = mergeProps(rest, {

package/src/components/jsx-types.ts

@@ -5,11 +5,6 @@ declare global {
     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>;
-    }
   }
 }