@janga/norna 0.7.9 → 0.7.11

package/examples/feature-demos/media-and-surfaces/node_modules/.vite/deps/ui-library-Cd35oAvo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-library-Cd35oAvo.js","names":["sizes","styles","styles","styles","styles","styles","styles"],"sources":["../../../../../../node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/badge.js","../../../../../../node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/button.js","../../../../../../node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/card.js","../../../../../../node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/highlight.js","../../../../../../node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/icon.js","../../../../../../node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/radio-checkbox.js","../../../../../../node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/select.js","../../../../../../node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/toggle.js","../../../../../../node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/tooltip.js"],"sourcesContent":["import { settings } from \"../settings.js\";\nconst sizes = [\"small\", \"large\"];\nconst styles = [\"purple\", \"gray\", \"red\", \"green\", \"yellow\", \"blue\"];\nclass DevToolbarBadge extends HTMLElement {\n  _size = \"small\";\n  _badgeStyle = \"purple\";\n  get size() {\n    return this._size;\n  }\n  set size(value) {\n    if (!sizes.includes(value)) {\n      settings.logger.error(\n        `Invalid size: ${value}, expected one of ${sizes.join(\", \")}, got ${value}.`\n      );\n      return;\n    }\n    this._size = value;\n    this.updateStyle();\n  }\n  get badgeStyle() {\n    return this._badgeStyle;\n  }\n  set badgeStyle(value) {\n    if (!styles.includes(value)) {\n      settings.logger.error(\n        `Invalid style: ${value}, expected one of ${styles.join(\", \")}, got ${value}.`\n      );\n      return;\n    }\n    this._badgeStyle = value;\n    this.updateStyle();\n  }\n  shadowRoot;\n  static observedAttributes = [\"badge-style\", \"size\"];\n  constructor() {\n    super();\n    this.shadowRoot = this.attachShadow({ mode: \"open\" });\n    this.shadowRoot.innerHTML = `\n\t\t\t<style>\n\t\t\t\t.badge {\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t\tborder-radius: 4px;\n\t\t\t\t\tborder: 1px solid transparent;\n\t\t\t\t\tpadding: 8px;\n\t\t\t\t\tfont-size: 12px;\n\t\t\t\t\tcolor: var(--text-color);\n\t\t\t\t\theight: var(--size);\n\t\t\t\t\tborder: 1px solid var(--border-color);\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\talign-items: center;\n\t\t\t\t\tjustify-content: center;\n\t\t\t\t\tfont-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n\n\t\t\t\t\t--purple-text: rgba(224, 204, 250, 1);\n\t\t\t\t\t--purple-border: rgba(113, 24, 226, 1);\n\n\t\t\t\t\t--gray-text: rgba(191, 193, 201, 1);\n\t\t\t\t\t--gray-border:rgba(191, 193, 201, 1);\n\n\t\t\t\t\t--red-text: rgba(249, 196, 215, 1);\n\t\t\t\t\t--red-border: rgba(179, 62, 102, 1);\n\n\t\t\t\t\t--green-text: rgba(213, 249, 196, 1);\n\t\t\t\t\t--green-border: rgba(61, 125, 31, 1);\n\n\t\t\t\t\t--yellow-text: rgba(249, 233, 196, 1);\n\t\t\t\t\t--yellow-border: rgba(181, 138, 45, 1);\n\n\t\t\t\t\t--blue-text: rgba(189, 195, 255, 1);\n\t\t\t\t\t--blue-border: rgba(54, 69, 217, 1);\n\n\t\t\t\t\t--large: 24px;\n\t\t\t\t\t--small: 20px;\n\t\t\t\t}\n\t\t\t</style>\n\t\t\t<style id=\"selected-style\"></style>\n\n\t\t\t<div class=\"badge\">\n\t\t\t\t<slot></slot>\n\t\t\t</div>\n\t\t\t`;\n  }\n  connectedCallback() {\n    this.updateStyle();\n  }\n  attributeChangedCallback() {\n    if (this.hasAttribute(\"badge-style\"))\n      this.badgeStyle = this.getAttribute(\"badge-style\");\n    if (this.hasAttribute(\"size\")) this.size = this.getAttribute(\"size\");\n  }\n  updateStyle() {\n    const style = this.shadowRoot.querySelector(\"#selected-style\");\n    if (style) {\n      style.innerHTML = `\n\t\t\t.badge {\n\t\t\t\t--text-color: var(--${this.badgeStyle}-text);\n\t\t\t\t--border-color: var(--${this.badgeStyle}-border);\n\t\t\t\t--size: var(--${this.size});\n\t\t\t}`;\n    }\n  }\n}\nexport {\n  DevToolbarBadge\n};\n","import { settings } from \"../settings.js\";\nconst sizes = [\"small\", \"medium\", \"large\"];\nconst styles = [\"ghost\", \"outline\", \"purple\", \"gray\", \"red\", \"green\", \"yellow\", \"blue\"];\nconst borderRadii = [\"normal\", \"rounded\"];\nclass DevToolbarButton extends HTMLElement {\n  _size = \"small\";\n  _buttonStyle = \"purple\";\n  _buttonBorderRadius = \"normal\";\n  get size() {\n    return this._size;\n  }\n  set size(value) {\n    if (!sizes.includes(value)) {\n      settings.logger.error(\n        `Invalid size: ${value}, expected one of ${sizes.join(\", \")}, got ${value}.`\n      );\n      return;\n    }\n    this._size = value;\n    this.updateStyle();\n  }\n  get buttonStyle() {\n    return this._buttonStyle;\n  }\n  set buttonStyle(value) {\n    if (!styles.includes(value)) {\n      settings.logger.error(\n        `Invalid style: ${value}, expected one of ${styles.join(\", \")}, got ${value}.`\n      );\n      return;\n    }\n    this._buttonStyle = value;\n    this.updateStyle();\n  }\n  get buttonBorderRadius() {\n    return this._buttonBorderRadius;\n  }\n  set buttonBorderRadius(value) {\n    if (!borderRadii.includes(value)) {\n      settings.logger.error(\n        `Invalid border-radius: ${value}, expected one of ${borderRadii.join(\", \")}, got ${value}.`\n      );\n      return;\n    }\n    this._buttonBorderRadius = value;\n    this.updateStyle();\n  }\n  static observedAttributes = [\"button-style\", \"size\", \"button-border-radius\"];\n  shadowRoot;\n  constructor() {\n    super();\n    this.shadowRoot = this.attachShadow({ mode: \"open\" });\n    this.shadowRoot.innerHTML = `\n\t\t\t<style>\n\t\t\t\tbutton {\n\t\t\t\t\t--purple-background: rgba(113, 24, 226, 1);\n\t\t\t\t\t--purple-border: rgba(224, 204, 250, 0.33);\n\t\t\t\t\t--purple-text: #fff;\n\n\t\t\t\t\t--gray-background: rgba(52, 56, 65, 1);\n\t\t\t\t\t--gray-border: rgba(71, 78, 94, 1);\n\t\t\t\t\t--gray-text: #fff;\n\n\t\t\t\t\t--red-background: rgba(179, 62, 102, 1);\n\t\t\t\t\t--red-border: rgba(249, 196, 215, 0.33);\n\t\t\t\t\t--red-text: #fff;\n\n\t\t\t\t\t--green-background: rgba(213, 249, 196, 1);\n\t\t\t\t\t--green-border: rgba(61, 125, 31, 1);\n\t\t\t\t\t--green-text: #000;\n\n\t\t\t\t\t--yellow-background: rgba(255, 236, 179, 1);\n\t\t\t\t\t--yellow-border: rgba(255, 191, 0, 1);\n\t\t\t\t\t--yellow-text: #000;\n\n\t\t\t\t\t--blue-background: rgba(54, 69, 217, 1);\n\t\t\t\t\t--blue-border: rgba(189, 195, 255, 1);\n\t\t\t\t\t--blue-text: #fff;\n\n\t\t\t\t\t--outline-background: transparent;\n\t\t\t\t\t--outline-border: #fff;\n\t\t\t\t\t--outline-text: #fff;\n\n\t\t\t\t\t--ghost-background: transparent;\n\t\t\t\t\t--ghost-border: transparent;\n\t\t\t\t\t--ghost-text: #fff;\n\n\t\t\t\t\t--large-font-size: 16px;\n\t\t\t\t\t--medium-font-size: 14px;\n\t\t\t\t\t--small-font-size: 12px;\n\n\t\t\t\t\t--large-padding: 12px 16px;\n\t\t\t\t\t--large-rounded-padding: 12px 12px;\n\t\t\t\t\t--medium-padding: 8px 12px;\n\t\t\t\t\t--medium-rounded-padding: 8px 8px;\n\t\t\t\t\t--small-padding: 4px 8px;\n\t\t\t\t\t--small-rounded-padding: 4px 4px;\n\n\t\t\t\t\t--normal-border-radius: 4px;\n\t\t\t\t\t--rounded-border-radius: 9999px;\n\n\t\t\t\t\tborder: 1px solid var(--border);\n\t\t\t\t\tpadding: var(--padding);\n\t\t\t\t\tfont-size: var(--font-size);\n\t\t\t\t\tbackground: var(--background);\n\n\t\t\t\t\tcolor: var(--text-color);\n\t\t\t\t\tborder-radius: var(--border-radius);\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\talign-items: center;\n\t\t\t\t\tjustify-content: center;\n\t\t\t\t}\n\n\t\t\t\tbutton:hover {\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t}\n\n\t\t\t\t::slotted(astro-dev-toolbar-icon) {\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\theight: 1em;\n\t\t\t\t\twidth: 1em;\n\t\t\t\t\tmargin-left: 0.5em;\n\t\t\t\t}\n\t\t\t</style>\n\t\t\t<style id=\"selected-style\"></style>\n\n\t\t\t<button>\n\t\t\t\t<slot></slot>\n\t\t\t</button>\n\t\t`;\n  }\n  connectedCallback() {\n    this.updateStyle();\n  }\n  updateStyle() {\n    const style = this.shadowRoot.querySelector(\"#selected-style\");\n    if (style) {\n      style.innerHTML = `\n\t\t\tbutton {\n\t\t\t\t--background: var(--${this.buttonStyle}-background);\n\t\t\t\t--border: var(--${this.buttonStyle}-border);\n\t\t\t\t--font-size: var(--${this.size}-font-size);\n\t\t\t\t--text-color: var(--${this.buttonStyle}-text);\n\t\t\t\t${this.buttonBorderRadius === \"normal\" ? \"--padding: var(--\" + this.size + \"-padding);\" : \"--padding: var(--\" + this.size + \"-rounded-padding);\"}\n\t\t\t\t--border-radius: var(--${this.buttonBorderRadius}-border-radius);\n\t\t\t}`;\n    }\n  }\n  attributeChangedCallback() {\n    if (this.hasAttribute(\"size\")) this.size = this.getAttribute(\"size\");\n    if (this.hasAttribute(\"button-style\"))\n      this.buttonStyle = this.getAttribute(\"button-style\");\n  }\n}\nexport {\n  DevToolbarButton\n};\n","import { settings } from \"../settings.js\";\nconst styles = [\"purple\", \"gray\", \"red\", \"green\", \"yellow\", \"blue\"];\nclass DevToolbarCard extends HTMLElement {\n  link;\n  clickAction;\n  shadowRoot;\n  _cardStyle = \"purple\";\n  get cardStyle() {\n    return this._cardStyle;\n  }\n  set cardStyle(value) {\n    if (!styles.includes(value)) {\n      settings.logger.error(\n        `Invalid style: ${value}, expected one of ${styles.join(\", \")}, got ${value}.`\n      );\n      return;\n    }\n    this._cardStyle = value;\n    this.updateStyle();\n  }\n  static observedAttributes = [\"card-style\"];\n  constructor() {\n    super();\n    this.shadowRoot = this.attachShadow({ mode: \"open\" });\n    this.link = this.getAttribute(\"link\");\n  }\n  attributeChangedCallback() {\n    if (this.hasAttribute(\"card-style\"))\n      this.cardStyle = this.getAttribute(\"card-style\");\n    this.updateStyle();\n  }\n  updateStyle() {\n    const style = this.shadowRoot.querySelector(\"#selected-style\");\n    if (style) {\n      style.innerHTML = `\n\t\t\t\t:host {\n\t\t\t\t\t--hover-background: var(--${this.cardStyle}-hover-background);\n\t\t\t\t\t--hover-border: var(--${this.cardStyle}-hover-border);\n\t\t\t\t}\n\t\t\t`;\n    }\n  }\n  connectedCallback() {\n    const element = this.link ? \"a\" : this.clickAction ? \"button\" : \"div\";\n    this.shadowRoot.innerHTML += `\n\t\t\t<style>\n\t\t\t\t:host {\n\t\t\t\t\t--purple-hover-background: rgba(136, 58, 234, 0.33);\n\t\t\t\t\t--purple-hover-border: 1px solid rgba(113, 24, 226, 1);\n\n\t\t\t\t\t--gray-hover-background: rgba(191, 193, 201, 0.33);\n\t\t\t\t\t--gray-hover-border: 1px solid rgba(191, 193, 201, 1);\n\n\t\t\t\t\t--red-hover-background: rgba(249, 196, 215, 0.33);\n\t\t\t\t\t--red-hover-border: 1px solid rgba(179, 62, 102, 1);\n\n\t\t\t\t\t--green-hover-background: rgba(213, 249, 196, 0.33);\n\t\t\t\t\t--green-hover-border: 1px solid rgba(61, 125, 31, 1);\n\n\t\t\t\t\t--yellow-hover-background: rgba(255, 236, 179, 0.33);\n\t\t\t\t\t--yellow-hover-border: 1px solid rgba(255, 191, 0, 1);\n\n\t\t\t\t\t--blue-hover-background: rgba(189, 195, 255, 0.33);\n\t\t\t\t\t--blue-hover-border: 1px solid rgba(54, 69, 217, 1);\n\t\t\t\t}\n\n\t\t\t\t:host>a, :host>button, :host>div {\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t\tpadding: 16px;\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tborder-radius: 8px;\n\t\t\t\t\tborder: 1px solid rgba(35, 38, 45, 1);\n\t\t\t\t\tcolor: rgba(191, 193, 201, 1);\n\t\t\t\t\ttext-decoration: none;\n\t\t\t\t\tbackground-color: #13151A;\n\t\t\t\t\tbox-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.10), 0px 4px 4px 0px rgba(0, 0, 0, 0.09), 0px 10px 6px 0px rgba(0, 0, 0, 0.05), 0px 17px 7px 0px rgba(0, 0, 0, 0.01), 0px 26px 7px 0px rgba(0, 0, 0, 0.00);\n\t\t\t\t\twidth: 100%;\n    \t\t\theight: 100%;\n\t\t\t\t}\n\n\t\t\t\th1, h2, h3, h4, h5, h6 {\n\t\t\t\t\tcolor: #fff;\n\t\t\t\t\tfont-weight: 600;\n\t\t\t\t}\n\n\t\t\t\ta:hover, button:hover {\n\t\t\t\t\tbackground: var(--hover-background);\n\t\t\t\t\tborder: var(--hover-border);\n\t\t\t\t}\n\n\t\t\t\tsvg {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tmargin: 0 auto;\n\t\t\t\t}\n\n\t\t\t\tspan {\n\t\t\t\t\tmargin-top: 8px;\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\ttext-align: center;\n\t\t\t\t}\n\t\t\t</style>\n\t\t\t<style id=\"selected-style\"></style>\n\n\t\t\t<${element}${this.link ? ` href=\"${this.link}\" target=\"_blank\"` : ``} id=\"astro-overlay-card\">\n\t\t\t\t<slot />\n\t\t\t</${element}>\n\t\t`;\n    this.updateStyle();\n    if (this.clickAction) {\n      this.shadowRoot.getElementById(\"astro-overlay-card\")?.addEventListener(\"click\", this.clickAction);\n    }\n  }\n}\nexport {\n  DevToolbarCard\n};\n","import { settings } from \"../settings.js\";\nimport { getIconElement, isDefinedIcon } from \"./icons.js\";\nconst styles = [\"purple\", \"gray\", \"red\", \"green\", \"yellow\", \"blue\"];\nclass DevToolbarHighlight extends HTMLElement {\n  icon;\n  _highlightStyle = \"purple\";\n  get highlightStyle() {\n    return this._highlightStyle;\n  }\n  set highlightStyle(value) {\n    if (!styles.includes(value)) {\n      settings.logger.error(\n        `Invalid style: ${value}, expected one of ${styles.join(\", \")}, got ${value}.`\n      );\n      return;\n    }\n    this._highlightStyle = value;\n    this.updateStyle();\n  }\n  static observedAttributes = [\"highlight-style\"];\n  shadowRoot;\n  constructor() {\n    super();\n    this.shadowRoot = this.attachShadow({ mode: \"open\" });\n    this.icon = this.hasAttribute(\"icon\") ? this.getAttribute(\"icon\") : void 0;\n    this.shadowRoot.innerHTML = `\n\t\t\t<style>\n\t\t\t\t:host {\n\t\t\t\t\t--purple-background: linear-gradient(180deg, rgba(224, 204, 250, 0.33) 0%, rgba(224, 204, 250, 0.0825) 100%);\n\t\t\t\t\t--purple-border: 1px solid rgba(113, 24, 226, 1);\n\n\t\t\t\t\t--gray-background: linear-gradient(180deg, rgba(191, 193, 201, 0.33) 0%, rgba(191, 193, 201, 0.0825) 100%);\n\t\t\t\t\t--gray-border: 1px solid rgba(191, 193, 201, 1);\n\n\t\t\t\t\t--red-background: linear-gradient(180deg, rgba(249, 196, 215, 0.33) 0%, rgba(249, 196, 215, 0.0825) 100%);\n\t\t\t\t\t--red-border: 1px solid rgba(179, 62, 102, 1);\n\n\t\t\t\t\t--green-background: linear-gradient(180deg, rgba(213, 249, 196, 0.33) 0%, rgba(213, 249, 196, 0.0825) 100%);\n\t\t\t\t\t--green-border: 1px solid rgba(61, 125, 31, 1);\n\n\t\t\t\t\t--yellow-background: linear-gradient(180deg, rgba(255, 236, 179, 0.33) 0%, rgba(255, 236, 179, 0.0825) 100%);\n\t\t\t\t\t--yellow-border: 1px solid rgba(181, 138, 45, 1);\n\n\t\t\t\t\t--blue-background: linear-gradient(180deg, rgba(189, 195, 255, 0.33) 0%, rgba(189, 195, 255, 0.0825) 100%);\n\t\t\t\t\t--blue-border: 1px solid rgba(54, 69, 217, 1);\n\n\t\t\t\t\tborder-radius: 4px;\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\theight: 100%;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tz-index: 2000000000;\n\n\t\t\t\t\tbackground: var(--background);\n\t\t\t\t\tborder: var(--border);\n\t\t\t\t}\n\n\t\t\t\t.icon {\n\t\t\t\t\twidth: 24px;\n\t\t\t\t\theight: 24px;\n\t\t\t\t\tcolor: white;\n\t\t\t\t\tbackground: linear-gradient(0deg, #B33E66, #B33E66), linear-gradient(0deg, #351722, #351722);\n\t\t\t\t\tborder: 1px solid rgba(53, 23, 34, 1);\n\t\t\t\t\tborder-radius: 9999px;\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tjustify-content: center;\n\t\t\t\t\talign-items: center;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\ttop: -15px;\n\t\t\t\t\tright: -15px;\n\t\t\t\t}\n\t\t\t</style>\n\t\t\t<style id=\"selected-style\"></style>\n\t\t`;\n  }\n  updateStyle() {\n    const style = this.shadowRoot.querySelector(\"#selected-style\");\n    if (style) {\n      style.innerHTML = `\n\t\t\t:host {\n\t\t\t\t--background: var(--${this.highlightStyle}-background);\n\t\t\t\t--border: var(--${this.highlightStyle}-border);\n\t\t\t}`;\n    }\n  }\n  attributeChangedCallback() {\n    if (this.hasAttribute(\"highlight-style\"))\n      this.highlightStyle = this.getAttribute(\"highlight-style\");\n  }\n  connectedCallback() {\n    this.updateStyle();\n    if (this.icon) {\n      let iconContainer = document.createElement(\"div\");\n      iconContainer.classList.add(\"icon\");\n      let iconElement;\n      if (isDefinedIcon(this.icon)) {\n        iconElement = getIconElement(this.icon);\n      } else {\n        iconElement = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\n        iconElement.setAttribute(\"viewBox\", \"0 0 16 16\");\n        iconElement.innerHTML = this.icon;\n      }\n      if (iconElement) {\n        iconElement?.style.setProperty(\"width\", \"16px\");\n        iconElement?.style.setProperty(\"height\", \"16px\");\n        iconContainer.append(iconElement);\n        this.shadowRoot.append(iconContainer);\n      }\n    }\n  }\n}\nexport {\n  DevToolbarHighlight\n};\n","import { getIconElement, isDefinedIcon } from \"./icons.js\";\nclass DevToolbarIcon extends HTMLElement {\n  _icon = void 0;\n  shadowRoot;\n  get icon() {\n    return this._icon;\n  }\n  set icon(name) {\n    this._icon = name;\n    this.buildTemplate();\n  }\n  constructor() {\n    super();\n    this.shadowRoot = this.attachShadow({ mode: \"open\" });\n    if (this.hasAttribute(\"icon\")) {\n      this.icon = this.getAttribute(\"icon\");\n    } else {\n      this.buildTemplate();\n    }\n  }\n  getIconHTML(icon) {\n    if (icon && isDefinedIcon(icon)) {\n      return getIconElement(icon)?.outerHTML ?? \"\";\n    }\n    return \"<slot />\";\n  }\n  buildTemplate() {\n    this.shadowRoot.innerHTML = `\n\t\t\t<style>\n\t\t\t\tsvg {\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\theight: 100%;\n\t\t\t\t}\n\n\t\t\t\t@media (forced-colors: active) {\n\t\t\t\t\tsvg path[fill=\"#fff\"] {\n\t\t\t\t\t\tfill: black;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</style>\n${this.getIconHTML(this._icon)}`;\n  }\n}\nexport {\n  DevToolbarIcon\n};\n","const styles = [\"purple\", \"gray\", \"red\", \"green\", \"yellow\", \"blue\"];\nclass DevToolbarRadioCheckbox extends HTMLElement {\n  _radioStyle = \"purple\";\n  input;\n  shadowRoot;\n  get radioStyle() {\n    return this._radioStyle;\n  }\n  set radioStyle(value) {\n    if (!styles.includes(value)) {\n      console.error(`Invalid style: ${value}, expected one of ${styles.join(\", \")}.`);\n      return;\n    }\n    this._radioStyle = value;\n    this.updateStyle();\n  }\n  static observedAttributes = [\"radio-style\", \"checked\", \"disabled\", \"name\", \"value\"];\n  constructor() {\n    super();\n    this.shadowRoot = this.attachShadow({ mode: \"open\" });\n    this.shadowRoot.innerHTML = `\n\t\t<style>\n\t\t\t:host {\n\t\t\t\t--purple-unchecked: rgba(224, 204, 250, 0.33);\n\t\t\t\t--purple-checked: rgba(224, 204, 250, 1);\n\n\t\t\t\t--gray-unchecked: rgba(191, 193, 201, 0.33);\n\t\t\t\t--gray-checked: rgba(191, 193, 201, 1);\n\n\t\t\t\t--red-unchecked: rgba(249, 196, 215, 0.33);\n\t\t\t\t--red-checked: rgba(179, 62, 102, 1);\n\n\t\t\t\t--green-unchecked: rgba(213, 249, 196, 0.33);\n\t\t\t\t--green-checked: rgba(61, 125, 31, 1);\n\n\t\t\t\t--yellow-unchecked: rgba(255, 236, 179, 0.33);\n\t\t\t\t--yellow-checked: rgba(181, 138, 45, 1);\n\n\t\t\t\t--blue-unchecked: rgba(189, 195, 255, 0.33);\n\t\t\t\t--blue-checked: rgba(54, 69, 217, 1);\n\t\t\t}\n\n\t\t\tinput[type=\"radio\"] {\n\t\t\t\tappearance: none;\n\t\t\t\t-webkit-appearance: none;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-content: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tborder: 2px solid var(--unchecked-color);\n\t\t\t\tborder-radius: 9999px;\n\t\t\t\twidth: 16px;\n\t\t\t\theight: 16px;\n\t\t\t}\n\n\t\t\tinput[type=\"radio\"]::before {\n\t\t\t\tcontent: \"\";\n\t\t\t\tbackground-color: var(--checked-color);\n\t\t\t\twidth: 8px;\n\t\t\t\theight: 8px;\n\t\t\t\tborder-radius: 9999px;\n\t\t\t\tvisibility: hidden;\n\t\t\t\tmargin: 2px;\n\t\t\t}\n\n\t\t\tinput[type=\"radio\"]:checked {\n\t\t\t\tborder-color: var(--checked-color);\n\t\t\t}\n\n\t\t\tinput[type=\"radio\"]:checked::before {\n\t\t\t\tvisibility: visible;\n\t\t\t}\n\t\t</style>\n\t\t<style id=\"selected-style\"></style>\n\t\t`;\n    this.input = document.createElement(\"input\");\n    this.input.type = \"radio\";\n    this.shadowRoot.append(this.input);\n  }\n  connectedCallback() {\n    this.updateInputState();\n    this.updateStyle();\n  }\n  updateStyle() {\n    const styleElement = this.shadowRoot.querySelector(\"#selected-style\");\n    if (styleElement) {\n      styleElement.innerHTML = `\n\t\t\t\t:host {\n\t\t\t\t\t--unchecked-color: var(--${this._radioStyle}-unchecked);\n\t\t\t\t\t--checked-color: var(--${this._radioStyle}-checked);\n\t\t\t\t}\n\t\t\t`;\n    }\n  }\n  updateInputState() {\n    this.input.checked = this.hasAttribute(\"checked\");\n    this.input.disabled = this.hasAttribute(\"disabled\");\n    this.input.name = this.getAttribute(\"name\") || \"\";\n    this.input.value = this.getAttribute(\"value\") || \"\";\n  }\n  attributeChangedCallback() {\n    if (this.hasAttribute(\"radio-style\")) {\n      this.radioStyle = this.getAttribute(\"radio-style\");\n    }\n    this.updateInputState();\n  }\n}\nexport {\n  DevToolbarRadioCheckbox\n};\n","import { settings } from \"../settings.js\";\nconst styles = [\"purple\", \"gray\", \"red\", \"green\", \"yellow\", \"blue\"];\nclass DevToolbarSelect extends HTMLElement {\n  shadowRoot;\n  element;\n  _selectStyle = \"gray\";\n  get selectStyle() {\n    return this._selectStyle;\n  }\n  set selectStyle(value) {\n    if (!styles.includes(value)) {\n      settings.logger.error(`Invalid style: ${value}, expected one of ${styles.join(\", \")}.`);\n      return;\n    }\n    this._selectStyle = value;\n    this.updateStyle();\n  }\n  static observedAttributes = [\"select-style\"];\n  constructor() {\n    super();\n    this.shadowRoot = this.attachShadow({ mode: \"open\" });\n    this.shadowRoot.innerHTML = `\n      <style>\n        :host {\n          --purple-text: rgba(224, 204, 250, 1);\n\t\t\t\t\t--purple-border: rgba(113, 24, 226, 1);\n\n          --gray-text: rgba(191, 193, 201, 1);\n\t\t\t\t\t--gray-border:rgba(191, 193, 201, 1);\n\n\t\t\t\t\t--red-text: rgba(249, 196, 215, 1);\n\t\t\t\t\t--red-border: rgba(179, 62, 102, 1);\n\n\t\t\t\t\t--green-text: rgba(213, 249, 196, 1);\n\t\t\t\t\t--green-border: rgba(61, 125, 31, 1);\n\n\t\t\t\t\t--yellow-text: rgba(249, 233, 196, 1);\n\t\t\t\t\t--yellow-border: rgba(181, 138, 45, 1);\n\n\t\t\t\t\t--blue-text: rgba(189, 195, 255, 1);\n\t\t\t\t\t--blue-border: rgba(54, 69, 217, 1);\n\n          --text-color: var(--gray-text);\n          --border-color: var(--gray-border);\n        }\n        select {\n          appearance: none;\n          text-align-last: center;\n          display: inline-block;\n          font-family: system-ui, sans-serif;\n          font-size: 14px;\n          padding: 4px 24px 4px 8px;\n          border: 1px solid var(--border-color);\n          border-radius: 4px;\n          color: var(--text-color);\n          background-color: transparent;\n          background-image:\n            linear-gradient(45deg, transparent 50%, var(--text-color) 50%),\n            linear-gradient(135deg, var(--text-color) 50%, transparent 50%);\n          background-position:\n            calc(100% - 12px) calc(1em - 2px),\n            calc(100% - 8px) calc(1em - 2px);\n          background-size: 4px 4px;\n          background-repeat: no-repeat;\n        }\n      </style>\n      <style id=\"selected-style\"></style>\n      <slot></slot>\n    `;\n    this.element = document.createElement(\"select\");\n    this.shadowRoot.addEventListener(\"slotchange\", (event) => {\n      if (event.target instanceof HTMLSlotElement) {\n        this.element.append(...event.target.assignedNodes());\n      }\n    });\n  }\n  connectedCallback() {\n    this.element.name = \"dev-toolbar-select\";\n    this.shadowRoot.append(this.element);\n    this.updateStyle();\n  }\n  attributeChangedCallback() {\n    if (this.hasAttribute(\"select-style\")) {\n      this.selectStyle = this.getAttribute(\"select-style\");\n    }\n  }\n  updateStyle() {\n    const style = this.shadowRoot.querySelector(\"#selected-style\");\n    if (style) {\n      style.innerHTML = `\n        :host {\n          --text-color: var(--${this.selectStyle}-text);\n          --border-color: var(--${this.selectStyle}-border);\n        }\n      `;\n    }\n  }\n}\nexport {\n  DevToolbarSelect\n};\n","import { settings } from \"../settings.js\";\nconst styles = [\"purple\", \"gray\", \"red\", \"green\", \"yellow\", \"blue\"];\nclass DevToolbarToggle extends HTMLElement {\n  shadowRoot;\n  input;\n  _toggleStyle = \"gray\";\n  get toggleStyle() {\n    return this._toggleStyle;\n  }\n  set toggleStyle(value) {\n    if (!styles.includes(value)) {\n      settings.logger.error(`Invalid style: ${value}, expected one of ${styles.join(\", \")}.`);\n      return;\n    }\n    this._toggleStyle = value;\n    this.updateStyle();\n  }\n  static observedAttributes = [\"toggle-style\"];\n  constructor() {\n    super();\n    this.shadowRoot = this.attachShadow({ mode: \"open\" });\n    this.shadowRoot.innerHTML = `\n\t\t<style>\n\t\t\t:host {\n\t\t\t\t--purple-bg-on: rgba(113, 24, 226, 1);\n\t\t\t\t--purple-border-off: rgba(113, 24, 226, 1);\n\t\t\t\t--purple-border-on: rgba(224, 204, 250, 1);\n\n\t\t\t\t--gray-bg-on: rgba(61, 125, 31, 1);\n\t\t\t\t--gray-border-off: rgba(145, 152, 173, 1);\n\t\t\t\t--gray-border-on: rgba(213, 249, 196, 1);\n\n\t\t\t\t--red-bg-on: rgba(179, 62, 102, 1);\n\t\t\t\t--red-border-off: rgba(179, 62, 102, 1);\n\t\t\t\t--red-border-on: rgba(249, 196, 215, 1);\n\n\t\t\t\t--green-bg-on: rgba(61, 125, 31, 1);\n\t\t\t\t--green-border-off: rgba(61, 125, 31, 1);\n\t\t\t\t--green-border-on: rgba(213, 249, 196, 1);\n\n\t\t\t\t--yellow-bg-on: rgba(181, 138, 45, 1);\n\t\t\t\t--yellow-border-off: rgba(181, 138, 45, 1);\n\t\t\t\t--yellow-border-on: rgba(255, 236, 179, 1);\n\n\t\t\t\t--blue-bg-on: rgba(54, 69, 217, 1);\n\t\t\t\t--blue-border-off: rgba(54, 69, 217, 1);\n\t\t\t\t--blue-border-on: rgba(189, 195, 255, 1);\n\t\t\t}\n\n\t\t\tinput {\n\t\t\t\tappearance: none;\n\t\t\t\twidth: 32px;\n\t\t\t\theight: 20px;\n\t\t\t\tborder: 1px solid var(--border-off);\n\t\t\t\ttransition: background-color 0.2s ease, border-color 0.2s ease;\n\t\t\t\tborder-radius: 9999px;\n\t\t\t}\n\n\t\t\tinput::after {\n\t\t\t\tcontent: '';\n\t\t\t\twidth: 16px;\n\t\t\t\tdisplay: inline-block;\n\t\t\t\theight: 16px;\n\t\t\t\tbackground-color: var(--border-off);\n\t\t\t\tborder-radius: 9999px;\n\t\t\t\ttransition: transform 0.2s ease, background-color 0.2s ease;\n\t\t\t\ttop: 1px;\n\t\t\t\tleft: 1px;\n\t\t\t\tposition: relative;\n\t\t\t}\n\n\t\t\t@media (forced-colors: active) {\n\t\t\t\tinput::after {\n\t\t\t\t\tborder: 1px solid black;\n\t\t\t\t\ttop: 0px;\n\t\t\t\t\tleft: 0px;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tinput:checked {\n\t\t\t\tborder: 1px solid var(--border-on);\n\t\t\t\tbackground-color: var(--bg-on);\n\t\t\t}\n\n\t\t\tinput:checked::after {\n\t\t\t\ttransform: translateX(12px);\n\t\t\t\tbackground: var(--border-on);\n\t\t\t}\n\t\t</style>\n\t\t<style id=\"selected-style\"></style>\n\t\t`;\n    this.input = document.createElement(\"input\");\n  }\n  attributeChangedCallback() {\n    if (this.hasAttribute(\"toggle-style\"))\n      this.toggleStyle = this.getAttribute(\"toggle-style\");\n  }\n  updateStyle() {\n    const style = this.shadowRoot.querySelector(\"#selected-style\");\n    if (style) {\n      style.innerHTML = `\n\t\t\t:host {\n\t\t\t\t--bg-on: var(--${this.toggleStyle}-bg-on);\n\t\t\t\t--border-off: var(--${this.toggleStyle}-border-off);\n\t\t\t\t--border-on: var(--${this.toggleStyle}-border-on);\n\t\t\t}\n\t\t`;\n    }\n  }\n  connectedCallback() {\n    this.input.type = \"checkbox\";\n    this.input.name = \"dev-toolbar-toggle\";\n    this.shadowRoot.append(this.input);\n    this.updateStyle();\n  }\n  get value() {\n    return this.input.value;\n  }\n  set value(val) {\n    this.input.value = val;\n  }\n}\nexport {\n  DevToolbarToggle\n};\n","import { getIconElement, isDefinedIcon } from \"./icons.js\";\nclass DevToolbarTooltip extends HTMLElement {\n  sections = [];\n  shadowRoot;\n  constructor() {\n    super();\n    this.shadowRoot = this.attachShadow({ mode: \"open\" });\n  }\n  connectedCallback() {\n    this.shadowRoot.innerHTML = `\n\t\t\t<style>\n\t\t\t:host {\n\t\t\t\tposition: absolute;\n\t\t\t\tdisplay: none;\n\t\t\t\tcolor: white;\n\t\t\t\tbackground: linear-gradient(0deg, #310A65, #310A65), linear-gradient(0deg, #7118E2, #7118E2);\n\t\t\t\tborder: 1px solid rgba(113, 24, 226, 1);\n\t\t\t\tborder-radius: 4px;\n\t\t\t\tpadding: 0;\n\t\t\t\tfont-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n\t\t\t\tfont-size: 14px;\n\t\t\t\tmargin: 0;\n\t\t\t\tz-index: 2000000001;\n\t\t\t\tmax-width: 45ch;\n\t\t\t\twidth: fit-content;\n\t\t\t\tmin-width: 30ch;\n\t\t\t\tbox-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.30), 0px 1px 2px 0px rgba(0, 0, 0, 0.29), 0px 4px 4px 0px rgba(0, 0, 0, 0.26), 0px 10px 6px 0px rgba(0, 0, 0, 0.15), 0px 17px 7px 0px rgba(0, 0, 0, 0.04), 0px 26px 7px 0px rgba(0, 0, 0, 0.01);\n\t\t\t}\n\n\t\t\t:host([data-show=\"true\"]) {\n\t\t\t\tdisplay: block;\n\t\t\t}\n\n\t\t\tsvg {\n\t\t\t\tvertical-align: bottom;\n\t\t\t\tmargin-inline-end: 4px;\n\t\t\t}\n\n\t\t\thr {\n\t\t\t\tborder: 1px solid rgba(136, 58, 234, 0.33);\n\t\t\t\tpadding: 0;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\tsection {\n\t\t\t\tpadding: 8px;\n\t\t\t}\n\n\t\t\t.section-content {\n\t\t\t\tmax-height: 250px;\n    \t\toverflow-y: auto;\n\t\t\t}\n\n\t\t\t.modal-title {\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: space-between;\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t.modal-main-title {\n\t\t\t\tfont-weight: bold;\n\t\t\t}\n\n\t\t\t.modal-title + div {\n\t\t\t\tmargin-top: 8px;\n\t\t\t}\n\n\t\t\t.modal-cta {\n\t\t\t\tdisplay: block;\n\t\t\t\tfont-weight: bold;\n\t\t\t\tfont-size: 0.9em;\n\t\t\t}\n\n\t\t\t.clickable-section {\n\t\t\t\tbackground: rgba(113, 24, 226, 1);\n\t\t\t\tpadding: 8px;\n\t\t\t\tborder: 0;\n\t\t\t\tcolor: white;\n\t\t\t\tfont-family: system-ui, sans-serif;\n\t\t\t\ttext-align: left;\n\t\t\t\tline-height: 1.2;\n\t\t\t\twhite-space: nowrap;\n\t\t\t\ttext-decoration: none;\n\t\t\t\tmargin: 0;\n\t\t\t\twidth: 100%;\n\t\t\t}\n\n\t\t\t.clickable-section:hover {\n\t\t\t\tcursor: pointer;\n\t\t\t}\n\n\t\t\tpre, code {\n\t\t\t\tbackground: rgb(78, 27, 145);\n\t\t\t\tfont-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n\t\t\t\tborder-radius: 2px;\n\t\t\t\tfont-size: 14px;\n\t\t\t\tpadding: 2px;\n\t\t\t}\n\t\t\tpre {\n\t\t\t\tpadding: 1em;\n\t\t\t\tmargin: 0 0;\n\t\t\t\toverflow: auto;\n\t\t\t}\n\t\t\t`;\n    const fragment = new DocumentFragment();\n    this.sections.forEach((section, index) => {\n      const sectionElement = section.clickAction ? document.createElement(\"button\") : document.createElement(\"section\");\n      if (section.clickAction) {\n        sectionElement.classList.add(\"clickable-section\");\n        sectionElement.addEventListener(\"click\", async () => {\n          await section.clickAction();\n        });\n      }\n      sectionElement.innerHTML = `\n\t\t\t\t${section.title ? `<div class=\"modal-title\"><span class=\"modal-main-title\">\n\t\t\t\t\t\t${section.icon ? this.getElementForIcon(section.icon) : \"\"}${section.title}</span>${section.inlineTitle ?? \"\"}</div>` : \"\"}\n\t\t\t\t${section.content ? `<div class=\"section-content\">${section.content}</div>` : \"\"}\n\t\t\t\t${section.clickDescription ? `<span class=\"modal-cta\">${section.clickDescription}</span>` : \"\"}\n\t\t\t`;\n      fragment.append(sectionElement);\n      if (index < this.sections.length - 1) {\n        fragment.append(document.createElement(\"hr\"));\n      }\n    });\n    this.shadowRoot.append(fragment);\n  }\n  getElementForIcon(icon) {\n    let iconElement;\n    if (isDefinedIcon(icon)) {\n      iconElement = getIconElement(icon);\n    } else {\n      iconElement = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\n      iconElement.setAttribute(\"viewBox\", \"0 0 16 16\");\n      iconElement.innerHTML = icon;\n    }\n    iconElement?.style.setProperty(\"width\", \"16px\");\n    iconElement?.style.setProperty(\"height\", \"16px\");\n    return iconElement?.outerHTML ?? \"\";\n  }\n}\nexport {\n  DevToolbarTooltip\n};\n"],"x_google_ignoreList":[0,1,2,3,4,5,6,7,8],"mappings":"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"}

