"use client";

import { AppFolderExpand } from "./index";

export interface DemoProps {
  title?: string;
  appCount?: number;
  accent?: string;
  bounce?: number;
  closeOnBackdrop?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ title = "Creator Studio", appCount = 9, accent = "#38BDF8", bounce = 0.15, closeOnBackdrop = true }: DemoProps) {
  return (
    <div className="mx-auto w-full max-w-[420px] px-4 py-6">
      <div className="relative overflow-hidden rounded-[28px] border border-white/10 bg-[#0E1116]" style={{ minHeight: 420 }}>
        <div className="pointer-events-none absolute inset-x-6 top-5 flex items-center justify-between text-[11px] font-medium text-white/25">
          <span>9:41</span>
          <span>Home</span>
        </div>
        <div className="grid h-full place-items-center px-6 py-16">
          <AppFolderExpand title={title} appCount={appCount} accent={accent} bounce={bounce} closeOnBackdrop={closeOnBackdrop} />
        </div>
      </div>
    </div>
  );
}

1e:T3236, 1f:T2779a,

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

const props = withDefaults(
  defineProps<{
    title?: string;
    appCount?: number;
    accent?: string;
    bounce?: number;
    closeOnBackdrop?: boolean;
  }>(),
  { title: "Creator Studio", appCount: 9, accent: "#38BDF8", bounce: 0.15, closeOnBackdrop: true },
);

interface AppDef {
  name: string;
  d: string;
}
interface Slot {
  name: string;
  d: string;
  fill: string;
  ink: string;
}

const APPS: AppDef[] = [
  { name: "Camera", d: "M4,8L20,8L20,19L4,19Z M8.7,13.5A3.3,3.3 0 1,0 15.3,13.5A3.3,3.3 0 1,0 8.7,13.5Z" },
  { name: "Paint", d: "M12 3c3.6 4.1 6.2 7.3 6.2 10.3a6.2 6.2 0 0 1-12.4 0C5.8 10.3 8.4 7.1 12 3Z" },
  { name: "Beats", d: "M5.5,15.5L5.5,9 M10,18L10,6 M14.5,15.5L14.5,9 M19,13L19,11" },
  { name: "Chat", d: "M4 6.6A2.6 2.6 0 0 1 6.6 4h10.8A2.6 2.6 0 0 1 20 6.6v6.8a2.6 2.6 0 0 1-2.6 2.6H10l-4.3 3.4a.6.6 0 0 1-1-.47V16h-.1A2.6 2.6 0 0 1 4 13.4Z" },
  { name: "Layers", d: "M12,3.6L20,8L12,12.4L4,8Z M4,12.4L12,16.8L20,12.4 M4,16.4L12,20.8L20,16.4" },
  { name: "Wand", d: "M6,18.5L16.5,8 M20.6,6.2L22,6.2 M17.8,2.4L17.8,4 M19.4,3.4L20.6,4.6" },
  { name: "Frame", d: "M7,3L7,17A2,2 0 0,0 9,19L17,19 M17,21L17,7A2,2 0 0,0 15,5L3,5" },
  { name: "Compass", d: "M3.8,12A8.2,8.2 0 1,0 20.2,12A8.2,8.2 0 1,0 3.8,12Z M14.6,9.4L12.7,14.6L7.5,16.5L9.4,11.3Z" },
  { name: "Timer", d: "M4.4,13A7.6,7.6 0 1,0 19.6,13A7.6,7.6 0 1,0 4.4,13Z M12,13L12,9.2 M9.4,3.4L14.6,3.4" },
  { name: "Bolt", d: "M13 3 6 14h5l-1 7 8-12h-5l1-6Z" },
  { name: "Grid", d: "M4,4L11,4L11,11L4,11Z M13,4L20,4L20,11L13,11Z M4,13L11,13L11,20L4,20Z M13,13L20,13L20,20L13,20Z" },
  { name: "Heart", d: "M12 20s-7-4.3-9.3-8.6C1.2 8.1 3 5 6.3 5c1.9 0 3.3 1 3.7 2.4C10.4 6 11.8 5 13.7 5 17 5 18.8 8.1 21.3 11.4 19 15.7 12 20 12 20Z" },
];

function hexToHsl(hex: string): [number, number, number] {
  const raw = hex.replace("#", "");
  const n = Number.parseInt(raw.length === 6 ? raw : "38bdf8", 16) || 0;
  const r = ((n >> 16) & 255) / 255;
  const g = ((n >> 8) & 255) / 255;
  const b = (n & 255) / 255;
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const d = max - min;
  const l = (max + min) / 2;
  const s = d === 0 ? 0 : d / (1 - Math.abs(2 * l - 1));
  let h = 0;
  if (d !== 0) {
    if (max === r) h = ((g - b) / d) % 6;
    else if (max === g) h = (b - r) / d + 2;
    else h = (r - g) / d + 4;
    h = (h * 60 + 360) % 360;
  }
  return [h, s * 100, l * 100];
}

