@konomi-app/ui 5.1.0 → 5.3.2

package/dist/index.js

@@ -35,14 +35,168 @@ var createInitialState = () => ({
   queues: [],
   steps: [],
   timer: null,
-  title: ""
+  title: "",
+  formFields: [],
+  formValues: {},
+  formErrors: {},
+  formTouched: {},
+  formLayout: {},
+  formValidateOnChange: true,
+  formValidateOnBlur: true,
+  stepFormSteps: [],
+  stepFormCurrentIndex: 0,
+  stepFormNextText: "\u6B21\u3078",
+  stepFormPrevText: "\u623B\u308B",
+  stepFormSubmitText: "OK"
 });
 
+// src/zod-utils.ts
+function resolveTypeName(field) {
+  const raw = field._def.typeName ?? field._def.type;
+  if (!raw) return "";
+  const v4Map = {
+    string: "ZodString",
+    number: "ZodNumber",
+    boolean: "ZodBoolean",
+    enum: "ZodEnum",
+    date: "ZodDate",
+    optional: "ZodOptional",
+    nullable: "ZodNullable",
+    default: "ZodDefault",
+    object: "ZodObject",
+    pipe: "ZodPipe"
+  };
+  return v4Map[raw] ?? raw;
+}
+function unwrapType(zodType) {
+  let inner = zodType;
+  let required = true;
+  let defaultValue = void 0;
+  let description = zodType.description ?? "";
+  while (true) {
+    const typeName = resolveTypeName(inner);
+    if (typeName === "ZodOptional" || typeName === "ZodNullable") {
+      required = false;
+      inner = inner._def.innerType;
+    } else if (typeName === "ZodDefault") {
+      const raw = inner._def.defaultValue;
+      defaultValue = typeof raw === "function" ? raw() : raw;
+      inner = inner._def.innerType;
+    } else if (typeName === "ZodEffects") {
+      inner = inner._def.schema;
+    } else {
+      break;
+    }
+    if (!description && inner.description) {
+      description = inner.description;
+    }
+  }
+  return { inner, required, defaultValue, description };
+}
+function extractFieldMeta(key, zodType) {
+  const { inner, required, defaultValue, description } = unwrapType(zodType);
+  const typeName = resolveTypeName(inner);
+  let inputType;
+  let options = [];
+  let min;
+  let max;
+  let minLength;
+  let maxLength;
+  switch (typeName) {
+    case "ZodString": {
+      inputType = "text";
+      if (inner.format === "email") inputType = "email";
+      else if (inner.format === "url") inputType = "url";
+      if (inner.minLength != null) minLength = inner.minLength;
+      if (inner.maxLength != null) maxLength = inner.maxLength;
+      const checks = inner._def.checks ?? [];
+      for (const check of checks) {
+        const kind = check.kind ?? check.def?.check;
+        const fmt = check.format ?? check.def?.format;
+        if (!fmt && (kind === "email" || fmt === "email")) inputType = "email";
+        else if (!fmt && (kind === "url" || fmt === "url")) inputType = "url";
+        else if (fmt === "email" && inputType === "text") inputType = "email";
+        else if (fmt === "url" && inputType === "text") inputType = "url";
+        if (kind === "min" && check.value != null && minLength == null) minLength = check.value;
+        if (kind === "max" && check.value != null && maxLength == null) maxLength = check.value;
+      }
+      break;
+    }
+    case "ZodNumber": {
+      inputType = "number";
+      if (inner.minValue != null) min = inner.minValue;
+      if (inner.maxValue != null) max = inner.maxValue;
+      if (min == null || max == null) {
+        const checks = inner._def.checks ?? [];
+        for (const check of checks) {
+          if (check.kind === "min" && check.value != null && min == null) min = check.value;
+          if (check.kind === "max" && check.value != null && max == null) max = check.value;
+        }
+      }
+      break;
+    }
+    case "ZodBoolean":
+      inputType = "checkbox";
+      break;
+    case "ZodEnum": {
+      inputType = "select";
+      if (inner.options?.length) {
+        options = [...inner.options];
+      } else if (inner._def.entries) {
+        options = Object.values(inner._def.entries);
+      } else if (inner._def.values?.length) {
+        options = [...inner._def.values];
+      }
+      break;
+    }
+    case "ZodNativeEnum": {
+      inputType = "select";
+      const enumValues = inner._def.values;
+      if (enumValues) {
+        options = Object.values(enumValues).filter((v) => typeof v === "string");
+      }
+      break;
+    }
+    case "ZodDate":
+      inputType = "date";
+      break;
+    default:
+      return null;
+  }
+  const label = description || key;
+  return {
+    key,
+    inputType,
+    label,
+    description: description && description !== label ? description : "",
+    required,
+    options,
+    placeholder: "",
+    min,
+    max,
+    minLength,
+    maxLength,
+    defaultValue
+  };
+}
+function extractFormFields(schema) {
+  const shapeDef = schema._def.shape;
+  if (!shapeDef) return [];
+  const shape = typeof shapeDef === "function" ? shapeDef() : shapeDef;
+  if (!shape) return [];
+  const fields = [];
+  for (const [key, zodType] of Object.entries(shape)) {
+    const meta = extractFieldMeta(key, zodType);
+    if (meta) fields.push(meta);
+  }
+  return fields;
+}
+
 // src/controller.ts
 function normalizeItemInput(input) {
   return typeof input === "string" ? { key: input, label: input } : input;
 }