package/examples/feature-demos/media-and-surfaces/node_modules/.vite/deps/window-vo3A6TMn.js

@@ -0,0 +1,32 @@
+import { t as settings } from "./astro_runtime_client_dev-toolbar_entrypoint__js.js";
+//#region ../../../node_modules/astro/dist/runtime/client/dev-toolbar/apps/utils/window.js
+function createWindowElement(content, placement = settings.config.placement) {
+	const windowElement = document.createElement("astro-dev-toolbar-window");
+	windowElement.innerHTML = content;
+	windowElement.placement = placement;
+	return windowElement;
+}
+function closeOnOutsideClick(eventTarget, additionalCheck) {
+	function onPageClick(event) {
+		const target = event.target;
+		if (!target) return;
+		if (!target.closest) return;
+		if (target.closest("astro-dev-toolbar")) return;
+		if (additionalCheck && additionalCheck(target)) return;
+		eventTarget.dispatchEvent(new CustomEvent("toggle-app", { detail: { state: false } }));
+	}
+	eventTarget.addEventListener("app-toggled", (event) => {
+		if (event.detail.state === true) document.addEventListener("click", onPageClick, true);
+		else document.removeEventListener("click", onPageClick, true);
+	});
+}
+function synchronizePlacementOnUpdate(eventTarget, canvas) {
+	eventTarget.addEventListener("placement-updated", (evt) => {
+		if (!(evt instanceof CustomEvent)) return;
+		const windowElement = canvas.querySelector("astro-dev-toolbar-window");
+		if (!windowElement) return;
+		windowElement.placement = evt.detail.placement;
+	});
+}
+//#endregion
+export { createWindowElement as n, synchronizePlacementOnUpdate as r, closeOnOutsideClick as t };

