@cntyclub/ui-react 0.14.0 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntyclub/ui-react",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "description": "React component library for the Country Club UI Kit — Base UI primitives styled with the Country Club design system (Tailwind CSS v4)",
   "type": "module",
   "sideEffects": [
@@ -47,6 +47,7 @@
     "input-otp": "^1.4.2",
     "lucide-react": "^0.561.0",
     "qr-code-styling": "^1.9.2",
+    "react-aria-components": "^1.20.0",
     "react-day-picker": "^9.14.0",
     "react-dropzone": "^14.4.0",
     "react-markdown": "^9.1.0",

package/src/components/ui/chat-divider.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+type ChatDividerVariant = "default" | "summary" | "unread";
+
+interface ChatDividerProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Centered label, e.g. "New messages", "You're caught up", "Earlier messages summarized". */
+  label?: React.ReactNode;
+  /** Optional leading icon (e.g. a summary or sparkle glyph). */
+  icon?: React.ReactNode;
+  /**
+   * - `default`  — neutral hairline with a muted label.
+   * - `summary`  — marks where a rolling summary folds older history.
+   * - `unread`   — the "new messages" baseline; accented so it stands out.
+   */
+  variant?: ChatDividerVariant;
+}
+
+const LABEL_TONE: Record<ChatDividerVariant, string> = {
+  default: "text-muted-foreground",
+  summary: "text-muted-foreground",
+  unread: "text-primary",
+};
+
+const LINE_TONE: Record<ChatDividerVariant, string> = {
+  default: "bg-border",
+  summary: "bg-border",
+  unread: "bg-primary/40",
+};
+
+/**
+ * A centered, labeled divider for the message stream: the point a rolling summary
+ * folds history (`summary`), the unread baseline (`unread`), or a plain date/section
+ * break (`default`). Pairs with the backend `AgentSummaryCheckpoint` and each
+ * participant's `joined_seq`/`last_read_seq`.
+ */
+function ChatDivider({ label, icon, variant = "default", className, ...props }: ChatDividerProps) {
+  return (
+    <div
+      className={cn("flex w-full items-center gap-3 py-1 select-none", className)}
+      data-slot="chat-divider"
+      data-variant={variant}
+      role="separator"
+      {...props}
+    >
+      <span className={cn("h-px flex-1", LINE_TONE[variant])} />
+      {label != null ? (
+        <span
+          className={cn(
+            "inline-flex items-center gap-1.5 font-medium text-xs whitespace-nowrap",
+            LABEL_TONE[variant],
+          )}
+        >
+          {icon ? <span className="inline-flex shrink-0 items-center">{icon}</span> : null}
+          {label}
+        </span>
+      ) : null}
+      <span className={cn("h-px flex-1", LINE_TONE[variant])} />
+    </div>
+  );
+}
+
+export { ChatDivider };
+export type { ChatDividerProps, ChatDividerVariant };

package/src/components/ui/color-picker.tsx

