@studiocms/ui 1.0.0-beta.1 → 1.0.0-beta.3

package/dist/components/Toggle/toggle.css

@@ -2,9 +2,9 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: .5rem;
+  gap: 0.5rem;
   position: relative;
-  margin: .25rem 0;
+  margin: 0.25rem 0;
 }
 .sui-toggle-label.disabled {
   opacity: 0.5;
@@ -20,7 +20,7 @@
   display: flex;
   align-items: center;
   cursor: pointer;
-  transition: all .15s ease;
+  transition: all 0.15s ease;
   background-color: var(--default-base);
   width: var(--toggle-width);
   height: var(--toggle-height);
@@ -30,11 +30,11 @@
   --switch: calc(var(--toggle-height) * 1.75);
   height: var(--switch);
   width: var(--switch);
-  background-color: var(--text-muted);
+  background-color: var(--background-gray);
   border-radius: var(--radius-full);
   position: relative;
   left: 0;
-  transition: all .15s ease;
+  transition: all 0.15s ease;
   will-change: transform;
 }
 .sui-toggle-switch:focus-visible {
@@ -60,7 +60,7 @@
   --switch: calc(var(--toggle-height) * 1.65);
 }
 .sui-toggle-label.primary .sui-toggle-container:has(.sui-toggle-checkbox:checked) {
-  background-color: var(--primary-base);
+  background-color: var(--primary-vibrant);
 }
 .sui-toggle-label.success .sui-toggle-container:has(.sui-toggle-checkbox:checked) {
   background-color: var(--success-base);
@@ -69,10 +69,10 @@
   background-color: var(--warning-base);
 }
 .sui-toggle-label.danger .sui-toggle-container:has(.sui-toggle-checkbox:checked) {
-  background-color: var(--danger-base);
+  background-color: var(--danger-vibrant);
 }
 .sui-toggle-label.info .sui-toggle-container:has(.sui-toggle-checkbox:checked) {
-  background-color: var(--info-base);
+  background-color: var(--info-vibrant);
 }
 .sui-toggle-label.mono .sui-toggle-container:has(.sui-toggle-checkbox:checked) {
   background-color: var(--mono-base);
@@ -81,7 +81,7 @@
   border: 1px solid var(--text-inverted);
 }
 .req-star {
-  color: var(--danger-base);
+  color: var(--danger-vibrant);
   font-weight: 700;
 }
 .sui-toggle-checkbox {

package/dist/components/Toggle/toggle.js

@@ -17,6 +17,7 @@ function loadToggles() {
     box.dataset.initialized = "true";
     box.addEventListener("change", (e) => {
       box.previousSibling.ariaChecked = e.target.checked ? "true" : "false";
+      box.ariaChecked = e.target.checked ? "true" : "false";
     });
   }
 }

package/dist/components/User/User.astro

@@ -1,5 +1,5 @@
 ---
-// @ts-ignore
+// @ts-expect-error
 import { Image } from 'astro:assets';
 import Icon from '../Icon/Icon.astro';
 import './user.css';

package/dist/components/User/user.css

@@ -22,14 +22,14 @@
 .sui-text-content {
   display: flex;
   flex-direction: column;
-  gap: .125rem;
+  gap: 0.125rem;
 }
 .sui-name {
   font-size: 1em;
   font-weight: 600;
 }
 .sui-description {
-  font-size: .875em;
+  font-size: 0.875em;
   font-weight: 400;
   color: var(--text-muted);
 }

package/dist/css/colors.css

