@konomi-app/ui 3.0.0 → 4.1.0

package/dist/index.js

@@ -1,150 +1,397 @@
-// src/overlay/style.ts
-import { css } from "@emotion/css";
-var getBodyStyle = () => css`
-  overflow: visible;
-  &[${ATTRIBUTE_KEY}] {
-    overflow: hidden;
-  }
-`;
-var getRootStyle = () => css`
-  font-family: 'Yu Gothic Medium', '游ゴシック', YuGothic, 'メイリオ', 'Hiragino Kaku Gothic ProN',
-    Meiryo, sans-serif;
-  color: #356;
-  font-size: 14px;
-
-  overflow: hidden;
-  background-color: #fffb;
-  backdrop-filter: blur(4px);
-  box-sizing: content-box;
-
-  position: fixed;
-  inset: 0;
-  width: 100vw;
-  height: 100vh;
-
-  display: grid;
-  transition: all 250ms ease;
-  z-index: 1000;
-  opacity: 0;
-  transition: all 250ms ease;
-
-  place-items: end stretch;
-  @media (min-width: 640px) {
-    font-size: 16px;
-    place-items: center;
-  }
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
 
-  opacity: 0;
-  pointer-events: none;
-  &[${ATTRIBUTE_SHOWN}] {
-    opacity: 1;
-    pointer-events: all;
-  }
-`;
+// src/types.ts
+var createInitialState = () => ({
+  open: false,
+  dialogType: "loading",
+  icon: null,
+  label: "",
+  description: "",
+  html: "",
+  progress: null,
+  showConfirmButton: true,
+  showCancelButton: false,
+  confirmButtonText: "OK",
+  cancelButtonText: "\u30AD\u30E3\u30F3\u30BB\u30EB",
+  allowOutsideClick: true,
+  allowEscapeKey: true,
+  queues: [],
+  steps: [],
+  timer: null,
+  title: ""
+});
 
