@ctrl-ui/react 0.8.0

package/dist/skin.d.ts

@@ -0,0 +1,69 @@
+import { SelectionIndicator } from "./control-props.js";
+import { ControlTone, ControlVariant } from "./control-variants.js";
+import { ReactNode } from "react";
+//#region src/skin.d.ts
+type StatelessPart = Record<never, never>;
+type SkinAdornmentContexts = {
+  button: {
+    layer: {
+      variant: ControlVariant;
+      tone: ControlTone;
+    };
+  };
+  "chat-layout": {
+    titlebar: StatelessPart;
+  };
+  "chat-thought": {
+    details: StatelessPart;
+  };
+  dialog: {
+    titlebar: StatelessPart;
+  };
+  "chat-composer": {
+    "send-layer": {
+      sendCount: number;
+    };
+  };
+};
+type SkinAdornmentScope = keyof SkinAdornmentContexts;
+type SkinAdornmentPart<Scope extends SkinAdornmentScope> = keyof SkinAdornmentContexts[Scope];
+type AdornmentEntry<Ctx> = ReactNode | ((ctx: Ctx) => ReactNode);
+type ControlUiSkin = {
+  /** Scopes theme.css/skin.css via data-skin; components stamp it on portal containers. */
+  id: string;
+  /** Stamps data-motion="reduced", collapsing --duration-* to 0ms. Never `animation:none` — ripple cleanup still needs `animationend` to fire. */
+  motion?: "reduced";
+  /** Locks skin to one scheme; page's .dark class must then follow it, since Shiki, native color-scheme, and dark: utilities key off .dark, not skin tokens. Undefined = adaptive, both blocks authored. */
+  colorScheme?: "light" | "dark";
+  /** Geometry, not slot restyle — padding, gap, rounding, and shadow across sidebar gap/container/inner. explicit `variant` prop wins; undefined keeps "sidebar". */
+  sidebarLayout?: SidebarLayout;
+  /** App-wide choice: sidebars and trees all glide or none do. Explicit `indicator` still wins; undefined also skips highlight engine's lazy chunk. */
+  indicators?: {
+    sidebar?: SelectionIndicator;
+    tree?: SelectionIndicator;
+  };
+  /** Any CSS length. Seeds --sidebar-width; caller's own value still wins. Undefined keeps shadcn's 16rem. */
+  sidebarWidth?: string;
+  /** effects.css keys off data-effects ancestor attribute. top-shine is CSS-only; ripple needs runtime's document pointer listener. */
+  effects?: ControlEffect[];
+  adornments?: { [Scope in SkinAdornmentScope]?: { [Part in SkinAdornmentPart<Scope>]?: AdornmentEntry<SkinAdornmentContexts[Scope][Part]>; }; };
+};
+type SidebarLayout = "sidebar" | "floating" | "inset";
+type ControlEffect = "top-shine" | "ripple" | "hover-circle";
+type ControlEffectValue = ControlEffect | ControlEffect[];
+declare function controlEffectsAttribute(effects?: ControlEffectValue): string | undefined;
+/** Read at render time so getter-based configs stay live. Portals stamp it on their positioner, which lands outside any token-scoped ancestor. */
+declare function activeSkin(): ControlUiSkin;
+declare function skinId(): string;
+/** Sidebar falls back: variant prop → this → "sidebar". */
+declare function skinSidebarLayout(): SidebarLayout | undefined;
+/** Component falls back: indicator prop → this → "none". */
+declare function skinIndicator(component: "sidebar" | "tree"): SelectionIndicator | undefined;
+/** SidebarProvider seeds --sidebar-width from this; caller-provided value still wins. */
+declare function skinSidebarWidth(): string | undefined;
+/** Portals stamp result next to data-skin; ControlEffectsRuntime mirrors it on <html>. */
+declare function skinEffects(): string | undefined;
+declare function skinAdornment<Scope extends SkinAdornmentScope, Part extends SkinAdornmentPart<Scope>>(scope: Scope, part: Part, ctx: SkinAdornmentContexts[Scope][Part]): ReactNode | undefined;
+declare function hasSkinAdornment<Scope extends SkinAdornmentScope, Part extends SkinAdornmentPart<Scope>>(scope: Scope, part: Part): boolean;
+//#endregion
+export { ControlEffect, ControlEffectValue, ControlUiSkin, SidebarLayout, SkinAdornmentContexts, SkinAdornmentPart, SkinAdornmentScope, activeSkin, controlEffectsAttribute, hasSkinAdornment, skinAdornment, skinEffects, skinId, skinIndicator, skinSidebarLayout, skinSidebarWidth };

