@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/server/components/json-schema-editor/index.js

@@ -185,25 +185,92 @@ function useAnnouncer(options) {
 import * as $4 from "svelte/internal/server";
 function Badge($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
+    const subscriptionStateConfigurations = {
+      active: { variant: "success", label: "Active" },
+      trialing: { variant: "info", label: "Trialing" },
+      "past-due": { variant: "warning", label: "Past due" },
+      canceled: { variant: "neutral", label: "Canceled" },
+      expired: { variant: "danger", label: "Expired" },
+      refunded: { variant: "neutral", label: "Refunded" }
+    };
+    const subscriptionStateIconPaths = {
+      active: ["M21.801 10A10 10 0 1 1 17 3.335", "m9 11 3 3L22 4"],
+      trialing: ["M12 6v6l4 2", "M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"],
+      "past-due": [
+        "m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z",
+        "M12 9v4",
+        "M12 17h.01"
+      ],
+      canceled: [
+        "M15 9 9 15",
+        "M9 9l6 6",
+        "M22 12A10 10 0 1 1 12 2a10 10 0 0 1 10 10Z"
+      ],
+      expired: [
+        "M8 2v4",
+        "M16 2v4",
+        "M21 13V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8",
+        "M3 10h18",
+        "m17 14-5-5",
+        "m12 14 5 5"
+      ],
+      refunded: [
+        "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8",
+        "M3 3v5h5"
+      ]
+    };
     let {
       variant = "neutral",
       size = "md",
       mono = false,
+      subscriptionState,
       class: customClassName,
       children,
       $$slots,
       $$events,
       ...rest
     } = $$props;
+    const subscriptionStateConfiguration = $4.derived(() => subscriptionState === undefined ? undefined : subscriptionStateConfigurations[subscriptionState]);
+    const resolvedVariant = $4.derived(() => subscriptionStateConfiguration()?.variant ?? variant);
+    const resolvedSubscriptionIconPaths = $4.derived(() => subscriptionState === undefined ? undefined : subscriptionStateIconPaths[subscriptionState]);
     $$renderer2.push(`<span${$4.attributes({
       class: $4.clsx(classNames("cinder-badge", customClassName)),
-      "data-cinder-variant": variant,
+      "data-cinder-variant": resolvedVariant(),
       "data-cinder-size": size,
       "data-cinder-mono": mono ? "" : undefined,
+      "data-cinder-subscription-state": subscriptionState,
       ...rest
     })}>`);
-    children?.($$renderer2);
-    $$renderer2.push(`<!----></span>`);
+    if (subscriptionStateConfiguration()) {
+      $$renderer2.push("<!--[0-->");
+      if (resolvedSubscriptionIconPaths()) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<svg class="icon-sm" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><!--[-->`);
+        const each_array = $4.ensure_array_like(resolvedSubscriptionIconPaths());
+        for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
+          let iconPath = each_array[$$index];
+          $$renderer2.push(`<path${$4.attr("d", iconPath)}></path>`);
+        }
+        $$renderer2.push(`<!--]--></svg>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--> `);
+      if (children) {
+        $$renderer2.push("<!--[0-->");
+        children($$renderer2);
+        $$renderer2.push(`<!---->`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+        $$renderer2.push(`${$4.escape(subscriptionStateConfiguration().label)}`);
+      }
+      $$renderer2.push(`<!--]-->`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      children?.($$renderer2);
+      $$renderer2.push(`<!---->`);
+    }
+    $$renderer2.push(`<!--]--></span>`);
   });
 }
 
@@ -397,12 +464,20 @@ function getFocusableIndex(selectedIndex, length, isDisabled) {
   return findFirstIndex(length, isDisabled, 0);
 }
 
+// src/utilities/value-change.ts
+function commitValue(proposed, onValueChange, setValue) {
+  const committed = onValueChange?.(proposed) ?? proposed;
+  setValue(committed);
+  return committed;
+}
+
 // src/components/tabs/tabs.svelte
 function Tabs($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
     const baseId = $8.props_id($$renderer2);
     let {
       value = "",
+      onValueChange,
       orientation = "horizontal",
       activateOnFocus,
       class: className,
@@ -473,7 +548,9 @@ function Tabs($$renderer, $$props) {
         if (focusedValue === undefined)
           return;
         event.preventDefault();
-        value = focusedValue;
+        commitValue(focusedValue, onValueChange, (next) => {
+          value = next;
+        });
         return;
       }
       const isHorizontal = orientation === "horizontal";
@@ -501,7 +578,9 @@ function Tabs($$renderer, $$props) {
         return;
       focusValue(nextValue);
       if (effectiveActivateOnFocus()) {
-        value = nextValue;
+        commitValue(nextValue, onValueChange, (next) => {
+          value = next;
+        });
       }
     }
     setTabsContext({
@@ -518,7 +597,9 @@ function Tabs($$renderer, $$props) {
         return baseId;
       },
       select(next) {
-        value = next;
+        commitValue(next, onValueChange, (nextValue) => {
+          value = nextValue;
+        });
       },
       isActive(candidate) {
         return value === candidate;
@@ -578,7 +659,7 @@ function Alert($$renderer, $$props) {
     let {
       variant = "info",
       dismissible = false,
-      onDismiss,
+      ondismiss,
       class: className,
       children,
       icon,
@@ -586,7 +667,7 @@ function Alert($$renderer, $$props) {
       $$events,
       ...rest
     } = $$props;
-    const resolvedVariant = $9.derived(() => variant === "danger" ? "error" : variant);
+    const resolvedVariant = $9.derived(() => variant);
     let visible = true;
     let rootElement = undefined;
     async function handleDismiss() {
@@ -597,7 +678,7 @@ function Alert($$renderer, $$props) {
       await tick();
       if (focusTarget?.isConnected)
         focusTarget.focus();
-      onDismiss?.();
+      ondismiss?.();
     }
     function resolveFocusTarget(alertElement) {
       const alertDocument = alertElement.ownerDocument;
@@ -1281,6 +1362,11 @@ function Diff_line($$renderer, $$props) {
       return true;
     });
     const isInteractive = $19.derived(() => diff.type !== "same" && onselect !== undefined);
+    const accessibleLineLabel = $19.derived(() => {
+      const text = diff.type === "modified" ? viewMode === "original" ? diff.oldText : viewMode === "final" ? diff.newText : `${diff.oldText} changed to ${diff.newText}` : diff.text;
+      const typeLabel = diff.type === "added" ? "Added line" : diff.type === "removed" ? "Removed line" : "Modified line";
+      return `${typeLabel}: ${text || "blank line"}`;
+    });
     if (isVisible()) {
       $$renderer2.push("<!--[0-->");
       if (diff.type === "same") {
@@ -1290,7 +1376,7 @@ function Diff_line($$renderer, $$props) {
         $$renderer2.push("<!--[1-->");
         if (isInteractive()) {
           $$renderer2.push("<!--[0-->");
-          $$renderer2.push(`<button${$19.attr_class($19.clsx(classNames("diff-line diff-line-added", className)), "svelte-hc3elb")}${$19.attr("data-selected", selected)} type="button"><span class="diff-gutter svelte-hc3elb">+</span> <span class="diff-text svelte-hc3elb">${$19.escape(diff.text || " ")}</span></button>`);
+          $$renderer2.push(`<button${$19.attr_class($19.clsx(classNames("diff-line diff-line-added", className)), "svelte-hc3elb")}${$19.attr("data-selected", selected)}${$19.attr("aria-label", accessibleLineLabel())} type="button"><span class="diff-gutter svelte-hc3elb">+</span> <span class="diff-text svelte-hc3elb">${$19.escape(diff.text || " ")}</span></button>`);
         } else {
           $$renderer2.push("<!--[-1-->");
           $$renderer2.push(`<div${$19.attr_class($19.clsx(classNames("diff-line diff-line-added", className)), "svelte-hc3elb")}${$19.attr("data-selected", selected)}><span class="diff-gutter svelte-hc3elb">+</span> <span class="diff-text svelte-hc3elb">${$19.escape(diff.text || " ")}</span></div>`);
@@ -1301,7 +1387,7 @@ function Diff_line($$renderer, $$props) {
         const showStrikethrough = viewMode === "unified";
         if (isInteractive()) {
           $$renderer2.push("<!--[0-->");
-          $$renderer2.push(`<button${$19.attr_class($19.clsx(classNames("diff-line", showStrikethrough ? "diff-line-removed" : "diff-line-removed-original", className)), "svelte-hc3elb")}${$19.attr("data-selected", selected)} type="button"><span class="diff-gutter svelte-hc3elb">${$19.escape(showStrikethrough ? "-" : "")}</span> <span class="diff-text svelte-hc3elb">`);
+          $$renderer2.push(`<button${$19.attr_class($19.clsx(classNames("diff-line", showStrikethrough ? "diff-line-removed" : "diff-line-removed-original", className)), "svelte-hc3elb")}${$19.attr("data-selected", selected)}${$19.attr("aria-label", accessibleLineLabel())} type="button"><span class="diff-gutter svelte-hc3elb">${$19.escape(showStrikethrough ? "-" : "")}</span> <span class="diff-text svelte-hc3elb">`);
           if (showStrikethrough) {
             $$renderer2.push("<!--[0-->");
             $$renderer2.push(`<del class="svelte-hc3elb">${$19.escape(diff.text || " ")}</del>`);
@@ -1329,7 +1415,7 @@ function Diff_line($$renderer, $$props) {
         const displayText = viewMode === "unified" ? null : viewMode === "final" ? diff.newText : diff.oldText;
         if (isInteractive()) {
           $$renderer2.push("<!--[0-->");
-          $$renderer2.push(`<button${$19.attr_class($19.clsx(classNames("diff-line", lineClass, className)), "svelte-hc3elb")}${$19.attr("data-selected", selected)} type="button"><span class="diff-gutter svelte-hc3elb">~</span> <span class="diff-text svelte-hc3elb">`);
+          $$renderer2.push(`<button${$19.attr_class($19.clsx(classNames("diff-line", lineClass, className)), "svelte-hc3elb")}${$19.attr("data-selected", selected)}${$19.attr("aria-label", accessibleLineLabel())} type="button"><span class="diff-gutter svelte-hc3elb">~</span> <span class="diff-text svelte-hc3elb">`);
           if (viewMode === "unified") {
             $$renderer2.push("<!--[0-->");
             if (wordChangeRenderer) {
@@ -2536,6 +2622,7 @@ import * as $39 from "svelte/internal/server";
 
 // src/components/json-schema-editor/property-editor.svelte
 import * as $38 from "svelte/internal/server";
+import { onDestroy as onDestroy2 } from "svelte";
 
 // src/components/checkbox/checkbox.svelte
 import * as $32 from "svelte/internal/server";
@@ -2593,6 +2680,7 @@ function Checkbox($$renderer, $$props) {
     let {
       id,
       checked = false,
+      onValueChange,
       indeterminate = false,
       label,
       description,
@@ -2602,6 +2690,7 @@ function Checkbox($$renderer, $$props) {
       class: className,
       "aria-describedby": consumerDescribedBy,
       "aria-invalid": consumerInvalid,
+      onchange: consumerOnchange,
       $$slots,
       $$events,
       ...rest
@@ -2620,20 +2709,48 @@ function Checkbox($$renderer, $$props) {
       required: required ?? undefined
     }));
     let inputElement = undefined;
+    let resetSyncTimeout;
+    function syncCheckedAfterFormReset() {
+      if (resetSyncTimeout !== undefined)
+        clearTimeout(resetSyncTimeout);
+      resetSyncTimeout = setTimeout(() => {
+        resetSyncTimeout = undefined;
+        if (!inputElement)
+          return;
+        checked = inputElement.checked;
+        inputElement.indeterminate = indeterminate && !inputElement.checked;
+      }, 0);
+    }
+    function handleChange(event) {
+      const target = event.currentTarget;
+      const committed = commitValue(target.checked, onValueChange, (next) => {
+        checked = next;
+      });
+      target.checked = committed;
+      target.indeterminate = indeterminate && !committed;
+      consumerOnchange?.(event);
+    }
     $$renderer2.push(`<div class="cinder-checkbox-field"><div class="cinder-checkbox-row"><span class="cinder-checkbox-field__control"><input${$32.attributes({
       id: field().id,
       type: "checkbox",
+      ...rest,
       disabled: field().disabled,
       required: field().required,
       checked,
       class: $32.clsx(classNames("cinder-checkbox", className)),
       "aria-invalid": field().ariaInvalid,
-      "aria-describedby": field().describedBy,
-      ...rest
+      "aria-describedby": field().describedBy
     }, undefined, undefined, undefined, 4)}/> <span class="cinder-checkbox-field__indicator" aria-hidden="true"></span></span> `);
     if (label) {
       $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<label${$32.attr("for", field().id)} class="cinder-checkbox-field__label"${$32.attr("data-disabled", field().disabled || undefined)}>${$32.escape(label)}</label>`);
