@jxsuite/studio 0.23.2 → 0.24.0

package/src/panels/{statusbar.js → statusbar.ts}

@@ -1,25 +1,25 @@
+/// <reference lib="dom" />
 /** Statusbar — status message display for Jx Studio */
 
-import { statusbarEl, getNodeAtPath, nodeLabel, updateSession, renderOnly } from "../store.js";
-import { effect, effectScope } from "../reactivity.js";
-import { activeTab } from "../workspace/workspace.js";
+import { statusbarEl, getNodeAtPath, nodeLabel, updateSession, renderOnly } from "../store";
+import { effect, effectScope } from "../reactivity";
+import { activeTab } from "../workspace/workspace";
+import type { JxPath } from "../state";
 
 // ─── Module state ────────────────────────────────────────────────────────────
 
 let statusMsg = "";
 /** @type {ReturnType<typeof setTimeout> | undefined} */
-let statusTimeout;
-/** @type {(() => void) | null} */
-let _rerender = null;
-/** @type {import("@vue/reactivity").EffectScope | null} */
-let _scope = null;
+let statusTimeout: ReturnType<typeof setTimeout> | undefined;
+let _rerender: (() => void) | null = null;
+let _scope: import("@vue/reactivity").EffectScope | null = null;
 
 /**
  * Register the callback used to re-render the statusbar. Called once from studio.js during init.
  *
  * @param {() => void} fn
  */
