mgv-backoffice 1.21.0 → 1.23.0

package/src/components/BaseSegmentedControl.test.ts

@@ -0,0 +1,78 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BaseSegmentedControl from './BaseSegmentedControl.vue'
+import type { SegmentedOption } from '../types/segmented'
+
+const options: SegmentedOption[] = [
+  { value: 'ALL', label: 'All' },
+  { value: 'STOCK', label: 'Stock' },
+  { value: 'CRYPTO', label: 'Crypto', title: 'Crypto pairs' },
+]
+
+describe('BaseSegmentedControl', () => {
+  it('renders one button per option and marks the selected one', () => {
+    const wrapper = mount(BaseSegmentedControl, {
+      props: { options, modelValue: 'STOCK' },
+    })
+    const buttons = wrapper.findAll('button')
+    expect(buttons.map((b) => b.text())).toEqual(['All', 'Stock', 'Crypto'])
+    expect(buttons[1].attributes('aria-pressed')).toBe('true')
+    expect(buttons[0].attributes('aria-pressed')).toBe('false')
+    expect(buttons[1].classes()).toContain('bg-emerald-500')
+    expect(buttons[0].classes()).toContain('bg-slate-50')
+    expect(buttons[2].attributes('title')).toBe('Crypto pairs')
+  })
+
+  it('emits update:modelValue with the clicked option value', async () => {
+    const wrapper = mount(BaseSegmentedControl, {
+      props: { options, modelValue: 'ALL' },
+    })
+    await wrapper.findAll('button')[2].trigger('click')
+    expect(wrapper.emitted('update:modelValue')).toEqual([['CRYPTO']])
+  })
+
+  it('uses the emerald-600 fill and wider padding in the wide variant', () => {
+    const wrapper = mount(BaseSegmentedControl, {
+      props: { options, modelValue: 'ALL', variant: 'wide' },
+    })
+    const active = wrapper.findAll('button')[0]
+    expect(active.classes()).toContain('bg-emerald-600')
+    expect(active.classes()).toContain('px-4')
+  })
+
+  it('renders the toolbar variant with h-9 divide-x wrapper and uppercase buttons', () => {
+    const wrapper = mount(BaseSegmentedControl, {
+      props: { options, modelValue: 'ALL', variant: 'toolbar' },
+    })
+    expect(wrapper.find('div').classes()).toContain('h-9')
+    expect(wrapper.find('div').classes()).toContain('divide-x')
+    expect(wrapper.findAll('button')[0].classes()).toContain('uppercase')
+  })
+
+  it('announces itself as a labelled group only when ariaLabel is set', () => {
+    const labelled = mount(BaseSegmentedControl, {
+      props: { options, modelValue: 'ALL', ariaLabel: 'Exchange' },
+    })
+    expect(labelled.find('div').attributes('role')).toBe('group')
+    expect(labelled.find('div').attributes('aria-label')).toBe('Exchange')
+
+    const bare = mount(BaseSegmentedControl, { props: { options, modelValue: 'ALL' } })
+    expect(bare.find('div').attributes('role')).toBeUndefined()
+  })
+
+  it('lets optionClass override the fill classes per option', () => {
+    const wrapper = mount(BaseSegmentedControl, {
+      props: {
+        options,
+        modelValue: 'ALL',
+        optionClass: (opt: SegmentedOption, active: boolean) =>
+          active ? 'bg-red-500 text-white' : 'text-red-600',
+      },
+    })
+    const buttons = wrapper.findAll('button')
+    expect(buttons[0].classes()).toContain('bg-red-500')
+    expect(buttons[1].classes()).toContain('text-red-600')
+    // Layout classes stay owned by the variant.
+    expect(buttons[0].classes()).toContain('px-3')
+  })
+})

package/src/components/BaseSegmentedControl.vue

