Add e2e tests for useActionTriplet, builtinGroup, and sortOrder

- Triplet display: slice shows as single combined row with `/` separators
- Triplet functionality: X/Y/Z keys toggle clipping planes
- Builtin group: actions appear under "Meta" group
- Sort order: builtin actions display in correct order (Show shortcuts, Command palette, Key lookup)
- Add slice-along-axis demo using `useActionTriplet` in `ThreeDDemo`

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: ryan-williams

site/e2e/hotkeys.spec.ts

@@ -2526,4 +2526,98 @@ test.describe('3D Viewer Demo', () => {
 
     await page.keyboard.press('Escape')
   })
+
+  test('action triplet: slice shows as single combined row', async ({ page }) => {
+    await page.locator('body').click({ position: { x: 10, y: 10 } })
+
+    await page.keyboard.press('?')
+    await page.waitForSelector('.kbd-modal', { timeout: 5000 })
+
+    // Slice along X / Y / Z should be a single triplet row
+    const tripletRow = page.locator('.kbd-action-triplet-row', { hasText: 'Slice along X / Y / Z' })
+    await expect(tripletRow).toBeVisible()
+
+    // Should have two "/" separators between binding groups
+    const seps = tripletRow.locator('.kbd-action-pair-sep')
+    await expect(seps).toHaveCount(2)
+
+    // Should NOT have individual "Slice along X / Y / Z a/b/c" rows
+    const viewGroup = page.locator('.kbd-group', { hasText: '3D: VIEW' })
+    await expect(viewGroup.locator('.kbd-action', { hasText: /^Slice along X \/ Y \/ Z a$/ })).not.toBeVisible()
+    await expect(viewGroup.locator('.kbd-action', { hasText: /^Slice along X \/ Y \/ Z b$/ })).not.toBeVisible()
+    await expect(viewGroup.locator('.kbd-action', { hasText: /^Slice along X \/ Y \/ Z c$/ })).not.toBeVisible()
+
+    await page.keyboard.press('Escape')
+  })
+
+  test('action triplet: slice keys toggle clipping', async ({ page }) => {
+    await page.locator('body').click({ position: { x: 10, y: 10 } })
+
+    const sliceStatus = page.locator('[data-testid="slice-axis"]')
+    await expect(sliceStatus).toHaveText('Slice: off')
+
+    // Press X to slice along X
+    await page.keyboard.press('x')
+    await expect(sliceStatus).toHaveText('Slice: x')
+
+    // Press X again to toggle off
+    await page.keyboard.press('x')
+    await expect(sliceStatus).toHaveText('Slice: off')
+
+    // Press Y to slice along Y
+    await page.keyboard.press('y')
+    await expect(sliceStatus).toHaveText('Slice: y')
+
+    // Press Z to switch to Z
+    await page.keyboard.press('z')
+    await expect(sliceStatus).toHaveText('Slice: z')
+
+    // Press Z again to toggle off
+    await page.keyboard.press('z')
+    await expect(sliceStatus).toHaveText('Slice: off')
+  })
+})
+
+test.describe('Builtin Group and Sort Order', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.addInitScript(() => {
+      localStorage.removeItem('use-kbd-demo')
+      localStorage.removeItem('use-kbd-demo-removed')
+    })
+    await page.goto('/')
+    await expect(page.locator('.kbd-speed-dial-primary')).toBeVisible()
+  })
+
+  test('builtin actions appear under "Meta" group (not "Global")', async ({ page }) => {
+    await page.locator('body').click({ position: { x: 10, y: 10 } })
+
+    await page.keyboard.press('?')
+    await page.waitForSelector('.kbd-modal', { timeout: 5000 })
+
+    // "Meta" group should exist
+    const metaGroup = page.locator('.kbd-group', { hasText: 'META' })
+    await expect(metaGroup).toBeVisible()
+
+    // Builtin actions should be in the Meta group, not the Global group
+    await expect(metaGroup.locator('.kbd-action', { hasText: 'Show shortcuts' })).toBeVisible()
+    await expect(metaGroup.locator('.kbd-action', { hasText: 'Command palette' })).toBeVisible()
+    await expect(metaGroup.locator('.kbd-action', { hasText: 'Key lookup' })).toBeVisible()
+
+    await page.keyboard.press('Escape')
+  })
+
+  test('builtin actions display in order: Show shortcuts, Command palette, Key lookup', async ({ page }) => {
+    await page.locator('body').click({ position: { x: 10, y: 10 } })
+
+    await page.keyboard.press('?')
+    await page.waitForSelector('.kbd-modal', { timeout: 5000 })
+
+    const metaGroup = page.locator('.kbd-group', { hasText: 'META' })
+    const labels = metaGroup.locator('.kbd-action-label')
+    const texts = await labels.allTextContents()
+
+    expect(texts).toEqual(['Show shortcuts', 'Command palette', 'Key lookup'])
+
+    await page.keyboard.press('Escape')
+  })
 })

