@jxsuite/studio 6.1.1 → 6.1.2

package/src/panels/style-utils.ts

@@ -1,16 +1,88 @@
 /** Style utilities — pure CSS helper functions used by the style panel. */
 
-import type { JxMutableNode } from "@jxsuite/schema/types";
+import { isNumber, isString } from "@jxsuite/schema/guards";
+import type { JxMutableNode, JxStyle } from "@jxsuite/schema/types";
 
 import { activeTab } from "../workspace/workspace";
 import { getEffectiveStyle } from "../site-context";
 import cssMeta from "../../data/css-meta.json";
 
+/** One `$show` condition: the row is offered while `prop` holds one of `values`, or any value. */
+export interface CssShowCondition {
+  prop: string;
+  values: string[];
+}
+
+/** One Modern Font Stacks preset a `fontFamily` entry offers. */
+export interface CssFontPreset {
+  title: string;
+  value: string;
+}
+
+/** Every kind of value a css-meta entry holds under any of its keys. */
+type CssMetaValue =
+  | string
+  | number
+  | boolean
+  | string[]
+  | CssShowCondition[]
+  | CssFontPreset[]
+  | Record<string, string>;
+
+/**
+ * What `css-meta.json` says about one CSS property: which section files it, where in that section,
+ * and which control edits it. Every entry in the file carries `$order`; the rest is per property.
+ *
+ * The index signature is what keeps an entry assignable to the open records `inferInputType()` and
+ * `propLabel()` read it through; it admits only the value kinds the file actually holds.
+ */
+export interface CssMetaEntry {
+  $order: number;
+  $section?: string;
+  $label?: string;
+  $input?: string;
+  $buttonValues?: string[];
+  $icons?: Record<string, string>;
+  $keywords?: string[];
+  $longhands?: string[];
+  /** `true` on a shorthand row; the shorthand's own name on each of its longhands. */
+  $shorthand?: string | boolean;
+  $shorthandType?: string;
+  $show?: CssShowCondition[];
+  $span?: number;
+  $units?: string[];
+  enum?: string[];
+  examples?: string[];
+  presets?: CssFontPreset[];
+  format?: string;
+  type?: string;
+  minimum?: number;
+  maximum?: number;
+  [key: string]: CssMetaValue | undefined;
+}
+
+/** A shorthand's longhand, with its own css-meta entry. */
+export interface CssLonghand {
+  name: string;
+  entry: CssMetaEntry;
+}
+
+/**
+ * Css-meta's property table, by property name. The JSON module's inferred type is checked against
+ * {@link CssMetaEntry} here, once, so a key the file stops carrying is a type error at this line.
+ */
+export const cssDefs: Readonly<Record<string, CssMetaEntry>> = cssMeta.$defs;
+
 let cssInitialMap = new Map<string, string>();
 
 /** Initialise cssInitialMap from webdata — call once during bootstrap. */
 export function initCssData(webdata: { cssProps: string[][] }) {
-  cssInitialMap = new Map(webdata.cssProps as [string, string][]);
+  cssInitialMap = new Map<string, string>();
+  for (const [name, initial] of webdata.cssProps) {
+    if (name !== undefined && initial !== undefined) {
+      cssInitialMap.set(name, initial);
+    }
+  }
 }
 
 /** Get the CSS initial-value map (populated by initCssData). */
@@ -18,31 +90,30 @@ export function getCssInitialMap() {
   return cssInitialMap;
 }
 
+/**
+ * A declaration's value rather than a nested block (`:hover`, `@--md`) or a block list.
+ *
+ * Exactly the `typeof value !== "object"` test the Style tab has always made, so a `null` a JSON
+ * document might hold still counts as a block, never as a value.
+ */
+export function isDeclarationValue(value: JxStyle[string]): value is string | number | undefined {
+  return typeof value !== "object";
+}
+
 // ─── Condition helpers ──────────────────────────────────────────────────────
 