@@ -0,0 +1,98 @@
+<template>
+  <!--
+    Segmented button group ("Class: All | Stock | Crypto"). One button per
+    option; the selected one gets the filled treatment and aria-pressed.
+
+    Variants:
+      • base    — px-3 py-2 text-sm buttons, emerald-500 active fill
+      • wide    — px-4 py-2 buttons, emerald-600 active fill
+      • toolbar — h-9 uppercase text-xs buttons with focus-visible rings
+                  (divide-x separators instead of border-l)
+
+    `optionClass` overrides the per-button fill classes (e.g. severity
+    colours per option); layout classes stay owned by the variant.
+    Same `dark:`-variant note as BaseInput.
+  -->
+  <div
+    :role="ariaLabel ? 'group' : undefined"
+    :aria-label="ariaLabel || undefined"
+    :class="wrapClass"
+  >
+    <button
+      v-for="opt in options"
+      :key="String(opt.value)"
+      type="button"
+      :class="[buttonClass, fillClass(opt)]"
+      :aria-pressed="opt.value === modelValue"
+      :title="opt.title"
+      @click="emit('update:modelValue', opt.value)"
+    >
+      {{ opt.label }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { SegmentedOption } from '../types/segmented'
+
+// NOT generic on purpose: vite-plugin-dts flattens SFC generics out of the
+// emitted declarations, so consumers would see the erased constraint anyway.
+// The update:modelValue payload is `any` so `v-model` on a union-typed ref
+// ('all' | 'STOCK' | …) type-checks; the actual payload is always one of the
+// options' values.
+interface Props {
+  options: readonly SegmentedOption[]
+  modelValue: string | number
+  variant?: 'base' | 'wide' | 'toolbar'
+  /** When set, the wrapper announces itself as a labelled group. */
+  ariaLabel?: string
+  /**
+   * Override the fill (colour) classes per button — receives the option and
+   * whether it is the selected one. Defaults to the variant's emerald/slate
+   * treatment.
+   */
+  optionClass?: (option: SegmentedOption, active: boolean) => string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'base',
+  ariaLabel: '',
+  optionClass: undefined,
+})
+
+const emit = defineEmits<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (e: 'update:modelValue', value: any): void
+}>()
+
+const wrapClass = computed(() =>
+  props.variant === 'toolbar'
+    ? 'inline-flex h-9 divide-x divide-slate-300 dark:divide-slate-600 rounded-md border border-slate-300 dark:border-slate-600 overflow-hidden'
+    : 'inline-flex rounded border border-slate-300 dark:border-slate-600 overflow-hidden',
+)
+
+const buttonClass = computed(() => {
+  if (props.variant === 'toolbar') {
+    return (
+      'flex items-center px-3.5 text-xs font-semibold uppercase tracking-wide transition-colors ' +
+      'focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-500'
+    )
+  }
+  const padding = props.variant === 'wide' ? 'px-4 py-2' : 'px-3 py-2'
+  return `${padding} text-sm font-medium transition-colors border-l first:border-l-0 border-slate-300 dark:border-slate-600`
+})
+
+const activeFill = computed(() =>
+  props.variant === 'wide' ? 'bg-emerald-600 text-white' : 'bg-emerald-500 text-white',
+)
+
+const idleFill =
+  'bg-slate-50 dark:bg-slate-900 text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800'
+
+function fillClass(opt: SegmentedOption): string {
+  const active = opt.value === props.modelValue
+  if (props.optionClass) return props.optionClass(opt, active)
+  return active ? activeFill.value : idleFill
+}
+</script>

package/src/components/BaseSelect.test.ts

