@openpresentation/opf-editor 0.29.1 → 0.31.0

package/dist/styles.css

@@ -39,6 +39,20 @@
   --opf-ui-shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.1);
   --opf-ui-ease: 120ms ease;
 
+  /* Component tokens (CE-29). The defaults derive from the tokens above, so they follow the scheme and a host's theme; set one to restyle
+     the bar, the deck title or the expanded editor's layer without touching a component. docs/styling.md says where each is read. */
+  --opf-ui-bar-bg: var(--opf-ui-surface);
+  --opf-ui-bar-fg: var(--opf-ui-fg);
+  --opf-ui-bar-border: var(--opf-ui-border);
+  --opf-ui-bar-gap: 8px;
+  --opf-ui-bar-padding: 6px 12px;
+  --opf-ui-bar-height: 0px;
+  --opf-ui-title-font: var(--opf-ui-font);
+  --opf-ui-title-size: 15px;
+  --opf-ui-title-weight: 600;
+  --opf-ui-title-fg: var(--opf-ui-fg);
+  --opf-ui-z-overlay: 1000;
+
   color-scheme: light;
 }
 
@@ -163,6 +177,330 @@
   }
 }
 
+/* deck-title.css */
+/* Deck title (CE-28). Uses only --opf-ui-* tokens. */
+.opf-title {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
+  font-family: var(--opf-ui-font);
+}
+.opf-title-input {
+  box-sizing: border-box;
+  field-sizing: content;
+  min-width: 6ch;
+  max-width: 100%;
+  height: var(--opf-ui-control-h);
+  margin: 0;
+  padding: 0 8px;
+  border: 1px solid transparent;
+  border-radius: var(--opf-ui-radius);
+  background: transparent;
+  color: var(--opf-ui-title-fg);
+  font: var(--opf-ui-title-weight) var(--opf-ui-title-size)/1.2 var(--opf-ui-title-font);
+  text-overflow: ellipsis;
+  transition: border-color var(--opf-ui-ease), background-color var(--opf-ui-ease);
+}
+.opf-title[data-density="touch"] .opf-title-input {
+  height: 40px;
+}
+.opf-title-input::placeholder {
+  color: var(--opf-ui-muted-fg);
+  font-weight: 500;
+  opacity: 1;
+}
+.opf-title-input:hover:not([readonly]) {
+  border-color: var(--opf-ui-border);
+}
+.opf-title-input:focus {
+  border-color: var(--opf-ui-ring);
+  background: var(--opf-ui-surface);
+  outline: 2px solid var(--opf-ui-ring);
+  outline-offset: 1px;
+  text-overflow: clip;
+}
+.opf-title-input[readonly] {
+  cursor: default;
+}
+.opf-title-input[readonly]:focus {
+  background: transparent;
+  border-color: transparent;
+}
+.opf-title-input[aria-disabled="true"] {
+  color: var(--opf-ui-muted-fg);
+}
+@media (prefers-reduced-motion: reduce) {
+  .opf-title-input {
+    transition: none;
+  }
+}
+
+/* design-menu.css */
+/* CE-29: the Design quick menu (src/design-menu.js). Only --opf-ui-* tokens, no color literals (test/styles.mjs). */
+.opf-design-menu,
+.opf-design-menu *,
+.opf-design-menu *::before,
+.opf-design-menu *::after { box-sizing: border-box; }
+.opf-design-menu [hidden] { display: none !important; }
+
+.opf-design-menu {
+  --opf-design-menu-row: 32px;
+  position: relative;
+  display: inline-flex;
+  font-family: var(--opf-ui-font);
+  font-size: 13px;
+  line-height: 1.4;
+  color: var(--opf-ui-fg);
+}
+.opf-design-menu[data-density="touch"] { --opf-design-menu-row: 40px; }
+:where(.opf-design-menu button) { font: inherit; color: inherit; margin: 0; }
+.opf-design-menu .opf-icon { flex: none; }
+.opf-design-menu button:focus-visible {
+  outline: 2px solid var(--opf-ui-ring);
+  outline-offset: -2px;
+}
+
+/* ---- the toolbar button ------------------------------------------------------------------------------------------------------------- */
+.opf-design-menu .opf-design-menu-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: var(--opf-ui-control-h);
+  padding: 0 10px;
+  border: 1px solid var(--opf-ui-border);
+  border-radius: var(--opf-ui-radius);
+  background: var(--opf-ui-surface);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color var(--opf-ui-ease), border-color var(--opf-ui-ease);
+}
+.opf-design-menu .opf-design-menu-trigger:hover { background: var(--opf-ui-muted-2); border-color: var(--opf-ui-border-strong); }
+.opf-design-menu .opf-design-menu-trigger[aria-expanded="true"] { background: var(--opf-ui-muted); }
+.opf-design-menu .opf-design-menu-trigger:focus-visible { outline-offset: 2px; }
+.opf-design-menu .opf-design-menu-trigger:disabled { opacity: 0.5; cursor: not-allowed; }
+.opf-design-menu[data-density="touch"] .opf-design-menu-trigger { height: max(var(--opf-ui-control-h), 40px); }
+
+/* ---- the popover ---------------------------------------------------------------------------------------------------------------------- */
+.opf-design-menu .opf-design-menu-popover {
+  position: fixed;
+  z-index: 40;
+  display: flex;
+  flex-direction: column;
+  width: 296px;
+  max-width: calc(100vw - 16px);
+  background: var(--opf-ui-surface);
+  border: 1px solid var(--opf-ui-border);
+  border-radius: var(--opf-ui-radius-md);
+  box-shadow: var(--opf-ui-shadow-pop);
+  overflow: hidden;
+}
+.opf-design-menu .opf-design-menu-handle,
+.opf-design-menu .opf-design-menu-head { display: none; }
+.opf-design-menu .opf-design-menu-menu {
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 4px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+.opf-design-menu .opf-design-menu-group + .opf-design-menu-group {
+  margin-top: 4px;
+  padding-top: 4px;
+  border-top: 1px solid var(--opf-ui-border);
+}
+.opf-design-menu .opf-design-menu-group-label {
+  padding: 6px 8px 4px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--opf-ui-muted-fg);
+}
+.opf-design-menu .opf-design-menu-list {
+  max-height: calc(var(--opf-design-menu-row) * 5.5);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+.opf-design-menu .opf-design-menu-empty { margin: 0; padding: 12px 8px; color: var(--opf-ui-muted-fg); }
+
+.opf-design-menu .opf-design-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: var(--opf-design-menu-row);
+  padding: 0 8px;
+  border: 0;
+  border-radius: var(--opf-ui-radius);
+  background: transparent;
+  text-align: start;
+  cursor: pointer;
+  transition: background-color var(--opf-ui-ease);
+}
+.opf-design-menu .opf-design-menu-item:hover { background: var(--opf-ui-muted-2); }
+.opf-design-menu .opf-design-menu-item:focus-visible { background: var(--opf-ui-muted); }
+.opf-design-menu .opf-design-menu-item[aria-checked="true"] { background: var(--opf-ui-muted); font-weight: 600; }
+.opf-design-menu .opf-design-menu-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.opf-design-menu .opf-design-menu-check { display: inline-flex; flex: none; width: 14px; color: var(--opf-ui-accent-strong); }
+.opf-design-menu .opf-design-menu-item[aria-checked="false"] .opf-design-menu-check { visibility: hidden; }
+.opf-design-menu .opf-design-menu-more {
+  margin-top: 4px;
+  border-top: 1px solid var(--opf-ui-border);
+  border-radius: 0 0 var(--opf-ui-radius) var(--opf-ui-radius);
+  color: var(--opf-ui-accent-strong);
+}
+
+.opf-design-menu .opf-design-menu-swatches { display: inline-flex; flex: none; gap: 2px; }
+.opf-design-menu .opf-design-menu-swatch {
+  width: 12px;
+  height: 12px;
+  border-radius: var(--opf-ui-radius-sm);
+  border: 1px solid var(--opf-ui-border-strong);
+}
+
+/* Screen-reader only. */
+.opf-design-menu .opf-design-menu-live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ---- the bottom sheet (a phone, or a button that is not on screen) --------------------------------------------------------------------- */
+.opf-design-menu .opf-design-menu-scrim {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background: color-mix(in srgb, var(--opf-ui-fg) 32%, transparent);
+}
+.opf-design-menu[data-mode="sheet"] .opf-design-menu-popover {
+  z-index: 51;
+  inset: auto 0 0 0;
+  width: auto;
+  max-width: 560px;
+  max-height: 85vh;
+  max-height: 85dvh;
+  margin-inline: auto;
+  padding-bottom: max(12px, env(safe-area-inset-bottom));
+  border-width: 1px 0 0;
+  border-radius: var(--opf-ui-radius-lg) var(--opf-ui-radius-lg) 0 0;
+}
+.opf-design-menu[data-mode="sheet"] .opf-design-menu-handle {
+  display: block;
+  flex: none;
+  width: 36px;
+  height: 4px;
+  margin: 8px auto 4px;
+  border-radius: 2px;
+  background: var(--opf-ui-border-strong);
+}
+.opf-design-menu[data-mode="sheet"] .opf-design-menu-head {
+  display: flex;
+  flex: none;
+  align-items: center;
+  padding: 0 8px 0 16px;
+}
+.opf-design-menu .opf-design-menu-title { font-size: 15px; font-weight: 600; }
+.opf-design-menu .opf-design-menu-close {
+  display: grid;
+  place-items: center;
+  width: 40px;
+  height: 40px;
+  margin-inline-start: auto;
+  border: 0;
+  border-radius: var(--opf-ui-radius);
+  background: transparent;
+  color: var(--opf-ui-muted-fg);
+  cursor: pointer;
+}
+.opf-design-menu .opf-design-menu-close:hover { background: var(--opf-ui-muted-2); color: var(--opf-ui-fg); }
+.opf-design-menu[data-mode="sheet"] .opf-design-menu-item { padding: 0 12px; font-size: 14px; }
+.opf-design-menu[data-mode="sheet"] .opf-design-menu-list { max-height: calc(var(--opf-design-menu-row) * 4.5); }
+
+@media (prefers-reduced-motion: reduce) {
+  .opf-design-menu *,
+  .opf-design-menu *::before,
+  .opf-design-menu *::after { transition: none !important; }
+}
+
+/* expand.css */
+/* CE-28: the expand-editor part (src/editor-expand.js). Only --opf-ui-* tokens, no color literals (test/styles.mjs). */
+
+/* ---- the expanded editor -------------------------------------------------------------------------------------------------------------- */
+/* The editor's host element becomes a fixed overlay over the viewport; it stays where it is in the DOM. !important beats the sizes a host sets
+   inline or by class on the element. A host can raise or lower the overlay with --opf-ui-z-overlay (default 1000: above page chrome, below the
+   presenter at 2000); --opf-expand-z is the older name and still wins when set. An ancestor with a transform, filter or containment would make "fixed" relative to itself; the host owns that. */
+[data-opf-expanded] {
+  position: fixed !important;
+  inset: 0 !important;
+  z-index: var(--opf-expand-z, var(--opf-ui-z-overlay)) !important;
+  box-sizing: border-box !important;
+  width: auto !important;
+  height: auto !important;
+  min-width: 0 !important;
+  min-height: 0 !important;
+  max-width: none !important;
+  max-height: none !important;
+  margin: 0 !important;
+  border-radius: 0 !important;
+  background: var(--opf-ui-bg);
+  color: var(--opf-ui-fg);
+  overscroll-behavior: contain;
+}
+/* The target takes the focus when it expands; the whole viewport must not wear a ring. */
+[data-opf-expanded]:focus,
+[data-opf-expanded]:focus-visible { outline: none; }
+
+/* ---- the button ----------------------------------------------------------------------------------------------------------------------- */
+.opf-expand-button,
+.opf-expand-button *,
+.opf-expand-button *::before,
+.opf-expand-button *::after { box-sizing: border-box; }
+.opf-expand-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--opf-ui-control-h);
+  height: var(--opf-ui-control-h);
+  margin: 0;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: var(--opf-ui-radius);
+  background: transparent;
+  color: var(--opf-ui-muted-fg);
+  font: inherit;
+  cursor: pointer;
+  transition: color var(--opf-ui-ease), background-color var(--opf-ui-ease);
+}
+.opf-expand-button[data-density="touch"] {
+  width: 40px;
+  height: 40px;
+}
+.opf-expand-button:hover { background: var(--opf-ui-muted); color: var(--opf-ui-fg); }
+.opf-expand-button[aria-pressed="true"] { color: var(--opf-ui-fg); }
+.opf-expand-button:focus-visible {
+  outline: 2px solid var(--opf-ui-ring);
+  outline-offset: 2px;
+}
+.opf-expand-button[aria-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.opf-expand-button[aria-disabled="true"]:hover { background: transparent; color: var(--opf-ui-muted-fg); }
+.opf-expand-button .opf-expand-icon { flex: none; }
+
+@media (prefers-reduced-motion: reduce) {
+  .opf-expand-button { transition: none; }
+}
+
 /* export-menu.css */
 /* RR-98: the Export menu (src/export-menu.js). Only --opf-ui-* tokens, no color literals (test/styles.mjs). */
 .opf-export,
@@ -4287,6 +4625,84 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
   .opf-present-button { transition: none; }
 }
 
