@jxsuite/studio 4.0.0 → 5.0.0

package/README.md

@@ -4,7 +4,7 @@
 
 ## Overview
 
-Jx Studio is a browser-based visual IDE for Jx applications. It renders a live canvas via `@jxsuite/runtime`, provides a layer tree for structural editing, an inspector for property/style/state management, and a Monaco-powered code editor for function bodies. The UI is built with [Adobe Spectrum Web Components](https://opensource.adobe.com/spectrum-web-components/).
+Jx Studio is a browser-based visual IDE for Jx applications. It renders a live canvas via `@jxsuite/runtime`, provides a layer tree for structural editing, an inspector for property/style/state management, and a Monaco-powered code editor for function bodies. The UI is built with the [Jx UI kit](../ui/README.md): interface elements authored as Jx documents and interpreted by the runtime, so the chrome is edited on the same canvas as the sites it builds.
 
 At the site level, Studio acts as a CMS. It provides a project explorer, content collection browser, schema-driven entry editors, and media management.
 

package/data/elements-meta.json

@@ -41,41 +41,35 @@
         {
           "tag": "strong",
           "label": "Bold",
-          "icon": "sp-icon-text-bold",
           "command": "bold"
         },
         {
           "tag": "em",
           "label": "Italic",
-          "icon": "sp-icon-text-italic",
           "command": "italic"
         },
         {
           "tag": "u",
           "label": "Underline",
-          "icon": "sp-icon-text-underline",
           "command": "underline"
         },
         {
           "tag": "del",
           "label": "Strikethrough",
-          "icon": "sp-icon-text-strikethrough",
           "command": "strikethrough"
         },
         {
           "tag": "sup",
           "label": "Superscript",
-          "icon": "sp-icon-text-superscript",
           "command": "superscript"
         },
         {
           "tag": "sub",
           "label": "Subscript",
-          "icon": "sp-icon-text-subscript",
           "command": "subscript"
         },
-        { "tag": "code", "label": "Code", "icon": "sp-icon-code", "command": "code" },
-        { "tag": "a", "label": "Link", "icon": "sp-icon-link", "command": "link" }
+        { "tag": "code", "label": "Code", "command": "code" },
+        { "tag": "a", "label": "Link", "command": "link" }
       ]
     },
     "h1": {
@@ -85,17 +79,15 @@
         {
           "tag": "strong",
           "label": "Bold",
-          "icon": "sp-icon-text-bold",
           "command": "bold"
         },
         {
           "tag": "em",
           "label": "Italic",
-          "icon": "sp-icon-text-italic",
           "command": "italic"
         },
-        { "tag": "code", "label": "Code", "icon": "sp-icon-code", "command": "code" },
-        { "tag": "a", "label": "Link", "icon": "sp-icon-link", "command": "link" }
+        { "tag": "code", "label": "Code", "command": "code" },
+        { "tag": "a", "label": "Link", "command": "link" }
       ]
     },
     "h2": {
@@ -318,16 +310,14 @@
         {
           "tag": "strong",
           "label": "Bold",
-          "icon": "sp-icon-text-bold",
           "command": "bold"
         },
         {
           "tag": "em",
           "label": "Italic",
-          "icon": "sp-icon-text-italic",
           "command": "italic"
         },
-        { "tag": "code", "label": "Code", "icon": "sp-icon-code", "command": "code" }
+        { "tag": "code", "label": "Code", "command": "code" }
       ]
     },
     "span": {

package/data/html-meta.json

@@ -3,12 +3,34 @@
   "title": "HTML Attribute Metadata",
   "description": "Section assignment, order, and input inference metadata for the properties sidebar.",
   "$sections": [
-    { "key": "identity", "label": "Identity" },
-    { "key": "link", "label": "Link" },
-    { "key": "media", "label": "Media" },
-    { "key": "form", "label": "Form" },
-    { "key": "table", "label": "Table" },
-    { "key": "accessibility", "label": "Accessibility" }
+    {
+      "key": "identity",
+      "label": "Identity"
+    },
+    {
+      "key": "link",
+      "label": "Link"
+    },
+    {
+      "key": "media",
+      "label": "Media"
+    },
+    {
+      "key": "form",
+      "label": "Form"
+    },
+    {
+      "key": "interactive",
+      "label": "Interactive"
+    },
+    {
+      "key": "table",
+      "label": "Table"
+    },
+    {
+      "key": "accessibility",
+      "label": "Accessibility"
+    }
   ],
   "$defs": {
     "id": {
@@ -361,6 +383,29 @@
       "$section": "accessibility",
       "$order": 70,
       "type": "string"
+    },
+    "popover": {
+      "$section": "identity",
+      "$order": 50,
+      "type": "string",
+      "$label": "Popover",
+      "enum": ["auto", "manual", "hint"]
+    },
+    "popovertarget": {
+      "$section": "interactive",
+      "$order": 10,
+      "type": "string",
+      "$label": "Opens popover",
+      "$elements": ["button", "input"],
+      "$input": "popover-target"
+    },
+    "popovertargetaction": {
+      "$section": "interactive",
+      "$order": 20,
+      "type": "string",
+      "$label": "Action",
+      "$elements": ["button", "input"],
+      "enum": ["toggle", "show", "hide"]
     }
   }
 }

package/dist/chunks/{2020-xp8vnwma.js → 2020-g79n01v9.js}