@@ -0,0 +1,37 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BaseSelect from './BaseSelect.vue'
+
+const slots = {
+  default: '<option value="a">A</option><option value="b">B</option>',
+}
+
+describe('BaseSelect', () => {
+  it('renders the field skin, full-width compact by default', () => {
+    const wrapper = mount(BaseSelect, { slots })
+    const select = wrapper.find('select')
+    expect(select.classes()).toEqual(
+      expect.arrayContaining(['rounded', 'border', 'w-full', 'px-2', 'py-1.5', 'text-sm']),
+    )
+  })
+
+  it('supports md size and inline (non-block) layout', () => {
+    const wrapper = mount(BaseSelect, { props: { size: 'md', block: false }, slots })
+    const select = wrapper.find('select')
+    expect(select.classes()).toEqual(expect.arrayContaining(['px-3', 'py-2']))
+    expect(select.classes()).not.toContain('w-full')
+  })
+
+  it('reflects modelValue and emits the selected value on change', async () => {
+    const wrapper = mount(BaseSelect, { props: { modelValue: 'a' }, slots })
+    const select = wrapper.find('select')
+    expect((select.element as HTMLSelectElement).value).toBe('a')
+    await select.setValue('b')
+    expect(wrapper.emitted('update:modelValue')).toEqual([['b']])
+  })
+
+  it('renders caller-provided options via the default slot', () => {
+    const wrapper = mount(BaseSelect, { slots })
+    expect(wrapper.findAll('option').map((o) => o.text())).toEqual(['A', 'B'])
+  })
+})

package/src/components/BaseSelect.vue

@@ -0,0 +1,46 @@
+<template>
+  <!--
+    Themed select sharing BaseInput's field skin. Options come from the
+    default slot so callers keep full control of <option> rendering (values,
+    titles, disabled entries). Attrs (id, disabled, extra classes) fall
+    through. Same `dark:`-variant note as BaseInput.
+  -->
+  <select
+    :value="modelValue"
+    class="rounded border border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100 text-sm"
+    :class="[block ? 'w-full' : '', size === 'md' ? 'px-3 py-2' : 'px-2 py-1.5']"
+    @change="onChange"
+  >
+    <slot />
+  </select>
+</template>
+
+<script setup lang="ts">
+// String-valued only — a DOM select always yields strings; use v-model.number
+// semantics in the owner if needed. The update:modelValue payload is `any`
+// (not generic: vite-plugin-dts flattens SFC generics out of the emitted
+// declarations) so `v-model` on a union-typed ref ('7D' | '30D' | …)
+// type-checks; the actual payload is always the selected option's string.
+interface Props {
+  modelValue?: string | null
+  /** 'sm' = px-2 py-1.5 (default, the usual select height); 'md' = px-3 py-2. */
+  size?: 'sm' | 'md'
+  /** Full-width (w-full). Set false for inline selects. */
+  block?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  modelValue: undefined,
+  size: 'sm',
+  block: true,
+})
+
+const emit = defineEmits<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (e: 'update:modelValue', value: any): void
+}>()
+
+function onChange(e: Event) {
+  emit('update:modelValue', (e.target as HTMLSelectElement).value)
+}
+</script>

package/src/components/BaseSpecFields.test.ts

