@svadmin/ui 0.0.6 → 0.3.0

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

@@ -30,6 +30,28 @@ 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 {

package/src/router-state.svelte.ts

@@ -1,5 +1,5 @@
 // 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('/');
@@ -17,20 +17,24 @@ const ROUTES = [
   '/: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() {
+  let path: string;
+
   if (_provider) {
-    // Use RouterProvider for parsing
     const parsed = _provider.parse();
-    const path = parsed.pathname || '/';
-    const m = matchRoute(path.startsWith('#') ? path : `#${path}`, ROUTES);
+    path = parsed.pathname || '/';
+    const m = matchRoute(path, ROUTES);
     _route = m?.route ?? '/';
     _params = { ...(m?.params ?? {}), ...parsed.params };
   } else {
-    // Fallback: direct hash parsing
-    const hash = window.location.hash;
-    const m = matchRoute(hash, ROUTES);
+    path = typeof window !== 'undefined' ? window.location.hash.replace(/^#/, '') || '/' : '/';
+    const m = matchRoute(path, ROUTES);
     _route = m?.route ?? '/';
     _params = m?.params ?? {};
   }
@@ -40,9 +44,12 @@ export function initRouter(provider?: RouterProvider) {
   if (_initialized) return;
   _initialized = true;
   _provider = provider;
+  setActiveRouterProvider(provider);
   sync();
-  window.addEventListener('hashchange', sync);
-  window.addEventListener('popstate', sync);
+  if (typeof window !== 'undefined') {
+    window.addEventListener('hashchange', sync);
+    window.addEventListener('popstate', sync);
+  }
 }
 
 export function getRoute(): string {