@ctrl-ui/react 0.8.1 → 0.8.4

package/dist/chat-layout.js

@@ -1,29 +1,47 @@
 import { cn } from "./lib/cn.js";
-import { skinAdornment } from "./skin.js";
-import { ScrollArea } from "./ui/scroll-area.js";
-import { Activity, ActivityContent, ActivityTitle, ActivityTrigger } from "./activity.js";
+import { SkinAdornment } from "./skin-provider.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat-layout.tsx
-function ChatLayout({ children, className, ...props }) {
+function ChatLayout({ children, chrome = "panel", className, ...props }) {
 	return /* @__PURE__ */ jsxs("section", {
 		"data-control-ui": "chat-layout",
 		"data-control-family": "chat-layout",
 		"data-slot": "root",
-		"data-surface": "panel",
+		"data-chrome": chrome,
+		"data-surface": chrome === "panel" ? "panel" : void 0,
 		className: cn("relative mx-auto flex min-h-[640px] w-full max-w-3xl flex-col overflow-hidden", className),
 		...props,
-		children: [skinAdornment("chat-layout", "titlebar", {}), children]
+		children: [chrome === "panel" ? /* @__PURE__ */ jsx(SkinAdornment, {
+			scope: "chat-layout",
+			part: "titlebar",
+			context: {}
+		}) : null, children]
 	});
 }
-function ChatThread({ children, className, ...props }) {
+function ChatThread({ children, composer, className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "chat-thread",
 		"data-control-family": "chat-layout",
 		"data-chat-layout-kind": "thread",
 		"data-slot": "root",
-		className: cn("flex min-h-0 flex-1 flex-col overflow-y-auto", className),
+		className: cn("min-h-0 min-w-0 flex-1 overflow-y-auto", className),
 		...props,
-		children
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "relative flex min-h-full min-w-0 flex-col",
+			children: [/* @__PURE__ */ jsx("div", {
+				"data-control-ui": "chat-thread",
+				"data-control-family": "chat-layout",
+				"data-slot": "thread-content",
+				className: "flex min-w-0 flex-1 flex-col",
+				children
+			}), composer ? /* @__PURE__ */ jsx("div", {
+				"data-control-ui": "chat-thread",
+				"data-control-family": "chat-layout",
+				"data-slot": "dock",
+				className: "sticky bottom-0 z-10 shrink-0",
+				children: composer
+			}) : null]
+		})
 	});
 }
 function ChatTurn({ from, children, className, ...props }) {
@@ -37,78 +55,5 @@ function ChatTurn({ from, children, className, ...props }) {
 		children
 	});
 }
-function ChatThought({ children = "Thought for a couple of seconds", details = "Read the attachment, grouped the notes by intent, and kept the final markdown compact enough to scan.", defaultOpen = false, collapsible, className, style, ...props }) {
-	if (collapsible) {
-		const Root = collapsible.Root;
-		const Trigger = collapsible.Trigger;
-		const Content = collapsible.Content;
-		return /* @__PURE__ */ jsxs(Root, {
-			defaultOpen,
-			"data-control-ui": "chat-thought",
-			"data-control-family": "chat-layout",
-			"data-chat-layout-kind": "thought",
-			"data-slot": "root",
-			className: cn("self-start", className),
-			style,
-			...props,
-			children: [/* @__PURE__ */ jsxs(Trigger, {
-				type: "button",
-				"data-control-ui": "chat-thought",
-				"data-control-family": "chat-layout",
-				"data-slot": "trigger",
-				className: "inline-flex items-center",
-				children: [children, /* @__PURE__ */ jsx("span", {
-					"aria-hidden": "true",
-					"data-control-ui": "chat-thought",
-					"data-control-family": "chat-layout",
-					"data-slot": "chevron",
-					children: "›"
-				})]
-			}), /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsx(ScrollArea, {
-				maxHeight: "min(24rem, 50dvh)",
-				lockAxis: "x",
-				viewportProps: {
-					"data-control-ui": "activity",
-					"data-control-family": "activity",
-					"data-slot": "content-viewport"
-				},
-				children: /* @__PURE__ */ jsxs("div", {
-					"data-control-ui": "chat-thought",
-					"data-control-family": "chat-layout",
-					"data-slot": "details",
-					className: "min-w-0 px-1 pb-2 pt-1",
-					children: [skinAdornment("chat-thought", "details", {}), details]
-				})
-			}) })]
-		});
-	}
-	return /* @__PURE__ */ jsxs(Activity, {
-		state: "success",
-		defaultOpen,
-		"data-control-ui": "chat-thought",
-		"data-control-family": "chat-layout",
-		"data-chat-layout-kind": "thought",
-		"data-slot": "root",
-		className: cn("self-start", className),
-		style,
-		...props,
-		children: [/* @__PURE__ */ jsx(ActivityTrigger, {
-			"data-control-ui": "chat-thought",
-			"data-control-family": "chat-layout",
-			"data-slot": "trigger",
-			children: /* @__PURE__ */ jsx(ActivityTitle, {
-				"data-control-ui": "chat-thought",
-				"data-control-family": "chat-layout",
-				"data-slot": "title",
-				children
-			})
-		}), /* @__PURE__ */ jsxs(ActivityContent, {
-			"data-control-ui": "chat-thought",
-			"data-control-family": "chat-layout",
-			"data-slot": "details",
-			children: [skinAdornment("chat-thought", "details", {}), details]
-		})]
-	});
-}
 //#endregion
-export { ChatLayout, ChatThought, ChatThread, ChatTurn };
+export { ChatLayout, ChatThread, ChatTurn };

package/dist/chat-message.d.ts

@@ -2,30 +2,29 @@ import { ChatMessageKnobStyle } from "./knob-contracts/chat-message-knobs.js";
 import { ChatMessageProps } from "./hooks/use-chat-message.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/chat-message.d.ts
