cortena-ui 1.3.0 → 1.4.0

package/dist/components/loading-skeleton.js

@@ -0,0 +1,123 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { Skeleton } from "./skeleton.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/loading-skeleton.tsx
+const DEFAULT_ROWS = {
+	list: 4,
+	table: 5,
+	card: 3,
+	form: 3
+};
+const DEFAULT_COLUMNS = {
+	list: 1,
+	table: 4,
+	card: 3,
+	form: 1
+};
+const LINE_WIDTHS = [
+	"w-3/4",
+	"w-1/2",
+	"w-5/6",
+	"w-2/3",
+	"w-3/5"
+];
+const width = (i) => LINE_WIDTHS[i % LINE_WIDTHS.length];
+function ListSkeleton({ rows }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "loading-skeleton-list",
+		className: "flex flex-col gap-4",
+		children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsxs("div", {
+			"data-slot": "loading-skeleton-row",
+			className: "flex items-center gap-3",
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "size-9 shrink-0 rounded-[var(--ds-radius-full)]" }), /* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 flex-col gap-2",
+				children: [/* @__PURE__ */ jsx(Skeleton, { className: cn("h-3.5", width(i)) }), /* @__PURE__ */ jsx(Skeleton, { className: cn("h-3", width(i + 2)) })]
+			})]
+		}, i))
+	});
+}
+function TableSkeleton({ rows, columns }) {
+	const grid = { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` };
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "loading-skeleton-table",
+		className: "flex flex-col",
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-slot": "loading-skeleton-row",
+			className: "grid gap-4 border-b border-[var(--ds-border-subtle)] px-3 py-3",
+			style: grid,
+			children: Array.from({ length: columns }, (_, c) => /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-1/2" }, c))
+		}), Array.from({ length: rows }, (_, r) => /* @__PURE__ */ jsx("div", {
+			"data-slot": "loading-skeleton-row",
+			className: "grid gap-4 border-b border-[var(--ds-border-subtle)] px-3 py-3.5 last:border-b-0",
+			style: grid,
+			children: Array.from({ length: columns }, (_, c) => /* @__PURE__ */ jsx(Skeleton, { className: cn("h-3.5", width(r + c)) }, c))
+		}, r))]
+	});
+}
+function CardSkeleton({ rows, columns }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "loading-skeleton-cards",
+		className: "grid gap-4",
+		style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
+		children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsxs("div", {
+			"data-slot": "loading-skeleton-card",
+			className: "flex flex-col gap-3 rounded-[var(--ds-radius-lg)] border border-[var(--ds-border-subtle)] bg-[var(--ds-card)] p-5",
+			children: [
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }),
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-3/4" }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "mt-2 flex flex-col gap-2",
+					children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-full" }), /* @__PURE__ */ jsx(Skeleton, { className: cn("h-3", width(i)) })]
+				})
+			]
+		}, i))
+	});
+}
+function FormSkeleton({ rows }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "loading-skeleton-form",
+		className: "flex max-w-xl flex-col gap-5",
+		children: [Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsxs("div", {
+			"data-slot": "loading-skeleton-field",
+			className: "flex flex-col gap-2",
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-24" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-full rounded-[var(--ds-radius-md)]" })]
+		}, i)), /* @__PURE__ */ jsx(Skeleton, { className: "mt-1 h-9 w-28 rounded-[var(--ds-radius-md)]" })]
+	});
+}
+/**
+* LoadingSkeleton — page-level placeholders assembled from Skeleton, one per
+* shape of content: a list of rows with an avatar, a table with a header row,
+* a grid of cards, or a stacked form. Announces itself as busy so assistive
+* technology knows the region is loading; the blocks themselves are hidden.
+*/
+function LoadingSkeleton({ className, preset = "list", rows, columns, ...props }) {
+	const count = Math.max(1, rows ?? DEFAULT_ROWS[preset]);
+	const cols = Math.max(1, columns ?? DEFAULT_COLUMNS[preset]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "loading-skeleton",
+		"data-preset": preset,
+		role: "status",
+		"aria-busy": "true",
+		"aria-label": "Loading",
+		className: cn("w-full", className),
+		...props,
+		children: [
+			preset === "list" ? /* @__PURE__ */ jsx(ListSkeleton, { rows: count }) : null,
+			preset === "table" ? /* @__PURE__ */ jsx(TableSkeleton, {
+				rows: count,
+				columns: cols
+			}) : null,
+			preset === "card" ? /* @__PURE__ */ jsx(CardSkeleton, {
+				rows: count,
+				columns: cols
+			}) : null,
+			preset === "form" ? /* @__PURE__ */ jsx(FormSkeleton, { rows: count }) : null
+		]
+	});
+}
+//#endregion
+export { LoadingSkeleton };
+
+//# sourceMappingURL=loading-skeleton.js.map

package/dist/components/loading-skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-skeleton.js","names":[],"sources":["../../src/components/loading-skeleton.tsx"],"sourcesContent":["\"use client\";\n\nimport type * as React from \"react\";\nimport { Skeleton } from \"@/components/skeleton\";\nimport { cn } from \"@/lib/cn\";\n\nexport type LoadingSkeletonPreset = \"list\" | \"table\" | \"card\" | \"form\";\n\nexport interface LoadingSkeletonProps extends React.ComponentProps<\"div\"> {\n  /** Which shape of content is loading. */\n  preset?: LoadingSkeletonPreset;\n  /** Rows (list, table, form) or cards. Each preset has a sensible default. */\n  rows?: number;\n  /** Columns for `table` and `card`. */\n  columns?: number;\n}\n\nconst DEFAULT_ROWS: Record<LoadingSkeletonPreset, number> = {\n  list: 4,\n  table: 5,\n  card: 3,\n  form: 3,\n};\n\nconst DEFAULT_COLUMNS: Record<LoadingSkeletonPreset, number> = {\n  list: 1,\n  table: 4,\n  card: 3,\n  form: 1,\n};\n\n/* Widths cycle so rows do not line up into a solid block. */\nconst LINE_WIDTHS = [\"w-3/4\", \"w-1/2\", \"w-5/6\", \"w-2/3\", \"w-3/5\"] as const;\nconst width = (i: number) => LINE_WIDTHS[i % LINE_WIDTHS.length];\n\nfunction ListSkeleton({ rows }: { rows: number }) {\n  return (\n    <div data-slot=\"loading-skeleton-list\" className=\"flex flex-col gap-4\">\n      {Array.from({ length: rows }, (_, i) => (\n        <div key={i} data-slot=\"loading-skeleton-row\" className=\"flex items-center gap-3\">\n          <Skeleton className=\"size-9 shrink-0 rounded-[var(--ds-radius-full)]\" />\n          <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n            <Skeleton className={cn(\"h-3.5\", width(i))} />\n            <Skeleton className={cn(\"h-3\", width(i + 2))} />\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction TableSkeleton({ rows, columns }: { rows: number; columns: number }) {\n  const grid = { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` };\n  return (\n    <div data-slot=\"loading-skeleton-table\" className=\"flex flex-col\">\n      <div\n        data-slot=\"loading-skeleton-row\"\n        className=\"grid gap-4 border-b border-[var(--ds-border-subtle)] px-3 py-3\"\n        style={grid}\n      >\n        {Array.from({ length: columns }, (_, c) => (\n          <Skeleton key={c} className=\"h-3 w-1/2\" />\n        ))}\n      </div>\n      {Array.from({ length: rows }, (_, r) => (\n        <div\n          key={r}\n          data-slot=\"loading-skeleton-row\"\n          className=\"grid gap-4 border-b border-[var(--ds-border-subtle)] px-3 py-3.5 last:border-b-0\"\n          style={grid}\n        >\n          {Array.from({ length: columns }, (_, c) => (\n            <Skeleton key={c} className={cn(\"h-3.5\", width(r + c))} />\n          ))}\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction CardSkeleton({ rows, columns }: { rows: number; columns: number }) {\n  return (\n    <div\n      data-slot=\"loading-skeleton-cards\"\n      className=\"grid gap-4\"\n      style={{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }}\n    >\n      {Array.from({ length: rows }, (_, i) => (\n        <div\n          key={i}\n          data-slot=\"loading-skeleton-card\"\n          className=\"flex flex-col gap-3 rounded-[var(--ds-radius-lg)] border border-[var(--ds-border-subtle)] bg-[var(--ds-card)] p-5\"\n        >\n          <Skeleton className=\"h-4 w-1/2\" />\n          <Skeleton className=\"h-3 w-3/4\" />\n          <div className=\"mt-2 flex flex-col gap-2\">\n            <Skeleton className=\"h-3 w-full\" />\n            <Skeleton className={cn(\"h-3\", width(i))} />\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction FormSkeleton({ rows }: { rows: number }) {\n  return (\n    <div data-slot=\"loading-skeleton-form\" className=\"flex max-w-xl flex-col gap-5\">\n      {Array.from({ length: rows }, (_, i) => (\n        <div key={i} data-slot=\"loading-skeleton-field\" className=\"flex flex-col gap-2\">\n          <Skeleton className=\"h-3 w-24\" />\n          <Skeleton className=\"h-9 w-full rounded-[var(--ds-radius-md)]\" />\n        </div>\n      ))}\n      <Skeleton className=\"mt-1 h-9 w-28 rounded-[var(--ds-radius-md)]\" />\n    </div>\n  );\n}\n\n/**\n * LoadingSkeleton — page-level placeholders assembled from Skeleton, one per\n * shape of content: a list of rows with an avatar, a table with a header row,\n * a grid of cards, or a stacked form. Announces itself as busy so assistive\n * technology knows the region is loading; the blocks themselves are hidden.\n */\nfunction LoadingSkeleton({\n  className,\n  preset = \"list\",\n  rows,\n  columns,\n  ...props\n}: LoadingSkeletonProps) {\n  const count = Math.max(1, rows ?? DEFAULT_ROWS[preset]);\n  const cols = Math.max(1, columns ?? DEFAULT_COLUMNS[preset]);\n  return (\n    <div\n      data-slot=\"loading-skeleton\"\n      data-preset={preset}\n      role=\"status\"\n      aria-busy=\"true\"\n      aria-label=\"Loading\"\n      className={cn(\"w-full\", className)}\n      {...props}\n    >\n      {preset === \"list\" ? <ListSkeleton rows={count} /> : null}\n      {preset === \"table\" ? <TableSkeleton rows={count} columns={cols} /> : null}\n      {preset === \"card\" ? <CardSkeleton rows={count} columns={cols} /> : null}\n      {preset === \"form\" ? <FormSkeleton rows={count} /> : null}\n    </div>\n  );\n}\n\nexport { LoadingSkeleton };\n"],"mappings":"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"}

