@svadmin/ui 0.75.0 → 0.77.0

package/dist/components/charts/AreaChart.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import { cn } from '../../utils.js';
+
+  interface AreaPoint {
+    label: string;
+    value: number;
+    color?: string;
+  }
+
+  interface Props {
+    data: AreaPoint[];
+    height?: number;
+    /** Stroke width of the value line. */
+    strokeWidth?: number;
+    /** Fills the area under the line. Defaults to `true`. */
+    fill?: boolean;
+    class?: string;
+  }
+
+  let {
+    data,
+    height = 200,
+    strokeWidth = 2,
+    fill = true,
+    class: className = '',
+  }: Props = $props();
+
+  const width = 480;
+  const padding = { top: 16, right: 16, bottom: 28, left: 36 };
+
+  const maxValue = $derived(Math.max(...data.map((point) => point.value), 1));
+  const innerWidth = $derived(width - padding.left - padding.right);
+  const innerHeight = $derived(height - padding.top - padding.bottom);
+
+  const coords = $derived.by(() =>
+    data.map((point, index) => {
+      const x = padding.left + (data.length <= 1 ? innerWidth / 2 : (index / (data.length - 1)) * innerWidth);
+      const y = padding.top + innerHeight - (point.value / maxValue) * innerHeight;
+      return { ...point, x, y };
+    }),
+  );
+
+  const linePath = $derived(coords.map((point) => `${point.x},${point.y}`).join(' '));
+  const areaPath = $derived(
+    coords.length
+      ? `M ${coords[0]?.x ?? 0} ${padding.top + innerHeight} L ${linePath.replace(/ /gu, ' L ')} L ${coords.at(-1)?.x ?? 0} ${padding.top + innerHeight} Z`
+      : '',
+  );
+  const gridLines = $derived([0, 0.25, 0.5, 0.75, 1]);
+</script>
+
+<div class={cn('svadmin-area-chart', className)} data-slot="area-chart">
+  <svg viewBox={`0 0 ${width} ${height}`} role="img" aria-label="Area chart" preserveAspectRatio="none">
+    {#each gridLines as ratio (ratio)}
+      {@const y = padding.top + innerHeight * ratio}
+      <line x1={padding.left} y1={y} x2={width - padding.right} y2={y} stroke="var(--border, currentColor)" stroke-width="1" opacity="0.6" />
+      <text x={padding.left - 6} y={y + 3} text-anchor="end" fill="var(--muted-foreground, currentColor)" font-size="10">{Math.round(maxValue * (1 - ratio))}</text>
+    {/each}
+
+    {#if fill && areaPath}
+      <path d={areaPath} fill="var(--primary, currentColor)" opacity="0.16" />
+    {/if}
+
+    {#if linePath}
+      <polyline points={linePath} fill="none" stroke="var(--primary, currentColor)" stroke-width={strokeWidth} stroke-linejoin="round" stroke-linecap="round" />
+    {/if}
+
+    {#each coords as point, index (index)}
+      <circle cx={point.x} cy={point.y} r="3" fill={point.color ?? 'var(--primary, currentColor)'} />
+      <text x={point.x} y={height - 8} text-anchor="middle" fill="var(--muted-foreground, currentColor)" font-size="10">{point.label}</text>
+    {/each}
+  </svg>
+</div>
+
+<style>
+  .svadmin-area-chart { width: 100%; color: var(--foreground, currentColor); }
+  .svadmin-area-chart svg { display: block; width: 100%; height: auto; }
+</style>

package/dist/components/charts/AreaChart.svelte.d.ts

@@ -0,0 +1,17 @@
+interface AreaPoint {
+    label: string;
+    value: number;
+    color?: string;
+}
+interface Props {
+    data: AreaPoint[];
+    height?: number;
+    /** Stroke width of the value line. */
+    strokeWidth?: number;
+    /** Fills the area under the line. Defaults to `true`. */
+    fill?: boolean;
+    class?: string;
+}
+declare const AreaChart: import("svelte").Component<Props, {}, "">;
+type AreaChart = ReturnType<typeof AreaChart>;
+export default AreaChart;

package/dist/components/charts/ScatterChart.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import { cn } from '../../utils.js';
+
+  interface ScatterPoint {
+    x: number;
+    y: number;
+    label?: string;
+    color?: string;
+  }
+
+  interface Props {
+    data: ScatterPoint[];
+    height?: number;
+    pointRadius?: number;
+    xLabel?: string;
+    yLabel?: string;
+    class?: string;
+  }
+
+  let {
+    data,
+    height = 220,
+    pointRadius = 4,
+    xLabel,
+    yLabel,
+    class: className = '',
+  }: Props = $props();
+
+  const width = 480;
+  const padding = { top: 16, right: 16, bottom: 32, left: 40 };
+  const innerWidth = $derived(width - padding.left - padding.right);
+  const innerHeight = $derived(height - padding.top - padding.bottom);
+
+  const bounds = $derived.by(() => {
+    const xs = data.map((point) => point.x);
+    const ys = data.map((point) => point.y);
+    const minX = Math.min(...xs, 0);
+    const maxX = Math.max(...xs, 1);
+    const minY = Math.min(...ys, 0);
+    const maxY = Math.max(...ys, 1);
+    return {
+      minX,
+      maxX: maxX === minX ? minX + 1 : maxX,
+      minY,
+      maxY: maxY === minY ? minY + 1 : maxY,
+    };
+  });
+
+  function scaleX(value: number): number {
+    return padding.left + ((value - bounds.minX) / (bounds.maxX - bounds.minX)) * innerWidth;
+  }
+
+  function scaleY(value: number): number {
+    return padding.top + innerHeight - ((value - bounds.minY) / (bounds.maxY - bounds.minY)) * innerHeight;
+  }
+</script>
+
+<div class={cn('svadmin-scatter-chart', className)} data-slot="scatter-chart">
+  <svg
+    viewBox={`0 0 ${width} ${height}`}
+    role="img"
+    aria-label={[yLabel ?? 'Y', xLabel ?? 'X'].join(' by ')}
+    preserveAspectRatio="none"
+  >
+    <line x1={padding.left} y1={padding.top + innerHeight} x2={width - padding.right} y2={padding.top + innerHeight} stroke="var(--border, currentColor)" />
+    <line x1={padding.left} y1={padding.top} x2={padding.left} y2={padding.top + innerHeight} stroke="var(--border, currentColor)" />
+
+    {#if xLabel}<text x={width - padding.right} y={height - 6} text-anchor="end" fill="var(--muted-foreground, currentColor)" font-size="10">{xLabel}</text>{/if}
+    {#if yLabel}<text x={padding.left - 6} y={padding.top + 8} text-anchor="end" fill="var(--muted-foreground, currentColor)" font-size="10">{yLabel}</text>{/if}
+
+    {#each data as point, index (index)}
+      <circle cx={scaleX(point.x)} cy={scaleY(point.y)} r={pointRadius} fill={point.color ?? 'var(--primary, currentColor)'} opacity="0.85">
+        <title>{point.label ?? `${point.x}, ${point.y}`}</title>
+      </circle>
+    {/each}
+  </svg>
+</div>
+
+<style>
+  .svadmin-scatter-chart { width: 100%; color: var(--foreground, currentColor); }
+  .svadmin-scatter-chart svg { display: block; width: 100%; height: auto; }
+</style>

package/dist/components/charts/ScatterChart.svelte.d.ts

@@ -0,0 +1,17 @@
+interface ScatterPoint {
+    x: number;
+    y: number;
+    label?: string;
+    color?: string;
+}
+interface Props {
+    data: ScatterPoint[];
+    height?: number;
+    pointRadius?: number;
+    xLabel?: string;
+    yLabel?: string;
+    class?: string;
+}
+declare const ScatterChart: import("svelte").Component<Props, {}, "">;
+type ScatterChart = ReturnType<typeof ScatterChart>;
+export default ScatterChart;

package/dist/components/charts/index.d.ts

@@ -1,3 +1,5 @@
+export { default as AreaChart } from './AreaChart.svelte';
 export { default as BarChart } from './BarChart.svelte';
 export { default as LineChart } from './LineChart.svelte';
 export { default as PieChart } from './PieChart.svelte';
+export { default as ScatterChart } from './ScatterChart.svelte';

package/dist/components/charts/index.js

@@ -1,3 +1,5 @@
+export { default as AreaChart } from './AreaChart.svelte';
 export { default as BarChart } from './BarChart.svelte';
 export { default as LineChart } from './LineChart.svelte';
 export { default as PieChart } from './PieChart.svelte';
+export { default as ScatterChart } from './ScatterChart.svelte';

package/dist/components/code-editor-presets.d.ts

@@ -0,0 +1,14 @@
+/**
+ * CodeMirror language presets for `@svadmin/ui/code-editor`.
+ *
+ * Each language is an optional peer dependency. Import this module only if you
+ * need the presets, and install the languages you actually use:
+ *
+ * ```bash
+ * bun add @codemirror/lang-json
+ * ```
+ */
+export { json } from '@codemirror/lang-json';
+export { javascript, javascriptLanguage, typescriptLanguage, jsxLanguage, tsxLanguage, } from '@codemirror/lang-javascript';
+export { sql } from '@codemirror/lang-sql';
+export { markdown } from '@codemirror/lang-markdown';

package/dist/components/code-editor-presets.js

@@ -0,0 +1,14 @@
+/**
+ * CodeMirror language presets for `@svadmin/ui/code-editor`.
+ *
+ * Each language is an optional peer dependency. Import this module only if you
+ * need the presets, and install the languages you actually use:
+ *
+ * ```bash
+ * bun add @codemirror/lang-json
+ * ```
+ */
+export { json } from '@codemirror/lang-json';
+export { javascript, javascriptLanguage, typescriptLanguage, jsxLanguage, tsxLanguage, } from '@codemirror/lang-javascript';
+export { sql } from '@codemirror/lang-sql';
+export { markdown } from '@codemirror/lang-markdown';

package/dist/components/content/ContentPageHeader.svelte

@@ -8,13 +8,27 @@
     description?: string;
     breadcrumbs?: string[];
     actions?: Snippet;
+    density?: 'compact' | 'comfortable';
     class?: string;
   }
-  let { title, eyebrow, description, breadcrumbs = [], actions, class: className = '' }: Props = $props();
-  const styles = contentHeader();
+  let {
+    title,
+    eyebrow,
+    description,
+    breadcrumbs = [],
+    actions,
+    density = 'comfortable',
+    class: className = '',
+  }: Props = $props();
+  const styles = $derived(contentHeader({ density }));
 </script>
 
-<header class={styles.root + ' ' + className} data-svadmin-page-header>
+<header
+  class={styles.root + ' ' + className}
+  data-svadmin-page-header
+  data-svadmin-content-header
+  data-density={density}
+>
   {#if breadcrumbs.length > 0}
     <nav aria-label="Breadcrumb" class={styles.breadcrumbs}>
       {#each breadcrumbs as crumb, index (crumb)}

package/dist/components/content/ContentPageHeader.svelte.d.ts

@@ -5,6 +5,7 @@ interface Props {
     description?: string;
     breadcrumbs?: string[];
     actions?: Snippet;
+    density?: 'compact' | 'comfortable';
     class?: string;
 }
 declare const ContentPageHeader: import("svelte").Component<Props, {}, "">;

package/dist/components/content/ContentPageShell.svelte

@@ -12,6 +12,7 @@
     children: Snippet;
     pageId?: string;
     width?: 'narrow' | 'default' | 'wide';
+    density?: 'compact' | 'comfortable';
     class?: string;
   }
 
@@ -23,16 +24,24 @@
     children,
     pageId = 'content',
     width = 'default',
+    density = 'comfortable',
     class: className = '',
   }: Props = $props();
 
   // 保留旧组件对非窄屏/宽屏输入的默认宽度回退。
+  const resolvedWidth = $derived(width === 'narrow' || width === 'wide' ? width : 'default');
   const styles = $derived(contentPage({
-    width: width === 'narrow' || width === 'wide' ? width : 'default',
+    width: resolvedWidth,
+    density,
   }));
 </script>
 
-<div data-svadmin-content-page={pageId} class={styles.root + ' ' + className}>
-  {#if title}<ContentPageHeader {title} {...definedOptions({ "eyebrow": eyebrow })} {...definedOptions({ "description": description })} {...definedOptions({ "actions": actions })} />{/if}
+<div
+  data-svadmin-content-page={pageId}
+  data-svadmin-content-page-width={resolvedWidth}
+  data-density={density}
+  class={styles.root + ' ' + className}
+>
+  {#if title}<ContentPageHeader {title} {density} {...definedOptions({ "eyebrow": eyebrow })} {...definedOptions({ "description": description })} {...definedOptions({ "actions": actions })} />{/if}
   {@render children()}
 </div>

package/dist/components/content/ContentPageShell.svelte.d.ts

@@ -7,6 +7,7 @@ interface Props {
     children: Snippet;
     pageId?: string;
     width?: 'narrow' | 'default' | 'wide';
+    density?: 'compact' | 'comfortable';
     class?: string;
 }
 declare const ContentPageShell: import("svelte").Component<Props, {}, "">;

package/dist/components/content/MetricBlock.svelte

@@ -35,7 +35,7 @@
   {#if loading}
     <Skeleton class={styles.skeleton} />
   {:else}
-    <p class={styles.value}>{value}</p>
+    <p data-svadmin-metric-value class={styles.value}>{value}</p>
     {#if detail || trend}<div class={styles.meta}>{#if trend}<span class={styles.trend}>{trend}</span>{/if}{#if detail}<span class={styles.detail}>{detail}</span>{/if}</div>{/if}
   {/if}
 </div>

package/dist/components/highlight.d.ts

@@ -0,0 +1,16 @@
+export interface HighlightSegment {
+    text: string;
+    match: boolean;
+}
+export interface SplitHighlightsOptions {
+    caseSensitive?: boolean;
+    /** Requires the match to be surrounded by non-word characters. */
+    wholeWord?: boolean;
+}
+export declare function escapeRegExp(value: string): string;
+/**
+ * Splits `text` into ordered segments, flagging the ones that match any query
+ * term. Overlapping matches are merged so the same characters are highlighted
+ * once. Never returns HTML, so hosts can render segments safely.
+ */
+export declare function splitHighlights(text: string, query: string | readonly string[] | undefined, options?: SplitHighlightsOptions): HighlightSegment[];

package/dist/components/highlight.js

@@ -0,0 +1,68 @@
+const REGEXP_SPECIALS = /[.*+?^${}()|[\]\\]/gu;
+export function escapeRegExp(value) {
+    return value.replace(REGEXP_SPECIALS, '\\$&');
+}
+function normalizeTerms(query) {
+    if (query === undefined || query === null)
+        return [];
+    const list = typeof query === 'string' ? [query] : [...query];
+    return list
+        .map((term) => term.trim())
+        .filter((term) => term.length > 0);
+}
+/**
+ * Splits `text` into ordered segments, flagging the ones that match any query
+ * term. Overlapping matches are merged so the same characters are highlighted
+ * once. Never returns HTML, so hosts can render segments safely.
+ */
+export function splitHighlights(text, query, options = {}) {
+    if (text.length === 0)
+        return [];
+    const terms = normalizeTerms(query);
+    if (terms.length === 0)
+        return [{ text, match: false }];
+    const flags = options.caseSensitive ? 'gu' : 'giu';
+    const wordBoundary = options.wholeWord ? '\\b' : '';
+    const pattern = terms
+        .sort((a, b) => b.length - a.length)
+        .map((term) => `${wordBoundary}${escapeRegExp(term)}${wordBoundary}`)
+        .join('|');
+    let regex;
+    try {
+        regex = new RegExp(`(${pattern})`, flags);
+    }
+    catch {
+        return [{ text, match: false }];
+    }
+    const matches = [];
+    for (const match of text.matchAll(regex)) {
+        const start = match.index;
+        const value = match[0];
+        if (start === undefined || value.length === 0)
+            continue;
+        matches.push({ start, end: start + value.length });
+    }
+    if (matches.length === 0)
+        return [{ text, match: false }];
+    const merged = [];
+    for (const current of matches) {
+        const previous = merged.at(-1);
+        if (previous && current.start <= previous.end) {
+            previous.end = Math.max(previous.end, current.end);
+        }
+        else {
+            merged.push({ ...current });
+        }
+    }
+    const segments = [];
+    let cursor = 0;
+    for (const { start, end } of merged) {
+        if (start > cursor)
+            segments.push({ text: text.slice(cursor, start), match: false });
+        segments.push({ text: text.slice(start, end), match: true });
+        cursor = end;
+    }
+    if (cursor < text.length)
+        segments.push({ text: text.slice(cursor), match: false });
+    return segments;
+}

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

@@ -0,0 +1,27 @@
+export interface MediaQueryState {
+    readonly matches: boolean;
+}
+export interface DeviceDetectState {
+    readonly isMobile: boolean;
+    readonly isTablet: boolean;
+    readonly isDesktop: boolean;
+    readonly isTouch: boolean;
+    readonly prefersReducedMotion: boolean;
+    readonly prefersDark: boolean;
+}
+export declare const MOBILE_QUERY = "(max-width: 640px)";
+export declare const TABLET_QUERY = "(min-width: 641px) and (max-width: 1024px)";
+export declare const TOUCH_QUERY = "(hover: none), (pointer: coarse)";
+export declare const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+export declare const DARK_QUERY = "(prefers-color-scheme: dark)";
+/**
+ * Reactive `window.matchMedia`. Must be called during component initialisation
+ * because it registers a scoped effect. SSR renders the fallback (no match)
+ * and hydration corrects the value.
+ */
+export declare function useMediaQuery(query: string, fallback?: boolean): MediaQueryState;
+/**
+ * Convenience device/preference detection built on `useMediaQuery`. Falls back
+ * to the desktop, motion-enabled profile during SSR.
+ */
+export declare function useDeviceDetect(): DeviceDetectState;

package/dist/components/media.svelte.js

@@ -0,0 +1,60 @@
+export const MOBILE_QUERY = '(max-width: 640px)';
+export const TABLET_QUERY = '(min-width: 641px) and (max-width: 1024px)';
+export const TOUCH_QUERY = '(hover: none), (pointer: coarse)';
+export const REDUCED_MOTION_QUERY = '(prefers-reduced-motion: reduce)';
+export const DARK_QUERY = '(prefers-color-scheme: dark)';
+/**
+ * Reactive `window.matchMedia`. Must be called during component initialisation
+ * because it registers a scoped effect. SSR renders the fallback (no match)
+ * and hydration corrects the value.
+ */
+export function useMediaQuery(query, fallback = false) {
+    let matches = $state(fallback);
+    $effect(() => {
+        if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
+            return;
+        const mediaQuery = window.matchMedia(query);
+        matches = mediaQuery.matches;
+        const onChange = (event) => {
+            matches = event.matches;
+        };
+        mediaQuery.addEventListener('change', onChange);
+        return () => mediaQuery.removeEventListener('change', onChange);
+    });
+    return {
+        get matches() {
+            return matches;
+        },
+    };
+}
+/**
+ * Convenience device/preference detection built on `useMediaQuery`. Falls back
+ * to the desktop, motion-enabled profile during SSR.
+ */
+export function useDeviceDetect() {
+    const mobile = useMediaQuery(MOBILE_QUERY);
+    const tablet = useMediaQuery(TABLET_QUERY);
+    const touch = useMediaQuery(TOUCH_QUERY);
+    const reducedMotion = useMediaQuery(REDUCED_MOTION_QUERY);
+    const dark = useMediaQuery(DARK_QUERY);
+    return {
+        get isMobile() {
+            return mobile.matches;
+        },
+        get isTablet() {
+            return tablet.matches;
+        },
+        get isDesktop() {
+            return !mobile.matches && !tablet.matches;
+        },
+        get isTouch() {
+            return touch.matches;
+        },
+        get prefersReducedMotion() {
+            return reducedMotion.matches;
+        },
+        get prefersDark() {
+            return dark.matches;
+        },
+    };
+}

package/dist/components/phone-dial-codes.d.ts

@@ -0,0 +1,19 @@
+export interface PhoneDialCode {
+    /** ISO 3166-1 alpha-2 country code. */
+    country: string;
+    /** International dialling prefix without the leading `+`. */
+    dial: string;
+    name: string;
+}
+/** Curated dialling codes covering common enterprise locales; hosts can pass their own list. */
+export declare const PHONE_DIAL_CODES: readonly PhoneDialCode[];
+export declare function findDialCodeByCountry(country: string, codes?: readonly PhoneDialCode[]): PhoneDialCode | undefined;
+/** Builds an E.164 string (`+<dial><national>`), or an empty string when there is no number. */
+export declare function toE164(country: string, nationalNumber: string, codes?: readonly PhoneDialCode[]): string;
+/** Longest-prefix match so `380` wins over `1` for shared dial prefixes. */
+export declare function splitE164(value: string, fallbackCountry?: string, codes?: readonly PhoneDialCode[]): {
+    country: string;
+    nationalNumber: string;
+};
+/** Formats a national number in loose groups of 3–4 digits for readability. */
+export declare function formatNationalNumber(value: string): string;

package/dist/components/phone-dial-codes.js

@@ -0,0 +1,112 @@
+/** Curated dialling codes covering common enterprise locales; hosts can pass their own list. */
+export const PHONE_DIAL_CODES = [
+    { country: 'AR', dial: '54', name: 'Argentina' },
+    { country: 'AU', dial: '61', name: 'Australia' },
+    { country: 'AT', dial: '43', name: 'Austria' },
+    { country: 'BH', dial: '973', name: 'Bahrain' },
+    { country: 'BD', dial: '880', name: 'Bangladesh' },
+    { country: 'BE', dial: '32', name: 'Belgium' },
+    { country: 'BR', dial: '55', name: 'Brazil' },
+    { country: 'BG', dial: '359', name: 'Bulgaria' },
+    { country: 'CA', dial: '1', name: 'Canada' },
+    { country: 'CL', dial: '56', name: 'Chile' },
+    { country: 'CN', dial: '86', name: 'China' },
+    { country: 'CO', dial: '57', name: 'Colombia' },
+    { country: 'HR', dial: '385', name: 'Croatia' },
+    { country: 'CZ', dial: '420', name: 'Czechia' },
+    { country: 'DK', dial: '45', name: 'Denmark' },
+    { country: 'EG', dial: '20', name: 'Egypt' },
+    { country: 'EE', dial: '372', name: 'Estonia' },
+    { country: 'FI', dial: '358', name: 'Finland' },
+    { country: 'FR', dial: '33', name: 'France' },
+    { country: 'DE', dial: '49', name: 'Germany' },
+    { country: 'GR', dial: '30', name: 'Greece' },
+    { country: 'HK', dial: '852', name: 'Hong Kong' },
+    { country: 'HU', dial: '36', name: 'Hungary' },
+    { country: 'IS', dial: '354', name: 'Iceland' },
+    { country: 'IN', dial: '91', name: 'India' },
+    { country: 'ID', dial: '62', name: 'Indonesia' },
+    { country: 'IE', dial: '353', name: 'Ireland' },
+    { country: 'IL', dial: '972', name: 'Israel' },
+    { country: 'IT', dial: '39', name: 'Italy' },
+    { country: 'JP', dial: '81', name: 'Japan' },
+    { country: 'JO', dial: '962', name: 'Jordan' },
+    { country: 'KZ', dial: '7', name: 'Kazakhstan' },
+    { country: 'KE', dial: '254', name: 'Kenya' },
+    { country: 'KW', dial: '965', name: 'Kuwait' },
+    { country: 'LV', dial: '371', name: 'Latvia' },
+    { country: 'LT', dial: '370', name: 'Lithuania' },
+    { country: 'LU', dial: '352', name: 'Luxembourg' },
+    { country: 'MY', dial: '60', name: 'Malaysia' },
+    { country: 'MT', dial: '356', name: 'Malta' },
+    { country: 'MX', dial: '52', name: 'Mexico' },
+    { country: 'MA', dial: '212', name: 'Morocco' },
+    { country: 'NL', dial: '31', name: 'Netherlands' },
+    { country: 'NZ', dial: '64', name: 'New Zealand' },
+    { country: 'NG', dial: '234', name: 'Nigeria' },
+    { country: 'NO', dial: '47', name: 'Norway' },
+    { country: 'OM', dial: '968', name: 'Oman' },
+    { country: 'PK', dial: '92', name: 'Pakistan' },
+    { country: 'PE', dial: '51', name: 'Peru' },
+    { country: 'PH', dial: '63', name: 'Philippines' },
+    { country: 'PL', dial: '48', name: 'Poland' },
+    { country: 'PT', dial: '351', name: 'Portugal' },
+    { country: 'QA', dial: '974', name: 'Qatar' },
+    { country: 'RO', dial: '40', name: 'Romania' },
+    { country: 'RU', dial: '7', name: 'Russia' },
+    { country: 'SA', dial: '966', name: 'Saudi Arabia' },
+    { country: 'RS', dial: '381', name: 'Serbia' },
+    { country: 'SG', dial: '65', name: 'Singapore' },
+    { country: 'SK', dial: '421', name: 'Slovakia' },
+    { country: 'SI', dial: '386', name: 'Slovenia' },
+    { country: 'ZA', dial: '27', name: 'South Africa' },
+    { country: 'KR', dial: '82', name: 'South Korea' },
+    { country: 'ES', dial: '34', name: 'Spain' },
+    { country: 'LK', dial: '94', name: 'Sri Lanka' },
+    { country: 'SE', dial: '46', name: 'Sweden' },
+    { country: 'CH', dial: '41', name: 'Switzerland' },
+    { country: 'TW', dial: '886', name: 'Taiwan' },
+    { country: 'TH', dial: '66', name: 'Thailand' },
+    { country: 'TR', dial: '90', name: 'Türkiye' },
+    { country: 'UA', dial: '380', name: 'Ukraine' },
+    { country: 'AE', dial: '971', name: 'United Arab Emirates' },
+    { country: 'GB', dial: '44', name: 'United Kingdom' },
+    { country: 'US', dial: '1', name: 'United States' },
+    { country: 'UY', dial: '598', name: 'Uruguay' },
+    { country: 'UZ', dial: '998', name: 'Uzbekistan' },
+    { country: 'VE', dial: '58', name: 'Venezuela' },
+    { country: 'VN', dial: '84', name: 'Vietnam' },
+];
+export function findDialCodeByCountry(country, codes = PHONE_DIAL_CODES) {
+    const target = country.trim().toUpperCase();
+    return codes.find((entry) => entry.country === target);
+}
+const digitsOnly = (value) => value.replace(/\D+/gu, '');
+/** Builds an E.164 string (`+<dial><national>`), or an empty string when there is no number. */
+export function toE164(country, nationalNumber, codes = PHONE_DIAL_CODES) {
+    const national = digitsOnly(nationalNumber);
+    if (national.length === 0)
+        return '';
+    const entry = findDialCodeByCountry(country, codes);
+    if (!entry)
+        return `+${national}`;
+    return `+${entry.dial}${national.replace(/^0+/u, '')}`;
+}
+/** Longest-prefix match so `380` wins over `1` for shared dial prefixes. */
+export function splitE164(value, fallbackCountry = 'CN', codes = PHONE_DIAL_CODES) {
+    const digits = digitsOnly(value);
+    if (digits.length === 0)
+        return { country: fallbackCountry, nationalNumber: '' };
+    const byDialLength = [...codes].sort((a, b) => b.dial.length - a.dial.length);
+    for (const entry of byDialLength) {
+        if (digits.startsWith(entry.dial)) {
+            return { country: entry.country, nationalNumber: digits.slice(entry.dial.length) };
+        }
+    }
+    return { country: fallbackCountry, nationalNumber: digits };
+}
+/** Formats a national number in loose groups of 3–4 digits for readability. */
+export function formatNationalNumber(value) {
+    const digits = digitsOnly(value);
+    return digits.replace(/(\d{3,4})(?=\d)/gu, '$1 ').trim();
+}