package/examples/feature-demos/media-and-surfaces/node_modules/.vite/deps/window-vo3A6TMn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"window-vo3A6TMn.js","names":["event"],"sources":["../../../../../../node_modules/astro/dist/runtime/client/dev-toolbar/apps/utils/window.js"],"sourcesContent":["import { settings } from \"../../settings.js\";\nfunction createWindowElement(content, placement = settings.config.placement) {\n  const windowElement = document.createElement(\"astro-dev-toolbar-window\");\n  windowElement.innerHTML = content;\n  windowElement.placement = placement;\n  return windowElement;\n}\nfunction closeOnOutsideClick(eventTarget, additionalCheck) {\n  function onPageClick(event) {\n    const target = event.target;\n    if (!target) return;\n    if (!target.closest) return;\n    if (target.closest(\"astro-dev-toolbar\")) return;\n    if (additionalCheck && additionalCheck(target)) return;\n    eventTarget.dispatchEvent(\n      new CustomEvent(\"toggle-app\", {\n        detail: {\n          state: false\n        }\n      })\n    );\n  }\n  eventTarget.addEventListener(\"app-toggled\", (event) => {\n    if (event.detail.state === true) {\n      document.addEventListener(\"click\", onPageClick, true);\n    } else {\n      document.removeEventListener(\"click\", onPageClick, true);\n    }\n  });\n}\nfunction synchronizePlacementOnUpdate(eventTarget, canvas) {\n  eventTarget.addEventListener(\"placement-updated\", (evt) => {\n    if (!(evt instanceof CustomEvent)) {\n      return;\n    }\n    const windowElement = canvas.querySelector(\"astro-dev-toolbar-window\");\n    if (!windowElement) {\n      return;\n    }\n    const event = evt;\n    windowElement.placement = event.detail.placement;\n  });\n}\nexport {\n  closeOnOutsideClick,\n  createWindowElement,\n  synchronizePlacementOnUpdate\n};\n"],"x_google_ignoreList":[0],"mappings":";;AACA,SAAS,oBAAoB,SAAS,YAAY,SAAS,OAAO,WAAW;CAC3E,MAAM,gBAAgB,SAAS,cAAc,0BAA0B;CACvE,cAAc,YAAY;CAC1B,cAAc,YAAY;CAC1B,OAAO;AACT;AACA,SAAS,oBAAoB,aAAa,iBAAiB;CACzD,SAAS,YAAY,OAAO;EAC1B,MAAM,SAAS,MAAM;EACrB,IAAI,CAAC,QAAQ;EACb,IAAI,CAAC,OAAO,SAAS;EACrB,IAAI,OAAO,QAAQ,mBAAmB,GAAG;EACzC,IAAI,mBAAmB,gBAAgB,MAAM,GAAG;EAChD,YAAY,cACV,IAAI,YAAY,cAAc,EAC5B,QAAQ,EACN,OAAO,MACT,EACF,CAAC,CACH;CACF;CACA,YAAY,iBAAiB,gBAAgB,UAAU;EACrD,IAAI,MAAM,OAAO,UAAU,MACzB,SAAS,iBAAiB,SAAS,aAAa,IAAI;OAEpD,SAAS,oBAAoB,SAAS,aAAa,IAAI;CAE3D,CAAC;AACH;AACA,SAAS,6BAA6B,aAAa,QAAQ;CACzD,YAAY,iBAAiB,sBAAsB,QAAQ;EACzD,IAAI,EAAE,eAAe,cACnB;EAEF,MAAM,gBAAgB,OAAO,cAAc,0BAA0B;EACrE,IAAI,CAAC,eACH;EAGF,cAAc,YAAYA,IAAM,OAAO;CACzC,CAAC;AACH"}

