From 36f02cabd35a4b906eb85840bba770df151dac01 Mon Sep 17 00:00:00 2001
From: Max Richter <max@max-richter.dev>
Date: Thu, 7 May 2026 17:40:41 +0200
Subject: [PATCH] chore: format

---
 .../graph/ZoomIndicator.svelte                |   4 +-
 .../sidebar/panels/UnusedGroupsPanel.svelte   |   2 +-
 docs/UX.md                                    | 500 +++++++++---------
 packages/ui/src/lib/ConfirmDialog.svelte      |   9 +-
 packages/ui/src/lib/index.ts                  |   2 +-
 5 files changed, 262 insertions(+), 255 deletions(-)

diff --git a/app/src/lib/graph-interface/graph/ZoomIndicator.svelte b/app/src/lib/graph-interface/graph/ZoomIndicator.svelte
index 71ee753..ea154ae 100644
--- a/app/src/lib/graph-interface/graph/ZoomIndicator.svelte
+++ b/app/src/lib/graph-interface/graph/ZoomIndicator.svelte
@@ -14,7 +14,9 @@
     title="Fit to view (.)"
     onclick={() => graphState.centerNode()}
     aria-label="Fit nodes to view"
-  >⊡</button>
+  >
+    ⊡
+  </button>
   <span>{Math.round(graphState.cameraPosition[2] * 10)}%</span>
 </div>
 
diff --git a/app/src/lib/sidebar/panels/UnusedGroupsPanel.svelte b/app/src/lib/sidebar/panels/UnusedGroupsPanel.svelte
index e765cda..750f9ff 100644
--- a/app/src/lib/sidebar/panels/UnusedGroupsPanel.svelte
+++ b/app/src/lib/sidebar/panels/UnusedGroupsPanel.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { GraphManager } from '$lib/graph-interface/graph-manager.svelte';
-  import { Button } from '@nodarium/ui';
   import type { GroupDefinition } from '@nodarium/types';
+  import { Button } from '@nodarium/ui';
   import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 
   type Props = { manager: GraphManager };
diff --git a/docs/UX.md b/docs/UX.md
index 7e3cfea..0a4e6f2 100644
--- a/docs/UX.md
+++ b/docs/UX.md
@@ -12,27 +12,27 @@ This document consolidates many of the most important practical UX principles fo
 
 Users should always understand:
 
-* What the system is doing
-* Whether an action succeeded
-* Whether work is still in progress
-* Whether an error occurred
+- What the system is doing
+- Whether an action succeeded
+- Whether work is still in progress
+- Whether an error occurred
 
 ### Good Practices
 
-* Show loading indicators immediately
-* Show success confirmations after important actions
-* Show inline validation messages
-* Display progress for long-running tasks
-* Use skeleton loading states instead of blank screens
-* Prevent silent failures
-* Avoid ambiguous UI states
+- Show loading indicators immediately
+- Show success confirmations after important actions
+- Show inline validation messages
+- Display progress for long-running tasks
+- Use skeleton loading states instead of blank screens
+- Prevent silent failures
+- Avoid ambiguous UI states
 
 ### Bad Practices
 
-* Buttons with no feedback after clicking
-* Infinite spinners without explanation
-* Hidden background operations
-* Saving without visible confirmation
+- Buttons with no feedback after clicking
+- Infinite spinners without explanation
+- Hidden background operations
+- Saving without visible confirmation
 
 ---
 
@@ -44,19 +44,19 @@ Breaking established expectations increases cognitive load and causes mistakes.
 
 ### Good Practices
 
-* Use consistent layouts
-* Keep interaction patterns stable
-* Reuse common UI conventions
-* Keep naming and terminology consistent
-* Use standard keyboard shortcuts
-* Make similar components behave similarly
+- Use consistent layouts
+- Keep interaction patterns stable
+- Reuse common UI conventions
+- Keep naming and terminology consistent
+- Use standard keyboard shortcuts
+- Make similar components behave similarly
 
 ### Bad Practices
 
