@svadmin/ui 0.25.2 → 0.26.0

package/package.json

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

package/src/app.css

@@ -34,8 +34,8 @@
     --accent-foreground: oklch(0.2 0.04 265);
     --destructive: oklch(0.577 0.245 27.325);
     --destructive-foreground: oklch(0.985 0 0);
-    --border: oklch(0.912 0.008 264);
-    --input: oklch(0.912 0.008 264);
+    --border: oklch(0.935 0.005 264);
+    --input: oklch(0.935 0.005 264);
     --ring: oklch(0.488 0.243 264.376);
     --chart-1: oklch(0.488 0.243 264.376);
     --chart-2: oklch(0.6 0.118 184.704);
@@ -54,7 +54,7 @@
     --sidebar-primary-foreground: oklch(0.985 0 0);
     --sidebar-accent: oklch(0.94 0.025 264);
     --sidebar-accent-foreground: oklch(0.33 0.17 264);
-    --sidebar-border: oklch(0.912 0.008 264);
+    --sidebar-border: oklch(0.935 0.005 264);
     --sidebar-ring: oklch(0.488 0.243 264.376);
   }
 
@@ -75,8 +75,8 @@
     --accent-foreground: oklch(0.985 0 0);
     --destructive: oklch(0.704 0.191 22.216);
     --destructive-foreground: oklch(0.985 0 0);
-    --border: oklch(0.23 0.025 265);
-    --input: oklch(0.23 0.025 265);
+    --border: oklch(0.27 0.02 265);
+    --input: oklch(0.27 0.02 265);
     --ring: oklch(0.55 0.18 264);
     --chart-1: oklch(0.585 0.233 264);
     --chart-2: oklch(0.696 0.17 162.48);
@@ -95,7 +95,7 @@
     --sidebar-primary-foreground: oklch(0.985 0 0);
     --sidebar-accent: oklch(0.488 0.243 264.376 / 10%);
     --sidebar-accent-foreground: oklch(0.7 0.15 264);
-    --sidebar-border: oklch(0.23 0.025 265);
+    --sidebar-border: oklch(0.27 0.02 265);
     --sidebar-ring: oklch(0.55 0.18 264);
   }
 
@@ -108,6 +108,13 @@
     /* Subtle interaction shadow */
     box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04), 0 0 0 1px rgb(0 0 0 / 0.02);
   }
+
+  /* Stripe-style: form inputs use card background instead of transparent */
+  [data-slot="input"],
+  [data-slot="textarea"],
+  [data-slot="select"] {
+    background-color: var(--card);
+  }
   
   [data-slot="card"] {
     /* Classic Stripe soft shadow: faint ambient + directional drop */

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>