package/dist/skin.js

@@ -0,0 +1,62 @@
+import { skin } from "./skin.config.js";
+//#region src/skin.ts
+function controlEffectsAttribute(effects) {
+	if (!effects) return void 0;
+	const value = (Array.isArray(effects) ? effects : [effects]).join(" ");
+	return value.length > 0 ? value : void 0;
+}
+/** Read at render time so getter-based configs stay live. Portals stamp it on their positioner, which lands outside any token-scoped ancestor. */
+function activeSkin() {
+	return skin;
+}
+const verifiedSkinIds = /* @__PURE__ */ new Set();
+function skinScopeProblem(id) {
+	const boundary = document.querySelector(`[data-skin="${id}"]`);
+	if (!boundary) return `Control UI: skin.config id is "${id}" but no element carries data-skin="${id}" (root has ${JSON.stringify(document.documentElement.dataset.skin ?? null)}); every token is undeclared until they match.`;
+	if (getComputedStyle(boundary).getPropertyValue("--background").trim()) return void 0;
+	return `Control UI: skin-theme.css declares no tokens for data-skin="${id}"; check the CSS entry imports (../components/control-ui/styles/skin-theme.css) or run scripts/control-ui-doctor.mjs.`;
+}
+function verifySkinScope(id) {
+	if (process.env.NODE_ENV === "production" || typeof document === "undefined" || verifiedSkinIds.has(id)) return;
+	verifiedSkinIds.add(id);
+	setTimeout(() => {
+		if (skin.id !== id) {
+			verifiedSkinIds.delete(id);
+			return;
+		}
+		const problem = skinScopeProblem(id);
+		if (problem) console.error(problem);
+	}, 0);
+}
+function skinId() {
+	verifySkinScope(skin.id);
+	return skin.id;
+}
+/** Sidebar falls back: variant prop → this → "sidebar". */
+function skinSidebarLayout() {
+	return skin.sidebarLayout;
+}
+/** Component falls back: indicator prop → this → "none". */
+function skinIndicator(component) {
+	return skin.indicators?.[component];
+}
+/** SidebarProvider seeds --sidebar-width from this; caller-provided value still wins. */
+function skinSidebarWidth() {
+	return skin.sidebarWidth;
+}
+/** Portals stamp result next to data-skin; ControlEffectsRuntime mirrors it on <html>. */
+function skinEffects() {
+	return controlEffectsAttribute(skin.effects);
+}
+function resolveAdornment(entry, ctx) {
+	if (entry === void 0) return void 0;
+	return typeof entry === "function" ? entry(ctx) : entry;
+}
+function skinAdornment(scope, part, ctx) {
+	return resolveAdornment(skin.adornments?.[scope]?.[part], ctx);
+}
+function hasSkinAdornment(scope, part) {
+	return skin.adornments?.[scope]?.[part] !== void 0;
+}
+//#endregion
+export { activeSkin, controlEffectsAttribute, hasSkinAdornment, skinAdornment, skinEffects, skinId, skinIndicator, skinSidebarLayout, skinSidebarWidth };

package/dist/source-badge.d.ts

