prolog-notebook 0.1.2 → 0.3.1

package/src/notebook.css

@@ -51,6 +51,9 @@ code { font: .92em ui-monospace, "SF Mono", Menlo, monospace; background: var(--
 .cell .bar {
   display: flex;
   align-items: center;
+  /* Wraps rather than overflows: the tick is a sentence when something is wrong
+     ("program changed since this ran") and a narrow column must not clip it. */
+  flex-wrap: wrap;
   gap: .6rem;
   padding: .45rem .7rem;
   background: var(--code-bg);
@@ -96,7 +99,21 @@ button:disabled { opacity: .38; cursor: default; }
 button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
 button.primary:hover { background: #98380f; }
 
-.status { font: 400 .74rem/1 system-ui, sans-serif; text-transform: none; letter-spacing: 0; }
+/* A standing property of the cell, not a passing state — so it sits apart from
+   the tick, which is about what just happened. Marks the one cell whose state a
+   re-consult does not undo (format §8). */
+.badge {
+  font: 700 .62rem/1 system-ui, sans-serif;
+  letter-spacing: .1em;
+  text-transform: uppercase;
+  padding: .22rem .5rem;
+  border-radius: 999px;
+  border: 1px solid currentColor;
+  opacity: .75;
+}
+.badge.stateful { color: #a8730f; }
+
+.status { font: 400 .74rem/1.3 system-ui, sans-serif; text-transform: none; letter-spacing: 0; text-align: right; }
 .status.ok { color: var(--ok); }
 .status.err { color: var(--err); }
 .status.busy { color: #8a8371; }
@@ -114,10 +131,295 @@ button.primary:hover { background: #98380f; }
 }
 .out:empty { display: none; }
 .line.echo { color: #8a8371; }
+/* Attribution. An output is never shown without saying whose it is
+   (docs/modes.md §3), so this line is structural rather than decorative. */
+.line.from {
+  color: #8a8371;
+  font: 600 .74rem/1.6 system-ui, sans-serif;
+  letter-spacing: .06em;
+  text-transform: uppercase;
+}
+/* Saved answers that no longer follow from the program above them. Marked, never
+   silently dropped and never silently trusted. */
+.line.warn { color: #a8730f; }
+/* Put away, never discarded: a chapter shows its answers (docs/modes.md §2), but
+   prose that says "press Run, then ; next to walk through the rest" is arguing
+   with a page that has already printed all six. The attribution line stays
+   visible while they are hidden, so the reader can always see that they exist. */
+.out.answers-hidden .line:not(.from) { display: none; }
+.line.from button.peek {
+  display: inline-flex;
+  align-items: center;
+  gap: .3rem;
+  vertical-align: -.15em;
+  margin-left: .6rem;
+  padding: .16rem .55rem .16rem .45rem;
+  border-radius: 999px;
+  font: 600 .68rem/1.4 system-ui, sans-serif;
+  letter-spacing: .06em;
+  text-transform: uppercase;
+  vertical-align: baseline;
+}
 .line.sol { color: var(--ok); }
 .line.done { color: #8a8371; font-style: italic; }
+/* "more solutions may follow." must never be mistaken for "no more solutions." at
+   a glance, so the sequence is marked as continuing rather than closed. This is
+   also where the cold-page `; next` affordance will attach (869ectt0y). */
+.line.done.partial::before { content: '\22EE  '; opacity: .7; }
 .line.err { color: var(--err); }
 
+/* The page's own controls. Chrome, not content: built by notebook.js at runtime,
+   so a printed or GitHub-rendered chapter never shows a button that cannot work.
+
+   A LOZENGE, AND A CARD THAT RISES OUT OF IT. Closed, it is a dot and a word in
+   the corner of the viewport. Clicking it raises a card immediately above it —
+   right edges aligned, so the thing the reader pressed is visibly the thing that
+   opened — with one row per thing the page controls.
+
+   IT MOVES; IT DOES NOT MEASURE. The first version was one pill that WIDENED,
+   which meant JavaScript had to measure its contents on every state change, since
+   CSS cannot transition to `auto`. Any re-render landing mid-animation then
+   snapped it to its final width — and export's "has anything changed?" listener
+   did exactly that on the next frame after every click, including the click that
+   opened it. A transform needs no measuring, cannot be cancelled by a re-render,
+   and stays on the compositor. The bug class goes away rather than being patched.
+
+   Rows also mean the next unit costs vertical space, which nobody is short of.
+   The widening pill had reached the edge of the viewport with three.
+
+   Fixed to the VIEWPORT rather than sticky inside the column, because the column
+   is where the prose is, and a control floating over the sentence being read is
+   worse than one that is hard to find. */
+.page-controls {
+  position: fixed;
+  right: 1rem;
+  bottom: 1rem;
+  z-index: 5;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.page-controls .panel {
+  position: absolute;
+  right: 0;
+  bottom: 100%;
+  margin-bottom: .5rem;
+  /* TWO COLUMNS, AND A WIDTH THAT DOES NOT MOVE. Every button sits in the second
+     column, so they are all as wide as the widest of them — and because the card
+     itself is a fixed width, nothing shifts when a label changes under the
+     reader's cursor. Sized by content, it twitched on every click: "Hide saved
+     answers" and "Show saved answers" are not the same length, and neither are
+     "Start engine" and "Restart engine". */
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  width: 25rem;
+  max-width: calc(100vw - 2rem);
+  padding: .1rem .9rem;
+  border: 1px solid var(--rule);
+  border-radius: 14px;
+  background: var(--paper);
+  box-shadow: 0 6px 24px rgba(0, 0, 0, .14);
+  /* HIDDEN, not merely transparent. An opacity of 0 leaves a button clickable,
+     and this card lies over the page: invisible things must not be touchable, and
+     visibility says so in a way opacity does not. */
+  visibility: hidden;
+  opacity: 0;
+  transform: translateY(.7rem);
+  /* The fade is quicker than the rise, so it is already legible while it is still
+     arriving rather than sliding into place as a blank rectangle. */
+  transition: opacity .18s ease, transform .28s cubic-bezier(.32, .72, 0, 1), visibility .28s;
+}
+.page-controls[data-open="true"] .panel {
+  visibility: visible;
+  opacity: 1;
+  transform: none;
+}
+
+/* One row per thing the page controls: what is true, then the button that changes
+   it. Ruled rather than merely spaced, because two state phrases in a column
+   otherwise read as one paragraph. */
+/* The unit is a grouping, not a box: its two children join the card's own grid so
+   that every state phrase and every button line up down the card. */
+.page-controls .unit { display: contents; }
+/* HIDDEN MEANS HIDDEN. The `hidden` attribute is only a UA rule — `[hidden] {
+   display: none }` — so ANY display declaration of ours outranks it and the
+   element stays on screen. That is how the version picker came to sit next to
+   the phrase it replaces, both visible at once, and it is the same principle
+   already written into the panel's own fade: invisible things must not be
+   touchable, and something told to hide must actually go. */
+.page-controls [hidden] { display: none !important; }
+
+/* The one row whose state is a CHOICE. A native select, because it works on a
+   touch screen and from a keyboard without anything being written here — but
+   stripped of its chrome, so a card of quiet phrases does not suddenly grow a
+   form control. The chevron is the same glyph the lozenge uses. */
+.page-controls .picker {
+  display: inline-flex;
+  align-items: center;
+  gap: .1rem;
+}
+.page-controls .picker select {
+  appearance: none;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+.page-controls .picker svg {
+  width: .7rem;
+  height: .7rem;
+  /* The glyph is a "<": 270° points it down, which is the direction this one
+     opens. The lozenge's own chevron uses 90° because its panel rises. */
+  transform: rotate(270deg);
+  opacity: .7;
+}
+.page-controls .picker:hover { color: var(--ink); }
+.page-controls .unit > .state { padding: .6rem 1.4rem .6rem 0; }
+.page-controls .unit + .unit > * { border-top: 1px solid var(--rule); }
+
+/* WHAT THIS IS, not what it is doing. It spans both columns because it has no
+   button to line up with: every row above is a state and its verb, and this is
+   neither. Quieter than the states above it, and not selectable-looking — it is
+   a colophon, and a reader should be able to ignore it at a glance. */
+.page-controls .about {
+  grid-column: 1 / -1;
+  margin: 0;
+  padding: .55rem 0 .6rem;
+  border-top: 1px solid var(--rule);
+  font: 400 .66rem/1.5 system-ui, sans-serif;
+  color: #a49c88;
+  /* The banner is one long sentence in a narrow card. Balanced rather than left
+     to strand "License." on a line of its own; ignored where unsupported. */
+  text-wrap: pretty;
+}
+/* Two lines: what is running, then who owns it. Each is short enough not to wrap
+   at this width, which is why the split is by MEANING rather than by shrinking
+   the type until the sentence fits. */
+.page-controls .about > span { display: block; }
+/* Inline, because it belongs to the sentence above it rather than to a line of
+   its own — and absent until the engine has been asked, which cannot happen
+   until it is running. */
+.page-controls .about .engine-version { display: inline; }
+
+/* Free to wrap, now that there is a column to wrap in. The widening pill had to
+   ellipsise this sentence to keep the buttons on screen; a row has the width it
+   needs and the card grows downward instead. */
+.page-controls .state {
+  min-width: 0;
+  font: 400 .74rem/1.4 system-ui, sans-serif;
+  color: #8a8371;
+}
+
+.page-controls .handle {
+  display: flex;
+  align-items: center;
+  gap: .45rem;
+  flex: 0 0 auto;
+  padding: .42rem .75rem;
+  border: 1px solid var(--rule);
+  border-radius: 999px;
+  background: var(--paper);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, .09);
+  font: 600 .7rem/1 system-ui, sans-serif;
+  letter-spacing: .04em;
+  color: #8a8371;
+  white-space: nowrap;
+  transition: box-shadow .3s ease;
+}
+/* Lifted a little while open, so the pair reads as being in front of the page
+   rather than printed on it. */
+.page-controls[data-open="true"] .handle { box-shadow: 0 5px 22px rgba(0, 0, 0, .14); }
+.page-controls .handle:hover:not(:disabled) { background: var(--code-bg); }
+/* A LIGHT, NOT AN ICON — and the distinction is the whole vocabulary. Every glyph
+   in a button here depicts that button's verb; this one thing depicts a state, so
+   it is deliberately not drawn as a symbol. Grey for no engine, amber while one is
+   arriving, green once it is running: readable without being read. */
+.page-controls .handle .dot {
+  width: .48rem;
+  height: .48rem;
+  flex: 0 0 auto;
+  border-radius: 50%;
+  background: #c8c1ae;
+  transition: background .3s ease;
+}
+.page-controls.live .handle .dot { background: var(--ok); }
+.page-controls.busy .handle .dot {
+  background: #d09a2c;
+  animation: engine-pulse 1.1s ease-in-out infinite;
+}
+@keyframes engine-pulse {
+  50% { opacity: .3; }
+}
+
+/* The lozenge's own verb: it opens the panel, and it points the way the panel
+   goes — up to raise it, down to put it away. Rotated, not swapped for a
+   different glyph, so the turn itself reads as the state changing. The drawn
+   chevron points left, so up is a quarter turn from where it starts. */
+.page-controls .chev {
+  display: inline-flex;
+  flex: 0 0 auto;
+  margin-left: .1rem;
+  opacity: .55;
+  transform: rotate(90deg);
+  transition: transform .3s cubic-bezier(.32, .72, 0, 1);
+}
+.page-controls[data-open="true"] .chev { transform: rotate(270deg); }
+
+.page-controls .panel button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: .38rem;
+  /* Fills its column, so all three are one width. */
+  width: 100%;
+  margin: .6rem 0;
+  padding: .4rem .8rem;
+  border-radius: 999px;
+  border-color: transparent;
+  background: var(--code-bg);
+}
+/* THREE PEERS, ONE WEIGHT. Download was filled with the accent, on the argument
+   that the reader's copy is the point of export. That held while the panel was a
+   row of units; as three rows it reads as though the other two were lesser
+   versions of it — and hiding the answers or restarting the engine is what a
+   reader reaches for far more often.
+
+   The accent belongs to Run and Consult, which are the actions the CHAPTER is
+   about. A control in the corner shouting at the same volume is a tool insisting
+   on itself, which is the thing this panel was shaped to avoid. */
+/* Line icons, inherited colour, sized in ems so they follow the label rather than
+   the page. Decoration for the eye and a second reading for everyone else — the
+   words are always there too. */
+.page-controls .icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  opacity: .75;
+}
+.page-controls svg,
+.line.from .icon svg {
+  width: 1.05em;
+  height: 1.05em;
+}
+.line.from .icon { display: inline-flex; opacity: .8; }
+.page-controls .panel button:hover:not(:disabled) { background: #ebe5d5; }
+
+/* A phone has no corner to spare: the card takes the width of the screen rather
+   than a column of it, and the lozenge stays where it was. */
+@media (max-width: 30rem) {
+  .page-controls { left: 1rem; }
+  .page-controls .panel { left: 0; width: auto; max-width: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .page-controls .panel, .page-controls .handle, .page-controls .chev { transition: none; }
+  .page-controls .panel { transform: none; }
+  /* The amber still says "busy"; only the blinking goes. */
+  .page-controls.busy .handle .dot { animation: none; }
+}
+
 /* --- teaching devices --- */
 
 .predict {
@@ -156,6 +458,12 @@ button.primary:hover { background: #98380f; }
 }
 .aside strong { display: block; margin-bottom: .3rem; }
 
+/* Generated containers wrap their prose in <p>, which the hand-written markup did
+   not. Without this the last paragraph adds a trailing 1rem inside every box. */
+.aside p:last-child,
+.predict > p:last-child,
+.bullets p:last-child { margin-bottom: 0; }
+
 .note {
   font-family: var(--hand);
   font-size: 1.12rem;
@@ -176,11 +484,21 @@ button.primary:hover { background: #98380f; }
   }
   .cell, textarea, input { background: #1c1b22; }
   .out { background: #1a191f; }
+  .line.warn, .status.warn, .badge.stateful { color: #d9a441; }
+  /* A prediction box is where the reader writes, so it must not be the one white
+     rectangle on a dark page. */
+  .predict textarea { background: #1c1b22; }
   .predict { background: #201e19; border-color: #5a4f36; }
   .aside { background: #201d1c; }
   button { background: #24232b; border-color: #454150; color: var(--ink); }
   button:hover:not(:disabled) { background: #2d2b35; }
   button.primary { background: var(--accent); color: #16151a; }
+  /* A shadow is invisible on a dark page, so the pill leans on its edge instead. */
+  .page-controls .panel,
+  .page-controls .handle { background: #1c1b22; border-color: #4b4656; box-shadow: none; }
+  .page-controls .handle:hover:not(:disabled) { background: #2d2b35; }
+  .page-controls .panel button { background: #2a2833; }
+  .page-controls .panel button:hover:not(:disabled) { background: #35323f; }
 }
 
 /* Shown until mount() runs; see notebook.js. Its presence means the page is inert. */