@lostgradient/cinder 0.3.0 → 0.4.1

package/dist/server/index.server-3f5f7jd4.js

@@ -0,0 +1,371 @@
+import {
+  Status_dot
+} from "./index.server-pehx7yrn.js";
+import {
+  Json_viewer
+} from "./index.server-rsjrjd13.js";
+import {
+  Copy_button
+} from "./index.server-3cwyrz8f.js";
+import {
+  classNames
+} from "./index.server-z7nvkz8v.js";
+
+// src/components/event-stream-viewer/event-stream-viewer.svelte
+import * as $ from "svelte/internal/server";
+import { SvelteSet } from "svelte/reactivity";
+
+// src/components/event-stream-viewer/event-stream-viewer-keys.ts
+function streamEventKey(event) {
+  const parts = [keyType("event"), keyField("id", event.id)];
+  if (typeof event.sequence === "number")
+    parts.push(keyField("sequence", event.sequence));
+  return parts.join("|");
+}
+function reconnectedBoundaryKey(boundary) {
+  return [keyType("reconnected"), keyField("id", boundary.id)].join("|");
+}
+function sequenceGapKey(previousEventId, event, expectedSequence, actualSequence) {
+  return [
+    keyType("sequence-gap"),
+    previousEventId === undefined ? keyField("previous-missing", true) : keyField("previous", previousEventId),
+    keyField("next", event.id),
+    keyField("expected", expectedSequence),
+    keyField("actual", actualSequence)
+  ].join("|");
+}
+function uniqueRenderedKey(baseKey, occurrences) {
+  const occurrence = occurrences.get(baseKey) ?? 0;
+  occurrences.set(baseKey, occurrence + 1);
+  return occurrence === 0 ? baseKey : `${baseKey}|occurrence=${occurrence + 1}`;
+}
+function detailsIdForKey(instanceId, key) {
+  return `${escapeDomIdPart(instanceId)}-details-${hashString(key)}-${hashString(reverseString(key))}-${key.length}`;
+}
+function keyType(type) {
+  return keyField("type", type);
+}
+function keyField(name, value) {
+  const stringValue = String(value);
+  return `${name.length}:${name}:${stringValue.length}:${stringValue}`;
+}
+function escapeDomIdPart(value) {
+  let result = "";
+  for (const character of value) {
+    result += /^[A-Za-z0-9_-]$/.test(character) ? character : `_${character.codePointAt(0)?.toString(16) ?? "0"}_`;
+  }
+  return result === "" ? "empty" : result;
+}
+function reverseString(value) {
+  let result = "";
+  for (const character of value) {
+    result = character + result;
+  }
+  return result;
+}
+function hashString(value) {
+  let hash = 0;
+  for (let index = 0;index < value.length; index += 1) {
+    hash = Math.imul(31, hash) + value.charCodeAt(index);
+    hash |= 0;
+  }
+  return (hash >>> 0).toString(36);
+}
+
+// src/components/event-stream-viewer/event-stream-viewer.svelte
+function Event_stream_viewer($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const instanceId = $.props_id($$renderer2);
+    function isValidSequence(value) {
+      return Number.isInteger(value);
+    }
+    let {
+      events,
+      connectionState,
+      followLatest = true,
+      truncated = false,
+      loading = false,
+      label = "Event stream",
+      detectSequenceGaps = false,
+      oncopyvisible,
+      onfilter,
+      filterQuery = "",
+      class: className,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    const expandedIds = new SvelteSet;
+    let scrollContainerEl = null;
+    let programmaticScroll = false;
+    let liveMessage = "";
+    const isEmpty = $.derived(() => !loading && events.length === 0);
+    const eventCount = $.derived(() => events.length);
+    const latestEvent = $.derived(() => events.at(-1));
+    const renderedEntries = $.derived(() => {
+      const entries = [];
+      const keyOccurrences = new Map;
+      let previousSequence;
+      let previousEventId;
+      const shouldDetectSequenceGaps = detectSequenceGaps && filterQuery.trim() === "";
+      for (const entry of events) {
+        if (isReconnectedBoundary(entry)) {
+          const key2 = uniqueRenderedKey(reconnectedBoundaryKey(entry), keyOccurrences);
+          entries.push({
+            type: "reconnected",
+            key: key2,
+            boundary: entry,
+            label: formatReconnectedBoundaryLabel(entry),
+            datetime: boundaryDateTime(entry)
+          });
+          previousSequence = undefined;
+          previousEventId = undefined;
+          continue;
+        }
+        const currentSequence = entry.sequence;
+        if (shouldDetectSequenceGaps && isValidSequence(previousSequence) && isValidSequence(currentSequence)) {
+          const expectedSequence = previousSequence + 1;
+          if (currentSequence !== expectedSequence) {
+            const key2 = uniqueRenderedKey(sequenceGapKey(previousEventId, entry, expectedSequence, currentSequence), keyOccurrences);
+            entries.push({
+              type: "sequence-gap",
+              key: key2,
+              expectedSequence,
+              actualSequence: currentSequence,
+              label: formatSequenceGapLabel(expectedSequence, currentSequence)
+            });
+          }
+        }
+        if (isValidSequence(currentSequence)) {
+          previousSequence = currentSequence;
+          previousEventId = entry.id;
+        } else {
+          previousSequence = undefined;
+          previousEventId = undefined;
+        }
+        const key = uniqueRenderedKey(streamEventKey(entry), keyOccurrences);
+        entries.push({
+          type: "event",
+          key,
+          detailsId: detailsIdForKey(instanceId, key),
+          event: entry
+        });
+      }
+      return entries;
+    });
+    function toggleDetails(rowKey) {
+      if (expandedIds.has(rowKey)) {
+        expandedIds.delete(rowKey);
+      } else {
+        expandedIds.add(rowKey);
+      }
+    }
+    function isReconnectedBoundary(entry) {
+      return "kind" in entry && entry.kind === "reconnected" && "replayedCount" in entry && Number.isInteger(entry.replayedCount) && entry.replayedCount >= 0;
+    }
+    function formatReconnectedBoundaryLabel(boundary) {
+      const eventWord = boundary.replayedCount === 1 ? "event" : "events";
+      return `Reconnected — ${boundary.replayedCount} ${eventWord} replayed`;
+    }
+    function formatSequenceGapLabel(expectedSequence, actualSequence) {
+      return `Sequence gap — expected ${expectedSequence}, received ${actualSequence}`;
+    }
+    function boundaryDateTime(boundary) {
+      return boundary.datetime;
+    }
+    function formatEventAsText(event) {
+      const parts = [];
+      parts.push(`[${event.timestamp ?? event.datetime}]`);
+      if (event.severity)
+        parts.push(`[${event.severity.toUpperCase()}]`);
+      if (event.source)
+        parts.push(`[${event.source}]`);
+      parts.push(event.summary);
+      if (event.details !== undefined) {
+        try {
+          parts.push(JSON.stringify(event.details, null, 2));
+        } catch {}
+      }
+      return parts.join(" ");
+    }
+    function formatReconnectedBoundaryAsText(boundary) {
+      const timeLabel = boundary.timestamp ?? boundary.datetime;
+      const markerText = formatReconnectedBoundaryLabel(boundary);
+      return timeLabel ? `[${timeLabel}] ${markerText}` : markerText;
+    }
+    function formatRenderedEntryAsText(entry) {
+      if (entry.type === "event")
+        return formatEventAsText(entry.event);
+      if (entry.type === "reconnected")
+        return formatReconnectedBoundaryAsText(entry.boundary);
+      return entry.label;
+    }
+    function formatCopyVisibleAnnouncement(entryCount) {
+      return `${entryCount} stream ${entryCount === 1 ? "entry" : "entries"} sent to copy handler`;
+    }
+    function handleCopyVisible() {
+      const text = renderedEntries().map(formatRenderedEntryAsText).join(`
+`);
+      if (!oncopyvisible)
+        return;
+      oncopyvisible(text);
+      liveMessage = formatCopyVisibleAnnouncement(renderedEntries().length);
+      setTimeout(() => {
+        liveMessage = "";
+      }, 2000);
+    }
+    function handleScroll(event) {
+      if (programmaticScroll)
+        return;
+      const target = event.target;
+      const atBottom = target.scrollHeight - target.scrollTop - target.clientHeight < 2;
+      if (atBottom && !followLatest) {
+        followLatest = true;
+      } else if (!atBottom && followLatest) {
+        followLatest = false;
+      }
+    }
+    function scrollToBottom(el) {
+      programmaticScroll = true;
+      el.scrollTop = el.scrollHeight;
+      requestAnimationFrame(() => {
+        programmaticScroll = false;
+      });
+    }
+    function resumeFollowing() {
+      followLatest = true;
+      if (scrollContainerEl) {
+        scrollToBottom(scrollContainerEl);
+      }
+    }
+    $$renderer2.push(`<div${$.attributes({
+      ...rest,
+      class: $.clsx(classNames("cinder-event-stream-viewer", className)),
+      "data-cinder-loading": loading || undefined,
+      "data-cinder-empty": isEmpty() || undefined,
+      "data-cinder-paused": !followLatest || undefined
+    })}><div class="cinder-event-stream-viewer__toolbar" role="group" aria-label="Stream controls"><div class="cinder-event-stream-viewer__toolbar-start">`);
+    if (connectionState) {
+      $$renderer2.push("<!--[0-->");
+      Status_dot($$renderer2, { connectionState });
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (!followLatest) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<button type="button" class="cinder-event-stream-viewer__resume-button">Resume following</button>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></div> <div class="cinder-event-stream-viewer__toolbar-end">`);
+    if (onfilter !== undefined) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<input type="search" class="cinder-event-stream-viewer__filter-input" placeholder="Filter events…" aria-label="Filter events"${$.attr("value", filterQuery)}/>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (oncopyvisible !== undefined) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<button type="button" class="cinder-event-stream-viewer__copy-all-button" aria-label="Copy all visible events"${$.attr("disabled", events.length === 0, true)}>Copy visible</button>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></div></div> `);
+    if (truncated) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div class="cinder-event-stream-viewer__truncation-notice" role="status" aria-live="polite">Stream truncated — only the most recent events are shown.</div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    $.element($$renderer2, "div", () => {
+      $$renderer2.push(` class="cinder-event-stream-viewer__viewport" role="log"${$.attr("aria-label", label)}${$.attr("tabindex", 0)}`);
+    }, () => {
+      if (loading) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<div class="cinder-event-stream-viewer__loading" role="status" aria-label="Loading events"><div class="cinder-event-stream-viewer__skeleton" aria-hidden="true"></div> <div class="cinder-event-stream-viewer__skeleton" aria-hidden="true"></div> <div class="cinder-event-stream-viewer__skeleton" aria-hidden="true"></div></div>`);
+      } else if (isEmpty()) {
+        $$renderer2.push("<!--[1-->");
+        $$renderer2.push(`<div class="cinder-event-stream-viewer__empty" role="status"><p class="cinder-event-stream-viewer__empty-message">No events to display.</p></div>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+        $$renderer2.push(`<ol class="cinder-event-stream-viewer__list"><!--[-->`);
+        const each_array = $.ensure_array_like(renderedEntries());
+        for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
+          let entry = each_array[$$index];
+          if (entry.type === "reconnected") {
+            $$renderer2.push("<!--[0-->");
+            $$renderer2.push(`<li class="cinder-event-stream-viewer__boundary-marker"><div class="cinder-event-stream-viewer__marker-content" role="separator"${$.attr("aria-label", entry.label)}>`);
+            if (entry.boundary.datetime) {
+              $$renderer2.push("<!--[0-->");
+              $$renderer2.push(`<time class="cinder-event-stream-viewer__marker-time"${$.attr("datetime", entry.boundary.datetime)}${$.attr("title", entry.boundary.datetime)}>${$.escape(entry.boundary.timestamp ?? entry.boundary.datetime)}</time>`);
+            } else if (entry.boundary.timestamp) {
+              $$renderer2.push("<!--[1-->");
+              $$renderer2.push(`<span class="cinder-event-stream-viewer__marker-time">${$.escape(entry.boundary.timestamp)}</span>`);
+            } else {
+              $$renderer2.push("<!--[-1-->");
+            }
+            $$renderer2.push(`<!--]--> <span>${$.escape(entry.label)}</span></div></li>`);
+          } else if (entry.type === "sequence-gap") {
+            $$renderer2.push("<!--[1-->");
+            $$renderer2.push(`<li class="cinder-event-stream-viewer__sequence-gap-marker"><div class="cinder-event-stream-viewer__marker-content" role="note"${$.attr("aria-label", entry.label)}><span>${$.escape(entry.label)}</span></div></li>`);
+          } else {
+            $$renderer2.push("<!--[-1-->");
+            const event = entry.event;
+            const isExpanded = expandedIds.has(entry.key);
+            const detailsId = entry.detailsId;
+            $$renderer2.push(`<li class="cinder-event-stream-viewer__event"${$.attr("data-cinder-severity", event.severity ?? "info")}><div class="cinder-event-stream-viewer__event-bar" aria-hidden="true"></div> <div class="cinder-event-stream-viewer__event-body"><div class="cinder-event-stream-viewer__event-meta"><time class="cinder-event-stream-viewer__event-time"${$.attr("datetime", event.datetime)}${$.attr("title", event.datetime)}>${$.escape(event.timestamp ?? event.datetime)}</time> `);
+            if (event.severity) {
+              $$renderer2.push("<!--[0-->");
+              $$renderer2.push(`<span class="cinder-event-stream-viewer__event-severity"${$.attr("aria-label", `Severity: ${event.severity}`)}>${$.escape(event.severity)}</span>`);
+            } else {
+              $$renderer2.push("<!--[-1-->");
+            }
+            $$renderer2.push(`<!--]--> `);
+            if (event.source) {
+              $$renderer2.push("<!--[0-->");
+              $$renderer2.push(`<span class="cinder-event-stream-viewer__event-source">${$.escape(event.source)}</span>`);
+            } else {
+              $$renderer2.push("<!--[-1-->");
+            }
+            $$renderer2.push(`<!--]--></div> <p class="cinder-event-stream-viewer__event-summary">${$.escape(event.summary)}</p> `);
+            if (event.details !== undefined) {
+              $$renderer2.push("<!--[0-->");
+              $$renderer2.push(`<div class="cinder-event-stream-viewer__event-details-section"><button type="button" class="cinder-event-stream-viewer__details-toggle"${$.attr("aria-expanded", isExpanded)}${$.attr("aria-controls", detailsId)}${$.attr("aria-label", `${isExpanded ? "Hide" : "Show"} details for ${event.severity ? `${event.severity}: ` : ""}${event.summary}`)}>${$.escape(isExpanded ? "Hide details" : "Show details")}</button> <div${$.attr("id", detailsId)} class="cinder-event-stream-viewer__event-details"${$.attr("hidden", !isExpanded)}>`);
+              if (isExpanded) {
+                $$renderer2.push("<!--[0-->");
+                Json_viewer($$renderer2, { value: event.details });
+              } else {
+                $$renderer2.push("<!--[-1-->");
+              }
+              $$renderer2.push(`<!--]--></div></div>`);
+            } else {
+              $$renderer2.push("<!--[-1-->");
+            }
+            $$renderer2.push(`<!--]--></div> <div class="cinder-event-stream-viewer__event-actions">`);
+            Copy_button($$renderer2, {
+              value: formatEventAsText(event),
+              label: `Copy event: ${event.summary}`,
+              copiedLabel: "Event copied",
+              class: "cinder-event-stream-viewer__copy-event-button"
+            });
+            $$renderer2.push(`<!----></div></li>`);
+          }
+          $$renderer2.push(`<!--]-->`);
+        }
+        $$renderer2.push(`<!--]--></ol>`);
+      }
+      $$renderer2.push(`<!--]-->`);
+    });
+    $$renderer2.push(` <span class="cinder-event-stream-viewer__live-region" role="status" aria-live="polite" aria-atomic="true">${$.escape(liveMessage)}</span></div>`);
+    $.bind_props($$props, { followLatest });
+  });
+}
+
+// src/components/event-stream-viewer/index.ts
+var event_stream_viewer_default = Event_stream_viewer;
+export { Event_stream_viewer, event_stream_viewer_default };
+
+//# debugId=9561B2E11976350F64756E2164756E21

