@electrovir/color 1.0.0 → 1.1.0

package/dist/color-class/color-formats.d.ts

@@ -28,16 +28,6 @@ export type ColorCoordinateDefinition = {
     factor?: number | undefined;
     suffix?: string;
 }>;
-/**
- * A single color format definition.
- *
- * @category Internal
- */
-export type ColorFormatDefinition<ColorSpace extends string = string> = {
-    coords: Record<string, ColorCoordinateDefinition>;
-    /** This name for this color to be used in `Colorjs.to()`. Defaults to the color format key. */
-    colorSpace: ColorSpace;
-};
 /**
  * All raw supported color formats.
  *
@@ -184,15 +174,17 @@ export declare const rawColorFormats: {
     };
 };
 /**
- * All supported color format names. This can be used as an enum.
+ * All supported color format names.
  *
  * @category Internal
+ * @enum
  */
-export declare const ColorFormatName: { [FormatName in ColorFormatName]: FormatName; };
+export declare const ColorFormatName: { [Key in ColorFormatName]: Key; };
 /**
- * All supported color format names. This can be used as an enum.
+ * All supported color format names.
  *
  * @category Internal
+ * @enum
  */
 export type ColorFormatName = keyof typeof rawColorFormats;
 /**
@@ -210,9 +202,9 @@ export type ColorCoordsByFormat = {
  * @category Internal
  */
 export type ColorFormats = Readonly<{
-    [FormatName in ColorFormatName]: ColorFormatDefinition<'colorSpace' extends keyof (typeof rawColorFormats)[FormatName] ? Extract<(typeof rawColorFormats)[FormatName], {
+    [FormatName in ColorFormatName]: ColorFormatDefinition<Extract<(typeof rawColorFormats)[FormatName], {
         colorSpace: any;
-    }>['colorSpace'] : FormatName>;
+    }>['colorSpace'], FormatName>;
 }>;
 /**
  * All supported color formats.
@@ -221,17 +213,25 @@ export type ColorFormats = Readonly<{
  */
 export declare const colorFormats: ColorFormats;
 /**
- * All available color space names.
+ * All supported color space names.
  *
  * @category Internal
+ * @enum
  */
 export type ColorSpaceName = Values<typeof rawColorFormats>['colorSpace'];
+/**
+ * All supported color space names.
+ *
+ * @category Internal
+ * @enum
+ */
+export declare const ColorSpaceName: { [Key in ColorSpaceName]: Key; };
 /**
  * All value types for all supported color formats.
  *
  * @category Internal
  */
