@ctrl-ui/react 0.8.1 → 0.8.4

package/dist/lib/liquid-glass-optics.d.ts

@@ -1,4 +1,3 @@
 //#region src/lib/liquid-glass-optics.d.ts
-declare const LIQUID_GLASS_OPTICS_GLSL = "\nconst float LIQUID_GLASS_REFRACTIVE_INDEX = 1.5;\n\nfloat liquidPLength(vec2 value, float exponent) {\n  return pow(pow(value.x, exponent) + pow(value.y, exponent), 1.0 / exponent);\n}\n\nfloat liquidSurfaceSDF(vec2 point, vec2 halfSize, float cornerRadius, float cornerExponent) {\n  float radius = min(cornerRadius, min(halfSize.x, halfSize.y));\n  vec2 q = abs(point) - halfSize + vec2(radius);\n  vec2 outside = max(q, vec2(0.0));\n  float corner = liquidPLength(outside, cornerExponent);\n  return min(max(q.x, q.y), 0.0) + corner - radius;\n}\n\nfloat liquidOpticalInsideDistance(\n  vec2 point,\n  vec2 halfSize,\n  float cornerRadius,\n  float cornerExponent\n) {\n  return max(-liquidSurfaceSDF(point, halfSize, cornerRadius, cornerExponent), 0.0);\n}\n\nvec2 liquidInwardOpticalNormal(\n  vec2 point,\n  vec2 halfSize,\n  float cornerRadius,\n  float cornerExponent\n) {\n  float epsilon = 0.35;\n  vec2 gradient = vec2(\n    liquidSurfaceSDF(point + vec2(epsilon, 0.0), halfSize, cornerRadius, cornerExponent)\n      - liquidSurfaceSDF(point - vec2(epsilon, 0.0), halfSize, cornerRadius, cornerExponent),\n    liquidSurfaceSDF(point + vec2(0.0, epsilon), halfSize, cornerRadius, cornerExponent)\n      - liquidSurfaceSDF(point - vec2(0.0, epsilon), halfSize, cornerRadius, cornerExponent)\n  );\n  float gradientLength = length(gradient);\n  if (gradientLength <= 0.0001) return vec2(0.0);\n  return -gradient / gradientLength;\n}\n\nfloat liquidEdgeWidth(vec2 size, float edgeRatio, float edgeCap) {\n  vec2 halfSize = size * 0.5;\n  float requestedWidth = min(max(min(size.x, size.y) * edgeRatio, 18.0), edgeCap);\n  return min(requestedWidth, max(min(halfSize.x, halfSize.y) - 1.0, 0.001));\n}\n\nfloat liquidEdgeLens(float opticalInside, float edgeWidth) {\n  float edgeDistance = clamp(opticalInside / max(edgeWidth, 0.001), 0.0, 1.0);\n  return pow(1.0 - edgeDistance, 1.35);\n}\n\nfloat liquidConvexSurfaceSlopeForExponent(float radialDistance, float exponent) {\n  float profile = max(1.0 - pow(radialDistance, exponent), 0.0001);\n  return pow(radialDistance, exponent - 1.0) * pow(profile, 1.0 / exponent - 1.0);\n}\n\nfloat liquidConvexSurfaceSlope(float opticalInside, float edgeWidth) {\n  float edgeDistance = clamp(opticalInside / max(edgeWidth, 0.001), 0.0005, 0.9995);\n  float radialDistance = 1.0 - edgeDistance;\n  float squircleSlope = liquidConvexSurfaceSlopeForExponent(radialDistance, 4.0);\n  float circularSlope = liquidConvexSurfaceSlopeForExponent(radialDistance, 2.0);\n  return min(mix(squircleSlope, circularSlope, 0.55), 12.0);\n}\n\nvec3 liquidLensSurfaceNormal(vec2 inwardNormal, float opticalInside, float edgeWidth) {\n  float slope = liquidConvexSurfaceSlope(opticalInside, edgeWidth);\n  return normalize(vec3(-inwardNormal * slope, 1.0));\n}\n\nvec2 liquidRefractedOffset(\n  vec2 inwardNormal,\n  float opticalInside,\n  float edgeWidth,\n  float depthScale\n) {\n  float edgeDistance = clamp(opticalInside / max(edgeWidth, 0.001), 0.0, 1.0);\n  if (edgeDistance >= 1.0) return vec2(0.0);\n\n  vec3 surfaceNormal = liquidLensSurfaceNormal(inwardNormal, opticalInside, edgeWidth);\n  vec3 ray = refract(vec3(0.0, 0.0, -1.0), surfaceNormal, 1.0 / LIQUID_GLASS_REFRACTIVE_INDEX);\n  vec2 snellOffset = ray.xy / max(-ray.z, 0.2) * edgeWidth * depthScale;\n\n  float radialDistance = 1.0 - edgeDistance;\n  float circularRoll = 1.0 - sqrt(max(1.0 - radialDistance * radialDistance, 0.0));\n  vec2 rollOffset = inwardNormal * circularRoll * edgeWidth * 0.18;\n  float interiorFade = 1.0 - smoothstep(0.82, 1.0, edgeDistance);\n  vec2 offset = (snellOffset + rollOffset) * interiorFade;\n  float maximumOffset = edgeWidth * 1.05;\n  return offset * min(1.0, maximumOffset / max(length(offset), 0.0001));\n}\n";
-//#endregion
-export { LIQUID_GLASS_OPTICS_GLSL };
+export declare const LIQUID_GLASS_OPTICS_GLSL = "\nconst float LIQUID_GLASS_REFRACTIVE_INDEX = 1.5;\n\nfloat liquidPLength(vec2 value, float exponent) {\n  return pow(pow(value.x, exponent) + pow(value.y, exponent), 1.0 / exponent);\n}\n\nfloat liquidSurfaceSDF(vec2 point, vec2 halfSize, float cornerRadius, float cornerExponent) {\n  float radius = min(cornerRadius, min(halfSize.x, halfSize.y));\n  vec2 q = abs(point) - halfSize + vec2(radius);\n  vec2 outside = max(q, vec2(0.0));\n  float corner = liquidPLength(outside, cornerExponent);\n  return min(max(q.x, q.y), 0.0) + corner - radius;\n}\n\nfloat liquidOpticalInsideDistance(\n  vec2 point,\n  vec2 halfSize,\n  float cornerRadius,\n  float cornerExponent\n) {\n  return max(-liquidSurfaceSDF(point, halfSize, cornerRadius, cornerExponent), 0.0);\n}\n\nvec2 liquidInwardOpticalNormal(\n  vec2 point,\n  vec2 halfSize,\n  float cornerRadius,\n  float cornerExponent\n) {\n  float epsilon = 0.35;\n  vec2 gradient = vec2(\n    liquidSurfaceSDF(point + vec2(epsilon, 0.0), halfSize, cornerRadius, cornerExponent)\n      - liquidSurfaceSDF(point - vec2(epsilon, 0.0), halfSize, cornerRadius, cornerExponent),\n    liquidSurfaceSDF(point + vec2(0.0, epsilon), halfSize, cornerRadius, cornerExponent)\n      - liquidSurfaceSDF(point - vec2(0.0, epsilon), halfSize, cornerRadius, cornerExponent)\n  );\n  float gradientLength = length(gradient);\n  if (gradientLength <= 0.0001) return vec2(0.0);\n  return -gradient / gradientLength;\n}\n\nfloat liquidEdgeWidth(vec2 size, float edgeRatio, float edgeCap) {\n  vec2 halfSize = size * 0.5;\n  float requestedWidth = min(max(min(size.x, size.y) * edgeRatio, 18.0), edgeCap);\n  return min(requestedWidth, max(min(halfSize.x, halfSize.y) - 1.0, 0.001));\n}\n\nfloat liquidEdgeLens(float opticalInside, float edgeWidth) {\n  float edgeDistance = clamp(opticalInside / max(edgeWidth, 0.001), 0.0, 1.0);\n  return pow(1.0 - edgeDistance, 1.35);\n}\n\nfloat liquidConvexSurfaceSlopeForExponent(float radialDistance, float exponent) {\n  float profile = max(1.0 - pow(radialDistance, exponent), 0.0001);\n  return pow(radialDistance, exponent - 1.0) * pow(profile, 1.0 / exponent - 1.0);\n}\n\nfloat liquidConvexSurfaceSlope(float opticalInside, float edgeWidth) {\n  float edgeDistance = clamp(opticalInside / max(edgeWidth, 0.001), 0.0005, 0.9995);\n  float radialDistance = 1.0 - edgeDistance;\n  float squircleSlope = liquidConvexSurfaceSlopeForExponent(radialDistance, 4.0);\n  float circularSlope = liquidConvexSurfaceSlopeForExponent(radialDistance, 2.0);\n  return min(mix(squircleSlope, circularSlope, 0.55), 12.0);\n}\n\nvec3 liquidLensSurfaceNormal(vec2 inwardNormal, float opticalInside, float edgeWidth) {\n  float slope = liquidConvexSurfaceSlope(opticalInside, edgeWidth);\n  return normalize(vec3(-inwardNormal * slope, 1.0));\n}\n\nvec2 liquidRefractedOffset(\n  vec2 inwardNormal,\n  float opticalInside,\n  float edgeWidth,\n  float depthScale\n) {\n  float edgeDistance = clamp(opticalInside / max(edgeWidth, 0.001), 0.0, 1.0);\n  if (edgeDistance >= 1.0) return vec2(0.0);\n\n  vec3 surfaceNormal = liquidLensSurfaceNormal(inwardNormal, opticalInside, edgeWidth);\n  vec3 ray = refract(vec3(0.0, 0.0, -1.0), surfaceNormal, 1.0 / LIQUID_GLASS_REFRACTIVE_INDEX);\n  vec2 snellOffset = ray.xy / max(-ray.z, 0.2) * edgeWidth * depthScale;\n\n  float radialDistance = 1.0 - edgeDistance;\n  float circularRoll = 1.0 - sqrt(max(1.0 - radialDistance * radialDistance, 0.0));\n  vec2 rollOffset = inwardNormal * circularRoll * edgeWidth * 0.18;\n  float interiorFade = 1.0 - smoothstep(0.82, 1.0, edgeDistance);\n  vec2 offset = (snellOffset + rollOffset) * interiorFade;\n  float maximumOffset = edgeWidth * 1.05;\n  return offset * min(1.0, maximumOffset / max(length(offset), 0.0001));\n}\n";
+//#endregion