+/* review-pill.css */
+/* The review pill (src/review-pill.js). Uses only --opf-ui-* tokens. State is never color alone: every state has a glyph and words. */
+.opf-review-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  box-sizing: border-box;
+  height: var(--opf-ui-control-h);
+  min-height: 0;
+  max-width: 100%;
+  padding: 0 10px;
+  border: 1px solid var(--opf-ui-border);
+  border-radius: calc(var(--opf-ui-control-h) / 2);
+  background: var(--opf-ui-surface);
+  color: var(--opf-ui-fg);
+  font: 500 12px/1 var(--opf-ui-font);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color var(--opf-ui-ease), background-color var(--opf-ui-ease), border-color var(--opf-ui-ease);
+}
+.opf-review-pill[data-density="touch"] { height: 40px; }
+.opf-review-pill:hover:not(:disabled) { background: var(--opf-ui-muted); border-color: var(--opf-ui-border-strong); }
+.opf-review-pill:focus-visible { outline: 2px solid var(--opf-ui-ring); outline-offset: 2px; }
+.opf-review-pill:disabled { cursor: default; }
+.opf-review-pill-icon { flex: none; width: 14px; height: 14px; }
+.opf-review-pill[data-density="touch"] .opf-review-pill-icon { width: 16px; height: 16px; }
+.opf-review-pill-text { overflow: hidden; text-overflow: ellipsis; }
+
+.opf-review-pill[data-state="valid"] .opf-review-pill-icon { color: var(--opf-ui-success); }
+.opf-review-pill[data-state="checking"],
+.opf-review-pill[data-state="unavailable"] { color: var(--opf-ui-muted-fg); }
+.opf-review-pill[data-state="unavailable"] { border-style: dashed; opacity: 0.8; }
+.opf-review-pill[data-severity="error"] { border-color: var(--opf-ui-danger); }
+.opf-review-pill[data-severity="error"] .opf-review-pill-icon { color: var(--opf-ui-danger); }
+.opf-review-pill[data-severity="warning"] { border-color: var(--opf-ui-warn); }
+.opf-review-pill[data-severity="warning"] .opf-review-pill-icon { color: var(--opf-ui-warn); }
+.opf-review-pill[data-severity="info"] .opf-review-pill-icon { color: var(--opf-ui-accent-strong); }
+
+@media (prefers-reduced-motion: reduce) {
+  .opf-review-pill { transition: none; }
+}
+@media (forced-colors: active) {
+  .opf-review-pill { border-color: ButtonText; }
+  .opf-review-pill:disabled { border-color: GrayText; color: GrayText; }
+}
+
+/* shortcuts-sheet.css */
+/* The help item (src/shortcuts-sheet.js). The sheet itself reuses the source pane's shortcuts dialog styles (shortcuts.css: .opf-shortcuts*).
+   Uses only --opf-ui-* tokens. */
+.opf-help-button {
+  display: inline-grid;
+  place-items: center;
+  box-sizing: border-box;
+  width: var(--opf-ui-control-h);
+  height: var(--opf-ui-control-h);
+  min-height: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--opf-ui-radius);
+  background: transparent;
+  color: var(--opf-ui-muted-fg);
+  font: inherit;
+  cursor: pointer;
+  transition: color var(--opf-ui-ease), background-color var(--opf-ui-ease);
+}
+.opf-help-button[data-density="touch"] { width: 40px; height: 40px; }
+.opf-help-button:hover:not(:disabled),
+.opf-help-button[aria-expanded="true"] { background: var(--opf-ui-muted); color: var(--opf-ui-fg); }
+.opf-help-button:disabled { opacity: 0.4; cursor: default; }
+.opf-help-button:focus-visible { outline: 2px solid var(--opf-ui-ring); outline-offset: 2px; }
+.opf-help-icon { width: 18px; height: 18px; }
+.opf-help-button[data-density="touch"] .opf-help-icon { width: 20px; height: 20px; }
+.opf-help-sheet { z-index: 80; }
+.opf-help-close-icon { width: 16px; height: 16px; flex: none; }
+@media (prefers-reduced-motion: reduce) {
+  .opf-help-button { transition: none; }
+}
+
 /* shortcuts.css */
 /* The keyboard shortcuts dialog (src/source-shortcuts.js). Only --opf-ui-* tokens, no color literals (test/styles.mjs). */
 .opf-shortcuts,