package/dist/server/index.server-3fvz5gak.js

@@ -0,0 +1,30 @@
+import {
+  Icon
+} from "./index.server-2ymxf0ra.js";
+
+// ../../node_modules/lucide-svelte/dist/icons/x.svelte
+import * as $ from "svelte/internal/server";
+function X($$renderer, $$props) {
+  const $$sanitized_props = $.sanitize_props($$props);
+  const iconNode = [
+    ["path", { d: "M18 6 6 18" }],
+    ["path", { d: "m6 6 12 12" }]
+  ];
+  Icon($$renderer, $.spread_props([
+    { name: "x" },
+    $$sanitized_props,
+    {
+      iconNode,
+      children: ($$renderer2) => {
+        $$renderer2.push(`<!--[-->`);
+        $.slot($$renderer2, $$props, "default", {}, null);
+        $$renderer2.push(`<!--]-->`);
+      },
+      $$slots: { default: true }
+    }
+  ]));
+}
+
+export { X };
+
+//# debugId=9629ED779F63DE0464756E2164756E21

package/dist/server/index.server-3jz24pb5.js

@@ -0,0 +1,38 @@
+import {
+  Feed_event
+} from "./index.server-zbcza3tc.js";
+import {
+  classNames
+} from "./index.server-z7nvkz8v.js";
+
+// src/components/feed/feed.svelte
+import * as $ from "svelte/internal/server";
+function Feed($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      live = false,
+      class: className,
+      children,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    const liveRegionAttributes = $.derived(() => live ? { "aria-live": "polite", "aria-atomic": "false" } : {});
+    $$renderer2.push(`<ol${$.attributes({
+      ...rest,
+      ...liveRegionAttributes(),
+      class: $.clsx(classNames("cinder-feed", className))
+    })}>`);
+    children($$renderer2);
+    $$renderer2.push(`<!----></ol>`);
+  });
+}
+
+// src/components/feed/index.ts
+var Feed2 = Object.assign(Feed, {
+  Event: Feed_event
+});
+var feed_default = Feed2;
+export { Feed2 as Feed, feed_default };
+
+//# debugId=C77F88428F58293F64756E2164756E21

