diff --git a/AGENTS.md b/AGENTS.md
index 01f407bd9..c0ece2d1f 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -268,6 +268,7 @@ Self-review checklist:
 - `src/components/Shell/**` is for app shell chrome and global app services rendered as components (menu bar, toast viewport, update/status chrome). Shell components may use app shell/editor stores.
 - `src/components/properties/**`, `src/components/chat/**`, `src/components/LayerTree/**`, `src/components/Toolbar/**`, and similar folders are feature/domain component namespaces. Keep feature-specific controls there unless they are genuinely reusable UI primitives.
 - Treat existing root-level picker/input/control components as migration candidates when touched; do not expand that pattern.
+- Property-panel composition uses `PanelGrid`, `PanelFieldGroup`, `PanelItemRow`, and `PropertyItemRow`; do not reintroduce generic row wrappers such as the removed `PanelRow`. Variable-capable fields compose `BindableValue` providers, and fill UIs compose `FillRoot` / `FillSwatch` with a consumer-owned popover rather than rebuilding a combined picker wrapper.
 - Test locators follow Playwright's user-facing priority: role/name, label, and text first. Multi-part components expose scoped `data-slot` anatomy; app concepts use semantic attributes such as `data-property`, `data-command`, and `data-node-id` when accessible identity is insufficient. Reserve `data-test-id` for rare integration boundaries such as the canvas/editor host, never add `testId`/`testHook` props, and do not manufacture globally unique compound IDs inside shared components.
 
 - Use reka-ui for UI components (Splitter, ContextMenu, DropdownMenu, etc.)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3dfa49884..b99e9b640 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,6 +24,7 @@
 - Add accessible color-channel sliders, binding-aware fill primitives, and keyboard-operable gradient stops while separating fill state from popover composition.
 - Rebuild Fill, Stroke, Effects, and Export controls with shared compact item rows, semantic actions, binding-aware paint fields, and reversible color-picker edits.
 - Finish the Design panel migration with compact labeled Typography, Variant, Mask, and Page controls plus semantic empty-section states.
+- Remove the deprecated `FillPickerRoot`, `useFillPicker()`, and `PanelRow` compatibility APIs after migrating consumers to the canonical fill and panel primitives.
 - Upgrade Vue SDK documentation with shared Tailwind demos, source-generated component API tables, and type-aware Twoslash examples in VitePress.
 - Add desktop image drag-and-drop into the Tauri app window.
 - Add open-document discovery for live CLI and MCP automation so agents can target the intended document and page.
diff --git a/packages/docs/.vitepress/sdk-sidebar.ts b/packages/docs/.vitepress/sdk-sidebar.ts
index aaf60872d..c0705b7db 100644
--- a/packages/docs/.vitepress/sdk-sidebar.ts
+++ b/packages/docs/.vitepress/sdk-sidebar.ts
@@ -17,7 +17,6 @@ const SDK_COMPONENT_PAGES = [
   { text: 'ChannelSlider', slug: 'channel-slider', canonical: true },
   { text: 'FillRoot', slug: 'fill-root', canonical: true },
   { text: 'FillSwatch', slug: 'fill-swatch', canonical: true },
-  { text: 'FillPickerRoot', slug: 'fill-picker-root', canonical: true },
   { text: 'FontPickerRoot', slug: 'font-picker-root' },
   { text: 'GradientEditorRoot', slug: 'gradient-editor-root' },
   { text: 'GradientEditorBar', slug: 'gradient-editor-bar' },
@@ -58,7 +57,6 @@ const SDK_ADVANCED_PAGES = [
   { text: 'useSceneComputed', slug: 'use-scene-computed' },
   { text: 'useColorVariableBinding', slug: 'use-color-variable-binding' },
   { text: 'useColorBindingProvider', slug: 'use-color-binding-provider', canonical: true },
-  { text: 'useFillPicker', slug: 'use-fill-picker', canonical: true },
   { text: 'useGradientStops', slug: 'use-gradient-stops' },
   { text: 'useFontPicker', slug: 'use-font-picker' },
   { text: 'usePropScrub', slug: 'use-prop-scrub' },
diff --git a/packages/docs/de/programmable/sdk/api/advanced/index.md b/packages/docs/de/programmable/sdk/api/advanced/index.md
index c152015e5..a4f8f438b 100644
--- a/packages/docs/de/programmable/sdk/api/advanced/index.md
+++ b/packages/docs/de/programmable/sdk/api/advanced/index.md
@@ -16,7 +16,6 @@ Diese APIs sind öffentlich, aber spezialisierter als die Haupt-Komponenten- und
 ## Picker, Variablen, Locale und Editor-Interna
 
 - [useColorVariableBinding](./use-color-variable-binding)
-- [useFillPicker](./use-fill-picker)
 - [useGradientStops](./use-gradient-stops)
 - [useFontPicker](./use-font-picker)
 - [useOkHCL](./use-okhcl)
diff --git a/packages/docs/de/programmable/sdk/api/advanced/use-color-variable-binding.md b/packages/docs/de/programmable/sdk/api/advanced/use-color-variable-binding.md
index 0f755c7e0..634ee81a9 100644
--- a/packages/docs/de/programmable/sdk/api/advanced/use-color-variable-binding.md
+++ b/packages/docs/de/programmable/sdk/api/advanced/use-color-variable-binding.md
@@ -22,4 +22,4 @@ const strokeBinding = useColorVariableBinding('strokes')
 
 - [useFillControls](../composables/use-fill-controls)
 - [useStrokeControls](../composables/use-stroke-controls)
-- [FillPickerRoot](../components/fill-picker-root)
+- [FillRoot](/programmable/sdk/api/components/fill-root)
diff --git a/packages/docs/de/programmable/sdk/api/advanced/use-fill-picker.md b/packages/docs/de/programmable/sdk/api/advanced/use-fill-picker.md
deleted file mode 100644
index 715e8c200..000000000
--- a/packages/docs/de/programmable/sdk/api/advanced/use-fill-picker.md
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: useFillPicker
-description: Niedrigstufen-Füllungs-Kategorie- und Konvertierungs-Hilfsmittel.
----
-
-# useFillPicker
-
-`useFillPicker(fill, onUpdate)` gibt abgeleiteten Füllungs-Kategorie-Zustand sowie Konvertierungs-Hilfsmittel zum Wechseln zwischen einfarbigen, Verlaufs- und Bildfüllungen zurück.
-
-Verwenden Sie es beim Erstellen benutzerdefinierter Füllungs-Picker über `FillPickerRoot` hinaus.
-
-## Verwandte APIs
-
-- [FillPickerRoot](../components/fill-picker-root)
-- [useFillControls](../composables/use-fill-controls)
-- [useGradientStops](./use-gradient-stops)
diff --git a/packages/docs/de/programmable/sdk/api/components/fill-picker-root.md b/packages/docs/de/programmable/sdk/api/components/fill-picker-root.md
deleted file mode 100644
index 5a664e80d..000000000
--- a/packages/docs/de/programmable/sdk/api/components/fill-picker-root.md
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: FillPickerRoot
-description: Headless popover-basiertes Füllungsauswahl-Primitiv.
----
-
-# FillPickerRoot
-
-`FillPickerRoot` ist ein headless popover-basiertes Füllungsauswahl-Primitiv für einfarbige, Verlaufs- und Bildfüllungen.
-
-## Props
-
-<SdkPropsTable
-  :rows="[
-    { name: 'fill', type: 'Fill', description: 'Aktueller Füllungswert.', required: true },
-    { name: 'contentClass', type: 'string | undefined', description: 'Optionale Klasse für den Popover-Inhalt.' },
-    { name: 'swatchClass', type: 'string | undefined', description: 'Optionale Klasse für die Standard-Trigger-Schaltfläche.' }
-  ]"
-/>
-
-## Ereignisse
-
-<SdkEventsTable
-  :rows="[
-    { name: 'update', payload: 'fill: Fill', description: 'Ausgelöst, wenn sich die Füllung ändert.' }
-  ]"
-/>
-
-## Slots
-
-<SdkSlotsTable
-  :rows="[
-    { name: 'trigger', props: 'Farbmuster-Stil', description: 'Benutzerdefinierter Trigger mit Farbmuster-Hintergrundstil.' },
-    { name: 'default', props: 'Füllungszustand + Konvertierungs-Hilfsmittel', description: 'Haupt-Füllungs-Editor-Inhalt.' }
-  ]"
-/>
-
-### Trigger-Slot-Props
-
-```ts
-{
-  style: Record<string, string>
-}
-```
-
-### Standard-Slot-Props
-
-```ts
-{
-  fill: Fill
-  category: 'SOLID' | 'GRADIENT' | 'IMAGE'
-  toSolid: () => void
-  toGradient: () => void
-  toImage: () => void
-  update: (fill: Fill) => void
-}
-```
-
-## Beispiel
-
-```vue
-<FillPickerRoot :fill="fill" @update="fill = $event">
-  <template #default="{ fill, category, toSolid, toGradient, update }">
-    <div>{{ category }}</div>
-    <button @click="toSolid">Einfarbig</button>
-    <button @click="toGradient">Verlauf</button>
-    <MyFillEditor :fill="fill" @change="update" />
-  </template>
-</FillPickerRoot>
-```
-
-## Verwandte APIs
-
-- [GradientEditorRoot](./gradient-editor-root)
diff --git a/packages/docs/de/programmable/sdk/api/components/index.md b/packages/docs/de/programmable/sdk/api/components/index.md
index 62d8e31b1..37c9b8f28 100644
--- a/packages/docs/de/programmable/sdk/api/components/index.md
+++ b/packages/docs/de/programmable/sdk/api/components/index.md
@@ -35,7 +35,6 @@ description: Komponentenreferenz für headless Vue-Primitive in @open-pencil/vue
 <SdkCardGroup>
   <SdkCard title="ColorPickerRoot" to="/programmable/sdk/api/components/color-picker-root" description="Popover-basiertes Farbauswahl-Primitiv." />
   <SdkCard title="ColorInputRoot" to="/programmable/sdk/api/components/color-input-root" description="Headless Farb-Eingabe-Hilfsmittel." />
