@lostgradient/cinder 0.4.0 → 0.4.1

package/dist/server/index.server-d6peankz.js

@@ -0,0 +1,563 @@
+import {
+  Secret_value_field
+} from "./index.server-pg65gmdb.js";
+import {
+  Payload_inspector
+} from "./index.server-emt82wev.js";
+import {
+  Status_dot
+} from "./index.server-pehx7yrn.js";
+import {
+  Button_group
+} from "./index.server-ghvqpc50.js";
+import {
+  Card
+} from "./index.server-bktae19b.js";
+import {
+  Code_block
+} from "./index.server-2g8qr4nk.js";
+import {
+  Badge
+} from "./index.server-bkz7h7jx.js";
+import {
+  Button
+} from "./index.server-34p02y48.js";
+import {
+  classNames
+} from "./index.server-z7nvkz8v.js";
+
+// src/components/approval-card/approval-card.svelte
+import * as $ from "svelte/internal/server";
+import { onDestroy } from "svelte";
+
+// src/components/approval-card/approval-card-state.ts
+function resolveEffectiveApprovalState(approvalState, expirationTimestamp, currentTime) {
+  if (approvalState !== "pending" || expirationTimestamp === undefined)
+    return approvalState;
+  return resolveComparisonTime(currentTime) >= expirationTimestamp ? "expired" : approvalState;
+}
+function isApprovalActionable(approvalState, expirationTimestamp, currentTime) {
+  if (approvalState !== "pending")
+    return false;
+  if (expirationTimestamp === undefined)
+    return true;
+  return resolveComparisonTime(currentTime) < expirationTimestamp;
+}
+function resolveComparisonTime(currentTime) {
+  return currentTime ?? Date.now();
+}
+
+// src/components/approval-card/approval-card.svelte
+function Approval_card($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const generatedId = $.props_id($$renderer2);
+    const ARGUMENTS_PREVIEW_MAX_CHARACTERS = 4096;
+    let {
+      tool,
+      sandbox,
+      operation,
+      env = [],
+      snapshotId,
+      policyVersion,
+      idempotencyKey,
+      expiresAt,
+      state: approvalState,
+      editableArgs = false,
+      onapprove,
+      onapprovewithedits,
+      ondeny,
+      onremember,
+      oncancel,
+      id,
+      class: customClassName,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    const rootId = $.derived(() => id ?? generatedId);
+    const titleId = $.derived(() => `${rootId()}-title`);
+    const descriptionId = $.derived(() => `${rootId()}-description`);
+    const editDescriptionId = $.derived(() => `${rootId()}-edit-description`);
+    const editErrorId = $.derived(() => `${rootId()}-edit-error`);
+    let currentTime = undefined;
+    let editingArgumentsSeedKey = null;
+    let editedArgumentsDrafts = {};
+    let expirationTimer;
+    const expirationTimestamp = $.derived(() => parseExpirationTimestamp(expiresAt));
+    const effectiveState = $.derived(() => resolveEffectiveApprovalState(approvalState, expirationTimestamp(), currentTime));
+    const isActionable = $.derived(() => isApprovalActionable(approvalState, expirationTimestamp(), currentTime));
+    const operationKindLabel = $.derived(() => formatOperationKind(operation.kind));
+    const riskLabel = $.derived(() => formatRisk(tool.risk));
+    const stateText = $.derived(() => formatState(effectiveState()));
+    const stateDescription = $.derived(() => isActionable() ? `${operationKindLabel()} approval is waiting for a decision.` : `No approval actions are available because this request is ${stateText().toLowerCase()}.`);
+    const expirationText = $.derived(() => {
+      if (effectiveState() === "expired")
+        return "Expired";
+      if (approvalState !== "pending" || expirationTimestamp() === undefined || currentTime === undefined) {
+        return;
+      }
+      return `Expires in ${formatRemainingTime(expirationTimestamp() - currentTime)}`;
+    });
+    const hasArgumentsPreview = $.derived(() => operation.argsPreview !== undefined);
+    const editableArgumentsValue = $.derived(() => normalizeArgumentsPreviewValue(operation.argsPreview));
+    const argumentsPreview = $.derived(() => prepareArgumentsPreview(editableArgumentsValue()));
+    const filesTouched = $.derived(() => operation.filesTouched ?? []);
+    const filesTouchedLabel = $.derived(() => `${filesTouched().length} file${filesTouched().length === 1 ? "" : "s"}`);
+    const environmentNames = $.derived(() => sanitizeEnvironmentNames(env));
+    const currentEditedArgumentsText = $.derived(() => formatEditableArguments(editableArgumentsValue()));
+    const currentEditedArgumentsSeedKey = $.derived(() => `${idempotencyKey}\x00${currentEditedArgumentsText()}`);
+    const canEditArguments = $.derived(() => editableArgs && hasArgumentsPreview());
+    const editingArguments = $.derived(() => canEditArguments() && editingArgumentsSeedKey === currentEditedArgumentsSeedKey());
+    const editedArgumentsText = $.derived(() => editedArgumentsDrafts[currentEditedArgumentsSeedKey()] ?? currentEditedArgumentsText());
+    const editParseResult = $.derived(() => parseJsonText(editedArgumentsText()));
+    const canConfirmEditedApproval = $.derived(() => canEditArguments() && editParseResult().ok && typeof onapprovewithedits === "function");
+    onDestroy(clearExpirationTimer);
+    function clearExpirationTimer() {
+      if (expirationTimer !== undefined) {
+        clearTimeout(expirationTimer);
+        expirationTimer = undefined;
+      }
+    }
+    function parseExpirationTimestamp(value) {
+      if (!value)
+        return;
+      const timestamp = Date.parse(value);
+      return Number.isFinite(timestamp) ? timestamp : undefined;
+    }
+    function formatRemainingTime(milliseconds) {
+      const totalSeconds = Math.max(0, Math.ceil(milliseconds / 1000));
+      const hours = Math.floor(totalSeconds / 3600);
+      const minutes = Math.floor(totalSeconds % 3600 / 60);
+      const seconds = totalSeconds % 60;
+      if (hours > 0)
+        return `${hours}h ${minutes}m`;
+      if (minutes > 0)
+        return `${minutes}m ${seconds}s`;
+      return `${seconds}s`;
+    }
+    function formatRisk(risk) {
+      switch (risk) {
+        case "low":
+          return "Low risk";
+        case "medium":
+          return "Medium risk";
+        case "high":
+          return "High risk";
+      }
+    }
+    function riskBadgeVariant(risk) {
+      switch (risk) {
+        case "low":
+          return "success";
+        case "medium":
+          return "warning";
+        case "high":
+          return "danger";
+      }
+    }
+    function formatOperationKind(kind) {
+      switch (kind) {
+        case "command":
+          return "Command";
+        case "file-write":
+          return "File write";
+        case "patch":
+          return "Patch";
+        case "other":
+          return "Operation";
+      }
+    }
+    function formatState(approvalState2) {
+      switch (approvalState2) {
+        case "pending":
+          return "Pending";
+        case "approved":
+          return "Approved";
+        case "approved_with_edits":
+          return "Approved with edits";
+        case "denied":
+          return "Denied";
+        case "expired":
+          return "Expired";
+        case "cancelled":
+          return "Cancelled";
+      }
+    }
+    function stateDotStatus(approvalState2) {
+      switch (approvalState2) {
+        case "pending":
+          return "pending";
+        case "approved":
+        case "approved_with_edits":
+          return "success";
+        case "denied":
+          return "danger";
+        case "expired":
+          return "neutral";
+        case "cancelled":
+          return "offline";
+      }
+    }
+    function normalizeArgumentsPreviewValue(value) {
+      if (typeof value !== "string")
+        return value;
+      try {
+        return JSON.parse(value);
+      } catch {
+        return value;
+      }
+    }
+    function prepareArgumentsPreview(value) {
+      try {
+        const serialized = JSON.stringify(value);
+        if (typeof serialized !== "string" || serialized.length <= ARGUMENTS_PREVIEW_MAX_CHARACTERS) {
+          return {
+            value: typeof value === "string" ? serialized : value,
+            truncated: false
+          };
+        }
+        return {
+          value: {
+            notice: "Arguments preview truncated",
+            originalCharacters: serialized.length,
+            displayedCharacters: ARGUMENTS_PREVIEW_MAX_CHARACTERS,
+            excerpt: serialized.slice(0, ARGUMENTS_PREVIEW_MAX_CHARACTERS)
+          },
+          truncated: true
+        };
+      } catch {
+        return { value, truncated: false };
+      }
+    }
+    function formatEditableArguments(value) {
+      try {
+        const serialized = JSON.stringify(value, null, 2);
+        return serialized ?? "null";
+      } catch {
+        return "{}";
+      }
+    }
+    function parseJsonText(text) {
+      try {
+        return { ok: true, value: JSON.parse(text) };
+      } catch {
+        return { ok: false, message: "Edited arguments must be valid JSON." };
+      }
+    }
+    function sanitizeEnvironmentName(name) {
+      const [firstPart] = name.split("=");
+      return firstPart?.trim() ?? "";
+    }
+    function sanitizeEnvironmentNames(names) {
+      const seen = [];
+      const sanitizedNames = [];
+      for (const name of names) {
+        const sanitizedName = sanitizeEnvironmentName(name);
+        if (!sanitizedName || seen.includes(sanitizedName))
+          continue;
+        seen.push(sanitizedName);
+        sanitizedNames.push(sanitizedName);
+      }
+      return sanitizedNames;
+    }
+    function currentApprovalIsActionable() {
+      const comparisonTime = expirationTimestamp() === undefined ? currentTime : Date.now();
+      const actionable = isApprovalActionable(approvalState, expirationTimestamp(), comparisonTime);
+      if (!actionable && approvalState === "pending" && expirationTimestamp() !== undefined) {
+        currentTime = comparisonTime;
+      }
+      return actionable;
+    }
+    function beginEditingArguments() {
+      if (!currentApprovalIsActionable())
+        return;
+      if (!canEditArguments())
+        return;
+      if (!(currentEditedArgumentsSeedKey() in editedArgumentsDrafts)) {
+        editedArgumentsDrafts = {
+          ...editedArgumentsDrafts,
+          [currentEditedArgumentsSeedKey()]: currentEditedArgumentsText()
+        };
+      }
+      editingArgumentsSeedKey = currentEditedArgumentsSeedKey();
+    }
+    function handleEditedArgumentsInput(event) {
+      editedArgumentsDrafts = {
+        ...editedArgumentsDrafts,
+        [currentEditedArgumentsSeedKey()]: event.currentTarget.value
+      };
+    }
+    function handleApprove() {
+      if (!currentApprovalIsActionable())
+        return;
+      onapprove?.();
+    }
+    function handleApproveWithEdits() {
+      if (!currentApprovalIsActionable())
+        return;
+      if (!canEditArguments())
+        return;
+      if (!editParseResult().ok)
+        return;
+      onapprovewithedits?.(editParseResult().value);
+    }
+    function handleDeny() {
+      if (!currentApprovalIsActionable())
+        return;
+      ondeny?.();
+    }
+    function handleRemember() {
+      if (!currentApprovalIsActionable())
+        return;
+      onremember?.();
+    }
+    function handleCancel() {
+      if (!currentApprovalIsActionable())
+        return;
+      oncancel?.();
+    }
+    $$renderer2.push(`<section${$.attributes({
+      ...rest,
+      id: rootId(),
+      class: $.clsx(classNames("cinder-approval-card", customClassName)),
+      "aria-labelledby": titleId(),
+      "aria-describedby": descriptionId(),
+      "data-cinder-state": effectiveState(),
+      "data-cinder-risk": tool.risk
+    })}>`);
+    {
+      let header = function($$renderer3) {
+        $$renderer3.push(`<div class="cinder-approval-card__header"><div class="cinder-approval-card__title-group"><p class="cinder-approval-card__eyebrow">${$.escape(operationKindLabel())} approval</p> <h3${$.attr("id", titleId())} class="cinder-approval-card__title">Approval required for ${$.escape(tool.name)}</h3> <p${$.attr("id", descriptionId())} class="cinder-approval-card__description">${$.escape(stateDescription())}</p></div> <div class="cinder-approval-card__badges" role="group" aria-label="Approval status">`);
+        Status_dot($$renderer3, { status: stateDotStatus(effectiveState()), label: stateText() });
+        $$renderer3.push(`<!----> `);
+        Badge($$renderer3, {
+          variant: riskBadgeVariant(tool.risk),
+          size: "sm",
+          children: ($$renderer4) => {
+            $$renderer4.push(`<!---->${$.escape(riskLabel())}`);
+          },
+          $$slots: { default: true }
+        });
+        $$renderer3.push(`<!----> `);
+        if (expirationText()) {
+          $$renderer3.push("<!--[0-->");
+          Badge($$renderer3, {
+            variant: effectiveState() === "expired" ? "neutral" : "warning",
+            size: "sm",
+            children: ($$renderer4) => {
+              $$renderer4.push(`<!---->${$.escape(expirationText())}`);
+            },
+            $$slots: { default: true }
+          });
+        } else {
+          $$renderer3.push("<!--[-1-->");
+        }
+        $$renderer3.push(`<!--]--></div></div>`);
+      };
+      Card($$renderer2, {
+        padding: "none",
+        class: "cinder-approval-card__surface",
+        header,
+        children: ($$renderer3) => {
+          $$renderer3.push(`<div class="cinder-approval-card__body"><dl class="cinder-approval-card__metadata" aria-label="Approval metadata"><div class="cinder-approval-card__metadata-item"><dt>Policy</dt> <dd>${$.escape(policyVersion)}</dd></div> <div class="cinder-approval-card__metadata-item"><dt>Idempotency key</dt> <dd>${$.escape(idempotencyKey)}</dd></div> `);
+          if (snapshotId) {
+            $$renderer3.push("<!--[0-->");
+            $$renderer3.push(`<div class="cinder-approval-card__metadata-item"><dt>Snapshot</dt> <dd>${$.escape(snapshotId)}</dd></div>`);
+          } else {
+            $$renderer3.push("<!--[-1-->");
+          }
+          $$renderer3.push(`<!--]--></dl> `);
+          if (sandbox) {
+            $$renderer3.push("<!--[0-->");
+            $$renderer3.push(`<section class="cinder-approval-card__section" aria-label="Sandbox context"><h4 class="cinder-approval-card__section-title">Sandbox</h4> <dl class="cinder-approval-card__metadata cinder-approval-card__metadata--compact"><div class="cinder-approval-card__metadata-item"><dt>Provider</dt> <dd>${$.escape(sandbox.provider)}</dd></div> <div class="cinder-approval-card__metadata-item"><dt>Name</dt> <dd>${$.escape(sandbox.name)}</dd></div> <div class="cinder-approval-card__metadata-item"><dt>Working directory</dt> <dd>${$.escape(sandbox.workingDir)}</dd></div></dl></section>`);
+          } else {
+            $$renderer3.push("<!--[-1-->");
+          }
+          $$renderer3.push(`<!--]--> <section class="cinder-approval-card__section" aria-label="Operation details"><div class="cinder-approval-card__section-heading"><h4 class="cinder-approval-card__section-title">Operation</h4> `);
+          Badge($$renderer3, {
+            size: "sm",
+            mono: true,
+            children: ($$renderer4) => {
+              $$renderer4.push(`<!---->${$.escape(operation.kind)}`);
+            },
+            $$slots: { default: true }
+          });
+          $$renderer3.push(`<!----></div> `);
+          if (operation.kind === "command" && operation.command) {
+            $$renderer3.push("<!--[0-->");
+            Code_block($$renderer3, { code: operation.command, language: "shell", highlight: false });
+          } else if (operation.kind === "patch" && operation.diff) {
+            $$renderer3.push("<!--[1-->");
+            Code_block($$renderer3, { code: operation.diff, language: "diff", highlight: false });
+          } else if (operation.kind === "file-write") {
+            $$renderer3.push("<!--[2-->");
+            $$renderer3.push(`<p class="cinder-approval-card__muted">Review the touched files and arguments before approving this file write.</p>`);
+          } else {
+            $$renderer3.push("<!--[-1-->");
+            $$renderer3.push(`<p class="cinder-approval-card__muted">Review the arguments and metadata before approving this operation.</p>`);
+          }
+          $$renderer3.push(`<!--]--> `);
+          if (filesTouched().length > 0) {
+            $$renderer3.push("<!--[0-->");
+            $$renderer3.push(`<div class="cinder-approval-card__files"><div class="cinder-approval-card__section-heading"><h5 class="cinder-approval-card__subsection-title">Files touched</h5> `);
+            Badge($$renderer3, {
+              size: "sm",
+              children: ($$renderer4) => {
+                $$renderer4.push(`<!---->${$.escape(filesTouchedLabel())}`);
+              },
+              $$slots: { default: true }
+            });
+            $$renderer3.push(`<!----></div> <ul class="cinder-approval-card__file-list"><!--[-->`);
+            const each_array = $.ensure_array_like(filesTouched());
+            for (let fileIndex = 0, $$length = each_array.length;fileIndex < $$length; fileIndex++) {
+              let file = each_array[fileIndex];
+              $$renderer3.push(`<li>${$.escape(file)}</li>`);
+            }
+            $$renderer3.push(`<!--]--></ul></div>`);
+          } else {
+            $$renderer3.push("<!--[-1-->");
+          }
+          $$renderer3.push(`<!--]--></section> <section class="cinder-approval-card__section" aria-label="Arguments preview">`);
+          if (hasArgumentsPreview()) {
+            $$renderer3.push("<!--[0-->");
+            Payload_inspector($$renderer3, {
+              value: argumentsPreview().value,
+              truncated: argumentsPreview().truncated,
+              label: "Arguments preview"
+            });
+          } else {
+            $$renderer3.push("<!--[-1-->");
+            $$renderer3.push(`<p class="cinder-approval-card__muted">No arguments were provided.</p>`);
+          }
+          $$renderer3.push(`<!--]--></section> `);
+          if (environmentNames().length > 0) {
+            $$renderer3.push("<!--[0-->");
+            $$renderer3.push(`<section class="cinder-approval-card__section" aria-label="Environment names"><h4 class="cinder-approval-card__section-title">Environment</h4> <div class="cinder-approval-card__environment-list"><!--[-->`);
+            const each_array_1 = $.ensure_array_like(environmentNames());
+            for (let environmentIndex = 0, $$length = each_array_1.length;environmentIndex < $$length; environmentIndex++) {
+              let environmentName = each_array_1[environmentIndex];
+              Secret_value_field($$renderer3, { value: environmentName, label: environmentName });
+            }
+            $$renderer3.push(`<!--]--></div></section>`);
+          } else {
+            $$renderer3.push("<!--[-1-->");
+          }
+          $$renderer3.push(`<!--]--> `);
+          if (isActionable()) {
+            $$renderer3.push("<!--[0-->");
+            $$renderer3.push(`<section class="cinder-approval-card__section cinder-approval-card__actions-section">`);
+            Button_group($$renderer3, {
+              label: "Approval actions",
+              children: ($$renderer4) => {
+                Button($$renderer4, {
+                  type: "button",
+                  variant: "primary",
+                  onclick: handleApprove,
+                  disabled: !onapprove,
+                  children: ($$renderer5) => {
+                    $$renderer5.push(`<!---->Approve`);
+                  },
+                  $$slots: { default: true }
+                });
+                $$renderer4.push(`<!----> `);
+                if (canEditArguments()) {
+                  $$renderer4.push("<!--[0-->");
+                  Button($$renderer4, {
+                    type: "button",
+                    variant: "secondary",
+                    onclick: beginEditingArguments,
+                    disabled: !onapprovewithedits,
+                    children: ($$renderer5) => {
+                      $$renderer5.push(`<!---->Approve with edits`);
+                    },
+                    $$slots: { default: true }
+                  });
+                } else {
+                  $$renderer4.push("<!--[-1-->");
+                }
+                $$renderer4.push(`<!--]--> `);
+                Button($$renderer4, {
+                  type: "button",
+                  variant: "soft-danger",
+                  onclick: handleDeny,
+                  disabled: !ondeny,
+                  children: ($$renderer5) => {
+                    $$renderer5.push(`<!---->Deny`);
+                  },
+                  $$slots: { default: true }
+                });
+                $$renderer4.push(`<!----> `);
+                Button($$renderer4, {
+                  type: "button",
+                  variant: "soft",
+                  onclick: handleRemember,
+                  disabled: !onremember,
+                  children: ($$renderer5) => {
+                    $$renderer5.push(`<!---->Remember`);
+                  },
+                  $$slots: { default: true }
+                });
+                $$renderer4.push(`<!----> `);
+                Button($$renderer4, {
+                  type: "button",
+                  variant: "ghost",
+                  onclick: handleCancel,
+                  disabled: !oncancel,
+                  children: ($$renderer5) => {
+                    $$renderer5.push(`<!---->Cancel`);
+                  },
+                  $$slots: { default: true }
+                });
+                $$renderer4.push(`<!---->`);
+              },
+              $$slots: { default: true }
+            });
+            $$renderer3.push(`<!----> `);
+            if (editingArguments()) {
+              $$renderer3.push("<!--[0-->");
+              $$renderer3.push(`<div class="cinder-approval-card__editor"><label class="cinder-approval-card__editor-label"${$.attr("for", `${rootId()}-edited-arguments`)}>Edited arguments JSON</label> <p${$.attr("id", editDescriptionId())} class="cinder-approval-card__muted">Confirming parses this JSON and sends the parsed value to the approval callback.</p> <textarea${$.attr("id", `${rootId()}-edited-arguments`)} class="cinder-approval-card__textarea" rows="8" spellcheck="false"${$.attr("aria-describedby", editParseResult().ok ? editDescriptionId() : `${editDescriptionId()} ${editErrorId()}`)}${$.attr("aria-invalid", editParseResult().ok ? undefined : "true")}>`);
+              const $$body = $.escape(editedArgumentsText());
+              if ($$body) {
+                $$renderer3.push(`${$$body}`);
+              } else {}
+              $$renderer3.push(`</textarea> `);
+              if (!editParseResult().ok) {
+                $$renderer3.push("<!--[0-->");
+                $$renderer3.push(`<p${$.attr("id", editErrorId())} class="cinder-approval-card__error" role="alert">${$.escape(editParseResult().message)}</p>`);
+              } else {
+                $$renderer3.push("<!--[-1-->");
+              }
+              $$renderer3.push(`<!--]--> <div class="cinder-approval-card__editor-actions">`);
+              Button($$renderer3, {
+                type: "button",
+                variant: "primary",
+                onclick: handleApproveWithEdits,
+                disabled: !canConfirmEditedApproval(),
+                children: ($$renderer4) => {
+                  $$renderer4.push(`<!---->Confirm edited approval`);
+                },
+                $$slots: { default: true }
+              });
+              $$renderer3.push(`<!----></div></div>`);
+            } else {
+              $$renderer3.push("<!--[-1-->");
+            }
+            $$renderer3.push(`<!--]--></section>`);
+          } else {
+            $$renderer3.push("<!--[-1-->");
+            $$renderer3.push(`<p class="cinder-approval-card__readonly-summary">No approval actions are available for this request.</p>`);
+          }
+          $$renderer3.push(`<!--]--></div>`);
+        },
+        $$slots: { header: true, default: true }
+      });
+    }
+    $$renderer2.push(`<!----></section>`);
+  });
+}
+
+// src/components/approval-card/index.ts
+var approval_card_default = Approval_card;
+export { Approval_card, approval_card_default };
+
+//# debugId=4D849115C4057BEA64756E2164756E21

