@mcp-b/react-components 0.1.1 → 0.1.3

package/dist/styles/toggle.css

@@ -5,14 +5,15 @@
   gap: 0.5rem;
   padding-block: 0.5rem;
   padding-inline: 0.75rem;
-  font-family: var(--sigvelo-font-family);
+  font-family: var(--sigvelo-font-sans);
   font-size: 0.875rem;
   font-weight: var(--sigvelo-font-weight-semibold);
   line-height: 1.25;
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
   background-color: transparent;
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-stroke-soft);
-  border-radius: var(--sigvelo-border-radius-md);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-muted);
+  border-radius: var(--sigvelo-radius-md);
   cursor: pointer;
   transition:
     background-color 150ms ease,
@@ -20,22 +21,39 @@
     color 150ms ease;
 }
 
+.toggle--outline {
+  background-color: transparent;
+  border-color: var(--sigvelo-color-neutral-border-muted);
+}
+
+.toggle--sm {
+  padding-block: 0.25rem;
+  padding-inline: 0.5rem;
+  font-size: 0.75rem;
+}
+
+.toggle--lg {
+  padding-block: 0.625rem;
+  padding-inline: 1rem;
+  font-size: 1rem;
+}
+
 .toggle:hover {
-  background-color: var(--sigvelo-neutral-fill-softer);
-  color: var(--sigvelo-neutral-text-on-soft);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  color: var(--sigvelo-color-neutral-text-on-subtle);
 }
 
 .toggle:focus-visible {
   outline: none;
   box-shadow:
-    0 0 0 2px var(--sigvelo-background-color),
-    0 0 0 4px var(--sigvelo-focus-color);
+    0 0 0 2px var(--sigvelo-color-canvas),
+    0 0 0 4px var(--sigvelo-color-focus);
 }
 
 .toggle[data-pressed] {
-  background-color: var(--sigvelo-neutral-fill-softer);
-  color: var(--sigvelo-neutral-text-on-soft);
-  border-color: var(--sigvelo-neutral-fill-softer);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  color: var(--sigvelo-color-neutral-text-on-subtle);
+  border-color: var(--sigvelo-color-neutral-bg-subtle);
 }
 
 .toggle:disabled {

package/dist/styles/tool.css

@@ -2,12 +2,12 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  font-family: var(--sigvelo-font-family);
-  color: var(--sigvelo-text-body);
-  background-color: var(--sigvelo-paper-color);
+  font-family: var(--sigvelo-font-sans);
+  color: var(--sigvelo-color-text);
+  background-color: var(--sigvelo-color-surface);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-neutral-stroke-softer);
-  border-radius: var(--sigvelo-border-radius-md);
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-md);
   overflow: hidden;
 }
 
@@ -20,32 +20,34 @@
   padding-inline: 0.75rem;
   background-color: transparent;
   border: none;
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
   font-family: inherit;
   font-size: 0.8125rem;
   font-weight: var(--sigvelo-font-weight-semibold);
   text-align: start;
   cursor: pointer;
-  transition: background-color var(--sigvelo-motion-duration-fast)
-    var(--sigvelo-motion-easing-standard);
+  transition: background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .tool__header:hover:not([data-disabled]) {
-  background-color: var(--sigvelo-neutral-fill-softer);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
 }
 
 .tool__header:focus-visible {
   outline: none;
   box-shadow:
-    0 0 0 2px var(--sigvelo-background-color),
-    0 0 0 4px var(--sigvelo-focus-color);
+    0 0 0 2px var(--sigvelo-color-canvas),
+    0 0 0 4px var(--sigvelo-color-focus);
 }
 
