ci: fix pnpm setup failure, pin toolchain with mise

Author: karngyan

.github/workflows/ci.yml

@@ -6,25 +6,42 @@ on:
   pull_request:
     branches: [main]
 
+# Cancel superseded runs on the same ref to save CI minutes.
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v4
+      # Installs Node and pnpm at the exact versions pinned in mise.toml.
+      - name: Setup toolchain (mise)
+        uses: jdx/mise-action@v2
+        with:
+          cache: true
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: echo "STORE_PATH=$(pnpm store path --silent)" >> "$GITHUB_ENV"
 
-      - name: Setup Node
-        uses: actions/setup-node@v4
+      - name: Cache pnpm store
+        uses: actions/cache@v4
         with:
-          node-version: 24
-          cache: pnpm
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Format check
+        run: pnpm format:check
+
       - name: Typecheck
         run: pnpm typecheck
 

.github/workflows/release.yml

@@ -17,13 +17,18 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v4
-
-      - uses: actions/setup-node@v4
+      # Installs Node and pnpm at the exact versions pinned in mise.toml.
+      - name: Setup toolchain (mise)
+        uses: jdx/mise-action@v2
         with:
-          node-version: 24
-          cache: pnpm
-          registry-url: https://registry.npmjs.org
+          cache: true
+
+      # Configure npm auth for changesets publish.
+      - name: Configure npm registry
+        run: |
+          echo "//registry.npmjs.org/:_authToken=${NODE_AUTH_TOKEN}" > ~/.npmrc
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
       - run: pnpm install --frozen-lockfile
 

.prettierignore

@@ -0,0 +1,5 @@
+# Generated / vendored — never reformat.
+dist
+node_modules
+pnpm-lock.yaml
+CHANGELOG.md

README.md

@@ -45,18 +45,18 @@ The quickest knob is the `accentColor` prop, which drives the scrubber fill, act
 
 For deeper control, every visual is driven by CSS custom properties on the `.kino` root. Override them in your own stylesheet, or pass a `theme` object of property/value pairs to set them inline.
 
-| Custom property | Default | Role |
-| --- | --- | --- |
-| `--kino-accent` | `oklch(50.8% 0.118 165.612)` | Accent color (progress, active items, ranges) |
-| `--kino-radius` | `12px` | Corner radius of glass surfaces |
-| `--kino-surface` | `color-mix(in oklab, black 55%, transparent)` | Glass surface fill |
-| `--kino-surface-strong` | `color-mix(in oklab, black 70%, transparent)` | Stronger surface (idle play button) |
-| `--kino-border` | `color-mix(in oklab, white 14%, transparent)` | Hairline borders |
-| `--kino-text` | `oklch(98% 0 0)` | Primary text and icons |
-| `--kino-text-dim` | `color-mix(in oklab, white 65%, transparent)` | Secondary text (timecode) |
-| `--kino-blur` | `18px` | Backdrop blur radius |
-| `--kino-shadow` | `0 8px 40px rgba(0, 0, 0, 0.45)` | Surface drop shadow |
-| `--kino-ease` | `cubic-bezier(0.22, 1, 0.36, 1)` | Shared transition easing |
+| Custom property         | Default                                       | Role                                          |
+| ----------------------- | --------------------------------------------- | --------------------------------------------- |
+| `--kino-accent`         | `oklch(50.8% 0.118 165.612)`                  | Accent color (progress, active items, ranges) |
+| `--kino-radius`         | `12px`                                        | Corner radius of glass surfaces               |
+| `--kino-surface`        | `color-mix(in oklab, black 55%, transparent)` | Glass surface fill                            |
+| `--kino-surface-strong` | `color-mix(in oklab, black 70%, transparent)` | Stronger surface (idle play button)           |
+| `--kino-border`         | `color-mix(in oklab, white 14%, transparent)` | Hairline borders                              |
+| `--kino-text`           | `oklch(98% 0 0)`                              | Primary text and icons                        |
+| `--kino-text-dim`       | `color-mix(in oklab, white 65%, transparent)` | Secondary text (timecode)                     |
+| `--kino-blur`           | `18px`                                        | Backdrop blur radius                          |
+| `--kino-shadow`         | `0 8px 40px rgba(0, 0, 0, 0.45)`              | Surface drop shadow                           |
+| `--kino-ease`           | `cubic-bezier(0.22, 1, 0.36, 1)`              | Shared transition easing                      |
 
 ```css
 .kino {
@@ -70,15 +70,15 @@ For deeper control, every visual is driven by CSS custom properties on the `.kin
 
 The player is keyboard-first. Shortcuts are ignored while a text input, textarea, select, or contenteditable element is focused, and modifier-key combinations (Ctrl/Cmd/Alt) are passed through.
 
-| Key | Action |
-| --- | --- |
-| `Space` / `K` | Play / pause |
-| `<` / `>` | Decrease / increase playback rate (0.25 step) |
-| `M` | Toggle mute |
-| `C` | Toggle captions |
-| `S` | Open the speed menu |
-| `F` | Toggle fullscreen |
-| `0`-`9` | Seek to 0%-90% of the duration |
+| Key           | Action                                        |
+| ------------- | --------------------------------------------- |
+| `Space` / `K` | Play / pause                                  |
+| `<` / `>`     | Decrease / increase playback rate (0.25 step) |
+| `M`           | Toggle mute                                   |
+| `C`           | Toggle captions                               |
+| `S`           | Open the speed menu                           |
+| `F`           | Toggle fullscreen                             |
+| `0`-`9`       | Seek to 0%-90% of the duration                |
 
 ## Capability gating
 

demo/file-provider.ts

@@ -16,7 +16,9 @@ export function createFileProvider(src: string, poster?: string): Provider {
     capabilities: {
       canSetQuality: false,
       hasStoryboard: false,
-      canPiP: typeof document !== "undefined" && "pictureInPictureEnabled" in document,
+      canPiP:
+        typeof document !== "undefined" &&
+        "pictureInPictureEnabled" in document,
       canFullscreen: true,
       canSetRate: true,
       hasTextTracks: false,