@ctrl-ui/react 0.8.2 → 0.8.5

package/README.md

@@ -1,6 +1,6 @@
 # @ctrl-ui/react
 
-Every Control UI component, block, and primitive with the Refined skin, as a versioned package. Same source as the registry, built from the `all-refined` install set. Prefer the [registry](https://control-ui.dev/get-started) when you want to own and edit the source or run another skin.
+Every Control UI component, block, and primitive with neutral defaults. The package contains no skin presets and needs no provider or skin config. Use the [registry](https://control-ui.dev/get-started) when you want to own and edit the component source.
 
 ## Install
 
@@ -8,7 +8,7 @@ Every Control UI component, block, and primitive with the Refined skin, as a ver
 bun add @ctrl-ui/react
 ```
 
-Requires React 19 and Tailwind CSS v4. Wire the styles once in `app/globals.css`:
+Requires React 19 and Tailwind CSS v4. Wire the styles once in your global CSS:
 
 ```css
 @import "tailwindcss";
@@ -16,45 +16,54 @@ Requires React 19 and Tailwind CSS v4. Wire the styles once in `app/globals.css`
 @source "../node_modules/@ctrl-ui/react/dist";
 ```
 
-Stamp the skin on the root element:
-
-```tsx
-<html lang="en" data-skin="refined">
-```
-
 ## Use
 
-Import paths mirror the registry tree, so any docs example works after replacing `@/components/control-ui/` with `@ctrl-ui/react/`.
-
 ```tsx
-import { ChatMessage } from "@ctrl-ui/react/chat-message";
 import { Button } from "@ctrl-ui/react/ui/button";
-```
-
-`styles/index.css` imports every recipe. To ship less CSS, import the four base sheets and only the recipes you use:
 
-```css
-@import "@ctrl-ui/react/styles/theme.css";
-@import "@ctrl-ui/react/styles/effects.css";
-@import "@ctrl-ui/react/styles/skin-theme.css";
-@import "@ctrl-ui/react/styles/skin.css";
-@import "@ctrl-ui/react/styles/recipes/button.css";
+<Button>Save</Button>
 ```
 
+Import paths mirror the registry tree. To ship less CSS, import `styles/theme.css` and only the recipes and effects your components use.
+
 ## Customize
 
-Override tokens after the imports, and tune a component through its typed knobs:
+Your application owns its theme. Override the library's neutral defaults in your CSS:
 
 ```css
-[data-skin="refined"] {
-  --cui-accent: oklch(0.6 0.2 260);
+:root {
+  --primary: oklch(0.45 0.18 260);
+  --radius: 4px;
+}
+.dark {
+  --primary: oklch(0.78 0.1 260);
 }
 ```
 
+Component knobs customize one instance:
+
 ```tsx
 <Button style={{ "--cui-button-radius": "4px" }}>Save</Button>
 ```
 
+For scoped themes, behavior choices, or adornments, pass your own `ControlUiSkin` to the optional provider. Define configurations containing render functions in a client module:
+
+```tsx
+"use client";
+
+import type { ReactNode } from "react";
+import type { ControlUiSkin } from "@ctrl-ui/react/skin";
+import { SkinProvider } from "@ctrl-ui/react/skin-provider";
+
+const skin: ControlUiSkin = { id: "acme", indicators: { sidebar: "hover" } };
+
+export function AppTheme({ children }: { children: ReactNode }) {
+  return <SkinProvider skin={skin}><div data-skin="acme">{children}</div></SkinProvider>;
+}
+```
+
+Scope the corresponding CSS to `[data-skin="acme"]`. Portalled surfaces carry the provider's id, so they receive the same theme. With no provider, portals inherit the root theme. Each provider owns its subtree; there is no global skin singleton.
+
 ## Optional peers
 
 Install a peer only when you import the component that needs it.

package/dist/action-bar.d.ts

@@ -2,8 +2,8 @@ import { ActionBarKnobStyle } from "./knob-contracts/action-bar-knobs.js";
 import { Button } from "./ui/button.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 //#region src/action-bar.d.ts
-type ActionBarCopyValue = string | (() => string | Promise<string>);
-type ActionBarContextValue = {
+export type ActionBarCopyValue = string | (() => string | Promise<string>);
+export type ActionBarContextValue = {
   copyValue?: ActionBarCopyValue;
   editValue?: ActionBarCopyValue;
   onCopy?: (value: string) => void;
@@ -11,7 +11,7 @@ type ActionBarContextValue = {
   onEdit?: (value: string) => void;
   onEditError?: (error: unknown) => void;
 };
-type ActionBarProps = Omit<ComponentProps<"div">, "style"> & {
+export type ActionBarProps = Omit<ComponentProps<"div">, "style"> & {
   label?: string;
   align?: "start" | "end";
   context?: ActionBarContextValue;
@@ -23,22 +23,21 @@ type ActionBarProps = Omit<ComponentProps<"div">, "style"> & {
   onEditError?: (error: unknown) => void;
   style?: CSSProperties & ActionBarKnobStyle;
 };
-declare function ActionBar({ label, align, className, children, context, copyValue, editValue, onCopy, onCopyError, onEdit, onEditError, ...props }: ActionBarProps): import("react").JSX.Element;
-type ActionBarItemProps = ComponentProps<typeof Button> & {
+export declare function ActionBar({ label, align, className, children, context, copyValue, editValue, onCopy, onCopyError, onEdit, onEditError, ...props }: ActionBarProps): import("react").JSX.Element;
+export type ActionBarItemProps = ComponentProps<typeof Button> & {
   icon?: ReactNode;
 };
-declare function ActionBarItem({ icon, children, className, ...props }: ActionBarItemProps): import("react").JSX.Element;
-type ActionBarCopyProps = Omit<ActionBarItemProps, "children"> & {
+export declare function ActionBarItem({ icon, children, className, ...props }: ActionBarItemProps): import("react").JSX.Element;
+export type ActionBarCopyProps = Omit<ActionBarItemProps, "children"> & {
   value?: ActionBarCopyValue;
   children?: ReactNode;
   copiedChildren?: ReactNode;
   resetDelay?: number;
 };
-declare function ActionBarCopy({ value, children, copiedChildren, resetDelay, disabled, onClick, ...props }: ActionBarCopyProps): import("react").JSX.Element;
-type ActionBarEditProps = Omit<ActionBarItemProps, "children"> & {
+export declare function ActionBarCopy({ value, children, copiedChildren, resetDelay, disabled, onClick, ...props }: ActionBarCopyProps): import("react").JSX.Element;
+export type ActionBarEditProps = Omit<ActionBarItemProps, "children"> & {
   value?: ActionBarCopyValue;
   children?: ReactNode;
 };
-declare function ActionBarEdit({ value, children, disabled, onClick, ...props }: ActionBarEditProps): import("react").JSX.Element;
-//#endregion
-export { ActionBar, ActionBarContextValue, ActionBarCopy, ActionBarCopyProps, ActionBarCopyValue, ActionBarEdit, ActionBarEditProps, ActionBarItem, ActionBarItemProps, ActionBarProps };
+export declare function ActionBarEdit({ value, children, disabled, onClick, ...props }: ActionBarEditProps): import("react").JSX.Element;
+//#endregion

package/dist/activity.d.ts

@@ -4,10 +4,10 @@ import { ScrollAreaProps } from "./ui/scroll-area.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 import { ChevronRight } from "lucide-react";
 //#region src/activity.d.ts
-type ActivityState = "pending" | "running" | "success" | "error";
-type ActivityKind = "default" | "tool" | "reasoning" | "signal";
-type ActivityDetailFormat = "text" | "code";
-type ActivityProps = Omit<CollapsibleProps, "children" | "style"> & {
+export type ActivityState = "pending" | "running" | "success" | "error";
+export type ActivityKind = "default" | "tool" | "reasoning" | "signal";
+export type ActivityDetailFormat = "text" | "code";
+export type ActivityProps = Omit<CollapsibleProps, "children" | "style"> & {
   children?: ReactNode;
   kind?: ActivityKind;
   name?: string;
@@ -18,36 +18,35 @@ type ActivityProps = Omit<CollapsibleProps, "children" | "style"> & {
 type ActivityStyleProps<Props, Style> = Omit<Props, "style"> & {
   style?: CSSProperties & Style;
 };
-declare function Activity({ kind, name, state, statusLabel, className, children, ...props }: ActivityProps): import("react").JSX.Element;
-type ActivityRowProps = ActivityStyleProps<ComponentProps<"div">, ActivityKnobStyle>;
-declare function ActivityRow({ className, ...props }: ActivityRowProps): import("react").JSX.Element;
-type ActivityTriggerProps = ActivityStyleProps<ComponentProps<typeof CollapsibleTrigger>, ActivityKnobStyle> & {
+export declare function Activity({ kind, name, state, statusLabel, className, children, ...props }: ActivityProps): import("react").JSX.Element;
+export type ActivityRowProps = ActivityStyleProps<ComponentProps<"div">, ActivityKnobStyle>;
+export declare function ActivityRow({ className, ...props }: ActivityRowProps): import("react").JSX.Element;
+export type ActivityTriggerProps = ActivityStyleProps<ComponentProps<typeof CollapsibleTrigger>, ActivityKnobStyle> & {
   chevronProps?: ActivityStyleProps<ComponentProps<typeof ChevronRight>, ActivityKnobStyle> & {
     "data-slot"?: string;
   };
 };
-declare function ActivityTrigger({ className, children, chevronProps, ...props }: ActivityTriggerProps): import("react").JSX.Element;
-type ActivityIconProps = ActivityStyleProps<ComponentProps<"span">, ActivityKnobStyle>;
-declare function ActivityIcon({ className, children, ...props }: ActivityIconProps): import("react").JSX.Element;
-type ActivityTitleProps = ActivityStyleProps<ComponentProps<"span">, ActivityKnobStyle>;
-declare function ActivityTitle({ className, children, ...props }: ActivityTitleProps): import("react").JSX.Element;
-type ActivityStatusProps = ActivityStyleProps<ComponentProps<"span">, ActivityKnobStyle>;
-declare function ActivityStatus({ className, children, ...props }: ActivityStatusProps): import("react").JSX.Element;
-type ActivityContentProps = Omit<ComponentProps<typeof CollapsibleContent>, "children"> & {
+export declare function ActivityTrigger({ className, children, chevronProps, ...props }: ActivityTriggerProps): import("react").JSX.Element;
+export type ActivityIconProps = ActivityStyleProps<ComponentProps<"span">, ActivityKnobStyle>;
+export declare function ActivityIcon({ className, children, ...props }: ActivityIconProps): import("react").JSX.Element;
+export type ActivityTitleProps = ActivityStyleProps<ComponentProps<"span">, ActivityKnobStyle>;
+export declare function ActivityTitle({ className, children, ...props }: ActivityTitleProps): import("react").JSX.Element;
+export type ActivityStatusProps = ActivityStyleProps<ComponentProps<"span">, ActivityKnobStyle>;
+export declare function ActivityStatus({ className, children, ...props }: ActivityStatusProps): import("react").JSX.Element;
+export type ActivityContentProps = Omit<ComponentProps<typeof CollapsibleContent>, "children"> & {
   children?: ReactNode;
   maxHeight?: string | false;
   scrollAreaProps?: Omit<ScrollAreaProps, "children" | "maxHeight">;
 };
-declare function ActivityContent({ className, children, maxHeight, scrollAreaProps, ...props }: ActivityContentProps): import("react").JSX.Element;
-type ActivityDetailProps = ComponentProps<"div"> & {
+export declare function ActivityContent({ className, children, maxHeight, scrollAreaProps, ...props }: ActivityContentProps): import("react").JSX.Element;
+export type ActivityDetailProps = ComponentProps<"div"> & {
   style?: CSSProperties & ActivityKnobStyle;
 };
-declare function ActivityDetail({ className, ...props }: ActivityDetailProps): import("react").JSX.Element;
-type ActivityDetailLabelProps = ActivityStyleProps<ComponentProps<"div">, ActivityKnobStyle>;
-declare function ActivityDetailLabel({ className, ...props }: ActivityDetailLabelProps): import("react").JSX.Element;
-type ActivityDetailContentProps = ActivityStyleProps<ComponentProps<"div">, ActivityKnobStyle> & {
+export declare function ActivityDetail({ className, ...props }: ActivityDetailProps): import("react").JSX.Element;
+export type ActivityDetailLabelProps = ActivityStyleProps<ComponentProps<"div">, ActivityKnobStyle>;
+export declare function ActivityDetailLabel({ className, ...props }: ActivityDetailLabelProps): import("react").JSX.Element;
+export type ActivityDetailContentProps = ActivityStyleProps<ComponentProps<"div">, ActivityKnobStyle> & {
   format?: ActivityDetailFormat;
 };
-declare function ActivityDetailContent({ format, className, ...props }: ActivityDetailContentProps): import("react").JSX.Element;
-//#endregion
-export { Activity, ActivityContent, ActivityContentProps, ActivityDetail, ActivityDetailContent, ActivityDetailContentProps, ActivityDetailFormat, ActivityDetailLabel, ActivityDetailLabelProps, ActivityDetailProps, ActivityIcon, ActivityIconProps, ActivityKind, ActivityProps, ActivityRow, ActivityRowProps, ActivityState, ActivityStatus, ActivityStatusProps, ActivityTitle, ActivityTitleProps, ActivityTrigger, ActivityTriggerProps };
+export declare function ActivityDetailContent({ format, className, ...props }: ActivityDetailContentProps): import("react").JSX.Element;
+//#endregion

package/dist/audio-recorder.d.ts

@@ -8,25 +8,25 @@ import { CSSProperties, ComponentProps } from "react";
 type AudioRecorderStyleProps<Props, Style> = Omit<Props, "style"> & {
   style?: CSSProperties & Style;
 };
-declare function useAudioRecorderContext(): UseAudioRecorderResult;
-type AudioRecorderProps = Omit<ComponentProps<"div">, "style"> & UseAudioRecorderOptions & {
+export declare function useAudioRecorderContext(): UseAudioRecorderResult;
+export type AudioRecorderProps = Omit<ComponentProps<"div">, "style"> & UseAudioRecorderOptions & {
   label?: string;
   style?: CSSProperties & AudioRecorderKnobStyle;
 };
-declare function AudioRecorder({ onRecordingComplete, onCancel, maxDurationMs, disabled, barCount, barDurationMs, deviceId, label, className, children, ...props }: AudioRecorderProps): import("react").JSX.Element;
-type AudioRecorderTriggerProps = AudioRecorderStyleProps<ComponentProps<typeof Button>, ButtonKnobStyle & AudioRecorderKnobStyle>;
-declare function AudioRecorderTrigger({ className, children, disabled, onClick, ...props }: AudioRecorderTriggerProps): import("react").JSX.Element;
-type AudioRecorderVisualizerProps = AudioRecorderStyleProps<Omit<ComponentProps<"div">, "children">, AudioVisualizerKnobStyle & AudioRecorderKnobStyle> & {
+export declare function AudioRecorder({ onRecordingComplete, onCancel, maxDurationMs, disabled, barCount, barDurationMs, deviceId, label, className, children, ...props }: AudioRecorderProps): import("react").JSX.Element;
+export type AudioRecorderTriggerProps = AudioRecorderStyleProps<ComponentProps<typeof Button>, ButtonKnobStyle & AudioRecorderKnobStyle>;
+export declare function AudioRecorderTrigger({ className, children, disabled, onClick, ...props }: AudioRecorderTriggerProps): import("react").JSX.Element;
+export type AudioRecorderVisualizerProps = AudioRecorderStyleProps<Omit<ComponentProps<"div">, "children">, AudioVisualizerKnobStyle & AudioRecorderKnobStyle> & {
   points?: number;
 };
-declare function AudioRecorderVisualizer({ points, className, ...props }: AudioRecorderVisualizerProps): import("react").JSX.Element;
-type AudioRecorderStatusProps = AudioRecorderStyleProps<ComponentProps<"span">, AudioRecorderKnobStyle>;
-declare function AudioRecorderStatus({ className, children, ...props }: AudioRecorderStatusProps): import("react").JSX.Element;
-type AudioRecorderDurationProps = AudioRecorderStyleProps<ComponentProps<"span">, AudioRecorderKnobStyle>;
-declare function AudioRecorderDuration({ className, children, ...props }: AudioRecorderDurationProps): import("react").JSX.Element;
-type AudioRecorderCancelProps = AudioRecorderStyleProps<ComponentProps<typeof Button>, ButtonKnobStyle & AudioRecorderKnobStyle>;
-declare function AudioRecorderCancel({ className, children, disabled, onClick, tabIndex, ...props }: AudioRecorderCancelProps): import("react").JSX.Element;
-type AudioRecorderSubmitProps = AudioRecorderStyleProps<ComponentProps<typeof Button>, ButtonKnobStyle & AudioRecorderKnobStyle>;
-declare function AudioRecorderSubmit({ className, children, disabled, onClick, tabIndex, ...props }: AudioRecorderSubmitProps): import("react").JSX.Element;
+export declare function AudioRecorderVisualizer({ points, className, ...props }: AudioRecorderVisualizerProps): import("react").JSX.Element;
+export type AudioRecorderStatusProps = AudioRecorderStyleProps<ComponentProps<"span">, AudioRecorderKnobStyle>;
+export declare function AudioRecorderStatus({ className, children, ...props }: AudioRecorderStatusProps): import("react").JSX.Element;
+export type AudioRecorderDurationProps = AudioRecorderStyleProps<ComponentProps<"span">, AudioRecorderKnobStyle>;
+export declare function AudioRecorderDuration({ className, children, ...props }: AudioRecorderDurationProps): import("react").JSX.Element;
+export type AudioRecorderCancelProps = AudioRecorderStyleProps<ComponentProps<typeof Button>, ButtonKnobStyle & AudioRecorderKnobStyle>;
+export declare function AudioRecorderCancel({ className, children, disabled, onClick, tabIndex, ...props }: AudioRecorderCancelProps): import("react").JSX.Element;
+export type AudioRecorderSubmitProps = AudioRecorderStyleProps<ComponentProps<typeof Button>, ButtonKnobStyle & AudioRecorderKnobStyle>;
+export declare function AudioRecorderSubmit({ className, children, disabled, onClick, tabIndex, ...props }: AudioRecorderSubmitProps): import("react").JSX.Element;
 //#endregion
-export { AudioRecorder, AudioRecorderCancel, AudioRecorderCancelProps, AudioRecorderDuration, AudioRecorderDurationProps, AudioRecorderProps, AudioRecorderStatus, AudioRecorderStatusProps, AudioRecorderSubmit, AudioRecorderSubmitProps, AudioRecorderTrigger, AudioRecorderTriggerProps, AudioRecorderVisualizer, AudioRecorderVisualizerProps, type AudioRecording, useAudioRecorderContext };
+export type { AudioRecording };

package/dist/audio-visualizer.d.ts

@@ -1,12 +1,11 @@
 import { AudioVisualizerKnobStyle } from "./knob-contracts/audio-visualizer-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/audio-visualizer.d.ts
-type AudioVisualizerProps = Omit<ComponentProps<"div">, "children" | "style"> & {
+export type AudioVisualizerProps = Omit<ComponentProps<"div">, "children" | "style"> & {
   levels: readonly number[];
   active?: boolean;
   points?: number;
   style?: CSSProperties & AudioVisualizerKnobStyle;
 };
-declare function AudioVisualizer({ levels, points, active, className, style, ...props }: AudioVisualizerProps): import("react").JSX.Element;
-//#endregion
-export { AudioVisualizer, AudioVisualizerProps };
+export declare function AudioVisualizer({ levels, points, active, className, style, ...props }: AudioVisualizerProps): import("react").JSX.Element;
+//#endregion

package/dist/audio-visualizer.js

@@ -35,7 +35,7 @@ function AudioVisualizer({ levels, points, active = true, className, style, ...p
 				const visibleLevel = MIN_VISIBLE_LEVEL + perceptualLevel * .88;
 				const levelStyle = {
 					"--_audio-visualizer-level-opacity": `${.48 + perceptualLevel * .52}`,
-					clipPath: `inset(${(1 - visibleLevel) * 50}% 0 round var(--radius-control))`
+					clipPath: `inset(${(1 - visibleLevel) * 50}% 0 round var(--cui-audio-visualizer-bar-radius))`
 				};
 				return /* @__PURE__ */ jsx("span", {
 					"data-control-ui": "audio-visualizer",

package/dist/blocks/chat.d.ts

@@ -1,10 +1,9 @@
 import { ChatLayout } from "../chat-layout.js";
 import { ComponentProps, ReactNode } from "react";
 //#region src/blocks/chat.d.ts
-type ChatBlockProps = Omit<ComponentProps<typeof ChatLayout>, "children"> & {
+export type ChatBlockProps = Omit<ComponentProps<typeof ChatLayout>, "children"> & {
   children: ReactNode;
   composer: ReactNode;
 };
-declare function ChatBlock({ children, composer, className, ...props }: ChatBlockProps): import("react").JSX.Element;
-//#endregion
-export { ChatBlock, ChatBlockProps };
+export declare function ChatBlock({ children, composer, className, ...props }: ChatBlockProps): import("react").JSX.Element;
+//#endregion

package/dist/blocks/chat.js

@@ -1,11 +1,14 @@
 import { ChatLayout, ChatThread } from "../chat-layout.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 //#region src/blocks/chat.tsx
 function ChatBlock({ children, composer, className, ...props }) {
-	return /* @__PURE__ */ jsxs(ChatLayout, {
+	return /* @__PURE__ */ jsx(ChatLayout, {
 		className,
 		...props,
-		children: [/* @__PURE__ */ jsx(ChatThread, { children }), composer]
+		children: /* @__PURE__ */ jsx(ChatThread, {
+			composer,
+			children
+		})
 	});
 }
 //#endregion

package/dist/blocks/coding-agent.d.ts

@@ -1,25 +1,25 @@
 import { ChatLayout } from "../chat-layout.js";
 import { ComponentProps, ReactNode } from "react";
 //#region src/blocks/coding-agent.d.ts
-type CodingAgentNavigationItem = {
+export type CodingAgentNavigationItem = {
   id: string;
   label: string;
   icon?: ReactNode;
   trailing?: ReactNode;
 };
-type CodingAgentTask = {
+export type CodingAgentTask = {
   id: string;
   title: string;
   trailing?: ReactNode;
 };
-type CodingAgentProject = {
+export type CodingAgentProject = {
   id: string;
   name: string;
   icon?: ReactNode;
   tasks: readonly CodingAgentTask[];
   open?: boolean;
 };
-type CodingAgentBlockProps = Omit<ComponentProps<"div">, "children"> & {
+export type CodingAgentBlockProps = Omit<ComponentProps<"div">, "children"> & {
   appName?: string;
   brand?: ReactNode;
   sidebarTop?: ReactNode;
@@ -36,26 +36,25 @@ type CodingAgentBlockProps = Omit<ComponentProps<"div">, "children"> & {
   children: ReactNode;
   layout?: "viewport" | "contained";
 };
-declare function CodingAgentBlock({ appName, brand, sidebarTop, navigation, projects, activeTaskId, activeTaskTitle, onNavigationSelect, onTaskSelect, onNewTask, onSearch, headerActions, sidebarFooter, children, layout, className, style, ...props }: CodingAgentBlockProps): import("react").JSX.Element;
-type CodingAgentConversationProps = Omit<ComponentProps<typeof ChatLayout>, "children"> & {
+export declare function CodingAgentBlock({ appName, brand, sidebarTop, navigation, projects, activeTaskId, activeTaskTitle, onNavigationSelect, onTaskSelect, onNewTask, onSearch, headerActions, sidebarFooter, children, layout, className, style, ...props }: CodingAgentBlockProps): import("react").JSX.Element;
+export type CodingAgentConversationProps = Omit<ComponentProps<typeof ChatLayout>, "children"> & {
   children: ReactNode;
   composer: ReactNode;
 };
-declare function CodingAgentConversation({ children, composer, className, ...props }: CodingAgentConversationProps): import("react").JSX.Element;
-type CodingAgentSuggestion = {
+export declare function CodingAgentConversation({ children, composer, className, ...props }: CodingAgentConversationProps): import("react").JSX.Element;
+export type CodingAgentSuggestion = {
   id: string;
   title: string;
   description?: string;
   icon?: ReactNode;
   prompt?: string;
 };
-type CodingAgentEmptyStateProps = Omit<ComponentProps<"section">, "title"> & {
+export type CodingAgentEmptyStateProps = Omit<ComponentProps<"section">, "title"> & {
   title?: ReactNode;
   description?: ReactNode;
   icon?: ReactNode;
   suggestions?: readonly CodingAgentSuggestion[];
   onSuggestionSelect?: (prompt: string, suggestion: CodingAgentSuggestion) => void;
 };
-declare function CodingAgentEmptyState({ title, description, icon, suggestions, onSuggestionSelect, className, ...props }: CodingAgentEmptyStateProps): import("react").JSX.Element;
-//#endregion
-export { CodingAgentBlock, CodingAgentBlockProps, CodingAgentConversation, CodingAgentConversationProps, CodingAgentEmptyState, CodingAgentEmptyStateProps, CodingAgentNavigationItem, CodingAgentProject, CodingAgentSuggestion, CodingAgentTask };
+export declare function CodingAgentEmptyState({ title, description, icon, suggestions, onSuggestionSelect, className, ...props }: CodingAgentEmptyStateProps): import("react").JSX.Element;
+//#endregion

package/dist/blocks/coding-agent.js

@@ -189,19 +189,20 @@ function CodingAgentSidebar({ appName, brand, sidebarTop, navigation, projects,
 	});
 }
 function CodingAgentConversation({ children, composer, className, ...props }) {
-	return /* @__PURE__ */ jsxs(ChatLayout, {
-		className: cn("h-full min-h-0 max-w-none rounded-none border-0 bg-transparent shadow-none", className),
+	return /* @__PURE__ */ jsx(ChatLayout, {
+		chrome: "embedded",
+		className: cn("h-full min-h-0 max-w-none", className),
 		...props,
-		children: [/* @__PURE__ */ jsx(ChatThread, {
-			className: "px-0 py-8 sm:px-0",
+		children: /* @__PURE__ */ jsx(ChatThread, {
+			composer: /* @__PURE__ */ jsx("div", {
+				className: "mx-auto w-full max-w-3xl px-2 sm:px-6",
+				children: composer
+			}),
 			children: /* @__PURE__ */ jsx("div", {
-				className: "mx-auto flex min-h-full w-full max-w-3xl flex-col gap-8 px-4 sm:px-8",
+				className: "mx-auto flex w-full max-w-3xl flex-1 flex-col gap-8",
 				children
 			})
-		}), /* @__PURE__ */ jsx("div", {
-			className: "mx-auto w-full max-w-3xl px-2 sm:px-6",
-			children: composer
-		})]
+		})
 	});
 }
 function CodingAgentEmptyState({ title = "What should we build?", description, icon, suggestions = [], onSuggestionSelect, className, ...props }) {

package/dist/blocks/file-explorer-data.d.ts

@@ -1,10 +1,10 @@
 import { ReactNode } from "react";
 //#region src/blocks/file-explorer-data.d.ts
-type FileExplorerEntryDetail = {
+export type FileExplorerEntryDetail = {
   label: string;
   value: ReactNode;
 };
-type FileExplorerEntry = {
+export type FileExplorerEntry = {
   id: string;
   name: string;
   kind: "file" | "folder";
@@ -15,43 +15,42 @@ type FileExplorerEntry = {
   preview?: ReactNode;
   children?: readonly FileExplorerEntry[];
 };
-type FileExplorerLocation = {
+export type FileExplorerLocation = {
   id: string;
   label: string;
   group?: string;
   icon?: ReactNode;
   entries: readonly FileExplorerEntry[];
 };
-type FileExplorerColumn = {
+export type FileExplorerColumn = {
   id: string;
   label: string;
   entries: readonly FileExplorerEntry[];
   selectedId?: string;
 };
-type FileExplorerBreadcrumb = {
+export type FileExplorerBreadcrumb = {
   id: string;
   label: string;
   path: readonly string[];
   entry?: FileExplorerEntry;
 };
-type FileExplorerResolution = {
+export type FileExplorerResolution = {
   columns: readonly FileExplorerColumn[];
   breadcrumbs: readonly FileExplorerBreadcrumb[];
   selectedEntry?: FileExplorerEntry;
   validPath: readonly string[];
 };
-type FileExplorerSearchResult = {
+export type FileExplorerSearchResult = {
   entry: FileExplorerEntry;
   path: readonly string[];
   parents: readonly string[];
 };
-declare function resolveFileExplorer(location: FileExplorerLocation, selectedPath: readonly string[]): FileExplorerResolution;
-declare function groupFileExplorerItems<T extends {
+export declare function resolveFileExplorer(location: FileExplorerLocation, selectedPath: readonly string[]): FileExplorerResolution;
+export declare function groupFileExplorerItems<T extends {
   group?: string;
 }>(items: readonly T[]): {
   label: string;
   items: T[];
 }[];
-declare function searchFileExplorer(location: FileExplorerLocation, query: string): readonly FileExplorerSearchResult[];
-//#endregion
-export { FileExplorerBreadcrumb, FileExplorerColumn, FileExplorerEntry, FileExplorerEntryDetail, FileExplorerLocation, FileExplorerResolution, FileExplorerSearchResult, groupFileExplorerItems, resolveFileExplorer, searchFileExplorer };
+export declare function searchFileExplorer(location: FileExplorerLocation, query: string): readonly FileExplorerSearchResult[];
+//#endregion

package/dist/blocks/file-explorer.d.ts

@@ -1,7 +1,7 @@
 import { FileExplorerBreadcrumb, FileExplorerColumn, FileExplorerEntry, FileExplorerEntryDetail, FileExplorerLocation, FileExplorerResolution, FileExplorerSearchResult } from "./file-explorer-data.js";
 import { ComponentProps, ReactNode } from "react";
 //#region src/blocks/file-explorer.d.ts
-type FileExplorerBlockProps = Omit<ComponentProps<"div">, "children" | "defaultValue" | "onChange"> & {
+export type FileExplorerBlockProps = Omit<ComponentProps<"div">, "children" | "defaultValue" | "onChange"> & {
   locations: readonly FileExplorerLocation[];
   activeLocationId?: string;
   defaultActiveLocationId?: string;
@@ -19,6 +19,6 @@ type FileExplorerBlockProps = Omit<ComponentProps<"div">, "children" | "defaultV
   searchPlaceholder?: string | false;
   layout?: "viewport" | "contained";
 };
-declare function FileExplorerBlock({ locations, activeLocationId, defaultActiveLocationId, selectedPath, defaultSelectedPath, searchValue, defaultSearchValue, onActiveLocationChange, onSelectedPathChange, onSearchValueChange, onOpenEntry, sidebarTop, sidebarFooter, headerActions, searchPlaceholder, layout, className, style, ...props }: FileExplorerBlockProps): import("react").JSX.Element;
+export declare function FileExplorerBlock({ locations, activeLocationId, defaultActiveLocationId, selectedPath, defaultSelectedPath, searchValue, defaultSearchValue, onActiveLocationChange, onSelectedPathChange, onSearchValueChange, onOpenEntry, sidebarTop, sidebarFooter, headerActions, searchPlaceholder, layout, className, style, ...props }: FileExplorerBlockProps): import("react").JSX.Element;
 //#endregion
-export { FileExplorerBlock, FileExplorerBlockProps, type FileExplorerBreadcrumb, type FileExplorerColumn, type FileExplorerEntry, type FileExplorerEntryDetail, type FileExplorerLocation, type FileExplorerResolution, type FileExplorerSearchResult };
+export type { FileExplorerBreadcrumb, FileExplorerColumn, FileExplorerEntry, FileExplorerEntryDetail, FileExplorerLocation, FileExplorerResolution, FileExplorerSearchResult };

package/dist/blocks/settings-data.d.ts

@@ -1,36 +1,35 @@
 import { ReactNode } from "react";
 //#region src/blocks/settings-data.d.ts
-type SettingsControlProps = {
+export type SettingsControlProps = {
   id: string;
   "aria-labelledby": string;
   "aria-describedby"?: string;
 };
-type SettingDefinition = {
+export type SettingDefinition = {
   id: string;
   title: string;
   description?: string;
   keywords?: readonly string[];
   renderControl: (props: SettingsControlProps) => ReactNode;
 };
-type SettingsSectionDefinition = {
+export type SettingsSectionDefinition = {
   id: string;
   title: string;
   settings: readonly SettingDefinition[];
 };
-type SettingsPageDefinition = {
+export type SettingsPageDefinition = {
   id: string;
   title: string;
   icon?: ReactNode;
   sections: readonly SettingsSectionDefinition[];
 };
-type SettingsSearchResult = {
+export type SettingsSearchResult = {
   page: SettingsPageDefinition;
   section: SettingsSectionDefinition;
   setting: SettingDefinition;
   score: number;
   order: number;
 };
-declare function normalizeSettingsSearchText(value: string): string;
-declare function searchSettings(pages: readonly SettingsPageDefinition[], query: string): SettingsSearchResult[];
-//#endregion
-export { SettingDefinition, SettingsControlProps, SettingsPageDefinition, SettingsSearchResult, SettingsSectionDefinition, normalizeSettingsSearchText, searchSettings };
+export declare function normalizeSettingsSearchText(value: string): string;
+export declare function searchSettings(pages: readonly SettingsPageDefinition[], query: string): SettingsSearchResult[];
+//#endregion

package/dist/blocks/settings.d.ts

@@ -2,7 +2,7 @@ import { Button } from "../ui/button.js";
 import { SettingDefinition, SettingsControlProps, SettingsPageDefinition, SettingsSectionDefinition } from "./settings-data.js";
 import { ComponentProps, ReactNode } from "react";
 //#region src/blocks/settings.d.ts
-type SettingsBlockProps = Omit<ComponentProps<"div">, "children"> & {
+export type SettingsBlockProps = Omit<ComponentProps<"div">, "children"> & {
   pages: readonly SettingsPageDefinition[];
   activePageId?: string;
   defaultActivePageId?: string;
@@ -11,9 +11,9 @@ type SettingsBlockProps = Omit<ComponentProps<"div">, "children"> & {
   searchPlaceholder?: string;
   layout?: "viewport" | "contained";
 };
-declare function SettingsBlock({ pages, activePageId, defaultActivePageId, onActivePageChange, backAction, searchPlaceholder, layout, className, style, ...props }: SettingsBlockProps): import("react").JSX.Element;
-declare function SettingsBackAction({ children, ...props }: Omit<ComponentProps<typeof Button>, "children"> & {
+export declare function SettingsBlock({ pages, activePageId, defaultActivePageId, onActivePageChange, backAction, searchPlaceholder, layout, className, style, ...props }: SettingsBlockProps): import("react").JSX.Element;
+export declare function SettingsBackAction({ children, ...props }: Omit<ComponentProps<typeof Button>, "children"> & {
   children?: ReactNode;
 }): import("react").JSX.Element;
 //#endregion
-export { type SettingDefinition, SettingsBackAction, SettingsBlock, SettingsBlockProps, type SettingsControlProps, type SettingsPageDefinition, type SettingsSectionDefinition };
+export type { SettingDefinition, SettingsControlProps, SettingsPageDefinition, SettingsSectionDefinition };

package/dist/blocks/theme-toggle.d.ts

@@ -3,8 +3,8 @@ import { DropdownMenuTrigger } from "../ui/dropdown-menu.js";
 import { Switch } from "../ui/switch.js";
 import { ComponentProps, ComponentType } from "react";
 //#region src/blocks/theme-toggle.d.ts
-type ThemeMode = "light" | "dark" | "system";
-type ThemeToggleOption = {
+export type ThemeMode = "light" | "dark" | "system";
+export type ThemeToggleOption = {
   value: ThemeMode;
   label: string;
   icon: ComponentType<{
@@ -18,26 +18,25 @@ type ThemeControlProps = {
   onValueChange: (value: ThemeMode) => void;
   options?: readonly ThemeToggleOption[];
 };
-type ThemeToggleProps = Omit<ComponentProps<typeof Button>, "value" | "onChange"> & ThemeControlProps & {
+export type ThemeToggleProps = Omit<ComponentProps<typeof Button>, "value" | "onChange"> & ThemeControlProps & {
   showLabel?: boolean;
   showLabels?: boolean;
 };
-type ThemeSwitchProps = Omit<ComponentProps<typeof Switch>, "checked" | "defaultChecked" | "onCheckedChange" | "value"> & {
+export type ThemeSwitchProps = Omit<ComponentProps<typeof Switch>, "checked" | "defaultChecked" | "onCheckedChange" | "value"> & {
   value: ThemeMode;
   onValueChange: (value: ThemeMode) => void;
   onValue?: ThemeMode;
   offValue?: ThemeMode;
 };
-type ThemeSegmentedSwitchProps = Omit<ComponentProps<"div">, "onChange"> & ThemeControlProps & {
+export type ThemeSegmentedSwitchProps = Omit<ComponentProps<"div">, "onChange"> & ThemeControlProps & {
   name?: string;
   showLabels?: boolean;
 };
-type ThemeDropdownProps = Omit<ComponentProps<typeof DropdownMenuTrigger>, "children" | "value" | "onChange"> & ThemeControlProps & {
+export type ThemeDropdownProps = Omit<ComponentProps<typeof DropdownMenuTrigger>, "children" | "value" | "onChange"> & ThemeControlProps & {
   label?: string;
 };
-declare function ThemeSwitch({ value, onValueChange, onValue, offValue, checkedIcon, uncheckedIcon, "aria-label": ariaLabel, ...props }: ThemeSwitchProps): import("react").JSX.Element;
-declare function ThemeSegmentedSwitch({ value, onValueChange, options, showLabels, name, className, style, "aria-label": ariaLabel, ...props }: ThemeSegmentedSwitchProps): import("react").JSX.Element;
-declare function ThemeToggle({ value, onValueChange, options, showLabel, showLabels, className, onClick, "aria-label": ariaLabel, ...props }: ThemeToggleProps): import("react").JSX.Element;
-declare function ThemeDropdown({ value, onValueChange, options, label, className, "aria-label": ariaLabel, ...props }: ThemeDropdownProps): import("react").JSX.Element;
-//#endregion
-export { ThemeDropdown, ThemeDropdownProps, ThemeMode, ThemeSegmentedSwitch, ThemeSegmentedSwitchProps, ThemeSwitch, ThemeSwitchProps, ThemeToggle, ThemeToggleOption, ThemeToggleProps };
+export declare function ThemeSwitch({ value, onValueChange, onValue, offValue, checkedIcon, uncheckedIcon, "aria-label": ariaLabel, ...props }: ThemeSwitchProps): import("react").JSX.Element;
+export declare function ThemeSegmentedSwitch({ value, onValueChange, options, showLabels, name, className, style, "aria-label": ariaLabel, ...props }: ThemeSegmentedSwitchProps): import("react").JSX.Element;
+export declare function ThemeToggle({ value, onValueChange, options, showLabel, showLabels, className, onClick, "aria-label": ariaLabel, ...props }: ThemeToggleProps): import("react").JSX.Element;
+export declare function ThemeDropdown({ value, onValueChange, options, label, className, "aria-label": ariaLabel, ...props }: ThemeDropdownProps): import("react").JSX.Element;
+//#endregion