@tenphi/tasty 0.0.0-snapshot.056b911

package/dist/static/index.d.ts

@@ -0,0 +1,5 @@
+import { Styles } from "../styles/types.js";
+import { mergeStyles } from "../utils/merge-styles.js";
+import { StaticStyle, createStaticStyle, isStaticStyle } from "./types.js";
+import { tastyStatic } from "./tastyStatic.js";
+export { type StaticStyle, type Styles, createStaticStyle, isStaticStyle, mergeStyles, tastyStatic };

package/dist/static/index.js

@@ -0,0 +1,4 @@
+import { mergeStyles } from "../utils/merge-styles.js";
+import { createStaticStyle, isStaticStyle } from "./types.js";
+import { tastyStatic } from "./tastyStatic.js";
+export { createStaticStyle, isStaticStyle, mergeStyles, tastyStatic };

package/dist/static/inject.d.ts

@@ -0,0 +1,5 @@
+//#region src/static/inject.d.ts
+declare function injectCSS(id: string, css: string): void;
+//#endregion
+export { injectCSS };
+//# sourceMappingURL=inject.d.ts.map

package/dist/static/inject.js

@@ -0,0 +1,17 @@
+//#region src/static/inject.ts
+const _ids = /* @__PURE__ */ new Set();
+function injectCSS(id, css) {
+	if (_ids.has(id) || typeof document === "undefined") return;
+	_ids.add(id);
+	let el = document.head.querySelector("style[data-tasty-static]");
+	if (!el) {
+		el = document.createElement("style");
+		el.setAttribute("data-tasty-static", "");
+		document.head.appendChild(el);
+	}
+	el.appendChild(document.createTextNode(css + "\n"));
+}
+//#endregion
+export { injectCSS };
+
+//# sourceMappingURL=inject.js.map

package/dist/static/inject.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inject.js","names":[],"sources":["../../src/static/inject.ts"],"sourcesContent":["const _ids = new Set<string>();\n\nexport function injectCSS(id: string, css: string): void {\n  if (_ids.has(id) || typeof document === 'undefined') return;\n  _ids.add(id);\n  let el = document.head.querySelector(\n    'style[data-tasty-static]',\n  ) as HTMLStyleElement | null;\n  if (!el) {\n    el = document.createElement('style');\n    el.setAttribute('data-tasty-static', '');\n    document.head.appendChild(el);\n  }\n  el.appendChild(document.createTextNode(css + '\\n'));\n}\n"],"mappings":";AAAA,MAAM,uBAAO,IAAI,KAAa;AAE9B,SAAgB,UAAU,IAAY,KAAmB;AACvD,KAAI,KAAK,IAAI,GAAG,IAAI,OAAO,aAAa,YAAa;AACrD,MAAK,IAAI,GAAG;CACZ,IAAI,KAAK,SAAS,KAAK,cACrB,2BACD;AACD,KAAI,CAAC,IAAI;AACP,OAAK,SAAS,cAAc,QAAQ;AACpC,KAAG,aAAa,qBAAqB,GAAG;AACxC,WAAS,KAAK,YAAY,GAAG;;AAE/B,IAAG,YAAY,SAAS,eAAe,MAAM,KAAK,CAAC"}

package/dist/static/tastyStatic.d.ts

@@ -0,0 +1,46 @@
+import { Styles } from "../styles/types.js";
+import { StaticStyle } from "./types.js";
+
+//#region src/static/tastyStatic.d.ts
+/**
+ * Generate styles and return a StaticStyle object.
+ * The object has `className`, `styles`, and `toString()`.
+ *
+ * @example
+ * ```typescript
+ * const button = tastyStatic({
+ *   fill: '#blue',
+ *   padding: '2x',
+ * });
+ * // After build: { className: 'ts3f2a1b', styles: {...}, toString() }
+ *
+ * <div className={button} />  // Works via toString()
+ * ```
+ */
+declare function tastyStatic(styles: Styles): StaticStyle;
+/**
+ * Extend an existing StaticStyle with additional styles.
+ * Uses mergeStyles() internally for proper nested selector handling.
+ *
+ * @example
+ * ```typescript
+ * const button = tastyStatic({ fill: '#blue' });
+ * const primary = tastyStatic(button, { fill: '#purple' });
+ * // After build: { className: 'ts8c4d2e', styles: {...merged...}, toString() }
+ * ```
+ */
+declare function tastyStatic(base: StaticStyle, styles: Styles): StaticStyle;
+/**
+ * Generate styles for a specific CSS selector.
+ * The call is completely removed after build transformation.
+ *
+ * @example
+ * ```typescript
+ * tastyStatic('.heading', { preset: 'h1', color: '#primary' });
+ * // After build: (removed)
+ * ```
+ */
+declare function tastyStatic(selector: string, styles: Styles): void;
+//#endregion
+export { tastyStatic };
+//# sourceMappingURL=tastyStatic.d.ts.map

package/dist/static/tastyStatic.js

@@ -0,0 +1,30 @@
+import { mergeStyles } from "../utils/merge-styles.js";
+import { createStaticStyle, isStaticStyle } from "./types.js";
+//#region src/static/tastyStatic.ts
+/**
+* Build-time only function for zero-runtime static site generation.
+*
+* This function is transformed by the Babel plugin:
+* - `tastyStatic(styles)` → StaticStyle object with className
+* - `tastyStatic(base, styles)` → StaticStyle object with merged styles
+* - `tastyStatic(selector, styles)` → removed entirely
+*
+* At runtime (during development/build), this function returns a placeholder.
+* In production, all calls are replaced/removed by the build plugin.
+*/
+function tastyStatic(stylesOrBaseOrSelector, styles) {
+	if (typeof stylesOrBaseOrSelector === "string") {
+		console.warn(`[tasty] tastyStatic('${stylesOrBaseOrSelector}', styles) was called at runtime. This indicates the Babel plugin is not configured. Add @tenphi/tasty/babel-plugin to your Babel config.`);
+		return;
+	}
+	if (isStaticStyle(stylesOrBaseOrSelector)) {
+		console.warn("[tasty] tastyStatic(base, styles) was called at runtime. This indicates the Babel plugin is not configured. Add @tenphi/tasty/babel-plugin to your Babel config.");
+		return createStaticStyle("__TASTY_STATIC_NOT_TRANSFORMED__", mergeStyles(stylesOrBaseOrSelector.styles, styles || {}));
+	}
+	console.warn("[tasty] tastyStatic(styles) was called at runtime. This indicates the Babel plugin is not configured. Add @tenphi/tasty/babel-plugin to your Babel config.");
+	return createStaticStyle("__TASTY_STATIC_NOT_TRANSFORMED__", stylesOrBaseOrSelector);
+}
+//#endregion
+export { tastyStatic };
+
+//# sourceMappingURL=tastyStatic.js.map

