feat(app): use knobs controls inside Knobs feature pages

packages/app/component-tests/debug-bar.spec.ts

@@ -78,9 +78,7 @@ story("a feature page's Enabled switch turns that feature on after another featu
         document.querySelector<HTMLButtonElement>(`[data-motion-feature="Switches · ${name}"]`)
 
       const enabled = (name: string) =>
-        [...document.querySelectorAll("h3")]
-          .find((heading) => heading.textContent === name)
-          ?.parentElement?.querySelector<HTMLInputElement>('[data-component="switch"] input')
+        document.querySelector<HTMLElement>(`[data-knobs-mount="opencode-motion-Switches · ${name}"] [role="switch"]`)
 
       await until(() => row("First") !== null)
       row("First")?.click()
@@ -99,3 +97,110 @@ story("a feature page's Enabled switch turns that feature on after another featu
 
   expect(result).toEqual({ first: false, second: true })
 })
+
+story("a feature page's preset chips go through the feature model, modes included", async ({ page }) => {
+  const result = page.evaluate(
+    async (modules) => {
+      localStorage.setItem("opencode.motion.panel", JSON.stringify({ x: 0, y: 0, width: 680 }))
+      const { motionTuning } = await import(modules.tuning)
+      const meta = { group: "Chips", subsection: "Feature" }
+
+      const alt = motionTuning.mode("chips.alt", { label: "Alt", ...meta })
+
+      // A mode brings rows of its own, as James does.
+      motionTuning.number("chips.alt.shift", {
+        label: "Shift",
+        ...meta,
+        when: alt,
+        value: 10,
+        min: 0,
+        max: 20,
+        step: 1,
+        unit: "px",
+      })
+
+      const spring = motionTuning.spring("chips.spring", {
+        label: "Spring",
+        ...meta,
+        when: () => !alt(),
+        presets: {
+          snappy: { duration: 0.2, bounce: 0 },
+          smooth: { duration: 0.3, bounce: 0 },
+          calm: { duration: 0.45, bounce: 0 },
+        },
+      })
+
+      const shipped = spring().duration
+      const { mountExtensions, until } = await import(modules.fixture)
+      const debug = await import(modules.debug)
+      const definition = { ...debug.default, renderer: () => import(modules.renderer) }
+
+      const host = mountExtensions({
+        definitions: [definition],
+        stored: { "extension.debug.bar": { visible: true, motion: true } },
+      })
+
+      host.release()
+
+      const mount = '[data-knobs-mount="opencode-motion-Chips · Feature"]'
+
+      const chip = (name: string) =>
+        [...document.querySelectorAll<HTMLElement>(`${mount} .knobs-preset-chip`)].find(
+          (item) => item.textContent?.trim() === name,
+        )
+
+      const reset = () => document.querySelector<HTMLButtonElement>(`${mount} button[aria-label^="Reset "]`)
+
+      await until(() => !!document.querySelector('[data-motion-feature="Chips · Feature"]'))
+      document.querySelector<HTMLButtonElement>('[data-motion-feature="Chips · Feature"]')?.click()
+      await until(() => !!chip("Calm"))
+      chip("Calm")?.click()
+      await until(() => spring().duration === 0.45)
+      chip("Alt")?.click()
+      await until(() => alt())
+      await until(() => !!chip("Snappy"))
+      chip("Snappy")?.click()
+      await until(() => !alt() && spring().duration === 0.2)
+      await until(() => !!chip("Alt"))
+      chip("Alt")?.click()
+      await until(() => alt())
+      await until(() => !!chip("Shipped"))
+      chip("Shipped")?.click()
+      await until(() => !alt() && spring().duration === shipped)
+
+      // The group's Reset after a preset goes back to Shipped, modes included.
+      await until(() => !!chip("Calm"))
+      chip("Calm")?.click()
+      await until(() => spring().duration === 0.45 && !!reset())
+      reset()?.click()
+      await until(() => spring().duration === shipped)
+      await until(() => !!chip("Alt"))
+      chip("Alt")?.click()
+      await until(() => alt())
+
+      // The test presses a key on Shift and Reset twice: back to Alt, then to Shipped.
+      const shift = () => document.querySelector<HTMLElement>(`${mount} [role="slider"][aria-label="Shift"]`)
+      await until(() => !!shift())
+      shift()?.focus()
+      await until(() => !alt())
+      const values = { alt: alt(), shipped: spring().duration === shipped }
+      host.unmount()
+
+      return values
+    },
+    { ...modules, tuning: sourceURL(new URL("../../ui/src/motion-tuning.ts", import.meta.url)) },
+  )
+
+  const panel = page.locator('[data-knobs-mount="opencode-motion-Chips · Feature"]')
+  const shift = panel.getByRole("slider", { name: "Shift" })
+
+  await shift.and(page.locator(":focus")).waitFor()
+  await page.keyboard.press("ArrowRight")
+  await expect(panel.getByRole("radio", { name: "Alt, modified" })).toBeChecked()
+  await panel.getByRole("button", { name: "Reset Feature" }).click()
+  await expect(panel.getByRole("radio", { name: "Alt", exact: true })).toBeChecked()
+  await panel.getByRole("button", { name: "Reset Feature" }).click()
+  await expect(shift).toHaveCount(0)
+
+  expect(await result).toEqual({ alt: false, shipped: true })
+})

packages/app/package.json

@@ -50,7 +50,7 @@
     "diff": "catalog:",
     "ghostty-web": "github:anomalyco/ghostty-web#e91e38a9ceb13c566ddfa15185a9393849f712a9",
     "happy-dom": "20.11.1",
-    "knobs": "npm:@kitlangton/knobs@0.4.0-next.15",
+    "knobs": "npm:@kitlangton/knobs@0.4.0-next.22",
     "tw-animate-css": "1.4.0",
     "vite": "8.2.2",
     "vite-plugin-pwa": "1.3.0",

packages/gui-extensions/package.json

@@ -47,6 +47,7 @@
     "effect": "catalog:",
     "fuzzysort": "catalog:",
     "ghostty-web": "github:anomalyco/ghostty-web#e91e38a9ceb13c566ddfa15185a9393849f712a9",
+    "knobs": "npm:@kitlangton/knobs@0.4.0-next.22",
     "remeda": "catalog:",
     "solid-js": "catalog:",
     "solid-presence": "0.2.0",

packages/gui-extensions/src/debug/i18n/en.ts

@@ -48,14 +48,9 @@ export default {
   "motion.close": "Close Knobs",
   "motion.off": "Off",
   "motion.shipped": "Shipped",
-  "motion.custom": "Custom",
-  "motion.presets": "Presets",
   "motion.replay": "Replay",
   "motion.focus": "Focus",
-  "motion.reset": "Reset to Shipped",
   "motion.enabled": "Enabled",
-  "motion.duration": "Duration",
-  "motion.bounce": "Bounce",
   "components.label": "COMPONENTS",
   "components.tip": "Open the components lab: every story, with live controls and its states",
   "speed.label": "SPEED",