diff --git a/.changeset/ui-button-pressed.md b/.changeset/ui-button-pressed.md
new file mode 100644
index 000000000..7df67e7cd
--- /dev/null
+++ b/.changeset/ui-button-pressed.md
@@ -0,0 +1,6 @@
+---
+"@jolly-pixel/ui": minor
+---
+
+Add `pressed` to `jolly-button`, `count` to `jolly-tool-button` and `floating` to `jolly-rail`.
+Export `FolderReorder`, the folder grip controller panes use. `jolly-folder` no longer toggles its own grab: its handler sets the new `grabbed` property.
diff --git a/packages/editors/scene/ARCHITECTURE.md b/packages/editors/scene/ARCHITECTURE.md
index fefdefd76..2476c3045 100644
--- a/packages/editors/scene/ARCHITECTURE.md
+++ b/packages/editors/scene/ARCHITECTURE.md
@@ -18,6 +18,7 @@ The `SceneDocument` of the target lease is the only state that is saved. Everyth
 - `SelectionStore` follows the document: an actor that a command or a reset removes leaves the selection.
 - Reparenting rewrites the moved actor's transform from the file data, so it keeps its world pose whatever the binding has drawn.
 - The inspector forms are row descriptors in `components/componentForms.ts`, `Script` included. A row edit becomes a `component-changed` patch of one top-level field, unset when set back to its default. A nested field rewrites its whole object, as the room requires.
+- Dragging a component folder by its grip, or moving it with the keyboard, commits one `component-moved` command on drop. The order lives in the document, never in pane storage. A gesture is cancelled when the component list changes under it.
 
 ## Collaboration
 
diff --git a/packages/editors/scene/index.html b/packages/editors/scene/index.html
index 2d506183d..8b0571872 100644
--- a/packages/editors/scene/index.html
+++ b/packages/editors/scene/index.html
@@ -27,11 +27,11 @@
         <jolly-editor-toolbar></jolly-editor-toolbar>
         <section id="scene-viewport">
           <canvas tabindex="-1"></canvas>
-          <div class="viewport-top-left">
-            <jolly-scene-view-toolbar></jolly-scene-view-toolbar>
-            <jolly-log></jolly-log>
-          </div>
+          <jolly-log></jolly-log>
           <jolly-presence-stack selectable max="6" hidden></jolly-presence-stack>
+          <div class="viewport-toolbars">
+            <jolly-scene-toolbar></jolly-scene-toolbar>
+          </div>
         </section>
       </div>
       <jolly-dock
diff --git a/packages/editors/scene/public/main.css b/packages/editors/scene/public/main.css
index 8389cfe27..3dc25d695 100644
--- a/packages/editors/scene/public/main.css
+++ b/packages/editors/scene/public/main.css
@@ -58,19 +58,24 @@ jolly-dock {
   outline: none;
 }
 
-#scene-viewport .viewport-top-left {
+#scene-viewport jolly-log {
   position: absolute;
   inset-block-start: 12px;
   inset-inline-start: 16px;
   z-index: 5;
+}
+
+#scene-viewport .viewport-toolbars {
+  position: absolute;
+  inset-block-end: 16px;
+  inset-inline: 16px;
+  z-index: 5;
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 8px;
+  justify-content: center;
   pointer-events: none;
 }
 
-#scene-viewport .viewport-top-left > * {
+#scene-viewport .viewport-toolbars > * {
   pointer-events: auto;
 }
 
diff --git a/packages/editors/scene/src/app/sceneIcons.ts b/packages/editors/scene/src/app/sceneIcons.ts
index a0895a938..bc10f59a6 100644
--- a/packages/editors/scene/src/app/sceneIcons.ts
+++ b/packages/editors/scene/src/app/sceneIcons.ts
@@ -248,24 +248,51 @@ registerIcon("gizmo-scale", svg`
   />
 `, { tone: "coral" });
 
-registerIcon("move-up", svg`
+registerIcon("gizmo-space-local", svg`
   <path
-    d="M12 19V5M6 11l6-6 6 6"
+    class="tone-fill"
+    d="M12 3l8 4.5L12 12 4 7.5z"
+  />
+  <path
+    d="M12 3l8 4.5v9L12 21l-8-4.5v-9zM4 7.5l8 4.5 8-4.5M12 12v9"
     fill="none"
     stroke="currentColor"
-    stroke-width="2"
+    stroke-width="1.75"
     stroke-linecap="round"
     stroke-linejoin="round"
   />
-`, { tone: "sky" });
+`, { tone: "amber" });
 
-registerIcon("move-down", svg`
+registerIcon("gizmo-space-world", svg`
+  <circle
+    class="tone-fill"
+    cx="12"
+    cy="12"
+    r="9"
+  />
   <path
-    d="M12 5v14M6 13l6 6 6-6"
+    d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM3 12h18M12 3c2.5 2.4 3.8 5.4 3.8 9s-1.3 6.6-3.8 9M12 3c-2.5 2.4-3.8 5.4-3.8 9s1.3 6.6 3.8 9"
     fill="none"
     stroke="currentColor"
-    stroke-width="2"
+    stroke-width="1.75"
     stroke-linecap="round"
     stroke-linejoin="round"
   />
-`, { tone: "sky" });
+`, { tone: "teal" });
+
+registerIcon("view-frame", svg`
+  <circle
+    class="tone-fill"
+    cx="12"
+    cy="12"
+    r="3.5"
+  />
+  <path
+    d="M4 9V5a1 1 0 0 1 1-1h4M15 4h4a1 1 0 0 1 1 1v4M20 15v4a1 1 0 0 1-1 1h-4M9 20H5a1 1 0 0 1-1-1v-4M15.5 12a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.75"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+`, { tone: "violet" });
diff --git a/packages/editors/scene/src/boot/EditorShell.ts b/packages/editors/scene/src/boot/EditorShell.ts
index a64e4c9ff..0eb61f08c 100644
--- a/packages/editors/scene/src/boot/EditorShell.ts
+++ b/packages/editors/scene/src/boot/EditorShell.ts
@@ -20,7 +20,7 @@ const kAttachedTags = [
   "jolly-scene-hierarchy",
   "jolly-scene-inspector",
   "jolly-scene-environment",
-  "jolly-scene-view-toolbar"
+  "jolly-scene-toolbar"
 ] as const satisfies readonly (keyof HTMLElementTagNameMap)[];
 
 export interface EditorShellOptions {
diff --git a/packages/editors/scene/src/boot/SceneEditor.ts b/packages/editors/scene/src/boot/SceneEditor.ts
index 03a136c84..72d447326 100644
--- a/packages/editors/scene/src/boot/SceneEditor.ts
+++ b/packages/editors/scene/src/boot/SceneEditor.ts
@@ -110,7 +110,8 @@ export class SceneEditor {
           context.preferences,
           SCENE_KEYBINDINGS,
           (message) => console.warn(message)
-        )
+        ),
+        keyboardLayout: context.keyboardLayout
       });
       const { sceneManager } = editorRuntime.runtime.world;
       teardown.defer(() => sceneManager.unloadScene(scene));
diff --git a/packages/editors/scene/src/components/scriptProperties.ts b/packages/editors/scene/src/components/scriptProperties.ts
index e094bc4fc..33a76844b 100644
--- a/packages/editors/scene/src/components/scriptProperties.ts
+++ b/packages/editors/scene/src/components/scriptProperties.ts
@@ -95,16 +95,20 @@ export function parseList(
   }
 }
 
-export function freePropertyKey(
+export function addProperty(
   properties: Readonly<JSONObject>,
-  base = "property"
-): string {
-  let key = base;
-  for (let suffix = 2; Object.hasOwn(properties, key); suffix++) {
-    key = `${base}${suffix}`;
+  key: string,
+  value: JSONValue
+): JSONObject {
+  const trimmed = key.trim();
+  if (trimmed === "" || Object.hasOwn(properties, trimmed)) {
+    return { ...properties };
   }
 
-  return key;
+  return {
+    ...properties,
+    [trimmed]: value
+  };
 }
 
 export function renameProperty(
@@ -112,13 +116,17 @@ export function renameProperty(
   from: string,
   to: string
 ): JSONObject {
-  if (from === to || Object.hasOwn(properties, to)) {
+  const trimmed = to.trim();
+  if (trimmed === "") {
+    return removeProperty(properties, from);
+  }
+  if (from === trimmed || Object.hasOwn(properties, trimmed)) {
     return { ...properties };
   }
 
   return Object.fromEntries(
     Object.entries(properties).map(
-      ([key, value]) => [key === from ? to : key, value]
+      ([key, value]) => [key === from ? trimmed : key, value]
     )
   );
 }
diff --git a/packages/editors/scene/src/editing/SceneEditing.ts b/packages/editors/scene/src/editing/SceneEditing.ts
index 4359803e2..bfe43ac91 100644
--- a/packages/editors/scene/src/editing/SceneEditing.ts
+++ b/packages/editors/scene/src/editing/SceneEditing.ts
@@ -7,11 +7,13 @@ import type {
   SceneDocument,
   SceneEnvironmentPatch
 } from "@jolly-pixel/asset.scene/client";
+import type { ShortcutLabels } from "@jolly-pixel/controls";
 
 // Import Internal Dependencies
 import type { SceneActions } from "./SceneActions.ts";
 import type { SceneHistory } from "../features/history/sceneHistory.ts";
 import type { GizmoSettings } from "../features/viewport/GizmoSettings.ts";
+import type { SceneAction } from "../keybindings/sceneActions.ts";
 import type { PresenceStore } from "../state/PresenceStore.ts";
 import type { SelectionStore } from "../state/SelectionStore.ts";
 
@@ -39,6 +41,7 @@ export interface SceneEditing {
   presence: PresenceStore;
   gizmo: GizmoSettings;
   assetSlots: SceneAssetSlots;
+  shortcuts: ShortcutLabels<SceneAction>;
   frameSelection(): void;
   previewEnvironment(
     patch: SceneEnvironmentPatch
diff --git a/packages/editors/scene/src/features/inspector/ComponentReorder.ts b/packages/editors/scene/src/features/inspector/ComponentReorder.ts
new file mode 100644
index 000000000..32ed5bdcf
--- /dev/null
+++ b/packages/editors/scene/src/features/inspector/ComponentReorder.ts
@@ -0,0 +1,223 @@
+// Import Third-party Dependencies
+import type {
+  ReactiveController,
+  ReactiveControllerHost
+} from "lit";
+import {
+  SlidingReorder,
+  resolveDropIndex,
+  startPointerDragSession,
+  type ContainerEventMap,
+  type Folder,
+  type PointerDragSessionHandle
+} from "@jolly-pixel/ui";
+
+// Import Internal Dependencies
+import { componentMove } from "./componentMove.ts";
+
+type FolderDragEvent = CustomEvent<ContainerEventMap["jolly-folder-drag"]>;
+type FolderReorderEvent = CustomEvent<ContainerEventMap["jolly-folder-reorder"]>;
+
+// CONSTANTS
+const kDragThreshold = 4;
+
+export interface ComponentReorderOptions {
+  folders(): Folder[];
+  move(id: string, beforeId?: string): void;
+}
+
+interface KeyboardGrab {
+  id: string;
+  order: string[];
+}
+
+export class ComponentReorder implements ReactiveController {
+  readonly #options: ComponentReorderOptions;
+  #ids: string[] | null = null;
+  #drag: PointerDragSessionHandle | null = null;
+  #grab: KeyboardGrab | null = null;
+
+  constructor(
+    host: ReactiveControllerHost,
+    options: ComponentReorderOptions
+  ) {
+    host.addController(this);
+    this.#options = options;
+  }
+
+  hostUpdated(): void {
+    if (this.#ids === null || sameOrder(this.#keys(), this.#ids)) {
+      return;
+    }
+
+    this.#drag?.cancel();
+    this.#release();
+  }
+
+  hostDisconnected(): void {
+    this.#drag?.cancel();
+    this.#release();
+  }
+
+  onDrag = (
+    event: FolderDragEvent
+  ) => {
+    event.stopPropagation();
+    const { folder, event: pointer } = event.detail;
+    const handle = pointer.currentTarget;
+    const folders = this.#options.folders();
+    const from = folders.indexOf(folder);
+    if (
+      this.#ids !== null ||
+      from === -1 ||
+      !(handle instanceof HTMLElement)
+    ) {
+      return;
+    }
+
+    const ids = folders.map(({ key }) => key);
+    let reorder: SlidingReorder | null = null;
+    let current: number | null = null;
+    this.#ids = ids;
+    this.#drag = startPointerDragSession({
+      element: handle,
+      event: pointer,
+      threshold: kDragThreshold,
+      suppressClick: true,
+      onStart: () => {
+        reorder = new SlidingReorder({
+          items: folders,
+          from,
+          axis: "y",
+          pointer: pointer.clientY
+        });
+      },
+      onMove: (clientX, clientY) => {
+        if (reorder === null) {
+          return;
+        }
+
+        current = resolveDropIndex({
+          position: clientY,
+          candidates: reorder.candidates,
+          current
+        });
+        reorder.preview(current, clientX, clientY);
+      },
+      onFinish: (result) => {
+        this.#drag = null;
+        this.#ids = null;
+        if (reorder === null) {
+          return;
+        }
+
+        const move = result === "commit" && current !== null ?
+          componentMove(ids, from, current) :
+          null;
+        void reorder.settle(() => {
+          if (move !== null) {
+            this.#options.move(move.id, move.beforeId);
+          }
+        });
+      }
+    });
+  };
+
+  onReorder = (
+    event: FolderReorderEvent
+  ) => {
+    event.stopPropagation();
+    const { folder, command } = event.detail;
+    if (command === "start") {
+      this.#start(folder.key);
+
+      return;
+    }
+
+    const grab = this.#grab;
+    if (grab === null || grab.id !== folder.key) {
+      return;
+    }
+
+    switch (command) {
+      case "up":
+      case "down":
+        this.#shift(grab, command === "up" ? -1 : 1);
+        break;
+      case "cancel":
+        this.#release();
+        break;
+      case "finish":
+        this.#finish(grab);
+        break;
+    }
+  };
+
+  #start(
+    id: string
+  ): void {
+    if (this.#ids !== null) {
+      return;
+    }
+
+    const ids = this.#keys();
+    this.#ids = ids;
+    this.#grab = {
+      id,
+      order: [...ids]
+    };
+  }
+
+  #shift(
+    grab: KeyboardGrab,
+    step: -1 | 1
+  ): void {
+    const { id, order } = grab;
+    const index = order.indexOf(id);
+    const next = index + step;
+    if (next < 0 || next >= order.length) {
+      return;
+    }
+
+    [order[index], order[next]] = [order[next], order[index]];
+    for (const folder of this.#options.folders()) {
+      folder.style.order = String(order.indexOf(folder.key));
+    }
+  }
+
+  #finish(
+    grab: KeyboardGrab
+  ): void {
+    const ids = this.#ids ?? [];
+    const from = ids.indexOf(grab.id);
+    const to = grab.order.indexOf(grab.id);
+    this.#release();
+
+    const move = componentMove(ids, from, to > from ? to + 1 : to);
+    if (move !== null) {
+      this.#options.move(move.id, move.beforeId);
+    }
+  }
+
+  #release(): void {
+    if (this.#grab !== null) {
+      for (const folder of this.#options.folders()) {
+        folder.style.order = "";
+      }
+    }
+    this.#grab = null;
+    this.#ids = null;
+  }
+
+  #keys(): string[] {
+    return this.#options.folders().map(({ key }) => key);
+  }
+}
+
+function sameOrder(
+  left: readonly string[],
+  right: readonly string[]
+): boolean {
+  return left.length === right.length &&
+    left.every((key, index) => key === right[index]);
+}
diff --git a/packages/editors/scene/src/features/inspector/InspectorPanel.ts b/packages/editors/scene/src/features/inspector/InspectorPanel.ts
index 5c661a249..b9758a28f 100644
--- a/packages/editors/scene/src/features/inspector/InspectorPanel.ts
+++ b/packages/editors/scene/src/features/inspector/InspectorPanel.ts
@@ -3,35 +3,34 @@ import {
   LitElement,
   css,
   html,
+  nothing,
   type TemplateResult
 } from "lit";
