@escalated-dev/escalated 0.5.0 → 0.7.0

package/src/components/FileDropzone.vue

@@ -1,41 +1,57 @@
-<script setup>
-import { ref, computed, inject } from 'vue';
-
-const emit = defineEmits(['files']);
-const dark = inject('esc-dark', computed(() => false));
-
-const dragging = ref(false);
-const fileInput = ref(null);
-
-function onDrop(e) {
-    dragging.value = false;
-    if (e.dataTransfer?.files?.length) {
-        emit('files', Array.from(e.dataTransfer.files));
-    }
-}
-
-function onFileSelect(e) {
-    if (e.target.files?.length) {
-        emit('files', Array.from(e.target.files));
-        e.target.value = '';
-    }
-}
-
-function browse() {
-    fileInput.value?.click();
-}
-</script>
-
-<template>
-    <div @dragover.prevent="dragging = true" @dragleave="dragging = false" @drop.prevent="onDrop"
-         :class="['cursor-pointer rounded-lg border-2 border-dashed px-4 py-3 text-center text-xs transition-colors',
-                  dark
-                      ? (dragging ? 'border-white/20 bg-white/[0.04]' : 'border-white/[0.08] hover:border-white/[0.12]')
-                      : (dragging ? 'border-blue-400 bg-blue-50' : 'border-gray-300 hover:border-gray-400')]"
-         @click="browse">
-        <p :class="dark ? 'text-neutral-500' : 'text-gray-500'">
-            Drop files here or <span :class="['font-medium', dark ? 'text-white' : 'text-blue-600']">browse</span>
-        </p>
-        <input ref="fileInput" type="file" multiple class="hidden" @change="onFileSelect" />
-    </div>
-</template>
+<script setup>
+import { ref, computed, inject } from 'vue';
+
+const emit = defineEmits(['files']);
+const dark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+
+const dragging = ref(false);
+const fileInput = ref(null);
+
+function onDrop(e) {
+    dragging.value = false;
+    if (e.dataTransfer?.files?.length) {
+        emit('files', Array.from(e.dataTransfer.files));
+    }
+}
+
+function onFileSelect(e) {
+    if (e.target.files?.length) {
+        emit('files', Array.from(e.target.files));
+        e.target.value = '';
+    }
+}
+
+function browse() {
+    fileInput.value?.click();
+}
+</script>
+
+<template>
+    <div
+        role="button"
+        aria-label="Drop files here or click to upload"
+        :class="[
+            'cursor-pointer rounded-lg border-2 border-dashed px-4 py-3 text-center text-xs transition-colors',
+            dark
+                ? dragging
+                    ? 'border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)]'
+                    : 'border-[var(--esc-panel-border)] hover:border-[var(--esc-panel-border-input)]'
+                : dragging
+                  ? 'border-blue-400 bg-blue-50'
+                  : 'border-gray-300 hover:border-gray-400',
+        ]"
+        @dragover.prevent="dragging = true"
+        @dragleave="dragging = false"
+        @drop.prevent="onDrop"
+        @click="browse"
+    >
+        <p :class="dark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-500'">
+            Drop files here or
+            <span :class="['font-medium', dark ? 'text-[var(--esc-panel-text)]' : 'text-blue-600']">browse</span>
+        </p>
+        <input ref="fileInput" type="file" multiple aria-label="Upload files" class="hidden" @change="onFileSelect" />
+    </div>
+</template>

package/src/components/FollowButton.stories.js

@@ -0,0 +1,30 @@
+import FollowButton from './FollowButton.vue';
+
+export default {
+    title: 'Components/FollowButton',
+    component: FollowButton,
+};
+
+export const NotFollowing = {
+    args: {
+        action: '#',
+        isFollowing: false,
+        followersCount: 3,
+    },
+};
+
+export const Following = {
+    args: {
+        action: '#',
+        isFollowing: true,
+        followersCount: 5,
+    },
+};
+
+export const NoFollowers = {
+    args: {
+        action: '#',
+        isFollowing: false,
+        followersCount: 0,
+    },
+};

package/src/components/FollowButton.vue

@@ -8,7 +8,10 @@ const props = defineProps({
     followersCount: { type: Number, default: 0 },
 });
 
