@weasel-js/cursor 1.4.0-pre.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 orochi235
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,43 @@
+# @weasel-js/cursor
+
+Tool cursors as authored glyphs.
+
+```ts
+import { cursorFor } from '@weasel-js/cursor';
+
+const tool = defineTool({
+  id: 'pencil',
+  cursor: cursorFor('pencil', { fallback: 'crosshair' }),
+});
+```
+
+A glyph is a set of SVG path `d` strings with paint roles and a hotspot in
+glyph units. `cursorFor` bakes one into a CSS cursor value and memoizes it.
+
+**Always pass a `fallback`.** If the browser rejects the image the element falls
+back to that keyword, and with none declared it lands on `auto`.
+
+Cursors ship as SVG with no bitmap fallback: Chrome rasterizes an SVG data-URI
+cursor at device scale, so it is already crisp on a retina display. `bakeCursor`
+throws above 128 CSS px rather than emitting a cursor the browser would drop
+silently.
+
+## Authoring a glyph
+
+Geometry lives in `scripts/glyphs/` and is generated to resolved literals:
+
+```
+npm run gen:cursors      # regenerate src/glyphs.ts
+npm run proof:cursors    # render every glyph over three grounds
+```
+
+Proof a change before committing it. The proof sheet draws each glyph at 11x for
+geometry and embeds the baked asset at 24 and 16 px — those are separate checks
+and they disagree, which is the point. A glyph that reads at 11x and turns to
+mush at 24 has failed.
+
+The register is a filled silhouette with a white halo, deliberately unlike the
+toolbar icon sets (`@weasel-js/ui`'s `ICON_PATHS`, core's tool icons), which are
+`fill: none` outlines in `currentColor`. An unfilled glyph over dark artwork is
+a dark outline around a dark hole, and a baked image has no cascade to inherit a
+color from. Share the authoring discipline, not the paths.

package/dist/index.d.ts