package/dist/static/tastyStatic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tastyStatic.js","names":[],"sources":["../../src/static/tastyStatic.ts"],"sourcesContent":["import type { Styles } from '../styles/types';\nimport { mergeStyles } from '../utils/merge-styles';\n\nimport type { StaticStyle } from './types';\nimport { createStaticStyle, isStaticStyle } from './types';\n\n/**\n * Generate styles and return a StaticStyle object.\n * The object has `className`, `styles`, and `toString()`.\n *\n * @example\n * ```typescript\n * const button = tastyStatic({\n *   fill: '#blue',\n *   padding: '2x',\n * });\n * // After build: { className: 'ts3f2a1b', styles: {...}, toString() }\n *\n * <div className={button} />  // Works via toString()\n * ```\n */\nexport function tastyStatic(styles: Styles): StaticStyle;\n\n/**\n * Extend an existing StaticStyle with additional styles.\n * Uses mergeStyles() internally for proper nested selector handling.\n *\n * @example\n * ```typescript\n * const button = tastyStatic({ fill: '#blue' });\n * const primary = tastyStatic(button, { fill: '#purple' });\n * // After build: { className: 'ts8c4d2e', styles: {...merged...}, toString() }\n * ```\n */\nexport function tastyStatic(base: StaticStyle, styles: Styles): StaticStyle;\n\n/**\n * Generate styles for a specific CSS selector.\n * The call is completely removed after build transformation.\n *\n * @example\n * ```typescript\n * tastyStatic('.heading', { preset: 'h1', color: '#primary' });\n * // After build: (removed)\n * ```\n */\nexport function tastyStatic(selector: string, styles: Styles): void;\n\n/**\n * Build-time only function for zero-runtime static site generation.\n *\n * This function is transformed by the Babel plugin:\n * - `tastyStatic(styles)` → StaticStyle object with className\n * - `tastyStatic(base, styles)` → StaticStyle object with merged styles\n * - `tastyStatic(selector, styles)` → removed entirely\n *\n * At runtime (during development/build), this function returns a placeholder.\n * In production, all calls are replaced/removed by the build plugin.\n */\nexport function tastyStatic(\n  stylesOrBaseOrSelector: Styles | StaticStyle | string,\n  styles?: Styles,\n): StaticStyle | void {\n  // This code only executes if the Babel plugin hasn't processed the file yet.\n  // In a properly configured build, this function is never called at runtime.\n\n  if (typeof stylesOrBaseOrSelector === 'string') {\n    // Selector mode: tastyStatic(selector, styles)\n    // The plugin will remove this call entirely\n    if (process.env.NODE_ENV !== 'production') {\n      console.warn(\n        `[tasty] tastyStatic('${stylesOrBaseOrSelector}', styles) was called at runtime. ` +\n          'This indicates the Babel plugin is not configured. ' +\n          'Add @tenphi/tasty/babel-plugin to your Babel config.',\n      );\n    }\n    return; // void\n  }\n\n  if (isStaticStyle(stylesOrBaseOrSelector)) {\n    // Extension mode: tastyStatic(base, styles)\n    if (process.env.NODE_ENV !== 'production') {\n      console.warn(\n        '[tasty] tastyStatic(base, styles) was called at runtime. ' +\n          'This indicates the Babel plugin is not configured. ' +\n          'Add @tenphi/tasty/babel-plugin to your Babel config.',\n      );\n    }\n    // Merge styles for dev mode preview (won't have real classNames)\n    const mergedStyles = mergeStyles(\n      stylesOrBaseOrSelector.styles,\n      styles || {},\n    );\n    return createStaticStyle('__TASTY_STATIC_NOT_TRANSFORMED__', mergedStyles);\n  }\n\n  // Styles mode: tastyStatic(styles)\n  if (process.env.NODE_ENV !== 'production') {\n    console.warn(\n      '[tasty] tastyStatic(styles) was called at runtime. ' +\n        'This indicates the Babel plugin is not configured. ' +\n        'Add @tenphi/tasty/babel-plugin to your Babel config.',\n    );\n  }\n\n  // Return placeholder - styles won't be applied without the plugin\n  return createStaticStyle(\n    '__TASTY_STATIC_NOT_TRANSFORMED__',\n    stylesOrBaseOrSelector,\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AA2DA,SAAgB,YACd,wBACA,QACoB;AAIpB,KAAI,OAAO,2BAA2B,UAAU;AAI5C,UAAQ,KACN,wBAAwB,uBAAuB,2IAGhD;AAEH;;AAGF,KAAI,cAAc,uBAAuB,EAAE;AAGvC,UAAQ,KACN,mKAGD;AAOH,SAAO,kBAAkB,oCAJJ,YACnB,uBAAuB,QACvB,UAAU,EAAE,CACb,CACyE;;AAK1E,SAAQ,KACN,6JAGD;AAIH,QAAO,kBACL,oCACA,uBACD"}

package/dist/static/types.d.ts

@@ -0,0 +1,49 @@
+import { Styles } from "../styles/types.js";
+
+//#region src/static/types.d.ts
+/**
+ * Static style definition returned by tastyStatic().
+ *
+ * Supports both explicit className access and implicit string coercion via toString().
+ *
+ * @example
+ * ```typescript
+ * const button = tastyStatic({ fill: '#blue' });
+ *
+ * // Both work in JSX:
+ * <div className={button} />           // Uses toString()
+ * <div className={button.className} /> // Explicit
+ *
+ * // Extension:
+ * const primary = tastyStatic(button, { fill: '#purple' });
+ * ```
+ */
+interface StaticStyle {
+  /**
+   * Generated className(s) for use in JSX.
+   * May contain multiple space-separated class names due to chunking.
+   */
+  className: string;
+  /**
+   * The original (or merged) styles object.
+   * Available for extension via tastyStatic(base, overrides).
+   */
+  styles: Styles;
+  /**
+   * Returns className for implicit string coercion.
+   * Enables `<div className={button} />` syntax.
+   */
+  toString(): string;
+}
+/**
+ * Create a StaticStyle object.
+ * Used internally by the Babel plugin to generate output.
+ */
+declare function createStaticStyle(className: string, styles: Styles): StaticStyle;
+/**
+ * Type guard to check if a value is a StaticStyle object.
+ */
+declare function isStaticStyle(value: unknown): value is StaticStyle;
+//#endregion
+export { StaticStyle, createStaticStyle, isStaticStyle };
+//# sourceMappingURL=types.d.ts.map

package/dist/static/types.js

@@ -0,0 +1,24 @@
+//#region src/static/types.ts
+/**
+* Create a StaticStyle object.
+* Used internally by the Babel plugin to generate output.
+*/
+function createStaticStyle(className, styles) {
+	return {
+		className,
+		styles,
+		toString() {
+			return this.className;
+		}
+	};
+}
+/**
+* Type guard to check if a value is a StaticStyle object.
+*/
+function isStaticStyle(value) {
+	return typeof value === "object" && value !== null && "className" in value && "styles" in value && "toString" in value && typeof value.className === "string" && typeof value.styles === "object";
+}
+//#endregion
+export { createStaticStyle, isStaticStyle };
+
+//# sourceMappingURL=types.js.map

package/dist/static/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../src/static/types.ts"],"sourcesContent":["import type { Styles } from '../styles/types';\n\n/**\n * Static style definition returned by tastyStatic().\n *\n * Supports both explicit className access and implicit string coercion via toString().\n *\n * @example\n * ```typescript\n * const button = tastyStatic({ fill: '#blue' });\n *\n * // Both work in JSX:\n * <div className={button} />           // Uses toString()\n * <div className={button.className} /> // Explicit\n *\n * // Extension:\n * const primary = tastyStatic(button, { fill: '#purple' });\n * ```\n */\nexport interface StaticStyle {\n  /**\n   * Generated className(s) for use in JSX.\n   * May contain multiple space-separated class names due to chunking.\n   */\n  className: string;\n\n  /**\n   * The original (or merged) styles object.\n   * Available for extension via tastyStatic(base, overrides).\n   */\n  styles: Styles;\n\n  /**\n   * Returns className for implicit string coercion.\n   * Enables `<div className={button} />` syntax.\n   */\n  toString(): string;\n}\n\n/**\n * Create a StaticStyle object.\n * Used internally by the Babel plugin to generate output.\n */\nexport function createStaticStyle(\n  className: string,\n  styles: Styles,\n): StaticStyle {\n  return {\n    className,\n    styles,\n    toString() {\n      return this.className;\n    },\n  };\n}\n\n/**\n * Type guard to check if a value is a StaticStyle object.\n */\nexport function isStaticStyle(value: unknown): value is StaticStyle {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    'className' in value &&\n    'styles' in value &&\n    'toString' in value &&\n    typeof (value as StaticStyle).className === 'string' &&\n    typeof (value as StaticStyle).styles === 'object'\n  );\n}\n"],"mappings":";;;;;AA2CA,SAAgB,kBACd,WACA,QACa;AACb,QAAO;EACL;EACA;EACA,WAAW;AACT,UAAO,KAAK;;EAEf;;;;;AAMH,SAAgB,cAAc,OAAsC;AAClE,QACE,OAAO,UAAU,YACjB,UAAU,QACV,eAAe,SACf,YAAY,SACZ,cAAc,SACd,OAAQ,MAAsB,cAAc,YAC5C,OAAQ,MAAsB,WAAW"}

