@unpunnyfuns/swatchbook-blocks 0.51.1 → 0.52.0

package/dist/index.d.mts

@@ -1,5 +1,6 @@
 import * as _$react from "react";
 import { ReactElement, ReactNode } from "react";
+import { Axis, Diagnostic, Permutation, Preset } from "@unpunnyfuns/swatchbook-core";
 
 //#region src/format-color.d.ts
 /**
@@ -48,34 +49,24 @@ declare function formatColor(value: unknown, format: ColorFormat, fallback?: str
 //#endregion
 //#region src/contexts.d.ts
 /**
- * Typed shape of the addon's `virtual:swatchbook/tokens` module, duplicated
- * as value-importable interfaces so consumers outside the addon's Vite
- * plugin (unit tests, custom React apps) can construct a snapshot by hand.
+ * Typed shape of the addon's `virtual:swatchbook/tokens` module.
  *
- * The ambient `declare module 'virtual:swatchbook/tokens'` declarations in
- * `packages/addon/src/virtual.d.ts` describe the same payload; the two
- * stay in sync by eye.
+ * The axis / permutation / diagnostic / preset entries are deliberate
+ * type-aliases of core's authoritative shapes — the virtual module
+ * publishes those shapes verbatim, so single-sourcing the types prevents
+ * silent drift the moment core grows a field the plugin doesn't
+ * serialise.
+ *
+ * Token / listing shapes stay as narrowed interfaces because blocks
+ * only read a subset of Terrazzo's full token / listing structure; the
+ * narrower shape documents what's actually relied on.
+ *
+ * The ambient `declare module 'virtual:swatchbook/tokens'` declarations
+ * in `packages/addon/src/virtual.d.ts` describe the same payload.
  */
-interface VirtualAxisShape {
-  name: string;
-  contexts: readonly string[];
-  default: string;
-  description?: string;
-  source: 'resolver' | 'layered' | 'synthetic';
-}
-interface VirtualPermutationShape {
-  name: string;
-  input: Record<string, string>;
-  sources: string[];
-}
-interface VirtualDiagnosticShape {
-  severity: 'error' | 'warn' | 'info';
-  group: string;
-  message: string;
-  filename?: string;
-  line?: number;
-  column?: number;
-}
+type VirtualAxisShape = Axis;
+type VirtualPermutationShape = Permutation;
+type VirtualDiagnosticShape = Diagnostic;
 interface VirtualTokenShape {
   $type?: string;
   $value?: unknown;
@@ -112,11 +103,7 @@ interface VirtualTokenListingShape {
     };
   };
 }
-interface VirtualPresetShape {
-  name: string;
-  axes: Partial<Record<string, string>>;
-  description?: string;
-}
+type VirtualPresetShape = Preset;
 /**
  * Full project data read by blocks. Populated by the addon's preview
  * decorator (from the virtual module) or constructed by hand in

package/dist/index.mjs

@@ -1844,6 +1844,21 @@ function FontFamilySample({ filter, sample = "The quick brown fox jumps over the
 	});
 }
 //#endregion
+//#region src/internal/css-var-style.ts
+/**
+* Coerce a CSS `var(--…)` reference into the numeric slot of a React
+* inline-style property.
+*
+* React's `CSSProperties` types unitless properties (`fontWeight`,
+* `lineHeight`, `zIndex`, …) as `number`. The DOM accepts a string at
+* runtime — the rendered stylesheet just receives whatever React passes —
+* so a `var(--font-weight)` reference works functionally. TypeScript still
+* complains. Centralising the type assertion in one named helper keeps
+* the gap visible (and greppable) instead of scattering casts across
+* block components that want CSS-var-driven typography or layout values.
+*/
+const cssVarAsNumber = (varRef) => varRef;
+//#endregion
 //#region src/FontWeightScale.tsx
 function toWeight(raw) {
 	if (typeof raw === "number") return raw;
@@ -1904,7 +1919,7 @@ function FontWeightScale({ filter, sample = "Aa", caption, sortBy = "value", sor
 				}),
 				/* @__PURE__ */ jsx("div", {
 					className: "sb-font-weight-scale__sample",
-					style: { fontWeight: row.cssVar },
+					style: { fontWeight: cssVarAsNumber(row.cssVar) },
 					children: sample
 				}),
 				/* @__PURE__ */ jsx("span", {
@@ -3241,8 +3256,8 @@ function CompositePreviewContent({ type, cssVar, rawValue }) {
 			style: {
 				fontFamily: `var(${base}-font-family)`,
 				fontSize: `var(${base}-font-size)`,
-				fontWeight: `var(${base}-font-weight)`,
-				lineHeight: `var(${base}-line-height)`,
+				fontWeight: cssVarAsNumber(`var(${base}-font-weight)`),
+				lineHeight: cssVarAsNumber(`var(${base}-line-height)`),
 				letterSpacing: `var(${base}-letter-spacing)`
 			},
 			children: PANGRAM
@@ -3275,7 +3290,7 @@ function CompositePreviewContent({ type, cssVar, rawValue }) {
 	});
 	if (type === "fontWeight") return /* @__PURE__ */ jsx("div", {
 		className: "sb-token-detail__font-weight-sample",
-		style: { fontWeight: cssVar },
+		style: { fontWeight: cssVarAsNumber(cssVar) },
 		children: "Aa"
 	});
 	if (type === "cubicBezier") return /* @__PURE__ */ jsx(TransitionSample, { transition: `left 800ms ${cssVar}` });