@domandigital/craft 0.1.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,66 @@
 # @domandigital/craft
 
+## 0.3.0
+
+### Minor Changes
+
+- 2075e76: `checkRestraint` measures the surface, not the framework underneath it.
+
+  Two defects, both found by running the checker against a real compiled
+  stylesheet — `apps/portal` in the Doman Digital monorepo — rather than against
+  its own fixtures.
+
+  **It rejected `EASE.inOut`, one of its own canonical curves.** The ease-in test
+  compared only the first control point (`y1 < x1`), which is true of every
+  ease-in-_out_ as well. So the standard failed its own checker on any surface
+  that adopted the token the standard recommends. Section 7's objection to ease-in
+  is about the end of the movement — a curve that accelerates into its final
+  position reads as the interface pulling away — so the test is now the end
+  tangent: rejected when the curve covers more ground per unit time arriving than
+  it averaged. `EASE.out`, `EASE.inOut`, `EASE.drawer`, `EASE.reveal`, Tailwind's
+  default and `linear` all pass; the `ease-in` keyword's curve, the portal's old
+  `--ease-exit`, and a back-loaded custom curve are all still rejected.
+
+  **It counted the framework's reset and theme as house vocabulary.** Tailwind v4
+  alone contributes three font sizes nobody chose (`small` at 80%, `sub`/`sup` at
+  75%, `code` at 1em) and two timing functions, which was enough to report a
+  surface as over its font-size budget for values its author never wrote.
+  `@layer theme` and `@layer base` are now excluded by default via a new
+  `ignoreAtLayers` option; pass `[]` to count everything, as before.
+
+  **Its reduced-motion check read the rest of the file, not the block.** It sliced
+  from the first `@media (prefers-reduced-motion: reduce)` to the end of the sheet,
+  so every rule after that point counted as being inside it. On a real sheet that
+  meant `[data-craft-lcp] { animation: none }` — this package's own section 7 rule,
+  correctly outside any media query — was reported as a section 8 violation. The
+  scan is now brace-matched to each block's own body, and reads every such block
+  rather than only the first.
+
+  **CSS-wide keywords are no longer counted as vocabulary.** `inherit` and
+  `initial` were already excluded; `unset`, `revert` and `revert-layer` were not,
+  and `revert` appears in compiled output. A declaration that defers to the cascade
+  names no value, so it is not a step of anything.
+
+## 0.2.0
+
+### Minor Changes
+
+- 6462b3a: Use the `text-wrap-style` longhand, and stop applying orphan control to every
+  `li`.
+
+  `text-wrap` is shorthand for `text-wrap-mode` + `text-wrap-style`, so
+  `text-wrap: pretty` silently resets the mode to `wrap`. `white-space: nowrap` is
+  itself shorthand setting `text-wrap-mode: nowrap`, so the shorthand defeated it
+  along with any `text-overflow: ellipsis` truncation that relied on it.
+
+  Caught by a visual regression suite: `li { text-wrap: pretty }` expanded a
+  breadcrumb that truncates to one line into three lines and pushed the page 40px
+  taller. The longhand sets only the style, so an element that asked not to wrap
+  still does not.
+
+  `li` is now scoped to `.craft-prose li`. Breadcrumbs, navs, tab strips and menus
+  are all `li` and none of them are body copy.
+
 ## 0.1.0
 
 ### Minor Changes

package/STANDARD.md

@@ -83,7 +83,10 @@ needs. Set once on a shell via `[data-density]`, inherited below.
 - **Transform and opacity only.** Everything else cannot be composited.
 - **Exits run at 0.75× their entrance.** Arriving content is asking to be read;
   leaving content lingering reads as lag.
-- **No ease-in for UI, ever.** It accelerates away from the user.
+- **No ease-in for UI, ever.** It accelerates away from the user. The objection
+  is about the *end* of the movement, not the start, which is why ease-in-out is
+  fine: a curve is rejected when its end tangent is steeper than the diagonal,
+  meaning it covers more ground per unit time arriving than it averaged.
 - **UI durations ≤ 300ms.** Drawers and one gated reveal may exceed it.
 - **Don't animate what fires 100×/day**, and never animate a keyboard-triggered
   interaction — the user is moving faster than the animation.
@@ -96,7 +99,7 @@ needs. Set once on a shell via `[data-density]`, inherited below.
 `@media (prefers-reduced-motion: reduce)` sets `animation-duration` and
 `transition-duration` to **0.01ms** and `animation-iteration-count` to 1.
 