package/dist/server/index.server-3mbgzhq8.js

@@ -0,0 +1,59 @@
+import {
+  setTableHeaderSelectionContext,
+  setTableSectionContext,
+  tryGetTableContext
+} from "./index.server-7pdq2w0a.js";
+import {
+  classNames
+} from "./index.server-z7nvkz8v.js";
+
+// src/components/table-header/table-header.svelte
+import * as $ from "svelte/internal/server";
+import { untrack } from "svelte";
+function Table_header($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      class: className,
+      children,
+      allSelected,
+      someSelected,
+      onselectall,
+      selectAllLabel = "Select all rows"
+    } = $$props;
+    const table = tryGetTableContext();
+    const selectionEnabled = table?.selectionEnabled ?? false;
+    if (selectionEnabled && untrack(() => allSelected === undefined || someSelected === undefined || !onselectall)) {
+      throw new Error("[Cinder] TableHeader: `allSelected`, `someSelected`, and `onselectall` are required when Table.selectable is true.");
+    }
+    let hasSelectionHeaderCell = false;
+    function claimSelectionHeaderCell() {
+      if (hasSelectionHeaderCell) {
+        throw new Error("[Cinder] TableHeader: Table.selectable supports exactly one TableRow inside TableHeader.");
+      }
+      hasSelectionHeaderCell = true;
+    }
+    setTableSectionContext("header");
+    setTableHeaderSelectionContext({
+      get allSelected() {
+        return allSelected ?? false;
+      },
+      get someSelected() {
+        return someSelected ?? false;
+      },
+      get onselectall() {
+        return onselectall ?? (() => {});
+      },
+      get selectAllLabel() {
+        return selectAllLabel;
+      },
+      claimSelectionHeaderCell
+    });
+    $$renderer2.push(`<thead${$.attr_class($.clsx(classNames("cinder-table__header", className)))}>`);
+    children($$renderer2);
+    $$renderer2.push(`<!----></thead>`);
+  });
+}
+
+export { Table_header };
+
+//# debugId=14FB30B7701F36BD64756E2164756E21

