@bycrux/editor 0.11.2 → 1.0.1

package/src/ui/Loader.tsx

@@ -0,0 +1,64 @@
+/**
+ * The editor's branded loading indicator: a miniature of the Montaj mark — a
+ * film clapperboard (slate + play triangle) whose striped clapper claps open and
+ * shut. Used for every in-editor loading state (cover/frame sampling, render
+ * progress, overlay/schema fetches, engine warmup) so "loading" reads
+ * consistently and on-brand. NOT for streaming agent-status text (that keeps its
+ * own log/pending treatment).
+ *
+ * The slate uses the theme accent (with a literal fallback so it stays visible
+ * even where `--editor-accent` is out of scope, e.g. a body-portaled modal). The
+ * clap is a SMIL `animateTransform` rotating the clapper about its hinge — no
+ * CSS transform-origin ambiguity, no keyframe injection.
+ */
+
+export interface LoaderProps {
+  /** Rendered pixel size. sm 20 (inline/thumbnail), md 34, lg 56 (hero). */
+  size?: 'sm' | 'md' | 'lg'
+  /** Optional caption under the mark (e.g. "Loading cover"). */
+  label?: string
+  /** Extra classes on the wrapper (layout/positioning). */
+  className?: string
+}
+
+const PX: Record<NonNullable<LoaderProps['size']>, number> = { sm: 20, md: 34, lg: 56 }
+
+export function Loader({ size = 'md', label, className = '' }: LoaderProps) {
+  const px = PX[size]
+  return (
+    <div
+      role="status"
+      aria-label={label ?? 'Loading'}
+      className={`flex flex-col items-center justify-center gap-2 ${className}`}
+    >
+      <svg width={px} height={px} viewBox="0 0 64 56" fill="none" aria-hidden="true">
+        {/* Slate (the board) + the Montaj play triangle. */}
+        <rect x="8" y="24" width="48" height="24" rx="5" fill="var(--editor-accent, #38bdf8)" />
+        <path d="M28 31 L41 36 L28 41 Z" fill="#ffffff" fillOpacity="0.92" />
+
+        {/* Clapper stick — hinged at the slate's top-left (11,24). Rests open,
+            snaps shut (the clap), reopens; repeat. */}
+        <g>
+          <animateTransform
+            attributeName="transform"
+            attributeType="XML"
+            type="rotate"
+            values="-32 11 24; -32 11 24; 0 11 24; -32 11 24"
+            keyTimes="0; 0.32; 0.46; 1"
+            dur="1.1s"
+            repeatCount="indefinite"
+            calcMode="spline"
+            keySplines="0 0 1 1; 0.45 0 0.3 1; 0.4 0 0.2 1"
+          />
+          <rect x="8" y="14" width="48" height="10" rx="3" fill="#0b1220" />
+          <path d="M15 14 l7 10 h7 l-7 -10 z" fill="#ec4899" />
+          <path d="M29 14 l7 10 h7 l-7 -10 z" fill="#f97316" />
+          <path d="M43 14 l7 10 h7 l-7 -10 z" fill="#facc15" />
+        </g>
+      </svg>
+      {label && <span className="text-[11px] text-[var(--editor-text)]/50">{label}</span>}
+    </div>
+  )
+}
+
+export default Loader

package/src/ui/NumberField.tsx