package/examples/feature-demos/media-and-surfaces/node_modules/.vite/deps/xray-DwhzGckb.js

@@ -0,0 +1,111 @@
+import { escape } from "./astro_n_html-escaper.js";
+import { n as createWindowElement, r as synchronizePlacementOnUpdate, t as closeOnOutsideClick } from "./window-vo3A6TMn.js";
+import { i as positionHighlight, n as createHighlight, r as getElementsPositionInDocument, t as attachTooltipToHighlight } from "./highlight-BLtvqtzO.js";
+//#region ../../../node_modules/astro/dist/runtime/client/dev-toolbar/apps/xray.js
+var xray_default = {
+	id: "astro:xray",
+	name: "Inspect",
+	icon: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path fill=\"#fff\" d=\"M7.9 1.5v-.4a1.1 1.1 0 0 1 2.2 0v.4a1.1 1.1 0 1 1-2.2 0Zm-6.4 8.6a1.1 1.1 0 1 0 0-2.2h-.4a1.1 1.1 0 0 0 0 2.2h.4ZM12 3.7a1.1 1.1 0 0 0 1.4-.7l.4-1.1a1.1 1.1 0 0 0-2.1-.8l-.4 1.2a1.1 1.1 0 0 0 .7 1.4Zm-9.7 7.6-1.2.4a1.1 1.1 0 1 0 .8 2.1l1-.4a1.1 1.1 0 1 0-.6-2ZM20.8 17a1.9 1.9 0 0 1 0 2.6l-1.2 1.2a1.9 1.9 0 0 1-2.6 0l-4.3-4.2-1.6 3.6a1.9 1.9 0 0 1-1.7 1.2A1.9 1.9 0 0 1 7.5 20L2.7 5a1.9 1.9 0 0 1 2.4-2.4l15 5a1.9 1.9 0 0 1 .2 3.4l-3.7 1.6 4.2 4.3ZM19 18.3 14.6 14a1.9 1.9 0 0 1 .6-3l3.2-1.5L5.1 5.1l4.3 13.3 1.5-3.2a1.9 1.9 0 0 1 3-.6l4.4 4.4.7-.7Z\"/></svg>",
+	init(canvas, eventTarget) {
+		let islandsOverlays = [];
+		addIslandsOverlay();
+		document.addEventListener("astro:after-swap", addIslandsOverlay);
+		document.addEventListener("astro:page-load", refreshIslandsOverlayPositions);
+		closeOnOutsideClick(eventTarget);
+		synchronizePlacementOnUpdate(eventTarget, canvas);
+		function addIslandsOverlay() {
+			islandsOverlays.forEach(({ highlightElement }) => {
+				highlightElement.remove();
+			});
+			islandsOverlays = [];
+			const islands = document.querySelectorAll("astro-island");
+			if (islands.length === 0) {
+				const window2 = createWindowElement(`<style>
+						header {
+							display: flex;
+						}
+
+						h1 {
+							display: flex;
+							align-items: center;
+							gap: 8px;
+							font-weight: 600;
+							color: #fff;
+							margin: 0;
+							font-size: 22px;
+						}
+
+						astro-dev-toolbar-icon {
+							width: 1em;
+						   height: 1em;
+						   padding: 8px;
+							display: block;
+							background: #5f9ea0;
+							border-radius: 9999px;
+						}
+					</style>
+					<header>
+						<h1><astro-dev-toolbar-icon icon="lightbulb"></astro-dev-toolbar-icon>No islands detected.</h1>
+					</header>
+					<p>
+						It looks like there are no interactive component islands on this page. Did you forget to add a client directive to your interactive UI component?
+					</p>
+					`);
+				canvas.append(window2);
+				return;
+			}
+			islands.forEach((island) => {
+				const computedStyle = window.getComputedStyle(island);
+				const islandElement = island.children[0] || island;
+				if (islandElement.offsetParent === null || computedStyle.display === "none") return;
+				const highlight = createHighlight(islandElement.getBoundingClientRect());
+				const tooltip = buildIslandTooltip(island);
+				const { isFixed } = getElementsPositionInDocument(islandElement);
+				if (isFixed) tooltip.style.position = highlight.style.position = "fixed";
+				attachTooltipToHighlight(highlight, tooltip, islandElement);
+				canvas.append(highlight);
+				islandsOverlays.push({
+					highlightElement: highlight,
+					island: islandElement
+				});
+			});
+			["scroll", "resize"].forEach((event) => {
+				window.addEventListener(event, refreshIslandsOverlayPositions);
+			});
+		}
+		function refreshIslandsOverlayPositions() {
+			islandsOverlays.forEach(({ highlightElement, island: islandElement }) => {
+				positionHighlight(highlightElement, islandElement.getBoundingClientRect());
+			});
+		}
+		function buildIslandTooltip(island) {
+			const tooltip = document.createElement("astro-dev-toolbar-tooltip");
+			tooltip.sections = [];
+			const islandProps = island.getAttribute("props") ? JSON.parse(island.getAttribute("props")) : {};
+			const islandClientDirective = island.getAttribute("client");
+			if (islandClientDirective) tooltip.sections.push({
+				title: "Client directive",
+				inlineTitle: `<code>client:${islandClientDirective}</code>`
+			});
+			const islandPropsEntries = Object.entries(islandProps).filter((prop) => !prop[0].startsWith("data-astro-cid-"));
+			if (islandPropsEntries.length > 0) {
+				const stringifiedProps = JSON.stringify(Object.fromEntries(islandPropsEntries.map((prop) => [prop[0], prop[1][1]])), void 0, 2);
+				tooltip.sections.push({
+					title: "Props",
+					content: `<pre><code>${escape(stringifiedProps)}</code></pre>`
+				});
+			}
+			const islandComponentPath = island.getAttribute("component-url");
+			if (islandComponentPath) tooltip.sections.push({
+				content: islandComponentPath,
+				clickDescription: "Click to go to file",
+				async clickAction() {
+					await fetch("/__open-in-editor?file=" + encodeURIComponent(window.__astro_dev_toolbar__.root + islandComponentPath.slice(1)));
+				}
+			});
+			return tooltip;
+		}
+	}
+};
+//#endregion
+export { xray_default as default };