-const escDark = inject('esc-dark', computed(() => false));
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
 const following = ref(props.isFollowing);
 const count = ref(props.followersCount);
 const processing = ref(false);
@@ -16,47 +19,69 @@ const processing = ref(false);
 function toggle() {
     if (processing.value) return;
     processing.value = true;
-    router.post(props.action, {}, {
-        preserveScroll: true,
-        onSuccess: () => {
-            following.value = !following.value;
-            count.value += following.value ? 1 : -1;
+    router.post(
+        props.action,
+        {},
+        {
+            preserveScroll: true,
+            onSuccess: () => {
+                following.value = !following.value;
+                count.value += following.value ? 1 : -1;
+            },
+            onFinish: () => {
+                processing.value = false;
+            },
         },
-        onFinish: () => {
-            processing.value = false;
-        },
-    });
+    );
 }
 </script>
 
 <template>
-    <button @click="toggle"
-            :disabled="processing"
-            :class="['inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
-                     escDark
-                         ? (following
-                             ? 'bg-cyan-500/15 text-white ring-1 ring-cyan-500/20 hover:bg-cyan-500/25'
-                             : 'border border-white/10 bg-white/[0.03] text-neutral-400 hover:bg-white/[0.06] hover:text-neutral-200')
-                         : (following
-                             ? 'bg-blue-100 text-blue-700 ring-1 ring-blue-300 hover:bg-blue-200'
-                             : 'border border-gray-300 bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-800'),
-                     processing && 'opacity-50 cursor-not-allowed']">
+    <button
+        :disabled="processing"
+        :class="[
+            'inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+            escDark
+                ? following
+                    ? 'bg-cyan-500/15 text-[var(--esc-panel-text)] ring-1 ring-[var(--esc-panel-accent)]/20 hover:bg-cyan-500/25'
+                    : 'border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text-tertiary)] hover:bg-[var(--esc-panel-hover)] hover:text-[var(--esc-panel-text-secondary)]'
+                : following
+                  ? 'bg-blue-100 text-blue-700 ring-1 ring-blue-300 hover:bg-blue-200'
+                  : 'border border-gray-300 bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-800',
+            processing && 'opacity-50 cursor-not-allowed',
+        ]"
+        :aria-pressed="following"
+        :aria-label="following ? 'Unfollow ticket' : 'Follow ticket'"
+        @click="toggle"
+    >
         <!-- Eye icon -->
         <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
             <template v-if="following">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
+                />
                 <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
             </template>
             <template v-else>
-                <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
+                />
             </template>
         </svg>
         {{ following ? 'Following' : 'Follow' }}
-        <span v-if="count > 0"
-              :class="['rounded-full px-1.5 py-0.5 text-xs',
-                       escDark
-                           ? 'bg-white/[0.06] text-neutral-400'
-                           : 'bg-gray-100 text-gray-500']">
+        <span
+            v-if="count > 0"
+            :class="[
+                'rounded-full px-1.5 py-0.5 text-xs',
+                escDark
+                    ? 'bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text-tertiary)]'
+                    : 'bg-gray-100 text-gray-500',
+            ]"
+        >
             {{ count }}
         </span>
     </button>

package/src/components/KeyboardShortcutHelp.vue