@@ -0,0 +1,254 @@
+import { useRef, useState } from 'react'
+import { ChevronDown, ChevronUp } from 'lucide-react'
+import { cn } from './utils'
+import { inspectorInputClass } from './input'
+
+/**
+ * `stepValue` — the arithmetic behind ONE stepper click: nudge `value` by one
+ * `step` in `direction`, clamp to `[min, max]`, then round away the float noise
+ * the nudge itself introduces (`1.2 + 0.01` is `1.2100000000000002`, and a
+ * stepper is supposed to be exact).
+ *
+ * Exported and separate from the component because a stepper's arithmetic is
+ * NOT always the input's own `step`/`min`/`max`: the Transform panel's Scale
+ * box displays a PERCENTAGE (bounded 5–400) while its stepper nudges the
+ * stored multiplier (`0.01`, floored at `0.01`). The component therefore
+ * delegates stepping to its caller (see {@link NumberFieldProps.onStep}) and
+ * callers share this helper, rather than the component guessing which unit the
+ * nudge is in and every call site re-deriving the same three lines.
+ *
+ * Rounds to 2 decimal places, matching what the panel DISPLAYS — a stepper that
+ * lands on a value the box then rounds off would drift a little further from
+ * the shown number on every click.
+ */
+export function stepValue(
+  value: number,
+  direction: 1 | -1,
+  { step, min, max }: { step: number; min?: number; max?: number },
+): number {
+  let next = value + direction * step
+  if (min !== undefined) next = Math.max(min, next)
+  if (max !== undefined) next = Math.min(max, next)
+  return Math.round(next * 100) / 100
+}
+
+export interface NumberFieldProps {
+  /** The control's ACCESSIBLE name — the box's `aria-label`, and the stem of
+   *  both stepper labels (`Increase ${name}` / `Decrease ${name}`). Kept
+   *  deliberately separate from any visible label the caller renders beside
+   *  the field: accessible names are a behavioural contract that tests and
+   *  assistive tech both depend on, so visible chrome can be restyled without
+   *  touching them. */
+  name: string
+  /** The live value. Owned by the caller — this component is controlled and
+   *  holds no value state of its own beyond the mid-typing `draft` below.
+   *
+   *  A STRING is allowed, and `''` specifically means "no explicit value": the
+   *  box reads blank and its {@link NumberFieldProps.placeholder} reports
+   *  whatever default is actually in force. That is not the same as zero, and
+   *  a field that showed the default as a real value would invite the operator
+   *  to save a value they never chose. */
+  value: number | string
+  /** Live-preview a typed edit: fired on EVERY keystroke that parses to a
+   *  finite number. Empty, a lone `-`, and anything else unparseable are
+   *  swallowed here rather than by each caller — mid-typing states are not
+   *  edits and must not reach an undo stack or a save. */
+  onPreview: (value: number) => void
+  /** Close the typing gesture — ONE undo entry for the whole run of keystrokes,
+   *  carrying the last value {@link NumberFieldProps.onPreview} emitted.
+   *
+   *  Fired on blur, and on Enter via that same blur, but ONLY when the gesture
+   *  actually previewed something: focusing a field and leaving it untouched
+   *  writes nothing, because that would be a pointless save and an undo entry
+   *  for a no-op. That guard is also what stops Enter-then-blur from
+   *  committing twice.
+   *
+   *  Takes the value even though some callers ignore it: a zero-argument
+   *  handler is assignable to this signature, so the wider shape serves both
+   *  the callers that close over their own last-previewed value and the ones
+   *  that want the number handed to them. */
+  onCommit: (value: number) => void
+  /** One DISCRETE nudge — the caller is expected to emit one final edit (one
+   *  undo entry), NOT a preview/commit pair. Omit to render no steppers.
+   *  Takes a direction rather than a value because the nudge's unit is the
+   *  caller's business; see {@link stepValue}. */
+  onStep?: (direction: 1 | -1) => void
+  /** Native `step`/`min`/`max` for the box.
+   *
+   *  These drive the browser's own validation and native spinner ONLY. A TYPED
+   *  value is deliberately NOT clamped against them, for two reasons: clamping
+   *  between keystrokes fights the operator (typing `0.5` into a `min={1}` box
+   *  passes through `0`, and `5` into a `max={400}` one passes through `5` on
+   *  the way to `500`), and the two call sites disagree about whether a typed
+   *  value should be bounded at all — the Transform panel's opacity row lets a
+   *  typed `5` through where the caption panel's line height clamps `9` to
+   *  `2.5`. So the component stays dumb and emits the raw parsed number; a
+   *  caller that wants a bounded write clamps inside its own `onPreview`.
+   *  The STEPPERS always clamp — that arithmetic is {@link stepValue}'s. */
+  step?: number
+  min?: number
+  max?: number
+  /** Shown when the box is blank. An empty string is meaningful and is
+   *  rendered as a real empty `placeholder` attribute — a caller whose default
+   *  has no value to report needs the attribute present and empty, not absent. */
+  placeholder?: string
+  /** Visible leading axis marker (`X`, `Y`). Purely decorative and hidden from
+   *  assistive tech — the accessible name already carries the axis. */
+  prefix?: string
+  /** Visible trailing unit (`%`, `px`, `em`). Decorative, same reasoning. */
+  unit?: string
+  /** Passed through so a caller can wire a `<label htmlFor>` to the box. */
+  id?: string
+  /** Sizing/alignment override for the `<input>` itself (the wrapper's layout
+   *  is fixed). Merged over {@link inspectorInputClass} via `cn`. */
+  className?: string
+  /** Disables the box AND its steppers together — a caller never wants one
+   *  live while the other is dead (e.g. ClipPropertiesPanel's ducking
+   *  depth/attack/release, inert until the Ducking switch is on). Styled the
+   *  same `opacity-50 cursor-not-allowed` treatment ClipPropertiesPanel's
+   *  `DraftField` already uses for its own disabled fields, so a disabled
+   *  number box reads identically wherever it appears. */
+  disabled?: boolean
+}
+
+/**
+ * `<NumberField>` — the editor's ONE compact number control: a typeable box
+ * with up/down steppers, an optional axis prefix and unit, and the two-phase
+ * preview/commit typing gesture.
+ *
+ * `draft` is the fix for a real bug, and the main reason this is a component
+ * rather than a bare `<input>`. Panels that host these fields re-render on
+ * every playback tick (~60Hz) whether or not the thing being edited is even
+ * involved, and a CONTROLLED input whose `value` comes straight from the
+ * tick-recomputed prop has no memory of what is mid-typed — typing into a
+ * field while the timeline played back got silently overwritten between
+ * keystrokes. `draft` breaks that link: it goes non-null the moment the
+ * operator types (first `onChange`) and stays the single source of truth for
+ * what is ON SCREEN until blur/Enter commits it, so ticks arriving mid-edit
+ * change `value` underneath without ever touching what is displayed. While
+ * `draft` is null (the common case — not currently being typed into) the field
+ * tracks `value` live, exactly as an uncontrolled-feeling box should,
+ * including the desired case of watching it animate during scrub/playback.
+ *
+ * Purely presentational and controlled: it never parses meaning out of the
+ * number, never decides what a step is worth, never bounds what is typed, and
+ * never reaches into a store. Keyframe diamonds, align buttons and row labels
+ * belong to the caller.
+ */
+export function NumberField({
+  name,
+  value,
+  onPreview,
+  onCommit,
+  onStep,
+  step,
+  min,
+  max,
+  placeholder,
+  prefix,
+  unit,
+  id,
+  className,
+  disabled,
+}: NumberFieldProps) {
+  const [draft, setDraft] = useState<string | null>(null)
+  // Whether this typing gesture previewed anything worth committing, and what
+  // the last such preview was. A ref, not state: neither changes what is
+  // rendered, and a re-render between the keystroke and the blur would be the
+  // very tick `draft` exists to survive.
+  //
+  // Dirty-based rather than comparing the incoming `value` prop against
+  // `last.current`: live preview has ALREADY written the pending number into
+  // the project by the time blur fires (that is the whole point of
+  // `onPreview`), so by blur `value` typically equals the pending value
+  // anyway. A value-comparison guard ("only commit if it changed") would read
+  // that as nothing to do and skip the commit entirely — silently losing an
+  // edit that every caller believes it already made. `dirty` asks the
+  // question this component can actually answer honestly: did a keystroke
+  // happen, not does the prop look different yet.
+  const dirty = useRef(false)
+  const last = useRef(0)
+  const shown = draft ?? String(value)
+
+  function handleChange(raw: string) {
+    setDraft(raw)
+    // Mid-typing states (empty field, a lone minus, an unparseable fragment)
+    // are not edits — hold the draft on screen but emit nothing, and leave the
+    // gesture un-armed so blurring out of one commits nothing either.
+    if (raw.trim() === '') return
+    const parsed = Number(raw)
+    if (!Number.isFinite(parsed)) return
+    dirty.current = true
+    last.current = parsed
+    onPreview(parsed)
+  }
+
+  function commit() {
+    // Releasing the draft is unconditional — a box left blank or unparseable
+    // has to snap back to the value the project actually holds rather than sit
+    // there misreporting it. Committing is not: see `onCommit`'s contract.
+    setDraft(null)
+    if (!dirty.current) return
+    dirty.current = false
+    onCommit(last.current)
+  }
+
+  return (
+    <div className="flex shrink-0 items-center gap-1">
+      {prefix && (
+        <span aria-hidden="true" className="w-2 shrink-0 text-[10px] text-[var(--editor-text)]/40">
+          {prefix}
+        </span>
+      )}
+      <input
+        id={id}
+        type="number"
+        aria-label={name}
+        step={step}
+        min={min}
+        max={max}
+        placeholder={placeholder}
+        value={shown}
+        disabled={disabled}
+        onChange={e => handleChange(e.target.value)}
+        onBlur={commit}
+        // Enter closes the typing gesture the same way blur does — it does not
+        // duplicate the commit logic, just triggers the same onBlur path.
+        onKeyDown={e => { if (e.key === 'Enter') e.currentTarget.blur() }}
+        className={cn(inspectorInputClass, 'text-right disabled:opacity-50 disabled:cursor-not-allowed', className)}
+      />
+      {unit && (
+        <span aria-hidden="true" className="text-[10px] text-[var(--editor-text)]/40">
+          {unit}
+        </span>
+      )}
+      {onStep && <Stepper name={name} onStep={onStep} disabled={disabled} />}
+    </div>
+  )
+}
+
+/** Up/down nudge buttons for one number box. Each click is a DISCRETE edit —
+ *  one final change, one undo entry — not a preview/commit pair.
+ *
+ *  `disabled` rides along from the box: a disabled input with live arrows
+ *  next to it would let the operator nudge a value the box itself refuses to
+ *  show as editable, so the buttons carry the SAME native `disabled`
+ *  attribute (which already blocks both the click and any keyboard
+ *  activation — no separate pointer-events/aria bookkeeping needed) rather
+ *  than only being dimmed for show. */
+function Stepper({ name, onStep, disabled }: { name: string; onStep: (direction: 1 | -1) => void; disabled?: boolean }) {
+  const btn = cn(
+    'flex h-3 w-4 items-center justify-center rounded-sm text-[var(--editor-text)]/45 transition-colors',
+    disabled ? 'opacity-40 cursor-not-allowed' : 'hover:bg-[var(--editor-surface)] hover:text-[var(--editor-text)]',
+  )
+  return (
+    <div className="flex shrink-0 flex-col gap-px">
+      <button type="button" aria-label={`Increase ${name}`} onClick={() => onStep(1)} disabled={disabled} className={btn}>
+        <ChevronUp size={9} />
+      </button>
+      <button type="button" aria-label={`Decrease ${name}`} onClick={() => onStep(-1)} disabled={disabled} className={btn}>
+        <ChevronDown size={9} />
+      </button>
+    </div>
+  )
+}