package/examples/feature-demos/media-and-surfaces/node_modules/.vite/deps/xray-DwhzGckb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xray-DwhzGckb.js","names":["escapeHTML"],"sources":["../../../../../../node_modules/astro/dist/runtime/client/dev-toolbar/apps/xray.js"],"sourcesContent":["import { escape as escapeHTML } from \"html-escaper\";\nimport {\n  attachTooltipToHighlight,\n  createHighlight,\n  getElementsPositionInDocument,\n  positionHighlight\n} from \"./utils/highlight.js\";\nimport {\n  closeOnOutsideClick,\n  createWindowElement,\n  synchronizePlacementOnUpdate\n} from \"./utils/window.js\";\nconst icon = '<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path fill=\"#fff\" d=\"M7.9 1.5v-.4a1.1 1.1 0 0 1 2.2 0v.4a1.1 1.1 0 1 1-2.2 0Zm-6.4 8.6a1.1 1.1 0 1 0 0-2.2h-.4a1.1 1.1 0 0 0 0 2.2h.4ZM12 3.7a1.1 1.1 0 0 0 1.4-.7l.4-1.1a1.1 1.1 0 0 0-2.1-.8l-.4 1.2a1.1 1.1 0 0 0 .7 1.4Zm-9.7 7.6-1.2.4a1.1 1.1 0 1 0 .8 2.1l1-.4a1.1 1.1 0 1 0-.6-2ZM20.8 17a1.9 1.9 0 0 1 0 2.6l-1.2 1.2a1.9 1.9 0 0 1-2.6 0l-4.3-4.2-1.6 3.6a1.9 1.9 0 0 1-1.7 1.2A1.9 1.9 0 0 1 7.5 20L2.7 5a1.9 1.9 0 0 1 2.4-2.4l15 5a1.9 1.9 0 0 1 .2 3.4l-3.7 1.6 4.2 4.3ZM19 18.3 14.6 14a1.9 1.9 0 0 1 .6-3l3.2-1.5L5.1 5.1l4.3 13.3 1.5-3.2a1.9 1.9 0 0 1 3-.6l4.4 4.4.7-.7Z\"/></svg>';\nvar xray_default = {\n  id: \"astro:xray\",\n  name: \"Inspect\",\n  icon,\n  init(canvas, eventTarget) {\n    let islandsOverlays = [];\n    addIslandsOverlay();\n    document.addEventListener(\"astro:after-swap\", addIslandsOverlay);\n    document.addEventListener(\"astro:page-load\", refreshIslandsOverlayPositions);\n    closeOnOutsideClick(eventTarget);\n    synchronizePlacementOnUpdate(eventTarget, canvas);\n    function addIslandsOverlay() {\n      islandsOverlays.forEach(({ highlightElement }) => {\n        highlightElement.remove();\n      });\n      islandsOverlays = [];\n      const islands = document.querySelectorAll(\"astro-island\");\n      if (islands.length === 0) {\n        const window2 = createWindowElement(\n          `<style>\n\t\t\t\t\t\theader {\n\t\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\th1 {\n\t\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\t\talign-items: center;\n\t\t\t\t\t\t\tgap: 8px;\n\t\t\t\t\t\t\tfont-weight: 600;\n\t\t\t\t\t\t\tcolor: #fff;\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t\tfont-size: 22px;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tastro-dev-toolbar-icon {\n\t\t\t\t\t\t\twidth: 1em;\n\t\t\t\t\t\t   height: 1em;\n\t\t\t\t\t\t   padding: 8px;\n\t\t\t\t\t\t\tdisplay: block;\n\t\t\t\t\t\t\tbackground: #5f9ea0;\n\t\t\t\t\t\t\tborder-radius: 9999px;\n\t\t\t\t\t\t}\n\t\t\t\t\t</style>\n\t\t\t\t\t<header>\n\t\t\t\t\t\t<h1><astro-dev-toolbar-icon icon=\"lightbulb\"></astro-dev-toolbar-icon>No islands detected.</h1>\n\t\t\t\t\t</header>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tIt looks like there are no interactive component islands on this page. Did you forget to add a client directive to your interactive UI component?\n\t\t\t\t\t</p>\n\t\t\t\t\t`\n        );\n        canvas.append(window2);\n        return;\n      }\n      islands.forEach((island) => {\n        const computedStyle = window.getComputedStyle(island);\n        const islandElement = island.children[0] || island;\n        if (islandElement.offsetParent === null || computedStyle.display === \"none\") {\n          return;\n        }\n        const rect = islandElement.getBoundingClientRect();\n        const highlight = createHighlight(rect);\n        const tooltip = buildIslandTooltip(island);\n        const { isFixed } = getElementsPositionInDocument(islandElement);\n        if (isFixed) {\n          tooltip.style.position = highlight.style.position = \"fixed\";\n        }\n        attachTooltipToHighlight(highlight, tooltip, islandElement);\n        canvas.append(highlight);\n        islandsOverlays.push({ highlightElement: highlight, island: islandElement });\n      });\n      [\"scroll\", \"resize\"].forEach((event) => {\n        window.addEventListener(event, refreshIslandsOverlayPositions);\n      });\n    }\n    function refreshIslandsOverlayPositions() {\n      islandsOverlays.forEach(({ highlightElement, island: islandElement }) => {\n        const rect = islandElement.getBoundingClientRect();\n        positionHighlight(highlightElement, rect);\n      });\n    }\n    function buildIslandTooltip(island) {\n      const tooltip = document.createElement(\"astro-dev-toolbar-tooltip\");\n      tooltip.sections = [];\n      const islandProps = island.getAttribute(\"props\") ? JSON.parse(island.getAttribute(\"props\")) : {};\n      const islandClientDirective = island.getAttribute(\"client\");\n      if (islandClientDirective) {\n        tooltip.sections.push({\n          title: \"Client directive\",\n          inlineTitle: `<code>client:${islandClientDirective}</code>`\n        });\n      }\n      const islandPropsEntries = Object.entries(islandProps).filter(\n        (prop) => !prop[0].startsWith(\"data-astro-cid-\")\n      );\n      if (islandPropsEntries.length > 0) {\n        const stringifiedProps = JSON.stringify(\n          Object.fromEntries(islandPropsEntries.map((prop) => [prop[0], prop[1][1]])),\n          void 0,\n          2\n        );\n        tooltip.sections.push({\n          title: \"Props\",\n          content: `<pre><code>${escapeHTML(stringifiedProps)}</code></pre>`\n        });\n      }\n      const islandComponentPath = island.getAttribute(\"component-url\");\n      if (islandComponentPath) {\n        tooltip.sections.push({\n          content: islandComponentPath,\n          clickDescription: \"Click to go to file\",\n          async clickAction() {\n            await fetch(\n              \"/__open-in-editor?file=\" + encodeURIComponent(\n                window.__astro_dev_toolbar__.root + islandComponentPath.slice(1)\n              )\n            );\n          }\n        });\n      }\n      return tooltip;\n    }\n  }\n};\nexport {\n  xray_default as default\n};\n"],"x_google_ignoreList":[0],"mappings":";;;;AAaA,IAAI,eAAe;CACjB,IAAI;CACJ,MAAM;CACN,MAAA;CACA,KAAK,QAAQ,aAAa;EACxB,IAAI,kBAAkB,CAAC;EACvB,kBAAkB;EAClB,SAAS,iBAAiB,oBAAoB,iBAAiB;EAC/D,SAAS,iBAAiB,mBAAmB,8BAA8B;EAC3E,oBAAoB,WAAW;EAC/B,6BAA6B,aAAa,MAAM;EAChD,SAAS,oBAAoB;GAC3B,gBAAgB,SAAS,EAAE,uBAAuB;IAChD,iBAAiB,OAAO;GAC1B,CAAC;GACD,kBAAkB,CAAC;GACnB,MAAM,UAAU,SAAS,iBAAiB,cAAc;GACxD,IAAI,QAAQ,WAAW,GAAG;IACxB,MAAM,UAAU,oBACd;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA+BF;IACA,OAAO,OAAO,OAAO;IACrB;GACF;GACA,QAAQ,SAAS,WAAW;IAC1B,MAAM,gBAAgB,OAAO,iBAAiB,MAAM;IACpD,MAAM,gBAAgB,OAAO,SAAS,MAAM;IAC5C,IAAI,cAAc,iBAAiB,QAAQ,cAAc,YAAY,QACnE;IAGF,MAAM,YAAY,gBADL,cAAc,sBACU,CAAC;IACtC,MAAM,UAAU,mBAAmB,MAAM;IACzC,MAAM,EAAE,YAAY,8BAA8B,aAAa;IAC/D,IAAI,SACF,QAAQ,MAAM,WAAW,UAAU,MAAM,WAAW;IAEtD,yBAAyB,WAAW,SAAS,aAAa;IAC1D,OAAO,OAAO,SAAS;IACvB,gBAAgB,KAAK;KAAE,kBAAkB;KAAW,QAAQ;IAAc,CAAC;GAC7E,CAAC;GACD,CAAC,UAAU,QAAQ,CAAC,CAAC,SAAS,UAAU;IACtC,OAAO,iBAAiB,OAAO,8BAA8B;GAC/D,CAAC;EACH;EACA,SAAS,iCAAiC;GACxC,gBAAgB,SAAS,EAAE,kBAAkB,QAAQ,oBAAoB;IAEvE,kBAAkB,kBADL,cAAc,sBACY,CAAC;GAC1C,CAAC;EACH;EACA,SAAS,mBAAmB,QAAQ;GAClC,MAAM,UAAU,SAAS,cAAc,2BAA2B;GAClE,QAAQ,WAAW,CAAC;GACpB,MAAM,cAAc,OAAO,aAAa,OAAO,IAAI,KAAK,MAAM,OAAO,aAAa,OAAO,CAAC,IAAI,CAAC;GAC/F,MAAM,wBAAwB,OAAO,aAAa,QAAQ;GAC1D,IAAI,uBACF,QAAQ,SAAS,KAAK;IACpB,OAAO;IACP,aAAa,gBAAgB,sBAAsB;GACrD,CAAC;GAEH,MAAM,qBAAqB,OAAO,QAAQ,WAAW,CAAC,CAAC,QACpD,SAAS,CAAC,KAAK,EAAE,CAAC,WAAW,iBAAiB,CACjD;GACA,IAAI,mBAAmB,SAAS,GAAG;IACjC,MAAM,mBAAmB,KAAK,UAC5B,OAAO,YAAY,mBAAmB,KAAK,SAAS,CAAC,KAAK,IAAI,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,GAC1E,KAAK,GACL,CACF;IACA,QAAQ,SAAS,KAAK;KACpB,OAAO;KACP,SAAS,cAAcA,OAAW,gBAAgB,EAAE;IACtD,CAAC;GACH;GACA,MAAM,sBAAsB,OAAO,aAAa,eAAe;GAC/D,IAAI,qBACF,QAAQ,SAAS,KAAK;IACpB,SAAS;IACT,kBAAkB;IAClB,MAAM,cAAc;KAClB,MAAM,MACJ,4BAA4B,mBAC1B,OAAO,sBAAsB,OAAO,oBAAoB,MAAM,CAAC,CACjE,CACF;IACF;GACF,CAAC;GAEH,OAAO;EACT;CACF;AACF"}