-  <SdkCard title="FillPickerRoot" to="/programmable/sdk/api/components/fill-picker-root" description="Popover-basiertes Füllungsauswahl-Primitiv." />
   <SdkCard title="FontPickerRoot" to="/programmable/sdk/api/components/font-picker-root" description="Durchsuchbares Schriftauswahl-Primitiv." />
   <SdkCard title="GradientEditorRoot" to="/programmable/sdk/api/components/gradient-editor-root" description="Wurzel-Primitiv für Verlaufsbearbeitung." />
   <SdkCard title="GradientEditorBar" to="/programmable/sdk/api/components/gradient-editor-bar" description="Ziehbare Verlaufsbalken-Primitiv." />
diff --git a/packages/docs/es/programmable/sdk/api/advanced/index.md b/packages/docs/es/programmable/sdk/api/advanced/index.md
index ac6cd7f35..80bb9693c 100644
--- a/packages/docs/es/programmable/sdk/api/advanced/index.md
+++ b/packages/docs/es/programmable/sdk/api/advanced/index.md
@@ -16,7 +16,6 @@ Estas APIs son públicas, pero son más especializadas que la superficie princip
 ## Selector, variables, idioma e internos del editor
 
 - [useColorVariableBinding](./use-color-variable-binding)
-- [useFillPicker](./use-fill-picker)
 - [useGradientStops](./use-gradient-stops)
 - [useFontPicker](./use-font-picker)
 - [useOkHCL](./use-okhcl)
diff --git a/packages/docs/es/programmable/sdk/api/advanced/use-color-variable-binding.md b/packages/docs/es/programmable/sdk/api/advanced/use-color-variable-binding.md
index 9996f4467..f96f26fb0 100644
--- a/packages/docs/es/programmable/sdk/api/advanced/use-color-variable-binding.md
+++ b/packages/docs/es/programmable/sdk/api/advanced/use-color-variable-binding.md
@@ -22,4 +22,4 @@ const strokeBinding = useColorVariableBinding('strokes')
 
 - [useFillControls](../composables/use-fill-controls)
 - [useStrokeControls](../composables/use-stroke-controls)
-- [FillPickerRoot](../components/fill-picker-root)
+- [FillRoot](/programmable/sdk/api/components/fill-root)
diff --git a/packages/docs/es/programmable/sdk/api/advanced/use-fill-picker.md b/packages/docs/es/programmable/sdk/api/advanced/use-fill-picker.md
deleted file mode 100644
index d608c0157..000000000
--- a/packages/docs/es/programmable/sdk/api/advanced/use-fill-picker.md
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: useFillPicker
-description: Helper de bajo nivel para la categoría de relleno y la conversión.
----
-
-# useFillPicker
-
-`useFillPicker(fill, onUpdate)` devuelve el estado derivado de la categoría del relleno más helpers de conversión para cambiar entre rellenos sólidos, degradados e imágenes.
-
-Úsalo cuando construyas selectores de relleno personalizados más allá de `FillPickerRoot`.
-
-## APIs relacionadas
-
-- [FillPickerRoot](../components/fill-picker-root)
-- [useFillControls](../composables/use-fill-controls)
-- [useGradientStops](./use-gradient-stops)
diff --git a/packages/docs/es/programmable/sdk/api/components/fill-picker-root.md b/packages/docs/es/programmable/sdk/api/components/fill-picker-root.md
deleted file mode 100644
index 5b798d2a9..000000000
--- a/packages/docs/es/programmable/sdk/api/components/fill-picker-root.md
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: FillPickerRoot
-description: Primitivo headless de selector de relleno basado en popover.
----
-
-# FillPickerRoot
-
-`FillPickerRoot` es un primitivo headless de selector de relleno basado en popover para rellenos sólidos, degradados e imágenes.
-
-## Props
-
-<SdkPropsTable
-  :rows="[
-    { name: 'fill', type: 'Fill', description: 'Valor de relleno actual.', required: true },
-    { name: 'contentClass', type: 'string | undefined', description: 'Clase opcional para el contenido del popover.' },
-    { name: 'swatchClass', type: 'string | undefined', description: 'Clase opcional para el botón trigger por defecto.' }
-  ]"
-/>
-
-## Eventos
-
-<SdkEventsTable
-  :rows="[
-    { name: 'update', payload: 'fill: Fill', description: 'Emitido cuando el relleno cambia.' }
-  ]"
-/>
-
-## Slots
-
-<SdkSlotsTable
-  :rows="[
-    { name: 'trigger', props: 'swatch style', description: 'Trigger personalizado con estilo de fondo de muestra.' },
-    { name: 'default', props: 'fill state + conversion helpers', description: 'Contenido principal del editor de relleno.' }
-  ]"
-/>
-
-### Props del slot trigger
-
-```ts
-{
-  style: Record<string, string>
-}
-```
-
-### Props del slot default
-
-```ts
-{
-  fill: Fill
-  category: 'SOLID' | 'GRADIENT' | 'IMAGE'
-  toSolid: () => void
-  toGradient: () => void
-  toImage: () => void
-  update: (fill: Fill) => void
-}
-```
-
-## Ejemplo
-
-```vue
-<FillPickerRoot :fill="fill" @update="fill = $event">
-  <template #default="{ fill, category, toSolid, toGradient, update }">
-    <div>{{ category }}</div>
-    <button @click="toSolid">Sólido</button>
-    <button @click="toGradient">Degradado</button>
-    <MyFillEditor :fill="fill" @change="update" />
-  </template>
-</FillPickerRoot>
-```
-
-## APIs relacionadas
-
-- [GradientEditorRoot](./gradient-editor-root)
diff --git a/packages/docs/es/programmable/sdk/api/components/index.md b/packages/docs/es/programmable/sdk/api/components/index.md
index ea8a31a77..9527e6879 100644
--- a/packages/docs/es/programmable/sdk/api/components/index.md
+++ b/packages/docs/es/programmable/sdk/api/components/index.md
@@ -35,7 +35,6 @@ description: Referencia de componentes para los primitivos headless de Vue en @o
 <SdkCardGroup>
   <SdkCard title="ColorPickerRoot" to="/programmable/sdk/api/components/color-picker-root" description="Primitivo de selector de color basado en popover." />
   <SdkCard title="ColorInputRoot" to="/programmable/sdk/api/components/color-input-root" description="Helper headless de input de color." />
-  <SdkCard title="FillPickerRoot" to="/programmable/sdk/api/components/fill-picker-root" description="Primitivo de selector de relleno basado en popover." />
   <SdkCard title="FontPickerRoot" to="/programmable/sdk/api/components/font-picker-root" description="Primitivo de selector de fuente con búsqueda." />
   <SdkCard title="GradientEditorRoot" to="/programmable/sdk/api/components/gradient-editor-root" description="Primitivo raíz para la edición de degradados." />
   <SdkCard title="GradientEditorBar" to="/programmable/sdk/api/components/gradient-editor-bar" description="Primitivo de barra de degradado arrastrable." />
diff --git a/packages/docs/fr/programmable/sdk/api/advanced/index.md b/packages/docs/fr/programmable/sdk/api/advanced/index.md
index 0ade73ecf..766056f47 100644
--- a/packages/docs/fr/programmable/sdk/api/advanced/index.md
+++ b/packages/docs/fr/programmable/sdk/api/advanced/index.md
@@ -16,7 +16,6 @@ Ces API sont publiques, mais elles sont plus spécialisées que la surface princ
 ## Sélecteurs, variables, locale et internals d'éditeur
 
 - [useColorVariableBinding](./use-color-variable-binding)
