@aprovan/patchwork-editor 0.1.1-dev.6bd527d → 0.1.2-dev.03aaf5b

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @aprovan/patchwork-editor@0.1.1 build /home/runner/work/patchwork/patchwork/packages/editor
+> @aprovan/patchwork-editor@0.1.2 build /home/runner/work/patchwork/patchwork/packages/editor
 > tsup && tsc --declaration --emitDeclarationOnly --outDir dist --jsx react-jsx --lib ES2022,DOM --skipLibCheck src/index.ts
 
 CLI Building entry: src/index.ts
@@ -9,5 +9,5 @@
 CLI Target: es2022
 CLI Cleaning output folder
 ESM Build start
-ESM dist/index.js 78.44 KB
-ESM ⚡️ Build success in 242ms
+ESM dist/index.js 82.02 KB
+ESM ⚡️ Build success in 233ms

package/dist/index.js

@@ -11,6 +11,7 @@ import Placeholder from '@tiptap/extension-placeholder';
 import Typography from '@tiptap/extension-typography';
 import { Markdown as Markdown$1 } from 'tiptap-markdown';
 import { TextSelection } from '@tiptap/pm/state';
+import { createHighlighter } from 'shiki';
 import { Bobbin, serializeChangesToYAML } from '@aprovan/bobbin';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -1066,7 +1067,7 @@ function TreeNodeComponent({ node, activeFile, onSelect, onReplaceFile, depth =
                 "span",
                 {
                   onClick: handleUploadClick,
-                  className: "p-0.5 hover:bg-primary/20 rounded cursor-pointer",
+                  className: "p-1 hover:bg-primary/20 rounded cursor-pointer",
                   title: "Replace file",
                   children: /* @__PURE__ */ jsx(Upload, { className: "h-3 w-3 text-primary" })
                 }
@@ -1152,8 +1153,68 @@ function SaveConfirmDialog({
     ] })
   ] }) });
 }
