@jxsuite/studio 0.23.1 → 0.24.0

package/src/tabs/{transact.js → transact.ts}

@@ -1,13 +1,12 @@
-import { toRaw } from "../reactivity.js";
-import { getNodeAtPath, parentElementPath, childIndex, pathsEqual, isAncestor } from "../state.js";
+/// <reference lib="dom" />
+import { toRaw } from "../reactivity";
+import { getNodeAtPath, parentElementPath, childIndex, pathsEqual, isAncestor } from "../state";
 
-/**
- * @typedef {import("../tabs/tab.js").Tab} Tab
- *
- * @typedef {import("../state.js").JxPath} JxPath
- *
- * @typedef {string | number | boolean | object | null | undefined} JsonValue
- */
+import type { Tab } from "../tabs/tab";
+import type { JxPath } from "../state";
+
+import type { JsonValue } from "../types";
+import type { JxMutableNode } from "@jxsuite/schema/types";
 
 const HISTORY_LIMIT = 100;
 
@@ -21,7 +20,11 @@ const HISTORY_LIMIT = 100;
  * @param {(tab: Tab) => void} mutationFn
  * @param {{ skipHistory?: boolean }} [opts]
  */
-export function transactDoc(tab, mutationFn, { skipHistory = false } = {}) {
+export function transactDoc(
+  tab: Tab | null,
+  mutationFn: (tab: Tab) => void,
+  { skipHistory = false }: { skipHistory?: boolean } = {},
+) {
   if (!tab) return;
   mutationFn(tab);
 
@@ -52,14 +55,18 @@ export function transactDoc(tab, mutationFn, { skipHistory = false } = {}) {
  * @param {(doc: JxMutableNode) => void} fn
  * @param {{ skipHistory?: boolean }} [opts]
  */
-export function transact(tab, fn, opts) {
+export function transact(
+  tab: Tab | null,
+  fn: (doc: JxMutableNode) => void,
+  opts?: { skipHistory?: boolean },
+) {
   transactDoc(tab, (t) => fn(t.doc.document), opts);
 }
 
 // ─── Undo / Redo ─────────────────────────────────────────────────────────────
 
 /** @param {Tab} tab */
-export function undo(tab) {
+export function undo(tab: Tab) {
   if (tab.history.index <= 0) return;
   tab.history.index--;
   const snap = tab.history.snapshots[tab.history.index];
@@ -69,7 +76,7 @@ export function undo(tab) {
 }
 
 /** @param {Tab} tab */
-export function redo(tab) {
+export function redo(tab: Tab) {
   if (tab.history.index >= tab.history.snapshots.length - 1) return;
   tab.history.index++;
   const snap = tab.history.snapshots[tab.history.index];
@@ -86,7 +93,12 @@ export function redo(tab) {
  * @param {number} index
  * @param {JxMutableNode} nodeDef
  */
-export function mutateInsertNode(tab, parentPath, index, nodeDef) {
+export function mutateInsertNode(
+  tab: Tab,
+  parentPath: JxPath,
+  index: number,
+  nodeDef: JxMutableNode,
+) {
   const parent = getNodeAtPath(tab.doc.document, parentPath);
   if (!parent.children) parent.children = [];
   parent.children.splice(index, 0, structuredClone(nodeDef));
@@ -96,14 +108,11 @@ export function mutateInsertNode(tab, parentPath, index, nodeDef) {
  * @param {Tab} tab
  * @param {JxPath} path
  */
-export function mutateRemoveNode(tab, path) {
+export function mutateRemoveNode(tab: Tab, path: JxPath) {
   if (!path || path.length < 2) return;
-  const elemPath = /** @type {JxPath} */ (parentElementPath(path));
-  const idx = /** @type {number} */ (childIndex(path));
-  /** @type {JxMutableNode[]} */ (getNodeAtPath(tab.doc.document, elemPath).children).splice(
-    idx,
-    1,
-  );
+  const elemPath = parentElementPath(path) as JxPath;
+  const idx = childIndex(path) as number;
+  (getNodeAtPath(tab.doc.document, elemPath).children as JxMutableNode[]).splice(idx, 1);
   if (tab.session.selection && isAncestor(path, tab.session.selection)) {
     tab.session.selection = null;
   }
@@ -113,18 +122,14 @@ export function mutateRemoveNode(tab, path) {
  * @param {Tab} tab
  * @param {JxPath} path
  */
-export function mutateDuplicateNode(tab, path) {
+export function mutateDuplicateNode(tab: Tab, path: JxPath) {
   if (!path || path.length < 2) return;
   const node = getNodeAtPath(tab.doc.document, path);
   if (!node) return;
-  const elemPath = /** @type {JxPath} */ (parentElementPath(path));
-  const idx = /** @type {number} */ (childIndex(path));
+  const elemPath = parentElementPath(path) as JxPath;
+  const idx = childIndex(path) as number;
   const clone = structuredClone(toRaw(node));
-  /** @type {JxMutableNode[]} */ (getNodeAtPath(tab.doc.document, elemPath).children).splice(
-    idx + 1,
-    0,
-    clone,
-  );
+  (getNodeAtPath(tab.doc.document, elemPath).children as JxMutableNode[]).splice(idx + 1, 0, clone);
   tab.session.selection = [...elemPath, "children", idx + 1];
 }
 
@@ -133,18 +138,14 @@ export function mutateDuplicateNode(tab, path) {
  * @param {JxPath} path
  * @param {string} wrapperTag
  */
-export function mutateWrapNode(tab, path, wrapperTag = "div") {
+export function mutateWrapNode(tab: Tab, path: JxPath, wrapperTag: string = "div") {
   if (!path || path.length < 2) return;
   const node = getNodeAtPath(tab.doc.document, path);
   if (!node) return;
-  const elemPath = /** @type {JxPath} */ (parentElementPath(path));
-  const idx = /** @type {number} */ (childIndex(path));
+  const elemPath = parentElementPath(path) as JxPath;
+  const idx = childIndex(path) as number;
   const wrapper = { tagName: wrapperTag, children: [structuredClone(toRaw(node))] };
-  /** @type {JxMutableNode[]} */ (getNodeAtPath(tab.doc.document, elemPath).children).splice(
-    idx,
-    1,
-    wrapper,
-  );
+  (getNodeAtPath(tab.doc.document, elemPath).children as JxMutableNode[]).splice(idx, 1, wrapper);
   tab.session.selection = [...elemPath, "children", idx];
 }
 
@@ -154,12 +155,12 @@ export function mutateWrapNode(tab, path, wrapperTag = "div") {
  * @param {JxPath} toParentPath
  * @param {number} toIndex
  */
-export function mutateMoveNode(tab, fromPath, toParentPath, toIndex) {
+export function mutateMoveNode(tab: Tab, fromPath: JxPath, toParentPath: JxPath, toIndex: number) {
   const doc = tab.doc.document;
-  const fromParentPath = /** @type {JxPath} */ (parentElementPath(fromPath));
-  const fromIdx = /** @type {number} */ (childIndex(fromPath));
+  const fromParentPath = parentElementPath(fromPath) as JxPath;
+  const fromIdx = childIndex(fromPath) as number;
   const fromParent = getNodeAtPath(doc, fromParentPath);
-  const [node] = /** @type {JxMutableNode[]} */ (fromParent.children).splice(fromIdx, 1);
+  const [node] = (fromParent.children as JxMutableNode[]).splice(fromIdx, 1);
   const toParent = getNodeAtPath(doc, toParentPath);
   if (!toParent.children) toParent.children = [];
   let adjustedIndex = toIndex;
@@ -185,7 +186,7 @@ export function mutateMoveNode(tab, fromPath, toParentPath, toIndex) {
  * @param {string} key
  * @param {JsonValue} value
  */
-export function mutateUpdateProperty(tab, path, key, value) {
+export function mutateUpdateProperty(tab: Tab, path: JxPath, key: string, value: JsonValue) {
   const node = getNodeAtPath(tab.doc.document, path);
   if (value === undefined || value === null || value === "") delete node[key];
   else node[key] = value;
@@ -197,7 +198,7 @@ export function mutateUpdateProperty(tab, path, key, value) {
  * @param {string} prop
  * @param {string | undefined} value
  */
-export function mutateUpdateStyle(tab, path, prop, value) {
+export function mutateUpdateStyle(tab: Tab, path: JxPath, prop: string, value: string | undefined) {
   const node = getNodeAtPath(tab.doc.document, path);
   if (!node.style) node.style = {};
   if (value === undefined || value === "") delete node.style[prop];
@@ -211,7 +212,12 @@ export function mutateUpdateStyle(tab, path, prop, value) {
  * @param {string} attr
  * @param {string | undefined} value
  */
-export function mutateUpdateAttribute(tab, path, attr, value) {
+export function mutateUpdateAttribute(
+  tab: Tab,
+  path: JxPath,
+  attr: string,
+  value: string | undefined,
+) {
   const node = getNodeAtPath(tab.doc.document, path);
   if (!node.attributes) node.attributes = {};
   if (value === undefined || value === "") delete node.attributes[attr];
@@ -226,7 +232,13 @@ export function mutateUpdateAttribute(tab, path, attr, value) {
  * @param {string} prop
  * @param {string | undefined} value
  */
-export function mutateUpdateMediaStyle(tab, path, mediaName, prop, value) {
+export function mutateUpdateMediaStyle(
+  tab: Tab,
+  path: JxPath,
+  mediaName: string,
+  prop: string,
+  value: string | undefined,
+) {
   if (!mediaName) return mutateUpdateStyle(tab, path, prop, value);
   const node = getNodeAtPath(tab.doc.document, path);
   if (!node.style) node.style = {};
@@ -248,7 +260,13 @@ export function mutateUpdateMediaStyle(tab, path, mediaName, prop, value) {
  * @param {string} prop
  * @param {string | undefined} value
  */
-export function mutateUpdateNestedStyle(tab, path, selector, prop, value) {
+export function mutateUpdateNestedStyle(
+  tab: Tab,
+  path: JxPath,
+  selector: string,
+  prop: string,
+  value: string | undefined,
+) {
   const node = getNodeAtPath(tab.doc.document, path);
   if (!node.style) node.style = {};
   if (!node.style[selector]) node.style[selector] = {};
@@ -269,7 +287,14 @@ export function mutateUpdateNestedStyle(tab, path, selector, prop, value) {
  * @param {string} prop
  * @param {string | undefined} value
  */
-export function mutateUpdateMediaNestedStyle(tab, path, mediaName, selector, prop, value) {
+export function mutateUpdateMediaNestedStyle(
+  tab: Tab,
+  path: JxPath,
+  mediaName: string,
+  selector: string,
+  prop: string,
+  value: string | undefined,
+) {
   const node = getNodeAtPath(tab.doc.document, path);
   if (!node.style) node.style = {};
   const key = `@${mediaName}`;
@@ -295,7 +320,13 @@ export function mutateUpdateMediaNestedStyle(tab, path, mediaName, selector, pro
  * @param {string} prop
  * @param {string | undefined} value
  */
-export function mutateUpdateNestedStylePath(tab, path, stylePath, prop, value) {
+export function mutateUpdateNestedStylePath(
+  tab: Tab,
+  path: JxPath,
+  stylePath: string[],
+  prop: string,
+  value: string | undefined,
+) {
   const node = getNodeAtPath(tab.doc.document, path);
   if (!node.style) node.style = {};
   let obj = node.style;
@@ -331,7 +362,14 @@ export function mutateUpdateNestedStylePath(tab, path, stylePath, prop, value) {
  * @param {string} prop
  * @param {string | undefined} value
  */
-export function mutateUpdateMediaNestedStylePath(tab, path, mediaName, stylePath, prop, value) {
+export function mutateUpdateMediaNestedStylePath(
+  tab: Tab,
+  path: JxPath,
+  mediaName: string,
+  stylePath: string[],
+  prop: string,
+  value: string | undefined,
+) {
   const node = getNodeAtPath(tab.doc.document, path);
   if (!node.style) node.style = {};
   const key = `@${mediaName}`;
@@ -364,7 +402,11 @@ export function mutateUpdateMediaNestedStylePath(tab, path, mediaName, stylePath
  * @param {JxPath} path
  * @param {Record<string, string | undefined> | undefined} style
  */
-export function mutateReplaceStyle(tab, path, style) {
+export function mutateReplaceStyle(
+  tab: Tab,
+  path: JxPath,
+  style: Record<string, string | undefined> | undefined,
+) {
   const node = getNodeAtPath(tab.doc.document, path);
   if (style && Object.keys(style).length > 0) {
     node.style = style;
@@ -378,7 +420,7 @@ export function mutateReplaceStyle(tab, path, style) {
  * @param {string} name
  * @param {Record<string, JsonValue>} def
  */
-export function mutateAddDef(tab, name, def) {
+export function mutateAddDef(tab: Tab, name: string, def: Record<string, JsonValue>) {
   const doc = tab.doc.document;
   if (!doc.state) doc.state = {};
   doc.state[name] = def;
@@ -388,7 +430,7 @@ export function mutateAddDef(tab, name, def) {
  * @param {Tab} tab
  * @param {string} name
  */
-export function mutateRemoveDef(tab, name) {
+export function mutateRemoveDef(tab: Tab, name: string) {
   const doc = tab.doc.document;
   if (doc.state) {
     delete doc.state[name];
@@ -401,7 +443,7 @@ export function mutateRemoveDef(tab, name) {
  * @param {string} name
  * @param {Record<string, JsonValue>} updates
  */
-export function mutateUpdateDef(tab, name, updates) {
+export function mutateUpdateDef(tab: Tab, name: string, updates: Record<string, JsonValue>) {
   const doc = tab.doc.document;
   if (!doc.state) doc.state = {};
   if (doc.state[name] == null) {
@@ -422,7 +464,7 @@ export function mutateUpdateDef(tab, name, updates) {
  * @param {string} oldName
  * @param {string} newName
  */
-export function mutateRenameDef(tab, oldName, newName) {
+export function mutateRenameDef(tab: Tab, oldName: string, newName: string) {
   const doc = tab.doc.document;
   if (!doc.state || !doc.state[oldName]) return;
   doc.state[newName] = doc.state[oldName];
@@ -434,7 +476,7 @@ export function mutateRenameDef(tab, oldName, newName) {
  * @param {string} name
  * @param {string | undefined} query
  */
-export function mutateUpdateMedia(tab, name, query) {
+export function mutateUpdateMedia(tab: Tab, name: string, query: string | undefined) {
   const doc = tab.doc.document;
   if (!doc.$media) doc.$media = {};
   if (query === undefined || query === "") {
@@ -451,7 +493,7 @@ export function mutateUpdateMedia(tab, name, query) {
  * @param {string} propName
  * @param {JsonValue} value
  */
-export function mutateUpdateProp(tab, path, propName, value) {
+export function mutateUpdateProp(tab: Tab, path: JxPath, propName: string, value: JsonValue) {
   const node = getNodeAtPath(tab.doc.document, path);
   if (!node.$props) node.$props = {};
   if (value === undefined || value === null || value === "") delete node.$props[propName];
@@ -465,7 +507,12 @@ export function mutateUpdateProp(tab, path, propName, value) {
  * @param {string} caseName
  * @param {JxMutableNode} [caseDef]
  */
-export function mutateAddSwitchCase(tab, path, caseName, caseDef) {
+export function mutateAddSwitchCase(
+  tab: Tab,
+  path: JxPath,
+  caseName: string,
+  caseDef?: JxMutableNode,
+) {
   const node = getNodeAtPath(tab.doc.document, path);
   if (!node.cases) node.cases = {};
   node.cases[caseName] = caseDef || { tagName: "div", textContent: caseName };
@@ -476,7 +523,7 @@ export function mutateAddSwitchCase(tab, path, caseName, caseDef) {
  * @param {JxPath} path
  * @param {string} caseName
  */
-export function mutateRemoveSwitchCase(tab, path, caseName) {
+export function mutateRemoveSwitchCase(tab: Tab, path: JxPath, caseName: string) {
   const node = getNodeAtPath(tab.doc.document, path);
   if (node.cases) delete node.cases[caseName];
 }
@@ -487,7 +534,7 @@ export function mutateRemoveSwitchCase(tab, path, caseName) {
  * @param {string} oldName
  * @param {string} newName
  */
-export function mutateRenameSwitchCase(tab, path, oldName, newName) {
+export function mutateRenameSwitchCase(tab: Tab, path: JxPath, oldName: string, newName: string) {
   const node = getNodeAtPath(tab.doc.document, path);
   if (!node.cases || !node.cases[oldName]) return;
   node.cases[newName] = node.cases[oldName];
@@ -503,7 +550,7 @@ export function mutateRenameSwitchCase(tab, path, oldName, newName) {
  * @param {string} field
  * @param {JsonValue} value
  */
-export function mutateUpdateFrontmatter(tab, field, value) {
+export function mutateUpdateFrontmatter(tab: Tab, field: string, value: JsonValue) {
   if (value === undefined || value === null || value === "") {
     delete tab.doc.content.frontmatter[field];
   } else {

package/src/types.ts

@@ -0,0 +1,185 @@
+/// <reference lib="dom" />
+import type { JxMutableNode, JxPath, ProjectConfig } from "@jxsuite/schema/types";
+
+// ─── Git & Platform Types ───────────────────────────────────────────────────
+
+export interface GitFileStatus {
+  status: string;
+  path: string;
+  staged?: boolean;
+}
+
+export interface GitStatusResult {
+  branch: string;
+  files: GitFileStatus[];
+  ahead: number;
+  behind: number;
+  isRepo: boolean;
+  remotes: string[];
+}
+
+export interface GitBranchesResult {
+  current: string;
+  branches: string[];
+}
+
+export interface GitLogEntry {
+  hash: string;
+  message: string;
+  author: string;
+  date: string;
+}
+
+export interface ComponentMeta {
+  tagName: string;
+  $id?: string | null;
+  path: string;
+  props?: { name: string; type?: string; default?: unknown }[];
+  hasElements?: boolean;
+}
+
+export interface PackageInfo {
+  name: string;
+  version: string;
+}
+
+export interface CodeServiceResult {
+  code?: string;
+  diagnostics?: unknown[];
+  [key: string]: unknown;
+}
+
+export interface DirEntry {
+  name: string;
+  path: string;
+  type: "file" | "directory";
+  size?: number;
+  modified?: string;
+}
+
+export interface StudioPlatform {
+  id: string;
+  projectRoot: string;
+  activate(root?: string): Promise<void>;
+  openProject(): Promise<{
+    config: ProjectConfig;
+    handle: { root: string; name: string; projectConfig: ProjectConfig };
+  } | null>;
+  probeRootProject(): Promise<{
+    meta: { root: string; name: string };
+    info: { isSiteProject: boolean; projectConfig?: ProjectConfig | null; directories?: string[] };
+  } | null>;
+  listDirectory(dir: string): Promise<DirEntry[]>;
+  readFile(path: string): Promise<string>;
+  writeFile(path: string, content: string): Promise<void>;
+  uploadFile(path: string, data: string | File | Blob | ArrayBuffer): Promise<unknown>;
+  deleteFile(path: string): Promise<void>;
+  renameFile(from: string, to: string): Promise<void>;
+  createDirectory(path: string): Promise<void>;
+  discoverComponents(dir?: string): Promise<ComponentMeta[]>;
+  addPackage(name: string): Promise<unknown>;
+  removePackage(name: string): Promise<unknown>;
+  listPackages(): Promise<PackageInfo[]>;
+  codeService(action: string, payload: unknown): Promise<CodeServiceResult | null>;
+  resolveSiteContext(
+    filePath: string,
+  ): Promise<{ sitePath: string | null; projectConfig?: ProjectConfig; fileRelPath?: string }>;
+  locateFile(name: string): Promise<string | null>;
+  searchFiles(query: string): Promise<DirEntry[]>;
+  fetchPluginSchema(src: string, prototype?: string, base?: string): Promise<unknown>;
+  gitStatus(): Promise<GitStatusResult>;
+  gitBranches(): Promise<GitBranchesResult>;
+  gitLog(limit?: number): Promise<GitLogEntry[]>;
+  gitStage(files: string[]): Promise<void>;
+  gitUnstage(files: string[]): Promise<void>;
+  gitCommit(message: string): Promise<void>;
+  gitPush(opts?: { setUpstream?: boolean }): Promise<void>;
+  gitPull(): Promise<void>;
+  gitFetch(): Promise<void>;
+  gitCheckout(branch: string): Promise<void>;
+  gitCreateBranch(name: string): Promise<void>;
+  gitDiff(path?: string): Promise<string>;
+  gitShow(opts: { path: string; ref?: string }): Promise<string>;
+  gitDiscard(files: string[]): Promise<void>;
+  gitClone?(url: string): Promise<{ ok: boolean; root: string }>;
+  gitInit(): Promise<void>;
+  gitAddRemote(name: string, url: string): Promise<void>;
+  createProject(opts: {
+    name: string;
+    description?: string;
+    url?: string;
+    adapter?: string;
+    directory: string;
+  }): Promise<{ root: string; config: ProjectConfig }>;
+  aiAuthStatus(): Promise<{ authenticated: boolean; error?: string }>;
+  aiCreateSession(opts: { message: string; systemPrompt?: string }): Promise<{ id: string }>;
+  aiSendMessage(id: string, message: string): Promise<void>;
+  aiStreamUrl(id: string): string | Promise<string>;
+  aiStopSession(id: string): Promise<void>;
+  aiDeleteSession(id: string): Promise<void>;
+}
+
+// ─── Studio Types ───────────────────────────────────────────────────────────
+
+export interface CanvasPanel {
+  mediaName: string;
+  element: HTMLElement;
+  canvas: HTMLElement;
+  overlay: HTMLElement;
+  overlayClk: HTMLElement;
+  viewport: HTMLElement;
+  scrollContainer: HTMLElement;
+  dropLine: HTMLElement;
+  _width: number | null;
+}
+
+export interface DocumentStackEntry {
+  document: JxMutableNode;
+  documentPath: string | null;
+  selection: JxPath | null;
+  dirty?: boolean;
+  mode?: string;
+  sourceFormat?: string | null;
+}
+
+export interface FunctionEditDef {
+  type: string;
+  defName?: string;
+  path?: JxPath;
+  eventKey?: string;
+  key?: string;
+  body?: string;
+  parameters?: string[];
+}
+
+export interface GitDiffState {
+  filePath: string;
+  originalContent: string;
+  currentContent: string;
+  isMarkdown: boolean;
+  fileStatus: string;
+  originalDoc?: unknown;
+  currentDoc?: unknown;
+  original?: unknown;
+}
+
+export interface InlineEditDef {
+  path: JxPath;
+  mediaName?: string;
+}
+
+export interface ProjectState {
+  root?: string;
+  name: string;
+  projectRoot: string;
+  isSiteProject: boolean;
+  projectConfig: ProjectConfig | null;
+  dirs: Map<string, DirEntry[]>;
+  expanded: Set<string>;
+  selectedPath: string | null;
+  searchQuery: string;
+  projectDirs?: string[];
+  [key: string]: unknown;
+}
+
+export type JsonValue = string | number | boolean | object | null | undefined;

package/src/ui/{button-group.js → button-group.ts}

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * Button-group.js — Action group + overflow picker widget.
  *
@@ -7,8 +8,8 @@
 
 import { html, nothing } from "lit-html";
 import { classMap } from "lit-html/directives/class-map.js";
-import { abbreviateValue, kebabToLabel } from "../utils/studio-utils.js";
-import icons from "./icons.js";
+import { abbreviateValue, kebabToLabel } from "../utils/studio-utils";
+import icons from "./icons";
 
 /**
  * Render a button group widget with optional overflow menu.
@@ -20,30 +21,29 @@ import icons from "./icons.js";
  * @returns {import("lit-html").TemplateResult}
  */
 export function renderButtonGroup(
-  /** @type {Record<string, unknown>} */ entry,
-  /** @type {string} */ prop,
-  /** @type {string | number | undefined} */ value,
-  /** @type {(val: string) => void} */ onChange,
+  /** @type {Record<string, unknown>} */ entry: Record<string, unknown>,
+  /** @type {string} */ prop: string,
+  /** @type {string | number | undefined} */ value: string | number | undefined,
+  /** @type {(val: string) => void} */ onChange: (val: string) => void,
 ) {
-  const values = /** @type {string[]} */ (entry.$buttonValues || entry.enum || []);
-  /** @type {Record<string, string>} */
-  const iconMap = /** @type {Record<string, string>} */ (entry.$icons || {});
-  const buttonValues = /** @type {string[] | undefined} */ (entry.$buttonValues);
-  const enumValues = /** @type {string[] | undefined} */ (entry.enum);
+  const values = (entry.$buttonValues || entry.enum || []) as string[];
+  const iconMap: Record<string, string> = (entry.$icons || {}) as Record<string, string>;
+  const buttonValues = entry.$buttonValues as string[] | undefined;
+  const enumValues = entry.enum as string[] | undefined;
   const extra =
     buttonValues && enumValues && enumValues.length > buttonValues.length
-      ? enumValues.filter((/** @type {string} */ v) => !buttonValues.includes(v))
+      ? enumValues.filter((v: string) => !buttonValues.includes(v))
       : [];
 
   const menuId = `style-btngrp-${prop}`;
   const hasExtra = extra.length > 0;
-  const extraSelected = hasExtra && extra.includes(/** @type {string} */ (value));
+  const extraSelected = hasExtra && extra.includes(String(value));
 
   return html`
     <div class=${classMap({ "button-group-combo": true, "has-overflow": hasExtra })}>
       <sp-action-group size="s" compact>
         ${values.map(
-          (/** @type {string} */ v) => html`
+          (v: string) => html`
             <sp-action-button
               size="s"
               value=${v}
@@ -51,8 +51,8 @@ export function renderButtonGroup(
               ?selected=${v === value}
               @click=${() => onChange(v === value ? "" : v)}
             >
-              ${iconMap[v] && /** @type {Record<string, unknown>} */ (icons)[iconMap[v]]
-                ? /** @type {Record<string, unknown>} */ (icons)[iconMap[v]]
+              ${iconMap[v] && (icons as Record<string, unknown>)[iconMap[v]]
+                ? (icons as Record<string, unknown>)[iconMap[v]]
                 : abbreviateValue(v)}
             </sp-action-button>
           `,
@@ -68,16 +68,16 @@ export function renderButtonGroup(
             <sp-overlay trigger="${menuId}@click" placement="bottom-end" type="auto">
               <sp-popover>
                 <sp-menu
-                  @change=${(/** @type {Event} */ e) => {
-                    if (/** @type {HTMLInputElement} */ (e.target).value)
-                      onChange(/** @type {HTMLInputElement} */ (e.target).value);
+                  @change=${(e: Event) => {
+                    if ((e.target as HTMLInputElement).value)
+                      onChange((e.target as HTMLInputElement).value);
                   }}
                 >
                   <sp-menu-item value="__none__">—</sp-menu-item>
-                  ${extra.map((/** @type {string} */ v) => {
+                  ${extra.map((v: string) => {
                     const label = v.includes("-")
                       ? kebabToLabel(v)
-                      : v.replace(/^./, (/** @type {string} */ c) => c.toUpperCase());
+                      : v.replace(/^./, (c: string) => c.toUpperCase());
                     return html`<sp-menu-item value=${v} ?selected=${v === value}
                       >${label}</sp-menu-item
                     >`;