fancy-ui-react 0.2.0

package/dist/components/editorial-engine/engine.js

@@ -0,0 +1,558 @@
+"use client";
+import { prepareWithSegments, walkLineRanges, layoutWithLines, layoutNextLine } from "@chenglou/pretext";
+const MIN_SLOT_WIDTH = 50;
+function carveTextLineSlots(base, blocked) {
+  let slots = [base];
+  for (const interval of blocked) {
+    const next = [];
+    for (const slot of slots) {
+      if (interval.right <= slot.left || interval.left >= slot.right) {
+        next.push(slot);
+        continue;
+      }
+      if (interval.left > slot.left) next.push({ left: slot.left, right: interval.left });
+      if (interval.right < slot.right) next.push({ left: interval.right, right: slot.right });
+    }
+    slots = next;
+  }
+  return slots.filter((slot) => slot.right - slot.left >= MIN_SLOT_WIDTH);
+}
+function circleIntervalForBand(cx, cy, r, bandTop, bandBottom, hPad, vPad) {
+  const top = bandTop - vPad;
+  const bottom = bandBottom + vPad;
+  if (top >= cy + r || bottom <= cy - r) return null;
+  const minDy = cy >= top && cy <= bottom ? 0 : cy < top ? top - cy : cy - bottom;
+  if (minDy >= r) return null;
+  const maxDx = Math.sqrt(r * r - minDy * minDy);
+  return { left: cx - maxDx - hPad, right: cx + maxDx + hPad };
+}
+function layoutColumn(prepared, startCursor, regionX, regionY, regionW, regionH, lineHeight, circleObstacles, rectObstacles, singleSlotOnly) {
+  let cursor = startCursor;
+  let lineTop = regionY;
+  const lines = [];
+  let textExhausted = false;
+  while (lineTop + lineHeight <= regionY + regionH && !textExhausted) {
+    const bandTop = lineTop;
+    const bandBottom = lineTop + lineHeight;
+    const blocked = [];
+    for (const obstacle of circleObstacles) {
+      const interval = circleIntervalForBand(
+        obstacle.cx,
+        obstacle.cy,
+        obstacle.r,
+        bandTop,
+        bandBottom,
+        obstacle.hPad,
+        obstacle.vPad
+      );
+      if (interval !== null) blocked.push(interval);
+    }
+    for (const rect of rectObstacles) {
+      if (bandBottom <= rect.y || bandTop >= rect.y + rect.h) continue;
+      blocked.push({ left: rect.x, right: rect.x + rect.w });
+    }
+    const slots = carveTextLineSlots({ left: regionX, right: regionX + regionW }, blocked);
+    if (slots.length === 0) {
+      lineTop += lineHeight;
+      continue;
+    }
+    const orderedSlots = singleSlotOnly ? [
+      slots.reduce(
+        (best, slot) => slot.right - slot.left > best.right - best.left ? slot : best
+      )
+    ] : [...slots].sort((a, b) => a.left - b.left);
+    for (const slot of orderedSlots) {
+      const line = layoutNextLine(prepared, cursor, slot.right - slot.left);
+      if (line === null) {
+        textExhausted = true;
+        break;
+      }
+      lines.push({
+        x: Math.round(slot.left),
+        y: Math.round(lineTop),
+        text: line.text,
+        width: line.width
+      });
+      cursor = line.end;
+    }
+    lineTop += lineHeight;
+  }
+  return { lines, cursor };
+}
+const ORB_DEFS = [
+  { fx: 0.52, fy: 0.22, r: 110, vx: 24, vy: 16, color: [196, 163, 90] },
+  { fx: 0.18, fy: 0.48, r: 85, vx: -19, vy: 26, color: [100, 140, 255] },
+  { fx: 0.74, fy: 0.58, r: 95, vx: 16, vy: -21, color: [232, 100, 130] },
+  { fx: 0.38, fy: 0.72, r: 75, vx: -26, vy: -14, color: [80, 200, 140] },
+  { fx: 0.86, fy: 0.18, r: 65, vx: -13, vy: 19, color: [150, 100, 220] }
+];
+const BODY_FONT_SIZE = 18;
+const BODY_LINE_HEIGHT = 30;
+const GUTTER = 48;
+const COL_GAP = 40;
+const BOTTOM_GAP = 20;
+const DROP_CAP_LINES = 3;
+const PQ_LINE_HEIGHT = 27;
+const NARROW_BREAKPOINT = 760;
+const NARROW_GUTTER = 20;
+const NARROW_COL_GAP = 20;
+const NARROW_BOTTOM_GAP = 16;
+const NARROW_ORB_SCALE = 0.58;
+const NARROW_ACTIVE_ORBS = 3;
+function hitTestOrbs(orbs, px, py, activeCount, radiusScale) {
+  for (let index = activeCount - 1; index >= 0; index--) {
+    const orb = orbs[index];
+    const radius = orb.r * radiusScale;
+    const dx = px - orb.x;
+    const dy = py - orb.y;
+    if (dx * dx + dy * dy <= radius * radius) return index;
+  }
+  return -1;
+}
+function positionedLinesEqual(a, b) {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (a[i].x !== b[i].x || a[i].y !== b[i].y || a[i].text !== b[i].text) return false;
+  }
+  return true;
+}
+function createEditorialEngine(stage, options) {
+  const { headline, body, pullquotes, fontFamily } = options;
+  const bodyFont = `${BODY_FONT_SIZE}px ${fontFamily}`;
+  const pullquoteFont = `italic 19px ${fontFamily}`;
+  let destroyed = false;
+  let stageW = stage.clientWidth;
+  let stageH = stage.clientHeight;
+  const bodyLinePool = [];
+  const headlinePool = [];
+  const pullquoteLinePool = [];
+  const pullquoteBoxPool = [];
+  function syncPool(pool, count, create) {
+    while (pool.length < count) {
+      const element = create();
+      stage.appendChild(element);
+      pool.push(element);
+    }
+    for (let index = 0; index < pool.length; index++) {
+      pool[index].style.display = index < count ? "" : "none";
+    }
+  }
+  function makeLineEl(className) {
+    const element = document.createElement("span");
+    element.className = className;
+    element.setAttribute("aria-hidden", "true");
+    return element;
+  }
+  const orbEls = ORB_DEFS.map((def) => {
+    const element = document.createElement("div");
+    element.className = "ee-orb";
+    element.setAttribute("aria-hidden", "true");
+    const [r, g, b] = def.color;
+    element.style.background = `radial-gradient(circle at 35% 35%, rgba(${r},${g},${b},0.35), rgba(${r},${g},${b},0.12) 55%, transparent 72%)`;
+    element.style.boxShadow = `0 0 60px 15px rgba(${r},${g},${b},0.18), 0 0 120px 40px rgba(${r},${g},${b},0.07)`;
+    stage.appendChild(element);
+    return element;
+  });
+  const dropCapEl = document.createElement("div");
+  dropCapEl.className = "ee-drop-cap";
+  dropCapEl.setAttribute("aria-hidden", "true");
+  stage.appendChild(dropCapEl);
+  const preparedBody = prepareWithSegments(body, bodyFont, { whiteSpace: "pre-wrap" });
+  const preparedPullquotes = pullquotes.map((text) => prepareWithSegments(text, pullquoteFont));
+  const pullquoteSpecs = [
+    { prepared: preparedPullquotes[0], colIdx: 0, yFrac: 0.48, wFrac: 0.52, side: "right" },
+    { prepared: preparedPullquotes[1], colIdx: 1, yFrac: 0.32, wFrac: 0.5, side: "left" }
+  ].filter((spec) => spec.prepared !== void 0);
+  const DROP_CAP_SIZE = BODY_LINE_HEIGHT * DROP_CAP_LINES - 4;
+  const dropCapFont = `700 ${DROP_CAP_SIZE}px ${fontFamily}`;
+  const dropCapText = body.length > 0 ? body[0] : "";
+  let dropCapTotalW = 0;
+  if (dropCapText !== "") {
+    const preparedDropCap = prepareWithSegments(dropCapText, dropCapFont);
+    let dropCapWidth = 0;
+    walkLineRanges(preparedDropCap, 9999, (line) => {
+      dropCapWidth = line.width;
+    });
+    dropCapTotalW = Math.ceil(dropCapWidth) + 10;
+    dropCapEl.textContent = dropCapText;
+    dropCapEl.style.font = dropCapFont;
+    dropCapEl.style.lineHeight = `${DROP_CAP_SIZE}px`;
+  } else {
+    dropCapEl.style.display = "none";
+  }
+  let cachedKey = "";
+  let cachedFit = { fontSize: 24, lines: [] };
+  function fitHeadline(maxWidth, maxHeight, maxSize) {
+    const key = `${maxWidth}|${maxHeight}|${maxSize}`;
+    if (key === cachedKey) return cachedFit;
+    let lo = 20;
+    let hi = maxSize;
+    let best = lo;
+    let bestLines = [];
+    while (lo <= hi) {
+      const size = Math.floor((lo + hi) / 2);
+      const lineHeight = Math.round(size * 0.93);
+      const prepared = prepareWithSegments(headline, `700 ${size}px ${fontFamily}`);
+      let breaksWord = false;
+      let lineCount = 0;
+      walkLineRanges(prepared, maxWidth, (line) => {
+        lineCount++;
+        if (line.end.graphemeIndex !== 0) breaksWord = true;
+      });
+      if (!breaksWord && lineCount * lineHeight <= maxHeight) {
+        best = size;
+        bestLines = layoutWithLines(prepared, maxWidth, lineHeight).lines.map((line, i) => ({
+          x: 0,
+          y: i * lineHeight,
+          text: line.text,
+          width: line.width
+        }));
+        lo = size + 1;
+      } else {
+        hi = size - 1;
+      }
+    }
+    if (bestLines.length === 0 && headline.length > 0) {
+      best = 20;
+      const lineHeight = Math.round(best * 0.93);
+      const prepared = prepareWithSegments(headline, `700 ${best}px ${fontFamily}`);
+      bestLines = layoutWithLines(prepared, maxWidth, lineHeight).lines.map((line, i) => ({
+        x: 0,
+        y: i * lineHeight,
+        text: line.text,
+        width: line.width
+      }));
+    }
+    cachedKey = key;
+    cachedFit = { fontSize: best, lines: bestLines };
+    return cachedFit;
+  }
+  const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  const orbs = ORB_DEFS.map((def) => ({
+    x: def.fx * stageW,
+    y: def.fy * stageH,
+    r: def.r,
+    vx: def.vx,
+    vy: def.vy,
+    paused: reducedMotion
+  }));
+  let pointer = { x: -9999, y: -9999 };
+  let drag = null;
+  let selectionActive = false;
+  let lastFrameTime = null;
+  let committedLines = null;
+  function stagePoint(event) {
+    const rect = stage.getBoundingClientRect();
+    return { x: event.clientX - rect.left, y: event.clientY - rect.top };
+  }
+  let scheduledRaf = null;
+  function scheduleRender() {
+    if (scheduledRaf !== null || destroyed) return;
+    scheduledRaf = requestAnimationFrame((now) => {
+      scheduledRaf = null;
+      if (render(now)) scheduleRender();
+    });
+  }
+  function render(now) {
+    if (selectionActive && drag === null) return false;
+    const isNarrow = stageW < NARROW_BREAKPOINT;
+    const gutter = isNarrow ? NARROW_GUTTER : GUTTER;
+    const colGap = isNarrow ? NARROW_COL_GAP : COL_GAP;
+    const bottomGap = isNarrow ? NARROW_BOTTOM_GAP : BOTTOM_GAP;
+    const orbRadiusScale = isNarrow ? NARROW_ORB_SCALE : 1;
+    const activeOrbCount = isNarrow ? Math.min(NARROW_ACTIVE_ORBS, orbs.length) : orbs.length;
+    const dt = Math.min((now - (lastFrameTime ?? now)) / 1e3, 0.05);
+    const draggedOrbIndex = drag?.orbIndex ?? -1;
+    let stillAnimating = false;
+    for (let index = 0; index < activeOrbCount; index++) {
+      const orb = orbs[index];
+      const radius = orb.r * orbRadiusScale;
+      if (orb.paused || index === draggedOrbIndex) continue;
+      stillAnimating = true;
+      orb.x += orb.vx * dt;
+      orb.y += orb.vy * dt;
+      if (orb.x - radius < 0) {
+        orb.x = radius;
+        orb.vx = Math.abs(orb.vx);
+      }
+      if (orb.x + radius > stageW) {
+        orb.x = stageW - radius;
+        orb.vx = -Math.abs(orb.vx);
+      }
+      if (orb.y - radius < gutter * 0.5) {
+        orb.y = radius + gutter * 0.5;
+        orb.vy = Math.abs(orb.vy);
+      }
+      if (orb.y + radius > stageH - bottomGap) {
+        orb.y = stageH - bottomGap - radius;
+        orb.vy = -Math.abs(orb.vy);
+      }
+    }
+    for (let i = 0; i < activeOrbCount; i++) {
+      const a = orbs[i];
+      for (let j = i + 1; j < activeOrbCount; j++) {
+        const b = orbs[j];
+        const dx = b.x - a.x;
+        const dy = b.y - a.y;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        const minDist = a.r * orbRadiusScale + b.r * orbRadiusScale + (isNarrow ? 12 : 20);
+        if (dist >= minDist || dist <= 0.1) continue;
+        const force = (minDist - dist) * 0.8;
+        const nx = dx / dist;
+        const ny = dy / dist;
+        if (!a.paused && i !== draggedOrbIndex) {
+          a.vx -= nx * force * dt;
+          a.vy -= ny * force * dt;
+        }
+        if (!b.paused && j !== draggedOrbIndex) {
+          b.vx += nx * force * dt;
+          b.vy += ny * force * dt;
+        }
+      }
+    }
+    const circleObstacles = [];
+    for (let index = 0; index < activeOrbCount; index++) {
+      const orb = orbs[index];
+      circleObstacles.push({
+        cx: orb.x,
+        cy: orb.y,
+        r: orb.r * orbRadiusScale,
+        hPad: isNarrow ? 10 : 14,
+        vPad: isNarrow ? 2 : 4
+      });
+    }
+    const headlineWidth = Math.min(stageW - gutter * 2 - (isNarrow ? 12 : 0), 1e3);
+    const maxHeadlineHeight = Math.floor(stageH * (isNarrow ? 0.2 : 0.24));
+    const { fontSize: headlineSize, lines: headlineLines } = fitHeadline(
+      headlineWidth,
+      maxHeadlineHeight,
+      isNarrow ? 38 : 92
+    );
+    const headlineLineHeight = Math.round(headlineSize * 0.93);
+    const headlineFont = `700 ${headlineSize}px ${fontFamily}`;
+    const bodyTop = gutter + headlineLines.length * headlineLineHeight + (isNarrow ? 14 : 20);
+    const bodyHeight = stageH - bodyTop - bottomGap;
+    const columnCount = stageW > 1e3 ? 3 : stageW > 640 ? 2 : 1;
+    const totalGutter = gutter * 2 + colGap * (columnCount - 1);
+    const maxContentWidth = Math.min(stageW, 1500);
+    const columnWidth = Math.floor((maxContentWidth - totalGutter) / columnCount);
+    const contentLeft = Math.round(
+      (stageW - (columnCount * columnWidth + (columnCount - 1) * colGap)) / 2
+    );
+    const dropCapRect = {
+      x: contentLeft - 2,
+      y: bodyTop - 2,
+      w: dropCapTotalW,
+      h: DROP_CAP_LINES * BODY_LINE_HEIGHT + 2
+    };
+    const pullquoteRects = [];
+    if (!isNarrow) {
+      for (const spec of pullquoteSpecs) {
+        if (spec.colIdx >= columnCount) continue;
+        const pqWidth = Math.round(columnWidth * spec.wFrac);
+        const pqLines = layoutWithLines(spec.prepared, pqWidth - 20, PQ_LINE_HEIGHT).lines;
+        const pqHeight = pqLines.length * PQ_LINE_HEIGHT + 16;
+        const columnX = contentLeft + spec.colIdx * (columnWidth + colGap);
+        const pqX = spec.side === "right" ? columnX + columnWidth - pqWidth : columnX;
+        const pqY = Math.round(bodyTop + bodyHeight * spec.yFrac);
+        pullquoteRects.push({
+          x: pqX,
+          y: pqY,
+          w: pqWidth,
+          h: pqHeight,
+          colIdx: spec.colIdx,
+          lines: pqLines.map((line, lineIndex) => ({
+            x: pqX + 20,
+            y: pqY + 8 + lineIndex * PQ_LINE_HEIGHT,
+            text: line.text,
+            width: line.width
+          }))
+        });
+      }
+    }
+    const allBodyLines = [];
+    let cursor = { segmentIndex: 0, graphemeIndex: dropCapText === "" ? 0 : 1 };
+    for (let columnIndex = 0; columnIndex < columnCount; columnIndex++) {
+      const columnX = contentLeft + columnIndex * (columnWidth + colGap);
+      const rects = [];
+      if (columnIndex === 0 && dropCapTotalW > 0) rects.push(dropCapRect);
+      for (const pq of pullquoteRects) {
+        if (pq.colIdx === columnIndex) rects.push(pq);
+      }
+      const result = layoutColumn(
+        preparedBody,
+        cursor,
+        columnX,
+        bodyTop,
+        columnWidth,
+        bodyHeight,
+        BODY_LINE_HEIGHT,
+        circleObstacles,
+        rects,
+        isNarrow
+      );
+      allBodyLines.push(...result.lines);
+      cursor = result.cursor;
+    }
+    const pullquoteLines = pullquoteRects.flatMap((pq) => pq.lines);
+    const changed = committedLines === null || committedLines.headlineFont !== headlineFont || !positionedLinesEqual(committedLines.headline, headlineLines) || !positionedLinesEqual(committedLines.body, allBodyLines) || !positionedLinesEqual(committedLines.pullquote, pullquoteLines);
+    if (changed) {
+      syncPool(headlinePool, headlineLines.length, () => makeLineEl("ee-headline-line"));
+      for (let i = 0; i < headlineLines.length; i++) {
+        const el = headlinePool[i];
+        const line = headlineLines[i];
+        el.textContent = line.text;
+        el.style.left = `${gutter + line.x}px`;
+        el.style.top = `${gutter + line.y}px`;
+        el.style.font = headlineFont;
+        el.style.lineHeight = `${headlineLineHeight}px`;
+      }
+      syncPool(bodyLinePool, allBodyLines.length, () => makeLineEl("ee-line"));
+      for (let i = 0; i < allBodyLines.length; i++) {
+        const el = bodyLinePool[i];
+        const line = allBodyLines[i];
+        el.textContent = line.text;
+        el.style.left = `${line.x}px`;
+        el.style.top = `${line.y}px`;
+        el.style.font = bodyFont;
+        el.style.lineHeight = `${BODY_LINE_HEIGHT}px`;
+      }
+      syncPool(pullquoteLinePool, pullquoteLines.length, () => makeLineEl("ee-pullquote-line"));
+      for (let i = 0; i < pullquoteLines.length; i++) {
+        const el = pullquoteLinePool[i];
+        const line = pullquoteLines[i];
+        el.textContent = line.text;
+        el.style.left = `${line.x}px`;
+        el.style.top = `${line.y}px`;
+        el.style.font = pullquoteFont;
+        el.style.lineHeight = `${PQ_LINE_HEIGHT}px`;
+      }
+      committedLines = {
+        headline: headlineLines,
+        body: allBodyLines,
+        pullquote: pullquoteLines,
+        headlineFont
+      };
+    }
+    dropCapEl.style.left = `${contentLeft}px`;
+    dropCapEl.style.top = `${bodyTop}px`;
+    syncPool(pullquoteBoxPool, pullquoteRects.length, () => {
+      const element = document.createElement("div");
+      element.className = "ee-pullquote-box";
+      element.setAttribute("aria-hidden", "true");
+      return element;
+    });
+    for (let i = 0; i < pullquoteRects.length; i++) {
+      const pq = pullquoteRects[i];
+      const el = pullquoteBoxPool[i];
+      el.style.left = `${pq.x}px`;
+      el.style.top = `${pq.y}px`;
+      el.style.width = `${pq.w}px`;
+      el.style.height = `${pq.h}px`;
+    }
+    for (let index = 0; index < orbs.length; index++) {
+      const orb = orbs[index];
+      const element = orbEls[index];
+      if (index >= activeOrbCount) {
+        element.style.display = "none";
+        continue;
+      }
+      const radius = orb.r * orbRadiusScale;
+      element.style.display = "";
+      element.style.left = `${orb.x - radius}px`;
+      element.style.top = `${orb.y - radius}px`;
+      element.style.width = `${radius * 2}px`;
+      element.style.height = `${radius * 2}px`;
+      element.style.opacity = orb.paused ? "0.45" : "1";
+    }
+    const hoveredOrbIndex = hitTestOrbs(orbs, pointer.x, pointer.y, activeOrbCount, orbRadiusScale);
+    stage.style.cursor = drag !== null ? "grabbing" : hoveredOrbIndex !== -1 ? "grab" : "";
+    lastFrameTime = stillAnimating ? now : null;
+    return stillAnimating;
+  }
+  function onPointerDown(event) {
+    const point = stagePoint(event);
+    const isNarrow = stageW < NARROW_BREAKPOINT;
+    const activeOrbCount = isNarrow ? NARROW_ACTIVE_ORBS : orbs.length;
+    const radiusScale = isNarrow ? NARROW_ORB_SCALE : 1;
+    const orbIndex = hitTestOrbs(orbs, point.x, point.y, activeOrbCount, radiusScale);
+    if (orbIndex !== -1) {
+      event.preventDefault();
+      const orb = orbs[orbIndex];
+      drag = {
+        orbIndex,
+        startPointerX: point.x,
+        startPointerY: point.y,
+        startOrbX: orb.x,
+        startOrbY: orb.y
+      };
+    }
+    pointer = point;
+    scheduleRender();
+  }
+  function onPointerMove(event) {
+    const point = stagePoint(event);
+    pointer = point;
+    if (drag !== null) {
+      const orb = orbs[drag.orbIndex];
+      orb.x = drag.startOrbX + (point.x - drag.startPointerX);
+      orb.y = drag.startOrbY + (point.y - drag.startPointerY);
+    }
+    scheduleRender();
+  }
+  function onPointerUp(event) {
+    const point = stagePoint(event);
+    pointer = point;
+    if (drag !== null) {
+      const dx = point.x - drag.startPointerX;
+      const dy = point.y - drag.startPointerY;
+      if (dx * dx + dy * dy < 16) {
+        orbs[drag.orbIndex].paused = !orbs[drag.orbIndex].paused;
+      }
+      drag = null;
+    }
+    scheduleRender();
+  }
+  function onSelectionChange() {
+    const selection = window.getSelection();
+    selectionActive = selection !== null && !selection.isCollapsed && selection.rangeCount > 0;
+    scheduleRender();
+  }
+  stage.addEventListener("pointerdown", onPointerDown);
+  window.addEventListener("pointermove", onPointerMove);
+  window.addEventListener("pointerup", onPointerUp);
+  window.addEventListener("pointercancel", onPointerUp);
+  document.addEventListener("selectionchange", onSelectionChange);
+  const resizeObserver = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      stageW = entry.contentRect.width;
+      stageH = entry.contentRect.height;
+    }
+    scheduleRender();
+  });
+  resizeObserver.observe(stage);
+  scheduleRender();
+  return () => {
+    destroyed = true;
+    if (scheduledRaf !== null) cancelAnimationFrame(scheduledRaf);
+    resizeObserver.disconnect();
+    stage.removeEventListener("pointerdown", onPointerDown);
+    window.removeEventListener("pointermove", onPointerMove);
+    window.removeEventListener("pointerup", onPointerUp);
+    window.removeEventListener("pointercancel", onPointerUp);
+    document.removeEventListener("selectionchange", onSelectionChange);
+    for (const element of [
+      ...bodyLinePool,
+      ...headlinePool,
+      ...pullquoteLinePool,
+      ...pullquoteBoxPool,
+      ...orbEls,
+      dropCapEl
+    ]) {
+      element.remove();
+    }
+  };
+}
+export {
+  createEditorialEngine
+};

