Let every thumbwheel accept typed values and line the image dials up.

Drop the how-to copy under duration and CFG, keep only the CFG default, and label megapixels so that wheel sits on the same row as steps.

Co-authored-by: Cursor <cursoragent@cursor.com>

components/LampToggle.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-[6.5rem] min-w-0">
-    <div v-if="label" class="mb-1.5 text-[10px] font-medium uppercase tracking-wider text-zinc-500">{{ label }}</div>
+    <div class="mb-1.5 min-h-[1.25rem] text-[10px] font-medium uppercase tracking-wider text-zinc-500">{{ label || '\u00a0' }}</div>
     <button
       type="button"
       role="switch"

components/Thumbwheel.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="min-w-0" :class="[disabled ? 'opacity-50' : '', unit ? 'w-[7.25rem]' : 'w-[6.5rem]']">
-    <div v-if="label" class="mb-1.5 text-[10px] font-medium uppercase tracking-wider text-zinc-500">{{ label }}</div>
+    <div class="mb-1.5 min-h-[1.25rem] text-[10px] font-medium uppercase tracking-wider text-zinc-500">{{ label || '\u00a0' }}</div>
     <div
       class="overflow-hidden rounded-2xl border bg-zinc-950"
       :class="locked ? 'border-amber-300/35' : 'border-white/10'"
@@ -123,7 +123,7 @@ const props = withDefaults(defineProps<{
   disabled: false,
   compact: false,
   digits: 1,
-  editable: false,
+  editable: true,
   unit: '',
   dragRange: 0
 })

pages/index.vue

@@ -847,13 +847,11 @@
           </div>
           <div>
             <AspectRatioPick :model-value="aspect" heading="Aspect ratio" :options="imageAspects" @update:model-value="setImageAspect" />
-            <p class="mt-2 text-xs text-zinc-500">{{ imageAspectHelp }}</p>
           </div>
           <div v-if="v2Mode === 'refine' || (v2Engine === 'krea' && v2Mode !== 'generate')" class="space-y-2 rounded-2xl border border-white/10 bg-zinc-950/40 p-3">
-            <label class="block text-sm">
-              <span class="mb-1 block text-zinc-300">Strength (denoise)</span>
             <Thumbwheel
               v-model="v2Denoise"
+              label="Strength"
               lock-key="v2-denoise"
               :min="IMAGE_V2_DENOISE_MIN"
               :max="IMAGE_V2_DENOISE_MAX"
@@ -861,7 +859,6 @@
               :digits="2"
               compact
             />
-            </label>
             <div v-if="v2Mode === 'refine'" class="flex flex-wrap gap-2">
               <button
                 type="button"
@@ -915,7 +912,7 @@
               <LampToggle :model-value="v2ScaleOn" label="Scale to MP" @update:model-value="setV2ScaleOn" />
               <Thumbwheel
                 v-model="v2Megapixels"
-                aria-label="Megapixels"
+                label="Megapixels"
                 lock-key="megapixels"
                 :min="IMAGE_SCALE_MP_MIN"
                 :max="IMAGE_SCALE_MP_MAX"
@@ -953,7 +950,6 @@
           <p class="text-xs text-zinc-500">Legacy Klein v1 still. New Image work uses Flux / Krea above. This graph stays for older library stills.</p>
           <div>
             <AspectRatioPick :model-value="aspect" heading="Aspect ratio" :options="imageAspects" @update:model-value="setImageAspect" />
-            <p class="mt-2 text-xs text-zinc-500">{{ imageAspectHelp }}</p>
           </div>
           <div class="max-w-md space-y-2">
             <LoraSelect
@@ -1029,24 +1025,21 @@
         </div>
 
         <div v-if="studioMode === 'video'" class="space-y-4">
-          <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+          <div class="grid grid-cols-1 items-start gap-3 sm:grid-cols-2">
             <DurationField
               v-model="duration"
               label="Duration"
-              :hint="shotScriptMode
-                ? 'This length applies to the initial shot and every extension in the script. Tap the digits to type.'
-                : 'Tap the digits to type. Hover and scroll ±0.1s, Shift-scroll ±1s. Drag the wheel.'"
             />
-            <div class="text-sm">
+            <div>
               <Thumbwheel
                 v-model="cfg"
-                label="CFG / Guidance scale"
+                label="CFG"
                 :min="CFG_MIN"
                 :max="CFG_MAX"
                 :step="CFG_STEP"
                 @update:model-value="cfgTouched = true"
               />
-              <p class="mt-1 text-[11px] text-zinc-500">{{ ltxVideo ? 'Default 3.5 for PinkCherry' : (turbo ? 'Default 1.5 with Turbo LoRA' : 'Default 4.0 with High-Fidelity') }}.</p>
+              <p class="mt-1 text-[11px] text-zinc-500">{{ ltxVideo ? 'Default 3.5' : (turbo ? 'Default 1.5' : 'Default 4.0') }}</p>
             </div>
           </div>
           <label class="block text-sm">
@@ -1436,7 +1429,6 @@
             <DurationField
               v-model="extendDuration"
               label="Extension duration"
-              hint="Tap the digits to type. Hover and scroll ±0.1s, Shift-scroll ±1s."
             />
             <LoraSelect
               v-model="extendLoraStack"
@@ -2424,14 +2416,6 @@ const imageAspects = computed(() => {
     { id: '1:1' as const, label: '1:1 Square', hint: generate ? '1024 × 1024' : 'Fill extra edges — no stretch' }
   ]
 })
-const imageAspectHelp = computed(() => {
-  if (studioMode.value === 'editv2' && v2Mode.value === 'generate') {
-    const size = generateSizeForAspect(aspect.value)
-    return `Empty canvas ${size.width} × ${size.height}. Nothing is stretched.`
-  }
-  if (aspect.value === 'auto') return 'Output keeps the still’s aspect ratio. No padding.'
-  return 'The still stays as-is. New edges are generated to fill the frame — no squish or stretch.'
-})
 const imageFillWithoutPrompt = computed(() => (
   aspect.value !== 'auto'
   && (studioMode.value === 'edit' || (studioMode.value === 'editv2' && v2Mode.value !== 'generate'))