-export function setStatusbarRenderer(fn) {
+export function setStatusbarRenderer(fn: () => void) {
   _rerender = fn;
 }
 
@@ -51,7 +51,7 @@ export function unmountStatusbar() {
 // ─── Statusbar ───────────────────────────────────────────────────────────────
 
 /** @param {string} text */
-function esc(text) {
+function esc(text: string) {
   return String(text).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 
@@ -61,7 +61,7 @@ export function renderStatusbar() {
   const parts = [];
   if (tab?.doc.mode === "content") parts.push("Content Mode");
   if (tab?.session.selection?.length) {
-    const sel = /** @type {JxPath} */ (tab.session.selection);
+    const sel = tab.session.selection as JxPath;
     const node = getNodeAtPath(tab.doc.document, sel);
     parts.push(`Selected: ${esc(nodeLabel(node))}`);
 
@@ -85,8 +85,8 @@ export function renderStatusbar() {
 }
 
 /** @param {Event} e */
-function _onStatusbarClick(e) {
-  const target = /** @type {HTMLElement} */ (e.target);
+function _onStatusbarClick(e: Event) {
+  const target = e.target as HTMLElement;
   if (!target.classList.contains("sb-path-seg")) return;
   const pathStr = target.dataset.path;
   if (!pathStr) return;
@@ -105,7 +105,7 @@ function _onStatusbarClick(e) {
  * @param {string} msg
  * @param {number} [duration]
  */
-export function statusMessage(msg, duration = 3000) {
+export function statusMessage(msg: string, duration: number = 3000) {
   statusMsg = msg;
   _rerender?.();
   clearTimeout(statusTimeout);

package/src/panels/{style-inputs.js → style-inputs.ts}

@@ -1,19 +1,20 @@
+/// <reference lib="dom" />
 /** Style input widgets — keyword, select, combobox, and font renderers for the style panel. */
 
 import { html } from "lit-html";
 import { live } from "lit-html/directives/live.js";
-import { debouncedStyleCommit } from "../store.js";
-import { activeTab } from "../workspace/workspace.js";
-import { transactDoc, mutateUpdateStyle } from "../tabs/transact.js";
-import { widgetForType as _widgetForType } from "../ui/widgets.js";
-import { kebabToLabel, friendlyNameToVar, varDisplayName } from "../utils/studio-utils.js";
+import { debouncedStyleCommit } from "../store";
+import { activeTab } from "../workspace/workspace";
+import { transactDoc, mutateUpdateStyle } from "../tabs/transact";
+import { widgetForType as _widgetForType } from "../ui/widgets";
+import { kebabToLabel, friendlyNameToVar, varDisplayName } from "../utils/studio-utils";
 import {
   TYPO_PREVIEW_PROPS,
   currentFontFamily,
   getFontVars,
   getCssInitialMap,
   camelToKebab,
-} from "./style-utils.js";
+} from "./style-utils";
 
 /**
  * Dual-mode keyword input — shared by select (enum) and combobox (examples) widgets.
@@ -21,16 +22,21 @@ import {
  * @param {string[]} options @param {string} prop @param {string} value @param {(value: string) =>
  *   void} onChange
  */
-export function renderKeywordInput(options, prop, value, onChange) {
+export function renderKeywordInput(
+  options: string[],
+  prop: string,
+  value: string,
+  onChange: (value: string) => void,
+) {
   const cssInitialMap = getCssInitialMap();
   const isTypoPreview = TYPO_PREVIEW_PROPS.has(prop) || prop === "fontWeight";
   const font = isTypoPreview ? currentFontFamily() : "";
   const cssProp = isTypoPreview ? camelToKebab(prop) : "";
 
-  const comboOptions = options.map((/** @type {string} */ v) => {
+  const comboOptions = options.map((v: string) => {
     const label = v.includes("-")
       ? kebabToLabel(v)
-      : v.replace(/^./, (/** @type {string} */ c) => c.toUpperCase());
+      : v.replace(/^./, (c: string) => c.toUpperCase());
     const style = isTypoPreview ? `${cssProp}: ${v};${font ? ` font-family: ${font}` : ""}` : "";
     return { value: v, label, style };
   });
@@ -40,10 +46,9 @@ export function renderKeywordInput(options, prop, value, onChange) {
     .value=${value || ""}
     placeholder=${cssInitialMap.get(prop) || ""}
     .options=${comboOptions}
-    @change=${(/** @type {Event} */ e) =>
-      onChange(/** @type {HTMLInputElement} */ (e.target).value)}
-    @input=${debouncedStyleCommit(`kw:${prop}`, 400, (/** @type {Event} */ e) =>
-      onChange(/** @type {HTMLInputElement} */ (e.target).value),
+    @change=${(e: Event) => onChange((e.target as HTMLInputElement).value)}
+    @input=${debouncedStyleCommit(`kw:${prop}`, 400, (e: Event) =>
+      onChange((e.target as HTMLInputElement).value),
     )}
   ></jx-value-selector>`;
 }
@@ -52,12 +57,20 @@ export function renderKeywordInput(options, prop, value, onChange) {
  * @param {{ enum?: string[] }} entry @param {string} prop @param {string} value @param {(value:
  *   string) => void} onChange
  */
-export function renderSelectInput(entry, prop, value, onChange) {
+export function renderSelectInput(
+  entry: { enum?: string[] },
+  prop: string,
+  value: string,
+  onChange: (value: string) => void,
+) {
   return renderKeywordInput(entry.enum || [], prop, value, onChange);
 }
 
 /** @param {{ title: string; value: string }} preset @param {(value: string) => void} onChange */
-function handleFontPresetSelection(preset, onChange) {
+function handleFontPresetSelection(
+  preset: { title: string; value: string },
+  onChange: (value: string) => void,
+) {
   const varName = friendlyNameToVar(preset.title, "--font-");
   if (!activeTab.value?.doc.document?.style?.[varName]) {
     transactDoc(activeTab.value, (t) => mutateUpdateStyle(t, [], varName, preset.value));
@@ -69,7 +82,11 @@ function handleFontPresetSelection(preset, onChange) {
  * @param {string} val @param {{ title: string; value: string }[]} presets @param {(value: string)
  *   => void} onChange
  */
-function handleFontSelection(val, presets, onChange) {
+function handleFontSelection(
+  val: string,
+  presets: { title: string; value: string }[],
+  onChange: (value: string) => void,
+) {
   if (!val) return;
   if (val.startsWith("__preset__:")) {
     const title = val.slice("__preset__:".length);
@@ -109,13 +126,16 @@ function handleFontSelection(val, presets, onChange) {
  *   presets
  * @returns {({ value: string; label: string; style: string } | { divider: true })[]}
  */
-export function buildFontOptions(fontVars, presets) {
-  /** @type {({ value: string; label: string; style: string } | { divider: true })[]} */
-  const opts = fontVars.map((/** @type {{ name: string; value: string }} */ fv) => ({
-    value: fv.name,
-    label: varDisplayName(fv.name, "--font-"),
-    style: `font-family: ${fv.value}`,
-  }));
+export function buildFontOptions(
+  fontVars: { name: string; value: string }[],
+  presets: { title: string; value: string }[],
+) {
+  const opts: ({ value: string; label: string; style: string } | { divider: true })[] =
+    fontVars.map((fv) => ({
+      value: fv.name,
+      label: varDisplayName(fv.name, "--font-"),
+      style: `font-family: ${fv.value}`,
+    }));
   const unadded = presets.filter(
     (/** @type {{ title: string; value: string }} */ p) =>
       !fontVars.some(
@@ -142,7 +162,12 @@ export function buildFontOptions(fontVars, presets) {
  * }} entry
  * @param {string} prop @param {string} value @param {(value: string) => void} onChange
  */
-export function renderComboboxInput(entry, prop, value, onChange) {
+export function renderComboboxInput(
+  entry: { enum?: string[]; examples?: string[]; presets?: { title: string; value: string }[] },
+  prop: string,
+  value: string,
+  onChange: (value: string) => void,
+) {
   const cssInitialMap = getCssInitialMap();
   const fontVars = prop === "fontFamily" ? getFontVars() : [];
   const presets = entry.presets || [];
@@ -157,10 +182,10 @@ export function renderComboboxInput(entry, prop, value, onChange) {
       .value=${comboValue}
       placeholder=${cssInitialMap.get("fontFamily") || ""}
       .options=${fontOptions}
-      @change=${(/** @type {Event} */ e) =>
-        handleFontSelection(/** @type {HTMLInputElement} */ (e.target).value, presets, onChange)}
-      @input=${debouncedStyleCommit("combo:fontFamily", 400, (/** @type {Event} */ e) =>
-        onChange(/** @type {HTMLInputElement} */ (e.target).value),
+      @change=${(e: Event) =>
+        handleFontSelection((e.target as HTMLInputElement).value, presets, onChange)}
+      @input=${debouncedStyleCommit("combo:fontFamily", 400, (e: Event) =>
+        onChange((e.target as HTMLInputElement).value),
       )}
     ></jx-value-selector>`;
   }
@@ -174,8 +199,8 @@ export function renderComboboxInput(entry, prop, value, onChange) {
       size="s"
       placeholder=${cssInitialMap.get(prop) || ""}
       .value=${live(value || "")}
-      @input=${debouncedStyleCommit(`combo:${prop}`, 400, (/** @type {Event} */ e) =>
-        onChange(/** @type {HTMLInputElement} */ (e.target).value),
+      @input=${debouncedStyleCommit(`combo:${prop}`, 400, (e: Event) =>
+        onChange((e.target as HTMLInputElement).value),
       )}
     ></sp-textfield>
   `;
@@ -186,24 +211,17 @@ export function renderComboboxInput(entry, prop, value, onChange) {
  * inputs and CSS initial-value placeholders.
  */
 export function widgetForType(
-  /** @type {string} */ type,
-  /** @type {Record<string, unknown>} */ entry,
-  /** @type {string} */ prop,
-  /** @type {string} */ value,
-  /** @type {(value: string) => void} */ onCommit,
-  /** @type {{ placeholder?: string }} */ opts = {},
+  type: string,
+  entry: Record<string, unknown>,
+  prop: string,
+  value: string,
+  onCommit: (value: string) => void,
+  opts: { placeholder?: string } = {},
 ) {
   const cssInitialMap = getCssInitialMap();
-  return _widgetForType(
-    type,
-    entry,
-    prop,
-    value,
-    /** @type {(val: string | number) => void} */ (onCommit),
-    {
-      placeholder: opts.placeholder || cssInitialMap.get(prop) || "",
-      renderSelect: renderSelectInput,
-      renderCombobox: renderComboboxInput,
-    },
-  );
+  return _widgetForType(type, entry, prop, value, onCommit as (val: string | number) => void, {
+    placeholder: opts.placeholder || cssInitialMap.get(prop) || "",
+    renderSelect: renderSelectInput,
+    renderCombobox: renderComboboxInput,
+  });
 }