package/examples/feature-demos/media-and-surfaces/site/.norna/generated-images.json

@@ -0,0 +1,66 @@
+{
+  "routes/010-media/images/cards/card-carousel.svg": {
+    "kind": "static",
+    "outputVersion": 2,
+    "sourceHash": "1447ec44c3cfe2f9041237dfd8aff42a21b82bc6762b840ab2c22d17b0454f8b",
+    "src": "/images/original/routes/010-media/images/cards/card-carousel-1447ec44.svg",
+    "width": 1200,
+    "height": 700
+  },
+  "routes/010-media/images/cards/card-stack.svg": {
+    "kind": "static",
+    "outputVersion": 2,
+    "sourceHash": "00e6c2d553b7cb23cc8a13d0fbca72d25a046a76db828faa5de8ccb6b2e4b2ae",
+    "src": "/images/original/routes/010-media/images/cards/card-stack-00e6c2d5.svg",
+    "width": 1200,
+    "height": 700
+  },
+  "routes/010-media/images/cards/card-surfaces.svg": {
+    "kind": "static",
+    "outputVersion": 2,
+    "sourceHash": "094c43e8bad8f1b8e497d21996f5cf66588f3b4c1ab9ced6dd40a3f67d827fb4",
+    "src": "/images/original/routes/010-media/images/cards/card-surfaces-094c43e8.svg",
+    "width": 1200,
+    "height": 700
+  },
+  "routes/010-media/images/carousel/carousel-one.svg": {
+    "kind": "static",
+    "outputVersion": 2,
+    "sourceHash": "b2d1e7c0642cd1ec7b36a26da54b58739804b61db9e986fe054eb7fe3c811e88",
+    "src": "/images/original/routes/010-media/images/carousel/carousel-one-b2d1e7c0.svg",
+    "width": 1200,
+    "height": 700
+  },
+  "routes/010-media/images/carousel/carousel-three.svg": {
+    "kind": "static",
+    "outputVersion": 2,
+    "sourceHash": "08e70e38babec81507497a81dfe0136a7b9993fb885ac06155b346bfc8413cac",
+    "src": "/images/original/routes/010-media/images/carousel/carousel-three-08e70e38.svg",
+    "width": 1200,
+    "height": 700
+  },
+  "routes/010-media/images/carousel/carousel-two.svg": {
+    "kind": "static",
+    "outputVersion": 2,
+    "sourceHash": "ba65261788ba8cc8dd5162dd0a748919a01aa925f2f8e3f844745e0c54af28be",
+    "src": "/images/original/routes/010-media/images/carousel/carousel-two-ba652617.svg",
+    "width": 1200,
+    "height": 700
+  },
+  "routes/010-media/images/stack/stack-one.svg": {
+    "kind": "static",
+    "outputVersion": 2,
+    "sourceHash": "c835acc71775886a86829989398b2e498fb2ccedafa465ee03f97dd8f6695c69",
+    "src": "/images/original/routes/010-media/images/stack/stack-one-c835acc7.svg",
+    "width": 1200,
+    "height": 700
+  },
+  "routes/010-media/images/stack/stack-two.svg": {
+    "kind": "static",
+    "outputVersion": 2,
+    "sourceHash": "83c64b1c1dd3b4745100baf272db7e91921b2e2967a51f0d31a9cd30cf045881",
+    "src": "/images/original/routes/010-media/images/stack/stack-two-83c64b1c.svg",
+    "width": 1200,
+    "height": 700
+  }
+}

