@jxsuite/studio 2.2.2 → 2.3.0

package/data/html-meta.json

@@ -0,0 +1,366 @@
+{
+  "$id": "html-meta",
+  "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" }
+  ],
+  "$defs": {
+    "id": {
+      "$section": "identity",
+      "$order": 10,
+      "type": "string",
+      "$label": "ID"
+    },
+    "class": {
+      "$section": "identity",
+      "$order": 20,
+      "type": "string",
+      "$label": "Class"
+    },
+    "title": {
+      "$section": "identity",
+      "$order": 30,
+      "type": "string"
+    },
+    "hidden": {
+      "$section": "identity",
+      "$order": 40,
+      "type": "boolean"
+    },
+    "lang": {
+      "$section": "identity",
+      "$order": 50,
+      "type": "string"
+    },
+    "dir": {
+      "$section": "identity",
+      "$order": 60,
+      "type": "string",
+      "enum": ["ltr", "rtl", "auto"]
+    },
+    "slot": {
+      "$section": "identity",
+      "$order": 70,
+      "type": "string"
+    },
+    "slot-name": {
+      "$attr": "name",
+      "$section": "identity",
+      "$order": 75,
+      "type": "string",
+      "$label": "Slot Name",
+      "$elements": ["slot"]
+    },
+    "part": {
+      "$section": "identity",
+      "$order": 80,
+      "type": "string"
+    },
+    "href": {
+      "$section": "link",
+      "$order": 10,
+      "type": "string",
+      "$elements": ["a", "area", "link"]
+    },
+    "target": {
+      "$section": "link",
+      "$order": 20,
+      "type": "string",
+      "$elements": ["a", "area", "form"],
+      "enum": ["_self", "_blank", "_parent", "_top"]
+    },
+    "rel": {
+      "$section": "link",
+      "$order": 30,
+      "type": "string",
+      "$elements": ["a", "area", "link"]
+    },
+    "download": {
+      "$section": "link",
+      "$order": 40,
+      "type": "string",
+      "$elements": ["a", "area"]
+    },
+    "src": {
+      "$section": "media",
+      "$order": 10,
+      "$input": "media",
+      "type": "string",
+      "$elements": ["img", "script", "iframe", "video", "audio", "source", "embed", "input"]
+    },
+    "alt": {
+      "$section": "media",
+      "$order": 20,
+      "type": "string",
+      "$elements": ["img", "input", "area"]
+    },
+    "width": {
+      "$section": "media",
+      "$order": 30,
+      "type": "string",
+      "$elements": ["img", "video", "iframe", "canvas", "embed", "object"]
+    },
+    "height": {
+      "$section": "media",
+      "$order": 40,
+      "type": "string",
+      "$elements": ["img", "video", "iframe", "canvas", "embed", "object"]
+    },
+    "loading": {
+      "$section": "media",
+      "$order": 50,
+      "type": "string",
+      "$elements": ["img", "iframe"],
+      "enum": ["lazy", "eager"]
+    },
+    "srcset": {
+      "$section": "media",
+      "$order": 60,
+      "type": "string",
+      "$elements": ["img", "source"]
+    },
+    "sizes": {
+      "$section": "media",
+      "$order": 70,
+      "type": "string",
+      "$elements": ["img", "source"]
+    },
+    "poster": {
+      "$section": "media",
+      "$order": 80,
+      "type": "string",
+      "$elements": ["video"]
+    },
+    "controls": {
+      "$section": "media",
+      "$order": 90,
+      "type": "boolean",
+      "$elements": ["video", "audio"]
+    },
+    "autoplay": {
+      "$section": "media",
+      "$order": 100,
+      "type": "boolean",
+      "$elements": ["video", "audio"]
+    },
+    "loop": {
+      "$section": "media",
+      "$order": 110,
+      "type": "boolean",
+      "$elements": ["video", "audio"]
+    },
+    "muted": {
+      "$section": "media",
+      "$order": 120,
+      "type": "boolean",
+      "$elements": ["video", "audio"]
+    },
+    "type": {
+      "$section": "form",
+      "$order": 5,
+      "type": "string",
+      "$elements": ["input", "button"],
+      "enum": [
+        "text",
+        "password",
+        "email",
+        "number",
+        "tel",
+        "url",
+        "search",
+        "date",
+        "time",
+        "datetime-local",
+        "month",
+        "week",
+        "color",
+        "range",
+        "file",
+        "checkbox",
+        "radio",
+        "hidden",
+        "submit",
+        "reset",
+        "button"
+      ]
+    },
+    "name": {
+      "$section": "form",
+      "$order": 10,
+      "type": "string",
+      "$elements": ["input", "button", "select", "textarea", "fieldset", "output", "form"]
+    },
+    "value": {
+      "$section": "form",
+      "$order": 20,
+      "type": "string",
+      "$elements": ["input", "button", "option", "li", "meter", "progress"]
+    },
+    "placeholder": {
+      "$section": "form",
+      "$order": 30,
+      "type": "string",
+      "$elements": ["input", "textarea"]
+    },
+    "disabled": {
+      "$section": "form",
+      "$order": 40,
+      "type": "boolean",
+      "$elements": ["input", "button", "select", "textarea", "fieldset"]
+    },
+    "required": {
+      "$section": "form",
+      "$order": 50,
+      "type": "boolean",
+      "$elements": ["input", "select", "textarea"]
+    },
+    "readonly": {
+      "$section": "form",
+      "$order": 60,
+      "type": "boolean",
+      "$elements": ["input", "textarea"]
+    },
+    "checked": {
+      "$section": "form",
+      "$order": 70,
+      "type": "boolean",
+      "$elements": ["input"]
+    },
+    "multiple": {
+      "$section": "form",
+      "$order": 80,
+      "type": "boolean",
+      "$elements": ["input", "select"]
+    },
+    "min": {
+      "$section": "form",
+      "$order": 90,
+      "type": "string",
+      "$elements": ["input", "meter"]
+    },
+    "max": {
+      "$section": "form",
+      "$order": 100,
+      "type": "string",
+      "$elements": ["input", "meter"]
+    },
+    "step": {
+      "$section": "form",
+      "$order": 110,
+      "type": "string",
+      "$elements": ["input"]
+    },
+    "pattern": {
+      "$section": "form",
+      "$order": 120,
+      "type": "string",
+      "$elements": ["input"]
+    },
+    "maxlength": {
+      "$section": "form",
+      "$order": 130,
+      "type": "string",
+      "$elements": ["input", "textarea"]
+    },
+    "minlength": {
+      "$section": "form",
+      "$order": 140,
+      "type": "string",
+      "$elements": ["input", "textarea"]
+    },
+    "autocomplete": {
+      "$section": "form",
+      "$order": 150,
+      "type": "string",
+      "$elements": ["input", "select", "textarea", "form"],
+      "enum": ["on", "off"]
+    },
+    "action": {
+      "$section": "form",
+      "$order": 160,
+      "type": "string",
+      "$elements": ["form"]
+    },
+    "method": {
+      "$section": "form",
+      "$order": 170,
+      "type": "string",
+      "$elements": ["form"],
+      "enum": ["get", "post", "dialog"]
+    },
+    "for": {
+      "$section": "form",
+      "$order": 180,
+      "type": "string",
+      "$elements": ["label", "output"]
+    },
+    "open": {
+      "$section": "form",
+      "$order": 190,
+      "type": "boolean",
+      "$elements": ["details", "dialog"]
+    },
+    "colspan": {
+      "$section": "table",
+      "$order": 10,
+      "type": "string",
+      "$elements": ["td", "th"]
+    },
+    "rowspan": {
+      "$section": "table",
+      "$order": 20,
+      "type": "string",
+      "$elements": ["td", "th"]
+    },
+    "scope": {
+      "$section": "table",
+      "$order": 30,
+      "type": "string",
+      "$elements": ["th"],
+      "enum": ["row", "col", "rowgroup", "colgroup"]
+    },
+    "role": {
+      "$section": "accessibility",
+      "$order": 10,
+      "type": "string"
+    },
+    "aria-label": {
+      "$section": "accessibility",
+      "$order": 20,
+      "type": "string"
+    },
+    "aria-hidden": {
+      "$section": "accessibility",
+      "$order": 30,
+      "type": "string",
+      "enum": ["true", "false"]
+    },
+    "aria-describedby": {
+      "$section": "accessibility",
+      "$order": 40,
+      "type": "string"
+    },
+    "aria-labelledby": {
+      "$section": "accessibility",
+      "$order": 50,
+      "type": "string"
+    },
+    "aria-live": {
+      "$section": "accessibility",
+      "$order": 60,
+      "type": "string",
+      "enum": ["off", "polite", "assertive"]
+    },
+    "tabindex": {
+      "$section": "accessibility",
+      "$order": 70,
+      "type": "string"
+    }
+  }
+}