+      $$renderer2.push(`<label${$32.attr("for", field().id)} class="cinder-checkbox-field__label"${$32.attr("data-disabled", field().disabled || undefined)}>${$32.escape(label)} `);
+      if (field().required) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--></label>`);
     } else {
       $$renderer2.push("<!--[-1-->");
     }
@@ -2666,6 +2783,7 @@ function Input($$renderer, $$props) {
     let {
       id,
       value = "",
+      onValueChange,
       label,
       description,
       error,
@@ -2678,44 +2796,80 @@ function Input($$renderer, $$props) {
       leadingInteractive = false,
       trailingInteractive = false,
       "aria-describedby": consumerDescribedBy,
+      "aria-invalid": consumerInvalid,
+      oninput: consumerOninput,
       $$slots,
       $$events,
       ...rest
     } = $$props;
     const context = getFormFieldContext();
-    const defaultDescriptionId = $33.derived(() => describeId(id, !!description));
-    const defaultErrorId = $33.derived(() => errorId(id, !!error));
-    const ownDescriptionId = $33.derived(() => description && defaultDescriptionId() === context?.descriptionId ? `${id}-input-description` : defaultDescriptionId());
-    const ownErrorId = $33.derived(() => error && defaultErrorId() === context?.errorId ? `${id}-input-error` : defaultErrorId());
-    const resolvedDescriptionId = $33.derived(() => ownDescriptionId() ?? context?.descriptionId);
-    const resolvedErrorId = $33.derived(() => ownErrorId() ?? context?.errorId);
-    const describedBy = $33.derived(() => composeDescribedBy(resolvedDescriptionId(), resolvedErrorId(), consumerDescribedBy));
-    const resolvedAriaInvalid = $33.derived(() => error ? ariaInvalid(true) : context?.invalid ?? rest["aria-invalid"] ?? ariaInvalid(false));
-    const resolvedRequired = $33.derived(() => required ?? context?.required ?? false);
-    const resolvedDisabled = $33.derived(() => disabled ?? context?.disabled ?? false);
+    const field = $33.derived(() => resolveFieldControl({
+      id,
+      generatedId: id,
+      context,
+      hasDescription: !!description,
+      hasError: !!error,
+      localIdNamespace: "input",
+      consumerDescribedBy,
+      consumerInvalid,
+      required,
+      disabled
+    }));
+    const ownDescriptionId = $33.derived(() => field().ownDescriptionId);
+    const ownErrorId = $33.derived(() => field().ownErrorId);
+    const describedBy = $33.derived(() => field().describedBy);
+    const resolvedAriaInvalid = $33.derived(() => field().ariaInvalid);
+    const resolvedRequired = $33.derived(() => field().required);
+    const resolvedDisabled = $33.derived(() => field().disabled);
     const isNativeDateInput = $33.derived(() => type === "date");
     const rendersNativeDateIcon = $33.derived(() => isNativeDateInput() && !trailing);
     const hasTrailing = $33.derived(() => !!trailing || isNativeDateInput());
     const hasGroupWrapper = $33.derived(() => !!leading || hasTrailing());
-    const isInvalid = $33.derived(() => resolvedAriaInvalid() === "true" || resolvedAriaInvalid() === true);
+    const isInvalid = $33.derived(() => resolvedAriaInvalid() === "true");
+    let inputNode = undefined;
+    let resetSyncTimeout;
+    function syncValueAfterFormReset() {
+      if (resetSyncTimeout !== undefined)
+        clearTimeout(resetSyncTimeout);
+      resetSyncTimeout = setTimeout(() => {
+        resetSyncTimeout = undefined;
+        if (inputNode)
+          value = inputNode.value;
+      }, 0);
+    }
+    function handleInput(event) {
+      const target = event.currentTarget;
+      const committed = commitValue(target.value, onValueChange, (next) => {
+        value = next;
+      });
+      target.value = committed;
+      consumerOninput?.(event);
+    }
     function inputElement($$renderer3) {
       $$renderer3.push(`<input${$33.attributes({
         id,
         type,
+        ...rest,
         disabled: resolvedDisabled(),
         required: resolvedRequired(),
         value,
         class: $33.clsx(classNames("cinder-input", className)),
         "data-cinder-native-date": rendersNativeDateIcon() ? "" : undefined,
         "aria-invalid": resolvedAriaInvalid(),
-        "aria-describedby": describedBy(),
-        ...rest
+        "aria-describedby": describedBy()
       }, undefined, undefined, undefined, 4)}/>`);
     }
     $$renderer2.push(`<div class="cinder-input-field">`);
     if (label) {
       $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<label${$33.attr("for", id)} class="cinder-input-field__label"${$33.attr("data-disabled", resolvedDisabled() || undefined)}>${$33.escape(label)}</label>`);
