Skip to content

Commit 645f901

Browse files
radicalkjaxradicalkjax
committed
tauri: chiral diorama theme, tree→node rename, Springtale as default
 - Rename ColonyTree→ColonyNode, mapTrees→mapNodes, TREE_*→NODE_* across types, mappers, geometry, components, and exports. Code uses network terminology (nodes, strands, agents) — visual metaphor stays in CSS. - New "Springtale" theme (default): DS-inspired chiral diorama with slate-blue tabletop, cyan node glows, figurine sprites (hex hub, relay tower, diamond terminal), elevation shadows, solid glowing strands, box-shadow glow hovers, scanline depth mode, diamond data output indicators. All box-shadow based for 60fps. - Colony theme preserved as [data-theme="colony"]: original earthy palette, tree sprites, brightness hovers, dashed mycelium, mushroom outputs. - SVG strand-glow filter (feGaussianBlur stdDev=2) for connection paths in Springtale theme. - Ground texture moved from inline style to .colony-ground CSS class. - Labels updated: TREES→NODES, COLONY MAP→NETWORK MAP, SPRINGTAIL→AGENT, MYCELIUM→CONNECTIONS, SURFACE→NETWORK, UNDERGROUND→DEPTH.
1 parent b7a9e33 commit 645f901

15 files changed

Lines changed: 564 additions & 351 deletions

File tree

‎tauri/apps/dashboard/src/App.tsx‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
ConnectorConfigPanel,
1111
useDashboard,
1212
useI18n,
13-
mapTrees,
13+
mapNodes,
1414
mapAgents,
1515
mapFormations,
1616
} from "@springtale/ui";
@@ -31,13 +31,9 @@ export const App = () => {
3131
const { t, locale, setLocale } = useI18n();
3232

3333
// ── Theme ────────────────────────────────────────────────
34-
const [theme, setTheme] = createSignal("colony");
34+
const [theme, setTheme] = createSignal("springtale");
3535
const applyTheme = (t: string) => {
36-
if (t === "colony") {
37-
delete document.documentElement.dataset.theme;
38-
} else {
39-
document.documentElement.dataset.theme = t;
40-
}
36+
document.documentElement.dataset.theme = t;
4137
};
4238

4339
// ── Colony state ────────────────────────────────────────
@@ -168,7 +164,7 @@ export const App = () => {
168164
});
169165

