sh-ui-cli 0.43.0 → 0.45.0

package/data/registry/react/components/color-picker/index.tailwind.tsx

@@ -0,0 +1,309 @@
+"use client";
+
+import * as React from "react";
+
+interface HSV { h: number; s: number; v: number; }
+interface HSVA extends HSV { a: number; }
+
+export interface ColorPickerProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue" | "children"> {
+  value?: string;
+  onChange?: (hex: string) => void;
+  defaultValue?: string;
+  children?: React.ReactNode;
+}
+
+function clamp(n: number, min: number, max: number) { return Math.min(max, Math.max(min, n)); }
+
+function hexToRgb(hex: string): [number, number, number] {
+  const m = hex.replace("#", "");
+  const full = m.length === 3 ? m.split("").map((c) => c + c).join("") : m;
+  const n = parseInt(full, 16);
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+function rgbToHex(r: number, g: number, b: number): string {
+  const toHex = (n: number) => clamp(Math.round(n), 0, 255).toString(16).padStart(2, "0");
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
+}
+function rgbToHsv(r: number, g: number, b: number): HSV {
+  const rn = r / 255, gn = g / 255, bn = b / 255;
+  const max = Math.max(rn, gn, bn); const min = Math.min(rn, gn, bn);
+  const d = max - min; let h = 0;
+  if (d !== 0) {
+    if (max === rn) h = ((gn - bn) / d) % 6;
+    else if (max === gn) h = (bn - rn) / d + 2;
+    else h = (rn - gn) / d + 4;
+    h *= 60; if (h < 0) h += 360;
+  }
+  const s = max === 0 ? 0 : d / max; const v = max;
+  return { h, s, v };
+}
+function hsvToRgb({ h, s, v }: HSV): [number, number, number] {
+  const c = v * s; const hh = h / 60;
+  const x = c * (1 - Math.abs((hh % 2) - 1));
+  let r = 0, g = 0, b = 0;
+  if (hh >= 0 && hh < 1) [r, g, b] = [c, x, 0];
+  else if (hh < 2) [r, g, b] = [x, c, 0];
+  else if (hh < 3) [r, g, b] = [0, c, x];
+  else if (hh < 4) [r, g, b] = [0, x, c];
+  else if (hh < 5) [r, g, b] = [x, 0, c];
+  else [r, g, b] = [c, 0, x];
+  const m = v - c;
+  return [(r + m) * 255, (g + m) * 255, (b + m) * 255];
+}
+function hexToHsv(hex: string): HSV { const [r, g, b] = hexToRgb(hex); return rgbToHsv(r, g, b); }
+function hsvToHex(hsv: HSV): string { const [r, g, b] = hsvToRgb(hsv); return rgbToHex(r, g, b); }
+
+const HEX_RE = /^#?[0-9a-f]{6}$/i;
+
+function useDrag(onMove: (e: PointerEvent, el: HTMLElement) => void) {
+  const ref = React.useRef<HTMLDivElement>(null);
+  const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+    const el = ref.current; if (!el) return;
+    el.setPointerCapture(e.pointerId);
+    onMove(e.nativeEvent, el);
+    const onPointerMove = (ev: PointerEvent) => onMove(ev, el);
+    const onPointerUp = (ev: PointerEvent) => {
+      el.releasePointerCapture(ev.pointerId);
+      el.removeEventListener("pointermove", onPointerMove);
+      el.removeEventListener("pointerup", onPointerUp);
+    };
+    el.addEventListener("pointermove", onPointerMove);
+    el.addEventListener("pointerup", onPointerUp);
+  };
+  return { ref, onPointerDown };
+}
+
+interface ColorPickerContextValue {
+  hsva: HSVA; hex: string; pureHueHex: string;
+  setHsv: (next: Partial<HSV>) => void;
+  setAlpha: (a: number) => void;
+  commitHex: (raw: string) => boolean;
+}
+const ColorPickerContext = React.createContext<ColorPickerContextValue | null>(null);
+function useColorPicker() {
+  const ctx = React.useContext(ColorPickerContext);
+  if (!ctx) throw new Error("ColorPicker 하위 컴포넌트는 <ColorPicker> 내부에서만 사용할 수 있습니다.");
+  return ctx;
+}
+
+export function ColorPicker({
+  value: valueProp, onChange, defaultValue = "#000000", className, children, ...rest
+}: ColorPickerProps) {
+  const isControlled = valueProp !== undefined;
+  const [internal, setInternal] = React.useState(defaultValue);
+  const value = isControlled ? valueProp! : internal;
+  const [hsva, setHsva] = React.useState<HSVA>(() => ({ ...hexToHsv(value), a: 1 }));
+
+  const lastEmittedRef = React.useRef(value);
+  React.useEffect(() => {
+    if (value === lastEmittedRef.current) return;
+    setHsva((prev) => ({ ...hexToHsv(value), a: prev.a }));
+  }, [value]);
+
+  const setHsv = React.useCallback((partial: Partial<HSV>) => {
+    const next: HSVA = { ...hsva, ...partial };
+    const hex = hsvToHex(next);
+    lastEmittedRef.current = hex;
+    setHsva(next);
+    if (!isControlled) setInternal(hex);
+    onChange?.(hex);
+  }, [hsva, isControlled, onChange]);
+
+  const setAlpha = React.useCallback((a: number) => {
+    setHsva((prev) => ({ ...prev, a: clamp(a, 0, 1) }));
+  }, []);
+
+  const commitHex = React.useCallback((raw: string) => {
+    const v = raw.trim();
+    if (!HEX_RE.test(v)) return false;
+    const normalized = (v.startsWith("#") ? v : `#${v}`).toUpperCase();
+    const nextHsv = hexToHsv(normalized);
+    const next: HSVA = { ...nextHsv, a: hsva.a };
+    const hex = hsvToHex(next);
+    lastEmittedRef.current = hex;
+    setHsva(next);
+    if (!isControlled) setInternal(hex);
+    onChange?.(hex);
+    return true;
+  }, [hsva.a, isControlled, onChange]);
+
+  const pureHueHex = React.useMemo(() => hsvToHex({ h: hsva.h, s: 1, v: 1 }), [hsva.h]);
+  const ctx = React.useMemo<ColorPickerContextValue>(
+    () => ({ hsva, hex: value, pureHueHex, setHsv, setAlpha, commitHex }),
+    [hsva, value, pureHueHex, setHsv, setAlpha, commitHex],
+  );
+
+  return (
+    <ColorPickerContext.Provider value={ctx}>
+      <div className={["flex flex-col gap-2.5 w-full select-none", className].filter(Boolean).join(" ")} {...rest}>
+        {children ?? (<><ColorPickerSaturation /><ColorPickerHue /><ColorPickerHex /></>)}
+      </div>
+    </ColorPickerContext.Provider>
+  );
+}
+
+export interface ColorPickerSaturationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onPointerDown"> {}
+
+export function ColorPickerSaturation({ className, style, ...rest }: ColorPickerSaturationProps) {
+  const { hsva, hex, pureHueHex, setHsv } = useColorPicker();
+  const drag = useDrag((e, el) => {
+    const r = el.getBoundingClientRect();
+    const x = clamp((e.clientX - r.left) / r.width, 0, 1);
+    const y = clamp((e.clientY - r.top) / r.height, 0, 1);
+    setHsv({ s: x, v: 1 - y });
+  });
+  return (
+    <div
+      ref={drag.ref}
+      onPointerDown={drag.onPointerDown}
+      className={["relative w-full aspect-[4/3] rounded-[var(--radius)] cursor-crosshair overflow-hidden touch-none", className].filter(Boolean).join(" ")}
+      style={{ background: pureHueHex, ...style }}
+      role="slider"
+      aria-label="채도/명도"
+      aria-valuemin={0} aria-valuemax={100} aria-valuenow={Math.round(hsva.s * 100)}
+      {...rest}
+    >
+      <div className="absolute inset-0 bg-[linear-gradient(to_right,#fff,transparent)]" />
+      <div className="absolute inset-0 bg-[linear-gradient(to_top,#000,transparent)]" />
+      <div
+        className="absolute w-3.5 h-3.5 -ml-[0.4375rem] -mt-[0.4375rem] border-2 border-white rounded-full shadow-[0_0_0_1px_rgba(0,0,0,0.4)] pointer-events-none"
+        style={{ left: `${hsva.s * 100}%`, top: `${(1 - hsva.v) * 100}%`, background: hex }}
+      />
+    </div>
+  );
+}
+
+export interface ColorPickerHueProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onPointerDown"> {}
+
+export function ColorPickerHue({ className, ...rest }: ColorPickerHueProps) {
+  const { hsva, setHsv } = useColorPicker();
+  const drag = useDrag((e, el) => {
+    const r = el.getBoundingClientRect();
+    const x = clamp((e.clientX - r.left) / r.width, 0, 1);
+    setHsv({ h: x * 360 });
+  });
+  return (
+    <div
+      ref={drag.ref}
+      onPointerDown={drag.onPointerDown}
+      className={["relative w-full h-3.5 rounded-full cursor-pointer touch-none bg-[linear-gradient(to_right,#f00_0%,#ff0_16.66%,#0f0_33.33%,#0ff_50%,#00f_66.66%,#f0f_83.33%,#f00_100%)]", className].filter(Boolean).join(" ")}
+      role="slider"
+      aria-label="색조"
+      aria-valuemin={0} aria-valuemax={360} aria-valuenow={Math.round(hsva.h)}
+      {...rest}
+    >
+      <div
+        className="absolute top-1/2 w-3.5 h-3.5 -ml-[0.4375rem] -translate-y-1/2 bg-white rounded-full shadow-[0_0_0_1px_rgba(0,0,0,0.4)] pointer-events-none"
+        style={{ left: `${(hsva.h / 360) * 100}%` }}
+      />
+    </div>
+  );
+}
+
+export interface ColorPickerAlphaProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onPointerDown"> {}
+
+export function ColorPickerAlpha({ className, style, ...rest }: ColorPickerAlphaProps) {
+  const { hsva, hex, setAlpha } = useColorPicker();
+  const drag = useDrag((e, el) => {
+    const r = el.getBoundingClientRect();
+    const x = clamp((e.clientX - r.left) / r.width, 0, 1);
+    setAlpha(x);
+  });
+  const gradient = `linear-gradient(to right, rgba(0,0,0,0) 0%, ${hex} 100%)`;
+  return (
+    <div
+      ref={drag.ref}
+      onPointerDown={drag.onPointerDown}
+      className={["relative w-full h-3.5 rounded-full cursor-pointer touch-none overflow-hidden bg-white bg-[length:8px_8px] bg-[position:0_0,0_4px,4px_-4px,-4px_0] [background-image:linear-gradient(45deg,#ccc_25%,transparent_25%),linear-gradient(-45deg,#ccc_25%,transparent_25%),linear-gradient(45deg,transparent_75%,#ccc_75%),linear-gradient(-45deg,transparent_75%,#ccc_75%)]", className].filter(Boolean).join(" ")}
+      role="slider"
+      aria-label="투명도"
+      aria-valuemin={0} aria-valuemax={100} aria-valuenow={Math.round(hsva.a * 100)}
+      style={style}
+      {...rest}
+    >
+      <div className="absolute inset-0 rounded-[inherit] pointer-events-none" style={{ backgroundImage: gradient }} />
+      <div
+        className="absolute top-1/2 w-3.5 h-3.5 -ml-[0.4375rem] -translate-y-1/2 bg-white rounded-full shadow-[0_0_0_1px_rgba(0,0,0,0.4)] pointer-events-none"
+        style={{ left: `${hsva.a * 100}%` }}
+      />
+    </div>
+  );
+}
+
+export interface ColorPickerHexProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  showSwatch?: boolean;
+}
+
+export function ColorPickerHex({ className, showSwatch = true, ...rest }: ColorPickerHexProps) {
+  const { hex, commitHex } = useColorPicker();
+  const [draft, setDraft] = React.useState(hex);
+
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  React.useEffect(() => {
+    if (document.activeElement !== inputRef.current) setDraft(hex);
+  }, [hex]);
+
+  const onCommit = () => { if (!commitHex(draft)) setDraft(hex); };
+
+  return (
+    <div
+      className={["flex items-center gap-[var(--space-2)]", className].filter(Boolean).join(" ")}
+      {...rest}
+    >
+      {showSwatch && (
+        <div
+          className="w-7 h-7 rounded-[calc(var(--radius)-2px)] border border-border shrink-0"
+          style={{ background: hex }}
+          aria-hidden
+        />
+      )}
+      <input
+        ref={inputRef}
+        type="text"
+        className="flex-1 min-w-0 h-7 px-[var(--space-2)] border border-border rounded-[calc(var(--radius)-2px)] bg-background text-foreground font-mono text-[0.8125rem] uppercase focus:outline-none focus:border-foreground focus:shadow-[0_0_0_1px_var(--foreground)]"
+        value={draft}
+        onChange={(e) => setDraft(e.target.value)}
+        onBlur={onCommit}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") { e.preventDefault(); (e.target as HTMLInputElement).blur(); }
+        }}
+        spellCheck={false}
+        aria-label="Hex"
+      />
+    </div>
+  );
+}
+
+export interface ColorPickerSwatchesProps extends React.HTMLAttributes<HTMLDivElement> {
+  colors: string[];
+}
+
+export function ColorPickerSwatches({ className, colors, ...rest }: ColorPickerSwatchesProps) {
+  const { hex, commitHex } = useColorPicker();
+  return (
+    <div
+      role="group"
+      aria-label="미리 준비된 색상"
+      className={["flex flex-wrap gap-1.5", className].filter(Boolean).join(" ")}
+      {...rest}
+    >
+      {colors.map((c) => {
+        const normalized = c.toUpperCase();
+        const selected = normalized === hex.toUpperCase();
+        return (
+          <button
+            key={c}
+            type="button"
+            className="w-5 h-5 p-0 border border-border rounded-[calc(var(--radius)-4px)] cursor-pointer transition-[transform,box-shadow] duration-[var(--duration-fast)] hover:scale-110 focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 data-[selected]:shadow-[0_0_0_2px_var(--background),0_0_0_3.5px_var(--foreground)]"
+            aria-label={c}
+            aria-pressed={selected}
+            data-selected={selected || undefined}
+            style={{ background: c }}
+            onClick={() => commitHex(c)}
+          />
+        );
+      })}
+    </div>
+  );
+}

