@getvitops/astro 0.2.0 → 0.3.0

package/dist/index.d.mts

@@ -1,7 +1,6 @@
-import { DefaultTreeAdapterTypes } from "parse5";
 import { Format } from "@getvitops/generator";
 import { AstroIntegration } from "astro";
-import { HTMLAttributes, HTMLTag } from "astro/types";
+export * from "@getvitops/utils";
 
 //#region src/integration.d.ts
 interface GetvitopsFaviconOptions {
@@ -31,122 +30,5 @@ interface GetvitopsOptions {
 }
 declare function getvitops(opts?: GetvitopsOptions): AstroIntegration;
 //#endregion
-//#region types.d.ts
-/** A translatable value: a plain string, or a locale → string map. */
-type Localizable = string | Record<string, string>;
-/**
- * An HTML attribute bag. `class` may be a string or a class:list-style array
- * (falsy entries dropped); everything else is passed through to the element.
- */
-interface Attrs {
-  class?: string | (string | false | null | undefined)[];
-  [attr: string]: unknown;
-}
-/** An image reference used by image links. */
-interface ImageRef {
-  src: string;
-  alt?: Localizable;
-  [key: string]: unknown;
-}
-/** A link with a text label. */
-interface TextLink {
-  label: Localizable;
-  href: string;
-  attrs?: Attrs;
-  [key: string]: unknown;
-}
-/** A link whose content is an image. */
-interface ImageLink {
-  image: ImageRef;
-  href: string;
-  attrs?: Attrs;
-  [key: string]: unknown;
-}
-/** Any link — text or image. */
-type Link = TextLink | ImageLink;
-/**
- * A generic content element wrapper (discriminated by `type: 'element'`),
- * carrying a payload `T` rendered as `Tag`.
- */
-interface Elmnt<T = unknown, Tag extends HTMLTag = 'div'> {
-  type: 'element';
-  tag?: Tag;
-  attrs?: Attrs;
-  content?: T;
-  [key: string]: unknown;
-}
-/**
- * A renderable node tree — a text string (Localizable) or an element with
- * optional attrs and either `text` shorthand or `children`.
- */
-type ContentNode = string | {
-  tag: string;
-  attrs?: Attrs;
-  text?: Localizable;
-  children?: ContentNode[];
-};
-//#endregion
-//#region src/html.d.ts
-type ChildNode = DefaultTreeAdapterTypes.ChildNode;
-declare function parseRenderedSlots(html: string): ChildNode[];
-declare function getAttribute(node: ChildNode, attrName: string): string | null;
-declare function serialize(nodes: ChildNode | ChildNode[]): string[];
-/**
- * Style value types that can be combined. StyleObject is structurally
- * compatible with astroHTML.JSX.CSSProperties (camelCase or --custom-prop keys).
- */
-type StyleObject = Record<string, string | number | null | undefined>;
-type StyleValue = string | StyleObject | null | undefined;
-type StyleList = StyleValue | StyleValue[];
-/**
- * Combine multiple style formats into a single CSS string
- * Similar to Astro's class:list but for inline styles
- */
-declare function styleList(...styles: StyleList[]): string;
-/**
- * Element descriptor matching the El interface from env.d.ts
- */
-interface El<Tag extends HTMLTag = HTMLTag> {
-  text: string;
-  tag: Tag;
-  attributes?: HTMLAttributes<Tag>;
-}
-/**
- * Normalize a string or El object into an HTML string for use with set:html
- */
-declare function toHtml<Tag extends HTMLTag>(content: string | El<Tag>): string;
-/**
- * Render an array of ContentNodes to an HTML string.
- *
- * @param nodes - Array of element nodes and/or text strings
- * @param resolveText - Optional function to resolve Localizable values.
- *   Defaults to returning strings as-is and first locale value for maps.
- */
-declare function nodesToHtml(nodes: ContentNode[], resolveText?: (value: Localizable) => string): string;
-//#endregion
-//#region src/types.d.ts
-declare function isElmnt<T, Tag extends HTMLTag = 'div'>(item: any): item is Elmnt<T, Tag>;
-declare function isLink(item: any): item is Link;
-declare function isTextLink(item: any): item is TextLink;
-declare function isImageLink(item: any): item is ImageLink;
-//#endregion
-//#region src/parts.d.ts
-/**
- * Resolve per-part attrs from a presentation type config.
- * For the 'root' part, merges legacy `attrs` with `parts.root` (backward compat).
- */
-declare function partAttrs(present: {
-  attrs?: Attrs;
-  parts?: Record<string, Attrs>;
-} | undefined, part: string): Attrs;
-//#endregion
-//#region src/i18n.d.ts
-/**
- * Resolve a Localizable value to a string for the given locale.
- * If the value is a plain string, it is returned as-is (treated as defaultLocale).
- * If it is a locale map, the best match is returned.
- */
-declare function t(value: Localizable | undefined, locale: string, defaultLocale: string): string;
-//#endregion
-export { Attrs, ChildNode, ContentNode, El, Elmnt, type GetvitopsCssOptions, type GetvitopsFaviconOptions, type GetvitopsOptions, ImageLink, ImageRef, Link, Localizable, StyleList, StyleValue, TextLink, getvitops as default, getAttribute, isElmnt, isImageLink, isLink, isTextLink, nodesToHtml, parseRenderedSlots, partAttrs, serialize, styleList, t, toHtml };
+export { type GetvitopsCssOptions, type GetvitopsFaviconOptions, type GetvitopsOptions, getvitops as default };
 //# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../src/integration.ts","../types.ts","../src/html.ts","../src/types.ts","../src/parts.ts","../src/i18n.ts"],"mappings":";;;;;;UAuBiB,uBAAA;;EAEf,MAAA;EACA,YAAA;EAHe;EAKf,IAAA;;EAEA,UAAA;EACA,eAAA;AAAA;AAAA,UAGe,mBAAA;EAJf;EAMA,KAAA;EALe;EAOf,MAAA,GAAS,MAAM;EAJA;EAMf,GAAA;AAAA;AAAA,UAGe,gBAAA;EACf,OAAA,GAAU,uBAAA;EANV;EAQA,aAAA;EANA;EAQA,GAAA,GAAM,mBAAmB;AAAA;AAAA,iBA0BH,SAAA,CAAU,IAAA,GAAM,gBAAA,GAAwB,gBAAgB;;;;KC/DpE,WAAA,YAAuB,MAAM;;;;;UAMxB,KAAA;EACf,KAAA;EAAA,CACC,IAAY;AAAA;;UAIE,QAAA;EACf,GAAA;EACA,GAAA,GAAM,WAAW;EAAA,CAChB,GAAA;AAAA;;UAIc,QAAA;EACf,KAAA,EAAO,WAAA;EACP,IAAA;EACA,KAAA,GAAQ,KAAK;EAAA,CACZ,GAAA;AAAA;;UAIc,SAAA;EACf,KAAA,EAAO,QAAA;EACP,IAAA;EACA,KAAA,GAAQ,KAAK;EAAA,CACZ,GAAA;AAAA;;KAIS,IAAA,GAAO,QAAA,GAAW,SAAS;;;;;UAMtB,KAAA,0BAA+B,OAAA;EAC9C,IAAA;EACA,GAAA,GAAM,GAAA;EACN,KAAA,GAAQ,KAAA;EACR,OAAA,GAAU,CAAA;EAAA,CACT,GAAA;AAAA;;;AA9CsC;AAMzC;KA+CY,WAAA;EAGN,GAAA;EACA,KAAA,GAAQ,KAAA;EACR,IAAA,GAAO,WAAA;EACP,QAAA,GAAW,WAAA;AAAA;;;KClEL,SAAA,GAAY,uBAAA,CAAwB,SAAS;AAAA,iBAEzC,kBAAA,CAAmB,IAAA,WAAe,SAAS;AAAA,iBAK3C,YAAA,CAAa,IAAA,EAAM,SAAS,EAAE,QAAA;AAAA,iBAQ9B,SAAA,CAAU,KAAA,EAAO,SAAA,GAAY,SAAS;;;;;KAUjD,WAAA,GAAc,MAAM;AAAA,KACb,UAAA,YAAsB,WAAW;AAAA,KACjC,SAAA,GAAY,UAAA,GAAa,UAAU;;;AFA9B;AAGjB;iBEiBgB,SAAA,IAAa,MAAA,EAAQ,SAAS;;;;UAuB7B,EAAA,aAAe,OAAA,GAAU,OAAA;EACxC,IAAA;EACA,GAAA,EAAK,GAAA;EACL,UAAA,GAAa,cAAA,CAAe,GAAA;AAAA;AFlC9B;;;AAAA,iBE2EgB,MAAA,aAAmB,OAAA,EAAS,OAAA,WAAkB,EAAA,CAAG,GAAA;;;;;;;AFtEtC;iBEwJX,WAAA,CACd,KAAA,EAAO,WAAA,IACP,WAAA,IAAc,KAAA,EAAO,WAAW;;;iBCvMlB,OAAA,gBAAuB,OAAA,UAAiB,IAAA,QAAY,IAAA,IAAQ,KAAA,CAAM,CAAA,EAAG,GAAA;AAAA,iBAIrE,MAAA,CAAO,IAAA,QAAY,IAAA,IAAQ,IAAI;AAAA,iBAI/B,UAAA,CAAW,IAAA,QAAY,IAAA,IAAQ,QAAQ;AAAA,iBAIvC,WAAA,CAAY,IAAA,QAAY,IAAA,IAAQ,SAAS;;;;;;;iBCTzC,SAAA,CACd,OAAA;EAAW,KAAA,GAAQ,KAAA;EAAO,KAAA,GAAQ,MAAA,SAAe,KAAA;AAAA,eACjD,IAAA,WACC,KAAA;;;;;;;;iBCFa,CAAA,CACd,KAAA,EAAO,WAAW,cAClB,MAAA,UACA,aAAA"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/integration.ts"],"mappings":";;;;;UAuBiB,uBAAA;;EAEf,MAAA;EACA,YAAA;EAHe;EAKf,IAAA;;EAEA,UAAA;EACA,eAAA;AAAA;AAAA,UAGe,mBAAA;EAJf;EAMA,KAAA;EALe;EAOf,MAAA,GAAS,MAAM;EAJA;EAMf,GAAA;AAAA;AAAA,UAGe,gBAAA;EACf,OAAA,GAAU,uBAAA;EANV;EAQA,aAAA;EANA;EAQA,GAAA,GAAM,mBAAmB;AAAA;AAAA,iBA0BH,SAAA,CAAU,IAAA,GAAM,gBAAA,GAAwB,gBAAgB"}

package/dist/index.mjs

@@ -4,7 +4,8 @@ import { fileURLToPath } from "node:url";
 import { faviconLinks, generateFavicons, writeFaviconManifest } from "@getvitops/utils";
 import vitops from "@getvitops/vite";
 import tailwindcss from "@tailwindcss/vite";
-import { parseFragment, serialize as serialize$1 } from "parse5";
+
+export * from "@getvitops/utils"
 
 //#region src/integration.ts
 /**
@@ -99,184 +100,5 @@ function getvitops(opts = {}) {
 }
 
 //#endregion
-//#region src/html.ts
-function parseRenderedSlots(html) {
-	return parseFragment(html).childNodes;
-}
-function getAttribute(node, attrName) {
-	if ("attrs" in node) {
-		const attr = node.attrs.find((a) => a.name === attrName);
-		return attr ? attr.value : null;
-	}
-	return null;
-}
-function serialize(nodes) {
-	return (Array.isArray(nodes) ? nodes : [nodes]).map((node) => serialize$1(node));
-}
-/**
-* Convert camelCase to kebab-case, preserving CSS custom properties (--var-name)
-*/
-function toKebabCase(str) {
-	if (str.startsWith("--")) return str;
-	return str.replace(/([A-Z])/g, "-$1").toLowerCase();
-}
-function styleObjectToString(obj) {
-	return Object.entries(obj).filter(([, value]) => value != null).map(([key, value]) => `${toKebabCase(key)}: ${value}`).join("; ");
-}
-/**
-* Combine multiple style formats into a single CSS string
-* Similar to Astro's class:list but for inline styles
-*/
-function styleList(...styles) {
-	const result = [];
-	const process = (item) => {
-		if (item == null) return;
-		if (Array.isArray(item)) item.forEach(process);
-		else if (typeof item === "string") {
-			const trimmed = item.trim();
-			if (trimmed) result.push(trimmed);
-		} else {
-			const str = styleObjectToString(item);
-			if (str) result.push(str);
-		}
-	};
-	styles.forEach(process);
-	return result.join("; ");
-}
-/**
-* Type guard to check if a value is an El object
-*/
-function isEl(value) {
-	return typeof value === "object" && value !== null && "tag" in value && "text" in value;
-}
-/**
-* Convert HTML attributes object to a string for use in markup
-*/
-function attributesToString(attrs) {
-	const parts = [];
-	for (const [key, value] of Object.entries(attrs)) {
-		if (value == null || value === false) continue;
-		if (value === true) parts.push(key);
-		else if (key === "style" && typeof value === "object") parts.push(`style="${styleList(value)}"`);
-		else {
-			const escaped = (Array.isArray(value) ? value.filter((v) => typeof v === "string" && v !== "").join(" ") : typeof value === "object" ? JSON.stringify(value) : String(value)).replace(/"/g, """);
-			parts.push(`${key}="${escaped}"`);
-		}
-	}
-	return parts.join(" ");
-}
-/**
-* Normalize a string or El object into an HTML string for use with set:html
-*/
-function toHtml(content) {
-	if (!isEl(content)) return content;
-	const { tag, text, attributes } = content;
-	const attrStr = attributes ? attributesToString(attributes) : "";
-	const t = String(tag);
-	return attrStr ? `<${t} ${attrStr}>${text}</${t}>` : `<${t}>${text}</${t}>`;
-}
-/** Void elements that must not have a closing tag */
-const VOID_ELEMENTS = new Set([
-	"area",
-	"base",
-	"br",
-	"col",
-	"embed",
-	"hr",
-	"img",
-	"input",
-	"link",
-	"meta",
-	"param",
-	"source",
-	"track",
-	"wbr"
-]);
-/** Default text resolver — strings pass through, locale maps return first value */
-function defaultResolveText(value) {
-	if (typeof value === "string") return value;
-	return Object.values(value)[0] ?? "";
-}
-/** Escape text content for safe HTML output */
-function escapeHtml(text) {
-	return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-}
-/**
-* Render a single ContentNode to an HTML string.
-*/
-function nodeToHtml(node, resolveText) {
-	if (typeof node === "string") return escapeHtml(resolveText(node));
-	const { tag, attrs, text, children } = node;
-	const attrStr = attrs ? attributesToString(attrs) : "";
-	const open = attrStr ? `<${tag} ${attrStr}>` : `<${tag}>`;
-	if (VOID_ELEMENTS.has(tag)) return open;
-	let inner = "";
-	if (text != null) inner = escapeHtml(resolveText(text));
-	else if (children?.length) inner = children.map((child) => nodeToHtml(child, resolveText)).join("");
-	return `${open}${inner}</${tag}>`;
-}
-/**
-* Render an array of ContentNodes to an HTML string.
-*
-* @param nodes - Array of element nodes and/or text strings
-* @param resolveText - Optional function to resolve Localizable values.
-*   Defaults to returning strings as-is and first locale value for maps.
-*/
-function nodesToHtml(nodes, resolveText = defaultResolveText) {
-	return nodes.map((node) => nodeToHtml(node, resolveText)).join("");
-}
-
-//#endregion
-//#region src/types.ts
-function isElmnt(item) {
-	return item && item.type === "element";
-}
-function isLink(item) {
-	return item && ("label" in item || "image" in item) && "href" in item;
-}
-function isTextLink(item) {
-	return item && "label" in item && "href" in item;
-}
-function isImageLink(item) {
-	return item && "image" in item && "href" in item;
-}
-
-//#endregion
-//#region src/parts.ts
-/**
-* Resolve per-part attrs from a presentation type config.
-* For the 'root' part, merges legacy `attrs` with `parts.root` (backward compat).
-*/
-function partAttrs(present, part) {
-	const fromParts = present?.parts?.[part];
-	if (part === "root") {
-		const legacy = present?.attrs;
-		if (!legacy && !fromParts) return {};
-		const { class: lc, ...lr } = legacy ?? {};
-		const { class: pc, ...pr } = fromParts ?? {};
-		const classes = [lc, pc].flat().filter((c) => typeof c === "string" && c !== "");
-		return {
-			...classes.length ? { class: classes } : {},
-			...lr,
-			...pr
-		};
-	}
-	return fromParts ?? {};
-}
-
-//#endregion
-//#region src/i18n.ts
-/**
-* Resolve a Localizable value to a string for the given locale.
-* If the value is a plain string, it is returned as-is (treated as defaultLocale).
-* If it is a locale map, the best match is returned.
-*/
-function t(value, locale, defaultLocale) {
-	if (value == null) return "";
-	if (typeof value === "string") return value;
-	return value[locale] ?? value[defaultLocale] ?? "";
-}
-
-//#endregion
-export { getvitops as default, getAttribute, isElmnt, isImageLink, isLink, isTextLink, nodesToHtml, parseRenderedSlots, partAttrs, serialize, styleList, t, toHtml };
+export { getvitops as default };
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["s"],"sources":["../src/integration.ts","../src/html.ts","../src/types.ts","../src/parts.ts","../src/i18n.ts"],"sourcesContent":["/**\n * @getvitops/astro — the Astro integration. One entry wires the design system's\n * `<head>` contributions into a consumer site:\n *   - favicons + PWA manifest (generated into public/),\n *   - the web-component runtime bundles (copied into public/vitops/),\n *   - (opt-in) the design-system CSS, generated + auto-injected (no manual import).\n * The `<Head />` component (shipped alongside) renders the tags, reading resolved\n * config from the `virtual:getvitops/head` module this integration provides.\n */\nimport { cpSync, existsSync } from 'node:fs';\nimport { dirname, join, resolve } from 'node:path';\nimport { fileURLToPath } from 'node:url';\nimport type { Format } from '@getvitops/generator';\nimport {\n  type FaviconLink,\n  faviconLinks,\n  generateFavicons,\n  writeFaviconManifest,\n} from '@getvitops/utils';\nimport vitops from '@getvitops/vite';\nimport tailwindcss from '@tailwindcss/vite';\nimport type { AstroIntegration } from 'astro';\n\nexport interface GetvitopsFaviconOptions {\n  /** Source SVG or PNG. */\n  source: string;\n  lowResSource?: string;\n  /** App name → enables `site.webmanifest`. */\n  name?: string;\n  /** PWA theme color (also `<meta name=\"theme-color\">`). */\n  themeColor?: string;\n  backgroundColor?: string;\n}\n\nexport interface GetvitopsCssOptions {\n  /** Path to design-system.json (default 'design-system.json'). */\n  input?: string;\n  /** Output format (default 'tailwind'). */\n  format?: Format;\n  /** Directory the generated CSS is written to (default 'src/styles'). */\n  out?: string;\n}\n\nexport interface GetvitopsOptions {\n  favicon?: GetvitopsFaviconOptions;\n  /** Copy + link the web-component bundles (default true). */\n  webComponents?: boolean;\n  /** Generate + auto-inject the design-system CSS. Off unless provided. */\n  css?: GetvitopsCssOptions;\n}\n\ninterface HeadData {\n  favicons: boolean;\n  faviconLinks: FaviconLink[];\n  themeColor: string | null;\n  webComponents: boolean;\n  wcBase: string;\n}\n\nconst VIRTUAL_ID = 'virtual:getvitops/head';\nconst RESOLVED_ID = `\\0${VIRTUAL_ID}`;\n\nfunction virtualHeadPlugin(data: HeadData) {\n  return {\n    name: '@getvitops/astro:virtual-head',\n    resolveId(id: string) {\n      return id === VIRTUAL_ID ? RESOLVED_ID : null;\n    },\n    load(id: string) {\n      return id === RESOLVED_ID ? `export default ${JSON.stringify(data)};` : null;\n    },\n  };\n}\n\nexport default function getvitops(opts: GetvitopsOptions = {}): AstroIntegration {\n  return {\n    name: '@getvitops/astro',\n    hooks: {\n      'astro:config:setup': async ({ config, updateConfig, injectScript, logger }) => {\n        const root = fileURLToPath(config.root);\n        const publicDir = fileURLToPath(config.publicDir);\n        const webComponents = opts.webComponents !== false;\n        const hasManifest = !!(opts.favicon?.name && opts.favicon?.themeColor);\n        let hasSvg = false;\n\n        // 1. Favicons + manifest → public/\n        if (opts.favicon) {\n          const source = resolve(root, opts.favicon.source);\n          hasSvg = source.endsWith('.svg');\n          await generateFavicons({\n            source,\n            outputDir: publicDir,\n            ...(opts.favicon.lowResSource\n              ? { lowResSource: resolve(root, opts.favicon.lowResSource) }\n              : {}),\n          });\n          if (opts.favicon.name && opts.favicon.themeColor) {\n            await writeFaviconManifest(publicDir, {\n              name: opts.favicon.name,\n              themeColor: opts.favicon.themeColor,\n              ...(opts.favicon.backgroundColor\n                ? { backgroundColor: opts.favicon.backgroundColor }\n                : {}),\n            });\n          }\n          logger.info('generated favicons + manifest → public/');\n        }\n\n        // 2. Web-component bundles → public/vitops/\n        if (webComponents) {\n          const corePkg = fileURLToPath(import.meta.resolve('@getvitops/core/package.json'));\n          const coreDist = join(dirname(corePkg), 'dist');\n          const dest = join(publicDir, 'vitops');\n          if (existsSync(coreDist)) {\n            for (const f of ['polyfills.js', 'deferred.js', 'elements.js', 'polyfills']) {\n              const src = join(coreDist, f);\n              if (existsSync(src)) cpSync(src, join(dest, f), { recursive: true });\n            }\n            logger.info('copied web-component bundles → public/vitops/');\n          } else {\n            logger.warn(\n              `@getvitops/core dist not found (${coreDist}); run build:core. Skipping WC copy.`,\n            );\n          }\n        }\n\n        // 3. Virtual head module for <Head/>\n        updateConfig({\n          vite: {\n            plugins: [\n              virtualHeadPlugin({\n                favicons: !!opts.favicon,\n                faviconLinks: opts.favicon ? faviconLinks({ hasSvg, manifest: hasManifest }) : [],\n                themeColor: opts.favicon?.themeColor ?? null,\n                webComponents,\n                wcBase: '/vitops',\n              }),\n            ],\n          },\n        });\n\n        // 4. CSS — generate + compile + auto-inject (consumer imports nothing).\n        if (opts.css) {\n          const format: Format = opts.css.format ?? 'tailwind';\n          const out = opts.css.out ?? 'src/styles';\n          const plugins = [vitops({ input: opts.css.input ?? 'design-system.json', format, out })];\n          // tailwindcss() is typed against a newer vite than @getvitops/vite's\n          // peer; the Plugin shapes are structurally compatible at runtime\n          // (Astro forwards them verbatim), so bridge the two type identities.\n          if (format === 'tailwind') plugins.push(...(tailwindcss() as unknown as typeof plugins));\n          updateConfig({ vite: { plugins } });\n          const cssFile = format === 'tailwind' ? 'tailwind.css' : 'styles.css';\n          const cssPath = resolve(root, out, cssFile);\n          injectScript('page-ssr', `import ${JSON.stringify(cssPath)};`);\n          logger.info(`design-system CSS (${format}) auto-injected from ${out}/${cssFile}`);\n        }\n      },\n    },\n  };\n}\n","import { parseFragment, serialize as s, type DefaultTreeAdapterTypes } from 'parse5';\nimport type { HTMLTag, HTMLAttributes } from 'astro/types';\nimport type { Localizable, ContentNode } from '../types.js';\n\nexport type ChildNode = DefaultTreeAdapterTypes.ChildNode;\n\nexport function parseRenderedSlots(html: string): ChildNode[] {\n  const document = parseFragment(html);\n  return document.childNodes;\n}\n\nexport function getAttribute(node: ChildNode, attrName: string): string | null {\n  if ('attrs' in node) {\n    const attr = node.attrs.find((a) => a.name === attrName);\n    return attr ? attr.value : null;\n  }\n  return null;\n}\n\nexport function serialize(nodes: ChildNode | ChildNode[]): string[] {\n  return (Array.isArray(nodes) ? nodes : [nodes]).map((node) =>\n    s(node as DefaultTreeAdapterTypes.ParentNode),\n  );\n}\n\n/**\n * Style value types that can be combined. StyleObject is structurally\n * compatible with astroHTML.JSX.CSSProperties (camelCase or --custom-prop keys).\n */\ntype StyleObject = Record<string, string | number | null | undefined>;\nexport type StyleValue = string | StyleObject | null | undefined;\nexport type StyleList = StyleValue | StyleValue[];\n\n/**\n * Convert camelCase to kebab-case, preserving CSS custom properties (--var-name)\n */\nfunction toKebabCase(str: string): string {\n  if (str.startsWith('--')) return str;\n  return str.replace(/([A-Z])/g, '-$1').toLowerCase();\n}\nfunction styleObjectToString(obj: StyleObject): string {\n  return Object.entries(obj)\n    .filter(([, value]) => value != null)\n    .map(([key, value]) => `${toKebabCase(key)}: ${value}`)\n    .join('; ');\n}\n\n/**\n * Combine multiple style formats into a single CSS string\n * Similar to Astro's class:list but for inline styles\n */\nexport function styleList(...styles: StyleList[]): string {\n  const result: string[] = [];\n\n  const process = (item: StyleList): void => {\n    if (item == null) return;\n    if (Array.isArray(item)) {\n      item.forEach(process);\n    } else if (typeof item === 'string') {\n      const trimmed = item.trim();\n      if (trimmed) result.push(trimmed);\n    } else {\n      const str = styleObjectToString(item as StyleObject);\n      if (str) result.push(str);\n    }\n  };\n\n  styles.forEach(process);\n  return result.join('; ');\n}\n\n/**\n * Element descriptor matching the El interface from env.d.ts\n */\nexport interface El<Tag extends HTMLTag = HTMLTag> {\n  text: string;\n  tag: Tag;\n  attributes?: HTMLAttributes<Tag>;\n}\n\n/**\n * Type guard to check if a value is an El object\n */\nfunction isEl(value: string | El): value is El {\n  return typeof value === 'object' && value !== null && 'tag' in value && 'text' in value;\n}\n\n/**\n * Convert HTML attributes object to a string for use in markup\n */\nfunction attributesToString(attrs: Record<string, unknown>): string {\n  const parts: string[] = [];\n\n  for (const [key, value] of Object.entries(attrs)) {\n    if (value == null || value === false) continue;\n    if (value === true) {\n      parts.push(key);\n    } else if (key === 'style' && typeof value === 'object') {\n      parts.push(`style=\"${styleList(value as StyleValue)}\"`);\n    } else {\n      // Class:list arrays join like Astro; other objects stringify as JSON\n      // (never \"[object Object]\"). Escape double quotes for the attribute.\n      const text = Array.isArray(value)\n        ? value.filter((v): v is string => typeof v === 'string' && v !== '').join(' ')\n        : typeof value === 'object'\n          ? JSON.stringify(value)\n          : String(value as string | number | boolean);\n      const escaped = text.replace(/\"/g, '&quot;');\n      parts.push(`${key}=\"${escaped}\"`);\n    }\n  }\n\n  return parts.join(' ');\n}\n\n/**\n * Normalize a string or El object into an HTML string for use with set:html\n */\nexport function toHtml<Tag extends HTMLTag>(content: string | El<Tag>): string {\n  if (!isEl(content)) {\n    return content;\n  }\n\n  const { tag, text, attributes } = content;\n  const attrStr = attributes ? attributesToString(attributes) : '';\n  // HTMLTag is a key type (string | number | symbol to tsc) — stringify for templates.\n  const t = String(tag);\n\n  return attrStr ? `<${t} ${attrStr}>${text}</${t}>` : `<${t}>${text}</${t}>`;\n}\n\n// ---------------------------------------------------------------------------\n// Node tree renderer — { tag, attrs, children }\n// ---------------------------------------------------------------------------\n\n/** Void elements that must not have a closing tag */\nconst VOID_ELEMENTS = new Set([\n  'area',\n  'base',\n  'br',\n  'col',\n  'embed',\n  'hr',\n  'img',\n  'input',\n  'link',\n  'meta',\n  'param',\n  'source',\n  'track',\n  'wbr',\n]);\n\n/** Default text resolver — strings pass through, locale maps return first value */\nfunction defaultResolveText(value: Localizable): string {\n  if (typeof value === 'string') return value;\n  const values = Object.values(value);\n  return values[0] ?? '';\n}\n\n/** Escape text content for safe HTML output */\nfunction escapeHtml(text: string): string {\n  return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');\n}\n\n/**\n * Render a single ContentNode to an HTML string.\n */\nfunction nodeToHtml(node: ContentNode, resolveText: (value: Localizable) => string): string {\n  // String child → text node\n  if (typeof node === 'string') {\n    return escapeHtml(resolveText(node));\n  }\n\n  const { tag, attrs, text, children } = node;\n  const attrStr = attrs ? attributesToString(attrs) : '';\n  const open = attrStr ? `<${tag} ${attrStr}>` : `<${tag}>`;\n\n  if (VOID_ELEMENTS.has(tag)) {\n    return open;\n  }\n\n  // text is shorthand for children: [\"string\"]\n  let inner = '';\n  if (text != null) {\n    inner = escapeHtml(resolveText(text));\n  } else if (children?.length) {\n    inner = children.map((child) => nodeToHtml(child, resolveText)).join('');\n  }\n\n  return `${open}${inner}</${tag}>`;\n}\n\n/**\n * Render an array of ContentNodes to an HTML string.\n *\n * @param nodes - Array of element nodes and/or text strings\n * @param resolveText - Optional function to resolve Localizable values.\n *   Defaults to returning strings as-is and first locale value for maps.\n */\nexport function nodesToHtml(\n  nodes: ContentNode[],\n  resolveText: (value: Localizable) => string = defaultResolveText,\n): string {\n  return nodes.map((node) => nodeToHtml(node, resolveText)).join('');\n}\n","import type { Elmnt, Link, TextLink, ImageLink } from '../types.js';\nimport type { HTMLTag } from 'astro/types';\n\nexport function isElmnt<T, Tag extends HTMLTag = 'div'>(item: any): item is Elmnt<T, Tag> {\n  return item && item.type === 'element';\n}\n\nexport function isLink(item: any): item is Link {\n  return item && ('label' in item || 'image' in item) && 'href' in item;\n}\n\nexport function isTextLink(item: any): item is TextLink {\n  return item && 'label' in item && 'href' in item;\n}\n\nexport function isImageLink(item: any): item is ImageLink {\n  return item && 'image' in item && 'href' in item;\n}\n","import type { Attrs } from '../types.js';\n\n/**\n * Resolve per-part attrs from a presentation type config.\n * For the 'root' part, merges legacy `attrs` with `parts.root` (backward compat).\n */\nexport function partAttrs(\n  present: { attrs?: Attrs; parts?: Record<string, Attrs> } | undefined,\n  part: string,\n): Attrs {\n  const fromParts = present?.parts?.[part];\n  if (part === 'root') {\n    const legacy = present?.attrs;\n    if (!legacy && !fromParts) return {};\n    const { class: lc, ...lr } = legacy ?? {};\n    const { class: pc, ...pr } = fromParts ?? {};\n    // Flatten class:list-style values and keep only real class strings.\n    const classes = [lc, pc].flat().filter((c): c is string => typeof c === 'string' && c !== '');\n    return {\n      ...(classes.length ? { class: classes } : {}),\n      ...lr,\n      ...pr,\n    };\n  }\n  return fromParts ?? {};\n}\n","import type { Localizable } from '../types.js';\n\n/**\n * Resolve a Localizable value to a string for the given locale.\n * If the value is a plain string, it is returned as-is (treated as defaultLocale).\n * If it is a locale map, the best match is returned.\n */\nexport function t(\n  value: Localizable | undefined,\n  locale: string,\n  defaultLocale: string,\n): string {\n  if (value == null) return '';\n  if (typeof value === 'string') return value;\n  return value[locale] ?? value[defaultLocale] ?? '';\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/integration.ts"],"sourcesContent":["/**\n * @getvitops/astro — the Astro integration. One entry wires the design system's\n * `<head>` contributions into a consumer site:\n *   - favicons + PWA manifest (generated into public/),\n *   - the web-component runtime bundles (copied into public/vitops/),\n *   - (opt-in) the design-system CSS, generated + auto-injected (no manual import).\n * The `<Head />` component (shipped alongside) renders the tags, reading resolved\n * config from the `virtual:getvitops/head` module this integration provides.\n */\nimport { cpSync, existsSync } from 'node:fs';\nimport { dirname, join, resolve } from 'node:path';\nimport { fileURLToPath } from 'node:url';\nimport type { Format } from '@getvitops/generator';\nimport {\n  type FaviconLink,\n  faviconLinks,\n  generateFavicons,\n  writeFaviconManifest,\n} from '@getvitops/utils';\nimport vitops from '@getvitops/vite';\nimport tailwindcss from '@tailwindcss/vite';\nimport type { AstroIntegration } from 'astro';\n\nexport interface GetvitopsFaviconOptions {\n  /** Source SVG or PNG. */\n  source: string;\n  lowResSource?: string;\n  /** App name → enables `site.webmanifest`. */\n  name?: string;\n  /** PWA theme color (also `<meta name=\"theme-color\">`). */\n  themeColor?: string;\n  backgroundColor?: string;\n}\n\nexport interface GetvitopsCssOptions {\n  /** Path to design-system.json (default 'design-system.json'). */\n  input?: string;\n  /** Output format (default 'tailwind'). */\n  format?: Format;\n  /** Directory the generated CSS is written to (default 'src/styles'). */\n  out?: string;\n}\n\nexport interface GetvitopsOptions {\n  favicon?: GetvitopsFaviconOptions;\n  /** Copy + link the web-component bundles (default true). */\n  webComponents?: boolean;\n  /** Generate + auto-inject the design-system CSS. Off unless provided. */\n  css?: GetvitopsCssOptions;\n}\n\ninterface HeadData {\n  favicons: boolean;\n  faviconLinks: FaviconLink[];\n  themeColor: string | null;\n  webComponents: boolean;\n  wcBase: string;\n}\n\nconst VIRTUAL_ID = 'virtual:getvitops/head';\nconst RESOLVED_ID = `\\0${VIRTUAL_ID}`;\n\nfunction virtualHeadPlugin(data: HeadData) {\n  return {\n    name: '@getvitops/astro:virtual-head',\n    resolveId(id: string) {\n      return id === VIRTUAL_ID ? RESOLVED_ID : null;\n    },\n    load(id: string) {\n      return id === RESOLVED_ID ? `export default ${JSON.stringify(data)};` : null;\n    },\n  };\n}\n\nexport default function getvitops(opts: GetvitopsOptions = {}): AstroIntegration {\n  return {\n    name: '@getvitops/astro',\n    hooks: {\n      'astro:config:setup': async ({ config, updateConfig, injectScript, logger }) => {\n        const root = fileURLToPath(config.root);\n        const publicDir = fileURLToPath(config.publicDir);\n        const webComponents = opts.webComponents !== false;\n        const hasManifest = !!(opts.favicon?.name && opts.favicon?.themeColor);\n        let hasSvg = false;\n\n        // 1. Favicons + manifest → public/\n        if (opts.favicon) {\n          const source = resolve(root, opts.favicon.source);\n          hasSvg = source.endsWith('.svg');\n          await generateFavicons({\n            source,\n            outputDir: publicDir,\n            ...(opts.favicon.lowResSource\n              ? { lowResSource: resolve(root, opts.favicon.lowResSource) }\n              : {}),\n          });\n          if (opts.favicon.name && opts.favicon.themeColor) {\n            await writeFaviconManifest(publicDir, {\n              name: opts.favicon.name,\n              themeColor: opts.favicon.themeColor,\n              ...(opts.favicon.backgroundColor\n                ? { backgroundColor: opts.favicon.backgroundColor }\n                : {}),\n            });\n          }\n          logger.info('generated favicons + manifest → public/');\n        }\n\n        // 2. Web-component bundles → public/vitops/\n        if (webComponents) {\n          const corePkg = fileURLToPath(import.meta.resolve('@getvitops/core/package.json'));\n          const coreDist = join(dirname(corePkg), 'dist');\n          const dest = join(publicDir, 'vitops');\n          if (existsSync(coreDist)) {\n            for (const f of ['polyfills.js', 'deferred.js', 'elements.js', 'polyfills']) {\n              const src = join(coreDist, f);\n              if (existsSync(src)) cpSync(src, join(dest, f), { recursive: true });\n            }\n            logger.info('copied web-component bundles → public/vitops/');\n          } else {\n            logger.warn(\n              `@getvitops/core dist not found (${coreDist}); run build:core. Skipping WC copy.`,\n            );\n          }\n        }\n\n        // 3. Virtual head module for <Head/>\n        updateConfig({\n          vite: {\n            plugins: [\n              virtualHeadPlugin({\n                favicons: !!opts.favicon,\n                faviconLinks: opts.favicon ? faviconLinks({ hasSvg, manifest: hasManifest }) : [],\n                themeColor: opts.favicon?.themeColor ?? null,\n                webComponents,\n                wcBase: '/vitops',\n              }),\n            ],\n          },\n        });\n\n        // 4. CSS — generate + compile + auto-inject (consumer imports nothing).\n        if (opts.css) {\n          const format: Format = opts.css.format ?? 'tailwind';\n          const out = opts.css.out ?? 'src/styles';\n          const plugins = [vitops({ input: opts.css.input ?? 'design-system.json', format, out })];\n          // tailwindcss() is typed against a newer vite than @getvitops/vite's\n          // peer; the Plugin shapes are structurally compatible at runtime\n          // (Astro forwards them verbatim), so bridge the two type identities.\n          if (format === 'tailwind') plugins.push(...(tailwindcss() as unknown as typeof plugins));\n          updateConfig({ vite: { plugins } });\n          const cssFile = format === 'tailwind' ? 'tailwind.css' : 'styles.css';\n          const cssPath = resolve(root, out, cssFile);\n          injectScript('page-ssr', `import ${JSON.stringify(cssPath)};`);\n          logger.info(`design-system CSS (${format}) auto-injected from ${out}/${cssFile}`);\n        }\n      },\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA2DA,MAAM,aAAa;AACnB,MAAM,cAAc,KAAK;AAEzB,SAAS,kBAAkB,MAAgB;CACzC,OAAO;EACL,MAAM;EACN,UAAU,IAAY;GACpB,OAAO,OAAO,aAAa,cAAc;EAC3C;EACA,KAAK,IAAY;GACf,OAAO,OAAO,cAAc,kBAAkB,KAAK,UAAU,IAAI,EAAE,KAAK;EAC1E;CACF;AACF;AAEA,SAAwB,UAAU,OAAyB,CAAC,GAAqB;CAC/E,OAAO;EACL,MAAM;EACN,OAAO,EACL,sBAAsB,OAAO,EAAE,QAAQ,cAAc,cAAc,aAAa;GAC9E,MAAM,OAAO,cAAc,OAAO,IAAI;GACtC,MAAM,YAAY,cAAc,OAAO,SAAS;GAChD,MAAM,gBAAgB,KAAK,kBAAkB;GAC7C,MAAM,cAAc,CAAC,EAAE,KAAK,SAAS,QAAQ,KAAK,SAAS;GAC3D,IAAI,SAAS;GAGb,IAAI,KAAK,SAAS;IAChB,MAAM,SAAS,QAAQ,MAAM,KAAK,QAAQ,MAAM;IAChD,SAAS,OAAO,SAAS,MAAM;IAC/B,MAAM,iBAAiB;KACrB;KACA,WAAW;KACX,GAAI,KAAK,QAAQ,eACb,EAAE,cAAc,QAAQ,MAAM,KAAK,QAAQ,YAAY,EAAE,IACzD,CAAC;IACP,CAAC;IACD,IAAI,KAAK,QAAQ,QAAQ,KAAK,QAAQ,YACpC,MAAM,qBAAqB,WAAW;KACpC,MAAM,KAAK,QAAQ;KACnB,YAAY,KAAK,QAAQ;KACzB,GAAI,KAAK,QAAQ,kBACb,EAAE,iBAAiB,KAAK,QAAQ,gBAAgB,IAChD,CAAC;IACP,CAAC;IAEH,OAAO,KAAK,yCAAyC;GACvD;GAGA,IAAI,eAAe;IAEjB,MAAM,WAAW,KAAK,QADN,cAAc,OAAO,KAAK,QAAQ,8BAA8B,CAC5C,CAAC,GAAG,MAAM;IAC9C,MAAM,OAAO,KAAK,WAAW,QAAQ;IACrC,IAAI,WAAW,QAAQ,GAAG;KACxB,KAAK,MAAM,KAAK;MAAC;MAAgB;MAAe;MAAe;KAAW,GAAG;MAC3E,MAAM,MAAM,KAAK,UAAU,CAAC;MAC5B,IAAI,WAAW,GAAG,GAAG,OAAO,KAAK,KAAK,MAAM,CAAC,GAAG,EAAE,WAAW,KAAK,CAAC;KACrE;KACA,OAAO,KAAK,+CAA+C;IAC7D,OACE,OAAO,KACL,mCAAmC,SAAS,qCAC9C;GAEJ;GAGA,aAAa,EACX,MAAM,EACJ,SAAS,CACP,kBAAkB;IAChB,UAAU,CAAC,CAAC,KAAK;IACjB,cAAc,KAAK,UAAU,aAAa;KAAE;KAAQ,UAAU;IAAY,CAAC,IAAI,CAAC;IAChF,YAAY,KAAK,SAAS,cAAc;IACxC;IACA,QAAQ;GACV,CAAC,CACH,EACF,EACF,CAAC;GAGD,IAAI,KAAK,KAAK;IACZ,MAAM,SAAiB,KAAK,IAAI,UAAU;IAC1C,MAAM,MAAM,KAAK,IAAI,OAAO;IAC5B,MAAM,UAAU,CAAC,OAAO;KAAE,OAAO,KAAK,IAAI,SAAS;KAAsB;KAAQ;IAAI,CAAC,CAAC;IAIvF,IAAI,WAAW,YAAY,QAAQ,KAAK,GAAI,YAAY,CAA+B;IACvF,aAAa,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;IAClC,MAAM,UAAU,WAAW,aAAa,iBAAiB;IACzD,MAAM,UAAU,QAAQ,MAAM,KAAK,OAAO;IAC1C,aAAa,YAAY,UAAU,KAAK,UAAU,OAAO,EAAE,EAAE;IAC7D,OAAO,KAAK,sBAAsB,OAAO,uBAAuB,IAAI,GAAG,SAAS;GAClF;EACF,EACF;CACF;AACF"}

package/package.json

@@ -1,11 +1,18 @@
 {
   "name": "@getvitops/astro",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Astro integration for the Vitops design system — favicons/PWA, web-component scripts, and CSS, via a getvitops() integration + <Head /> component.",
   "license": "MIT",
   "files": [
     "dist",
     "src/components/Head.astro",
+    "src/components/Subgrid.astro",
+    "src/components/Cards.astro",
+    "src/components/NodeRenderer.astro",
+    "src/components/WebComponentLoader.astro",
+    "src/components/Popover.astro",
+    "src/components/Details.astro",
+    "src/components/Drawer.astro",
     "src/schemas",
     "virtual.d.ts"
   ],
@@ -17,6 +24,13 @@
       "import": "./dist/index.mjs"
     },
     "./Head.astro": "./src/components/Head.astro",
+    "./components/Subgrid.astro": "./src/components/Subgrid.astro",
+    "./components/Cards.astro": "./src/components/Cards.astro",
+    "./components/NodeRenderer.astro": "./src/components/NodeRenderer.astro",
+    "./components/WebComponentLoader.astro": "./src/components/WebComponentLoader.astro",
+    "./components/Popover.astro": "./src/components/Popover.astro",
+    "./components/Details.astro": "./src/components/Details.astro",
+    "./components/Drawer.astro": "./src/components/Drawer.astro",
     "./schemas/*": "./src/schemas/*",
     "./package.json": "./package.json"
   },