+import { repeat } from "lit/directives/repeat.js";
 import type {
   SceneActorJSON,
   SceneComponentJSON,
+  SceneDocument,
   SceneTransformField
 } from "@jolly-pixel/asset.scene/client";
 import {
   ContextMenuController,
+  FolderReorder,
   MenuSession,
   SubscriptionController,
   menuPointBelow,
   type ContextMenu,
+  type Folder,
   type JollyChangeDetail,
+  type JollyOption,
   type MenuEntry
 } from "@jolly-pixel/ui";
 import "@jolly-pixel/ui/elements/button";
-import "@jolly-pixel/ui/elements/checkbox";
-import "@jolly-pixel/ui/elements/color";
+import "@jolly-pixel/ui/elements/button-group";
 import "@jolly-pixel/ui/elements/context-menu";
 import "@jolly-pixel/ui/elements/folder";
-import "@jolly-pixel/ui/elements/number";
-import "@jolly-pixel/ui/elements/property-row";
-import "@jolly-pixel/ui/elements/select";
 import "@jolly-pixel/ui/elements/separator";
-import "@jolly-pixel/ui/elements/text";
-import "@jolly-pixel/ui/elements/vector2";
 import "@jolly-pixel/ui/elements/vector3";
-import "@jolly-pixel/ui/elements/vector4";
 
 // Import Internal Dependencies
 import "../../app/sceneIcons.ts";
@@ -40,34 +39,52 @@ import {
   SCENE_COMPONENTS
 } from "../../components/sceneComponents.ts";
 import type { SceneEditing } from "../../editing/SceneEditing.ts";
-import {
-  axisValues,
-  renderComponentBody
-} from "./componentBody.ts";
+import { axisValues } from "./axisValues.ts";
+import { renderComponentBody } from "./componentBody.ts";
 
 type ChangeEvent<TValue> = CustomEvent<JollyChangeDetail<TValue>>;
 
 // CONSTANTS
 const kAxes = ["x", "y", "z"] as const;
-const kTransformRows: readonly { field: SceneTransformField; label: string; step: number; }[] = [
+const kTransformOptions: JollyOption<SceneTransformField>[] = [
   {
-    field: "position",
-    label: "Position",
-    step: 0.1
+    value: "position",
+    label: "Position"
   },
   {
-    field: "rotation",
-    label: "Rotation",
-    step: 1
+    value: "rotation",
+    label: "Rotation"
   },
   {
-    field: "scale",
-    label: "Scale",
-    step: 0.1
+    value: "scale",
+    label: "Scale"
   }
 ];
+const kTransformSteps: Record<SceneTransformField, number> = {
+  position: 0.1,
+  rotation: 1,
+  scale: 0.1
+};
 
 export class InspectorPanel extends LitElement {
+  #transformField: SceneTransformField = "position";
+  #announcement = "";
+
+  #reorder = new FolderReorder(this, {
+    folders: () => [
+      ...this.renderRoot.querySelectorAll<Folder>(".components > jolly-folder")
+    ],
+    zone: () => this.#components(),
+    commit: (order, folder) => this.#editing.current?.document.moveComponent(
+      folder.key,
+      order[order.indexOf(folder) + 1]?.key
+    ),
+    announce: (message) => {
+      this.#announcement = message;
+      this.requestUpdate();
+    }
+  });
+
   #editing = new SubscriptionController<SceneEditing>(this, (editing) => {
     const repaint = (): void => this.requestUpdate();
 
