@kontourai/survey 0.5.1 → 0.6.0

package/dist/src/review-workbench/review-workbench-element.d.ts

@@ -0,0 +1,45 @@
+/**
+ * <survey-review-workbench> — Custom element wrapper for the Survey Review Workbench.
+ *
+ * Works like <surface-trust-panel>: data via the `.session` property OR a `src`
+ * attribute that fetches a JSON-serialised ReviewQueueSessionState. Shadow DOM
+ * is used throughout so CSS custom properties (--k-*) inherit from the host
+ * with no separate stylesheet required — a single module import is sufficient.
+ *
+ * Usage (single import, self-contained):
+ *   import "@kontourai/survey/review-workbench/element";
+ *   <survey-review-workbench theme="survey" color-scheme="dark"
+ *                             src="/api/sessions/my-session.json">
+ *   </survey-review-workbench>
+ *
+ *   // or via property:
+ *   const el = document.querySelector("survey-review-workbench");
+ *   el.session = reviewQueueSession;
+ *   el.presentationAdapter = myPresentationAdapter;
+ *
+ * Theming:
+ *   CSS custom properties (--k-*) inherit through the shadow boundary.
+ *   Setting any --k-* token on the element or an ancestor overrides the
+ *   shadow :host defaults. Token defaults are declared on :host so that
+ *   host-page rules always win over the shadow defaults.
+ *
+ * Attributes:
+ *   theme       — "survey" | "console" | "flow" | "surface"  (maps to theme-* class)
+ *   color-scheme — "dark" | "light"  (default: "dark")
+ *   src          — URL to fetch a JSON-serialised ReviewQueueSessionState
+ */
+import { type ReviewQueueSessionState, type ReviewWorkbenchState } from "./review-workbench.js";
+import type { ReviewPresentationAdapter } from "./review-presentation.js";
+export declare class SurveyReviewWorkbenchElement extends HTMLElement {
+    #private;
+    static readonly observedAttributes: string[];
+    constructor();
+    /** The review queue session to display. Setting this property re-mounts the workbench. */
+    get session(): ReviewQueueSessionState | ReviewWorkbenchState | null;
+    set session(value: ReviewQueueSessionState | ReviewWorkbenchState | null | undefined);
+    /** Optional presentation adapter for custom labels, value summaries, and links. */
+    get presentationAdapter(): ReviewPresentationAdapter | undefined;
+    set presentationAdapter(value: ReviewPresentationAdapter | undefined);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}

package/dist/src/review-workbench/review-workbench-element.js