@@ -0,0 +1,23 @@
+import { BadgeKnobStyle } from "./knob-contracts/badge-knobs.js";
+import { SourceBadgeKnobStyle } from "./knob-contracts/source-badge-knobs.js";
+import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/source-badge.d.ts
+type SourceBadgeProps = Omit<ComponentProps<"a">, "href" | "style"> & {
+  faviconSrc?: string | false;
+  href: string;
+  style?: CSSProperties & SourceBadgeKnobStyle & BadgeKnobStyle;
+};
+declare function sourceHostname(href: string): string;
+declare function sourceFaviconHref(href: string): string | undefined;
+type SourceFaviconProps = Omit<ComponentProps<typeof Avatar>, "children" | "style"> & {
+  faviconSrc?: string | false;
+  href: string;
+  imageProps?: Omit<ComponentProps<typeof AvatarImage>, "src">;
+  fallbackProps?: ComponentProps<typeof AvatarFallback>;
+  style?: CSSProperties & SourceBadgeKnobStyle;
+};
+declare function SourceFavicon({ faviconSrc, href, imageProps, fallbackProps, className, ...props }: SourceFaviconProps): import("react").JSX.Element;
+declare function SourceBadge({ faviconSrc, href, children, className, rel, target, ...props }: SourceBadgeProps): import("react").JSX.Element;
+//#endregion
+export { SourceBadge, SourceBadgeProps, SourceFavicon, SourceFaviconProps, sourceFaviconHref, sourceHostname };

package/dist/source-badge.js

@@ -0,0 +1,72 @@
+"use client";
+import { cn } from "./lib/cn.js";
+import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar.js";
+import { Badge } from "./ui/badge.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Globe } from "lucide-react";
+//#region src/source-badge.tsx
+function sourceHostname(href) {
+	try {
+		return new URL(href).hostname.replace(/^www\./, "") || href;
+	} catch {
+		return href;
+	}
+}
+function sourceFaviconHref(href) {
+	try {
+		const source = new URL(href);
+		if (source.protocol !== "https:" && source.protocol !== "http:") return void 0;
+		return new URL("/favicon.ico", source.origin).href;
+	} catch {
+		return;
+	}
+}
+function SourceFavicon({ faviconSrc, href, imageProps, fallbackProps, className, ...props }) {
+	const resolvedFaviconSrc = faviconSrc === false ? void 0 : faviconSrc ?? sourceFaviconHref(href);
+	return /* @__PURE__ */ jsxs(Avatar, {
+		"data-control-ui": "source-badge",
+		"data-source-badge-favicon": "",
+		"data-slot": "root",
+		...props,
+		className,
+		children: [resolvedFaviconSrc ? /* @__PURE__ */ jsx(AvatarImage, {
+			src: resolvedFaviconSrc,
+			alt: "",
+			...imageProps
+		}) : null, /* @__PURE__ */ jsx(AvatarFallback, {
+			...fallbackProps,
+			className: fallbackProps?.className,
+			children: /* @__PURE__ */ jsx(Globe, {
+				"aria-hidden": "true",
+				className: "size-2.5"
+			})
+		})]
+	});
+}
+function SourceBadge({ faviconSrc, href, children, className, rel, target, ...props }) {
+	const hostname = sourceHostname(href);
+	return /* @__PURE__ */ jsxs(Badge, {
+		variant: "outline",
+		render: /* @__PURE__ */ jsx("a", {
+			"data-source-badge": "",
+			"data-control-ui": "source-badge",
+			"data-slot": "root",
+			href,
+			target,
+			rel: rel ?? (target === "_blank" ? "noreferrer noopener" : void 0),
+			className: cn(className),
+			...props
+		}),
+		children: [/* @__PURE__ */ jsx(SourceFavicon, {
+			href,
+			faviconSrc
+		}), /* @__PURE__ */ jsx("span", {
+			"data-control-ui": "source-badge",
+			"data-slot": "label",
+			className: "truncate",
+			children: children ?? hostname
+		})]
+	});
+}
+//#endregion
+export { SourceBadge, SourceFavicon, sourceFaviconHref, sourceHostname };

package/dist/styles/chat-composer-editor.css

