feat: Layer 프리미티브 (Drawer / Modal / ConfirmDialog / Tabs)

UX/UI 개편 Phase A-7. uiState와 결합한 layer/dialog 컴포넌트.

신규 컴포넌트 (lib/components/ui/)
- Drawer.svelte: 단일 slot drawer (id: 'sidebar' | 'meta').
  ui.isDrawerOpen(id)로 표시 여부 결정. 새 drawer 열면 이전 drawer 자동 close.
  side(left/right) + width(sidebar/rail). backdrop 클릭으로 close.
  z-drawer 사용. 8대 원칙 #2.

- Modal.svelte: stack 지원 modal (5대 원칙 #2 — confirm 위에 nested 가능).
  native <dialog> 대신 div 기반 — top-layer가 단일이라 <dialog>로는 stack 불가.
  z-index = z-modal + (stackIndex * 2): backdrop과 panel을 별개의 stacking
  context로 두기 위해 *2. 최상단 modal만 focus trap + 키보드 nav 활성,
  아래는 inert 처리. 수동 Tab/Shift+Tab cycling.
  closable + IconButton(X) 헤더, footer snippet 지원.

- ConfirmDialog.svelte: Modal 위 얇은 wrapper. 삭제/되돌릴 수 없는 작업에
  사용. tone(danger/primary), confirmLabel/cancelLabel, onconfirm 콜백.
  ui.openModal(id)로 호출.

- Tabs.svelte: ARIA tablist + tab + tabpanel.
  좌우 화살표 / Home / End 키 nav, \$props.id() 기반 SSR-safe ID.
  tabs: { id, label, disabled? }[], value \$bindable.
  children snippet은 (activeId) => UI 시그니처 — DocumentViewer 편집/미리보기
  토글 등 단일 컨테이너 레이아웃에 쓰기 좋게 설계.

이로써 Phase A 프리미티브 13종 완비:
  Button, IconButton, Card, Badge, Skeleton, EmptyState,
  TextInput, Textarea, Select,
  Drawer, Modal, ConfirmDialog, Tabs.

모든 컴포넌트는 Svelte 5 runes mode strict, @theme 토큰만 사용,
focus-visible ring 통일, slot은 {@render children?.()}로 작성.

svelte-check: 0 errors / 8 warnings (전부 기존 latent, 새 코드 무관)
build: 2.07s 무경고

남은 Phase A:
- A-8 토큰 swap (Sidebar/TagPill/UploadDropzone/PreviewPanel/DocumentCard/
  DocumentTable/+layout toast — baseline 421건 → 0건)
- A-9 __styleguide 라우트 (전체 시각 검증 + Modal stack 데모)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/lib/components/ui/Tabs.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+  // ARIA tablist + tab + tabpanel. 좌우 화살표 키 nav.
+  // children snippet은 (activeId: string) => UI 시그니처로 받는다.
+  // 사용처:
+  //   <Tabs tabs={[{id:'edit',label:'편집'},{id:'preview',label:'미리보기'}]} bind:value={mode}>
+  //     {#snippet children(activeId)}
+  //       {#if activeId === 'edit'}<EditPanel />{/if}
+  //       {#if activeId === 'preview'}<PreviewPanel />{/if}
+  //     {/snippet}
+  //   </Tabs>
+  import type { Snippet } from 'svelte';
+
+  export interface Tab {
+    id: string;
+    label: string;
+    disabled?: boolean;
+  }
+
+  interface Props {
+    tabs: Tab[];
+    value?: string;
+    children?: Snippet<[string]>;
+    class?: string;
+  }
+
+  let { tabs, value = $bindable(tabs[0]?.id ?? ''), children, class: className = '' }: Props = $props();
+
+  const autoId = $props.id();
+
+  function tabId(id: string) {
+    return `tab-${autoId}-${id}`;
+  }
+  function panelId(id: string) {
+    return `panel-${autoId}-${id}`;
+  }
+
+  function select(id: string) {
+    if (tabs.find((t) => t.id === id)?.disabled) return;
+    value = id;
+  }
+
+  function onKeydown(e: KeyboardEvent) {
+    const enabled = tabs.filter((t) => !t.disabled);
+    const idx = enabled.findIndex((t) => t.id === value);
+    if (idx === -1) return;
+    if (e.key === 'ArrowRight') {
+      e.preventDefault();
+      const next = enabled[(idx + 1) % enabled.length];
+      select(next.id);
+      document.getElementById(tabId(next.id))?.focus();
+    } else if (e.key === 'ArrowLeft') {
+      e.preventDefault();
+      const prev = enabled[(idx - 1 + enabled.length) % enabled.length];
+      select(prev.id);
+      document.getElementById(tabId(prev.id))?.focus();
+    } else if (e.key === 'Home') {
+      e.preventDefault();
+      const first = enabled[0];
+      select(first.id);
+      document.getElementById(tabId(first.id))?.focus();
+    } else if (e.key === 'End') {
+      e.preventDefault();
+      const last = enabled[enabled.length - 1];
+      select(last.id);
+      document.getElementById(tabId(last.id))?.focus();
+    }
+  }
+</script>
+
+<div class={className}>
+  <div
+    role="tablist"
+    tabindex="-1"
+    class="flex items-center gap-1 border-b border-default"
+    onkeydown={onKeydown}
+  >
+    {#each tabs as tab (tab.id)}
+      {@const active = tab.id === value}
+      <button
+        type="button"
+        role="tab"
+        id={tabId(tab.id)}
+        aria-selected={active}
+        aria-controls={panelId(tab.id)}
+        tabindex={active ? 0 : -1}
+        disabled={tab.disabled}
+        onclick={() => select(tab.id)}
+        class={[
+          'px-3 h-9 text-sm font-medium border-b-2 -mb-px transition-colors',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring rounded-t',
+          active
+            ? 'text-accent border-accent'
+            : 'text-dim border-transparent hover:text-text',
+          tab.disabled ? 'opacity-50 cursor-not-allowed' : '',
+        ].join(' ')}
+      >
+        {tab.label}
+      </button>
+    {/each}
+  </div>
+
+  <div
+    role="tabpanel"
+    id={panelId(value)}
+    aria-labelledby={tabId(value)}
+    tabindex="0"
+    class="focus-visible:outline-none"
+  >
+    {@render children?.(value)}
+  </div>
+</div>