mlform 0.1.0

package/dist/error-card-BwjPChwf.js

@@ -0,0 +1,195 @@
+import { i as u, r as g, x as s, a as b, n as p } from "./property-jKFNMQpR.js";
+import { t as x } from "./custom-element-ttkHUa8w.js";
+var f = Object.defineProperty, m = Object.getOwnPropertyDescriptor, h = (e, r, t) => r in e ? f(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t, d = (e, r, t, a) => {
+  for (var i = a > 1 ? void 0 : a ? m(r, t) : r, n = e.length - 1, c; n >= 0; n--)
+    (c = e[n]) && (i = (a ? c(r, t, i) : c(i)) || i);
+  return a && i && f(r, t, i), i;
+}, l = (e, r, t) => h(e, typeof r != "symbol" ? r + "" : r, t);
+class w extends Error {
+  statusCode;
+  code;
+  details;
+  constructor(r, t) {
+    super(r), this.name = "ApiError", this.statusCode = t?.statusCode, this.code = t?.code, this.details = t?.details;
+  }
+}
+let o = class extends u {
+  error = null;
+  retry;
+  /**
+   * Registers custom error configurations.
+   * @param map A record where keys are error identifiers and values are ErrorConfig objects.
+   */
+  static register(e) {
+    for (const r in e)
+      Object.hasOwn(e, r) && o._errorMap.set(r, e[r]);
+  }
+  constructor() {
+    super(), o.register(o.defaultErrorConfigs);
+  }
+  _getErrorConfig() {
+    return this.error ? o._errorMap.get("generic-error") || o.defaultErrorConfigs["generic-error"] : o._errorMap.get("generic-error");
+  }
+  render() {
+    if (!this.error)
+      return null;
+    const e = this._getErrorConfig(), r = e.details && this.error ? e.details(this.error) : [];
+    return s`
+      <div role="alertdialog" class="error-card-container">
+        <div class="error-card-icon">
+          ${g(e.icon)}
+        </div>
+        <h2 class="error-card-title">${e.title}</h2>
+        <p class="error-card-description">${e.description}</p>
+
+        ${r.length > 0 ? s`
+              <ul class="error-card-details-list">
+                ${r.map((t) => s`<li>${t}</li>`)}
+              </ul>
+            ` : ""}
+
+        <div class="error-card-actions">
+          <slot></slot>
+          ${this.retry ? s`
+                <button @click=${this.retry} class="error-card-button">
+                  Retry
+                </button>
+              ` : ""}
+        </div>
+      </div>
+    `;
+  }
+};
+l(o, "styles", b`
+    :host {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100dvh;
+      margin: 20px;
+      --card-bg: #ffffff;
+      --card-border: #e5e7eb;
+      --text-primary: #1f2937;
+      --text-secondary: #4b5563;
+      --error-icon-color: #ef4444;
+      --button-bg: #f3f4f6;
+      --button-text: #1f2937;
+      --button-hover-bg: #e5e7eb;
+      --list-text: #6b7280;
+    }
+
+    /* Dark mode styles */
+    html.dark :host {
+     display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100dvh;
+      margin: 20px;
+      --card-bg: #1f2937;
+      --card-border: #374151;
+      --text-primary: #f9fafb;
+      --text-secondary: #d1d5db;
+      --error-icon-color: #f87171;
+      --button-bg: #374151;
+      --button-text: #e5e7eb;
+      --button-hover-bg: #4b5563;
+      --list-text: #9ca3af;
+    }
+
+    .error-card-container {
+      background-color: var(--card-bg);
+      color: var(--text-primary);
+      border-radius: 5px; /* rounded-2xl */
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* subtle shadow */
+      padding: 1.5rem; /* p-6 */
+      border: 1px solid var(--card-border);
+      display: flex;
+      height: 100%;
+      width: 100%;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      gap: 1rem; /* space-y-4 */
+      animation: fade-slide-in 200ms ease-out forwards;
+    }
+
+    .error-card-icon {
+      color: var(--error-icon-color);
+      width: 3rem; /* w-12 */
+      height: 3rem; /* h-12 */
+    }
+
+    .error-card-title {
+      font-size: 1.25rem; /* text-xl */
+      font-weight: 600; /* font-semibold */
+    }
+
+    .error-card-description {
+      color: var(--text-secondary);
+    }
+
+    .error-card-details-list {
+      list-style: disc;
+      list-style-position: inside;
+      font-size: 0.875rem; /* text-sm */
+      color: var(--list-text);
+      text-align: left;
+      width: 100%;
+      max-width: 16rem; /* max-w-xs */
+    }
+
+    .error-card-actions {
+      display: flex;
+      justify-content: center;
+      gap: 1rem; /* gap-4 */
+      padding-top: 0.5rem; /* pt-2 */
+    }
+
+    .error-card-button {
+      padding: 0.5rem 1rem; /* px-4 py-2 */
+      background-color: var(--button-bg);
+      color: var(--button-text);
+      border-radius: 0.375rem; /* rounded-md */
+      transition: background-color 150ms ease-in-out; /* transition-colors */
+      cursor: pointer;
+      border: none;
+    }
+
+    .error-card-button:hover {
+      background-color: var(--button-hover-bg);
+    }
+
+    @keyframes fade-slide-in {
+      from {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+  `);
+l(o, "_errorMap", /* @__PURE__ */ new Map());
+l(o, "defaultErrorConfigs", {
+  "generic-error": {
+    icon: "",
+    title: "An Unexpected Error Occurred",
+    description: "We're sorry, something went wrong. Please try again."
+  }
+});
+d([
+  p({ type: Object })
+], o.prototype, "error", 2);
+d([
+  p({ type: Function })
+], o.prototype, "retry", 2);
+o = d([
+  x("error-card")
+], o);
+export {
+  w as ApiError,
+  o as ErrorCard
+};

package/dist/field-wrapper-DqIQl76d.js

@@ -0,0 +1,177 @@
+import { i as b, x as h, a as m, n as p } from "./property-jKFNMQpR.js";
+import { r as l } from "./state-CLlTRyl1.js";
+import { t as u } from "./custom-element-ttkHUa8w.js";
+var d = Object.defineProperty, f = Object.getOwnPropertyDescriptor, v = (e, t, s) => t in e ? d(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s, i = (e, t, s, a) => {
+  for (var o = a > 1 ? void 0 : a ? f(t, s) : t, n = e.length - 1, c; n >= 0; n--)
+    (c = e[n]) && (o = (a ? c(t, s, o) : c(o)) || o);
+  return a && o && d(t, s, o), o;
+}, g = (e, t, s) => v(e, t + "", s);
+let r = class extends b {
+  stateClass = "empty";
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("field-state", this.onFieldState);
+  }
+  disconnectedCallback() {
+    this.removeEventListener("field-state", this.onFieldState), super.disconnectedCallback();
+  }
+  firstUpdated() {
+    this.name = this.title.trim().toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/\s+/g, "_").replace(/[^\w_]/g, ""), this.descriptionVisible = !1, this.dispatchState();
+  }
+  toggleDescription = () => {
+    this.descriptionVisible = !this.descriptionVisible;
+  };
+  onFieldState = (e) => {
+    e.stopPropagation(), this.stateClass = e.detail.state, this.feedback = e.detail.message ?? "", this.value = e.detail.value, this.stateClass !== "empty" && this.name && this.dispatchState();
+  };
+  dispatchState() {
+    this.dispatchEvent(
+      new CustomEvent("wrapper", {
+        detail: { name: this.title, state: this.stateClass, value: this.value },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  render() {
+    const e = this.stateClass !== "empty" ? this.stateClass : "";
+    return h`
+      <div class="tile ${e}">
+        <header>
+          <label>${this.title}</label>
+          <button
+            class="help-btn"
+            aria-label="Help"
+            aria-expanded=${this.descriptionVisible}
+            ?disabled=${!this.description}
+            @click=${this.toggleDescription}
+          >
+            ?
+          </button>
+        </header>
+        <pre class="description ${this.descriptionVisible ? "show" : ""}">
+${this.description}
+</pre
+        >
+
+        <slot></slot>
+
+        <pre class="feedback ${this.stateClass}">${this.feedback}</pre>
+      </div>
+    `;
+  }
+};
+g(r, "styles", m`
+    :host {
+      display: block;
+      margin: 10px;
+    }
+    .tile {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      background: var(--ml-color-surface);
+      border: 1px solid var(--ml-color-border);
+      border-radius: var(--radius);
+      overflow: hidden;
+      padding: 1.5rem 2rem;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
+      transition: box-shadow 0.2s ease;
+    }
+    .tile:hover {
+      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
+    }
+    .tile::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 6px;
+      height: 100%;
+      background: var(--ml-color-accent);
+      transition: background 0.2s ease;
+    }
+    .tile.success::before {
+      background: var(--ml-color-success);
+    }
+    .tile.error::before {
+      background: var(--ml-color-error);
+    }
+    header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 0.25rem;
+    }
+    label {
+      font-weight: 600;
+      font-size: 1rem;
+      color: var(--ml-color-primary);
+    }
+    .help-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 28px;
+      height: 28px;
+      border: none;
+      border-radius: 50%;
+      background: var(--ml-color-accent);
+      color: #fff;
+      font-size: 1rem;
+      cursor: pointer;
+      transition: background 0.2s ease;
+    }
+    .help-btn:hover {
+      background: var(--ml-color-accent-h);
+    }
+    .help-btn:disabled {
+      background: var(--ml-color-secondary);
+      cursor: not-allowed;
+    }
+    .description {
+      display: none;
+      font-size: 0.875rem;
+      color: var(--ml-color-secondary);
+    }
+    .description.show {
+      display: block;
+    }
+    .feedback {
+      font-size: 0.8rem;
+      margin-top: 0.25rem;
+    }
+    .feedback.error {
+      color: var(--ml-color-error);
+    }
+    .feedback.success {
+      color: var(--ml-color-success);
+    }
+  `);
+i([
+  p({ type: String })
+], r.prototype, "title", 2);
+i([
+  p({ type: String })
+], r.prototype, "description", 2);
+i([
+  l()
+], r.prototype, "descriptionVisible", 2);
+i([
+  l()
+], r.prototype, "stateClass", 2);
+i([
+  l()
+], r.prototype, "feedback", 2);
+i([
+  l()
+], r.prototype, "value", 2);
+i([
+  p({ type: String, reflect: !0 })
+], r.prototype, "name", 2);
+r = i([
+  u("field-wrapper")
+], r);
+export {
+  r as FieldWrapper
+};

package/dist/ml-layout-Dx63KKf7.js

@@ -0,0 +1,332 @@
+import { i as m, B as u, x as n, a as b, n as h } from "./property-jKFNMQpR.js";
+import { r as f } from "./state-CLlTRyl1.js";
+import { t as p } from "./custom-element-ttkHUa8w.js";
+var d = Object.defineProperty, g = Object.getOwnPropertyDescriptor, v = (r, e, o) => e in r ? d(r, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : r[e] = o, c = (r, e, o, t) => {
+  for (var l = t > 1 ? void 0 : t ? g(e, o) : e, a = r.length - 1, i; a >= 0; a--)
+    (i = r[a]) && (l = (t ? i(e, o, l) : i(l)) || l);
+  return t && l && d(e, o, l), l;
+}, y = (r, e, o) => v(r, e + "", o);
+let s = class extends m {
+  inputs = {};
+  label = "Predict";
+  _mo;
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("wrapper", this._onWrapperChange);
+    const r = () => {
+      document.documentElement.classList.contains("dark") ? this.setAttribute("theme", "dark") : this.removeAttribute("theme");
+    };
+    r(), this._mo = new MutationObserver(r), this._mo.observe(document.documentElement, {
+      attributes: !0,
+      attributeFilter: ["class"]
+    });
+  }
+  disconnectedCallback() {
+    this.removeEventListener("wrapper", this._onWrapperChange), this._mo?.disconnect(), super.disconnectedCallback();
+  }
+  _onWrapperChange(r) {
+    this.inputs[r.detail.name] = [r.detail.value, r.detail.state], this.requestUpdate();
+  }
+  get _disableButton() {
+    const r = Object.values(this.inputs).every(
+      ([, t]) => t === "success"
+    ), e = this.querySelectorAll("field-wrapper").length, o = Object.keys(this.inputs).length;
+    return !(r && e === o);
+  }
+  async _onSubmit() {
+    const r = Object.fromEntries(
+      Object.entries(this.inputs).map(([e, [o]]) => [
+        e,
+        o instanceof Date ? o.toISOString() : o
+      ])
+    );
+    this._hideError();
+    try {
+      const e = await this.modelService.submit(r);
+      if (e === void 0)
+        throw new Error(
+          "La respuesta del servicio no es válida o llegó vacía."
+        );
+      this.dispatchEvent(
+        new CustomEvent("ml-submit", {
+          detail: { inputs: r, response: e },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    } catch (e) {
+      this._clearSlot(), this._showError(e);
+    }
+  }
+  _clearSlot() {
+    const r = document.querySelector('div[slot="report"]');
+    r && (r.innerHTML = "");
+  }
+  _showError(r) {
+    const e = this.shadowRoot?.querySelector(
+      "div[id='results-area']"
+    );
+    e && e.classList.remove("scroll-y");
+    const o = this.querySelector("div[slot='report']"), t = this.querySelector("div[slot='error']");
+    o && (o.style.display = "none"), t && (t.style.display = "block"), t && (t.innerHTML = "", u(
+      n`<error-card .error=${r.message}></error-card>`,
+      t
+    ));
+  }
+  _hideError() {
+    const r = this.shadowRoot?.querySelector(
+      "div[id='results-area']"
+    );
+    r && r.classList.add("scroll-y");
+    const e = this.querySelector("div[slot='report']"), o = this.querySelector("div[slot='error']");
+    e && (e.style.display = "block"), o && (o.style.display = "none");
+  }
+  render() {
+    return n`
+      <section class="left-section">
+        <form
+          id="dynamic-form"
+          method="post"
+          enctype="multipart/form-data"
+          style="display:flex;flex-direction:column;height:100%"
+        >
+          <div class="form-inputs scroll-y">
+            <div class="sticky-header"><h2>Form</h2></div>
+            <slot name="inputs"></slot>
+          </div>
+          <div class="form-actions">
+            <button
+              type="button"
+              class="predict-button"
+              @click=${this._onSubmit}
+              ?disabled=${this._disableButton}
+            >
+              ${this.label}
+            </button>
+          </div>
+        </form>
+      </section>
+
+      <section class="right-section">
+        <div id="results-area" class="results-area scroll-y">
+          <div class="sticky-header"><h2>Report</h2></div>
+            <slot name="report"></slot>
+            <slot name="error"></slot>
+          </div>
+        </div>
+      </section>
+    `;
+  }
+};
+y(s, "styles", b`
+    /* Light defaults (tokens live INSIDE the component) */
+:host {
+  color-scheme: light;
+
+  /* --- Design tokens (light) --- */
+  --ml-color-bg: #f5f7fa;
+  --ml-color-surface: #ffffff;
+  --ml-color-primary: #0f172a;     /* primary text */
+  --ml-color-secondary: #475569;   /* secondary text */
+  --ml-color-accent: #1e40af;      /* brand / CTA */
+  --ml-color-accent-h: #1d4ed8;    /* brand hover */
+  --ml-color-accent-bg: rgba(29, 78, 216, 0.10);
+  --ml-color-bg-light: #f5f7fa;
+  --ml-color-bg-panel: #ffffff;
+  --ml-color-bg-header: rgba(255, 255, 255, 0.60); /* frosted header overlay */
+  --ml-color-border: #e2e8f0;
+  --ml-color-hv-light: #c7d2fe;
+  --ml-color-shadow: rgba(0, 0, 0, 0.04);
+  --ml-color-hv-shadow: rgba(0, 0, 0, 0.06);
+  --ml-color-error: #dc2626;
+  --ml-color-success: #059669;
+  --ml-color-focus-ring: rgba(29, 78, 216, 0.45);
+
+  --radius: 12px;
+  --skew: -12deg;
+  --unit-w: 1rem;
+  --blur-header: 3px;
+
+  /* --- Host box/layout --- */
+  display: flex;
+  flex-grow: 1;
+  overflow: hidden;
+  margin: 0;
+  background: var(--ml-color-bg); /* FIX: was --ml-color-primary */
+}
+
+/* Dark overrides via attribute (cross-browser, no :host-context) */
+:host([theme="dark"]) {
+  color-scheme: dark;
+
+  /* Surfaces & text */
+  --ml-color-bg:        #020617;  /* app background */
+  --ml-color-surface:   #0f172a;  /* cards/panels */
+  --ml-color-primary:   #e5e7eb;  /* primary text */
+  --ml-color-secondary: #94a3b8;  /* secondary text */
+
+  /* Brand & interaction */
+  --ml-color-accent:    #1d4ed8;
+  --ml-color-accent-h:  #60a5fa;
+  --ml-color-accent-bg: rgba(29, 78, 216, 0.22);
+
+  /* Background variants */
+  --ml-color-bg-light:  #0b1220;
+  --ml-color-bg-panel:  #0f172a;
+  --ml-color-bg-header: rgba(255, 255, 255, 0.06);
+
+  /* Strokes, highlights, elevation */
+  --ml-color-border:    #334155;
+  --ml-color-hv-light:  #1e3a8a;
+  --ml-color-shadow:    rgba(0, 0, 0, 0.60);
+  --ml-color-hv-shadow: rgba(0, 0, 0, 0.80);
+
+  /* Status */
+  --ml-color-error:     #ef4444;
+  --ml-color-success:   #10b981;
+
+  /* Focus */
+  --ml-color-focus-ring: rgba(96, 165, 250, 0.55);
+
+  /* Geometry */
+  --blur-header: 6px;
+}
+
+/* Ensure flex children can actually scroll */
+.left-section,
+.right-section,
+.form-inputs,
+.results-area {
+  min-height: 0;
+  min-width: 0;
+}
+
+/* Shared scrolling container */
+.scroll-y {
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  /* Firefox scrollbar */
+  scrollbar-color: #cbd5e1 transparent;
+}
+:host([theme="dark"]) .scroll-y {
+  scrollbar-color: #475569 transparent;
+}
+
+/* WebKit scrollbar */
+.scroll-y::-webkit-scrollbar { width: 8px; }
+.scroll-y::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 4px;
+}
+:host([theme="dark"]) .scroll-y::-webkit-scrollbar-thumb {
+  background: #475569;
+}
+
+/* Sticky header */
+.sticky-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  backdrop-filter: blur(var(--blur-header));
+  -webkit-backdrop-filter: blur(var(--blur-header));
+  background: var(--ml-color-bg-header);
+  padding: 0.5rem 2rem;
+  border-bottom: 1px solid var(--ml-color-border);
+}
+.sticky-header h2 {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--ml-color-primary);
+}
+
+/* Left / Right panes */
+.left-section {
+  resize: horizontal;
+  overflow: hidden;
+  min-width: 22rem;
+  max-width: 48rem;
+  background: var(--ml-color-bg-panel);
+  border-right: 1px solid var(--ml-color-border);
+  display: flex;
+  flex-direction: column;
+  border-radius: 0; /* keep square; adjust if you need rounded panels */
+}
+
+.right-section {
+  flex: 1 1 0%;
+  min-width: 24rem;
+  overflow: hidden;
+  background: var(--ml-color-bg-panel);
+  border-left: 1px solid var(--ml-color-border);
+  display: flex;
+  flex-direction: column;
+}
+
+/* Form regions */
+.form-inputs { flex: 1 1 auto; }
+.form-actions {
+  padding: 1rem 2rem;
+  border-top: 1px solid var(--ml-color-border);
+  background: var(--ml-color-bg-light); /* tokenized (was hardcoded) */
+  align-items: center;
+}
+
+/* Results region */
+.results-area { flex: 1 1 auto; }
+
+/* Buttons */
+button {
+  width: 100%;
+  padding: 0.75rem;
+  background-color: var(--ml-color-accent);
+  color: #ffffff;
+  border: none;
+  border-radius: var(--radius);
+  cursor: pointer;
+  font-size: 1rem;
+  transition:
+    background-color 0.2s ease-in-out,
+    transform 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out;
+  transform: skew(var(--skew));
+  will-change: transform;
+}
+
+button:hover:not([disabled]) {
+  background-color: var(--ml-color-accent-h);
+}
+
+button[disabled] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+button:active:not([disabled]) {
+  transform: scale(0.95) skew(var(--skew));
+}
+
+button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--ml-color-focus-ring);
+}
+
+/* Respect reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  button { transition: background-color 0.2s ease-in-out; }
+  button:active:not([disabled]) { transform: skew(var(--skew)); }
+}
+
+  `);
+c([
+  f()
+], s.prototype, "inputs", 2);
+c([
+  h({ attribute: !1 })
+], s.prototype, "modelService", 2);
+s = c([
+  p("ml-layout")
+], s);
+export {
+  s as MLLayout
+};