@@ -9,89 +9,104 @@
 :root {
   --background-base: hsl(0 0% 6%);
   --background-step-1: hsl(0 0% 8%);
-  --background-step-2: hsl(0 0% 10%);
-  --background-step-3: hsl(0 0% 14%);
+  --background-step-2: hsl(0, 0%, 9%);
+  --background-step-3: hsl(0, 0%, 12%);
+  --background-gray: hsl(0 0% 50%);
   --text-normal: hsl(0 0% 100%);
-  --text-dimmed: hsl(0 0% 80%);
-  --text-muted: hsl(0 0% 54%);
+  --text-dimmed: hsl(0 0% 100% / 0.8);
+  --text-muted: hsl(0 0% 100% / 0.75);
   --text-inverted: hsl(0 0% 0%);
+  --text-inverted-dimmed: hsl(0 0% 0% / 0.7);
+  --text-inverted-muted: hsl(0 0% 0% / 0.65);
   --border: hsl(240 5% 17%);
-  --shadow: hsl(0 0% 0% / 0.5);
-  --default-base: hsl(0 0% 14%);
-  --default-hover: hsl(0 0% 21%);
-  --default-active: hsl(0 0% 15%);
-  --primary-base: hsl(259 83% 73%);
-  --primary-hover: hsl(259 77% 78%);
-  --primary-active: hsl(259 73% 67%);
-  --success-base: hsl(142 71% 46%);
-  --success-hover: hsl(142 72% 61%);
-  --success-active: hsl(142 87% 52%);
-  --warning-base: hsl(48 96% 53%);
-  --warning-hover: hsl(48 97% 70%);
-  --warning-active: hsl(48 100% 61%);
-  --danger-base: hsl(339 97% 31%);
-  --danger-hover: hsl(337 98% 37%);
-  --danger-active: hsl(337 88% 32%);
-  --info-base: hsl(217 92% 52%);
-  --info-hover: hsl(214 95% 58%);
-  --info-active: hsl(214 85% 52%);
+  --shadow: hsl(0 0% 0% / 0.6);
+  --default-base: hsl(0, 0%, 12%);
+  --default-hover: hsl(0, 0%, 17%);
+  --default-active: hsl(0, 0%, 14%);
+  --primary-base: hsl(259, 60%, 71%);
+  --primary-hover: hsl(259, 71%, 79%);
+  --primary-active: hsl(259, 75%, 74%);
+  --primary-vibrant: hsl(259, 75%, 74%);
+  --success-base: hsl(142, 69%, 46%);
+  --success-hover: hsl(142, 67%, 59%);
+  --success-active: hsl(142, 84%, 55%);
+  --warning-base: hsl(48, 92%, 55%);
+  --warning-hover: hsl(48, 95%, 66%);
+  --warning-active: hsl(48, 93%, 58%);
+  --danger-base: hsl(339, 91%, 22%);
+  --danger-hover: hsl(337, 90%, 27%);
+  --danger-active: hsl(337, 90%, 25%);
+  --danger-vibrant: hsl(339, 91%, 42%);
+  --info-base: hsl(214, 96%, 22%);
+  --info-hover: hsl(214, 92%, 26%);
+  --info-active: hsl(214, 94%, 24%);
+  --info-vibrant: hsl(214, 84%, 49%);
   --mono-base: hsl(0 0% 100%);
   --mono-hover: hsl(0 0% 90%);
   --mono-active: hsl(0 0% 95%);
   --text-light: hsl(0 0% 100%);
   --text-dark: hsl(0 0% 0%);
   --default-flat: hsl(0 0% 14% / 0.5);
-  --default-flat-hover: hsl(0 0% 14% / 0.75);
-  --default-flat-active: hsl(0 0% 14% / 0.85);
+  --default-flat-hover: hsl(0 0% 14% / 0.85);
+  --default-flat-active: hsl(0 0% 14% / 0.75);
   --primary-flat: hsl(259 83% 73% / 0.1);
-  --primary-flat-hover: hsl(259 83% 73% / 0.25);
-  --primary-flat-active: hsl(259 83% 73% / 0.35);
+  --primary-flat-hover: hsl(259 83% 73% / 0.35);
+  --primary-flat-active: hsl(259 83% 73% / 0.25);
   --success-flat: hsl(142 71% 46% / 0.1);
-  --success-flat-hover: hsl(142 71% 46% / 0.25);
-  --success-flat-active: hsl(142 71% 46% / 0.35);
+  --success-flat-hover: hsl(142 71% 46% / 0.35);
+  --success-flat-active: hsl(142 71% 46% / 0.25);
   --warning-flat: hsl(48 96% 53% / 0.1);
-  --warning-flat-hover: hsl(48 96% 53% / 0.25);
-  --warning-flat-active: hsl(48 96% 53% / 0.35);
+  --warning-flat-hover: hsl(48 96% 53% / 0.35);
+  --warning-flat-active: hsl(48 96% 53% / 0.25);
   --danger-flat: hsl(339 97% 31% / 0.1);
-  --danger-flat-hover: hsl(339 97% 31% / 0.25);
-  --danger-flat-active: hsl(339 97% 31% / 0.35);
+  --danger-flat-hover: hsl(339 97% 31% / 0.35);
+  --danger-flat-active: hsl(339 97% 31% / 0.25);
   --info-flat: hsl(217 92% 52% / 0.1);
-  --info-flat-hover: hsl(217 92% 52% / 0.25);
-  --info-flat-active: hsl(217 92% 52% / 0.35);
-  --mono-flat: hsl(0 0% 100% / 0.1);
-  --mono-flat-hover: hsl(0 0% 100% / 0.25);
-  --mono-flat-active: hsl(0 0% 100% / 0.35);
+  --info-flat-hover: hsl(217 92% 52% / 0.35);
+  --info-flat-active: hsl(217 92% 52% / 0.25);
+  --mono-flat: hsl(0 0% 70% / 0.1);
+  --mono-flat-hover: hsl(0 0% 70% / 0.35);
+  --mono-flat-active: hsl(0 0% 70% / 0.25);
 }
 [data-theme=light] {
   --background-base: hsl(0 0% 97%);
-  --background-step-1: hsl(0 0% 90%);
-  --background-step-2: hsl(0 0% 85%);
-  --background-step-3: hsl(0 0% 80%);
+  --background-step-1: hsl(0 0% 95%);
+  --background-step-2: hsl(0 0% 92%);
+  --background-step-3: hsl(0 0% 89%);
+  --background-gray: hsl(0 0% 50%);
   --text-normal: hsl(0 0% 0%);
-  --text-dimmed: hsl(0 0% 12%);
-  --text-muted: hsl(0 0% 24%);
+  --text-dimmed: hsl(0 0% 0% / 0.8);
+  --text-muted: hsl(0 0% 0% / 0.75);
   --text-inverted: hsl(0 0% 100%);
+  --text-inverted-dimmed: hsl(0 0% 100% / 0.85);
+  --text-inverted-muted: hsl(0 0% 100% / 0.75);
   --border: hsl(263 5% 68%);
-  --shadow: hsl(0 0% 65% / 0.5);
-  --default-base: hsl(0 0% 74%);
-  --default-hover: hsl(0 0% 81%);
-  --default-active: hsl(0 0% 91%);
-  --primary-base: hsl(259 85% 61%);
-  --primary-hover: hsl(259 78% 56%);
-  --primary-active: hsl(259 71% 50%);
-  --success-base: hsl(142 59% 47%);
-  --success-hover: hsl(142 62% 56%);
-  --success-active: hsl(142 87% 59%);
-  --warning-base: hsl(48 92% 46%);
-  --warning-hover: hsl(48 88% 43%);
-  --warning-active: hsl(48 85% 40%);
-  --danger-base: hsl(339 97% 31%);
-  --danger-hover: hsl(337 98% 37%);
-  --danger-active: hsl(337 88% 45%);
-  --info-base: hsl(217 92% 52%);
-  --info-hover: hsl(214 95% 58%);
-  --info-active: hsl(214 85% 52%);
-  --mono-base: hsl(0 0% 0%);
-  --mono-hover: hsl(0 0% 10%);
-  --mono-active: hsl(0 0% 5%);
+  --shadow: hsl(0 0% 65% / 0.6);
+  --default-base: hsl(0, 0%, 82%);
+  --default-hover: hsl(0, 0%, 91%);
+  --default-active: hsl(0, 0%, 86%);
+  --primary-base: hsl(259, 74%, 25%);
+  --primary-hover: hsl(259, 76%, 35%);
+  --primary-active: hsl(259, 76%, 32%);
+  --primary-vibrant: hsl(259, 75%, 45%);
+  --success-base: hsl(142, 60%, 44%);
+  --success-hover: hsl(142, 60%, 55%);
+  --success-active: hsl(142 60% 50%);
+  --warning-base: hsl(48, 84%, 42%);
+  --warning-hover: hsl(48, 85%, 49%);
+  --warning-active: hsl(48, 86%, 45%);
+  --danger-base: hsl(339, 93%, 15%);
+  --danger-hover: hsl(337, 88%, 22%);
+  --danger-active: hsl(337, 89%, 19%);
+  --danger-vibrant: hsl(339, 86%, 38%);
+  --info-base: hsl(214, 96%, 22%);
+  --info-hover: hsl(214, 92%, 26%);
+  --info-active: hsl(214, 94%, 24%);
+  --info-vibrant: hsl(214, 88%, 39%);
+  --mono-base: hsl(0 0% 10%);
+  --mono-hover: hsl(0 0% 16%);
+  --mono-active: hsl(0 0% 14%);
+  --default-flat: hsl(0 0% 70% / 0.5);
+  --default-flat-hover: hsl(0 0% 70% / 0.85);
+  --default-flat-active: hsl(0 0% 70% / 0.75);
 }