package/dist/components/markdown.d.ts

@@ -0,0 +1,44 @@
+"use client";
+import * as React from "react";
+import { Components, Options } from "react-markdown";
+import { Options as Options$1 } from "rehype-sanitize";
+//#region src/components/markdown.d.ts
+/** The GitHub schema, plus `class="language-*"` on code and `checked` on task boxes. */
+declare const markdownSanitizeSchema: Options$1;
+export interface CodeRendererProps {
+  /** The fenced block's text, without a trailing newline. */
+  code: string;
+  /** From the fence's info string, e.g. `ts` for ```ts. */
+  language: string | undefined;
+}
+export interface MarkdownProps extends Omit<React.ComponentProps<"div">, "children"> {
+  /** The markdown source. */
+  children: string | null | undefined;
+  /** Tighter rhythm and smaller headings, for chat bubbles. */
+  compact?: boolean;
+  /** Renders fenced code blocks; the copy button is still added. Use for syntax highlighting. */
+  codeRenderer?: (props: CodeRendererProps) => React.ReactNode;
+  /** Override or extend the element map. */
+  components?: Components;
+  /** Extra remark plugins, appended after GFM. */
+  remarkPlugins?: NonNullable<Options["remarkPlugins"]>;
+  /** Extra rehype plugins, appended after sanitize. */
+  rehypePlugins?: NonNullable<Options["rehypePlugins"]>;
+  /**
+   * Rehype plugins that must run BEFORE sanitize. The one legitimate use is
+   * `rehype-raw` in a host that embeds trusted custom tags in markdown (the
+   * webchat's `<cortena-*>` blocks): raw HTML has to become nodes before the
+   * sanitizer sees it, and the sanitize schema then decides what survives.
+   * Anything placed here widens what reaches the sanitizer, so keep the
+   * schema strict when you use it.
+   */
+  rehypePluginsBeforeSanitize?: NonNullable<Options["rehypePlugins"]>;
+  /** Replace the sanitize schema; defaults to `markdownSanitizeSchema`. */
+  sanitizeSchema?: Options$1;
+  /** Rewrite URLs; defaults to react-markdown's, which drops non-http(s)/mailto/tel schemes. */
+  urlTransform?: Options["urlTransform"];
+}
+declare function Markdown({ children, compact, codeRenderer, components, remarkPlugins, rehypePlugins, rehypePluginsBeforeSanitize, sanitizeSchema, urlTransform, className, ...props }: MarkdownProps): React.JSX.Element;
+//#endregion
+export { Markdown, type Components as MarkdownComponents, markdownSanitizeSchema };
+//# sourceMappingURL=markdown.d.ts.map

