@tekkare/romulus 0.1.209 → 0.1.211

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.16.0"
   },
-  "version": "0.1.208",
+  "version": "0.1.210",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/components/Dashboard.vue

@@ -0,0 +1,290 @@
+<!--
+  RmDashboard - un tableau de bord a widgets, a la maniere de PostHog : les
+  lecteurs ajoutent des widgets tires du catalogue de l'app, les reglent, les
+  deplacent et les redimensionnent.
+
+  Le composant ne porte que l'ecran : la barre d'etat et ses boutons, les
+  etats chargement, erreur, vide, la grille (RmDashboardGrid) et le tiroir
+  d'edition. L'etat (chargement, sauvegarde) vient de useRmDashboard, que
+  l'app branche sur son API et dont elle passe ici les champs. La disposition
+  ne bouge qu'en mode edition : en lecture, un glisser sur un graphe ne doit
+  pas deplacer la carte.
+
+  Ce que le paquet ne sait pas :
+  - la source de chaque entree (`sourceOf`), que l'app lit ou elle veut
+    (Directus dans les apps OIP) ;
+  - les cartes de la lecture « Cartes » (slot `#cards`), qui sont celles des
+    pages de l'app.
+
+  L'export de l'ecran part de la donnee de chaque widget charge : la page le
+  declare a son cadre avec `exportSheets()`, expose ici.
+-->
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import { rmGridBottom } from '../utils/dashboardGrid'
+import {
+  RM_WIDGET_MIN,
+  rmDashboardExportSheets,
+  rmNewWidgetId,
+  rmWidgetKind,
+  type RmDashboardLang,
+  type RmDashboardWidget,
+  type RmWidgetContext,
+  type RmWidgetData,
+  type RmWidgetKind,
+  type RmWidgetSource,
+} from '../utils/dashboard'
+
+const props = withDefaults(defineProps<{
+  /** Les widgets affiches (useRmDashboard, `widgets`). */
+  widgets: RmDashboardWidget[]
+  catalog: RmWidgetKind<any>[]
+  /** Ce que l'ecran donne a ses widgets : ses marques, et ce que l'app y ajoute. */
+  context: RmWidgetContext
+  /** La source d'une entree du catalogue, citee en pied de carte et reprise par l'export. */
+  sourceOf: (kind: RmWidgetKind<any>) => RmWidgetSource
+  loading?: boolean
+  failed?: boolean
+  saving?: boolean
+  saveFailed?: boolean
+  lang?: RmDashboardLang
+  /** Hauteur d'une ligne de grille et ecart entre tuiles, en pixels. */
+  rowHeight?: number
+  gap?: number
+  /** Le corps vide d'un tableau sans widget. */
+  emptyTitle?: string
+  emptyText?: string
+  /** Ce que suivent les marques par defaut dans l'editeur : « Celles du projet ». */
+  scopeLabel?: string
+  /** Ce que disent les widgets et l'editeur quand le contexte n'a aucune marque. */
+  noBrandsText?: string
+}>(), {
+  loading: false,
+  failed: false,
+  saving: false,
+  saveFailed: false,
+  lang: 'fr',
+  rowHeight: 80,
+  gap: 16,
+  emptyTitle: undefined,
+  emptyText: undefined,
+  scopeLabel: undefined,
+  noBrandsText: undefined,
+})
+
+const emit = defineEmits<{
+  /** Les widgets apres un geste (useRmDashboard, `update`). */
+  'update:widgets': [widgets: RmDashboardWidget[]]
+  /** Recharger apres un echec de chargement. */
+  'load': []
+  /** Reessayer une sauvegarde echouee. */
+  'retrySave': []
+}>()
+
+defineSlots<{
+  cards(props: { kind: string, items: unknown[], editing: boolean }): unknown
+}>()
+
+const T = computed(() => props.lang === 'en'
+  ? {
+      notSaved: 'Not saved.',
+      retry: 'Retry',
+      saving: 'Saving…',
+      editingHint: 'Drag a card to move it, its corner to resize it.',
+      add: 'Add a widget',
+      done: 'Done',
+      editLayout: 'Edit layout',
+      loadFailed: 'The dashboard could not be loaded.',
+      emptyTitle: 'An empty dashboard',
+      emptyText: 'Add charts, tables or key figures from the catalogue.',
+    }
+  : {
+      notSaved: 'Non enregistré.',
+      retry: 'Réessayer',
+      saving: 'Enregistrement…',
+      editingHint: 'Faites glisser une carte pour la déplacer, son coin pour la redimensionner.',
+      add: 'Ajouter un widget',
+      done: 'Terminer',
+      editLayout: 'Modifier la disposition',
+      loadFailed: 'Le tableau de bord n\'a pas pu être chargé.',
+      emptyTitle: 'Un tableau de bord vide',
+      emptyText: 'Ajoutez des graphiques, des tableaux ou des chiffres clés tirés du catalogue.',
+    })
+
+/** Tete (titre, contexte) et pied (source) de la carte, autour du graphe. */
+const CARD_CHROME = 150
+
+const editing = ref(false)
+
+const byId = computed(() => Object.fromEntries(props.widgets.map(w => [w.id, w])) as Record<string, RmDashboardWidget>)
+const kindOf = (widget: RmDashboardWidget) => rmWidgetKind(props.catalog, widget.kind)!
+
+const layout = computed(() => props.widgets.map((w) => {
+  const min = kindOf(w).min ?? RM_WIDGET_MIN
+  return { id: w.id, ...w.layout, minW: min.w, minH: min.h }
+}))
+
+function labelOf(id: string) {
+  const widget = byId.value[id]
+  if (!widget) return id
+  return widget.title || kindOf(widget).title[props.lang]
+}
+
+function chartHeight(rows: number) {
+  return Math.max(140, rows * (props.rowHeight + props.gap) - props.gap - CARD_CHROME)
+}
+
+function move(next: { id: string, x: number, y: number, w: number, h: number }[]) {
+  const places = new Map(next.map(item => [item.id, item]))
+  emit('update:widgets', props.widgets.map((w) => {
+    const place = places.get(w.id)
+    return place ? { ...w, layout: { x: place.x, y: place.y, w: place.w, h: place.h } } : w
+  }))
+}
+
+// --- Ajout et reglages ----------------------------------------------------------
+
+const editorOpen = ref(false)
+const editedId = ref('')
+
+function openAdd() {
+  editedId.value = ''
+  editorOpen.value = true
+}
+
+function openEdit(id: string) {
+  editedId.value = id
+  editorOpen.value = true
+}
+
+function saveWidget(value: Pick<RmDashboardWidget, 'kind' | 'viz' | 'title' | 'params'>) {
+  if (editedId.value) {
+    emit('update:widgets', props.widgets.map(w => (w.id === editedId.value ? { ...w, ...value } : w)))
+    return
+  }
+  // Un widget ajoute se pose sous les autres, a gauche : la ou on le cherche.
+  const size = rmWidgetKind(props.catalog, value.kind)!.size
+  const y = rmGridBottom(layout.value)
+  emit('update:widgets', [...props.widgets, { id: rmNewWidgetId(), ...value, layout: { x: 0, y, ...size } }])
+}
+
+function duplicate(id: string) {
+  const source = byId.value[id]
+  if (!source) return
+  const y = rmGridBottom(layout.value)
+  emit('update:widgets', [...props.widgets, { ...source, id: rmNewWidgetId(), layout: { ...source.layout, x: 0, y } }])
+}
+
+function remove(id: string) {
+  emit('update:widgets', props.widgets.filter(w => w.id !== id))
+  delete loaded[id]
+}
+
+// --- Export -----------------------------------------------------------------------
+
+/** La donnee de chaque widget charge, telle que le widget l'a recue. */
+const loaded = reactive<Record<string, { title: string, data: RmWidgetData } | null>>({})
+
+defineExpose({
+  /** Un onglet de classeur par widget charge, dans l'ordre de lecture de la grille. */
+  exportSheets: () => rmDashboardExportSheets(props.widgets, loaded, props.lang),
+})
+</script>
+
+<template>
+  <div class="rm-dashboard">
+    <div class="rm-dashboard__bar">
+      <p class="rm-dashboard__status" aria-live="polite">
+        <template v-if="saveFailed">
+          <RmIcon name="WarningCircle" :size="14" />
+          {{ T.notSaved }}
+          <button type="button" class="rm-dashboard__link" @click="emit('retrySave')">{{ T.retry }}</button>
+        </template>
+        <template v-else-if="saving">{{ T.saving }}</template>
+        <template v-else-if="editing">{{ T.editingHint }}</template>
+      </p>
+      <div class="rm-dashboard__actions">
+        <RmButton variant="tertiary" prefix-icon="Plus" :disabled="loading || failed" @click="openAdd">
+          {{ T.add }}
+        </RmButton>
+        <RmButton
+          :variant="editing ? 'primary' : 'secondary'"
+          :prefix-icon="editing ? 'Check' : 'Layout'"
+          :disabled="loading || failed || !widgets.length"
+          @click="editing = !editing"
+        >
+          {{ editing ? T.done : T.editLayout }}
+        </RmButton>
+      </div>
+    </div>
+
+    <RmLoadingState v-if="loading" />
+    <RmErrorState
+      v-else-if="failed"
+      :text="T.loadFailed"
+      :action-label="T.retry"
+      @action="emit('load')"
+    />
+    <RmEmptyState
+      v-else-if="!widgets.length"
+      icon="SquaresFour"
+      :title="emptyTitle ?? T.emptyTitle"
+      :text="emptyText ?? T.emptyText"
+      :action-label="T.add"
+      action-icon="Plus"
+      @action="openAdd"
+    />
+    <RmDashboardGrid
+      v-else
+      :layout="layout"
+      :editable="editing"
+      :row-height="rowHeight"
+      :gap="gap"
+      :item-label="labelOf"
+      :lang="lang"
+      @update:layout="move"
+    >
+      <template #item="{ item }">
+        <RmDashboardWidget
+          v-if="byId[item.id]"
+          :widget="byId[item.id]!"
+          :kind="kindOf(byId[item.id]!)"
+          :context="context"
+          :source="sourceOf(kindOf(byId[item.id]!))"
+          :editing="editing"
+          :chart-height="chartHeight(item.h)"
+          :lang="lang"
+          :no-brands-text="noBrandsText"
+          @edit="openEdit(item.id)"
+          @duplicate="duplicate(item.id)"
+          @remove="remove(item.id)"
+          @data="loaded[item.id] = $event"
+        >
+          <template #cards="slotProps">
+            <slot name="cards" v-bind="slotProps" />
+          </template>
+        </RmDashboardWidget>
+      </template>
+    </RmDashboardGrid>
+
+    <RmDashboardWidgetEditor
+      v-model="editorOpen"
+      :widget="editedId ? byId[editedId] ?? null : null"
+      :catalog="catalog"
+      :context="context"
+      :source-of="sourceOf"
+      :lang="lang"
+      :scope-label="scopeLabel"
+      :no-brands-text="noBrandsText"
+      @save="saveWidget"
+    >
+      <template #cards="slotProps">
+        <slot name="cards" v-bind="slotProps" />
+      </template>
+    </RmDashboardWidgetEditor>
+  </div>
+</template>
+
+<style scoped>
+.rm-dashboard{display:flex;flex-direction:column;gap:16px}.rm-dashboard__bar{align-items:center;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}.rm-dashboard__status{align-items:center;color:var(--text-secondary);display:inline-flex;font-size:.8125rem;gap:4px;margin:0;min-height:1.25rem}.rm-dashboard__actions{display:flex;gap:8px;margin-left:auto}.rm-dashboard__link{background:none;color:var(--color-primary);cursor:pointer;padding:0;text-decoration:underline}
+</style>