+var highlighterPromise = null;
+var COMMON_LANGUAGES = [
+  "typescript",
+  "javascript",
+  "tsx",
+  "jsx",
+  "json",
+  "html",
+  "css",
+  "markdown",
+  "yaml",
+  "python",
+  "bash",
+  "sql"
+];
+function getHighlighter() {
+  if (!highlighterPromise) {
+    highlighterPromise = createHighlighter({
+      themes: ["github-light"],
+      langs: COMMON_LANGUAGES
+    });
+  }
+  return highlighterPromise;
+}
+function normalizeLanguage(lang) {
+  if (!lang) return "typescript";
+  const normalized = lang.toLowerCase();
+  const mapping = {
+    ts: "typescript",
+    tsx: "tsx",
+    js: "javascript",
+    jsx: "jsx",
+    json: "json",
+    html: "html",
+    css: "css",
+    md: "markdown",
+    markdown: "markdown",
+    yml: "yaml",
+    yaml: "yaml",
+    py: "python",
+    python: "python",
+    sh: "bash",
+    bash: "bash",
+    sql: "sql",
+    typescript: "typescript",
+    javascript: "javascript"
+  };
+  return mapping[normalized] || "typescript";
+}
 function CodeBlockView({ content, language, editable = false, onChange }) {
   const textareaRef = useRef(null);
+  const containerRef = useRef(null);
+  const [highlighter, setHighlighter] = useState(null);
+  useEffect(() => {
+    let mounted = true;
+    getHighlighter().then((h) => {
+      if (mounted) setHighlighter(h);
+    });
+    return () => {
+      mounted = false;
+    };
+  }, []);
   useEffect(() => {
     if (textareaRef.current) {
       textareaRef.current.style.height = "auto";
@@ -1184,23 +1245,60 @@ function CodeBlockView({ content, language, editable = false, onChange }) {
     [onChange]
   );
   const langLabel = language || "text";
-  return /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col bg-muted/10", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between px-4 py-2 bg-muted/30 border-b text-xs", children: /* @__PURE__ */ jsx("span", { className: "font-mono text-muted-foreground", children: langLabel }) }),
-    editable ? /* @__PURE__ */ jsx(
-      "textarea",
-      {
-        ref: textareaRef,
-        value: content,
-        onChange: handleChange,
-        onKeyDown: handleKeyDown,
-        className: "w-full min-h-full font-mono text-xs leading-relaxed bg-transparent border-none outline-none resize-none",
-        spellCheck: false,
-        style: {
-          tabSize: 2,
-          WebkitTextFillColor: "inherit"
+  const shikiLang = useMemo(() => normalizeLanguage(language), [language]);
+  const highlightedHtml = useMemo(() => {
+    if (!highlighter) return null;
+    try {
+      return highlighter.codeToHtml(content, {
+        lang: shikiLang,
+        theme: "github-light"
+      });
+    } catch {
+      return null;
+    }
+  }, [highlighter, content, shikiLang]);
+  return /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col bg-[#ffffff]", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between px-4 py-2 bg-[#f6f8fa] border-b border-[#d0d7de] text-xs", children: /* @__PURE__ */ jsx("span", { className: "font-mono text-[#57606a]", children: langLabel }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto overflow-x-hidden", children: editable ? /* @__PURE__ */ jsxs("div", { className: "relative min-h-full", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: containerRef,
+          className: "absolute top-0 left-0 right-0 pointer-events-none p-4",
+          "aria-hidden": "true",
+          children: highlightedHtml ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "highlighted-code font-mono text-xs leading-relaxed whitespace-pre-wrap break-words [&_pre]:!bg-transparent [&_pre]:!m-0 [&_pre]:!p-0 [&_pre]:whitespace-pre-wrap [&_code]:!bg-transparent [&_code]:whitespace-pre-wrap [&_code]:break-words",
+              dangerouslySetInnerHTML: { __html: highlightedHtml }
+            }
+          ) : /* @__PURE__ */ jsx("pre", { className: "text-xs font-mono whitespace-pre-wrap break-words text-[#24292f] m-0 leading-relaxed", children: /* @__PURE__ */ jsx("code", { children: content }) })
         }
+      ),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref: textareaRef,
+          value: content,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown,
+          className: "relative w-full min-h-full font-mono text-xs leading-relaxed bg-transparent border-none outline-none resize-none p-4 text-transparent whitespace-pre-wrap break-words",
+          spellCheck: false,
+          style: {
+            tabSize: 2,
+            caretColor: "#24292f",
+            wordBreak: "break-word",
+            overflowWrap: "break-word"
+          }
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx("div", { className: "p-4", children: highlightedHtml ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "highlighted-code font-mono text-xs leading-relaxed whitespace-pre-wrap break-words [&_pre]:!bg-transparent [&_pre]:!m-0 [&_pre]:!p-0 [&_pre]:whitespace-pre-wrap [&_code]:!bg-transparent [&_code]:whitespace-pre-wrap [&_code]:break-words",
+        dangerouslySetInnerHTML: { __html: highlightedHtml }
       }
-    ) : /* @__PURE__ */ jsx("pre", { className: "text-xs font-mono whitespace-pre-wrap break-words m-0 leading-relaxed", children: /* @__PURE__ */ jsx("code", { children: content }) })
+    ) : /* @__PURE__ */ jsx("pre", { className: "text-xs font-mono whitespace-pre-wrap break-words m-0 leading-relaxed text-[#24292f]", children: /* @__PURE__ */ jsx("code", { children: content }) }) }) })
   ] });
 }
 function formatFileSize(bytes) {
@@ -1208,10 +1306,16 @@ function formatFileSize(bytes) {
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
+function isUrl(content) {
+  return content.startsWith("/") || content.startsWith("http://") || content.startsWith("https://") || content.startsWith("./") || content.startsWith("../");
+}
 function getDataUrl(content, mimeType) {
   if (content.startsWith("data:")) {
     return content;
   }
+  if (isUrl(content)) {
+    return content;
+  }
   return `data:${mimeType};base64,${content}`;
 }
 function MediaPreview({ content, mimeType, fileName }) {
@@ -1220,8 +1324,8 @@ function MediaPreview({ content, mimeType, fileName }) {
   const dataUrl = getDataUrl(content, mimeType);
   const isImage = isImageFile(fileName);
   const isVideo = isVideoFile(fileName);
-  content.length;
-  const estimatedBytes = content.startsWith("data:") ? Math.floor((content.split(",")[1]?.length ?? 0) * 0.75) : Math.floor(content.length * 0.75);
+  const isUrlContent = isUrl(content);
+  const estimatedBytes = isUrlContent ? null : content.startsWith("data:") ? Math.floor((content.split(",")[1]?.length ?? 0) * 0.75) : Math.floor(content.length * 0.75);
   useEffect(() => {
     setDimensions(null);
     setError(null);
@@ -1281,7 +1385,7 @@ function MediaPreview({ content, mimeType, fileName }) {
           dimensions.height,
           " px"
         ] }),
-        /* @__PURE__ */ jsx("span", { children: formatFileSize(estimatedBytes) }),
+        estimatedBytes !== null && /* @__PURE__ */ jsx("span", { children: formatFileSize(estimatedBytes) }),
         /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60", children: mimeType })
       ] })
     ] })