@@ -25,17 +39,22 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.3.3",
-    "parse5": "^7.3.0",
     "tailwindcss": "^4.3.3",
-    "@getvitops/core": "0.2.1",
-    "@getvitops/generator": "0.2.1",
-    "@getvitops/utils": "0.2.1",
-    "@getvitops/vite": "0.2.1"
+    "@getvitops/generator": "0.3.0",
+    "@getvitops/core": "0.3.0",
+    "@getvitops/vite": "0.3.0",
+    "@getvitops/utils": "0.3.0"
   },
   "devDependencies": {
     "astro": "^7.1.2"
   },
   "peerDependencies": {
-    "astro": ">=7"
+    "astro": ">=7",
+    "astro-icon": ">=1"
+  },
+  "peerDependenciesMeta": {
+    "astro-icon": {
+      "optional": true
+    }
   }
 }

package/src/components/Cards.astro

@@ -0,0 +1,32 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import Subgrid from './Subgrid.astro';
+import { parseRenderedSlots, serialize } from '@getvitops/utils';
+
+export interface Props extends HTMLAttributes<'ul'> {}
+
+const { class: className, ...rest } = Astro.props;
+
+const nodes = parseRenderedSlots(await Astro.slots.render('default'));
+const slots = nodes.filter(node => 'tagName' in node).map(node => {
+  const cls = node.attrs?.find(attr => attr.name === 'class');
+  const value = `card${cls ? ' ' + cls.value : ''}`;
+  if (cls) {
+    cls.value = value;
+  } else {
+    node.attrs.push({ name: 'class', value });
+  }
+  
+  return { html: serialize(node), attrs: node.attrs };
+});
+---
+
+<Subgrid
+  role="list"
+  class:list={["no-list-markers", className]}
+  {...rest}
+>
+  {slots.map((slot) => (
+    <li class="card-wrapper" style={slot.attrs?.find(attr => attr.name === 'style')?.value} set:html={slot.html}></li>
+  ))}
+</Subgrid>