package/src/ui/Slider.tsx

@@ -0,0 +1,128 @@
+import { useRef } from 'react'
+import { cn } from './utils'
+
+export interface SliderProps {
+  /** The live value. Owned by the caller — this control is fully controlled. */
+  value: number
+  min: number
+  max: number
+  step?: number
+  /** Live-preview a drag/keyboard adjustment: fired on EVERY change, no undo
+   *  entry, no save. Named `onChange` rather than `onPreview` because a caller
+   *  that wants no two-phase gesture at all (a local scrub, say) simply omits
+   *  {@link SliderProps.onCommit} and this is its only callback. */
+  onChange: (value: number) => void
+  /** Close the gesture — one undo entry for the whole drag. Fired at most ONCE
+   *  per gesture, and only when the gesture actually moved something; see the
+   *  `dirty` ref below. Omit for a slider whose changes are already final (or
+   *  are purely local view state).
+   *
+   *  Takes the value even though some callers ignore it: a zero-argument
+   *  handler is assignable to this signature, so the wider shape serves both
+   *  the callers that close over their own last-previewed value and the ones
+   *  that want the number handed to them. */
+  onCommit?: (value: number) => void
+  /** Accessible name. Required — the control has no visible text of its own,
+   *  and every call site sits beside a separate label element rather than
+   *  inside one. */
+  'aria-label': string
+  /** Passed through so a caller can wire a `<label htmlFor>` to the input. */
+  id?: string
+  /** Sizing override. Defaults to full width; a flex-row caller typically
+   *  passes `min-w-0 flex-1`. */
+  className?: string
+  disabled?: boolean
+}
+
+/**
+ * Track + thumb chrome. Split out as a constant so the comment explaining WHY
+ * it looks like this isn't wedged into the middle of the JSX.
+ *
+ * `appearance-none` strips the platform slider, after which Chrome/Safari take
+ * the track styling off the INPUT itself (hence `h-1` + `bg-` + `rounded-full`
+ * on the element) while Firefox needs `::-moz-range-track` said separately.
+ * The thumb has to be restated per engine for the same reason — there is no
+ * cross-engine selector for it, and a bare `accent-color` cannot produce the
+ * thin-track/round-thumb pairing at all: it colors the platform widget, whose
+ * track thickness and thumb shape are not ours to set.
+ *
+ * Every color is a `--editor-*` var, never a literal, so the control follows
+ * the host's light/dark theme like the rest of the editor chrome. The accent
+ * var is Montaj's indigo in both themes (see theme.ts), which is where the
+ * indigo thumb comes from.
+ */
+const SLIDER_CLASS = cn(
+  'h-1 w-full cursor-pointer appearance-none rounded-full bg-[var(--editor-border)] outline-none',
+  'focus-visible:ring-1 focus-visible:ring-[var(--editor-accent)]',
+  'disabled:cursor-not-allowed disabled:opacity-50',
+  // WebKit/Blink: track is the element, thumb is the pseudo-element.
+  '[&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:appearance-none',
+  '[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-0',
+  '[&::-webkit-slider-thumb]:bg-[var(--editor-accent)] [&::-webkit-slider-thumb]:cursor-grab',
+  // Gecko: both track and thumb are pseudo-elements.
+  '[&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-[var(--editor-border)]',
+  '[&::-moz-range-thumb]:h-3 [&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:rounded-full',
+  '[&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-[var(--editor-accent)] [&::-moz-range-thumb]:cursor-grab',
+)
+
+/**
+ * `<Slider>` — the editor's ONE horizontal range control.
+ *
+ * Previews per change and commits ONCE per gesture: `dirty` arms on the first
+ * change and is disarmed by whichever gesture-end fires first, so the pointerup
+ * that is immediately followed by a blur cannot stack two undo entries onto the
+ * same drag. `onKeyUp` is in that set so a keyboard adjustment commits too, and
+ * a gesture that never changed anything commits nothing at all — a stray click
+ * on the track's current position must not spend an undo entry on a no-op.
+ *
+ * Still a native `<input type="range">` underneath, deliberately: it is
+ * keyboard-operable, exposes `role="slider"` with correct value semantics, and
+ * handles pointer capture for free. Only its LOOK is replaced.
+ */
+export function Slider({
+  value,
+  min,
+  max,
+  step,
+  onChange,
+  onCommit,
+  'aria-label': ariaLabel,
+  id,
+  className,
+  disabled,
+}: SliderProps) {
+  const dirty = useRef(false)
+  // The last value actually previewed, so `end` reports what the caller saw
+  // rather than re-reading the DOM (blur's target is the input, but so is a
+  // programmatic one — the ref is simply the value we know we emitted).
+  const last = useRef(value)
+
+  function end() {
+    if (!dirty.current) return
+    dirty.current = false
+    onCommit?.(last.current)
+  }
+
+  return (
+    <input
+      id={id}
+      type="range"
+      aria-label={ariaLabel}
+      min={min}
+      max={max}
+      step={step}
+      value={value}
+      disabled={disabled}
+      onChange={e => {
+        const next = Number(e.target.value)
+        dirty.current = true
+        last.current = next
+        onChange(next)
+      }}
+      onPointerUp={end}
+      onKeyUp={end}
+      onBlur={end}
+      className={cn(SLIDER_CLASS, className)}
+    />
+  )
+}

