@shopify/klint 0.0.97 → 0.2.0

package/dist/elements/index.js

@@ -1,913 +0,0 @@
-// src/elements/Color.tsx
-var Color = class {
-  constructor() {
-    // context: KlintContexts;
-    /**
-     * Array of predefined colors in the Klint color palette
-     */
-    this.colors = [
-      "#E84D37",
-      // coral
-      "#7F4C2F",
-      // brown
-      "#EDBC2F",
-      // mustard
-      "#BF3034",
-      // crimson
-      "#18599D",
-      // navy
-      "#45A7C6",
-      // sky
-      "#8CB151",
-      // olive
-      "#252120",
-      // charcoal
-      "#ECA088",
-      // peach
-      "#C9B1B8",
-      // rose
-      "#8F3064",
-      // plum
-      "#7B8870",
-      // sage
-      "#C0C180",
-      // drab
-      "#4B423D",
-      // taupe
-      "#1A2A65",
-      // midnight
-      "#EAA550",
-      // golden
-      "#F17B04",
-      // orange
-      "#404757"
-      // slate
-    ];
-  }
-  // /**
-  //  * Creates a new Color instance
-  //  * @param ctx - The Klint context
-  //  */
-  // constructor(ctx: KlintContexts) {
-  //   this.context = ctx;
-  // }
-  get coral() {
-    return this.colors[0];
-  }
-  get brown() {
-    return this.colors[1];
-  }
-  get mustard() {
-    return this.colors[2];
-  }
-  get crimson() {
-    return this.colors[3];
-  }
-  get navy() {
-    return this.colors[4];
-  }
-  get sky() {
-    return this.colors[5];
-  }
-  get olive() {
-    return this.colors[6];
-  }
-  get charcoal() {
-    return this.colors[7];
-  }
-  get peach() {
-    return this.colors[8];
-  }
-  get rose() {
-    return this.colors[9];
-  }
-  get plum() {
-    return this.colors[10];
-  }
-  get sage() {
-    return this.colors[11];
-  }
-  get drab() {
-    return this.colors[12];
-  }
-  get taupe() {
-    return this.colors[13];
-  }
-  get midnight() {
-    return this.colors[14];
-  }
-  get golden() {
-    return this.colors[15];
-  }
-  get orange() {
-    return this.colors[16];
-  }
-  get slate() {
-    return this.colors[17];
-  }
-  /**
-   * Ensures a color string has a # prefix
-   * @param color - Color string in hex format (with or without #)
-   * @returns Hex color string with # prefix
-   */
-  hex(color) {
-    return color.startsWith("#") ? color : `#${color}`;
-  }
-  /**
-   * Creates an RGB color string
-   * @param r - Red component (0-255)
-   * @param g - Green component (0-255)
-   * @param b - Blue component (0-255)
-   * @returns RGB color string
-   */
-  rgb(r, g, b) {
-    return `rgb(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)})`;
-  }
-  /**
-   * Creates an RGBA color string
-   * @param r - Red component (0-255)
-   * @param g - Green component (0-255)
-   * @param b - Blue component (0-255)
-   * @param alpha - Alpha/opacity value (0-1)
-   * @returns RGBA color string
-   */
-  rgba(r, g, b, alpha) {
-    return `rgba(${Math.round(r)}, ${Math.round(g)}, ${Math.round(
-      b
-    )}, ${alpha})`;
-  }
-  /**
-   * Creates a grayscale color
-   * @param value - Gray value (0-255)
-   * @param alpha - Optional alpha/opacity value (0-1)
-   * @returns RGB or RGBA grayscale color string
-   */
-  gray(value, alpha) {
-    return alpha !== void 0 ? `rgba(${Math.round(value)}, ${Math.round(value)}, ${Math.round(
-      value
-    )}, ${alpha})` : `rgb(${Math.round(value)}, ${Math.round(value)}, ${Math.round(value)})`;
-  }
-  /**
-   * Creates an HSL color string
-   * @param h - Hue (0-360)
-   * @param s - Saturation percentage (0-100)
-   * @param l - Lightness percentage (0-100)
-   * @returns HSL color string
-   */
-  hsl(h, s, l) {
-    return `hsl(${h % 360}, ${Math.max(0, s)}%, ${Math.max(0, l)}%)`;
-  }
-  /**
-   * Creates an HSLA color string
-   * @param h - Hue (0-360)
-   * @param s - Saturation percentage (0-100)
-   * @param l - Lightness percentage (0-100)
-   * @param alpha - Alpha/opacity value (0-1)
-   * @returns HSLA color string
-   */
-  hsla(h, s, l, alpha) {
-    return `hsla(${h % 360}, ${Math.max(0, s)}%, ${Math.max(0, l)}%, ${alpha})`;
-  }
-  /**
-   * Creates an LCH color string
-   * @param l - Lightness percentage (0-100)
-   * @param c - Chroma value
-   * @param h - Hue (0-360)
-   * @returns LCH color string
-   */
-  lch(l, c, h) {
-    return `lch(${l}% ${c} ${h})`;
-  }
-  /**
-   * Creates an LCH color string with alpha
-   * @param l - Lightness percentage (0-100)
-   * @param c - Chroma value
-   * @param h - Hue (0-360)
-   * @param alpha - Alpha/opacity value (0-1)
-   * @returns LCH color string with alpha
-   */
-  lcha(l, c, h, alpha) {
-    return `lch(${l}% ${c} ${h} / ${alpha})`;
-  }
-  /**
-   * Creates a LAB color string
-   * @param l - Lightness percentage (0-100)
-   * @param a - A-axis value (green to red)
-   * @param b - B-axis value (blue to yellow)
-   * @returns LAB color string
-   */
-  lab(l, a, b) {
-    return `lab(${l}% ${a} ${b})`;
-  }
-  /**
-   * Creates a LAB color string with alpha
-   * @param l - Lightness percentage (0-100)
-   * @param a - A-axis value (green to red)
-   * @param b - B-axis value (blue to yellow)
-   * @param alpha - Alpha/opacity value (0-1)
-   * @returns LAB color string with alpha
-   */
-  laba(l, a, b, alpha) {
-    return `lab(${l}% ${a} ${b} / ${alpha})`;
-  }
-  /**
-   * Creates an OKLCH color string
-   * @param l - Lightness value (0-1)
-   * @param c - Chroma value
-   * @param h - Hue (0-360)
-   * @returns OKLCH color string
-   */
-  oklch(l, c, h) {
-    return `oklch(${l} ${c} ${h})`;
-  }
-  /**
-   * Creates an OKLCH color string with alpha
-   * @param l - Lightness value (0-1)
-   * @param c - Chroma value
-   * @param h - Hue (0-360)
-   * @param alpha - Alpha/opacity value (0-1)
-   * @returns OKLCH color string with alpha
-   */
-  oklcha(l, c, h, alpha) {
-    return `oklch(${l} ${c} ${h} / ${alpha})`;
-  }
-  /**
-   * Creates an OKLAB color string
-   * @param l - Lightness value (0-1)
-   * @param a - A-axis value (green to red)
-   * @param b - B-axis value (blue to yellow)
-   * @returns OKLAB color string
-   */
-  oklab(l, a, b) {
-    return `oklab(${l} ${a} ${b})`;
-  }
-  /**
-   * Creates an OKLAB color string with alpha
-   * @param l - Lightness value (0-1)
-   * @param a - A-axis value (green to red)
-   * @param b - B-axis value (blue to yellow)
-   * @param alpha - Alpha/opacity value (0-1)
-   * @returns OKLAB color string with alpha
-   */
-  oklaba(l, a, b, alpha) {
-    return `oklab(${l} ${a} ${b} / ${alpha})`;
-  }
-  /**
-   * Blends two colors using CSS color-mix
-   * @param colorA - First color
-   * @param colorB - Second color
-   * @param factor - Blend factor (0-1) where 0 is colorA and 1 is colorB
-   * @param colorMode - Color space to blend in (e.g., "oklch", "hsl")
-   * @returns Blended color string
-   */
-  blendColors(colorA, colorB, factor, colorMode = "oklch") {
-    const t = Math.max(0, Math.min(1, factor)) * 100;
-    return `color-mix(in ${colorMode}, ${colorA}, ${colorB} ${t}%)`;
-  }
-  /**
-   * Creates a palette of colors based on a single base color
-   * @param baseColor - The base color to create palette from
-   * @param steps - Number of steps in each direction (lighter/darker)
-   * @returns Array of color strings forming a palette
-   */
-  createPalette(baseColor, steps = 9) {
-    const palette = [];
-    for (let i = 1; i < steps; i++) {
-      const factor = i / steps;
-      palette.unshift(this.blendColors(baseColor, "#ffffff", factor, "oklch"));
-    }
-    palette.push(baseColor);
-    for (let i = 1; i < steps; i++) {
-      const factor = i / steps;
-      palette.push(this.blendColors(baseColor, "#000000", factor, "oklch"));
-    }
-    return palette;
-  }
-  /**
-   * Creates a complementary color (opposite on the color wheel)
-   * @param color - Base color
-   * @returns Complementary color string
-   */
-  complementary(color) {
-    return this.blendColors(color, "hsl(180deg 100% 50%)", 1, "hsl");
-  }
-  /**
-   * Creates analogous colors (adjacent on the color wheel)
-   * @param color - Base color
-   * @param angle - Angle of separation in degrees
-   * @returns Tuple of two analogous color strings
-   */
-  analogous(color, angle = 30) {
-    return [
-      this.blendColors(color, `hsl(${-angle}deg 100% 50%)`, 1, "hsl"),
-      this.blendColors(color, `hsl(${angle}deg 100% 50%)`, 1, "hsl")
-    ];
-  }
-  /**
-   * Creates a triadic color scheme (three colors evenly spaced on the color wheel)
-   * @param color - Base color
-   * @returns Tuple of two additional colors to form a triadic scheme
-   */
-  triadic(color) {
-    return [
-      this.blendColors(color, "hsl(120deg 100% 50%)", 1, "hsl"),
-      this.blendColors(color, "hsl(240deg 100% 50%)", 1, "hsl")
-    ];
-  }
-  /**
-   * Increases the saturation of a color
-   * @param color - Base color
-   * @param amount - Amount to saturate (percentage)
-   * @returns Saturated color string
-   */
-  saturate(color, amount) {
-    return this.blendColors(
-      color,
-      "hsl(0deg 100% 50% / 0%)",
-      amount / 100,
-      "hsl"
-    );
-  }
-  /**
-   * Lightens a color by mixing with white
-   * @param color - Base color
-   * @param amount - Amount to lighten (percentage)
-   * @returns Lightened color string
-   */
-  lighten(color, amount) {
-    return this.blendColors(color, "white", amount / 100, "hsl");
-  }
-  /**
-   * Darkens a color by mixing with black
-   * @param color - Base color
-   * @param amount - Amount to darken (percentage)
-   * @returns Darkened color string
-   */
-  darken(color, amount) {
-    return this.blendColors(color, "black", amount / 100, "hsl");
-  }
-};
-var Color_default = Color;
-
-// src/elements/Easing.tsx
-var Easing = class {
-  constructor(ctx) {
-    this.normalize = (val) => {
-      return val * 0.5 + 0.5;
-    };
-    this.expand = (val) => {
-      return val * 2 - 1;
-    };
-    this.inout = (val, power = 2) => {
-      const m = val - 1;
-      const t = val * 2;
-      if (t < 1) {
-        return val * Math.pow(t, power - 1);
-      }
-      return power % 2 === 0 ? 1 - Math.pow(m, power) * Math.pow(2, power - 1) : 1 + Math.pow(m, power) * Math.pow(2, power - 1);
-    };
-    this.in = (val, power = 2) => {
-      return Math.pow(val, power);
-    };
-    this.out = (val, power = 2) => {
-      const m = val - 1;
-      return power % 2 === 0 ? 1 - Math.pow(m, power) : 1 + Math.pow(m, power);
-    };
-    this.overshootIn = (val) => {
-      const k = 1.70158;
-      return val * val * (val * (k + 1) - k);
-    };
-    this.overshootOut = (val) => {
-      const m = val - 1;
-      const k = 1.70158;
-      return 1 + m * m * (m * (k + 1) + k);
-    };
-    this.overshootInOut = (val) => {
-      const m = val - 1;
-      const t = val * 2;
-      const k = 1.70158 * 1.525;
-      if (val < 0.5) return val * t * (t * (k + 1) - k);
-      return 1 + 2 * m * m * (2 * m * (k + 1) + k);
-    };
-    this.bounceOut = (val) => {
-      const r = 1 / 2.75;
-      const k1 = r;
-      const k2 = 2 * r;
-      const k3 = 1.5 * r;
-      const k4 = 2.5 * r;
-      const k5 = 2.25 * r;
-      const k6 = 2.625 * r;
-      const k0 = 7.5625;
-      let t;
-      if (val < k1) {
-        return k0 * val * val;
-      } else if (val < k2) {
-        t = val - k3;
-        return k0 * t * t + 0.75;
-      } else if (val < k4) {
-        t = val - k5;
-        return k0 * t * t + 0.9375;
-      }
-      t = val - k6;
-      return k0 * t * t + 0.984375;
-    };
-    this.bounceIn = (val) => {
-      return 1 - this.bounceOut(1 - val);
-    };
-    this.bounceInOut = (val) => {
-      const t = val * 2;
-      if (t < 1) return 0.5 - 0.5 * this.bounceOut(1 - t);
-      return 0.5 + 0.5 * this.bounceOut(t - 1);
-    };
-    this.elasticIn = (val) => {
-      const m = val - 1;
-      return -Math.pow(2, 10 * m) * Math.sin((m * 40 - 3) * Math.PI / 6);
-    };
-    this.elasticOut = (val) => {
-      return 1 + Math.pow(2, 10 * -val) * Math.sin((-val * 40 - 3) * Math.PI / 6);
-    };
-    this.elasticInOut = (val) => {
-      const s = 2 * val - 1;
-      const k = (80 * s - 9) * Math.PI / 18;
-      if (s < 0) return -0.5 * Math.pow(2, 10 * s) * Math.sin(k);
-      return 1 + 0.5 * Math.pow(2, -10 * s) * Math.sin(k);
-    };
-    this.smoothstep = (val, x0 = 0, x1 = 1) => {
-      let p = (val - x0) / (x1 - x0);
-      p = p < 0 ? 0 : p > 1 ? 1 : p;
-      return p * p * (3 - 2 * p);
-    };
-    this.log = () => {
-      console.log(this);
-    };
-    this.context = ctx;
-  }
-};
-var Easing_default = Easing;
-
-// src/elements/State.tsx
-var State = class {
-  constructor() {
-    this.store = /* @__PURE__ */ new Map();
-  }
-  set(key, value, callback) {
-    this.store.set(key, value);
-    callback?.(key, value);
-  }
-  get(key, callback) {
-    const value = this.store.get(key);
-    callback?.(key, value);
-    return value;
-  }
-  has(key) {
-    return this.store.has(key);
-  }
-  delete(key, callback) {
-    this.store.delete(key);
-    callback?.(key);
-  }
-  log() {
-    return this.store;
-  }
-};
-var State_default = State;
-
-// src/elements/Vector.tsx
-var Vector = class _Vector {
-  /**
-   * Creates a new Vector
-   * @param x - X-coordinate (default: 0)
-   * @param y - Y-coordinate (default: 0)
-   */
-  constructor(x = 0, y = 0) {
-    this.x = x;
-    this.y = y;
-  }
-  /**
-   * Adds another vector to this vector
-   * @param v - Vector to add
-   * @returns This vector after addition
-   */
-  add(v) {
-    this.x += v.x;
-    this.y += v.y;
-    return this;
-  }
-  /**
-   * Subtracts another vector from this vector
-   * @param v - Vector to subtract
-   * @returns This vector after subtraction
-   */
-  sub(v) {
-    this.x -= v.x;
-    this.y -= v.y;
-    return this;
-  }
-  /**
-   * Multiplies this vector by a scalar
-   * @param n - Scalar to multiply by
-   * @returns This vector after multiplication
-   */
-  mult(n) {
-    this.x *= n;
-    this.y *= n;
-    return this;
-  }
-  /**
-   * Divides this vector by a scalar
-   * @param n - Scalar to divide by
-   * @returns This vector after division
-   */
-  div(n) {
-    this.x /= n;
-    this.y /= n;
-    return this;
-  }
-  // to do : project, perp, slerp
-  /**
-   * Rotates this vector by an angle
-   * @param angle - Angle in radians
-   * @returns This vector after rotation
-   */
-  rotate(angle) {
-    const cos = Math.cos(angle);
-    const sin = Math.sin(angle);
-    const x = this.x * cos - this.y * sin;
-    const y = this.x * sin + this.y * cos;
-    this.x = x;
-    this.y = y;
-    return this;
-  }
-  /**
-   * Calculates the magnitude (length) of this vector
-   * @returns The magnitude of the vector
-   */
-  mag() {
-    return Math.sqrt(this.x * this.x + this.y * this.y);
-  }
-  /**
-   * Alias for mag() - calculates the length of this vector
-   * @returns The length of the vector
-   */
-  length() {
-    return this.mag();
-  }
-  /**
-   * Calculates the dot product of this vector with another vector
-   * @param v - The other vector
-   * @returns The dot product
-   */
-  dot(v) {
-    return this.x * v.x + this.y * v.y;
-  }
-  /**
-   * Calculates the distance between this vector and another vector
-   * @param v - The other vector
-   * @returns The distance between the vectors
-   */
-  dist(v) {
-    return Math.hypot(this.x - v.x, this.y - v.y);
-  }
-  /**
-   * Calculates the angle of this vector
-   * @returns The angle in radians
-   */
-  angle() {
-    return Math.atan2(-this.x, -this.y) + Math.PI;
-  }
-  /**
-   * Creates a copy of this vector
-   * @returns A new Vector with the same coordinates
-   */
-  copy() {
-    return new _Vector(this.x, this.y);
-  }
-  /**
-   * Normalizes this vector (sets its magnitude to 1)
-   * @returns This vector after normalization
-   */
-  normalize() {
-    const m = this.mag();
-    return m !== 0 ? this.div(m) : this;
-  }
-  /**
-   * Sets the coordinates of this vector
-   * @param x - New X-coordinate
-   * @param y - New Y-coordinate
-   * @returns This vector after setting coordinates
-   */
-  set(x, y) {
-    this.x = x;
-    this.y = y;
-    return this;
-  }
-  /**
-   * Creates a new vector at a specified angle and distance from a center point
-   * @param center - The center point vector
-   * @param a - The angle in radians
-   * @param r - The radius (distance from center)
-   * @returns A new Vector at the calculated position
-   */
-  static fromAngle(center, a, r) {
-    const x = Math.cos(a) * r + center.x;
-    const y = Math.sin(a) * r + center.y;
-    return new _Vector(x, y);
-  }
-};
-var Vector_default = Vector;
-
-// src/elements/Time.tsx
-var Time = class {
-  constructor(ctx) {
-    this.timelines = /* @__PURE__ */ new Map();
-    this.currentTimeline = "default";
-    this.DEFAULT_DURATION = 8 * 60;
-    this.staggers = [];
-    this.context = ctx;
-    this.timelines.set("default", {
-      progress: 0,
-      duration: this.DEFAULT_DURATION
-    });
-  }
-  timeline(key) {
-    if (!this.timelines.has(key)) {
-      this.timelines.set(key, { progress: 0, duration: this.DEFAULT_DURATION });
-    }
-    this.currentTimeline = key;
-    return this;
-  }
-  use(progress) {
-    const timeline = this.timelines.get(this.currentTimeline);
-    if (timeline.duration <= 0) {
-      timeline.progress = 0;
-      return this;
-    }
-    timeline.progress = timeline.duration === 1 ? Math.min(progress, 1) : progress / timeline.duration % 1;
-    return this;
-  }
-  for(duration) {
-    const timeline = this.timelines.get(this.currentTimeline);
-    timeline.duration = duration;
-    return this;
-  }
-  stagger(num, offset = 0, callback) {
-    const timeline = this.timelines.get(this.currentTimeline);
-    const totalduration = this.context.remap(
-      timeline.progress,
-      0,
-      1,
-      0,
-      1 + offset
-    );
-    for (let i = 0; i < num; i++) {
-      const id = 1 - i / (num - 1);
-      const progress = this.context.constrain(
-        totalduration - id * offset,
-        0,
-        1
-      );
-      if (!callback) {
-        if (this.staggers[i]) {
-          this.staggers[i].progress = progress;
-        } else {
-          this.staggers[i] = { progress, id };
-        }
-      } else {
-        callback?.(progress, id, num);
-      }
-    }
-    return callback ? this : this.staggers;
-  }
-  between(from = 0, to = 1, callback) {
-    const timeline = this.timelines.get(this.currentTimeline);
-    const localProgress = this.context.remap(
-      timeline.progress,
-      Math.max(0, from),
-      Math.min(1, to),
-      0,
-      1
-    );
-    callback(localProgress);
-    return this;
-  }
-  progress() {
-    return this.timelines.get(this.currentTimeline)?.progress || 0;
-  }
-};
-var Time_default = Time;
-
-// src/elements/Text.tsx
-var Text = class {
-  constructor(ctx) {
-    this.findTextSize = (text, dist, estimate, direction = "x") => {
-      let low = 1;
-      let high = estimate || this.context.__textSize * 2;
-      let lastValidSize = low;
-      for (let i = 0; i < 16; i++) {
-        const mid = Math.floor((low + high) / 2);
-        this.context.__textSize = mid;
-        const bounds = this.textBounds(text);
-        const size = direction === "x" ? bounds.width : bounds.height;
-        if (size === dist) {
-          return mid;
-        } else if (size < dist) {
-          lastValidSize = mid;
-          low = mid + 1;
-        } else {
-          high = mid - 1;
-        }
-      }
-      return lastValidSize;
-    };
-    this.getTextMetrics = (text) => {
-      const ctx = this.context;
-      const metrics = ctx.measureText(text);
-      return {
-        width: metrics.width,
-        height: metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent,
-        baseline: metrics.actualBoundingBoxAscent
-      };
-    };
-    this.splitTo = (text, kind, options = {}) => {
-      const ctx = this.context;
-      const {
-        maxWidth = 0,
-        lineSpacing = 0,
-        letterSpacing = 0,
-        wordSpacing = 0
-      } = options;
-      ctx.computeFont();
-      if (maxWidth < this.textBounds(" ").width * 2 && maxWidth !== 0) {
-        return [];
-      }
-      const lines = text.split("\n");
-      const lineHeights = lines.map((line) => this.getTextMetrics(line).height);
-      const totalHeight = lineHeights.reduce((sum, height) => sum + height, 0) + (lines.length - 1) * (lineSpacing || 0);
-      let y = ctx.textBaseline === "middle" ? -totalHeight / 2 : 0;
-      return lines.flatMap((lineText, lineIndex) => {
-        const words = lineText.split(" ");
-        const currentLine = {
-          text: "",
-          width: 0,
-          letters: []
-        };
-        const totalWidth = this.getTextMetrics(lineText).width;
-        let startX = 0;
-        switch (ctx.textAlign) {
-          case "center":
-            startX = -totalWidth / 2;
-            break;
-          case "right":
-            startX = -totalWidth;
-            break;
-        }
-        let x = startX;
-        let letterIndex = 0;
-        let wordIndex = 0;
-        const lineLetters = words.flatMap((word) => {
-          const letters = [];
-          for (const char of word) {
-            const charMetrics = this.getTextMetrics(char);
-            x += charMetrics.width / 2;
-            const letterData = {
-              char,
-              x,
-              y: y + (ctx.textBaseline === "middle" ? lineHeights[lineIndex] / 2 : 0),
-              metrics: charMetrics,
-              ...kind === "all" && {
-                letterIndex,
-                wordIndex,
-                lineIndex
-              }
-            };
-            letters.push(letterData);
-            currentLine.text += char;
-            x += charMetrics.width / 2 + letterSpacing;
-            letterIndex++;
-          }
-          if (wordIndex < words.length - 1) {
-            const spaceMetrics = this.getTextMetrics(" ");
-            x += spaceMetrics.width + wordSpacing;
-            letters.push({
-              char: " ",
-              x,
-              y,
-              metrics: spaceMetrics,
-              ...kind === "all" && {
-                letterIndex,
-                wordIndex,
-                lineIndex
-              }
-            });
-            currentLine.text += " ";
-            letterIndex++;
-          }
-          wordIndex++;
-          return letters;
-        });
-        const lineHeight = lineHeights[lineIndex];
-        y += lineHeight + lineSpacing;
-        return lineLetters;
-      });
-    };
-    this.circularText = (text, radius = 100, fill = "fill", offset = 0, arc = Math.PI * 2) => {
-      const totalAngle = Math.min(Math.max(arc, 0), Math.PI * 2);
-      if (fill === "fill") {
-        const chars = text.split("");
-        const anglePerChar = totalAngle / (chars.length + 1);
-        chars.forEach((char, i) => {
-          const angle = anglePerChar * i + offset;
-          const x = Math.cos(angle) * radius;
-          const y = Math.sin(angle) * radius;
-          this.context.push();
-          this.context.textAlign = "center";
-          this.context.translate(x, y);
-          this.context.rotate(angle + Math.PI / 2);
-          this.context.text(char, 0, 0);
-          this.context.pop();
-        });
-      } else if (fill === "kerned") {
-        let currentAngle = offset;
-        text.split("").forEach((char) => {
-          const charWidth = this.textBounds(char).width;
-          currentAngle += charWidth / radius * 0.5;
-          const angle = currentAngle;
-          const x = Math.cos(angle) * radius;
-          const y = Math.sin(angle) * radius;
-          this.context.push();
-          this.context.textAlign = "center";
-          this.context.translate(x, y);
-          this.context.rotate(angle + Math.PI / 2);
-          this.context.text(char, 0, 0);
-          this.context.pop();
-          currentAngle += charWidth / radius * 0.5;
-        });
-      } else if (fill === "words") {
-        const words = text.split(" ");
-        const wordMetrics = words.map((word) => ({
-          word,
-          width: this.textBounds(word).width
-        }));
-        const spaceCount = words.length;
-        const totalWordWidth = wordMetrics.reduce((sum, m) => sum + m.width, 0);
-        const spaceAngle = (totalAngle - totalWordWidth / radius) / spaceCount;
-        let currentAngle = offset;
-        wordMetrics.forEach(({ word }, i) => {
-          word.split("").forEach((char) => {
-            const charWidth = this.textBounds(char).width;
-            currentAngle += charWidth / radius * 0.5;
-            const x = Math.cos(currentAngle) * radius;
-            const y = Math.sin(currentAngle) * radius;
-            this.context.push();
-            this.context.textAlign = "center";
-            this.context.translate(x, y);
-            this.context.rotate(currentAngle + Math.PI / 2);
-            this.context.text(char, 0, 0);
-            this.context.pop();
-            currentAngle += charWidth / radius * 0.5;
-          });
-          if (i < words.length - 1) {
-            currentAngle += spaceAngle;
-          }
-        });
-      }
-    };
-    this.textBounds = (text) => {
-      if (this.context.font !== this.context.__computedTextFont) {
-        this.context.font = this.context.__computedTextFont;
-      }
-      const metrics = this.context.measureText(text);
-      return {
-        x: metrics.actualBoundingBoxLeft * -1,
-        y: metrics.actualBoundingBoxAscent * -1,
-        width: metrics.width,
-        height: metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent
-      };
-    };
-    this.log = () => {
-      console.log(this.context);
-    };
-    this.context = ctx;
-  }
-};
-var Text_default = Text;
-
-// src/elements/Thing.tsx
-var Thing = class {
-  constructor(ctx) {
-    this.context = ctx;
-  }
-  log() {
-    console.log(this.context);
-  }
-};
-var Thing_default = Thing;
-export {
-  Color_default as Color,
-  Easing_default as Easing,
-  State_default as State,
-  Text_default as Text,
-  Thing_default as Thing,
-  Time_default as Time,
-  Vector_default as Vector
-};