package/dist/components/markdown.js

@@ -0,0 +1,231 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { shakeable } from "../lib/shakeable.js";
+import { Check, Copy } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import ReactMarkdown from "react-markdown";
+import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
+import remarkGfm from "remark-gfm";
+//#region src/components/markdown.tsx
+function hastText(node) {
+	if (node.type === "text") return node.value;
+	if ("children" in node) return node.children.map(hastText).join("");
+	return "";
+}
+/** The GitHub schema, plus `class="language-*"` on code and `checked` on task boxes. */
+const markdownSanitizeSchema = /* @__PURE__ */ shakeable(() => ({
+	...defaultSchema,
+	attributes: {
+		...defaultSchema.attributes,
+		code: [...defaultSchema.attributes?.code ?? [], ["className", /^language-./]],
+		input: [...defaultSchema.attributes?.input ?? [], "checked"]
+	}
+}));
+/** Strip react-markdown's `node` so the rest can be spread onto a DOM element. */
+function dom(props) {
+	const { node: _node, ...rest } = props;
+	return rest;
+}
+const block = "my-3 first:mt-0 last:mb-0 group-data-[compact]/markdown:my-1.5";
+const body = /* @__PURE__ */ cn("text-[length:var(--ds-text-body-sm)] leading-[var(--ds-text-body-sm--line-height)] text-[color:var(--ds-foreground)]");
+const heading = /* @__PURE__ */ cn("font-[family-name:var(--ds-font-display)] text-[color:var(--ds-foreground)]", "mt-6 mb-2 first:mt-0 group-data-[compact]/markdown:mt-3 group-data-[compact]/markdown:mb-1");
+const cellClassName = "border border-[var(--ds-border)] px-3 py-1.5 align-top";
+function CopyButton({ text }) {
+	const [copied, setCopied] = React.useState(false);
+	React.useEffect(() => {
+		if (!copied) return;
+		const id = window.setTimeout(() => setCopied(false), 1500);
+		return () => window.clearTimeout(id);
+	}, [copied]);
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-slot": "markdown-copy",
+		"data-copied": copied || void 0,
+		"aria-label": copied ? "Copied" : "Copy code",
+		onClick: () => {
+			navigator.clipboard?.writeText(text).then(() => setCopied(true));
+		},
+		className: cn("absolute top-1.5 right-1.5 inline-flex size-7 items-center justify-center", "rounded-[var(--ds-radius-sm)] text-[color:var(--ds-muted-foreground)]", "opacity-0 transition-opacity duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]", "group-hover/pre:opacity-100 focus-visible:opacity-100 data-[copied]:opacity-100", "hover:bg-[var(--ds-hover)] hover:text-[color:var(--ds-foreground)]", "outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40", "data-[copied]:text-[color:var(--ds-success)]", "[&_svg]:size-3.5"),
+		children: copied ? /* @__PURE__ */ jsx(Check, { "aria-hidden": true }) : /* @__PURE__ */ jsx(Copy, { "aria-hidden": true })
+	});
+}
+function buildComponents(codeRenderer) {
+	return {
+		h1: (p) => /* @__PURE__ */ jsx("h1", {
+			...dom(p),
+			className: cn(heading, "text-[length:var(--ds-text-h1)] leading-[var(--ds-text-h1--line-height)] tracking-[var(--ds-text-h1--letter-spacing)] font-semibold", "group-data-[compact]/markdown:text-[length:var(--ds-text-h3)] group-data-[compact]/markdown:leading-[var(--ds-text-h3--line-height)]")
+		}),
+		h2: (p) => /* @__PURE__ */ jsx("h2", {
+			...dom(p),
+			className: cn(heading, "text-[length:var(--ds-text-h2)] leading-[var(--ds-text-h2--line-height)] tracking-[var(--ds-text-h2--letter-spacing)] font-bold", "group-data-[compact]/markdown:text-[length:var(--ds-text-body-lg)] group-data-[compact]/markdown:leading-[var(--ds-text-body-lg--line-height)]")
+		}),
+		h3: (p) => /* @__PURE__ */ jsx("h3", {
+			...dom(p),
+			className: cn(heading, "text-[length:var(--ds-text-h3)] leading-[var(--ds-text-h3--line-height)] font-semibold", "group-data-[compact]/markdown:text-[length:var(--ds-text-body-md)] group-data-[compact]/markdown:leading-[var(--ds-text-body-md--line-height)]")
+		}),
+		h4: (p) => /* @__PURE__ */ jsx("h4", {
+			...dom(p),
+			className: cn(heading, "font-[family-name:var(--ds-font-body)] text-[length:var(--ds-text-body-md)] leading-[var(--ds-text-body-md--line-height)] font-semibold")
+		}),
+		h5: (p) => /* @__PURE__ */ jsx("h5", {
+			...dom(p),
+			className: cn(heading, "font-[family-name:var(--ds-font-body)] text-[length:var(--ds-text-body)] leading-[var(--ds-text-body--line-height)] font-semibold")
+		}),
+		h6: (p) => /* @__PURE__ */ jsx("h6", {
+			...dom(p),
+			className: cn(heading, "font-[family-name:var(--ds-font-body)] text-[length:var(--ds-text-eyebrow)] leading-[var(--ds-text-eyebrow--line-height)] tracking-[var(--ds-text-eyebrow--letter-spacing)] font-semibold uppercase text-[color:var(--ds-muted-foreground)]")
+		}),
+		p: (p) => /* @__PURE__ */ jsx("p", {
+			...dom(p),
+			className: cn(block, body)
+		}),
+		a: (p) => {
+			const { href, ...rest } = dom(p);
+			const external = typeof href === "string" && /^https?:\/\//.test(href);
+			return /* @__PURE__ */ jsx("a", {
+				...rest,
+				href,
+				target: external ? "_blank" : void 0,
+				rel: external ? "noopener noreferrer" : void 0,
+				className: cn("text-[color:var(--ds-primary)] underline underline-offset-4 decoration-[color:var(--ds-primary)]/40", "hover:text-[color:var(--ds-primary-hover)] hover:decoration-[color:var(--ds-primary-hover)]", "outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40 rounded-[var(--ds-radius-sm)]")
+			});
+		},
+		strong: (p) => /* @__PURE__ */ jsx("strong", {
+			...dom(p),
+			className: "font-semibold text-[color:var(--ds-foreground)]"
+		}),
+		em: (p) => /* @__PURE__ */ jsx("em", {
+			...dom(p),
+			className: "italic"
+		}),
+		del: (p) => /* @__PURE__ */ jsx("del", {
+			...dom(p),
+			className: "line-through text-[color:var(--ds-muted-foreground)]"
+		}),
+		code: (p) => /* @__PURE__ */ jsx("code", {
+			...dom(p),
+			className: cn("rounded-[var(--ds-radius-sm)] bg-[var(--ds-muted)] px-1 py-0.5", "font-[family-name:var(--ds-font-mono)] text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-foreground)]", "border border-[var(--ds-border-subtle)]")
+		}),
+		pre: (p) => {
+			const codeNode = p.node?.children.find((c) => c.type === "element" && c.tagName === "code");
+			const code = (codeNode ? hastText(codeNode) : hastText(p.node ?? {
+				type: "text",
+				value: ""
+			})).replace(/\n$/, "");
+			const classes = codeNode?.properties.className;
+			const language = (Array.isArray(classes) ? classes : [classes]).map(String).find((c) => c.startsWith("language-"))?.slice(9);
+			return /* @__PURE__ */ jsxs("div", {
+				"data-slot": "markdown-pre",
+				"data-language": language,
+				className: cn(block, "group/pre relative overflow-hidden", "rounded-[var(--ds-radius-md)] border border-[var(--ds-border-subtle)] bg-[var(--ds-muted)]"),
+				children: [codeRenderer ? codeRenderer({
+					code,
+					language
+				}) : /* @__PURE__ */ jsx("pre", {
+					className: cn("overflow-x-auto p-3 pr-10", "font-[family-name:var(--ds-font-mono)] text-[length:var(--ds-text-caption-lg)] leading-[var(--ds-text-caption-lg--line-height)] text-[color:var(--ds-foreground)]"),
+					children: /* @__PURE__ */ jsx("code", {
+						"data-language": language,
+						children: code
+					})
+				}), /* @__PURE__ */ jsx(CopyButton, { text: code })]
+			});
+		},
+		blockquote: (p) => /* @__PURE__ */ jsx("blockquote", {
+			...dom(p),
+			className: cn(block, "border-l-2 border-[var(--ds-border-strong)] pl-4 text-[color:var(--ds-muted-foreground)]", "[&>p]:text-[color:inherit]")
+		}),
+		ul: (p) => /* @__PURE__ */ jsx("ul", {
+			...dom(p),
+			className: cn(block, body, "list-disc pl-6 marker:text-[color:var(--ds-text-tertiary)]", "[&_ul]:my-1 [&_ol]:my-1")
+		}),
+		ol: (p) => /* @__PURE__ */ jsx("ol", {
+			...dom(p),
+			className: cn(block, body, "list-decimal pl-6 marker:text-[color:var(--ds-text-tertiary)]", "[&_ul]:my-1 [&_ol]:my-1")
+		}),
+		li: (p) => {
+			const rest = dom(p);
+			const task = typeof rest.className === "string" && rest.className.includes("task-list-item");
+			return /* @__PURE__ */ jsx("li", {
+				...rest,
+				"data-task": task || void 0,
+				className: cn("my-1 group-data-[compact]/markdown:my-0.5", task && "-ml-6 list-none")
+			});
+		},
+		input: (p) => {
+			const rest = dom(p);
+			return /* @__PURE__ */ jsx("input", {
+				...rest,
+				readOnly: true,
+				className: cn("mr-2 size-3.5 translate-y-px accent-[var(--ds-primary)] align-baseline", "rounded-[var(--ds-radius-sm)]")
+			});
+		},
+		table: (p) => /* @__PURE__ */ jsx("div", {
+			"data-slot": "markdown-table",
+			className: cn(block, "w-full overflow-x-auto"),
+			children: /* @__PURE__ */ jsx("table", {
+				...dom(p),
+				className: cn("w-full border-collapse text-[length:var(--ds-text-caption-lg)] leading-[var(--ds-text-caption-lg--line-height)] text-[color:var(--ds-foreground)]")
+			})
+		}),
+		thead: (p) => /* @__PURE__ */ jsx("thead", {
+			...dom(p),
+			className: "bg-[var(--ds-muted)]"
+		}),
+		tbody: (p) => /* @__PURE__ */ jsx("tbody", {
+			...dom(p),
+			className: "[&>tr:nth-child(even)]:bg-[var(--ds-muted)]"
+		}),
+		tr: (p) => /* @__PURE__ */ jsx("tr", { ...dom(p) }),
+		th: (p) => /* @__PURE__ */ jsx("th", {
+			...dom(p),
+			className: cn(cellClassName, "text-left font-semibold text-[color:var(--ds-foreground)]")
+		}),
+		td: (p) => /* @__PURE__ */ jsx("td", {
+			...dom(p),
+			className: cellClassName
+		}),
+		hr: (p) => /* @__PURE__ */ jsx("hr", {
+			...dom(p),
+			className: "my-5 border-0 border-t border-[var(--ds-border)] group-data-[compact]/markdown:my-3"
+		}),
+		img: (p) => /* @__PURE__ */ jsx("img", {
+			...dom(p),
+			className: "my-3 max-w-full rounded-[var(--ds-radius-md)] border border-[var(--ds-border-subtle)]"
+		})
+	};
+}
+function Markdown({ children, compact = false, codeRenderer, components, remarkPlugins, rehypePlugins, rehypePluginsBeforeSanitize, sanitizeSchema = markdownSanitizeSchema, urlTransform, className, ...props }) {
+	const map = React.useMemo(() => ({
+		...buildComponents(codeRenderer),
+		...components
+	}), [codeRenderer, components]);
+	const remark = React.useMemo(() => [remarkGfm, ...remarkPlugins ?? []], [remarkPlugins]);
+	const rehype = React.useMemo(() => [
+		...rehypePluginsBeforeSanitize ?? [],
+		[rehypeSanitize, sanitizeSchema],
+		...rehypePlugins ?? []
+	], [
+		rehypePluginsBeforeSanitize,
+		rehypePlugins,
+		sanitizeSchema
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "markdown",
+		"data-compact": compact || void 0,
+		className: cn("group/markdown min-w-0 break-words text-[color:var(--ds-foreground)]", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ReactMarkdown, {
+			remarkPlugins: remark,
+			rehypePlugins: rehype,
+			components: map,
+			urlTransform,
+			children: children ?? ""
+		})
+	});
+}
+//#endregion
+export { Markdown, markdownSanitizeSchema };
+
+//# sourceMappingURL=markdown.js.map