@@ -0,0 +1,44 @@
+/*
+ * Blur choreography, token-driven (kill-switch collapses to 0).
+ * Entry: pill blurs+scales IN via @starting-style (freshly appended by ProseMirror). Exit: pill-delete/message-submit blur OUT via [data-chat-composer-exit] on a throwaway clone (ghost.ts) since ProseMirror removes nodes synchronously.
+ * Reads the shared --duration-* and --ease-* tokens.
+ */
+
+@layer components {
+  /* resting look + blur-IN transition; :not([data-chat-composer-exit] *) excludes exit ghosts/cloned pills from entry choreography */
+  :where([data-control-ui="chat-composer"][data-slot="mention"]):not([data-chat-composer-exit]):not([data-chat-composer-exit] *) {
+    opacity: 1;
+    filter: blur(0);
+    scale: 1;
+    transition:
+      opacity var(--duration-base) var(--ease-emphasized),
+      filter var(--duration-base) var(--ease-emphasized),
+      scale var(--duration-base) var(--ease-emphasized);
+  }
+
+  @starting-style {
+    :where([data-control-ui="chat-composer"][data-slot="mention"]):not([data-chat-composer-exit]):not([data-chat-composer-exit] *) {
+      opacity: 0;
+      filter: blur(6px);
+      scale: 0.82;
+    }
+  }
+
+  /* exit ghost: fixed-position clone, keyframe blurs it out then self-removes on animationend; finite duration lets kill-switch snap it away invisibly */
+  :where([data-chat-composer-exit][data-exiting]) {
+    opacity: 1;
+    filter: blur(0);
+    scale: 1;
+    translate: 0 0;
+    animation: chat-composer-blur-out var(--duration-base) var(--ease-emphasized) forwards;
+  }
+}
+
+@keyframes chat-composer-blur-out {
+  to {
+    opacity: 0;
+    filter: blur(8px);
+    scale: 0.94;
+    translate: 0 -0.25rem;
+  }
+}

package/dist/styles/code.css

@@ -0,0 +1,57 @@
+/*
+ * Control UI — code + diff tokens, derived from the shared theme contract.
+ * --code-token-*: Shiki CSS-variables syntax palette (lib/code-tokens.ts) — follows active skin instead of a frozen palette. --diff-*: 3-tier diff colors (line/emphasis/gutter/fg per side), à la @pierre/diffs. Both skin-overridable via pack skin.css.
+ * Scoped to the root color mode at zero specificity so every skin inherits the correct palette and can override it locally.
+ */
+
+:where(:root) {
+  /* syntax — light (github-light adjacent, retinted onto the neutral token hue family) */
+  --code-foreground: var(--foreground);
+  --code-token-constant: oklch(0.5 0.15 250);
+  --code-token-string: oklch(0.49 0.13 150);
+  --code-token-string-expression: oklch(0.49 0.13 150);
+  --code-token-comment: oklch(0.48 0.015 285);
+  --code-token-keyword: oklch(0.53 0.2 18);
+  --code-token-parameter: oklch(0.52 0.09 55);
+  --code-token-function: oklch(0.54 0.17 300);
+  --code-token-punctuation: oklch(0.5 0.02 285);
+  --code-token-link: oklch(0.5 0.15 250);
+
+  /* diff — light. add ≈ green (H150), del ≈ red (H22). */
+  --diff-add-line: oklch(0.93 0.055 150 / 0.65);
+  --diff-add-emphasis: oklch(0.86 0.11 150 / 0.8);
+  --diff-add-gutter: oklch(0.91 0.07 150);
+  --diff-add-fg: oklch(0.48 0.11 150);
+  --diff-del-line: oklch(0.94 0.05 22 / 0.6);
+  --diff-del-emphasis: oklch(0.87 0.12 22 / 0.8);
+  --diff-del-gutter: oklch(0.92 0.07 22);
+  --diff-del-fg: oklch(0.53 0.16 22);
+  --diff-context-fg: var(--muted-foreground);
+  --diff-gutter-bg: oklch(from var(--muted) l c h / 0.5);
+}
+
+:where(.dark) {
+  /* syntax — dark (github-dark adjacent) */
+  --code-foreground: var(--foreground);
+  --code-token-constant: oklch(0.78 0.13 235);
+  --code-token-string: oklch(0.8 0.13 150);
+  --code-token-string-expression: oklch(0.8 0.13 150);
+  --code-token-comment: oklch(0.76 0.02 285);
+  --code-token-keyword: oklch(0.75 0.16 12);
+  --code-token-parameter: oklch(0.82 0.09 60);
+  --code-token-function: oklch(0.8 0.14 300);
+  --code-token-punctuation: oklch(0.72 0.02 285);
+  --code-token-link: oklch(0.78 0.13 235);
+
+  /* diff — dark */
+  --diff-add-line: oklch(0.5 0.11 150 / 0.22);
+  --diff-add-emphasis: oklch(0.6 0.14 150 / 0.34);
+  --diff-add-gutter: oklch(0.5 0.1 150 / 0.3);
+  --diff-add-fg: oklch(0.82 0.13 150);
+  --diff-del-line: oklch(0.55 0.16 22 / 0.24);
+  --diff-del-emphasis: oklch(0.62 0.18 22 / 0.36);
+  --diff-del-gutter: oklch(0.55 0.14 22 / 0.3);
+  --diff-del-fg: oklch(0.78 0.15 22);
+  --diff-context-fg: var(--muted-foreground);
+  --diff-gutter-bg: oklch(from var(--muted) l c h / 0.4);
+}