package/dist/styles/border.d.ts

@@ -0,0 +1,25 @@
+//#region src/styles/border.d.ts
+/**
+ * Border style handler with multi-group support.
+ *
+ * Single group (backward compatible):
+ * - `border="1bw solid #red"` - all sides
+ * - `border="1bw solid #red top left"` - only top and left
+ *
+ * Multi-group (new):
+ * - `border="1bw #red, 2bw #blue top"` - all sides red 1bw, then top overridden to blue 2bw
+ * - `border="1bw, dashed top bottom, #purple left right"` - base 1bw, dashed on top/bottom, purple on left/right
+ *
+ * Later groups override earlier groups for conflicting directions.
+ */
+declare function borderStyle({
+  border
+}: {
+  border?: string | number | boolean;
+}): Record<string, string> | null;
+declare namespace borderStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+export { borderStyle };
+//# sourceMappingURL=border.d.ts.map

package/dist/styles/border.js

@@ -0,0 +1,120 @@
+import { CSS_WIDE_KEYWORDS } from "../parser/const.js";
+import { DIRECTIONS, filterMods, parseStyle } from "../utils/styles.js";
+import { BORDER_STYLES } from "./const.js";
+import { extractCSSWideKeyword } from "./shared.js";
+//#region src/styles/border.ts
+/**
+* Process a single group and return border values for its directions.
+* @returns Object with directions as keys and border values, or null for "all directions"
+*/
+function processGroup(group) {
+	const { values, mods, colors } = group;
+	const directions = filterMods(mods, DIRECTIONS);
+	const typeMods = filterMods(mods, BORDER_STYLES);
+	return {
+		directions,
+		borderValue: {
+			width: values[0] || "var(--border-width)",
+			style: typeMods[0] || "solid",
+			color: colors?.[0] || "var(--border-color, currentColor)"
+		}
+	};
+}
+/**
+* Format a border value to CSS string.
+*/
+function formatBorderValue(value) {
+	return `${value.width} ${value.style} ${value.color}`;
+}
+/**
+* Border style handler with multi-group support.
+*
+* Single group (backward compatible):
+* - `border="1bw solid #red"` - all sides
+* - `border="1bw solid #red top left"` - only top and left
+*
+* Multi-group (new):
+* - `border="1bw #red, 2bw #blue top"` - all sides red 1bw, then top overridden to blue 2bw
+* - `border="1bw, dashed top bottom, #purple left right"` - base 1bw, dashed on top/bottom, purple on left/right
+*
+* Later groups override earlier groups for conflicting directions.
+*/
+function borderStyle({ border }) {
+	if (!border && border !== 0) return null;
+	if (border === true) border = "1bw";
+	const strBorder = String(border);
+	if (CSS_WIDE_KEYWORDS.has(strBorder)) return { border: strBorder };
+	const groups = parseStyle(strBorder).groups ?? [];
+	if (!groups.length) return null;
+	const useLonghand = groups.some((g) => (g.mods ?? []).includes("longhand"));
+	if (groups.length === 1) {
+		const group = groups[0];
+		const keyword = extractCSSWideKeyword(group);
+		if (keyword) {
+			if (useLonghand) return Object.fromEntries(DIRECTIONS.map((dir) => [`border-${dir}`, keyword]));
+			return { border: keyword };
+		}
+		const { directions, borderValue } = processGroup({
+			values: group.values ?? [],
+			mods: group.mods ?? [],
+			colors: group.colors ?? []
+		});
+		const styleValue = formatBorderValue(borderValue);
+		if (!directions.length) {
+			if (useLonghand) return Object.fromEntries(DIRECTIONS.map((dir) => [`border-${dir}`, styleValue]));
+			return { border: styleValue };
+		}
+		const zeroValue = `0 ${borderValue.style} ${borderValue.color}`;
+		return DIRECTIONS.reduce((styles, dir) => {
+			if (directions.includes(dir)) styles[`border-${dir}`] = styleValue;
+			else styles[`border-${dir}`] = zeroValue;
+			return styles;
+		}, {});
+	}
+	let hasAnyDirections = false;
+	const directionMap = {
+		top: null,
+		right: null,
+		bottom: null,
+		left: null
+	};
+	let allDirectionsValue = null;
+	for (const group of groups) {
+		const { directions, borderValue } = processGroup({
+			values: group.values ?? [],
+			mods: group.mods ?? [],
+			colors: group.colors ?? []
+		});
+		if (directions.length === 0) {
+			allDirectionsValue = borderValue;
+			for (const dir of DIRECTIONS) directionMap[dir] = borderValue;
+		} else {
+			hasAnyDirections = true;
+			for (const dir of directions) directionMap[dir] = borderValue;
+		}
+	}
+	if (!hasAnyDirections && allDirectionsValue) {
+		const formatted = formatBorderValue(allDirectionsValue);
+		if (useLonghand) return Object.fromEntries(DIRECTIONS.map((dir) => [`border-${dir}`, formatted]));
+		return { border: formatted };
+	}
+	const result = {};
+	for (const dir of DIRECTIONS) {
+		const value = directionMap[dir];
+		if (value) result[`border-${dir}`] = formatBorderValue(value);
+		else {
+			const fallback = allDirectionsValue || {
+				width: "0",
+				style: "solid",
+				color: "var(--border-color, currentColor)"
+			};
+			result[`border-${dir}`] = `0 ${fallback.style} ${fallback.color}`;
+		}
+	}
+	return result;
+}
+borderStyle.__lookupStyles = ["border"];
+//#endregion
+export { borderStyle };
+
+//# sourceMappingURL=border.js.map