@@ -7,7 +7,10 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['update:show']);
-const escDark = inject('esc-dark', computed(() => false));
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
 
 const shortcutGroups = [
     {
@@ -34,15 +37,11 @@ const shortcutGroups = [
     {
         title: 'Global',
         contexts: ['list', 'detail'],
-        shortcuts: [
-            { keys: ['?'], description: 'Show this help' },
-        ],
+        shortcuts: [{ keys: ['?'], description: 'Show this help' }],
     },
 ];
 
-const filteredGroups = computed(() =>
-    shortcutGroups.filter(g => g.contexts.includes(props.context))
-);
+const filteredGroups = computed(() => shortcutGroups.filter((g) => g.contexts.includes(props.context)));
 
 function closeModal() {
     emit('update:show', false);
@@ -51,31 +50,84 @@ function closeModal() {
 
 <template>
     <Teleport to="body">
-        <Transition enter-active-class="transition duration-200 ease-out" enter-from-class="opacity-0" enter-to-class="opacity-100"
-                    leave-active-class="transition duration-150 ease-in" leave-from-class="opacity-100" leave-to-class="opacity-0">
-            <div v-if="show" class="fixed inset-0 z-[100] flex items-center justify-center" @keydown.escape="closeModal">
+        <Transition
+            enter-active-class="transition duration-200 ease-out"
+            enter-from-class="opacity-0"
+            enter-to-class="opacity-100"
+            leave-active-class="transition duration-150 ease-in"
+            leave-from-class="opacity-100"
+            leave-to-class="opacity-0"
+        >
+            <div
+                v-if="show"
+                class="fixed inset-0 z-[100] flex items-center justify-center"
+                @keydown.escape="closeModal"
+            >
                 <!-- Backdrop -->
                 <div class="absolute inset-0 bg-black/60 backdrop-blur-sm" @click="closeModal"></div>
 
                 <!-- Modal -->
-                <div :class="['relative z-10 w-full max-w-lg overflow-hidden rounded-2xl border shadow-2xl',
-                              escDark ? 'border-white/[0.06] bg-neutral-900' : 'border-gray-200 bg-white']">
+                <div
+                    role="dialog"
+                    aria-modal="true"
+                    aria-label="Keyboard shortcuts"
+                    :class="[
+                        'relative z-10 w-full max-w-lg overflow-hidden rounded-2xl border shadow-2xl',
+                        escDark
+                            ? 'border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)]'
+                            : 'border-gray-200 bg-white',
+                    ]"
+                >
                     <!-- Header -->
-                    <div :class="['flex items-center justify-between border-b px-6 py-4',
-                                  escDark ? 'border-white/[0.06]' : 'border-gray-200']">
+                    <div
+                        :class="[
+                            'flex items-center justify-between border-b px-6 py-4',
+                            escDark ? 'border-[var(--esc-panel-border)]' : 'border-gray-200',
+                        ]"
+                    >
                         <div class="flex items-center gap-3">
-                            <svg :class="['h-5 w-5', escDark ? 'text-neutral-400' : 'text-gray-500']"
-                                 fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z" />
+                            <svg
+                                :class="[
+                                    'h-5 w-5',
+                                    escDark ? 'text-[var(--esc-panel-text-tertiary)]' : 'text-gray-500',
+                                ]"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                viewBox="0 0 24 24"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"
+                                />
                             </svg>
-                            <h2 :class="['text-base font-semibold', escDark ? 'text-white' : 'text-gray-900']">
+                            <h2
+                                :class="[
+                                    'text-base font-semibold',
+                                    escDark ? 'text-[var(--esc-panel-text)]' : 'text-gray-900',
+                                ]"
+                            >
                                 Keyboard Shortcuts
                             </h2>
                         </div>
-                        <button @click="closeModal"
-                                :class="['rounded-lg p-1.5 transition-colors',
-                                         escDark ? 'text-neutral-500 hover:bg-white/[0.04] hover:text-neutral-300' : 'text-gray-400 hover:bg-gray-100 hover:text-gray-600']">
-                            <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                        <button
+                            aria-label="Close"
+                            :class="[
+                                'rounded-lg p-1.5 transition-colors',
+                                escDark
+                                    ? 'text-[var(--esc-panel-text-muted)] hover:bg-[var(--esc-panel-hover)] hover:text-[var(--esc-panel-text-secondary)]'
+                                    : 'text-gray-400 hover:bg-gray-100 hover:text-gray-600',
+                            ]"
+                            @click="closeModal"
+                        >
+                            <svg
+                                class="h-5 w-5"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                viewBox="0 0 24 24"
+                            >
                                 <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                             </svg>
                         </button>
@@ -83,25 +135,48 @@ function closeModal() {
 
                     <!-- Body -->
                     <div class="max-h-[60vh] overflow-y-auto px-6 py-4">
-                        <div v-for="(group, gi) in filteredGroups" :key="gi"
-                             :class="['pb-4', gi < filteredGroups.length - 1 && 'mb-4 border-b',
-                                      escDark ? 'border-white/[0.06]' : 'border-gray-100']">
-                            <h3 :class="['mb-3 text-xs font-semibold uppercase tracking-wider',
-                                         escDark ? 'text-neutral-500' : 'text-gray-500']">
+                        <div
+                            v-for="(group, gi) in filteredGroups"
+                            :key="gi"
+                            :class="[
+                                'pb-4',
+                                gi < filteredGroups.length - 1 && 'mb-4 border-b',
+                                escDark ? 'border-[var(--esc-panel-border)]' : 'border-gray-100',
+                            ]"
+                        >
+                            <h3
+                                :class="[
+                                    'mb-3 text-xs font-semibold uppercase tracking-wider',
+                                    escDark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-500',
+                                ]"
+                            >
                                 {{ group.title }}
                             </h3>
                             <div class="space-y-2">