-- [useFillPicker](./use-fill-picker)
 - [useGradientStops](./use-gradient-stops)
 - [useFontPicker](./use-font-picker)
 - [useOkHCL](./use-okhcl)
diff --git a/packages/docs/fr/programmable/sdk/api/advanced/use-color-variable-binding.md b/packages/docs/fr/programmable/sdk/api/advanced/use-color-variable-binding.md
index 601b14b21..ccb214ae9 100644
--- a/packages/docs/fr/programmable/sdk/api/advanced/use-color-variable-binding.md
+++ b/packages/docs/fr/programmable/sdk/api/advanced/use-color-variable-binding.md
@@ -22,4 +22,4 @@ const strokeBinding = useColorVariableBinding('strokes')
 
 - [useFillControls](../composables/use-fill-controls)
 - [useStrokeControls](../composables/use-stroke-controls)
-- [FillPickerRoot](../components/fill-picker-root)
+- [FillRoot](/programmable/sdk/api/components/fill-root)
diff --git a/packages/docs/fr/programmable/sdk/api/advanced/use-fill-picker.md b/packages/docs/fr/programmable/sdk/api/advanced/use-fill-picker.md
deleted file mode 100644
index 922f56f01..000000000
--- a/packages/docs/fr/programmable/sdk/api/advanced/use-fill-picker.md
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: useFillPicker
-description: Helper de bas niveau pour la catégorie de remplissage et la conversion.
----
-
-# useFillPicker
-
-`useFillPicker(fill, onUpdate)` retourne l'état de catégorie de remplissage dérivé ainsi que des helpers de conversion pour basculer entre les remplissages solides, dégradés et images.
-
-Utilisez-le pour construire des sélecteurs de remplissage personnalisés au-delà de `FillPickerRoot`.
-
-## API associées
-
-- [FillPickerRoot](../components/fill-picker-root)
-- [useFillControls](../composables/use-fill-controls)
-- [useGradientStops](./use-gradient-stops)
diff --git a/packages/docs/fr/programmable/sdk/api/components/fill-picker-root.md b/packages/docs/fr/programmable/sdk/api/components/fill-picker-root.md
deleted file mode 100644
index fe8140b63..000000000
--- a/packages/docs/fr/programmable/sdk/api/components/fill-picker-root.md
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: FillPickerRoot
-description: Primitive headless de sélecteur de remplissage basé sur un popover.
----
-
-# FillPickerRoot
-
-`FillPickerRoot` est une primitive headless de sélecteur de remplissage basé sur un popover pour les remplissages solides, dégradés et images.
-
-## Props
-
-<SdkPropsTable
-  :rows="[
-    { name: 'fill', type: 'Fill', description: 'Valeur de remplissage courante.', required: true },
-    { name: 'contentClass', type: 'string | undefined', description: 'Classe optionnelle pour le contenu du popover.' },
-    { name: 'swatchClass', type: 'string | undefined', description: 'Classe optionnelle pour le bouton déclencheur par défaut.' }
-  ]"
-/>
-
-## Événements
-
-<SdkEventsTable
-  :rows="[
-    { name: 'update', payload: 'fill: Fill', description: 'Émis quand le remplissage change.' }
-  ]"
-/>
-
-## Slots
-
-<SdkSlotsTable
-  :rows="[
-    { name: 'trigger', props: 'style de l\'échantillon', description: 'Déclencheur personnalisé avec le style de fond de l\'échantillon.' },
-    { name: 'default', props: 'état du remplissage + helpers de conversion', description: 'Contenu principal de l\'éditeur de remplissage.' }
-  ]"
-/>
-
-### Props du slot déclencheur
-
-```ts
-{
-  style: Record<string, string>
-}
-```
-
-### Props du slot par défaut
-
-```ts
-{
-  fill: Fill
-  category: 'SOLID' | 'GRADIENT' | 'IMAGE'
-  toSolid: () => void
-  toGradient: () => void
-  toImage: () => void
-  update: (fill: Fill) => void
-}
-```
-
-## Exemple
-
-```vue
-<FillPickerRoot :fill="fill" @update="fill = $event">
-  <template #default="{ fill, category, toSolid, toGradient, update }">
-    <div>{{ category }}</div>
-    <button @click="toSolid">Solide</button>
-    <button @click="toGradient">Dégradé</button>
-    <MyFillEditor :fill="fill" @change="update" />
-  </template>
-</FillPickerRoot>
-```
-
-## API associées
-
-- [GradientEditorRoot](./gradient-editor-root)
diff --git a/packages/docs/fr/programmable/sdk/api/components/index.md b/packages/docs/fr/programmable/sdk/api/components/index.md
index 7ab86816c..68d47eab9 100644
--- a/packages/docs/fr/programmable/sdk/api/components/index.md
+++ b/packages/docs/fr/programmable/sdk/api/components/index.md
@@ -35,7 +35,6 @@ description: Référence des composants pour les primitives Vue headless dans @o
 <SdkCardGroup>
   <SdkCard title="ColorPickerRoot" to="/programmable/sdk/api/components/color-picker-root" description="Primitive de sélecteur de couleur basé sur un popover." />
   <SdkCard title="ColorInputRoot" to="/programmable/sdk/api/components/color-input-root" description="Helper headless pour la saisie de couleur." />
-  <SdkCard title="FillPickerRoot" to="/programmable/sdk/api/components/fill-picker-root" description="Primitive de sélecteur de remplissage basé sur un popover." />
   <SdkCard title="FontPickerRoot" to="/programmable/sdk/api/components/font-picker-root" description="Primitive de sélecteur de police avec recherche." />
   <SdkCard title="GradientEditorRoot" to="/programmable/sdk/api/components/gradient-editor-root" description="Primitive racine pour l'édition de dégradés." />
   <SdkCard title="GradientEditorBar" to="/programmable/sdk/api/components/gradient-editor-bar" description="Primitive de barre de dégradé déplaçable." />
diff --git a/packages/docs/it/programmable/sdk/api/advanced/index.md b/packages/docs/it/programmable/sdk/api/advanced/index.md
index 7e0ef8722..b837baa8a 100644
--- a/packages/docs/it/programmable/sdk/api/advanced/index.md
+++ b/packages/docs/it/programmable/sdk/api/advanced/index.md
@@ -16,7 +16,6 @@ Queste API sono pubbliche, ma sono più specializzate rispetto alla superficie p
 ## Picker, variabili, locale e funzionamento interno dell'editor
 
 - [useColorVariableBinding](./use-color-variable-binding)
-- [useFillPicker](./use-fill-picker)
 - [useGradientStops](./use-gradient-stops)
 - [useFontPicker](./use-font-picker)
 - [useOkHCL](./use-okhcl)
diff --git a/packages/docs/it/programmable/sdk/api/advanced/use-color-variable-binding.md b/packages/docs/it/programmable/sdk/api/advanced/use-color-variable-binding.md
index 99ffc54cc..1a49496d1 100644
--- a/packages/docs/it/programmable/sdk/api/advanced/use-color-variable-binding.md
+++ b/packages/docs/it/programmable/sdk/api/advanced/use-color-variable-binding.md
@@ -22,4 +22,4 @@ const strokeBinding = useColorVariableBinding('strokes')
 
 - [useFillControls](../composables/use-fill-controls)
 - [useStrokeControls](../composables/use-stroke-controls)