-// src/overlay/index.ts
-var ATTRIBUTE_KEY = "data-konomi-ui-overlay";
-var ATTRIBUTE_SHOWN = "data-shown";
-var Overlay = class {
-  /**
-   * オーバーレイをレンダリングするルート要素。
-   */
-  #root;
-  /**
-   * オーバーレイをレンダリングするルート要素の`dataset`。
-   */
-  _rootDataset;
-  /**
-   * オーバーレイが表示されているかどうか。
-   */
-  _shown;
-  /**
-   * オーバーレイを表示中にページを離れようとした場合にアラートを表示するかどうかを設定します。
-   */
-  _disableBeforeUnload;
+// src/controller.ts
+var _state, _listeners, _resolver, _timerId, _DialogController_instances, emit_fn, update_fn, createPromise_fn, resolve_fn, clearTimer_fn, updateItemStatus_fn;
+var DialogController = class {
   constructor() {
-    this._shown = false;
-    this._disableBeforeUnload = false;
-    this._rootDataset = {};
-    const root = document.createElement("div");
-    this.#root = root;
-    this.#root.classList.add(getRootStyle());
-    document.body.classList.add(getBodyStyle());
-    this.#root.setAttribute(ATTRIBUTE_KEY, "");
-    document.body.append(root);
-  }
-  show() {
-    this._shown = true;
-    this.#root.setAttribute(ATTRIBUTE_SHOWN, "");
-    document.body.setAttribute(ATTRIBUTE_KEY, "");
-    window.addEventListener("beforeunload", this.beforeunload);
-    this.render();
+    __privateAdd(this, _DialogController_instances);
+    __privateAdd(this, _state);
+    __privateAdd(this, _listeners, /* @__PURE__ */ new Set());
+    __privateAdd(this, _resolver, null);
+    __privateAdd(this, _timerId, null);
+    __privateSet(this, _state, createInitialState());
+  }
+  // ─── Observable ──────────────────────────────────────────
+  get state() {
+    return __privateGet(this, _state);
+  }
+  subscribe(fn) {
+    __privateGet(this, _listeners).add(fn);
+    return () => __privateGet(this, _listeners).delete(fn);
+  }
+  // ─── Core ────────────────────────────────────────────────
+  show(options = { type: "loading" }) {
+    __privateMethod(this, _DialogController_instances, clearTimer_fn).call(this);
+    __privateMethod(this, _DialogController_instances, update_fn).call(this, {
+      open: true,
+      dialogType: options.type,
+      label: options.label ?? "",
+      description: options.description ?? "",
+      icon: options.icon ?? null,
+      progress: options.progress ?? null,
+      allowOutsideClick: options.allowOutsideClick ?? false,
+      showConfirmButton: false,
+      showCancelButton: false
+    });
   }
   hide() {
-    this._shown = false;
-    this.#root.removeAttribute(ATTRIBUTE_SHOWN);
-    document.body.removeAttribute(ATTRIBUTE_KEY);
-    window.removeEventListener("beforeunload", this.beforeunload);
-    this.render();
+    __privateMethod(this, _DialogController_instances, clearTimer_fn).call(this);
+    const wasOpen = __privateGet(this, _state).open;
+    __privateMethod(this, _DialogController_instances, update_fn).call(this, { ...createInitialState(), open: false });
+    if (wasOpen && __privateGet(this, _resolver)) {
+      __privateMethod(this, _DialogController_instances, resolve_fn).call(this, { isConfirmed: false, isCanceled: false, isDismissed: true });
+    }
   }
-  render() {
+  // ─── Alert ───────────────────────────────────────────────
+  alert(optionsOrLabel) {
+    __privateMethod(this, _DialogController_instances, clearTimer_fn).call(this);
+    const opts = typeof optionsOrLabel === "string" ? { label: optionsOrLabel } : optionsOrLabel;
+    __privateMethod(this, _DialogController_instances, update_fn).call(this, {
+      open: true,
+      dialogType: "alert",
+      icon: opts.type ?? "info",
+      label: opts.label ?? "",
+      description: opts.description ?? "",
+      html: opts.html ?? "",
+      showConfirmButton: true,
+      showCancelButton: opts.showCancelButton ?? false,
+      confirmButtonText: opts.confirmButtonText ?? "OK",
+      cancelButtonText: opts.cancelButtonText ?? "\u30AD\u30E3\u30F3\u30BB\u30EB",
+      allowOutsideClick: opts.allowOutsideClick ?? true,
+      allowEscapeKey: opts.allowEscapeKey ?? true,
+      progress: null,
+      timer: opts.timer ?? null
+    });
+    return __privateMethod(this, _DialogController_instances, createPromise_fn).call(this, opts.timer ?? null);
+  }
+  // ─── Confirm ─────────────────────────────────────────────
+  confirm(optionsOrLabel) {
+    __privateMethod(this, _DialogController_instances, clearTimer_fn).call(this);
+    const opts = typeof optionsOrLabel === "string" ? { label: optionsOrLabel } : optionsOrLabel;
+    __privateMethod(this, _DialogController_instances, update_fn).call(this, {
+      open: true,
+      dialogType: "confirm",
+      icon: opts.type ?? "warning",
+      label: opts.label ?? "",
+      description: opts.description ?? "",
+      showConfirmButton: true,
+      showCancelButton: true,
+      confirmButtonText: opts.confirmButtonText ?? "OK",
+      cancelButtonText: opts.cancelButtonText ?? "\u30AD\u30E3\u30F3\u30BB\u30EB",
+      allowOutsideClick: opts.allowOutsideClick ?? false,
+      allowEscapeKey: opts.allowEscapeKey ?? true,
+      progress: null,
+      timer: null
+    });
+    return __privateMethod(this, _DialogController_instances, createPromise_fn).call(this, null).then((r) => r.isConfirmed);
+  }
+  // ─── Loading helpers ─────────────────────────────────────
+  loading(label) {
+    this.show({ type: "loading", label });
+  }
+  progress(percent) {
+    __privateMethod(this, _DialogController_instances, update_fn).call(this, { progress: percent });
+  }
+  label(label) {
+    __privateMethod(this, _DialogController_instances, update_fn).call(this, { label });
+  }
+  description(description) {
+    __privateMethod(this, _DialogController_instances, update_fn).call(this, { description });
+  }
+  // ─── Queue ───────────────────────────────────────────────
+  setQueues(labels) {
+    __privateMethod(this, _DialogController_instances, update_fn).call(this, {
+      queues: labels.map((label) => ({ label, status: "pending" }))
+    });
+  }
+  queue(labels, title) {
+    this.setQueues(labels);
+    this.show({ type: "queue" });
+    if (title !== void 0) __privateMethod(this, _DialogController_instances, update_fn).call(this, { title });
+  }
+  queueTitle(title) {
+    __privateMethod(this, _DialogController_instances, update_fn).call(this, { title });
+  }
+  startQueue(label) {
+    __privateMethod(this, _DialogController_instances, updateItemStatus_fn).call(this, "queues", label, "active");
+  }
+  finishQueue(label) {
+    __privateMethod(this, _DialogController_instances, updateItemStatus_fn).call(this, "queues", label, "done");
+  }
+  skipQueue(label) {
+    __privateMethod(this, _DialogController_instances, updateItemStatus_fn).call(this, "queues", label, "skipped");
+  }
+  errorQueue(label) {
+    __privateMethod(this, _DialogController_instances, updateItemStatus_fn).call(this, "queues", label, "error");
+  }
+  clearQueues() {
+    __privateMethod(this, _DialogController_instances, update_fn).call(this, { queues: [] });
+  }
+  // ─── Steps ───────────────────────────────────────────────
+  setSteps(labels) {
+    __privateMethod(this, _DialogController_instances, update_fn).call(this, {
+      steps: labels.map((label) => ({ label, status: "pending" }))
+    });
+  }
+  steps(labels) {
+    this.setSteps(labels);
+    this.show({ type: "steps" });
+  }
+  startStep(label) {
+    __privateMethod(this, _DialogController_instances, updateItemStatus_fn).call(this, "steps", label, "active");
+  }
+  finishStep(label) {
+    __privateMethod(this, _DialogController_instances, updateItemStatus_fn).call(this, "steps", label, "done");
+  }
+  skipStep(label) {
+    __privateMethod(this, _DialogController_instances, updateItemStatus_fn).call(this, "steps", label, "skipped");
+  }
+  errorStep(label) {
+    __privateMethod(this, _DialogController_instances, updateItemStatus_fn).call(this, "steps", label, "error");
   }
-  /** JavaScript中にページを離れようとした場合にアラートを表示します */
-  beforeunload(event) {
-    event.preventDefault();
+  clearSteps() {
+    __privateMethod(this, _DialogController_instances, update_fn).call(this, { steps: [] });
   }
-  get root() {
-    return this.#root;
+  // ─── Button actions (called from the component) ──────────
+  onConfirm() {
+    __privateMethod(this, _DialogController_instances, clearTimer_fn).call(this);
+    const r = { isConfirmed: true, isCanceled: false, isDismissed: false };
+    __privateMethod(this, _DialogController_instances, update_fn).call(this, { ...createInitialState(), open: false });
+    __privateMethod(this, _DialogController_instances, resolve_fn).call(this, r);
   }
-  /** @deprecated このメソッドは非推奨です。代わりに`show`メソッドを使用してください。 */
-  start() {
-    this.show();
+  onCancel() {
+    __privateMethod(this, _DialogController_instances, clearTimer_fn).call(this);
+    const r = { isConfirmed: false, isCanceled: true, isDismissed: false };
+    __privateMethod(this, _DialogController_instances, update_fn).call(this, { ...createInitialState(), open: false });
+    __privateMethod(this, _DialogController_instances, resolve_fn).call(this, r);
   }
-  /** @deprecated このメソッドは非推奨です。代わりに`hide`メソッドを使用してください。 */
-  stop() {
-    this.hide();
+  onOutsideClick() {
+    if (!__privateGet(this, _state).allowOutsideClick) return;
+    this.onCancel();
+  }
+  onEscapeKey() {
+    if (!__privateGet(this, _state).allowEscapeKey) return;
+    this.onCancel();
+  }
+};
+_state = new WeakMap();
+_listeners = new WeakMap();
+_resolver = new WeakMap();
+_timerId = new WeakMap();
+_DialogController_instances = new WeakSet();
+emit_fn = function() {
+  const snapshot = { ...__privateGet(this, _state) };
+  for (const fn of __privateGet(this, _listeners)) fn(snapshot);
+};
+update_fn = function(patch) {
+  Object.assign(__privateGet(this, _state), patch);
+  __privateMethod(this, _DialogController_instances, emit_fn).call(this);
+};
+// ─── Internal ────────────────────────────────────────────
+createPromise_fn = function(timer) {
+  return new Promise((resolve) => {
+    __privateSet(this, _resolver, resolve);
+    if (timer != null && timer > 0) {
+      __privateSet(this, _timerId, setTimeout(() => {
+        __privateMethod(this, _DialogController_instances, update_fn).call(this, { ...createInitialState(), open: false });
+        resolve({ isConfirmed: false, isCanceled: false, isDismissed: true });
+        __privateSet(this, _resolver, null);
+      }, timer));
+    }
+  });
+};
+resolve_fn = function(result) {
+  const resolver = __privateGet(this, _resolver);
+  __privateSet(this, _resolver, null);
+  resolver?.(result);
+};
+clearTimer_fn = function() {
+  if (__privateGet(this, _timerId) != null) {
+    clearTimeout(__privateGet(this, _timerId));
+    __privateSet(this, _timerId, null);
+  }
+};
+updateItemStatus_fn = function(key, label, status) {
+  const items = [...__privateGet(this, _state)[key]];
+  const idx = items.findIndex((i) => i.label === label);
+  if (idx >= 0) {
+    items[idx] = { ...items[idx], status };
+    __privateMethod(this, _DialogController_instances, update_fn).call(this, { [key]: items });
   }
 };
 
-// src/loading-overlay/style.ts
-import { css as css2 } from "@emotion/css";
-var containerStyle = css2`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 32px;
-  padding: 24px;
-  background-color: #fff;
-  border-radius: 0;
-  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  border: 1px solid #f3f4f6;
-  min-height: 200px;
-  position: relative;
-  overflow: hidden;
-  transition: all 250ms ease;
+// src/overlay-dialog.ts
+import { LitElement, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+
+// src/styles.ts
+import { css } from "lit";
+var overlayStyles = css`
+  :host {
+    /* ─── Customizable CSS Variables ─── */
+    --dialog-font-family:
+      'Yu Gothic Medium', '游ゴシック', YuGothic, 'メイリオ', 'Hiragino Kaku Gothic ProN', Meiryo,
+      sans-serif;
+    --dialog-text-color: #356;
+    --dialog-font-size: 14px;
+    --dialog-font-size-desktop: 16px;
+    --dialog-z-index: 1000;
+    --dialog-backdrop-color: rgb(255 255 255 / 0.73);
+    --dialog-backdrop-blur: 4px;
+    --dialog-transition-duration: 250ms;
+
+    /* Card */
+    --dialog-card-bg: #fff;
+    --dialog-card-border: #f3f4f6;
+    --dialog-card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --dialog-card-radius: 4px;
+    --dialog-card-width: 400px;
+    --dialog-card-min-height: 200px;
+    --dialog-card-padding: 24px;
+    --dialog-card-padding-desktop: 32px;
+
+    /* Colors */
+    --dialog-primary: #3b82f6;
+    --dialog-primary-hover: #2563eb;
+    --dialog-success: #22c55e;
+    --dialog-error: #ef4444;
+    --dialog-warning: #f59e0b;
+    --dialog-info: #3b82f6;
+
+    /* Progress */
+    --dialog-progress-height: 2px;
+    --dialog-progress-color: var(--dialog-primary-hover);
+    --dialog-progress-transition: all 350ms ease;
+
+    /* Button */
+    --dialog-btn-radius: 6px;
+    --dialog-btn-padding: 8px 24px;
+    --dialog-btn-font-size: 14px;
+
+    /* Spinner */
+    --dialog-spinner-size: 60px;
+    --dialog-spinner-track: rgb(59 130 246 / 0.2);
+    --dialog-spinner-arc: var(--dialog-primary);
+
+    display: contents;
+    font-family: var(--dialog-font-family);
+    color: var(--dialog-text-color);
+    font-size: var(--dialog-font-size);
+  }
+
+  /* ─── Backdrop ─── */
+
+  .backdrop {
+    position: fixed;
+    inset: 0;
+    width: 100vw;
+    height: 100vh;
+    display: grid;
+    place-items: end stretch;
+    z-index: var(--dialog-z-index);
+    overflow: hidden;
+    background-color: var(--dialog-backdrop-color);
+    backdrop-filter: blur(var(--dialog-backdrop-blur));
+    box-sizing: border-box;
+    transition: opacity var(--dialog-transition-duration) ease;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .backdrop[data-open] {
+    opacity: 1;
+    pointer-events: all;
+  }
 
   @media (min-width: 640px) {
-    width: 400px;
-    max-width: 90vw;
-    border-radius: 4px;
-    padding: 32px;
+    :host {
+      font-size: var(--dialog-font-size-desktop);
+    }
+    .backdrop {
+      place-items: center;
+    }
   }
-`;
-var getLoaderStyle = () => css2`
-  font-size: 60px;
-  width: 1em;
-  height: 1em;
-  border-radius: 50%;
-  box-shadow: inset 0 0 0 1px #3b82f633;
-  position: relative;
 
-  animation: none;
-  &[${ATTRIBUTE_ANIMATION}] {
-    animation: rotate 1.2s infinite linear;
+  /* ─── Card ─── */
+
+  .card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+    padding: var(--dialog-card-padding);
+    background-color: var(--dialog-card-bg);
+    border-radius: 0;
+    box-shadow: var(--dialog-card-shadow);
+    border: 1px solid var(--dialog-card-border);
+    min-height: var(--dialog-card-min-height);
+    position: relative;
+    overflow: hidden;
+    transition: all var(--dialog-transition-duration) ease;
+  }
+
+  @media (min-width: 640px) {
+    .card {
+      width: var(--dialog-card-width);
+      max-width: 90vw;
+      border-radius: var(--dialog-card-radius);
+      padding: var(--dialog-card-padding-desktop);
+    }
+  }
+
+  /* ─── Spinner ─── */
+
+  .spinner {
+    font-size: var(--dialog-spinner-size);
+    width: 1em;
+    height: 1em;
+    border-radius: 50%;
+    box-shadow: inset 0 0 0 1px var(--dialog-spinner-track);
+    position: relative;
+    animation: spin 1.2s infinite linear;
   }
 
-  > div {
+  .spinner-half {
     position: absolute;
     left: 50%;
     top: 50%;
@@ -154,17 +401,18 @@ var getLoaderStyle = () => css2`
     margin-top: -0.5em;
     overflow: hidden;
     transform-origin: 0.5em 0.5em;
-    mask-image: linear-gradient(top, #000f, #0000);
-    -webkit-mask-image: -webkit-linear-gradient(top, #000f, #0000);
-
-    > div {
-      width: 1em;
-      height: 1em;
-      border-radius: 50%;
-      box-shadow: inset 0 0 0 1px #3b82f6;
-    }
+    mask-image: linear-gradient(to bottom, #000f, #0000);
+    -webkit-mask-image: linear-gradient(to bottom, #000f, #0000);
+  }
+
+  .spinner-inner {
+    width: 1em;
+    height: 1em;
+    border-radius: 50%;
+    box-shadow: inset 0 0 0 1px var(--dialog-spinner-arc);
   }
-  @keyframes rotate {
+
+  @keyframes spin {
     0% {
       transform: rotate(0deg);
     }
@@ -172,315 +420,232 @@ var getLoaderStyle = () => css2`
       transform: rotate(360deg);
     }
   }
-`;
-var progressStyle = css2`
-  position: absolute;
-  bottom: 0px;
-  left: 0;
-  width: 0%;
-  height: 2px;
-  background-color: #2563eb;
-  transition: all 350ms ease;
-`;
 
-// src/loading-overlay/index.ts
-var ATTRIBUTE_ANIMATION = "data-animation";
-var LoadingOverlay = class extends Overlay {
-  #label;
-  #html;
-  #progress;
-  _loaderElement;
-  _progressElement;
-  _contentElement;
-  constructor(props = {}) {
-    super();
-    this.#label = props.label ?? "";
-    this.#html = "";
-    this.#progress = props.progress ?? null;
-    const container = document.createElement("div");
-    container.classList.add(containerStyle);
-    this.root.append(container);
-    const loaderElement = document.createElement("div");
-    loaderElement.innerHTML = "<div><div></div></div>";
-    loaderElement.classList.add(getLoaderStyle());
-    this._loaderElement = loaderElement;
-    container.append(loaderElement);
-    const progressElement = document.createElement("div");
-    progressElement.classList.add(progressStyle);
-    this._progressElement = progressElement;
-    container.append(progressElement);
-    const contentElement = document.createElement("div");
-    this._contentElement = contentElement;
-    container.append(contentElement);
-    this.render();
-  }
-  show() {
-    super.show();
-    this._loaderElement.setAttribute(ATTRIBUTE_ANIMATION, "");
+  /* ─── Icon ─── */
+
+  .icon-container {
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
   }
-  hide() {
-    super.hide();
-    this._loaderElement.removeAttribute(ATTRIBUTE_ANIMATION);
-    this.#progress = 0;
-    this.#html = "";
-    this.#label = "";
-  }
-  set label(label) {
-    this.#label = label;
-    this.render();
-  }
-  set html(html) {
-    this.#html = html;
-    this.render();
-  }
-  /**
-   * 進捗状況を設定します。
-   * @param percent 進捗のパーセンテージ(0-100)
-   */
-  set progress(percent) {
-    this.#progress = percent;
-    this.render();
+
+  .icon-container svg {
+    width: 36px;
+    height: 36px;
   }
-  render() {
-    super.render();
-    this._progressElement.style.width = `${this.#progress}%`;
-    if (this.#html) {
-      this._contentElement.innerHTML = this.#html;
-    } else {
-      if (this.#label instanceof Array) {
-        this._contentElement.innerHTML = `<div>${this.#label.join("</div><div>")}</div>`;
-      } else {
-        this._contentElement.innerText = this.#label;
-      }
-    }
+
+  .icon-success {
+    background-color: rgb(34 197 94 / 0.1);
+    color: var(--dialog-success);
   }
-};
 
-// src/task-list-overlay.ts
-import { css as css3 } from "@emotion/css";
-var TaskListOverlay = class extends Overlay {
-  #taskList;
-  _contentElement;
-  constructor(props = {}) {
-    super();
-    this.#taskList = props.taskList ?? [];
-    const container = document.createElement("div");
-    container.classList.add(this.containerStyle);
-    this.root.append(container);
-    const contentElement = document.createElement("div");
-    this._contentElement = contentElement;
-    contentElement.classList.add(this.contentStyle);
-    container.append(contentElement);
-    this.render();
+  .icon-error {
+    background-color: rgb(239 68 68 / 0.1);
+    color: var(--dialog-error);
   }
-  hide() {
-    this.#taskList = [];
-    super.hide();
-  }
-  done(key) {
-    const task = this.#taskList.find((t) => t.key === key);
-    if (task) {
-      task.status = "done";
-      this.render();
-    }
+
+  .icon-warning {
+    background-color: rgb(245 158 11 / 0.1);
+    color: var(--dialog-warning);
+  }
+
+  .icon-info {
+    background-color: rgb(59 130 246 / 0.1);
+    color: var(--dialog-info);
+  }
+
+  /* ─── Check Animation ─── */
+
+  .check-circle {
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    stroke-width: 2;
+    stroke: var(--dialog-success);
+    fill: none;
+    stroke-dasharray: 200;
+    stroke-dashoffset: 200;
+    animation: check-circle-draw 0.6s ease forwards;
+  }
+
+  .check-mark {
+    stroke: var(--dialog-success);
+    stroke-width: 3;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    fill: none;
+    stroke-dasharray: 50;
+    stroke-dashoffset: 50;
+    animation: check-mark-draw 0.4s 0.4s ease forwards;
   }
-  error(key) {
-    const task = this.#taskList.find((t) => t.key === key);
-    if (task) {
-      task.status = "error";
-      this.render();
+
+  @keyframes check-circle-draw {
+    to {
+      stroke-dashoffset: 0;
     }
   }
-  inProgress(key) {
-    const task = this.#taskList.find((t) => t.key === key);
-    if (task) {
-      task.status = "in-progress";
-      this.render();
+
+  @keyframes check-mark-draw {
+    to {
+      stroke-dashoffset: 0;
     }
   }
-  addTask(...tasks) {
-    this.#taskList.push(...tasks.map(({ key, label }) => ({ key, label, status: "new" })));
-    this.render();
+
+  /* ─── Text ─── */
+
+  .dialog-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #374151;
+    text-align: center;
+    margin: 0;
+    word-break: break-word;
+    width: 100%;
+    padding-bottom: 12px;
+    border-bottom: 1px solid var(--dialog-card-border);
+  }
+
+  .label {
+    font-size: 18px;
+    font-weight: 600;
+    color: #1f2937;
+    text-align: center;
+    margin: 0;
+    word-break: break-word;
   }
-  render() {
-    super.render();
-    this._contentElement.innerHTML = `
-      <div class="${this.taskListContainerStyle}">
-        ${this.#taskList.map((task) => this.renderTask(task)).join("")}
-      </div>
-    `;
+
+  .description {
+    font-size: 14px;
+    color: #6b7280;
+    text-align: center;
+    margin: 0;
+    word-break: break-word;
+    line-height: 1.6;
   }
-  renderTask(task) {
-    const label = Array.isArray(task.label) ? task.label.join(" ") : task.label;
-    const status = task.status;
-    return `
-      <div class="${this.taskContainerStyle}">
-        <div class="${this.taskStatusStyle} status-${status}">${this.getTaskStatusElement(
-      task.status
-    )}</div>
-        <div class="${this.taskLabelStyle}">${label}</div>
-      </div>
-    `;
+
+  .html-content {
+    font-size: 14px;
+    color: #6b7280;
+    text-align: center;
+    word-break: break-word;
+    line-height: 1.6;
+    width: 100%;
   }
-  getTaskStatusElement(status) {
-    switch (status) {
-      case "new":
-        return `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="#ddd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="8" y1="12" x2="16" y2="12"></line></svg>`;
-      case "in-progress":
-        return `<div><div></div></div>`;
-      case "done":
-        return `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="#80beaf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>`;
-      default:
-        return ``;
-    }
+
+  /* ─── Progress ─── */
+
+  .progress-bar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 0%;
+    height: var(--dialog-progress-height);
+    background-color: var(--dialog-progress-color);
+    transition: var(--dialog-progress-transition);
   }
-  containerStyle = css3`
+
+  /* ─── Buttons ─── */
+
+  .actions {
     display: flex;
     flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 32px;
-    padding: 32px 64px;
-    background-color: #fffc;
-    border-radius: 8px;
-    box-shadow: 0 5px 24px -6px #0002;
-    width: 300px;
-    max-width: 90vw;
-    min-height: 200px;
-    position: relative;
-    overflow: hidden;
-    transition: all 250ms ease;
+    gap: 8px;
+    width: 100%;
+    margin-top: 8px;
+  }
 
-    @keyframes spin {
-      0% {
-        transform: rotate(0deg);
-        border-radius: 1em;
-      }
-      20% {
-        transform: rotate(0deg);
-      }
-      30%,
-      60% {
-        border-radius: 0.25em;
-      }
-      70% {
-        transform: rotate(180deg);
-      }
-      100% {
-        transform: rotate(180deg);
-        border-radius: 1em;
-      }
+  @media (min-width: 640px) {
+    .actions {
+      flex-direction: row;
+      justify-content: center;
     }
-  `;
-  contentStyle = css3`
-    width: 100%;
-  `;
-  taskListContainerStyle = css3`
+  }
+
+  .btn {
+    padding: var(--dialog-btn-padding);
+    font-size: var(--dialog-btn-font-size);
+    font-family: inherit;
+    border: none;
+    border-radius: var(--dialog-btn-radius);
+    cursor: pointer;
+    font-weight: 500;
+    transition:
+      background-color 150ms ease,
+      transform 80ms ease;
+    min-width: 100px;
+    text-align: center;
+  }
+
+  .btn:active {
+    transform: scale(0.97);
+  }
+
+  .btn-confirm {
+    background-color: var(--dialog-primary);
+    color: #fff;
+  }
+
+  .btn-confirm:hover {
+    background-color: var(--dialog-primary-hover);
+  }
+
+  .btn-cancel {
+    background-color: #f3f4f6;
+    color: #374151;
+  }
+
+  .btn-cancel:hover {
+    background-color: #e5e7eb;
+  }
+
+  /* ─── Queue / Steps list ─── */
+
+  .task-list {
     display: flex;
     flex-direction: column;
-    gap: 1em;
+    gap: 12px;
     width: 100%;
-  `;
-  taskContainerStyle = css3`
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  .task-item {
     display: flex;
     align-items: center;
-    gap: 1em;
-  `;
-  taskLabelStyle = css3``;
-  taskStatusStyle = css3`
-    font-size: 32px;
-    width: 1em;
-    height: 1em;
+    gap: 12px;
+    font-size: 14px;
+  }
+
+  .task-icon {
+    width: 24px;
+    height: 24px;
     display: flex;
-    justify-content: center;
     align-items: center;
-
-    &.status-new {
-    }
-
-    &.status-in-progress {
-      border-radius: 50%;
-      box-shadow: inset 0 0 0 1px #3b82f633;
-      position: relative;
-      animation: rotate 1.2s infinite linear;
-      > div {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        width: 0.5em;
-        height: 1em;
-        margin-left: -0.5em;
-        margin-top: -0.5em;
-        overflow: hidden;
-        transform-origin: 0.5em 0.5em;
-        mask-image: linear-gradient(top, #000f, #0000);
-        -webkit-mask-image: -webkit-linear-gradient(top, #000f, #0000);
-
-        > div {
-          width: 1em;
-          height: 1em;
-          border-radius: 50%;
-          box-shadow: inset 0 0 0 1px #3b82f6;
-        }
-      }
-      @keyframes rotate {
-        0% {
-          transform: rotate(0deg);
-        }
-        100% {
-          transform: rotate(360deg);
-        }
-      }
-    }
-  `;
-};
-
-// src/modal/style.ts
-import { css as css4 } from "@emotion/css";
-var containerStyle2 = css4`
-  display: grid;
-  gap: 2px;
-  padding: 24px;
-  background-color: #fff;
-  border-radius: 0;
-  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  border: 1px solid #f3f4f6;
-  min-height: 200px;
-  position: relative;
-  overflow: hidden;
-  transition: all 250ms ease;
-
-  @media (min-width: 640px) {
-    width: 400px;
-    max-width: 90vw;
-    border-radius: 4px;
-    padding: 32px;
+    justify-content: center;
+    flex-shrink: 0;
   }
-`;
-var iconStyle = css4``;
-var titleStyle = css4`
-  font-size: 18px;
-  font-weight: 600;
-  color: #1f2937;
-  text-align: center;
-  @media (min-width: 640px) {
-    text-align: left;
+
+  .task-icon svg {
+    width: 20px;
+    height: 20px;
   }
-`;
-var loaderStyle = css4`
-  font-size: 60px;
-  width: 1em;
-  height: 1em;
-  border-radius: 50%;
-  box-shadow: inset 0 0 0 1px #3b82f633;
-  position: relative;
 
-  animation: none;
-  &[data-state='loading'] {
-    animation: rotate 1s linear infinite;
+  .task-icon .mini-spinner {
+    font-size: 20px;
+    width: 1em;
+    height: 1em;
+    border-radius: 50%;
+    box-shadow: inset 0 0 0 1px var(--dialog-spinner-track);
+    position: relative;
+    animation: spin 1.2s infinite linear;
   }
 
-  > div {
+  .task-icon .mini-spinner-half {
     position: absolute;
     left: 50%;
     top: 50%;
@@ -490,243 +655,531 @@ var loaderStyle = css4`
     margin-top: -0.5em;
     overflow: hidden;
     transform-origin: 0.5em 0.5em;
-    mask-image: linear-gradient(top, #000f, #0000);
-    -webkit-mask-image: -webkit-linear-gradient(top, #000f, #0000);
-
-    > div {
-      width: 1em;
-      height: 1em;
-      border-radius: 50%;
-      box-shadow: inset 0 0 0 1px #3b82f6;
-    }
+    mask-image: linear-gradient(to bottom, #000f, #0000);
+    -webkit-mask-image: linear-gradient(to bottom, #000f, #0000);
   }
-  @keyframes rotate {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
+
+  .task-icon .mini-spinner-inner {
+    width: 1em;
+    height: 1em;
+    border-radius: 50%;
+    box-shadow: inset 0 0 0 1px var(--dialog-spinner-arc);
   }
-`;
-var progressStyle2 = css4`
-  position: absolute;
-  bottom: 0px;
-  left: 0;
-  width: 0%;
-  height: 2px;
-  background-color: #2563eb;
-  transition: all 350ms ease;
-`;
-var actionsStyle = css4`
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  align-items: flex-end;
-  gap: 8px;
 
-  @media (min-width: 640px) {
-    flex-direction: row;
+  .task-label {
+    color: #6b7280;
+  }
+
+  .task-label[data-status='active'] {
+    color: var(--dialog-text-color);
+    font-weight: 500;
+  }
+
+  .task-label[data-status='done'] {
+    color: var(--dialog-success);
+  }
+
+  .task-label[data-status='error'] {
+    color: var(--dialog-error);
+  }
+
+  .task-label[data-status='skipped'] {
+    color: #9ca3af;
+    text-decoration: line-through;
+  }
+
+  /* ─── Queue ellipsis ─── */
+
+  .queue-ellipsis {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 3px;
+    padding: 4px 0;
+    /* アイコン列 (24px) の中央に配置: (24px - 4px dot) / 2 = 10px */
+    padding-left: 10px;
+    align-self: flex-start;
+    list-style: none;
+  }
+
+  .queue-ellipsis span {
+    display: block;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background-color: #d1d5db;
+  }
+
+  /* ─── Steps indicator ─── */
+
+  .steps-header {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    width: 100%;
+    justify-content: center;
+    margin-bottom: 8px;
+  }
+
+  .step-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: #d1d5db;
+    transition: background-color 200ms ease;
+  }
+
+  .step-dot[data-status='active'] {
+    background-color: var(--dialog-primary);
+    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.2);
+  }
+
+  .step-dot[data-status='done'] {
+    background-color: var(--dialog-success);
+  }
+
+  .step-dot[data-status='error'] {
+    background-color: var(--dialog-error);
+  }
+
+  .step-dot[data-status='skipped'] {
+    background-color: #9ca3af;
+  }
+
+  .step-connector {
+    flex: 1;
+    max-width: 24px;
+    height: 2px;
+    background-color: #e5e7eb;
   }
 `;
 
-// src/modal/index.ts
-var Modal = class extends Overlay {
-  #title;
-  #html;
-  #label;
-  #progress;
-  #state;
-  _containerElement;
-  _iconElement;
-  _titleElement;
-  _loaderElement;
-  _progressElement;
-  _contentElement;
-  _actionsElement;
-  _okButtonElement;
-  _cancelButtonElement;
-  constructor(props = {}) {
-    super();
-    this.#title = "";
-    this.#html = "";
-    this.#label = props.label ?? "";
-    this.#progress = props.progress ?? null;
-    this.#state = "hidden";
-    const container = document.createElement("div");
-    container.classList.add(containerStyle2);
-    this._containerElement = container;
-    this.root.append(container);
-    const iconElement = document.createElement("div");
-    iconElement.classList.add(iconStyle);
-    this._iconElement = iconElement;
-    container.append(iconElement);
-    const titleElement = document.createElement("div");
-    titleElement.classList.add(titleStyle);
-    this._titleElement = titleElement;
-    container.append(titleElement);
-    const loaderElement = document.createElement("div");
-    loaderElement.innerHTML = "<div><div></div></div>";
-    loaderElement.classList.add(loaderStyle);
-    this._loaderElement = loaderElement;
-    const progressElement = document.createElement("div");
-    progressElement.classList.add(progressStyle2);
-    this._progressElement = progressElement;
-    container.append(progressElement);
-    const contentElement = document.createElement("div");
-    this._contentElement = contentElement;
-    container.append(contentElement);
-    const actionsElement = document.createElement("div");
-    actionsElement.classList.add(actionsStyle);
-    this._actionsElement = actionsElement;
-    container.append(actionsElement);
-    const okButtonElement = document.createElement("button");
-    okButtonElement.type = "button";
-    okButtonElement.textContent = "OK";
-    this._okButtonElement = okButtonElement;
-    actionsElement.append(okButtonElement);
-    const cancelButtonElement = document.createElement("button");
-    cancelButtonElement.type = "button";
-    cancelButtonElement.textContent = "\u30AD\u30E3\u30F3\u30BB\u30EB";
-    this._cancelButtonElement = cancelButtonElement;
-    actionsElement.append(cancelButtonElement);
-    this.render();
-  }
-  alert(params) {
-    const {
-      title = "",
-      text = "",
-      icon = "",
-      disableClose = false,
-      disableEscape = false
-    } = params;
-    this.#title = title;
-    this.#label = text;
-    this.changeState("alert");
-    this.show();
-    return new Promise((resolve) => {
-      this._okButtonElement.addEventListener("click", () => {
-        if (!disableClose) {
-          this.hide();
-        }
-        resolve({
-          isConfirmed: true
-        });
-      });
-      this._cancelButtonElement.addEventListener("click", () => {
-        if (!disableClose) {
-          this.hide();
-        }
-        resolve({
-          isConfirmed: false
-        });
-      });
-      this.root.addEventListener("click", (event) => {
-        if (event.currentTarget === event.target) {
-          if (!disableClose) {
-            this.hide();
-          }
-          resolve({
-            isConfirmed: false
-          });
-        }
-      });
-      this.root.addEventListener("keydown", (event) => {
-        if (event.key === "Escape") {
-          if (!disableEscape) {
-            this.hide();
-          }
-          resolve({
-            isConfirmed: false
-          });
+// src/overlay-dialog.ts
+var OverlayDialog = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this._state = createInitialState();
+    this._beforeUnloadHandler = (e) => e.preventDefault();
+    this._onKeyDown = (e) => {
+      if (e.key === "Escape" && this._state.open) {
+        this.controller.onEscapeKey();
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.controller) {
+      this._state = { ...this.controller.state };
+      this._unsubscribe = this.controller.subscribe((s) => {
+        const wasOpen = this._state.open;
+        this._state = s;
+        this._syncBodyScroll(s.open);
+        if (s.open && !wasOpen) {
+          window.addEventListener("beforeunload", this._beforeUnloadHandler);
+        } else if (!s.open && wasOpen) {
+          window.removeEventListener("beforeunload", this._beforeUnloadHandler);
         }
       });
-    });
+    }
+    window.addEventListener("keydown", this._onKeyDown);
   }
-  loading() {
-    this._iconElement.append(this._loaderElement);
-    this.changeState("loading");
-    this.show();
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._unsubscribe?.();
+    this._syncBodyScroll(false);
+    window.removeEventListener("beforeunload", this._beforeUnloadHandler);
+    window.removeEventListener("keydown", this._onKeyDown);
   }
-  hide() {
-    this.#progress = 0;
-    this.#html = "";
-    this.#label = "";
-    this.changeState("hidden");
-    super.hide();
-  }
-  set label(label) {
-    this.#label = label;
-    this.render();
-  }
-  set html(html) {
-    this.#html = html;
-    this.render();
-  }
-  set progress(progress) {
-    this.#progress = progress;
-    this.render();
-  }
-  changeState(state) {
-    this.#state = state;
-    const elements = [
-      this.root,
-      this._actionsElement,
-      this._contentElement,
-      this._iconElement,
-      this._loaderElement,
-      this._progressElement,
-      this._titleElement
-    ];
-    for (const element of elements) {
-      element.dataset.state = state;
+  _syncBodyScroll(lock) {
+    if (lock) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
     }
-    this.render();
   }
-  render() {
-    super.render();
-    this._progressElement.style.width = `${this.#progress}%`;
-    switch (this.#state) {
-      case "loading":
-        break;
-      case "alert":
-        this._iconElement.innerHTML = "";
-        break;
-      case "hidden":
+  // ─── Event Handlers ──────────────────────────────────────
+  _onBackdropClick(e) {
+    if (e.target === e.currentTarget) {
+      this.controller.onOutsideClick();
+    }
+  }
+  // ─── Render Helpers ──────────────────────────────────────
+  _renderIcon(icon) {
+    if (!icon) return nothing;
+    if (icon === "success") {
+      return html`
+        <svg
+          class="icon-container"
+          viewBox="0 0 64 64"
+          style="width:64px;height:64px;background:none;"
+        >
+          <circle class="check-circle" cx="32" cy="32" r="30" />
+          <polyline class="check-mark" points="20,34 28,42 44,24" />
+        </svg>
+      `;
+    }
+    const paths = {
+      error: html`<svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <circle cx="12" cy="12" r="10" />
+        <line x1="15" y1="9" x2="9" y2="15" />
+        <line x1="9" y1="9" x2="15" y2="15" />
+      </svg>`,
+      warning: html`<svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path
+          d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"
+        />
+        <line x1="12" y1="9" x2="12" y2="13" />
+        <line x1="12" y1="17" x2="12.01" y2="17" />
+      </svg>`,
+      info: html`<svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <circle cx="12" cy="12" r="10" />
+        <line x1="12" y1="16" x2="12" y2="12" />
+        <line x1="12" y1="8" x2="12.01" y2="8" />
+      </svg>`
+    };
+    return html` <div class="icon-container icon-${icon}">${paths[icon] ?? nothing}</div> `;
+  }
+  _renderSpinner() {
+    return html`
+      <div class="spinner">
+        <div class="spinner-half">
+          <div class="spinner-inner"></div>
+        </div>
+      </div>
+    `;
+  }
+  _renderTaskIcon(status) {
+    switch (status) {
+      case "active":
+        return html`
+          <div class="mini-spinner">
+            <div class="mini-spinner-half">
+              <div class="mini-spinner-inner"></div>
+            </div>
+          </div>
+        `;
+      case "done":
+        return html`<svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="#22c55e"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <circle cx="12" cy="12" r="10" />
+          <polyline points="9,12 11,14 15,10" />
+        </svg>`;
+      case "error":
+        return html`<svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="#ef4444"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <circle cx="12" cy="12" r="10" />
+          <line x1="15" y1="9" x2="9" y2="15" />
+          <line x1="9" y1="9" x2="15" y2="15" />
+        </svg>`;
+      case "skipped":
+        return html`<svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="#9ca3af"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <circle cx="12" cy="12" r="10" />
+          <line x1="8" y1="12" x2="16" y2="12" />
+        </svg>`;
+      case "pending":
       default:
-        this._iconElement.innerHTML = "";
-        break;
+        return html`<svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="#d1d5db"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <circle cx="12" cy="12" r="10" />
+        </svg>`;
     }
-    this._titleElement.textContent = this.#title;
-    if (this.#html) {
-      this._contentElement.innerHTML = this.#html;
-    } else {
-      if (this.#label instanceof Array) {
-        this._contentElement.innerHTML = `<div>${this.#label.join("</div><div>")}</div>`;
-      } else {
-        this._contentElement.textContent = this.#label;
+  }
+  _getQueueWindow(items) {
+    const total = items.length;
+    if (total <= 4) return { start: 0, end: total - 1 };
+    let centerIdx = items.findIndex((i) => i.status === "active");
+    if (centerIdx < 0) {
+      const finishedStatuses = /* @__PURE__ */ new Set(["done", "skipped", "error"]);
+      const lastFinishedIdx = items.reduce(
+        (acc, item, i) => finishedStatuses.has(item.status) ? i : acc,
+        -1
+      );
+      centerIdx = lastFinishedIdx >= 0 ? Math.min(lastFinishedIdx + 1, total - 1) : 0;
+    }
+    const s3 = Math.max(0, Math.min(centerIdx - 1, total - 3));
+    const e3 = Math.min(total - 1, s3 + 2);
+    const hasTop = s3 > 0;
+    const hasBottom = e3 < total - 1;
+    if (hasTop && hasBottom) {
+      return { start: s3, end: e3 };
+    }
+    if (!hasTop) {
+      return { start: 0, end: 3 };
+    }
+    return { start: total - 4, end: total - 1 };
+  }
+  _renderQueueList(items) {
+    const total = items.length;
+    const { start, end } = this._getQueueWindow(items);
+    const visible = items.slice(start, end + 1);
+    return html`
+      <ul class="task-list">
+        ${start > 0 ? html`<li class="queue-ellipsis" aria-hidden="true">
+              <span></span><span></span><span></span>
+            </li>` : nothing}
+        ${visible.map(
+      (item) => html`
+            <li class="task-item">
+              <span class="task-icon">${this._renderTaskIcon(item.status)}</span>
+              <span class="task-label" data-status=${item.status}>${item.label}</span>
+            </li>
+          `
+    )}
+        ${end < total - 1 ? html`<li class="queue-ellipsis" aria-hidden="true">
+              <span></span><span></span><span></span>
+            </li>` : nothing}
+      </ul>
+    `;
+  }
+  _renderStepsHeader(items) {
+    const fragments = [];
+    items.forEach((item, i) => {
+      if (i > 0) {
+        fragments.push(html`<div class="step-connector"></div>`);
       }
+      fragments.push(html`<div class="step-dot" data-status=${item.status}></div>`);
+    });
+    return html`<div class="steps-header">${fragments}</div>`;
+  }
+  _renderStepsList(items) {
+    return html`
+      ${this._renderStepsHeader(items)}
+      <ul class="task-list">
+        ${items.map(
+      (item) => html`
+            <li class="task-item">
+              <span class="task-icon">${this._renderTaskIcon(item.status)}</span>
+              <span class="task-label" data-status=${item.status}>${item.label}</span>
+            </li>
+          `
+    )}
+      </ul>
+    `;
+  }
+  _renderButtons() {
+    const s = this._state;
+    if (!s.showConfirmButton && !s.showCancelButton) return nothing;
+    return html`
+      <div class="actions">
+        ${s.showConfirmButton ? html`<button class="btn btn-confirm" @click=${() => this.controller.onConfirm()}>
+              ${s.confirmButtonText}
+            </button>` : nothing}
+        ${s.showCancelButton ? html`<button class="btn btn-cancel" @click=${() => this.controller.onCancel()}>
+              ${s.cancelButtonText}
+            </button>` : nothing}
+      </div>
+    `;
+  }
+  _renderBody() {
+    const s = this._state;
+    switch (s.dialogType) {
+      case "loading":
+        return html`
+          ${this._renderSpinner()} ${s.label ? html`<p class="label">${s.label}</p>` : nothing}
+          ${s.description ? html`<p class="description">${s.description}</p>` : nothing}
+        `;
+      case "alert":
+      case "confirm":
+        return html`
+          ${this._renderIcon(s.icon)} ${s.label ? html`<p class="label">${s.label}</p>` : nothing}
+          ${s.description ? html`<p class="description">${s.description}</p>` : nothing}
+          ${s.html ? html`<div class="html-content">${unsafeHTML(s.html)}</div>` : nothing}
+          ${this._renderButtons()}
+        `;
+      case "queue":
+        return html`
+          ${s.label ? html`<p class="label">${s.label}</p>` : nothing}
+          ${this._renderQueueList(s.queues)}
+        `;
+      case "steps":
+        return html`
+          ${s.label ? html`<p class="label">${s.label}</p>` : nothing}
+          ${this._renderStepsList(s.steps)}
+        `;
+      default:
+        return html`${nothing}`;
     }
   }
+  render() {
+    const s = this._state;
+    return html`
+      <div class="backdrop" ?data-open=${s.open} @click=${this._onBackdropClick}>
+        <div class="card">
+          ${s.title ? html`<p class="dialog-title">${s.title}</p>` : nothing} ${this._renderBody()}
+          <div
+            class="progress-bar"
+            style="width:${s.progress ?? 0}%;opacity:${s.progress !== null ? 1 : 0}"
+          ></div>
+        </div>
+      </div>
+    `;
+  }
 };
+OverlayDialog.styles = overlayStyles;
+__decorateClass([
+  property({ attribute: false })
+], OverlayDialog.prototype, "controller", 2);
+__decorateClass([
+  state()
+], OverlayDialog.prototype, "_state", 2);
+OverlayDialog = __decorateClass([
+  customElement("overlay-dialog")
+], OverlayDialog);
 
-// src/utilities.ts
-var withLoading = (fn, label = "Loading...") => {
-  return async (...args) => {
-    const overlay = new LoadingOverlay({ label });
-    overlay.show();
-    try {
-      return await fn(...args);
-    } finally {
-      overlay.hide();
-    }
-  };
+// src/dialog.ts
+var _controller, _element, _DialogSingleton_instances, ensureElement_fn;
+var DialogSingleton = class {
+  constructor() {
+    __privateAdd(this, _DialogSingleton_instances);
+    __privateAdd(this, _controller, new DialogController());
+    __privateAdd(this, _element, null);
+  }
+  // ─── Core ────────────────────────────────────────────────
+  show(options) {
+    __privateMethod(this, _DialogSingleton_instances, ensureElement_fn).call(this);
+    __privateGet(this, _controller).show(options);
+  }
+  hide() {
+    __privateGet(this, _controller).hide();
+  }
+  // ─── Alert / Confirm ─────────────────────────────────────
+  alert(optionsOrLabel) {
+    __privateMethod(this, _DialogSingleton_instances, ensureElement_fn).call(this);
+    return __privateGet(this, _controller).alert(optionsOrLabel);
+  }
+  confirm(optionsOrLabel) {
+    __privateMethod(this, _DialogSingleton_instances, ensureElement_fn).call(this);
+    return __privateGet(this, _controller).confirm(optionsOrLabel);
+  }
+  // ─── Loading helpers ─────────────────────────────────────
+  loading(label) {
+    __privateMethod(this, _DialogSingleton_instances, ensureElement_fn).call(this);
+    __privateGet(this, _controller).loading(label);
+  }
+  progress(percent) {
+    __privateGet(this, _controller).progress(percent);
+  }
+  label(label) {
+    __privateGet(this, _controller).label(label);
+  }
+  description(description) {
+    __privateGet(this, _controller).description(description);
+  }
+  // ─── Queue ───────────────────────────────────────────────
+  setQueues(labels) {
+    __privateGet(this, _controller).setQueues(labels);
+  }
+  queue(labels, title) {
+    __privateMethod(this, _DialogSingleton_instances, ensureElement_fn).call(this);
+    __privateGet(this, _controller).queue(labels, title);
+  }
+  startQueue(label) {
+    __privateGet(this, _controller).startQueue(label);
+  }
+  finishQueue(label) {
+    __privateGet(this, _controller).finishQueue(label);
+  }
+  skipQueue(label) {
+    __privateGet(this, _controller).skipQueue(label);
+  }
+  errorQueue(label) {
+    __privateGet(this, _controller).errorQueue(label);
+  }
+  queueTitle(title) {
+    __privateGet(this, _controller).queueTitle(title);
+  }
+  clearQueues() {
+    __privateGet(this, _controller).clearQueues();
+  }
+  // ─── Steps ───────────────────────────────────────────────
+  setSteps(labels) {
+    __privateGet(this, _controller).setSteps(labels);
+  }
+  steps(labels) {
+    __privateMethod(this, _DialogSingleton_instances, ensureElement_fn).call(this);
+    __privateGet(this, _controller).steps(labels);
+  }
+  startStep(label) {
+    __privateGet(this, _controller).startStep(label);
+  }
+  finishStep(label) {
+    __privateGet(this, _controller).finishStep(label);
+  }
+  skipStep(label) {
+    __privateGet(this, _controller).skipStep(label);
+  }
+  errorStep(label) {
+    __privateGet(this, _controller).errorStep(label);
+  }
+  clearSteps() {
+    __privateGet(this, _controller).clearSteps();
+  }
+  // ─── Advanced ────────────────────────────────────────────
+  get controller() {
+    return __privateGet(this, _controller);
+  }
+};
+_controller = new WeakMap();
+_element = new WeakMap();
+_DialogSingleton_instances = new WeakSet();
+ensureElement_fn = function() {
+  if (__privateGet(this, _element)) return;
+  if (typeof document === "undefined") return;
+  const el = document.createElement("overlay-dialog");
+  el.controller = __privateGet(this, _controller);
+  document.body.appendChild(el);
+  __privateSet(this, _element, el);
 };
+var dialog = new DialogSingleton();
 export {
-  ATTRIBUTE_ANIMATION,
-  LoadingOverlay,
-  Modal,
-  TaskListOverlay,
-  withLoading
+  DialogController,
+  OverlayDialog,
+  dialog
 };
 //# sourceMappingURL=index.js.map