-/** @param {{ prop: string; values: string[] }} cond @param {Record<string, unknown>} styles */
-export function conditionPasses(
-  cond: { prop: string; values: string[] },
-  styles: Record<string, unknown>,
-) {
-  const val = (styles[cond.prop] ?? "") as string;
+/** Whether one `$show` condition holds against the style being edited. */
+export function conditionPasses(cond: CssShowCondition, styles: JxStyle) {
+  const val = styles[cond.prop] ?? "";
   if (cond.values.length === 0) {
     return val !== "" && val !== "initial";
   }
-  return cond.values.includes(val);
+  return isString(val) && cond.values.includes(val);
 }
 
-/**
- * @param {{ $show?: { prop: string; values: string[] }[] }} entry @param {Record<string, unknown>}
- *   styles
- */
-export function allConditionsPass(
-  entry: { $show?: { prop: string; values: string[] }[] },
-  styles: Record<string, unknown>,
-) {
-  return (entry.$show ?? []).every((/** @type {{ prop: string; values: string[] }} */ c) =>
-    conditionPasses(c, styles),
-  );
+/** Whether every `$show` condition of an entry holds; an entry with none always passes. */
+export function allConditionsPass(entry: Pick<CssMetaEntry, "$show">, styles: JxStyle) {
+  return (entry.$show ?? []).every((c) => conditionPasses(c, styles));
 }
 
 // ─── Auto-open sections ─────────────────────────────────────────────────────
@@ -64,11 +135,10 @@ export function autoOpenSections(node: JxMutableNode, currentSections: Record<st
   const style = node.style || {};
   const result = { ...currentSections };
   for (const prop of Object.keys(style)) {
-    if (typeof style[prop] === "object") {
+    if (!isDeclarationValue(style[prop])) {
       continue;
     }
-    const entry = (cssMeta.$defs as Record<string, Record<string, unknown>>)[prop];
-    const section = (entry?.$section as string) ?? "other";
+    const section = cssDefs[prop]?.$section ?? "other";
     if (result[section] === undefined) {
       result[section] = true;
     }
@@ -78,31 +148,21 @@ export function autoOpenSections(node: JxMutableNode, currentSections: Record<st
 
 // ─── Shorthand expand/compress ──────────────────────────────────────────────
 
-/** Get longhands for a shorthand property from css-meta */
-export function getLonghands(shorthandProp: string) {
-  const entry = (cssMeta.$defs as Record<string, Record<string, unknown>>)[shorthandProp];
-  if (entry?.$longhands) {
-    return (entry.$longhands as string[])
-      .map((name: string) => ({
-        entry: (cssMeta.$defs as Record<string, Record<string, unknown>>)[name] || {
-          $order: 0,
-        },
-        name,
-      }))
-      .toSorted(
-        (
-          /** @type {{ entry: Record<string, unknown> }} */ a,
-          /** @type {{ entry: Record<string, unknown> }} */ b,
-        ) => (a.entry.$order as number) - (b.entry.$order as number),
-      );
+/** Get longhands for a shorthand property from css-meta, in their `$order`. */
+export function getLonghands(shorthandProp: string): CssLonghand[] {
+  const listed = cssDefs[shorthandProp]?.$longhands;
+  if (listed) {
+    return listed
+      .map((name) => ({ entry: cssDefs[name] || { $order: 0 }, name }))
+      .toSorted((a, b) => a.entry.$order - b.entry.$order);
   }
-  const result = [];
-  for (const [name, e] of Object.entries(cssMeta.$defs) as [string, Record<string, unknown>][]) {
+  const result: CssLonghand[] = [];
+  for (const [name, e] of Object.entries(cssDefs)) {
     if (e.$shorthand === shorthandProp) {
       result.push({ entry: e, name });
     }
   }
-  result.sort((a, b) => (a.entry.$order as number) - (b.entry.$order as number));
+  result.sort((a, b) => a.entry.$order - b.entry.$order);
   return result;
 }
 
@@ -232,7 +292,7 @@ export function getFontVars() {
   const style = getEffectiveStyle(activeTab.value?.doc.document?.style);
   const vars = [];
   for (const [k, v] of Object.entries(style)) {
-    if (k.startsWith("--font") && (typeof v === "string" || typeof v === "number")) {
+    if (k.startsWith("--font") && (isString(v) || isNumber(v))) {
       vars.push({ name: k, value: String(v) });
     }
   }
@@ -247,12 +307,15 @@ export function getFontVars() {
  * `face`, which is the channel every one of these rows ALSO carries, so a weight is shown in the
  * element's own typeface rather than in the panel's.
  */
-export const TYPO_PREVIEW_CHANNELS: Readonly<Record<string, string>> = {
-  fontStyle: "slant",
-  fontVariant: "variant",
-  fontWeight: "weight",
-  textDecoration: "decoration",
-  textTransform: "transform",
-};
+export const TYPO_PREVIEW_CHANNELS = new Map<string, TypoPreviewChannel>([
+  ["fontStyle", "slant"],
+  ["fontVariant", "variant"],
+  ["fontWeight", "weight"],
+  ["textDecoration", "decoration"],
+  ["textTransform", "transform"],
+]);
+
+/** A `jx-option` drawing channel a typography row previews its value through (ui.md §5.3). */
+export type TypoPreviewChannel = "decoration" | "slant" | "transform" | "variant" | "weight";
 
 export { default as cssMeta } from "../../data/css-meta.json";

package/src/panels/stylebook-doc.ts

@@ -21,6 +21,7 @@ import { isKeyframesAtRule } from "@jxsuite/runtime/css";
 import type { StylebookEntry } from "./stylebook-panel";
 import type { ComponentEntry } from "../files/components";
 import type { JxPath } from "../state";
+import { isNonNullObject } from "@jxsuite/schema/guards";
 import type { JxMutableNode, JxStyle } from "@jxsuite/schema/types";
 
 export interface StylebookDocResult {
@@ -44,8 +45,9 @@ function isTagPath(key: string): boolean {
   );
 }
 
-function isPlainObject(v: unknown): v is Record<string, unknown> {
-  return v !== null && typeof v === "object" && !Array.isArray(v);
+/** A nested style block (a rule or an at-rule body), as opposed to a scalar or a block list. */
+function isStyleBlock(value: JxStyle[string]): value is JxStyle {
+  return isNonNullObject(value) && !Array.isArray(value);
 }
 
 /** The specimen-scoping selector prefix (see the module doc). */
@@ -58,12 +60,11 @@ const SPECIMEN_SCOPE = "& .element-card-preview";
  * `styleUpdate` fast path so an edit round-trips through the exact same transform.
  */
 export function transposeStylebookStyle(effectiveStyle: JxStyle): JxStyle {
-  const style = effectiveStyle as Record<string, unknown>;
-  const out: Record<string, unknown> = {};
+  const out: JxStyle = {};
 
   /** Drop the base-width marker, which is not a query and would resolve to `@media --`. */
-  const withoutBaseWidth = (rule: Record<string, unknown>): Record<string, unknown> => {
-    const cleaned: Record<string, unknown> = {};
+  const withoutBaseWidth = (rule: JxStyle): JxStyle => {
+    const cleaned: JxStyle = {};
     for (const [k, v] of Object.entries(rule)) {
       if (k !== "@--") {
         cleaned[k] = v;
@@ -72,8 +73,8 @@ export function transposeStylebookStyle(effectiveStyle: JxStyle): JxStyle {
     return cleaned;
   };
 
-  for (const [k, v] of Object.entries(style)) {
-    if (!isPlainObject(v)) {
+  for (const [k, v] of Object.entries(effectiveStyle)) {
+    if (!isStyleBlock(v)) {
       out[k] = v; // Flat scalars + -- custom props.
       continue;
     }
@@ -89,9 +90,9 @@ export function transposeStylebookStyle(effectiveStyle: JxStyle): JxStyle {
     }
     if (k.startsWith("@")) {
       // Media block: re-key tag rules inside; non-tag keys (scalars/pseudo) apply to the root.
-      const bucket: Record<string, unknown> = {};
+      const bucket: JxStyle = {};
       for (const [mk, mv] of Object.entries(v)) {
-        if (isPlainObject(mv) && isTagPath(mk)) {
+        if (isStyleBlock(mv) && isTagPath(mk)) {
           bucket[`${SPECIMEN_SCOPE} ${mk}`] = withoutBaseWidth(mv);
         } else {
           bucket[mk] = mv;
@@ -107,34 +108,30 @@ export function transposeStylebookStyle(effectiveStyle: JxStyle): JxStyle {
     out[k] = v;
   }
 
-  return out as JxStyle;
+  return out;
 }
 
 /** Resolve a nested tag path ("table th") in a style object; null when absent. */
-function resolveNestedStyle(
-  style: Record<string, unknown>,
-  tagPath: string,
-): Record<string, unknown> | null {
+function resolveNestedStyle(style: JxStyle, tagPath: string): JxStyle | null {
   const parts = tagPath.split(" ");
-  let obj: unknown = style;
+  let obj: JxStyle[string] = style;
   for (const part of parts) {
-    if (!isPlainObject(obj)) {
+    if (!isStyleBlock(obj)) {
       return null;
     }
     obj = obj[part];
   }
-  return isPlainObject(obj) ? obj : null;
+  return isStyleBlock(obj) ? obj : null;
 }
 
 /** Whether the effective style customizes `tagPath` (directly or under any `@media` block). */
 export function hasTagStyle(rootStyle: JxStyle, tagPath: string): boolean {
-  const style = rootStyle as Record<string, unknown>;
-  const direct = resolveNestedStyle(style, tagPath);
+  const direct = resolveNestedStyle(rootStyle, tagPath);
   if (direct && Object.keys(direct).length > 0) {
     return true;
   }
-  for (const [key, val] of Object.entries(style)) {
-    if (!key.startsWith("@") || !isPlainObject(val)) {
+  for (const [key, val] of Object.entries(rootStyle)) {
+    if (!key.startsWith("@") || !isStyleBlock(val)) {
       continue;
     }
     const nested = resolveNestedStyle(val, tagPath);
@@ -179,16 +176,21 @@ export function buildStylebookDoc(opts: BuildStylebookDocOpts): StylebookDocResu
   };
 
   const specimenNode = (entry: StylebookEntry): JxMutableNode => {
-    const attributes: Record<string, string> = { ...entry.attributes };
+    const attributes = { ...entry.attributes };
     if (entry.style) {
       attributes.style = entry.style; // Inline CSS text — legacy `el.style.cssText` parity.
     }
-    return {
-      tagName: entry.tag,
-      ...(entry.text ? { textContent: entry.text } : {}),
-      ...(Object.keys(attributes).length > 0 ? { attributes } : {}),
-      ...(entry.children ? { children: entry.children.map(specimenNode) } : {}),
-    } as JxMutableNode;
+    const node: JxMutableNode = { tagName: entry.tag };
+    if (entry.text) {
+      node.textContent = entry.text;
+    }
+    if (Object.keys(attributes).length > 0) {
+      node.attributes = attributes;
+    }
+    if (entry.children) {
+      node.children = entry.children.map(specimenNode);
+    }
+    return node;
   };
 
   /** A card wrapping one specimen; registers card/preview/specimen paths under `tag`. */
@@ -217,19 +219,18 @@ export function buildStylebookDoc(opts: BuildStylebookDocOpts): StylebookDocResu
         { attributes: { class: "element-card-label" }, tagName: "div", textContent: label },
       ],
       tagName: "div",
-    } as JxMutableNode;
+    };
   };
 
   const sections: JxMutableNode[] = [];
-  const sectionNode = (label: string, cards: JxMutableNode[]): JxMutableNode =>
-    ({
-      attributes: { class: "sb-section" },
-      children: [
-        { attributes: { class: "sb-label" }, tagName: "div", textContent: label },
-        { attributes: { class: "sb-body" }, children: cards, tagName: "div" },
-      ],
-      tagName: "div",
-    }) as JxMutableNode;
+  const sectionNode = (label: string, cards: JxMutableNode[]): JxMutableNode => ({
+    attributes: { class: "sb-section" },
+    children: [
+      { attributes: { class: "sb-label" }, tagName: "div", textContent: label },
+      { attributes: { class: "sb-body" }, children: cards, tagName: "div" },
+    ],
+    tagName: "div",
+  });
 
   // Paths below mirror the assembled tree: root.children[si] = section; section.children[1] =
   // Sb-body; body.children[ci] = card. Sections are appended only when non-empty, so indices are
@@ -293,18 +294,18 @@ export function buildStylebookDoc(opts: BuildStylebookDocOpts): StylebookDocResu
               attributes[p.name] = String(p.default).replaceAll(/^'|'$/g, "");
             }
           }
-          const specimen = {
-            tagName: comp.tagName,
-            ...(Object.keys(attributes).length > 0 ? { attributes } : {}),
-          } as JxMutableNode;
+          const specimen: JxMutableNode = { tagName: comp.tagName };
+          if (Object.keys(attributes).length > 0) {
+            specimen.attributes = attributes;
+          }
           return cardNode(comp.tagName, `<${comp.tagName}>`, specimen, cardPath, null);
         }
         // Npm/format-class components can't be $ref-registered — placeholder box (legacy parity).
-        const fallback = {
+        const fallback: JxMutableNode = {
           attributes: { class: "sb-fallback" },
           tagName: "div",
           textContent: `<${comp.tagName}>`,
-        } as JxMutableNode;
+        };
         return cardNode(comp.tagName, `<${comp.tagName}>`, fallback, cardPath, null);
       });
       sections.push(sectionNode("Components", cards));
@@ -316,17 +317,19 @@ export function buildStylebookDoc(opts: BuildStylebookDocOpts): StylebookDocResu
       attributes: { class: "sb-empty" },
       tagName: "div",
       textContent: opts.customizedOnly ? "No customized elements" : "No matching elements",
-    } as JxMutableNode);
+    });
   }
 
-  const doc = {
-    ...($elements.length > 0 ? { $elements } : {}),
-    $media: opts.effectiveMedia,
-    attributes: { class: "sb-root" },
-    children: sections,
-    style: transposeStylebookStyle(opts.effectiveStyle),
-    tagName: "div",
-  } as JxMutableNode;
+  // Assigned in this order so the posted document keeps its key order: `$elements` leads when present.
+  const doc: JxMutableNode = {};
+  if ($elements.length > 0) {
+    doc.$elements = $elements;
+  }
+  doc.$media = opts.effectiveMedia;
+  doc.attributes = { class: "sb-root" };
+  doc.children = sections;
+  doc.style = transposeStylebookStyle(opts.effectiveStyle);
+  doc.tagName = "div";
 
   return { doc, pathToTag, tagToCardPath };
 }

package/src/panels/stylebook-layers-panel.ts

@@ -31,8 +31,8 @@ import type {
   StylebookRowView,
   StylebookVariableView,
 } from "../surfaces/panel-stylebook-layers";
+import { isNonNullObject } from "@jxsuite/schema/guards";
 import type { JxStyle } from "@jxsuite/schema/types";
-import type { ComponentEntry } from "../files/components.js";
 
 /** What the panel is drawn from: the catalogue, and what selecting a row does. */
 export interface StylebookLayersCtx {
@@ -40,9 +40,9 @@ export interface StylebookLayersCtx {
   stylebookMeta: { $sections: { label: string; elements: StylebookEntry[] }[] };
 }
 
-/** The row's own padding at depth 0, and what each level of nesting adds. */
-const INDENT_BASE = 8;
-const INDENT_STEP = 16;
+/** The row's own padding at depth 0, and what each level of nesting adds (the Outline's too). */
+export const INDENT_BASE = 8;
+export const INDENT_STEP = 16;
 
 /**
  * Whether the open file has already written a `& <tag>` block with something in it.
@@ -50,9 +50,9 @@ const INDENT_STEP = 16;
  * @param {JxStyle} rootStyle
  * @param {string} tag
  */
-function hasTagStyle(rootStyle: JxStyle, tag: string) {
+function hasTagStyle(rootStyle: JxStyle, tag: string): boolean {
   const s = rootStyle[`& ${tag}`];
-  return Boolean(s) && typeof s === "object" && Object.keys(s as object).length > 0;
+  return isNonNullObject(s) && Object.keys(s).length > 0;
 }
 
 /**
@@ -121,7 +121,7 @@ function variableRows(rootStyle: JxStyle): StylebookVariableView[] {
  */
 export function stylebookLayersValues(ctx: StylebookLayersCtx): StylebookLayersValues {
   const tab = activeTab.value;
-  const rootStyle = (tab?.doc.document?.style || {}) as JxStyle;
+  const rootStyle: JxStyle = tab?.doc.document?.style || {};
   const { selection } = shell.stylebook;
   const leaf = selectedLeaf(selection);
 
@@ -131,7 +131,7 @@ export function stylebookLayersValues(ctx: StylebookLayersCtx): StylebookLayersV
       elementRows(entry, rootStyle, leaf, 0, "", rows);
     }
   }
-  for (const comp of componentRegistry as ComponentEntry[]) {
+  for (const comp of componentRegistry) {
     rows.push({
       customized: false,
       indent: `${INDENT_BASE}px`,
@@ -174,7 +174,7 @@ function revealSelectedRow(host: HTMLElement): void {
   queueMicrotask(() => {
     host
       .querySelector('[part="row"][aria-current="true"]')
-      ?.scrollIntoView?.({ behavior: "smooth", block: "nearest" });
+      ?.scrollIntoView({ behavior: "smooth", block: "nearest" });
   });
 }
 

package/src/panels/stylebook-panel.ts

@@ -36,7 +36,8 @@ import { PROJECT_STYLES_TITLE } from "../style/project-styles";
 import { mountStylebookCanvas, panToStylebookTag } from "../canvas/iframe-host";
 import stylebookMeta from "../../data/stylebook-meta.json";
 import type { CanvasPanelEntry } from "../canvas/canvas-utils";
-import type { CanvasStageView } from "../surfaces/canvas-stage";
+import type { CanvasStageHandle, CanvasStageView } from "../surfaces/canvas-stage";
+import type { TabUi } from "../tabs/tab";
 
 export interface StylebookEntry {
   tag: string;
@@ -61,7 +62,7 @@ interface StylebookCtx {
     surface: CanvasSurface,
     view: CanvasStageView,
     entries: CanvasPanelEntry[],
-  ) => Promise<unknown>;
+  ) => Promise<CanvasStageHandle | null>;
   /** A node the stage drew for a part — here, the empty box the chrome bar stands in. */
   stageHost: (surface: CanvasSurface, part: string) => HTMLElement | null;
   applyTransform: (surface: CanvasSurface) => void;
@@ -151,7 +152,7 @@ export async function renderStylebookMode(
      so the field keeps its caret across the stage rebuild a keystroke in it causes. */
   const chromeBarNode = chromeBar(surface);
 
-  (canvasWrap as HTMLElement).style.overflow = "hidden";
+  canvasWrap.style.overflow = "hidden";
 
   /** @type {{ name: string; displayName: string; width: number }[]} */
   const allPanelDefs = [];
@@ -173,7 +174,7 @@ export async function renderStylebookMode(
   /** @type {CanvasPanelEntry[]} */
   let panelEntries;
   if (!hasMedia) {
-    const hasBaseWidth = effectiveMedia && effectiveMedia["--"];
+    const hasBaseWidth = effectiveMedia["--"];
     const label = hasBaseWidth ? `${mediaDisplayName("--")} (${baseWidth}px)` : null;
     panelEntries = [
       ctx.canvasPanelEntry(
@@ -224,22 +225,17 @@ export async function renderStylebookMode(
   const generated = buildStylebookDoc({
     components: componentRegistry,
     customizedOnly: Boolean(customizedOnly),
-    effectiveMedia: effectiveMedia ?? {},
+    effectiveMedia,
     effectiveStyle: getEffectiveStyle(tab?.doc.document?.style),
     filter,
-    meta: stylebookMeta as { $sections: { label: string; elements: StylebookEntry[] }[] },
+    meta: stylebookMeta,
     projectRoot: projectState?.projectRoot ?? null,
   });
 
   const { panels } = surface;
   for (const { panel } of panelEntries) {
     panels.push(panel);
-    mountStylebookCanvas(
-      surface.renderGeneration,
-      generated,
-      panel.canvas as HTMLElement,
-      panel._width,
-    );
+    mountStylebookCanvas(surface.renderGeneration, generated, panel.canvas, panel._width);
   }
   if (hasMedia) {
     ctx.updateActivePanelHeaders(surface);
@@ -260,16 +256,16 @@ export async function renderStylebookMode(
  */
 export function selectStylebookTag(tag: string, media?: string | null, { panCanvas = false } = {}) {
   shell.stylebook.selection = tag;
+  const ui: Partial<TabUi> = { activeSelector: tag, rightTab: "style" };
+  if (media !== undefined) {
+    ui.activeMedia = media;
+  }
   updateSession(activeTab.value, {
     // The ROOT path, not an empty selection: stylebook mode has always parked the selection on the
     // Document element while the Style tab edits a TAG, and widening the field to a list changed
     // Which literal spells that — `[[]]` is one selected path, the root — not what it means.
     selection: [[]],
-    ui: {
-      activeSelector: tag,
-      rightTab: "style",
-      ...(media !== undefined ? { activeMedia: media } : {}),
-    },
+    ui,
   });
 
   if (tag && panCanvas) {