@jxsuite/studio 0.23.2 → 0.24.0

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

@@ -1,16 +1,17 @@
 /** Style utilities — pure CSS helper functions used by the style panel. */
 
-import { getNodeAtPath } from "../store.js";
-import { activeTab } from "../workspace/workspace.js";
-import { camelToKebab } from "../utils/studio-utils.js";
+import type { JxMutableNode } from "@jxsuite/schema/types";
+
+import { getNodeAtPath } from "../store";
+import { activeTab } from "../workspace/workspace";
+import { camelToKebab } from "../utils/studio-utils";
 import cssMeta from "../../data/css-meta.json";
 
-/** @type {Map<string, string>} */
-let cssInitialMap = new Map();
+let cssInitialMap: Map<string, string> = new Map();
 
 /** Initialise cssInitialMap from webdata — call once during bootstrap. */
-export function initCssData(/** @type {{ cssProps: string[][] }} */ webdata) {
-  cssInitialMap = new Map(/** @type {[string, string][]} */ (webdata.cssProps));
+export function initCssData(webdata: { cssProps: string[][] }) {
+  cssInitialMap = new Map(webdata.cssProps as [string, string][]);
 }
 
 /** Get the CSS initial-value map (populated by initCssData). */
@@ -21,8 +22,11 @@ export function getCssInitialMap() {
 // ─── Condition helpers ──────────────────────────────────────────────────────
 
 /** @param {{ prop: string; values: string[] }} cond @param {Record<string, unknown>} styles */
-export function conditionPasses(cond, styles) {
-  const val = /** @type {string} */ (styles[cond.prop] ?? "");
+export function conditionPasses(
+  cond: { prop: string; values: string[] },
+  styles: Record<string, unknown>,
+) {
+  const val = (styles[cond.prop] ?? "") as string;
   if (cond.values.length === 0) return val !== "" && val !== "initial";
   return cond.values.includes(val);
 }
@@ -31,7 +35,10 @@ export function conditionPasses(cond, styles) {
  * @param {{ $show?: { prop: string; values: string[] }[] }} entry @param {Record<string, unknown>}
  *   styles
  */
-export function allConditionsPass(entry, 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),
   );
@@ -40,13 +47,13 @@ export function allConditionsPass(entry, styles) {
 // ─── Auto-open sections ─────────────────────────────────────────────────────
 
 /** @param {JxMutableNode} node @param {Record<string, boolean>} currentSections */
-export function autoOpenSections(node, currentSections) {
+export function autoOpenSections(node: JxMutableNode, currentSections: Record<string, boolean>) {
   const style = node.style || {};
   const result = { ...currentSections };
   for (const prop of Object.keys(style)) {
     if (typeof style[prop] === "object") continue;
-    const entry = /** @type {Record<string, Record<string, unknown>>} */ (cssMeta.$defs)[prop];
-    const section = /** @type {string} */ (entry?.$section) ?? "other";
+    const entry = (cssMeta.$defs as Record<string, Record<string, unknown>>)[prop];
+    const section = (entry?.$section as string) ?? "other";
     if (!result[section]) result[section] = true;
   }
   return result;
@@ -55,15 +62,13 @@ export function autoOpenSections(node, currentSections) {
 // ─── Shorthand expand/compress ──────────────────────────────────────────────
 
 /** Get longhands for a shorthand property from css-meta */
-export function getLonghands(/** @type {string} */ shorthandProp) {
-  const entry = /** @type {Record<string, Record<string, unknown>>} */ (cssMeta.$defs)[
-    shorthandProp
-  ];
+export function getLonghands(shorthandProp: string) {
+  const entry = (cssMeta.$defs as Record<string, Record<string, unknown>>)[shorthandProp];
   if (entry?.$longhands) {
-    return /** @type {string[]} */ (entry.$longhands)
-      .map((/** @type {string} */ name) => ({
+    return (entry.$longhands as string[])
+      .map((name: string) => ({
         name,
-        entry: /** @type {Record<string, Record<string, unknown>>} */ (cssMeta.$defs)[name] || {
+        entry: (cssMeta.$defs as Record<string, Record<string, unknown>>)[name] || {
           $order: 0,
         },
       }))
@@ -71,18 +76,14 @@ export function getLonghands(/** @type {string} */ shorthandProp) {
         (
           /** @type {{ entry: Record<string, unknown> }} */ a,
           /** @type {{ entry: Record<string, unknown> }} */ b,
-        ) => /** @type {number} */ (a.entry.$order) - /** @type {number} */ (b.entry.$order),
+        ) => (a.entry.$order as number) - (b.entry.$order as number),
       );
   }
   const result = [];
-  for (const [name, e] of /** @type {[string, Record<string, unknown>][]} */ (
-    Object.entries(cssMeta.$defs)
-  )) {
+  for (const [name, e] of Object.entries(cssMeta.$defs) as [string, Record<string, unknown>][]) {
     if (e.$shorthand === shorthandProp) result.push({ name, entry: e });
   }
-  result.sort(
-    (a, b) => /** @type {number} */ (a.entry.$order) - /** @type {number} */ (b.entry.$order),
-  );
+  result.sort((a, b) => (a.entry.$order as number) - (b.entry.$order as number));
   return result;
 }
 
@@ -90,7 +91,7 @@ export function getLonghands(/** @type {string} */ shorthandProp) {
  * Expand a CSS shorthand value into individual longhand values following the standard 1–4 value
  * TRBL pattern.
  */
-export function expandShorthand(/** @type {string} */ shortVal, /** @type {number} */ count) {
+export function expandShorthand(shortVal: string, count: number) {
   if (!shortVal) return Array(count).fill("");
   const parts = shortVal.trim().split(/\s+/);
   if (count !== 4 || parts.length === 0) return Array(count).fill("");
@@ -101,7 +102,7 @@ export function expandShorthand(/** @type {string} */ shortVal, /** @type {numbe
 }
 
 /** Compress 4 TRBL values back into the shortest valid CSS shorthand string. */
-export function compressShorthand(/** @type {string[]} */ vals) {
+export function compressShorthand(vals: string[]) {
   const [t, r, b, l] = vals;
   if (t === r && r === b && b === l) return t;
   if (t === b && r === l) return `${t} ${r}`;
@@ -130,7 +131,7 @@ export const BORDER_STYLES = new Set([
  * @param {string} value
  * @returns {string[]}
  */
-export function expandBorderSide(value) {
+export function expandBorderSide(value: string) {
   if (!value) return ["", "", ""];
   const tokens = [];
   let current = "";
@@ -170,7 +171,7 @@ export function expandBorderSide(value) {
  * @param {string[]} vals
  * @returns {string}
  */
-export function compressBorderSide(/** @type {string[]} */ vals) {
+export function compressBorderSide(vals: string[]) {
   return vals.filter((v) => v && v.trim()).join(" ");
 }
 

package/src/panels/{stylebook-layers-panel.js → stylebook-layers-panel.ts}

@@ -1,17 +1,19 @@
+/// <reference lib="dom" />
 /** Stylebook layers panel — shows element/variable tree when in stylebook (settings) mode. */
 
 import { html, nothing } from "lit-html";
 import { classMap } from "lit-html/directives/class-map.js";
-import { activeTab } from "../workspace/workspace.js";
-import { componentRegistry } from "../files/components.js";
+import { activeTab } from "../workspace/workspace";
+import { componentRegistry } from "../files/components";
 
-/** @typedef {import("./stylebook-panel.js").StylebookEntry} StylebookEntry */
+import type { StylebookEntry } from "./stylebook-panel";
+import type { JxStyle } from "@jxsuite/schema/types";
 
 /**
  * @param {JxStyle} rootStyle
  * @param {string} tag
  */
-function hasTagStyle(rootStyle, tag) {
+function hasTagStyle(rootStyle: JxStyle, tag: string) {
   const s = rootStyle[`& ${tag}`];
   return s && typeof s === "object" && Object.keys(s).length > 0;
 }
@@ -27,7 +29,10 @@ function hasTagStyle(rootStyle, tag) {
  * }} ctx
  * @returns {import("lit-html").TemplateResult}
  */
-export function renderStylebookLayersTemplate(ctx) {
+export function renderStylebookLayersTemplate(ctx: {
+  selectStylebookTag: (tag: string, media?: string | null, opts?: { panCanvas?: boolean }) => void;
+  stylebookMeta: { $sections: { label: string; elements: StylebookEntry[] }[] };
+}) {
   const tab = activeTab.value;
   const rootStyle = tab?.doc.document?.style || {};
   const selectedTag = tab?.session.ui.stylebookSelection;
@@ -40,17 +45,21 @@ export function renderStylebookLayersTemplate(ctx) {
      * @param {string} parentPath
      * @returns {import("lit-html").TemplateResult}
      */
-    const renderEntryRow = (entry, depth = 0, parentPath = "") => {
+    const renderEntryRow = (
+      entry: StylebookEntry,
+      depth: number = 0,
+      parentPath: string = "",
+    ): import("lit-html").TemplateResult => {
       const tag = entry.tag;
       const fullPath = parentPath ? `${parentPath} ${tag}` : tag;
       const uniqueChildren = entry.children
-        ? [...new Map(entry.children.map((/** @type {StylebookEntry} */ c) => [c.tag, c])).values()]
+        ? [...new Map(entry.children.map((c: StylebookEntry) => [c.tag, c])).values()]
         : [];
       return html`
         <div
           class=${classMap({ "layer-row": true, selected: tag === selectedLeaf })}
           style="padding-left:${8 + depth * 16}px"
-          @click=${(/** @type {MouseEvent} */ e) => {
+          @click=${(e: MouseEvent) => {
             e.stopPropagation();
             ctx.selectStylebookTag(fullPath, undefined, { panCanvas: true });
           }}
@@ -67,21 +76,20 @@ export function renderStylebookLayersTemplate(ctx) {
               ></span>`
             : nothing}
         </div>
-        ${uniqueChildren.map((/** @type {StylebookEntry} */ child) =>
-          renderEntryRow(child, depth + 1, fullPath),
-        )}
+        ${uniqueChildren.map((child: StylebookEntry) => renderEntryRow(child, depth + 1, fullPath))}
       `;
     };
 
-    /** @type {import("lit-html").TemplateResult[]} */
-    const elementRows = [];
+    const elementRows: import("lit-html").TemplateResult[] = [];
     for (const section of ctx.stylebookMeta.$sections) {
       for (const entry of section.elements) {
         elementRows.push(renderEntryRow(entry, 0));
       }
     }
     const compRows = componentRegistry.map(
-      /** @param {import("../files/components.js").ComponentEntry} comp */ (comp) => html`
+      /** @param {import("../files/components.js").ComponentEntry} comp */ (
+        comp: import("../files/components.js").ComponentEntry,
+      ) => html`
         <div
           class=${classMap({ "layer-row": true, selected: comp.tagName === selectedTag })}
           @click=${() => ctx.selectStylebookTag(comp.tagName, undefined, { panCanvas: true })}