package/dist/lib/phone-input-format.d.ts

@@ -1,6 +1,5 @@
 import { Country, Value } from "react-phone-number-input/max";
 //#region src/lib/phone-input-format.d.ts
-declare function normalizePhoneInputText(value: string, country: Country | undefined): string;
-declare function normalizePhoneInputValue(value: Value | undefined, country: Country | undefined): string | undefined;
-//#endregion
-export { normalizePhoneInputText, normalizePhoneInputValue };
+export declare function normalizePhoneInputText(value: string, country: Country | undefined): string;
+export declare function normalizePhoneInputValue(value: Value | undefined, country: Country | undefined): string | undefined;
+//#endregion

package/dist/lib/phone-input-format.js

@@ -1,5 +1,5 @@
-import { AsYouType } from "libphonenumber-js/max";
 import { getCountryCallingCode } from "react-phone-number-input/max";
+import { AsYouType } from "libphonenumber-js/max";
 //#region src/lib/phone-input-format.ts
 function normalizePhoneInputText(value, country) {
 	if (!country) return value;

package/dist/lib/phone-number.d.ts

@@ -1,18 +1,17 @@
 //#region src/lib/phone-number.d.ts
-type PhoneNumberValidationMode = "possible" | "valid";
-type PhoneNumberSchemaMessages = {
+export type PhoneNumberValidationMode = "possible" | "valid";
+export type PhoneNumberSchemaMessages = {
   format?: string;
   invalid?: string;
   mobile?: string;
 };
-type PhoneNumberSchemaOptions = {
+export type PhoneNumberSchemaOptions = {
   mode?: PhoneNumberValidationMode;
   mobileOnly?: boolean;
   messages?: PhoneNumberSchemaMessages;
 };
-declare function createPhoneNumberSchema({ mode, mobileOnly, messages }?: PhoneNumberSchemaOptions): import("zod").ZodPipe<import("zod").ZodE164, import("zod").ZodTransform<string, string>>;
-declare const phoneNumberSchema: import("zod").ZodPipe<import("zod").ZodE164, import("zod").ZodTransform<string, string>>;
-declare const possiblePhoneNumberSchema: import("zod").ZodPipe<import("zod").ZodE164, import("zod").ZodTransform<string, string>>;
-declare const mobilePhoneNumberSchema: import("zod").ZodPipe<import("zod").ZodE164, import("zod").ZodTransform<string, string>>;
-//#endregion
-export { PhoneNumberSchemaMessages, PhoneNumberSchemaOptions, PhoneNumberValidationMode, createPhoneNumberSchema, mobilePhoneNumberSchema, phoneNumberSchema, possiblePhoneNumberSchema };
+export declare function createPhoneNumberSchema({ mode, mobileOnly, messages }?: PhoneNumberSchemaOptions): import("zod").ZodPipe<import("zod").ZodE164, import("zod").ZodTransform<string, string>>;
+export declare const phoneNumberSchema: import("zod").ZodPipe<import("zod").ZodE164, import("zod").ZodTransform<string, string>>;
+export declare const possiblePhoneNumberSchema: import("zod").ZodPipe<import("zod").ZodE164, import("zod").ZodTransform<string, string>>;
+export declare const mobilePhoneNumberSchema: import("zod").ZodPipe<import("zod").ZodE164, import("zod").ZodTransform<string, string>>;
+//#endregion

package/dist/lib/trigger-detect.d.ts

@@ -1,5 +1,5 @@
 //#region src/lib/trigger-detect.d.ts
-type TriggerMatch = {
+export type TriggerMatch = {
   /** trigger character that opened menu (e.g. "/" or "@"). */
   char: string;
   /** Text typed after trigger char, up to caret (never contains whitespace). */
@@ -9,7 +9,6 @@ type TriggerMatch = {
   /** Offset of caret in scanned text (exclusive end of trigger token). */
   end: number;
 };
-declare function detectTrigger(textBeforeCaret: string, triggerChars: readonly string[]): TriggerMatch | null;
-declare function caretRectInTextarea(element: HTMLTextAreaElement, offset: number): DOMRect;
-//#endregion
-export { TriggerMatch, caretRectInTextarea, detectTrigger };
+export declare function detectTrigger(textBeforeCaret: string, triggerChars: readonly string[]): TriggerMatch | null;
+export declare function caretRectInTextarea(element: HTMLTextAreaElement, offset: number): DOMRect;
+//#endregion

package/dist/markdown-block.d.ts

@@ -2,24 +2,23 @@ import { MarkdownBlockKnobStyle } from "./knob-contracts/markdown-block-knobs.js
 import { CodeCopyProps } from "./ui/code.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/markdown-block.d.ts
-type MarkdownBlockProps = Omit<ComponentProps<"figure">, "style"> & {
+export type MarkdownBlockProps = Omit<ComponentProps<"figure">, "style"> & {
   code: string;
   style?: CSSProperties & MarkdownBlockKnobStyle;
 };
-declare function MarkdownBlock({ code, className, children, ...props }: MarkdownBlockProps): import("react").JSX.Element;
-type MarkdownBlockHeaderProps = Omit<ComponentProps<"figcaption">, "style"> & {
+export declare function MarkdownBlock({ code, className, children, ...props }: MarkdownBlockProps): import("react").JSX.Element;
+export type MarkdownBlockHeaderProps = Omit<ComponentProps<"figcaption">, "style"> & {
   style?: CSSProperties & MarkdownBlockKnobStyle;
 };
-declare function MarkdownBlockHeader({ className, ...props }: MarkdownBlockHeaderProps): import("react").JSX.Element;
-type MarkdownBlockTitleProps = Omit<ComponentProps<"div">, "style"> & {
+export declare function MarkdownBlockHeader({ className, ...props }: MarkdownBlockHeaderProps): import("react").JSX.Element;
+export type MarkdownBlockTitleProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & MarkdownBlockKnobStyle;
 };
-declare function MarkdownBlockTitle({ children, className, ...props }: MarkdownBlockTitleProps): import("react").JSX.Element;
-type MarkdownBlockCopyProps = Omit<CodeCopyProps, "value">;
-declare function MarkdownBlockCopy({ "aria-label": ariaLabel, ...props }: MarkdownBlockCopyProps): import("react").JSX.Element;
-type MarkdownBlockContentProps = ComponentProps<"div"> & {
+export declare function MarkdownBlockTitle({ children, className, ...props }: MarkdownBlockTitleProps): import("react").JSX.Element;
+export type MarkdownBlockCopyProps = Omit<CodeCopyProps, "value">;
+export declare function MarkdownBlockCopy({ "aria-label": ariaLabel, ...props }: MarkdownBlockCopyProps): import("react").JSX.Element;
+export type MarkdownBlockContentProps = ComponentProps<"div"> & {
   style?: CSSProperties & MarkdownBlockKnobStyle;
 };
-declare function MarkdownBlockContent({ children, className, ...props }: MarkdownBlockContentProps): import("react").JSX.Element;
-//#endregion
-export { MarkdownBlock, MarkdownBlockContent, MarkdownBlockContentProps, MarkdownBlockCopy, MarkdownBlockCopyProps, MarkdownBlockHeader, MarkdownBlockHeaderProps, MarkdownBlockProps, MarkdownBlockTitle, MarkdownBlockTitleProps };
+export declare function MarkdownBlockContent({ children, className, ...props }: MarkdownBlockContentProps): import("react").JSX.Element;
+//#endregion

package/dist/scripts/contrast-eval.d.ts

@@ -1,46 +1,45 @@
 //#region src/scripts/contrast-eval.d.mts
-declare const stripComments: (css: any) => any;
-declare function parseBlocks(css: any): {
+export declare const stripComments: (css: any) => any;
+export declare function parseBlocks(css: any): {
   prelude: any;
   body: any;
 }[];
-declare function flattenBlocks(css: any): any;
-declare function declarations(body: any): Map<any, any>;
-/** Later source wins, so the order is Tailwind palette, core theme, skin theme, app overrides. */
-declare function tokenMaps(cssSources: any): {
+export declare function flattenBlocks(css: any): any;
+export declare function declarations(body: any): Map<any, any>;
+export declare function themeTokenBlocks(css: any): any;
+export declare function tokenMaps(cssSources: any): {
   light: Map<any, any>;
   dark: Map<any, any>;
 };
-declare function rgbToOklch(r255: any, g255: any, b255: any): {
+export declare function rgbToOklch(r255: any, g255: any, b255: any): {
   L: number;
   C: number;
   H: number;
 };
-declare function oklchToRgb(L: any, C: any, H: any): {
+export declare function oklchToRgb(L: any, C: any, H: any): {
   r: number;
   g: number;
   b: number;
 };
-declare const luminance: ({ r, g, b }: {
+export declare const luminance: ({ r, g, b }: {
   b: any;
   g: any;
   r: any;
 }) => number;
-declare function contrastRatio(a: any, b: any): number;
-declare function parseHex(value: any): {
+export declare function contrastRatio(a: any, b: any): number;
+export declare function parseHex(value: any): {
   r: number;
   g: number;
   b: number;
   alpha: number;
 } | null;
-declare function resolveColor(value: any, tokens: any, seen?: Set<any>, depth?: number): any;
-declare function composite(over: any, under: any): {
+export declare function resolveColor(value: any, tokens: any, seen?: Set<any>, depth?: number): any;
+export declare function composite(over: any, under: any): {
   r: number;
   g: number;
   b: number;
   alpha: any;
 };
-declare function evaluatePair(pair: any, tokens: any): any;
-declare function evaluate(tokens: any, pairs: any): any;
-//#endregion
-export { composite, contrastRatio, declarations, evaluate, evaluatePair, flattenBlocks, luminance, oklchToRgb, parseBlocks, parseHex, resolveColor, rgbToOklch, stripComments, tokenMaps };
+export declare function evaluatePair(pair: any, tokens: any): any;
+export declare function evaluate(tokens: any, pairs: any): any;
+//#endregion

package/dist/scripts/contrast-eval.js

@@ -40,20 +40,27 @@ function declarations(body) {
 	}
 	return properties;
 }
-const declaresTokens = (prelude) => prelude.includes("[data-skin") || prelude.startsWith("@theme") && !prelude.includes("inline");
+function declaresTokens(prelude) {
+	if (prelude.startsWith("@")) return prelude.startsWith("@theme") && !prelude.includes("inline");
+	return prelude.includes("[data-skin") || /(^|[\s,(])(?::root|\.dark)(?=$|[\s,.):])/.test(prelude);
+}
+function themeTokenBlocks(css) {
+	return parseBlocks(stripComments(css)).flatMap((block) => {
+		if (/^@layer\b/.test(block.prelude)) return themeTokenBlocks(block.body);
+		return declaresTokens(block.prelude) ? [block] : [];
+	});
+}
 function modesOf(prelude) {
 	if (/\.dark\b/.test(prelude.replaceAll(/:not\([^)]*\)/g, ""))) return ["dark"];
 	if (/:not\([^)]*\.dark\b/.test(prelude)) return ["light"];
 	return ["light", "dark"];
 }
-/** Later source wins, so the order is Tailwind palette, core theme, skin theme, app overrides. */
 function tokenMaps(cssSources) {
 	const maps = {
 		light: /* @__PURE__ */ new Map(),
 		dark: /* @__PURE__ */ new Map()
 	};
-	for (const css of cssSources) for (const block of flattenBlocks(stripComments(css))) {
-		if (!declaresTokens(block.prelude)) continue;
+	for (const css of cssSources) for (const block of themeTokenBlocks(css)) {
 		const modes = modesOf(block.prelude);
 		for (const [name, value] of declarations(block.body)) for (const mode of modes) maps[mode].set(name, value);
 	}
@@ -162,7 +169,6 @@ function splitTopLevel(text) {
 }
 const unresolved = (reason) => ({ unresolved: reason });
 const isUnresolved = (result) => Boolean(result?.unresolved);
-/** `calc(<base> <op> <n>)`, `calc(<n> * var(--x))` and `calc(<base> * <n>)` — the only calc shapes the packs write. */
 function evaluateCalc(expression, base, tokens, seen, depth) {
 	const inner = expression.slice(5, -1).trim();
 	const match = /^(\S+)\s*([+\-*])\s*(\S+)$/.exec(inner);
@@ -237,7 +243,7 @@ function literalOklch(inner, tokens, seen, depth) {
 	const numbers = channels.map((part, index) => literalChannel(part, index === 0));
 	if (numbers.some((number) => number === null)) return unresolved(`unsupported \`oklch(${inner})\``);
 	const alphaText = slash === -1 ? null : parts.slice(slash + 1).join(" ");
-	const alpha = alphaText === null ? 1 : resolveScalar(alphaText, tokens, seen, depth);
+	const alpha = alphaText === null ? 1 : alphaValue(alphaText, null, tokens, seen, depth);
 	if (alpha === null) return unresolved(`unsupported alpha in \`oklch(${inner})\``);
 	return {
 		...oklchToRgb(numbers[0], numbers[1], numbers[2]),
@@ -324,4 +330,4 @@ function evaluate(tokens, pairs) {
 	return pairs.map((pair) => evaluatePair(pair, tokens));
 }
 //#endregion
-export { composite, contrastRatio, declarations, evaluate, evaluatePair, flattenBlocks, luminance, oklchToRgb, parseBlocks, parseHex, resolveColor, rgbToOklch, stripComments, tokenMaps };
+export { composite, contrastRatio, declarations, evaluate, evaluatePair, flattenBlocks, luminance, oklchToRgb, parseBlocks, parseHex, resolveColor, rgbToOklch, stripComments, themeTokenBlocks, tokenMaps };

package/dist/skin-provider.d.ts

@@ -0,0 +1,14 @@
+import { ControlUiSkin, SkinAdornmentContexts, SkinAdornmentPart, SkinAdornmentScope } from "./skin.js";
+import { ReactNode } from "react";
+//#region src/skin-provider.d.ts
+export declare function SkinProvider({ skin, children }: {
+  skin: ControlUiSkin;
+  children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useSkin(): ControlUiSkin;
+export declare function SkinAdornment<Scope extends SkinAdornmentScope, Part extends SkinAdornmentPart<Scope>>({ scope, part, context }: {
+  scope: Scope;
+  part: Part;
+  context: SkinAdornmentContexts[Scope][Part];
+}): ReactNode;
+//#endregion

package/dist/skin-provider.js

@@ -0,0 +1,21 @@
+"use client";
+import { skinAdornment } from "./skin.js";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/skin-provider.tsx
+const SkinContext = createContext({});
+function SkinProvider({ skin, children }) {
+	return /* @__PURE__ */ jsx(SkinContext, {
+		value: skin,
+		children
+	});
+}
+function useSkin() {
+	return useContext(SkinContext);
+}
+function SkinAdornment({ scope, part, context }) {
+	const skin = useSkin();
+	return skinAdornment(skin, scope, part, context);
+}
+//#endregion
+export { SkinAdornment, SkinProvider, useSkin };

package/dist/skin.d.ts

@@ -3,7 +3,7 @@ import { ControlTone, ControlVariant } from "./control-variants.js";
 import { ReactNode } from "react";
 //#region src/skin.d.ts
 type StatelessPart = Record<never, never>;
-type SkinAdornmentContexts = {
+export type SkinAdornmentContexts = {
   button: {
     layer: {
       variant: ControlVariant;
@@ -13,9 +13,6 @@ type SkinAdornmentContexts = {
   "chat-layout": {
     titlebar: StatelessPart;
   };
-  "chat-thought": {
-    details: StatelessPart;
-  };
   dialog: {
     titlebar: StatelessPart;
   };
@@ -25,47 +22,31 @@ type SkinAdornmentContexts = {
     };
   };
 };
-type SkinAdornmentScope = keyof SkinAdornmentContexts;
-type SkinAdornmentPart<Scope extends SkinAdornmentScope> = keyof SkinAdornmentContexts[Scope];
+export type SkinAdornmentScope = keyof SkinAdornmentContexts;
+export type SkinAdornmentPart<Scope extends SkinAdornmentScope> = keyof SkinAdornmentContexts[Scope];
 type AdornmentEntry<Ctx> = ReactNode | ((ctx: Ctx) => ReactNode);
-type SkinIndicators = {
+export type SkinIndicators = {
   sidebar?: SelectionIndicator | HoverIndicator;
   tree?: SelectionIndicator;
   "button-group"?: HoverIndicator;
   "toggle-group"?: HoverIndicator;
   "checkbox-group"?: HoverIndicator;
 };
-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. */
+export type ControlUiSkin = {
+  id?: string;
   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;
+  scrollAreaBlur?: boolean;
   indicators?: SkinIndicators;
-  /** 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;
-declare function skinIndicator<Component extends keyof SkinIndicators>(component: Component): SkinIndicators[Component];
-/** 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, SkinIndicators, activeSkin, controlEffectsAttribute, hasSkinAdornment, skinAdornment, skinEffects, skinId, skinIndicator, skinSidebarLayout, skinSidebarWidth };
+export type SidebarLayout = "sidebar" | "floating" | "inset" | "page";
+export type ControlEffect = "top-shine" | "ripple" | "hover-circle";
+export type ControlEffectValue = ControlEffect | ControlEffect[];
+export declare function controlEffectsAttribute(effects?: ControlEffectValue): string | undefined;
+export declare function skinAdornment<Scope extends SkinAdornmentScope, Part extends SkinAdornmentPart<Scope>>(skin: ControlUiSkin, scope: Scope, part: Part, ctx: SkinAdornmentContexts[Scope][Part]): ReactNode | undefined;
+export declare function hasSkinAdornment<Scope extends SkinAdornmentScope, Part extends SkinAdornmentPart<Scope>>(skin: ControlUiSkin, scope: Scope, part: Part): boolean;
+//#endregion

package/dist/skin.js

@@ -1,61 +1,18 @@
-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;
-}
-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) {
+function skinAdornment(skin, scope, part, ctx) {
 	return resolveAdornment(skin.adornments?.[scope]?.[part], ctx);
 }
-function hasSkinAdornment(scope, part) {
+function hasSkinAdornment(skin, scope, part) {
 	return skin.adornments?.[scope]?.[part] !== void 0;
 }
 //#endregion
-export { activeSkin, controlEffectsAttribute, hasSkinAdornment, skinAdornment, skinEffects, skinId, skinIndicator, skinSidebarLayout, skinSidebarWidth };
+export { controlEffectsAttribute, hasSkinAdornment, skinAdornment };

package/dist/source-badge.d.ts

@@ -3,21 +3,20 @@ 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"> & {
+export 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"> & {
+export declare function sourceHostname(href: string): string;
+export declare function sourceFaviconHref(href: string): string | undefined;
+export 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 };
+export declare function SourceFavicon({ faviconSrc, href, imageProps, fallbackProps, className, ...props }: SourceFaviconProps): import("react").JSX.Element;
+export declare function SourceBadge({ faviconSrc, href, children, className, rel, target, ...props }: SourceBadgeProps): import("react").JSX.Element;
+//#endregion

package/dist/styles/index.css

@@ -26,13 +26,14 @@
 @import "./recipes/chat-message.css";
 @import "./recipes/chat-composer.css";
 @import "./chat-composer-editor.css";
+@import "./recipes/spinner.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/sidebar.css";
+@import "./recipes/sidebar-menu.css";
 @import "./recipes/color-picker.css";
 @import "./recipes/color-picker-details.css";
 @import "./recipes/color-picker-values.css";
@@ -62,7 +63,6 @@
 @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";
@@ -78,5 +78,3 @@
 @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

@@ -1,12 +1,13 @@
 @layer components {
   :where([data-control-family="accordion"][data-slot="root"]) {
     --cui-accordion-item-border-color: var(--border);
+    --cui-accordion-item-border-width: 1px;
     --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);
+    border-block-end: var(--cui-accordion-item-border-width) solid var(--cui-accordion-item-border-color);
   }
 
   :where([data-control-family="accordion"][data-slot="item"]:last-child) {
@@ -19,7 +20,6 @@
     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);
   }
@@ -68,6 +68,12 @@
   initial-value: transparent;
 }
 
+@property --cui-accordion-item-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-accordion-trigger-foreground {
   syntax: "<color>";
   inherits: true;

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

@@ -3,11 +3,14 @@
     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);
+    opacity: 1;
   }
 
   @media (hover: hover) {
+    :where([data-control-family="chat-layout"][data-slot="turn"] [data-control-family="action-bar"][data-slot="root"]) {
+      opacity: 0;
+    }
+
     :where([data-control-family="chat-layout"][data-slot="turn"]:hover [data-control-family="action-bar"][data-slot="root"]) {
       opacity: 1;
     }