-                                <div v-for="(shortcut, si) in group.shortcuts" :key="si"
-                                     class="flex items-center justify-between">
-                                    <span :class="['text-sm', escDark ? 'text-neutral-300' : 'text-gray-700']">
+                                <div
+                                    v-for="(shortcut, si) in group.shortcuts"
+                                    :key="si"
+                                    class="flex items-center justify-between"
+                                >
+                                    <span
+                                        :class="[
+                                            'text-sm',
+                                            escDark ? 'text-[var(--esc-panel-text-secondary)]' : 'text-gray-700',
+                                        ]"
+                                    >
                                         {{ shortcut.description }}
                                     </span>
                                     <div class="flex items-center gap-1">
-                                        <kbd v-for="(key, ki) in shortcut.keys" :key="ki"
-                                             :class="['inline-flex min-w-[24px] items-center justify-center rounded-md border px-2 py-0.5 text-xs font-semibold',
-                                                      escDark
-                                                          ? 'border-white/10 bg-white/[0.06] text-neutral-300'
-                                                          : 'border-gray-300 bg-gray-100 text-gray-700']">
+                                        <kbd
+                                            v-for="(key, ki) in shortcut.keys"
+                                            :key="ki"
+                                            :class="[
+                                                'inline-flex min-w-[24px] items-center justify-center rounded-md border px-2 py-0.5 text-xs font-semibold',
+                                                escDark
+                                                    ? 'border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text-secondary)]'
+                                                    : 'border-gray-300 bg-gray-100 text-gray-700',
+                                            ]"
+                                        >
                                             {{ key }}
                                         </kbd>
                                     </div>
@@ -111,10 +186,25 @@ function closeModal() {
                     </div>
 
                     <!-- Footer -->
-                    <div :class="['border-t px-6 py-3 text-center text-xs',
-                                  escDark ? 'border-white/[0.06] text-neutral-600' : 'border-gray-100 text-gray-400']">
-                        Press <kbd :class="['mx-1 inline-flex items-center rounded border px-1.5 py-0.5 text-[10px] font-semibold',
-                                           escDark ? 'border-white/10 bg-white/[0.06] text-neutral-400' : 'border-gray-300 bg-gray-100 text-gray-600']">Esc</kbd> to close
+                    <div
+                        :class="[
+                            'border-t px-6 py-3 text-center text-xs',
+                            escDark
+                                ? 'border-[var(--esc-panel-border)] text-[var(--esc-panel-text-muted)]'
+                                : 'border-gray-100 text-gray-400',
+                        ]"
+                    >
+                        Press
+                        <kbd
+                            :class="[
+                                'mx-1 inline-flex items-center rounded border px-1.5 py-0.5 text-[10px] font-semibold',
+                                escDark
+                                    ? 'border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text-tertiary)]'
+                                    : 'border-gray-300 bg-gray-100 text-gray-600',
+                            ]"
+                            >Esc</kbd
+                        >
+                        to close
                     </div>
                 </div>
             </div>

package/src/components/KnowledgePanel.vue

