@nuykon/basecoat-react 0.0.0-stage → 1.0.1

package/dist/private-core.js

@@ -0,0 +1,832 @@
+// src/chart.ts
+function attachCanvasChart(canvas, config) {
+  const doc = canvas.ownerDocument, win = doc.defaultView, ctx = canvas.getContext("2d");
+  if (!ctx) return () => {
+  };
+  const data = config.data ?? [], series = Object.entries(config.series ?? {}), labelKey = config.labelKey ?? "label";
+  const color = (value) => value.startsWith("var(") ? win.getComputedStyle(canvas).getPropertyValue(value.slice(4, -1)).trim() || "#888" : value;
+  const legend = doc.createElement("ul");
+  legend.className = "chart-legend";
+  if (config.legend) {
+    for (const [index, [key, options]] of series.entries()) {
+      const item = doc.createElement("li"), content = doc.createElement("span"), indicator = doc.createElement("span");
+      content.className = "chart-legend-item";
+      indicator.className = "chart-legend-indicator";
+      indicator.style.setProperty(
+        "--chart-indicator-color",
+        options.color ?? `var(--chart-${index + 1})`
+      );
+      content.append(indicator, doc.createTextNode(options.label ?? key));
+      item.append(content);
+      legend.append(item);
+    }
+    canvas.after(legend);
+  }
+  canvas.style.width = "100%";
+  canvas.style.aspectRatio = "16 / 9";
+  canvas.style.display = "block";
+  const draw = () => {
+    const width = Math.max(200, canvas.parentElement?.clientWidth ?? 400), height = width * 9 / 16, ratio = win.devicePixelRatio || 1;
+    canvas.width = Math.round(width * ratio);
+    canvas.height = Math.round(height * ratio);
+    canvas.style.height = `${height}px`;
+    ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
+    ctx.clearRect(0, 0, width, height);
+    const padding = { left: 30, top: 10, right: 10, bottom: 30 }, w = width - padding.left - padding.right, h = height - padding.top - padding.bottom;
+    const max = Math.max(
+      1,
+      ...data.map(
+        (row) => config.options?.scales?.y?.stacked ? series.reduce((sum, [key]) => sum + Number(row[key] ?? 0), 0) : Math.max(...series.map(([key]) => Number(row[key] ?? 0)))
+      )
+    );
+    const x = (index) => padding.left + index / Math.max(1, data.length - 1) * w, y = (value) => padding.top + h - value / max * h;
+    ctx.font = '12px "Geist Sans",system-ui';
+    ctx.fillStyle = color("var(--muted-foreground)");
+    ctx.strokeStyle = color("var(--border)");
+    ctx.lineWidth = 0.5;
+    if (config.type !== "doughnut" && config.type !== "radar") {
+      for (let index = 0; index <= 4; index++) {
+        const top = padding.top + index * h / 4;
+        ctx.beginPath();
+        ctx.moveTo(padding.left, top);
+        ctx.lineTo(width - padding.right, top);
+        ctx.stroke();
+        ctx.fillText(String(Math.round(max * (4 - index) / 4)), 0, top + 4);
+      }
+      for (let index = 0; index < data.length; index++)
+        if (index % Math.max(1, Math.ceil(data.length / 6)) === 0)
+          ctx.fillText(String(data[index][labelKey] ?? ""), x(index) - 10, height - 8);
+    }
+    if (config.type === "doughnut") {
+      const key = series[0]?.[0] ?? "value", values = data.map((row) => Number(row[key] ?? 0)), total = values.reduce((a, b) => a + b, 0) || 1, radius = Math.min(w, h) * 0.45, cx2 = width / 2, cy = height / 2;
+      let start = -Math.PI / 2;
+      values.forEach((value, index) => {
+        const end = start + value / total * Math.PI * 2;
+        ctx.beginPath();
+        ctx.arc(cx2, cy, radius, start, end);
+        ctx.arc(cx2, cy, radius * 0.62, end, start, true);
+        ctx.closePath();
+        ctx.fillStyle = color(`var(--chart-${index % 5 + 1})`);
+        ctx.fill();
+        start = end;
+      });
+    } else if (config.type === "radar") {
+      const radius = Math.min(w, h) * 0.4, cx2 = width / 2, cy = height / 2;
+      const point = (index, scale) => {
+        const angle = index / Math.max(1, data.length) * Math.PI * 2 - Math.PI / 2;
+        return [
+          cx2 + Math.cos(angle) * radius * scale,
+          cy + Math.sin(angle) * radius * scale
+        ];
+      };
+      for (let ring = 1; ring <= 4; ring++) {
+        ctx.beginPath();
+        data.forEach((_, i) => {
+          const [x2, y2] = point(i, ring / 4);
+          if (i === 0) ctx.moveTo(x2, y2);
+          else ctx.lineTo(x2, y2);
+        });
+        ctx.closePath();
+        ctx.stroke();
+      }
+      series.forEach(([key, options], index) => {
+        ctx.beginPath();
+        data.forEach((row, i) => {
+          const [x2, y2] = point(i, Number(row[key] ?? 0) / max);
+          if (i === 0) ctx.moveTo(x2, y2);
+          else ctx.lineTo(x2, y2);
+        });
+        ctx.closePath();
+        ctx.strokeStyle = color(options.color ?? `var(--chart-${index + 1})`);
+        ctx.stroke();
+        ctx.globalAlpha = 0.2;
+        ctx.fillStyle = ctx.strokeStyle;
+        ctx.fill();
+        ctx.globalAlpha = 1;
+      });
+      ctx.fillStyle = color("var(--muted-foreground)");
+      data.forEach((row, i) => {
+        const [x2, y2] = point(i, 1.15);
+        ctx.fillText(String(row[labelKey] ?? ""), x2 - 15, y2);
+      });
+    } else {
+      const stacks2 = data.map(() => 0);
+      series.forEach(([key, options], seriesIndex) => {
+        const fill = color(options.color ?? `var(--chart-${seriesIndex + 1})`);
+        ctx.strokeStyle = fill;
+        ctx.fillStyle = fill;
+        ctx.lineWidth = 1.5;
+        if (config.type === "bar")
+          data.forEach((row, index) => {
+            const value = Number(row[key] ?? 0), stacked = config.options?.scales?.y?.stacked, group = w / Math.max(1, data.length), barWidth = group * 0.65 / (stacked ? 1 : series.length), left = padding.left + index * group + group * 0.15 + (stacked ? 0 : seriesIndex * barWidth), base = stacks2[index];
+            ctx.beginPath();
+            ctx.roundRect(
+              left,
+              y(value + base),
+              Math.max(1, barWidth - 2),
+              Math.max(0, y(base) - y(value + base)),
+              3
+            );
+            ctx.fill();
+            if (stacked) stacks2[index] += value;
+          });
+        else {
+          ctx.beginPath();
+          data.forEach((row, index) => {
+            const top = y(Number(row[key] ?? 0));
+            if (index === 0) ctx.moveTo(x(index), top);
+            else if (options.dataset?.stepped) {
+              ctx.lineTo(x(index), y(Number(data[index - 1][key] ?? 0)));
+              ctx.lineTo(x(index), top);
+            } else ctx.lineTo(x(index), top);
+          });
+          ctx.stroke();
+          if (options.dataset?.fill || options.surface === "gradient") {
+            ctx.lineTo(x(data.length - 1), y(0));
+            ctx.lineTo(x(0), y(0));
+            ctx.closePath();
+            const gradient = ctx.createLinearGradient(0, 0, 0, height);
+            gradient.addColorStop(0, fill);
+            gradient.addColorStop(1, "transparent");
+            ctx.globalAlpha = 0.3;
+            ctx.fillStyle = gradient;
+            ctx.fill();
+            ctx.globalAlpha = 1;
+          }
+        }
+      });
+    }
+  };
+  const resize = new win.ResizeObserver(draw), themes = new win.MutationObserver(draw);
+  resize.observe(canvas.parentElement ?? canvas);
+  themes.observe(doc.documentElement, {
+    attributes: true,
+    attributeFilter: ["class", "data-style-variant"]
+  });
+  doc.addEventListener("basecoat:stylechange", draw);
+  draw();
+  return () => {
+    resize.disconnect();
+    themes.disconnect();
+    legend.remove();
+    doc.removeEventListener("basecoat:stylechange", draw);
+  };
+}
+
+// src/widgets.ts
+function attachWidget(root) {
+  const abort = new AbortController(), signal = abort.signal, cleanups = [];
+  const on = (element, name, fn) => element?.addEventListener(name, fn, { signal });
+  const emit = (detail) => root.dispatchEvent(new CustomEvent("basecoat:change", { bubbles: true, detail }));
+  if (root instanceof HTMLCanvasElement && root.dataset.chartConfig)
+    cleanups.push(attachCanvasChart(root, JSON.parse(root.dataset.chartConfig)));
+  if (root.classList.contains("sidebar")) {
+    const media = root.ownerDocument.defaultView.matchMedia("(min-width: 768px)");
+    root.dataset.sidebarInitialized = "true";
+    const set = (open) => root.setAttribute("aria-hidden", String(!open));
+    const toggle = () => set(root.getAttribute("aria-hidden") === "true");
+    const sidebar = root;
+    sidebar.toggle = toggle;
+    set(media.matches);
+    on(media, "change", () => set(media.matches));
+    on(root, "click", (event) => {
+      if (event.target === root && !media.matches) set(false);
+    });
+    on(root.ownerDocument, "keydown", (event) => {
+      if (event.key === "Escape" && !media.matches) set(false);
+    });
+    cleanups.push(() => {
+      delete sidebar.toggle;
+      delete root.dataset.sidebarInitialized;
+    });
+  }
+  if (root.classList.contains("toaster")) {
+    const timers = /* @__PURE__ */ new Set();
+    const toast = (message) => {
+      const item = root.ownerDocument.createElement("div");
+      item.className = "toast";
+      item.setAttribute("role", "status");
+      const content = root.ownerDocument.createElement("div");
+      content.className = "toast-content";
+      const section = root.ownerDocument.createElement("section"), heading = root.ownerDocument.createElement("h2");
+      heading.textContent = message.title ?? "";
+      section.append(heading);
+      if (message.description) {
+        const description = root.ownerDocument.createElement("p");
+        description.textContent = message.description;
+        section.append(description);
+      }
+      const footer = root.ownerDocument.createElement("footer"), close = root.ownerDocument.createElement("button");
+      close.type = "button";
+      close.className = "btn";
+      close.dataset.variant = "outline";
+      close.dataset.toastCancel = "";
+      close.textContent = message.cancel?.label ?? "Dismiss";
+      close.addEventListener("click", () => item.remove(), { signal });
+      footer.append(close);
+      if (message.action) {
+        const action = root.ownerDocument.createElement("button");
+        action.type = "button";
+        action.className = "btn";
+        action.textContent = message.action.label ?? "Action";
+        action.addEventListener(
+          "click",
+          () => {
+            message.action?.onclick?.();
+            item.remove();
+          },
+          { signal }
+        );
+        footer.append(action);
+      }
+      content.append(section, footer);
+      item.append(content);
+      root.append(item);
+      if ((message.duration ?? 5e3) > 0) {
+        const timer = setTimeout(() => {
+          item.remove();
+          timers.delete(timer);
+        }, message.duration ?? 5e3);
+        timers.add(timer);
+      }
+      return item;
+    };
+    root.toast = toast;
+    on(root, "click", (event) => {
+      const button = event.target.closest("[data-toast-cancel]");
+      button?.closest(".toast")?.remove();
+    });
+    cleanups.push(() => {
+      timers.forEach(clearTimeout);
+      delete root.toast;
+    });
+  }
+  if (root.classList.contains("tabs")) {
+    const tabs = [...root.querySelectorAll("[role=tab]")].filter(
+      (tab) => tab.closest(".tabs") === root
+    );
+    const set = (target) => {
+      if (target.disabled || target.getAttribute("aria-disabled") === "true") return;
+      for (const tab of tabs) {
+        const active = tab === target;
+        tab.setAttribute("aria-selected", String(active));
+        tab.tabIndex = active ? 0 : -1;
+        const panel = root.ownerDocument.getElementById(tab.getAttribute("aria-controls") ?? "");
+        if (panel) {
+          panel.hidden = !active;
+          panel.setAttribute("aria-selected", String(active));
+        }
+      }
+      emit(target.id);
+    };
+    for (const [index, tab] of tabs.entries()) {
+      on(tab, "click", () => set(tab));
+      on(tab, "keydown", (event) => {
+        const key = event.key, vertical = tab.parentElement?.getAttribute("aria-orientation") === "vertical";
+        if (!(vertical ? ["ArrowUp", "ArrowDown"] : ["ArrowLeft", "ArrowRight"]).includes(key) && !["Home", "End"].includes(key))
+          return;
+        event.preventDefault();
+        const target = tabs[nextIndex(
+          tabs.map((item) => ({
+            disabled: item.disabled || item.getAttribute("aria-disabled") === "true"
+          })),
+          index,
+          key
+        )];
+        target?.focus();
+        if (target) set(target);
+      });
+    }
+  }
+  if (root.classList.contains("accordion")) {
+    const summaries = [...root.querySelectorAll("summary")];
+    on(root, "keydown", (event) => {
+      const index = summaries.indexOf(event.target), key = event.key;
+      if (index >= 0 && ["ArrowUp", "ArrowDown", "Home", "End"].includes(key)) {
+        event.preventDefault();
+        summaries[nextIndex(
+          summaries.map((el) => ({ disabled: el.getAttribute("aria-disabled") === "true" })),
+          index,
+          key
+        )]?.focus();
+      }
+    });
+    on(root, "click", (event) => {
+      const summary = event.target.closest("summary");
+      if (summary?.getAttribute("aria-disabled") === "true" || summary?.parentElement?.getAttribute("aria-disabled") === "true")
+        event.preventDefault();
+    });
+  }
+  const kind = ["select", "combobox", "dropdown-menu", "popover"].find(
+    (kind2) => root.classList.contains(kind2)
+  );
+  if (kind) {
+    const trigger = root.querySelector(
+      ":scope > button, :scope > input[role=combobox], :scope > .input-group input[role=combobox]"
+    ), popup = root.querySelector(":scope > [data-popover]");
+    const search = root.querySelector(
+      "[data-popover] input, input[role=combobox]"
+    );
+    if (trigger && popup) {
+      let open = false, active = -1, disposePosition, disposeLayer;
+      const selector = kind === "dropdown-menu" ? "[role=menuitem], [role=menuitemcheckbox], [role=menuitemradio]" : "[role=option]";
+      const items = () => [...popup.querySelectorAll(selector)].filter(
+        (item) => !item.hidden && item.getAttribute("aria-hidden") !== "true"
+      );
+      const disabled = (item) => item.matches(":disabled") || item.getAttribute("aria-disabled") === "true";
+      const cursor = () => items().map((item) => ({
+        value: item.dataset.value ?? item.id,
+        label: item.textContent?.trim() ?? "",
+        disabled: disabled(item)
+      }));
+      const typeahead = createTypeahead();
+      const highlight = (index) => {
+        active = index;
+        const all = items();
+        for (const [i, item2] of all.entries()) {
+          item2.classList.toggle("active", i === index);
+          if (kind === "dropdown-menu") item2.tabIndex = i === index ? 0 : -1;
+        }
+        const item = all[index];
+        if (item) {
+          if (kind === "dropdown-menu") item.focus();
+          else {
+            const list = popup.querySelector("[role=listbox]");
+            if (list) {
+              list.setAttribute("aria-activedescendant", item.id);
+              scrollWithin(list, item);
+            }
+            search?.setAttribute("aria-activedescendant", item.id);
+          }
+        }
+      };
+      const close = (restore = false) => {
+        if (!open) return;
+        open = false;
+        disposeLayer?.();
+        disposePosition?.();
+        trigger.setAttribute("aria-expanded", "false");
+        popup.setAttribute("aria-hidden", "true");
+        popup.hidden = true;
+        if (restore) trigger.focus();
+      };
+      const show = (last = false) => {
+        if (open || disabled(trigger)) return;
+        open = true;
+        popup.hidden = false;
+        popup.setAttribute("aria-hidden", "false");
+        popup.setAttribute("popover", "manual");
+        popup.classList.add("bc-floating");
+        trigger.setAttribute("aria-expanded", "true");
+        disposePosition = attachFloating(trigger, popup, {
+          side: popup.dataset.side,
+          align: popup.dataset.align,
+          matchWidth: kind === "select" || kind === "combobox"
+        });
+        disposeLayer = dismissableLayer(root.ownerDocument, {
+          elements: () => [trigger, popup],
+          dismiss: (reason) => close(reason === "escape")
+        });
+        const list = popup.querySelector("[role=listbox],[role=menu]");
+        if (list) {
+          list.tabIndex = -1;
+          (search ?? list).focus();
+        }
+        if (kind === "popover") focusFirst(popup);
+        else highlight(nextIndex(cursor(), -1, last ? "End" : "Home"));
+      };
+      const choose = (item) => {
+        if (disabled(item)) return;
+        if (kind === "select" || kind === "combobox") {
+          const multiple = popup.querySelector("[aria-multiselectable=true]") !== null;
+          if (!multiple)
+            items().forEach(
+              (option) => option.setAttribute("aria-selected", String(option === item))
+            );
+          else
+            item.setAttribute(
+              "aria-selected",
+              String(item.getAttribute("aria-selected") !== "true")
+            );
+          const selected = items().filter(
+            (option) => option.getAttribute("aria-selected") === "true"
+          ), values = selected.map(
+            (option) => option.dataset.value ?? option.textContent?.trim() ?? ""
+          );
+          if (trigger instanceof HTMLInputElement) trigger.value = item.textContent?.trim() ?? "";
+          else {
+            const label = trigger.querySelector("span");
+            if (label)
+              label.textContent = selected.map((option) => option.textContent?.trim()).join(", ");
+          }
+          const hidden = root.querySelector("input[type=hidden]");
+          if (hidden) {
+            hidden.value = multiple ? JSON.stringify(values) : values[0] ?? "";
+            hidden.dispatchEvent(new Event("change", { bubbles: true }));
+          }
+          emit(multiple ? values : values[0]);
+          if (!multiple) close(true);
+        } else if (kind === "dropdown-menu") {
+          if (item.getAttribute("role") === "menuitemcheckbox") {
+            item.setAttribute("aria-checked", String(item.getAttribute("aria-checked") !== "true"));
+            emit(item.id);
+          } else close(true);
+        }
+      };
+      popup.hidden = popup.getAttribute("aria-hidden") !== "false";
+      on(trigger, "click", () => open ? close() : show());
+      on(trigger, "keydown", (event) => {
+        const key = event.key;
+        if (!open && ["ArrowDown", "ArrowUp", "Enter", " "].includes(key)) {
+          event.preventDefault();
+          show(key === "ArrowUp");
+        }
+      });
+      on(popup, "keydown", (event) => {
+        const keyboard = event;
+        if (["ArrowDown", "ArrowUp", "Home", "End"].includes(keyboard.key)) {
+          event.preventDefault();
+          highlight(nextIndex(cursor(), active, keyboard.key));
+        } else if (keyboard.key === "Enter" || !search && keyboard.key === " ") {
+          event.preventDefault();
+          const item = items()[active];
+          if (item) {
+            choose(item);
+            if (item instanceof HTMLAnchorElement) item.click();
+          }
+        } else if (keyboard.key === "Tab") close();
+        else if (!search && keyboard.key.length === 1 && !keyboard.ctrlKey && !keyboard.metaKey) {
+          event.preventDefault();
+          highlight(typeahead(keyboard.key, cursor(), active));
+        }
+      });
+      on(popup, "click", (event) => {
+        const item = event.target.closest(selector);
+        if (item) {
+          if (disabled(item)) event.preventDefault();
+          else choose(item);
+        }
+      });
+      on(popup, "pointermove", (event) => {
+        const pointer = event, item = event.target.closest(selector);
+        if (item && !disabled(item) && (pointer.movementX || pointer.movementY))
+          highlight(items().indexOf(item));
+      });
+      on(search, "input", () => {
+        for (const item of popup.querySelectorAll(selector)) {
+          const hidden = !item.textContent?.toLocaleLowerCase().includes(search.value.toLocaleLowerCase());
+          item.hidden = hidden;
+          item.setAttribute("aria-hidden", String(hidden));
+        }
+        if (!open) show();
+        highlight(nextIndex(cursor(), -1, "Home"));
+      });
+      cleanups.push(() => close());
+    }
+  }
+  if (root.classList.contains("command")) {
+    const input = root.querySelector("input"), list = root.querySelector("[role=menu],[role=listbox]");
+    let active = 0;
+    const items = () => [...list?.querySelectorAll("[role=menuitem],[role=option]") ?? []].filter(
+      (item) => !item.hidden
+    );
+    const refresh = () => {
+      const all = items();
+      all.forEach((item, index) => item.classList.toggle("active", index === active));
+      const current = all[active];
+      if (current) input?.setAttribute("aria-activedescendant", current.id);
+    };
+    on(input, "input", () => {
+      list?.querySelectorAll("[role=menuitem],[role=option]").forEach((item) => {
+        item.hidden = !item.textContent?.toLocaleLowerCase().includes(input.value.toLocaleLowerCase());
+        item.setAttribute("aria-hidden", String(item.hidden));
+      });
+      active = 0;
+      refresh();
+    });
+    on(input, "keydown", (event) => {
+      const key = event.key;
+      if (["ArrowUp", "ArrowDown", "Home", "End"].includes(key)) {
+        event.preventDefault();
+        active = nextIndex(
+          items().map((item) => ({ disabled: item.getAttribute("aria-disabled") === "true" })),
+          active,
+          key
+        );
+        refresh();
+      } else if (key === "Enter") {
+        event.preventDefault();
+        items()[active]?.click();
+      }
+    });
+    root.refresh = refresh;
+  }
+  if (root.matches("input[type=range]")) {
+    const range = root, update = () => range.style.setProperty(
+      "--slider-value",
+      `${percentage(range.valueAsNumber, Number(range.min || 0), Number(range.max || 100))}%`
+    );
+    on(range, "input", update);
+    update();
+  }
+  return () => {
+    abort.abort();
+    cleanups.forEach((cleanup) => cleanup());
+  };
+}
+
+// src/index.ts
+var stylePacks = [
+  "vega",
+  "nova",
+  "maia",
+  "lyra",
+  "mira",
+  "luma",
+  "sera",
+  "rhea"
+];
+function cx(...values) {
+  return values.filter(Boolean).join(" ");
+}
+function percentage(value, min = 0, max = 100) {
+  return Number.isFinite(value) && max > min ? Math.min(100, Math.max(0, (value - min) / (max - min) * 100)) : 0;
+}
+function nextIndex(items, current, key, loop = true) {
+  const enabled = items.map((item, index) => item.disabled ? -1 : index).filter((index) => index >= 0);
+  if (!enabled.length) return -1;
+  if (key === "Home") return enabled[0];
+  if (key === "End") return enabled[enabled.length - 1];
+  const direction = key === "ArrowUp" || key === "ArrowLeft" ? -1 : 1;
+  const position = enabled.indexOf(current);
+  if (position < 0) return direction < 0 ? enabled[enabled.length - 1] : enabled[0];
+  const next = position + direction;
+  return enabled[loop ? (next + enabled.length) % enabled.length : Math.min(enabled.length - 1, Math.max(0, next))];
+}
+function createTypeahead() {
+  let buffer = "", last = 0;
+  return (key, items, current) => {
+    const now = Date.now();
+    buffer = now - last > 700 ? key : buffer + key;
+    last = now;
+    const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+    for (let offset = 1; offset <= items.length; offset++) {
+      const index = (current + offset + items.length) % items.length;
+      if (!items[index].disabled && items[index].label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()))
+        return index;
+    }
+    return current;
+  };
+}
+var stacks = /* @__PURE__ */ new WeakMap();
+function dismissableLayer(doc, layer) {
+  let stack = stacks.get(doc);
+  if (!stack) {
+    const layers = [];
+    const pointer = (event) => {
+      const top = layers.at(-1);
+      if (top && !top.elements().some((el) => el && event.composedPath().includes(el)))
+        top.dismiss("outside");
+    };
+    const keyboard = (event) => {
+      if (event.key === "Escape" && !event.defaultPrevented && layers.length) {
+        event.preventDefault();
+        event.stopPropagation();
+        layers.at(-1)?.dismiss("escape");
+      }
+    };
+    doc.addEventListener("pointerdown", pointer, true);
+    doc.addEventListener("keydown", keyboard);
+    stack = {
+      layers,
+      dispose: () => {
+        doc.removeEventListener("pointerdown", pointer, true);
+        doc.removeEventListener("keydown", keyboard);
+      }
+    };
+    stacks.set(doc, stack);
+  }
+  stack.layers.push(layer);
+  return () => {
+    const index = stack.layers.indexOf(layer);
+    if (index >= 0) stack.layers.splice(index, 1);
+    if (!stack.layers.length) {
+      stack.dispose();
+      stacks.delete(doc);
+    }
+  };
+}
+function floatingPosition(anchor, popup, width, height, options = {}) {
+  let side = options.side ?? "bottom";
+  const align = options.align ?? "start", offset = options.offset ?? 6, padding = 8;
+  const available = {
+    bottom: height - anchor.bottom,
+    top: anchor.top,
+    right: width - anchor.right,
+    left: anchor.left
+  };
+  const opposite = {
+    top: "bottom",
+    bottom: "top",
+    left: "right",
+    right: "left"
+  };
+  const required = (side === "top" || side === "bottom" ? popup.height : popup.width) + offset + padding;
+  if (available[side] < required && available[opposite[side]] > available[side])
+    side = opposite[side];
+  const vertical = side === "top" || side === "bottom";
+  let x = vertical ? anchor.left : side === "left" ? anchor.left - popup.width - offset : anchor.right + offset;
+  let y = vertical ? side === "top" ? anchor.top - popup.height - offset : anchor.bottom + offset : anchor.top;
+  if (vertical)
+    x += align === "end" ? anchor.width - popup.width : align === "center" ? (anchor.width - popup.width) / 2 : 0;
+  else
+    y += align === "end" ? anchor.height - popup.height : align === "center" ? (anchor.height - popup.height) / 2 : 0;
+  return {
+    x: Math.max(padding, Math.min(x, width - popup.width - padding)),
+    y: Math.max(padding, Math.min(y, height - popup.height - padding)),
+    side,
+    maxHeight: Math.max(40, available[side] - offset - padding)
+  };
+}
+function attachFloating(anchor, popup, options = {}) {
+  const win = anchor.ownerDocument.defaultView;
+  if (typeof popup.showPopover === "function") popup.showPopover();
+  const update = () => {
+    const rect = anchor.getBoundingClientRect();
+    if (options.matchWidth) popup.style.minWidth = `${rect.width}px`;
+    const viewport = win.visualViewport;
+    const result = floatingPosition(
+      rect,
+      popup.getBoundingClientRect(),
+      viewport?.width ?? win.innerWidth,
+      viewport?.height ?? win.innerHeight,
+      options
+    );
+    Object.assign(popup.style, {
+      left: `${result.x + (viewport?.offsetLeft ?? 0)}px`,
+      top: `${result.y + (viewport?.offsetTop ?? 0)}px`,
+      maxHeight: `${result.maxHeight}px`
+    });
+    popup.dataset.side = result.side;
+  };
+  let frame = 0;
+  const schedule = () => {
+    win.cancelAnimationFrame(frame);
+    frame = win.requestAnimationFrame(update);
+  };
+  const observer = typeof win.ResizeObserver === "function" ? new win.ResizeObserver(schedule) : null;
+  observer?.observe(anchor);
+  observer?.observe(popup);
+  win.addEventListener("resize", schedule);
+  win.addEventListener("scroll", schedule, true);
+  win.visualViewport?.addEventListener("resize", schedule);
+  win.visualViewport?.addEventListener("scroll", schedule);
+  update();
+  return () => {
+    win.cancelAnimationFrame(frame);
+    observer?.disconnect();
+    win.removeEventListener("resize", schedule);
+    win.removeEventListener("scroll", schedule, true);
+    win.visualViewport?.removeEventListener("resize", schedule);
+    win.visualViewport?.removeEventListener("scroll", schedule);
+    if (typeof popup.hidePopover === "function" && popup.matches(":popover-open"))
+      popup.hidePopover();
+  };
+}
+var scrollLocks = /* @__PURE__ */ new WeakMap();
+function lockScroll(doc) {
+  const record = scrollLocks.get(doc) ?? { count: 0, overflow: doc.documentElement.style.overflow };
+  record.count++;
+  scrollLocks.set(doc, record);
+  doc.documentElement.style.overflow = "hidden";
+  let disposed = false;
+  return () => {
+    if (disposed) return;
+    disposed = true;
+    if (--record.count === 0) {
+      doc.documentElement.style.overflow = record.overflow;
+      scrollLocks.delete(doc);
+    }
+  };
+}
+function focusFirst(root) {
+  const target = root.querySelector(
+    '[autofocus],button:not(:disabled),[href],input:not(:disabled),select:not(:disabled),textarea:not(:disabled),[tabindex="0"]'
+  );
+  (target ?? root).focus({ preventScroll: true });
+}
+function scrollWithin(container, item) {
+  const parent = container.scrollHeight > container.clientHeight ? container : container.parentElement ?? container;
+  const outer = parent.getBoundingClientRect(), inner = item.getBoundingClientRect();
+  if (inner.top < outer.top) parent.scrollTop -= outer.top - inner.top;
+  else if (inner.bottom > outer.bottom) parent.scrollTop += inner.bottom - outer.bottom;
+}
+function formReset(element, reset) {
+  const form = element.closest("form");
+  let timer;
+  const listener = (event) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      if (!event.defaultPrevented) reset();
+    }, 0);
+  };
+  form?.addEventListener("reset", listener);
+  return () => {
+    clearTimeout(timer);
+    form?.removeEventListener("reset", listener);
+  };
+}
+var primitiveDefinitions = {
+  ChartRoot: ["canvas", "chart-canvas"],
+  SelectRoot: ["div", "select"],
+  ComboboxRoot: ["div", "combobox"],
+  DropdownMenuRoot: ["div", "dropdown-menu"],
+  PopoverRoot: ["div", "popover"],
+  TabsRoot: ["div", "tabs"],
+  AccordionRoot: ["div", "accordion"],
+  CommandRoot: ["div", "command"],
+  SidebarRoot: ["div", "sidebar"],
+  DialogRoot: ["dialog", "dialog"],
+  DrawerRoot: ["dialog", "drawer"],
+  AlertDialogRoot: ["dialog", "alert-dialog"],
+  Button: ["button", "btn"],
+  Badge: ["span", "badge"],
+  Card: ["article", "card"],
+  CardHeader: ["header", ""],
+  CardTitle: ["h3", "card-title"],
+  CardDescription: ["p", ""],
+  CardContent: ["section", ""],
+  CardFooter: ["footer", ""],
+  CardAction: ["div", "card-action"],
+  Alert: ["div", "alert"],
+  AlertTitle: ["h2", ""],
+  AlertDescription: ["section", ""],
+  Avatar: ["span", "avatar"],
+  AvatarImage: ["img", ""],
+  AvatarFallback: ["span", ""],
+  Breadcrumb: ["nav", "breadcrumb"],
+  BreadcrumbList: ["ol", ""],
+  BreadcrumbItem: ["li", ""],
+  BreadcrumbLink: ["a", ""],
+  BreadcrumbSeparator: ["li", ""],
+  ButtonGroup: ["div", "button-group"],
+  Field: ["div", "field"],
+  FieldLabel: ["label", "label"],
+  FieldDescription: ["p", ""],
+  FieldError: ["p", ""],
+  Label: ["label", "label"],
+  Input: ["input", "input"],
+  Textarea: ["textarea", "textarea"],
+  NativeSelect: ["select", "select"],
+  InputGroup: ["div", "input-group"],
+  InputGroupAddon: ["div", ""],
+  Empty: ["div", "empty"],
+  EmptyHeader: ["header", ""],
+  EmptyTitle: ["h3", ""],
+  EmptyDescription: ["p", ""],
+  EmptyContent: ["section", ""],
+  Item: ["div", "item"],
+  ItemContent: ["section", ""],
+  ItemTitle: ["h3", ""],
+  ItemDescription: ["p", ""],
+  ItemActions: ["div", ""],
+  Kbd: ["kbd", "kbd"],
+  ScrollArea: ["div", "scrollbar"],
+  Skeleton: ["div", "skeleton"],
+  Spinner: ["span", "bc-spinner"],
+  Separator: ["hr", ""],
+  Table: ["table", "table"],
+  TableHeader: ["thead", ""],
+  TableBody: ["tbody", ""],
+  TableFooter: ["tfoot", ""],
+  TableRow: ["tr", ""],
+  TableHead: ["th", ""],
+  TableCell: ["td", ""],
+  TableCaption: ["caption", ""],
+  DialogHeader: ["header", ""],
+  DialogTitle: ["h2", ""],
+  DialogDescription: ["p", ""],
+  DialogContent: ["section", ""],
+  DialogFooter: ["footer", ""],
+  SidebarHeader: ["header", ""],
+  SidebarContent: ["section", ""],
+  SidebarFooter: ["footer", ""],
+  SidebarGroup: ["section", ""],
+  SidebarItem: ["a", ""]
+};
+export {
+  attachFloating,
+  attachWidget,
+  createTypeahead,
+  cx,
+  dismissableLayer,
+  floatingPosition,
+  focusFirst,
+  formReset,
+  lockScroll,
+  nextIndex,
+  percentage,
+  primitiveDefinitions,
+  scrollWithin,
+  stylePacks
+};