@bycrux/editor 0.11.2 → 1.0.1

package/src/ui/__tests__/NumberField.test.tsx

@@ -0,0 +1,298 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { NumberField, stepValue } from '../NumberField'
+
+/** Renders with sensible defaults, returning the spies and `rerender` so a
+ *  test can simulate the host re-rendering with a CHANGED value — the playback
+ *  tick this component's `draft` exists to survive. */
+function setup(props: Partial<React.ComponentProps<typeof NumberField>> = {}) {
+  const onPreview = vi.fn()
+  const onCommit = vi.fn()
+  const onStep = vi.fn()
+  const all = { name: 'Offset X', value: 10, onPreview, onCommit, onStep, step: 1, ...props }
+  const { rerender } = render(<NumberField {...all} />)
+  return {
+    onPreview,
+    onCommit,
+    onStep,
+    input: () => screen.getByLabelText(all.name) as HTMLInputElement,
+    rerender: (next: Partial<React.ComponentProps<typeof NumberField>>) =>
+      rerender(<NumberField {...all} {...next} />),
+  }
+}
+
+describe('NumberField — typing gesture', () => {
+  it('shows the controlled value under its accessible name', () => {
+    const { input } = setup()
+    expect(input()).toHaveValue(10)
+  })
+
+  it('previews the parsed number on every keystroke, without committing', () => {
+    const { input, onPreview, onCommit } = setup()
+
+    fireEvent.change(input(), { target: { value: '4' } })
+    fireEvent.change(input(), { target: { value: '42' } })
+
+    expect(onPreview.mock.calls).toEqual([[4], [42]])
+    expect(onCommit).not.toHaveBeenCalled()
+  })
+
+  it('commits ONCE on blur, carrying the last previewed value', () => {
+    const { input, onCommit } = setup()
+
+    fireEvent.change(input(), { target: { value: '4' } })
+    fireEvent.change(input(), { target: { value: '42' } })
+    fireEvent.blur(input())
+
+    expect(onCommit).toHaveBeenCalledTimes(1)
+    expect(onCommit).toHaveBeenCalledWith(42)
+  })
+
+  it('commits on Enter, through that same blur path', () => {
+    const { input, onCommit } = setup()
+
+    input().focus()
+    fireEvent.change(input(), { target: { value: '42' } })
+    fireEvent.keyDown(input(), { key: 'Enter' })
+
+    expect(onCommit).toHaveBeenCalledTimes(1)
+    expect(document.activeElement).not.toBe(input())
+  })
+
+  it('does not double-fire when Enter is followed by a blur', () => {
+    const { input, onCommit } = setup()
+
+    input().focus()
+    fireEvent.change(input(), { target: { value: '42' } })
+    fireEvent.keyDown(input(), { key: 'Enter' })
+    fireEvent.blur(input())
+
+    expect(onCommit).toHaveBeenCalledTimes(1)
+  })
+
+  it('commits NOTHING when the field was focused but never edited', () => {
+    // A pointless save and an undo entry for a no-op.
+    const { input, onPreview, onCommit } = setup()
+
+    fireEvent.focus(input())
+    fireEvent.blur(input())
+
+    expect(onPreview).not.toHaveBeenCalled()
+    expect(onCommit).not.toHaveBeenCalled()
+  })
+
+  it('commits NOTHING when the only keystrokes were unparseable', () => {
+    const { input, onCommit } = setup()
+
+    fireEvent.change(input(), { target: { value: '' } })
+    fireEvent.blur(input())
+
+    expect(onCommit).not.toHaveBeenCalled()
+  })
+
+  it('re-arms for the NEXT gesture after committing', () => {
+    const { input, onCommit } = setup()
+
+    fireEvent.change(input(), { target: { value: '42' } })
+    fireEvent.blur(input())
+
+    fireEvent.change(input(), { target: { value: '43' } })
+    fireEvent.blur(input())
+
+    expect(onCommit).toHaveBeenCalledTimes(2)
+    expect(onCommit).toHaveBeenLastCalledWith(43)
+  })
+
+  it('emits nothing for the mid-typing states an operator passes through', () => {
+    const { input, onPreview } = setup()
+
+    fireEvent.change(input(), { target: { value: '' } }) // cleared the box
+    fireEvent.change(input(), { target: { value: '-' } }) // typing "-5"
+
+    expect(onPreview).not.toHaveBeenCalled()
+  })
+
+  it('holds the emptied box open rather than snapping back to the live value', () => {
+    // Nothing reaches the caller (previous test), but a box that refilled
+    // itself the instant it was cleared would be unusable — the draft has to
+    // stay authoritative through an unparseable state too, not just a valid
+    // one, and through a value change arriving during it.
+    const { input, rerender } = setup()
+
+    fireEvent.change(input(), { target: { value: '' } })
+    expect(input().value).toBe('')
+
+    rerender({ value: 77 })
+    expect(input().value).toBe('')
+  })
+})
+
+describe('NumberField — a mid-typed value survives a value change (the reason `draft` exists)', () => {
+  it('does not clobber the typed text when the host re-renders with a new value', () => {
+    const { input, rerender } = setup()
+
+    fireEvent.change(input(), { target: { value: '4' } }) // mid-typing "4" of "42"
+    expect(input()).toHaveValue(4)
+
+    // A playback tick arrives while the field is still mid-edit. Before
+    // `draft`, this forced the controlled input back to the incoming prop and
+    // ate the keystroke.
+    rerender({ value: 77 })
+    expect(input()).toHaveValue(4)
+
+    fireEvent.change(input(), { target: { value: '42' } })
+    expect(input()).toHaveValue(42)
+  })
+
+  it('goes back to tracking the live value once the gesture commits', () => {
+    const { input, rerender } = setup()
+
+    fireEvent.change(input(), { target: { value: '4' } })
+    rerender({ value: 77 })
+    fireEvent.blur(input())
+
+    // Proves blur RELEASED the draft rather than freezing the typed text.
+    expect(input()).toHaveValue(77)
+  })
+
+  it('tracks the live value while untouched — an animating prop still animates', () => {
+    const { input, rerender } = setup()
+
+    rerender({ value: 55 })
+
+    expect(input()).toHaveValue(55)
+  })
+})
+
+describe('NumberField — steppers', () => {
+  it('nudges in each direction as a discrete edit, never a preview/commit pair', () => {
+    const { onStep, onPreview, onCommit } = setup({ name: 'Opacity' })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Increase Opacity' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Decrease Opacity' }))
+
+    expect(onStep.mock.calls).toEqual([[1], [-1]])
+    expect(onPreview).not.toHaveBeenCalled()
+    expect(onCommit).not.toHaveBeenCalled()
+  })
+
+  it('renders no steppers at all when the caller has no discrete nudge for them', () => {
+    setup({ onStep: undefined })
+
+    expect(screen.queryByRole('button')).toBeNull()
+  })
+})
+
+describe('NumberField — decoration', () => {
+  it('renders the prefix and unit, hidden from assistive tech', () => {
+    setup({ prefix: 'X', unit: '%' })
+
+    // The accessible name still reads once, from the box's own aria-label.
+    expect(screen.getByLabelText('Offset X')).toBeInTheDocument()
+    expect(screen.getByText('X')).toHaveAttribute('aria-hidden', 'true')
+    expect(screen.getByText('%')).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('shows an empty box for a value the caller has no explicit setting for', () => {
+    // `''` is not zero — it means "nothing stored", and the placeholder is
+    // what makes the field honest about what is actually in force.
+    const { input } = setup({ value: '', placeholder: '1.3' })
+
+    expect(input().value).toBe('')
+    expect(input()).toHaveAttribute('placeholder', '1.3')
+  })
+
+  it('renders an EMPTY placeholder as a real attribute, not an absent one', () => {
+    // A caller whose active default has no value to report still needs the
+    // attribute there — dropping it would fall back to some other placeholder.
+    const { input } = setup({ value: '', placeholder: '' })
+
+    expect(input()).toHaveAttribute('placeholder', '')
+  })
+
+  it('shows a stored value rather than the placeholder when it has one', () => {
+    const { input } = setup({ value: '0.08', placeholder: '-0.02' })
+
+    expect(input().value).toBe('0.08')
+    expect(input()).toHaveAttribute('placeholder', '-0.02')
+  })
+
+  it('snaps an emptied box back to the live value on blur', () => {
+    const { input } = setup({ value: 10 })
+
+    fireEvent.change(input(), { target: { value: '' } })
+    expect(input().value).toBe('')
+
+    fireEvent.blur(input())
+
+    expect(input()).toHaveValue(10)
+  })
+
+  it('passes step/min/max to the box for native validation', () => {
+    const { input } = setup({ step: 0.01, min: 0, max: 1, value: 0.5 })
+
+    expect(input()).toHaveAttribute('step', '0.01')
+    expect(input()).toHaveAttribute('min', '0')
+    expect(input()).toHaveAttribute('max', '1')
+  })
+
+  it('does NOT clamp a typed value — a bound only limits the stepper', () => {
+    // Both assertions deliberately use values OUTSIDE the bounds. A value on
+    // the boundary would prove nothing: `Math.max(min, 5)` is also 5, so a
+    // clamping implementation would pass such a test unchanged.
+    const { input, onPreview } = setup({ min: 5, max: 400, value: 100 })
+
+    // Past the ceiling: `500` typed on the way to a bigger number must arrive
+    // whole, not rewritten to 400 between keystrokes.
+    fireEvent.change(input(), { target: { value: '500' } })
+    expect(onPreview).toHaveBeenLastCalledWith(500)
+
+    // And under the floor: `1` typed on the way to `12` must not become 5.
+    fireEvent.change(input(), { target: { value: '1' } })
+    expect(onPreview).toHaveBeenLastCalledWith(1)
+  })
+})
+
+describe('NumberField — disabled', () => {
+  it('disables the box itself', () => {
+    const { input } = setup({ disabled: true })
+    expect(input()).toBeDisabled()
+  })
+
+  it('disables the steppers too — a live arrow beside a dead box would be a bug', () => {
+    setup({ name: 'Opacity', disabled: true })
+
+    expect(screen.getByRole('button', { name: 'Increase Opacity' })).toBeDisabled()
+    expect(screen.getByRole('button', { name: 'Decrease Opacity' })).toBeDisabled()
+  })
+
+  it('a disabled stepper click does not fire onStep', () => {
+    const { onStep } = setup({ name: 'Opacity', disabled: true })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Increase Opacity' }))
+
+    expect(onStep).not.toHaveBeenCalled()
+  })
+})
+
+describe('stepValue', () => {
+  it('increments and decrements by one step', () => {
+    expect(stepValue(10, 1, { step: 1 })).toBe(11)
+    expect(stepValue(10, -1, { step: 1 })).toBe(9)
+  })
+
+  it('rounds away the float noise the nudge itself introduces', () => {
+    // 1.2 + 0.01 is 1.2100000000000002 in IEEE 754.
+    expect(stepValue(1.2, 1, { step: 0.01 })).toBe(1.21)
+  })
+
+  it('clamps at min and max', () => {
+    expect(stepValue(0.01, -1, { step: 0.01, min: 0.01 })).toBe(0.01)
+    expect(stepValue(1, 1, { step: 0.01, min: 0, max: 1 })).toBe(1)
+  })
+
+  it('leaves an unbounded value unbounded', () => {
+    expect(stepValue(-5, -1, { step: 1 })).toBe(-6)
+    expect(stepValue(999, 1, { step: 1 })).toBe(1000)
+  })
+})

package/src/ui/__tests__/Slider.test.tsx

@@ -0,0 +1,150 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { Slider } from '../Slider'
+
+function setup(props: Partial<React.ComponentProps<typeof Slider>> = {}) {
+  const onChange = vi.fn()
+  const onCommit = vi.fn()
+  const all = {
+    'aria-label': 'Scale slider' as const,
+    value: 1,
+    min: 0,
+    max: 4,
+    step: 0.01,
+    onChange,
+    onCommit,
+    ...props,
+  }
+  render(<Slider {...all} />)
+  return {
+    onChange,
+    onCommit,
+    slider: () => screen.getByRole('slider', { name: all['aria-label'] }) as HTMLInputElement,
+  }
+}
+
+describe('Slider — value + semantics', () => {
+  it('exposes the range natively, under its accessible name', () => {
+    const { slider } = setup()
+
+    expect(slider().value).toBe('1')
+    expect(slider()).toHaveAttribute('type', 'range')
+    expect(slider()).toHaveAttribute('min', '0')
+    expect(slider()).toHaveAttribute('max', '4')
+    expect(slider()).toHaveAttribute('step', '0.01')
+  })
+
+  it('previews the parsed number on every change', () => {
+    const { slider, onChange } = setup()
+
+    fireEvent.change(slider(), { target: { value: '1.5' } })
+    fireEvent.change(slider(), { target: { value: '1.6' } })
+
+    expect(onChange.mock.calls).toEqual([[1.5], [1.6]])
+  })
+})
+
+describe('Slider — one commit per gesture', () => {
+  it('commits ONCE on pointer up, not per change, and not again on the trailing blur', () => {
+    const { slider, onCommit } = setup()
+
+    fireEvent.change(slider(), { target: { value: '1.5' } })
+    fireEvent.change(slider(), { target: { value: '1.6' } })
+    expect(onCommit).not.toHaveBeenCalled()
+
+    fireEvent.pointerUp(slider())
+    expect(onCommit).toHaveBeenCalledTimes(1)
+
+    // A pointerup is normally followed by a blur — that must not stack a
+    // second undo entry onto the same drag.
+    fireEvent.blur(slider())
+    expect(onCommit).toHaveBeenCalledTimes(1)
+  })
+
+  it('reports the last previewed value to the commit', () => {
+    const { slider, onCommit } = setup()
+
+    fireEvent.change(slider(), { target: { value: '1.5' } })
+    fireEvent.change(slider(), { target: { value: '2.25' } })
+    fireEvent.pointerUp(slider())
+
+    expect(onCommit).toHaveBeenCalledWith(2.25)
+  })
+
+  it('commits a keyboard adjustment on key up', () => {
+    const { slider, onCommit } = setup()
+
+    fireEvent.change(slider(), { target: { value: '1.3' } })
+    fireEvent.keyUp(slider(), { key: 'ArrowRight' })
+
+    expect(onCommit).toHaveBeenCalledTimes(1)
+  })
+
+  it('commits NOTHING for a gesture that never changed anything', () => {
+    // A click landing on the thumb's current position, or a focus/blur that
+    // touched nothing, must not spend an undo entry on a no-op.
+    const { slider, onCommit } = setup()
+
+    fireEvent.pointerUp(slider())
+    fireEvent.keyUp(slider(), { key: 'ArrowRight' })
+    fireEvent.blur(slider())
+
+    expect(onCommit).not.toHaveBeenCalled()
+  })
+
+  it('re-arms for the NEXT gesture after committing', () => {
+    const { slider, onCommit } = setup()
+
+    fireEvent.change(slider(), { target: { value: '1.5' } })
+    fireEvent.pointerUp(slider())
+
+    fireEvent.change(slider(), { target: { value: '2' } })
+    fireEvent.pointerUp(slider())
+
+    expect(onCommit).toHaveBeenCalledTimes(2)
+  })
+
+  it('is usable with no onCommit at all — a slider whose changes are already final', () => {
+    const { slider, onChange } = setup({ onCommit: undefined })
+
+    fireEvent.change(slider(), { target: { value: '2' } })
+    expect(() => fireEvent.pointerUp(slider())).not.toThrow()
+    expect(onChange).toHaveBeenCalledWith(2)
+  })
+})
+
+describe('Slider — keyboard', () => {
+  it('is focusable, so the native range keyboard bindings apply', () => {
+    // The look is replaced, the control is not: it stays a native
+    // `<input type="range">` precisely so arrows/Home/End keep working.
+    const { slider } = setup()
+
+    slider().focus()
+
+    expect(document.activeElement).toBe(slider())
+    expect(slider()).not.toHaveAttribute('tabindex', '-1')
+  })
+
+  it('honours `disabled`', () => {
+    const { slider } = setup({ disabled: true })
+
+    expect(slider()).toBeDisabled()
+  })
+})
+
+describe('Slider — theming', () => {
+  it('draws track and thumb from theme vars, never a literal color', () => {
+    // The control has to read correctly on both the light and dark editor
+    // grounds; a hardcoded fill would only work on one of them. This is
+    // deliberately the ONLY assertion here — checking for the presence of
+    // specific `bg-[var(--editor-*)]` classes would just be `SLIDER_CLASS`
+    // copied into the test: it could only fail on a rename (which teaches
+    // nothing about rendering) and would false-fail the first legitimate
+    // token rename. The real rule this control must never break is "no
+    // literal color", which is what stays under test.
+    const { slider } = setup()
+    const cls = slider().className
+
+    expect(cls).not.toMatch(/#[0-9a-f]{3,8}\b/i)
+  })
+})

package/src/ui/__tests__/Tooltip.test.tsx

@@ -0,0 +1,105 @@
+/// <reference types="vitest/globals" />
+/**
+ * The styled hover pill that replaced native `title=` on the editor's tool
+ * buttons. What matters is that it appears on hover with no delay, leaves on
+ * every exit path, and renders outside the trigger's clipping ancestors.
+ */
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { render, screen, fireEvent, cleanup } from '@testing-library/react'
+import { Tooltip } from '../Tooltip'
+
+afterEach(() => cleanup())
+
+function renderTooltip(props: Partial<React.ComponentProps<typeof Tooltip>> = {}) {
+  return render(
+    <Tooltip label="Undo" {...props}>
+      <button aria-label="Undo">u</button>
+    </Tooltip>,
+  )
+}
+
+describe('Tooltip', () => {
+  it('is absent until hover, then shows the label immediately', () => {
+    renderTooltip()
+    expect(screen.queryByRole('tooltip')).toBeNull()
+
+    fireEvent.mouseEnter(screen.getByLabelText('Undo').parentElement!)
+    // No timers advanced: the pill is up on the first event, unlike `title=`.
+    expect(screen.getByRole('tooltip').textContent).toContain('Undo')
+  })
+
+  it('renders shortcut chips as <kbd> after the label', () => {
+    renderTooltip({ keys: ['⌘', 'Z'] })
+    fireEvent.mouseEnter(screen.getByLabelText('Undo').parentElement!)
+
+    const chips = screen.getAllByText(/^[⌘Z]$/)
+    expect(chips.map((c) => c.tagName)).toEqual(['KBD', 'KBD'])
+  })
+
+  it('hides on mouse leave', () => {
+    renderTooltip()
+    const wrapper = screen.getByLabelText('Undo').parentElement!
+    fireEvent.mouseEnter(wrapper)
+    expect(screen.getByRole('tooltip')).toBeTruthy()
+
+    fireEvent.mouseLeave(wrapper)
+    expect(screen.queryByRole('tooltip')).toBeNull()
+  })
+
+  it('hides on press, so a button that opens a modal leaves no orphan pill', () => {
+    renderTooltip()
+    const wrapper = screen.getByLabelText('Undo').parentElement!
+    fireEvent.mouseEnter(wrapper)
+    fireEvent.mouseDown(wrapper)
+    expect(screen.queryByRole('tooltip')).toBeNull()
+  })
+
+  it('shows on keyboard focus and hides on blur', () => {
+    renderTooltip()
+    const button = screen.getByLabelText('Undo')
+    fireEvent.focus(button)
+    expect(screen.getByRole('tooltip')).toBeTruthy()
+
+    fireEvent.blur(button)
+    expect(screen.queryByRole('tooltip')).toBeNull()
+  })
+
+  it('portals the pill to document.body, escaping the trigger\'s overflow ancestors', () => {
+    const { container } = render(
+      <div style={{ overflow: 'hidden' }}>
+        <Tooltip label="Fit to view">
+          <button aria-label="Fit to view">fit</button>
+        </Tooltip>
+      </div>,
+    )
+    fireEvent.mouseEnter(screen.getByLabelText('Fit to view').parentElement!)
+
+    const pill = screen.getByRole('tooltip')
+    expect(container.contains(pill)).toBe(false)
+    expect(document.body.contains(pill)).toBe(true)
+    // Fixed positioning is what makes the escape work — an absolute pill would
+    // still resolve against a positioned ancestor.
+    expect(pill.className).toContain('fixed')
+  })
+
+  it('is inert to the pointer, so it can never eat the click it describes', () => {
+    const onClick = vi.fn()
+    render(
+      <Tooltip label="Split at playhead">
+        <button aria-label="Split" onClick={onClick}>s</button>
+      </Tooltip>,
+    )
+    const button = screen.getByLabelText('Split')
+    fireEvent.mouseEnter(button.parentElement!)
+    expect(screen.getByRole('tooltip').className).toContain('pointer-events-none')
+
+    fireEvent.click(button)
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('puts layout classes on the wrapper, which is the flex item', () => {
+    renderTooltip({ className: 'mr-auto' })
+    const wrapper = screen.getByLabelText('Undo').parentElement!
+    expect(wrapper.className).toBe('inline-flex mr-auto')
+  })
+})

package/src/ui/__tests__/usePersistentState.test.tsx

@@ -0,0 +1,112 @@
+/// <reference types="vitest/globals" />
+/**
+ * The layout preferences that survive a reload (timeline pane height, caption
+ * row visibility). What matters is that a bad or hostile stored value can never
+ * take the editor down — a preference is not worth a crash the user can only
+ * escape by clearing site data.
+ */
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, fireEvent, cleanup, act } from '@testing-library/react'
+import { reviveBoolean, reviveNumberInRange, usePersistentState } from '../usePersistentState'
+
+const KEY = 'test.pref'
+
+function Probe({ revive = reviveNumberInRange(10, 100), initial = 50 } = {}) {
+  const [value, set] = usePersistentState(KEY, initial, revive)
+  return (
+    <div>
+      <span data-testid="value">{String(value)}</span>
+      <button onClick={() => set(77 as never)}>persist</button>
+      <button onClick={() => set(88 as never, { persist: false })}>transient</button>
+    </div>
+  )
+}
+
+beforeEach(() => window.localStorage.clear())
+afterEach(() => cleanup())
+
+describe('usePersistentState', () => {
+  it('starts at the initial value when nothing is stored', () => {
+    render(<Probe />)
+    expect(screen.getByTestId('value').textContent).toBe('50')
+  })
+
+  it('restores a previously stored value', () => {
+    window.localStorage.setItem(KEY, '42')
+    render(<Probe />)
+    expect(screen.getByTestId('value').textContent).toBe('42')
+  })
+
+  it('writes through on a normal set', () => {
+    render(<Probe />)
+    fireEvent.click(screen.getByText('persist'))
+    expect(screen.getByTestId('value').textContent).toBe('77')
+    expect(window.localStorage.getItem(KEY)).toBe('77')
+  })
+
+  it('applies a transient set without writing it — the drag-frame case', () => {
+    // Every mousemove of a divider drag calls this; persisting each one would
+    // mean ~60 localStorage writes a second for a value only the last of which
+    // matters.
+    render(<Probe />)
+    fireEvent.click(screen.getByText('transient'))
+    expect(screen.getByTestId('value').textContent).toBe('88')
+    expect(window.localStorage.getItem(KEY)).toBeNull()
+  })
+
+  it('rejects a stored value outside the allowed range', () => {
+    // A height saved on a much taller window must not open the editor with the
+    // preview pushed off-screen.
+    window.localStorage.setItem(KEY, '99999')
+    render(<Probe />)
+    expect(screen.getByTestId('value').textContent).toBe('50')
+  })
+
+  it('falls back to the initial value on unparseable JSON', () => {
+    window.localStorage.setItem(KEY, 'not json{')
+    render(<Probe />)
+    expect(screen.getByTestId('value').textContent).toBe('50')
+  })
+
+  it('falls back on a value of the wrong type', () => {
+    window.localStorage.setItem(KEY, '"tall"')
+    render(<Probe />)
+    expect(screen.getByTestId('value').textContent).toBe('50')
+  })
+
+  it('survives localStorage throwing on read — Safari private mode', () => {
+    const spy = vi.spyOn(Storage.prototype, 'getItem').mockImplementation(() => { throw new Error('denied') })
+    render(<Probe />)
+    expect(screen.getByTestId('value').textContent).toBe('50')
+    spy.mockRestore()
+  })
+
+  it('survives localStorage throwing on write, keeping the value in memory', () => {
+    const spy = vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => { throw new Error('quota') })
+    render(<Probe />)
+    act(() => { fireEvent.click(screen.getByText('persist')) })
+    expect(screen.getByTestId('value').textContent).toBe('77')
+    spy.mockRestore()
+  })
+})
+
+describe('revivers', () => {
+  it('reviveNumberInRange accepts the bounds and rejects everything unusable', () => {
+    const revive = reviveNumberInRange(10, 100)
+    expect(revive(10)).toBe(10)
+    expect(revive(100)).toBe(100)
+    expect(revive(9)).toBeNull()
+    expect(revive(101)).toBeNull()
+    expect(revive(Number.NaN)).toBeNull()
+    expect(revive(Number.POSITIVE_INFINITY)).toBeNull()
+    expect(revive('50')).toBeNull()
+    expect(revive(null)).toBeNull()
+  })
+
+  it('reviveBoolean takes only real booleans', () => {
+    expect(reviveBoolean(true)).toBe(true)
+    expect(reviveBoolean(false)).toBe(false)
+    expect(reviveBoolean('true')).toBeNull()
+    expect(reviveBoolean(1)).toBeNull()
+  })
+})

package/src/ui/badge.tsx

@@ -6,10 +6,18 @@ const badgeVariants = cva(
   {
     variants: {
       variant: {
-        pending: 'bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300',
-        draft:   'bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300',
-        final:   'bg-emerald-100 text-emerald-700 dark:bg-green-900/50 dark:text-green-300',
-        default: 'bg-gray-100 text-gray-600 dark:bg-[var(--editor-surface)] dark:text-[var(--editor-text)]',
+        // Status hues are deliberately a single fixed appearance rather than
+        // a `dark:`-split one: `dark:` here would follow the HOST page's
+        // `<html class="dark">`, not the `theme` prop passed to this editor
+        // instance — a host can pass `lightMontajTheme` while its own chrome
+        // stays dark (or vice versa), so the two can disagree. A soft pastel
+        // chip is legible on any editor ground (verified ~4.6:1+ on a light
+        // surface, the new case this sweep adds; it simply pops as a bright
+        // chip on a dark one, which reads fine for a status indicator).
+        pending: 'bg-amber-100 text-amber-700',
+        draft:   'bg-blue-100 text-blue-700',
+        final:   'bg-emerald-100 text-emerald-700',
+        default: 'bg-[var(--editor-surface)] text-[var(--editor-text)]',
       },
     },
     defaultVariants: { variant: 'default' },