package/src/ui/Tooltip.tsx

@@ -0,0 +1,118 @@
+import { useCallback, useLayoutEffect, useRef, useState, type ReactNode } from 'react'
+import { createPortal } from 'react-dom'
+
+/**
+ * A small dark pill that appears instantly on hover — the editor's replacement
+ * for native `title=` on toolbar buttons, which browsers delay ~1s and render
+ * in OS chrome nobody notices.
+ *
+ * ── Why a portal ─────────────────────────────────────────────────────────
+ * The tool buttons live inside containers that clip: the timeline's zoom row
+ * sits above an `overflow-x-auto` scroller (which computes `overflow-y` to
+ * `auto`, so it clips vertically too), and the editor body is `overflow-hidden`.
+ * An absolutely-positioned pill inside the trigger would be cut off by both.
+ * Rendering into `document.body` at fixed coordinates measured from the
+ * trigger sidesteps every ancestor's overflow.
+ *
+ * The trigger is wrapped in an `inline-flex` span rather than cloned, so the
+ * wrapper becomes the flex item in the toolbar row and the button inside keeps
+ * its own box untouched. Pass `className` to move layout utilities that used
+ * to sit on the button (e.g. `mr-auto`) onto the wrapper.
+ */
+export interface TooltipProps {
+  /** Terse label — "Undo", "Split at playhead". Not a sentence. */
+  label: string
+  /** Optional shortcut chips rendered after the label, e.g. `['⌘', 'Z']`. */
+  keys?: string[]
+  /** Which side of the trigger the pill sits on. */
+  side?: 'top' | 'bottom'
+  /** Layout classes for the wrapper span (it is the flex item, not the child). */
+  className?: string
+  children: ReactNode
+}
+
+/** Gap in px between the trigger's edge and the pill. */
+const OFFSET_PX = 6
+/** Keeps the pill from hanging off either edge of the window. */
+const VIEWPORT_MARGIN_PX = 4
+
+interface Position {
+  x: number
+  y: number
+  side: 'top' | 'bottom'
+}
+
+export function Tooltip({ label, keys, side = 'top', className, children }: TooltipProps) {
+  const wrapperRef = useRef<HTMLSpanElement>(null)
+  const pillRef = useRef<HTMLDivElement>(null)
+  const [position, setPosition] = useState<Position | null>(null)
+
+  const show = useCallback(() => {
+    const rect = wrapperRef.current?.getBoundingClientRect()
+    if (!rect) return
+    setPosition({
+      x: rect.left + rect.width / 2,
+      y: side === 'top' ? rect.top - OFFSET_PX : rect.bottom + OFFSET_PX,
+      side,
+    })
+  }, [side])
+
+  const hide = useCallback(() => setPosition(null), [])
+
+  // Measured after paint, once the pill has a width: a button near the right
+  // edge of the window would otherwise render a centred pill that overflows.
+  // Clamping here (rather than at `show`) is what lets it use the real width.
+  useLayoutEffect(() => {
+    if (!position) return
+    const pill = pillRef.current
+    if (!pill) return
+    const half = pill.offsetWidth / 2
+    const min = VIEWPORT_MARGIN_PX + half
+    const max = window.innerWidth - VIEWPORT_MARGIN_PX - half
+    if (max < min) return
+    const clamped = Math.max(min, Math.min(max, position.x))
+    if (clamped !== position.x) setPosition({ ...position, x: clamped })
+  }, [position])
+
+  return (
+    <span
+      ref={wrapperRef}
+      className={className ? `inline-flex ${className}` : 'inline-flex'}
+      onMouseEnter={show}
+      onMouseLeave={hide}
+      // A click that opens a modal (or disables the button) leaves the pill
+      // orphaned with no `mouseleave` to follow, so dismiss on press too.
+      onMouseDown={hide}
+      // Keyboard users get the same affordance; `focusout` covers tabbing away.
+      onFocus={show}
+      onBlur={hide}
+    >
+      {children}
+      {position && typeof document !== 'undefined' && createPortal(
+        <div
+          ref={pillRef}
+          role="tooltip"
+          className="pointer-events-none fixed z-[100] flex items-center gap-1 whitespace-nowrap rounded border border-[var(--editor-border)] bg-[var(--editor-surface)] px-1.5 py-1 text-[10px] leading-none text-[var(--editor-text)] shadow-lg"
+          style={{
+            left: position.x,
+            top: position.y,
+            transform: `translate(-50%, ${position.side === 'top' ? '-100%' : '0'})`,
+          }}
+        >
+          <span>{label}</span>
+          {keys?.map((k, i) => (
+            <kbd
+              key={i}
+              className="rounded border border-[var(--editor-border)] bg-[var(--editor-text)]/10 px-1 py-0.5 font-mono text-[9px] leading-none text-[var(--editor-text)]/70"
+            >
+              {k}
+            </kbd>
+          ))}
+        </div>,
+        document.body,
+      )}
+    </span>
+  )
+}
+
+export default Tooltip