+.tool__header-tool-icon,
 .tool__header-icon {
   display: inline-flex;
-  color: var(--sigvelo-text-muted);
-  transition: transform var(--sigvelo-motion-duration-medium)
-    var(--sigvelo-motion-easing-emphasized);
+  color: var(--sigvelo-color-text-muted);
+}
+
+.tool__header-icon {
+  transition: transform var(--sigvelo-duration-medium) var(--sigvelo-ease-emphasized);
 }
 
 .tool__header[data-panel-open] .tool__header-icon {
@@ -57,23 +59,23 @@
   align-items: center;
   padding-block: 0.125rem;
   padding-inline: 0.4375rem;
-  font-family: var(--sigvelo-font-family-code);
+  font-family: var(--sigvelo-font-mono);
   font-size: 0.6875rem;
   text-transform: uppercase;
   letter-spacing: 0.025em;
-  color: var(--sigvelo-text-muted);
-  background-color: var(--sigvelo-neutral-fill-softer);
-  border-radius: var(--sigvelo-border-radius-sm);
+  color: var(--sigvelo-color-text-muted);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  border-radius: var(--sigvelo-radius-sm);
 }
 
 .tool__header-name {
-  font-family: var(--sigvelo-font-family-code);
+  font-family: var(--sigvelo-font-mono);
   font-size: 0.8125rem;
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
 }
 
 .tool__header-title {
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
   font-weight: var(--sigvelo-font-weight-normal);
 }
 
@@ -81,11 +83,19 @@
   flex: 1;
 }
 
+.tool__header-badge {
+  gap: 0.25rem;
+}
+
+.tool__status-spinner {
+  animation: tool-spin 900ms linear infinite;
+}
+
 .tool__content {
   overflow: hidden;
   transition:
-    height var(--sigvelo-motion-duration-medium) var(--sigvelo-motion-easing-emphasized),
-    opacity var(--sigvelo-motion-duration-fast) var(--sigvelo-motion-easing-standard);
+    height var(--sigvelo-duration-medium) var(--sigvelo-ease-emphasized),
+    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .tool__content[data-closed] {
@@ -111,10 +121,10 @@
   padding-block: 0.75rem;
   padding-inline: 0.75rem;
   border-block-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-neutral-stroke-softer);
+    var(--sigvelo-color-neutral-border-subtle);
   transition:
-    transform var(--sigvelo-motion-duration-medium) var(--sigvelo-motion-easing-emphasized),
-    opacity var(--sigvelo-motion-duration-fast) var(--sigvelo-motion-easing-standard);
+    transform var(--sigvelo-duration-medium) var(--sigvelo-ease-emphasized),
+    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .tool__content[data-closed] .tool__content-inner,
@@ -141,7 +151,7 @@
   font-weight: var(--sigvelo-font-weight-semibold);
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
 }
 
 .tool__code-block {
@@ -158,13 +168,13 @@
 
 .tool__error-text {
   padding: 0.5rem 0.75rem;
-  font-family: var(--sigvelo-font-family-code);
+  font-family: var(--sigvelo-font-mono);
   font-size: 0.75rem;
-  color: var(--sigvelo-destructive-text-colorful);
-  background-color: var(--sigvelo-destructive-fill-softer);
+  color: var(--sigvelo-color-danger-text);
+  background-color: var(--sigvelo-color-danger-bg-subtle);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-destructive-stroke-softer);
-  border-radius: var(--sigvelo-border-radius-sm);
+    var(--sigvelo-color-danger-border-subtle);
+  border-radius: var(--sigvelo-radius-sm);
   white-space: pre-wrap;
 }
 
@@ -178,3 +188,15 @@
     outline-offset: 2px;
   }
 }
+
+@keyframes tool-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tool__status-spinner {
+    animation: none;
+  }
+}

package/dist/styles/toolbar.css

@@ -4,9 +4,10 @@
   gap: 0.25rem;
   padding: 0.25rem;
   container-type: inline-size;