-* Different button styles for identical actions
-* Inconsistent navigation behavior
-* Custom controls that ignore platform conventions
-* Unexpected modal behavior
+- Different button styles for identical actions
+- Inconsistent navigation behavior
+- Custom controls that ignore platform conventions
+- Unexpected modal behavior
 
 ---
 
@@ -68,19 +68,19 @@ Users should recognize options instead of remembering information.
 
 ### Good Practices
 
-* Show recent searches
-* Use autocomplete
-* Display contextual hints
-* Preserve previously entered values
-* Use visible labels
-* Keep important actions visible
+- Show recent searches
+- Use autocomplete
+- Display contextual hints
+- Preserve previously entered values
+- Use visible labels
+- Keep important actions visible
 
 ### Bad Practices
 
-* Placeholder-only labels
-* Hidden functionality
-* Requiring users to remember previous state
-* Removing useful context during workflows
+- Placeholder-only labels
+- Hidden functionality
+- Requiring users to remember previous state
+- Removing useful context during workflows
 
 ---
 
@@ -90,19 +90,19 @@ Preventing mistakes is better than handling mistakes.
 
 ### Good Practices
 
-* Disable impossible actions
-* Validate input early
-* Warn before destructive operations
-* Use constrained input formats
-* Use safe defaults
-* Prefer undo over confirmation dialogs
+- Disable impossible actions
+- Validate input early
+- Warn before destructive operations
+- Use constrained input formats
+- Use safe defaults
+- Prefer undo over confirmation dialogs
 
 ### Bad Practices
 
-* Destructive actions near common actions
-* Easy accidental deletion
-* Poor validation timing
-* Irreversible operations without recovery
+- Destructive actions near common actions
+- Easy accidental deletion
+- Poor validation timing
+- Irreversible operations without recovery
 
 ---
 
@@ -116,11 +116,11 @@ Forms are one of the most important and failure-prone areas in web applications.
 
 ### Good Practices
 
-* Autofocus the primary field when appropriate
-* Preserve focus during rerenders
-* Preserve cursor position
-* Support keyboard-first workflows
-* Use logical tab ordering
+- Autofocus the primary field when appropriate
+- Preserve focus during rerenders
+- Preserve cursor position
+- Support keyboard-first workflows
+- Use logical tab ordering
 
 ### Auto-Selecting Input Text
 
@@ -128,18 +128,18 @@ Auto-selecting text on focus is context-dependent.
 
 ### Good Use Cases
 
-* Quantity fields
-* Rename dialogs
-* Editable defaults
-* Quick replacement workflows
-* Temporary values users often replace entirely
+- Quantity fields
+- Rename dialogs
+- Editable defaults
+- Quick replacement workflows
+- Temporary values users often replace entirely
 
 ### Bad Use Cases
 
-* Long textareas
-* Complex text editing
-* Fields users commonly partially edit
-* Rich text editing
+- Long textareas
+- Complex text editing
+- Fields users commonly partially edit
+- Rich text editing
 
 ### Principle
 
@@ -151,16 +151,16 @@ Only auto-select when full replacement is more likely than partial editing.
 
 ### Good Practices
 
-* Always use visible labels
-* Use placeholders only as supplementary examples
-* Keep labels visible after typing
-* Associate labels correctly for accessibility
+- Always use visible labels
+- Use placeholders only as supplementary examples
+- Keep labels visible after typing
+- Associate labels correctly for accessibility
 
 ### Bad Practices
 
-* Placeholder-only forms
-* Ambiguous labels
-* Labels that disappear during editing
+- Placeholder-only forms
+- Ambiguous labels
+- Labels that disappear during editing
 
 ---
 
@@ -176,18 +176,18 @@ Only auto-select when full replacement is more likely than partial editing.
 
 ### Good Practices
 
-* Show errors near the relevant field
-* Explain how to fix issues
-* Preserve entered values after errors
-* Validate incrementally
-* Use clear language
+- Show errors near the relevant field
+- Explain how to fix issues
+- Preserve entered values after errors
+- Validate incrementally
+- Use clear language
 
 ### Bad Practices
 
