@lincyaw/workbench 0.1.0 → 0.2.0-rc.1

package/src/styles.css

@@ -1,3 +1,12 @@
+@import '@lincyaw/design/block-preview.css';
+@import '@blocknote/mantine/style.css';
+@import './document-editor/style.css';
+@import './step-production.css';
+@import './component-properties.css';
+@import './caption-timing.css';
+
+.pmw-preview__frames[data-pending-snapshot]:not([data-presentation-gated]) { visibility: hidden; }
+
 .pmw-muted {
   color: var(--pm-color-muted);
   font-size: var(--pm-text-sm);
@@ -7,17 +16,29 @@
   flex: 1;
 }
 
+/* The documents, as an editor's start page lists them. */
+
 .pmw-home {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   gap: var(--pm-space-4);
   min-height: 100%;
-  padding: var(--pm-space-6) var(--pm-space-8);
-  background: var(--pm-color-bg);
+  padding: var(--pm-space-8) clamp(var(--pm-space-4), 5vw, var(--pm-space-10));
+  background: var(--pm-color-chrome);
   overflow: auto;
 }
 
+.pmw-home > * {
+  box-sizing: border-box;
+  flex-shrink: 0;
+  min-width: 0;
+  width: 100%;
+  max-width: var(--pm-sheet-width);
+  margin-right: auto;
+  margin-left: auto;
+}
+
 .pmw-home__bar {
   display: flex;
   flex-wrap: wrap;
@@ -26,42 +47,70 @@
 }
 
 .pmw-home__title {
+  min-width: 0;
   margin: 0 auto 0 0;
-  font-family: var(--pm-font-serif);
+  overflow-wrap: anywhere;
   font-size: var(--pm-text-title);
   font-weight: 600;
+  line-height: var(--pm-leading-tight);
+}
+
+.pmw-home__heading-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--pm-space-3);
+  margin-top: var(--pm-space-2);
 }
 
 .pmw-home__heading {
   margin: 0;
   color: var(--pm-color-muted);
-  font-size: var(--pm-text-sm);
+  font-size: var(--pm-text-xs);
   font-weight: 600;
   letter-spacing: var(--pm-tracking-label);
+  text-transform: uppercase;
+}
+
+.pmw-home__search {
+  width: min(18rem, 100%);
 }
 
 .pmw-home__cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
-  gap: var(--pm-space-3);
-  margin: 0;
+  margin-block: 0;
   padding: 0;
+  overflow: hidden;
+  border: var(--pm-size-hairline) solid var(--pm-color-line);
+  border-radius: var(--pm-radius-small);
+  background: var(--pm-color-surface);
   list-style: none;
 }
 
