purity-world 1.0.0

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "purity-world",
+  "version": "1.0.0",
+  "description": "Lightweight, native TypeScript frontend framework built on Custom Elements v1, fine-grained synchronous signals, and Adwaita design system",
+  "type": "module",
+  "main": "./index.cjs",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "require": "./index.cjs"
+    },
+    "./vite": {
+      "types": "./vite.d.ts",
+      "import": "./vite.js",
+      "require": "./vite.cjs"
+    },
+    "./styles": "./style.css",
+    "./styles/*": "./styles/*",
+    "./cursors/*": "./cursors/*"
+  },
+  "files": [
+    "index.js",
+    "index.cjs",
+    "index.d.ts",
+    "vite.js",
+    "vite.cjs",
+    "vite.d.ts",
+    "types",
+    "style.css",
+    "styles",
+    "cursors",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "signals",
+    "reactivity",
+    "web-components",
+    "custom-elements",
+    "framework",
+    "typescript",
+    "http-client",
+    "virtual-scroll",
+    "router",
+    "adwaita"
+  ],
+  "author": "Purity Contributors",
+  "license": "MIT",
+  "peerDependencies": {
+    "vite": ">=5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vite": {
+      "optional": true
+    }
+  }
+}

package/style.css

@@ -0,0 +1 @@
+:root{--font-mono: 'Adwaita Mono', 'Source Code Pro', monospace;--font-main: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;--font-size-xs: 12px;--font-size-sm: 13.5px;--font-size-base: 15px;--font-size-lg: 18px;--font-size-xl: 24px;--font-size-xxl: 32px;--radius-window: 16px;--radius-control: 8px;--radius-pill: 999px;--radius-card: 12px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 24px;--spacing-xxl: 32px;--header-max-width: 1366px;--transition-fast: 0.18s;--transition-normal: 0.28s;--transition-slow: 0.45s;--ease-gnome: cubic-bezier(0.25, 0.8, 0.25, 1);--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);--blur-subtle: blur(10px) saturate(150%);--blur-effect: blur(20px) saturate(175%);--blur-heavy: blur(32px) saturate(190%);--cursor-default: url('/cursors/default.svg') 4 4, default;--cursor-pointer: url('/cursors/pointer.svg') 16 4, pointer;--cursor-text: url('/cursors/text.svg') 16 15, text;--cursor-grab: url('/cursors/openhand.svg') 16 16, grab;--cursor-grabbing: url('/cursors/dnd-move.svg') 16 16, grabbing;--cursor-not-allowed: url('/cursors/not-allowed.svg') 16 15, not-allowed;--cursor-crosshair: url('/cursors/crosshair.svg') 17 17, crosshair;--cursor-help: url('/cursors/help.svg') 4 4, help;--cursor-move: url('/cursors/all-scroll.svg') 15 15, move;--cursor-col-resize: url('/cursors/col-resize.svg') 16 15, col-resize;--cursor-row-resize: url('/cursors/row-resize.svg') 16 15, row-resize;--cursor-ew-resize: url('/cursors/size_hor.svg') 16 15, ew-resize;--cursor-ns-resize: url('/cursors/size_ver.svg') 16 15, ns-resize;--cursor-nwse-resize: url('/cursors/size_bdiag.svg') 16 15, nwse-resize;--cursor-nesw-resize: url('/cursors/size_fdiag.svg') 16 15, nesw-resize;--cursor-zoom-in: url('/cursors/zoom-in.svg') 15 15, zoom-in;--cursor-zoom-out: url('/cursors/zoom-out.svg') 15 15, zoom-out;--cursor-context-menu: url('/cursors/context-menu.svg') 4 4, context-menu;--cursor-progress: url('/cursors/progress-01.svg') 4 4, progress;--cursor-wait: url('/cursors/wait-01.svg') 16 15, wait;--cursor-copy: url('/cursors/copy.svg') 16 4, copy;--cursor-alias: url('/cursors/alias.svg') 16 4, alias;--cursor-cell: url('/cursors/cell.svg') 16 16, cell;--cursor-color-picker: url('/cursors/color-picker.svg') 4 16, crosshair;--cursor-pencil: url('/cursors/pencil.svg') 4 16, crosshair;--cursor-vertical-text: url('/cursors/vertical-text.svg') 16 15, vertical-text;--cursor-dnd-no-drop: url('/cursors/dnd-no-drop.svg') 16 15, no-drop}:root{--gnome-bg: #1e1e1e;--gnome-surface: rgba(34, 34, 40, 0.72);--gnome-surface-solid: #242424;--gnome-header: rgba(30, 30, 36, 0.88);--gnome-card: rgba(255, 255, 255, 0.06);--gnome-hover: rgba(255, 255, 255, 0.12);--gnome-active: rgba(255, 255, 255, 0.18);--gnome-subtle: rgba(255, 255, 255, 0.03);--gnome-input: rgba(255, 255, 255, 0.08);--gnome-input-hover: rgba(255, 255, 255, 0.14);--gnome-input-focus: rgba(255, 255, 255, 0.16);--select-chevron-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233584e4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--gnome-border: rgba(255, 255, 255, 0.14);--gnome-border-subtle: rgba(255, 255, 255, 0.08);--gnome-border-focus: rgba(53, 132, 228, 0.6);--text-main: #ffffff;--text-secondary: #9a9996;--text-muted: #777777;--text-off: rgba(255, 255, 255, 0.25);--text-inverse: #1e1e1e;--accent: #3584e4;--accent-hover: #4791eb;--accent-active: #1c71d8;--accent-shadow: rgba(53, 132, 228, 0.35);--accent-subtle: rgba(53, 132, 228, 0.15);--gnome-success: #2ec27e;--gnome-error: #ed333b;--gnome-info: #3584e4;--gnome-warn: #f8e45c;--gnome-success-bg: rgba(46, 194, 126, 0.18);--gnome-error-bg: rgba(237, 51, 59, 0.18);--gnome-info-bg: rgba(53, 132, 228, 0.18);--gnome-warn-bg: rgba(248, 228, 92, 0.18);--shadow-deep: 0 20px 50px rgba(0, 0, 0, 0.55);--shadow-popup: 0 16px 40px rgba(0, 0, 0, 0.65), inset 0 1px rgba(255, 255, 255, 0.1);--shadow-control: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.08);--wallpaper: radial-gradient(circle at top left, rgba(53, 132, 228, 0.45), transparent 45%), radial-gradient(circle at bottom right, rgba(145, 65, 172, 0.45), transparent 45%), #1e1e1e;--wallpaper-bg-color: #1e1e1e;--dp-surface-bg: rgba(30, 30, 34, 0.88);--dp-surface-blur-bg: rgba(28, 28, 34, 0.65);--dp-text-main: var(--text-main);--dp-text-secondary: var(--text-secondary);--dp-border: var(--gnome-border);--dp-shadow: var(--shadow-popup);--dropdown-bg: rgba(30, 30, 34, 0.96);--dropdown-blur-bg: rgba(28, 28, 34, 0.90);--dropdown-border: var(--gnome-border);--dropdown-shadow: var(--shadow-popup);--popover-bg: rgba(30, 30, 36, 0.92);--popover-blur-bg: rgba(28, 28, 34, 0.85);--popover-border: rgba(255, 255, 255, 0.16);--popover-shadow: 0 16px 42px rgba(0, 0, 0, 0.7), 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15);--radial-bg: rgba(30, 30, 30, 0.92);--radial-blur-bg: rgba(30, 30, 30, 0.75);--radial-segment-bg: rgba(45, 45, 45, 0.7);--radial-text: #ffffff;--radial-border: rgba(255, 255, 255, 0.12);--code-bg: rgba(14, 18, 26, 0.85);--code-border: rgba(255, 255, 255, 0.1);--code-text: #e6edf3;--code-kw: #ff7b72;--code-dec: #d2a8ff;--code-fn: #79c0ff;--code-typ: #ffa657;--code-str: #a5d6ff;--code-num: #79c0ff;--code-cmt: #8b949e;--code-tag: #7ee787;--code-attr: #79c0ff;--code-expr: #ffa657}html,body{--gnome-bg: #1e1e1e;--gnome-surface: rgba(34, 34, 40, 0.72);--gnome-surface-solid: #242424;--gnome-header: rgba(30, 30, 36, 0.88);--gnome-card: rgba(255, 255, 255, 0.06);--gnome-hover: rgba(255, 255, 255, 0.12);--gnome-active: rgba(255, 255, 255, 0.18);--gnome-subtle: rgba(255, 255, 255, 0.03);--gnome-input: rgba(255, 255, 255, 0.08);--gnome-input-hover: rgba(255, 255, 255, 0.14);--gnome-input-focus: rgba(255, 255, 255, 0.16);--select-chevron-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233584e4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--gnome-border: rgba(255, 255, 255, 0.14);--gnome-border-subtle: rgba(255, 255, 255, 0.08);--gnome-border-focus: rgba(53, 132, 228, 0.6);--text-main: #ffffff;--text-secondary: #9a9996;--text-muted: #777777;--text-off: rgba(255, 255, 255, 0.25);--text-inverse: #1e1e1e;--accent: #3584e4;--accent-hover: #4791eb;--accent-active: #1c71d8;--accent-shadow: rgba(53, 132, 228, 0.35);--accent-subtle: rgba(53, 132, 228, 0.15);--gnome-success: #2ec27e;--gnome-error: #ed333b;--gnome-info: #3584e4;--gnome-warn: #f8e45c;--gnome-success-bg: rgba(46, 194, 126, 0.18);--gnome-error-bg: rgba(237, 51, 59, 0.18);--gnome-info-bg: rgba(53, 132, 228, 0.18);--gnome-warn-bg: rgba(248, 228, 92, 0.18);--shadow-deep: 0 20px 50px rgba(0, 0, 0, 0.55);--shadow-popup: 0 16px 40px rgba(0, 0, 0, 0.65), inset 0 1px rgba(255, 255, 255, 0.1);--shadow-control: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.08);--wallpaper: radial-gradient(circle at top left, rgba(53, 132, 228, 0.45), transparent 45%), radial-gradient(circle at bottom right, rgba(145, 65, 172, 0.45), transparent 45%), #1e1e1e;--wallpaper-bg-color: #1e1e1e;--dp-surface-bg: rgba(30, 30, 34, 0.88);--dp-surface-blur-bg: rgba(28, 28, 34, 0.65);--dp-text-main: var(--text-main);--dp-text-secondary: var(--text-secondary);--dp-border: var(--gnome-border);--dp-shadow: var(--shadow-popup);--dropdown-bg: rgba(30, 30, 34, 0.96);--dropdown-blur-bg: rgba(28, 28, 34, 0.90);--dropdown-border: var(--gnome-border);--dropdown-shadow: var(--shadow-popup);--popover-bg: rgba(30, 30, 36, 0.92);--popover-blur-bg: rgba(28, 28, 34, 0.85);--popover-border: rgba(255, 255, 255, 0.16);--popover-shadow: 0 16px 42px rgba(0, 0, 0, 0.7), 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15);--radial-bg: rgba(30, 30, 30, 0.92);--radial-blur-bg: rgba(30, 30, 30, 0.75);--radial-segment-bg: rgba(45, 45, 45, 0.7);--radial-text: #ffffff;--radial-border: rgba(255, 255, 255, 0.12);--code-bg: rgba(14, 18, 26, 0.85);--code-border: rgba(255, 255, 255, 0.1);--code-text: #e6edf3;--code-kw: #ff7b72;--code-dec: #d2a8ff;--code-fn: #79c0ff;--code-typ: #ffa657;--code-str: #a5d6ff;--code-num: #79c0ff;--code-cmt: #8b949e;--code-tag: #7ee787;--code-attr: #79c0ff;--code-expr: #ffa657;color-scheme:dark}html[data-theme=dark],body[data-theme=dark],[data-theme=dark]{--gnome-bg: #1e1e1e;--gnome-surface: rgba(34, 34, 40, 0.72);--gnome-surface-solid: #242424;--gnome-header: rgba(30, 30, 36, 0.88);--gnome-card: rgba(255, 255, 255, 0.06);--gnome-hover: rgba(255, 255, 255, 0.12);--gnome-active: rgba(255, 255, 255, 0.18);--gnome-subtle: rgba(255, 255, 255, 0.03);--gnome-input: rgba(255, 255, 255, 0.08);--gnome-input-hover: rgba(255, 255, 255, 0.14);--gnome-input-focus: rgba(255, 255, 255, 0.16);--select-chevron-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233584e4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--gnome-border: rgba(255, 255, 255, 0.14);--gnome-border-subtle: rgba(255, 255, 255, 0.08);--gnome-border-focus: rgba(53, 132, 228, 0.6);--text-main: #ffffff;--text-secondary: #9a9996;--text-muted: #777777;--text-off: rgba(255, 255, 255, 0.25);--text-inverse: #1e1e1e;--accent: #3584e4;--accent-hover: #4791eb;--accent-active: #1c71d8;--accent-shadow: rgba(53, 132, 228, 0.35);--accent-subtle: rgba(53, 132, 228, 0.15);--gnome-success: #2ec27e;--gnome-error: #ed333b;--gnome-info: #3584e4;--gnome-warn: #f8e45c;--gnome-success-bg: rgba(46, 194, 126, 0.18);--gnome-error-bg: rgba(237, 51, 59, 0.18);--gnome-info-bg: rgba(53, 132, 228, 0.18);--gnome-warn-bg: rgba(248, 228, 92, 0.18);--shadow-deep: 0 20px 50px rgba(0, 0, 0, 0.55);--shadow-popup: 0 16px 40px rgba(0, 0, 0, 0.65), inset 0 1px rgba(255, 255, 255, 0.1);--shadow-control: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.08);--wallpaper: radial-gradient(circle at top left, rgba(53, 132, 228, 0.45), transparent 45%), radial-gradient(circle at bottom right, rgba(145, 65, 172, 0.45), transparent 45%), #1e1e1e;--wallpaper-bg-color: #1e1e1e;--dp-surface-bg: rgba(30, 30, 34, 0.88);--dp-surface-blur-bg: rgba(28, 28, 34, 0.65);--dp-text-main: var(--text-main);--dp-text-secondary: var(--text-secondary);--dp-border: var(--gnome-border);--dp-shadow: var(--shadow-popup);--dropdown-bg: rgba(30, 30, 34, 0.96);--dropdown-blur-bg: rgba(28, 28, 34, 0.90);--dropdown-border: var(--gnome-border);--dropdown-shadow: var(--shadow-popup);--popover-bg: rgba(30, 30, 36, 0.92);--popover-blur-bg: rgba(28, 28, 34, 0.85);--popover-border: rgba(255, 255, 255, 0.16);--popover-shadow: 0 16px 42px rgba(0, 0, 0, 0.7), 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15);--radial-bg: rgba(30, 30, 30, 0.92);--radial-blur-bg: rgba(30, 30, 30, 0.75);--radial-segment-bg: rgba(45, 45, 45, 0.7);--radial-text: #ffffff;--radial-border: rgba(255, 255, 255, 0.12);--code-bg: rgba(14, 18, 26, 0.85);--code-border: rgba(255, 255, 255, 0.1);--code-text: #e6edf3;--code-kw: #ff7b72;--code-dec: #d2a8ff;--code-fn: #79c0ff;--code-typ: #ffa657;--code-str: #a5d6ff;--code-num: #79c0ff;--code-cmt: #8b949e;--code-tag: #7ee787;--code-attr: #79c0ff;--code-expr: #ffa657;color-scheme:dark}html[data-theme=light],body[data-theme=light],[data-theme=light]{--gnome-bg: #f6f5f4;--gnome-surface: rgba(255, 255, 255, 0.84);--gnome-surface-solid: #ffffff;--gnome-header: rgba(255, 255, 255, 0.92);--gnome-card: rgba(0, 0, 0, 0.04);--gnome-hover: rgba(0, 0, 0, 0.06);--gnome-active: rgba(0, 0, 0, 0.1);--gnome-subtle: rgba(0, 0, 0, 0.02);--gnome-input: rgba(0, 0, 0, 0.05);--gnome-input-hover: rgba(0, 0, 0, 0.08);--gnome-input-focus: rgba(255, 255, 255, 0.95);--select-chevron-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231c71d8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--gnome-border: rgba(0, 0, 0, 0.16);--gnome-border-subtle: rgba(0, 0, 0, 0.09);--gnome-border-focus: rgba(28, 113, 216, 0.7);--text-main: #1c1c1c;--text-secondary: #5e5c64;--text-muted: #8a8886;--text-off: rgba(0, 0, 0, 0.35);--text-inverse: #ffffff;--accent: #1c71d8;--accent-hover: #3584e4;--accent-active: #1a5fb4;--accent-shadow: rgba(28, 113, 216, 0.28);--accent-subtle: rgba(28, 113, 216, 0.12);--gnome-success: #26a269;--gnome-error: #c01c28;--gnome-info: #1c71d8;--gnome-warn: #cd9309;--gnome-success-bg: rgba(38, 162, 105, 0.15);--gnome-error-bg: rgba(192, 28, 40, 0.15);--gnome-info-bg: rgba(28, 113, 216, 0.15);--gnome-warn-bg: rgba(205, 147, 9, 0.15);--shadow-deep: 0 16px 40px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);--shadow-popup: 0 16px 40px rgba(0, 0, 0, 0.14), 0 2px 10px rgba(0, 0, 0, 0.08), inset 0 1px rgba(255, 255, 255, 0.9);--shadow-control: 0 2px 6px rgba(0, 0, 0, 0.06), inset 0 1px rgba(255, 255, 255, 0.6);--wallpaper: radial-gradient(circle at top left, rgba(53, 132, 228, 0.22), transparent 45%), radial-gradient(circle at bottom right, rgba(145, 65, 172, 0.22), transparent 45%), #f6f5f4;--wallpaper-bg-color: #f6f5f4;--dp-surface-bg: rgba(255, 255, 255, 0.88);--dp-surface-blur-bg: rgba(255, 255, 255, 0.65);--dp-text-main: var(--text-main);--dp-text-secondary: var(--text-secondary);--dp-border: var(--gnome-border);--dp-shadow: var(--shadow-popup);--dropdown-bg: rgba(255, 255, 255, 0.96);--dropdown-blur-bg: rgba(255, 255, 255, 0.90);--dropdown-border: var(--gnome-border);--dropdown-shadow: var(--shadow-popup);--popover-bg: rgba(255, 255, 255, 0.96);--popover-blur-bg: rgba(255, 255, 255, 0.92);--popover-border: rgba(0, 0, 0, 0.18);--popover-shadow: 0 16px 38px rgba(0, 0, 0, 0.18), 0 4px 14px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95);--radial-bg: rgba(255, 255, 255, 0.94);--radial-blur-bg: rgba(255, 255, 255, 0.82);--radial-segment-bg: rgba(240, 240, 240, 0.85);--radial-text: #1c1c1c;--radial-border: rgba(0, 0, 0, 0.12);--code-bg: #f6f8fa;--code-border: rgba(0, 0, 0, 0.12);--code-text: #24292f;--code-kw: #cf222e;--code-dec: #8250df;--code-fn: #0550ae;--code-typ: #953800;--code-str: #0a3069;--code-num: #0550ae;--code-cmt: #6e7781;--code-tag: #116329;--code-attr: #0550ae;--code-expr: #953800;color-scheme:light}@font-face{font-family:"Adwaita Mono";src:url("../app/assets/mono/AdwaitaMono-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}*,*::before,*::after{cursor:inherit}html{margin:0;padding:0;min-height:100%;background-color:var(--wallpaper-bg-color, #1e1e1e);transition:background-color var(--transition-normal) ease;cursor:var(--cursor-default)}body{position:relative;margin:0;padding:7px;box-sizing:border-box;min-height:100vh;background:var(--wallpaper);background-attachment:fixed;background-repeat:no-repeat;background-size:cover;background-color:var(--wallpaper-bg-color, #1e1e1e);color:var(--text-main);font-family:var(--font-main);transition:background-color var(--transition-normal) ease,color var(--transition-normal) ease;cursor:var(--cursor-default)}a,button,[role=button],input[type=button],input[type=submit],input[type=reset],select,summary,label[for],.clickable,.button-base,.button-danger,.button-cancel,.button-primary,.button-secondary,.button-error,.editor-tab,.action-btn,.theme-toggle-btn,.toast-close-btn,.delete-btn{cursor:var(--cursor-pointer)}input[type=text],input[type=number],input[type=password],input[type=email],input[type=search],input[type=url],input[type=tel],textarea,.input-primary,[contenteditable=true],code,pre{cursor:var(--cursor-text)}:disabled,[disabled],.disabled,[aria-disabled=true]{cursor:var(--cursor-not-allowed) !important}[draggable=true],.draggable,.draggable-target,.drag-handle{cursor:var(--cursor-grab)}.is-dragging,.dragging,.p-dragging{cursor:var(--cursor-grabbing) !important}html.http-loading,body.http-loading,.http-loading,.is-loading,[data-loading=true],.loading,.loader-inline-root.visible{cursor:var(--cursor-progress) !important}html.http-loading *,body.http-loading *,.http-loading *,.is-loading *,[data-loading=true] *,.loading *,.loader-inline-root.visible *{cursor:var(--cursor-progress) !important}.label-base,.warn,.info,.error,.success{display:inline-flex;align-items:center;padding:2px 12px;border-radius:var(--radius-pill);font-size:11px;font-weight:800;line-height:1.4;text-transform:uppercase;letter-spacing:.05em;background-image:linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%);border:1px solid rgba(0,0,0,.15)}.success{background-color:var(--gnome-success);color:#fff;box-shadow:inset 0 1px rgba(255,255,255,.3),0 2px 6px rgba(46,194,126,.3)}.error{color:#fff;background-color:var(--gnome-error);box-shadow:inset 0 1px rgba(255,255,255,.3),0 2px 6px rgba(237,51,59,.3)}.info{color:#fff;background-color:var(--gnome-info);box-shadow:inset 0 1px rgba(255,255,255,.3),0 2px 6px rgba(53,132,228,.3)}.warn{color:rgba(0,0,0,.85);background-color:var(--gnome-warn);box-shadow:inset 0 1px rgba(255,255,255,.5),0 2px 6px rgba(248,228,92,.3)}.window-base,.window{margin:var(--spacing-lg)}.window{background:var(--gnome-surface);-webkit-backdrop-filter:var(--blur-effect);backdrop-filter:var(--blur-effect);border:1px solid var(--gnome-border);border-radius:var(--radius-window);box-shadow:var(--shadow-deep);overflow:hidden;color:var(--text-main);font-family:var(--font-main);display:flex;flex-direction:column;padding:10px;transition:background-color var(--transition-normal) ease,border-color var(--transition-normal) ease,box-shadow var(--transition-normal) ease}.button-base,.button-error,.button-danger,.button-cancel,.button-secondary,.button-primary{margin:var(--spacing-sm)}.button-primary{background-color:var(--accent);background-image:linear-gradient(to bottom, rgba(255, 255, 255, 0.15), transparent);color:#fff;font-family:var(--font-main);font-weight:700;font-size:var(--font-size-sm);padding:10px 20px;border-radius:var(--radius-control);border:1px solid rgba(0,0,0,.15);box-shadow:var(--shadow-control);cursor:var(--cursor-pointer);transition:all var(--transition-fast) var(--ease-gnome);outline:none}.button-primary:hover:not(:disabled):not(.disabled){background-color:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 14px var(--accent-shadow),inset 0 1px rgba(255,255,255,.25)}.button-primary:active:not(:disabled):not(.disabled){background-color:var(--accent-active);transform:translateY(0);box-shadow:inset 0 2px 4px rgba(0,0,0,.25)}.button-primary:focus-visible{box-shadow:0 0 0 3px var(--accent-shadow);border-color:var(--accent)}.button-primary:disabled,.button-primary.disabled{opacity:.45;cursor:var(--cursor-not-allowed) !important;pointer-events:none;transform:none !important;box-shadow:none !important}.button-secondary{background-color:var(--gnome-card);-webkit-backdrop-filter:var(--blur-subtle);backdrop-filter:var(--blur-subtle);border:1px solid var(--gnome-border);color:var(--text-main);font-family:var(--font-main);font-weight:700;font-size:var(--font-size-sm);padding:10px 20px;border-radius:var(--radius-control);cursor:var(--cursor-pointer);transition:all var(--transition-fast) var(--ease-gnome);outline:none}.button-secondary:hover:not(:disabled):not(.disabled){background-color:var(--gnome-hover);border-color:var(--gnome-border-focus);transform:translateY(-1px)}.button-secondary:active:not(:disabled):not(.disabled){background-color:var(--gnome-active);transform:translateY(0)}.button-secondary:focus-visible{box-shadow:0 0 0 3px var(--accent-shadow);border-color:var(--accent)}.button-secondary:disabled,.button-secondary.disabled{opacity:.45;cursor:var(--cursor-not-allowed) !important;pointer-events:none;transform:none !important;box-shadow:none !important}.button-error,.button-danger,.button-cancel{background-color:var(--gnome-error);background-image:linear-gradient(to bottom, rgba(255, 255, 255, 0.15), transparent);color:#fff;font-family:var(--font-main);font-weight:700;font-size:var(--font-size-sm);padding:10px 20px;border-radius:var(--radius-control);border:1px solid rgba(0,0,0,.2);box-shadow:inset 0 1px rgba(255,255,255,.3),0 2px 6px rgba(237,51,59,.35);cursor:var(--cursor-pointer);transition:all var(--transition-fast) var(--ease-gnome);outline:none}.button-error:hover:not(:disabled):not(.disabled),.button-danger:hover:not(:disabled):not(.disabled),.button-cancel:hover:not(:disabled):not(.disabled){background-color:#e01b24;transform:translateY(-1px);box-shadow:0 4px 14px rgba(237,51,59,.4),inset 0 1px rgba(255,255,255,.4)}.button-error:active:not(:disabled):not(.disabled),.button-danger:active:not(:disabled):not(.disabled),.button-cancel:active:not(:disabled):not(.disabled){background-color:#c01c28;transform:translateY(0);box-shadow:inset 0 2px 4px rgba(0,0,0,.3)}.button-error:focus-visible,.button-danger:focus-visible,.button-cancel:focus-visible{box-shadow:0 0 0 3px rgba(237,51,59,.4)}.button-error:disabled,.button-error.disabled,.button-danger:disabled,.button-danger.disabled,.button-cancel:disabled,.button-cancel.disabled{opacity:.45;cursor:var(--cursor-not-allowed) !important;pointer-events:none;transform:none !important;box-shadow:none !important}.button-group{display:flex;flex-direction:row;align-items:center}.base-input,select,.select-primary,.input-primary{margin:var(--spacing-sm)}.input-primary{background-color:var(--gnome-input);-webkit-backdrop-filter:var(--blur-subtle);backdrop-filter:var(--blur-subtle);border:1px solid var(--gnome-border);border-radius:var(--radius-control);color:var(--text-main);padding:10px 16px;font-family:var(--font-main);font-size:var(--font-size-sm);box-shadow:inset 0 1px 2px rgba(0,0,0,.1);transition:all var(--transition-fast) ease;outline:none}.input-primary::placeholder{color:var(--text-secondary);opacity:.65}.input-primary:hover{background-color:var(--gnome-input-hover);border-color:var(--gnome-border)}.input-primary:focus{background-color:var(--gnome-input-focus);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-shadow)}select,.select-primary{display:inline-flex;align-items:center;background-color:var(--gnome-input);-webkit-backdrop-filter:var(--blur-subtle);backdrop-filter:var(--blur-subtle);border:1px solid var(--gnome-border);border-radius:var(--radius-control);color:var(--text-main);padding:10px 38px 10px 14px;font-family:var(--font-main);font-size:var(--font-size-sm);font-weight:500;box-shadow:inset 0 1px 2px rgba(0,0,0,.1),var(--shadow-control);transition:all var(--transition-fast) var(--ease-gnome);cursor:var(--cursor-pointer);outline:none;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:var(--select-chevron-icon);background-repeat:no-repeat;background-position:right 12px center;background-size:14px}select:hover:not(:disabled),.select-primary:hover:not(:disabled){background-color:var(--gnome-input-hover);border-color:var(--gnome-border-focus);transform:translateY(-1px)}select:focus,.select-primary:focus{background-color:var(--gnome-input-focus);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-shadow);transform:translateY(0)}select:active:not(:disabled),.select-primary:active:not(:disabled){background-color:var(--gnome-active);transform:translateY(0)}select:disabled,select.disabled,.select-primary:disabled,.select-primary.disabled{opacity:.45;cursor:var(--cursor-not-allowed) !important;pointer-events:none;transform:none !important;box-shadow:none !important}select option,select optgroup,.select-primary option,.select-primary optgroup{background-color:var(--gnome-surface-solid, #242424);color:var(--text-main, #ffffff);font-family:var(--font-main);font-size:var(--font-size-sm);padding:8px 12px}.select-wrapper{position:relative;display:inline-flex;align-items:center;max-width:100%}.input-primary.error,.input-primary.is-invalid,select.error,select.is-invalid,.select-primary.error,.select-primary.is-invalid,.is-invalid{border-color:var(--gnome-error) !important;box-shadow:0 0 0 3px var(--gnome-error-bg) !important}.input-primary.is-valid,select.is-valid,.select-primary.is-valid,.is-valid{border-color:var(--gnome-success) !important;box-shadow:0 0 0 3px var(--gnome-success-bg) !important}[data-theme=light] select option,[data-theme=light] select optgroup,[data-theme=light] .select-primary option,[data-theme=light] .select-primary optgroup{background-color:#fff;color:#1c1c1c}.mono-text{font-family:var(--font-mono);font-weight:400;font-size:1.05rem;color:var(--accent)}.flex-vertical{display:flex;flex-direction:column;align-items:center;justify-content:center}.flex-vertical>*{margin:var(--spacing-sm)}.flex-horizontal{display:flex;flex-direction:row;align-items:center;justify-content:center}.flex-horizontal>*{margin:var(--spacing-sm)}h1,h2,h3,h4,h5,h6{margin:var(--spacing-md) var(--spacing-xl);color:var(--text-main)}/*# sourceMappingURL=style.css.map */

package/styles/_base.scss

@@ -0,0 +1,525 @@
+/* ==========================================================================
+   Purity Design System - Base Styles & UI Elements
+   ========================================================================== */
+
+/* 1. Tell the browser where the font file is */
+@font-face {
+    font-family: 'Adwaita Mono';
+    src: url('../app/assets/mono/AdwaitaMono-Regular.ttf') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+/* Global Cursor Hierarchy (Breeze Cursors) */
+*,
+*::before,
+*::after {
+    cursor: inherit;
+}
+
+html {
+    margin: 0;
+    padding: 0;
+    min-height: 100%;
+    background-color: var(--wallpaper-bg-color, #1e1e1e);
+    transition: background-color var(--transition-normal) ease;
+    cursor: var(--cursor-default);
+}
+
+body {
+    position: relative;
+    margin: 0;
+    padding: 7px;
+    box-sizing: border-box;
+    min-height: 100vh;
+    background: var(--wallpaper);
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-color: var(--wallpaper-bg-color, #1e1e1e);
+    color: var(--text-main);
+    font-family: var(--font-main);
+    transition: background-color var(--transition-normal) ease, color var(--transition-normal) ease;
+    cursor: var(--cursor-default);
+}
+
+/* Global Interactive Element Breeze Cursors */
+a,
+button,
+[role='button'],
+input[type='button'],
+input[type='submit'],
+input[type='reset'],
+select,
+summary,
+label[for],
+.clickable,
+.button-base,
+.button-primary,
+.button-secondary,
+.button-error,
+.button-danger,
+.button-cancel,
+.editor-tab,
+.action-btn,
+.theme-toggle-btn,
+.toast-close-btn,
+.delete-btn {
+    cursor: var(--cursor-pointer);
+}
+
+input[type='text'],
+input[type='number'],
+input[type='password'],
+input[type='email'],
+input[type='search'],
+input[type='url'],
+input[type='tel'],
+textarea,
+.input-primary,
+[contenteditable='true'],
+code,
+pre {
+    cursor: var(--cursor-text);
+}
+
+:disabled,
+[disabled],
+.disabled,
+[aria-disabled='true'] {
+    cursor: var(--cursor-not-allowed) !important;
+}
+
+[draggable='true'],
+.draggable,
+.draggable-target,
+.drag-handle {
+    cursor: var(--cursor-grab);
+}
+
+.is-dragging,
+.dragging,
+.p-dragging {
+    cursor: var(--cursor-grabbing) !important;
+}
+
+/* HTTP Request & Loading State Breeze Cursors */
+html.http-loading,
+body.http-loading,
+.http-loading,
+.is-loading,
+[data-loading='true'],
+.loading,
+.loader-inline-root.visible {
+    cursor: var(--cursor-progress) !important;
+
+    * {
+        cursor: var(--cursor-progress) !important;
+    }
+}
+
+/* Base Label Styling */
+.label-base {
+    display: inline-flex;
+    align-items: center;
+    padding: 2px 12px;
+    border-radius: var(--radius-pill);
+    font-size: 11px;
+    font-weight: 800;
+    line-height: 1.4;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    background-image: linear-gradient(
+        to bottom,
+        rgba(255, 255, 255, 0.2) 0%,
+        rgba(255, 255, 255, 0.05) 50%,
+        transparent 100%
+    );
+    border: 1px solid rgba(0, 0, 0, 0.15);
+}
+
+/* Status Labels */
+.success {
+    @extend .label-base;
+    background-color: var(--gnome-success);
+    color: #ffffff;
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 2px 6px rgba(46, 194, 126, 0.3);
+}
+
+.error {
+    @extend .label-base;
+    color: #ffffff;
+    background-color: var(--gnome-error);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 2px 6px rgba(237, 51, 59, 0.3);
+}
+
+.info {
+    @extend .label-base;
+    color: #ffffff;
+    background-color: var(--gnome-info);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 2px 6px rgba(53, 132, 228, 0.3);
+}
+
+.warn {
+    @extend .label-base;
+    color: rgba(0, 0, 0, 0.85);
+    background-color: var(--gnome-warn);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 2px 6px rgba(248, 228, 92, 0.3);
+}
+
+.window-base {
+    margin: var(--spacing-lg);
+}
+
+/* Glassmorphic Window Container */
+.window {
+    @extend .window-base;
+
+    background: var(--gnome-surface);
+    -webkit-backdrop-filter: var(--blur-effect);
+    backdrop-filter: var(--blur-effect);
+
+    border: 1px solid var(--gnome-border);
+    border-radius: var(--radius-window);
+    box-shadow: var(--shadow-deep);
+
+    overflow: hidden;
+    color: var(--text-main);
+    font-family: var(--font-main);
+
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    transition: background-color var(--transition-normal) ease, border-color var(--transition-normal) ease, box-shadow var(--transition-normal) ease;
+}
+
+.button-base {
+    margin: var(--spacing-sm);
+}
+
+/* Primary Elevated Button */
+.button-primary {
+    @extend .button-base;
+    background-color: var(--accent);
+    background-image: linear-gradient(
+        to bottom,
+        rgba(255, 255, 255, 0.15),
+        transparent
+    );
+    color: #ffffff;
+    font-family: var(--font-main);
+    font-weight: 700;
+    font-size: var(--font-size-sm);
+    padding: 10px 20px;
+    border-radius: var(--radius-control);
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: var(--shadow-control);
+    cursor: var(--cursor-pointer);
+    transition: all var(--transition-fast) var(--ease-gnome);
+    outline: none;
+
+    &:hover:not(:disabled):not(.disabled) {
+        background-color: var(--accent-hover);
+        transform: translateY(-1px);
+        box-shadow: 0 4px 14px var(--accent-shadow), inset 0 1px rgba(255, 255, 255, 0.25);
+    }
+
+    &:active:not(:disabled):not(.disabled) {
+        background-color: var(--accent-active);
+        transform: translateY(0);
+        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
+    }
+
+    &:focus-visible {
+        box-shadow: 0 0 0 3px var(--accent-shadow);
+        border-color: var(--accent);
+    }
+
+    &:disabled,
+    &.disabled {
+        opacity: 0.45;
+        cursor: var(--cursor-not-allowed) !important;
+        pointer-events: none;
+        transform: none !important;
+        box-shadow: none !important;
+    }
+}
+
+/* Secondary Translucent Button */
+.button-secondary {
+    @extend .button-base;
+    background-color: var(--gnome-card);
+    -webkit-backdrop-filter: var(--blur-subtle);
+    backdrop-filter: var(--blur-subtle);
+    border: 1px solid var(--gnome-border);
+    color: var(--text-main);
+    font-family: var(--font-main);
+    font-weight: 700;
+    font-size: var(--font-size-sm);
+    padding: 10px 20px;
+    border-radius: var(--radius-control);
+    cursor: var(--cursor-pointer);
+    transition: all var(--transition-fast) var(--ease-gnome);
+    outline: none;
+
+    &:hover:not(:disabled):not(.disabled) {
+        background-color: var(--gnome-hover);
+        border-color: var(--gnome-border-focus);
+        transform: translateY(-1px);
+    }
+
+    &:active:not(:disabled):not(.disabled) {
+        background-color: var(--gnome-active);
+        transform: translateY(0);
+    }
+
+    &:focus-visible {
+        box-shadow: 0 0 0 3px var(--accent-shadow);
+        border-color: var(--accent);
+    }
+
+    &:disabled,
+    &.disabled {
+        opacity: 0.45;
+        cursor: var(--cursor-not-allowed) !important;
+        pointer-events: none;
+        transform: none !important;
+        box-shadow: none !important;
+    }
+}
+
+/* Error / Cancel / Destructive Button */
+.button-error,
+.button-danger,
+.button-cancel {
+    @extend .button-base;
+    background-color: var(--gnome-error);
+    background-image: linear-gradient(
+        to bottom,
+        rgba(255, 255, 255, 0.15),
+        transparent
+    );
+    color: #ffffff;
+    font-family: var(--font-main);
+    font-weight: 700;
+    font-size: var(--font-size-sm);
+    padding: 10px 20px;
+    border-radius: var(--radius-control);
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 2px 6px rgba(237, 51, 59, 0.35);
+    cursor: var(--cursor-pointer);
+    transition: all var(--transition-fast) var(--ease-gnome);
+    outline: none;
+
+    &:hover:not(:disabled):not(.disabled) {
+        background-color: #e01b24;
+        transform: translateY(-1px);
+        box-shadow: 0 4px 14px rgba(237, 51, 59, 0.4), inset 0 1px rgba(255, 255, 255, 0.4);
+    }
+
+    &:active:not(:disabled):not(.disabled) {
+        background-color: #c01c28;
+        transform: translateY(0);
+        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
+    }
+
+    &:focus-visible {
+        box-shadow: 0 0 0 3px rgba(237, 51, 59, 0.4);
+    }
+
+    &:disabled,
+    &.disabled {
+        opacity: 0.45;
+        cursor: var(--cursor-not-allowed) !important;
+        pointer-events: none;
+        transform: none !important;
+        box-shadow: none !important;
+    }
+}
+
+.button-group {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.base-input {
+    margin: var(--spacing-sm);
+}
+
+/* Translucent Glass Input */
+.input-primary {
+    @extend .base-input;
+
+    background-color: var(--gnome-input);
+    -webkit-backdrop-filter: var(--blur-subtle);
+    backdrop-filter: var(--blur-subtle);
+
+    border: 1px solid var(--gnome-border);
+    border-radius: var(--radius-control);
+    color: var(--text-main);
+    padding: 10px 16px;
+    font-family: var(--font-main);
+    font-size: var(--font-size-sm);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    transition: all var(--transition-fast) ease;
+    outline: none;
+
+    &::placeholder {
+        color: var(--text-secondary);
+        opacity: 0.65;
+    }
+
+    &:hover {
+        background-color: var(--gnome-input-hover);
+        border-color: var(--gnome-border);
+    }
+
+    &:focus {
+        background-color: var(--gnome-input-focus);
+        border-color: var(--accent);
+        box-shadow: 0 0 0 3px var(--accent-shadow);
+    }
+}
+
+/* Translucent Glass Select / Dropdown Control */
+select,
+.select-primary {
+    @extend .base-input;
+
+    display: inline-flex;
+    align-items: center;
+    background-color: var(--gnome-input);
+    -webkit-backdrop-filter: var(--blur-subtle);
+    backdrop-filter: var(--blur-subtle);
+
+    border: 1px solid var(--gnome-border);
+    border-radius: var(--radius-control);
+    color: var(--text-main);
+    padding: 10px 38px 10px 14px;
+    font-family: var(--font-main);
+    font-size: var(--font-size-sm);
+    font-weight: 500;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), var(--shadow-control);
+    transition: all var(--transition-fast) var(--ease-gnome);
+    cursor: var(--cursor-pointer);
+    outline: none;
+
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-image: var(--select-chevron-icon);
+    background-repeat: no-repeat;
+    background-position: right 12px center;
+    background-size: 14px;
+
+    &:hover:not(:disabled) {
+        background-color: var(--gnome-input-hover);
+        border-color: var(--gnome-border-focus);
+        transform: translateY(-1px);
+    }
+
+    &:focus {
+        background-color: var(--gnome-input-focus);
+        border-color: var(--accent);
+        box-shadow: 0 0 0 3px var(--accent-shadow);
+        transform: translateY(0);
+    }
+
+    &:active:not(:disabled) {
+        background-color: var(--gnome-active);
+        transform: translateY(0);
+    }
+
+    &:disabled,
+    &.disabled {
+        opacity: 0.45;
+        cursor: var(--cursor-not-allowed) !important;
+        pointer-events: none;
+        transform: none !important;
+        box-shadow: none !important;
+    }
+
+    option,
+    optgroup {
+        background-color: var(--gnome-surface-solid, #242424);
+        color: var(--text-main, #ffffff);
+        font-family: var(--font-main);
+        font-size: var(--font-size-sm);
+        padding: 8px 12px;
+    }
+}
+
+/* Select Container Helper */
+.select-wrapper {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    max-width: 100%;
+}
+
+.input-primary.error,
+.input-primary.is-invalid,
+select.error,
+select.is-invalid,
+.select-primary.error,
+.select-primary.is-invalid,
+.is-invalid {
+    border-color: var(--gnome-error) !important;
+    box-shadow: 0 0 0 3px var(--gnome-error-bg) !important;
+}
+
+.input-primary.is-valid,
+select.is-valid,
+.select-primary.is-valid,
+.is-valid {
+    border-color: var(--gnome-success) !important;
+    box-shadow: 0 0 0 3px var(--gnome-success-bg) !important;
+}
+
+/* Light Theme Option Dropdown Styling */
+[data-theme='light'] {
+    select option,
+    select optgroup,
+    .select-primary option,
+    .select-primary optgroup {
+        background-color: #ffffff;
+        color: #1c1c1c;
+    }
+}
+
+/* Typography & Layout Helpers */
+.mono-text {
+    font-family: var(--font-mono);
+    font-weight: 400;
+    font-size: 1.05rem;
+    color: var(--accent);
+}
+
+.flex-vertical {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.flex-vertical > * {
+    margin: var(--spacing-sm);
+}
+
+.flex-horizontal {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+.flex-horizontal > * {
+    margin: var(--spacing-sm);
+}
+
+h1, h2, h3, h4, h5, h6 {
+    margin: var(--spacing-md) var(--spacing-xl);
+    color: var(--text-main);
+}

package/styles/_mixins.scss

@@ -0,0 +1,57 @@
+/* ==========================================================================
+   Purity Design System - Reusable Mixins
+   ========================================================================== */
+
+@mixin glass-surface($bg: var(--gnome-surface), $blur: var(--blur-effect), $border: var(--gnome-border)) {
+    background: $bg;
+    -webkit-backdrop-filter: $blur;
+    backdrop-filter: $blur;
+    border: 1px solid $border;
+}
+
+@mixin flex-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+@mixin flex-between {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+@mixin focus-ring($color: var(--accent), $spread: 3px) {
+    outline: none;
+    &:focus-visible {
+        box-shadow: 0 0 0 $spread rgba(53, 132, 228, 0.45);
+        border-color: $color;
+    }
+}
+
+@mixin button-hover-lift {
+    transition: all var(--transition-fast) var(--ease-gnome);
+    &:hover:not(:disabled):not(.disabled) {
+        transform: translateY(-1px);
+    }
+    &:active:not(:disabled):not(.disabled) {
+        transform: translateY(0);
+    }
+}
+
+@mixin custom-scrollbar($width: 6px) {
+    &::-webkit-scrollbar {
+        width: $width;
+        height: $width;
+    }
+    &::-webkit-scrollbar-track {
+        background: transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+        background: var(--gnome-border);
+        border-radius: 999px;
+        &:hover {
+            background: var(--text-secondary);
+        }
+    }
+}