@gkucmierz/nano-ui 1.6.0 → 1.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +383 -38
- package/dist/nano-ui-512.png +0 -0
- package/dist/nano-ui.css +1 -1
- package/dist/nano-ui.js +448 -103
- package/dist/nano-ui.svg +54 -0
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -1,8 +1,37 @@
|
|
|
1
|
-
|
|
1
|
+
<div align="center">
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
<img src="public/nano-ui.svg" width="120" height="120" alt="Nano UI Logo" />
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
# @gkucmierz/nano-ui
|
|
6
|
+
|
|
7
|
+
**High-performance, minimal-footprint Vue 3 UI library, interactive 3D charts, and directives.**
|
|
8
|
+
Engineered for glassmorphism aesthetics, continuous Hermite kinematics, and zero-FOUC offline-first applications.
|
|
9
|
+
|
|
10
|
+
[](https://www.npmjs.com/package/@gkucmierz/nano-ui)
|
|
11
|
+
[](LICENSE)
|
|
12
|
+
[](https://vuejs.org/)
|
|
13
|
+
[](src/locales/)
|
|
14
|
+
[](#zero-fouc-architecture)
|
|
15
|
+
[](#zero-trust-offline-first)
|
|
16
|
+
|
|
17
|
+
🌐 **[Live Interactive Playground & Documentation](https://nano-ui.7u.pl)**
|
|
18
|
+
|
|
19
|
+
</div>
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
## 🚀 Key Highlights
|
|
24
|
+
|
|
25
|
+
- ⚡ **Continuous Hermite Kinematics (`KineticRotator`):** Velocity-preserving $C^1$ continuity on interrupts, geodesic shortest-path interpolation, and dynamic momentum preservation.
|
|
26
|
+
- 🎛️ **Multi-Resolution DAW Scrubber (`PrecisionScrubber`):** Vertical-distance 2D precision scaling (1x → 0.1x → 0.01x → 0.001x) with floating HUD overlay.
|
|
27
|
+
- 🔄 **Morphing Sticky Navigation (`MutatingHeader`):** Transitions smoothly between a floating glassmorphism card and an edge-to-edge docked navbar with configurable hysteresis.
|
|
28
|
+
- 📊 **3D SVG Data Visualizations (`ThreeDDonutChart`):** Interactive 3D perspective donut & pie charts with auto-balancing side callouts, depth slope ratio, and slice locking.
|
|
29
|
+
- 🎚️ **Accessible Glass Controls (`NanoSwitch`, `NanoModal`):** Lightweight toggle switches and hash-routed modals with universal dismissal triad (ESC, backdrop click, header close).
|
|
30
|
+
- 💧 **Optimized Micro-Directives (`v-ripple`, `v-tooltip`):** Material ripples and GPU-accelerated tooltips with minimal runtime overhead.
|
|
31
|
+
- 🌍 **Zero-Dependency i18n:** Built-in reactive English/Polish localization engine featuring line-correlated translation dictionaries.
|
|
32
|
+
- 🛡️ **Zero-Trust Offline-First:** Zero external runtime CDNs (`esm.sh`, `unpkg`, `cdnjs`) — 100% bundled locally for offline PWA reliability.
|
|
33
|
+
|
|
34
|
+
---
|
|
6
35
|
|
|
7
36
|
## 📦 Installation
|
|
8
37
|
|
|
@@ -10,17 +39,19 @@ High-performance, minimal footprint Vue 3 UI library and directives designed for
|
|
|
10
39
|
npm install @gkucmierz/nano-ui
|
|
11
40
|
```
|
|
12
41
|
|
|
13
|
-
|
|
42
|
+
---
|
|
43
|
+
|
|
44
|
+
## 🛠️ Quick Start
|
|
14
45
|
|
|
15
|
-
### Global
|
|
46
|
+
### Global Registration
|
|
16
47
|
|
|
17
|
-
|
|
48
|
+
Register Nano UI and its core design tokens globally in your Vue 3 application:
|
|
18
49
|
|
|
19
50
|
```javascript
|
|
20
51
|
import { createApp } from 'vue';
|
|
21
52
|
import App from './App.vue';
|
|
22
53
|
import NanoUI from '@gkucmierz/nano-ui';
|
|
23
|
-
import '@gkucmierz/nano-ui/style.css'; //
|
|
54
|
+
import '@gkucmierz/nano-ui/style.css'; // Core design tokens, animations, and typography
|
|
24
55
|
|
|
25
56
|
const app = createApp(App);
|
|
26
57
|
|
|
@@ -28,34 +59,228 @@ app.use(NanoUI);
|
|
|
28
59
|
app.mount('#app');
|
|
29
60
|
```
|
|
30
61
|
|
|
31
|
-
###
|
|
62
|
+
### Individual Component Import
|
|
63
|
+
|
|
64
|
+
You can also import individual components and directives on demand:
|
|
65
|
+
|
|
66
|
+
```javascript
|
|
67
|
+
import {
|
|
68
|
+
KineticRotator,
|
|
69
|
+
MutatingHeader,
|
|
70
|
+
PrecisionScrubber,
|
|
71
|
+
NanoSwitch,
|
|
72
|
+
ThreeDDonutChart,
|
|
73
|
+
NanoModal,
|
|
74
|
+
Ripple,
|
|
75
|
+
tooltipDirective
|
|
76
|
+
} from '@gkucmierz/nano-ui';
|
|
77
|
+
import '@gkucmierz/nano-ui/style.css';
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
---
|
|
81
|
+
|
|
82
|
+
## 🧩 Component Catalog & API
|
|
83
|
+
|
|
84
|
+
### 🌀 `KineticRotator`
|
|
85
|
+
|
|
86
|
+
A high-performance angular rotator component powered by Cubic Hermite spline kinematics. Unlike standard CSS transitions which snap or restart upon target changes, `KineticRotator` samples the instantaneous angular velocity ($v_0$) at the moment of interruption, guaranteeing $C^1$ velocity continuity and zero jarring visual jerks.
|
|
32
87
|
|
|
33
|
-
|
|
88
|
+
#### Features
|
|
89
|
+
- **Continuous Velocity Preservation ($C^1$ Continuity):** Seamless retargeting mid-flight with boundary conditions $P(0) = 0$, $P'(0) = v_0$, $P(1) = 1$, $P'(1) = 0$.
|
|
90
|
+
- **Geodesic Shortest-Path Navigation:** Modulo $360^\circ$ difference wrapping minimizes rotational distance while preserving rotational momentum.
|
|
91
|
+
- **Dynamic Timing Modes:**
|
|
92
|
+
- `proportional` *(Isokinetic, $v \approx \text{const}$)*: Duration scales proportionally with angular displacement ($|\Delta\theta|$).
|
|
93
|
+
- `fixed` *(Isochronous, $T = \text{const}$)*: Duration is constant regardless of angle distance.
|
|
94
|
+
- **In-Flight Duration Adaptation:** Dynamically updates duration without spatial jumps on the normalized time axis.
|
|
34
95
|
|
|
96
|
+
#### Code Example
|
|
35
97
|
```vue
|
|
36
98
|
<template>
|
|
37
|
-
|
|
38
|
-
|
|
99
|
+
<div class="rotator-container">
|
|
100
|
+
<KineticRotator
|
|
101
|
+
ref="rotatorRef"
|
|
102
|
+
v-model="angle"
|
|
103
|
+
:duration="1000"
|
|
104
|
+
:speed-multiplier="1"
|
|
105
|
+
timing-mode="proportional"
|
|
106
|
+
:shortest-path="true"
|
|
107
|
+
:inertia-threshold="0.25"
|
|
108
|
+
:size="260"
|
|
109
|
+
@frame="onFrame"
|
|
110
|
+
@settled="onSettled"
|
|
111
|
+
>
|
|
112
|
+
<template #default="{ currentAngle, velocity, isMoving }">
|
|
113
|
+
<div class="custom-compass-tile">
|
|
114
|
+
<span class="compass-pointer">⬆</span>
|
|
115
|
+
<span class="telemetry">{{ Math.round(currentAngle) }}° ({{ Math.round(velocity) }}°/s)</span>
|
|
116
|
+
</div>
|
|
117
|
+
</template>
|
|
118
|
+
</KineticRotator>
|
|
39
119
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
120
|
+
<div class="controls">
|
|
121
|
+
<button @click="rotatorRef?.rotateBy(90)">+90°</button>
|
|
122
|
+
<button @click="rotatorRef?.rotateBy(-90)">-90°</button>
|
|
123
|
+
<button @click="rotatorRef?.reset()">Reset</button>
|
|
124
|
+
</div>
|
|
43
125
|
</div>
|
|
44
126
|
</template>
|
|
45
127
|
|
|
46
|
-
<
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
128
|
+
<script setup>
|
|
129
|
+
import { ref } from 'vue';
|
|
130
|
+
import { KineticRotator } from '@gkucmierz/nano-ui';
|
|
131
|
+
|
|
132
|
+
const angle = ref(0);
|
|
133
|
+
const rotatorRef = ref(null);
|
|
134
|
+
|
|
135
|
+
const onFrame = (telemetry) => {
|
|
136
|
+
// telemetry: { currentAngle, targetAngle, velocity, acceleration, progress, isMoving, timestamp }
|
|
137
|
+
};
|
|
138
|
+
|
|
139
|
+
const onSettled = ({ angle, normalizedAngle }) => {
|
|
140
|
+
console.log('Rotator settled at:', angle, 'modulo:', normalizedAngle);
|
|
141
|
+
};
|
|
142
|
+
</script>
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
#### Props
|
|
146
|
+
| Prop | Type | Default | Description |
|
|
147
|
+
|---|---|---|---|
|
|
148
|
+
| `modelValue` | `Number` | `0` | Target angle in degrees. Supports `v-model`. |
|
|
149
|
+
| `duration` | `Number` | `1000` | Base duration in milliseconds for a $90^\circ$ rotation step. |
|
|
150
|
+
| `speedMultiplier` | `Number` | `1` | Speed scaling factor (e.g., `0.5` = half speed, `2.0` = double speed). |
|
|
151
|
+
| `step` | `Number` | `90` | Reference step angle in degrees used for proportional duration scaling. |
|
|
152
|
+
| `shortestPath` | `Boolean` | `true` | When true, targets are reduced modulo $360^\circ$ along the shortest geodesic arc. |
|
|
153
|
+
| `timingMode` | `String` | `'proportional'` | `'proportional'` (isokinetic, $v \approx \text{const}$) or `'fixed'` (isochronous, $T = \text{const}$). |
|
|
154
|
+
| `inertiaThreshold` | `Number` | `0.25` | Momentum threshold (in seconds) to avoid abrupt directional reversals during high-speed motion. |
|
|
155
|
+
| `size` | `Number \| String` | `260` | Width and height of the rotator bounding box in pixels or CSS units. |
|
|
156
|
+
|
|
157
|
+
#### Events
|
|
158
|
+
| Event | Payload | Description |
|
|
159
|
+
|---|---|---|
|
|
160
|
+
| `update:modelValue` | `Number` | Emitted when motion settles to update the `v-model` binding. |
|
|
161
|
+
| `change` | `Number` | Emitted immediately when a new target destination is committed. |
|
|
162
|
+
| `settled` | `{ angle, normalizedAngle }` | Emitted once motion comes to a complete rest. |
|
|
163
|
+
| `frame` | `Object` | Emitted every `requestAnimationFrame` with live kinematics telemetry. |
|
|
164
|
+
|
|
165
|
+
---
|
|
166
|
+
|
|
167
|
+
### 🎚️ `PrecisionScrubber`
|
|
168
|
+
|
|
169
|
+
A 2D jog-dial precision scrubbing widget inspired by digital audio workstations (DAWs) and professional video editing suites. Dragging horizontally adjusts the parameter value, while dragging vertically increases resolution precision exponentially (up to $0.001\times$) with a floating HUD anchor guide.
|
|
170
|
+
|
|
171
|
+
#### Code Example
|
|
172
|
+
```vue
|
|
173
|
+
<template>
|
|
174
|
+
<PrecisionScrubber
|
|
175
|
+
v-model="frequency"
|
|
176
|
+
:min="20"
|
|
177
|
+
:max="20000"
|
|
178
|
+
:step="1"
|
|
179
|
+
label="Cutoff Frequency"
|
|
180
|
+
unit="Hz"
|
|
181
|
+
:sensitivity="1"
|
|
182
|
+
:relative="true"
|
|
183
|
+
/>
|
|
184
|
+
</template>
|
|
185
|
+
|
|
186
|
+
<script setup>
|
|
187
|
+
import { ref } from 'vue';
|
|
188
|
+
import { PrecisionScrubber } from '@gkucmierz/nano-ui';
|
|
189
|
+
|
|
190
|
+
const frequency = ref(440);
|
|
191
|
+
</script>
|
|
52
192
|
```
|
|
53
193
|
|
|
54
|
-
|
|
194
|
+
#### Props
|
|
195
|
+
| Prop | Type | Default | Description |
|
|
196
|
+
|---|---|---|---|
|
|
197
|
+
| `modelValue` | `Number` | *Required* | Current numerical value (`v-model`). |
|
|
198
|
+
| `min` | `Number` | `0` | Minimum allowed value boundary. |
|
|
199
|
+
| `max` | `Number` | `100` | Maximum allowed value boundary. |
|
|
200
|
+
| `step` | `Number` | `1` | Increment step size at base $1\times$ resolution. |
|
|
201
|
+
| `label` | `String` | `''` | Descriptive label displayed on the scrubber track. |
|
|
202
|
+
| `unit` | `String` | `''` | Value unit suffix (e.g., `'ms'`, `'px'`, `'%'`, `'Hz'`). |
|
|
203
|
+
| `sensitivity` | `Number` | `1` | Horizontal drag sensitivity multiplier. |
|
|
204
|
+
| `relative` | `Boolean` | `true` | Enables vertical distance dynamic precision scaling. |
|
|
205
|
+
|
|
206
|
+
---
|
|
207
|
+
|
|
208
|
+
### 🔄 `MutatingHeader`
|
|
55
209
|
|
|
56
|
-
A
|
|
210
|
+
A reactive, scroll-docking navigation container that dynamically morphs between an elevated floating glassmorphism card and an edge-to-edge docked navbar as the user scrolls.
|
|
57
211
|
|
|
58
212
|
#### Code Example
|
|
213
|
+
```vue
|
|
214
|
+
<template>
|
|
215
|
+
<MutatingHeader
|
|
216
|
+
:threshold="24"
|
|
217
|
+
:hysteresis="8"
|
|
218
|
+
height="60px"
|
|
219
|
+
floating-margin="12px 24px 0 24px"
|
|
220
|
+
floating-radius="16px"
|
|
221
|
+
:glassmorphism="true"
|
|
222
|
+
@change="onDockStateChange"
|
|
223
|
+
>
|
|
224
|
+
<div class="nav-content">
|
|
225
|
+
<span class="brand">Project Nexus</span>
|
|
226
|
+
<nav class="links">
|
|
227
|
+
<a href="#overview">Overview</a>
|
|
228
|
+
<a href="#features">Features</a>
|
|
229
|
+
</nav>
|
|
230
|
+
</div>
|
|
231
|
+
</MutatingHeader>
|
|
232
|
+
</template>
|
|
233
|
+
|
|
234
|
+
<script setup>
|
|
235
|
+
import { MutatingHeader } from '@gkucmierz/nano-ui';
|
|
236
|
+
|
|
237
|
+
const onDockStateChange = (isDocked) => {
|
|
238
|
+
console.log('Header docked status:', isDocked);
|
|
239
|
+
};
|
|
240
|
+
</script>
|
|
241
|
+
```
|
|
242
|
+
|
|
243
|
+
#### Props
|
|
244
|
+
| Prop | Type | Default | Description |
|
|
245
|
+
|---|---|---|---|
|
|
246
|
+
| `threshold` | `Number` | `24` | Scroll distance in pixels after which the header docks edge-to-edge. |
|
|
247
|
+
| `hysteresis` | `Number` | `8` | Scroll delta in pixels below threshold required to un-dock back into floating card. |
|
|
248
|
+
| `scrollContainer`| `String \| Object` | `null` | Target scroll container selector or DOM element (defaults to `window`). |
|
|
249
|
+
| `height` | `String` | `'60px'` | Height of the header bar. |
|
|
250
|
+
| `floatingMargin` | `String` | `'12px 24px 0 24px'` | Outer margins when floating at the top of the viewport. |
|
|
251
|
+
| `floatingRadius` | `String` | `'16px'` | Corner border radius when in floating card state. |
|
|
252
|
+
| `glassmorphism` | `Boolean` | `true` | Enables blurred backdrop filter glassmorphism effect. |
|
|
253
|
+
| `stuck` | `Boolean` | `undefined` | Controlled dock state override via `v-model:stuck`. |
|
|
254
|
+
|
|
255
|
+
---
|
|
256
|
+
|
|
257
|
+
### 🔘 `NanoSwitch`
|
|
258
|
+
|
|
259
|
+
A lightweight, accessible toggle switch component featuring glassmorphism styles, keyboard accessibility (`Space` / `Enter`), and smooth state transitions.
|
|
260
|
+
|
|
261
|
+
```vue
|
|
262
|
+
<template>
|
|
263
|
+
<NanoSwitch
|
|
264
|
+
v-model="isEnabled"
|
|
265
|
+
label="Hardware Acceleration"
|
|
266
|
+
size="md"
|
|
267
|
+
/>
|
|
268
|
+
</template>
|
|
269
|
+
|
|
270
|
+
<script setup>
|
|
271
|
+
import { ref } from 'vue';
|
|
272
|
+
import { NanoSwitch } from '@gkucmierz/nano-ui';
|
|
273
|
+
|
|
274
|
+
const isEnabled = ref(true);
|
|
275
|
+
</script>
|
|
276
|
+
```
|
|
277
|
+
|
|
278
|
+
---
|
|
279
|
+
|
|
280
|
+
### 📊 `ThreeDDonutChart`
|
|
281
|
+
|
|
282
|
+
A premium 3D SVG Donut and Pie Chart component for Vue 3. Features smooth morphing animations, dynamic 2D/3D perspective transitions, responsive side-label columns with callout leader lines, auto-rotation label balancing, and slice selection locking.
|
|
283
|
+
|
|
59
284
|
```vue
|
|
60
285
|
<template>
|
|
61
286
|
<div class="chart-container">
|
|
@@ -69,7 +294,7 @@ A premium, highly interactive 3D SVG Donut and Pie Chart component for Vue 3. Fe
|
|
|
69
294
|
:autoRotate="true"
|
|
70
295
|
:selectable="true"
|
|
71
296
|
valueDecimals="2"
|
|
72
|
-
centerLabel="Total
|
|
297
|
+
centerLabel="Total Portfolio"
|
|
73
298
|
/>
|
|
74
299
|
</div>
|
|
75
300
|
</template>
|
|
@@ -80,32 +305,152 @@ import { ThreeDDonutChart } from '@gkucmierz/nano-ui';
|
|
|
80
305
|
|
|
81
306
|
const selectedId = ref(null);
|
|
82
307
|
const chartData = ref([
|
|
83
|
-
{ id: '1', name: '
|
|
84
|
-
{ id: '2', name: '
|
|
85
|
-
{ id: '3', name: '
|
|
308
|
+
{ id: '1', name: 'Ethereum', value: 140, color: '#3b82f6', unit: 'ETH' },
|
|
309
|
+
{ id: '2', name: 'Solana', value: 95, color: '#10b981', unit: 'SOL' },
|
|
310
|
+
{ id: '3', name: 'Bitcoin', value: 55, color: '#f59e0b', unit: 'BTC' }
|
|
86
311
|
]);
|
|
87
312
|
</script>
|
|
88
313
|
```
|
|
89
314
|
|
|
90
|
-
####
|
|
315
|
+
#### Props
|
|
91
316
|
| Prop | Type | Default | Description |
|
|
92
317
|
|---|---|---|---|
|
|
93
318
|
| `data` | `Array` | *Required* | Array of objects: `{ id, name, value, color, unit }`. |
|
|
94
|
-
| `isExpanded` | `Boolean` | `false` | Large container layout with margins
|
|
319
|
+
| `isExpanded` | `Boolean` | `false` | Large container layout with callout margins (`true`) or compact mini layout (`false`). |
|
|
95
320
|
| `showLabels` | `Boolean` | `true` | Show/hide side callouts and leader lines (applicable when `isExpanded` is true). |
|
|
96
321
|
| `is3D` | `Boolean` | `true` | Enables 3D perspective rendering (depth and tilt). When false, renders in flat 2D. |
|
|
97
322
|
| `slopeRatio` | `Number` | `0.5` | Vertical tilt factor of the 3D plane (from `0.2` to `1.0`). |
|
|
98
323
|
| `rotationAngle` | `Number` | `-90` | Starting rotation angle of the chart in degrees. |
|
|
99
|
-
| `autoRotate` | `Boolean` | `false` | Dynamically optimizes rotation to
|
|
324
|
+
| `autoRotate` | `Boolean` | `false` | Dynamically optimizes rotation to balance side labels evenly. |
|
|
100
325
|
| `selectable` | `Boolean` | `false` | Enables slice selection/locking on click or tap. |
|
|
101
|
-
| `selectedItemId` | `String \| Number` | `null` |
|
|
102
|
-
| `centerValue` | `String \| Number` | `''` |
|
|
103
|
-
| `centerLabel` | `String` | `''` | Sub-label text displayed below
|
|
104
|
-
| `centerValueFormatter` | `Function` | `null` |
|
|
105
|
-
| `valueDecimals` | `Number` | `undefined` | Decimals to round slice values
|
|
106
|
-
| `aggregateOthers` | `Boolean` | `false` | Merges
|
|
107
|
-
| `othersThreshold
|
|
326
|
+
| `selectedItemId` | `String \| Number` | `null` | ID of the currently locked slice (`v-model:selectedItemId`). |
|
|
327
|
+
| `centerValue` | `String \| Number` | `''` | Custom text inside donut hole (defaults to sum of all items). |
|
|
328
|
+
| `centerLabel` | `String` | `''` | Sub-label text displayed below center value. |
|
|
329
|
+
| `centerValueFormatter` | `Function` | `null` | Formatter function: `(value, item) => string`. |
|
|
330
|
+
| `valueDecimals` | `Number` | `undefined` | Decimals to round slice values on callouts. |
|
|
331
|
+
| `aggregateOthers` | `Boolean` | `false` | Merges slices below threshold into an "Other" item. |
|
|
332
|
+
| `othersThreshold` | `Number` | `0.01` | Fraction threshold (e.g. `0.05` for 5%) for "Other" aggregation. |
|
|
333
|
+
|
|
334
|
+
---
|
|
335
|
+
|
|
336
|
+
### 🪟 `NanoModal`
|
|
337
|
+
|
|
338
|
+
Standardized modal dialog adhering to the **Universal Dismissal Triad** (ESC key with `event.stopPropagation()`, backdrop click `@click.self`, and header close `✕`), with deep-linking URL hash synchronization support.
|
|
339
|
+
|
|
340
|
+
```vue
|
|
341
|
+
<template>
|
|
342
|
+
<NanoModal
|
|
343
|
+
v-model="isOpen"
|
|
344
|
+
title="System Configuration"
|
|
345
|
+
icon="⚙️"
|
|
346
|
+
max-width="540px"
|
|
347
|
+
@close="isOpen = false"
|
|
348
|
+
>
|
|
349
|
+
<div class="modal-body">
|
|
350
|
+
<p>Configure hardware telemetry parameters and sync preferences.</p>
|
|
351
|
+
</div>
|
|
352
|
+
</NanoModal>
|
|
353
|
+
</template>
|
|
354
|
+
|
|
355
|
+
<script setup>
|
|
356
|
+
import { ref } from 'vue';
|
|
357
|
+
import { NanoModal } from '@gkucmierz/nano-ui';
|
|
358
|
+
|
|
359
|
+
const isOpen = ref(false);
|
|
360
|
+
</script>
|
|
361
|
+
```
|
|
362
|
+
|
|
363
|
+
---
|
|
364
|
+
|
|
365
|
+
### 💧 Directives
|
|
366
|
+
|
|
367
|
+
#### `v-ripple`
|
|
368
|
+
Material-style ripple effect directive with configurable colors:
|
|
369
|
+
|
|
370
|
+
```vue
|
|
371
|
+
<template>
|
|
372
|
+
<button v-ripple class="btn">Default Ripple</button>
|
|
373
|
+
<div v-ripple="'rgba(0, 242, 254, 0.3)'" class="card">Custom Cyan Ripple</div>
|
|
374
|
+
</template>
|
|
375
|
+
```
|
|
376
|
+
|
|
377
|
+
#### `v-tooltip`
|
|
378
|
+
Lightweight, accessible tooltip directive powered by `@gkucmierz/nano-ui` composable state:
|
|
379
|
+
|
|
380
|
+
```vue
|
|
381
|
+
<template>
|
|
382
|
+
<button v-tooltip="'Synchronize system telemetry'">Sync Now</button>
|
|
383
|
+
<span v-tooltip="{ text: 'High-precision sensor', position: 'bottom' }">Sensor A</span>
|
|
384
|
+
</template>
|
|
385
|
+
```
|
|
386
|
+
|
|
387
|
+
---
|
|
388
|
+
|
|
389
|
+
## 🌐 Built-in i18n Architecture
|
|
390
|
+
|
|
391
|
+
Nano UI includes a zero-dependency, ultra-lightweight reactive internationalization engine (`src/locales.js`) featuring **strictly line-correlated JSON translation dictionaries**:
|
|
392
|
+
|
|
393
|
+
```javascript
|
|
394
|
+
import { t, currentLang, setLang, toggleLang } from '@gkucmierz/nano-ui/locales';
|
|
395
|
+
|
|
396
|
+
// Switch language reactively
|
|
397
|
+
setLang('pl'); // 'en' | 'pl'
|
|
398
|
+
toggleLang();
|
|
399
|
+
|
|
400
|
+
// Translate keys with parameter interpolation
|
|
401
|
+
const label = t('rotator.isokinetic');
|
|
402
|
+
```
|
|
403
|
+
|
|
404
|
+
The translation files (`src/locales/en.json` and `src/locales/pl.json`) are maintained in strict 1:1 line synchronization, enabling seamless structural diffing and zero missing-key drift.
|
|
405
|
+
|
|
406
|
+
---
|
|
407
|
+
|
|
408
|
+
<a id="zero-fouc-architecture"></a>
|
|
409
|
+
## ⚡ Zero-FOUC Architecture
|
|
410
|
+
|
|
411
|
+
Nano UI provides synchronized design tokens with automatic system and dark-mode adaptation. Zero Flash of Unstyled Content (FOUC) is guaranteed through immediate inline CSS variable evaluation before Vue hydration:
|
|
412
|
+
|
|
413
|
+
```css
|
|
414
|
+
:root {
|
|
415
|
+
--nano-bg-main: #060913;
|
|
416
|
+
--nano-bg-card: rgba(15, 23, 42, 0.75);
|
|
417
|
+
--nano-border-card: rgba(255, 255, 255, 0.12);
|
|
418
|
+
--nano-state-active: #00f2fe;
|
|
419
|
+
--nano-state-accent: #6366f1;
|
|
420
|
+
--nano-radius-md: 10px;
|
|
421
|
+
--nano-radius-lg: 16px;
|
|
422
|
+
}
|
|
423
|
+
```
|
|
424
|
+
|
|
425
|
+
---
|
|
426
|
+
|
|
427
|
+
<a id="zero-trust-offline-first"></a>
|
|
428
|
+
## 🛡️ Zero-Trust Offline-First
|
|
429
|
+
|
|
430
|
+
In accordance with workspace reliability standards:
|
|
431
|
+
- **No External CDNs:** Zero runtime script imports from `unpkg.com`, `esm.sh`, `jsdelivr`, or `cdnjs`.
|
|
432
|
+
- **Bundled Assets:** All SVG graphics and fonts resolve locally to guarantee 100% offline functionality in air-gapped environments or Progressive Web Apps (PWAs).
|
|
433
|
+
|
|
434
|
+
---
|
|
435
|
+
|
|
436
|
+
## 📜 Scripts & Development
|
|
437
|
+
|
|
438
|
+
```bash
|
|
439
|
+
# Start local Vite development server & playground
|
|
440
|
+
npm run dev
|
|
441
|
+
|
|
442
|
+
# Build the production library distribution (dist/nano-ui.js & dist/nano-ui.css)
|
|
443
|
+
npm run build
|
|
444
|
+
|
|
445
|
+
# Build the standalone documentation & playground application
|
|
446
|
+
npm run build:app
|
|
447
|
+
|
|
448
|
+
# Regenerate master branding assets (SVG -> 512x512 PNG)
|
|
449
|
+
npm run icons
|
|
450
|
+
```
|
|
451
|
+
|
|
452
|
+
---
|
|
108
453
|
|
|
109
|
-
##
|
|
454
|
+
## 📄 License
|
|
110
455
|
|
|
111
|
-
MIT
|
|
456
|
+
[MIT](LICENSE) © [Grzegorz Kućmierz](https://gkucmierz.com)
|
|
Binary file
|
package/dist/nano-ui.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.global-tooltip[data-v-e67d9c3b]{--nu-tooltip-bg:var(--nano-tooltip-bg,#0f172af2);--nu-tooltip-color:var(--nano-tooltip-color,#f8fafc);--nu-tooltip-radius:var(--nano-tooltip-radius,var(--nano-radius-md,8px));--nu-tooltip-padding:var(--nano-tooltip-padding,var(--nano-space-sm,8px) var(--nano-space-md,16px));--nu-tooltip-shadow:var(--nano-tooltip-shadow,0 var(--nano-space-sm,8px) var(--nano-space-lg,24px) #0000004d);--nu-tooltip-border:var(--nano-tooltip-border,var(--nano-border-width,1px) solid #ffffff1a);--nu-tooltip-arrow-border:var(--nano-tooltip-arrow-border,#ffffff1a);z-index:99999;background:var(--nu-tooltip-bg);-webkit-backdrop-filter:blur(var(--nano-blur-md,8px));color:var(--nu-tooltip-color);padding:var(--nu-tooltip-padding);border-radius:var(--nu-tooltip-radius);width:max-content;max-width:min(350px, calc(100vw - var(--nano-space-xl,32px)));text-align:center;white-space:normal;word-wrap:break-word;pointer-events:none;box-shadow:var(--nu-tooltip-shadow);border:var(--nu-tooltip-border);transition:opacity var(--nano-transition-tooltip), transform var(--nano-transition-tooltip);opacity:0;visibility:hidden;font-size:.85rem;font-weight:500;line-height:1.4;position:fixed;top:0;left:0}.global-tooltip[data-v-e67d9c3b]:after{content:"";left:calc(50% + var(--arrow-offset,0px));background:var(--nu-tooltip-bg);width:10px;height:10px;-webkit-backdrop-filter:blur(var(--nano-blur-md,8px));border-right:var(--nano-border-width,1px) solid var(--nu-tooltip-arrow-border);border-bottom:var(--nano-border-width,1px) solid var(--nu-tooltip-arrow-border);border-radius:0 0 var(--nano-radius-xs,2px) 0;clip-path:polygon(100% 0,100% 100%,0 100%);margin-left:-5px;position:absolute;bottom:-5px;transform:rotate(45deg)}.global-tooltip.tooltip-bottom[data-v-e67d9c3b]:after{border-bottom:none;border-right:none;border-left:var(--nano-border-width,1px) solid var(--nu-tooltip-arrow-border);border-top:var(--nano-border-width,1px) solid var(--nu-tooltip-arrow-border);border-radius:var(--nano-radius-xs,2px) 0 0 0;clip-path:polygon(0 0,100% 0,0 100%);top:-5px;bottom:auto}.global-tooltip.visible[data-v-e67d9c3b]{opacity:1;visibility:visible}.nano-modal-overlay[data-v-52e94a15]{z-index:99999;background:var(--nano-modal-backdrop);box-sizing:border-box;outline:none;justify-content:center;align-items:center;width:100vw;height:100vh;padding:20px;display:flex;position:fixed;top:0;left:0}.nano-modal-overlay.nano-glass[data-v-52e94a15]{-webkit-backdrop-filter:blur(8px)}.nano-modal-window[data-v-52e94a15]{background:var(--nano-modal-bg);border:1px solid var(--nano-modal-border);border-radius:var(--nano-modal-radius);box-shadow:var(--nano-modal-shadow);max-height:90vh;color:var(--nano-modal-text);flex-direction:column;display:flex;position:relative;overflow:hidden}.nano-modal-window h1[data-v-52e94a15],.nano-modal-window h2[data-v-52e94a15],.nano-modal-window h3[data-v-52e94a15],.nano-modal-window h4[data-v-52e94a15],.nano-modal-window h5[data-v-52e94a15],.nano-modal-window h6[data-v-52e94a15]{color:var(--nano-modal-text)}.nano-modal-window[data-v-52e94a15]:not([style*="position: absolute"]){margin:auto}.nano-glass .nano-modal-window[data-v-52e94a15]{background:var(--nano-modal-glass-bg);-webkit-backdrop-filter:blur(16px)}.nano-modal-header[data-v-52e94a15]{border-bottom:1px solid var(--nano-modal-border);background:var(--nano-modal-header-bg);-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;padding:16px 24px;display:flex}.nano-modal-header.is-draggable[data-v-52e94a15]{cursor:grab}.nano-modal-header.is-draggable[data-v-52e94a15]:active{cursor:grabbing}.nano-modal-title[data-v-52e94a15]{margin:0;font-size:1.25rem;font-weight:600;line-height:1.4}.nano-modal-close-btn[data-v-52e94a15]{color:var(--nano-modal-text-muted);cursor:pointer;width:32px;height:32px;transition:color var(--nano-transition-interactive), background-color var(--nano-transition-interactive);background:0 0;border:none;border-radius:8px;outline:none;justify-content:center;align-items:center;padding:0;display:flex}.nano-modal-close-btn[data-v-52e94a15]:hover{color:var(--nano-modal-close-color,var(--nano-modal-text));background:var(--nano-modal-close-hover)}.nano-modal-body[data-v-52e94a15]{flex:1;padding:24px;overflow-y:auto}.nano-modal-footer[data-v-52e94a15]{border-top:1px solid var(--nano-modal-border);background:var(--nano-modal-footer-bg);justify-content:flex-end;padding:16px 24px;display:flex}.nano-modal-actions[data-v-52e94a15]{gap:12px;display:flex}.nano-btn[data-v-52e94a15]{cursor:pointer;color:#fff;transition:background-color var(--nano-transition-interactive), transform var(--nano-transition-interactive), box-shadow var(--nano-transition-interactive);border:none;border-radius:6px;padding:8px 16px;font-size:.95rem;font-weight:600}.nano-btn-primary[data-v-52e94a15]{background:var(--nano-modal-btn-primary,var(--nano-accent-primary))}.nano-btn-primary[data-v-52e94a15]:hover{filter:brightness(1.1)}.nano-btn-secondary[data-v-52e94a15]{background:var(--nano-modal-btn-secondary,#ffffff1a);color:var(--nano-modal-text)}.nano-btn-secondary[data-v-52e94a15]:hover{filter:brightness(1.1)}.nano-btn-danger[data-v-52e94a15]{background:var(--nano-state-danger,#ef4444)}.nano-btn-danger[data-v-52e94a15]:hover{filter:brightness(1.1)}.nano-modal-resizer[data-v-52e94a15]{cursor:se-resize;width:14px;height:14px;color:var(--nano-modal-text-muted);transition:color var(--nano-transition-interactive);z-index:10;justify-content:center;align-items:center;display:flex;position:absolute;bottom:2px;right:2px}.nano-modal-resizer[data-v-52e94a15]:hover{color:var(--nano-modal-text)}.nano-modal-fade-enter-active[data-v-52e94a15],.nano-modal-fade-leave-active[data-v-52e94a15]{transition:opacity var(--nano-transition-modal-backdrop)}.nano-modal-fade-enter-active .nano-modal-window[data-v-52e94a15]{transition:transform var(--nano-transition-modal-enter)}.nano-modal-fade-leave-active .nano-modal-window[data-v-52e94a15]{transition:transform var(--nano-transition-modal-leave)}.nano-modal-fade-enter-from[data-v-52e94a15],.nano-modal-fade-leave-to[data-v-52e94a15]{opacity:0}.nano-modal-fade-enter-from .nano-modal-window[data-v-52e94a15]{transform:scale(.9)translateY(10px)}.nano-modal-fade-leave-to .nano-modal-window[data-v-52e94a15]{transform:scale(.95)translateY(-10px)}.donut-canvas-wrapper[data-v-acd0447d]{width:120px;height:120px;transition:width var(--nano-transition-motion), height var(--nano-transition-motion);flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.donut-canvas-wrapper.is-expanded[data-v-acd0447d]{width:100%;max-width:760px;height:320px}@media (width<=760px){.donut-canvas-wrapper.is-expanded[data-v-acd0447d]{height:42vw}}.items-svg-chart[data-v-acd0447d]{width:100%;height:100%;display:block;overflow:visible}.slice-group-3d[data-v-acd0447d]{cursor:pointer;transition:transform var(--nano-transition-chart), opacity var(--nano-transition-interactive)}.slice-group-3d.is-dimmed[data-v-acd0447d]{opacity:.35}.label-group[data-v-acd0447d]{transition:opacity var(--nano-transition-interactive)}.label-group path[data-v-acd0447d]{transition:d var(--nano-transition-chart), stroke-width var(--nano-transition-interactive), opacity var(--nano-transition-interactive)}.label-group text[data-v-acd0447d]{transition:transform var(--nano-transition-chart), font-weight var(--nano-transition-interactive), opacity var(--nano-transition-interactive)}.label-group.is-hovered path[data-v-acd0447d]{stroke-width:2.2px}.label-group.is-hovered text[data-v-acd0447d]{font-weight:700}.label-group.is-dimmed[data-v-acd0447d]{opacity:.25}.no-transitions .label-group[data-v-acd0447d],.no-transitions .label-group path[data-v-acd0447d],.no-transitions .label-group text[data-v-acd0447d],.no-transitions .slice-group-3d[data-v-acd0447d]{transition:none}.center-text-value[data-v-acd0447d]{fill:#fff;filter:drop-shadow(0 0 3px #000c)}.center-text-label[data-v-acd0447d]{fill:#94a3b8;filter:drop-shadow(0 0 2px #000c)}:root[data-theme=light] .center-text-value[data-v-acd0447d]{fill:#0f172a;filter:drop-shadow(0 0 3px #ffffffe6)}:root[data-theme=light] .center-text-label[data-v-acd0447d]{fill:#475569;filter:drop-shadow(0 0 2px #ffffffe6)}.nano-scrub-track[data-v-21b41bc4]{background:var(--nano-scrub-bg,#00e5ff05);border:var(--nano-border-width,1px) dashed var(--nano-scrub-border,#00e5ff40);border-radius:var(--nano-radius-md,8px);cursor:ew-resize;-webkit-user-select:none;user-select:none;width:100%;height:44px;transition:border-color var(--nano-transition-interactive), background-color var(--nano-transition-interactive);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.nano-scrub-track[data-v-21b41bc4]:hover{background:var(--nano-scrub-hover-bg,#00e5ff0a);border-color:var(--nano-scrub-hover-border,#00e5ff66)}.nano-scrub-progress[data-v-21b41bc4]{background:var(--nano-scrub-progress-bg,#00e5ff0f);pointer-events:none;height:100%;position:absolute;top:0;left:0}.nano-scrub-label[data-v-21b41bc4]{color:var(--nano-scrub-color,#00e5ff);letter-spacing:.03rem;z-index:1;pointer-events:none;align-items:center;gap:6px;font-size:10px;font-weight:700;display:flex}.nano-scrub-overlay[data-v-21b41bc4]{z-index:99999;pointer-events:none;-webkit-user-select:none;user-select:none;width:100vw;height:100vh;position:fixed;top:0;left:0}.nano-scrub-anchor[data-v-21b41bc4]{background:#00e5ff;border-radius:50%;width:10px;height:10px;position:fixed;transform:translate(-50%,-50%);box-shadow:0 0 12px #00e5ff,0 0 24px #00e5ff66}.nano-scrub-svg-line[data-v-21b41bc4]{width:100vw;height:100vh;position:fixed;top:0;left:0}.nano-scrub-popup[data-v-21b41bc4]{pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0f172af2;border:1px solid #00e5ff59;border-radius:10px;flex-direction:column;gap:6px;min-width:200px;padding:12px 16px;display:flex;position:fixed;box-shadow:0 10px 30px #0009,0 0 20px #00e5ff26}.nano-scrub-popup-title[data-v-21b41bc4]{text-transform:uppercase;color:#64748b;letter-spacing:.06rem;font-size:10px;font-weight:700}.nano-scrub-popup-val[data-v-21b41bc4]{color:#fff;letter-spacing:.05rem;font-family:monospace;font-size:1.25rem;font-weight:800}.nano-scrub-popup-res[data-v-21b41bc4]{color:#00e5ff;font-size:11px;font-weight:700}.nano-mutating-header[data-v-fd47d0d0]{z-index:1000;height:var(--header-height,60px);margin:var(--floating-margin,12px 24px 0 24px);border-radius:var(--floating-radius,16px);border:1px solid var(--border-subtle,#ffffff1a);box-sizing:border-box;-webkit-user-select:none;user-select:none;background:var(--bg-card,#101622d9);will-change:margin, border-radius, border-color, padding, box-shadow;transition:margin var(--nano-transition-header), border-radius var(--nano-transition-header), border-color var(--nano-transition-interactive), padding var(--nano-transition-header), box-shadow var(--nano-transition-header), background-color var(--nano-transition-interactive);flex-shrink:0;align-items:center;padding:0 20px;display:flex;position:sticky;top:0;box-shadow:0 8px 24px -6px #00000073}.nano-mutating-header.has-glassmorphism[data-v-fd47d0d0]{-webkit-backdrop-filter:blur(20px)}.nano-mutating-header.is-stuck[data-v-fd47d0d0]{border-color:transparent transparent var(--border-subtle,#ffffff1a) transparent;border-radius:0;margin:0;padding:0 24px;box-shadow:0 4px 16px #00000040}:root[data-theme=light] .nano-mutating-header[data-v-fd47d0d0],[data-theme=light] .nano-mutating-header[data-v-fd47d0d0]{background:var(--bg-card,#ffffffd9);border-color:var(--border-subtle,#00000014);color:#0f172a;box-shadow:0 8px 24px -6px #00000014}:root[data-theme=light] .nano-mutating-header.is-stuck[data-v-fd47d0d0],[data-theme=light] .nano-mutating-header.is-stuck[data-v-fd47d0d0]{border-color:transparent transparent var(--border-subtle,#00000014) transparent;box-shadow:0 2px 10px #0000000a}.header-inner[data-v-fd47d0d0]{justify-content:space-between;align-items:center;gap:16px;width:100%;height:100%;display:flex}.header-left[data-v-fd47d0d0],.header-right[data-v-fd47d0d0]{flex-shrink:0;align-items:center;gap:12px;display:flex}.header-center[data-v-fd47d0d0]{flex:1;justify-content:center;align-items:center;gap:16px;min-width:0;display:flex}.topology-radar-container[data-v-bb4bd598]{justify-content:center;align-items:center;display:flex}.nano-switch[data-v-50b63887],.nano-switch[data-v-50b63887] *,.nano-switch[data-v-50b63887] :before,.nano-switch[data-v-50b63887] :after{box-sizing:border-box}.nano-switch[data-v-50b63887]{--nano-switch-transition:var(--nano-transition-toggle);cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle;color:var(--nano-switch-text,var(--text-color,inherit));align-items:center;gap:.65rem;font-size:.9rem;display:inline-flex;position:relative}.nano-switch.is-disabled[data-v-50b63887]{cursor:not-allowed;opacity:.45}.nano-switch-input[data-v-50b63887]{opacity:0;pointer-events:none;outline:0;width:0;height:0;margin:0;position:absolute}.nano-switch-slider[data-v-50b63887]{background:var(--nano-switch-bg,#0f172a99);border:1px solid var(--nano-switch-border,#ffffff26);cursor:pointer;width:44px;height:24px;transition:background-color var(--nano-switch-transition), border-color var(--nano-switch-transition), box-shadow var(--nano-switch-transition);border-radius:12px;outline:0;flex-shrink:0;position:relative}.nano-switch-slider[data-v-50b63887]:before{content:"";background:var(--nano-switch-knob,#94a3b8);width:16px;height:16px;transition:transform var(--nano-switch-transition), width var(--nano-switch-transition), height var(--nano-switch-transition), top var(--nano-switch-transition), border-radius var(--nano-switch-transition), background-color var(--nano-switch-transition), box-shadow var(--nano-switch-transition), filter var(--nano-switch-transition);border-radius:50%;position:absolute;top:3px;left:3px}.size-default .nano-switch-slider[data-v-50b63887]{border-radius:12px;width:44px;height:24px}.size-default .nano-switch-slider[data-v-50b63887]:before{width:16px;height:16px;top:3px;left:3px}.size-default.is-checked .nano-switch-slider[data-v-50b63887]:before{transform:translate(20px)}.size-default.is-indeterminate .nano-switch-slider[data-v-50b63887]:before{border-radius:6px;width:24px;height:12px;top:5px;transform:translate(6px)}.size-compact .nano-switch-slider[data-v-50b63887]{border-radius:10px;width:38px;height:20px}.size-compact .nano-switch-slider[data-v-50b63887]:before{width:14px;height:14px;top:2px;left:2px}.size-compact.is-checked .nano-switch-slider[data-v-50b63887]:before{transform:translate(18px)}.size-compact.is-indeterminate .nano-switch-slider[data-v-50b63887]:before{border-radius:5px;width:20px;height:10px;top:4px;transform:translate(6px)}.size-mini .nano-switch-slider[data-v-50b63887]{border-radius:8px;width:30px;height:16px}.size-mini .nano-switch-slider[data-v-50b63887]:before{width:10px;height:10px;top:2px;left:2px}.size-mini.is-checked .nano-switch-slider[data-v-50b63887]:before{transform:translate(14px)}.size-mini.is-indeterminate .nano-switch-slider[data-v-50b63887]:before{border-radius:4px;width:16px;height:8px;top:3px;transform:translate(4px)}.color-primary.is-checked .nano-switch-slider[data-v-50b63887],.color-cyan.is-checked .nano-switch-slider[data-v-50b63887]{background:var(--nano-switch-active-bg,#00f2fe33);border-color:var(--nano-switch-active-border,#00f2fe99);box-shadow:0 0 10px var(--nano-switch-active-shadow,#00f2fe4d)}.color-primary.is-checked .nano-switch-slider[data-v-50b63887]:before,.color-cyan.is-checked .nano-switch-slider[data-v-50b63887]:before{background:var(--nano-switch-active-knob,#00f2fe);box-shadow:0 0 8px var(--nano-switch-active-knob,#00f2fe99)}.color-purple.is-checked .nano-switch-slider[data-v-50b63887]{background:#a855f733;border-color:#a855f799;box-shadow:0 0 10px #a855f74d}.color-purple.is-checked .nano-switch-slider[data-v-50b63887]:before{background:#c084fc;box-shadow:0 0 8px #c084fc99}.color-emerald.is-checked .nano-switch-slider[data-v-50b63887]{background:#10b98133;border-color:#10b98199;box-shadow:0 0 10px #10b9814d}.color-emerald.is-checked .nano-switch-slider[data-v-50b63887]:before{background:#10b981;box-shadow:0 0 8px #10b98199}.color-danger.is-checked .nano-switch-slider[data-v-50b63887]{background:#ef444433;border-color:#ef444499;box-shadow:0 0 10px #ef44444d}.color-danger.is-checked .nano-switch-slider[data-v-50b63887]:before{background:#ef4444;box-shadow:0 0 8px #ef444499}.color-gold.is-checked .nano-switch-slider[data-v-50b63887]{background:#c89b3c33;border-color:#c89b3c99;box-shadow:0 0 10px #c89b3c4d}.color-gold.is-checked .nano-switch-slider[data-v-50b63887]:before{background:#c89b3c;box-shadow:0 0 8px #c89b3c99}.nano-switch.is-indeterminate .nano-switch-slider[data-v-50b63887]{background:#94a3b81f;border-color:#94a3b859}.color-primary.is-indeterminate .nano-switch-slider[data-v-50b63887],.color-cyan.is-indeterminate .nano-switch-slider[data-v-50b63887]{background:#00f2fe14;border-color:#00f2fe59}.color-primary.is-indeterminate .nano-switch-slider[data-v-50b63887]:before,.color-cyan.is-indeterminate .nano-switch-slider[data-v-50b63887]:before{background:#38bdf8;box-shadow:0 0 6px #38bdf866}.color-purple.is-indeterminate .nano-switch-slider[data-v-50b63887]{background:#a855f714;border-color:#a855f759}.color-purple.is-indeterminate .nano-switch-slider[data-v-50b63887]:before{background:#c084fc;box-shadow:0 0 6px #c084fc66}.color-emerald.is-indeterminate .nano-switch-slider[data-v-50b63887]{background:#10b98114;border-color:#10b98159}.color-emerald.is-indeterminate .nano-switch-slider[data-v-50b63887]:before{background:#34d399;box-shadow:0 0 6px #34d39966}.color-danger.is-indeterminate .nano-switch-slider[data-v-50b63887]{background:#ef444414;border-color:#ef444459}.color-danger.is-indeterminate .nano-switch-slider[data-v-50b63887]:before{background:#f87171;box-shadow:0 0 6px #f8717166}.color-gold.is-indeterminate .nano-switch-slider[data-v-50b63887]{background:#c89b3c14;border-color:#c89b3c59}.color-gold.is-indeterminate .nano-switch-slider[data-v-50b63887]:before{background:#fbbf24;box-shadow:0 0 6px #fbbf2466}:root[data-theme=light] .nano-switch.is-indeterminate .nano-switch-slider[data-v-50b63887],html[data-theme=light] .nano-switch.is-indeterminate .nano-switch-slider[data-v-50b63887]{background:#64748b14;border-color:#64748b80}:root[data-theme=light] .color-primary.is-indeterminate .nano-switch-slider[data-v-50b63887],:root[data-theme=light] .color-cyan.is-indeterminate .nano-switch-slider[data-v-50b63887],html[data-theme=light] .color-primary.is-indeterminate .nano-switch-slider[data-v-50b63887],html[data-theme=light] .color-cyan.is-indeterminate .nano-switch-slider[data-v-50b63887]{background:#0284c714;border-color:#0284c7a6}:root[data-theme=light] .color-primary.is-indeterminate .nano-switch-slider[data-v-50b63887]:before,:root[data-theme=light] .color-cyan.is-indeterminate .nano-switch-slider[data-v-50b63887]:before,html[data-theme=light] .color-primary.is-indeterminate .nano-switch-slider[data-v-50b63887]:before,html[data-theme=light] .color-cyan.is-indeterminate .nano-switch-slider[data-v-50b63887]:before{background:#0284c7;box-shadow:0 0 6px #0284c74d}:root[data-theme=light] .color-purple.is-indeterminate .nano-switch-slider[data-v-50b63887],html[data-theme=light] .color-purple.is-indeterminate .nano-switch-slider[data-v-50b63887]{background:#7c3aed14;border-color:#7c3aeda6}:root[data-theme=light] .color-purple.is-indeterminate .nano-switch-slider[data-v-50b63887]:before,html[data-theme=light] .color-purple.is-indeterminate .nano-switch-slider[data-v-50b63887]:before{background:#7c3aed;box-shadow:0 0 6px #7c3aed4d}:root[data-theme=light] .color-emerald.is-indeterminate .nano-switch-slider[data-v-50b63887],html[data-theme=light] .color-emerald.is-indeterminate .nano-switch-slider[data-v-50b63887]{background:#05966914;border-color:#059669a6}:root[data-theme=light] .color-emerald.is-indeterminate .nano-switch-slider[data-v-50b63887]:before,html[data-theme=light] .color-emerald.is-indeterminate .nano-switch-slider[data-v-50b63887]:before{background:#059669;box-shadow:0 0 6px #0596694d}:root[data-theme=light] .color-danger.is-indeterminate .nano-switch-slider[data-v-50b63887],html[data-theme=light] .color-danger.is-indeterminate .nano-switch-slider[data-v-50b63887]{background:#dc262614;border-color:#dc2626a6}:root[data-theme=light] .color-danger.is-indeterminate .nano-switch-slider[data-v-50b63887]:before,html[data-theme=light] .color-danger.is-indeterminate .nano-switch-slider[data-v-50b63887]:before{background:#dc2626;box-shadow:0 0 6px #dc26264d}:root[data-theme=light] .color-gold.is-indeterminate .nano-switch-slider[data-v-50b63887],html[data-theme=light] .color-gold.is-indeterminate .nano-switch-slider[data-v-50b63887]{background:#d9770614;border-color:#d97706a6}:root[data-theme=light] .color-gold.is-indeterminate .nano-switch-slider[data-v-50b63887]:before,html[data-theme=light] .color-gold.is-indeterminate .nano-switch-slider[data-v-50b63887]:before{background:#d97706;box-shadow:0 0 6px #d977064d}.nano-switch:not(.is-disabled):not(.is-checked):not(.is-indeterminate):hover .nano-switch-slider[data-v-50b63887]{border-color:var(--nano-border-hover);background:var(--nano-bg-hover)}.nano-switch.is-checked:not(.is-disabled):hover .nano-switch-slider[data-v-50b63887]{box-shadow:0 0 12px var(--nano-switch-active-shadow,#00f2fe59)}.nano-switch.is-indeterminate:not(.is-disabled):hover .nano-switch-slider[data-v-50b63887]:before{opacity:.9}.nano-switch-label[data-v-50b63887]{align-items:center;line-height:1.3;display:inline-flex}:root{--nano-border-width:1px;--nano-unit:8px;--nano-space-xs:calc(var(--nano-unit) * .5);--nano-space-sm:var(--nano-unit);--nano-space-md:calc(var(--nano-unit) * 2);--nano-space-lg:calc(var(--nano-unit) * 3);--nano-space-xl:calc(var(--nano-unit) * 4);--nano-space-2xl:calc(var(--nano-unit) * 6);--nano-space-1:var(--nano-space-sm);--nano-space-2:var(--nano-space-md);--nano-space-3:var(--nano-space-lg);--nano-space-4:var(--nano-space-xl);--nano-radius-xs:calc(var(--nano-unit) * .25);--nano-radius-sm:calc(var(--nano-unit) * .5);--nano-radius-md:var(--nano-unit);--nano-radius-lg:calc(var(--nano-unit) * 1.5);--nano-radius-xl:calc(var(--nano-unit) * 2);--nano-radius-full:9999px;--nano-blur-xs:calc(var(--nano-unit) * .25);--nano-blur-sm:calc(var(--nano-unit) * .5);--nano-blur-md:var(--nano-unit);--nano-blur-lg:calc(var(--nano-unit) * 2);--nano-blur-xl:calc(var(--nano-unit) * 3);--nano-line-height-tight:1.25;--nano-line-height-base:1.5;--nano-line-height-relaxed:1.65;--nano-duration-fast:.15s;--nano-duration-medium:.25s;--nano-duration-slow:.35s;--nano-duration-ripple:.6s;--nano-ease-standard:cubic-bezier(.4, 0, .2, 1);--nano-ease-smooth:cubic-bezier(.16, 1, .3, 1);--nano-ease-spring:cubic-bezier(.175, .885, .32, 1.275);--nano-ease-out:cubic-bezier(0, 0, .2, 1);--nano-ease-in:cubic-bezier(.4, 0, 1, 1);--nano-ease-linear:linear;--nano-transition-interactive:var(--nano-duration-fast) var(--nano-ease-standard);--nano-transition-motion:var(--nano-duration-medium) var(--nano-ease-standard);--nano-transition-toggle:var(--nano-duration-medium) var(--nano-ease-standard);--nano-transition-header:var(--nano-duration-medium) var(--nano-ease-smooth);--nano-transition-tooltip:var(--nano-duration-fast) var(--nano-ease-smooth);--nano-transition-chart:var(--nano-duration-medium) var(--nano-ease-standard);--nano-transition-modal:var(--nano-duration-slow) var(--nano-ease-spring);--nano-transition-modal-backdrop:var(--nano-duration-medium) var(--nano-ease-out);--nano-transition-modal-enter:var(--nano-duration-slow) var(--nano-ease-spring);--nano-transition-modal-leave:var(--nano-duration-fast) var(--nano-ease-in);--nano-transition-ripple:var(--nano-duration-ripple) var(--nano-ease-linear)}span.ripple{animation:nano-ripple-anim var(--nano-transition-ripple);background-color:var(--nano-ripple-color,#fff6);pointer-events:none;border-radius:50%;position:absolute;transform:scale(0)}@keyframes nano-ripple-anim{to{opacity:0;transform:scale(4)}}:root{--nano-alpha-1:.05;--nano-alpha-2:.15;--nano-alpha-3:.3;--nano-alpha-4:.6;--nano-alpha-5:.9;--nano-alpha-subtle:var(--nano-alpha-1);--nano-alpha-muted:var(--nano-alpha-2);--nano-alpha-hover:var(--nano-alpha-3);--nano-alpha-medium:var(--nano-alpha-4);--nano-alpha-glass:var(--nano-alpha-5);--nano-bg-app:#09090b;--nano-bg-sidebar:#18181b;--nano-bg-card:rgba(255, 255, 255, var(--nano-alpha-subtle));--nano-bg-card-elevated:rgba(255, 255, 255, var(--nano-alpha-subtle));--nano-bg-muted:rgba(255, 255, 255, var(--nano-alpha-subtle));--nano-bg-code:#0f172a;--nano-bg-hover:rgba(255, 255, 255, var(--nano-alpha-muted));--nano-text-main:#f8fafc;--nano-text-secondary:#cbd5e1;--nano-text-muted:#94a3b8;--nano-text-code:#cbd5e1;--nano-border-subtle:rgba(255, 255, 255, var(--nano-alpha-subtle));--nano-border-card:rgba(255, 255, 255, var(--nano-alpha-muted));--nano-border-hover:rgba(255, 255, 255, var(--nano-alpha-hover));--nano-shadow-card:none;--nano-shadow-elevated:0 var(--nano-space-xs) calc(var(--nano-unit) * 2.5) rgba(0, 0, 0, var(--nano-alpha-hover));--nano-accent-primary:#6366f1;--nano-accent-primary-hover:#4f46e5;--nano-state-active:#00f2fe;--nano-nav-active-bg:rgba(99, 102, 241, var(--nano-alpha-muted));--nano-nav-active-color:#818cf8;--nano-selection-bg:color-mix(in srgb, var(--nano-accent-primary) 35%, transparent);--nano-selection-text:#fff;--nano-switch-bg:rgba(15, 23, 42, var(--nano-alpha-medium));--nano-switch-border:rgba(255, 255, 255, var(--nano-alpha-muted));--nano-switch-knob:#94a3b8;--nano-switch-active-bg:rgba(0, 242, 254, var(--nano-alpha-muted));--nano-switch-active-border:#00f2fe;--nano-switch-active-shadow:rgba(0, 242, 254, var(--nano-alpha-hover));--nano-switch-active-knob:#00f2fe;--nano-ripple-color:rgba(255, 255, 255, var(--nano-alpha-hover));--nano-modal-bg:#18181b;--nano-modal-glass-bg:rgba(24, 24, 27, var(--nano-alpha-glass));--nano-modal-border:rgba(255, 255, 255, var(--nano-alpha-muted));--nano-modal-text:#f8fafc;--nano-modal-text-muted:#94a3b8;--nano-modal-backdrop:rgba(0, 0, 0, var(--nano-alpha-medium));--nano-modal-radius:var(--nano-radius-lg);--nano-modal-btn-primary:#6366f1;--nano-modal-btn-primary-hover:#4f46e5;--nano-modal-btn-secondary:#27272a;--nano-modal-btn-secondary-hover:#3f3f46;--nano-modal-shadow:0 calc(var(--nano-unit) * 2.5) calc(var(--nano-unit) * 6) rgba(0, 0, 0, var(--nano-alpha-medium));--nano-modal-header-bg:rgba(0, 0, 0, var(--nano-alpha-muted));--nano-modal-footer-bg:rgba(0, 0, 0, var(--nano-alpha-muted));--nano-modal-close-hover:rgba(255, 255, 255, var(--nano-alpha-muted));--nano-modal-close-color:#fff;--nano-scrub-color:#00e5ff;--nano-scrub-bg:rgba(0, 229, 255, var(--nano-alpha-subtle));--nano-scrub-border:rgba(0, 229, 255, var(--nano-alpha-hover));--nano-scrub-hover-bg:rgba(0, 229, 255, var(--nano-alpha-muted));--nano-scrub-hover-border:rgba(0, 229, 255, var(--nano-alpha-medium));--nano-scrub-progress-bg:rgba(0, 229, 255, var(--nano-alpha-muted));--nano-tooltip-bg:rgba(15, 23, 42, var(--nano-alpha-glass));--nano-tooltip-color:#f8fafc;--nano-tooltip-radius:var(--nano-radius-md);--nano-tooltip-padding:var(--nano-space-sm) var(--nano-space-md);--nano-tooltip-shadow:0 var(--nano-space-sm) var(--nano-space-lg) rgba(0, 0, 0, var(--nano-alpha-hover));--nano-tooltip-border:var(--nano-border-width) solid rgba(255, 255, 255, var(--nano-alpha-muted));--nano-tooltip-arrow-border:rgba(255, 255, 255, var(--nano-alpha-muted));--nano-radar-grid-bg:rgba(15, 23, 42, var(--nano-alpha-glass));--nano-radar-grid-stroke:rgba(255, 255, 255, var(--nano-alpha-muted));--nano-radar-grid-subtle:rgba(255, 255, 255, var(--nano-alpha-subtle));--nano-radar-text:var(--nano-text-muted);--nano-radar-color:var(--nano-state-active)}:root[data-theme=light],html[data-theme=light]{--nano-bg-app:#f8fafc;--nano-bg-sidebar:#fff;--nano-bg-card:#fff;--nano-bg-card-elevated:#fff;--nano-bg-muted:#f1f5f9;--nano-bg-code:#f8fafc;--nano-bg-hover:#f1f5f9;--nano-text-main:#0f172a;--nano-text-secondary:#1e293b;--nano-text-muted:#475569;--nano-text-code:#0f172a;--nano-border-subtle:#e2e8f0;--nano-border-card:#cbd5e1;--nano-border-hover:#94a3b8;--nano-shadow-card:0 var(--nano-border-width) calc(var(--nano-border-width) * 3) rgba(15, 23, 42, var(--nano-alpha-subtle)), 0 var(--nano-border-width) calc(var(--nano-border-width) * 2) rgba(15, 23, 42, var(--nano-alpha-subtle));--nano-shadow-elevated:0 var(--nano-space-xs) calc(var(--nano-unit) * 2) rgba(15, 23, 42, var(--nano-alpha-subtle));--nano-accent-primary:#4f46e5;--nano-accent-primary-hover:#4338ca;--nano-state-active:#0284c7;--nano-nav-active-bg:#e0e7ff;--nano-nav-active-color:#4338ca;--nano-selection-bg:color-mix(in srgb, var(--nano-accent-primary) 20%, transparent);--nano-selection-text:inherit;--nano-switch-bg:#e2e8f0;--nano-switch-border:#cbd5e1;--nano-switch-knob:#fff;--nano-switch-active-bg:#e0f2fe;--nano-switch-active-border:#0284c7;--nano-switch-active-shadow:rgba(2, 132, 199, var(--nano-alpha-muted));--nano-switch-active-knob:#0284c7;--nano-ripple-color:rgba(15, 23, 42, var(--nano-alpha-muted));--nano-modal-bg:#fff;--nano-modal-glass-bg:rgba(255, 255, 255, var(--nano-alpha-glass));--nano-modal-border:#cbd5e1;--nano-modal-text:#0f172a;--nano-modal-text-muted:#475569;--nano-modal-backdrop:rgba(15, 23, 42, var(--nano-alpha-medium));--nano-modal-radius:var(--nano-radius-lg);--nano-modal-btn-primary:#4f46e5;--nano-modal-btn-primary-hover:#4338ca;--nano-modal-btn-secondary:#f1f5f9;--nano-modal-btn-secondary-hover:#e2e8f0;--nano-modal-shadow:0 calc(var(--nano-unit) * 1.5) calc(var(--nano-unit) * 4) rgba(15, 23, 42, var(--nano-alpha-muted));--nano-modal-header-bg:rgba(15, 23, 42, var(--nano-alpha-subtle));--nano-modal-footer-bg:rgba(15, 23, 42, var(--nano-alpha-subtle));--nano-modal-close-hover:rgba(15, 23, 42, var(--nano-alpha-muted));--nano-modal-close-color:#0f172a;--nano-scrub-color:#0284c7;--nano-scrub-bg:rgba(2, 132, 199, var(--nano-alpha-subtle));--nano-scrub-border:rgba(2, 132, 199, var(--nano-alpha-hover));--nano-scrub-hover-bg:rgba(2, 132, 199, var(--nano-alpha-muted));--nano-scrub-hover-border:rgba(2, 132, 199, var(--nano-alpha-medium));--nano-scrub-progress-bg:rgba(2, 132, 199, var(--nano-alpha-muted));--nano-tooltip-bg:rgba(15, 23, 42, var(--nano-alpha-glass));--nano-tooltip-color:#f8fafc;--nano-tooltip-radius:var(--nano-radius-md);--nano-tooltip-padding:var(--nano-space-sm) var(--nano-space-md);--nano-tooltip-shadow:0 var(--nano-space-sm) var(--nano-space-lg) rgba(15, 23, 42, var(--nano-alpha-hover));--nano-tooltip-border:var(--nano-border-width) solid rgba(255, 255, 255, var(--nano-alpha-muted));--nano-tooltip-arrow-border:rgba(255, 255, 255, var(--nano-alpha-muted));--nano-radar-grid-bg:rgba(241, 245, 249, var(--nano-alpha-glass));--nano-radar-grid-stroke:rgba(15, 23, 42, var(--nano-alpha-muted));--nano-radar-grid-subtle:rgba(15, 23, 42, var(--nano-alpha-subtle));--nano-radar-text:var(--nano-text-muted);--nano-radar-color:var(--nano-state-active)}*,:before,:after{box-sizing:border-box}:focus,:focus-visible,input,textarea,select,button{outline:none!important}input:focus,input:focus-visible,textarea:focus,textarea:focus-visible,select:focus,select:focus-visible,button:focus,button:focus-visible{box-shadow:none!important;outline:none!important}:root,body,.nano-ui-chrome{-webkit-user-select:none;user-select:none}input,textarea,[contenteditable=true],code,pre,kbd,samp{-webkit-user-select:text!important;user-select:text!important}code,pre{cursor:text;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}pre{white-space:pre;margin:0}pre code{white-space:inherit;font-family:inherit}::selection{background-color:var(--nano-selection-bg);color:var(--nano-selection-text)}::selection{background-color:var(--nano-selection-bg);color:var(--nano-selection-text)}html.preload,html.preload *,html.preload :before,html.preload :after,html.theme-switching,html.theme-switching *,html.theme-switching :before,html.theme-switching :after{transition:none!important}body{background-color:var(--nano-bg-app);color:var(--nano-text-main);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:var(--nano-line-height-base,1.5);-webkit-font-smoothing:antialiased;margin:0;padding:0}
|
|
1
|
+
.global-tooltip[data-v-d7961ba4]{--nu-tooltip-bg:var(--nano-tooltip-bg,#0f172af2);--nu-tooltip-color:var(--nano-tooltip-color,#f8fafc);--nu-tooltip-radius:var(--nano-tooltip-radius,var(--nano-radius-md,8px));--nu-tooltip-padding:var(--nano-tooltip-padding,var(--nano-space-sm,8px) var(--nano-space-md,16px));--nu-tooltip-shadow:var(--nano-tooltip-shadow,0 var(--nano-space-sm,8px) var(--nano-space-lg,24px) #0000004d);--nu-tooltip-border:var(--nano-tooltip-border,var(--nano-border-width,1px) solid #ffffff1a);--nu-tooltip-arrow-border:var(--nano-tooltip-arrow-border,#ffffff1a);z-index:99999;background:var(--nu-tooltip-bg);-webkit-backdrop-filter:blur(var(--nano-blur-md,8px));color:var(--nu-tooltip-color);padding:var(--nu-tooltip-padding);border-radius:var(--nu-tooltip-radius);width:max-content;max-width:min(350px, calc(100vw - var(--nano-space-xl,32px)));text-align:center;white-space:normal;word-wrap:break-word;pointer-events:none;box-shadow:var(--nu-tooltip-shadow);border:var(--nu-tooltip-border);transition:opacity var(--nano-transition-tooltip), transform var(--nano-transition-tooltip);opacity:0;visibility:hidden;font-size:.85rem;font-weight:500;line-height:1.4;position:fixed;top:0;left:0}.global-tooltip[data-v-d7961ba4]:after{content:"";left:calc(50% + var(--arrow-offset,0px));background:var(--nu-tooltip-bg);width:10px;height:10px;-webkit-backdrop-filter:blur(var(--nano-blur-md,8px));border-right:var(--nano-border-width,1px) solid var(--nu-tooltip-arrow-border);border-bottom:var(--nano-border-width,1px) solid var(--nu-tooltip-arrow-border);border-radius:0 0 var(--nano-radius-xs,2px) 0;clip-path:polygon(100% 0,100% 100%,0 100%);margin-left:-5px;position:absolute;bottom:-5px;transform:rotate(45deg)}.global-tooltip.tooltip-bottom[data-v-d7961ba4]:after{border-bottom:none;border-right:none;border-left:var(--nano-border-width,1px) solid var(--nu-tooltip-arrow-border);border-top:var(--nano-border-width,1px) solid var(--nu-tooltip-arrow-border);border-radius:var(--nano-radius-xs,2px) 0 0 0;clip-path:polygon(0 0,100% 0,0 100%);top:-5px;bottom:auto}.global-tooltip.visible[data-v-d7961ba4]{opacity:1;visibility:visible}.nano-modal-overlay[data-v-52e94a15]{z-index:99999;background:var(--nano-modal-backdrop);box-sizing:border-box;outline:none;justify-content:center;align-items:center;width:100vw;height:100vh;padding:20px;display:flex;position:fixed;top:0;left:0}.nano-modal-overlay.nano-glass[data-v-52e94a15]{-webkit-backdrop-filter:blur(8px)}.nano-modal-window[data-v-52e94a15]{background:var(--nano-modal-bg);border:1px solid var(--nano-modal-border);border-radius:var(--nano-modal-radius);box-shadow:var(--nano-modal-shadow);max-height:90vh;color:var(--nano-modal-text);flex-direction:column;display:flex;position:relative;overflow:hidden}.nano-modal-window h1[data-v-52e94a15],.nano-modal-window h2[data-v-52e94a15],.nano-modal-window h3[data-v-52e94a15],.nano-modal-window h4[data-v-52e94a15],.nano-modal-window h5[data-v-52e94a15],.nano-modal-window h6[data-v-52e94a15]{color:var(--nano-modal-text)}.nano-modal-window[data-v-52e94a15]:not([style*="position: absolute"]){margin:auto}.nano-glass .nano-modal-window[data-v-52e94a15]{background:var(--nano-modal-glass-bg);-webkit-backdrop-filter:blur(16px)}.nano-modal-header[data-v-52e94a15]{border-bottom:1px solid var(--nano-modal-border);background:var(--nano-modal-header-bg);-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;padding:16px 24px;display:flex}.nano-modal-header.is-draggable[data-v-52e94a15]{cursor:grab}.nano-modal-header.is-draggable[data-v-52e94a15]:active{cursor:grabbing}.nano-modal-title[data-v-52e94a15]{margin:0;font-size:1.25rem;font-weight:600;line-height:1.4}.nano-modal-close-btn[data-v-52e94a15]{color:var(--nano-modal-text-muted);cursor:pointer;width:32px;height:32px;transition:color var(--nano-transition-interactive), background-color var(--nano-transition-interactive);background:0 0;border:none;border-radius:8px;outline:none;justify-content:center;align-items:center;padding:0;display:flex}.nano-modal-close-btn[data-v-52e94a15]:hover{color:var(--nano-modal-close-color,var(--nano-modal-text));background:var(--nano-modal-close-hover)}.nano-modal-body[data-v-52e94a15]{flex:1;padding:24px;overflow-y:auto}.nano-modal-footer[data-v-52e94a15]{border-top:1px solid var(--nano-modal-border);background:var(--nano-modal-footer-bg);justify-content:flex-end;padding:16px 24px;display:flex}.nano-modal-actions[data-v-52e94a15]{gap:12px;display:flex}.nano-btn[data-v-52e94a15]{cursor:pointer;color:#fff;transition:background-color var(--nano-transition-interactive), transform var(--nano-transition-interactive), box-shadow var(--nano-transition-interactive);border:none;border-radius:6px;padding:8px 16px;font-size:.95rem;font-weight:600}.nano-btn-primary[data-v-52e94a15]{background:var(--nano-modal-btn-primary,var(--nano-accent-primary))}.nano-btn-primary[data-v-52e94a15]:hover{filter:brightness(1.1)}.nano-btn-secondary[data-v-52e94a15]{background:var(--nano-modal-btn-secondary,#ffffff1a);color:var(--nano-modal-text)}.nano-btn-secondary[data-v-52e94a15]:hover{filter:brightness(1.1)}.nano-btn-danger[data-v-52e94a15]{background:var(--nano-state-danger,#ef4444)}.nano-btn-danger[data-v-52e94a15]:hover{filter:brightness(1.1)}.nano-modal-resizer[data-v-52e94a15]{cursor:se-resize;width:14px;height:14px;color:var(--nano-modal-text-muted);transition:color var(--nano-transition-interactive);z-index:10;justify-content:center;align-items:center;display:flex;position:absolute;bottom:2px;right:2px}.nano-modal-resizer[data-v-52e94a15]:hover{color:var(--nano-modal-text)}.nano-modal-fade-enter-active[data-v-52e94a15],.nano-modal-fade-leave-active[data-v-52e94a15]{transition:opacity var(--nano-transition-modal-backdrop)}.nano-modal-fade-enter-active .nano-modal-window[data-v-52e94a15]{transition:transform var(--nano-transition-modal-enter)}.nano-modal-fade-leave-active .nano-modal-window[data-v-52e94a15]{transition:transform var(--nano-transition-modal-leave)}.nano-modal-fade-enter-from[data-v-52e94a15],.nano-modal-fade-leave-to[data-v-52e94a15]{opacity:0}.nano-modal-fade-enter-from .nano-modal-window[data-v-52e94a15]{transform:scale(.9)translateY(10px)}.nano-modal-fade-leave-to .nano-modal-window[data-v-52e94a15]{transform:scale(.95)translateY(-10px)}.donut-canvas-wrapper[data-v-acd0447d]{width:120px;height:120px;transition:width var(--nano-transition-motion), height var(--nano-transition-motion);flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.donut-canvas-wrapper.is-expanded[data-v-acd0447d]{width:100%;max-width:760px;height:320px}@media (width<=760px){.donut-canvas-wrapper.is-expanded[data-v-acd0447d]{height:42vw}}.items-svg-chart[data-v-acd0447d]{width:100%;height:100%;display:block;overflow:visible}.slice-group-3d[data-v-acd0447d]{cursor:pointer;transition:transform var(--nano-transition-chart), opacity var(--nano-transition-interactive)}.slice-group-3d.is-dimmed[data-v-acd0447d]{opacity:.35}.label-group[data-v-acd0447d]{transition:opacity var(--nano-transition-interactive)}.label-group path[data-v-acd0447d]{transition:d var(--nano-transition-chart), stroke-width var(--nano-transition-interactive), opacity var(--nano-transition-interactive)}.label-group text[data-v-acd0447d]{transition:transform var(--nano-transition-chart), font-weight var(--nano-transition-interactive), opacity var(--nano-transition-interactive)}.label-group.is-hovered path[data-v-acd0447d]{stroke-width:2.2px}.label-group.is-hovered text[data-v-acd0447d]{font-weight:700}.label-group.is-dimmed[data-v-acd0447d]{opacity:.25}.no-transitions .label-group[data-v-acd0447d],.no-transitions .label-group path[data-v-acd0447d],.no-transitions .label-group text[data-v-acd0447d],.no-transitions .slice-group-3d[data-v-acd0447d]{transition:none}.center-text-value[data-v-acd0447d]{fill:#fff;filter:drop-shadow(0 0 3px #000c)}.center-text-label[data-v-acd0447d]{fill:#94a3b8;filter:drop-shadow(0 0 2px #000c)}:root[data-theme=light] .center-text-value[data-v-acd0447d]{fill:#0f172a;filter:drop-shadow(0 0 3px #ffffffe6)}:root[data-theme=light] .center-text-label[data-v-acd0447d]{fill:#475569;filter:drop-shadow(0 0 2px #ffffffe6)}.nano-scrub-track[data-v-21b41bc4]{background:var(--nano-scrub-bg,#00e5ff05);border:var(--nano-border-width,1px) dashed var(--nano-scrub-border,#00e5ff40);border-radius:var(--nano-radius-md,8px);cursor:ew-resize;-webkit-user-select:none;user-select:none;width:100%;height:44px;transition:border-color var(--nano-transition-interactive), background-color var(--nano-transition-interactive);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.nano-scrub-track[data-v-21b41bc4]:hover{background:var(--nano-scrub-hover-bg,#00e5ff0a);border-color:var(--nano-scrub-hover-border,#00e5ff66)}.nano-scrub-progress[data-v-21b41bc4]{background:var(--nano-scrub-progress-bg,#00e5ff0f);pointer-events:none;height:100%;position:absolute;top:0;left:0}.nano-scrub-label[data-v-21b41bc4]{color:var(--nano-scrub-color,#00e5ff);letter-spacing:.03rem;z-index:1;pointer-events:none;align-items:center;gap:6px;font-size:10px;font-weight:700;display:flex}.nano-scrub-overlay[data-v-21b41bc4]{z-index:99999;pointer-events:none;-webkit-user-select:none;user-select:none;width:100vw;height:100vh;position:fixed;top:0;left:0}.nano-scrub-anchor[data-v-21b41bc4]{background:#00e5ff;border-radius:50%;width:10px;height:10px;position:fixed;transform:translate(-50%,-50%);box-shadow:0 0 12px #00e5ff,0 0 24px #00e5ff66}.nano-scrub-svg-line[data-v-21b41bc4]{width:100vw;height:100vh;position:fixed;top:0;left:0}.nano-scrub-popup[data-v-21b41bc4]{pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0f172af2;border:1px solid #00e5ff59;border-radius:10px;flex-direction:column;gap:6px;min-width:200px;padding:12px 16px;display:flex;position:fixed;box-shadow:0 10px 30px #0009,0 0 20px #00e5ff26}.nano-scrub-popup-title[data-v-21b41bc4]{text-transform:uppercase;color:#64748b;letter-spacing:.06rem;font-size:10px;font-weight:700}.nano-scrub-popup-val[data-v-21b41bc4]{color:#fff;letter-spacing:.05rem;font-family:monospace;font-size:1.25rem;font-weight:800}.nano-scrub-popup-res[data-v-21b41bc4]{color:#00e5ff;font-size:11px;font-weight:700}.nano-mutating-header[data-v-fd47d0d0]{z-index:1000;height:var(--header-height,60px);margin:var(--floating-margin,12px 24px 0 24px);border-radius:var(--floating-radius,16px);border:1px solid var(--border-subtle,#ffffff1a);box-sizing:border-box;-webkit-user-select:none;user-select:none;background:var(--bg-card,#101622d9);will-change:margin, border-radius, border-color, padding, box-shadow;transition:margin var(--nano-transition-header), border-radius var(--nano-transition-header), border-color var(--nano-transition-interactive), padding var(--nano-transition-header), box-shadow var(--nano-transition-header), background-color var(--nano-transition-interactive);flex-shrink:0;align-items:center;padding:0 20px;display:flex;position:sticky;top:0;box-shadow:0 8px 24px -6px #00000073}.nano-mutating-header.has-glassmorphism[data-v-fd47d0d0]{-webkit-backdrop-filter:blur(20px)}.nano-mutating-header.is-stuck[data-v-fd47d0d0]{border-color:transparent transparent var(--border-subtle,#ffffff1a) transparent;border-radius:0;margin:0;padding:0 24px;box-shadow:0 4px 16px #00000040}:root[data-theme=light] .nano-mutating-header[data-v-fd47d0d0],[data-theme=light] .nano-mutating-header[data-v-fd47d0d0]{background:var(--bg-card,#ffffffd9);border-color:var(--border-subtle,#00000014);color:#0f172a;box-shadow:0 8px 24px -6px #00000014}:root[data-theme=light] .nano-mutating-header.is-stuck[data-v-fd47d0d0],[data-theme=light] .nano-mutating-header.is-stuck[data-v-fd47d0d0]{border-color:transparent transparent var(--border-subtle,#00000014) transparent;box-shadow:0 2px 10px #0000000a}.header-inner[data-v-fd47d0d0]{justify-content:space-between;align-items:center;gap:16px;width:100%;height:100%;display:flex}.header-left[data-v-fd47d0d0],.header-right[data-v-fd47d0d0]{flex-shrink:0;align-items:center;gap:12px;display:flex}.header-center[data-v-fd47d0d0]{flex:1;justify-content:center;align-items:center;gap:16px;min-width:0;display:flex}.topology-radar-container[data-v-bb4bd598]{justify-content:center;align-items:center;display:flex}.nano-switch[data-v-50b63887],.nano-switch[data-v-50b63887] *,.nano-switch[data-v-50b63887] :before,.nano-switch[data-v-50b63887] :after{box-sizing:border-box}.nano-switch[data-v-50b63887]{--nano-switch-transition:var(--nano-transition-toggle);cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle;color:var(--nano-switch-text,var(--text-color,inherit));align-items:center;gap:.65rem;font-size:.9rem;display:inline-flex;position:relative}.nano-switch.is-disabled[data-v-50b63887]{cursor:not-allowed;opacity:.45}.nano-switch-input[data-v-50b63887]{opacity:0;pointer-events:none;outline:0;width:0;height:0;margin:0;position:absolute}.nano-switch-slider[data-v-50b63887]{background:var(--nano-switch-bg,#0f172a99);border:1px solid var(--nano-switch-border,#ffffff26);cursor:pointer;width:44px;height:24px;transition:background-color var(--nano-switch-transition), border-color var(--nano-switch-transition), box-shadow var(--nano-switch-transition);border-radius:12px;outline:0;flex-shrink:0;position:relative}.nano-switch-slider[data-v-50b63887]:before{content:"";background:var(--nano-switch-knob,#94a3b8);width:16px;height:16px;transition:transform var(--nano-switch-transition), width var(--nano-switch-transition), height var(--nano-switch-transition), top var(--nano-switch-transition), border-radius var(--nano-switch-transition), background-color var(--nano-switch-transition), box-shadow var(--nano-switch-transition), filter var(--nano-switch-transition);border-radius:50%;position:absolute;top:3px;left:3px}.size-default .nano-switch-slider[data-v-50b63887]{border-radius:12px;width:44px;height:24px}.size-default .nano-switch-slider[data-v-50b63887]:before{width:16px;height:16px;top:3px;left:3px}.size-default.is-checked .nano-switch-slider[data-v-50b63887]:before{transform:translate(20px)}.size-default.is-indeterminate .nano-switch-slider[data-v-50b63887]:before{border-radius:6px;width:24px;height:12px;top:5px;transform:translate(6px)}.size-compact .nano-switch-slider[data-v-50b63887]{border-radius:10px;width:38px;height:20px}.size-compact .nano-switch-slider[data-v-50b63887]:before{width:14px;height:14px;top:2px;left:2px}.size-compact.is-checked .nano-switch-slider[data-v-50b63887]:before{transform:translate(18px)}.size-compact.is-indeterminate .nano-switch-slider[data-v-50b63887]:before{border-radius:5px;width:20px;height:10px;top:4px;transform:translate(6px)}.size-mini .nano-switch-slider[data-v-50b63887]{border-radius:8px;width:30px;height:16px}.size-mini .nano-switch-slider[data-v-50b63887]:before{width:10px;height:10px;top:2px;left:2px}.size-mini.is-checked .nano-switch-slider[data-v-50b63887]:before{transform:translate(14px)}.size-mini.is-indeterminate .nano-switch-slider[data-v-50b63887]:before{border-radius:4px;width:16px;height:8px;top:3px;transform:translate(4px)}.color-primary.is-checked .nano-switch-slider[data-v-50b63887],.color-cyan.is-checked .nano-switch-slider[data-v-50b63887]{background:var(--nano-switch-active-bg,#00f2fe33);border-color:var(--nano-switch-active-border,#00f2fe99);box-shadow:0 0 10px var(--nano-switch-active-shadow,#00f2fe4d)}.color-primary.is-checked .nano-switch-slider[data-v-50b63887]:before,.color-cyan.is-checked .nano-switch-slider[data-v-50b63887]:before{background:var(--nano-switch-active-knob,#00f2fe);box-shadow:0 0 8px var(--nano-switch-active-knob,#00f2fe99)}.color-purple.is-checked .nano-switch-slider[data-v-50b63887]{background:#a855f733;border-color:#a855f799;box-shadow:0 0 10px #a855f74d}.color-purple.is-checked .nano-switch-slider[data-v-50b63887]:before{background:#c084fc;box-shadow:0 0 8px #c084fc99}.color-emerald.is-checked .nano-switch-slider[data-v-50b63887]{background:#10b98133;border-color:#10b98199;box-shadow:0 0 10px #10b9814d}.color-emerald.is-checked .nano-switch-slider[data-v-50b63887]:before{background:#10b981;box-shadow:0 0 8px #10b98199}.color-danger.is-checked .nano-switch-slider[data-v-50b63887]{background:#ef444433;border-color:#ef444499;box-shadow:0 0 10px #ef44444d}.color-danger.is-checked .nano-switch-slider[data-v-50b63887]:before{background:#ef4444;box-shadow:0 0 8px #ef444499}.color-gold.is-checked .nano-switch-slider[data-v-50b63887]{background:#c89b3c33;border-color:#c89b3c99;box-shadow:0 0 10px #c89b3c4d}.color-gold.is-checked .nano-switch-slider[data-v-50b63887]:before{background:#c89b3c;box-shadow:0 0 8px #c89b3c99}.nano-switch.is-indeterminate .nano-switch-slider[data-v-50b63887]{background:#94a3b81f;border-color:#94a3b859}.color-primary.is-indeterminate .nano-switch-slider[data-v-50b63887],.color-cyan.is-indeterminate .nano-switch-slider[data-v-50b63887]{background:#00f2fe14;border-color:#00f2fe59}.color-primary.is-indeterminate .nano-switch-slider[data-v-50b63887]:before,.color-cyan.is-indeterminate .nano-switch-slider[data-v-50b63887]:before{background:#38bdf8;box-shadow:0 0 6px #38bdf866}.color-purple.is-indeterminate .nano-switch-slider[data-v-50b63887]{background:#a855f714;border-color:#a855f759}.color-purple.is-indeterminate .nano-switch-slider[data-v-50b63887]:before{background:#c084fc;box-shadow:0 0 6px #c084fc66}.color-emerald.is-indeterminate .nano-switch-slider[data-v-50b63887]{background:#10b98114;border-color:#10b98159}.color-emerald.is-indeterminate .nano-switch-slider[data-v-50b63887]:before{background:#34d399;box-shadow:0 0 6px #34d39966}.color-danger.is-indeterminate .nano-switch-slider[data-v-50b63887]{background:#ef444414;border-color:#ef444459}.color-danger.is-indeterminate .nano-switch-slider[data-v-50b63887]:before{background:#f87171;box-shadow:0 0 6px #f8717166}.color-gold.is-indeterminate .nano-switch-slider[data-v-50b63887]{background:#c89b3c14;border-color:#c89b3c59}.color-gold.is-indeterminate .nano-switch-slider[data-v-50b63887]:before{background:#fbbf24;box-shadow:0 0 6px #fbbf2466}:root[data-theme=light] .nano-switch.is-indeterminate .nano-switch-slider[data-v-50b63887],html[data-theme=light] .nano-switch.is-indeterminate .nano-switch-slider[data-v-50b63887]{background:#64748b14;border-color:#64748b80}:root[data-theme=light] .color-primary.is-indeterminate .nano-switch-slider[data-v-50b63887],:root[data-theme=light] .color-cyan.is-indeterminate .nano-switch-slider[data-v-50b63887],html[data-theme=light] .color-primary.is-indeterminate .nano-switch-slider[data-v-50b63887],html[data-theme=light] .color-cyan.is-indeterminate .nano-switch-slider[data-v-50b63887]{background:#0284c714;border-color:#0284c7a6}:root[data-theme=light] .color-primary.is-indeterminate .nano-switch-slider[data-v-50b63887]:before,:root[data-theme=light] .color-cyan.is-indeterminate .nano-switch-slider[data-v-50b63887]:before,html[data-theme=light] .color-primary.is-indeterminate .nano-switch-slider[data-v-50b63887]:before,html[data-theme=light] .color-cyan.is-indeterminate .nano-switch-slider[data-v-50b63887]:before{background:#0284c7;box-shadow:0 0 6px #0284c74d}:root[data-theme=light] .color-purple.is-indeterminate .nano-switch-slider[data-v-50b63887],html[data-theme=light] .color-purple.is-indeterminate .nano-switch-slider[data-v-50b63887]{background:#7c3aed14;border-color:#7c3aeda6}:root[data-theme=light] .color-purple.is-indeterminate .nano-switch-slider[data-v-50b63887]:before,html[data-theme=light] .color-purple.is-indeterminate .nano-switch-slider[data-v-50b63887]:before{background:#7c3aed;box-shadow:0 0 6px #7c3aed4d}:root[data-theme=light] .color-emerald.is-indeterminate .nano-switch-slider[data-v-50b63887],html[data-theme=light] .color-emerald.is-indeterminate .nano-switch-slider[data-v-50b63887]{background:#05966914;border-color:#059669a6}:root[data-theme=light] .color-emerald.is-indeterminate .nano-switch-slider[data-v-50b63887]:before,html[data-theme=light] .color-emerald.is-indeterminate .nano-switch-slider[data-v-50b63887]:before{background:#059669;box-shadow:0 0 6px #0596694d}:root[data-theme=light] .color-danger.is-indeterminate .nano-switch-slider[data-v-50b63887],html[data-theme=light] .color-danger.is-indeterminate .nano-switch-slider[data-v-50b63887]{background:#dc262614;border-color:#dc2626a6}:root[data-theme=light] .color-danger.is-indeterminate .nano-switch-slider[data-v-50b63887]:before,html[data-theme=light] .color-danger.is-indeterminate .nano-switch-slider[data-v-50b63887]:before{background:#dc2626;box-shadow:0 0 6px #dc26264d}:root[data-theme=light] .color-gold.is-indeterminate .nano-switch-slider[data-v-50b63887],html[data-theme=light] .color-gold.is-indeterminate .nano-switch-slider[data-v-50b63887]{background:#d9770614;border-color:#d97706a6}:root[data-theme=light] .color-gold.is-indeterminate .nano-switch-slider[data-v-50b63887]:before,html[data-theme=light] .color-gold.is-indeterminate .nano-switch-slider[data-v-50b63887]:before{background:#d97706;box-shadow:0 0 6px #d977064d}.nano-switch:not(.is-disabled):not(.is-checked):not(.is-indeterminate):hover .nano-switch-slider[data-v-50b63887]{border-color:var(--nano-border-hover);background:var(--nano-bg-hover)}.nano-switch.is-checked:not(.is-disabled):hover .nano-switch-slider[data-v-50b63887]{box-shadow:0 0 12px var(--nano-switch-active-shadow,#00f2fe59)}.nano-switch.is-indeterminate:not(.is-disabled):hover .nano-switch-slider[data-v-50b63887]:before{opacity:.9}.nano-switch-label[data-v-50b63887]{align-items:center;line-height:1.3;display:inline-flex}.nano-kinetic-rotator[data-v-abbbb111]{-webkit-user-select:none;user-select:none;touch-action:none;justify-content:center;align-items:center;display:inline-flex;position:relative;overflow:visible}.rotator-tile[data-v-abbbb111]{transform-origin:50%;will-change:transform;border-radius:var(--nano-radius-lg,16px);justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.rotator-fallback[data-v-abbbb111]{justify-content:center;align-items:center;gap:var(--nano-space-xs,4px);background:var(--nano-bg-card,#0f172a);border:1px solid var(--nano-border-card,#ffffff26);border-radius:var(--nano-radius-lg,16px);width:100%;height:100%;box-shadow:var(--nano-shadow-card,0 4px 16px #0000004d);flex-direction:column;display:flex}.fallback-icon[data-v-abbbb111]{font-size:2.5rem}.fallback-angle[data-v-abbbb111]{font-family:var(--font-mono,monospace);color:var(--nano-state-active,#00f2fe);font-size:1.1rem;font-weight:700}.nano-code-block[data-v-9bc464f3]{background:var(--nano-bg-code,#0b1120);border:1px solid var(--nano-border-card,#ffffff1f);border-radius:var(--nano-radius-md,10px);box-sizing:border-box;max-width:100%;margin:var(--nano-space-md,16px) 0;transition:var(--nano-transition-interactive,border-color .2s ease);flex-direction:column;display:flex;overflow:hidden}.nano-code-block[data-v-9bc464f3]:hover{border-color:var(--nano-border-hover,#ffffff38)}.code-block-header[data-v-9bc464f3]{border-bottom:1px solid var(--nano-border-card,#ffffff14);-webkit-user-select:none;user-select:none;background:#00000040;flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;padding:8px 14px;display:flex}.code-block-title-group[data-v-9bc464f3]{align-items:center;gap:8px;min-width:0;display:flex}.code-block-title[data-v-9bc464f3]{color:var(--nano-text-main,#f8fafc);letter-spacing:.3px;white-space:nowrap;text-overflow:ellipsis;font-size:.8rem;font-weight:700;overflow:hidden}.code-block-lang[data-v-9bc464f3]{font-family:var(--font-mono,monospace);text-transform:uppercase;color:var(--nano-state-active,#00f2fe);background:#00f2fe1f;border:1px solid #00f2fe40;border-radius:4px;padding:1px 6px;font-size:.65rem;font-weight:700;line-height:1.2}.code-block-actions[data-v-9bc464f3]{flex-shrink:0;align-items:center;gap:6px;display:flex}.code-action-btn[data-v-9bc464f3]{color:var(--nano-text-muted,#94a3b8);cursor:pointer;width:28px;height:28px;transition:var(--nano-transition-interactive,all .15s ease);-webkit-user-select:none;user-select:none;background:0 0;border:1px solid #0000;border-radius:6px;outline:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.code-action-btn[data-v-9bc464f3]:hover{background:var(--nano-bg-hover,#ffffff14);color:var(--nano-text-main,#f8fafc);border-color:var(--nano-border-subtle,#ffffff1a)}.code-action-btn[data-v-9bc464f3]:active{transform:scale(.92)}.code-action-btn.active[data-v-9bc464f3]{color:var(--nano-state-active,#00f2fe);background:#00f2fe1a;border-color:#00f2fe40}.code-action-btn.copied[data-v-9bc464f3]{color:#10b981;background:#10b9811a;border-color:#10b9814d}.action-svg[data-v-9bc464f3]{width:14px;height:14px}.success-icon[data-v-9bc464f3]{color:#10b981}.code-block-body[data-v-9bc464f3]{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--nano-border-subtle,#ffffff26) transparent;max-width:100%;padding:14px 16px;overflow:auto}.code-block-pre[data-v-9bc464f3]{font-family:var(--font-mono,monospace);color:var(--nano-text-code,#e2e8f0);white-space:pre;background:0 0;margin:0;padding:0;font-size:.82rem;line-height:1.6}.is-wrapped .code-block-pre[data-v-9bc464f3]{white-space:pre-wrap!important;word-break:break-word!important;overflow-wrap:break-word!important}.code-block-pre code[data-v-9bc464f3]{cursor:text;color:inherit;font-family:inherit;font-size:inherit;background:0 0;-webkit-user-select:text!important;user-select:text!important}:root{--nano-border-width:1px;--nano-unit:8px;--nano-space-xs:calc(var(--nano-unit) * .5);--nano-space-sm:var(--nano-unit);--nano-space-md:calc(var(--nano-unit) * 2);--nano-space-lg:calc(var(--nano-unit) * 3);--nano-space-xl:calc(var(--nano-unit) * 4);--nano-space-2xl:calc(var(--nano-unit) * 6);--nano-space-1:var(--nano-space-sm);--nano-space-2:var(--nano-space-md);--nano-space-3:var(--nano-space-lg);--nano-space-4:var(--nano-space-xl);--nano-radius-xs:calc(var(--nano-unit) * .25);--nano-radius-sm:calc(var(--nano-unit) * .5);--nano-radius-md:var(--nano-unit);--nano-radius-lg:calc(var(--nano-unit) * 1.5);--nano-radius-xl:calc(var(--nano-unit) * 2);--nano-radius-full:9999px;--nano-blur-xs:calc(var(--nano-unit) * .25);--nano-blur-sm:calc(var(--nano-unit) * .5);--nano-blur-md:var(--nano-unit);--nano-blur-lg:calc(var(--nano-unit) * 2);--nano-blur-xl:calc(var(--nano-unit) * 3);--nano-line-height-tight:1.25;--nano-line-height-base:1.5;--nano-line-height-relaxed:1.65;--nano-duration-fast:.15s;--nano-duration-medium:.25s;--nano-duration-slow:.35s;--nano-duration-ripple:.6s;--nano-ease-standard:cubic-bezier(.4, 0, .2, 1);--nano-ease-smooth:cubic-bezier(.16, 1, .3, 1);--nano-ease-spring:cubic-bezier(.175, .885, .32, 1.275);--nano-ease-out:cubic-bezier(0, 0, .2, 1);--nano-ease-in:cubic-bezier(.4, 0, 1, 1);--nano-ease-linear:linear;--nano-transition-interactive:var(--nano-duration-fast) var(--nano-ease-standard);--nano-transition-motion:var(--nano-duration-medium) var(--nano-ease-standard);--nano-transition-toggle:var(--nano-duration-medium) var(--nano-ease-standard);--nano-transition-header:var(--nano-duration-medium) var(--nano-ease-smooth);--nano-transition-tooltip:var(--nano-duration-fast) var(--nano-ease-smooth);--nano-transition-chart:var(--nano-duration-medium) var(--nano-ease-standard);--nano-transition-modal:var(--nano-duration-slow) var(--nano-ease-spring);--nano-transition-modal-backdrop:var(--nano-duration-medium) var(--nano-ease-out);--nano-transition-modal-enter:var(--nano-duration-slow) var(--nano-ease-spring);--nano-transition-modal-leave:var(--nano-duration-fast) var(--nano-ease-in);--nano-transition-ripple:var(--nano-duration-ripple) var(--nano-ease-linear)}span.ripple{animation:nano-ripple-anim var(--nano-transition-ripple);background-color:var(--nano-ripple-color,#fff6);pointer-events:none;border-radius:50%;position:absolute;transform:scale(0)}@keyframes nano-ripple-anim{to{opacity:0;transform:scale(4)}}:root{--nano-alpha-1:.05;--nano-alpha-2:.15;--nano-alpha-3:.3;--nano-alpha-4:.6;--nano-alpha-5:.9;--nano-alpha-subtle:var(--nano-alpha-1);--nano-alpha-muted:var(--nano-alpha-2);--nano-alpha-hover:var(--nano-alpha-3);--nano-alpha-medium:var(--nano-alpha-4);--nano-alpha-glass:var(--nano-alpha-5);--nano-bg-app:#09090b;--nano-bg-sidebar:#18181b;--nano-bg-card:rgba(255, 255, 255, var(--nano-alpha-subtle));--nano-bg-card-elevated:rgba(255, 255, 255, var(--nano-alpha-subtle));--nano-bg-muted:rgba(255, 255, 255, var(--nano-alpha-subtle));--nano-bg-code:#0f172a;--nano-bg-hover:rgba(255, 255, 255, var(--nano-alpha-muted));--nano-text-main:#f8fafc;--nano-text-secondary:#cbd5e1;--nano-text-muted:#94a3b8;--nano-text-code:#cbd5e1;--nano-border-subtle:rgba(255, 255, 255, var(--nano-alpha-subtle));--nano-border-card:rgba(255, 255, 255, var(--nano-alpha-muted));--nano-border-hover:rgba(255, 255, 255, var(--nano-alpha-hover));--nano-shadow-card:none;--nano-shadow-elevated:0 var(--nano-space-xs) calc(var(--nano-unit) * 2.5) rgba(0, 0, 0, var(--nano-alpha-hover));--nano-accent-primary:#6366f1;--nano-accent-primary-hover:#4f46e5;--nano-state-active:#00f2fe;--nano-nav-active-bg:rgba(99, 102, 241, var(--nano-alpha-muted));--nano-nav-active-color:#818cf8;--nano-selection-bg:color-mix(in srgb, var(--nano-accent-primary) 35%, transparent);--nano-selection-text:#fff;--nano-switch-bg:rgba(15, 23, 42, var(--nano-alpha-medium));--nano-switch-border:rgba(255, 255, 255, var(--nano-alpha-muted));--nano-switch-knob:#94a3b8;--nano-switch-active-bg:rgba(0, 242, 254, var(--nano-alpha-muted));--nano-switch-active-border:#00f2fe;--nano-switch-active-shadow:rgba(0, 242, 254, var(--nano-alpha-hover));--nano-switch-active-knob:#00f2fe;--nano-ripple-color:rgba(255, 255, 255, var(--nano-alpha-hover));--nano-modal-bg:#18181b;--nano-modal-glass-bg:rgba(24, 24, 27, var(--nano-alpha-glass));--nano-modal-border:rgba(255, 255, 255, var(--nano-alpha-muted));--nano-modal-text:#f8fafc;--nano-modal-text-muted:#94a3b8;--nano-modal-backdrop:rgba(0, 0, 0, var(--nano-alpha-medium));--nano-modal-radius:var(--nano-radius-lg);--nano-modal-btn-primary:#6366f1;--nano-modal-btn-primary-hover:#4f46e5;--nano-modal-btn-secondary:#27272a;--nano-modal-btn-secondary-hover:#3f3f46;--nano-modal-shadow:0 calc(var(--nano-unit) * 2.5) calc(var(--nano-unit) * 6) rgba(0, 0, 0, var(--nano-alpha-medium));--nano-modal-header-bg:rgba(0, 0, 0, var(--nano-alpha-muted));--nano-modal-footer-bg:rgba(0, 0, 0, var(--nano-alpha-muted));--nano-modal-close-hover:rgba(255, 255, 255, var(--nano-alpha-muted));--nano-modal-close-color:#fff;--nano-scrub-color:#00e5ff;--nano-scrub-bg:rgba(0, 229, 255, var(--nano-alpha-subtle));--nano-scrub-border:rgba(0, 229, 255, var(--nano-alpha-hover));--nano-scrub-hover-bg:rgba(0, 229, 255, var(--nano-alpha-muted));--nano-scrub-hover-border:rgba(0, 229, 255, var(--nano-alpha-medium));--nano-scrub-progress-bg:rgba(0, 229, 255, var(--nano-alpha-muted));--nano-tooltip-bg:rgba(15, 23, 42, var(--nano-alpha-glass));--nano-tooltip-color:#f8fafc;--nano-tooltip-radius:var(--nano-radius-md);--nano-tooltip-padding:var(--nano-space-sm) var(--nano-space-md);--nano-tooltip-shadow:0 var(--nano-space-sm) var(--nano-space-lg) rgba(0, 0, 0, var(--nano-alpha-hover));--nano-tooltip-border:var(--nano-border-width) solid rgba(255, 255, 255, var(--nano-alpha-muted));--nano-tooltip-arrow-border:rgba(255, 255, 255, var(--nano-alpha-muted));--nano-radar-grid-bg:rgba(15, 23, 42, var(--nano-alpha-glass));--nano-radar-grid-stroke:rgba(255, 255, 255, var(--nano-alpha-muted));--nano-radar-grid-subtle:rgba(255, 255, 255, var(--nano-alpha-subtle));--nano-radar-text:var(--nano-text-muted);--nano-radar-color:var(--nano-state-active)}:root[data-theme=light],html[data-theme=light]{--nano-bg-app:#f8fafc;--nano-bg-sidebar:#fff;--nano-bg-card:#fff;--nano-bg-card-elevated:#fff;--nano-bg-muted:#f1f5f9;--nano-bg-code:#f8fafc;--nano-bg-hover:#f1f5f9;--nano-text-main:#0f172a;--nano-text-secondary:#1e293b;--nano-text-muted:#475569;--nano-text-code:#0f172a;--nano-border-subtle:#e2e8f0;--nano-border-card:#cbd5e1;--nano-border-hover:#94a3b8;--nano-shadow-card:0 var(--nano-border-width) calc(var(--nano-border-width) * 3) rgba(15, 23, 42, var(--nano-alpha-subtle)), 0 var(--nano-border-width) calc(var(--nano-border-width) * 2) rgba(15, 23, 42, var(--nano-alpha-subtle));--nano-shadow-elevated:0 var(--nano-space-xs) calc(var(--nano-unit) * 2) rgba(15, 23, 42, var(--nano-alpha-subtle));--nano-accent-primary:#4f46e5;--nano-accent-primary-hover:#4338ca;--nano-state-active:#0284c7;--nano-nav-active-bg:#e0e7ff;--nano-nav-active-color:#4338ca;--nano-selection-bg:color-mix(in srgb, var(--nano-accent-primary) 20%, transparent);--nano-selection-text:inherit;--nano-switch-bg:#e2e8f0;--nano-switch-border:#cbd5e1;--nano-switch-knob:#fff;--nano-switch-active-bg:#e0f2fe;--nano-switch-active-border:#0284c7;--nano-switch-active-shadow:rgba(2, 132, 199, var(--nano-alpha-muted));--nano-switch-active-knob:#0284c7;--nano-ripple-color:rgba(15, 23, 42, var(--nano-alpha-muted));--nano-modal-bg:#fff;--nano-modal-glass-bg:rgba(255, 255, 255, var(--nano-alpha-glass));--nano-modal-border:#cbd5e1;--nano-modal-text:#0f172a;--nano-modal-text-muted:#475569;--nano-modal-backdrop:rgba(15, 23, 42, var(--nano-alpha-medium));--nano-modal-radius:var(--nano-radius-lg);--nano-modal-btn-primary:#4f46e5;--nano-modal-btn-primary-hover:#4338ca;--nano-modal-btn-secondary:#f1f5f9;--nano-modal-btn-secondary-hover:#e2e8f0;--nano-modal-shadow:0 calc(var(--nano-unit) * 1.5) calc(var(--nano-unit) * 4) rgba(15, 23, 42, var(--nano-alpha-muted));--nano-modal-header-bg:rgba(15, 23, 42, var(--nano-alpha-subtle));--nano-modal-footer-bg:rgba(15, 23, 42, var(--nano-alpha-subtle));--nano-modal-close-hover:rgba(15, 23, 42, var(--nano-alpha-muted));--nano-modal-close-color:#0f172a;--nano-scrub-color:#0284c7;--nano-scrub-bg:rgba(2, 132, 199, var(--nano-alpha-subtle));--nano-scrub-border:rgba(2, 132, 199, var(--nano-alpha-hover));--nano-scrub-hover-bg:rgba(2, 132, 199, var(--nano-alpha-muted));--nano-scrub-hover-border:rgba(2, 132, 199, var(--nano-alpha-medium));--nano-scrub-progress-bg:rgba(2, 132, 199, var(--nano-alpha-muted));--nano-tooltip-bg:rgba(15, 23, 42, var(--nano-alpha-glass));--nano-tooltip-color:#f8fafc;--nano-tooltip-radius:var(--nano-radius-md);--nano-tooltip-padding:var(--nano-space-sm) var(--nano-space-md);--nano-tooltip-shadow:0 var(--nano-space-sm) var(--nano-space-lg) rgba(15, 23, 42, var(--nano-alpha-hover));--nano-tooltip-border:var(--nano-border-width) solid rgba(255, 255, 255, var(--nano-alpha-muted));--nano-tooltip-arrow-border:rgba(255, 255, 255, var(--nano-alpha-muted));--nano-radar-grid-bg:rgba(241, 245, 249, var(--nano-alpha-glass));--nano-radar-grid-stroke:rgba(15, 23, 42, var(--nano-alpha-muted));--nano-radar-grid-subtle:rgba(15, 23, 42, var(--nano-alpha-subtle));--nano-radar-text:var(--nano-text-muted);--nano-radar-color:var(--nano-state-active)}*,:before,:after{box-sizing:border-box}:focus,:focus-visible,input,textarea,select,button{outline:none!important}input:focus,input:focus-visible,textarea:focus,textarea:focus-visible,select:focus,select:focus-visible,button:focus,button:focus-visible{box-shadow:none!important;outline:none!important}:root,body,.nano-ui-chrome{-webkit-user-select:none;user-select:none}input,textarea,[contenteditable=true],code,pre,kbd,samp{-webkit-user-select:text!important;user-select:text!important}code,pre{cursor:text;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}pre{white-space:pre;margin:0}pre code{white-space:inherit;font-family:inherit}::selection{background-color:var(--nano-selection-bg);color:var(--nano-selection-text)}::selection{background-color:var(--nano-selection-bg);color:var(--nano-selection-text)}html.preload,html.preload *,html.preload :before,html.preload :after,html.theme-switching,html.theme-switching *,html.theme-switching :before,html.theme-switching :after{transition:none!important}body{background-color:var(--nano-bg-app);color:var(--nano-text-main);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:var(--nano-line-height-base,1.5);-webkit-font-smoothing:antialiased;margin:0;padding:0}
|
|
2
2
|
/*$vite$:1*/
|