@escalated-dev/escalated 0.2.1 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@escalated-dev/escalated",
-  "version": "0.2.1",
+  "version": "0.3.5",
   "description": "Vue 3 + Inertia.js UI components for Escalated — the embeddable support ticket system",
   "author": "Escalated Dev <hello@escalated.dev>",
   "license": "MIT",

package/src/components/ActivityTimeline.vue

@@ -1,8 +1,12 @@
 <script setup>
+import { computed, inject } from 'vue';
+
 defineProps({
     activities: { type: Array, required: true },
 });
 
+const dark = inject('esc-dark', computed(() => false));
+
 const typeLabels = {
     status_changed: 'changed status',
     assigned: 'assigned ticket',
@@ -51,12 +55,12 @@ function describeActivity(activity) {
 <template>
     <div class="space-y-3">
         <div v-for="activity in activities" :key="activity.id" class="flex gap-3 text-sm">
-            <div class="mt-1 h-2 w-2 flex-shrink-0 rounded-full bg-gray-400"></div>
+            <div :class="['mt-1 h-2 w-2 flex-shrink-0 rounded-full', dark ? 'bg-neutral-600' : 'bg-gray-400']"></div>
             <div class="flex-1">
-                <p class="text-gray-700">{{ describeActivity(activity) }}</p>
-                <p class="text-xs text-gray-400">{{ formatDate(activity.created_at) }}</p>
+                <p :class="dark ? 'text-neutral-300' : 'text-gray-700'">{{ describeActivity(activity) }}</p>
+                <p :class="['text-xs', dark ? 'text-neutral-600' : 'text-gray-400']">{{ formatDate(activity.created_at) }}</p>
             </div>
         </div>
-        <div v-if="!activities?.length" class="py-4 text-center text-sm text-gray-500">No activity yet.</div>
+        <div v-if="!activities?.length" :class="['py-4 text-center text-sm', dark ? 'text-neutral-600' : 'text-gray-500']">No activity yet.</div>
     </div>
 </template>

package/src/components/AssigneeSelect.vue

@@ -1,17 +1,21 @@
 <script setup>
+import { computed, inject } from 'vue';
+
 defineProps({
     agents: { type: Array, required: true },
     modelValue: { type: [Number, String], default: null },
 });
 
 const emit = defineEmits(['update:modelValue']);
+const dark = inject('esc-dark', computed(() => false));
 </script>
 
 <template>
     <div>
-        <label class="mb-1 block text-xs font-medium text-gray-600">Assigned To</label>
+        <label :class="['mb-1 block text-xs font-medium', dark ? 'text-neutral-500' : 'text-gray-600']">Assigned To</label>
         <select :value="modelValue" @change="emit('update:modelValue', $event.target.value || null)"
-                class="w-full rounded-md border border-gray-300 px-2 py-1.5 text-sm focus:border-blue-500 focus:outline-none">
+                :class="['w-full rounded-md border px-2 py-1.5 text-sm focus:outline-none',
+                         dark ? 'border-white/10 bg-neutral-950 text-neutral-200 focus:border-white/20 focus:ring-1 focus:ring-white/10' : 'border-gray-300 focus:border-blue-500']">
             <option value="">Unassigned</option>
             <option v-for="agent in agents" :key="agent.id" :value="agent.id">{{ agent.name }}</option>
         </select>

package/src/components/AttachmentList.vue

@@ -1,8 +1,12 @@
 <script setup>
+import { computed, inject } from 'vue';
+
 defineProps({
     attachments: { type: Array, required: true },
 });
 
+const dark = inject('esc-dark', computed(() => false));
+
 function formatSize(bytes) {
     if (bytes < 1024) return bytes + ' B';
     if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
@@ -20,12 +24,14 @@ function iconForMime(mime) {
 <template>
     <div class="space-y-1">
         <div v-for="attachment in attachments" :key="attachment.id"
-             class="flex items-center gap-2 rounded border border-gray-200 bg-gray-50 px-3 py-2 text-sm">
+             :class="['flex items-center gap-2 rounded-lg border px-3 py-2 text-sm',
+                      dark ? 'border-white/[0.06] bg-white/[0.03]' : 'border-gray-200 bg-gray-50']">
             <span>{{ iconForMime(attachment.mime_type) }}</span>
-            <a :href="attachment.url" target="_blank" class="flex-1 truncate font-medium text-blue-600 hover:underline">
+            <a :href="attachment.url" target="_blank"
+               :class="['flex-1 truncate font-medium hover:underline', dark ? 'text-white' : 'text-blue-600']">
                 {{ attachment.original_filename }}
             </a>
-            <span class="text-xs text-gray-400">{{ formatSize(attachment.size) }}</span>
+            <span :class="['text-xs', dark ? 'text-neutral-500' : 'text-gray-400']">{{ formatSize(attachment.size) }}</span>
         </div>
     </div>
 </template>

package/src/components/EscalatedLayout.vue

@@ -1,213 +1,219 @@
-<script setup>
-import { computed, inject } from 'vue';
-import { usePage, Link } from '@inertiajs/vue3';
-
-const props = defineProps({
-    title: { type: String, default: 'Support' },
-});
-
-const page = usePage();
-const staticLayout = inject('escalated-layout', null);
-const layoutResolver = inject('escalated-layout-resolver', null);
-
-const hostLayout = computed(() => {
-    if (layoutResolver) return layoutResolver();
-    return staticLayout;
-});
-
-const isAgent = computed(() => page.props.escalated?.is_agent);
-const isAdmin = computed(() => page.props.escalated?.is_admin);
-const prefix = computed(() => {
-    const p = page.props.escalated?.prefix || 'support';
-    return p.startsWith('/') ? p : `/${p}`;
-});
-
-const currentUrl = computed(() => page.url);
-const isAdminSection = computed(() => currentUrl.value?.includes('/admin'));
-const isAgentSection = computed(() => currentUrl.value?.includes('/agent'));
-
-const adminLinks = computed(() => [
-    { href: `${prefix.value}/admin/reports`, label: 'Reports', icon: 'chart' },
-    { href: `${prefix.value}/admin/departments`, label: 'Departments', icon: 'grid' },
-    { href: `${prefix.value}/admin/sla-policies`, label: 'SLA Policies', icon: 'clock' },
-    { href: `${prefix.value}/admin/escalation-rules`, label: 'Escalation Rules', icon: 'arrow' },
-    { href: `${prefix.value}/admin/tags`, label: 'Tags', icon: 'tag' },
-    { href: `${prefix.value}/admin/canned-responses`, label: 'Canned Responses', icon: 'message' },
-]);
-
-const agentLinks = computed(() => [
-    { href: `${prefix.value}/agent`, label: 'Dashboard' },
-    { href: `${prefix.value}/agent/tickets`, label: 'Tickets' },
-]);
-
-const userName = computed(() => page.props.auth?.user?.name || 'User');
-const userInitial = computed(() => userName.value.charAt(0).toUpperCase());
-
-function isActive(href) {
-    if (!currentUrl.value) return false;
-    return currentUrl.value === href || currentUrl.value.startsWith(href + '/');
-}
-</script>
-
-<template>
-    <!-- MODE 1: Host layout provided (customer pages within host app) -->
-    <component :is="hostLayout" v-if="hostLayout">
-        <template #header>
-            <div class="flex items-center justify-between">
-                <h2 class="esc-heading text-xl font-semibold leading-tight text-gray-800">{{ title }}</h2>
-                <nav class="flex items-center gap-4 text-sm">
-                    <Link :href="prefix" class="text-gray-600 hover:text-gray-900">My Tickets</Link>
-                    <Link v-if="isAgent" :href="`${prefix}/agent`" class="text-gray-600 hover:text-gray-900">Agent Panel</Link>
-                    <Link v-if="isAdmin" :href="`${prefix}/admin/reports`" class="text-gray-600 hover:text-gray-900">Admin</Link>
-                </nav>
-            </div>
-        </template>
-
-        <div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
-            <slot />
-        </div>
-    </component>
-
-    <!-- MODE 2: Admin standalone — dark sidebar layout -->
-    <div v-else-if="isAdminSection" class="esc-root flex min-h-screen bg-gray-950">
-        <!-- Sidebar -->
-        <aside class="fixed inset-y-0 left-0 z-30 flex w-64 flex-col border-r border-white/10 bg-gray-900">
-            <!-- Logo -->
-            <div class="flex h-16 items-center gap-3 px-6">
-                <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 via-cyan-500 to-violet-500">
-                    <svg class="h-4 w-4 text-white" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
-                    </svg>
-                </div>
-                <span class="text-lg font-bold text-white">Escalated</span>
-                <span class="rounded bg-white/10 px-1.5 py-0.5 text-[10px] font-medium text-gray-400">Admin</span>
-            </div>
-
-            <!-- Nav -->
-            <nav class="mt-2 flex-1 space-y-1 px-3">
-                <Link v-for="link in adminLinks" :key="link.href" :href="link.href"
-                      :class="['group flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all',
-                               isActive(link.href)
-                                   ? 'bg-gradient-to-r from-orange-500/20 via-cyan-500/20 to-violet-500/20 text-white ring-1 ring-white/10'
-                                   : 'text-gray-400 hover:bg-white/5 hover:text-white']">
-                    {{ link.label }}
-                </Link>
-            </nav>
-
-            <!-- Bottom -->
-            <div class="border-t border-white/10 p-4">
-                <Link v-if="isAgent" :href="`${prefix}/agent`"
-                      class="flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-gray-400 transition-colors hover:bg-white/5 hover:text-white">
-                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" /></svg>
-                    Agent Panel
-                </Link>
-                <Link :href="prefix"
-                      class="flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-gray-400 transition-colors hover:bg-white/5 hover:text-white">
-                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" /></svg>
-                    Back to App
-                </Link>
-            </div>
-        </aside>
-
-        <!-- Main content -->
-        <div class="flex flex-1 flex-col pl-64">
-            <!-- Top bar -->
-            <header class="sticky top-0 z-20 flex h-16 items-center justify-between border-b border-white/10 bg-gray-900/80 px-6 backdrop-blur-xl">
-                <h1 class="text-lg font-semibold text-white">{{ title }}</h1>
-                <div class="flex items-center gap-3">
-                    <div class="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br from-cyan-500 to-violet-500 text-xs font-bold text-white">
-                        {{ userInitial }}
-                    </div>
-                    <span class="text-sm text-gray-300">{{ userName }}</span>
-                </div>
-            </header>
-
-            <!-- Page content -->
-            <main class="flex-1 p-4">
-                <div class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-950/5">
-                    <slot />
-                </div>
-            </main>
-        </div>
-    </div>
-
-    <!-- MODE 3: Agent standalone — dark top-nav layout -->
-    <div v-else-if="isAgentSection" class="esc-root min-h-screen bg-gray-950">
-        <!-- Top nav -->
-        <nav class="sticky top-0 z-30 border-b border-white/10 bg-gray-900">
-            <div class="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
-                <!-- Left: branding -->
-                <div class="flex items-center gap-3">
-                    <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 via-cyan-500 to-violet-500">
-                        <svg class="h-4 w-4 text-white" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
-                        </svg>
-                    </div>
-                    <span class="text-lg font-bold text-white">Escalated</span>
-                </div>
-
-                <!-- Center: nav links -->
-                <div class="flex items-center gap-1">
-                    <Link v-for="link in agentLinks" :key="link.href" :href="link.href"
-                          :class="['rounded-lg px-4 py-2 text-sm font-medium transition-all',
-                                   isActive(link.href)
-                                       ? 'bg-gradient-to-r from-orange-500/20 via-cyan-500/20 to-violet-500/20 text-white ring-1 ring-white/10'
-                                       : 'text-gray-400 hover:bg-white/5 hover:text-white']">
-                        {{ link.label }}
-                    </Link>
-                </div>
-
-                <!-- Right: user + back -->
-                <div class="flex items-center gap-4">
-                    <div class="flex items-center gap-2">
-                        <div class="flex h-7 w-7 items-center justify-center rounded-full bg-gradient-to-br from-cyan-500 to-violet-500 text-xs font-bold text-white">
-                            {{ userInitial }}
-                        </div>
-                        <span class="text-sm text-gray-300">{{ userName }}</span>
-                    </div>
-                    <div class="h-5 w-px bg-white/10"></div>
-                    <Link v-if="isAdmin" :href="`${prefix}/admin/reports`"
-                          class="text-sm text-gray-400 transition-colors hover:text-white">
-                        Admin
-                    </Link>
-                    <Link :href="prefix"
-                          class="text-sm text-gray-400 transition-colors hover:text-white">
-                        Back to App
-                    </Link>
-                </div>
-            </div>
-            <!-- Rainbow accent line -->
-            <div class="h-px bg-gradient-to-r from-orange-500 via-cyan-500 to-violet-500"></div>
-        </nav>
-
-        <!-- Page content -->
-        <main class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
-            <div class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-950/5">
-                <slot />
-            </div>
-        </main>
-    </div>
-
-    <!-- MODE 4: Customer standalone fallback (no host layout, not admin/agent) -->
-    <div v-else class="esc-root min-h-screen bg-gray-50">
-        <nav class="border-b border-gray-200 bg-white">
-            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-                <div class="flex h-14 items-center justify-between">
-                    <div class="flex items-center gap-6">
-                        <span class="text-lg font-bold text-gray-900">{{ title }}</span>
-                        <div class="flex items-center gap-4 text-sm">
-                            <Link :href="prefix" class="text-gray-600 hover:text-gray-900">My Tickets</Link>
-                            <Link v-if="isAgent" :href="`${prefix}/agent`" class="text-gray-600 hover:text-gray-900">Agent Panel</Link>
-                            <Link v-if="isAdmin" :href="`${prefix}/admin/reports`" class="text-gray-600 hover:text-gray-900">Admin</Link>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </nav>
-        <main class="flex-1">
-            <div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
-                <slot />
-            </div>
-        </main>
-    </div>
-</template>
+<script setup>
+import { computed, inject, provide } from 'vue';
+import { usePage, Link } from '@inertiajs/vue3';
+
+const props = defineProps({
+    title: { type: String, default: 'Support' },
+});
+
+const page = usePage();
+const hostLayout = inject('escalated-layout', null);
+
+const isAgent = computed(() => page.props.escalated?.is_agent);
+const isAdmin = computed(() => page.props.escalated?.is_admin);
+const prefix = computed(() => {
+    const p = page.props.escalated?.prefix || 'support';
+    return p.startsWith('/') ? p : `/${p}`;
+});
+
+const currentUrl = computed(() => page.url);
+const isAdminSection = computed(() => currentUrl.value?.includes('/admin'));
+const isAgentSection = computed(() => currentUrl.value?.includes('/agent'));
+const isDark = computed(() => isAdminSection.value || isAgentSection.value);
+
+provide('esc-dark', isDark);
+
+const adminLinks = computed(() => [
+    { href: `${prefix.value}/admin/reports`, label: 'Reports', icon: 'M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z' },
+    { href: `${prefix.value}/admin/tickets`, label: 'Tickets', icon: 'M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 010 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 010-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375z' },
+    { href: `${prefix.value}/admin/departments`, label: 'Departments', icon: 'M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 01-1.125-1.125v-3.75zM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-8.25zM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-2.25z' },
+    { href: `${prefix.value}/admin/sla-policies`, label: 'SLA Policies', icon: 'M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z' },
+    { href: `${prefix.value}/admin/escalation-rules`, label: 'Escalation Rules', icon: 'M3 4.5h14.25M3 9h9.75M3 13.5h5.25m5.25-.75L17.25 9m0 0L21 12.75M17.25 9v12' },
+    { href: `${prefix.value}/admin/tags`, label: 'Tags', icon: 'M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z M6 6h.008v.008H6V6z' },
+    { href: `${prefix.value}/admin/canned-responses`, label: 'Canned Responses', icon: 'M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z' },
+    { href: `${prefix.value}/admin/settings`, label: 'Settings', icon: 'M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.204-.107-.397.165-.71.505-.781.93l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894zM15 12a3 3 0 11-6 0 3 3 0 016 0z' },
+]);
+
+const agentLinks = computed(() => [
+    { href: `${prefix.value}/agent`, label: 'Dashboard', icon: 'M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25' },
+    { href: `${prefix.value}/agent/tickets`, label: 'Tickets', icon: 'M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 010 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 010-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375z' },
+]);
+
+const userName = computed(() => page.props.auth?.user?.name || 'User');
+const userInitial = computed(() => userName.value.charAt(0).toUpperCase());
+
+function isActive(href) {
+    if (!currentUrl.value) return false;
+    return currentUrl.value === href || currentUrl.value.startsWith(href + '/');
+}
+</script>
+
+<template>
+    <!-- MODE 1: Admin — dark sidebar layout -->
+    <div v-if="isAdminSection" class="flex min-h-screen bg-black" style="color-scheme: dark">
+        <!-- Sidebar -->
+        <aside class="fixed inset-y-0 left-0 z-30 flex w-64 flex-col border-r border-white/[0.06] bg-neutral-950">
+            <!-- Logo -->
+            <div class="flex h-16 items-center gap-3 px-5">
+                <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-white/10">
+                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                        <defs><linearGradient id="esc-rainbow-admin" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f97316"/><stop offset="30%" stop-color="#eab308"/><stop offset="50%" stop-color="#22c55e"/><stop offset="70%" stop-color="#3b82f6"/><stop offset="100%" stop-color="#8b5cf6"/></linearGradient></defs>
+                        <g transform="translate(12,12) scale(1.35) translate(-12,-12)"><polyline points="17 11 12 6 7 11" stroke="url(#esc-rainbow-admin)"/><polyline points="17 18 12 13 7 18" stroke="url(#esc-rainbow-admin)"/></g>
+                    </svg>
+                </div>
+                <div>
+                    <span class="text-sm font-bold text-white tracking-wide">Escalated</span>
+                    <span class="ml-1.5 rounded bg-white/[0.08] px-1.5 py-0.5 text-[10px] font-semibold text-neutral-500">ADMIN</span>
+                </div>
+            </div>
+
+            <!-- Nav -->
+            <nav class="mt-1 flex-1 space-y-0.5 overflow-y-auto px-3">
+                <Link v-for="link in adminLinks" :key="link.href" :href="link.href"
+                      :class="['group flex items-center gap-3 rounded-lg px-3 py-2 text-[13px] font-medium transition-all',
+                               isActive(link.href)
+                                   ? 'bg-white/[0.08] text-white'
+                                   : 'text-neutral-500 hover:bg-white/[0.04] hover:text-neutral-300']">
+                    <svg :class="['h-[18px] w-[18px] shrink-0', isActive(link.href) ? 'text-white' : 'text-neutral-600 group-hover:text-neutral-400']"
+                         fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" :d="link.icon" />
+                    </svg>
+                    {{ link.label }}
+                </Link>
+            </nav>
+
+            <!-- Bottom section -->
+            <div class="border-t border-white/[0.06] p-3">
+                <Link v-if="isAgent" :href="`${prefix}/agent`"
+                      class="flex items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] text-neutral-500 transition-colors hover:bg-white/[0.04] hover:text-neutral-300">
+                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" /></svg>
+                    Agent Panel
+                </Link>
+                <Link :href="prefix"
+                      class="flex items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] text-neutral-500 transition-colors hover:bg-white/[0.04] hover:text-neutral-300">
+                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" /></svg>
+                    Back to App
+                </Link>
+
+                <!-- User -->
+                <div class="mt-2 flex items-center gap-3 rounded-lg bg-white/[0.03] px-3 py-2.5">
+                    <div class="flex h-7 w-7 items-center justify-center rounded-md bg-white/[0.08] text-xs font-semibold text-neutral-400">
+                        {{ userInitial }}
+                    </div>
+                    <span class="text-sm text-neutral-400">{{ userName }}</span>
+                </div>
+            </div>
+        </aside>
+
+        <!-- Main content -->
+        <div class="flex flex-1 flex-col pl-64">
+            <!-- Top bar -->
+            <header class="sticky top-0 z-20 flex h-14 items-center border-b border-white/[0.06] bg-black/80 px-6 backdrop-blur-xl">
+                <h1 class="text-sm font-semibold text-white">{{ title }}</h1>
+            </header>
+
+            <!-- Page content -->
+            <main class="flex-1 p-6">
+                <slot />
+            </main>
+        </div>
+    </div>
+
+    <!-- MODE 2: Agent — dark top-nav layout -->
+    <div v-else-if="isAgentSection" class="min-h-screen bg-black" style="color-scheme: dark">
+        <!-- Top nav -->
+        <nav class="sticky top-0 z-30 border-b border-white/[0.06] bg-neutral-950/95 backdrop-blur-xl">
+            <div class="mx-auto flex h-14 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
+                <!-- Left: branding -->
+                <div class="flex items-center gap-3">
+                    <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-white/10">
+                        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                            <defs><linearGradient id="esc-rainbow-agent" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f97316"/><stop offset="30%" stop-color="#eab308"/><stop offset="50%" stop-color="#22c55e"/><stop offset="70%" stop-color="#3b82f6"/><stop offset="100%" stop-color="#8b5cf6"/></linearGradient></defs>
+                            <g transform="translate(12,12) scale(1.35) translate(-12,-12)"><polyline points="17 11 12 6 7 11" stroke="url(#esc-rainbow-agent)"/><polyline points="17 18 12 13 7 18" stroke="url(#esc-rainbow-agent)"/></g>
+                        </svg>
+                    </div>
+                    <span class="text-sm font-bold text-white tracking-wide">Escalated</span>
+                </div>
+
+                <!-- Center: nav links -->
+                <div class="flex items-center gap-1">
+                    <Link v-for="link in agentLinks" :key="link.href" :href="link.href"
+                          :class="['flex items-center gap-2 rounded-lg px-3.5 py-1.5 text-[13px] font-medium transition-all',
+                                   isActive(link.href)
+                                       ? 'bg-white/[0.08] text-white'
+                                       : 'text-neutral-500 hover:bg-white/[0.04] hover:text-neutral-300']">
+                        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" :d="link.icon" />
+                        </svg>
+                        {{ link.label }}
+                    </Link>
+                </div>
+
+                <!-- Right: user + links -->
+                <div class="flex items-center gap-3">
+                    <Link v-if="isAdmin" :href="`${prefix}/admin/reports`"
+                          class="text-[13px] text-neutral-500 transition-colors hover:text-white">
+                        Admin
+                    </Link>
+                    <Link :href="prefix"
+                          class="text-[13px] text-neutral-500 transition-colors hover:text-white">
+                        Back to App
+                    </Link>
+                    <div class="ml-1 h-5 w-px bg-white/[0.08]"></div>
+                    <div class="flex items-center gap-2">
+                        <div class="flex h-7 w-7 items-center justify-center rounded-md bg-white/[0.08] text-[10px] font-semibold text-neutral-400">
+                            {{ userInitial }}
+                        </div>
+                        <span class="text-[13px] text-neutral-400">{{ userName }}</span>
+                    </div>
+                </div>
+            </div>
+        </nav>
+
+        <!-- Page content -->
+        <main class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
+            <slot />
+        </main>
+    </div>
+
+    <!-- MODE 3: Customer pages — use host app layout if provided -->
+    <component :is="hostLayout" v-else-if="hostLayout">
+        <template #header>
+            <div class="flex items-center justify-between">
+                <h2 class="text-xl font-semibold leading-tight text-gray-800">{{ title }}</h2>
+                <nav class="flex items-center gap-4 text-sm">
+                    <Link :href="prefix" class="text-gray-600 hover:text-gray-900">My Tickets</Link>
+                    <Link v-if="isAgent" :href="`${prefix}/agent`" class="text-gray-600 hover:text-gray-900">Agent Panel</Link>
+                    <Link v-if="isAdmin" :href="`${prefix}/admin/reports`" class="text-gray-600 hover:text-gray-900">Admin</Link>
+                </nav>
+            </div>
+        </template>
+
+        <div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
+            <slot />
+        </div>
+    </component>
+
+    <!-- MODE 4: Customer standalone fallback (no host layout) -->
+    <div v-else class="min-h-screen bg-gray-50">
+        <nav class="border-b border-gray-200 bg-white">
+            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+                <div class="flex h-14 items-center justify-between">
+                    <div class="flex items-center gap-6">
+                        <span class="text-lg font-bold text-gray-900">{{ title }}</span>
+                        <div class="flex items-center gap-4 text-sm">
+                            <Link :href="prefix" class="text-gray-600 hover:text-gray-900">My Tickets</Link>
+                            <Link v-if="isAgent" :href="`${prefix}/agent`" class="text-gray-600 hover:text-gray-900">Agent Panel</Link>
+                            <Link v-if="isAdmin" :href="`${prefix}/admin/reports`" class="text-gray-600 hover:text-gray-900">Admin</Link>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </nav>
+        <main class="flex-1">
+            <div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
+                <slot />
+            </div>
+        </main>
+    </div>
+</template>

package/src/components/FileDropzone.vue

@@ -1,7 +1,8 @@
 <script setup>
-import { ref } from 'vue';
+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);
@@ -27,10 +28,14 @@ function browse() {
 
 <template>
     <div @dragover.prevent="dragging = true" @dragleave="dragging = false" @drop.prevent="onDrop"
-         :class="['cursor-pointer rounded-md border-2 border-dashed px-4 py-3 text-center text-xs transition-colors',
-                  dragging ? 'border-blue-400 bg-blue-50' : 'border-gray-300 hover:border-gray-400']"
+         :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="text-gray-500">Drop files here or <span class="font-medium text-blue-600">browse</span></p>
+        <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>