package/dist/styles/effects.css

@@ -0,0 +1,126 @@
+/* Every utility here reads theme tokens, so a theme rewrite restyles the effects too. Tailwind only emits an @utility that scanned source references. */
+
+/* apply to a sized block */
+@utility shimmer {
+  background-image: linear-gradient(100deg, var(--muted) 30%, oklch(from var(--muted-foreground) l c h / 0.25) 50%, var(--muted) 70%);
+  background-size: 220% 100%;
+  animation: shimmer calc(var(--duration-slow) * 5) var(--ease-standard) infinite;
+
+  /* Reduced motion: hold resting gradient (infinite animation ignores 0ms collapse, must still explicitly) under OS pref + motion kill-switch attribute. */
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+  :where([data-motion="reduced"]) & {
+    animation: none;
+  }
+}
+
+/* shimmer-text — same sweep clipped to text ("AI is generating" treatment); subtle --muted-foreground↔--foreground stops keep it readable. */
+@utility shimmer-text {
+  background-image: linear-gradient(100deg, var(--muted-foreground) 35%, var(--foreground) 50%, var(--muted-foreground) 65%);
+  background-size: 220% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  animation: shimmer calc(var(--duration-slow) * 6) var(--ease-standard) infinite;
+
+  /* Reduced motion: static muted-foreground text, no sweep — stilled under OS pref + motion kill-switch (infinite animation ignores 0ms tempo). */
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+  :where([data-motion="reduced"]) & {
+    animation: none;
+  }
+}
+
+@keyframes shimmer {
+  from {
+    background-position: 180% 0;
+  }
+  to {
+    background-position: -80% 0;
+  }
+}
+
+/* halftone — "media is being generated" fill for a box whose final size is already reserved (image gen placeholder).
+ * The lattice never moves and the mask is a fixed corner-to-corner fade; the dots themselves breathe, which is what
+ * reads as halftone. A travelling mask was tried and rejected: it leaves the box blank for most of the cycle.
+ * Registration required to interpolate the radius — browsers without @property hold the resting dot, never a broken box.
+ * Token-parameterized (pack re-values, no fork): --halftone-color, -dot (resting radius), -gap (lattice pitch). */
+@property --cui-halftone-pulse {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 1;
+}
+
+@utility halftone {
+  --halftone-radius: calc(var(--halftone-dot, 1.4px) * var(--cui-halftone-pulse));
+  background-image: radial-gradient(
+    circle at center,
+    var(--halftone-color, oklch(from var(--muted-foreground) l c h / 0.7)) var(--halftone-radius),
+    transparent calc(var(--halftone-radius) + 0.4px)
+  );
+  background-size: var(--halftone-gap, 11px) var(--halftone-gap, 11px);
+  -webkit-mask-image: linear-gradient(to top left, transparent 0%, oklch(0 0 0) 30%, oklch(0 0 0) 70%, transparent 100%);
+  mask-image: linear-gradient(to top left, transparent 0%, oklch(0 0 0) 30%, oklch(0 0 0) 70%, transparent 100%);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  animation: aui-halftone calc(var(--duration-slow) * 6) var(--ease-standard) infinite;
+
+  /* Reduced motion: dots hold at their resting radius — still a legible placeholder, just no breathing. */
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+  :where([data-motion="reduced"]) & {
+    animation: none;
+  }
+}
+
+@keyframes aui-halftone {
+  0%,
+  100% {
+    --cui-halftone-pulse: 0.55;
+  }
+  50% {
+    --cui-halftone-pulse: 1.5;
+  }
+}
+
+/* progress-sweep — retro alt to shimmer-text: hard-edged --primary blocks marching L-to-R, clipped to text (Minecraft/Windows XP bar).
+ * Token-parameterized (pack re-values, no fork): --progress-sweep-color, -block/-step (lit width/repeat period, gap=step−block), -fade (dim gap alpha).
+ * text-shadow cleared — glyph shadow would paint over transparent fill (same reason as the fill reset). */
+@utility progress-sweep {
+  background-image: repeating-linear-gradient(
+    90deg,
+    var(--progress-sweep-color, var(--primary)) 0 var(--progress-sweep-block, 8px),
+    oklch(from var(--progress-sweep-color, var(--primary)) l c h / var(--progress-sweep-fade, 0.4)) var(--progress-sweep-block, 8px)
+      var(--progress-sweep-step, 12px)
+  );
+  background-size: 200% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  text-shadow: none;
+  animation: aui-progress-sweep calc(var(--duration-slow) * 12) linear infinite;
+
+  /* Reduced motion: static blocks, no march — stilled under OS pref + motion kill-switch (infinite animation ignores 0ms tempo). */
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+  :where([data-motion="reduced"]) & {
+    animation: none;
+  }
+}
+
+@keyframes aui-progress-sweep {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}