@@ -4954,22 +5370,19 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
   opacity: 0.45;
   cursor: default;
 }
-.opf-studio-name {
+/* CE-28: the deck title part (src/deck-title.js) and the expand button in the bar. */
+.opf-studio-title {
+  display: flex;
   flex: 0 1 200px;
   min-width: 80px;
-  height: 28px;
-  padding: 0 8px;
-  border: 1px solid transparent;
-  border-radius: var(--opf-ui-radius-sm);
-  background: transparent;
-  color: var(--opf-ui-fg);
-  font: 600 13px var(--opf-ui-font);
-  text-overflow: ellipsis;
 }
-.opf-studio-name:hover,
-.opf-studio-name:focus {
-  border-color: var(--opf-ui-border);
-  background: var(--opf-ui-surface);
+.opf-studio-title:empty,
+.opf-studio-expand:empty {
+  display: none;
+}
+.opf-studio-expand {
+  display: inline-flex;
+  flex: none;
 }
 .opf-studio-views {
   padding: 2px;
@@ -6061,7 +6474,7 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
 .opf-studio[data-width="narrow"][data-preset="studio"] .opf-studio-sheetbar {
   display: inline-flex;
 }
-.opf-studio[data-width="narrow"] :is(.opf-studio-format, .opf-studio-counter, .opf-studio-zoombar, .opf-studio-name) {
+.opf-studio[data-width="narrow"] :is(.opf-studio-format, .opf-studio-counter, .opf-studio-zoombar, .opf-studio-title) {
   display: none;
 }
 .opf-studio[data-width="narrow"][data-sheet="slides"] .opf-studio-left,
@@ -6111,7 +6524,7 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
   .opf-studio .opf-studio-design-advanced > summary {
     padding-block: calc((44px - 1lh) / 2);
   }
-  .opf-studio :is(.opf-studio-number, .opf-studio-input, .opf-studio-name) {
+  .opf-studio :is(.opf-studio-number, .opf-studio-input) {
     min-height: 44px;
     font-size: 16px;
   }
@@ -6297,18 +6710,344 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
 }
 @media (prefers-reduced-motion: reduce) {
   .opf-thumbs-item,
-  .opf-thumbs-frame {
+  .opf-thumbs-frame,
+  .opf-thumbs-add,
+  .opf-thumbs-menu-item {
     transition: none;
   }
 }
 
-/* touch.css */
-/*
- * Touch: a coarse pointer (a finger) gets a 44px hit area on every control, and the text in a field is 16px so iOS Safari does not
- * zoom the page when the field gets focus. tokens.css already raises --opf-ui-control-h to 44px under `(pointer: coarse)`, which lifts every
- * control that is sized by it; this file lifts the ones that size themselves (compact buttons, rows, menu items, completion items) and
- * keeps the visual look: the padding grows, the type does not. The code in an editor stays at its own size: it is not a field.
- * Tokens only, no color literals (test/styles.mjs).
+/* Slide management (CE-29): the trailing "+" button, the context and layout menus and the status line. Only with actions: true. */
+.opf-thumbs-add-slot {
+  flex: none;
+  list-style: none;
+}
+.opf-thumbs[data-orientation="horizontal"] .opf-thumbs-add-slot {
+  align-self: stretch;
+}
+.opf-thumbs-add {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 40px;
+  height: 100%;
+  min-height: 40px;
+  margin: 0;
+  padding: 0;
+  color: var(--opf-ui-muted-fg);
+  background: transparent;
+  border: 1px dashed var(--opf-ui-border-strong);
+  border-radius: var(--opf-ui-radius-sm);
+  cursor: pointer;
+  transition: color var(--opf-ui-ease), border-color var(--opf-ui-ease), background-color var(--opf-ui-ease);
+}
+.opf-thumbs[data-orientation="vertical"] .opf-thumbs-add {
+  width: 100%;
+  height: 40px;
+}
+.opf-thumbs-add:hover,
+.opf-thumbs-add[aria-expanded="true"] {
+  color: var(--opf-ui-accent-strong);
+  border-color: var(--opf-ui-accent);
+  background: var(--opf-ui-muted-2);
+}
+.opf-thumbs-add:focus-visible {
+  outline: 2px solid var(--opf-ui-ring);
+  outline-offset: 2px;
+}
+.opf-thumbs-add-icon {
+  width: 20px;
+  height: 20px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.opf-thumbs-status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+.opf-thumbs-menu {
+  position: fixed;
+  z-index: 1000;
+  box-sizing: border-box;
+  min-width: 200px;
+  max-width: min(320px, 92vw);
+  max-height: min(420px, 80dvh);
+  padding: 4px;
+  overflow: auto;
+  font-family: var(--opf-ui-font);
+  color: var(--opf-ui-fg);
+  background: var(--opf-ui-surface);
+  border: 1px solid var(--opf-ui-border);
+  border-radius: var(--opf-ui-radius-md);
+  box-shadow: var(--opf-ui-shadow-pop);
+}
+.opf-thumbs-menu:focus {
+  outline: none;
+}
+.opf-thumbs-menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  padding: 6px 10px;
+  font: 13px/1.4 var(--opf-ui-font);
+  text-align: start;
+  color: var(--opf-ui-fg);
+  background: transparent;
+  border: 0;
+  border-radius: var(--opf-ui-radius-sm);
+  cursor: pointer;
+  transition: background-color var(--opf-ui-ease);
+}
+.opf-thumbs-menu-item kbd {
+  font: 11px var(--opf-ui-mono);
+  color: var(--opf-ui-muted-fg);
+}
+.opf-thumbs-menu-item:hover:not(:disabled),
+.opf-thumbs-menu-item:focus-visible {
+  background: var(--opf-ui-muted);
+  outline: none;
+}
+.opf-thumbs-menu-item:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--opf-ui-ring);
+}
+.opf-thumbs-menu-item:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+.opf-thumbs-menu-separator {
+  height: 1px;
+  margin: 4px 2px;
+  background: var(--opf-ui-border);
+}
+.opf-thumbs-menu-heading {
+  padding: 6px 10px 2px;
+  font: 600 11px/1.4 var(--opf-ui-font);
+  color: var(--opf-ui-muted-fg);
+}
+.opf-thumbs-menu-group + .opf-thumbs-menu-group {
+  margin-top: 4px;
+  border-top: 1px solid var(--opf-ui-border);
+}
+
+/* toolbar-actions.css */
+/* Toolbar actions (src/toolbar-actions.js): the host's own buttons. Uses only --opf-ui-* tokens. */
+.opf-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--opf-ui-font);
+}
+.opf-actions[hidden] { display: none; }
+.opf-actions-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  box-sizing: border-box;
+  height: var(--opf-ui-control-h);
+  min-height: 0;
+  padding: 0 12px;
+  border: 1px solid var(--opf-ui-border);
+  border-radius: var(--opf-ui-radius);
+  background: var(--opf-ui-surface);
+  color: var(--opf-ui-fg);
+  font: 500 13px/1 var(--opf-ui-font);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color var(--opf-ui-ease), background-color var(--opf-ui-ease), border-color var(--opf-ui-ease);
+}
+.opf-actions[data-density="touch"] .opf-actions-button { height: 40px; }
+.opf-actions-button:hover:not(:disabled) { background: var(--opf-ui-muted); border-color: var(--opf-ui-border-strong); }
+.opf-actions-button[aria-pressed="true"] { background: var(--opf-ui-muted); border-color: var(--opf-ui-border-strong); box-shadow: inset 0 -2px 0 var(--opf-ui-accent); }
+.opf-actions-button.is-primary { background: var(--opf-ui-accent); border-color: var(--opf-ui-accent); color: var(--opf-ui-accent-fg); }
+.opf-actions-button.is-primary:hover:not(:disabled) { background: var(--opf-ui-accent-strong); border-color: var(--opf-ui-accent-strong); }
+.opf-actions-button:disabled { opacity: 0.45; cursor: default; }
+.opf-actions-button:focus-visible { outline: 2px solid var(--opf-ui-ring); outline-offset: 2px; }
+.opf-actions-icon { flex: none; width: 16px; height: 16px; }
+.opf-actions-label { overflow: hidden; text-overflow: ellipsis; }
+@media (prefers-reduced-motion: reduce) {
+  .opf-actions-button { transition: none; }
+}
+@media (forced-colors: active) {
+  .opf-actions-button { border-color: ButtonText; }
+  .opf-actions-button:disabled { border-color: GrayText; color: GrayText; }
+  .opf-actions-button[aria-pressed="true"] { outline: 2px solid Highlight; }
+}
+
+/* toolbar.css */
+/* CE-28: the editor's title bar (src/toolbar.js). One row that never wraps: the items that do not fit move into the ⋯ menu. Tokens only. */
+.opf-tb {
+  position: relative;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: var(--opf-ui-bar-gap);
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  color: var(--opf-ui-bar-fg);
+  font-family: var(--opf-ui-font);
+}
+.opf-tb > .opf-tb-item {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+}
+/* The deck title shrinks before anything collapses below its wish; while the row is measured it asks for its wish. */
+.opf-tb > .opf-tb-item[data-opf-toolbar-item="title"] {
+  flex: 0 1 auto;
+  max-width: 28rem;
+}
+.opf-tb[data-measuring] > .opf-tb-item[data-opf-toolbar-item="title"] {
+  flex: 0 0 auto;
+  width: 8rem;
+  max-width: none;
+}
+.opf-tb > .opf-tb-item:empty,
+.opf-tb > [data-collapsed],
+.opf-tb > [hidden],
+.opf-tb .opf-tb-menu[hidden] {
+  display: none;
+}
+.opf-tb > .opf-tb-spacer {
+  flex: 1 1 0;
+  min-width: 0;
+}
+.opf-tb[data-measuring] > .opf-tb-spacer {
+  flex: 0 0 0;
+}
+.opf-tb > .opf-tb-divider {
+  flex: none;
+  align-self: stretch;
+  width: 1px;
+  margin: 4px 0;
+  background: var(--opf-ui-border);
+}
+.opf-tb .opf-tb-more {
+  position: relative;
+}
+.opf-tb .opf-tb-more-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: var(--opf-ui-control-h);
+  height: var(--opf-ui-control-h);
+  padding: 0 8px;
+  border: 1px solid var(--opf-ui-border);
+  border-radius: var(--opf-ui-radius);
+  background: var(--opf-ui-surface);
+  color: var(--opf-ui-fg);
+  cursor: pointer;
+  transition: background-color var(--opf-ui-ease), border-color var(--opf-ui-ease);
+}
+.opf-tb .opf-tb-more-button:hover {
+  background: var(--opf-ui-muted);
+}
+.opf-tb .opf-tb-more-button[aria-expanded="true"] {
+  border-color: var(--opf-ui-accent);
+  background: var(--opf-ui-muted);
+  color: var(--opf-ui-accent-strong);
+}
+.opf-tb .opf-tb-more-button:focus-visible,
+.opf-tb .opf-tb-menu-item:focus-visible {
+  outline: 2px solid var(--opf-ui-ring);
+  outline-offset: 1px;
+}
+.opf-tb .opf-tb-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  z-index: 40;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-width: 200px;
+  max-width: min(320px, calc(100vw - 16px));
+  padding: 4px;
+  border: 1px solid var(--opf-ui-border);
+  border-radius: var(--opf-ui-radius-md);
+  background: var(--opf-ui-surface);
+  box-shadow: var(--opf-ui-shadow-pop);
+}
+.opf-tb .opf-tb-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: var(--opf-ui-control-h);
+  padding: 0 10px;
+  border: 0;
+  border-radius: var(--opf-ui-radius-sm);
+  background: transparent;
+  color: var(--opf-ui-fg);
+  font: 500 13px/1.2 var(--opf-ui-font);
+  text-align: left;
+  cursor: pointer;
+}
+.opf-tb .opf-tb-menu-item:hover:not([aria-disabled="true"]),
+.opf-tb .opf-tb-menu-item:focus {
+  background: var(--opf-ui-muted);
+}
+.opf-tb .opf-tb-menu-item[aria-disabled="true"] {
+  color: var(--opf-ui-muted-fg);
+  cursor: default;
+}
+.opf-tb .opf-tb-menu-item[aria-checked="true"] {
+  color: var(--opf-ui-accent-strong);
+}
+.opf-tb .opf-tb-menu-item[role="menuitemcheckbox"]::before {
+  content: "";
+  flex: none;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
+.opf-tb .opf-tb-menu-item[aria-checked="true"]::before {
+  background: var(--opf-ui-accent-strong);
+}
+.opf-tb .opf-tb-menu-separator {
+  height: 1px;
+  margin: 4px 0;
+  background: var(--opf-ui-border);
+}
+.opf-tb[data-density="touch"] .opf-tb-more-button {
+  min-width: max(var(--opf-ui-control-h), 40px);
+  height: max(var(--opf-ui-control-h), 40px);
+}
+.opf-tb[data-density="touch"] .opf-tb-menu-item {
+  min-height: max(var(--opf-ui-control-h), 40px);
+}
+@media (prefers-reduced-motion: reduce) {
+  .opf-tb .opf-tb-more-button {
+    transition: none;
+  }
+}
+
+/* touch.css */
+/*
+ * Touch: a coarse pointer (a finger) gets a 44px hit area on every control, and the text in a field is 16px so iOS Safari does not
+ * zoom the page when the field gets focus. tokens.css already raises --opf-ui-control-h to 44px under `(pointer: coarse)`, which lifts every
+ * control that is sized by it; this file lifts the ones that size themselves (compact buttons, rows, menu items, completion items) and
+ * keeps the visual look: the padding grows, the type does not. The code in an editor stays at its own size: it is not a field.
+ * Tokens only, no color literals (test/styles.mjs).
  */
 @media (pointer: coarse) {
   /* ---- fields: 16px, 44px ------------------------------------------------------------------------------------------------------ */
@@ -6522,6 +7261,90 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
   }
 }
 