site/src/routes/ThreeDDemo.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import * as THREE from 'three'
-import { KbdModal, ModeIndicator, ShortcutsModal, useAction, useActionPair, useArrowGroup, useMode } from 'use-kbd'
+import { KbdModal, ModeIndicator, ShortcutsModal, useAction, useActionPair, useActionTriplet, useArrowGroup, useMode } from 'use-kbd'
 import 'use-kbd/styles.css'
 import { useTheme } from '../contexts/ThemeContext'
 
@@ -54,6 +54,7 @@ function Viewer() {
   const [roll, setRoll] = useState(() => getStored('roll', DEFAULTS.roll))
   const [target, setTarget] = useState(() => getStored('target', DEFAULTS.target))
   const [wireframe, setWireframe] = useState(() => getStored('wireframe', false))
+  const [sliceAxis, setSliceAxis] = useState<'x' | 'y' | 'z' | null>(() => getStored('sliceAxis', null))
 
   // Persist to sessionStorage
   useEffect(() => { sessionStorage.setItem(`${STORAGE_KEY}-azimuth`, JSON.stringify(azimuth)) }, [azimuth])
@@ -62,13 +63,15 @@ function Viewer() {
   useEffect(() => { sessionStorage.setItem(`${STORAGE_KEY}-roll`, JSON.stringify(roll)) }, [roll])
   useEffect(() => { sessionStorage.setItem(`${STORAGE_KEY}-target`, JSON.stringify(target)) }, [target])
   useEffect(() => { sessionStorage.setItem(`${STORAGE_KEY}-wireframe`, JSON.stringify(wireframe)) }, [wireframe])
+  useEffect(() => { sessionStorage.setItem(`${STORAGE_KEY}-sliceAxis`, JSON.stringify(sliceAxis)) }, [sliceAxis])
 
   // Initialize Three.js scene
   useEffect(() => {
     const container = containerRef.current
     if (!container) return
 
     const renderer = new THREE.WebGLRenderer({ antialias: true })
+    renderer.localClippingEnabled = true
     renderer.setPixelRatio(window.devicePixelRatio)
     renderer.setSize(container.clientWidth, 500)
     container.appendChild(renderer.domElement)
@@ -140,11 +143,15 @@ function Viewer() {
       // Update background
       scene.background = new THREE.Color(bg)
 
-      // Update wireframe
+      // Update wireframe and clipping
       const cube = cubeRef.current
       if (cube) {
+        const clipPlane = sliceAxis === 'x' ? [new THREE.Plane(new THREE.Vector3(-1, 0, 0), 0)]
+          : sliceAxis === 'y' ? [new THREE.Plane(new THREE.Vector3(0, -1, 0), 0.75)]
+          : sliceAxis === 'z' ? [new THREE.Plane(new THREE.Vector3(0, 0, -1), 0)]
+          : []
         const mats = cube.material as THREE.MeshStandardMaterial[]
-        mats.forEach(m => { m.wireframe = wireframe })
+        mats.forEach(m => { m.wireframe = wireframe; m.clippingPlanes = clipPlane; m.clipShadows = true })
       }
 
       // Spherical to Cartesian
@@ -175,7 +182,7 @@ function Viewer() {
     }
     render()
     return () => cancelAnimationFrame(frameRef.current)
-  }, [azimuth, elevation, distance, roll, target, wireframe, bg])
+  }, [azimuth, elevation, distance, roll, target, wireframe, sliceAxis, bg])
 
   // Modes
   const orbitMode = useMode('view:orbit', {
@@ -314,6 +321,16 @@ function Viewer() {
     handler: useCallback(() => setWireframe(w => !w), []),
   })
 
+  useActionTriplet('view:slice', {
+    label: 'Slice along X / Y / Z',
+    group: '3D: View',
+    actions: [
+      { defaultBindings: ['x'], handler: useCallback(() => setSliceAxis(a => a === 'x' ? null : 'x'), []) },
+      { defaultBindings: ['y'], handler: useCallback(() => setSliceAxis(a => a === 'y' ? null : 'y'), []) },
+      { defaultBindings: ['z'], handler: useCallback(() => setSliceAxis(a => a === 'z' ? null : 'z'), []) },
+    ],
+  })
+
   // Mouse wheel: zoom (bare), pan (Shift), roll (Ctrl)
   useEffect(() => {
     const container = containerRef.current
@@ -352,6 +369,7 @@ function Viewer() {
           Target: ({target.x.toFixed(1)}, {target.y.toFixed(1)}, {target.z.toFixed(1)})
         </span>
         <span data-testid="wireframe">Wireframe: {wireframe ? 'on' : 'off'}</span>
+        <span data-testid="slice-axis">Slice: {sliceAxis ?? 'off'}</span>
       </div>
 
       <ModeIndicator position="bottom-left" />