package/dist/server/index.server-dbkczma7.js

@@ -0,0 +1,83 @@
+import {
+  formatNumber
+} from "./index.server-chh0fzxj.js";
+import {
+  getLocaleContext
+} from "./index.server-sz8sxsj6.js";
+import {
+  classNames
+} from "./index.server-z7nvkz8v.js";
+
+// src/components/stat/stat.svelte
+import * as $ from "svelte/internal/server";
+function Stat($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const generatedId = $.props_id($$renderer2);
+    let {
+      label,
+      value,
+      change,
+      icon,
+      valueFormatOptions,
+      valueLocale,
+      class: customClassName,
+      id,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    const localeContext = getLocaleContext();
+    const stableId = $.derived(() => id ?? generatedId);
+    const labelId = $.derived(() => `${stableId()}-label`);
+    const valueId = $.derived(() => `${stableId()}-value`);
+    const displayValue = $.derived(() => typeof value === "number" ? formatNumber(value, valueLocale ?? localeContext?.locale, valueFormatOptions) : value);
+    const arrowGlyph = $.derived(() => change?.direction === "up" ? "↑" : change?.direction === "down" ? "↓" : "→");
+    const changeAccessibleText = $.derived(() => {
+      if (!change)
+        return "";
+      if (change.label)
+        return change.label;
+      const suffix = change.description ? ` ${change.description}` : "";
+      if (change.direction === "up")
+        return `increased by ${change.value}${suffix}`;
+      if (change.direction === "down")
+        return `decreased by ${change.value}${suffix}`;
+      return `no change, ${change.value}${suffix}`;
+    });
+    $$renderer2.push(`<div${$.attributes({
+      ...rest,
+      id,
+      class: $.clsx(classNames("cinder-stat", customClassName)),
+      role: "group",
+      "aria-labelledby": `${labelId()} ${valueId()}`,
+      "data-cinder-has-icon": icon ? "" : undefined
+    })}>`);
+    if (icon) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<span class="cinder-stat__icon" aria-hidden="true">`);
+      icon($$renderer2);
+      $$renderer2.push(`<!----></span>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> <span${$.attr("id", labelId())} class="cinder-stat__label">${$.escape(label)}</span> <span${$.attr("id", valueId())} class="cinder-stat__value">${$.escape(displayValue())}</span> `);
+    if (change) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<span class="cinder-stat__change"${$.attr("data-cinder-direction", change.direction)}><span class="cinder-sr-only">${$.escape(changeAccessibleText())}</span> <span class="cinder-stat__change-icon" aria-hidden="true">${$.escape(arrowGlyph())}</span> <span class="cinder-stat__change-value" aria-hidden="true">${$.escape(change.value)}</span> `);
+      if (change.description) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<span class="cinder-stat__change-description" aria-hidden="true">${$.escape(change.description)}</span>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--></span>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></div>`);
+  });
+}
+
+export { Stat };
+
+//# debugId=C2857A071A6A23A064756E2164756E21