@@ -0,0 +1,122 @@
+/**
+ * A cursor glyph: SVG path `d` strings tagged with a paint role, plus the
+ * hotspot in glyph units. The same record feeds both the data-URI baker and
+ * the Path2D painter, so `d` is the one geometry form neither has to translate.
+ */
+interface CursorGlyph {
+    /** Side of the square viewBox the paths are authored in. */
+    readonly box: number;
+    /** Hotspot in glyph units, scaled to integer CSS px at bake time. */
+    readonly hotspot: readonly [number, number];
+    readonly paths: readonly CursorPath[];
+}
+type CursorPath = 
+/** A filled part of the silhouette. */
+{
+    readonly role: 'ink';
+    readonly d: string;
+}
+/** An unfilled part of the silhouette — a handle, a wire, an arc. */
+ | {
+    readonly role: 'stroke';
+    readonly d: string;
+    readonly width: number;
+}
+/** A division inside the silhouette, drawn in the halo color. */
+ | {
+    readonly role: 'detail';
+    readonly d: string;
+    readonly width: number;
+}
+/** A literal color, for glyphs that carry a swatch. */
+ | {
+    readonly role: 'accent';
+    readonly d: string;
+    readonly fill: string;
+};
+/**
+ * Ink and halo are constants of the register rather than parameters: a
+ * self-contrasting glyph reads on white paper, dark chrome and mid-tone
+ * artwork alike precisely because it does not track the theme.
+ */
+declare const CURSOR_INK = "#141418";
+declare const CURSOR_HALO = "#ffffff";
+declare const CURSOR_HALO_WIDTH = 2.6;
+/**
+ * Chrome silently drops a cursor image above this size and falls back to the
+ * keyword after the comma, with no error anywhere. Measured on Chrome 152 /
+ * macOS 26.5; see the spec's "Measured browser behavior".
+ */
+declare const CURSOR_MAX_CSS_PX = 128;
+/**
+ * True when every authored path sits at least half a halo stroke inside the
+ * viewBox. A clipped halo is invisible at proof size and flattens the glyph's
+ * outline at cursor size, so it is worth failing loudly at authoring time
+ * rather than discovering it on a dark background.
+ */
+declare function haloFitsInBox(glyph: CursorGlyph): boolean;
+
+interface BakeOptions {
+    /** Rendered size in CSS px. Default 24. */
+    readonly size?: number;
+    /** Keyword drawn if the browser rejects the image. Default 'default'. */
+    readonly fallback?: string;
+}
+/**
+ * Render a glyph to a CSS cursor value.
+ *
+ * Ships SVG rather than a bitmap because Chrome rasterizes an SVG data-URI
+ * cursor at device scale — it is already crisp on a retina display, so there
+ * is no PNG pipeline and no `image-set()` here. See the spec.
+ */
+declare function bakeCursor(glyph: CursorGlyph, opts?: BakeOptions): string;
+
+declare const GLYPHS: {
+    readonly pencil: {
+        readonly box: 24;
+        readonly hotspot: readonly [5, 19];
+        readonly paths: readonly [{
+            readonly role: "ink";
+            readonly d: "M 5 19 L 7.5 16.5 L 16 8 L 19 11 L 10.5 19.5 L 8 19 Z";
+        }, {
+            readonly role: "detail";
+            readonly d: "M 14 6 L 19 11";
+            readonly width: 1.2;
+        }];
+    };
+    readonly pen: {
+        readonly box: 24;
+        readonly hotspot: readonly [5, 19];
+        readonly paths: readonly [{
+            readonly role: "ink";
+            readonly d: "M 5 19 L 8.5 9.5 L 13 5 L 18 10 L 13.5 14.5 Z";
+        }, {
+            readonly role: "detail";
+            readonly d: "M 8.4 13.9 L 12.2 10.1";
+            readonly width: 0.9;
+        }];
+    };
+    readonly eyedropper: {
+        readonly box: 24;
+        readonly hotspot: readonly [5, 19];
+        readonly paths: readonly [{
+            readonly role: "ink";
+            readonly d: "M 5 19 L 6.8 14.8 L 14.4 7.2 L 16.8 9.6 L 9.2 17.2 Z";
+        }, {
+            readonly role: "ink";
+            readonly d: "M 18.2 2.6 A 3.2 3.2 0 1 0 18.2 9 A 3.2 3.2 0 1 0 18.2 2.6 Z";
+        }];
+    };
+};
+/** Every glyph name in the set. */
+type CursorGlyphName = keyof typeof GLYPHS;
+
+/**
+ * The baked cursor string for a named glyph, memoized.
+ *
+ * The key space is bounded by the glyph set times the handful of sizes and
+ * fallbacks in use, so the cache needs no eviction.
+ */
+declare function cursorFor(name: CursorGlyphName, opts?: BakeOptions): string;
+
+export { type BakeOptions, CURSOR_HALO, CURSOR_HALO_WIDTH, CURSOR_INK, CURSOR_MAX_CSS_PX, type CursorGlyph, type CursorGlyphName, type CursorPath, GLYPHS, bakeCursor, cursorFor, haloFitsInBox };

package/dist/index.js

