onda-engine 0.1.1 → 0.2.0

package/dist/index.d.ts

@@ -48,7 +48,7 @@ export { KanbanBoard, KanbanBoardProps, KanbanColumn } from './components/Kanban
 export { KenBurns, KenBurnsProps } from './components/KenBurns.js';
 export { Ease, Keyframes, KeyframesImageContent, KeyframesProps, KeyframesTextContent, PosKey, ValKey } from './components/Keyframes.js';
 export { KeyframeTracks, SampledKeyframes, hasKeyframeTracks, sampleKeyframes, sampleTrack } from './keyframes-sampler.js';
-export { Box, ResponsiveTransform, entryDesignAnchor, responsiveEntryTransform } from './responsive.js';
+export { Box, ResponsiveTransform, entryDesignAnchor, isFullBleed, responsiveCoverTransform, responsiveEntryTransform } from './responsive.js';
 export { KineticText, KineticTextPreset, KineticTextProps } from './components/KineticText.js';
 export { LineChart, LineChartProps } from './components/LineChart.js';
 export { LogoReveal, LogoRevealPreset, LogoRevealProps } from './components/LogoReveal.js';

package/dist/react.d.ts

@@ -463,7 +463,9 @@ interface Scene {
 /** A color as a hex string (`#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`) or an
  *  explicit 0..1 {@link Color}. */
 type ColorInput = string | Color;
-/** Normalize a {@link ColorInput} into the engine's 0..1 sRGB {@link Color}. */
+/** Normalize a {@link ColorInput} into the engine's 0..1 sRGB {@link Color}. Tolerant by design —
+ *  parses hex, common named colors, and `rgb()/hsl()`; anything else degrades to transparent (with
+ *  a warning) rather than throwing, so one bad value never crashes the render. */
 declare function parseColor(input: ColorInput): Color;
 /**
  * Interpolate between colors — like {@link interpolate}, but each output is a

package/dist/react.js

@@ -78,29 +78,113 @@ function segment(input, inputRange, outputRange, i, easing) {
 }
 
 // ../react/src/color.ts
-function parseColor(input) {
-  if (input === "none" || input === "transparent") return { r: 0, g: 0, b: 0, a: 0 };
-  if (typeof input !== "string") {
-    if (input == null || typeof input !== "object" || typeof input.r !== "number" || typeof input.g !== "number" || typeof input.b !== "number") {
-      throw new Error(
-        `invalid color ${JSON.stringify(input)}: expected a hex string or a {r,g,b} object with numeric 0..1 channels`
-      );
-    }
-    return { r: input.r, g: input.g, b: input.b, ...input.a !== void 0 ? { a: input.a } : {} };
-  }
+var clamp01 = (v) => v < 0 ? 0 : v > 1 ? 1 : v;
+var TRANSPARENT = { r: 0, g: 0, b: 0, a: 0 };
+var NAMED_COLORS = {
+  black: "#000000",
+  white: "#ffffff",
+  red: "#ff0000",
+  green: "#008000",
+  blue: "#0000ff",
+  yellow: "#ffff00",
+  orange: "#ffa500",
+  purple: "#800080",
+  pink: "#ffc0cb",
+  gray: "#808080",
+  grey: "#808080",
+  cyan: "#00ffff",
+  magenta: "#ff00ff",
+  brown: "#a52a2a",
+  navy: "#000080",
+  teal: "#008080",
+  lime: "#00ff00",
+  silver: "#c0c0c0",
+  gold: "#ffd700",
+  maroon: "#800000",
+  olive: "#808000",
+  aqua: "#00ffff",
+  fuchsia: "#ff00ff",
+  indigo: "#4b0082",
+  violet: "#ee82ee",
+  beige: "#f5f5dc",
+  coral: "#ff7f50",
+  crimson: "#dc143c",
+  khaki: "#f0e68c",
+  salmon: "#fa8072",
+  turquoise: "#40e0d0",
+  tan: "#d2b48c",
+  ivory: "#fffff0",
+  lavender: "#e6e6fa",
+  mint: "#98ff98"
+};
+function hexToColor(input) {
   let hex = input.trim().replace(/^#/, "");
   if (hex.length === 3 || hex.length === 4) {
     hex = hex.split("").map((c) => c + c).join("");
   }
-  if (hex.length !== 6 && hex.length !== 8 || !/^[0-9a-fA-F]+$/.test(hex)) {
-    throw new Error(`invalid color '${input}': expected #rgb, #rgba, #rrggbb, or #rrggbbaa`);
-  }
+  if (hex.length !== 6 && hex.length !== 8 || !/^[0-9a-fA-F]+$/.test(hex)) return null;
   const channel = (i) => Number.parseInt(hex.slice(i, i + 2), 16) / 255;
   const color = { r: channel(0), g: channel(2), b: channel(4) };
   if (hex.length === 8) color.a = channel(6);
   return color;
 }
-var clamp01 = (v) => v < 0 ? 0 : v > 1 ? 1 : v;
+var hslToColor = (hDeg, sPct, lPct, a) => {
+  const s = sPct / 100;
+  const l = lPct / 100;
+  const k = (n) => (n + hDeg / 30) % 12;
+  const f = (n) => clamp01(l - s * Math.min(l, 1 - l) * Math.max(-1, Math.min(k(n) - 3, 9 - k(n), 1)));
+  return { r: f(0), g: f(8), b: f(4), ...a < 1 ? { a } : {} };
+};
+function cssToColor(input) {
+  const s = input.trim().toLowerCase();
+  const named = NAMED_COLORS[s];
+  if (named) return hexToColor(named);
+  const parts = (body) => (body ?? "").split(/[\s,/]+/).filter(Boolean);
+  const alpha = (v) => v === void 0 ? 1 : clamp01(v.endsWith("%") ? Number.parseFloat(v) / 100 : Number.parseFloat(v));
+  const rgb = s.match(/^rgba?\(([^)]+)\)$/);
+  if (rgb) {
+    const [r, g, b, a] = parts(rgb[1]);
+    if (r !== void 0 && g !== void 0 && b !== void 0)
+      return {
+        r: clamp01(Number.parseFloat(r) / 255),
+        g: clamp01(Number.parseFloat(g) / 255),
+        b: clamp01(Number.parseFloat(b) / 255),
+        ...alpha(a) < 1 ? { a: alpha(a) } : {}
+      };
+  }
+  const hsl = s.match(/^hsla?\(([^)]+)\)$/);
+  if (hsl) {
+    const [h, sat, light, a] = parts(hsl[1]);
+    if (h !== void 0 && sat !== void 0 && light !== void 0)
+      return hslToColor(
+        Number.parseFloat(h),
+        Number.parseFloat(sat),
+        Number.parseFloat(light),
+        alpha(a)
+      );
+  }
+  return null;
+}
+function parseColor(input) {
+  if (input === "none" || input === "transparent") return { r: 0, g: 0, b: 0, a: 0 };
+  if (typeof input !== "string") {
+    if (input == null || typeof input !== "object" || typeof input.r !== "number" || typeof input.g !== "number" || typeof input.b !== "number") {
+      console.warn(
+        `onda: invalid color ${JSON.stringify(input)} \u2014 expected a hex string or a {r,g,b} object; using transparent.`
+      );
+      return { ...TRANSPARENT };
+    }
+    return { r: input.r, g: input.g, b: input.b, ...input.a !== void 0 ? { a: input.a } : {} };
+  }
+  const hex = hexToColor(input);
+  if (hex) return hex;
+  const css = cssToColor(input);
+  if (css) return css;
+  console.warn(
+    `onda: unrecognized color '${input}' \u2014 using transparent. Supply hex (#rrggbb), rgb()/hsl(), or a common name.`
+  );
+  return { ...TRANSPARENT };
+}
 var toHex = (v) => Math.round(clamp01(v) * 255).toString(16).padStart(2, "0");
 function interpolateColors(input, inputRange, outputRange, options = {}) {
   const colors = outputRange.map(parseColor);
@@ -1824,9 +1908,9 @@ function parseGrain(input) {
   return void 0;
 }
 function parseBackdropBlur(input) {
-  const TRANSPARENT = { r: 0, g: 0, b: 0, a: 0 };
+  const TRANSPARENT2 = { r: 0, g: 0, b: 0, a: 0 };
   if (typeof input === "number") {
-    return input > 0 ? { effect: "backdrop_blur", sigma: input, tint: TRANSPARENT, brightness: 1, saturation: 1 } : void 0;
+    return input > 0 ? { effect: "backdrop_blur", sigma: input, tint: TRANSPARENT2, brightness: 1, saturation: 1 } : void 0;
   }
   if (input && typeof input === "object") {
     const b = input;
@@ -1834,7 +1918,7 @@ function parseBackdropBlur(input) {
       return {
         effect: "backdrop_blur",
         sigma: b.sigma,
-        tint: b.tint !== void 0 ? parseColor(b.tint) : TRANSPARENT,
+        tint: b.tint !== void 0 ? parseColor(b.tint) : TRANSPARENT2,
         brightness: typeof b.brightness === "number" ? b.brightness : 1,
         saturation: typeof b.saturation === "number" ? b.saturation : 1
       };