jupiter-dynamic-forms 1.0.0

package/dist/index.mjs

@@ -0,0 +1,2082 @@
+import { LitElement, html, css } from "lit";
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$1 = (t2) => (e2, o2) => {
+  void 0 !== o2 ? o2.addInitializer(() => {
+    customElements.define(t2, e2);
+  }) : customElements.define(t2, e2);
+};
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t = globalThis, e$1 = t.ShadowRoot && (void 0 === t.ShadyCSS || t.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, s = Symbol(), o$2 = /* @__PURE__ */ new WeakMap();
+let n$2 = class n {
+  constructor(t2, e2, o2) {
+    if (this._$cssResult$ = true, o2 !== s)
+      throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    this.cssText = t2, this.t = e2;
+  }
+  get styleSheet() {
+    let t2 = this.o;
+    const s2 = this.t;
+    if (e$1 && void 0 === t2) {
+      const e2 = void 0 !== s2 && 1 === s2.length;
+      e2 && (t2 = o$2.get(s2)), void 0 === t2 && ((this.o = t2 = new CSSStyleSheet()).replaceSync(this.cssText), e2 && o$2.set(s2, t2));
+    }
+    return t2;
+  }
+  toString() {
+    return this.cssText;
+  }
+};
+const r$3 = (t2) => new n$2("string" == typeof t2 ? t2 : t2 + "", void 0, s), S = (s2, o2) => {
+  if (e$1)
+    s2.adoptedStyleSheets = o2.map((t2) => t2 instanceof CSSStyleSheet ? t2 : t2.styleSheet);
+  else
+    for (const e2 of o2) {
+      const o3 = document.createElement("style"), n3 = t.litNonce;
+      void 0 !== n3 && o3.setAttribute("nonce", n3), o3.textContent = e2.cssText, s2.appendChild(o3);
+    }
+}, c$1 = e$1 ? (t2) => t2 : (t2) => t2 instanceof CSSStyleSheet ? ((t3) => {
+  let e2 = "";
+  for (const s2 of t3.cssRules)
+    e2 += s2.cssText;
+  return r$3(e2);
+})(t2) : t2;
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const { is: i, defineProperty: e, getOwnPropertyDescriptor: h, getOwnPropertyNames: r$2, getOwnPropertySymbols: o$1, getPrototypeOf: n$1 } = Object, a = globalThis, c = a.trustedTypes, l = c ? c.emptyScript : "", p = a.reactiveElementPolyfillSupport, d = (t2, s2) => t2, u = { toAttribute(t2, s2) {
+  switch (s2) {
+    case Boolean:
+      t2 = t2 ? l : null;
+      break;
+    case Object:
+    case Array:
+      t2 = null == t2 ? t2 : JSON.stringify(t2);
+  }
+  return t2;
+}, fromAttribute(t2, s2) {
+  let i2 = t2;
+  switch (s2) {
+    case Boolean:
+      i2 = null !== t2;
+      break;
+    case Number:
+      i2 = null === t2 ? null : Number(t2);
+      break;
+    case Object:
+    case Array:
+      try {
+        i2 = JSON.parse(t2);
+      } catch (t3) {
+        i2 = null;
+      }
+  }
+  return i2;
+} }, f = (t2, s2) => !i(t2, s2), b = { attribute: true, type: String, converter: u, reflect: false, useDefault: false, hasChanged: f };
+Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), a.litPropertyMetadata ?? (a.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
+class y extends HTMLElement {
+  static addInitializer(t2) {
+    this._$Ei(), (this.l ?? (this.l = [])).push(t2);
+  }
+  static get observedAttributes() {
+    return this.finalize(), this._$Eh && [...this._$Eh.keys()];
+  }
+  static createProperty(t2, s2 = b) {
+    if (s2.state && (s2.attribute = false), this._$Ei(), this.prototype.hasOwnProperty(t2) && ((s2 = Object.create(s2)).wrapped = true), this.elementProperties.set(t2, s2), !s2.noAccessor) {
+      const i2 = Symbol(), h2 = this.getPropertyDescriptor(t2, i2, s2);
+      void 0 !== h2 && e(this.prototype, t2, h2);
+    }
+  }
+  static getPropertyDescriptor(t2, s2, i2) {
+    const { get: e2, set: r2 } = h(this.prototype, t2) ?? { get() {
+      return this[s2];
+    }, set(t3) {
+      this[s2] = t3;
+    } };
+    return { get: e2, set(s3) {
+      const h2 = e2 == null ? void 0 : e2.call(this);
+      r2 == null ? void 0 : r2.call(this, s3), this.requestUpdate(t2, h2, i2);
+    }, configurable: true, enumerable: true };
+  }
+  static getPropertyOptions(t2) {
+    return this.elementProperties.get(t2) ?? b;
+  }
+  static _$Ei() {
+    if (this.hasOwnProperty(d("elementProperties")))
+      return;
+    const t2 = n$1(this);
+    t2.finalize(), void 0 !== t2.l && (this.l = [...t2.l]), this.elementProperties = new Map(t2.elementProperties);
+  }
+  static finalize() {
+    if (this.hasOwnProperty(d("finalized")))
+      return;
+    if (this.finalized = true, this._$Ei(), this.hasOwnProperty(d("properties"))) {
+      const t3 = this.properties, s2 = [...r$2(t3), ...o$1(t3)];
+      for (const i2 of s2)
+        this.createProperty(i2, t3[i2]);
+    }
+    const t2 = this[Symbol.metadata];
+    if (null !== t2) {
+      const s2 = litPropertyMetadata.get(t2);
+      if (void 0 !== s2)
+        for (const [t3, i2] of s2)
+          this.elementProperties.set(t3, i2);
+    }
+    this._$Eh = /* @__PURE__ */ new Map();
+    for (const [t3, s2] of this.elementProperties) {
+      const i2 = this._$Eu(t3, s2);
+      void 0 !== i2 && this._$Eh.set(i2, t3);
+    }
+    this.elementStyles = this.finalizeStyles(this.styles);
+  }
+  static finalizeStyles(s2) {
+    const i2 = [];
+    if (Array.isArray(s2)) {
+      const e2 = new Set(s2.flat(1 / 0).reverse());
+      for (const s3 of e2)
+        i2.unshift(c$1(s3));
+    } else
+      void 0 !== s2 && i2.push(c$1(s2));
+    return i2;
+  }
+  static _$Eu(t2, s2) {
+    const i2 = s2.attribute;
+    return false === i2 ? void 0 : "string" == typeof i2 ? i2 : "string" == typeof t2 ? t2.toLowerCase() : void 0;
+  }
+  constructor() {
+    super(), this._$Ep = void 0, this.isUpdatePending = false, this.hasUpdated = false, this._$Em = null, this._$Ev();
+  }
+  _$Ev() {
+    var _a;
+    this._$ES = new Promise((t2) => this.enableUpdating = t2), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), (_a = this.constructor.l) == null ? void 0 : _a.forEach((t2) => t2(this));
+  }
+  addController(t2) {
+    var _a;
+    (this._$EO ?? (this._$EO = /* @__PURE__ */ new Set())).add(t2), void 0 !== this.renderRoot && this.isConnected && ((_a = t2.hostConnected) == null ? void 0 : _a.call(t2));
+  }
+  removeController(t2) {
+    var _a;
+    (_a = this._$EO) == null ? void 0 : _a.delete(t2);
+  }
+  _$E_() {
+    const t2 = /* @__PURE__ */ new Map(), s2 = this.constructor.elementProperties;
+    for (const i2 of s2.keys())
+      this.hasOwnProperty(i2) && (t2.set(i2, this[i2]), delete this[i2]);
+    t2.size > 0 && (this._$Ep = t2);
+  }
+  createRenderRoot() {
+    const t2 = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
+    return S(t2, this.constructor.elementStyles), t2;
+  }
+  connectedCallback() {
+    var _a;
+    this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(true), (_a = this._$EO) == null ? void 0 : _a.forEach((t2) => {
+      var _a2;
+      return (_a2 = t2.hostConnected) == null ? void 0 : _a2.call(t2);
+    });
+  }
+  enableUpdating(t2) {
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this._$EO) == null ? void 0 : _a.forEach((t2) => {
+      var _a2;
+      return (_a2 = t2.hostDisconnected) == null ? void 0 : _a2.call(t2);
+    });
+  }
+  attributeChangedCallback(t2, s2, i2) {
+    this._$AK(t2, i2);
+  }
+  _$ET(t2, s2) {
+    var _a;
+    const i2 = this.constructor.elementProperties.get(t2), e2 = this.constructor._$Eu(t2, i2);
+    if (void 0 !== e2 && true === i2.reflect) {
+      const h2 = (void 0 !== ((_a = i2.converter) == null ? void 0 : _a.toAttribute) ? i2.converter : u).toAttribute(s2, i2.type);
+      this._$Em = t2, null == h2 ? this.removeAttribute(e2) : this.setAttribute(e2, h2), this._$Em = null;
+    }
+  }
+  _$AK(t2, s2) {
+    var _a, _b;
+    const i2 = this.constructor, e2 = i2._$Eh.get(t2);
+    if (void 0 !== e2 && this._$Em !== e2) {
+      const t3 = i2.getPropertyOptions(e2), h2 = "function" == typeof t3.converter ? { fromAttribute: t3.converter } : void 0 !== ((_a = t3.converter) == null ? void 0 : _a.fromAttribute) ? t3.converter : u;
+      this._$Em = e2;
+      const r2 = h2.fromAttribute(s2, t3.type);
+      this[e2] = r2 ?? ((_b = this._$Ej) == null ? void 0 : _b.get(e2)) ?? r2, this._$Em = null;
+    }
+  }
+  requestUpdate(t2, s2, i2) {
+    var _a;
+    if (void 0 !== t2) {
+      const e2 = this.constructor, h2 = this[t2];
+      if (i2 ?? (i2 = e2.getPropertyOptions(t2)), !((i2.hasChanged ?? f)(h2, s2) || i2.useDefault && i2.reflect && h2 === ((_a = this._$Ej) == null ? void 0 : _a.get(t2)) && !this.hasAttribute(e2._$Eu(t2, i2))))
+        return;
+      this.C(t2, s2, i2);
+    }
+    false === this.isUpdatePending && (this._$ES = this._$EP());
+  }
+  C(t2, s2, { useDefault: i2, reflect: e2, wrapped: h2 }, r2) {
+    i2 && !(this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Map())).has(t2) && (this._$Ej.set(t2, r2 ?? s2 ?? this[t2]), true !== h2 || void 0 !== r2) || (this._$AL.has(t2) || (this.hasUpdated || i2 || (s2 = void 0), this._$AL.set(t2, s2)), true === e2 && this._$Em !== t2 && (this._$Eq ?? (this._$Eq = /* @__PURE__ */ new Set())).add(t2));
+  }
+  async _$EP() {
+    this.isUpdatePending = true;
+    try {
+      await this._$ES;
+    } catch (t3) {
+      Promise.reject(t3);
+    }
+    const t2 = this.scheduleUpdate();
+    return null != t2 && await t2, !this.isUpdatePending;
+  }
+  scheduleUpdate() {
+    return this.performUpdate();
+  }
+  performUpdate() {
+    var _a;
+    if (!this.isUpdatePending)
+      return;
+    if (!this.hasUpdated) {
+      if (this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this._$Ep) {
+        for (const [t4, s3] of this._$Ep)
+          this[t4] = s3;
+        this._$Ep = void 0;
+      }
+      const t3 = this.constructor.elementProperties;
+      if (t3.size > 0)
+        for (const [s3, i2] of t3) {
+          const { wrapped: t4 } = i2, e2 = this[s3];
+          true !== t4 || this._$AL.has(s3) || void 0 === e2 || this.C(s3, void 0, i2, e2);
+        }
+    }
+    let t2 = false;
+    const s2 = this._$AL;
+    try {
+      t2 = this.shouldUpdate(s2), t2 ? (this.willUpdate(s2), (_a = this._$EO) == null ? void 0 : _a.forEach((t3) => {
+        var _a2;
+        return (_a2 = t3.hostUpdate) == null ? void 0 : _a2.call(t3);
+      }), this.update(s2)) : this._$EM();
+    } catch (s3) {
+      throw t2 = false, this._$EM(), s3;
+    }
+    t2 && this._$AE(s2);
+  }
+  willUpdate(t2) {
+  }
+  _$AE(t2) {
+    var _a;
+    (_a = this._$EO) == null ? void 0 : _a.forEach((t3) => {
+      var _a2;
+      return (_a2 = t3.hostUpdated) == null ? void 0 : _a2.call(t3);
+    }), this.hasUpdated || (this.hasUpdated = true, this.firstUpdated(t2)), this.updated(t2);
+  }
+  _$EM() {
+    this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = false;
+  }
+  get updateComplete() {
+    return this.getUpdateComplete();
+  }
+  getUpdateComplete() {
+    return this._$ES;
+  }
+  shouldUpdate(t2) {
+    return true;
+  }
+  update(t2) {
+    this._$Eq && (this._$Eq = this._$Eq.forEach((t3) => this._$ET(t3, this[t3]))), this._$EM();
+  }
+  updated(t2) {
+  }
+  firstUpdated(t2) {
+  }
+}
+y.elementStyles = [], y.shadowRootOptions = { mode: "open" }, y[d("elementProperties")] = /* @__PURE__ */ new Map(), y[d("finalized")] = /* @__PURE__ */ new Map(), p == null ? void 0 : p({ ReactiveElement: y }), (a.reactiveElementVersions ?? (a.reactiveElementVersions = [])).push("2.1.1");
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const o = { attribute: true, type: String, converter: u, reflect: false, hasChanged: f }, r$1 = (t2 = o, e2, r2) => {
+  const { kind: n3, metadata: i2 } = r2;
+  let s2 = globalThis.litPropertyMetadata.get(i2);
+  if (void 0 === s2 && globalThis.litPropertyMetadata.set(i2, s2 = /* @__PURE__ */ new Map()), "setter" === n3 && ((t2 = Object.create(t2)).wrapped = true), s2.set(r2.name, t2), "accessor" === n3) {
+    const { name: o2 } = r2;
+    return { set(r3) {
+      const n4 = e2.get.call(this);
+      e2.set.call(this, r3), this.requestUpdate(o2, n4, t2);
+    }, init(e3) {
+      return void 0 !== e3 && this.C(o2, void 0, t2, e3), e3;
+    } };
+  }
+  if ("setter" === n3) {
+    const { name: o2 } = r2;
+    return function(r3) {
+      const n4 = this[o2];
+      e2.call(this, r3), this.requestUpdate(o2, n4, t2);
+    };
+  }
+  throw Error("Unsupported decorator location: " + n3);
+};
+function n2(t2) {
+  return (e2, o2) => "object" == typeof o2 ? r$1(t2, e2, o2) : ((t3, e3, o3) => {
+    const r2 = e3.hasOwnProperty(o3);
+    return e3.constructor.createProperty(o3, t3), r2 ? Object.getOwnPropertyDescriptor(e3, o3) : void 0;
+  })(t2, e2, o2);
+}
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function r(r2) {
+  return n2({ ...r2, state: true, attribute: false });
+}
+class FormValidator {
+  /**
+   * Validates a field value against its validation rules
+   */
+  static validateField(fieldId, conceptId, columnId, value, fieldType, rules = []) {
+    const errors = [];
+    for (const rule of rules) {
+      const error = this.validateRule(fieldId, conceptId, columnId, value, fieldType, rule);
+      if (error) {
+        errors.push(error);
+      }
+    }
+    return errors;
+  }
+  /**
+   * Validates a single rule against a value
+   */
+  static validateRule(fieldId, conceptId, columnId, value, _fieldType, rule) {
+    const isEmpty = value === null || value === void 0 || value === "";
+    switch (rule.type) {
+      case "required":
+        if (isEmpty) {
+          return this.createError(fieldId, conceptId, columnId, rule);
+        }
+        break;
+      case "min":
+        if (!isEmpty && typeof value === "number" && value < rule.value) {
+          return this.createError(fieldId, conceptId, columnId, rule);
+        }
+        break;
+      case "max":
+        if (!isEmpty && typeof value === "number" && value > rule.value) {
+          return this.createError(fieldId, conceptId, columnId, rule);
+        }
+        break;
+      case "minLength":
+        if (!isEmpty && typeof value === "string" && value.length < rule.value) {
+          return this.createError(fieldId, conceptId, columnId, rule);
+        }
+        break;
+      case "maxLength":
+        if (!isEmpty && typeof value === "string" && value.length > rule.value) {
+          return this.createError(fieldId, conceptId, columnId, rule);
+        }
+        break;
+      case "pattern":
+        if (!isEmpty && typeof value === "string") {
+          const regex = new RegExp(rule.value);
+          if (!regex.test(value)) {
+            return this.createError(fieldId, conceptId, columnId, rule);
+          }
+        }
+        break;
+      case "email":
+        if (!isEmpty && typeof value === "string") {
+          const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+          if (!emailRegex.test(value)) {
+            return this.createError(fieldId, conceptId, columnId, rule);
+          }
+        }
+        break;
+      case "url":
+        if (!isEmpty && typeof value === "string") {
+          try {
+            new URL(value);
+          } catch {
+            return this.createError(fieldId, conceptId, columnId, rule);
+          }
+        }
+        break;
+      case "custom":
+        break;
+      default:
+        console.warn(`Unknown validation rule type: ${rule.type}`);
+    }
+    return null;
+  }
+  /**
+   * Creates a validation error object
+   */
+  static createError(fieldId, conceptId, columnId, rule) {
+    return {
+      fieldId,
+      conceptId,
+      columnId,
+      message: rule.message,
+      severity: rule.severity || "error",
+      rule
+    };
+  }
+  /**
+   * Validates data type conversion
+   */
+  static validateDataType(value, fieldType) {
+    if (value === null || value === void 0 || value === "") {
+      return { valid: true, convertedValue: value };
+    }
+    switch (fieldType) {
+      case "number":
+      case "decimal":
+      case "currency":
+      case "percentage": {
+        const numValue = Number(value);
+        if (isNaN(numValue)) {
+          return { valid: false, error: "Invalid number format" };
+        }
+        return { valid: true, convertedValue: numValue };
+      }
+      case "date": {
+        const dateValue = new Date(value);
+        if (isNaN(dateValue.getTime())) {
+          return { valid: false, error: "Invalid date format" };
+        }
+        return { valid: true, convertedValue: dateValue.toISOString().split("T")[0] };
+      }
+      case "datetime": {
+        const datetimeValue = new Date(value);
+        if (isNaN(datetimeValue.getTime())) {
+          return { valid: false, error: "Invalid datetime format" };
+        }
+        return { valid: true, convertedValue: datetimeValue.toISOString() };
+      }
+      case "boolean":
+        if (typeof value === "boolean") {
+          return { valid: true, convertedValue: value };
+        }
+        if (typeof value === "string") {
+          const boolValue = value.toLowerCase();
+          if (boolValue === "true" || boolValue === "1") {
+            return { valid: true, convertedValue: true };
+          }
+          if (boolValue === "false" || boolValue === "0") {
+            return { valid: true, convertedValue: false };
+          }
+        }
+        return { valid: false, error: "Invalid boolean format" };
+      case "text":
+      case "textarea":
+      case "email":
+      case "url":
+      case "tel":
+        return { valid: true, convertedValue: String(value) };
+      case "select":
+      case "multiselect":
+        return { valid: true, convertedValue: value };
+      default:
+        return { valid: true, convertedValue: value };
+    }
+  }
+  /**
+   * Formats value for display based on field type
+   */
+  static formatValue(value, fieldType, locale = "en-US") {
+    if (value === null || value === void 0)
+      return "";
+    switch (fieldType) {
+      case "number":
+        return new Intl.NumberFormat(locale).format(Number(value));
+      case "decimal":
+        return new Intl.NumberFormat(locale, {
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2
+        }).format(Number(value));
+      case "currency":
+        return new Intl.NumberFormat(locale, {
+          style: "currency",
+          currency: "USD"
+          // Should be configurable
+        }).format(Number(value));
+      case "percentage":
+        return new Intl.NumberFormat(locale, {
+          style: "percent",
+          minimumFractionDigits: 2
+        }).format(Number(value) / 100);
+      case "date":
+        return new Date(value).toLocaleDateString(locale);
+      case "datetime":
+        return new Date(value).toLocaleString(locale);
+      default:
+        return String(value);
+    }
+  }
+}
+class XBRLFormBuilder {
+  /**
+   * Build form schema from XBRL input data
+   * Creates accordion sections for each presentation role
+   */
+  static buildFormSchema(xbrlInput) {
+    if (!xbrlInput.presentation || xbrlInput.presentation.length === 0) {
+      throw new Error("XBRL presentation data is required");
+    }
+    const presentationData = xbrlInput.presentation[0];
+    const sections = [];
+    presentationData.roles.forEach((role) => {
+      const section = this.buildSectionFromRole(role);
+      sections.push(section);
+    });
+    return {
+      formId: `xbrl-form-${Date.now()}`,
+      title: `XBRL Form - ${this.extractEntityName(presentationData.entrypoint)}`,
+      description: `Dynamic form generated from XBRL taxonomy data`,
+      version: "1.0.0",
+      sections
+    };
+  }
+  /**
+   * Build a form section from a presentation role
+   */
+  static buildSectionFromRole(role) {
+    var _a;
+    const title = this.extractRoleTitle(role.role);
+    const conceptTrees = [];
+    if ((_a = role.presentationLinkbase) == null ? void 0 : _a.concepts) {
+      role.presentationLinkbase.concepts.forEach((concept) => {
+        const conceptTree = this.buildConceptTree(concept, 0);
+        if (conceptTree) {
+          conceptTrees.push(conceptTree);
+        }
+      });
+    }
+    return {
+      id: role.id,
+      title,
+      description: `Section for ${title}`,
+      concepts: conceptTrees,
+      expanded: false
+    };
+  }
+  /**
+   * Build concept tree from XBRL presentation concept
+   */
+  static buildConceptTree(concept, level) {
+    const label = this.getPreferredLabel(concept.labels);
+    const fields = [];
+    if (!concept.elementAbstract) {
+      const field = this.createFieldFromConcept(concept);
+      if (field) {
+        fields.push(field);
+      }
+    }
+    const children = [];
+    if (concept.children && concept.children.length > 0) {
+      concept.children.forEach((child) => {
+        const childTree = this.buildConceptTree(child, level + 1);
+        if (childTree) {
+          children.push(childTree);
+        }
+      });
+    }
+    return {
+      id: concept.id,
+      name: concept.conceptName,
+      label,
+      description: `${concept.conceptName} (${concept.type})`,
+      level,
+      children,
+      fields,
+      collapsed: level > 0
+      // Collapse nested levels by default
+    };
+  }
+  /**
+   * Create form field from XBRL concept
+   */
+  static createFieldFromConcept(concept) {
+    const fieldType = this.mapXBRLTypeToFieldType(concept.type);
+    const label = this.getPreferredLabel(concept.labels);
+    return {
+      id: `${concept.id}_field`,
+      conceptId: concept.id,
+      columnId: "default",
+      // Default column, will be expanded later
+      type: fieldType,
+      label,
+      placeholder: `Enter ${label.toLowerCase()}`,
+      required: false,
+      // Will be determined by validation rules
+      disabled: concept.elementAbstract,
+      defaultValue: null
+    };
+  }
+  /**
+   * Map XBRL data type to form field type
+   */
+  static mapXBRLTypeToFieldType(xbrlType) {
+    const typeMap = {
+      "xbrli:stringItemType": "text",
+      "xbrli:monetaryItemType": "currency",
+      "xbrli:integerItemType": "number",
+      "xbrli:decimalItemType": "decimal",
+      "xbrli:percentItemType": "percentage",
+      "xbrli:dateItemType": "date",
+      "xbrli:booleanItemType": "boolean",
+      "dtr-types:domainItemType": "select",
+      "bw2-titel9:chamberOfCommerceRegistrationNumberItemType": "text"
+    };
+    return typeMap[xbrlType] || "text";
+  }
+  /**
+   * Get preferred label from labels array
+   */
+  static getPreferredLabel(labels) {
+    if (!labels || labels.length === 0)
+      return "Unnamed Concept";
+    const preferred = labels.find((l2) => l2.preferredLabel);
+    if (preferred)
+      return preferred.label;
+    const standard = labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label");
+    if (standard)
+      return standard.label;
+    const terse = labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/terseLabel");
+    if (terse)
+      return terse.label;
+    return labels[0].label;
+  }
+  /**
+   * Extract entity name from entrypoint URL
+   */
+  static extractEntityName(entrypoint) {
+    try {
+      const url = new URL(entrypoint);
+      const pathParts = url.pathname.split("/");
+      const filename = pathParts[pathParts.length - 1];
+      return filename.replace(".xsd", "").replace(/[^a-zA-Z0-9]/g, " ").trim() || "Entity";
+    } catch {
+      return "Entity";
+    }
+  }
+  /**
+   * Extract role title from role string
+   */
+  static extractRoleTitle(role) {
+    const match = role.match(/^\[[\d]+\]\s*(.+)$/);
+    return match ? match[1].trim() : role;
+  }
+  /**
+   * Extract role order from role string
+   */
+  static extractRoleOrder(role) {
+    const match = role.match(/^\[([\d]+)\]/);
+    return match ? parseInt(match[1], 10) : 0;
+  }
+  /**
+   * Build columns from XBRL hypercube data (placeholder for now)
+   */
+  static buildColumnsFromHypercubes() {
+    return [{
+      id: "default",
+      label: "Values",
+      type: "data"
+    }];
+  }
+}
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
+var __decorateClass$3 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target;
+  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
+    if (decorator = decorators[i2])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp$3(target, key, result);
+  return result;
+};
+let JupiterFormField = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.value = null;
+    this.disabled = false;
+    this.locale = "en-US";
+    this._errors = [];
+    this._touched = false;
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("value") || changedProperties.has("field")) {
+      this._validateField();
+    }
+  }
+  _validateField() {
+    var _a;
+    if ((_a = this.field) == null ? void 0 : _a.validation) {
+      this._errors = FormValidator.validateField(
+        this.field.id,
+        this.conceptId,
+        this.columnId,
+        this.value,
+        this.field.type,
+        this.field.validation
+      );
+    }
+  }
+  _handleInput(event) {
+    const target = event.target;
+    let value = target.value;
+    if (this.field.type === "number" || this.field.type === "decimal") {
+      value = value === "" ? null : Number(value);
+    } else if (this.field.type === "boolean") {
+      value = target.checked;
+    }
+    this.value = value;
+    this._touched = true;
+    this.dispatchEvent(new CustomEvent("field-change", {
+      detail: {
+        fieldId: this.field.id,
+        conceptId: this.conceptId,
+        columnId: this.columnId,
+        value,
+        oldValue: this.value
+      },
+      bubbles: true
+    }));
+  }
+  _handleFocus() {
+    this.dispatchEvent(new CustomEvent("field-focus", {
+      detail: {
+        fieldId: this.field.id,
+        conceptId: this.conceptId,
+        columnId: this.columnId
+      },
+      bubbles: true
+    }));
+  }
+  _handleBlur() {
+    this._touched = true;
+    this.dispatchEvent(new CustomEvent("field-blur", {
+      detail: {
+        fieldId: this.field.id,
+        conceptId: this.conceptId,
+        columnId: this.columnId
+      },
+      bubbles: true
+    }));
+  }
+  _renderInput() {
+    var _a;
+    const hasErrors = this._errors.some((e2) => e2.severity === "error");
+    const hasWarnings = this._errors.some((e2) => e2.severity === "warning");
+    const cssClass = `field-input ${hasErrors ? "error" : hasWarnings ? "warning" : ""}`;
+    switch (this.field.type) {
+      case "textarea":
+        return html`
+          <textarea
+            class="${cssClass}"
+            .value="${this.value || ""}"
+            ?disabled="${this.disabled || this.field.disabled}"
+            placeholder="${this.field.placeholder || ""}"
+            @input="${this._handleInput}"
+            @focus="${this._handleFocus}"
+            @blur="${this._handleBlur}"
+          ></textarea>
+        `;
+      case "select":
+        return html`
+          <select
+            class="${cssClass}"
+            .value="${this.value || ""}"
+            ?disabled="${this.disabled || this.field.disabled}"
+            @change="${this._handleInput}"
+            @focus="${this._handleFocus}"
+            @blur="${this._handleBlur}"
+          >
+            <option value="">Select...</option>
+            ${(_a = this.field.options) == null ? void 0 : _a.map((option) => html`
+              <option 
+                value="${option.value}"
+                ?disabled="${option.disabled}"
+                ?selected="${this.value === option.value}"
+              >
+                ${option.label}
+              </option>
+            `)}
+          </select>
+        `;
+      case "boolean":
+        return html`
+          <div class="checkbox-container">
+            <input
+              type="checkbox"
+              class="field-input"
+              .checked="${Boolean(this.value)}"
+              ?disabled="${this.disabled || this.field.disabled}"
+              @change="${this._handleInput}"
+              @focus="${this._handleFocus}"
+              @blur="${this._handleBlur}"
+            />
+            <span>${this.field.label}</span>
+          </div>
+        `;
+      default:
+        return html`
+          <input
+            type="${this._getInputType()}"
+            class="${cssClass}"
+            .value="${this.value || ""}"
+            ?disabled="${this.disabled || this.field.disabled}"
+            placeholder="${this.field.placeholder || ""}"
+            @input="${this._handleInput}"
+            @focus="${this._handleFocus}"
+            @blur="${this._handleBlur}"
+          />
+        `;
+    }
+  }
+  _getInputType() {
+    switch (this.field.type) {
+      case "number":
+      case "decimal":
+      case "currency":
+      case "percentage":
+        return "number";
+      case "date":
+        return "date";
+      case "datetime":
+        return "datetime-local";
+      case "email":
+        return "email";
+      case "url":
+        return "url";
+      case "tel":
+        return "tel";
+      default:
+        return "text";
+    }
+  }
+  render() {
+    const showLabel = this.field.type !== "boolean";
+    return html`
+      <div class="field-container">
+        ${showLabel ? html`
+          <label class="field-label ${this.field.required ? "required" : ""}">
+            ${this.field.label}
+          </label>
+        ` : ""}
+        
+        ${this._renderInput()}
+        
+        ${this._errors.length > 0 && this._touched ? html`
+          <div class="field-errors">
+            ${this._errors.map((error) => html`
+              <span class="field-error ${error.severity}">
+                ${error.message}
+              </span>
+            `)}
+          </div>
+        ` : ""}
+      </div>
+    `;
+  }
+};
+JupiterFormField.styles = css`
+    :host {
+      display: block;
+      margin-bottom: 8px;
+    }
+
+    .field-container {
+      position: relative;
+    }
+
+    .field-label {
+      display: block;
+      font-weight: 500;
+      margin-bottom: 4px;
+      color: var(--jupiter-text-primary, #333);
+      font-size: 14px;
+    }
+
+    .field-label.required::after {
+      content: ' *';
+      color: var(--jupiter-error-color, #d32f2f);
+    }
+
+    .field-input {
+      width: 100%;
+      padding: 8px 12px;
+      border: 1px solid var(--jupiter-border-color, #ddd);
+      border-radius: 4px;
+      font-size: 14px;
+      font-family: inherit;
+      background: var(--jupiter-input-background, #fff);
+      color: var(--jupiter-text-primary, #333);
+      box-sizing: border-box;
+    }
+
+    .field-input:focus {
+      outline: none;
+      border-color: var(--jupiter-primary-color, #1976d2);
+      box-shadow: 0 0 0 2px var(--jupiter-primary-color-light, rgba(25, 118, 210, 0.2));
+    }
+
+    .field-input:disabled {
+      background: var(--jupiter-disabled-background, #f5f5f5);
+      color: var(--jupiter-disabled-text, #999);
+      cursor: not-allowed;
+    }
+
+    .field-input.error {
+      border-color: var(--jupiter-error-color, #d32f2f);
+    }
+
+    .field-input.warning {
+      border-color: var(--jupiter-warning-color, #ff9800);
+    }
+
+    .field-errors {
+      margin-top: 4px;
+    }
+
+    .field-error {
+      display: block;
+      font-size: 12px;
+      margin-bottom: 2px;
+    }
+
+    .field-error.error {
+      color: var(--jupiter-error-color, #d32f2f);
+    }
+
+    .field-error.warning {
+      color: var(--jupiter-warning-color, #ff9800);
+    }
+
+    .field-error.info {
+      color: var(--jupiter-info-color, #2196f3);
+    }
+
+    select.field-input {
+      appearance: none;
+      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
+      background-position: right 8px center;
+      background-repeat: no-repeat;
+      background-size: 16px;
+      padding-right: 32px;
+    }
+
+    textarea.field-input {
+      resize: vertical;
+      min-height: 60px;
+    }
+
+    .checkbox-container {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .checkbox-container input[type="checkbox"] {
+      margin: 0;
+      width: auto;
+    }
+  `;
+__decorateClass$3([
+  n2({ type: Object })
+], JupiterFormField.prototype, "field", 2);
+__decorateClass$3([
+  n2({ type: String })
+], JupiterFormField.prototype, "conceptId", 2);
+__decorateClass$3([
+  n2({ type: String })
+], JupiterFormField.prototype, "columnId", 2);
+__decorateClass$3([
+  n2()
+], JupiterFormField.prototype, "value", 2);
+__decorateClass$3([
+  n2({ type: Boolean })
+], JupiterFormField.prototype, "disabled", 2);
+__decorateClass$3([
+  n2({ type: String })
+], JupiterFormField.prototype, "locale", 2);
+__decorateClass$3([
+  r()
+], JupiterFormField.prototype, "_errors", 2);
+__decorateClass$3([
+  r()
+], JupiterFormField.prototype, "_touched", 2);
+JupiterFormField = __decorateClass$3([
+  t$1("jupiter-form-field")
+], JupiterFormField);
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
+var __decorateClass$2 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
+  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
+    if (decorator = decorators[i2])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp$2(target, key, result);
+  return result;
+};
+let JupiterConceptTree = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.columns = [];
+    this.formData = {};
+    this.disabled = false;
+    this.locale = "en-US";
+    this._expanded = true;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._expanded = !this.concept.collapsed;
+  }
+  _toggleExpanded() {
+    this._expanded = !this._expanded;
+    this.dispatchEvent(new CustomEvent("concept-expand", {
+      detail: {
+        conceptId: this.concept.id,
+        expanded: this._expanded
+      },
+      bubbles: true
+    }));
+  }
+  _getFieldForColumn(columnId) {
+    return this.concept.fields.find((field) => field.columnId === columnId);
+  }
+  _getFieldValue(field) {
+    var _a;
+    return (_a = this.formData[this.concept.id]) == null ? void 0 : _a[field.columnId];
+  }
+  _handleFieldChange(event) {
+    event.stopPropagation();
+    this.dispatchEvent(new CustomEvent("field-change", {
+      detail: event.detail,
+      bubbles: true
+    }));
+  }
+  render() {
+    const hasChildren = this.concept.children && this.concept.children.length > 0;
+    const level = this.concept.level || 0;
+    return html`
+      <div class="concept-row" style="--level: ${level}">
+        <!-- Concept Label Column -->
+        <div class="concept-header" @click="${this._toggleExpanded}">
+          <div class="concept-indent"></div>
+          <div class="concept-toggle ${hasChildren ? this._expanded ? "expanded" : "" : "no-children"}">
+            ${hasChildren ? "▶" : ""}
+          </div>
+          <div class="concept-label">
+            ${this.concept.label}
+            ${this.concept.description ? html`
+              <span class="concept-description">${this.concept.description}</span>
+            ` : ""}
+          </div>
+        </div>
+
+        <!-- Field Columns -->
+        ${this.columns.map((column) => {
+      const field = this._getFieldForColumn(column.id);
+      return html`
+            <div class="field-cell ${!field ? "empty" : ""}">
+              ${field ? html`
+                <jupiter-form-field
+                  .field="${field}"
+                  .conceptId="${this.concept.id}"
+                  .columnId="${column.id}"
+                  .value="${this._getFieldValue(field)}"
+                  .disabled="${this.disabled}"
+                  .locale="${this.locale}"
+                  @field-change="${this._handleFieldChange}"
+                ></jupiter-form-field>
+              ` : ""}
+            </div>
+          `;
+    })}
+      </div>
+
+      <!-- Children Concepts -->
+      ${hasChildren ? html`
+        <div class="children ${!this._expanded ? "collapsed" : ""}">
+          ${this.concept.children.map((child) => html`
+            <jupiter-concept-tree
+              .concept="${child}"
+              .columns="${this.columns}"
+              .formData="${this.formData}"
+              .disabled="${this.disabled}"
+              .locale="${this.locale}"
+              @field-change="${this._handleFieldChange}"
+              @concept-expand="${(e2) => {
+      e2.stopPropagation();
+      this.dispatchEvent(new CustomEvent("concept-expand", { detail: e2.detail, bubbles: true }));
+    }}"
+            ></jupiter-concept-tree>
+          `)}
+        </div>
+      ` : ""}
+    `;
+  }
+};
+JupiterConceptTree.styles = css`
+    :host {
+      display: block;
+    }
+
+    .concept-row {
+      display: contents;
+    }
+
+    .concept-header {
+      display: flex;
+      align-items: center;
+      padding: 8px 12px;
+      background: var(--jupiter-concept-background, #f8f9fa);
+      border: 1px solid var(--jupiter-border-color, #ddd);
+      border-bottom: none;
+      font-weight: 500;
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .concept-header:hover {
+      background: var(--jupiter-concept-hover-background, #e9ecef);
+    }
+
+    .concept-indent {
+      width: calc(var(--level, 0) * 20px);
+      flex-shrink: 0;
+    }
+
+    .concept-toggle {
+      width: 16px;
+      height: 16px;
+      margin-right: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      transition: transform 0.2s ease;
+    }
+
+    .concept-toggle.expanded {
+      transform: rotate(90deg);
+    }
+
+    .concept-toggle.no-children {
+      visibility: hidden;
+    }
+
+    .concept-label {
+      flex: 1;
+      color: var(--jupiter-text-primary, #333);
+    }
+
+    .concept-description {
+      font-size: 12px;
+      color: var(--jupiter-text-secondary, #666);
+      font-weight: normal;
+      margin-left: 8px;
+    }
+
+    .concept-fields {
+      display: contents;
+    }
+
+    .field-cell {
+      border: 1px solid var(--jupiter-border-color, #ddd);
+      border-bottom: none;
+      padding: 8px;
+      background: var(--jupiter-cell-background, #fff);
+      min-height: 40px;
+      display: flex;
+      align-items: center;
+    }
+
+    .field-cell:last-child {
+      border-right: 1px solid var(--jupiter-border-color, #ddd);
+    }
+
+    .field-cell.empty {
+      background: var(--jupiter-empty-cell-background, #f8f9fa);
+    }
+
+    .children {
+      display: contents;
+    }
+
+    .children.collapsed {
+      display: none;
+    }
+
+    .concept-row:last-of-type .concept-header,
+    .concept-row:last-of-type .field-cell {
+      border-bottom: 1px solid var(--jupiter-border-color, #ddd);
+    }
+  `;
+__decorateClass$2([
+  n2({ type: Object })
+], JupiterConceptTree.prototype, "concept", 2);
+__decorateClass$2([
+  n2({ type: Array })
+], JupiterConceptTree.prototype, "columns", 2);
+__decorateClass$2([
+  n2({ type: Object })
+], JupiterConceptTree.prototype, "formData", 2);
+__decorateClass$2([
+  n2({ type: Boolean })
+], JupiterConceptTree.prototype, "disabled", 2);
+__decorateClass$2([
+  n2({ type: String })
+], JupiterConceptTree.prototype, "locale", 2);
+__decorateClass$2([
+  r()
+], JupiterConceptTree.prototype, "_expanded", 2);
+JupiterConceptTree = __decorateClass$2([
+  t$1("jupiter-concept-tree")
+], JupiterConceptTree);
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
+    if (decorator = decorators[i2])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp$1(target, key, result);
+  return result;
+};
+let JupiterFormSection = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.columns = [];
+    this.formData = {};
+    this.disabled = false;
+    this.collapsible = true;
+    this.locale = "en-US";
+    this._expanded = true;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._expanded = this.section.expanded !== false;
+  }
+  _toggleExpanded() {
+    if (!this.collapsible)
+      return;
+    this._expanded = !this._expanded;
+    this.dispatchEvent(new CustomEvent("section-expand", {
+      detail: {
+        sectionId: this.section.id,
+        expanded: this._expanded
+      },
+      bubbles: true
+    }));
+  }
+  _handleRemoveColumn(columnId) {
+    this.dispatchEvent(new CustomEvent("column-remove", {
+      detail: { columnId },
+      bubbles: true
+    }));
+  }
+  _handleFieldChange(event) {
+    event.stopPropagation();
+    this.dispatchEvent(new CustomEvent("field-change", {
+      detail: event.detail,
+      bubbles: true
+    }));
+  }
+  _handleConceptExpand(event) {
+    event.stopPropagation();
+    this.dispatchEvent(new CustomEvent("concept-expand", {
+      detail: event.detail,
+      bubbles: true
+    }));
+  }
+  render() {
+    if (!this.section.concepts || this.section.concepts.length === 0) {
+      return html`
+        <div class="section-header ${!this.collapsible ? "not-collapsible" : ""}" 
+             @click="${this._toggleExpanded}">
+          <div>
+            <h3 class="section-title">${this.section.title}</h3>
+            ${this.section.description ? html`
+              <p class="section-description">${this.section.description}</p>
+            ` : ""}
+          </div>
+          <div class="section-toggle ${this.collapsible ? this._expanded ? "expanded" : "" : "hidden"}">
+            ${this.collapsible ? "▶" : ""}
+          </div>
+        </div>
+        
+        <div class="section-content ${!this._expanded ? "collapsed" : ""}">
+          <div class="empty-section">
+            No concepts defined for this section.
+          </div>
+        </div>
+      `;
+    }
+    return html`
+      <div class="section-header ${!this.collapsible ? "not-collapsible" : ""}" 
+           @click="${this._toggleExpanded}">
+        <div>
+          <h3 class="section-title">${this.section.title}</h3>
+          ${this.section.description ? html`
+            <p class="section-description">${this.section.description}</p>
+          ` : ""}
+        </div>
+        <div class="section-toggle ${this.collapsible ? this._expanded ? "expanded" : "" : "hidden"}">
+          ${this.collapsible ? "▶" : ""}
+        </div>
+      </div>
+
+      <div class="section-content ${!this._expanded ? "collapsed" : ""}">
+        <div class="table-container">
+          <table class="form-table">
+            <thead class="table-header">
+              <tr>
+                <th class="header-cell concept-column">Concept</th>
+                ${this.columns.map((column) => html`
+                  <th class="header-cell ${column.removable ? "removable" : ""}">
+                    ${column.title}
+                    ${column.description ? html`<div style="font-weight: normal; font-size: 12px; color: var(--jupiter-text-secondary, #666);">${column.description}</div>` : ""}
+                    ${column.removable ? html`
+                      <button 
+                        class="remove-column-btn"
+                        @click="${(e2) => {
+      e2.stopPropagation();
+      this._handleRemoveColumn(column.id);
+    }}"
+                        title="Remove column"
+                      >×</button>
+                    ` : ""}
+                  </th>
+                `)}
+              </tr>
+            </thead>
+            <tbody class="table-body">
+              ${this.section.concepts.map((concept) => html`
+                <jupiter-concept-tree
+                  .concept="${concept}"
+                  .columns="${this.columns}"
+                  .formData="${this.formData}"
+                  .disabled="${this.disabled}"
+                  .locale="${this.locale}"
+                  @field-change="${this._handleFieldChange}"
+                  @concept-expand="${this._handleConceptExpand}"
+                ></jupiter-concept-tree>
+              `)}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    `;
+  }
+};
+JupiterFormSection.styles = css`
+    :host {
+      display: block;
+      margin-bottom: 16px;
+      border: 1px solid var(--jupiter-border-color, #ddd);
+      border-radius: 6px;
+      overflow: hidden;
+    }
+
+    .section-header {
+      background: var(--jupiter-section-header-background, #f0f2f5);
+      padding: 16px;
+      border-bottom: 1px solid var(--jupiter-border-color, #ddd);
+      cursor: pointer;
+      user-select: none;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .section-header:hover {
+      background: var(--jupiter-section-header-hover-background, #e4e7ea);
+    }
+
+    .section-header.not-collapsible {
+      cursor: default;
+    }
+
+    .section-header.not-collapsible:hover {
+      background: var(--jupiter-section-header-background, #f0f2f5);
+    }
+
+    .section-title {
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--jupiter-text-primary, #333);
+      margin: 0;
+    }
+
+    .section-description {
+      font-size: 14px;
+      color: var(--jupiter-text-secondary, #666);
+      margin: 4px 0 0 0;
+    }
+
+    .section-toggle {
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 16px;
+      transition: transform 0.2s ease;
+      color: var(--jupiter-text-secondary, #666);
+    }
+
+    .section-toggle.expanded {
+      transform: rotate(90deg);
+    }
+
+    .section-toggle.hidden {
+      visibility: hidden;
+    }
+
+    .section-content {
+      display: block;
+      transition: max-height 0.3s ease;
+      overflow: hidden;
+    }
+
+    .section-content.collapsed {
+      display: none;
+    }
+
+    .table-container {
+      overflow-x: auto;
+    }
+
+    .form-table {
+      width: 100%;
+      border-collapse: collapse;
+      background: var(--jupiter-table-background, #fff);
+    }
+
+    .table-header {
+      background: var(--jupiter-header-background, #f8f9fa);
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+
+    .header-cell {
+      padding: 12px;
+      text-align: left;
+      font-weight: 600;
+      color: var(--jupiter-text-primary, #333);
+      border: 1px solid var(--jupiter-border-color, #ddd);
+      background: var(--jupiter-header-background, #f8f9fa);
+      min-width: 150px;
+    }
+
+    .header-cell.concept-column {
+      min-width: 300px;
+      position: sticky;
+      left: 0;
+      z-index: 2;
+    }
+
+    .header-cell.removable {
+      position: relative;
+    }
+
+    .remove-column-btn {
+      position: absolute;
+      top: 4px;
+      right: 4px;
+      width: 20px;
+      height: 20px;
+      border: none;
+      background: var(--jupiter-error-color, #d32f2f);
+      color: white;
+      border-radius: 50%;
+      font-size: 12px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .remove-column-btn:hover {
+      background: var(--jupiter-error-color-dark, #b71c1c);
+    }
+
+    .table-body {
+      display: table-row-group;
+    }
+
+    .empty-section {
+      padding: 24px;
+      text-align: center;
+      color: var(--jupiter-text-secondary, #666);
+      font-style: italic;
+    }
+  `;
+__decorateClass$1([
+  n2({ type: Object })
+], JupiterFormSection.prototype, "section", 2);
+__decorateClass$1([
+  n2({ type: Array })
+], JupiterFormSection.prototype, "columns", 2);
+__decorateClass$1([
+  n2({ type: Object })
+], JupiterFormSection.prototype, "formData", 2);
+__decorateClass$1([
+  n2({ type: Boolean })
+], JupiterFormSection.prototype, "disabled", 2);
+__decorateClass$1([
+  n2({ type: Boolean })
+], JupiterFormSection.prototype, "collapsible", 2);
+__decorateClass$1([
+  n2({ type: String })
+], JupiterFormSection.prototype, "locale", 2);
+__decorateClass$1([
+  r()
+], JupiterFormSection.prototype, "_expanded", 2);
+JupiterFormSection = __decorateClass$1([
+  t$1("jupiter-form-section")
+], JupiterFormSection);
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
+    if (decorator = decorators[i2])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let JupiterDynamicForm = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.config = {};
+    this.initialData = {};
+    this.disabled = false;
+    this.readonly = false;
+    this._formData = {};
+    this._columns = [];
+    this._errors = [];
+    this._touched = /* @__PURE__ */ new Set();
+    this._dirty = false;
+    this._valid = true;
+    this._submitted = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._initializeForm();
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("xbrlInput") || changedProperties.has("schema")) {
+      this._initializeForm();
+    }
+  }
+  _initializeForm() {
+    var _a;
+    if (this.xbrlInput) {
+      try {
+        console.log("🔄 Initializing form from XBRL input:", this.xbrlInput);
+        this._currentSchema = XBRLFormBuilder.buildFormSchema(this.xbrlInput);
+        console.log("✅ Generated schema with sections:", this._currentSchema.sections.length);
+        this._columns = [
+          {
+            id: "base",
+            title: "Value",
+            description: "Base values for concepts",
+            type: "base",
+            order: 0,
+            removable: false
+          }
+        ];
+      } catch (error) {
+        console.error("❌ Error building form from XBRL input:", error);
+        this._currentSchema = this._getDefaultSchema();
+        this._columns = this._getDefaultColumns();
+      }
+    } else if (this.schema) {
+      this._currentSchema = this.schema;
+      this._columns = this._getDefaultColumns();
+    } else {
+      this._currentSchema = this._getDefaultSchema();
+      this._columns = this._getDefaultColumns();
+    }
+    this._formData = { ...this.initialData };
+    if ((_a = this.xbrlInput) == null ? void 0 : _a.initialData) {
+      this._formData = { ...this._formData, ...this.xbrlInput.initialData };
+    }
+    this._validateForm();
+  }
+  _getDefaultSchema() {
+    return {
+      version: "1.0",
+      formId: "default-form",
+      title: "Dynamic Form",
+      description: "Please provide form schema or XBRL input data",
+      sections: []
+    };
+  }
+  _getDefaultColumns() {
+    return [
+      {
+        id: "base",
+        title: "Value",
+        description: "Base values for concepts",
+        type: "base",
+        order: 0,
+        removable: false
+      }
+    ];
+  }
+  _validateForm() {
+    var _a;
+    const errors = [];
+    const schema = this._currentSchema;
+    if (!schema)
+      return;
+    for (const section of schema.sections) {
+      for (const concept of section.concepts) {
+        for (const field of concept.fields) {
+          const value = (_a = this._formData[concept.id]) == null ? void 0 : _a[field.columnId];
+          const fieldErrors = FormValidator.validateField(
+            field.id,
+            concept.id,
+            field.columnId,
+            value,
+            field.type,
+            field.validation || []
+          );
+          errors.push(...fieldErrors);
+        }
+      }
+    }
+    this._errors = errors;
+    this._valid = errors.filter((e2) => e2.severity === "error").length === 0;
+  }
+  _handleFieldChange(event) {
+    const { fieldId, conceptId, columnId, value } = event.detail;
+    if (!this._formData[conceptId]) {
+      this._formData[conceptId] = {};
+    }
+    const oldValue = this._formData[conceptId][columnId];
+    this._formData[conceptId][columnId] = value;
+    this._touched.add(`${conceptId}-${columnId}`);
+    this._dirty = true;
+    this._validateForm();
+    this.requestUpdate();
+    this.dispatchEvent(new CustomEvent("field-change", {
+      detail: { fieldId, conceptId, columnId, value, oldValue },
+      bubbles: true
+    }));
+  }
+  _handleSectionExpand(event) {
+    this.dispatchEvent(new CustomEvent("section-expand", {
+      detail: event.detail,
+      bubbles: true
+    }));
+  }
+  _handleConceptExpand(event) {
+    this.dispatchEvent(new CustomEvent("concept-expand", {
+      detail: event.detail,
+      bubbles: true
+    }));
+  }
+  _handleColumnRemove(event) {
+    const { columnId } = event.detail;
+    this._columns = this._columns.filter((col) => col.id !== columnId);
+    for (const conceptId in this._formData) {
+      if (this._formData[conceptId][columnId] !== void 0) {
+        delete this._formData[conceptId][columnId];
+      }
+    }
+    this._dirty = true;
+    this._validateForm();
+    this.requestUpdate();
+    this.dispatchEvent(new CustomEvent("column-remove", {
+      detail: { columnId },
+      bubbles: true
+    }));
+  }
+  _addColumn() {
+    const newColumnId = `dim-${Date.now()}`;
+    const newColumn = {
+      id: newColumnId,
+      title: `Dimension ${this._columns.length}`,
+      description: "Additional dimension column",
+      type: "dimension",
+      order: this._columns.length,
+      removable: true,
+      dimensionData: {
+        dimensionId: "custom",
+        memberValue: "default",
+        memberLabel: "Default Member"
+      }
+    };
+    this._columns = [...this._columns, newColumn];
+    this.requestUpdate();
+    this.dispatchEvent(new CustomEvent("column-add", {
+      detail: { column: newColumn },
+      bubbles: true
+    }));
+  }
+  _handleSubmit() {
+    this._submitted = true;
+    this._validateForm();
+    this.dispatchEvent(new CustomEvent("form-submit", {
+      detail: {
+        data: this._formData,
+        valid: this._valid,
+        errors: this._errors
+      },
+      bubbles: true
+    }));
+  }
+  _handleReset() {
+    this._formData = { ...this.initialData };
+    this._touched.clear();
+    this._dirty = false;
+    this._submitted = false;
+    this._validateForm();
+    this.requestUpdate();
+    this.dispatchEvent(new CustomEvent("form-reset", {
+      detail: {},
+      bubbles: true
+    }));
+  }
+  _getFormState() {
+    return {
+      data: this._formData,
+      errors: this._errors,
+      touched: this._touched,
+      dirty: this._dirty,
+      valid: this._valid,
+      submitted: this._submitted
+    };
+  }
+  // Public API methods
+  getData() {
+    return { ...this._formData };
+  }
+  setData(data) {
+    this._formData = { ...data };
+    this._dirty = true;
+    this._validateForm();
+    this.requestUpdate();
+  }
+  validate() {
+    this._validateForm();
+    return this._valid;
+  }
+  reset() {
+    this._handleReset();
+  }
+  getState() {
+    return this._getFormState();
+  }
+  render() {
+    const errorCount = this._errors.filter((e2) => e2.severity === "error").length;
+    const showValidationSummary = this.config.showValidationSummary !== false && errorCount > 0 && this._submitted;
+    const schema = this._currentSchema;
+    if (!schema) {
+      return html`<div>Loading form...</div>`;
+    }
+    return html`
+      <div class="form-container">
+        <!-- Form Header -->
+        <div class="form-header">
+          <h1 class="form-title">${schema.title}</h1>
+          ${schema.description ? html`
+            <p class="form-description">${schema.description}</p>
+          ` : ""}
+        </div>
+
+        <!-- Add Column Section -->
+        ${this.config.enableColumnManagement !== false ? html`
+          <div class="add-column-container">
+            <button 
+              class="add-column-btn"
+              @click="${this._addColumn}"
+              ?disabled="${this.disabled || this.readonly || this.config.maxColumns && this._columns.length >= this.config.maxColumns}"
+            >
+              Add Dimension Column
+            </button>
+          </div>
+        ` : ""}
+
+        <!-- Form Content -->
+        <div class="form-sections">
+          <!-- Validation Summary -->
+          ${showValidationSummary ? html`
+            <div class="validation-summary">
+              <h4 class="validation-summary-title">Please fix the following errors:</h4>
+              <ul class="validation-summary-list">
+                ${this._errors.filter((e2) => e2.severity === "error").map((error) => html`
+                    <li class="validation-summary-item">${error.message}</li>
+                  `)}
+              </ul>
+            </div>
+          ` : ""}
+
+          <!-- Form Sections -->
+          ${schema.sections.map((section) => html`
+            <jupiter-form-section
+              .section="${section}"
+              .columns="${this._columns}"
+              .formData="${this._formData}"
+              .disabled="${this.disabled || this.readonly}"
+              .collapsible="${this.config.collapsibleSections !== false}"
+              .locale="${this.config.locale || "en-US"}"
+              @field-change="${this._handleFieldChange}"
+              @section-expand="${this._handleSectionExpand}"
+              @concept-expand="${this._handleConceptExpand}"
+              @column-remove="${this._handleColumnRemove}"
+            ></jupiter-form-section>
+          `)}
+        </div>
+
+        <!-- Form Actions -->
+        <div class="form-actions">
+          <button 
+            class="btn-primary"
+            @click="${this._handleSubmit}"
+            ?disabled="${this.disabled || this.readonly}"
+          >
+            Submit
+          </button>
+          
+          <button 
+            class="btn-outline"
+            @click="${this._handleReset}"
+            ?disabled="${this.disabled || !this._dirty}"
+          >
+            Reset
+          </button>
+
+          <div class="form-meta">
+            <span>Errors: ${errorCount}</span>
+            <span>Modified: ${this._dirty ? "Yes" : "No"}</span>
+            <span>Valid: ${this._valid ? "Yes" : "No"}</span>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+JupiterDynamicForm.styles = css`
+    :host {
+      display: block;
+      font-family: var(--jupiter-font-family, system-ui, -apple-system, sans-serif);
+      color: var(--jupiter-text-primary, #333);
+      background: var(--jupiter-background, #fff);
+    }
+
+    .form-container {
+      width: 100%;
+      max-width: var(--jupiter-max-width, none);
+      margin: 0 auto;
+    }
+
+    .form-header {
+      padding: 24px;
+      border-bottom: 1px solid var(--jupiter-border-color, #ddd);
+      background: var(--jupiter-form-header-background, #fff);
+    }
+
+    .form-title {
+      font-size: 24px;
+      font-weight: 600;
+      margin: 0 0 8px 0;
+      color: var(--jupiter-text-primary, #333);
+    }
+
+    .form-description {
+      font-size: 16px;
+      color: var(--jupiter-text-secondary, #666);
+      margin: 0;
+      line-height: 1.5;
+    }
+
+    .form-actions {
+      padding: 16px 24px;
+      border-top: 1px solid var(--jupiter-border-color, #ddd);
+      background: var(--jupiter-form-actions-background, #f8f9fa);
+      display: flex;
+      gap: 12px;
+      align-items: center;
+    }
+
+    .add-column-container {
+      padding: 16px 24px;
+      border-bottom: 1px solid var(--jupiter-border-color, #ddd);
+      background: var(--jupiter-form-actions-background, #f8f9fa);
+    }
+
+    .add-column-btn {
+      padding: 8px 16px;
+      background: var(--jupiter-primary-color, #1976d2);
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    .add-column-btn:hover {
+      background: var(--jupiter-primary-color-dark, #1565c0);
+    }
+
+    .add-column-btn:disabled {
+      background: var(--jupiter-disabled-background, #ccc);
+      cursor: not-allowed;
+    }
+
+    .form-sections {
+      padding: 24px;
+    }
+
+    .validation-summary {
+      margin-bottom: 16px;
+      padding: 16px;
+      border-radius: 4px;
+      background: var(--jupiter-error-background, #ffebee);
+      border: 1px solid var(--jupiter-error-color, #d32f2f);
+    }
+
+    .validation-summary-title {
+      font-weight: 600;
+      color: var(--jupiter-error-color, #d32f2f);
+      margin: 0 0 8px 0;
+    }
+
+    .validation-summary-list {
+      margin: 0;
+      padding-left: 20px;
+    }
+
+    .validation-summary-item {
+      color: var(--jupiter-error-color, #d32f2f);
+      margin-bottom: 4px;
+    }
+
+    .form-actions button {
+      padding: 10px 20px;
+      border: none;
+      border-radius: 4px;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: background-color 0.2s ease;
+    }
+
+    .btn-primary {
+      background: var(--jupiter-primary-color, #1976d2);
+      color: white;
+    }
+
+    .btn-primary:hover:not(:disabled) {
+      background: var(--jupiter-primary-color-dark, #1565c0);
+    }
+
+    .btn-secondary {
+      background: var(--jupiter-secondary-color, #757575);
+      color: white;
+    }
+
+    .btn-secondary:hover:not(:disabled) {
+      background: var(--jupiter-secondary-color-dark, #616161);
+    }
+
+    .btn-outline {
+      background: transparent;
+      color: var(--jupiter-primary-color, #1976d2);
+      border: 1px solid var(--jupiter-primary-color, #1976d2);
+    }
+
+    .btn-outline:hover:not(:disabled) {
+      background: var(--jupiter-primary-color, #1976d2);
+      color: white;
+    }
+
+    button:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    .form-meta {
+      display: flex;
+      gap: 16px;
+      align-items: center;
+      font-size: 12px;
+      color: var(--jupiter-text-secondary, #666);
+      margin-left: auto;
+    }
+  `;
+__decorateClass([
+  n2({ type: Object })
+], JupiterDynamicForm.prototype, "schema", 2);
+__decorateClass([
+  n2({ type: Object })
+], JupiterDynamicForm.prototype, "xbrlInput", 2);
+__decorateClass([
+  n2({ type: Object })
+], JupiterDynamicForm.prototype, "config", 2);
+__decorateClass([
+  n2({ type: Object })
+], JupiterDynamicForm.prototype, "initialData", 2);
+__decorateClass([
+  n2({ type: Boolean })
+], JupiterDynamicForm.prototype, "disabled", 2);
+__decorateClass([
+  n2({ type: Boolean })
+], JupiterDynamicForm.prototype, "readonly", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_formData", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_columns", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_errors", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_touched", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_dirty", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_valid", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_submitted", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_currentSchema", 2);
+JupiterDynamicForm = __decorateClass([
+  t$1("jupiter-dynamic-form")
+], JupiterDynamicForm);
+const version = "1.0.0";
+export {
+  FormValidator,
+  JupiterConceptTree,
+  JupiterDynamicForm,
+  JupiterFormField,
+  JupiterFormSection,
+  version
+};
+//# sourceMappingURL=index.mjs.map