-* Generic “Invalid input” messages
-* Clearing form data after errors
-* Delayed validation surprises
-* Validation that interrupts typing
+- Generic “Invalid input” messages
+- Clearing form data after errors
+- Delayed validation surprises
+- Validation that interrupts typing
 
 ---
 
@@ -197,19 +197,19 @@ Only auto-select when full replacement is more likely than partial editing.
 
 Use appropriate HTML input types:
 
-* `email`
-* `tel`
-* `number`
-* `date`
-* `password`
-* `search`
+- `email`
+- `tel`
+- `number`
+- `date`
+- `password`
+- `search`
 
 ### Benefits
 
-* Better mobile keyboards
-* Native validation
-* Improved accessibility
-* Better autofill support
+- Better mobile keyboards
+- Native validation
+- Improved accessibility
+- Better autofill support
 
 ---
 
@@ -217,18 +217,18 @@ Use appropriate HTML input types:
 
 ### Good Practices
 
-* Enter submits forms when expected
-* Escape cancels dialogs
-* Show loading states during submission
-* Prevent duplicate submissions
-* Preserve draft state
-* Allow keyboard submission
+- Enter submits forms when expected
+- Escape cancels dialogs
+- Show loading states during submission
+- Prevent duplicate submissions
+- Preserve draft state
+- Allow keyboard submission
 
 ### Bad Practices
 
-* Disabled submit buttons without explanation
-* Hidden validation failures
-* Silent submission failures
+- Disabled submit buttons without explanation
+- Hidden validation failures
+- Silent submission failures
 
 ---
 
@@ -236,16 +236,16 @@ Use appropriate HTML input types:
 
 ### Good Practices
 
-* Use radio buttons for small option sets
-* Use searchable selects for large datasets
-* Prefer autocomplete for many options
-* Show selected state clearly
+- Use radio buttons for small option sets
+- Use searchable selects for large datasets
+- Prefer autocomplete for many options
+- Show selected state clearly
 
 ### Bad Practices
 
-* Massive unsearchable dropdowns
-* Nested dropdown hierarchies
-* Multi-select controls without search
+- Massive unsearchable dropdowns
+- Nested dropdown hierarchies
+- Multi-select controls without search
 
 ---
 
@@ -257,17 +257,17 @@ Use appropriate HTML input types:
 
 Users should always know:
 
-* Where they are
-* How they got there
-* What they can do next
-* How to go back
+- Where they are
+- How they got there
+- What they can do next
+- How to go back
 
 ### Good Practices
 
-* Highlight active navigation
-* Use breadcrumbs when helpful
-* Use meaningful page titles
-* Preserve navigation consistency
+- Highlight active navigation
+- Use breadcrumbs when helpful
+- Use meaningful page titles
+- Preserve navigation consistency
 
 ---
 
@@ -275,16 +275,16 @@ Users should always know:
 
 ### Good Practices
 
-* Keep hierarchy shallow
-* Group related actions
-* Use descriptive names
-* Keep primary actions stable
+- Keep hierarchy shallow
+- Group related actions
+- Use descriptive names
+- Keep primary actions stable
 
 ### Bad Practices
 
-* Deep nesting
-* Ambiguous navigation labels
-* Constantly moving actions
+- Deep nesting
+- Ambiguous navigation labels
+- Constantly moving actions
 
 ---
 
@@ -292,16 +292,16 @@ Users should always know:
 
 ### Good Practices
 
-* Use readable URLs
-* Make URLs shareable
-* Preserve app state in URLs when useful
-* Support browser history correctly
+- Use readable URLs
+- Make URLs shareable
+- Preserve app state in URLs when useful
+- Support browser history correctly
 
 ### Bad Practices
 
-* Opaque generated URLs
-* Broken back button behavior
-* Losing state during navigation
+- Opaque generated URLs
+- Broken back button behavior
+- Losing state during navigation
 
 ---
 
@@ -313,16 +313,16 @@ Users should always know:
 
 ### Good Practices
 