package/dist/index.d.ts

@@ -35,6 +35,13 @@ type Options = {
      */
     icons?: Record<string, IconifyJSON>;
 };
+type IconifyCollections = {
+    collections: Record<string, IconifyJSON>;
+    collectionNames: string[];
+    integrationCollections: string | undefined;
+    availableIcons: string[];
+};
+export declare function createIconifyCollection(icons?: Record<string, IconifyJSON>): IconifyCollections;
 /**
  * The Astro integration for StudioCMS UI.
  *

package/dist/index.js

@@ -1,32 +1,26 @@
 import fs from "node:fs";
 import { icons as heroicons } from "@iconify-json/heroicons";
+import { addVirtualImports, createResolver } from "astro-integration-kit";
 import transitionEventPolyfill from "astro-transition-event-polyfill";
 import { studiocmsLogo } from "./toolbar/icon.js";
-import { addVirtualImports, createResolver } from "./utils/integration-utils.js";
+import { generateIconTypes } from "./utils/typegen.js";
 const pkgJson = JSON.parse(fs.readFileSync(new URL("../package.json", import.meta.url), "utf-8"));
-function createIconifyPrefixCollection(icons) {
-  const iconCollections = [];
-  const integrationCollections = [];
+function createIconifyCollection(icons) {
+  const collections = {};
+  const collectionNames = [];
   const availableIcons = [];
   if (!icons) {
-    return {
-      iconCollections,
-      integrationCollections,
-      availableIcons
-    };
+    return { collections, collectionNames, integrationCollections: void 0, availableIcons };
   }
   for (const [prefix, collection] of Object.entries(icons)) {
-    iconCollections.push(prefix);
-    integrationCollections.push(`export const ${prefix} = ${JSON.stringify(collection)};`);
+    collections[prefix] = collection;
+    collectionNames.push(prefix);
     for (const icon of Object.keys(collection.icons)) {
       availableIcons.push(`${prefix}:${icon}`);
     }
   }
-  return {
-    iconCollections,
-    integrationCollections,
-    availableIcons
-  };
+  const integrationCollections = `export const collections = ${JSON.stringify(collections)};`;
+  return { collections, collectionNames, integrationCollections, availableIcons };
 }
 function integration(options = {}) {
   const { resolve } = createResolver(import.meta.url);
@@ -34,13 +28,16 @@ function integration(options = {}) {
     heroicons
   };
   let icons = {
-    iconCollections: [],
-    integrationCollections: [],
+    collections: {},
+    collectionNames: [],
+    integrationCollections: void 0,
     availableIcons: []
   };
   return {
     name: "@studiocms/ui",
     hooks: {
+      /* v8 ignore start */
+      /** Astro integrations cannot be properly tested for code coverage */
       "astro:config:setup": (params) => {
         const { addDevToolbarApp, injectScript, updateConfig } = params;
         const { resolve: rootResolve } = createResolver(params.config.root.pathname);
@@ -54,7 +51,7 @@ function integration(options = {}) {
             }
           }
         }
