@zolomedia/bifrost-client 1.7.82 → 1.7.84

package/L2_Handling/display/outputs/video_renderer.js

@@ -75,9 +75,8 @@ export class VideoRenderer {
     video.controls = true;          // always give the user native controls
     video.preload = 'metadata';     // fetch dimensions/duration, not the whole file
 
-    // Safe default so an unstyled video never overflows its column; _zClass wins.
-    video.style.maxWidth = '100%';
-    video.style.height = 'auto';
+    // Responsive sizing (max-width:100% + height:auto) is bifrost-owned in
+    // zbase.css; _zClass still wins for app-specific shaping.
 
     if (_zClass) video.className = _zClass;
     if (_id) video.setAttribute('id', _id);

package/L2_Handling/zvaf/zvaf_manager.js

@@ -154,7 +154,7 @@ export class ZVaFManager {
     // Set initial badge content (will be updated by connection hooks)
     this.client._zConnectionBadge.className = 'zConnection zBadge zBadge-connection zBadge-pending';
     this.client._zConnectionBadge.innerHTML = `
-      <svg class="zIcon zIcon-sm zBadge-dot" aria-hidden="true">
+      <svg class="zSvgIcon zBadge-dot" aria-hidden="true">
         <use xlink:href="#icon-circle-fill"></use>
       </svg>
       <span class="zBadge-text">Connecting...</span>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zolomedia/bifrost-client",
-  "version": "1.7.82",
+  "version": "1.7.84",
   "description": "Browser client for zBifrost — the WebSocket bridge that turns JSON events from a zOS server into live DOM. Thin bootstrap + server-controlled core.",
   "homepage": "https://github.com/ZoloAi/zbifrost-client#readme",
   "repository": {

package/zSys/theme/zbase.css

@@ -65,7 +65,7 @@ body {
   line-height: 1.5;
 }
 
-img, svg { display: block; max-width: 100%; }
+img, svg, video { display: block; max-width: 100%; }
 
 /* Default link color — zCLI/info palette, overridable via --color-link.
  * Navbar links and buttons opt out below (they manage their own color). */
@@ -246,6 +246,21 @@ dd:last-child { margin-bottom: 0; }
 }
 .zList-inline-item { margin: 0; }
 
+/* ─── Media (zImage / zVideo) ──────────────────────────────────────────────── */
+/* Bifrost owns the media baseline. <img>/<video> stay responsive (display:block
+ * + max-width:100% in the reset above); <video> keeps its aspect via height:auto.
+ * A captioned media renders inside a <figure> — own it so the UA's default
+ * `margin: 1em 40px` side-indent never offsets the media. figcaption is themed by
+ * the renderer via bifrost utilities (zText-muted/zText-center/zmt-2). */
+
+video { height: auto; }
+
+figure { margin: 0 0 1rem; }
+figure:last-child { margin-bottom: 0; }
+figure > img,
+figure > video { margin-bottom: 0; }
+figcaption { line-height: 1.5; }
+
 /* ─── Form controls — canonical field base (Bootstrap-like) ────────────────── */
 /* The client emits a real field as `.zForm-control` (default) or `.zInput`
  * (input-groups / explicit). Style BOTH so a field on ANY page — not just
@@ -599,7 +614,9 @@ zBifrostBadge {
 .zBadge-success { color: var(--color-success); }
 .zBadge-error   { color: var(--color-error); }
 .zBadge-dot     { border-radius: 50%; background: currentColor; }
-.zIcon          { display: inline-block; width: 0.75em; height: 0.75em; fill: currentColor; }
+/* Inline SVG sprite icon (e.g. the connection/dev badge dot). Named zSvgIcon to
+ * stay distinct from the zIcon EVENT, which renders a Bootstrap <i class="bi">. */
+.zSvgIcon       { display: inline-block; width: 0.75em; height: 0.75em; fill: currentColor; }
 
 /* ─── zVaF content host ─────────────────────────────────────────────────────── */
 /* The re-rendered subtree under the <zVaF> root. Chrome (navbar/badge/errors) are