@svadmin/ui 0.75.0 → 0.77.0

package/dist/component-registry.js

@@ -22,6 +22,7 @@ const registryEntries = [
             description: { kind: "string" },
             pageId: { kind: "string" },
             width: variant("contentPageRecipe", "width"),
+            density: variant("contentPageRecipe", "density"),
             class: { kind: "string" },
         },
         slots: { children: { kind: "snippet", required: true }, actions: { kind: "snippet" } },
@@ -37,6 +38,7 @@ const registryEntries = [
             eyebrow: { kind: "string" },
             description: { kind: "string" },
             breadcrumbs: { kind: "string[]" },
+            density: variant("contentHeaderRecipe", "density"),
             class: { kind: "string" },
         },
         slots: { actions: { kind: "snippet" } },

package/dist/components/AppFooter.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils.js';
+
+  export interface FooterLink {
+    label: string;
+    href?: string;
+    external?: boolean;
+    onclick?: () => void;
+  }
+
+  export interface FooterColumn {
+    title: string;
+    links: FooterLink[];
+  }
+
+  interface Props {
+    /** Bottom-line copyright text. */
+    copyright?: string;
+    /** Flat links rendered in the bottom bar. */
+    links?: FooterLink[];
+    /** Link columns rendered above the bottom bar. */
+    columns?: FooterColumn[];
+    ariaLabel?: string;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    copyright,
+    links = [],
+    columns = [],
+    ariaLabel = 'Footer',
+    class: className = '',
+    children,
+  }: Props = $props();
+</script>
+
+<footer class={cn('svadmin-app-footer', className)} data-slot="app-footer" aria-label={ariaLabel}>
+  {#if columns.length}
+    <div class="svadmin-app-footer__columns">
+      {#each columns as column (column.title)}
+        <nav class="svadmin-app-footer__column" aria-label={column.title}>
+          <h2 class="svadmin-app-footer__heading">{column.title}</h2>
+          <ul class="svadmin-app-footer__list">
+            {#each column.links as link (link.label)}
+              <li>
+                {#if link.href}
+                  <a
+                    class="svadmin-app-footer__link"
+                    href={link.href}
+                    rel={link.external ? 'noreferrer noopener' : undefined}
+                    target={link.external ? '_blank' : undefined}
+                  >{link.label}</a>
+                {:else}
+                  <button class="svadmin-app-footer__link" type="button" onclick={() => link.onclick?.()}>{link.label}</button>
+                {/if}
+              </li>
+            {/each}
+          </ul>
+        </nav>
+      {/each}
+    </div>
+  {/if}
+
+  {#if children}<div class="svadmin-app-footer__content">{@render children()}</div>{/if}
+
+  {#if copyright || links.length}
+    <div class="svadmin-app-footer__bar">
+      {#if copyright}<span class="svadmin-app-footer__copyright">{copyright}</span>{/if}
+      {#if links.length}
+        <ul class="svadmin-app-footer__list svadmin-app-footer__list--inline">
+          {#each links as link (link.label)}
+            <li>
+              {#if link.href}
+                <a
+                  class="svadmin-app-footer__link"
+                  href={link.href}
+                  rel={link.external ? 'noreferrer noopener' : undefined}
+                  target={link.external ? '_blank' : undefined}
+                >{link.label}</a>
+              {:else}
+                <button class="svadmin-app-footer__link" type="button" onclick={() => link.onclick?.()}>{link.label}</button>
+              {/if}
+            </li>
+          {/each}
+        </ul>
+      {/if}
+    </div>
+  {/if}
+</footer>
+
+<style>
+  .svadmin-app-footer {
+    display: grid;
+    gap: 1.5rem;
+    border-block-start: 1px solid var(--border, currentColor);
+    padding: 1.5rem;
+    background: var(--card, var(--background, transparent));
+    color: var(--muted-foreground, currentColor);
+    font-size: 0.8125rem;
+  }
+
+  .svadmin-app-footer__columns {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+    gap: 1.5rem;
+  }
+
+  .svadmin-app-footer__column { display: grid; gap: 0.625rem; }
+  .svadmin-app-footer__heading { margin: 0; color: var(--foreground, currentColor); font-size: 0.8125rem; font-weight: 600; }
+  .svadmin-app-footer__list { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
+  .svadmin-app-footer__list--inline { display: flex; flex-wrap: wrap; gap: 1rem; }
+
+  .svadmin-app-footer__link {
+    border: 0;
+    padding: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  .svadmin-app-footer__link:hover { color: var(--foreground, currentColor); text-decoration: underline; text-underline-offset: 0.2em; }
+  .svadmin-app-footer__link:focus-visible { outline: 2px solid var(--ring, currentColor); outline-offset: 2px; }
+
+  .svadmin-app-footer__bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    border-block-start: 1px solid var(--border, currentColor);
+    padding-block-start: 1rem;
+    color: var(--muted-foreground, currentColor);
+  }
+</style>

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

@@ -0,0 +1,25 @@
+import type { Snippet } from 'svelte';
+export interface FooterLink {
+    label: string;
+    href?: string;
+    external?: boolean;
+    onclick?: () => void;
+}
+export interface FooterColumn {
+    title: string;
+    links: FooterLink[];
+}
+interface Props {
+    /** Bottom-line copyright text. */
+    copyright?: string;
+    /** Flat links rendered in the bottom bar. */
+    links?: FooterLink[];
+    /** Link columns rendered above the bottom bar. */
+    columns?: FooterColumn[];
+    ariaLabel?: string;
+    class?: string;
+    children?: Snippet;
+}
+declare const AppFooter: import("svelte").Component<Props, {}, "">;
+type AppFooter = ReturnType<typeof AppFooter>;
+export default AppFooter;

package/dist/components/CodeEditor.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+  import type { Component } from 'svelte';
+  import { onMount } from 'svelte';
+  import { cn } from '../utils.js';
+
+  /**
+   * Thin adapter over the Svelte ecosystem `svelte-codemirror-editor` package.
+   * The dependency is optional: if it cannot be loaded, an accessible
+   * `<textarea>` fallback keeps the field usable.
+   */
+  interface Props {
+    value?: string;
+    placeholder?: string;
+    readonly?: boolean;
+    editable?: boolean;
+    lineNumbers?: boolean;
+    lineWrapping?: boolean;
+    tabSize?: number;
+    /** CodeMirror extensions supplied by the host (languages, themes, …). */
+    extensions?: readonly unknown[];
+    lang?: unknown;
+    theme?: unknown;
+    ariaLabel?: string;
+    class?: string;
+    onchange?: (value: string) => void;
+    onready?: (view: unknown) => void;
+  }
+
+  let {
+    value = $bindable(''),
+    placeholder = 'Write code…',
+    readonly = false,
+    editable = true,
+    lineNumbers = true,
+    lineWrapping = true,
+    tabSize = 2,
+    extensions,
+    lang,
+    theme,
+    ariaLabel = 'Code editor',
+    class: className = '',
+    onchange,
+    onready,
+  }: Props = $props();
+
+  let Editor = $state<Component<Record<string, unknown>> | null>(null);
+  let unavailable = $state(false);
+
+  onMount(() => {
+    let active = true;
+    import('svelte-codemirror-editor')
+      .then((module) => {
+        if (active) Editor = module.default as unknown as Component<Record<string, unknown>>;
+      })
+      .catch(() => {
+        if (active) unavailable = true;
+      });
+    return () => {
+      active = false;
+    };
+  });
+
+  const editorProps = $derived({
+    value,
+    placeholder,
+    readonly,
+    editable,
+    lineNumbers,
+    lineWrapping,
+    tabSize,
+    ...(extensions ? { extensions: [...extensions] } : {}),
+    ...(lang ? { lang } : {}),
+    ...(theme ? { theme } : {}),
+    ...(onready ? { onready } : {}),
+    onchange: (next: string) => {
+      value = next;
+      onchange?.(next);
+    },
+  });
+
+  const editorState = $derived(Editor ? 'ready' : unavailable ? 'unavailable' : 'loading');
+</script>
+
+<div
+  class={cn('svadmin-code-editor', className)}
+  data-slot="code-editor"
+  data-state={editorState}
+>
+  {#if Editor}
+    <Editor {...editorProps} />
+  {:else}
+    <textarea
+      class="svadmin-code-editor__fallback"
+      bind:value
+      {placeholder}
+      {readonly}
+      disabled={!editable || readonly}
+      aria-label={ariaLabel}
+      spellcheck="false"
+      autocapitalize="off"
+      autocomplete="off"
+      wrap={lineWrapping ? 'soft' : 'off'}
+      oninput={(event) => onchange?.((event.currentTarget as HTMLTextAreaElement).value)}
+    ></textarea>
+    {#if unavailable}
+      <p class="svadmin-code-editor__hint" role="status">
+        Install <code>svelte-codemirror-editor</code> and <code>codemirror</code> to enable syntax highlighting.
+      </p>
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .svadmin-code-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-code-editor:focus-within { outline: 2px solid var(--ring, currentColor); outline-offset: 1px; }
+  .svadmin-code-editor__fallback {
+    display: block;
+    width: 100%;
+    min-height: 8rem;
+    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-code-editor__fallback:focus { outline: none; }
+  .svadmin-code-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-code-editor__hint code { color: var(--foreground, currentColor); }
+</style>

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

@@ -0,0 +1,26 @@
+import type { Component } from 'svelte';
+/**
+ * Thin adapter over the Svelte ecosystem `svelte-codemirror-editor` package.
+ * The dependency is optional: if it cannot be loaded, an accessible
+ * `<textarea>` fallback keeps the field usable.
+ */
+interface Props {
+    value?: string;
+    placeholder?: string;
+    readonly?: boolean;
+    editable?: boolean;
+    lineNumbers?: boolean;
+    lineWrapping?: boolean;
+    tabSize?: number;
+    /** CodeMirror extensions supplied by the host (languages, themes, …). */
+    extensions?: readonly unknown[];
+    lang?: unknown;
+    theme?: unknown;
+    ariaLabel?: string;
+    class?: string;
+    onchange?: (value: string) => void;
+    onready?: (view: unknown) => void;
+}
+declare const CodeEditor: Component<Props, {}, "value">;
+type CodeEditor = ReturnType<typeof CodeEditor>;
+export default CodeEditor;

package/dist/components/HighlightText.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+  import { splitHighlights } from './highlight.js';
+
+  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;
+  }
+
+  let {
+    text,
+    query,
+    caseSensitive = false,
+    wholeWord = false,
+    class: className = '',
+    highlightClass = '',
+  }: Props = $props();
+
+  const segments = $derived(
+    splitHighlights(text, query, { caseSensitive, wholeWord }),
+  );
+</script>
+
+<span class={cn('svadmin-highlight-text', className)} data-slot="highlight-text">
+  {#each segments as segment, index (index)}{#if segment.match}<mark class={cn('svadmin-highlight-text__mark', highlightClass)}>{segment.text}</mark>{:else}{segment.text}{/if}{/each}
+</span>
+
+<style>
+  .svadmin-highlight-text {
+    color: inherit;
+    overflow-wrap: anywhere;
+  }
+
+  .svadmin-highlight-text__mark {
+    border-radius: 0.2rem;
+    padding-inline: 0.1rem;
+    background: color-mix(in oklch, var(--warning, var(--primary, currentColor)) 28%, transparent);
+    color: var(--foreground, currentColor);
+  }
+</style>

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;