@svadmin/ui 0.0.3 → 0.3.0

package/src/components/buttons/SaveButton.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { t } from '@svadmin/core';
+  import { Button } from '../ui/button/index.js';
+  import { Save, Loader2 } from 'lucide-svelte';
+
+  let { loading = false, hideText = false, type = 'submit', class: className = '' } = $props<{
+    loading?: boolean;
+    hideText?: boolean;
+    type?: 'submit' | 'button';
+    class?: string;
+  }>();
+</script>
+
+<Button
+  {type}
+  variant="default"
+  size={hideText ? 'icon' : 'default'}
+  class={className}
+  disabled={loading}
+>
+  {#if loading}
+    <Loader2 class="h-4 w-4 animate-spin" />
+  {:else}
+    <Save class="h-4 w-4" />
+  {/if}
+  {#if !hideText}<span class="ml-1">{t('common.save')}</span>{/if}
+</Button>

package/src/components/buttons/ShowButton.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { useNavigation, t } from '@svadmin/core';
+  import { Button } from '../ui/button/index.js';
+  import { Eye } from 'lucide-svelte';
+
+  let { resource, recordItemId, hideText = false, class: className = '' } = $props<{
+    resource: string;
+    recordItemId: string | number;
+    hideText?: boolean;
+    class?: string;
+  }>();
+
+  const nav = useNavigation();
+</script>
+
+<Button
+  variant="ghost"
+  size={hideText ? 'icon' : 'sm'}
+  class={className}
+  onclick={() => nav.show(resource, recordItemId)}
+>
+  <Eye class="h-4 w-4" />
+  {#if !hideText}<span class="ml-1">{t('common.detail')}</span>{/if}
+</Button>

package/src/components/buttons/index.ts

@@ -0,0 +1,10 @@
+export { default as CreateButton } from './CreateButton.svelte';
+export { default as EditButton } from './EditButton.svelte';
+export { default as DeleteButton } from './DeleteButton.svelte';
+export { default as ShowButton } from './ShowButton.svelte';
+export { default as ListButton } from './ListButton.svelte';
+export { default as RefreshButton } from './RefreshButton.svelte';
+export { default as ExportButton } from './ExportButton.svelte';
+export { default as ImportButton } from './ImportButton.svelte';
+export { default as SaveButton } from './SaveButton.svelte';
+export { default as CloneButton } from './CloneButton.svelte';

package/src/components/fields/BooleanField.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  interface Props { value: boolean | null | undefined; trueIcon?: string; falseIcon?: string }
+  let { value, trueIcon = '✓', falseIcon = '✗' }: Props = $props();
+</script>
+<span class="field-boolean" class:is-true={!!value} class:is-false={!value}>
+  {value ? trueIcon : falseIcon}
+</span>
+
+<style>
+  .field-boolean { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 14px; }
+  .is-true { background: var(--color-success-bg, #dcfce7); color: var(--color-success, #16a34a); }
+  .is-false { background: var(--color-error-bg, #fef2f2); color: var(--color-error, #dc2626); }
+</style>

package/src/components/fields/DateField.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  interface Props { value: string | number | Date | null | undefined; locale?: string; options?: Intl.DateTimeFormatOptions }
+  let { value, locale = 'en-US', options = { dateStyle: 'medium' } }: Props = $props();
+  const formatted = $derived(value != null ? new Intl.DateTimeFormat(locale, options).format(new Date(value as string | number | Date)) : '—');
+</script>
+<span class="field-date">{formatted}</span>

package/src/components/fields/EmailField.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  interface Props { value: string | null | undefined }
+  let { value }: Props = $props();
+</script>
+{#if value}
+  <a href="mailto:{value}" class="field-email">{value}</a>
+{:else}
+  <span class="field-email field-empty">—</span>
+{/if}
+
+<style>
+  .field-email { color: var(--color-primary, #3b82f6); text-decoration: none; }
+  .field-email:hover { text-decoration: underline; }
+  .field-empty { color: var(--color-text-muted, #9ca3af); }
+</style>

package/src/components/fields/FileField.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  interface Props { value: string | null | undefined; title?: string }
+  let { value, title }: Props = $props();
+  const fileName = $derived(value ? value.split('/').pop() ?? value : null);
+</script>
+{#if value}
+  <a href={value} download class="field-file" title={title ?? fileName ?? ''}>
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+    {fileName}
+  </a>
+{:else}
+  <span class="field-file field-empty">—</span>
+{/if}
+
+<style>
+  .field-file { color: var(--color-primary, #3b82f6); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
+  .field-file:hover { text-decoration: underline; }
+  .field-empty { color: var(--color-text-muted, #9ca3af); }
+</style>

package/src/components/fields/ImageField.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  interface Props { value: string | null | undefined; alt?: string; width?: number; height?: number }
+  let { value, alt = '', width = 80, height = 80 }: Props = $props();
+</script>
+{#if value}
+  <img src={value} {alt} {width} {height} class="field-image" />
+{:else}
+  <span class="field-image field-empty">—</span>
+{/if}
+
+<style>
+  .field-image { border-radius: 8px; object-fit: cover; border: 1px solid var(--color-border, #e5e7eb); }
+  .field-empty { color: var(--color-text-muted, #9ca3af); display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; background: var(--color-surface, #f3f4f6); border-radius: 8px; }
+</style>

package/src/components/fields/MarkdownField.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  interface Props { value: string | null | undefined }
+  let { value }: Props = $props();
+</script>
+{#if value}
+  <div class="field-markdown">{@html value}</div>
+{:else}
+  <span class="field-empty">—</span>
+{/if}
+
+<style>
+  .field-markdown { line-height: 1.6; }
+  .field-markdown :global(h1), .field-markdown :global(h2), .field-markdown :global(h3) { margin-top: 0.5em; margin-bottom: 0.25em; }
+  .field-markdown :global(p) { margin: 0.5em 0; }
+  .field-markdown :global(code) { background: var(--color-surface, #f3f4f6); padding: 2px 6px; border-radius: 4px; font-size: 0.875em; }
+  .field-markdown :global(pre) { background: var(--color-surface, #f3f4f6); padding: 12px; border-radius: 8px; overflow-x: auto; }
+  .field-markdown :global(a) { color: var(--color-primary, #3b82f6); }
+  .field-empty { color: var(--color-text-muted, #9ca3af); }
+</style>

package/src/components/fields/NumberField.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  interface Props { value: number | string | null | undefined; locale?: string; options?: Intl.NumberFormatOptions }
+  let { value, locale = 'en-US', options = {} }: Props = $props();
+  const formatted = $derived(value != null ? new Intl.NumberFormat(locale, options).format(Number(value)) : '—');
+</script>
+<span class="field-number">{formatted}</span>

package/src/components/fields/TagField.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  interface Props { value: string | string[] | null | undefined; color?: string }
+  let { value, color = 'var(--color-primary, #3b82f6)' }: Props = $props();
+  const tags = $derived(Array.isArray(value) ? value : value ? [value] : []);
+</script>
+<span class="field-tags">
+  {#each tags as tag}
+    <span class="tag" style="--tag-color: {color}">{tag}</span>
+  {/each}
+  {#if tags.length === 0}<span class="field-empty">—</span>{/if}
+</span>
+
+<style>
+  .field-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
+  .tag { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 12px; background: color-mix(in srgb, var(--tag-color) 15%, transparent); color: var(--tag-color); border: 1px solid color-mix(in srgb, var(--tag-color) 30%, transparent); }
+  .field-empty { color: var(--color-text-muted, #9ca3af); }
+</style>

package/src/components/fields/TextField.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  interface Props { value: string | null | undefined; maxLength?: number }
+  let { value, maxLength }: Props = $props();
+  const display = $derived(value && maxLength && value.length > maxLength ? value.slice(0, maxLength) + '…' : value);
+  const needsTooltip = $derived(value && maxLength && value.length > maxLength);
+</script>
+{#if value}
+  <span class="field-text" title={needsTooltip ? value : undefined}>{display}</span>
+{:else}
+  <span class="field-text field-empty">—</span>
+{/if}
+
+<style>
+  .field-text { display: inline-block; }
+  .field-empty { color: var(--color-text-muted, #9ca3af); }
+</style>

package/src/components/fields/UrlField.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  interface Props { value: string | null | undefined; label?: string }
+  let { value, label }: Props = $props();
+  const display = $derived(label ?? value ?? '');
+</script>
+{#if value}
+  <a href={value} target="_blank" rel="noopener noreferrer" class="field-url">
+    {display}
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
+  </a>
+{:else}
+  <span class="field-url field-empty">—</span>
+{/if}
+
+<style>
+  .field-url { color: var(--color-primary, #3b82f6); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
+  .field-url:hover { text-decoration: underline; }
+  .field-url svg { opacity: 0.6; }
+  .field-empty { color: var(--color-text-muted, #9ca3af); }
+</style>

package/src/components/ui/avatar/avatar.svelte

@@ -16,7 +16,8 @@
 		defaultVariants: { size: "default" },
 	});
 
-	export type AvatarSize = VariantProps<typeof avatarVariants>["size"];
+	// AvatarSize type is exported from the package index.ts
+	type AvatarSize = VariantProps<typeof avatarVariants>["size"];
 
 	type Props = WithElementRef<HTMLImgAttributes> & {
 		size?: AvatarSize;

package/src/index.ts

@@ -26,6 +26,38 @@ export { default as UndoableNotification } from './components/UndoableNotificati
 export { default as ModalForm } from './components/ModalForm.svelte';
 export { default as DrawerForm } from './components/DrawerForm.svelte';
 export { default as DevTools } from './components/DevTools.svelte';
+export { default as Authenticated } from './components/Authenticated.svelte';
+export { default as UpdatePasswordPage } from './components/UpdatePasswordPage.svelte';
+export { default as ConfigErrorScreen } from './components/ConfigErrorScreen.svelte';
+export { default as InferencerPanel } from './components/InferencerPanel.svelte';
+export { default as LiveIndicator } from './components/LiveIndicator.svelte';
+export { default as ListPage } from './components/ListPage.svelte';
+export { default as CreatePage } from './components/CreatePage.svelte';
+export { default as EditPage } from './components/EditPage.svelte';
+export { default as AutoSaveIndicator } from './components/AutoSaveIndicator.svelte';
+export { default as ErrorComponent } from './components/ErrorComponent.svelte';
+export { default as PageSkeleton } from './components/PageSkeleton.svelte';
+export { default as NavigateToResource } from './components/NavigateToResource.svelte';
+export { default as CatchAllNavigate } from './components/CatchAllNavigate.svelte';
+export { default as ThemedTitle } from './components/ThemedTitle.svelte';
+
+// Field display components
+export { default as NumberField } from './components/fields/NumberField.svelte';
+export { default as DateField } from './components/fields/DateField.svelte';
+export { default as EmailField } from './components/fields/EmailField.svelte';
+export { default as UrlField } from './components/fields/UrlField.svelte';
+export { default as BooleanField } from './components/fields/BooleanField.svelte';
+export { default as TagField } from './components/fields/TagField.svelte';
+export { default as FileField } from './components/fields/FileField.svelte';
+export { default as MarkdownField } from './components/fields/MarkdownField.svelte';
+export { default as TextField } from './components/fields/TextField.svelte';
+export { default as ImageField } from './components/fields/ImageField.svelte';
+
+// CRUD Buttons
+export {
+  CreateButton, EditButton, DeleteButton, ShowButton, ListButton,
+  RefreshButton, ExportButton, ImportButton, SaveButton, CloneButton,
+} from './components/buttons/index.js';
 
 // Base UI components (shadcn-svelte)
 export { Button, buttonVariants } from './components/ui/button/index.js';

package/src/router-state.svelte.ts

@@ -1,33 +1,55 @@
 // Shared reactive hash router state — .svelte.ts enables $state at module level
-import { matchRoute } from '@svadmin/core/router';
+import { matchRoute, setActiveRouterProvider } from '@svadmin/core/router';
+import type { RouterProvider } from '@svadmin/core';
 
 let _route = $state('/');
 let _params: Record<string, string> = $state({});
 let _initialized = false;
+let _provider: RouterProvider | undefined;
 
 const ROUTES = [
   '/login',
   '/register',
   '/forgot-password',
+  '/update-password',
   '/',
   '/:resource',
   '/:resource/create',
   '/:resource/edit/:id',
   '/:resource/show/:id',
+  '/:parent/:parentId/:resource',
+  '/:parent/:parentId/:resource/create',
+  '/:parent/:parentId/:resource/edit/:id',
+  '/:parent/:parentId/:resource/show/:id',
 ];
 
 function sync() {
-  const hash = window.location.hash;
-  const m = matchRoute(hash, ROUTES);
-  _route = m?.route ?? '/';
-  _params = m?.params ?? {};
+  let path: string;
+
+  if (_provider) {
+    const parsed = _provider.parse();
+    path = parsed.pathname || '/';
+    const m = matchRoute(path, ROUTES);
+    _route = m?.route ?? '/';
+    _params = { ...(m?.params ?? {}), ...parsed.params };
+  } else {
+    path = typeof window !== 'undefined' ? window.location.hash.replace(/^#/, '') || '/' : '/';
+    const m = matchRoute(path, ROUTES);
+    _route = m?.route ?? '/';
+    _params = m?.params ?? {};
+  }
 }
 
-export function initRouter() {
+export function initRouter(provider?: RouterProvider) {
   if (_initialized) return;
   _initialized = true;
+  _provider = provider;
+  setActiveRouterProvider(provider);
   sync();
-  window.addEventListener('hashchange', sync);
+  if (typeof window !== 'undefined') {
+    window.addEventListener('hashchange', sync);
+    window.addEventListener('popstate', sync);
+  }
 }
 
 export function getRoute(): string {
@@ -37,3 +59,7 @@ export function getRoute(): string {
 export function getParams(): Record<string, string> {
   return _params;
 }
+
+export function getRouterProviderInstance(): RouterProvider | undefined {
+  return _provider;
+}