@design-edito/tools 0.4.5 → 0.4.11

package/agnostic/css/scale/index.d.ts

@@ -1,20 +1,50 @@
-/** Describes a scale configuration for generating CSS values across levels and screen widths. */
-export type ScaleDescriptor = {
-    /** The lower and upper bounds for screen width in pixels, e.g., `[minWidth, maxWidth]`. */ screenBounds: [number, number];
-    /** The minimum and maximum values for the low-level range, used at the lower end of the scale. */ lowLevel: [number, number];
-    /** The minimum and maximum values for the high-level range, used at the higher end of the scale. */ highLevel: [number, number];
-    /** The total number of discrete steps in the scale (must be ≥ 2 for interpolation). */ steps: number;
-    /** Optional. Whether to wrap the resulting CSS value in a `clamp()` function to enforce bounds. */ clamp?: boolean;
+/**
+ * Generates an array of interpolated values between a minimum and maximum using a geometric progression.
+ *
+ * @param {number} min - The starting value of the scale.
+ * @param {number} max - The ending value of the scale.
+ * @param {number} intermediateLevels - The number of intermediate levels between min and max.
+ * @returns {number[]} An array of rounded values including the minimum and interpolated steps up to the maximum.
+ */
+export declare const interpolateLevels: (min: number, max: number, intermediateLevels: number) => number[];
+/** Describes the configuration used to compute scale values across breakpoints. */
+export type ScaleDataOptions = {
+    /** Ordered list of breakpoint widths in pixels. Must contain at least two values. */ breakpoints: number[];
+    /** The minimum and maximum values for the low end of the scale. */ loScaleBounds: [number, number];
+    /** The minimum and maximum values for the high end of the scale. */ hiScaleBounds: [number, number];
+    /** Number of intermediate levels between the minimum and maximum values. */ intermediateLevels: number;
+};
+/**
+ * Computes scale data for each breakpoint, including interpolated levels.
+ *
+ * @param {ScaleDataOptions} options - Configuration for generating scale data.
+ * @param {number[]} options.breakpoints - Ordered list of breakpoint widths in pixels.
+ * @param {[number, number]} options.loScaleBounds - Minimum and maximum values for the low end of the scale.
+ * @param {[number, number]} options.hiScaleBounds - Minimum and maximum values for the high end of the scale.
+ * @param {number} options.intermediateLevels - Number of intermediate levels between bounds.
+ * @throws Will throw if `breakpoints` contains fewer than two values.
+ */
+export declare const getScaleData: ({ breakpoints, loScaleBounds, hiScaleBounds, intermediateLevels }: ScaleDataOptions) => Array<{
+    breakpoint: number;
+    levels: number[];
+}>;
+/** Extends scale data options with CSS generation parameters. */
+export type GenerateScaleCssOptions = ScaleDataOptions & {
+    /** The base name used for generated CSS custom properties. */ scaleName: string;
+    /** The CSS selector that will receive the custom properties. */ targetSelector: string;
+    /** The unit to append to each generated value (e.g., `px`, `rem`). */ unit: string;
 };
 /**
- * Creates a scale function that maps a level to a CSS size value using harmonic interpolation.
+ * Generates responsive CSS custom properties for a scale across breakpoints.
  *
- * @param {ScaleDescriptor} descriptor - The scale configuration.
- * @param {[number, number]} descriptor.screenBounds - The lower and upper bounds for screen width in pixels.
- * @param {[number, number]} descriptor.lowLevel - Minimum and maximum values for the low level range.
- * @param {[number, number]} descriptor.highLevel - Minimum and maximum values for the high level range.
- * @param {number} descriptor.steps - Number of discrete steps in the scale.
- * @param {boolean} [descriptor.clamp] - Whether to wrap the resulting CSS value in a `clamp()` function.
- * @returns {(level: number) => string | undefined} A function mapping a level to a CSS value string.
+ * @param {GenerateScaleCssOptions} options - Configuration for generating the CSS output.
+ * @param {string} options.scaleName - Base name for CSS custom properties.
+ * @param {string} options.targetSelector - CSS selector to which the properties will be applied.
+ * @param {string} options.unit - Unit appended to each value.
+ * @param {number[]} options.breakpoints - Ordered list of breakpoint widths in pixels.
+ * @param {[number, number]} options.loScaleBounds - Minimum and maximum values for the low end of the scale.
+ * @param {[number, number]} options.hiScaleBounds - Minimum and maximum values for the high end of the scale.
+ * @param {number} options.intermediateLevels - Number of intermediate levels between bounds.
+ * @returns {string} A CSS string containing custom properties for each breakpoint, wrapped in media queries where applicable.
  */
-export declare function createScale(descriptor: ScaleDescriptor): (level: number) => string | undefined;
+export declare const generateScaleCss: ({ scaleName, targetSelector, unit, ...options }: GenerateScaleCssOptions) => string;

package/agnostic/css/scale/index.js

@@ -1,55 +1,71 @@
-// src/agnostic/numbers/round/index.ts
-function round(number, nbDecimals = 0) {
-  const multiplier = Math.pow(10, nbDecimals);
-  return Math.round(number * multiplier) / multiplier;
-}
-
-// src/agnostic/numbers/geometric-progressions/index.ts
-function getGeometricStep(min, max, level, steps) {
-  if (min === 0) {
-    console.warn("Cannot generate values if min value is zero");
-    return NaN;
-  }
-  if (steps < 1) {
-    console.warn("Cannot generate values if steps is lower than one");
-    return NaN;
-  }
-  const maxOverMin = max / min;
-  const factor = Math.pow(maxOverMin, 1 / steps);
-  return min * Math.pow(factor, level);
-}
-
-// src/agnostic/css/scale/index.ts
-function createScale(descriptor) {
-  const {
-    screenBounds: [loBound, hiBound],
-    lowLevel: [loLevelMin, loLevelMax],
-    highLevel: [hiLevelMin, hiLevelMax],
-    steps,
-    clamp
-  } = descriptor;
-  return function scale(level) {
-    if (steps < 2) return;
-    const loBoundVal = getGeometricStep(loLevelMin, hiLevelMin, level - 1, steps - 1);
-    const hiBoundVal = getGeometricStep(loLevelMax, hiLevelMax, level - 1, steps - 1);
-    if (loBoundVal === void 0) return;
-    if (hiBoundVal === void 0) return;
-    const affine = getAffineFunction(loBound, loBoundVal, hiBound, hiBoundVal);
-    const cssFormula = getCssValueFromAffine(affine);
-    return clamp === true ? `clamp(${round(loBoundVal, 2)}px, ${cssFormula}, ${round(hiBoundVal, 2)}px)` : cssFormula;
-  };
-}
-function getAffineFunction(x1, y1, x2, y2) {
-  const slope = (y2 - y1) / (x2 - x1);
-  const yIntercept = y1 - x1 * slope;
-  return { slope, yIntercept };
-}
-function getCssValueFromAffine(affine) {
-  const { slope, yIntercept } = affine;
-  const roundedSlope = round(100 * slope, 3);
-  const roundedIntercept = round(yIntercept, 2);
-  return `calc(${roundedSlope}vw + ${roundedIntercept}px)`;
-}
-export {
-  createScale
+import { getGeometricStep } from '../../numbers/geometric-progressions/index.js';
+import { round } from '../../numbers/round/index.js';
+import { make as makeArr } from '../../arrays/make/index.js';
+/**
+ * Generates an array of interpolated values between a minimum and maximum using a geometric progression.
+ *
+ * @param {number} min - The starting value of the scale.
+ * @param {number} max - The ending value of the scale.
+ * @param {number} intermediateLevels - The number of intermediate levels between min and max.
+ * @returns {number[]} An array of rounded values including the minimum and interpolated steps up to the maximum.
+ */
+export const interpolateLevels = (min, max, intermediateLevels) => [
+    round(min, 2),
+    ...makeArr(pos => round(getGeometricStep(min, max, pos + 1, intermediateLevels + 1), 2), intermediateLevels + 1)
+];
+/**
+ * Computes scale data for each breakpoint, including interpolated levels.
+ *
+ * @param {ScaleDataOptions} options - Configuration for generating scale data.
+ * @param {number[]} options.breakpoints - Ordered list of breakpoint widths in pixels.
+ * @param {[number, number]} options.loScaleBounds - Minimum and maximum values for the low end of the scale.
+ * @param {[number, number]} options.hiScaleBounds - Minimum and maximum values for the high end of the scale.
+ * @param {number} options.intermediateLevels - Number of intermediate levels between bounds.
+ * @throws Will throw if `breakpoints` contains fewer than two values.
+ */
+export const getScaleData = ({ breakpoints, loScaleBounds, hiScaleBounds, intermediateLevels }) => {
+    const [loMinValuePx, loMaxValuePx] = loScaleBounds;
+    const [hiMinValuePx, hiMaxValuePx] = hiScaleBounds;
+    const loValueDiff = loMaxValuePx - loMinValuePx;
+    const hiValueDiff = hiMaxValuePx - hiMinValuePx;
+    const maxBreakpoint = breakpoints.at(-1);
+    const minBreakpoint = breakpoints.at(0);
+    if (breakpoints.length < 2
+        || maxBreakpoint === undefined
+        || minBreakpoint === undefined)
+        throw new Error(`\`breakpoints\` length must be at least 2. Found ${breakpoints.length}`);
+    return breakpoints.map(breakpoint => {
+        const thisBreakpointRatio = (breakpoint - minBreakpoint) / (maxBreakpoint - minBreakpoint);
+        const lo = (thisBreakpointRatio * loValueDiff) + loMinValuePx;
+        const hi = (thisBreakpointRatio * hiValueDiff) + hiMinValuePx;
+        return {
+            breakpoint,
+            levels: interpolateLevels(lo, hi, intermediateLevels)
+        };
+    });
 };
+/**
+ * Generates responsive CSS custom properties for a scale across breakpoints.
+ *
+ * @param {GenerateScaleCssOptions} options - Configuration for generating the CSS output.
+ * @param {string} options.scaleName - Base name for CSS custom properties.
+ * @param {string} options.targetSelector - CSS selector to which the properties will be applied.
+ * @param {string} options.unit - Unit appended to each value.
+ * @param {number[]} options.breakpoints - Ordered list of breakpoint widths in pixels.
+ * @param {[number, number]} options.loScaleBounds - Minimum and maximum values for the low end of the scale.
+ * @param {[number, number]} options.hiScaleBounds - Minimum and maximum values for the high end of the scale.
+ * @param {number} options.intermediateLevels - Number of intermediate levels between bounds.
+ * @returns {string} A CSS string containing custom properties for each breakpoint, wrapped in media queries where applicable.
+ */
+export const generateScaleCss = ({ scaleName, targetSelector, unit, ...options }) => getScaleData(options).map(({ breakpoint, levels }, pos) => {
+    const levelsCss = levels.map((lvlVal, lvlPos) => `--${scaleName}-${lvlPos}: ${lvlVal}${unit};`);
+    if (pos === 0)
+        return `${targetSelector} {
+  ${levelsCss.join('\n  ')}
+}\n`;
+    return `@media (min-width: ${breakpoint}px) {
+  ${targetSelector} {
+    ${levelsCss.join('\n    ')}
+  }
+}\n`;
+}).join('\n');

package/agnostic/css/scale/index.test.js

@@ -0,0 +1,88 @@
+import { describe, it, expect } from 'vitest';
+import { interpolateLevels, getScaleData, generateScaleCss } from './index.js';
+describe('interpolateLevels', () => {
+    it('returns an array including min and interpolated values', () => {
+        const result = interpolateLevels(10, 20, 2);
+        expect(result.length).toBe(4);
+        expect(result[0]).toBe(10);
+        expect(result.at(-1)).toBeCloseTo(20, 2);
+    });
+    it('rounds values to 2 decimals', () => {
+        const result = interpolateLevels(10, 20, 3);
+        result.forEach(val => {
+            expect(Number(val.toFixed(2))).toBe(val);
+        });
+    });
+    it('handles descending ranges', () => {
+        const result = interpolateLevels(20, 10, 2);
+        expect(result[0]).toBe(20);
+        expect(result.at(-1)).toBeCloseTo(10, 2);
+    });
+});
+describe('getScaleData', () => {
+    const baseOptions = {
+        breakpoints: [320, 768, 1280],
+        loScaleBounds: [10, 20],
+        hiScaleBounds: [30, 60],
+        intermediateLevels: 2
+    };
+    it('returns one entry per breakpoint', () => {
+        const result = getScaleData(baseOptions);
+        expect(result.length).toBe(baseOptions.breakpoints.length);
+    });
+    it('includes breakpoint and levels', () => {
+        const result = getScaleData(baseOptions);
+        result.forEach(entry => {
+            expect(entry).toHaveProperty('breakpoint');
+            expect(entry).toHaveProperty('levels');
+            expect(Array.isArray(entry.levels)).toBe(true);
+        });
+    });
+    it('interpolates values between low and high bounds', () => {
+        const result = getScaleData(baseOptions);
+        const first = result[0];
+        const last = result.at(-1);
+        expect(first?.levels[0]).toBeCloseTo(10, 2);
+        expect(last?.levels.at(-1)).toBeCloseTo(60, 2);
+    });
+    it('throws if breakpoints length < 2', () => {
+        expect(() => getScaleData({
+            ...baseOptions,
+            breakpoints: [320]
+        })).toThrow();
+    });
+});
+describe('generateScaleCss', () => {
+    const options = {
+        scaleName: 'size',
+        targetSelector: ':root',
+        unit: 'px',
+        breakpoints: [320, 768],
+        loScaleBounds: [10, 20],
+        hiScaleBounds: [30, 40],
+        intermediateLevels: 1
+    };
+    it('generates base CSS block for first breakpoint', () => {
+        const css = generateScaleCss(options);
+        expect(css).toMatch(/:root\s*{[^}]+}/);
+    });
+    it('generates media queries for subsequent breakpoints', () => {
+        const css = generateScaleCss(options);
+        expect(css).toMatch(/@media \(min-width: 768px\)/);
+    });
+    it('generates CSS custom properties with correct naming', () => {
+        const css = generateScaleCss(options);
+        expect(css).toMatch(/--size-0:/);
+        expect(css).toMatch(/--size-1:/);
+    });
+    it('applies the provided unit', () => {
+        const css = generateScaleCss(options);
+        expect(css).toMatch(/px;/);
+    });
+    it('produces consistent number of variables per breakpoint', () => {
+        const css = generateScaleCss(options);
+        const matches = css.match(/--size-\d+:/g) ?? [];
+        // 3 levels * 2 breakpoints
+        expect(matches.length).toBe(6);
+    });
+});

package/agnostic/css/styles-set/index.js

@@ -1,182 +1,155 @@
-// src/agnostic/css/styles-set/index.tsx
-import { Component } from "react";
-import {
-  createRoot as reactCreateRoot
-} from "react-dom/client";
-
-// src/agnostic/random/hex-char/index.ts
-var hexChars = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
-function randomHexChar() {
-  const nbr = Math.floor(Math.random() * 16);
-  const char = hexChars[nbr];
-  return char;
-}
-
-// src/agnostic/random/uuid/index.ts
-function randomHash(length = 4) {
-  return new Array(length).fill(null).map(randomHexChar).join("");
-}
-
-// src/agnostic/css/styles-set/index.tsx
-import { Fragment, jsx } from "react/jsx-runtime";
-var StylesSet = class _StylesSet {
-  static defaultPrivateIDAttribute = "data-styleset-private-id";
-  static defaultPublicIDAttribute = "data-styleset-public-id";
-  tagsPrivateIDAttribute = _StylesSet.defaultPrivateIDAttribute;
-  tagsPublicIDAttribute = _StylesSet.defaultPublicIDAttribute;
-  _items = /* @__PURE__ */ new Map();
-  get items() {
-    const sortedItemsArray = Array.from(this._items).map(([privateId, item]) => {
-      const targetPosition = this.getTargetPosition(privateId) ?? 0;
-      return { targetPosition, privateId, item };
-    }).sort((a, b) => a.targetPosition - b.targetPosition).map(({ item, privateId }) => [privateId, item]);
-    const sortedItemsMap = new Map(sortedItemsArray);
-    return sortedItemsMap;
-  }
-  getTargetPosition(privateId) {
-    const orderedStyles = Array.from(this._items).map(([privateId2, data]) => ({ privateId: privateId2, data })).sort((a, b) => {
-      const aPos = a.data.position ?? 0;
-      const bPos = b.data.position ?? 0;
-      return aPos - bPos;
-    });
-    const foundIndex = orderedStyles.findIndex((item) => item.privateId === privateId);
-    return foundIndex === -1 ? null : foundIndex;
-  }
-  setTagsPrivateIDAttribute(str) {
-    this.tagsPrivateIDAttribute = str;
-    return this;
-  }
-  setTagsPublicIDAttribute(str) {
-    this.tagsPublicIDAttribute = str;
-    return this;
-  }
-  getById(id) {
-    const found = Array.from(this._items.values()).find((entry) => entry.id === id);
-    if (found === void 0) return void 0;
-    return found;
-  }
-  generateUniquePrivateId() {
-    const existingIds = Array.from(this._items.keys());
-    const generated = randomHash(12);
-    if (existingIds.includes(generated)) return this.generateUniquePrivateId();
-    return generated;
-  }
-  _rendered = /* @__PURE__ */ new Map();
-  render(element) {
-    const root = reactCreateRoot(element);
-    const items = this.items;
-    root.render(/* @__PURE__ */ jsx(
-      StylesSetComp,
-      {
-        items,
-        privateIDAttribute: this.tagsPrivateIDAttribute,
-        publicIDAttribute: this.tagsPublicIDAttribute
-      }
-    ));
-    this._rendered.set(element, root);
-    return this;
-  }
-  unmount(element) {
-    if (!this._rendered.has(element)) return this;
-    const root = this._rendered.get(element);
-    if (root === void 0) return this;
-    root.unmount();
-    this._rendered.delete(element);
-    return this;
-  }
-  updateRendered() {
-    const { items } = this;
-    this._rendered.forEach((root) => root.render(/* @__PURE__ */ jsx(
-      StylesSetComp,
-      {
-        items,
-        privateIDAttribute: this.tagsPrivateIDAttribute,
-        publicIDAttribute: this.tagsPublicIDAttribute
-      }
-    )));
-    return this;
-  }
-  addItem(item, abortIfIdExists = true) {
-    const existing = Array.from(this._items.entries()).map(([privateId2, entry]) => ({ privateId: privateId2, entry })).find(({ entry }) => entry.id !== void 0 && entry.id === item.id);
-    if (existing !== void 0) {
-      if (abortIfIdExists) return this;
-      this._items.delete(existing.privateId);
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Component } from 'react';
+import { createRoot as reactCreateRoot } from 'react-dom/client';
+import { randomHash } from '../../random/uuid/index.js';
+export class StylesSet {
+    static defaultPrivateIDAttribute = 'data-styleset-private-id';
+    static defaultPublicIDAttribute = 'data-styleset-public-id';
+    tagsPrivateIDAttribute = StylesSet.defaultPrivateIDAttribute;
+    tagsPublicIDAttribute = StylesSet.defaultPublicIDAttribute;
+    _items = new Map();
+    get items() {
+        const sortedItemsArray = Array.from(this._items).map(([privateId, item]) => {
+            const targetPosition = this.getTargetPosition(privateId) ?? 0;
+            return { targetPosition, privateId, item };
+        }).sort((a, b) => a.targetPosition - b.targetPosition)
+            .map(({ item, privateId }) => [privateId, item]);
+        const sortedItemsMap = new Map(sortedItemsArray);
+        return sortedItemsMap;
+    }
+    getTargetPosition(privateId) {
+        const orderedStyles = Array.from(this._items)
+            .map(([privateId, data]) => ({ privateId, data }))
+            .sort((a, b) => {
+            const aPos = a.data.position ?? 0;
+            const bPos = b.data.position ?? 0;
+            return aPos - bPos;
+        });
+        const foundIndex = orderedStyles.findIndex(item => item.privateId === privateId);
+        return foundIndex === -1 ? null : foundIndex;
+    }
+    setTagsPrivateIDAttribute(str) {
+        this.tagsPrivateIDAttribute = str;
+        return this;
+    }
+    setTagsPublicIDAttribute(str) {
+        this.tagsPublicIDAttribute = str;
+        return this;
+    }
+    getById(id) {
+        const found = Array.from(this._items.values())
+            .find(entry => entry.id === id);
+        if (found === undefined)
+            return undefined;
+        return found;
+    }
+    generateUniquePrivateId() {
+        const existingIds = Array.from(this._items.keys());
+        const generated = randomHash(12);
+        if (existingIds.includes(generated))
+            return this.generateUniquePrivateId();
+        return generated;
+    }
+    _rendered = new Map();
+    render(element) {
+        const root = reactCreateRoot(element);
+        const items = this.items;
+        root.render(_jsx(StylesSetComp, { items: items, privateIDAttribute: this.tagsPrivateIDAttribute, publicIDAttribute: this.tagsPublicIDAttribute }));
+        this._rendered.set(element, root);
+        return this;
+    }
+    unmount(element) {
+        if (!this._rendered.has(element))
+            return this;
+        const root = this._rendered.get(element);
+        if (root === undefined)
+            return this;
+        root.unmount();
+        this._rendered.delete(element);
+        return this;
     }
-    const privateId = this.generateUniquePrivateId();
-    this._items.set(privateId, item);
-    this.updateRendered();
-    return this;
-  }
-  removeItem(idOrPosition) {
-    if (typeof idOrPosition === "string") {
-      const existing = Array.from(this._items.entries()).map(([privateId, entry]) => ({ privateId, entry })).find(({ entry }) => entry.id !== void 0 && entry.id === idOrPosition);
-      if (existing === void 0) return this;
-      this._items.delete(existing.privateId);
-      this.updateRendered();
-      return this;
+    updateRendered() {
+        const { items } = this;
+        this._rendered.forEach((root) => root.render(_jsx(StylesSetComp, { items: items, privateIDAttribute: this.tagsPrivateIDAttribute, publicIDAttribute: this.tagsPublicIDAttribute })));
+        return this;
     }
-    const toRemove = Array.from(this._items).map(([privateId, entry]) => ({ privateId, entry })).at(idOrPosition);
-    if (toRemove === void 0) return this;
-    this._items.delete(toRemove.privateId);
-    this.updateRendered();
-    return this;
-  }
-  async getDomString(documentObj) {
-    const actualDocumentObj = documentObj ?? window.document;
-    if (actualDocumentObj === null) throw new Error("Window.document is not available");
-    return await new Promise((resolve) => {
-      const tempElt = actualDocumentObj.createElement("div");
-      const tempRoot = reactCreateRoot(tempElt);
-      const { items } = this;
-      const onRendered = () => {
-        resolve(tempElt.innerHTML);
-        tempRoot.unmount();
-        tempElt.remove();
-      };
-      tempRoot.render(/* @__PURE__ */ jsx(
-        StylesSetComp,
-        {
-          items,
-          privateIDAttribute: this.tagsPrivateIDAttribute,
-          publicIDAttribute: this.tagsPublicIDAttribute,
-          onRendered
+    addItem(item, abortIfIdExists = true) {
+        const existing = Array
+            .from(this._items.entries())
+            .map(([privateId, entry]) => ({ privateId, entry }))
+            .find(({ entry }) => (entry.id !== undefined && entry.id === item.id));
+        if (existing !== undefined) {
+            if (abortIfIdExists)
+                return this;
+            this._items.delete(existing.privateId);
         }
-      ));
-    });
-  }
-};
-var StylesSetComp = class extends Component {
-  componentDidMount() {
-    const { props } = this;
-    const { onRendered } = props;
-    if (onRendered !== void 0) onRendered();
-  }
-  componentDidUpdate() {
-    const { props } = this;
-    const { onRendered } = props;
-    if (onRendered !== void 0) onRendered();
-  }
-  render() {
-    const { props } = this;
-    const items = props.items ?? /* @__PURE__ */ new Map();
-    const pidAttr = props.privateIDAttribute ?? StylesSet.defaultPrivateIDAttribute;
-    const idAttr = props.publicIDAttribute ?? StylesSet.defaultPublicIDAttribute;
-    return /* @__PURE__ */ jsx(Fragment, { children: Array.from(items).map(([privateId, itemData]) => {
-      const customAttributes = { [pidAttr]: privateId, [idAttr]: itemData.id };
-      if (itemData.type === "url") return /* @__PURE__ */ jsx(
-        "link",
-        {
-          onLoad: itemData.onLoad,
-          rel: "stylesheet",
-          href: itemData.content,
-          ...customAttributes
+        const privateId = this.generateUniquePrivateId();
+        this._items.set(privateId, item);
+        this.updateRendered();
+        return this;
+    }
+    removeItem(idOrPosition) {
+        if (typeof idOrPosition === 'string') {
+            const existing = Array
+                .from(this._items.entries())
+                .map(([privateId, entry]) => ({ privateId, entry }))
+                .find(({ entry }) => (entry.id !== undefined && entry.id === idOrPosition));
+            if (existing === undefined)
+                return this;
+            this._items.delete(existing.privateId);
+            this.updateRendered();
+            return this;
         }
-      );
-      return /* @__PURE__ */ jsx("style", { ...customAttributes, children: itemData.content });
-    }) });
-  }
-};
-export {
-  StylesSet,
-  StylesSetComp
-};
+        const toRemove = Array
+            .from(this._items)
+            .map(([privateId, entry]) => ({ privateId, entry }))
+            .at(idOrPosition);
+        if (toRemove === undefined)
+            return this;
+        this._items.delete(toRemove.privateId);
+        this.updateRendered();
+        return this;
+    }
+    async getDomString(documentObj) {
+        const actualDocumentObj = documentObj ?? window.document;
+        if (actualDocumentObj === null)
+            throw new Error('Window.document is not available');
+        return await new Promise(resolve => {
+            const tempElt = actualDocumentObj.createElement('div');
+            const tempRoot = reactCreateRoot(tempElt);
+            const { items } = this;
+            const onRendered = () => {
+                resolve(tempElt.innerHTML);
+                tempRoot.unmount();
+                tempElt.remove();
+            };
+            tempRoot.render(_jsx(StylesSetComp, { items: items, privateIDAttribute: this.tagsPrivateIDAttribute, publicIDAttribute: this.tagsPublicIDAttribute, onRendered: onRendered }));
+        });
+    }
+}
+export class StylesSetComp extends Component {
+    componentDidMount() {
+        const { props } = this;
+        const { onRendered } = props;
+        if (onRendered !== undefined)
+            onRendered();
+    }
+    componentDidUpdate() {
+        const { props } = this;
+        const { onRendered } = props;
+        if (onRendered !== undefined)
+            onRendered();
+    }
+    render() {
+        const { props } = this;
+        const items = props.items ?? new Map();
+        const pidAttr = props.privateIDAttribute ?? StylesSet.defaultPrivateIDAttribute;
+        const idAttr = props.publicIDAttribute ?? StylesSet.defaultPublicIDAttribute;
+        return _jsx(_Fragment, { children: Array.from(items).map(([privateId, itemData]) => {
+                const customAttributes = { [pidAttr]: privateId, [idAttr]: itemData.id };
+                if (itemData.type === 'url')
+                    return _jsx("link", { onLoad: itemData.onLoad, rel: 'stylesheet', href: itemData.content, ...customAttributes });
+                return _jsx("style", { ...customAttributes, children: itemData.content });
+            }) });
+    }
+}

package/agnostic/errors/index.d.ts

@@ -1,2 +1,2 @@
-export * as unknownToString from './unknown-to-string/index.js'
 export * as register from './register/index.js'
+export * as unknownToString from './unknown-to-string/index.js'

package/agnostic/errors/index.js

@@ -1,2 +1,2 @@
-export * as unknownToString from './unknown-to-string/index.js'
 export * as register from './register/index.js'
+export * as unknownToString from './unknown-to-string/index.js'