@@ -0,0 +1,78 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BaseSpecFields from './BaseSpecFields.vue'
+import type { SpecField } from '../types/specField'
+
+const specs: SpecField[] = [
+  { key: 'mode', label: 'Mode', type: 'select', options: ['fast', 'slow'] },
+  { key: 'enabled', label: 'Enabled', type: 'boolean' },
+  { key: 'threshold', label: 'Threshold', type: 'decimal', min: 0, help: 'Trigger level.' },
+  { key: 'lookback', label: 'Lookback', type: 'integer' },
+]
+
+const params = { mode: 'fast', enabled: true, threshold: 1.5, lookback: 10 }
+
+function mountFields(extra = {}) {
+  return mount(BaseSpecFields, { props: { specs, params }, ...extra })
+}
+
+describe('BaseSpecFields', () => {
+  it('renders a select, a checkbox and number inputs per spec type', () => {
+    const wrapper = mountFields()
+    expect(wrapper.findAll('select')).toHaveLength(1)
+    expect(wrapper.findAll('input[type="checkbox"]')).toHaveLength(1)
+    expect(wrapper.findAll('input[type="number"]')).toHaveLength(2)
+    expect(wrapper.text()).toContain('Trigger level.')
+  })
+
+  it('defaults numeric steps to 1 for integers and 0.01 for decimals', () => {
+    const inputs = mountFields().findAll('input[type="number"]')
+    expect(inputs[0].attributes('step')).toBe('0.01')
+    expect(inputs[1].attributes('step')).toBe('1')
+    expect(inputs[0].attributes('min')).toBe('0')
+  })
+
+  it('emits update(key, value) for select changes', async () => {
+    const wrapper = mountFields()
+    await wrapper.find('select').setValue('slow')
+    expect(wrapper.emitted('update')).toEqual([['mode', 'slow']])
+  })
+
+  it('emits update(key, checked) for checkbox toggles', async () => {
+    const wrapper = mountFields()
+    await wrapper.find('input[type="checkbox"]').setValue(false)
+    expect(wrapper.emitted('update')).toEqual([['enabled', false]])
+  })
+
+  it('parses numeric input, passing unparseable values through raw', async () => {
+    const wrapper = mountFields()
+    const threshold = wrapper.findAll('input[type="number"]')[0]
+    await threshold.setValue('2.25')
+    await threshold.setValue('')
+    expect(wrapper.emitted('update')).toEqual([
+      ['threshold', 2.25],
+      ['threshold', ''],
+    ])
+  })
+
+  it('never mutates params directly', async () => {
+    const frozen = Object.freeze({ ...params })
+    const wrapper = mount(BaseSpecFields, { props: { specs, params: frozen } })
+    await wrapper.find('select').setValue('slow')
+    expect(frozen.mode).toBe('fast')
+  })
+
+  it('exposes each spec to the after slot', () => {
+    const wrapper = mountFields({
+      slots: {
+        after: `<template #after="{ spec }"><p class="after-probe">{{ spec.key }}</p></template>`,
+      },
+    })
+    expect(wrapper.findAll('.after-probe').map((p) => p.text())).toEqual([
+      'mode',
+      'enabled',
+      'threshold',
+      'lookback',
+    ])
+  })
+})

package/src/components/BaseSpecFields.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import BaseInput from './BaseInput.vue'
+import BaseSelect from './BaseSelect.vue'
+import type { SpecField, SpecFieldValue } from '../types/specField'
+
+// Spec-driven form fields: renders a select / checkbox / number input per
+// field spec, with labels and help text, in a responsive two-column grid.
+// Feed it a backend-described catalogue (or any SpecField[]) and every form
+// that edits those values stays in lockstep.
+//
+// The component never mutates `params`: every edit is emitted as
+// (key, value) and the owner writes it back into its own form state.
+defineProps<{
+  specs: SpecField[]
+  params: Record<string, SpecFieldValue>
+}>()
+
+const emit = defineEmits<{
+  (e: 'update', key: string, value: SpecFieldValue): void
+}>()
+
+// Per-spec extra content rendered under a field (e.g. a live preview a
+// caller attaches to one specific key).
+defineSlots<{
+  after?: (props: { spec: SpecField }) => unknown
+}>()
+
+function onCheckbox(key: string, e: Event) {
+  emit('update', key, (e.target as HTMLInputElement).checked)
+}
+
+// Mirror v-model.number: a parseable value becomes a number, anything else
+// (including a cleared field, which becomes '') passes through as the raw
+// string so the owner's "enter a valid number" validation can catch it.
+function onNumber(key: string, raw: string) {
+  const n = parseFloat(raw)
+  emit('update', key, Number.isNaN(n) ? raw : n)
+}
+</script>
+
+<template>
+  <div class="grid gap-3 md:grid-cols-2">
+    <div v-for="spec in specs" :key="spec.key">
+      <label
+        v-if="spec.type !== 'boolean'"
+        class="block text-[11px] uppercase tracking-wide text-slate-500 mb-1"
+      >
+        {{ spec.label }}
+      </label>
+
+      <BaseSelect
+        v-if="spec.type === 'select'"
+        :modelValue="String(params[spec.key] ?? '')"
+        @update:modelValue="(v: string) => emit('update', spec.key, v)"
+      >
+        <option v-for="opt in spec.options ?? []" :key="opt" :value="opt">{{ opt }}</option>
+      </BaseSelect>
+
+      <label v-else-if="spec.type === 'boolean'" class="flex items-center gap-2 mt-4">
+        <input
+          :checked="Boolean(params[spec.key])"
+          type="checkbox"
+          class="h-4 w-4"
+          @change="onCheckbox(spec.key, $event)"
+        />
+        <span class="text-sm text-slate-900 dark:text-slate-100">{{ spec.label }}</span>
+      </label>
+
+      <BaseInput
+        v-else
+        :modelValue="params[spec.key] as string | number"
+        type="number"
+        :step="spec.step ?? (spec.type === 'integer' ? 1 : 0.01)"
+        :min="spec.min ?? undefined"
+        @update:modelValue="(v: string) => onNumber(spec.key, v)"
+      />
+
+      <p v-if="spec.help" class="text-[11px] text-slate-400 mt-1">{{ spec.help }}</p>
+
+      <slot name="after" :spec="spec" />
+    </div>
+  </div>
+</template>

