@jxsuite/studio 5.0.0 → 5.2.0

package/dist/chunks/{studio-25hkdrkw.js → studio-mpzwze9x.js}

@@ -5,18 +5,18 @@ import {
   toRaw,
   pinClock,
   notify2
-} from "./studio-p1dw8wfw.js";
+} from "./studio-d8z5bajd.js";
 import {
   getPlatform2
 } from "./studio-6nzaktvy.js";
 import {
   loadedMonaco
-} from "./studio-79y5sz51.js";
+} from "./studio-28vs5k2y.js";
 import {
   projectState,
   setProjectState,
   requireProjectState
-} from "./studio-6ewqv390.js";
+} from "./studio-m1p9b6c3.js";
 import {
   isWellFormedLocale,
   resolveI18n,
@@ -36,12 +36,12 @@ import {
   workspace2,
   focusPane2,
   setWorkspaceProject2
-} from "./studio-az3zd49t.js";
+} from "./studio-ez11dmdh.js";
 import {
   SETTINGS,
   readStoredSetting,
   setSetting
-} from "./studio-y9zedyjn.js";
+} from "./studio-z2smx5ce.js";
 import {
   errorMessage2
 } from "./studio-yxa81f45.js";
@@ -1305,9 +1305,7 @@ function liveConfig() {
 }
 function replaceContents(target, source) {
   for (const key of Object.keys(target)) {
-    if (!Object.hasOwn(source, key)) {
-      delete target[key];
-    }
+    delete target[key];
   }
   Object.assign(target, source);
 }
@@ -1347,7 +1345,7 @@ function extensionsKey(config) {
   return JSON.stringify(config.extensions ?? null);
 }
 async function refreshExtensionSurfaces() {
-  const { loadFormats, refreshExtensionUi, refreshFormats } = await (__preload("3c33nwr8"), import("./format-host-3c33nwr8.js"));
+  const { loadFormats, refreshExtensionUi, refreshFormats } = await (__preload("f64fnesp"), import("./format-host-f64fnesp.js"));
   refreshFormats();
   loadFormats();
   refreshExtensionUi(getPlatform2());
@@ -1399,7 +1397,7 @@ async function commitProjectConfig(patch) {
   }
   return { ok: true };
 }
-async function adoptProjectConfig(config) {
+async function adoptProjectConfig(config, text) {
   if (!requireProjectState()) {
     setWorkspaceProject2(workspace2.projectRoot, config);
     return;
@@ -1408,6 +1406,8 @@ async function adoptProjectConfig(config) {
   transactDoc(tab, (t) => replaceContents(t.doc.document, config), { skipHistory: true });
   tab.doc.dirty = false;
   await seedCommitted();
+  _layout = deriveJsonLayout(text);
+  tab.doc.layout = _layout;
   _committed = serializeProjectConfig(config);
 }
 
@@ -1582,5 +1582,5 @@ async function updateSiteConfig(patch) {
 
 export { parseJsonDocument, serializeJson, serializeProjectConfig, lendProjectConfigLayout, commitProjectConfig, adoptProjectConfig, getEffectiveMedia, getEffectiveStyle, getEffectiveImports, getEffectiveElements, getEffectiveHead, getEffectiveLocales, invalidateLayoutCache, getEffectiveLayoutPath, resolveLayoutDoc, distributePageIntoLayout, updateSiteConfig, restoreSession, requireNavigatorPanelId, DEFAULT_INSPECTOR_TAB, isInspectorTabId, BOTTOM_TAB_IDS, DEFAULT_BOTTOM_TAB, isBottomTabId, CHROME_THEMES, DOCK_IDS, DOCK_DEFAULT_SIZES, DEFAULT_PANE_SPLIT, PANE_SPLIT_MIN, PANE_SPLIT_MAX, setPaneSplit, shell, persistDocks, persistedSession, markSessionRestored, flushSession, monacoTheme, registerShellSurface, mountShell, setDockCollapsed, setDockSize, setActivityTab, setBottomTab, setChromeTheme, toggleActivityTab, setLayoutSelection, resetProjectShell, registerShellViewCommands };
 
-//# debugId=698A9C0448752CE964756E2164756E21
-//# sourceMappingURL=studio-25hkdrkw.js.map
+//# debugId=41F1C61D2E957DBB64756E2164756E21
+//# sourceMappingURL=studio-mpzwze9x.js.map

package/dist/chunks/{studio-8qtrpzr3.js → studio-ncn9e189.js}

@@ -4,17 +4,17 @@ import {
 import {
   debouncedStyleCommit,
   renderOnly
-} from "./studio-6ewqv390.js";
+} from "./studio-m1p9b6c3.js";
 import {
   REGION_ATTR,
   overlayRegion,
   registerSurface,
   mountSurface,
   layerHost2
-} from "./studio-erdatzvp.js";
+} from "./studio-ympe0n7a.js";
 import {
   reactive
-} from "./studio-p1dw8wfw.js";
+} from "./studio-d8z5bajd.js";
 import {
   IMAGE_EXTENSIONS,
   MEDIA_EXTENSIONS,
@@ -23,17 +23,17 @@ import {
   uploadAssets,
   mediaSiteUrl,
   previewFileSrc
-} from "./studio-vz68yn9e.js";
+} from "./studio-en82c639.js";
 import {
   peekMediaMeta,
   seedMediaMeta,
   recordImageSize,
   invalidateMediaMeta,
   mediaMetaSummary
-} from "./studio-5523bpzt.js";
+} from "./studio-5nz00bhh.js";
 import {
   previewAssetSrc
-} from "./studio-4m0haseg.js";
+} from "./studio-c07s5ckd.js";
 import {
   rectOf
 } from "./studio-rs76k67r.js";
