@openpresentation/opf-editor 0.26.5 → 0.26.7

package/dist/styles.css

@@ -72,6 +72,17 @@
   --opf-ui-control-h: 40px;
 }
 
+/* A coarse pointer (a finger) gets 44px controls, whatever the density: every control built from --opf-ui-control-h grows with it, and
+   src/styles/touch.css lifts the ones that size themselves. Comes after the density rule so it wins at equal specificity. */
+@media (pointer: coarse) {
+  :root,
+  .opf-ui,
+  .opf-ui[data-density="touch"],
+  [data-density="touch"] .opf-ui {
+    --opf-ui-control-h: 44px;
+  }
+}
+
 /* Base rules for a mounted component or a whole editor surface. */
 .opf-ui {
   font-family: var(--opf-ui-font);
@@ -695,7 +706,7 @@
 .opf-lx[data-compact="true"] { min-height: 0; height: auto; }
 .opf-lx[data-compact="true"] .opf-lx-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
 .opf-lx[data-compact="true"] .opf-lx-palette-host { overflow-x: auto; border-bottom: 1px solid var(--opf-ui-border); }
-.opf-lx[data-compact="true"] .opf-lx-palette { flex-direction: row; flex: 1; padding: 4px 8px; border-right: 0; }
+.opf-lx[data-compact="true"] .opf-lx-palette { flex-direction: row; flex-wrap: wrap; justify-content: center; flex: 1; padding: 4px 8px; border-right: 0; }
 .opf-lx[data-compact="true"] .opf-lx-tool-gap { width: 1px; height: auto; margin: 4px; }
 .opf-lx[data-compact="true"] .opf-lx-viewport { min-height: 220px; }
 .opf-lx[data-compact="true"] .opf-lx-side { border-left: 0; border-top: 1px solid var(--opf-ui-border); }
@@ -3542,6 +3553,52 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
   border-right: 1px solid var(--opf-ui-code-border);
 }
 