-- [FillPickerRoot](../components/fill-picker-root)
+- [FillRoot](/programmable/sdk/api/components/fill-root)
diff --git a/packages/docs/it/programmable/sdk/api/advanced/use-fill-picker.md b/packages/docs/it/programmable/sdk/api/advanced/use-fill-picker.md
deleted file mode 100644
index 4c7fbdd58..000000000
--- a/packages/docs/it/programmable/sdk/api/advanced/use-fill-picker.md
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: useFillPicker
-description: Helper di basso livello per la categoria del riempimento e la conversione.
----
-
-# useFillPicker
-
-`useFillPicker(fill, onUpdate)` restituisce lo stato della categoria di riempimento derivato più gli helper di conversione per passare tra riempimenti solidi, a gradiente e immagine.
-
-Usalo quando costruisci selettori di riempimento personalizzati oltre a `FillPickerRoot`.
-
-## API correlate
-
-- [FillPickerRoot](../components/fill-picker-root)
-- [useFillControls](../composables/use-fill-controls)
-- [useGradientStops](./use-gradient-stops)
diff --git a/packages/docs/it/programmable/sdk/api/components/fill-picker-root.md b/packages/docs/it/programmable/sdk/api/components/fill-picker-root.md
deleted file mode 100644
index aee6b10cb..000000000
--- a/packages/docs/it/programmable/sdk/api/components/fill-picker-root.md
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: FillPickerRoot
-description: Primitiva popover headless per la selezione del riempimento.
----
-
-# FillPickerRoot
-
-`FillPickerRoot` è una primitiva popover headless per riempimenti solidi, a gradiente e immagine.
-
-## Props
-
-<SdkPropsTable
-  :rows="[
-    { name: 'fill', type: 'Fill', description: 'Valore riempimento corrente.', required: true },
-    { name: 'contentClass', type: 'string | undefined', description: 'Classe opzionale per il contenuto del popover.' },
-    { name: 'swatchClass', type: 'string | undefined', description: 'Classe opzionale per il pulsante trigger predefinito.' }
-  ]"
-/>
-
-## Eventi
-
-<SdkEventsTable
-  :rows="[
-    { name: 'update', payload: 'fill: Fill', description: 'Emesso quando il riempimento cambia.' }
-  ]"
-/>
-
-## Slot
-
-<SdkSlotsTable
-  :rows="[
-    { name: 'trigger', props: 'stile campione', description: 'Trigger personalizzato con stile di sfondo campione.' },
-    { name: 'default', props: 'stato riempimento + helper di conversione', description: 'Contenuto principale dell\'editor del riempimento.' }
-  ]"
-/>
-
-### Slot prop del trigger
-
-```ts
-{
-  style: Record<string, string>
-}
-```
-
-### Slot prop predefiniti
-
-```ts
-{
-  fill: Fill
-  category: 'SOLID' | 'GRADIENT' | 'IMAGE'
-  toSolid: () => void
-  toGradient: () => void
-  toImage: () => void
-  update: (fill: Fill) => void
-}
-```
-
-## Esempio
-
-```vue
-<FillPickerRoot :fill="fill" @update="fill = $event">
-  <template #default="{ fill, category, toSolid, toGradient, update }">
-    <div>{{ category }}</div>
-    <button @click="toSolid">Solido</button>
-    <button @click="toGradient">Gradiente</button>
-    <MyFillEditor :fill="fill" @change="update" />
-  </template>
-</FillPickerRoot>
-```
-
-## API correlate
-
-- [GradientEditorRoot](./gradient-editor-root)
diff --git a/packages/docs/it/programmable/sdk/api/components/index.md b/packages/docs/it/programmable/sdk/api/components/index.md
index 7698e7dc2..b74f3244d 100644
--- a/packages/docs/it/programmable/sdk/api/components/index.md
+++ b/packages/docs/it/programmable/sdk/api/components/index.md
@@ -35,7 +35,6 @@ description: Riferimento ai componenti per le primitive Vue headless in @open-pe
 <SdkCardGroup>
   <SdkCard title="ColorPickerRoot" to="/programmable/sdk/api/components/color-picker-root" description="Primitiva popover per la selezione del colore." />
   <SdkCard title="ColorInputRoot" to="/programmable/sdk/api/components/color-input-root" description="Helper headless per l'input del colore." />
-  <SdkCard title="FillPickerRoot" to="/programmable/sdk/api/components/fill-picker-root" description="Primitiva popover per la selezione del riempimento." />
   <SdkCard title="FontPickerRoot" to="/programmable/sdk/api/components/font-picker-root" description="Primitiva searchable per la selezione del font." />
   <SdkCard title="GradientEditorRoot" to="/programmable/sdk/api/components/gradient-editor-root" description="Primitiva root per l'editor del gradiente." />
   <SdkCard title="GradientEditorBar" to="/programmable/sdk/api/components/gradient-editor-bar" description="Primitiva barra trascinabile per il gradiente." />
diff --git a/packages/docs/pl/programmable/sdk/api/advanced/index.md b/packages/docs/pl/programmable/sdk/api/advanced/index.md
index c3851b02c..c1dd54547 100644
--- a/packages/docs/pl/programmable/sdk/api/advanced/index.md
+++ b/packages/docs/pl/programmable/sdk/api/advanced/index.md
@@ -16,7 +16,6 @@ Te API są publiczne, ale są bardziej wyspecjalizowane niż główna powierzchn
 ## Selektor, zmienne, język i wewnętrzności edytora
 
 - [useColorVariableBinding](./use-color-variable-binding)
-- [useFillPicker](./use-fill-picker)
 - [useGradientStops](./use-gradient-stops)
 - [useFontPicker](./use-font-picker)
 - [useOkHCL](./use-okhcl)
diff --git a/packages/docs/pl/programmable/sdk/api/advanced/use-color-variable-binding.md b/packages/docs/pl/programmable/sdk/api/advanced/use-color-variable-binding.md
index c211deacc..628fd28b5 100644
--- a/packages/docs/pl/programmable/sdk/api/advanced/use-color-variable-binding.md
+++ b/packages/docs/pl/programmable/sdk/api/advanced/use-color-variable-binding.md
@@ -22,4 +22,4 @@ const strokeBinding = useColorVariableBinding('strokes')
 
 - [useFillControls](../composables/use-fill-controls)
 - [useStrokeControls](../composables/use-stroke-controls)
-- [FillPickerRoot](../components/fill-picker-root)
+- [FillRoot](/programmable/sdk/api/components/fill-root)
diff --git a/packages/docs/pl/programmable/sdk/api/advanced/use-fill-picker.md b/packages/docs/pl/programmable/sdk/api/advanced/use-fill-picker.md
deleted file mode 100644
index 1bd3c68df..000000000
--- a/packages/docs/pl/programmable/sdk/api/advanced/use-fill-picker.md
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: useFillPicker
-description: Niskopoziomowy pomocnik kategorii wypełnienia i konwersji.
----
-
-# useFillPicker
-
-`useFillPicker(fill, onUpdate)` zwraca pochodny stan kategorii wypełnienia plus pomocniki konwersji do przełączania między wypełnieniami jednolitymi, gradientowymi i obrazkowymi.
-
-Użyj go przy budowaniu niestandardowych selektorów wypełnień wykraczających poza `FillPickerRoot`.
-
-## Powiązane API
-
-- [FillPickerRoot](../components/fill-picker-root)
-- [useFillControls](../composables/use-fill-controls)
-- [useGradientStops](./use-gradient-stops)
diff --git a/packages/docs/pl/programmable/sdk/api/components/fill-picker-root.md b/packages/docs/pl/programmable/sdk/api/components/fill-picker-root.md
deleted file mode 100644
index 4c80146a6..000000000
--- a/packages/docs/pl/programmable/sdk/api/components/fill-picker-root.md
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: FillPickerRoot
-description: Bezstanowy prymityw selektora wypełnień oparty na popover.
----
-
-# FillPickerRoot
-
-`FillPickerRoot` to bezstanowy prymityw selektora wypełnień oparty na popover dla wypełnień jednolitych, gradientowych i obrazkowych.
-
-## Props
-
-<SdkPropsTable
-  :rows="[
-    { name: 'fill', type: 'Fill', description: 'Bieżąca wartość wypełnienia.', required: true },
-    { name: 'contentClass', type: 'string | undefined', description: 'Opcjonalna klasa dla zawartości popover.' },
-    { name: 'swatchClass', type: 'string | undefined', description: 'Opcjonalna klasa dla domyślnego przycisku wyzwalacza.' }
-  ]"
-/>
-
-## Zdarzenia
-
-<SdkEventsTable
-  :rows="[
-    { name: 'update', payload: 'fill: Fill', description: 'Emitowane gdy wypełnienie się zmienia.' }
-  ]"
-/>
-
-## Sloty
-
-<SdkSlotsTable
-  :rows="[
-    { name: 'trigger', props: 'styl próbki', description: 'Niestandardowy wyzwalacz ze stylem tła próbki.' },
-    { name: 'default', props: 'stan wypełnienia + pomocniki konwersji', description: 'Główna zawartość edytora wypełnień.' }
-  ]"
-/>
-
-### Właściwości slotu trigger
-
-```ts
-{
-  style: Record<string, string>
-}
-```
-
-### Właściwości slotu default
-
-```ts
-{
-  fill: Fill
-  category: 'SOLID' | 'GRADIENT' | 'IMAGE'
-  toSolid: () => void
-  toGradient: () => void
-  toImage: () => void
-  update: (fill: Fill) => void
-}
-```
-
-## Przykład
-
-```vue
-<FillPickerRoot :fill="fill" @update="fill = $event">
-  <template #default="{ fill, category, toSolid, toGradient, update }">
-    <div>{{ category }}</div>
-    <button @click="toSolid">Jednolite</button>
-    <button @click="toGradient">Gradient</button>
-    <MyFillEditor :fill="fill" @change="update" />
-  </template>
-</FillPickerRoot>
-```
-
-## Powiązane API
-
-- [GradientEditorRoot](./gradient-editor-root)
diff --git a/packages/docs/pl/programmable/sdk/api/components/index.md b/packages/docs/pl/programmable/sdk/api/components/index.md
index a759918aa..1c8367ad2 100644
--- a/packages/docs/pl/programmable/sdk/api/components/index.md
+++ b/packages/docs/pl/programmable/sdk/api/components/index.md
@@ -35,7 +35,6 @@ description: Dokumentacja komponentów bezstanowych prymitywów Vue w @open-penc
 <SdkCardGroup>
   <SdkCard title="ColorPickerRoot" to="/programmable/sdk/api/components/color-picker-root" description="Prymityw selektora kolorów oparty na popover." />
   <SdkCard title="ColorInputRoot" to="/programmable/sdk/api/components/color-input-root" description="Bezstanowy pomocnik pola wejściowego koloru." />