@@ -91,8 +108,9 @@ export class InspectorPanel extends LitElement {
       gap: var(--jolly-row-gap, 4px);
       padding: var(--jolly-space-2, 8px);
       overflow: auto;
-  
+
       --jolly-label-width: 12ch;
+      --jolly-field-inset-start: 0px;
     }
 
     .empty {
@@ -100,8 +118,22 @@ export class InspectorPanel extends LitElement {
       padding: var(--jolly-space-2, 8px);
     }
 
-    .slot,
-    .property-head {
+    .components {
+      display: flex;
+      flex-direction: column;
+      gap: var(--jolly-row-gap, 4px);
+    }
+
+    .live-region {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+
+    .slot {
       display: flex;
       align-items: center;
       gap: var(--jolly-space-1, 4px);
@@ -116,13 +148,6 @@ export class InspectorPanel extends LitElement {
       white-space: nowrap;
     }
 
-    .property {
-      display: flex;
-      flex-direction: column;
-      gap: var(--jolly-row-gap, 4px);
-      padding-block: var(--jolly-space-1, 4px);
-    }
-
     .unknown {
       margin: 0;
       overflow: auto;
@@ -146,115 +171,135 @@ export class InspectorPanel extends LitElement {
     }
 
     return html`
-      ${this.#renderActor(editing, actor)}
-      <jolly-separator label="Components"></jolly-separator>
-      ${actor.components.map((component, index) => this.#renderComponent(
-        editing,
-        actor,
-        component,
-        index
-      ))}
-      <jolly-button
-        icon="plus"
-        aria-haspopup="menu"
-        @click=${(event: MouseEvent) => this.#openAddComponent(event, editing, actor.id)}
-      >Add component</jolly-button>
+      ${this.#renderActor(editing.document, actor)}
+      <jolly-separator label="Components">
+        <jolly-button
+          slot="actions"
+          icon="plus"
+          icon-only
+          label="Add component"
+          title="Add component"
+          aria-haspopup="menu"
+          @click=${(event: MouseEvent) => this.#openAddComponent(event, editing, actor.id)}
+        ></jolly-button>
+      </jolly-separator>
+      ${actor.components.length === 0 ? nothing : html`
+        <div
+          class="components"
+          @jolly-folder-drag=${this.#reorder.onDrag}
+          @jolly-folder-reorder=${this.#reorder.onReorder}
+        >
+          ${repeat(
+            actor.components,
+            (component) => component.id,
+            (component) => this.#renderComponent(
+              editing,
+              component,
+              actor.components.length > 1
+            )
+          )}
+        </div>
+      `}
       <jolly-context-menu
         label="Add component"
         @jolly-context-action=${this.#menu.onContextAction}
       ></jolly-context-menu>
+      <span class="live-region" aria-live="polite">${this.#announcement}</span>
     `;
   }
 
   #renderActor(
-    editing: SceneEditing,
+    document: SceneDocument,
+    actor: SceneActorJSON
+  ): TemplateResult {
+    return html`
+      <jolly-folder
+        key="actor"
+        label=${actor.name}
+        storage-key="scene-inspector:actor"
+        flush
+      >
+        <jolly-button
+          slot="actions"
+          icon="eye"
+          icon-only
+          label="Visible"
+          title=${actor.visible ? "Hide" : "Show"}
+          .pressed=${actor.visible}
+          @click=${() => document.changeVisibility(actor.id, !actor.visible)}
+        ></jolly-button>
+        ${this.#renderTransform(document, actor)}
+      </jolly-folder>
+    `;
+  }
+
+  #renderTransform(
+    document: SceneDocument,
     actor: SceneActorJSON
   ): TemplateResult {
-    const { document } = editing;
+    const field = this.#transformField;
+    const current = actor.transform[field];
 
     return html`
-      <jolly-text
-        label="Name"
-        .value=${actor.name}
-        @jolly-change=${(event: ChangeEvent<string>) => {
-          const name = event.detail.value.trim();
-          if (name !== "") {
-            document.rename(actor.id, name);
-          }
+      <jolly-button-group
+        aria-label="Transform"
+        .options=${kTransformOptions}
+        .value=${field}
+        @jolly-change=${(event: ChangeEvent<SceneTransformField>) => {
+          this.#transformField = event.detail.value;
+          this.requestUpdate();
+        }}
+      ></jolly-button-group>
+      <jolly-vector3
+        .step=${kTransformSteps[field]}
+        .value=${{ ...current }}
+        @jolly-change=${(event: ChangeEvent<Record<string, unknown>>) => {
+          const [x, y, z] = axisValues(
+            event.detail.value,
+            kAxes,
+            kAxes.map((axis) => current[axis])
+          );
+          document.transform(actor.id, { [field]: { x, y, z } });
         }}
-      ></jolly-text>
-      <jolly-checkbox
-        label="Visible"
-        .value=${actor.visible}
-        @jolly-change=${(event: ChangeEvent<boolean>) => document.changeVisibility(
-          actor.id,
-          event.detail.value
-        )}
-      ></jolly-checkbox>
-      ${kTransformRows.map(({ field, label, step }) => html`
-        <jolly-vector3
-          label=${label}
-          .step=${step}
-          .value=${{ ...actor.transform[field] }}
-          @jolly-change=${(event: ChangeEvent<Record<string, unknown>>) => {
-            const current = actor.transform[field];
-            const [x, y, z] = axisValues(
-              event.detail.value,
-              kAxes,
-              kAxes.map((axis) => current[axis])
-            );
-            document.transform(actor.id, { [field]: { x, y, z } });
-          }}
-        ></jolly-vector3>
-      `)}
+      ></jolly-vector3>
     `;
   }
 
   #renderComponent(
     editing: SceneEditing,
-    actor: SceneActorJSON,
     component: SceneComponentJSON,
-    index: number
+    reorderable: boolean
   ): TemplateResult {
-    const { document } = editing;
-    const siblings = actor.components;
-
     return html`
       <jolly-folder
+        key=${component.id}
         label=${component.type}
         storage-key=${`scene-inspector:${component.id}`}
+        ?reorderable=${reorderable}
+        flush
       >
-        <jolly-button
-          slot="actions"
-          icon="move-up"
-          icon-only
-          label="Move up"
-          title="Move up"
-          ?disabled=${index === 0}
-          @click=${() => document.moveComponent(component.id, siblings[index - 1]?.id)}
-        ></jolly-button>
-        <jolly-button
-          slot="actions"
-          icon="move-down"
-          icon-only
-          label="Move down"
-          title="Move down"
-          ?disabled=${index === siblings.length - 1}
-          @click=${() => document.moveComponent(component.id, siblings[index + 2]?.id)}
-        ></jolly-button>
         <jolly-button
           slot="actions"
           icon="action-delete"
           icon-only
           label="Remove component"
           title="Remove component"
-          @click=${() => document.removeComponent(component.id)}
+          @click=${() => editing.document.removeComponent(component.id)}
         ></jolly-button>
         ${renderComponentBody(component, editing)}
       </jolly-folder>
     `;
   }
 
+  #components(): HTMLElement {
+    const components = this.renderRoot.querySelector<HTMLElement>(".components");
+    if (components === null) {
+      throw new Error("InspectorPanel: the component list is not rendered.");
+    }
+
+    return components;
+  }
+
   #contextMenu(): ContextMenu {
     const menu = this.renderRoot.querySelector("jolly-context-menu");
     if (menu === null) {
diff --git a/packages/editors/scene/src/features/inspector/ScriptPropertiesEditor.ts b/packages/editors/scene/src/features/inspector/ScriptPropertiesEditor.ts
new file mode 100644
index 000000000..143731cb5
--- /dev/null
+++ b/packages/editors/scene/src/features/inspector/ScriptPropertiesEditor.ts
@@ -0,0 +1,399 @@
+// Import Third-party Dependencies
+import {
+  LitElement,
+  css,
+  html,
+  nothing,
+  type TemplateResult
+} from "lit";
+import { live } from "lit/directives/live.js";
+import { repeat } from "lit/directives/repeat.js";
+import type {
+  JSONObject,
+  JSONValue
+} from "@jolly-pixel/asset.scene/client";
+import {
+  SCENE_PROPERTY_TYPES,
+  type ScenePropertyType
+} from "@jolly-pixel/engine";
+import type {
+  JollyChangeDetail,
+  JollyOption
+} from "@jolly-pixel/ui";
+import "@jolly-pixel/ui/elements/button";
+import "@jolly-pixel/ui/elements/checkbox";
+import "@jolly-pixel/ui/elements/color";
+import "@jolly-pixel/ui/elements/number";
+import "@jolly-pixel/ui/elements/select";
+import "@jolly-pixel/ui/elements/text";
+import "@jolly-pixel/ui/elements/vector2";
+import "@jolly-pixel/ui/elements/vector3";
+import "@jolly-pixel/ui/elements/vector4";
+
+// Import Internal Dependencies
+import {
+  addProperty,
+  convertProperty,
+  listText,
+  parseList,
+  removeProperty,
+  renameProperty,
+  scriptProperties,
+  type ScriptListType,
+  type ScriptProperty
+} from "../../components/scriptProperties.ts";
+import { axisValues } from "./axisValues.ts";
+
+export interface ScriptPropertiesChangeDetail {
+  properties: JSONObject;
+}
+
+interface KeyError {
+  row: string | null;
+  message: string;
+}
+
+interface RowEdit {
+  rename: (key: string) => void;
+  retype: (type: ScenePropertyType) => void;
+  setValue: (value: JSONValue) => void;
+}
+
+type ChangeEvent<TValue> = CustomEvent<JollyChangeDetail<TValue>>;
+
+// CONSTANTS
+const kChangeEvent = "script-properties-change";
+const kVectorAxes = ["x", "y", "z", "w"] as const;
+const kWideTypes: ReadonlySet<ScenePropertyType> = new Set([
+  "Vector2",
+  "Vector3",
+  "Vector4",
+  "Color",
+  "number[]",
+  "string[]",
+  "boolean[]"
+]);
+const kTypeOptions: JollyOption<ScenePropertyType>[] = SCENE_PROPERTY_TYPES.map(
+  (type) => {
+    return {
+      value: type,
+      label: type[0].toUpperCase() + type.slice(1)
+    };
+  }
+);
+
+export class ScriptPropertiesEditor extends LitElement {
+  #properties: Readonly<JSONObject> = {};
+  #draft = emptyDraft();
+  #keyError: KeyError | null = null;
+
+  static override styles = css`
+    :host {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr) auto;
+      align-items: center;
+      gap: var(--jolly-row-gap, 4px) var(--jolly-space-1, 4px);
+      padding-inline: var(--jolly-space-1, 4px);
+
+      --jolly-field-inset-end: 0px;
+    }
+
+    .property {
+      display: contents;
+    }
+
+    .property > * {
+      min-width: 0;
+    }
+
+    .remove {
+      grid-column: 4;
+    }
+
+    .wide-value {
+      grid-column: 1 / -1;
+    }
+
+    .draft .value {
+      grid-column: 3 / -1;
+    }
+  `;
+
+  set properties(
+    value: Readonly<JSONObject>
+  ) {
+    this.#properties = value;
+    this.requestUpdate();
+  }
+
+  override render(): TemplateResult {
+    return html`
+      ${repeat(
+        scriptProperties(this.#properties),
+        (property) => property.key,
+        (property) => this.#renderProperty(property)
+      )}
+      ${this.#renderDraft()}
+    `;
+  }
+
+  #renderProperty(
+    property: ScriptProperty
+  ): TemplateResult {
+    const setValue = (value: JSONValue): void => this.#write({
+      ...this.#properties,
+      [property.key]: value
+    });
+
+    return this.#renderRow(
+      property,
+      property.key,
+      {
+        rename: (key) => this.#rename(property.key, key),
+        retype: (type) => setValue(convertProperty(property.value, type)),
+        setValue
+      }
+    );
+  }
+
+  #renderDraft(): TemplateResult {
+    const draft = this.#draft;
+
+    return this.#renderRow(
+      draft,
+      null,
+      {
+        rename: (key) => this.#add(key),
+        retype: (type) => this.#editDraft({
+          ...draft,
+          type,
+          value: convertProperty(draft.value, type)
+        }),
+        setValue: (value) => this.#editDraft({
+          ...draft,
+          value
+        })
+      }
+    );
+  }
+
+  #renderRow(
+    property: ScriptProperty,
+    row: string | null,
+    edit: RowEdit
+  ): TemplateResult {
+    const error = this.#keyError?.row === row ? this.#keyError.message : null;
+    const wide = kWideTypes.has(property.type);
+    const value = renderValue(property, edit.setValue);
+
+    return html`
+      <div class=${row === null ? "property draft" : "property"}>
+        <jolly-text
+          label=""
+          placeholder=${row === null ? "New property" : nothing}
+          .value=${live(property.key)}
+          .error=${error}
+          @jolly-change=${(event: ChangeEvent<string>) => edit.rename(event.detail.value)}
+        ></jolly-text>
+        <jolly-select
+          label=""
+          .options=${kTypeOptions}
+          .value=${property.type}
+          @jolly-change=${(event: ChangeEvent<ScenePropertyType>) => edit.retype(event.detail.value)}
+        ></jolly-select>
+        ${wide ? nothing : html`<div class="value">${value}</div>`}
+        ${row === null ? nothing : html`
+          <jolly-button
+            class="remove"
+            icon="action-delete"
+            icon-only
+            label="Remove property"
+            title="Remove property"
+            @click=${() => this.#write(removeProperty(this.#properties, row))}
+          ></jolly-button>
+        `}
+        ${wide ? html`<div class="wide-value">${value}</div>` : nothing}
+      </div>
+    `;
+  }
+
+  #add(
+    key: string
+  ): void {
+    const trimmed = key.trim();
+    if (trimmed === "") {
+      this.#editDraft({
+        ...this.#draft,
+        key: ""
+      });
+
+      return;
+    }
+    if (Object.hasOwn(this.#properties, trimmed)) {
+      this.#draft = {
+        ...this.#draft,
+        key: trimmed
+      };
+      this.#refuseKey(null);
+
+      return;
+    }
+
+    const { value } = this.#draft;
+    this.#draft = emptyDraft();
+    this.#write(addProperty(this.#properties, trimmed, value));
+  }
+
+  #rename(
+    from: string,
+    to: string
+  ): void {
+    const trimmed = to.trim();
+    if (trimmed === from) {
+      return;
+    }
+    if (Object.hasOwn(this.#properties, trimmed)) {
+      this.#refuseKey(from);
+
+      return;
+    }
+
+    this.#write(renameProperty(this.#properties, from, trimmed));
+  }
+
+  #refuseKey(
+    row: string | null
+  ): void {
+    this.#keyError = {
+      row,
+      message: "Already exists"
+    };
+    this.requestUpdate();
+  }
+
+  #editDraft(
+    draft: ScriptProperty
+  ): void {
+    this.#draft = draft;
+    this.#keyError = null;
+    this.requestUpdate();
+  }
+
+  #write(
+    properties: JSONObject
+  ): void {
+    this.#keyError = null;
+    this.dispatchEvent(new CustomEvent<ScriptPropertiesChangeDetail>(
+      kChangeEvent,
+      {
+        detail: { properties }
+      }
+    ));
+  }
+}
+
+function emptyDraft(): ScriptProperty {
+  return {
+    key: "",
+    type: "number",
+    value: 0
+  };
+}
+
+function renderValue(
+  property: ScriptProperty,
+  setValue: (value: JSONValue) => void
+): TemplateResult {
+  const { type, value } = property;
+  switch (type) {
+    case "number":
+      return html`
+        <jolly-number
+          label=""
+          .value=${Number(value)}
+          step="0.1"
+          @jolly-change=${(event: ChangeEvent<number>) => setValue(event.detail.value)}
+        ></jolly-number>
+      `;
+    case "boolean":
+      return html`
+        <jolly-checkbox
+          label=""
+          .value=${value === true}
+          @jolly-change=${(event: ChangeEvent<boolean>) => setValue(event.detail.value)}
+        ></jolly-checkbox>
+      `;
+    case "Color":
+      return html`
+        <jolly-color
+          label=""
+          .value=${String(value)}
+          @jolly-change=${(event: ChangeEvent<string>) => setValue(event.detail.value)}
+        ></jolly-color>
+      `;
+    case "string":
+      return html`
+        <jolly-text
+          label=""
+          placeholder="value"
+          .value=${String(value)}
+          @jolly-change=${(event: ChangeEvent<string>) => setValue(event.detail.value)}
+        ></jolly-text>
+      `;
+    case "Vector2":
+    case "Vector3":
+    case "Vector4":
+      return renderVector(type, value, setValue);
+    case "number[]":
+    case "string[]":
+    case "boolean[]":
+      return renderList(type, value, setValue);
+  }
+}
+
+function renderList(
+  type: ScriptListType,
+  value: JSONValue,
+  setValue: (value: JSONValue) => void
+): TemplateResult {
+  return html`
+    <jolly-text
+      label=""
+      placeholder="a, b, c"
+      .value=${listText(value)}
+      @jolly-change=${(event: ChangeEvent<string>) => setValue(parseList(event.detail.value, type))}
+    ></jolly-text>
+  `;
+}
+
+function renderVector(
+  type: "Vector2" | "Vector3" | "Vector4",
+  value: JSONValue,
+  setValue: (value: JSONValue) => void
+): TemplateResult {
+  const numbers = (Array.isArray(value) ? value : []).map(Number);
+  const axes = kVectorAxes.slice(0, Number(type.at(-1)));
+  const vector = Object.fromEntries(
+    axes.map((axis, index) => [axis, numbers[index] ?? 0])
+  );
+  function commit(event: ChangeEvent<Record<string, unknown>>): void {
+    setValue(axisValues(event.detail.value, axes, numbers));
+  }
+
+  switch (type) {
+    case "Vector2":
+      return html`<jolly-vector2 .value=${vector} @jolly-change=${commit}></jolly-vector2>`;
+    case "Vector3":
+      return html`<jolly-vector3 .value=${vector} @jolly-change=${commit}></jolly-vector3>`;
+    case "Vector4":
+      return html`<jolly-vector4 .value=${vector} @jolly-change=${commit}></jolly-vector4>`;
+  }
+}
+
+customElements.define("jolly-scene-script-properties", ScriptPropertiesEditor);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "jolly-scene-script-properties": ScriptPropertiesEditor;
+  }
+}
diff --git a/packages/editors/scene/src/features/inspector/axisValues.ts b/packages/editors/scene/src/features/inspector/axisValues.ts
new file mode 100644
index 000000000..f1ccfbf73
--- /dev/null
+++ b/packages/editors/scene/src/features/inspector/axisValues.ts
@@ -0,0 +1,11 @@
+export function axisValues(
+  value: Readonly<Record<string, unknown>>,
+  axes: readonly string[],
+  current: readonly number[]
+): number[] {
+  return axes.map((axis, index) => {
+    const next = value[axis];
+
+    return typeof next === "number" ? next : current[index] ?? 0;
+  });
+}
diff --git a/packages/editors/scene/src/features/inspector/componentBody.ts b/packages/editors/scene/src/features/inspector/componentBody.ts
index c1d3bc6c4..c8abf27d2 100644
--- a/packages/editors/scene/src/features/inspector/componentBody.ts
+++ b/packages/editors/scene/src/features/inspector/componentBody.ts
@@ -10,15 +10,8 @@ import type {
   JSONValue,
   SceneComponentJSON
 } from "@jolly-pixel/asset.scene/client";
-import {
-  SCENE_PROPERTY_TYPES,
-  Systems,
-  type ScenePropertyType
-} from "@jolly-pixel/engine";
-import type {
-  JollyChangeDetail,
-  JollyOption
-} from "@jolly-pixel/ui";
+import { Systems } from "@jolly-pixel/engine";
+import type { JollyChangeDetail } from "@jolly-pixel/ui";
 import "@jolly-pixel/ui/elements/button";
 import "@jolly-pixel/ui/elements/checkbox";
 import "@jolly-pixel/ui/elements/color";
@@ -27,9 +20,6 @@ import "@jolly-pixel/ui/elements/property-row";
 import "@jolly-pixel/ui/elements/select";
 import "@jolly-pixel/ui/elements/separator";
 import "@jolly-pixel/ui/elements/text";