function iconTone(hsl: [number, number, number], index: number, total: number): { fill: string; ink: string } {
  const [h, s] = hsl;
  const t = total <= 1 ? 0.4 : index / (total - 1);
  const l = 30 + 32 * t;
  return {
    fill: `hsl(${h.toFixed(1)} ${Math.min(72, s).toFixed(1)}% ${l.toFixed(1)}%)`,
    ink: l > 47 ? "rgba(10,12,15,0.86)" : "rgba(255,255,255,0.92)",
  };
}

const open = ref(false);
const landed = ref(false);
const launchedText = ref<string | null>(null);
const reduced = ref(false);
const tileEl = ref<HTMLButtonElement | null>(null);
const closeEl = ref<HTMLButtonElement | null>(null);

let landTimer: number | undefined;
let closeTimer: number | undefined;
let launchTimer: number | undefined;
let autoTimer: number | undefined;

const count = computed(() => Math.min(12, Math.max(4, Math.round(props.appCount))));
const previewCount = computed(() => Math.min(9, count.value));
const extraCount = computed(() => count.value - previewCount.value);
const hsl = computed(() => hexToHsl(props.accent));

const mainSlots = computed<(Slot | null)[]>(() =>
  Array.from({ length: 9 }, (_, i) => {
    if (i >= previewCount.value) return null;
    const app = APPS[i % APPS.length];
    return { name: app.name, d: app.d, ...iconTone(hsl.value, i, previewCount.value) };
  }),
);

const extraSlots = computed<Slot[]>(() =>
  Array.from({ length: extraCount.value }, (_, i) => {
    const index = 9 + i;
    const app = APPS[index % APPS.length];
    return { name: app.name, d: app.d, ...iconTone(hsl.value, index, count.value) };
  }),
);

const easing = computed(() => `cubic-bezier(0.34, ${(1 + Math.min(0.6, Math.max(0, props.bounce)) * 1.8).toFixed(2)}, 0.64, 1)`);
const motionStyle = computed(() =>
  reduced.value
    ? { transitionDuration: "0.12s", transitionTimingFunction: "ease-out" }
    : { transitionDuration: "0.48s", transitionTimingFunction: easing.value },
);

function requestOpen(fromUser: boolean) {
  window.clearTimeout(closeTimer);
  open.value = true;
  if (extraCount.value > 0 && !reduced.value) {
    landTimer = window.setTimeout(() => (landed.value = true), 420);
  } else {
    landed.value = true;
  }
  if (fromUser) nextTick(() => closeEl.value?.focus());
}

function requestClose(fromUser: boolean) {
  window.clearTimeout(landTimer);
  const finish = () => {
    landed.value = false;
    open.value = false;
    if (fromUser) nextTick(() => tileEl.value?.focus());
  };
  if (extraCount.value > 0 && landed.value && !reduced.value) {
    landed.value = false;
    closeTimer = window.setTimeout(finish, 120);
  } else {
    finish();
  }
}

function handleLaunch(name: string) {
  launchedText.value = `Opened ${name}`;
  window.clearTimeout(launchTimer);
  launchTimer = window.setTimeout(() => (launchedText.value = null), 1600);
}

function onKeydown(event: KeyboardEvent) {
  if (event.key === "Escape" && open.value) {
    event.preventDefault();
    requestClose(true);
  }
}

onMounted(() => {
  reduced.value = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  autoTimer = window.setTimeout(() => requestOpen(false), 750);
});

onBeforeUnmount(() => {
  window.clearTimeout(autoTimer);
  window.clearTimeout(landTimer);
  window.clearTimeout(closeTimer);
  window.clearTimeout(launchTimer);
});
</script>