-  <SdkCard title="FillPickerRoot" to="/programmable/sdk/api/components/fill-picker-root" description="Prymityw selektora wypełnień oparty na popover." />
   <SdkCard title="FontPickerRoot" to="/programmable/sdk/api/components/font-picker-root" description="Przeszukiwalny prymityw selektora czcionek." />
   <SdkCard title="GradientEditorRoot" to="/programmable/sdk/api/components/gradient-editor-root" description="Prymityw korzenia do edycji gradientów." />
   <SdkCard title="GradientEditorBar" to="/programmable/sdk/api/components/gradient-editor-bar" description="Przeciągany prymityw paska gradientu." />
diff --git a/packages/docs/programmable/sdk/api/advanced/index.md b/packages/docs/programmable/sdk/api/advanced/index.md
index bbf64ff3c..1f9dcd8cb 100644
--- a/packages/docs/programmable/sdk/api/advanced/index.md
+++ b/packages/docs/programmable/sdk/api/advanced/index.md
@@ -17,7 +17,6 @@ These APIs are public, but they are more specialized than the main component and
 
 - [useColorVariableBinding](./use-color-variable-binding)
 - [useColorBindingProvider](./use-color-binding-provider)
-- [useFillPicker](./use-fill-picker)
 - [useGradientStops](./use-gradient-stops)
 - [useFontPicker](./use-font-picker)
 - [useOkHCL](./use-okhcl)
diff --git a/packages/docs/programmable/sdk/api/advanced/use-color-variable-binding.md b/packages/docs/programmable/sdk/api/advanced/use-color-variable-binding.md
index b8156d138..742d3e9e1 100644
--- a/packages/docs/programmable/sdk/api/advanced/use-color-variable-binding.md
+++ b/packages/docs/programmable/sdk/api/advanced/use-color-variable-binding.md
@@ -22,4 +22,4 @@ const strokeBinding = useColorVariableBinding('strokes')
 
 - [useFillControls](../composables/use-fill-controls)
 - [useStrokeControls](../composables/use-stroke-controls)
-- [FillPickerRoot](../components/fill-picker-root)
+- [FillRoot](../components/fill-root)
diff --git a/packages/docs/programmable/sdk/api/advanced/use-fill-picker.md b/packages/docs/programmable/sdk/api/advanced/use-fill-picker.md
deleted file mode 100644
index 91ce6a421..000000000
--- a/packages/docs/programmable/sdk/api/advanced/use-fill-picker.md
+++ /dev/null
@@ -1,20 +0,0 @@
----
-title: useFillPicker
-description: Low-level fill-category and conversion helper.
----
-
-# useFillPicker
-
-::: warning Deprecated
-Use `useFill()` or the [FillRoot](../components/fill-root) primitive. `useFillPicker()` remains as a
-migration wrapper until the picker cleanup slice.
-:::
-
-`useFillPicker(fill, onUpdate)` returns legacy fill category state plus conversion helpers for
-switching between solid, gradient, and image fills.
-
-## Related APIs
-
-- [FillPickerRoot](../components/fill-picker-root)
-- [useFillControls](../composables/use-fill-controls)
-- [useGradientStops](./use-gradient-stops)
diff --git a/packages/docs/programmable/sdk/api/components/fill-picker-root.md b/packages/docs/programmable/sdk/api/components/fill-picker-root.md
deleted file mode 100644
index 33f19ac83..000000000
--- a/packages/docs/programmable/sdk/api/components/fill-picker-root.md
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: FillPickerRoot
-description: Headless popover-based fill picker primitive.
----
-
-# FillPickerRoot
-
-::: warning Deprecated
-Compose [FillRoot](./fill-root), [FillSwatch](./fill-swatch), and your application's popover instead.
-`FillPickerRoot` remains temporarily available for migration compatibility.
-:::
-
-`FillPickerRoot` is the legacy popover-based fill picker for solid, gradient, and image fills.
-
-## Props
-
-<SdkPropsTable
-  :rows="[
-    { name: 'fill', type: 'Fill', description: 'Current fill value.', required: true },
-    { name: 'contentClass', type: 'string | undefined', description: 'Optional class for the popover content.' },
-    { name: 'swatchClass', type: 'string | undefined', description: 'Optional class for the default trigger button.' }
-  ]"
-/>
-
-## Events
-
-<SdkEventsTable
-  :rows="[
-    { name: 'update', payload: 'fill: Fill', description: 'Emitted when the fill changes.' }
-  ]"
-/>
-
-## Slots
-
-<SdkSlotsTable
-  :rows="[
-    { name: 'trigger', props: 'swatch style', description: 'Custom trigger with swatch background style.' },
-    { name: 'default', props: 'fill state + conversion helpers', description: 'Main fill editor content.' }
-  ]"
-/>
-
-### Trigger slot props
-
-```ts
-{
-  style: Record<string, string>
-}
-```
-
-### Default slot props
-
-```ts
-{
-  fill: Fill
-  category: 'SOLID' | 'GRADIENT' | 'IMAGE'
-  toSolid: () => void
-  toGradient: () => void
-  toImage: () => void
-  update: (fill: Fill) => void
-}
-```
-
-## Example
-
-```vue
-<FillPickerRoot :fill="fill" @update="fill = $event">
-  <template #default="{ fill, category, toSolid, toGradient, update }">
-    <div>{{ category }}</div>
-    <button @click="toSolid">Solid</button>
-    <button @click="toGradient">Gradient</button>
-    <MyFillEditor :fill="fill" @change="update" />
-  </template>
-</FillPickerRoot>
-```
-
-## Related APIs
-
-- [GradientEditorRoot](./gradient-editor-root)
diff --git a/packages/docs/programmable/sdk/api/components/index.md b/packages/docs/programmable/sdk/api/components/index.md
index 182673ad3..321e2a823 100644
--- a/packages/docs/programmable/sdk/api/components/index.md
+++ b/packages/docs/programmable/sdk/api/components/index.md
@@ -40,7 +40,6 @@ description: Component reference for headless Vue primitives in @open-pencil/vue
   <SdkCard title="ChannelSlider" to="/programmable/sdk/api/components/channel-slider" description="Accessible scalar slider for OkHCL channels." />
   <SdkCard title="FillRoot" to="/programmable/sdk/api/components/fill-root" description="Fill category state and conversion actions." />
   <SdkCard title="FillSwatch" to="/programmable/sdk/api/components/fill-swatch" description="Binding-aware semantic fill preview." />
-  <SdkCard title="FillPickerRoot" to="/programmable/sdk/api/components/fill-picker-root" description="Deprecated popover-based fill picker compatibility primitive." />
   <SdkCard title="FontPickerRoot" to="/programmable/sdk/api/components/font-picker-root" description="Searchable font picker primitive." />
   <SdkCard title="GradientEditorRoot" to="/programmable/sdk/api/components/gradient-editor-root" description="Root primitive for gradient editing." />
   <SdkCard title="GradientEditorBar" to="/programmable/sdk/api/components/gradient-editor-bar" description="Draggable gradient bar primitive." />
diff --git a/packages/docs/ru/programmable/sdk/api/advanced/index.md b/packages/docs/ru/programmable/sdk/api/advanced/index.md
index 221c689b6..3c546c59d 100644
--- a/packages/docs/ru/programmable/sdk/api/advanced/index.md
+++ b/packages/docs/ru/programmable/sdk/api/advanced/index.md
@@ -16,7 +16,6 @@ description: Низкоуровневые и специализированны
 ## Пикеры, переменные, локаль и внутренние части редактора
 
 - [useColorVariableBinding](./use-color-variable-binding)
-- [useFillPicker](./use-fill-picker)
 - [useGradientStops](./use-gradient-stops)
 - [useFontPicker](./use-font-picker)
 - [useOkHCL](./use-okhcl)
diff --git a/packages/docs/ru/programmable/sdk/api/advanced/use-color-variable-binding.md b/packages/docs/ru/programmable/sdk/api/advanced/use-color-variable-binding.md
index b7e69968d..3fca679dd 100644
--- a/packages/docs/ru/programmable/sdk/api/advanced/use-color-variable-binding.md
+++ b/packages/docs/ru/programmable/sdk/api/advanced/use-color-variable-binding.md
@@ -22,4 +22,4 @@ const strokeBinding = useColorVariableBinding('strokes')
 
 - [useFillControls](../composables/use-fill-controls)
 - [useStrokeControls](../composables/use-stroke-controls)