-import "@jolly-pixel/ui/elements/vector2";
-import "@jolly-pixel/ui/elements/vector3";
-import "@jolly-pixel/ui/elements/vector4";
 
 // Import Internal Dependencies
 import {
@@ -40,18 +30,9 @@ import {
   componentAssetSlots,
   sceneComponent
 } from "../../components/sceneComponents.ts";
-import {
-  convertProperty,
-  freePropertyKey,
-  listText,
-  parseList,
-  removeProperty,
-  renameProperty,
-  scriptProperties,
-  type ScriptListType,
-  type ScriptProperty
-} from "../../components/scriptProperties.ts";
 import type { SceneEditing } from "../../editing/SceneEditing.ts";
+import "./ScriptPropertiesEditor.ts";
+import type { ScriptPropertiesChangeDetail } from "./ScriptPropertiesEditor.ts";
 
 export type ComponentBodyContext = Pick<
   SceneEditing,
@@ -60,17 +41,6 @@ export type ComponentBodyContext = Pick<
 
 type ChangeEvent<TValue> = CustomEvent<JollyChangeDetail<TValue>>;
 
-// CONSTANTS
-const kVectorAxes = ["x", "y", "z", "w"] as const;
-const kScriptTypeOptions: JollyOption<ScenePropertyType>[] = SCENE_PROPERTY_TYPES.map(
-  (type) => {
-    return {
-      value: type,
-      label: type[0].toUpperCase() + type.slice(1)
-    };
-  }
-);
-
 export function renderComponentBody(
   entry: SceneComponentJSON,
   context: ComponentBodyContext
@@ -96,18 +66,6 @@ export function renderComponentBody(
   `;
 }
 
-export function axisValues(
-  value: Readonly<Record<string, unknown>>,
-  axes: readonly string[],
-  current: readonly number[]
-): number[] {
-  return axes.map((axis, index) => {
-    const next = value[axis];
-
-    return typeof next === "number" ? next : current[index] ?? 0;
-  });
-}
-
 function renderRow(
   inspected: InspectedRow,
   commit: (next: JSONValue) => void
@@ -216,154 +174,15 @@ function renderProperties(
   properties: Readonly<JSONObject>,
   write: (next: JSONObject) => void
 ): TemplateResult {
-  function add(): void {
-    write({
-      ...properties,
-      [freePropertyKey(properties)]: 0
-    });
+  function change(event: CustomEvent<ScriptPropertiesChangeDetail>): void {
+    write(event.detail.properties);
   }
 
   return html`
     <jolly-separator label=${label}></jolly-separator>
-    ${scriptProperties(properties).map((property) => renderScriptProperty(
-      property,
-      properties,
-      write
-    ))}
-    <jolly-button icon="plus" @click=${add}>Add property</jolly-button>
-  `;
-}
-
-function renderScriptProperty(
-  property: ScriptProperty,
-  properties: Readonly<JSONObject>,
-  write: (next: JSONObject) => void
-): TemplateResult {
-  function setValue(value: JSONValue): void {
-    write({
-      ...properties,
-      [property.key]: value
-    });
-  }
-
-  return html`
-    <div class="property">
-      <div class="property-head">
-        <jolly-text
-          label=""
-          .value=${property.key}
-          @jolly-change=${(event: ChangeEvent<string>) => {
-            const key = event.detail.value.trim();
-            if (key !== "") {
-              write(renameProperty(properties, property.key, key));
-            }
-          }}
-        ></jolly-text>
-        <jolly-select
-          label=""
-          .options=${kScriptTypeOptions}
-          .value=${property.type}
-          @jolly-change=${(event: ChangeEvent<ScenePropertyType>) => setValue(
-            convertProperty(property.value, event.detail.value)
-          )}
-        ></jolly-select>
-        <jolly-button
-          icon="action-delete"
-          icon-only
-          label="Remove property"
-          title="Remove property"
-          @click=${() => write(removeProperty(properties, property.key))}
-        ></jolly-button>
-      </div>
-      ${renderPropertyValue(property, setValue)}
-    </div>
-  `;
-}
-
-function renderPropertyValue(
-  property: ScriptProperty,
-  setValue: (value: JSONValue) => void
-): TemplateResult {
-  const { type, value } = property;
-  switch (type) {
-    case "number":
-      return html`
-        <jolly-number
-          label="Value"
-          .value=${Number(value)}
-          step="0.1"
-          @jolly-change=${(event: ChangeEvent<number>) => setValue(event.detail.value)}
-        ></jolly-number>
-      `;
-    case "boolean":
-      return html`
-        <jolly-checkbox
-          label="Value"
-          .value=${value === true}
-          @jolly-change=${(event: ChangeEvent<boolean>) => setValue(event.detail.value)}
-        ></jolly-checkbox>
-      `;
-    case "Color":
-      return html`
-        <jolly-color
-          label="Value"
-          .value=${String(value)}
-          @jolly-change=${(event: ChangeEvent<string>) => setValue(event.detail.value)}
-        ></jolly-color>
-      `;
-    case "string":
-      return html`
-        <jolly-text
-          label="Value"
-          .value=${String(value)}
-          @jolly-change=${(event: ChangeEvent<string>) => setValue(event.detail.value)}
-        ></jolly-text>
-      `;
-    case "Vector2":
-    case "Vector3":
-    case "Vector4":
-      return renderVector(type, value, setValue);
-    case "number[]":
-    case "string[]":
-    case "boolean[]":
-      return renderList(type, value, setValue);
-  }
-}
-
-function renderList(
-  type: ScriptListType,
-  value: JSONValue,
-  setValue: (value: JSONValue) => void
-): TemplateResult {
-  return html`
-    <jolly-text
-      label="Values"
-      .value=${listText(value)}
-      @jolly-change=${(event: ChangeEvent<string>) => setValue(parseList(event.detail.value, type))}
-    ></jolly-text>
+    <jolly-scene-script-properties
+      .properties=${properties}
+      @script-properties-change=${change}
+    ></jolly-scene-script-properties>
   `;
 }
-
-function renderVector(
-  type: "Vector2" | "Vector3" | "Vector4",
-  value: JSONValue,
-  setValue: (value: JSONValue) => void
-): TemplateResult {
-  const numbers = (Array.isArray(value) ? value : []).map(Number);
-  const axes = kVectorAxes.slice(0, Number(type.at(-1)));
-  const vector = Object.fromEntries(
-    axes.map((axis, index) => [axis, numbers[index] ?? 0])
-  );
-  function commit(event: ChangeEvent<Record<string, unknown>>): void {
-    setValue(axisValues(event.detail.value, axes, numbers));
-  }
-
-  switch (type) {
-    case "Vector2":
-      return html`<jolly-vector2 label="Value" .value=${vector} @jolly-change=${commit}></jolly-vector2>`;
-    case "Vector3":
-      return html`<jolly-vector3 label="Value" .value=${vector} @jolly-change=${commit}></jolly-vector3>`;
-    case "Vector4":
-      return html`<jolly-vector4 label="Value" .value=${vector} @jolly-change=${commit}></jolly-vector4>`;
-  }
-}
diff --git a/packages/editors/scene/src/features/inspector/componentMove.ts b/packages/editors/scene/src/features/inspector/componentMove.ts
new file mode 100644
index 000000000..09e5d5854
--- /dev/null
+++ b/packages/editors/scene/src/features/inspector/componentMove.ts
@@ -0,0 +1,25 @@
+export interface ComponentMove {
+  id: string;
+  beforeId?: string;
+}
+
+export function componentMove(
+  ids: readonly string[],
+  from: number,
+  insertion: number
+): ComponentMove | null {
+  const id = ids[from];
+  const slot = Math.min(Math.max(insertion, 0), ids.length);
+  if (id === undefined || slot === from || slot === from + 1) {
+    return null;
+  }
+
+  const beforeId = ids[slot];
+
+  return beforeId === undefined ?
+    { id } :
+    {
+      id,
+      beforeId
+    };
+}
diff --git a/packages/editors/scene/src/features/viewport/SceneToolbar.styles.ts b/packages/editors/scene/src/features/viewport/SceneToolbar.styles.ts
new file mode 100644
index 000000000..4118551ed
--- /dev/null
+++ b/packages/editors/scene/src/features/viewport/SceneToolbar.styles.ts
@@ -0,0 +1,31 @@
+// Import Third-party Dependencies
+import { css } from "lit";
+
+export const sceneToolbarStyles = css`
+  :host {
+    display: inline-flex;
+  }
+
+  .group {
+    display: flex;
+    align-items: center;
+  }
+
+  .divided::before {
+    content: "";
+    flex: 0 0 auto;
+    width: 1px;
+    height: 22px;
+    margin-inline: 6px;
+    background: var(--jolly-divider);
+  }
+
+  jolly-tool-button {
+    --jolly-tool-button-size: 30px;
+    --jolly-tool-button-gap: 10px;
+  }
+
+  jolly-tool-button::part(button) {
+    border-radius: var(--jolly-radius-sm, 2px);
+  }
+`;
diff --git a/packages/editors/scene/src/features/viewport/SceneToolbar.ts b/packages/editors/scene/src/features/viewport/SceneToolbar.ts
new file mode 100644
index 000000000..84f8ed6b8
--- /dev/null
+++ b/packages/editors/scene/src/features/viewport/SceneToolbar.ts
@@ -0,0 +1,179 @@
+// Import Third-party Dependencies
+import {
+  LitElement,
+  html,
+  nothing,
+  type TemplateResult
+} from "lit";
+import { SubscriptionController } from "@jolly-pixel/ui";
+import "@jolly-pixel/ui/elements/rail";
+import "@jolly-pixel/ui/elements/tool-button";
+
+// Import Internal Dependencies
+import "../../app/sceneIcons.ts";
+import type { SceneEditing } from "../../editing/SceneEditing.ts";
+import type { SceneAction } from "../../keybindings/sceneActions.ts";
+import { SCENE_HISTORY_SCOPE } from "../history/sceneHistory.ts";
+import type { GizmoMode } from "./GizmoSettings.ts";
+import { sceneToolbarStyles } from "./SceneToolbar.styles.ts";
+
+// CONSTANTS
+const kModes: readonly {
+  mode: GizmoMode;
+  icon: string;
+  label: string;
+  action: SceneAction;
+}[] = [
+  {
+    mode: "translate",
+    icon: "gizmo-translate",
+    label: "Move",
+    action: "gizmo.translate"
+  },
+  {
+    mode: "rotate",
+    icon: "gizmo-rotate",
+    label: "Rotate",
+    action: "gizmo.rotate"
+  },
+  {
+    mode: "scale",
+    icon: "gizmo-scale",
+    label: "Scale",
+    action: "gizmo.scale"
+  }
+];
+
+export class SceneToolbar extends LitElement {
+  #editing = new SubscriptionController<SceneEditing>(this, (editing) => {
+    const repaint = (): void => this.requestUpdate();
+
+    return [
+      editing.gizmo.subscribe("change", repaint),
+      editing.history.subscribe("change", repaint),
+      editing.selection.subscribe("change", repaint),
+      editing.shortcuts.subscribe(repaint)
+    ];
+  });
+
+  static override styles = sceneToolbarStyles;
+
+  attach(
+    editing: SceneEditing
+  ): void {
+    this.#editing.attach(editing);
+  }
+
+  override render(): TemplateResult | typeof nothing {
+    const editing = this.#editing.current;
+    if (editing === null) {
+      return nothing;
+    }
+
+    return html`
+      <jolly-rail
+        orientation="horizontal"
+        floating
+        role="toolbar"
+        aria-label="Scene tools"
+      >
+        ${this.#renderHistory(editing)}
+        ${this.#renderGizmo(editing)}
+        ${this.#renderView(editing)}
+      </jolly-rail>
+    `;
+  }
+
+  #renderHistory(
+    editing: SceneEditing
+  ): TemplateResult {
+    const { history, shortcuts } = editing;
+    const { undoCount, redoCount } = history.state(SCENE_HISTORY_SCOPE);
+
+    return html`
+      <div class="group" role="group" aria-label="History">
+        <jolly-tool-button
+          data-tool="undo"
+          icon="undo"
+          flyout-side="above"
+          label=${shortcuts.label("Undo", "edit.undo")}
+          .count=${undoCount}
+          ?disabled=${undoCount === 0}
+          @click=${() => history.undo(SCENE_HISTORY_SCOPE)}
+        ></jolly-tool-button>
+        <jolly-tool-button
+          data-tool="redo"
+          icon="redo"
+          flyout-side="above"
+          label=${shortcuts.label("Redo", "edit.redo")}
+          .count=${redoCount}
+          ?disabled=${redoCount === 0}
+          @click=${() => history.redo(SCENE_HISTORY_SCOPE)}
+        ></jolly-tool-button>
+      </div>
+    `;
+  }
+
+  #renderGizmo(
+    editing: SceneEditing
+  ): TemplateResult {
+    const { gizmo, shortcuts } = editing;
+    const local = gizmo.space === "local";
+
+    return html`
+      <div class="group divided" role="group" aria-label="Gizmo">
+        ${kModes.map(({ mode, icon, label, action }) => html`
+          <jolly-tool-button
+            data-tool=${mode}
+            icon=${icon}
+            flyout-side="above"
+            label=${shortcuts.label(label, action)}
+            ?active=${gizmo.mode === mode}
+            @click=${() => {
+              gizmo.mode = mode;
+            }}
+          ></jolly-tool-button>
+        `)}
+      </div>
+      <div class="group divided" role="group" aria-label="Axes">
+        <jolly-tool-button
+          data-tool="space"
+          icon=${local ? "gizmo-space-local" : "gizmo-space-world"}
+          flyout-side="above"
+          label=${shortcuts.label(
+            local ? "Local axes" : "World axes",
+            "gizmo.space"
+          )}
+          @click=${() => gizmo.toggleSpace()}
+        ></jolly-tool-button>
+      </div>
+    `;
+  }
+
+  #renderView(
+    editing: SceneEditing
+  ): TemplateResult {
+    const { selection, shortcuts } = editing;
+
+    return html`
+      <div class="group divided" role="group" aria-label="View">
+        <jolly-tool-button
+          data-tool="frame"
+          icon="view-frame"
+          flyout-side="above"
+          label=${shortcuts.label("Frame selection", "view.frame")}
+          ?disabled=${selection.ids.length === 0}
+          @click=${() => editing.frameSelection()}
+        ></jolly-tool-button>
+      </div>
+    `;
+  }
+}
+
+customElements.define("jolly-scene-toolbar", SceneToolbar);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "jolly-scene-toolbar": SceneToolbar;
+  }
+}
diff --git a/packages/editors/scene/src/features/viewport/ViewToolbar.ts b/packages/editors/scene/src/features/viewport/ViewToolbar.ts
deleted file mode 100644
index 35793e1de..000000000
--- a/packages/editors/scene/src/features/viewport/ViewToolbar.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-// Import Third-party Dependencies
-import {
-  LitElement,
-  css,
-  html,
-  nothing,
-  type TemplateResult
-} from "lit";
-import { SubscriptionController } from "@jolly-pixel/ui";
-import "@jolly-pixel/ui/elements/tool-button";
-import "@jolly-pixel/ui/elements/toolbar";
-
-// Import Internal Dependencies
-import "../../app/sceneIcons.ts";
-import type { SceneEditing } from "../../editing/SceneEditing.ts";
-import { SCENE_HISTORY_SCOPE } from "../history/sceneHistory.ts";
-import type { GizmoMode } from "./GizmoSettings.ts";
-
-// CONSTANTS
-const kModes: readonly { mode: GizmoMode; icon: string; label: string; }[] = [
-  {
-    mode: "translate",
-    icon: "gizmo-translate",
-    label: "Move"
-  },
-  {
-    mode: "rotate",
-    icon: "gizmo-rotate",
-    label: "Rotate"
-  },
-  {
-    mode: "scale",
-    icon: "gizmo-scale",
-    label: "Scale"
-  }
-];
-
-export class ViewToolbar extends LitElement {
-  #editing = new SubscriptionController<SceneEditing>(this, (editing) => {
-    const repaint = (): void => this.requestUpdate();
-
-    return [
-      editing.gizmo.subscribe("change", repaint),
-      editing.history.subscribe("change", repaint)
-    ];
-  });
-
-  static override styles = css`
-    :host {
-      display: inline-flex;
-    }
-  `;
-
-  attach(
-    editing: SceneEditing
-  ): void {
-    this.#editing.attach(editing);
-  }
-
-  override render(): TemplateResult | typeof nothing {
-    const editing = this.#editing.current;
-    if (editing === null) {
-      return nothing;
-    }
-
-    const { gizmo, history } = editing;
-    const state = history.state(SCENE_HISTORY_SCOPE);
-
-    return html`
-      <jolly-toolbar label="Scene tools">
-        ${kModes.map(({ mode, icon, label }) => html`
-          <jolly-tool-button
-            icon=${icon}
-            label=${label}
-            ?active=${gizmo.mode === mode}
-            @click=${() => {
-              gizmo.mode = mode;
-            }}
-          ></jolly-tool-button>
-        `)}
-        <jolly-tool-button
-          icon=${gizmo.space === "local" ? "actor-mesh" : "scene-environment"}
-          label=${gizmo.space === "local" ? "Local axes" : "World axes"}
-          @click=${() => gizmo.toggleSpace()}
-        ></jolly-tool-button>
-        <jolly-tool-button
-          icon="undo"
-          label="Undo"
-          ?disabled=${state.undoCount === 0}
-          @click=${() => history.undo(SCENE_HISTORY_SCOPE)}
-        ></jolly-tool-button>
-        <jolly-tool-button
-          icon="redo"
-          label="Redo"
-          ?disabled=${state.redoCount === 0}
-          @click=${() => history.redo(SCENE_HISTORY_SCOPE)}
-        ></jolly-tool-button>
-      </jolly-toolbar>
-    `;
-  }
-}
-
-customElements.define("jolly-scene-view-toolbar", ViewToolbar);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "jolly-scene-view-toolbar": ViewToolbar;
-  }
-}
diff --git a/packages/editors/scene/src/index.ts b/packages/editors/scene/src/index.ts
index 0e74bfffe..eeea4719e 100644
--- a/packages/editors/scene/src/index.ts
+++ b/packages/editors/scene/src/index.ts
@@ -13,7 +13,7 @@ import "./app/sceneIcons.ts";
 import "./features/hierarchy/HierarchyPanel.ts";
 import "./features/inspector/InspectorPanel.ts";
 import "./features/environment/ScenePanel.ts";
-import "./features/viewport/ViewToolbar.ts";
+import "./features/viewport/SceneToolbar.ts";
 import { SceneEditor } from "./boot/SceneEditor.ts";
 
 declare global {
diff --git a/packages/editors/scene/src/scene/SceneEditorScene.ts b/packages/editors/scene/src/scene/SceneEditorScene.ts
index 67016deb0..ab98597db 100644
--- a/packages/editors/scene/src/scene/SceneEditorScene.ts
+++ b/packages/editors/scene/src/scene/SceneEditorScene.ts
@@ -3,7 +3,11 @@ import {
   OrbitFlyCamera,
   Systems
 } from "@jolly-pixel/engine";
-import type { KeyBindingSettings } from "@jolly-pixel/controls";
+import {
+  ShortcutLabels,
+  type KeyBindingSettings,
+  type KeyboardLayoutStore
+} from "@jolly-pixel/controls";
 import type {
   SceneDocument,
   SceneRoom
@@ -66,6 +70,7 @@ export interface SceneEditorSceneOptions {
   presence: PresenceStore;
   preferences: Preferences;
   keyBindings: KeyBindingSettings<SceneAction>;
+  keyboardLayout: KeyboardLayoutStore;
 }
 
 export class SceneEditorScene extends Systems.Scene {
@@ -199,6 +204,10 @@ export class SceneEditorScene extends Systems.Scene {
       presence,
       gizmo,
       assetSlots,
+      shortcuts: new ShortcutLabels(
+        this.#options.keyboardLayout,
+        this.#options.keyBindings
+      ),
       frameSelection,
       previewEnvironment: (patch) => binding.previewEnvironment(patch),
       teleportToPeer: (clientId) => {
diff --git a/packages/editors/scene/test/components/scriptProperties.spec.ts b/packages/editors/scene/test/components/scriptProperties.spec.ts
index 6ca448661..75eb2f528 100644
--- a/packages/editors/scene/test/components/scriptProperties.spec.ts
+++ b/packages/editors/scene/test/components/scriptProperties.spec.ts
@@ -4,8 +4,8 @@ import assert from "node:assert/strict";
 
 // Import Internal Dependencies
 import {
+  addProperty,
   convertProperty,
-  freePropertyKey,
   listText,
   parseList,
   removeProperty,
@@ -51,12 +51,23 @@ describe("scriptProperties", () => {
   test("renames a key in place and refuses a key that already exists", () => {
     const properties = { speed: 1, jump: 2, name: "a" };
 
-    assert.deepEqual(Object.keys(renameProperty(properties, "jump", "height")), ["speed", "height", "name"]);
+    assert.deepEqual(
+      Object.keys(renameProperty(properties, "jump", " height ")),
+      ["speed", "height", "name"]
+    );
     assert.deepEqual(renameProperty(properties, "jump", "speed"), properties);
   });
 
-  test("finds a free key and removes one", () => {
-    assert.strictEqual(freePropertyKey({ property: 1, property2: 2 }), "property3");
+  test("removes a property whose key is cleared", () => {
+    assert.deepEqual(renameProperty({ a: 1, b: 2 }, "a", "  "), { b: 2 });
     assert.deepEqual(removeProperty({ a: 1, b: 2 }, "a"), { b: 2 });
   });
+
+  test("adds a property under a trimmed key unless it is blank or taken", () => {
+    const properties = { speed: 1 };
+
+    assert.deepEqual(addProperty(properties, " up ", [0, 1, 0]), { speed: 1, up: [0, 1, 0] });
+    assert.deepEqual(addProperty(properties, "speed", 5), properties);
+    assert.deepEqual(addProperty(properties, " ", 5), properties);
+  });
 });
diff --git a/packages/editors/scene/test/e2e/smoke.e2e.ts b/packages/editors/scene/test/e2e/smoke.e2e.ts
index eb381647d..09af5bffb 100644
--- a/packages/editors/scene/test/e2e/smoke.e2e.ts
+++ b/packages/editors/scene/test/e2e/smoke.e2e.ts
@@ -1,7 +1,6 @@
 // Import Third-party Dependencies
 import {
   dialog,
-  textField,
   treeRow
 } from "@jolly-pixel/e2e";
 import { pressAt } from "@jolly-pixel/e2e/editor";
@@ -14,9 +13,11 @@ import {
 import {
   addActor,
   addComponent,
+  editTransform,
   hierarchy,
+  inspectedActor,
   inspector,
-  transformAxis
+  sceneTool
 } from "./support/panels.ts";
 import {
   actorPoint,
@@ -35,15 +36,36 @@ test("the inspector edits the actor added from the hierarchy", async({ page }) =
   await addActor(page, ["Primitive", "Box"]);
 
   await expect(treeRow(page, "Box")).toHaveAttribute("aria-selected", "true");
-  await expect(textField(inspector(page), "Name")).toHaveValue("Box");
+  await expect(inspectedActor(page)).toHaveAttribute("label", "Box");
   await expect(inspector(page).locator("jolly-folder[label=\"Mesh\"]")).toBeVisible();
 
-  const x = transformAxis(page, "Position", "X");
-  await x.fill("2");
-  await x.press("Enter");
+  await editTransform(page, "Scale", "Y", "2");
+  await expect.poll(async() => (await findActor(page, "Box"))?.transform.scale)
+    .toEqual({ x: 1, y: 2, z: 1 });
 
-  await expect.poll(async() => (await findActor(page, "Box"))?.transform.position)
-    .toEqual({ x: 2, y: 0, z: 0 });
+  const visible = inspectedActor(page).getByRole("button", { name: "Visible" });
+  await expect(visible).toHaveAttribute("aria-pressed", "true");
+  await visible.click();
+  await expect(visible).toHaveAttribute("aria-pressed", "false");
+  await expect.poll(async() => (await findActor(page, "Box"))?.visible)
+    .toBe(false);
+});
+
+test("the toolbar undoes and redoes the actor added from the hierarchy", async({ page }) => {
+  const undo = sceneTool(page, "undo");
+  const redo = sceneTool(page, "redo");
+  await expect(undo).toHaveAttribute("disabled");
+
+  await addActor(page, ["Primitive", "Box"]);
+  await expect(treeRow(page, "Box")).toBeVisible();
+
+  await undo.click();
+  await expect(treeRow(page, "Box")).toHaveCount(0);
+  await expect(undo).toHaveAttribute("disabled");
+
+  await redo.click();
+  await expect(treeRow(page, "Box")).toBeVisible();
+  await expect(redo).toHaveAttribute("disabled");
 });
 
 test("a click in the viewport selects an actor and the gizmo moves it in one undo step", async({ page }) => {
@@ -66,7 +88,7 @@ test("a click in the viewport selects an actor and the gizmo moves it in one und
     .toEqual({ x: 0, y: 0, z: 0 });
 });
 
-test("a voxel map component takes the map picked from the catalog", async({ page, target }) => {
+test("a voxel map component takes the picked map, then moves above the light", async({ page, target }) => {
   await treeRow(page, "Sky").click();
   await addComponent(page, "Voxel map…");
 
@@ -80,4 +102,15 @@ test("a voxel map component takes the map picked from the catalog", async({ page
   await expect(component.getByText(target.mapName, { exact: true })).toBeVisible();
   expect((await findActor(page, "Sky"))?.components.map(({ type }) => type))
     .toEqual(["Light", "VoxelMap"]);
+
+  const grip = component.locator(".grip");
+  await grip.focus();
+  await grip.press("Space");
+  await grip.press("ArrowUp");
+  await grip.press("Space");
+  await expect.poll(async() => (await findActor(page, "Sky"))?.components.map(({ type }) => type))
+    .toEqual(["VoxelMap", "Light"]);
+  await expect(inspector(page).locator("jolly-folder[reorderable]").first())
+    .toHaveAttribute("label", "VoxelMap");
+  await expect(grip).toHaveAttribute("aria-pressed", "false");
 });
diff --git a/packages/editors/scene/test/e2e/support/panels.ts b/packages/editors/scene/test/e2e/support/panels.ts
index deb7cbbb7..bd9c18bd0 100644
--- a/packages/editors/scene/test/e2e/support/panels.ts
+++ b/packages/editors/scene/test/e2e/support/panels.ts
@@ -17,14 +17,35 @@ export function inspector(
   return page.locator("jolly-scene-inspector");
 }
 
-export function transformAxis(
+export function sceneTool(
   page: Page,
-  field: "Position" | "Rotation" | "Scale",
-  axis: "X" | "Y" | "Z"
+  tool: string
+): Locator {
+  return page.locator(
+    `jolly-scene-toolbar jolly-tool-button[data-tool="${tool}"]`
+  );
+}
+
+export function inspectedActor(
+  page: Page
 ): Locator {
-  return inspector(page)
-    .locator(`jolly-vector3[label="${field}"]`)
+  return inspector(page).locator("jolly-folder[key=\"actor\"]");
+}
+
+export async function editTransform(
+  page: Page,
+  field: "Position" | "Rotation" | "Scale",
+  axis: "X" | "Y" | "Z",
+  value: string
+): Promise<void> {
+  const actor = inspectedActor(page);
+  await actor.getByRole("radio", { name: field }).click();
+
+  const input = actor
+    .locator("jolly-vector3")
     .getByRole("textbox", { name: axis });
+  await input.fill(value);
+  await input.press("Enter");
 }
 
 export async function chooseMenuPath(
diff --git a/packages/editors/scene/test/features/componentMove.spec.ts b/packages/editors/scene/test/features/componentMove.spec.ts
new file mode 100644
index 000000000..244073abd
--- /dev/null
+++ b/packages/editors/scene/test/features/componentMove.spec.ts
@@ -0,0 +1,28 @@
+// Import Node.js Dependencies
+import { describe, test } from "node:test";
+import assert from "node:assert/strict";
+
+// Import Internal Dependencies
+import { componentMove } from "../../src/features/inspector/componentMove.ts";
+
+// CONSTANTS
+const kIds = ["a", "b", "c", "d"];
+
+describe("componentMove", () => {
+  test("places the component before the one at the insertion slot", () => {
+    assert.deepEqual(componentMove(kIds, 0, 3), { id: "a", beforeId: "d" });
+    assert.deepEqual(componentMove(kIds, 3, 1), { id: "d", beforeId: "b" });
+    assert.deepEqual(componentMove(kIds, 2, 0), { id: "c", beforeId: "a" });
+  });
+
+  test("appends the component when the slot is past the last one", () => {
+    assert.deepEqual(componentMove(kIds, 1, 4), { id: "b" });
+    assert.deepEqual(componentMove(kIds, 1, 9), { id: "b" });
+  });
+
+  test("moves nothing when the slot is on either side of the component", () => {
+    assert.strictEqual(componentMove(kIds, 1, 1), null);
+    assert.strictEqual(componentMove(kIds, 1, 2), null);
+    assert.strictEqual(componentMove(kIds, 3, 9), null);
+  });
+});
diff --git a/packages/editors/terrain/src/features/overlays/toolbar/OverlayToolbar.ts b/packages/editors/terrain/src/features/overlays/toolbar/OverlayToolbar.ts
index 92c52b786..997d90732 100644
--- a/packages/editors/terrain/src/features/overlays/toolbar/OverlayToolbar.ts
+++ b/packages/editors/terrain/src/features/overlays/toolbar/OverlayToolbar.ts
@@ -77,7 +77,7 @@ export class OverlayToolbar extends LitElement {
     const { overlay } = settings.options;
 
     return html`
-      <jolly-rail orientation="horizontal" role="toolbar" aria-label="Overlays">
+      <jolly-rail orientation="horizontal" floating role="toolbar" aria-label="Overlays">
         <div class="group" role="group" aria-label="Overlay">
           ${TERRAIN_OVERLAYS.map((option) => html`
             <jolly-tool-button
diff --git a/packages/editors/terrain/src/features/sculpt/toolbar/SculptToolbar.ts b/packages/editors/terrain/src/features/sculpt/toolbar/SculptToolbar.ts
index 260983a84..f4c5272af 100644
--- a/packages/editors/terrain/src/features/sculpt/toolbar/SculptToolbar.ts
+++ b/packages/editors/terrain/src/features/sculpt/toolbar/SculptToolbar.ts
@@ -1,6 +1,5 @@
 // Import Third-party Dependencies
 import {
-  css,
   html,
   LitElement,
   nothing,
@@ -59,19 +58,7 @@ const kFalloffLabels: Readonly<Record<FalloffCurve, string>> = {
 
 @customElement("terrain-sculpt-toolbar")
 export class SculptToolbar extends LitElement {
-  static override styles = [
-    viewportToolbarStyles,
-    css`
-      .step-count {
-        position: absolute;
-        inset-block-end: 1px;
-        inset-inline-end: 2px;
-        font-size: 9px;
-        font-weight: 600;
-        pointer-events: none;
-      }
-    `
-  ];
+  static override styles = viewportToolbarStyles;
 
   @property({ attribute: false })
   declare settings: SculptSettings | null;
@@ -134,7 +121,7 @@ export class SculptToolbar extends LitElement {
     const { tool, falloff } = settings.options;
 
     return html`
-      <jolly-rail orientation="horizontal" role="toolbar" aria-label="Sculpt">
+      <jolly-rail orientation="horizontal" floating role="toolbar" aria-label="Sculpt">
         ${this.#renderHistory()}
         <div class="group divided" role="group" aria-label="Brush">
           ${SCULPT_TOOLS.map((option) => html`
@@ -259,27 +246,23 @@ export class SculptToolbar extends LitElement {
           data-tool="undo"
           icon="undo"
           label="Undo (Ctrl+Z)"
+          .count=${state.undoCount}
           ?disabled=${state.undoCount === 0}
           @click=${() => history.undo(TERRAIN_HISTORY_SCOPE)}
-        >${renderStepCount(state.undoCount)}</jolly-tool-button>
+        ></jolly-tool-button>
         <jolly-tool-button
           data-tool="redo"
           icon="redo"
           label="Redo (Ctrl+Y)"
+          .count=${state.redoCount}
           ?disabled=${state.redoCount === 0}
           @click=${() => history.redo(TERRAIN_HISTORY_SCOPE)}
-        >${renderStepCount(state.redoCount)}</jolly-tool-button>
+        ></jolly-tool-button>
       </div>
     `;
   }
 }
 
-function renderStepCount(
-  count: number
-): TemplateResult | typeof nothing {
-  return count === 0 ? nothing : html`<span class="step-count" aria-hidden="true">${count}</span>`;
-}
-
 function formatMetres(
   value: number
 ): string {
diff --git a/packages/editors/terrain/src/shared/toolbar.styles.ts b/packages/editors/terrain/src/shared/toolbar.styles.ts
index fb94a9e87..25e868d90 100644
--- a/packages/editors/terrain/src/shared/toolbar.styles.ts
+++ b/packages/editors/terrain/src/shared/toolbar.styles.ts
@@ -6,15 +6,6 @@ export const viewportToolbarStyles = css`
     display: inline-flex;
   }
 
-  jolly-rail {
-    gap: 0;
-    height: auto;
-    padding: 4px;
-    border-radius: var(--jolly-radius-sm, 2px);
-    background: var(--jolly-surface-raised);
-    box-shadow: var(--jolly-shadow-floating);
-  }
-
   .group {
     display: flex;
     align-items: center;
diff --git a/packages/editors/voxel-map/src/shell/toolbar/EditToolbar.styles.ts b/packages/editors/voxel-map/src/shell/toolbar/EditToolbar.styles.ts
index cf673aae7..8e7b58260 100644
--- a/packages/editors/voxel-map/src/shell/toolbar/EditToolbar.styles.ts
+++ b/packages/editors/voxel-map/src/shell/toolbar/EditToolbar.styles.ts
@@ -24,15 +24,8 @@ export const editToolbarStyles = [viewportToolbarStyles, css`
   jolly-rail {
     --jolly-icon-button-size: var(--voxel-toolbar-button-size);
 
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
     gap: var(--voxel-toolbar-row-gap) 0;
-    height: auto;
     padding: var(--voxel-toolbar-row-gap) 4px;
-    border-radius: var(--jolly-radius-sm, 2px);
-    background: var(--jolly-surface-raised);
-    box-shadow: var(--jolly-shadow-floating);
   }
 
   .segment {
@@ -84,31 +77,6 @@ export const editToolbarStyles = [viewportToolbarStyles, css`
     transition: translate 0s var(--voxel-segment-fade-out);
   }
 
-  .step-count {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    min-width: 14px;
-    height: 14px;
-    padding: 0 3px;
-    border-radius: 7px;
-    background: var(--jolly-tone-teal);
-    color: var(--jolly-surface-raised);
-    font-size: 9px;
-    font-weight: 700;
-    font-variant-numeric: tabular-nums;
-    line-height: 1;
-    pointer-events: none;
-  }
-
-  .step-count > span {
-    text-box: trim-both cap alphabetic;
-  }
-
   @media (prefers-reduced-motion: reduce) {
     .segment,
     .segment[inert],
diff --git a/packages/editors/voxel-map/src/shell/toolbar/EditToolbar.ts b/packages/editors/voxel-map/src/shell/toolbar/EditToolbar.ts
index 0d0db0160..b92b72320 100644
--- a/packages/editors/voxel-map/src/shell/toolbar/EditToolbar.ts
+++ b/packages/editors/voxel-map/src/shell/toolbar/EditToolbar.ts
@@ -131,6 +131,7 @@ export class EditToolbar extends EditingElement {
       <voxel-paint-notice .editing=${editing}></voxel-paint-notice>
       <jolly-rail
         orientation="horizontal"
+        floating
         role="toolbar"
         aria-label="Map editing"
       >
@@ -175,16 +176,18 @@ export class EditToolbar extends EditingElement {
           data-tool="undo"
           icon="undo"
           label=${shortcuts.label("Undo", "edit.undo")}
+          .count=${this._undoDepth}
           ?disabled=${access.current.readOnly || this._undoDepth === 0}
           @click=${this.#onUndo}
-        >${renderStepCount(this._undoDepth)}</jolly-tool-button>
+        ></jolly-tool-button>
         <jolly-tool-button
           data-tool="redo"
           icon="redo"
           label=${shortcuts.label("Redo", "edit.redo")}
+          .count=${this._redoDepth}
           ?disabled=${access.current.readOnly || this._redoDepth === 0}
           @click=${this.#onRedo}
-        >${renderStepCount(this._redoDepth)}</jolly-tool-button>
+        ></jolly-tool-button>
       </div>
       <div class="group divided" role="group" aria-label="Clipboard">
         <jolly-tool-button
@@ -259,14 +262,6 @@ function renderSegment(
   `;
 }
 
-function renderStepCount(
-  depth: number
-): TemplateResult | typeof nothing {
-  return depth === 0 ?
-    nothing :
-    html`<span class="step-count" aria-hidden="true"><span>${depth}</span></span>`;
-}
-
 declare global {
   interface HTMLElementTagNameMap {
     "voxel-edit-toolbar": EditToolbar;
diff --git a/packages/ui/README.md b/packages/ui/README.md
index bfc7af295..ed6caba69 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -296,6 +296,8 @@ import {
 
 - [`FieldBinding`](./docs/api/field/field-binding.md): binds a field in a Lit template to one
   value.
+- [`FolderReorder`](./docs/api/containers/folder-reorder.md): moves `jolly-folder` elements by
+  their grip and commits the order to a model.
 - [`SubscriptionController`](./docs/api/subscription-controller.md): keeps a host subscribed to one
   source while connected.
 - [`LazyTemplate`](./docs/api/lazy-template.md): renders part of a template once the module that
diff --git a/packages/ui/docs/api/containers/folder-reorder.md b/packages/ui/docs/api/containers/folder-reorder.md
new file mode 100644
index 000000000..7eab2e3fd
--- /dev/null
+++ b/packages/ui/docs/api/containers/folder-reorder.md
@@ -0,0 +1,67 @@
+# `FolderReorder`
+
+`FolderReorder` handles the grip of the `jolly-folder` elements in a list and
+asks its owner to commit the new order. A [reorderable pane](./pane.md) uses it
+for its slotted folders. Use it where folders are rendered from a model, such
+as the components of an inspected object.
+
+```ts
+import { FolderReorder } from "@jolly-pixel/ui";
+
+new FolderReorder(
+  host: ReactiveControllerHost,
+  options: FolderReorderOptions
+)
+
+interface FolderReorderOptions {
+  folders(): readonly Folder[]; // the committed order
+  zone(): HTMLElement; // drop area of a pointer drag
+  commit(order: readonly Folder[], folder: Folder): void;
+  announce(message: string): void;
+}
+```
+
+```ts
+interface FolderReorder {
+  onDrag(event: CustomEvent<{ folder: Folder; event: PointerEvent; }>): void;
+  onReorder(event: CustomEvent<{
+    folder: Folder;
+    command: "start" | "up" | "down" | "finish" | "cancel";
+  }>): void;
+  cancel(): void;
+}
+```
+
+Bind `onDrag` to `jolly-folder-drag` and `onReorder` to
+`jolly-folder-reorder` on an ancestor of the folders. Both stop propagation.
+Set `reorderable` on the folders yourself.
+
+- A pointer drag shows the folder header as a ghost and an insertion line in
+  `zone()`. The folder is `dragging` while it lasts.
+- Space grabs the folder and sets its `grabbed`. ArrowUp and ArrowDown preview
+  the move through `style.order`, Space drops and Escape cancels. The
+  `style.order` values from before the grab come back on drop or cancel,
+  before `commit` runs.
+- `commit` receives the whole order and the moved folder, only when the order
+  changed. Write it to the model; the controller does not reorder the DOM.
+- `announce` receives the grab, position, drop and cancel messages. Show them
+  in an `aria-live` region.
+- Only one gesture runs at a time. A grab or drag that starts during another
+  is ignored, and the folder stays released.
+- A gesture is cancelled when the host disconnects, when `folders()` returns a
+  different list after a host update, or on `cancel()`.
+
+```ts
+#reorder = new FolderReorder(this, {
+  folders: () => [...this.renderRoot.querySelectorAll<Folder>(".list > jolly-folder")],
+  zone: () => this.#list(),
+  commit: (order, folder) => this.model.move(
+    folder.key,
+    order[order.indexOf(folder) + 1]?.key
+  ),
+  announce: (message) => {
+    this.#announcement = message;
+    this.requestUpdate();
+  }
+});
+```
diff --git a/packages/ui/docs/api/containers/folder.md b/packages/ui/docs/api/containers/folder.md
index 2a152e12e..4c2a539e2 100644
--- a/packages/ui/docs/api/containers/folder.md
+++ b/packages/ui/docs/api/containers/folder.md
@@ -16,12 +16,13 @@ interface Folder {
   key: string;
   open: boolean; // default true
   collapsible: boolean; // default true
-  reorderable: boolean; // shows a grip when its pane allows reordering
+  reorderable: boolean; // shows the grip, set by a reorderable pane
   flush: boolean; // no content indent
   storageKey: string; // attribute storage-key
   storage: StorageAdapter; // property only, default LocalStorageAdapter
 
   dragging: boolean; // set by its pane during a reorder preview
+  grabbed: boolean; // set by its pane while moved with the keyboard
 }
 ```
 
@@ -30,9 +31,29 @@ interface Folder {
 ```ts
 interface FolderEvents {
   "jolly-toggle": { open: boolean; };
+  "jolly-folder-drag": { folder: Folder; event: PointerEvent; };
+  "jolly-folder-reorder": {
+    folder: Folder;
+    command: "start" | "up" | "down" | "finish" | "cancel";
+  };
 }
 ```
 
+## Reordering
+
+The grip asks for a move and leaves the order to whoever handles the events.
+A [reorderable pane](./pane.md) handles them for the folders slotted in it.
+Elsewhere, set `reorderable` and hand the events to a
+[`FolderReorder`](./folder-reorder.md):
+
+- A primary-button press on the grip emits `jolly-folder-drag` with the
+  `pointerdown` event, only while `reorderable`.
+- Space on the grip emits `start`, or `finish` while `grabbed`. While
+  `grabbed`, ArrowUp and ArrowDown emit `up` and `down`, and Escape emits
+  `cancel`.
+- The folder never sets `grabbed` itself. The handler sets it on `start` and
+  clears it when the move ends.
+
 ## Slots and parts
 
 - Slots: default (content), `actions` (header).
diff --git a/packages/ui/docs/api/containers/rail.md b/packages/ui/docs/api/containers/rail.md
index e35265b18..9a9fb61c3 100644
--- a/packages/ui/docs/api/containers/rail.md
+++ b/packages/ui/docs/api/containers/rail.md
@@ -14,5 +14,10 @@ only, with no toolbar role.
 ```ts
 interface Rail {
   orientation: "horizontal" | "vertical"; // default "vertical"
+  floating: boolean;
 }
 ```
+
+`floating` draws the rail as a raised strip with a shadow, for a toolbar over
+a viewport. A horizontal floating rail wraps its items onto more rows when it
+runs out of width.
diff --git a/packages/ui/docs/api/controls/button.md b/packages/ui/docs/api/controls/button.md
index 9c7472de7..3f5b2a021 100644
--- a/packages/ui/docs/api/controls/button.md
+++ b/packages/ui/docs/api/controls/button.md
@@ -17,6 +17,7 @@ interface Button {
   disabled: boolean;
   label: string; // accessible name
   iconOnly: boolean; // attribute icon-only
+  pressed: boolean | undefined; // property only, unset: not a toggle
 }
 
 type ButtonVariant = "default" | "accent" | "danger";
@@ -25,3 +26,16 @@ type ButtonVariant = "default" | "accent" | "danger";
 - The default slot holds the visible content.
 - `label` names an icon-only button but shows no tooltip. Add the global
   `title` attribute for one.
+- Setting `pressed` makes the button a toggle: it sets `aria-pressed`, and
+  the icon fades while `pressed` is `false`. A click does not flip it; set it
+  from the `click` handler.
+
+```ts
+html`<jolly-button
+  icon="eye"
+  icon-only
+  label="Visible"
+  .pressed=${visible}
+  @click=${() => setVisible(!visible)}
+></jolly-button>`
+```
diff --git a/packages/ui/docs/api/controls/tool-button.md b/packages/ui/docs/api/controls/tool-button.md
index 8bfab2f96..c6107308a 100644
--- a/packages/ui/docs/api/controls/tool-button.md
+++ b/packages/ui/docs/api/controls/tool-button.md
@@ -20,10 +20,14 @@ interface ToolButton {
   disabled: boolean;
   flyoutSide: "above" | "below" | "left" | "right"; // attribute flyout-side, default "right"
   open: boolean;
+  count: number; // corner badge, hidden at 0
 }
 ```
 
 - A toned button tints its hover and `active` fill with the tone.
+- `count` shows a number in the bottom-right corner, such as the undo depth.
+  The badge is hidden from assistive technology: put anything it must hear in
+  `label`.
 - The tooltip opens on `flyout-side`.
 
 ## Methods
@@ -50,5 +54,5 @@ to `flyout-side`.
 
 ## Styling
 
-- Parts: `button`, `notch`, `tooltip`, `flyout`.
+- Parts: `button`, `count`, `notch`, `tooltip`, `flyout`.
 - `--jolly-tool-button-size` (`36px`), `--jolly-tool-button-gap` (`6px`).
diff --git a/packages/ui/src/containers/folder/Folder.ts b/packages/ui/src/containers/folder/Folder.ts
index 109d615ef..de5e34da0 100644
--- a/packages/ui/src/containers/folder/Folder.ts
+++ b/packages/ui/src/containers/folder/Folder.ts
@@ -6,8 +6,7 @@ import {
 } from "lit";
 import {
   customElement,
-  property,
-  state
+  property
 } from "lit/decorators.js";
 
 // Import Internal Dependencies
@@ -64,6 +63,9 @@ export class Folder extends LitElement implements Searchable {
   @property({ type: Boolean, reflect: true })
   declare dragging: boolean;
 
+  @property({ type: Boolean, reflect: true })
+  declare grabbed: boolean;
+
   @property({ type: Boolean, reflect: true })
   declare flush: boolean;
 
@@ -76,9 +78,6 @@ export class Folder extends LitElement implements Searchable {
   @property({ attribute: false })
   declare storage: StorageAdapter;
 
-  @state()
-  declare _reordering: boolean;
-
   #persistenceKey = "";
   #state = new NamespacedStore({
     isManaged: () => this.closest("jolly-dock-layout") !== null,
@@ -110,10 +109,10 @@ export class Folder extends LitElement implements Searchable {
     this.collapsible = true;
     this.reorderable = false;
     this.dragging = false;
+    this.grabbed = false;
     this.flush = false;
     this.storageKey = "";
     this.storage = defaultStorageAdapter();
-    this._reordering = false;
   }
 
   override connectedCallback(): void {
@@ -140,7 +139,7 @@ export class Folder extends LitElement implements Searchable {
           class="grip"
           type="button"
           aria-label=${`Reorder ${this.label}`}
-          aria-pressed=${String(this._reordering)}
+          aria-pressed=${String(this.grabbed)}
           @pointerdown=${this.#onGripPointerDown}
           @keydown=${this.#onGripKeyDown}
         ><jolly-icon name="drag" aria-hidden="true"></jolly-icon></button>
@@ -229,14 +228,11 @@ export class Folder extends LitElement implements Searchable {
   ) => {
     if (event.key === " ") {
       event.preventDefault();
-      this._reordering = !this._reordering;
-      this.#emitReorder(
-        this._reordering ? "start" : "finish"
-      );
+      this.#emitReorder(this.grabbed ? "finish" : "start");
 
       return;
     }
-    if (!this._reordering) {
+    if (!this.grabbed) {
       return;
     }
 
@@ -252,9 +248,6 @@ export class Folder extends LitElement implements Searchable {
 
     event.preventDefault();
     this.#emitReorder(command);
-    if (command === "cancel") {
-      this._reordering = false;
-    }
   };
 
   #onGripPointerDown = (
diff --git a/packages/ui/src/containers/folder/FolderReorder.ts b/packages/ui/src/containers/folder/FolderReorder.ts
new file mode 100644
index 000000000..9d68aadec
--- /dev/null
+++ b/packages/ui/src/containers/folder/FolderReorder.ts
@@ -0,0 +1,268 @@
+// Import Third-party Dependencies
+import type {
+  ReactiveController,
+  ReactiveControllerHost
+} from "lit";
+
+// Import Internal Dependencies
+import type { ContainerEventMap } from "../events.ts";
+import type { Folder } from "./Folder.ts";
+import { headerGhost } from "../../interaction/drag/dragGhost.ts";
+import {
+  startDragSession,
+  verticalInsertionLine,
+  type DragSessionHandle
+} from "../../interaction/drag/DragSession.ts";
+
+type FolderDragEvent = CustomEvent<ContainerEventMap["jolly-folder-drag"]>;
+type FolderReorderEvent = CustomEvent<ContainerEventMap["jolly-folder-reorder"]>;
+
+// CONSTANTS
+const kFolderZone = "folders";
+
+export interface FolderReorderOptions {
+  folders(): readonly Folder[];
+  zone(): HTMLElement;
+  commit(order: readonly Folder[], folder: Folder): void;
+  announce(message: string): void;
+}
+
+interface DragGesture {
+  kind: "drag";
+  start: readonly Folder[];
+  session: DragSessionHandle;
+}
+
+interface KeyboardGrab {
+  kind: "grab";
+  folder: Folder;
+  start: readonly Folder[];
+  order: Folder[];
+  styles: string[];
+}
+
+export class FolderReorder implements ReactiveController {
+  readonly #options: FolderReorderOptions;
+  #gesture: DragGesture | KeyboardGrab | null = null;
+
+  constructor(
+    host: ReactiveControllerHost,
+    options: FolderReorderOptions
+  ) {
+    host.addController(this);
+    this.#options = options;
+  }
+
+  hostUpdated(): void {
+    const gesture = this.#gesture;
+    if (
+      gesture !== null &&
+      !sameFolders(gesture.start, this.#options.folders())
+    ) {
+      this.cancel();
+    }
+  }
+
+  hostDisconnected(): void {
+    this.cancel();
+  }
+
+  cancel(): void {
+    const gesture = this.#gesture;
+    if (gesture?.kind === "drag") {
+      this.#gesture = null;
+      gesture.session.cancel();
+    }
+    else if (gesture?.kind === "grab") {
+      this.#release(gesture);
+    }
+  }
+
+  onDrag = (
+    event: FolderDragEvent
+  ) => {
+    event.stopPropagation();
+    const { folder, event: pointer } = event.detail;
+    const folders = [...this.#options.folders()];
+    const from = folders.indexOf(folder);
+    if (this.#gesture !== null || from === -1) {
+      return;
+    }
+
+    const bounds = readRect(this.#options.zone());
+    const candidates = folders.map((item) => {
+      const rect = item.getBoundingClientRect();
+
+      return { start: rect.y, size: rect.height };
+    });
+    const session = startDragSession({
+      source: folder,
+      event: pointer,
+      handle: pointer.currentTarget instanceof HTMLElement ?
+        pointer.currentTarget :
+        folder,
+      ghostLabel: folder.label,
+      ghostElement: () => {
+        const ghost = headerGhost(folder);
+        ghost.label = folder.label;
+
+        return ghost;
+      },
+      zones: () => [{
+        id: kFolderZone,
+        rect: bounds,
+        candidates,
+        axis: "y",
+        line: (index) => verticalInsertionLine(bounds, candidates, index)
+      }],
+      onStart: () => {
+        folder.dragging = true;
+      },
+      onCommit: (result) => {
+        if (result.zone !== null) {
+          this.#drop(folders, from, result.index);
+        }
+      },
+      onEnd: () => {
+        folder.dragging = false;
+        if (this.#gesture?.kind === "drag" && this.#gesture.session === session) {
+          this.#gesture = null;
+        }
+      }
+    });
+    this.#gesture = {
+      kind: "drag",
+      start: folders,
+      session
+    };
+  };
+
+  onReorder = (
+    event: FolderReorderEvent
+  ) => {
+    event.stopPropagation();
+    const { folder, command } = event.detail;
+    if (command === "start") {
+      this.#grab(folder);
+
+      return;
+    }
+
+    const grab = this.#gesture;
+    if (grab?.kind !== "grab" || grab.folder !== folder) {
+      return;
+    }
+
+    switch (command) {
+      case "up":
+      case "down":
+        this.#step(grab, command === "up" ? -1 : 1);
+        break;
+      case "cancel":
+        this.#release(grab);
+        this.#options.announce(`${folder.label} movement cancelled`);
+        break;
+      case "finish":
+        this.#finish(grab);
+        break;
+    }
+  };
+
+  #grab(
+    folder: Folder
+  ): void {
+    const folders = [...this.#options.folders()];
+    if (this.#gesture !== null || !folders.includes(folder)) {
+      return;
+    }
+
+    this.#gesture = {
+      kind: "grab",
+      folder,
+      start: folders,
+      order: [...folders],
+      styles: folders.map((item) => item.style.order)
+    };
+    folder.grabbed = true;
+    this.#options.announce(`${folder.label} grabbed`);
+  }
+
+  #step(
+    grab: KeyboardGrab,
+    step: -1 | 1
+  ): void {
+    const { folder, order } = grab;
+    const index = order.indexOf(folder);
+    const next = index + step;
+    if (next < 0 || next >= order.length) {
+      return;
+    }
+
+    [order[index], order[next]] = [order[next], order[index]];
+    for (const [position, item] of order.entries()) {
+      item.style.order = String(position);
+    }
+    this.#options.announce(
+      `${folder.label}, position ${next + 1} of ${order.length}`
+    );
+  }
+
+  #finish(
+    grab: KeyboardGrab
+  ): void {
+    this.#release(grab);
+    if (!sameFolders(grab.start, grab.order)) {
+      this.#options.commit(grab.order, grab.folder);
+    }
+    this.#options.announce(`${grab.folder.label} dropped`);
+  }
+
+  #drop(
+    folders: readonly Folder[],
+    from: number,
+    insertion: number
+  ): void {
+    const to = insertion > from ? insertion - 1 : insertion;
+    if (to === from) {
+      return;
+    }
+
+    const folder = folders[from];
+    const order = folders.toSpliced(from, 1).toSpliced(to, 0, folder);
+    this.#options.commit(order, folder);
+    this.#options.announce(
+      `${folder.label}, position ${to + 1} of ${order.length}`
+    );
+  }
+
+  #release(
+    grab: KeyboardGrab
+  ): void {
+    this.#gesture = null;
+    grab.folder.grabbed = false;
+    for (const [index, item] of grab.start.entries()) {
+      item.style.order = grab.styles[index];
+    }
+  }
+}
+
+function sameFolders(
+  left: readonly Folder[],
+  right: readonly Folder[]
+): boolean {
+  return left.length === right.length &&
+    left.every((folder, index) => folder === right[index]);
+}
+
+function readRect(
+  element: Element
+) {
+  const rect = element.getBoundingClientRect();
+
+  return {
+    x: rect.x,
+    y: rect.y,
+    width: rect.width,
+    height: rect.height
+  };
+}
diff --git a/packages/ui/src/containers/pane/FolderListController.ts b/packages/ui/src/containers/pane/FolderListController.ts
index 87b563f23..324f978e8 100644
--- a/packages/ui/src/containers/pane/FolderListController.ts
+++ b/packages/ui/src/containers/pane/FolderListController.ts
@@ -1,19 +1,13 @@
 // Import Third-party Dependencies
-import type {
-  ReactiveController,
-  ReactiveControllerHost
-} from "lit";
+import type { ReactiveControllerHost } from "lit";
 
 // Import Internal Dependencies
-import { emitContainerEvent } from "../events.ts";
-import type { Folder } from "../folder/Folder.ts";
-import { readDetail } from "../../dom.ts";
-import { headerGhost } from "../../interaction/drag/dragGhost.ts";
 import {
-  startDragSession,
-  verticalInsertionLine,
-  type DragSessionHandle
-} from "../../interaction/drag/DragSession.ts";
+  emitContainerEvent,
+  type ContainerEventMap
+} from "../events.ts";
+import type { Folder } from "../folder/Folder.ts";
+import { FolderReorder } from "../folder/FolderReorder.ts";
 import { NamespacedStore } from "../../storage/NamespacedStore.ts";
 import type { StorageAdapter } from "../../storage/StorageAdapter.ts";
 import {
@@ -21,24 +15,11 @@ import {
   resolveOrder
 } from "../../storage/keys.ts";
 
-// CONSTANTS
-const kFolderZone = "folders";
-
 interface FolderEntry {
   folder: Folder;
   key: string;
 }
 
-interface FolderReorderDetail {
-  folder: Folder;
-  command: "cancel" | "down" | "finish" | "start" | "up";
-}
-
-interface FolderDragDetail {
-  folder: Folder;
-  event: PointerEvent;
-}
-
 export interface FolderListOptions {
   content(): HTMLElement;
   contentSlot(): HTMLSlotElement;
@@ -50,28 +31,30 @@ export interface FolderListOptions {
   discovered(): void;
 }
 
-export class FolderListController implements ReactiveController {
+export class FolderListController {
   readonly #options: FolderListOptions;
   readonly #store: NamespacedStore;
+  readonly #reorder: FolderReorder;
   #entries: FolderEntry[] = [];
-  #startOrder: string[] | null = null;
-  #session: DragSessionHandle | null = null;
 
   constructor(
     host: ReactiveControllerHost,
     options: FolderListOptions
   ) {
-    host.addController(this);
     this.#options = options;
     this.#store = new NamespacedStore({
       namespace: () => options.namespace(),
       storage: () => options.storage()
     });
-  }
-
-  hostDisconnected(): void {
-    this.#session?.cancel();
-    this.#session = null;
+    this.#reorder = new FolderReorder(host, {
+      folders: () => this.#entries.map(({ folder }) => folder),
+      zone: () => options.content(),
+      commit: (order) => {
+        this.#applyOrder(({ folder }) => order.indexOf(folder));
+        this.#commitOrder();
+      },
+      announce: (message) => options.announce(message)
+    });
   }
 
   states(): Record<string, { open: boolean; }> {
@@ -93,6 +76,7 @@ export class FolderListController implements ReactiveController {
   }
 
   onContentChange = () => {
+    this.#reorder.cancel();
     const folders = this.#options.contentSlot()
       .assignedElements({ flatten: true })
       .filter((element): element is Folder => element.tagName === "JOLLY-FOLDER");
@@ -112,10 +96,11 @@ export class FolderListController implements ReactiveController {
       }
     }
 
-    this.#applyOrder(resolveOrder(
+    const order = resolveOrder(
       parseOrder(this.#store.readJson("order")),
       this.#keys()
-    ));
+    );
+    this.#applyOrder(({ key }) => order.indexOf(key));
     this.#options.discovered();
   };
 
@@ -131,166 +116,31 @@ export class FolderListController implements ReactiveController {
   };
 
   onFolderDrag = (
-    event: Event
+    event: CustomEvent<ContainerEventMap["jolly-folder-drag"]>
   ) => {
-    if (!this.#options.reorderable()) {
-      return;
+    if (this.#options.reorderable()) {
+      this.#reorder.onDrag(event);
     }
-
-    event.stopPropagation();
-    const detail = readDetail<FolderDragDetail>(event);
-    if (detail === null || this.#session !== null) {
-      return;
-    }
-
-    const ordered = this.#entries;
-    const from = ordered.findIndex(
-      ({ folder }) => folder === detail.folder
-    );
-    if (from === -1) {
-      return;
-    }
-
-    const bounds = readRect(this.#options.content());
-    const candidates = ordered.map(({ folder }) => {
-      const rect = folder.getBoundingClientRect();
-
-      return { start: rect.y, size: rect.height };
-    });
-
-    this.#session = startDragSession({
-      source: detail.folder,
-      event: detail.event,
-      handle: detail.event.currentTarget instanceof HTMLElement ?
-        detail.event.currentTarget :
-        detail.folder,
-      ghostLabel: detail.folder.label,
-      ghostElement: () => {
-        const ghost = headerGhost(detail.folder);
-        ghost.label = detail.folder.label;
-
-        return ghost;
-      },
-      zones: () => [{
-        id: kFolderZone,
-        rect: bounds,
-        candidates,
-        axis: "y",
-        line: (index) => verticalInsertionLine(bounds, candidates, index)
-      }],
-      onStart: () => {
-        detail.folder.dragging = true;
-      },
-      onCommit: (result) => {
-        if (result.zone !== null) {
-          this.#move(from, result.index);
-        }
-      },
-      onEnd: () => {
-        this.#session = null;
-        detail.folder.dragging = false;
-      }
-    });
   };
 
   onReorderCommand = (
-    event: Event
+    event: CustomEvent<ContainerEventMap["jolly-folder-reorder"]>
   ) => {
-    if (!this.#options.reorderable()) {
-      return;
+    if (this.#options.reorderable()) {
+      this.#reorder.onReorder(event);
     }
-
-    event.stopPropagation();
-    const detail = readDetail<FolderReorderDetail>(event);
-    if (detail === null) {
-      return;
-    }
-
-    const order = this.#keys();
-    const index = this.#entries.findIndex(
-      ({ folder }) => folder === detail.folder
-    );
-    if (index === -1) {
-      return;
-    }
-
-    if (detail.command === "start") {
-      this.#startOrder = order;
-      this.#options.announce(`${detail.folder.label} grabbed`);
-
-      return;
-    }
-    if (detail.command === "cancel") {
-      if (this.#startOrder !== null) {
-        this.#applyOrder(this.#startOrder);
-      }
-      this.#startOrder = null;
-      this.#options.announce(
-        `${detail.folder.label} movement cancelled`
-      );
-
-      return;
-    }
-    if (detail.command === "finish") {
-      this.#commitOrder();
-      this.#startOrder = null;
-      this.#options.announce(
-        `${detail.folder.label} dropped`
-      );
-
-      return;
-    }
-
-    const next = Math.min(
-      Math.max(index + (detail.command === "up" ? -1 : 1), 0),
-      order.length - 1
-    );
-    if (index === next) {
-      return;
-    }
-
-    [order[index], order[next]] = [order[next], order[index]];
-    this.#applyOrder(order);
-    this.#options.announce(
-      `${detail.folder.label}, position ${next + 1} of ${order.length}`
-    );
   };
 
-  #move(
-    from: number,
-    insertion: number
-  ): void {
-    const order = this.#keys();
-    const to = insertion > from ? insertion - 1 : insertion;
-    if (to === from || to < 0 || to >= order.length) {
-      return;
-    }
-
-    const [key] = order.splice(from, 1);
-    order.splice(to, 0, key);
-    this.#applyOrder(order);
-    this.#commitOrder();
-    this.#options.announce(
-      `${this.#entries[from]?.folder.label ?? "Folder"}, position ` +
-      `${to + 1} of ${order.length}`
-    );
-  }
-
   #keys(): string[] {
     return this.#entries.map(({ key }) => key);
   }
 
   #applyOrder(
-    order: readonly string[]
+    rank: (entry: FolderEntry) => number
   ): void {
-    const entries = new Map(
-      this.#entries.map((entry) => [entry.key, entry])
+    this.#entries = this.#entries.toSorted(
+      (left, right) => rank(left) - rank(right)
     );
-    this.#entries = order.flatMap((key) => {
-      const entry = entries.get(key);
-
-      return entry === undefined ? [] : [entry];
-    });
     for (const [index, { folder }] of this.#entries.entries()) {
       folder.style.order = String(index);
     }
@@ -332,19 +182,6 @@ function folderKeys(
   });
 }
 
-function readRect(
-  element: Element
-) {
-  const rect = element.getBoundingClientRect();
-
-  return {
-    x: rect.x,
-    y: rect.y,
-    width: rect.width,
-    height: rect.height
-  };
-}
-
 function parseOrder(
   value: unknown
 ): string[] {
diff --git a/packages/ui/src/containers/rail/Rail.ts b/packages/ui/src/containers/rail/Rail.ts
index bfdd776dd..ead728d4a 100644
--- a/packages/ui/src/containers/rail/Rail.ts
+++ b/packages/ui/src/containers/rail/Rail.ts
@@ -35,15 +35,29 @@ export class Rail extends LitElement {
       width: auto;
       height: calc(var(--jolly-icon-button-size, 32px) + (var(--jolly-space-1, 4px) * 2));
     }
+
+    :host([floating]) {
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: var(--jolly-space-1, 4px) 0;
+      height: auto;
+      border-radius: var(--jolly-radius-sm, 2px);
+      background: var(--jolly-surface-raised);
+      box-shadow: var(--jolly-shadow-floating);
+    }
   `;
 
   @property({ type: String, reflect: true })
   declare orientation: RailOrientation;
 
+  @property({ type: Boolean, reflect: true })
+  declare floating: boolean;
+
   constructor() {
     super();
 
     this.orientation = "vertical";
+    this.floating = false;
   }
 
   override render(): TemplateResult {
diff --git a/packages/ui/src/controls/Button.styles.ts b/packages/ui/src/controls/Button.styles.ts
index d91071af8..cb95b8f35 100644
--- a/packages/ui/src/controls/Button.styles.ts
+++ b/packages/ui/src/controls/Button.styles.ts
@@ -83,6 +83,10 @@ export const buttonStyles = css`
     background: var(--jolly-invalid-bg-focus);
   }
 
+  button[aria-pressed="false"] jolly-icon {
+    opacity: 0.4;
+  }
+
   :host([disabled]) button {
     opacity: 0.5;
     cursor: default;
diff --git a/packages/ui/src/controls/Button.ts b/packages/ui/src/controls/Button.ts
index 958076ea4..32693de5d 100644
--- a/packages/ui/src/controls/Button.ts
+++ b/packages/ui/src/controls/Button.ts
@@ -61,6 +61,9 @@ export class Button extends LitElement {
   })
   declare iconOnly: boolean;
 
+  @property({ attribute: false })
+  declare pressed?: boolean;
+
   constructor() {
     super();
 
@@ -76,6 +79,7 @@ export class Button extends LitElement {
         type="button"
         ?disabled=${this.disabled}
         aria-label=${this.label === "" ? nothing : this.label}
+        aria-pressed=${this.pressed === undefined ? nothing : String(this.pressed)}
       >
         ${this.icon === undefined
           ? nothing
diff --git a/packages/ui/src/controls/ToolButton.styles.ts b/packages/ui/src/controls/ToolButton.styles.ts
index 253a434ab..9362d2b75 100644
--- a/packages/ui/src/controls/ToolButton.styles.ts
+++ b/packages/ui/src/controls/ToolButton.styles.ts
@@ -120,6 +120,30 @@ export const toolButtonStyles = css`
     border-right-color: currentcolor;
   }
 
+  .count {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    min-width: 14px;
+    height: 14px;
+    padding: 0 3px;
+    border-radius: 7px;
+    background: var(--jolly-tone-teal);
+    color: var(--jolly-surface-raised);
+    font-size: 9px;
+    font-weight: 700;
+    line-height: 1;
+    pointer-events: none;
+  }
+
+  .count > span {
+    text-box: trim-both cap alphabetic;
+  }
+
   .tooltip,
   .flyout {
     position: absolute;
diff --git a/packages/ui/src/controls/ToolButton.ts b/packages/ui/src/controls/ToolButton.ts
index 9e4646f2a..3f4c7863f 100644
--- a/packages/ui/src/controls/ToolButton.ts
+++ b/packages/ui/src/controls/ToolButton.ts
@@ -70,6 +70,9 @@ export class ToolButton extends LitElement {
   @property({ type: Boolean, reflect: true })
   declare open: boolean;
 
+  @property({ type: Number })
+  declare count: number;
+
   @state()
   declare _hasFlyout: boolean;
 
@@ -92,6 +95,7 @@ export class ToolButton extends LitElement {
     this.disabled = false;
     this.flyoutSide = ToolButton.Defaults.flyoutSide;
     this.open = false;
+    this.count = 0;
     this._hasFlyout = false;
   }
 
@@ -160,6 +164,9 @@ export class ToolButton extends LitElement {
           nothing :
           html`<jolly-icon name=${this.icon}></jolly-icon>`}
         <slot></slot>
+        ${this.count > 0 ?
+          html`<span class="count" part="count" aria-hidden="true"><span>${this.count}</span></span>` :
+          nothing}
         ${this._hasFlyout ? html`<span class="notch" part="notch"></span>` : nothing}
       </button>
       ${this.label === "" ?
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index f11155764..8ae9dd842 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -182,6 +182,7 @@ export type * from "./containers/dock/Dock.ts";
 export type * from "./containers/dock/DockLayout.ts";
 export type * from "./containers/floating/Floating.ts";
 export type * from "./containers/folder/Folder.ts";
+export * from "./containers/folder/FolderReorder.ts";
 export type {
   PaneElement
 } from "./containers/pane/Pane.ts";
diff --git a/packages/ui/test/e2e/containers/folder/folder.e2e.ts b/packages/ui/test/e2e/containers/folder/folder.e2e.ts
index 9c5b078e7..42b8983a7 100644
--- a/packages/ui/test/e2e/containers/folder/folder.e2e.ts
+++ b/packages/ui/test/e2e/containers/folder/folder.e2e.ts
@@ -291,4 +291,26 @@ test.describe("Folder reorder", () => {
     await reloadGallery(page);
     await expect.poll(() => visualOrder(folders)).toEqual(moved);
   });
+
+  test("a second grip stays released during a grab, and Escape restores the order", async({ page }) => {
+    const folders = page.locator("jolly-pane > jolly-folder");
+    const grabbed = folders.first().locator(".grip");
+    const other = folders.nth(2).locator(".grip");
+
+    await grabbed.focus();
+    await grabbed.press("Space");
+    await grabbed.press("ArrowDown");
+    await expect(grabbed).toHaveAttribute("aria-pressed", "true");
+    await expect.poll(() => visualOrder(folders))
+      .toEqual(["Material", "Transform", "Physics"]);
+
+    await other.focus();
+    await other.press("Space");
+    await expect(other).toHaveAttribute("aria-pressed", "false");
+
+    await grabbed.focus();
+    await grabbed.press("Escape");
+    await expect(grabbed).toHaveAttribute("aria-pressed", "false");
+    await expect.poll(() => visualOrder(folders)).toEqual(kDefaultOrder);
+  });
 });