@@ -0,0 +1,122 @@
+<script setup>
+import { ref } from 'vue';
+
+defineProps({
+    ticketReference: { type: String, required: true },
+});
+
+const emit = defineEmits(['insert-link', 'quote']);
+const searchTerm = ref('');
+const expanded = ref(true);
+
+// Placeholder results for knowledge base integration
+const results = ref([]);
+const loading = ref(false);
+let debounceTimer = null;
+
+function onSearch(val) {
+    window.clearTimeout(debounceTimer);
+    if (!val || val.length < 2) {
+        results.value = [];
+        return;
+    }
+    debounceTimer = window.setTimeout(() => search(val), 300);
+}
+
+function search(term) {
+    loading.value = true;
+    // Placeholder: in production, this would call a knowledge base API
+    results.value = [
+        {
+            id: 1,
+            title: `How to resolve "${term}" issues`,
+            excerpt: `This article explains common solutions for ${term}-related problems that customers frequently encounter.`,
+            url: '#',
+        },
+        {
+            id: 2,
+            title: `${term} - FAQ`,
+            excerpt: `Frequently asked questions about ${term} and related features.`,
+            url: '#',
+        },
+        {
+            id: 3,
+            title: `Troubleshooting ${term}`,
+            excerpt: `Step-by-step troubleshooting guide for ${term} problems.`,
+            url: '#',
+        },
+    ];
+    loading.value = false;
+}
+
+function insertLink(article) {
+    emit('insert-link', article);
+}
+
+function quoteArticle(article) {
+    emit('quote', article);
+}
+</script>
+
+<template>
+    <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-4">
+        <button
+            class="flex w-full items-center justify-between text-sm font-semibold text-neutral-200"
+            @click="expanded = !expanded"
+        >
+            <span>Knowledge Base</span>
+            <svg
+                :class="['h-4 w-4 text-neutral-500 transition-transform', expanded && 'rotate-180']"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                viewBox="0 0 24 24"
+            >
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+            </svg>
+        </button>
+
+        <div v-if="expanded" class="mt-3 space-y-3">
+            <input
+                v-model="searchTerm"
+                type="text"
+                placeholder="Search knowledge base..."
+                class="w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 placeholder-neutral-500 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                @input="onSearch(searchTerm)"
+            />
+
+            <div v-if="loading" class="text-xs text-neutral-500">Searching...</div>
+
+            <div v-else-if="results.length" class="space-y-2">
+                <div
+                    v-for="article in results"
+                    :key="article.id"
+                    class="rounded-lg border border-white/[0.04] bg-white/[0.02] p-3"
+                >
+                    <h4 class="text-sm font-medium text-neutral-200">{{ article.title }}</h4>
+                    <p class="mt-1 text-xs text-neutral-400 line-clamp-2">{{ article.excerpt }}</p>
+                    <div class="mt-2 flex gap-2">
+                        <button
+                            class="rounded px-2 py-0.5 text-[10px] font-medium text-cyan-400 ring-1 ring-cyan-500/20 transition-colors hover:bg-cyan-500/10"
+                            @click="insertLink(article)"
+                        >
+                            Insert Link
+                        </button>
+                        <button
+                            class="rounded px-2 py-0.5 text-[10px] font-medium text-violet-400 ring-1 ring-violet-500/20 transition-colors hover:bg-violet-500/10"
+                            @click="quoteArticle(article)"
+                        >
+                            Quote
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <div v-else-if="searchTerm.length >= 2 && !loading" class="text-xs text-neutral-500">
+                No articles found.
+            </div>
+
+            <div v-else class="text-xs text-neutral-500">Search for articles to help resolve this ticket.</div>
+        </div>
+    </div>
+</template>

package/src/components/KpiCard.stories.js

@@ -0,0 +1,32 @@
+import KpiCard from './KpiCard.vue';
+
+export default {
+    title: 'Components/KpiCard',
+    component: KpiCard,
+};
+
+export const Basic = { args: { label: 'Total Tickets', value: 1284 } };
+export const WithPositiveTrend = { args: { label: 'Resolved', value: 892, trend: 12 } };
+export const WithNegativeTrend = { args: { label: 'SLA Breaches', value: 7, trend: -34 } };
+
+export const WithIcon = {
+    args: {
+        label: 'Active Agents',
+        value: 24,
+        trend: 8,
+        icon: 'M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z',
+    },
+};
+
+export const DashboardRow = {
+    render: () => ({
+        components: { KpiCard },
+        template: `
+            <div class="grid grid-cols-3 gap-4" style="max-width: 800px;">
+                <KpiCard label="Total Tickets" :value="1284" :trend="5" icon="M2.25 13.5h3.86a2.25 2.25 0 012.012 1.244l.256.512a2.25 2.25 0 002.013 1.244h3.218a2.25 2.25 0 002.013-1.244l.256-.512a2.25 2.25 0 012.013-1.244h3.859" />
+                <KpiCard label="Avg Response Time" value="1h 42m" :trend="-18" icon="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+                <KpiCard label="CSAT Score" value="94%" :trend="3" icon="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
+            </div>
+        `,
+    }),
+};