package/src/components/Details.astro

@@ -0,0 +1,76 @@
+---
+import { Icon } from 'astro-icon/components';
+
+interface Item {
+  label: string;
+  href: string;
+  icon?: string;
+}
+
+interface Props {
+  label: string;
+  icon?: string;
+  items: Item[];
+  class?: string;
+  /** Resolve semantic icon names to fully-qualified astro-icon names.
+   *  Defaults to pass-through (expects already-qualified names like 'fa7-solid:chevron-down'). */
+  iconResolver?: (name: string) => string;
+}
+
+const {
+  label,
+  items,
+  class: className,
+  iconResolver = (name: string) => name,
+} = Astro.props;
+---
+
+<details class={`details-collapse ${className || ''}`}>
+  <summary class="details-trigger"><slot>
+    {label}
+    <Icon name={iconResolver('expand-more')} class="details-icon" /></slot>
+  </summary>
+  <slot name="content" />
+</details>
+
+<style>
+  .details-collapse {
+    --_details-icon-rotate: 180deg;
+    border: none;
+    padding: 0;
+  }
+
+  .details-trigger {
+    gap: 0.75rem;
+    background: none;
+    border: none;
+    padding: 0;
+    width: 100%;
+    text-align: left;
+    font-size: inherit;
+    font-family: inherit;
+    color: inherit;
+  }
+
+  .details-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+
+  .details-content {
+    list-style: none;
+    padding-left: 2rem;
+    margin-top: 0.75rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .details-content a {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    text-decoration: none;
+    color: inherit;
+  }
+</style>

package/src/components/Drawer.astro

@@ -0,0 +1,65 @@
+---
+import { Icon } from 'astro-icon/components';
+
+type Attrs = Record<string, string | number | boolean>;
+
+interface Props {
+  id: string;
+  position?: 'left' | 'right' | 'top' | 'bottom';
+  trigger?: {
+    label: string;
+    icon?: string;
+    class?: string;
+    attrs?: Attrs;
+  };
+  attrs?: Attrs;
+  class?: string;
+  maxWidth?: string;
+  maxHeight?: string;
+  /** Resolve semantic icon names to fully-qualified astro-icon names.
+   *  Defaults to pass-through (expects already-qualified names like 'fa7-solid:bars'). */
+  iconResolver?: (name: string) => string;
+}
+
+const {
+  id,
+  position = 'left',
+  trigger,
+  attrs,
+  class: className,
+  maxWidth,
+  maxHeight,
+  iconResolver = (name: string) => name,
+} = Astro.props;
+
+const styleVars = [
+  maxWidth && `--drawer-max-inline-size: ${maxWidth}`,
+  maxHeight && `--drawer-max-block-size: ${maxHeight}`,
+].filter(Boolean).join('; ') || undefined;
+
+const { class: triggerAttrClass, ...triggerRestAttrs } = trigger?.attrs ?? {};
+const { class: dialogAttrClass, style: dialogAttrStyle, ...dialogRestAttrs } = attrs ?? {};
+---
+
+<slot name="trigger">
+  <button
+    commandfor={id}
+    command="show-modal"
+    class:list={[trigger?.class || 'btn', triggerAttrClass]}
+    aria-label={trigger?.label || 'Open drawer'}
+    {...triggerRestAttrs}
+  >
+    <span class={trigger?.icon ? 'sr-only' : ''}>{trigger?.label || 'Open'}</span>
+    {trigger?.icon && <Icon name={iconResolver(trigger.icon)} class="not-sr-only" />}
+  </button>
+</slot>
+
+<dialog
+  id={id}
+  closedby="any"
+  class:list={['drawer', `drawer--${position}`, className, dialogAttrClass]}
+  style={[styleVars, dialogAttrStyle].filter(Boolean).join('; ') || undefined}
+  {...dialogRestAttrs}
+>
+  <slot />
+</dialog>

package/src/components/NodeRenderer.astro

@@ -0,0 +1,27 @@
+---
+import { nodesToHtml } from '@getvitops/utils';
+import { t } from '@getvitops/utils';
+import type { ContentNode, Localizable, Attrs } from '@getvitops/utils';
+
+interface Props {
+  nodes: ContentNode[];
+  attrs?: Attrs;
+  locale?: string;
+  defaultLocale?: string;
+}
+
+const {
+  nodes,
+  attrs,
+  locale = 'en',
+  defaultLocale = 'en',
+} = Astro.props;
+
+const resolveText = (value: Localizable) => t(value, locale, defaultLocale);
+const htmlString = nodesToHtml(nodes, resolveText);
+---
+
+{attrs
+  ? <div {...attrs} set:html={htmlString} />
+  : <Fragment set:html={htmlString} />
+}

package/src/components/Popover.astro

@@ -0,0 +1,90 @@
+---
+import { Icon } from 'astro-icon/components';
+
+interface Props {
+  id: string;
+  trigger?: {
+    label: string;
+    icon?: string;
+    class?: string;
+    attrs?: Record<string, string | number | boolean>;
+  };
+  type?: 'auto' | 'manual';
+  as?: 'div' | 'dialog';
+  class?: string;
+  anchorName?: string;
+  positionArea?: string;
+  /** Resolve semantic icon names to fully-qualified astro-icon names.
+   *  Defaults to pass-through (expects already-qualified names like 'fa7-solid:bars'). */
+  iconResolver?: (name: string) => string;
+}
+
+const {
+  id,
+  trigger,
+  type = 'auto',
+  as: Element = 'div',
+  class: className,
+  anchorName,
+  positionArea = 'block-end center',
+  iconResolver = (name: string) => name,
+} = Astro.props;
+
+const styles = anchorName
+  ? `position-anchor: --${anchorName}; position-area: ${positionArea}`
+  : undefined;
+
+const anchorStyles = anchorName ? `anchor-name: --${anchorName}` : undefined;
+
+const { class: triggerAttrClass, ...triggerRestAttrs } = trigger?.attrs ?? {};
+---
+
+{/* Trigger button - slot with default fallback */}
+<slot name="trigger">
+  <button
+    popovertarget={id}
+    class:list={['popover-trigger', trigger?.class, triggerAttrClass]}
+    style={anchorStyles}
+    aria-label={trigger?.label || 'Open'}
+    {...triggerRestAttrs}
+  >
+  <span class={trigger?.icon ? 'sr-only' : ''}>{trigger?.label || 'Open'}</span>
+    {trigger?.icon && <Icon name={iconResolver(trigger.icon)} class="not-sr-only" />}
+  </button>
+</slot>
+
+
+<Element
+  id={id}
+  popover={type}
+  class:list={["popover", className]}
+  style={styles}
+>
+  <slot />
+</Element>
+
+<style>
+  .popover {
+    margin: 0;
+    inset: auto;
+    border: none;
+    padding: 0;
+  }
+
+  .popover[popover]::backdrop {
+    background: rgba(0, 0, 0, 0.5);
+  }
+
+  .popover-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    font-size: inherit;
+    font-family: inherit;
+    color: inherit;
+  }
+</style>