-- [FillPickerRoot](../components/fill-picker-root)
+- [FillRoot](/programmable/sdk/api/components/fill-root)
diff --git a/packages/docs/ru/programmable/sdk/api/advanced/use-fill-picker.md b/packages/docs/ru/programmable/sdk/api/advanced/use-fill-picker.md
deleted file mode 100644
index fee96c64e..000000000
--- a/packages/docs/ru/programmable/sdk/api/advanced/use-fill-picker.md
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: useFillPicker
-description: Низкоуровневый хелпер категорий заливки и конверсии.
----
-
-# useFillPicker
-
-`useFillPicker(fill, onUpdate)` возвращает производное состояние категории заливки и хелперы конверсии для переключения между сплошными, градиентными и графическими заливками.
-
-Используйте его при создании кастомных пикеров заливки за пределами `FillPickerRoot`.
-
-## Связанные API
-
-- [FillPickerRoot](../components/fill-picker-root)
-- [useFillControls](../composables/use-fill-controls)
-- [useGradientStops](./use-gradient-stops)
diff --git a/packages/docs/ru/programmable/sdk/api/components/fill-picker-root.md b/packages/docs/ru/programmable/sdk/api/components/fill-picker-root.md
deleted file mode 100644
index 0f1779f41..000000000
--- a/packages/docs/ru/programmable/sdk/api/components/fill-picker-root.md
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: FillPickerRoot
-description: Headless-примитив пикера заливки с поповером.
----
-
-# FillPickerRoot
-
-`FillPickerRoot` — headless-примитив пикера заливки на основе поповера для сплошных, градиентных и графических заливок.
-
-## Props
-
-<SdkPropsTable
-  :rows="[
-    { name: 'fill', type: 'Fill', description: 'Текущее значение заливки.', required: true },
-    { name: 'contentClass', type: 'string | undefined', description: 'Опциональный класс для содержимого поповера.' },
-    { name: 'swatchClass', type: 'string | undefined', description: 'Опциональный класс для кнопки триггера по умолчанию.' }
-  ]"
-/>
-
-## Events
-
-<SdkEventsTable
-  :rows="[
-    { name: 'update', payload: 'fill: Fill', description: 'Генерируется при изменении заливки.' }
-  ]"
-/>
-
-## Slots
-
-<SdkSlotsTable
-  :rows="[
-    { name: 'trigger', props: 'swatch style', description: 'Кастомный триггер со стилем фона свотча.' },
-    { name: 'default', props: 'fill state + conversion helpers', description: 'Основное содержимое редактора заливки.' }
-  ]"
-/>
-
-### Пропы слота trigger
-
-```ts
-{
-  style: Record<string, string>
-}
-```
-
-### Пропы слота default
-
-```ts
-{
-  fill: Fill
-  category: 'SOLID' | 'GRADIENT' | 'IMAGE'
-  toSolid: () => void
-  toGradient: () => void
-  toImage: () => void
-  update: (fill: Fill) => void
-}
-```
-
-## Пример
-
-```vue
-<FillPickerRoot :fill="fill" @update="fill = $event">
-  <template #default="{ fill, category, toSolid, toGradient, update }">
-    <div>{{ category }}</div>
-    <button @click="toSolid">Сплошная</button>
-    <button @click="toGradient">Градиент</button>
-    <MyFillEditor :fill="fill" @change="update" />
-  </template>
-</FillPickerRoot>
-```
-
-## Связанные API
-
-- [GradientEditorRoot](./gradient-editor-root)
diff --git a/packages/docs/ru/programmable/sdk/api/components/index.md b/packages/docs/ru/programmable/sdk/api/components/index.md
index b34a1e792..dc7b2cc51 100644
--- a/packages/docs/ru/programmable/sdk/api/components/index.md
+++ b/packages/docs/ru/programmable/sdk/api/components/index.md
@@ -35,7 +35,6 @@ description: Справочник компонентов — headless-прими
 <SdkCardGroup>
   <SdkCard title="ColorPickerRoot" to="/programmable/sdk/api/components/color-picker-root" description="Headless-примитив пикера цвета с поповером." />
   <SdkCard title="ColorInputRoot" to="/programmable/sdk/api/components/color-input-root" description="Headless-хелпер для ввода цвета." />
-  <SdkCard title="FillPickerRoot" to="/programmable/sdk/api/components/fill-picker-root" description="Headless-примитив пикера заливки с поповером." />
   <SdkCard title="FontPickerRoot" to="/programmable/sdk/api/components/font-picker-root" description="Headless-примитив пикера шрифта с поиском." />
   <SdkCard title="GradientEditorRoot" to="/programmable/sdk/api/components/gradient-editor-root" description="Корневой примитив редактора градиента." />
   <SdkCard title="GradientEditorBar" to="/programmable/sdk/api/components/gradient-editor-bar" description="Перетаскиваемый примитив полосы градиента." />
diff --git a/packages/vue/README.md b/packages/vue/README.md
index a240f471b..cb8d82ad2 100644
--- a/packages/vue/README.md
+++ b/packages/vue/README.md
@@ -86,7 +86,6 @@ Main structural primitives include:
 - `SegmentedControlRoot`
 - `ToolbarRoot`
 - `ColorPickerRoot`
-- `FillPickerRoot`
 - `FontPickerRoot`
 - `NumberFieldRoot` / `NumberFieldInput` / `NumberFieldValue`
 - `BindableValueRoot` / `BindableValueTrigger` / `BindableValuePicker`
@@ -185,7 +184,6 @@ These exports are intentionally public, but they are lower-level or more special
 - `useBindingProvider()`
 - `useNumberBindingProvider()`
 - `useFill()`
-- `useFillPicker()` (deprecated migration wrapper)
 - `useGradientStops()`
 - `useFontPicker()`
 - `useOkHCL()`
diff --git a/packages/vue/src/i18n/locales/de/panels.json b/packages/vue/src/i18n/locales/de/panels.json
index f27985da3..f7c4e9714 100644
--- a/packages/vue/src/i18n/locales/de/panels.json
+++ b/packages/vue/src/i18n/locales/de/panels.json
@@ -83,6 +83,10 @@
   "multiplayerCursors": "Cursor anderer Teilnehmer",
   "direction": "Richtung",
   "flow": "Fluss",
+  "layoutHorizontal": "Horizontales Layout",
+  "layoutVertical": "Vertikales Layout",
+  "layoutGrid": "Rasterlayout",
+  "layoutWrap": "Layout umbrechen",
   "auto": "Automatisch",
   "columns": "Spalten",
   "rows": "Zeilen",
diff --git a/packages/vue/src/i18n/locales/es/panels.json b/packages/vue/src/i18n/locales/es/panels.json
index df1601b4c..89c0e50dc 100644
--- a/packages/vue/src/i18n/locales/es/panels.json
+++ b/packages/vue/src/i18n/locales/es/panels.json
@@ -96,6 +96,10 @@
   "multiplayerCursors": "Cursores de otros participantes",
   "direction": "Dirección",
   "flow": "Flujo",
+  "layoutHorizontal": "Diseño horizontal",
+  "layoutVertical": "Diseño vertical",
+  "layoutGrid": "Diseño de cuadrícula",
+  "layoutWrap": "Ajustar diseño",
   "auto": "Auto",
   "columns": "Columnas",
   "rows": "Filas",
diff --git a/packages/vue/src/i18n/locales/fr/panels.json b/packages/vue/src/i18n/locales/fr/panels.json
index 04054fd4b..2fb267762 100644
--- a/packages/vue/src/i18n/locales/fr/panels.json
+++ b/packages/vue/src/i18n/locales/fr/panels.json
@@ -83,6 +83,10 @@
   "multiplayerCursors": "Curseurs des participants",
   "direction": "Direction",
   "flow": "Flux",
+  "layoutHorizontal": "Disposition horizontale",
+  "layoutVertical": "Disposition verticale",
+  "layoutGrid": "Disposition en grille",
+  "layoutWrap": "Retour à la ligne",
   "auto": "Auto",
   "columns": "Colonnes",
   "rows": "Lignes",
diff --git a/packages/vue/src/i18n/locales/it/panels.json b/packages/vue/src/i18n/locales/it/panels.json
index 012f57d56..089766b58 100644
--- a/packages/vue/src/i18n/locales/it/panels.json
+++ b/packages/vue/src/i18n/locales/it/panels.json
@@ -83,6 +83,10 @@
   "multiplayerCursors": "Cursori degli altri partecipanti",
   "direction": "Direzione",
   "flow": "Flusso",
+  "layoutHorizontal": "Layout orizzontale",
+  "layoutVertical": "Layout verticale",
+  "layoutGrid": "Layout a griglia",
+  "layoutWrap": "Layout a capo",
   "auto": "Auto",
   "columns": "Colonne",
   "rows": "Righe",