-        icons = createIconifyPrefixCollection(optIcons);
+        icons = createIconifyCollection(optIcons);
         const componentMap = {
           "studiocms:ui/components/button": `export { default as Button } from '${resolve("./components/Button/Button.astro")}';`,
           "studiocms:ui/components/divider": `export { default as Divider } from '${resolve("./components/Divider/Divider.astro")}';`,
@@ -72,7 +69,7 @@ function integration(options = {}) {
           "studiocms:ui/components/card": `export { default as Card } from '${resolve("./components/Card/Card.astro")}';`,
           "studiocms:ui/components/modal": `
 						export { default as Modal } from '${resolve("./components/Modal/Modal.astro")}';
-						export { ModalHelper } from '${resolve("./components/Modal/modal.js")}';	
+						export { ModalHelper } from '${resolve("./components/Modal/modal.js")}';
 					`,
           "studiocms:ui/components/select": `
 						export { default as Select } from '${resolve("./components/Select/Select.astro")}';
@@ -80,7 +77,7 @@ function integration(options = {}) {
 					`,
           "studiocms:ui/components/dropdown": `
 						export { default as Dropdown } from '${resolve("./components/Dropdown/Dropdown.astro")}';
-						export { DropdownHelper } from '${resolve("./components/Dropdown/dropdown.js")}';	
+						export { DropdownHelper } from '${resolve("./components/Dropdown/dropdown.js")}';
 					`,
           "studiocms:ui/components/user": `export { default as User } from '${resolve("./components/User/User.astro")}';`,
           "studiocms:ui/components/tabs": `
@@ -143,11 +140,9 @@ function integration(options = {}) {
 							export { ThemeHelper, Theme } from '${resolve("./utils/ThemeHelper.js")}';
 						`,
             "studiocms:ui/icons": `
-							${icons.integrationCollections.join("\n")}
-
+							${icons.integrationCollections ? icons.integrationCollections : ""}
 							export const availableIcons = ${JSON.stringify(icons.availableIcons)};
-
-							export const iconCollections = ${JSON.stringify(icons.iconCollections)};
+							export const iconCollections = ${JSON.stringify(icons.collectionNames)};
 						`
           }
         });
