@jxsuite/studio 4.1.0 → 5.0.0

package/src/surfaces/doc-header.json

@@ -0,0 +1,739 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "StudioDocHeader",
+  "$description": "The Document Header card (§3.2 ⑧) — the artefact's own header, drawn IN the stage, once per pane. A bar naming the collection and the page's route, 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}",
+    "data-placement": "${state.placement}"
+  },
+  "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 PLACEMENT is an attribute rather than an ancestor class: `.doc-header-host.pinned .doc-header` reached in from the stage's own host, which a scoped style block cannot answer, so the stage's two placements arrive as `data-placement` and the card keys on itself.",
+    "display": "flex",
+    "flexDirection": "column",
+    "padding": "8px 12px 10px",
+    "background": "var(--bg-panel)",
+    "border": "1px solid var(--border)",
+    "borderRadius": "var(--radius)",
+    "fontFamily": "var(--jx-font-sans)",
+    "&[data-placement=\"pinned\"]": {
+      "$description": "Design draws the artboards under a pan/zoom transform, so the card is pinned above the surface at 1:1 rather than sitting in the document's own column. Pinned it is a band, not a box: it spans the stage, so the box's border and radius would draw a card edge across a full-width strip.",
+      "borderWidth": "0 0 1px",
+      "borderRadius": "0"
+    },
+    "& [part=\"bar\"]": {
+      "display": "flex",
+      "alignItems": "baseline",
+      "gap": "8px",
+      "paddingBottom": "6px"
+    },
+    "& [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": "§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 (§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": "§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": "header",
+      "attributes": {
+        "part": "bar"
+      },
+      "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}"
+                      }
+                    ]
+                  }
+                }
+              ]
+            }
+          }
+        }
+      ]
+    }
+  ]
+}