@utilix-tech/sdk 0.1.0

package/dist/tools/css.cjs

@@ -0,0 +1,1242 @@
+'use strict';
+
+// src/tools/css.ts
+function generateGradient(config) {
+  const stops = config.stops.map((s) => `${s.color} ${s.position}%`).join(", ");
+  if (config.type === "linear") {
+    return `linear-gradient(${config.angle}deg, ${stops})`;
+  }
+  if (config.type === "radial") {
+    const shape = config.radialShape ?? "ellipse";
+    return `radial-gradient(${shape} at center, ${stops})`;
+  }
+  return `conic-gradient(from ${config.angle}deg, ${stops})`;
+}
+function generateCssProperty(config) {
+  return `background: ${generateGradient(config)};`;
+}
+function parseGradient(css) {
+  const trimmed = css.trim();
+  const linearMatch = trimmed.match(/^linear-gradient\((.+)\)$/);
+  if (linearMatch) {
+    const inner = linearMatch[1];
+    const parts = inner.split(",").map((p) => p.trim());
+    const angleMatch = parts[0].match(/^(-?\d+(?:\.\d+)?)deg$/);
+    const angle = angleMatch ? parseFloat(angleMatch[1]) : 0;
+    const stopParts = angleMatch ? parts.slice(1) : parts;
+    const stops = parseStops(stopParts);
+    if (!stops) return { error: "Could not parse color stops" };
+    return { type: "linear", angle, stops };
+  }
+  const radialMatch = trimmed.match(/^radial-gradient\((.+)\)$/);
+  if (radialMatch) {
+    const inner = radialMatch[1];
+    const parts = inner.split(",").map((p) => p.trim());
+    const shapeMatch = parts[0].match(/^(circle|ellipse)/);
+    const radialShape = shapeMatch && (shapeMatch[1] === "circle" || shapeMatch[1] === "ellipse") ? shapeMatch[1] : "ellipse";
+    const stopParts = shapeMatch ? parts.slice(1) : parts;
+    const stops = parseStops(stopParts);
+    if (!stops) return { error: "Could not parse color stops" };
+    return { type: "radial", angle: 0, stops, radialShape };
+  }
+  const conicMatch = trimmed.match(/^conic-gradient\((.+)\)$/);
+  if (conicMatch) {
+    const inner = conicMatch[1];
+    const parts = inner.split(",").map((p) => p.trim());
+    const fromMatch = parts[0].match(/^from\s+(-?\d+(?:\.\d+)?)deg$/);
+    const angle = fromMatch ? parseFloat(fromMatch[1]) : 0;
+    const stopParts = fromMatch ? parts.slice(1) : parts;
+    const stops = parseStops(stopParts);
+    if (!stops) return { error: "Could not parse color stops" };
+    return { type: "conic", angle, stops };
+  }
+  return { error: "Unrecognized gradient format" };
+}
+function parseStops(parts) {
+  const stops = [];
+  for (let i = 0; i < parts.length; i++) {
+    const part = parts[i].trim();
+    const match = part.match(/^(.+?)\s+(\d+(?:\.\d+)?)%$/);
+    if (match) {
+      stops.push({ color: match[1].trim(), position: parseFloat(match[2]) });
+    } else {
+      const pos = parts.length === 1 ? 0 : Math.round(i / (parts.length - 1) * 100);
+      stops.push({ color: part, position: pos });
+    }
+  }
+  return stops.length > 0 ? stops : null;
+}
+var GRADIENT_PRESETS = [
+  {
+    name: "Sunset",
+    config: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#ff6b6b", position: 0 },
+        { color: "#feca57", position: 100 }
+      ]
+    }
+  },
+  {
+    name: "Ocean",
+    config: {
+      type: "linear",
+      angle: 180,
+      stops: [
+        { color: "#0099f7", position: 0 },
+        { color: "#f11712", position: 100 }
+      ]
+    }
+  },
+  {
+    name: "Purple Haze",
+    config: {
+      type: "radial",
+      angle: 0,
+      radialShape: "ellipse",
+      stops: [
+        { color: "#da8cff", position: 0 },
+        { color: "#9a55ff", position: 100 }
+      ]
+    }
+  },
+  {
+    name: "Mint",
+    config: {
+      type: "linear",
+      angle: 90,
+      stops: [
+        { color: "#00b09b", position: 0 },
+        { color: "#96c93d", position: 100 }
+      ]
+    }
+  },
+  {
+    name: "Rainbow Conic",
+    config: {
+      type: "conic",
+      angle: 0,
+      stops: [
+        { color: "red", position: 0 },
+        { color: "yellow", position: 17 },
+        { color: "lime", position: 33 },
+        { color: "cyan", position: 50 },
+        { color: "blue", position: 67 },
+        { color: "magenta", position: 83 },
+        { color: "red", position: 100 }
+      ]
+    }
+  }
+];
+function generateBoxShadow(layers) {
+  if (layers.length === 0) return "none";
+  return layers.map((l) => {
+    const parts = [];
+    if (l.inset) parts.push("inset");
+    parts.push(`${l.offsetX}px`, `${l.offsetY}px`, `${l.blur}px`, `${l.spread}px`, l.color);
+    return parts.join(" ");
+  }).join(", ");
+}
+function parseBoxShadow(css) {
+  const trimmed = css.trim();
+  if (trimmed === "" || trimmed === "none") return [];
+  const layerStrings = splitShadowLayers(trimmed);
+  const layers = [];
+  for (const layerStr of layerStrings) {
+    const parsed = parseSingleShadowLayer(layerStr.trim());
+    if (!parsed) return { error: `Could not parse layer: "${layerStr.trim()}"` };
+    layers.push(parsed);
+  }
+  return layers;
+}
+function splitShadowLayers(css) {
+  const layers = [];
+  let depth = 0;
+  let current = "";
+  for (const char of css) {
+    if (char === "(") depth++;
+    else if (char === ")") depth--;
+    if (char === "," && depth === 0) {
+      layers.push(current);
+      current = "";
+    } else {
+      current += char;
+    }
+  }
+  if (current.trim()) layers.push(current);
+  return layers;
+}
+function parseSingleShadowLayer(str) {
+  let inset = false;
+  let s = str;
+  if (/^inset\b/i.test(s)) {
+    inset = true;
+    s = s.replace(/^inset\s+/i, "");
+  }
+  const colorPattern = /(rgba?\([^)]+\)|hsla?\([^)]+\)|#[0-9a-fA-F]{3,8}|[a-zA-Z]+)$/;
+  const colorMatch = s.match(colorPattern);
+  const color = colorMatch ? colorMatch[1] : "rgba(0,0,0,0.5)";
+  if (colorMatch) s = s.slice(0, colorMatch.index).trim();
+  const nums = s.split(/\s+/).map((v) => parseFloat(v)).filter((n) => !isNaN(n));
+  if (nums.length < 2) return null;
+  return {
+    offsetX: nums[0] ?? 0,
+    offsetY: nums[1] ?? 0,
+    blur: nums[2] ?? 0,
+    spread: nums[3] ?? 0,
+    color,
+    inset
+  };
+}
+var DEFAULT_SHADOW = {
+  offsetX: 0,
+  offsetY: 4,
+  blur: 6,
+  spread: -1,
+  color: "rgba(0, 0, 0, 0.1)",
+  inset: false
+};
+var SHADOW_PRESETS = [
+  {
+    name: "Soft",
+    layers: [
+      { offsetX: 0, offsetY: 2, blur: 8, spread: 0, color: "rgba(0,0,0,0.1)", inset: false }
+    ]
+  },
+  {
+    name: "Medium",
+    layers: [
+      { offsetX: 0, offsetY: 4, blur: 12, spread: 0, color: "rgba(0,0,0,0.15)", inset: false }
+    ]
+  },
+  {
+    name: "Hard",
+    layers: [
+      { offsetX: 4, offsetY: 4, blur: 0, spread: 0, color: "rgba(0,0,0,0.8)", inset: false }
+    ]
+  },
+  {
+    name: "Inset",
+    layers: [
+      { offsetX: 0, offsetY: 2, blur: 4, spread: 0, color: "rgba(0,0,0,0.2)", inset: true }
+    ]
+  },
+  {
+    name: "Layered",
+    layers: [
+      { offsetX: 0, offsetY: 1, blur: 3, spread: 0, color: "rgba(0,0,0,0.12)", inset: false },
+      { offsetX: 0, offsetY: 4, blur: 6, spread: 0, color: "rgba(0,0,0,0.08)", inset: false },
+      { offsetX: 0, offsetY: 8, blur: 16, spread: 0, color: "rgba(0,0,0,0.06)", inset: false }
+    ]
+  },
+  {
+    name: "Neon Blue",
+    layers: [
+      { offsetX: 0, offsetY: 0, blur: 8, spread: 2, color: "#00d4ff", inset: false },
+      { offsetX: 0, offsetY: 0, blur: 20, spread: 4, color: "#0099bb", inset: false }
+    ]
+  }
+];
+function generateBorderRadius(config) {
+  const { topLeft, topRight, bottomRight, bottomLeft, unit } = config;
+  if (topLeft === topRight && topRight === bottomRight && bottomRight === bottomLeft) {
+    return `${topLeft}${unit}`;
+  }
+  if (topLeft === bottomRight && topRight === bottomLeft) {
+    return `${topLeft}${unit} ${topRight}${unit}`;
+  }
+  if (topRight === bottomLeft) {
+    return `${topLeft}${unit} ${topRight}${unit} ${bottomRight}${unit}`;
+  }
+  return `${topLeft}${unit} ${topRight}${unit} ${bottomRight}${unit} ${bottomLeft}${unit}`;
+}
+function parseBorderRadius(css) {
+  const trimmed = css.trim();
+  if (!trimmed) {
+    return { error: "Empty input" };
+  }
+  const tokenRe = /^(\d+(?:\.\d+)?)(px|%|rem)?$/;
+  const parts = trimmed.split(/\s+/);
+  if (parts.length < 1 || parts.length > 4) {
+    return { error: "Invalid border-radius format" };
+  }
+  const parsed = [];
+  let detectedUnit = "px";
+  for (const part of parts) {
+    const match = tokenRe.exec(part);
+    if (!match) {
+      return { error: `Invalid token: ${part}` };
+    }
+    const value = parseFloat(match[1]);
+    const unit = match[2] || "px";
+    if (parsed.length > 0 && unit !== detectedUnit && match[2]) {
+      return { error: "Mixed units are not supported" };
+    }
+    if (match[2]) {
+      detectedUnit = unit;
+    }
+    parsed.push({ value, unit });
+  }
+  const u = detectedUnit;
+  if (parsed.length === 1) {
+    const v = parsed[0].value;
+    return { topLeft: v, topRight: v, bottomRight: v, bottomLeft: v, unit: u };
+  }
+  if (parsed.length === 2) {
+    return { topLeft: parsed[0].value, topRight: parsed[1].value, bottomRight: parsed[0].value, bottomLeft: parsed[1].value, unit: u };
+  }
+  if (parsed.length === 3) {
+    return { topLeft: parsed[0].value, topRight: parsed[1].value, bottomRight: parsed[2].value, bottomLeft: parsed[1].value, unit: u };
+  }
+  return { topLeft: parsed[0].value, topRight: parsed[1].value, bottomRight: parsed[2].value, bottomLeft: parsed[3].value, unit: u };
+}
+function isUniform(config) {
+  return config.topLeft === config.topRight && config.topRight === config.bottomRight && config.bottomRight === config.bottomLeft;
+}
+var BORDER_PRESETS = [
+  {
+    name: "Sharp",
+    config: { topLeft: 0, topRight: 0, bottomRight: 0, bottomLeft: 0, unit: "px" }
+  },
+  {
+    name: "Rounded",
+    config: { topLeft: 8, topRight: 8, bottomRight: 8, bottomLeft: 8, unit: "px" }
+  },
+  {
+    name: "Pill",
+    config: { topLeft: 9999, topRight: 9999, bottomRight: 9999, bottomLeft: 9999, unit: "px" }
+  },
+  {
+    name: "Circle",
+    config: { topLeft: 50, topRight: 50, bottomRight: 50, bottomLeft: 50, unit: "%" }
+  },
+  {
+    name: "Squircle",
+    config: { topLeft: 30, topRight: 30, bottomRight: 30, bottomLeft: 30, unit: "%" }
+  },
+  {
+    name: "Asymmetric",
+    config: { topLeft: 16, topRight: 4, bottomRight: 16, bottomLeft: 4, unit: "px" }
+  }
+];
+var ANIMATION_PRESETS = {
+  fadeIn: {
+    keyframes: [
+      { stop: 0, properties: { opacity: "0" } },
+      { stop: 100, properties: { opacity: "1" } }
+    ],
+    config: {
+      name: "fadeIn",
+      duration: "0.5s",
+      timingFunction: "ease",
+      fillMode: "both"
+    }
+  },
+  fadeOut: {
+    keyframes: [
+      { stop: 0, properties: { opacity: "1" } },
+      { stop: 100, properties: { opacity: "0" } }
+    ],
+    config: {
+      name: "fadeOut",
+      duration: "0.5s",
+      timingFunction: "ease",
+      fillMode: "both"
+    }
+  },
+  slideInLeft: {
+    keyframes: [
+      { stop: 0, properties: { transform: "translateX(-100%)", opacity: "0" } },
+      { stop: 100, properties: { transform: "translateX(0)", opacity: "1" } }
+    ],
+    config: {
+      name: "slideInLeft",
+      duration: "0.4s",
+      timingFunction: "ease-out",
+      fillMode: "both"
+    }
+  },
+  slideInRight: {
+    keyframes: [
+      { stop: 0, properties: { transform: "translateX(100%)", opacity: "0" } },
+      { stop: 100, properties: { transform: "translateX(0)", opacity: "1" } }
+    ],
+    config: {
+      name: "slideInRight",
+      duration: "0.4s",
+      timingFunction: "ease-out",
+      fillMode: "both"
+    }
+  },
+  bounceIn: {
+    keyframes: [
+      { stop: 0, properties: { transform: "scale(0.3)", opacity: "0" } },
+      { stop: 50, properties: { transform: "scale(1.05)", opacity: "0.8" } },
+      { stop: 70, properties: { transform: "scale(0.9)", opacity: "0.9" } },
+      { stop: 100, properties: { transform: "scale(1)", opacity: "1" } }
+    ],
+    config: {
+      name: "bounceIn",
+      duration: "0.6s",
+      timingFunction: "cubic-bezier(0.215, 0.61, 0.355, 1)",
+      fillMode: "both"
+    }
+  },
+  pulse: {
+    keyframes: [
+      { stop: 0, properties: { transform: "scale(1)" } },
+      { stop: 50, properties: { transform: "scale(1.05)" } },
+      { stop: 100, properties: { transform: "scale(1)" } }
+    ],
+    config: {
+      name: "pulse",
+      duration: "1s",
+      timingFunction: "ease-in-out",
+      iterationCount: "infinite"
+    }
+  },
+  spin: {
+    keyframes: [
+      { stop: 0, properties: { transform: "rotate(0deg)" } },
+      { stop: 100, properties: { transform: "rotate(360deg)" } }
+    ],
+    config: {
+      name: "spin",
+      duration: "1s",
+      timingFunction: "linear",
+      iterationCount: "infinite"
+    }
+  },
+  shake: {
+    keyframes: [
+      { stop: 0, properties: { transform: "translateX(0)" } },
+      { stop: 10, properties: { transform: "translateX(-10px)" } },
+      { stop: 30, properties: { transform: "translateX(10px)" } },
+      { stop: 50, properties: { transform: "translateX(-10px)" } },
+      { stop: 70, properties: { transform: "translateX(10px)" } },
+      { stop: 90, properties: { transform: "translateX(-10px)" } },
+      { stop: 100, properties: { transform: "translateX(0)" } }
+    ],
+    config: {
+      name: "shake",
+      duration: "0.6s",
+      timingFunction: "ease-in-out"
+    }
+  },
+  zoomIn: {
+    keyframes: [
+      { stop: 0, properties: { transform: "scale(0)", opacity: "0" } },
+      { stop: 100, properties: { transform: "scale(1)", opacity: "1" } }
+    ],
+    config: {
+      name: "zoomIn",
+      duration: "0.4s",
+      timingFunction: "ease-out",
+      fillMode: "both"
+    }
+  },
+  zoomOut: {
+    keyframes: [
+      { stop: 0, properties: { transform: "scale(1)", opacity: "1" } },
+      { stop: 100, properties: { transform: "scale(0)", opacity: "0" } }
+    ],
+    config: {
+      name: "zoomOut",
+      duration: "0.4s",
+      timingFunction: "ease-in",
+      fillMode: "both"
+    }
+  }
+};
+function generateKeyframesCSS(name, keyframes) {
+  const stops = keyframes.slice().sort((a, b) => a.stop - b.stop).map((kf) => {
+    const props = Object.entries(kf.properties).map(([prop, value]) => `    ${prop}: ${value};`).join("\n");
+    return `  ${kf.stop}% {
+${props}
+  }`;
+  }).join("\n");
+  return `@keyframes ${name} {
+${stops}
+}`;
+}
+function generateAnimationCSS(config) {
+  const {
+    name,
+    duration,
+    timingFunction,
+    delay,
+    iterationCount,
+    direction,
+    fillMode
+  } = config;
+  return `animation: ${name} ${duration} ${timingFunction} ${delay} ${iterationCount} ${direction} ${fillMode};`;
+}
+function generateFullCSS(selector, config, keyframes) {
+  const keyframesBlock = generateKeyframesCSS(config.name, keyframes);
+  const animationProp = generateAnimationCSS(config);
+  const selectorBlock = `${selector} {
+  ${animationProp}
+}`;
+  return `${keyframesBlock}
+
+${selectorBlock}`;
+}
+function parseKeyframesCSS(css) {
+  const nameMatch = css.match(/@keyframes\s+([\w-]+)\s*\{/);
+  if (!nameMatch) {
+    return { error: "No @keyframes rule found in the provided CSS." };
+  }
+  const name = nameMatch[1];
+  const outerStart = css.indexOf("{", css.indexOf("@keyframes"));
+  if (outerStart === -1) {
+    return { error: "Malformed @keyframes block: missing opening brace." };
+  }
+  let depth = 0;
+  let outerEnd = -1;
+  for (let i = outerStart; i < css.length; i++) {
+    if (css[i] === "{") depth++;
+    else if (css[i] === "}") {
+      depth--;
+      if (depth === 0) {
+        outerEnd = i;
+        break;
+      }
+    }
+  }
+  if (outerEnd === -1) {
+    return { error: "Malformed @keyframes block: missing closing brace." };
+  }
+  const innerContent = css.slice(outerStart + 1, outerEnd);
+  const stopPattern = /([\d]+%|from|to)\s*\{([^}]*)\}/g;
+  const parsedKeyframes = [];
+  let match;
+  while ((match = stopPattern.exec(innerContent)) !== null) {
+    const stopStr = match[1].trim();
+    let stop;
+    if (stopStr === "from") {
+      stop = 0;
+    } else if (stopStr === "to") {
+      stop = 100;
+    } else {
+      stop = parseInt(stopStr, 10);
+    }
+    const propsStr = match[2];
+    const properties = {};
+    const propLines = propsStr.split(";");
+    for (const line of propLines) {
+      const trimmed = line.trim();
+      if (!trimmed) continue;
+      const colonIdx = trimmed.indexOf(":");
+      if (colonIdx === -1) continue;
+      const prop = trimmed.slice(0, colonIdx).trim();
+      const value = trimmed.slice(colonIdx + 1).trim();
+      if (prop && value) {
+        properties[prop] = value;
+      }
+    }
+    parsedKeyframes.push({ stop, properties });
+  }
+  if (parsedKeyframes.length === 0) {
+    return { error: "No keyframe stops found inside the @keyframes block." };
+  }
+  return { name, keyframes: parsedKeyframes };
+}
+function validateKeyframes(keyframes) {
+  if (keyframes.length < 2) {
+    return "At least 2 keyframes are required.";
+  }
+  const seenStops = /* @__PURE__ */ new Set();
+  for (const kf of keyframes) {
+    if (kf.stop < 0 || kf.stop > 100) {
+      return `Keyframe stop ${kf.stop} is out of range. Stops must be between 0 and 100.`;
+    }
+    if (seenStops.has(kf.stop)) {
+      return `Duplicate keyframe stop: ${kf.stop}%.`;
+    }
+    seenStops.add(kf.stop);
+  }
+  return null;
+}
+var CUBIC_BEZIER_PRESETS = {
+  "ease": { x1: 0.25, y1: 0.1, x2: 0.25, y2: 1 },
+  "ease-in": { x1: 0.42, y1: 0, x2: 1, y2: 1 },
+  "ease-out": { x1: 0, y1: 0, x2: 0.58, y2: 1 },
+  "ease-in-out": { x1: 0.42, y1: 0, x2: 0.58, y2: 1 },
+  "linear": { x1: 0, y1: 0, x2: 1, y2: 1 },
+  "bounce-in": { x1: 0.215, y1: 0.61, x2: 0.355, y2: 1 },
+  "bounce-out": { x1: 0.55, y1: 0.055, x2: 0.675, y2: 0.19 }
+};
+var PRESETS = CUBIC_BEZIER_PRESETS;
+function parseCubicBezier(input) {
+  const trimmed = input.trim().toLowerCase();
+  if (trimmed in CUBIC_BEZIER_PRESETS) {
+    return { ...CUBIC_BEZIER_PRESETS[trimmed] };
+  }
+  const inner = trimmed.startsWith("cubic-bezier(") ? trimmed.slice("cubic-bezier(".length).replace(/\)$/, "") : trimmed;
+  const parts = inner.split(",").map((p) => p.trim());
+  if (parts.length !== 4) {
+    return { error: `Expected 4 values, got ${parts.length}` };
+  }
+  const nums = parts.map(Number);
+  if (nums.some(isNaN)) {
+    return { error: "All values must be numeric" };
+  }
+  const params = {
+    x1: nums[0],
+    y1: nums[1],
+    x2: nums[2],
+    y2: nums[3]
+  };
+  const validationError = validateCubicBezierParams(params);
+  if (validationError) {
+    return { error: validationError };
+  }
+  return params;
+}
+function toCssValue(params) {
+  const fmt = (n) => {
+    const s = n.toString();
+    return s.includes(".") ? s.replace(/\.?0+$/, "") || "0" : s;
+  };
+  return `cubic-bezier(${fmt(params.x1)}, ${fmt(params.y1)}, ${fmt(params.x2)}, ${fmt(params.y2)})`;
+}
+function sampleCurve(params, t) {
+  const { y1, y2 } = params;
+  const mt = 1 - t;
+  return 3 * mt * mt * t * y1 + 3 * mt * t * t * y2 + t * t * t;
+}
+function getCurvePoints(params, steps = 50) {
+  const { x1, y1, x2, y2 } = params;
+  const points = [];
+  for (let i = 0; i <= steps; i++) {
+    const t = i / steps;
+    const mt = 1 - t;
+    const x = 3 * mt * mt * t * x1 + 3 * mt * t * t * x2 + t * t * t;
+    const y = 3 * mt * mt * t * y1 + 3 * mt * t * t * y2 + t * t * t;
+    points.push({ t, x, y });
+  }
+  return points;
+}
+function validateCubicBezierParams(params) {
+  if (params.x1 < 0 || params.x1 > 1) {
+    return `x1 must be between 0 and 1, got ${params.x1}`;
+  }
+  if (params.x2 < 0 || params.x2 > 1) {
+    return `x2 must be between 0 and 1, got ${params.x2}`;
+  }
+  return null;
+}
+var validateParams = validateCubicBezierParams;
+function toClampUnit(px, unit, rootFontSize) {
+  if (unit === "rem") {
+    const rem = px / rootFontSize;
+    return `${+rem.toFixed(4).replace(/\.?0+$/, "")}rem`;
+  }
+  return `${px}px`;
+}
+function formatVwRem(slopeVw, interceptRem) {
+  const vwStr = `${+slopeVw.toFixed(4).replace(/\.?0+$/, "")}vw`;
+  if (interceptRem === 0) return vwStr;
+  const sign = interceptRem >= 0 ? "+" : "-";
+  const absIntercept = Math.abs(interceptRem);
+  const remStr = `${+absIntercept.toFixed(4).replace(/\.?0+$/, "")}rem`;
+  return `${vwStr} ${sign} ${remStr}`;
+}
+function calcClamp(config) {
+  const { minSize, maxSize, minViewport, maxViewport, unit } = config;
+  const rootFontSize = config.rootFontSize ?? 16;
+  if (minSize >= maxSize) {
+    return { error: "minSize must be less than maxSize" };
+  }
+  if (minViewport >= maxViewport) {
+    return { error: "minViewport must be less than maxViewport" };
+  }
+  if (rootFontSize <= 0) {
+    return { error: "rootFontSize must be positive" };
+  }
+  const slope = (maxSize - minSize) / (maxViewport - minViewport);
+  const interceptPx = minSize - slope * minViewport;
+  const slopeVw = slope * 100;
+  const interceptRem = interceptPx / rootFontSize;
+  const preferredOutput = formatVwRem(slopeVw, interceptRem);
+  const minOutput = toClampUnit(minSize, unit, rootFontSize);
+  const maxOutput = toClampUnit(maxSize, unit, rootFontSize);
+  const clampValue = `clamp(${minOutput}, ${preferredOutput}, ${maxOutput})`;
+  return {
+    clampValue,
+    slope,
+    intercept: interceptPx,
+    minOutput,
+    maxOutput,
+    preferredOutput
+  };
+}
+function previewClamp(config, viewportWidth) {
+  const { minSize, maxSize, minViewport, maxViewport } = config;
+  const slope = (maxSize - minSize) / (maxViewport - minViewport);
+  const interceptPx = minSize - slope * minViewport;
+  const preferred = slope * viewportWidth + interceptPx;
+  return Math.min(Math.max(preferred, minSize), maxSize);
+}
+function parseClampString(clamp) {
+  const trimmed = clamp.trim();
+  const clampMatch = trimmed.match(/^clamp\(\s*(.+?)\s*,\s*(.+?)\s*,\s*(.+?)\s*\)$/);
+  if (!clampMatch) {
+    return { error: "Input does not look like a clamp() function" };
+  }
+  const [, minStr, preferredStr, maxStr] = clampMatch;
+  const minMatch = minStr.match(/^([\d.]+)(px|rem)$/);
+  if (!minMatch) return { error: `Cannot parse min value: ${minStr}` };
+  const maxMatch = maxStr.match(/^([\d.]+)(px|rem)$/);
+  if (!maxMatch) return { error: `Cannot parse max value: ${maxStr}` };
+  const unit = minMatch[2];
+  const rootFontSize = 16;
+  const minSize = unit === "rem" ? parseFloat(minMatch[1]) * rootFontSize : parseFloat(minMatch[1]);
+  const maxSize = unit === "rem" ? parseFloat(maxMatch[1]) * rootFontSize : parseFloat(maxMatch[1]);
+  const prefMatch = preferredStr.match(/^([\d.]+)vw\s*([+-]\s*[\d.]+rem)?$/);
+  if (!prefMatch) return { error: `Cannot parse preferred value: ${preferredStr}` };
+  const slopeVw = parseFloat(prefMatch[1]);
+  const slope = slopeVw / 100;
+  let interceptRem = 0;
+  if (prefMatch[2]) {
+    const interceptMatch = prefMatch[2].match(/([+-])\s*([\d.]+)rem/);
+    if (interceptMatch) {
+      interceptRem = parseFloat(interceptMatch[2]) * (interceptMatch[1] === "-" ? -1 : 1);
+    }
+  }
+  const interceptPx = interceptRem * rootFontSize;
+  if (slope === 0) {
+    return { error: "Cannot determine viewports from zero slope" };
+  }
+  const minViewport = (minSize - interceptPx) / slope;
+  const maxViewport = (maxSize - interceptPx) / slope;
+  return {
+    minSize,
+    maxSize,
+    minViewport: Math.round(minViewport),
+    maxViewport: Math.round(maxViewport),
+    unit,
+    rootFontSize
+  };
+}
+function makeSpecificityResult(inline, id, classAttr, element) {
+  return {
+    inline,
+    id,
+    classAttr,
+    element,
+    value: [inline, id, classAttr, element],
+    notation: `(${inline},${id},${classAttr},${element})`
+  };
+}
+function addTuples(a, b) {
+  return [a[0] + b[0], a[1] + b[1], a[2] + b[2], a[3] + b[3]];
+}
+function tokenizeSelector(selector) {
+  const tokens = [];
+  let i = 0;
+  const s = selector.trim();
+  while (i < s.length) {
+    if (/[\s>+~]/.test(s[i])) {
+      i++;
+      continue;
+    }
+    if (s[i] === "*") {
+      tokens.push({ token: "*", type: "universal", contribution: [0, 0, 0, 0] });
+      i++;
+      continue;
+    }
+    if (s[i] === "#") {
+      let j = i + 1;
+      while (j < s.length && /[a-zA-Z0-9_-]/.test(s[j])) j++;
+      const token = s.slice(i, j);
+      tokens.push({ token, type: "id", contribution: [0, 1, 0, 0] });
+      i = j;
+      continue;
+    }
+    if (s[i] === ".") {
+      let j = i + 1;
+      while (j < s.length && /[a-zA-Z0-9_-]/.test(s[j])) j++;
+      const token = s.slice(i, j);
+      tokens.push({ token, type: "class", contribution: [0, 0, 1, 0] });
+      i = j;
+      continue;
+    }
+    if (s[i] === "[") {
+      let j = i + 1;
+      while (j < s.length && s[j] !== "]") j++;
+      const token = s.slice(i, j + 1);
+      tokens.push({ token, type: "attribute", contribution: [0, 0, 1, 0] });
+      i = j + 1;
+      continue;
+    }
+    if (s[i] === ":") {
+      const isPseudoElement = s[i + 1] === ":";
+      const start = i;
+      i += isPseudoElement ? 2 : 1;
+      let j = i;
+      while (j < s.length && /[a-zA-Z0-9_-]/.test(s[j])) j++;
+      const pseudoName = s.slice(i, j).toLowerCase();
+      i = j;
+      if (i < s.length && s[i] === "(") {
+        let depth = 1;
+        let k = i + 1;
+        while (k < s.length && depth > 0) {
+          if (s[k] === "(") depth++;
+          else if (s[k] === ")") depth--;
+          k++;
+        }
+        const argStr = s.slice(i + 1, k - 1);
+        const token = s.slice(start, k);
+        i = k;
+        if (pseudoName === "where") {
+          tokens.push({ token, type: "pseudo-class-where", contribution: [0, 0, 0, 0] });
+        } else if (pseudoName === "not" || pseudoName === "is" || pseudoName === "has") {
+          const argTokens = tokenizeSelector(argStr);
+          const argContrib = argTokens.reduce(
+            (acc, t) => addTuples(acc, t.contribution),
+            [0, 0, 0, 0]
+          );
+          tokens.push({ token, type: `pseudo-class-${pseudoName}`, contribution: argContrib });
+        } else if (pseudoName === "nth-child" || pseudoName === "nth-last-child" || pseudoName === "nth-of-type" || pseudoName === "nth-last-of-type") {
+          tokens.push({ token, type: "pseudo-class", contribution: [0, 0, 1, 0] });
+        } else {
+          tokens.push({ token, type: "pseudo-class-fn", contribution: [0, 0, 1, 0] });
+        }
+      } else {
+        const token = s.slice(start, i);
+        if (isPseudoElement) {
+          tokens.push({ token, type: "pseudo-element", contribution: [0, 0, 0, 1] });
+        } else {
+          tokens.push({ token, type: "pseudo-class", contribution: [0, 0, 1, 0] });
+        }
+      }
+      continue;
+    }
+    if (/[a-zA-Z_-]/.test(s[i])) {
+      let j = i;
+      while (j < s.length && /[a-zA-Z0-9_-]/.test(s[j])) j++;
+      const token = s.slice(i, j);
+      tokens.push({ token, type: "element", contribution: [0, 0, 0, 1] });
+      i = j;
+      continue;
+    }
+    i++;
+  }
+  return tokens;
+}
+function calcSpecificity(selector) {
+  const tokens = tokenizeSelector(selector);
+  const total = tokens.reduce(
+    (acc, t) => addTuples(acc, t.contribution),
+    [0, 0, 0, 0]
+  );
+  return makeSpecificityResult(total[0], total[1], total[2], total[3]);
+}
+function compareSpecificity(a, b) {
+  for (let i = 0; i < 4; i++) {
+    if (a.value[i] < b.value[i]) return -1;
+    if (a.value[i] > b.value[i]) return 1;
+  }
+  return 0;
+}
+function explainSelector(selector) {
+  return tokenizeSelector(selector);
+}
+function multipleSelectors(css) {
+  let selectorPart = css.trim();
+  const braceIdx = selectorPart.indexOf("{");
+  if (braceIdx !== -1) {
+    selectorPart = selectorPart.slice(0, braceIdx).trim();
+  }
+  return selectorPart.split(",").map((s) => s.trim()).filter(Boolean).map((selector) => ({
+    selector,
+    specificity: calcSpecificity(selector)
+  }));
+}
+function calcCssResult(input, output) {
+  const originalSize = input.length;
+  const outputSize = output.length;
+  const savingsPercent = originalSize === 0 ? 0 : Math.round((originalSize - outputSize) / originalSize * 100 * 100) / 100;
+  return { output, originalSize, outputSize, savingsPercent };
+}
+function minifyCss(input) {
+  let output = input;
+  output = output.replace(/\/\*[\s\S]*?\*\//g, "");
+  output = output.replace(/\s+/g, " ");
+  output = output.replace(/\s*{\s*/g, "{");
+  output = output.replace(/\s*}\s*/g, "}");
+  output = output.replace(/\s*:\s*/g, ":");
+  output = output.replace(/\s*;\s*/g, ";");
+  output = output.replace(/\s*,\s*/g, ",");
+  output = output.replace(/;}/g, "}");
+  output = output.trim();
+  return calcCssResult(input, output);
+}
+function formatCss(input, indentSize = 2) {
+  const indent = " ".repeat(indentSize);
+  const { output: minified } = minifyCss(input);
+  let result = "";
+  let insideBlock = false;
+  let i = 0;
+  while (i < minified.length) {
+    const char = minified[i];
+    if (char === "{") {
+      result += " {\n";
+      insideBlock = true;
+      i++;
+    } else if (char === "}") {
+      result = result.trimEnd() + "\n";
+      result += "}\n\n";
+      insideBlock = false;
+      i++;
+    } else if (char === ";" && insideBlock) {
+      result += ";\n";
+      if (i + 1 < minified.length && minified[i + 1] !== "}") {
+        result += indent;
+      }
+      i++;
+    } else {
+      if (insideBlock && result.endsWith("{\n")) {
+        result += indent;
+      }
+      result += char;
+      i++;
+    }
+  }
+  const output = result.trimEnd();
+  return calcCssResult(input, output);
+}
+function countRules(css) {
+  const matches = css.match(/{/g);
+  return matches ? matches.length : 0;
+}
+function countProperties(css) {
+  let count = 0;
+  let insideBlock = false;
+  for (let i = 0; i < css.length; i++) {
+    const char = css[i];
+    if (char === "{") {
+      insideBlock = true;
+    } else if (char === "}") {
+      insideBlock = false;
+    } else if (char === ";" && insideBlock) {
+      count++;
+    }
+  }
+  css.replace(/{[^{}]*}/g, (block) => {
+    const innerContent = block.slice(1, -1).trim();
+    if (!innerContent) return block;
+    const lastDecl = innerContent.split(";").pop()?.trim();
+    if (lastDecl && lastDecl.includes(":")) {
+      count++;
+    }
+    return block;
+  });
+  return count;
+}
+var DEFAULT_CONTAINER = {
+  flexDirection: "row",
+  flexWrap: "nowrap",
+  justifyContent: "flex-start",
+  alignItems: "stretch",
+  alignContent: "stretch",
+  gap: 0
+};
+var DEFAULT_ITEM = {
+  flexGrow: 0,
+  flexShrink: 1,
+  flexBasis: "auto",
+  alignSelf: "auto",
+  order: 0
+};
+function generateFlexContainerCss(config) {
+  const lines = ["display: flex;"];
+  if (config.flexDirection !== "row") {
+    lines.push(`flex-direction: ${config.flexDirection};`);
+  }
+  if (config.flexWrap !== "nowrap") {
+    lines.push(`flex-wrap: ${config.flexWrap};`);
+  }
+  if (config.justifyContent !== "flex-start") {
+    lines.push(`justify-content: ${config.justifyContent};`);
+  }
+  if (config.alignItems !== "stretch") {
+    lines.push(`align-items: ${config.alignItems};`);
+  }
+  if (config.alignContent !== "stretch") {
+    lines.push(`align-content: ${config.alignContent};`);
+  }
+  if (config.rowGap !== void 0 || config.columnGap !== void 0) {
+    const rg = config.rowGap !== void 0 ? config.rowGap : config.gap;
+    const cg = config.columnGap !== void 0 ? config.columnGap : config.gap;
+    if (rg === cg) {
+      lines.push(`gap: ${rg}px;`);
+    } else {
+      lines.push(`row-gap: ${rg}px;`);
+      lines.push(`column-gap: ${cg}px;`);
+    }
+  } else if (config.gap !== 0) {
+    lines.push(`gap: ${config.gap}px;`);
+  }
+  return lines.join("\n");
+}
+function generateFlexItemCss(config) {
+  const lines = [];
+  const flexShorthand = `${config.flexGrow} ${config.flexShrink} ${config.flexBasis}`;
+  lines.push(`flex: ${flexShorthand};`);
+  if (config.alignSelf !== "auto") {
+    lines.push(`align-self: ${config.alignSelf};`);
+  }
+  if (config.order !== 0) {
+    lines.push(`order: ${config.order};`);
+  }
+  return lines.join("\n");
+}
+var FLEX_PRESETS = [
+  {
+    name: "Horizontal Stack",
+    description: "Items laid out in a row from left to right",
+    container: {
+      ...DEFAULT_CONTAINER,
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 8
+    }
+  },
+  {
+    name: "Vertical Stack",
+    description: "Items stacked vertically from top to bottom",
+    container: {
+      ...DEFAULT_CONTAINER,
+      flexDirection: "column",
+      alignItems: "stretch",
+      gap: 8
+    }
+  },
+  {
+    name: "Centered",
+    description: "Items centered both horizontally and vertically",
+    container: {
+      ...DEFAULT_CONTAINER,
+      justifyContent: "center",
+      alignItems: "center"
+    }
+  },
+  {
+    name: "Space Between",
+    description: "Items spread out with equal space between them",
+    container: {
+      ...DEFAULT_CONTAINER,
+      justifyContent: "space-between",
+      alignItems: "center"
+    }
+  },
+  {
+    name: "Grid-like",
+    description: "Wrapping layout that resembles a grid",
+    container: {
+      ...DEFAULT_CONTAINER,
+      flexWrap: "wrap",
+      justifyContent: "flex-start",
+      alignItems: "flex-start",
+      gap: 16
+    }
+  },
+  {
+    name: "Space Evenly",
+    description: "Items distributed with equal space around each item",
+    container: {
+      ...DEFAULT_CONTAINER,
+      justifyContent: "space-evenly",
+      alignItems: "center"
+    }
+  },
+  {
+    name: "Right-aligned",
+    description: "Items aligned to the right end of the container",
+    container: {
+      ...DEFAULT_CONTAINER,
+      justifyContent: "flex-end",
+      alignItems: "center",
+      gap: 8
+    }
+  }
+];
+var DEFAULT_CONFIG = {
+  templateColumns: "repeat(3, 1fr)",
+  templateRows: "auto",
+  gap: 16,
+  justifyItems: "stretch",
+  alignItems: "stretch",
+  justifyContent: "start",
+  alignContent: "start"
+};
+var GRID_PRESETS = [
+  {
+    name: "3-Column",
+    description: "Equal three-column layout",
+    config: {
+      templateColumns: "repeat(3, 1fr)",
+      templateRows: "auto",
+      gap: 16,
+      justifyItems: "stretch",
+      alignItems: "stretch",
+      justifyContent: "start",
+      alignContent: "start"
+    }
+  },
+  {
+    name: "12-Column Layout",
+    description: "Classic 12-column grid system",
+    config: {
+      templateColumns: "repeat(12, 1fr)",
+      templateRows: "auto",
+      gap: 24,
+      justifyItems: "stretch",
+      alignItems: "stretch",
+      justifyContent: "start",
+      alignContent: "start"
+    }
+  },
+  {
+    name: "Holy Grail",
+    description: "Header, two sidebars, content, footer",
+    config: {
+      templateColumns: "200px 1fr 200px",
+      templateRows: "auto 1fr auto",
+      gap: 0,
+      justifyItems: "stretch",
+      alignItems: "stretch",
+      justifyContent: "stretch",
+      alignContent: "stretch"
+    }
+  },
+  {
+    name: "Mosaic",
+    description: "Asymmetric mosaic grid",
+    config: {
+      templateColumns: "2fr 1fr 1fr",
+      templateRows: "repeat(2, 200px)",
+      gap: 8,
+      justifyItems: "stretch",
+      alignItems: "stretch",
+      justifyContent: "start",
+      alignContent: "start"
+    }
+  },
+  {
+    name: "Card Grid",
+    description: "Responsive auto-fit card grid",
+    config: {
+      templateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
+      templateRows: "auto",
+      gap: 20,
+      justifyItems: "stretch",
+      alignItems: "start",
+      justifyContent: "start",
+      alignContent: "start"
+    }
+  }
+];
+function generateGridContainerCss(config) {
+  const lines = ["display: grid;"];
+  lines.push(`grid-template-columns: ${config.templateColumns};`);
+  lines.push(`grid-template-rows: ${config.templateRows};`);
+  const colGap = config.columnGap !== void 0 ? config.columnGap : config.gap;
+  const rowGap = config.rowGap !== void 0 ? config.rowGap : config.gap;
+  if (colGap === rowGap) {
+    lines.push(`gap: ${colGap}px;`);
+  } else {
+    lines.push(`column-gap: ${colGap}px;`);
+    lines.push(`row-gap: ${rowGap}px;`);
+  }
+  lines.push(`justify-items: ${config.justifyItems};`);
+  lines.push(`align-items: ${config.alignItems};`);
+  lines.push(`justify-content: ${config.justifyContent};`);
+  lines.push(`align-content: ${config.alignContent};`);
+  return lines.join("\n");
+}
+function generateGridItemCss(config) {
+  const lines = [];
+  if (config.columnStart !== void 0) lines.push(`grid-column-start: ${config.columnStart};`);
+  if (config.columnEnd !== void 0) lines.push(`grid-column-end: ${config.columnEnd};`);
+  if (config.rowStart !== void 0) lines.push(`grid-row-start: ${config.rowStart};`);
+  if (config.rowEnd !== void 0) lines.push(`grid-row-end: ${config.rowEnd};`);
+  if (config.justifySelf !== void 0) lines.push(`justify-self: ${config.justifySelf};`);
+  if (config.alignSelf !== void 0) lines.push(`align-self: ${config.alignSelf};`);
+  return lines.join("\n");
+}
+function parseRepeat(expr) {
+  const trimmed = expr.trim();
+  const match = trimmed.match(/^repeat\(\s*([^,]+?)\s*,\s*(.+?)\s*\)$/i);
+  if (!match) {
+    return { error: "Invalid repeat() expression" };
+  }
+  const count = match[1].trim();
+  const size = match[2].trim();
+  if (count !== "auto-fit" && count !== "auto-fill") {
+    const n = parseInt(count, 10);
+    if (isNaN(n) || n <= 0) {
+      return { error: `Invalid repeat count: ${count}` };
+    }
+    if (!size) {
+      return { error: "Repeat size cannot be empty" };
+    }
+    return Array(n).fill(size).join(" ");
+  }
+  return `${count}(${size})`;
+}
+function buildRepeat(count, size) {
+  return `repeat(${count}, ${size})`;
+}
+
+exports.ANIMATION_PRESETS = ANIMATION_PRESETS;
+exports.BORDER_PRESETS = BORDER_PRESETS;
+exports.CUBIC_BEZIER_PRESETS = CUBIC_BEZIER_PRESETS;
+exports.DEFAULT_CONFIG = DEFAULT_CONFIG;
+exports.DEFAULT_CONTAINER = DEFAULT_CONTAINER;
+exports.DEFAULT_ITEM = DEFAULT_ITEM;
+exports.DEFAULT_SHADOW = DEFAULT_SHADOW;
+exports.FLEX_PRESETS = FLEX_PRESETS;
+exports.GRADIENT_PRESETS = GRADIENT_PRESETS;
+exports.GRID_PRESETS = GRID_PRESETS;
+exports.PRESETS = PRESETS;
+exports.SHADOW_PRESETS = SHADOW_PRESETS;
+exports.buildRepeat = buildRepeat;
+exports.calcClamp = calcClamp;
+exports.calcSpecificity = calcSpecificity;
+exports.compareSpecificity = compareSpecificity;
+exports.countProperties = countProperties;
+exports.countRules = countRules;
+exports.explainSelector = explainSelector;
+exports.formatCss = formatCss;
+exports.generateAnimationCSS = generateAnimationCSS;
+exports.generateBorderRadius = generateBorderRadius;
+exports.generateBoxShadow = generateBoxShadow;
+exports.generateCssProperty = generateCssProperty;
+exports.generateFlexContainerCss = generateFlexContainerCss;
+exports.generateFlexItemCss = generateFlexItemCss;
+exports.generateFullCSS = generateFullCSS;
+exports.generateGradient = generateGradient;
+exports.generateGridContainerCss = generateGridContainerCss;
+exports.generateGridItemCss = generateGridItemCss;
+exports.generateKeyframesCSS = generateKeyframesCSS;
+exports.getCurvePoints = getCurvePoints;
+exports.isUniform = isUniform;
+exports.minifyCss = minifyCss;
+exports.multipleSelectors = multipleSelectors;
+exports.parseBorderRadius = parseBorderRadius;
+exports.parseBoxShadow = parseBoxShadow;
+exports.parseClampString = parseClampString;
+exports.parseCubicBezier = parseCubicBezier;
+exports.parseGradient = parseGradient;
+exports.parseKeyframesCSS = parseKeyframesCSS;
+exports.parseRepeat = parseRepeat;
+exports.previewClamp = previewClamp;
+exports.sampleCurve = sampleCurve;
+exports.toCssValue = toCssValue;
+exports.validateCubicBezierParams = validateCubicBezierParams;
+exports.validateKeyframes = validateKeyframes;
+exports.validateParams = validateParams;