@pascal-app/editor 1.0.0-beta.5 → 1.0.1

package/src/components/ui/command-palette/editor-commands.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import type { AnyNodeId } from '@pascal-app/core'
-import { DEFAULT_LEVEL_HEIGHT, LevelNode, useScene } from '@pascal-app/core'
+import { DEFAULT_LEVEL_HEIGHT, LevelNode, type UnitNode, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import {
   AppWindow,
@@ -15,6 +15,7 @@ import {
   EyeOff,
   FileJson,
   Grid3X3,
+  Group,
   Hexagon,
   Layers,
   Map,
@@ -39,6 +40,7 @@ import {
 import { useEffect } from 'react'
 import { getHistoryCommandState, runRedo, runUndo } from '../../../lib/history'
 import { deleteLevelWithFallbackSelection } from '../../../lib/level-selection'
+import { createUnitInBuilding, enterUnitFocus, leaveUnitFocus } from '../../../lib/units'
 import { useCommandRegistry } from '../../../store/use-command-registry'
 import type { StructureTool } from '../../../store/use-editor'
 import useEditor from '../../../store/use-editor'
@@ -49,28 +51,39 @@ export function EditorCommands() {
   const { navigateTo, setInputValue, setOpen } = useCommandPalette()
 
   const setPhase = useEditor((s) => s.setPhase)
-  const setMode = useEditor((s) => s.setMode)
-  const setTool = useEditor((s) => s.setTool)
+  const armToolMode = useEditor((s) => s.armToolMode)
+  const armMaterialPaint = useEditor((s) => s.armMaterialPaint)
   const setStructureLayer = useEditor((s) => s.setStructureLayer)
-  const primeMaterialPaintFromSelection = useEditor((s) => s.primeMaterialPaintFromSelection)
   const isPreviewMode = useEditor((s) => s.isPreviewMode)
   const setPreviewMode = useEditor((s) => s.setPreviewMode)
 
   const exportScene = useViewer((s) => s.exportScene)
+  // Focusable units are listed one command each; the key changes only when a
+  // unit is added, removed or renamed.
+  const unitListKey = useScene((s) =>
+    Object.values(s.nodes)
+      .filter((n): n is UnitNode => n.type === 'unit')
+      .map((n) => `${n.id}:${n.name ?? ''}`)
+      .join('|'),
+  )
 
   // Re-register when exportScene availability changes (it's a conditional action)
   useEffect(() => {
+    void unitListKey
     const run = (fn: () => void) => {
       fn()
       setOpen(false)
     }
+    const focusableUnits = Object.values(useScene.getState().nodes).filter(
+      (n): n is UnitNode => n.type === 'unit',
+    )
 
     const activateTool = (tool: StructureTool) => {
       run(() => {
         setPhase('structure')
-        setMode('build')
         if (tool === 'zone') setStructureLayer('zones')
-        setTool(tool)
+        else setStructureLayer('elements')
+        armToolMode({ mode: 'build', tool })
       })
     }
 
@@ -163,10 +176,9 @@ export function EditorCommands() {
         shortcut: ['P'],
         execute: () =>
           run(() => {
-            primeMaterialPaintFromSelection()
             setPhase('structure')
             setStructureLayer('elements')
-            setMode('material-paint')
+            armMaterialPaint()
           }),
       },
       {
@@ -176,9 +188,8 @@ export function EditorCommands() {
         icon: <Mountain className="h-4 w-4" />,
         keywords: ['terrain', 'ground', 'elevation', 'sculpt', 'hill', 'slope', 'grade', 'dig'],
         shortcut: ['G'],
-        // No `setPhase`: `setMode` moves to the site phase itself, and doing it
-        // here would set the phase twice with a mode reset in between.
-        execute: () => run(() => setMode('terrain-sculpt')),
+        // The ToolMode transition moves to the site phase itself.
+        execute: () => run(() => armToolMode({ mode: 'terrain-sculpt' })),
       },
 
       // ── Levels ───────────────────────────────────────────────────────────
@@ -252,6 +263,44 @@ export function EditorCommands() {
           }),
       },
 
+      // ── Units ────────────────────────────────────────────────────────────
+      {
+        id: 'editor.unit.new',
+        label: 'New unit',
+        group: 'Units',
+        icon: <Group className="h-4 w-4" />,
+        keywords: ['unit', 'apartment', 'hotel', 'room', 'add', 'create', 'new'],
+        when: () => Object.values(useScene.getState().nodes).some((n) => n.type === 'building'),
+        execute: () =>
+          run(() => {
+            const { nodes } = useScene.getState()
+            const selectedBuildingId = useViewer.getState().selection.buildingId
+            const building =
+              (selectedBuildingId ? nodes[selectedBuildingId] : undefined) ??
+              Object.values(nodes).find((n) => n.type === 'building')
+            if (building?.type !== 'building') return
+            createUnitInBuilding(building.id)
+          }),
+      },
+      ...focusableUnits.map((unit) => ({
+        id: `editor.unit.focus.${unit.id}`,
+        label: `Focus unit: ${unit.name || 'Unit'}`,
+        group: 'Units',
+        icon: <Group className="h-4 w-4" />,
+        keywords: ['unit', 'focus', 'apartment', unit.name || 'Unit'],
+        when: () => useViewer.getState().focusedUnitId !== unit.id,
+        execute: () => run(() => enterUnitFocus(unit.id)),
+      })),
+      {
+        id: 'editor.unit.exit-focus',
+        label: 'Exit unit focus',
+        group: 'Units',
+        icon: <Group className="h-4 w-4" />,
+        keywords: ['unit', 'focus', 'exit', 'leave', 'apartment'],
+        when: () => !!useViewer.getState().focusedUnitId,
+        execute: () => run(() => leaveUnitFocus()),
+      },
+
       // ── Viewer Controls ──────────────────────────────────────────────────
       {
         id: 'editor.viewer.wall-mode',
@@ -428,12 +477,13 @@ export function EditorCommands() {
     setInputValue,
     setOpen,
     setPhase,
-    setMode,
-    setTool,
+    armToolMode,
+    armMaterialPaint,
     setStructureLayer,
     isPreviewMode,
     setPreviewMode,
     exportScene,
+    unitListKey,
   ])
 
   return null

package/src/components/ui/command-palette/index.tsx

@@ -2,7 +2,7 @@
 
 import type { AnyNodeId, LevelNode } from '@pascal-app/core'
 import { useScene } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
+import { markPerfAction, useViewer } from '@pascal-app/viewer'
 import { Command, useCommandState } from 'cmdk'
 import { ChevronRight, Search } from 'lucide-react'
 import type { ReactNode } from 'react'
@@ -408,7 +408,12 @@ export function CommandPalette({ emptyAction }: { emptyAction?: CommandPaletteEm
                       key={level.id}
                       label={getLevelDisplayName(level)}
                       onSelect={() =>
-                        run(() => useViewer.getState().setSelection({ levelId: level.id }))
+                        run(() => {
+                          if (level.id !== useViewer.getState().selection.levelId) {
+                            markPerfAction('level-switch', level.id)
+                          }
+                          useViewer.getState().setSelection({ levelId: level.id })
+                        })
                       }
                     />
                   ))}

package/src/components/ui/controls/material-paint-panel.tsx

@@ -35,7 +35,7 @@ export type MaterialPaintPanelProps = {
 export function MaterialPaintPanel({ onCreateMaterialRequest }: MaterialPaintPanelProps) {
   const activePaintMaterial = useEditor((state) => state.activePaintMaterial)
   const activePaintTarget = useEditor((state) => state.activePaintTarget)
-  const setActivePaintMaterial = useEditor((state) => state.setActivePaintMaterial)
+  const armMaterialPaint = useEditor((state) => state.armMaterialPaint)
   const setActivePaintTarget = useEditor((state) => state.setActivePaintTarget)
   const paintEraser = useEditor((state) => state.paintEraser)
   const setPaintEraser = useEditor((state) => state.setPaintEraser)
@@ -81,7 +81,7 @@ export function MaterialPaintPanel({ onCreateMaterialRequest }: MaterialPaintPan
         },
       },
     })
-    setActivePaintMaterial({ materialPreset: toSceneMaterialRef(id), sourceTarget: activePaintTarget })
+    armMaterialPaint({ materialPreset: toSceneMaterialRef(id), sourceTarget: activePaintTarget })
     setAutoEditMaterialId(id)
   }
 
@@ -112,11 +112,13 @@ export function MaterialPaintPanel({ onCreateMaterialRequest }: MaterialPaintPan
       </div>
 
       {/* Scrolls: category tabs (fixed inside) + catalog grid (the scroll). */}
-      <div className="min-h-0 flex-1">
+      {/* A stable hook for host-app onboarding to point at. Static, and read
+          only from outside: nothing here depends on it. */}
+      <div className="min-h-0 flex-1" data-guide-target="paint-material">
         <MaterialPicker
           onCreateMaterialRequest={onCreateMaterialRequest}
           onSelectMaterialPreset={(materialPreset) => {
-            setActivePaintMaterial({ materialPreset, sourceTarget: activePaintTarget })
+            armMaterialPaint({ materialPreset, sourceTarget: activePaintTarget })
           }}
           selectedMaterialPreset={activePaintMaterial?.materialPreset}
         />

package/src/components/ui/controls/material-picker.tsx

@@ -17,7 +17,7 @@ import { Plus } from 'lucide-react'
 import { useEffect, useMemo, useState, useSyncExternalStore } from 'react'
 import { triggerSFX } from '../../../lib/sfx-bus'
 
-export type MaterialSourceFilter = 'all' | MaterialSource
+export type MaterialSourceFilter = MaterialSource
 
 export type MaterialPickerProps = {
   selectedMaterialPreset?: string
@@ -28,8 +28,9 @@ export type MaterialPickerProps = {
   onCreateMaterialRequest?: () => void
 }
 
+// No 'All': the browse surfaces (Items / Rooms / Build) dropped it and default
+// to the Pascal library — the combined list buried the curated set.
 const SOURCE_FILTERS: { id: MaterialSourceFilter; label: string }[] = [
-  { id: 'all', label: 'All' },
   { id: 'pascal', label: 'Pascal' },
   { id: 'mine', label: 'Mine' },
   { id: 'workspace', label: 'Workspace' },
@@ -41,7 +42,6 @@ function getCategoryLabel(category: (typeof MATERIAL_CATEGORIES)[number]) {
 }
 
 function filterBySource(items: MaterialCatalogItem[], filter: MaterialSourceFilter) {
-  if (filter === 'all') return items
   return items.filter((item) => (item.source ?? 'pascal') === filter)
 }
 
@@ -60,7 +60,7 @@ export function MaterialPicker({
   const [selectedCategory, setSelectedCategory] = useState<(typeof MATERIAL_CATEGORIES)[number]>(
     MATERIAL_CATEGORIES[0],
   )
-  const [sourceFilter, setSourceFilter] = useState<MaterialSourceFilter>('all')
+  const [sourceFilter, setSourceFilter] = useState<MaterialSourceFilter>('pascal')
   // Version counter so host registrations/unregistrations re-render the picker.
   const libraryVersion = useSyncExternalStore(
     subscribeLibraryMaterials,

package/src/components/ui/controls/metric-control.tsx

@@ -2,11 +2,7 @@
 
 import { useScene } from '@pascal-app/core'
 import { useCallback, useEffect, useRef, useState } from 'react'
-import {
-  lingoUnitSpec,
-  measurementHint,
-  parseMeasurement,
-} from '../../../lib/measurement-parser'
+import { lingoUnitSpec, measurementHint, parseMeasurement } from '../../../lib/measurement-parser'
 import { useLinearDisplay } from '../../../lib/use-linear-display'
 import { cn } from '../../../lib/utils'
 
@@ -31,8 +27,8 @@ export function MetricControl({
   onCommit,
   min = Number.NEGATIVE_INFINITY,
   max = Number.POSITIVE_INFINITY,
-  precision = 2,
-  step = 1,
+  precision: storedPrecision = 2,
+  step: storedStep = 1,
   className,
   unit = '',
   restoreOnCommit = true,
@@ -40,9 +36,12 @@ export function MetricControl({
   const {
     isImperial,
     displayUnit,
+    parseUnit,
+    precision,
+    step,
     toDisplay: toDisplayValue,
     toStored: toStoredValue,
-  } = useLinearDisplay(unit, precision)
+  } = useLinearDisplay(unit, storedPrecision, storedStep)
 
   const clamp = useCallback(
     (val: number) => {
@@ -110,7 +109,14 @@ export function MetricControl({
 
     container.addEventListener('wheel', handleWheel, { passive: false })
     return () => container.removeEventListener('wheel', handleWheel)
-  }, [isEditing, step, clamp, applyCommittedValue, toStoredValue, roundStoredValueForDisplayPrecision])
+  }, [
+    isEditing,
+    step,
+    clamp,
+    applyCommittedValue,
+    toStoredValue,
+    roundStoredValueForDisplayPrecision,
+  ])
 
   useEffect(() => {
     if (!isHovered || isEditing) return
@@ -226,7 +232,7 @@ export function MetricControl({
     const spec = lingoUnitSpec(unit)
     let stored = spec
       ? parseMeasurement(inputValue, spec, {
-          bareUnit: isImperial ? 'ft' : spec.unitId,
+          bareUnit: parseUnit ?? spec.unitId,
           system: isImperial ? 'us' : 'metric',
         })
       : null
@@ -244,6 +250,7 @@ export function MetricControl({
     inputValue,
     unit,
     isImperial,
+    parseUnit,
     applyCommittedValue,
     clamp,
     toStoredValue,
@@ -256,9 +263,9 @@ export function MetricControl({
   const hint =
     isEditing && spec
       ? measurementHint(inputValue, spec, {
-          bareUnit: isImperial ? 'ft' : spec.unitId,
+          bareUnit: parseUnit ?? spec.unitId,
           system: isImperial ? 'us' : 'metric',
-          displayUnit: isImperial ? 'ft' : spec.unitId,
+          displayUnit: parseUnit ?? spec.unitId,
           precision,
           clamp,
         })
@@ -287,7 +294,16 @@ export function MetricControl({
         setInputValue(toDisplayValue(newV).toFixed(precision))
       }
     },
-    [submitValue, value, toDisplayValue, precision, step, clamp, applyCommittedValue, toStoredValue],
+    [
+      submitValue,
+      value,
+      toDisplayValue,
+      precision,
+      step,
+      clamp,
+      applyCommittedValue,
+      toStoredValue,
+    ],
   )
 
   return (

package/src/components/ui/controls/scene-material-list.tsx

@@ -33,7 +33,7 @@ export function SceneMaterialList({ autoEditId }: { autoEditId?: SceneMaterialId
   const removeSceneMaterial = useScene((state) => state.removeSceneMaterial)
   const activePaintTarget = useEditor((state) => state.activePaintTarget)
   const activePaintRef = useEditor((state) => state.activePaintMaterial?.materialPreset)
-  const setActivePaintMaterial = useEditor((state) => state.setActivePaintMaterial)
+  const armMaterialPaint = useEditor((state) => state.armMaterialPaint)
 
   const materialEntries = useMemo(
     () => Object.entries(materials) as [SceneMaterialId, SceneMaterial][],
@@ -76,7 +76,7 @@ export function SceneMaterialList({ autoEditId }: { autoEditId?: SceneMaterialId
           key={id}
           removeSceneMaterial={removeSceneMaterial}
           sceneMaterial={sceneMaterial}
-          setActivePaintMaterial={setActivePaintMaterial}
+          armMaterialPaint={armMaterialPaint}
           updateSceneMaterial={updateSceneMaterial}
           usageCount={usageCounts.get(id) ?? 0}
         />
@@ -95,7 +95,7 @@ function SceneMaterialRow({
   addSceneMaterial,
   updateSceneMaterial,
   removeSceneMaterial,
-  setActivePaintMaterial,
+  armMaterialPaint,
 }: {
   id: SceneMaterialId
   sceneMaterial: SceneMaterial
@@ -106,7 +106,7 @@ function SceneMaterialRow({
   addSceneMaterial: ReturnType<typeof useScene.getState>['addSceneMaterial']
   updateSceneMaterial: ReturnType<typeof useScene.getState>['updateSceneMaterial']
   removeSceneMaterial: ReturnType<typeof useScene.getState>['removeSceneMaterial']
-  setActivePaintMaterial: ReturnType<typeof useEditor.getState>['setActivePaintMaterial']
+  armMaterialPaint: ReturnType<typeof useEditor.getState>['armMaterialPaint']
 }) {
   // A freshly-created material (via "+ Custom") mounts with its editor open.
   const [isEditingMaterial, setIsEditingMaterial] = useState(autoEdit)
@@ -141,6 +141,7 @@ function SceneMaterialRow({
       className={`rounded-md border border-border/60 bg-background/40 p-2 ${
         isActive ? 'ring-1 ring-primary ring-inset' : ''
       }`}
+      data-testid={`scene-material-row-${id}`}
     >
       <div className="flex items-center gap-2">
         <span
@@ -174,7 +175,7 @@ function SceneMaterialRow({
               <Button
                 aria-label="Paint with"
                 onClick={() =>
-                  setActivePaintMaterial({
+                  armMaterialPaint({
                     materialPreset: toSceneMaterialRef(id),
                     sourceTarget: activePaintTarget,
                   })

package/src/components/ui/controls/segmented-control.tsx

@@ -7,6 +7,8 @@ interface SegmentedControlProps<T extends string> {
   onChange: (value: T) => void
   options: { label: React.ReactNode; value: T }[]
   className?: string
+  disabled?: boolean
+  mixed?: boolean
 }
 
 export function SegmentedControl<T extends string>({
@@ -14,16 +16,19 @@ export function SegmentedControl<T extends string>({
   onChange,
   options,
   className,
+  disabled = false,
+  mixed = false,
 }: SegmentedControlProps<T>) {
   return (
     <div
       className={cn(
         'flex h-9 w-full items-center rounded-lg border border-border/50 bg-[#2C2C2E] p-[3px]',
+        disabled && 'opacity-60',
         className,
       )}
     >
       {options.map((option) => {
-        const isSelected = value === option.value
+        const isSelected = !mixed && value === option.value
         return (
           <button
             className={cn(
@@ -31,7 +36,9 @@ export function SegmentedControl<T extends string>({
               isSelected
                 ? 'bg-[#3e3e3e] text-foreground shadow-sm ring-1 ring-border/50'
                 : 'text-muted-foreground hover:bg-white/5 hover:text-foreground',
+              disabled && 'cursor-not-allowed hover:bg-transparent hover:text-muted-foreground',
             )}
+            disabled={disabled}
             key={option.value}
             onClick={() => onChange(option.value)}
             type="button"

package/src/components/ui/controls/slider-control.tsx

@@ -2,11 +2,7 @@
 
 import { useScene } from '@pascal-app/core'
 import { useCallback, useEffect, useRef, useState } from 'react'
-import {
-  lingoUnitSpec,
-  measurementHint,
-  parseMeasurement,
-} from '../../../lib/measurement-parser'
+import { lingoUnitSpec, measurementHint, parseMeasurement } from '../../../lib/measurement-parser'
 import { useLinearDisplay } from '../../../lib/use-linear-display'
 import { cn } from '../../../lib/utils'
 
@@ -22,6 +18,7 @@ interface SliderControlProps {
   className?: string
   unit?: string
   restoreOnCommit?: boolean
+  mixed?: boolean
 }
 
 function stepPrecision(s: number): number {
@@ -59,23 +56,25 @@ export function SliderControl({
   onCommit,
   min = Number.NEGATIVE_INFINITY,
   max = Number.POSITIVE_INFINITY,
-  precision = 0,
-  step = 1,
+  precision: storedPrecision = 0,
+  step: storedStep = 1,
   className,
   unit = '',
   restoreOnCommit = true,
+  mixed = false,
 }: SliderControlProps) {
-  // Display/storage conversion so the value honors the metric/imperial toggle.
-  // `value`, `onChange`, `onCommit`, `min`/`max`/`clamp` are always in the
-  // stored unit (meters for `unit === 'm'`); the step, drag deltas, text field
-  // and rendered number are in the DISPLAY unit (feet when imperial). For
-  // metric and non-length units these conversions are the identity.
-  const { isImperial, displayUnit, toDisplay, toStored } = useLinearDisplay(unit, precision)
+  // Values and bounds stay in meters; gestures and input use the displayed unit.
+  const { isImperial, displayUnit, parseUnit, precision, step, toDisplay, toStored } =
+    useLinearDisplay(unit, storedPrecision, storedStep)
 
   const [isEditing, setIsEditing] = useState(false)
   const [isDragging, setIsDragging] = useState(false)
   const [isHovered, setIsHovered] = useState(false)
   const [inputValue, setInputValue] = useState(toDisplay(value).toFixed(precision))
+  // Live readout while dragging. Multi-edit previews write live overrides
+  // instead of the scene, so `value` would otherwise stay frozen even though
+  // the meshes are moving.
+  const [dragDisplay, setDragDisplay] = useState<number | null>(null)
 
   const dragRef = useRef<{
     // Original value at drag start — preserved across modifier re-anchors so
@@ -89,8 +88,9 @@ export function SliderControl({
     stepMultiplier: number
   } | null>(null)
   const labelRef = useRef<HTMLDivElement>(null)
-  const valueRef = useRef(value)
-  valueRef.current = value
+  const shown = dragDisplay ?? value
+  const valueRef = useRef(shown)
+  valueRef.current = shown
 
   const clamp = useCallback((val: number) => Math.min(Math.max(val, min), max), [min, max])
   // Apply a signed display-unit delta to a stored value, rounding in the
@@ -99,7 +99,9 @@ export function SliderControl({
     (storedValue: number, displayDelta: number, displayStep: number) =>
       clamp(
         toStored(
-          Number.parseFloat((toDisplay(storedValue) + displayDelta).toFixed(stepPrecision(displayStep))),
+          Number.parseFloat(
+            (toDisplay(storedValue) + displayDelta).toFixed(stepPrecision(displayStep)),
+          ),
         ),
       ),
     [clamp, toDisplay, toStored],
@@ -185,6 +187,7 @@ export function SliderControl({
       const newValue = applyDisplayDelta(anchorValue, (dx / 4) * s, s)
       if (newValue !== valueRef.current) {
         valueRef.current = newValue
+        setDragDisplay(newValue)
         onChange(newValue)
       }
     },
@@ -209,6 +212,7 @@ export function SliderControl({
         useScene.temporal.getState().resume()
         onCommit?.(finalVal)
       }
+      setDragDisplay(null)
     },
     [onChange, onCommit, restoreOnCommit],
   )
@@ -222,7 +226,7 @@ export function SliderControl({
     const spec = lingoUnitSpec(unit)
     let stored = spec
       ? parseMeasurement(inputValue, spec, {
-          bareUnit: isImperial ? 'ft' : spec.unitId,
+          bareUnit: parseUnit ?? spec.unitId,
           system: isImperial ? 'us' : 'metric',
         })
       : null
@@ -239,15 +243,27 @@ export function SliderControl({
       onCommit?.(nextValue)
     }
     setIsEditing(false)
-  }, [inputValue, unit, isImperial, onChange, onCommit, clamp, precision, value, toDisplay, toStored])
+  }, [
+    inputValue,
+    unit,
+    isImperial,
+    parseUnit,
+    onChange,
+    onCommit,
+    clamp,
+    precision,
+    value,
+    toDisplay,
+    toStored,
+  ])
 
   const spec = lingoUnitSpec(unit)
   const hint =
     isEditing && spec
       ? measurementHint(inputValue, spec, {
-          bareUnit: isImperial ? 'ft' : spec.unitId,
+          bareUnit: parseUnit ?? spec.unitId,
           system: isImperial ? 'us' : 'metric',
-          displayUnit: isImperial ? 'ft' : spec.unitId,
+          displayUnit: parseUnit ?? spec.unitId,
           precision,
           clamp,
         })
@@ -272,7 +288,7 @@ export function SliderControl({
     [submitValue, value, precision, step, applyDisplayDelta, onChange, toDisplay],
   )
 
-  const displayValue = toDisplay(value)
+  const displayValue = toDisplay(shown)
 
   return (
     <div
@@ -340,6 +356,13 @@ export function SliderControl({
               </span>
             )}
           </>
+        ) : mixed && !isDragging ? (
+          <div
+            className="flex cursor-text items-center text-muted-foreground transition-colors hover:text-foreground"
+            onClick={handleValueClick}
+          >
+            <span className="font-mono tracking-tight">Mixed</span>
+          </div>
         ) : (
           <div
             className="flex cursor-text items-center text-foreground/60 transition-colors hover:text-foreground"

package/src/components/ui/controls/toggle-control.tsx

@@ -8,9 +8,16 @@ interface ToggleControlProps {
   checked: boolean
   onChange: (checked: boolean) => void
   className?: string
+  mixed?: boolean
 }
 
-export function ToggleControl({ label, checked, onChange, className }: ToggleControlProps) {
+export function ToggleControl({
+  label,
+  checked,
+  onChange,
+  className,
+  mixed = false,
+}: ToggleControlProps) {
   return (
     <div
       className={cn(
@@ -26,12 +33,18 @@ export function ToggleControl({ label, checked, onChange, className }: ToggleCon
       <div
         className={cn(
           'flex h-5 w-5 items-center justify-center rounded-[4px] border transition-all duration-200',
-          checked
-            ? 'border-primary bg-primary text-primary-foreground'
-            : 'border-border bg-black/20 text-transparent group-hover:border-muted-foreground',
+          mixed
+            ? 'border-muted-foreground/70 bg-black/20 text-muted-foreground'
+            : checked
+              ? 'border-primary bg-primary text-primary-foreground'
+              : 'border-border bg-black/20 text-transparent group-hover:border-muted-foreground',
         )}
       >
-        <Check className="h-3.5 w-3.5" strokeWidth={3} />
+        {mixed ? (
+          <div className="h-0.5 w-2.5 rounded-full bg-current" />
+        ) : (
+          <Check className="h-3.5 w-3.5" strokeWidth={3} />
+        )}
       </div>
     </div>
   )