@svadmin/ui 0.14.0 → 0.15.0

package/package.json

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

package/src/app.css

@@ -154,7 +154,16 @@ button:active:not(:disabled) {
   border-color: var(--color-primary);
 }
 
-/* Scrollbar styling */
+/* Base scrollbar styling (Firefox + Standard) */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: oklch(0.8 0 0) transparent;
+}
+.dark * {
+  scrollbar-color: oklch(0.35 0 0) transparent;
+}
+
+/* Scrollbar styling (Webkit) */
 ::-webkit-scrollbar { width: 6px; height: 6px; }
 ::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb { background: oklch(0.8 0 0); border-radius: 3px; }
@@ -166,9 +175,11 @@ button:active:not(:disabled) {
 [data-slot="card"] {
   transition: box-shadow 0.2s ease, transform 0.2s ease;
 }
-[data-slot="card"]:hover {
-  box-shadow: 0 4px 12px -2px rgb(0 0 0 / 0.08), 0 8px 24px -6px rgb(0 0 0 / 0.04);
-  transform: translateY(-1px);
+@media (hover: hover) {
+  [data-slot="card"]:hover {
+    box-shadow: 0 4px 12px -2px rgb(0 0 0 / 0.08), 0 8px 24px -6px rgb(0 0 0 / 0.04);
+    transform: translateY(-1px);
+  }
 }
 
 /* ② Table Row Hover — primary color tint instead of plain gray */
@@ -302,6 +313,13 @@ button:active:not(:disabled) {
   }
 }
 
+/* ⑫b Safe Area Inset — iPhone notch / Home Bar support */
+@supports (padding-bottom: env(safe-area-inset-bottom)) {
+  main {
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}
+
 /* ⑫ Optimistic Delete — row fade-out visual feedback */
 @keyframes svadmin-row-delete {
   from {
@@ -372,6 +390,25 @@ main {
   margin-right: 4rem;
 }
 
+/* ⑰ Accessibility Minimum Touch Target — Apple HIG 44px minimum */
+@media (max-width: 640px) and (pointer: coarse) {
+  [data-slot="button"] {
+    position: relative;
+  }
+  [data-slot="button"]::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    min-width: 44px;
+    min-height: 44px;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+  }
+}
+
 /* Tailwind CSS v4 — Map design tokens to utility classes */
 @theme {
   --color-background: var(--background);

package/src/components/AutoForm.svelte

@@ -256,7 +256,7 @@
                 <Card.Title class="text-lg">{group.name}</Card.Title>
               </Card.Header>
             {/if}
-            <Card.Content class="space-y-5">
+            <Card.Content class="space-y-5 px-4 sm:px-6 pb-4 sm:pb-6 pt-0">
               {#each group.fields as field (field.key)}
                 <div class:border-destructive={!!fieldErrors[field.key]}>
                   {#if fieldRenderer}
@@ -278,7 +278,7 @@
         {/each}
       {:else}
         <Card.Root>
-          <Card.Content class="space-y-5">
+          <Card.Content class="space-y-5 px-4 sm:px-6 pb-4 sm:pb-6 pt-0">
             {#each formFields as field (field.key)}
               <div class:border-destructive={!!fieldErrors[field.key]}>
                 {#if fieldRenderer}

package/src/components/AutoTable.svelte

@@ -335,9 +335,9 @@
 
 <div class="space-y-4">
   <!-- Header -->
-  <div class="flex items-center justify-between">
-    <h1 class="text-xl font-semibold text-foreground">{resource.label}</h1>
-    <div class="flex items-center gap-2">
+  <div class="flex flex-wrap items-center justify-between gap-2">
+    <h1 class="text-lg sm:text-xl font-semibold text-foreground">{resource.label}</h1>
+    <div class="flex flex-wrap items-center gap-2">
       {#if canExport}
         <Button variant="outline" size="sm" onclick={exportCSV}>
           <Download class="h-4 w-4" data-icon="inline-start" /> {t('common.export')}
@@ -723,11 +723,11 @@
 
   <!-- Pagination (shadcn) -->
   {#if totalPages > 0}
-  <div class="flex items-center justify-between text-sm text-muted-foreground">
+  <div class="flex flex-col sm:flex-row items-center justify-between gap-2 text-sm text-muted-foreground">
     <div class="flex items-center gap-2">
       <span>{t('common.total', { total: query.data?.total ?? 0 })}</span>
       <Select
-        class="h-8 w-auto text-xs"
+        class="hidden sm:inline-block h-8 w-auto text-xs"
         value={String(pagination.pageSize ?? 10)}
         onchange={(e: Event) => {
           const size = Number((e.target as HTMLSelectElement).value);

package/src/components/ChatDialog.svelte

@@ -260,7 +260,7 @@
         tooltip={t('chat.title') || 'AI Assistant'}
         variant="default"
         size="icon"
-        class="fixed bottom-6 right-6 z-[9998] h-12 w-12 rounded-full shadow-xl hover:shadow-2xl hover:scale-110 transition-all bg-primary text-primary-foreground"
+        class="fixed bottom-4 right-4 sm:bottom-6 sm:right-6 z-[9998] h-12 w-12 rounded-full shadow-xl hover:shadow-2xl hover:scale-110 transition-all bg-primary text-primary-foreground"
         onclick={() => { open = true; minimized = false; }}
       >
         <MessageCircle class="h-5 w-5" />
@@ -276,9 +276,11 @@
   <!-- Chat Panel -->
   {#if open}
     <div
-      class="fixed bottom-6 right-6 z-[9998] flex flex-col rounded-2xl border bg-card shadow-2xl overflow-hidden"
-      class:w-[400px]={!minimized}
-      class:h-[560px]={!minimized}
+      class="fixed z-[9998] flex flex-col rounded-2xl border bg-card shadow-2xl overflow-hidden bottom-3 right-3 sm:bottom-6 sm:right-6"
+      class:w-[calc(100vw-1.5rem)]={!minimized}
+      class:sm:w-[400px]={!minimized}
+      class:h-[calc(100dvh-6rem)]={!minimized}
+      class:sm:h-[560px]={!minimized}
       class:w-[280px]={minimized}
       class:h-auto={minimized}
       transition:fly={{ y: 300, duration: 250 }}

package/src/components/Layout.svelte

@@ -62,12 +62,42 @@
   }
 
   let collapsed = $state(false);
+
+  // Swipe gesture for mobile menu
+  let touchStartX = $state(0);
+  let touchEndX = $state(0);
+
+  function handleTouchStart(e: TouchEvent) {
+    if (e.touches.length === 1) {
+      touchStartX = e.touches[0].clientX;
+      touchEndX = e.touches[0].clientX;
+    }
+  }
+
+  function handleTouchMove(e: TouchEvent) {
+    if (e.touches.length === 1) {
+      touchEndX = e.touches[0].clientX;
+    }
+  }
+
+  function handleTouchEnd() {
+    // Only trigger swipe-to-open if starting near the left edge (e.g., within 30px)
+    // and swiping right by at least 50px
+    if (touchStartX < 30 && touchEndX - touchStartX > 50) {
+      mobileMenuOpen = true;
+    }
+  }
 </script>
 
-<svelte:window onkeydown={(e) => {
-  if ((e.ctrlKey || e.metaKey) && e.key === 'k') { e.preventDefault(); commandOpen = true; }
-  if (e.key === '?' && !['INPUT', 'TEXTAREA', 'SELECT'].includes((e.target as HTMLElement)?.tagName)) { e.preventDefault(); shortcutsOpen = true; }
-}} />
+<svelte:window 
+  onkeydown={(e) => {
+    if ((e.ctrlKey || e.metaKey) && e.key === 'k') { e.preventDefault(); commandOpen = true; }
+    if (e.key === '?' && !['INPUT', 'TEXTAREA', 'SELECT'].includes((e.target as HTMLElement)?.tagName)) { e.preventDefault(); shortcutsOpen = true; }
+  }}
+  ontouchstart={handleTouchStart}
+  ontouchmove={handleTouchMove}
+  ontouchend={handleTouchEnd}
+/>
 {#if loading}
   <div class="flex h-screen" in:fade={{ duration: 150 }}>
     <div class="hidden md:block w-64 bg-sidebar/80 p-4 space-y-4">

package/src/components/MarkdownRenderer.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
   // @ts-expect-error - missing types
-  import { Marked } from 'marked';
+  import { Marked } from "marked";
   // @ts-expect-error - missing types
-  import { markedHighlight } from 'marked-highlight';
+  import { markedHighlight } from "marked-highlight";
   // @ts-expect-error - missing types
-  import hljs from 'highlight.js';
-  import 'highlight.js/styles/github-dark.css'; // or your preferred theme
+  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
   // @ts-expect-error - missing types
-  import DOMPurify from 'isomorphic-dompurify';
-  import { Check, Copy } from 'lucide-svelte';
-  import { Button } from './ui/button/index.js';
+  import DOMPurify from "isomorphic-dompurify";
+  import { Check, Copy } from "lucide-svelte";
+  import { Button } from "./ui/button/index.js";
 
   interface Props {
     /** The raw markdown string to render */
@@ -20,39 +21,41 @@
     class?: string;
   }
 
-  let { content, streaming = false, class: className = '' }: Props = $props();
+  let { content, streaming = false, class: className = "" }: Props = $props();
 
   // Configure marked with syntax highlighting
   const marked = new Marked(
     markedHighlight({
-      langPrefix: 'hljs language-',
+      langPrefix: "hljs language-",
       highlight(code: string, lang: string) {
-        const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+        const language = hljs.getLanguage(lang) ? lang : "plaintext";
         return hljs.highlight(code, { language }).value;
-      }
-    })
+      },
+    }),
   );
 
   // Render HTML safely
-  const html = $derived(DOMPurify.sanitize(marked.parse(content || '') as string));
+  const html = $derived(
+    DOMPurify.sanitize(marked.parse(content || "") as string),
+  );
 
   // Handle copy code blocks
   let copiedBlock = $state<string | null>(null);
 
   function handleCopy(event: MouseEvent) {
     const target = event.target as HTMLElement;
-    const button = target.closest('.copy-btn');
+    const button = target.closest(".copy-btn");
     if (!button) return;
 
-    const pre = button.closest('.code-block-wrapper')?.querySelector('pre');
+    const pre = button.closest(".code-block-wrapper")?.querySelector("pre");
     if (!pre) return;
 
-    const code = pre.textContent || '';
+    const code = pre.textContent || "";
     navigator.clipboard.writeText(code);
 
     const id = Math.random().toString(36);
     copiedBlock = id;
-    button.setAttribute('data-copied-id', id);
+    button.setAttribute("data-copied-id", id);
 
     setTimeout(() => {
       if (copiedBlock === id) copiedBlock = null;
@@ -65,48 +68,51 @@
     return {
       update(newHtml: string) {
         // Find all pre > code blocks that don't have wrappers yet
-        const pres = node.querySelectorAll('pre:not(.enhanced)');
-        pres.forEach(pre => {
-          pre.classList.add('enhanced');
-          const wrapper = document.createElement('div');
-          wrapper.className = 'code-block-wrapper group relative my-4 rounded-md bg-foreground/95';
-          
-          const header = document.createElement('div');
-          header.className = 'flex items-center justify-between px-4 py-2 text-xs text-zinc-400 border-b border-zinc-800';
-          
-          const lang = Array.from(pre.querySelector('code')?.classList || []).find(c => c.startsWith('language-'))?.replace('language-', '') || 'Code';
+        const pres = node.querySelectorAll("pre:not(.enhanced)");
+        pres.forEach((pre) => {
+          pre.classList.add("enhanced");
+          const wrapper = document.createElement("div");
+          wrapper.className =
+            "code-block-wrapper group relative my-4 rounded-md bg-foreground/95";
+
+          const header = document.createElement("div");
+          header.className =
+            "flex items-center justify-between px-4 py-2 text-xs text-zinc-400 border-b border-zinc-800";
+
+          const lang =
+            Array.from(pre.querySelector("code")?.classList || [])
+              .find((c) => c.startsWith("language-"))
+              ?.replace("language-", "") || "Code";
           header.innerHTML = `
             <span>${lang}</span>
             <button class="copy-btn hover:text-white transition-colors flex items-center gap-1">
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
             </button>
           `;
-          
+
           pre.replaceWith(wrapper);
           wrapper.appendChild(header);
-          
-          const scrollContainer = document.createElement('div');
-          scrollContainer.className = 'overflow-x-auto p-4';
+
+          const scrollContainer = document.createElement("div");
+          scrollContainer.className = "overflow-x-auto p-4";
           scrollContainer.appendChild(pre);
           wrapper.appendChild(scrollContainer);
         });
 
         // Add event listener for copy buttons
-        node.addEventListener('click', handleCopy);
+        node.addEventListener("click", handleCopy);
       },
       destroy() {
-        node.removeEventListener('click', handleCopy);
-      }
+        node.removeEventListener("click", handleCopy);
+      },
     };
   }
 </script>
 
 <div 
-  class="prose prose-sm dark:prose-invert max-w-none break-words {className}"
+  class="prose prose-sm dark:prose-invert max-w-none wrap-break-word {className}"
   class:streaming={streaming}
   use:enhanceCodeBlocks={html}
 >
   {@html html}
 </div>
-
-

package/src/components/ShowPage.svelte

@@ -39,9 +39,9 @@
     <Card.Root>
       <Card.Content class="divide-y divide-border p-0">
         {#each showFields.slice(0, 6) as _}
-          <div class="flex px-6 py-4">
-            <Skeleton class="h-4 w-1/4" />
-            <Skeleton class="h-4 w-2/5 ml-auto" />
+          <div class="flex flex-col sm:flex-row px-4 sm:px-6 py-3 sm:py-4">
+            <Skeleton class="h-4 w-1/2 sm:w-1/4" />
+            <Skeleton class="h-4 w-3/4 sm:w-2/5 mt-1 sm:mt-0 sm:ml-auto" />
           </div>
         {/each}
       </Card.Content>
@@ -52,9 +52,9 @@
         {#each showFields as field}
           {@const value = (query.query.data!.data as Record<string, unknown>)[field.key]}
           {@const DisplayComponent = getDisplayComponent(field.type)}
-          <div class="flex px-6 py-4">
-            <div class="w-1/3 text-sm font-medium text-muted-foreground">{field.label}</div>
-            <div class="w-2/3 text-sm text-foreground">
+          <div class="flex flex-col sm:flex-row px-4 sm:px-6 py-3 sm:py-4">
+            <div class="sm:w-1/3 text-xs sm:text-sm font-medium text-muted-foreground mb-1 sm:mb-0">{field.label}</div>
+            <div class="sm:w-2/3 text-sm text-foreground">
               {#if DisplayComponent && value != null}
                 <DisplayComponent
                   {value}

package/src/components/TooltipButton.svelte

@@ -4,16 +4,13 @@
   import type { Snippet } from 'svelte';
   import type { HTMLButtonAttributes } from 'svelte/elements';
 
-  interface Props {
+  interface Props extends Omit<HTMLButtonAttributes, 'class' | 'children'> {
     tooltip: string;
     variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
     size?: 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm';
     side?: 'top' | 'right' | 'bottom' | 'left';
     class?: string;
     onclick?: (e: MouseEvent) => void;
-    disabled?: boolean;
-    type?: 'button' | 'submit' | 'reset';
-    tabindex?: number;
     children: Snippet;
   }
 
@@ -28,6 +25,7 @@
     type = 'button',
     tabindex,
     children,
+    ...restProps
   }: Props = $props();
 </script>
 
@@ -36,10 +34,12 @@
     {#snippet child({ props })}
       <Button
         {...props}
+        {...restProps}
         {variant}
         {size}
         {type}
         class={className}
+        aria-label={restProps['aria-label'] ?? tooltip}
         {onclick}
         {disabled}
         {tabindex}

package/src/components/ui/breadcrumb/breadcrumb-list.svelte

@@ -8,7 +8,7 @@
 
 <ol
   data-slot="breadcrumb-list"
-  class={cn("text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5", className)}
+  class={cn("text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-word sm:gap-2.5", className)}
   {...restProps}
 >
   {@render children?.()}