@tenphi/renderer 0.27.0 → 0.30.0

package/dist/preview-document.d.ts

@@ -1,16 +1,29 @@
 import { PreviewProps } from "./components/props.js";
 //#region src/preview-document.d.ts
+/**
+ * Runs first in a preview frame that allows scripts, so it keeps `parent` even
+ * if authored code declares its own. It measures the root element's box rather
+ * than `scrollHeight`, which never drops below the frame's own height: the
+ * root's height follows the content, so the frame can shrink, and growing the
+ * frame doesn't change the measurement. A horizontal scrollbar, if any, is
+ * added so that it doesn't overflow the content vertically. The frame's origin
+ * is opaque, so the message is posted to any origin.
+ */
+declare const previewHeightReporter = "{\nconst root = document.documentElement;\nconst page = parent;\nconst report = () => page.postMessage({ type: \"cookbook:preview-height\", height: root.getBoundingClientRect().height + window.innerHeight - root.clientHeight }, \"*\");\nnew ResizeObserver(report).observe(root);\naddEventListener(\"message\", (event) => { if (event.data?.type === \"cookbook:preview-height\") report(); });\n}";
 /**
  * Build a Preview's frame document, its "View source" text and the frame's
  * settings. Public scripts are inlined so they run in the opaque-origin sandbox
- * without a request.
+ * without a request. A frame that runs scripts also reports its content height
+ * so the page can size it, adding the buffer; a frame without scripts keeps its
+ * minimum height, and nothing measures its content to add a buffer to.
  */
