ui refactor phase 2

soleprint/artery/shunts/mercadopago/templates/index.html

@@ -159,6 +159,19 @@
       display: flex;
       align-items: center;
       gap: var(--space-2);
+      /* The header is a fixed height and the panel clips, so a crowded actions strip
+         silently loses whatever sits at its end. Labels give way instead: they
+         truncate, the controls never shrink. (As Panel.vue does.) */
+      min-width: 0;
+    }
+    .panel-actions > :is(button, input, select, label) {
+      flex-shrink: 0;
+    }
+    .panel-actions > span {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
     .panel-status {

soleprint/artery/veins/jira/ui/index.html

@@ -165,6 +165,19 @@ textarea {
   display: flex;
   align-items: center;
   gap: var(--space-2);
+  /* The header is a fixed height and the panel clips, so a crowded actions strip
+     silently loses whatever sits at its end. Labels give way instead: they
+     truncate, the controls never shrink. (As Panel.vue does.) */
+  min-width: 0;
+}
+.panel-actions > :is(button, input, select, label) {
+  flex-shrink: 0;
+}
+.panel-actions > span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .panel-status {

soleprint/common/theme/parts/example.html

@@ -14,7 +14,7 @@
   WHAT TO LOOK AT
 
     · vertical and horizontal splits, nested, all draggable
-    · ⤢ on any panel header — maximize, Escape or the backdrop to come back
+    · ⤢ on any panel header — maximize; ⤡ or Escape to come back
     · sliders that are schema-driven, not hand-written markup
     · a live feed at a few hundred events a second, with the coalesced and
       uncoalesced counters side by side. That gap IS the point of onFrame().
@@ -44,7 +44,6 @@
     --space-1: 4px;
     --space-2: 8px;
     --space-3: 12px;
-    --space-4: 16px;
     --status-error: #f06565;
     --status-escalating: #f5a623;
     --status-idle: #555568;
@@ -131,27 +130,31 @@ textarea {
   background: transparent;
 }
 /* part: maximize — common/theme/parts/maximize.css */
-.panel-maximized {
+/* Covers the window. `fixed` so it escapes the split panes without disturbing
-  position: fixed;
+   their sizing — restoring puts everything back untouched. */
-  inset: var(--space-4);
+[data-maximize].maximized {
-  z-index: 1000;
-}
-
-/* The page behind it keeps its layout — only this panel moves — so a backdrop
- * is what stops the rest showing through around the inset. */
-.panel-maximize-backdrop {
   position: fixed;
   inset: 0;
-  z-index: 999;
+  z-index: 400;
-  background: var(--surface-0);
+  border-radius: 0;
-  opacity: 0.85;
+  border: none;
 }
 
-.panel-maximize-btn {
+.panel-max {
-  padding: 0 6px;
+  flex-shrink: 0;
-  line-height: 1;
+  padding: 0 var(--space-1);
   font-size: 13px;
+  line-height: 1.4;
+  color: var(--text-secondary);
+  background: none;
+  border: none;
+  cursor: pointer;
+  opacity: 0.6;
+  transition: opacity 0.12s;
 }
+.panel-max:hover,
+[data-maximize]:hover .panel-max { opacity: 1; }
+.panel-max:hover { color: var(--text-primary); }
 /* part: panel — common/theme/parts/panel.css */
 .panel {
   position: relative;
@@ -188,6 +191,19 @@ textarea {
   display: flex;
   align-items: center;
   gap: var(--space-2);
+  /* The header is a fixed height and the panel clips, so a crowded actions strip
+     silently loses whatever sits at its end. Labels give way instead: they
+     truncate, the controls never shrink. (As Panel.vue does.) */
+  min-width: 0;
+}
+.panel-actions > :is(button, input, select, label) {
+  flex-shrink: 0;
+}
+.panel-actions > span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .panel-status {
@@ -467,52 +483,43 @@ input[type="range"]::-moz-range-thumb {
   'use strict'
 
   var open = null
-  var backdrop = null
+
+  function label(button, on) {
+    button.textContent = on ? '⤡' : '⤢'
+    button.title = on ? 'Restore (Esc)' : 'Maximize'
+  }
 
   function restore() {
     if (!open) return
-    open.panel.classList.remove('panel-maximized')
+    open.panel.classList.remove('maximized')
-    open.button.textContent = '⤢'
+    label(open.button, false)
-    open.button.title = 'Maximize'
-    if (backdrop && backdrop.parentNode) backdrop.parentNode.removeChild(backdrop)
     open = null
   }
 
   function maximize(panel, button) {
     restore()
-    if (!backdrop) {
+    panel.classList.add('maximized')
-      backdrop = document.createElement('div')
+    label(button, true)
-      backdrop.className = 'panel-maximize-backdrop'
-      backdrop.addEventListener('click', restore)
-    }
-    document.body.appendChild(backdrop)
-    panel.classList.add('panel-maximized')
-    button.textContent = '⤡'
-    button.title = 'Restore'
     open = { panel: panel, button: button }
   }
 
   function setup(panel) {
-    var actions = panel.querySelector(':scope > .panel-header > .panel-actions')
+    var header = panel.querySelector(':scope > .panel-header')
-    if (!actions) {
+    if (!header) return
-      // The header has no actions strip, so there is nowhere to put the button.
-      // Say so rather than failing silently: the fix is one empty <span>.
-      var header = panel.querySelector(':scope > .panel-header')
-      if (!header) return
-      actions = document.createElement('span')
-      actions.className = 'panel-actions'
-      header.appendChild(actions)
-    }
     var button = document.createElement('button')
-    button.className = 'panel-maximize-btn'
+    button.className = 'panel-max'
     button.type = 'button'
-    button.textContent = '⤢'
+    label(button, false)
-    button.title = 'Maximize'
     button.addEventListener('click', function () {
       if (open && open.panel === panel) restore()
       else maximize(panel, button)
     })
-    actions.appendChild(button)
+    // After the actions strip and before the status dot: the SFC's order.
+    var actions = header.querySelector(':scope > .panel-actions')
+    var status = header.querySelector(':scope > .panel-status')
+    if (actions && actions.nextSibling) header.insertBefore(button, actions.nextSibling)
+    else if (status) header.insertBefore(button, status)
+    else header.appendChild(button)
   }
 
   function start() {

soleprint/common/theme/parts/maximize.css

@@ -1,4 +1,4 @@
-/* part: maximize — one panel fills the viewport, and comes back.
+/* part: maximize — one panel fills the window, and comes back.
  *
  * USE WHEN: one panel is the main event and should be able to fill the screen.
  * NEEDS: panel (it maximizes .panel; there is no other box)
@@ -6,55 +6,56 @@
  * ADD: paste this into the page, then run `make theme bake`.
  *   <div class="panel" data-maximize>      <!-- the attribute is the whole change -->
  *
- * NOT derived from anything. It is the one thing on the "components that work"
+ * Derived from common/ui/src/components/Panel.vue. The Vue panel learned to
- * list that the framework does not have: `maximize`, `fullscreen` and `expand`
+ * maximize in mts, the last application that added to the framework, and came
- * appear nowhere in common/ui. mts built a Teleport lightbox for frames and
+ * upstream from there; this part now spells it the same way, so a page and an
- * doocus built a collapse-to-bar; neither is this, and neither is reusable.
+ * app show the same DOM — `.panel.maximized`, a `.panel-max` button, Escape to
- *
+ * restore. It had no upstream before, and the audit said "cannot audit"; now it
- * So there is no `Derived from` line and the audit will say so. That is
+ * has one, and the audit checks it.
- * correct — this part has no upstream to drift from, and inventing a
+ *
- * correspondence to make a check pass would be worse than the check printing
+ * One deliberate difference, and it is about the binding, not the look: the Vue
- * "cannot audit".
+ * panel is maximizable unless told otherwise (`maximizable` defaults to true),
- *
+ * while a plain panel opts in with `data-maximize`. A plain page has no props,
- * TOKENS: --surface-0 --space-4
+ * and a button nobody asked for on every box is noise the markup never chose.
- *
+ *
- * Needs maximize.js. Pairs with panel.css — it maximizes `.panel`, and there is
+ * The selector is `[data-maximize].maximized` rather than the SFC's
- * no second box in this system to maximize.
+ * `.panel.maximized` for a mechanical reason: bake finds parts by the classes in
- *
+ * their CSS, and a `.panel` here would summon this part into every page that has
- * MARKUP  add the attribute; the button is injected into .panel-actions.
+ * a panel. The element carries the same classes either way.
- *   <div class="panel" data-maximize>
+ *
- *     <div class="panel-header">
+ * TOKENS: --space-1 --text-secondary --text-primary
- *       <span class="panel-title">Stream</span>
+ *
- *       <span class="panel-actions"></span>
+ * Needs maximize.js, which injects the button after `.panel-actions` — where
- *     </div>
+ * the Vue panel renders it — so the markup stays a plain panel.
- *     <div class="panel-body">…</div>
+ *
- *   </div>
+ * `position: fixed` rather than the Fullscreen API, for the reason the SFC gives:
- *
+ * a fullscreen element paints over every sibling and needs a user gesture; a
- * `position: fixed` rather than the Fullscreen API on purpose: a fixed element
+ * fixed panel stays in the page, keeps its controls on screen, and a feed
- * still lives in the page, so a feed writing into it keeps working and Escape
+ * writing into it keeps working.
- * is ours to handle. The Fullscreen API also needs a user gesture and is
- * refused outright in some embedded webviews — which is exactly where these
- * pages get opened.
  */
 
-.panel-maximized {
+/* Covers the window. `fixed` so it escapes the split panes without disturbing
-  position: fixed;
+   their sizing — restoring puts everything back untouched. */
-  inset: var(--space-4);
+[data-maximize].maximized {
-  z-index: 1000;
-}
-
-/* The page behind it keeps its layout — only this panel moves — so a backdrop
- * is what stops the rest showing through around the inset. */
-.panel-maximize-backdrop {
   position: fixed;
   inset: 0;
-  z-index: 999;
+  z-index: 400;
-  background: var(--surface-0);
+  border-radius: 0;
-  opacity: 0.85;
+  border: none;
 }
 
-.panel-maximize-btn {
+.panel-max {
-  padding: 0 6px;
+  flex-shrink: 0;
-  line-height: 1;
+  padding: 0 var(--space-1);
   font-size: 13px;
+  line-height: 1.4;
+  color: var(--text-secondary);
+  background: none;
+  border: none;
+  cursor: pointer;
+  opacity: 0.6;
+  transition: opacity 0.12s;
 }
+.panel-max:hover,
+[data-maximize]:hover .panel-max { opacity: 1; }
+.panel-max:hover { color: var(--text-primary); }

soleprint/common/theme/parts/maximize.js

@@ -2,11 +2,12 @@
  *
  * DETECT: data-maximize
  *
- * Injects a button into each `[data-maximize] .panel-actions`, so the markup
+ * Injects a `.panel-max` button after each `[data-maximize]` panel's
- * stays a plain panel and nothing has to be wired by hand. Escape closes.
+ * `.panel-actions` — where Panel.vue renders it — so the markup stays a plain
+ * panel and nothing has to be wired by hand. Escape restores, as in the SFC.
  *
  * Only one panel is maximized at a time: maximizing a second restores the
- * first. Two fixed panels at the same inset would sit exactly on top of each
+ * first. Two panels covering the window at once would sit exactly on top of each
  * other, which looks like a rendering bug rather than a state.
  */
 
@@ -14,52 +15,43 @@
   'use strict'
 
   var open = null
-  var backdrop = null
+
+  function label(button, on) {
+    button.textContent = on ? '⤡' : '⤢'
+    button.title = on ? 'Restore (Esc)' : 'Maximize'
+  }
 
   function restore() {
     if (!open) return
-    open.panel.classList.remove('panel-maximized')
+    open.panel.classList.remove('maximized')
-    open.button.textContent = '⤢'
+    label(open.button, false)
-    open.button.title = 'Maximize'
-    if (backdrop && backdrop.parentNode) backdrop.parentNode.removeChild(backdrop)
     open = null
   }
 
   function maximize(panel, button) {
     restore()
-    if (!backdrop) {
+    panel.classList.add('maximized')
-      backdrop = document.createElement('div')
+    label(button, true)
-      backdrop.className = 'panel-maximize-backdrop'
-      backdrop.addEventListener('click', restore)
-    }
-    document.body.appendChild(backdrop)
-    panel.classList.add('panel-maximized')
-    button.textContent = '⤡'
-    button.title = 'Restore'
     open = { panel: panel, button: button }
   }
 
   function setup(panel) {
-    var actions = panel.querySelector(':scope > .panel-header > .panel-actions')
+    var header = panel.querySelector(':scope > .panel-header')
-    if (!actions) {
+    if (!header) return
-      // The header has no actions strip, so there is nowhere to put the button.
-      // Say so rather than failing silently: the fix is one empty <span>.
-      var header = panel.querySelector(':scope > .panel-header')
-      if (!header) return
-      actions = document.createElement('span')
-      actions.className = 'panel-actions'
-      header.appendChild(actions)
-    }
     var button = document.createElement('button')
-    button.className = 'panel-maximize-btn'
+    button.className = 'panel-max'
     button.type = 'button'
-    button.textContent = '⤢'
+    label(button, false)
-    button.title = 'Maximize'
     button.addEventListener('click', function () {
       if (open && open.panel === panel) restore()
       else maximize(panel, button)
     })
-    actions.appendChild(button)
+    // After the actions strip and before the status dot: the SFC's order.
+    var actions = header.querySelector(':scope > .panel-actions')
+    var status = header.querySelector(':scope > .panel-status')
+    if (actions && actions.nextSibling) header.insertBefore(button, actions.nextSibling)
+    else if (status) header.insertBefore(button, status)
+    else header.appendChild(button)
   }
 
   function start() {

soleprint/common/theme/parts/panel.css

@@ -90,6 +90,19 @@
   display: flex;
   align-items: center;
   gap: var(--space-2);
+  /* The header is a fixed height and the panel clips, so a crowded actions strip
+     silently loses whatever sits at its end. Labels give way instead: they
+     truncate, the controls never shrink. (As Panel.vue does.) */
+  min-width: 0;
+}
+.panel-actions > :is(button, input, select, label) {
+  flex-shrink: 0;
+}
+.panel-actions > span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .panel-status {

soleprint/common/ui/src/components/Panel.vue

@@ -1,16 +1,49 @@
 <script setup lang="ts">
-defineProps<{
+import { watch, onBeforeUnmount } from 'vue'
+
+withDefaults(defineProps<{
   title: string
+  /** Omit to show no indicator at all — see the note on `.panel-status`. */
   status?: 'idle' | 'live' | 'processing' | 'error'
-}>()
+  /** Set false for panels that make no sense filling the window. */
+  maximizable?: boolean
+}>(), { maximizable: true })
+
+/**
+ * Fill the window with this panel.
+ *
+ * Ours rather than the Fullscreen API: that API can only be given the <video>
+ * element by the native player control, and a fullscreen <video> paints over
+ * every sibling, so overlays and panel actions vanish. Maximizing the panel
+ * ourselves keeps the whole subtree — controls included — on screen.
+ *
+ * Bindable (`v-model:maximized`) so a host can react; unbound it still works on
+ * its own.
+ */
+const maximized = defineModel<boolean>('maximized', { default: false })
+
+function onKey(e: KeyboardEvent): void {
+  if (e.key === 'Escape') maximized.value = false
+}
+watch(maximized, (on) => {
+  if (on) window.addEventListener('keydown', onKey)
+  else window.removeEventListener('keydown', onKey)
+})
+onBeforeUnmount(() => window.removeEventListener('keydown', onKey))
 </script>
 
 <template>
-  <div class="panel">
+  <div class="panel" :class="{ maximized }">
     <div class="panel-header">
       <span class="panel-title">{{ title }}</span>
       <span class="panel-actions"><slot name="actions" /></span>
-      <span class="panel-status" :class="status ?? 'idle'" />
+      <button
+        v-if="maximizable"
+        class="panel-max"
+        :title="maximized ? 'Restore (Esc)' : 'Maximize'"
+        @click="maximized = !maximized"
+      >{{ maximized ? '⤡' : '⤢' }}</button>
+      <span v-if="status" class="panel-status" :class="status" />
     </div>
     <div class="panel-body">
       <slot />
@@ -32,6 +65,16 @@ defineProps<{
   flex-direction: column;
 }
 
+/* Covers the window. `fixed` so it escapes the split panes without disturbing
+   their sizing — restoring puts everything back untouched. */
+.panel.maximized {
+  position: fixed;
+  inset: 0;
+  z-index: 400;
+  border-radius: 0;
+  border: none;
+}
+
 .panel-header {
   display: flex;
   align-items: center;
@@ -57,12 +100,45 @@ defineProps<{
   display: flex;
   align-items: center;
   gap: var(--space-2);
+  /* The header is a fixed height and the panel clips, so a crowded actions strip
+     silently loses whatever sits at its end — a control you added but can't see.
+     Let the labels give way instead: they truncate, the controls never shrink. */
+  min-width: 0;
+}
+.panel-actions > :is(button, input, select, label) {
+  flex-shrink: 0;
+}
+.panel-actions > span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
+.panel-max {
+  flex-shrink: 0;
+  padding: 0 var(--space-1);
+  font-size: 13px;
+  line-height: 1.4;
+  color: var(--text-secondary);
+  background: none;
+  border: none;
+  cursor: pointer;
+  opacity: 0.6;
+  transition: opacity 0.12s;
+}
+.panel-max:hover,
+.panel:hover .panel-max { opacity: 1; }
+.panel-max:hover { color: var(--text-primary); }
+
+/* Rendered only when the host actually passes a `status`. A dot in the corner of
+   a titlebar reads as a control — it invites a click and does nothing — so
+   panels with no state to report show nothing there. */
 .panel-status {
   width: 8px;
   height: 8px;
   border-radius: 50%;
+  flex-shrink: 0;
 }
 .panel-status.idle { background: var(--status-idle); }
 .panel-status.live { background: var(--status-live); }

soleprint/common/ui/src/components/VideoPlayer.vue

@@ -9,6 +9,12 @@ import { ref, watch, onBeforeUnmount } from 'vue'
  *
  * External `currentTime` changes seek the element (guarded against the
  * feedback loop with the element's own `timeupdate` events).
+ *
+ * The `overlay` slot renders on top of the picture, for controls the host wants
+ * over the video. Deliberately no fullscreen handling here: the browser's own
+ * control fullscreens the <video> element, which then paints over every sibling
+ * and hides any overlay — so making the picture big is the Panel's job
+ * (`v-model:maximized`), where the whole subtree stays on screen.
  */
 const props = withDefaults(defineProps<{
   /** Media source URL */
@@ -32,7 +38,6 @@ const emit = defineEmits<{
 }>()
 
 const video = ref<HTMLVideoElement | null>(null)
-
 /** True while we are applying an external seek, so the resulting
  *  `timeupdate` does not echo back out as an update. */
 let seekingFromProp = false
@@ -118,11 +123,15 @@ onBeforeUnmount(() => {
       @pause="onPause"
       @ended="onEnded"
     />
+    <div class="vp-overlay">
+      <slot name="overlay" />
+    </div>
   </div>
 </template>
 
 <style scoped>
 .video-player {
+  position: relative;
   display: flex;
   width: 100%;
   height: 100%;
@@ -132,6 +141,21 @@ onBeforeUnmount(() => {
   overflow: hidden;
 }
 
+/* Above the picture, clear of the native controls at the bottom. Transparent to
+   the pointer so it never steals a click meant for the video; slot content opts
+   back in. */
+.vp-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 2;
+  pointer-events: none;
+}
+.vp-overlay :deep(*) {
+  pointer-events: auto;
+}
+
 .video-el {
   max-width: 100%;
   max-height: 100%;