hyperbook 0.99.0 → 0.100.0

package/dist/assets/directive-pyide/style.css

@@ -50,6 +50,132 @@
   font-family: hyperbook-monospace, monospace;
 }
 
+/* Prompt bar, shown while the script waits for input. Styled as its own
+   console-like strip below the output/canvas panel so it reads as "the program
+   is waiting for you" rather than as part of the page chrome. */
+.directive-pyide .stdin {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 10px;
+  flex: 0 0 auto;
+  margin-top: 8px;
+  padding: 10px 12px;
+  border: 1px solid var(--color-brand);
+  border-radius: 8px;
+  background-color: color-mix(in srgb, var(--color-brand) 7%, transparent);
+}
+
+.directive-pyide .stdin.hidden {
+  display: none;
+}
+
+/* Blinking caret marks the waiting state without needing extra markup. */
+.directive-pyide .stdin::before {
+  content: "❯";
+  flex: 0 0 auto;
+  font-family: hyperbook-monospace, monospace;
+  font-weight: 700;
+  line-height: 1;
+  color: var(--color-brand);
+  animation: pyide-stdin-caret 1.4s ease-in-out infinite;
+}
+
+@keyframes pyide-stdin-caret {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.3;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .directive-pyide .stdin::before {
+    animation: none;
+  }
+}
+
+.directive-pyide .stdin .stdin-prompt {
+  flex: 0 1 auto;
+  min-width: 0;
+  font-family: hyperbook-monospace, monospace;
+  color: var(--color-text);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.directive-pyide .stdin .stdin-prompt:empty {
+  display: none;
+}
+
+/* Grows to fill the row, and wraps to its own line when the prompt is long. */
+.directive-pyide .stdin .stdin-field {
+  flex: 1 1 160px;
+  min-width: 0;
+  padding: 8px 12px;
+  border: 1px solid var(--color-spacer);
+  border-radius: 6px;
+  font-family: hyperbook-monospace, monospace;
+  font-size: 1em;
+  line-height: 1.4;
+  background-color: var(--color-background);
+  color: var(--color-text);
+}
+
+.directive-pyide .stdin .stdin-field:focus {
+  outline: none;
+  border-color: var(--color-brand);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 25%, transparent);
+}
+
+/* Overrides the shared .directive-pyide button reset, which is borderless and
+   full-width for the tab/toolbar groups.
+
+   The fill is a tint of the brand mixed into --color-background rather than
+   flat --color-brand, and the label is always --color-text. That keeps the
+   contrast guaranteed by the theme's own background/text pairing in both
+   colour schemes: --color-brand-text is only defined for light mode, and
+   --color-brand-dark falls back to --color-brand, so neither can be relied on
+   to stay legible against a brand fill. */
+.directive-pyide .stdin .stdin-submit {
+  flex: 0 0 auto;
+  padding: 8px 18px;
+  border: 1px solid var(--color-brand);
+  border-radius: 6px;
+  background-color: color-mix(
+    in srgb,
+    var(--color-brand) 18%,
+    var(--color-background)
+  );
+  color: var(--color-text);
+  font-weight: 600;
+  line-height: 1.4;
+  cursor: pointer;
+}
+
+.directive-pyide .stdin .stdin-submit:hover {
+  background-color: color-mix(
+    in srgb,
+    var(--color-brand) 32%,
+    var(--color-background)
+  );
+}
+
+.directive-pyide .stdin .stdin-submit:active {
+  background-color: color-mix(
+    in srgb,
+    var(--color-brand) 45%,
+    var(--color-background)
+  );
+}
+
+.directive-pyide .stdin .stdin-submit:focus-visible {
+  outline: 2px solid var(--color-text);
+  outline-offset: 2px;
+}
+
 .directive-pyide .output .error-line {
   color: #b42318;
 }
