feat: Slider UI 컴포넌트 추가

CHANGELOG.md

@@ -4,17 +4,20 @@
 
 ### Added
 
+- Add the reusable Base UI Slider primitive with named scalar/range thumbs, horizontal and vertical composition, RTL keyboard semantics, disabled-state handling, and Storybook coverage for rehearsal range controls.
 - Name tonight's first playable range on the ready rehearsal map and tell the player to check that span on their instrument before the section.
 - Display the analyzed song tempo (BPM) as a badge in the rehearsal workspace.
 - 각 합주 역할(Role)별 개인 연습 진행도를 0~100% 범위로 기록 및 시각화할 수 있는 연습 진척도(`practiceProgress`) 트래커 기능 추가. UI 컨트롤(슬라이더 및 +/- 버튼)과 한/영 다국어 지원 포함.
 
 ### Changed
 
+- Upgrade Base UI to 1.8.0 while preserving BandScope's canonical Slider composition, named-thumb accessibility, nested-input focus styling, and dependency-owned absolute thumb placement.
 - Consolidated Bandit, dependency audits, supplemental secret checks, and Trivy into one trusted-branch security backstop, delegated CodeQL to GitHub default setup, and removed duplicate local PR security and release-preflight runs.
 - Pinned npm `10.9.9` as the approved lockfile generator, activated it through Node-bundled Corepack before dependency consumption, and fail closed unless its bundled `tar` is at least `7.5.19`; primary CI still consumes the committed lock only through frozen `npm ci` validation, rejects mutable npm resolution in the lock gate, requires integrity evidence for public-registry lock entries, and preserves generator-sensitive root `@esbuild/*` peer metadata.
 
 ### Fixed
 
+- Keep Slider keyboard focus paint on the Base UI thumb wrapper through the nested range input's `:focus-visible` state, and preserve Base UI's own absolute thumb-placement authority instead of adding a competing `relative` position token.
 - Upgraded the local score PDF parser to `pdfjs-dist` 6.2.108, pinned Undici 7.29.0 across the workspace, and constrained PDF loading to copied in-memory bytes with a same-origin bundled worker and npm-generated lock provenance.
 
 ## [0.1.3] - 2026-04-29

apps/desktop/package.json

@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@bandscope/shared-types": "0.1.0",
-    "@base-ui/react": "^1.5.0",
+    "@base-ui/react": "^1.8.0",
     "@fontsource-variable/geist": "^5.2.9",
     "@tauri-apps/api": "^2.11.0",
     "class-variance-authority": "^0.7.1",
@@ -33,6 +33,7 @@
     "@tauri-apps/cli": "^2.11.4",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.7",
     "@types/node": "^26.1.1",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",

apps/desktop/src/components/ui/slider-composition.test.tsx

@@ -0,0 +1,113 @@
+import { render, screen } from "@testing-library/react"
+import { describe, expect, it } from "vitest"
+
+import {
+  Slider,
+  SliderControl,
+  SliderIndicator,
+  SliderLabel,
+  SliderThumb,
+  SliderTrack,
+} from "./slider"
+
+describe("Slider canonical composition", () => {
+  it("associates a visible SliderLabel with the nested range input", () => {
+    render(
+      <Slider defaultValue={50}>
+        <SliderLabel>Practice progress</SliderLabel>
+        <SliderControl>
+          <SliderTrack>
+            <SliderIndicator />
+            <SliderThumb />
+          </SliderTrack>
+        </SliderControl>
+      </Slider>
+    )
+
+    expect(screen.getByRole("slider", { name: "Practice progress" })).toHaveAccessibleName(
+      "Practice progress"
+    )
+  })
+
+  it("keeps range thumbs inside a usable track-press area without clipping their pointer targets", () => {
+    const { container } = render(
+      <Slider defaultValue={[25, 75]}>
+        <span id="loop-range-help">Selected rehearsal loop boundaries</span>
+        <SliderControl>
+          <SliderTrack>
+            <SliderIndicator />
+            <SliderThumb
+              index={0}
+              aria-label="Loop start"
+              aria-describedby="loop-range-help"
+            />
+            <SliderThumb index={1} aria-label="Loop end" />
+          </SliderTrack>
+        </SliderControl>
+      </Slider>
+    )
+
+    const control = container.querySelector('[data-slot="slider-control"]')
+    const track = container.querySelector('[data-slot="slider-track"]')
+    const start = screen.getByRole("slider", { name: "Loop start" })
+    const end = screen.getByRole("slider", { name: "Loop end" })
+    const startThumb = start.parentElement
+    const endThumb = end.parentElement
+
+    expect(control).toHaveClass("min-h-6")
+    expect(track).toBeInTheDocument()
+    expect(track).toContainElement(start)
+    expect(track).toContainElement(end)
+    expect(track).not.toHaveClass("overflow-hidden")
+    expect(start).toHaveAttribute("aria-describedby", "loop-range-help")
+    expect(startThumb).toHaveStyle({ position: "absolute" })
+    expect(endThumb).toHaveStyle({ position: "absolute" })
+    expect(startThumb).not.toHaveClass("relative")
+    expect(endThumb).not.toHaveClass("relative")
+    expect(startThumb).toHaveClass("after:inset-[-12px]")
+    expect(endThumb).toHaveClass("after:inset-[-12px]")
+  })
+
+  it("styles keyboard focus from Base UI's nested range input", () => {
+    render(
+      <Slider defaultValue={50}>
+        <SliderControl>
+          <SliderTrack>
+            <SliderIndicator />
+            <SliderThumb aria-label="Playback position" />
+          </SliderTrack>
+        </SliderControl>
+      </Slider>
+    )
+
+    const input = screen.getByRole("slider", { name: "Playback position" })
+    const thumb = input.parentElement
+
+    expect(input).toHaveAttribute("type", "range")
+    expect(thumb).toHaveClass("has-[:focus-visible]:outline-none")
+    expect(thumb).toHaveClass("has-[:focus-visible]:ring-2")
+    expect(thumb).not.toHaveClass("focus-visible:ring-2")
+  })
+
+  it("preserves the same track-owned thumb anatomy and press width for a vertical control", () => {
+    const { container } = render(
+      <Slider defaultValue={50} orientation="vertical">
+        <SliderControl>
+          <SliderTrack>
+            <SliderIndicator />
+            <SliderThumb aria-label="Vertical position" />
+          </SliderTrack>
+        </SliderControl>
+      </Slider>
+    )
+
+    const control = container.querySelector('[data-slot="slider-control"]')
+    const track = container.querySelector('[data-slot="slider-track"]')
+    const thumb = screen.getByRole("slider", { name: "Vertical position" })
+
+    expect(thumb).toHaveAttribute("aria-orientation", "vertical")
+    expect(control).toHaveClass("data-[orientation=vertical]:min-w-6")
+    expect(track).toContainElement(thumb)
+    expect(track).not.toHaveClass("overflow-hidden")
+  })
+})

