diff --git a/frontend/src/components/README.md b/frontend/src/components/README.md
index dbfc530e..cf335293 100644
--- a/frontend/src/components/README.md
+++ b/frontend/src/components/README.md
@@ -1,11 +1,25 @@
-# Vue components
+# Overview of `/frontend/src/components/`
+Each component represents a (usually reusable) part of the Graphite Editor GUI. These all get mounted within the Vue entry point, `App.vue`, in the `/src` directory above this one.
 
-Each component is a layout or widget in the GUI.
+## Floating Menus: `floating-menus/`
+The temporary UI areas with dark backgrounds which hover over the top of the editor window content. Examples include popovers, dropdown menu selectors, and dialog modals.
 
-This document is a growing list of quick reference information for helpful Vue solutions and best practices. Feel free to add to this to help contributors learn things, or yourself remember tricks you'll likely forget in a few months.
+## Layout: `layout/`
+Useful containers that control the flow of content held within.
+
+## Panels: `panels/`
+The dockable tabbed regions like the Document, Properties, Layer Tree, and Node Graph panels.
+
+## Widgets: `widgets/`
+The interactive input items used to display information and provide user control.
+
+## Window: `window/`
+The building blocks for the Title Bar, Workspace, and Status Bar within an editor application window.
+
+# Vue tips and tricks
+This section contains a growing list of quick reference information for helpful Vue solutions and best practices. Feel free to add to this to help contributors learn things, or yourself remember tricks you'll likely forget in a few months.
 
 ## Bi-directional props
