@riebeckite/plugin-ux 0.0.3 → 0.0.6

package/dist/client.js

@@ -200,7 +200,9 @@ function setupTocScrollSpy() {
   scheduleOnScroll(updateActive);
 }
 function setupCodeCopy(config) {
-  const blocks = Array.from(document.querySelectorAll("pre > code"));
+  const blocks = Array.from(
+    document.querySelectorAll("pre > code")
+  );
   for (const code of blocks) {
     const pre = code.parentElement;
     if (!pre || pre.dataset.rbUxCopy === "true") continue;

package/dist/index.js

@@ -6,6 +6,9 @@ import {
   isPublished
 } from "@riebeckite/core";
 
+// src/inject.ts
+import { escapeScriptJson } from "@riebeckite/core";
+
 // src/options.ts
 var UX_CONFIG_ELEMENT_ID = "rb-ux-config";
 var UX_CONFIG_ATTRIBUTE = "data-rb-ux-config";
@@ -41,7 +44,7 @@ function normalizeLabel(value, fallback) {
 
 // src/inject.ts
 function renderUxConfigElement(config) {
-  const json = JSON.stringify(config).replace(/</g, "\\u003c").replace(/>/g, "\\u003e");
+  const json = escapeScriptJson(JSON.stringify(config));
   return `<script type="application/json" id="${UX_CONFIG_ELEMENT_ID}" ${UX_CONFIG_ATTRIBUTE}>${json}</script>`;
 }
 function injectUxConfig(html, config) {

package/dist/src/inject.d.ts

@@ -4,7 +4,8 @@ import { type UxResolvedConfig } from "./options.js";
  *
  * Client initializers are static and receive no plugin options, so the build
  * injects this element into the article HTML and reads it back at runtime.
- * `<` and `>` are escaped so labels can never terminate the script element.
+ * `escapeScriptJson` neutralizes `<`, `>`, `&`, U+2028 and U+2029 so labels
+ * can never terminate the script element.
  */
 export declare function renderUxConfigElement(config: UxResolvedConfig): string;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-ux",
-  "version": "0.0.3",
+  "version": "0.0.6",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -21,7 +21,7 @@
     "./style.css": "./style.css"
   },
   "dependencies": {
-    "@riebeckite/core": "0.0.3"
+    "@riebeckite/core": "0.0.6"
   },
   "publishConfig": {
     "access": "public"

package/style.css

@@ -1,127 +1,123 @@
-.rb-ux__progress {
-  position: fixed;
-  inset-block-start: 0;
-  inset-inline: 0;
-  z-index: 60;
-  height: 3px;
-  pointer-events: none;
-  background: color-mix(
-    in srgb,
-    var(--rb-color-ink, #1c1a17) 8%,
-    transparent
-  );
-}
-
-.rb-ux__progress-bar {
-  display: block;
-  width: 100%;
-  height: 100%;
-  transform: scaleX(0);
-  transform-origin: left center;
-  background: var(--rb-color-accent, #686868);
-  transition: transform 100ms linear;
-}
-
-.rb-ux__back-to-top {
-  position: fixed;
-  inset-block-end: 1.5rem;
-  inset-inline-end: 1.5rem;
-  z-index: 60;
-  display: grid;
-  place-items: center;
-  width: 2.75rem;
-  height: 2.75rem;
-  padding: 0;
-  border: 1px solid
-    var(--rb-color-border-strong, var(--rb-color-border, #d0ccc4));
-  border-radius: 999px;
-  background: var(--rb-color-surface, var(--rb-color-paper, #ffffff));
-  color: var(--rb-color-ink, #1c1a17);
-  font-size: 1.15rem;
-  line-height: 1;
-  cursor: pointer;
-  opacity: 0;
-  visibility: hidden;
-  transform: translateY(0.5rem);
-  transition:
-    opacity 150ms ease,
-    transform 150ms ease,
-    visibility 150ms ease;
-}
-
-.rb-ux__back-to-top--visible {
-  opacity: 1;
-  visibility: visible;
-  transform: none;
-}
-
-.rb-ux__back-to-top:hover {
-  background: var(--rb-color-surface-hover, var(--rb-color-surface, #f4f2ee));
-}
-
-.rb-ux__back-to-top:focus-visible {
-  outline: 2px solid var(--rb-color-accent, #686868);
-  outline-offset: 2px;
-}
-
-.rb-ux__toc-active {
-  color: var(--rb-color-accent, #686868);
-  font-weight: 600;
-}
-
-.rb-ux__code {
-  position: relative;
-}
-
-.rb-ux__copy {
-  position: absolute;
-  inset-block-start: 0.5rem;
-  inset-inline-end: 0.5rem;
-  z-index: 1;
-  padding: 0.2rem 0.5rem;
-  border: 1px solid
-    var(--rb-color-border, color-mix(in srgb, currentColor 20%, transparent));
-  border-radius: 4px;
-  background: var(--rb-color-surface, var(--rb-color-paper, #ffffff));
-  color: var(--rb-color-muted, #69645c);
-  font-size: 0.75rem;
-  line-height: 1.4;
-  cursor: pointer;
-  opacity: 0.9;
-  transition:
-    opacity 120ms ease,
-    color 120ms ease,
-    border-color 120ms ease;
-}
-
-.rb-ux__copy:hover,
-.rb-ux__copy:focus-visible {
-  opacity: 1;
-  color: var(--rb-color-ink, #1c1a17);
-}
-
-.rb-ux__copy:focus-visible {
-  outline: 2px solid var(--rb-color-accent, #686868);
-  outline-offset: 2px;
-}
-
-.rb-ux__copy--copied {
-  color: var(--rb-color-accent, #686868);
-  border-color: var(--rb-color-accent, #686868);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .rb-ux__progress-bar,
-  .rb-ux__back-to-top,
-  .rb-ux__copy {
-    transition: none;
-  }
-}
-
-@media print {
-  .rb-ux__progress,
-  .rb-ux__back-to-top,
-  .rb-ux__copy {
-    display: none;
-  }
-}
+.rb-ux__progress {
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline: 0;
+  z-index: 60;
+  height: 3px;
+  pointer-events: none;
+  background: color-mix(in srgb, var(--rb-color-ink, #1c1a17) 8%, transparent);
+}
+
+.rb-ux__progress-bar {
+  display: block;
+  width: 100%;
+  height: 100%;
+  transform: scaleX(0);
+  transform-origin: left center;
+  background: var(--rb-color-accent, #686868);
+  transition: transform 100ms linear;
+}
+
+.rb-ux__back-to-top {
+  position: fixed;
+  inset-block-end: 1.5rem;
+  inset-inline-end: 1.5rem;
+  z-index: 60;
+  display: grid;
+  place-items: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  padding: 0;
+  border: 1px solid
+    var(--rb-color-border-strong, var(--rb-color-border, #d0ccc4));
+  border-radius: 999px;
+  background: var(--rb-color-surface, var(--rb-color-paper, #ffffff));
+  color: var(--rb-color-ink, #1c1a17);
+  font-size: 1.15rem;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(0.5rem);
+  transition:
+    opacity 150ms ease,
+    transform 150ms ease,
+    visibility 150ms ease;
+}
+
+.rb-ux__back-to-top--visible {
+  opacity: 1;
+  visibility: visible;
+  transform: none;
+}
+
+.rb-ux__back-to-top:hover {
+  background: var(--rb-color-surface-hover, var(--rb-color-surface, #f4f2ee));
+}
+
+.rb-ux__back-to-top:focus-visible {
+  outline: 2px solid var(--rb-color-accent, #686868);
+  outline-offset: 2px;
+}
+
+.rb-ux__toc-active {
+  color: var(--rb-color-accent, #686868);
+  font-weight: 600;
+}
+
+.rb-ux__code {
+  position: relative;
+}
+
+.rb-ux__copy {
+  position: absolute;
+  inset-block-start: 0.5rem;
+  inset-inline-end: 0.5rem;
+  z-index: 1;
+  padding: 0.2rem 0.5rem;
+  border: 1px solid
+    var(--rb-color-border, color-mix(in srgb, currentColor 20%, transparent));
+  border-radius: 4px;
+  background: var(--rb-color-surface, var(--rb-color-paper, #ffffff));
+  color: var(--rb-color-muted, #69645c);
+  font-size: 0.75rem;
+  line-height: 1.4;
+  cursor: pointer;
+  opacity: 0.9;
+  transition:
+    opacity 120ms ease,
+    color 120ms ease,
+    border-color 120ms ease;
+}
+
+.rb-ux__copy:hover,
+.rb-ux__copy:focus-visible {
+  opacity: 1;
+  color: var(--rb-color-ink, #1c1a17);
+}
+
+.rb-ux__copy:focus-visible {
+  outline: 2px solid var(--rb-color-accent, #686868);
+  outline-offset: 2px;
+}
+
+.rb-ux__copy--copied {
+  color: var(--rb-color-accent, #686868);
+  border-color: var(--rb-color-accent, #686868);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rb-ux__progress-bar,
+  .rb-ux__back-to-top,
+  .rb-ux__copy {
+    transition: none;
+  }
+}
+
+@media print {
+  .rb-ux__progress,
+  .rb-ux__back-to-top,
+  .rb-ux__copy {
+    display: none;
+  }
+}