@@ -0,0 +1,378 @@
+"use client";
+
+import { PipetteIcon, PlusIcon } from "lucide-react";
+import * as React from "react";
+import {
+  ColorArea as AriaColorArea,
+  ColorField as AriaColorField,
+  ColorPicker as AriaColorPicker,
+  ColorSlider as AriaColorSlider,
+  ColorSwatch as AriaColorSwatch,
+  ColorSwatchPicker as AriaColorSwatchPicker,
+  ColorSwatchPickerItem as AriaColorSwatchPickerItem,
+  ColorThumb as AriaColorThumb,
+  ColorPickerStateContext,
+  Input as AriaInput,
+  SliderTrack as AriaSliderTrack,
+  getColorChannels,
+  parseColor,
+} from "react-aria-components";
+
+import { cn } from "../../lib/utils/css";
+
+/**
+ * A colour picker, built on React Aria's colour primitives.
+ *
+ * The one part of this kit that is not Base UI, and deliberately: choosing a colour is
+ * a pointer-and-keyboard problem with a saturation plane, two gradient sliders, a
+ * parsed text field and a channel model behind them, and React Aria is the only
+ * accessible implementation of that we would not otherwise be writing ourselves.
+ * Everything visible is still this kit's tokens and `data-slot` conventions.
+ *
+ * **Compound, so a screen takes only the parts it needs.** The four-hex-field panel in
+ * the office needs a swatch and a hex box; a full editor wants the plane and both
+ * sliders. Both are the same state, so both read `ColorPicker.Provider` and neither
+ * has to lift anything.
+ *
+ * ```tsx
+ * <ColorPicker.Provider defaultValue="#8c1515" onChange={(c) => save(c.toString("hex"))}>
+ *   <ColorPicker.Area />
+ *   <ColorPicker.HueSlider />
+ *   <ColorPicker.ValueInput />
+ * </ColorPicker.Provider>
+ * ```
+ *
+ * Or the whole thing, already composed:
+ *
+ * ```tsx
+ * <ColorPickerPanel defaultValue="#8c1515" onChange={…} />
+ * ```
+ */
+
+// The chequerboard behind anything that can be semi-transparent. Inline rather than a
+// token because it is a texture, not a colour, and it must look identical in both
+// themes — a transparency indicator that changes with the theme reads as part of the
+// colour being shown.
+const CHECKERBOARD =
+  "repeating-conic-gradient(rgba(0,0,0,.12) 0% 25%, transparent 0% 50%) 50% / 12px 12px";
+
+function useColorPicker() {
+  const state = React.useContext(ColorPickerStateContext);
+  if (!state) {
+    throw new Error("useColorPicker must be used inside <ColorPicker.Provider>.");
+  }
+  return state;
+}
+
+function ColorPickerProvider(props: React.ComponentProps<typeof AriaColorPicker>) {
+  return <AriaColorPicker {...props} />;
+}
+
+function ColorArea({ className, ...props }: React.ComponentProps<typeof AriaColorArea>) {
+  return (
+    <AriaColorArea
+      className={cn(
+        "h-40 w-full shrink-0 rounded-lg border border-input outline-none",
+        "data-[disabled]:opacity-64",
+        className,
+      )}
+      data-slot="color-picker-area"
+      {...props}
+    >
+      <ColorThumb />
+    </AriaColorArea>
+  );
+}
+
+function ColorThumb({ className, ...props }: React.ComponentProps<typeof AriaColorThumb>) {
+  return (
+    <AriaColorThumb
+      className={cn(
+        // `box-shadow` rather than a border, so the ring sits *outside* the swatch and
+        // the pixel under the thumb is the colour actually selected.
+        "size-4 rounded-full border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,.35)] outline-none",
+        "transition-[scale,box-shadow] duration-150 ease-out",
+        "data-[focus-visible]:ring-[3px] data-[focus-visible]:ring-ring/32 data-[dragging]:scale-115",
+        className,
+      )}
+      data-slot="color-picker-thumb"
+      {...props}
+    />
+  );
+}
+
+function ColorSliderBase({
+  className,
+  channel,
+  chequered,
+  ...props
+}: Omit<React.ComponentProps<typeof AriaColorSlider>, "channel"> & {
+  channel: "hue" | "alpha";
+  chequered?: boolean;
+}) {
+  return (
+    <AriaColorSlider
+      channel={channel}
+      className={cn("w-full data-[disabled]:opacity-64", className)}
+      data-slot={`color-picker-${channel}-slider`}
+      orientation="horizontal"
+      {...props}
+    >
+      {/* The gradient is React Aria's, handed over as `defaultStyle` — it knows the
+          channel and the current colour, and recomputing it here would be a second
+          source of truth for the same thing. An alpha track additionally stacks the
+          chequerboard *under* it, which is the whole point of that track: the gradient
+          ends at transparent, so what shows through is what "transparent" looks like. */}
+      <AriaSliderTrack
+        className="relative h-3 w-full rounded-full border border-input"
+        style={({ defaultStyle }) => ({
+          background: chequered
+            ? `${defaultStyle.background}, ${CHECKERBOARD}`
+            : defaultStyle.background,
+        })}
+      >
+        <ColorThumb className="top-1/2" />
+      </AriaSliderTrack>
+    </AriaColorSlider>
+  );
+}
+
+function ColorHueSlider(props: Omit<React.ComponentProps<typeof AriaColorSlider>, "channel">) {
+  return <ColorSliderBase channel="hue" {...props} />;
+}
+
+function ColorAlphaSlider(props: Omit<React.ComponentProps<typeof AriaColorSlider>, "channel">) {
+  return <ColorSliderBase channel="alpha" chequered {...props} />;
+}
+
+function ColorSwatch({ className, ...props }: React.ComponentProps<typeof AriaColorSwatch>) {
+  return (
+    <AriaColorSwatch
+      className={cn("size-8 shrink-0 rounded-md border border-input", className)}
+      data-slot="color-picker-swatch"
+      style={{ background: CHECKERBOARD }}
+      {...props}
+    />
+  );
+}
+
+function ColorValueInput({
+  className,
+  ...props
+}: Omit<React.ComponentProps<typeof AriaColorField>, "children">) {
+  return (
+    <AriaColorField
+      className={cn("min-w-0 flex-1", className)}
+      data-slot="color-picker-value"
+      {...props}
+    >
+      <AriaInput
+        className={cn(
+          "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 font-mono text-sm tabular-nums outline-none",
+          "placeholder:text-muted-foreground focus-visible:ring-[3px] focus-visible:ring-ring/24",
+        )}
+      />
+    </AriaColorField>
+  );
+}
+
+/**
+ * A grid of colours somebody can pick from, and optionally add to.
+ *
+ * `onAdd` is what makes it "saved colours" rather than a fixed palette: the plus tile
+ * only appears when there is somewhere for the current colour to go.
+ */
+function ColorSavedColors({
+  className,
+  colors,
+  onSelect,
+  onAdd,
+  size = "md",
+  ...props
+}: Omit<React.ComponentProps<typeof AriaColorSwatchPicker>, "onChange" | "children"> & {
+  colors: string[];
+  onSelect?: (color: string) => void;
+  onAdd?: () => void;
+  size?: "sm" | "md";
+}) {
+  const tile = size === "sm" ? "size-6" : "size-8";
+
+  return (
+    <div className={cn("flex flex-wrap items-center gap-1.5", className)} data-slot="color-picker-saved">
+      <AriaColorSwatchPicker
+        className="flex flex-wrap items-center gap-1.5"
+        onChange={(color) => onSelect?.(color.toString("hex"))}
+        {...props}
+      >
+        {colors.map((color) => (
+          <AriaColorSwatchPickerItem
+            className={cn(
+              tile,
+              "rounded-md border border-input outline-none",
+              "data-[focus-visible]:ring-[3px] data-[focus-visible]:ring-ring/24",
+              "data-[selected]:ring-2 data-[selected]:ring-ring data-[selected]:ring-offset-2 data-[selected]:ring-offset-background",
+            )}
+            color={color}
+            key={color}
+          >
+            <AriaColorSwatch className="size-full rounded-[5px]" />
+          </AriaColorSwatchPickerItem>
+        ))}
+      </AriaColorSwatchPicker>
+      {onAdd ? (
+        <button
+          aria-label="Save this colour"
+          className={cn(
+            tile,
+            "flex items-center justify-center rounded-md border border-input border-dashed text-muted-foreground outline-none",
+            "transition-colors hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/24",
+          )}
+          onClick={onAdd}
+          type="button"
+        >
+          <PlusIcon className={size === "sm" ? "size-3" : "size-3.5"} strokeWidth={2} />
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+/**
+ * Pick a colour from anywhere on the screen.
+ *
+ * Renders nothing where the browser has no `EyeDropper` — Firefox and Safari do not,
+ * and a button that silently does nothing is worse than one that is not offered. The
+ * check runs in an effect rather than during render, because `window` is not there on
+ * the server and a hydration mismatch over a button is still a hydration mismatch.
+ */
+function ColorEyeDropper({ className, ...props }: React.ComponentProps<"button">) {
+  const state = useColorPicker();
+  const [supported, setSupported] = React.useState(false);
+
+  React.useEffect(() => {
+    setSupported(typeof window !== "undefined" && "EyeDropper" in window);
+  }, []);
+
+  if (!supported) return null;
+
+  return (
+    <button
+      aria-label="Pick a colour from the screen"
+      className={cn(
+        "flex size-9 shrink-0 items-center justify-center rounded-md border border-input text-muted-foreground outline-none",
+        "transition-colors hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/24",
+        className,
+      )}
+      data-slot="color-picker-eyedropper"
+      onClick={async () => {
+        try {
+          // @ts-expect-error — EyeDropper is not in lib.dom yet.
+          const result = await new window.EyeDropper().open();
+          state.setColor(parseColor(result.sRGBHex));
+        } catch {
+          // The user dismissed it. Not an error, and nothing to say about it.
+        }
+      }}
+      type="button"
+      {...props}
+    >
+      <PipetteIcon className="size-4" strokeWidth={1.8} />
+    </button>
+  );
+}
+
+/** The current colour as a swatch — reads state, so it needs no props. */
+function ColorPreview({ className }: { className?: string }) {
+  const state = useColorPicker();
+  return (
+    <AriaColorSwatch
+      className={cn("size-9 shrink-0 rounded-md border border-input", className)}
+      color={state.color}
+      data-slot="color-picker-preview"
+      style={{ background: CHECKERBOARD }}
+    />
+  );
+}
+
+/**
+ * The whole picker, already composed — plane, hue, alpha, eyedropper and a hex box.
+ *
+ * What a screen reaches for when it just wants "let them choose a colour". Anything
+ * more specific composes the parts above instead.
+ */
+function ColorPickerPanel({
+  className,
+  withAlpha = false,
+  savedColors,
+  onSaveColor,
+  ...props
+}: Omit<React.ComponentProps<typeof AriaColorPicker>, "children"> & {
+  /** Wraps the panel, not the provider — the provider renders no element. */
+  className?: string;
+  withAlpha?: boolean;
+  savedColors?: string[];
+  onSaveColor?: () => void;
+}) {
+  return (
+    <ColorPickerProvider {...props}>
+      <div
+        className={cn("flex w-64 flex-col gap-3 rounded-xl border border-input bg-popover p-3", className)}
+        data-slot="color-picker"
+      >
+        <ColorArea colorSpace="hsb" xChannel="saturation" yChannel="brightness" />
+        <div className="flex items-center gap-2">
+          <ColorPreview />
+          <div className="flex min-w-0 flex-1 flex-col gap-2">
+            <ColorHueSlider />
+            {withAlpha ? <ColorAlphaSlider /> : null}
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <ColorEyeDropper />
+          <ColorValueInput />
+        </div>
+        {savedColors?.length || onSaveColor ? (
+          <ColorSavedColors colors={savedColors ?? []} onAdd={onSaveColor} size="sm" />
+        ) : null}
+      </div>
+    </ColorPickerProvider>
+  );
+}
+
+/**
+ * The compound namespace.
+ *
+ * Exported as one object rather than a dozen loose names because the parts are only
+ * meaningful together, and `ColorPicker.Area` says which state it reads in a way that
+ * `ColorArea` does not.
+ */
+const ColorPicker = Object.assign(ColorPickerPanel, {
+  Provider: ColorPickerProvider,
+  Area: ColorArea,
+  Thumb: ColorThumb,
+  HueSlider: ColorHueSlider,
+  AlphaSlider: ColorAlphaSlider,
+  Swatch: ColorSwatch,
+  Preview: ColorPreview,
+  ValueInput: ColorValueInput,
+  SavedColors: ColorSavedColors,
+  EyeDropper: ColorEyeDropper,
+});
+
+export {
+  ColorPicker,
+  ColorPickerPanel,
+  ColorPickerProvider,
+  ColorArea,
+  ColorThumb,
+  ColorHueSlider,
+  ColorAlphaSlider,
+  ColorSwatch,
+  ColorPreview,
+  ColorValueInput,
+  ColorSavedColors,
+  ColorEyeDropper,
+  useColorPicker,
+  parseColor,
+  getColorChannels,
+};

package/src/components/ui/context-meter.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+type ContextMeterState = "ok" | "warn" | "summarizing" | "full";
+
+interface ContextMeterProps extends Omit<React.SVGProps<SVGSVGElement>, "children"> {
+  /** Tokens currently in context. Used with `budget` when `pct` is not given. */
+  used?: number;
+  /** The model's context budget in tokens. */
+  budget?: number;
+  /** Fill fraction 0..1. Takes precedence over `used`/`budget` when provided. */
+  pct?: number;
+  /** Visual state; derived from the thresholds below when omitted. */
+  state?: ContextMeterState;
+  /** Threshold fractions — mirror the backend `config.context` values. */
+  warnAt?: number;
+  summarizeAt?: number;
+  lockAt?: number;
+  /** Diameter in px. */
+  size?: number;
+  /** Ring thickness in px. */
+  strokeWidth?: number;
+  /** Render the rounded percentage in the ring's center. */
+  showLabel?: boolean;
+  className?: string;
+}
+
+const STATE_COLOR: Record<ContextMeterState, string> = {
+  ok: "text-muted-foreground",
+  warn: "text-amber-500",
+  summarizing: "text-sky-500",
+  full: "text-destructive",
+};
+
+function deriveState(
+  pct: number,
+  warnAt: number,
+  summarizeAt: number,
+  lockAt: number,
+): ContextMeterState {
+  if (pct >= lockAt) return "full";
+  if (pct >= summarizeAt) return "summarizing";
+  if (pct >= warnAt) return "warn";
+  return "ok";
+}
+
+/**
+ * A compact radial gauge for how full an agent conversation's context window is.
+ *
+ * Feed it the backend `context_meter` payload (`pct`/`state` + thresholds) or a
+ * raw `used`/`budget` pair. The ring colors shift as the conversation approaches
+ * the summarize (folds older messages) and lock (must start a new chat) points,
+ * mirroring Claude Code's context indicator. Theme-aware and accessible
+ * (`role="meter"`).
+ */
+function ContextMeter({
+  used,
+  budget,
+  pct,
+  state,
+  warnAt = 0.75,
+  summarizeAt = 0.85,
+  lockAt = 0.98,
+  size = 24,
+  strokeWidth = 2.5,
+  showLabel = false,
+  className,
+  ...props
+}: ContextMeterProps) {
+  const fraction = Math.max(
+    0,
+    Math.min(1, pct ?? (budget ? (used ?? 0) / budget : 0)),
+  );
+  const resolvedState = state ?? deriveState(fraction, warnAt, summarizeAt, lockAt);
+  const percent = Math.round(fraction * 100);
+
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const dash = circumference * fraction;
+  const center = size / 2;
+
+  return (
+    <span
+      className={cn("relative inline-flex items-center justify-center", STATE_COLOR[resolvedState])}
+      data-slot="context-meter"
+      data-state={resolvedState}
+      style={{ width: size, height: size }}
+    >
+      <svg
+        width={size}
+        height={size}
+        viewBox={`0 0 ${size} ${size}`}
+        role="meter"
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={percent}
+        aria-label={`Context ${percent}% used`}
+        className={cn("-rotate-90", className)}
+        {...props}
+      >
+        <circle
+          cx={center}
+          cy={center}
+          r={radius}
+          fill="none"
+          strokeWidth={strokeWidth}
+          className="stroke-muted"
+        />
+        <circle
+          cx={center}
+          cy={center}
+          r={radius}
+          fill="none"
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          stroke="currentColor"
+          strokeDasharray={`${dash} ${circumference}`}
+          className="transition-[stroke-dasharray] duration-500 ease-out"
+        />
+      </svg>
+      {showLabel ? (
+        <span className="absolute font-medium text-[0.5rem] text-foreground tabular-nums">
+          {percent}
+        </span>
+      ) : null}
+    </span>
+  );
+}
+
+export { ContextMeter };
+export type { ContextMeterProps, ContextMeterState };

package/src/index.ts

@@ -24,12 +24,15 @@ export * from "./components/ui/card";
 export * from "./components/ui/carousel";
 export * from "./components/ui/chart";
 export * from "./components/ui/chat";
+export * from "./components/ui/chat-divider";
 export * from "./components/ui/checkbox";
 export * from "./components/ui/checkbox-group";
 export * from "./components/ui/collapsible";
+export * from "./components/ui/color-picker";
 export * from "./components/ui/combobox";
 export * from "./components/ui/command";
 export * from "./components/ui/confetti";
+export * from "./components/ui/context-meter";
 export * from "./components/ui/credit-card";
 export * from "./components/ui/data-table-paged";
 export * from "./components/ui/drawer";