-
 The component declares this:
 ```ts
 export default defineComponent({
diff --git a/frontend/src/components/widgets/floating-menus/ColorPicker.vue b/frontend/src/components/floating-menus/ColorPicker.vue
similarity index 100%
rename from frontend/src/components/widgets/floating-menus/ColorPicker.vue
rename to frontend/src/components/floating-menus/ColorPicker.vue
diff --git a/frontend/src/components/widgets/floating-menus/DialogModal.vue b/frontend/src/components/floating-menus/DialogModal.vue
similarity index 96%
rename from frontend/src/components/widgets/floating-menus/DialogModal.vue
rename to frontend/src/components/floating-menus/DialogModal.vue
index fcd6875b..58a00d16 100644
--- a/frontend/src/components/widgets/floating-menus/DialogModal.vue
+++ b/frontend/src/components/floating-menus/DialogModal.vue
@@ -68,10 +68,10 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
+import FloatingMenu from "@/components/floating-menus/FloatingMenu.vue";
 import LayoutCol from "@/components/layout/LayoutCol.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import TextButton from "@/components/widgets/buttons/TextButton.vue";
-import FloatingMenu from "@/components/widgets/floating-menus/FloatingMenu.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 import WidgetLayout from "@/components/widgets/WidgetLayout.vue";
 
diff --git a/frontend/src/components/widgets/floating-menus/FloatingMenu.vue b/frontend/src/components/floating-menus/FloatingMenu.vue
similarity index 100%
rename from frontend/src/components/widgets/floating-menus/FloatingMenu.vue
rename to frontend/src/components/floating-menus/FloatingMenu.vue
diff --git a/frontend/src/components/widgets/floating-menus/MenuList.vue b/frontend/src/components/floating-menus/MenuList.vue
similarity index 97%
rename from frontend/src/components/widgets/floating-menus/MenuList.vue
rename to frontend/src/components/floating-menus/MenuList.vue
index 5b91ea61..94d328ff 100644
--- a/frontend/src/components/widgets/floating-menus/MenuList.vue
+++ b/frontend/src/components/floating-menus/MenuList.vue
@@ -143,12 +143,12 @@ import { defineComponent, PropType } from "vue";
 
 import { IconName } from "@/utility-functions/icons";
 
+import FloatingMenu, { MenuDirection } from "@/components/floating-menus/FloatingMenu.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
-import FloatingMenu, { MenuDirection } from "@/components/widgets/floating-menus/FloatingMenu.vue";
 import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
+import Separator from "@/components/widgets/labels/Separator.vue";
 import UserInputLabel from "@/components/widgets/labels/UserInputLabel.vue";
-import Separator from "@/components/widgets/separators/Separator.vue";
 
 export type MenuListEntries<Value = string> = MenuListEntry<Value>[];
 export type SectionsOfMenuListEntries<Value = string> = MenuListEntries<Value>[];
diff --git a/frontend/src/components/panels/Document.vue b/frontend/src/components/panels/Document.vue
index 1cc44467..01f072ec 100644
--- a/frontend/src/components/panels/Document.vue
+++ b/frontend/src/components/panels/Document.vue
@@ -244,8 +244,8 @@ import LayoutCol from "@/components/layout/LayoutCol.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
 import SwatchPairInput from "@/components/widgets/inputs/SwatchPairInput.vue";
-import CanvasRuler from "@/components/widgets/rulers/CanvasRuler.vue";
-import PersistentScrollbar from "@/components/widgets/scrollbars/PersistentScrollbar.vue";
+import CanvasRuler from "@/components/widgets/metrics/CanvasRuler.vue";
+import PersistentScrollbar from "@/components/widgets/metrics/PersistentScrollbar.vue";
 import WidgetLayout from "@/components/widgets/WidgetLayout.vue";
 
 export default defineComponent({
diff --git a/frontend/src/components/widgets/WidgetLayout.vue b/frontend/src/components/widgets/WidgetLayout.vue
index 4e9809f3..bda7a80e 100644
--- a/frontend/src/components/widgets/WidgetLayout.vue
+++ b/frontend/src/components/widgets/WidgetLayout.vue
@@ -1,3 +1,5 @@
+<!-- TODO: Refactor this component (together with `WidgetRow.vue`) to be more logically consistent with our layout definition goals, in terms of naming and capabilities -->
+
 <template>
 	<div class="widget-layout">
 		<component :is="layoutRowType(layoutRow)" :widgetData="layoutRow" :layoutTarget="layout.layout_target" v-for="(layoutRow, index) in layout.layout" :key="index" />
@@ -18,8 +20,8 @@ import { defineComponent, PropType } from "vue";
 
 import { isWidgetColumn, isWidgetRow, isWidgetSection, LayoutRow, WidgetLayout } from "@/wasm-communication/messages";
 
+import WidgetSection from "@/components/widgets/groups/WidgetSection.vue";
 import WidgetRow from "@/components/widgets/WidgetRow.vue";
-import WidgetSection from "@/components/widgets/WidgetSection.vue";
 
 export default defineComponent({
 	props: {
diff --git a/frontend/src/components/widgets/WidgetRow.vue b/frontend/src/components/widgets/WidgetRow.vue
index 6e8daa37..81d0b0e3 100644
--- a/frontend/src/components/widgets/WidgetRow.vue
+++ b/frontend/src/components/widgets/WidgetRow.vue
@@ -1,7 +1,9 @@
+<!-- TODO: Refactor this component to use `<component :is="" v-bind="attributesObject"></component>` to avoid all the separate components with `v-if` -->
+<!-- TODO: Also rename this component, and probably move the `widget-${direction}` wrapper to be part of `WidgetLayout.vue` as part of its refactor -->
+
 <template>
 	<div :class="`widget-${direction}`">
 		<template v-for="(component, index) in widgets" :key="index">
-			<!-- TODO: Use `<component :is="" v-bind="attributesObject"></component>` to avoid all the separate components with `v-if` -->
 			<CheckboxInput v-if="component.kind === 'CheckboxInput'" v-bind="component.props" @update:checked="(value: boolean) => updateLayout(component.widget_id, value)" />
 			<ColorInput v-if="component.kind === 'ColorInput'" v-bind="component.props" v-model:open="open" @update:value="(value: string) => updateLayout(component.widget_id, value)" />
 			<DropdownInput v-if="component.kind === 'DropdownInput'" v-bind="component.props" v-model:open="open" @update:selectedIndex="(value: number) => updateLayout(component.widget_id, value)" />
@@ -85,8 +87,8 @@ import RadioInput from "@/components/widgets/inputs/RadioInput.vue";
 import TextAreaInput from "@/components/widgets/inputs/TextAreaInput.vue";
 import TextInput from "@/components/widgets/inputs/TextInput.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
+import Separator from "@/components/widgets/labels/Separator.vue";
 import TextLabel from "@/components/widgets/labels/TextLabel.vue";
-import Separator from "@/components/widgets/separators/Separator.vue";
 
 export default defineComponent({
 	inject: ["editor"],
diff --git a/frontend/src/components/widgets/buttons/PopoverButton.vue b/frontend/src/components/widgets/buttons/PopoverButton.vue
index 3cf572c4..57fd146d 100644
--- a/frontend/src/components/widgets/buttons/PopoverButton.vue
+++ b/frontend/src/components/widgets/buttons/PopoverButton.vue
@@ -51,9 +51,9 @@ import { defineComponent, PropType } from "vue";
 
 import { IconName } from "@/utility-functions/icons";
 
+import FloatingMenu from "@/components/floating-menus/FloatingMenu.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
-import FloatingMenu from "@/components/widgets/floating-menus/FloatingMenu.vue";
 
 export default defineComponent({
 	components: {
diff --git a/frontend/src/components/widgets/WidgetSection.vue b/frontend/src/components/widgets/groups/WidgetSection.vue
similarity index 97%
rename from frontend/src/components/widgets/WidgetSection.vue
rename to frontend/src/components/widgets/groups/WidgetSection.vue
index 9893a437..2f20fcdc 100644
--- a/frontend/src/components/widgets/WidgetSection.vue
+++ b/frontend/src/components/widgets/groups/WidgetSection.vue
@@ -73,8 +73,8 @@ import { isWidgetRow, isWidgetSection, LayoutRow as LayoutSystemRow, WidgetSecti
 
 import LayoutCol from "@/components/layout/LayoutCol.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
+import Separator from "@/components/widgets/labels/Separator.vue";
 import TextLabel from "@/components/widgets/labels/TextLabel.vue";
-import Separator from "@/components/widgets/separators/Separator.vue";
 import WidgetRow from "@/components/widgets/WidgetRow.vue";
 
 const WidgetSection = defineComponent({
diff --git a/frontend/src/components/widgets/inputs/ColorInput.vue b/frontend/src/components/widgets/inputs/ColorInput.vue
index 1a63fcc5..78494afa 100644
--- a/frontend/src/components/widgets/inputs/ColorInput.vue
+++ b/frontend/src/components/widgets/inputs/ColorInput.vue
@@ -72,12 +72,12 @@ import { defineComponent, PropType } from "vue";
 
 import { RGBA } from "@/wasm-communication/messages";
 
+import ColorPicker from "@/components/floating-menus/ColorPicker.vue";
+import FloatingMenu from "@/components/floating-menus/FloatingMenu.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
-import ColorPicker from "@/components/widgets/floating-menus/ColorPicker.vue";
-import FloatingMenu from "@/components/widgets/floating-menus/FloatingMenu.vue";
 import OptionalInput from "@/components/widgets/inputs/OptionalInput.vue";
 import TextInput from "@/components/widgets/inputs/TextInput.vue";
-import Separator from "@/components/widgets/separators/Separator.vue";
+import Separator from "@/components/widgets/labels/Separator.vue";
 
 export default defineComponent({
 	emits: ["update:value", "update:open"],
diff --git a/frontend/src/components/widgets/inputs/DropdownInput.vue b/frontend/src/components/widgets/inputs/DropdownInput.vue
index d745caa2..9387e8c4 100644
--- a/frontend/src/components/widgets/inputs/DropdownInput.vue
+++ b/frontend/src/components/widgets/inputs/DropdownInput.vue
@@ -87,8 +87,8 @@
 <script lang="ts">
 import { defineComponent, PropType, toRaw } from "vue";
 
+import MenuList, { MenuListEntry, SectionsOfMenuListEntries } from "@/components/floating-menus/MenuList.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
-import MenuList, { MenuListEntry, SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
 const DASH_ENTRY = { label: "-" };
diff --git a/frontend/src/components/widgets/inputs/FontInput.vue b/frontend/src/components/widgets/inputs/FontInput.vue
index eb1468f6..ecfe80bf 100644
--- a/frontend/src/components/widgets/inputs/FontInput.vue
+++ b/frontend/src/components/widgets/inputs/FontInput.vue
@@ -85,8 +85,8 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
+import MenuList, { MenuListEntry, SectionsOfMenuListEntries } from "@/components/floating-menus/MenuList.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
-import MenuList, { MenuListEntry, SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
 export default defineComponent({
diff --git a/frontend/src/components/widgets/inputs/MenuBarInput.vue b/frontend/src/components/widgets/inputs/MenuBarInput.vue
index c5872200..cd20b088 100644
--- a/frontend/src/components/widgets/inputs/MenuBarInput.vue
+++ b/frontend/src/components/widgets/inputs/MenuBarInput.vue
@@ -63,7 +63,7 @@ import { defineComponent } from "vue";
 
 import { Editor } from "@/wasm-communication/editor";
 
-import MenuList, { MenuListEntry, MenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
+import MenuList, { MenuListEntry, MenuListEntries } from "@/components/floating-menus/MenuList.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
 function makeEntries(editor: Editor): MenuListEntries {
diff --git a/frontend/src/components/widgets/inputs/SwatchPairInput.vue b/frontend/src/components/widgets/inputs/SwatchPairInput.vue
index a1fe148d..f2b054dd 100644
--- a/frontend/src/components/widgets/inputs/SwatchPairInput.vue
+++ b/frontend/src/components/widgets/inputs/SwatchPairInput.vue
@@ -71,10 +71,10 @@ import { defineComponent } from "vue";
 import { rgbaToDecimalRgba } from "@/utility-functions/color";
 import { type RGBA, UpdateWorkingColors } from "@/wasm-communication/messages";
 
+import ColorPicker from "@/components/floating-menus/ColorPicker.vue";
+import FloatingMenu from "@/components/floating-menus/FloatingMenu.vue";
 import LayoutCol from "@/components/layout/LayoutCol.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
-import ColorPicker from "@/components/widgets/floating-menus/ColorPicker.vue";
-import FloatingMenu from "@/components/widgets/floating-menus/FloatingMenu.vue";
 
 export default defineComponent({
 	inject: ["editor"],
diff --git a/frontend/src/components/widgets/separators/Separator.vue b/frontend/src/components/widgets/labels/Separator.vue
similarity index 100%
rename from frontend/src/components/widgets/separators/Separator.vue
rename to frontend/src/components/widgets/labels/Separator.vue
diff --git a/frontend/src/components/widgets/rulers/CanvasRuler.vue b/frontend/src/components/widgets/metrics/CanvasRuler.vue
similarity index 100%
rename from frontend/src/components/widgets/rulers/CanvasRuler.vue
rename to frontend/src/components/widgets/metrics/CanvasRuler.vue
diff --git a/frontend/src/components/widgets/scrollbars/PersistentScrollbar.vue b/frontend/src/components/widgets/metrics/PersistentScrollbar.vue
similarity index 100%
rename from frontend/src/components/widgets/scrollbars/PersistentScrollbar.vue
rename to frontend/src/components/widgets/metrics/PersistentScrollbar.vue
diff --git a/frontend/src/components/window/MainWindow.vue b/frontend/src/components/window/MainWindow.vue
index e70696ca..bea0aa04 100644
--- a/frontend/src/components/window/MainWindow.vue
+++ b/frontend/src/components/window/MainWindow.vue
@@ -22,7 +22,7 @@ import { defineComponent } from "vue";
 import LayoutCol from "@/components/layout/LayoutCol.vue";
 import StatusBar from "@/components/window/status-bar/StatusBar.vue";
 import TitleBar from "@/components/window/title-bar/TitleBar.vue";
-import Workspace from "@/components/workspace/Workspace.vue";
+import Workspace from "@/components/window/workspace/Workspace.vue";
 
 export type ApplicationPlatform = "Windows" | "Mac" | "Linux" | "Web";
 
diff --git a/frontend/src/components/window/status-bar/StatusBar.vue b/frontend/src/components/window/status-bar/StatusBar.vue
index 0384cc19..a0c78a09 100644
--- a/frontend/src/components/window/status-bar/StatusBar.vue
+++ b/frontend/src/components/window/status-bar/StatusBar.vue
@@ -47,8 +47,8 @@ import { defineComponent } from "vue";
 import { HintData, UpdateInputHints } from "@/wasm-communication/messages";
 
 import LayoutRow from "@/components/layout/LayoutRow.vue";
+import Separator from "@/components/widgets/labels/Separator.vue";
 import UserInputLabel from "@/components/widgets/labels/UserInputLabel.vue";
-import Separator from "@/components/widgets/separators/Separator.vue";
 
 export default defineComponent({
 	inject: ["editor"],
diff --git a/frontend/src/components/workspace/Panel.vue b/frontend/src/components/window/workspace/Panel.vue
similarity index 100%
rename from frontend/src/components/workspace/Panel.vue
rename to frontend/src/components/window/workspace/Panel.vue
diff --git a/frontend/src/components/workspace/Workspace.vue b/frontend/src/components/window/workspace/Workspace.vue
similarity index 97%
rename from frontend/src/components/workspace/Workspace.vue
rename to frontend/src/components/window/workspace/Workspace.vue
index c004d749..bd6cd791 100644
--- a/frontend/src/components/workspace/Workspace.vue
+++ b/frontend/src/components/window/workspace/Workspace.vue
@@ -66,10 +66,10 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
+import DialogModal from "@/components/floating-menus/DialogModal.vue";
 import LayoutCol from "@/components/layout/LayoutCol.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
-import DialogModal from "@/components/widgets/floating-menus/DialogModal.vue";
-import Panel from "@/components/workspace/Panel.vue";
+import Panel from "@/components/window/workspace/Panel.vue";
 
 const MIN_PANEL_SIZE = 100;
 
diff --git a/frontend/src/volar.d.ts b/frontend/src/volar.d.ts
index bef6f855..008c4b5c 100644
--- a/frontend/src/volar.d.ts
+++ b/frontend/src/volar.d.ts
@@ -1,7 +1,7 @@
 import { type RGBA as RGBA_ } from "@/wasm-communication/messages";
 
-import FloatingMenu from "@/components/widgets/floating-menus/FloatingMenu.vue";
-import MenuList from "@/components/widgets/floating-menus/MenuList.vue";
+import FloatingMenu from "@/components/floating-menus/FloatingMenu.vue";
+import MenuList from "@/components/floating-menus/MenuList.vue";
 
 // TODO: When a Volar bug is fixed (likely in v0.34.16):
 // TODO: - Uncomment this block