+/* ---- deck title (CE-28): the presentation name field ---------------------------------------------------------------------------- */
+@media (pointer: coarse) {
+  .opf-title-input,
+  .opf-title[data-density="touch"] .opf-title-input {
+    height: auto;
+    min-height: 44px;
+    font-size: 16px;
+  }
+}
+
+/* ---- toolbar (CE-28): the ⋯ button and its menu ----------------------------------------------------------------------------------- */
+@media (pointer: coarse) {
+  .opf-tb .opf-tb-more-button,
+  .opf-tb[data-density="touch"] .opf-tb-more-button {
+    min-width: 44px;
+    height: 44px;
+  }
+  .opf-tb .opf-tb-menu-item,
+  .opf-tb[data-density="touch"] .opf-tb-menu-item {
+    min-height: 44px;
+  }
+}
+
+/* ---- CE-28: the expand-editor button (src/editor-expand.js) ---------------------------------------------------------------------- */
+@media (pointer: coarse) {
+  .opf-expand-button,
+  .opf-expand-button[data-density="touch"] {
+    width: 44px;
+    height: 44px;
+  }
+}
+
+/* CE-29: the Design quick menu (src/design-menu.js). */
+@media (pointer: coarse) {
+  .opf-design-menu,
+  .opf-design-menu[data-density="touch"] {
+    --opf-design-menu-row: 44px;
+  }
+  .opf-design-menu .opf-design-menu-trigger,
+  .opf-design-menu[data-density="touch"] .opf-design-menu-trigger {
+    min-width: 44px;
+    min-height: 44px;
+  }
+  .opf-design-menu .opf-design-menu-close {
+    width: 44px;
+    height: 44px;
+  }
+}
+
+/* ---- CE-29 toolbar parts: the review pill (review-pill.js), the help button and its sheet (shortcuts-sheet.js), the host's action buttons (toolbar-actions.js) -- */
+@media (pointer: coarse) {
+  .opf-review-pill,
+  .opf-review-pill[data-density="touch"] {
+    min-height: 44px;
+    min-width: 44px;
+    padding-inline: 14px;
+  }
+  .opf-help-button,
+  .opf-help-button[data-density="touch"] {
+    min-width: 44px;
+    min-height: 44px;
+  }
+  .opf-actions-button,
+  .opf-actions[data-density="touch"] .opf-actions-button {
+    min-height: 44px;
+    min-width: 44px;
+    padding-inline: 14px;
+  }
+}
+
+/* Thumbnail strip slide management (CE-29): the "+" button and the context and layout menu items. */
+@media (pointer: coarse) {
+  .opf-thumbs .opf-thumbs-add {
+    min-width: 44px;
+    min-height: 44px;
+  }
+  .opf-thumbs[data-orientation="vertical"] .opf-thumbs-add {
+    height: 44px;
+  }
+  .opf-thumbs-menu .opf-thumbs-menu-item {
+    min-height: 44px;
+  }
+}
+
 /* workspace.css */
 /* The embeddable editor (CE-06): the default arrangement `createOpfEditor` builds for `layout: "full" | "canvas" | "source"`.
    Uses only --opf-ui-* tokens. A host that passes its own `slots` ignores all of this except the `data-` attributes. */