-* Large clickable areas
-* Adequate spacing between actions
-* Clear hover/focus states
-* Touch-friendly sizing
+- Large clickable areas
+- Adequate spacing between actions
+- Clear hover/focus states
+- Touch-friendly sizing
 
 ### Bad Practices
 
-* Tiny clickable regions
-* Overlapping interactive elements
-* Hidden hit areas
+- Tiny clickable regions
+- Overlapping interactive elements
+- Hidden hit areas
 
 ---
 
@@ -332,18 +332,18 @@ Every interaction should produce feedback.
 
 ### Good Practices
 
-* Hover states
-* Active states
-* Loading indicators
-* Success states
-* Error states
-* Optimistic updates when appropriate
+- Hover states
+- Active states
+- Loading indicators
+- Success states
+- Error states
+- Optimistic updates when appropriate
 
 ### Bad Practices
 
-* Dead-feeling interfaces
-* Invisible processing
-* Delayed reactions
+- Dead-feeling interfaces
+- Invisible processing
+- Delayed reactions
 
 ---
 
@@ -351,16 +351,16 @@ Every interaction should produce feedback.
 
 ### Good Practices
 
-* Require confirmation for dangerous actions
-* Prefer undo systems
-* Visually distinguish destructive buttons
-* Separate destructive actions spatially
+- Require confirmation for dangerous actions
+- Prefer undo systems
+- Visually distinguish destructive buttons
+- Separate destructive actions spatially
 
 ### Bad Practices
 
-* Immediate irreversible deletion
-* Dangerous actions near common actions
-* Ambiguous destructive wording
+- Immediate irreversible deletion
+- Dangerous actions near common actions
+- Ambiguous destructive wording
 
 ---
 
@@ -368,17 +368,17 @@ Every interaction should produce feedback.
 
 ### Good Practices
 
-* Trap keyboard focus
-* Support Escape to close
-* Restore focus after closing
-* Prevent background interaction
-* Keep modal purpose focused
+- Trap keyboard focus
+- Support Escape to close
+- Restore focus after closing
+- Prevent background interaction
+- Keep modal purpose focused
 
 ### Bad Practices
 
-* Nested modals
-* Full workflows inside modals
-* Losing unsaved work accidentally
+- Nested modals
+- Full workflows inside modals
+- Losing unsaved work accidentally
 
 ---
 
@@ -394,17 +394,17 @@ Users interpret slowness as unreliability.
 
 ### Good Practices
 
-* Show immediate visual response
-* Use optimistic UI updates
-* Preload likely next content
-* Stream content progressively
-* Use skeleton loaders
+- Show immediate visual response
+- Use optimistic UI updates
+- Preload likely next content
+- Stream content progressively
+- Use skeleton loaders
 
 ### Bad Practices
 
-* Blank screens during loading
-* Long blocking operations
-* Frozen interfaces
+- Blank screens during loading
+- Long blocking operations
+- Frozen interfaces
 
 ---
 
@@ -412,16 +412,16 @@ Users interpret slowness as unreliability.
 
 ### Good Practices
 
-* Prevent layout shift
-* Reserve image dimensions
-* Avoid moving buttons during loading
-* Keep skeletons aligned with final layout
+- Prevent layout shift
+- Reserve image dimensions
+- Avoid moving buttons during loading
+- Keep skeletons aligned with final layout
 
 ### Bad Practices
 
-* Jumping content
-* Shifting controls
-* Reflow-heavy rendering
+- Jumping content
+- Shifting controls
+- Reflow-heavy rendering
 
 ---
 
@@ -429,16 +429,16 @@ Users interpret slowness as unreliability.
 
 ### Good Practices
 
-* Keep UI interactive during async operations
-* Avoid blocking the main thread
-* Debounce expensive operations
-* Virtualize large lists
+- Keep UI interactive during async operations
+- Avoid blocking the main thread
+- Debounce expensive operations
+- Virtualize large lists
 
 ### Bad Practices
 