@@ -128,7 +254,11 @@
     linear-gradient(45deg, transparent 75%, #cccccc 75%),
     linear-gradient(-45deg, transparent 75%, #cccccc 75%);
   background-size: 20px 20px;
-  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+  background-position:
+    0 0,
+    0 10px,
+    10px -10px,
+    -10px 0px;
 }
 
 .directive-pyide .canvas {
@@ -247,6 +377,31 @@
   border-top-right-radius: 0;
 }
 
+/* Icon-only toolbar: the written labels (Reset/Copy/Download) made this row
+   wrap on narrow screens, so the wording moved into title/aria-label. */
+.directive-pyide .buttons.bottom button {
+  flex: 0 0 auto;
+  min-width: 42px;
+  width: 42px;
+  padding: 8px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.directive-pyide .buttons.bottom button .icon {
+  width: 18px;
+  height: 18px;
+  display: block;
+}
+
+/* Fullscreen sits apart, at the trailing edge of the toolbar. */
+.directive-pyide .buttons.bottom button.fullscreen {
+  margin-inline-start: auto;
+  border-right: none;
+  border-left: 1px solid var(--color-spacer);
+}
+
 .directive-pyide .test-heading {
   font-size: 1.1em;
   font-weight: bold;
@@ -375,7 +530,8 @@
     border-top-right-radius: 0;
   }
 
-  .directive-pyide[data-canvas="true"].canvas-split-mode .canvas-output-splitter {
+  .directive-pyide[data-canvas="true"].canvas-split-mode
+    .canvas-output-splitter {
     display: block;
   }
 }

package/dist/assets/directive-typst/style.css

@@ -343,8 +343,14 @@ code-input {
 
 .directive-typst .binary-files-section summary .summary-indicator {
   transition: transform 0.2s;
-  display: inline-block;
-  font-size: 0.75rem;
+  display: inline-flex;
+  align-items: center;
+}
+
+.directive-typst .binary-files-section summary .summary-indicator .icon {
+  width: 14px;
+  height: 14px;
+  display: block;
 }
 
 .directive-typst .binary-files-section[open] summary .summary-indicator {
@@ -484,6 +490,19 @@ code-input {
   padding: 8px 0;
 }
 
+.directive-typst button.fullscreen .icon {
+  width: 18px;
+  height: 18px;
+  display: block;
+  margin: 0 auto;
+}
+
+.directive-typst .add-source-file .icon {
+  width: 16px;
+  height: 16px;
+  display: block;
+}
+
 .directive-typst button:hover {
   background-color: var(--color-spacer);
 }
@@ -531,3 +550,26 @@ code-input {
     }
   }
 }
+
+/* Icon-only toolbar: the written labels made this row wrap on narrow screens,
+   so the wording moved into title/aria-label. */
+.directive-typst .buttons.bottom button {
+  flex: 0 0 auto;
+  min-width: 42px;
+  width: 42px;
+  padding: 8px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.directive-typst .buttons.bottom button .icon {
+  width: 18px;
+  height: 18px;
+  display: block;
+}
+
+/* Fullscreen sits apart, at the trailing edge of the toolbar. */
+.directive-typst .buttons.bottom button.fullscreen {
+  margin-inline-start: auto;
+}

package/dist/assets/directive-webide/client.js

@@ -18,8 +18,13 @@ hyperbook.webide = (function () {
 
     const applySplitSize = (rawSize, isHorizontal) => {
       const total = isHorizontal ? elem.clientWidth : elem.clientHeight;
-      const splitterSize = isHorizontal ? splitter.offsetWidth : splitter.offsetHeight;
-      const maxSize = Math.max(minPanelSize, total - splitterSize - minPanelSize);
+      const splitterSize = isHorizontal
+        ? splitter.offsetWidth
+        : splitter.offsetHeight;
+      const maxSize = Math.max(
+        minPanelSize,
+        total - splitterSize - minPanelSize,
+      );
       const clamped = Math.max(minPanelSize, Math.min(rawSize, maxSize));
       container.style.flex = `0 0 ${clamped}px`;
       return clamped;
@@ -79,7 +84,6 @@ hyperbook.webide = (function () {
     if (!elem || !button) return;
     const isFullscreen = document.fullscreenElement === elem;
     const label = hyperbook.i18n.get("ide-fullscreen-enter");
-    button.textContent = "⛶";
     button.title = label;
     button.setAttribute("aria-label", label);
     button.classList.toggle("active", isFullscreen);
@@ -121,21 +125,39 @@ hyperbook.webide = (function () {
     const btnJS = elem.querySelector("button.js");
 
     // Initialize CodeMirror instances
-    const cmHTML = editorHTMLDiv ? (() => {
-      const src = editorHTMLDiv.textContent;
-      editorHTMLDiv.textContent = "";
-      return HyperbookCM.create(editorHTMLDiv, { lang: "html", value: src, onChange: () => update() });
-    })() : null;
-    const cmCSS = editorCSSDiv ? (() => {
-      const src = editorCSSDiv.textContent;
-      editorCSSDiv.textContent = "";
-      return HyperbookCM.create(editorCSSDiv, { lang: "css", value: src, onChange: () => update() });
-    })() : null;
-    const cmJS = editorJSDiv ? (() => {
-      const src = editorJSDiv.textContent;
-      editorJSDiv.textContent = "";
-      return HyperbookCM.create(editorJSDiv, { lang: "javascript", value: src, onChange: () => update() });
-    })() : null;
+    const cmHTML = editorHTMLDiv
+      ? (() => {
+          const src = editorHTMLDiv.textContent;
+          editorHTMLDiv.textContent = "";
+          return HyperbookCM.create(editorHTMLDiv, {
+            lang: "html",
+            value: src,
+            onChange: () => update(),
+          });
+        })()
+      : null;
+    const cmCSS = editorCSSDiv
+      ? (() => {
+          const src = editorCSSDiv.textContent;
+          editorCSSDiv.textContent = "";
+          return HyperbookCM.create(editorCSSDiv, {
+            lang: "css",
+            value: src,
+            onChange: () => update(),
+          });
+        })()
+      : null;
+    const cmJS = editorJSDiv
+      ? (() => {
+          const src = editorJSDiv.textContent;
+          editorJSDiv.textContent = "";
+          return HyperbookCM.create(editorJSDiv, {
+            lang: "javascript",
+            value: src,
+            onChange: () => update(),
+          });
+        })()
+      : null;
 
     const frame = elem.getElementsByTagName("iframe")[0];
     const template = elem.getAttribute("data-template");

package/dist/assets/directive-webide/style.css

@@ -39,7 +39,7 @@ code-input {
   padding: 8px 16px;
   padding-left: 0px;
   overflow: hidden;
-  white-space:nowrap;
+  white-space: nowrap;
   text-overflow: ellipsis;
   background-color: var(--color-background);
   color: var(--color-text);
@@ -148,6 +148,13 @@ code-input {
   padding: 8px 0;
 }
 
+.directive-webide button.fullscreen .icon {
+  width: 18px;
+  height: 18px;
+  display: block;
+  margin: 0 auto;
+}
+
 .directive-webide button:hover {
   background-color: var(--color-spacer);
 }
@@ -186,3 +193,26 @@ code-input {
     }
   }
 }
+
+/* Icon-only toolbar: the written labels made this row wrap on narrow screens,
+   so the wording moved into title/aria-label. */
+.directive-webide .buttons.bottom button {
+  flex: 0 0 auto;
+  min-width: 42px;
+  width: 42px;
+  padding: 8px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.directive-webide .buttons.bottom button .icon {
+  width: 18px;
+  height: 18px;
+  display: block;
+}
+
+/* Fullscreen sits apart, at the trailing edge of the toolbar. */
+.directive-webide .buttons.bottom button.fullscreen {
+  margin-inline-start: auto;
+}

package/dist/assets/shell.css

@@ -140,25 +140,16 @@ header.inverted>.branding:hover {
   color: var(--color-text);
 }
 
-.section>.name.active>.label {
+/* `active` and `empty` sit on the <details>, not on the <summary>. */
+.section.active>.name>.label {
   color: var(--color-brand);
 }
 
-.section .name.empty {
-  color: var(--color-text-deactivated);
-  cursor: pointer;
-  font-style: italic;
-}
-
 .section>.name:hover {
   background: var(--color-spacer);
 }
 
-.section>.name.empty:hover {
-  background: none;
-}
-
-.section>.name.active {
+.section.active>.name {
   background: var(--color-background);
   color: var(--color-brand);
 }
@@ -698,14 +689,23 @@ nav li+li {
   text-decoration: none;
 }
 
-.section.empty summary.name {
-  cursor: default;
-}
+/* The row always toggles the section, so it always looks clickable. Only the
+   title tells the two kinds of section apart: a section without its own page
+   is set in italics and is not a link.
 
-.section.empty summary.name .label {
+   Both rules are scoped with child combinators. Sections nest, so a descendant
+   selector would style a subsection according to its parent — a subsection with
+   content sitting inside an empty section came out italic. */
+.section.empty>summary.name>.label {
   font-style: italic;
 }
 
+/* A section that has its own page: the title is a real link and behaves like
+   one, while clicking elsewhere in the row just expands the section. */
+.section:not(.empty)>summary.name>.label:hover {
+  text-decoration: underline;
+}
+
 .section summary.name:after {
   content: "\002B";
   width: 1.2rem;