package/examples/feature-demos/media-and-surfaces/site/config.mjs

@@ -0,0 +1,30 @@
+const siteUrl = process.env.NORNA_EXAMPLE_SITE_URL ?? 'http://localhost:4321/';
+const basePath = process.env.NORNA_EXAMPLE_BASE_PATH ?? '/';
+
+export default {
+	site: {
+		url: siteUrl,
+		basePath,
+	},
+	navigation: {
+		smoothScroll: {
+			enabled: true,
+			minimumDurationMs: 2_000,
+			maximumDurationMs: 4_000,
+			durationPerPixelMs: 0.22,
+		},
+	},
+	locale: {
+		lang: 'en',
+		labels: {
+			skipToContent: 'Skip to content',
+			sectionNavigation: 'Sections',
+			gallery: 'Images',
+		},
+	},
+	github: {
+		repo: 'owner/norna-media-and-surfaces-example',
+		branch: 'main',
+		pagesWorkflow: 'Deploy to GitHub Pages',
+	},
+};

package/examples/feature-demos/media-and-surfaces/site/content.md

@@ -0,0 +1,64 @@
+---
+title: Media and Surfaces
+description: A visual test bench for Norna's managed media and presentation surfaces.
+navigation:
+  label: Home
+---
+
+## Media and surfaces {#intro}
+
+This site is a focused test bench for Norna's managed media blocks, sidenotes,
+palettes and section-surface controls.
+
+The examples are ordinary Norna files: a theme chooses the site's visual
+defaults, routes can use their own complete themes, and Markdown blocks place
+managed media in the content flow.
+
+## New: palettes and surfaces {#palette}
+
+The palette is a small, named choice rather than a collection of unrelated
+colours. The site theme selects one of the built-in palettes:
+
+```yaml
+presentation:
+  palette: paper
+```
+
+The palette supplies the page, navigation and frame colours. A site can also
+cycle through base, soft and emphasis section surfaces:
+
+```yaml
+presentation:
+  sectionSurfaces:
+    mode: cycle
+    sequence: [base, soft, emphasis]
+```
+
+This keeps the visual rhythm consistent without asking each section to invent
+its own colours.
+
+## New: explicit section surfaces {#surfaces}
+
+This page uses the theme's surface sequence. `palette` is the visual family;
+`sectionSurfaces` chooses a bounded sequence of base, soft and emphasis
+treatments for the page.
+
+The result is a restrained change in background and text treatment, while the
+same typography and content model remain in place.
+
+## Managed content blocks {#blocks}
+
+Managed image stacks, carousels, card lists and sidenotes provide bounded ways
+to place common visual structures in Markdown. They are shown together on the
+Media blocks route.
+
+The important distinction is that these controls are named and bounded. They
+provide useful visual variation without turning every page into a new template
+or CSS project.
+
+## Explore the examples {#next}
+
+Read [Media blocks](/media/) to compare image stacks, carousels and card lists.
+
+Read [Surfaces](/surfaces/) for the relationship between palette defaults and
+theme-level surface choices.

