@momentumworld/ui-react 0.17.0

package/src/components/ui/confetti.tsx

@@ -0,0 +1,196 @@
+"use client";
+
+import confetti from "canvas-confetti";
+import type {
+  GlobalOptions as ConfettiGlobalOptions,
+  CreateTypes as ConfettiInstance,
+  Options as ConfettiOptions,
+} from "canvas-confetti";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  type ReactNode,
+} from "react";
+import type * as React from "react";
+
+import { Button, type ButtonProps } from "./button";
+
+/** The brand celebration palette — soft violet / pink / peach / cream. */
+export const CONFETTI_COLORS = ["#a786ff", "#fd8bbc", "#eca184", "#f8deb1"] as const;
+
+function prefersReducedMotion(): boolean {
+  return (
+    typeof window !== "undefined" &&
+    !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches
+  );
+}
+
+export interface SideCannonsOptions {
+  /** How long the cannons keep firing, in ms (default 3000). */
+  durationMs?: number;
+  /** Confetti colors (default {@link CONFETTI_COLORS}). */
+  colors?: readonly string[];
+  /** Particles emitted per side per frame (default 2). */
+  particleCount?: number;
+  /** z-index of the confetti canvas (default 100). */
+  zIndex?: number;
+}
+
+/**
+ * Fires confetti from the left and right edges of the viewport for a few
+ * seconds — the "side cannons" celebration. Purely imperative, so it can be
+ * triggered from an effect (e.g. the first time a page loads) without rendering
+ * anything. No-ops on the server and when the user prefers reduced motion.
+ *
+ * @example
+ * useEffect(() => { sideCannons(); }, []);
+ */
+export function sideCannons(options: SideCannonsOptions = {}): void {
+  if (typeof window === "undefined" || prefersReducedMotion()) return;
+
+  const {
+    durationMs = 3000,
+    colors = CONFETTI_COLORS,
+    particleCount = 2,
+    zIndex = 100,
+  } = options;
+
+  const end = performance.now() + durationMs;
+  const shared = { particleCount, spread: 55, startVelocity: 60, colors: [...colors], zIndex };
+
+  const frame = () => {
+    if (performance.now() > end) return;
+    void confetti({ ...shared, angle: 60, origin: { x: 0, y: 0.5 } });
+    void confetti({ ...shared, angle: 120, origin: { x: 1, y: 0.5 } });
+    requestAnimationFrame(frame);
+  };
+
+  frame();
+}
+
+type ConfettiApi = {
+  /** Fire the confetti instance, merging `options` over the component's. */
+  fire: (options?: ConfettiOptions) => void;
+};
+
+export type ConfettiRef = ConfettiApi | null;
+
+export type ConfettiProps = React.ComponentPropsWithRef<"canvas"> & {
+  /** Per-shot options merged into every `fire()` call. */
+  options?: ConfettiOptions;
+  /** Global options passed to `confetti.create` (resize / worker). */
+  globalOptions?: ConfettiGlobalOptions;
+  /** Skip the automatic fire on mount — drive it via the ref instead. */
+  manualstart?: boolean;
+  children?: ReactNode;
+};
+
+const ConfettiContext = createContext<ConfettiApi>({} as ConfettiApi);
+
+/**
+ * A canvas-bound confetti emitter. Renders its own `<canvas>` and exposes an
+ * imperative `fire()` via ref (and to descendants through context). By default
+ * it fires once on mount; pass `manualstart` to control it yourself.
+ *
+ * For a full-screen, no-render celebration prefer {@link sideCannons}.
+ */
+const ConfettiComponent = forwardRef<ConfettiRef, ConfettiProps>((props, ref) => {
+  const {
+    options,
+    globalOptions = { resize: true, useWorker: true },
+    manualstart = false,
+    children,
+    ...rest
+  } = props;
+  const instanceRef = useRef<ConfettiInstance | null>(null);
+
+  const canvasRef = useCallback(
+    (node: HTMLCanvasElement | null) => {
+      if (node !== null) {
+        if (instanceRef.current) return;
+        instanceRef.current = confetti.create(node, { ...globalOptions, resize: true });
+      } else if (instanceRef.current) {
+        instanceRef.current.reset();
+        instanceRef.current = null;
+      }
+    },
+    [globalOptions],
+  );
+
+  const fire = useCallback(
+    async (opts: ConfettiOptions = {}) => {
+      if (prefersReducedMotion()) return;
+      try {
+        await instanceRef.current?.({ ...options, ...opts });
+      } catch (error) {
+        console.error("Confetti error:", error);
+      }
+    },
+    [options],
+  );
+
+  const api = useMemo<ConfettiApi>(() => ({ fire }), [fire]);
+
+  useImperativeHandle(ref, () => api, [api]);
+
+  useEffect(() => {
+    if (!manualstart) void fire();
+  }, [manualstart, fire]);
+
+  return (
+    <ConfettiContext.Provider value={api}>
+      <canvas data-slot="confetti" ref={canvasRef} {...rest} />
+      {children}
+    </ConfettiContext.Provider>
+  );
+});
+ConfettiComponent.displayName = "Confetti";
+
+export const Confetti = ConfettiComponent;
+
+/** Access the nearest {@link Confetti}'s imperative `fire()` from a child. */
+export function useConfetti(): ConfettiApi {
+  return useContext(ConfettiContext);
+}
+
+export interface ConfettiButtonProps extends ButtonProps {
+  /** Confetti options; origin defaults to the button's center. */
+  options?: ConfettiOptions & ConfettiGlobalOptions & { canvas?: HTMLCanvasElement };
+}
+
+/**
+ * A {@link Button} that bursts confetti from its own center on click. Handy for
+ * "Claim", "Done", or other one-off celebratory actions.
+ */
+function ConfettiButtonComponent({ options, children, onClick, ...props }: ConfettiButtonProps) {
+  const handleClick = async (event: React.MouseEvent<HTMLButtonElement>) => {
+    onClick?.(event);
+    if (prefersReducedMotion()) return;
+    try {
+      const rect = event.currentTarget.getBoundingClientRect();
+      const x = rect.left + rect.width / 2;
+      const y = rect.top + rect.height / 2;
+      await confetti({
+        ...options,
+        origin: { x: x / window.innerWidth, y: y / window.innerHeight },
+      });
+    } catch (error) {
+      console.error("Confetti button error:", error);
+    }
+  };
+
+  return (
+    <Button data-slot="confetti-button" onClick={handleClick} {...props}>
+      {children}
+    </Button>
+  );
+}
+ConfettiButtonComponent.displayName = "ConfettiButton";
+
+export const ConfettiButton = ConfettiButtonComponent;

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

