@growgroup/visual-editor 0.1.5 → 0.2.0

package/src/editor/components/ppt/PptNotes.tsx

@@ -11,7 +11,8 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { ChevronDown, ChevronUp, Loader2, Sparkles, StickyNote } from 'lucide-react';
 import { PPT_PALETTES, type PptTheme } from './PptChrome';
-import { readApiJson } from '../../utils/api-json';
+import { io } from '../../../io';
+const notesApi = async <T,>(path: string, init?: RequestInit) => io().apiFetch!(path, init) as Promise<T>;
 
 type Segment = { page: number; text?: string; note?: string };
 
@@ -28,8 +29,7 @@ export function PptNotes({ page, theme }: { page: number; theme: PptTheme }) {
   // 原稿ファイルを読み込む(1回)
   useEffect(() => {
     let alive = true;
-    fetch('/__presenter-script')
-      .then((r) => r.json())
+    notesApi<{ segments?: Segment[] }>('/__presenter-script')
       .then((data) => {
         if (!alive) return;
         const map = new Map<number, Segment>();
@@ -48,7 +48,7 @@ export function PptNotes({ page, theme }: { page: number; theme: PptTheme }) {
     if (!d) return;
     dirtyRef.current = null;
     try {
-      await fetch('/__presenter-script/segment', {
+      await notesApi('/__presenter-script/segment', {
         method: 'POST',
         body: JSON.stringify(d),
       });
@@ -93,7 +93,7 @@ export function PptNotes({ page, theme }: { page: number; theme: PptTheme }) {
   /** 生成完了後にファイルを読み直し、表示中ページの原稿を差し替える */
   const reloadSegments = useCallback(async () => {
     try {
-      const data = await (await fetch('/__presenter-script')).json();
+      const data = await notesApi<{ segments?: Segment[] }>('/__presenter-script');
       const map = new Map<number, Segment>();
       for (const seg of data.segments ?? []) map.set(seg.page, seg);
       setSegments(map);
@@ -113,15 +113,13 @@ export function PptNotes({ page, theme }: { page: number; theme: PptTheme }) {
       setGenState({ running: true, message: '開始中…' });
       setOpen(true);
       try {
-        const res = await fetch('/__script-gen', { method: 'POST', body: JSON.stringify(payload) });
-        const { jobId, error } = await readApiJson<{ jobId?: string; error?: string }>(res);
+        const data = await notesApi<{ jobId?: string; error?: string }>('/__script-gen', { method: 'POST', body: JSON.stringify(payload) });
+        const { jobId, error } = data;
         if (!jobId) throw new Error(error || '開始できませんでした');
         // 完了までポーリング(生成は1バッチ30秒〜)
         for (;;) {
           await new Promise((r) => setTimeout(r, 1500));
-          const st = await readApiJson<{ state: string; message?: string; error?: string }>(
-            await fetch(`/__script-gen/status/${jobId}`),
-          );
+          const st = await notesApi<{ state: string; message?: string; error?: string }>(`/__script-gen/status/${jobId}`);
           setGenState({ running: st.state === 'running', message: st.message ?? '' });
           if (st.state === 'done') {
             await reloadSegments();
@@ -139,9 +137,9 @@ export function PptNotes({ page, theme }: { page: number; theme: PptTheme }) {
   return (
     <div className="shrink-0 border-t" style={{ borderColor: pal.border, backgroundColor: pal.rail }}>
       {/* 折りたたみバー(実機の「ノートを入力」) */}
-      <div className="flex h-6 w-full items-center gap-1.5 px-3 text-[11px]">
+      <div className="flex h-9 w-full items-center gap-1.5 px-3 text-[11px]">
         <button
-          onClick={() => setOpen((v) => !v)}
+          aria-expanded={open} aria-label="発表者ノートを開閉" onClick={() => setOpen((v) => !v)}
           className="flex min-w-0 flex-1 items-center gap-1.5 text-left"
           style={{ color: hasContent ? pal.text : pal.sub }}
           title="トークスクリプト(発表者コンソールの原稿)を編集"
@@ -151,8 +149,8 @@ export function PptNotes({ page, theme }: { page: number; theme: PptTheme }) {
             {genState.message
               ? genState.message
               : hasContent
-                ? 'ノートあり — トークスクリプトを編集'
-                : 'ノートを入力(トークスクリプト)'}
+                ? '発表者ノートを編集'
+                : '発表者ノートを追加'}
           </span>
         </button>
         {/* AI生成: このスライドだけ / 発表時間を決めて全スライド */}
@@ -218,7 +216,7 @@ export function PptNotes({ page, theme }: { page: number; theme: PptTheme }) {
             </button>
           </span>
         )}
-        <button onClick={() => setOpen((v) => !v)} className="shrink-0" style={{ color: pal.sub }}>
+        <button aria-expanded={open} aria-label="発表者ノートを開閉" onClick={() => setOpen((v) => !v)} className="shrink-0" style={{ color: pal.sub }}>
           {open ? <ChevronDown className="h-3 w-3" /> : <ChevronUp className="h-3 w-3" />}
         </button>
       </div>
@@ -226,6 +224,7 @@ export function PptNotes({ page, theme }: { page: number; theme: PptTheme }) {
       {open && (
         <div className="flex gap-2 px-3 pb-2">
           <textarea
+            aria-label="発表する内容"
             value={text}
             onChange={(e) => { setText(e.target.value); queueSave(e.target.value, note); }}
             placeholder={`スライド ${page} で話すこと…(発表者コンソールにそのまま出ます)`}
@@ -233,6 +232,7 @@ export function PptNotes({ page, theme }: { page: number; theme: PptTheme }) {
             style={{ backgroundColor: pal.control, borderColor: pal.border, color: pal.text }}
           />
           <textarea
+            aria-label="段取りメモ"
             value={note}
             onChange={(e) => { setNote(e.target.value); queueSave(text, e.target.value); }}
             placeholder="段取りメモ(任意)…"

package/src/editor/components/shell/CanvasAppearance.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useEditorContext } from '../../EditorContext';
+import type { PptTheme } from '../ppt/PptChrome';
+
+/** 紙面のHTMLにはスタイルを追加せず、保存対象外のキャンバスの器だけを配色する。 */
+export function CanvasAppearance({ theme }: { theme: PptTheme }) {
+  const { iframeReady, getIframeDoc } = useEditorContext();
+  useEffect(() => {
+    const doc = getIframeDoc();
+    if (!doc) return;
+    const color = theme === 'dark' ? '#191d24' : '#eef1f5';
+    doc.body.style.backgroundColor = color;
+    const container = doc.getElementById('canvas-container');
+    if (container) container.style.backgroundColor = color;
+  }, [theme, iframeReady, getIframeDoc]);
+  return null;
+}

package/src/editor/components/shell/ConfirmDialog.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from '../../../components/ui/alert-dialog';
+
+export function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel = '削除する', onConfirm }: {
+  open: boolean; onOpenChange: (open: boolean) => void; title: string; description: string;
+  confirmLabel?: string; onConfirm: () => void;
+}) {
+  return <AlertDialog open={open} onOpenChange={onOpenChange}>
+    <AlertDialogContent>
+      <AlertDialogHeader><AlertDialogTitle>{title}</AlertDialogTitle><AlertDialogDescription>{description}</AlertDialogDescription></AlertDialogHeader>
+      <AlertDialogFooter><AlertDialogCancel>キャンセル</AlertDialogCancel><AlertDialogAction onClick={onConfirm}>{confirmLabel}</AlertDialogAction></AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>;
+}

package/src/editor/components/shell/EditorTopBar.tsx

@@ -14,6 +14,7 @@
  * leftExtra / rightExtra / menuExtra のスロットで受け取り、この並びを崩さない。
  */
 
+import { toast } from 'sonner';
 import { useState } from 'react';
 import {
   DropdownMenu,
@@ -21,7 +22,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '../../../components/ui/dropdown-menu';
-import { ArrowLeft, ChevronDown, Download, FileText, Loader2, PenTool, Play, Save, X } from 'lucide-react';
+import { AlertCircle, CheckCircle2, Clock3, ArrowLeft, ChevronDown, Download, FileText, Loader2, PenTool, Play, Save, X } from 'lucide-react';
 import { useEditorContext } from '../../EditorContext';
 import { getCleanHtml } from '../../utils/html-utils';
 import { startExport, waitForExport, downloadExport, type ExportFormat } from '../../../lib/export';
@@ -46,20 +47,15 @@ export type TopBarPalette = {
 
 /** Figma風の配色(editor-skin.css のパネル色に合わせる) */
 const FIGMA_PALETTE: TopBarPalette = {
-  chrome: '#2c2c2c',
-  text: '#ffffff',
-  sub: '#9ca3af',
-  border: '#444444',
-  hover: '#444444',
-  activeBg: '#3a3a3a',
-  control: '#1e1e1e',
-  disabled: '#5f5f5f',
+  chrome: 'var(--ed-panel)', text: 'var(--ed-text)', sub: 'var(--ed-muted)',
+  border: 'var(--ed-line)', hover: 'var(--ed-surface-hover)', activeBg: 'var(--ed-accent-soft)',
+  control: 'var(--ed-panel-raised)', disabled: 'var(--ed-muted)',
 };
 
 /** 共有ボタンの色だけはUIの「顔」なのでテーマごとに持つ */
 const SHARE_COLOR = {
-  figma: { bg: '#0d99ff', fg: '#ffffff' },
-  ppt: { bg: '#E8912D', fg: '#33230a' },
+  figma: { bg: 'var(--ed-accent-strong)', fg: '#ffffff' },
+  ppt: { bg: 'var(--ed-accent-strong)', fg: '#ffffff' },
 } as const;
 
 export interface EditorTopBarProps {
@@ -143,14 +139,14 @@ export function EditorTopBar({
       const st = await waitForExport(jobId, () => undefined);
       downloadExport(st);
     } catch (e) {
-      window.alert(`書き出しに失敗しました: ${String(e).slice(0, 120)}`);
+      toast.error("書き出しに失敗しました", { description: String(e).slice(0, 120) });
     } finally {
       setExporting(null);
     }
   };
 
-  const iconBtn = 'flex h-7 w-7 shrink-0 items-center justify-center rounded transition-colors disabled:opacity-40';
-  const textBtn = 'flex h-7 shrink-0 items-center gap-1.5 rounded-md border px-2.5 text-[11px] font-medium transition-colors';
+  const iconBtn = 'ed-icon-button';
+  const textBtn = 'ed-button';
   const hoverIn = (e: React.MouseEvent<HTMLElement>) => {
     if (!(e.currentTarget as HTMLButtonElement).disabled) e.currentTarget.style.backgroundColor = pal.hover;
   };
@@ -185,8 +181,8 @@ export function EditorTopBar({
           onClick={onSwitchUi}
           title={
             variant === 'ppt'
-              ? 'Figma風UIに切り替え(編集エンジンは共通)'
-              : 'PowerPoint風UIに切り替え(編集エンジンは共通)'
+              ? 'パネル表示に切り替え'
+              : 'リボン表示に切り替え'
           }
           className={textBtn}
           style={{ borderColor: pal.border, color: pal.sub }}
@@ -200,13 +196,13 @@ export function EditorTopBar({
               P
             </span>
           )}
-          {variant === 'ppt' ? 'Figma風' : 'PPT風'}
+          {variant === 'ppt' ? 'パネル表示' : 'リボン表示'}
         </button>
       )}
       {leftExtra}
 
       {/* 中央: デッキタイトル + スライド番号 */}
-      <div className="flex min-w-0 flex-1 items-center justify-center gap-2">
+      <div className="flex min-w-0 flex-1 items-center gap-2">
         {pageNumber != null && (
           <span className="shrink-0 font-mono text-[11px] tabular-nums" style={{ color: pal.sub }}>
             {String(pageNumber).padStart(3, '0')}
@@ -224,14 +220,15 @@ export function EditorTopBar({
         <button
           data-topbar="save"
           onClick={() => void handleSave()}
-          disabled={saving || !hasChanges}
-          title={saving ? '保存中…' : hasChanges ? '今すぐ保存' : '保存済みです(変更があると自動でも保存されます)'}
-          className={iconBtn}
-          style={{ color: saving || !hasChanges ? pal.disabled : pal.text }}
+          disabled={saving}
+          title={saving ? '保存中…' : '今すぐ保存（⌘S / Ctrl+S）'}
+          aria-label="保存"
+          className="ed-button"
           onMouseEnter={hoverIn}
           onMouseLeave={hoverOut}
         >
           <Save className="h-4 w-4" />
+          保存
         </button>
         {/* 書き出しは利用側の処理が要る。渡されていなければ出さない
             （押すと失敗するボタンを残さないため） */}
@@ -257,7 +254,7 @@ export function EditorTopBar({
                 style={{ backgroundColor: share.bg, color: share.fg }}
               >
                 {exporting && <Loader2 className="h-3 w-3 animate-spin" />}
-                {exporting ? `${exporting}を書き出し中…` : '共有'}
+                {exporting ? `${exporting}を書き出し中…` : '書き出し'}
                 <ChevronDown className="h-3 w-3" />
               </button>
             </DropdownMenuTrigger>
@@ -313,7 +310,7 @@ export function EditorTopBar({
           <button
             data-topbar="close"
             onClick={onClose}
-            title="エディタを閉じて一覧へ戻る"
+            title="エディタを閉じる" aria-label="エディタを閉じる"
             className={iconBtn}
             style={{ color: pal.sub }}
             onMouseEnter={hoverIn}
@@ -340,53 +337,17 @@ function SaveStatusPill({
   status: EditorSaveStatus;
   pal: TopBarPalette;
 }) {
-  const note = {
-    saved: '保存済み',
-    dirty: '保存待ち',
-    saving: '保存中…',
-    error: '保存できません',
-  }[status];
-
-  if (variant === 'ppt') {
-    // PowerPoint実機の「自動保存」ピル(トグルは無く、ノブが進み具合を示す)
-    const on = status !== 'error';
-    return (
-      <span
-        data-topbar="save-status"
-        data-save-status={status}
-        className="flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[11px]"
-        style={{ backgroundColor: pal.hover, color: status === 'error' ? '#ff6b6b' : pal.sub }}
-        title={`自動保存: ${note}(編集の手が止まると保存します)`}
-      >
-        自動保存
-        <span
-          className="relative inline-block h-3 w-6 rounded-full"
-          style={{ backgroundColor: on ? '#C43E1C' : '#8a3a3a' }}
-        >
-          <span
-            className={`absolute right-0.5 top-0.5 h-2 w-2 rounded-full bg-white ${status === 'saving' ? 'animate-pulse' : ''}`}
-          />
-        </span>
-        {note}
-      </span>
-    );
-  }
-
   const view = {
-    saved: { dot: 'bg-emerald-400', box: 'bg-emerald-400/10 text-emerald-300 ring-emerald-400/25', title: '自動保存済みです' },
-    dirty: { dot: 'bg-amber-400', box: 'bg-amber-400/15 text-amber-300 ring-amber-400/30', title: '変更が止まると自動で保存されます' },
-    saving: { dot: 'bg-sky-400 animate-pulse', box: 'bg-sky-400/15 text-sky-300 ring-sky-400/30', title: '保存しています' },
-    error: { dot: 'bg-rose-400', box: 'bg-rose-500/15 text-rose-300 ring-rose-400/30', title: '自動保存に失敗しました。保存ボタンで再試行してください' },
+    saved: { label: '保存済み', Icon: CheckCircle2 },
+    dirty: { label: '未保存・自動保存待ち', Icon: Clock3 },
+    saving: { label: '保存中…', Icon: Loader2 },
+    error: { label: '保存失敗・再試行してください', Icon: AlertCircle },
   }[status];
   return (
-    <span
-      data-topbar="save-status"
-      data-save-status={status}
-      title={view.title}
-      className={`inline-flex shrink-0 items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-semibold tracking-wide ring-1 ring-inset ${view.box}`}
-    >
-      <span className={`h-1.5 w-1.5 rounded-full ${view.dot}`} />
-      {status === 'dirty' ? '未保存' : note}
+    <span data-topbar="save-status" data-save-status={status} role="status" aria-live="polite"
+      className="ed-save-status" title="編集が止まると自動保存します。保存ボタンからも保存できます。">
+      <view.Icon aria-hidden="true" className={`h-4 w-4 ${status === 'saving' ? 'animate-spin' : ''}`} />
+      {view.label}
     </span>
   );
 }

package/src/editor/components/shell/LeftPanel.tsx

@@ -1,111 +1,37 @@
-"use client";
-
-/**
- * Figma風UIの左パネル。
- *
- * 既定は2段構成:
- *   上: ページ切替(PagesPanel。スライドのプレビュー付き)
- *   下: 現在ページのレイヤーツリー(EditorLayerPanel hideSlideList)
- *
- * `pagesSlot` を渡すと、その中身と レイヤーツリー をタブで出し分ける。
- * ページ一覧を利用側が持つ場合(Webページ・ページ数が固定のサイト等)に、
- * 左端へ独自パネルをもう1枚並べずに済ませるための口。左に2枚パネルが並ぶと
- * 「左=1枚 / 中央=キャンバス / 右=プロパティ」というFigmaの骨格が崩れる。
- *
- * 幅はこのラッパーが1本のハンドルで持つ。段ごとに幅・ハンドルを持たせると
- * 上下で幅が食い違ったり、リサイズが二重になったりするため。
- */
+'use client';
 
 import { useState, type ReactNode } from 'react';
+import { Layers, Files } from 'lucide-react';
 import { useEditorContext } from '../../EditorContext';
 import { useResizablePanel } from '../../hooks/useResizablePanel';
 import { EditorLayerPanel } from '../EditorLayerPanel';
 import { PagesPanel } from './PagesPanel';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../../components/ui/tabs';
 import { can } from '../../../io';
 
-type LeftTab = 'pages' | 'layers';
-
 export function LeftPanel({ page, pagesSlot }: { page: number; pagesSlot?: ReactNode }) {
-  // 一覧のサムネイルは利用側が描く(io.renderContent)。描けないなら段ごと出さない。
-  // Webページの用途ではページ切替を利用側のUIが持つことが多い
   const { editorMode } = useEditorContext();
-  const showPages = can('renderContent') && editorMode !== 'webpage';
+  const showPages = !!pagesSlot || (can('renderContent') && editorMode !== 'webpage');
   const { width, isDragging, resizeHandleProps } = useResizablePanel({
-    initialWidth: 256,
-    minWidth: 180,
-    maxWidth: 480,
-    direction: 'right',
-    storageKey: 'gg-editor:left-panel-width',
+    initialWidth: 264, minWidth: 224, maxWidth: 440, direction: 'right', storageKey: 'gg-editor:left-panel-width',
   });
-
-  /**
-   * 既定は「ページ」。レイヤーは要素を触りはじめてから使うもので、
-   * 開いた直後に知りたいのは「どのページを見ているか」のため
-   */
-  const [tab, setTab] = useState<LeftTab>('pages');
-
+  const [tab, setTab] = useState(showPages ? 'pages' : 'layers');
   return (
-    <div
-      className="relative flex shrink-0 flex-col overflow-hidden border-r border-[#444444] bg-[#2c2c2c]"
-      style={{ width: `${width}px` }}
-    >
-      {pagesSlot ? (
-        <>
-          <div
-            role="tablist"
-            aria-label="左パネル"
-            className="flex shrink-0 items-stretch gap-1 border-b border-[#444444] px-1"
-          >
-            {([
-              ['pages', 'ページ'],
-              ['layers', 'レイヤー'],
-            ] as const).map(([key, label]) => {
-              const active = tab === key;
-              return (
-                <button
-                  key={key}
-                  type="button"
-                  role="tab"
-                  aria-selected={active}
-                  data-left-tab={key}
-                  onClick={() => setTab(key)}
-                  className={`relative flex-1 px-2 py-2 text-[11px] font-medium transition-colors ${
-                    active ? 'text-white' : 'text-gray-400 hover:text-gray-200'
-                  }`}
-                >
-                  {label}
-                  {active && (
-                    <span className="absolute inset-x-2 bottom-0 h-0.5 rounded-full bg-[#0d99ff]" />
-                  )}
-                </button>
-              );
-            })}
-          </div>
-
-          {/*
-            両方をマウントしたまま出し分ける。片方を外すと、戻ったときに
-            スクロール位置・検索語・展開状態が毎回初期化される
-          */}
-          <div className={`min-h-0 flex-1 flex-col ${tab === 'pages' ? 'flex' : 'hidden'}`}>
-            {pagesSlot}
-          </div>
-          <div className={`min-h-0 flex-1 ${tab === 'layers' ? 'flex' : 'hidden'}`}>
-            <EditorLayerPanel hideSlideList />
-          </div>
-        </>
-      ) : (
-        <>
-          {showPages && <PagesPanel page={page} />}
-          {/* 残りの高さいっぱいにレイヤーツリー(自前でスクロールする) */}
-          <div className="flex min-h-0 flex-1">
-            <EditorLayerPanel hideSlideList />
-          </div>
-        </>
-      )}
-
-      {/* リサイズハンドル(全高。上下どちらの段からでも掴める) */}
+    <aside data-left-panel aria-label="ページとレイヤー" className="relative flex shrink-0 flex-col overflow-hidden border-r border-[#444444] bg-[#2c2c2c]" style={{ width }}>
+      {showPages ? (
+        <Tabs value={tab} onValueChange={setTab} className="flex min-h-0 flex-1 flex-col">
+          <TabsList className="ed-panel-tabs" aria-label="左パネル">
+            <TabsTrigger value="pages" data-left-tab="pages"><Files className="mr-2 h-4 w-4" />ページ</TabsTrigger>
+            <TabsTrigger value="layers" data-left-tab="layers"><Layers className="mr-2 h-4 w-4" />レイヤー</TabsTrigger>
+          </TabsList>
+          <TabsContent value="pages" forceMount className="ed-panel-tab-content">
+            {pagesSlot || <PagesPanel page={page} height="100%" />}
+          </TabsContent>
+          <TabsContent value="layers" forceMount className="ed-panel-tab-content"><EditorLayerPanel hideSlideList /></TabsContent>
+        </Tabs>
+      ) : <><div className="ed-panel-heading"><Layers className="h-4 w-4" />レイヤー</div><EditorLayerPanel hideSlideList /></>}
       <div {...resizeHandleProps} />
       {isDragging && <div className="fixed inset-0 z-50 cursor-col-resize" />}
-    </div>
+    </aside>
   );
 }

package/src/editor/components/shell/PagesPanel.tsx

@@ -82,13 +82,14 @@ export function PagesPanel({ page, height = '33vh' }: { page: number; height?: s
             key={s.id}
             ref={current ? currentRef : undefined}
             data-page-thumb={n}
+            aria-current={current ? "page" : undefined}
             onClick={() => void goto(n)}
             className="flex w-full shrink-0 items-start gap-1.5 px-2 py-1 text-left"
             title={s.title ? `${n}. ${s.title}` : `${n}枚目`}
           >
             <span
               className="mt-0.5 w-4 shrink-0 text-right text-[10px] tabular-nums"
-              style={{ color: current ? '#4fb8ff' : '#6b7280', fontWeight: current ? 700 : 400 }}
+              style={{ color: current ? 'var(--ed-accent)' : 'var(--ed-muted)', fontWeight: current ? 700 : 400 }}
             >
               {n}
             </span>
@@ -103,13 +104,14 @@ export function PagesPanel({ page, height = '33vh' }: { page: number; height?: s
             >
               {thumbWidth > 0 && (
                 <span
-                  className="pointer-events-none absolute left-0 top-0 origin-top-left"
+                  data-editor-preview className="pointer-events-none absolute left-0 top-0 origin-top-left"
                   style={{ width: 1920, height: 1080, transform: `scale(${thumbWidth / 1920})` }}
                 >
                   <MemoSlideRender page={n} template={s.template} edited={s.edited} />
                 </span>
               )}
             </span>
+            <span className="min-w-0 flex-1 self-center text-xs leading-relaxed">{s.title || "無題"}</span>
           </button>
         );
       })}

package/src/editor/contexts/EditorAppearanceContext.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { createContext, useContext, useEffect, useState } from 'react';
+import type { PptTheme } from '../components/ppt/PptChrome';
+
+const THEME_KEY = 'gg-editor:ppt-theme';
+export const EditorAppearanceContext = createContext<PptTheme | undefined>(undefined);
+
+export function initialEditorTheme(): PptTheme {
+  try {
+    const saved = localStorage.getItem(THEME_KEY);
+    if (saved === 'light' || saved === 'dark') return saved;
+  } catch { /* ストレージが使えなくてもOS設定で開く */ }
+  return typeof matchMedia !== 'undefined' && matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+export function useEditorTheme() {
+  const [theme, setTheme] = useState<PptTheme>(initialEditorTheme);
+  useEffect(() => {
+    const query = matchMedia('(prefers-color-scheme: dark)');
+    const update = () => setTheme(initialEditorTheme());
+    query.addEventListener('change', update);
+    window.addEventListener('storage', update);
+    return () => {
+      query.removeEventListener('change', update);
+      window.removeEventListener('storage', update);
+    };
+  }, []);
+  const toggleTheme = () => {
+    const next = theme === 'dark' ? 'light' : 'dark';
+    try { localStorage.setItem(THEME_KEY, next); } catch { /* 今回の表示には適用する */ }
+    setTheme(next);
+  };
+  return { theme, toggleTheme };
+}
+
+/** PortalはDOM上の親から継承できないためReactの文脈から同じスキンを付ける。 */
+export function useEditorAppearance() {
+  const theme = useContext(EditorAppearanceContext);
+  return {
+    className: theme ? 'gg-editor-skin gg-editor-ui' : undefined,
+    'data-editor-theme': theme,
+  };
+}