@bysages/react 0.2.3 → 0.3.1

package/README.md

@@ -4,11 +4,11 @@
 ![npm downloads](https://img.shields.io/npm/dw/@bysages/react)
 ![npm license](https://img.shields.io/npm/l/@bysages/react)
 
-> By Sages Elements for React — 90+ accessible component families, headless by construction, dressed by the paper-and-ink style layer. Ported from the Vue reference implementation, API for API.
+> By Sages Elements for React — 140+ accessible component families, headless by construction, dressed by the paper-and-ink style layer. Ported from the Vue reference implementation, API for API.
 
 ## Features
 
-- 🧩 **90+ families** — actions, forms, overlays, navigation, data, layout, and an AI conversation family on ai-sdk formats
+- 🧩 **140+ families** — actions, forms, overlays, navigation, data, layout, an AI conversation family on ai-sdk formats, and a full generative vocabulary
 - 🏛️ **Headless inside** — interaction, state, ARIA, and positioning come from proven headless state machines; wrappers add API narrowing and style injection, no DOM of their own
 - 🎨 **Token-styled** — every visual value is a CSS custom property from `@bysages/core`; light/dark, accent pigments, contrast and density tiers are data, never hardcoded styles
 - 📦 **Container-driven** — components respond to `@container`, not the viewport; the same component composes in a sidebar, a card, or a page
@@ -66,6 +66,20 @@ export function App() {
 }
 ```
 
+## Generative UI
+
+Every family carries a generative face — a zod-typed catalog entry that
+lives beside the component. The faces compose into a
+[json-render](https://json-render.dev) catalog and render through the
+same package:
+
+```ts
+import { catalog } from "@bysages/react/generative";
+```
+
+Point an AI SDK stream at the renderer and a prompt becomes real,
+on-brand components — constrained to the families you registered.
+
 ## Documentation
 
 The [documentation site](https://elements.bysages.com) carries every family with live demos and props tables.

package/dist/{ai-response-jZy-0Tvv.mjs → ai-response-BfKTmtCt.mjs}

@@ -1,3 +1,4 @@
+import { n as useComponentMessages } from "./messages-1jJWtaYU.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
@@ -99,20 +100,23 @@ function wrapResponseTables(root) {
 }
 //#endregion
 //#region src/components/ai-response/index.tsx
-function Response({ content, highlighter, copyLabel = "Copy code", copiedLabel = "Copied", ...rest }) {
+function Response({ content, highlighter, copyLabel, copiedLabel, ...rest }) {
 	injectComponentStyle("ai");
+	const messages = useComponentMessages();
+	const resolvedCopyLabel = copyLabel ?? messages.ai.copyCode;
+	const resolvedCopiedLabel = copiedLabel ?? messages.ai.copied;
 	const root = useRef(null);
 	useEffect(() => {
 		const host = root.current;
-		if (host) decorateCodeCopy(host, copyLabel);
+		if (host) decorateCodeCopy(host, resolvedCopyLabel);
 		if (host) wrapResponseTables(host);
 	}, [
 		content,
 		highlighter,
-		copyLabel
+		resolvedCopyLabel
 	]);
 	const onClick = (event) => {
-		clickCodeCopy(event.nativeEvent, copyLabel, copiedLabel);
+		clickCodeCopy(event.nativeEvent, resolvedCopyLabel, resolvedCopiedLabel);
 	};
 	return /* @__PURE__ */ jsx("div", {
 		...rest,

package/dist/components/ai/index.d.mts

@@ -1,2 +1,2 @@
-import { a as SourceDocumentUIPart, c as TextUIPart, d as UIMessagePart, i as ReasoningUIPart, l as ToolUIPart, n as DataUIPart, o as SourceUrlUIPart, r as FileUIPart, s as StepStartUIPart, t as Ai, u as UIMessage } from "../../index-DaAbbSz9.mjs";
-export { Ai, type DataUIPart, type FileUIPart, type ReasoningUIPart, type SourceDocumentUIPart, type SourceUrlUIPart, type StepStartUIPart, type TextUIPart, type ToolUIPart, type UIMessage, type UIMessagePart };
+import { a as FileUIPart, c as SourceUrlUIPart, d as ToolUIPart, f as UIMessage, i as DataUIPart, l as StepStartUIPart, n as AiActions, o as ReasoningUIPart, p as UIMessagePart, r as AiContent, s as SourceDocumentUIPart, t as Ai, u as TextUIPart } from "../../index-Dn5mHf1g.mjs";
+export { Ai, AiActions, AiContent, type DataUIPart, type FileUIPart, type ReasoningUIPart, type SourceDocumentUIPart, type SourceUrlUIPart, type StepStartUIPart, type TextUIPart, type ToolUIPart, type UIMessage, type UIMessagePart };

package/dist/components/ai/index.mjs

@@ -1,8 +1,9 @@
+import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
 import { Action } from "../ai-action/index.mjs";
 import { AiMessage as Message } from "../ai-message/index.mjs";
 import { AiPromptInput as PromptInput } from "../ai-prompt-input/index.mjs";
 import { AiReasoning as Reasoning } from "../ai-reasoning/index.mjs";
-import { t as Response } from "../../ai-response-jZy-0Tvv.mjs";
+import { t as Response } from "../../ai-response-BfKTmtCt.mjs";
 import { AiSource as Source, AiSources as Sources } from "../ai-source/index.mjs";
 import { AiSuggestion as Suggestion } from "../ai-suggestion/index.mjs";
 import { AiTool as Tool } from "../ai-tool/index.mjs";
@@ -29,27 +30,41 @@ function part(name, tag, extra = {}) {
 }
 /** The log itself: the column every stroke lands in, a landmark to
 * screen readers. */
-const Conversation = part("Conversation", "div", {
-	role: "log",
-	"aria-label": "Conversation"
-});
+function AiConversation({ children, ...rest }) {
+	const messages = useComponentMessages();
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		role: "log",
+		"aria-label": rest["aria-label"] ?? messages.ai.conversation,
+		"data-scope": "ai",
+		"data-part": "conversation",
+		children
+	});
+}
 /** The bubble's inner measure — content that belongs to neither side
 * specifically. */
-const MessageContent = part("Content", "div");
+const AiContent = part("Content", "div");
 /** The quiet row under a message — copy, retry, feedback. */
-const Actions = part("Actions", "div");
+const AiActions = part("Actions", "div");
 /** The while-it-works whisper for the in-flight turns. */
-const Loader = part("Loader", "span", {
-	role: "status",
-	"aria-label": "Loading"
-});
+function AiLoader({ children, ...rest }) {
+	const messages = useComponentMessages();
+	return /* @__PURE__ */ jsx("span", {
+		...rest,
+		role: "status",
+		"aria-label": rest["aria-label"] ?? messages.ai.loading,
+		"data-scope": "ai",
+		"data-part": "loader",
+		children
+	});
+}
 /** The whole family under one handle — `Ai.Conversation`,
 * `Ai.Message`, and the rest, exactly as before the split. */
-const Ai = Object.assign(Conversation, {
-	Conversation,
-	MessageContent,
-	Actions,
-	Loader,
+const Ai = Object.assign(AiConversation, {
+	Conversation: AiConversation,
+	MessageContent: AiContent,
+	Actions: AiActions,
+	Loader: AiLoader,
 	Message,
 	Response,
 	Reasoning,
@@ -62,4 +77,4 @@ const Ai = Object.assign(Conversation, {
 });
 injectComponentStyle("ai");
 //#endregion
-export { Ai };
+export { Ai, AiActions, AiContent };

package/dist/components/ai-attachments/index.mjs

@@ -1,3 +1,4 @@
+import { n as useComponentMessages, t as formatMessage } from "../../messages-1jJWtaYU.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ai-attachments/index.tsx
@@ -74,6 +75,7 @@ const humanSize = (bytes) => {
 };
 function Attachment({ name, size, status = "ready", onRemove, ...rest }) {
 	injectComponentStyle("ai");
+	const messages = useComponentMessages();
 	return /* @__PURE__ */ jsxs("span", {
 		...rest,
 		"data-scope": "ai",
@@ -86,7 +88,7 @@ function Attachment({ name, size, status = "ready", onRemove, ...rest }) {
 			/* @__PURE__ */ jsx("button", {
 				type: "button",
 				"data-remove": "",
-				"aria-label": `Remove ${name}`,
+				"aria-label": formatMessage(messages.ai.removeAttachment, { name }),
 				onClick: () => onRemove?.(),
 				children: removeGlyph
 			})

package/dist/components/ai-prompt-input/index.d.mts

@@ -42,6 +42,6 @@ export interface PromptInputProps extends Omit<HTMLAttributes<HTMLFormElement>,
   footer?: ReactNode;
   footerEnd?: ReactNode;
 }
-export declare function PromptInput({ value, onValueChange, onSubmit, onStop, placeholder, disabled, busy, mentions, header, leading, trailing, footer, footerEnd, ...rest }: PromptInputProps): import("react").JSX.Element;
+export declare function PromptInput({ value, onValueChange, onSubmit, onStop, placeholder, "aria-label": ariaLabel, disabled, busy, mentions, header, leading, trailing, footer, footerEnd, ...rest }: PromptInputProps): import("react").JSX.Element;
 //#endregion
 export { PromptInput as AiPromptInput };

package/dist/components/ai-prompt-input/index.mjs

@@ -1,3 +1,4 @@
+import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
 import { Button } from "../button/index.mjs";
 import { Field } from "../field/index.mjs";
 import { n as MentionsVessel, r as useMentions } from "../../mentions-DMIBCBOd.mjs";
@@ -39,9 +40,11 @@ function row(part, content) {
 		children: content
 	});
 }
-function PromptInput({ value, onValueChange, onSubmit, onStop, placeholder = "Send a message", disabled = false, busy = false, mentions, header, leading, trailing, footer, footerEnd, ...rest }) {
+function PromptInput({ value, onValueChange, onSubmit, onStop, placeholder, "aria-label": ariaLabel, disabled = false, busy = false, mentions, header, leading, trailing, footer, footerEnd, ...rest }) {
 	injectComponentStyle("ai");
 	const fieldRef = useRef(null);
+	const messages = useComponentMessages();
+	const placeholderText = placeholder ?? messages.ai.conversation;
 	const mentionState = useMentions(() => ({
 		items: mentions?.items ?? [],
 		trigger: mentions?.trigger
@@ -61,7 +64,7 @@ function PromptInput({ value, onValueChange, onSubmit, onStop, placeholder = "Se
 		size: "sm",
 		square: true,
 		type: "button",
-		"aria-label": "Stop",
+		"aria-label": messages.ai.stop,
 		disabled,
 		onClick: () => onStop?.(),
 		children: stopGlyph
@@ -70,7 +73,7 @@ function PromptInput({ value, onValueChange, onSubmit, onStop, placeholder = "Se
 		size: "sm",
 		square: true,
 		type: "submit",
-		"aria-label": "Send",
+		"aria-label": messages.ai.send,
 		disabled: disabled || !value.trim(),
 		children: arrowUpGlyph
 	});
@@ -95,7 +98,8 @@ function PromptInput({ value, onValueChange, onSubmit, onStop, placeholder = "Se
 						autoresize: true,
 						rows: 1,
 						value,
-						placeholder,
+						placeholder: placeholderText,
+						"aria-label": ariaLabel ?? messages.ai.conversation,
 						disabled,
 						onChange: (event) => {
 							onValueChange?.(event.target.value);

package/dist/components/ai-response/index.d.mts

@@ -12,9 +12,11 @@ export interface ResponseProps extends HTMLAttributes<HTMLDivElement> {
   /** Optional code-highlighting function re-inking fenced blocks; the
    * component stays agnostic about which engine provides it. */
   highlighter?: (code: string, lang?: string) => string;
-  /** The copy stamp's accessible name before the copy lands. */
+  /** The copy stamp's accessible name before the copy lands; leave
+   * unset for the resolved default. */
   copyLabel?: string;
-  /** The copy stamp's accessible name once the text has landed. */
+  /** The copy stamp's accessible name once the text has landed; leave
+   * unset for the resolved default. */
   copiedLabel?: string;
 }
 export declare function Response({ content, highlighter, copyLabel, copiedLabel, ...rest }: ResponseProps): import("react").JSX.Element;

package/dist/components/ai-response/index.mjs

@@ -1,2 +1,2 @@
-import { t as Response } from "../../ai-response-jZy-0Tvv.mjs";
+import { t as Response } from "../../ai-response-BfKTmtCt.mjs";
 export { Response as AiResponse, Response };

package/dist/components/autocomplete/index.mjs

@@ -1,3 +1,4 @@
+import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Portal } from "@ark-ui/react/portal";
@@ -6,6 +7,7 @@ import { Combobox } from "@ark-ui/react/combobox";
 //#region src/components/autocomplete/index.tsx
 function AutoComplete({ value = "", items = [], placeholder, filter, size = "md", onValueChange, ...rest }) {
 	injectComponentStyle("combobox");
+	const messages = useComponentMessages();
 	const { collection, filter: filterItems } = useListCollection({
 		initialItems: items,
 		filter: (item, input) => filter ? filter(item, input) : item.toLowerCase().includes(input.toLowerCase())
@@ -25,7 +27,7 @@ function AutoComplete({ value = "", items = [], placeholder, filter, size = "md"
 			onValueChange?.(details.inputValue);
 		},
 		positioning: { sameWidth: true },
-		children: [/* @__PURE__ */ jsx(Combobox.Control, { children: /* @__PURE__ */ jsx(Combobox.Input, { placeholder }) }), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, { children: /* @__PURE__ */ jsxs(Combobox.Content, { children: [/* @__PURE__ */ jsx(Combobox.Empty, { children: "No matches" }), collection.items.map((item) => /* @__PURE__ */ jsx(Combobox.Item, {
+		children: [/* @__PURE__ */ jsx(Combobox.Control, { children: /* @__PURE__ */ jsx(Combobox.Input, { placeholder }) }), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, { children: /* @__PURE__ */ jsxs(Combobox.Content, { children: [/* @__PURE__ */ jsx(Combobox.Empty, { children: messages.command.noMatches }), collection.items.map((item) => /* @__PURE__ */ jsx(Combobox.Item, {
 			item,
 			children: /* @__PURE__ */ jsx(Combobox.ItemText, { children: item })
 		}, item))] }) }) })]

package/dist/components/avatar/index.d.mts

@@ -12,8 +12,11 @@ export interface AvatarProps extends ComponentProps<typeof Avatar$1.Root> {
    * default (large) stands as tall as the biggest control so an avatar
    * rides a row without stretching it. */
   size?: AvatarSize;
+  /** The corner: round by default; square cuts it sharp, a stamp
+   * beside a round portrait. */
+  shape?: "circle" | "square";
 }
-declare function AvatarRoot({ size, ...rest }: AvatarProps): import("react").JSX.Element;
+declare function AvatarRoot({ size, shape, ...rest }: AvatarProps): import("react").JSX.Element;
 export declare const Avatar: typeof Avatar$1 & {
   Root: typeof AvatarRoot;
 };

package/dist/components/avatar/index.mjs

@@ -2,10 +2,11 @@ import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 import { Avatar as Avatar$1 } from "@ark-ui/react/avatar";
 //#region src/components/avatar/index.tsx
-function AvatarRoot({ size, ...rest }) {
+function AvatarRoot({ size, shape = "circle", ...rest }) {
 	return /* @__PURE__ */ jsx(Avatar$1.Root, {
 		...rest,
-		"data-size": size
+		"data-size": size,
+		"data-shape": shape
 	});
 }
 const Avatar = Object.assign({}, Avatar$1, { Root: AvatarRoot });

package/dist/components/banner/index.mjs

@@ -1,3 +1,4 @@
+import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/banner/index.tsx
@@ -31,24 +32,27 @@ const Description = part("Description", "p");
 const Actions = part("Actions", "div");
 /** The quiet close: a plain square-cut button; dismissal stays the
 * consumer's state. */
-const Close = (rest) => /* @__PURE__ */ jsx("button", {
-	...rest,
-	type: rest.type ?? "button",
-	"aria-label": rest["aria-label"] ?? "Dismiss",
-	"data-scope": "banner",
-	"data-part": "close",
-	children: /* @__PURE__ */ jsx("svg", {
-		viewBox: "0 0 16 16",
-		fill: "none",
-		"aria-hidden": true,
-		children: /* @__PURE__ */ jsx("path", {
-			d: "M4 4l8 8M12 4l-8 8",
-			stroke: "currentColor",
-			strokeWidth: 1.5,
-			strokeLinecap: "round"
+const Close = (rest) => {
+	const messages = useComponentMessages();
+	return /* @__PURE__ */ jsx("button", {
+		...rest,
+		type: rest.type ?? "button",
+		"aria-label": rest["aria-label"] ?? messages.banner.dismiss,
+		"data-scope": "banner",
+		"data-part": "close",
+		children: /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 16 16",
+			fill: "none",
+			"aria-hidden": true,
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M4 4l8 8M12 4l-8 8",
+				stroke: "currentColor",
+				strokeWidth: 1.5,
+				strokeLinecap: "round"
+			})
 		})
-	})
-});
+	});
+};
 const Banner = Object.assign(Root, {
 	Root,
 	Icon,

package/dist/components/bento/index.d.mts

@@ -0,0 +1,26 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/bento/index.d.ts
+export interface BentoProps extends HTMLAttributes<HTMLDivElement> {
+  /** Tracks across the lattice. */
+  columns?: number;
+  children?: ReactNode;
+}
+export interface BentoCellProps extends HTMLAttributes<HTMLDivElement> {
+  /** Columns this tile claims. */
+  span?: number;
+  /** Rows this tile claims. */
+  rowSpan?: number;
+  children?: ReactNode;
+}
+/** The bento lattice: a grid of unequal tiles that reads as one plate.
+ * The container owns the track count; each cell claims its own span. */
+export declare function BentoRoot({ columns, children, ...rest }: BentoProps): import("react").JSX.Element;
+/** One tile: `span` claims columns, `rowSpan` claims rows — the rest
+ * of the plate stays in measure. */
+export declare function BentoCell({ span, rowSpan, children, ...rest }: BentoCellProps): import("react").JSX.Element;
+/** The whole family under one handle — Bento.Root, Bento.Cell. */
+export declare const Bento: typeof BentoRoot & {
+  Root: typeof BentoRoot;
+  Cell: typeof BentoCell;
+};
+//#endregion

package/dist/components/bento/index.mjs

@@ -0,0 +1,41 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/bento/index.tsx
+/** The bento lattice: a grid of unequal tiles that reads as one plate.
+* The container owns the track count; each cell claims its own span. */
+function BentoRoot({ columns = 3, children, ...rest }) {
+	injectComponentStyle("bento");
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		"data-scope": "bento",
+		"data-part": "root",
+		style: {
+			...rest.style,
+			"--bs-bento-columns": String(columns)
+		},
+		children
+	});
+}
+/** One tile: `span` claims columns, `rowSpan` claims rows — the rest
+* of the plate stays in measure. */
+function BentoCell({ span = 1, rowSpan = 1, children, ...rest }) {
+	injectComponentStyle("bento");
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		"data-scope": "bento",
+		"data-part": "cell",
+		style: {
+			...rest.style,
+			"--bs-bento-span-x": String(span),
+			"--bs-bento-span-y": String(rowSpan)
+		},
+		children
+	});
+}
+/** The whole family under one handle — Bento.Root, Bento.Cell. */
+const Bento = Object.assign(BentoRoot, {
+	Root: BentoRoot,
+	Cell: BentoCell
+});
+//#endregion
+export { Bento, BentoCell, BentoRoot };

package/dist/components/block-ui/index.d.mts

@@ -0,0 +1,12 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/block-ui/index.d.ts
+export interface BlockUIProps extends HTMLAttributes<HTMLDivElement> {
+  /** Whether the curtain is drawn. */
+  blocked?: boolean;
+  children?: ReactNode;
+}
+/** A curtain over content that must wait: the blocked region keeps its
+ * shape and dims under frosted paper while a quiet wheel reports the
+ * wait. Callers own the state; the curtain only answers it. */
+export declare function BlockUI({ blocked, children, ...rest }: BlockUIProps): import("react").JSX.Element;
+//#endregion

package/dist/components/block-ui/index.mjs

@@ -0,0 +1,24 @@
+import { Spinner } from "../spinner/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/block-ui/index.tsx
+/** A curtain over content that must wait: the blocked region keeps its
+* shape and dims under frosted paper while a quiet wheel reports the
+* wait. Callers own the state; the curtain only answers it. */
+function BlockUI({ blocked = false, children, ...rest }) {
+	injectComponentStyle("block-ui");
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		"data-scope": "block-ui",
+		"data-part": "root",
+		"data-blocked": blocked ? "" : void 0,
+		"aria-busy": blocked || void 0,
+		children: [children, blocked ? /* @__PURE__ */ jsx("div", {
+			"data-scope": "block-ui",
+			"data-part": "mask",
+			children: /* @__PURE__ */ jsx(Spinner, { size: "lg" })
+		}) : null]
+	});
+}
+//#endregion
+export { BlockUI };

package/dist/components/breadcrumb/index.d.mts

@@ -1,13 +1,8 @@
 import { AnchorHTMLAttributes, HTMLAttributes } from "react";
 //#region src/components/breadcrumb/index.d.ts
-export declare const Breadcrumb: {
-  ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
-  displayName: string;
-} & {
-  Root: {
-    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
-    displayName: string;
-  };
+declare function Root({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+export declare const Breadcrumb: typeof Root & {
+  Root: typeof Root;
   List: {
     ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
     displayName: string;

package/dist/components/breadcrumb/index.mjs

@@ -1,3 +1,4 @@
+import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/breadcrumb/index.tsx
@@ -16,7 +17,16 @@ function part(name, tag, extra = {}, fallback) {
 	Component.displayName = "Breadcrumb" + name;
 	return Component;
 }
-const Root = part("Root", "nav", { "aria-label": "Breadcrumb" });
+function Root({ children, ...rest }) {
+	const messages = useComponentMessages();
+	return /* @__PURE__ */ jsx("nav", {
+		...rest,
+		"aria-label": rest["aria-label"] ?? messages.breadcrumb.label,
+		"data-scope": "breadcrumb",
+		"data-part": "root",
+		children
+	});
+}
 const List = part("List", "ol");
 const Item = part("Item", "li");
 const Link = part("Link", "a");

package/dist/components/browser/index.d.mts

@@ -0,0 +1,23 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/browser/index.d.ts
+export interface BrowserPartProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+}
+/** The three lamps are the system's own fixed pigments — the same
+ * semantics reserved for danger, warning, and success. */
+export declare function BrowserDots(props: BrowserPartProps): import("react").JSX.Element;
+export declare function BrowserRoot(props: BrowserPartProps): import("react").JSX.Element;
+export declare function BrowserTitleBar(props: BrowserPartProps): import("react").JSX.Element;
+export declare function BrowserUrlBar(props: BrowserPartProps): import("react").JSX.Element;
+export declare function BrowserBody(props: BrowserPartProps): import("react").JSX.Element;
+/** A browser window as a vessel: title bar, the three lamps, the
+ * address well, and a body that carries whatever the site hangs in
+ * it — an iframe, a screenshot, a live page. */
+export declare const Browser: typeof BrowserRoot & {
+  Root: typeof BrowserRoot;
+  TitleBar: typeof BrowserTitleBar;
+  Dots: typeof BrowserDots;
+  UrlBar: typeof BrowserUrlBar;
+  Body: typeof BrowserBody;
+};
+//#endregion

package/dist/components/browser/index.mjs

@@ -0,0 +1,70 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/browser/index.tsx
+/** The three lamps are the system's own fixed pigments — the same
+* semantics reserved for danger, warning, and success. */
+function BrowserDots(props) {
+	injectComponentStyle("browser");
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-scope": "browser",
+		"data-part": "dots",
+		children: [
+			"danger",
+			"warning",
+			"success"
+		].map((tone) => /* @__PURE__ */ jsx("span", {
+			"data-scope": "browser",
+			"data-part": "dot",
+			"data-tone": tone
+		}, tone))
+	});
+}
+function BrowserRoot(props) {
+	injectComponentStyle("browser");
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-scope": "browser",
+		"data-part": "root",
+		children: props.children
+	});
+}
+function BrowserTitleBar(props) {
+	injectComponentStyle("browser");
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-scope": "browser",
+		"data-part": "titlebar",
+		children: props.children
+	});
+}
+function BrowserUrlBar(props) {
+	injectComponentStyle("browser");
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-scope": "browser",
+		"data-part": "urlbar",
+		children: props.children
+	});
+}
+function BrowserBody(props) {
+	injectComponentStyle("browser");
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-scope": "browser",
+		"data-part": "body",
+		children: props.children
+	});
+}
+/** A browser window as a vessel: title bar, the three lamps, the
+* address well, and a body that carries whatever the site hangs in
+* it — an iframe, a screenshot, a live page. */
+const Browser = Object.assign(BrowserRoot, {
+	Root: BrowserRoot,
+	TitleBar: BrowserTitleBar,
+	Dots: BrowserDots,
+	UrlBar: BrowserUrlBar,
+	Body: BrowserBody
+});
+//#endregion
+export { Browser, BrowserBody, BrowserDots, BrowserRoot, BrowserTitleBar, BrowserUrlBar };