@fusion.dev/helix-core 0.150.0 → 0.152.0

package/dist/utils/chord/key-names.js

@@ -36,17 +36,72 @@ const ELSEWHERE = {
     tab: 'Tab',
     up: '↑',
 };
+const SPOKEN = {
+    alt: 'Option',
+    backspace: 'Delete',
+    cmd: 'Command',
+    ctrl: 'Control',
+    del: 'Forward Delete',
+    down: 'Down Arrow',
+    enter: 'Return',
+    left: 'Left Arrow',
+    meta: 'Command',
+    mod: 'Command',
+    opt: 'Option',
+    right: 'Right Arrow',
+    shift: 'Shift',
+    tab: 'Tab',
+    up: 'Up Arrow',
+};
+const ORDER_APPLE = {
+    alt: 1,
+    cmd: 3,
+    ctrl: 0,
+    meta: 3,
+    mod: 3,
+    opt: 1,
+    shift: 2,
+};
+const ORDER_ELSEWHERE = {
+    alt: 2,
+    cmd: 0,
+    ctrl: 1,
+    meta: 0,
+    mod: 1,
+    opt: 2,
+    shift: 3,
+};
+const ordered = (parts, apple) => {
+    const order = apple ? ORDER_APPLE : ORDER_ELSEWHERE;
+    const rank = (part) => order[part.toLowerCase()] ?? Number.POSITIVE_INFINITY;
+    return parts
+        .map((part, index) => ({ index, part }))
+        .sort((a, b) => rank(a.part) - rank(b.part) || a.index - b.index)
+        .map(({ part }) => part);
+};
 export const keyNames = (parts, apple, own = {}) => {
     const names = apple ? APPLE : ELSEWHERE;
     let worded = false;
-    const keys = parts.map((part) => {
+    let glyphs = false;
+    const words = [];
+    const keys = ordered(parts, apple).map((part) => {
         const name = part.toLowerCase();
         const mine = own[name];
         if (mine !== undefined) {
             worded ||= [...mine].length > 1;
+            words.push(mine);
             return mine;
         }
-        return names[name] ?? (part.length === 1 ? part.toUpperCase() : part);
+        const shown = names[name] ?? (part.length === 1 ? part.toUpperCase() : part);
+        const said = SPOKEN[name];
+        const glyph = said !== undefined && [...shown].length === 1;
+        glyphs ||= glyph;
+        words.push(glyph ? said : shown);
+        return shown;
     });
-    return { keys, separator: apple ? (worded ? '-' : '') : '+' };
+    return {
+        keys,
+        separator: apple ? (worded ? '-' : '') : '+',
+        spoken: glyphs ? words.join(' ') : '',
+    };
 };

package/dist/utils/draw-value-axis/draw-value-axis.d.ts

@@ -0,0 +1,22 @@
+import { type TemplateResult } from 'lit';
+/**
+ * The numbers of a chart's value scale, beside its drawing: an `axis` part
+ * holding a `tick` part at each level `ticks` picks, which are the levels
+ * `gridlines` rules.
+ *
+ * HTML beside the plot, for the reason a chart's reading names are: text
+ * inside an `<svg>` that fills its box scales with the box. Each tick is placed
+ * with `inset-block-start`, as a percentage of the axis, so a stylesheet that
+ * makes the axis as tall as the plot puts each number on its level.
+ *
+ * `width` builds the axis's style from the number of characters in its widest
+ * number. The ticks are positioned absolutely and give the column no width of
+ * their own, so each family writes its own custom property there, such as
+ * `--line-chart-axis` in `ch`, and a stylesheet sizes the column from it.
+ *
+ * @param domain The scale's lowest and highest values.
+ * @param place Where a value sits down the plot, from 0 at the top to 100 at the bottom.
+ * @param format How a value is written, such as a number in the chart's locale.
+ * @param width The style the axis carries, from the number of characters in its widest number.
+ */
+export declare const drawValueAxis: (domain: readonly [number, number], place: (value: number) => number, format: (value: number) => string, width: (widest: number) => string) => TemplateResult;

package/dist/utils/draw-value-axis/draw-value-axis.js

@@ -0,0 +1,9 @@
+import { html } from 'lit';
+import { ticks } from '../scale/ticks.js';
+export const drawValueAxis = (domain, place, format, width) => {
+    const levels = ticks(domain);
+    const widest = Math.max(1, ...levels.map((level) => format(level).length));
+    return html `<div aria-hidden="true" part="axis" style=${width(widest)}>
+    ${levels.map((level) => html `<span part="tick" style=${`inset-block-start: ${place(level)}%`}>${format(level)}</span>`)}
+  </div>`;
+};

package/dist/utils/read-color/read-color.d.ts

@@ -7,8 +7,16 @@
  */
 /** A color as three sRGB bytes, which is what a canvas reports and takes. */
 export type ColorBytes = [number, number, number];
+/** A color as three sRGB bytes and its alpha, from 0 to 1. */
+export type ColorBytesAlpha = [number, number, number, number];
 /**
- * A computed color as three sRGB bytes, or nothing where it cannot be read.
+ * `value` painted onto a clear pixel and read back, alpha and all, or nothing
+ * where the engine does not parse it.
+ */
+export declare const paintedColor: (context: CanvasRenderingContext2D, value: string) => ColorBytesAlpha | undefined;
+/**
+ * A computed color as three sRGB bytes and its alpha, or nothing where it
+ * cannot be read.
  *
  * **Painting it is the only way to read it.** A color-typed property is
  * resolved before it is reported, but resolved is not the same as converted:
@@ -18,13 +26,11 @@ export type ColorBytes = [number, number, number];
  * `lab(0 0 0)`, which scrapes to black and looks right, so only dark mode
  * showed it: dark red mixed toward black, on a near-black ground.
  *
- * **Painted twice, over two different grounds, which is what makes the refusal
- * honest.** Assigning a value the engine will not parse leaves `fillStyle`
- * exactly where it was, so a single paint cannot tell a color apart from the
- * ground it failed to replace. Over black and over white, a value that parsed
- * gives the same answer twice and one that did not gives two. A caller then
- * chooses its own fallback rather than being handed a color nobody picked,
- * which is the half both earlier copies of this had to guess at.
+ * **A value the engine does not parse is refused**, so a caller chooses its
+ * own fallback rather than being handed a color nobody picked. A see-through
+ * color is read with its alpha: `rgb(255 0 0 / 50%)` is `[255, 0, 0, 0.5]`.
+ * It was refused too, when the test for parsing was painting over black and
+ * over white, and Orb drew it gray.
  *
  * A readback is not free, so the answer is held against the string it came
  * from, refusals included. The oldest goes when the store is full rather than
@@ -33,6 +39,16 @@ export type ColorBytes = [number, number, number];
  *
  * @param value A resolved color, as `getComputedStyle` reports one.
  */
+export declare const readColorAlpha: (value: string) => ColorBytesAlpha | undefined;
+/**
+ * A computed color as three sRGB bytes, or nothing where it cannot be read or
+ * is see-through.
+ *
+ * `readColorAlpha` is the reading, and this keeps an opaque color only, which
+ * is what a caller with no use for alpha can draw as it is.
+ *
+ * @param value A resolved color, as `getComputedStyle` reports one.
+ */
 export declare const readColor: (value: string) => ColorBytes | undefined;
 /**
  * A computed color as `rgb()`, or `rgba()` where it is see-through, which

package/dist/utils/read-color/read-color.js

@@ -1,14 +1,24 @@
 let swatch;
 const known = new Map();
 const KEPT = 64;
-const painted = (context, value, under) => {
-    context.fillStyle = under;
+const parses = (context, value) => {
+    context.fillStyle = '#000000';
     context.fillStyle = value;
+    const overBlack = String(context.fillStyle);
+    context.fillStyle = '#ffffff';
+    context.fillStyle = value;
+    return String(context.fillStyle) === overBlack;
+};
+export const paintedColor = (context, value) => {
+    if (!parses(context, value)) {
+        return undefined;
+    }
+    context.clearRect(0, 0, 1, 1);
     context.fillRect(0, 0, 1, 1);
-    const [red, green, blue] = context.getImageData(0, 0, 1, 1).data;
-    return [red ?? 0, green ?? 0, blue ?? 0];
+    const [red, green, blue, alpha] = context.getImageData(0, 0, 1, 1).data;
+    return [red ?? 0, green ?? 0, blue ?? 0, Math.round(((alpha ?? 0) / 255) * 1000) / 1000];
 };
-export const readColor = (value) => {
+export const readColorAlpha = (value) => {
     if (known.has(value)) {
         const seen = known.get(value);
         return seen ? [...seen] : undefined;
@@ -22,9 +32,7 @@ export const readColor = (value) => {
     if (!swatch) {
         return undefined;
     }
-    const over = painted(swatch, value, '#000000');
-    const under = painted(swatch, value, '#ffffff');
-    const read = over.every((one, at) => one === under[at]) ? over : undefined;
+    const read = paintedColor(swatch, value);
     if (known.size >= KEPT) {
         const oldest = known.keys().next().value;
         if (oldest !== undefined) {
@@ -34,6 +42,10 @@ export const readColor = (value) => {
     known.set(value, read);
     return read ? [...read] : undefined;
 };
+export const readColor = (value) => {
+    const read = readColorAlpha(value);
+    return read && read[3] === 1 ? [read[0], read[1], read[2]] : undefined;
+};
 export const rgbOf = (color) => {
     const pixel = typeof document === 'undefined' ? null : document.createElement('canvas');
     const context = pixel?.getContext?.('2d', { willReadFrequently: true });

package/dist/version.d.ts

@@ -6,4 +6,4 @@
  * release, so the two never disagree; a spec beside this holds them to it.
  * Nothing else in the running code knows which release it is.
  */
-export declare const VERSION = "0.150.0";
+export declare const VERSION = "0.152.0";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = '0.150.0';
+export const VERSION = '0.152.0';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-core",
   "description": "Helix element primitives: base classes, mixins, decorators, utilities.",
-  "version": "0.150.0",
+  "version": "0.152.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -56,11 +56,11 @@
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
-    "@fusion.dev/helix-icons": "0.150.0"
+    "@fusion.dev/helix-icons": "0.152.0"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.150.0",
-    "@fusion.dev/helix-testing": "0.150.0",
+    "@fusion.dev/helix-cem": "0.152.0",
+    "@fusion.dev/helix-testing": "0.152.0",
     "@lit-labs/ssr": "^4.1.0",
     "lit": "^3.2.1"
   },