@@ -1315,6 +1419,7 @@ function EditModal({
   const [editInput, setEditInput] = useState("");
   const [bobbinChanges, setBobbinChanges] = useState([]);
   const [previewContainer, setPreviewContainer] = useState(null);
+  const [pillContainer, setPillContainer] = useState(null);
   const [showConfirm, setShowConfirm] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
   const [saveError, setSaveError] = useState(null);
@@ -1488,7 +1593,7 @@ ${bobbinYaml}
             onReplaceFile: session.replaceFile
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children: fileType.category === "compilable" && showPreview ? /* @__PURE__ */ jsxs("div", { className: "bg-white h-full relative", ref: setPreviewContainer, children: [
+        /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", ref: setPillContainer, children: fileType.category === "compilable" && showPreview ? /* @__PURE__ */ jsxs("div", { className: "bg-white h-full relative", ref: setPreviewContainer, children: [
           previewError && renderError ? renderError(previewError) : previewError ? /* @__PURE__ */ jsxs("div", { className: "p-4 text-sm text-destructive flex items-center gap-2", children: [
             /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4 shrink-0" }),
             /* @__PURE__ */ jsx("span", { children: previewError })
@@ -1500,7 +1605,7 @@ ${bobbinYaml}
             Bobbin,
             {
               container: previewContainer,
-              pillContainer: previewContainer,
+              pillContainer,
               defaultActive: false,
               showInspector: true,
               onChanges: handleBobbinChanges,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aprovan/patchwork-editor",
-  "version": "0.1.1-dev.6bd527d",
+  "version": "0.1.2-dev.03aaf5b",
   "description": "Components for facilitating widget generation and editing",
   "type": "module",
   "main": "./dist/index.js",
@@ -22,10 +22,11 @@
     "lucide-react": "^0.511.0",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
+    "shiki": "^3.22.0",
     "tailwind-merge": "^3.4.0",
     "tiptap-markdown": "^0.9.0",
-    "@aprovan/bobbin": "0.1.0-dev.6bd527d",
-    "@aprovan/patchwork-compiler": "0.1.2-dev.6bd527d"
+    "@aprovan/bobbin": "0.1.0-dev.03aaf5b",
+    "@aprovan/patchwork-compiler": "0.1.2-dev.03aaf5b"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/components/edit/CodeBlockView.tsx

@@ -1,4 +1,60 @@
-import { useCallback, useRef, useEffect } from 'react';
+import { useCallback, useRef, useEffect, useState, useMemo } from 'react';
+import { createHighlighter, type Highlighter, type BundledLanguage } from 'shiki';
+
+// Singleton highlighter instance
+let highlighterPromise: Promise<Highlighter> | null = null;
+
+const COMMON_LANGUAGES: BundledLanguage[] = [
+  'typescript',
+  'javascript',
+  'tsx',
+  'jsx',
+  'json',
+  'html',
+  'css',
+  'markdown',
+  'yaml',
+  'python',
+  'bash',
+  'sql',
+];
+
+function getHighlighter(): Promise<Highlighter> {
+  if (!highlighterPromise) {
+    highlighterPromise = createHighlighter({
+      themes: ['github-light'],
+      langs: COMMON_LANGUAGES,
+    });
+  }
+  return highlighterPromise;
+}
+
+// Map common file extensions/language names to shiki language identifiers
+function normalizeLanguage(lang: string | null): BundledLanguage {
+  if (!lang) return 'typescript';
+  const normalized = lang.toLowerCase();
+  const mapping: Record<string, BundledLanguage> = {
+    ts: 'typescript',
+    tsx: 'tsx',
+    js: 'javascript',
+    jsx: 'jsx',
+    json: 'json',
+    html: 'html',
+    css: 'css',
+    md: 'markdown',
+    markdown: 'markdown',
+    yml: 'yaml',
+    yaml: 'yaml',
+    py: 'python',
+    python: 'python',
+    sh: 'bash',
+    bash: 'bash',
+    sql: 'sql',
+    typescript: 'typescript',
+    javascript: 'javascript',
+  };
+  return mapping[normalized] || 'typescript';
+}
 
 export interface CodeBlockViewProps {
   content: string;
@@ -9,7 +65,19 @@ export interface CodeBlockViewProps {
 
 export function CodeBlockView({ content, language, editable = false, onChange }: CodeBlockViewProps) {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [highlighter, setHighlighter] = useState<Highlighter | null>(null);
 
+  // Load the highlighter
+  useEffect(() => {
+    let mounted = true;
+    getHighlighter().then((h) => {
+      if (mounted) setHighlighter(h);
+    });
+    return () => { mounted = false; };
+  }, []);
+
+  // Auto-resize textarea
   useEffect(() => {
     if (textareaRef.current) {
       textareaRef.current.style.height = 'auto';
@@ -43,30 +111,78 @@ export function CodeBlockView({ content, language, editable = false, onChange }:
   );
 
   const langLabel = language || 'text';
+  const shikiLang = useMemo(() => normalizeLanguage(language), [language]);
+
+  // Generate highlighted HTML
+  const highlightedHtml = useMemo(() => {
+    if (!highlighter) return null;
+    try {
+      return highlighter.codeToHtml(content, {
+        lang: shikiLang,
+        theme: 'github-light',
+      });
+    } catch {
+      // Fallback if language is not supported
+      return null;
+    }
+  }, [highlighter, content, shikiLang]);
 
   return (
-    <div className="h-full flex flex-col bg-muted/10">
-      <div className="flex items-center justify-between px-4 py-2 bg-muted/30 border-b text-xs">
-        <span className="font-mono text-muted-foreground">{langLabel}</span>
+    <div className="h-full flex flex-col bg-[#ffffff]">
+      <div className="flex items-center justify-between px-4 py-2 bg-[#f6f8fa] border-b border-[#d0d7de] text-xs">
+        <span className="font-mono text-[#57606a]">{langLabel}</span>
       </div>
+      <div className="flex-1 overflow-y-auto overflow-x-hidden">
         {editable ? (
-          <textarea
-            ref={textareaRef}
-            value={content}
-            onChange={handleChange}
-            onKeyDown={handleKeyDown}
-            className="w-full min-h-full font-mono text-xs leading-relaxed bg-transparent border-none outline-none resize-none"
-            spellCheck={false}
-            style={{
-              tabSize: 2,
-              WebkitTextFillColor: 'inherit',
-            }}
-          />
+          <div className="relative min-h-full">
+            {/* Highlighted code layer (background) - scrolls with content */}
+            <div
+              ref={containerRef}
+              className="absolute top-0 left-0 right-0 pointer-events-none p-4"
+              aria-hidden="true"
+            >
+              {highlightedHtml ? (
+                <div
+                  className="highlighted-code font-mono text-xs leading-relaxed whitespace-pre-wrap break-words [&_pre]:!bg-transparent [&_pre]:!m-0 [&_pre]:!p-0 [&_pre]:whitespace-pre-wrap [&_code]:!bg-transparent [&_code]:whitespace-pre-wrap [&_code]:break-words"
+                  dangerouslySetInnerHTML={{ __html: highlightedHtml }}
+                />
+              ) : (
+                <pre className="text-xs font-mono whitespace-pre-wrap break-words text-[#24292f] m-0 leading-relaxed">
+                  <code>{content}</code>
+                </pre>
+              )}
+            </div>
+            {/* Editable textarea layer (foreground) */}
+            <textarea
+              ref={textareaRef}
+              value={content}
+              onChange={handleChange}
+              onKeyDown={handleKeyDown}
+              className="relative w-full min-h-full font-mono text-xs leading-relaxed bg-transparent border-none outline-none resize-none p-4 text-transparent whitespace-pre-wrap break-words"
+              spellCheck={false}
+              style={{
+                tabSize: 2,
+                caretColor: '#24292f',
+                wordBreak: 'break-word',
+                overflowWrap: 'break-word',
+              }}
+            />
+          </div>
         ) : (
-          <pre className="text-xs font-mono whitespace-pre-wrap break-words m-0 leading-relaxed">
-            <code>{content}</code>
-          </pre>
+          <div className="p-4">
+            {highlightedHtml ? (
+              <div
+                className="highlighted-code font-mono text-xs leading-relaxed whitespace-pre-wrap break-words [&_pre]:!bg-transparent [&_pre]:!m-0 [&_pre]:!p-0 [&_pre]:whitespace-pre-wrap [&_code]:!bg-transparent [&_code]:whitespace-pre-wrap [&_code]:break-words"
+                dangerouslySetInnerHTML={{ __html: highlightedHtml }}
+              />
+            ) : (
+              <pre className="text-xs font-mono whitespace-pre-wrap break-words m-0 leading-relaxed text-[#24292f]">
+                <code>{content}</code>
+              </pre>
+            )}
+          </div>
         )}
+      </div>
     </div>
   );
 }

package/src/components/edit/EditModal.tsx

@@ -72,6 +72,7 @@ export function EditModal({
   const [editInput, setEditInput] = useState('');
   const [bobbinChanges, setBobbinChanges] = useState<Change[]>([]);
   const [previewContainer, setPreviewContainer] = useState<HTMLDivElement | null>(null);
+  const [pillContainer, setPillContainer] = useState<HTMLDivElement | null>(null);
   const [showConfirm, setShowConfirm] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
   const [saveError, setSaveError] = useState<string | null>(null);
@@ -256,7 +257,7 @@ export function EditModal({
               onReplaceFile={session.replaceFile}
             />
           )}
-          <div className="flex-1 overflow-auto">
+          <div className="flex-1 overflow-auto" ref={setPillContainer}>
             {fileType.category === 'compilable' && showPreview ? (
               <div className="bg-white h-full relative" ref={setPreviewContainer}>
                 {previewError && renderError ? (
@@ -278,7 +279,7 @@ export function EditModal({
                 )}
                 {!renderLoading && !renderError && !previewLoading && <Bobbin
                   container={previewContainer}
-                  pillContainer={previewContainer}
+                  pillContainer={pillContainer}
                   defaultActive={false}
                   showInspector
                   onChanges={handleBobbinChanges}

package/src/components/edit/FileTree.tsx

@@ -150,7 +150,7 @@ function TreeNodeComponent({ node, activeFile, onSelect, onReplaceFile, depth =
         {showUpload && (
           <span
             onClick={handleUploadClick}
-            className="p-0.5 hover:bg-primary/20 rounded cursor-pointer"
+            className="p-1 hover:bg-primary/20 rounded cursor-pointer"
             title="Replace file"
           >
             <Upload className="h-3 w-3 text-primary" />

package/src/components/edit/MediaPreview.tsx

@@ -14,10 +14,25 @@ function formatFileSize(bytes: number): string {
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
 
+function isUrl(content: string): boolean {
+  // Check if content is a URL (absolute or relative path)
+  return content.startsWith('/') ||
+    content.startsWith('http://') ||
+    content.startsWith('https://') ||
+    content.startsWith('./') ||
+    content.startsWith('../');
+}
+
 function getDataUrl(content: string, mimeType: string): string {
+  // If already a data URL, return as-is
   if (content.startsWith('data:')) {
     return content;
   }
+  // If content is a URL path, return it directly (browser can fetch it)
+  if (isUrl(content)) {
+    return content;
+  }
+  // Otherwise, treat as raw base64 data and construct a data URL
   return `data:${mimeType};base64,${content}`;
 }
 
@@ -28,10 +43,13 @@ export function MediaPreview({ content, mimeType, fileName }: MediaPreviewProps)
   const dataUrl = getDataUrl(content, mimeType);
   const isImage = isImageFile(fileName);
   const isVideo = isVideoFile(fileName);
-  const contentSize = content.length;
-  const estimatedBytes = content.startsWith('data:')
-    ? Math.floor((content.split(',')[1]?.length ?? 0) * 0.75)
-    : Math.floor(content.length * 0.75);
+  // For URLs, we can't estimate file size from the string
+  const isUrlContent = isUrl(content);
+  const estimatedBytes = isUrlContent
+    ? null
+    : content.startsWith('data:')
+      ? Math.floor((content.split(',')[1]?.length ?? 0) * 0.75)
+      : Math.floor(content.length * 0.75);
 
   useEffect(() => {
     setDimensions(null);
@@ -97,7 +115,7 @@ export function MediaPreview({ content, mimeType, fileName }: MediaPreviewProps)
           {dimensions && (
             <span>{dimensions.width} × {dimensions.height} px</span>
           )}
-          <span>{formatFileSize(estimatedBytes)}</span>
+          {estimatedBytes !== null && <span>{formatFileSize(estimatedBytes)}</span>}
           <span className="text-muted-foreground/60">{mimeType}</span>
         </div>
       </div>