-**Never `animation: none`.** That drops the `forwards` fill along with the
+**Never `animation: none` inside the block.** That drops the `forwards` fill along with the
 animation, so a forwards-filled entrance never applies its end state and the
 element keeps `opacity: 0` from its base rule — permanently invisible, for
 exactly the users who asked for less motion. This shipped.
@@ -114,7 +117,13 @@ Differentiation guards pass anything that differs from its siblings, however
 ugly. What they cannot see is accumulation — eighteen font sizes, six shadows,
 four competing accents, each added reasonably, together reading as noise.
 
-*Source: measured against the estate; the budget is the observed ceiling of the surfaces that read as designed.*
+The budget counts the vocabulary a surface **chose**. A compiled stylesheet also
+carries the framework's reset and theme, and `@layer theme` / `@layer base` are
+excluded by default for that reason — counting them reports a surface as over
+budget for values its author never wrote, and real findings then get triaged
+away with the noise.
+
+*Source: measured against the estate; the budget is the observed ceiling of the surfaces that read as designed. The layer exclusion is measured too — Tailwind v4's reset and theme contribute three font sizes and two timing functions to every sheet built with it.*
 
 ## 10. What is deliberately not a rule
 

package/css/craft.css

@@ -21,6 +21,25 @@ html {
   text-rendering: optimizeLegibility;
 }
 
+/*
+ * THE LONGHAND, NOT `text-wrap`. This matters.
+ *
+ * `text-wrap` is a shorthand for `text-wrap-mode` + `text-wrap-style`, so
+ * `text-wrap: pretty` silently resets the MODE to `wrap`. `white-space: nowrap`
+ * is itself shorthand for `white-space-collapse: collapse` + `text-wrap-mode:
+ * nowrap`, so any element the shorthand touches loses its nowrap — and with it
+ * any `text-overflow: ellipsis` truncation that depended on it.
+ *
+ * That is not hypothetical: `li { text-wrap: pretty }` broke a breadcrumb that
+ * truncates to one line, expanding it to three and pushing the page 40px taller.
+ * `text-wrap-style` sets only the style and leaves the mode alone, so an element
+ * that asked not to wrap still does not.
+ *
+ * Browsers without `text-wrap-style` simply get no orphan control, which is the
+ * correct degradation. A `text-wrap` shorthand fallback would reintroduce the
+ * bug, so there deliberately isn't one.
+ */
+
 /* A heading that wraps one word onto its own line looks like a mistake.
    `balance` evens the lines; it is capped at ~6 lines by the spec, which is why
    it is scoped to headings and not applied to body copy. */
@@ -31,16 +50,22 @@ h4,
 h5,
 h6,
 .craft-balance {
-  text-wrap: balance;
+  text-wrap-style: balance;
 }
 
-/* `pretty` is the body-copy counterpart: it only prevents orphans, so it stays
-   cheap on long text where `balance` would not. */
+/*
+ * `pretty` is the body-copy counterpart: it only prevents orphans, so it stays
+ * cheap on long text where `balance` would not.
+ *
+ * `li` is deliberately scoped to prose. Breadcrumbs, navs, tab strips and menus
+ * are all `li` and none of them are body copy; orphan control there is at best
+ * meaningless and at worst fights a deliberate truncation.
+ */
 p,
-li,
 figcaption,
