@hemerson/design-system 0.1.0 → 0.2.0

package/README.md

@@ -1,7 +1,14 @@
 # Hemerson Design System
 
+[![npm](https://img.shields.io/npm/v/@hemerson/design-system?color=7ea8a7)](https://www.npmjs.com/package/@hemerson/design-system)
+[![CI](https://github.com/hemerson-git/hemerson-design-system/actions/workflows/ci.yml/badge.svg)](https://github.com/hemerson-git/hemerson-design-system/actions/workflows/ci.yml)
+[![Storybook](https://img.shields.io/badge/Storybook-live-ff4785?logo=storybook&logoColor=white)](https://hemerson-git.github.io/hemerson-design-system/)
+[![License: MIT](https://img.shields.io/badge/license-MIT-78718e)](LICENSE)
+
 A dark-first design system with a sage-teal accent and liquid-glass navigation, built for React. It ships design tokens for a dark and a light theme, a stylesheet, and React components with a Storybook to browse them.
 
+**[Browse the components in Storybook →](https://hemerson-git.github.io/hemerson-design-system/)**
+
 ## Install
 
 ```bash
@@ -21,6 +28,7 @@ export function Toolbar() {
 
 - **Themes:** set `data-theme="dark"` (the default) or `data-theme="light"` on `<html>`.
 - **Reduced transparency:** set `data-transparency="reduced"` on `<html>` to turn every glass surface solid. Offer it as a setting in your app.
+- **Edge lens:** call `enableGlassRefraction()` from `@hemerson/design-system/glass` once at startup to bend the content at the glass edges in Chromium. Other browsers keep frosted glass.
 - **Fonts:** `styles.css` loads Raleway and JetBrains Mono from Google Fonts. To self-host them, import `tokens.css` and your own font files instead.
 
 ## What's inside
@@ -28,6 +36,7 @@ export function Toolbar() {
 | Export | Contents |
 | --- | --- |
 | `@hemerson/design-system` | React components |
+| `@hemerson/design-system/glass` | `enableGlassRefraction()`, the Chromium edge lens, without React |
 | `@hemerson/design-system/styles.css` | Fonts, tokens and component styles |
 | `@hemerson/design-system/tokens.css` | CSS custom properties for both themes |
 | `@hemerson/design-system/tokens.json` | The tokens as data |
@@ -46,6 +55,10 @@ npm run build-storybook
 
 Tokens live in [`tokens/tokens.json`](tokens/tokens.json); `npm run tokens` turns them into `src/styles/tokens.css`. Each component lives in `src/components/<Name>/` with its stories and tests.
 
+## Releases
+
+Versions follow [semver](https://semver.org) and are managed with [Changesets](https://github.com/changesets/changesets). Every change to the package comes with a changeset (`npx changeset`). Merging to `master` opens a "version packages" pull request that bumps the version and updates the [changelog](CHANGELOG.md); merging that pull request publishes to npm from GitHub Actions. Storybook redeploys on every push to `master`.
+
 ## Contributing
 
 Contributions are welcome. See [CONTRIBUTING.md](CONTRIBUTING.md) for how to set up the project and how contributors are credited.

package/dist/enableGlassRefraction-CgDeg-2E.js

@@ -0,0 +1,88 @@
+//#region src/glass/lens.ts
+function e(e, t, n, r) {
+	let i = new Uint8ClampedArray(e * t * 4), a = Math.max(0, Math.min(n, e / 2, t / 2));
+	for (let n = 0; n < t; n++) for (let o = 0; o < e; o++) {
+		let s = o + .5 - e / 2, c = n + .5 - t / 2, l = Math.abs(s) - (e / 2 - a), u = Math.abs(c) - (t / 2 - a), d, f = 0, p = 0;
+		if (l > 0 && u > 0) {
+			let e = Math.hypot(l, u);
+			d = a - e, f = l / e * Math.sign(s), p = u / e * Math.sign(c);
+		} else l > u ? (d = e / 2 - Math.abs(s), f = Math.sign(s)) : (d = t / 2 - Math.abs(c), p = Math.sign(c));
+		let m = Math.max(0, 1 - d / r), h = m * m, g = (n * e + o) * 4;
+		i[g] = 128 - f * h * 127, i[g + 1] = 128 - p * h * 127, i[g + 2] = 128, i[g + 3] = 255;
+	}
+	return i;
+}
+function t(e) {
+	let t = Math.max(4, Math.min(16, e / 3)), n = t * .45;
+	return {
+		rim: t,
+		maxShift: n,
+		scale: n / (127 / 255)
+	};
+}
+//#endregion
+//#region src/glass/enableGlassRefraction.ts
+var n = "http://www.w3.org/2000/svg", r = ".hds-glass:not(.hds-glass--thick)", i = null, a = /* @__PURE__ */ new Map();
+function o() {
+	return (navigator.userAgentData?.brands ?? []).some(({ brand: e }) => e.includes("Chromium"));
+}
+function s() {
+	return i?.isConnected || (i = document.createElementNS(n, "svg"), i.setAttribute("id", "hds-glass-defs"), i.setAttribute("width", "0"), i.setAttribute("height", "0"), i.setAttribute("aria-hidden", "true"), i.style.position = "absolute", document.body.appendChild(i)), i;
+}
+function c(r, i, o) {
+	let c = `${r}x${i}r${o}`, l = a.get(c);
+	if (l) return l;
+	let u = document.createElement("canvas");
+	u.width = r, u.height = i;
+	let d = u.getContext("2d");
+	if (!d) return null;
+	let { rim: f, scale: p } = t(i), m = d.createImageData(r, i);
+	m.data.set(e(r, i, o, f)), d.putImageData(m, 0, 0);
+	let h = `hds-glass-lens-${a.size}`, g = document.createElementNS(n, "filter");
+	Object.entries({
+		id: h,
+		x: "0",
+		y: "0",
+		width: String(r),
+		height: String(i),
+		filterUnits: "userSpaceOnUse",
+		"color-interpolation-filters": "sRGB"
+	}).forEach(([e, t]) => g.setAttribute(e, t));
+	let _ = document.createElementNS(n, "feImage");
+	_.setAttribute("href", u.toDataURL()), _.setAttribute("x", "0"), _.setAttribute("y", "0"), _.setAttribute("width", String(r)), _.setAttribute("height", String(i)), _.setAttribute("result", "map");
+	let v = document.createElementNS(n, "feDisplacementMap");
+	return v.setAttribute("in", "SourceGraphic"), v.setAttribute("in2", "map"), v.setAttribute("scale", p.toFixed(2)), v.setAttribute("xChannelSelector", "R"), v.setAttribute("yChannelSelector", "G"), g.append(_, v), s().appendChild(g), a.set(c, h), h;
+}
+function l(e) {
+	let t = Math.round(e.offsetWidth), n = Math.round(e.offsetHeight);
+	if (t < 8 || n < 8) return;
+	let r = parseFloat(getComputedStyle(e).borderTopLeftRadius) || 0, i = c(t, n, Math.min(r, n / 2));
+	i && e.style.setProperty("--hds-glass-lens", `url(#${i})`);
+}
+var u = !1;
+function d() {
+	if (typeof document > "u") return !1;
+	let e = window.matchMedia?.("(prefers-reduced-transparency: reduce)").matches ?? !1;
+	if (!o() || e) return !1;
+	if (u) return !0;
+	u = !0;
+	let t = new ResizeObserver((e) => {
+		for (let t of e) l(t.target);
+	}), n = (e) => {
+		e.querySelectorAll(r).forEach((e) => {
+			l(e), t.observe(e);
+		});
+	};
+	return n(document), new MutationObserver((e) => {
+		for (let i of e) i.addedNodes.forEach((e) => {
+			e instanceof HTMLElement && (e.matches(r) && (l(e), t.observe(e)), n(e));
+		});
+	}).observe(document.body, {
+		childList: !0,
+		subtree: !0
+	}), document.documentElement.setAttribute("data-glass-refraction", ""), !0;
+}
+//#endregion
+export { d as t };
+
+//# sourceMappingURL=enableGlassRefraction-CgDeg-2E.js.map

package/dist/enableGlassRefraction-CgDeg-2E.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"enableGlassRefraction-CgDeg-2E.js","names":["lensDisplacementMap","data","width","height","r","radius","y","x","px","py","qx","qy","distance","nx","ny","length","t","rim","strength","i","lensSettings","maxShift","SVG","GLASS","defs","filters","isChromium","brand","ensureDefs","filterFor","key","existing","canvas","context","image","id","filter","name","value","map","displace","scale","applyLens","element","active","enableGlassRefraction","reducesTransparency","resizeObserver","entry","entries","watch","mutation","mutations","node"],"sources":["../src/glass/lens.ts","../src/glass/enableGlassRefraction.ts"],"sourcesContent":["/**\n * A displacement map for the edge lens: near the rim the backdrop is sampled from further\n * inside the shape, so content appears to bend towards the edge; the middle is untouched.\n *\n * Red holds the horizontal shift and green the vertical one, with 128 meaning \"no shift\".\n * The shift never exceeds `maxShift`, and `maxShift` stays below the rim width, so content\n * is compressed towards the edge but never flipped.\n */\nexport function lensDisplacementMap(width: number, height: number, radius: number, rim: number): Uint8ClampedArray {\n  const data = new Uint8ClampedArray(width * height * 4);\n  const r = Math.max(0, Math.min(radius, width / 2, height / 2));\n\n  for (let y = 0; y < height; y++) {\n    for (let x = 0; x < width; x++) {\n      // Distance to the edge of the rounded rectangle and the outward normal there\n      const px = x + 0.5 - width / 2;\n      const py = y + 0.5 - height / 2;\n      const qx = Math.abs(px) - (width / 2 - r);\n      const qy = Math.abs(py) - (height / 2 - r);\n      let distance: number;\n      let nx = 0;\n      let ny = 0;\n\n      if (qx > 0 && qy > 0) {\n        const length = Math.hypot(qx, qy);\n        distance = r - length;\n        nx = (qx / length) * Math.sign(px);\n        ny = (qy / length) * Math.sign(py);\n      } else if (qx > qy) {\n        distance = width / 2 - Math.abs(px);\n        nx = Math.sign(px);\n      } else {\n        distance = height / 2 - Math.abs(py);\n        ny = Math.sign(py);\n      }\n\n      const t = Math.max(0, 1 - distance / rim);\n      const strength = t * t;\n      const i = (y * width + x) * 4;\n      data[i] = 128 - nx * strength * 127;\n      data[i + 1] = 128 - ny * strength * 127;\n      data[i + 2] = 128;\n      data[i + 3] = 255;\n    }\n  }\n\n  return data;\n}\n\n/** Rim width and the filter scale that keep the largest shift at 45% of the rim. */\nexport function lensSettings(height: number) {\n  const rim = Math.max(4, Math.min(16, height / 3));\n  const maxShift = rim * 0.45;\n  // feDisplacementMap moves by scale × (channel / 255 − 0.5); the map uses at most ±127\n  const scale = maxShift / (127 / 255);\n  return { rim, maxShift, scale };\n}\n","import { lensDisplacementMap, lensSettings } from \"./lens\";\n\nconst SVG = \"http://www.w3.org/2000/svg\";\nconst GLASS = \".hds-glass:not(.hds-glass--thick)\";\n\nlet defs: SVGSVGElement | null = null;\nconst filters = new Map<string, string>();\n\nfunction isChromium() {\n  const brands = (navigator as Navigator & { userAgentData?: { brands: { brand: string }[] } }).userAgentData?.brands ?? [];\n  return brands.some(({ brand }) => brand.includes(\"Chromium\"));\n}\n\nfunction ensureDefs() {\n  if (defs?.isConnected) return defs;\n  defs = document.createElementNS(SVG, \"svg\");\n  defs.setAttribute(\"id\", \"hds-glass-defs\");\n  defs.setAttribute(\"width\", \"0\");\n  defs.setAttribute(\"height\", \"0\");\n  defs.setAttribute(\"aria-hidden\", \"true\");\n  defs.style.position = \"absolute\";\n  document.body.appendChild(defs);\n  return defs;\n}\n\n/** One SVG filter per element size and corner radius, shared by elements that match. */\nfunction filterFor(width: number, height: number, radius: number): string | null {\n  const key = `${width}x${height}r${radius}`;\n  const existing = filters.get(key);\n  if (existing) return existing;\n\n  const canvas = document.createElement(\"canvas\");\n  canvas.width = width;\n  canvas.height = height;\n  const context = canvas.getContext(\"2d\");\n  if (!context) return null;\n\n  const { rim, scale } = lensSettings(height);\n  const image = context.createImageData(width, height);\n  image.data.set(lensDisplacementMap(width, height, radius, rim));\n  context.putImageData(image, 0, 0);\n\n  const id = `hds-glass-lens-${filters.size}`;\n  const filter = document.createElementNS(SVG, \"filter\");\n  const attributes: Record<string, string> = {\n    id,\n    x: \"0\",\n    y: \"0\",\n    width: String(width),\n    height: String(height),\n    filterUnits: \"userSpaceOnUse\",\n    \"color-interpolation-filters\": \"sRGB\",\n  };\n  Object.entries(attributes).forEach(([name, value]) => filter.setAttribute(name, value));\n\n  const map = document.createElementNS(SVG, \"feImage\");\n  map.setAttribute(\"href\", canvas.toDataURL());\n  map.setAttribute(\"x\", \"0\");\n  map.setAttribute(\"y\", \"0\");\n  map.setAttribute(\"width\", String(width));\n  map.setAttribute(\"height\", String(height));\n  map.setAttribute(\"result\", \"map\");\n\n  const displace = document.createElementNS(SVG, \"feDisplacementMap\");\n  displace.setAttribute(\"in\", \"SourceGraphic\");\n  displace.setAttribute(\"in2\", \"map\");\n  displace.setAttribute(\"scale\", scale.toFixed(2));\n  displace.setAttribute(\"xChannelSelector\", \"R\");\n  displace.setAttribute(\"yChannelSelector\", \"G\");\n\n  filter.append(map, displace);\n  ensureDefs().appendChild(filter);\n  filters.set(key, id);\n  return id;\n}\n\nfunction applyLens(element: HTMLElement) {\n  const width = Math.round(element.offsetWidth);\n  const height = Math.round(element.offsetHeight);\n  if (width < 8 || height < 8) return;\n\n  const radius = parseFloat(getComputedStyle(element).borderTopLeftRadius) || 0;\n  const id = filterFor(width, height, Math.min(radius, height / 2));\n  if (id) element.style.setProperty(\"--hds-glass-lens\", `url(#${id})`);\n}\n\nlet active = false;\n\n/**\n * Turns on the edge lens: glass bends the backdrop near its rim, like Apple's Liquid Glass.\n * Every glass element present now or added later gets a lens sized to it.\n *\n * Only Chromium renders SVG filters in backdrop-filter. Firefox accepts them and then\n * drops the whole backdrop-filter, blur included, so other browsers keep plain frosted\n * glass. Nothing happens when the user reduces transparency.\n * Returns whether the lens was turned on.\n */\nexport function enableGlassRefraction(): boolean {\n  if (typeof document === \"undefined\") return false;\n\n  const reducesTransparency = window.matchMedia?.(\"(prefers-reduced-transparency: reduce)\").matches ?? false;\n  if (!isChromium() || reducesTransparency) return false;\n  if (active) return true;\n  active = true;\n\n  const resizeObserver = new ResizeObserver((entries) => {\n    for (const entry of entries) applyLens(entry.target as HTMLElement);\n  });\n  const watch = (root: ParentNode) => {\n    root.querySelectorAll<HTMLElement>(GLASS).forEach((element) => {\n      applyLens(element);\n      resizeObserver.observe(element);\n    });\n  };\n\n  watch(document);\n  new MutationObserver((mutations) => {\n    for (const mutation of mutations) {\n      mutation.addedNodes.forEach((node) => {\n        if (!(node instanceof HTMLElement)) return;\n        if (node.matches(GLASS)) {\n          applyLens(node);\n          resizeObserver.observe(node);\n        }\n        watch(node);\n      });\n    }\n  }).observe(document.body, { childList: true, subtree: true });\n\n  document.documentElement.setAttribute(\"data-glass-refraction\", \"\");\n  return true;\n}\n"],"mappings":"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"}

package/dist/glass/enableGlassRefraction.d.ts

@@ -1,9 +1,10 @@
 /**
- * Adds the SVG filter that makes glass refract its backdrop, and marks
- * `<html data-glass-refraction>` so the styles use it.
+ * Turns on the edge lens: glass bends the backdrop near its rim, like Apple's Liquid Glass.
+ * Every glass element present now or added later gets a lens sized to it.
  *
- * Only Chromium renders the effect. Firefox accepts it in `@supports` and then
- * drops the whole backdrop-filter, blur included, so other browsers are left alone.
- * Returns whether refraction was turned on.
+ * Only Chromium renders SVG filters in backdrop-filter. Firefox accepts them and then
+ * drops the whole backdrop-filter, blur included, so other browsers keep plain frosted
+ * glass. Nothing happens when the user reduces transparency.
+ * Returns whether the lens was turned on.
  */
 export declare function enableGlassRefraction(): boolean;

package/dist/glass/index.d.ts

@@ -0,0 +1 @@
+export { enableGlassRefraction } from "./enableGlassRefraction";

package/dist/glass/lens.d.ts

@@ -0,0 +1,15 @@
+/**
+ * A displacement map for the edge lens: near the rim the backdrop is sampled from further
+ * inside the shape, so content appears to bend towards the edge; the middle is untouched.
+ *
+ * Red holds the horizontal shift and green the vertical one, with 128 meaning "no shift".
+ * The shift never exceeds `maxShift`, and `maxShift` stays below the rim width, so content
+ * is compressed towards the edge but never flipped.
+ */
+export declare function lensDisplacementMap(width: number, height: number, radius: number, rim: number): Uint8ClampedArray;
+/** Rim width and the filter scale that keep the largest shift at 45% of the rim. */
+export declare function lensSettings(height: number): {
+    rim: number;
+    maxShift: number;
+    scale: number;
+};

package/dist/glass.js

@@ -0,0 +1 @@
+export { t as enableGlassRefraction } from "./enableGlassRefraction-CgDeg-2E.js";