From 79650d0b726b051b08f72d52e827965c38585abb Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Mon, 18 May 2026 11:16:57 +0200
Subject: [PATCH] =?UTF-8?q?feat(gui-v2):=20EnergyDots=205-dot=20meter=20(s?=
 =?UTF-8?q?coped=20CSS=20justified=20per=20=C2=A78)=20+=20story?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../shared/EnergyDots.stories.ts              | 15 ++++++++
 .../src/components-v2/shared/EnergyDots.vue   | 37 +++++++++++++++++++
 .../shared/__tests__/EnergyDots.spec.ts       | 22 +++++++++++
 3 files changed, 74 insertions(+)
 create mode 100644 apps/app/src/components-v2/shared/EnergyDots.stories.ts
 create mode 100644 apps/app/src/components-v2/shared/EnergyDots.vue
 create mode 100644 apps/app/src/components-v2/shared/__tests__/EnergyDots.spec.ts

diff --git a/apps/app/src/components-v2/shared/EnergyDots.stories.ts b/apps/app/src/components-v2/shared/EnergyDots.stories.ts
new file mode 100644
index 00000000..39e1f2b2
--- /dev/null
+++ b/apps/app/src/components-v2/shared/EnergyDots.stories.ts
@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import EnergyDots from '@/components-v2/shared/EnergyDots.vue'
+
+const meta: Meta<typeof EnergyDots> = {
+  title: 'Shared/EnergyDots',
+  component: EnergyDots,
+  tags: ['autodocs'],
+  argTypes: { value: { control: { type: 'range', min: 0, max: 5, step: 1 } }, lg: { control: 'boolean' } },
+}
+
+export default meta
+type Story = StoryObj<typeof EnergyDots>
+export const Level3: Story = { args: { value: 3 } }
+export const Level5: Story = { args: { value: 5 } }
+export const Large: Story = { args: { value: 4, lg: true } }
diff --git a/apps/app/src/components-v2/shared/EnergyDots.vue b/apps/app/src/components-v2/shared/EnergyDots.vue
new file mode 100644
index 00000000..bb658c25
--- /dev/null
+++ b/apps/app/src/components-v2/shared/EnergyDots.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+/**
+ * EnergyDots — 5-dot meter (spec §8: no PrimeVue primitive; Rating is
+ * stars/wrong visual → minimal scoped CSS is the justified bespoke case).
+ * crewli-starter main.css 1982–1991 ported; crewli vars → Aura tokens.
+ */
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{ value?: number; lg?: boolean }>(), { value: 0, lg: false })
+const clamped = computed(() => Math.max(0, Math.min(5, Math.round(props.value))))
+</script>
+
+<template>
+  <div
+    class="energy-dots"
+    :class="{ lg }"
+    :data-energy="clamped"
+  >
+    <span
+      v-for="i in 5"
+      :key="i"
+      class="d"
+      :class="{ on: i <= clamped }"
+    />
+  </div>
+</template>
+
+<style scoped>
+/* Justified per spec §8 — no Tailwind/PrimeVue expression of this meter. */
+.energy-dots { display: inline-flex; gap: 3px; align-items: center; }
+.d { width: 8px; height: 8px; border-radius: 50%; background: var(--p-content-border-color); }
+.d.on { background: var(--p-primary-color); }
+.energy-dots[data-energy="1"] .d.on { background: var(--p-sky-600); }
+.energy-dots[data-energy="4"] .d.on { background: oklch(65% 0.15 35); }
+.energy-dots[data-energy="5"] .d.on { background: var(--p-red-600); }
+.energy-dots.lg .d { width: 11px; height: 11px; }
+</style>
diff --git a/apps/app/src/components-v2/shared/__tests__/EnergyDots.spec.ts b/apps/app/src/components-v2/shared/__tests__/EnergyDots.spec.ts
new file mode 100644
index 00000000..ca173bb1
--- /dev/null
+++ b/apps/app/src/components-v2/shared/__tests__/EnergyDots.spec.ts
@@ -0,0 +1,22 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import EnergyDots from '@/components-v2/shared/EnergyDots.vue'
+
+describe('EnergyDots', () => {
+  it('always renders 5 dots; `on` count equals value', () => {
+    const w = mount(EnergyDots, { props: { value: 3 } })
+
+    expect(w.findAll('.d')).toHaveLength(5)
+    expect(w.findAll('.d.on')).toHaveLength(3)
+  })
+  it('exposes data-energy for level colouring and lg class when lg', () => {
+    const w = mount(EnergyDots, { props: { value: 5, lg: true } })
+
+    expect(w.get('[data-energy]').attributes('data-energy')).toBe('5')
+    expect(w.get('.energy-dots').classes()).toContain('lg')
+  })
+  it('clamps value into 0..5', () => {
+    expect(mount(EnergyDots, { props: { value: 9 } }).findAll('.d.on')).toHaveLength(5)
+    expect(mount(EnergyDots, { props: { value: -2 } }).findAll('.d.on')).toHaveLength(0)
+  })
+})