refactor: move studio to frontends workspace

- Move studio from root to frontends/studio/ - Add owner-tools frontend for live blog admin UI - Add shared ui component library - Set up npm workspaces for frontends - Add enhanced code block extension for editor Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-12 01:59:56 +02:00 · 2026-01-12 01:59:56 +02:00 · bef5dd4437
commit bef5dd4437
parent c662e41b97
108 changed files with 8650 additions and 441 deletions
--- a/frontends/owner-tools/index.html
+++ b/frontends/owner-tools/index.html
@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Owner Tools Dev</title>
+  <style>
+    :root {
+      --accent: #10b981;
+    }
+    * {
+      box-sizing: border-box;
+    }
+    body {
+      margin: 0;
+      font-family: system-ui, sans-serif;
+      background: #fafafa;
+      min-height: 100vh;
+    }
+    .mock-blog {
+      max-width: 680px;
+      margin: 0 auto;
+      padding: 60px 20px;
+    }
+    .mock-blog h1 {
+      font-size: 2.5rem;
+      margin-bottom: 1rem;
+      color: #18181b;
+    }
+    .mock-blog p {
+      font-size: 1.125rem;
+      line-height: 1.75;
+      color: #3f3f46;
+      margin-bottom: 1.5rem;
+    }
+    .mock-blog pre {
+      background: #1e1e1e;
+      color: #d4d4d4;
+      padding: 1rem;
+      border-radius: 8px;
+      overflow-x: auto;
+    }
+  </style>
+</head>
+<body>
+  <div class="mock-blog">
+    <h1>Sample Blog Post</h1>
+    <p>
+      This is a mock blog page for developing the owner tools panel.
+      The settings panel should appear when you click the cog icon in the bottom right.
+    </p>
+    <p>
+      Changes to accent color should update the <code>--accent</code> CSS variable
+      and you should see it reflected immediately.
+    </p>
+    <pre><code>function hello() {
+  console.log("Hello, world!");
+}</code></pre>
+    <p style="color: var(--accent); font-weight: 600;">
+      This text uses the accent color.
+    </p>
+  </div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+</html>
--- a/frontends/owner-tools/package-lock.json
+++ b/frontends/owner-tools/package-lock.json
--- a/frontends/owner-tools/package.json
+++ b/frontends/owner-tools/package.json
@ -0,0 +1,28 @@
+{
+  "name": "owner-tools",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "watch": "vite build --watch"
+  },
+  "dependencies": {
+    "@writekit/ui": "*",
+    "@nanostores/react": "^1.0.0",
+    "@unocss/reset": "^66.5.12",
+    "nanostores": "^1.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "unocss": "^66.5.12"
+  },
+  "devDependencies": {
+    "@iconify-json/lucide": "^1.2.82",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.4.0",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0"
+  }
+}
--- a/frontends/owner-tools/src/App.tsx
+++ b/frontends/owner-tools/src/App.tsx
@ -0,0 +1,69 @@
+import { useStore } from '@nanostores/react'
+import { Icons } from '@writekit/ui'
+import { SettingsPanel } from './SettingsPanel'
+import { RegeneratingOverlay } from './RegeneratingOverlay'
+import {
+  $panelOpen,
+  $regenerating,
+  $error,
+  $settings,
+  openPanel,
+  closePanel,
+} from './stores/app'
+
+export function App() {
+  const open = useStore($panelOpen)
+  const regenerating = useStore($regenerating)
+  const error = useStore($error)
+  const settings = useStore($settings)
+  const hasSettings = Object.keys(settings).length > 0
+
+  return (
+    <>
+      <RegeneratingOverlay visible={regenerating} />
+
+      <button
+        className="pointer-events-auto fixed bottom-5 left-5 w-12 h-12 rounded-full bg-text text-white border-none cursor-pointer flex items-center justify-center shadow-lg hover:scale-105 hover:bg-zinc-700 transition-all z-99999"
+        onClick={openPanel}
+        aria-label="Site settings"
+      >
+        <Icons.Settings className="w-5 h-5" />
+      </button>
+
+      {open && (
+        <div
+          className="pointer-events-auto fixed inset-0 bg-black/40 z-100000 flex justify-start"
+          onClick={closePanel}
+        >
+          <div
+            className="w-full max-w-100 h-full bg-white shadow-xl overflow-y-auto animate-[wk-slide-in_0.2s_ease-out]"
+            onClick={e => e.stopPropagation()}
+          >
+            <div className="flex items-center justify-between px-5 py-4 border-b border-border sticky top-0 bg-white">
+              <h2 className="m-0 text-lg font-semibold text-text">Site Settings</h2>
+              <button
+                className="bg-transparent border-none cursor-pointer p-1 text-muted hover:text-text"
+                onClick={closePanel}
+                aria-label="Close"
+              >
+                <Icons.Close className="w-5 h-5" />
+              </button>
+            </div>
+
+            {error && (
+              <div className="mx-5 mt-4 p-3 bg-red-50 text-danger rounded-lg text-sm">
+                {error}
+              </div>
+            )}
+
+            {hasSettings ? (
+              <SettingsPanel />
+            ) : (
+              <div className="py-10 px-5 text-center text-muted">Loading...</div>
+            )}
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
--- a/frontends/owner-tools/src/RegeneratingOverlay.tsx
+++ b/frontends/owner-tools/src/RegeneratingOverlay.tsx
@ -0,0 +1,18 @@
+import { Icons } from '@writekit/ui'
+
+interface Props {
+  visible: boolean
+}
+
+export function RegeneratingOverlay({ visible }: Props) {
+  if (!visible) return null
+
+  return (
+    <div className="pointer-events-auto fixed inset-0 z-[100001] bg-black/60 flex items-center justify-center">
+      <div className="bg-white px-6 py-4 rounded-lg shadow-xl flex items-center gap-3">
+        <Icons.Loader className="w-5 h-5 animate-spin text-accent" />
+        <span className="text-sm font-medium text-text">Regenerating site...</span>
+      </div>
+    </div>
+  )
+}
--- a/frontends/owner-tools/src/SettingsPanel.tsx
+++ b/frontends/owner-tools/src/SettingsPanel.tsx
@ -0,0 +1,97 @@
+import { useStore } from '@nanostores/react'
+import { Button, Input, Textarea, Select } from '@writekit/ui'
+import { $settings, $schema, $dirty, updateSetting, saveSettings } from './stores/app'
+import type { SettingDefinition } from './api'
+
+export function SettingsPanel() {
+  const settings = useStore($settings)
+  const schema = useStore($schema)
+  const dirty = useStore($dirty)
+
+  function renderField(def: SettingDefinition) {
+    const value = settings[def.key] ?? def.default ?? ''
+
+    if (def.type === 'color') {
+      return (
+        <label key={def.key} className="block mb-4">
+          <span className="label-text">{def.label}</span>
+          <div className="flex gap-2">
+            <input
+              type="color"
+              value={value}
+              onChange={e => updateSetting(def.key, e.target.value)}
+              className="w-11 h-11 p-0.5 border border-border rounded-lg cursor-pointer"
+            />
+            <Input
+              value={value}
+              onChange={v => updateSetting(def.key, v)}
+              placeholder={def.default}
+              className="flex-1"
+            />
+          </div>
+        </label>
+      )
+    }
+
+    if (def.type === 'select' && def.options) {
+      return (
+        <label key={def.key} className="block mb-4">
+          <span className="label-text">{def.label}</span>
+          <Select
+            value={value}
+            onChange={v => updateSetting(def.key, v)}
+            options={def.options}
+          />
+        </label>
+      )
+    }
+
+    if (def.type === 'textarea') {
+      return (
+        <label key={def.key} className="block mb-4">
+          <span className="label-text">{def.label}</span>
+          <Textarea
+            value={value}
+            onChange={v => updateSetting(def.key, v)}
+            placeholder={def.default}
+            rows={4}
+            className="resize-y min-h-20"
+          />
+        </label>
+      )
+    }
+
+    return (
+      <label key={def.key} className="block mb-4">
+        <span className="label-text">{def.label}</span>
+        <Input
+          value={value}
+          onChange={v => updateSetting(def.key, v)}
+          placeholder={def.default}
+        />
+      </label>
+    )
+  }
+
+  return (
+    <div className="p-5">
+      <section className="mb-6">
+        <h3 className="text-xs font-semibold text-muted uppercase tracking-wide mb-4">
+          Appearance
+        </h3>
+        {schema.map(renderField)}
+      </section>
+
+      <div className="sticky bottom-0 py-4 bg-white border-t border-border -mx-5 px-5">
+        <Button
+          variant="accent"
+          onClick={saveSettings}
+          disabled={!dirty}
+          className="w-full"
+        >
+          Save Changes
+        </Button>
+      </div>
+    </div>
+  )
+}
--- a/frontends/owner-tools/src/api.ts
+++ b/frontends/owner-tools/src/api.ts
@ -0,0 +1,39 @@
+const BASE = '/api/studio'
+
+export interface Settings {
+  [key: string]: string
+}
+
+export interface SettingOption {
+  value: string
+  label: string
+}
+
+export interface SettingDefinition {
+  key: string
+  type: 'color' | 'select' | 'text' | 'textarea'
+  label: string
+  options?: SettingOption[]
+  default?: string
+}
+
+export async function getSettingsSchema(): Promise<SettingDefinition[]> {
+  const res = await fetch(`${BASE}/settings/schema`)
+  if (!res.ok) throw new Error('Failed to fetch settings schema')
+  return res.json()
+}
+
+export async function getSettings(): Promise<Settings> {
+  const res = await fetch(`${BASE}/settings`)
+  if (!res.ok) throw new Error('Failed to fetch settings')
+  return res.json()
+}
+
+export async function saveSettings(settings: Partial<Settings>): Promise<void> {
+  const res = await fetch(`${BASE}/settings`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(settings)
+  })
+  if (!res.ok) throw new Error('Failed to save settings')
+}
--- a/frontends/owner-tools/src/main.tsx
+++ b/frontends/owner-tools/src/main.tsx
@ -0,0 +1,39 @@
+import { createRoot } from 'react-dom/client'
+import { App } from './App'
+import reset from '@unocss/reset/tailwind.css?inline'
+import css from 'virtual:uno.css?inline'
+
+function mount() {
+  const host = document.createElement('div')
+  host.id = 'writekit-owner-tools'
+  document.body.appendChild(host)
+
+  const shadow = host.attachShadow({ mode: 'open' })
+
+  const style = document.createElement('style')
+  style.textContent = reset + css + `
+    :host {
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      line-height: 1.5;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+  `
+  shadow.appendChild(style)
+
+  const container = document.createElement('div')
+  container.style.cssText = `
+    position:fixed;inset:0;z-index:99999;pointer-events:none;
+    --un-bg-opacity:100%;--un-text-opacity:100%;--un-border-opacity:100%;
+    --un-ring-opacity:100%;--un-shadow-opacity:100%;
+  `.replace(/\s+/g, '')
+  shadow.appendChild(container)
+
+  createRoot(container).render(<App />)
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', mount)
+} else {
+  mount()
+}
--- a/frontends/owner-tools/src/stores/app.ts
+++ b/frontends/owner-tools/src/stores/app.ts
@ -0,0 +1,64 @@
+import { atom, map, onMount } from 'nanostores'
+import { getSettings, getSettingsSchema, saveSettings as apiSaveSettings } from '../api'
+import type { Settings, SettingDefinition } from '../api'
+
+export const $panelOpen = atom(false)
+export const $regenerating = atom(false)
+export const $error = atom<string | null>(null)
+export const $settings = map<Settings>({})
+export const $schema = atom<SettingDefinition[]>([])
+export const $dirty = atom(false)
+
+export function openPanel() {
+  $panelOpen.set(true)
+}
+
+export function closePanel() {
+  $panelOpen.set(false)
+}
+
+export function updateSetting(key: string, value: string) {
+  $settings.setKey(key, value)
+  $dirty.set(true)
+}
+
+async function softReload() {
+  const res = await fetch(window.location.href)
+  if (!res.ok) throw new Error('Failed to fetch page')
+
+  const html = await res.text()
+  const parser = new DOMParser()
+  const newDoc = parser.parseFromString(html, 'text/html')
+
+  const currentPage = document.getElementById('page')
+  const newPage = newDoc.getElementById('page')
+
+  if (currentPage && newPage) {
+    currentPage.outerHTML = newPage.outerHTML
+  }
+}
+
+export async function saveSettings() {
+  $regenerating.set(true)
+  $error.set(null)
+
+  try {
+    await apiSaveSettings($settings.get())
+    await softReload()
+    $regenerating.set(false)
+    $dirty.set(false)
+  } catch {
+    $regenerating.set(false)
+    $error.set('Failed to save')
+  }
+}
+
+onMount($settings, () => {
+  getSettings()
+    .then(data => $settings.set(data))
+    .catch(() => $error.set('Failed to load settings'))
+
+  getSettingsSchema()
+    .then(data => $schema.set(data))
+    .catch(() => {})
+})
--- a/frontends/owner-tools/tsconfig.json
+++ b/frontends/owner-tools/tsconfig.json
@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}
--- a/frontends/owner-tools/uno.config.ts
+++ b/frontends/owner-tools/uno.config.ts
@ -0,0 +1,31 @@
+import { defineConfig, presetWind4, presetIcons } from 'unocss'
+import { theme, shortcuts } from '@writekit/ui/uno.config'
+
+export default defineConfig({
+  presets: [
+    presetWind4(),
+    presetIcons({
+      scale: 1.2,
+      cdn: 'https://esm.sh/',
+      extraProperties: {
+        'display': 'inline-block',
+        'vertical-align': 'middle',
+      },
+    }),
+  ],
+  theme,
+  shortcuts: {
+    ...shortcuts,
+    'label-text': 'block text-sm font-medium text-text mb-1.5',
+  },
+  preflights: [
+    {
+      getCSS: () => `
+        @keyframes wk-slide-in {
+          from { transform: translateX(-100%); }
+          to { transform: translateX(0); }
+        }
+      `,
+    },
+  ],
+})
--- a/frontends/owner-tools/vite.config.ts
+++ b/frontends/owner-tools/vite.config.ts
@ -0,0 +1,42 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import UnoCSS from 'unocss/vite'
+import { resolve } from 'path'
+
+export default defineConfig(({ command }) => ({
+  plugins: [UnoCSS(), ...(command === 'build' ? [react()] : [])],
+  base: command === 'serve' ? '/@owner-tools' : '/',
+  esbuild: {
+    jsxInject: `import React from 'react'`
+  },
+
+  ...(command === 'serve' && {
+    server: {
+      host: true,
+      port: 5174,
+      strictPort: true,
+      allowedHosts: true,
+      hmr: {
+        clientPort: 80,
+        path: '/@owner-tools'
+      },
+      proxy: {
+        '/api/studio': {
+          target: 'http://app:8080',
+          changeOrigin: true
+        }
+      }
+    }
+  }),
+
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/main.tsx'),
+      name: 'OwnerTools',
+      formats: ['iife'],
+      fileName: () => 'owner-tools.js'
+    },
+    outDir: '../../internal/build/assets/js',
+    emptyOutDir: false
+  }
+}))
--- a/frontends/package-lock.json
+++ b/frontends/package-lock.json
--- a/frontends/package.json
+++ b/frontends/package.json
@ -0,0 +1,14 @@
+{
+  "name": "writekit-frontends",
+  "private": true,
+  "workspaces": [
+    "ui",
+    "studio",
+    "owner-tools"
+  ],
+  "scripts": {
+    "dev:studio": "npm -w studio run dev",
+    "dev:owner-tools": "npm -w owner-tools run dev",
+    "build": "npm -w ui run build && npm -w studio run build && npm -w owner-tools run build"
+  }
+}
--- a/frontends/studio/embed.go
+++ b/frontends/studio/embed.go
--- a/frontends/studio/embed_testing.go
+++ b/frontends/studio/embed_testing.go
--- a/frontends/studio/index.html
+++ b/frontends/studio/index.html
--- a/frontends/studio/package-lock.json
+++ b/frontends/studio/package-lock.json
--- a/frontends/studio/package.json
+++ b/frontends/studio/package.json
@ -10,6 +10,7 @@
    "typecheck": "tsc --noEmit"
  },
  "dependencies": {
+    "@writekit/ui": "*",
    "@iconify-json/logos": "^1.2.10",
    "@iconify-json/lucide": "^1.2.82",
    "@monaco-editor/react": "^4.7.0",
--- a/frontends/studio/src/App.tsx
+++ b/frontends/studio/src/App.tsx
--- a/frontends/studio/src/api.ts
+++ b/frontends/studio/src/api.ts
--- a/frontends/studio/src/components/editor/MetadataPanel.tsx
+++ b/frontends/studio/src/components/editor/MetadataPanel.tsx
--- a/frontends/studio/src/components/editor/PluginEditor.tsx
+++ b/frontends/studio/src/components/editor/PluginEditor.tsx
--- a/frontends/studio/src/components/editor/PostEditor.tsx
+++ b/frontends/studio/src/components/editor/PostEditor.tsx
@ -7,17 +7,14 @@ import Placeholder from '@tiptap/extension-placeholder'
 import { Table, TableRow, TableCell, TableHeader } from '@tiptap/extension-table'
 import TaskList from '@tiptap/extension-task-list'
 import TaskItem from '@tiptap/extension-task-item'
-import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
 import { Markdown } from '@tiptap/markdown'
-import { common, createLowlight } from 'lowlight'
 import { useEffect, useRef, useState, useCallback } from 'react'
 import { useStore } from '@nanostores/react'
 import { $editorPost, broadcastPreview } from '../../stores/editor'
 import { $settings } from '../../stores/settings'
 import { Icons } from '../shared/Icons'
 import { SlashCommands } from './SlashCommands'
-
-const lowlight = createLowlight(common)
+import { CodeBlockEnhanced } from './extensions/code-block'

 interface PostEditorProps {
  onChange?: (markdown: string) => void
@ -45,7 +42,6 @@ async function uploadImage(file: File): Promise<string | null> {
 export function PostEditor({ onChange }: PostEditorProps) {
  const post = useStore($editorPost)
  const settings = useStore($settings)
-  const isInitialMount = useRef(true)
  const skipNextUpdate = useRef(false)
  const wrapperRef = useRef<HTMLDivElement>(null)
  const [linkUrl, setLinkUrl] = useState('')
@ -79,9 +75,7 @@ export function PostEditor({ onChange }: PostEditorProps) {
      TaskItem.configure({
        nested: true,
      }),
-      CodeBlockLowlight.configure({
-        lowlight,
-      }),
+      CodeBlockEnhanced,
      Markdown,
      SlashCommands,
    ],
@ -184,11 +178,6 @@ export function PostEditor({ onChange }: PostEditorProps) {
  useEffect(() => {
    if (!editor) return

-    if (isInitialMount.current) {
-      isInitialMount.current = false
-      return
-    }
-
    const currentContent = editor.getMarkdown()
    if (currentContent !== post.content) {
      skipNextUpdate.current = true
--- a/frontends/studio/src/components/editor/SlashCommands.tsx
+++ b/frontends/studio/src/components/editor/SlashCommands.tsx
--- a/frontends/studio/src/components/editor/SourceEditor.tsx
+++ b/frontends/studio/src/components/editor/SourceEditor.tsx
--- a/frontends/studio/src/components/editor/extensions/code-block/CodeBlockExtension.ts
+++ b/frontends/studio/src/components/editor/extensions/code-block/CodeBlockExtension.ts
@ -0,0 +1,104 @@
+import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
+import { ReactNodeViewRenderer } from '@tiptap/react'
+import { common, createLowlight } from 'lowlight'
+import { CodeBlockView } from './CodeBlockView'
+import type { MarkdownToken, JSONContent, MarkdownRendererHelpers, RenderContext, MarkdownParseHelpers } from '@tiptap/core'
+
+export const lowlight = createLowlight(common)
+
+function parseInfoString(info: string): { language: string | null; title: string | null } {
+  const trimmed = info.trim()
+  const titleMatch = trimmed.match(/title=["']([^"']+)["']/)
+  const title = titleMatch ? titleMatch[1] : null
+  const languagePart = trimmed.replace(/title=["'][^"']+["']/, '').trim()
+  const language = languagePart || null
+  return { language, title }
+}
+
+function buildInfoString(language: string | null, title: string | null): string {
+  const parts: string[] = []
+  if (language) parts.push(language)
+  if (title) parts.push(`title="${title}"`)
+  return parts.join(' ')
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    codeBlockEnhanced: {
+      setCodeBlock: (attributes?: { language?: string; title?: string }) => ReturnType
+    }
+  }
+}
+
+export const CodeBlockEnhanced = CodeBlockLowlight.extend({
+  name: 'codeBlock',
+
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      language: {
+        default: null,
+        parseHTML: (element) => {
+          const classAttr = element.querySelector('code')?.getAttribute('class')
+          if (classAttr) {
+            const match = classAttr.match(/language-(\w+)/)
+            return match ? match[1] : null
+          }
+          return null
+        },
+      },
+      title: {
+        default: null,
+        parseHTML: (element) => element.getAttribute('data-title'),
+        renderHTML: (attributes) => {
+          if (!attributes.title) return {}
+          return { 'data-title': attributes.title }
+        },
+      },
+    }
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(CodeBlockView)
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      ...this.parent?.(),
+      Tab: ({ editor }) => {
+        if (!editor.isActive('codeBlock')) return false
+        editor.commands.insertContent('  ')
+        return true
+      },
+      'Shift-Tab': () => {
+        return true
+      },
+    }
+  },
+
+  markdownTokenName: 'code',
+
+  parseMarkdown(token: MarkdownToken, helpers: MarkdownParseHelpers) {
+    if (token.raw?.startsWith('```') === false && token.codeBlockStyle !== 'indented') {
+      return []
+    }
+    const info = (token.lang as string) || ''
+    const { language, title } = parseInfoString(info)
+    const text = (token.text as string) || ''
+    return helpers.createNode(
+      'codeBlock',
+      { language, title },
+      text ? [helpers.createTextNode(text)] : []
+    )
+  },
+
+  renderMarkdown(node: JSONContent, helpers: MarkdownRendererHelpers, _ctx: RenderContext) {
+    const language = node.attrs?.language || ''
+    const title = node.attrs?.title || null
+    const info = buildInfoString(language, title)
+    const content = node.content ? helpers.renderChildren(node.content) : ''
+    return '```' + info + '\n' + content + '\n```'
+  },
+}).configure({
+  lowlight,
+})
--- a/frontends/studio/src/components/editor/extensions/code-block/CodeBlockView.tsx
+++ b/frontends/studio/src/components/editor/extensions/code-block/CodeBlockView.tsx
@ -0,0 +1,168 @@
+import { NodeViewWrapper, NodeViewContent } from '@tiptap/react'
+import type { NodeViewProps } from '@tiptap/react'
+import { useState, useCallback, useRef, useEffect } from 'react'
+import { getLanguageIconUrl, getLanguageDisplayName, SUPPORTED_LANGUAGES } from './icons'
+import { Icons } from '../../../shared/Icons'
+
+export function CodeBlockView({ node, updateAttributes, extension }: NodeViewProps) {
+  const { language, title } = node.attrs
+  const [showLanguageMenu, setShowLanguageMenu] = useState(false)
+  const [copied, setCopied] = useState(false)
+  const [isEditingTitle, setIsEditingTitle] = useState(false)
+  const [titleValue, setTitleValue] = useState(title || '')
+  const titleInputRef = useRef<HTMLInputElement>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
+
+  const iconUrl = language ? getLanguageIconUrl(language) : null
+  const displayName = language ? getLanguageDisplayName(language) : 'Plain text'
+
+  const handleCopy = useCallback(async () => {
+    const code = node.textContent
+    await navigator.clipboard.writeText(code)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }, [node.textContent])
+
+  const handleLanguageSelect = useCallback((lang: string) => {
+    updateAttributes({ language: lang })
+    setShowLanguageMenu(false)
+  }, [updateAttributes])
+
+  const handleTitleSubmit = useCallback(() => {
+    updateAttributes({ title: titleValue || null })
+    setIsEditingTitle(false)
+  }, [titleValue, updateAttributes])
+
+  const handleTitleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      handleTitleSubmit()
+    }
+    if (e.key === 'Escape') {
+      setTitleValue(title || '')
+      setIsEditingTitle(false)
+    }
+  }, [handleTitleSubmit, title])
+
+  useEffect(() => {
+    if (isEditingTitle && titleInputRef.current) {
+      titleInputRef.current.focus()
+      titleInputRef.current.select()
+    }
+  }, [isEditingTitle])
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setShowLanguageMenu(false)
+      }
+    }
+    if (showLanguageMenu) {
+      document.addEventListener('mousedown', handleClickOutside)
+    }
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [showLanguageMenu])
+
+
+  return (
+    <NodeViewWrapper className="code-block-wrapper relative my-6">
+      {/* Header bar */}
+      <div className="flex items-center gap-2 px-3 py-2 bg-zinc-50 border border-zinc-200 border-b-0 rounded-t-md">
+        {/* Language selector */}
+        <div className="relative" ref={menuRef}>
+          <button
+            type="button"
+            onClick={() => setShowLanguageMenu(!showLanguageMenu)}
+            className="flex items-center gap-1.5 px-2 py-1 text-xs text-zinc-600 hover:text-zinc-900 hover:bg-zinc-100 rounded transition-colors"
+            contentEditable={false}
+          >
+            {iconUrl && (
+              <img src={iconUrl} alt="" className="w-3.5 h-3.5" />
+            )}
+            <span>{displayName}</span>
+            <Icons.ChevronDown className="w-3 h-3 opacity-50" />
+          </button>
+
+          {showLanguageMenu && (
+            <div className="absolute top-full left-0 mt-1 w-48 max-h-64 overflow-y-auto bg-white border border-zinc-200 rounded-md shadow-lg z-50">
+              {SUPPORTED_LANGUAGES.map((lang) => {
+                const langIcon = getLanguageIconUrl(lang)
+                return (
+                  <button
+                    key={lang}
+                    type="button"
+                    onClick={() => handleLanguageSelect(lang)}
+                    className={`w-full flex items-center gap-2 px-3 py-1.5 text-xs text-left hover:bg-zinc-50 transition-colors ${
+                      language === lang ? 'bg-zinc-100 text-zinc-900' : 'text-zinc-600'
+                    }`}
+                  >
+                    {langIcon && <img src={langIcon} alt="" className="w-3.5 h-3.5" />}
+                    <span>{getLanguageDisplayName(lang)}</span>
+                  </button>
+                )
+              })}
+            </div>
+          )}
+        </div>
+
+
+        {/* Divider */}
+        <div className="w-px h-4 bg-zinc-200" />
+
+        {/* Title (editable) */}
+        <div className="flex-1 min-w-0">
+          {isEditingTitle ? (
+            <input
+              ref={titleInputRef}
+              type="text"
+              value={titleValue}
+              onChange={(e) => setTitleValue(e.target.value)}
+              onBlur={handleTitleSubmit}
+              onKeyDown={handleTitleKeyDown}
+              placeholder="filename.ext"
+              className="w-full px-1 py-0.5 text-xs bg-white border border-zinc-300 rounded focus:outline-none focus:border-zinc-400"
+              contentEditable={false}
+            />
+          ) : (
+            <button
+              type="button"
+              onClick={() => {
+                setTitleValue(title || '')
+                setIsEditingTitle(true)
+              }}
+              className="text-xs text-zinc-500 hover:text-zinc-700 truncate max-w-full"
+              contentEditable={false}
+            >
+              {title || 'Add title...'}
+            </button>
+          )}
+        </div>
+
+        {/* Copy button */}
+        <button
+          type="button"
+          onClick={handleCopy}
+          className="flex items-center gap-1 px-2 py-1 text-xs text-zinc-500 hover:text-zinc-700 hover:bg-zinc-100 rounded transition-colors"
+          contentEditable={false}
+        >
+          {copied ? (
+            <>
+              <Icons.Check className="w-3 h-3 text-emerald-500" />
+              <span className="text-emerald-600">Copied</span>
+            </>
+          ) : (
+            <>
+              <Icons.Copy className="w-3 h-3" />
+              <span>Copy</span>
+            </>
+          )}
+        </button>
+      </div>
+
+      {/* Code content */}
+      <pre className="!mt-0 !rounded-t-none">
+        <NodeViewContent as="code" className={language ? `language-${language}` : ''} />
+      </pre>
+    </NodeViewWrapper>
+  )
+}
--- a/frontends/studio/src/components/editor/extensions/code-block/icons.ts
+++ b/frontends/studio/src/components/editor/extensions/code-block/icons.ts
@ -0,0 +1,174 @@
+/**
+ * Language to Iconify icon mapping
+ * Uses simple-icons set via Iconify API
+ * Format: https://api.iconify.design/simple-icons/{slug}.svg
+ */
+
+export const LANGUAGE_ICONS: Record<string, string> = {
+  // Web
+  javascript: 'javascript',
+  js: 'javascript',
+  typescript: 'typescript',
+  ts: 'typescript',
+  html: 'html5',
+  css: 'css3',
+  scss: 'sass',
+  sass: 'sass',
+  less: 'less',
+  
+  // Frontend frameworks
+  react: 'react',
+  jsx: 'react',
+  tsx: 'react',
+  vue: 'vuedotjs',
+  svelte: 'svelte',
+  angular: 'angular',
+  astro: 'astro',
+  
+  // Backend
+  python: 'python',
+  py: 'python',
+  go: 'go',
+  golang: 'go',
+  rust: 'rust',
+  java: 'openjdk',
+  kotlin: 'kotlin',
+  scala: 'scala',
+  ruby: 'ruby',
+  rb: 'ruby',
+  php: 'php',
+  csharp: 'csharp',
+  cs: 'csharp',
+  cpp: 'cplusplus',
+  c: 'c',
+  swift: 'swift',
+  
+  // Data & config
+  json: 'json',
+  yaml: 'yaml',
+  yml: 'yaml',
+  toml: 'toml',
+  xml: 'xml',
+  
+  // Shell & scripting
+  bash: 'gnubash',
+  sh: 'gnubash',
+  shell: 'gnubash',
+  zsh: 'gnubash',
+  powershell: 'powershell',
+  ps1: 'powershell',
+  
+  // Database
+  sql: 'postgresql',
+  mysql: 'mysql',
+  postgres: 'postgresql',
+  postgresql: 'postgresql',
+  mongodb: 'mongodb',
+  redis: 'redis',
+  
+  // Other
+  graphql: 'graphql',
+  gql: 'graphql',
+  docker: 'docker',
+  dockerfile: 'docker',
+  markdown: 'markdown',
+  md: 'markdown',
+  lua: 'lua',
+  elixir: 'elixir',
+  erlang: 'erlang',
+  haskell: 'haskell',
+  clojure: 'clojure',
+  zig: 'zig',
+  nim: 'nim',
+  r: 'r',
+  julia: 'julia',
+  dart: 'dart',
+  flutter: 'flutter',
+  solidity: 'solidity',
+  terraform: 'terraform',
+  nginx: 'nginx',
+  apache: 'apache',
+}
+
+/**
+ * Get Iconify API URL for a language
+ */
+export function getLanguageIconUrl(language: string): string | null {
+  const slug = LANGUAGE_ICONS[language.toLowerCase()]
+  if (!slug) return null
+  return `https://api.iconify.design/simple-icons/${slug}.svg?color=%2371717a`
+}
+
+/**
+ * Get display name for a language
+ */
+export function getLanguageDisplayName(language: string): string {
+  const displayNames: Record<string, string> = {
+    javascript: 'JavaScript',
+    typescript: 'TypeScript',
+    python: 'Python',
+    go: 'Go',
+    rust: 'Rust',
+    java: 'Java',
+    kotlin: 'Kotlin',
+    ruby: 'Ruby',
+    php: 'PHP',
+    csharp: 'C#',
+    cpp: 'C++',
+    c: 'C',
+    swift: 'Swift',
+    html: 'HTML',
+    css: 'CSS',
+    scss: 'SCSS',
+    json: 'JSON',
+    yaml: 'YAML',
+    bash: 'Bash',
+    sql: 'SQL',
+    graphql: 'GraphQL',
+    markdown: 'Markdown',
+    docker: 'Docker',
+    jsx: 'JSX',
+    tsx: 'TSX',
+    vue: 'Vue',
+    svelte: 'Svelte',
+  }
+  return displayNames[language.toLowerCase()] || language
+}
+
+/**
+ * All supported languages for the language selector
+ */
+export const SUPPORTED_LANGUAGES = [
+  'javascript',
+  'typescript',
+  'python',
+  'go',
+  'rust',
+  'java',
+  'kotlin',
+  'ruby',
+  'php',
+  'csharp',
+  'cpp',
+  'c',
+  'swift',
+  'html',
+  'css',
+  'scss',
+  'json',
+  'yaml',
+  'bash',
+  'sql',
+  'graphql',
+  'markdown',
+  'docker',
+  'jsx',
+  'tsx',
+  'vue',
+  'svelte',
+  'lua',
+  'elixir',
+  'haskell',
+  'dart',
+  'terraform',
+] as const
--- a/frontends/studio/src/components/editor/extensions/code-block/index.ts
+++ b/frontends/studio/src/components/editor/extensions/code-block/index.ts
@ -0,0 +1,3 @@
+export { CodeBlockEnhanced } from './CodeBlockExtension'
+export { CodeBlockView } from './CodeBlockView'
+export { getLanguageIconUrl, getLanguageDisplayName, SUPPORTED_LANGUAGES, LANGUAGE_ICONS } from './icons'
--- a/frontends/studio/src/components/editor/index.ts
+++ b/frontends/studio/src/components/editor/index.ts
--- a/frontends/studio/src/components/layout/Header.tsx
+++ b/frontends/studio/src/components/layout/Header.tsx
--- a/frontends/studio/src/components/layout/Sidebar.tsx
+++ b/frontends/studio/src/components/layout/Sidebar.tsx
--- a/frontends/studio/src/components/layout/index.ts
+++ b/frontends/studio/src/components/layout/index.ts
--- a/frontends/studio/src/components/shared/Breadcrumb.tsx
+++ b/frontends/studio/src/components/shared/Breadcrumb.tsx
--- a/frontends/studio/src/components/shared/BreakdownList.tsx
+++ b/frontends/studio/src/components/shared/BreakdownList.tsx
--- a/frontends/studio/src/components/shared/EmptyState.tsx
+++ b/frontends/studio/src/components/shared/EmptyState.tsx
--- a/frontends/studio/src/components/shared/Field.tsx
+++ b/frontends/studio/src/components/shared/Field.tsx
--- a/frontends/studio/src/components/shared/Icons.tsx
+++ b/frontends/studio/src/components/shared/Icons.tsx
--- a/frontends/studio/src/components/shared/LoadingState.tsx
+++ b/frontends/studio/src/components/shared/LoadingState.tsx
--- a/frontends/studio/src/components/shared/PageHeader.tsx
+++ b/frontends/studio/src/components/shared/PageHeader.tsx
--- a/frontends/studio/src/components/shared/SaveBar.tsx
+++ b/frontends/studio/src/components/shared/SaveBar.tsx
--- a/frontends/studio/src/components/shared/Section.tsx
+++ b/frontends/studio/src/components/shared/Section.tsx
--- a/frontends/studio/src/components/shared/Skeleton.tsx
+++ b/frontends/studio/src/components/shared/Skeleton.tsx
--- a/frontends/studio/src/components/shared/StatCard.tsx
+++ b/frontends/studio/src/components/shared/StatCard.tsx
--- a/frontends/studio/src/components/shared/index.ts
+++ b/frontends/studio/src/components/shared/index.ts
--- a/frontends/studio/src/components/ui/ActionMenu.tsx
+++ b/frontends/studio/src/components/ui/ActionMenu.tsx
--- a/frontends/studio/src/components/ui/Badge.tsx
+++ b/frontends/studio/src/components/ui/Badge.tsx
--- a/frontends/studio/src/components/ui/Button.tsx
+++ b/frontends/studio/src/components/ui/Button.tsx
--- a/frontends/studio/src/components/ui/Dropdown.tsx
+++ b/frontends/studio/src/components/ui/Dropdown.tsx
--- a/frontends/studio/src/components/ui/Input.tsx
+++ b/frontends/studio/src/components/ui/Input.tsx
--- a/frontends/studio/src/components/ui/Modal.tsx
+++ b/frontends/studio/src/components/ui/Modal.tsx
--- a/frontends/studio/src/components/ui/Select.tsx
+++ b/frontends/studio/src/components/ui/Select.tsx
--- a/frontends/studio/src/components/ui/Tabs.tsx
+++ b/frontends/studio/src/components/ui/Tabs.tsx
--- a/frontends/studio/src/components/ui/Toast.tsx
+++ b/frontends/studio/src/components/ui/Toast.tsx
@ -1,6 +1,6 @@
 import { useStore } from '@nanostores/react'
 import { $toasts, removeToast } from '../../stores/app'
