@jxsuite/studio 0.23.1 → 0.24.0

package/src/{store.js → store.ts}

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * Store.js — Shared state hub for Jx Studio
  *
@@ -8,7 +9,9 @@
 
 // ─── Re-exports from state.js ────────────────────────────────────────────────
 
-import { activeTab } from "./workspace/workspace.js";
+import { activeTab } from "./workspace/workspace";
+import type { JxPath } from "./state";
+import type { JxMutableNode } from "@jxsuite/schema/types";
 
 export {
   createState,
@@ -24,33 +27,31 @@ export {
   setProjectState,
   requireProjectState,
   updateFrontmatter,
-} from "./state.js";
+} from "./state";
 
 // ─── Shell element refs (populated by initShellRefs) ─────────────────────────
 
-export let canvasWrap = /** @type {HTMLElement} */ (/** @type {unknown} */ (null));
-export let activityBar = /** @type {HTMLElement} */ (/** @type {unknown} */ (null));
-export let leftPanel = /** @type {HTMLElement} */ (/** @type {unknown} */ (null));
-export let rightPanel = /** @type {HTMLElement} */ (/** @type {unknown} */ (null));
-export let toolbarEl = /** @type {HTMLElement} */ (/** @type {unknown} */ (null));
-export let statusbarEl = /** @type {HTMLElement} */ (/** @type {unknown} */ (null));
+export let canvasWrap = null as unknown as HTMLElement;
+export let activityBar = null as unknown as HTMLElement;
+export let leftPanel = null as unknown as HTMLElement;
+export let rightPanel = null as unknown as HTMLElement;
+export let toolbarEl = null as unknown as HTMLElement;
+export let statusbarEl = null as unknown as HTMLElement;
 
 export function initShellRefs() {
-  canvasWrap = /** @type {HTMLElement} */ (document.querySelector("#canvas-wrap"));
-  activityBar = /** @type {HTMLElement} */ (document.querySelector("#activity-bar"));
-  leftPanel = /** @type {HTMLElement} */ (document.querySelector("#left-panel"));
-  rightPanel = /** @type {HTMLElement} */ (document.querySelector("#right-panel"));
-  toolbarEl = /** @type {HTMLElement} */ (document.querySelector("#toolbar"));
-  statusbarEl = /** @type {HTMLElement} */ (document.querySelector("#statusbar"));
+  canvasWrap = document.querySelector("#canvas-wrap") as HTMLElement;
+  activityBar = document.querySelector("#activity-bar") as HTMLElement;
+  leftPanel = document.querySelector("#left-panel") as HTMLElement;
+  rightPanel = document.querySelector("#right-panel") as HTMLElement;
+  toolbarEl = document.querySelector("#toolbar") as HTMLElement;
+  statusbarEl = document.querySelector("#statusbar") as HTMLElement;
 }
 
 // ─── Shared containers (mutated in place by owner modules) ───────────────────
 
-/** @type {WeakMap<Element, JxPath>} */
-export const elToPath = new WeakMap();
+export const elToPath: WeakMap<Element, JxPath> = new WeakMap();
 
-/** @type {import("./panels/canvas-dnd.js").CanvasPanel[]} */
-export const canvasPanels = [];
+export const canvasPanels: import("./panels/canvas-dnd.js").CanvasPanel[] = [];
 
 // ─── Shared constants ────────────────────────────────────────────────────────
 
@@ -87,7 +88,7 @@ export const COMMON_SELECTORS = [
 ];
 
 /** @param {string} k */