-.pmw-home__card > .pm-ui-card {
+.pmw-home__card {
   display: flex;
-  flex-direction: column;
+  align-items: center;
   gap: var(--pm-space-2);
-  height: 100%;
+  padding-right: var(--pm-space-2);
+}
+
+.pmw-home__card + .pmw-home__card {
+  border-top: var(--pm-size-hairline) solid var(--pm-color-line);
+}
+
+.pmw-home__card:hover {
+  background: var(--pm-color-selected);
 }
 
 .pmw-home__open {
   display: flex;
-  flex-direction: column;
-  gap: var(--pm-space-1);
+  flex: 1;
+  align-items: center;
+  gap: var(--pm-space-3);
+  min-width: 0;
+  min-height: var(--pm-size-row);
   margin: 0;
-  padding: 0;
+  padding: var(--pm-space-2) var(--pm-space-4);
   border: 0;
   background: none;
   color: inherit;
@@ -70,95 +119,27 @@
   cursor: pointer;
 }
 
-.pmw-home__doc-title {
-  font-family: var(--pm-font-serif);
-  font-size: var(--pm-text-lg);
-  font-weight: 600;
-}
-
-.pmw-home__doc-dir {
-  color: var(--pm-color-muted);
-  font-family: var(--pm-font-mono);
-  font-size: var(--pm-text-xs);
-}
-
-.pmw-home__meta {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--pm-space-2);
-  margin-top: auto;
-}
-
-.pmw-home__meta > .pm-ui-anchor {
-  margin-left: auto;
-}
-
-.pmw-home__mcp {
-  display: flex;
-  flex-direction: column;
-  gap: var(--pm-space-2);
-  max-width: 36rem;
+.pmw-home__open:focus-visible {
+  outline: var(--pm-size-stroke) solid var(--pm-color-accent);
+  outline-offset: calc(-1 * var(--pm-size-stroke));
 }
 
-.pmw-home__address {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--pm-space-2);
+.pmw-home__doc-icon {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: var(--pm-size-avatar);
+  height: var(--pm-size-avatar);
+  border-radius: var(--pm-radius-tool);
+  background: var(--pm-color-accent-soft);
+  color: var(--pm-color-accent);
 }
 
-.pmw-home__address code {
+.pmw-home__doc-title {
   overflow-wrap: anywhere;
-  font-family: var(--pm-font-mono);
-  font-size: var(--pm-text-sm);
-}
-
-.pmw-search {
-  position: relative;
-  flex: 1 1 16rem;
-  max-width: 28rem;
-}
-
-.pmw-search__results {
-  position: absolute;
-  z-index: var(--pm-z-popover);
-  top: calc(100% + 4px);
-  right: 0;
-  left: 0;
-  display: flex;
-  flex-direction: column;
-  padding: var(--pm-space-2);
-  border: 1px solid var(--pm-color-line);
-  border-radius: var(--pm-radius-control);
-  background: var(--pm-color-surface);
-  box-shadow: var(--pm-shadow-float);
-}
-
-.pmw-search__group {
-  margin: var(--pm-space-1) var(--pm-space-2);
-  color: var(--pm-color-muted);
-  font-size: var(--pm-text-xs);
-  font-weight: 600;
-}
-
-.pmw-search__item {
-  display: flex;
-  align-items: center;
-  gap: var(--pm-space-2);
-  padding: var(--pm-space-2);
-  border: 0;
-  border-radius: var(--pm-radius-small);
-  background: none;
-  color: var(--pm-color-ink);
-  font: inherit;
-  text-align: start;
-  cursor: pointer;
-}
-
-.pmw-search__item:hover,
-.pmw-search__item:focus-visible {
-  background: var(--pm-color-selected);
+  font-size: var(--pm-text-md);
+  font-weight: 500;
+  line-height: var(--pm-leading-tight);
 }
 
 .pmw-operation {
@@ -178,266 +159,271 @@
   gap: var(--pm-space-2);
 }
 
-.pmw-files {
+/* The open document, as an editor shows it: the command bar, the panes, the page on its canvas, the status bar. */
+
+.pmw-document {
   display: flex;
   flex-direction: column;
-  gap: var(--pm-space-2);
-  padding: var(--pm-space-3);
-  font-size: var(--pm-text-md);
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  background: var(--pm-color-chrome);
 }
 
-.pmw-files__head {
+.pmw-toolbar {
   display: flex;
+  flex: none;
   align-items: center;
-  gap: var(--pm-space-2);
+  gap: var(--pm-space-px);
+  min-height: var(--pm-toolbar-height);
+  padding: var(--pm-space-1) var(--pm-space-2);
+  overflow-x: auto;
+  border-bottom: var(--pm-size-hairline) solid var(--pm-color-line);
+  background: var(--pm-color-chrome);
+  scrollbar-width: none;
 }
 
-.pmw-files__title {
-  margin: 0;
+.pmw-toolbar__title {
+  min-width: 0;
+  max-width: calc(var(--pm-navigation-width) * 1.5);
+  margin: 0 var(--pm-space-2) 0 var(--pm-space-1);
   overflow: hidden;
-  font-family: var(--pm-font-serif);
-  font-size: var(--pm-text-lg);
+  font-size: var(--pm-text-md);
   font-weight: 600;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.pmw-tree,
-.pmw-tree ul {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.pmw-tree ul {
-  padding-left: var(--pm-space-2);
-}
-
-.pmw-tree__dir {
-  display: flex;
-  align-items: center;
-  gap: var(--pm-space-2);
-  padding: var(--pm-space-1) var(--pm-space-2);
-  color: var(--pm-color-muted);
-  font-size: var(--pm-text-sm);
-}
+.pmw-toolbar__document { display: contents; }
 
-.pmw-tree__file {
-  display: flex;
+.pmw-toolbar__group {
+  display: inline-flex;
+  flex: none;
   align-items: center;
-  gap: var(--pm-space-2);
-  width: 100%;
-  padding: var(--pm-space-1) var(--pm-space-2);
-  border: 0;
-  border-radius: var(--pm-radius-small);
-  background: none;
-  color: var(--pm-color-ink);
-  font: inherit;
-  text-align: start;
-  cursor: pointer;
+  gap: var(--pm-space-px);
 }
 
-.pmw-tree__file:hover {
-  background: var(--pm-color-sunk);
+.pmw-toolbar__divider {
+  flex: none;
+  width: var(--pm-size-hairline);
+  height: var(--pm-size-divider);
+  margin: 0 var(--pm-space-1);
+  background: var(--pm-color-line);
 }
 
-.pmw-tree__file[data-active] {
-  background: var(--pm-color-selected);
-  box-shadow: inset 2px 0 0 var(--pm-color-accent);
-}
+.pmw-toolbar__status-short { display: none; }
 
-.pmw-tree__file:disabled {
+.pmw-toolbar__status {
+  margin: 0 var(--pm-space-2) 0 var(--pm-space-1);
   color: var(--pm-color-muted);
-  cursor: default;
+  font-size: var(--pm-text-xs);
+  white-space: nowrap;
 }
 
-.pmw-doc {
-  flex: 1;
-  min-height: 0;
+.pmw-notices:empty {
+  display: none;
 }
 
-.pmw-document { display: flex; flex-direction: column; height: 100%; min-width: 0; min-height: 0; }
-.pmw-document__bar { display: flex; flex-wrap: wrap; padding: var(--pm-space-2); border-bottom: 1px solid var(--pm-color-line); }
-.pmw-focus { display: flex; align-items: center; gap: var(--pm-space-2); padding: var(--pm-space-1) var(--pm-space-2); border-bottom: 1px solid var(--pm-color-line); background: var(--pm-color-accent-soft); }
-.pmw-focus__label { flex: none; font-size: var(--pm-text-xs); }
-.pmw-focus__quote { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--pm-text-sm); }
-
-.pmw-doc__source {
-  display: grid;
-  grid-template-rows: minmax(0, 1fr) auto;
-  min-height: 0;
-  border-right: 1px solid var(--pm-color-line);
+.pmw-notices {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  gap: var(--pm-space-2);
+  padding: var(--pm-space-2) var(--pm-space-3) 0;
 }
 
-.pmw-doc__source[hidden],
-.pmw-doc__preview[hidden] {
-  display: none;
+.pmw-notices > .pm-ui-notice {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--pm-space-2);
 }
 
-.pmw-doc__preview {
-  min-width: 0;
-  min-height: 0;
+.pmw-notice__actions {
+  display: inline-flex;
+  gap: var(--pm-space-2);
+  margin-left: auto;
 }
 
-.pmw-source {
+.pmw-problems {
   display: flex;
+  flex: 1;
   flex-direction: column;
-  min-height: 0;
-  background: var(--pm-color-code);
+  gap: var(--pm-space-1);
+  min-width: 0;
 }
 
-.pmw-source__tabs {
+.pmw-problems__summary {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--pm-space-1);
-  padding: var(--pm-space-1) var(--pm-space-2);
-  border-bottom: 1px solid var(--pm-color-line);
-  background: var(--pm-color-bg);
+  gap: var(--pm-space-2);
 }
 
-.pmw-source__tab {
-  display: inline-flex;
-  align-items: center;
-  border-radius: var(--pm-radius-small);
+.pmw-problems__failure {
+  margin: 0;
+  color: var(--pm-color-danger);
 }
 
-.pmw-source__tab > button[role='tab'] {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--pm-space-1);
-  padding: var(--pm-space-1) var(--pm-space-2);
-  border: 0;
-  background: none;
+.pmw-problems__details summary {
   color: var(--pm-color-muted);
-  font-family: var(--pm-font-mono);
-  font-size: var(--pm-text-sm);
+  font-size: var(--pm-text-xs);
   cursor: pointer;
 }
 
-.pmw-source__tab[data-active] {
-  background: var(--pm-color-surface);
-  box-shadow: var(--pm-shadow);
-}
-
-.pmw-source__tab[data-active] > button[role='tab'] {
-  color: var(--pm-color-ink);
-}
-
-.pmw-source__dot {
-  width: 0.5rem;
-  height: 0.5rem;
-  border-radius: 50%;
-  background: var(--pm-color-warn);
+.pmw-problems__details ul {
+  margin: var(--pm-space-1) 0 0;
+  padding-left: var(--pm-space-4);
+  font-family: var(--pm-font-mono);
+  font-size: var(--pm-text-xs);
+  overflow-wrap: anywhere;
 }
 
-.pmw-source__editor {
+.pmw-document__body {
+  display: flex;
   flex: 1;
+  min-width: 0;
   min-height: 0;
-  overflow: hidden;
 }
 
-.pmw-source__editor[hidden] {
-  display: none;
-}
-
-.pmw-source__empty {
-  margin: var(--pm-space-6);
+.pmw-document__body > .pmw-preview {
+  flex: 1;
+  min-width: 0;
 }
 
-.pmw-source > .pm-ui-notice {
+.pmw-document__aside {
+  box-sizing: border-box;
   display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--pm-space-2);
-  margin: var(--pm-space-2);
-}
-
-.pmw-notice__actions {
-  display: inline-flex;
-  gap: var(--pm-space-2);
+  flex: 0 0 min(var(--pm-aside-width), 38%);
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  border-left: var(--pm-size-hairline) solid var(--pm-color-line);
+  background: var(--pm-color-chrome);
 }
 
-.pmw-problems {
-  max-height: 12rem;
-  overflow: auto;
-  border-top: 1px solid var(--pm-color-line);
-  background: var(--pm-color-bg);
-}
+/* The navigation pane: the document's headings, or its slides. */
 
-.pmw-problems__head {
+.pmw-navigation {
   display: flex;
-  align-items: center;
-  gap: var(--pm-space-2);
-  margin: 0;
-  padding: var(--pm-space-2) var(--pm-space-3);
-  font-size: var(--pm-text-sm);
-  font-weight: 600;
+  flex: 0 0 var(--pm-navigation-width);
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  border-right: var(--pm-size-hairline) solid var(--pm-color-line);
+  background: var(--pm-color-chrome);
 }
 
-.pmw-problems__none {
-  margin: 0 var(--pm-space-3) var(--pm-space-2);
+.pmw-navigation__empty {
+  margin: var(--pm-space-3);
 }
 
-.pmw-problems__list {
+.pmw-navigation__list {
+  flex: 1;
   margin: 0;
-  padding: 0 0 var(--pm-space-2);
+  padding: var(--pm-space-2) var(--pm-space-2) var(--pm-space-4);
+  overflow: auto;
   list-style: none;
 }
 
-.pmw-problem {
-  display: grid;
-  grid-template-columns: auto auto auto minmax(0, 1fr);
-  align-items: center;
+.pmw-navigation__row { display: flex; align-items: center; gap: var(--pm-space-1); }
+.pmw-navigation__row > .pmw-navigation__item { flex: 1; min-width: 0; }
+.pmw-navigation > .pm-ui-notice { margin: var(--pm-space-2); }
+
+.pmw-navigation__item {
+  box-sizing: border-box;
+  display: flex;
+  align-items: baseline;
   gap: var(--pm-space-2);
   width: 100%;
-  padding: var(--pm-space-1) var(--pm-space-3);
+  margin: 0;
+  padding: var(--pm-space-1) var(--pm-space-2);
   border: 0;
+  border-radius: var(--pm-radius-tool);
   background: none;
   color: var(--pm-color-ink);
   font: inherit;
   font-size: var(--pm-text-sm);
+  line-height: 1.4;
   text-align: start;
-}
-
-button.pmw-problem {
   cursor: pointer;
 }
 
-button.pmw-problem:hover {
-  background: var(--pm-color-sunk);
+.pmw-navigation__item:hover {
+  background: var(--pm-color-hover);
 }
 
-.pmw-problem[data-severity='error'] > .pm-ui-icon {
-  color: var(--pm-color-danger);
+.pmw-navigation__item[aria-current] {
+  background: var(--pm-color-selected);
+  box-shadow: inset var(--pm-size-stroke) 0 0 var(--pm-color-accent);
+  color: var(--pm-color-accent);
+  font-weight: 600;
 }
 
-.pmw-problem[data-severity='warning'] > .pm-ui-icon {
-  color: var(--pm-color-warn);
+.pmw-navigation__item:focus-visible {
+  outline: var(--pm-size-stroke) solid var(--pm-color-accent);
+  outline-offset: calc(-1 * var(--pm-size-stroke));
 }
 
-.pmw-problem__where {
+.pmw-navigation__item[data-depth='0'] { font-weight: 600; }
+.pmw-navigation__item[data-depth='1'] { padding-left: calc(var(--pm-space-2) + var(--pm-space-4)); }
+.pmw-navigation__item[data-depth='2'] { padding-left: calc(var(--pm-space-2) + 2 * var(--pm-space-4)); color: var(--pm-color-muted); }
+.pmw-navigation__item[data-depth='3'] { padding-left: calc(var(--pm-space-2) + 3 * var(--pm-space-4)); color: var(--pm-color-muted); }
+
+.pmw-navigation__number {
+  flex: none;
+  min-width: var(--pm-space-5);
   color: var(--pm-color-muted);
-  font-family: var(--pm-font-mono);
-  font-size: var(--pm-text-xs);
+  font-variant-numeric: tabular-nums;
+  text-align: end;
 }
 
+.pmw-navigation__title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The status bar. */
+
+.pmw-statusbar {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--pm-space-4);
+  min-height: var(--pm-statusbar-height);
+  padding: 0 var(--pm-space-3);
+  overflow: hidden;
+  border-top: var(--pm-size-hairline) solid var(--pm-color-line);
+  background: var(--pm-color-chrome);
+  color: var(--pm-color-muted);
+  font-size: var(--pm-text-xs);
+  white-space: nowrap;
+}
+
+.pmw-statusbar__item > .pm-ui-icon {
+  width: var(--pm-size-icon-sm);
+  height: var(--pm-size-icon-sm);
+}
+
+.pmw-statusbar__item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--pm-space-1);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* The document on its canvas: the page draws itself in it, a slide lies on it at its own proportions. */
+
 .pmw-preview {
   display: flex;
   flex-direction: column;
   height: 100%;
   min-height: 0;
-  background: var(--pm-color-surface);
-}
-
-.pmw-preview__bar {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--pm-space-2);
-  padding: var(--pm-space-1) var(--pm-space-2);
-  border-bottom: 1px solid var(--pm-color-line);
-  background: var(--pm-color-bg);
+  background: var(--pm-color-canvas);
 }
 
 .pmw-preview > .pm-ui-notice,
@@ -445,185 +431,595 @@ button.pmw-problem:hover {
   margin: var(--pm-space-2);
 }
 
+.pmw-preview__stage {
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.pmw-preview__frames {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
 .pmw-preview__frame {
   flex: 1;
   width: 100%;
   min-height: 0;
   border: 0;
-  background: var(--pm-color-surface);
+  background: var(--pm-color-canvas);
+}
+
+/* A slide is as large as fits with the canvas around it, at the deck's proportions (`--pmw-slide-aspect`). */
+.pmw-preview__frames[data-renderer='slides'] {
+  align-items: center;
+  justify-content: center;
+  container-type: size;
+}
+
+.pmw-preview__frames[data-renderer='slides'] > .pmw-preview__frame {
+  flex: none;
+  width: min(100cqw - 2 * var(--pm-space-6), (100cqh - 2 * var(--pm-space-6)) * var(--pmw-slide-aspect));
+  height: auto;
+  aspect-ratio: var(--pmw-slide-aspect);
+  box-shadow: var(--pm-shadow-page);
 }
 
 .pmw-preview__frame[hidden] {
   display: none;
 }
 
-.pmw-status__item {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--pm-space-1);
-  white-space: nowrap;
+/* The toolbar beside the mouse. */
+
+.pmw-pointer {
+  position: absolute;
+  z-index: 5;
+  max-width: min(26rem, calc(100% - var(--pm-space-4)));
+  padding: var(--pm-space-1);
+  border: var(--pm-size-hairline) solid var(--pm-color-line-strong);
+  border-radius: var(--pm-radius-panel);
+  background: var(--pm-color-surface);
+  box-shadow: var(--pm-shadow-float);
 }
 
-/* Radix owns positioning, layering and keyboard/focus behavior; these are visual tokens only. */
-.pmw-overlay { position: relative; inset: auto; transform: none; }
-.pmw-dialog-overlay { position: fixed; inset: 0; z-index: calc(var(--pm-z-dialog) - 1); background: rgb(28 27 25 / 32%); }
-.pmw-overlay [data-disabled] { color: var(--pm-color-muted); cursor: default; }
-.pm-ui-tab[data-state='active'], .pmw-search__item[data-selected='true'] { background: var(--pm-color-selected); }
-.pmw-search [cmdk-group-heading] { margin: var(--pm-space-1) var(--pm-space-2); color: var(--pm-color-muted); font-size: var(--pm-text-xs); }
-.pmw-source__body { display: flex; flex: 1; flex-direction: column; min-height: 0; }
-.pmw-separator { width: 6px; background: var(--pm-color-line); }
-.pmw-separator:hover, .pmw-separator:focus-visible { background: var(--pm-color-accent); }
-.pmw-doc > [hidden] { display: none !important; }
-.pmw-tree [role='treeitem']:focus-visible { outline: 2px solid var(--pm-color-accent); outline-offset: -2px; }
-
-.pmw-changes {
-  display: grid;
-  align-content: start;
-  gap: var(--pm-space-3);
-  height: 100%;
-  overflow: auto;
+.pmw-pointer[data-step='comment'] {
+  width: min(24rem, calc(100% - var(--pm-space-4)));
   padding: var(--pm-space-3);
-  box-sizing: border-box;
 }
 
-.pmw-changes__group > p {
-  margin: 0 0 var(--pm-space-2);
+.pmw-pointer[data-step='tools'] {
+  width: max-content;
+  padding: 0;
+  border-radius: var(--pm-radius-control);
 }
 
-.pmw-changes__head {
+.pmw-pointer__tools {
   display: flex;
   align-items: center;
+}
+
+.pmw-pointer__form {
+  display: flex;
+  flex-direction: column;
   gap: var(--pm-space-2);
-  margin: 0 0 var(--pm-space-2);
+}
+
+.pmw-pointer__quote {
+  max-height: 4.5em;
+  margin: 0;
+  padding-left: var(--pm-space-2);
+  overflow: hidden;
+  border-left: var(--pm-size-rule) solid var(--pm-color-accent);
+  color: var(--pm-color-muted);
   font-size: var(--pm-text-sm);
-  font-weight: 600;
+  line-height: 1.5;
 }
 
-.pmw-changes__list {
-  display: grid;
-  gap: var(--pm-space-1);
-  margin: 0 0 var(--pm-space-2);
-  padding: 0;
-  list-style: none;
+.pmw-pointer__text {
+  width: 100%;
+  font: inherit;
 }
 
-.pmw-changes__file {
+.pmw-pointer__actions {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
+  justify-content: flex-end;
   gap: var(--pm-space-2);
-  font-size: var(--pm-text-sm);
 }
 
-.pmw-changes__file > details {
+/* The side panes: comments and version history. */
+
+.pmw-pane {
+  display: flex;
   flex: 1;
-  min-width: 0;
+  flex-direction: column;
+  gap: var(--pm-space-2);
+  min-height: 0;
+  padding-bottom: var(--pm-space-3);
+  overflow: auto;
 }
 
-.pmw-changes__file summary {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: 0 var(--pm-space-2);
-  list-style: none;
-  cursor: pointer;
+.pmw-pane > .pm-ui-notice,
+.pmw-pane > .pm-ui-empty {
+  margin: 0 var(--pm-space-3);
 }
 
-.pmw-changes__file summary::-webkit-details-marker {
-  display: none;
+.pmw-pane__header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--pm-space-2);
+  min-height: var(--pm-pane-header-height);
+  padding: 0 var(--pm-space-2) 0 var(--pm-space-3);
+  background: var(--pm-color-chrome);
 }
 
-.pmw-changes__file summary::before {
-  content: '▸';
+.pmw-pane__title {
+  flex: 1;
+  margin: 0;
   color: var(--pm-color-muted);
+  font-size: var(--pm-text-xs);
+  font-weight: 600;
+  letter-spacing: var(--pm-tracking-label);
+  text-transform: uppercase;
 }
 
-.pmw-changes__file details[open] > summary::before {
-  content: '▾';
+.pmw-pane__footer {
+  margin: 0 var(--pm-space-3);
 }
 
-.pmw-changes__path {
-  overflow-wrap: anywhere;
-  font-family: var(--pm-font-mono);
+.pmw-comments,
+.pmw-versions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pm-space-2);
+  margin: 0;
+  padding: 0 var(--pm-space-3);
+  list-style: none;
 }
 
-.pmw-changes__path[data-kind='added'] {
-  color: var(--pm-color-ok);
+.pmw-comment {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pm-space-2);
+  padding: var(--pm-space-3);
+  border: var(--pm-size-hairline) solid var(--pm-color-line);
+  border-left: var(--pm-size-rule) solid var(--pm-color-accent);
+  border-radius: var(--pm-radius-card);
+  background: var(--pm-color-surface);
 }
 
-.pmw-changes__path[data-kind='deleted'] {
-  color: var(--pm-color-danger);
-  text-decoration: line-through;
+.pmw-comment[data-status='resolved'] {
+  border-left-color: var(--pm-color-line-strong);
+  opacity: 0.75;
 }
 
-.pmw-changes__counts {
+.pmw-comment__place {
   display: inline-flex;
-  gap: var(--pm-space-1);
-  font-family: var(--pm-font-mono);
+  align-items: center;
+  gap: var(--pm-space-2);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--pm-color-muted);
+  font: inherit;
   font-size: var(--pm-text-xs);
+  text-align: start;
+  cursor: pointer;
 }
 
-.pmw-changes__counts [data-sign='added'] {
-  color: var(--pm-color-ok);
-}
-
-.pmw-changes__counts [data-sign='removed'] {
-  color: var(--pm-color-danger);
+.pmw-comment__place:hover {
+  color: var(--pm-color-accent);
 }
 
-.pmw-changes__diff {
-  max-height: 20rem;
-  overflow: auto;
-  margin: var(--pm-space-1) 0 0;
-  padding: var(--pm-space-2);
-  border-radius: var(--pm-radius-small);
-  background: var(--pm-color-code);
+.pmw-comment__number {
+  display: inline-grid;
+  place-items: center;
+  min-width: var(--pm-size-badge);
+  height: var(--pm-size-badge);
+  padding: 0 var(--pm-space-1);
+  box-sizing: border-box;
+  border-radius: var(--pm-radius-pill);
+  background: var(--pm-color-accent);
+  color: var(--pm-color-on-accent);
   font-size: var(--pm-text-xs);
+  font-weight: 600;
 }
 
-.pmw-changes__steps {
-  margin-bottom: var(--pm-space-2);
+.pmw-comment__quote {
+  margin: 0;
+  padding-left: var(--pm-space-2);
+  border-left: var(--pm-size-stroke) solid var(--pm-color-line-strong);
+  color: var(--pm-color-muted);
   font-size: var(--pm-text-sm);
 }
 
-.pmw-changes__steps li {
+.pmw-comment__text {
+  margin: 0;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.pmw-comment__meta {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  justify-content: space-between;
   gap: var(--pm-space-2);
+  color: var(--pm-color-muted);
+  font-size: var(--pm-text-xs);
 }
 
-.pmw-changes__form {
+.pmw-comment__actions {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--pm-space-2);
+  align-items: center;
+  gap: var(--pm-space-1);
 }
 
-.pmw-changes__form .pm-ui-input {
-  flex: 1 1 100%;
+.pmw-comment__actions > .pm-ui-icon-button {
+  margin-left: auto;
 }
 
-.pmw-changes__revision {
+.pmw-version {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 0 var(--pm-space-2);
-  align-items: center;
-  font-size: var(--pm-text-sm);
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--pm-space-1) var(--pm-space-2);
+  padding: var(--pm-space-2) 0;
+  border-bottom: var(--pm-size-hairline) solid var(--pm-color-line);
+}
+
+.pmw-version__icon {
+  display: grid;
+  place-items: center;
+  width: var(--pm-size-avatar);
+  height: var(--pm-size-avatar);
+  border-radius: 50%;
+  background: var(--pm-color-sunk);
+  color: var(--pm-color-muted);
 }
 
-.pmw-changes__subject {
+.pmw-version[data-origin='agent'] .pmw-version__icon {
+  background: var(--pm-color-accent-soft);
+  color: var(--pm-color-accent);
+}
+
+.pmw-version__summary {
+  margin: 0;
   overflow-wrap: anywhere;
+  font-size: var(--pm-text-sm);
+  font-weight: 600;
 }
 
-.pmw-changes__meta {
+.pmw-version[data-undone] .pmw-version__summary {
+  color: var(--pm-color-muted);
+  text-decoration: line-through;
+}
+
+.pmw-version__meta {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--pm-space-1);
-  grid-row: 2;
+  margin: 0;
+  color: var(--pm-color-muted);
   font-size: var(--pm-text-xs);
 }
 
-.pmw-changes__revision > :last-child {
-  grid-row: 1 / 3;
+.pmw-version__action {
   grid-column: 2;
+  justify-self: start;
+}
+
+/* Above the video: its file. */
+
+
+
+/* The Export pane: what the document can be made into, and what was made. */
+
+.pmw-export__targets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--pm-space-2);
+  margin: 0;
+  padding: 0 var(--pm-space-3);
+  list-style: none;
+}
+
+.pmw-export__subtitle {
+  margin: var(--pm-space-2) var(--pm-space-3) 0;
+  color: var(--pm-color-muted);
+  font-size: var(--pm-text-xs);
+  font-weight: 600;
+}
+
+.pmw-export__video {
+  display: block;
+  width: 100%;
+  max-height: 70vh;
+  border-radius: var(--pm-radius-small);
+  background: var(--pm-color-sunk);
+}
+
+.pmw-jobs {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0 var(--pm-space-3);
+  list-style: none;
+}
+
+.pmw-job {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--pm-space-1) var(--pm-space-2);
+  padding: var(--pm-space-2) 0;
+  border-bottom: var(--pm-size-hairline) solid var(--pm-color-line);
+}
+
+.pmw-job__icon {
+  display: grid;
+  place-items: center;
+  width: var(--pm-size-avatar);
+  height: var(--pm-size-avatar);
+  border-radius: 50%;
+  background: var(--pm-color-sunk);
+  color: var(--pm-color-muted);
+}
+
+.pmw-job[data-state='running'] .pmw-job__icon {
+  background: var(--pm-color-accent-soft);
+  color: var(--pm-color-accent);
+}
+
+.pmw-job[data-state='failed'] .pmw-job__icon {
+  background: var(--pm-color-danger-soft);
+  color: var(--pm-color-danger);
+}
+
+.pmw-job__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pm-space-1);
+  min-width: 0;
+}
+
+.pmw-job__title {
+  margin: 0;
+  font-size: var(--pm-text-sm);
+  font-weight: 600;
+}
+
+.pmw-job__meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--pm-space-1);
+  margin: 0;
+  color: var(--pm-color-muted);
+  font-size: var(--pm-text-xs);
+}
+
+.pmw-job__progress {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pm-space-1);
+  color: var(--pm-color-muted);
+  font-size: var(--pm-text-xs);
+}
+
+.pmw-job__progress progress {
+  width: 100%;
+  height: var(--pm-space-1);
+  accent-color: var(--pm-color-accent);
+}
+
+/* The kitten above the bar, as far along it as the job has come (`--pmw-job-done`, 0 to 1), never past its ends. */
+.pmw-job__runner {
+  display: block;
+  margin-left: calc((100% - var(--pm-size-mascot-sm)) * var(--pmw-job-done));
+  line-height: 0;
+}
+
+.pmw-job__runner:empty {
+  display: none;
+}
+
+.pmw-job__error {
+  margin: 0;
+  color: var(--pm-color-danger);
+  font-size: var(--pm-text-xs);
+  overflow-wrap: anywhere;
+}
+
+.pmw-job__log summary {
+  color: var(--pm-color-muted);
+  font-size: var(--pm-text-xs);
+  cursor: pointer;
+}
+
+.pmw-job__log-lines {
+  display: flex;
+  flex-direction: column-reverse;
+  max-height: calc(var(--pm-size-row) * 5);
+  margin-top: var(--pm-space-1);
+  overflow: auto;
+  border-radius: var(--pm-radius-small);
+  background: var(--pm-color-code);
+}
+
+.pmw-job__log pre {
+  margin: 0;
+  padding: var(--pm-space-2);
+  color: var(--pm-color-ink);
+  font-family: var(--pm-font-mono);
+  font-size: var(--pm-text-xs);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.pmw-job__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--pm-space-2);
+}
+
+.pmw-job__actions:empty {
+  display: none;
+}
+
+/* Radix owns positioning, layering and keyboard/focus behavior; these are visual tokens only. */
+
+
+.pmw-help {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pm-space-2);
+  margin: 0;
+  padding-left: var(--pm-space-4);
+  line-height: var(--pm-leading-ui);
+}
+
+/* Narrow: labels go, icons stay; the side pane covers the document. */
+
+@media (max-width: 1279px) {
+  .pmw-toolbar__title { max-width: 40vw; }
+  .pmw-document__body { position: relative; }
+  .pmw-navigation {
+    position: absolute;
+    inset: 0 auto 0 0;
+    z-index: 6;
+    width: min(100%, var(--pm-navigation-width));
+    box-shadow: var(--pm-shadow-float);
+  }
+  .pmw-document__aside {
+    position: absolute;
+    inset: 0 0 0 auto;
+    z-index: 6;
+    width: min(100%, 24rem);
+    box-shadow: var(--pm-shadow-float);
+  }
+}
+
+/* Per-step speech: compact step strip and two tracks, alongside either document or presentation. */
+.pmw-narration { min-height: 0; overflow: auto; }
+.pmw-narration__body { display: grid; gap: var(--pm-space-3); padding: var(--pm-space-3); }
+.pmw-narration__place { display: flex; align-items: center; gap: var(--pm-space-2); margin: 0; font-family: var(--pm-font-mono); font-size: var(--pm-text-xs); }
+.pmw-narration__place span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pmw-narration__steps { display: flex; gap: var(--pm-space-1); overflow: auto; padding-block: var(--pm-space-1); }
+.pmw-narration__steps button { flex: none; }
+.pmw-narration__modes { display: flex; flex-wrap: wrap; gap: var(--pm-space-1); }
+.pmw-narration__actions { display: flex; justify-content: flex-end; gap: var(--pm-space-2); }
+.pmw-narration__timeline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pm-space-1); padding: var(--pm-space-2); border-radius: var(--pm-radius-control); background: var(--pm-color-sunk); font-size: var(--pm-text-xs); }
+.pmw-narration__timeline span { display: flex; align-items: center; gap: var(--pm-space-1); padding: var(--pm-space-2); border-radius: var(--pm-radius-control); }
+.pmw-narration__animation { grid-column: 1; background: var(--pm-color-accent-soft); color: var(--pm-color-accent); }
+.pmw-narration__speech { grid-column: 1; background: var(--pm-color-surface); color: var(--pm-color-ink); }
+.pmw-narration__timeline[data-mode='after'] .pmw-narration__speech { grid-column: 2; }
+
+/* Business regions arrange shared controls; their surfaces and states stay in design. */
+.pmw-document__main { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; isolation: isolate; }
+.pmw-document__source { display: flex; flex: 1; min-width: 0; min-height: 0; }
+.pmw-document__source[hidden] { display: none; }
+.pmw-source-document { flex: 1; min-width: 0; min-height: 0; overflow: auto; padding: var(--pm-space-5); background: var(--pm-color-canvas); }
+.pmw-source-document__notices { position: sticky; inset-block-start: 0; z-index: var(--pm-z-site-header); display: grid; gap: var(--pm-space-3); margin-block-end: var(--pm-space-3); }
+.pmw-source-document__recovery { display: grid; gap: var(--pm-space-2); min-width: 0; }
+.pmw-source-document__recovery-actions { display: flex; flex-wrap: wrap; gap: var(--pm-space-2); }
+.pmw-source-document__diagnostics { margin-block-end: var(--pm-space-3); }
+.pmw-source-document__sheet { position: relative; max-width: var(--pm-sheet-width); min-height: 100%; margin-inline: auto; padding-block: var(--pm-space-4); background: var(--pm-color-surface); box-shadow: var(--pm-shadow-page); }
+/* Opening: the page's own margins, so that the placeholder lines sit where the text will. */
+.pmw-source-document__sheet--loading { box-sizing: border-box; padding: var(--pm-space-10) var(--pm-space-12); }
+.pmw-voice__filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pm-space-3); }
+.pmw-voice__summary, .pmw-voice__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pm-space-2); min-width: 0; overflow-wrap: anywhere; }
+.pmw-voice__status { justify-content: space-between; }
+.pmw-voice__steps { display: flex; flex-wrap: wrap; gap: var(--pm-space-1); }
+.pmw-voice__sample { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
+.pmw-document__main > .pmw-preview { flex: 1; height: auto; }
+.pmw-step-timeline { display: flex; flex: none; flex-direction: column; gap: var(--pm-space-2); padding: var(--pm-space-3); border-top: var(--pm-size-hairline) solid var(--pm-color-line); }
+.pmw-step-timeline__heading { display: flex; justify-content: space-between; gap: var(--pm-space-3); color: var(--pm-color-muted); font-size: var(--pm-text-xs); }
+.pmw-step-timeline__steps { display: flex; gap: var(--pm-space-1); overflow-x: auto; padding: var(--pm-space-1); }
+.pmw-step-timeline__steps > * { flex: none; }
+.pmw-toolbar--present { justify-content: flex-end; }
+@media (max-width: 767px) {
+  .pmw-source-document { padding: var(--pm-space-2); }
+  .pmw-toolbar--document { flex-wrap: wrap; }
+  .pmw-toolbar--document .pmw-toolbar__document { display: flex; flex: 1 0 100%; align-items: center; gap: var(--pm-space-px); min-width: 0; }
+  .pmw-toolbar--document .pmw-toolbar__title { flex: 1; max-width: none; }
+  .pmw-toolbar--document .pmw-toolbar__status { flex: 1 1 0; }
+  .pmw-toolbar--document > .pmw-spacer { display: none; }
+  .pmw-toolbar__status { flex: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+  .pmw-toolbar__status-full:has(+ .pmw-toolbar__status-short) { display: none; }
+  .pmw-toolbar__status-short { display: inline; }
+  .pmw-document__aside { width: 100%; }
+  .pmw-step-timeline { padding: var(--pm-space-2); }
+}
+
+/* Production owns pane layout; controls and dock chrome live in the shared design layer. */
+.pmw-speech-settings { min-width: 0; }
+.pmw-speech-settings__content, .pmw-speech-settings__fields { display: flex; flex-direction: column; gap: var(--pm-space-3); min-width: 0; }
+.pmw-speech-settings__content { padding: var(--pm-space-3); }
+.pmw-speech-settings__content > p, .pmw-speech-settings__fields > p { margin: 0; }
+.pmw-speech-settings__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pm-space-2); }
+.pmw-production { position: relative; display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
+.pmw-production__workarea { flex: 1; min-width: 0; min-height: 0; }
+.pmw-production__main, .pmw-production__body { flex: 1; min-width: 0; min-height: 0; }
+.pmw-production__library, .pmw-production__visuals, .pmw-production__properties { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+.pmw-production__frame { display: flex; flex: 1; min-width: 0; min-height: 0; }
+.pmw-production__frame > .pmw-preview { flex: 1; }
+.pmw-production__monitor-tools { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pm-space-2); padding: var(--pm-space-2) var(--pm-space-3); }
+.pmw-production__transport { display: flex; flex: 0 1 auto; align-items: center; flex-wrap: wrap; gap: var(--pm-space-2); min-width: 0; }
+.pmw-production__fields { display: flex; flex-direction: column; gap: var(--pm-space-4); min-width: 0; }
+.pmw-production [hidden] { display: none; }
+.pmw-production__feedback { display: flex; flex-direction: column; gap: var(--pm-space-2); max-height: min(60vh, var(--pm-production-feedback-height)); overflow-y: auto; }
+.pmw-production__timeline { min-width: 0; min-height: 0; overflow: auto; }
+.pmw-voice__form { display: flex; flex-direction: column; gap: var(--pm-space-3); min-width: 0; }
+.pmw-voice__actions { display: flex; flex-wrap: wrap; gap: var(--pm-space-2); }
+.pmw-audio-recording { display: flex; flex-direction: column; gap: var(--pm-space-3); min-width: 0; }
+.pmw-voice__steps { display: flex; flex-wrap: wrap; gap: var(--pm-space-1); max-height: var(--pm-block-preview-height); overflow-y: auto; }
+.pmw-transcription, .pmw-transcription__atoms { display: grid; gap: var(--pm-space-3); min-width: 0; }
+.pmw-transcription__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pm-space-2); min-width: 0; }
+.pmw-transcription__actions > span { min-width: 0; overflow-wrap: anywhere; }
+.pmw-transcription__review { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pm-space-3); }
+@media (max-width: 767px) { .pmw-transcription__review { grid-template-columns: minmax(0, 1fr); } }
+
+.pmw-history-pages {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--pm-space-2);
+  margin: 0 var(--pm-space-3);
+}
+
+/* The host's pending approvals, from the app bar. */
+.pmw-approvals { display: grid; gap: var(--pm-space-2); }
+.pmw-approvals__heading { margin: 0; font-size: var(--pm-text-md); font-weight: var(--pm-weight-semibold); }
+.pmw-approvals__list { display: grid; gap: var(--pm-space-3); margin: 0; padding: 0; list-style: none; }
+.pmw-approvals__item { display: grid; gap: var(--pm-space-1); }
+.pmw-approvals__item + .pmw-approvals__item { padding-top: var(--pm-space-3); border-top: var(--pm-size-hairline) solid var(--pm-color-line); }
+.pmw-approvals__title { margin: 0; color: var(--pm-color-ink); overflow-wrap: anywhere; }
+.pmw-approvals .pmw-muted { margin: 0; }
+.pmw-approvals__detail { max-height: 30vh; margin: 0; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
+.pmw-approvals__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--pm-space-2); }
+
+/* The kitten walking over the preview to the blocks the AI changed: its ground line meets the block's lower left. */
+.pmw-change-trail {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  pointer-events: none;
+  transform: translate(calc(var(--pmw-trail-x) - 45%), calc(var(--pmw-trail-y) - 89%));
+  transition: transform var(--pm-duration-walk) linear, opacity var(--pm-duration-slow);
+}
+
+.pmw-change-trail[data-phase='done'] {
+  opacity: 0.9;
+}
+
+.pmw-change-trail__facing[data-facing='left'] {
+  transform: scaleX(-1);
 }