@svadmin/ui 0.25.2 → 0.25.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.25.2",
+  "version": "0.25.3",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [

package/src/components/AdminApp.svelte

@@ -8,7 +8,7 @@
   import { navigate } from '@svadmin/core/router';
   import { currentPath } from '@svadmin/core/router';
   import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query';
-  import { setComponentRegistry, type ComponentRegistry } from '../component-registry.svelte.js';
+  import { setComponentRegistry, getComponentRegistry, type ComponentRegistry } from '../component-registry.svelte.js';
   import Layout from './Layout.svelte';
   import AutoTable from './AutoTable.svelte';
   import AutoForm from './AutoForm.svelte';
@@ -164,19 +164,23 @@
         {/if}
       {:else if route === '/:resource'}
         {#key params.resource}
-          <AutoTable resourceName={params.resource} />
+          {@const Comp = getComponentRegistry().AutoTable}
+          <Comp resourceName={params.resource} />
         {/key}
       {:else if route === '/:resource/create'}
         {#key params.resource}
-          <AutoForm resourceName={params.resource} mode="create" />
+          {@const Comp = getComponentRegistry().AutoForm}
+          <Comp resourceName={params.resource} mode="create" />
         {/key}
       {:else if route === '/:resource/edit/:id'}
         {#key `${params.resource}-${params.id}`}
-          <AutoForm resourceName={params.resource} mode="edit" id={params.id} />
+          {@const Comp = getComponentRegistry().AutoForm}
+          <Comp resourceName={params.resource} mode="edit" id={params.id} />
         {/key}
       {:else if route === '/:resource/show/:id'}
         {#key `${params.resource}-${params.id}`}
-          <ShowPage resourceName={params.resource} id={params.id} />
+          {@const Comp = getComponentRegistry().ShowPage}
+          <Comp resourceName={params.resource} id={params.id} />
         {/key}
       {/if}
       </div>

package/src/components/MarkdownRenderer.svelte

@@ -1,13 +1,21 @@
 <script lang="ts">
-  import { Marked } from "marked";
-  import { markedHighlight } from "marked-highlight";
-  import * as hljsModule from "highlight.js";
-  const hljs = "default" in hljsModule ? hljsModule.default : hljsModule;
-  import "highlight.js/styles/github-dark.css"; // or your preferred theme
-  import DOMPurify from "isomorphic-dompurify";
+  import * as markedPkg from "marked";
+  import * as markedHighlightPkg from "marked-highlight";
+  import * as hljsPkg from "highlight.js";
+  import * as DOMPurifyPkg from "isomorphic-dompurify";
   import { Check, Copy } from "lucide-svelte";
   import { Button } from "./ui/button/index.js";
 
+  const Marked = markedPkg.Marked;
+  const markedHighlight = markedHighlightPkg.markedHighlight;
+  const hljsModule = hljsPkg.default || hljsPkg;
+  const DOMPurify = 'default' in DOMPurifyPkg ? DOMPurifyPkg.default : DOMPurifyPkg;
+
+  // Only safely import css if hljs exists
+  if (hljsModule && Object.keys(hljsModule).length > 0) {
+    import("highlight.js/styles/github-dark.css").catch(() => {});
+  }
+
   interface Props {
     /** The raw markdown string to render */
     content: string;
@@ -19,20 +27,24 @@
 
   let { content, streaming = false, class: className = "" }: Props = $props();
 
-  // Configure marked with syntax highlighting
-  const marked = new Marked(
+  const hasMarkdownDeps = !!(Marked && markedHighlight && DOMPurify && Object.keys(DOMPurify).length > 0);
+
+  // Configure marked with syntax highlighting if available
+  const markedObj = hasMarkdownDeps ? new Marked(
     markedHighlight({
       langPrefix: "hljs language-",
       highlight(code: string, lang: string) {
-        const language = hljs.getLanguage(lang) ? lang : "plaintext";
-        return hljs.highlight(code, { language }).value;
+        const language = hljsModule.getLanguage && hljsModule.getLanguage(lang) ? lang : "plaintext";
+        return hljsModule.highlight ? hljsModule.highlight(code, { language }).value : code;
       },
     }),
-  );
+  ) : null;
 
   // Render HTML safely
   const html = $derived(
-    DOMPurify.sanitize(marked.parse(content || "") as string),
+    hasMarkdownDeps
+      ? DOMPurify.sanitize(markedObj.parse(content || "") as string)
+      : `<div style="white-space: pre-wrap">${String(content || "").replace(/</g, "&lt;").replace(/>/g, "&gt;")}</div>`
   );
 
   // Handle copy code blocks

package/src/components/ui/alert-dialog/alert-dialog-footer.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
+	import type { Snippet } from "svelte";
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn } from "../../../utils.js";
 
-	let { class: className, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+	let { class: className, children, ...restProps }: HTMLAttributes<HTMLDivElement> & { children?: Snippet } = $props();
 </script>
 
-<div class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...restProps}></div>
+<div class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...restProps}>
+	{@render children?.()}
+</div>

package/src/components/ui/alert-dialog/alert-dialog-header.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
+	import type { Snippet } from "svelte";
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn } from "../../../utils.js";
 
-	let { class: className, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+	let { class: className, children, ...restProps }: HTMLAttributes<HTMLDivElement> & { children?: Snippet } = $props();
 </script>
 
-<div class={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...restProps}></div>
+<div class={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...restProps}>
+	{@render children?.()}
+</div>