@bongos/core 1.19.929 → 1.19.931
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/.bongos-core.json +45 -20
- package/docs/copy-inventory.md +35 -7
- package/docs/copy-registry.json +352 -9
- package/docs/module-api-changelog.md +4 -0
- package/modules/hall-ui/public/sky.css +365 -0
- package/modules/hall-ui/public/sky.html +79 -0
- package/modules/hall-ui/public/sky.js +580 -0
- package/modules/hall-ui/public/sky.states.json +20 -0
- package/modules/hall-ui/public/style.css +10 -0
- package/modules/hall-ui/public/thinking.css +0 -9
- package/modules/hall-ui/public/thinking.html +2 -1
- package/package-lock.json +2 -2
- package/package.json +1 -1
- package/src/bongos/serve-internal.js +6 -1
- package/src/module-api.js +1 -1
- package/tests/hall_board_world.mjs +32 -0
- package/tests/hall_page_gate_map.mjs +5 -0
- package/tests/hall_sky.mjs +458 -0
- package/tests/helpers.mjs +121 -0
|
@@ -0,0 +1,365 @@
|
|
|
1
|
+
/* sky.css — what THE SKY has that no other hall page has
|
|
2
|
+
(task 1004105 / BV2.R26, goal 1000095).
|
|
3
|
+
|
|
4
|
+
The composition is the shell's: `.page-head--board`, `.scroll` and
|
|
5
|
+
`.btn-ghost` come from style.css and are not restated here. What is left is
|
|
6
|
+
the four shapes only this page has — the well, its criterion rings, the
|
|
7
|
+
thought glyph in five objects, and the panel beside the field.
|
|
8
|
+
|
|
9
|
+
THE FIVE MARKS ARE THE ROOM'S, ONE SIZE UP. thinking.css draws the same five
|
|
10
|
+
objects at a fixed 9px because a table row has no room to say size in the
|
|
11
|
+
mark and says it in a bar instead. Here the mark IS the size channel, so the
|
|
12
|
+
geometry is parameterised by `--d` and everything else about it — filled /
|
|
13
|
+
haloed / orbited / hollow / hairline-edged — is deliberately the same
|
|
14
|
+
vocabulary. A reader who learned the five in the room must not have to learn
|
|
15
|
+
them again here, which is the same reason `idea-objects.js` is shared.
|
|
16
|
+
|
|
17
|
+
NO COLOUR THAT IS NOT A TOKEN. Every value below is one of the world's
|
|
18
|
+
fifteen or a color-mix of them, so the page inherits dark and light from the
|
|
19
|
+
pack rather than declaring either: there is not one mode-specific rule in
|
|
20
|
+
this sheet, which is why it needs no dark twin. `--line` is a WIDTH; a
|
|
21
|
+
hairline's colour is `--rule` / `--rule-soft`.
|
|
22
|
+
|
|
23
|
+
NO MOTION. Nothing here transitions or animates, so the sheet sits entirely
|
|
24
|
+
inside the Kill Switch rather than being excused by it. A field of a
|
|
25
|
+
person's own thinking that twinkles is a toy; this one is a measurement. */
|
|
26
|
+
|
|
27
|
+
/* ---- the layout ----------------------------------------------------------
|
|
28
|
+
Field and panel side by side on a desk, stacked on a phone. The panel is
|
|
29
|
+
fixed-width because its job is to hold a sentence at a readable measure
|
|
30
|
+
whatever the field is doing beside it. */
|
|
31
|
+
.sky-wrap {
|
|
32
|
+
display: grid;
|
|
33
|
+
grid-template-columns: minmax(0, 1fr) 320px;
|
|
34
|
+
gap: var(--sp-lg);
|
|
35
|
+
align-items: start;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* ---- the wells -----------------------------------------------------------
|
|
39
|
+
One goal, one cell. The mock draws a single continuous starfield of absolute
|
|
40
|
+
coordinates; that reading survives 1280px and dies at 320, where four wells
|
|
41
|
+
overlap into one smear. `auto-fit` keeps one well per row on a phone and
|
|
42
|
+
four across on a desk with no second set of numbers. */
|
|
43
|
+
.sky-field-grid {
|
|
44
|
+
display: grid;
|
|
45
|
+
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
46
|
+
gap: var(--sp-lg) var(--sp-md);
|
|
47
|
+
margin: 0 0 var(--sp-md);
|
|
48
|
+
}
|
|
49
|
+
.sky-well { min-width: 0; }
|
|
50
|
+
.sky-well__h {
|
|
51
|
+
margin: 0;
|
|
52
|
+
font-family: var(--label-face);
|
|
53
|
+
font-size: var(--label-size);
|
|
54
|
+
letter-spacing: var(--label-space);
|
|
55
|
+
text-transform: var(--label-case);
|
|
56
|
+
font-weight: 400;
|
|
57
|
+
color: var(--ink-soft);
|
|
58
|
+
}
|
|
59
|
+
.sky-well__h a {
|
|
60
|
+
display: inline-block;
|
|
61
|
+
min-height: 24px;
|
|
62
|
+
padding: 3px 0;
|
|
63
|
+
line-height: 18px;
|
|
64
|
+
color: var(--ink-soft);
|
|
65
|
+
border-bottom: var(--line) solid var(--rule-soft);
|
|
66
|
+
}
|
|
67
|
+
.sky-well__h a:hover { color: var(--ink); border-bottom-color: var(--ink); text-decoration: none; }
|
|
68
|
+
.sky-well__note {
|
|
69
|
+
margin: 2px 0 var(--sp-hair);
|
|
70
|
+
font-size: 12px;
|
|
71
|
+
color: var(--ink-faint);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/* The well itself. `--surface-2` and not a literal black: the direction's void
|
|
75
|
+
is the DARK mode of this pack, and a page that hard-coded it would be a hole
|
|
76
|
+
in a light instance. The recessed surface is the same shape in both. */
|
|
77
|
+
.sky-field {
|
|
78
|
+
position: relative;
|
|
79
|
+
aspect-ratio: 1 / 1;
|
|
80
|
+
border-radius: 50%;
|
|
81
|
+
background: var(--surface-2);
|
|
82
|
+
/* The well's own edge. Faint, because the rings inside it are the thing
|
|
83
|
+
carrying meaning and an outer border competing with them would read as a
|
|
84
|
+
sixth criterion. */
|
|
85
|
+
box-shadow: inset 0 0 0 var(--line) var(--rule-soft);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
/* ---- the criterion rings -------------------------------------------------
|
|
89
|
+
"A goal's criteria are the rings inside its well, closing as each is
|
|
90
|
+
satisfied." Closed is a solid hairline in `--ink-faint`; open is the softer
|
|
91
|
+
rule. `--ink-faint` and not `--rule` for the closed one is the finding the
|
|
92
|
+
room's remnant glyph recorded: at the hairline's weight `--rule` measures
|
|
93
|
+
under the 3:1 non-text floor on the dark ground, and a satisfied criterion is
|
|
94
|
+
exactly the thing that must read. */
|
|
95
|
+
.sky-ring {
|
|
96
|
+
position: absolute;
|
|
97
|
+
left: 50%;
|
|
98
|
+
top: 50%;
|
|
99
|
+
width: var(--r);
|
|
100
|
+
height: var(--r);
|
|
101
|
+
transform: translate(-50%, -50%);
|
|
102
|
+
border-radius: 50%;
|
|
103
|
+
border: var(--line) dashed var(--rule-soft);
|
|
104
|
+
}
|
|
105
|
+
.sky-ring[data-closed="1"] { border-style: solid; border-color: var(--ink-faint); }
|
|
106
|
+
|
|
107
|
+
/* ---- a thought -----------------------------------------------------------
|
|
108
|
+
The BUTTON is the 24px floor and the GLYPH is the drawing. They are two
|
|
109
|
+
elements on purpose: a 9px cold body is the right mark and a 9px hit target
|
|
110
|
+
is not a control, so the target is sized for a hand and the mark for the
|
|
111
|
+
truth. Centred on its point, so `left`/`top` mean the thought's position and
|
|
112
|
+
not the corner of its box. */
|
|
113
|
+
.sky-body {
|
|
114
|
+
position: absolute;
|
|
115
|
+
transform: translate(-50%, -50%);
|
|
116
|
+
display: flex;
|
|
117
|
+
align-items: center;
|
|
118
|
+
justify-content: center;
|
|
119
|
+
width: 34px;
|
|
120
|
+
height: 34px;
|
|
121
|
+
padding: 0;
|
|
122
|
+
margin: 0;
|
|
123
|
+
border: 0;
|
|
124
|
+
border-radius: 50%;
|
|
125
|
+
background: transparent;
|
|
126
|
+
cursor: pointer;
|
|
127
|
+
}
|
|
128
|
+
/* The hover halo is mixed from the ACCENT and not from `--ink`: `--ink` is
|
|
129
|
+
#17181a in light and #ffffff in dark, so a flat wash of it over whatever is
|
|
130
|
+
behind turns white and LIFTS the field in dark instead of marking the target
|
|
131
|
+
(tests/hall_audit.mjs, "no rule washes a whole surface with a ground token" —
|
|
132
|
+
the same inversion .palette__scrim and .ov-modal-bg both had). The accent
|
|
133
|
+
does not flip, and a pressable thing warming under the pointer is the world's
|
|
134
|
+
own rule for what the accent is for. */
|
|
135
|
+
.sky-body:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
|
|
136
|
+
.sky-body:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
|
|
137
|
+
.sky-body[data-picked="1"] { box-shadow: inset 0 0 0 var(--line) var(--accent); }
|
|
138
|
+
|
|
139
|
+
/* ---- the five objects ----------------------------------------------------
|
|
140
|
+
THE MARK RESTATES THE WORD IN SHAPE. Every object differs from the others by
|
|
141
|
+
geometry — filled, haloed, orbited, hollow, hairline-edged — and not only by
|
|
142
|
+
tone, because a mark distinguished by colour alone tells a colour-blind
|
|
143
|
+
reader nothing. Same rule, same five shapes, as thinking.css.
|
|
144
|
+
|
|
145
|
+
`--lit` is the server's brightness. It rides the star's opacity and the
|
|
146
|
+
star's ALONE: the other four have no live share to show and dimming them
|
|
147
|
+
would invent one. A star whose brightness could not be READ arrives with
|
|
148
|
+
`--lit: 1` and says so in the panel's words. The 0.35 floor is a contrast
|
|
149
|
+
floor — below it the mark stops clearing 3:1 and a dim star becomes an absent
|
|
150
|
+
one, which is the wrong reading entirely. A star is never nothing. */
|
|
151
|
+
.sky-glyph {
|
|
152
|
+
display: block;
|
|
153
|
+
flex: none;
|
|
154
|
+
box-sizing: border-box;
|
|
155
|
+
width: var(--d, 10px);
|
|
156
|
+
height: var(--d, 10px);
|
|
157
|
+
border-radius: 50%;
|
|
158
|
+
background: var(--ink-faint);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
/* star — filled, accent, dimmed by its live share, sized by what it caused. */
|
|
162
|
+
.sky-glyph[data-object="star"] {
|
|
163
|
+
background: var(--accent);
|
|
164
|
+
opacity: max(0.35, var(--lit, 1));
|
|
165
|
+
}
|
|
166
|
+
/* protostar — the halo: matter gathering, not yet burning. */
|
|
167
|
+
.sky-glyph[data-object="protostar"] {
|
|
168
|
+
background: var(--ink-soft);
|
|
169
|
+
box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
|
|
170
|
+
}
|
|
171
|
+
/* satellite — a small body with an orbit detached from it, so it reads as
|
|
172
|
+
something going round rather than as a thick edge. It is drawn beside the
|
|
173
|
+
thought it was folded into (sky.js `group`), because "it orbits that one now"
|
|
174
|
+
is a claim about position that the mark alone cannot make. */
|
|
175
|
+
.sky-glyph[data-object="satellite"] {
|
|
176
|
+
background: var(--ink-soft);
|
|
177
|
+
/* `--ink-faint` and not the room's `--rule`: there the orbit sits against a
|
|
178
|
+
card at 6px across, here it is the thing that tells a reader this body
|
|
179
|
+
belongs to the one beside it, and at the hairline's weight on `--surface-2`
|
|
180
|
+
`--rule` measured under the 3:1 non-text floor. */
|
|
181
|
+
outline: var(--line) solid var(--ink-faint);
|
|
182
|
+
outline-offset: 4px;
|
|
183
|
+
}
|
|
184
|
+
/* remnant — the hollow ring, and the whole reason size and brightness are two
|
|
185
|
+
channels: a thought that caused a great deal of work the project then tore
|
|
186
|
+
out keeps every pixel of its diameter and loses all of its fill. LARGE AND
|
|
187
|
+
DEAD, never small. `--ink-faint` and not `--rule` for the 3:1 floor. */
|
|
188
|
+
.sky-glyph[data-object="remnant"] {
|
|
189
|
+
background: transparent;
|
|
190
|
+
box-shadow: inset 0 0 0 1.5px var(--ink-faint);
|
|
191
|
+
}
|
|
192
|
+
/* cold body — a dark point with a hairline edge. It never ignited, so it has no
|
|
193
|
+
size at all, and the mark says that by being the one object with nothing
|
|
194
|
+
inside it and nothing around it. */
|
|
195
|
+
.sky-glyph[data-object="cold-body"] {
|
|
196
|
+
background: var(--surface);
|
|
197
|
+
box-shadow: inset 0 0 0 var(--line) var(--ink-faint);
|
|
198
|
+
}
|
|
199
|
+
/* A size that could not be READ is drawn at the floor diameter and marked, so
|
|
200
|
+
the floor is never read as a measured zero. Dotted, the sheet's existing
|
|
201
|
+
"this is a footnote, not a warning" weight. */
|
|
202
|
+
.sky-glyph[data-size="unknown"] { outline: var(--line) dotted var(--rule); outline-offset: 3px; }
|
|
203
|
+
|
|
204
|
+
/* ---- the panel ----------------------------------------------------------- */
|
|
205
|
+
.sky-panel {
|
|
206
|
+
border-left: var(--line) solid var(--rule-soft);
|
|
207
|
+
padding-left: var(--sp-md);
|
|
208
|
+
min-width: 0;
|
|
209
|
+
}
|
|
210
|
+
.sky-panel__head { display: flex; align-items: center; gap: 12px; min-height: 30px; }
|
|
211
|
+
.sky-panel__object {
|
|
212
|
+
font-family: var(--label-face);
|
|
213
|
+
font-size: var(--label-size);
|
|
214
|
+
letter-spacing: var(--label-space);
|
|
215
|
+
text-transform: var(--label-case);
|
|
216
|
+
color: var(--ink-soft);
|
|
217
|
+
}
|
|
218
|
+
.sky-panel__title { margin: var(--sp-hair) 0 var(--sp-sm); font-size: 18px; line-height: 1.3; }
|
|
219
|
+
.sky-panel__title a {
|
|
220
|
+
display: inline-block;
|
|
221
|
+
min-height: 24px;
|
|
222
|
+
padding: 2px 0;
|
|
223
|
+
color: var(--ink);
|
|
224
|
+
border-bottom: var(--line) solid var(--rule);
|
|
225
|
+
}
|
|
226
|
+
.sky-panel__title a:hover { border-bottom-color: var(--ink); text-decoration: none; }
|
|
227
|
+
.sky-panel__pos { margin: var(--sp-sm) 0 0; font-size: 13px; color: var(--accent-ink); }
|
|
228
|
+
.sky-panel__blurb { margin: var(--sp-hair) 0 var(--sp-md); font-size: 13px; color: var(--ink-faint); }
|
|
229
|
+
.sky-panel__out { margin: 0; }
|
|
230
|
+
.sky-pick { margin: 0; font-size: 13.5px; color: var(--ink-faint); max-width: var(--measure); }
|
|
231
|
+
/* The shell's prose-link recipe, restated for this page's two prose voices
|
|
232
|
+
rather than added to `style.css`'s selector list: that sheet is linked with a
|
|
233
|
+
hand-written `?v=` on all 29 hall pages, so a one-selector addition there is a
|
|
234
|
+
29-file cache bump for a rule only this page needs. Measured at 81x18 by the
|
|
235
|
+
kit before this existed — a link in a line with no vertical rhythm of its own
|
|
236
|
+
renders at its line box and fails the 24px floor on the height; the padding
|
|
237
|
+
buys it back and the equal negative margin hands the space to the layout so
|
|
238
|
+
the sentence does not re-space. */
|
|
239
|
+
.sky-pick a,
|
|
240
|
+
.sky-empty a {
|
|
241
|
+
display: inline-block;
|
|
242
|
+
min-width: 24px;
|
|
243
|
+
min-height: 24px;
|
|
244
|
+
padding: 3px 4px;
|
|
245
|
+
margin: 0 -4px;
|
|
246
|
+
line-height: 18px;
|
|
247
|
+
text-align: center;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
.sky-facts { display: grid; }
|
|
251
|
+
.sky-fact {
|
|
252
|
+
display: flex;
|
|
253
|
+
align-items: baseline;
|
|
254
|
+
gap: 14px;
|
|
255
|
+
padding: 10px 0;
|
|
256
|
+
border-top: var(--line) solid var(--rule-soft);
|
|
257
|
+
}
|
|
258
|
+
.sky-fact:last-child { border-bottom: var(--line) solid var(--rule-soft); }
|
|
259
|
+
.sky-fact__k {
|
|
260
|
+
flex: none;
|
|
261
|
+
font-family: var(--label-face);
|
|
262
|
+
font-size: var(--label-size);
|
|
263
|
+
letter-spacing: var(--label-space);
|
|
264
|
+
text-transform: var(--label-case);
|
|
265
|
+
color: var(--ink-faint);
|
|
266
|
+
}
|
|
267
|
+
.sky-fact__v {
|
|
268
|
+
margin-left: auto;
|
|
269
|
+
text-align: right;
|
|
270
|
+
font-size: 13.5px;
|
|
271
|
+
color: var(--ink-soft);
|
|
272
|
+
min-width: 0;
|
|
273
|
+
display: flex;
|
|
274
|
+
align-items: center;
|
|
275
|
+
justify-content: flex-end;
|
|
276
|
+
flex-wrap: wrap;
|
|
277
|
+
gap: 8px;
|
|
278
|
+
}
|
|
279
|
+
.sky-fact__v a {
|
|
280
|
+
display: inline-block;
|
|
281
|
+
min-height: 24px;
|
|
282
|
+
padding: 2px 0;
|
|
283
|
+
color: var(--ink-soft);
|
|
284
|
+
border-bottom: var(--line) solid var(--rule-soft);
|
|
285
|
+
}
|
|
286
|
+
.sky-fact__v a:hover { color: var(--ink); border-bottom-color: var(--ink); text-decoration: none; }
|
|
287
|
+
.sky-quiet { color: var(--ink-faint); }
|
|
288
|
+
.sky-brightword { font-size: 13px; color: var(--ink-soft); }
|
|
289
|
+
/* Bar and word together, never the bar alone — and no bar at all when the share
|
|
290
|
+
could not be read (sky.js brightHtml), because a bar at zero and a bar nobody
|
|
291
|
+
could measure look identical and one of them is a claim. */
|
|
292
|
+
.sky-bar {
|
|
293
|
+
display: block;
|
|
294
|
+
flex: none;
|
|
295
|
+
width: 56px;
|
|
296
|
+
height: 3px;
|
|
297
|
+
border-radius: 999px;
|
|
298
|
+
background:
|
|
299
|
+
linear-gradient(to right, var(--fill, var(--accent)) 0 var(--w, 0%), transparent var(--w, 0%) 100%),
|
|
300
|
+
var(--rule-soft);
|
|
301
|
+
}
|
|
302
|
+
.sky-bar[data-lit="out"] { --fill: var(--ink-faint); }
|
|
303
|
+
.sky-hist {
|
|
304
|
+
font-size: 11.5px;
|
|
305
|
+
color: var(--ink-faint);
|
|
306
|
+
text-decoration: none;
|
|
307
|
+
border-bottom: var(--line) dotted var(--rule);
|
|
308
|
+
cursor: help;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
/* ---- the legend ---------------------------------------------------------- */
|
|
312
|
+
.sky-legend {
|
|
313
|
+
display: grid;
|
|
314
|
+
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
|
|
315
|
+
gap: var(--sp-sm) var(--sp-md);
|
|
316
|
+
margin: var(--sp-md) 0 0;
|
|
317
|
+
padding-top: var(--sp-md);
|
|
318
|
+
border-top: var(--line) solid var(--rule-soft);
|
|
319
|
+
}
|
|
320
|
+
.sky-leg { display: flex; align-items: flex-start; gap: 11px; }
|
|
321
|
+
.sky-leg .sky-glyph { margin-top: 4px; }
|
|
322
|
+
.sky-leg__body { display: grid; gap: 4px; min-width: 0; }
|
|
323
|
+
.sky-leg__name {
|
|
324
|
+
font-family: var(--label-face);
|
|
325
|
+
font-size: var(--label-size);
|
|
326
|
+
letter-spacing: var(--label-space);
|
|
327
|
+
text-transform: var(--label-case);
|
|
328
|
+
color: var(--ink-soft);
|
|
329
|
+
}
|
|
330
|
+
.sky-leg__what { font-size: 12.5px; line-height: 1.4; color: var(--ink-faint); }
|
|
331
|
+
|
|
332
|
+
/* ---- notes + the empty state --------------------------------------------- */
|
|
333
|
+
.sky-empty {
|
|
334
|
+
margin: 0;
|
|
335
|
+
padding: var(--sp-md) 0;
|
|
336
|
+
font-size: 14px;
|
|
337
|
+
color: var(--ink-soft);
|
|
338
|
+
max-width: var(--measure);
|
|
339
|
+
}
|
|
340
|
+
.sky-foot {
|
|
341
|
+
margin: var(--sp-md) 0 0;
|
|
342
|
+
font-size: 13px;
|
|
343
|
+
color: var(--ink-faint);
|
|
344
|
+
max-width: var(--measure);
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
/* ---- the phone -----------------------------------------------------------
|
|
348
|
+
The panel goes under the field and loses its rule-and-indent, because a
|
|
349
|
+
320px column has no width to give to a 22px gutter. Nothing below widens the
|
|
350
|
+
document: the page never scrolls sideways. */
|
|
351
|
+
@media (max-width: 860px) {
|
|
352
|
+
.sky-wrap { grid-template-columns: minmax(0, 1fr); }
|
|
353
|
+
.sky-panel {
|
|
354
|
+
border-left: 0;
|
|
355
|
+
padding-left: 0;
|
|
356
|
+
border-top: var(--line) solid var(--rule-soft);
|
|
357
|
+
padding-top: var(--sp-md);
|
|
358
|
+
}
|
|
359
|
+
}
|
|
360
|
+
@media (max-width: 640px) {
|
|
361
|
+
/* One well to a row, and capped so a single well does not become a
|
|
362
|
+
full-width circle taller than the viewport. */
|
|
363
|
+
.sky-field-grid { grid-template-columns: minmax(0, 1fr); }
|
|
364
|
+
.sky-field { max-width: 300px; }
|
|
365
|
+
}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
+
<title>Your sky — {{worldName}}</title>
|
|
7
|
+
<meta name="description" content="The ambient view of your own thinking: goals as gravity wells, criteria as the rings inside them, and every thought you filed drawn at the size of the work it caused.">
|
|
8
|
+
<link rel="icon" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><text x='16' y='24' font-size='24' text-anchor='middle' font-family='sans-serif'>⌂</text></svg>">
|
|
9
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
10
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
11
|
+
<link rel="stylesheet" href="/builders/style.css?v=2026-07-02-shell1">
|
|
12
|
+
<link rel="stylesheet" href="/builders/sky.css">
|
|
13
|
+
</head>
|
|
14
|
+
<!-- THE SKY (task 1004105 / BV2.R26). It is the ambient half of the ideator
|
|
15
|
+
surface and, by spec decision 11, NEVER the only path to anything it shows:
|
|
16
|
+
it takes no nav slot of its own and is reached from the room, which is the
|
|
17
|
+
page it is ambient ABOUT. That is deliberate rather than a saving — a third
|
|
18
|
+
ideator entry in the nav beside Ideas and Your thinking would make the
|
|
19
|
+
picture look load-bearing, and the direction's first refusal is that it is
|
|
20
|
+
not. The room links here; every thought here links back to its record. -->
|
|
21
|
+
<body data-page="sky" data-page-title="Your sky">
|
|
22
|
+
|
|
23
|
+
<div class="app">
|
|
24
|
+
<aside class="app-sidebar" id="app-sidebar" aria-label="Primary"></aside>
|
|
25
|
+
<div class="app-scrim" id="app-scrim" hidden></div>
|
|
26
|
+
<div class="app-body">
|
|
27
|
+
<header class="app-topbar" id="app-topbar"></header>
|
|
28
|
+
<div class="app-content">
|
|
29
|
+
<!-- The LABEL voice: a working surface takes the board's head, not the
|
|
30
|
+
reading room's (modules/hall-ui/CLAUDE.md, the two page-head voices).
|
|
31
|
+
The sky is a working surface even though it is the ambient one. -->
|
|
32
|
+
<div class="page-head page-head--board">
|
|
33
|
+
<h1 class="page-head__h">Your sky</h1>
|
|
34
|
+
<p class="page-head__sub" id="sky-sub">Drawing what you filed…</p>
|
|
35
|
+
</div>
|
|
36
|
+
|
|
37
|
+
<main id="hall-main">
|
|
38
|
+
<section class="scroll" id="sky-scroll" aria-labelledby="sky-h">
|
|
39
|
+
<h2 id="sky-h" class="scroll__h">Your thinking, as a map</h2>
|
|
40
|
+
<p class="scroll__lede">
|
|
41
|
+
Open goals are gravity wells and their criteria are the rings inside them,
|
|
42
|
+
closing as each is met. A thought sits in the well that caught it, drawn at
|
|
43
|
+
the size of the work it caused, lit by how much of that work is still alive.
|
|
44
|
+
Nothing here is only here — the same trail is a list in
|
|
45
|
+
<a href="/builders/thinking">your thinking</a>.
|
|
46
|
+
</p>
|
|
47
|
+
|
|
48
|
+
<div class="sky-wrap">
|
|
49
|
+
<!-- The field and the panel are both written by sky.js from ONE
|
|
50
|
+
read, so nothing on this page can be a second copy of a number
|
|
51
|
+
the server already computed. -->
|
|
52
|
+
<div id="sky-map" class="sky-field-grid"></div>
|
|
53
|
+
<aside id="sky-panel" class="sky-panel" role="status" aria-live="polite" aria-label="The picked thought"></aside>
|
|
54
|
+
</div>
|
|
55
|
+
|
|
56
|
+
<div id="sky-legend" class="sky-legend"></div>
|
|
57
|
+
<p class="sky-foot" id="sky-foot" hidden></p>
|
|
58
|
+
</section>
|
|
59
|
+
</main>
|
|
60
|
+
|
|
61
|
+
<footer class="app-foot" id="app-foot"></footer>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
|
|
66
|
+
<div id="toast" class="toast" role="status" aria-live="polite" data-visible="0"></div>
|
|
67
|
+
|
|
68
|
+
<script src="/builders/shell.js?v=2026-09-20-room1"></script>
|
|
69
|
+
<script src="/builders/palette.js" defer></script>
|
|
70
|
+
<script src="/builders/dom-utils.js?v=2026-06-23-contrib"></script>
|
|
71
|
+
<!-- The SAME shared vocabulary the room loads, at the same version: the server
|
|
72
|
+
says which of the five objects a thought is, this file says what the object
|
|
73
|
+
is called and what sentence goes with it, and two surfaces reading two
|
|
74
|
+
copies is exactly how the sky ends up calling a thought "burned out" while
|
|
75
|
+
the room beside it says "declined". -->
|
|
76
|
+
<script src="/builders/idea-objects.js?v=2026-09-20-r03"></script>
|
|
77
|
+
<script src="/builders/sky.js?v=2026-09-20-r26"></script>
|
|
78
|
+
</body>
|
|
79
|
+
</html>
|