package/dist/components/markdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown.js","names":[],"sources":["../../src/components/markdown.tsx"],"sourcesContent":["\"use client\";\n\nimport { Check, Copy } from \"lucide-react\";\nimport * as React from \"react\";\nimport ReactMarkdown, { type Components, type ExtraProps, type Options } from \"react-markdown\";\nimport rehypeSanitize, { defaultSchema, type Options as SanitizeSchema } from \"rehype-sanitize\";\nimport remarkGfm from \"remark-gfm\";\nimport { cn } from \"@/lib/cn\";\nimport { shakeable } from \"@/lib/shakeable\";\n\n/**\n * Markdown.\n *\n * react-markdown with GFM (tables, task lists, strikethrough, autolinks) and\n * rehype-sanitize's GitHub schema, so pasted or model-written HTML cannot run\n * scripts or leak styles. Every element is mapped through `components` onto\n * tokens: headings take the type scale with the display face, body copy is\n * `body-sm`, code is mono on the sunken surface, tables stripe with the\n * border colour and fenced blocks carry a copy button.\n *\n * `compact` halves the vertical rhythm and steps headings down for chat\n * bubbles. There is no syntax highlighting; pass `codeRenderer` to plug one in\n * (shiki, prism) for fenced blocks — it receives the raw text and language.\n */\n\ntype HastNode = NonNullable<ExtraProps[\"node\"]>;\ntype HastChild = HastNode[\"children\"][number];\n\nfunction hastText(node: HastChild | HastNode): string {\n  if (node.type === \"text\") return node.value;\n  if (\"children\" in node) return node.children.map(hastText).join(\"\");\n  return \"\";\n}\n\n/** The GitHub schema, plus `class=\"language-*\"` on code and `checked` on task boxes. */\nconst markdownSanitizeSchema: SanitizeSchema = /* @__PURE__ */ shakeable(() => ({\n  ...defaultSchema,\n  attributes: {\n    ...defaultSchema.attributes,\n    code: [...(defaultSchema.attributes?.code ?? []), [\"className\", /^language-./]],\n    input: [...(defaultSchema.attributes?.input ?? []), \"checked\"],\n  },\n}));\n\nexport interface CodeRendererProps {\n  /** The fenced block's text, without a trailing newline. */\n  code: string;\n  /** From the fence's info string, e.g. `ts` for ```ts. */\n  language: string | undefined;\n}\n\n/** Strip react-markdown's `node` so the rest can be spread onto a DOM element. */\nfunction dom<T extends object>(props: T & ExtraProps): T {\n  const { node: _node, ...rest } = props;\n  return rest as T;\n}\n\nconst block = \"my-3 first:mt-0 last:mb-0 group-data-[compact]/markdown:my-1.5\";\n\nconst body = /* @__PURE__ */ cn(\n  \"text-[length:var(--ds-text-body-sm)] leading-[var(--ds-text-body-sm--line-height)] text-[color:var(--ds-foreground)]\",\n);\n\nconst heading = /* @__PURE__ */ cn(\n  \"font-[family-name:var(--ds-font-display)] text-[color:var(--ds-foreground)]\",\n  \"mt-6 mb-2 first:mt-0 group-data-[compact]/markdown:mt-3 group-data-[compact]/markdown:mb-1\",\n);\n\nconst cellClassName = \"border border-[var(--ds-border)] px-3 py-1.5 align-top\";\n\nfunction CopyButton({ text }: { text: string }) {\n  const [copied, setCopied] = React.useState(false);\n  React.useEffect(() => {\n    if (!copied) return;\n    const id = window.setTimeout(() => setCopied(false), 1500);\n    return () => window.clearTimeout(id);\n  }, [copied]);\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"markdown-copy\"\n      data-copied={copied || undefined}\n      aria-label={copied ? \"Copied\" : \"Copy code\"}\n      onClick={() => {\n        void navigator.clipboard?.writeText(text).then(() => setCopied(true));\n      }}\n      className={cn(\n        \"absolute top-1.5 right-1.5 inline-flex size-7 items-center justify-center\",\n        \"rounded-[var(--ds-radius-sm)] text-[color:var(--ds-muted-foreground)]\",\n        \"opacity-0 transition-opacity duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]\",\n        \"group-hover/pre:opacity-100 focus-visible:opacity-100 data-[copied]:opacity-100\",\n        \"hover:bg-[var(--ds-hover)] hover:text-[color:var(--ds-foreground)]\",\n        \"outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40\",\n        \"data-[copied]:text-[color:var(--ds-success)]\",\n        \"[&_svg]:size-3.5\",\n      )}\n    >\n      {copied ? <Check aria-hidden /> : <Copy aria-hidden />}\n    </button>\n  );\n}\n\nfunction buildComponents(codeRenderer: MarkdownProps[\"codeRenderer\"]): Components {\n  return {\n    h1: (p) => (\n      <h1\n        {...dom(p)}\n        className={cn(\n          heading,\n          \"text-[length:var(--ds-text-h1)] leading-[var(--ds-text-h1--line-height)] tracking-[var(--ds-text-h1--letter-spacing)] font-semibold\",\n          \"group-data-[compact]/markdown:text-[length:var(--ds-text-h3)] group-data-[compact]/markdown:leading-[var(--ds-text-h3--line-height)]\",\n        )}\n      />\n    ),\n    h2: (p) => (\n      <h2\n        {...dom(p)}\n        className={cn(\n          heading,\n          \"text-[length:var(--ds-text-h2)] leading-[var(--ds-text-h2--line-height)] tracking-[var(--ds-text-h2--letter-spacing)] font-bold\",\n          \"group-data-[compact]/markdown:text-[length:var(--ds-text-body-lg)] group-data-[compact]/markdown:leading-[var(--ds-text-body-lg--line-height)]\",\n        )}\n      />\n    ),\n    h3: (p) => (\n      <h3\n        {...dom(p)}\n        className={cn(\n          heading,\n          \"text-[length:var(--ds-text-h3)] leading-[var(--ds-text-h3--line-height)] font-semibold\",\n          \"group-data-[compact]/markdown:text-[length:var(--ds-text-body-md)] group-data-[compact]/markdown:leading-[var(--ds-text-body-md--line-height)]\",\n        )}\n      />\n    ),\n    h4: (p) => (\n      <h4\n        {...dom(p)}\n        className={cn(\n          heading,\n          \"font-[family-name:var(--ds-font-body)] text-[length:var(--ds-text-body-md)] leading-[var(--ds-text-body-md--line-height)] font-semibold\",\n        )}\n      />\n    ),\n    h5: (p) => (\n      <h5\n        {...dom(p)}\n        className={cn(\n          heading,\n          \"font-[family-name:var(--ds-font-body)] text-[length:var(--ds-text-body)] leading-[var(--ds-text-body--line-height)] font-semibold\",\n        )}\n      />\n    ),\n    h6: (p) => (\n      <h6\n        {...dom(p)}\n        className={cn(\n          heading,\n          \"font-[family-name:var(--ds-font-body)] text-[length:var(--ds-text-eyebrow)] leading-[var(--ds-text-eyebrow--line-height)] tracking-[var(--ds-text-eyebrow--letter-spacing)] font-semibold uppercase text-[color:var(--ds-muted-foreground)]\",\n        )}\n      />\n    ),\n    p: (p) => <p {...dom(p)} className={cn(block, body)} />,\n    a: (p) => {\n      const { href, ...rest } = dom(p);\n      const external = typeof href === \"string\" && /^https?:\\/\\//.test(href);\n      return (\n        <a\n          {...rest}\n          href={href}\n          target={external ? \"_blank\" : undefined}\n          rel={external ? \"noopener noreferrer\" : undefined}\n          className={cn(\n            \"text-[color:var(--ds-primary)] underline underline-offset-4 decoration-[color:var(--ds-primary)]/40\",\n            \"hover:text-[color:var(--ds-primary-hover)] hover:decoration-[color:var(--ds-primary-hover)]\",\n            \"outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40 rounded-[var(--ds-radius-sm)]\",\n          )}\n        />\n      );\n    },\n    strong: (p) => <strong {...dom(p)} className=\"font-semibold text-[color:var(--ds-foreground)]\" />,\n    em: (p) => <em {...dom(p)} className=\"italic\" />,\n    del: (p) => <del {...dom(p)} className=\"line-through text-[color:var(--ds-muted-foreground)]\" />,\n    code: (p) => (\n      <code\n        {...dom(p)}\n        className={cn(\n          \"rounded-[var(--ds-radius-sm)] bg-[var(--ds-muted)] px-1 py-0.5\",\n          \"font-[family-name:var(--ds-font-mono)] text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-foreground)]\",\n          \"border border-[var(--ds-border-subtle)]\",\n        )}\n      />\n    ),\n    pre: (p) => {\n      const codeNode = p.node?.children.find(\n        (c): c is HastNode => c.type === \"element\" && c.tagName === \"code\",\n      );\n      const source = codeNode ? hastText(codeNode) : hastText(p.node ?? { type: \"text\", value: \"\" });\n      const code = source.replace(/\\n$/, \"\");\n      const classes = codeNode?.properties.className;\n      const language = (Array.isArray(classes) ? classes : [classes])\n        .map(String)\n        .find((c) => c.startsWith(\"language-\"))\n        ?.slice(\"language-\".length);\n      return (\n        <div\n          data-slot=\"markdown-pre\"\n          data-language={language}\n          className={cn(\n            block,\n            \"group/pre relative overflow-hidden\",\n            \"rounded-[var(--ds-radius-md)] border border-[var(--ds-border-subtle)] bg-[var(--ds-muted)]\",\n          )}\n        >\n          {codeRenderer ? (\n            codeRenderer({ code, language })\n          ) : (\n            <pre\n              className={cn(\n                \"overflow-x-auto p-3 pr-10\",\n                \"font-[family-name:var(--ds-font-mono)] text-[length:var(--ds-text-caption-lg)] leading-[var(--ds-text-caption-lg--line-height)] text-[color:var(--ds-foreground)]\",\n              )}\n            >\n              <code data-language={language}>{code}</code>\n            </pre>\n          )}\n          <CopyButton text={code} />\n        </div>\n      );\n    },\n    blockquote: (p) => (\n      <blockquote\n        {...dom(p)}\n        className={cn(\n          block,\n          \"border-l-2 border-[var(--ds-border-strong)] pl-4 text-[color:var(--ds-muted-foreground)]\",\n          \"[&>p]:text-[color:inherit]\",\n        )}\n      />\n    ),\n    ul: (p) => (\n      <ul\n        {...dom(p)}\n        className={cn(\n          block,\n          body,\n          \"list-disc pl-6 marker:text-[color:var(--ds-text-tertiary)]\",\n          \"[&_ul]:my-1 [&_ol]:my-1\",\n        )}\n      />\n    ),\n    ol: (p) => (\n      <ol\n        {...dom(p)}\n        className={cn(\n          block,\n          body,\n          \"list-decimal pl-6 marker:text-[color:var(--ds-text-tertiary)]\",\n          \"[&_ul]:my-1 [&_ol]:my-1\",\n        )}\n      />\n    ),\n    li: (p) => {\n      const rest = dom(p);\n      const task = typeof rest.className === \"string\" && rest.className.includes(\"task-list-item\");\n      return (\n        <li\n          {...rest}\n          data-task={task || undefined}\n          className={cn(\"my-1 group-data-[compact]/markdown:my-0.5\", task && \"-ml-6 list-none\")}\n        />\n      );\n    },\n    input: (p) => {\n      const rest = dom(p);\n      return (\n        <input\n          {...rest}\n          readOnly\n          className={cn(\n            \"mr-2 size-3.5 translate-y-px accent-[var(--ds-primary)] align-baseline\",\n            \"rounded-[var(--ds-radius-sm)]\",\n          )}\n        />\n      );\n    },\n    table: (p) => (\n      <div data-slot=\"markdown-table\" className={cn(block, \"w-full overflow-x-auto\")}>\n        <table\n          {...dom(p)}\n          className={cn(\n            \"w-full border-collapse text-[length:var(--ds-text-caption-lg)] leading-[var(--ds-text-caption-lg--line-height)] text-[color:var(--ds-foreground)]\",\n          )}\n        />\n      </div>\n    ),\n    thead: (p) => <thead {...dom(p)} className=\"bg-[var(--ds-muted)]\" />,\n    tbody: (p) => <tbody {...dom(p)} className=\"[&>tr:nth-child(even)]:bg-[var(--ds-muted)]\" />,\n    tr: (p) => <tr {...dom(p)} />,\n    th: (p) => (\n      <th\n        {...dom(p)}\n        className={cn(cellClassName, \"text-left font-semibold text-[color:var(--ds-foreground)]\")}\n      />\n    ),\n    td: (p) => <td {...dom(p)} className={cellClassName} />,\n    hr: (p) => (\n      <hr {...dom(p)} className=\"my-5 border-0 border-t border-[var(--ds-border)] group-data-[compact]/markdown:my-3\" />\n    ),\n    img: (p) => (\n      <img\n        {...dom(p)}\n        className=\"my-3 max-w-full rounded-[var(--ds-radius-md)] border border-[var(--ds-border-subtle)]\"\n      />\n    ),\n  };\n}\n\nexport interface MarkdownProps extends Omit<React.ComponentProps<\"div\">, \"children\"> {\n  /** The markdown source. */\n  children: string | null | undefined;\n  /** Tighter rhythm and smaller headings, for chat bubbles. */\n  compact?: boolean;\n  /** Renders fenced code blocks; the copy button is still added. Use for syntax highlighting. */\n  codeRenderer?: (props: CodeRendererProps) => React.ReactNode;\n  /** Override or extend the element map. */\n  components?: Components;\n  /** Extra remark plugins, appended after GFM. */\n  remarkPlugins?: NonNullable<Options[\"remarkPlugins\"]>;\n  /** Extra rehype plugins, appended after sanitize. */\n  rehypePlugins?: NonNullable<Options[\"rehypePlugins\"]>;\n  /**\n   * Rehype plugins that must run BEFORE sanitize. The one legitimate use is\n   * `rehype-raw` in a host that embeds trusted custom tags in markdown (the\n   * webchat's `<cortena-*>` blocks): raw HTML has to become nodes before the\n   * sanitizer sees it, and the sanitize schema then decides what survives.\n   * Anything placed here widens what reaches the sanitizer, so keep the\n   * schema strict when you use it.\n   */\n  rehypePluginsBeforeSanitize?: NonNullable<Options[\"rehypePlugins\"]>;\n  /** Replace the sanitize schema; defaults to `markdownSanitizeSchema`. */\n  sanitizeSchema?: SanitizeSchema;\n  /** Rewrite URLs; defaults to react-markdown's, which drops non-http(s)/mailto/tel schemes. */\n  urlTransform?: Options[\"urlTransform\"];\n}\n\nfunction Markdown({\n  children,\n  compact = false,\n  codeRenderer,\n  components,\n  remarkPlugins,\n  rehypePlugins,\n  rehypePluginsBeforeSanitize,\n  sanitizeSchema = markdownSanitizeSchema,\n  urlTransform,\n  className,\n  ...props\n}: MarkdownProps) {\n  const map = React.useMemo(\n    () => ({ ...buildComponents(codeRenderer), ...components }),\n    [codeRenderer, components],\n  );\n  const remark = React.useMemo(() => [remarkGfm, ...(remarkPlugins ?? [])], [remarkPlugins]);\n  const rehype = React.useMemo(\n    () => [...(rehypePluginsBeforeSanitize ?? []), [rehypeSanitize, sanitizeSchema] as const, ...(rehypePlugins ?? [])],\n    [rehypePluginsBeforeSanitize, rehypePlugins, sanitizeSchema],\n  );\n  return (\n    <div\n      data-slot=\"markdown\"\n      data-compact={compact || undefined}\n      className={cn(\"group/markdown min-w-0 break-words text-[color:var(--ds-foreground)]\", className)}\n      {...props}\n    >\n      <ReactMarkdown\n        remarkPlugins={remark}\n        rehypePlugins={rehype as NonNullable<Options[\"rehypePlugins\"]>}\n        components={map}\n        urlTransform={urlTransform}\n      >\n        {children ?? \"\"}\n      </ReactMarkdown>\n    </div>\n  );\n}\n\nexport { Markdown, markdownSanitizeSchema };\nexport type { Components as MarkdownComponents };\n"],"mappings":"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"}