@@ -165,26 +160,21 @@ function integration(options = {}) {
         });
       },
       "astro:config:done": ({ injectTypes }) => {
-        injectTypes({
-          filename: "icons.d.ts",
-          content: `
-						declare module 'studiocms:ui/icons' {
-							export const availableIcons: ('${icons.availableIcons.join("'\n | '")}')[];
-							export const iconCollections: ('${icons.iconCollections.join("'\n | '")}')[];
-
-							${icons.iconCollections.map((collection) => {
-            return `export const ${collection}: import('@studiocms/ui/types').IconifyJSON;`;
-          }).join("\n")}
-
-							export type AvailableIcons = (typeof availableIcons)[number];
-							export type IconCollections = (typeof iconCollections)[number];
-						}
-					`
-        });
+        injectTypes(
+          generateIconTypes("icons.d.ts", {
+            collections: icons.collections && Object.keys(icons.collections).length > 0 ? `${Object.keys(icons.collections).map((collection) => {
+              return `'${collection}': import('@studiocms/ui/types').IconifyJSON;`;
+            }).join("\n")}` : 'export const collections: Record<string, import("@studiocms/ui/types").IconifyJSON>;',
+            availableIcons: `('${icons.availableIcons.join("'\n | '")}')[]`,
+            iconCollections: `('${icons.collectionNames.join("'\n | '")}')[]`
+          })
+        );
       }
+      /* v8 ignore stop */
     }
   };
 }
 export {
+  createIconifyCollection,
   integration as default
 };

package/dist/toolbar/ColorPicker.js