package/src/components/BaseTable.test.ts

@@ -0,0 +1,55 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BaseTable from './BaseTable.vue'
+import type { TableColumn } from '../types/table'
+
+const columns: TableColumn[] = [
+  { label: 'Symbol' },
+  { label: 'Qty', align: 'right' },
+  { label: 'Bought' },
+]
+
+describe('BaseTable', () => {
+  it('renders header cells with right-alignment where requested', () => {
+    const wrapper = mount(BaseTable, { props: { columns } })
+    const ths = wrapper.findAll('th')
+    expect(ths.map((th) => th.text())).toEqual(['Symbol', 'Qty', 'Bought'])
+    expect(ths[1].classes()).toContain('text-right')
+    expect(ths[0].classes()).not.toContain('text-right')
+    expect(ths[0].classes()).toEqual(expect.arrayContaining(['px-4', 'py-3']))
+  })
+
+  it('renders caller rows through the default slot', () => {
+    const wrapper = mount(BaseTable, {
+      props: { columns },
+      slots: { default: '<tr><td>AMD</td><td>3</td><td>today</td></tr>' },
+    })
+    expect(wrapper.find('tbody td').text()).toBe('AMD')
+    expect(wrapper.find('table').classes()).toEqual(expect.arrayContaining(['w-full', 'text-sm']))
+  })
+
+  it('renders the empty-state row spanning every column when empty', () => {
+    const wrapper = mount(BaseTable, {
+      props: { columns, empty: true, emptyText: 'Nothing here.' },
+    })
+    const td = wrapper.find('tbody td')
+    expect(td.attributes('colspan')).toBe('3')
+    expect(td.text()).toBe('Nothing here.')
+  })
+
+  it('prefers the empty slot over emptyText', () => {
+    const wrapper = mount(BaseTable, {
+      props: { columns, empty: true, emptyText: 'fallback' },
+      slots: { empty: 'No trades match your filters.' },
+    })
+    expect(wrapper.find('tbody td').text()).toBe('No trades match your filters.')
+  })
+
+  it('renders no empty-state row when not empty', () => {
+    const wrapper = mount(BaseTable, {
+      props: { columns, empty: false },
+      slots: { default: '<tr><td>row</td></tr>' },
+    })
+    expect(wrapper.findAll('tbody tr')).toHaveLength(1)
+  })
+})

package/src/components/BaseTable.vue