package/dist/components/page-header.d.ts

@@ -0,0 +1,26 @@
+"use client";
+import * as React from "react";
+//#region src/components/page-header.d.ts
+export interface PageHeaderProps extends Omit<React.ComponentProps<"header">, "title"> {
+  /** The page title. Rendered as the h1; use `titleAs` to demote it. */
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  /** Buttons for the page, right-aligned on wide viewports. */
+  actions?: React.ReactNode;
+  /** Short uppercase label above the title, e.g. a section or product name. */
+  eyebrow?: React.ReactNode;
+  /** A Breadcrumb or any navigation rendered above the eyebrow. */
+  breadcrumb?: React.ReactNode;
+  /** Heading level when the page already has an h1. */
+  titleAs?: "h1" | "h2" | "h3";
+}
+/**
+ * PageHeader — the top of every screen: breadcrumb, eyebrow, title,
+ * description, and an actions slot. The title is an h1 on the h2 step of the
+ * type scale in the display face, so screens read as one product rather than
+ * as a stack of card titles.
+ */
+declare function PageHeader({ className, title, description, actions, eyebrow, breadcrumb, titleAs: Title, children, ...props }: PageHeaderProps): React.JSX.Element;
+//#endregion
+export { PageHeader };
+//# sourceMappingURL=page-header.d.ts.map