-blockquote {
-  text-wrap: pretty;
+blockquote,
+.craft-prose li {
+  text-wrap-style: pretty;
 }
 
 .craft-prose {

package/dist/index.cjs

@@ -819,15 +819,64 @@ var HOUSE_BUDGET = {
   accentHueClusterDeg: 15,
   maxUiDurationMs: 300
 };
+var DEFAULT_IGNORED_LAYERS = ["theme", "base"];
 function stripComments(css) {
   return css.replace(/\/\*[\s\S]*?\*\//g, "");
 }
+function stripLayers(css, ignored) {
+  if (ignored.length === 0) return css;
+  const names = new Set(ignored.map((n) => n.trim().toLowerCase()));
+  let out = "";
+  let i = 0;
+  const pattern = /@layer\s+([a-zA-Z0-9_-]+)\s*\{/gi;
+  while (i < css.length) {
+    pattern.lastIndex = i;
+    const match = pattern.exec(css);
+    if (match === null) {
+      out += css.slice(i);
+      break;
+    }
+    out += css.slice(i, match.index);
+    const bodyStart = match.index + match[0].length;
+    let depth = 1;
+    let j = bodyStart;
+    while (j < css.length && depth > 0) {
+      if (css[j] === "{") depth += 1;
+      else if (css[j] === "}") depth -= 1;
+      j += 1;
+    }
+    if (!names.has(match[1].toLowerCase())) {
+      out += stripLayers(css.slice(bodyStart, j - 1), ignored);
+    }
+    i = j;
+  }
+  return out;
+}
+var CSS_WIDE_KEYWORDS = /* @__PURE__ */ new Set(["inherit", "initial", "unset", "revert", "revert-layer"]);
+function atRuleBodies(css, prelude) {
+  const out = [];
+  const pattern = new RegExp(prelude.source, prelude.flags.includes("g") ? prelude.flags : `${prelude.flags}g`);
+  let match;
+  while ((match = pattern.exec(css)) !== null) {
+    const start = match.index + match[0].length;
+    let depth = 1;
+    let i = start;
+    while (i < css.length && depth > 0) {
+      if (css[i] === "{") depth += 1;
+      else if (css[i] === "}") depth -= 1;
+      i += 1;
+    }
+    out.push(css.slice(start, i - 1));
+    pattern.lastIndex = i;
+  }
+  return out;
+}
 function distinctValues(css, property) {
   const pattern = new RegExp(`(?:^|[;{\\s])${property}\\s*:\\s*([^;}]+)`, "gi");
   const seen = /* @__PURE__ */ new Set();
   for (const match of css.matchAll(pattern)) {
     const value = match[1].trim().replace(/\s+/g, " ").toLowerCase();
-    if (value.startsWith("var(") || value === "inherit" || value === "initial") continue;
+    if (value.startsWith("var(") || CSS_WIDE_KEYWORDS.has(value)) continue;
     seen.add(value);
   }
   return [...seen];
@@ -843,7 +892,10 @@ function durationsMs(css) {
 }
 function checkRestraint(input) {
   const budget = { ...HOUSE_BUDGET, ...input.budget };
-  const css = stripComments(input.css);
+  const css = stripLayers(
+    stripComments(input.css),
+    input.ignoreAtLayers ?? DEFAULT_IGNORED_LAYERS
+  );
   const violations = [];
   const push = (rule, severity, message, found) => {
     violations.push({ rule, severity, message, found });
@@ -928,12 +980,14 @@ function checkRestraint(input) {
   }
   const easeIn = [
     ...css.matchAll(/(?:transition|animation)[^;}]*\b(ease-in)\b(?!-out)/gi),
-    ...css.matchAll(/cubic-bezier\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,/gi)
+    ...css.matchAll(
+      /cubic-bezier\(\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*\)/gi
+    )
   ].map((m) => {
     if (m[1] === "ease-in") return "ease-in";
-    const x1 = Number(m[1]);
-    const y1 = Number(m[2]);
-    return Number.isFinite(x1) && Number.isFinite(y1) && y1 < x1 ? m[0] : null;
+    const p = [m[1], m[2], m[3], m[4]].map(Number);
+    if (!p.every((n) => Number.isFinite(n))) return null;
+    return acceleratesIntoTheEnd(p[0], p[1], p[2], p[3]) ? m[0] : null;
   }).filter((v) => v !== null);
   if (easeIn.length > 0) {
     push(
@@ -960,8 +1014,8 @@ function checkRestraint(input) {
       ["scale(0)"]
     );
   }
-  const reducedMotionAt = css.search(/@media[^{]*prefers-reduced-motion:\s*reduce/i);
-  if (reducedMotionAt === -1) {
+  const reducedMotionBlocks = atRuleBodies(css, /@media[^{]*prefers-reduced-motion:\s*reduce[^{]*\{/gi);
+  if (reducedMotionBlocks.length === 0) {
     if (/@keyframes|animation\s*:|transition\s*:/.test(css)) {
       push(
         "reduced-motion-missing",
@@ -971,7 +1025,7 @@ function checkRestraint(input) {
       );
     }
   } else {
-    const block = css.slice(reducedMotionAt);
+    const block = reducedMotionBlocks.join("\n");
     if (/animation\s*:\s*none/i.test(block)) {
       push(
         "reduced-motion-animation-none",
@@ -1007,6 +1061,17 @@ function checkRestraint(input) {
     }
   };
 }
+function acceleratesIntoTheEnd(x1, y1, x2, y2) {
+  const EPSILON = 1e-6;
+  let dx = 1 - x2;
+  let dy = 1 - y2;
+  if (Math.abs(dx) < EPSILON && Math.abs(dy) < EPSILON) {
+    dx = 1 - x1;
+    dy = 1 - y1;
+  }
+  if (Math.abs(dx) < EPSILON) return Math.abs(dy) > EPSILON;
+  return dy / dx > 1 + EPSILON;
+}
 function hueSpread(hues) {
   const sorted = [...hues].sort((a, b) => a - b);
   let widestGap = 0;

package/dist/index.d.cts

@@ -631,6 +631,24 @@ interface CheckRestraintInput {
     /** Concatenated markup or component source, for class-level rules. */
     markup?: string;
     budget?: Partial<RestraintBudget>;
+    /**
+     * Cascade layers to exclude before counting, by name.
+     *
+     * A restraint budget measures the vocabulary a surface *chose*. A compiled
+     * stylesheet also carries the framework's reset and theme, and counting those
+     * makes the report wrong in the one direction that matters: it reports a
+     * surface as over budget for values its author never wrote, so the real
+     * findings get triaged away with the noise. Measured on this estate, Tailwind
+     * v4 contributes three font sizes nobody chose (`small` at 80%, `sub`/`sup` at
+     * 75%) and two timing functions (`--default-transition-timing-function`,
+     * `--animate-pulse`) from `@layer theme` and `@layer base` alone.
+     *
+     * The default is those two names, which is the convention every layered
+     * framework follows and the one Tailwind enforces. A rule placed in the reset
+     * layer is a reset by the author's own declaration; put it outside the layer
+     * to have it counted as vocabulary. Pass `[]` to count everything.
+     */
+    ignoreAtLayers?: string[];
 }
 /**
  * Check a stylesheet against the restraint budget.

package/dist/index.d.ts

@@ -631,6 +631,24 @@ interface CheckRestraintInput {
     /** Concatenated markup or component source, for class-level rules. */
     markup?: string;
     budget?: Partial<RestraintBudget>;
+    /**
+     * Cascade layers to exclude before counting, by name.
+     *
+     * A restraint budget measures the vocabulary a surface *chose*. A compiled
+     * stylesheet also carries the framework's reset and theme, and counting those
+     * makes the report wrong in the one direction that matters: it reports a
+     * surface as over budget for values its author never wrote, so the real
+     * findings get triaged away with the noise. Measured on this estate, Tailwind
+     * v4 contributes three font sizes nobody chose (`small` at 80%, `sub`/`sup` at
+     * 75%) and two timing functions (`--default-transition-timing-function`,
+     * `--animate-pulse`) from `@layer theme` and `@layer base` alone.
+     *
+     * The default is those two names, which is the convention every layered
+     * framework follows and the one Tailwind enforces. A rule placed in the reset
+     * layer is a reset by the author's own declaration; put it outside the layer
+     * to have it counted as vocabulary. Pass `[]` to count everything.
+     */
+    ignoreAtLayers?: string[];
 }
 /**
  * Check a stylesheet against the restraint budget.

package/dist/index.js

@@ -747,15 +747,64 @@ var HOUSE_BUDGET = {
   accentHueClusterDeg: 15,
   maxUiDurationMs: 300
 };
+var DEFAULT_IGNORED_LAYERS = ["theme", "base"];
 function stripComments(css) {
   return css.replace(/\/\*[\s\S]*?\*\//g, "");
 }
+function stripLayers(css, ignored) {
+  if (ignored.length === 0) return css;
+  const names = new Set(ignored.map((n) => n.trim().toLowerCase()));
+  let out = "";
+  let i = 0;
+  const pattern = /@layer\s+([a-zA-Z0-9_-]+)\s*\{/gi;
+  while (i < css.length) {
+    pattern.lastIndex = i;
+    const match = pattern.exec(css);
+    if (match === null) {
+      out += css.slice(i);
+      break;
+    }
+    out += css.slice(i, match.index);
+    const bodyStart = match.index + match[0].length;
+    let depth = 1;
+    let j = bodyStart;
+    while (j < css.length && depth > 0) {
+      if (css[j] === "{") depth += 1;
+      else if (css[j] === "}") depth -= 1;
+      j += 1;
+    }
+    if (!names.has(match[1].toLowerCase())) {
+      out += stripLayers(css.slice(bodyStart, j - 1), ignored);
+    }
+    i = j;
+  }
+  return out;
+}
+var CSS_WIDE_KEYWORDS = /* @__PURE__ */ new Set(["inherit", "initial", "unset", "revert", "revert-layer"]);
+function atRuleBodies(css, prelude) {
+  const out = [];
+  const pattern = new RegExp(prelude.source, prelude.flags.includes("g") ? prelude.flags : `${prelude.flags}g`);
+  let match;
+  while ((match = pattern.exec(css)) !== null) {
+    const start = match.index + match[0].length;
+    let depth = 1;
+    let i = start;
+    while (i < css.length && depth > 0) {
+      if (css[i] === "{") depth += 1;
+      else if (css[i] === "}") depth -= 1;
+      i += 1;
+    }
+    out.push(css.slice(start, i - 1));
+    pattern.lastIndex = i;
+  }
+  return out;
+}
 function distinctValues(css, property) {
   const pattern = new RegExp(`(?:^|[;{\\s])${property}\\s*:\\s*([^;}]+)`, "gi");
   const seen = /* @__PURE__ */ new Set();
   for (const match of css.matchAll(pattern)) {
     const value = match[1].trim().replace(/\s+/g, " ").toLowerCase();
-    if (value.startsWith("var(") || value === "inherit" || value === "initial") continue;
+    if (value.startsWith("var(") || CSS_WIDE_KEYWORDS.has(value)) continue;
     seen.add(value);
   }
   return [...seen];
@@ -771,7 +820,10 @@ function durationsMs(css) {
 }
 function checkRestraint(input) {
   const budget = { ...HOUSE_BUDGET, ...input.budget };
-  const css = stripComments(input.css);
+  const css = stripLayers(
+    stripComments(input.css),
+    input.ignoreAtLayers ?? DEFAULT_IGNORED_LAYERS
+  );
   const violations = [];
   const push = (rule, severity, message, found) => {
     violations.push({ rule, severity, message, found });
@@ -856,12 +908,14 @@ function checkRestraint(input) {
   }
   const easeIn = [
     ...css.matchAll(/(?:transition|animation)[^;}]*\b(ease-in)\b(?!-out)/gi),
-    ...css.matchAll(/cubic-bezier\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,/gi)
+    ...css.matchAll(
+      /cubic-bezier\(\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*\)/gi
+    )
   ].map((m) => {
     if (m[1] === "ease-in") return "ease-in";
-    const x1 = Number(m[1]);
-    const y1 = Number(m[2]);
-    return Number.isFinite(x1) && Number.isFinite(y1) && y1 < x1 ? m[0] : null;
+    const p = [m[1], m[2], m[3], m[4]].map(Number);
+    if (!p.every((n) => Number.isFinite(n))) return null;
+    return acceleratesIntoTheEnd(p[0], p[1], p[2], p[3]) ? m[0] : null;
   }).filter((v) => v !== null);
   if (easeIn.length > 0) {
     push(
@@ -888,8 +942,8 @@ function checkRestraint(input) {
       ["scale(0)"]
     );
   }
-  const reducedMotionAt = css.search(/@media[^{]*prefers-reduced-motion:\s*reduce/i);
-  if (reducedMotionAt === -1) {
+  const reducedMotionBlocks = atRuleBodies(css, /@media[^{]*prefers-reduced-motion:\s*reduce[^{]*\{/gi);
+  if (reducedMotionBlocks.length === 0) {
     if (/@keyframes|animation\s*:|transition\s*:/.test(css)) {
       push(
         "reduced-motion-missing",
@@ -899,7 +953,7 @@ function checkRestraint(input) {
       );
     }
   } else {
-    const block = css.slice(reducedMotionAt);
+    const block = reducedMotionBlocks.join("\n");
     if (/animation\s*:\s*none/i.test(block)) {
       push(
         "reduced-motion-animation-none",
@@ -935,6 +989,17 @@ function checkRestraint(input) {
     }
   };
 }
+function acceleratesIntoTheEnd(x1, y1, x2, y2) {
+  const EPSILON = 1e-6;
+  let dx = 1 - x2;
+  let dy = 1 - y2;
+  if (Math.abs(dx) < EPSILON && Math.abs(dy) < EPSILON) {
+    dx = 1 - x1;
+    dy = 1 - y1;
+  }
+  if (Math.abs(dx) < EPSILON) return Math.abs(dy) > EPSILON;
+  return dy / dx > 1 + EPSILON;
+}
 function hueSpread(hues) {
   const sorted = [...hues].sort((a, b) => a - b);
   let widestGap = 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@domandigital/craft",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "private": false,
   "description": "The Doman Digital house craft standard as numbers: OKLCh colour ramps that snap to existing anchors, derived semantic tokens with measured WCAG and APCA contrast, one shared motion vocabulary for CSS and JS, and a base stylesheet. Zero dependencies.",
   "license": "Apache-2.0",
@@ -30,12 +30,6 @@
     "css",
     "dist"
   ],
-  "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run",
-    "prepublishOnly": "pnpm run build"
-  },
   "devDependencies": {
     "tsup": "^8.3.5",
     "typescript": "^5.6.3",
@@ -44,7 +38,6 @@
   "engines": {
     "node": ">=20"
   },
-  "packageManager": "pnpm@9.15.9",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Doman-Digital/dd-packages.git",
@@ -57,5 +50,10 @@
   "publishConfig": {
     "access": "public",
     "provenance": true
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
   }
-}
+}