chore: format

2026-05-07 17:40:41 +02:00
parent 3a78ad5ee3
commit 36f02cabd3
5 changed files with 262 additions and 255 deletions
@@ -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>
@@ -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 };
@@ -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
+- What the system is doing
-* Whether an action succeeded
+- Whether an action succeeded
-* Whether work is still in progress
+- Whether work is still in progress
-* Whether an error occurred
+- Whether an error occurred
 ### Good Practices
-* Show loading indicators immediately
+- Show loading indicators immediately
-* Show success confirmations after important actions
+- Show success confirmations after important actions
-* Show inline validation messages
+- Show inline validation messages
-* Display progress for long-running tasks
+- Display progress for long-running tasks
-* Use skeleton loading states instead of blank screens
+- Use skeleton loading states instead of blank screens
-* Prevent silent failures
+- Prevent silent failures
-* Avoid ambiguous UI states
+- Avoid ambiguous UI states
 ### Bad Practices
-* Buttons with no feedback after clicking
+- Buttons with no feedback after clicking
-* Infinite spinners without explanation
+- Infinite spinners without explanation
-* Hidden background operations
+- Hidden background operations
-* Saving without visible confirmation
+- Saving without visible confirmation
 ---
@@ -44,19 +44,19 @@ Breaking established expectations increases cognitive load and causes mistakes.
 ### Good Practices
-* Use consistent layouts
+- Use consistent layouts
-* Keep interaction patterns stable
+- Keep interaction patterns stable
-* Reuse common UI conventions
+- Reuse common UI conventions
-* Keep naming and terminology consistent
+- Keep naming and terminology consistent
-* Use standard keyboard shortcuts
+- Use standard keyboard shortcuts
-* Make similar components behave similarly
+- Make similar components behave similarly
 ### Bad Practices
-* Different button styles for identical actions
+- Different button styles for identical actions
-* Inconsistent navigation behavior
+- Inconsistent navigation behavior
-* Custom controls that ignore platform conventions
+- Custom controls that ignore platform conventions
-* Unexpected modal behavior
+- Unexpected modal behavior
 ---
@@ -68,19 +68,19 @@ Users should recognize options instead of remembering information.
 ### Good Practices
-* Show recent searches
+- Show recent searches
-* Use autocomplete
+- Use autocomplete
-* Display contextual hints
+- Display contextual hints
-* Preserve previously entered values
+- Preserve previously entered values
-* Use visible labels
+- Use visible labels
-* Keep important actions visible
+- Keep important actions visible
 ### Bad Practices
-* Placeholder-only labels
+- Placeholder-only labels
-* Hidden functionality
+- Hidden functionality
-* Requiring users to remember previous state
+- Requiring users to remember previous state
-* Removing useful context during workflows
+- Removing useful context during workflows
 ---
@@ -90,19 +90,19 @@ Preventing mistakes is better than handling mistakes.
 ### Good Practices
-* Disable impossible actions
+- Disable impossible actions
-* Validate input early
+- Validate input early
-* Warn before destructive operations
+- Warn before destructive operations
-* Use constrained input formats
+- Use constrained input formats
-* Use safe defaults
+- Use safe defaults
-* Prefer undo over confirmation dialogs
+- Prefer undo over confirmation dialogs
 ### Bad Practices
-* Destructive actions near common actions
+- Destructive actions near common actions
-* Easy accidental deletion
+- Easy accidental deletion
-* Poor validation timing
+- Poor validation timing
-* Irreversible operations without recovery
+- 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
+- Autofocus the primary field when appropriate
-* Preserve focus during rerenders
+- Preserve focus during rerenders
-* Preserve cursor position
+- Preserve cursor position
-* Support keyboard-first workflows
+- Support keyboard-first workflows
-* Use logical tab ordering
+- 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
+- Quantity fields
-* Rename dialogs
+- Rename dialogs
-* Editable defaults
+- Editable defaults
-* Quick replacement workflows
+- Quick replacement workflows
-* Temporary values users often replace entirely
+- Temporary values users often replace entirely
 ### Bad Use Cases
-* Long textareas
+- Long textareas
-* Complex text editing
+- Complex text editing
-* Fields users commonly partially edit
+- Fields users commonly partially edit
-* Rich text editing
+- 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
+- Always use visible labels
-* Use placeholders only as supplementary examples
+- Use placeholders only as supplementary examples
-* Keep labels visible after typing
+- Keep labels visible after typing
-* Associate labels correctly for accessibility
+- Associate labels correctly for accessibility
 ### Bad Practices