@@ -0,0 +1,215 @@
+/**
+ * <survey-review-workbench> — Custom element wrapper for the Survey Review Workbench.
+ *
+ * Works like <surface-trust-panel>: data via the `.session` property OR a `src`
+ * attribute that fetches a JSON-serialised ReviewQueueSessionState. Shadow DOM
+ * is used throughout so CSS custom properties (--k-*) inherit from the host
+ * with no separate stylesheet required — a single module import is sufficient.
+ *
+ * Usage (single import, self-contained):
+ *   import "@kontourai/survey/review-workbench/element";
+ *   <survey-review-workbench theme="survey" color-scheme="dark"
+ *                             src="/api/sessions/my-session.json">
+ *   </survey-review-workbench>
+ *
+ *   // or via property:
+ *   const el = document.querySelector("survey-review-workbench");
+ *   el.session = reviewQueueSession;
+ *   el.presentationAdapter = myPresentationAdapter;
+ *
+ * Theming:
+ *   CSS custom properties (--k-*) inherit through the shadow boundary.
+ *   Setting any --k-* token on the element or an ancestor overrides the
+ *   shadow :host defaults. Token defaults are declared on :host so that
+ *   host-page rules always win over the shadow defaults.
+ *
+ * Attributes:
+ *   theme       — "survey" | "console" | "flow" | "surface"  (maps to theme-* class)
+ *   color-scheme — "dark" | "light"  (default: "dark")
+ *   src          — URL to fetch a JSON-serialised ReviewQueueSessionState
+ */
+import { mountReviewWorkbench, } from "./review-workbench.js";
+import { REVIEW_WORKBENCH_CSS } from "./review-workbench-css.generated.js";
+export class SurveyReviewWorkbenchElement extends HTMLElement {
+    static observedAttributes = ["theme", "color-scheme", "src"];
+    #session = null;
+    #presentationAdapter = undefined;
+    #root;
+    #mountRoot;
+    #mounted = false;
+    constructor() {
+        super();
+        this.#root = this.attachShadow({ mode: "open" });
+        // Inject the workbench CSS directly from the generated module.
+        // This makes the element fully self-contained: a single
+        // `import "@kontourai/survey/review-workbench/element"` is all that's needed.
+        const sheet = this.#adoptCss();
+        if (!sheet) {
+            const styleEl = document.createElement("style");
+            styleEl.textContent = REVIEW_WORKBENCH_CSS;
+            this.#root.appendChild(styleEl);
+        }
+        // Host token defaults: CSS custom properties inherit through the shadow
+        // boundary so host overrides win automatically. These are the defaults
+        // that apply when no ancestor sets the tokens.
+        const hostStyle = document.createElement("style");
+        hostStyle.textContent = `
+      :host {
+        display: block;
+        container-type: inline-size;
+        /* --k-bg, --k-panel, etc. are set by the Console Kit theme stylesheet.
+           Declare fallback token values here so shadow content has something
+           to work with even if the host doesn't load Console Kit. */
+        --k-bg: var(--k-bg, #060a10);
+        --k-panel: var(--k-panel, #101822);
+        --k-panel-raised: var(--k-panel-raised, #161e2b);
+        --k-text: var(--k-text, #e8eaf0);
+        --k-text-muted: var(--k-text-muted, #8b93a8);
+        --k-text-faint: var(--k-text-faint, #4e5870);
+        --k-line: var(--k-line, rgba(255,255,255,0.08));
+        --k-line-strong: var(--k-line-strong, rgba(255,255,255,0.14));
+        --k-brand: var(--k-brand, #5ce0c6);
+        --k-active: var(--k-active, #7aa2ff);
+        --k-positive: var(--k-positive, #34d399);
+        --k-caution: var(--k-caution, #f3b14b);
+        --k-negative: var(--k-negative, #ff6f6f);
+        --k-radius-md: var(--k-radius-md, 10px);
+        --k-radius-sm: var(--k-radius-sm, 6px);
+        --k-font-ui: var(--k-font-ui, "Hanken Grotesk", system-ui, sans-serif);
+      }
+      .workbench-empty, .workbench-error {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 6rem;
+        padding: 1.5rem;
+        font-family: var(--k-font-ui, system-ui, sans-serif);
+        font-size: 0.9rem;
+        color: var(--k-text-muted, #8b93a8);
+        background: var(--k-panel, #101822);
+        border-radius: var(--k-radius-md, 10px);
+      }
+      .workbench-error {
+        color: var(--k-negative, #ff6f6f);
+      }
+    `;
+        this.#root.appendChild(hostStyle);
+        this.#mountRoot = document.createElement("div");
+        this.#mountRoot.className = "workbench survey-workbench-embed";
+        this.#root.appendChild(this.#mountRoot);
+    }
+    /** The review queue session to display. Setting this property re-mounts the workbench. */
+    get session() {
+        return this.#session;
+    }
+    set session(value) {
+        this.#session = value ?? null;
+        this.#remount();
+    }
+    /** Optional presentation adapter for custom labels, value summaries, and links. */
+    get presentationAdapter() {
+        return this.#presentationAdapter;
+    }
+    set presentationAdapter(value) {
+        this.#presentationAdapter = value;
+        this.#remount();
+    }
+    connectedCallback() {
+        // Rescue a `session` set before the element was upgraded so the property
+        // assignment reaches the class accessor instead of being shadowed by an
+        // own property. Mirrors the same pattern in <surface-trust-panel>.
+        if (Object.prototype.hasOwnProperty.call(this, "session")) {
+            const pending = this.session;
+            delete this.session;
+            this.session = pending;
+            return;
+        }
+        this.#applyThemeClasses();
+        const src = this.getAttribute("src");
+        if (this.#session === null && src) {
+            void this.#load(src);
+        }
+        else {
+            this.#remount();
+        }
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "src" && newValue && newValue !== oldValue) {
+            void this.#load(newValue);
+            return;
+        }
+        this.#applyThemeClasses();
+    }
+    async #load(src) {
+        try {
+            const response = await fetch(src);
+            if (!response.ok)
+                throw new Error(`Failed to load session: HTTP ${response.status}`);
+            this.session = await response.json();
+        }
+        catch (error) {
+            this.#renderError(error instanceof Error ? error.message : String(error));
+        }
+    }
+    #applyThemeClasses() {
+        const theme = this.getAttribute("theme") ?? "survey";
+        const colorScheme = this.getAttribute("color-scheme") ?? "dark";
+        this.#mountRoot.className = `workbench survey-workbench-embed theme-${theme}`;
+        this.#mountRoot.setAttribute("data-color-scheme", colorScheme);
+        if (colorScheme === "light") {
+            this.#mountRoot.removeAttribute("data-dark");
+        }
+        else {
+            this.#mountRoot.setAttribute("data-dark", "");
+        }
+    }
+    #remount() {
+        if (!this.isConnected) {
+            return;
+        }
+        if (this.#session === null) {
+            this.#renderEmpty();
+            return;
+        }
+        const options = this.#presentationAdapter
+            ? { presentationAdapter: this.#presentationAdapter }
+            : {};
+        this.#applyThemeClasses();
+        mountReviewWorkbench(this.#mountRoot, this.#session, options);
+        this.#mounted = true;
+    }
+    #renderEmpty() {
+        this.#mountRoot.innerHTML = '<div class="workbench-empty">No review session loaded yet.</div>';
+        this.#mounted = false;
+    }
+    #renderError(message) {
+        this.#mountRoot.innerHTML = `<div class="workbench-error">${escapeHtml(message)}</div>`;
+        this.#mounted = false;
+    }
+    /** Attempt to inject the workbench CSS via constructable CSSStyleSheet. */
+    #adoptCss() {
+        try {
+            if (typeof CSSStyleSheet === "undefined" || !this.#root.adoptedStyleSheets) {
+                return false;
+            }
+            const sheet = new CSSStyleSheet();
+            sheet.replaceSync(REVIEW_WORKBENCH_CSS);
+            this.#root.adoptedStyleSheets = [sheet];
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }
+}
+function escapeHtml(text) {
+    return text
+        .replaceAll("&", "&amp;")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll('"', "&quot;");
+}
+// Register the element unless it's already defined (supports HMR scenarios).
+if (typeof customElements !== "undefined" && !customElements.get("survey-review-workbench")) {
+    customElements.define("survey-review-workbench", SurveyReviewWorkbenchElement);
+}

