@fasl-work/caos-app-shell 0.10.0 → 0.11.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/README.md +11 -2
- package/bin/caos-shell-gate.mjs +3 -1
- package/dist/chart.d.ts +19 -2
- package/dist/chart.js +50 -8
- package/dist/index.d.ts +91 -9
- package/dist/index.js +188 -71
- package/gate/areas.mjs +327 -0
- package/gate/inpage.mjs +338 -0
- package/gate/run.mjs +45 -7
- package/package.json +3 -2
- package/reserved-classes.json +18 -0
- package/styles.css +23 -3
package/styles.css
CHANGED
|
@@ -331,8 +331,9 @@ code, kbd { font-family: var(--font-mono); }
|
|
|
331
331
|
|
|
332
332
|
/* == 6 content ================================================================================================== */
|
|
333
333
|
|
|
334
|
-
/*
|
|
335
|
-
|
|
334
|
+
/* A document fills the width of its column (shell 0.11.0, CAOS_APP_SHELL#96): text blocks, grids, figure rows and
|
|
335
|
+
tables all take it. A page that reads as one prose column keeps its own max width and is centred (ADR-0017 s1);
|
|
336
|
+
only the captions keep a measure, centred under their figure. */
|
|
336
337
|
.prose { font-size: var(--text-base); }
|
|
337
338
|
.prose section { margin-block: 1.75rem; }
|
|
338
339
|
.prose h2 { font-size: var(--text-xl); margin-block: 1.4rem 0.6rem; }
|
|
@@ -340,13 +341,16 @@ code, kbd { font-family: var(--font-mono); }
|
|
|
340
341
|
.prose p { margin-block: 0.6rem; }
|
|
341
342
|
.prose ul, .prose ol { margin-block: 0.5rem; padding-left: 1.3rem; }
|
|
342
343
|
.prose li { margin-block: 0.35rem; }
|
|
343
|
-
.prose :where(p, li, blockquote, dd, .callout) { max-width: var(--measure-text); }
|
|
344
344
|
.prose :where(.equation-caption, .figure-caption, .fig-cap) { max-width: var(--measure-text); margin-inline: auto; }
|
|
345
345
|
.measure { max-width: var(--measure); }
|
|
346
346
|
.page-head { border-bottom: 1px solid var(--color-border); padding-bottom: 1rem; margin-bottom: 1.25rem; }
|
|
347
347
|
.page-head h1 { font-size: var(--text-2xl); margin: 0 0 0.4rem; }
|
|
348
348
|
.lede { color: var(--color-fg-subtle); font-size: var(--text-lg); margin: 0; max-width: var(--measure); }
|
|
349
349
|
.caos-doc-section { margin-block: 1.75rem; }
|
|
350
|
+
/* The references of a page or open tab: one block at its end (ADR-0017 s4). */
|
|
351
|
+
.caos-doc-references { margin-top: 2rem; padding-top: 0.4rem; border-top: 1px solid var(--color-border); }
|
|
352
|
+
.caos-doc-reference-list { font-size: 0.85rem; color: var(--color-fg-subtle); line-height: 1.5; padding-left: 1.4rem; }
|
|
353
|
+
.caos-doc-reference-list li { margin-block: 0.5rem; }
|
|
350
354
|
/* Wide content in a document scrolls inside its own box; the contained page never cuts it (G5). */
|
|
351
355
|
.prose table { display: block; max-width: 100%; overflow-x: auto; }
|
|
352
356
|
.prose pre { max-width: 100%; overflow-x: auto; }
|
|
@@ -387,6 +391,15 @@ code, kbd { font-family: var(--font-mono); }
|
|
|
387
391
|
/* Equations and figures. */
|
|
388
392
|
.equation { margin: 1rem 0; padding: 0.9rem 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow-x: auto; }
|
|
389
393
|
.equation-caption { margin-top: 0.5rem; font-size: 0.82rem; color: var(--color-fg-faint); text-align: center; }
|
|
394
|
+
.caos-glossary { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.4rem 1.25rem; margin: 0.75rem 0; }
|
|
395
|
+
.caos-glossary-item { display: flex; gap: 0.5rem; align-items: baseline; }
|
|
396
|
+
.caos-glossary dt { flex: none; min-width: 3rem; font-weight: 600; }
|
|
397
|
+
.caos-glossary dd { margin: 0; color: var(--color-fg); }
|
|
398
|
+
.caos-stat-value { font-variant-numeric: tabular-nums; }
|
|
399
|
+
.caos-stat-source { color: var(--color-fg-faint); font-size: var(--text-sm); }
|
|
400
|
+
.caos-qa { margin: 0.9rem 0; }
|
|
401
|
+
.caos-qa-question { font-weight: 600; margin-bottom: 0.25rem; }
|
|
402
|
+
.caos-qa-answer > :first-child { margin-top: 0; }
|
|
390
403
|
.katex { color: var(--color-fg); }
|
|
391
404
|
.figure { margin: 1.5rem 0; }
|
|
392
405
|
.figure-caption, .fig-cap { text-align: center; font-size: var(--text-sm); color: var(--color-fg-faint); margin-top: 0.6rem; font-style: italic; }
|
|
@@ -453,6 +466,9 @@ code, kbd { font-family: var(--font-mono); }
|
|
|
453
466
|
|
|
454
467
|
/* Registered controls (Knob, ChipGroup). */
|
|
455
468
|
.caos-knob { display: flex; flex-direction: column; gap: var(--space-1); }
|
|
469
|
+
/* Chromium keeps a 2 px user-agent side margin on a range input: at width 100% it reached 2 px past a clipping card
|
|
470
|
+
(a PlotCard body) and the gate's G5 failed at phone widths (CAOS_APP_SHELL#91). */
|
|
471
|
+
.caos-knob input[type='range'] { margin-inline: 0; }
|
|
456
472
|
.caos-knob-head { display: flex; justify-content: space-between; gap: var(--space-2); font-size: 0.8rem; color: var(--color-fg-subtle); }
|
|
457
473
|
.caos-knob-value { font-family: var(--font-mono); color: var(--color-fg); font-weight: 600; white-space: nowrap; }
|
|
458
474
|
.caos-chipgroup { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
|
|
@@ -581,6 +597,9 @@ svg.lucide { flex: none; }
|
|
|
581
597
|
.caos-plot-note { margin: 0.4rem 0 0; font-size: 0.78rem; color: var(--color-fg-faint); }
|
|
582
598
|
.caos-plot.fill { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
|
|
583
599
|
.caos-plot.fill > .caos-plot-body { flex: 1 1 0; min-height: 0; overflow: hidden; }
|
|
600
|
+
/* The note of a filling card keeps at most 35% of the card and scrolls beyond it, so the drawing keeps a floor
|
|
601
|
+
(CAOS_APP_SHELL#95: a long note left plots of 10 to 90 px at 1280 x 800). */
|
|
602
|
+
.caos-plot.fill > .caos-plot-note { flex: 0 1 auto; max-height: 35%; overflow-y: auto; }
|
|
584
603
|
|
|
585
604
|
/* A row of views side by side. Every view of the row takes an equal share, a filling card included (known shell
|
|
586
605
|
defect 23, #54: `.caos-plot.fill` outranked the row's zero basis and took the row). */
|
|
@@ -621,6 +640,7 @@ svg.lucide { flex: none; }
|
|
|
621
640
|
.caos-views-row { flex-direction: column; }
|
|
622
641
|
.caos-views-row > *, .caos-views-row > .caos-plot.fill { flex: none; }
|
|
623
642
|
.caos-plot.fill > .caos-plot-body { flex: none; height: clamp(260px, 48vh, 440px); }
|
|
643
|
+
.caos-plot.fill > .caos-plot-note { max-height: none; overflow-y: visible; }
|
|
624
644
|
}
|
|
625
645
|
@media (max-width: 760px) {
|
|
626
646
|
/* A phone wraps the cells instead of pushing the table past the page (found by the gate on the template). */
|