package/data/registry/react/components/combobox/index.tailwind.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import * as React from "react";
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+
+type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
+
+function cx(...args: (string | undefined | false)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+export const Combobox = BaseCombobox.Root;
+export const ComboboxIcon = BaseCombobox.Icon;
+export const ComboboxTrigger = BaseCombobox.Trigger;
+export const ComboboxClear = BaseCombobox.Clear;
+export const ComboboxValue = BaseCombobox.Value;
+export const ComboboxGroup = BaseCombobox.Group;
+export const ComboboxChips = BaseCombobox.Chips;
+
+export const ComboboxInput = React.forwardRef<
+  HTMLInputElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseCombobox.Input>>
+>(function ComboboxInput({ className, ...props }, ref) {
+  return (
+    <BaseCombobox.Input
+      ref={ref}
+      className={cx(
+        "inline-flex w-full min-w-40 h-[var(--control-md)] px-[var(--space-3)] bg-background text-foreground border border-border rounded-[var(--radius)] text-[length:var(--text-sm)] leading-none outline-none transition-[border-color] duration-[var(--duration-fast)] placeholder:text-foreground-subtle hover:not-disabled:border-border-strong focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 disabled:opacity-[var(--opacity-disabled)] disabled:pointer-events-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+export const ComboboxContent = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseCombobox.Popup>> & {
+    container?: React.ComponentPropsWithoutRef<typeof BaseCombobox.Portal>["container"];
+    sideOffset?: number;
+  }
+>(function ComboboxContent({ className, children, container, sideOffset = 4, ...props }, ref) {
+  return (
+    <BaseCombobox.Portal container={container}>
+      <BaseCombobox.Positioner
+        className="z-[var(--z-dropdown)] outline-none w-[var(--anchor-width)]"
+        sideOffset={sideOffset}
+        align="start"
+      >
+        <BaseCombobox.Popup
+          ref={ref}
+          className={cx(
+            "max-h-[min(20rem,var(--available-height))] overflow-y-auto p-[var(--space-1)] bg-background text-foreground border border-border rounded-[var(--radius)] shadow-[0_8px_24px_rgba(0,0,0,0.08)] outline-none origin-[var(--transform-origin)] transition-[opacity,transform] duration-[140ms] ease-out motion-reduce:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.97] data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.97]",
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </BaseCombobox.Popup>
+      </BaseCombobox.Positioner>
+    </BaseCombobox.Portal>
+  );
+});
+
+export const ComboboxList = BaseCombobox.List;
+
+export const ComboboxItem = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseCombobox.Item>>
+>(function ComboboxItem({ className, children, ...props }, ref) {
+  return (
+    <BaseCombobox.Item
+      ref={ref}
+      className={cx(
+        "flex items-center gap-[var(--space-2)] py-1.5 px-3 text-[length:var(--text-sm)] leading-snug rounded-[calc(var(--radius)-2px)] cursor-pointer select-none outline-none data-[highlighted]:bg-background-muted hover:bg-background-muted data-[selected]:text-foreground data-[selected]:font-medium data-[disabled]:opacity-[var(--opacity-disabled)] data-[disabled]:pointer-events-none",
+        className,
+      )}
+      {...props}
+    >
+      <BaseCombobox.ItemIndicator className="order-1 ml-auto inline-flex items-center justify-center text-foreground">
+        <CheckIcon />
+      </BaseCombobox.ItemIndicator>
+      <span className="flex-1 overflow-hidden text-ellipsis whitespace-nowrap">{children}</span>
+    </BaseCombobox.Item>
+  );
+});
+
+export const ComboboxEmpty = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseCombobox.Empty>>
+>(function ComboboxEmpty({ className, ...props }, ref) {
+  return (
+    <BaseCombobox.Empty
+      ref={ref}
+      className={cx(
+        "py-[var(--space-3)] px-[var(--space-2)] text-center text-[0.8125rem] text-foreground-muted",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+export const ComboboxGroupLabel = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseCombobox.GroupLabel>>
+>(function ComboboxGroupLabel({ className, ...props }, ref) {
+  return (
+    <BaseCombobox.GroupLabel
+      ref={ref}
+      className={cx(
+        "py-1.5 px-[var(--space-2)] pb-[var(--space-1)] text-[length:var(--text-xs)] font-semibold text-foreground-muted uppercase tracking-[0.04em]",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+export const ComboboxChip = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseCombobox.Chip>>
+>(function ComboboxChip({ className, ...props }, ref) {
+  return (
+    <BaseCombobox.Chip
+      ref={ref}
+      className={cx(
+        "inline-flex items-center gap-[var(--space-1)] py-0.5 pr-1.5 pl-[var(--space-2)] mr-[var(--space-1)] text-[length:var(--text-xs)] leading-5 bg-background-muted rounded-[calc(var(--radius)-2px)] whitespace-nowrap",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+export const ComboboxChipRemove = React.forwardRef<
+  HTMLButtonElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseCombobox.ChipRemove>>
+>(function ComboboxChipRemove({ className, children, ...props }, ref) {
+  return (
+    <BaseCombobox.ChipRemove
+      ref={ref}
+      className={cx(
+        "inline-flex items-center justify-center w-4 h-4 p-0 border-0 rounded-full bg-transparent text-foreground-muted text-[length:var(--text-sm)] leading-none cursor-pointer transition-[background-color,color] duration-[var(--duration-fast)] hover:bg-background hover:text-foreground motion-reduce:transition-none",
+        className,
+      )}
+      {...props}
+    >
+      {children ?? "×"}
+    </BaseCombobox.ChipRemove>
+  );
+});
+
+function CheckIcon() {
+  return (
+    <svg viewBox="0 0 16 16" width="14" height="14" fill="none" aria-hidden>
+      <path d="M3 8.5l3 3 7-7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}

package/data/registry/react/components/context-menu/index.tailwind.tsx

@@ -0,0 +1,170 @@
+import * as React from "react";
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+
+type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
+
+function cx(...args: (string | undefined | false | null)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+const itemBase =
+  "relative flex items-center gap-[var(--space-2)] py-2 px-3 rounded-[calc(var(--radius)-2px)] cursor-pointer outline-none select-none transition-colors duration-[80ms] data-[highlighted]:bg-background-muted hover:bg-background-muted data-[disabled]:opacity-[var(--opacity-disabled)] data-[disabled]:pointer-events-none motion-reduce:transition-none";
+const itemCheck = "pl-7";
+const contentClasses =
+  "min-w-40 max-h-[min(24rem,var(--available-height,24rem))] overflow-y-auto p-[var(--space-1)] bg-background text-foreground border border-border rounded-[var(--radius)] shadow-[0_4px_6px_-1px_rgba(0,0,0,0.08),0_2px_4px_-2px_rgba(0,0,0,0.05)] text-[length:var(--text-sm)] origin-[var(--transform-origin)] animate-[sh-ui-cm-in_140ms_ease-out] data-[ending-style]:animate-[sh-ui-cm-out_100ms_ease-in_forwards] outline-none motion-reduce:animate-none motion-reduce:data-[ending-style]:animate-none";
+
+export const ContextMenu = BaseContextMenu.Root;
+
+export const ContextMenuTrigger = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseContextMenu.Trigger>>
+>(function ContextMenuTrigger({ className, ...props }, ref) {
+  return <BaseContextMenu.Trigger ref={ref} className={cx("contents", className)} {...props} />;
+});
+
+export interface ContextMenuContentProps
+  extends WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseContextMenu.Popup>> {
+  container?: React.ComponentPropsWithoutRef<typeof BaseContextMenu.Portal>["container"];
+}
+
+export const ContextMenuContent = React.forwardRef<HTMLDivElement, ContextMenuContentProps>(
+  function ContextMenuContent({ className, children, container, ...props }, ref) {
+    return (
+      <BaseContextMenu.Portal container={container}>
+        <BaseContextMenu.Positioner className="outline-none z-[var(--z-dropdown)]">
+          <BaseContextMenu.Popup ref={ref} className={cx(contentClasses, className)} {...props}>
+            {children}
+          </BaseContextMenu.Popup>
+        </BaseContextMenu.Positioner>
+      </BaseContextMenu.Portal>
+    );
+  },
+);
+
+export const ContextMenuItem = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseContextMenu.Item>>
+>(function ContextMenuItem({ className, ...props }, ref) {
+  return <BaseContextMenu.Item ref={ref} className={cx(itemBase, className)} {...props} />;
+});
+
+export const ContextMenuCheckboxItem = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseContextMenu.CheckboxItem>>
+>(function ContextMenuCheckboxItem({ className, children, ...props }, ref) {
+  return (
+    <BaseContextMenu.CheckboxItem ref={ref} className={cx(itemBase, itemCheck, className)} {...props}>
+      <span className="absolute left-2 inline-flex items-center justify-center w-4 h-4 text-foreground" aria-hidden>
+        <BaseContextMenu.CheckboxItemIndicator>
+          <CheckIcon />
+        </BaseContextMenu.CheckboxItemIndicator>
+      </span>
+      <span className="flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">{children}</span>
+    </BaseContextMenu.CheckboxItem>
+  );
+});
+
+export const ContextMenuRadioGroup = BaseContextMenu.RadioGroup;
+
+export const ContextMenuRadioItem = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseContextMenu.RadioItem>>
+>(function ContextMenuRadioItem({ className, children, ...props }, ref) {
+  return (
+    <BaseContextMenu.RadioItem ref={ref} className={cx(itemBase, itemCheck, className)} {...props}>
+      <span className="absolute left-2 inline-flex items-center justify-center w-4 h-4 text-foreground" aria-hidden>
+        <BaseContextMenu.RadioItemIndicator>
+          <DotIcon />
+        </BaseContextMenu.RadioItemIndicator>
+      </span>
+      <span className="flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">{children}</span>
+    </BaseContextMenu.RadioItem>
+  );
+});
+
+export const ContextMenuGroup = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseContextMenu.Group>>
+>(function ContextMenuGroup({ className, ...props }, ref) {
+  return <BaseContextMenu.Group ref={ref} className={cx("p-0", className)} {...props} />;
+});
+
+export const ContextMenuLabel = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseContextMenu.GroupLabel>>
+>(function ContextMenuLabel({ className, ...props }, ref) {
+  return (
+    <BaseContextMenu.GroupLabel
+      ref={ref}
+      className={cx(
+        "py-[var(--space-2)] px-[var(--space-2)] pb-[var(--space-1)] text-[length:var(--text-xs)] font-semibold text-foreground-muted uppercase tracking-[0.04em]",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+export const ContextMenuSeparator = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  function ContextMenuSeparator({ className, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        role="separator"
+        aria-orientation="horizontal"
+        className={cx("h-px bg-border my-[var(--space-1)]", className)}
+        {...props}
+      />
+    );
+  },
+);
+
+export const ContextMenuSub = BaseContextMenu.SubmenuRoot;
+
+export const ContextMenuSubTrigger = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseContextMenu.SubmenuTrigger>>
+>(function ContextMenuSubTrigger({ className, children, ...props }, ref) {
+  return (
+    <BaseContextMenu.SubmenuTrigger
+      ref={ref}
+      className={cx(itemBase, "data-[popup-open]:bg-background-muted", className)}
+      {...props}
+    >
+      <span className="flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">{children}</span>
+      <span className="inline-flex items-center justify-center ml-auto text-foreground-muted" aria-hidden>
+        <ChevronRightIcon />
+      </span>
+    </BaseContextMenu.SubmenuTrigger>
+  );
+});
+
+export const ContextMenuSubContent = ContextMenuContent;
+
+function CheckIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path d="M3.5 8.5l3 3 6-7" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+function DotIcon() {
+  return <svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor" aria-hidden><circle cx="4" cy="4" r="3" /></svg>;
+}
+function ChevronRightIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path d="M6 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+if (typeof document !== "undefined" && !document.querySelector("style[data-sh-ui-cm]")) {
+  const style = document.createElement("style");
+  style.setAttribute("data-sh-ui-cm", "");
+  style.textContent = `
+@keyframes sh-ui-cm-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
+@keyframes sh-ui-cm-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.96); } }
+  `;
+  document.head.appendChild(style);
+}