@solidjs/start 2.0.2 → 2.0.4

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

@@ -1,14 +1,17 @@
 import { createResource, For, Show, Suspense } from "solid-js";
 import { Section } from "../../ui/Section.jsx";
-import { PropertySeparator, SerovalValue } from "./SerovalValue.jsx";
+import { Text } from "../../ui/Text.jsx";
 function URLSearchParamsViewerInner(props) {
     return (<Section title="URLSearchParams" options={{ size: "sm" }}>
-      <div data-start-properties>
+      <div data-start-properties data-start-kv-table>
         <For each={Array.from(props.source.entries())}>
-          {([key, value]) => (<div data-start-property>
-              <SerovalValue value={`"${key}"`}/>
-              <PropertySeparator />
-              <SerovalValue value={`"${JSON.stringify(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" }}>
+                {JSON.stringify(value)}
+              </Text>
             </div>)}
         </For>
       </div>

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

@@ -7,12 +7,11 @@ import { Section } from "../../ui/Section.jsx";
 import { Select, SelectOption } from "../../ui/Select.jsx";
 import { Tab, TabGroup, TabList, TabPanel } from "../../ui/Tabs.jsx";
 import { Text } from "../../ui/Text.jsx";
-import { ArrowLeftIcon, FunctionIcon, TrashIcon } from "../icons.jsx";
+import { FunctionIcon, TrashIcon } from "../icons.jsx";
 import { BlobViewer } from "./BlobViewer.jsx";
 import { FormDataViewer } from "./FormDataViewer.jsx";
 import { HeadersViewer } from "./HeadersViewer.jsx";
 import { HexViewer } from "./HexViewer.jsx";
-import { PropertySeparator, SerovalValue } from "./SerovalValue.jsx";
 import { SerovalViewer } from "./SerovalViewer.jsx";
 import "./styles.css";
 import { URLSearchParamsViewer } from "./URLSearchParamsViewer.jsx";
@@ -29,37 +28,43 @@ async function getURLSearchParams(source) {
     return new URLSearchParams(text);
 }
 function ContentViewer(props) {
+    const body = createMemo(() => {
+        const original = props.source.source;
+        if (!original.body) {
+            return undefined;
+        }
+        const source = original.clone();
+        const startType = source.headers.get(BODY_FORMAT_KEY);
+        const contentType = source.headers.get("Content-Type");
+        switch (true) {
+            case startType === "true":
+            case startType === BodyFormat.Seroval:
+                return <SerovalViewer stream={source}/>;
+            case startType === BodyFormat.String:
+                return <HexViewer bytes={source.bytes()}/>;
+            case startType === BodyFormat.File:
+                return <BlobViewer source={getFile(source)}/>;
+            case startType === BodyFormat.FormData:
+            case contentType?.startsWith("multipart/form-data"):
+                return <FormDataViewer source={source.formData()}/>;
+            case startType === BodyFormat.URLSearchParams:
+            case contentType?.startsWith("application/x-www-form-urlencoded"):
+                return <URLSearchParamsViewer source={getURLSearchParams(source)}/>;
+            case startType === BodyFormat.Blob:
+                return <BlobViewer source={source.blob()}/>;
+            case startType === BodyFormat.ArrayBuffer:
+            case startType === BodyFormat.Uint8Array:
+                return <HexViewer bytes={source.bytes()}/>;
+        }
+        return undefined;
+    });
     return (<>
-      <Section title="Headers">
+      <Show when={body()}>
+        <Section title="Body">{body()}</Section>
+      </Show>
+      <Section collapsible title="Headers">
         <HeadersViewer headers={props.source.source.headers}/>
       </Section>
-      <Section title="Body">
-        {(() => {
-            const source = props.source.source.clone();
-            const startType = source.headers.get(BODY_FORMAT_KEY);
-            const contentType = source.headers.get("Content-Type");
-            switch (true) {
-                case startType === "true":
-                case startType === BodyFormat.Seroval:
-                    return <SerovalViewer stream={source}/>;
-                case startType === BodyFormat.String:
-                    return <HexViewer bytes={source.bytes()}/>;
-                case startType === BodyFormat.File:
-                    return <BlobViewer source={getFile(source)}/>;
-                case startType === BodyFormat.FormData:
-                case contentType?.startsWith("multipart/form-data"):
-                    return <FormDataViewer source={source.formData()}/>;
-                case startType === BodyFormat.URLSearchParams:
-                case contentType?.startsWith("application/x-www-form-urlencoded"):
-                    return <URLSearchParamsViewer source={getURLSearchParams(source)}/>;
-                case startType === BodyFormat.Blob:
-                    return <BlobViewer source={source.blob()}/>;
-                case startType === BodyFormat.ArrayBuffer:
-                case startType === BodyFormat.Uint8Array:
-                    return <HexViewer bytes={source.bytes()}/>;
-            }
-        })()}
-      </Section>
     </>);
 }
 function convertRequestToEntries(request) {
@@ -78,16 +83,21 @@ function convertRequestToEntries(request) {
 }
 function RequestViewer(props) {
     return (<TabPanel value="request">
-      <Section title="Information">
-        <For each={convertRequestToEntries(props.request.source)}>
-          {([key, value]) => (<div data-start-property>
-              <Text options={{ size: "xs", weight: "semibold", wrap: "nowrap" }}>{key}</Text>
-              <PropertySeparator />
-              <SerovalValue value={value}/>
-            </div>)}
-        </For>
-      </Section>
       <ContentViewer source={props.request}/>
+      <Section collapsible defaultOpen={false} title="Information">
+        <div data-start-properties data-start-kv-table>
+          <For each={convertRequestToEntries(props.request.source)}>
+            {([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>
+      </Section>
     </TabPanel>);
 }
 function convertResponseToEntries(response) {
@@ -102,23 +112,33 @@ function convertResponseToEntries(response) {
 }
 function ResponseViewer(props) {
     return (<TabPanel value="response">
-      <Show when={props.response}>
+      <Show when={props.response} fallback={<Placeholder>
+            <Text options={{ size: "xs" }}>Waiting for response.</Text>
+          </Placeholder>}>
         {instance => (<>
-            <Section title="Information">
-              <For each={convertResponseToEntries(instance().source)}>
-                {([key, value]) => (<div data-start-property>
-                    <Text options={{ size: "xs", weight: "semibold", wrap: "nowrap" }}>{key}</Text>
-                    <PropertySeparator />
-                    <SerovalValue value={value}/>
-                  </div>)}
-              </For>
-              <div data-start-property>
-                <Text options={{ size: "xs", weight: "semibold", wrap: "nowrap" }}>Timing</Text>
-                <PropertySeparator />
-                <SerovalValue value={`${((instance().time - props.request.time) / 1000).toFixed(2)}s`}/>
+            <ContentViewer source={instance()}/>
+            <Section collapsible defaultOpen={false} title="Information">
+              <div data-start-properties data-start-kv-table>
+                <For each={convertResponseToEntries(instance().source)}>
+                  {([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 data-start-property data-start-kv-row>
+                  <Text data-start-kv-key options={{ size: "xs", weight: "semibold", font: "mono", wrap: "nowrap" }}>
+                    Timing
+                  </Text>
+                  <Text data-start-kv-value options={{ size: "xs", font: "mono", wrap: "wrap" }}>
+                    {`${((instance().time - props.request.time) / 1000).toFixed(2)}s`}
+                  </Text>
+                </div>
               </div>
             </Section>
-            <ContentViewer source={instance()}/>
           </>)}
       </Show>
     </TabPanel>);
@@ -144,14 +164,18 @@ function ServerFunctionInstanceViewer(props) {
     return (<div data-start-function-instance-viewer>
       <div data-start-function-instance-viewer-nav>
         <div data-start-function-instance-viewer-nav-left>
-          <IconButton onClick={props.onReturn}>
-            <ArrowLeftIcon title="Go Back"/>
-          </IconButton>
           <div>
             <ServerFunctionInstanceDetail id={props.id} value={props.instance}/>
           </div>
         </div>
         <div>
+          <Show when={props.instance.response}>
+            {response => (<span data-start-function-instance-timing>
+                <Text options={{ size: "xs", weight: "semibold", font: "mono", wrap: "nowrap" }}>
+                  {`${((response().time - props.instance.request.time) / 1000).toFixed(2)}s`}
+                </Text>
+              </span>)}
+          </Show>
           <IconButton onClick={props.onDelete}>
             <TrashIcon title="Delete instance"/>
           </IconButton>
@@ -180,18 +204,8 @@ export function ServerFunctionViewer(props) {
     return (<Show when={props.show}>
       <div data-start-dev-toolbar-panel>
         <div data-start-functions-viewer>
-          {/* request/response viewer */}
-          <Show when={currentInstance()}>
-            {value => (<Show when={props.instances[value()]}>
-                {instance => (<ServerFunctionInstanceViewer id={value()} instance={instance()} onReturn={() => {
-                    setCurrentInstance(undefined);
-                }} onDelete={() => {
-                    props.onDeleteInstance(value());
-                }}/>)}
-              </Show>)}
-          </Show>
-          <Show when={!currentInstance()}>
-            {/* list of calls */}
+          {/* list of calls */}
+          <div data-start-functions-sidebar>
             <div data-start-functions-nav>
               <FunctionIcon title="Server functions"/>
               <Text options={{ size: "sm" }}>Server functions</Text>
@@ -209,7 +223,20 @@ export function ServerFunctionViewer(props) {
                 </Select>
               </Show>
             </div>
-          </Show>
+          </div>
+          {/* request/response viewer */}
+          <div data-start-functions-detail>
+            <Show when={currentInstance()} fallback={<Placeholder>
+                  <Text options={{ size: "xs" }}>Select a server function call.</Text>
+                </Placeholder>}>
+              {value => (<Show when={props.instances[value()]}>
+                  {instance => (<ServerFunctionInstanceViewer id={value()} instance={instance()} onDelete={() => {
+                    setCurrentInstance(undefined);
+                    props.onDeleteInstance(value());
+                }}/>)}
+                </Show>)}
+            </Show>
+          </div>
         </div>
       </div>
     </Show>);

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

@@ -2,21 +2,51 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
+
+  min-width: 0;
+}
+
+[data-start-functions-instance-detail] > [data-start-text-size] {
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 [data-start-functions-viewer] {
-  color: rgb(249 250 251);
+  color: var(--start-dt-text);
+
+  display: flex;
+  flex-direction: row;
+
+  height: 100%;
+}
 
+[data-start-functions-sidebar] {
   display: flex;
   flex-direction: column;
 
-  min-height: 100%;
+  width: 17rem;
+  flex-shrink: 0;
+  min-height: 0;
+
+  border-right: var(--start-dt-border-soft) 1px solid;
+}
+
+[data-start-functions-detail] {
+  display: flex;
+  flex-direction: column;
+
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+
+  overflow: auto;
 }
 
 [data-start-functions-instances-container] {
-  color: rgb(249 250 251);
+  color: var(--start-dt-text);
   width: 100%;
-  min-height: 100%;
+  flex: 1;
+  min-height: 0;
   overflow: auto;
 }
 
@@ -31,8 +61,12 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0.5rem;
-  color: rgb(249 250 251);
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  color: var(--start-dt-text);
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    monospace;
 }
 
 [data-start-headers] {
@@ -60,16 +94,21 @@
   gap: 0.25rem;
 }
 
+[data-start-property] > [data-start-text-weight="semibold"] {
+  color: var(--start-dt-text-muted);
+}
+
 [data-start-function-instance-viewer] {
   display: flex;
   flex-direction: column;
 
   width: 100%;
+  min-height: 100%;
 }
 
 [data-start-function-instance-viewer-nav],
 [data-start-functions-nav] {
-  padding: 0.5rem;
+  padding: 0.5rem 0.75rem;
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -78,32 +117,126 @@
 
   position: sticky;
   top: 0;
+  z-index: 1;
+
+  border-bottom: var(--start-dt-border-soft) 1px solid;
 
-  border-bottom: oklch(87% 0.065 274.039) 1px solid;
+  background: var(--start-dt-bg-glass);
+  backdrop-filter: blur(16px) saturate(140%);
+  -webkit-backdrop-filter: blur(16px) saturate(140%);
+}
 
-  background: oklch(25.7% 0.09 281.288);
+[data-start-functions-nav] {
+  justify-content: flex-start;
+  flex-shrink: 0;
 }
 
 [data-start-functions-nav] svg {
   padding: 0.25rem;
+  color: var(--start-dt-accent);
+}
+
+[data-start-function-instance-viewer-nav] > div:last-child {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  flex-shrink: 0;
+}
+
+[data-start-function-instance-timing] {
+  display: inline-flex;
+  align-items: center;
+
+  color: var(--start-dt-text-muted);
+  background: var(--start-dt-surface);
+  border-radius: 9999px;
+  padding: 0.125rem 0.5rem;
+}
+
+/* Body section (the only non-collapsible <div> section in a tab panel) fills the pane;
+   the minimum keeps it inspectable even when Headers/Information are expanded — the
+   tab panel scrolls instead of squeezing the body. */
+[data-start-tab-panel] > div[data-start-section]:first-child {
+  flex: 1 1 auto;
+  min-height: 18rem;
+}
+
+[data-start-tab-panel] > div[data-start-section]:first-child > [data-start-section-content] {
+  flex: 1;
+  min-height: 0;
 }
 
 [data-start-function-instance-viewer-nav-left] {
   display: flex;
   align-items: center;
   gap: 0.5rem;
+
+  min-width: 0;
 }
 
 [data-start-function-instance-viewer-nav-left] > div {
   display: flex;
   align-items: center;
   gap: 0.5rem;
+
+  min-width: 0;
 }
 
 [data-start-function-instance-viewer-content] {
-  height: 100%;
+  flex: 1;
+  min-height: 0;
 }
 
 [data-start-function-instance-viewer-content] > [tc-tab-group] {
   height: 100%;
+
+  display: flex;
+  flex-direction: column;
+}
+
+/* shared key-value table (headers, form data, url search params) */
+[data-start-kv-table] {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+
+  border: 1px var(--start-dt-border-soft) solid;
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+
+[data-start-kv-row] {
+  display: flex;
+  align-items: baseline;
+  gap: 0.75rem;
+
+  padding: 0.375rem 0.625rem;
+}
+
+[data-start-kv-row]:nth-child(even) {
+  background-color: oklch(1 0 0 / 0.03);
+}
+
+[data-start-kv-row]:hover {
+  background-color: var(--start-dt-surface-hover);
+}
+
+[data-start-kv-key] {
+  flex: 0 0 11rem;
+  min-width: 0;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  color: oklch(0.78 0.1 305);
+}
+
+[data-start-kv-value] {
+  flex: 1;
+  min-width: 0;
+
+  word-break: break-all;
+
+  color: var(--start-dt-text);
 }

package/dist/shared/dev-toolbar/index.css

@@ -1,4 +1,19 @@
 [data-start-dev-toolbar] {
+  /* design tokens — inherited by every panel and ui component inside */
+  --start-dt-bg: oklch(0.16 0.015 265);
+  --start-dt-bg-glass: oklch(0.17 0.015 265 / 0.88);
+  --start-dt-surface: oklch(0.22 0.02 265);
+  --start-dt-surface-hover: oklch(0.27 0.025 265);
+  --start-dt-surface-active: oklch(0.3 0.03 265);
+  --start-dt-border: oklch(0.34 0.02 265);
+  --start-dt-border-soft: oklch(0.27 0.02 265);
+  --start-dt-text: oklch(0.93 0.005 265);
+  --start-dt-text-muted: oklch(0.68 0.015 265);
+  --start-dt-accent: oklch(0.68 0.13 245);
+  --start-dt-accent-soft: oklch(0.68 0.13 245 / 0.16);
+  --start-dt-danger: oklch(0.63 0.21 25);
+  --start-dt-shadow: 0 12px 32px oklch(0 0 0 / 0.4), 0 2px 8px oklch(0 0 0 / 0.25);
+
   position: fixed;
 
   bottom: 0px;
@@ -8,19 +23,31 @@
   flex-direction: column-reverse;
   align-items: flex-start;
 
+  z-index: 2147483647;
+
+  color: var(--start-dt-text);
+  font-family:
+    system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    "Noto Color Emoji";
+}
+
+[data-start-dev-toolbar] > [tc-toolbar] {
   cursor: grab;
 }
 
-[data-start-dev-toolbar]:active {
+[data-start-dev-toolbar] > [tc-toolbar]:active {
   cursor: grabbing;
 }
 
 [data-start-dev-toolbar] > [tc-toolbar] {
   position: relative;
 
-  background: oklch(25.7% 0.09 281.288);
+  background: var(--start-dt-bg-glass);
+  backdrop-filter: blur(16px) saturate(140%);
+  -webkit-backdrop-filter: blur(16px) saturate(140%);
+
   margin: 1rem;
-  padding: 0.25rem 0.5rem;
+  padding: 0.375rem 0.625rem;
 
   overflow: hidden;
   border-radius: 9999px;
@@ -29,9 +56,10 @@
   flex-direction: row;
   align-items: center;
 
-  gap: 0.5rem;
+  gap: 0.625rem;
 
-  border: oklch(87% 0.065 274.039) 1px solid;
+  border: var(--start-dt-border) 1px solid;
+  box-shadow: var(--start-dt-shadow);
 }
 
 [data-start-dev-toolbar] > [tc-toolbar] > div {
@@ -40,25 +68,30 @@
   flex-direction: row;
   align-items: center;
   justify-content: center;
+
+  gap: 0.125rem;
 }
 
 [data-start-dev-toolbar] > [tc-toolbar] > div:last-child {
-  border-left: rgb(249 250 251) 1px solid;
-  padding-left: 0.5rem;
+  border-left: var(--start-dt-border) 1px solid;
+  padding-left: 0.625rem;
 
   gap: 0.5rem;
+
+  color: var(--start-dt-text-muted);
 }
 
 [data-start-dev-toolbar-version] {
   border-radius: 9999px;
-  color: rgb(249 250 251);
+  color: var(--start-dt-accent);
+  background: var(--start-dt-accent-soft);
   padding: 0.125rem 0.5rem;
 
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 600;
 
-  border: oklch(87% 0.065 274.039) 1px solid;
+  border: none;
 }
 
 [data-start-dev-toolbar-version] > div {
@@ -72,14 +105,21 @@
 }
 
 [data-start-dev-toolbar-panel] {
-  border: oklch(87% 0.065 274.039) 1px solid;
-  background: oklch(25.7% 0.09 281.288);
+  border: var(--start-dt-border) 1px solid;
+  background: var(--start-dt-bg-glass);
+  backdrop-filter: blur(16px) saturate(140%);
+  -webkit-backdrop-filter: blur(16px) saturate(140%);
+  box-shadow: var(--start-dt-shadow);
+
   margin: 0rem 1rem;
 
-  overflow: auto;
+  overflow: hidden;
+
+  display: flex;
+  flex-direction: column;
 
-  width: 50rem;
-  height: 30rem;
+  width: 56rem;
+  height: min(40rem, calc(100vh - 4rem));
 
   max-width: calc(100vw - 10rem);
   max-height: calc(100vh - 2rem);

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

@@ -19,6 +19,8 @@ export function DevToolbar(props) {
     createEffect(() => {
         const current = ref();
         if (current) {
+            // Only the toolbar pill itself is the drag handle — panels/popovers are not draggable.
+            const handle = current.querySelector(":scope > [tc-toolbar]") ?? current;
             let isDown = false;
             // Offsets of the mouse relatively to the element's position
             let offsetX = 0;
@@ -35,7 +37,7 @@ export function DevToolbar(props) {
             };
             let isDirty = false;
             const ac = new AbortController();
-            current.addEventListener("mousedown", e => {
+            handle.addEventListener("mousedown", e => {
                 isDown = true;
                 const rect = current.getBoundingClientRect();
                 currentX = rect.left;
@@ -111,9 +113,14 @@ export function DevToolbar(props) {
             }
             pushError(error.error ?? error);
         };
+        const onRejectionEvent = (event) => {
+            pushError(event.reason);
+        };
         window.addEventListener("error", onErrorEvent);
+        window.addEventListener("unhandledrejection", onRejectionEvent);
         onCleanup(() => {
             window.removeEventListener("error", onErrorEvent);
+            window.removeEventListener("unhandledrejection", onRejectionEvent);
         });
     });
     const [store, setStore] = createStore({

package/dist/shared/ui/Badge.css

@@ -5,29 +5,40 @@
   gap: 0.25rem;
 
   border-radius: 0.375rem;
-  padding: 0.125rem 0.25rem;
+  padding: 0.125rem 0.375rem;
+
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 600;
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    monospace;
 
   background-color: var(--background);
-  border: 1px var(--foreground) solid;
+  border: 1px var(--border) solid;
   color: var(--foreground);
 }
 
 [data-start-badge="success"] {
-  --background: oklch(98.2% 0.018 155.826);
-  --foreground: oklch(52.7% 0.154 150.069);
+  --background: oklch(0.63 0.15 150 / 0.14);
+  --border: oklch(0.63 0.15 150 / 0.4);
+  --foreground: oklch(0.8 0.14 152);
 }
 
 [data-start-badge="failure"] {
-  --background: oklch(97.1% 0.013 17.38);
-  --foreground: oklch(50.5% 0.213 27.518);
+  --background: oklch(0.63 0.21 25 / 0.14);
+  --border: oklch(0.63 0.21 25 / 0.4);
+  --foreground: oklch(0.78 0.15 22);
 }
 
 [data-start-badge="warning"] {
-  --background: oklch(98.7% 0.026 102.212);
-  --foreground: oklch(47.6% 0.114 61.907);
+  --background: oklch(0.75 0.15 85 / 0.14);
+  --border: oklch(0.75 0.15 85 / 0.4);
+  --foreground: oklch(0.85 0.13 88);
 }
 
 [data-start-badge="info"] {
-  --background: oklch(97% 0.014 254.604);
-  --foreground: oklch(48.8% 0.243 264.376);
+  --background: oklch(0.68 0.13 245 / 0.14);
+  --border: oklch(0.68 0.13 245 / 0.4);
+  --foreground: oklch(0.78 0.11 245);
 }