170166
// ── Data → Colony visual model (real data, no fakes) ───
171-
const trees = () => mapTrees(db.connectors());
167+
const nodes = () => mapNodes(db.connectors());
172168
const agents = () => mapAgents(db.rules(), db.agentStates());
173169
const [connections, setConnections] = createSignal<import("@springtale/ui").ColonyConnection[]>([]);
174170
const formations = () => mapFormations(db.swarms());
@@ -341,7 +337,7 @@ export const App = () => {
341337
class="colony-text-2xs w-full border-2 border-bark bg-soil-deep px-2 py-1.5 text-text-primary"
342338
>
343339
<option value="colony">Colony (default)</option>
344-
<option value="rekindle">Rekindle</option>
340+
<option value="springtale">Springtale</option>
345341
</select>
346342
</div>
347343
</div>
@@ -489,7 +485,7 @@ export const App = () => {
489485
topBar={
490486
<TopBar
491487
agents={agents()}
492-
trees={trees()}
488+
nodes={nodes()}
493489
formations={formations()}
494490
events={db.events()}
495491
selection={selection()}
@@ -499,7 +495,7 @@ export const App = () => {
499495
}
500496
viewport={
501497
<Viewport
502-
trees={trees()}
498+
nodes={nodes()}
503499
agents={agents()}
504500
connections={connections()}
505501
formations={formations()}
@@ -523,7 +519,7 @@ export const App = () => {
523519
}
524520
bottomPanel={
525521
<BottomPanel
526-
trees={trees()}
522+
nodes={nodes()}
527523
agents={agents()}
528524
connections={connections()}
529525
formations={formations()}

‎tauri/apps/dashboard/src/index.css‎

Lines changed: 111 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
@import "../../../packages/ui/src/colony/colony.css";
55

66
@theme {
7-
/* Structural — overridden by theme */
7+
/* Structural */
88
--border-panel: 2px;
99
--border-input: 2px;
1010
--border-divider: 2px;
@@ -15,6 +15,8 @@
1515
--color-soil-deep: #0e0c08;
1616
--color-soil-mid: #1a1710;
1717
--color-soil-light: #252118;
18+
--color-soil-deepest: #080604;
19+
--color-soil-darker: #120f08;
1820
--color-bark: #2a2520;
1921
--color-bark-light: #3a3530;
2022
--color-trunk: #5a4030;
@@ -34,8 +36,12 @@
3436

3537
/* Mushroom caps */
3638
--color-mushroom-gold: #c8a050;
39+
--color-mushroom-gold-highlight: #dab860;
3740
--color-mushroom-purple: #a868a0;
41+
--color-mushroom-purple-highlight: #c088c0;
3842
--color-mushroom-teal: #68a8a0;
43+
--color-mushroom-teal-highlight: #88c8c0;
44+
--color-mushroom-stem: #d8d0b0;
3945

4046
/* Agent roles */
4147
--color-role-scout: #4d9de8;
@@ -61,10 +67,6 @@
6167
--color-text-secondary: #8a8478;
6268
--color-text-dim: #5a564e;
6369

64-
/* Deep backgrounds */
65-
--color-soil-deepest: #080604;
66-
--color-soil-darker: #120f08;
67-
6870
/* Sprite pixel art details */
6971
--color-sprite-eye: #111111;
7072
--color-sprite-shadow-scout: #1e3d5a;
@@ -83,19 +85,13 @@
8385
--color-sentinel-deep: #777777;
8486
--color-sentinel-eye: #ee4444;
8587

86-
/* Mushroom accents */
87-
--color-mushroom-gold-highlight: #dab860;
88-
--color-mushroom-purple-highlight: #c088c0;
89-
--color-mushroom-teal-highlight: #88c8c0;
90-
--color-mushroom-stem: #d8d0b0;
91-
9288
/* UI accents */
9389
--color-bubble-urgent-bg: #2a1510;
9490
--color-ground-texture: rgba(50, 42, 25, 0.035);
9591
--color-shadow-deep: #000000;
9692
--color-minimap-idle: #333333;
9793

98-
/* Backwards compat for existing components */
94+
/* Backwards compat */
9995
--color-surface-primary: #0e0c08;
10096
--color-surface-secondary: #1a1710;
10197
--color-surface-elevated: #252118;
@@ -107,105 +103,110 @@
107103
--color-warning: #d4a030;
108104
}
109105

110-
/* ── Rekindle theme (ScopeCreep-zip consistency) ── */
111-
[data-theme="rekindle"] {
112-
/* Structural */
106+
/* ── Rekindle theme — DS diorama meld ──
107+
Rekindle structural (1px, Segoe UI, auto rendering) +
108+
chiral diorama palette (slate-blue, cyan accent) +
109+
DS behaviors via colony.css/sprites.css [data-theme="springtale"] rules */
110+
[data-theme="springtale"] {
111+
/* Structural — ScopeCreep-zip consistency */
113112
--border-panel: 1px;
114113
--border-input: 1px;
115114
--border-divider: 1px;
116115
--font-colony: "Segoe UI", "Tahoma", sans-serif;
117116
--rendering-mode: auto;
118117

119-
/* Backgrounds — neutral dark, no warm tint */
120-
--color-soil-deep: #0a0a0a;
121-
--color-soil-mid: #1e1e1e;
122-
--color-soil-light: #252525;
123-
--color-soil-deepest: #050505;
124-
--color-soil-darker: #0e0e0e;
125-
--color-bark: #2a2a2a;
126-
--color-bark-light: #353535;
127-
--color-trunk: #3a3a3a;
128-
--color-trunk-dark: #282828;
129-
130-
/* Text — cool neutral */
131-
--color-text-primary: #e7e7e7;
132-
--color-text-secondary: #a0a0a0;
133-
--color-text-dim: #646464;
134-
135-
/* Interactive = BLUE (Rekindle accent). NOT green. */
136-
--color-status-ok: #177cc1;
137-
--color-accent: #177cc1;
138-
139-
/* Status indicators */
140-
--color-status-warn: #ffcc00;
141-
--color-status-error: #ef4444;
142-
--color-status-idle: #7d7d7d;
143-
144-
/* Canopy = tree health = green */
145-
--color-canopy: #53d769;
146-
--color-canopy-shadow: #3aad4e;
147-
--color-canopy-highlight: #6ae87e;
148-
--color-canopy-degraded: #ffcc00;
149-
150-
/* Mycelium */
151-
--color-mycelium: #a0a0a0;
152-
--color-mycelium-active: #4fc3f7;
153-
--color-mycelium-warning: #ffcc00;
154-
--color-mycelium-error: #ef4444;
155-
156-
/* Roles */
157-
--color-role-scout: #4fc3f7;
158-
--color-role-worker: #53d769;
159-
--color-role-guard: #ffcc00;
160-
--color-role-analyst: #a78bfa;
161-
--color-role-sentinel: #7d7d7d;
162-
163-
/* Mushrooms */
164-
--color-mushroom-gold: #ffcc00;
118+
/* Tabletop surface — dark slate-blue */
119+
--color-soil-deep: #080f16;
120+
--color-soil-mid: #0e1820;
121+
--color-soil-light: #1b2d3d;
122+
--color-soil-deepest: #040a10;
123+
--color-soil-darker: #060e16;
124+
--color-bark: #1e3345;
125+
--color-bark-light: #2a4560;
126+
127+
/* Node glow — cyan holographic */
128+
--color-canopy: #00d4ff;
129+
--color-canopy-shadow: #0090b8;
130+
--color-canopy-highlight: #40e8ff;
131+
--color-canopy-degraded: #d4a030;
132+
133+
/* Node base/pedestal */
134+
--color-trunk: #1a5570;
135+
--color-trunk-dark: #0d3545;
136+
137+
/* Strand connections */
138+
--color-mycelium: #1a4a5a;
139+
--color-mycelium-active: #00d4ff;
140+
--color-mycelium-warning: #ff8c00;
141+
--color-mycelium-error: #ff3333;
142+
143+
/* Data output indicators */
144+
--color-mushroom-gold: #00d4ff;
145+
--color-mushroom-gold-highlight: #40e8ff;
165146
--color-mushroom-purple: #a78bfa;
166-
--color-mushroom-teal: #4fc3f7;
167-
--color-mushroom-stem: #a0a0a0;
168-
--color-mushroom-gold-highlight: #ffe066;
169147
--color-mushroom-purple-highlight: #c4b5fd;
170-
--color-mushroom-teal-highlight: #67e8f9;
171-
172-
/* Momentum */
173-
--color-momentum-cold: #7d7d7d;
174-
--color-momentum-warm: #4fc3f7;
175-
--color-momentum-hot: #ffcc00;
176-
--color-momentum-fever: #ef4444;
177-
178-
/* Sprites */
179-
--color-sprite-eye: #222222;
180-
--color-sprite-shadow-scout: #1a3a5a;
181-
--color-sprite-shadow-worker: #1a4a1a;
182-
--color-sprite-shadow-guard: #5a4518;
183-
--color-sprite-shadow-analyst: #3d1e5a;
184-
--color-sentinel-body: #aaaaaa;
185-
--color-sentinel-light: #cccccc;
186-
--color-sentinel-highlight: #dddddd;
187-
--color-sentinel-shade: #999999;
188-
--color-sentinel-mid: #888888;
189-
--color-sentinel-dark: #666666;
190-
--color-sentinel-shadow: #777777;
191-
--color-sentinel-deep: #555555;
192-
--color-sentinel-eye: #ef4444;
148+
--color-mushroom-teal: #00ffaa;
149+
--color-mushroom-teal-highlight: #40ffbb;
150+
--color-mushroom-stem: #4a7088;
151+
152+
/* Agent/porter roles */
153+
--color-role-scout: #00d4ff;
154+
--color-role-worker: #00ffaa;
155+
--color-role-guard: #ff8c00;
156+
--color-role-analyst: #a78bfa;
157+
--color-role-sentinel: #8899aa;
158+
159+
/* Status */
160+
--color-status-ok: #00d4ff;
161+
--color-status-warn: #ff8c00;
162+
--color-status-error: #ff3333;
163+
--color-status-idle: #2a4050;
164+
165+
/* Momentum tiers */
166+
--color-momentum-cold: #2a4050;
167+
--color-momentum-warm: #0090b8;
168+
--color-momentum-hot: #ff8c00;
169+
--color-momentum-fever: #ff3333;
170+
171+
/* Text */
172+
--color-text-primary: #c8d8e8;
173+
--color-text-secondary: #6888a0;
174+
--color-text-dim: #3a5568;
175+
176+
/* Sprite colors */
177+
--color-sprite-eye: #00d4ff;
178+
--color-sprite-shadow-scout: #003855;
179+
--color-sprite-shadow-worker: #004030;
180+
--color-sprite-shadow-guard: #553800;
181+
--color-sprite-shadow-analyst: #2d1855;
182+
183+
/* Sentinel — chiral crystal tones */
184+
--color-sentinel-body: #8899aa;
185+
--color-sentinel-light: #a0b8cc;
186+
--color-sentinel-highlight: #b8d0e0;
187+
--color-sentinel-shade: #6688a0;
188+
--color-sentinel-mid: #557090;
189+
--color-sentinel-dark: #445878;
190+
--color-sentinel-shadow: #334560;
191+
--color-sentinel-deep: #223348;
192+
--color-sentinel-eye: #ff3333;
193193

194194
/* UI accents */
195-
--color-ground-texture: rgba(255, 255, 255, 0.015);
196-
--color-minimap-idle: #2a2a2a;
197-
--color-bubble-urgent-bg: #2a1515;
198-
--color-shadow-deep: #000000;
195+
--color-bubble-urgent-bg: #2a1015;
196+
--color-ground-texture: rgba(0, 212, 255, 0.015);
197+
--color-shadow-deep: #000810;
198+
--color-minimap-idle: #1a3040;
199199

200200
/* Compat */
201-
--color-surface-primary: #0a0a0a;
202-
--color-surface-secondary: #1e1e1e;
203-
--color-surface-elevated: #252525;
204-
--color-border-default: #2a2a2a;
205-
--color-border-input: #353535;
206-
--color-success: #53d769;
207-
--color-error: #ef4444;
208-
--color-warning: #ffcc00;
201+
--color-surface-primary: #080f16;
202+
--color-surface-secondary: #0e1820;
203+
--color-surface-elevated: #1b2d3d;
204+
--color-border-default: #1e3345;
205+
--color-border-input: #2a4560;
206+
--color-accent: #00d4ff;
207+
--color-success: #00ffaa;
208+
--color-error: #ff3333;
209+
--color-warning: #ff8c00;
209210
}
210211

211212
body {
@@ -254,33 +255,33 @@ body {
254255
/* ── Rekindle structural overrides ──
255256
Unlayered — beats Tailwind utility classes in @layer utilities.
256257
Reference: https://css-tricks.com/using-css-cascade-layers-with-tailwind-utilities/ */
257-
[data-theme="rekindle"] .rounded,
258-
[data-theme="rekindle"] .rounded-sm,
259-
[data-theme="rekindle"] .rounded-md,
260-
[data-theme="rekindle"] .rounded-lg {
258+
[data-theme="springtale"] .rounded,
259+
[data-theme="springtale"] .rounded-sm,
260+
[data-theme="springtale"] .rounded-md,
261+
[data-theme="springtale"] .rounded-lg {
261262
border-radius: 0;
262263
}
263-
[data-theme="rekindle"] .border-2 {
264+
[data-theme="springtale"] .border-2 {
264265
border-width: var(--border-input);
265266
}
266-
[data-theme="rekindle"] .border-b-2 {
267+
[data-theme="springtale"] .border-b-2 {
267268
border-bottom-width: var(--border-divider);
268269
}
269-
[data-theme="rekindle"] .border-t-2 {
270+
[data-theme="springtale"] .border-t-2 {
270271
border-top-width: var(--border-divider);
271272
}
272-
[data-theme="rekindle"] .border-r-2 {
273+
[data-theme="springtale"] .border-r-2 {
273274
border-right-width: var(--border-divider);
274275
}
275-
[data-theme="rekindle"] .border-l-2 {
276+
[data-theme="springtale"] .border-l-2 {
276277
border-left-width: var(--border-divider);
277278
}
278279

279-
[data-theme="rekindle"] .colony-tree:hover {
280+
[data-theme="springtale"] .colony-tree:hover {
280281
filter: none;
281282
outline: 1px solid var(--color-bark-light);
282283
}
283-
[data-theme="rekindle"] .colony-agent:hover {
284+
[data-theme="springtale"] .colony-agent:hover {
284285
filter: none !important;
285286
outline: 1px solid var(--color-accent);
286287
}

0 commit comments

Comments
 (0)