-  background-color: var(--sigvelo-background-color);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-stroke-soft);
-  border-radius: var(--sigvelo-border-radius-md);
+  background-color: var(--sigvelo-color-canvas);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-muted);
+  border-radius: var(--sigvelo-radius-md);
 }
 
 .toolbar[data-orientation="vertical"] {
@@ -23,13 +24,13 @@
   align-items: center;
   justify-content: center;
   padding: 0.5rem;
-  font-family: var(--sigvelo-font-family);
+  font-family: var(--sigvelo-font-sans);
   font-size: 0.875rem;
   font-weight: var(--sigvelo-font-weight-semibold);
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
   background-color: transparent;
   border: none;
-  border-radius: var(--sigvelo-border-radius-sm);
+  border-radius: var(--sigvelo-radius-sm);
   cursor: pointer;
   transition:
     background-color 150ms ease,
@@ -37,15 +38,15 @@
 }
 
 .toolbar__button:hover {
-  background-color: var(--sigvelo-neutral-fill-softer);
-  color: var(--sigvelo-neutral-text-on-soft);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  color: var(--sigvelo-color-neutral-text-on-subtle);
 }
 
 .toolbar__button:focus-visible {
   outline: none;
   box-shadow:
-    0 0 0 2px var(--sigvelo-background-color),
-    0 0 0 4px var(--sigvelo-focus-color);
+    0 0 0 2px var(--sigvelo-color-canvas),
+    0 0 0 4px var(--sigvelo-color-focus);
 }
 
 .toolbar__button[data-disabled] {
@@ -54,8 +55,8 @@
 }
 
 .toolbar__button[data-pressed] {
-  background-color: var(--sigvelo-neutral-fill-softer);
-  color: var(--sigvelo-neutral-text-on-soft);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  color: var(--sigvelo-color-neutral-text-on-subtle);
 }
 
 .toolbar__link {
@@ -63,27 +64,27 @@
   align-items: center;
   justify-content: center;
   padding: 0.5rem;
-  font-family: var(--sigvelo-font-family);
+  font-family: var(--sigvelo-font-sans);
   font-size: 0.875rem;
   font-weight: var(--sigvelo-font-weight-semibold);
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
   text-decoration: none;
-  border-radius: var(--sigvelo-border-radius-sm);
+  border-radius: var(--sigvelo-radius-sm);
   transition:
     background-color 150ms ease,
     color 150ms ease;
 }
 
 .toolbar__link:hover {
-  background-color: var(--sigvelo-neutral-fill-softer);
-  color: var(--sigvelo-neutral-text-on-soft);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  color: var(--sigvelo-color-neutral-text-on-subtle);
 }
 
 .toolbar__link:focus-visible {
   outline: none;
   box-shadow:
-    0 0 0 2px var(--sigvelo-background-color),
-    0 0 0 4px var(--sigvelo-focus-color);
+    0 0 0 2px var(--sigvelo-color-canvas),
+    0 0 0 4px var(--sigvelo-color-focus);
 }
 
 .toolbar__group {
@@ -100,7 +101,7 @@
   width: 1px;
   height: 1.5rem;
   margin-inline: 0.25rem;
-  background-color: var(--sigvelo-neutral-stroke-soft);
+  background-color: var(--sigvelo-color-neutral-border-muted);
 }
 
 .toolbar[data-orientation="vertical"] .toolbar__separator {
@@ -112,20 +113,21 @@
 .toolbar__input {
   padding-block: 0.375rem;
   padding-inline: 0.5rem;
-  font-family: var(--sigvelo-font-family);
+  font-family: var(--sigvelo-font-sans);
   font-size: 0.875rem;
-  color: var(--sigvelo-text-body);
-  background-color: var(--sigvelo-background-color);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-stroke-soft);
-  border-radius: var(--sigvelo-border-radius-sm);
+  color: var(--sigvelo-color-text);
+  background-color: var(--sigvelo-color-canvas);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-muted);
+  border-radius: var(--sigvelo-radius-sm);
 }
 
 .toolbar__input:focus-visible {
   outline: none;
-  border-color: var(--sigvelo-focus-color);
+  border-color: var(--sigvelo-color-focus);
   box-shadow:
-    0 0 0 2px var(--sigvelo-background-color),
-    0 0 0 4px color-mix(in oklab, var(--sigvelo-focus-color), transparent 80%);
+    0 0 0 2px var(--sigvelo-color-canvas),
+    0 0 0 4px color-mix(in oklab, var(--sigvelo-color-focus), transparent 80%);
 }
 
 @container (max-width: 20rem) {

package/dist/styles/tooltip.css

@@ -2,14 +2,15 @@
   z-index: 50;
   padding-block: 0.375rem;
   padding-inline: 0.75rem;
-  font-family: var(--sigvelo-font-family);
+  font-family: var(--sigvelo-font-sans);
   font-size: 0.75rem;
   line-height: 1.25;
-  color: var(--sigvelo-text-body);
-  background-color: var(--sigvelo-paper-color);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-stroke-soft);
-  border-radius: var(--sigvelo-border-radius-md);
-  box-shadow: var(--sigvelo-shadow-soft);
+  color: var(--sigvelo-color-text);
+  background-color: var(--sigvelo-color-surface);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-muted);
+  border-radius: var(--sigvelo-radius-md);
+  box-shadow: var(--sigvelo-shadow-sm);
 }
 
 .tooltip__popup[data-starting-style],
