@solidjs/start 2.0.0-beta.9 → 2.0.0-rc.10

package/dist/shared/{dev-overlay/DevOverlayDialog.jsx → dev-toolbar/error-viewer/index.jsx}

@@ -2,14 +2,12 @@
 import ErrorStackParser from "error-stack-parser";
 import * as htmlToImage from "html-to-image";
 import { createMemo, createSignal, ErrorBoundary, For, Show, Suspense } from "solid-js";
-import { Portal } from "solid-js/web";
-// @ts-ignore - terracotta module resolution issue with NodeNext
-import { Dialog, DialogOverlay, DialogPanel, Select, SelectOption } from "terracotta";
-import info from "../../../package.json" with { type: "json" };
+import IconButton from "../../ui/IconButton.jsx";
+import { Select, SelectOption } from "../../ui/Select.jsx";
+import { ArrowLeftIcon, ArrowRightIcon, CameraIcon, DiscordIcon, GithubIcon, RefreshIcon, ViewCompiledIcon, ViewOriginalIcon, } from "../icons.jsx";
 import { CodeView } from "./CodeView.jsx";
-import { createStackFrame } from "./createStackFrame.js";
+import { createStackFrame } from "./create-stack-frame.js";
 import download from "./download.js";
-import { ArrowLeftIcon, ArrowRightIcon, CameraIcon, DiscordIcon, GithubIcon, RefreshIcon, SolidStartIcon, ViewCompiledIcon, ViewOriginalIcon, } from "./icons.jsx";
 import "./styles.css";
 export function classNames(...classes) {
     return classes.filter(Boolean).join(" ");
@@ -25,9 +23,9 @@ function ErrorInfo(props) {
         }
         return { message: e.toString() };
     });
-    return (<span data-start-dev-overlay-error-info>
-      <span data-start-dev-overlay-error-info-name>{error().name}</span>
-      <span data-start-dev-overlay-error-info-message>{error().message}</span>
+    return (<span data-start-error-viewer-error-info>
+      <span data-start-error-viewer-error-info-name>{error().name}</span>
+      <span data-start-error-viewer-error-info-message>{error().message}</span>
     </span>);
 }
 function getFileName(source) {
@@ -46,23 +44,23 @@ function getFilePath(source) {
     return `${getFileName(source.source)}${line}${column}`;
 }
 function CodeFallback() {
-    return (<div data-start-dev-overlay-stack-frames-code-fallback>
+    return (<div data-start-error-viewer-stack-frames-code-fallback>
       <span>Source not available.</span>
     </div>);
 }
 function StackFramesContent(props) {
     const stackframes = ErrorStackParser.parse(props.error);
     const [selectedFrame, setSelectedFrame] = createSignal(stackframes[0]);
-    return (<div data-start-dev-overlay-stack-frames-content>
-      <div data-start-dev-overlay-stack-frames-code>
+    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-dev-overlay-stack-frames-code-source>{source.source}</span>
-                      <div data-start-dev-overlay-stack-frames-code-container>
+                      <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>
                     </>)}
@@ -71,13 +69,13 @@ function StackFramesContent(props) {
         })()}
         </ErrorBoundary>
       </div>
-      <Select data-start-dev-overlay-stack-frames value={selectedFrame()} onChange={setSelectedFrame}>
+      <Select data-start-error-viewer-stack-frames value={selectedFrame()} onChange={setSelectedFrame}>
         <For each={stackframes}>