package/src/components/Subgrid.astro

@@ -0,0 +1,32 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import { parseRenderedSlots, getAttribute, serialize, styleList } from '@getvitops/utils';
+
+export interface Props extends HTMLAttributes<'ul'> {};
+
+const { class: className, style } = Astro.props;
+
+const nodes = parseRenderedSlots(await Astro.slots.render('default'));
+const slots = nodes.filter(node => 'tagName' in node).map(node  => ({ html: serialize(node), attrs: node.attrs }));
+---
+
+<style>
+  ul {
+    grid-template-columns: repeat(var(--cols, var(--_cols, 1)), minmax(0, 1fr));
+  }
+
+  li {
+    --current-row: round(down, calc((sibling-index() - 1) / var(--cols)), 1);
+      
+      /* Apply the extra gap ONLY if the row index is > 0.
+         We use clamp to ensure the multiplier is either 0 or 1.
+      */
+      --row-gap-multiplier: clamp(0, var(--current-row), 1);
+      margin-block-start: calc(var(--row-gap-multiplier) * var(--row-margin));
+  }
+</style>
+<ul class:list={["grid", className]} style={styleList({'--num-items': slots.length}, style)}>
+  {slots.map((slot) => (
+    <li class:list={["grid grid-rows-subgrid row-span-(--row-span)", getAttribute(slot, 'class')]} style={styleList(getAttribute(slot, 'style'))} set:html={slot.html}></li>
+  ))}
+</ul>

