@fairfox/polly 0.24.0 → 0.25.0

package/dist/src/polly-ui/index.js

@@ -0,0 +1,953 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+function __accessProp(key) {
+  return this[key];
+}
+var __toESMCache_node;
+var __toESMCache_esm;
+var __toESM = (mod, isNodeMode, target) => {
+  var canCache = mod != null && typeof mod === "object";
+  if (canCache) {
+    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
+    var cached = cache.get(mod);
+    if (cached)
+      return cached;
+  }
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: __accessProp.bind(mod, key),
+        enumerable: true
+      });
+  if (canCache)
+    cache.set(mod, to);
+  return to;
+};
+var __toCommonJS = (from) => {
+  var entry = (__moduleCache ??= new WeakMap).get(from), desc;
+  if (entry)
+    return entry;
+  entry = __defProp({}, "__esModule", { value: true });
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (var key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(entry, key))
+        __defProp(entry, key, {
+          get: __accessProp.bind(from, key),
+          enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+        });
+  }
+  __moduleCache.set(from, entry);
+  return entry;
+};
+var __moduleCache;
+var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/polly-ui/ActionForm.module.css
+var ActionForm_module_default = {
+  form: "form_oqTahQ"
+};
+
+// src/polly-ui/ActionForm.tsx
+import { jsxDEV } from "preact/jsx-dev-runtime";
+function ActionForm(props) {
+  const { form, children, className, id } = props;
+  const combined = className ? `${ActionForm_module_default["form"]} ${className}` : ActionForm_module_default["form"];
+  return /* @__PURE__ */ jsxDEV("form", {
+    id,
+    class: combined,
+    "data-polly-ui": true,
+    "data-polly-action-form": form.name,
+    "data-action": `${form.name}:submit`,
+    "aria-busy": form.isSubmitting.value,
+    "aria-label": props["aria-label"],
+    "aria-labelledby": props["aria-labelledby"],
+    noValidate: true,
+    children
+  }, undefined, false, undefined, this);
+}
+// src/polly-ui/ActionInput.tsx
+import { useCallback, useEffect, useRef, useState } from "preact/hooks";
+
+// src/polly-ui/ActionInput.module.css
+var ActionInput_module_default = {
+  root: "root_-n6UrQ",
+  view: "view_-n6UrQ",
+  edit: "edit_-n6UrQ",
+  placeholder: "placeholder_-n6UrQ"
+};
+
+// src/polly-ui/ActionInput.tsx
+import { jsxDEV as jsxDEV2 } from "preact/jsx-dev-runtime";
+function ActionInput(props) {
+  const variant = props.variant ?? "single";
+  const saveOn = props.saveOn ?? "blur";
+  const [mode, setMode] = useState("view");
+  const [draft, setDraft] = useState(props.value);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (mode === "view")
+      setDraft(props.value);
+  }, [props.value, mode]);
+  useEffect(() => {
+    if (mode === "edit" && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select?.();
+    }
+  }, [mode]);
+  const enterEdit = useCallback(() => {
+    if (props.disabled)
+      return;
+    setDraft(props.value);
+    setMode("edit");
+  }, [props.disabled, props.value]);
+  const commit = useCallback((next) => {
+    if (next === props.value) {
+      setMode("view");
+      return;
+    }
+    const dataAttrs = {
+      ...props.actionData ?? {},
+      value: next
+    };
+    const hidden = document.createElement("button");
+    hidden.setAttribute("data-action", props.action);
+    for (const [key, value] of Object.entries(dataAttrs)) {
+      const dashKey = key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+      hidden.setAttribute(`data-action-${dashKey}`, value);
+    }
+    hidden.style.position = "fixed";
+    hidden.style.opacity = "0";
+    hidden.style.pointerEvents = "none";
+    hidden.tabIndex = -1;
+    document.body.appendChild(hidden);
+    try {
+      hidden.click();
+    } finally {
+      hidden.remove();
+    }
+    setMode("view");
+  }, [props.action, props.actionData, props.value]);
+  const cancel = useCallback(() => {
+    setDraft(props.value);
+    setMode("view");
+  }, [props.value]);
+  const onKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      cancel();
+      return;
+    }
+    if (event.key === "Enter") {
+      const cmd = event.metaKey || event.ctrlKey;
+      if (saveOn === "enter" && variant === "single") {
+        event.preventDefault();
+        commit(draft);
+      } else if (saveOn === "enter" && variant === "multi" && cmd || saveOn === "cmd-enter") {
+        if (cmd) {
+          event.preventDefault();
+          commit(draft);
+        }
+      }
+    }
+  };
+  const className = props.className ? `${ActionInput_module_default["root"]} ${props.className}` : ActionInput_module_default["root"];
+  if (mode === "view") {
+    const rendered = props.renderView ? props.renderView(props.value) : props.value;
+    const isEmpty = props.value.length === 0;
+    return /* @__PURE__ */ jsxDEV2("div", {
+      class: `${className} ${ActionInput_module_default["view"]}`,
+      "data-polly-ui": true,
+      "data-polly-action-input": true,
+      "data-polly-interactive": true,
+      "data-state": isEmpty ? "empty" : "filled",
+      "data-variant": variant,
+      tabIndex: props.disabled ? -1 : 0,
+      role: "button",
+      "aria-label": props.ariaLabel ?? "Edit",
+      "aria-disabled": props.disabled ? "true" : undefined,
+      onClick: enterEdit,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          enterEdit();
+        }
+      },
+      children: isEmpty && props.placeholder ? /* @__PURE__ */ jsxDEV2("span", {
+        class: ActionInput_module_default["placeholder"],
+        children: props.placeholder
+      }, undefined, false, undefined, this) : rendered
+    }, undefined, false, undefined, this);
+  }
+  const common = {
+    class: `${ActionInput_module_default["edit"]} ${ActionInput_module_default["root"]}`,
+    "data-polly-ui": true,
+    "data-polly-action-input": true,
+    "data-state": "editing",
+    "data-variant": variant,
+    placeholder: props.placeholder,
+    value: draft,
+    onInput: (e) => setDraft(e.currentTarget.value),
+    onBlur: () => {
+      if (saveOn === "blur")
+        commit(draft);
+      else
+        cancel();
+    },
+    onKeyDown,
+    "aria-label": props.ariaLabel ?? "Edit",
+    disabled: props.disabled
+  };
+  if (variant === "multi") {
+    return /* @__PURE__ */ jsxDEV2("textarea", {
+      ref: (el) => {
+        inputRef.current = el;
+      },
+      ...common
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV2("input", {
+    ref: (el) => {
+      inputRef.current = el;
+    },
+    type: "text",
+    ...common
+  }, undefined, false, undefined, this);
+}
+// src/polly-ui/ConfirmDialog.tsx
+import { signal as signal2 } from "@preact/signals";
+
+// src/polly-ui/ConfirmDialog.module.css
+var ConfirmDialog_module_default = {
+  actions: "actions_ZfTX4A",
+  cancel: "cancel_ZfTX4A",
+  confirm: "confirm_ZfTX4A",
+  confirmDanger: "confirmDanger_ZfTX4A"
+};
+
+// src/polly-ui/Modal.tsx
+import { createContext } from "preact";
+import { createPortal } from "preact/compat";
+import { useContext, useEffect as useEffect3, useId, useRef as useRef3, useState as useState2 } from "preact/hooks";
+
+// src/actions/overlay.ts
+import { signal } from "@preact/signals";
+var stack = signal([]);
+function overlayStack() {
+  return stack.value;
+}
+function hasOpenOverlay() {
+  return stack.value.length > 0;
+}
+function topOverlay() {
+  const s = stack.value;
+  return s[s.length - 1];
+}
+function pushOverlay(entry) {
+  stack.value = [...stack.value, entry];
+}
+function popOverlay(id) {
+  const s = stack.value;
+  if (s.length === 0)
+    return;
+  if (id === undefined) {
+    const top = s[s.length - 1];
+    stack.value = s.slice(0, -1);
+    return top;
+  }
+  const idx = s.findIndex((e) => e.id === id);
+  if (idx === -1)
+    return;
+  const entry = s[idx];
+  stack.value = [...s.slice(0, idx), ...s.slice(idx + 1)];
+  return entry;
+}
+function closeTopOverlay() {
+  const top = topOverlay();
+  if (!top)
+    return;
+  top.onClose?.();
+  return popOverlay(top.id);
+}
+function resetOverlayStack() {
+  stack.value = [];
+}
+
+// src/polly-ui/internal/focus-trap.ts
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "area[href]",
+  "button:not([disabled])",
+  "input:not([disabled]):not([type=hidden])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "iframe",
+  "object",
+  "embed",
+  '[tabindex]:not([tabindex="-1"])',
+  "[contenteditable]"
+].join(",");
+function getFocusable(root) {
+  const nodes = Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR));
+  return nodes.filter((el) => !el.hasAttribute("disabled") && el.getAttribute("aria-hidden") !== "true");
+}
+function installFocusTrap(root) {
+  const previousActive = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+  const focusable = getFocusable(root);
+  const first = focusable[0] ?? root;
+  if (!root.contains(document.activeElement)) {
+    first.focus();
+  }
+  function handleKeyDown(event) {
+    if (event.key !== "Tab")
+      return;
+    const items = getFocusable(root);
+    if (items.length === 0) {
+      event.preventDefault();
+      return;
+    }
+    const firstItem = items[0];
+    const lastItem = items[items.length - 1];
+    if (!firstItem || !lastItem)
+      return;
+    const active = document.activeElement;
+    if (event.shiftKey) {
+      if (active === firstItem || !root.contains(active)) {
+        event.preventDefault();
+        lastItem.focus();
+      }
+    } else if (active === lastItem) {
+      event.preventDefault();
+      firstItem.focus();
+    }
+  }
+  document.addEventListener("keydown", handleKeyDown);
+  return () => {
+    document.removeEventListener("keydown", handleKeyDown);
+    if (previousActive && document.contains(previousActive)) {
+      previousActive.focus();
+    }
+  };
+}
+
+// src/polly-ui/Modal.module.css
+var Modal_module_default = {
+  container: "container_fLMrWA",
+  backdrop: "backdrop_fLMrWA",
+  surface: "surface_fLMrWA",
+  header: "header_fLMrWA",
+  title: "title_fLMrWA",
+  body: "body_fLMrWA",
+  footer: "footer_fLMrWA",
+  close: "close_fLMrWA"
+};
+
+// src/polly-ui/OverlayRoot.tsx
+import { effect } from "@preact/signals";
+import { useEffect as useEffect2, useRef as useRef2 } from "preact/hooks";
+
+// src/polly-ui/internal/scroll-lock.ts
+var count = 0;
+function acquireScrollLock() {
+  if (count === 0) {
+    const html = document.documentElement;
+    const gutter = window.innerWidth - html.clientWidth;
+    html.style.setProperty("--polly-scrollbar-gutter", `${gutter}px`);
+    html.setAttribute("data-polly-scroll-locked", "true");
+  }
+  count += 1;
+  let released = false;
+  return () => {
+    if (released)
+      return;
+    released = true;
+    count -= 1;
+    if (count <= 0) {
+      count = 0;
+      const html = document.documentElement;
+      html.removeAttribute("data-polly-scroll-locked");
+      html.style.removeProperty("--polly-scrollbar-gutter");
+    }
+  };
+}
+
+// src/polly-ui/OverlayRoot.module.css
+var OverlayRoot_module_default = {
+  root: "root_CqRu1Q"
+};
+
+// src/polly-ui/OverlayRoot.tsx
+import { jsxDEV as jsxDEV3 } from "preact/jsx-dev-runtime";
+function OverlayRoot() {
+  const ref = useRef2(null);
+  useEffect2(() => {
+    let release = null;
+    const dispose = effect(() => {
+      if (hasOpenOverlay()) {
+        if (!release)
+          release = acquireScrollLock();
+      } else if (release) {
+        release();
+        release = null;
+      }
+    });
+    return () => {
+      dispose();
+      release?.();
+    };
+  }, []);
+  return /* @__PURE__ */ jsxDEV3("div", {
+    ref,
+    class: OverlayRoot_module_default["root"],
+    "data-polly-ui": true,
+    "data-polly-overlay-root": true
+  }, undefined, false, undefined, this);
+}
+function getOverlayRootNode() {
+  return document.querySelector("[data-polly-overlay-root]");
+}
+
+// src/polly-ui/Modal.tsx
+import { jsxDEV as jsxDEV4 } from "preact/jsx-dev-runtime";
+var Ctx = createContext(null);
+function useModal() {
+  const ctx = useContext(Ctx);
+  if (!ctx)
+    throw new Error("Modal sub-components must render inside <Modal.Root>");
+  return ctx;
+}
+function Root({ when, onClose, children, "aria-label": ariaLabel }) {
+  const id = useId();
+  const titleId = `${id}-title`;
+  const descId = `${id}-desc`;
+  const mountRef = useRef3(null);
+  const [portalNode, setPortalNode] = useState2(null);
+  const isOpen = typeof when === "boolean" ? when : when.value;
+  useEffect3(() => {
+    if (!isOpen) {
+      setPortalNode(null);
+      return;
+    }
+    setPortalNode(getOverlayRootNode());
+  }, [isOpen]);
+  useEffect3(() => {
+    if (!isOpen || !portalNode)
+      return;
+    const entry = { id, onClose };
+    pushOverlay(entry);
+    const el = mountRef.current;
+    const cleanup = el ? installFocusTrap(el) : () => {};
+    return () => {
+      cleanup();
+      popOverlay(id);
+    };
+  }, [isOpen, portalNode, id, onClose]);
+  if (!isOpen || !portalNode)
+    return null;
+  const close = () => {
+    onClose?.();
+  };
+  const ctx = { id, titleId, descId, close };
+  const content = /* @__PURE__ */ jsxDEV4(Ctx.Provider, {
+    value: ctx,
+    children: /* @__PURE__ */ jsxDEV4("div", {
+      ref: mountRef,
+      class: Modal_module_default["container"],
+      "data-polly-ui": true,
+      "data-polly-modal-content": true,
+      "data-overlay-id": id,
+      "data-state": "open",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": ariaLabel ? undefined : titleId,
+      "aria-label": ariaLabel,
+      "aria-describedby": descId,
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+  return createPortal(content, portalNode);
+}
+function Backdrop() {
+  const { close } = useModal();
+  return /* @__PURE__ */ jsxDEV4("div", {
+    class: Modal_module_default["backdrop"],
+    "data-polly-modal-backdrop": true,
+    onClick: close,
+    "aria-hidden": "true"
+  }, undefined, false, undefined, this);
+}
+function Content({ children }) {
+  return /* @__PURE__ */ jsxDEV4("div", {
+    class: Modal_module_default["surface"],
+    "data-polly-modal-surface": true,
+    children
+  }, undefined, false, undefined, this);
+}
+function Header({ children }) {
+  return /* @__PURE__ */ jsxDEV4("header", {
+    class: Modal_module_default["header"],
+    "data-polly-modal-header": true,
+    children
+  }, undefined, false, undefined, this);
+}
+function Title({ children }) {
+  const { titleId } = useModal();
+  return /* @__PURE__ */ jsxDEV4("h2", {
+    id: titleId,
+    class: Modal_module_default["title"],
+    "data-polly-modal-title": true,
+    children
+  }, undefined, false, undefined, this);
+}
+function Body({ children }) {
+  const { descId } = useModal();
+  return /* @__PURE__ */ jsxDEV4("div", {
+    id: descId,
+    class: Modal_module_default["body"],
+    "data-polly-modal-body": true,
+    children
+  }, undefined, false, undefined, this);
+}
+function Footer({ children }) {
+  return /* @__PURE__ */ jsxDEV4("footer", {
+    class: Modal_module_default["footer"],
+    "data-polly-modal-footer": true,
+    children
+  }, undefined, false, undefined, this);
+}
+function Close({ children, action }) {
+  const { close } = useModal();
+  if (action) {
+    return /* @__PURE__ */ jsxDEV4("button", {
+      type: "button",
+      class: Modal_module_default["close"],
+      "data-polly-ui": true,
+      "data-polly-interactive": true,
+      "data-polly-modal-close": true,
+      "data-action": action,
+      children
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV4("button", {
+    type: "button",
+    class: Modal_module_default["close"],
+    "data-polly-ui": true,
+    "data-polly-interactive": true,
+    "data-polly-modal-close": true,
+    onClick: close,
+    children
+  }, undefined, false, undefined, this);
+}
+var Modal = {
+  Root,
+  Backdrop,
+  Content,
+  Header,
+  Title,
+  Body,
+  Footer,
+  Close
+};
+
+// src/polly-ui/ConfirmDialog.tsx
+import { jsxDEV as jsxDEV5 } from "preact/jsx-dev-runtime";
+var pending = signal2(null);
+var isOpen = signal2(false);
+var nextId = 0;
+function confirm(options) {
+  return new Promise((resolve) => {
+    nextId += 1;
+    pending.value = {
+      id: nextId,
+      title: options.title,
+      body: options.body,
+      danger: options.danger,
+      confirmLabel: options.confirmLabel,
+      cancelLabel: options.cancelLabel,
+      resolve
+    };
+    isOpen.value = true;
+  });
+}
+function close(result) {
+  const current = pending.value;
+  if (!current)
+    return;
+  isOpen.value = false;
+  pending.value = null;
+  current.resolve(result);
+}
+function Host() {
+  const current = pending.value;
+  if (!current)
+    return null;
+  return /* @__PURE__ */ jsxDEV5(Modal.Root, {
+    when: isOpen,
+    onClose: () => close(false),
+    children: [
+      /* @__PURE__ */ jsxDEV5(Modal.Backdrop, {}, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV5(Modal.Content, {
+        children: [
+          /* @__PURE__ */ jsxDEV5(Modal.Header, {
+            children: /* @__PURE__ */ jsxDEV5(Modal.Title, {
+              children: current.title
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          current.body ? /* @__PURE__ */ jsxDEV5(Modal.Body, {
+            children: current.body
+          }, undefined, false, undefined, this) : null,
+          /* @__PURE__ */ jsxDEV5(Modal.Footer, {
+            children: /* @__PURE__ */ jsxDEV5("div", {
+              class: ConfirmDialog_module_default["actions"],
+              "data-polly-confirm-actions": true,
+              children: [
+                /* @__PURE__ */ jsxDEV5("button", {
+                  type: "button",
+                  class: ConfirmDialog_module_default["cancel"],
+                  "data-polly-ui": true,
+                  "data-polly-interactive": true,
+                  "data-polly-confirm-cancel": true,
+                  onClick: () => close(false),
+                  children: current.cancelLabel ?? "Cancel"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV5("button", {
+                  type: "button",
+                  class: current.danger ? ConfirmDialog_module_default["confirmDanger"] : ConfirmDialog_module_default["confirm"],
+                  "data-polly-ui": true,
+                  "data-polly-interactive": true,
+                  "data-polly-confirm-ok": true,
+                  onClick: () => close(true),
+                  children: current.confirmLabel ?? "OK"
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+var ConfirmDialog = { Host, confirm };
+// src/polly-ui/Layout.tsx
+import { createElement } from "preact";
+
+// src/polly-ui/Layout.module.css
+var Layout_module_default = {
+  layout: "layout_QgwWPg",
+  stackOnMobile: "stackOnMobile_QgwWPg"
+};
+
+// src/polly-ui/Layout.tsx
+function Layout(props) {
+  const {
+    children,
+    as = "div",
+    rows,
+    columns,
+    contents,
+    subgrid,
+    gap,
+    padding,
+    height,
+    minHeight,
+    justifyItems,
+    alignItems,
+    justifyContent,
+    alignContent,
+    justifySelf,
+    alignSelf,
+    autoFlow,
+    autoRows,
+    autoColumns,
+    stackOnMobile,
+    className,
+    onClick,
+    onKeyDown,
+    role,
+    tabIndex,
+    id
+  } = props;
+  const style = {};
+  if (contents) {
+    style["display"] = "contents";
+  } else if (subgrid) {
+    style["--l-col"] = "1 / -1";
+    style["--l-cols"] = "subgrid";
+    if (padding)
+      style["--l-p"] = padding;
+    if (alignItems)
+      style["--l-ai"] = alignItems;
+    if (gap)
+      style["--l-gap"] = gap;
+  } else {
+    if (padding)
+      style["--l-p"] = padding;
+    if (height)
+      style["--l-h"] = height;
+    if (minHeight)
+      style["--l-mh"] = minHeight;
+    if (rows)
+      style["--l-rows"] = rows;
+    if (columns)
+      style["--l-cols"] = columns;
+    if (gap)
+      style["--l-gap"] = gap;
+    if (justifyItems)
+      style["--l-ji"] = justifyItems;
+    if (alignItems)
+      style["--l-ai"] = alignItems;
+    if (justifyContent)
+      style["--l-jc"] = justifyContent;
+    if (alignContent)
+      style["--l-ac"] = alignContent;
+    if (autoFlow)
+      style["--l-flow"] = autoFlow;
+    if (autoRows)
+      style["--l-arows"] = autoRows;
+    if (autoColumns)
+      style["--l-acols"] = autoColumns;
+  }
+  if (justifySelf)
+    style["--l-js"] = justifySelf;
+  if (alignSelf)
+    style["--l-as"] = alignSelf;
+  const baseClass = stackOnMobile ? `${Layout_module_default["layout"]} ${Layout_module_default["stackOnMobile"]}` : Layout_module_default["layout"];
+  const combined = contents ? className : className ? `${baseClass} ${className}` : baseClass;
+  return createElement(as, {
+    id,
+    className: combined,
+    style,
+    onClick,
+    onKeyDown,
+    role,
+    tabIndex,
+    "aria-label": props["aria-label"],
+    "aria-labelledby": props["aria-labelledby"],
+    "aria-describedby": props["aria-describedby"],
+    "data-polly-layout": true
+  }, children);
+}
+// src/polly-ui/internal/input-base.ts
+function buildInputA11y(props) {
+  const attrs = {
+    "data-polly-ui": true,
+    "data-polly-input": true,
+    "aria-invalid": props.invalid ? "true" : undefined,
+    "aria-required": props.required ? "true" : undefined,
+    "aria-describedby": props.describedBy,
+    name: props.name,
+    id: props.id,
+    placeholder: props.placeholder,
+    disabled: props.disabled,
+    readOnly: props.readOnly
+  };
+  if (props.invalid)
+    attrs["data-state"] = "invalid";
+  return attrs;
+}
+
+// src/polly-ui/TextInput.module.css
+var TextInput_module_default = {
+  input: "input_ez4_Vg"
+};
+
+// src/polly-ui/TextInput.tsx
+import { jsxDEV as jsxDEV6 } from "preact/jsx-dev-runtime";
+function isSignal(v) {
+  return typeof v === "object" && v !== null && "value" in v && "peek" in v;
+}
+function TextInput(props) {
+  const variant = props.variant ?? "single";
+  const a11y = buildInputA11y({
+    name: props.name,
+    id: props.id,
+    required: props.required,
+    invalid: props.invalid,
+    describedBy: props.describedBy,
+    placeholder: props.placeholder,
+    disabled: props.disabled,
+    readOnly: props.readOnly
+  });
+  const controlled = isSignal(props.value);
+  const stringValue = controlled ? props.value.value : undefined;
+  const defaultValue = controlled ? undefined : props.value ?? "";
+  const className = props.className ? `${TextInput_module_default["input"]} ${props.className}` : TextInput_module_default["input"];
+  if (variant === "multi") {
+    return /* @__PURE__ */ jsxDEV6("textarea", {
+      ...a11y,
+      class: className,
+      "data-polly-input-variant": "multi",
+      rows: props.rows,
+      autoFocus: props.autoFocus,
+      value: stringValue,
+      defaultValue,
+      onInput: (e) => {
+        if (controlled) {
+          props.value.value = e.currentTarget.value;
+        }
+      }
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV6("input", {
+    ...a11y,
+    type: "text",
+    class: className,
+    "data-polly-input-variant": "single",
+    autoFocus: props.autoFocus,
+    value: stringValue,
+    defaultValue,
+    onInput: (e) => {
+      if (controlled) {
+        props.value.value = e.currentTarget.value;
+      }
+    }
+  }, undefined, false, undefined, this);
+}
+// src/polly-ui/Toast.tsx
+import { createPortal as createPortal2 } from "preact/compat";
+import { useEffect as useEffect4, useRef as useRef4, useState as useState3 } from "preact/hooks";
+
+// src/actions/error.ts
+import { signal as signal3 } from "@preact/signals";
+var errorState = signal3([]);
+var nextId2 = 0;
+function allocId() {
+  nextId2 += 1;
+  return `polly-err-${nextId2}`;
+}
+function setError(message, opts = {}) {
+  const entry = {
+    id: allocId(),
+    message,
+    severity: opts.severity ?? "error",
+    action: opts.action,
+    createdAt: Date.now()
+  };
+  errorState.value = [...errorState.value, entry];
+  return entry.id;
+}
+function clearError(id) {
+  if (id === undefined) {
+    errorState.value = [];
+    return;
+  }
+  errorState.value = errorState.value.filter((e) => e.id !== id);
+}
+function submitError(action, err) {
+  const message = err instanceof Error ? err.message : String(err);
+  return setError(message, { action, severity: "error" });
+}
+
+// src/polly-ui/Toast.module.css
+var Toast_module_default = {
+  viewport: "viewport_xVzRuA",
+  item: "item_xVzRuA",
+  message: "message_xVzRuA",
+  close: "close_xVzRuA"
+};
+
+// src/polly-ui/Toast.tsx
+import { jsxDEV as jsxDEV7 } from "preact/jsx-dev-runtime";
+function Viewport(props) {
+  const autoDismissMs = props.autoDismissMs ?? 5000;
+  const [portalNode, setPortalNode] = useState3(null);
+  const [paused, setPaused] = useState3(false);
+  const entries = errorState.value;
+  useEffect4(() => {
+    setPortalNode(getOverlayRootNode());
+  }, []);
+  useEffect4(() => {
+    if (paused || entries.length === 0)
+      return;
+    const head = entries[0];
+    if (!head)
+      return;
+    const timer = window.setTimeout(() => {
+      clearError(head.id);
+    }, autoDismissMs);
+    return () => window.clearTimeout(timer);
+  }, [paused, entries, autoDismissMs]);
+  if (!portalNode)
+    return null;
+  const content = /* @__PURE__ */ jsxDEV7("div", {
+    class: `${Toast_module_default["viewport"]} ${props.className ?? ""}`.trim(),
+    "data-polly-ui": true,
+    "data-polly-toast-viewport": true,
+    onMouseEnter: () => setPaused(true),
+    onMouseLeave: () => setPaused(false),
+    children: entries.map((entry) => /* @__PURE__ */ jsxDEV7(ToastItem, {
+      entry
+    }, entry.id, false, undefined, this))
+  }, undefined, false, undefined, this);
+  return createPortal2(content, portalNode);
+}
+function ToastItem({ entry }) {
+  const liveness = entry.severity === "error" ? "assertive" : "polite";
+  const ref = useRef4(null);
+  return /* @__PURE__ */ jsxDEV7("div", {
+    ref,
+    class: Toast_module_default["item"],
+    "data-polly-ui": true,
+    "data-polly-toast-item": true,
+    "data-severity": entry.severity,
+    role: entry.severity === "error" ? "alert" : "status",
+    "aria-live": liveness,
+    children: [
+      /* @__PURE__ */ jsxDEV7("span", {
+        class: Toast_module_default["message"],
+        children: entry.message
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV7("button", {
+        type: "button",
+        class: Toast_module_default["close"],
+        "data-polly-ui": true,
+        "data-polly-interactive": true,
+        "data-polly-toast-close": true,
+        onClick: () => clearError(entry.id),
+        "aria-label": "Dismiss",
+        children: "×"
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+var Toast = { Viewport };
+export {
+  getOverlayRootNode,
+  confirm,
+  Toast,
+  TextInput,
+  OverlayRoot,
+  Modal,
+  Layout,
+  ConfirmDialog,
+  ActionInput,
+  ActionForm
+};
+
+//# debugId=17892EC9C7CDCA6D64756E2164756E21