apps/desktop/src/components/ui/slider.stories.tsx

@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+
+import { DirectionProvider } from "@base-ui/react/direction-provider"
+
+import {
+  Slider,
+  SliderControl,
+  SliderTrack,
+  SliderIndicator,
+  SliderThumb,
+} from "./slider"
+
+/** Base UI Slider primitive documentation. */
+const meta = {
+  title: "UI/Slider",
+  component: Slider,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Slider>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** Default slider view rendering. */
+export const Default: Story = {
+  render: (args) => (
+    <div className="w-[200px]">
+      <Slider defaultValue={50} {...args}>
+        <SliderControl>
+          <SliderTrack>
+            <SliderIndicator />
+            <SliderThumb aria-label="Volume" />
+          </SliderTrack>
+        </SliderControl>
+      </Slider>
+    </div>
+  ),
+}
+
+/** Two-thumb selected-range rendering for rehearsal loop boundaries. */
+export const Range: Story = {
+  render: (args) => (
+    <div className="w-[280px]">
+      <Slider defaultValue={[25, 75]} {...args}>
+        <SliderControl>
+          <SliderTrack>
+            <SliderIndicator />
+            <SliderThumb index={0} aria-label="Loop start" />
+            <SliderThumb index={1} aria-label="Loop end" />
+          </SliderTrack>
+        </SliderControl>
+      </Slider>
+    </div>
+  ),
+}
+
+/** Vertical orientation rendering. */
+export const Vertical: Story = {
+  render: (args) => (
+    <div className="h-[200px]">
+      <Slider defaultValue={50} orientation="vertical" {...args}>
+        <SliderControl>
+          <SliderTrack>
+            <SliderIndicator />
+            <SliderThumb aria-label="Volume" />
+          </SliderTrack>
+        </SliderControl>
+      </Slider>
+    </div>
+  ),
+}
+
+/** Disabled interaction rendering. */
+export const Disabled: Story = {
+  render: (args) => (
+    <div className="w-[200px]">
+      <Slider defaultValue={50} disabled {...args}>
+        <SliderControl>
+          <SliderTrack>
+            <SliderIndicator />
+            <SliderThumb aria-label="Volume" />
+          </SliderTrack>
+        </SliderControl>
+      </Slider>
+    </div>
+  ),
+}
+
+/** Stepped value rendering. */
+export const CustomStep: Story = {
+  render: (args) => (
+    <div className="w-[200px]">
+      <Slider defaultValue={50} step={10} {...args}>
+        <SliderControl>
+          <SliderTrack>
+            <SliderIndicator />
+            <SliderThumb aria-label="Volume" />
+          </SliderTrack>
+        </SliderControl>
+      </Slider>
+    </div>
+  ),
+}
+
+/** Right-to-left reading direction rendering. */
+export const RTL: Story = {
+  render: (args) => (
+    <DirectionProvider direction="rtl">
+      <div className="w-[200px]" dir="rtl">
+        <Slider defaultValue={50} {...args}>
+          <SliderControl>
+            <SliderTrack>
+              <SliderIndicator />
+              <SliderThumb aria-label="Volume" />
+            </SliderTrack>
+          </SliderControl>
+        </Slider>
+      </div>
+    </DirectionProvider>
+  ),
+}