@canopy-iiif/app 1.4.11 → 1.4.13

package/ui/dist/server.mjs

@@ -2415,7 +2415,7 @@ function References({
   return /* @__PURE__ */ React26.createElement("dl", { className: containerClass, ...rest }, /* @__PURE__ */ React26.createElement("div", { className: "references__group" }, /* @__PURE__ */ React26.createElement("dt", null, title), entries.map((entry) => /* @__PURE__ */ React26.createElement("dd", { key: entry.href, className: "references__item" }, /* @__PURE__ */ React26.createElement("a", { href: entry.href }, entry.title || entry.href)))));
 }
 
-// ui/src/content/Biblography.jsx
+// ui/src/content/Bibliography.jsx
 import React27 from "react";
 import bibliography from "@canopy-iiif/app/lib/components/bibliography.js";
 function resolveHeadingTag(tag, fallback) {
@@ -2429,17 +2429,17 @@ function NoteBody({ note }) {
     return /* @__PURE__ */ React27.createElement(
       "div",
       {
-        className: "biblography__note-body",
+        className: "bibliography__note-body",
         dangerouslySetInnerHTML: { __html: note.html }
       }
     );
   }
   if (note.text) {
-    return /* @__PURE__ */ React27.createElement("div", { className: "biblography__note-body" }, note.text);
+    return /* @__PURE__ */ React27.createElement("div", { className: "bibliography__note-body" }, note.text);
   }
   return null;
 }
-function Biblography({
+function Bibliography({
   className = "",
   pageHeadingTag = "h3"
 } = {}) {
@@ -2452,13 +2452,13 @@ function Biblography({
   }
   if (!entries.length) return null;
   const PageHeadingTag = resolveHeadingTag(pageHeadingTag, "h3");
-  const rootClass = ["biblography", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React27.createElement("section", { className: rootClass }, /* @__PURE__ */ React27.createElement("div", { className: "biblography__pages" }, entries.map((entry) => {
+  const rootClass = ["bibliography", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ React27.createElement("section", { className: rootClass }, /* @__PURE__ */ React27.createElement("div", { className: "bibliography__pages" }, entries.map((entry) => {
     const key = entry.href || entry.relativePath || entry.title;
     const pageTitle = entry.title || entry.href;
-    return /* @__PURE__ */ React27.createElement("article", { key, className: "biblography__page" }, /* @__PURE__ */ React27.createElement("header", { className: "biblography__page-header" }, pageTitle ? /* @__PURE__ */ React27.createElement(PageHeadingTag, { className: "biblography__page-title" }, pageTitle) : null, entry.href ? /* @__PURE__ */ React27.createElement("a", { className: "biblography__page-link", href: entry.href }, entry.href) : null), /* @__PURE__ */ React27.createElement("ol", { className: "biblography__notes" }, (entry.footnotes || []).map((note, idx) => {
+    return /* @__PURE__ */ React27.createElement("article", { key, className: "bibliography__page" }, /* @__PURE__ */ React27.createElement("header", { className: "bibliography__page-header" }, pageTitle ? /* @__PURE__ */ React27.createElement(PageHeadingTag, { className: "bibliography__page-title" }, pageTitle) : null, entry.href ? /* @__PURE__ */ React27.createElement("a", { className: "bibliography__page-link", href: entry.href }, entry.href) : null), /* @__PURE__ */ React27.createElement("ol", { className: "bibliography__notes" }, (entry.footnotes || []).map((note, idx) => {
       const noteKey = `${key || "entry"}-${note.identifier || idx}`;
-      return /* @__PURE__ */ React27.createElement("li", { key: noteKey, className: "biblography__note" }, note.identifier ? /* @__PURE__ */ React27.createElement("span", { className: "biblography__note-label" }, note.identifier) : null, /* @__PURE__ */ React27.createElement(NoteBody, { note }));
+      return /* @__PURE__ */ React27.createElement("li", { key: noteKey, className: "bibliography__note" }, note.identifier ? /* @__PURE__ */ React27.createElement("span", { className: "bibliography__note-label" }, note.identifier) : null, /* @__PURE__ */ React27.createElement(NoteBody, { note }));
     })));
   })));
 }
@@ -3836,8 +3836,14 @@ function RequiredStatement({ manifest, requiredStatement, ...rest }) {
   return /* @__PURE__ */ React38.createElement(CloverRequiredStatement, { requiredStatement: stmt, ...rest });
 }
 
-// ui/src/docs/CodeBlock.jsx
+// ui/src/iiif/Properties/Id.jsx
 import React39 from "react";
+function Id({ title = "IIIF Manifest", id, ...props }) {
+  return /* @__PURE__ */ React39.createElement("dl", null, /* @__PURE__ */ React39.createElement("dt", null, title), /* @__PURE__ */ React39.createElement("dd", null, /* @__PURE__ */ React39.createElement("a", { href: id }, id)));
+}
+
+// ui/src/docs/CodeBlock.jsx
+import React40 from "react";
 function parseHighlightAttr(attr) {
   if (!attr) return /* @__PURE__ */ new Set();
   const cleaned = String(attr || "").trim();
@@ -3883,10 +3889,10 @@ var highlightBaseStyle = {
 };
 function DocsCodeBlock(props = {}) {
   const { children, ...rest } = props;
-  const childArray = React39.Children.toArray(children);
-  const codeElement = childArray.find((el) => React39.isValidElement(el));
+  const childArray = React40.Children.toArray(children);
+  const codeElement = childArray.find((el) => React40.isValidElement(el));
   if (!codeElement || !codeElement.props) {
-    return React39.createElement("pre", props);
+    return React40.createElement("pre", props);
   }
   const {
     className = "",
@@ -3901,8 +3907,8 @@ function DocsCodeBlock(props = {}) {
   const highlightSet = parseHighlightAttr(highlightAttr);
   const copyAttr = codeProps["data-copy"];
   const enableCopy = copyAttr !== void 0 ? copyAttr === true || copyAttr === "true" || copyAttr === "" : false;
-  const [copied, setCopied] = React39.useState(false);
-  const handleCopy = React39.useCallback(async () => {
+  const [copied, setCopied] = React40.useState(false);
+  const handleCopy = React40.useCallback(async () => {
     const text = rawCode;
     try {
       if (typeof navigator !== "undefined" && navigator.clipboard && navigator.clipboard.writeText) {
@@ -3940,12 +3946,12 @@ function DocsCodeBlock(props = {}) {
     fontWeight: 700,
     background: "var(--color-accent-100)",
     borderBottom: "1px solid var(--color-accent-200)",
-    color: "var(--color-accent-900)"
+    color: "var(--color-gray-900)"
   };
   const preStyle = {
     margin: 0,
     background: "var(--color-accent-100)",
-    color: "var(--color-accent-700)",
+    color: "var(--color-accent-800)",
     lineHeight: 1.55,
     padding: "1rem 0",
     overflowX: "auto"
@@ -3967,31 +3973,30 @@ function DocsCodeBlock(props = {}) {
     const highlight = highlightSet.has(lineNumber);
     const style = highlight ? { ...baseLineStyle, ...highlightBaseStyle } : baseLineStyle;
     const displayLine = line === "" ? " " : line;
-    return React39.createElement(
+    return React40.createElement(
       "span",
       { key: lineNumber, style },
-      React39.createElement("span", { style: lineContentStyle }, displayLine)
+      React40.createElement("span", { style: lineContentStyle }, displayLine)
     );
   });
-  return React39.createElement(
+  return React40.createElement(
     "div",
     { style: containerStyle },
-    showHeader ? React39.createElement(
+    showHeader ? React40.createElement(
       "div",
       { style: headerStyle },
-      React39.createElement("span", null, showFilename ? filename : null),
-      enableCopy ? React39.createElement(
+      React40.createElement("span", null, showFilename ? filename : null),
+      enableCopy ? React40.createElement(
         "button",
         {
           type: "button",
           onClick: handleCopy,
           style: {
-            border: "1px solid var(--color-accent-300, #bfdbfe)",
+            border: "1px solid var(--color-accent-200, )",
             borderRadius: "6px",
             padding: "0.2rem 0.55rem",
             fontSize: "0.7rem",
             fontWeight: 500,
-            background: "color-mix(in srgb, var(--color-accent-100, #e0f2ff) 55%, #ffffff)",
             color: "var(--color-accent-700, #1d4ed8)",
             cursor: "pointer"
           }
@@ -3999,29 +4004,29 @@ function DocsCodeBlock(props = {}) {
         copied ? "Copied" : "Copy"
       ) : null
     ) : null,
-    React39.createElement(
+    React40.createElement(
       "pre",
       { ...preRest, className: preClassName, style: mergedPreStyle },
-      React39.createElement("code", { style: codeStyle }, lineElements)
+      React40.createElement("code", { style: codeStyle }, lineElements)
     )
   );
 }
 
 // ui/src/docs/MarkdownTable.jsx
-import React40 from "react";
+import React41 from "react";
 function MarkdownTable({ className = "", ...rest }) {
   const merged = ["markdown-table", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React40.createElement("div", { className: "markdown-table__frame" }, /* @__PURE__ */ React40.createElement("table", { className: merged, ...rest }));
+  return /* @__PURE__ */ React41.createElement("div", { className: "markdown-table__frame" }, /* @__PURE__ */ React41.createElement("table", { className: merged, ...rest }));
 }
 
 // ui/src/docs/Diagram.jsx
-import React41 from "react";
+import React42 from "react";
 function CanopyDiagram() {
-  return /* @__PURE__ */ React41.createElement("div", { className: "canopy-diagram" }, /* @__PURE__ */ React41.createElement("section", { className: "canopy-diagram__section canopy-diagram__section--collections" }, /* @__PURE__ */ React41.createElement("h3", null, "IIIF Collection(s)"), /* @__PURE__ */ React41.createElement("span", { className: "canopy-diagram__section-summary" }, "Source collections contribute 105 total manifests that Canopy retrieves as-is via IIIF endpoints."), /* @__PURE__ */ React41.createElement("div", { className: "canopy-diagram__grid" }, /* @__PURE__ */ React41.createElement("article", null, /* @__PURE__ */ React41.createElement("h4", null, "Collection A"), /* @__PURE__ */ React41.createElement("ul", null, /* @__PURE__ */ React41.createElement("li", null, "70 Manifests"), /* @__PURE__ */ React41.createElement("li", null, "IIIF Images + A/V"), /* @__PURE__ */ React41.createElement("li", null, "Textual Annotations"))), /* @__PURE__ */ React41.createElement("article", null, /* @__PURE__ */ React41.createElement("h4", null, "Collection B"), /* @__PURE__ */ React41.createElement("ul", null, /* @__PURE__ */ React41.createElement("li", null, "35 Manifests"), /* @__PURE__ */ React41.createElement("li", null, "IIIF Images + A/V"), /* @__PURE__ */ React41.createElement("li", null, "Textual Annotations"))))), /* @__PURE__ */ React41.createElement("div", { className: "canopy-diagram__arrow", "aria-hidden": "true" }, /* @__PURE__ */ React41.createElement("span", { className: "canopy-diagram__arrow-line" }), /* @__PURE__ */ React41.createElement("span", { className: "canopy-diagram__arrow-head" })), /* @__PURE__ */ React41.createElement("section", { className: "canopy-diagram__section canopy-diagram__section--build" }, /* @__PURE__ */ React41.createElement("h3", null, "Canopy Build Process"), /* @__PURE__ */ React41.createElement("span", { className: "canopy-diagram__section-summary" }, "Canopy syncs manifests, page content, and annotations before bundling the site."), /* @__PURE__ */ React41.createElement("div", { className: "canopy-diagram__grid" }, /* @__PURE__ */ React41.createElement("article", null, /* @__PURE__ */ React41.createElement("h4", null, "Automated content"), /* @__PURE__ */ React41.createElement("ul", null, /* @__PURE__ */ React41.createElement("li", null, "105 manifests \u2192 105 work pages"), /* @__PURE__ */ React41.createElement("li", null, "One page per manifest"), /* @__PURE__ */ React41.createElement("li", null, "Customize page layout"))), /* @__PURE__ */ React41.createElement("article", null, /* @__PURE__ */ React41.createElement("h4", null, "Contextual content"), /* @__PURE__ */ React41.createElement("ul", null, /* @__PURE__ */ React41.createElement("li", null, "Markdown & MDX pages"), /* @__PURE__ */ React41.createElement("li", null, "Author narratives"), /* @__PURE__ */ React41.createElement("li", null, "Reference manifests inline"))), /* @__PURE__ */ React41.createElement("article", null, /* @__PURE__ */ React41.createElement("h4", null, "Search index"), /* @__PURE__ */ React41.createElement("ul", null, /* @__PURE__ */ React41.createElement("li", null, "Combines works + pages"), /* @__PURE__ */ React41.createElement("li", null, "Customize result layout"), /* @__PURE__ */ React41.createElement("li", null, "Optional annotations"))))), /* @__PURE__ */ React41.createElement("div", { className: "canopy-diagram__arrow", "aria-hidden": "true" }, /* @__PURE__ */ React41.createElement("span", { className: "canopy-diagram__arrow-line" }), /* @__PURE__ */ React41.createElement("span", { className: "canopy-diagram__arrow-head" })), /* @__PURE__ */ React41.createElement("section", { className: "canopy-diagram__section canopy-diagram__section--output" }, /* @__PURE__ */ React41.createElement("h3", null, "Static Digital Project"), /* @__PURE__ */ React41.createElement("span", { className: "canopy-diagram__section-summary" }, "The output is a lightweight bundle of HTML, CSS, JS, and JSON assets that can deploy anywhere."), /* @__PURE__ */ React41.createElement("div", { className: "canopy-diagram__grid" }, /* @__PURE__ */ React41.createElement("article", null, /* @__PURE__ */ React41.createElement("h4", null, "Work pages"), /* @__PURE__ */ React41.createElement("ul", null, /* @__PURE__ */ React41.createElement("li", null, "105 generated HTML pages"), /* @__PURE__ */ React41.createElement("li", null, "Each links back to source manifests"), /* @__PURE__ */ React41.createElement("li", null, "Styled with Canopy components"))), /* @__PURE__ */ React41.createElement("article", null, /* @__PURE__ */ React41.createElement("h4", null, "Custom pages"), /* @__PURE__ */ React41.createElement("ul", null, /* @__PURE__ */ React41.createElement("li", null, "Markdown & MDX-authored content"), /* @__PURE__ */ React41.createElement("li", null, "Reusable layouts for narratives"), /* @__PURE__ */ React41.createElement("li", null, "Embed IIIF media & interstitials"))), /* @__PURE__ */ React41.createElement("article", null, /* @__PURE__ */ React41.createElement("h4", null, "Search bundle"), /* @__PURE__ */ React41.createElement("ul", null, /* @__PURE__ */ React41.createElement("li", null, "Static FlexSearch index"), /* @__PURE__ */ React41.createElement("li", null, "Works + pages share records"), /* @__PURE__ */ React41.createElement("li", null, "Optional annotation dataset"))))));
+  return /* @__PURE__ */ React42.createElement("div", { className: "canopy-diagram" }, /* @__PURE__ */ React42.createElement("section", { className: "canopy-diagram__section canopy-diagram__section--collections" }, /* @__PURE__ */ React42.createElement("h3", null, "IIIF Collection(s)"), /* @__PURE__ */ React42.createElement("span", { className: "canopy-diagram__section-summary" }, "Source collections contribute 105 total manifests that Canopy retrieves as-is via IIIF endpoints."), /* @__PURE__ */ React42.createElement("div", { className: "canopy-diagram__grid" }, /* @__PURE__ */ React42.createElement("article", null, /* @__PURE__ */ React42.createElement("h4", null, "Collection A"), /* @__PURE__ */ React42.createElement("ul", null, /* @__PURE__ */ React42.createElement("li", null, "70 Manifests"), /* @__PURE__ */ React42.createElement("li", null, "IIIF Images + A/V"), /* @__PURE__ */ React42.createElement("li", null, "Textual Annotations"))), /* @__PURE__ */ React42.createElement("article", null, /* @__PURE__ */ React42.createElement("h4", null, "Collection B"), /* @__PURE__ */ React42.createElement("ul", null, /* @__PURE__ */ React42.createElement("li", null, "35 Manifests"), /* @__PURE__ */ React42.createElement("li", null, "IIIF Images + A/V"), /* @__PURE__ */ React42.createElement("li", null, "Textual Annotations"))))), /* @__PURE__ */ React42.createElement("div", { className: "canopy-diagram__arrow", "aria-hidden": "true" }, /* @__PURE__ */ React42.createElement("span", { className: "canopy-diagram__arrow-line" }), /* @__PURE__ */ React42.createElement("span", { className: "canopy-diagram__arrow-head" })), /* @__PURE__ */ React42.createElement("section", { className: "canopy-diagram__section canopy-diagram__section--build" }, /* @__PURE__ */ React42.createElement("h3", null, "Canopy Build Process"), /* @__PURE__ */ React42.createElement("span", { className: "canopy-diagram__section-summary" }, "Canopy syncs manifests, page content, and annotations before bundling the site."), /* @__PURE__ */ React42.createElement("div", { className: "canopy-diagram__grid" }, /* @__PURE__ */ React42.createElement("article", null, /* @__PURE__ */ React42.createElement("h4", null, "Automated content"), /* @__PURE__ */ React42.createElement("ul", null, /* @__PURE__ */ React42.createElement("li", null, "105 manifests \u2192 105 work pages"), /* @__PURE__ */ React42.createElement("li", null, "One page per manifest"), /* @__PURE__ */ React42.createElement("li", null, "Customize page layout"))), /* @__PURE__ */ React42.createElement("article", null, /* @__PURE__ */ React42.createElement("h4", null, "Contextual content"), /* @__PURE__ */ React42.createElement("ul", null, /* @__PURE__ */ React42.createElement("li", null, "Markdown & MDX pages"), /* @__PURE__ */ React42.createElement("li", null, "Author narratives"), /* @__PURE__ */ React42.createElement("li", null, "Reference manifests inline"))), /* @__PURE__ */ React42.createElement("article", null, /* @__PURE__ */ React42.createElement("h4", null, "Search index"), /* @__PURE__ */ React42.createElement("ul", null, /* @__PURE__ */ React42.createElement("li", null, "Combines works + pages"), /* @__PURE__ */ React42.createElement("li", null, "Customize result layout"), /* @__PURE__ */ React42.createElement("li", null, "Optional annotations"))))), /* @__PURE__ */ React42.createElement("div", { className: "canopy-diagram__arrow", "aria-hidden": "true" }, /* @__PURE__ */ React42.createElement("span", { className: "canopy-diagram__arrow-line" }), /* @__PURE__ */ React42.createElement("span", { className: "canopy-diagram__arrow-head" })), /* @__PURE__ */ React42.createElement("section", { className: "canopy-diagram__section canopy-diagram__section--output" }, /* @__PURE__ */ React42.createElement("h3", null, "Static Digital Project"), /* @__PURE__ */ React42.createElement("span", { className: "canopy-diagram__section-summary" }, "The output is a lightweight bundle of HTML, CSS, JS, and JSON assets that can deploy anywhere."), /* @__PURE__ */ React42.createElement("div", { className: "canopy-diagram__grid" }, /* @__PURE__ */ React42.createElement("article", null, /* @__PURE__ */ React42.createElement("h4", null, "Work pages"), /* @__PURE__ */ React42.createElement("ul", null, /* @__PURE__ */ React42.createElement("li", null, "105 generated HTML pages"), /* @__PURE__ */ React42.createElement("li", null, "Each links back to source manifests"), /* @__PURE__ */ React42.createElement("li", null, "Styled with Canopy components"))), /* @__PURE__ */ React42.createElement("article", null, /* @__PURE__ */ React42.createElement("h4", null, "Custom pages"), /* @__PURE__ */ React42.createElement("ul", null, /* @__PURE__ */ React42.createElement("li", null, "Markdown & MDX-authored content"), /* @__PURE__ */ React42.createElement("li", null, "Reusable layouts for narratives"), /* @__PURE__ */ React42.createElement("li", null, "Embed IIIF media & interstitials"))), /* @__PURE__ */ React42.createElement("article", null, /* @__PURE__ */ React42.createElement("h4", null, "Search bundle"), /* @__PURE__ */ React42.createElement("ul", null, /* @__PURE__ */ React42.createElement("li", null, "Static FlexSearch index"), /* @__PURE__ */ React42.createElement("li", null, "Works + pages share records"), /* @__PURE__ */ React42.createElement("li", null, "Optional annotation dataset"))))));
 }
 
 // ui/src/docs/ThemeShowcase.jsx
-import React42 from "react";
+import React43 from "react";
 
 // ../../node_modules/@radix-ui/colors/index.mjs
 var colors_exports = {};
@@ -7873,21 +7878,21 @@ var STEP_MAP = {
   800: 11,
   900: 12
 };
-var Section = ({ title, description, children }) => /* @__PURE__ */ React42.createElement("div", { className: "canopy-theme-showcase__section" }, /* @__PURE__ */ React42.createElement("h3", { className: "canopy-theme-showcase__section-title" }, title), description ? /* @__PURE__ */ React42.createElement("p", { className: "canopy-theme-showcase__section-description" }, description) : null, children);
-var ColorScaleRow = ({ label, prefix }) => /* @__PURE__ */ React42.createElement("div", { className: "canopy-theme-showcase__scale-row" }, /* @__PURE__ */ React42.createElement("div", { className: "canopy-theme-showcase__scale-label" }, /* @__PURE__ */ React42.createElement("strong", null, label)), /* @__PURE__ */ React42.createElement("div", { className: "canopy-theme-showcase__scale-track" }, COLOR_STOPS.map((stop) => /* @__PURE__ */ React42.createElement(
+var Section = ({ title, description, children }) => /* @__PURE__ */ React43.createElement("div", { className: "canopy-theme-showcase__section" }, /* @__PURE__ */ React43.createElement("h3", { className: "canopy-theme-showcase__section-title" }, title), description ? /* @__PURE__ */ React43.createElement("p", { className: "canopy-theme-showcase__section-description" }, description) : null, children);
+var ColorScaleRow = ({ label, prefix }) => /* @__PURE__ */ React43.createElement("div", { className: "canopy-theme-showcase__scale-row" }, /* @__PURE__ */ React43.createElement("div", { className: "canopy-theme-showcase__scale-label" }, /* @__PURE__ */ React43.createElement("strong", null, label)), /* @__PURE__ */ React43.createElement("div", { className: "canopy-theme-showcase__scale-track" }, COLOR_STOPS.map((stop) => /* @__PURE__ */ React43.createElement(
   "div",
   {
     key: `${label}-${stop}`,
     className: "canopy-theme-showcase__scale-stop"
   },
-  /* @__PURE__ */ React42.createElement(
+  /* @__PURE__ */ React43.createElement(
     "span",
     {
       className: "canopy-theme-showcase__scale-chip",
       style: { backgroundColor: `var(${prefix}-${stop})` }
     }
   ),
-  /* @__PURE__ */ React42.createElement("span", { className: "canopy-theme-showcase__scale-token" }, stop)
+  /* @__PURE__ */ React43.createElement("span", { className: "canopy-theme-showcase__scale-token" }, stop)
 ))));
 var AVAILABLE = new Set(
   Object.keys(colors_exports).filter(
@@ -7898,108 +7903,6 @@ function normalizeAppearance(raw) {
   if (!raw) return "light";
   return String(raw).trim().toLowerCase() === "dark" ? "dark" : "light";
 }
-function darkenHex(hex, amount = 0.15) {
-  if (!hex) return hex;
-  const normalized = hex.replace("#", "");
-  if (!/^[0-9a-fA-F]{6}$/.test(normalized)) return hex;
-  const num = parseInt(normalized, 16);
-  const r = num >> 16 & 255;
-  const g = num >> 8 & 255;
-  const b = num & 255;
-  const clamp = (value) => Math.max(0, Math.min(255, Math.round(value)));
-  const toHex = (value) => clamp(value).toString(16).padStart(2, "0");
-  const factor = 1 - amount;
-  return `#${toHex(r * factor)}${toHex(g * factor)}${toHex(b * factor)}`;
-}
-function lightenHex(hex, amount = 0.15) {
-  if (!hex) return hex;
-  const normalized = hex.replace("#", "");
-  if (!/^[0-9a-fA-F]{6}$/.test(normalized)) return hex;
-  const num = parseInt(normalized, 16);
-  const r = num >> 16 & 255;
-  const g = num >> 8 & 255;
-  const b = num & 255;
-  const clamp = (value) => Math.max(0, Math.min(255, Math.round(value)));
-  const toHex = (value) => clamp(value).toString(16).padStart(2, "0");
-  const adjust = (value) => value + (255 - value) * amount;
-  return `#${toHex(adjust(r))}${toHex(adjust(g))}${toHex(adjust(b))}`;
-}
-function adjustSaturation(hex, amount = 0.15) {
-  if (!hex) return hex;
-  const normalized = hex.replace("#", "");
-  if (!/^[0-9a-fA-F]{6}$/.test(normalized)) return hex;
-  const num = parseInt(normalized, 16);
-  let r = (num >> 16 & 255) / 255;
-  let g = (num >> 8 & 255) / 255;
-  let b = (num & 255) / 255;
-  const max = Math.max(r, g, b);
-  const min = Math.min(r, g, b);
-  let h = 0;
-  let s = 0;
-  const l = (max + min) / 2;
-  if (max !== min) {
-    const d = max - min;
-    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-    switch (max) {
-      case r:
-        h = (g - b) / d + (g < b ? 6 : 0);
-        break;
-      case g:
-        h = (b - r) / d + 2;
-        break;
-      default:
-        h = (r - g) / d + 4;
-    }
-    h /= 6;
-  }
-  const delta = Number(amount);
-  if (!Number.isFinite(delta) || delta === 0) return hex;
-  s = Math.max(0, Math.min(1, s + delta));
-  const hueToRgb = (p, q, t) => {
-    if (t < 0) t += 1;
-    if (t > 1) t -= 1;
-    if (t < 1 / 6) return p + (q - p) * 6 * t;
-    if (t < 1 / 2) return q;
-    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
-    return p;
-  };
-  let rOut;
-  let gOut;
-  let bOut;
-  if (s === 0) {
-    rOut = gOut = bOut = l;
-  } else {
-    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-    const p = 2 * l - q;
-    rOut = hueToRgb(p, q, h + 1 / 3);
-    gOut = hueToRgb(p, q, h);
-    bOut = hueToRgb(p, q, h - 1 / 3);
-  }
-  const toHex = (value) => Math.round(Math.max(0, Math.min(1, value)) * 255).toString(16).padStart(2, "0");
-  return `#${toHex(rOut)}${toHex(gOut)}${toHex(bOut)}`;
-}
-function mixHexColors(colorA, colorB, amount = 0.5) {
-  const normalize = (hex) => hex && /^[0-9a-fA-F]{6}$/.test(hex.replace("#", "")) ? hex.replace("#", "") : null;
-  const first = normalize(colorA);
-  const second = normalize(colorB);
-  if (!first || !second) return colorA || colorB || null;
-  const a = parseInt(first, 16);
-  const b = parseInt(second, 16);
-  const clampAmount = Math.max(0, Math.min(1, Number(amount) || 0));
-  const mixChannel = (shift) => Math.round(
-    (a >> shift & 255) + ((b >> shift & 255) - (a >> shift & 255)) * clampAmount
-  );
-  const toHex = (value) => value.toString(16).padStart(2, "0");
-  const r = mixChannel(16);
-  const g = mixChannel(8);
-  const bl = mixChannel(0);
-  return `#${toHex(r)}${toHex(g)}${toHex(bl)}`;
-}
-function normalizeDarkenAmount(raw) {
-  const value = Number(raw);
-  if (!Number.isFinite(value)) return null;
-  return Math.min(0.95, Math.max(0, value));
-}
 function resolveRadixPalette(name, appearance) {
   if (!name || !AVAILABLE.has(name)) return null;
   const paletteKey = appearance === "dark" ? `${name}Dark` : name;
@@ -8014,7 +7917,6 @@ function toTailwindScale(name, options = {}) {
   const palette = resolveRadixPalette(name, appearance);
   if (!palette) return null;
   const scale = {};
-  const darken900Amount = normalizeDarkenAmount(options.darken900Amount);
   for (const lvl of LEVELS) {
     const radixStep = STEP_MAP[lvl];
     const key = `${name}${radixStep}`;
@@ -8022,20 +7924,6 @@ function toTailwindScale(name, options = {}) {
     if (!value) return null;
     scale[lvl] = value;
   }
-  const saturate700 = options.saturate700 !== false;
-  if (scale["700"]) {
-    let adjusted = appearance === "dark" ? lightenHex(scale["700"], 0.15) : darkenHex(scale["700"], 0.15);
-    if (saturate700) adjusted = adjustSaturation(adjusted, 0.15);
-    scale["700"] = adjusted;
-  }
-  const darkestKey = `${name}${STEP_MAP["900"]}`;
-  if (scale["800"] && palette[darkestKey]) {
-    const amount = darken900Amount != null ? darken900Amount : 0.25;
-    scale["900"] = appearance === "dark" ? lightenHex(palette[darkestKey], amount) : darkenHex(palette[darkestKey], amount);
-  }
-  if (scale["800"] && scale["900"]) {
-    scale["800"] = mixHexColors(scale["800"], scale["900"], 0.65);
-  }
   return scale;
 }
 function buildPreviewData() {
@@ -8069,9 +7957,9 @@ var PREVIEW_DATA = buildPreviewData();
 function encodeJson(value) {
   return JSON.stringify(value).replace(/</g, "\\u003c");
 }
-var ColorsLabeled = ({ colors, type, getRadixSwatch }) => /* @__PURE__ */ React42.createElement("div", { className: "canopy-theme-showcase__swatch-grid" }, colors.map((name) => {
+var ColorsLabeled = ({ colors, type, getRadixSwatch }) => /* @__PURE__ */ React43.createElement("div", { className: "canopy-theme-showcase__swatch-grid" }, colors.map((name) => {
   const colorValue = getRadixSwatch(name);
-  return /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React43.createElement(
     "button",
     {
       key: `${type}-${name}`,
@@ -8082,14 +7970,14 @@ var ColorsLabeled = ({ colors, type, getRadixSwatch }) => /* @__PURE__ */ React4
       "data-theme-swatch-value": name,
       "aria-pressed": "false"
     },
-    /* @__PURE__ */ React42.createElement(
+    /* @__PURE__ */ React43.createElement(
       "span",
       {
         className: "canopy-theme-showcase__swatch-chip",
         style: { background: colorValue || "var(--color-gray-200)" }
       }
     ),
-    /* @__PURE__ */ React42.createElement("span", { className: "canopy-theme-showcase__swatch-label" }, name)
+    /* @__PURE__ */ React43.createElement("span", { className: "canopy-theme-showcase__swatch-label" }, name)
   );
 }));
 function ThemeShowcase() {
@@ -8104,10 +7992,6 @@ function ThemeShowcase() {
   const styles = `
     .canopy-theme-showcase {
       margin: 2.618rem 0;
-      padding: 1.5rem;
-      border: 1px solid color-mix(in srgb, var(--color-gray-400) 40%, transparent);
-      border-radius: 0.85rem;
-      background: color-mix(in srgb, var(--color-gray-50) 78%, transparent);
     }
     .canopy-theme-showcase__appearance-buttons {
       display: inline-flex;
@@ -8222,7 +8106,8 @@ function ThemeShowcase() {
       align-items: center;
       gap: 0.35rem;
       cursor: pointer;
-      transition: border-color 0.2s ease, box-shadow 0.2s ease;
+      transition: border-color 0.2s ease, box-shadow 0.2s ease background 0.2s ease, color 0.2s ease;
+      font-weight: 300;
     }
     .canopy-theme-showcase__swatch:focus-visible {
       outline: 2px solid var(--color-accent-default);
@@ -8231,6 +8116,14 @@ function ThemeShowcase() {
     .canopy-theme-showcase__swatch[data-swatch-active="true"] {
       border-color: var(--color-accent-default);
       box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-200) 70%, transparent);
+      background: linear-gradient(135deg, var(--color-accent-50), var(--color-accent-100));
+      color: var(--color-gray-900);
+      font-weight: 400;
+    }
+    .canopy-theme-showcase__swatch[data-swatch-active="true"][data-theme-swatch-type="gray"]  {
+      border-color: var(--color-gray-default);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-gray-200) 70%, transparent);
+      background: linear-gradient(135deg, var(--color-gray-50), var(--color-gray-100));
     }
     .canopy-theme-showcase__swatch-chip {
       width: 100%;
@@ -8238,51 +8131,62 @@ function ThemeShowcase() {
       border-radius: 0.5rem;
     }
     .canopy-theme-showcase__swatch-label {
-      font-size: 0.8333rem;
+      font-size: 0.9222rem;
       margin-top: 0.1rem;
-      font-weight: 500;
-      text-transform: capitalize;
     }
     .canopy-theme-showcase__swatch-controls { display: none; }
     .canopy-theme-showcase__clear-button { display: none; }
   `;
-  return /* @__PURE__ */ React42.createElement("div", { className: "canopy-theme-showcase", "data-theme-showcase": true }, /* @__PURE__ */ React42.createElement("style", { dangerouslySetInnerHTML: { __html: styles } }), /* @__PURE__ */ React42.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", gap: "1rem", marginBottom: "1rem" } }, /* @__PURE__ */ React42.createElement(
-    Section,
-    {
-      title: "Appearance",
-      description: "Pick the base light or dark mode for the theme preview."
-    },
-    /* @__PURE__ */ React42.createElement("div", { className: "canopy-theme-showcase__appearance-buttons" }, ["light", "dark"].map((mode) => {
-      const label = `${mode.charAt(0).toUpperCase()}${mode.slice(1)}`;
-      const baseClass = "canopy-theme-showcase__appearance-button";
-      const isDefault = mode === DEFAULTS.appearance;
-      const className = isDefault ? `${baseClass} is-active` : baseClass;
-      return /* @__PURE__ */ React42.createElement(
-        "button",
-        {
-          key: mode,
-          type: "button",
-          className,
-          "data-theme-appearance": mode
-        },
-        label
-      );
-    }))
-  ), /* @__PURE__ */ React42.createElement(
-    "button",
+  return /* @__PURE__ */ React43.createElement("div", { className: "canopy-theme-showcase", "data-theme-showcase": true }, /* @__PURE__ */ React43.createElement("style", { dangerouslySetInnerHTML: { __html: styles } }), /* @__PURE__ */ React43.createElement(
+    "div",
     {
-      type: "button",
-      className: "canopy-theme-showcase__reset",
-      "data-theme-reset": true
+      style: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "flex-start",
+        gap: "1rem",
+        marginBottom: "1rem"
+      }
     },
-    "Reset"
-  )), /* @__PURE__ */ React42.createElement(
+    /* @__PURE__ */ React43.createElement(
+      Section,
+      {
+        title: "Appearance",
+        description: "Pick the base light or dark mode for the theme preview."
+      },
+      /* @__PURE__ */ React43.createElement("div", { className: "canopy-theme-showcase__appearance-buttons" }, ["light", "dark"].map((mode) => {
+        const label = `${mode.charAt(0).toUpperCase()}${mode.slice(1)}`;
+        const baseClass = "canopy-theme-showcase__appearance-button";
+        const isDefault = mode === DEFAULTS.appearance;
+        const className = isDefault ? `${baseClass} is-active` : baseClass;
+        return /* @__PURE__ */ React43.createElement(
+          "button",
+          {
+            key: mode,
+            type: "button",
+            className,
+            "data-theme-appearance": mode
+          },
+          label
+        );
+      }))
+    ),
+    /* @__PURE__ */ React43.createElement(
+      "button",
+      {
+        type: "button",
+        className: "canopy-theme-showcase__reset",
+        "data-theme-reset": true
+      },
+      "Reset"
+    )
+  ), /* @__PURE__ */ React43.createElement(
     Section,
     {
       title: "Color scales",
       description: "Accent and gray ramps from the active theme."
     },
-    /* @__PURE__ */ React42.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "1.5rem" } }, COLOR_SCALES.map((scale) => /* @__PURE__ */ React42.createElement(
+    /* @__PURE__ */ React43.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "1.5rem" } }, COLOR_SCALES.map((scale) => /* @__PURE__ */ React43.createElement(
       ColorScaleRow,
       {
         key: scale.label,
@@ -8290,21 +8194,35 @@ function ThemeShowcase() {
         prefix: scale.prefix
       }
     )))
-  ), /* @__PURE__ */ React42.createElement(
+  ), /* @__PURE__ */ React43.createElement(
     Section,
     {
       title: "Accent color palette options",
       description: "Click a swatch to temporarily override the accent palette."
     },
-    /* @__PURE__ */ React42.createElement(ColorsLabeled, { colors: accentColors, type: "accent", getRadixSwatch })
-  ), /* @__PURE__ */ React42.createElement(
+    /* @__PURE__ */ React43.createElement(
+      ColorsLabeled,
+      {
+        colors: accentColors,
+        type: "accent",
+        getRadixSwatch
+      }
+    )
+  ), /* @__PURE__ */ React43.createElement(
     Section,
     {
       title: "Gray color palette options",
       description: "Click a swatch to preview the neutral ramp for surfaces and text."
     },
-    /* @__PURE__ */ React42.createElement(ColorsLabeled, { colors: grayColors, type: "gray", getRadixSwatch })
-  ), /* @__PURE__ */ React42.createElement(
+    /* @__PURE__ */ React43.createElement(
+      ColorsLabeled,
+      {
+        colors: grayColors,
+        type: "gray",
+        getRadixSwatch
+      }
+    )
+  ), /* @__PURE__ */ React43.createElement(
     "script",
     {
       type: "application/json",
@@ -8314,7 +8232,7 @@ function ThemeShowcase() {
   ));
 }
 export {
-  Biblography,
+  Bibliography,
   Button,
   ButtonWrapper,
   CanopyBrand,
@@ -8328,6 +8246,7 @@ export {
   MarkdownTable as DocsMarkdownTable,
   GoogleAnalytics,
   HelloWorld,
+  Id,
   Image,
   interstitials_exports as Interstitials,
   Label,