@rogieking/figui3 11.2.2 → 11.3.1

package/fig-editor.js

@@ -6443,7 +6443,7 @@ class FigReorder extends HTMLElement {
     "fig-input-gradient",
     "fig-easing-curve",
     "fig-angle",
-    "fig-input-audio",
+    "fig-audio-waveform",
     "fig-input-wheel",
     "fig-joystick",
     "fig-origin-grid",

package/fig-lab.css

@@ -217,121 +217,6 @@ fig-chat-message {
   }
 }
 
-fig-input-audio {
-  --fig-input-audio-waveform-fade: 1rem;
-  --fig-input-audio-waveform-opacity: 0.5;
-  --fig-input-audio-waveform-opacity-min: 0.1;
-  --fig-input-audio-waveform-stroke-width: 1.5px;
-
-  position: relative;
-  display: inline-flex;
-  box-sizing: border-box;
-  max-width: 100%;
-
-  &[full]:not([full="false"]) {
-    width: 100%;
-  }
-
-  .fig-input-audio-waveform {
-    display: none;
-  }
-
-  &[data-has-audio] {
-    width: 18rem;
-    height: var(--control-height);
-    border-radius: var(--radius-medium);
-    background-color: var(--figma-color-bg-secondary);
-
-    &[full]:not([full="false"]) {
-      width: 100%;
-    }
-
-    .fig-input-audio-waveform {
-      position: absolute;
-      inset: 0;
-      display: block;
-      overflow: hidden;
-      border-radius: inherit;
-      color: var(--figma-color-icon-secondary);
-      pointer-events: none;
-    }
-
-    .fig-input-audio-waveform > svg {
-      display: block;
-      width: calc(100% - var(--spacer-3));
-      height: 100%;
-      margin-inline: var(--spacer-2);
-      overflow: visible;
-      mask-image: linear-gradient(
-        to right,
-        rgb(0 0 0 / var(--fig-input-audio-waveform-opacity-min)) 0,
-        rgb(0 0 0 / var(--fig-input-audio-waveform-opacity))
-          var(--fig-input-audio-waveform-fade),
-        rgb(0 0 0 / var(--fig-input-audio-waveform-opacity))
-          calc(100% - var(--fig-input-audio-waveform-fade)),
-        rgb(0 0 0 / var(--fig-input-audio-waveform-opacity-min)) 100%
-      );
-    }
-
-    .fig-input-audio-waveform path {
-      fill: currentColor;
-      stroke: none;
-    }
-
-    .fig-input-audio-file {
-      position: absolute;
-      inset: 0;
-      z-index: 1;
-      display: flex;
-      width: 100%;
-      height: 100%;
-    }
-
-    .fig-input-audio-file > fig-tooltip:has(.fig-input-file-filename) {
-      width: 100%;
-      height: 100%;
-    }
-
-    .fig-input-audio-file .fig-input-file-filename {
-      width: 100%;
-      height: 100%;
-      opacity: 0;
-    }
-
-    .fig-input-audio-file .fig-input-file-clear {
-      visibility: hidden;
-      pointer-events: none;
-    }
-
-    &:hover .fig-input-file-clear,
-    &:focus-within .fig-input-file-clear {
-      visibility: visible;
-      pointer-events: auto;
-    }
-
-    &:hover .fig-input-file-clear {
-      background-color: var(--figma-color-bg-secondary);
-    }
-
-    &:has(.fig-input-audio-file input[type="file"]:focus-visible)
-      .fig-input-audio-waveform,
-    &:has(.fig-input-file-clear:focus) .fig-input-audio-waveform {
-      outline: var(--figma-focus-outline);
-      outline-offset: var(--figma-focus-outline-offset);
-    }
-
-    &:has(.fig-input-audio-file[dragover]) .fig-input-audio-waveform {
-      outline: 1px dashed var(--figma-color-border-brand);
-      outline-offset: -1px;
-    }
-  }
-
-  &[disabled]:not([disabled="false"]) {
-    pointer-events: none;
-    opacity: 0.5;
-  }
-}
-
 fig-input-wheel {
   --fig-input-wheel-handle-drag-max: 0.5rem;
   --fig-input-wheel-handle-drag-offset: 0px;

package/fig-lab.js

@@ -289,374 +289,6 @@ class FigAttachments extends HTMLElement {
 }
 figLabDefineElement("fig-attachments", FigAttachments);
 
-/**
- * Audio file input with a responsive waveform preview.
- *
- * @attr {string} url - Audio URL to preview when CORS permits.
- * @attr {string} filename - Display filename for URL-backed audio.
- * @attr {string} label - Empty-state upload label. Defaults to "Upload audio".
- * @attr {string} accepts - Accepted file types. Defaults to "audio/*".
- * @attr {string} variant - Forwarded fig-input-file button variant.
- * @attr {boolean|string} disabled - Disables upload, replacement, and removal.
- * @attr {boolean|string} full - Makes the input fill its container.
- * @fires input - Composed file input event.
- * @fires change - Composed file change event.
- */
-class FigInputAudio extends HTMLElement {
-  static observedAttributes = [
-    "url",
-    "filename",
-    "label",
-    "accepts",
-    "variant",
-    "disabled",
-    "full",
-  ];
-
-  #fileInput = null;
-  #surface = null;
-  #svg = null;
-  #waveformPath = null;
-  #resizeObserver = null;
-  #abortController = null;
-  #audioContext = null;
-  #peaks = [];
-  #generation = 0;
-  #layoutFrame = 0;
-
-  get files() {
-    return this.#fileInput?.files ?? null;
-  }
-
-  get value() {
-    return this.#fileInput?.value ?? "";
-  }
-
-  connectedCallback() {
-    if (!this.#fileInput) this.#render();
-    this.#observeWaveform();
-    this.#syncAttributes();
-    this.#syncSource();
-  }
-
-  disconnectedCallback() {
-    this.#cancelDecode();
-    this.#resizeObserver?.disconnect();
-    this.#resizeObserver = null;
-    if (this.#layoutFrame) cancelAnimationFrame(this.#layoutFrame);
-    this.#layoutFrame = 0;
-  }
-
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (oldValue === newValue || !this.#fileInput) return;
-    this.#syncAttributes();
-    if (name === "url") this.#syncSource();
-  }
-
-  clear() {
-    this.removeAttribute("url");
-    this.removeAttribute("filename");
-    this.#fileInput?.clear();
-  }
-
-  #render() {
-    this.#surface = document.createElement("div");
-    this.#surface.className = "fig-input-audio-waveform";
-    this.#surface.setAttribute("aria-hidden", "true");
-
-    this.#svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-    this.#svg.setAttribute("aria-hidden", "true");
-    this.#svg.setAttribute("preserveAspectRatio", "none");
-    this.#waveformPath = document.createElementNS(
-      "http://www.w3.org/2000/svg",
-      "path",
-    );
-    this.#svg.appendChild(this.#waveformPath);
-    this.#surface.appendChild(this.#svg);
-
-    this.#fileInput = document.createElement("fig-input-file");
-    this.#fileInput.className = "fig-input-audio-file";
-    this.#fileInput.addEventListener("input", this.#onFileEvent);
-    this.#fileInput.addEventListener("change", this.#onFileEvent);
-
-    this.replaceChildren(this.#surface, this.#fileInput);
-
-    this.#observeWaveform();
-  }
-
-  #observeWaveform() {
-    if (this.#resizeObserver || !this.#svg) return;
-    this.#resizeObserver = new ResizeObserver(() => this.#queueWaveformLayout());
-    this.#resizeObserver.observe(this.#svg);
-  }
-
-  #syncAttributes() {
-    const forwarded = ["url", "filename", "variant"];
-    for (const name of forwarded) {
-      const value = this.getAttribute(name);
-      if (value === null) this.#fileInput.removeAttribute(name);
-      else this.#fileInput.setAttribute(name, value);
-    }
-
-    this.#fileInput.setAttribute("accepts", this.getAttribute("accepts") || "audio/*");
-    this.#fileInput.setAttribute("label", this.getAttribute("label") || "Upload audio");
-    this.#toggleBooleanAttribute(this.#fileInput, "disabled", this.#isDisabled());
-    this.#toggleBooleanAttribute(this.#fileInput, "full", this.#isTruthyAttribute("full"));
-    this.#syncInteractiveLabels();
-    this.#syncLoadedState();
-  }
-
-  #toggleBooleanAttribute(element, name, enabled) {
-    if (enabled) element.setAttribute(name, "");
-    else element.removeAttribute(name);
-  }
-
-  #isTruthyAttribute(name) {
-    return this.hasAttribute(name) && this.getAttribute(name) !== "false";
-  }
-
-  #isDisabled() {
-    return this.#isTruthyAttribute("disabled");
-  }
-
-  #syncLoadedState() {
-    const hasAudio =
-      (this.#fileInput?.files && this.#fileInput.files.length > 0) ||
-      !!this.getAttribute("url");
-    this.toggleAttribute("data-has-audio", hasAudio);
-    this.#syncInteractiveLabels();
-  }
-
-  #syncInteractiveLabels() {
-    const nativeInput = this.#fileInput?.querySelector('input[type="file"]');
-    if (nativeInput) {
-      nativeInput.setAttribute(
-        "aria-label",
-        this.hasAttribute("data-has-audio") ? "Replace audio" : "Upload audio",
-      );
-    }
-    const clearButton = this.#fileInput?.querySelector(".fig-input-file-clear");
-    clearButton?.setAttribute("aria-label", "Remove audio");
-  }
-
-  #onFileEvent = (event) => {
-    event.stopPropagation();
-    if (event.target !== this.#fileInput) return;
-    const detail = event.detail || { files: this.#fileInput.files };
-
-    if (event.type === "input") {
-      const file = this.#fileInput.files?.[0] || null;
-      if (file) {
-        const replacedUrl = this.hasAttribute("url");
-        if (replacedUrl) this.removeAttribute("url");
-        this.#syncLoadedState();
-        if (!replacedUrl) this.#decodeSource(() => file.arrayBuffer());
-      } else {
-        if (detail.cleared) {
-          this.removeAttribute("url");
-          this.removeAttribute("filename");
-        }
-        this.#clearWaveform();
-        this.#syncLoadedState();
-      }
-      this.#syncInteractiveLabels();
-    }
-
-    this.dispatchEvent(
-      new CustomEvent(event.type, {
-        bubbles: true,
-        composed: true,
-        detail,
-      }),
-    );
-  };
-
-  #syncSource() {
-    const file = this.#fileInput?.files?.[0];
-    if (file) {
-      this.#syncLoadedState();
-      this.#decodeSource(() => file.arrayBuffer());
-      return;
-    }
-
-    const url = this.getAttribute("url");
-    this.#syncLoadedState();
-    if (!url) {
-      this.#clearWaveform();
-      return;
-    }
-
-    this.#decodeSource(async (signal) => {
-      const response = await fetch(url, { signal });
-      if (!response.ok) throw new Error(`Audio request failed: ${response.status}`);
-      return response.arrayBuffer();
-    });
-  }
-
-  async #decodeSource(loadArrayBuffer) {
-    this.#cancelDecode();
-    const generation = ++this.#generation;
-    const controller = new AbortController();
-    this.#abortController = controller;
-    this.setAttribute("data-waveform-state", "loading");
-    this.setAttribute("aria-busy", "true");
-    this.#peaks = [];
-    this.#queueWaveformLayout();
-
-    let context = null;
-    try {
-      const arrayBuffer = await loadArrayBuffer(controller.signal);
-      if (generation !== this.#generation || !this.isConnected) return;
-
-      const AudioContextConstructor =
-        window.AudioContext || window.webkitAudioContext;
-      if (!AudioContextConstructor) throw new Error("Web Audio is unavailable");
-      context = new AudioContextConstructor();
-      this.#audioContext = context;
-      const audioBuffer = await context.decodeAudioData(arrayBuffer);
-      if (generation !== this.#generation || !this.isConnected) return;
-
-      this.#peaks = this.#extractPeaks(audioBuffer);
-      this.setAttribute("data-waveform-state", "ready");
-      this.#queueWaveformLayout();
-    } catch (error) {
-      if (generation !== this.#generation || error?.name === "AbortError") return;
-      this.#peaks = new Array(256).fill(0);
-      this.setAttribute("data-waveform-state", "unavailable");
-      this.#queueWaveformLayout();
-    } finally {
-      if (context) {
-        try {
-          await context.close();
-        } catch {
-          // Closing is best-effort in browsers with suspended audio contexts.
-        }
-      }
-      if (this.#audioContext === context) this.#audioContext = null;
-      if (this.#abortController === controller) this.#abortController = null;
-      if (generation === this.#generation) this.removeAttribute("aria-busy");
-    }
-  }
-
-  #extractPeaks(audioBuffer) {
-    const binCount = 256;
-    const peaks = new Array(binCount).fill(0);
-    const channelCount = audioBuffer.numberOfChannels;
-    const frameCount = audioBuffer.length;
-    const sampleStride = Math.max(1, Math.ceil(frameCount / 500000));
-    let maximum = 0;
-
-    for (let channel = 0; channel < channelCount; channel += 1) {
-      const samples = audioBuffer.getChannelData(channel);
-      for (let bin = 0; bin < binCount; bin += 1) {
-        const start = Math.floor((bin / binCount) * frameCount);
-        const end = Math.max(start + 1, Math.floor(((bin + 1) / binCount) * frameCount));
-        let peak = peaks[bin];
-        for (let index = start; index < end; index += sampleStride) {
-          const magnitude = Math.abs(samples[index] || 0);
-          if (Number.isFinite(magnitude)) peak = Math.max(peak, magnitude);
-        }
-        peaks[bin] = peak;
-        maximum = Math.max(maximum, peak);
-      }
-    }
-
-    if (!Number.isFinite(maximum) || maximum <= 0) return peaks.fill(0);
-    return peaks.map((peak) => {
-      const normalized = Math.sqrt(peak / maximum);
-      return Number.isFinite(normalized) ? normalized : 0;
-    });
-  }
-
-  #clearWaveform() {
-    this.#cancelDecode();
-    this.#peaks = [];
-    this.removeAttribute("data-waveform-state");
-    this.removeAttribute("aria-busy");
-    this.#queueWaveformLayout();
-  }
-
-  #cancelDecode() {
-    this.#generation += 1;
-    this.#abortController?.abort();
-    this.#abortController = null;
-    if (this.#audioContext) {
-      try {
-        this.#audioContext.close();
-      } catch {
-        // Closing is best-effort during teardown and source replacement.
-      }
-      this.#audioContext = null;
-    }
-  }
-
-  #queueWaveformLayout() {
-    if (this.#layoutFrame) return;
-    this.#layoutFrame = requestAnimationFrame(() => {
-      this.#layoutFrame = 0;
-      this.#layoutWaveform();
-    });
-  }
-
-  #layoutWaveform() {
-    if (!this.#svg || !this.#waveformPath) return;
-    const bounds = this.#svg.getBoundingClientRect();
-    const width = Math.max(1, Math.round(bounds.width));
-    const height = Math.max(1, Math.round(bounds.height));
-    this.#svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
-
-    if (this.#peaks.length === 0) {
-      this.#waveformPath.setAttribute("d", "");
-      return;
-    }
-
-    const barCount = Math.min(
-      this.#peaks.length,
-      Math.max(12, Math.floor(width / 4)),
-    );
-    const cellWidth = width / barCount;
-    const configuredStrokeWidth = Number.parseFloat(
-      getComputedStyle(this).getPropertyValue(
-        "--fig-input-audio-waveform-stroke-width",
-      ),
-    );
-    const strokeWidth =
-      Number.isFinite(configuredStrokeWidth) && configuredStrokeWidth > 0
-        ? configuredStrokeWidth
-        : 2;
-    const barWidth = Math.max(0.5, Math.min(strokeWidth, cellWidth * 0.75));
-    const halfWidth = barWidth / 2;
-    const centerY = height / 2;
-    const maxBarHeight = Math.max(2, height - 12);
-    const commands = [];
-
-    for (let index = 0; index < barCount; index += 1) {
-      const peakIndex = Math.min(
-        this.#peaks.length - 1,
-        Math.floor((index / barCount) * this.#peaks.length),
-      );
-      const barHeight = Math.max(barWidth, this.#peaks[peakIndex] * maxBarHeight);
-      const x = (index + 0.5) * cellWidth;
-      const top = centerY - barHeight / 2;
-      const bottom = centerY + barHeight / 2;
-      const left = x - halfWidth;
-      const right = x + halfWidth;
-      commands.push(
-        `M ${x} ${top}` +
-          ` Q ${right} ${top} ${right} ${top + halfWidth}` +
-          ` V ${bottom - halfWidth}` +
-          ` Q ${right} ${bottom} ${x} ${bottom}` +
-          ` Q ${left} ${bottom} ${left} ${bottom - halfWidth}` +
-          ` V ${top + halfWidth}` +
-          ` Q ${left} ${top} ${x} ${top} Z`,
-      );
-    }
-
-    this.#waveformPath.setAttribute("d", commands.join(" "));
-  }
-}
-figLabDefineElement("fig-input-audio", FigInputAudio);
-
 /**
  * Standalone interactive numeric wheel.
  *