@vivix-labs/ads-compare 0.0.0-stage → 1.0.0-beta

package/dist/UI-SYSTEM-LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 VIVIX
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/client-code.css

@@ -0,0 +1,136 @@
+/* packages/studio-workbench/src/ad-comparison-picker.css */
+.ad-video-picker.vx-dialog {
+  width: min(860px, calc(100vw - 32px));
+  max-width: calc(100vw - 32px);
+  height: min(720px, calc(100dvh - 48px));
+  max-height: calc(100dvh - 48px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.ad-video-picker .vx-dialog-body {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  min-height: 0;
+  flex: 1;
+  overflow-y: auto;
+}
+.ad-video-picker-toolbar {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  flex-shrink: 0;
+  background: var(--vx-background-dialog);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+.ad-video-picker-toolbar .vx-search-input {
+  width: min(100%, 340px);
+}
+.ad-video-picker-toolbar > span,
+.ad-video-choice-meta,
+.ad-video-picker-empty {
+  color: var(--vx-text-secondary-readable);
+  font-size: 12px;
+}
+.ad-video-picker-toolbar > span {
+  white-space: nowrap;
+}
+.ad-video-picker-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 20px 16px;
+}
+.ad-video-choice {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+  padding: 0 0 8px;
+  border: 0;
+  border-radius: 10px;
+  text-align: left;
+  font: inherit;
+  color: var(--vx-text-primary);
+  background: transparent;
+  cursor: pointer;
+}
+.ad-video-choice:focus-visible {
+  outline: 2px solid var(--vx-media-selection-color, #568b72);
+  outline-offset: 4px;
+}
+.ad-video-choice:disabled {
+  cursor: default;
+}
+.ad-video-choice-preview {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  aspect-ratio: 1;
+  overflow: hidden;
+  border-radius: 8px;
+  background: var(--vx-surface-input);
+  color: var(--vx-text-secondary-readable);
+  font-size: 12px;
+}
+.ad-video-choice-preview video {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  transition: transform 150ms ease;
+}
+.ad-video-choice:not(:disabled):hover .ad-video-choice-preview video {
+  transform: scale(1.025);
+}
+.ad-video-choice[aria-pressed=true] .ad-video-choice-preview {
+  box-shadow: inset 0 0 0 2px var(--vx-media-selection-color, #568b72);
+}
+.ad-video-choice:disabled .ad-video-choice-preview {
+  opacity: 0.6;
+}
+.ad-video-choice-duration {
+  position: absolute;
+  right: 8px;
+  bottom: 8px;
+  padding: 2px 4px;
+  border-radius: 4px;
+  background: #0009;
+  color: #fff;
+  font-size: 11px;
+}
+.ad-video-choice-title {
+  font-size: 14px;
+  font-weight: 600;
+}
+.ad-video-choice-state {
+  font-size: 12px;
+  color: var(--vx-media-selection-color, #568b72);
+}
+.ad-video-choice:disabled .ad-video-choice-state {
+  color: var(--vx-text-secondary-readable);
+}
+.ad-video-picker-empty {
+  margin: 24px 0;
+  text-align: center;
+}
+@media (max-width: 480px) {
+  .ad-video-picker-toolbar {
+    align-items: stretch;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .ad-video-picker-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 16px 12px;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ad-video-choice-preview video {
+    transition: none;
+  }
+}

package/dist/client-code.js

@@ -0,0 +1,271 @@
+// packages/studio-workbench/src/ad-view-panels.tsx
+import * as React3 from "react";
+
+// packages/ui-system/dist/button.js
+import { jsx as _jsx2, jsxs as _jsxs } from "react/jsx-runtime";
+
+// packages/ui-system/dist/icon.js
+import { jsx as _jsx } from "react/jsx-runtime";
+function Icon({ name, size }) {
+  return _jsx("span", { "aria-hidden": "true", className: "vx-icon", "data-icon": name, style: size === void 0 ? void 0 : { "--vx-icon-size": `${size}px` } });
+}
+
+// packages/ui-system/dist/button-variants.js
+var buttonVariants = {
+  "text-filled-sm": { size: 32, appearance: "filled", shape: "text", width: 215 },
+  "text-filled-leading-sm": { size: 32, appearance: "filled", shape: "text" },
+  "text-ghost-sm": { size: 32, appearance: "ghost", shape: "text" },
+  "text-on-content-sm": { size: 32, appearance: "on-content", shape: "text" },
+  "text-tonal-sm": { size: 32, appearance: "tonal", shape: "text" },
+  // The medium recipes are shared by all dialog footer actions.
+  "text-filled-md": { size: 40, appearance: "filled", shape: "text" },
+  "text-tonal-md": { size: 40, appearance: "tonal", shape: "text" },
+  "text-ghost-md": { size: 40, appearance: "ghost", shape: "text" },
+  "icon-ghost-md": { size: 40, appearance: "ghost", shape: "icon" },
+  "text-filled-lg": { size: 44, appearance: "filled", shape: "text", width: 412 },
+  "text-tonal-lg": { size: 44, appearance: "tonal", shape: "text", width: 412 },
+  "text-outline-lg": {
+    size: 44,
+    appearance: "outline",
+    shape: "text",
+    width: 412
+  },
+  "pill-filled": { size: 44, appearance: "filled", shape: "pill" },
+  "pill-plain": { size: 48, appearance: "plain", shape: "pill" },
+  "pill-small": { size: 32, appearance: "plain", shape: "pill" },
+  "icon-outline-sm": { size: 32, appearance: "outline", shape: "icon" },
+  "icon-on-content": { size: 24, appearance: "on-content", shape: "icon" },
+  "icon-outline-lg": { size: 48, appearance: "outline", shape: "icon" },
+  // Compact bare action: reuse the transparent/default and surface-hover ghost treatment.
+  "icon-bare-xs": { size: 24, appearance: "ghost", shape: "icon" },
+  "icon-ghost-sm": { size: 32, appearance: "ghost", shape: "icon" },
+  "icon-ghost-lg": { size: 48, appearance: "ghost", shape: "icon" },
+  "icon-circle-sm": { size: 32, appearance: "filled", shape: "circle" },
+  "icon-circle-lg": { size: 44, appearance: "filled", shape: "circle" }
+};
+
+// packages/ui-system/dist/button.js
+function ButtonFrame({ label, variant, loading = false, width, children, disabled, type = "button", style, className, ...props }) {
+  const spec = buttonVariants[variant];
+  const buttonStyle = "width" in spec ? { ...style, "--vx-button-width": `${spec.width}px` } : style;
+  return _jsxs("button", { ...props, type, className: className ? `vx-button ${className}` : "vx-button", "data-variant": variant, "data-appearance": spec.appearance, "data-shape": spec.shape, "data-size": spec.size, "data-width": width, "data-state": loading ? "loading" : disabled ? "disabled" : "default", style: buttonStyle, disabled: disabled || loading, "aria-label": label, "aria-busy": loading || void 0, children: [_jsx2("span", { className: "vx-button-content", children }), loading && _jsx2("span", { className: "vx-button-loading", "aria-hidden": "true" })] });
+}
+function Button({ variant = "text-filled-sm", leadingIcon, trailingIcon, ...props }) {
+  return _jsxs(ButtonFrame, { ...props, variant, children: [leadingIcon && _jsx2(Icon, { name: leadingIcon }), _jsx2("span", { className: "vx-button-label", children: props.label }), trailingIcon && _jsx2("span", { className: "vx-button-trailing", children: _jsx2(Icon, { name: trailingIcon }) })] });
+}
+function IconButton({ icon, variant = "icon-ghost-sm", ...props }) {
+  return _jsx2(ButtonFrame, { ...props, variant, children: _jsx2(Icon, { name: icon }) });
+}
+
+// packages/ui-system/dist/search-input.js
+import { jsx as _jsx3, jsxs as _jsxs2 } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+function SearchInput({ label, value, onValueChange, size = "medium", placeholder = "Type to search...", ...props }) {
+  const input = useRef(null);
+  const composing = useRef(false);
+  const [draft, setDraft] = useState(null);
+  return _jsxs2("div", { className: "vx-search-input", "data-size": size, children: [_jsx3(Icon, { name: "search" }), _jsx3("input", { ...props, ref: input, type: "search", "aria-label": label, placeholder, value: draft ?? value, onChange: (event) => {
+    const next = event.currentTarget.value;
+    if (composing.current)
+      setDraft(next);
+    else if (next !== value)
+      onValueChange(next);
+  }, onCompositionStart: (event) => {
+    composing.current = true;
+    setDraft(event.currentTarget.value);
+  }, onCompositionEnd: (event) => {
+    composing.current = false;
+    setDraft(null);
+    if (event.currentTarget.value !== value)
+      onValueChange(event.currentTarget.value);
+  } }), (draft ?? value) && _jsx3(IconButton, { icon: "clear", label: `Clear ${label}`, className: "vx-search-clear", disabled: props.disabled, onClick: () => {
+    onValueChange("");
+    input.current?.focus();
+  } })] });
+}
+
+// packages/ui-system/dist/dialog.js
+import { jsx as _jsx4, jsxs as _jsxs3 } from "react/jsx-runtime";
+import { useEffect, useId, useLayoutEffect, useRef as useRef2 } from "react";
+function Dialog({ title, open, onOpenChange, children, actions, className }) {
+  const ref = useRef2(null);
+  const heading = useId();
+  useEffect(() => {
+    const dialog = ref.current;
+    if (!dialog || dialog.open === open)
+      return;
+    if (open)
+      dialog.showModal();
+    else
+      dialog.close();
+  }, [open]);
+  useLayoutEffect(() => {
+    const dialog = ref.current;
+    return () => {
+      if (dialog?.open)
+        dialog.close();
+    };
+  }, []);
+  return _jsxs3("dialog", { ref, className: className ? `vx-dialog ${className}` : "vx-dialog", "aria-labelledby": heading, onCancel: (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    onOpenChange(false);
+  }, onClose: (event) => {
+    if (open && !event.currentTarget.open)
+      onOpenChange(false);
+  }, children: [_jsxs3("header", { children: [_jsx4("h2", { id: heading, children: title }), _jsx4(IconButton, { icon: "close", label: "Close dialog", onClick: () => onOpenChange(false) })] }), _jsx4("div", { className: "vx-dialog-body", children }), actions && _jsx4("footer", { children: actions })] });
+}
+
+// packages/studio-workbench/src/ad-player.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+// packages/studio-workbench/src/ad-comparison-picker.tsx
+import * as React2 from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var identity = (input) => JSON.stringify(input);
+function Preview({
+  candidate,
+  resolve
+}) {
+  const [url, setUrl] = React2.useState("");
+  const [unavailable, setUnavailable] = React2.useState(false);
+  React2.useEffect(() => {
+    let active = true;
+    setUrl("");
+    setUnavailable(false);
+    void resolve(candidate.ref).then(
+      (location) => {
+        if (active) setUrl(location.previewUrl);
+      },
+      () => {
+        if (active) setUnavailable(true);
+      }
+    );
+    return () => {
+      active = false;
+    };
+  }, [candidate.ref.storeId, candidate.ref.objectId, candidate.ref.versionId]);
+  return /* @__PURE__ */ jsxs2("span", { className: "ad-video-choice-preview", children: [
+    url && !unavailable ? /* @__PURE__ */ jsx2(
+      "video",
+      {
+        src: url,
+        muted: true,
+        playsInline: true,
+        preload: "metadata",
+        "aria-hidden": "true",
+        onError: () => setUnavailable(true)
+      }
+    ) : /* @__PURE__ */ jsx2("span", { children: unavailable ? "Preview unavailable" : "Loading preview\u2026" }),
+    candidate.durationMs != null && /* @__PURE__ */ jsxs2("span", { className: "ad-video-choice-duration", children: [
+      Number((candidate.durationMs / 1e3).toFixed(2)),
+      "s"
+    ] })
+  ] });
+}
+function AdComparisonPicker({
+  slotId,
+  slots,
+  candidates,
+  resolve,
+  onChoose,
+  onClose
+}) {
+  const [query, setQuery] = React2.useState("");
+  const column = slots.findIndex((slot) => slot.id === slotId) + 1;
+  const matching = candidates.filter(
+    (candidate) => candidate.label.toLocaleLowerCase().includes(query.trim().toLocaleLowerCase())
+  );
+  return /* @__PURE__ */ jsxs2(
+    Dialog,
+    {
+      title: "Choose video",
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) onClose();
+      },
+      className: "ad-video-picker",
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: "ad-video-picker-toolbar", children: [
+          /* @__PURE__ */ jsx2(
+            SearchInput,
+            {
+              label: "Search videos",
+              placeholder: "Search scenes or versions\u2026",
+              value: query,
+              onValueChange: setQuery
+            }
+          ),
+          /* @__PURE__ */ jsxs2("span", { children: [
+            matching.length,
+            " ",
+            matching.length === 1 ? "video" : "videos",
+            " \xB7 Column ",
+            column
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx2("div", { className: "ad-video-picker-grid", "aria-label": "Project videos", children: matching.map((candidate) => {
+          const used = slots.findIndex(
+            (slot) => slot.id !== slotId && identity(slot.input) === identity(candidate.input)
+          );
+          const current = slots.some(
+            (slot) => slot.id === slotId && identity(slot.input) === identity(candidate.input)
+          );
+          return /* @__PURE__ */ jsxs2(
+            "button",
+            {
+              type: "button",
+              className: "ad-video-choice",
+              disabled: used >= 0,
+              "aria-label": `Choose ${candidate.label}`,
+              "aria-pressed": current,
+              onClick: () => onChoose(candidate.input),
+              children: [
+                /* @__PURE__ */ jsx2(Preview, { candidate, resolve }),
+                /* @__PURE__ */ jsx2("span", { className: "ad-video-choice-title", children: candidate.title }),
+                /* @__PURE__ */ jsxs2("span", { className: "ad-video-choice-meta", children: [
+                  "Version ",
+                  candidate.versionNumber,
+                  candidate.input.kind === "edit" ? " \xB7 Edited" : ""
+                ] }),
+                /* @__PURE__ */ jsx2("span", { className: "ad-video-choice-state", children: used >= 0 ? `In column ${used + 1}` : current ? "Current video" : "Add to column" })
+              ]
+            },
+            identity(candidate.input)
+          );
+        }) }),
+        !matching.length && /* @__PURE__ */ jsx2("p", { className: "ad-video-picker-empty", role: "status", children: candidates.length ? "No videos match your search." : "No playable videos in this project yet." })
+      ]
+    }
+  );
+}
+
+// packages/studio-workbench/src/ad-view-panels.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function AdCompareView({ Compare, compareProps, picker, onBack }) {
+  return /* @__PURE__ */ jsxs3("section", { className: "ad-panel ad-compare", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "ad-section-heading", children: [
+      /* @__PURE__ */ jsx3("h1", { children: "Compare" }),
+      /* @__PURE__ */ jsx3(Button, { label: "Back to film", variant: "text-ghost-sm", onClick: onBack })
+    ] }),
+    Compare ? /* @__PURE__ */ jsx3(Compare, { ...compareProps }) : /* @__PURE__ */ jsxs3("div", { className: "ad-empty", children: [
+      /* @__PURE__ */ jsx3("h2", { children: "Compare video candidates" }),
+      /* @__PURE__ */ jsx3("p", { children: "Enable the media tools plugin to compare videos." })
+    ] }),
+    picker && /* @__PURE__ */ jsx3(AdComparisonPicker, { ...picker })
+  ] });
+}
+
+// packages/ads-compare/src/client.tsx
+function activate(client) {
+  client.registerUI({
+    id: "compare",
+    title: "Ads Compare",
+    kind: "component",
+    component: AdCompareView
+  });
+}
+export {
+  activate as default
+};

package/dist/client.js

@@ -0,0 +1,3 @@
+import './client-code.css';
+export { default } from './client-code.js';
+export * from './client-code.js';

package/package.json

@@ -1,6 +1,21 @@
 {
   "name": "@vivix-labs/ads-compare",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.0-beta",
+  "type": "module",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/",
+    "tag": "beta"
+  },
+  "files": [
+    "dist",
+    "studio-plugin.json"
+  ],
+  "exports": {
+    "./client": "./dist/client.js"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
 }

package/studio-plugin.json

@@ -0,0 +1,8 @@
+{
+  "manifestVersion": "0.2",
+  "id": "vivix.ads-compare",
+  "requirements": {
+    "studioPluginApi": "^0.2.1"
+  },
+  "requestedAccess": []
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.