matterviz 0.3.6 → 0.4.0

package/dist/labels.js

@@ -0,0 +1,278 @@
+import { format } from 'd3-format';
+import * as d3_symbols from 'd3-shape';
+import { timeFormat } from 'd3-time-format';
+const is_d3_symbol_name = (name) => Object.hasOwn(d3_symbols, `symbol${name}`);
+function name_for_symbol(sym) {
+    for (const [key, symbol] of Object.entries(d3_symbols)) {
+        if (symbol === sym && /^symbol[A-Z]/.test(key)) {
+            const name = key.slice(6);
+            if (is_d3_symbol_name(name))
+                return name;
+        }
+    }
+    return null;
+}
+export const symbol_names = [
+    ...new Set([...d3_symbols.symbolsFill, ...d3_symbols.symbolsStroke]),
+]
+    .map(name_for_symbol)
+    .filter((n) => n !== null);
+export const symbol_map = Object.fromEntries(
+// Symbol lookup from d3-shape
+symbol_names.map((name) => [name, d3_symbols[`symbol${name}`]]));
+// Format a value for display with optional time formatting
+export function format_value(value, formatter) {
+    if (!formatter)
+        return `${value}`;
+    if (formatter.startsWith(`%`))
+        return timeFormat(formatter)(new Date(value));
+    // Handle special values consistently
+    if (value === -Infinity)
+        return `-Infinity`;
+    if (value === Infinity)
+        return `Infinity`;
+    if (Number.isNaN(value))
+        return `NaN`;
+    // Format and normalize unicode minus
+    const formatted = format(formatter)(value).replaceAll('−', `-`);
+    // Handle percentage formatting - remove trailing zeros
+    if (formatter.includes(`%`)) {
+        return formatted.includes(`.`)
+            ? formatted.replace(/(\.\d*?)0+%$/, `$1%`).replace(/\.%$/, `%`)
+            : formatted;
+    }
+    // Handle currency formatting - preserve precision if specified
+    if (formatter.includes(`$`) && formatter.includes(`.`) && /\.\d+f/.test(formatter)) {
+        return formatted;
+    }
+    // Remove trailing zeros after decimal point
+    const out = formatted.includes(`.`)
+        ? formatted.replace(/(\.\d*?)0+$/, `$1`).replace(/\.$/, ``)
+        : formatted;
+    return out === `-0` ? `0` : out;
+}
+// TODO add labels and units for all elemental properties
+export const ELEM_PROPERTY_LABELS = {
+    atomic_mass: [`Atomic Mass`, `u`],
+    atomic_radius: [`Atomic Radius`, `Å`],
+    boiling_point: [`Boiling Point`, `K`],
+    covalent_radius: [`Covalent Radius`, `Å`],
+    density: [`Density`, `g/cm³`],
+    electron_affinity: [`Electron Affinity`, null],
+    electronegativity: [`Electronegativity`, null],
+    first_ionization: [`First Ionization Energy`, `eV`],
+    melting_point: [`Melting Point`, `K`],
+    mendeleev_number: [`Mendeleev Number`, null],
+    // molar_heat: [`Molar Heat`, `J/(mol·K)`],
+    n_shells: [`Number of Shells`, null],
+    n_valence: [`Electron Valency`, null],
+    number: [`Atomic Number`, null],
+    shells: [`Electron Shell Occupations`, null],
+    specific_heat: [`Specific Heat`, `J/(g K)`],
+};
+export const ELEM_HEATMAP_KEYS = [
+    `atomic_mass`,
+    `atomic_radius`,
+    `covalent_radius`,
+    `electronegativity`,
+    `density`,
+    `boiling_point`,
+    `melting_point`,
+    `first_ionization`,
+];
+export const ELEM_HEATMAP_LABELS = Object.fromEntries(ELEM_HEATMAP_KEYS.map((key) => {
+    const [label, unit] = ELEM_PROPERTY_LABELS[key] ?? [];
+    if (!label)
+        throw new Error(`Unexpected missing label for element property ${key}`);
+    return [label + (unit ? ` (${unit})` : ``), key];
+}));
+// Allow users to import DEFAULT_FMT and change its items in place to
+// set the default number format globally
+export const DEFAULT_FMT = [`,.3~s`, `.3~g`];
+// Unicode glyphs for common fractions used by format_fractional()
+export const FRACTION_GLYPHS = [
+    [0, `0`],
+    [1 / 12, `¹⁄₁₂`],
+    [1 / 8, `⅛`],
+    [1 / 6, `⅙`],
+    [1 / 5, `⅕`],
+    [1 / 4, `¼`],
+    [1 / 3, `⅓`],
+    [2 / 5, `⅖`],
+    [1 / 2, `½`],
+    [3 / 5, `⅗`],
+    [2 / 3, `⅔`],
+    [3 / 4, `¾`],
+    [4 / 5, `⁴⁄₅`],
+    [5 / 6, `⁵⁄₆`],
+    [7 / 8, `⁷⁄₈`],
+    [11 / 12, `¹¹⁄₁₂`],
+];
+// fmt as number only allowed to support [].map(format_num) without type error
+export const format_num = (num, fmt) => {
+    if (num === null)
+        return ``;
+    if (!fmt || typeof fmt !== `string`) {
+        const [gt_1_fmt, lt_1_fmt] = DEFAULT_FMT;
+        return format(Math.abs(num) >= 1 ? gt_1_fmt : lt_1_fmt)(num);
+    }
+    return format(fmt)(num);
+};
+// Format a 3D vector as "(x, y, z)" with configurable precision
+export const format_vec3 = (vec, fmt_spec = `.4~`) => `(${format_num(vec[0], fmt_spec)}, ${format_num(vec[1], fmt_spec)}, ${format_num(vec[2], fmt_spec)})`;
+const BYTE_UNITS = [`B`, `KiB`, `MiB`, `GiB`, `TiB`, `PiB`];
+// Format file sizes using IEC binary units (1024 factor).
+export const format_bytes = (bytes) => {
+    if (bytes === undefined || !Number.isFinite(bytes))
+        return `Unknown`;
+    let [val, idx] = [bytes, 0];
+    while (Math.abs(val) >= 1024 && idx < BYTE_UNITS.length - 1) {
+        val /= 1024;
+        idx++;
+    }
+    return idx === 0 ? `${val} B` : `${val.toFixed(2)} ${BYTE_UNITS[idx]}`;
+};
+// Replace common fractional values with unicode glyphs (e.g. 1/2 → ½)
+export function format_fractional(value) {
+    if (!Number.isFinite(value))
+        return String(value);
+    const wrapped_value = ((value % 1) + 1) % 1; // wrap into [0,1)
+    const eps = 1e-3;
+    for (const [target, glyph] of FRACTION_GLYPHS) {
+        if (target === 0) {
+            if (Math.abs(wrapped_value - target) <= eps)
+                return glyph;
+        }
+        else if (Math.abs(wrapped_value - target) < eps)
+            return glyph;
+    }
+    for (const [target, glyph] of FRACTION_GLYPHS) {
+        if (target !== 0 && Math.abs(1 - wrapped_value - target) < eps)
+            return glyph;
+    }
+    return format_num(value, `.4~`);
+}
+export function parse_si_float(value) {
+    // if not string, return as is
+    if (typeof value !== `string`)
+        return value;
+    // Remove whitespace and commas
+    const cleaned = value.trim().replaceAll(/(\d),(\d)/g, `$1$2`);
+    // SI-formatted number (e.g. "1.23k", "789µ"). Suffixes are case-sensitive (m=milli vs
+    // M=mega), so no `i` flag: mismatched-case suffixes return the string as-is.
+    const match = /^([-+]?\d*\.?\d+)\s*([yzafpnµmkMGTPEZY])?$/.exec(cleaned);
+    if (match) {
+        const [, num_part, suffix] = match;
+        let multiplier = 1;
+        if (suffix) {
+            const suffixes = `yzafpnµm kMGTPEZY`;
+            const index = suffixes.indexOf(suffix);
+            if (index !== -1) {
+                multiplier = 1000 ** (index - 8);
+            }
+        }
+        return parseFloat(num_part) * multiplier;
+    }
+    // If it's a number without SI suffix, try parsing it
+    if (/^[-+]?[\d,]+\.?\d*$/.test(cleaned))
+        return parseFloat(cleaned);
+    // If the value is not a formatted number, return as is
+    return value;
+}
+export const CATEGORY_COUNTS = {
+    actinide: 15,
+    'alkali metal': 6,
+    'alkaline earth metal': 6,
+    'diatomic nonmetal': 7,
+    lanthanide: 15,
+    metalloid: 8,
+    'noble gas': 7,
+    'polyatomic nonmetal': 4,
+    'post-transition metal': 12,
+    'transition metal': 38,
+};
+export const ELEMENT_CATEGORIES = [
+    `actinide`,
+    `alkali metal`,
+    `alkaline earth metal`,
+    `diatomic nonmetal`,
+    `lanthanide`,
+    `metalloid`,
+    `noble gas`,
+    `polyatomic nonmetal`,
+    `post-transition metal`,
+    `transition metal`,
+];
+// oxfmt-ignore
+export const ELEM_SYMBOLS = [`H`, `He`, `Li`, `Be`, `B`, `C`, `N`, `O`, `F`, `Ne`, `Na`, `Mg`, `Al`, `Si`, `P`, `S`, `Cl`, `Ar`, `K`, `Ca`, `Sc`, `Ti`, `V`, `Cr`, `Mn`, `Fe`, `Co`, `Ni`, `Cu`, `Zn`, `Ga`, `Ge`, `As`, `Se`, `Br`, `Kr`, `Rb`, `Sr`, `Y`, `Zr`, `Nb`, `Mo`, `Tc`, `Ru`, `Rh`, `Pd`, `Ag`, `Cd`, `In`, `Sn`, `Sb`, `Te`, `I`, `Xe`, `Cs`, `Ba`, `La`, `Ce`, `Pr`, `Nd`, `Pm`, `Sm`, `Eu`, `Gd`, `Tb`, `Dy`, `Ho`, `Er`, `Tm`, `Yb`, `Lu`, `Hf`, `Ta`, `W`, `Re`, `Os`, `Ir`, `Pt`, `Au`, `Hg`, `Tl`, `Pb`, `Bi`, `Po`, `At`, `Rn`, `Fr`, `Ra`, `Ac`, `Th`, `Pa`, `U`, `Np`, `Pu`, `Am`, `Cm`, `Bk`, `Cf`, `Es`, `Fm`, `Md`, `No`, `Lr`, `Rf`, `Db`, `Sg`, `Bh`, `Hs`, `Mt`, `Ds`, `Rg`, `Cn`, `Nh`, `Fl`, `Mc`, `Lv`, `Ts`, `Og`];
+export const SUPERSCRIPT_MAP = {
+    '0': `⁰`,
+    '1': `¹`,
+    '2': `²`,
+    '3': `³`,
+    '4': `⁴`,
+    '5': `⁵`,
+    '6': `⁶`,
+    '7': `⁷`,
+    '8': `⁸`,
+    '9': `⁹`,
+    '+': `⁺`,
+    '-': `⁻`,
+};
+const is_superscript_key = (key) => key in SUPERSCRIPT_MAP;
+export const SUBSCRIPT_MAP = {
+    '0': `₀`,
+    '1': `₁`,
+    '2': `₂`,
+    '3': `₃`,
+    '4': `₄`,
+    '5': `₅`,
+    '6': `₆`,
+    '7': `₇`,
+    '8': `₈`,
+    '9': `₉`,
+};
+// replaces all signs and digits with their unicode superscript equivalent
+export const superscript_digits = (input) => input.replaceAll(/[\d+-]/g, (match) => is_superscript_key(match) ? SUPERSCRIPT_MAP[match] : match);
+// Trajectory property configuration: clean labels and units as structured data
+export const trajectory_property_config = {
+    // Energy properties
+    energy: { label: `Energy`, unit: `eV` },
+    Energy: { label: `Energy`, unit: `eV` },
+    energy_per_atom: { label: `Energy per atom`, unit: `eV/atom` },
+    potential_energy: { label: `Potential energy`, unit: `eV` },
+    kinetic_energy: { label: `Kinetic energy`, unit: `eV` },
+    total_energy: { label: `Total energy`, unit: `eV` },
+    // Force properties (common variations)
+    force_max: { label: `F<sub>max</sub>`, unit: `eV/Å` },
+    Fmax: { label: `F<sub>max</sub>`, unit: `eV/Å` },
+    fmax: { label: `F<sub>max</sub>`, unit: `eV/Å` },
+    'Force Max': { label: `Force Max`, unit: `eV/Å` },
+    force_norm: { label: `F<sub>norm</sub>`, unit: `eV/Å` },
+    'Force RMS': { label: `Force RMS`, unit: `eV/Å` },
+    // Structural properties
+    volume: { label: `Volume`, unit: `ų` },
+    Volume: { label: `Volume`, unit: `ų` },
+    density: { label: `Density`, unit: `g/cm³` },
+    Density: { label: `Density`, unit: `g/cm³` },
+    // Lattice parameters (common variations)
+    a: { label: `A`, unit: `Å` },
+    A: { label: `A`, unit: `Å` },
+    b: { label: `B`, unit: `Å` },
+    B: { label: `B`, unit: `Å` },
+    c: { label: `C`, unit: `Å` },
+    C: { label: `C`, unit: `Å` },
+    alpha: { label: `α`, unit: `°` },
+    Alpha: { label: `α`, unit: `°` },
+    beta: { label: `β`, unit: `°` },
+    Beta: { label: `β`, unit: `°` },
+    gamma: { label: `γ`, unit: `°` },
+    Gamma: { label: `γ`, unit: `°` },
+    // Thermodynamic properties
+    temperature: { label: `Temperature`, unit: `K` },
+    Temperature: { label: `Temperature`, unit: `K` },
+    pressure: { label: `Pressure`, unit: `GPa` },
+    Pressure: { label: `Pressure`, unit: `GPa` },
+    stress_max: { label: `σ<sub>max</sub>`, unit: `GPa` },
+    stress_frobenius: { label: `σ<sub>F</sub>`, unit: `GPa` },
+};