package/dist/components/page-header.js

@@ -0,0 +1,53 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/page-header.tsx
+/**
+* PageHeader — the top of every screen: breadcrumb, eyebrow, title,
+* description, and an actions slot. The title is an h1 on the h2 step of the
+* type scale in the display face, so screens read as one product rather than
+* as a stack of card titles.
+*/
+function PageHeader({ className, title, description, actions, eyebrow, breadcrumb, titleAs: Title = "h1", children, ...props }) {
+	return /* @__PURE__ */ jsxs("header", {
+		"data-slot": "page-header",
+		className: cn("flex flex-col gap-4 text-[color:var(--ds-foreground)] md:flex-row md:items-end md:justify-between", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			"data-slot": "page-header-content",
+			className: "flex min-w-0 flex-col gap-1.5",
+			children: [
+				breadcrumb ? /* @__PURE__ */ jsx("div", {
+					"data-slot": "page-header-breadcrumb",
+					className: "mb-1",
+					children: breadcrumb
+				}) : null,
+				eyebrow ? /* @__PURE__ */ jsx("span", {
+					"data-slot": "page-header-eyebrow",
+					className: cn("text-[length:var(--ds-text-eyebrow)] font-extrabold uppercase", "leading-[var(--ds-text-eyebrow--line-height)] tracking-[var(--ds-text-eyebrow--letter-spacing)]", "text-[color:var(--ds-eyebrow)]"),
+					children: eyebrow
+				}) : null,
+				/* @__PURE__ */ jsx(Title, {
+					"data-slot": "page-header-title",
+					className: cn("font-display text-[length:var(--ds-text-h2)] font-bold text-balance", "leading-[var(--ds-text-h2--line-height)] tracking-[var(--ds-text-h2--letter-spacing)]", "text-[color:var(--ds-foreground)]"),
+					children: title
+				}),
+				description ? /* @__PURE__ */ jsx("p", {
+					"data-slot": "page-header-description",
+					className: cn("max-w-prose text-[length:var(--ds-text-body-sm)] leading-[var(--ds-text-body-sm--line-height)]", "text-[color:var(--ds-muted-foreground)]"),
+					children: description
+				}) : null,
+				children
+			]
+		}), actions ? /* @__PURE__ */ jsx("div", {
+			"data-slot": "page-header-actions",
+			className: "flex shrink-0 flex-wrap items-center gap-2 md:justify-end",
+			children: actions
+		}) : null]
+	});
+}
+//#endregion
+export { PageHeader };
+
+//# sourceMappingURL=page-header.js.map

