popilot 0.6.0 → 0.8.0

package/scaffold/spec-site/src/pages/MockupListPage.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import Icon from '@/components/Icon.vue'
+import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { apiGet, apiPost, apiDelete } from '@/composables/useTurso'
+
+const router = useRouter()
+
+interface MockupPage {
+  id: number; slug: string; title: string; category: string
+  viewport: string; version: number; created_by: string; updated_at: string
+}
+
+const mockups = ref<MockupPage[]>([])
+const searchQuery = ref('')
+const filteredMockups = computed(() => {
+  if (!searchQuery.value) return mockups.value
+  const q = searchQuery.value.toLowerCase()
+  return mockups.value.filter(m => m.title.toLowerCase().includes(q) || m.category.toLowerCase().includes(q))
+})
+const loading = ref(true)
+
+async function deleteMockup(slug: string) {
+  if (!confirm('Are you sure you want to delete this?')) return
+  await apiDelete(`/api/v2/mockups/${slug}`)
+  await loadMockups()
+}
+const showCreate = ref(false)
+const newSlug = ref('')
+const newTitle = ref('')
+const newViewport = ref('desktop')
+
+async function loadMockups() {
+  loading.value = true
+  const { data } = await apiGet('/api/v2/mockups')
+  if (data?.mockups) mockups.value = data.mockups as MockupPage[]
+  loading.value = false
+}
+
+async function createMockup() {
+  if (!newSlug.value || !newTitle.value) return
+  const targetSlug = newSlug.value
+  await apiPost('/api/v2/mockups', { slug: targetSlug, title: newTitle.value, viewport: newViewport.value })
+  newSlug.value = ''; newTitle.value = ''; showCreate.value = false
+  router.push(`/mockup-editor/${targetSlug}`)
+}
+
+function formatDate(d: string) {
+  if (!d) return ''
+  const date = new Date(d.endsWith('Z') ? d : d + 'Z')
+  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+}
+
+onMounted(loadMockups)
+</script>
+
+<template>
+  <div class="mockup-list-page">
+    <div class="list-header">
+      <h1>Mockups</h1>
+      <button class="btn-new" @click="showCreate = !showCreate">{{ showCreate ? 'Cancel' : '+ New Mockup' }}</button>
+    </div>
+
+    <!-- Create form -->
+    <div v-if="showCreate" class="create-form">
+      <input v-model="newTitle" class="input" placeholder="Mockup title" />
+      <input v-model="newSlug" class="input" placeholder="Path (slug)" />
+      <select v-model="newViewport" class="input">
+        <option value="desktop">Desktop</option>
+        <option value="mobile">Mobile</option>
+      </select>
+      <button class="btn btn--primary" @click="createMockup" :disabled="!newSlug || !newTitle">Create</button>
+    </div>
+
+    <input v-if="mockups.length" v-model="searchQuery" class="search-input" placeholder="Search by title or category..." />
+
+    <div v-if="loading" class="loading">Loading...</div>
+    <div v-else-if="!mockups.length" class="empty">No mockups yet. Create a new mockup to get started.</div>
+
+    <div v-else class="mockup-grid">
+      <div v-for="m in filteredMockups" :key="m.id" class="mockup-card" @click="router.push(`/mockup-viewer/${m.slug}`)">
+        <div class="card-viewport">{{ m.viewport === 'mobile' ? '📱' : '<Icon name="monitor" :size="14" />' }}</div>
+        <div class="card-info">
+          <h3>{{ m.title }}</h3>
+          <div class="card-meta">
+            <span>{{ m.category }}</span>
+            <span>v{{ m.version }}</span>
+            <span>{{ formatDate(m.updated_at) }}</span>
+          </div>
+        </div>
+        <button class="card-edit" @click.stop="router.push(`/mockup-editor/${m.slug}`)">Edit</button>
+        <button class="card-delete" @click.stop="deleteMockup(m.slug)"><Icon name="trash" :size="14" /></button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.mockup-list-page { max-width: 900px; margin: 0 auto; padding: 24px 16px; }
+.search-input { width: 100%; border: 1px solid #d1d5db; border-radius: 8px; padding: 8px 12px; font-size: 14px; margin-bottom: 12px; box-sizing: border-box; }
+.list-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
+.list-header h1 { font-size: 20px; font-weight: 700; }
+.btn-new { background: #3b82f6; color: #fff; border: none; border-radius: 10px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
+
+.create-form { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
+.input { border: 1px solid rgba(0,0,0,0.15); border-radius: 8px; padding: 8px 12px; font-size: 13px; }
+
+.mockup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
+.mockup-card { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); cursor: pointer; transition: all 0.2s; }
+.mockup-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
+.card-delete { border: none; background: none; font-size: 16px; cursor: pointer; opacity: 0.4; transition: opacity 0.15s; padding: 4px; }
+.card-delete:hover { opacity: 1; }
+.card-viewport { font-size: 28px; }
+.card-info { flex: 1; }
+.card-info h3 { font-size: 15px; font-weight: 600; }
+.card-meta { display: flex; gap: 8px; font-size: 11px; color: #888; margin-top: 4px; }
+.card-edit { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
+
+.loading, .empty { text-align: center; color: #888; padding: 40px; }
+@media (max-width: 640px) { .mockup-grid { grid-template-columns: 1fr; } .create-form { flex-direction: column; } }
+</style>

package/scaffold/spec-site/src/pages/MockupViewerPage.vue

@@ -0,0 +1,199 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { apiGet } from '@/composables/useTurso'
+import SplitPaneLayout from '@/layouts/SplitPaneLayout.vue'
+import MockupShell from '@/components/MockupShell.vue'
+import MockupCanvas from '@/mockup/MockupCanvas.vue'
+import { provideViewport } from '@/composables/useViewport'
+import { provideActiveSection } from '@/composables/useActiveSection'
+import { renderMarkdown } from '@/utils/markdown'
+import { getComponentDef } from '@/mockup/componentCatalog'
+import { useScenarios } from '@/mockup/useScenarios'
+
+const { setMode } = provideViewport()
+const { activeSection } = provideActiveSection()
+
+const route = useRoute()
+const router = useRouter()
+const slug = computed(() => route.params.slug as string)
+
+interface CanvasComponent {
+  id: string; componentType: string; props: Record<string, unknown>; children: CanvasComponent[]
+}
+
+const components = ref<CanvasComponent[]>([])
+const pageTitle = ref('')
+const viewport = ref<'mobile' | 'desktop'>('desktop')
+const loading = ref(true)
+const selectedId = ref<string | null>(null)
+
+// Scenarios
+const token = localStorage.getItem('spec-auth-token') || ''
+const { scenarios, activeScenarioId, overrides, fetchScenarios, selectScenario } = useScenarios(slug.value, token)
+
+// Section tabs
+const sections = computed(() => {
+  const cats = new Set<string>()
+  cats.add('All')
+  for (const c of components.value) {
+    const def = getComponentDef(c.componentType)
+    if (def?.category) cats.add(def.category)
+  }
+  return Array.from(cats)
+})
+
+const activeTab = ref('All')
+
+const filteredComponents = computed(() => {
+  if (activeTab.value === 'All') return components.value
+  return components.value.filter(c => {
+    const def = getComponentDef(c.componentType)
+    return def?.category === activeTab.value
+  })
+})
+
+// Selected component spec
+const selectedComp = computed(() => {
+  if (!selectedId.value) return null
+  return findComponent(components.value, selectedId.value)
+})
+
+const specTitle = computed(() => {
+  if (!selectedComp.value) return ''
+  const def = getComponentDef(selectedComp.value.componentType)
+  return `${def?.icon || ''} ${def?.name || selectedComp.value.componentType}`
+})
+
+const specDescription = computed(() => {
+  if (!selectedComp.value) return ''
+  return (selectedComp.value.props.specDescription as string) || ''
+})
+
+function findComponent(list: CanvasComponent[], id: string): CanvasComponent | null {
+  for (const c of list) {
+    if (c.id === id) return c
+    const found = findComponent(c.children || [], id)
+    if (found) return found
+  }
+  return null
+}
+
+function onSelect(id: string) {
+  selectedId.value = id
+}
+
+function copySpec() {
+  if (specDescription.value) {
+    navigator.clipboard.writeText(specDescription.value)
+    alert('Spec copied')
+  }
+}
+
+onMounted(async () => {
+  fetchScenarios()
+  const { data } = await apiGet(`/api/v2/mockups/${slug.value}`)
+  if (data?.page) {
+    pageTitle.value = (data.page as any).title || slug.value
+    viewport.value = (data.page as any).viewport === 'mobile' ? 'mobile' : 'desktop'
+  }
+  if (data?.components) {
+    components.value = buildTree(data.components as any[])
+  }
+  loading.value = false
+  if (viewport.value === 'mobile') setMode('mobile')
+})
+
+function buildTree(flat: any[]): CanvasComponent[] {
+  const map = new Map<number, CanvasComponent>()
+  const roots: CanvasComponent[] = []
+  for (const f of flat) {
+    map.set(f.id, { id: `c-${f.id}`, componentType: f.component_type, props: JSON.parse(f.props || '{}'), children: [] })
+  }
+  for (const f of flat) {
+    const comp = map.get(f.id)!
+    if (f.parent_id && map.has(f.parent_id)) map.get(f.parent_id)!.children.push(comp)
+    else roots.push(comp)
+  }
+  return roots
+}
+</script>
+
+<template>
+  <div v-if="loading" style="text-align:center; padding:60px; color:#888;">Loading...</div>
+
+  <SplitPaneLayout v-else :spec-areas="[]">
+    <template #mockup>
+      <div class="viewer-toolbar">
+        <h2>{{ pageTitle }}</h2>
+        <button class="styled-btn styled-btn--secondary" @click="router.push(`/mockup-editor/${slug}`)">Edit</button>
+        <select v-if="scenarios.length" class="scenario-select" :value="activeScenarioId || ''" @change="selectScenario(($event.target as HTMLSelectElement).value ? Number(($event.target as HTMLSelectElement).value) : null)">
+          <option value="">Default</option>
+          <option v-for="s in scenarios" :key="s.id" :value="s.id">{{ s.name }}</option>
+        </select>
+        <button class="styled-btn styled-btn--ghost" @click="router.push('/mockups')">List</button>
+      </div>
+      <div class="section-tabs">
+        <button v-for="sec in sections" :key="sec" class="tab-btn" :class="{ active: activeTab === sec }" @click="activeTab = sec">{{ sec }}</button>
+      </div>
+      <MockupShell>
+        <MockupCanvas
+          :components="filteredComponents"
+          :selected-id="selectedId"
+          :viewport="viewport"
+          :view-mode="true"
+          @select="onSelect"
+        />
+      </MockupShell>
+    </template>
+
+    <template #spec>
+      <div class="spec-panel-v2">
+        <template v-if="selectedComp">
+          <div class="spec-header">
+            <span class="spec-comp-name">{{ specTitle }}</span>
+            <span class="spec-comp-type">{{ selectedComp.componentType }}</span>
+          </div>
+          <div v-if="specDescription" class="spec-body" v-html="renderMarkdown(specDescription)"></div>
+          <div v-else class="spec-empty">No spec description. Add one in the editor.</div>
+          <div class="spec-actions">
+            <button v-if="specDescription" class="styled-btn styled-btn--ghost" @click="copySpec">Copy</button>
+          </div>
+        </template>
+        <div v-else class="spec-guide">
+          <p>Click a component to view its spec.</p>
+        </div>
+      </div>
+    </template>
+  </SplitPaneLayout>
+</template>
+
+<style scoped>
+.viewer-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--border, #e5e7eb); }
+.viewer-toolbar h2 { font-size: 16px; font-weight: 600; flex: 1; }
+.styled-btn { border: none; border-radius: 8px; padding: 6px 14px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; }
+.styled-btn--secondary { background: #f3f4f6; color: #374151; }
+.styled-btn--secondary:hover { background: #e5e7eb; }
+.styled-btn--ghost { background: none; color: #6b7280; }
+.styled-btn--ghost:hover { background: #f9fafb; }
+
+.section-tabs { display: flex; gap: 4px; padding: 4px 16px; border-bottom: 1px solid var(--border, #e5e7eb); overflow-x: auto; }
+.tab-btn { border: none; background: none; padding: 6px 12px; font-size: 13px; color: #6b7280; cursor: pointer; border-radius: 6px; white-space: nowrap; }
+.tab-btn.active { background: #3b82f6; color: #fff; }
+.tab-btn:hover:not(.active) { background: #f3f4f6; }
+
+.scenario-select { border: 1px solid #d1d5db; border-radius: 6px; padding: 4px 8px; font-size: 12px; }
+.search-input { width: 100%; border: 1px solid #d1d5db; border-radius: 8px; padding: 8px 12px; font-size: 14px; margin-bottom: 12px; box-sizing: border-box; }
+.spec-panel-v2 { padding: 20px; height: 100%; overflow-y: auto; }
+.spec-header { margin-bottom: 16px; }
+.spec-comp-name { font-size: 16px; font-weight: 700; display: block; }
+.spec-comp-type { font-size: 12px; color: #9ca3af; }
+.spec-body { font-size: 14px; line-height: 1.7; color: var(--text-primary, #1c1c1e); }
+.spec-body :deep(h1) { font-size: 18px; font-weight: 700; margin: 16px 0 8px; }
+.spec-body :deep(h2) { font-size: 16px; font-weight: 600; margin: 12px 0 6px; }
+.spec-body :deep(code) { background: #f1f3f5; padding: 1px 4px; border-radius: 3px; font-size: 12px; }
+.spec-body :deep(ul) { padding-left: 16px; }
+.spec-empty { color: #9ca3af; font-size: 13px; font-style: italic; }
+.spec-actions { margin-top: 16px; }
+.spec-guide { display: flex; align-items: center; justify-content: center; height: 100%; color: #9ca3af; font-size: 14px; }
+</style>