@@ -836,4 +836,4 @@ function unmountMediaPicker2(host) {
 export { openPopoverSurface, invalidateMediaCache2, showMediaPickerPopover2, uploadAndAssign2, pickAndUpload2, mountMediaPicker2, unmountMediaPicker2 };
 
 //# debugId=9A676D8FC549E4AE64756E2164756E21
-//# sourceMappingURL=studio-8qtrpzr3.js.map
+//# sourceMappingURL=studio-ncn9e189.js.map

package/dist/chunks/{studio-81390n6f.js → studio-nq5yf5mp.js}

@@ -116,4 +116,4 @@ function usageFiles2(result) {
 export { usagesSupported2, peekUsages2, loadUsages2, retryUsages2, invalidateUsages2, usageHeadline2, usageWarning2, usageFiles2 };
 
 //# debugId=4EF5BE6F2F2180F464756E2164756E21
-//# sourceMappingURL=studio-81390n6f.js.map
+//# sourceMappingURL=studio-nq5yf5mp.js.map

package/dist/chunks/{studio-5jy81t3s.js → studio-p6pmwkvh.js}

@@ -1,6 +1,6 @@
 import {
   isJsonObject,
-  isRef2,
+  isRef,
   isFunctionDef,
   isExpressionDef,
   isNamedFormulaDef,
@@ -15,7 +15,7 @@ import {
   paramNames,
   isTagExpression,
   isPrivateStateKey
-} from "./studio-7r42c6ca.js";
+} from "./studio-3ntvq6cg.js";
 import {
   effectScope,
   onScopeDispose,
@@ -27,11 +27,11 @@ import {
   shallowReactive,
   isReactive,
   toRaw,
-  isRef,
+  isRef2,
   ref,
   shallowRef,
   computed
-} from "./studio-p1dw8wfw.js";
+} from "./studio-d8z5bajd.js";
 import {
   __export
 } from "./studio-5te5tqng.js";
@@ -1063,7 +1063,7 @@ function buildStyleRules(style, options = {}) {
     resolveValue
   } = options;
   const rules = [];
-  const isBlock = (value) => value !== null && typeof value === "object" && !Array.isArray(value) && !isRef2(value);
+  const isBlock = (value) => value !== null && typeof value === "object" && !Array.isArray(value) && !isRef(value);
   const blocksOf = (key, value) => {
     if (isBlock(value)) {
       return [value];
@@ -1077,7 +1077,7 @@ function buildStyleRules(style, options = {}) {
     if (value === undefined || value === null) {
       return null;
     }
-    if (isRef2(value)) {
+    if (isRef(value)) {
       return reactive ? resolveValue?.(property, value, target) ?? null : null;
     }
     if (typeof value === "object") {
@@ -2369,7 +2369,7 @@ function boundPropKey(key, val, state) {
     return null;
   }
   const stored = toRaw(state)[sub];
-  if (isRef(stored) || typeof stored === "function") {
+  if (isRef2(stored) || typeof stored === "function") {
     return null;
   }
   if (typeof stored === "object" && stored !== null) {
@@ -3174,6 +3174,7 @@ function renderMappedArrayInto(parentEl, arrayDef, state, options) {
   parentEl.append(anchor);
   const { items: itemsSrc, map: mapDef, filter: filterRef, sort: sortRef, key: keyRef } = arrayDef;
   const keyPointer = isRefObj(keyRef) ? keyRef.$ref : null;
+  const instancePath = _instancePath;
   let warned = false;
   const warnOnce = (message) => {
     if (!warned) {
@@ -3261,7 +3262,7 @@ function renderMappedArrayInto(parentEl, arrayDef, state, options) {
     }
     pauseTracking();
     try {
-      reconcile(list, keys);
+      underInstancePath(reexpand(instancePath), () => reconcile(list, keys));
     } finally {
       resetTracking();
     }
@@ -3325,6 +3326,7 @@ function resolveTagName(tagName, scope) {
 function renderSwitch(def, state, options) {
   const path = options?._path ?? [];
   const container = document.createElement(resolveTagName(def.tagName, state));
+  const instancePath = _instancePath;
   if (options?.onNodeCreated) {
     options.onNodeCreated(container, path, def, state);
   }
@@ -3372,13 +3374,13 @@ function renderSwitch(def, state, options) {
           return;
         }
         container.replaceChildren();
-        scope.run(() => container.append(renderNode(doc, childScope, childOpts)));
+        underInstancePath(reexpand(instancePath), () => scope.run(() => container.append(renderNode(doc, childScope, childOpts))));
       }).catch((error) => console.error("Jx $switch: failed to load external case", caseDef.$ref, error));
       return;
     }
     pauseTracking();
     try {
-      scope.run(() => container.append(renderNode(caseDef, state, childOpts)));
+      underInstancePath(reexpand(instancePath), () => scope.run(() => container.append(renderNode(caseDef, state, childOpts))));
     } finally {
       resetTracking();
     }
@@ -3916,7 +3918,7 @@ function resolveRef(refPath, state) {
   return readPath(state, refPath) ?? null;
 }
 function isRefObj(v) {
-  return isRef2(v);
+  return isRef(v);
 }
 function getPath2(obj, path) {
   return readPath(obj, path);
@@ -4067,6 +4069,65 @@ function injectHead(entries, _base) {
     document.head.append(el);
   }
 }
+var MAX_COMPONENT_NESTING = 32;
+var ROOT_INSTANCE_PATH = { expansion: 0, frames: [] };
+var _instancePath = ROOT_INSTANCE_PATH;
+function underInstancePath(path, fn) {
+  const was = _instancePath;
+  _instancePath = path;
+  try {
+    return fn();
+  } finally {
+    _instancePath = was;
+  }
+}
+function reexpand(path) {
+  return { expansion: path.frames.length, frames: path.frames };
+}
+function samePropValue(a, b) {
+  if (Object.is(a, b)) {
+    return true;
+  }
+  if (!isPlainData(a) || !isPlainData(b)) {
+    return false;
+  }
+  try {
+    return JSON.stringify(a) === JSON.stringify(b);
+  } catch {
+    return false;
+  }
+}
+function isPlainData(value) {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  const raw = toRaw(value);
+  if (Array.isArray(raw)) {
+    return true;
+  }
+  const proto = Object.getPrototypeOf(raw);
+  return proto === Object.prototype || proto === null;
+}
+function sameFrame(a, b) {
+  if (a.tag !== b.tag) {
+    return false;
+  }
+  const keys = Object.keys(a.props);
+  if (keys.length !== Object.keys(b.props).length) {
+    return false;
+  }
+  return keys.every((key) => Object.hasOwn(b.props, key) && samePropValue(a.props[key], b.props[key]));
+}
+function extendInstancePath(path, frame) {
+  const chain = [...path.frames.map((f) => f.tag), frame.tag].join(" → ");
+  if (path.frames.slice(path.expansion).some((f) => sameFrame(f, frame))) {
+    throw new Error(`Component <${frame.tag}> renders itself: ${chain}. A component cannot appear inside its own ` + `definition with the same props — the expansion would never end.`);
+  }
+  if (path.frames.length >= MAX_COMPONENT_NESTING) {
+    throw new Error(`Component nesting exceeds ${MAX_COMPONENT_NESTING} levels: ${chain}. A component that renders itself with changing props needs a case that stops.`);
+  }
+  return { expansion: path.expansion, frames: [...path.frames, frame] };
+}
 var _definedSources = new Set;
 async function defineElement(source, baseUrl) {
   let base = baseUrl;
@@ -4109,6 +4170,8 @@ async function defineElement(source, baseUrl) {
         return;
       }
       this._jxInitialized = true;
+      const enclosingPath = _instancePath;
+      const supplied = {};
       const live = _elementDefs.get(tagName) ?? { base: initialBase, doc: initialDef };
       const def = live.doc;
       const defBase = live.base;
@@ -4116,6 +4179,7 @@ async function defineElement(source, baseUrl) {
       for (const attr of observedAttrs) {
         if (this.hasAttribute(attr)) {
           absorbAttribute(state, attr, this.getAttribute(attr));
+          supplied[attr] = this.getAttribute(attr);
         }
       }
       const propsAttr = this.dataset.jxProps;
@@ -4128,6 +4192,7 @@ async function defineElement(source, baseUrl) {
             }
             if (key in (def.state ?? {})) {
               state[key] = val;
+              supplied[key] = val;
             }
           }
         } catch {}
@@ -4142,6 +4207,7 @@ async function defineElement(source, baseUrl) {
         }
         if (key in (def.state ?? {})) {
           state[key] = this.getAttribute(name);
+          supplied[key] = this.getAttribute(name);
           this.removeAttribute(name);
         }
       }
@@ -4151,8 +4217,26 @@ async function defineElement(source, baseUrl) {
         }
         if (key in this && this[key] !== undefined && instanceSupplies(this, key)) {
           state[key] = this[key];
+          supplied[key] = this[key];
         }
       }
+      let ownPath;
+      try {
+        ownPath = extendInstancePath(enclosingPath, { props: supplied, tag: tagName });
+      } catch (error) {
+        this.replaceChildren();
+        if (!this.isConnected) {
+          return;
+        }
+        console.error(`Jx: <${tagName}> was not rendered:`, error);
+        this.dispatchEvent(new ErrorEvent("jx-error", {
+          bubbles: true,
+          composed: true,
+          error,
+          message: error instanceof Error ? error.message : String(error)
+        }));
+        return;
+      }
       for (const key of Object.keys(def.state ?? {})) {
         if (isPrivateStateKey(key)) {
           continue;
@@ -4182,9 +4266,11 @@ async function defineElement(source, baseUrl) {
       const wasInside = _canvasInsideStampedHost;
       _canvasInsideStampedHost ||= this.dataset.jxPath !== undefined;
       try {
-        for (const childDef of children) {
-          this.append(renderNode(childDef, state));
-        }
+        underInstancePath(ownPath, () => {
+          for (const childDef of children) {
+            this.append(renderNode(childDef, state));
+          }
+        });
       } finally {
         _canvasInsideStampedHost = wasInside;
       }
@@ -5518,9 +5604,15 @@ var jx_action_button_default = {
       color: "var(--jx-accent-fg)"
     },
     '&[data-size="sm"] > [part="control"]': {
+      $description: "The small action button is the kit's most packed control — Studio's toolbars, block action bar and inspector rows declare it some four hundred times — and it draws 4px under the kit's control height, which is the WCAG 2.2 SC 2.5.8 floor (ui.md §4.3). The `::before` is the hit area, jx-tab's close-button technique: an empty pseudo-element that reaches 2px past the drawn box on every side, so the region that accepts the pointer is exactly `--jx-control-h` square while the picture stays 20px. The inset is -3px and not -2px because an absolutely positioned box is offset from its containing block's PADDING edge, and this control draws a 1px border: the border width comes first, then half of the 4px the box is under (jx-tab's close button is borderless, so -4px was exact there). The control is already `position: relative` for the badge, so the pseudo-element needs nothing more. A 4px gap (jx-toolbar's) lets two extended neighbours abut; a compact jx-action-group packs its members touching, and its sheet zeroes the extension on that axis, because an extension over a neighbour's box would take the neighbour's clicks, and the criterion gives an overlapped strip to the target on top rather than to both; a default group's 2px gap leaves every member but the last at 22px on that axis, which ui.md §11 names as a non-claim. Held by target-size.test.ts and the conformance gate, both of which read the border and subtract it.",
       minWidth: "calc(var(--jx-control-h) - 4px)",
       minHeight: "calc(var(--jx-control-h) - 4px)",
-      padding: "0 var(--jx-space-1)"
+      padding: "0 var(--jx-space-1)",
+      "::before": {
+        content: '""',
+        position: "absolute",
+        inset: "-3px"
+      }
     },
     '&[data-size="lg"] > [part="control"]': {
       minWidth: "calc(var(--jx-control-h) + 8px)",
@@ -5819,6 +5911,14 @@ var jx_action_group_default = {
     },
     '&[data-compact] > jx-action-button > [part="control"]:focus-visible': {
       zIndex: "1"
+    },
+    '&[data-compact] > jx-action-button[data-size="sm"] > [part="control"]::before': {
+      $description: "A small action button carries a `::before` that extends its hit area 2px past its drawn box on every side (an inset of -3px: the button's 1px border, then half the 4px it is under, because an absolutely positioned box is offset from the padding edge), so that a 20px picture accepts the pointer over the kit's 24px control height (WCAG 2.2 SC 2.5.8, ui.md §4.3). In a compact group the boxes TOUCH on the packed axis — no gap, and each border drawn over the last — so an extension there could reach nothing but the neighbour's own box, and the later sibling paints above the earlier one: the last 2px of every button but the last would activate the button after it. The criterion gives an overlapped area to the target on TOP, so the extension would buy the earlier button nothing and cost it a stolen strip. The default 2px gap is the other case: two extensions overlap by 2px there, the later member keeps the strip, and every small member but the last counts 22px on the packed axis, which is under the floor and which ui.md §11 names beside this one. The packed axis is therefore zeroed here — `0` is the padding edge, 1px inside the drawn border, and the button's own box accepts the pointer over that pixel — and the cross axis keeps its 2px past the drawn box, which reaches only the gap around the group: a compact group's small members are 24px tall and as wide as they draw, which ui.md §11 records as the one thing the technique cannot reach. The vertical variant swaps the axes, and its inline value is the button's own -3px for the same reason.",
+      insetInline: "0"
+    },
+    '&[data-compact][data-orientation="vertical"] > jx-action-button[data-size="sm"] > [part="control"]::before': {
+      insetInline: "-3px",
+      insetBlock: "0"
     }
   },
   children: [
@@ -6127,9 +6227,16 @@ var jx_button_default = {
       }
     },
     '&[data-size="sm"] > [part="control"]': {
+      $description: "A small button draws 4px under the kit's control height, and the control height is the WCAG 2.2 SC 2.5.8 floor (ui.md §4.3), so the drawn box alone would be a 20px pointer target at the default density. The `::before` is the hit area: an empty pseudo-element that reaches 2px past the drawn box on every side, so what accepts the pointer is exactly `--jx-control-h` square while the picture stays small — jx-tab's close button's technique, and the criterion measures the region that accepts the pointer, not the paint. The inset is -3px and not -2px because an absolutely positioned box is offset from its containing block's PADDING edge, and this control draws a 1px border: the border width comes first, then half of the 4px the box is under. jx-tab's close button is borderless, which is why -4px was exact there, and why the number did not carry over unchanged. In a jx-toolbar (a 4px gap) two extended neighbours abut and neither loses a pixel; jx-action-group's own sheet zeroes the packed axis in a compact group, where the boxes touch and an extension could only steal a strip of the neighbour. Held by target-size.test.ts and the conformance gate, both of which read the border and subtract it.",
+      position: "relative",
       minHeight: "calc(var(--jx-control-h) - 4px)",
       padding: "0 var(--jx-space-3)",
-      fontSize: "var(--jx-text-sm)"
+      fontSize: "var(--jx-text-sm)",
+      "::before": {
+        content: '""',
+        position: "absolute",
+        inset: "-3px"
+      }
     },
     '&[data-size="lg"] > [part="control"]': {
       minHeight: "calc(var(--jx-control-h) + 8px)",
@@ -6395,9 +6502,16 @@ var jx_checkbox_default = {
       color: "var(--jx-fg-dim)"
     },
     '&[data-size="sm"] > [part="control"]': {
+      $description: "The control is the `<label>` wrapping the input, and the label is the pointer target: a click anywhere on it toggles the box. At `sm` it draws 4px under the kit's control height, the WCAG 2.2 SC 2.5.8 floor (ui.md §4.3), so the `::before` extends the hit area 2px beyond the box on every side — jx-tab's close-button technique, the same shape jx-button carries — and the region that accepts the pointer is `--jx-control-h` tall while the row stays 20px. -2px is exact here where jx-button needs -3px: an absolutely positioned box is offset from the PADDING edge, and the label draws no border, so its padding edge is its drawn edge. The label needs `position: relative` here for the pseudo-element to measure against; the input inside is 14px and needs nothing of its own, because the label around it is the target. Held by target-size.test.ts and the conformance gate.",
+      position: "relative",
       minHeight: "calc(var(--jx-control-h) - 4px)",
       fontSize: "var(--jx-text-sm)",
-      lineHeight: "var(--jx-leading-sm)"
+      lineHeight: "var(--jx-leading-sm)",
+      "::before": {
+        content: '""',
+        position: "absolute",
+        inset: "-2px"
+      }
     },
     '&[data-size="sm"] [part="input"]': {
       width: "calc(var(--jx-icon-size) - 2px)",
@@ -8484,7 +8598,7 @@ var jx_menu_item_default = {
       type: "string",
       default: "",
       attribute: "requires",
-      description: "The one-sentence reason a disabled row cannot act, printed as its tooltip."
+      description: "The one-sentence reason a DISABLED row cannot act, drawn as the row's native title while it is disabled and nowhere at all while it is not. The title is the whole contract here, and deliberately not the tooltip hybrid jx-button, jx-action-button and jx-switch ship: a disabled row can open no tip, so the hybrid collapses to its disabled half, and an ENABLED row never carries a requires — every Studio projection fills it from the registry's disabledReason, which is undefined for a command that can run, and a reason on a row that can act is a contradiction rather than a hint. Studio's menu surface also prints the same sentence as the row's visible description (`Needs …`), so a keyboard reader hears it without the title."
     },
     checked: {
       type: "string",
@@ -9261,6 +9375,8 @@ var jx_combobox_default = {
       fontSize: "var(--jx-text-lg)"
     },
     '& [part="toggle"]': {
+      $description: "The toggle sits inside the field's border, so it draws 2px under the field's height: 22px in a 24px field, 18px in an `sm` one. The `::before` is its hit area (WCAG 2.2 SC 2.5.8, ui.md §4.3), the same shape as jx-textfield's clear button: an empty pseudo-element inset by half the difference between the drawn box and the kit's control height, -1px on a default field and -3px on a small one, so the region that accepts the pointer is `--jx-control-h` square at every size while the caret and its box stay where they were; on a large field the inset is positive and the pseudo-element is an invisible box inside a button already over the floor. `position: relative` is what the pseudo-element measures against, and it is new here: the toggle is a flex item of the field, not an absolutely placed one. The rotation the open state applies turns the pseudo-element with the button, which a square does not mind.",
+      position: "relative",
       display: "inline-flex",
       alignItems: "center",
       justifyContent: "center",
@@ -9278,6 +9394,11 @@ var jx_combobox_default = {
       cursor: "pointer",
       outline: "none",
       transition: "rotate var(--jx-dur-1) var(--jx-ease-out)",
+      "::before": {
+        content: '""',
+        position: "absolute",
+        inset: "calc((var(--jx-combobox-h) - 2px - var(--jx-control-h)) / 2)"
+      },
       ":hover": {
         color: "var(--jx-fg)"
       },
@@ -11936,6 +12057,11 @@ var jx_switch_default = {
     "name",
     "size"
   ],
+  $elements: [
+    {
+      $ref: "./jx-tooltip.json"
+    }
+  ],
   state: {
     checked: {
       type: "boolean",
@@ -11947,13 +12073,13 @@ var jx_switch_default = {
       type: "boolean",
       default: false,
       attribute: "disabled",
-      description: "Cannot be flipped or focused. Disabled, never absent."
+      description: "Cannot be flipped or focused. Disabled, never absent, and the hint moves from the tip to the row's title while it is: a disabled control cannot open a tip, and why the setting cannot be changed is exactly what the reader hovers to find out."
     },
     hint: {
       type: "string",
       default: "",
       attribute: "hint",
-      description: "The tooltip on the row: why the setting is off, or what turning it on does. Empty removes the title rather than writing a blank one."
+      description: "The tooltip on the row: what turning the setting on does, or why it cannot be changed. The same hybrid jx-button and jx-action-button ship. While the switch is ENABLED it is drawn as a jx-tooltip child of this element — shown on keyboard focus at once and on hover after the tip's delay, hoverable and dismissible with Escape (SC 1.4.13) — and the control names it in aria-describedby, so it is a description beside the name and never the name itself. While the switch is DISABLED it is the native title of the wrapping label instead, because a disabled control receives no focus and no pointer event and could never open a tip, while the platform still shows a title on hover. Never both at once; empty draws neither. ONE difference from the buttons, and it is the platform's rather than the kit's: the tip is wired by `for` alone and the row declares NO `interestfor`. Interest invokers are supported on `a`, `area` and `button` only — never on a label or an input — so the attribute here would show nothing on Chrome 152 while telling the tooltip sidecar the platform had the pair, which is the one combination that draws no tip on any engine. The sidecar binds the label on every engine instead, and that is what the switch pays for a tooltip: six listeners on the row and two on the tip, always, where a button pays them only where the platform lacks the attribute."
     },
     label: {
       type: "string",
@@ -11990,6 +12116,47 @@ var jx_switch_default = {
       default: "",
       description: `Forwarded to the inner control as its tabindex, which is what makes a roving caret possible: the focusable node is the input inside, not the host and not the label that wraps it, so a jx-toolbar moving focus writes this rather than reaching into a child's internals. It is a PROPERTY ONLY (el.tabindex = "0") and deliberately not an observed attribute: written as an attribute it would land on the host as well, and a host carrying tabindex is itself focusable, so the one control would become two tab stops.`
     },
+    uid: {
+      type: "string",
+      default: "",
+      description: "This row's own id stem, minted on mount by the tooltip sidecar. The label's id, the tip's id and the two attributes that wire one to the other are all built from it, so a consumer writes none of them and two hinted switches on one panel cannot collide. Empty until the mount microtask, which is why every binding that reads it guards on it."
+    },
+    hasTip: {
+      $expression: {
+        operator: "&&",
+        target: {
+          operator: "!",
+          target: {
+            operator: "!",
+            target: {
+              $ref: "#/state/hint"
+            }
+          }
+        },
+        value: {
+          operator: "&&",
+          target: {
+            operator: "!",
+            target: {
+              $ref: "#/state/disabled"
+            }
+          },
+          value: {
+            operator: "!==",
+            target: {
+              $ref: "#/state/uid"
+            },
+            value: ""
+          }
+        }
+      }
+    },
+    onMount: {
+      $prototype: "Function",
+      $src: "jx-ui:/behaviors/tooltip.ts",
+      $export: "mintHintId",
+      description: "Mints the id stem the hint's tooltip is wired by. A document cannot: the closed operator set has no counter and no identity."
+    },
     onChange: {
       $prototype: "Function",
       body: [
@@ -12102,6 +12269,9 @@ var jx_switch_default = {
     '& [part="label"]:empty': {
       display: "none"
     },
+    '& > [part="tooltip"]': {
+      display: "contents"
+    },
     "@(forced-colors: active)": {
       '& [part="input"]': {
         forcedColorAdjust: "none",
@@ -12132,7 +12302,8 @@ var jx_switch_default = {
       tagName: "label",
       attributes: {
         part: "control",
-        title: "${state.hint || null}"
+        id: "${state.uid || null}",
+        title: "${state.disabled && state.hint ? state.hint : null}"
       },
       children: [
         {
@@ -12143,7 +12314,7 @@ var jx_switch_default = {
             role: "switch",
             "aria-label": "${state.label || null}",
             "aria-labelledby": "${state.labelledby || null}",
-            "aria-describedby": "${state.describedby || null}",
+            "aria-describedby": "${[state.hasTip ? state.uid + '-tip' : null, state.describedby || null].filter(Boolean).join(' ') || null}",
             tabindex: "${state.tabindex || null}",
             name: "${state.name || null}",
             disabled: {
@@ -12172,6 +12343,34 @@ var jx_switch_default = {
           ]
         }
       ]
+    },
+    {
+      tagName: "span",
+      attributes: {
+        part: "tooltip"
+      },
+      $switch: {
+        $ref: "#/state/hasTip"
+      },
+      cases: {
+        true: {
+          tagName: "jx-tooltip",
+          attributes: {
+            part: "tip",
+            id: "${state.uid}-tip",
+            for: "${state.uid}"
+          },
+          children: [
+            {
+              tagName: "span",
+              attributes: {
+                part: "tip-text"
+              },
+              textContent: "${state.hint}"
+            }
+          ]
+        }
+      }
     }
   ]
 };
@@ -13106,9 +13305,15 @@ var jx_textfield_default = {
       fontSize: "var(--jx-text-lg)"
     },
     '& [part="clear"]': {
+      $description: "The clear button sits inside the field's border, so it draws 2px under the field's height: 22px in a 24px field, and 18px in an `sm` one. The `::before` is its hit area (WCAG 2.2 SC 2.5.8, ui.md §4.3): an empty pseudo-element inset by half the difference between the drawn box and the kit's control height, which is -1px on a default field and -3px on a small one, so the region that accepts the pointer is `--jx-control-h` square at every size while the glyph and its hover box stay where they were. On a large field the difference is positive and the pseudo-element is an invisible box INSIDE a button that is already over the floor, which changes nothing. jx-tab's close button is the technique; the button is absolutely positioned already, so it is its own containing block. The extension lies over the input it clears, which was true of the drawn button too, and 2px past the field's edge at `sm`, where a neighbour at the kit's 4px gap extends 2px back and the two abut.",
       position: "absolute",
       insetBlockStart: "1px",
       insetInlineEnd: "1px",
+      "::before": {
+        content: '""',
+        position: "absolute",
+        inset: "calc((var(--jx-textfield-h) - 2px - var(--jx-control-h)) / 2)"
+      },
       display: "inline-flex",
       alignItems: "center",
       justifyContent: "center",
@@ -17459,5 +17664,5 @@ function registerUi(options = {}) {
 
 export { isKeyframesAtRule, pureSchemeOf, intlHelpersClause, PURE_METHOD_OPS, BLESSED_OPERATORS, BLESSED_GLOBALS, isMutating, evaluateExpression, assetUrlFor, PUBLIC_DIR, BUILD_LANES, splitRefSuffix, isNonRelativeRef, normalizeProjectPath, dirOfPath, joinProjectPath, projectPathForRef, encodeProjectPath, mount3, preloadDocument, setSkipServerFunctions, runScoped, setCanvasAssetResolver, buildScope, renderNode, redefineElement, defineElement, openAt, close, showModal, close2, ensureCaret, focusItem, splitModifiersOf, selectValue, POPOVER_DEFAULT_MODE, attrs, literalAttr, tagOf, labelOf, isPopover, idOf, walk, popoverIdsIn, documentHasPopover, scalar, findPopoverDefects, popoverDisplayRepair, POPOVER_TAGS, INVOKER_TAGS, KIT_BASE, registerUi, setActiveRegistry, activeRegistry };
 
-//# debugId=19EBDEF551FE80A064756E2164756E21
-//# sourceMappingURL=studio-5jy81t3s.js.map
+//# debugId=9467D68A831CC3FC64756E2164756E21
+//# sourceMappingURL=studio-p6pmwkvh.js.map

package/dist/chunks/{studio-3gxv60tn.js → studio-qa7fzxan.js}

@@ -1,15 +1,15 @@
 import {
   ensureCaret
-} from "./studio-5jy81t3s.js";
+} from "./studio-p6pmwkvh.js";
 import {
   registerSurface,
   mountSurface,
   getLayerSlot2,
   clearLayerSlot2
-} from "./studio-erdatzvp.js";
+} from "./studio-ympe0n7a.js";
 import {
   reactive
-} from "./studio-p1dw8wfw.js";
+} from "./studio-d8z5bajd.js";
 import {
   rectOf
 } from "./studio-rs76k67r.js";
@@ -419,4 +419,4 @@ function restoreFocus(opener) {
 export { openMenu2 };
 
 //# debugId=AF40C481EA74291464756E2164756E21
-//# sourceMappingURL=studio-3gxv60tn.js.map
+//# sourceMappingURL=studio-qa7fzxan.js.map