diff --git a/packages/vue/src/i18n/locales/ja/panels.json b/packages/vue/src/i18n/locales/ja/panels.json
index db4548784..7f8e64323 100644
--- a/packages/vue/src/i18n/locales/ja/panels.json
+++ b/packages/vue/src/i18n/locales/ja/panels.json
@@ -96,6 +96,10 @@
   "multiplayerCursors": "他の参加者のカーソル",
   "direction": "方向",
   "flow": "フロー",
+  "layoutHorizontal": "横方向レイアウト",
+  "layoutVertical": "縦方向レイアウト",
+  "layoutGrid": "グリッドレイアウト",
+  "layoutWrap": "折り返しレイアウト",
   "auto": "自動",
   "columns": "列",
   "rows": "行",
diff --git a/packages/vue/src/i18n/locales/pl/panels.json b/packages/vue/src/i18n/locales/pl/panels.json
index 799a9995c..418e73140 100644
--- a/packages/vue/src/i18n/locales/pl/panels.json
+++ b/packages/vue/src/i18n/locales/pl/panels.json
@@ -83,6 +83,10 @@
   "multiplayerCursors": "Kursory innych uczestników",
   "direction": "Kierunek",
   "flow": "Przepływ",
+  "layoutHorizontal": "Układ poziomy",
+  "layoutVertical": "Układ pionowy",
+  "layoutGrid": "Układ siatki",
+  "layoutWrap": "Zawijanie układu",
   "auto": "Auto",
   "columns": "Kolumny",
   "rows": "Wiersze",
diff --git a/packages/vue/src/i18n/locales/ru/panels.json b/packages/vue/src/i18n/locales/ru/panels.json
index 2d8db563f..bfc6fa896 100644
--- a/packages/vue/src/i18n/locales/ru/panels.json
+++ b/packages/vue/src/i18n/locales/ru/panels.json
@@ -83,6 +83,10 @@
   "multiplayerCursors": "Курсоры участников",
   "direction": "Направление",
   "flow": "Поток",
+  "layoutHorizontal": "Горизонтальная раскладка",
+  "layoutVertical": "Вертикальная раскладка",
+  "layoutGrid": "Сетка",
+  "layoutWrap": "Перенос элементов",
   "auto": "Авто",
   "columns": "Столбцы",
   "rows": "Строки",
diff --git a/packages/vue/src/i18n/locales/zh-cn/panels.json b/packages/vue/src/i18n/locales/zh-cn/panels.json
index aaa60fd77..8ebf73905 100644
--- a/packages/vue/src/i18n/locales/zh-cn/panels.json
+++ b/packages/vue/src/i18n/locales/zh-cn/panels.json
@@ -83,6 +83,10 @@
   "multiplayerCursors": "协作光标",
   "direction": "方向",
   "flow": "流向",
+  "layoutHorizontal": "水平布局",
+  "layoutVertical": "垂直布局",
+  "layoutGrid": "网格布局",
+  "layoutWrap": "自动换行",
   "auto": "自动",
   "columns": "列",
   "rows": "行",