package/dist/src/review-workbench/review-workbench.css

@@ -319,6 +319,17 @@
   font-size: 0.95em;
 }
 
+.survey-workbench-embed .review-target-label{
+  margin-top: 4px;
+}
+
+.survey-workbench-embed .review-target-label strong{
+  color: var(--paper);
+  font-family: "IBM Plex Mono", ui-monospace, monospace;
+  font-size: 13px;
+  font-weight: 600;
+}
+
 .survey-workbench-embed .meta-grid{
   display: none;
   grid-template-columns: repeat(4, minmax(110px, 1fr));
@@ -373,6 +384,52 @@
   display: none;
 }
 
+/* ---- Mobile queue progress bar (mobile only) -------------------------- */
+
+.survey-workbench-embed .mobile-queue-bar{
+  display: none;
+}
+
+/* ---- Queue drawer backdrop -------------------------------------------- */
+
+.survey-workbench-embed .queue-drawer-backdrop{
+  display: none;
+  position: absolute;
+  inset: 0;
+  z-index: 40;
+  background: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(2px);
+  opacity: 0;
+  transition: opacity 0.22s ease;
+  pointer-events: none;
+}
+
+.survey-workbench-embed .queue-drawer-backdrop.is-visible{
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* ---- Queue drawer close button (mobile only) -------------------------- */
+
+.survey-workbench-embed .queue-drawer-close{
+  display: none;
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 30px;
+  height: 30px;
+  border: 1px solid var(--line-strong);
+  border-radius: 999px;
+  background: rgba(8, 12, 18, 0.8);
+  color: var(--paper-faint);
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 1;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+}
+
 .survey-workbench-embed .queue-list,
 .survey-workbench-embed .session-summary,
 .survey-workbench-embed .session-audit{
@@ -1044,6 +1101,53 @@
   gap: 11px;
 }
 
+/* When surface-preview is a <details> element */
+.survey-workbench-embed details.surface-preview{
+  display: block;
+}
+
+.survey-workbench-embed details.surface-preview[open]{
+  display: grid;
+  gap: 11px;
+}
+
+.survey-workbench-embed .surface-summary{
+  display: flex;
+  gap: 12px;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  list-style: none;
+  padding: 0;
+}
+
+.survey-workbench-embed .surface-summary::-webkit-details-marker{
+  display: none;
+}
+
+.survey-workbench-embed .surface-summary::before{
+  content: none;
+}
+
+.survey-workbench-embed .surface-summary-label{
+  font-family: "Fraunces", Georgia, serif;
+  font-weight: 600;
+  font-size: 16px;
+  letter-spacing: -0.01em;
+  color: var(--paper);
+}
+
+.survey-workbench-embed .surface-summary-label::before{
+  content: "› ";
+  color: var(--accent);
+  font-family: "IBM Plex Mono", ui-monospace, monospace;
+  font-size: 13px;
+}
+
+.survey-workbench-embed details.surface-preview[open] .surface-summary-label::before{
+  content: "⌄ ";
+}
+
 .survey-workbench-embed .surface-head{
   display: flex;
   gap: 12px;
@@ -1066,6 +1170,13 @@
   line-height: 1.5;
 }
 
+.survey-workbench-embed .preview-disclaimer-footer{
+  margin-top: 4px;
+  border-left-color: var(--line);
+  font-size: 11.5px;
+  color: var(--paper-faint);
+}
+
 .survey-workbench-embed .preview-section-grid{
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -1208,7 +1319,6 @@
 
 @media (max-width: 980px) {
   .survey-workbench-embed .topbar,
-  .survey-workbench-embed .queue-layout,
   .survey-workbench-embed .focus-evidence,
   .survey-workbench-embed .candidate-grid{
     grid-template-columns: 1fr;
@@ -1223,9 +1333,8 @@
   }
 
   .survey-workbench-embed .queue-layout{
-    grid-template-areas:
-      "content"
-      "queue";
+    display: block;
+    position: relative;
   }
 
   .survey-workbench-embed .active-review-strip{
@@ -1286,8 +1395,85 @@
     font-size: 11px;
   }
 
-  .survey-workbench-embed .queue-panel{
-    grid-area: queue;
+  .survey-workbench-embed .queue-drawer-backdrop{
+    display: block;
+  }
+
+  .survey-workbench-embed .queue-drawer-close{
+    display: flex;
+  }
+
+  .survey-workbench-embed .mobile-queue-bar{
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 12px;
+    align-items: center;
+    border: 1px solid var(--line-strong);
+    border-left: 3px solid var(--accent);
+    border-radius: var(--radius);
+    padding: 11px 14px;
+    margin-bottom: 14px;
+    background:
+      linear-gradient(90deg, rgba(92, 224, 198, 0.08), transparent 46%),
+      linear-gradient(180deg, var(--ink-800), var(--ink-850));
+    animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
+  }
+
+  .survey-workbench-embed .mobile-queue-progress{
+    display: grid;
+    gap: 3px;
+    min-width: 0;
+  }
+
+  .survey-workbench-embed .mobile-queue-item-label{
+    font-family: "IBM Plex Mono", ui-monospace, monospace;
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--paper);
+    overflow-wrap: anywhere;
+    word-break: break-word;
+  }
+
+  .survey-workbench-embed .mobile-queue-open{
+    flex-shrink: 0;
+    min-height: 34px;
+    padding: 0 14px;
+    border: 1px solid var(--line-strong);
+    border-radius: 999px;
+    background: rgba(92, 224, 198, 0.08);
+    color: var(--accent);
+    cursor: pointer;
+    font-family: "IBM Plex Mono", ui-monospace, monospace;
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    transition: background 0.16s ease, border-color 0.16s ease;
+  }
+
+  .survey-workbench-embed .mobile-queue-open:hover{
+    background: rgba(92, 224, 198, 0.16);
+    border-color: var(--accent);
+  }
+
+  /* Higher specificity than the @container stacked-layout fallback below:
+     on a narrow viewport the drawer must win even inside a narrow container. */
+  .survey-workbench-embed .queue-layout .queue-panel{
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: min(320px, 90vw);
+    z-index: 50;
+    overflow-y: auto;
+    overflow-x: hidden;
+    transform: translateX(-105%);
+    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
+    border-radius: 0 var(--radius) var(--radius) 0;
+    padding-top: 50px;
+  }
+
+  .survey-workbench-embed .queue-layout .queue-panel.is-open{
+    transform: translateX(0);
   }
 
   .survey-workbench-embed .content-grid{
@@ -1298,10 +1484,6 @@
     display: none;
   }
 
-  .survey-workbench-embed .queue-panel{
-    position: static;
-  }
-
   .survey-workbench-embed .content-grid,
   .survey-workbench-embed .review-main,
   .survey-workbench-embed .candidate-grid,
@@ -1481,11 +1663,11 @@
   }
 
   .survey-workbench-embed .focus-value strong{
-    font-size: clamp(22px, 10vw, 32px);
+    font-size: clamp(16px, 5cqi, 22px);
   }
 
   .survey-workbench-embed .candidate-value .field-value{
-    font-size: clamp(21px, 9vw, 30px);
+    font-size: clamp(15px, 4.5cqi, 20px);
     line-height: 1.12;
   }
 
@@ -1590,7 +1772,7 @@
 
   .survey-workbench-embed .focus-value strong{
     margin-top: 6px;
-    font-size: 24px;
+    font-size: 18px;
     line-height: 1.05;
   }
 
@@ -1599,7 +1781,7 @@
   }
 
   .survey-workbench-embed .candidate-value .field-value{
-    font-size: 20px;
+    font-size: 17px;
   }
 }