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

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

@@ -0,0 +1,5 @@
+[data-start-seroval-value] {
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+}

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

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

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

@@ -0,0 +1,10 @@
+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" }}>
+      {`${props.value}`}
+    </Text>);
+}
+export function PropertySeparator() {
+    return <Text options={{ size: "xs", weight: "semibold", wrap: "nowrap" }}>:</Text>;
+}

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

@@ -0,0 +1,70 @@
+[data-start-seroval-viewer] {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+}
+
+[data-start-seroval-promise] {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+[data-start-seroval-renderer] {
+  display: flex;
+  border-top: 1px oklch(87% 0.065 274.039) solid;
+  border-bottom: 1px oklch(87% 0.065 274.039) solid;
+}
+
+[data-start-seroval-renderer] > * {
+  border-left: 1px oklch(87% 0.065 274.039) solid;
+}
+
+[data-start-seroval-renderer]:last-child {
+  border-right: 1px oklch(87% 0.065 274.039) solid;
+}
+
+[data-start-seroval-node] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.25rem;
+
+  width: 100%;
+  max-width: 16rem;
+}
+
+[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-node-content] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+[data-start-seroval-value] {
+  color: rgb(249 250 251);
+}
+
+[data-start-seroval-value-wrapper] {
+  display: inline-flex;
+  gap: 0.25rem;
+  align-items: center;
+}
+
+[data-start-seroval-link] {
+  display: inline-flex;
+  gap: 0.25rem;
+  align-items: center;
+}
+
+[data-start-seroval-link] > svg {
+  width: 1rem;
+  height: 1rem;
+}

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

@@ -0,0 +1,6 @@
+import { type JSX } from "solid-js";
+import "./SerovalViewer.css";
+export interface SerovalViewerProps {
+    stream: Request | Response;
+}
+export declare function SerovalViewer(props: SerovalViewerProps): JSX.Element;