{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "session-device-manager",
  "title": "Session Device Manager",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/session-device-manager/SessionDeviceManager.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport {\n  CheckCircle2,\n  Clock,\n  Globe,\n  Laptop,\n  LogOut,\n  MapPin,\n  Monitor,\n  Radio,\n  ShieldCheck,\n  Smartphone,\n  Tablet,\n  Terminal,\n  TriangleAlert,\n} from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\n\nexport interface SessionDevice {\n  id: string\n  name: string\n  deviceType: 'laptop' | 'desktop' | 'mobile' | 'tablet' | 'terminal'\n  os: string\n  browser: string\n  location: string\n  countryFlag: string\n  ip: string\n  signedInAt: string\n  lastActive: string\n  isMfa: boolean\n  isSuspicious?: boolean\n  customBadge?: {\n    label: string\n    variant: 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'info'\n  }\n}\n\nconst props = withDefaults(\n  defineProps<{\n    initialOtherSessions?: SessionDevice[]\n    initialShowSuspiciousAlert?: boolean\n    class?: HTMLAttributes['class']\n  }>(),\n  {\n    initialOtherSessions: undefined,\n    initialShowSuspiciousAlert: true,\n  },\n)\n\nconst currentSession = {\n  id: 'sess-current-01',\n  name: 'MacBook Pro 16\"',\n  deviceType: 'laptop' as const,\n  os: 'macOS Sequoia',\n  browser: 'Chrome 128.0',\n  location: 'San Francisco, CA, United States',\n  countryFlag: '🇺🇸',\n  ip: '76.76.21.21',\n  signedInAt: 'Aug 18, 2026 · 09:42 AM',\n  lastActive: 'Active right now',\n  isMfa: true,\n}\n\nconst stubOtherSessions: SessionDevice[] = [\n  {\n    id: 'sess-02',\n    name: 'iPhone 16 Pro',\n    deviceType: 'mobile',\n    os: 'iOS 18.0',\n    browser: 'Safari Mobile',\n    location: 'Los Angeles, CA, United States',\n    countryFlag: '🇺🇸',\n    ip: '172.56.21.89',\n    signedInAt: 'Aug 19, 2026',\n    lastActive: '12m ago',\n    isMfa: true,\n  },\n  {\n    id: 'sess-03',\n    name: 'Workstation',\n    deviceType: 'desktop',\n    os: 'Ubuntu 24.04 LTS',\n    browser: 'Firefox 130',\n    location: 'London, Greater London, United Kingdom',\n    countryFlag: '🇬🇧',\n    ip: '185.220.101.5',\n    signedInAt: 'Aug 21, 2026',\n    lastActive: '2h ago',\n    isMfa: true,\n    isSuspicious: true,\n    customBadge: {\n      label: 'New Location',\n      variant: 'warning',\n    },\n  },\n  {\n    id: 'sess-04',\n    name: 'CLI Token',\n    deviceType: 'terminal',\n    os: 'Darwin x64',\n    browser: 'Node.js SDK',\n    location: 'AWS us-east-1 (N. Virginia), United States',\n    countryFlag: '🇺🇸',\n    ip: '54.234.19.102',\n    signedInAt: 'Aug 10, 2026',\n    lastActive: '34m ago',\n    isMfa: true,\n    customBadge: {\n      label: 'CLI Token',\n      variant: 'secondary',\n    },\n  },\n  {\n    id: 'sess-05',\n    name: 'iPad Air',\n    deviceType: 'tablet',\n    os: 'iPadOS 17.6',\n    browser: 'Safari',\n    location: 'New York, NY, United States',\n    countryFlag: '🇺🇸',\n    ip: '68.195.44.110',\n    signedInAt: 'Aug 14, 2026',\n    lastActive: '3d ago',\n    isMfa: true,\n  },\n]\n\nconst otherSessions = ref<SessionDevice[]>(\n  props.initialOtherSessions\n    ? props.initialOtherSessions.map((s) => ({ ...s }))\n    : stubOtherSessions.map((s) => ({ ...s })),\n)\n\nconst showSuspiciousAlert = ref(props.initialShowSuspiciousAlert)\nconst revokingAll = ref(false)\nconst confirmingRevokeId = ref<string | null>(null)\nlet confirmTimer: number | undefined\n\nfunction dismissAlert() {\n  showSuspiciousAlert.value = false\n}\n\nfunction revokeSuspicious() {\n  otherSessions.value = otherSessions.value.filter((s) => !s.isSuspicious)\n  showSuspiciousAlert.value = false\n}\n\nfunction requestRevoke(id: string) {\n  if (confirmingRevokeId.value === id) {\n    revokeSession(id)\n    return\n  }\n  confirmingRevokeId.value = id\n  window.clearTimeout(confirmTimer)\n  confirmTimer = window.setTimeout(() => {\n    confirmingRevokeId.value = null\n  }, 3000)\n}\n\nfunction cancelRevoke(id: string) {\n  if (confirmingRevokeId.value === id) {\n    window.clearTimeout(confirmTimer)\n    confirmingRevokeId.value = null\n  }\n}\n\nfunction revokeSession(id: string) {\n  window.clearTimeout(confirmTimer)\n  confirmingRevokeId.value = null\n  const target = otherSessions.value.find((s) => s.id === id)\n  if (target?.isSuspicious) {\n    showSuspiciousAlert.value = false\n  }\n  otherSessions.value = otherSessions.value.filter((s) => s.id !== id)\n}\n\nfunction revokeAllOtherSessions() {\n  revokingAll.value = true\n  otherSessions.value = []\n  showSuspiciousAlert.value = false\n  setTimeout(() => {\n    revokingAll.value = false\n  }, 600)\n}\n</script>\n\n<template>\n  <div data-slot=\"session-device-manager\" :class=\"cn('mx-auto w-full max-w-4xl space-y-6', props.class)\">\n    <!-- Header -->\n    <div class=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n      <div class=\"space-y-1\">\n        <h2 class=\"text-foreground text-xl font-semibold tracking-tight sm:text-2xl\">\n          Active Sessions & Connected Devices\n        </h2>\n        <p class=\"text-muted-foreground text-xs sm:text-sm\">\n          Manage and revoke active login sessions across your desktop, mobile, and CLI tokens.\n        </p>\n      </div>\n      <Button\n        variant=\"destructive\"\n        size=\"sm\"\n        :disabled=\"otherSessions.length === 0 || revokingAll\"\n        class=\"shrink-0\"\n        @click=\"revokeAllOtherSessions\"\n      >\n        <LogOut class=\"size-4\" />\n        Revoke All Other Sessions\n      </Button>\n    </div>\n\n    <!-- Suspicious Login Alert Banner -->\n    <div\n      v-if=\"showSuspiciousAlert\"\n      class=\"border-warning/30 bg-warning/10 text-foreground relative flex flex-col gap-3 rounded-lg border p-4 text-sm sm:flex-row sm:items-start sm:justify-between\"\n      role=\"alert\"\n    >\n      <div class=\"flex items-start gap-3\">\n        <div class=\"bg-warning/20 text-warning mt-0.5 grid size-8 shrink-0 place-items-center rounded-md\">\n          <TriangleAlert class=\"size-4\" />\n        </div>\n        <div class=\"space-y-1\">\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <p class=\"text-foreground font-semibold\">Suspicious Login Detected</p>\n            <Badge variant=\"warning\" class=\"text-xs\">Is this you?</Badge>\n          </div>\n          <p class=\"text-muted-foreground text-xs leading-relaxed\">\n            Recent new login on <span class=\"text-foreground font-medium\">Workstation · Firefox 130</span> from\n            <span class=\"text-foreground font-medium\">London, UK (IP 185.220.101.5)</span> on Aug 21, 2026. If you do\n            not recognize this activity, revoke the session immediately.\n          </p>\n        </div>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 sm:self-center\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"text-muted-foreground hover:text-foreground h-8 text-xs\"\n          @click=\"dismissAlert\"\n        >\n          This was me\n        </Button>\n        <Button variant=\"destructive\" size=\"sm\" class=\"h-8 text-xs\" @click=\"revokeSuspicious\"> Revoke Session </Button>\n      </div>\n    </div>\n\n    <!-- Current Session Hero Card -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardHeader class=\"pb-3\">\n        <div class=\"flex flex-wrap items-center justify-between gap-2\">\n          <div class=\"flex items-center gap-2.5\">\n            <span class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\"> This Device </span>\n            <Badge variant=\"success\" class=\"gap-1.5 py-0.5 text-xs\">\n              <span class=\"relative flex size-2\">\n                <span class=\"bg-success absolute inline-flex size-full rounded-full opacity-75\" />\n                <span class=\"bg-success relative inline-flex size-2 rounded-full\" />\n              </span>\n              Current Active Session\n            </Badge>\n          </div>\n          <Badge variant=\"outline\" class=\"text-muted-foreground gap-1 text-xs\">\n            <ShieldCheck class=\"text-success size-3.5\" />\n            2FA Verified\n          </Badge>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"space-y-4\">\n        <div class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n          <div class=\"flex items-start gap-3.5\">\n            <div\n              class=\"border-border bg-muted/80 text-foreground flex size-11 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n            >\n              <Laptop class=\"size-5\" />\n            </div>\n            <div class=\"space-y-1\">\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <h3 class=\"text-foreground text-base font-semibold sm:text-lg\">\n                  {{ currentSession.name }} · {{ currentSession.os }}\n                </h3>\n              </div>\n              <p class=\"text-muted-foreground text-xs font-medium sm:text-sm\">\n                {{ currentSession.browser }}\n              </p>\n            </div>\n          </div>\n\n          <div\n            class=\"border-border bg-muted/40 text-muted-foreground flex items-center gap-1.5 self-start rounded-md border px-2.5 py-1 text-xs sm:self-auto\"\n          >\n            <Radio class=\"text-success size-3.5\" />\n            <span class=\"text-foreground font-medium\">{{ currentSession.lastActive }}</span>\n          </div>\n        </div>\n\n        <Separator />\n\n        <div class=\"grid grid-cols-1 gap-3 text-xs sm:grid-cols-2 lg:grid-cols-3\">\n          <div class=\"text-muted-foreground flex items-center gap-2\">\n            <MapPin class=\"text-foreground size-3.5 shrink-0\" />\n            <span class=\"truncate\"> {{ currentSession.countryFlag }} {{ currentSession.location }} </span>\n          </div>\n\n          <div class=\"text-muted-foreground flex items-center gap-2 font-mono\">\n            <Globe class=\"text-foreground size-3.5 shrink-0\" />\n            <span>IP: {{ currentSession.ip }}</span>\n          </div>\n\n          <div class=\"text-muted-foreground flex items-center gap-2 sm:col-span-2 lg:col-span-1\">\n            <Clock class=\"text-foreground size-3.5 shrink-0\" />\n            <span>Signed in: {{ currentSession.signedInAt }}</span>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Other Active Sessions List -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardHeader>\n        <div class=\"flex flex-wrap items-center justify-between gap-2\">\n          <div>\n            <CardTitle class=\"text-foreground text-base font-semibold sm:text-lg\"> Other Active Sessions </CardTitle>\n            <CardDescription class=\"mt-1 text-xs sm:text-sm\">\n              {{ otherSessions.length }} active session{{ otherSessions.length === 1 ? '' : 's' }} authenticated across\n              your secondary devices and automation workflows.\n            </CardDescription>\n          </div>\n          <Badge variant=\"secondary\" class=\"font-mono text-xs\"> {{ otherSessions.length }} active </Badge>\n        </div>\n      </CardHeader>\n\n      <CardContent>\n        <!-- Empty State -->\n        <div\n          v-if=\"otherSessions.length === 0\"\n          class=\"border-border flex flex-col items-center justify-center rounded-lg border border-dashed py-12 text-center\"\n        >\n          <div class=\"bg-muted text-muted-foreground grid size-11 place-items-center rounded-full\">\n            <CheckCircle2 class=\"text-success size-5\" />\n          </div>\n          <p class=\"text-foreground mt-3 text-sm font-medium\">No other active sessions</p>\n          <p class=\"text-muted-foreground mt-1 max-w-sm text-xs\">\n            Your account is only signed in on this device. All previous mobile, workstation, and CLI sessions have been\n            revoked.\n          </p>\n        </div>\n\n        <!-- Sessions List -->\n        <ul v-else class=\"divide-border -my-2 divide-y\">\n          <li\n            v-for=\"session in otherSessions\"\n            :key=\"session.id\"\n            class=\"flex flex-col gap-3 py-4 sm:flex-row sm:items-center sm:justify-between\"\n          >\n            <div class=\"flex items-start gap-3\">\n              <!-- Device Icon -->\n              <div\n                class=\"border-border bg-muted/60 text-muted-foreground flex size-10 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n              >\n                <Smartphone v-if=\"session.deviceType === 'mobile'\" class=\"size-4\" />\n                <Monitor v-else-if=\"session.deviceType === 'desktop'\" class=\"size-4\" />\n                <Terminal v-else-if=\"session.deviceType === 'terminal'\" class=\"size-4\" />\n                <Tablet v-else-if=\"session.deviceType === 'tablet'\" class=\"size-4\" />\n                <Laptop v-else class=\"size-4\" />\n              </div>\n\n              <!-- Details -->\n              <div class=\"min-w-0 space-y-1\">\n                <div class=\"flex flex-wrap items-center gap-2\">\n                  <p class=\"text-foreground truncate text-sm font-medium\">{{ session.name }} · {{ session.browser }}</p>\n                  <Badge variant=\"outline\" class=\"gap-1 py-0 text-xs\">\n                    <ShieldCheck class=\"text-success size-3\" />\n                    2FA Verified\n                  </Badge>\n                  <Badge v-if=\"session.customBadge\" :variant=\"session.customBadge.variant\" class=\"text-xs\">\n                    {{ session.customBadge.label }}\n                  </Badge>\n                </div>\n\n                <div class=\"text-muted-foreground flex flex-wrap items-center gap-x-3 gap-y-1 text-xs\">\n                  <span class=\"flex items-center gap-1\">\n                    <MapPin class=\"size-3 shrink-0\" />\n                    {{ session.countryFlag }} {{ session.location }}\n                  </span>\n                  <span>·</span>\n                  <span class=\"font-mono\">IP: {{ session.ip }}</span>\n                </div>\n\n                <p class=\"text-muted-foreground text-xs\">\n                  Signed in {{ session.signedInAt }} · Last active\n                  <span class=\"text-foreground font-medium\">{{ session.lastActive }}</span>\n                </p>\n              </div>\n            </div>\n\n            <!-- Action -->\n            <div class=\"flex shrink-0 items-center gap-2 self-end sm:self-center\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                :class=\"\n                  confirmingRevokeId === session.id\n                    ? 'bg-destructive hover:bg-destructive/90 border-transparent text-white'\n                    : 'text-destructive border-destructive/30 hover:bg-destructive/10 hover:text-destructive'\n                \"\n                @click=\"requestRevoke(session.id)\"\n                @blur=\"cancelRevoke(session.id)\"\n              >\n                {{ confirmingRevokeId === session.id ? 'Confirm Revoke?' : 'Revoke Session' }}\n              </Button>\n            </div>\n          </li>\n        </ul>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/SessionDeviceManager.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/separator.json"
  ],
  "description": "Active multi-device login sessions manager and security dashboard featuring current session hero card with IP geolocation, suspicious new login alert banner, 2FA verification badges, and instant individual or bulk session revocation for desktop, mobile, and CLI tokens.",
  "categories": [
    "security",
    "app",
    "dashboard"
  ]
}