package/dist/server/index.server-3zzwg4ew.js

@@ -0,0 +1,60 @@
+import {
+  Icon
+} from "./index.server-2ymxf0ra.js";
+
+// ../../node_modules/lucide-svelte/dist/icons/lock-keyhole.svelte
+import * as $ from "svelte/internal/server";
+function Lock_keyhole($$renderer, $$props) {
+  const $$sanitized_props = $.sanitize_props($$props);
+  const iconNode = [
+    ["circle", { cx: "12", cy: "16", r: "1" }],
+    [
+      "rect",
+      {
+        x: "3",
+        y: "10",
+        width: "18",
+        height: "12",
+        rx: "2"
+      }
+    ],
+    ["path", { d: "M7 10V7a5 5 0 0 1 10 0v3" }]
+  ];
+  Icon($$renderer, $.spread_props([
+    { name: "lock-keyhole" },
+    $$sanitized_props,
+    {
+      iconNode,
+      children: ($$renderer2) => {
+        $$renderer2.push(`<!--[-->`);
+        $.slot($$renderer2, $$props, "default", {}, null);
+        $$renderer2.push(`<!--]-->`);
+      },
+      $$slots: { default: true }
+    }
+  ]));
+}
+
+// ../../node_modules/lucide-svelte/dist/icons/minus.svelte
+import * as $2 from "svelte/internal/server";
+function Minus($$renderer, $$props) {
+  const $$sanitized_props = $2.sanitize_props($$props);
+  const iconNode = [["path", { d: "M5 12h14" }]];
+  Icon($$renderer, $2.spread_props([
+    { name: "minus" },
+    $$sanitized_props,
+    {
+      iconNode,
+      children: ($$renderer2) => {
+        $$renderer2.push(`<!--[-->`);
+        $2.slot($$renderer2, $$props, "default", {}, null);
+        $$renderer2.push(`<!--]-->`);
+      },
+      $$slots: { default: true }
+    }
+  ]));
+}
+
+export { Lock_keyhole, Minus };
+
+//# debugId=5C1E591B73BAB6FF64756E2164756E21