@@ -6540,15 +7363,50 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
 .opf-workspace[data-opf-layout="slots"] {
   display: contents;
 }
+/* CE-28: the bar holds the toolbar (src/styles/toolbar.css), one row whose items move into its ⋯ menu when they do not fit. */
 .opf-ws-bar {
-  display: flex;
+  display: block;
   flex: none;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 8px;
-  padding: 6px 12px;
-  border-bottom: 1px solid var(--opf-ui-border);
-  background: var(--opf-ui-surface);
+  min-width: 0;
+  min-height: var(--opf-ui-bar-height);
+  padding: var(--opf-ui-bar-padding);
+  border-bottom: 1px solid var(--opf-ui-bar-border);
+  background: var(--opf-ui-bar-bg);
+  color: var(--opf-ui-bar-fg);
+}
+/* CE-28 wave 2: Export collapsed into the ⋯ menu stays in the page, out of sight and out of the row, so the sheet it opens from there (fixed on
+   screen) and its progress and result are visible. */
+.opf-tb > .opf-ws-export[data-collapsed] {
+  display: block;
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+}
+.opf-tb > .opf-ws-export[data-collapsed] :is(.opf-export-sheet, .opf-export-scrim, .opf-export-status) {
+  visibility: visible;
+}
+/* CE-28, `layout: "embed"`: the slide alone under a compact bar, for a page that shows a deck. The status line is read, not shown. */
+/* The compact bar is the embed default of --opf-ui-bar-padding; a host sets the token with a selector as specific as this one, or in `theme.tokens`. */
+.opf-workspace[data-opf-layout="embed"] {
+  --opf-ui-bar-padding: 4px 8px;
+}
+.opf-workspace[data-opf-layout="embed"] .opf-ws-stage {
+  padding: 8px;
+}
+.opf-workspace[data-opf-layout="embed"] .opf-ws-main {
+  position: relative;
+}
+.opf-workspace[data-opf-layout="embed"] .opf-ws-status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
 }
 .opf-ws-group,
 .opf-ws-views {
@@ -6673,6 +7531,11 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
   gap: 4px;
   padding: 0 12px 8px;
 }
