@solidjs/start 2.0.2 → 2.0.4

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>

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

@@ -2,7 +2,3 @@
   font-size: 0.75rem;
   line-height: 1rem;
 }
-
-[data-start-headers-viewer] > [data-start-property] > *:first-child {
-  text-transform: capitalize;
-}

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

@@ -1,14 +1,16 @@
 import { For } from "solid-js";
-import { PropertySeparator, SerovalValue } from "./SerovalValue.jsx";
-import "./HeadersViewer.css";
 import { Text } from "../../ui/Text.jsx";
+import "./HeadersViewer.css";
 export function HeadersViewer(props) {
-    return (<div data-start-headers-viewer data-start-properties>
+    return (<div data-start-headers-viewer data-start-kv-table>
       <For each={Array.from(props.headers.entries())}>
-        {([key, value]) => (<div data-start-property>
-            <Text options={{ size: "xs", weight: "semibold", wrap: "nowrap" }}>{key}</Text>
-            <PropertySeparator />
-            <SerovalValue value={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>
+            <Text data-start-kv-value options={{ size: "xs", font: "mono", wrap: "wrap" }}>
+              {value}
+            </Text>
           </div>)}
       </For>
     </div>);

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

@@ -1,34 +1,53 @@
 [data-start-hex-viewer] {
-  display: flex;
-  border: 1px oklch(87% 0.065 274.039) solid;
-  overflow: auto;
-}
-
-[data-start-hex-viewer-bytes] {
-  flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
-  padding: 0.5rem;
-}
 
-[data-start-hex-viewer-text] {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding: 0.5rem;
-  border-left: 1px oklch(87% 0.065 274.039) solid;
+  border: 1px var(--start-dt-border-soft, oklch(87% 0.065 274.039)) solid;
+  border-radius: 0.5rem;
+  background-color: var(--start-dt-surface, transparent);
+
+  overflow: auto;
+
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    monospace;
 }
 
 [data-start-hex-row] {
   display: flex;
   align-items: center;
   gap: 1rem;
+
+  padding: 0.125rem 0.625rem;
+
+  white-space: nowrap;
+}
+
+[data-start-hex-row]:nth-child(even) {
+  background-color: oklch(1 0 0 / 0.03);
+}
+
+[data-start-hex-row]:hover {
+  background-color: var(--start-dt-surface-hover, transparent);
+}
+
+[data-start-hex-offset] {
+  color: var(--start-dt-text-muted, inherit);
+}
+
+[data-start-hex-chunk] {
+  letter-spacing: 0.05em;
+  color: var(--start-dt-text, inherit);
 }
 
 [data-start-hex-text] {
   display: flex;
   align-items: center;
   justify-content: start;
+
+  margin-left: auto;
+  padding-left: 1rem;
+  border-left: 1px var(--start-dt-border-soft, oklch(87% 0.065 274.039)) solid;
+
+  color: oklch(0.78 0.11 150);
 }

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

@@ -22,10 +22,14 @@ function HexRow(props) {
     const chunk3 = createMemo(() => props.bytes.subarray(8, 12));
     const chunk4 = createMemo(() => props.bytes.subarray(12, 16));
     return (<div data-start-hex-row>
+      <Text data-start-hex-offset options={{ size: "xs", weight: "semibold", wrap: "nowrap" }}>
+        {toHex(props.offset, 8)}
+      </Text>
       <HexChunk bytes={chunk1()}/>
       <HexChunk bytes={chunk2()}/>
       <HexChunk bytes={chunk3()}/>
       <HexChunk bytes={chunk4()}/>
+      <HexText bytes={props.bytes}/>
     </div>);
 }
 function replaceString(string) {
@@ -54,12 +58,9 @@ export function HexViewerInner(props) {
         return arrays;
     });
     return (<div data-start-hex-viewer>
-      <div data-start-hex-viewer-bytes>
-        <For each={rows()}>{current => <HexRow bytes={current}/>}</For>
-      </div>
-      <div data-start-hex-viewer-text>
-        <For each={rows()}>{current => <HexText bytes={current}/>}</For>
-      </div>
+      <For each={rows()}>
+        {(current, index) => <HexRow bytes={current} offset={index() * 16}/>}
+      </For>
     </div>);
 }
 export function HexViewer(props) {

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

@@ -3,3 +3,24 @@
   gap: 0.25rem;
   align-items: center;
 }
+
+[data-start-seroval-value="key"] {
+  color: oklch(0.78 0.1 305);
+}
+
+[data-start-seroval-value="string"] {
+  color: oklch(0.78 0.11 150);
+}
+
+[data-start-seroval-value="number"] {
+  color: oklch(0.8 0.11 80);
+}
+
+[data-start-seroval-value="keyword"] {
+  color: oklch(0.74 0.1 250);
+  font-style: italic;
+}
+
+[data-start-seroval-separator] {
+  color: var(--start-dt-text-muted);
+}

package/dist/shared/dev-toolbar/functions/SerovalValue.d.ts

@@ -1,6 +1,7 @@
 import "./SerovalValue.css";
 interface SerovalValueProps {
     value: string | number | boolean | undefined | null;
+    kind?: "key" | "string" | "number" | "keyword";
 }
 export declare function SerovalValue(props: SerovalValueProps): import("solid-js").JSX.Element;
 export declare function PropertySeparator(): import("solid-js").JSX.Element;

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

@@ -1,10 +1,12 @@
 import { Text } from "../../ui/Text.jsx";
 import "./SerovalValue.css";
 export function SerovalValue(props) {
-    return (<Text data-start-seroval-value options={{ size: "xs", weight: "semibold", wrap: "nowrap" }}>
+    return (<Text data-start-seroval-value={props.kind ?? "plain"} options={{ size: "xs", weight: "semibold", font: "mono", wrap: "nowrap" }}>
       {`${props.value}`}
     </Text>);
 }
 export function PropertySeparator() {
-    return <Text options={{ size: "xs", weight: "semibold", wrap: "nowrap" }}>:</Text>;
+    return (<Text data-start-seroval-separator options={{ size: "xs", weight: "semibold", wrap: "nowrap" }}>
+      :
+    </Text>);
 }

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

@@ -1,70 +1,132 @@
 [data-start-seroval-viewer] {
-  display: grid;
-  grid-template-columns: 1fr 2fr;
+  height: 100%;
+  min-height: 12rem;
+
+  overflow: auto;
+
+  padding: 0.375rem 0.5rem;
+
+  border: 1px var(--start-dt-border-soft, oklch(87% 0.065 274.039)) solid;
+  border-radius: 0.5rem;
+  background-color: var(--start-dt-surface, transparent);
+
+  color: var(--start-dt-text, rgb(249 250 251));
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    monospace;
 }
 
-[data-start-seroval-promise] {
+[data-start-seroval-tree-node] {
   display: flex;
-  gap: 0.5rem;
-  align-items: center;
+  flex-direction: column;
 }
 
-[data-start-seroval-renderer] {
+[data-start-seroval-tree-row] {
   display: flex;
-  border-top: 1px oklch(87% 0.065 274.039) solid;
-  border-bottom: 1px oklch(87% 0.065 274.039) solid;
+  align-items: center;
+  gap: 0.375rem;
+
+  padding: 0.125rem 0.25rem;
+  border-radius: 0.25rem;
+
+  min-width: 0;
+  width: 100%;
+
+  border: none;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  outline: none;
 }
 
-[data-start-seroval-renderer] > * {
-  border-left: 1px oklch(87% 0.065 274.039) solid;
+button[data-start-seroval-tree-row] {
+  cursor: pointer;
 }
 
-[data-start-seroval-renderer]:last-child {
-  border-right: 1px oklch(87% 0.065 274.039) solid;
+button[data-start-seroval-tree-row]:hover,
+button[data-start-seroval-tree-row]:focus-visible {
+  background-color: var(--start-dt-surface-hover, transparent);
 }
 
-[data-start-seroval-node] {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  padding: 0.25rem;
+[data-start-seroval-tree-chevron] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 
-  width: 100%;
-  max-width: 16rem;
+  width: 0.875rem;
+  flex-shrink: 0;
+
+  color: var(--start-dt-text-muted, inherit);
 }
 
-[data-start-seroval-node-header] {
-  position: sticky;
-  top: 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  color: rgb(249 250 251);
+[data-start-seroval-tree-chevron]::before {
+  content: "";
+
+  width: 0.3125rem;
+  height: 0.3125rem;
+
+  border-right: 1.5px currentColor solid;
+  border-bottom: 1.5px currentColor solid;
+
+  transform: rotate(-45deg);
+  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+[data-start-seroval-tree-chevron][data-leaf]::before {
+  content: none;
+}
+
+[data-start-seroval-tree-row][data-expanded] > [data-start-seroval-tree-chevron]::before {
+  transform: rotate(45deg);
 }
 
-[data-start-seroval-node-content] {
+[data-start-seroval-tree-children] {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
-}
 
-[data-start-seroval-value] {
-  color: rgb(249 250 251);
+  margin-left: 0.6875rem;
+  padding-left: 0.625rem;
+
+  border-left: 1px var(--start-dt-border-soft, oklch(87% 0.065 274.039)) solid;
 }
 
-[data-start-seroval-value-wrapper] {
+[data-start-seroval-tree-key] {
   display: inline-flex;
-  gap: 0.25rem;
   align-items: center;
+  gap: 0.125rem;
+
+  flex-shrink: 0;
 }
 
-[data-start-seroval-link] {
+[data-start-seroval-tree-preview] {
+  color: var(--start-dt-text-muted, inherit);
+  font-size: 0.75rem;
+  line-height: 1rem;
+
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-start-seroval-tree-circular] {
   display: inline-flex;
-  gap: 0.25rem;
   align-items: center;
+  gap: 0.25rem;
 }
 
-[data-start-seroval-link] > svg {
+[data-start-seroval-tree-circular] > svg {
   width: 1rem;
   height: 1rem;
+
+  color: var(--start-dt-accent, currentColor);
+}
+
+[data-start-seroval-tree-raw] {
+  padding: 0.25rem 0;
+}
+
+[data-start-seroval-value="plain"] {
+  color: var(--start-dt-text, rgb(249 250 251));
 }