@@ -0,0 +1,271 @@
+"use client";
+
+import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu";
+import { CheckIcon, ChevronRightIcon } from "lucide-react";
+import type * as React from "react";
+import { cn } from "../../lib/utils/css";
+
+function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
+}
+
+function ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {
+  return (
+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+  );
+}
+
+function ContextMenuTrigger({
+  className,
+  ...props
+}: ContextMenuPrimitive.Trigger.Props) {
+  return (
+    <ContextMenuPrimitive.Trigger
+      data-slot="context-menu-trigger"
+      className={cn("select-none", className)}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuContent({
+  className,
+  align = "start",
+  alignOffset = 4,
+  side = "right",
+  sideOffset = 0,
+  ...props
+}: ContextMenuPrimitive.Popup.Props &
+  Pick<
+    ContextMenuPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Positioner
+        className="isolate z-50 outline-none"
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <ContextMenuPrimitive.Popup
+          data-slot="context-menu-content"
+          className={cn(
+            "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 max-h-(--available-height) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none",
+            className,
+          )}
+          {...props}
+        />
+      </ContextMenuPrimitive.Positioner>
+    </ContextMenuPrimitive.Portal>
+  );
+}
+
+function ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {
+  return (
+    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+  );
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: ContextMenuPrimitive.GroupLabel.Props & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.GroupLabel
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn(
+        "text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: ContextMenuPrimitive.Item.Props & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {
+  return (
+    <ContextMenuPrimitive.SubmenuRoot data-slot="context-menu-sub" {...props} />
+  );
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: ContextMenuPrimitive.SubmenuTrigger.Props & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.SubmenuTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="cn-rtl-flip ml-auto" />
+    </ContextMenuPrimitive.SubmenuTrigger>
+  );
+}
+
+function ContextMenuSubContent({
+  ...props
+}: React.ComponentProps<typeof ContextMenuContent>) {
+  return (
+    <ContextMenuContent
+      data-slot="context-menu-sub-content"
+      className="shadow-lg"
+      side="right"
+      {...props}
+    />
+  );
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: ContextMenuPrimitive.CheckboxItem.Props & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="absolute right-2 pointer-events-none">
+        <ContextMenuPrimitive.CheckboxItemIndicator>
+          <CheckIcon />
+        </ContextMenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: ContextMenuPrimitive.RadioGroup.Props) {
+  return (
+    <ContextMenuPrimitive.RadioGroup
+      data-slot="context-menu-radio-group"
+      {...props}
+    />
+  );
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: ContextMenuPrimitive.RadioItem.Props & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 pointer-events-none">
+        <ContextMenuPrimitive.RadioItemIndicator>
+          <CheckIcon />
+        </ContextMenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  );
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: ContextMenuPrimitive.Separator.Props) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        "text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+};

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 };