pi-studio 0.9.51 → 0.9.53

package/client/studio-preview-resource-helpers.js

@@ -1,11 +1,21 @@
 (() => {
   const STUDIO_PREVIEW_LOCAL_IMAGE_LIMIT = 100;
+  const STUDIO_PREVIEW_LOCAL_PDF_LIMIT = 40;
   const STUDIO_PREVIEW_IMAGE_DATA_URL_PATTERN = /^data:image\/(?:png|jpeg|gif|webp);base64,/i;
+  const STUDIO_PREVIEW_PDF_DATA_URL_PATTERN = /^data:application\/pdf;base64,/i;
 
   function isResolvableStudioPreviewImageSource(value) {
     const source = String(value || "").trim();
     if (!source || source.startsWith("#") || source.startsWith("//")) return false;
     if (/^(?:data|blob|https?|about|javascript):/i.test(source)) return false;
+    if (/^file:/i.test(source)) {
+      try {
+        const fileUrl = new URL(source);
+        return fileUrl.protocol === "file:" && (!fileUrl.hostname || fileUrl.hostname === "localhost");
+      } catch {
+        return false;
+      }
+    }
     if (/^[a-z][a-z0-9+.-]*:/i.test(source) && !/^[a-z]:[\\/]/i.test(source)) return false;
     return true;
   }
@@ -17,30 +27,66 @@
       && String(a.resourceDir || "") === String(b.resourceDir || "");
   }
 
-  async function hydrateStudioPreviewLocalImages(target, resolveResource) {
+  function isResolvableStudioPreviewPdfSource(value) {
+    const source = String(value || "").trim();
+    return isResolvableStudioPreviewImageSource(source) && /\.pdf(?:[?#].*)?$/i.test(source);
+  }
+
+  async function hydrateStudioPreviewLocalMediaElements(target, options) {
+    const selector = options && options.selector;
+    const sourceAllowed = options && options.sourceAllowed;
+    const dataUrlAllowed = options && options.dataUrlAllowed;
+    const resolveResource = options && options.resolveResource;
+    const onError = options && options.onError;
+    const limit = Math.max(1, Number(options && options.limit) || 1);
     if (!target || typeof target.querySelectorAll !== "function" || typeof resolveResource !== "function") {
       return { attempted: 0, resolved: 0 };
     }
 
-    const images = Array.from(target.querySelectorAll("img[src]"))
-      .filter((image) => image && typeof image.getAttribute === "function" && isResolvableStudioPreviewImageSource(image.getAttribute("src")))
-      .slice(0, STUDIO_PREVIEW_LOCAL_IMAGE_LIMIT);
+    const elements = Array.from(target.querySelectorAll(selector))
+      .filter((element) => element && typeof element.getAttribute === "function" && sourceAllowed(element.getAttribute("src")))
+      .slice(0, limit);
 
     let resolved = 0;
-    await Promise.all(images.map(async (image) => {
-      const originalSource = String(image.getAttribute("src") || "").trim();
+    await Promise.all(elements.map(async (element) => {
+      const originalSource = String(element.getAttribute("src") || "").trim();
       try {
         const dataUrl = await resolveResource(originalSource);
-        if (!STUDIO_PREVIEW_IMAGE_DATA_URL_PATTERN.test(String(dataUrl || ""))) return;
-        if (image.isConnected === false || String(image.getAttribute("src") || "").trim() !== originalSource) return;
-        image.setAttribute("src", dataUrl);
+        if (!dataUrlAllowed.test(String(dataUrl || ""))) throw new Error("Studio returned an unsupported local media payload.");
+        if (element.isConnected === false || String(element.getAttribute("src") || "").trim() !== originalSource) return;
+        element.setAttribute("src", dataUrl);
         resolved += 1;
-      } catch {
-        // Leave unresolved images unchanged so authored browser URLs retain their normal behavior.
+      } catch (error) {
+        if (element.isConnected === false || String(element.getAttribute("src") || "").trim() !== originalSource) return;
+        if (typeof onError === "function") {
+          try { await onError(element, originalSource, error); } catch {}
+        }
       }
     }));
 
-    return { attempted: images.length, resolved };
+    return { attempted: elements.length, resolved };
+  }
+
+  async function hydrateStudioPreviewLocalImages(target, resolveResource, options) {
+    return hydrateStudioPreviewLocalMediaElements(target, {
+      selector: "img[src]",
+      sourceAllowed: isResolvableStudioPreviewImageSource,
+      dataUrlAllowed: STUDIO_PREVIEW_IMAGE_DATA_URL_PATTERN,
+      resolveResource,
+      onError: options && options.onError,
+      limit: STUDIO_PREVIEW_LOCAL_IMAGE_LIMIT,
+    });
+  }
+
+  async function hydrateStudioPreviewLocalPdfEmbeds(target, resolveResource, options) {
+    return hydrateStudioPreviewLocalMediaElements(target, {
+      selector: "embed[src]",
+      sourceAllowed: isResolvableStudioPreviewPdfSource,
+      dataUrlAllowed: STUDIO_PREVIEW_PDF_DATA_URL_PATTERN,
+      resolveResource,
+      onError: options && options.onError,
+      limit: STUDIO_PREVIEW_LOCAL_PDF_LIMIT,
+    });
   }
 
   function buildStudioPdfVersionSignature(headers) {
@@ -94,11 +140,14 @@
 
   globalThis.PiStudioPreviewResourceHelpers = Object.freeze({
     STUDIO_PREVIEW_LOCAL_IMAGE_LIMIT,
+    STUDIO_PREVIEW_LOCAL_PDF_LIMIT,
     areStudioPreviewResourceContextsEqual,
     buildStudioPdfVersionSignature,
     createStudioPdfVersionObservationState,
     hydrateStudioPreviewLocalImages,
+    hydrateStudioPreviewLocalPdfEmbeds,
     isResolvableStudioPreviewImageSource,
+    isResolvableStudioPreviewPdfSource,
     observeStudioPdfVersion,
   });
 })();

package/client/studio.css

@@ -29,7 +29,7 @@
       justify-content: space-between;
     }
 
-    h1 {
+    body > header h1 {
       margin: 0;
       font-size: 18px;
       font-weight: 600;
@@ -202,6 +202,10 @@
       font-weight: 450;
     }
 
+    .export-preview-menu button[hidden] {
+      display: none !important;
+    }
+
     .export-preview-menu button:not(:disabled):hover,
     .export-preview-menu button:not(:disabled):focus-visible {
       background: var(--panel-2);
@@ -1182,6 +1186,7 @@
     .rendered-markdown h4,
     .rendered-markdown h5,
     .rendered-markdown h6 {
+      display: block;
       margin-top: 1.2em;
       margin-bottom: 0.5em;
       line-height: 1.25;
@@ -1190,17 +1195,39 @@
     }
 
     .rendered-markdown h1 {
-      font-size: 1.6em;
+      font-size: 1.7em;
+      font-weight: 720;
       border-bottom: 0;
       padding-bottom: 0;
     }
 
     .rendered-markdown h2 {
-      font-size: 1.25em;
+      font-size: 1.4em;
+      font-weight: 700;
       border-bottom: 0;
       padding-bottom: 0;
     }
 
+    .rendered-markdown h3 {
+      font-size: 1.2em;
+      font-weight: 680;
+    }
+
+    .rendered-markdown h4 {
+      font-size: 1.08em;
+      font-weight: 660;
+    }
+
+    .rendered-markdown h5 {
+      font-size: 1em;
+      font-weight: 650;
+    }
+
+    .rendered-markdown h6 {
+      font-size: 0.92em;
+      font-weight: 650;
+    }
+
     .rendered-markdown #title-block-header {
       text-align: center;
       margin-bottom: 2em;
@@ -1767,6 +1794,7 @@
     }
 
     .rendered-markdown .studio-pdf-preview {
+      position: relative;
       display: block;
       max-width: 100%;
       border: 1px solid var(--md-table-border);
@@ -1776,6 +1804,10 @@
       line-height: 0;
     }
 
+    .rendered-markdown .studio-pdf-preview-focus-target {
+      cursor: zoom-in;
+    }
+
     .rendered-markdown .studio-pdf-preview[data-fig-align="center"] {
       margin-left: auto;
       margin-right: auto;
@@ -1881,6 +1913,19 @@
       border-color: var(--control-border);
     }
 
+    .rendered-markdown button.studio-pdf-card-action[data-studio-action-feedback="success"],
+    .studio-pdf-focus-btn[data-studio-action-feedback="success"] {
+      background: var(--accent-soft);
+      color: var(--accent);
+      border-color: color-mix(in srgb, var(--accent) 45%, var(--control-border));
+    }
+
+    .rendered-markdown button.studio-pdf-card-action[data-studio-action-feedback="warning"],
+    .studio-pdf-focus-btn[data-studio-action-feedback="warning"] {
+      color: var(--warn);
+      border-color: color-mix(in srgb, var(--warn) 45%, var(--control-border));
+    }
+
     .rendered-markdown button.studio-pdf-card-auto-refresh[aria-pressed="true"] {
       background: transparent;
       color: var(--accent);
@@ -1896,13 +1941,14 @@
     }
 
     .rendered-markdown button.studio-pdf-card-focus {
-      width: 29px;
+      width: auto;
       min-width: 29px;
       min-height: 29px;
-      padding: 0;
+      padding: 0 8px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
+      gap: 5px;
     }
 
     .rendered-markdown button.studio-pdf-card-focus .studio-refresh-icon {
@@ -2075,6 +2121,10 @@
       height: 14px;
     }
 
+    .studio-pdf-focus-fullscreen[hidden] {
+      display: none !important;
+    }
+
     .studio-pdf-focus-fullscreen,
     .studio-pdf-focus-close {
       width: 29px;
@@ -2982,6 +3032,97 @@
       overflow-anchor: none;
     }
 
+    .rendered-markdown .studio-blocked-media {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      width: 100%;
+      margin: 10px 0;
+      padding: 10px 12px;
+      border: 1px solid color-mix(in srgb, var(--warn) 42%, var(--panel-border));
+      border-radius: 9px;
+      background: color-mix(in srgb, var(--warn) 7%, var(--panel));
+      color: var(--text);
+      font-family: var(--font-ui);
+      font-size: 12px;
+      font-style: normal;
+      line-height: 1.35;
+      box-sizing: border-box;
+    }
+
+    .rendered-markdown .studio-blocked-media-text {
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 3px;
+    }
+
+    .rendered-markdown .studio-blocked-media-text strong {
+      color: var(--warn);
+      font-weight: 650;
+    }
+
+    .rendered-markdown .studio-blocked-media-text code {
+      display: block;
+      max-width: min(72vw, 760px);
+      overflow: hidden;
+      color: var(--studio-info-text, var(--muted));
+      font-family: var(--font-mono);
+      font-size: 11px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .rendered-markdown button.studio-blocked-media-allow {
+      flex: 0 0 auto;
+      min-height: 30px;
+      padding: 5px 10px;
+      border: 1px solid color-mix(in srgb, var(--warn) 48%, var(--control-border));
+      border-radius: 8px;
+      background: var(--panel);
+      color: var(--text);
+      font: inherit;
+      font-weight: 600;
+      cursor: pointer;
+      white-space: nowrap;
+    }
+
+    .rendered-markdown button.studio-blocked-media-allow:not(:disabled):hover,
+    .rendered-markdown button.studio-blocked-media-allow:focus-visible {
+      border-color: var(--warn);
+      background: var(--control-hover-bg, var(--panel-2));
+      outline: none;
+    }
+
+    .rendered-markdown button.studio-blocked-media-allow:disabled {
+      cursor: default;
+      opacity: 0.6;
+    }
+
+    .rendered-markdown .studio-html-artifact-blocked-media {
+      display: grid;
+      gap: 6px;
+      padding: 0 10px;
+      border-bottom: 1px solid var(--border-subtle);
+      background: var(--panel);
+    }
+
+    .rendered-markdown .studio-html-artifact-blocked-media .studio-blocked-media {
+      margin: 8px 0;
+    }
+
+    @media (max-width: 680px) {
+      .rendered-markdown .studio-blocked-media {
+        align-items: stretch;
+        flex-direction: column;
+      }
+
+      .rendered-markdown button.studio-blocked-media-allow {
+        align-self: flex-start;
+      }
+    }
+
     .preview-error {
       color: var(--warn);
       margin-bottom: 0.75em;
@@ -3651,13 +3792,15 @@
 
     .files-toolbar-actions button,
     .files-actions button,
-    .files-sort-select {
+    .files-sort-select,
+    .files-location-select {
       padding: 4px 7px;
       font-size: 11px;
     }
 
-    .files-sort-select {
-      max-width: 150px;
+    .files-sort-select,
+    .files-location-select {
+      max-width: 240px;
       border: 1px solid var(--control-border);
       border-radius: 7px;
       background: var(--panel);
@@ -3665,6 +3808,26 @@
       font-family: var(--font-ui);
     }
 
+    .files-sort-select {
+      max-width: 150px;
+    }
+
+    .files-no-locations,
+    .files-section-title {
+      color: var(--studio-info-text, var(--muted));
+      font-size: 11px;
+      font-weight: 700;
+      letter-spacing: 0.03em;
+      text-transform: uppercase;
+    }
+
+    .files-exact-section {
+      display: grid;
+      gap: 6px;
+      padding-bottom: 10px;
+      border-bottom: 1px solid var(--border-subtle);
+    }
+
     .files-subtitle,
     .files-notice,
     .files-empty {
@@ -5429,7 +5592,7 @@
       gap: 9px;
     }
 
-    body.studio-ui-refresh h1 {
+    body.studio-ui-refresh > header h1 {
       font-size: 16px;
     }
 
@@ -6267,6 +6430,13 @@
       font-weight: 650;
     }
 
+    .studio-decision-confirm:not(.is-destructive):not(:disabled):hover,
+    .studio-decision-confirm:not(.is-destructive):focus-visible {
+      border-color: color-mix(in srgb, var(--accent) 84%, var(--text));
+      background: color-mix(in srgb, var(--accent) 84%, var(--text));
+      color: var(--accent-contrast);
+    }
+
     .studio-decision-confirm.is-destructive {
       border-color: var(--warn-border);
       background: color-mix(in srgb, var(--warn) 15%, var(--panel));
@@ -6385,6 +6555,13 @@
       margin: 6px 0 0 18px;
     }
 
+    .side-question-context-access-note {
+      margin: 9px 0 0;
+      color: var(--muted);
+      font-size: 0.78rem;
+      line-height: 1.42;
+    }
+
     .side-question-context-grid select,
     .side-question-path-label input,
     .side-question-composer-label textarea {