@hilum/ui 3.8.6 → 3.10.0

package/src/components/file-thumbnail.tsx

@@ -3,27 +3,54 @@
 import { useEffect, useState } from "react";
 import { cn } from "../lib/utils";
 import { useShape } from "../lib/shape-context";
+import type * as Pdfjs from "pdfjs-dist";
 
 // ─── Lazy pdfjs loader ────────────────────────────────────────────────────
-// Imports pdfjs-dist on first PDF, caches the module, and points the worker
-// at the matching CDN build. Consumers don't need bundler-side worker config.
-type PdfjsModule = typeof import("pdfjs-dist");
+// Imports pdfjs-dist on first PDF and caches the module. pdf.js needs a worker
+// script; where it comes from, in order of precedence:
+//   1. `pdfWorkerSrc` prop on <FileThumbnail> (or the arg to loadPdfjs)
+//   2. setPdfWorkerSrc(url) — app-wide, call once at startup
+//   3. GlobalWorkerOptions.workerSrc already set by the app on pdfjs-dist
+//   4. Fallback: the matching build on cdn.jsdelivr.net. Convenient, but it's a
+//      third-party request at runtime — apps with a strict CSP or offline
+//      requirements should self-host the worker via 1 or 2, e.g. with Vite:
+//        import workerSrc from "pdfjs-dist/build/pdf.worker.min.mjs?url";
+//        setPdfWorkerSrc(workerSrc);
+// Type-only import: erased at build time, so pdfjs stays out of the main bundle.
+type PdfjsModule = typeof Pdfjs;
 let pdfjsPromise: Promise<PdfjsModule> | null = null;
+let configuredWorkerSrc: string | undefined;
 
