"use client";

import { FocusTrappedModalKit, type ModalEdge } from "./index";

export interface DemoProps {
  from?: ModalEdge;
  trapFocus?: boolean;
  accent?: string;
  label?: string;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ from = "top", trapFocus = true, accent = "#F5C542", label = "Session settings" }: DemoProps) {
  return <FocusTrappedModalKit from={from} trapFocus={trapFocus} accent={accent} label={label} />;
}

1d:T20a5, 1e:T1cb7a,

<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";

const props = withDefaults(
  defineProps<{
    from?: "top" | "bottom" | "left" | "right";
    trapFocus?: boolean;
    accent?: string;
    label?: string;
  }>(),
  { from: "top", trapFocus: true, accent: "#F5C542", label: "Session settings" },
);

const FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';

const open = ref(false);
const trap = ref(props.trapFocus);
const panelEl = ref<HTMLElement | null>(null);
const triggerEl = ref<HTMLButtonElement | null>(null);
let focusOnOpen = false;
let autoTimer: number | undefined;

watch(
  () => props.trapFocus,
  (next) => {
    trap.value = next;
  },
);

onMounted(() => {
  autoTimer = window.setTimeout(() => {
    open.value = true;
  }, 650);
});
onBeforeUnmount(() => window.clearTimeout(autoTimer));

watch(open, async (isOpen) => {
  if (!isOpen) return;
  if (focusOnOpen) {
    await new Promise((resolve) => requestAnimationFrame(resolve));
    panelEl.value?.querySelector<HTMLElement>(FOCUSABLE)?.focus();
  }
  focusOnOpen = false;
});

function close(returnFocus: boolean) {
  open.value = false;
  if (returnFocus) triggerEl.value?.focus();
}

function openPanel() {
  focusOnOpen = true;
  open.value = true;
}

function onPanelKeydown(event: KeyboardEvent) {
  if (event.key === "Escape") {
    event.stopPropagation();
    close(true);
    return;
  }
  if (event.key !== "Tab" || !trap.value || !panelEl.value) return;
  const focusables = Array.from(panelEl.value.querySelectorAll<HTMLElement>(FOCUSABLE));
  if (focusables.length === 0) return;
  if (focusables.length === 1) {
    event.preventDefault();
    focusables[0].focus();
    return;
  }
  const first = focusables[0];
  const last = focusables[focusables.length - 1];
  const active = document.activeElement;
  if (event.shiftKey && active === first) {
    event.preventDefault();
    last.focus();
  } else if (!event.shiftKey && active === last) {
    event.preventDefault();
    first.focus();
  }
}

const TILT: Record<string, { rx: number; ry: number; x: number; y: number; origin: string }> = {
  top: { rx: -46, ry: 0, x: 0, y: -14, origin: "50% 0%" },
  bottom: { rx: 46, ry: 0, x: 0, y: 14, origin: "50% 100%" },
  left: { rx: 0, ry: -46, x: -14, y: 0, origin: "0% 50%" },
  right: { rx: 0, ry: 46, x: 14, y: 0, origin: "100% 50%" },
};

const tilt = computed(() => TILT[props.from]);
const panelStyle = computed(() => ({
  transformOrigin: tilt.value.origin,
  ["--ftm-rx" as string]: `${tilt.value.rx}deg`,
  ["--ftm-ry" as string]: `${tilt.value.ry}deg`,
  ["--ftm-x" as string]: `${tilt.value.x}px`,
  ["--ftm-y" as string]: `${tilt.value.y}px`,
}));
</script>

<template>
  <div class="ftm-root" :style="{ '--ftm-accent': accent }">
    <button type="button" role="switch" :aria-checked="trap" class="ftm-switch" @click="trap = !trap">
      <span class="ftm-track" :class="{ 'ftm-track--on': trap }" aria-hidden="true">
        <span class="ftm-thumb" :class="{ 'ftm-thumb--on': trap }"></span>
      </span>
      Trap focus
    </button>

    <button ref="triggerEl" type="button" class="ftm-trigger" @click="openPanel">Open panel</button>

    <Transition name="ftm-backdrop">
      <div v-if="open" class="ftm-backdrop" aria-hidden="true" @click="close(true)"></div>
    </Transition>

    <Transition name="ftm-panel">
      <div v-if="open" class="ftm-stage">
        <div
          ref="panelEl"
          class="ftm-panel"
          role="dialog"
          aria-modal="false"
          :aria-label="label"
          tabindex="-1"
          :style="panelStyle"
          @keydown="onPanelKeydown"
        >
          <h3 class="ftm-title">{{ label }}</h3>
          <p class="ftm-body">Changes apply to this device only. Signing out clears anything saved here.</p>
          <div class="ftm-footer">
            <button type="button" class="ftm-done" @click="close(true)">Done</button>
          </div>
        </div>
      </div>
    </Transition>
  </div>
</template>