package/dist/layout/FullscreenToggle.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import Icon from '../Icon.svelte'
+  import type { HTMLButtonAttributes } from 'svelte/elements'
+
+  let {
+    fullscreen = $bindable(false),
+    class: className,
+    ...rest
+  }: HTMLButtonAttributes & {
+    fullscreen?: boolean
+  } = $props()
+</script>
+
+<button
+  class="fullscreen-toggle {className ?? ``}"
+  onclick={() => (fullscreen = !fullscreen)}
+  aria-label={fullscreen ? `Exit fullscreen` : `Enter fullscreen`}
+  type="button"
+  {...rest}
+>
+  <Icon
+    icon={fullscreen ? `ExitFullscreen` : `Fullscreen`}
+    width="18"
+    height="18"
+  />
+</button>
+
+<style>
+  .fullscreen-toggle {
+    position: absolute;
+    top: var(--ctrl-btn-top, 5pt);
+    right: var(--fullscreen-btn-right, 4px);
+    z-index: var(--fullscreen-btn-z-index, 10);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--fullscreen-btn-padding, 2pt);
+    border-radius: var(--fullscreen-btn-border-radius, var(--border-radius, 3pt));
+    background-color: transparent;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.2s, background-color 0.2s;
+  }
+  .fullscreen-toggle:hover, .fullscreen-toggle:focus {
+    background-color: color-mix(in srgb, currentColor 8%, transparent);
+    opacity: var(--fullscreen-btn-hover-opacity, 1);
+  }
+  /* Note: Parent component should add styles to show on parent hover */
+  /* Example: .parent:hover :global(.fullscreen-toggle) { opacity: 1; } */
+</style>