@@ -1,59 +1,3 @@
-function hex2rgb(hex) {
-  const r = Number.parseInt(hex.slice(1, 3), 16);
-  const g = Number.parseInt(hex.slice(3, 5), 16);
-  const b = Number.parseInt(hex.slice(5, 7), 16);
-  return [r, g, b];
-}
-function 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;
-}
-function hsl2rgb(hsl) {
-  const [h, sPercent, lPercent] = hsl;
-  const s = sPercent / 100;
-  const l = lPercent / 100;
-  let r, g, b;
-  if (s === 0) {
-    r = g = b = l;
-  } else {
-    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-    const p = 2 * l - q;
-    const hueFraction = h / 360;
-    r = hueToRgb(p, q, hueFraction + 1 / 3);
-    g = hueToRgb(p, q, hueFraction);
-    b = hueToRgb(p, q, hueFraction - 1 / 3);
-  }
-  return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
-}
-function rgb2hex(rgb) {
-  const [r, g, b] = rgb;
-  return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
-}
-function rgb2hsl(rgb) {
-  const [r, g, b] = rgb.map((v) => v / 255);
-  const max = Math.max(r, g, b);
-  const min = Math.min(r, g, b);
-  const l = (max + min) / 2;
-  let s = 0;
-  if (max !== min) {
-    s = l > 0.5 ? (max - min) / (2 - max - min) : (max - min) / (max + min);
-  }
-  let h = 0;
-  if (max !== min) {
-    if (max === r) {
-      h = ((g - b) / (max - min) + (g < b ? 6 : 0)) * 60;
-    } else if (max === g) {
-      h = ((b - r) / (max - min) + 2) * 60;
-    } else {
-      h = ((r - g) / (max - min) + 4) * 60;
-    }
-  }
-  return [h, s * 100, l * 100];
-}
 class DevToolbarColorPicker extends HTMLElement {
   input;
   constructor() {
@@ -66,18 +10,14 @@ class DevToolbarColorPicker extends HTMLElement {
     });
   }
   connectedCallback() {
-    this.input.value = rgb2hex(
-      hsl2rgb(this.dataset.color.replaceAll("%", "").split(" ").map(Number))
-    );
+    this.input.value = this.dataset.color;
   }
   getColor() {
-    const rgb = hex2rgb(this.input.value);
-    const hsl = rgb2hsl(rgb).map((v) => Math.round(v));
-    const [h, s, l] = hsl;
-    return `${h} ${s}% ${l}%`;
+    return this.input.value;
   }
   setColor(color) {
-    this.input.value = rgb2hex(hsl2rgb(color.replaceAll("%", "").split(" ").map(Number)));
+    this.dataset.color = color;
+    this.input.value = color;
   }
 }
 export {

package/dist/toolbar/icon.js

@@ -1,4 +1,4 @@
-const studiocmsLogo = `<svg width="755" height="792" viewBox="0 0 755 792" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="295" width="460" height="466" rx="32" fill="white"/><path d="M272 434V166H180C162.327 166 148 180.327 148 198V597C148 614.673 162.327 629 180 629H577.5C595.173 629 609.5 614.673 609.5 597V490H328C297.072 490 272 464.928 272 434Z" fill="white"/><path d="M124 597V329H32C14.3269 329 0 343.327 0 361V760C0 777.673 14.3269 792 32 792H429.5C447.173 792 461.5 777.673 461.5 760V653H180C149.072 653 124 627.928 124 597Z" fill="white"/></svg>`;
+const studiocmsLogo = `<svg width="109" height="108" viewBox="0 0 109 108" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M77.9531 26.9437C80.0114 26.9437 81.6806 28.612 81.6807 30.6703V77.348C81.6806 79.4063 80.0114 81.0746 77.9531 81.0746H31.791C29.733 81.0743 28.0645 79.4061 28.0645 77.348V30.6703C28.0645 28.6122 29.733 26.944 31.791 26.9437H77.9531ZM36.8643 39.6234V55.224C36.8643 57.9438 37.2779 60.2774 38.1045 62.224C38.9578 64.1704 40.2646 65.6635 42.0244 66.7035C43.811 67.7434 46.0911 68.263 48.8643 68.263C51.6109 68.263 53.865 67.7435 55.625 66.7035C57.3847 65.6635 58.6783 64.1704 59.5049 62.224C60.3315 60.2508 60.7441 57.9171 60.7441 55.224V39.6234H55.0244V55.5033C55.0244 56.7566 54.8515 57.9572 54.5049 59.1039C54.1582 60.2503 53.5449 61.1837 52.665 61.9037C51.785 62.597 50.531 62.9437 48.9043 62.9437C47.3044 62.9437 46.0378 62.5969 45.1045 61.9037C44.1979 61.1837 43.5445 60.2637 43.1445 59.1439C42.7712 57.9972 42.585 56.7833 42.585 55.5033V39.6234H36.8643ZM66.5566 39.6234V67.9437H72.2764V39.6234H66.5566Z" fill="white"/><path d="M25.3876 77.3545V46.2235H14.6646C12.6046 46.2235 10.9346 47.8875 10.9346 49.9405V96.2885C10.9346 98.3415 12.6046 100.006 14.6646 100.006H60.9956C63.0556 100.006 64.7256 98.3415 64.7256 96.2885V83.8595H31.9146C28.3106 83.8595 25.3876 80.9475 25.3876 77.3545Z" fill="white"/><path d="M84.3525 30.6455V61.7765H95.0755C97.1355 61.7765 98.8055 60.1125 98.8055 58.0595V11.7115C98.8055 9.65849 97.1355 7.99349 95.0755 7.99349H48.7445C46.6845 7.99349 45.0145 9.65849 45.0145 11.7115V24.1405H77.8255C81.4295 24.1405 84.3525 27.0525 84.3525 30.6455Z" fill="white"/></svg>`;
 export {
   studiocmsLogo
 };

package/dist/toolbar/index.js

@@ -45,9 +45,9 @@ function createRows(variables) {
     return row;
   });
   const observer = new MutationObserver((mutations) => {
-    mutations.map((m) => {
+    mutations.forEach((m) => {
       if (m.type !== "attributes" || m.attributeName !== "data-theme") return;
-      rows.map((row) => {
+      rows.forEach((row) => {
         const theme = document.documentElement.dataset.theme ?? "dark";
         const picker = row.children[1]?.firstElementChild;
         const variable = picker.dataset.variable;
@@ -216,7 +216,7 @@ function createRadiiTable() {
     resetButton.disabled = true;
     resetButton.addEventListener("click", () => {
       document.documentElement.style.setProperty(variable, initialValue);
-      numberInput.value = (initialValue.includes("rem") ? Number.parseFloat(initialValue.split("rem")[0]) * 16 : Number.parseInt(initialValue.split("px")[0])).toString();
+      numberInput.value = (initialValue.includes("rem") ? Number.parseFloat(initialValue.split("rem")[0]) * 16 : Number.parseInt(initialValue.split("px")[0], 10)).toString();
       delete map.dark[variable];
       resetButton.disabled = true;
     });
@@ -225,7 +225,7 @@ function createRadiiTable() {
     numberInput.type = "number";
     numberInput.min = "0";
     numberInput.step = "1";
-    numberInput.value = (initialValue.includes("rem") ? Number.parseFloat(initialValue.split("rem")[0]) * 16 : Number.parseInt(initialValue.split("px")[0])).toString();
+    numberInput.value = (initialValue.includes("rem") ? Number.parseFloat(initialValue.split("rem")[0]) * 16 : Number.parseInt(initialValue.split("px")[0], 10)).toString();
     numberInput.addEventListener("input", () => {
       const size = `${numberInput.value}px`;
       document.documentElement.style.setProperty(variable, `${numberInput.value}px`);

package/dist/utils/headers.d.ts

@@ -8,13 +8,13 @@ export declare const HeadConfigSchema: () => z.ZodDefault<z.ZodArray<z.ZodObject
     /** Content to place inside the tag (optional). */
     content: z.ZodDefault<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
-    content: string;
-    tag: "base" | "link" | "meta" | "noscript" | "script" | "style" | "template" | "title";
+    tag: "link" | "base" | "meta" | "noscript" | "script" | "style" | "template" | "title";
     attrs: Record<string, string | boolean | undefined>;
+    content: string;
 }, {
-    tag: "base" | "link" | "meta" | "noscript" | "script" | "style" | "template" | "title";
-    content?: string | undefined;
+    tag: "link" | "base" | "meta" | "noscript" | "script" | "style" | "template" | "title";
     attrs?: Record<string, string | boolean | undefined> | undefined;
+    content?: string | undefined;
 }>, "many">>;
 /**
  * Default Head Tags for use with createHead() helper
@@ -29,15 +29,61 @@ export declare const HeadConfigSchema: () => z.ZodDefault<z.ZodArray<z.ZodObject
  * @returns
  */
 export declare const headDefaults: (title: string, description: string, Astro: AstroGlobalPartial, ogImage: string | undefined, canonical: URL | undefined) => {
-    tag: "base" | "link" | "meta" | "noscript" | "script" | "style" | "template" | "title";
-    content?: string | undefined;
+    tag: "link" | "base" | "meta" | "noscript" | "script" | "style" | "template" | "title";
     attrs?: Record<string, string | boolean | undefined> | undefined;
+    content?: string | undefined;
 }[];
+export declare const HeadSchema: z.ZodDefault<z.ZodArray<z.ZodObject<{
+    /** Name of the HTML tag to add to `<head>`, e.g. `'meta'`, `'link'`, or `'script'`. */
+    tag: z.ZodEnum<["title", "base", "link", "style", "meta", "script", "noscript", "template"]>;
+    /** Attributes to set on the tag, e.g. `{ rel: 'stylesheet', href: '/custom.css' }`. */
+    attrs: z.ZodDefault<z.ZodRecord<z.ZodString, z.ZodUnion<[z.ZodString, z.ZodBoolean, z.ZodUndefined]>>>;
+    /** Content to place inside the tag (optional). */
+    content: z.ZodDefault<z.ZodString>;
+}, "strip", z.ZodTypeAny, {
+    tag: "link" | "base" | "meta" | "noscript" | "script" | "style" | "template" | "title";
+    attrs: Record<string, string | boolean | undefined>;
+    content: string;
+}, {
+    tag: "link" | "base" | "meta" | "noscript" | "script" | "style" | "template" | "title";
+    attrs?: Record<string, string | boolean | undefined> | undefined;
+    content?: string | undefined;
+}>, "many">>;
 export type HeadUserConfig = z.input<ReturnType<typeof HeadConfigSchema>>;
 export type HeadConfig = z.output<ReturnType<typeof HeadConfigSchema>>;
+/**
+ * Test if a head config object contains a matching `<title>` or `<meta>` tag.
+ *
+ * For example, will return true if `head` already contains
+ * `<meta name="description" content="A">` and the passed `tag`
+ * is `<meta name="description" content="B">`. Tests against `name`,
+ * `property`, and `http-equiv` attributes for `<meta>` tags.
+ */
+export declare function hasTag(head: HeadConfig, entry: HeadConfig[number]): boolean;
+/**
+ * Test if a head config object contains a tag of the same type
+ * as `entry` and a matching attribute for one of the passed `keys`.
+ */
+export declare function hasOneOf(head: HeadConfig, entry: HeadConfig[number], keys: string[]): boolean;
+/** Find the first matching key–value pair in a head entry’s attributes. */
+export declare function getAttr(keys: string[], entry: HeadConfig[number]): [key: string, value: string | boolean] | undefined;
+/** Merge two heads, overwriting entries in the first head that exist in the second. */
+export declare function mergeHead(oldHead: HeadConfig, newHead: HeadConfig): {
+    tag: "link" | "base" | "meta" | "noscript" | "script" | "style" | "template" | "title";
+    attrs: Record<string, string | boolean | undefined>;
+    content: string;
+}[];
+/** Sort head tags to place important tags first and relegate “SEO” meta tags. */
+export declare function sortHead(head: HeadConfig): {
+    tag: "link" | "base" | "meta" | "noscript" | "script" | "style" | "template" | "title";
+    attrs: Record<string, string | boolean | undefined>;
+    content: string;
+}[];
+/** Get the relative importance of a specific head tag. */
+export declare function getImportance(entry: HeadConfig[number]): 0 | 100 | 80 | 90 | 70;
 /** Create a fully parsed, merged, and sorted head entry array from multiple sources. */
 export declare function createHead(defaultHeaders: HeadUserConfig, ...heads: HeadConfig[]): {
-    content: string;
-    tag: "base" | "link" | "meta" | "noscript" | "script" | "style" | "template" | "title";
+    tag: "link" | "base" | "meta" | "noscript" | "script" | "style" | "template" | "title";
     attrs: Record<string, string | boolean | undefined>;
+    content: string;
 }[];

package/dist/utils/headers.js

@@ -124,6 +124,13 @@ function createHead(defaultHeaders, ...heads) {
 }
 export {
   HeadConfigSchema,
+  HeadSchema,
   createHead,
-  headDefaults
+  getAttr,
+  getImportance,
+  hasOneOf,
+  hasTag,
+  headDefaults,
+  mergeHead,
+  sortHead
 };