@@ -21,8 +22,9 @@
 .tooltip__arrow {
   width: 0.5rem;
   height: 0.5rem;
-  background-color: var(--sigvelo-paper-color);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-stroke-soft);
+  background-color: var(--sigvelo-color-surface);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-muted);
   border-right: none;
   border-bottom: none;
   transform: rotate(45deg);

package/dist/styles/web-preview.css

@@ -2,12 +2,12 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  font-family: var(--sigvelo-font-family);
-  color: var(--sigvelo-text-body);
-  background-color: var(--sigvelo-paper-color);
+  font-family: var(--sigvelo-font-sans);
+  color: var(--sigvelo-color-text);
+  background-color: var(--sigvelo-color-surface);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-neutral-stroke-softer);
-  border-radius: var(--sigvelo-border-radius-md);
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-md);
   overflow: hidden;
 }
 
@@ -17,9 +17,9 @@
   gap: 0.375rem;
   padding-block: 0.5rem;
   padding-inline: 0.625rem;
-  background-color: var(--sigvelo-neutral-fill-softer);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-neutral-stroke-softer);
+    var(--sigvelo-color-neutral-border-subtle);
 }
 
 .web-preview__nav-button {
@@ -33,7 +33,7 @@
 
 .web-preview__url {
   width: 100%;
-  font-family: var(--sigvelo-font-family-code);
+  font-family: var(--sigvelo-font-mono);
   font-size: 0.75rem;
 }
 
@@ -42,7 +42,7 @@
   min-height: 16rem;
   width: 100%;
   border: none;
-  background-color: var(--sigvelo-background-color);
+  background-color: var(--sigvelo-color-canvas);
 }
 
 .web-preview__body--readonly {
@@ -54,7 +54,7 @@
   align-items: center;
   justify-content: center;
   padding: 2rem;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
   font-size: 0.8125rem;
   text-align: center;
 }
@@ -63,21 +63,37 @@
   display: flex;
   flex-direction: column;
   border-block-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-neutral-stroke-softer);
+    var(--sigvelo-color-neutral-border-subtle);
   max-height: 12rem;
 }
 
 .web-preview__console-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   padding-block: 0.375rem;
   padding-inline: 0.75rem;
+  border: 0;
   font-size: 0.6875rem;
   font-weight: var(--sigvelo-font-weight-bold);
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: var(--sigvelo-text-muted);
-  background-color: var(--sigvelo-neutral-fill-softer);
+  color: var(--sigvelo-color-text-muted);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  cursor: pointer;
+}
+
+.web-preview__console-header[aria-expanded="true"] {
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-neutral-stroke-softer);
+    var(--sigvelo-color-neutral-border-subtle);
+}
+
+.web-preview__console-header svg {
+  transition: transform var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+}
+
+.web-preview__console-header[aria-expanded="true"] svg {
+  transform: rotate(180deg);
 }
 
 .web-preview__console-scroll {
@@ -103,7 +119,7 @@
   padding-block: 0.75rem;
   padding-inline: 0.75rem;
   font-size: 0.75rem;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
   text-align: center;
 }
 
@@ -114,10 +130,10 @@
   align-items: baseline;
   padding-block: 0.375rem;
   padding-inline: 0.75rem;
-  font-family: var(--sigvelo-font-family-code);
+  font-family: var(--sigvelo-font-mono);
   font-size: 0.75rem;
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-neutral-stroke-softer);
+    var(--sigvelo-color-neutral-border-subtle);
 }
 
 .web-preview__console-item:last-child {
@@ -125,20 +141,20 @@
 }
 
 .web-preview__console-message {
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
   word-break: break-word;
 }
 
 .web-preview__console-item--warn .web-preview__console-message {
-  color: var(--sigvelo-warning-text-colorful);
+  color: var(--sigvelo-color-warning-text);
 }
 
 .web-preview__console-item--error .web-preview__console-message {
-  color: var(--sigvelo-destructive-text-colorful);
+  color: var(--sigvelo-color-danger-text);
 }
 
 .web-preview__console-time {
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
   font-variant-numeric: tabular-nums;
   font-size: 0.6875rem;
 }

package/dist/utils/structured-code.d.ts