package/dist/runtime/components/DashboardWidget.vue

@@ -0,0 +1,381 @@
+<!--
+  RmDashboardWidget - un widget d'un tableau de bord : une entree du
+  catalogue de l'app (`RmWidgetKind`), reglee et affichee dans une carte.
+
+  La carte est toujours RmChartCard, quelle que soit la visualisation : c'est
+  elle qui porte la source et sa date, le menu d'export et les etats
+  chargement, vide, erreur. Le widget va chercher sa donnee par le `fetch` de
+  son entree et la rend sous la visualisation choisie ; le tableau se deduit
+  de n'importe quelle forme (utils/dashboard, rmWidgetSheet).
+
+  L'export part de la donnee, pas du rendu : le classeur recoit les nombres
+  bruts et toutes les periodes, meme quand le graphe n'en montre qu'une
+  partie. Les sources passent dans le `payload` : sans elles, le menu
+  citerait celles de la page entiere.
+
+  La lecture en cartes est la seule que le paquet ne sait pas rendre : les
+  cartes sont celles des pages de l'app. Elle les fournit par le slot
+  `#cards`, nourri du `kind` et des `items` que sa donnee declare.
+
+  En edition, le menu d'export laisse sa place aux reglages du widget, et la
+  carte entiere sert de poignee a la grille (`data-rm-dash-drag`).
+-->
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type { RmExportPayload } from '../utils/export'
+import { rmCompact, rmNumber } from '../utils/format'
+import {
+  rmWidgetBrands,
+  rmWidgetEmpty,
+  rmWidgetParams,
+  rmWidgetSheet,
+  rmWidgetTitle,
+  rmWidgetViz,
+  type RmDashboardLang,
+  type RmDashboardWidget,
+  type RmWidgetContext,
+  type RmWidgetData,
+  type RmWidgetKind,
+  type RmWidgetSource,
+} from '../utils/dashboard'
+
+const props = withDefaults(defineProps<{
+  widget: RmDashboardWidget
+  /** L'entree du catalogue que le widget nomme. */
+  kind: RmWidgetKind<any>
+  /** Ce que l'ecran donne a ses widgets : ses marques, et ce que l'app y ajoute. */
+  context: RmWidgetContext
+  /** La source citee en pied de carte, et reprise par l'export. */
+  source: RmWidgetSource
+  editing?: boolean
+  /** Hauteur offerte au graphe, deduite de la tuile. */
+  chartHeight?: number
+  lang?: RmDashboardLang
+  /** Ce que dit le corps vide quand le widget lit les marques et qu'il n'y en a aucune. */
+  noBrandsText?: string
+}>(), {
+  editing: false,
+  chartHeight: 240,
+  lang: 'fr',
+  noBrandsText: undefined,
+})
+
+const emit = defineEmits<{
+  edit: []
+  duplicate: []
+  remove: []
+  /** La donnee chargee, pour l'export de la page entiere. */
+  data: [value: { title: string, data: RmWidgetData } | null]
+}>()
+
+defineSlots<{
+  cards(props: { kind: string, items: unknown[], editing: boolean }): unknown
+}>()
+
+const T = computed(() => props.lang === 'en'
+  ? {
+      retry: 'Retry',
+      noData: 'No data',
+      nothing: 'This source has nothing for this selection.',
+      noBrands: 'No brand selected.',
+      vsLastYear: 'vs last year',
+      noPrevious: 'No figure a year earlier',
+      edit: 'Edit',
+      duplicate: 'Duplicate',
+      remove: 'Remove',
+    }
+  : {
+      retry: 'Réessayer',
+      noData: 'Aucune donnée',
+      nothing: 'Cette source n\'a rien pour cette sélection.',
+      noBrands: 'Aucune marque sélectionnée.',
+      vsLastYear: 'vs N-1',
+      noPrevious: 'Pas de chiffre un an plus tôt',
+      edit: 'Régler',
+      duplicate: 'Dupliquer',
+      remove: 'Retirer',
+    })
+
+const viz = computed(() => rmWidgetViz(props.widget, props.kind))
+const params = computed(() => rmWidgetParams(props.kind, props.widget.params))
+const brands = computed(() => rmWidgetBrands(props.widget, props.context.brands))
+const title = computed(() => rmWidgetTitle(props.widget, props.kind, props.lang))
+
+/** Ce que le widget lit, dit sous le titre : reglages, periode, marques. */
+const context = computed(() => {
+  const bits: string[] = []
+  for (const param of props.kind.params) {
+    const option = param.options.find(o => o.value === params.value[param.key])
+    if (option) bits.push(option.label[props.lang])
+  }
+  if (data.value?.type === 'kpi' && data.value.period) bits.push(data.value.period)
+  if (props.kind.usesBrands) {
+    const list = brands.value
+    bits.push(list.length > 4 ? `${list.slice(0, 4).join(', ')} +${list.length - 4}` : list.join(', '))
+  }
+  return bits.join(', ')
+})
+
+// --- Donnee --------------------------------------------------------------------
+
+const data = ref<RmWidgetData | null>(null)
+const loading = ref(true)
+const failed = ref(false)
+let runId = 0
+
+async function run() {
+  const id = ++runId
+  if (props.kind.usesBrands && !brands.value.length) {
+    data.value = null
+    loading.value = false
+    failed.value = false
+    emit('data', null)
+    return
+  }
+  loading.value = true
+  failed.value = false
+  try {
+    const result = await props.kind.fetch(params.value, { ...props.context, brands: brands.value, lang: props.lang })
+    if (id !== runId) return
+    data.value = result
+    emit('data', { title: title.value, data: result })
+  }
+  catch {
+    if (id !== runId) return
+    failed.value = true
+    data.value = null
+    emit('data', null)
+  }
+  finally {
+    if (id === runId) loading.value = false
+  }
+}
+
+watch(
+  () => [props.widget.kind, JSON.stringify(params.value), brands.value.join('|'), props.lang, JSON.stringify(props.context)],
+  run,
+  { immediate: true },
+)
+watch(title, () => data.value && emit('data', { title: title.value, data: data.value }))
+
+const emptyText = computed(() => {
+  if (props.kind.usesBrands && !brands.value.length) return props.noBrandsText ?? T.value.noBrands
+  return data.value?.note ?? T.value.nothing
+})
+
+const state = computed(() => {
+  if (loading.value) return 'loading'
+  if (failed.value) return 'error'
+  return rmWidgetEmpty(data.value) ? 'empty' : 'ready'
+})
+
+// --- Visualisations ------------------------------------------------------------
+
+const series = computed(() => (data.value?.type === 'series' ? data.value : null))
+
+/** Des series en barres telles quelles ; des parts en barres horizontales, une barre par part. */
+const bars = computed(() => {
+  const d = data.value
+  if (d?.type === 'series') return { categories: d.categories, series: d.series, horizontal: false }
+  if (d?.type === 'parts') {
+    return {
+      categories: d.parts.map(p => p.name),
+      series: [{ name: title.value, data: d.parts.map(p => p.value) }],
+      horizontal: true,
+    }
+  }
+  return null
+})
+
+const figure = (value: number) => rmCompact(Math.round(value))
+
+const kpis = computed(() => {
+  const d = data.value
+  if (d?.type === 'kpi') {
+    return d.items.map(item => ({
+      label: item.label,
+      value: figure(item.value),
+      trend: item.trend,
+      trendLabel: item.trend === undefined ? undefined : T.value.vsLastYear,
+      note: item.previous === null ? T.value.noPrevious : undefined,
+    }))
+  }
+  if (d?.type === 'parts') {
+    return d.parts.map(p => ({ label: p.name, value: figure(p.value), trend: undefined, trendLabel: undefined, note: undefined }))
+  }
+  return []
+})
+
+/** Le tableau en nombres bruts : le meme que l'export. */
+const sheet = computed(() => (data.value ? rmWidgetSheet(data.value, props.lang, props.widget.params.columns) : null))
+
+/** Le tableau affiche : les memes lignes, les nombres et les dates mis au format. */
+const table = computed(() => {
+  const s = sheet.value
+  if (!s) return null
+  const numeric = new Set(s.columns.filter(c => c.numeric).map(c => c.key))
+  const dates = new Set(s.columns.filter(c => c.date).map(c => c.key))
+  const locale = props.lang === 'en' ? 'en-GB' : 'fr-FR'
+  return {
+    columns: s.columns.map(c => (c.long ? { ...c, minWidth: '360px' } : c)),
+    longColumns: s.columns.filter(c => c.long).map(c => c.key),
+    rows: s.rows.map(row =>
+      Object.fromEntries(
+        Object.entries(row).map(([key, value]) => [
+          key,
+          numeric.has(key)
+            ? typeof value === 'number' ? rmNumber(Math.round(value * 100) / 100) : ''
+            : dates.has(key) && typeof value === 'string'
+              ? new Date(value).toLocaleDateString(locale)
+              : value,
+        ]),
+      ),
+    ),
+  }
+})
+
+const cards = computed(() => (data.value?.type === 'rows' ? (data.value.cards ?? null) : null))
+
+/** L'onglet du classeur : les nombres bruts, pas le texte du tableau. */
+const payload = (): Partial<RmExportPayload> | null => {
+  const s = sheet.value
+  if (!s) return null
+  return {
+    title: title.value,
+    subtitle: context.value,
+    sources: props.source.export,
+    sheets: [
+      {
+        name: title.value.slice(0, 31),
+        schema: s.columns.map(c => ({ column: c.label, value: (row: Record<string, unknown>) => row[c.key] ?? null })),
+        data: s.rows,
+      },
+    ],
+  }
+}
+</script>
+
+<template>
+  <RmChartCard
+    class="rm-dash-widget"
+    :title="title"
+    :context="context"
+    :source="source.name"
+    :verified="source.verified"
+    :lang="lang"
+    :extra="state === 'ready' ? data?.note : undefined"
+    :actions="!editing"
+    :payload="payload"
+    :state="state"
+    :retry-label="T.retry"
+    data-rm-dash-drag
+    @retry="run"
+  >
+    <!-- Le corps vide par defaut parle de filtres : ici il n'y en a pas, la
+         source n'a simplement rien pour ces marques. On le dit. -->
+    <template #empty>
+      <RmEmptyState icon="MagnifyingGlassMinus" :title="T.noData" :text="emptyText" />
+    </template>
+    <RmLineChart
+      v-if="viz === 'line' && series"
+      :categories="series.categories"
+      :series="series.series"
+      :height="chartHeight"
+      number-format="compact"
+      :description="title"
+    />
+    <RmBarChart
+      v-else-if="viz === 'bar' && bars"
+      :categories="bars.categories"
+      :series="bars.series"
+      :horizontal="bars.horizontal"
+      :height="chartHeight"
+      :value-formatter="rmCompact"
+      :description="title"
+    />
+    <RmDonutChart
+      v-else-if="viz === 'donut' && data?.type === 'parts'"
+      :data="data.parts"
+      :height="chartHeight"
+      :description="title"
+    />
+    <div v-else-if="viz === 'kpi'" class="rm-dash-widget__kpis">
+      <RmKpi
+        v-for="kpi in kpis"
+        :key="kpi.label"
+        :label="kpi.label"
+        :value="kpi.value"
+        :unit="data?.unit"
+        :trend="kpi.trend"
+        :trend-label="kpi.trendLabel"
+        :note="kpi.note"
+      />
+    </div>
+    <!-- Les cartes de l'app, condensees, qui defilent dans la tuile. En
+         edition, elles ne repondent plus au clic : deplacer la tuile ne doit
+         pas ouvrir une fiche. -->
+    <div
+      v-else-if="viz === 'cards' && cards"
+      class="rm-dash-widget__cards"
+      :class="{ 'is-editing': editing }"
+      :style="{ maxHeight: `${chartHeight}px` }"
+    >
+      <slot name="cards" :kind="cards.kind" :items="cards.items" :editing="editing" />
+    </div>
+    <RmTable
+      v-else-if="table"
+      :columns="table.columns"
+      :rows="table.rows"
+      :max-height="`${chartHeight}px`"
+      sticky-header
+      :search="false"
+    >
+      <!-- Une indication peut faire quarante lignes : trois, puis « Lire plus ».
+           Seulement sur les colonnes longues : RmClampText laisse couper les
+           mots, et pose dans une colonne courte (marque, type) il laissait le
+           tableau l'ecraser. -->
+      <template v-for="column in table.longColumns" :key="column" #[column]="{ value }">
+        <RmClampText v-if="value !== null && value !== undefined && value !== ''" :text="String(value)" :lines="3" :lang="lang" />
+        <template v-else>-</template>
+      </template>
+    </RmTable>
+  </RmChartCard>
+  <!-- Les reglages se posent par-dessus la tete de la carte, a la place du
+       menu d'export que l'edition masque. -->
+  <div v-if="editing" class="rm-dash-widget__tools" data-rm-dash-nodrag>
+    <RmButton
+      variant="tertiary"
+      size="sm"
+      icon-only
+      ghost
+      prefix-icon="SlidersHorizontal"
+      :aria-label="`${T.edit} ${title}`"
+      :title="T.edit"
+      @click="emit('edit')"
+    />
+    <RmButton
+      variant="tertiary"
+      size="sm"
+      icon-only
+      ghost
+      prefix-icon="Copy"
+      :aria-label="`${T.duplicate} ${title}`"
+      :title="T.duplicate"
+      @click="emit('duplicate')"
+    />
+    <RmButton
+      variant="text-danger"
+      size="sm"
+      icon-only
+      ghost
+      prefix-icon="Trash"
+      :aria-label="`${T.remove} ${title}`"
+      :title="T.remove"
+      @click="emit('remove')"
+    />
+  </div>
+</template>
+
+<style scoped>
+.rm-dash-widget{display:flex;flex-direction:column;height:100%;overflow:hidden}.rm-dash-widget :deep(.chart-card-body){flex:1;min-height:0;overflow:auto}.rm-dash-widget__kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.rm-dash-widget :deep(.rm-table__td){vertical-align:top}.rm-dash-widget__cards{display:flex;flex-direction:column;gap:8px;overflow:auto;padding-right:4px}.rm-dash-widget__cards>:deep(*){flex-shrink:0}.rm-dash-widget__cards.is-editing{pointer-events:none}.rm-dash-widget__tools{background:var(--bg-surface);border-radius:var(--radius-md);display:flex;gap:4px;padding:2px;position:absolute;right:12px;top:12px;z-index:2}
+</style>