@@ -1,24 +1,24 @@
 import {
-  require_applicator,
   require_codegen,
+  require_util,
+  require_names,
+  require_validate,
+  require_validation_error,
+  require_ref_error,
   require_compile,
   require_core,
-  require_core1 as require_core2,
+  require_ref,
+  require_core2,
+  require_validation,
   require_dependencies,
-  require_discriminator,
+  require_applicator,
   require_format,
   require_metadata,
-  require_names,
-  require_ref,
-  require_ref_error,
-  require_util,
-  require_validate,
-  require_validation,
-  require_validation_error
-} from "./studio-4q0wznzf.js";
+  require_discriminator
+} from "./studio-7e11jpa9.js";
 import {
   __commonJS
-} from "./studio-a0tswy0w.js";
+} from "./studio-5te5tqng.js";
 
 // ../../node_modules/ajv/dist/vocabularies/dynamic/dynamicAnchor.js
 var require_dynamicAnchor = __commonJS(function(exports) {
@@ -784,5 +784,5 @@ var require__2020 = __commonJS(function(exports, module) {
 });
 export default require__2020();
 
-//# debugId=5A3148E7FA92180C64756E2164756E21
-//# sourceMappingURL=2020-xp8vnwma.js.map
+//# debugId=B964D6607956243364756E2164756E21
+//# sourceMappingURL=2020-g79n01v9.js.map

package/dist/chunks/action-group-sp6tna8v.js

@@ -0,0 +1,118 @@
+// ../ui/src/behaviors/action-group.ts
+var GROUP = "jx-action-group";
+var ITEM = "jx-action-button";
+function groupOf(event) {
+  const target = event.currentTarget;
+  return target instanceof HTMLElement && target.localName === GROUP ? target : null;
+}
+function ownsNode(group, node) {
+  return node instanceof Element && node.closest(GROUP) === group;
+}
+function itemsOf(group) {
+  return [...group.querySelectorAll(ITEM)].filter((item) => item.closest(GROUP) === group);
+}
+function isDisabled(item) {
+  return item.disabled === undefined ? item.hasAttribute("disabled") : item.disabled === true;
+}
+function isChosen(item) {
+  if (item.selected === undefined && item.checked === undefined) {
+    return item.hasAttribute("selected") || item.getAttribute("checked") === "true";
+  }
+  return item.selected === true || item.checked === "true";
+}
+function focusControl(item) {
+  const control = item.querySelector('[part="control"]');
+  (control ?? item).focus();
+}
+function writeRoving(items, caret) {
+  for (const item of items) {
+    item.tabindex = item === caret ? "0" : "-1";
+  }
+}
+function caretFor(items) {
+  const enabled = items.filter((item) => !isDisabled(item));
+  const held = enabled.find((item) => item.tabindex === "0");
+  return held ?? enabled.find((item) => isChosen(item)) ?? enabled[0] ?? null;
+}
+function focusItem(group, index) {
+  const items = itemsOf(group);
+  const enabled = items.filter((item) => !isDisabled(item));
+  if (enabled.length === 0) {
+    return null;
+  }
+  const at = (index % enabled.length + enabled.length) % enabled.length;
+  const caret = enabled[at];
+  writeRoving(items, caret);
+  focusControl(caret);
+  return caret;
+}
+function syncRoving(group) {
+  const items = itemsOf(group);
+  writeRoving(items, caretFor(items));
+}
+function isSettled(group) {
+  const items = itemsOf(group);
+  const caret = caretFor(items);
+  return items.every((item) => item.tabindex === (item === caret ? "0" : "-1"));
+}
+var watched = new WeakSet;
+function watchRoving(group) {
+  if (watched.has(group)) {
+    return;
+  }
+  watched.add(group);
+  const observer = new MutationObserver(() => {
+    if (!isSettled(group)) {
+      syncRoving(group);
+    }
+  });
+  observer.observe(group, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ["disabled"]
+  });
+}
+function onGroupKeydown(state, event) {
+  const group = groupOf(event);
+  if (!group || !ownsNode(group, event.target)) {
+    return;
+  }
+  const vertical = state.orientation === "vertical";
+  const enabled = itemsOf(group).filter((item) => !isDisabled(item));
+  const active = enabled.findIndex((item) => item === event.target || event.target instanceof Node && item.contains(event.target));
+  let caret = null;
+  if (event.key === (vertical ? "ArrowDown" : "ArrowRight")) {
+    caret = focusItem(group, active + 1);
+  } else if (event.key === (vertical ? "ArrowUp" : "ArrowLeft")) {
+    caret = focusItem(group, active === -1 ? -1 : active - 1);
+  } else if (event.key === "Home") {
+    caret = focusItem(group, 0);
+  } else if (event.key === "End") {
+    caret = focusItem(group, -1);
+  } else {
+    return;
+  }
+  event.preventDefault();
+  event.stopPropagation();
+  if (caret && state.selects === "single") {
+    caret.click();
+  }
+}
+function onGroupReady(_state, event) {
+  const group = groupOf(event);
+  if (group) {
+    syncRoving(group);
+    watchRoving(group);
+  }
+}
+export {
+  focusItem,
+  itemsOf,
+  onGroupKeydown,
+  onGroupReady,
+  syncRoving
+};
+
+//# debugId=E4D2BEA9407FD8ED64756E2164756E21
+//# sourceMappingURL=action-group-sp6tna8v.js.map

package/dist/chunks/adapter-nj7tnjfn.js

@@ -0,0 +1,13 @@
+import {
+  dropTargetForElements2,
+  monitorForElements2,
+  draggable2
+} from "./studio-esrxgwh6.js";
+export {
+  draggable2 as draggable,
+  dropTargetForElements2 as dropTargetForElements,
+  monitorForElements2 as monitorForElements
+};
+
+//# debugId=9889CBC1EDBA419764756E2164756E21
+//# sourceMappingURL=adapter-nj7tnjfn.js.map