package/dist/components/editorial-engine/index.d.ts

@@ -0,0 +1,2 @@
+export { EditorialEngine } from "./EditorialEngine.js";
+export type { EditorialEngineProps } from "./EditorialEngine.js";

package/dist/components/file-upload/FileUpload.d.ts

@@ -0,0 +1,63 @@
+/** One file FileUpload is tracking — selected, uploading, or settled. */
+export interface UploadFile {
+    /** Stable id for this row. Used as the row key — never the array index, since rows are removed from the middle. */
+    id: string;
+    /** The underlying browser File. */
+    file: File;
+    /** 0–100, or null when the consumer is not reporting progress. */
+    progress: number | null;
+    /** Lifecycle state. "error" covers both local validation failures (accept/maxSize/maxFiles) and upload failures the consumer reports back. */
+    status: "pending" | "uploading" | "done" | "error";
+    /** Message shown on the row and announced while status is "error". */
+    error?: string;
+}
+export interface FileUploadProps {
+    /**
+     * Selected files. Controlled when supplied: pair it with `onFilesChange`,
+     * the React counterpart of the Svelte source's `bind:files`.
+     */
+    files?: UploadFile[];
+    /** Initial files when uncontrolled (no `files` prop given). */
+    defaultFiles?: UploadFile[];
+    /** Called with the new list on every change — a selection, a drop, or a removal. */
+    onFilesChange?: (files: UploadFile[]) => void;
+    /** The input's native `accept` attribute (comma-separated extensions and/or MIME types/wildcards). Also enforced in JS: a dropped file never passes through the picker, so the browser's own filtering never sees it. */
+    accept?: string;
+    /** Allows more than one file per selection or drop. */
+    multiple?: boolean;
+    /** Maximum size per file, in bytes. A larger file is added to the list with status "error" rather than silently discarded. */
+    maxSize?: number;
+    /** Maximum number of files the list may hold. Files beyond the cap are rejected outright, not added as errors. */
+    maxFiles?: number;
+    /** Blocks selecting, dropping and removing files. Overridden by a surrounding FormField. */
+    disabled?: boolean;
+    /** Native `required` on the underlying input. Overridden by a surrounding FormField. */
+    required?: boolean;
+    /** Drives the error border and `aria-invalid`. Overridden by a surrounding FormField. */
+    invalid?: boolean;
+    /** Element id, applied to the underlying file input. Overridden by a surrounding FormField's own `controlId`. */
+    id?: string;
+    /** Native `name` on the underlying input. */
+    name?: string;
+    /** Accessible name — for a control with no visible Label next to it. Omit when a surrounding FormField already supplies one. */
+    label?: string;
+    /** Constraint text under the drop zone, e.g. "PNG, SVG — 4 MB max". Informational only; not itself enforced — pair it with matching `accept`/`maxSize` values. */
+    hint?: string;
+    /** Additional CSS classes. */
+    className?: string;
+    /**
+     * Plays the matching interface cue through the sound controller. Off by
+     * default; only audible once the user has enabled sound.
+     */
+    sound?: boolean;
+}
+/**
+ * A drop zone wrapped around a real, focusable `<input type="file">`, with a
+ * validated file list underneath — accept/maxSize/maxFiles enforced identically
+ * for the picker and the drop path, rejections announced through a live region,
+ * and rows that enter and leave through the shared motion presets.
+ *
+ * The element reference arrives through the ref channel (the Svelte source
+ * declares `ref = $bindable(null)`), pointing at the native file input.
+ */
+export declare const FileUpload: import("react").ForwardRefExoticComponent<FileUploadProps & import("react").RefAttributes<HTMLInputElement>>;