@solidjs/start 2.0.3 → 2.0.4

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @solidjs/start
 
+## 2.0.4
+
+### Patch Changes
+
+- ac3f321: Parse stack traces in the dev toolbar's error overlay with `error-stack-parser-es/lite` instead of `error-stack-parser`. The lite entry point is a much smaller, ESM-only parser that returns plain frame objects rather than class instances, and it no longer pulls in the `stackframe` package. Errors that carry no stack are now handled as an empty frame list instead of throwing.
+- ac3f321: Redesign the dev toolbar. The toolbar and its panels share a common set of design tokens, giving them a consistent dark palette, translucent surfaces, and elevation. The server function inspector is now a master-detail split with a persistent call list beside the request/response pane, and the error overlay places the stack frame list beside a code preview that fills the panel. Headers, form data, and URL search params render as aligned key-value tables, the hex viewer gains an offset gutter with the ASCII column aligned per row, and blobs are shown as file cards with their type and size. The seroval body inspector is now an expandable tree with collapsed previews, syntax-colored values, cycle detection, and live promise and stream state, replacing the previous column-based drill-down.
+
+  Along with the redesign, the toolbar only starts a drag from the toolbar itself rather than from its panels, unhandled promise rejections are captured by the error overlay, the code preview shows more surrounding lines, and a stack frame whose source cannot be loaded now stays listed and reports that its source is unavailable instead of silently rendering nothing.
+
+- ac3f321: Use `@jridgewell/trace-mapping` instead of `source-map-js` to resolve original sources in the dev toolbar's error overlay. It decodes mappings lazily, so only the positions actually inspected are resolved, it is significantly smaller in the browser bundle, and it understands indexed source maps.
+- f619c7f: Pre-bundle the dev toolbar's CommonJS dependencies so it no longer throws on every dev page load
+- d43ad1b: Update Solid to 1.9.15 to include the latest lazy loading and hydration fixes
+
 ## 2.0.3
 
 ### Patch Changes

package/dist/shared/dev-toolbar/error-viewer/CodeView.jsx

@@ -19,7 +19,7 @@ async function loadHighlighter() {
     }
     return HIGHLIGHTER;
 }