package/dist/components/page-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header.js","names":[],"sources":["../../src/components/page-header.tsx"],"sourcesContent":["\"use client\";\n\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface PageHeaderProps extends Omit<React.ComponentProps<\"header\">, \"title\"> {\n  /** The page title. Rendered as the h1; use `titleAs` to demote it. */\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  /** Buttons for the page, right-aligned on wide viewports. */\n  actions?: React.ReactNode;\n  /** Short uppercase label above the title, e.g. a section or product name. */\n  eyebrow?: React.ReactNode;\n  /** A Breadcrumb or any navigation rendered above the eyebrow. */\n  breadcrumb?: React.ReactNode;\n  /** Heading level when the page already has an h1. */\n  titleAs?: \"h1\" | \"h2\" | \"h3\";\n}\n\n/**\n * PageHeader — the top of every screen: breadcrumb, eyebrow, title,\n * description, and an actions slot. The title is an h1 on the h2 step of the\n * type scale in the display face, so screens read as one product rather than\n * as a stack of card titles.\n */\nfunction PageHeader({\n  className,\n  title,\n  description,\n  actions,\n  eyebrow,\n  breadcrumb,\n  titleAs: Title = \"h1\",\n  children,\n  ...props\n}: PageHeaderProps) {\n  return (\n    <header\n      data-slot=\"page-header\"\n      className={cn(\n        \"flex flex-col gap-4 text-[color:var(--ds-foreground)] md:flex-row md:items-end md:justify-between\",\n        className,\n      )}\n      {...props}\n    >\n      <div data-slot=\"page-header-content\" className=\"flex min-w-0 flex-col gap-1.5\">\n        {breadcrumb ? (\n          <div data-slot=\"page-header-breadcrumb\" className=\"mb-1\">\n            {breadcrumb}\n          </div>\n        ) : null}\n        {eyebrow ? (\n          <span\n            data-slot=\"page-header-eyebrow\"\n            className={cn(\n              \"text-[length:var(--ds-text-eyebrow)] font-extrabold uppercase\",\n              \"leading-[var(--ds-text-eyebrow--line-height)] tracking-[var(--ds-text-eyebrow--letter-spacing)]\",\n              \"text-[color:var(--ds-eyebrow)]\",\n            )}\n          >\n            {eyebrow}\n          </span>\n        ) : null}\n        <Title\n          data-slot=\"page-header-title\"\n          className={cn(\n            \"font-display text-[length:var(--ds-text-h2)] font-bold text-balance\",\n            \"leading-[var(--ds-text-h2--line-height)] tracking-[var(--ds-text-h2--letter-spacing)]\",\n            \"text-[color:var(--ds-foreground)]\",\n          )}\n        >\n          {title}\n        </Title>\n        {description ? (\n          <p\n            data-slot=\"page-header-description\"\n            className={cn(\n              \"max-w-prose text-[length:var(--ds-text-body-sm)] leading-[var(--ds-text-body-sm--line-height)]\",\n              \"text-[color:var(--ds-muted-foreground)]\",\n            )}\n          >\n            {description}\n          </p>\n        ) : null}\n        {children}\n      </div>\n      {actions ? (\n        <div\n          data-slot=\"page-header-actions\"\n          className=\"flex shrink-0 flex-wrap items-center gap-2 md:justify-end\"\n        >\n          {actions}\n        </div>\n      ) : null}\n    </header>\n  );\n}\n\nexport { PageHeader };\n"],"mappings":";;;;;;;;;;;AAyBA,SAAS,WAAW,EAClB,WACA,OACA,aACA,SACA,SACA,YACA,SAAS,QAAQ,MACjB,UACA,GAAG,SACe;CAClB,OACE,qBAAC,UAAD;EACE,aAAU;EACV,WAAW,GACT,qGACA,SACF;EACA,GAAI;EANN,UAAA,CAQE,qBAAC,OAAD;GAAK,aAAU;GAAsB,WAAU;GAA/C,UAAA;IACG,aACC,oBAAC,OAAD;KAAK,aAAU;KAAyB,WAAU;KAC/C,UAAA;IACE,CAAA,IACH;IACH,UACC,oBAAC,QAAD;KACE,aAAU;KACV,WAAW,GACT,iEACA,mGACA,gCACF;KAEC,UAAA;IACG,CAAA,IACJ;IACJ,oBAAC,OAAD;KACE,aAAU;KACV,WAAW,GACT,uEACA,yFACA,mCACF;KAEC,UAAA;IACI,CAAA;IACN,cACC,oBAAC,KAAD;KACE,aAAU;KACV,WAAW,GACT,kGACA,yCACF;KAEC,UAAA;IACA,CAAA,IACD;IACH;GACE;EACJ,CAAA,GAAA,UACC,oBAAC,OAAD;GACE,aAAU;GACV,WAAU;GAET,UAAA;EACE,CAAA,IACH,IACE;;AAEZ"}