-          {current => (<ErrorBoundary fallback={<div data-start-dev-overlay-stack-frame>
-                  <span data-start-dev-overlay-stack-frame-function>
+          {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-dev-overlay-stack-frame-file>
+                  <span data-start-error-viewer-stack-frame-file>
                     {getFilePath({
                     source: current.getFileName(),
                     content: "",
@@ -86,16 +84,18 @@ function StackFramesContent(props) {
                     name: current.getFunctionName(),
                 })}
                   </span>
-                </div>}>
+                </SelectOption>}>
               {(() => {
                 const data = createStackFrame(current, () => props.isCompiled);
                 return (<Suspense>
                     <Show when={data()} keyed>
-                      {source => (<SelectOption data-start-dev-overlay-stack-frame value={current}>
-                          <span data-start-dev-overlay-stack-frame-function>
+                      {source => (<SelectOption data-start-error-viewer-stack-frame value={current}>
+                          <span data-start-error-viewer-stack-frame-function>
                             {source.name ?? "<anonymous>"}
                           </span>
-                          <span data-start-dev-overlay-stack-frame-file>{getFilePath(source)}</span>
+                          <span data-start-error-viewer-stack-frame-file>
+                            {getFilePath(source)}
+                          </span>
                         </SelectOption>)}
                     </Show>
                   </Suspense>);
@@ -112,7 +112,7 @@ function StackFrames(props) {
 }
 const ISSUE_THREAD = "https://github.com/solidjs/solid-start/issues/new";
 const DISCORD_INVITE = "https://discord.com/invite/solidjs";
-export default function DevOverlayDialog(props) {
+export default function ErrorViewer(props) {
     const [currentPage, setCurrentPage] = createSignal(1);
     const [isCompiled, setIsCompiled] = createSignal(false);
     const length = createMemo(() => props.errors.length);
@@ -164,63 +164,52 @@ export default function DevOverlayDialog(props) {
     function redirectToDiscord() {
         window.open(DISCORD_INVITE, "_blank").focus();
     }
-    return (<Portal>
-      <Dialog data-start-dev-overlay isOpen>
-        <div>
-          <DialogOverlay data-start-dev-overlay-background/>
-          <DialogPanel ref={setPanel} data-start-dev-overlay-panel-container>
-            <div data-start-dev-overlay-panel>
-              <div data-start-dev-overlay-navbar>
-                <div data-start-dev-overlay-navbar-left>
-                  <div data-start-dev-overlay-version>
-                    <div>
-                      <SolidStartIcon title="Solid Start Version"/>
-                    </div>
-                    <span>{info.version}</span>
+    return (<Show when={props.show}>
+      <div data-start-dev-toolbar-panel>
+        <div ref={setPanel} data-start-error-viewer>
+          <div data-start-error-viewer-navbar>
+            <div data-start-error-viewer-navbar-left>
+              <Show when={props.errors.length > 1}>
+                <div data-start-error-viewer-pagination>
+                  <IconButton data-start-error-viewer-button onClick={goPrev} type="button">
+                    <ArrowLeftIcon title="Go Previous"/>
+                  </IconButton>
+                  <div data-start-error-viewer-page-counter>
+                    {`${truncated()} of ${props.errors.length}`}
                   </div>
-                  <Show when={props.errors.length > 1}>
-                    <div data-start-dev-overlay-pagination>
-                      <button data-start-dev-overlay-button onClick={goPrev} type="button">
-                        <ArrowLeftIcon title="Go Previous"/>
-                      </button>
-                      <div data-start-dev-overlay-page-counter>
-                        {`${truncated()} of ${props.errors.length}`}
-                      </div>
-                      <button data-start-dev-overlay-button onClick={goNext} type="button">
-                        <ArrowRightIcon title="Go Next"/>
-                      </button>
-                    </div>
-                  </Show>
-                </div>
-                <div data-start-dev-overlay-controls>
-                  <button data-start-dev-overlay-button onClick={redirectToGithub} type="button">
-                    <GithubIcon title="Create an issue thread on Github"/>
-                  </button>
-                  <button data-start-dev-overlay-button onClick={redirectToDiscord} type="button">
-                    <DiscordIcon title="Join our Discord Channel"/>
-                  </button>
-                  <button data-start-dev-overlay-button onClick={downloadScreenshot} type="button">
-                    <CameraIcon title="Capture Error Overlay"/>
-                  </button>
-                  <button data-start-dev-overlay-button onClick={toggleIsCompiled} type="button">
-                    <Show when={isCompiled()} fallback={<ViewOriginalIcon title="View Original Source"/>}>
-                      <ViewCompiledIcon title="View Compiled Source"/>
-                    </Show>
-                  </button>
-                  <button data-start-dev-overlay-button onClick={props.resetError} type="button">
-                    <RefreshIcon title="Reset Error"/>
-                  </button>
+                  <IconButton data-start-error-viewer-button onClick={goNext} type="button">
+                    <ArrowRightIcon title="Go Next"/>
+                  </IconButton>
                 </div>
-              </div>
-              <Show when={props.errors[truncated() - 1]} keyed>
-                {current => (<div data-start-dev-overlay-content>
-                    <ErrorInfo error={current}/>
-                    <StackFrames error={current} isCompiled={isCompiled()}/>
-                  </div>)}
               </Show>
             </div>
-          </DialogPanel>
+            <div data-start-error-viewer-controls>
+              <IconButton data-start-error-viewer-button onClick={redirectToGithub} type="button">
+                <GithubIcon title="Create an issue thread on Github"/>
+              </IconButton>
+              <IconButton data-start-error-viewer-button onClick={redirectToDiscord} type="button">
+                <DiscordIcon title="Join our Discord Channel"/>
+              </IconButton>
+              <IconButton data-start-error-viewer-button onClick={downloadScreenshot} type="button">
+                <CameraIcon title="Capture Error Overlay"/>
+              </IconButton>
+              <IconButton data-start-error-viewer-button onClick={toggleIsCompiled} type="button">
+                <Show when={isCompiled()} fallback={<ViewOriginalIcon title="View Original Source"/>}>
+                  <ViewCompiledIcon title="View Compiled Source"/>
+                </Show>
+              </IconButton>
+              <IconButton data-start-error-viewer-button onClick={props.resetError} type="button">
+                <RefreshIcon title="Reset Error"/>
+              </IconButton>
+            </div>
+          </div>
+          <Show when={props.errors[truncated() - 1]} keyed>
+            {current => (<div data-start-error-viewer-content>
+                <ErrorInfo error={current}/>
+                <StackFrames error={current} isCompiled={isCompiled()}/>
+              </div>)}
+          </Show>
         </div>
-      </Dialog>
-    </Portal>);
+      </div>
+    </Show>);
 }

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

@@ -0,0 +1,224 @@
+[data-start-error-viewer] {
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+}
+
+[data-start-error-viewer-navbar] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+[data-start-error-viewer-pagination] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border-radius: 9999px;
+  color: rgb(249 250 251);
+  background-color: rgb(17 24 39);
+  padding: 0.25rem;
+}
+
+[data-start-error-viewer-button] {
+  /* empty */
+}
+
+[data-start-error-viewer-button]:hover {
+  color: rgb(229 231 235);
+  background-color: rgb(55 65 81);
+}
+
+[data-start-error-viewer-button]:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  outline-color: rgb(229 231 235);
+}
+
+[data-start-error-viewer-button]:focus-visible {
+  box-shadow: 0 0 0 calc(3px) rgb(17 24 39 / 0.75);
+}
+
+[data-start-error-viewer-button]:active {
+  color: rgb(243 244 246);
+  background-color: rgb(31 41 55);
+}
+
+[data-start-error-viewer-button] > svg {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+[data-start-error-viewer-page-counter] {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+}
+
+[data-start-error-viewer-navbar-left] {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+}
+
+[data-start-error-viewer-controls] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  border-radius: 9999px;
+  color: rgb(249 250 251);
+  padding: 0.25rem;
+}
+
+[data-start-error-viewer-content] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1rem;
+
+  border-top-width: 1px;
+  border-top-style: solid;
+  border-top-color: oklch(87% 0.065 274.039);
+}
+
+[data-start-error-viewer-error-info] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+[data-start-error-viewer-error-info-name] {
+  font-weight: 700;
+  color: rgb(249 250 251);
+}
+
+[data-start-error-viewer-error-info-message] {
+  font-size: 1.5rem;
+  line-height: 2rem;
+  color: rgb(239 68 68);
+  font-weight: 700;
+}
+
+[data-start-error-viewer-stack-frames-content] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+[data-start-error-viewer-stack-frames] {
+  flex: 1 1 0%;
+  max-height: 16rem;
+  overflow-y: auto;
+}
+
+[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);
+  cursor: default;
+  user-select: none;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  outline: none;
+}
+
+[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);
+}
+
+[data-start-error-viewer-stack-frame-function] {
+  font-weight: 700;
+}
+
+[data-start-error-viewer-stack-frame-file] {
+  white-space: nowrap;
+  font-size: 0.75rem;
+  /* 12px */
+  line-height: 1rem;
+  /* 16px */
+}
+
+[data-start-error-viewer-stack-frames-code] {
+  padding: 0.5rem 1rem;
+  gap: 0.25rem;
+  flex: 1 1 0%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.5rem;
+  background-color: rgb(17 24 39);
+}
+
+[data-start-error-viewer-stack-frames-code-fallback] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgb(249 250 251);
+  min-height: 16rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+[data-start-error-viewer-stack-frames-code-source] {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: rgb(249 250 251);
+}
+
+[data-start-error-viewer-stack-frames-code-container] {
+  width: 100%;
+  overflow: hidden;
+  min-width: 100%;
+  max-height: 16rem;
+  border-top-width: 1px;
+  border-top-style: solid;
+  border-top-color: oklch(87% 0.065 274.039);
+}
+
+[data-start-error-viewer-code-view] {
+  overflow: auto;
+  min-width: 100%;
+}
+
+[data-start-error-viewer-code-view] > .shiki {
+  float: left;
+  min-width: 100%;
+  overflow-x: auto;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  counter-reset: step;
+  counter-increment: step calc(var(--error-viewer-code-view-start, 1) - 1);
+  background-color: transparent !important;
+}
+
+[data-start-error-viewer-code-view] > .shiki .line::before {
+  content: counter(step);
+  counter-increment: step;
+  width: 1rem;
+  margin-right: 1.5rem;
+  display: inline-block;
+  text-align: right;
+  color: rgba(115, 138, 148, 0.4);
+}
+
+[data-start-error-viewer-error-line] {
+  background-color: rgba(239, 68, 68, 0.4);
+}

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

@@ -0,0 +1,4 @@
+[data-start-blob-viewer] svg {
+  width: 1rem;
+  height: 1rem;
+}

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

@@ -0,0 +1,6 @@
+import { type JSX } from "solid-js";
+import "./BlobViewer.css";
+export interface BlobViewerProps {
+    source: Blob | File | Promise<Blob | File>;
+}
+export declare function BlobViewer(props: BlobViewerProps): JSX.Element;

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

@@ -0,0 +1,37 @@
+import { createMemo, createResource, onCleanup, Show, Suspense } from "solid-js";
+import { Badge } from "../../ui/Badge.jsx";
+import Button from "../../ui/Button.jsx";
+import "./BlobViewer.css";
+function DocumentIcon(props) {
+    return (<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
+      <title>{props.title}</title>
+      <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 BlobViewerInner(props) {
+    const fileURL = createMemo(() => URL.createObjectURL(props.source));
+    onCleanup(() => {
+        URL.revokeObjectURL(fileURL());
+    });
+    function openFileInNewTab() {
+        const link = document.createElement("a");
+        link.href = fileURL();
+        link.target = "_blank"; // Open in a new tab
+        link.style.display = "none"; // Hide the link
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    }
+    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>)}
+    </Button>);
+}
+export function BlobViewer(props) {
+    const [data] = createResource(() => props.source);
+    return (<Suspense>
+      <Show when={data()}>{current => <BlobViewerInner source={current()}/>}</Show>
+    </Suspense>);
+}

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

@@ -0,0 +1,5 @@
+import { type JSX } from "solid-js";
+export interface FormDataViewerProps {
+    source: FormData | Promise<FormData>;
+}
+export declare function FormDataViewer(props: FormDataViewerProps): JSX.Element;

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

@@ -0,0 +1,23 @@
+import { createResource, For, Show, Suspense } from "solid-js";
+import { Section } from "../../ui/Section.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>
+        <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}/>)}
+            </div>)}
+        </For>
+      </div>
+    </Section>);
+}
+export function FormDataViewer(props) {
+    const [data] = createResource(() => props.source);
+    return (<Suspense>
+      <Show when={data()}>{current => <FormDataViewerInner source={current()}/>}</Show>
+    </Suspense>);
+}

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