package/src/components/WebComponentLoader.astro

@@ -0,0 +1,48 @@
+---
+/**
+ * Generic loader for web components.
+ * Uses import.meta.glob to include all WC*.ts files in the dependency graph,
+ * then dynamically loads the requested one on the client.
+ *
+ * @example
+ * <WebComponentLoader src="WCColorSchemeToggle" />
+ * <color-scheme-toggle></color-scheme-toggle>
+ */
+interface Props {
+  src: string;
+}
+
+const { src } = Astro.props;
+---
+
+<wc-loader data-src={src}></wc-loader>
+
+<script>
+  // All web components matching this pattern are included in the build
+  const modules = import.meta.glob<{ default?: unknown }>(
+    '/src/components/web-components/WC*.ts'
+  );
+
+  // Load requested modules
+  document.querySelectorAll<HTMLElement>('wc-loader[data-src]').forEach(async (el) => {
+    const name = el.dataset.src;
+    if (!name) return;
+
+    // Build the full path from the component name
+    const path = `/src/components/web-components/${name}.ts`;
+    const loader = modules[path];
+
+    if (loader) {
+      await loader();
+      el.remove(); // Clean up the loader element
+    } else {
+      console.warn(`[WebComponentLoader] Module not found: ${path}`);
+    }
+  });
+</script>
+
+<style>
+  wc-loader {
+    display: none;
+  }
+</style>