package/dist/styles/border.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"border.js","names":[],"sources":["../../src/styles/border.ts"],"sourcesContent":["import { CSS_WIDE_KEYWORDS } from '../parser/const';\nimport { DIRECTIONS, filterMods, parseStyle } from '../utils/styles';\nimport { BORDER_STYLES } from './const';\nimport { extractCSSWideKeyword } from './shared';\n\ntype Direction = (typeof DIRECTIONS)[number];\n\ninterface GroupData {\n  values: string[];\n  mods: string[];\n  colors: string[];\n}\n\ninterface BorderValue {\n  width: string;\n  style: string;\n  color: string;\n}\n\n/**\n * Process a single group and return border values for its directions.\n * @returns Object with directions as keys and border values, or null for \"all directions\"\n */\nfunction processGroup(group: GroupData): {\n  directions: Direction[];\n  borderValue: BorderValue;\n} {\n  const { values, mods, colors } = group;\n\n  const directions = filterMods(mods, DIRECTIONS) as Direction[];\n  const typeMods = filterMods(mods, BORDER_STYLES as unknown as string[]);\n\n  const width = values[0] || 'var(--border-width)';\n  const style = typeMods[0] || 'solid';\n  const color = colors?.[0] || 'var(--border-color, currentColor)';\n\n  return {\n    directions,\n    borderValue: { width, style, color },\n  };\n}\n\n/**\n * Format a border value to CSS string.\n */\nfunction formatBorderValue(value: BorderValue): string {\n  return `${value.width} ${value.style} ${value.color}`;\n}\n\n/**\n * Border style handler with multi-group support.\n *\n * Single group (backward compatible):\n * - `border=\"1bw solid #red\"` - all sides\n * - `border=\"1bw solid #red top left\"` - only top and left\n *\n * Multi-group (new):\n * - `border=\"1bw #red, 2bw #blue top\"` - all sides red 1bw, then top overridden to blue 2bw\n * - `border=\"1bw, dashed top bottom, #purple left right\"` - base 1bw, dashed on top/bottom, purple on left/right\n *\n * Later groups override earlier groups for conflicting directions.\n */\nexport function borderStyle({\n  border,\n}: {\n  border?: string | number | boolean;\n}) {\n  if (!border && border !== 0) return null;\n\n  if (border === true) border = '1bw';\n\n  const strBorder = String(border);\n\n  if (CSS_WIDE_KEYWORDS.has(strBorder)) {\n    return { border: strBorder };\n  }\n\n  const processed = parseStyle(strBorder);\n  const groups = processed.groups ?? [];\n\n  if (!groups.length) return null;\n\n  const useLonghand = groups.some((g) => (g.mods ?? []).includes('longhand'));\n\n  // Single group - use original logic for backward compatibility\n  if (groups.length === 1) {\n    const group = groups[0];\n    const keyword = extractCSSWideKeyword(group);\n\n    if (keyword) {\n      if (useLonghand) {\n        return Object.fromEntries(\n          DIRECTIONS.map((dir) => [`border-${dir}`, keyword]),\n        );\n      }\n\n      return { border: keyword };\n    }\n\n    const { directions, borderValue } = processGroup({\n      values: group.values ?? [],\n      mods: group.mods ?? [],\n      colors: group.colors ?? [],\n    });\n\n    const styleValue = formatBorderValue(borderValue);\n\n    if (!directions.length) {\n      if (useLonghand) {\n        return Object.fromEntries(\n          DIRECTIONS.map((dir) => [`border-${dir}`, styleValue]),\n        );\n      }\n\n      return { border: styleValue };\n    }\n\n    const zeroValue = `0 ${borderValue.style} ${borderValue.color}`;\n\n    return DIRECTIONS.reduce(\n      (styles, dir) => {\n        if (directions.includes(dir)) {\n          styles[`border-${dir}`] = styleValue;\n        } else {\n          styles[`border-${dir}`] = zeroValue;\n        }\n        return styles;\n      },\n      {} as Record<string, string>,\n    );\n  }\n\n  // Multi-group - process groups in order, later groups override earlier\n  // Track whether any group specifies directions\n  let hasAnyDirections = false;\n\n  // Build a map of direction -> border value\n  // Start with undefined (no border set)\n  const directionMap: Record<Direction, BorderValue | null> = {\n    top: null,\n    right: null,\n    bottom: null,\n    left: null,\n  };\n\n  // Track the last \"all directions\" value for fallback\n  let allDirectionsValue: BorderValue | null = null;\n\n  // Process groups in order (first to last)\n  for (const group of groups) {\n    const { directions, borderValue } = processGroup({\n      values: group.values ?? [],\n      mods: group.mods ?? [],\n      colors: group.colors ?? [],\n    });\n\n    if (directions.length === 0) {\n      // No specific directions - applies to all\n      allDirectionsValue = borderValue;\n      // Set all directions\n      for (const dir of DIRECTIONS) {\n        directionMap[dir] = borderValue;\n      }\n    } else {\n      // Specific directions - override only those\n      hasAnyDirections = true;\n      for (const dir of directions) {\n        directionMap[dir] = borderValue;\n      }\n    }\n  }\n\n  // If no group specified any directions and we have an all-directions value,\n  // return the simple `border` shorthand (or longhands if requested)\n  if (!hasAnyDirections && allDirectionsValue) {\n    const formatted = formatBorderValue(allDirectionsValue);\n\n    if (useLonghand) {\n      return Object.fromEntries(\n        DIRECTIONS.map((dir) => [`border-${dir}`, formatted]),\n      );\n    }\n\n    return { border: formatted };\n  }\n\n  // Otherwise, output individual border-* properties\n  const result: Record<string, string> = {};\n\n  for (const dir of DIRECTIONS) {\n    const value = directionMap[dir];\n    if (value) {\n      result[`border-${dir}`] = formatBorderValue(value);\n    } else {\n      // No border for this direction - set to 0\n      // Use the last all-directions value for style/color consistency, or defaults\n      const fallback = allDirectionsValue || {\n        width: '0',\n        style: 'solid',\n        color: 'var(--border-color, currentColor)',\n      };\n      result[`border-${dir}`] = `0 ${fallback.style} ${fallback.color}`;\n    }\n  }\n\n  return result;\n}\n\nborderStyle.__lookupStyles = ['border'];\n"],"mappings":"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"}