+/* CE-30: the slide row is no wider than the editor; the thumbnail strip scrolls inside it (a narrow box, a phone). */
+.opf-ws-dock > .opf-ws-navigator,
+.opf-ws-dock > .opf-ws-thumbnails {
+  max-width: 100%;
+}
 .opf-ws-status {
   flex: none;
   margin: 0;
@@ -6760,27 +7623,29 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
   flex: 1 1 0;
   min-height: 0;
 }
-/* A phone: the parts stack, the source above the slide, the side panel below. */
+/* A phone: the parts stack, the source above the slide, the side panel below. CE-30: only in the layouts that have several parts to stack;
+   `embed`, `viewer` and `canvas` are the slide alone and fit it to their box at any width (a stage of 40vh made a short embed overflow).
+   `:where()` keeps the specificity of the plain class. */
 @media (max-width: 760px) {
-  .opf-ws-body {
+  :where(.opf-workspace:not([data-opf-layout="embed"], [data-opf-layout="viewer"], [data-opf-layout="canvas"])) .opf-ws-body {
     flex-direction: column;
     overflow: auto;
   }
-  .opf-ws-source {
+  :where(.opf-workspace:not([data-opf-layout="embed"], [data-opf-layout="viewer"], [data-opf-layout="canvas"])) .opf-ws-source {
     flex: none;
     min-width: 0;
     height: 40vh;
     border-right: 0;
     border-bottom: 1px solid var(--opf-ui-border);
   }
-  .opf-ws-main {
+  :where(.opf-workspace:not([data-opf-layout="embed"], [data-opf-layout="viewer"], [data-opf-layout="canvas"])) .opf-ws-main {
     flex: none;
   }
-  .opf-ws-stage {
+  :where(.opf-workspace:not([data-opf-layout="embed"], [data-opf-layout="viewer"], [data-opf-layout="canvas"])) .opf-ws-stage {
     flex: none;
     min-height: 40vh;
   }
-  .opf-ws-side {
+  :where(.opf-workspace:not([data-opf-layout="embed"], [data-opf-layout="viewer"], [data-opf-layout="canvas"])) .opf-ws-side {
     flex: none;
     border-left: 0;
     border-top: 1px solid var(--opf-ui-border);