diff --git a/packages/vue/src/i18n/messages/panels.ts b/packages/vue/src/i18n/messages/panels.ts
index 7067d5d1a..4f362a16f 100644
--- a/packages/vue/src/i18n/messages/panels.ts
+++ b/packages/vue/src/i18n/messages/panels.ts
@@ -171,6 +171,10 @@ export const panelMessageDefaults = {
   multiplayerCursors: 'Multiplayer cursors',
   direction: 'Direction',
   flow: 'Flow',
+  layoutHorizontal: 'Horizontal layout',
+  layoutVertical: 'Vertical layout',
+  layoutGrid: 'Grid layout',
+  layoutWrap: 'Wrap layout',
   gapAuto: 'Auto gap',
   horizontalGap: 'Horizontal gap',
   verticalGap: 'Vertical gap',
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index 492d14c0e..06d4a2783 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -114,7 +114,6 @@ export { useVariablesDialogState } from '#vue/variables/dialog/use'
 export { useVariablesEditor } from '#vue/variables/editor/use'
 export { useVariablesTable } from '#vue/variables/table/use'
 export { usePageList } from '#vue/primitives/PageList/usePageList'
-export { useFillPicker } from '#vue/primitives/FillPicker/useFillPicker'
 export {
   fillCategory,
   fillIsTransparent,
@@ -149,7 +148,6 @@ export type {
   FillSwatchSlotProps,
   FillSwatchSlots
 } from '#vue/primitives/Fill'
-export { FillPickerRoot } from '#vue/primitives/FillPicker'
 export { FontPickerRoot } from '#vue/primitives/FontPicker'
 export type { FontFamilyOption, FontPickerUI } from '#vue/primitives/FontPicker'
 export {
diff --git a/packages/vue/src/primitives/FillPicker/FillPickerRoot.vue b/packages/vue/src/primitives/FillPicker/FillPickerRoot.vue
deleted file mode 100644
index f8f43ac78..000000000
--- a/packages/vue/src/primitives/FillPicker/FillPickerRoot.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'reka-ui'
-
-import { useFillPicker } from '#vue/primitives/FillPicker/useFillPicker'
-
-import type { Fill } from '@open-pencil/scene-graph'
-
-export interface FillPickerUI {
-  content?: string
-  swatch?: string
-}
-
-const { fill, ui } = defineProps<{
-  fill: Fill
-  ui?: FillPickerUI
-}>()
-
-const emit = defineEmits<{ update: [fill: Fill] }>()
-
-const { category, swatchBg, toSolid, toGradient, toImage } = useFillPicker(
-  computed(() => fill),
-  (updated) => emit('update', updated)
-)
-</script>
-
-<template>
-  <PopoverRoot>
-    <PopoverTrigger as-child>
-      <slot name="trigger" :style="{ background: swatchBg }">
-        <button :class="ui?.swatch" :style="{ background: swatchBg }" />
-      </slot>
-    </PopoverTrigger>
-
-    <PopoverPortal>
-      <PopoverContent :class="ui?.content" :side-offset="4" side="left">
-        <slot
-          :fill="fill"
-          :category="category"
-          :to-solid="toSolid"
-          :to-gradient="toGradient"
-          :to-image="toImage"
-        />
-      </PopoverContent>
-    </PopoverPortal>
-  </PopoverRoot>
-</template>
diff --git a/packages/vue/src/primitives/FillPicker/index.ts b/packages/vue/src/primitives/FillPicker/index.ts
deleted file mode 100644
index 1bad8dc62..000000000
--- a/packages/vue/src/primitives/FillPicker/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-/** @deprecated Compose `FillRoot`, `FillSwatch`, and a popover in the consumer. */
-export { default as FillPickerRoot } from '#vue/primitives/FillPicker/FillPickerRoot.vue'
diff --git a/packages/vue/src/primitives/FillPicker/useFillPicker.ts b/packages/vue/src/primitives/FillPicker/useFillPicker.ts
deleted file mode 100644
index 669fa569d..000000000
--- a/packages/vue/src/primitives/FillPicker/useFillPicker.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { Ref } from 'vue'
-
-import type { Fill } from '@open-pencil/scene-graph'
-
-import { useFill } from '#vue/primitives/Fill/useFill'
-
-/** @deprecated Use `useFill()` and compose popover behavior in the consumer. */
-export function useFillPicker(fill: Ref<Fill>, onUpdate: (fill: Fill) => void) {
-  const model = useFill(fill, onUpdate)
-  return {
-    category: model.category,
-    swatchBg: model.swatchBackground,
-    toSolid: model.toSolid,
-    toGradient: model.toGradient,
-    toImage: model.toImage
-  }
-}
diff --git a/src/components/properties/LayoutSection/AutoLayoutControls.vue b/src/components/properties/LayoutSection/AutoLayoutControls.vue
index 4279a86c5..0fae4e0ec 100644
--- a/src/components/properties/LayoutSection/AutoLayoutControls.vue
+++ b/src/components/properties/LayoutSection/AutoLayoutControls.vue
@@ -1,27 +1,27 @@
 <script setup lang="ts">
-import IconButton from '@/components/ui/IconButton.vue'
-import PanelRow from '@/components/ui/panel/PanelRow.vue'
+import { computed } from 'vue'
+
 import { useI18n, useLayoutControlsContext } from '@open-pencil/vue'
 
+import IconButton from '@/components/ui/IconButton.vue'
+
 import type { LayoutMode } from '@open-pencil/scene-graph'
 
 const ctx = useLayoutControlsContext()
-
 const { panels } = useI18n()
 
-const layoutModes: { mode: LayoutMode; test: string }[] = [
-  { mode: 'HORIZONTAL', test: 'horizontal' },
-  { mode: 'VERTICAL', test: 'vertical' },
-  { mode: 'GRID', test: 'grid' }
-]
+const layoutModes = computed<Array<{ mode: LayoutMode; label: string }>>(() => [
+  { mode: 'HORIZONTAL', label: panels.value.layoutHorizontal },
+  { mode: 'VERTICAL', label: panels.value.layoutVertical },
+  { mode: 'GRID', label: panels.value.layoutGrid }
+])
 </script>
 
 <template>
-  <PanelRow>
+  <div class="flex items-center gap-panel">
     <IconButton
       v-if="ctx.node.layoutMode === 'NONE'"
       :label="panels.addAutoLayout"
-      data-test-id="layout-add-auto"
       @click="ctx.editor.setLayoutMode(ctx.node.id, 'VERTICAL')"
     >
       <icon-lucide-plus class="size-3.5" />
@@ -29,34 +29,38 @@ const layoutModes: { mode: LayoutMode; test: string }[] = [
     <IconButton
       v-else
       :label="panels.removeAutoLayout"
-      data-test-id="layout-remove-auto"
       @click="ctx.editor.setLayoutMode(ctx.node.id, 'NONE')"
     >
       <icon-lucide-minus class="size-3.5" />
     </IconButton>
-  </PanelRow>
+  </div>
 
-  <PanelRow v-if="ctx.node.layoutMode !== 'NONE'" class="mt-1.5" gap="sm">
+  <div
+    v-if="ctx.node.layoutMode !== 'NONE'"
+    class="mt-1.5 flex items-center gap-1"
+    role="toolbar"
+    :aria-label="panels.flow"
+  >
     <IconButton
-      v-for="dir in layoutModes"
-      :key="dir.mode"
+      v-for="direction in layoutModes"
+      :key="direction.mode"
+      :label="direction.label"
       size="md"
-      :active="dir.mode === 'GRID' ? ctx.isGrid : ctx.node.layoutMode === dir.mode"
-      :data-test-id="`layout-direction-${dir.test}`"
-      @click="ctx.editor.setLayoutMode(ctx.node.id, dir.mode)"
+      :active="direction.mode === 'GRID' ? ctx.isGrid : ctx.node.layoutMode === direction.mode"
+      @click="ctx.editor.setLayoutMode(ctx.node.id, direction.mode)"
     >
-      <icon-lucide-arrow-right v-if="dir.mode === 'HORIZONTAL'" class="size-3.5" />
-      <icon-lucide-arrow-down v-else-if="dir.mode === 'VERTICAL'" class="size-3.5" />
+      <icon-lucide-arrow-right v-if="direction.mode === 'HORIZONTAL'" class="size-3.5" />
+      <icon-lucide-arrow-down v-else-if="direction.mode === 'VERTICAL'" class="size-3.5" />
       <icon-lucide-layout-grid v-else class="size-3.5" />
     </IconButton>
     <IconButton
       v-if="ctx.isFlex"
+      :label="panels.layoutWrap"
       size="md"
       :active="ctx.node.layoutWrap === 'WRAP'"
-      data-test-id="layout-direction-wrap"
       @click="ctx.updateProp('layoutWrap', ctx.node.layoutWrap === 'WRAP' ? 'NO_WRAP' : 'WRAP')"
     >
       <icon-lucide-wrap-text class="size-3.5" />
     </IconButton>
-  </PanelRow>
+  </div>
 </template>
diff --git a/src/components/ui/panel/PanelRow.vue b/src/components/ui/panel/PanelRow.vue
deleted file mode 100644
index e5cbe848e..000000000
--- a/src/components/ui/panel/PanelRow.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script lang="ts">
-import type { VNode } from 'vue'
-import type { ClassValue } from 'tailwind-variants'
-
-import type { PanelRowTheme } from '@/theme/panel/row'
-
-export interface PanelRowProps {
-  cols?: keyof PanelRowTheme['variants']['columns']
-  gap?: keyof PanelRowTheme['variants']['gap']
-  class?: ClassValue
-}
-
-export interface PanelRowSlots {
-  default(): VNode[]
-}
-</script>
-
-<script setup lang="ts">
-import { tv } from 'tailwind-variants'
-
-import theme from '@/theme/panel/row'
-
-/** @deprecated Prefer PanelGrid for new property-panel layouts. */
-const { cols = 'auto', gap = 'md', class: className } = defineProps<PanelRowProps>()
-defineSlots<PanelRowSlots>()
-const panelRow = tv(theme)
-</script>
-
-<template>
-  <div :class="panelRow({ columns: cols, gap, class: className })">
-    <slot />
-  </div>
-</template>
diff --git a/src/components/ui/panel/index.ts b/src/components/ui/panel/index.ts
index d295d885b..48243ae6d 100644
--- a/src/components/ui/panel/index.ts
+++ b/src/components/ui/panel/index.ts
@@ -3,5 +3,4 @@ export { default as PanelGrid } from './PanelGrid.vue'
 export { default as PanelHeader } from './PanelHeader.vue'
 export { default as PanelItemRow } from './PanelItemRow.vue'
 export { default as PanelRail } from './PanelRail.vue'
-export { default as PanelRow } from './PanelRow.vue'
 export { default as PanelSection } from './PanelSection.vue'
diff --git a/src/theme/panel/row.ts b/src/theme/panel/row.ts
deleted file mode 100644
index f763b6ca5..000000000
--- a/src/theme/panel/row.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-const panelRowTheme = {
-  base: 'flex items-center',
-  variants: {
-    columns: {
-      auto: '',
-      two: '[&>*]:min-w-0 [&>*]:flex-1',
-      fill: '[&>*:first-child]:min-w-0 [&>*:first-child]:flex-1'
-    },
-    gap: {
-      sm: 'gap-0.5',
-      md: 'gap-panel'
-    }
-  },
-  defaultVariants: {
-    columns: 'auto' as const,
-    gap: 'md' as const
-  }
-}
-
-export type PanelRowTheme = typeof panelRowTheme
-export default panelRowTheme
diff --git a/tests/e2e/editor/auto-layout/basic.spec.ts b/tests/e2e/editor/auto-layout/basic.spec.ts
index 69dd2dcdc..14474bd22 100644
--- a/tests/e2e/editor/auto-layout/basic.spec.ts
+++ b/tests/e2e/editor/auto-layout/basic.spec.ts
@@ -54,14 +54,27 @@ test('Shift+A wraps selection in auto-layout frame', async () => {
   canvas.assertNoErrors()
 })
 
-test('direction button toggles to VERTICAL', async () => {
+test('direction controls switch between vertical grid and horizontal layout', async () => {
   await selectFrame()
+  const layout = propertySection(page, 'Auto layout')
 
-  await page.getByTestId('layout-direction-vertical').click()
+  await layout.getByRole('button', { name: 'Vertical layout' }).click()
   await canvas.waitForRender()
+  expect(expectDefined(await getNodeById(page, frameId), 'frame').layoutMode).toBe('VERTICAL')
 
-  const frame = await getNodeById(page, frameId)
-  expect(expectDefined(frame, 'frame').layoutMode).toBe('VERTICAL')
+  await layout.getByRole('button', { name: 'Grid layout' }).click()
+  await canvas.waitForRender()
+  expect(expectDefined(await getNodeById(page, frameId), 'frame').layoutMode).toBe('GRID')
+
+  await layout.getByRole('button', { name: 'Horizontal layout' }).click()
+  await canvas.waitForRender()
+  expect(expectDefined(await getNodeById(page, frameId), 'frame').layoutMode).toBe('HORIZONTAL')
+
+  await layout.getByRole('button', { name: 'Vertical layout' }).click()
+  await propertyField(page, 'width').getByRole('combobox', { name: 'Width' }).click()
+  await page.getByRole('option', { name: 'Hug' }).click()
+  await canvas.waitForRender()
+  expect(expectDefined(await getNodeById(page, frameId), 'frame').layoutMode).toBe('VERTICAL')
   canvas.assertNoErrors()
 })
 
@@ -102,7 +115,7 @@ test('gap menu sets auto space-between alignment', async () => {
 test('wrap mode exposes cross-axis gap control', async () => {
   await selectFrame()
 
-  await page.getByTestId('layout-direction-wrap').click()
+  await propertySection(page, 'Auto layout').getByRole('button', { name: 'Wrap layout' }).click()
   await canvas.waitForRender()
 
   const before = await getNodeById(page, frameId)
@@ -253,7 +266,9 @@ test('alignment grid center sets CENTER alignment', async () => {
 test('remove auto-layout sets layoutMode to NONE', async () => {
   await selectFrame()
 
-  await page.getByTestId('layout-remove-auto').click()
+  await propertySection(page, 'Auto layout')
+    .getByRole('button', { name: 'Remove auto layout' })
+    .click()
   await canvas.waitForRender()
 
   const frame = await getNodeById(page, frameId)