-declare function buildPreview({ html, css, javascript, scripts, height }: Omit<PreviewProps, "title">, publicDir: string, page: string): Promise<{
+declare function buildPreview({ html, css, javascript, scripts, height, buffer }: Omit<PreviewProps, "title">, publicDir: string, page: string): Promise<{
   document: string;
   source: string;
   sandbox: string;
   height: string | undefined;
+  buffer: string | undefined;
 }>;
 //#endregion
-export { buildPreview };
+export { buildPreview, previewHeightReporter };
 //# sourceMappingURL=preview-document.d.ts.map

package/dist/preview-document.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preview-document.d.ts","names":[],"sources":["../src/preview-document.ts"],"mappings":";;;;;;;iBAcsB,eAElB,MACA,KACA,YACA,SACA,UACC,KAAK,wBACR,mBACA,eAAY"}
+{"version":3,"file":"preview-document.d.ts","names":[],"sources":["../src/preview-document.ts"],"mappings":";;;;;;;;;;;cAmBa;;;;;;;;iBAeS,eAElB,MACA,KACA,YACA,SACA,QACA,UACC,KAAK,wBACR,mBACA,eAAY"}

package/dist/preview-document.js

@@ -1,22 +1,44 @@
+import { PREVIEW_HEIGHT_MESSAGE } from "./client/preview-height.js";
 import { readFile } from "node:fs/promises";
 import { join } from "node:path";
 //#region src/preview-document.ts
 const CSS_LENGTH = /^(?:\d+|\d*\.\d+)(?:px|r?em|ch|ex|r?lh|[dls]?v(?:h|w|min|max)|cm|mm|in|pt|pc)$/;
 /**
+* Runs first in a preview frame that allows scripts, so it keeps `parent` even
+* if authored code declares its own. It measures the root element's box rather
+* than `scrollHeight`, which never drops below the frame's own height: the
+* root's height follows the content, so the frame can shrink, and growing the
+* frame doesn't change the measurement. A horizontal scrollbar, if any, is
+* added so that it doesn't overflow the content vertically. The frame's origin
+* is opaque, so the message is posted to any origin.
+*/
+const previewHeightReporter = `{
+const root = document.documentElement;
+const page = parent;
+const report = () => page.postMessage({ type: "${PREVIEW_HEIGHT_MESSAGE}", height: root.getBoundingClientRect().height + window.innerHeight - root.clientHeight }, "*");
+new ResizeObserver(report).observe(root);
+addEventListener("message", (event) => { if (event.data?.type === "${PREVIEW_HEIGHT_MESSAGE}") report(); });
+}`;
+/**
 * Build a Preview's frame document, its "View source" text and the frame's
 * settings. Public scripts are inlined so they run in the opaque-origin sandbox
-* without a request.
+* without a request. A frame that runs scripts also reports its content height
+* so the page can size it, adding the buffer; a frame without scripts keeps its
+* minimum height, and nothing measures its content to add a buffer to.
 */
-async function buildPreview({ html = "", css = "", javascript, scripts = [], height }, publicDir, page) {
-	if (height !== void 0 && !CSS_LENGTH.test(height)) throw Error(`Preview on ${page}: height ${height} must be a CSS length, such as 18rem or 320px.`);
+async function buildPreview({ html = "", css = "", javascript, scripts = [], height, buffer }, publicDir, page) {
+	for (const [name, value] of [["height", height], ["buffer", buffer]]) if (value !== void 0 && !CSS_LENGTH.test(value)) throw Error(`Preview on ${page}: ${name} ${value} must be a CSS length, such as 18rem or 320px.`);
 	const files = await Promise.all(scripts.map((src) => readPublicScript(src, publicDir, page)));
-	const markup = `<!doctype html><meta charset="utf-8"><style>${css}</style>${html}`;
+	const head = "<!doctype html><meta charset=\"utf-8\">";
+	const body = `<style>${css}</style>${html}`;
 	const authored = javascript ? inlineScript(javascript) : "";
+	const runsScripts = Boolean(scripts.length || javascript);
 	return {
-		document: markup + files.map(inlineScript).join("") + authored,
-		source: markup + scripts.map((src) => `<script src="${src}"><\/script>`).join("") + authored,
-		sandbox: scripts.length || javascript ? "allow-forms allow-scripts" : "allow-forms",
-		height
+		document: head + (runsScripts ? inlineScript(previewHeightReporter) : "") + body + files.map(inlineScript).join("") + authored,
+		source: head + body + scripts.map((src) => `<script src="${src}"><\/script>`).join("") + authored,
+		sandbox: runsScripts ? "allow-forms allow-scripts" : "allow-forms",
+		height,
+		buffer: runsScripts ? buffer : void 0
 	};
 }
 function inlineScript(code) {
@@ -32,6 +54,6 @@ async function readPublicScript(src, publicDir, page) {
 	}
 }
 //#endregion
-export { buildPreview };
+export { buildPreview, previewHeightReporter };
 
 //# sourceMappingURL=preview-document.js.map

package/dist/preview-document.js.map

@@ -1 +1 @@
-{"version":3,"file":"preview-document.js","names":[],"sources":["../src/preview-document.ts"],"sourcesContent":["import { readFile } from \"node:fs/promises\";\nimport { join } from \"node:path\";\nimport type { PreviewProps } from \"./components/props.js\";\n\n// The frame's height becomes generated CSS, so accept only a plain length.\n// Percentages are rejected because the frame's container has no fixed height.\nconst CSS_LENGTH =\n  /^(?:\\d+|\\d*\\.\\d+)(?:px|r?em|ch|ex|r?lh|[dls]?v(?:h|w|min|max)|cm|mm|in|pt|pc)$/;\n\n/**\n * Build a Preview's frame document, its \"View source\" text and the frame's\n * settings. Public scripts are inlined so they run in the opaque-origin sandbox\n * without a request.\n */\nexport async function buildPreview(\n  {\n    html = \"\",\n    css = \"\",\n    javascript,\n    scripts = [],\n    height,\n  }: Omit<PreviewProps, \"title\">,\n  publicDir: string,\n  page: string,\n) {\n  if (height !== undefined && !CSS_LENGTH.test(height))\n    throw Error(\n      `Preview on ${page}: height ${height} must be a CSS length, such as 18rem or 320px.`,\n    );\n  const files = await Promise.all(\n    scripts.map((src) => readPublicScript(src, publicDir, page)),\n  );\n  const markup = `<!doctype html><meta charset=\"utf-8\"><style>${css}</style>${html}`;\n  const authored = javascript ? inlineScript(javascript) : \"\";\n  return {\n    document: markup + files.map(inlineScript).join(\"\") + authored,\n    source:\n      markup +\n      scripts.map((src) => `<script src=\"${src}\"></script>`).join(\"\") +\n      authored,\n    // A submitted form can navigate only the frame itself, as a link can.\n    sandbox:\n      scripts.length || javascript\n        ? \"allow-forms allow-scripts\"\n        : \"allow-forms\",\n    height,\n  };\n}\n\n// The HTML parser ends a script at the first `</script`, even inside a string.\nfunction inlineScript(code: string) {\n  return `<script>${code.replace(/<\\/(script)/gi, \"<\\\\/$1\")}</script>`;\n}\n\nasync function readPublicScript(src: string, publicDir: string, page: string) {\n  const error = `Preview on ${page}: script ${src} must be a readable file in the site's public directory, such as /demo/button.js.`;\n  if (!/^\\/(?!\\/)/.test(src) || src.split(/[\\\\/]/).includes(\"..\"))\n    throw Error(error);\n  try {\n    return await readFile(join(publicDir, src), \"utf8\");\n  } catch {\n    throw Error(error);\n  }\n}\n"],"mappings":";;;AAMA,MAAM,aACJ;;;;;;AAOF,eAAsB,aACpB,EACE,OAAO,IACP,MAAM,IACN,YACA,UAAU,CAAC,GACX,UAEF,WACA,MACA;CACA,IAAI,WAAW,KAAA,KAAa,CAAC,WAAW,KAAK,MAAM,GACjD,MAAM,MACJ,cAAc,KAAK,WAAW,OAAO,+CACvC;CACF,MAAM,QAAQ,MAAM,QAAQ,IAC1B,QAAQ,KAAK,QAAQ,iBAAiB,KAAK,WAAW,IAAI,CAAC,CAC7D;CACA,MAAM,SAAS,+CAA+C,IAAI,UAAU;CAC5E,MAAM,WAAW,aAAa,aAAa,UAAU,IAAI;CACzD,OAAO;EACL,UAAU,SAAS,MAAM,IAAI,YAAY,CAAC,CAAC,KAAK,EAAE,IAAI;EACtD,QACE,SACA,QAAQ,KAAK,QAAQ,gBAAgB,IAAI,aAAY,CAAC,CAAC,KAAK,EAAE,IAC9D;EAEF,SACE,QAAQ,UAAU,aACd,8BACA;EACN;CACF;AACF;AAGA,SAAS,aAAa,MAAc;CAClC,OAAO,WAAW,KAAK,QAAQ,iBAAiB,QAAQ,EAAE;AAC5D;AAEA,eAAe,iBAAiB,KAAa,WAAmB,MAAc;CAC5E,MAAM,QAAQ,cAAc,KAAK,WAAW,IAAI;CAChD,IAAI,CAAC,YAAY,KAAK,GAAG,KAAK,IAAI,MAAM,OAAO,CAAC,CAAC,SAAS,IAAI,GAC5D,MAAM,MAAM,KAAK;CACnB,IAAI;EACF,OAAO,MAAM,SAAS,KAAK,WAAW,GAAG,GAAG,MAAM;CACpD,QAAQ;EACN,MAAM,MAAM,KAAK;CACnB;AACF"}
+{"version":3,"file":"preview-document.js","names":[],"sources":["../src/preview-document.ts"],"sourcesContent":["import { readFile } from \"node:fs/promises\";\nimport { join } from \"node:path\";\nimport { PREVIEW_HEIGHT_MESSAGE } from \"./client/preview-height.js\";\nimport type { PreviewProps } from \"./components/props.js\";\n\n// The frame's height and buffer become CSS, so accept only a plain length.\n// Percentages are rejected because the frame's container has no fixed height.\nconst CSS_LENGTH =\n  /^(?:\\d+|\\d*\\.\\d+)(?:px|r?em|ch|ex|r?lh|[dls]?v(?:h|w|min|max)|cm|mm|in|pt|pc)$/;\n\n/**\n * Runs first in a preview frame that allows scripts, so it keeps `parent` even\n * if authored code declares its own. It measures the root element's box rather\n * than `scrollHeight`, which never drops below the frame's own height: the\n * root's height follows the content, so the frame can shrink, and growing the\n * frame doesn't change the measurement. A horizontal scrollbar, if any, is\n * added so that it doesn't overflow the content vertically. The frame's origin\n * is opaque, so the message is posted to any origin.\n */\nexport const previewHeightReporter = `{\nconst root = document.documentElement;\nconst page = parent;\nconst report = () => page.postMessage({ type: \"${PREVIEW_HEIGHT_MESSAGE}\", height: root.getBoundingClientRect().height + window.innerHeight - root.clientHeight }, \"*\");\nnew ResizeObserver(report).observe(root);\naddEventListener(\"message\", (event) => { if (event.data?.type === \"${PREVIEW_HEIGHT_MESSAGE}\") report(); });\n}`;\n\n/**\n * Build a Preview's frame document, its \"View source\" text and the frame's\n * settings. Public scripts are inlined so they run in the opaque-origin sandbox\n * without a request. A frame that runs scripts also reports its content height\n * so the page can size it, adding the buffer; a frame without scripts keeps its\n * minimum height, and nothing measures its content to add a buffer to.\n */\nexport async function buildPreview(\n  {\n    html = \"\",\n    css = \"\",\n    javascript,\n    scripts = [],\n    height,\n    buffer,\n  }: Omit<PreviewProps, \"title\">,\n  publicDir: string,\n  page: string,\n) {\n  for (const [name, value] of [\n    [\"height\", height],\n    [\"buffer\", buffer],\n  ])\n    if (value !== undefined && !CSS_LENGTH.test(value))\n      throw Error(\n        `Preview on ${page}: ${name} ${value} must be a CSS length, such as 18rem or 320px.`,\n      );\n  const files = await Promise.all(\n    scripts.map((src) => readPublicScript(src, publicDir, page)),\n  );\n  const head = '<!doctype html><meta charset=\"utf-8\">';\n  const body = `<style>${css}</style>${html}`;\n  const authored = javascript ? inlineScript(javascript) : \"\";\n  const runsScripts = Boolean(scripts.length || javascript);\n  return {\n    // The height reporter runs first, before authored code can shadow `parent`.\n    document:\n      head +\n      (runsScripts ? inlineScript(previewHeightReporter) : \"\") +\n      body +\n      files.map(inlineScript).join(\"\") +\n      authored,\n    source:\n      head +\n      body +\n      scripts.map((src) => `<script src=\"${src}\"></script>`).join(\"\") +\n      authored,\n    // A submitted form can navigate only the frame itself, as a link can.\n    sandbox: runsScripts ? \"allow-forms allow-scripts\" : \"allow-forms\",\n    height,\n    buffer: runsScripts ? buffer : undefined,\n  };\n}\n\n// The HTML parser ends a script at the first `</script`, even inside a string.\nfunction inlineScript(code: string) {\n  return `<script>${code.replace(/<\\/(script)/gi, \"<\\\\/$1\")}</script>`;\n}\n\nasync function readPublicScript(src: string, publicDir: string, page: string) {\n  const error = `Preview on ${page}: script ${src} must be a readable file in the site's public directory, such as /demo/button.js.`;\n  if (!/^\\/(?!\\/)/.test(src) || src.split(/[\\\\/]/).includes(\"..\"))\n    throw Error(error);\n  try {\n    return await readFile(join(publicDir, src), \"utf8\");\n  } catch {\n    throw Error(error);\n  }\n}\n"],"mappings":";;;;AAOA,MAAM,aACJ;;;;;;;;;;AAWF,MAAa,wBAAwB;;;iDAGY,uBAAuB;;qEAEH,uBAAuB;;;;;;;;;AAU5F,eAAsB,aACpB,EACE,OAAO,IACP,MAAM,IACN,YACA,UAAU,CAAC,GACX,QACA,UAEF,WACA,MACA;CACA,KAAK,MAAM,CAAC,MAAM,UAAU,CAC1B,CAAC,UAAU,MAAM,GACjB,CAAC,UAAU,MAAM,CACnB,GACE,IAAI,UAAU,KAAA,KAAa,CAAC,WAAW,KAAK,KAAK,GAC/C,MAAM,MACJ,cAAc,KAAK,IAAI,KAAK,GAAG,MAAM,+CACvC;CACJ,MAAM,QAAQ,MAAM,QAAQ,IAC1B,QAAQ,KAAK,QAAQ,iBAAiB,KAAK,WAAW,IAAI,CAAC,CAC7D;CACA,MAAM,OAAO;CACb,MAAM,OAAO,UAAU,IAAI,UAAU;CACrC,MAAM,WAAW,aAAa,aAAa,UAAU,IAAI;CACzD,MAAM,cAAc,QAAQ,QAAQ,UAAU,UAAU;CACxD,OAAO;EAEL,UACE,QACC,cAAc,aAAa,qBAAqB,IAAI,MACrD,OACA,MAAM,IAAI,YAAY,CAAC,CAAC,KAAK,EAAE,IAC/B;EACF,QACE,OACA,OACA,QAAQ,KAAK,QAAQ,gBAAgB,IAAI,aAAY,CAAC,CAAC,KAAK,EAAE,IAC9D;EAEF,SAAS,cAAc,8BAA8B;EACrD;EACA,QAAQ,cAAc,SAAS,KAAA;CACjC;AACF;AAGA,SAAS,aAAa,MAAc;CAClC,OAAO,WAAW,KAAK,QAAQ,iBAAiB,QAAQ,EAAE;AAC5D;AAEA,eAAe,iBAAiB,KAAa,WAAmB,MAAc;CAC5E,MAAM,QAAQ,cAAc,KAAK,WAAW,IAAI;CAChD,IAAI,CAAC,YAAY,KAAK,GAAG,KAAK,IAAI,MAAM,OAAO,CAAC,CAAC,SAAS,IAAI,GAC5D,MAAM,MAAM,KAAK;CACnB,IAAI;EACF,OAAO,MAAM,SAAS,KAAK,WAAW,GAAG,GAAG,MAAM;CACpD,QAAQ;EACN,MAAM,MAAM,KAAK;CACnB;AACF"}

package/dist/styling.js

@@ -1,6 +1,6 @@
 import { n as resolveComponentStyles } from "./component-styles-DstqPFf3.js";
 import { t as configureCookbookStates } from "./tasty-states-BIgiJQ3N.js";
-import { n as extendComponent, t as defineComponent } from "./define-component-BP4YwMak.js";
+import { defineComponent, extendComponent } from "./define-component.js";
 import { mergeStyles, tasty, useGlobalStyles } from "@tenphi/tasty";
 //#region src/components/Button.styles.js
 /** Shared button foundation; descendants own their layout and interaction anatomy. */
@@ -9,7 +9,7 @@ const Button = defineComponent("Button", {
 	styles: {
 		display: "flex",
 		alignItems: "center",
-		gap: "$gap",
+		gap: "1x",
 		blockSize: "min 0",
 		color: "#text-soft",
 		cursor: "pointer"

package/dist/styling.js.map

@@ -1 +1 @@
-{"version":3,"file":"styling.js","names":[],"sources":["../src/components/Button.styles.js","../src/styling.ts"],"sourcesContent":["import { defineComponent } from \"../define-component.js\";\n\n/** Shared button foundation; descendants own their layout and interaction anatomy. */\nexport const Button = defineComponent(\"Button\", {\n  as: \"button\",\n  styles: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: \"$gap\",\n    blockSize: \"min 0\",\n    color: \"#text-soft\",\n    cursor: \"pointer\",\n  },\n});\n","import { configureCookbookStates } from \"./components/tasty-states.js\";\n\n// Consumer components can be evaluated before Cookbook's own components.\nconfigureCookbookStates();\n\nexport { tasty, useGlobalStyles, mergeStyles } from \"@tenphi/tasty\";\nexport type { Styles } from \"@tenphi/tasty\";\nexport { defineComponent, extendComponent } from \"./define-component.js\";\nexport { Button } from \"./components/Button.styles.js\";\nexport { resolveComponentStyles } from \"./components/component-styles.js\";\n"],"mappings":";;;;;;AAGA,MAAa,SAAS,gBAAgB,UAAU;CAC9C,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,KAAK;EACL,WAAW;EACX,OAAO;EACP,QAAQ;CACV;AACF,CAAC;;;ACVD,wBAAwB"}
+{"version":3,"file":"styling.js","names":[],"sources":["../src/components/Button.styles.js","../src/styling.ts"],"sourcesContent":["import { defineComponent } from \"../define-component.js\";\n\n/** Shared button foundation; descendants own their layout and interaction anatomy. */\nexport const Button = defineComponent(\"Button\", {\n  as: \"button\",\n  styles: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: \"1x\",\n    blockSize: \"min 0\",\n    color: \"#text-soft\",\n    cursor: \"pointer\",\n  },\n});\n","import { configureCookbookStates } from \"./components/tasty-states.js\";\n\n// Consumer components can be evaluated before Cookbook's own components.\nconfigureCookbookStates();\n\nexport { tasty, useGlobalStyles, mergeStyles } from \"@tenphi/tasty\";\nexport type { Styles } from \"@tenphi/tasty\";\nexport { defineComponent, extendComponent } from \"./define-component.js\";\nexport { Button } from \"./components/Button.styles.js\";\nexport { resolveComponentStyles } from \"./components/component-styles.js\";\n"],"mappings":";;;;;;AAGA,MAAa,SAAS,gBAAgB,UAAU;CAC9C,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,KAAK;EACL,WAAW;EACX,OAAO;EACP,QAAQ;CACV;AACF,CAAC;;;ACVD,wBAAwB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenphi/renderer",
-  "version": "0.27.0",
+  "version": "0.30.0",
   "description": "Astro renderer and Tasty theme for Cookbook",
   "type": "module",
   "sideEffects": [
@@ -61,10 +61,10 @@
     "@fontsource-variable/jetbrains-mono": "^5.3.0",
     "@fontsource-variable/onest": "^5.3.0",
     "@pagefind/default-ui": "1.5.2",
-    "@tenphi/docs": "0.27.0",
-    "@tenphi/eslint-plugin-tasty": "1.6.0",
+    "@tenphi/docs": "0.30.0",
+    "@tenphi/eslint-plugin-tasty": "1.12.0",
     "@tenphi/glaze": "2.0.1",
-    "@tenphi/tasty": "3.9.10",
+    "@tenphi/tasty": "3.14.0",
     "beautiful-mermaid": "^1.1.3",
     "hast-util-from-html": "^2.0.3",
     "pagefind": "1.5.2",

package/dist/components/inherit-component-parts.d.ts

@@ -1 +0,0 @@
-export function inheritComponentParts<T>(base: object, extended: T): T;

package/dist/components/inherit-component-parts.js

@@ -1,7 +0,0 @@
-/** Tasty wrappers forward styles but do not copy compound component exports. */
-export function inheritComponentParts(base, extended) {
-  for (const [name, part] of Object.entries(base)) {
-    if (/^[A-Z]/.test(name)) extended[name] = part;
-  }
-  return extended;
-}

package/dist/define-component-BP4YwMak.js

@@ -1,28 +0,0 @@
-import { n as resolveComponentStyles } from "./component-styles-DstqPFf3.js";
-import { tasty } from "@tenphi/tasty";
-//#region src/components/inherit-component-parts.js
-/** Tasty wrappers forward styles but do not copy compound component exports. */
-function inheritComponentParts(base, extended) {
-	for (const [name, part] of Object.entries(base)) if (/^[A-Z]/.test(name)) extended[name] = part;
-	return extended;
-}
-//#endregion
-//#region src/define-component.ts
-/** Extend a component's styles and defaults, preserving its props and compound parts. */
-function extendComponent(name, base, options) {
-	return inheritComponentParts(base, tasty(base, {
-		...options,
-		styles: resolveComponentStyles(name, options.styles ?? {})
-	}));
-}
-/** Create a named component with its built-in or custom theme styles merged into its defaults. */
-function defineComponent(name, options) {
-	return tasty({
-		...options,
-		styles: resolveComponentStyles(name, options.styles ?? {})
-	});
-}
-//#endregion
-export { extendComponent as n, defineComponent as t };
-
-//# sourceMappingURL=define-component-BP4YwMak.js.map

package/dist/define-component-BP4YwMak.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"define-component-BP4YwMak.js","names":[],"sources":["../src/components/inherit-component-parts.js","../src/define-component.ts"],"sourcesContent":["/** Tasty wrappers forward styles but do not copy compound component exports. */\nexport function inheritComponentParts(base, extended) {\n  for (const [name, part] of Object.entries(base)) {\n    if (/^[A-Z]/.test(name)) extended[name] = part;\n  }\n  return extended;\n}\n","import {\n  tasty,\n  type ElementsDefinition,\n  type ModPropsInput,\n  type StylesInterface,\n  type Styles,\n  type SubElementProps,\n  type TastyElementOptions,\n  type TastyPolymorphicComponent,\n  type TokenPropsInput,\n  type VariantMap,\n} from \"@tenphi/tasty\";\nimport type {\n  ComponentProps,\n  ComponentType,\n  ElementType,\n  ForwardRefExoticComponent,\n  JSX,\n  PropsWithoutRef,\n  RefAttributes,\n} from \"react\";\nimport { resolveComponentStyles } from \"./components/component-styles.js\";\nimport { inheritComponentParts } from \"./components/inherit-component-parts.js\";\n\ntype InheritedParts<C> = {\n  [\n    Name in keyof C as Name extends string\n      ? Name extends Capitalize<Name>\n        ? C[Name] extends ComponentType<any>\n          ? Name\n          : never\n        : never\n      : never\n  ]: C[Name];\n};\n\ntype SubElementTag<Definition extends ElementsDefinition[string]> =\n  Definition extends string\n    ? Definition\n    : Definition extends { as?: infer Tag }\n      ? Tag extends keyof JSX.IntrinsicElements\n        ? Tag\n        : \"div\"\n      : \"div\";\n\n// Use public Tasty types so declarations do not leak its private sub-element aliases.\ntype SubElements<E extends ElementsDefinition> = {\n  [Name in keyof E]: ForwardRefExoticComponent<\n    PropsWithoutRef<SubElementProps<SubElementTag<E[Name]>>> &\n      RefAttributes<\n        SubElementTag<E[Name]> extends keyof HTMLElementTagNameMap\n          ? HTMLElementTagNameMap[SubElementTag<E[Name]>]\n          : unknown\n      >\n  >;\n};\n\n/** Extend a component's styles and defaults, preserving its props and compound parts. */\nexport function extendComponent<C extends ComponentType<any>>(\n  name: string,\n  base: C,\n  options: Partial<Omit<ComponentProps<C>, \"as\" | \"styles\">> & {\n    styles?: Styles;\n  },\n): ComponentType<ComponentProps<C>> & InheritedParts<C> {\n  const extended = tasty(base, {\n    ...options,\n    styles: resolveComponentStyles(name, options.styles ?? {}),\n  });\n  // Tasty's wrapper type erases compound exports and makes every prop optional.\n  // Restore the copied parts and conservatively keep the base's required props.\n  return inheritComponentParts(base, extended) as unknown as ComponentType<\n    ComponentProps<C>\n  > &\n    InheritedParts<C>;\n}\n\n/** Create a named component with its built-in or custom theme styles merged into its defaults. */\nexport function defineComponent<\n  K extends readonly (keyof StylesInterface)[],\n  V extends VariantMap,\n  E extends ElementsDefinition = Record<string, never>,\n  AsType extends ElementType = \"div\",\n  M extends ModPropsInput = readonly never[],\n  TP extends TokenPropsInput = readonly never[],\n>(\n  name: string,\n  options: TastyElementOptions<K, V, E, AsType, M, TP>,\n): TastyPolymorphicComponent<AsType, K, V, M, TP> & SubElements<E> {\n  return tasty<K, V, E, AsType, M, TP>({\n    ...options,\n    styles: resolveComponentStyles(name, options.styles ?? {}),\n  }) as TastyPolymorphicComponent<AsType, K, V, M, TP> & SubElements<E>;\n}\n"],"mappings":";;;;AACA,SAAgB,sBAAsB,MAAM,UAAU;CACpD,KAAK,MAAM,CAAC,MAAM,SAAS,OAAO,QAAQ,IAAI,GAC5C,IAAI,SAAS,KAAK,IAAI,GAAG,SAAS,QAAQ;CAE5C,OAAO;AACT;;;;ACoDA,SAAgB,gBACd,MACA,MACA,SAGsD;CAOtD,OAAO,sBAAsB,MANZ,MAAM,MAAM;EAC3B,GAAG;EACH,QAAQ,uBAAuB,MAAM,QAAQ,UAAU,CAAC,CAAC;CAC3D,CAGmC,CAAQ;AAI7C;;AAGA,SAAgB,gBAQd,MACA,SACiE;CACjE,OAAO,MAA8B;EACnC,GAAG;EACH,QAAQ,uBAAuB,MAAM,QAAQ,UAAU,CAAC,CAAC;CAC3D,CAAC;AACH"}