@viniaraujo68/plinth 0.3.1 → 0.6.0

package/dist/components/ErrorDisplay.svelte

@@ -1,15 +1,23 @@
 <script lang="ts">
+  import type { Snippet } from "svelte";
+
   interface Props {
     /** Wire the `reset` a `svelte:boundary` hands to its `failed` snippet. Omitted, no button. */
     reset?: () => void;
     title?: string;
     message?: string;
+    eyebrow?: string;
+    retryLabel?: string;
+    icon?: Snippet;
   }
 
   let {
     reset,
     title = "Something went wrong",
     message = "The application ran into an unexpected problem.",
+    eyebrow = "Error",
+    retryLabel = "Try again",
+    icon,
   }: Props = $props();
 </script>
 
@@ -34,26 +42,32 @@ counted once per render. Wire `reportError` on the boundary's `onerror` instead.
   class="flex h-full w-full flex-col items-center justify-center gap-2 p-8 text-center"
   role="alert"
 >
-  <svg
-    class="size-12 text-base-content/40"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="1.5"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    aria-hidden="true"
-  >
-    <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" />
-    <path d="M12 9v4" />
-    <path d="M12 17h.01" />
-  </svg>
-  <p class="text-xs font-medium tracking-widest text-base-content/55 uppercase">Error</p>
+  {#if icon}
+    {@render icon()}
+  {:else}
+    <svg
+      class="size-12 text-base-content/40"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" />
+      <path d="M12 9v4" />
+      <path d="M12 17h.01" />
+    </svg>
+  {/if}
+  {#if eyebrow}
+    <p class="text-xs font-medium tracking-widest text-base-content/55 uppercase">{eyebrow}</p>
+  {/if}
   <p class="text-xl font-semibold">{title}</p>
   <p class="max-w-md text-sm text-base-content/60">{message}</p>
   {#if reset}
     <div class="mt-4">
-      <button type="button" class="btn btn-primary" onclick={reset}>Try again</button>
+      <button type="button" class="btn btn-primary" onclick={reset}>{retryLabel}</button>
     </div>
   {/if}
 </div>

package/dist/components/ErrorDisplay.svelte.d.ts

@@ -1,8 +1,12 @@
+import type { Snippet } from "svelte";
 interface Props {
     /** Wire the `reset` a `svelte:boundary` hands to its `failed` snippet. Omitted, no button. */
     reset?: () => void;
     title?: string;
     message?: string;
+    eyebrow?: string;
+    retryLabel?: string;
+    icon?: Snippet;
 }
 /**
  * Calm in-place fallback for a crashed subtree: it says what happened and offers the way out.

package/dist/components/JsonView.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import JsonViewFrame, {
+    type JsonViewProps,
+    type JsonViewRevealTarget,
+  } from "./JsonViewFrame.svelte";
+
+  const props: JsonViewProps = $props();
+
+  let scroller = $state<HTMLDivElement>();
+
+  const reveal = ({ line }: JsonViewRevealTarget) => {
+    const row = scroller?.querySelector<HTMLElement>(`[data-line="${line}"]`);
+    const target = row?.querySelector<HTMLElement>("[data-active]") ?? row;
+    target?.scrollIntoView({ block: "nearest", inline: "nearest" });
+  };
+</script>
+
+<JsonViewFrame {...props} {reveal}>
+  {#snippet viewport({ visible, line, rowId, widthCh })}
+    <div bind:this={scroller} class="plinth-json-scroller">
+      <div class="plinth-json-lines" style:min-width="max(100%, {widthCh}ch)">
+        {#each visible as index (rowId(index))}
+          {@render line(index)}
+        {/each}
+      </div>
+    </div>
+  {/snippet}
+</JsonViewFrame>
+
+<style>
+  .plinth-json-scroller {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    padding-block: 0.25rem;
+  }
+
+  .plinth-json-lines {
+    width: max-content;
+    min-width: 100%;
+    padding-inline-end: 1ch;
+  }
+</style>

package/dist/components/JsonView.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type JsonViewProps } from "./JsonViewFrame.svelte";
+declare const JsonView: import("svelte").Component<JsonViewProps, {}, "">;
+type JsonView = ReturnType<typeof JsonView>;
+export default JsonView;