@ctrl-ui/react 0.8.0

package/dist/context.js

@@ -0,0 +1,335 @@
+"use client";
+import { cn } from "./lib/cn.js";
+import { Button } from "./ui/button.js";
+import { ScrollArea } from "./ui/scroll-area.js";
+import { deriveContextModel } from "./context-model.js";
+import { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "./ui/popover.js";
+import { createContext, useContext } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+//#region src/context.tsx
+const ContextValueContext = createContext(null);
+function useContextValue() {
+	const context = useContext(ContextValueContext);
+	if (!context) throw new Error("Context parts must be rendered inside <Context>.");
+	return context;
+}
+function Context({ segments, maxTokens, model: modelName, locale, open, defaultOpen, onOpenChange, className, children, ...props }) {
+	const model = deriveContextModel(segments, maxTokens);
+	const context = {
+		model,
+		modelName,
+		numberFormatter: new Intl.NumberFormat(locale),
+		percentageFormatter: new Intl.NumberFormat(locale, {
+			style: "percent",
+			maximumFractionDigits: 1
+		})
+	};
+	return /* @__PURE__ */ jsx(ContextValueContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx("div", {
+			...props,
+			"data-control-ui": "context",
+			"data-control-family": "context",
+			"data-slot": "root",
+			"data-status": model.status,
+			className: cn("inline-flex", className),
+			children: /* @__PURE__ */ jsx(Popover, {
+				open,
+				defaultOpen,
+				onOpenChange,
+				children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ContextTrigger, {}), /* @__PURE__ */ jsx(ContextContent, {})] })
+			})
+		})
+	});
+}
+function ContextTrigger({ "aria-label": ariaLabel, variant = "surface", size = "sm", className, children, ...props }) {
+	const { model, numberFormatter, percentageFormatter } = useContextValue();
+	const percentage = model.ratio === null ? null : percentageFormatter.format(model.ratio);
+	const visualPercentage = Math.min(100, Math.max(0, (model.ratio ?? 0) * 100));
+	const shortLabel = percentage === null ? "Context unavailable" : `${percentage} context`;
+	const accessibleLabel = model.maxTokens === null ? `Context window: ${numberFormatter.format(model.usedTokens)} tokens used; limit unavailable` : `Context window: ${numberFormatter.format(model.usedTokens)} of ${numberFormatter.format(model.maxTokens)} tokens used (${percentage})${model.overageTokens > 0 ? `; ${numberFormatter.format(model.overageTokens)} tokens over limit` : ""}`;
+	return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "context",
+		"data-control-family": "context",
+		"data-slot": "trigger",
+		"data-status": model.status,
+		className: "relative inline-flex",
+		children: /* @__PURE__ */ jsx(Button, {
+			"data-context-trigger-button": "true",
+			...props,
+			render: /* @__PURE__ */ jsx(PopoverTrigger, {}),
+			variant,
+			size,
+			"aria-label": ariaLabel ?? accessibleLabel,
+			className: cn("group/context after:absolute after:-inset-1.5 after:content-['']", className),
+			children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("svg", {
+				"data-control-ui": "context",
+				"data-control-family": "context",
+				"data-slot": "trigger-indicator",
+				"data-status": model.status,
+				viewBox: "0 0 16 16",
+				"aria-hidden": "true",
+				className: "shrink-0 -rotate-90",
+				children: [/* @__PURE__ */ jsx("circle", {
+					cx: "8",
+					cy: "8",
+					r: "6.25",
+					strokeWidth: "1.5",
+					"data-control-ui": "context",
+					"data-control-family": "context",
+					"data-slot": "trigger-track",
+					"data-status": model.status
+				}), model.status !== "unavailable" ? /* @__PURE__ */ jsx("circle", {
+					cx: "8",
+					cy: "8",
+					r: "6.25",
+					pathLength: "100",
+					strokeDasharray: `${visualPercentage} 100`,
+					strokeLinecap: "round",
+					strokeWidth: "1.5",
+					"data-control-ui": "context",
+					"data-control-family": "context",
+					"data-slot": "trigger-value",
+					"data-status": model.status
+				}) : null]
+			}), /* @__PURE__ */ jsx("span", {
+				"data-control-ui": "context",
+				"data-control-family": "context",
+				"data-slot": "trigger-label",
+				className: "overflow-hidden",
+				children: shortLabel
+			})] })
+		})
+	});
+}
+function ContextContent({ "aria-label": ariaLabel, side = "top", align = "end", sideOffset = 8, collisionPadding = 16, padding = "none", className, children, ...props }) {
+	const { modelName } = useContextValue();
+	return /* @__PURE__ */ jsx(PopoverContent, {
+		...props,
+		"aria-label": ariaLabel ?? (modelName ? `Context window · ${modelName}` : "Context window"),
+		side,
+		align,
+		sideOffset,
+		collisionPadding,
+		padding,
+		className: cn("w-[min(28rem,calc(100vw-2rem))] overflow-hidden", className),
+		children: /* @__PURE__ */ jsx("div", {
+			"data-control-ui": "context",
+			"data-control-family": "context",
+			"data-slot": "content",
+			className: "overflow-hidden",
+			children: children ?? /* @__PURE__ */ jsx(ScrollArea, {
+				maxHeight: "min(36rem, calc(100dvh - 8rem))",
+				lockAxis: "x",
+				children: /* @__PURE__ */ jsxs("div", {
+					"data-control-ui": "context",
+					"data-control-family": "context",
+					"data-slot": "content-grid",
+					className: "grid",
+					children: [
+						/* @__PURE__ */ jsx(ContextSummary, {}),
+						/* @__PURE__ */ jsx(ContextGraph, {}),
+						/* @__PURE__ */ jsx(ContextLegend, {})
+					]
+				})
+			})
+		})
+	});
+}
+function ContextHeader({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-control-ui": "context",
+		"data-control-family": "context",
+		"data-slot": "header",
+		className: cn("flex items-start", className),
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1",
+			children: [/* @__PURE__ */ jsx(ContextTitle, {}), /* @__PURE__ */ jsx(ContextDescription, {})]
+		}), /* @__PURE__ */ jsx(ContextClose, {})] })
+	});
+}
+function ContextTitle({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(PopoverTitle, {
+		...props,
+		"data-control-ui": "context",
+		"data-control-family": "context",
+		"data-slot": "title",
+		className,
+		children: children ?? "Context window"
+	});
+}
+function ContextDescription({ className, children, ...props }) {
+	const { modelName } = useContextValue();
+	return /* @__PURE__ */ jsx(PopoverDescription, {
+		...props,
+		"data-control-ui": "context",
+		"data-control-family": "context",
+		"data-slot": "description",
+		className,
+		children: children ?? modelName ?? "Token usage by context segment"
+	});
+}
+function ContextSummary({ className, children, ...props }) {
+	const { model, numberFormatter, percentageFormatter } = useContextValue();
+	const percentage = model.ratio === null ? null : percentageFormatter.format(model.ratio);
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-control-ui": "context",
+		"data-control-family": "context",
+		"data-slot": "summary",
+		"data-status": model.status,
+		className: cn("flex items-baseline justify-between", className),
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", { children: percentage === null ? `${numberFormatter.format(model.usedTokens)} tokens used` : `${percentage} used` }), /* @__PURE__ */ jsx("span", {
+			"data-control-ui": "context",
+			"data-control-family": "context",
+			"data-slot": "summary-value",
+			children: model.maxTokens === null ? "Limit unavailable" : `${numberFormatter.format(model.usedTokens)} / ${numberFormatter.format(model.maxTokens)} tokens`
+		})] })
+	});
+}
+function ContextGraph({ className, ...props }) {
+	const { model } = useContextValue();
+	return /* @__PURE__ */ jsxs("svg", {
+		...props,
+		"data-control-ui": "context",
+		"data-control-family": "context",
+		"data-slot": "graph",
+		"data-status": model.status,
+		viewBox: "0 0 100 10",
+		preserveAspectRatio: "none",
+		"aria-hidden": "true",
+		className: cn("w-full overflow-hidden", className),
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				"data-control-ui": "context",
+				"data-control-family": "context",
+				"data-slot": "track",
+				x: "0",
+				y: "0",
+				width: "100",
+				height: "10",
+				rx: "5"
+			}),
+			model.segments.map((segment) => /* @__PURE__ */ jsx("rect", {
+				"data-control-ui": "context",
+				"data-control-family": "context",
+				"data-slot": "segment",
+				"data-kind": segment.kind,
+				x: segment.start,
+				y: "0",
+				width: segment.width,
+				height: "10"
+			}, segment.segment.id)),
+			model.status === "over-limit" && model.limitPosition !== null ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("rect", {
+				"data-control-ui": "context",
+				"data-control-family": "context",
+				"data-slot": "overage",
+				x: model.limitPosition,
+				y: "0",
+				width: 100 - model.limitPosition,
+				height: "10"
+			}), /* @__PURE__ */ jsx("line", {
+				"data-control-ui": "context",
+				"data-control-family": "context",
+				"data-slot": "limit-marker",
+				x1: model.limitPosition,
+				x2: model.limitPosition,
+				y1: "0",
+				y2: "10",
+				vectorEffect: "non-scaling-stroke"
+			})] }) : null
+		]
+	});
+}
+function ContextLegendRow({ kind, label, description, value, tone }) {
+	return /* @__PURE__ */ jsxs("li", {
+		"data-control-ui": "context",
+		"data-control-family": "context",
+		"data-slot": "legend-item",
+		"data-kind": kind,
+		"data-tone": tone,
+		className: "grid grid-cols-[minmax(0,1fr)_auto] items-start",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 items-start",
+			children: [/* @__PURE__ */ jsx("span", {
+				"data-control-ui": "context",
+				"data-control-family": "context",
+				"data-slot": "legend-indicator",
+				"data-kind": kind,
+				"aria-hidden": "true",
+				className: "shrink-0"
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ jsx("div", {
+					"data-control-ui": "context",
+					"data-control-family": "context",
+					"data-slot": "legend-label",
+					children: label
+				}), description !== void 0 && description !== null ? /* @__PURE__ */ jsx("div", {
+					"data-control-ui": "context",
+					"data-control-family": "context",
+					"data-slot": "legend-description",
+					children: description
+				}) : null]
+			})]
+		}), value !== void 0 && value !== null ? /* @__PURE__ */ jsx("span", {
+			"data-control-ui": "context",
+			"data-control-family": "context",
+			"data-slot": "legend-value",
+			children: value
+		}) : null]
+	});
+}
+function ContextLegend({ className, children, ...props }) {
+	const { model, numberFormatter, percentageFormatter } = useContextValue();
+	return /* @__PURE__ */ jsx("ul", {
+		...props,
+		"data-control-ui": "context",
+		"data-control-family": "context",
+		"data-slot": "legend",
+		className: cn("grid", className),
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			model.segments.map((segment) => /* @__PURE__ */ jsx(ContextLegendRow, {
+				kind: segment.kind,
+				label: segment.segment.label,
+				description: segment.segment.description,
+				value: `${numberFormatter.format(segment.tokens)} tokens${segment.ratio === null ? "" : ` · ${percentageFormatter.format(segment.ratio)}`}`
+			}, segment.segment.id)),
+			model.status === "normal" && model.remainingTokens !== null ? /* @__PURE__ */ jsx(ContextLegendRow, {
+				kind: "other",
+				label: "Available",
+				tone: "available",
+				value: `${numberFormatter.format(model.remainingTokens)} tokens · ${percentageFormatter.format(model.remainingTokens / (model.maxTokens ?? 1))}`
+			}) : null,
+			model.status === "over-limit" ? /* @__PURE__ */ jsx(ContextLegendRow, {
+				kind: "other",
+				label: "Over limit",
+				tone: "over-limit",
+				value: `${numberFormatter.format(model.overageTokens)} tokens over limit`
+			}) : null,
+			model.status === "unavailable" ? /* @__PURE__ */ jsx(ContextLegendRow, {
+				kind: "other",
+				label: "Limit unavailable"
+			}) : null
+		] })
+	});
+}
+function ContextClose({ variant = "ghost", size = "xs", iconOnly = true, "aria-label": ariaLabel = "Close context window", className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		render: /* @__PURE__ */ jsx(PopoverClose, {}),
+		variant,
+		size,
+		iconOnly,
+		"aria-label": ariaLabel,
+		className: cn("ml-auto", className),
+		children: children ?? /* @__PURE__ */ jsx(X, {
+			"aria-hidden": "true",
+			className: "size-4"
+		})
+	});
+}
+//#endregion
+export { Context, ContextClose, ContextContent, ContextDescription, ContextGraph, ContextHeader, ContextLegend, ContextSummary, ContextTitle, ContextTrigger };

package/dist/control-props.d.ts

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

package/dist/control-props.js

@@ -0,0 +1,4 @@
+//#region src/control-props.ts
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+//#endregion
+export { SIDEBAR_COOKIE_NAME };

package/dist/control-variants.d.ts

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

package/dist/control-variants.js

@@ -0,0 +1,14 @@
+//#region src/control-variants.ts
+const controlVariants = [
+	"solid",
+	"surface",
+	"ghost",
+	"quiet"
+];
+const controlTones = [
+	"neutral",
+	"primary",
+	"danger"
+];
+//#endregion
+export { controlTones, controlVariants };

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

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