@konomi-app/ui 2.3.0 → 4.0.0

package/dist/index.js

@@ -1,5 +1,1158 @@
-export * from './loading-overlay';
-export * from './task-list-overlay';
-export * from './modal';
-export * from './utilities';
+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);
+
+// 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
+});
+
+// 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() {
+    __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() {
+    __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 });
+    }
+  }
+  // ─── 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) {
+    this.setQueues(labels);
+    this.show({ type: "queue" });
+  }
+  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");
+  }
+  clearSteps() {
+    __privateMethod(this, _DialogController_instances, update_fn).call(this, { steps: [] });
+  }
+  // ─── 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);
+  }
+  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);
+  }
+  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/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) {
+    :host {
+      font-size: var(--dialog-font-size-desktop);
+    }
+    .backdrop {
+      place-items: center;
+    }
+  }
+
+  /* ─── 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;
+  }
+
+  .spinner-half {
+    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(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 spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  /* ─── Icon ─── */
+
+  .icon-container {
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .icon-container svg {
+    width: 36px;
+    height: 36px;
+  }
+
+  .icon-success {
+    background-color: rgb(34 197 94 / 0.1);
+    color: var(--dialog-success);
+  }
+
+  .icon-error {
+    background-color: rgb(239 68 68 / 0.1);
+    color: var(--dialog-error);
+  }
+
+  .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;
+  }
+
+  @keyframes check-circle-draw {
+    to {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  @keyframes check-mark-draw {
+    to {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  /* ─── Text ─── */
+
+  .label {
+    font-size: 18px;
+    font-weight: 600;
+    color: #1f2937;
+    text-align: center;
+    margin: 0;
+    word-break: break-word;
+  }
+
+  .description {
+    font-size: 14px;
+    color: #6b7280;
+    text-align: center;
+    margin: 0;
+    word-break: break-word;
+    line-height: 1.6;
+  }
+
+  .html-content {
+    font-size: 14px;
+    color: #6b7280;
+    text-align: center;
+    word-break: break-word;
+    line-height: 1.6;
+    width: 100%;
+  }
+
+  /* ─── 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);
+  }
+
+  /* ─── Buttons ─── */
+
+  .actions {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: 100%;
+    margin-top: 8px;
+  }
+
+  @media (min-width: 640px) {
+    .actions {
+      flex-direction: row;
+      justify-content: center;
+    }
+  }
+
+  .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: 12px;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  .task-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 14px;
+  }
+
+  .task-icon {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .task-icon svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  .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;
+  }
+
+  .task-icon .mini-spinner-half {
+    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(to bottom, #000f, #0000);
+    -webkit-mask-image: linear-gradient(to bottom, #000f, #0000);
+  }
+
+  .task-icon .mini-spinner-inner {
+    width: 1em;
+    height: 1em;
+    border-radius: 50%;
+    box-shadow: inset 0 0 0 1px var(--dialog-spinner-arc);
+  }
+
+  .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/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);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._unsubscribe?.();
+    this._syncBodyScroll(false);
+    window.removeEventListener("beforeunload", this._beforeUnloadHandler);
+    window.removeEventListener("keydown", this._onKeyDown);
+  }
+  _syncBodyScroll(lock) {
+    if (lock) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+  }
+  // ─── 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:
+        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>`;
+    }
+  }
+  _getQueueWindow(items) {
+    const WINDOW = 3;
+    const total = items.length;
+    if (total <= WINDOW) 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 start = Math.max(0, Math.min(centerIdx - 1, total - WINDOW));
+    const end = Math.min(total - 1, start + WINDOW - 1);
+    return { start, end };
+  }
+  _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">
+          ${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/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) {
+    __privateMethod(this, _DialogSingleton_instances, ensureElement_fn).call(this);
+    __privateGet(this, _controller).queue(labels);
+  }
+  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);
+  }
+  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 {
+  DialogController,
+  OverlayDialog,
+  dialog
+};
 //# sourceMappingURL=index.js.map