-export function isNestedSelector(k) {
+export function isNestedSelector(k: string) {
   return k.startsWith(":") || k.startsWith(".") || k.startsWith("&") || k.startsWith("[");
 }
 
@@ -98,10 +99,10 @@ const _styleDebounceTimers = new Map();
 /**
  * @param {string} prop
  * @param {number} ms
- * @param {Function} fn
+ * @param {(...args: unknown[]) => void} fn
  */
-export function debouncedStyleCommit(prop, ms, fn) {
-  return (/** @type {unknown[]} */ ...args) => {
+export function debouncedStyleCommit(prop: string, ms: number, fn: (...args: any[]) => void) {
+  return (...args: unknown[]) => {
     clearTimeout(_styleDebounceTimers.get(prop));
     _styleDebounceTimers.set(
       prop,
@@ -114,7 +115,7 @@ export function debouncedStyleCommit(prop, ms, fn) {
 }
 
 /** Cancel a pending debounced commit for the given prop key. */
-export function cancelStyleDebounce(/** @type {string} */ prop) {
+export function cancelStyleDebounce(prop: string) {
   clearTimeout(_styleDebounceTimers.get(prop));
   _styleDebounceTimers.delete(prop);
 }
@@ -125,11 +126,10 @@ export function cancelStyleDebounce(/** @type {string} */ prop) {
  * @param {JxMutableNode} node
  * @returns {JxMutableNode}
  */
-export function stripEventHandlers(node) {
+export function stripEventHandlers(node: JxMutableNode): JxMutableNode {
   if (!node || typeof node !== "object") return node;
   if (Array.isArray(node)) return node.map(stripEventHandlers);
-  /** @type {Record<string, unknown>} */
-  const out = {};
+  const out: Record<string, unknown> = {};
   for (const [k, v] of Object.entries(node)) {
     if (
       k.startsWith("on") &&
@@ -138,17 +138,19 @@ export function stripEventHandlers(node) {
     )
       continue;
     if (k === "children") {
-      out.children = Array.isArray(v) ? v.map(stripEventHandlers) : stripEventHandlers(v);
+      out.children = Array.isArray(v)
+        ? v.map(stripEventHandlers)
+        : stripEventHandlers(v as JxMutableNode);
     } else if (k === "cases" && typeof v === "object") {
-      /** @type {Record<string, unknown>} */
-      const cases = {};
-      for (const [ck, cv] of Object.entries(v)) cases[ck] = stripEventHandlers(cv);
+      const cases: Record<string, unknown> = {};
+      for (const [ck, cv] of Object.entries(v as Record<string, unknown>))
+        cases[ck] = stripEventHandlers(cv as JxMutableNode);
       out.cases = cases;
     } else if (k === "state" && typeof v === "object" && v !== null) {
-      /** @type {Record<string, unknown>} */
-      const state = {};
-      for (const [sk, sv] of Object.entries(v)) {
-        if (sv && typeof sv === "object" && sv.timing === "server") continue;
+      const state: Record<string, unknown> = {};
+      for (const [sk, sv] of Object.entries(v as Record<string, unknown>)) {
+        if (sv && typeof sv === "object" && (sv as Record<string, unknown>).timing === "server")
+          continue;
         state[sk] = sv;
       }
       out.state = state;
@@ -163,16 +165,15 @@ export function stripEventHandlers(node) {
 
 // ─── Render orchestration ────────────────────────────────────────────────────
 
-/** @type {Map<string, Function>} */
-const _renderers = new Map();
+const _renderers: Map<string, Function> = new Map();
 
 /**
  * Register a named renderer. Called at module import time by each module.
  *
  * @param {string} name
- * @param {Function} fn
+ * @param {() => void} fn
  */
-export function registerRenderer(name, fn) {
+export function registerRenderer(name: string, fn: () => void) {
   _renderers.set(name, fn);
 }
 
@@ -192,7 +193,7 @@ export function render() {
  *
  * @param {...string} names
  */
-export function renderOnly(...names) {
+export function renderOnly(...names: string[]) {
   for (const name of names) {
     const fn = _renderers.get(name);
     if (!fn) continue;
@@ -211,30 +212,26 @@ export function renderOnly(...names) {
  *
  * @param {object} patch — partial session object, e.g. { ui: { zoom: 2 } }
  */
-export function updateSession(patch) {
+export function updateSession(patch: {
+  selection?: JxPath | null;
+  hover?: JxPath | null;
+  clipboard?: JxMutableNode | null;
+  ui?: Record<string, unknown>;
+  canvas?: Record<string, unknown>;
+}) {
   const tab = activeTab.value;
   if (tab) {
-    const p = /**
-     * @type {{
-     *   selection?: unknown;
-     *   hover?: unknown;
-     *   clipboard?: unknown;
-     *   ui?: Record<string, unknown>;
-     *   canvas?: Record<string, unknown>;
-     * }}
-     */ (patch);
-    if (p.selection !== undefined)
-      tab.session.selection = /** @type {JxPath | null} */ (p.selection);
-    if (p.hover !== undefined) tab.session.hover = /** @type {JxPath | null} */ (p.hover);
-    if (p.clipboard !== undefined) tab.session.clipboard = p.clipboard;
-    if (p.ui) {
-      for (const [k, v] of Object.entries(p.ui)) {
-        /** @type {Record<string, unknown>} */ (tab.session.ui)[k] = v;
+    if (patch.selection !== undefined) tab.session.selection = patch.selection as JxPath | null;
+    if (patch.hover !== undefined) tab.session.hover = patch.hover as JxPath | null;
+    if (patch.clipboard !== undefined) tab.session.clipboard = patch.clipboard!;
+    if (patch.ui) {
+      for (const [k, v] of Object.entries(patch.ui)) {
+        (tab.session.ui as unknown as Record<string, unknown>)[k] = v;
       }
     }
-    if (p.canvas) {
-      for (const [k, v] of Object.entries(p.canvas)) {
-        /** @type {Record<string, unknown>} */ (tab.session.canvas)[k] = v;
+    if (patch.canvas) {
+      for (const [k, v] of Object.entries(patch.canvas)) {
+        (tab.session.canvas as unknown as Record<string, unknown>)[k] = v;
       }
     }
   }
@@ -246,10 +243,10 @@ export function updateSession(patch) {
  * @param {string} field
  * @param {unknown} value
  */
-export function updateUi(field, value) {
+export function updateUi(field: string, value: unknown) {
   const tab = activeTab.value;
   if (tab) {
-    /** @type {Record<string, unknown>} */ (tab.session.ui)[field] = value;
+    (tab.session.ui as unknown as Record<string, unknown>)[field] = value;
   }
 }
 
@@ -258,11 +255,11 @@ export function updateUi(field, value) {
  *
  * @param {object} patch
  */
-export function updateCanvas(patch) {
+export function updateCanvas(patch: Record<string, unknown>) {
   const tab = activeTab.value;
   if (tab) {
     for (const [k, v] of Object.entries(patch)) {
-      /** @type {Record<string, unknown>} */ (tab.session.canvas)[k] = v;
+      (tab.session.canvas as Record<string, unknown>)[k] = v;
     }
   }
 }