package/dist/components/popover.d.ts

@@ -0,0 +1,29 @@
+"use client";
+import { Popover } from "@base-ui/react/popover";
+//#region src/components/popover.d.ts
+/**
+ * Popover.
+ *
+ * `PopoverContent` composes Base UI's Portal + Positioner + Popup so consumers
+ * keep writing `<PopoverContent side="bottom" align="start">`; the positioning
+ * props are forwarded to the Positioner, which is where Base UI reads them.
+ *
+ * Radix users: `asChild` on the trigger becomes `render={<Button />}`;
+ * `PopoverAnchor` is gone — pass `anchor={ref}` to `PopoverContent` instead.
+ */
+declare function Popover$1(props: Popover.Root.Props): import("react").JSX.Element;
+declare function PopoverTrigger(props: Popover.Trigger.Props): import("react").JSX.Element;
+declare function PopoverClose(props: Popover.Close.Props): import("react").JSX.Element;
+declare function PopoverTitle({ className, ...props }: Popover.Title.Props): import("react").JSX.Element;
+declare function PopoverDescription({ className, ...props }: Popover.Description.Props): import("react").JSX.Element;
+type PositionerProps = Pick<Popover.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "anchor" | "collisionBoundary" | "collisionPadding" | "collisionAvoidance" | "sticky" | "positionMethod">;
+export interface PopoverContentProps extends Popover.Popup.Props, PositionerProps {
+  /** Keep the popup mounted in the DOM while hidden. */
+  keepMounted?: boolean;
+  /** Where to portal the popup; defaults to `<body>`. */
+  container?: Popover.Portal.Props["container"];
+}
+declare function PopoverContent({ className, side, align, sideOffset, alignOffset, anchor, collisionBoundary, collisionPadding, collisionAvoidance, sticky, positionMethod, keepMounted, container, ...props }: PopoverContentProps): import("react").JSX.Element;
+//#endregion
+export { Popover$1 as Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger };
+//# sourceMappingURL=popover.d.ts.map