package/dist/styles/index.css

@@ -0,0 +1,81 @@
+@import "./theme.css";
+@import "./recipes/accordion.css";
+@import "./recipes/button.css";
+@import "./recipes/action-bar.css";
+@import "./recipes/collapsible.css";
+@import "./recipes/scroll-area.css";
+@import "./recipes/activity.css";
+@import "./recipes/alert.css";
+@import "./recipes/popup.css";
+@import "./recipes/popup-controls.css";
+@import "./recipes/popup-lists.css";
+@import "./recipes/popup-motion.css";
+@import "./recipes/audio-visualizer.css";
+@import "./recipes/audio-recorder.css";
+@import "./recipes/field.css";
+@import "./recipes/field-parts.css";
+@import "./recipes/avatar.css";
+@import "./recipes/badge.css";
+@import "./recipes/button-group.css";
+@import "./recipes/calendar.css";
+@import "./recipes/card.css";
+@import "./recipes/chat-layout.css";
+@import "./effects.css";
+@import "./recipes/chat-message.css";
+@import "./recipes/chat-composer.css";
+@import "./chat-composer-editor.css";
+@import "./recipes/chat-composer-attachment.css";
+@import "./recipes/choice.css";
+@import "./code.css";
+@import "./recipes/code.css";
+@import "./recipes/code-block-editor.css";
+@import "./recipes/code-diff.css";
+@import "./recipes/track-highlight.css";
+@import "./recipes/sidebar.css";
+@import "./recipes/color-picker.css";
+@import "./recipes/color-picker-details.css";
+@import "./recipes/color-picker-values.css";
+@import "./recipes/context.css";
+@import "./recipes/popup-drawer.css";
+@import "./recipes/dockable-panel.css";
+@import "./recipes/separator.css";
+@import "./recipes/item.css";
+@import "./recipes/dropzone.css";
+@import "./recipes/dynamic-notification.css";
+@import "./recipes/dynamic-notification-input.css";
+@import "./recipes/dynamic-notification-motion.css";
+@import "./recipes/empty.css";
+@import "./recipes/environment-variables.css";
+@import "./recipes/resizable.css";
+@import "./recipes/gradient-editor.css";
+@import "./recipes/infinite-canvas.css";
+@import "./recipes/inline-attachment.css";
+@import "./recipes/source-badge.css";
+@import "./recipes/inline-citation.css";
+@import "./recipes/kbd.css";
+@import "./recipes/markdown.css";
+@import "./recipes/markdown-block.css";
+@import "./recipes/range.css";
+@import "./recipes/morphing-panel.css";
+@import "./recipes/pagination.css";
+@import "./recipes/phone-input.css";
+@import "./recipes/rich-tooltip.css";
+@import "./recipes/skeleton.css";
+@import "./recipes/spinner.css";
+@import "./recipes/stepper.css";
+@import "./recipes/switch.css";
+@import "./recipes/table.css";
+@import "./recipes/table-of-contents.css";
+@import "./recipes/tabs.css";
+@import "./recipes/task-list.css";
+@import "./recipes/thread-rail.css";
+@import "./recipes/timeline.css";
+@import "./recipes/popup-toast.css";
+@import "./recipes/toolbar.css";
+@import "./recipes/transcript-divider.css";
+@import "./recipes/tree.css";
+@import "./type-scale.css";
+@import "./recipes/user-ask.css";
+@import "./recipes/user-ask-details.css";
+@import "./skin-theme.css";
+@import "./skin.css";