<style scoped>
.ftm-root {
  position: relative;
  margin-inline: auto;
  display: flex;
  width: 100%;
  max-width: 320px;
  min-height: 230px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding-block: 2.5rem;
  color: inherit;
}
.ftm-switch {
  position: relative;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.25rem 0.75rem 0.25rem 0.25rem;
  border-radius: 9999px;
  border: 0;
  background: none;
  color: color-mix(in srgb, currentColor 70%, transparent);
  font: 500 12.5px system-ui, sans-serif;
  cursor: pointer;
}
.ftm-switch:hover {
  color: currentColor;
}
.ftm-track {
  position: relative;
  height: 19px;
  width: 33px;
  flex-shrink: 0;
  border-radius: 9999px;
  border: 1px solid currentColor;
  opacity: 0.4;
  transition: opacity 160ms ease;
}
.ftm-track--on {
  border-color: var(--ftm-accent);
  opacity: 1;
  background: color-mix(in srgb, var(--ftm-accent) 22%, transparent);
}
.ftm-thumb {
  position: absolute;
  top: 2.5px;
  left: 3px;
  display: block;
  height: 12px;
  width: 12px;
  border-radius: 9999px;
  background: currentColor;
  transition: left 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ftm-thumb--on {
  left: 17px;
  background: var(--ftm-accent);
}
.ftm-trigger {
  position: relative;
  z-index: 30;
  border-radius: 9px;
  border: 1px solid rgb(0 0 0 / 0.15);
  background: rgb(0 0 0 / 0.04);
  padding: 0.5rem 1rem;
  color: inherit;
  font: 500 13px system-ui, sans-serif;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.ftm-trigger:hover {
  border-color: rgb(0 0 0 / 0.3);
  background: rgb(0 0 0 / 0.07);
}
.ftm-trigger:focus-visible,
.ftm-switch:focus-visible,
.ftm-done:focus-visible {
  outline: 2px solid var(--ftm-accent);
  outline-offset: 2px;
}
.ftm-backdrop {
  position: absolute;
  inset: 0;
  z-index: 10;
  border-radius: 16px;
  background: rgba(4, 6, 9, 0.48);
  backdrop-filter: blur(3px);
}
.ftm-stage {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 1rem;
  perspective: 900px;
}
.ftm-panel {
  position: relative;
  width: min(280px, 100%);
  border-radius: 14px;
  border: 1px solid rgb(0 0 0 / 0.1);
  background: #fff;
  padding: 1.25rem;
  color: #0b0d10;
  outline: none;
  box-shadow: 0 20px 44px -24px rgba(0, 0, 0, 0.55);
  transform-style: preserve-3d;
}
.ftm-title {
  margin: 0;
  font: 600 15px/1.3 system-ui, sans-serif;
  letter-spacing: -0.01em;
}
.ftm-body {
  margin: 0.5rem 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: color-mix(in srgb, currentColor 60%, transparent);
}
.ftm-footer {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}
.ftm-done {
  border: 0;
  border-radius: 9px;
  padding: 0.5rem 1rem;
  background: var(--ftm-accent);
  color: #0b0d10;
  font: 600 13px system-ui, sans-serif;
  cursor: pointer;
}

.ftm-backdrop-enter-active,
.ftm-backdrop-leave-active {
  transition: opacity 180ms ease;
}
.ftm-backdrop-enter-from,
.ftm-backdrop-leave-to {
  opacity: 0;
}

.ftm-panel-enter-active .ftm-panel {
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), opacity 320ms ease;
}
.ftm-panel-leave-active .ftm-panel {
  transition: transform 160ms cubic-bezier(0.4, 0, 1, 1), opacity 160ms ease;
}
.ftm-panel-enter-from .ftm-panel,
.ftm-panel-leave-to .ftm-panel {
  opacity: 0;
  transform: perspective(900px) scale(0.9) translate(var(--ftm-x), var(--ftm-y)) rotateX(var(--ftm-rx)) rotateY(var(--ftm-ry));
}

@media (prefers-reduced-motion: reduce) {
  .ftm-backdrop-enter-active,
  .ftm-backdrop-leave-active,
  .ftm-panel-enter-active .ftm-panel,
  .ftm-panel-leave-active .ftm-panel {
    transition-duration: 1ms !important;
  }
  .ftm-panel-enter-from .ftm-panel,
  .ftm-panel-leave-to .ftm-panel {
    transform: none;
  }
}

@media (prefers-color-scheme: dark) {
  .ftm-trigger {
    border-color: rgb(255 255 255 / 0.15);
    background: rgb(255 255 255 / 0.06);
  }
  .ftm-trigger:hover {
    border-color: rgb(255 255 255 / 0.3);
    background: rgb(255 255 255 / 0.1);
  }
  .ftm-panel {
    border-color: rgb(255 255 255 / 0.12);
    background: #12151b;
    color: #f2f4f7;
  }
}
</style>

Nearby