@plures/design-dojo 0.2.0
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/LICENSE +661 -0
- package/README.md +153 -0
- package/dist/icons/NerdFont.svelte.d.ts +1 -0
- package/dist/index.css +1 -0
- package/dist/index.d.ts +9 -0
- package/dist/index.js +669 -0
- package/dist/motion/spring.d.ts +87 -0
- package/dist/primitives/Button.svelte.d.ts +1 -0
- package/dist/primitives/SearchInput.svelte.d.ts +1 -0
- package/dist/primitives/Toggle.svelte.d.ts +1 -0
- package/dist/primitives/search-input-types.d.ts +7 -0
- package/dist/surfaces/ChatPane.svelte.d.ts +1 -0
- package/dist/surfaces/ChatPane.types.d.ts +8 -0
- package/dist/surfaces/GlassPanel.svelte.d.ts +1 -0
- package/dist/useTui.d.ts +25 -0
- package/package.json +48 -0
package/README.md
ADDED
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
# Design Dojo 🥋
|
|
2
|
+
|
|
3
|
+
> The difference between a web app and a great app is 1000 refinements.
|
|
4
|
+
|
|
5
|
+
**Design Dojo** is a training ground for building desktop-quality UI with Svelte 5. Not "good enough for web" — **sharp enough that users forget it's a WebView.**
|
|
6
|
+
|
|
7
|
+
Every Pares product (mobile, desktop, Total Recall timeline, the book reader) depends on UI that feels native. This repo is where we get there.
|
|
8
|
+
|
|
9
|
+
## Philosophy
|
|
10
|
+
|
|
11
|
+
### What "Desktop-Quality" Means
|
|
12
|
+
|
|
13
|
+
A web app says: *"I'm a website in a window."*
|
|
14
|
+
A desktop app says: *"I belong here."*
|
|
15
|
+
|
|
16
|
+
The difference:
|
|
17
|
+
- **60fps or nothing** — no jank, no layout shift, no FOUC
|
|
18
|
+
- **Pixel-precise** — every border, shadow, and spacing is intentional
|
|
19
|
+
- **Physics-based motion** — spring animations, not CSS transitions
|
|
20
|
+
- **Typography as architecture** — Nerd Fonts, ligatures, variable weights
|
|
21
|
+
- **Surfaces, not cards** — depth through blur, transparency, and layering
|
|
22
|
+
- **Instant** — no loading spinners. Optimistic UI. Local-first.
|
|
23
|
+
|
|
24
|
+
### Learning from Cosmic Desktop
|
|
25
|
+
|
|
26
|
+
[Cosmic](https://github.com/pop-os/cosmic-epoch) (System76) is building a Rust desktop environment from scratch. Key lessons:
|
|
27
|
+
|
|
28
|
+
1. **`iced` widget model** — every element is a composable widget with layout, draw, and event handling
|
|
29
|
+
2. **GPU-accelerated rendering** — wgpu backend, not DOM layout
|
|
30
|
+
3. **Consistent spacing system** — 4px grid, optical alignment
|
|
31
|
+
4. **Color as system** — semantic tokens, not hex values
|
|
32
|
+
5. **Blur and transparency** — frosted glass done right (not CSS `backdrop-filter` hacks)
|
|
33
|
+
6. **Typography scale** — mathematical ratios, not arbitrary sizes
|
|
34
|
+
7. **Motion as language** — spring physics with configurable damping/stiffness
|
|
35
|
+
|
|
36
|
+
We can't use iced (it's Rust-native, not web). But we can steal every design principle and implement them in Svelte + SVG + Canvas.
|
|
37
|
+
|
|
38
|
+
## Structure
|
|
39
|
+
|
|
40
|
+
```
|
|
41
|
+
design-dojo/
|
|
42
|
+
├── src/
|
|
43
|
+
│ ├── lib/
|
|
44
|
+
│ │ ├── primitives/ # Button, Input, Toggle, Slider, Checkbox
|
|
45
|
+
│ │ ├── layout/ # Stack, Grid, Split, Sidebar, Dock
|
|
46
|
+
│ │ ├── surfaces/ # Card, Panel, Sheet, Modal, Popover
|
|
47
|
+
│ │ ├── navigation/ # Tabs, Breadcrumb, Command Palette
|
|
48
|
+
│ │ ├── feedback/ # Toast, Progress, Skeleton, Spinner
|
|
49
|
+
│ │ ├── icons/ # Nerd Font integration, SVG icon system
|
|
50
|
+
│ │ ├── animation/ # Spring, Morph, Parallax, Stagger
|
|
51
|
+
│ │ ├── motion/ # Physics engine, gesture recognizer
|
|
52
|
+
│ │ └── data-viz/ # Charts, Graphs, Timeline (SVG + Canvas)
|
|
53
|
+
│ └── stories/ # Storybook stories for visual testing
|
|
54
|
+
│ ├── primitives/
|
|
55
|
+
│ ├── layout/
|
|
56
|
+
│ ├── animation/
|
|
57
|
+
│ ├── surfaces/
|
|
58
|
+
│ └── showcase/ # Full compositions, real app mockups
|
|
59
|
+
├── docs/
|
|
60
|
+
│ ├── principles/ # Design system documentation
|
|
61
|
+
│ ├── cosmic-lessons/ # What we learned from Cosmic Desktop
|
|
62
|
+
│ └── techniques/ # SVG, Canvas, WebGL, animation deep-dives
|
|
63
|
+
├── static/fonts/ # Nerd Fonts, variable fonts
|
|
64
|
+
├── .storybook/ # Storybook configuration
|
|
65
|
+
└── package.json
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
## The Training Path
|
|
69
|
+
|
|
70
|
+
### Belt System 🥋
|
|
71
|
+
|
|
72
|
+
**White Belt** — Primitives
|
|
73
|
+
- Build a button that *feels* like clicking a real thing
|
|
74
|
+
- Input fields with smooth focus transitions
|
|
75
|
+
- Toggles with spring physics
|
|
76
|
+
- Understand the 4px grid
|
|
77
|
+
|
|
78
|
+
**Yellow Belt** — Layout & Surfaces
|
|
79
|
+
- Split panes with smooth drag handles
|
|
80
|
+
- Frosted glass panels (CSS + SVG filter fallback)
|
|
81
|
+
- Sidebar with collapse animation
|
|
82
|
+
- Z-depth system (not just `box-shadow`)
|
|
83
|
+
|
|
84
|
+
**Green Belt** — Motion & Animation
|
|
85
|
+
- Spring physics engine (mass, stiffness, damping)
|
|
86
|
+
- SVG path morphing between states
|
|
87
|
+
- Stagger animations for lists
|
|
88
|
+
- Gesture recognition (swipe, pinch, long-press)
|
|
89
|
+
|
|
90
|
+
**Blue Belt** — Data Visualization
|
|
91
|
+
- SVG charts that animate on data change
|
|
92
|
+
- Canvas-based timeline (thousands of items, 60fps)
|
|
93
|
+
- WebGL particle effects for transitions
|
|
94
|
+
- Real-time data streams with smooth interpolation
|
|
95
|
+
|
|
96
|
+
**Brown Belt** — Composition
|
|
97
|
+
- Full app shells (sidebar + header + content + status bar)
|
|
98
|
+
- Command palette (Cmd+K) with fuzzy search
|
|
99
|
+
- Notification system with stacked toasts
|
|
100
|
+
- Theme engine (light/dark/custom with smooth transition)
|
|
101
|
+
|
|
102
|
+
**Black Belt** — Mastery
|
|
103
|
+
- Components indistinguishable from native
|
|
104
|
+
- Sub-16ms render times on all components
|
|
105
|
+
- Accessibility (a11y) without compromising aesthetics
|
|
106
|
+
- The showcase: build a real Pares UI that makes people say "wait, this is a web app?"
|
|
107
|
+
|
|
108
|
+
## The Pares Manus Advantage
|
|
109
|
+
|
|
110
|
+
This is where we're different from every other UI library author.
|
|
111
|
+
|
|
112
|
+
With **Pares Manus** (Windows Agent Node), Praxis can:
|
|
113
|
+
1. **Capture what renders** — screenshot after every change
|
|
114
|
+
2. **Compare to intent** — "does this look like what I meant?"
|
|
115
|
+
3. **Measure pixel differences** — automated visual regression
|
|
116
|
+
4. **Test on real displays** — HiDPI, multi-monitor, different scaling
|
|
117
|
+
5. **Iterate visually** — not just write code and hope, but see-adjust-refine
|
|
118
|
+
|
|
119
|
+
The feedback loop goes from "write → deploy → look → context switch → fix" to **"write → see → fix → see → ship"**. That's how you get to 1000 refinements.
|
|
120
|
+
|
|
121
|
+
## Tech Stack
|
|
122
|
+
|
|
123
|
+
- **Svelte 5** — runes, snippets, fine-grained reactivity
|
|
124
|
+
- **SVG** — icons, illustrations, data viz, morphing
|
|
125
|
+
- **Canvas 2D** — high-performance rendering (timelines, particle effects)
|
|
126
|
+
- **WebGL** (selective) — GPU-accelerated effects where Canvas isn't enough
|
|
127
|
+
- **Storybook** — visual component development and testing
|
|
128
|
+
- **Nerd Fonts** — 9000+ icons, ligatures, developer-friendly
|
|
129
|
+
- **CSS Custom Properties** — design tokens, theme engine
|
|
130
|
+
- **`popmotion`/custom** — spring physics, decay, keyframe animations
|
|
131
|
+
|
|
132
|
+
## Getting Started
|
|
133
|
+
|
|
134
|
+
```bash
|
|
135
|
+
npm install
|
|
136
|
+
npm run storybook # Component development
|
|
137
|
+
npm run dev # Full app preview
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
## Principles
|
|
141
|
+
|
|
142
|
+
See [`docs/principles/`](docs/principles/) for the full design system documentation.
|
|
143
|
+
|
|
144
|
+
Quick rules:
|
|
145
|
+
1. **No `px` literals** — use spacing tokens (`--space-1` through `--space-12`)
|
|
146
|
+
2. **No `color: #hex`** — use semantic tokens (`--color-text`, `--color-surface`)
|
|
147
|
+
3. **No `transition: all`** — animate specific properties, use springs for interaction
|
|
148
|
+
4. **No `z-index` wars** — use the stacking context system
|
|
149
|
+
5. **No `!important`** — if you need it, the architecture is wrong
|
|
150
|
+
|
|
151
|
+
---
|
|
152
|
+
|
|
153
|
+
*Part of the [Pares](https://github.com/plures) ecosystem. The UI layer that makes everything else worth building.*
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { SvelteComponent as default } from 'svelte';
|
package/dist/index.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.btn.svelte-5blyfe{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2, 8px);border:none;cursor:pointer;font-family:inherit;font-weight:600;white-space:nowrap;user-select:none;-webkit-user-select:none;outline:none;will-change:transform;box-shadow:0 calc(1px * var(--shadow-depth, 1)) calc(2px * var(--shadow-depth, 1)) #0000000d,0 calc(4px * var(--shadow-depth, 1)) calc(8px * var(--shadow-depth, 1)) #0000001a,0 0 0 calc(3px * var(--focus-opacity, 0)) var(--color-accent, #6366f1)}.btn-sm.svelte-5blyfe{padding:6px 14px;font-size:13px;border-radius:6px}.btn-md.svelte-5blyfe{padding:10px 20px;font-size:15px;border-radius:8px}.btn-lg.svelte-5blyfe{padding:14px 28px;font-size:17px;border-radius:10px}.btn-solid.svelte-5blyfe{background:var(--color-accent, #6366f1);color:#fff}.btn-ghost.svelte-5blyfe{background:transparent;color:var(--color-text, #e8e8e8)}.btn-ghost.svelte-5blyfe:hover{background:var(--alpha-10, rgba(255,255,255,.1))}.btn-outline.svelte-5blyfe{background:transparent;color:var(--color-accent, #6366f1);border:1.5px solid var(--color-accent, #6366f1)}.disabled.svelte-5blyfe{opacity:.4;cursor:not-allowed;pointer-events:none}.btn.tui.svelte-5blyfe{background:var(--tui-surface, #16213e);color:var(--tui-text, #e0e0e0);border:1px solid var(--tui-border, #0f3460);border-radius:var(--tui-radius, 0px);box-shadow:var(--tui-shadow, none);font-family:var(--font-mono, monospace);transform:none!important;padding:0 var(--space-2, 8px)}.btn.tui.svelte-5blyfe:hover:not(.disabled){background:var(--tui-highlight, #533483);border-color:var(--tui-accent, #00d4ff);color:var(--tui-accent, #00d4ff)}.btn.tui.svelte-5blyfe:focus-visible{outline:1px solid var(--tui-accent, #00d4ff);outline-offset:1px}.btn.tui.btn-solid.svelte-5blyfe{background:var(--tui-accent, #00d4ff);color:var(--tui-bg, #1a1a2e);border-color:var(--tui-accent, #00d4ff)}.btn.tui.btn-solid.svelte-5blyfe:hover:not(.disabled){background:var(--tui-highlight, #533483);color:var(--tui-accent, #00d4ff)}.btn.tui.btn-ghost.svelte-5blyfe{background:transparent;border-color:transparent;color:var(--tui-text, #e0e0e0)}.btn.tui.btn-ghost.svelte-5blyfe:hover:not(.disabled){background:var(--tui-highlight, #533483);border-color:transparent}.btn.tui.btn-outline.svelte-5blyfe{background:transparent;border-color:var(--tui-border, #0f3460);color:var(--tui-accent, #00d4ff)}.tui-border-l.svelte-5blyfe,.tui-border-r.svelte-5blyfe{color:var(--tui-border, #0f3460);-webkit-user-select:none;user-select:none;font-style:normal}.toggle-wrapper.svelte-197v0i2{display:inline-flex;align-items:center;gap:var(--space-3, 12px);cursor:pointer;-webkit-user-select:none;user-select:none}.toggle-label.svelte-197v0i2{font-size:14px;color:var(--color-text, #e8e8e8)}.toggle-track.svelte-197v0i2{position:relative;width:48px;height:28px;border-radius:14px;background:var(--track-color);outline:none;will-change:background;box-shadow:0 0 0 calc(3px * var(--focus-opacity, 0)) var(--color-accent, #6366f1);transition:background 0s}.toggle-thumb.svelte-197v0i2{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:11px;background:#fff;will-change:transform;transform:translate(calc(var(--thumb-x, 0) * 20px));box-shadow:0 1px 3px #00000026,0 1px 2px #0000001a}.disabled.svelte-197v0i2{opacity:.4;cursor:not-allowed;pointer-events:none}.glass.svelte-1ps7oei{position:relative;background:rgba(20,20,20,var(--bg-opacity, .6));border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(var(--blur, 20px)) saturate(1.8);backdrop-filter:blur(var(--blur, 20px)) saturate(1.8);box-shadow:inset 0 1px #ffffff0d,0 4px 24px #0003}@supports not (backdrop-filter: blur(1px)){.glass.svelte-1ps7oei{background:#141414d9}}.tui-panel.svelte-1ps7oei{display:inline-block;font-family:var(--font-mono, monospace);color:var(--tui-text, #e0e0e0);background:var(--tui-surface, #16213e)}.tui-panel-top.svelte-1ps7oei,.tui-panel-bottom.svelte-1ps7oei{color:var(--tui-border, #0f3460);white-space:pre}.tui-panel-body.svelte-1ps7oei{display:flex;align-items:stretch}.tui-panel-side.svelte-1ps7oei{color:var(--tui-border, #0f3460);-webkit-user-select:none;user-select:none}.tui-panel-content.svelte-1ps7oei{flex:1}.chat-gui.svelte-10e5u2c{position:relative;display:flex;flex-direction:column;min-height:0;height:100%}.chat-gui__scroll.svelte-10e5u2c{flex:1;min-height:0;overflow-y:auto;scroll-behavior:smooth;outline:none;padding:var(--space-3, 12px);display:flex;flex-direction:column}.chat-gui__messages.svelte-10e5u2c{display:flex;flex-direction:column;gap:var(--space-3, 12px);flex:1;justify-content:flex-end}.chat-gui__msg.svelte-10e5u2c{border:1px solid var(--color-border, #2a2a2a);border-radius:var(--radius-md, 10px);overflow:hidden;background:var(--surface-1, #141414)}.chat-gui__msg--user.svelte-10e5u2c{border-color:var(--color-accent, #6366f1);background:color-mix(in srgb,var(--color-accent, #6366f1) 8%,var(--surface-1, #141414))}.chat-gui__msg--system.svelte-10e5u2c{border-color:var(--color-border, #2a2a2a);opacity:.7}.chat-gui__msg-header.svelte-10e5u2c{display:flex;align-items:center;gap:var(--space-2, 8px);padding:var(--space-2, 6px) var(--space-3, 12px);border-bottom:1px solid var(--color-border, #2a2a2a);background:color-mix(in srgb,var(--color-border, #2a2a2a) 30%,transparent)}.chat-gui__msg-author.svelte-10e5u2c{font-size:var(--text-sm, 13px);font-weight:600;color:var(--color-accent, #6366f1)}.chat-gui__msg--user.svelte-10e5u2c .chat-gui__msg-author:where(.svelte-10e5u2c){color:var(--color-accent, #6366f1)}.chat-gui__msg-time.svelte-10e5u2c{font-size:var(--text-xs, 11px);color:var(--color-text-muted, #888);font-family:var(--font-mono, monospace)}.chat-gui__msg-body.svelte-10e5u2c{padding:var(--space-3, 12px);font-size:var(--text-sm, 14px);color:var(--color-text, #e8e8e8);white-space:pre-wrap;word-break:break-word;line-height:1.6}.chat-gui__sentinel.svelte-10e5u2c{height:1px;flex-shrink:0}.chat-gui__indicator.svelte-10e5u2c{position:absolute;bottom:var(--space-4, 16px);left:50%;transform:translate(-50%);background:var(--color-accent, #6366f1);color:#fff;border:none;border-radius:999px;padding:6px 16px;font-size:var(--text-sm, 13px);font-weight:600;cursor:pointer;white-space:nowrap;box-shadow:0 4px 12px #0006;z-index:10;transition:opacity .15s}.chat-gui__indicator.svelte-10e5u2c:hover{opacity:.85}.chat-tui.svelte-10e5u2c{display:flex;flex-direction:column;font-family:var(--font-mono, monospace);color:var(--tui-text, #e0e0e0);background:var(--tui-surface, #16213e);outline:none;min-height:0}.chat-tui.svelte-10e5u2c:focus-visible{outline:1px solid var(--tui-accent, #00d4ff);outline-offset:1px}.chat-tui__border.svelte-10e5u2c{color:var(--tui-border, #0f3460);white-space:pre;line-height:1;-webkit-user-select:none;user-select:none}.chat-tui__body.svelte-10e5u2c{display:flex;align-items:stretch;flex:1;min-height:0}.chat-tui__side.svelte-10e5u2c{color:var(--tui-border, #0f3460);-webkit-user-select:none;user-select:none;line-height:1}.chat-tui__content.svelte-10e5u2c{flex:1;min-width:0;display:flex;flex-direction:column;gap:0;padding:0 var(--space-1, 4px)}.chat-tui__msg.svelte-10e5u2c{display:flex;flex-direction:column;margin-bottom:2px}.chat-tui__msg-border.svelte-10e5u2c{color:var(--tui-border, #0f3460);white-space:pre;line-height:1;-webkit-user-select:none;user-select:none;font-size:.85em}.chat-tui__msg--user.svelte-10e5u2c .chat-tui__msg-border:where(.svelte-10e5u2c){color:var(--tui-accent, #00d4ff)}.chat-tui__msg--system.svelte-10e5u2c .chat-tui__msg-border:where(.svelte-10e5u2c){color:var(--tui-text-muted, #555)}.chat-tui__msg-body.svelte-10e5u2c{display:flex;align-items:stretch}.chat-tui__msg-side.svelte-10e5u2c{color:var(--tui-border, #0f3460);-webkit-user-select:none;user-select:none;font-size:.85em;line-height:1.4}.chat-tui__msg--user.svelte-10e5u2c .chat-tui__msg-side:where(.svelte-10e5u2c){color:var(--tui-accent, #00d4ff)}.chat-tui__msg-content.svelte-10e5u2c{flex:1;padding:0 var(--space-1, 4px);font-size:.85em;line-height:1.4;white-space:pre-wrap;word-break:break-word}.chat-tui__indicator.svelte-10e5u2c{text-align:center;color:var(--tui-accent, #00d4ff);font-weight:700;font-size:.85em;padding:2px 0;-webkit-user-select:none;user-select:none}.chat-tui__indicator.svelte-10e5u2c span:where(.svelte-10e5u2c){cursor:pointer}.chat-tui__indicator.svelte-10e5u2c span:where(.svelte-10e5u2c):focus-visible{outline:1px solid var(--tui-accent, #00d4ff);outline-offset:1px}.search-gui.svelte-1xnd4ea{position:relative;width:100%}.search-gui__field.svelte-1xnd4ea{display:flex;align-items:center;width:100%;box-sizing:border-box;background:var(--surface-2, #1e1e1e);border:1.5px solid var(--color-border, #2a2a2a);border-radius:var(--radius-md, 10px);padding:0 var(--space-3, 12px);transition:border-color .15s ease;gap:var(--space-2, 8px)}.search-gui__field--focused.svelte-1xnd4ea{border-color:var(--color-accent, #6366f1);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent, #6366f1) 20%,transparent)}.search-gui__icon.svelte-1xnd4ea{color:var(--color-text-muted, #888888);font-size:var(--text-base, 16px);flex-shrink:0;-webkit-user-select:none;user-select:none}.search-gui__input.svelte-1xnd4ea{flex:1;min-width:0;padding:var(--space-3, 12px) 0;background:transparent;border:none;outline:none;color:var(--color-text, #e8e8e8);font-family:inherit;font-size:var(--text-base, 16px);line-height:var(--leading-normal, 1.5)}.search-gui__input.svelte-1xnd4ea::placeholder{color:var(--color-text-muted, #888888)}.search-gui__dropdown.svelte-1xnd4ea{position:absolute;top:calc(100% + var(--space-1, 4px));left:0;right:0;z-index:100;margin:0;padding:var(--space-1, 4px) 0;list-style:none;background:var(--surface-2, #1e1e1e);border:1.5px solid var(--color-border, #2a2a2a);border-radius:var(--radius-md, 10px);box-shadow:var(--shadow-lg, 0 10px 25px rgba(0,0,0,.2));overflow:hidden}.search-gui__option.svelte-1xnd4ea{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2, 8px) var(--space-3, 12px);cursor:pointer;font-size:var(--text-sm, 14px);color:var(--color-text, #e8e8e8);transition:background .1s ease;gap:var(--space-2, 8px)}.search-gui__option.svelte-1xnd4ea:hover,.search-gui__option--selected.svelte-1xnd4ea{background:color-mix(in srgb,var(--color-accent, #6366f1) 12%,transparent);color:var(--color-accent-hover, #818cf8)}.search-gui__option-text.svelte-1xnd4ea{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-gui__highlight.svelte-1xnd4ea{background:transparent;color:var(--color-accent-hover, #818cf8);font-weight:700}.search-gui__score.svelte-1xnd4ea{flex-shrink:0;font-size:var(--text-xs, 12px);color:var(--color-text-muted, #888888);font-variant-numeric:tabular-nums}.search-tui.svelte-1xnd4ea{display:inline-block;font-family:var(--font-mono, monospace);font-size:var(--text-sm, 14px);line-height:1.4;color:var(--tui-text, #e0e0e0);background:var(--tui-surface, #16213e);cursor:text}.search-tui__top.svelte-1xnd4ea,.search-tui__bottom.svelte-1xnd4ea,.search-tui__separator.svelte-1xnd4ea{color:var(--tui-border, #0f3460);white-space:pre;-webkit-user-select:none;user-select:none}.search-tui__top.focused.svelte-1xnd4ea{color:var(--tui-accent, #00d4ff)}.search-tui__row.svelte-1xnd4ea{display:flex;white-space:pre}.search-tui__side.svelte-1xnd4ea{color:var(--tui-border, #0f3460);-webkit-user-select:none;user-select:none}.search-tui__side.focused.svelte-1xnd4ea{color:var(--tui-accent, #00d4ff)}.search-tui__side--dim.svelte-1xnd4ea{color:var(--tui-border, #0f3460);-webkit-user-select:none;user-select:none}.search-tui__content.svelte-1xnd4ea{flex:1;color:var(--tui-text, #e0e0e0);white-space:pre;overflow:hidden}.search-tui__content--placeholder.svelte-1xnd4ea{color:var(--tui-text-dim, #888888)}.search-tui__cursor.svelte-1xnd4ea{color:var(--tui-accent, #00d4ff);animation:svelte-1xnd4ea-search-cursor-blink 1s step-end infinite}@keyframes svelte-1xnd4ea-search-cursor-blink{0%,to{opacity:1}50%{opacity:0}}@media(prefers-reduced-motion:reduce){.search-tui__cursor.svelte-1xnd4ea{animation:none}}.search-tui__result.svelte-1xnd4ea{display:flex;white-space:pre;cursor:pointer}.search-tui__result-content.svelte-1xnd4ea{flex:1;overflow:hidden;white-space:pre}.search-tui__result--selected.svelte-1xnd4ea .search-tui__result-content:where(.svelte-1xnd4ea){background:var(--tui-highlight, #533483)}.search-tui__result-prefix.svelte-1xnd4ea{color:var(--tui-text, #e0e0e0)}.search-tui__result--selected.svelte-1xnd4ea .search-tui__result-prefix:where(.svelte-1xnd4ea){color:var(--tui-accent, #00d4ff)}.search-tui__result-text.svelte-1xnd4ea{color:var(--tui-text, #e0e0e0)}.search-tui__result--selected.svelte-1xnd4ea .search-tui__result-text:where(.svelte-1xnd4ea){color:var(--tui-accent, #00d4ff)}.search-tui__result-gap.svelte-1xnd4ea{color:var(--tui-text, #e0e0e0)}.search-tui__result-score.svelte-1xnd4ea{color:var(--tui-text-dim, #888888)}.search-tui__result--selected.svelte-1xnd4ea .search-tui__result-score:where(.svelte-1xnd4ea){color:var(--tui-text-dim, #888888)}.search-tui__hidden.svelte-1xnd4ea{position:absolute;opacity:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;pointer-events:none}span.svelte-81k4o2{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;vertical-align:middle}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export { default as Button } from './primitives/Button.svelte';
|
|
2
|
+
export { default as Toggle } from './primitives/Toggle.svelte';
|
|
3
|
+
export { default as GlassPanel } from './surfaces/GlassPanel.svelte';
|
|
4
|
+
export { default as ChatPane } from './surfaces/ChatPane.svelte';
|
|
5
|
+
export type { ChatMessage } from './surfaces/ChatPane.types.js';
|
|
6
|
+
export { default as SearchInput } from './primitives/SearchInput.svelte';
|
|
7
|
+
export type { SearchResult } from './primitives/search-input-types';
|
|
8
|
+
export { useTui, provideTui } from './useTui';
|
|
9
|
+
export { default as NerdFont } from './icons/NerdFont.svelte';
|