@studiocms/ui 0.3.2 → 0.4.0

package/dist/toolbar/icon.js

@@ -0,0 +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>`;
+export {
+  studiocmsLogo
+};

package/dist/toolbar/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("astro").DevToolbarApp;
+export default _default;

package/dist/toolbar/index.js

@@ -0,0 +1,292 @@
+import { defineToolbarApp } from "astro/toolbar";
+import DevToolbarColorPicker from "./ColorPicker.js";
+const map = {
+  light: {},
+  dark: {}
+};
+function createRows(variables) {
+  const body = getComputedStyle(document.body);
+  const rows = variables.map((variable) => {
+    const row = document.createElement("tr");
+    const cssVariable = document.createElement("td");
+    const colorPicker = document.createElement("td");
+    const reset = document.createElement("td");
+    const colorPickerEl = document.createElement(
+      "dev-toolbar-color-picker"
+    );
+    colorPickerEl.dataset.variable = variable;
+    const initialColor = body.getPropertyValue(variable);
+    colorPickerEl.dataset.color = initialColor;
+    const resetButton = document.createElement("button");
+    resetButton.textContent = "Reset";
+    resetButton.disabled = true;
+    const codeEl = document.createElement("code");
+    codeEl.textContent = variable;
+    cssVariable.appendChild(codeEl);
+    colorPicker.appendChild(colorPickerEl);
+    reset.appendChild(resetButton);
+    row.appendChild(cssVariable);
+    row.appendChild(colorPicker);
+    row.appendChild(reset);
+    colorPickerEl.shadowRoot?.firstElementChild?.addEventListener("input", () => {
+      const color = colorPickerEl.getColor();
+      const theme = document.documentElement.dataset.theme ?? "dark";
+      document.documentElement.style.setProperty(variable, color);
+      map[theme][variable] = color;
+      resetButton.disabled = false;
+    });
+    resetButton.addEventListener("click", () => {
+      const theme = document.documentElement.dataset.theme ?? "dark";
+      document.documentElement.style.setProperty(variable, initialColor);
+      colorPickerEl.setColor(initialColor);
+      delete map[theme][variable];
+      resetButton.disabled = true;
+    });
+    return row;
+  });
+  const observer = new MutationObserver((mutations) => {
+    mutations.map((m) => {
+      if (m.type !== "attributes" || m.attributeName !== "data-theme") return;
+      rows.map((row) => {
+        const theme = document.documentElement.dataset.theme ?? "dark";
+        const picker = row.children[1]?.firstElementChild;
+        const variable = picker.dataset.variable;
+        const value = map[theme][variable];
+        if (!value) document.documentElement.style.removeProperty(variable);
+        else document.documentElement.style.setProperty(variable, value);
+        const color = body.getPropertyValue(variable);
+        picker.dataset.color = color;
+        picker.setColor(color);
+      });
+    });
+  });
+  observer.observe(document.documentElement, { attributes: true });
+  return rows;
+}
+function createStyles() {
+  const style = document.createElement("style");
+  style.textContent = `
+    button {
+      position: relative;
+      gap: 0.5rem;
+      outline: none;
+      border: none;
+      font-weight: 400;
+      border-radius: var(--radius-md);
+      transition: transform 0.15s, background-color 0.15s, border-color 0.15s, color 0.15s;
+      transition-timing-function: ease;
+      cursor: pointer;
+      background-color: hsl(var(--primary-base));
+      border-color: hsl(var(--primary-base));
+      color: hsl(var(--text-inverted));
+      min-width: fit-content;
+      will-change: transform;
+      text-decoration: none;
+      height: 32px;
+      padding: 0.5rem 0.75rem;
+      font-size: 0.825em;
+      text-align: center !important;
+    }
+
+    button:hover {
+      background-color: hsl(var(--primary-hover));
+    }
+
+    button:active {
+      background-color: hsl(var(--primary-active));
+    }
+
+    button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    table {
+      border-collapse: collapse;
+      margin-top: 1rem;
+      width: 100%;
+    }
+
+    tr {
+      text-align: left;
+      color: #fff;
+    }
+
+    details {
+      margin-bottom: 1rem;
+    }
+  `;
+  return style;
+}
+function createColorsTable() {
+  const table = document.createElement("table");
+  const thead = document.createElement("thead");
+  const tr = document.createElement("tr");
+  const th1 = document.createElement("th");
+  const th2 = document.createElement("th");
+  const th3 = document.createElement("th");
+  th1.textContent = "CSS Variable";
+  th2.textContent = "Color Picker";
+  th3.textContent = "Reset";
+  tr.appendChild(th1);
+  tr.appendChild(th2);
+  tr.appendChild(th3);
+  thead.appendChild(tr);
+  table.appendChild(thead);
+  const tbody = document.createElement("tbody");
+  const editableCSSVariables = [
+    "--background-base",
+    "--background-step-1",
+    "--background-step-2",
+    "--background-step-3",
+    "--text-normal",
+    "--text-muted",
+    "--text-inverted",
+    "--border",
+    "--shadow",
+    "--default-base",
+    "--default-hover",
+    "--default-active",
+    "--primary-base",
+    "--primary-hover",
+    "--primary-active",
+    "--success-base",
+    "--success-hover",
+    "--success-active",
+    "--warning-base",
+    "--warning-hover",
+    "--warning-active",
+    "--danger-base",
+    "--danger-hover",
+    "--danger-active",
+    "--info-base",
+    "--info-hover",
+    "--info-active",
+    "--mono-base",
+    "--mono-hover",
+    "--mono-active"
+  ];
+  const rows = createRows(editableCSSVariables);
+  for (const row of rows) {
+    tbody.appendChild(row);
+  }
+  table.appendChild(tbody);
+  return {
+    table,
+    variables: editableCSSVariables
+  };
+}
+function createDetails(title, table) {
+  const details = document.createElement("details");
+  const summary = document.createElement("summary");
+  summary.textContent = title;
+  details.appendChild(summary);
+  details.appendChild(table);
+  return details;
+}
+function createRadiiTable() {
+  const radiiTable = document.createElement("table");
+  const radiiThead = document.createElement("thead");
+  const radiiTr = document.createElement("tr");
+  const radiiTh1 = document.createElement("th");
+  const radiiTh2 = document.createElement("th");
+  const radiiTh3 = document.createElement("th");
+  radiiTh1.textContent = "CSS Variable";
+  radiiTh2.textContent = "Value (px)";
+  radiiTh3.textContent = "Reset";
+  radiiTr.appendChild(radiiTh1);
+  radiiTr.appendChild(radiiTh2);
+  radiiTr.appendChild(radiiTh3);
+  radiiThead.appendChild(radiiTr);
+  radiiTable.appendChild(radiiThead);
+  const radiiTbody = document.createElement("tbody");
+  const editableRadiiCSSVariables = ["--radius-sm", "--radius-md", "--radius-lg", "--radius-full"];
+  for (const variable of editableRadiiCSSVariables) {
+    const row = document.createElement("tr");
+    const cssVariable = document.createElement("td");
+    const value = document.createElement("td");
+    const reset = document.createElement("td");
+    const initialValue = getComputedStyle(document.body).getPropertyValue(variable);
+    const codeEl = document.createElement("code");
+    codeEl.textContent = variable;
+    cssVariable.appendChild(codeEl);
+    const resetButton = document.createElement("button");
+    resetButton.textContent = "Reset";
+    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();
+      delete map.dark[variable];
+      resetButton.disabled = true;
+    });
+    reset.appendChild(resetButton);
+    const numberInput = document.createElement("input");
+    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.addEventListener("input", () => {
+      const size = `${numberInput.value}px`;
+      document.documentElement.style.setProperty(variable, `${numberInput.value}px`);
+      map.dark[variable] = size;
+      resetButton.disabled = false;
+    });
+    value.appendChild(numberInput);
+    row.appendChild(cssVariable);
+    row.appendChild(value);
+    row.appendChild(reset);
+    radiiTbody.appendChild(row);
+  }
+  radiiTable.appendChild(radiiTbody);
+  return {
+    table: radiiTable,
+    variables: editableRadiiCSSVariables
+  };
+}
+var toolbar_default = defineToolbarApp({
+  init(canvas) {
+    const myWindow = document.createElement("astro-dev-toolbar-window");
+    myWindow.style.overflow = "auto";
+    const header = document.createElement("h1");
+    header.textContent = "StudioCMS UI Theme Editor";
+    header.style.marginBottom = "1rem";
+    header.style.marginTop = "0";
+    myWindow.appendChild(header);
+    const style = createStyles();
+    const { table: colorsTable } = createColorsTable();
+    const colorDetails = createDetails("Colors", colorsTable);
+    const { table: radiiTable } = createRadiiTable();
+    const radiiDetails = createDetails("Border Radii", radiiTable);
+    myWindow.appendChild(header);
+    myWindow.appendChild(colorDetails);
+    myWindow.appendChild(radiiDetails);
+    myWindow.appendChild(style);
+    const exportButton = document.createElement("button");
+    exportButton.textContent = "Copy to clipboard";
+    exportButton.style.marginTop = "1rem";
+    exportButton.addEventListener("click", () => {
+      function getVariables(theme) {
+        return Object.entries(map[theme]).map(([variable, value]) => {
+          return `  ${variable}: ${value};`;
+        }).join("\n");
+      }
+      const darkVariables = getVariables("dark");
+      const lightVariables = getVariables("light");
+      const string = `${darkVariables ? `:root {
+${darkVariables}
+}
+` : ""}${lightVariables ? `
+[data-theme="light"] {
+${lightVariables}
+}` : ""}`;
+      navigator.clipboard.writeText(string || "/* No changes made */");
+    });
+    myWindow.appendChild(exportButton);
+    canvas.appendChild(myWindow);
+  }
+});
+customElements.define("dev-toolbar-color-picker", DevToolbarColorPicker);
+export {
+  toolbar_default as default
+};

package/dist/types/index.d.ts

@@ -0,0 +1,11 @@
+export interface ToastProps {
+    title: string;
+    /**
+     * This will get passed to the component as unsanitized HTML. DO NOT PUT USER-GENERATED CONTENT HERE!
+     */
+    description?: string;
+    type: 'success' | 'warning' | 'danger' | 'info';
+    duration?: number;
+    persistent?: boolean;
+    closeButton?: boolean;
+}

package/dist/utils/ThemeHelper.d.ts

@@ -0,0 +1,49 @@
+type Theme = 'dark' | 'light' | 'system';
+type ThemeChangeCallback = (newTheme: Theme, oldTheme: Theme) => void;
+/**
+ * A helper to toggle, set and get the current StudioCMS UI theme.
+ */
+declare class ThemeHelper {
+    private themeManagerElement;
+    private observer;
+    private themeChangeCallbacks;
+    /**
+     * A helper to toggle, set and get the current StudioCMS UI theme.
+     * @param themeProvider The element that should carry the data-theme attribute (replaces the document root)
+     */
+    constructor(themeProvider?: HTMLElement);
+    /**
+     * Get the current theme.
+     * @param {boolean} resolveSystemTheme Whether to resolve the `system` theme to the actual theme (`dark` or `light`)
+     * @returns {Theme} The current theme.
+     */
+    getTheme: <T extends boolean>(resolveSystemTheme?: T) => T extends true ? "dark" | "light" : Theme;
+    /**
+     * Sets the current theme.
+     * @param theme The new theme. One of `dark`, `light` or `system`.
+     */
+    setTheme: (theme: Theme) => void;
+    /**
+     * Toggles the current theme.
+     *
+     * If the theme is set to `system` (or no theme is set via the root element),
+     * the theme is set depending on the user's color scheme preference (set in the browser).
+     */
+    toggleTheme: () => void;
+    /**
+     * Register an element to act as a toggle! When clicked, it will toggle the theme.
+     * @param toggle The HTML element that should act as the toggle
+     */
+    registerToggle: (toggle: HTMLElement | null) => void;
+    /**
+     * Allows for adding a callback that gets called whenever the theme changes.
+     * @param callback The callback to be executed
+     */
+    onThemeChange: (callback: ThemeChangeCallback) => void;
+    /**
+     * Simply gets the first mutation and calls all registered callbacks.
+     * @param mutations The mutations array from the observer. Due to the specified options, this will always be a 1-length array,
+     */
+    private themeManagerMutationHandler;
+}
+export { ThemeHelper, type Theme };

package/dist/utils/ThemeHelper.js

@@ -0,0 +1,113 @@
+class ThemeHelper {
+  themeManagerElement;
+  observer;
+  themeChangeCallbacks = [];
+  /**
+   * A helper to toggle, set and get the current StudioCMS UI theme.
+   * @param themeProvider The element that should carry the data-theme attribute (replaces the document root)
+   */
+  constructor(themeProvider) {
+    this.themeManagerElement = themeProvider || document.documentElement;
+    this.themeManagerElement.dataset.theme = this.getTheme(true);
+  }
+  /**
+   * Get the current theme.
+   * @param {boolean} resolveSystemTheme Whether to resolve the `system` theme to the actual theme (`dark` or `light`)
+   * @returns {Theme} The current theme.
+   */
+  getTheme = (resolveSystemTheme) => {
+    const theme = this.themeManagerElement.dataset.theme || "system";
+    if (!resolveSystemTheme) {
+      return theme;
+    }
+    if ((this.themeManagerElement.dataset.theme ?? "system") !== "system") {
+      return this.themeManagerElement.dataset.theme;
+    }
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      return "dark";
+    }
+    if (window.matchMedia("(prefers-color-scheme: light)").matches) {
+      return "light";
+    }
+    throw new Error(
+      "Unable to resolve theme. (Most likely cause: window.matchMedia is not supported by the browser)"
+    );
+  };
+  /**
+   * Sets the current theme.
+   * @param theme The new theme. One of `dark`, `light` or `system`.
+   */
+  setTheme = (theme) => {
+    this.themeManagerElement.dataset.theme = theme;
+    if (typeof localStorage.getItem("starlight-theme") === "string") {
+      localStorage.setItem("starlight-theme", theme === "system" ? "" : theme);
+    }
+  };
+  /**
+   * Toggles the current theme.
+   *
+   * If the theme is set to `system` (or no theme is set via the root element),
+   * the theme is set depending on the user's color scheme preference (set in the browser).
+   */
+  toggleTheme = () => {
+    const theme = this.getTheme();
+    if (theme && theme === "dark") {
+      this.setTheme("light");
+      return;
+    }
+    if (theme && theme === "light") {
+      this.setTheme("dark");
+      return;
+    }
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      this.setTheme("light");
+      return;
+    }
+    if (window.matchMedia("(prefers-color-scheme: light)").matches) {
+      this.setTheme("dark");
+      return;
+    }
+  };
+  /**
+   * Register an element to act as a toggle! When clicked, it will toggle the theme.
+   * @param toggle The HTML element that should act as the toggle
+   */
+  registerToggle = (toggle) => {
+    if (!toggle) {
+      console.error("Element passed to toggle registration does not exist.");
+      return;
+    }
+    if (!toggle.dataset.suiThemeToggle) {
+      toggle.addEventListener("click", this.toggleTheme);
+      toggle.dataset.suiThemeToggle = "true";
+    }
+  };
+  /**
+   * Allows for adding a callback that gets called whenever the theme changes.
+   * @param callback The callback to be executed
+   */
+  onThemeChange = (callback) => {
+    if (!this.observer) {
+      this.observer = new MutationObserver(this.themeManagerMutationHandler);
+      this.observer.observe(this.themeManagerElement, {
+        attributes: true,
+        attributeOldValue: true,
+        attributeFilter: ["data-theme"]
+      });
+    }
+    this.themeChangeCallbacks.push(callback);
+  };
+  /**
+   * Simply gets the first mutation and calls all registered callbacks.
+   * @param mutations The mutations array from the observer. Due to the specified options, this will always be a 1-length array,
+   */
+  themeManagerMutationHandler = (mutations) => {
+    if (!mutations[0]) return;
+    for (const callback of this.themeChangeCallbacks) {
+      callback(this.getTheme(), mutations[0].oldValue || "system");
+    }
+  };
+}
+export {
+  ThemeHelper
+};

package/{src/utils/colors.ts → dist/utils/colors.d.ts}

@@ -1 +1 @@
-export type StudioCMSColorway = 'default' | 'primary' | 'success' | 'warning' | 'danger';
+export type StudioCMSColorway = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'mono';

package/dist/utils/generateID.d.ts

@@ -0,0 +1,2 @@
+declare function generateID(prefix: string): string;
+export { generateID };

package/dist/utils/generateID.js

@@ -0,0 +1,6 @@
+function generateID(prefix) {
+  return `${prefix}-${Math.random().toString(16).slice(2)}`;
+}
+export {
+  generateID
+};

package/dist/utils/headers.d.ts

@@ -0,0 +1,43 @@
+import type { AstroGlobalPartial } from 'astro';
+import { z } from 'astro/zod';
+export declare const HeadConfigSchema: () => 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, {
+    content: string;
+    tag: "base" | "link" | "meta" | "noscript" | "script" | "style" | "template" | "title";
+    attrs: Record<string, string | boolean | undefined>;
+}, {
+    tag: "base" | "link" | "meta" | "noscript" | "script" | "style" | "template" | "title";
+    content?: string | undefined;
+    attrs?: Record<string, string | boolean | undefined> | undefined;
+}>, "many">>;
+/**
+ * Default Head Tags for use with createHead() helper
+ *
+ * @param title
+ * @param description
+ * @param lang
+ * @param Astro
+ * @param favicon
+ * @param ogImage
+ * @param canonical
+ * @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;
+    attrs?: Record<string, string | boolean | undefined> | undefined;
+}[];
+export type HeadUserConfig = z.input<ReturnType<typeof HeadConfigSchema>>;
+export type HeadConfig = z.output<ReturnType<typeof HeadConfigSchema>>;
+/** 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";
+    attrs: Record<string, string | boolean | undefined>;
+}[];

package/dist/utils/headers.js

@@ -0,0 +1,129 @@
+import { z } from "astro/zod";
+const HeadConfigSchema = () => z.array(
+  z.object({
+    /** Name of the HTML tag to add to `<head>`, e.g. `'meta'`, `'link'`, or `'script'`. */
+    tag: z.enum(["title", "base", "link", "style", "meta", "script", "noscript", "template"]),
+    /** Attributes to set on the tag, e.g. `{ rel: 'stylesheet', href: '/custom.css' }`. */
+    attrs: z.record(z.union([z.string(), z.boolean(), z.undefined()])).default({}),
+    /** Content to place inside the tag (optional). */
+    content: z.string().default("")
+  })
+).default([]);
+const headDefaults = (title, description, Astro, ogImage, canonical) => {
+  const headDefaults2 = [
+    { tag: "meta", attrs: { charset: "utf-8" } },
+    {
+      tag: "meta",
+      attrs: { name: "viewport", content: "width=device-width, initial-scale=1" }
+    },
+    { tag: "title", content: `${title}` },
+    { tag: "meta", attrs: { name: "title", content: title } },
+    { tag: "meta", attrs: { name: "description", content: description } },
+    { tag: "link", attrs: { rel: "canonical", href: canonical?.href } },
+    { tag: "meta", attrs: { name: "generator", content: Astro.generator } },
+    // Favicon
+    {
+      tag: "link",
+      attrs: { rel: "apple-touch-icon", href: "/apple-touch-icon.png", sizes: "180x180" }
+    },
+    {
+      tag: "link",
+      attrs: { rel: "icon", href: "/favicon-32x32.png", type: "image/png", sizes: "32x32" }
+    },
+    {
+      tag: "link",
+      attrs: { rel: "icon", href: "/favicon-16x16.png", type: "image/png", sizes: "16x16" }
+    },
+    { tag: "link", attrs: { rel: "icon", href: "/favicon.png", type: "image/png" } },
+    { tag: "link", attrs: { rel: "manifest", href: "/site.webmanifest" } },
+    { tag: "link", attrs: { rel: "mask-icon", href: "/safari-pinned-tab.svg", color: "#5bbad5" } },
+    { tag: "link", attrs: { rel: "shortcut icon", href: "/favicon.ico" } },
+    { tag: "meta", attrs: { name: "msapplication-TileColor", content: "#da532c" } },
+    { tag: "meta", attrs: { name: "msapplication-config", content: "/browserconfig.xml" } },
+    { tag: "meta", attrs: { name: "theme-color", content: "#aa87f4" } },
+    // OpenGraph Tags
+    { tag: "meta", attrs: { property: "og:title", content: title } },
+    { tag: "meta", attrs: { property: "og:type", content: "website" } },
+    { tag: "meta", attrs: { property: "og:url", content: canonical?.href } },
+    { tag: "meta", attrs: { property: "og:description", content: description } },
+    { tag: "meta", attrs: { property: "og:site_name", content: title } },
+    // Twitter Tags
+    {
+      tag: "meta",
+      attrs: { name: "twitter:card", content: "summary_large_image" }
+    },
+    { tag: "meta", attrs: { name: "twitter:url", content: canonical?.href } },
+    { tag: "meta", attrs: { name: "twitter:title", content: title } },
+    { tag: "meta", attrs: { name: "twitter:description", content: description } }
+  ];
+  if (ogImage) {
+    headDefaults2.push(
+      { tag: "meta", attrs: { property: "og:image", content: ogImage } },
+      { tag: "meta", attrs: { name: "twitter:image", content: ogImage } }
+    );
+  }
+  return headDefaults2;
+};
+const HeadSchema = HeadConfigSchema();
+function hasTag(head, entry) {
+  switch (entry.tag) {
+    case "title":
+      return head.some(({ tag }) => tag === "title");
+    case "meta":
+      return hasOneOf(head, entry, ["name", "property", "http-equiv"]);
+    default:
+      return false;
+  }
+}
+function hasOneOf(head, entry, keys) {
+  const attr = getAttr(keys, entry);
+  if (!attr) return false;
+  const [key, val] = attr;
+  return head.some(({ tag, attrs }) => tag === entry.tag && attrs[key] === val);
+}
+function getAttr(keys, entry) {
+  let attr;
+  for (const key of keys) {
+    const val = entry.attrs[key];
+    if (val) {
+      attr = [key, val];
+      break;
+    }
+  }
+  return attr;
+}
+function mergeHead(oldHead, newHead) {
+  return [...oldHead.filter((tag) => !hasTag(newHead, tag)), ...newHead];
+}
+function sortHead(head) {
+  return head.sort((a, b) => {
+    const aImportance = getImportance(a);
+    const bImportance = getImportance(b);
+    return aImportance > bImportance ? -1 : bImportance > aImportance ? 1 : 0;
+  });
+}
+function getImportance(entry) {
+  if (entry.tag === "meta" && ("charset" in entry.attrs || "http-equiv" in entry.attrs || entry.attrs.name === "viewport")) {
+    return 100;
+  }
+  if (entry.tag === "title") return 90;
+  if (entry.tag !== "meta") {
+    if (entry.tag === "link" && "rel" in entry.attrs && entry.attrs.rel === "shortcut icon") {
+      return 70;
+    }
+    return 80;
+  }
+  return 0;
+}
+function createHead(defaultHeaders, ...heads) {
+  let head = HeadSchema.parse(defaultHeaders);
+  for (const next of heads) {
+    head = mergeHead(head, next);
+  }
+  return sortHead(head);
+}
+export {
+  HeadConfigSchema,
+  createHead,
+  headDefaults
+};

package/dist/utils/iconStrings.d.ts

@@ -0,0 +1,4 @@
+type ValidIconString = 'check-circle' | 'exclamation-triangle' | 'exclamation-circle' | 'information-circle' | 'x-mark';
+declare function getIconString(icon: ValidIconString, classes: string, width: number, height: number): string;
+export { getIconString };
+export type { ValidIconString };