@@ -0,0 +1,176 @@
+// src/types.ts
+var CURSOR_INK = "#141418";
+var CURSOR_HALO = "#ffffff";
+var CURSOR_HALO_WIDTH = 2.6;
+var CURSOR_MAX_CSS_PX = 128;
+function extent(d) {
+  let min = Number.POSITIVE_INFINITY;
+  let max = Number.NEGATIVE_INFINITY;
+  let cx = 0;
+  let cy = 0;
+  const see = (v) => {
+    if (v < min) min = v;
+    if (v > max) max = v;
+  };
+  for (const [, cmd, args] of d.matchAll(/([A-Za-z])([^A-Za-z]*)/g)) {
+    if (cmd !== cmd.toUpperCase()) {
+      throw new Error(`cursor glyph path uses a relative command '${cmd}': ${d}`);
+    }
+    const nums = (args.match(/-?\d+(?:\.\d+)?/g) ?? []).map(Number);
+    if (cmd === "Z") continue;
+    if (cmd === "A") {
+      for (let i = 0; i + 7 <= nums.length; i += 7) {
+        const [rx, ry, , largeArc, sweep, x, y] = nums.slice(i, i + 7);
+        const r = Math.max(rx, ry);
+        const dx = x - cx;
+        const dy = y - cy;
+        const half = Math.hypot(dx, dy) / 2;
+        const off = Math.sqrt(Math.max(0, r * r - half * half));
+        const sign = largeArc === sweep ? -1 : 1;
+        const ux = half > 0 ? -dy / (half * 2) : 0;
+        const uy = half > 0 ? dx / (half * 2) : 0;
+        const ox = (cx + x) / 2 + sign * off * ux;
+        const oy = (cy + y) / 2 + sign * off * uy;
+        see(ox - r);
+        see(ox + r);
+        see(oy - r);
+        see(oy + r);
+        cx = x;
+        cy = y;
+      }
+      continue;
+    }
+    for (let i = 0; i + 2 <= nums.length; i += 2) {
+      cx = nums[i];
+      cy = nums[i + 1];
+      see(cx);
+      see(cy);
+    }
+  }
+  return { min, max };
+}
+function haloFitsInBox(glyph) {
+  const margin = CURSOR_HALO_WIDTH / 2;
+  return glyph.paths.every((p) => {
+    const { min, max } = extent(p.d);
+    return min >= margin && max <= glyph.box - margin;
+  });
+}
+
+// src/bake.ts
+function renderHalo(p) {
+  switch (p.role) {
+    case "ink":
+    case "accent":
+      return `<path d="${p.d}" fill="${CURSOR_HALO}" stroke="${CURSOR_HALO}" stroke-width="${CURSOR_HALO_WIDTH}" stroke-linejoin="round"/>`;
+    case "stroke":
+      return `<path d="${p.d}" fill="none" stroke="${CURSOR_HALO}" stroke-width="${p.width + CURSOR_HALO_WIDTH}" stroke-linecap="round" stroke-linejoin="round"/>`;
+    // A detail IS halo-coloured and sits on top of the ink; it has no halo.
+    case "detail":
+      return "";
+  }
+}
+function renderInk(p) {
+  switch (p.role) {
+    case "ink":
+      return `<path d="${p.d}" fill="${CURSOR_INK}"/>`;
+    case "stroke":
+      return `<path d="${p.d}" fill="none" stroke="${CURSOR_INK}" stroke-width="${p.width}" stroke-linecap="round" stroke-linejoin="round"/>`;
+    case "detail":
+      return `<path d="${p.d}" fill="none" stroke="${CURSOR_HALO}" stroke-width="${p.width}" stroke-linecap="round"/>`;
+    case "accent":
+      return `<path d="${p.d}" fill="${p.fill}"/>`;
+  }
+}
+function bakeCursor(glyph, opts = {}) {
+  const size = opts.size ?? 24;
+  if (size > CURSOR_MAX_CSS_PX) {
+    throw new RangeError(
+      `cursor size ${size} exceeds the ${CURSOR_MAX_CSS_PX}px cap: the browser would drop the image and silently fall back. Use the painted tier.`
+    );
+  }
+  const body = glyph.paths.map(renderHalo).join("") + glyph.paths.map(renderInk).join("");
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${glyph.box} ${glyph.box}">${body}</svg>`;
+  const hx = Math.round(glyph.hotspot[0] / glyph.box * size);
+  const hy = Math.round(glyph.hotspot[1] / glyph.box * size);
+  const uri = `data:image/svg+xml,${encodeURIComponent(svg)}`;
+  return `url("${uri}") ${hx} ${hy}, ${opts.fallback ?? "default"}`;
+}
+
+// src/glyphs.ts
+var GLYPHS = {
+  "pencil": {
+    "box": 24,
+    "hotspot": [
+      5,
+      19
+    ],
+    "paths": [
+      {
+        "role": "ink",
+        "d": "M 5 19 L 7.5 16.5 L 16 8 L 19 11 L 10.5 19.5 L 8 19 Z"
+      },
+      {
+        "role": "detail",
+        "d": "M 14 6 L 19 11",
+        "width": 1.2
+      }
+    ]
+  },
+  "pen": {
+    "box": 24,
+    "hotspot": [
+      5,
+      19
+    ],
+    "paths": [
+      {
+        "role": "ink",
+        "d": "M 5 19 L 8.5 9.5 L 13 5 L 18 10 L 13.5 14.5 Z"
+      },
+      {
+        "role": "detail",
+        "d": "M 8.4 13.9 L 12.2 10.1",
+        "width": 0.9
+      }
+    ]
+  },
+  "eyedropper": {
+    "box": 24,
+    "hotspot": [
+      5,
+      19
+    ],
+    "paths": [
+      {
+        "role": "ink",
+        "d": "M 5 19 L 6.8 14.8 L 14.4 7.2 L 16.8 9.6 L 9.2 17.2 Z"
+      },
+      {
+        "role": "ink",
+        "d": "M 18.2 2.6 A 3.2 3.2 0 1 0 18.2 9 A 3.2 3.2 0 1 0 18.2 2.6 Z"
+      }
+    ]
+  }
+};
+
+// src/registry.ts
+var cache = /* @__PURE__ */ new Map();
+function cursorFor(name, opts = {}) {
+  const size = opts.size ?? 24;
+  const fallback = opts.fallback ?? "default";
+  const key = `${name}|${size}|${fallback}`;
+  const hit = cache.get(key);
+  if (hit !== void 0) return hit;
+  const glyph = GLYPHS[name];
+  if (glyph === void 0) {
+    throw new Error(`unknown cursor glyph: ${String(name)}`);
+  }
+  const css = bakeCursor(glyph, { size, fallback });
+  cache.set(key, css);
+  return css;
+}
+
+export { CURSOR_HALO, CURSOR_HALO_WIDTH, CURSOR_INK, CURSOR_MAX_CSS_PX, GLYPHS, bakeCursor, cursorFor, haloFitsInBox };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/types.ts","../src/bake.ts","../src/glyphs.ts","../src/registry.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["/**\n * A cursor glyph: SVG path `d` strings tagged with a paint role, plus the\n * hotspot in glyph units. The same record feeds both the data-URI baker and\n * the Path2D painter, so `d` is the one geometry form neither has to translate.\n */\nexport interface CursorGlyph {\n  /** Side of the square viewBox the paths are authored in. */\n  readonly box: number;\n  /** Hotspot in glyph units, scaled to integer CSS px at bake time. */\n  readonly hotspot: readonly [number, number];\n  readonly paths: readonly CursorPath[];\n}\n\nexport type CursorPath =\n  /** A filled part of the silhouette. */\n  | { readonly role: 'ink'; readonly d: string }\n  /** An unfilled part of the silhouette — a handle, a wire, an arc. */\n  | { readonly role: 'stroke'; readonly d: string; readonly width: number }\n  /** A division inside the silhouette, drawn in the halo color. */\n  | { readonly role: 'detail'; readonly d: string; readonly width: number }\n  /** A literal color, for glyphs that carry a swatch. */\n  | { readonly role: 'accent'; readonly d: string; readonly fill: string };\n\n/**\n * Ink and halo are constants of the register rather than parameters: a\n * self-contrasting glyph reads on white paper, dark chrome and mid-tone\n * artwork alike precisely because it does not track the theme.\n */\nexport const CURSOR_INK = '#141418';\nexport const CURSOR_HALO = '#ffffff';\nexport const CURSOR_HALO_WIDTH = 2.6;\n\n/**\n * Chrome silently drops a cursor image above this size and falls back to the\n * keyword after the comma, with no error anywhere. Measured on Chrome 152 /\n * macOS 26.5; see the spec's \"Measured browser behavior\".\n */\nexport const CURSOR_MAX_CSS_PX = 128;\n\n/**\n * Axis-aligned bounds of an authored `d` string.\n *\n * Command-aware on purpose. Scraping every number out of the string instead\n * reads an arc's radii and its three flags as coordinates, which reports a\n * bogus `0` for every `A` ever written.\n *\n * An arc is bounded by the circle it lies on: its centre is recovered from the\n * endpoints and radius, then the whole circle is admitted. Expanding the arc's\n * *endpoint* by the radii instead over-reports whenever an endpoint sits at an\n * extreme of the circle, which is exactly where the half-circle idiom these\n * glyphs use puts it.\n *\n * The authored dialect is absolute `M`/`L`/`A`/`Z` with circular arcs. A\n * relative command would be measured as if absolute and silently under-report,\n * so it throws.\n */\nfunction extent(d: string): { min: number; max: number } {\n  let min = Number.POSITIVE_INFINITY;\n  let max = Number.NEGATIVE_INFINITY;\n  let cx = 0;\n  let cy = 0;\n  const see = (v: number) => {\n    if (v < min) min = v;\n    if (v > max) max = v;\n  };\n  for (const [, cmd, args] of d.matchAll(/([A-Za-z])([^A-Za-z]*)/g)) {\n    if (cmd !== cmd.toUpperCase()) {\n      throw new Error(`cursor glyph path uses a relative command '${cmd}': ${d}`);\n    }\n    const nums = (args.match(/-?\\d+(?:\\.\\d+)?/g) ?? []).map(Number);\n    if (cmd === 'Z') continue;\n    if (cmd === 'A') {\n      for (let i = 0; i + 7 <= nums.length; i += 7) {\n        const [rx, ry, , largeArc, sweep, x, y] = nums.slice(i, i + 7);\n        const r = Math.max(rx, ry);\n        const dx = x - cx;\n        const dy = y - cy;\n        const half = Math.hypot(dx, dy) / 2;\n        // Centre sits off the chord midpoint by this much, perpendicular to it.\n        const off = Math.sqrt(Math.max(0, r * r - half * half));\n        const sign = largeArc === sweep ? -1 : 1;\n        const ux = half > 0 ? -dy / (half * 2) : 0;\n        const uy = half > 0 ? dx / (half * 2) : 0;\n        const ox = (cx + x) / 2 + sign * off * ux;\n        const oy = (cy + y) / 2 + sign * off * uy;\n        see(ox - r);\n        see(ox + r);\n        see(oy - r);\n        see(oy + r);\n        cx = x;\n        cy = y;\n      }\n      continue;\n    }\n    // M and L: plain coordinate pairs.\n    for (let i = 0; i + 2 <= nums.length; i += 2) {\n      cx = nums[i];\n      cy = nums[i + 1];\n      see(cx);\n      see(cy);\n    }\n  }\n  return { min, max };\n}\n\n/**\n * True when every authored path sits at least half a halo stroke inside the\n * viewBox. A clipped halo is invisible at proof size and flattens the glyph's\n * outline at cursor size, so it is worth failing loudly at authoring time\n * rather than discovering it on a dark background.\n */\nexport function haloFitsInBox(glyph: CursorGlyph): boolean {\n  const margin = CURSOR_HALO_WIDTH / 2;\n  return glyph.paths.every((p) => {\n    const { min, max } = extent(p.d);\n    return min >= margin && max <= glyph.box - margin;\n  });\n}\n","import {\n  CURSOR_HALO,\n  CURSOR_HALO_WIDTH,\n  CURSOR_INK,\n  CURSOR_MAX_CSS_PX,\n} from './types';\nimport type { CursorGlyph, CursorPath } from './types';\n\nexport interface BakeOptions {\n  /** Rendered size in CSS px. Default 24. */\n  readonly size?: number;\n  /** Keyword drawn if the browser rejects the image. Default 'default'. */\n  readonly fallback?: string;\n}\n\n/**\n * The halo pass. Every silhouette member is drawn once, wide, in halo colour\n * before any ink lands.\n *\n * It has to be a separate pass rather than a per-path `paint-order`: with each\n * path stroking its own halo, a later path's halo cuts a white trench through\n * an earlier path's fill wherever the two overlap. One pass under everything\n * gives the glyph a single continuous outline instead.\n */\nfunction renderHalo(p: CursorPath): string {\n  switch (p.role) {\n    case 'ink':\n    case 'accent':\n      return (\n        `<path d=\"${p.d}\" fill=\"${CURSOR_HALO}\" stroke=\"${CURSOR_HALO}\"` +\n        ` stroke-width=\"${CURSOR_HALO_WIDTH}\" stroke-linejoin=\"round\"/>`\n      );\n    case 'stroke':\n      return (\n        `<path d=\"${p.d}\" fill=\"none\" stroke=\"${CURSOR_HALO}\"` +\n        ` stroke-width=\"${p.width + CURSOR_HALO_WIDTH}\"` +\n        ` stroke-linecap=\"round\" stroke-linejoin=\"round\"/>`\n      );\n    // A detail IS halo-coloured and sits on top of the ink; it has no halo.\n    case 'detail':\n      return '';\n  }\n}\n\nfunction renderInk(p: CursorPath): string {\n  switch (p.role) {\n    case 'ink':\n      return `<path d=\"${p.d}\" fill=\"${CURSOR_INK}\"/>`;\n    case 'stroke':\n      return (\n        `<path d=\"${p.d}\" fill=\"none\" stroke=\"${CURSOR_INK}\"` +\n        ` stroke-width=\"${p.width}\" stroke-linecap=\"round\"` +\n        ` stroke-linejoin=\"round\"/>`\n      );\n    case 'detail':\n      return (\n        `<path d=\"${p.d}\" fill=\"none\" stroke=\"${CURSOR_HALO}\"` +\n        ` stroke-width=\"${p.width}\" stroke-linecap=\"round\"/>`\n      );\n    case 'accent':\n      return `<path d=\"${p.d}\" fill=\"${p.fill}\"/>`;\n  }\n}\n\n/**\n * Render a glyph to a CSS cursor value.\n *\n * Ships SVG rather than a bitmap because Chrome rasterizes an SVG data-URI\n * cursor at device scale — it is already crisp on a retina display, so there\n * is no PNG pipeline and no `image-set()` here. See the spec.\n */\nexport function bakeCursor(glyph: CursorGlyph, opts: BakeOptions = {}): string {\n  const size = opts.size ?? 24;\n  if (size > CURSOR_MAX_CSS_PX) {\n    throw new RangeError(\n      `cursor size ${size} exceeds the ${CURSOR_MAX_CSS_PX}px cap: the browser ` +\n        `would drop the image and silently fall back. Use the painted tier.`,\n    );\n  }\n  // Halos first, then ink; within each pass, source order is z-order.\n  const body = glyph.paths.map(renderHalo).join('') + glyph.paths.map(renderInk).join('');\n  const svg =\n    `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"${size}\" height=\"${size}\"` +\n    ` viewBox=\"0 0 ${glyph.box} ${glyph.box}\">${body}</svg>`;\n  const hx = Math.round((glyph.hotspot[0] / glyph.box) * size);\n  const hy = Math.round((glyph.hotspot[1] / glyph.box) * size);\n  const uri = `data:image/svg+xml,${encodeURIComponent(svg)}`;\n  return `url(\"${uri}\") ${hx} ${hy}, ${opts.fallback ?? 'default'}`;\n}\n","// GENERATED by scripts/gen-cursors.mjs — do not edit by hand.\n// Filled silhouettes on a 24-unit box; the halo is applied at bake time.\n\nimport type { CursorGlyph } from './types';\n\nexport const GLYPHS = {\n  \"pencil\": {\n    \"box\": 24,\n    \"hotspot\": [\n      5,\n      19\n    ],\n    \"paths\": [\n      {\n        \"role\": \"ink\",\n        \"d\": \"M 5 19 L 7.5 16.5 L 16 8 L 19 11 L 10.5 19.5 L 8 19 Z\"\n      },\n      {\n        \"role\": \"detail\",\n        \"d\": \"M 14 6 L 19 11\",\n        \"width\": 1.2\n      }\n    ]\n  },\n  \"pen\": {\n    \"box\": 24,\n    \"hotspot\": [\n      5,\n      19\n    ],\n    \"paths\": [\n      {\n        \"role\": \"ink\",\n        \"d\": \"M 5 19 L 8.5 9.5 L 13 5 L 18 10 L 13.5 14.5 Z\"\n      },\n      {\n        \"role\": \"detail\",\n        \"d\": \"M 8.4 13.9 L 12.2 10.1\",\n        \"width\": 0.9\n      }\n    ]\n  },\n  \"eyedropper\": {\n    \"box\": 24,\n    \"hotspot\": [\n      5,\n      19\n    ],\n    \"paths\": [\n      {\n        \"role\": \"ink\",\n        \"d\": \"M 5 19 L 6.8 14.8 L 14.4 7.2 L 16.8 9.6 L 9.2 17.2 Z\"\n      },\n      {\n        \"role\": \"ink\",\n        \"d\": \"M 18.2 2.6 A 3.2 3.2 0 1 0 18.2 9 A 3.2 3.2 0 1 0 18.2 2.6 Z\"\n      }\n    ]\n  }\n} as const satisfies Record<string, CursorGlyph>;\n\n/** Every glyph name in the set. */\nexport type CursorGlyphName = keyof typeof GLYPHS;\n","import { bakeCursor } from './bake';\nimport type { BakeOptions } from './bake';\nimport { GLYPHS } from './glyphs';\nimport type { CursorGlyphName } from './glyphs';\nimport type { CursorGlyph } from './types';\n\nconst cache = new Map<string, string>();\n\n/**\n * The baked cursor string for a named glyph, memoized.\n *\n * The key space is bounded by the glyph set times the handful of sizes and\n * fallbacks in use, so the cache needs no eviction.\n */\nexport function cursorFor(name: CursorGlyphName, opts: BakeOptions = {}): string {\n  const size = opts.size ?? 24;\n  const fallback = opts.fallback ?? 'default';\n  const key = `${name}|${size}|${fallback}`;\n  const hit = cache.get(key);\n  if (hit !== undefined) return hit;\n\n  // Widened deliberately: the key type says this is always defined, but the\n  // guard is what makes a bad name from untyped JS throw instead of baking\n  // `undefined` into a cursor string that silently does nothing.\n  const glyph = (GLYPHS as Record<string, CursorGlyph | undefined>)[name];\n  if (glyph === undefined) {\n    throw new Error(`unknown cursor glyph: ${String(name)}`);\n  }\n  const css = bakeCursor(glyph, { size, fallback });\n  cache.set(key, css);\n  return css;\n}\n"]}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@weasel-js/cursor",
+  "version": "1.4.0-pre.1",
+  "description": "Tool cursors as authored glyphs: bake one to a CSS url() cursor string, or paint it when it is too big to be one.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "author": "orochi235",
+  "homepage": "https://orochi235.github.io/weasel/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/orochi235/weasel.git",
+    "directory": "packages/cursor"
+  },
+  "bugs": {
+    "url": "https://github.com/orochi235/weasel/issues"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsup"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  }
+}