-declare function ChatMessage({ from, state, density, className, children, ...props }: ChatMessageProps): import("react").JSX.Element;
-type ChatMessageRowProps = ComponentProps<"div"> & {
+export declare function ChatMessage({ from, state, density, className, children, ...props }: ChatMessageProps): import("react").JSX.Element;
+export type ChatMessageRowProps = ComponentProps<"div"> & {
   style?: CSSProperties & ChatMessageKnobStyle;
 };
-declare function ChatMessageRow({ className, children, ...props }: ChatMessageRowProps): import("react").JSX.Element;
-type ChatMessageAvatarProps = Omit<ComponentProps<"div">, "style"> & {
+export declare function ChatMessageRow({ className, children, ...props }: ChatMessageRowProps): import("react").JSX.Element;
+export type ChatMessageAvatarProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & ChatMessageKnobStyle;
 };
-declare function ChatMessageAvatar({ className, ...props }: ChatMessageAvatarProps): import("react").JSX.Element;
-type ChatMessageBodyProps = ComponentProps<"div"> & {
+export declare function ChatMessageAvatar({ className, ...props }: ChatMessageAvatarProps): import("react").JSX.Element;
+export type ChatMessageBodyProps = ComponentProps<"div"> & {
   style?: CSSProperties & ChatMessageKnobStyle;
 };
-declare function ChatMessageBody({ className, ...props }: ChatMessageBodyProps): import("react").JSX.Element;
-type ChatMessageHeaderProps = Omit<ComponentProps<"div">, "style"> & {
+export declare function ChatMessageBody({ className, ...props }: ChatMessageBodyProps): import("react").JSX.Element;
+export type ChatMessageHeaderProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & ChatMessageKnobStyle;
 };
-declare function ChatMessageHeader({ className, ...props }: ChatMessageHeaderProps): import("react").JSX.Element;
-type ChatMessageContentProps = Omit<ComponentProps<"div">, "style"> & {
+export declare function ChatMessageHeader({ className, ...props }: ChatMessageHeaderProps): import("react").JSX.Element;
+export type ChatMessageContentProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & ChatMessageKnobStyle;
 };
-declare function ChatMessageContent({ className, ...props }: ChatMessageContentProps): import("react").JSX.Element;
-type ChatMessageActionsProps = Omit<ComponentProps<"div">, "style"> & {
+export declare function ChatMessageContent({ className, ...props }: ChatMessageContentProps): import("react").JSX.Element;
+export type ChatMessageActionsProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & ChatMessageKnobStyle;
 };
-declare function ChatMessageActions({ className, ...props }: ChatMessageActionsProps): import("react").JSX.Element;
-//#endregion
-export { ChatMessage, ChatMessageActions, ChatMessageActionsProps, ChatMessageAvatar, ChatMessageAvatarProps, ChatMessageBody, ChatMessageBodyProps, ChatMessageContent, ChatMessageContentProps, ChatMessageHeader, ChatMessageHeaderProps, ChatMessageRow, ChatMessageRowProps };
+export declare function ChatMessageActions({ className, ...props }: ChatMessageActionsProps): import("react").JSX.Element;
+//#endregion

package/dist/context-model.d.ts

@@ -1,15 +1,15 @@
 import { ReactNode } from "react";
 //#region src/context-model.d.ts
-type ContextSegmentKind = "system" | "tool" | "message" | "source" | "reasoning" | "cache" | "other";
-type ContextStatus = "normal" | "over-limit" | "unavailable";
-type ContextSegment = {
+export type ContextSegmentKind = "system" | "tool" | "message" | "source" | "reasoning" | "cache" | "other";
+export type ContextStatus = "normal" | "over-limit" | "unavailable";
+export type ContextSegment = {
   id: string;
   label: string;
   tokens: number;
   kind?: ContextSegmentKind;
   description?: ReactNode;
 };
-type ContextModelSegment = {
+export type ContextModelSegment = {
   segment: ContextSegment;
   kind: ContextSegmentKind;
   tokens: number;
@@ -17,7 +17,7 @@ type ContextModelSegment = {
   width: number;
   ratio: number | null;
 };
-type ContextModel = {
+export type ContextModel = {
   segments: readonly ContextModelSegment[];
   usedTokens: number;
   maxTokens: number | null;
@@ -28,6 +28,5 @@ type ContextModel = {
   limitPosition: number | null;
   status: ContextStatus;
 };
-declare function deriveContextModel(segments: readonly ContextSegment[], maxTokens?: number | null): ContextModel;
-//#endregion
-export { ContextModel, ContextModelSegment, ContextSegment, ContextSegmentKind, ContextStatus, deriveContextModel };
+export declare function deriveContextModel(segments: readonly ContextSegment[], maxTokens?: number | null): ContextModel;
+//#endregion

package/dist/context.d.ts

@@ -7,7 +7,7 @@ import { ContextKnobStyle } from "./knob-contracts/context-knobs.js";
 import { PopoverContent, PopoverDescription, PopoverTitle } from "./ui/popover.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 //#region src/context.d.ts
-type ContextProps = Omit<ComponentProps<"div">, "children"> & {
+export type ContextProps = Omit<ComponentProps<"div">, "children"> & {
   segments: readonly ContextSegment[];
   maxTokens?: number | null;
   model?: string;
@@ -22,26 +22,25 @@ type ContextProps = Omit<ComponentProps<"div">, "children"> & {
 type ContextStyleProps<Props, Style> = Omit<Props, "style"> & {
   style?: CSSProperties & Style;
 };
-declare function Context({ segments, maxTokens, model: modelName, locale, open, defaultOpen, onOpenChange, className, children, ...props }: ContextProps): import("react").JSX.Element;
-type ContextTriggerProps = ContextStyleProps<ComponentProps<typeof Button>, ButtonKnobStyle & ContextKnobStyle>;
-declare function ContextTrigger({ "aria-label": ariaLabel, variant, size, className, children, ...props }: ContextTriggerProps): import("react").JSX.Element;
-type ContextContentProps = ContextStyleProps<ComponentProps<typeof PopoverContent>, PopupKnobStyle & ContextKnobStyle>;
-declare function ContextContent({ "aria-label": ariaLabel, side, align, sideOffset, collisionPadding, padding, className, children, ...props }: ContextContentProps): import("react").JSX.Element;
-type ContextHeaderProps = ComponentProps<"div"> & {
+export declare function Context({ segments, maxTokens, model: modelName, locale, open, defaultOpen, onOpenChange, className, children, ...props }: ContextProps): import("react").JSX.Element;
+export type ContextTriggerProps = ContextStyleProps<ComponentProps<typeof Button>, ButtonKnobStyle & ContextKnobStyle>;
+export declare function ContextTrigger({ "aria-label": ariaLabel, variant, size, className, children, ...props }: ContextTriggerProps): import("react").JSX.Element;
+export type ContextContentProps = ContextStyleProps<ComponentProps<typeof PopoverContent>, PopupKnobStyle & ContextKnobStyle>;
+export declare function ContextContent({ "aria-label": ariaLabel, side, align, sideOffset, collisionPadding, padding, className, children, ...props }: ContextContentProps): import("react").JSX.Element;
+export type ContextHeaderProps = ComponentProps<"div"> & {
   style?: CSSProperties & ContextKnobStyle;
 };
-declare function ContextHeader({ className, children, ...props }: ContextHeaderProps): import("react").JSX.Element;
-type ContextTitleProps = ContextStyleProps<ComponentProps<typeof PopoverTitle>, ContextKnobStyle>;
-declare function ContextTitle({ className, children, ...props }: ContextTitleProps): import("react").JSX.Element;
-type ContextDescriptionProps = ContextStyleProps<ComponentProps<typeof PopoverDescription>, ContextKnobStyle>;
-declare function ContextDescription({ className, children, ...props }: ContextDescriptionProps): import("react").JSX.Element;
-type ContextSummaryProps = ContextStyleProps<ComponentProps<"div">, ContextKnobStyle>;
-declare function ContextSummary({ className, children, ...props }: ContextSummaryProps): import("react").JSX.Element;
-type ContextGraphProps = ContextStyleProps<Omit<ComponentProps<"svg">, "children">, ContextKnobStyle>;
-declare function ContextGraph({ className, ...props }: ContextGraphProps): import("react").JSX.Element;
-type ContextLegendProps = ContextStyleProps<ComponentProps<"ul">, ContextKnobStyle>;
-declare function ContextLegend({ className, children, ...props }: ContextLegendProps): import("react").JSX.Element;
-type ContextCloseProps = ComponentProps<typeof Button>;
-declare function ContextClose({ variant, size, iconOnly, "aria-label": ariaLabel, className, children, ...props }: ContextCloseProps): import("react").JSX.Element;
-//#endregion
-export { Context, ContextClose, ContextCloseProps, ContextContent, ContextContentProps, ContextDescription, ContextDescriptionProps, ContextGraph, ContextGraphProps, ContextHeader, ContextHeaderProps, ContextLegend, ContextLegendProps, ContextProps, ContextSummary, ContextSummaryProps, ContextTitle, ContextTitleProps, ContextTrigger, ContextTriggerProps };
+export declare function ContextHeader({ className, children, ...props }: ContextHeaderProps): import("react").JSX.Element;
+export type ContextTitleProps = ContextStyleProps<ComponentProps<typeof PopoverTitle>, ContextKnobStyle>;
+export declare function ContextTitle({ className, children, ...props }: ContextTitleProps): import("react").JSX.Element;
+export type ContextDescriptionProps = ContextStyleProps<ComponentProps<typeof PopoverDescription>, ContextKnobStyle>;
+export declare function ContextDescription({ className, children, ...props }: ContextDescriptionProps): import("react").JSX.Element;
+export type ContextSummaryProps = ContextStyleProps<ComponentProps<"div">, ContextKnobStyle>;
+export declare function ContextSummary({ className, children, ...props }: ContextSummaryProps): import("react").JSX.Element;
+export type ContextGraphProps = ContextStyleProps<Omit<ComponentProps<"svg">, "children">, ContextKnobStyle>;
+export declare function ContextGraph({ className, ...props }: ContextGraphProps): import("react").JSX.Element;
+export type ContextLegendProps = ContextStyleProps<ComponentProps<"ul">, ContextKnobStyle>;
+export declare function ContextLegend({ className, children, ...props }: ContextLegendProps): import("react").JSX.Element;
+export type ContextCloseProps = ComponentProps<typeof Button>;
+export declare function ContextClose({ variant, size, iconOnly, "aria-label": ariaLabel, className, children, ...props }: ContextCloseProps): import("react").JSX.Element;
+//#endregion

package/dist/control-props.d.ts

@@ -1,19 +1,19 @@
 import { ComponentProps, ReactElement } from "react";
 //#region src/control-props.d.ts
-type FormSubmitEvent = Parameters<NonNullable<ComponentProps<"form">["onSubmit"]>>[0];
-type ControlledChoice<TValue extends string = string> = {
+export type FormSubmitEvent = Parameters<NonNullable<ComponentProps<"form">["onSubmit"]>>[0];
+export type ControlledChoice<TValue extends string = string> = {
   value?: TValue;
   defaultValue?: NoInfer<TValue>;
   onValueChange?: (value: TValue) => void;
 };
-type ControlledMultiChoice<TValue extends string = string> = {
+export type ControlledMultiChoice<TValue extends string = string> = {
   value?: TValue[];
   defaultValue?: NoInfer<TValue>[];
   onValueChange?: (value: TValue[]) => void;
 };
-type RenderProp<Props, State extends Record<string, unknown> = Record<string, unknown>> = ReactElement | ((props: Props, state: State) => ReactElement<unknown>);
-type OpenChangeReason = "trigger-hover" | "trigger-focus" | "trigger-press" | "outside-press" | "escape-key" | "close-watcher" | "close-press" | "focus-out" | "list-navigation" | "item-press" | "sibling-open" | "cancel-open" | "input-change" | "input-clear" | "input-press" | "clear-press" | "chip-remove-press" | "imperative-action" | "swipe" | "none";
-type OpenChangeEventDetails = {
+export type RenderProp<Props, State extends Record<string, unknown> = Record<string, unknown>> = ReactElement | ((props: Props, state: State) => ReactElement<unknown>);
+export type OpenChangeReason = "trigger-hover" | "trigger-focus" | "trigger-press" | "outside-press" | "escape-key" | "close-watcher" | "close-press" | "focus-out" | "list-navigation" | "item-press" | "sibling-open" | "cancel-open" | "input-change" | "input-clear" | "input-press" | "clear-press" | "chip-remove-press" | "imperative-action" | "swipe" | "none";
+export type OpenChangeEventDetails = {
   reason: OpenChangeReason;
   event: Event;
   cancel: () => void;
@@ -22,8 +22,7 @@ type OpenChangeEventDetails = {
   isPropagationAllowed: boolean;
   trigger: Element | undefined;
 };
-type SelectionIndicator = "none" | "slide";
-type HoverIndicator = "none" | "hover";
-declare const SIDEBAR_COOKIE_NAME = "sidebar_state";
-//#endregion
-export { ControlledChoice, ControlledMultiChoice, FormSubmitEvent, HoverIndicator, OpenChangeEventDetails, OpenChangeReason, RenderProp, SIDEBAR_COOKIE_NAME, SelectionIndicator };
+export type SelectionIndicator = "none" | "slide";
+export type HoverIndicator = "none" | "hover";
+export declare const SIDEBAR_COOKIE_NAME = "sidebar_state";
+//#endregion

package/dist/control-variants.d.ts

@@ -1,8 +1,7 @@
 //#region src/control-variants.d.ts
-type ControlSize = "xs" | "sm" | "md" | "lg";
-declare const controlVariants: readonly ["solid", "surface", "ghost", "quiet"];
-type ControlVariant = (typeof controlVariants)[number];
-declare const controlTones: readonly ["neutral", "primary", "danger"];
-type ControlTone = (typeof controlTones)[number];
-//#endregion
-export { ControlSize, ControlTone, ControlVariant, controlTones, controlVariants };
+export type ControlSize = "xs" | "sm" | "md" | "lg";
+export declare const controlVariants: readonly ["solid", "surface", "ghost", "quiet"];
+export type ControlVariant = (typeof controlVariants)[number];
+export declare const controlTones: readonly ["neutral", "primary", "danger"];
+export type ControlTone = (typeof controlTones)[number];
+//#endregion

package/dist/dynamic-notification-glass.d.ts

@@ -1,10 +1,9 @@
 //#region src/dynamic-notification-glass.d.ts
-type DynamicNotificationGlassOptions = {
+export type DynamicNotificationGlassOptions = {
   /** Aurora strength 0..1 (default 1). */
   intensity?: number;
   /** devicePixelRatio clamp (default 2) — island is small, 2x is visually lossless. */
   maxDpr?: number;
 };
-declare function createDynamicNotificationGlass(canvas: HTMLCanvasElement, options?: DynamicNotificationGlassOptions): () => void;
-//#endregion
-export { DynamicNotificationGlassOptions, createDynamicNotificationGlass };
+export declare function createDynamicNotificationGlass(canvas: HTMLCanvasElement, options?: DynamicNotificationGlassOptions): () => void;
+//#endregion

package/dist/dynamic-notification-liquid.d.ts

@@ -1,5 +1,5 @@
 //#region src/dynamic-notification-liquid.d.ts
-type DynamicNotificationLiquidOptions = {
+export type DynamicNotificationLiquidOptions = {
   /** Virtual lens depth (default 0.85) applied to size-derived inner edge profile. */
   refraction?: number;
   /** Chromatic aberration (default 0) — optional RGB separation; Apple does not expose it as material property. */
@@ -19,6 +19,5 @@ type DynamicNotificationLiquidOptions = {
   /** devicePixelRatio clamp (default 2). */
   maxDpr?: number;
 };
-declare function createDynamicNotificationLiquid(canvas: HTMLCanvasElement, options?: DynamicNotificationLiquidOptions): () => void;
-//#endregion
-export { DynamicNotificationLiquidOptions, createDynamicNotificationLiquid };
+export declare function createDynamicNotificationLiquid(canvas: HTMLCanvasElement, options?: DynamicNotificationLiquidOptions): () => void;
+//#endregion

package/dist/dynamic-notification-siri-wave.d.ts

@@ -1,4 +1,3 @@
 //#region src/dynamic-notification-siri-wave.d.ts
-declare const DYNAMIC_NOTIFICATION_SIRI_WAVE_GLSL = "\nconst float SIRI_PI = 3.14159265359;\nconst float SIRI_AMPLITUDE = 0.32;\nconst float SIRI_FREQUENCY = 1.1;\nconst float SIRI_ABERRATION_FREQUENCY = 1.0;\nconst float SIRI_SPEED = 2.4;\nconst float SIRI_WAVE_SCALE = 0.6;\nconst float SIRI_ABERRATION = 2.6;\nconst float SIRI_THICKNESS = 3.0;\nconst float SIRI_INTENSITY = 2.0;\nconst float SIRI_FALLOFF = 1.7;\nconst float SIRI_EDGE_MASK = 0.4;\nconst float SIRI_BAND_FILL = 30000.0;\nconst float SIRI_BAND_THICKNESS = 0.08;\nconst float SIRI_SOFTNESS = 2.5;\nconst float SIRI_LOW_AMPLITUDE = 6.0;\nconst float SIRI_LOW_INTENSITY = 1.5;\nconst float SIRI_MID_ABERRATION = 0.8;\nconst float SIRI_MID_ABERRATION_AMPLITUDE = 0.05;\nconst float SIRI_MID_SOFTNESS = 0.4;\nconst float SIRI_HIGH_ABERRATION = 0.5;\nconst float SIRI_HIGH_ABERRATION_AMPLITUDE = 0.06;\n\nvec3 siriSpectrum(int strand) {\n  float x = float(strand);\n  return clamp(vec3(abs(x - 3.0) - 1.0, 2.0 - abs(x - 2.0), 2.0 - abs(x - 4.0)), 0.0, 1.0);\n}\n\nvec3 dynamicNotificationSiriWave(vec2 uv, vec2 resolution, float time, float horizon, float lift) {\n  float aspect = resolution.x / max(resolution.y, 1.0);\n  vec2 p = vec2((uv.x * 2.0 - 1.0) * aspect, (uv.y - horizon + lift * 0.55) * 2.0);\n  float screenY = p.y;\n  p /= max(SIRI_WAVE_SCALE, 0.1);\n\n  float low = clamp(0.45 + 0.45 * sin(time * 0.8) * sin(time * 0.37 + 1.0), 0.0, 1.0);\n  float mid = clamp(0.40 + 0.40 * sin(time * 1.7 + 2.0) * sin(time * 0.53), 0.0, 1.0);\n  float high = clamp(0.30 + 0.30 * sin(time * 2.9 + 4.0) * sin(time * 0.71 + 2.0), 0.0, 1.0);\n  float drift = mod(time, 20.0 * SIRI_PI) * SIRI_SPEED;\n\n  float horizontalPosition = uv.x * 2.0 - 1.0;\n  float envelope = cos(SIRI_PI * 0.5 * min(abs(0.9 * horizontalPosition), 1.0));\n  envelope *= envelope;\n\n  float primaryAmplitude = SIRI_AMPLITUDE + 0.01 * low * SIRI_LOW_AMPLITUDE;\n  float strandAmplitude = primaryAmplitude + mid * SIRI_MID_ABERRATION_AMPLITUDE + high * SIRI_HIGH_ABERRATION_AMPLITUDE;\n  float aberration = SIRI_ABERRATION + mid * SIRI_MID_ABERRATION + high * SIRI_HIGH_ABERRATION;\n  float thickness = 0.01 * SIRI_THICKNESS;\n  float intensity = 0.01 * (SIRI_INTENSITY + low * SIRI_LOW_INTENSITY);\n  float softness = 0.01 * max(0.0, SIRI_SOFTNESS + mid * SIRI_MID_SOFTNESS);\n  float primaryY = primaryAmplitude * envelope * sin(p.x * SIRI_FREQUENCY + drift);\n  float bandAmount = 1e-4 * SIRI_BAND_FILL * intensity;\n\n  vec3 numerator = vec3(0.0);\n  vec3 denominator = vec3(0.0);\n  for (int strand = 0; strand < 4; strand++) {\n    vec3 hue = siriSpectrum(strand);\n    denominator += hue;\n    float phase = mix(-aberration, aberration, float(strand) / 3.0);\n    float strandY = strandAmplitude * envelope * sin(p.x * SIRI_ABERRATION_FREQUENCY + drift + phase);\n    float distanceToStrand = abs(p.y - strandY);\n    float line = intensity / (sqrt(distanceToStrand * distanceToStrand + softness * softness) + thickness);\n    float bandLow = min(primaryY, strandY);\n    float bandHigh = max(primaryY, strandY);\n    float distanceToBand = max(0.0, max(p.y - bandHigh, bandLow - p.y));\n    float band = bandAmount / (distanceToBand + SIRI_BAND_THICKNESS);\n    numerator += hue * (line + band);\n  }\n\n  vec3 color = numerator / max(denominator, vec3(0.0001));\n  float primaryDistance = abs(p.y - primaryY);\n  color += 0.5 * intensity / (sqrt(primaryDistance * primaryDistance + softness * softness) + thickness);\n  color = pow(max(color, 0.0), vec3(1.5));\n\n  float edgeFadePosition = clamp((abs(screenY) - 1.0) / -SIRI_EDGE_MASK, 0.0, 1.0);\n  float edgeFade = edgeFadePosition * edgeFadePosition * (3.0 - 2.0 * edgeFadePosition);\n  color *= edgeFade * exp(-pow(horizontalPosition * SIRI_FALLOFF, 2.0));\n  return color;\n}\n";
-//#endregion
-export { DYNAMIC_NOTIFICATION_SIRI_WAVE_GLSL };
+export declare const DYNAMIC_NOTIFICATION_SIRI_WAVE_GLSL = "\nconst float SIRI_PI = 3.14159265359;\nconst float SIRI_AMPLITUDE = 0.32;\nconst float SIRI_FREQUENCY = 1.1;\nconst float SIRI_ABERRATION_FREQUENCY = 1.0;\nconst float SIRI_SPEED = 2.4;\nconst float SIRI_WAVE_SCALE = 0.6;\nconst float SIRI_ABERRATION = 2.6;\nconst float SIRI_THICKNESS = 3.0;\nconst float SIRI_INTENSITY = 2.0;\nconst float SIRI_FALLOFF = 1.7;\nconst float SIRI_EDGE_MASK = 0.4;\nconst float SIRI_BAND_FILL = 30000.0;\nconst float SIRI_BAND_THICKNESS = 0.08;\nconst float SIRI_SOFTNESS = 2.5;\nconst float SIRI_LOW_AMPLITUDE = 6.0;\nconst float SIRI_LOW_INTENSITY = 1.5;\nconst float SIRI_MID_ABERRATION = 0.8;\nconst float SIRI_MID_ABERRATION_AMPLITUDE = 0.05;\nconst float SIRI_MID_SOFTNESS = 0.4;\nconst float SIRI_HIGH_ABERRATION = 0.5;\nconst float SIRI_HIGH_ABERRATION_AMPLITUDE = 0.06;\n\nvec3 siriSpectrum(int strand) {\n  float x = float(strand);\n  return clamp(vec3(abs(x - 3.0) - 1.0, 2.0 - abs(x - 2.0), 2.0 - abs(x - 4.0)), 0.0, 1.0);\n}\n\nvec3 dynamicNotificationSiriWave(vec2 uv, vec2 resolution, float time, float horizon, float lift) {\n  float aspect = resolution.x / max(resolution.y, 1.0);\n  vec2 p = vec2((uv.x * 2.0 - 1.0) * aspect, (uv.y - horizon + lift * 0.55) * 2.0);\n  float screenY = p.y;\n  p /= max(SIRI_WAVE_SCALE, 0.1);\n\n  float low = clamp(0.45 + 0.45 * sin(time * 0.8) * sin(time * 0.37 + 1.0), 0.0, 1.0);\n  float mid = clamp(0.40 + 0.40 * sin(time * 1.7 + 2.0) * sin(time * 0.53), 0.0, 1.0);\n  float high = clamp(0.30 + 0.30 * sin(time * 2.9 + 4.0) * sin(time * 0.71 + 2.0), 0.0, 1.0);\n  float drift = mod(time, 20.0 * SIRI_PI) * SIRI_SPEED;\n\n  float horizontalPosition = uv.x * 2.0 - 1.0;\n  float envelope = cos(SIRI_PI * 0.5 * min(abs(0.9 * horizontalPosition), 1.0));\n  envelope *= envelope;\n\n  float primaryAmplitude = SIRI_AMPLITUDE + 0.01 * low * SIRI_LOW_AMPLITUDE;\n  float strandAmplitude = primaryAmplitude + mid * SIRI_MID_ABERRATION_AMPLITUDE + high * SIRI_HIGH_ABERRATION_AMPLITUDE;\n  float aberration = SIRI_ABERRATION + mid * SIRI_MID_ABERRATION + high * SIRI_HIGH_ABERRATION;\n  float thickness = 0.01 * SIRI_THICKNESS;\n  float intensity = 0.01 * (SIRI_INTENSITY + low * SIRI_LOW_INTENSITY);\n  float softness = 0.01 * max(0.0, SIRI_SOFTNESS + mid * SIRI_MID_SOFTNESS);\n  float primaryY = primaryAmplitude * envelope * sin(p.x * SIRI_FREQUENCY + drift);\n  float bandAmount = 1e-4 * SIRI_BAND_FILL * intensity;\n\n  vec3 numerator = vec3(0.0);\n  vec3 denominator = vec3(0.0);\n  for (int strand = 0; strand < 4; strand++) {\n    vec3 hue = siriSpectrum(strand);\n    denominator += hue;\n    float phase = mix(-aberration, aberration, float(strand) / 3.0);\n    float strandY = strandAmplitude * envelope * sin(p.x * SIRI_ABERRATION_FREQUENCY + drift + phase);\n    float distanceToStrand = abs(p.y - strandY);\n    float line = intensity / (sqrt(distanceToStrand * distanceToStrand + softness * softness) + thickness);\n    float bandLow = min(primaryY, strandY);\n    float bandHigh = max(primaryY, strandY);\n    float distanceToBand = max(0.0, max(p.y - bandHigh, bandLow - p.y));\n    float band = bandAmount / (distanceToBand + SIRI_BAND_THICKNESS);\n    numerator += hue * (line + band);\n  }\n\n  vec3 color = numerator / max(denominator, vec3(0.0001));\n  float primaryDistance = abs(p.y - primaryY);\n  color += 0.5 * intensity / (sqrt(primaryDistance * primaryDistance + softness * softness) + thickness);\n  color = pow(max(color, 0.0), vec3(1.5));\n\n  float edgeFadePosition = clamp((abs(screenY) - 1.0) / -SIRI_EDGE_MASK, 0.0, 1.0);\n  float edgeFade = edgeFadePosition * edgeFadePosition * (3.0 - 2.0 * edgeFadePosition);\n  color *= edgeFade * exp(-pow(horizontalPosition * SIRI_FALLOFF, 2.0));\n  return color;\n}\n";
+//#endregion

package/dist/dynamic-notification.d.ts

@@ -4,8 +4,8 @@ import { DynamicNotificationKnobStyle } from "./knob-contracts/dynamic-notificat
 import { DynamicNotificationProps, DynamicNotificationVariant } from "./hooks/use-dynamic-notification.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/dynamic-notification.d.ts
-type DynamicNotificationState = "collapsed" | "thinking" | "expanded";
-declare function useDynamicNotificationContext(): {
+export type DynamicNotificationState = "collapsed" | "thinking" | "expanded";
+export declare function useDynamicNotificationContext(): {
   open: boolean;
   disabled: boolean;
   setOpen: (nextOpen: boolean, reason: OpenChangeReason, event: Event, trigger?: Element) => void;
@@ -20,55 +20,54 @@ declare function useDynamicNotificationContext(): {
   variant: DynamicNotificationVariant;
   contentId: string;
 };
-declare function DynamicNotification({ open, defaultOpen, onOpenChange, loading, replyValue, defaultReplyValue, onReplyValueChange, onReply, variant, disabled, className, children, ...props }: DynamicNotificationProps): import("react").JSX.Element;
-type DynamicNotificationIslandProps = ComponentProps<"section"> & {
+export declare function DynamicNotification({ open, defaultOpen, onOpenChange, loading, replyValue, defaultReplyValue, onReplyValueChange, onReply, variant, disabled, className, children, ...props }: DynamicNotificationProps): import("react").JSX.Element;
+export type DynamicNotificationIslandProps = ComponentProps<"section"> & {
   style?: CSSProperties & DynamicNotificationKnobStyle;
 };
-declare function DynamicNotificationIsland({ className, onKeyDown, ...props }: DynamicNotificationIslandProps): import("react").JSX.Element;
-type DynamicNotificationGlassProps = ComponentProps<"canvas"> & {
+export declare function DynamicNotificationIsland({ className, onKeyDown, ...props }: DynamicNotificationIslandProps): import("react").JSX.Element;
+export type DynamicNotificationGlassProps = ComponentProps<"canvas"> & {
   style?: CSSProperties & DynamicNotificationKnobStyle;
 };
 /** Optional upgrade for variant="glass" — CSS fallback stays underneath. */
-declare function DynamicNotificationGlass({ className, ...props }: DynamicNotificationGlassProps): import("react").JSX.Element;
-type DynamicNotificationLiquidProps = ComponentProps<"canvas"> & {
+export declare function DynamicNotificationGlass({ className, ...props }: DynamicNotificationGlassProps): import("react").JSX.Element;
+export type DynamicNotificationLiquidProps = ComponentProps<"canvas"> & {
   style?: CSSProperties & DynamicNotificationKnobStyle;
 };
 /** WebGL transmits nearest scene through surface while keeping distortion concentrated at its edge. */
-declare function DynamicNotificationLiquid({ className, ...props }: DynamicNotificationLiquidProps): import("react").JSX.Element;
-type DynamicNotificationPillProps = ComponentProps<"button"> & {
+export declare function DynamicNotificationLiquid({ className, ...props }: DynamicNotificationLiquidProps): import("react").JSX.Element;
+export type DynamicNotificationPillProps = ComponentProps<"button"> & {
   style?: CSSProperties & DynamicNotificationKnobStyle;
 };
-declare function DynamicNotificationPill({ className, children, onClick, ...props }: DynamicNotificationPillProps): import("react").JSX.Element;
-type DynamicNotificationIndicatorProps = ComponentProps<"span"> & {
+export declare function DynamicNotificationPill({ className, children, onClick, ...props }: DynamicNotificationPillProps): import("react").JSX.Element;
+export type DynamicNotificationIndicatorProps = ComponentProps<"span"> & {
   style?: CSSProperties & DynamicNotificationKnobStyle;
 };
 /** Breathing orb marking assistant activity; dynamic-notification.css animates it. */
-declare function DynamicNotificationIndicator({ className, ...props }: DynamicNotificationIndicatorProps): import("react").JSX.Element;
-type DynamicNotificationContentProps = ComponentProps<"div"> & {
+export declare function DynamicNotificationIndicator({ className, ...props }: DynamicNotificationIndicatorProps): import("react").JSX.Element;
+export type DynamicNotificationContentProps = ComponentProps<"div"> & {
   style?: CSSProperties & DynamicNotificationKnobStyle;
 };
-declare function DynamicNotificationContent({ className, id, ...props }: DynamicNotificationContentProps): import("react").JSX.Element;
-type DynamicNotificationTitleProps = ComponentProps<"div"> & {
+export declare function DynamicNotificationContent({ className, id, ...props }: DynamicNotificationContentProps): import("react").JSX.Element;
+export type DynamicNotificationTitleProps = ComponentProps<"div"> & {
   style?: CSSProperties & DynamicNotificationKnobStyle;
 };
-declare function DynamicNotificationTitle({ className, ...props }: DynamicNotificationTitleProps): import("react").JSX.Element;
-type DynamicNotificationMessageProps = Omit<ComponentProps<"p">, "children"> & {
+export declare function DynamicNotificationTitle({ className, ...props }: DynamicNotificationTitleProps): import("react").JSX.Element;
+export type DynamicNotificationMessageProps = Omit<ComponentProps<"p">, "children"> & {
   children: string;
 } & {
   style?: CSSProperties & DynamicNotificationKnobStyle;
 };
-declare function DynamicNotificationMessage({ className, children, ...props }: DynamicNotificationMessageProps): import("react").JSX.Element;
-type DynamicNotificationReplyProps = ComponentProps<"form"> & {
+export declare function DynamicNotificationMessage({ className, children, ...props }: DynamicNotificationMessageProps): import("react").JSX.Element;
+export type DynamicNotificationReplyProps = ComponentProps<"form"> & {
   style?: CSSProperties & DynamicNotificationKnobStyle;
 };
-declare function DynamicNotificationReply({ className, onSubmit, ...props }: DynamicNotificationReplyProps): import("react").JSX.Element;
-type DynamicNotificationReplyInputProps = ComponentProps<"input"> & {
+export declare function DynamicNotificationReply({ className, onSubmit, ...props }: DynamicNotificationReplyProps): import("react").JSX.Element;
+export type DynamicNotificationReplyInputProps = ComponentProps<"input"> & {
   style?: CSSProperties & DynamicNotificationKnobStyle;
 };
-declare function DynamicNotificationReplyInput({ className, onChange, disabled, ...props }: DynamicNotificationReplyInputProps): import("react").JSX.Element;
-type DynamicNotificationReplySubmitProps = ComponentProps<typeof Button>;
-declare function DynamicNotificationReplySubmit({ className, disabled, children, ...props }: DynamicNotificationReplySubmitProps): import("react").JSX.Element;
-type DynamicNotificationCloseProps = ComponentProps<typeof Button>;
-declare function DynamicNotificationClose({ className, children, onClick, ...props }: DynamicNotificationCloseProps): import("react").JSX.Element;
-//#endregion
-export { DynamicNotification, DynamicNotificationClose, DynamicNotificationCloseProps, DynamicNotificationContent, DynamicNotificationContentProps, DynamicNotificationGlass, DynamicNotificationGlassProps, DynamicNotificationIndicator, DynamicNotificationIndicatorProps, DynamicNotificationIsland, DynamicNotificationIslandProps, DynamicNotificationLiquid, DynamicNotificationLiquidProps, DynamicNotificationMessage, DynamicNotificationMessageProps, DynamicNotificationPill, DynamicNotificationPillProps, DynamicNotificationReply, DynamicNotificationReplyInput, DynamicNotificationReplyInputProps, DynamicNotificationReplyProps, DynamicNotificationReplySubmit, DynamicNotificationReplySubmitProps, DynamicNotificationState, DynamicNotificationTitle, DynamicNotificationTitleProps, useDynamicNotificationContext };
+export declare function DynamicNotificationReplyInput({ className, onChange, disabled, ...props }: DynamicNotificationReplyInputProps): import("react").JSX.Element;
+export type DynamicNotificationReplySubmitProps = ComponentProps<typeof Button>;
+export declare function DynamicNotificationReplySubmit({ className, disabled, children, ...props }: DynamicNotificationReplySubmitProps): import("react").JSX.Element;
+export type DynamicNotificationCloseProps = ComponentProps<typeof Button>;
+export declare function DynamicNotificationClose({ className, children, onClick, ...props }: DynamicNotificationCloseProps): import("react").JSX.Element;
+//#endregion

package/dist/email/email.d.ts

@@ -2,7 +2,7 @@ import { EmailTheme } from "./theme.js";
 import { ReactNode } from "react";
 import { ButtonProps, HeadingProps, LinkProps, TextProps } from "react-email";
 //#region src/email/email.d.ts
-declare function EmailLayout({ theme, preview, children, head, lang, dir }: {
+export declare function EmailLayout({ theme, preview, children, head, lang, dir }: {
   theme: EmailTheme;
   preview: string;
   children: ReactNode;
@@ -16,13 +16,12 @@ declare const headingClasses: {
   h3: string;
   h4: string;
 };
-declare function EmailHeading({ as, className, ...props }: Omit<HeadingProps, "as"> & {
+export declare function EmailHeading({ as, className, ...props }: Omit<HeadingProps, "as"> & {
   as?: keyof typeof headingClasses;
 }): import("react").JSX.Element;
-declare function EmailText({ tone, className, style, ...props }: TextProps & {
+export declare function EmailText({ tone, className, style, ...props }: TextProps & {
   tone?: "default" | "muted";
 }): import("react").JSX.Element;
-declare function EmailButton({ className, ...props }: ButtonProps): import("react").JSX.Element;
-declare function EmailLink({ className, ...props }: LinkProps): import("react").JSX.Element;
-//#endregion
-export { EmailButton, EmailHeading, EmailLayout, EmailLink, EmailText };
+export declare function EmailButton({ className, ...props }: ButtonProps): import("react").JSX.Element;
+export declare function EmailLink({ className, ...props }: LinkProps): import("react").JSX.Element;
+//#endregion

package/dist/email/email.js

@@ -6,11 +6,20 @@ function tailwindTheme(theme) {
 		presets: [pixelBasedPreset],
 		theme: { extend: {
 			colors: theme.colors,
+			borderRadius: theme.radii,
+			minHeight: { control: theme.button.height },
+			padding: {
+				"control-x": theme.button.paddingInline,
+				"control-y": theme.button.paddingBlock
+			},
 			fontFamily: {
 				body: theme.fonts.body,
 				display: theme.fonts.display
 			},
-			fontSize: Object.fromEntries(Object.entries(theme.text).map(([name, { fontSize, ...options }]) => [name, [fontSize, options]]))
+			fontSize: {
+				...Object.fromEntries(Object.entries(theme.text).map(([name, { fontSize, ...options }]) => [name, [fontSize, options]])),
+				control: [theme.button.fontSize, { lineHeight: theme.button.lineHeight }]
+			}
 		} }
 	};
 }
@@ -23,7 +32,7 @@ function EmailLayout({ theme, preview, children, head, lang = "en", dir = "ltr"
 			children: [/* @__PURE__ */ jsx(Head, { children: head }), /* @__PURE__ */ jsxs(Body, {
 				className: "m-0 bg-background p-4 font-body text-body text-foreground",
 				children: [/* @__PURE__ */ jsx(Preview, { children: preview }), /* @__PURE__ */ jsx(Container, {
-					className: "mx-auto w-full max-w-[600px] bg-card p-6 text-card-foreground",
+					className: "mx-auto w-full max-w-[600px] rounded-panel bg-card p-6 text-card-foreground",
 					children
 				})]
 			})]
@@ -57,7 +66,7 @@ function EmailText({ tone = "default", className = "", style, ...props }) {
 function EmailButton({ className = "", ...props }) {
 	return /* @__PURE__ */ jsx(Button, {
 		...props,
-		className: `box-border bg-primary px-5 py-3 text-center font-body text-body font-semibold text-primary-foreground no-underline ${className}`
+		className: `box-border min-h-control rounded-control bg-primary px-control-x py-control-y text-center font-body text-control font-medium text-primary-foreground no-underline ${className}`
 	});
 }
 function EmailLink({ className = "", ...props }) {

package/dist/email/length.d.ts

@@ -0,0 +1,3 @@
+//#region src/email/length.d.ts
+export declare function emailLengthPixels(name: string, value: string, rootFontSize: number, allowZero?: boolean): number;
+//#endregion

package/dist/email/length.js

@@ -0,0 +1,34 @@
+//#region src/email/length.ts
+function parseLengthQuantity(value, rootFontSize) {
+	const match = /^(-?\d*\.?\d+)(px|rem)?$/.exec(value.trim());
+	if (!match) return null;
+	return {
+		amount: Number(match[1]) * (match[2] === "rem" ? rootFontSize : 1),
+		unit: match[2] ? "px" : ""
+	};
+}
+function calculateLengthExpression(expression, rootFontSize) {
+	const match = /^\s*(-?\d*\.?\d+(?:px|rem)?)\s*([+*/-])\s*(-?\d*\.?\d+(?:px|rem)?)\s*$/.exec(expression);
+	if (!match) return null;
+	const left = parseLengthQuantity(match[1], rootFontSize);
+	const right = parseLengthQuantity(match[3], rootFontSize);
+	if (!left || !right) return null;
+	const operator = match[2];
+	if ((operator === "+" || operator === "-") && left.unit === right.unit) return `${left.amount + (operator === "+" ? right.amount : -right.amount)}${left.unit}`;
+	if (operator === "*" && !(left.unit && right.unit)) return `${left.amount * right.amount}${left.unit || right.unit}`;
+	if (operator === "/" && !right.unit && right.amount !== 0) return `${left.amount / right.amount}${left.unit}`;
+	return null;
+}
+function emailLengthPixels(name, value, rootFontSize, allowZero = false) {
+	let resolved = value;
+	for (let depth = 0; depth < 16 && resolved.includes("calc("); depth++) {
+		const simplified = resolved.replace(/calc\(([^()]*)\)/g, (original, expression) => calculateLengthExpression(expression, rootFontSize) ?? original);
+		if (simplified === resolved) break;
+		resolved = simplified;
+	}
+	const result = parseLengthQuantity(resolved, rootFontSize);
+	if (!(result && (result.unit === "px" || result.amount === 0) && Number.isFinite(result.amount) && (allowZero ? result.amount >= 0 : result.amount > 0))) throw new Error(`Email theme: ${name} must resolve to a ${allowZero ? "non-negative" : "positive"} px/rem length, received ${value}.`);
+	return result.amount;
+}
+//#endregion
+export { emailLengthPixels };