+
+/** The J/K/L shuttle readout: direction, key hint and rate, in mono. */
+export const Forward: Story = {}
+
+export const Reverse: Story = { args: { playbackRate: -4 } }
+
+/** At 1× it stays neutral graphite; above 1× it takes the signal orange. */
+export const Rates: Story = {
+ render: () => (
+
+ {[-8, -4, -2, -1, 1, 2, 4, 8].map((rate) => (
+
+ ))}
+
+ ),
+}
+
+/** Renders nothing when playback is stopped or the rate is zero. */
+export const Hidden: Story = {
+ args: { active: false },
+ render: (args) => (
+
+
+ (nothing renders while stopped)
+
+ ),
+}
diff --git a/src/shared/ui/timeline-preview-scrubber-visual.stories.tsx b/src/shared/ui/timeline-preview-scrubber-visual.stories.tsx
new file mode 100644
index 000000000..e12cb144f
--- /dev/null
+++ b/src/shared/ui/timeline-preview-scrubber-visual.stories.tsx
@@ -0,0 +1,68 @@
+import { useEffect, type ReactNode } from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { usePlaybackStore } from '@/shared/state/playback'
+import { TimelinePreviewScrubberVisual } from '@/shared/ui/timeline-preview-scrubber-visual'
+
+const meta = {
+ title: 'Editor Surfaces/TimelinePreviewScrubberVisual',
+ component: TimelinePreviewScrubberVisual,
+ args: { fps: 24, frameToPixels: (frame: number) => frame * 4 },
+} satisfies Meta
+
+export default meta
+
+type Story = StoryObj
+
+/**
+ * The ghost playhead that follows the pointer across every Edit timeline. It
+ * reads the preview frame straight from the playback store and positions itself
+ * imperatively, so these stories seed that store rather than pass a position.
+ */
+function ScrubberStage({
+ previewFrame,
+ children,
+}: {
+ previewFrame: number | null
+ children: ReactNode
+}) {
+ useEffect(() => {
+ usePlaybackStore.getState().setPreviewFrame(previewFrame)
+ return () => usePlaybackStore.getState().setPreviewFrame(null)
+ }, [previewFrame])
+
+ return (
+
+ )
+}
+
+export const OverTracks: Story = {
+ render: (args) => (
+
+
+
+ ),
+}
+
+/** In the ruler it gains the timecode tooltip. */
+export const InRuler: Story = {
+ args: { inRuler: true },
+ render: (args) => (
+
+
+
+ ),
+}
+
+/** Suppressed (a drag is in progress) or with no preview frame: nothing renders. */
+export const Suppressed: Story = {
+ args: { suppressed: true },
+ render: (args) => (
+
+
+
+ ),
+}
diff --git a/src/shared/ui/vertical-scrollbar-overlay.stories.tsx b/src/shared/ui/vertical-scrollbar-overlay.stories.tsx
new file mode 100644
index 000000000..652246316
--- /dev/null
+++ b/src/shared/ui/vertical-scrollbar-overlay.stories.tsx
@@ -0,0 +1,71 @@
+import { useRef } from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { VerticalScrollbarOverlay } from '@/shared/ui/vertical-scrollbar-overlay'
+
+const meta = {
+ title: 'Editor Surfaces/VerticalScrollbarOverlay',
+ component: VerticalScrollbarOverlay,
+ args: { ariaLabel: 'Scroll tracks' },
+} satisfies Meta
+
+export default meta
+
+type Story = StoryObj
+
+/**
+ * Timeline surfaces hide their native rail so the overlay can sit inside the
+ * track area. Scroll the well, or drag the rail on the right.
+ */
+export const OverTracks: Story = {
+ render: function OverTracksStory(args) {
+ const scrollRef = useRef(null)
+
+ return (
+
+
+ {Array.from({ length: 12 }, (_, index) => (
+
+ V{12 - index}
+
+ ))}
+
+
+