<!-- SPEC: PJ2026-010405 云端控制台. -->
<!-- Implementation reference: draft-2026-07-13-p0-cloud-console. -->
<!-- Responsibility: 提供无嵌套卡片的事实检查器容器。 -->

<script setup lang="ts">
import { X } from "lucide-vue-next";
withDefaults(defineProps<{ title: string; subtitle?: string; embedded?: boolean }>(), {
  subtitle: "",
  embedded: false,
});
defineEmits<{ close: [] }>();
</script>

<template>
  <section class="operations-inspector-panel" :data-embedded="embedded ? 'true' : 'false'">
    <header v-if="!embedded" class="operations-inspector-header">
      <div>
        <h2>{{ title }}</h2>
        <p v-if="subtitle">{{ subtitle }}</p>
      </div>
      <button
        class="icon-button"
        type="button"
        title="关闭详情"
        aria-label="关闭详情"
        @click="$emit('close')"
      >
        <X :size="16" aria-hidden="true" />
      </button>
    </header>
    <nav
      v-if="$slots.tabs"
      class="operations-inspector-tabs"
      role="tablist"
      aria-label="详情视图"
    >
      <slot name="tabs" />
    </nav>
    <div class="operations-inspector-body"><slot /></div>
    <footer v-if="$slots.footer" class="operations-inspector-footer">
      <slot name="footer" />
    </footer>
  </section>
</template>