<template>
  <div class="folder-stage" :style="{ '--fx-ring': accent }" @keydown="onKeydown">
    <Transition name="fade">
      <div v-if="open" class="folder-backdrop" aria-hidden="true" @click="closeOnBackdrop && requestClose(true)"></div>
    </Transition>

    <div class="folder-wrap">
      <Transition name="folder">
        <div v-if="!open" key="tile" class="folder-tile-wrap" :style="motionStyle">
          <button ref="tileEl" type="button" class="folder-tile" aria-haspopup="true" aria-expanded="false" :aria-label="`Open ${title} folder`" @click="requestOpen(true)">
            <div class="folder-grid folder-grid--mini">
              <div v-for="(slot, i) in mainSlots" :key="i" class="folder-icon folder-icon--mini" :class="{ 'folder-icon--empty': !slot }" :style="slot ? { background: slot.fill } : undefined">
                <svg v-if="slot" viewBox="0 0 24 24" width="12" height="12" fill="none" :stroke="slot.ink" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <path :d="slot.d" />
                </svg>
              </div>
            </div>
          </button>
          <p class="folder-title folder-title--mini">{{ title }}</p>
        </div>

        <div v-else key="panel" class="folder-panel" role="group" :aria-label="`${title} folder, expanded`" :style="motionStyle">
          <button ref="closeEl" type="button" class="folder-close" :aria-label="`Close ${title} folder`" @click="requestClose(true)">
            <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
              <path d="M6.5 6.5l11 11M17.5 6.5l-11 11" />
            </svg>
          </button>
          <p class="folder-title folder-title--open">{{ title }}</p>
          <div class="folder-grid folder-grid--open">
            <button
              v-for="(slot, i) in mainSlots"
              :key="i"
              type="button"
              class="folder-icon folder-icon--open"
              :class="{ 'folder-icon--empty': !slot }"
              :disabled="!slot"
              :tabindex="slot ? 0 : -1"
              :aria-hidden="!slot"
              :aria-label="slot ? `Open ${slot.name}` : undefined"
              :style="slot ? { background: slot.fill } : undefined"
              @click="slot && handleLaunch(slot.name)"
            >
              <svg v-if="slot" viewBox="0 0 24 24" width="26" height="26" fill="none" :stroke="slot.ink" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path :d="slot.d" />
              </svg>
            </button>
          </div>

          <Transition name="extra-fade">
            <div v-if="landed && extraSlots.length" class="folder-extra">
              <button v-for="slot in extraSlots" :key="slot.name" type="button" class="folder-icon folder-icon--extra" :style="{ background: slot.fill }" :aria-label="`Open ${slot.name}`" @click="handleLaunch(slot.name)">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" :stroke="slot.ink" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <path :d="slot.d" />
                </svg>
              </button>
            </div>
          </Transition>

          <Transition name="extra-fade">
            <p v-if="launchedText" class="folder-launched" aria-live="polite">{{ launchedText }}</p>
          </Transition>
        </div>
      </Transition>
    </div>
  </div>
</template>

<style scoped>
.folder-stage {
  position: relative;
  width: 100%;
  max-width: 320px;
  min-height: 300px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.folder-backdrop {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  background: rgba(5, 7, 10, 0.6);
}
.folder-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.folder-tile-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -50%) scale(1);
}
.folder-tile,
.folder-panel {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
}
.folder-tile {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  cursor: pointer;
  outline: none;
  padding: 0;
}
.folder-tile:focus-visible,
.folder-close:focus-visible,
.folder-icon--open:focus-visible {
  box-shadow: 0 0 0 2px #0b0d10, 0 0 0 4px var(--fx-ring);
}
.folder-title--mini {
  margin: 10px 0 0;
  max-width: 130px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.folder-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 276px;
  border-radius: 32px;
  padding: 30px;
  transform: translate(-50%, -50%) scale(1);
}
.folder-title--open {
  margin: 0 28px 16px 0;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
}
.folder-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  display: grid;
  place-items: center;
  cursor: pointer;
  outline: none;
  transition: color 0.15s, border-color 0.15s;
}
.folder-close:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.folder-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.folder-grid--mini {
  gap: 5px;
}
.folder-grid--open {
  gap: 18px;
}
.folder-icon {
  display: grid;
  place-items: center;
  border: none;
  padding: 0;
}
.folder-icon--mini {
  width: 22px;
  height: 22px;
  border-radius: 7px;
}
.folder-icon--open {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  cursor: pointer;
  outline: none;
}
.folder-icon--empty {
  background: transparent !important;
  border: 1px dashed rgba(255, 255, 255, 0.1);
}
.folder-icon--extra {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  cursor: pointer;
  outline: none;
}
.folder-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.folder-launched {
  margin: 12px 0 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.22s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.folder-enter-active,
.folder-leave-active {
  transition-property: opacity, transform;
}
.folder-enter-from,
.folder-leave-to {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.42);
}

.extra-fade-enter-active,
.extra-fade-leave-active {
  transition: opacity 0.2s, transform 0.2s;
}
.extra-fade-enter-from,
.extra-fade-leave-to {
  opacity: 0;
  transform: translateY(6px);
}

@media (prefers-reduced-motion: reduce) {
  .folder-enter-active,
  .folder-leave-active {
    transition-duration: 0.12s !important;
  }
}
</style>

Nearby