-var _state, _listeners, _resolver, _timerId, _DialogController_instances, emit_fn, update_fn, createPromise_fn, resolve_fn, clearTimer_fn, updateItemStatus_fn;
+var _state, _listeners, _resolver, _timerId, _formSchema, _formResult, _stepFormSchemas, _stepFormResults, _DialogController_instances, emit_fn, update_fn, validateFormField_fn, updateCurrentStep_fn, validateStepField_fn, createPromise_fn, resolve_fn, clearTimer_fn, updateItemStatus_fn;
 var DialogController = class {
   constructor() {
     __privateAdd(this, _DialogController_instances);
@@ -50,6 +204,10 @@ var DialogController = class {
     __privateAdd(this, _listeners, /* @__PURE__ */ new Set());
     __privateAdd(this, _resolver, null);
     __privateAdd(this, _timerId, null);
+    __privateAdd(this, _formSchema, null);
+    __privateAdd(this, _formResult, null);
+    __privateAdd(this, _stepFormSchemas, []);
+    __privateAdd(this, _stepFormResults, {});
     __privateSet(this, _state, createInitialState());
   }
   // ─── Observable ──────────────────────────────────────────
@@ -195,9 +353,202 @@ var DialogController = class {
   clearSteps() {
     __privateMethod(this, _DialogController_instances, update_fn).call(this, { steps: [] });
   }
+  // ─── Form ─────────────────────────────────────────────────
+  form(schema, options) {
+    __privateMethod(this, _DialogController_instances, clearTimer_fn).call(this);
+    __privateSet(this, _formSchema, schema);
+    __privateSet(this, _formResult, null);
+    const fields = extractFormFields(schema);
+    const defaultValues = {};
+    for (const field of fields) {
+      if (field.defaultValue !== void 0) {
+        defaultValues[field.key] = field.defaultValue;
+      }
+    }
+    if (options?.defaultValues) {
+      Object.assign(defaultValues, options.defaultValues);
+    }
+    __privateMethod(this, _DialogController_instances, update_fn).call(this, {
+      open: true,
+      dialogType: "form",
+      title: options?.title ?? "",
+      label: "",
+      description: options?.description ?? "",
+      icon: null,
+      showConfirmButton: true,
+      showCancelButton: true,
+      confirmButtonText: options?.confirmButtonText ?? "OK",
+      cancelButtonText: options?.cancelButtonText ?? "\u30AD\u30E3\u30F3\u30BB\u30EB",
+      allowOutsideClick: options?.allowOutsideClick ?? false,
+      allowEscapeKey: options?.allowEscapeKey ?? true,
+      progress: null,
+      timer: null,
+      formFields: fields,
+      formValues: defaultValues,
+      formErrors: {},
+      formTouched: {},
+      formLayout: options?.layout ?? {},
+      formValidateOnChange: options?.validateOnChange ?? true,
+      formValidateOnBlur: options?.validateOnBlur ?? true
+    });
+    return __privateMethod(this, _DialogController_instances, createPromise_fn).call(this, null).then((r) => {
+      const data = __privateGet(this, _formResult);
+      __privateSet(this, _formSchema, null);
+      __privateSet(this, _formResult, null);
+      return r.isConfirmed ? data : null;
+    });
+  }
+  updateFormField(key, value) {
+    const formValues = { ...__privateGet(this, _state).formValues, [key]: value };
+    const formTouched = { ...__privateGet(this, _state).formTouched, [key]: true };
+    let formErrors = { ...__privateGet(this, _state).formErrors };
+    if (__privateGet(this, _formSchema) && __privateGet(this, _state).formValidateOnChange) {
+      formErrors = __privateMethod(this, _DialogController_instances, validateFormField_fn).call(this, key, formValues, formErrors);
+    }
+    __privateMethod(this, _DialogController_instances, update_fn).call(this, { formValues, formTouched, formErrors });
+  }
+  touchFormField(key) {
+    const formTouched = { ...__privateGet(this, _state).formTouched, [key]: true };
+    let formErrors = { ...__privateGet(this, _state).formErrors };
+    if (__privateGet(this, _formSchema) && __privateGet(this, _state).formValidateOnBlur) {
+      formErrors = __privateMethod(this, _DialogController_instances, validateFormField_fn).call(this, key, __privateGet(this, _state).formValues, formErrors);
+    }
+    __privateMethod(this, _DialogController_instances, update_fn).call(this, { formTouched, formErrors });
+  }
+  // ─── Step Form ───────────────────────────────────────────
+  showStepForm(steps, options) {
+    __privateMethod(this, _DialogController_instances, clearTimer_fn).call(this);
+    __privateSet(this, _stepFormSchemas, steps.map((s) => s.schema ?? null));
+    __privateSet(this, _stepFormResults, {});
+    const stepFormSteps = steps.map((s) => {
+      const fields = s.schema ? extractFormFields(s.schema) : [];
+      const values = {};
+      for (const f of fields) {
+        if (f.defaultValue !== void 0) values[f.key] = f.defaultValue;
+      }
+      if (s.defaultValues) Object.assign(values, s.defaultValues);
+      return {
+        key: s.key,
+        label: s.label,
+        description: s.description ?? "",
+        fields,
+        values,
+        errors: {},
+        touched: {},
+        layout: s.layout ?? {}
+      };
+    });
+    __privateMethod(this, _DialogController_instances, update_fn).call(this, {
+      open: true,
+      dialogType: "step-form",
+      title: options?.title ?? "",
+      label: "",
+      description: "",
+      icon: null,
+      showConfirmButton: false,
+      showCancelButton: false,
+      allowOutsideClick: options?.allowOutsideClick ?? false,
+      allowEscapeKey: options?.allowEscapeKey ?? true,
+      progress: null,
+      timer: null,
+      stepFormSteps,
+      stepFormCurrentIndex: 0,
+      stepFormNextText: options?.nextButtonText ?? "\u6B21\u3078",
+      stepFormPrevText: options?.prevButtonText ?? "\u623B\u308B",
+      stepFormSubmitText: options?.submitButtonText ?? "OK",
+      cancelButtonText: options?.cancelButtonText ?? "\u30AD\u30E3\u30F3\u30BB\u30EB"
+    });
+    return __privateMethod(this, _DialogController_instances, createPromise_fn).call(this, null).then((r) => {
+      const data = __privateGet(this, _stepFormResults);
+      __privateSet(this, _stepFormSchemas, []);
+      __privateSet(this, _stepFormResults, {});
+      return r.isConfirmed ? data : null;
+    });
+  }
+  onStepNext() {
+    const s = __privateGet(this, _state);
+    const idx = s.stepFormCurrentIndex;
+    const step = s.stepFormSteps[idx];
+    if (!step) return;
+    const schema = __privateGet(this, _stepFormSchemas)[idx];
+    if (schema) {
+      const result = schema.safeParse(step.values);
+      if (!result.success) {
+        const errors = {};
+        for (const issue of result.error.issues) {
+          const key = issue.path[0]?.toString();
+          if (key && !errors[key]) errors[key] = issue.message;
+        }
+        const touched = {};
+        for (const f of step.fields) touched[f.key] = true;
+        __privateMethod(this, _DialogController_instances, updateCurrentStep_fn).call(this, { errors, touched });
+        return;
+      }
+      __privateGet(this, _stepFormResults)[step.key] = result.data;
+    }
+    const isLast = idx === s.stepFormSteps.length - 1;
+    if (isLast) {
+      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);
+      return;
+    }
+    __privateMethod(this, _DialogController_instances, update_fn).call(this, { stepFormCurrentIndex: idx + 1 });
+  }
+  onStepPrev() {
+    const idx = __privateGet(this, _state).stepFormCurrentIndex;
+    if (idx <= 0) return;
+    __privateMethod(this, _DialogController_instances, update_fn).call(this, { stepFormCurrentIndex: idx - 1 });
+  }
+  updateStepFormField(fieldKey, value) {
+    const s = __privateGet(this, _state);
+    const idx = s.stepFormCurrentIndex;
+    const step = s.stepFormSteps[idx];
+    if (!step) return;
+    const values = { ...step.values, [fieldKey]: value };
+    const touched = { ...step.touched, [fieldKey]: true };
+    let errors = { ...step.errors };
+    const schema = __privateGet(this, _stepFormSchemas)[idx];
+    if (schema && s.formValidateOnChange) {
+      errors = __privateMethod(this, _DialogController_instances, validateStepField_fn).call(this, schema, fieldKey, values, errors);
+    }
+    __privateMethod(this, _DialogController_instances, updateCurrentStep_fn).call(this, { values, touched, errors });
+  }
+  touchStepFormField(fieldKey) {
+    const s = __privateGet(this, _state);
+    const idx = s.stepFormCurrentIndex;
+    const step = s.stepFormSteps[idx];
+    if (!step) return;
+    const touched = { ...step.touched, [fieldKey]: true };
+    let errors = { ...step.errors };
+    const schema = __privateGet(this, _stepFormSchemas)[idx];
+    if (schema && s.formValidateOnBlur) {
+      errors = __privateMethod(this, _DialogController_instances, validateStepField_fn).call(this, schema, fieldKey, step.values, errors);
+    }
+    __privateMethod(this, _DialogController_instances, updateCurrentStep_fn).call(this, { touched, errors });
+  }
   // ─── Button actions (called from the component) ──────────
   onConfirm() {
     __privateMethod(this, _DialogController_instances, clearTimer_fn).call(this);
+    if (__privateGet(this, _state).dialogType === "form" && __privateGet(this, _formSchema)) {
+      const result = __privateGet(this, _formSchema).safeParse(__privateGet(this, _state).formValues);
+      if (!result.success) {
+        const formErrors = {};
+        for (const issue of result.error.issues) {
+          const key = issue.path[0]?.toString();
+          if (key && !formErrors[key]) {
+            formErrors[key] = issue.message;
+          }
+        }
+        const formTouched = {};
+        for (const field of __privateGet(this, _state).formFields) {
+          formTouched[field.key] = true;
+        }
+        __privateMethod(this, _DialogController_instances, update_fn).call(this, { formErrors, formTouched });
+        return;
+      }
+      __privateSet(this, _formResult, result.data);
+    }
     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);
@@ -221,6 +572,10 @@ _state = new WeakMap();
 _listeners = new WeakMap();
 _resolver = new WeakMap();
 _timerId = new WeakMap();
+_formSchema = new WeakMap();
+_formResult = new WeakMap();
+_stepFormSchemas = new WeakMap();
+_stepFormResults = new WeakMap();
 _DialogController_instances = new WeakSet();
 emit_fn = function() {
   const snapshot = { ...__privateGet(this, _state) };
@@ -230,6 +585,47 @@ update_fn = function(patch) {
   Object.assign(__privateGet(this, _state), patch);
   __privateMethod(this, _DialogController_instances, emit_fn).call(this);
 };
+validateFormField_fn = function(key, values, errors) {
+  const result = __privateGet(this, _formSchema).safeParse(values);
+  const updated = { ...errors };
+  if (result.success) {
+    delete updated[key];
+  } else {
+    const fieldIssue = result.error.issues.find(
+      (issue) => issue.path[0]?.toString() === key
+    );
+    if (fieldIssue) {
+      updated[key] = fieldIssue.message;
+    } else {
+      delete updated[key];
+    }
+  }
+  return updated;
+};
+updateCurrentStep_fn = function(patch) {
+  const idx = __privateGet(this, _state).stepFormCurrentIndex;
+  const stepFormSteps = __privateGet(this, _state).stepFormSteps.map(
+    (st, i) => i === idx ? { ...st, ...patch } : st
+  );
+  __privateMethod(this, _DialogController_instances, update_fn).call(this, { stepFormSteps });
+};
+validateStepField_fn = function(schema, fieldKey, values, errors) {
+  const result = schema.safeParse(values);
+  const updated = { ...errors };
+  if (result.success) {
+    delete updated[fieldKey];
+  } else {
+    const issue = result.error.issues.find(
+      (iss) => iss.path[0]?.toString() === fieldKey
+    );
+    if (issue) {
+      updated[fieldKey] = issue.message;
+    } else {
+      delete updated[fieldKey];
+    }
+  }
+  return updated;
+};
 // ─── Internal ────────────────────────────────────────────
 createPromise_fn = function(timer) {
   return new Promise((resolve) => {
@@ -266,6 +662,7 @@ updateItemStatus_fn = function(key, itemKey, status) {
 // src/overlay-dialog.ts
 import { LitElement, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import { keyed } from "lit/directives/keyed.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
 // src/styles.ts
@@ -282,7 +679,7 @@ var overlayStyles = css`
     --dialog-z-index: 1000;
     --dialog-backdrop-color: rgb(255 255 255 / 0.73);
     --dialog-backdrop-blur: 4px;
-    --dialog-transition-duration: 250ms;
+    --dialog-transition-duration: 280ms;
 
     /* Card */
     --dialog-card-bg: #fff;
@@ -317,6 +714,24 @@ var overlayStyles = css`
     --dialog-spinner-track: rgb(59 130 246 / 0.2);
     --dialog-spinner-arc: var(--dialog-primary);
 
+    /* Form */
+    --dialog-form-width: 500px;
+    --dialog-form-max-height: 60vh;
+    --dialog-form-gap: 16px;
+    --dialog-form-columns: 1;
+    --dialog-form-label-color: #374151;
+    --dialog-form-label-size: 13px;
+    --dialog-form-label-weight: 500;
+    --dialog-form-input-bg: #fff;
+    --dialog-form-input-border: #d1d5db;
+    --dialog-form-input-border-focus: var(--dialog-primary);
+    --dialog-form-input-radius: 6px;
+    --dialog-form-input-padding: 8px 12px;
+    --dialog-form-input-font-size: 14px;
+    --dialog-form-error-color: var(--dialog-error);
+    --dialog-form-hint-color: #9ca3af;
+    --dialog-form-required-color: var(--dialog-error);
+
     display: contents;
     font-family: var(--dialog-font-family);
     color: var(--dialog-text-color);
@@ -372,7 +787,6 @@ var overlayStyles = css`
     min-height: var(--dialog-card-min-height);
     position: relative;
     overflow: hidden;
-    transition: all var(--dialog-transition-duration) ease;
   }
 
   @media (min-width: 640px) {
@@ -384,22 +798,99 @@ var overlayStyles = css`
     }
   }
 
+  /* ─── Card Open / Close Animations ─── */
+
+  @keyframes card-enter {
+    from {
+      opacity: 0;
+      transform: translateY(28px) scale(0.96);
+      filter: blur(6px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+      filter: blur(0);
+    }
+  }
+
+  @keyframes card-exit {
+    from {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+      filter: blur(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateY(14px) scale(0.97);
+      filter: blur(4px);
+    }
+  }
+
+  .backdrop[data-open] .card {
+    animation: card-enter 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
+  }
+
+  .card[data-closing] {
+    animation: card-exit 300ms cubic-bezier(0.4, 0, 1, 1) both;
+    pointer-events: none;
+  }
+
   /* ─── Card Body ─── */
 
   .card-body {
     flex: 1;
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: stretch;
     justify-content: center;
+    width: 100%;
+  }
+
+  /* ─── Body Inner (animated content wrapper) ─── */
+
+  @keyframes body-enter {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+      filter: blur(3px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+      filter: blur(0);
+    }
+  }
+
+  .body-inner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     gap: 16px;
     width: 100%;
+    animation: body-enter 380ms 60ms cubic-bezier(0.16, 1, 0.3, 1) both;
   }
 
   /* ─── Spinner ─── */
 
-  .spinner {
+  @keyframes spinner-enter {
+    from {
+      opacity: 0;
+      transform: scale(0.5);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  .spinner-wrap {
     font-size: var(--dialog-spinner-size);
+    width: 1em;
+    height: 1em;
+    animation: spinner-enter 450ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
+  }
+
+  .spinner {
     width: 1em;
     height: 1em;
     border-radius: 50%;
@@ -440,6 +931,19 @@ var overlayStyles = css`
 
   /* ─── Icon ─── */
 
+  @keyframes icon-enter {
+    from {
+      opacity: 0;
+      transform: scale(0.4) rotate(-12deg);
+      filter: blur(4px);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1) rotate(0deg);
+      filter: blur(0);
+    }
+  }
+
   .icon-container {
     width: 64px;
     height: 64px;
@@ -448,6 +952,7 @@ var overlayStyles = css`
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
+    animation: icon-enter 500ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
   }
 
   .icon-container svg {
@@ -573,6 +1078,7 @@ var overlayStyles = css`
     gap: 8px;
     width: 100%;
     margin-top: 8px;
+    animation: body-enter 320ms 160ms cubic-bezier(0.16, 1, 0.3, 1) both;
   }
 
   @media (min-width: 640px) {
@@ -592,7 +1098,8 @@ var overlayStyles = css`
     font-weight: 500;
     transition:
       background-color 150ms ease,
-      transform 80ms ease;
+      transform 80ms ease,
+      box-shadow 150ms ease;
     min-width: 100px;
     text-align: center;
   }
@@ -608,6 +1115,7 @@ var overlayStyles = css`
 
   .btn-confirm:hover {
     background-color: var(--dialog-primary-hover);
+    box-shadow: 0 4px 12px rgb(59 130 246 / 0.35);
   }
 
   .btn-cancel {
@@ -631,11 +1139,48 @@ var overlayStyles = css`
     list-style: none;
   }
 
+  @keyframes task-item-enter {
+    from {
+      opacity: 0;
+      transform: translateX(-8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
   .task-item {
     display: flex;
     align-items: center;
     gap: 12px;
     font-size: 14px;
+    animation: task-item-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
+  }
+
+  .task-item:nth-child(1) {
+    animation-delay: 40ms;
+  }
+  .task-item:nth-child(2) {
+    animation-delay: 80ms;
+  }
+  .task-item:nth-child(3) {
+    animation-delay: 120ms;
+  }
+  .task-item:nth-child(4) {
+    animation-delay: 160ms;
+  }
+  .task-item:nth-child(5) {
+    animation-delay: 200ms;
+  }
+  .task-item:nth-child(6) {
+    animation-delay: 240ms;
+  }
+  .task-item:nth-child(7) {
+    animation-delay: 280ms;
+  }
+  .task-item:nth-child(8) {
+    animation-delay: 320ms;
   }
 
   .task-icon {
@@ -685,6 +1230,7 @@ var overlayStyles = css`
 
   .task-label {
     color: #6b7280;
+    transition: color 250ms ease;
   }
 
   .task-label[data-status='active'] {
@@ -692,8 +1238,21 @@ var overlayStyles = css`
     font-weight: 500;
   }
 
+  @keyframes task-done-flash {
+    0% {
+      transform: translateX(0);
+    }
+    30% {
+      transform: translateX(4px);
+    }
+    100% {
+      transform: translateX(0);
+    }
+  }
+
   .task-label[data-status='done'] {
     color: var(--dialog-success);
+    animation: task-done-flash 350ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
   }
 
   .task-label[data-status='error'] {
@@ -702,7 +1261,6 @@ var overlayStyles = css`
 
   .task-label[data-status='skipped'] {
     color: #9ca3af;
-    text-decoration: line-through;
   }
 
   /* ─── Queue ellipsis ─── */
@@ -738,17 +1296,54 @@ var overlayStyles = css`
     margin-bottom: 8px;
   }
 
+  @keyframes step-dot-enter {
+    from {
+      opacity: 0;
+      transform: scale(0.4);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes step-pulse {
+    0% {
+      box-shadow:
+        0 0 0 0 rgb(59 130 246 / 0.5),
+        0 0 0 3px rgb(59 130 246 / 0.2);
+    }
+    70% {
+      box-shadow:
+        0 0 0 7px rgb(59 130 246 / 0),
+        0 0 0 3px rgb(59 130 246 / 0.2);
+    }
+    100% {
+      box-shadow:
+        0 0 0 0 rgb(59 130 246 / 0),
+        0 0 0 3px rgb(59 130 246 / 0.2);
+    }
+  }
+
   .step-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background-color: #d1d5db;
-    transition: background-color 200ms ease;
+    transition:
+      background-color 250ms ease,
+      transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
+      width 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
+    animation: step-dot-enter 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
   }
 
   .step-dot[data-status='active'] {
     background-color: var(--dialog-primary);
-    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.2);
+    width: 20px;
+    border-radius: 4px;
+    animation:
+      step-dot-enter 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both,
+      step-pulse 2s 400ms infinite;
   }
 
   .step-dot[data-status='done'] {
@@ -768,6 +1363,205 @@ var overlayStyles = css`
     max-width: 24px;
     height: 2px;
     background-color: #e5e7eb;
+    transition: background-color 400ms ease;
+  }
+
+  /* ─── Form ─── */
+
+  @media (min-width: 640px) {
+    .card[data-type='form'] {
+      width: var(--dialog-form-width);
+    }
+  }
+
+  .form-scroll-container {
+    max-height: var(--dialog-form-max-height);
+    overflow-y: auto;
+    width: 100%;
+    padding: 4px 0;
+  }
+
+  .form-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--dialog-form-columns, 1), 1fr);
+    gap: var(--dialog-form-gap);
+    width: 100%;
+  }
+
+  @media (max-width: 639px) {
+    .form-grid {
+      grid-template-columns: 1fr !important;
+    }
+  }
+
+  .form-field {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    text-align: left;
+  }
+
+  .form-field[data-type='checkbox'] {
+    grid-column: 1 / -1;
+  }
+
+  .form-label {
+    font-size: var(--dialog-form-label-size);
+    font-weight: var(--dialog-form-label-weight);
+    color: var(--dialog-form-label-color);
+  }
+
+  .form-required {
+    color: var(--dialog-form-required-color);
+    margin-left: 2px;
+  }
+
+  .form-input,
+  .form-select {
+    padding: var(--dialog-form-input-padding);
+    font-size: var(--dialog-form-input-font-size);
+    font-family: inherit;
+    background: var(--dialog-form-input-bg);
+    border: 1px solid var(--dialog-form-input-border);
+    border-radius: var(--dialog-form-input-radius);
+    color: var(--dialog-text-color);
+    outline: none;
+    transition:
+      border-color 150ms ease,
+      box-shadow 150ms ease;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .form-input:focus,
+  .form-select:focus {
+    border-color: var(--dialog-form-input-border-focus);
+    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
+  }
+
+  .form-field[data-error] .form-input,
+  .form-field[data-error] .form-select {
+    border-color: var(--dialog-form-error-color);
+  }
+
+  .form-field[data-error] .form-input:focus,
+  .form-field[data-error] .form-select:focus {
+    box-shadow: 0 0 0 3px rgb(239 68 68 / 0.1);
+  }
+
+  .form-error {
+    font-size: 12px;
+    color: var(--dialog-form-error-color);
+    min-height: 1em;
+  }
+
+  .form-hint {
+    font-size: 12px;
+    color: var(--dialog-form-hint-color);
+  }
+
+  .form-checkbox {
+    width: 18px;
+    height: 18px;
+    accent-color: var(--dialog-primary);
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+
+  .form-checkbox-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    font-size: var(--dialog-form-input-font-size);
+    color: var(--dialog-form-label-color);
+  }
+
+  .form-checkbox-text {
+    font-size: var(--dialog-form-label-size);
+    font-weight: var(--dialog-form-label-weight);
+    color: var(--dialog-form-label-color);
+  }
+
+  .form-group {
+    border: 1px solid var(--dialog-card-border);
+    border-radius: var(--dialog-form-input-radius);
+    padding: 16px;
+    margin: 0 0 8px;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .form-group-label {
+    font-size: var(--dialog-form-label-size);
+    font-weight: 600;
+    color: var(--dialog-form-label-color);
+    padding: 0 4px;
+  }
+
+  /* ─── Step Form ─── */
+
+  @media (min-width: 640px) {
+    .card[data-type='step-form'] {
+      width: var(--dialog-form-width);
+    }
+  }
+
+  .step-form-counter {
+    font-size: 12px;
+    color: var(--dialog-form-hint-color);
+    text-align: center;
+    margin: 0 0 4px;
+  }
+
+  .actions-step-form {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8px;
+    margin-top: 20px;
+    width: 100%;
+  }
+
+  .step-form-nav {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .btn-prev {
+    padding: var(--dialog-btn-padding);
+    font-size: var(--dialog-btn-font-size);
+    font-family: inherit;
+    font-weight: 500;
+    border-radius: var(--dialog-btn-radius);
+    cursor: pointer;
+    border: 1px solid var(--dialog-form-input-border);
+    background: transparent;
+    color: var(--dialog-text-color);
+    transition: background-color 120ms ease, border-color 120ms ease;
+  }
+
+  .btn-prev:hover {
+    background: #f9fafb;
+    border-color: #9ca3af;
+  }
+
+  .btn-prev:active {
+    transform: scale(0.98);
+  }
+
+  @media (max-width: 639px) {
+    .actions-step-form {
+      flex-direction: column-reverse;
+    }
+
+    .step-form-nav {
+      width: 100%;
+      justify-content: flex-end;
+    }
   }
 `;
 
@@ -776,6 +1570,8 @@ var OverlayDialog = class extends LitElement {
   constructor() {
     super(...arguments);
     this._state = createInitialState();
+    this._bodyKey = 0;
+    this._isClosing = false;
     this._beforeUnloadHandler = (e) => e.preventDefault();
     this._onKeyDown = (e) => {
       if (e.key === "Escape" && this._state.open) {
@@ -789,13 +1585,27 @@ var OverlayDialog = class extends LitElement {
       this._state = { ...this.controller.state };
       this._unsubscribe = this.controller.subscribe((s) => {
         const wasOpen = this._state.open;
-        this._state = s;
-        this._syncBodyScroll(s.open);
+        const prevDialogType = this._state.dialogType;
+        const prevStepIndex = this._state.stepFormCurrentIndex;
         if (s.open && !wasOpen) {
+          this._isClosing = false;
+          clearTimeout(this._closeTimer);
           window.addEventListener("beforeunload", this._beforeUnloadHandler);
         } else if (!s.open && wasOpen) {
+          this._isClosing = true;
+          clearTimeout(this._closeTimer);
+          this._closeTimer = setTimeout(() => {
+            this._isClosing = false;
+          }, 320);
           window.removeEventListener("beforeunload", this._beforeUnloadHandler);
         }
+        if (s.open && s.dialogType !== prevDialogType) {
+          this._bodyKey++;
+        } else if (s.open && s.dialogType === "step-form" && s.stepFormCurrentIndex !== prevStepIndex) {
+          this._bodyKey++;
+        }
+        this._state = s;
+        this._syncBodyScroll(s.open);
       });
     }
     window.addEventListener("keydown", this._onKeyDown);
@@ -804,6 +1614,7 @@ var OverlayDialog = class extends LitElement {
     super.disconnectedCallback();
     this._unsubscribe?.();
     this._syncBodyScroll(false);
+    clearTimeout(this._closeTimer);
     window.removeEventListener("beforeunload", this._beforeUnloadHandler);
     window.removeEventListener("keydown", this._onKeyDown);
   }
@@ -879,9 +1690,11 @@ var OverlayDialog = class extends LitElement {
   }
   _renderSpinner() {
     return html`
-      <div class="spinner">
-        <div class="spinner-half">
-          <div class="spinner-inner"></div>
+      <div class="spinner-wrap">
+        <div class="spinner">
+          <div class="spinner-half">
+            <div class="spinner-inner"></div>
+          </div>
         </div>
       </div>
     `;
@@ -1019,6 +1832,187 @@ var OverlayDialog = class extends LitElement {
       </ul>
     `;
   }
+  // ─── Form Helpers ────────────────────────────────────────
+  _createFormContext() {
+    const s = this._state;
+    return {
+      getValue: (k) => s.formValues[k],
+      getError: (k) => s.formErrors[k] ?? "",
+      getTouched: (k) => !!s.formTouched[k],
+      onUpdate: (k, v) => this.controller.updateFormField(k, v),
+      onBlur: (k) => this.controller.touchFormField(k)
+    };
+  }
+  _createStepFormContext() {
+    const s = this._state;
+    const step = s.stepFormSteps[s.stepFormCurrentIndex];
+    return {
+      getValue: (k) => step?.values[k],
+      getError: (k) => step?.errors[k] ?? "",
+      getTouched: (k) => !!step?.touched[k],
+      onUpdate: (k, v) => this.controller.updateStepFormField(k, v),
+      onBlur: (k) => this.controller.touchStepFormField(k)
+    };
+  }
+  _getOrderedFields(fields, layout) {
+    const order = layout.fieldOrder;
+    if (!order?.length) return fields;
+    const fieldMap = new Map(fields.map((f) => [f.key, f]));
+    const ordered = [];
+    for (const key of order) {
+      const f = fieldMap.get(key);
+      if (f) {
+        ordered.push(f);
+        fieldMap.delete(key);
+      }
+    }
+    for (const f of fieldMap.values()) {
+      ordered.push(f);
+    }
+    return ordered;
+  }
+  _renderFormGrid(fields, columns, gap, ctx) {
+    return html`
+      <div class="form-grid" style="--dialog-form-columns:${columns}; gap:${gap}">
+        ${fields.map((f) => this._renderFormField(f, ctx))}
+      </div>
+    `;
+  }
+  _renderGroupedForm(allFields, groups, layout, ctx) {
+    const fieldMap = new Map(allFields.map((f) => [f.key, f]));
+    const usedKeys = /* @__PURE__ */ new Set();
+    const gap = layout.gap ?? "16px";
+    const groupFragments = groups.map((group) => {
+      const groupFields = [];
+      for (const key of group.fields) {
+        const f = fieldMap.get(key);
+        if (f) {
+          groupFields.push(f);
+          usedKeys.add(key);
+        }
+      }
+      if (!groupFields.length) return nothing;
+      const cols = group.columns ?? layout.columns ?? 1;
+      return html`
+        <fieldset class="form-group">
+          ${group.label ? html`<legend class="form-group-label">${group.label}</legend>` : nothing}
+          ${this._renderFormGrid(groupFields, cols, gap, ctx)}
+        </fieldset>
+      `;
+    });
+    const remaining = allFields.filter((f) => !usedKeys.has(f.key));
+    return html`
+      ${groupFragments}
+      ${remaining.length ? this._renderFormGrid(remaining, layout.columns ?? 1, gap, ctx) : nothing}
+    `;
+  }
+  _renderForm(fields, layout, ctx) {
+    const ordered = this._getOrderedFields(fields, layout);
+    const gap = layout.gap ?? "16px";
+    if (layout.groups?.length) {
+      return this._renderGroupedForm(ordered, layout.groups, layout, ctx);
+    }
+    return this._renderFormGrid(ordered, layout.columns ?? 1, gap, ctx);
+  }
+  _renderFormField(field, ctx) {
+    const value = ctx.getValue(field.key);
+    const error = ctx.getError(field.key);
+    const touched = ctx.getTouched(field.key);
+    const showError = touched && !!error;
+    if (field.inputType === "checkbox") {
+      return html`
+        <div class="form-field" data-type="checkbox" ?data-error=${showError}>
+          <label class="form-checkbox-label">
+            <input
+              type="checkbox"
+              class="form-checkbox"
+              .checked=${!!value}
+              @change=${(e) => ctx.onUpdate(field.key, e.target.checked)}
+              @blur=${() => ctx.onBlur(field.key)}
+            />
+            <span class="form-checkbox-text">
+              ${field.label}
+              ${field.required ? html`<span class="form-required">*</span>` : nothing}
+            </span>
+          </label>
+          ${showError ? html`<span class="form-error">${error}</span>` : nothing}
+        </div>
+      `;
+    }
+    return html`
+      <div class="form-field" data-type=${field.inputType} ?data-error=${showError}>
+        <label class="form-label" for="form-${field.key}">
+          ${field.label} ${field.required ? html`<span class="form-required">*</span>` : nothing}
+        </label>
+        ${field.description ? html`<span class="form-hint">${field.description}</span>` : nothing}
+        ${this._renderFormInput(field, value, ctx)}
+        ${showError ? html`<span class="form-error">${error}</span>` : nothing}
+      </div>
+    `;
+  }
+  _renderFormInput(field, value, ctx) {
+    switch (field.inputType) {
+      case "select":
+        return html`
+          <select
+            class="form-select"
+            id="form-${field.key}"
+            @change=${(e) => ctx.onUpdate(field.key, e.target.value)}
+            @blur=${() => ctx.onBlur(field.key)}
+          >
+            <option value="" ?selected=${!value}>選択してください</option>
+            ${field.options.map(
+          (opt) => html`<option value=${opt} ?selected=${value === opt}>${opt}</option>`
+        )}
+          </select>
+        `;
+      case "number":
+        return html`
+          <input
+            type="number"
+            class="form-input"
+            id="form-${field.key}"
+            .value=${value != null ? String(value) : ""}
+            min=${field.min ?? nothing}
+            max=${field.max ?? nothing}
+            placeholder=${field.placeholder || nothing}
+            @input=${(e) => {
+          const v = e.target.valueAsNumber;
+          ctx.onUpdate(field.key, Number.isNaN(v) ? void 0 : v);
+        }}
+            @blur=${() => ctx.onBlur(field.key)}
+          />
+        `;
+      case "date":
+        return html`
+          <input
+            type="date"
+            class="form-input"
+            id="form-${field.key}"
+            .value=${value != null ? String(value) : ""}
+            @input=${(e) => {
+          const str = e.target.value;
+          ctx.onUpdate(field.key, str || void 0);
+        }}
+            @blur=${() => ctx.onBlur(field.key)}
+          />
+        `;
+      default:
+        return html`
+          <input
+            type=${field.inputType}
+            class="form-input"
+            id="form-${field.key}"
+            .value=${value ?? ""}
+            minlength=${field.minLength ?? nothing}
+            maxlength=${field.maxLength ?? nothing}
+            placeholder=${field.placeholder || nothing}
+            @input=${(e) => ctx.onUpdate(field.key, e.target.value)}
+            @blur=${() => ctx.onBlur(field.key)}
+          />
+        `;
+    }
+  }
   _renderButtons() {
     const s = this._state;
     if (!s.showConfirmButton && !s.showCancelButton) return nothing;
@@ -1033,6 +2027,39 @@ var OverlayDialog = class extends LitElement {
       </div>
     `;
   }
+  // ─── Step Form Helpers ───────────────────────────────────
+  _renderStepFormButtons() {
+    const s = this._state;
+    const isFirst = s.stepFormCurrentIndex === 0;
+    const isLast = s.stepFormCurrentIndex === s.stepFormSteps.length - 1;
+    const submitText = isLast ? s.stepFormSubmitText : s.stepFormNextText;
+    return html`
+      <div class="actions actions-step-form">
+        <button class="btn btn-cancel" @click=${() => this.controller.onCancel()}>
+          ${s.cancelButtonText}
+        </button>
+        <div class="step-form-nav">
+          ${isFirst ? nothing : html`
+                <button class="btn btn-prev" @click=${() => this.controller.onStepPrev()}>
+                  ${s.stepFormPrevText}
+                </button>
+              `}
+          <button class="btn btn-confirm" @click=${() => this.controller.onStepNext()}>
+            ${submitText}
+          </button>
+        </div>
+      </div>
+    `;
+  }
+  _deriveStepItems() {
+    const s = this._state;
+    return s.stepFormSteps.map((st, i) => {
+      let status = "pending";
+      if (i < s.stepFormCurrentIndex) status = "done";
+      else if (i === s.stepFormCurrentIndex) status = "active";
+      return { key: st.key, label: st.label, status };
+    });
+  }
   _renderBody() {
     const s = this._state;
     switch (s.dialogType) {
@@ -1059,18 +2086,51 @@ var OverlayDialog = class extends LitElement {
           ${s.label ? html`<p class="label">${s.label}</p>` : nothing}
           ${this._renderStepsList(s.steps)}
         `;
+      case "form": {
+        const ctx = this._createFormContext();
+        return html`
+          ${s.title ? html`<p class="label">${s.title}</p>` : nothing}
+          ${s.description ? html`<p class="description">${s.description}</p>` : nothing}
+          <div class="form-scroll-container">
+            ${this._renderForm(s.formFields, s.formLayout, ctx)}
+          </div>
+          ${this._renderButtons()}
+        `;
+      }
+      case "step-form": {
+        const stepItems = this._deriveStepItems();
+        const currentStep = s.stepFormSteps[s.stepFormCurrentIndex];
+        if (!currentStep) return html`${nothing}`;
+        const ctx = this._createStepFormContext();
+        const stepCount = s.stepFormSteps.length;
+        const counterText = `${s.stepFormCurrentIndex + 1} / ${stepCount}`;
+        return html`
+          ${this._renderStepsHeader(stepItems)}
+          <p class="step-form-counter">${counterText}</p>
+          <p class="label">${currentStep.label}</p>
+          ${currentStep.description ? html`<p class="description">${currentStep.description}</p>` : nothing}
+          ${currentStep.fields.length ? html`
+                <div class="form-scroll-container">
+                  ${this._renderForm(currentStep.fields, currentStep.layout, ctx)}
+                </div>
+              ` : nothing}
+          ${this._renderStepFormButtons()}
+        `;
+      }
       default:
         return html`${nothing}`;
     }
   }
   render() {
     const s = this._state;
-    const showHeaderTitle = s.title && s.dialogType !== "alert" && s.dialogType !== "confirm";
+    const showHeaderTitle = s.title && s.dialogType !== "alert" && s.dialogType !== "confirm" && s.dialogType !== "form" && s.dialogType !== "step-form";
     return html`
       <div class="backdrop" ?data-open=${s.open} @click=${this._onBackdropClick}>
-        <div class="card">
+        <div class="card" data-type=${s.dialogType} ?data-closing=${this._isClosing}>
           ${showHeaderTitle ? html`<p class="dialog-title">${s.title}</p>` : nothing}
-          <div class="card-body">${this._renderBody()}</div>
+          <div class="card-body">
+            ${keyed(this._bodyKey, html`<div class="body-inner">${this._renderBody()}</div>`)}
+          </div>
           <div
             class="progress-bar"
             style="width:${s.progress ?? 0}%;opacity:${s.progress !== null ? 1 : 0}"
@@ -1087,6 +2147,12 @@ __decorateClass([
 __decorateClass([
   state()
 ], OverlayDialog.prototype, "_state", 2);
+__decorateClass([
+  state()
+], OverlayDialog.prototype, "_bodyKey", 2);
+__decorateClass([
+  state()
+], OverlayDialog.prototype, "_isClosing", 2);
 OverlayDialog = __decorateClass([
   customElement("overlay-dialog")
 ], OverlayDialog);
@@ -1116,6 +2182,28 @@ var DialogSingleton = class {
     __privateMethod(this, _DialogSingleton_instances, ensureElement_fn).call(this);
     return __privateGet(this, _controller).confirm(optionsOrLabel);
   }
+  // ─── Form ──────────────────────────────────────────────────
+  form(schema, options) {
+    __privateMethod(this, _DialogSingleton_instances, ensureElement_fn).call(this);
+    return __privateGet(this, _controller).form(schema, options);
+  }
+  // ─── Step Form ─────────────────────────────────────────────
+  showStepForm(steps, options) {
+    __privateMethod(this, _DialogSingleton_instances, ensureElement_fn).call(this);
+    return __privateGet(this, _controller).showStepForm(steps, options);
+  }
+  onStepNext() {
+    __privateGet(this, _controller).onStepNext();
+  }
+  onStepPrev() {
+    __privateGet(this, _controller).onStepPrev();
+  }
+  updateStepFormField(fieldKey, value) {
+    __privateGet(this, _controller).updateStepFormField(fieldKey, value);
+  }
+  touchStepFormField(fieldKey) {
+    __privateGet(this, _controller).touchStepFormField(fieldKey);
+  }
   // ─── Loading helpers ─────────────────────────────────────
   showLoading(label) {
     __privateMethod(this, _DialogSingleton_instances, ensureElement_fn).call(this);