@svadmin/ui 0.74.0 → 0.76.0

package/dist/components/HighlightText.svelte.d.ts

@@ -0,0 +1,13 @@
+interface Props {
+    text: string;
+    /** One term or a list of terms to highlight. */
+    query?: string | readonly string[];
+    caseSensitive?: boolean;
+    wholeWord?: boolean;
+    class?: string;
+    /** Overrides the `<mark>` styling without leaving the semantic token system. */
+    highlightClass?: string;
+}
+declare const HighlightText: import("svelte").Component<Props, {}, "">;
+type HighlightText = ReturnType<typeof HighlightText>;
+export default HighlightText;

package/dist/components/JsonEditor.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+  import type { Component } from 'svelte';
+  import { onMount } from 'svelte';
+  import { cn } from '../utils.js';
+
+  /**
+   * Thin adapter over the Svelte ecosystem `svelte-jsoneditor` package. The
+   * dependency is optional: if it cannot be loaded, a validating `<textarea>`
+   * fallback keeps the field usable.
+   */
+  type JsonMode = 'tree' | 'text' | 'table';
+
+  interface Props {
+    /** Parsed JSON value. */
+    value?: unknown;
+    mode?: JsonMode;
+    readonly?: boolean;
+    /** Height of the editor surface (CSS length). */
+    height?: string;
+    ariaLabel?: string;
+    class?: string;
+    onchange?: (value: unknown) => void;
+    onerror?: (message: string) => void;
+  }
+
+  let {
+    value = $bindable(undefined),
+    mode = 'tree',
+    readonly = false,
+    height = '22rem',
+    ariaLabel = 'JSON editor',
+    class: className = '',
+    onchange,
+    onerror,
+  }: Props = $props();
+
+  const generatedId = $props.id();
+  const errorId = `${generatedId}-error`;
+
+  let Editor = $state<Component<Record<string, unknown>> | null>(null);
+  let unavailable = $state(false);
+  let error = $state('');
+
+  function format(input: unknown): string {
+    if (input === undefined) return '';
+    try {
+      return JSON.stringify(input, null, 2) ?? '';
+    } catch {
+      return '';
+    }
+  }
+
+  let text = $state(format(value));
+
+  onMount(() => {
+    let active = true;
+    import('svelte-jsoneditor')
+      .then((module) => {
+        if (active) Editor = module.JSONEditor as unknown as Component<Record<string, unknown>>;
+      })
+      .catch(() => {
+        if (active) unavailable = true;
+      });
+    return () => {
+      active = false;
+    };
+  });
+
+  function handleEditorChange(updated: { content?: { json?: unknown; text?: string } }): void {
+    const content = updated?.content ?? {};
+    const next = 'json' in content ? content.json : content.text;
+    value = next;
+    error = '';
+    onchange?.(next);
+  }
+
+  function handleFallbackInput(next: string): void {
+    text = next;
+    if (next.trim() === '') {
+      error = '';
+      value = undefined;
+      onchange?.(undefined);
+      return;
+    }
+    try {
+      const parsed: unknown = JSON.parse(next);
+      error = '';
+      value = parsed;
+      onchange?.(parsed);
+    } catch (cause) {
+      const message = cause instanceof Error ? cause.message : 'Invalid JSON';
+      error = message;
+      onerror?.(message);
+    }
+  }
+
+  const editorProps = $derived({
+    content: { json: value },
+    mode,
+    readOnly: readonly,
+    ariaLabel,
+    mainMenuBar: !readonly,
+    navigationBar: !readonly,
+    statusBar: true,
+    onChange: handleEditorChange,
+  });
+
+  const editorState = $derived(Editor ? 'ready' : unavailable ? 'unavailable' : 'loading');
+</script>
+
+<div
+  class={cn('svadmin-json-editor', className)}
+  data-slot="json-editor"
+  data-state={editorState}
+>
+  {#if Editor}
+    <div class="svadmin-json-editor__surface" style={`height: ${height};`}>
+      <Editor {...editorProps} />
+    </div>
+  {:else}
+    <textarea
+      class="svadmin-json-editor__fallback"
+      style={`min-height: ${height};`}
+      bind:value={text}
+      {readonly}
+      aria-label={ariaLabel}
+      spellcheck="false"
+      autocapitalize="off"
+      autocomplete="off"
+      aria-invalid={error ? 'true' : undefined}
+      aria-describedby={error ? errorId : undefined}
+      oninput={(event) => handleFallbackInput((event.currentTarget as HTMLTextAreaElement).value)}
+    ></textarea>
+    {#if error}<p id={errorId} class="svadmin-json-editor__error" role="alert">{error}</p>{/if}
+    {#if unavailable}
+      <p class="svadmin-json-editor__hint" role="status">
+        Install <code>svelte-jsoneditor</code> to enable the structured editor.
+      </p>
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .svadmin-json-editor {
+    overflow: hidden;
+    border: 1px solid var(--border, currentColor);
+    border-radius: min(var(--radius, 0.5rem), 0.5rem);
+    background: var(--card, var(--background, transparent));
+    color: var(--card-foreground, var(--foreground, currentColor));
+  }
+
+  .svadmin-json-editor:focus-within { outline: 2px solid var(--ring, currentColor); outline-offset: 1px; }
+  .svadmin-json-editor__surface { width: 100%; }
+  .svadmin-json-editor__fallback {
+    display: block;
+    width: 100%;
+    border: 0;
+    padding: 0.75rem;
+    background: transparent;
+    color: inherit;
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 0.8125rem;
+    line-height: 1.6;
+    resize: vertical;
+  }
+  .svadmin-json-editor__fallback:focus { outline: none; }
+  .svadmin-json-editor__error {
+    margin: 0;
+    border-top: 1px solid var(--destructive, currentColor);
+    padding: 0.5rem 0.75rem;
+    color: var(--destructive, currentColor);
+    font-size: 0.75rem;
+  }
+  .svadmin-json-editor__hint {
+    margin: 0;
+    border-top: 1px solid var(--border, currentColor);
+    padding: 0.5rem 0.75rem;
+    color: var(--muted-foreground, currentColor);
+    font-size: 0.75rem;
+  }
+  .svadmin-json-editor__hint code { color: var(--foreground, currentColor); }
+</style>

package/dist/components/JsonEditor.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Component } from 'svelte';
+/**
+ * Thin adapter over the Svelte ecosystem `svelte-jsoneditor` package. The
+ * dependency is optional: if it cannot be loaded, a validating `<textarea>`
+ * fallback keeps the field usable.
+ */
+type JsonMode = 'tree' | 'text' | 'table';
+interface Props {
+    /** Parsed JSON value. */
+    value?: unknown;
+    mode?: JsonMode;
+    readonly?: boolean;
+    /** Height of the editor surface (CSS length). */
+    height?: string;
+    ariaLabel?: string;
+    class?: string;
+    onchange?: (value: unknown) => void;
+    onerror?: (message: string) => void;
+}
+declare const JsonEditor: Component<Props, {}, "value">;
+type JsonEditor = ReturnType<typeof JsonEditor>;
+export default JsonEditor;

package/dist/components/LazyPage.svelte

@@ -1,11 +1,11 @@
 <script module lang="ts">
   import type { Component } from 'svelte';
 
+  export type LazyPageRenderable = Component<never>;
   export type LazyPageModule = {
-    default: Component<never>;
+    default: LazyPageRenderable;
   };
 
-  export type LazyPageRenderable = Component<Record<string, unknown>>;
   export type LazyPageLoader = () => Promise<LazyPageModule>;
 
   const pagePromises = new WeakMap<object, Promise<unknown>>();
@@ -38,7 +38,7 @@
     <span class="svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">Loading...</span>
   </div>
 {:then pageModule}
-  {@const Page = pageModule.default as unknown as LazyPageRenderable}
+  {@const Page = pageModule.default as unknown as Component<Record<string, unknown>>}
   <Page {...props} />
 {:catch}
   <div class="svadmin-u-60fbb7713999 svadmin-u-8a7a926578c8 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227" role="alert">

package/dist/components/LazyPage.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Component } from 'svelte';
+export type LazyPageRenderable = Component<never>;
 export type LazyPageModule = {
-    default: Component<never>;
+    default: LazyPageRenderable;
 };
-export type LazyPageRenderable = Component<Record<string, unknown>>;
 export type LazyPageLoader = () => Promise<LazyPageModule>;
 export declare function loadLazyPage(loader: LazyPageLoader): Promise<LazyPageModule>;
 type $$ComponentProps = {

package/dist/components/Marquee.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils.js';
+
+  interface Props {
+    /** Plain text shortcut; ignored when `children` is provided. */
+    text?: string;
+    children?: Snippet;
+    /** Seconds for one full loop. */
+    duration?: number;
+    direction?: 'left' | 'right';
+    vertical?: boolean;
+    /** Copies of the content used to build a seamless loop. */
+    repeat?: number;
+    pauseOnHover?: boolean;
+    /** Fades the leading and trailing edges. */
+    fade?: boolean;
+    ariaLabel?: string;
+    class?: string;
+  }
+
+  let {
+    text,
+    children,
+    duration = 14,
+    direction = 'left',
+    vertical = false,
+    repeat = 2,
+    pauseOnHover = true,
+    fade = true,
+    ariaLabel,
+    class: className = '',
+  }: Props = $props();
+
+  const copies = $derived(Math.max(2, Math.round(repeat)));
+  const safeDuration = $derived(duration > 0 ? duration : 14);
+</script>
+
+<div
+  class={cn('svadmin-marquee', className)}
+  data-slot="marquee"
+  data-direction={direction}
+  data-vertical={vertical ? 'true' : 'false'}
+  data-pause={pauseOnHover ? 'true' : 'false'}
+  data-fade={fade ? 'true' : 'false'}
+  role="marquee"
+  aria-label={ariaLabel}
+>
+  <div
+    class="svadmin-marquee__track"
+    style={`--svadmin-marquee-duration: ${safeDuration}s; --svadmin-marquee-repeat: ${copies};`}
+  >
+    {#each Array.from({ length: copies }) as _, index (index)}
+      <div class="svadmin-marquee__item" aria-hidden={index > 0 ? 'true' : undefined}>
+        {#if children}{@render children()}{:else}{text}{/if}
+      </div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .svadmin-marquee {
+    position: relative;
+    overflow: hidden;
+    color: inherit;
+  }
+
+  .svadmin-marquee[data-fade='true'] {
+    mask-image: linear-gradient(to right, transparent, currentColor 8%, currentColor 92%, transparent);
+  }
+
+  .svadmin-marquee__track {
+    display: flex;
+    width: max-content;
+    animation: svadmin-marquee-scroll var(--svadmin-marquee-duration, 14s) linear infinite;
+    will-change: transform;
+  }
+
+  .svadmin-marquee[data-direction='right'] .svadmin-marquee__track { animation-direction: reverse; }
+  .svadmin-marquee[data-vertical='true'] .svadmin-marquee__track { flex-direction: column; }
+  .svadmin-marquee[data-pause='true']:hover .svadmin-marquee__track,
+  .svadmin-marquee[data-pause='true']:focus-within .svadmin-marquee__track { animation-play-state: paused; }
+
+  .svadmin-marquee__item {
+    display: flex;
+    flex: none;
+    align-items: center;
+    padding-inline-end: 2rem;
+  }
+
+  .svadmin-marquee[data-vertical='true'] .svadmin-marquee__item {
+    padding-inline-end: 0;
+    padding-block-end: 1rem;
+  }
+
+  @keyframes svadmin-marquee-scroll {
+    from { transform: translate(0, 0); }
+    to { transform: translate(calc(-100% / var(--svadmin-marquee-repeat, 2)), 0); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .svadmin-marquee__track { animation: none; }
+  }
+</style>

package/dist/components/Marquee.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Plain text shortcut; ignored when `children` is provided. */
+    text?: string;
+    children?: Snippet;
+    /** Seconds for one full loop. */
+    duration?: number;
+    direction?: 'left' | 'right';
+    vertical?: boolean;
+    /** Copies of the content used to build a seamless loop. */
+    repeat?: number;
+    pauseOnHover?: boolean;
+    /** Fades the leading and trailing edges. */
+    fade?: boolean;
+    ariaLabel?: string;
+    class?: string;
+}
+declare const Marquee: import("svelte").Component<Props, {}, "">;
+type Marquee = ReturnType<typeof Marquee>;
+export default Marquee;

package/dist/components/MediaPlayer.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+
+  interface Props {
+    src: string;
+    media?: 'video' | 'audio';
+    poster?: string;
+    title?: string;
+    description?: string;
+    controls?: boolean;
+    autoplay?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    playsinline?: boolean;
+    preload?: 'none' | 'metadata' | 'auto';
+    /** CSS aspect ratio for video, e.g. `16 / 9`. */
+    aspectRatio?: string;
+    class?: string;
+    ontimeupdate?: (event: Event) => void;
+    onended?: (event: Event) => void;
+  }
+
+  let {
+    src,
+    media = 'video',
+    poster,
+    title,
+    description,
+    controls = true,
+    autoplay = false,
+    loop = false,
+    muted = false,
+    playsinline = true,
+    preload = 'metadata',
+    aspectRatio = '16 / 9',
+    class: className = '',
+    ontimeupdate,
+    onended,
+  }: Props = $props();
+</script>
+
+<figure class={cn('svadmin-media-player', className)} data-slot="media-player" data-media={media}>
+  {#if media === 'video'}
+    <div class="svadmin-media-player__stage" style={`aspect-ratio: ${aspectRatio};`}>
+      <video
+        class="svadmin-media-player__video"
+        {src}
+        {poster}
+        {controls}
+        autoplay={autoplay}
+        {loop}
+        {muted}
+        {playsinline}
+        {preload}
+        aria-label={title}
+        ontimeupdate={ontimeupdate}
+        onended={onended}
+      ></video>
+    </div>
+  {:else}
+    <div class="svadmin-media-player__audio-stage">
+      <audio
+        class="svadmin-media-player__audio"
+        {src}
+        {controls}
+        autoplay={autoplay}
+        {loop}
+        {muted}
+        {preload}
+        aria-label={title}
+        ontimeupdate={ontimeupdate}
+        onended={onended}
+      ></audio>
+    </div>
+  {/if}
+
+  {#if title || description}
+    <figcaption class="svadmin-media-player__caption">
+      {#if title}<span class="svadmin-media-player__title">{title}</span>{/if}
+      {#if description}<span class="svadmin-media-player__description">{description}</span>{/if}
+    </figcaption>
+  {/if}
+</figure>
+
+<style>
+  .svadmin-media-player {
+    display: grid;
+    gap: 0.5rem;
+    margin: 0;
+    border: 1px solid var(--border, currentColor);
+    border-radius: min(var(--radius, 0.5rem), 0.75rem);
+    padding: 0.5rem;
+    background: var(--card, transparent);
+    color: var(--card-foreground, var(--foreground, currentColor));
+  }
+
+  .svadmin-media-player__stage { overflow: hidden; border-radius: min(var(--radius, 0.5rem), 0.5rem); background: var(--muted, transparent); }
+  .svadmin-media-player__video { display: block; width: 100%; height: 100%; object-fit: contain; }
+  .svadmin-media-player__audio-stage { padding: 0.25rem; }
+  .svadmin-media-player__audio { width: 100%; }
+  .svadmin-media-player__caption { display: grid; gap: 0.125rem; padding-inline: 0.25rem; }
+  .svadmin-media-player__title { font-size: 0.875rem; font-weight: 600; }
+  .svadmin-media-player__description { color: var(--muted-foreground, currentColor); font-size: 0.8125rem; }
+</style>

package/dist/components/MediaPlayer.svelte.d.ts

@@ -0,0 +1,21 @@
+interface Props {
+    src: string;
+    media?: 'video' | 'audio';
+    poster?: string;
+    title?: string;
+    description?: string;
+    controls?: boolean;
+    autoplay?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    playsinline?: boolean;
+    preload?: 'none' | 'metadata' | 'auto';
+    /** CSS aspect ratio for video, e.g. `16 / 9`. */
+    aspectRatio?: string;
+    class?: string;
+    ontimeupdate?: (event: Event) => void;
+    onended?: (event: Event) => void;
+}
+declare const MediaPlayer: import("svelte").Component<Props, {}, "">;
+type MediaPlayer = ReturnType<typeof MediaPlayer>;
+export default MediaPlayer;

package/dist/components/PasswordInput.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-/* eslint-disable @typescript-eslint/no-explicit-any */
   import { Input } from './ui/input/index.js';
   import TooltipButton from './TooltipButton.svelte';
   import { Label } from './ui/label/index.js';
   import { Lock, Eye, EyeOff } from '@lucide/svelte';
   import { useTranslation } from '@svadmin/core/i18n';
+  import type { FullAutoFill } from 'svelte/elements';
 
   const i18n = useTranslation();
 
@@ -13,7 +13,7 @@
     label: string;
     value: string;
     placeholder?: string;
-    autocomplete?: string;
+    autocomplete?: FullAutoFill;
     showStrength?: boolean;
     disabled?: boolean;
     class?: string;
@@ -67,7 +67,7 @@
       {placeholder}
       bind:value
       class="svadmin-u-9e83b2412bc9 svadmin-u-1b1df78e4d0a"
-      autocomplete={autocomplete as any}
+      {autocomplete}
       {disabled}
     />
     <TooltipButton

package/dist/components/PasswordInput.svelte.d.ts

@@ -1,9 +1,10 @@
+import type { FullAutoFill } from 'svelte/elements';
 interface Props {
     id: string;
     label: string;
     value: string;
     placeholder?: string;
-    autocomplete?: string;
+    autocomplete?: FullAutoFill;
     showStrength?: boolean;
     disabled?: boolean;
     class?: string;