kanban-lite 1.0.4

package/src/webview/assets/main.css

@@ -0,0 +1,329 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  font-family: var(--vscode-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
+  font-size: var(--vscode-font-size, 13px);
+  color: var(--vscode-foreground);
+  background-color: var(--vscode-editor-background);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#root {
+  height: 100%;
+  width: 100%;
+}
+
+/* Custom scrollbar that matches VSCode */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--vscode-scrollbarSlider-background);
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--vscode-scrollbarSlider-hoverBackground);
+}
+
+::-webkit-scrollbar-thumb:active {
+  background: var(--vscode-scrollbarSlider-activeBackground);
+}
+
+/* Hover background matching VSCode theme */
+.vscode-hover-bg:hover {
+  background: var(--vscode-list-hoverBackground);
+}
+
+/* Focus visible for accessibility */
+button:focus-visible,
+input:focus-visible {
+  outline: 1px solid var(--vscode-focusBorder);
+  outline-offset: -1px;
+}
+
+/* Tiptap Editor Styles */
+.ProseMirror {
+  outline: none;
+}
+
+.ProseMirror p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: var(--vscode-input-placeholderForeground);
+  pointer-events: none;
+  height: 0;
+}
+
+/* Prose (markdown) styling for editor */
+.prose {
+  line-height: 1.625;
+}
+
+.prose h1 {
+  font-size: 1.875rem;
+  font-weight: 700;
+  margin-top: 0;
+  margin-bottom: 0.875rem;
+  line-height: 1.2;
+}
+
+.prose h2 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-top: 1.5rem;
+  margin-bottom: 0.75rem;
+  line-height: 1.3;
+}
+
+.prose h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-top: 1.25rem;
+  margin-bottom: 0.5rem;
+  line-height: 1.4;
+}
+
+.prose h4 {
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+}
+
+.prose p {
+  margin-top: 0;
+  margin-bottom: 0.75rem;
+}
+
+.prose ul,
+.prose ol {
+  margin-top: 0.5rem;
+  margin-bottom: 0.75rem;
+  padding-left: 1.5rem;
+}
+
+.prose ul {
+  list-style-type: disc;
+}
+
+.prose ol {
+  list-style-type: decimal;
+}
+
+.prose li {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.prose li > p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.prose li > ul,
+.prose li > ol {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.prose blockquote {
+  border-left: 3px solid var(--vscode-textBlockQuote-border, #4b5563);
+  padding-left: 1rem;
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+  font-style: italic;
+  color: var(--vscode-textBlockQuote-foreground, inherit);
+}
+
+.prose code {
+  font-family: var(--vscode-editor-font-family, 'SF Mono', Monaco, Menlo, Consolas, monospace);
+  font-size: 0.875em;
+  background-color: var(--vscode-textCodeBlock-background, rgba(127, 127, 127, 0.15));
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+}
+
+.prose pre {
+  font-family: var(--vscode-editor-font-family, 'SF Mono', Monaco, Menlo, Consolas, monospace);
+  font-size: 0.875em;
+  background-color: var(--vscode-textCodeBlock-background, rgba(127, 127, 127, 0.1));
+  padding: 0.75rem 1rem;
+  border-radius: 0.375rem;
+  overflow-x: auto;
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.prose pre code {
+  background-color: transparent;
+  padding: 0;
+  border-radius: 0;
+  font-size: inherit;
+}
+
+.prose hr {
+  border: none;
+  border-top: 1px solid var(--vscode-panel-border, #4b5563);
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.prose a {
+  color: var(--vscode-textLink-foreground, #3b82f6);
+  text-decoration: underline;
+}
+
+.prose a:hover {
+  color: var(--vscode-textLink-activeForeground, #60a5fa);
+}
+
+.prose strong {
+  font-weight: 600;
+}
+
+.prose em {
+  font-style: italic;
+}
+
+.prose img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 0.375rem;
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+/* Task list styling */
+.prose ul[data-type="taskList"] {
+  list-style: none;
+  padding-left: 0;
+}
+
+.prose ul[data-type="taskList"] li {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+
+.prose ul[data-type="taskList"] li > label {
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+}
+
+.prose ul[data-type="taskList"] li > div {
+  flex: 1;
+}
+
+/* Table styling */
+.prose table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.prose th,
+.prose td {
+  border: 1px solid var(--vscode-panel-border, #4b5563);
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+}
+
+.prose th {
+  font-weight: 600;
+  background-color: var(--vscode-editor-inactiveSelectionBackground, rgba(127, 127, 127, 0.1));
+}
+
+/* Selection styling */
+.ProseMirror ::selection {
+  background-color: var(--vscode-editor-selectionBackground, rgba(59, 130, 246, 0.3));
+}
+
+/* Strikethrough */
+.prose s,
+.prose del {
+  text-decoration: line-through;
+  opacity: 0.7;
+}
+
+/* Markdown Editor textarea */
+.markdown-editor-textarea {
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+  padding: 1rem;
+  margin: 0;
+  border: none;
+  outline: none;
+  resize: none;
+  background: transparent;
+  color: var(--vscode-foreground);
+  font-family: var(--vscode-editor-font-family, 'SF Mono', Monaco, Menlo, Consolas, monospace);
+  font-size: var(--vscode-editor-font-size, 13px);
+  line-height: 1.6;
+  tab-size: 2;
+}
+
+.markdown-editor-textarea::placeholder {
+  color: var(--vscode-input-placeholderForeground);
+}
+
+/* Card inline markdown description */
+.card-inline-markdown code {
+  font-family: var(--vscode-editor-font-family, 'SF Mono', Monaco, Menlo, Consolas, monospace);
+  font-size: 0.85em;
+  padding: 0.1em 0.3em;
+  border-radius: 0.2em;
+  background-color: rgba(127, 127, 127, 0.15);
+}
+
+.card-inline-markdown p {
+  margin: 0;
+}
+
+.card-inline-markdown ul,
+.card-inline-markdown ol {
+  margin: 0.25em 0;
+  padding-left: 1.25em;
+}
+
+.card-inline-markdown li {
+  margin: 0;
+}
+
+.card-inline-markdown li p {
+  margin: 0;
+}
+
+.card-inline-markdown h1,
+.card-inline-markdown h2,
+.card-inline-markdown h3,
+.card-inline-markdown h4,
+.card-inline-markdown h5,
+.card-inline-markdown h6 {
+  font-size: inherit;
+  font-weight: 600;
+  margin: 0;
+}

package/src/webview/assets/standalone-theme.css

@@ -0,0 +1,130 @@
+/* Standalone theme: provides fallback values for --vscode-* CSS variables */
+
+:root {
+  /* Core */
+  --vscode-foreground: #333333;
+  --vscode-descriptionForeground: #717171;
+  --vscode-errorForeground: #e51400;
+  --vscode-focusBorder: #0078d4;
+  --vscode-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --vscode-font-size: 13px;
+
+  /* Editor */
+  --vscode-editor-background: #ffffff;
+  --vscode-editor-foreground: #333333;
+  --vscode-editor-font-family: 'SF Mono', Monaco, Menlo, Consolas, 'Courier New', monospace;
+  --vscode-editor-selectionBackground: rgba(59, 130, 246, 0.2);
+  --vscode-editor-inactiveSelectionBackground: rgba(127, 127, 127, 0.1);
+
+  /* Panel / Borders */
+  --vscode-panel-border: #e0e0e0;
+  --vscode-contrastBorder: transparent;
+  --vscode-widget-border: #e0e0e0;
+
+  /* Sidebar */
+  --vscode-sideBar-background: #f3f3f3;
+
+  /* Lists */
+  --vscode-list-hoverBackground: rgba(0, 0, 0, 0.04);
+  --vscode-list-activeSelectionBackground: rgba(0, 120, 212, 0.1);
+
+  /* Buttons */
+  --vscode-button-background: #0078d4;
+  --vscode-button-foreground: #ffffff;
+  --vscode-button-hoverBackground: #106ebe;
+
+  /* Badges */
+  --vscode-badge-background: #e0e0e0;
+  --vscode-badge-foreground: #333333;
+
+  /* Dropdowns */
+  --vscode-dropdown-background: #ffffff;
+  --vscode-dropdown-foreground: #333333;
+  --vscode-dropdown-border: #e0e0e0;
+
+  /* Input */
+  --vscode-input-placeholderForeground: #a0a0a0;
+
+  /* Scrollbar */
+  --vscode-scrollbarSlider-background: rgba(0, 0, 0, 0.1);
+  --vscode-scrollbarSlider-hoverBackground: rgba(0, 0, 0, 0.2);
+  --vscode-scrollbarSlider-activeBackground: rgba(0, 0, 0, 0.3);
+
+  /* Links */
+  --vscode-textLink-foreground: #0078d4;
+  --vscode-textLink-activeForeground: #005a9e;
+
+  /* Code blocks */
+  --vscode-textCodeBlock-background: rgba(0, 0, 0, 0.04);
+  --vscode-textBlockQuote-border: #d0d0d0;
+  --vscode-textBlockQuote-foreground: inherit;
+
+  /* Notifications */
+  --vscode-notifications-background: #ffffff;
+  --vscode-notifications-foreground: #333333;
+  --vscode-notifications-border: #e0e0e0;
+
+  /* Progress */
+  --vscode-progressBar-background: #0078d4;
+
+  /* Keybindings */
+  --vscode-keybindingLabel-background: #f0f0f0;
+  --vscode-keybindingLabel-foreground: #333333;
+  --vscode-keybindingLabel-border: #d0d0d0;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --vscode-foreground: #cccccc;
+    --vscode-descriptionForeground: #9e9e9e;
+    --vscode-errorForeground: #f48771;
+    --vscode-focusBorder: #007fd4;
+
+    --vscode-editor-background: #1e1e1e;
+    --vscode-editor-foreground: #cccccc;
+    --vscode-editor-selectionBackground: rgba(59, 130, 246, 0.3);
+    --vscode-editor-inactiveSelectionBackground: rgba(127, 127, 127, 0.15);
+
+    --vscode-panel-border: #3c3c3c;
+    --vscode-widget-border: #3c3c3c;
+
+    --vscode-sideBar-background: #252526;
+
+    --vscode-list-hoverBackground: rgba(255, 255, 255, 0.04);
+    --vscode-list-activeSelectionBackground: rgba(0, 120, 212, 0.2);
+
+    --vscode-button-background: #0e639c;
+    --vscode-button-foreground: #ffffff;
+    --vscode-button-hoverBackground: #1177bb;
+
+    --vscode-badge-background: #4d4d4d;
+    --vscode-badge-foreground: #cccccc;
+
+    --vscode-dropdown-background: #3c3c3c;
+    --vscode-dropdown-foreground: #cccccc;
+    --vscode-dropdown-border: #3c3c3c;
+
+    --vscode-input-placeholderForeground: #6e6e6e;
+
+    --vscode-scrollbarSlider-background: rgba(255, 255, 255, 0.1);
+    --vscode-scrollbarSlider-hoverBackground: rgba(255, 255, 255, 0.2);
+    --vscode-scrollbarSlider-activeBackground: rgba(255, 255, 255, 0.3);
+
+    --vscode-textLink-foreground: #3794ff;
+    --vscode-textLink-activeForeground: #3794ff;
+
+    --vscode-textCodeBlock-background: rgba(255, 255, 255, 0.06);
+    --vscode-textBlockQuote-border: #4b5563;
+
+    --vscode-notifications-background: #252526;
+    --vscode-notifications-foreground: #cccccc;
+    --vscode-notifications-border: #3c3c3c;
+
+    --vscode-progressBar-background: #0e70c0;
+
+    --vscode-keybindingLabel-background: #3c3c3c;
+    --vscode-keybindingLabel-foreground: #cccccc;
+    --vscode-keybindingLabel-border: #4d4d4d;
+  }
+}

package/src/webview/components/ColumnDialog.tsx

@@ -0,0 +1,119 @@
+import { useState, useEffect, useRef } from 'react'
+import { X } from 'lucide-react'
+
+const PRESET_COLORS = [
+  '#6b7280', '#3b82f6', '#f59e0b', '#8b5cf6', '#22c55e',
+  '#ef4444', '#ec4899', '#14b8a6', '#f97316', '#06b6d4'
+]
+
+interface ColumnDialogProps {
+  isOpen: boolean
+  onClose: () => void
+  onSave: (data: { name: string; color: string }) => void
+  initial?: { name: string; color: string }
+  title: string
+}
+
+export function ColumnDialog({ isOpen, onClose, onSave, initial, title }: ColumnDialogProps) {
+  const [name, setName] = useState(initial?.name ?? '')
+  const [color, setColor] = useState(initial?.color ?? '#3b82f6')
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (isOpen) {
+      setName(initial?.name ?? '')
+      setColor(initial?.color ?? '#3b82f6')
+      setTimeout(() => inputRef.current?.focus(), 50)
+    }
+  }, [isOpen, initial])
+
+  useEffect(() => {
+    if (!isOpen) return
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+      if (e.key === 'Enter' && (e.ctrlKey || e.metaKey) && name.trim()) {
+        onSave({ name: name.trim(), color })
+      }
+    }
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [isOpen, onClose, onSave, name, color])
+
+  if (!isOpen) return null
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="absolute inset-0 bg-black/50" onClick={onClose} />
+      <div className="relative bg-white dark:bg-zinc-800 rounded-lg shadow-xl w-full max-w-sm mx-4 border border-zinc-200 dark:border-zinc-600">
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b border-zinc-200 dark:border-zinc-700">
+          <h2 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">{title}</h2>
+          <button
+            type="button"
+            onClick={onClose}
+            className="p-1 rounded hover:bg-zinc-100 dark:hover:bg-zinc-700 transition-colors"
+          >
+            <X size={16} className="text-zinc-500" />
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="px-4 py-4 space-y-4">
+          <div>
+            <label className="block text-xs font-medium text-zinc-600 dark:text-zinc-400 mb-1">Name</label>
+            <input
+              ref={inputRef}
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="List name..."
+              className="w-full px-3 py-1.5 text-sm bg-white dark:bg-zinc-700 border border-zinc-200 dark:border-zinc-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-zinc-900 dark:text-zinc-100 placeholder-zinc-400"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs font-medium text-zinc-600 dark:text-zinc-400 mb-1">Color</label>
+            <div className="flex items-center gap-2 flex-wrap">
+              {PRESET_COLORS.map((c) => (
+                <button
+                  key={c}
+                  type="button"
+                  onClick={() => setColor(c)}
+                  className={`w-6 h-6 rounded-full border-2 transition-all ${color === c ? 'border-zinc-900 dark:border-white scale-110' : 'border-transparent hover:scale-110'}`}
+                  style={{ backgroundColor: c }}
+                  title={c}
+                />
+              ))}
+              <input
+                type="color"
+                value={color}
+                onChange={(e) => setColor(e.target.value)}
+                className="w-6 h-6 rounded cursor-pointer border-0 p-0 bg-transparent"
+                title="Custom color"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-end gap-2 px-4 py-3 border-t border-zinc-200 dark:border-zinc-700">
+          <button
+            type="button"
+            onClick={onClose}
+            className="px-3 py-1.5 text-sm rounded-md text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-700 transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={() => { if (name.trim()) onSave({ name: name.trim(), color }) }}
+            disabled={!name.trim()}
+            className="px-3 py-1.5 text-sm rounded-md bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            Save
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}