package/dist/server/index.server-41003crj.js

@@ -0,0 +1,125 @@
+import {
+  getFormFieldContext
+} from "./index.server-weae7gs2.js";
+import {
+  resolveFieldControl
+} from "./index.server-abm21gz1.js";
+import {
+  classNames
+} from "./index.server-z7nvkz8v.js";
+
+// src/components/textarea/textarea.svelte
+import * as $ from "svelte/internal/server";
+
+// src/components/textarea-count.ts
+function resolveMaximumLength(value) {
+  if (typeof value === "number") {
+    return Number.isSafeInteger(value) && value >= 0 ? value : undefined;
+  }
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    if (!/^\d+$/.test(trimmed))
+      return;
+    const parsed = Number(trimmed);
+    return parsed >= 0 && Number.isSafeInteger(parsed) ? parsed : undefined;
+  }
+  return;
+}
+
+// src/components/textarea/textarea.svelte
+function Textarea($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      id,
+      value = "",
+      label,
+      description,
+      error,
+      rows = 4,
+      disabled,
+      required,
+      class: customClassName,
+      maxlength,
+      showCount = false,
+      "aria-describedby": consumerDescribedBy,
+      "aria-invalid": consumerInvalid,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    const context = getFormFieldContext();
+    const maximumLength = $.derived(() => resolveMaximumLength(maxlength));
+    const countId = $.derived(() => showCount && maximumLength() !== undefined ? `${id}-count` : undefined);
+    const currentCount = $.derived(() => value?.length ?? 0);
+    const ownRequired = $.derived(() => required ?? undefined);
+    const field = $.derived(() => resolveFieldControl({
+      id,
+      generatedId: id,
+      context,
+      hasDescription: !!description,
+      hasError: !!error,
+      localIdNamespace: "textarea",
+      consumerDescribedBy,
+      consumerInvalid,
+      additionalDescribedBy: [countId()],
+      required: ownRequired(),
+      disabled
+    }));
+    $$renderer2.push(`<div class="cinder-textarea-field">`);
+    if (label) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<label${$.attr("for", id)} class="cinder-textarea-label"${$.attr("data-disabled", field().disabled || undefined)}>${$.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-->");
+    }
+    $$renderer2.push(`<!--]--> <textarea${$.attributes({
+      id,
+      rows,
+      disabled: field().disabled,
+      required: field().required,
+      maxlength,
+      class: $.clsx(classNames("cinder-_input-frame", "cinder-textarea", customClassName)),
+      "aria-invalid": field().ariaInvalid,
+      "aria-describedby": field().describedBy,
+      ...rest
+    })}>`);
+    const $$body = $.escape(value);
+    if ($$body) {
+      $$renderer2.push(`${$$body}`);
+    } else {}
+    $$renderer2.push(`</textarea> `);
+    if (description) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<p${$.attr("id", field().ownDescriptionId)} class="cinder-textarea-description">${$.escape(description)}</p>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (countId()) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<output${$.attr("id", countId())}${$.attr("for", id)} class="cinder-textarea-count" aria-live="polite" aria-atomic="true">${$.escape(currentCount())}/${$.escape(maximumLength())}</output>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (error) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<p${$.attr("id", field().ownErrorId)} class="cinder-textarea-error" aria-live="polite">${$.escape(error)}</p>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></div>`);
+    $.bind_props($$props, { value });
+  });
+}
+
+export { Textarea };
+
+//# debugId=098EFD98DB55E95064756E2164756E21