ScorePlay × Premiere Pro · UXP panel

Spectrum UI kit & the UXP walls

Every UI building block available to the panel, in Premiere's dark theme — and, below, a plain list of everything the panel cannot do, so we never design toward a dead end.

These components are faithful CSS reproductions of Adobe Spectrum's dark theme, so they render standalone. In the real panel they are actual sp-* widgets or Spectrum Web Components (SWC, pinned v0.37.0, needs enableSWCSupport). Note: this reference page runs in a browser, so it isn't itself bound by the UXP limits listed at the bottom — those apply to the panel.

Components you can use

18 patterns
sp-buttonsp-*
Import Cancel Remove
Accent / secondary / negative. Pill shape, 32px.
sp-action-buttonsp-*
▤▦⤢⋯
Icon / toggle buttons — grid density, view switches.
SearchSWC
Type-to-search over the ScorePlay library.
sp-textfieldsp-*
Text input — e.g. the LucidLink mount path (focus ring shown).
sp-picker + sp-menusp-*
Competition▾
All events
UTS Nîmes 2026
Champions League
Dropdown filters — event, team, quality.
checkbox · switch · radiosp-*
✓ Include markers Auto-add to timeline Original quality
Toggles & options.
TagsSWC
rublev × clay court × semi-final ×
Active facets / applied filters.
Progress bar (Meter)SWC
Downloading68%
Linking…
Determinate + indeterminate. Import / link feedback.
circular progressSWC
Resolving…
Inline busy state (no spin animation in UXP — see limits).
sp-slidersp-*
Thumbnail size, volume, scrub-preview scale.
Card (media tile)SWC
◌ Streaming
MOUTET_BAB.mxf
Jul 1, 2026 · video
The result grid — flexbox + flex-wrap of these.
TableSWC
NameEventDur
DJI_2026…Nîmes00:42
MOUTET_BABNîmes12:08
List view — sortable columns.
ToastSWC
✓ Added to project ! Import failed — retry
Confirm on IMPORT_MEDIA_COMPLETE.
sp-tooltipsp-*
Streams on demand via LucidLink
Hover hints on tiles & actions.
Dialog (uxpShowModal)SWC
Import quality
Choose the version to link into your project.
CancelImport
One modal at a time; returns a Promise.
Illustrated messageSWC
🔍
No media found
Try a different search or event.
Empty / error states.
Status lightsp-*
Original native Linking… Offline Not imported
Per-clip source/quality state.
Divider · Field labelsp-*
Destination bin
ScorePlay Imports▾
Labels, dividers, section structure.

What the panel can't do

verified against Adobe docs

Rendering / CSS it's not a browser

  • ✗CSS Grid layout — verbatim "not available." Build grids with flexbox + flex-wrap.
  • ✗CSS transitions & @keyframes — no animation. Hover = discrete opacity/class toggles; no spinners.
  • ✗Un-precompiled Sass/SCSS — compile to plain CSS at build.
  • ✗Undeclared network hosts — every API/CDN/thumbnail host must be allowlisted in the manifest.
  • ✗Multiple modals at once — one <dialog>, must pre-exist in the DOM, blocks the host.

Premiere API everything writes via executeTransaction

  • ✗Drag a tile onto the timeline / project panel — import is click → importFiles(), never drag-to-host.
  • ✗Append to end of sequence — no createAppendItemAction. Compute the end time and insert/overwrite there.
  • ✗Scrub the Source monitor to a timecode — open / read-position / play only, no seek.
  • ✗A separate Program-monitor object — use the sequence's player position instead.

Events / interaction EventManager, Ppro 25+

  • ✗Live playhead / time-changed event — no tick stream; poll getPlayerPosition() on a timer.
  • ✗Play / pause / per-frame callbacks — not exposed.
  • ✗Keyboard shortcuts from the manifest — documented as unavailable in Premiere.
  • ✗Reliable hide() / destroy() — Adobe: "not working as expected yet" — don't tear down on them.

Unverified — test before promising confirm

  • ?Custom fonts / @font-face on the panel & Spectrum widgets.
  • ?flexbox gap, position:sticky/fixed — use margins if they fail.
  • ?In-content right-click context menus.
  • ?Reading an imported clip's on-disk source path — plan a fallback (track paths / XMP) for relink.