-async function loadPdfjs(): Promise<PdfjsModule> {
-  if (!pdfjsPromise) {
-    pdfjsPromise = import("pdfjs-dist").then((mod) => {
-      if (!mod.GlobalWorkerOptions.workerSrc) {
-        mod.GlobalWorkerOptions.workerSrc = `https://cdn.jsdelivr.net/npm/pdfjs-dist@${mod.version}/build/pdf.worker.min.mjs`;
-      }
-      return mod;
-    });
+const cdnWorkerSrc = (version: string) =>
+  `https://cdn.jsdelivr.net/npm/pdfjs-dist@${version}/build/pdf.worker.min.mjs`;
+
+function applyWorkerSrc(mod: PdfjsModule, workerSrc?: string) {
+  const explicit = workerSrc ?? configuredWorkerSrc;
+  if (explicit) mod.GlobalWorkerOptions.workerSrc = explicit;
+  else if (!mod.GlobalWorkerOptions.workerSrc) {
+    mod.GlobalWorkerOptions.workerSrc = cdnWorkerSrc(mod.version);
   }
-  return pdfjsPromise;
 }
 
-async function renderPdfFirstPage(file: File, targetWidth: number): Promise<string> {
-  const pdfjs = await loadPdfjs();
+/** Set the pdf.js worker URL used by FileThumbnail PDF previews (app-wide). */
+function setPdfWorkerSrc(workerSrc: string | undefined) {
+  configuredWorkerSrc = workerSrc;
+  void pdfjsPromise?.then((mod) => applyWorkerSrc(mod));
+}
+
+async function loadPdfjs(workerSrc?: string): Promise<PdfjsModule> {
+  if (!pdfjsPromise) pdfjsPromise = import("pdfjs-dist");
+  const mod = await pdfjsPromise;
+  applyWorkerSrc(mod, workerSrc);
+  return mod;
+}
+
+async function renderPdfFirstPage(
+  file: File,
+  targetWidth: number,
+  workerSrc?: string,
+): Promise<string> {
+  const pdfjs = await loadPdfjs(workerSrc);
   const buffer = await file.arrayBuffer();
   const pdf = await pdfjs.getDocument({ data: buffer }).promise;
   const page = await pdf.getPage(1);
@@ -50,9 +77,21 @@ interface FileThumbnailProps {
   /** Side length of the square thumbnail in pixels. */
   size?: number | string;
   className?: string;
+  /**
+   * URL of the pdf.js worker used for PDF previews. Overrides
+   * setPdfWorkerSrc(); when neither is set, the worker loads from jsDelivr.
+   */
+  pdfWorkerSrc?: string;
 }
 
-function FileThumbnail({ file, name, type, size = 48, className }: FileThumbnailProps) {
+function FileThumbnail({
+  file,
+  name,
+  type,
+  size = 48,
+  className,
+  pdfWorkerSrc,
+}: FileThumbnailProps) {
   const shape = useShape();
   const numericSize = typeof size === "number" ? size : 48;
 
@@ -78,6 +117,32 @@ function FileThumbnail({ file, name, type, size = 48, className }: FileThumbnail
     );
   }
 
+  // Previews own their hooks in a child component so the no-file branch above
+  // never changes this component's hook order.
+  return (
+    <FilePreview
+      file={file}
+      size={numericSize}
+      className={className}
+      pdfWorkerSrc={pdfWorkerSrc}
+      shapeClassName={shape.bg}
+    />
+  );
+}
+
+function FilePreview({
+  file,
+  size: numericSize,
+  className,
+  pdfWorkerSrc,
+  shapeClassName,
+}: {
+  file: File;
+  size: number;
+  className?: string | undefined;
+  pdfWorkerSrc?: string | undefined;
+  shapeClassName: string;
+}) {
   const isImage = file.type.startsWith("image/");
   const isPdf = file.type === "application/pdf";
 
@@ -104,7 +169,7 @@ function FileThumbnail({ file, name, type, size = 48, className }: FileThumbnail
   useEffect(() => {
     if (!isPdf) return;
     let cancelled = false;
-    renderPdfFirstPage(file, numericSize)
+    renderPdfFirstPage(file, numericSize, pdfWorkerSrc)
       .then((url) => {
         if (!cancelled) setPdfUrl(url);
       })
@@ -114,7 +179,7 @@ function FileThumbnail({ file, name, type, size = 48, className }: FileThumbnail
     return () => {
       cancelled = true;
     };
-  }, [file, isPdf, numericSize]);
+  }, [file, isPdf, numericSize, pdfWorkerSrc]);
 
   const previewUrl = imageUrl ?? pdfUrl;
 
@@ -122,13 +187,12 @@ function FileThumbnail({ file, name, type, size = 48, className }: FileThumbnail
     <div
       className={cn(
         "relative shrink-0 overflow-hidden bg-accent border border-border",
-        shape.bg,
+        shapeClassName,
         className,
       )}
       style={{ width: numericSize, height: numericSize }}
     >
       {previewUrl ? (
-        // eslint-disable-next-line @next/next/no-img-element
         <img
           src={previewUrl}
           alt={file.name}
@@ -152,5 +216,5 @@ function FileThumbnail({ file, name, type, size = 48, className }: FileThumbnail
   );
 }
 
-export { FileThumbnail, loadPdfjs, renderPdfFirstPage };
+export { FileThumbnail, loadPdfjs, renderPdfFirstPage, setPdfWorkerSrc };
 export type { FileThumbnailProps };

package/src/components/filter-bar.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import * as React from "react";
+import { X } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+import { SearchInput } from "./search-input";
+
+interface FilterBarSearch {
+  value: string;
+  onValueChange: (value: string) => void;
+  placeholder?: string;
+  loading?: boolean;
+}
+
+interface FilterBarProps {
+  /** Built-in SearchInput. Omit for filter-only bars. */
+  search?: FilterBarSearch;
+  /** Filter controls — Select, DateRangePicker, toggles. Scroll horizontally on mobile. */
+  children?: React.ReactNode;
+  /** Whether any filter/search is applied; shows the clear action. */
+  active?: boolean;
+  /** Reset search and filters. Shown only while `active`. */
+  onClear?: () => void;
+  clearLabel?: string;
+  /** Trailing actions (sort, export, view toggle) aligned right from `sm`. */
+  actions?: React.ReactNode;
+  /** Result summary under the bar ("24 orders"). */
+  summary?: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * List toolbar: search + filters + clear + actions. Stacks on mobile with the
+ * filter row scrolling horizontally; one row from `md`. Replaces hand-built
+ * "Input + Select + date inputs + reset" rows above tables.
+ */
+function FilterBar({
+  search,
+  children,
+  active = false,
+  onClear,
+  clearLabel = "Clear filters",
+  actions,
+  summary,
+  className,
+}: FilterBarProps) {
+  return (
+    <div data-slot="filter-bar" className={cn("flex min-w-0 flex-col gap-2", className)}>
+      <div
+        role="toolbar"
+        aria-label="Filters"
+        className="flex min-w-0 flex-col gap-2 md:flex-row md:items-center"
+      >
+        {search && (
+          <SearchInput
+            value={search.value}
+            onValueChange={search.onValueChange}
+            placeholder={search.placeholder ?? "Search"}
+            {...(search.loading ? { loading: true } : {})}
+            containerClassName="md:max-w-xs md:flex-1"
+          />
+        )}
+        {(children || (active && onClear)) && (
+          <div className="-mx-4 flex min-w-0 items-center gap-2 overflow-x-auto px-4 [scrollbar-width:none] md:mx-0 md:overflow-visible md:px-0 [&::-webkit-scrollbar]:hidden [&>*]:shrink-0">
+            {children}
+            {active && onClear && (
+              <Button type="button" variant="ghost" size="sm" onClick={onClear}>
+                <X size={14} aria-hidden="true" />
+                {clearLabel}
+              </Button>
+            )}
+          </div>
+        )}
+        {actions && (
+          <div className="flex shrink-0 items-center gap-2 md:ml-auto">{actions}</div>
+        )}
+      </div>
+      {summary && (
+        <p className="caption text-muted-foreground" aria-live="polite">
+          {summary}
+        </p>
+      )}
+    </div>
+  );
+}
+
+FilterBar.displayName = "FilterBar";
+
+export { FilterBar };
+export type { FilterBarProps, FilterBarSearch };

package/src/components/grid-list.tsx

@@ -80,7 +80,7 @@ function GridListCard({
       {href ? (
         <a
           href={href}
-          className="block h-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 rounded-xl"
+          className="block h-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-xl"
         >
           {inner}
         </a>
@@ -145,7 +145,7 @@ function GridListAccentCard({
       {href ? (
         <a
           href={href}
-          className="block focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 rounded-xl"
+          className="block focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-xl"
         >
           {inner}
         </a>

package/src/components/help-tooltip.tsx

@@ -50,7 +50,7 @@ function HelpTooltip({
               className={cn(
                 "relative ml-1 inline-flex size-5 items-center justify-center rounded-full text-muted-foreground",
                 "transition-[color,scale] duration-150 hover:text-foreground active:scale-[0.96]",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
                 "before:absolute before:-inset-2.5 before:content-['']",
               )}
               aria-label="Help"

package/src/components/input-copy.tsx

@@ -252,7 +252,7 @@ const InputCopy = forwardRef<HTMLDivElement, InputCopyProps>(
         aria-label={copied ? "Copied" : "Copy to clipboard"}
         className={cn(
           "group flex items-center w-full cursor-pointer outline-none transition-all duration-80",
-          "focus-visible:ring-1 focus-visible:ring-[#6B97FF]",
+          "focus-visible:ring-2 focus-visible:ring-ring",
           shape.input,
         )}
       >

package/src/components/input-group.tsx

@@ -245,7 +245,7 @@ const InputField = forwardRef<HTMLLabelElement, InputFieldProps>(
       bgClass = "bg-transparent";
       ringClass = "ring-border";
     } else if (error) {
-      bgClass = isFocused ? "bg-card" : isActive ? "bg-destructive-light/60" : "bg-transparent";
+      bgClass = isFocused ? "bg-card" : isActive ? "bg-destructive/10" : "bg-transparent";
       ringClass = isFocused || isActive ? "ring-destructive/50" : "ring-transparent";
     } else if (isFocused) {
       bgClass = "bg-card";

package/src/components/input-message.tsx

@@ -175,7 +175,7 @@ function FilePreviewTile({ file, onRemove, size }: FilePreviewTileProps) {
           // of theme — the close badge needs to read as a "delete affordance"
           // over arbitrary image/PDF content, so it sits at a fixed contrast
           // instead of flipping with the surrounding surface.
-          className="absolute top-1 right-1 w-5 h-5 rounded-full bg-neutral-900 text-white opacity-0 group-hover/tile:opacity-100 transition-opacity duration-80 flex items-center justify-center cursor-pointer outline-none focus-visible:opacity-100 focus-visible:ring-1 focus-visible:ring-[#6B97FF]"
+          className="absolute top-1 right-1 w-5 h-5 rounded-full bg-neutral-900 text-white opacity-0 group-hover/tile:opacity-100 transition-opacity duration-80 flex items-center justify-center cursor-pointer outline-none focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring"
         >
           <XIcon size={12} strokeWidth={2.5} />
         </button>
@@ -246,7 +246,7 @@ function QueuedRow({
         "group/qrow flex items-center gap-2 rounded-lg bg-muted px-2.5 py-1.5",
         "text-[13px] text-foreground/85 select-none outline-none",
         "cursor-grab active:cursor-grabbing",
-        "focus-visible:ring-1 focus-visible:ring-[#6B97FF]",
+        "focus-visible:ring-2 focus-visible:ring-ring",
       )}
       style={{ fontVariationSettings: fontWeights.normal }}
     >
@@ -277,7 +277,7 @@ function QueuedRow({
               ? "opacity-100"
               : "opacity-0 group-hover/qrow:opacity-100 focus-visible:opacity-100",
             "transition-opacity duration-80 cursor-pointer outline-none",
-            "focus-visible:ring-1 focus-visible:ring-[#6B97FF]",
+            "focus-visible:ring-2 focus-visible:ring-ring",
           )}
         >
           <XIcon size={13} strokeWidth={2.5} />
@@ -379,7 +379,7 @@ const InputMessage = forwardRef<HTMLDivElement, InputMessageProps>(
     // `shadow-surface-2` supplies the resting edge.
     const EDGE_DROP = "0 1px 1px -0.5px var(--shadow-color)";
     const edgeShadow = dragOver
-      ? `0 0 0 1px #6B97FF, ${EDGE_DROP}`
+      ? `0 0 0 2px var(--ring), ${EDGE_DROP}`
       : focusVisible
         ? `0 0 0 1px color-mix(in oklab, var(--foreground) 20%, transparent), ${EDGE_DROP}`
         : hovered && clickToFocus && !disabled
@@ -688,6 +688,7 @@ const InputMessage = forwardRef<HTMLDivElement, InputMessageProps>(
     );
 
     return (
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- click-to-focus-the-textarea and drag/drop target; the textarea and buttons inside carry the keyboard interaction
       <div
         ref={ref}
         onMouseDown={handleContainerMouseDown}

package/src/components/input-number.tsx

@@ -3,6 +3,8 @@
 import * as React from "react";
 import { cn } from "../lib/utils";
 import { useShape } from "../lib/shape-context";
+import { useDensity } from "../lib/density-context";
+import { inputFocusWithinClasses } from "../lib/interaction";
 
 interface InputNumberProps extends Omit<
   React.ComponentProps<"input">,
@@ -21,10 +23,31 @@ interface InputNumberProps extends Omit<
   mixedLabel?: string | undefined;
   /** Calls onChange while typing instead of waiting for blur/Enter. */
   commitOnChange?: boolean | undefined;
-  /** Hides the up/down stepper buttons. */
+  /**
+   * Hides the up/down stepper buttons. Defaults to `true` under
+   * data-density="compact" (editor chrome relies on arrow keys + label
+   * scrubbing there) and `false` otherwise.
+   */
   hideSteppers?: boolean | undefined;
+  /**
+   * Short prefix label rendered inside the field (e.g. "X", "W", an icon).
+   * It doubles as a scrub handle: drag horizontally to change the value
+   * (Shift = 10×), like Figma's inspector fields.
+   */
+  label?: React.ReactNode;
+  /** Accessible name for the scrub handle when `label` is not plain text. */
+  scrubLabel?: string | undefined;
+  /**
+   * Horizontal alignment of the number. Defaults to `"left"` when a `label`
+   * is given or under compact density (value sits next to its label), and
+   * `"right"` otherwise.
+   */
+  align?: "left" | "right" | undefined;
 }
 
+/** Pixels of pointer travel per step while scrubbing a label. */
+const SCRUB_PX_PER_STEP = 2;
+
 /**
  * Numeric input with up/down steppers, unit suffix, and arrow-key step (Shift = 10×).
  * Designed for designer property panels — see PHASE_0_AUDIT.md §P0.2.
@@ -41,7 +64,10 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
       precision = 0,
       mixedLabel = "Mixed",
       commitOnChange = false,
-      hideSteppers = false,
+      hideSteppers: hideSteppersProp,
+      label,
+      scrubLabel,
+      align: alignProp,
       className,
       disabled,
       onBlur,
@@ -52,6 +78,10 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
     ref,
   ) => {
     const shape = useShape();
+    const density = useDensity();
+    const compact = density === "compact";
+    const hideSteppers = hideSteppersProp ?? compact;
+    const align = alignProp ?? (label !== undefined || compact ? "left" : "right");
 
     const formatValue = React.useCallback(
       (next: number | null) => (next === null ? mixedLabel : next.toFixed(precision)),
@@ -93,6 +123,32 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
       setText(next.toFixed(precision));
     };
 
+    // Label scrubbing — drag the prefix label to nudge the value.
+    const scrubRef = React.useRef<{ x: number; start: number; last: number } | null>(null);
+    const handleScrubDown = (e: React.PointerEvent<HTMLSpanElement>) => {
+      if (disabled || rest.readOnly || e.button !== 0) return;
+      e.preventDefault();
+      e.currentTarget.setPointerCapture?.(e.pointerId);
+      const start = value ?? 0;
+      scrubRef.current = { x: e.clientX, start, last: start };
+    };
+    const handleScrubMove = (e: React.PointerEvent<HTMLSpanElement>) => {
+      const scrub = scrubRef.current;
+      if (!scrub) return;
+      const steps = Math.round((e.clientX - scrub.x) / SCRUB_PX_PER_STEP);
+      const next = clamp(scrub.start + steps * step * (e.shiftKey ? 10 : 1));
+      const rounded = Number(next.toFixed(precision));
+      if (rounded === scrub.last) return;
+      scrub.last = rounded;
+      onChange(rounded);
+      setText(rounded.toFixed(precision));
+    };
+    const handleScrubEnd = (e: React.PointerEvent<HTMLSpanElement>) => {
+      if (!scrubRef.current) return;
+      scrubRef.current = null;
+      e.currentTarget.releasePointerCapture?.(e.pointerId);
+    };
+
     const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
       onKeyDown?.(e);
       if (e.defaultPrevented) return;
@@ -110,19 +166,45 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
 
     return (
       <div
+        data-slot="input-number"
         className={cn(
-          "inline-flex h-8 items-stretch overflow-hidden border border-border bg-background",
+          // w-48 ≈ the old intrinsic width of the native input (size=20), kept as an
+          // overridable default; min-w-fit stops narrow widths clipping digits.
+          "inline-flex h-8 w-48 min-w-fit items-stretch overflow-hidden border border-border bg-background",
+          "transition-[border-color,box-shadow] duration-150 hover:border-border-strong",
           shape.input,
-          "focus-within:border-brand-primary focus-within:ring-2 focus-within:ring-brand-primary/20",
+          "compact:h-6 compact:rounded-[5px]",
+          inputFocusWithinClasses,
           disabled && "opacity-50 pointer-events-none",
           className,
         )}
       >
+        {label !== undefined && (
+          <span
+            aria-hidden
+            title={scrubLabel}
+            onPointerDown={handleScrubDown}
+            onPointerMove={handleScrubMove}
+            onPointerUp={handleScrubEnd}
+            onPointerCancel={handleScrubEnd}
+            className={cn(
+              // Fixed-width prefix column so values in stacked fields line up.
+              "flex w-6 shrink-0 cursor-ew-resize select-none items-center justify-center",
+              "caption-xs font-medium leading-none text-muted-foreground transition-colors hover:text-foreground",
+              "compact:w-5 compact:text-[11px] [&_svg]:size-3",
+            )}
+          >
+            {label}
+          </span>
+        )}
         <input
           ref={ref}
           type="text"
           inputMode="decimal"
           spellCheck={false}
+          // Neutralise the native 20-char intrinsic width so the container's
+          // min-w-fit is driven by the explicit min-width below, not `size`.
+          size={1}
           value={text}
           onChange={(e) => {
             setText(e.target.value);
@@ -145,27 +227,37 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
           }}
           onKeyDown={handleKeyDown}
           disabled={disabled}
-          className="w-full caption text-foreground px-2 bg-transparent focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none text-right"
+          aria-label={
+            typeof label === "string" && !rest["aria-labelledby"] ? label : undefined
+          }
+          className={cn(
+            // min-width fits three tabular digits + padding so "100" never clips.
+            "w-full min-w-[calc(3ch+1rem)] caption tabular-nums text-foreground px-2 bg-transparent focus:outline-none",
+            "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+            "compact:min-w-[calc(3ch+0.75rem)] compact:px-1.5 compact:text-[12px]",
+            label !== undefined && "pl-0.5 compact:pl-0.5",
+            align === "right" ? "text-right" : "text-left",
+          )}
           {...rest}
         />
         {unit && (
           <span
             aria-hidden
-            className="caption-xs text-muted-foreground self-center pr-1.5 select-none"
+            className="caption-xs text-muted-foreground self-center pr-2 select-none compact:pr-1.5 compact:text-[11px]"
           >
             {unit}
           </span>
         )}
         {!hideSteppers && (
-          <div className="flex flex-col border-l border-border">
+          <div className="flex w-5 shrink-0 flex-col border-l border-border">
             <button
               type="button"
               tabIndex={-1}
               onClick={() => bump(step)}
               aria-label="Increment"
-              className="flex-1 px-1 hover:bg-muted active:bg-muted transition-colors text-muted-foreground"
+              className="flex flex-1 items-center justify-center text-muted-foreground transition-colors hover:bg-hover hover:text-foreground active:bg-active"
             >
-              <svg viewBox="0 0 8 5" width="8" height="5" fill="currentColor">
+              <svg viewBox="0 0 8 5" width="8" height="5" fill="currentColor" aria-hidden>
                 <path d="M0 5 L4 0 L8 5 Z" />
               </svg>
             </button>
@@ -175,9 +267,9 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
               tabIndex={-1}
               onClick={() => bump(-step)}
               aria-label="Decrement"
-              className="flex-1 px-1 hover:bg-muted active:bg-muted transition-colors text-muted-foreground"
+              className="flex flex-1 items-center justify-center text-muted-foreground transition-colors hover:bg-hover hover:text-foreground active:bg-active"
             >
-              <svg viewBox="0 0 8 5" width="8" height="5" fill="currentColor">
+              <svg viewBox="0 0 8 5" width="8" height="5" fill="currentColor" aria-hidden>
                 <path d="M0 0 L4 5 L8 0 Z" />
               </svg>
             </button>

package/src/components/input.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import { cn } from "../lib/utils";
-import { controlSurfaceClasses, focusRingClasses, motionClasses } from "../lib/interaction";
+import { controlSurfaceClasses, inputFocusClasses, motionClasses } from "../lib/interaction";
 import { useShape } from "../lib/shape-context";
 
 type ControlDensity = "default" | "compact";
@@ -52,11 +52,13 @@ function Input({
         "body text-foreground placeholder:text-muted-foreground",
         controlSurfaceClasses,
         motionClasses,
-        focusRingClasses,
+        inputFocusClasses,
         controlMobileSurfaceClasses[mobileSurface],
-        "focus-visible:border-brand-primary",
         "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted",
         "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
+        // Editor-chrome density (data-density="compact" ancestor).
+        "compact:h-6 compact:px-2 compact:py-0 compact:text-[12px] compact:rounded-[5px]",
+        type === "number" && "tabular-nums",
         className,
       )}
       {...props}

package/src/components/label.tsx

@@ -13,6 +13,7 @@ const Label = React.forwardRef<
     className={cn(
       "body font-medium leading-none text-muted-foreground",
       "peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      "compact:text-[11px]",
       className,
     )}
     {...props}

package/src/components/media-asset-card.tsx

@@ -66,7 +66,7 @@ function MediaAssetCard({
           "relative flex shrink-0 items-center justify-center overflow-hidden bg-muted text-left",
           "transition-[background-color,box-shadow,scale] duration-150",
           isInteractive &&
-            "cursor-pointer active:scale-[0.96] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
+            "cursor-pointer active:scale-[0.96] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
           isList && "size-16 rounded-lg",
           isGrid && "aspect-square w-full",
           orientation === "responsive" &&

package/src/components/menu-item.tsx

@@ -19,6 +19,15 @@ import { shapeMap } from "../lib/shape-context";
 // shape — see dropdown.tsx for the rationale.
 const shape = shapeMap.rounded;
 
+/** ARIA flavour of a menu row. */
+type MenuItemType = "item" | "radio" | "checkbox";
+
+const MENU_ITEM_ROLES: Record<MenuItemType, "menuitem" | "menuitemradio" | "menuitemcheckbox"> = {
+  item: "menuitem",
+  radio: "menuitemradio",
+  checkbox: "menuitemcheckbox",
+};
+
 interface MenuItemProps extends HTMLAttributes<HTMLDivElement> {
   /** Optional leading icon. When omitted, the row renders text-only with no
    *  reserved icon column. */
@@ -26,13 +35,34 @@ interface MenuItemProps extends HTMLAttributes<HTMLDivElement> {
   label?: string;
   index?: number;
   checked?: boolean;
+  /**
+   * ARIA semantics of the row:
+   * - `"item"` → `role="menuitem"` (a plain action, no `aria-checked`)
+   * - `"radio"` → `role="menuitemradio"` (one-of-many selection)
+   * - `"checkbox"` → `role="menuitemcheckbox"` (independent toggle)
+   *
+   * Defaults to `"radio"` when the row carries selection state — `checked` is
+   * passed or the parent `<Dropdown>` has a `checkedIndex` — otherwise `"item"`.
+   */
+  type?: MenuItemType;
   onSelect?: () => void;
   trailing?: ReactNode;
 }
 
 const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(
   (
-    { icon: Icon, label, index = 0, checked, onSelect, trailing, className, children, ...props },
+    {
+      icon: Icon,
+      label,
+      index = 0,
+      checked,
+      type,
+      onSelect,
+      trailing,
+      className,
+      children,
+      ...props
+    },
     ref,
   ) => {
     const internalRef = useRef<HTMLDivElement>(null);
@@ -48,6 +78,9 @@ const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(
       hasMounted.current = true;
     }, []);
 
+    const resolvedType: MenuItemType =
+      type ?? (checked !== undefined || checkedIndex !== undefined ? "radio" : "item");
+    const role = MENU_ITEM_ROLES[resolvedType];
     const isActive = activeIndex === index;
     const skipAnimation = !hasMounted.current;
 
@@ -60,8 +93,8 @@ const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(
         }}
         data-proximity-index={index}
         tabIndex={index === (checkedIndex ?? 0) ? 0 : -1}
-        role="menuitemradio"
-        aria-checked={!!checked}
+        role={role}
+        aria-checked={resolvedType === "item" ? undefined : !!checked}
         aria-label={label ?? (typeof children === "string" ? children : undefined)}
         onClick={onSelect}
         onKeyDown={(e) => {
@@ -153,4 +186,5 @@ const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(
 MenuItem.displayName = "MenuItem";
 
 export { MenuItem };
+export type { MenuItemProps, MenuItemType };
 export default MenuItem;