mlform 0.1.2 → 0.1.4

package/dist/error-card-BwjPChwf.js

@@ -1,195 +0,0 @@
-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

@@ -1,177 +0,0 @@
-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

@@ -1,332 +0,0 @@
-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
-};