@@ -0,0 +1,50 @@
+<template>
+  <!--
+    Styling shell for data tables — NOT a data grid. Owns the table skin
+    (slate header band, px-4 py-3 header cells, empty-state row); rows are
+    the caller's own <tr> markup via the default slot, so cell content and
+    per-cell styling stay fully in the caller's hands.
+
+    Wrap it yourself for scrolling/card chrome (e.g. inside a BaseRow with
+    overflow-x-auto). Same `dark:`-variant note as BaseInput.
+  -->
+  <table class="w-full text-sm">
+    <thead class="bg-slate-50 dark:bg-slate-800/60 text-slate-600 dark:text-slate-300">
+      <tr class="text-left">
+        <th
+          v-for="(col, i) in columns"
+          :key="i"
+          class="px-4 py-3"
+          :class="col.align === 'right' ? 'text-right' : ''"
+        >
+          {{ col.label }}
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-if="empty">
+        <td :colspan="columns.length" class="px-4 py-12 text-center text-slate-500">
+          <slot name="empty">{{ emptyText }}</slot>
+        </td>
+      </tr>
+      <slot />
+    </tbody>
+  </table>
+</template>
+
+<script setup lang="ts">
+import type { TableColumn } from '../types/table'
+
+interface Props {
+  columns: TableColumn[]
+  /** True when there are no rows — renders the empty-state row. */
+  empty?: boolean
+  /** Fallback empty-state text; the `empty` slot overrides it. */
+  emptyText?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  empty: false,
+  emptyText: 'No rows.',
+})
+</script>

package/src/components/EarningsCard.test.ts

@@ -36,6 +36,36 @@ describe('EarningsCard', () => {
     expect(w.html()).toContain('border-red-300')
   })
 