@@ -0,0 +1,10 @@
+import { A as CodeBlockLanguage } from "../CodeBlock-V6pgafSS.js";
+
+//#region src/utils/structured-code.d.ts
+interface StructuredCodeDisplay {
+  code: string;
+  language: CodeBlockLanguage;
+}
+declare function formatStructuredCodeDisplay(value: unknown): StructuredCodeDisplay;
+//#endregion
+export { StructuredCodeDisplay, formatStructuredCodeDisplay };

package/dist/utils/structured-code.js

@@ -0,0 +1,81 @@
+//#region src/utils/structured-code.ts
+const INDENT = "  ";
+function formatStructuredCodeDisplay(value) {
+	if (containsMultilineString(value)) return {
+		code: formatJavaScriptDisplayValue(value, 0, /* @__PURE__ */ new WeakSet()),
+		language: "js"
+	};
+	try {
+		return {
+			code: JSON.stringify(value, null, 2) ?? "null",
+			language: "json"
+		};
+	} catch {
+		return {
+			code: formatJavaScriptDisplayValue(value, 0, /* @__PURE__ */ new WeakSet()),
+			language: "js"
+		};
+	}
+}
+function containsMultilineString(value, seen = /* @__PURE__ */ new WeakSet()) {
+	if (typeof value === "string") return value.includes("\n") || value.includes("\r");
+	if (!value || typeof value !== "object") return false;
+	if (seen.has(value)) return false;
+	seen.add(value);
+	if (Array.isArray(value)) return value.some((item) => containsMultilineString(item, seen));
+	return Object.values(value).some((item) => containsMultilineString(item, seen));
+}
+function formatJavaScriptDisplayValue(value, depth, seen) {
+	const primitiveDisplayValue = formatPrimitiveDisplayValue(value);
+	if (primitiveDisplayValue) return primitiveDisplayValue;
+	if (value instanceof Date) return `new Date(${JSON.stringify(value.toISOString())})`;
+	if (value instanceof RegExp) return String(value);
+	if (!value || typeof value !== "object") return JSON.stringify(value);
+	if (seen.has(value)) return JSON.stringify("[Circular]");
+	seen.add(value);
+	if (Array.isArray(value)) return formatDisplayArray(value, depth, seen);
+	return formatDisplayObject(value, depth, seen);
+}
+function formatPrimitiveDisplayValue(value) {
+	if (value === null) return "null";
+	switch (typeof value) {
+		case "object": return;
+		case "string": return formatDisplayString(value);
+		case "number":
+		case "boolean": return JSON.stringify(value);
+		case "bigint": return `${value}n`;
+		case "undefined": return "undefined";
+		case "function": return JSON.stringify(`[Function${value.name ? `: ${value.name}` : ""}]`);
+		case "symbol": return JSON.stringify(String(value));
+		default: return JSON.stringify(typeof value);
+	}
+}
+function formatDisplayArray(value, depth, seen) {
+	if (value.length === 0) {
+		seen.delete(value);
+		return "[]";
+	}
+	const itemIndent = INDENT.repeat(depth + 1);
+	const closingIndent = INDENT.repeat(depth);
+	const items = value.map((item) => `${itemIndent}${formatJavaScriptDisplayValue(item, depth + 1, seen)}`);
+	seen.delete(value);
+	return `[\n${items.join(",\n")}\n${closingIndent}]`;
+}
+function formatDisplayObject(value, depth, seen) {
+	const entries = Object.entries(value);
+	if (entries.length === 0) {
+		seen.delete(value);
+		return "{}";
+	}
+	const propertyIndent = INDENT.repeat(depth + 1);
+	const closingIndent = INDENT.repeat(depth);
+	const properties = entries.map(([key, entryValue]) => `${propertyIndent}${JSON.stringify(key)}: ${formatJavaScriptDisplayValue(entryValue, depth + 1, seen)}`);
+	seen.delete(value);
+	return `{\n${properties.join(",\n")}\n${closingIndent}}`;
+}
+function formatDisplayString(value) {
+	if (!value.includes("\n") && !value.includes("\r")) return JSON.stringify(value);
+	return `\`${value.replaceAll("\\", "\\\\").replaceAll("`", "\\`").replaceAll("${", "\\${")}\``;
+}
+//#endregion
+export { formatStructuredCodeDisplay };