+      $$renderer2.push(`<label${$33.attr("for", id)} class="cinder-input-field__label"${$33.attr("data-disabled", resolvedDisabled() || undefined)}>${$33.escape(label)} `);
+      if (resolvedRequired()) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--></label>`);
     } else {
       $$renderer2.push("<!--[-1-->");
     }
@@ -2929,6 +3083,7 @@ function Tooltip($$renderer, $$props) {
 
 // src/components/json-schema-editor/property-list.svelte
 import * as $37 from "svelte/internal/server";
+import { onDestroy } from "svelte";
 
 // src/components/chip/chip.svelte
 import * as $36 from "svelte/internal/server";
@@ -3052,6 +3207,11 @@ function Chip($$renderer, $$props) {
   });
 }
 
+// src/components/json-schema-editor/property-list-validation.ts
+function calculatePropertyValidationErrorCount(propertyNames, childValidationCounts, hasRenameError) {
+  return (hasRenameError ? 1 : 0) + propertyNames.reduce((total, key) => total + (childValidationCounts[key] ?? 0), 0);
+}
+
 // src/components/json-schema-editor/property-list.svelte
 function Property_list($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
@@ -3062,6 +3222,7 @@ function Property_list($$renderer, $$props) {
       path,
       depth = 0,
       readonly = false,
+      onvalidationerrorcount,
       onchange
     } = $$props;
     const propertyNames = $37.derived(() => Object.keys(properties));
@@ -3069,6 +3230,11 @@ function Property_list($$renderer, $$props) {
     let draftNames = {};
     let renameError = null;
     let expanded = {};
+    let childValidationCounts = {};
+    const validationErrorCount = $37.derived(() => calculatePropertyValidationErrorCount(propertyNames(), childValidationCounts, renameError !== null));
+    onDestroy(() => {
+      onvalidationerrorcount?.(0);
+    });
     function getDraftName(key) {
       return draftNames[key] ?? key;
     }
@@ -3108,6 +3274,11 @@ function Property_list($$renderer, $$props) {
         expanded[draft] = true;
         delete expanded[oldKey];
       }
+      const childCount = childValidationCounts[oldKey];
+      if (childCount !== undefined) {
+        const { [oldKey]: _removedChildCount, ...remainingChildCounts } = childValidationCounts;
+        childValidationCounts = { ...remainingChildCounts, [draft]: childCount };
+      }
       onchange(next, nextRequired);
     }
     function deleteProperty(key) {
@@ -3118,8 +3289,25 @@ function Property_list($$renderer, $$props) {
       const nextRequired = required.filter((name) => name !== key);
       delete draftNames[key];
       delete expanded[key];
+      const { [key]: _removedChildCount, ...remainingChildCounts } = childValidationCounts;
+      childValidationCounts = remainingChildCounts;
       onchange(next, nextRequired);
     }
+    function setChildValidationErrorCount(key, count) {
+      if ((childValidationCounts[key] ?? 0) === count)
+        return;
+      if (count === 0) {
+        const { [key]: _removedChildCount, ...remainingChildCounts } = childValidationCounts;
+        childValidationCounts = remainingChildCounts;
+        return;
+      }
+      childValidationCounts = { ...childValidationCounts, [key]: count };
+    }
+    function toggleExpanded(key, isOpen) {
+      expanded[key] = !isOpen;
+      if (isOpen)
+        setChildValidationErrorCount(key, 0);
+    }
     function moveProperty(key, direction) {
       if (readonly)
         return;
@@ -3191,7 +3379,7 @@ function Property_list($$renderer, $$props) {
     if (renameError) {
       $$renderer2.push("<!--[0-->");
       Alert($$renderer2, {
-        variant: "error",
+        variant: "danger",
         children: ($$renderer3) => {
           $$renderer3.push(`<!---->${$37.escape(renameError)}`);
         },
@@ -3214,7 +3402,7 @@ function Property_list($$renderer, $$props) {
       const isRequired = required.includes(key);
       const isOpen = expanded[key] === true;
       const panelId = `${idPrefix}-${key}-panel`;
-      $$renderer2.push(`<div class="cinder-jse-property-row"${$37.attr("data-cinder-required", isRequired ? "" : undefined)}><div class="cinder-jse-property-row__summary"><button type="button" class="cinder-jse-property-row__trigger"${$37.attr("aria-expanded", isOpen)}${$37.attr("aria-controls", panelId)}><span class="cinder-jse-property-row__chevron" aria-hidden="true">▸</span> <span class="cinder-jse-property-row__name">${$37.escape(key)}</span> <span class="cinder-jse-property-row__type">${$37.escape(summariseType(properties[key] ?? {}))}</span></button> <span class="cinder-jse-property-row__spacer"></span> `);
+      $$renderer2.push(`<div class="cinder-jse-property-row"${$37.attr("data-cinder-required", isRequired ? "" : undefined)}><div class="cinder-jse-property-row__summary"${$37.attr_style(`--cinder-jse-property-depth: ${depth}`)}><button type="button" class="cinder-jse-property-row__trigger"${$37.attr("aria-label", `${isOpen ? "Collapse" : "Expand"} ${key} property`)}${$37.attr("aria-expanded", isOpen)}${$37.attr("aria-controls", panelId)}><span class="cinder-jse-property-row__chevron" aria-hidden="true">▸</span> <span class="cinder-jse-property-row__name">${$37.escape(key)}</span> <span class="cinder-jse-property-row__type">${$37.escape(summariseType(properties[key] ?? {}))}</span></button> <span class="cinder-jse-property-row__spacer"></span> `);
       Button($$renderer2, {
         variant: isRequired ? "primary" : "ghost",
         size: "xs",
@@ -3282,6 +3470,7 @@ function Property_list($$renderer, $$props) {
           depth: depth + 1,
           readonly,
           value: properties[key] ?? {},
+          onvalidationerrorcount: (count) => setChildValidationErrorCount(key, count),
           onchange: (next) => setPropertySchema(key, next)
         });
         $$renderer2.push(`<!----></div>`);
@@ -3406,6 +3595,7 @@ function Property_editor($$renderer, $$props) {
       path,
       depth = 0,
       readonly = false,
+      onvalidationerrorcount,
       onchange,
       class: className
     } = $$props;
@@ -3426,7 +3616,7 @@ function Property_editor($$renderer, $$props) {
     const preservedKeys = $38.derived(() => {
       return Object.keys(objectValue()).filter((key) => !EDITABLE_KEYWORDS.has(key));
     });
-    function patch(edits, opts) {
+    function patch(edits, opts = undefined) {
       if (readonly)
         return;
       const next = { ...objectValue(), ...edits };
@@ -3508,6 +3698,21 @@ function Property_editor($$renderer, $$props) {
         parts.push(`"${objectValue().title}"`);
       return parts.join(" · ");
     }
+    let childValidationCounts = {};
+    const validationErrorCount = $38.derived(() => Object.values(childValidationCounts).reduce((total, count) => total + count, 0));
+    onDestroy2(() => {
+      onvalidationerrorcount?.(0);
+    });
+    function setChildValidationErrorCount(key, count) {
+      if ((childValidationCounts[key] ?? 0) === count)
+        return;
+      if (count === 0) {
+        const { [key]: _removedChildCount, ...remainingChildCounts } = childValidationCounts;
+        childValidationCounts = remainingChildCounts;
+        return;
+      }
+      childValidationCounts = { ...childValidationCounts, [key]: count };
+    }
     function patchProperties(properties, required) {
       const edits = { properties };
       edits.required = required.length > 0 ? required : undefined;
@@ -3537,8 +3742,13 @@ function Property_editor($$renderer, $$props) {
     }
     function removeCompositionBranch(keyword, branchIndex) {
       const list = Array.isArray(objectValue()[keyword]) ? [...objectValue()[keyword]] : [];
+      const removedBranchKey = compositionBranchKeys()[keyword][branchIndex];
+      const nextBranchKeys = [...compositionBranchKeys()[keyword]];
       list.splice(branchIndex, 1);
-      setKeywordKeys(keyword, compositionBranchKeys()[keyword].toSpliced(branchIndex, 1));
+      nextBranchKeys.splice(branchIndex, 1);
+      setKeywordKeys(keyword, nextBranchKeys);
+      if (removedBranchKey)
+        setChildValidationErrorCount(`${keyword}:${removedBranchKey}`, 0);
       patchComposition(keyword, list.length > 0 ? list : undefined);
     }
     function addCompositionBranch(keyword) {
@@ -3645,6 +3855,7 @@ function Property_editor($$renderer, $$props) {
           path: `${path}/properties`,
           properties: objectValue().properties ?? {},
           required: objectValue().required ?? [],
+          onvalidationerrorcount: (count) => setChildValidationErrorCount("properties", count),
           onchange: patchProperties
         });
         $$renderer2.push(`<!----></div>`);
@@ -3661,6 +3872,7 @@ function Property_editor($$renderer, $$props) {
           depth: depth + 1,
           readonly,
           value: objectValue().items ?? {},
+          onvalidationerrorcount: (count) => setChildValidationErrorCount("items", count),
           onchange: (next) => setItems(next)
         });
         $$renderer2.push(`<!----></div>`);
@@ -3745,12 +3957,14 @@ function Property_editor($$renderer, $$props) {
           const each_array_3 = $38.ensure_array_like(objectValue()[keyword]);
           for (let branchIndex = 0, $$length2 = each_array_3.length;branchIndex < $$length2; branchIndex++) {
             let branch = each_array_3[branchIndex];
+            const branchKey = compositionBranchKeys()[keyword][branchIndex];
             Property_editor($$renderer2, {
               idPrefix: `${idPrefix}-${keyword}-${branchIndex}`,
               path: `${path}/${keyword}/${branchIndex}`,
               depth: depth + 1,
               readonly,
               value: branch,
+              onvalidationerrorcount: (count) => setChildValidationErrorCount(`${keyword}:${branchKey}`, count),
               onchange: (next) => {
                 const list = [...objectValue()[keyword]];
                 list[branchIndex] = next;
@@ -3873,7 +4087,7 @@ function Property_editor($$renderer, $$props) {
 // src/components/json-schema-editor/form-view.svelte
 function Form_view($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
-    let { state, idPrefix, class: className } = $$props;
+    let { state, idPrefix, onvalidationerrorcount, class: className } = $$props;
     const rootSchema = $39.derived(() => state.committedSchema);
     $$renderer2.push(`<div${$39.attr_class($39.clsx(classNames("cinder-jse-form-view", className)))}>`);
     if (state.jsonDraftIsDirty) {
@@ -3923,6 +4137,7 @@ function Form_view($$renderer, $$props) {
         depth: 0,
         readonly: state.readonly || state.jsonDraftIsDirty,
         value: rootSchema(),
+        onvalidationerrorcount,
         onchange: (next, options) => state.commitFromForm(next, options)
       });
     }
@@ -4708,7 +4923,6 @@ import { untrack as untrack3 } from "svelte";
 
 // src/components/copy-button/copy-button.svelte
 import * as $45 from "svelte/internal/server";
-import { onDestroy } from "svelte";
 
 // ../../node_modules/lucide-svelte/dist/icons/check.svelte
 import * as $42 from "svelte/internal/server";
@@ -4846,10 +5060,6 @@ function Copy_button($$renderer, $$props) {
         copied = false;
       }, confirmDuration);
     }
-    onDestroy(() => {
-      if (resetTimer)
-        clearTimeout(resetTimer);
-    });
     $$renderer2.push(`<button${$45.attributes({
       ...rest,
       type: "button",
@@ -4889,12 +5099,15 @@ function Json_schema_toolbar($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
     let {
       state: editorState,
+      localValidationErrorCount = 0,
       onUndo,
       onRedo,
       onRevert,
       class: className
     } = $$props;
     const validationBadgeVariant = $46.derived(() => {
+      if (localValidationErrorCount > 0)
+        return "danger";
       switch (editorState.validationStatus) {
         case "valid":
           return "success";
@@ -4905,6 +5118,9 @@ function Json_schema_toolbar($$renderer, $$props) {
       }
     });
     const validationBadgeText = $46.derived(() => {
+      if (localValidationErrorCount > 0) {
+        return `Invalid — ${localValidationErrorCount} field ${localValidationErrorCount === 1 ? "error" : "errors"}`;
+      }
       switch (editorState.validationStatus) {
         case "valid":
           return `Valid (${editorState.activeDraft})`;
@@ -5082,7 +5298,14 @@ function Textarea($$renderer, $$props) {
     $$renderer2.push(`<div class="cinder-textarea-field">`);
     if (label) {
       $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<label${$47.attr("for", id)} class="cinder-textarea-label">${$47.escape(label)}</label>`);
+      $$renderer2.push(`<label${$47.attr("for", id)} class="cinder-textarea-label"${$47.attr("data-disabled", field().disabled || undefined)}>${$47.escape(label)} `);
+      if (field().required) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--></label>`);
     } else {
       $$renderer2.push("<!--[-1-->");
     }
@@ -5197,7 +5420,7 @@ function Json_view($$renderer, $$props) {
     if (draftErrorMessage()) {
       $$renderer2.push("<!--[0-->");
       Alert($$renderer2, {
-        variant: "error",
+        variant: "danger",
         children: ($$renderer3) => {
           $$renderer3.push(`<pre class="cinder-jse-json-view__errors">${$48.escape(draftErrorMessage())}</pre>`);
         },
@@ -5255,19 +5478,21 @@ function Json_schema_editor_impl($$renderer, $$props) {
         options.draftOverride = draftOverride;
       return options;
     });
-    const state = createEditorState(stateOptions);
+    let localValidationErrorCount = 0;
+    const editorState = createEditorState(stateOptions);
+    const toolbarValidationErrorCount = $49.derived(() => view === "form" ? localValidationErrorCount : 0);
     let lastDraftOverride = untrack4(() => draftOverride);
     let lastSchemaKey = untrack4(() => schemaKey);
     function handleUndo() {
-      const label = state.undo();
+      const label = editorState.undo();
       announcer.announce(label ? `Undid: ${label}` : "Undid last edit");
     }
     function handleRedo() {
-      const label = state.redo();
+      const label = editorState.redo();
       announcer.announce(label ? `Redid: ${label}` : "Redid edit");
     }
     function handleRevert() {
-      state.revert();
+      editorState.revert();
       announcer.announce("Reverted to original schema");
     }
     function isEditableTarget(target) {
@@ -5298,7 +5523,8 @@ function Json_schema_editor_impl($$renderer, $$props) {
     function $$render_inner($$renderer3) {
       $$renderer3.push(`<div${$49.attr("id", id)}${$49.attr_class($49.clsx(classNames("cinder-jse", className)))} data-cinder-jse="" role="region" aria-label="JSON Schema editor">`);
       Json_schema_toolbar($$renderer3, {
-        state,
+        state: editorState,
+        localValidationErrorCount: toolbarValidationErrorCount(),
         onUndo: handleUndo,
         onRedo: handleRedo,
         onRevert: handleRevert
@@ -5334,7 +5560,7 @@ function Json_schema_editor_impl($$renderer, $$props) {
               $$renderer5.push(`<!----> `);
               {
                 let trailing = function($$renderer6) {
-                  if (state.hasChanges) {
+                  if (editorState.hasChanges) {
                     $$renderer6.push("<!--[0-->");
                     Badge($$renderer6, {
                       variant: "neutral",
@@ -5354,7 +5580,7 @@ function Json_schema_editor_impl($$renderer, $$props) {
                   trailing,
                   children: ($$renderer6) => {
                     $$renderer6.push(`<!---->Diff`);
-                    if (state.hasChanges) {
+                    if (editorState.hasChanges) {
                       $$renderer6.push("<!--[0-->");
                       $$renderer6.push(`<span class="cinder-sr-only">, has changes</span>`);
                     } else {
@@ -5373,7 +5599,11 @@ function Json_schema_editor_impl($$renderer, $$props) {
           Tab_panel($$renderer4, {
             value: "form",
             children: ($$renderer5) => {
-              Form_view($$renderer5, { state, idPrefix: `${id}-form` });
+              Form_view($$renderer5, {
+                state: editorState,
+                idPrefix: `${id}-form`,
+                onvalidationerrorcount: (count) => localValidationErrorCount = count
+              });
             },
             $$slots: { default: true }
           });
@@ -5381,7 +5611,7 @@ function Json_schema_editor_impl($$renderer, $$props) {
           Tab_panel($$renderer4, {
             value: "json",
             children: ($$renderer5) => {
-              Json_view($$renderer5, { state, idPrefix: `${id}-json` });
+              Json_view($$renderer5, { state: editorState, idPrefix: `${id}-json` });
             },
             $$slots: { default: true }
           });
@@ -5389,7 +5619,7 @@ function Json_schema_editor_impl($$renderer, $$props) {
           Tab_panel($$renderer4, {
             value: "diff",
             children: ($$renderer5) => {
-              Diff_view($$renderer5, { state });
+              Diff_view($$renderer5, { state: editorState });
             },
             $$slots: { default: true }
           });
@@ -5448,4 +5678,4 @@ export {
   Json_schema_editor as JsonSchemaEditor
 };
 
-//# debugId=AC31A7AF113025B064756E2164756E21
+//# debugId=DF1B9101A18F3EB164756E2164756E21