-* Placeholder-only forms
+- Placeholder-only forms
-* Ambiguous labels
+- Ambiguous labels
-* Labels that disappear during editing
+- 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
+- Show errors near the relevant field
-* Explain how to fix issues
+- Explain how to fix issues
-* Preserve entered values after errors
+- Preserve entered values after errors
-* Validate incrementally
+- Validate incrementally
-* Use clear language
+- Use clear language
 ### Bad Practices
-* Generic “Invalid input” messages
+- Generic “Invalid input” messages
-* Clearing form data after errors
+- Clearing form data after errors
-* Delayed validation surprises
+- Delayed validation surprises
-* Validation that interrupts typing
+- 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`
+- `email`
-* `tel`
+- `tel`
-* `number`
+- `number`
-* `date`
+- `date`
-* `password`
+- `password`
-* `search`
+- `search`
 ### Benefits
-* Better mobile keyboards
+- Better mobile keyboards
-* Native validation
+- Native validation
-* Improved accessibility
+- Improved accessibility
-* Better autofill support
+- Better autofill support
 ---
@@ -217,18 +217,18 @@ Use appropriate HTML input types:
 ### Good Practices
-* Enter submits forms when expected
+- Enter submits forms when expected
-* Escape cancels dialogs
+- Escape cancels dialogs
-* Show loading states during submission
+- Show loading states during submission
-* Prevent duplicate submissions
+- Prevent duplicate submissions
-* Preserve draft state
+- Preserve draft state
-* Allow keyboard submission
+- Allow keyboard submission
 ### Bad Practices
-* Disabled submit buttons without explanation
+- Disabled submit buttons without explanation
-* Hidden validation failures
+- Hidden validation failures
-* Silent submission failures
+- Silent submission failures
 ---
@@ -236,16 +236,16 @@ Use appropriate HTML input types:
 ### Good Practices
-* Use radio buttons for small option sets
+- Use radio buttons for small option sets
-* Use searchable selects for large datasets
+- Use searchable selects for large datasets
-* Prefer autocomplete for many options
+- Prefer autocomplete for many options
-* Show selected state clearly
+- Show selected state clearly
 ### Bad Practices
-* Massive unsearchable dropdowns
+- Massive unsearchable dropdowns
-* Nested dropdown hierarchies
+- Nested dropdown hierarchies
-* Multi-select controls without search
+- Multi-select controls without search
 ---
@@ -257,17 +257,17 @@ Use appropriate HTML input types:
 Users should always know:
-* Where they are
+- Where they are
-* How they got there
+- How they got there
-* What they can do next
+- What they can do next
-* How to go back
+- How to go back
 ### Good Practices
-* Highlight active navigation
+- Highlight active navigation
-* Use breadcrumbs when helpful
+- Use breadcrumbs when helpful
-* Use meaningful page titles
+- Use meaningful page titles
-* Preserve navigation consistency
+- Preserve navigation consistency
 ---
@@ -275,16 +275,16 @@ Users should always know:
 ### Good Practices
-* Keep hierarchy shallow
+- Keep hierarchy shallow
-* Group related actions
+- Group related actions
-* Use descriptive names
+- Use descriptive names
-* Keep primary actions stable
+- Keep primary actions stable
 ### Bad Practices
-* Deep nesting
+- Deep nesting
-* Ambiguous navigation labels
+- Ambiguous navigation labels
-* Constantly moving actions
+- Constantly moving actions
 ---
@@ -292,16 +292,16 @@ Users should always know:
 ### Good Practices
-* Use readable URLs
+- Use readable URLs
-* Make URLs shareable
+- Make URLs shareable
-* Preserve app state in URLs when useful
+- Preserve app state in URLs when useful
-* Support browser history correctly
+- Support browser history correctly
 ### Bad Practices
-* Opaque generated URLs
+- Opaque generated URLs
-* Broken back button behavior
+- Broken back button behavior
-* Losing state during navigation
+- Losing state during navigation
 ---
@@ -313,16 +313,16 @@ Users should always know:
 ### Good Practices
-* Large clickable areas
+- Large clickable areas
-* Adequate spacing between actions
+- Adequate spacing between actions
-* Clear hover/focus states
+- Clear hover/focus states
-* Touch-friendly sizing
+- Touch-friendly sizing
 ### Bad Practices
-* Tiny clickable regions
+- Tiny clickable regions
-* Overlapping interactive elements
+- Overlapping interactive elements
-* Hidden hit areas
+- Hidden hit areas
 ---
@@ -332,18 +332,18 @@ Every interaction should produce feedback.
 ### Good Practices
-* Hover states
+- Hover states
-* Active states
+- Active states
-* Loading indicators
+- Loading indicators
-* Success states
+- Success states
-* Error states
+- Error states
-* Optimistic updates when appropriate
+- Optimistic updates when appropriate
 ### Bad Practices
-* Dead-feeling interfaces
+- Dead-feeling interfaces
-* Invisible processing
+- Invisible processing
-* Delayed reactions
+- Delayed reactions
 ---
@@ -351,16 +351,16 @@ Every interaction should produce feedback.
 ### Good Practices
-* Require confirmation for dangerous actions
+- Require confirmation for dangerous actions
-* Prefer undo systems
+- Prefer undo systems
-* Visually distinguish destructive buttons
+- Visually distinguish destructive buttons
-* Separate destructive actions spatially
+- Separate destructive actions spatially
 ### Bad Practices
-* Immediate irreversible deletion
+- Immediate irreversible deletion
-* Dangerous actions near common actions
+- Dangerous actions near common actions
-* Ambiguous destructive wording
+- Ambiguous destructive wording
 ---
@@ -368,17 +368,17 @@ Every interaction should produce feedback.
 ### Good Practices
-* Trap keyboard focus
+- Trap keyboard focus
-* Support Escape to close
+- Support Escape to close
-* Restore focus after closing
+- Restore focus after closing
-* Prevent background interaction
+- Prevent background interaction
-* Keep modal purpose focused
+- Keep modal purpose focused
 ### Bad Practices
-* Nested modals
+- Nested modals
-* Full workflows inside modals
+- Full workflows inside modals
-* Losing unsaved work accidentally
+- Losing unsaved work accidentally
 ---
@@ -394,17 +394,17 @@ Users interpret slowness as unreliability.
 ### Good Practices
-* Show immediate visual response
+- Show immediate visual response
-* Use optimistic UI updates
+- Use optimistic UI updates
-* Preload likely next content
+- Preload likely next content
-* Stream content progressively
+- Stream content progressively
-* Use skeleton loaders
+- Use skeleton loaders
 ### Bad Practices
-* Blank screens during loading
+- Blank screens during loading
-* Long blocking operations
+- Long blocking operations
-* Frozen interfaces
+- Frozen interfaces
 ---
@@ -412,16 +412,16 @@ Users interpret slowness as unreliability.
 ### Good Practices
-* Prevent layout shift
+- Prevent layout shift
-* Reserve image dimensions
+- Reserve image dimensions
-* Avoid moving buttons during loading
+- Avoid moving buttons during loading
-* Keep skeletons aligned with final layout
+- Keep skeletons aligned with final layout
 ### Bad Practices
-* Jumping content
+- Jumping content
-* Shifting controls
+- Shifting controls
-* Reflow-heavy rendering
+- Reflow-heavy rendering
 ---
@@ -429,16 +429,16 @@ Users interpret slowness as unreliability.
 ### Good Practices
-* Keep UI interactive during async operations
+- Keep UI interactive during async operations
-* Avoid blocking the main thread
+- Avoid blocking the main thread
-* Debounce expensive operations
+- Debounce expensive operations
-* Virtualize large lists
+- Virtualize large lists
 ### Bad Practices
-* UI freezes
+- UI freezes
-* Excessive rerenders
+- Excessive rerenders
-* Laggy typing experiences
+- Laggy typing experiences
 ---
@@ -452,16 +452,16 @@ Accessibility improves usability for everyone.
 ### Good Practices
-* Full keyboard navigation
+- Full keyboard navigation
-* Visible focus indicators
+- Visible focus indicators
-* Logical tab order
+- Logical tab order
-* Keyboard shortcuts for power users
+- Keyboard shortcuts for power users
 ### Bad Practices
-* Mouse-only workflows
+- Mouse-only workflows
-* Hidden focus state
+- Hidden focus state
-* Keyboard traps
+- Keyboard traps
 ---
@@ -469,16 +469,16 @@ Accessibility improves usability for everyone.
 ### Good Practices
-* Use proper semantic elements
+- Use proper semantic elements
-* Use buttons for actions
+- Use buttons for actions
-* Use links for navigation
+- Use links for navigation
-* Use headings correctly
+- Use headings correctly
 ### Bad Practices
-* Clickable divs without accessibility support
+- Clickable divs without accessibility support
-* Fake buttons
+- Fake buttons
-* Missing semantic structure
+- Missing semantic structure
 ---
@@ -486,16 +486,16 @@ Accessibility improves usability for everyone.
 ### Good Practices
-* Sufficient color contrast
+- Sufficient color contrast
-* Support reduced motion
+- Support reduced motion
-* Avoid color-only communication
+- Avoid color-only communication
-* Use scalable typography
+- Use scalable typography
 ### Bad Practices
-* Tiny text
+- Tiny text
-* Low contrast interfaces
+- Low contrast interfaces
-* Flashing animations
+- Flashing animations
 ---
@@ -503,16 +503,16 @@ Accessibility improves usability for everyone.
 ### Good Practices
-* Proper labels
+- Proper labels
-* Meaningful alt text
+- Meaningful alt text
-* ARIA only when necessary
+- ARIA only when necessary
-* Correct live regions for updates
+- Correct live regions for updates
 ### Bad Practices
-* Unlabeled controls
+- Unlabeled controls
-* Excessive ARIA misuse
+- Excessive ARIA misuse
-* Non-announced state changes
+- Non-announced state changes
 ---
@@ -528,17 +528,17 @@ Power users often prioritize efficiency over visual minimalism.
 ### Good Practices
-* Efficient data density
+- Efficient data density
-* Resizable tables
+- Resizable tables
-* Sticky headers
+- Sticky headers
-* Multi-column layouts
+- Multi-column layouts
-* High information throughput
+- High information throughput
 ### Bad Practices
-* Excessive whitespace
+- Excessive whitespace
-* Oversimplified dashboards
+- Oversimplified dashboards
-* Hidden operational controls
+- Hidden operational controls
 ---
@@ -546,19 +546,19 @@ Power users often prioritize efficiency over visual minimalism.
 ### Good Practices
-* Sorting
+- Sorting
-* Filtering
+- Filtering
-* Column resizing
+- Column resizing
-* Pagination or virtualization
+- Pagination or virtualization
-* Keyboard navigation
+- Keyboard navigation
-* Export functionality
+- Export functionality
-* Persistent user preferences
+- Persistent user preferences
 ### Bad Practices
-* Non-sortable enterprise tables
+- Non-sortable enterprise tables
-* Horizontal scrolling nightmares
+- Horizontal scrolling nightmares
-* Missing filtering
+- Missing filtering
 ---
@@ -566,18 +566,18 @@ Power users often prioritize efficiency over visual minimalism.
 ### Good Practices
-* Keyboard shortcuts
+- Keyboard shortcuts
-* Bulk actions
+- Bulk actions
-* Batch editing
+- Batch editing
-* Command palettes
+- Command palettes
-* State persistence
+- State persistence
-* Fast navigation
+- Fast navigation
 ### Bad Practices
-* Forced wizard workflows
+- Forced wizard workflows
-* Excessive confirmations
+- Excessive confirmations
-* Repetitive manual work
+- Repetitive manual work
 ---
@@ -589,16 +589,16 @@ Power users often prioritize efficiency over visual minimalism.
 ### Good Practices
-* Large touch targets
+- Large touch targets
-* Thumb-friendly layouts
+- Thumb-friendly layouts
-* Avoid hover dependencies
+- Avoid hover dependencies
-* Mobile-friendly spacing
+- Mobile-friendly spacing
 ### Bad Practices
-* Tiny controls
+- Tiny controls
-* Hover-only interactions
+- Hover-only interactions
-* Precision-dependent gestures
+- Precision-dependent gestures
 ---
@@ -606,16 +606,16 @@ Power users often prioritize efficiency over visual minimalism.
 ### Good Practices
-* Mobile keyboard optimization
+- Mobile keyboard optimization
-* Minimal typing
+- Minimal typing
-* Autofill support
+- Autofill support
-* Step-by-step flows when necessary
+- Step-by-step flows when necessary
 ### Bad Practices
-* Long complex forms
+- Long complex forms
-* Tiny input fields
+- Tiny input fields
-* Excessive required typing
+- Excessive required typing
 ---
@@ -629,9 +629,9 @@ More choices increase decision time.
 ### Applications
-* Reduce unnecessary options
+- Reduce unnecessary options
-* Group related actions
+- Group related actions
-* Prioritize primary actions
+- Prioritize primary actions
 ---
@@ -641,5 +641,5 @@ Closer and larger targets are easier to use.
 ### Applications
-* Large primary buttons
+- Large primary buttons
-* Edge/corner placement for important actions
+- Edge/corner placement for important actions
@@ -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>
@@ -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;