sekkei-preview 0.1.0

package/theme/components/MilkdownWrapper.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import MilkdownEditor from './MilkdownEditor.vue'
+import { useFileApi } from '../composables/use-file-api'
+
+const props = defineProps<{
+  filePath: string
+}>()
+
+const emit = defineEmits<{
+  change: []
+}>()
+
+const content = ref('')
+const loading = ref(true)
+const error = ref('')
+const editorRef = ref<InstanceType<typeof MilkdownEditor> | null>(null)
+const currentMarkdown = ref('')
+
+const { read, save } = useFileApi()
+
+onMounted(async () => {
+  try {
+    const result = await read(props.filePath)
+    content.value = result.content
+    currentMarkdown.value = result.content
+  } catch (err) {
+    error.value = (err as Error).message
+  } finally {
+    loading.value = false
+  }
+})
+
+function onEditorChange(markdown: string) {
+  currentMarkdown.value = markdown
+  emit('change')
+}
+
+async function saveContent(): Promise<void> {
+  const markdown = editorRef.value?.getMarkdown() ?? currentMarkdown.value
+  await save(props.filePath, markdown)
+}
+
+function getMarkdown(): string {
+  return editorRef.value?.getMarkdown() ?? currentMarkdown.value
+}
+
+defineExpose({ save: saveContent, getMarkdown })
+</script>
+
+<template>
+  <div class="sekkei-editor-wrapper">
+    <div v-if="loading" class="editor-loading">
+      <span>Loading editor...</span>
+    </div>
+    <div v-else-if="error" class="editor-error">
+      <span>Failed to load: {{ error }}</span>
+    </div>
+    <ClientOnly v-else>
+      <template #fallback>
+        <div class="editor-loading">Loading editor...</div>
+      </template>
+      <MilkdownEditor
+        ref="editorRef"
+        :initial-value="content"
+        @change="onEditorChange"
+      />
+    </ClientOnly>
+  </div>
+</template>
+
+<style scoped>
+.sekkei-editor-wrapper {
+  min-height: 400px;
+  background: var(--vp-c-bg, #fff);
+  border: 1px solid var(--vp-c-divider, #e2e8f0);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.editor-loading,
+.editor-error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+  color: var(--vp-c-text-2, #666);
+  font-size: 0.9rem;
+}
+
+.editor-error {
+  color: var(--vp-c-danger-1, #e53e3e);
+}
+</style>

package/theme/composables/use-edit-mode.ts

@@ -0,0 +1,55 @@
+import { ref, computed, provide, inject, type Ref, type InjectionKey } from 'vue'
+
+export type EditState = 'view' | 'loading' | 'editing' | 'saving'
+
+interface EditModeContext {
+  state: Ref<EditState>
+  isDirty: Ref<boolean>
+  isEditing: Ref<boolean>
+  startEdit: () => void
+  cancelEdit: () => void
+  setSaving: () => void
+  setView: () => void
+  setEditing: () => void
+  markDirty: () => void
+  clearDirty: () => void
+}
+
+const EDIT_MODE_KEY: InjectionKey<EditModeContext> = Symbol('sekkei-edit-mode')
+
+/**
+ * Provide edit mode state in Layout component.
+ */
+export function provideEditMode(): EditModeContext {
+  const state = ref<EditState>('view')
+  const isDirty = ref(false)
+
+  const isEditing = computed(() =>
+    state.value === 'editing' || state.value === 'loading' || state.value === 'saving'
+  )
+
+  const ctx: EditModeContext = {
+    state,
+    isDirty,
+    isEditing,
+    startEdit: () => { state.value = 'loading' },
+    cancelEdit: () => { state.value = 'view'; isDirty.value = false },
+    setSaving: () => { state.value = 'saving' },
+    setView: () => { state.value = 'view'; isDirty.value = false },
+    setEditing: () => { state.value = 'editing' },
+    markDirty: () => { isDirty.value = true },
+    clearDirty: () => { isDirty.value = false },
+  }
+
+  provide(EDIT_MODE_KEY, ctx)
+  return ctx
+}
+
+/**
+ * Inject edit mode state in child components.
+ */
+export function useEditMode(): EditModeContext {
+  const ctx = inject(EDIT_MODE_KEY)
+  if (!ctx) throw new Error('useEditMode() called outside of provideEditMode()')
+  return ctx
+}

package/theme/composables/use-file-api.ts

@@ -0,0 +1,46 @@
+interface ReadResult {
+  content: string
+  frontmatter: string
+  path: string
+}
+
+interface ListResult {
+  files: Array<{ path: string; title: string }>
+}
+
+/**
+ * Composable for interacting with the sekkei file API endpoints.
+ */
+export function useFileApi() {
+  async function read(path: string): Promise<ReadResult> {
+    const res = await fetch(`/__api/read?path=${encodeURIComponent(path)}`)
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ error: `HTTP ${res.status}` }))
+      throw new Error(err.error ?? `Failed to read: ${res.status}`)
+    }
+    return res.json()
+  }
+
+  async function save(path: string, content: string): Promise<void> {
+    const res = await fetch('/__api/save', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ path, content }),
+    })
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ error: `HTTP ${res.status}` }))
+      throw new Error(err.error ?? `Failed to save: ${res.status}`)
+    }
+  }
+
+  async function list(): Promise<ListResult> {
+    const res = await fetch('/__api/list')
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ error: `HTTP ${res.status}` }))
+      throw new Error(err.error ?? `Failed to list: ${res.status}`)
+    }
+    return res.json()
+  }
+
+  return { read, save, list }
+}