-const RANGE = 8;
+const RANGE = 15;
 export function CodeView(props) {
     const lines = () => props.content.split("\n").map((item, index) => ({
         index: index + 1,
@@ -34,9 +34,14 @@ export function CodeView(props) {
         .join("\n"), async (value) => {
         const highlighter = await loadHighlighter();
         const fileExtension = props.fileName.split(/[#?]/)[0].split(".").pop()?.trim();
-        let lang = fileExtension;
-        if (fileExtension === "mjs" || fileExtension === "cjs") {
-            lang = "js";
+        // Only these grammars are loaded — anything else would make shiki
+        // throw. Fall back to plain JS highlighting for unknown sources.
+        let lang = "js";
+        if (fileExtension === "jsx" ||
+            fileExtension === "ts" ||
+            fileExtension === "tsx" ||
+            fileExtension === "js") {
+            lang = fileExtension;
         }
         return highlighter.codeToHtml(value, {
             theme: "dark-plus",

package/dist/shared/dev-toolbar/error-viewer/create-stack-frame.d.ts

@@ -1,3 +1,4 @@
+import type { StackFrameLite } from "error-stack-parser-es/lite";
 import { type Accessor } from "solid-js";
 export interface StackFrameSource {
     content: string;
@@ -6,4 +7,4 @@ export interface StackFrameSource {
     line: number;
     column: number;
 }
-export declare function createStackFrame(stackframe: StackFrame, isCompiled: () => boolean): Accessor<StackFrameSource>;
+export declare function createStackFrame(stackframe: StackFrameLite, isCompiled: () => boolean): Accessor<StackFrameSource>;

package/dist/shared/dev-toolbar/error-viewer/create-stack-frame.js

@@ -1,3 +1,4 @@
+import { originalPositionFor, sourceContentFor } from "@jridgewell/trace-mapping";
 import { createMemo, createResource } from "solid-js";
 import getSourceMap from "./get-source-map.js";
 const HTTP_URL_REGEX = /^https?:\/\//;
@@ -20,27 +21,36 @@ function getActualFileSource(path) {
 }
 export function createStackFrame(stackframe, isCompiled) {
     const [data] = createResource(() => ({
-        fileName: stackframe.fileName,
-        line: stackframe.lineNumber,
-        column: stackframe.columnNumber,
-        functionName: stackframe.functionName,
+        fileName: stackframe.file,
+        line: stackframe.line,
+        column: stackframe.col,
+        functionName: stackframe.function,
     }), async (source) => {
         if (!source.fileName) {
             return null;
         }
-        const url = getActualFileSource(source.fileName);
-        const response = await fetch(url);
-        if (!response.ok) {
+        // Sources can be unreachable — node internals, extension scripts,
+        // files outside the dev server's allowlist. Treat any failure as
+        // "no source" instead of throwing into the error boundary.
+        try {
+            const url = getActualFileSource(source.fileName);
+            const response = await fetch(url);
+            if (!response.ok) {
+                return null;
+            }
+            const content = await response.text();
+            const sourceMap = await getSourceMap(url, content);
+            return {
+                source,
+                content,
+                sourceMap,
+                isServer: isServerSource(source.fileName),
+            };
+        }
+        catch (error) {
+            console.warn("[start dev toolbar] failed to load source for stack frame", error);
             return null;
         }
-        const content = await response.text();
-        const sourceMap = await getSourceMap(url, content);
-        return {
-            source,
-            content,
-            sourceMap,
-            isServer: isServerSource(source.fileName),
-        };
     });
     const info = createMemo(() => {
         const current = data();
@@ -52,8 +62,8 @@ export function createStackFrame(stackframe, isCompiled) {
             if (isServer) {
                 // The position is already original; only the original content needs
                 // to be pulled out of the source map.
-                const originalContent = sourceMap.sources.length
-                    ? sourceMap.sourceContentFor(sourceMap.sources[0], true)
+                const originalContent = sourceMap.sources.length && sourceMap.sources[0] != null
+                    ? sourceContentFor(sourceMap, sourceMap.sources[0])
                     : null;
                 if (originalContent) {
                     return {
@@ -66,14 +76,14 @@ export function createStackFrame(stackframe, isCompiled) {
                 }
             }
             else {
-                const result = sourceMap.originalPositionFor({
+                const result = originalPositionFor(sourceMap, {
                     line: source.line,
                     column: source.column,
                 });
                 if (result.source) {
                     return {
                         ...result,
-                        content: sourceMap.sourceContentFor(result.source, true),
+                        content: sourceContentFor(sourceMap, result.source),
                     };
                 }
             }

package/dist/shared/dev-toolbar/error-viewer/get-source-map.d.ts

@@ -1,2 +1,2 @@
-import { SourceMapConsumer } from "source-map-js";
-export default function getSourceMap(url: string, content: string): Promise<SourceMapConsumer | null>;
+import { type TraceMap } from "@jridgewell/trace-mapping";
+export default function getSourceMap(url: string, content: string): Promise<TraceMap | null>;

package/dist/shared/dev-toolbar/error-viewer/get-source-map.js

@@ -1,4 +1,4 @@
-import { SourceMapConsumer } from "source-map-js";
+import { AnyMap } from "@jridgewell/trace-mapping";
 const INLINE_SOURCEMAP_REGEX = /^data:application\/json[^,]+base64,/;
 const SOURCEMAP_REGEX = /(?:\/\/[@#][ \t]+sourceMappingURL=([^\s'"]+?)[ \t]*$)|(?:\/\*[@#][ \t]+sourceMappingURL=([^*]+?)[ \t]*(?:\*\/)[ \t]*$)/;
 export default async function getSourceMap(url, content) {
@@ -21,5 +21,6 @@ export default async function getSourceMap(url, content) {
     }
     const response = await fetch(sourceMapUrl);
     const rawSourceMap = await response.json();
-    return new SourceMapConsumer(rawSourceMap);
+    // AnyMap also handles indexed ("sections") source maps
+    return new AnyMap(rawSourceMap);
 }

package/dist/shared/dev-toolbar/error-viewer/index.jsx

@@ -1,5 +1,5 @@
 // @refresh skip
-import ErrorStackParser from "error-stack-parser";
+import { parse as parseErrorStack } from "error-stack-parser-es/lite";
 import * as htmlToImage from "html-to-image";
 import { createMemo, createSignal, ErrorBoundary, For, Show, Suspense } from "solid-js";
 import IconButton from "../../ui/IconButton.jsx";
@@ -48,47 +48,39 @@ function CodeFallback() {
       <span>Source not available.</span>
     </div>);
 }
+// Frame rendered from the raw (unmapped) stack info — used while the source
+// is loading or when it is unreachable, so the frame never vanishes from
+// the list.
+function RawStackFrameOption(props) {
+    const fileName = props.frame.file;
+    return (<SelectOption value={props.frame} disabled={props.disabled} data-start-error-viewer-stack-frame>
+      <span data-start-error-viewer-stack-frame-function>
+        {props.frame.function ?? "<anonymous>"}
+      </span>
+      <span data-start-error-viewer-stack-frame-file>
+        {fileName
+            ? getFilePath({
+                source: fileName,
+                content: "",
+                line: props.frame.line,
+                column: props.frame.col,
+                name: props.frame.function,
+            })
+            : "<unknown source>"}
+      </span>
+    </SelectOption>);
+}
 function StackFramesContent(props) {
-    const stackframes = ErrorStackParser.parse(props.error);
+    const stackframes = parseErrorStack(props.error, { allowEmpty: true });
     const [selectedFrame, setSelectedFrame] = createSignal(stackframes[0]);
     return (<div data-start-error-viewer-stack-frames-content>
-      <div data-start-error-viewer-stack-frames-code>
-        <ErrorBoundary fallback={null}>
-          {(() => {
-            const data = createStackFrame(selectedFrame(), () => props.isCompiled);
-            return (<Suspense fallback={<CodeFallback />}>
-                <Show when={data()} keyed fallback={<CodeFallback />}>
-                  {source => (<>
-                      <span data-start-error-viewer-stack-frames-code-source>{source.source}</span>
-                      <div data-start-error-viewer-stack-frames-code-container>
-                        <CodeView fileName={source.source} line={source.line} content={source.content}/>
-                      </div>
-                    </>)}
-                </Show>
-              </Suspense>);
-        })()}
-        </ErrorBoundary>
-      </div>
       <Select data-start-error-viewer-stack-frames value={selectedFrame()} onChange={setSelectedFrame}>
         <For each={stackframes}>
-          {current => (<ErrorBoundary fallback={<SelectOption value={current} disabled data-start-error-viewer-stack-frame>
-                  <span data-start-error-viewer-stack-frame-function>
-                    {current.functionName ?? "<anonymous>"}
-                  </span>
-                  <span data-start-error-viewer-stack-frame-file>
-                    {getFilePath({
-                    source: current.getFileName(),
-                    content: "",
-                    line: current.getLineNumber(),
-                    column: current.getColumnNumber(),
-                    name: current.getFunctionName(),
-                })}
-                  </span>
-                </SelectOption>}>
+          {current => (<ErrorBoundary fallback={<RawStackFrameOption frame={current} disabled/>}>
               {(() => {
                 const data = createStackFrame(current, () => props.isCompiled);
-                return (<Suspense>
-                    <Show when={data()} keyed>
+                return (<Suspense fallback={<RawStackFrameOption frame={current}/>}>
+                    <Show when={data()} keyed fallback={<RawStackFrameOption frame={current}/>}>
                       {source => (<SelectOption data-start-error-viewer-stack-frame value={current}>
                           <span data-start-error-viewer-stack-frame-function>
                             {source.name ?? "<anonymous>"}
@@ -103,6 +95,31 @@ function StackFramesContent(props) {
             </ErrorBoundary>)}
         </For>
       </Select>
+      <div data-start-error-viewer-stack-frames-code>
+        <Show when={selectedFrame()} keyed>
+          {frame => (
+        // Keyed on the frame so a failure inspecting one frame (an
+        // unreachable source, a failed highlight) resets when another
+        // frame is selected instead of leaving the pane stuck.
+        <ErrorBoundary fallback={<CodeFallback />}>
+              {(() => {
+                const data = createStackFrame(frame, () => props.isCompiled);
+                return (<Suspense fallback={<CodeFallback />}>
+                    <Show when={data()} keyed fallback={<CodeFallback />}>
+                      {source => (<>
+                          <span data-start-error-viewer-stack-frames-code-source>
+                            {source.source}
+                          </span>
+                          <div data-start-error-viewer-stack-frames-code-container>
+                            <CodeView fileName={source.source} line={source.line} content={source.content}/>
+                          </div>
+                        </>)}
+                    </Show>
+                  </Suspense>);
+            })()}
+            </ErrorBoundary>)}
+        </Show>
+      </div>
     </div>);
 }
 function StackFrames(props) {

package/dist/shared/dev-toolbar/error-viewer/styles.css

@@ -3,6 +3,8 @@
   flex-direction: column;
 
   width: 100%;
+  height: 100%;
+  min-height: 0;
 }
 
 [data-start-error-viewer-navbar] {
@@ -11,6 +13,16 @@
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
+
+  padding: 0.5rem 0.75rem;
+
+  position: sticky;
+  top: 0;
+  z-index: 1;
+
+  background: var(--start-dt-bg-glass);
+  backdrop-filter: blur(16px) saturate(140%);
+  -webkit-backdrop-filter: blur(16px) saturate(140%);
 }
 
 [data-start-error-viewer-pagination] {
@@ -20,8 +32,8 @@
   justify-content: center;
   gap: 0.5rem;
   border-radius: 9999px;
-  color: rgb(249 250 251);
-  background-color: rgb(17 24 39);
+  color: var(--start-dt-text);
+  background-color: var(--start-dt-surface);
   padding: 0.25rem;
 }
 
@@ -30,23 +42,23 @@
 }
 
 [data-start-error-viewer-button]:hover {
-  color: rgb(229 231 235);
-  background-color: rgb(55 65 81);
+  color: var(--start-dt-text);
+  background-color: var(--start-dt-surface-hover);
 }
 
 [data-start-error-viewer-button]:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
-  outline-color: rgb(229 231 235);
+  outline-color: var(--start-dt-accent);
 }
 
 [data-start-error-viewer-button]:focus-visible {
-  box-shadow: 0 0 0 calc(3px) rgb(17 24 39 / 0.75);
+  box-shadow: 0 0 0 2px var(--start-dt-accent);
 }
 
 [data-start-error-viewer-button]:active {
-  color: rgb(243 244 246);
-  background-color: rgb(31 41 55);
+  color: var(--start-dt-accent);
+  background-color: var(--start-dt-surface-active);
 }
 
 [data-start-error-viewer-button] > svg {
@@ -55,9 +67,11 @@
 }
 
 [data-start-error-viewer-page-counter] {
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   line-height: 1.25rem;
   font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--start-dt-text-muted);
 }
 
 [data-start-error-viewer-navbar-left] {
@@ -73,7 +87,7 @@
   justify-content: center;
   gap: 0.25rem;
   border-radius: 9999px;
-  color: rgb(249 250 251);
+  color: var(--start-dt-text);
   padding: 0.25rem;
 }
 
@@ -83,9 +97,13 @@
   gap: 0.75rem;
   padding: 1rem;
 
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+
   border-top-width: 1px;
   border-top-style: solid;
-  border-top-color: oklch(87% 0.065 274.039);
+  border-top-color: var(--start-dt-border-soft);
 }
 
 [data-start-error-viewer-error-info] {
@@ -95,107 +113,137 @@
 }
 
 [data-start-error-viewer-error-info-name] {
-  font-weight: 700;
-  color: rgb(249 250 251);
+  font-weight: 600;
+  font-size: 0.8125rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--start-dt-text-muted);
 }
 
 [data-start-error-viewer-error-info-message] {
-  font-size: 1.5rem;
-  line-height: 2rem;
-  color: rgb(239 68 68);
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  color: var(--start-dt-danger);
   font-weight: 700;
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    monospace;
 }
 
 [data-start-error-viewer-stack-frames-content] {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   gap: 0.75rem;
+
+  flex: 1;
+  min-height: 0;
 }
 
 [data-start-error-viewer-stack-frames] {
-  flex: 1 1 0%;
-  max-height: 16rem;
+  width: 38%;
+  max-width: 20rem;
+  flex-shrink: 0;
   overflow-y: auto;
+
+  border: 1px var(--start-dt-border-soft) solid;
+  border-radius: 0.5rem;
 }
 
 [data-start-error-viewer-stack-frame] {
   display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  color: rgb(249 250 251);
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.125rem;
+  color: var(--start-dt-text);
   cursor: default;
   user-select: none;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
   outline: none;
+
+  min-width: 0;
+  max-width: 100%;
 }
 
 [data-start-error-viewer-stack-frame][tc-active],
 [data-start-error-viewer-stack-frame][tc-selected],
 [data-start-error-viewer-stack-frame]:focus {
-  color: rgb(219 234 254);
-  background-color: rgb(30 58 138);
+  color: var(--start-dt-text);
+  background-color: var(--start-dt-accent-soft);
+  border-left-color: var(--start-dt-accent);
 }
 
 [data-start-error-viewer-stack-frame-function] {
-  font-weight: 700;
+  font-weight: 600;
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    monospace;
 }
 
 [data-start-error-viewer-stack-frame-file] {
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
   font-size: 0.75rem;
-  /* 12px */
   line-height: 1rem;
-  /* 16px */
+  color: var(--start-dt-text-muted);
 }
 
 [data-start-error-viewer-stack-frames-code] {
-  padding: 0.5rem 1rem;
-  gap: 0.25rem;
+  padding: 0.5rem 0.75rem;
+  gap: 0.375rem;
   flex: 1 1 0%;
+  min-width: 0;
+  min-height: 0;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
+  align-items: stretch;
+  justify-content: flex-start;
   border-radius: 0.5rem;
-  background-color: rgb(17 24 39);
+  background-color: var(--start-dt-surface);
+  border: 1px var(--start-dt-border-soft) solid;
 }
 
 [data-start-error-viewer-stack-frames-code-fallback] {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: rgb(249 250 251);
-  min-height: 16rem;
+  color: var(--start-dt-text-muted);
+  flex: 1;
+  min-height: 8rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
 
 [data-start-error-viewer-stack-frames-code-source] {
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   line-height: 1.25rem;
-  color: rgb(249 250 251);
+  color: var(--start-dt-text-muted);
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    monospace;
 }
 
 [data-start-error-viewer-stack-frames-code-container] {
   width: 100%;
   overflow: hidden;
   min-width: 100%;
-  max-height: 16rem;
+  flex: 1;
+  min-height: 0;
   border-top-width: 1px;
   border-top-style: solid;
-  border-top-color: oklch(87% 0.065 274.039);
+  border-top-color: var(--start-dt-border-soft);
 }
 
 [data-start-error-viewer-code-view] {
   overflow: auto;
   min-width: 100%;
+  height: 100%;
 }
 
 [data-start-error-viewer-code-view] > .shiki {
@@ -220,5 +268,5 @@
 }
 
 [data-start-error-viewer-error-line] {
-  background-color: rgba(239, 68, 68, 0.4);
+  background-color: oklch(0.63 0.21 25 / 0.25);
 }

package/dist/shared/dev-toolbar/functions/BlobViewer.css

@@ -1,4 +1,52 @@
+[data-start-blob-viewer] {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+
+  align-self: flex-start;
+
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+}
+
 [data-start-blob-viewer] svg {
-  width: 1rem;
-  height: 1rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  flex-shrink: 0;
+
+  color: var(--start-dt-accent, currentColor);
+}
+
+[data-start-blob-viewer-info] {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.25rem;
+
+  min-width: 0;
+}
+
+[data-start-blob-viewer-name] {
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    monospace;
+  font-size: 0.8125rem;
+  line-height: 1rem;
+  font-weight: 600;
+
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-start-blob-viewer-meta] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  font-size: 0.75rem;
+  line-height: 1rem;
+
+  color: var(--start-dt-text-muted, inherit);
 }

package/dist/shared/dev-toolbar/functions/BlobViewer.jsx

@@ -8,6 +8,15 @@ function DocumentIcon(props) {
       <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/>
     </svg>);
 }
+function formatSize(size) {
+    if (size < 1024) {
+        return `${size} B`;
+    }
+    if (size < 1024 * 1024) {
+        return `${(size / 1024).toFixed(1)} KB`;
+    }
+    return `${(size / (1024 * 1024)).toFixed(1)} MB`;
+}
 function BlobViewerInner(props) {
     const fileURL = createMemo(() => URL.createObjectURL(props.source));
     onCleanup(() => {
@@ -22,11 +31,21 @@ function BlobViewerInner(props) {
         link.click();
         document.body.removeChild(link);
     }
+    const name = createMemo(() => {
+        if (props.source instanceof File) {
+            return props.source.name;
+        }
+        return props.source.type || "Blob";
+    });
     return (<Button data-start-blob-viewer onClick={() => openFileInNewTab()}>
-      {props.source instanceof File ? (<Badge type="info">
-          <DocumentIcon title={props.source.name}/>
-          {props.source.name}
-        </Badge>) : (<Badge type="info">{props.source.type}</Badge>)}
+      <DocumentIcon title={name()}/>
+      <span data-start-blob-viewer-info>
+        <span data-start-blob-viewer-name>{name()}</span>
+        <span data-start-blob-viewer-meta>
+          <Badge type="info">{props.source.type || "unknown"}</Badge>
+          <span>{formatSize(props.source.size)}</span>
+        </span>
+      </span>
     </Button>);
 }
 export function BlobViewer(props) {

package/dist/shared/dev-toolbar/functions/FormDataViewer.jsx

@@ -1,15 +1,18 @@
 import { createResource, For, Show, Suspense } from "solid-js";
 import { Section } from "../../ui/Section.jsx";
+import { Text } from "../../ui/Text.jsx";
 import { BlobViewer } from "./BlobViewer.jsx";
-import { PropertySeparator, SerovalValue } from "./SerovalValue.jsx";
 function FormDataViewerInner(props) {
     return (<Section title="FormData" options={{ size: "sm" }}>
-      <div data-start-form-data-viewer data-start-properties>
+      <div data-start-form-data-viewer data-start-kv-table>
         <For each={Array.from(props.source.entries())}>
-          {([key, value]) => (<div data-start-property>
-              <SerovalValue value={`"${key}"`}/>
-              <PropertySeparator />
-              {typeof value === "string" ? (<SerovalValue value={`"${JSON.stringify(value)}"`}/>) : (<BlobViewer source={value}/>)}
+          {([key, value]) => (<div data-start-property data-start-kv-row>
+              <Text data-start-kv-key options={{ size: "xs", weight: "semibold", font: "mono", wrap: "nowrap" }}>
+                {key}
+              </Text>
+              {typeof value === "string" ? (<Text data-start-kv-value options={{ size: "xs", font: "mono", wrap: "wrap" }}>
+                  {JSON.stringify(value)}
+                </Text>) : (<BlobViewer source={value}/>)}
             </div>)}
         </For>
       </div>