matterviz 0.3.6 → 0.4.0

package/dist/src/lib/labels.ts

@@ -1,320 +0,0 @@
-import type { ChemicalElement, ElementCategory } from '$lib/element/types'
-import type { Vec3 } from '$lib/math'
-import { format } from 'd3-format'
-import type { SymbolType } from 'd3-shape'
-import * as d3_symbols from 'd3-shape'
-import { timeFormat } from 'd3-time-format'
-
-// Symbol types and formatting utilities from d3-shape
-export type D3Symbol = keyof typeof d3_symbols & `symbol${Capitalize<string>}`
-export type D3SymbolName = Exclude<D3Symbol extends `symbol${infer Name}` ? Name : never, ``>
-
-const is_d3_symbol_name = (name: string): name is D3SymbolName =>
-  Object.hasOwn(d3_symbols, `symbol${name}`)
-
-function name_for_symbol(sym: unknown): D3SymbolName | null {
-  for (const [key, symbol] of Object.entries(d3_symbols)) {
-    if (symbol === sym && /^symbol[A-Z]/.test(key)) {
-      const name = key.substring(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 is D3SymbolName => n !== null)
-
-export const symbol_map: Partial<Record<D3SymbolName, SymbolType>> = 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: number, formatter?: string): string {
-  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).replace(/−/g, `-`)
-
-  // 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: Partial<
-  Record<keyof ChemicalElement, [string, string | null]>
-> = {
-  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)`],
-} as const
-
-export const ELEM_HEATMAP_KEYS: (keyof ChemicalElement)[] = [
-  `atomic_mass`,
-  `atomic_radius`,
-  `covalent_radius`,
-  `electronegativity`,
-  `density`,
-  `boiling_point`,
-  `melting_point`,
-  `first_ionization`,
-]
-
-export const ELEM_HEATMAP_LABELS: Partial<Record<string, keyof ChemicalElement>> =
-  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: [string, string] = [`,.3~s`, `.3~g`]
-
-// Unicode glyphs for common fractions used by format_fractional()
-export const FRACTION_GLYPHS: ReadonlyArray<readonly [number, string]> = [
-  [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: number, fmt?: string | number) => {
-  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: Readonly<Vec3>, fmt_spec = `.4~`): string =>
-  `(${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`] as const
-
-// Format file sizes using IEC binary units (1024 factor).
-export const format_bytes = (bytes?: number): string => {
-  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: number): string {
-  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<T extends string | number | null | undefined>(
-  value: T,
-): T | number | string {
-  // if not string, return as is
-  if (typeof value !== `string`) return value
-  // Remove whitespace and commas
-  const cleaned = value.trim().replace(/(\d),(\d)/g, `$1$2`)
-
-  // Check if the value is a SI-formatted number (e.g. "1.23k", "4.56M", "789µ", "12n")
-  const match = /^([-+]?\d*\.?\d+)\s*([yzafpnµmkMGTPEZY])?$/i.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 = Math.pow(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: Record<ElementCategory, number> = {
-  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`,
-] as const
-
-// 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`] as const
-
-export const SUPERSCRIPT_MAP = {
-  '0': `⁰`,
-  '1': `¹`,
-  '2': `²`,
-  '3': `³`,
-  '4': `⁴`,
-  '5': `⁵`,
-  '6': `⁶`,
-  '7': `⁷`,
-  '8': `⁸`,
-  '9': `⁹`,
-  '+': `⁺`,
-  '-': `⁻`,
-} as const
-const is_superscript_key = (key: string): key is keyof typeof SUPERSCRIPT_MAP =>
-  key in SUPERSCRIPT_MAP
-export const SUBSCRIPT_MAP = {
-  '0': `₀`,
-  '1': `₁`,
-  '2': `₂`,
-  '3': `₃`,
-  '4': `₄`,
-  '5': `₅`,
-  '6': `₆`,
-  '7': `₇`,
-  '8': `₈`,
-  '9': `₉`,
-} as const
-
-// replaces all signs and digits with their unicode superscript equivalent
-export const superscript_digits = (input: string): string =>
-  input.replace(/[\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: Record<string, { label: string; unit: string }> = {
-  // 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/src/lib/layout/FullscreenToggle.svelte

@@ -1,50 +0,0 @@
-<script lang="ts">
-  import Icon from '$lib/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/src/lib/layout/InfoCard.svelte

@@ -1,120 +0,0 @@
-<script lang="ts">
-  import { format_num } from '$lib/labels'
-  import { sanitize_html } from '$lib/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/src/lib/layout/InfoTag.svelte

@@ -1,185 +0,0 @@
-<script lang="ts">
-  import Icon from '$lib/Icon.svelte'
-  import { sanitize_html } from '$lib/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>