package/dist/styles/recipes/accordion.css

@@ -0,0 +1,87 @@
+@layer components {
+  :where([data-control-family="accordion"][data-slot="root"]) {
+    --cui-accordion-item-border-color: var(--border);
+    --cui-accordion-trigger-foreground: var(--foreground);
+    --cui-accordion-trigger-hover-foreground: oklch(from var(--foreground) l c h / 0.8);
+    --cui-accordion-icon-foreground: var(--muted-foreground);
+  }
+  :where([data-control-family="accordion"][data-slot="item"]) {
+    border-block-end: 1px solid var(--cui-accordion-item-border-color);
+  }
+
+  :where([data-control-family="accordion"][data-slot="item"]:last-child) {
+    border-block-end: 0;
+  }
+
+  :where([data-control-family="accordion"][data-slot="trigger"]) {
+    gap: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 3);
+    color: var(--cui-accordion-trigger-foreground);
+    font-size: var(--text-body);
+    outline: none;
+    transition: color var(--duration-fast) var(--ease-standard);
+    text-align: left;
+    font-weight: var(--font-weight-medium);
+  }
+
+  :where([data-control-family="accordion"][data-slot="trigger"]:hover) {
+    color: var(--cui-accordion-trigger-hover-foreground);
+  }
+
+  :where([data-control-family="accordion"][data-slot="trigger"][data-disabled]) {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  :where([data-control-family="accordion"][data-slot="icon"]) {
+    inline-size: calc(var(--spacing) * 4);
+    block-size: calc(var(--spacing) * 4);
+    color: var(--cui-accordion-icon-foreground);
+    transition: rotate var(--duration-base) var(--ease-standard);
+  }
+
+  :where([data-control-family="accordion"][data-slot="trigger"][data-panel-open] > [data-slot="icon"]) {
+    rotate: 180deg;
+  }
+
+  :where([data-control-family="accordion"][data-slot="panel-content"]) {
+    padding-block-end: calc(var(--spacing) * 3);
+  }
+
+  :where([data-control-family="accordion"][data-slot="panel"]) {
+    color: var(--muted-foreground);
+    font-size: var(--text-body);
+    height: var(--accordion-panel-height);
+    overflow: hidden;
+    transition: height var(--duration-base) var(--ease-emphasized);
+  }
+
+  :where([data-control-family="accordion"][data-slot="panel"][data-starting-style]),
+  :where([data-control-family="accordion"][data-slot="panel"][data-ending-style]) {
+    height: 0;
+  }
+}
+
+@property --cui-accordion-item-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-accordion-trigger-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-accordion-trigger-hover-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-accordion-icon-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/action-bar.css

@@ -0,0 +1,19 @@
+@layer components {
+  :where([data-control-family="action-bar"][data-slot="root"]) {
+    margin-block-start: calc(var(--spacing) * 1);
+    min-block-size: calc(var(--spacing) * 8);
+    gap: calc(var(--spacing) * 1);
+    opacity: 0;
+    transition: opacity var(--duration-base) var(--ease-standard);
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="chat-layout"][data-slot="turn"]:hover [data-control-family="action-bar"][data-slot="root"]) {
+      opacity: 1;
+    }
+  }
+
+  :where([data-control-family="chat-layout"][data-slot="turn"]:focus-within [data-control-family="action-bar"][data-slot="root"]) {
+    opacity: 1;
+  }
+}