+  describe('compact mode', () => {
+    it('keeps the large layout by default (backward compatibility)', () => {
+      const w = mount(EarningsCard, { props: { amount: 1 } })
+      expect(w.html()).toContain('p-6')
+      expect(w.html()).toContain('text-4xl')
+      expect(w.html()).not.toContain('text-lg')
+    })
+
+    it('renders tighter padding and smaller type when compact', () => {
+      const w = mount(EarningsCard, { props: { amount: 1, compact: true } })
+      const html = w.html()
+      expect(html).toContain('p-3')
+      expect(html).toContain('text-lg')
+      expect(html).not.toContain('text-4xl')
+    })
+
+    it('moves the trend glyph into the top-right corner when compact', () => {
+      const w = mount(EarningsCard, { props: { amount: 1, compact: true } })
+      expect(w.html()).toContain('absolute right-2 top-2')
+    })
+
+    it('still applies the signed loss theme in compact mode', () => {
+      const w = mount(EarningsCard, {
+        props: { amount: -5, compact: true, signed: true, accent: 'emerald' },
+      })
+      expect(w.html()).toContain('border-red-300')
+      expect(w.html()).toContain('p-3')
+    })
+  })
+
   describe('signed (P&L) mode', () => {
     // The "up-trend" arrowhead the default glyph uses; absent in the loss glyph.
     const UP_GLYPH = 'points="16 7 22 7 22 13"'

package/src/components/EarningsCard.vue

@@ -29,6 +29,15 @@ interface Props {
    * card for always-positive totals like lifetime earnings — are unaffected.
    */
   signed?: boolean
+  /**
+   * Dense variant for dashboards that tile many cards on one row: tighter
+   * padding, smaller type, and the trend glyph shrunk into the top-right
+   * corner (absolutely positioned so the amount keeps the full card width —
+   * important for long values like 8-decimal BTC quantities). Don't combine
+   * with `badge`: both occupy the top-right corner. Defaults to `false` so
+   * existing consumers keep the large layout.
+   */
+  compact?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -40,6 +49,7 @@ const props = withDefaults(defineProps<Props>(), {
   decimals: 2,
   accent: 'orange',
   signed: false,
+  compact: false,
 })
 
 const ACCENTS: Record<Accent, {
@@ -104,8 +114,8 @@ const formattedAmount = computed(
 
 <template>
   <div
-    class="relative rounded-xl border-2 border-dashed bg-white p-6 dark:bg-slate-800"
-    :class="cls.border"
+    class="relative rounded-xl border-2 border-dashed bg-white dark:bg-slate-800"
+    :class="[cls.border, compact ? 'p-3' : 'p-6']"
   >
     <!-- Badge -->
     <div
@@ -118,31 +128,38 @@ const formattedAmount = computed(
 
     <!-- Header row -->
     <div class="flex items-start justify-between">
-      <div>
-        <!-- Title -->
-        <p class="text-sm font-bold tracking-wide text-gray-800 dark:text-slate-200">
+      <div class="min-w-0">
+        <!-- Title: pr-8 in compact reserves only the corner the absolute icon
+             occupies — the amount below keeps the full card width so long
+             values (8-decimal BTC quantities) don't truncate. -->
+        <p
+          class="font-bold tracking-wide text-gray-800 dark:text-slate-200"
+          :class="compact ? 'pr-8 text-xs' : 'text-sm'"
+        >
           {{ title }}
         </p>
 
         <!-- Amount -->
-        <p class="mt-1 text-4xl font-bold" :class="cls.amount">
+        <p class="mt-1 font-bold truncate" :class="[cls.amount, compact ? 'text-lg' : 'text-4xl']">
           {{ formattedAmount }}
         </p>
 
         <!-- Subtitle -->
-        <p class="mt-1 text-sm font-medium" :class="cls.subtitle">
+        <p class="mt-1 font-medium" :class="[cls.subtitle, compact ? 'text-xs' : 'text-sm']">
           {{ subtitle }}
         </p>
       </div>
 
       <!-- Chart icon -->
       <div
-        class="mt-6 flex h-12 w-12 items-center justify-center rounded-xl"
-        :class="cls.iconBox"
+        class="flex items-center justify-center"
+        :class="[
+          cls.iconBox,
+          compact ? 'absolute right-2 top-2 h-6 w-6 rounded-lg' : 'mt-6 h-12 w-12 rounded-xl',
+        ]"
       >
         <svg
-          class="h-6 w-6"
-          :class="cls.icon"
+          :class="[cls.icon, compact ? 'h-3.5 w-3.5' : 'h-6 w-6']"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"

package/src/index.ts

@@ -34,6 +34,13 @@ export { default as BaseGoogleSignInButton } from './components/BaseGoogleSignIn
 export { default as BaseLoginForm } from './components/BaseLoginForm.vue'
 export { default as BaseNotificationPanel } from './components/BaseNotificationPanel.vue'
 
+// Components — extracted from TradeAutomation
+export { default as BaseInput } from './components/BaseInput.vue'
+export { default as BaseSelect } from './components/BaseSelect.vue'
+export { default as BaseSegmentedControl } from './components/BaseSegmentedControl.vue'
+export { default as BaseTable } from './components/BaseTable.vue'
+export { default as BaseSpecFields } from './components/BaseSpecFields.vue'
+
 // Composables
 export { useTheme, initTheme } from './composables/useTheme'
 export type { UseThemeOptions } from './composables/useTheme'
@@ -65,6 +72,9 @@ export type { NavItem, NavSection } from './types/sidebar'
 export type { EntityPickerItem } from './types/entityPicker'
 export type { LoginCredentials } from './types/auth'
 export type { NotificationItem } from './types/notification'
+export type { SegmentedOption } from './types/segmented'
+export type { TableColumn } from './types/table'
+export type { SpecField, SpecFieldType, SpecFieldValue } from './types/specField'
 
 // Utils
 export { getBaseColor, getBaseColorOf } from './utils/util'