package/dist/styles/color.d.ts

@@ -0,0 +1,14 @@
+//#region src/styles/color.d.ts
+declare function colorStyle({
+  color
+}: {
+  color?: string | boolean;
+}): {
+  color: string;
+} | null;
+declare namespace colorStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+export { colorStyle };
+//# sourceMappingURL=color.d.ts.map

package/dist/styles/color.js

@@ -0,0 +1,26 @@
+import { getColorSpaceSuffix } from "../utils/color-space.js";
+import { parseColor } from "../utils/styles.js";
+import { convertColorChainToComponentChain } from "./createStyle.js";
+//#region src/styles/color.ts
+function colorStyle({ color }) {
+	if (!color) return null;
+	if (color === true) color = "currentColor";
+	if (typeof color === "string" && (color.startsWith("#") || color.startsWith("(#"))) color = parseColor(color).color || color;
+	const match = color.match(/var\(--(.+?)-color/);
+	let name = "";
+	if (match) name = match[1];
+	const styles = { color };
+	if (name && name !== "current") {
+		const suffix = getColorSpaceSuffix();
+		Object.assign(styles, {
+			"--current-color": color,
+			[`--current-color-${suffix}`]: convertColorChainToComponentChain(color)
+		});
+	}
+	return styles;
+}
+colorStyle.__lookupStyles = ["color"];
+//#endregion
+export { colorStyle };
+
+//# sourceMappingURL=color.js.map

package/dist/styles/color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.js","names":[],"sources":["../../src/styles/color.ts"],"sourcesContent":["import { getColorSpaceSuffix } from '../utils/color-space';\nimport { parseColor } from '../utils/styles';\n\nimport { convertColorChainToComponentChain } from './createStyle';\n\nexport function colorStyle({ color }: { color?: string | boolean }) {\n  if (!color) return null;\n\n  if (color === true) color = 'currentColor';\n\n  if (\n    typeof color === 'string' &&\n    (color.startsWith('#') || color.startsWith('(#'))\n  ) {\n    color = parseColor(color).color || color;\n  }\n\n  const match = color.match(/var\\(--(.+?)-color/);\n  let name = '';\n\n  if (match) {\n    name = match[1];\n  }\n\n  const styles = {\n    color: color,\n  };\n\n  if (name && name !== 'current') {\n    const suffix = getColorSpaceSuffix();\n    Object.assign(styles, {\n      '--current-color': color,\n      [`--current-color-${suffix}`]: convertColorChainToComponentChain(color),\n    });\n  }\n\n  return styles;\n}\n\ncolorStyle.__lookupStyles = ['color'];\n"],"mappings":";;;;AAKA,SAAgB,WAAW,EAAE,SAAuC;AAClE,KAAI,CAAC,MAAO,QAAO;AAEnB,KAAI,UAAU,KAAM,SAAQ;AAE5B,KACE,OAAO,UAAU,aAChB,MAAM,WAAW,IAAI,IAAI,MAAM,WAAW,KAAK,EAEhD,SAAQ,WAAW,MAAM,CAAC,SAAS;CAGrC,MAAM,QAAQ,MAAM,MAAM,qBAAqB;CAC/C,IAAI,OAAO;AAEX,KAAI,MACF,QAAO,MAAM;CAGf,MAAM,SAAS,EACN,OACR;AAED,KAAI,QAAQ,SAAS,WAAW;EAC9B,MAAM,SAAS,qBAAqB;AACpC,SAAO,OAAO,QAAQ;GACpB,mBAAmB;IAClB,mBAAmB,WAAW,kCAAkC,MAAM;GACxE,CAAC;;AAGJ,QAAO;;AAGT,WAAW,iBAAiB,CAAC,QAAQ"}

package/dist/styles/const.js

@@ -0,0 +1,17 @@
+//#region src/styles/const.ts
+const BORDER_STYLES = [
+	"none",
+	"hidden",
+	"dotted",
+	"dashed",
+	"solid",
+	"double",
+	"groove",
+	"ridge",
+	"inset",
+	"outset"
+];
+//#endregion
+export { BORDER_STYLES };
+
+//# sourceMappingURL=const.js.map

package/dist/styles/const.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"const.js","names":[],"sources":["../../src/styles/const.ts"],"sourcesContent":["export const BORDER_STYLES = [\n  'none',\n  'hidden',\n  'dotted',\n  'dashed',\n  'solid',\n  'double',\n  'groove',\n  'ridge',\n  'inset',\n  'outset',\n] as const;\n"],"mappings":";AAAA,MAAa,gBAAgB;CAC3B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD"}

package/dist/styles/createStyle.js

@@ -0,0 +1,79 @@
+import { getColorSpaceComponents, getColorSpaceSuffix, strToColorSpace } from "../utils/color-space.js";
+import { normalizeColorTokenValue, parseColor, parseStyle } from "../utils/styles.js";
+import { toSnakeCase } from "../utils/string.js";
+//#region src/styles/createStyle.ts
+const CACHE = {};
+/**
+* Convert color fallback chain to component fallback chain.
+* Example: var(--primary-color, var(--secondary-color))
+*   → var(--primary-color-oklch, var(--secondary-color-oklch))
+*/
+function convertColorChainToComponentChain(colorValue) {
+	const suffix = getColorSpaceSuffix();
+	const componentVarMatch = colorValue.match(/^(?:rgb|hsl|oklch)a?\(\s*(var\(--[a-z0-9-]+-color-(?:rgb|hsl|oklch)\))\s*\//);
+	if (componentVarMatch) return componentVarMatch[1];
+	const match = colorValue.match(/var\(--([a-z0-9-]+)-color\s*(?:,\s*(.+))?\)/);
+	if (!match) {
+		const components = getColorSpaceComponents(colorValue);
+		if (components !== colorValue) return components;
+		return colorValue;
+	}
+	const [, name, fallback] = match;
+	if (!fallback) return `var(--${name}-color-${suffix})`;
+	return `var(--${name}-color-${suffix}, ${convertColorChainToComponentChain(fallback.trim())})`;
+}
+function createStyle(styleName, cssStyle, converter) {
+	const key = `${styleName}.${cssStyle ?? ""}`;
+	if (!CACHE[key]) {
+		const styleHandler = (styleMap) => {
+			let styleValue = styleMap[styleName];
+			if (styleValue == null || styleValue === false) return null;
+			let finalCssStyle;
+			const isColorToken = !cssStyle && typeof styleName === "string" && styleName.startsWith("#");
+			if (isColorToken) finalCssStyle = `--${toSnakeCase(styleName.slice(1)).replace(/^-+/, "")}-color`;
+			else finalCssStyle = cssStyle || toSnakeCase(styleName).replace(/^\$/, "--");
+			if (isColorToken) {
+				const normalized = normalizeColorTokenValue(styleValue);
+				if (normalized === null) return null;
+				styleValue = normalized;
+			}
+			if (converter && typeof styleValue !== "string") {
+				styleValue = converter(styleValue);
+				if (!styleValue) return null;
+			}
+			if (typeof styleValue === "string" && finalCssStyle.startsWith("--") && finalCssStyle.endsWith("-color")) {
+				styleValue = styleValue.trim();
+				const suffix = getColorSpaceSuffix();
+				const colorSpaceStr = strToColorSpace(styleValue);
+				const { color, name } = parseColor(styleValue);
+				if (name && colorSpaceStr) return {
+					[finalCssStyle]: `var(--${name}-color, ${colorSpaceStr})`,
+					[`${finalCssStyle}-${suffix}`]: `var(--${name}-color-${suffix}, ${getColorSpaceComponents(colorSpaceStr)})`
+				};
+				else if (name) {
+					if (color) return {
+						[finalCssStyle]: color,
+						[`${finalCssStyle}-${suffix}`]: convertColorChainToComponentChain(color)
+					};
+					return {
+						[finalCssStyle]: `var(--${name}-color)`,
+						[`${finalCssStyle}-${suffix}`]: `var(--${name}-color-${suffix})`
+					};
+				} else if (colorSpaceStr) return {
+					[finalCssStyle]: colorSpaceStr,
+					[`${finalCssStyle}-${suffix}`]: getColorSpaceComponents(colorSpaceStr)
+				};
+				return { [finalCssStyle]: color ?? "" };
+			}
+			const processed = parseStyle(styleValue);
+			return { [finalCssStyle]: processed.output };
+		};
+		styleHandler.__lookupStyles = [styleName];
+		CACHE[key] = styleHandler;
+	}
+	return CACHE[key];
+}
+//#endregion
+export { convertColorChainToComponentChain, createStyle };
+
+//# sourceMappingURL=createStyle.js.map

package/dist/styles/createStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createStyle.js","names":[],"sources":["../../src/styles/createStyle.ts"],"sourcesContent":["import {\n  getColorSpaceComponents,\n  getColorSpaceSuffix,\n  strToColorSpace,\n} from '../utils/color-space';\nimport { toSnakeCase } from '../utils/string';\nimport {\n  normalizeColorTokenValue,\n  parseColor,\n  parseStyle,\n} from '../utils/styles';\nimport type {\n  CSSMap,\n  StyleHandler,\n  StyleValue,\n  StyleValueStateMap,\n} from '../utils/styles';\n\nconst CACHE: Record<string, StyleHandler> = {};\n\n/**\n * Convert color fallback chain to component fallback chain.\n * Example: var(--primary-color, var(--secondary-color))\n *   → var(--primary-color-oklch, var(--secondary-color-oklch))\n */\nexport function convertColorChainToComponentChain(colorValue: string): string {\n  const suffix = getColorSpaceSuffix();\n\n  // Handle func(var(--name-color-{suffix}) / alpha) pattern.\n  // When #name.opacity is parsed, the classifier produces e.g.\n  // oklch(var(--name-color-oklch) / .opacity).\n  // The component chain should be just the inner var() reference.\n  const componentVarMatch = colorValue.match(\n    /^(?:rgb|hsl|oklch)a?\\(\\s*(var\\(--[a-z0-9-]+-color-(?:rgb|hsl|oklch)\\))\\s*\\//,\n  );\n  if (componentVarMatch) {\n    return componentVarMatch[1];\n  }\n\n  // Match var(--name-color, ...) pattern\n  const varPattern = /var\\(--([a-z0-9-]+)-color\\s*(?:,\\s*(.+))?\\)/;\n  const match = colorValue.match(varPattern);\n\n  if (!match) {\n    // Not a color variable — try to convert to components\n    const components = getColorSpaceComponents(colorValue);\n    if (components !== colorValue) return components;\n    return colorValue;\n  }\n\n  const [, name, fallback] = match;\n\n  if (!fallback) {\n    return `var(--${name}-color-${suffix})`;\n  }\n\n  const processedFallback = convertColorChainToComponentChain(fallback.trim());\n  return `var(--${name}-color-${suffix}, ${processedFallback})`;\n}\n\nexport function createStyle(\n  styleName: string,\n  cssStyle?: string,\n  converter?: (styleValue: string | number | true) => string | undefined,\n) {\n  const key = `${styleName}.${cssStyle ?? ''}`;\n\n  if (!CACHE[key]) {\n    const styleHandler = (styleMap: StyleValueStateMap): CSSMap | null => {\n      let styleValue = styleMap[styleName];\n\n      if (styleValue == null || styleValue === false) return null;\n\n      let finalCssStyle: string;\n      const isColorToken =\n        !cssStyle && typeof styleName === 'string' && styleName.startsWith('#');\n\n      if (isColorToken) {\n        const raw = styleName.slice(1);\n        const name = toSnakeCase(raw).replace(/^-+/, '');\n        finalCssStyle = `--${name}-color`;\n      } else {\n        finalCssStyle = cssStyle || toSnakeCase(styleName).replace(/^\\$/, '--');\n      }\n\n      if (isColorToken) {\n        const normalized = normalizeColorTokenValue(styleValue);\n        if (normalized === null) return null;\n        styleValue = normalized;\n      }\n\n      if (converter && typeof styleValue !== 'string') {\n        styleValue = converter(styleValue as string | number | true);\n\n        if (!styleValue) return null;\n      }\n\n      if (\n        typeof styleValue === 'string' &&\n        finalCssStyle.startsWith('--') &&\n        finalCssStyle.endsWith('-color')\n      ) {\n        styleValue = styleValue.trim();\n        const suffix = getColorSpaceSuffix();\n\n        const colorSpaceStr = strToColorSpace(styleValue as string);\n\n        const { color, name } = parseColor(styleValue as string);\n\n        if (name && colorSpaceStr) {\n          return {\n            [finalCssStyle]: `var(--${name}-color, ${colorSpaceStr})`,\n            [`${finalCssStyle}-${suffix}`]: `var(--${name}-color-${suffix}, ${getColorSpaceComponents(\n              colorSpaceStr,\n            )})`,\n          };\n        } else if (name) {\n          if (color) {\n            return {\n              [finalCssStyle]: color,\n              [`${finalCssStyle}-${suffix}`]:\n                convertColorChainToComponentChain(color),\n            };\n          }\n\n          return {\n            [finalCssStyle]: `var(--${name}-color)`,\n            [`${finalCssStyle}-${suffix}`]: `var(--${name}-color-${suffix})`,\n          };\n        } else if (colorSpaceStr) {\n          return {\n            [finalCssStyle]: colorSpaceStr,\n            [`${finalCssStyle}-${suffix}`]:\n              getColorSpaceComponents(colorSpaceStr),\n          };\n        }\n\n        return {\n          [finalCssStyle]: color ?? '',\n        };\n      }\n\n      const processed = parseStyle(styleValue as StyleValue);\n      return { [finalCssStyle]: processed.output };\n    };\n\n    styleHandler.__lookupStyles = [styleName];\n\n    CACHE[key] = styleHandler;\n  }\n\n  return CACHE[key];\n}\n"],"mappings":";;;;AAkBA,MAAM,QAAsC,EAAE;;;;;;AAO9C,SAAgB,kCAAkC,YAA4B;CAC5E,MAAM,SAAS,qBAAqB;CAMpC,MAAM,oBAAoB,WAAW,MACnC,8EACD;AACD,KAAI,kBACF,QAAO,kBAAkB;CAK3B,MAAM,QAAQ,WAAW,MADN,8CACuB;AAE1C,KAAI,CAAC,OAAO;EAEV,MAAM,aAAa,wBAAwB,WAAW;AACtD,MAAI,eAAe,WAAY,QAAO;AACtC,SAAO;;CAGT,MAAM,GAAG,MAAM,YAAY;AAE3B,KAAI,CAAC,SACH,QAAO,SAAS,KAAK,SAAS,OAAO;AAIvC,QAAO,SAAS,KAAK,SAAS,OAAO,IADX,kCAAkC,SAAS,MAAM,CAAC,CACjB;;AAG7D,SAAgB,YACd,WACA,UACA,WACA;CACA,MAAM,MAAM,GAAG,UAAU,GAAG,YAAY;AAExC,KAAI,CAAC,MAAM,MAAM;EACf,MAAM,gBAAgB,aAAgD;GACpE,IAAI,aAAa,SAAS;AAE1B,OAAI,cAAc,QAAQ,eAAe,MAAO,QAAO;GAEvD,IAAI;GACJ,MAAM,eACJ,CAAC,YAAY,OAAO,cAAc,YAAY,UAAU,WAAW,IAAI;AAEzE,OAAI,aAGF,iBAAgB,KADH,YADD,UAAU,MAAM,EAAE,CACD,CAAC,QAAQ,OAAO,GAAG,CACtB;OAE1B,iBAAgB,YAAY,YAAY,UAAU,CAAC,QAAQ,OAAO,KAAK;AAGzE,OAAI,cAAc;IAChB,MAAM,aAAa,yBAAyB,WAAW;AACvD,QAAI,eAAe,KAAM,QAAO;AAChC,iBAAa;;AAGf,OAAI,aAAa,OAAO,eAAe,UAAU;AAC/C,iBAAa,UAAU,WAAqC;AAE5D,QAAI,CAAC,WAAY,QAAO;;AAG1B,OACE,OAAO,eAAe,YACtB,cAAc,WAAW,KAAK,IAC9B,cAAc,SAAS,SAAS,EAChC;AACA,iBAAa,WAAW,MAAM;IAC9B,MAAM,SAAS,qBAAqB;IAEpC,MAAM,gBAAgB,gBAAgB,WAAqB;IAE3D,MAAM,EAAE,OAAO,SAAS,WAAW,WAAqB;AAExD,QAAI,QAAQ,cACV,QAAO;MACJ,gBAAgB,SAAS,KAAK,UAAU,cAAc;MACtD,GAAG,cAAc,GAAG,WAAW,SAAS,KAAK,SAAS,OAAO,IAAI,wBAChE,cACD,CAAC;KACH;aACQ,MAAM;AACf,SAAI,MACF,QAAO;OACJ,gBAAgB;OAChB,GAAG,cAAc,GAAG,WACnB,kCAAkC,MAAM;MAC3C;AAGH,YAAO;OACJ,gBAAgB,SAAS,KAAK;OAC9B,GAAG,cAAc,GAAG,WAAW,SAAS,KAAK,SAAS,OAAO;MAC/D;eACQ,cACT,QAAO;MACJ,gBAAgB;MAChB,GAAG,cAAc,GAAG,WACnB,wBAAwB,cAAc;KACzC;AAGH,WAAO,GACJ,gBAAgB,SAAS,IAC3B;;GAGH,MAAM,YAAY,WAAW,WAAyB;AACtD,UAAO,GAAG,gBAAgB,UAAU,QAAQ;;AAG9C,eAAa,iBAAiB,CAAC,UAAU;AAEzC,QAAM,OAAO;;AAGf,QAAO,MAAM"}

package/dist/styles/dimension.js

@@ -0,0 +1,109 @@
+import { CSS_WIDE_KEYWORDS } from "../parser/const.js";
+import { makeEmptyDetails } from "../parser/types.js";
+import { parseStyle } from "../utils/styles.js";
+//#region src/styles/dimension.ts
+const DEFAULT_MIN_SIZE = "var(--gap)";
+const DEFAULT_MAX_SIZE = "100%";
+/**
+* Parse a dimension value (string, number, or boolean) into a CSS value
+*/
+function parseDimensionValue(val) {
+	if (val == null) return null;
+	if (typeof val === "number") return `${val}px`;
+	if (val === true) return "initial";
+	return parseStyle(String(val)).groups[0]?.values[0] || null;
+}
+/**
+* Creates a dimension style handler for width or height.
+*
+* Supports:
+* - Main dimension prop (width/height) with syntax for min/max
+* - Separate min/max props (minWidth/maxWidth or minHeight/maxHeight)
+*
+* Priority: Individual min/max props override values from main prop syntax
+*/
+function dimensionStyle(name) {
+	const minStyle = `min-${name}`;
+	const maxStyle = `max-${name}`;
+	return ({ value, min, max }) => {
+		if (value == null && min == null && max == null) return null;
+		if (value != null && typeof value === "string" && CSS_WIDE_KEYWORDS.has(value)) {
+			const styles = {
+				[name]: value,
+				[minStyle]: value,
+				[maxStyle]: value
+			};
+			const minVal = parseDimensionValue(min);
+			const maxVal = parseDimensionValue(max);
+			if (minVal) styles[minStyle] = minVal;
+			if (maxVal) styles[maxStyle] = maxVal;
+			return styles;
+		}
+		if (value === true) {
+			const styles = {
+				[name]: "auto",
+				[minStyle]: "initial",
+				[maxStyle]: "initial"
+			};
+			const minVal = parseDimensionValue(min);
+			const maxVal = parseDimensionValue(max);
+			if (minVal) styles[minStyle] = minVal;
+			if (maxVal) styles[maxStyle] = maxVal;
+			return styles;
+		}
+		const styles = {
+			[name]: "auto",
+			[minStyle]: "initial",
+			[maxStyle]: "initial"
+		};
+		if (value != null) {
+			let val = value;
+			if (typeof val === "number") val = `${val}px`;
+			val = String(val);
+			const { mods, values } = parseStyle(val).groups[0] ?? makeEmptyDetails();
+			let flag = false;
+			for (const mod of mods) switch (mod) {
+				case "min":
+					styles[minStyle] = values[0] || DEFAULT_MIN_SIZE;
+					flag = true;
+					break;
+				case "max":
+					styles[maxStyle] = values[0] || DEFAULT_MAX_SIZE;
+					flag = true;
+					break;
+				case "fixed": {
+					const fixedValue = values[0] || "max-content";
+					styles[minStyle] = fixedValue;
+					styles[name] = fixedValue;
+					styles[maxStyle] = fixedValue;
+					flag = true;
+					break;
+				}
+				default: break;
+			}
+			if (!flag || !mods.length) if (values.length === 2) {
+				styles[minStyle] = values[0];
+				styles[maxStyle] = values[1];
+			} else if (values.length === 3) {
+				styles[minStyle] = values[0];
+				styles[name] = values[1];
+				styles[maxStyle] = values[2];
+			} else styles[name] = values[0] || "auto";
+			if (styles[name] === "stretch") if (name === "width") styles[name] = [
+				"stretch",
+				"-webkit-fill-available",
+				"-moz-available"
+			];
+			else styles[name] = "auto";
+		}
+		const minVal = parseDimensionValue(min);
+		const maxVal = parseDimensionValue(max);
+		if (minVal) styles[minStyle] = minVal;
+		if (maxVal) styles[maxStyle] = maxVal;
+		return styles;
+	};
+}
+//#endregion
+export { dimensionStyle };
+
+//# sourceMappingURL=dimension.js.map