-* UI freezes
-* Excessive rerenders
-* Laggy typing experiences
+- UI freezes
+- Excessive rerenders
+- Laggy typing experiences
 
 ---
 
@@ -452,16 +452,16 @@ Accessibility improves usability for everyone.
 
 ### Good Practices
 
-* Full keyboard navigation
-* Visible focus indicators
-* Logical tab order
-* Keyboard shortcuts for power users
+- Full keyboard navigation
+- Visible focus indicators
+- Logical tab order
+- Keyboard shortcuts for power users
 
 ### Bad Practices
 
-* Mouse-only workflows
-* Hidden focus state
-* Keyboard traps
+- Mouse-only workflows
+- Hidden focus state
+- Keyboard traps
 
 ---
 
@@ -469,16 +469,16 @@ Accessibility improves usability for everyone.
 
 ### Good Practices
 
-* Use proper semantic elements
-* Use buttons for actions
-* Use links for navigation
-* Use headings correctly
+- Use proper semantic elements
+- Use buttons for actions
+- Use links for navigation
+- Use headings correctly
 
 ### Bad Practices
 
-* Clickable divs without accessibility support
-* Fake buttons
-* Missing semantic structure
+- Clickable divs without accessibility support
+- Fake buttons
+- Missing semantic structure
 
 ---
 
@@ -486,16 +486,16 @@ Accessibility improves usability for everyone.
 
 ### Good Practices
 
-* Sufficient color contrast
-* Support reduced motion
-* Avoid color-only communication
-* Use scalable typography
+- Sufficient color contrast
+- Support reduced motion
+- Avoid color-only communication
+- Use scalable typography
 
 ### Bad Practices
 
-* Tiny text
-* Low contrast interfaces
-* Flashing animations
+- Tiny text
+- Low contrast interfaces
+- Flashing animations
 
 ---
 
@@ -503,16 +503,16 @@ Accessibility improves usability for everyone.
 
 ### Good Practices
 
-* Proper labels
-* Meaningful alt text
-* ARIA only when necessary
-* Correct live regions for updates
+- Proper labels
+- Meaningful alt text
+- ARIA only when necessary
+- Correct live regions for updates
 
 ### Bad Practices
 
-* Unlabeled controls
-* Excessive ARIA misuse
-* Non-announced state changes
+- Unlabeled controls
+- Excessive ARIA misuse
+- Non-announced state changes
 
 ---
 
@@ -528,17 +528,17 @@ Power users often prioritize efficiency over visual minimalism.
 
 ### Good Practices
 
-* Efficient data density
-* Resizable tables
-* Sticky headers
-* Multi-column layouts
-* High information throughput
+- Efficient data density
+- Resizable tables
+- Sticky headers
+- Multi-column layouts
+- High information throughput
 
 ### Bad Practices
 
-* Excessive whitespace
-* Oversimplified dashboards
-* Hidden operational controls
+- Excessive whitespace
+- Oversimplified dashboards
+- Hidden operational controls
 
 ---
 
@@ -546,19 +546,19 @@ Power users often prioritize efficiency over visual minimalism.
 
 ### Good Practices
 
-* Sorting
-* Filtering
-* Column resizing
-* Pagination or virtualization
-* Keyboard navigation
-* Export functionality
-* Persistent user preferences
+- Sorting
+- Filtering
+- Column resizing
+- Pagination or virtualization
+- Keyboard navigation
+- Export functionality
+- Persistent user preferences
 
 ### Bad Practices
 
-* Non-sortable enterprise tables
-* Horizontal scrolling nightmares
-* Missing filtering
+- Non-sortable enterprise tables
+- Horizontal scrolling nightmares
+- Missing filtering
 
 ---
 
@@ -566,18 +566,18 @@ Power users often prioritize efficiency over visual minimalism.
 
 ### Good Practices
 
-* Keyboard shortcuts
-* Bulk actions
-* Batch editing
-* Command palettes
-* State persistence
-* Fast navigation
+- Keyboard shortcuts
+- Bulk actions
+- Batch editing
+- Command palettes
+- State persistence
+- Fast navigation
 
 ### Bad Practices
 