@@ -0,0 +1,8 @@
+[data-start-headers-viewer] {
+  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.d.ts

@@ -0,0 +1,6 @@
+import "./HeadersViewer.css";
+interface HeadersViewerProps {
+    headers: Headers;
+}
+export declare function HeadersViewer(props: HeadersViewerProps): import("solid-js").JSX.Element;
+export {};

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

@@ -0,0 +1,15 @@
+import { For } from "solid-js";
+import { PropertySeparator, SerovalValue } from "./SerovalValue.jsx";
+import "./HeadersViewer.css";
+import { Text } from "../../ui/Text.jsx";
+export function HeadersViewer(props) {
+    return (<div data-start-headers-viewer data-start-properties>
+      <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}/>
+          </div>)}
+      </For>
+    </div>);
+}

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

@@ -0,0 +1,34 @@
+[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;
+}
+
+[data-start-hex-row] {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+[data-start-hex-text] {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+}

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

@@ -0,0 +1,11 @@
+import { type JSX } from "solid-js";
+import "./HexViewer.css";
+interface HexViewerInnerProps {
+    bytes: Uint8Array;
+}
+export declare function HexViewerInner(props: HexViewerInnerProps): JSX.Element;
+export interface HexViewerProps {
+    bytes: Uint8Array | Promise<Uint8Array>;
+}
+export declare function HexViewer(props: HexViewerProps): JSX.Element;
+export {};

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

@@ -0,0 +1,70 @@
+import { createMemo, createResource, For, Show, Suspense } from "solid-js";
+import { Text } from "../../ui/Text.jsx";
+import "./HexViewer.css";
+function toHex(num, digits = 2) {
+    return num.toString(16).padStart(digits, "0").toUpperCase();
+}
+function HexChunk(props) {
+    const content = createMemo(() => {
+        const byte1 = props.bytes[0] || 0;
+        const byte2 = props.bytes[1] || 0;
+        const byte3 = props.bytes[2] || 0;
+        const byte4 = props.bytes[3] || 0;
+        return `${toHex(byte1)} ${toHex(byte2)} ${toHex(byte3)} ${toHex(byte4)}`;
+    });
+    return (<Text data-start-hex-chunk options={{ size: "xs", weight: "bold", wrap: "nowrap" }}>
+      {content()}
+    </Text>);
+}
+function HexRow(props) {
+    const chunk1 = createMemo(() => props.bytes.subarray(0, 4));
+    const chunk2 = createMemo(() => props.bytes.subarray(4, 8));
+    const chunk3 = createMemo(() => props.bytes.subarray(8, 12));
+    const chunk4 = createMemo(() => props.bytes.subarray(12, 16));
+    return (<div data-start-hex-row>
+      <HexChunk bytes={chunk1()}/>
+      <HexChunk bytes={chunk2()}/>
+      <HexChunk bytes={chunk3()}/>
+      <HexChunk bytes={chunk4()}/>
+    </div>);
+}
+function replaceString(string) {
+    const result = string.codePointAt(0);
+    if (result == null) {
+        return string;
+    }
+    return String.fromCodePoint(result + 0x2400);
+}
+function HexText(props) {
+    const text = createMemo(() => {
+        const decoder = new TextDecoder();
+        const result = decoder.decode(props.bytes).replaceAll(/[\x00-\x1F]/g, replaceString);
+        return result;
+    });
+    return (<div data-start-hex-text>
+      <Text options={{ size: "xs", weight: "bold", wrap: "nowrap" }}>{text()}</Text>
+    </div>);
+}
+export function HexViewerInner(props) {
+    const rows = createMemo(() => {
+        const arrays = [];
+        for (let i = 0, len = props.bytes.length; i < len; i += 16) {
+            arrays.push(props.bytes.subarray(i, i + 16));
+        }
+        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>
+    </div>);
+}
+export function HexViewer(props) {
+    const [data] = createResource(() => props.bytes);
+    return (<Suspense>
+      <Show when={data()}>{current => <HexViewerInner bytes={current()}/>}</Show>
+    </Suspense>);
+}