package/dist/layout/FullscreenToggle.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLButtonAttributes & {
+    fullscreen?: boolean;
+};
+declare const FullscreenToggle: import("svelte").Component<$$ComponentProps, {}, "fullscreen">;
+type FullscreenToggle = ReturnType<typeof FullscreenToggle>;
+export default FullscreenToggle;

package/dist/layout/InfoCard.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+  import { format_num } from '../labels'
+  import { sanitize_html } from '../sanitize'
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  interface Props<T extends keyof HTMLElementTagNameMap = `section`>
+    extends HTMLAttributes<HTMLElementTagNameMap[T]> {
+    data?: {
+      title: string
+      value?: string | number | number[] | null
+      unit?: string
+      fmt?: string
+      condition?: boolean | number | null
+      tooltip?: string
+    }[]
+    title?: string
+    fallback?: string
+    fmt?: string
+    as?: T
+    title_snippet?: Snippet
+    fallback_snippet?: Snippet
+  }
+  let {
+    data = [],
+    title = ``,
+    fallback = ``,
+    fmt = `.2f`,
+    as = `section`,
+    title_snippet,
+    fallback_snippet,
+    ...rest
+  }: Props = $props()
+
+  let default_fmt = $derived(fmt) // rename fmt to default_fmt for internal use
+</script>
+
+<svelte:element this={as} {...rest} class="info-card {rest.class ?? ``}">
+  {#if title || title_snippet}
+    <h2>
+      {#if title_snippet}{@render title_snippet()}{:else}
+        {@html sanitize_html(title)}
+      {/if}
+    </h2>
+  {/if}
+  {#each data.filter((itm) =>
+      (!(`condition` in itm) || itm?.condition) && itm.value !== undefined &&
+      itm.value !== null
+    ) as
+    { title, value, unit, fmt = default_fmt, tooltip }
+    (title + value + unit + fmt)
+  }
+    <div>
+      <span class="title" {title}>
+        {@html sanitize_html(title)}
+      </span>
+      <strong title={tooltip ?? null}>
+        {@html sanitize_html(typeof value == `number` ? format_num(value, fmt) : value)}
+        {#if unit}
+          <small>{unit}</small>
+        {/if}
+      </strong>
+    </div>
+  {:else}
+    {#if fallback_snippet}{@render fallback_snippet()}{:else}
+      {fallback}
+    {/if}
+  {/each}
+</svelte:element>
+
+<style>
+  .info-card {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    box-sizing: border-box;
+    border-radius: var(--ic-radius, 3pt);
+    padding: var(--ic-padding, 10pt 12pt);
+    margin: var(--ic-margin, 1em 0);
+    gap: var(--ic-gap, 10pt 5%);
+    background-color: var(
+      --ic-bg,
+      light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.1))
+    );
+    font-size: var(--ic-font-size);
+    width: var(--ic-width);
+  }
+  h2 {
+    grid-column: 1 / -1;
+    margin: 0;
+    border-bottom: 1px solid
+      var(
+        --ic-title-border-color,
+        light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.3))
+      );
+  }
+  div {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    white-space: nowrap;
+    gap: var(--ic-value-gap);
+  }
+  div > span.title {
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  strong {
+    font-weight: 600;
+    margin: var(--ic-value-margin);
+    background-color: var(
+      --ic-value-bg,
+      light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.1))
+    );
+    padding: var(--ic-value-padding, 0 4pt);
+    border-radius: var(--ic-value-radius, 3pt);
+  }
+  strong small {
+    font-weight: normal;
+  }
+</style>