-* Forced wizard workflows
-* Excessive confirmations
-* Repetitive manual work
+- Forced wizard workflows
+- Excessive confirmations
+- Repetitive manual work
 
 ---
 
@@ -589,16 +589,16 @@ Power users often prioritize efficiency over visual minimalism.
 
 ### Good Practices
 
-* Large touch targets
-* Thumb-friendly layouts
-* Avoid hover dependencies
-* Mobile-friendly spacing
+- Large touch targets
+- Thumb-friendly layouts
+- Avoid hover dependencies
+- Mobile-friendly spacing
 
 ### Bad Practices
 
-* Tiny controls
-* Hover-only interactions
-* Precision-dependent gestures
+- Tiny controls
+- Hover-only interactions
+- Precision-dependent gestures
 
 ---
 
@@ -606,16 +606,16 @@ Power users often prioritize efficiency over visual minimalism.
 
 ### Good Practices
 
-* Mobile keyboard optimization
-* Minimal typing
-* Autofill support
-* Step-by-step flows when necessary
+- Mobile keyboard optimization
+- Minimal typing
+- Autofill support
+- Step-by-step flows when necessary
 
 ### Bad Practices
 
-* Long complex forms
-* Tiny input fields
-* Excessive required typing
+- Long complex forms
+- Tiny input fields
+- Excessive required typing
 
 ---
 
@@ -629,9 +629,9 @@ More choices increase decision time.
 
 ### Applications
 
-* Reduce unnecessary options
-* Group related actions
-* Prioritize primary actions
+- Reduce unnecessary options
+- Group related actions
+- Prioritize primary actions
 
 ---
 
@@ -641,5 +641,5 @@ Closer and larger targets are easier to use.
 
 ### Applications
 
-* Large primary buttons
-* Edge/corner placement for important actions
+- Large primary buttons
+- Edge/corner placement for important actions
diff --git a/packages/ui/src/lib/ConfirmDialog.svelte b/packages/ui/src/lib/ConfirmDialog.svelte
index 8e5f0cb..36d7492 100644
--- a/packages/ui/src/lib/ConfirmDialog.svelte
+++ b/packages/ui/src/lib/ConfirmDialog.svelte
@@ -46,7 +46,10 @@
   }
 
   function handleKeydown(e: KeyboardEvent) {
-    if (e.key === 'Enter') { e.preventDefault(); confirm(); }
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      confirm();
+    }
   }
 
   function handleCancel(e: Event) {
@@ -61,7 +64,9 @@
   class="m-auto bg-layer-1 border border-outline rounded-md p-0 text-text max-w-md w-full backdrop:bg-black/50"
   oncancel={handleCancel}
   onkeydown={handleKeydown}
-  onclick={(e) => { if (e.target === dialogEl) cancel(); }}
+  onclick={(e) => {
+    if (e.target === dialogEl) cancel();
+  }}
 >
   <div class="px-6 py-5 flex flex-col gap-3">
     <h3 class="m-0 text-sm font-semibold">{title}</h3>
diff --git a/packages/ui/src/lib/index.ts b/packages/ui/src/lib/index.ts
index 499b98c..e81665c 100644
--- a/packages/ui/src/lib/index.ts
+++ b/packages/ui/src/lib/index.ts
@@ -9,13 +9,13 @@ export { default as InputVec3 } from './inputs/InputVec3.svelte';
 export { default as SocketTable } from './inputs/SocketTable.svelte';
 
 export { default as Button } from './Button.svelte';
+export { default as ConfirmDialog } from './ConfirmDialog.svelte';
 export { default as Details } from './Details.svelte';
 export { default as JsonViewer } from './JsonViewer.svelte';
 export { default as ShortCut } from './ShortCut.svelte';
 export { default as Spinner } from './Spinner.svelte';
 export { default as Toast } from './Toast.svelte';
 export { toast } from './toast.svelte';
-export { default as ConfirmDialog } from './ConfirmDialog.svelte';
 
 import Input from './Input.svelte';
 export default Input;