-export type ColorValues = {
+export type ColorValue = {
     [FormatName in ColorFormatName]: Record<keyof (typeof rawColorFormats)[FormatName]['coords'], number>;
 };
 /**
@@ -239,16 +239,22 @@ export type ColorValues = {
  *
  * @category Color Format
  */
-export declare const colorSpaces: Record<"rgb" | "lab" | "oklab", Record<"rgb" | "hsl" | "hwb" | "lab" | "lch" | "oklab" | "oklch", ColorFormatDefinition<string>>>;
+export declare const colorFormatsBySpace: { [ColorSpace in ColorSpaceName]: { [ColorFormat in ColorFormatName]: ColorFormatDefinition<ColorSpace, ColorFormat>; }; };
 /**
- * All color format names in an array.
+ * All possible coordinate names for all supported color formats in a union.
  *
  * @category Internal
  */
-export declare const colorFormatNames: ColorFormatName[];
+export type ColorCoordinateName = keyof UnionToIntersection<Values<typeof rawColorFormats>['coords']>;
 /**
- * All possible coordinate names for all supported color formats in a union.
+ * A single color format definition.
  *
  * @category Internal
  */
-export type ColorCoordinateName = keyof UnionToIntersection<Values<typeof rawColorFormats>['coords']>;
+export type ColorFormatDefinition<ColorSpace extends ColorSpaceName = any, ColorFormat extends ColorFormatName = any> = {
+    /** Which exact color coordinates exist in here depends on the set color space. */
+    coords: Record<ColorCoordsByFormat[ColorFormat], ColorCoordinateDefinition>;
+    /** This name for this color to be used in `Colorjs.to()`. Defaults to the color format key. */
+    colorSpace: ColorSpace;
+    colorFormat: ColorFormat;
+};

package/dist/color-class/color-formats.js

@@ -1,4 +1,4 @@
-import { getObjectTypedEntries, getObjectTypedKeys, getOrSet, mapObjectValues, } from '@augment-vir/common';
+import { arrayToObject, getObjectTypedEntries, getObjectTypedValues, getOrSet, mapObjectValues, } from '@augment-vir/common';
 /**
  * All raw supported color formats.
  *
@@ -145,9 +145,10 @@ export const rawColorFormats = {
     },
 };
 /**
- * All supported color format names. This can be used as an enum.
+ * All supported color format names.
  *
  * @category Internal
+ * @enum
  */
 export const ColorFormatName = mapObjectValues(rawColorFormats, (colorName) => colorName);
 /**
@@ -155,21 +156,34 @@ export const ColorFormatName = mapObjectValues(rawColorFormats, (colorName) => c
  *
  * @category Color Format
  */
-export const colorFormats = rawColorFormats;
+export const colorFormats = mapObjectValues(rawColorFormats, (colorFormatName, colorFormatValue) => {
+    return {
+        ...colorFormatValue,
+        colorFormat: colorFormatName,
+    };
+});
+/**
+ * All supported color space names.
+ *
+ * @category Internal
+ * @enum
+ */
+export const ColorSpaceName = arrayToObject(getObjectTypedValues(rawColorFormats), (format) => {
+    return {
+        key: format.colorSpace,
+        value: format.colorSpace,
+    };
+}, {
+    useRequired: true,
+});
 /**
  * All color formats grouped by their color space.
  *
  * @category Color Format
  */
-export const colorSpaces = getObjectTypedEntries(colorFormats).reduce((accum, [colorFormatName, colorFormatDefinition,]) => {
+export const colorFormatsBySpace = getObjectTypedEntries(colorFormats).reduce((accum, [colorFormatName, colorFormatDefinition,]) => {
     getOrSet(accum, colorFormatDefinition.colorSpace, () => {
         return {};
     })[colorFormatName] = colorFormatDefinition;
     return accum;
 }, {});
-/**
- * All color format names in an array.
- *
- * @category Internal
- */
-export const colorFormatNames = getObjectTypedKeys(colorFormats);

package/dist/color-class/color.d.ts

@@ -1,6 +1,6 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
 import { type RequireExactlyOne } from 'type-fest';
-import { type ColorCoordsByFormat, type ColorFormatName, type ColorValues, type HexColor } from './color-formats.js';
+import { ColorFormatName, type ColorCoordsByFormat, type ColorValue, type HexColor } from './color-formats.js';
 /**
  * An update to an existing {@link Color} instance. Used in {@link Color.set}.
  *
@@ -18,7 +18,7 @@ export type ColorUpdate = RequireExactlyOne<{
  *
  * @category Internal
  */
-export type AllColorsValues = ColorValues & {
+export type AllColorsValues = ColorValue & {
     hex: HexColor;
     names: string[];
 };

package/dist/color-class/color.js

@@ -1,8 +1,8 @@
 import { assert, assertWrap, check } from '@augment-vir/assert';
-import { copyThroughJson, filterMap, getObjectTypedEntries, joinWithFinalConjunction, mapObjectValues, round, } from '@augment-vir/common';
+import { copyThroughJson, filterMap, getEnumValues, getObjectTypedEntries, getObjectTypedKeys, joinWithFinalConjunction, mapObjectValues, round, } from '@augment-vir/common';
 import colorNames from 'color-name';
 import { clampGamut, converter, formatHex, parse } from 'culori';
-import { colorFormatNames, colorFormats, } from './color-formats.js';
+import { ColorFormatName, colorFormats, } from './color-formats.js';
 import { maxColorNameLength } from './color-name-length.js';
 /**
  * A `Color` class with state and the following features:
@@ -109,7 +109,7 @@ export class Color {
             const colorFormatDefinition = colorFormats[colorFormatName];
             const orderedColorCoords = Object.values(mapObjectValues(colorFormatDefinition.coords, (coordName) => {
                 const coordValue = colorValues[coordName];
-                const coordDefinition = assertWrap.isDefined(colorFormatDefinition.coords[coordName]);
+                const coordDefinition = colorFormatDefinition.coords[assertWrap.isKeyOf(coordName, colorFormatDefinition.coords)];
                 const rawCoordValue = coordValue != undefined &&
                     coordValue >= coordDefinition.min &&
                     coordValue <= coordDefinition.max
@@ -125,7 +125,7 @@ export class Color {
      * internal color object.
      */
     pullFromInternalColor() {
-        colorFormatNames.forEach((colorFormatName) => {
+        getEnumValues(ColorFormatName).forEach((colorFormatName) => {
             const colorFormatDefinition = colorFormats[colorFormatName];
             const originalColorDefinition = check.isKeyOf(this.#internalColor.mode, colorFormats)
                 ? colorFormats[this.#internalColor.mode]
@@ -137,11 +137,12 @@ export class Color {
             if (!converted) {
                 assert.never(`Failed to convert color '${JSON.stringify(this.#internalColor)}' to '${colorFormatName}'.`);
             }
-            Object.keys(this[colorFormatName]).forEach((coordName) => {
+            getObjectTypedKeys(this[colorFormatName]).forEach((coordName) => {
                 const coordValue = converted[coordName];
+                const coordinateDefinition = colorFormatDefinition.coords[assertWrap.isKeyOf(coordName, colorFormatDefinition.coords)];
                 if (coordValue != undefined) {
-                    this._allColors[colorFormatName][coordName] = round((coordValue || 0) * (colorFormatDefinition.coords[coordName]?.factor || 1), {
-                        digits: colorFormatDefinition.coords[coordName]?.digits || 0,
+                    this._allColors[colorFormatName][coordName] = round((coordValue || 0) * (coordinateDefinition.factor || 1), {
+                        digits: coordinateDefinition.digits || 0,
                     });
                 }
             });

package/dist/elements/vir-all-color-space-sliders.element.d.ts

@@ -0,0 +1,11 @@
+import { type Color } from '../color-class/color.js';
+/**
+ * Color sliders for all color spaces.
+ *
+ * @category Elements
+ */
+export declare const VirAllColorSpaceSliders: import("element-vir").DeclarativeElementDefinition<"vir-all-color-space-sliders", {
+    color: Readonly<Color>;
+}, {}, {
+    colorChange: import("element-vir").DefineEvent<string>;
+}, "vir-all-color-space-sliders-", "vir-all-color-space-sliders-", readonly [], readonly []>;

package/dist/elements/vir-all-color-space-sliders.element.js

@@ -0,0 +1,52 @@
+/* node:coverage disable */
+import { getObjectTypedKeys, getObjectTypedValues } from '@augment-vir/common';
+import { css, defineElement, defineElementEvent, html, listen } from 'element-vir';
+import { colorFormatsBySpace } from '../color-class/color-formats.js';
+import { VirColorFormatSliders } from './vir-color-format-sliders.element.js';
+/**
+ * Color sliders for all color spaces.
+ *
+ * @category Elements
+ */
+export const VirAllColorSpaceSliders = defineElement()({
+    tagName: 'vir-all-color-space-sliders',
+    styles: css `
+        :host {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+
+        .color-space {
+            display: flex;
+            flex-wrap: wrap;
+            column-gap: 32px;
+            row-gap: 8px;
+        }
+    `,
+    events: {
+        colorChange: defineElementEvent(),
+    },
+    render({ inputs, dispatch, events }) {
+        const colorSpaceTemplates = getObjectTypedValues(colorFormatsBySpace).map((colorSpaceFormats) => {
+            const formatTemplates = getObjectTypedKeys(colorSpaceFormats).map((colorFormatName) => {
+                return html `
+                            <${VirColorFormatSliders.assign({
+                    color: inputs.color,
+                    colorFormatName,
+                })}
+                                ${listen(VirColorFormatSliders.events.colorChange, (event) => {
+                    dispatch(new events.colorChange(event.detail));
+                })}
+                            ></${VirColorFormatSliders}>
+                        `;
+            });
+            return html `
+                    <section class="color-space">${formatTemplates}</section>
+                `;
+        });
+        return html `
+            ${colorSpaceTemplates}
+        `;
+    },
+});

package/dist/elements/vir-color-format-sliders.element.d.ts

@@ -0,0 +1,13 @@
+import { type ColorFormatName } from '../color-class/color-formats.js';
+import { type Color } from '../color-class/color.js';
+/**
+ * Color sliders for all coordinates within a specific color format.
+ *
+ * @category Elements
+ */
+export declare const VirColorFormatSliders: import("element-vir").DeclarativeElementDefinition<"vir-color-format-sliders", {
+    color: Readonly<Color>;
+    colorFormatName: ColorFormatName;
+}, {}, {
+    colorChange: import("element-vir").DefineEvent<string>;
+}, "vir-color-format-sliders-", "vir-color-format-sliders-", readonly [], readonly []>;

package/dist/elements/vir-color-format-sliders.element.js

@@ -0,0 +1,54 @@
+/* node:coverage disable */
+import { getObjectTypedKeys } from '@augment-vir/common';
+import { css, defineElement, defineElementEvent, html, listen } from 'element-vir';
+import { noNativeSpacing } from 'vira';
+import { colorFormats, } from '../color-class/color-formats.js';
+import { VirColorSlider } from './vir-color-slider.element.js';
+/**
+ * Color sliders for all coordinates within a specific color format.
+ *
+ * @category Elements
+ */
+export const VirColorFormatSliders = defineElement()({
+    tagName: 'vir-color-format-sliders',
+    styles: css `
+        :host {
+            display: flex;
+            flex-direction: column;
+        }
+
+        h3 {
+            ${noNativeSpacing};
+        }
+    `,
+    events: {
+        colorChange: defineElementEvent(),
+    },
+    render({ inputs, dispatch, events }) {
+        const colorFormat = colorFormats[inputs.colorFormatName];
+        const coordinateTemplates = getObjectTypedKeys(colorFormat.coords).map((colorCoordinate) => {
+            return html `
+                    <${VirColorSlider.assign({
+                color: inputs.color,
+                colorCoordinateName: colorCoordinate,
+                colorFormatName: inputs.colorFormatName,
+            })}
+                        ${listen(VirColorSlider.events.valueChange, (event) => {
+                const newColor = inputs.color.clone();
+                newColor.set({
+                    [inputs.colorFormatName]: {
+                        [colorCoordinate]: event.detail,
+                    },
+                });
+                const newValue = newColor.toCss()[inputs.colorFormatName];
+                dispatch(new events.colorChange(newValue));
+            })}
+                    ></${VirColorSlider}>
+                `;
+        });
+        return html `
+            <h3>${inputs.colorFormatName}</h3>
+            ${coordinateTemplates}
+        `;
+    },
+});

package/dist/elements/vir-color-slider.element.d.ts

@@ -0,0 +1,14 @@
+import { type ColorCoordinateName, type ColorFormatName } from '../color-class/color-formats.js';
+import { Color } from '../color-class/color.js';
+/**
+ * A slider for a specific color coordinate in a specific color space in a specific color.
+ *
+ * @category Elements
+ */
+export declare const VirColorSlider: import("element-vir").DeclarativeElementDefinition<"vir-color-slider", {
+    color: Readonly<Color>;
+    colorFormatName: ColorFormatName;
+    colorCoordinateName: ColorCoordinateName;
+}, {}, {
+    valueChange: import("element-vir").DefineEvent<number>;
+}, "vir-color-slider-", "vir-color-slider-gradient", readonly [], readonly []>;

package/dist/elements/vir-color-slider.element.js

@@ -0,0 +1,101 @@
+/* node:coverage disable */
+import { assertWrap } from '@augment-vir/assert';
+import { createArray } from '@augment-vir/common';
+import { extractEventTarget } from '@augment-vir/web';
+import { css, defineElement, defineElementEvent, html, listen, unsafeCSS } from 'element-vir';
+import { viraFontCssVars, ViraInput } from 'vira';
+import { colorFormats, } from '../color-class/color-formats.js';
+import { Color } from '../color-class/color.js';
+/**
+ * A slider for a specific color coordinate in a specific color space in a specific color.
+ *
+ * @category Elements
+ */
+export const VirColorSlider = defineElement()({
+    tagName: 'vir-color-slider',
+    cssVars: {
+        'vir-color-slider-gradient': 'black',
+    },
+    styles: ({ cssVars }) => css `
+        :host {
+            display: flex;
+            align-items: center;
+            font-family: ${viraFontCssVars['vira-monospace'].value};
+            gap: 2px;
+        }
+
+        input[type='range'] {
+            flex-grow: 1;
+            appearance: none;
+            background: ${cssVars['vir-color-slider-gradient'].value};
+            height: 9px;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+
+        ${ViraInput} {
+            width: 76px;
+        }
+
+        .coordinate {
+            font-size: 18px;
+            margin-top: -4px;
+        }
+    `,
+    events: {
+        valueChange: defineElementEvent(),
+    },
+    render({ inputs, events, dispatch, cssVars }) {
+        const formatDefinition = colorFormats[inputs.colorFormatName];
+        const coordinateDefinition = formatDefinition.coords[inputs.colorCoordinateName];
+        if (!coordinateDefinition) {
+            throw new Error(`Invalid color coordinate '${inputs.colorCoordinateName}' for color format '${inputs.colorFormatName}'`);
+        }
+        const totalStops = 10;
+        const colorStops = createArray(totalStops, (index) => {
+            const value = coordinateDefinition.min +
+                (coordinateDefinition.max - coordinateDefinition.min) * (index / totalStops);
+            const stopColor = new Color({
+                [inputs.colorFormatName]: {
+                    ...inputs.color[inputs.colorFormatName],
+                    [inputs.colorCoordinateName]: value,
+                },
+            });
+            return stopColor.toCss()[inputs.colorFormatName];
+        });
+        const gradient = css `linear-gradient(to right, ${unsafeCSS(colorStops.join(','))})`;
+        const coordinateValue = assertWrap.isNumber(inputs.color[inputs.colorFormatName][inputs.colorCoordinateName]);
+        return html `
+            <span class="coordinate">${inputs.colorCoordinateName.toUpperCase()}</span>
+            <input
+                type="range"
+                style=${css `
+                    ${cssVars['vir-color-slider-gradient'].name}: ${gradient};
+                `}
+                min=${coordinateDefinition.min}
+                max=${coordinateDefinition.max}
+                .value=${String(coordinateValue)}
+                step=${Math.pow(10, coordinateDefinition.digits ? -coordinateDefinition.digits : 0)}
+                ${listen('input', (event) => {
+            const element = extractEventTarget(event, HTMLInputElement);
+            const newValue = Number(element.value);
+            if (isNaN(newValue)) {
+                return;
+            }
+            dispatch(new events.valueChange(newValue));
+        })}
+            />
+            <${ViraInput.assign({
+            value: String(coordinateValue),
+        })}
+                ${listen(ViraInput.events.valueChange, (event) => {
+            const newValue = Number(event.detail);
+            if (isNaN(newValue)) {
+                return;
+            }
+            dispatch(new events.valueChange(newValue));
+        })}
+            ></${ViraInput}>
+        `;
+    },
+});

package/dist/index.d.ts

@@ -2,5 +2,8 @@ export * from './color-class/color-formats.js';
 export * from './color-class/color-name-length.js';
 export * from './color-class/color.js';
 export * from './contrast/contrast.js';
+export * from './elements/vir-all-color-space-sliders.element.js';
+export * from './elements/vir-color-format-sliders.element.js';
 export * from './elements/vir-color-pair.element.js';
+export * from './elements/vir-color-slider.element.js';
 export * from './elements/vir-contrast-indicator.element.js';

package/dist/index.js

@@ -2,5 +2,8 @@ export * from './color-class/color-formats.js';
 export * from './color-class/color-name-length.js';
 export * from './color-class/color.js';
 export * from './contrast/contrast.js';
+export * from './elements/vir-all-color-space-sliders.element.js';
+export * from './elements/vir-color-format-sliders.element.js';
 export * from './elements/vir-color-pair.element.js';
+export * from './elements/vir-color-slider.element.js';
 export * from './elements/vir-contrast-indicator.element.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@electrovir/color",
-    "version": "1.0.0",
+    "version": "1.1.0",
     "description": "A wrapper for culori with an extremely simple API.",
     "keywords": [
         "color",
@@ -52,6 +52,7 @@
     "dependencies": {
         "@augment-vir/assert": "^31.57.3",
         "@augment-vir/common": "^31.57.3",
+        "@augment-vir/web": "^31.57.3",
         "apca-w3": "^0.1.9",
         "color-name": "^2.1.0",
         "culori": "^4.0.2",
@@ -101,7 +102,7 @@
         "typedoc": "^0.28.15",
         "typescript": "^5.9.3",
         "typescript-eslint": "^8.51.0",
-        "vira": "^28.15.0",
+        "vira": "^28.16.0",
         "virmator": "^14.4.0",
         "vite": "^7.3.0"
     },