package/dist/layout/InfoCard.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props<T extends keyof HTMLElementTagNameMap = `section`> extends HTMLAttributes<HTMLElementTagNameMap[T]> {
+    data?: {
+        title: string;
+        value?: string | number | number[] | null;
+        unit?: string;
+        fmt?: string;
+        condition?: boolean | number | null;
+        tooltip?: string;
+    }[];
+    title?: string;
+    fallback?: string;
+    fmt?: string;
+    as?: T;
+    title_snippet?: Snippet;
+    fallback_snippet?: Snippet;
+}
+declare const InfoCard: import("svelte").Component<Props<"section">, {}, "">;
+type InfoCard = ReturnType<typeof InfoCard>;
+export default InfoCard;

package/dist/layout/InfoTag.svelte

@@ -0,0 +1,185 @@
+<script lang="ts">
+  import Icon from '../Icon.svelte'
+  import { sanitize_html } from '../sanitize'
+  import type { Snippet } from 'svelte'
+  import { tooltip } from 'svelte-multiselect/attachments'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import type { InfoTagSize, InfoTagVariant } from './index'
+
+  let {
+    label,
+    value,
+    copy_value,
+    title,
+    variant = `default`,
+    size = `md`,
+    removable = false,
+    disabled = false,
+    onclick,
+    onremove,
+    children,
+    ...rest
+  }: {
+    label: string // Label text (supports HTML)
+    value: string | number | undefined // Value to display (supports HTML)
+    copy_value?: string | number // Value to copy to clipboard (defaults to value)
+    title?: string // Tooltip text
+    variant?: InfoTagVariant // Visual variant for semantic meaning
+    size?: InfoTagSize // Size variant
+    removable?: boolean // Show remove/close button
+    disabled?: boolean // Disable interactions
+    onclick?: (event: MouseEvent) => void // Custom click handler (overrides copy-to-clipboard default)
+    onremove?: () => void // Callback when remove button is clicked
+    children?: Snippet<[]> // Additional content to render inside the tag
+  } & Omit<HTMLAttributes<HTMLSpanElement>, `onclick` | `onkeydown`> = $props()
+
+  let just_copied = $state(false)
+
+  async function copy_to_clipboard(): Promise<void> {
+    const to_copy = copy_value ?? value
+    if (to_copy === undefined) return
+    await navigator.clipboard.writeText(String(to_copy))
+    just_copied = true
+    setTimeout(() => (just_copied = false), 1000)
+  }
+
+  function handle_click(event: MouseEvent): void {
+    if (disabled) return
+    if (onclick) onclick(event)
+    else void copy_to_clipboard()
+  }
+
+  function handle_keydown(
+    event: KeyboardEvent & { currentTarget: HTMLElement },
+  ): void {
+    if (disabled || (event.key !== `Enter` && event.key !== ` `)) return
+    event.preventDefault()
+    event.currentTarget.click()
+  }
+
+  function handle_remove(event: MouseEvent): void {
+    event.stopPropagation()
+    onremove?.()
+  }
+</script>
+
+<span
+  role="button"
+  tabindex={disabled ? -1 : 0}
+  onclick={handle_click}
+  onkeydown={handle_keydown}
+  title={sanitize_html(title)}
+  {@attach tooltip({ allow_html: true })}
+  class="info-tag {variant} {size}"
+  class:disabled
+  aria-disabled={disabled}
+  {...rest}
+>
+  {@html sanitize_html(label)}
+  <em>{@html sanitize_html(value)}</em>
+  {#if just_copied}
+    <Icon
+      icon="Check"
+      style="color: var(--success-color, #10b981); width: 12px; height: 12px"
+      class="copy-checkmark"
+    />
+  {/if}
+  {#if removable && !disabled}
+    <button type="button" onclick={handle_remove} aria-label="Remove">
+      <Icon icon="Close" style="width: 10px; height: 10px" />
+    </button>
+  {/if}
+  {@render children?.()}
+</span>
+
+<style>
+  .info-tag {
+    cursor: pointer;
+    position: relative;
+    transition: all 0.12s;
+    border: 1px solid;
+    white-space: nowrap;
+    border-color: color-mix(in srgb, var(--tag-color) 25%, transparent);
+    em {
+      font-style: normal;
+      font-weight: 600;
+      color: var(--tag-color);
+    }
+    &:hover:not(.disabled) {
+      background: color-mix(in srgb, var(--tag-color) 18%, transparent);
+      border-color: color-mix(in srgb, var(--tag-color) 40%, transparent);
+    }
+    &.sm {
+      font-size: 0.72em;
+      padding: 0 5pt;
+      border-radius: 4px;
+    }
+    &.md {
+      font-size: 0.8em;
+      padding: 1pt 6pt;
+      border-radius: 5px;
+    }
+    &.lg {
+      font-size: 0.9em;
+      padding: 3pt 8pt;
+      border-radius: 6px;
+    }
+    &.default {
+      --tag-color: var(--highlight, #4db6ff);
+    }
+    &.success {
+      --tag-color: var(--success-color, #10b981);
+    }
+    &.warning {
+      --tag-color: var(--warning-color, #f59e0b);
+    }
+    &.error {
+      --tag-color: var(--error-color, #ef4444);
+    }
+    &.info {
+      --tag-color: var(--info-color, #3b82f6);
+    }
+    &.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    &:active:not(.disabled) {
+      transform: scale(0.97);
+    }
+    :global(.copy-checkmark) {
+      position: absolute;
+      top: 50%;
+      right: 3pt;
+      transform: translateY(-50%);
+      background: rgba(16, 185, 129, 0.9);
+      border-radius: 50%;
+      padding: 2pt;
+      display: flex;
+      animation: pop-in 0.15s ease-out;
+    }
+  }
+  [aria-label='Remove'] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(128, 128, 128, 0.1);
+    border: none;
+    cursor: pointer;
+    padding: 2pt;
+    margin-left: 2pt;
+    border-radius: 50%;
+    color: inherit;
+    opacity: 0.5;
+    &:hover {
+      opacity: 1;
+      background: rgba(239, 68, 68, 0.2);
+      color: var(--error-color, #ef4444);
+    }
+  }
+  @keyframes pop-in {
+    from {
+      opacity: 0;
+      transform: translateY(-50%) scale(0.5);
+    }
+  }
+</style>

package/dist/layout/InfoTag.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { InfoTagSize, InfoTagVariant } from './index';
+type $$ComponentProps = {
+    label: string;
+    value: string | number | undefined;
+    copy_value?: string | number;
+    title?: string;
+    variant?: InfoTagVariant;
+    size?: InfoTagSize;
+    removable?: boolean;
+    disabled?: boolean;
+    onclick?: (event: MouseEvent) => void;
+    onremove?: () => void;
+    children?: Snippet<[]>;
+} & Omit<HTMLAttributes<HTMLSpanElement>, `onclick` | `onkeydown`>;
+declare const InfoTag: import("svelte").Component<$$ComponentProps, {}, "">;
+type InfoTag = ReturnType<typeof InfoTag>;
+export default InfoTag;