@jxsuite/studio 6.1.2 → 8.0.0

package/src/surfaces/doc-header.json

@@ -1,776 +0,0 @@
-{
-  "$schema": "https://jxsuite.com/schema/v1",
-  "$id": "StudioDocHeader",
-  "$description": "The Document Header card (`docs/studio/editing/frontmatter.md`) — the artefact's own header, drawn IN the stage, docked above Edit's page, once per pane. A bar naming the collection and the page's route that folds the card down to itself, a column of rows, the door to Search appearance and a disclosure listing the raw head tags. ONE row vocabulary: Title, the Layout picker and every schema-driven frontmatter field are the same `row`, discriminated by `kind`, because they differ in what they COMMIT rather than in what they look like — and what they commit is `panels/frontmatter-panel.ts`'s decision, reached by the row's `key`. Nothing here knows what a content collection is, which document it is drawing, or that a page has a route: the flow hands over rows whose every field is already a string and this draws them.",
-  "tagName": "section",
-  "attributes": {
-    "part": "card",
-    "aria-label": "Document header",
-    "data-jx-region": "${state.region}"
-  },
-  "style": {
-    "$description": "The twelve `.doc-header*` rules from `styles/canvas.css` plus the row vocabulary the card used to borrow from `styles/inspector.css` (`.style-row`, `.style-row-label`, `.set-dot`) and `styles/overlays.css` (`.media-picker`, `.media-picker-thumb`). The borrowed ones are TRANSCRIBED rather than shared: the card is a document now and a class it does not emit cannot style it, and the three lit panels that still draw a `.style-row` go on owning those rules until they convert. Every `--spectrum-font-size-*` reference is re-pointed at the kit's scale — a document mounted in a pane's stage is outside `<sp-theme>`, so each of them would silently have taken its hard-coded fallback and stopped following the theme. And the card has ONE shape, because it has one place: Edit docks it above the page's scroller as a band across the pane, so it is a band rather than a box. It keeps only the bottom edge that separates it from the page, because a box's border and radius would draw a card edge across a full-width strip. It used to have two placements, arriving as a `data-placement` the card keyed on, and the band look was the Design one; the attribute was read before the runtime had written it, so the band never drew.",
-    "display": "flex",
-    "flexDirection": "column",
-    "padding": "6px 12px 8px",
-    "background": "var(--bg-panel)",
-    "borderBottom": "1px solid var(--border)",
-    "fontFamily": "var(--jx-font-sans)",
-    "& > [part=\"disclosure\"] > [part=\"details\"] > [part=\"summary\"]": {
-      "$description": "The kit's disclosure, re-dressed as the card's bar. The summary IS the bar now — the caret, then the collection and the route, slotted into the summary's `heading` slot — so folding the card is a click anywhere on the line that names it, and the reader keeps that line when the rows are gone: it is what says the card is there to open again. Pulled out by its own inline padding so the caret's column lines up with the card's edge rather than indenting the bar, and no taller than its text, because the band's whole complaint was height.",
-      "minHeight": "0",
-      "padding": "2px 4px",
-      "margin": "0 -4px"
-    },
-    "& > [part=\"disclosure\"] > [part=\"details\"] > [part=\"summary\"] > [part=\"label\"]": {
-      "$description": "The kit prints its `label` in the summary as well as naming the summary with it. Here the bar's own text — the collection and the route — is what a reader sees, so the label is the accessible name only: `Document fields`, which is what the control discloses.",
-      "display": "none"
-    },
-    "& > [part=\"disclosure\"] > [part=\"details\"] > [part=\"body\"]": {
-      "padding": "4px 0 0"
-    },
-    "& [part=\"bar\"]": {
-      "display": "flex",
-      "alignItems": "baseline",
-      "gap": "8px",
-      "minWidth": "0"
-    },
-    "& [part=\"collection\"]": {
-      "$description": "Which collection this document belongs to, or the word Document when it belongs to none. A label rather than a heading: the card has an `aria-label` of its own and the collection name is a fact about the document, not a section title.",
-      "fontSize": "var(--jx-text-sm)",
-      "fontWeight": "700",
-      "letterSpacing": "0.06em",
-      "textTransform": "uppercase",
-      "color": "var(--fg-dim)"
-    },
-    "& [part=\"route\"]": {
-      "fontFamily": "var(--font-mono, monospace)",
-      "fontSize": "var(--jx-text-sm)",
-      "color": "var(--fg-dim)"
-    },
-    "& [part=\"fields\"]": {
-      "display": "flex",
-      "flexDirection": "column",
-      "gap": "2px"
-    },
-    "& [part=\"row\"]": {
-      "$description": "studio-ui-guidelines.md §4.1's standard form row, stacked: the label sits above a control that takes the whole width. `min-width: 0` is what keeps it honest at a narrow stage (studio-ui-guidelines.md §4.6) — a field refuses to shrink below its own min-content without it, and the card is drawn inside a pane that can be half a window wide.",
-      "display": "flex",
-      "flexDirection": "column",
-      "alignItems": "stretch",
-      "gap": "2px",
-      "padding": "2px 0",
-      "minWidth": "0"
-    },
-    "& [part=\"row-label\"]": {
-      "display": "flex",
-      "alignItems": "center",
-      "gap": "4px",
-      "fontSize": "var(--jx-text-xs)",
-      "color": "var(--fg-dim)"
-    },
-    "& [part=\"chip\"]": {
-      "$description": "studio-ui-guidelines.md §4.2's set dot: a 6px accent dot, drawn only where the value is set here, that clears the value when it is pressed. It is a real `button` — it is pressable, and it is the row's only keyboard route to clearing — stripped of the chrome a button brings with it so the row still reads as a label with a dot beside it.",
-      "width": "6px",
-      "height": "6px",
-      "padding": "0",
-      "border": "none",
-      "borderRadius": "50%",
-      "background": "var(--accent)",
-      "cursor": "pointer",
-      "flexShrink": "0"
-    },
-    "& [part=\"chip\"]:hover": {
-      "background": "var(--danger)"
-    },
-    "& [part=\"row-name\"]": {
-      "$description": "The visible label, and it is `aria-hidden` in the markup: every control in the row carries the same words as its own accessible name, so a label node in the tree as well would have each field announced twice. That is the trade the kit's naming makes — a control names itself — and it is also why this row needs no minted ids, which two panes drawing two cards would otherwise have to keep apart.",
-      "overflow": "hidden",
-      "textOverflow": "ellipsis",
-      "whiteSpace": "nowrap"
-    },
-    "& [part=\"note\"]": {
-      "$description": "What the row could not find out — the entries of a referenced collection that is empty, or the reason listing it failed. A sentence under the control, in the row's own label size, so it reads as part of the field rather than as an error banner.",
-      "margin": "0",
-      "fontSize": "var(--jx-text-xs)",
-      "color": "var(--fg-dim)"
-    },
-    "& [part=\"media\"]": {
-      "display": "flex",
-      "alignItems": "center",
-      "gap": "4px",
-      "minWidth": "0"
-    },
-    "& [part=\"media\"] [part=\"widget\"]": {
-      "flex": "1",
-      "minWidth": "0"
-    },
-    "& [part=\"thumb\"]": {
-      "width": "24px",
-      "height": "24px",
-      "objectFit": "cover",
-      "borderRadius": "var(--radius)",
-      "border": "1px solid var(--border)",
-      "flexShrink": "0"
-    },
-    "& [part=\"seo\"]": {
-      "$description": "The door to Search appearance. It sits where the SEO disclosure used to, above Raw head tags — the same place in the reading order, one line instead of a block that could grow taller than the document it describes.",
-      "display": "flex",
-      "padding": "2px 0"
-    },
-    "& [part=\"raw\"] [part=\"summary\"]": {
-      "padding": "4px 0",
-      "fontSize": "var(--jx-text-sm)",
-      "color": "var(--fg-dim)"
-    },
-    "& [part=\"raw\"] [part=\"summary\"]:hover": {
-      "color": "var(--fg)"
-    },
-    "& [part=\"raw\"] [part=\"body\"]": {
-      "padding": "0"
-    },
-    "& [part=\"raw-empty\"]": {
-      "margin": "0",
-      "padding": "4px 0",
-      "fontSize": "var(--jx-text-sm)",
-      "color": "var(--fg-dim)"
-    },
-    "& [part=\"raw-list\"]": {
-      "display": "flex",
-      "flexDirection": "column",
-      "gap": "2px",
-      "margin": "0",
-      "padding": "0",
-      "listStyle": "none"
-    },
-    "& [part=\"raw-item\"]": {
-      "display": "flex",
-      "gap": "8px",
-      "minWidth": "0",
-      "fontSize": "var(--jx-text-sm)"
-    },
-    "& [part=\"raw-value\"]": {
-      "overflow": "hidden",
-      "textOverflow": "ellipsis",
-      "whiteSpace": "nowrap",
-      "color": "var(--fg-dim)"
-    }
-  },
-  "children": [
-    {
-      "tagName": "jx-accordion-item",
-      "attributes": {
-        "part": "disclosure"
-      },
-      "$props": {
-        "label": "Document fields",
-        "open": {
-          "$ref": "#/state/expanded"
-        }
-      },
-      "ontoggle": {
-        "$prototype": "Function",
-        "body": [
-          {
-            "operator": "call",
-            "target": {
-              "$ref": "#/state/setExpanded"
-            },
-            "value": [
-              {
-                "$ref": "event#/detail"
-              }
-            ]
-          }
-        ]
-      },
-      "children": [
-        {
-          "tagName": "span",
-          "attributes": {
-            "part": "bar",
-            "slot": "heading"
-          },
-          "children": [
-            {
-              "tagName": "span",
-              "attributes": {
-                "part": "collection"
-              },
-              "textContent": "${state.collection}"
-            },
-            {
-              "tagName": "div",
-              "attributes": {
-                "part": "route-slot",
-                "role": "none"
-              },
-              "style": {
-                "display": "contents"
-              },
-              "$switch": {
-                "$ref": "#/state/hasRoute"
-              },
-              "cases": {
-                "true": {
-                  "tagName": "code",
-                  "attributes": {
-                    "part": "route",
-                    "title": "This page's route"
-                  },
-                  "textContent": "${state.route}"
-                }
-              }
-            }
-          ]
-        },
-        {
-          "tagName": "div",
-          "attributes": {
-            "part": "fields"
-          },
-          "children": [
-            {
-              "$prototype": "Array",
-              "items": {
-                "$ref": "#/state/rows"
-              },
-              "key": {
-                "$ref": "$map/item/key"
-              },
-              "map": {
-                "tagName": "div",
-                "attributes": {
-                  "part": "row",
-                  "data-prop": "${$map.item.prop}"
-                },
-                "children": [
-                  {
-                    "tagName": "div",
-                    "attributes": {
-                      "part": "row-label"
-                    },
-                    "children": [
-                      {
-                        "tagName": "div",
-                        "attributes": {
-                          "part": "chip-slot",
-                          "role": "none"
-                        },
-                        "style": {
-                          "display": "contents"
-                        },
-                        "$switch": {
-                          "$ref": "$map/item/isSet"
-                        },
-                        "cases": {
-                          "true": {
-                            "tagName": "button",
-                            "attributes": {
-                              "part": "chip",
-                              "type": "button",
-                              "title": "${$map.item.clearLabel}",
-                              "aria-label": "${$map.item.clearLabel}"
-                            },
-                            "onclick": {
-                              "$prototype": "Function",
-                              "body": [
-                                {
-                                  "operator": "call",
-                                  "target": {
-                                    "$ref": "#/state/clear"
-                                  },
-                                  "value": [
-                                    {
-                                      "$ref": "$map/item/key"
-                                    }
-                                  ]
-                                }
-                              ]
-                            }
-                          }
-                        }
-                      },
-                      {
-                        "tagName": "span",
-                        "attributes": {
-                          "part": "row-name",
-                          "aria-hidden": "true"
-                        },
-                        "textContent": "${$map.item.label}"
-                      }
-                    ]
-                  },
-                  {
-                    "tagName": "div",
-                    "attributes": {
-                      "part": "widget-slot",
-                      "role": "none"
-                    },
-                    "style": {
-                      "display": "contents"
-                    },
-                    "$switch": {
-                      "$ref": "$map/item/kind"
-                    },
-                    "cases": {
-                      "text": {
-                        "tagName": "jx-textfield",
-                        "attributes": {
-                          "part": "widget"
-                        },
-                        "$props": {
-                          "size": "sm",
-                          "label": "${$map.item.label}",
-                          "placeholder": {
-                            "$ref": "$map/item/placeholder"
-                          },
-                          "value": {
-                            "$ref": "$map/item/value"
-                          }
-                        },
-                        "oninput": {
-                          "$prototype": "Function",
-                          "body": [
-                            {
-                              "operator": "call",
-                              "target": {
-                                "$ref": "#/state/editText"
-                              },
-                              "value": [
-                                {
-                                  "$ref": "$map/item/key"
-                                },
-                                {
-                                  "$ref": "event#/target/value"
-                                }
-                              ]
-                            }
-                          ]
-                        },
-                        "onchange": {
-                          "$prototype": "Function",
-                          "body": [
-                            {
-                              "operator": "call",
-                              "target": {
-                                "$ref": "#/state/commitText"
-                              },
-                              "value": [
-                                {
-                                  "$ref": "$map/item/key"
-                                },
-                                {
-                                  "$ref": "event#/target/value"
-                                }
-                              ]
-                            }
-                          ]
-                        }
-                      },
-                      "number": {
-                        "tagName": "jx-number-field",
-                        "attributes": {
-                          "part": "widget"
-                        },
-                        "$props": {
-                          "size": "sm",
-                          "label": "${$map.item.label}",
-                          "value": {
-                            "$ref": "$map/item/value"
-                          }
-                        },
-                        "onchange": {
-                          "$prototype": "Function",
-                          "body": [
-                            {
-                              "operator": "call",
-                              "target": {
-                                "$ref": "#/state/setNumber"
-                              },
-                              "value": [
-                                {
-                                  "$ref": "$map/item/key"
-                                },
-                                {
-                                  "$ref": "event#/target/value"
-                                }
-                              ]
-                            }
-                          ]
-                        }
-                      },
-                      "boolean": {
-                        "tagName": "jx-checkbox",
-                        "attributes": {
-                          "part": "widget"
-                        },
-                        "$props": {
-                          "size": "sm",
-                          "label": "${$map.item.label}",
-                          "checked": {
-                            "$ref": "$map/item/checked"
-                          }
-                        },
-                        "onchange": {
-                          "$prototype": "Function",
-                          "body": [
-                            {
-                              "operator": "call",
-                              "target": {
-                                "$ref": "#/state/setBoolean"
-                              },
-                              "value": [
-                                {
-                                  "$ref": "$map/item/key"
-                                },
-                                {
-                                  "$ref": "event#/target/checked"
-                                }
-                              ]
-                            }
-                          ]
-                        }
-                      },
-                      "select": {
-                        "tagName": "jx-select",
-                        "attributes": {
-                          "part": "widget"
-                        },
-                        "$props": {
-                          "size": "sm",
-                          "label": "${$map.item.label}",
-                          "options": {
-                            "$ref": "$map/item/options"
-                          },
-                          "value": {
-                            "$ref": "$map/item/value"
-                          }
-                        },
-                        "onchange": {
-                          "$prototype": "Function",
-                          "body": [
-                            {
-                              "operator": "call",
-                              "target": {
-                                "$ref": "#/state/setChoice"
-                              },
-                              "value": [
-                                {
-                                  "$ref": "$map/item/key"
-                                },
-                                {
-                                  "$ref": "event#/target/value"
-                                }
-                              ]
-                            }
-                          ]
-                        }
-                      },
-                      "media": {
-                        "tagName": "div",
-                        "attributes": {
-                          "part": "media"
-                        },
-                        "children": [
-                          {
-                            "tagName": "div",
-                            "attributes": {
-                              "part": "thumb-slot",
-                              "role": "none"
-                            },
-                            "style": {
-                              "display": "contents"
-                            },
-                            "$switch": {
-                              "$ref": "$map/item/hasThumb"
-                            },
-                            "cases": {
-                              "true": {
-                                "tagName": "img",
-                                "attributes": {
-                                  "part": "thumb",
-                                  "src": "${$map.item.thumb}",
-                                  "alt": ""
-                                }
-                              }
-                            }
-                          },
-                          {
-                            "tagName": "jx-textfield",
-                            "attributes": {
-                              "part": "widget"
-                            },
-                            "$props": {
-                              "size": "sm",
-                              "label": "${$map.item.label}",
-                              "placeholder": "/image.jpg",
-                              "value": {
-                                "$ref": "$map/item/value"
-                              }
-                            },
-                            "oninput": {
-                              "$prototype": "Function",
-                              "body": [
-                                {
-                                  "operator": "call",
-                                  "target": {
-                                    "$ref": "#/state/editText"
-                                  },
-                                  "value": [
-                                    {
-                                      "$ref": "$map/item/key"
-                                    },
-                                    {
-                                      "$ref": "event#/target/value"
-                                    }
-                                  ]
-                                }
-                              ]
-                            },
-                            "onchange": {
-                              "$prototype": "Function",
-                              "body": [
-                                {
-                                  "operator": "call",
-                                  "target": {
-                                    "$ref": "#/state/commitText"
-                                  },
-                                  "value": [
-                                    {
-                                      "$ref": "$map/item/key"
-                                    },
-                                    {
-                                      "$ref": "event#/target/value"
-                                    }
-                                  ]
-                                }
-                              ]
-                            }
-                          },
-                          {
-                            "tagName": "jx-action-button",
-                            "attributes": {
-                              "part": "upload"
-                            },
-                            "$props": {
-                              "size": "sm",
-                              "quiet": true,
-                              "icon": "upload-simple",
-                              "label": "Upload media",
-                              "hint": "Upload media"
-                            },
-                            "onclick": {
-                              "$prototype": "Function",
-                              "body": [
-                                {
-                                  "operator": "call",
-                                  "target": {
-                                    "$ref": "#/state/upload"
-                                  },
-                                  "value": [
-                                    {
-                                      "$ref": "$map/item/key"
-                                    }
-                                  ]
-                                }
-                              ]
-                            }
-                          },
-                          {
-                            "tagName": "jx-action-button",
-                            "attributes": {
-                              "part": "browse"
-                            },
-                            "$props": {
-                              "size": "sm",
-                              "quiet": true,
-                              "icon": "image",
-                              "label": "Browse media",
-                              "hint": "Browse media"
-                            },
-                            "onclick": {
-                              "$prototype": "Function",
-                              "body": [
-                                {
-                                  "operator": "call",
-                                  "target": {
-                                    "$ref": "#/state/browse"
-                                  },
-                                  "value": [
-                                    {
-                                      "$ref": "$map/item/key"
-                                    },
-                                    {
-                                      "$ref": "event#/currentTarget"
-                                    }
-                                  ]
-                                }
-                              ]
-                            }
-                          }
-                        ]
-                      }
-                    }
-                  },
-                  {
-                    "tagName": "div",
-                    "attributes": {
-                      "part": "note-slot",
-                      "role": "none"
-                    },
-                    "style": {
-                      "display": "contents"
-                    },
-                    "$switch": {
-                      "$ref": "$map/item/hasNote"
-                    },
-                    "cases": {
-                      "true": {
-                        "tagName": "p",
-                        "attributes": {
-                          "part": "note"
-                        },
-                        "textContent": "${$map.item.note}"
-                      }
-                    }
-                  }
-                ]
-              }
-            }
-          ]
-        },
-        {
-          "tagName": "div",
-          "attributes": {
-            "part": "seo"
-          },
-          "children": [
-            {
-              "tagName": "jx-action-button",
-              "attributes": {
-                "part": "seo-button"
-              },
-              "$props": {
-                "size": "sm",
-                "quiet": true,
-                "icon": "magnifying-glass",
-                "label": "Search appearance"
-              },
-              "onclick": {
-                "$prototype": "Function",
-                "body": [
-                  {
-                    "operator": "call",
-                    "target": {
-                      "$ref": "#/state/openSeo"
-                    },
-                    "value": []
-                  }
-                ]
-              },
-              "children": [
-                {
-                  "tagName": "span",
-                  "textContent": "Search appearance…"
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "tagName": "jx-accordion-item",
-          "attributes": {
-            "part": "raw"
-          },
-          "$props": {
-            "label": "Raw head tags",
-            "open": {
-              "$ref": "#/state/rawOpen"
-            }
-          },
-          "ontoggle": {
-            "$prototype": "Function",
-            "body": [
-              {
-                "operator": "call",
-                "target": {
-                  "$ref": "#/state/setRawOpen"
-                },
-                "value": [
-                  {
-                    "$ref": "event#/detail"
-                  }
-                ]
-              }
-            ]
-          },
-          "children": [
-            {
-              "tagName": "div",
-              "attributes": {
-                "part": "raw-slot",
-                "role": "none"
-              },
-              "style": {
-                "display": "contents"
-              },
-              "$switch": {
-                "$ref": "#/state/rawState"
-              },
-              "cases": {
-                "empty": {
-                  "tagName": "p",
-                  "attributes": {
-                    "part": "raw-empty"
-                  },
-                  "textContent": "No custom head tags on this document."
-                },
-                "list": {
-                  "tagName": "ul",
-                  "attributes": {
-                    "part": "raw-list"
-                  },
-                  "children": [
-                    {
-                      "$prototype": "Array",
-                      "items": {
-                        "$ref": "#/state/rawEntries"
-                      },
-                      "key": {
-                        "$ref": "$map/item/key"
-                      },
-                      "map": {
-                        "tagName": "li",
-                        "attributes": {
-                          "part": "raw-item"
-                        },
-                        "children": [
-                          {
-                            "tagName": "code",
-                            "attributes": {
-                              "part": "raw-key"
-                            },
-                            "textContent": "${$map.item.label}"
-                          },
-                          {
-                            "tagName": "span",
-                            "attributes": {
-                              "part": "raw-value",
-                              "title": "${$map.item.value}"
-                            },
-                            "textContent": "${$map.item.value}"
-                          }
-                        ]
-                      }
-                    }
-                  ]
-                }
-              }
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}