+/* A wrapped line continues under its own indentation (src/source-wrap.js, VS Code's wrappingIndent "indent"): `opf-hang-<n>` says how many
+   columns, the first line keeps its place (a negative text-indent of the same width) and every continuation line starts n columns in.
+   The hang is capped at 40% of the line so a deeply nested line still leaves room for text at 320px. Text inside an inline widget does not
+   inherit the negative indent. `--opf-line-start` is the line's own left padding (the source pane sets it to 2px). */
+.cm-line.opf-hang-0 { --opf-hang: 0; }
+.cm-line.opf-hang-1 { --opf-hang: 1; }
+.cm-line.opf-hang-2 { --opf-hang: 2; }
+.cm-line.opf-hang-3 { --opf-hang: 3; }
+.cm-line.opf-hang-4 { --opf-hang: 4; }
+.cm-line.opf-hang-5 { --opf-hang: 5; }
+.cm-line.opf-hang-6 { --opf-hang: 6; }
+.cm-line.opf-hang-7 { --opf-hang: 7; }
+.cm-line.opf-hang-8 { --opf-hang: 8; }
+.cm-line.opf-hang-9 { --opf-hang: 9; }
+.cm-line.opf-hang-10 { --opf-hang: 10; }
+.cm-line.opf-hang-11 { --opf-hang: 11; }
+.cm-line.opf-hang-12 { --opf-hang: 12; }
+.cm-line.opf-hang-13 { --opf-hang: 13; }
+.cm-line.opf-hang-14 { --opf-hang: 14; }
+.cm-line.opf-hang-15 { --opf-hang: 15; }
+.cm-line.opf-hang-16 { --opf-hang: 16; }
+.cm-line.opf-hang-17 { --opf-hang: 17; }
+.cm-line.opf-hang-18 { --opf-hang: 18; }
+.cm-line.opf-hang-19 { --opf-hang: 19; }
+.cm-line.opf-hang-20 { --opf-hang: 20; }
+.cm-line.opf-hang-21 { --opf-hang: 21; }
+.cm-line.opf-hang-22 { --opf-hang: 22; }
+.cm-line.opf-hang-23 { --opf-hang: 23; }
+.cm-line.opf-hang-24 { --opf-hang: 24; }
+.cm-line.opf-hang-25 { --opf-hang: 25; }
+.cm-line.opf-hang-26 { --opf-hang: 26; }
+.cm-line.opf-hang-27 { --opf-hang: 27; }
+.cm-line.opf-hang-28 { --opf-hang: 28; }
+.cm-line.opf-hang-29 { --opf-hang: 29; }
+.cm-line.opf-hang-30 { --opf-hang: 30; }
+.cm-line.opf-hang-31 { --opf-hang: 31; }
+.cm-line.opf-hang-32 { --opf-hang: 32; }
+:is(.opf-ui, .opf-json, .opf-code) .cm-line {
+  padding-left: calc(var(--opf-line-start, 6px) + min(calc(var(--opf-hang, 0) * 1ch), 40%));
+  text-indent: calc(-1 * min(calc(var(--opf-hang, 0) * 1ch), 40%));
+}
+
+:is(.opf-ui, .opf-json, .opf-code) .cm-line > * {
+  text-indent: 0;
+}
+
 :is(.opf-ui, .opf-json, .opf-code) .cm-activeLine,
 :is(.opf-ui, .opf-json, .opf-code) .cm-line.is-hover {
   background: color-mix(in srgb, var(--opf-ui-accent) 8%, transparent);
@@ -3707,6 +3764,26 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
 .opf-fix[aria-selected="true"] { background: var(--opf-ui-accent); color: var(--opf-ui-accent-fg); }
 :root :is(.opf-ui, .opf-json, .opf-code) .cm-tooltip .cm-completionInfo { white-space: normal; }
 
+/* The shape hint (Cmd/Ctrl+Shift+Space): the fields of the object around the caret, each set, next or optional. The state is a word and a mark, not only a color. */
+.cm-tooltip.opf-hint { display: flex; flex-direction: column; min-width: 22em; max-width: 38em; padding: 4px 0; font: 12.5px var(--opf-ui-font); white-space: normal; }
+.opf-hint-head { display: flex; justify-content: space-between; gap: 24px; padding: 2px 12px 5px; border-bottom: 1px solid var(--opf-ui-border); }
+.opf-hint-title { font: 600 12px var(--opf-ui-mono); }
+.opf-hint-aside { color: var(--opf-ui-muted-fg); font-size: 11.5px; white-space: nowrap; }
+.opf-hint-rows { display: flex; flex-direction: column; margin: 0; padding: 3px 0 0; list-style: none; }
+.opf-hint-row { display: grid; grid-template-columns: 8em minmax(0, 1fr) 5.5em; gap: 12px; align-items: baseline; padding: 1px 12px; }
+.opf-hint-key { font: 12px var(--opf-ui-mono); overflow-wrap: anywhere; }
+.opf-hint-description { color: var(--opf-ui-muted-fg); }
+.opf-hint-state { text-align: right; color: var(--opf-ui-muted-fg); font-size: 11.5px; }
+.opf-hint-row[data-state="set"] .opf-hint-state::before { content: "\2713\00a0"; }
+.opf-hint-row[data-state="next"] { background: color-mix(in srgb, var(--opf-ui-accent) 12%, transparent); box-shadow: inset 2px 0 0 var(--opf-ui-accent); }
+.opf-hint-row[data-state="next"] .opf-hint-key,
+.opf-hint-row[data-state="next"] .opf-hint-state { color: var(--opf-ui-accent-strong); font-weight: 600; }
+.opf-hint-row[data-state="next"] .opf-hint-state::before { content: "\25B6\00a0"; }
+/* No animation either way; the rule is explicit so a later one cannot add motion for someone who asked for less. */
+@media (prefers-reduced-motion: reduce) {
+  .cm-tooltip.opf-hint, .cm-tooltip.opf-hint * { animation: none !important; transition: none !important; }
+}
+
 /* Ctrl+Space with the list open hides the documentation panel (and shows it again). */
 .cm-editor.opf-docs-off .cm-completionInfo { display: none; }
 
@@ -4014,6 +4091,208 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
   .opf-present-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,
+.opf-shortcuts *,
+.opf-shortcuts *::before,
+.opf-shortcuts *::after { box-sizing: border-box; }
+.opf-shortcuts [hidden] { display: none !important; }
+.opf-shortcuts {
+  position: fixed;
+  inset: 0;
+  z-index: 70;
+  display: grid;
+  grid-template-columns: minmax(0, 640px);
+  justify-content: center;
+  align-content: center;
+  padding: 16px;
+  background: color-mix(in srgb, var(--opf-ui-fg) 32%, transparent);
+  font-family: var(--opf-ui-font);
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--opf-ui-fg);
+}
+.opf-shortcuts .opf-shortcuts-dialog {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  max-height: min(720px, calc(100vh - 32px));
+  padding: 16px 18px 12px;
+  overflow: hidden;
+  background: var(--opf-ui-surface);
+  border: 1px solid var(--opf-ui-border);
+  border-radius: var(--opf-ui-radius-lg);
+  box-shadow: var(--opf-ui-shadow-pop);
+}
+.opf-shortcuts .opf-shortcuts-dialog:focus { outline: none; }
+.opf-shortcuts .opf-shortcuts-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.opf-shortcuts .opf-shortcuts-title { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
+.opf-shortcuts .opf-shortcuts-help { margin: 0; color: var(--opf-ui-muted-fg); }
+.opf-shortcuts .opf-shortcuts-close {
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border: 0;
+  border-radius: var(--opf-ui-radius);
+  background: transparent;
+  color: var(--opf-ui-muted-fg);
+  font: inherit;
+  font-size: 20px;
+  line-height: 1;
+  cursor: pointer;
+}
+.opf-shortcuts .opf-shortcuts-close:hover { background: var(--opf-ui-muted); color: var(--opf-ui-fg); }
+.opf-shortcuts .opf-shortcuts-search {
+  width: 100%;
+  min-height: 34px;
+  padding: 4px 10px;
+  border: 1px solid var(--opf-ui-border);
+  border-radius: var(--opf-ui-radius-md);
+  background: var(--opf-ui-bg);
+  color: inherit;
+  font: inherit;
+}
+.opf-shortcuts button:focus-visible,
+.opf-shortcuts input:focus-visible,
+.opf-shortcuts .opf-shortcuts-list:focus-visible { outline: 2px solid var(--opf-ui-ring); outline-offset: 2px; }
+.opf-shortcuts .opf-shortcuts-status { min-height: 18px; color: var(--opf-ui-muted-fg); font-size: 12px; }
+.opf-shortcuts .opf-shortcuts-list { flex: 1; min-height: 120px; overflow: auto; padding-right: 4px; }
+.opf-shortcuts .opf-shortcuts-group { margin: 0 0 12px; }
+.opf-shortcuts .opf-shortcuts-group-title { margin: 8px 0 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--opf-ui-muted-fg); }
+.opf-shortcuts .opf-shortcuts-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 4px 0; border-bottom: 1px solid var(--opf-ui-border); }
+.opf-shortcuts .opf-shortcuts-name { min-width: 0; }
+.opf-shortcuts .opf-shortcuts-when { color: var(--opf-ui-muted-fg); font-size: 12px; }
+.opf-shortcuts .opf-shortcuts-keys { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; flex: none; max-width: 55%; }
+.opf-shortcuts .opf-shortcuts-or { color: var(--opf-ui-muted-fg); font-size: 11px; padding: 0 2px; align-self: center; }
+.opf-shortcuts .opf-shortcuts-key {
+  display: inline-block;
+  min-width: 22px;
+  padding: 1px 6px;
+  border: 1px solid var(--opf-ui-border-strong);
+  border-bottom-width: 2px;
+  border-radius: var(--opf-ui-radius-sm);
+  background: var(--opf-ui-muted);
+  font: 12px var(--opf-ui-mono);
+  text-align: center;
+  white-space: nowrap;
+}
+.opf-shortcuts .opf-shortcuts-none { color: var(--opf-ui-muted-fg); }
+@media (forced-colors: active) {
+  .opf-shortcuts .opf-shortcuts-dialog,
+  .opf-shortcuts .opf-shortcuts-key { border-color: CanvasText; }
+}
+
+/* The symbol picker (src/source-outline.js) */
+.opf-quickpick {
+  position: absolute;
+  top: 6px;
+  left: 50%;
+  z-index: 40;
+  width: min(480px, calc(100% - 24px));
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 6px;
+  background: var(--opf-ui-surface);
+  color: var(--opf-ui-fg);
+  border: 1px solid var(--opf-ui-border);
+  border-radius: var(--opf-ui-radius-lg);
+  box-shadow: var(--opf-ui-shadow-pop);
+  font: 13px var(--opf-ui-font);
+}
+.opf-quickpick-input { width: 100%; min-height: 30px; padding: 3px 8px; border: 1px solid var(--opf-ui-border); border-radius: var(--opf-ui-radius-md); background: var(--opf-ui-bg); color: inherit; font: inherit; }
+.opf-quickpick-input:focus-visible { outline: 2px solid var(--opf-ui-ring); outline-offset: 1px; }
+.opf-quickpick-list { margin: 0; padding: 2px 0 0; list-style: none; max-height: 280px; overflow: auto; }
+.opf-quickpick-item { display: flex; align-items: baseline; gap: 8px; min-height: 26px; padding: 3px 10px; border-radius: var(--opf-ui-radius-sm); cursor: pointer; }
+.opf-quickpick-item.is-selected { background: var(--opf-ui-accent); color: var(--opf-ui-accent-fg); }
+.opf-quickpick-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.opf-quickpick-detail { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; opacity: 0.75; }
+.opf-quickpick-kind { margin-left: auto; font-size: 11px; opacity: 0.75; flex: none; }
+.opf-quickpick-more { padding: 4px 10px; color: var(--opf-ui-muted-fg); font-size: 12px; }
+.opf-quickpick-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+@media (forced-colors: active) { .opf-quickpick-item.is-selected { outline: 2px solid Highlight; } }
+
+/* source-navigation.css */
+/*
+ * Go to definition, peek, references and rename (source-navigation.js): one block widget under the line of the symbol. Tokens only. The declaration is
+ * marked by a word, an arrow and a heavier line as well as by color, and nothing animates.
+ */
+.opf-sym {
+  box-sizing: border-box;
+  margin: 4px 0 6px 12px;
+  padding: 6px 10px 8px;
+  border: 1px solid var(--opf-ui-border-strong);
+  border-left: 3px solid var(--opf-ui-accent);
+  border-radius: var(--opf-ui-radius);
+  background: var(--opf-ui-surface);
+  color: var(--opf-ui-fg);
+  box-shadow: var(--opf-ui-shadow-pop);
+  font: 12px/1.45 var(--opf-ui-font);
+  text-align: start;
+  white-space: normal;
+  cursor: default;
+}
+.opf-sym:focus-visible,
+.opf-sym-list:focus-visible { outline: 2px solid var(--opf-ui-ring); outline-offset: 1px; }
+.opf-sym-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
+.opf-sym-title { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
+.opf-sym-where { color: var(--opf-ui-muted-fg); }
+.opf-sym-close {
+  flex: none;
+  min-height: 24px;
+  padding: 0 8px;
+  border: 1px solid var(--opf-ui-border);
+  border-radius: var(--opf-ui-radius-sm);
+  background: var(--opf-ui-muted-2);
+  color: var(--opf-ui-fg);
+  font: inherit;
+  cursor: pointer;
+}
+.opf-sym-close:hover { background: var(--opf-ui-muted); }
+.opf-sym-close:focus-visible,
+.opf-sym-input:focus-visible { outline: 2px solid var(--opf-ui-ring); outline-offset: 1px; }
+.opf-sym-lines, .opf-sym-list { margin: 6px 0 0; padding: 0; list-style: none; max-height: 260px; overflow: auto; }
+.opf-sym-line, .opf-sym-ref { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 1px 4px; border-radius: var(--opf-ui-radius-sm); }
+.opf-sym-no { flex: none; min-width: 3ch; color: var(--opf-ui-muted-fg); font-family: var(--opf-ui-mono); text-align: end; }
+.opf-sym-mark { flex: none; width: 1ch; color: var(--opf-ui-accent-strong); }
+.opf-sym-text { flex: 1 1 auto; min-width: 0; font-family: var(--opf-ui-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
+.opf-sym-line.is-target { background: var(--opf-ui-muted-2); font-weight: 600; }
+.opf-sym-ref { cursor: pointer; }
+.opf-sym-ref:hover { background: var(--opf-ui-muted-2); }
+.opf-sym-ref[aria-selected="true"] { background: var(--opf-ui-accent); color: var(--opf-ui-accent-fg); }
+.opf-sym-ref[aria-selected="true"] .opf-sym-no,
+.opf-sym-ref[aria-selected="true"] .opf-sym-badge { color: inherit; }
+.opf-sym-badge { flex: none; min-width: 6.5em; color: var(--opf-ui-muted-fg); font-size: 11px; }
+.opf-sym-ref.is-declaration .opf-sym-badge { font-weight: 600; }
+.opf-sym-hint { margin: 6px 0 0; color: var(--opf-ui-muted-fg); font-size: 11px; }
+.opf-sym-field { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
+.opf-sym-label { flex: none; color: var(--opf-ui-muted-fg); }
+.opf-sym-input {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: var(--opf-ui-control-h);
+  padding: 0 8px;
+  border: 1px solid var(--opf-ui-border-strong);
+  border-radius: var(--opf-ui-radius-sm);
+  background: var(--opf-ui-bg);
+  color: var(--opf-ui-fg);
+  font: 13px var(--opf-ui-mono);
+}
+.opf-sym-input[aria-invalid="true"] { border-color: var(--opf-ui-danger); }
+.opf-sym-message { min-height: 1.45em; margin-top: 4px; }
+.opf-sym-message.is-error { color: var(--opf-ui-danger); font-weight: 600; }
+.opf-sym-message.is-error::before { content: "Error: "; }
+.opf-sym-preview { margin-top: 6px; }
+.opf-sym-image { display: block; max-width: 100%; max-height: 160px; border: 1px solid var(--opf-ui-border); border-radius: var(--opf-ui-radius-sm); }
+@media (forced-colors: active) {
+  .opf-sym { border: 1px solid CanvasText; }
+  .opf-sym-ref[aria-selected="true"] { outline: 2px solid Highlight; }
+}
+
 /* source-pane.css */
 /* Source pane (RR-98). Only --opf-ui-* tokens (src/styles/tokens.css). */
 .opf-source {
@@ -4034,11 +4313,13 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
 .opf-source [hidden] { display: none !important; }
 .opf-source button { font: inherit; color: inherit; }
 
-/* Bar: file name, format menu, actions */
+/* Bar: file name, format menu, actions. It wraps: where the name, the format and the actions do not fit on one row (a narrow pane, or 44px
+   buttons under a coarse pointer), the actions drop to their own row on the right instead of squeezing the name. */
 .opf-source-bar {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 14px;
+  gap: 0 14px;
   flex: none;
   min-height: var(--_bar);
   padding: 0 8px 0 14px;
@@ -4169,7 +4450,7 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
 .opf-source-code .cm-scroller { overflow: auto; font: 400 13.5px/22px var(--opf-ui-mono); }
 .opf-source[data-density="touch"] .opf-source-code .cm-scroller { font-size: 13px; line-height: 21px; }
 .opf-source-code .cm-content { padding: 16px 16px 16px 4px; caret-color: var(--opf-ui-fg); }
-.opf-source-code .cm-line { padding: 0 2px; }
+.opf-source-code .cm-line { --opf-line-start: 2px; padding-top: 0; padding-right: 2px; padding-bottom: 0; }
 .opf-source-code .cm-gutters { border: 0; background: transparent; color: color-mix(in srgb, var(--opf-ui-muted-fg) 60%, transparent); }
 .opf-source-code .cm-lineNumbers .cm-gutterElement { min-width: 30px; padding: 0 12px 0 0; text-align: right; font-size: 11px; }
 .opf-source-code .cm-activeLine { background: transparent; }
@@ -4326,6 +4607,46 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
 .opf-source-confirm button:hover { background: var(--opf-ui-muted); }
 .opf-source-confirm-accept { font-weight: 600; }
 
+/* Fold gutter (src/source-folding.js) */
+.opf-source-code .cm-foldGutter { width: 16px; }
+.opf-source-code .cm-foldGutter .cm-gutterElement { display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
+.opf-source-code .cm-foldGutter .opf-fold-marker { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 100%; color: var(--opf-ui-muted-fg); opacity: 0; transition: opacity var(--opf-ui-ease); }
+.opf-source-code .cm-foldGutter .opf-fold-marker.is-folded,
+.opf-source-code:hover .cm-foldGutter .opf-fold-marker,
+.opf-source-code .cm-foldGutter .opf-fold-marker:hover { opacity: 1; }
+.opf-source-code .cm-foldGutter .opf-fold-marker:hover { color: var(--opf-ui-fg); }
+.opf-source-code .cm-foldPlaceholder { border: 0; background: var(--opf-ui-muted); color: var(--opf-ui-muted-fg); border-radius: var(--opf-ui-radius-sm); padding: 0 5px; margin: 0 2px; cursor: pointer; }
+@media (prefers-reduced-motion: reduce) { .opf-source-code .cm-foldGutter .opf-fold-marker { transition: none; } }
+@media (forced-colors: active) { .opf-source-code .cm-foldGutter .opf-fold-marker { opacity: 1; } }
+
+/* Outline panel (opt-in `outline` option) */
+.opf-source-body { display: flex; flex: 1; min-height: 0; min-width: 0; }
+.opf-source-body > .opf-source-code { flex: 1; min-width: 0; }
+.opf-source-outline { flex: none; width: 220px; max-width: 40%; overflow: auto; border-right: 1px solid var(--opf-ui-code-border); padding: 4px 0; }
+.opf-source-outline-list { margin: 0; padding: 0; list-style: none; }
+.opf-source-outline-item { display: flex; align-items: baseline; gap: 6px; width: 100%; min-height: 26px; padding: 2px 8px; border: 0; background: transparent; color: var(--opf-ui-fg); text-align: left; font: inherit; cursor: pointer; }
+.opf-source-outline-item:hover { background: var(--opf-ui-muted); }
+.opf-source-outline-item:focus-visible { outline: 2px solid var(--opf-ui-ring); outline-offset: -2px; }
+.opf-source-outline-item[aria-current="true"] { background: var(--opf-ui-muted); font-weight: 600; }
+.opf-source-outline-item.is-section { color: var(--opf-ui-muted-fg); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
+.opf-source-outline-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.opf-source-outline-detail { margin-left: auto; flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--opf-ui-muted-fg); }
+.opf-source-outline-empty { padding: 8px 10px; color: var(--opf-ui-muted-fg); }
+@media (forced-colors: active) { .opf-source-outline-item[aria-current="true"] { outline: 1px solid Highlight; } }
+
+/* Forced colors (Windows high contrast): the selection of a list is an outline and a problem keeps its underline and a different shape per severity. */
+@media (forced-colors: active) {
+  .opf-source-code .cm-tooltip-autocomplete > ul > li[aria-selected],
+  .cm-tooltip .opf-fix[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; forced-color-adjust: none; background: Canvas; color: CanvasText; }
+  .opf-source-code .cm-lintRange-error { text-decoration: underline wavy CanvasText; }
+  .opf-source-code .cm-lintRange-warning { text-decoration: underline dashed CanvasText; }
+  .opf-source-code .cm-lintRange-info { text-decoration: underline dotted CanvasText; }
+  .opf-source-finding { border: 1px solid CanvasText; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .cm-tooltip, .cm-tooltip * { animation: none !important; transition: none !important; }
+}
+
 /* thumbnails.css */
 /* Thumbnail strip (RR-98). Uses only --opf-ui-* tokens. */
 .opf-thumbs {
@@ -4479,3 +4800,217 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
     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 ------------------------------------------------------------------------------------------------------ */
+  :is(.opf-ui, .opf-source, .opf-json, .opf-code, .opf-shortcuts, .opf-quickpick, .opf-sym)
+    :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="image"]), select, textarea):not(.opf-inline-input, .opf-rich-input) {
+    font-size: 16px;
+  }
+  :is(.opf-ui, .opf-source, .opf-json, .opf-code, .opf-shortcuts, .opf-quickpick, .opf-sym)
+    :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="image"]), select):not(.opf-inline-input, .opf-rich-input) {
+    min-height: 44px;
+  }
+  /* WebKit sizes a native select by its text unless the height is set. */
+  :is(.opf-ui, .opf-source, .opf-json, .opf-code) select {
+    height: 44px;
+  }
+  .opf-ui input[type="file"] {
+    min-height: 44px;
+  }
+
+  /* ---- the source pane ---------------------------------------------------------------------------------------------------------- */
+  .opf-source,
+  .opf-source[data-density="touch"] {
+    --_h: 44px;
+    --_bar: 52px;
+  }
+  .opf-source-name,
+  .opf-source-format {
+    min-height: var(--_h);
+  }
+  .opf-source-name {
+    min-width: 44px;
+  }
+  .opf-source-finding {
+    min-height: var(--_h);
+  }
+  .opf-source-finding-fix,
+  .opf-source-finding-details {
+    min-height: var(--_h);
+    padding: 0 12px;
+  }
+  .opf-source-finding-fixes {
+    gap: 6px;
+  }
+  .opf-source-outline-item {
+    min-height: var(--_h);
+  }
+  .opf-source-finding-explain-link {
+    display: inline-flex;
+    align-items: center;
+    min-height: 44px;
+  }
+  .opf-sym-close {
+    min-width: 44px;
+    min-height: 44px;
+  }
+  .opf-sym-ref {
+    min-height: 44px;
+    align-items: center;
+  }
+  .opf-shortcuts .opf-shortcuts-close {
+    width: 44px;
+    height: 44px;
+  }
+  .opf-shortcuts .opf-shortcuts-search,
+  .opf-quickpick-input {
+    min-height: 44px;
+  }
+  .opf-quickpick-item {
+    min-height: 44px;
+    align-items: center;
+  }
+
+  /* ---- CodeMirror's lists and panels (completions, problems, quick fixes, search) ---------------------------------------------- */
+  :root :is(.opf-ui, .opf-source, .opf-json, .opf-code) .cm-tooltip.cm-tooltip-autocomplete > ul > li {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    min-height: 44px;
+    padding: 2px 12px;
+  }
+  :root :is(.opf-ui, .opf-source, .opf-json, .opf-code) .cm-tooltip-autocomplete .cm-completionLabel {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .cm-tooltip .opf-fix {
+    display: flex;
+    align-items: center;
+    min-height: 44px;
+    padding: 3px 12px;
+  }
+  .cm-tooltip-lint .cm-diagnosticAction {
+    min-height: 44px;
+    padding: 0 14px;
+  }
+  :root .cm-panels .cm-panel.cm-search :is(input, button, label) {
+    min-height: 44px;
+  }
+  :root .cm-panels .cm-panel.cm-search :is(input[type="text"], input:not([type])) {
+    font-size: 16px;
+  }
+  /* The find and replace fields take a row of their own each, the buttons and options wrap beneath, the close button stays in the corner. */
+  :root .cm-panels .cm-panel.cm-search {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 52px 6px 8px;
+  }
+  :root .cm-panels .cm-panel.cm-search br {
+    display: none;
+  }
+  :root .cm-panels .cm-panel.cm-search input[type="text"],
+  :root .cm-panels .cm-panel.cm-search input:not([type]) {
+    flex: 1 1 100%;
+    min-width: 0;
+    margin: 0;
+  }
+  :root .cm-panels .cm-panel.cm-search button,
+  :root .cm-panels .cm-panel.cm-search label {
+    margin: 0;
+  }
+  :root .cm-panels .cm-panel.cm-search label {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+  }
+  :root .cm-panels .cm-panel.cm-search button {
+    min-width: 44px;
+  }
+  :root .cm-panels .cm-panel.cm-search button[name="close"] {
+    top: 0;
+    right: 4px;
+  }
+
+  /* ---- menus, dialogs and the compact controls of the panels --------------------------------------------------------------------- */
+  .opf-export .opf-export-close {
+    width: 44px;
+    height: 44px;
+  }
+  .opf-export[data-density="touch"] .opf-export-trigger,
+  .opf-export[data-density="touch"] .opf-export-item,
+  .opf-export .opf-export-item {
+    min-height: 44px;
+  }
+  .opf-export .opf-export-status-action {
+    height: 44px;
+  }
+  .opf-handoff[data-density="touch"] .opf-handoff-button,
+  .opf-handoff .opf-handoff-button {
+    height: 44px;
+  }
+  .opf-handoff[data-density="touch"] .opf-handoff-target,
+  .opf-handoff .opf-handoff-target {
+    height: 44px;
+    padding: 0 14px;
+  }
+  .opf-handoff[data-density="touch"] .opf-handoff-x,
+  .opf-handoff .opf-handoff-x {
+    width: 44px;
+    height: 44px;
+  }
+  .opf-nav[data-density="touch"] .opf-nav-button,
+  .opf-nav .opf-nav-button {
+    width: 44px;
+    height: 44px;
+  }
+  .opf-thumbs[data-density="touch"] .opf-thumbs-item,
+  .opf-thumbs .opf-thumbs-item {
+    min-height: 44px;
+  }
+  :root .opf-review-fix {
+    min-height: 44px;
+    padding: 0 12px;
+  }
+  :root .opf-find button.opf-find-close,
+  :root .opf-find button[aria-label="Previous match"],
+  :root .opf-find button[aria-label="Next match"] {
+    min-width: 44px;
+  }
+  .opf-dc-group > summary,
+  .opf-template-insert-section summary {
+    min-height: 44px;
+    padding-block: calc((44px - 1lh) / 2);
+  }
+  .opf-dc-check {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    column-gap: 10px;
+  }
+  .opf-dc-check > input {
+    flex: none;
+    width: 22px;
+    height: 22px;
+    margin: 0;
+  }
+  .opf-dc-check > label {
+    display: flex;
+    align-items: center;
+    flex: 1 1 0;
+    min-width: 0;
+    min-height: 44px;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpresentation/opf-editor",
-  "version": "0.26.5",
+  "version": "0.26.7",
   "description": "Embeddable local OPF editor primitives built on the deterministic renderer.",
   "license": "MIT",
   "type": "module",
@@ -231,6 +231,10 @@
       "types": "./dist/annotations.d.ts",
       "default": "./dist/annotations.js"
     },
+    "./source-worker": {
+      "types": "./dist/source-worker.d.ts",
+      "default": "./dist/source-worker.js"
+    },
     "./source-pane": {
       "types": "./dist/source-pane.d.ts",
       "default": "./dist/source-pane.js"
@@ -283,10 +287,10 @@
     "@lezer/highlight": "1.2.5",
     "jsonc-parser": "3.3.1",
     "yaml": "^2.9.1",
-    "@openpresentation/opf": "^0.26.5"
+    "@openpresentation/opf": "^0.26.7"
   },
   "peerDependencies": {
-    "@openpresentation/opf-render": "^0.26.5"
+    "@openpresentation/opf-render": "^0.26.7"
   },
   "peerDependenciesMeta": {
     "@openpresentation/opf-render": {
@@ -345,9 +349,9 @@
     "pdf-lib": "1.17.1",
     "pdfjs-dist": "6.4.299",
     "playwright": "1.64.0",
-    "@openpresentation/gallery": "0.26.5",
-    "@openpresentation/opf-render": "0.26.5",
-    "@openpresentation/opf-pptx": "0.26.5"
+    "@openpresentation/gallery": "0.26.7",
+    "@openpresentation/opf-pptx": "0.26.7",
+    "@openpresentation/opf-render": "0.26.7"
   },
   "scripts": {
     "build": "node scripts/build.mjs",
@@ -398,5 +402,5 @@
     "test:export-menu-browser": "node test/export-menu-browser.mjs",
     "test:agent-handoff-browser": "node test/agent-handoff-browser.mjs"
   },
-  "gitHead": "750d120e715b6c4930906aa71322d092d057c58d"
+  "gitHead": "9c8a2c82ee5d42462cfe1404e3a3172ab759645f"
 }