-import { Icons } from '../shared/Icons'
+import { Icons } from '@writekit/ui'

 export function Toasts() {
  const toasts = useStore($toasts)
--- a/frontends/studio/src/components/ui/Toggle.tsx
+++ b/frontends/studio/src/components/ui/Toggle.tsx
--- a/frontends/studio/src/components/ui/UsageIndicator.tsx
+++ b/frontends/studio/src/components/ui/UsageIndicator.tsx
--- a/frontends/studio/src/components/ui/index.ts
+++ b/frontends/studio/src/components/ui/index.ts
@ -0,0 +1,18 @@
+export {
+  Button,
+  Input,
+  Textarea,
+  Select,
+  Icons,
+  Tabs,
+  type Tab,
+  Modal,
+  Dropdown,
+  type DropdownOption,
+  Toggle,
+  Badge,
+  ActionMenu,
+  type ActionMenuItem,
+} from '@writekit/ui'
+export { Toasts } from './Toast'
+export { UsageIndicator } from './UsageIndicator'
--- a/frontends/studio/src/main.tsx
+++ b/frontends/studio/src/main.tsx
--- a/frontends/studio/src/pages/APIPage.tsx
+++ b/frontends/studio/src/pages/APIPage.tsx
--- a/frontends/studio/src/pages/AnalyticsPage.tsx
+++ b/frontends/studio/src/pages/AnalyticsPage.tsx
--- a/frontends/studio/src/pages/BillingPage.tsx
+++ b/frontends/studio/src/pages/BillingPage.tsx
--- a/frontends/studio/src/pages/DataPage.tsx
+++ b/frontends/studio/src/pages/DataPage.tsx
--- a/frontends/studio/src/pages/DesignPage.tsx
+++ b/frontends/studio/src/pages/DesignPage.tsx
@ -1,9 +1,8 @@
 import { useStore } from '@nanostores/react'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import { $settings, $settingsData, $hasChanges, $saveSettings, $changedFields } from '../stores/settings'
 import { addToast } from '../stores/app'
 import { SaveBar, DesignPageSkeleton } from '../components/shared'
-import './DesignPage.preview.css'

 const fontConfigs = {
  system: { family: 'system-ui, -apple-system, sans-serif', url: '' },
@ -139,104 +138,13 @@ function LayoutPreview({ layout, selected }: { layout: string; selected: boolean
  )
 }

-function PreviewCodeBlock({ theme }: { theme: string }) {
-  const colors = getThemeColors(theme)
-  return (
-    <div className="preview-code" style={{ background: colors.bg, color: colors.text }}>
-      <div><span style={{ color: colors.keyword }}>const</span> api = <span style={{ color: colors.keyword }}>await</span> fetch(<span style={{ color: colors.string }}>'/posts'</span>)</div>
-    </div>
-  )
-}
-
-function PreviewPostCard() {
-  return (
-    <div className="preview-post-card">
-      <div className="preview-date">Jan 15, 2024</div>
-      <h3 className="preview-title">Building APIs</h3>
-      <p className="preview-description">A deep dive into REST patterns and best practices.</p>
-    </div>
-  )
-}
-
-function LivePreview({ settings }: { settings: Record<string, string> }) {
-  const fontKey = settings.font || 'system'
-  const fontConfig = fontConfigs[fontKey as keyof typeof fontConfigs] || fontConfigs.system
-  const codeTheme = settings.code_theme || 'github'
-  const accent = settings.accent_color || '#10b981'
-  const layout = settings.layout || 'default'
-  const compactness = settings.compactness || 'cozy'
-
-  useFontLoader(fontKey)
-
-  return (
-    <div
-      className={`blog-preview layout-${layout} compactness-${compactness} border border-border`}
-      style={{ '--accent': accent, '--font-body': fontConfig.family } as React.CSSProperties}
-    >
-      {/* Browser chrome */}
-      <div className="preview-chrome">
-        <div className="preview-chrome-dots">
-          <div className="preview-chrome-dot red" />
-          <div className="preview-chrome-dot yellow" />
-          <div className="preview-chrome-dot green" />
-        </div>
-        <span className="preview-chrome-url">yourblog.writekit.dev</span>
-      </div>
-
-      {/* Header */}
-      <header className="preview-header">
-        <span className="preview-site-name">Your Blog</span>
-        <nav className="preview-nav">
-          <a href="#">Posts</a>
-          <span>About</span>
-        </nav>
-      </header>
-
-      {/* Content - varies by layout */}
-      {layout === 'magazine' ? (
-        <div className="preview-posts">
-          <PreviewPostCard />
-          <PreviewPostCard />
-        </div>
-      ) : (
-        <div className="preview-content">
-          <div className="preview-date">Jan 15, 2024</div>
-          <h3 className="preview-title">Building Better APIs</h3>
-          <p className="preview-description">
-            A deep dive into REST design patterns and best practices for modern web development.
-          </p>
-          <div className="preview-prose">
-            <PreviewCodeBlock theme={codeTheme} />
-          </div>
-          <div className="preview-tags">
-            <span className="preview-tag">typescript</span>
-            <span className="preview-tag">react</span>
-          </div>
-        </div>
-      )}
-
-      {/* Footer */}
-      <footer className="preview-footer">
-        &copy; 2024 Your Blog
-      </footer>
-    </div>
-  )
-}
-
 export default function DesignPage() {
  const settings = useStore($settings)
  const { data } = useStore($settingsData)
  const hasChanges = useStore($hasChanges)
  const changedFields = useStore($changedFields)
  const saveSettings = useStore($saveSettings)
-  const [availableThemes, setAvailableThemes] = useState<string[]>(Object.keys(themePreviewColors))
-
-  useEffect(() => {
-    fetch('/api/studio/code-themes')
-      .then(r => r.json())
-      .then((themes: string[]) => setAvailableThemes(themes))
-      .catch(() => {})
-  }, [])
+  const availableThemes = Object.keys(themePreviewColors)

  // Load all fonts for previews
  Object.keys(fontConfigs).forEach(useFontLoader)
@ -261,47 +169,6 @@ export default function DesignPage() {

      {/* Panel container - full-bleed borders */}
      <div className="-mx-6 lg:-mx-10">
-        {/* Live Preview */}
-        <div className="px-6 lg:px-10 py-5">
-          <div className="text-xs font-medium text-muted uppercase tracking-wide">Live Preview</div>
-        </div>
-        <div className="px-6 lg:px-10 py-6">
-          <LivePreview settings={settings as Record<string, string>} />
-        </div>
-
-        <div className="border-t border-border" />
-
-        {/* Presets */}
-        <div className="px-6 lg:px-10 py-5">
-          <div className="text-xs font-medium text-muted uppercase tracking-wide">Quick Presets</div>
-        </div>
-        <div className="px-6 lg:px-10 py-6">
-          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
-            {([
-              { name: 'Developer', desc: 'Monospace, dark code, minimal', font: 'jetbrains-mono', code_theme: 'onedark', layout: 'minimal', compactness: 'compact', accent_color: '#10b981' },
-              { name: 'Writer', desc: 'Serif, light code, spacious', font: 'merriweather', code_theme: 'github', layout: 'default', compactness: 'spacious', accent_color: '#6366f1' },
-              { name: 'Magazine', desc: 'Sans-serif, grid layout', font: 'inter', code_theme: 'nord', layout: 'magazine', compactness: 'cozy', accent_color: '#f59e0b' },
-            ] as const).map(preset => (
-              <button
-                key={preset.name}
-                onClick={() => {
-                  $settings.setKey('font', preset.font)
-                  $settings.setKey('code_theme', preset.code_theme)
-                  $settings.setKey('layout', preset.layout)
-                  $settings.setKey('compactness', preset.compactness)
-                  $settings.setKey('accent_color', preset.accent_color)
-                }}
-                className="p-4 border border-border text-left hover:border-accent hover:bg-accent/5 transition-colors"
-              >
-                <div className="font-medium text-sm">{preset.name}</div>
-                <div className="text-xs text-muted mt-1">{preset.desc}</div>
-              </button>
-            ))}
-          </div>
-        </div>
-
-        <div className="border-t border-border" />
-
        {/* Accent Color */}
        <div className="px-6 lg:px-10 py-5">
          <div className="text-xs font-medium text-muted uppercase tracking-wide">Accent Color</div>
--- a/frontends/studio/src/pages/DomainPage.tsx
+++ b/frontends/studio/src/pages/DomainPage.tsx
--- a/frontends/studio/src/pages/EngagementPage.tsx
+++ b/frontends/studio/src/pages/EngagementPage.tsx
--- a/frontends/studio/src/pages/GeneralPage.tsx
+++ b/frontends/studio/src/pages/GeneralPage.tsx
--- a/frontends/studio/src/pages/HomePage.tsx
+++ b/frontends/studio/src/pages/HomePage.tsx
--- a/frontends/studio/src/pages/MonetizationPage.tsx
+++ b/frontends/studio/src/pages/MonetizationPage.tsx
--- a/frontends/studio/src/pages/PluginsPage.tsx
+++ b/frontends/studio/src/pages/PluginsPage.tsx
--- a/frontends/studio/src/pages/PostEditorPage.tsx
+++ b/frontends/studio/src/pages/PostEditorPage.tsx
--- a/frontends/studio/src/pages/PostsPage.tsx
+++ b/frontends/studio/src/pages/PostsPage.tsx
--- a/frontends/studio/src/pages/index.ts
+++ b/frontends/studio/src/pages/index.ts
--- a/frontends/studio/src/stores/analytics.ts
+++ b/frontends/studio/src/stores/analytics.ts
--- a/frontends/studio/src/stores/apiKeys.ts
+++ b/frontends/studio/src/stores/apiKeys.ts
--- a/frontends/studio/src/stores/app.ts
+++ b/frontends/studio/src/stores/app.ts
--- a/frontends/studio/src/stores/assets.ts
+++ b/frontends/studio/src/stores/assets.ts
--- a/frontends/studio/src/stores/billing.ts
+++ b/frontends/studio/src/stores/billing.ts
--- a/frontends/studio/src/stores/editor.ts
+++ b/frontends/studio/src/stores/editor.ts
--- a/frontends/studio/src/stores/fetcher.ts
+++ b/frontends/studio/src/stores/fetcher.ts
--- a/frontends/studio/src/stores/hooks.ts
+++ b/frontends/studio/src/stores/hooks.ts
--- a/frontends/studio/src/stores/index.ts
+++ b/frontends/studio/src/stores/index.ts
--- a/frontends/studio/src/stores/interactions.ts
+++ b/frontends/studio/src/stores/interactions.ts
--- a/frontends/studio/src/stores/plugins.ts
+++ b/frontends/studio/src/stores/plugins.ts
--- a/frontends/studio/src/stores/posts.ts
+++ b/frontends/studio/src/stores/posts.ts
--- a/frontends/studio/src/stores/router.ts
+++ b/frontends/studio/src/stores/router.ts
--- a/frontends/studio/src/stores/secrets.ts
+++ b/frontends/studio/src/stores/secrets.ts
--- a/frontends/studio/src/stores/settings.ts
+++ b/frontends/studio/src/stores/settings.ts
--- a/frontends/studio/src/stores/webhooks.ts
+++ b/frontends/studio/src/stores/webhooks.ts
--- a/frontends/studio/src/types.ts
+++ b/frontends/studio/src/types.ts
--- a/frontends/studio/tsconfig.json
+++ b/frontends/studio/tsconfig.json
--- a/frontends/studio/uno.config.ts
+++ b/frontends/studio/uno.config.ts
@ -1,4 +1,5 @@
 import { defineConfig, presetWind4, presetIcons, presetTypography } from 'unocss'
+import { theme, shortcuts } from '@writekit/ui/uno.config'

 export default defineConfig({
  presets: [
@ -206,54 +207,6 @@ export default defineConfig({
      `,
    },
  ],
-  theme: {
-    colors: {
-      bg: '#fafafa',
-      surface: '#ffffff',
-      text: '#0a0a0a',
-      muted: '#737373',
-      border: '#e5e5e5',
-      accent: '#10b981',
-      success: '#10b981',
-      warning: '#f59e0b',
-      danger: '#ef4444',
-    },
-    fontFamily: {
-      sans: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-      mono: '"SF Mono", "JetBrains Mono", "Fira Code", Consolas, monospace',
-    },
-  },
-  shortcuts: {
-    // Buttons - dark bg with light text for primary
-    'btn': 'inline-flex items-center justify-center gap-2 px-4 py-2 text-xs font-medium border border-border transition-all duration-150 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed',
-    'btn-primary': 'btn bg-text text-bg border-text hover:bg-[#1a1a1a]',
-    'btn-secondary': 'btn bg-bg text-text hover:border-muted',
-    'btn-danger': 'btn text-danger border-danger hover:bg-danger hover:text-white hover:border-danger',
-    'btn-ghost': 'btn border-transparent hover:bg-border',
-
-    // Inputs - clean borders, minimal styling
-    'input': 'w-full px-3 py-2 text-sm bg-bg border border-border font-sans focus:outline-none focus:border-muted transition-colors placeholder:text-muted/60',
-    'textarea': 'input resize-none',
-
-    // Labels - small, muted
-    'label': 'block text-xs text-muted font-medium mb-1',
-
-    // Cards - minimal borders, no shadows
-    'card': 'bg-surface border border-border p-6',
-    'section': 'card',
-
-    // Navigation - matching old dashboard
-    'nav-item': 'relative flex items-center gap-2.5 px-2.5 py-2 text-[13px] font-[450] text-muted transition-all duration-150 hover:text-text hover:bg-black/4',
-    'nav-item-active': 'relative flex items-center gap-2.5 px-2.5 py-2 text-[13px] font-[450] text-text bg-black/4 before:content-[""] before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-[3px] before:h-4 before:bg-accent before:rounded-r-sm',
-    'nav-section': 'text-[10px] uppercase tracking-[0.06em] text-muted font-semibold px-2.5 pt-3 pb-1.5',
-
-    // Badges
-    'badge': 'inline-flex items-center text-xs px-2 py-0.5 border',
-    'badge-draft': 'badge text-warning border-warning/40 bg-warning/10',
-    'badge-published': 'badge text-success border-success/40 bg-success/10',
-
-    // Page structure
-    'page-header': 'flex items-center justify-between mb-6',
-    'page-title': 'text-base font-medium text-text',
-  },
+  theme,
+  shortcuts,
 })
--- a/frontends/studio/vite.config.ts
+++ b/frontends/studio/vite.config.ts
--- a/frontends/ui/package.json
+++ b/frontends/ui/package.json
@ -0,0 +1,27 @@
+{
+  "name": "@writekit/ui",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./uno.config": "./uno.config.ts",
+    "./styles": "./src/styles.ts"
+  },
+  "scripts": {
+    "build": "echo 'no build needed - consumed as source'",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "unocss": "^66.5.12"
+  },
+  "devDependencies": {
+    "@iconify-json/lucide": "^1.2.82",
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
+    "typescript": "^5.7.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0"
+  }
+}
--- a/frontends/ui/src/ActionMenu.tsx
+++ b/frontends/ui/src/ActionMenu.tsx
@ -0,0 +1,92 @@
+import { useState, useRef, useEffect } from 'react'
+import type { IconComponent } from './Icons'
+import { Icons } from './Icons'
+
+export interface ActionMenuItem {
+  label: string
+  Icon?: IconComponent
+  onClick?: () => void
+  href?: string
+  external?: boolean
+  variant?: 'default' | 'danger'
+}
+
+interface ActionMenuProps {
+  items: ActionMenuItem[]
+  className?: string
+}
+
+export function ActionMenu({ items, className = '' }: ActionMenuProps) {
+  const [open, setOpen] = useState(false)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [])
+
+  return (
+    <div ref={containerRef} className={`relative ${className}`} data-action-menu>
+      <button
+        type="button"
+        onClick={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          setOpen(!open)
+        }}
+        className="p-2 text-muted/60 hover:text-text hover:bg-bg rounded transition-all duration-150"
+        aria-label="Actions"
+      >
+        <Icons.MoreHorizontal className="w-4 h-4" />
+      </button>
+
+      {open && (
+        <div className="absolute right-0 top-full mt-1 w-36 bg-surface border border-border shadow-lg z-[100] py-1">
+          {items.map((item, i) => {
+            const itemClass = `w-full flex items-center gap-2.5 px-3 py-2 text-sm transition-colors ${
+              item.variant === 'danger'
+                ? 'text-danger hover:bg-danger/5'
+                : 'text-text hover:bg-bg'
+            }`
+
+            if (item.href) {
+              return (
+                <a
+                  key={i}
+                  href={item.href}
+                  target={item.external ? '_blank' : undefined}
+                  rel={item.external ? 'noopener noreferrer' : undefined}
+                  className={itemClass}
+                  onClick={() => setOpen(false)}
+                >
+                  {item.Icon && <item.Icon className="w-3.5 h-3.5 opacity-60" />}
+                  {item.label}
+                </a>
+              )
+            }
+
+            return (
+              <button
+                key={i}
+                type="button"
+                onClick={() => {
+                  setOpen(false)
+                  item.onClick?.()
+                }}
+                className={itemClass}
+              >
+                {item.Icon && <item.Icon className="w-3.5 h-3.5 opacity-70" />}
+                {item.label}
+              </button>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
--- a/frontends/ui/src/Badge.tsx
+++ b/frontends/ui/src/Badge.tsx
@ -0,0 +1,20 @@
+type BadgeVariant = 'draft' | 'published' | 'default'
+
+interface BadgeProps {
+  variant?: BadgeVariant
+  children: string
+}
+
+const variantClasses: Record<BadgeVariant, string> = {
+  draft: 'badge-draft',
+  published: 'badge-published',
+  default: 'badge text-muted border-border',
+}
+
+export function Badge({ variant = 'default', children }: BadgeProps) {
+  return (
+    <span className={variantClasses[variant]}>
+      {children}
+    </span>
+  )
+}
--- a/frontends/ui/src/Button.tsx
+++ b/frontends/ui/src/Button.tsx
@ -0,0 +1,64 @@
+import type { ButtonHTMLAttributes, AnchorHTMLAttributes, ReactNode } from 'react'
+import { Icons, type IconComponent } from './Icons'
+
+type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'ghost' | 'accent'
+
+type ButtonBaseProps = {
+  variant?: ButtonVariant
+  loading?: boolean
+  Icon?: IconComponent
+  children: ReactNode
+}
+
+type ButtonAsButton = ButtonBaseProps & ButtonHTMLAttributes<HTMLButtonElement> & { href?: never }
+type ButtonAsLink = ButtonBaseProps & AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }
+
+type ButtonProps = ButtonAsButton | ButtonAsLink
+
+const variantClasses: Record<ButtonVariant, string> = {
+  primary: 'btn-primary',
+  secondary: 'btn-secondary',
+  danger: 'btn-danger',
+  ghost: 'btn-ghost',
+  accent: 'btn-accent',
+}
+
+export function Button({
+  variant = 'secondary',
+  loading = false,
+  Icon,
+  children,
+  className = '',
+  ...props
+}: ButtonProps) {
+  const content = (
+    <>
+      {loading ? (
+        <Icons.Loader className="animate-spin text-xs" />
+      ) : Icon ? (
+        <Icon className="text-xs opacity-70" />
+      ) : null}
+      <span>{children}</span>
+    </>
+  )
+
+  if ('href' in props && props.href) {
+    const { href, ...linkProps } = props
+    return (
+      <a href={href} className={`${variantClasses[variant]} ${className}`} {...linkProps}>
+        {content}
+      </a>
+    )
+  }
+
+  const { disabled, ...buttonProps } = props as ButtonAsButton
+  return (
+    <button
+      className={`${variantClasses[variant]} ${className}`}
+      disabled={disabled || loading}
+      {...buttonProps}
+    >
+      {content}
+    </button>
+  )
+}
--- a/frontends/ui/src/Dropdown.tsx
+++ b/frontends/ui/src/Dropdown.tsx
@ -0,0 +1,86 @@
+import { useState, useRef, useEffect } from 'react'
+import type { IconComponent } from './Icons'
+import { Icons } from './Icons'
+
+export interface DropdownOption<T extends string = string> {
+  value: T
+  label: string
+  Icon?: IconComponent
+  description?: string
+}
+
+interface DropdownProps<T extends string = string> {
+  value: T
+  onChange: (value: T) => void
+  options: DropdownOption<T>[]
+  placeholder?: string
+  className?: string
+}
+
+export function Dropdown<T extends string = string>({
+  value,
+  onChange,
+  options,
+  placeholder = 'Select...',
+  className = '',
+}: DropdownProps<T>) {
+  const [open, setOpen] = useState(false)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  const selected = options.find(opt => opt.value === value)
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [])
+
+  return (
+    <div ref={containerRef} className={`relative ${className}`}>
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="w-full flex items-center justify-between gap-2 px-3 py-2 text-sm bg-bg border border-border transition-colors hover:border-muted focus:outline-none focus:border-muted"
+      >
+        <span className="flex items-center gap-2 min-w-0">
+          {selected?.Icon && <selected.Icon className="w-4 h-4 flex-shrink-0" />}
+          <span className="truncate">{selected?.label || placeholder}</span>
+        </span>
+        <Icons.ChevronDown className={`w-4 h-4 flex-shrink-0 text-muted transition-transform ${open ? 'rotate-180' : ''}`} />
+      </button>
+
+      {open && (
+        <div className="absolute z-50 w-full mt-1 bg-surface border border-border shadow-lg max-h-60 overflow-auto">
+          {options.map((opt) => (
+            <button
+              key={opt.value}
+              type="button"
+              onClick={() => {
+                onChange(opt.value)
+                setOpen(false)
+              }}
+              className={`w-full flex items-start gap-2 px-3 py-2 text-sm text-left transition-colors ${
+                opt.value === value ? 'bg-accent/5 border-l-2 border-l-accent' : 'hover:bg-bg'
+              }`}
+            >
+              {opt.Icon && <opt.Icon className="w-4 h-4 flex-shrink-0 mt-0.5" />}
+              <div className="min-w-0 flex-1">
+                <div className="truncate">{opt.label}</div>
+                {opt.description && (
+                  <div className="text-xs text-muted truncate">{opt.description}</div>
+                )}
+              </div>
+              {opt.value === value && (
+                <Icons.Check className="w-4 h-4 flex-shrink-0 text-accent" />
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
--- a/frontends/ui/src/Icons.tsx
+++ b/frontends/ui/src/Icons.tsx
@ -0,0 +1,50 @@
+import type { ComponentProps, ReactElement } from 'react'
+
+export type IconProps = ComponentProps<'span'>
+export type IconComponent = (props: IconProps) => ReactElement
+
+function createIcon(className: string): IconComponent {
+  return function Icon(props: IconProps) {
+    return <span {...props} className={`${className}${props.className ? ' ' + props.className : ''}`} />
+  }
+}
+
+export const Icons = {
+  // Navigation
+  Home: createIcon('i-lucide-home'),
+  Settings: createIcon('i-lucide-settings'),
+  ExternalLink: createIcon('i-lucide-external-link'),
+
+  // Actions
+  Plus: createIcon('i-lucide-plus'),
+  Edit: createIcon('i-lucide-pencil'),
+  Trash: createIcon('i-lucide-trash-2'),
+  Copy: createIcon('i-lucide-copy'),
+  Search: createIcon('i-lucide-search'),
+  Close: createIcon('i-lucide-x'),
+  Check: createIcon('i-lucide-check'),
+  Loader: createIcon('i-lucide-loader-2'),
+  Save: createIcon('i-lucide-save'),
+
+  // UI
+  ChevronDown: createIcon('i-lucide-chevron-down'),
+  ChevronUp: createIcon('i-lucide-chevron-up'),
+  ChevronRight: createIcon('i-lucide-chevron-right'),
+  ArrowLeft: createIcon('i-lucide-arrow-left'),
+  ArrowRight: createIcon('i-lucide-arrow-right'),
+  MoreHorizontal: createIcon('i-lucide-more-horizontal'),
+
+  // Status
+  CheckCircle: createIcon('i-lucide-check-circle'),
+  AlertCircle: createIcon('i-lucide-alert-circle'),
+  AlertTriangle: createIcon('i-lucide-alert-triangle'),
+  Info: createIcon('i-lucide-info'),
+
+  // Misc
+  Eye: createIcon('i-lucide-eye'),
+  EyeOff: createIcon('i-lucide-eye-off'),
+  Link: createIcon('i-lucide-link'),
+  Globe: createIcon('i-lucide-globe'),
+} as const
+
+export { createIcon }
--- a/frontends/ui/src/Input.tsx
+++ b/frontends/ui/src/Input.tsx
@ -0,0 +1,50 @@
+import type { InputHTMLAttributes, TextareaHTMLAttributes } from 'react'
+import type { IconComponent } from './Icons'
+
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+  value: string
+  onChange: (value: string) => void
+  Icon?: IconComponent
+}
+
+interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> {
+  value: string
+  onChange: (value: string) => void
+  rows?: number
+}
+
+export function Input({ value, onChange, Icon, className = '', ...props }: InputProps) {
+  if (Icon) {
+    return (
+      <div className="relative">
+        <Icon className="absolute left-3 top-1/2 -translate-y-1/2 text-muted text-sm" />
+        <input
+          className={`input pl-9 ${className}`}
+          value={value}
+          onChange={e => onChange(e.target.value)}
+          {...props}
+        />
+      </div>
+    )
+  }
+  return (
+    <input
+      className={`input ${className}`}
+      value={value}
+      onChange={e => onChange(e.target.value)}
+      {...props}
+    />
+  )
+}
+
+export function Textarea({ value, onChange, rows = 4, className = '', ...props }: TextareaProps) {
+  return (
+    <textarea
+      className={`input resize-none ${className}`}
+      value={value}
+      onChange={e => onChange(e.target.value)}
+      rows={rows}
+      {...props}
+    />
+  )
+}
--- a/Show more
+++ b/Show more