package/theme/index.ts

@@ -0,0 +1,16 @@
+import DefaultTheme from 'vitepress/theme'
+import type { Theme } from 'vitepress'
+import Layout from './components/Layout.vue'
+import MilkdownWrapper from './components/MilkdownWrapper.vue'
+import './styles/custom.css'
+import './styles/editor.css'
+
+const theme: Theme = {
+  extends: DefaultTheme,
+  Layout,
+  enhanceApp({ app }) {
+    app.component('MilkdownWrapper', MilkdownWrapper)
+  },
+}
+
+export default theme

package/theme/styles/custom.css

@@ -0,0 +1,85 @@
+/* Sekkei Docs — Japanese typography + spec table styling */
+
+:root {
+  --vp-font-family-base: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic',
+    'Meiryo', sans-serif;
+  --vp-font-family-mono: 'JetBrains Mono', 'Source Code Pro', 'Menlo', monospace;
+  --vp-layout-max-width: 1440px;
+}
+
+/* JP-friendly line height */
+.vp-doc {
+  line-height: 1.8;
+}
+
+.vp-doc p,
+.vp-doc li {
+  line-height: 1.8;
+}
+
+/* Spec tables — visible borders, comfortable padding */
+.vp-doc table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1rem 0;
+}
+
+.vp-doc th,
+.vp-doc td {
+  border: 1px solid var(--vp-c-divider);
+  padding: 0.6rem 0.8rem;
+  text-align: left;
+}
+
+.vp-doc th {
+  background-color: var(--vp-c-bg-soft);
+  font-weight: 600;
+}
+
+.vp-doc tr:hover td {
+  background-color: var(--vp-c-bg-soft);
+}
+
+/* Wider content area for tables */
+.VPDoc .content-container {
+  max-width: 960px;
+}
+
+@media (min-width: 1440px) {
+  .VPDoc .content-container {
+    max-width: 1100px;
+  }
+}
+
+/* Headings — slightly tighter for JP */
+.vp-doc h1 {
+  font-size: 1.8rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+
+.vp-doc h2 {
+  font-size: 1.4rem;
+  font-weight: 600;
+  border-top: 1px solid var(--vp-c-divider);
+  padding-top: 1.2rem;
+  margin-top: 2rem;
+}
+
+.vp-doc h3 {
+  font-size: 1.15rem;
+  font-weight: 600;
+}
+
+/* Code blocks */
+.vp-doc div[class*='language-'] {
+  margin: 1rem 0;
+  border-radius: 6px;
+}
+
+/* Frontmatter ID badges (REQ-xxx, F-xxx, etc.) */
+.vp-doc code {
+  font-size: 0.85em;
+  padding: 0.15em 0.35em;
+  border-radius: 4px;
+}

package/theme/styles/editor.css

@@ -0,0 +1,31 @@
+/* Editor mode styles */
+
+/* Smooth transition for editor mount */
+.sekkei-editor-container {
+  animation: sekkei-fade-in 0.2s ease-in;
+}
+
+@keyframes sekkei-fade-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* Ensure editor takes full width */
+.sekkei-editor-wrapper {
+  width: 100%;
+}
+
+/* Milkdown editor theme adjustments for VitePress */
+.sekkei-editor-wrapper .milkdown {
+  background: var(--vp-c-bg, #fff);
+  color: var(--vp-c-text-1);
+  font-family: var(--vp-font-family-base);
+  line-height: 1.8;
+}
+
+/* Editor focus indicator */
+.sekkei-editor-wrapper .milkdown:focus-within {
+  outline: 2px solid var(--vp-c-brand-1, #3451b2);
+  outline-offset: -2px;
+  border-radius: 8px;
+}