npm - @janga/norna - Versions diffs - 0.7.11 → 0.7.13 - Mend

@janga/norna 0.7.11 → 0.7.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (239) hide show

package/examples/complete-sites/dog-shelter-single-page/node_modules/.vite/deps/ui-library-Cd35oAvo.js.map ADDED Viewed

@@ -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/complete-sites/dog-shelter-single-page/node_modules/.vite/deps/window-vo3A6TMn.js ADDED Viewed

@@ -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/complete-sites/dog-shelter-single-page/node_modules/.vite/deps/window-vo3A6TMn.js.map ADDED Viewed

@@ -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/complete-sites/dog-shelter-single-page/node_modules/.vite/deps/xray-DwhzGckb.js ADDED Viewed

@@ -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/complete-sites/dog-shelter-single-page/node_modules/.vite/deps/xray-DwhzGckb.js.map ADDED Viewed

@@ -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/complete-sites/dog-shelter-single-page/site/.norna/generated-images.json CHANGED Viewed

@@ -1,18 +1,50 @@
 {
-  "images/what-we-do/dog-house.svg": {
-    "kind": "static",
+  "images/what-we-do/rescue-dog.jpg": {
     "outputVersion": 2,
-    "sourceHash": "740ee3e9cc493fbd06510d282592f818669f367f6f9dc480add2032935afdf45",
-    "src": "/images/original/images/what-we-do/dog-house-740ee3e9.svg",
-    "width": 800,
-    "height": 520
+    "sourceHash": "519d663971223bdb1948db9087c637f1ed8b4d21d81c08e1fc10d5e2d904f230",
+    "width": 1200,
+    "height": 800,
+    "variants": [
+      {
+        "src": "/images/generated/what-we-do/rescue-dog-519d6639-480.webp",
+        "width": 480
+      },
+      {
+        "src": "/images/generated/what-we-do/rescue-dog-519d6639-768.webp",
+        "width": 768
+      },
+      {
+        "src": "/images/generated/what-we-do/rescue-dog-519d6639-1080.webp",
+        "width": 1080
+      },
+      {
+        "src": "/images/generated/what-we-do/rescue-dog-519d6639-1200.webp",
+        "width": 1200
+      }
+    ]
   },
-  "images/you-can-help/heart.svg": {
-    "kind": "static",
+  "images/you-can-help/foster-dog.jpg": {
     "outputVersion": 2,
-    "sourceHash": "8f95f517fd7ee7a125c06f3f6e560d5e6fc73f085331cefc8c97403688e5ca4a",
-    "src": "/images/original/images/you-can-help/heart-8f95f517.svg",
-    "width": 800,
-    "height": 520
+    "sourceHash": "604099036852fa40c2fecf8620a138405c8edcb0b92f120bb603742f9ee91154",
+    "width": 1200,
+    "height": 800,
+    "variants": [
+      {
+        "src": "/images/generated/you-can-help/foster-dog-60409903-480.webp",
+        "width": 480
+      },
+      {
+        "src": "/images/generated/you-can-help/foster-dog-60409903-768.webp",
+        "width": 768
+      },
+      {
+        "src": "/images/generated/you-can-help/foster-dog-60409903-1080.webp",
+        "width": 1080
+      },
+      {
+        "src": "/images/generated/you-can-help/foster-dog-60409903-1200.webp",
+        "width": 1200
+      }
+    ]
   }
 }

package/examples/complete-sites/dog-shelter-single-page/site/config.md ADDED Viewed

@@ -0,0 +1,3 @@
+---
+url: http://localhost:4321/
+---

package/examples/complete-sites/dog-shelter-single-page/site/content.md CHANGED Viewed

@@ -5,34 +5,30 @@ description: A single-page dog shelter website built with Norna.
 ## What we do {#what-we-do}
-We rescue and rehome dogs.
-<!-- norna-image-provenance:
-image: dog-house.svg
-source: AI-assisted, hand-authored SVG
-prompt: Draw a simple flat vector dog house with a friendly dog at the entrance,
-using a small paper, red and dark-brown palette. No text and no external assets.
--->
-```norna-image-stack
-- image: dog-house.svg
-  alt: A brown dog standing at the entrance to a red dog house.
-  caption: Time to recover before adoption.
+We rescue dogs, give them time to recover and find homes that suit their needs.
+```norna-card-list
+layout: image-right
+flow: stack
+size: s
+width: narrow
+- title: A safe place to start again
+  text: Each dog gets care, calm routines and an individual plan before adoption.
+  image: rescue-dog.jpg
 ```
 ## You can help {#you-can-help}
-Adopt. Foster. Donate.
+Adopt, foster or support the everyday work at the shelter.
-<!-- norna-image-provenance:
-image: heart.svg
-source: AI-assisted, hand-authored SVG
-prompt: Draw two simple hands holding a red heart as a flat vector illustration,
-using a small paper, red and dark-brown palette. No text or external assets.
--->
+```norna-card-list
+layout: image-left
+flow: stack
+size: s
+width: narrow
-```norna-image-stack
-- image: heart.svg
-  alt: Two open hands holding a red heart.
-  caption: Foster care helps another dog.
+- title: Make room for one more dog
+  text: A foster home gives a dog stability and gives the shelter space for another rescue.
+  image: foster-dog.jpg
 ```

package/examples/complete-sites/dog-shelter-single-page/site/images/what-we-do/rescue-dog.jpg ADDED Viewed

Binary file

package/examples/complete-sites/dog-shelter-single-page/site/images/you-can-help/foster-dog.jpg ADDED Viewed

Binary file

package/examples/complete-sites/dog-shelter-single-page/site/public/logo.svg ADDED Viewed

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 64" role="img">
+  <path fill="#b9473e" d="M5 29 31 6l26 23v29H5z"/>
+  <path fill="#fffaf2" d="m17 29 6-9 8 5 8-5 6 9v14c0 8-6 14-14 14S17 51 17 43z"/>
+  <path fill="#3b2b27" d="M17 29v-8l8 4zm28 0v-8l-8 4z"/>
+  <circle cx="26" cy="35" r="2" fill="#3b2b27"/>
+  <circle cx="36" cy="35" r="2" fill="#3b2b27"/>
+  <path fill="#3b2b27" d="M27 41h8c0 4-2 6-4 6s-4-2-4-6z"/>
+  <text x="72" y="39" fill="#2d2522" font-family="Arial, Helvetica, sans-serif" font-size="25" font-weight="700">Dog Shelter</text>
+</svg>

package/examples/complete-sites/dog-shelter-single-page/site/sitewide-content.md CHANGED Viewed

@@ -1,6 +1,16 @@
 ---
 navigation:
-  brand: Dog Shelter
+  logo:
+    alt: Dog Shelter
+    height: 3rem
 footer:
-  copyrightMessage: Dog Shelter example site.
+  copyrightMessage: Dog Shelter example site. Dog photos by Bicanski, CC0, via Pixnio.
 ---
+<!-- norna-image-provenance:
+image: logo.svg
+source: AI-assisted, hand-authored SVG
+prompt: Create a compact horizontal dog shelter logo with a simple dog face in
+a house-shaped mark and the words Dog Shelter. Use flat vector shapes, a warm
+red accent, dark text, transparent background and no external assets.
+-->

package/examples/complete-sites/dog-shelter-single-page/site/theme.md CHANGED Viewed

@@ -1,25 +1,3 @@
 ---
-layout:
-  density: normal
-  pageWidth: 1180px
-  gutter:
-    desktop: clamp(1.25rem, 4vw, 3rem)
-    mobile: 1rem
-gallery:
-  width: 760px
-  maxAvailableWidthPercent:
-    desktop: 100
-    mobile: 100
-  maxAvailableHeightPercent:
-    desktop: 72
-    mobile: 68
-typography:
-  fontFamily: "Arial, 'Helvetica Neue', Helvetica, sans-serif"
-  preset: text-forward
-  rhythm: normal
-presentation:
-  palette: paper
-  sectionSurfaces:
-    mode: cycle
-    sequence: [base, soft]
+preset: project
 ---

package/examples/feature-demos/media-and-surfaces/.astro/data-store.json CHANGED Viewed

	@@ -1 +1 @@
1	- [["Map",1,2,9,10,103,104,124,125],"meta::meta",["Map",3,4,5,6,7,8],"astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":\"jsx\",\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":\"127.0.0.1\",\"port\":49811,\"allowedHosts\":[\"127.0.0.1\",\"127.0.0.1\",\"127.0.0.1\",\"127.0.0.1\"]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"dangerouslyProcessSVG\":false,\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"processor\":{\"name\":\"satteri\",\"options\":{\"mdastPlugins\":[],\"hastPlugins\":[],\"features\":{}}}},\"security\":{\"checkOrigin\":true,\"allowedDomains\":[],\"csp\":false,\"actionBodySizeLimit\":1048576,\"serverIslandBodySizeLimit\":1048576},\"env\":{\"schema\":{},\"validateSecrets\":false},\"prerenderConflictBehavior\":\"warn\",\"fetchFile\":\"fetch\",\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"chromeDevtoolsWorkspace\":false,\"collectionStorage\":\"single-file\"},\"legacy\":{\"collectionsBackwardsCompat\":false}}","astro-version","7.1.3","content-config-digest","ef24ddbc7d731e37","site",["Map",11,12,47,48,75,76],"site-content",{"id":11,"data":13,"body":19,"filePath":20,"digest":21,"rendered":22},{"title":14,"description":15,"navigation":16,"sections":18},"Media and Surfaces","A visual test bench for Norna's managed media and presentation surfaces.",{"label":17},"Home",{},"## Media and surfaces {#intro}\n\nThis site is a focused test bench for Norna's managed media blocks, sidenotes,\npalettes and section-surface controls.\n\nThe examples are ordinary Norna files: a theme chooses the site's visual\ndefaults, routes can use their own complete themes, and Markdown blocks place\nmanaged media in the content flow.\n\n## New: palettes and surfaces {#palette}\n\nThe palette is a small, named choice rather than a collection of unrelated\ncolours. The site theme selects one of the built-in palettes:\n\n```yaml\npresentation:\n palette: paper\n```\n\nThe palette supplies the page, navigation and frame colours. A site can also\ncycle through base, soft and emphasis section surfaces:\n\n```yaml\npresentation:\n sectionSurfaces:\n mode: cycle\n sequence: [base, soft, emphasis]\n```\n\nThis keeps the visual rhythm consistent without asking each section to invent\nits own colours.\n\n## New: explicit section surfaces {#surfaces}\n\nThis page uses the theme's surface sequence. `palette` is the visual family;\n`sectionSurfaces` chooses a bounded sequence of base, soft and emphasis\ntreatments for the page.\n\nThe result is a restrained change in background and text treatment, while the\nsame typography and content model remain in place.\n\n## Managed content blocks {#blocks}\n\nManaged image stacks, carousels, card lists and sidenotes provide bounded ways\nto place common visual structures in Markdown. They are shown together on the\nMedia blocks route.\n\nThe important distinction is that these controls are named and bounded. They\nprovide useful visual variation without turning every page into a new template\nor CSS project.\n\n## Explore the examples {#next}\n\nRead [Media blocks](/media/) to compare image stacks, carousels and card lists.\n\nRead [Surfaces](/surfaces/) for the relationship between palette defaults and\ntheme-level surface choices.","site/content.md","64caddd1790aa4a5",{"html":23,"metadata":24},"\u003Ch2 id=\"media-and-surfaces-intro\">Media and surfaces {#intro}\u003C/h2>\n\u003Cp>This site is a focused test bench for Norna’s managed media blocks, sidenotes,\npalettes and section-surface controls.\u003C/p>\n\u003Cp>The examples are ordinary Norna files: a theme chooses the site’s visual\ndefaults, routes can use their own complete themes, and Markdown blocks place\nmanaged media in the content flow.\u003C/p>\n\u003Ch2 id=\"new-palettes-and-surfaces-palette\">New: palettes and surfaces {#palette}\u003C/h2>\n\u003Cp>The palette is a small, named choice rather than a collection of unrelated\ncolours. The site theme selects one of the built-in palettes:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"yaml\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\">presentation\u003C/span>\u003Cspan style=\"color:#E1E4E8\">:\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\"> palette\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#9ECBFF\">paper\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>The palette supplies the page, navigation and frame colours. A site can also\ncycle through base, soft and emphasis section surfaces:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"yaml\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\">presentation\u003C/span>\u003Cspan style=\"color:#E1E4E8\">:\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\"> sectionSurfaces\u003C/span>\u003Cspan style=\"color:#E1E4E8\">:\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\"> mode\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#9ECBFF\">cycle\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\"> sequence\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: [\u003C/span>\u003Cspan style=\"color:#9ECBFF\">base\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, \u003C/span>\u003Cspan style=\"color:#9ECBFF\">soft\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, \u003C/span>\u003Cspan style=\"color:#9ECBFF\">emphasis\u003C/span>\u003Cspan style=\"color:#E1E4E8\">]\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>This keeps the visual rhythm consistent without asking each section to invent\nits own colours.\u003C/p>\n\u003Ch2 id=\"new-explicit-section-surfaces-surfaces\">New: explicit section surfaces {#surfaces}\u003C/h2>\n\u003Cp>This page uses the theme’s surface sequence. \u003Ccode>palette\u003C/code> is the visual family;\n\u003Ccode>sectionSurfaces\u003C/code> chooses a bounded sequence of base, soft and emphasis\ntreatments for the page.\u003C/p>\n\u003Cp>The result is a restrained change in background and text treatment, while the\nsame typography and content model remain in place.\u003C/p>\n\u003Ch2 id=\"managed-content-blocks-blocks\">Managed content blocks {#blocks}\u003C/h2>\n\u003Cp>Managed image stacks, carousels, card lists and sidenotes provide bounded ways\nto place common visual structures in Markdown. They are shown together on the\nMedia blocks route.\u003C/p>\n\u003Cp>The important distinction is that these controls are named and bounded. They\nprovide useful visual variation without turning every page into a new template\nor CSS project.\u003C/p>\n\u003Ch2 id=\"explore-the-examples-next\">Explore the examples {#next}\u003C/h2>\n\u003Cp>Read \u003Ca href=\"/media/\">Media blocks\u003C/a> to compare image stacks, carousels and card lists.\u003C/p>\n\u003Cp>Read \u003Ca href=\"/surfaces/\">Surfaces\u003C/a> for the relationship between palette defaults and\ntheme-level surface choices.\u003C/p>\n",{"headings":25,"localImagePaths":42,"remoteImagePaths":43,"frontmatter":44,"imagePaths":46},[26,30,33,36,39],{"depth":27,"slug":28,"text":29},2,"media-and-surfaces-intro","Media and surfaces {#intro}",{"depth":27,"slug":31,"text":32},"new-palettes-and-surfaces-palette","New: palettes and surfaces {#palette}",{"depth":27,"slug":34,"text":35},"new-explicit-section-surfaces-surfaces","New: explicit section surfaces {#surfaces}",{"depth":27,"slug":37,"text":38},"managed-content-blocks-blocks","Managed content blocks {#blocks}",{"depth":27,"slug":40,"text":41},"explore-the-examples-next","Explore the examples {#next}",[],[],{"title":14,"description":15,"navigation":45},{"label":17},[],"site-route-010-media",{"id":47,"data":49,"body":54,"filePath":55,"digest":56,"rendered":57},{"title":50,"description":51,"navigation":52,"sections":53},"Media blocks","Compare Norna's managed image stacks, carousels and card lists.",{"label":50},{},"## Image stack {#stack}\n\nAn image stack places one or more managed images in the normal Markdown flow.\nEach source file belongs in the section's image folder, and Norna creates the\nresponsive output used by the browser.{note-ref}\n\n{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.}\n\n````\n```norna-image-stack\n- image: stack-one.svg\n alt: A pale panel with a single large circle.\n caption: One image can introduce a visual idea.\n- image: stack-two.svg\n alt: A dark panel with three aligned blocks.\n caption: A stack can contain several related images.\n```\n````\n\n```norna-image-stack\n- image: stack-one.svg\n alt: A pale panel with a single large circle.\n caption: One image can introduce a visual idea.\n- image: stack-two.svg\n alt: A dark panel with three aligned blocks.\n caption: A stack can contain several related images.\n```\n\n## Image carousel {#carousel}\n\nA carousel keeps a related group together while showing one image at a time.\nThe controls, keyboard interaction and current position are provided by\nNorna.{note-ref}\n\n{note: The note remains explanatory text beside the paragraph; the carousel keeps its full managed image area below.}\n\n```norna-image-carousel\n- image: carousel-one.svg\n alt: A green panel with a diagonal line.\n caption: First frame: a broad direction.\n- image: carousel-two.svg\n alt: A blue panel with two overlapping circles.\n caption: Second frame: a closer relationship.\n- image: carousel-three.svg\n alt: A red panel with a compact grid.\n caption: Third frame: a denser detail.\n```\n\n## Card list {#cards}\n\nCards are useful when several short items need the same visual treatment. The\nblock controls the layout and size without requiring a component for each\ncard.{note-ref}\n\n{note: This third note makes the numbering and spacing between several sidenotes visible on one page.}\n\n```norna-card-list\nlayout: image-top\nflow: grid\nsize: m\nwidth: normal\n\n- title: Image stack\n text: A simple vertical sequence of managed images.\n image: card-stack.svg\n badge-text: Established\n- title: Carousel\n text: A focused sequence with controls and captions.\n image: card-carousel.svg\n badge-text: Established\n- title: Section surfaces\n text: A bounded way to create rhythm between sections.\n image: card-surfaces.svg\n badge-text: New\n```\n\nThe examples above are still ordinary Markdown blocks. Their presentation is\nopinionated, so the same source remains predictable on smaller screens.","site/routes/010-media/route-content.md","fddd96f4b053bfe9",{"html":58,"metadata":59},"\u003Ch2 id=\"image-stack-stack\">Image stack {#stack}\u003C/h2>\n\u003Cp>An image stack places one or more managed images in the normal Markdown flow.\nEach source file belongs in the section’s image folder, and Norna creates the\nresponsive output used by the browser.{note-ref}\u003C/p>\n\u003Cp>{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.}\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"plaintext\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan>```norna-image-stack\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>- image: stack-one.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> alt: A pale panel with a single large circle.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> caption: One image can introduce a visual idea.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>- image: stack-two.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> alt: A dark panel with three aligned blocks.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> caption: A stack can contain several related images.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>```\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"plaintext\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan>- image: stack-one.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> alt: A pale panel with a single large circle.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> caption: One image can introduce a visual idea.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>- image: stack-two.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> alt: A dark panel with three aligned blocks.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> caption: A stack can contain several related images.\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"image-carousel-carousel\">Image carousel {#carousel}\u003C/h2>\n\u003Cp>A carousel keeps a related group together while showing one image at a time.\nThe controls, keyboard interaction and current position are provided by\nNorna.{note-ref}\u003C/p>\n\u003Cp>{note: The note remains explanatory text beside the paragraph; the carousel keeps its full managed image area below.}\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"plaintext\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan>- image: carousel-one.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> alt: A green panel with a diagonal line.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> caption: First frame: a broad direction.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>- image: carousel-two.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> alt: A blue panel with two overlapping circles.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> caption: Second frame: a closer relationship.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>- image: carousel-three.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> alt: A red panel with a compact grid.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> caption: Third frame: a denser detail.\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"card-list-cards\">Card list {#cards}\u003C/h2>\n\u003Cp>Cards are useful when several short items need the same visual treatment. The\nblock controls the layout and size without requiring a component for each\ncard.{note-ref}\u003C/p>\n\u003Cp>{note: This third note makes the numbering and spacing between several sidenotes visible on one page.}\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"plaintext\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan>layout: image-top\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>flow: grid\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>size: m\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>width: normal\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>- title: Image stack\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> text: A simple vertical sequence of managed images.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> image: card-stack.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> badge-text: Established\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>- title: Carousel\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> text: A focused sequence with controls and captions.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> image: card-carousel.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> badge-text: Established\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>- title: Section surfaces\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> text: A bounded way to create rhythm between sections.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> image: card-surfaces.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> badge-text: New\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>The examples above are still ordinary Markdown blocks. Their presentation is\nopinionated, so the same source remains predictable on smaller screens.\u003C/p>\n",{"headings":60,"localImagePaths":70,"remoteImagePaths":71,"frontmatter":72,"imagePaths":74},[61,64,67],{"depth":27,"slug":62,"text":63},"image-stack-stack","Image stack {#stack}",{"depth":27,"slug":65,"text":66},"image-carousel-carousel","Image carousel {#carousel}",{"depth":27,"slug":68,"text":69},"card-list-cards","Card list {#cards}",[],[],{"title":50,"description":51,"navigation":73},{"label":50},[],"site-route-020-surfaces",{"id":75,"data":77,"body":82,"filePath":83,"digest":84,"rendered":85},{"title":78,"description":79,"navigation":80,"sections":81},"Surfaces","See how palette defaults and section surfaces work together.",{"label":78},{},"## Palette options {#palette-options}\n\nNorna currently provides a small set of named palettes. The theme chooses one\nfor the whole site:\n\n```yaml\npresentation:\n palette: dark\n```\n\nThe available choices are `dark`, `light` and `paper`. A palette defines the\npage, navigation, frame and section colours together, so these parts stay in\nbalance.\n\n## Emphasis surface {#emphasis-surface}\n\nThe route theme uses a palette and a surface sequence when a visual pause or\nchange of rhythm helps the reader. This is not a free-form colour override:\n\n```yaml\npresentation:\n sectionSurfaces:\n mode: cycle\n sequence: [base, soft, emphasis]\n```\n\nThe theme can cycle through the selected surfaces automatically. Individual\nsections do not select their own colours.\n\n## A practical rule {#practical-rule}\n\nUse the site palette for the overall tone. Use soft and emphasis surfaces for a\nsmall number of meaningful transitions, not to make every section look\nunrelated.\n\nTypography presets and media blocks can vary the content inside that system;\nsurfaces provide the route-level rhythm around it.","site/routes/020-surfaces/route-content.md","015a14c50585a829",{"html":86,"metadata":87},"\u003Ch2 id=\"palette-options-palette-options\">Palette options {#palette-options}\u003C/h2>\n\u003Cp>Norna currently provides a small set of named palettes. The theme chooses one\nfor the whole site:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"yaml\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\">presentation\u003C/span>\u003Cspan style=\"color:#E1E4E8\">:\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\"> palette\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#9ECBFF\">dark\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>The available choices are \u003Ccode>dark\u003C/code>, \u003Ccode>light\u003C/code> and \u003Ccode>paper\u003C/code>. A palette defines the\npage, navigation, frame and section colours together, so these parts stay in\nbalance.\u003C/p>\n\u003Ch2 id=\"emphasis-surface-emphasis-surface\">Emphasis surface {#emphasis-surface}\u003C/h2>\n\u003Cp>The route theme uses a palette and a surface sequence when a visual pause or\nchange of rhythm helps the reader. This is not a free-form colour override:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"yaml\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\">presentation\u003C/span>\u003Cspan style=\"color:#E1E4E8\">:\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\"> sectionSurfaces\u003C/span>\u003Cspan style=\"color:#E1E4E8\">:\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\"> mode\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#9ECBFF\">cycle\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\"> sequence\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: [\u003C/span>\u003Cspan style=\"color:#9ECBFF\">base\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, \u003C/span>\u003Cspan style=\"color:#9ECBFF\">soft\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, \u003C/span>\u003Cspan style=\"color:#9ECBFF\">emphasis\u003C/span>\u003Cspan style=\"color:#E1E4E8\">]\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>The theme can cycle through the selected surfaces automatically. Individual\nsections do not select their own colours.\u003C/p>\n\u003Ch2 id=\"a-practical-rule-practical-rule\">A practical rule {#practical-rule}\u003C/h2>\n\u003Cp>Use the site palette for the overall tone. Use soft and emphasis surfaces for a\nsmall number of meaningful transitions, not to make every section look\nunrelated.\u003C/p>\n\u003Cp>Typography presets and media blocks can vary the content inside that system;\nsurfaces provide the route-level rhythm around it.\u003C/p>\n",{"headings":88,"localImagePaths":98,"remoteImagePaths":99,"frontmatter":100,"imagePaths":102},[89,92,95],{"depth":27,"slug":90,"text":91},"palette-options-palette-options","Palette options {#palette-options}",{"depth":27,"slug":93,"text":94},"emphasis-surface-emphasis-surface","Emphasis surface {#emphasis-surface}",{"depth":27,"slug":96,"text":97},"a-practical-rule-practical-rule","A practical rule {#practical-rule}",[],[],{"title":78,"description":79,"navigation":101},{"label":78},[],"sitewide",["Map",105,106],"site-sitewide",{"id":105,"data":107,"filePath":112,"digest":113,"rendered":114},{"navigation":108,"banners":109,"footer":110},{"brand":14},[],{"copyrightMessage":111},"Norna media and surfaces example.","site/sitewide-content.md","a62822e81bc10bcf",{"html":115,"metadata":116},"",{"headings":117,"localImagePaths":118,"remoteImagePaths":119,"frontmatter":120,"imagePaths":123},[],[],[],{"navigation":121,"footer":122},{"brand":14},{"copyrightMessage":111},[],"theme",["Map",126,127],"theme.md",{"id":126,"data":128,"filePath":130,"digest":131,"rendered":132},{"preset":129},"project","site/theme.md","d19ab283a10fb060",{"html":115,"metadata":133},{"headings":134,"localImagePaths":135,"remoteImagePaths":136,"frontmatter":137,"imagePaths":138},[],[],[],{"preset":129},[]]
1	+ [["Map",1,2,9,10,91,92,112,113],"meta::meta",["Map",3,4,5,6,7,8],"astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":\"jsx\",\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":\"127.0.0.1\",\"port\":60863,\"allowedHosts\":[\"127.0.0.1\",\"127.0.0.1\",\"127.0.0.1\",\"127.0.0.1\"]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"dangerouslyProcessSVG\":false,\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"processor\":{\"name\":\"satteri\",\"options\":{\"mdastPlugins\":[],\"hastPlugins\":[],\"features\":{}}}},\"security\":{\"checkOrigin\":true,\"allowedDomains\":[],\"csp\":false,\"actionBodySizeLimit\":1048576,\"serverIslandBodySizeLimit\":1048576},\"env\":{\"schema\":{},\"validateSecrets\":false},\"prerenderConflictBehavior\":\"warn\",\"fetchFile\":\"fetch\",\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"chromeDevtoolsWorkspace\":false,\"collectionStorage\":\"single-file\"},\"legacy\":{\"collectionsBackwardsCompat\":false}}","astro-version","7.1.3","content-config-digest","ef24ddbc7d731e37","site",["Map",11,12,35,36,63,64],"site-content",{"id":11,"data":13,"body":19,"filePath":20,"digest":21,"rendered":22},{"title":14,"description":15,"navigation":16,"sections":18},"Media and Surfaces","A visual test bench for Norna's managed media and presentation surfaces.",{"label":17},"Home",{},"## Media and surfaces {#intro}\n\nThis site is a focused test bench for Norna's managed media blocks, sidenotes,\npalettes and section-surface controls.\n\nUse [Media blocks](/media/) to compare image stacks, carousels, card lists and\nsidenotes. Use [Surfaces](/surfaces/) to inspect palettes and automatic section\nsurface sequences.\n\nSite identity, banners and footers have their own\n[sitewide content demo](https://janga.github.io/norna/examples/feature-demos/sitewide-content/).","site/content.md","78ec072eba5fb94d",{"html":23,"metadata":24},"\u003Ch2 id=\"media-and-surfaces-intro\">Media and surfaces {#intro}\u003C/h2>\n\u003Cp>This site is a focused test bench for Norna’s managed media blocks, sidenotes,\npalettes and section-surface controls.\u003C/p>\n\u003Cp>Use \u003Ca href=\"/media/\">Media blocks\u003C/a> to compare image stacks, carousels, card lists and\nsidenotes. Use \u003Ca href=\"/surfaces/\">Surfaces\u003C/a> to inspect palettes and automatic section\nsurface sequences.\u003C/p>\n\u003Cp>Site identity, banners and footers have their own\n\u003Ca href=\"https://janga.github.io/norna/examples/feature-demos/sitewide-content/\">sitewide content demo\u003C/a>.\u003C/p>\n",{"headings":25,"localImagePaths":30,"remoteImagePaths":31,"frontmatter":32,"imagePaths":34},[26],{"depth":27,"slug":28,"text":29},2,"media-and-surfaces-intro","Media and surfaces {#intro}",[],[],{"title":14,"description":15,"navigation":33},{"label":17},[],"site-route-010-media",{"id":35,"data":37,"body":42,"filePath":43,"digest":44,"rendered":45},{"title":38,"description":39,"navigation":40,"sections":41},"Media blocks","Compare Norna's managed image stacks, carousels and card lists.",{"label":38},{},"## Image stack {#stack}\n\nAn image stack places one or more managed images in the normal Markdown flow.\nEach source file belongs in the section's image folder, and Norna creates the\nresponsive output used by the browser.{note-ref}\n\n{note: Local image references are validated against the image folder for this section before the site is built.}\n\n```norna-image-stack\n- image: stack-one.svg\n alt: A pale panel with a single large circle.\n caption: One image can introduce a visual idea.\n- image: stack-two.svg\n alt: A dark panel with three aligned blocks.\n caption: A stack can contain several related images.\n```\n\n## Image carousel {#carousel}\n\nA carousel keeps a related group together while showing one image at a time.\nThe controls, keyboard interaction and current position are provided by\nNorna.{note-ref}\n\n{note: The carousel provides controls, keyboard interaction and readable position status without route-specific components.}\n\n```norna-image-carousel\n- image: carousel-one.svg\n alt: A green panel with a diagonal line.\n caption: First frame: a broad direction.\n- image: carousel-two.svg\n alt: A blue panel with two overlapping circles.\n caption: Second frame: a closer relationship.\n- image: carousel-three.svg\n alt: A red panel with a compact grid.\n caption: Third frame: a denser detail.\n```\n\n## Card list {#cards}\n\nCards are useful when several short items need the same visual treatment. The\nblock controls the layout and size without requiring a component for each\ncard.{note-ref}\n\n{note: Card layout stays within named options, so the same content remains predictable at narrow widths.}\n\n```norna-card-list\nlayout: image-top\nflow: grid\nsize: m\nwidth: normal\n\n- title: Prepare source files\n text: Keep related content and images together before building the site.\n image: card-stack.svg\n- title: Review presentation\n text: Check the result at wide and narrow browser widths.\n image: card-carousel.svg\n- title: Publish the result\n text: Build validated static output when the site is ready.\n image: card-surfaces.svg\n```\n\nEach example is an ordinary Markdown block with a bounded presentation model.","site/routes/010-media/route-content.md","05bcd9122ddb040c",{"html":46,"metadata":47},"\u003Ch2 id=\"image-stack-stack\">Image stack {#stack}\u003C/h2>\n\u003Cp>An image stack places one or more managed images in the normal Markdown flow.\nEach source file belongs in the section’s image folder, and Norna creates the\nresponsive output used by the browser.{note-ref}\u003C/p>\n\u003Cp>{note: Local image references are validated against the image folder for this section before the site is built.}\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"plaintext\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan>- image: stack-one.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> alt: A pale panel with a single large circle.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> caption: One image can introduce a visual idea.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>- image: stack-two.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> alt: A dark panel with three aligned blocks.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> caption: A stack can contain several related images.\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"image-carousel-carousel\">Image carousel {#carousel}\u003C/h2>\n\u003Cp>A carousel keeps a related group together while showing one image at a time.\nThe controls, keyboard interaction and current position are provided by\nNorna.{note-ref}\u003C/p>\n\u003Cp>{note: The carousel provides controls, keyboard interaction and readable position status without route-specific components.}\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"plaintext\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan>- image: carousel-one.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> alt: A green panel with a diagonal line.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> caption: First frame: a broad direction.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>- image: carousel-two.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> alt: A blue panel with two overlapping circles.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> caption: Second frame: a closer relationship.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>- image: carousel-three.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> alt: A red panel with a compact grid.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> caption: Third frame: a denser detail.\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"card-list-cards\">Card list {#cards}\u003C/h2>\n\u003Cp>Cards are useful when several short items need the same visual treatment. The\nblock controls the layout and size without requiring a component for each\ncard.{note-ref}\u003C/p>\n\u003Cp>{note: Card layout stays within named options, so the same content remains predictable at narrow widths.}\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"plaintext\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan>layout: image-top\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>flow: grid\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>size: m\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>width: normal\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>- title: Prepare source files\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> text: Keep related content and images together before building the site.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> image: card-stack.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>- title: Review presentation\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> text: Check the result at wide and narrow browser widths.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> image: card-carousel.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>- title: Publish the result\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> text: Build validated static output when the site is ready.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan> image: card-surfaces.svg\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>Each example is an ordinary Markdown block with a bounded presentation model.\u003C/p>\n",{"headings":48,"localImagePaths":58,"remoteImagePaths":59,"frontmatter":60,"imagePaths":62},[49,52,55],{"depth":27,"slug":50,"text":51},"image-stack-stack","Image stack {#stack}",{"depth":27,"slug":53,"text":54},"image-carousel-carousel","Image carousel {#carousel}",{"depth":27,"slug":56,"text":57},"card-list-cards","Card list {#cards}",[],[],{"title":38,"description":39,"navigation":61},{"label":38},[],"site-route-020-surfaces",{"id":63,"data":65,"body":70,"filePath":71,"digest":72,"rendered":73},{"title":66,"description":67,"navigation":68,"sections":69},"Surfaces","See how palette defaults and section surfaces work together.",{"label":66},{},"## Palette options {#palette-options}\n\nNorna provides a small set of named palettes. The theme chooses one\nfor the whole site:\n\n```yaml\npresentation:\n palette: dark\n```\n\nThe available choices are `dark`, `light` and `paper`. A palette defines the\npage, navigation, frame and section colours together, so these parts stay in\nbalance.\n\n## Emphasis surface {#emphasis-surface}\n\nThe route theme uses a palette and a surface sequence when a visual pause or\nchange of rhythm helps the reader. This is not a free-form colour override:\n\n```yaml\npresentation:\n sectionSurfaces:\n mode: cycle\n sequence: [base, soft, emphasis]\n```\n\nThe theme can cycle through the selected surfaces automatically. Individual\nsections do not select their own colours.\n\n## A practical rule {#practical-rule}\n\nUse the site palette for the overall tone. Use soft and emphasis surfaces for a\nsmall number of meaningful transitions, not to make every section look\nunrelated.\n\nTypography presets and media blocks can vary the content inside that system;\nsurfaces provide the route-level rhythm around it.","site/routes/020-surfaces/route-content.md","0566cc76e3c9f696",{"html":74,"metadata":75},"\u003Ch2 id=\"palette-options-palette-options\">Palette options {#palette-options}\u003C/h2>\n\u003Cp>Norna provides a small set of named palettes. The theme chooses one\nfor the whole site:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"yaml\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\">presentation\u003C/span>\u003Cspan style=\"color:#E1E4E8\">:\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\"> palette\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#9ECBFF\">dark\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>The available choices are \u003Ccode>dark\u003C/code>, \u003Ccode>light\u003C/code> and \u003Ccode>paper\u003C/code>. A palette defines the\npage, navigation, frame and section colours together, so these parts stay in\nbalance.\u003C/p>\n\u003Ch2 id=\"emphasis-surface-emphasis-surface\">Emphasis surface {#emphasis-surface}\u003C/h2>\n\u003Cp>The route theme uses a palette and a surface sequence when a visual pause or\nchange of rhythm helps the reader. This is not a free-form colour override:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"yaml\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\">presentation\u003C/span>\u003Cspan style=\"color:#E1E4E8\">:\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\"> sectionSurfaces\u003C/span>\u003Cspan style=\"color:#E1E4E8\">:\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\"> mode\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#9ECBFF\">cycle\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\"> sequence\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: [\u003C/span>\u003Cspan style=\"color:#9ECBFF\">base\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, \u003C/span>\u003Cspan style=\"color:#9ECBFF\">soft\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, \u003C/span>\u003Cspan style=\"color:#9ECBFF\">emphasis\u003C/span>\u003Cspan style=\"color:#E1E4E8\">]\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>The theme can cycle through the selected surfaces automatically. Individual\nsections do not select their own colours.\u003C/p>\n\u003Ch2 id=\"a-practical-rule-practical-rule\">A practical rule {#practical-rule}\u003C/h2>\n\u003Cp>Use the site palette for the overall tone. Use soft and emphasis surfaces for a\nsmall number of meaningful transitions, not to make every section look\nunrelated.\u003C/p>\n\u003Cp>Typography presets and media blocks can vary the content inside that system;\nsurfaces provide the route-level rhythm around it.\u003C/p>\n",{"headings":76,"localImagePaths":86,"remoteImagePaths":87,"frontmatter":88,"imagePaths":90},[77,80,83],{"depth":27,"slug":78,"text":79},"palette-options-palette-options","Palette options {#palette-options}",{"depth":27,"slug":81,"text":82},"emphasis-surface-emphasis-surface","Emphasis surface {#emphasis-surface}",{"depth":27,"slug":84,"text":85},"a-practical-rule-practical-rule","A practical rule {#practical-rule}",[],[],{"title":66,"description":67,"navigation":89},{"label":66},[],"sitewide",["Map",93,94],"site-sitewide",{"id":93,"data":95,"filePath":100,"digest":101,"rendered":102},{"navigation":96,"banners":97,"footer":98},{"brand":14},[],{"copyrightMessage":99},"Norna media and surfaces example.","site/sitewide-content.md","a62822e81bc10bcf",{"html":103,"metadata":104},"",{"headings":105,"localImagePaths":106,"remoteImagePaths":107,"frontmatter":108,"imagePaths":111},[],[],[],{"navigation":109,"footer":110},{"brand":14},{"copyrightMessage":99},[],"theme",["Map",114,115],"theme.md",{"id":114,"data":116,"filePath":118,"digest":119,"rendered":120},{"preset":117},"project","site/theme.md","d19ab283a10fb060",{"html":103,"metadata":121},{"headings":122,"localImagePaths":123,"remoteImagePaths":124,"frontmatter":125,"imagePaths":126},[],[],[],{"preset":117},[]]

package/examples/feature-demos/media-and-surfaces/.astro/dev.log CHANGED Viewed

@@ -2,10 +2,23 @@
 {"message":"Generated 0ms","label":"types","level":"info"}
 {"message":"connected.","label":"vite","level":"info"}
 {"message":"Syncing content","label":"content","level":"info"}
+{"message":"Astro config changed","label":"content","level":"info"}
+{"message":"Clearing content store","label":"content","level":"info"}
 [Shiki] The language "norna-image-stack" doesn't exist, falling back to "plaintext".
 [Shiki] The language "norna-image-carousel" doesn't exist, falling back to "plaintext".
 [Shiki] The language "norna-card-list" doesn't exist, falling back to "plaintext".
 {"message":"Synced content","label":"content","level":"info"}
-{"message":" astro  v7.1.3 ready in 1166 ms\n┃ Local    http://127.0.0.1:49301/","label":"SKIP_FORMAT","level":"info"}
+{"message":" astro  v7.1.3 ready in 1203 ms\n┃ Local    http://127.0.0.1:4414/","label":"SKIP_FORMAT","level":"info"}
 {"message":"watching for file changes...","label":null,"level":"info"}
-{"message":"\n update  ▶ New version of Astro available: 7.2.4\n  Run npx @astrojs/upgrade to update\n","label":"SKIP_FORMAT","level":"warn"}
+{"message":"[200] / 54ms","label":null,"level":"info"}
+{"message":"[200] / 5ms","label":null,"level":"info"}
+[Shiki] The language "norna-image-stack" doesn't exist, falling back to "plaintext".
+[Shiki] The language "norna-image-carousel" doesn't exist, falling back to "plaintext".
+[Shiki] The language "norna-card-list" doesn't exist, falling back to "plaintext".
+{"message":"Reloaded data from routes/010-media/route-content.md","label":"glob-loader","level":"info"}
+{"message":"[200] / 14ms","label":null,"level":"info"}
+{"message":"A `getStaticPaths()` route pattern was matched, but no matching static path was found for requested path `/favicon.ico`.\n\nPossible dynamic routes being matched: ../../../src/pages/[slug].astro.","label":"router","level":"warn"}
+{"message":"[200] / 5ms","label":null,"level":"info"}
+{"message":"[200] /media/ 33ms","label":null,"level":"info"}
+{"message":"✨ new dependencies optimized: embla-carousel","label":"vite","level":"info"}
+{"message":"[200] /surfaces/ 12ms","label":null,"level":"info"}