package/examples/feature-demos/media-and-surfaces/site/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /

package/examples/feature-demos/media-and-surfaces/site/routes/010-media/images/cards/card-carousel.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 700" role="img" aria-labelledby="title desc">
+  <title id="title">Carousel card</title>
+  <desc id="desc">A framed panel with a central image and navigation marks.</desc>
+  <rect width="1200" height="700" fill="#d9dfda"/>
+  <rect x="210" y="130" width="780" height="440" rx="18" fill="#f7f8f7"/>
+  <circle cx="600" cy="320" r="135" fill="#38645a"/>
+  <path d="M300 570h600" stroke="#17201d" stroke-width="10" opacity=".35"/>
+  <circle cx="545" cy="570" r="10" fill="#17201d"/>
+  <circle cx="600" cy="570" r="10" fill="#17201d" opacity=".35"/>
+  <circle cx="655" cy="570" r="10" fill="#17201d" opacity=".35"/>
+</svg>

package/examples/feature-demos/media-and-surfaces/site/routes/010-media/images/cards/card-stack.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 700" role="img" aria-labelledby="title desc">
+  <title id="title">Image stack card</title>
+  <desc id="desc">Three offset paper rectangles represent an image stack.</desc>
+  <rect width="1200" height="700" fill="#f0ebe1"/>
+  <rect x="270" y="170" width="660" height="360" fill="#d8d0c4" transform="rotate(-7 600 350)"/>
+  <rect x="270" y="170" width="660" height="360" fill="#685a43" transform="rotate(6 600 350)"/>
+  <rect x="270" y="170" width="660" height="360" fill="#f8f5ee"/>
+  <circle cx="600" cy="350" r="92" fill="#685a43"/>
+</svg>

package/examples/feature-demos/media-and-surfaces/site/routes/010-media/images/cards/card-surfaces.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 700" role="img" aria-labelledby="title desc">
+  <title id="title">Section surfaces card</title>
+  <desc id="desc">Two horizontal surfaces show a restrained change of section background.</desc>
+  <rect width="1200" height="700" fill="#f8f5ee"/>
+  <rect x="170" y="145" width="860" height="170" fill="#f8f5ee" stroke="#272522" stroke-opacity=".25" stroke-width="5"/>
+  <rect x="170" y="385" width="860" height="170" fill="#ebe5d9"/>
+  <path d="M300 230h600M300 470h600" stroke="#685a43" stroke-width="18" opacity=".8"/>
+</svg>

package/examples/feature-demos/media-and-surfaces/site/routes/010-media/images/carousel/carousel-one.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 700" role="img" aria-labelledby="title desc">
+  <title id="title">Carousel frame one</title>
+  <desc id="desc">A green panel with a diagonal line.</desc>
+  <rect width="1200" height="700" fill="#d9dfda"/>
+  <path d="M120 560 1080 140" stroke="#38645a" stroke-width="46"/>
+  <circle cx="260" cy="190" r="70" fill="#17201d"/>
+  <circle cx="940" cy="510" r="70" fill="#f7f8f7"/>
+</svg>

package/examples/feature-demos/media-and-surfaces/site/routes/010-media/images/carousel/carousel-three.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 700" role="img" aria-labelledby="title desc">
+  <title id="title">Carousel frame three</title>
+  <desc id="desc">A red panel with a compact grid.</desc>
+  <rect width="1200" height="700" fill="#7d302b"/>
+  <g fill="#f8f5ee">
+    <rect x="270" y="170" width="180" height="150"/>
+    <rect x="510" y="170" width="180" height="150" opacity=".72"/>
+    <rect x="750" y="170" width="180" height="150" opacity=".48"/>
+    <rect x="270" y="380" width="180" height="150" opacity=".48"/>
+    <rect x="510" y="380" width="180" height="150" opacity=".72"/>
+    <rect x="750" y="380" width="180" height="150"/>
+  </g>
+</svg>

package/examples/feature-demos/media-and-surfaces/site/routes/010-media/images/carousel/carousel-two.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 700" role="img" aria-labelledby="title desc">
+  <title id="title">Carousel frame two</title>
+  <desc id="desc">A blue-green panel with two overlapping circles.</desc>
+  <rect width="1200" height="700" fill="#17201d"/>
+  <circle cx="485" cy="350" r="210" fill="#38645a"/>
+  <circle cx="715" cy="350" r="210" fill="#d9dfda" opacity=".88"/>
+  <path d="M370 350h460" stroke="#f7f8f7" stroke-width="12" opacity=".65"/>
+</svg>

package/examples/feature-demos/media-and-surfaces/site/routes/010-media/images/stack/stack-one.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 700" role="img" aria-labelledby="title desc">
+  <title id="title">Single visual idea</title>
+  <desc id="desc">A warm panel with a large circle and a small accent line.</desc>
+  <rect width="1200" height="700" fill="#f0ebe1"/>
+  <circle cx="600" cy="330" r="190" fill="#685a43"/>
+  <rect x="260" y="555" width="680" height="12" rx="6" fill="#272522" opacity=".55"/>
+  <rect x="420" y="590" width="360" height="8" rx="4" fill="#272522" opacity=".25"/>
+</svg>

package/examples/feature-demos/media-and-surfaces/site/routes/010-media/images/stack/stack-two.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 700" role="img" aria-labelledby="title desc">
+  <title id="title">Related visual detail</title>
+  <desc id="desc">A dark panel with three aligned cream blocks.</desc>
+  <rect width="1200" height="700" fill="#272522"/>
+  <rect x="170" y="170" width="250" height="360" fill="#f8f5ee"/>
+  <rect x="475" y="170" width="250" height="360" fill="#d8d0c4"/>
+  <rect x="780" y="170" width="250" height="360" fill="#685a43"/>
+  <rect x="170" y="570" width="860" height="10" fill="#f8f5ee" opacity=".55"/>
+</svg>

package/examples/feature-demos/media-and-surfaces/site/routes/010-media/route-content.md

@@ -0,0 +1,85 @@
+---
+title: Media blocks
+description: Compare Norna's managed image stacks, carousels and card lists.
+navigation:
+  label: Media blocks
+---
+
+## Image stack {#stack}
+
+An image stack places one or more managed images in the normal Markdown flow.
+Each source file belongs in the section's image folder, and Norna creates the
+responsive output used by the browser.{note-ref}
+
+{note: This note belongs to the introductory text above the image stack. On a wide screen it should sit in the margin and align with its reference paragraph.}
+
+````
+```norna-image-stack
+- image: stack-one.svg
+  alt: A pale panel with a single large circle.
+  caption: One image can introduce a visual idea.
+- image: stack-two.svg
+  alt: A dark panel with three aligned blocks.
+  caption: A stack can contain several related images.
+```
+````
+
+```norna-image-stack
+- image: stack-one.svg
+  alt: A pale panel with a single large circle.
+  caption: One image can introduce a visual idea.
+- image: stack-two.svg
+  alt: A dark panel with three aligned blocks.
+  caption: A stack can contain several related images.
+```
+
+## Image carousel {#carousel}
+
+A carousel keeps a related group together while showing one image at a time.
+The controls, keyboard interaction and current position are provided by
+Norna.{note-ref}
+
+{note: The note remains explanatory text beside the paragraph; the carousel keeps its full managed image area below.}
+
+```norna-image-carousel
+- image: carousel-one.svg
+  alt: A green panel with a diagonal line.
+  caption: First frame: a broad direction.
+- image: carousel-two.svg
+  alt: A blue panel with two overlapping circles.
+  caption: Second frame: a closer relationship.
+- image: carousel-three.svg
+  alt: A red panel with a compact grid.
+  caption: Third frame: a denser detail.
+```
+
+## Card list {#cards}
+
+Cards are useful when several short items need the same visual treatment. The
+block controls the layout and size without requiring a component for each
+card.{note-ref}
+
+{note: This third note makes the numbering and spacing between several sidenotes visible on one page.}
+
+```norna-card-list
+layout: image-top
+flow: grid
+size: m
+width: normal
+
+- title: Image stack
+  text: A simple vertical sequence of managed images.
+  image: card-stack.svg
+  badge-text: Established
+- title: Carousel
+  text: A focused sequence with controls and captions.
+  image: card-carousel.svg
+  badge-text: Established
+- title: Section surfaces
+  text: A bounded way to create rhythm between sections.
+  image: card-surfaces.svg
+  badge-text: New
+```
+
+The examples above are still ordinary Markdown blocks. Their presentation is
+opinionated, so the same source remains predictable on smaller screens.

package/examples/feature-demos/media-and-surfaces/site/routes/010-media/theme.md

@@ -0,0 +1,3 @@
+---
+preset: portfolio
+---