@lostgradient/cinder 0.2.0 → 0.3.0

package/dist/components/schema-form/index.js

@@ -0,0 +1,1164 @@
+var __defProp = Object.defineProperty;
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/components/schema-form/index.ts
+import"@lostgradient/cinder/schema-form/styles";
+
+// src/components/schema-form/schema-form.svelte
+import"svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { tick } from "svelte";
+
+// src/utilities/class-names.ts
+function classNames(...parts) {
+  return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
+}
+
+// src/components/schema-form/schema-form-model.ts
+function isRecord(value) {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+function isStandardSchema(value) {
+  if (!isRecord(value))
+    return false;
+  const standard = value["~standard"];
+  return isRecord(standard) && standard["version"] === 1;
+}
+function hasJsonSchemaConverter(value) {
+  const standard = value["~standard"];
+  return isRecord(standard.jsonSchema) && typeof standard.jsonSchema.input === "function";
+}
+function jsonSchemaFromStandardSchema(schema) {
+  if (!hasJsonSchemaConverter(schema))
+    return null;
+  try {
+    const generated = schema["~standard"].jsonSchema.input({ target: "draft-2020-12" });
+    return isRecord(generated) ? generated : null;
+  } catch {
+    return null;
+  }
+}
+function createSchemaFormModel(schema) {
+  const sourceSchema = isStandardSchema(schema) ? jsonSchemaFromStandardSchema(schema) ?? fallbackRawJsonSchema() : schema;
+  return {
+    field: fieldFromJsonSchema(sourceSchema, [], "value", true),
+    sourceSchema
+  };
+}
+function fallbackRawJsonSchema() {
+  return {
+    title: "Value",
+    description: "This schema cannot be inspected, so the value is edited as JSON."
+  };
+}
+function fieldFromJsonSchema(schema, path, key, required) {
+  if (!isRecord(schema)) {
+    return baseField("json", {}, path, key, required);
+  }
+  const normalizedSchema = schema;
+  const options = enumOptions(normalizedSchema);
+  if (options.length > 0) {
+    return { ...baseField("enum", normalizedSchema, path, key, required), options };
+  }
+  const schemaType = schemaTypeOf(normalizedSchema);
+  const schemaProperties = normalizedSchema["properties"];
+  if (schemaType === "object" || isRecord(schemaProperties)) {
+    const requiredProperties = requiredPropertyNames(normalizedSchema);
+    const properties = isRecord(schemaProperties) ? schemaProperties : {};
+    const fields = Object.entries(properties).map(([propertyKey, propertySchema]) => fieldFromJsonSchema(propertySchema, [...path, propertyKey], propertyKey, requiredProperties.has(propertyKey)));
+    return { ...baseField("object", normalizedSchema, path, key, required), fields };
+  }
+  if (schemaType === "array") {
+    const schemaItems = normalizedSchema["items"];
+    const itemSchema = isRecord(schemaItems) ? schemaItems : {};
+    const item = fieldFromJsonSchema(itemSchema, [...path, "0"], "item", true);
+    return { ...baseField("array", normalizedSchema, path, key, required), item };
+  }
+  const fieldKind = fieldKindForSchemaType(schemaType);
+  if (fieldKind) {
+    return baseField(fieldKind, normalizedSchema, path, key, required);
+  }
+  return baseField("json", normalizedSchema, path, key, required);
+}
+function fieldKindForSchemaType(type) {
+  switch (type) {
+    case "string":
+    case "number":
+    case "integer":
+    case "boolean":
+    case "array":
+    case "object":
+      return type;
+    default:
+      return;
+  }
+}
+function baseField(kind, schema, path, key, required) {
+  const description = schema["description"];
+  return {
+    kind,
+    key,
+    path,
+    label: fieldLabel(schema, key),
+    required,
+    ...typeof description === "string" && description.length > 0 ? { description } : {},
+    schema,
+    fields: [],
+    options: []
+  };
+}
+function schemaTypeOf(schema) {
+  const { type } = schema;
+  if (typeof type === "string")
+    return type;
+  if (Array.isArray(type)) {
+    const supported = type.find((candidate) => typeof candidate === "string" && candidate !== "null");
+    return typeof supported === "string" ? supported : undefined;
+  }
+  return;
+}
+function requiredPropertyNames(schema) {
+  const required = schema["required"];
+  if (!Array.isArray(required))
+    return new Set;
+  return new Set(required.filter((property) => typeof property === "string"));
+}
+function enumOptions(schema) {
+  const values = schema["enum"];
+  if (!Array.isArray(values) || values.length === 0)
+    return [];
+  if (!values.every((value) => isJsonPrimitive(value)))
+    return [];
+  return values.map((value) => ({
+    label: String(value),
+    value,
+    encodedValue: encodeEnumValue(value)
+  }));
+}
+function isJsonPrimitive(value) {
+  return value === null || ["string", "number", "boolean"].includes(typeof value);
+}
+function encodeEnumValue(value) {
+  return JSON.stringify(value);
+}
+function decodeEnumValue(value) {
+  const parsed = JSON.parse(value);
+  if (!isJsonPrimitive(parsed)) {
+    throw new Error("SchemaForm enum values must be JSON primitives.");
+  }
+  return parsed;
+}
+function fieldLabel(schema, key) {
+  const title = schema["title"];
+  if (typeof title === "string" && title.trim().length > 0) {
+    return title;
+  }
+  if (key === "value")
+    return "Value";
+  return key.replaceAll(/[-_]+/g, " ").replaceAll(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/^\w/, (letter) => letter.toUpperCase());
+}
+function defaultValueForField(field) {
+  if ("default" in field.schema)
+    return cloneJsonCompatible(field.schema["default"]);
+  if (field.kind === "object") {
+    const value = {};
+    for (const child of field.fields) {
+      value[child.key] = defaultValueForField(child);
+    }
+    return value;
+  }
+  if (field.kind === "array")
+    return [];
+  if (field.kind === "boolean")
+    return false;
+  if (field.kind === "enum")
+    return field.options[0]?.value ?? "";
+  if (field.kind === "string")
+    return "";
+  if (field.kind === "json")
+    return null;
+  return;
+}
+function initialValueForField(field, value) {
+  if (value === undefined)
+    return defaultValueForField(field);
+  const clonedValue = cloneJsonCompatible(value);
+  if (clonedValue === undefined)
+    return defaultValueForField(field);
+  return mergeInitialValueWithFieldDefaults(field, clonedValue);
+}
+function mergeInitialValueWithFieldDefaults(field, value) {
+  if (field.kind === "object" && isRecord(value)) {
+    const defaultValue = defaultValueForField(field);
+    const defaultRecord = isRecord(defaultValue) ? defaultValue : {};
+    const result = { ...defaultRecord };
+    const fieldKeys = new Set(field.fields.map((child) => child.key));
+    for (const child of field.fields) {
+      const seededValue = Object.hasOwn(value, child.key) ? value[child.key] : defaultRecord[child.key];
+      result[child.key] = seededValue === undefined ? defaultValueForField(child) : mergeInitialValueWithFieldDefaults(child, seededValue);
+    }
+    for (const [key, extraValue] of Object.entries(value)) {
+      if (!fieldKeys.has(key))
+        result[key] = extraValue;
+    }
+    return result;
+  }
+  if (field.kind === "array" && Array.isArray(value) && field.item) {
+    return value.map((item) => mergeInitialValueWithFieldDefaults(field.item, item));
+  }
+  return value;
+}
+function cloneJsonCompatible(value) {
+  if (value === undefined)
+    return;
+  try {
+    const serializedValue = JSON.stringify(value, cloneJsonCompatibleReplacer);
+    if (serializedValue === undefined)
+      return;
+    const clonedValue = JSON.parse(serializedValue);
+    return clonedValue;
+  } catch {
+    return;
+  }
+}
+function cloneJsonCompatibleReplacer(_key, value) {
+  if (typeof value === "number" && !Number.isFinite(value)) {
+    throw new TypeError("SchemaForm values must contain finite numbers.");
+  }
+  if (typeof value === "bigint") {
+    throw new TypeError("SchemaForm values must not contain bigint values.");
+  }
+  return value;
+}
+function pathKey(path) {
+  return path.map((segment) => segment.replaceAll("~", "~0").replaceAll("/", "~1")).join("/");
+}
+function pathId(path) {
+  return path.length === 0 ? "value" : path.map(domIdSegment).join("__");
+}
+function domIdSegment(segment) {
+  let encoded = "";
+  for (const character of segment) {
+    if (/^[a-zA-Z0-9]$/.test(character)) {
+      encoded += character;
+    } else {
+      encoded += `_${character.codePointAt(0)?.toString(16) ?? "0"}_`;
+    }
+  }
+  return `${segment.length}_${encoded}`;
+}
+function getValueAtPath(value, path) {
+  let current = value;
+  for (const segment of path) {
+    if (Array.isArray(current)) {
+      const index = Number(segment);
+      current = Number.isInteger(index) ? current[index] : undefined;
+    } else if (isRecord(current)) {
+      current = current[segment];
+    } else {
+      return;
+    }
+  }
+  return current;
+}
+function setValueAtPath(value, path, next) {
+  if (path.length === 0)
+    return next;
+  const [head, ...tail] = path;
+  if (head === undefined)
+    return next;
+  if (Array.isArray(value)) {
+    const copy2 = [...value];
+    const index = Number(head);
+    if (!Number.isInteger(index) || index < 0)
+      return copy2;
+    copy2[index] = setValueAtPath(copy2[index], tail, next);
+    return copy2;
+  }
+  const copy = isRecord(value) ? { ...value } : {};
+  copy[head] = setValueAtPath(copy[head], tail, next);
+  return copy;
+}
+function pruneUndefined(value) {
+  if (Array.isArray(value))
+    return value.map((item) => pruneUndefined(item));
+  if (!isRecord(value))
+    return value;
+  const output = {};
+  for (const [key, child] of Object.entries(value)) {
+    if (child !== undefined)
+      output[key] = pruneUndefined(child);
+  }
+  return output;
+}
+function arrayValueAtPath(value, path) {
+  const array = getValueAtPath(value, path);
+  return Array.isArray(array) ? array : [];
+}
+function rebaseFieldPath(field, path) {
+  const originalPath = field.path;
+  function rebase(candidate) {
+    const suffix = candidate.path.slice(originalPath.length);
+    return {
+      ...candidate,
+      path: [...path, ...suffix],
+      fields: candidate.fields.map(rebase),
+      ...candidate.item ? { item: rebase(candidate.item) } : {}
+    };
+  }
+  return rebase(field);
+}
+
+// src/components/schema-form/schema-form-validation.ts
+var validatorCache = new WeakMap;
+async function validateSchemaValue(schema, value) {
+  if (isStandardSchema(schema))
+    return validateStandardSchemaValue(schema, value);
+  return validateJsonSchemaValue(schema, value);
+}
+async function validateStandardSchemaValue(schema, value) {
+  const result = await schema["~standard"].validate(value);
+  if (!result.issues)
+    return { valid: true, value: result.value, issues: [] };
+  return {
+    valid: false,
+    value,
+    issues: result.issues.map((issue) => ({
+      path: standardIssuePath(issue.path),
+      message: issue.message
+    }))
+  };
+}
+async function validateJsonSchemaValue(schema, value) {
+  const validate = await validatorForSchema(schema);
+  const valid = validate(value);
+  if (valid)
+    return { valid: true, value, issues: [] };
+  return {
+    valid: false,
+    value,
+    issues: ajvIssues(validate.errors ?? [])
+  };
+}
+function validatorForSchema(schema) {
+  const cached = validatorCache.get(schema);
+  if (cached)
+    return cached;
+  const promise = createValidator(schema);
+  validatorCache.set(schema, promise);
+  return promise;
+}
+async function createValidator(schema) {
+  const draft = jsonSchemaDraft(schema);
+  if (draft === "draft-07") {
+    const { default: Ajv } = await import("ajv");
+    return new Ajv({ strict: false, allErrors: true, addUsedSchema: false }).compile(schema);
+  }
+  if (draft === "2019-09") {
+    const { default: Ajv2019 } = await import("ajv/dist/2019.js");
+    return new Ajv2019({ strict: false, allErrors: true, addUsedSchema: false }).compile(schema);
+  }
+  const { default: Ajv2020 } = await import("ajv/dist/2020.js");
+  return new Ajv2020({ strict: false, allErrors: true, addUsedSchema: false }).compile(schema);
+}
+function jsonSchemaDraft(schema) {
+  const id = schema["$schema"];
+  if (typeof id !== "string")
+    return "2020-12";
+  if (id.includes("draft-07"))
+    return "draft-07";
+  if (id.includes("2019-09"))
+    return "2019-09";
+  return "2020-12";
+}
+function standardIssuePath(path) {
+  if (!path)
+    return [];
+  return path.map((segment) => {
+    if (isRecord(segment) && "key" in segment)
+      return propertyKeyPathSegment(segment.key);
+    return propertyKeyPathSegment(segment);
+  });
+}
+function propertyKeyPathSegment(value) {
+  if (typeof value === "string")
+    return value;
+  if (typeof value === "number" || typeof value === "boolean" || typeof value === "bigint") {
+    return String(value);
+  }
+  if (typeof value === "symbol")
+    return value.description ?? value.toString();
+  if (value === null || value === undefined)
+    return "";
+  try {
+    return JSON.stringify(value) ?? "";
+  } catch {
+    return "";
+  }
+}
+function ajvIssues(errors) {
+  return errors.map((error) => ({
+    path: ajvErrorPath(error),
+    message: error.message ?? "Invalid value"
+  }));
+}
+function ajvErrorPath(error) {
+  const parentPath = jsonPointerToPath(error.instancePath);
+  if (error.keyword !== "required" || !isRecord(error.params))
+    return parentPath;
+  const missingProperty = error.params["missingProperty"];
+  return typeof missingProperty === "string" ? [...parentPath, missingProperty] : parentPath;
+}
+function jsonPointerToPath(pointer) {
+  if (pointer === "")
+    return [];
+  return pointer.slice(1).split("/").map((segment) => segment.replaceAll("~1", "/").replaceAll("~0", "~"));
+}
+function issuesByPath(issues) {
+  const grouped = {};
+  for (const issue of issues) {
+    const key = pathKey(issue.path);
+    grouped[key] ??= issue.message;
+  }
+  return grouped;
+}
+function parseJsonDraft(path, text) {
+  try {
+    return { ok: true, value: JSON.parse(text) };
+  } catch (error) {
+    return {
+      ok: false,
+      issue: {
+        path,
+        message: error instanceof Error ? error.message : "Invalid JSON"
+      }
+    };
+  }
+}
+function serializeValidatedValue(value) {
+  try {
+    const serialized = JSON.stringify(value, schemaFormJsonReplacer);
+    if (serialized === undefined) {
+      throw new TypeError("Validated value is not JSON serializable.");
+    }
+    return { ok: true, value: serialized };
+  } catch (error) {
+    return {
+      ok: false,
+      issue: {
+        path: [],
+        message: error instanceof Error ? error.message : "Validated value is not JSON serializable"
+      }
+    };
+  }
+}
+function schemaFormJsonReplacer(_key, value) {
+  if (typeof value === "number" && !Number.isFinite(value)) {
+    throw new TypeError("Validated value contains a non-finite number.");
+  }
+  if (typeof value === "bigint") {
+    throw new TypeError("Validated value contains a bigint, which is not JSON serializable.");
+  }
+  return value;
+}
+function readSchemaFormData(formData, name = "value") {
+  const raw = formData.get(name);
+  if (typeof raw !== "string")
+    return;
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return;
+  }
+}
+
+// src/components/schema-form/schema-form.svelte
+var fieldLabel2 = ($$anchor, field = $.noop) => {
+  var fragment = root_1();
+  var span = $.first_child(fragment);
+  var text = $.child(span, true);
+  $.reset(span);
+  var node = $.sibling(span, 2);
+  {
+    var consequent = ($$anchor2) => {
+      var span_1 = root_2();
+      $.append($$anchor2, span_1);
+    };
+    $.if(node, ($$render) => {
+      if (field().required)
+        $$render(consequent);
+    });
+  }
+  $.template_effect(() => $.set_text(text, field().label));
+  $.append($$anchor, fragment);
+};
+var root_2 = $.from_html(`<span class="cinder-schema-form__required" aria-hidden="true">*</span>`);
+var root_1 = $.from_html(`<span> </span> <!>`, 1);
+var root_4 = $.from_html(`<p class="cinder-schema-form__description"> </p>`);
+var root_5 = $.from_html(`<p class="cinder-schema-form__error" aria-live="polite" tabindex="-1"> </p>`);
+var root_3 = $.from_html(`<!> <!>`, 1);
+var root_7 = $.from_html(`<fieldset class="cinder-schema-form__fieldset"><legend class="cinder-schema-form__legend"><!></legend> <!> <div class="cinder-schema-form__fields"></div></fieldset>`);
+var root_10 = $.from_html(`<div class="cinder-schema-form__array-item"><!> <button type="button" class="cinder-schema-form__secondary-button">Remove</button></div>`);
+var root_9 = $.from_html(`<fieldset class="cinder-schema-form__fieldset"><legend class="cinder-schema-form__legend"><!></legend> <!> <div class="cinder-schema-form__array"></div> <button type="button" class="cinder-schema-form__secondary-button"> </button></fieldset>`);
+var root_12 = $.from_html(`<div class="cinder-schema-form__field"><button type="button" role="switch" class="cinder-schema-form__switch"><span class="cinder-schema-form__switch-thumb" aria-hidden="true"></span> <span class="cinder-schema-form__switch-label"><!></span></button> <!></div>`);
+var root_14 = $.from_html(`<input class="cinder-_input-frame cinder-schema-form__control"/>`);
+var root_15 = $.from_html(`<input class="cinder-_input-frame cinder-schema-form__control" type="number"/>`);
+var root_17 = $.from_html(`<option> </option>`);
+var root_16 = $.from_html(`<select class="cinder-_input-frame cinder-schema-form__control"></select>`);
+var root_18 = $.from_html(`<textarea class="cinder-_input-frame cinder-schema-form__control cinder-schema-form__json-control" rows="6" spellcheck="false"></textarea>`);
+var root_13 = $.from_html(`<div class="cinder-schema-form__field"><label class="cinder-schema-form__label"><!></label> <!> <!></div>`);
+var root_19 = $.from_html(`<p class="cinder-schema-form__error" aria-live="polite" tabindex="-1"> </p>`);
+var root = $.from_html(`<form><!> <div class="cinder-schema-form__fields"></div> <input type="hidden"/> <button type="submit" class="cinder-schema-form__submit"> </button></form>`);
+function Schema_form($$anchor, $$props) {
+  const generatedId = $.props_id();
+  $.push($$props, true);
+  const fieldMessages = ($$anchor2, field = $.noop) => {
+    var fragment_1 = root_3();
+    var node_1 = $.first_child(fragment_1);
+    {
+      var consequent_1 = ($$anchor3) => {
+        var p = root_4();
+        var text_1 = $.child(p, true);
+        $.reset(p);
+        $.template_effect(($0) => {
+          $.set_attribute(p, "id", `${$0 ?? ""}-description`);
+          $.set_text(text_1, field().description);
+        }, [() => fieldDomId(field())]);
+        $.append($$anchor3, p);
+      };
+      $.if(node_1, ($$render) => {
+        if (field().description)
+          $$render(consequent_1);
+      });
+    }
+    var node_2 = $.sibling(node_1, 2);
+    {
+      var consequent_2 = ($$anchor3) => {
+        var p_1 = root_5();
+        var text_2 = $.child(p_1, true);
+        $.reset(p_1);
+        $.template_effect(($0, $1) => {
+          $.set_attribute(p_1, "id", `${$0 ?? ""}-error`);
+          $.set_text(text_2, $1);
+        }, [() => fieldDomId(field()), () => fieldError(field())]);
+        $.append($$anchor3, p_1);
+      };
+      var d = $.derived(() => fieldError(field()));
+      $.if(node_2, ($$render) => {
+        if ($.get(d))
+          $$render(consequent_2);
+      });
+    }
+    $.append($$anchor2, fragment_1);
+  };
+  const renderField = ($$anchor2, field = $.noop) => {
+    const id = $.derived(() => fieldDomId(field()));
+    const error = $.derived(() => fieldError(field()));
+    const ariaDescribedBy = $.derived(() => describedBy(field()));
+    var fragment_2 = $.comment();
+    var node_3 = $.first_child(fragment_2);
+    {
+      var consequent_3 = ($$anchor3) => {
+        var fieldset = root_7();
+        var legend = $.child(fieldset);
+        var node_4 = $.child(legend);
+        fieldLabel2(node_4, field);
+        $.reset(legend);
+        var node_5 = $.sibling(legend, 2);
+        fieldMessages(node_5, field);
+        var div = $.sibling(node_5, 2);
+        $.each(div, 21, () => field().fields, (child2) => pathKey(child2.path), ($$anchor4, child2) => {
+          renderField($$anchor4, () => $.get(child2));
+        });
+        $.reset(div);
+        $.reset(fieldset);
+        $.append($$anchor3, fieldset);
+      };
+      var consequent_5 = ($$anchor3) => {
+        var fieldset_1 = root_9();
+        var legend_1 = $.child(fieldset_1);
+        var node_6 = $.child(legend_1);
+        fieldLabel2(node_6, field);
+        $.reset(legend_1);
+        var node_7 = $.sibling(legend_1, 2);
+        fieldMessages(node_7, field);
+        var div_1 = $.sibling(node_7, 2);
+        $.each(div_1, 21, () => arrayRows(field()), (row) => row.key, ($$anchor4, row) => {
+          const itemField = $.derived(() => field().item ? rebaseFieldPath(field().item, [...field().path, String($.get(row).index)]) : undefined);
+          var div_2 = root_10();
+          var node_8 = $.child(div_2);
+          {
+            var consequent_4 = ($$anchor5) => {
+              renderField($$anchor5, () => $.get(itemField));
+            };
+            $.if(node_8, ($$render) => {
+              if ($.get(itemField))
+                $$render(consequent_4);
+            });
+          }
+          var button = $.sibling(node_8, 2);
+          $.reset(div_2);
+          $.template_effect(() => {
+            $.set_attribute(button, "aria-label", `Remove ${field().label} item ${$.get(row).index + 1}`);
+            button.disabled = $.get(submitting);
+          });
+          $.delegated("click", button, () => removeArrayItem(field(), $.get(row).index));
+          $.append($$anchor4, div_2);
+        });
+        $.reset(div_1);
+        var button_1 = $.sibling(div_1, 2);
+        var text_3 = $.child(button_1);
+        $.reset(button_1);
+        $.reset(fieldset_1);
+        $.template_effect(($0) => {
+          $.set_attribute(div_1, "data-cinder-empty", $0);
+          button_1.disabled = $.get(submitting);
+          $.set_text(text_3, `Add ${field().label ?? ""}`);
+        }, [() => arrayRows(field()).length === 0 || undefined]);
+        $.delegated("click", button_1, () => addArrayItem(field()));
+        $.append($$anchor3, fieldset_1);
+      };
+      var consequent_6 = ($$anchor3) => {
+        var div_3 = root_12();
+        var button_2 = $.child(div_3);
+        var span_2 = $.sibling($.child(button_2), 2);
+        var node_9 = $.child(span_2);
+        fieldLabel2(node_9, field);
+        $.reset(span_2);
+        $.reset(button_2);
+        var node_10 = $.sibling(button_2, 2);
+        fieldMessages(node_10, field);
+        $.reset(div_3);
+        $.template_effect(($0, $1) => {
+          $.set_attribute(button_2, "id", $.get(id));
+          $.set_attribute(button_2, "aria-checked", $0);
+          $.set_attribute(button_2, "aria-required", field().required ? "true" : undefined);
+          $.set_attribute(button_2, "aria-describedby", $.get(ariaDescribedBy));
+          $.set_attribute(button_2, "aria-invalid", $.get(error) ? "true" : undefined);
+          $.set_attribute(button_2, "data-cinder-checked", $1);
+          $.set_attribute(button_2, "data-cinder-invalid", $.get(error) ? "true" : undefined);
+          button_2.disabled = $.get(submitting);
+        }, [
+          () => booleanValue(field()),
+          () => booleanValue(field()) || undefined
+        ]);
+        $.delegated("click", button_2, () => toggleSwitch(field()));
+        $.delegated("keydown", button_2, (event) => handleSwitchKeydown(field(), event));
+        $.append($$anchor3, div_3);
+      };
+      var alternate_1 = ($$anchor3) => {
+        var div_4 = root_13();
+        var label = $.child(div_4);
+        var node_11 = $.child(label);
+        fieldLabel2(node_11, field);
+        $.reset(label);
+        var node_12 = $.sibling(label, 2);
+        {
+          var consequent_7 = ($$anchor4) => {
+            var input_1 = root_14();
+            $.remove_input_defaults(input_1);
+            $.template_effect(($0) => {
+              $.set_attribute(input_1, "id", $.get(id));
+              $.set_value(input_1, $0);
+              input_1.required = field().required;
+              input_1.disabled = $.get(submitting);
+              $.set_attribute(input_1, "aria-describedby", $.get(ariaDescribedBy));
+              $.set_attribute(input_1, "aria-invalid", $.get(error) ? "true" : undefined);
+            }, [() => stringValue(field())]);
+            $.delegated("input", input_1, (event) => updateString(field(), event));
+            $.append($$anchor4, input_1);
+          };
+          var consequent_8 = ($$anchor4) => {
+            var input_2 = root_15();
+            $.remove_input_defaults(input_2);
+            $.template_effect(($0) => {
+              $.set_attribute(input_2, "id", $.get(id));
+              $.set_attribute(input_2, "step", field().kind === "integer" ? "1" : "any");
+              $.set_value(input_2, $0);
+              input_2.required = field().required;
+              input_2.disabled = $.get(submitting);
+              $.set_attribute(input_2, "aria-describedby", $.get(ariaDescribedBy));
+              $.set_attribute(input_2, "aria-invalid", $.get(error) ? "true" : undefined);
+            }, [() => numberInputValue(field())]);
+            $.delegated("input", input_2, (event) => updateNumber(field(), event));
+            $.append($$anchor4, input_2);
+          };
+          var consequent_9 = ($$anchor4) => {
+            var select_1 = root_16();
+            $.each(select_1, 21, () => field().options, (option) => option.encodedValue, ($$anchor5, option) => {
+              var option_1 = root_17();
+              var text_4 = $.child(option_1, true);
+              $.reset(option_1);
+              var option_1_value = {};
+              $.template_effect(() => {
+                $.set_text(text_4, $.get(option).label);
+                if (option_1_value !== (option_1_value = $.get(option).encodedValue)) {
+                  option_1.value = (option_1.__value = $.get(option).encodedValue) ?? "";
+                }
+              });
+              $.append($$anchor5, option_1);
+            });
+            $.reset(select_1);
+            var select_1_value;
+            $.init_select(select_1);
+            $.template_effect(($0) => {
+              $.set_attribute(select_1, "id", $.get(id));
+              select_1.required = field().required;
+              select_1.disabled = $.get(submitting);
+              $.set_attribute(select_1, "aria-describedby", $.get(ariaDescribedBy));
+              $.set_attribute(select_1, "aria-invalid", $.get(error) ? "true" : undefined);
+              if (select_1_value !== (select_1_value = $0)) {
+                select_1.value = (select_1.__value = $0) ?? "", $.select_option(select_1, $0);
+              }
+            }, [() => enumValue(field())]);
+            $.delegated("change", select_1, (event) => updateEnum(field(), event));
+            $.append($$anchor4, select_1);
+          };
+          var alternate = ($$anchor4) => {
+            var textarea_1 = root_18();
+            $.remove_textarea_child(textarea_1);
+            $.template_effect(($0) => {
+              $.set_attribute(textarea_1, "id", $.get(id));
+              $.set_value(textarea_1, $0);
+              textarea_1.required = field().required;
+              textarea_1.disabled = $.get(submitting);
+              $.set_attribute(textarea_1, "aria-describedby", $.get(ariaDescribedBy));
+              $.set_attribute(textarea_1, "aria-invalid", $.get(error) ? "true" : undefined);
+            }, [() => rawJsonValue(field())]);
+            $.delegated("input", textarea_1, (event) => updateRawJson(field(), event));
+            $.append($$anchor4, textarea_1);
+          };
+          $.if(node_12, ($$render) => {
+            if (field().kind === "string")
+              $$render(consequent_7);
+            else if (field().kind === "number" || field().kind === "integer")
+              $$render(consequent_8, 1);
+            else if (field().kind === "enum")
+              $$render(consequent_9, 2);
+            else
+              $$render(alternate, -1);
+          });
+        }
+        var node_13 = $.sibling(node_12, 2);
+        fieldMessages(node_13, field);
+        $.reset(div_4);
+        $.template_effect(() => $.set_attribute(label, "for", $.get(id)));
+        $.append($$anchor3, div_4);
+      };
+      $.if(node_3, ($$render) => {
+        if (field().kind === "object")
+          $$render(consequent_3);
+        else if (field().kind === "array")
+          $$render(consequent_5, 1);
+        else if (field().kind === "boolean")
+          $$render(consequent_6, 2);
+        else
+          $$render(alternate_1, -1);
+      });
+    }
+    $.append($$anchor2, fragment_2);
+  };
+  let name = $.prop($$props, "name", 3, "value"), submitLabel = $.prop($$props, "submitLabel", 3, "Submit"), rest = $.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "schema",
+    "value",
+    "name",
+    "submitLabel",
+    "class",
+    "onsubmit",
+    "novalidate"
+  ]);
+  const model = $.derived(() => createSchemaFormModel($$props.schema));
+  let formElement = $.state(undefined);
+  let serializedInputElement = $.state(undefined);
+  let formValue = $.state(undefined);
+  let errors = $.state($.proxy({}));
+  let rawDrafts = $.state($.proxy({}));
+  let serializedValue = $.state("");
+  let submitting = $.state(false);
+  let allowNativeSubmit = false;
+  let activeSubmitId = 0;
+  let arrayKeyCounter = 0;
+  let arrayKeys = $.state($.proxy({}));
+  const formId = $.derived(() => $$props.id ?? `${generatedId}-form`);
+  const rootFields = $.derived(() => $.get(model).field.kind === "object" ? $.get(model).field.fields : [$.get(model).field]);
+  const rootError = $.derived(() => $.get(model).field.kind === "object" ? $.get(errors)[pathKey([])] : undefined);
+  const rootErrorId = $.derived(() => `${$.get(formId)}-${pathId([])}-error`);
+  $.user_effect(() => {
+    const nextValue = initialValueForField($.get(model).field, $$props.value);
+    $.set(formValue, nextValue, true);
+    $.set(errors, {}, true);
+    setSerializedValue("");
+    $.set(rawDrafts, seedRawDrafts($.get(model).field, nextValue), true);
+    $.set(arrayKeys, seedArrayKeys($.get(model).field, nextValue), true);
+  });
+  function fieldDomId(field) {
+    return `${$.get(formId)}-${pathId(field.path)}`;
+  }
+  function fieldError(field) {
+    return $.get(errors)[pathKey(field.path)];
+  }
+  function describedBy(field) {
+    const ids = [];
+    if (field.description)
+      ids.push(`${fieldDomId(field)}-description`);
+    if (fieldError(field))
+      ids.push(`${fieldDomId(field)}-error`);
+    return ids.length > 0 ? ids.join(" ") : undefined;
+  }
+  function stringValue(field) {
+    const current = getValueAtPath($.get(formValue), field.path);
+    return current === undefined || current === null ? "" : String(current);
+  }
+  function numberValue(field) {
+    const current = getValueAtPath($.get(formValue), field.path);
+    return typeof current === "number" ? current : undefined;
+  }
+  function numberInputValue(field) {
+    const current = numberValue(field);
+    return current === undefined ? "" : String(current);
+  }
+  function booleanValue(field) {
+    return getValueAtPath($.get(formValue), field.path) === true;
+  }
+  function enumValue(field) {
+    const current = getValueAtPath($.get(formValue), field.path);
+    const option = field.options.find((candidate) => Object.is(candidate.value, current));
+    return option?.encodedValue ?? field.options[0]?.encodedValue ?? "";
+  }
+  function rawJsonValue(field) {
+    const key = pathKey(field.path);
+    if ($.get(rawDrafts)[key] !== undefined)
+      return $.get(rawDrafts)[key];
+    return JSON.stringify(getValueAtPath($.get(formValue), field.path) ?? null, null, 2);
+  }
+  function updateValue(path, next) {
+    if ($.get(submitting))
+      return;
+    $.set(formValue, setValueAtPath($.get(formValue), path, next), true);
+    const key = pathKey(path);
+    if ($.get(errors)[key]) {
+      const { [key]: _removed, ...remaining } = $.get(errors);
+      $.set(errors, remaining, true);
+    }
+    setSerializedValue("");
+  }
+  function setSerializedValue(next) {
+    $.set(serializedValue, next, true);
+    if ($.get(serializedInputElement))
+      $.get(serializedInputElement).value = next;
+  }
+  function updateString(field, event) {
+    const input = event.currentTarget;
+    if ($.get(submitting)) {
+      input.value = stringValue(field);
+      return;
+    }
+    updateValue(field.path, input.value);
+  }
+  function updateNumber(field, event) {
+    const input = event.currentTarget;
+    if ($.get(submitting)) {
+      input.value = numberInputValue(field);
+      return;
+    }
+    const raw = input.value;
+    updateValue(field.path, raw === "" ? undefined : Number(raw));
+  }
+  function updateBoolean(field, checked) {
+    updateValue(field.path, checked);
+  }
+  function updateEnum(field, event) {
+    const select = event.currentTarget;
+    if ($.get(submitting)) {
+      select.value = enumValue(field);
+      return;
+    }
+    updateValue(field.path, decodeEnumValue(select.value));
+  }
+  function updateRawJson(field, event) {
+    const textarea = event.currentTarget;
+    if ($.get(submitting)) {
+      textarea.value = rawJsonValue(field);
+      return;
+    }
+    const key = pathKey(field.path);
+    $.set(rawDrafts, { ...$.get(rawDrafts), [key]: textarea.value }, true);
+    setSerializedValue("");
+  }
+  function toggleSwitch(field) {
+    updateBoolean(field, !booleanValue(field));
+  }
+  function handleSwitchKeydown(field, event) {
+    if (event.key !== " " && event.key !== "Enter")
+      return;
+    event.preventDefault();
+    toggleSwitch(field);
+  }
+  function arrayRows(field) {
+    const values = arrayValueAtPath($.get(formValue), field.path);
+    const keys = $.get(arrayKeys)[pathKey(field.path)] ?? [];
+    return values.map((_, index) => ({ key: keys[index] ?? `${pathKey(field.path)}-${index}`, index }));
+  }
+  function addArrayItem(field) {
+    if ($.get(submitting))
+      return;
+    const values = arrayValueAtPath($.get(formValue), field.path);
+    const nextValue = field.item ? defaultValueForField(field.item) : null;
+    updateValue(field.path, [...values, nextValue]);
+    const key = pathKey(field.path);
+    $.set(arrayKeys, {
+      ...$.get(arrayKeys),
+      [key]: [
+        ...$.get(arrayKeys)[key] ?? [],
+        `${key}-${arrayKeyCounter++}`
+      ]
+    }, true);
+  }
+  function removeArrayItem(field, index) {
+    if ($.get(submitting))
+      return;
+    const values = arrayValueAtPath($.get(formValue), field.path);
+    updateValue(field.path, values.filter((_, candidateIndex) => candidateIndex !== index));
+    $.set(rawDrafts, reindexArrayPathState($.get(rawDrafts), field.path, index), true);
+    $.set(errors, reindexArrayPathState($.get(errors), field.path, index), true);
+    const key = pathKey(field.path);
+    $.set(arrayKeys, {
+      ...$.get(arrayKeys),
+      [key]: ($.get(arrayKeys)[key] ?? []).filter((_, candidateIndex) => candidateIndex !== index)
+    }, true);
+  }
+  function reindexArrayPathState(state2, arrayPath, removedIndex) {
+    const prefix = pathKey(arrayPath);
+    const pathPrefix = prefix === "" ? "" : `${prefix}/`;
+    const next = {};
+    for (const [key, stateValue] of Object.entries(state2)) {
+      if (!key.startsWith(pathPrefix)) {
+        next[key] = stateValue;
+        continue;
+      }
+      const relativeKey = key.slice(pathPrefix.length);
+      if (relativeKey === "") {
+        next[key] = stateValue;
+        continue;
+      }
+      const [indexSegment = "", ...remainingSegments] = relativeKey.split("/");
+      const index = Number(indexSegment);
+      if (!Number.isInteger(index) || index < 0) {
+        next[key] = stateValue;
+        continue;
+      }
+      if (index < removedIndex) {
+        next[key] = stateValue;
+        continue;
+      }
+      if (index === removedIndex)
+        continue;
+      const shiftedKey = [String(index - 1), ...remainingSegments].join("/");
+      next[`${pathPrefix}${shiftedKey}`] = stateValue;
+    }
+    return next;
+  }
+  function seedRawDrafts(field, currentValue) {
+    const drafts = {};
+    for (const jsonField of currentJsonFields(field, currentValue)) {
+      drafts[pathKey(jsonField.path)] = JSON.stringify(getValueAtPath(currentValue, jsonField.path) ?? null, null, 2);
+    }
+    return drafts;
+  }
+  function currentJsonFields(field, currentValue) {
+    const fields = [];
+    function visit(candidate) {
+      if (candidate.kind === "json")
+        fields.push(candidate);
+      for (const child2 of candidate.fields)
+        visit(child2);
+      if (candidate.kind === "array" && candidate.item) {
+        for (const [index] of arrayValueAtPath(currentValue, candidate.path).entries()) {
+          visit(rebaseFieldPath(candidate.item, [...candidate.path, String(index)]));
+        }
+      }
+    }
+    visit(field);
+    return fields;
+  }
+  function seedArrayKeys(field, currentValue) {
+    const keys = {};
+    function visit(candidate) {
+      if (candidate.kind === "array") {
+        const key = pathKey(candidate.path);
+        keys[key] = arrayValueAtPath(currentValue, candidate.path).map(() => `${key}-${arrayKeyCounter++}`);
+      }
+      for (const child2 of candidate.fields)
+        visit(child2);
+      if (candidate.item)
+        visit(candidate.item);
+    }
+    visit(field);
+    return keys;
+  }
+  function rawJsonIssues() {
+    let nextValue = $.get(formValue);
+    const issues = [];
+    for (const field of currentJsonFields($.get(model).field, $.get(formValue))) {
+      const draft = $.get(rawDrafts)[pathKey(field.path)];
+      if (draft === undefined)
+        continue;
+      const parsed = parseJsonDraft(field.path, draft);
+      if (parsed.ok) {
+        nextValue = setValueAtPath(nextValue, field.path, parsed.value);
+      } else {
+        issues.push(parsed.issue);
+      }
+    }
+    return { value: nextValue, issues };
+  }
+  async function reportSubmitIssues(issues, submitId) {
+    if (activeSubmitId !== submitId)
+      return;
+    $.set(errors, issuesByPath(issues), true);
+    setSerializedValue("");
+    $.set(submitting, false);
+    await focusFirstError(submitId);
+  }
+  async function focusFirstError(submitId) {
+    await tick();
+    if (activeSubmitId !== submitId)
+      return;
+    $.get(formElement)?.querySelector('[aria-invalid="true"], [data-cinder-invalid="true"], .cinder-schema-form__error')?.focus();
+  }
+  function shouldResumeNativeSubmit() {
+    return $$props.onsubmit === undefined && ($$props.action !== undefined || $$props.method !== undefined);
+  }
+  function nativeSubmitter(event) {
+    const submitter = event.submitter;
+    if (submitter instanceof HTMLButtonElement && submitter.type === "submit" && submitter.form === $.get(formElement)) {
+      return submitter;
+    }
+    if (submitter instanceof HTMLInputElement && (submitter.type === "submit" || submitter.type === "image") && submitter.form === $.get(formElement)) {
+      return submitter;
+    }
+    return;
+  }
+  async function handleSubmit(event) {
+    if (allowNativeSubmit) {
+      allowNativeSubmit = false;
+      return;
+    }
+    event.preventDefault();
+    if ($.get(submitting))
+      return;
+    const submitId = activeSubmitId + 1;
+    activeSubmitId = submitId;
+    $.set(submitting, true);
+    try {
+      const raw = rawJsonIssues();
+      if (raw.issues.length > 0) {
+        await reportSubmitIssues(raw.issues, submitId);
+        return;
+      }
+      const candidate = pruneUndefined(raw.value);
+      const result = await validateSchemaValue($$props.schema, candidate);
+      if (!result.valid) {
+        await reportSubmitIssues(result.issues, submitId);
+        return;
+      }
+      const serialized = serializeValidatedValue(result.value);
+      if (!serialized.ok) {
+        await reportSubmitIssues([serialized.issue], submitId);
+        return;
+      }
+      $.set(formValue, result.value, true);
+      $.set(errors, {}, true);
+      setSerializedValue(serialized.value);
+      await $$props.onsubmit?.(result.value, event);
+      if (shouldResumeNativeSubmit()) {
+        allowNativeSubmit = true;
+        await tick();
+        $.get(formElement)?.requestSubmit(nativeSubmitter(event));
+      }
+    } finally {
+      if (activeSubmitId === submitId)
+        $.set(submitting, false);
+    }
+  }
+  var form = root();
+  $.attribute_effect(form, ($0) => ({
+    ...rest,
+    id: $.get(formId),
+    class: $0,
+    novalidate: $$props.novalidate ?? true,
+    onsubmit: handleSubmit
+  }), [() => classNames("cinder-schema-form", $$props.class)]);
+  var node_14 = $.child(form);
+  {
+    var consequent_10 = ($$anchor2) => {
+      var p_2 = root_19();
+      var text_5 = $.child(p_2, true);
+      $.reset(p_2);
+      $.template_effect(() => {
+        $.set_attribute(p_2, "id", $.get(rootErrorId));
+        $.set_text(text_5, $.get(rootError));
+      });
+      $.append($$anchor2, p_2);
+    };
+    $.if(node_14, ($$render) => {
+      if ($.get(rootError))
+        $$render(consequent_10);
+    });
+  }
+  var div_5 = $.sibling(node_14, 2);
+  $.each(div_5, 21, () => $.get(rootFields), (field) => pathKey(field.path), ($$anchor2, field) => {
+    renderField($$anchor2, () => $.get(field));
+  });
+  $.reset(div_5);
+  var input_3 = $.sibling(div_5, 2);
+  $.remove_input_defaults(input_3);
+  $.bind_this(input_3, ($$value) => $.set(serializedInputElement, $$value), () => $.get(serializedInputElement));
+  var button_3 = $.sibling(input_3, 2);
+  var text_6 = $.child(button_3, true);
+  $.reset(button_3);
+  $.reset(form);
+  $.bind_this(form, ($$value) => $.set(formElement, $$value), () => $.get(formElement));
+  $.template_effect(() => {
+    $.set_attribute(input_3, "name", name());
+    $.set_value(input_3, $.get(serializedValue));
+    button_3.disabled = $.get(submitting);
+    $.set_text(text_6, $.get(submitting) ? "Validating..." : submitLabel());
+  });
+  $.append($$anchor, form);
+  $.pop();
+}
+$.delegate(["click", "keydown", "input", "change"]);
+
+// src/components/schema-form/index.ts
+var schema_form_default = Schema_form;
+export {
+  readSchemaFormData,
+  schema_form_default as default,
+  Schema_form as SchemaForm
+};
+
+//# debugId=5C92F10738CBE8D064756E2164756E21