package/data/stylebook-meta.json

@@ -0,0 +1,200 @@
+{
+  "$sections": [
+    {
+      "label": "Headings",
+      "elements": [
+        { "tag": "h1", "text": "Code Is Poetry" },
+        { "tag": "h2", "text": "Code Is Poetry" },
+        { "tag": "h3", "text": "Code Is Poetry" },
+        { "tag": "h4", "text": "Code Is Poetry" },
+        { "tag": "h5", "text": "Code Is Poetry" },
+        { "tag": "h6", "text": "Code Is Poetry" }
+      ]
+    },
+    {
+      "label": "Paragraph",
+      "elements": [
+        {
+          "tag": "p",
+          "text": "In a village of La Mancha, the name of which I have no desire to call to mind, there lived not long since one of those gentlemen that keep a lance in the lance-rack, an old buckler, a lean hack, and a greyhound for coursing."
+        }
+      ]
+    },
+    {
+      "label": "List",
+      "elements": [
+        {
+          "tag": "ul",
+          "children": [
+            { "tag": "li", "text": "Alice." },
+            { "tag": "li", "text": "The White Rabbit." },
+            { "tag": "li", "text": "The Cheshire Cat." },
+            { "tag": "li", "text": "The Mad Hatter." },
+            { "tag": "li", "text": "The Queen of Hearts." }
+          ]
+        },
+        {
+          "tag": "ol",
+          "children": [
+            { "tag": "li", "text": "First item" },
+            { "tag": "li", "text": "Second item" },
+            { "tag": "li", "text": "Third item" }
+          ]
+        }
+      ]
+    },
+    {
+      "label": "Quote",
+      "elements": [
+        {
+          "tag": "blockquote",
+          "children": [
+            {
+              "tag": "p",
+              "text": "In quoting others, we cite ourselves.",
+              "style": "font-size:1.25em;font-style:italic"
+            },
+            { "tag": "p", "text": "\u2014 Julio Cortázar" }
+          ]
+        }
+      ]
+    },
+    {
+      "label": "Code",
+      "elements": [
+        {
+          "tag": "pre",
+          "children": [
+            {
+              "tag": "code",
+              "text": "// A \"block\" is the abstract term used\n// to describe units of markup that\n// when composed together, form the\n// content or layout of a page.\nregisterBlockType( name, settings );"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "label": "Inline",
+      "elements": [
+        { "tag": "a", "text": "Visit the documentation", "attributes": { "href": "#" } },
+        { "tag": "strong", "text": "Bold text emphasis" },
+        { "tag": "em", "text": "Italic text emphasis" },
+        { "tag": "small", "text": "Fine print and legal text" },
+        { "tag": "mark", "text": "Highlighted text" },
+        { "tag": "code", "text": "const x = 42;" },
+        { "tag": "abbr", "text": "HTML", "attributes": { "title": "HyperText Markup Language" } },
+        { "tag": "sub", "text": "subscript" },
+        { "tag": "sup", "text": "superscript" }
+      ]
+    },
+    {
+      "label": "Form",
+      "elements": [
+        { "tag": "input", "attributes": { "type": "text", "placeholder": "Enter text\u2026" } },
+        { "tag": "button", "text": "Click Me" },
+        {
+          "tag": "select",
+          "children": [
+            { "tag": "option", "text": "Option 1" },
+            { "tag": "option", "text": "Option 2" },
+            { "tag": "option", "text": "Option 3" }
+          ]
+        },
+        {
+          "tag": "textarea",
+          "attributes": { "placeholder": "Enter longer text\u2026", "rows": "3" }
+        }
+      ]
+    },
+    {
+      "label": "Table",
+      "elements": [
+        {
+          "tag": "table",
+          "children": [
+            {
+              "tag": "thead",
+              "children": [
+                {
+                  "tag": "tr",
+                  "children": [
+                    { "tag": "th", "text": "Name" },
+                    { "tag": "th", "text": "Role" },
+                    { "tag": "th", "text": "Status" }
+                  ]
+                }
+              ]
+            },
+            {
+              "tag": "tbody",
+              "children": [
+                {
+                  "tag": "tr",
+                  "children": [
+                    { "tag": "td", "text": "Alice" },
+                    { "tag": "td", "text": "Developer" },
+                    { "tag": "td", "text": "Active" }
+                  ]
+                },
+                {
+                  "tag": "tr",
+                  "children": [
+                    { "tag": "td", "text": "Bob" },
+                    { "tag": "td", "text": "Designer" },
+                    { "tag": "td", "text": "Away" }
+                  ]
+                },
+                {
+                  "tag": "tr",
+                  "children": [
+                    { "tag": "td", "text": "Carol" },
+                    { "tag": "td", "text": "Manager" },
+                    { "tag": "td", "text": "Active" }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "label": "Interactive",
+      "elements": [
+        {
+          "tag": "details",
+          "attributes": { "open": "" },
+          "children": [
+            { "tag": "summary", "text": "Click to expand details" },
+            {
+              "tag": "p",
+              "text": "Additional detail content revealed when the disclosure widget is toggled open."
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "label": "Media",
+      "elements": [
+        {
+          "tag": "img",
+          "attributes": { "alt": "Placeholder image" },
+          "style": "width:100%;max-width:400px;height:200px;background:#e0e0e0;display:block;border-radius:4px"
+        },
+        {
+          "tag": "video",
+          "attributes": { "controls": "" },
+          "style": "width:100%;max-width:400px;height:200px;background:#e0e0e0;display:block;border-radius:4px"
+        },
+        { "tag": "audio", "attributes": { "controls": "" }, "style": "width:100%" }
+      ]
+    }
+  ],
+  "$variables": {
+    "color": { "label": "Color", "prefix": "--color-", "placeholder": "#007acc" },
+    "font": { "label": "Font", "prefix": "--font-", "placeholder": "system-ui, sans-serif" },
+    "size": { "label": "Size", "prefix": "--size-", "placeholder": "16px" },
+    "other": { "label": "Other", "prefix": "--", "placeholder": "value" }
+  }
+}