Initial

client/src/components/dashboard/WidgetLibraryModal.vue

@@ -0,0 +1,34 @@
+<template>
+  <Teleport to="body">
+    <div v-if="open" class="modal-backdrop" @mousedown.self="$emit('close')">
+      <section class="widget-library glass-panel">
+        <header>
+          <div>
+            <span class="eyebrow">WIDGET LIBRARY</span>
+            <h3>Add dashboard intelligence</h3>
+            <p>Add hidden cards back to the dashboard. Drag and resize them after they are on the canvas.</p>
+          </div>
+          <button class="modal-close" type="button" @click="$emit('close')">x</button>
+        </header>
+        <div class="widget-library-grid">
+          <!-- Hidden widgets are restored through the parent layout state, keeping this modal reusable. -->
+          <article v-for="widget in widgets" :key="widget.id">
+            <span><component :is="widget.icon" :size="20" /></span>
+            <div><strong>{{ widget.title }}</strong><small>{{ widget.category }} - {{ widget.description }}</small></div>
+            <button class="primary-action compact" type="button" @click="$emit('add', widget.id)">Add</button>
+          </article>
+          <p v-if="!widgets.length" class="widget-empty">All dashboard widgets are already visible.</p>
+        </div>
+      </section>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+defineProps({
+  open: Boolean,
+  widgets: { type: Array, required: true }
+});
+
+defineEmits(['close', 'add']);
+</script>