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

package/src/components/ServicesInspector.tsx

@@ -1,66 +1,123 @@
-import { useState } from 'react';
-import { ChevronDown, Server } from 'lucide-react';
+import { useState } from "react";
+import { ChevronDown, Server } from "lucide-react";
 
 export interface ServiceInfo {
   name: string;
   namespace: string;
   procedure: string;
   description: string;
-  parameters: {
-    jsonSchema: Record<string, unknown>;
-  };
+  parameters?: Record<string, unknown>;
 }
 
 interface ServicesInspectorProps {
   namespaces: string[];
   services?: ServiceInfo[];
   /** Custom badge component for rendering the service count */
-  BadgeComponent?: React.ComponentType<{ children: React.ReactNode; variant?: string; className?: string }>;
+  BadgeComponent?: React.ComponentType<{
+    children: React.ReactNode;
+    variant?: string;
+    className?: string;
+  }>;
   /** Custom collapsible components */
-  CollapsibleComponent?: React.ComponentType<{ children: React.ReactNode; defaultOpen?: boolean; className?: string }>;
-  CollapsibleTriggerComponent?: React.ComponentType<{ children: React.ReactNode; className?: string }>;
-  CollapsibleContentComponent?: React.ComponentType<{ children: React.ReactNode }>;
+  CollapsibleComponent?: React.ComponentType<{
+    children: React.ReactNode;
+    defaultOpen?: boolean;
+    className?: string;
+  }>;
+  CollapsibleTriggerComponent?: React.ComponentType<{
+    children: React.ReactNode;
+    className?: string;
+  }>;
+  CollapsibleContentComponent?: React.ComponentType<{
+    children: React.ReactNode;
+  }>;
   /** Custom dialog components */
-  DialogComponent?: React.ComponentType<{ children: React.ReactNode; open?: boolean; onOpenChange?: (open: boolean) => void }>;
+  DialogComponent?: React.ComponentType<{
+    children: React.ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+  }>;
   DialogHeaderComponent?: React.ComponentType<{ children: React.ReactNode }>;
-  DialogContentComponent?: React.ComponentType<{ children: React.ReactNode }>;
+  DialogContentComponent?: React.ComponentType<{
+    children: React.ReactNode;
+    className?: string;
+  }>;
   DialogCloseComponent?: React.ComponentType<{ onClose?: () => void }>;
 }
 
 // Fallback components for when custom UI is not provided
-function DefaultBadge({ children, className = '' }: { children: React.ReactNode; className?: string }) {
+function DefaultBadge({
+  children,
+  className = "",
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
   return (
-    <span className={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 ${className}`}>
+    <span
+      className={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 ${className}`}
+    >
       {children}
     </span>
   );
 }
 
-function DefaultDialog({ children, open, onOpenChange }: { children: React.ReactNode; open?: boolean; onOpenChange?: (open: boolean) => void }) {
+function DefaultDialog({
+  children,
+  open,
+  onOpenChange,
+}: {
+  children: React.ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}) {
   if (!open) return null;
   return (
-    <div className="fixed inset-0 z-50 bg-black/50" onClick={() => onOpenChange?.(false)}>
-      <div className="fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 bg-background p-6 shadow-lg rounded-lg" onClick={e => e.stopPropagation()}>
+    <div
+      className="fixed inset-0 z-50 bg-black/50"
+      onClick={() => onOpenChange?.(false)}
+    >
+      <div
+        className="fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 bg-background p-6 shadow-lg rounded-lg"
+        onClick={(e) => e.stopPropagation()}
+      >
         {children}
       </div>
     </div>
   );
 }
 
-export function ServicesInspector({ 
-  namespaces, 
+export function ServicesInspector({
+  namespaces,
   services = [],
   BadgeComponent = DefaultBadge,
   DialogComponent = DefaultDialog,
+  DialogHeaderComponent = ({ children }) => (
+    <div className="flex justify-between items-center mb-4">{children}</div>
+  ),
+  DialogContentComponent = ({ children, className = "" }) => (
+    <div className={className}>{children}</div>
+  ),
+  DialogCloseComponent = ({ onClose }) => (
+    <button
+      onClick={() => onClose?.()}
+      className="text-muted-foreground hover:text-foreground"
+    >
+      ×
+    </button>
+  ),
 }: ServicesInspectorProps) {
   const [open, setOpen] = useState(false);
 
   if (namespaces.length === 0) return null;
 
-  const groupedServices = services.reduce<Record<string, ServiceInfo[]>>((acc, svc) => {
-    (acc[svc.namespace] ??= []).push(svc);
-    return acc;
-  }, {});
+  const groupedServices = services.reduce<Record<string, ServiceInfo[]>>(
+    (acc, svc) => {
+      (acc[svc.namespace] ??= []).push(svc);
+      return acc;
+    },
+    {},
+  );
 
   return (
     <>
@@ -70,16 +127,16 @@ export function ServicesInspector({
       >
         <Server className="h-4 w-4 text-muted-foreground" />
         <BadgeComponent className="text-xs">
-          {namespaces.length} service{namespaces.length !== 1 ? 's' : ''}
+          {namespaces.length} service{namespaces.length !== 1 ? "s" : ""}
         </BadgeComponent>
       </button>
 
       <DialogComponent open={open} onOpenChange={setOpen}>
-        <div className="flex justify-between items-center mb-4">
+        <DialogHeaderComponent>
           <h2 className="text-lg font-semibold">Available Services</h2>
-          <button onClick={() => setOpen(false)} className="text-muted-foreground hover:text-foreground">×</button>
-        </div>
-        <div className="space-y-3 max-h-96 overflow-auto">
+          <DialogCloseComponent onClose={() => setOpen(false)} />
+        </DialogHeaderComponent>
+        <DialogContentComponent className="space-y-3 max-h-96 overflow-auto">
           {namespaces.map((ns) => (
             <details key={ns} open={namespaces.length === 1}>
               <summary className="flex items-center gap-2 w-full p-2 rounded bg-muted/50 hover:bg-muted transition-colors cursor-pointer">
@@ -87,7 +144,8 @@ export function ServicesInspector({
                 <span className="font-medium text-sm">{ns}</span>
                 {groupedServices[ns] && (
                   <BadgeComponent className="ml-auto text-xs">
-                    {groupedServices[ns].length} tool{groupedServices[ns].length !== 1 ? 's' : ''}
+                    {groupedServices[ns].length} tool
+                    {groupedServices[ns].length !== 1 ? "s" : ""}
                   </BadgeComponent>
                 )}
               </summary>
@@ -95,23 +153,29 @@ export function ServicesInspector({
                 {groupedServices[ns]?.map((svc) => (
                   <details key={svc.name}>
                     <summary className="flex items-center gap-2 w-full text-left text-sm hover:text-foreground text-muted-foreground transition-colors cursor-pointer">
-                      <ChevronDown className="h-3 w-3" />
+                      {svc.parameters && <ChevronDown className="h-3 w-3" />}
                       <code className="font-mono text-xs">{svc.procedure}</code>
-                      <span className="truncate text-xs opacity-70">{svc.description}</span>
+                      <span className="truncate text-xs opacity-70">
+                        {svc.description}
+                      </span>
                     </summary>
-                    <div className="ml-5 mt-1 p-2 rounded border bg-muted/30 overflow-auto max-h-48">
-                      <pre className="text-xs font-mono whitespace-pre-wrap break-words m-0">
-                        {JSON.stringify(svc.parameters.jsonSchema, null, 2)}
-                      </pre>
-                    </div>
+                    {svc.parameters && (
+                      <div className="ml-5 mt-1 p-2 rounded border bg-muted/30 overflow-auto max-h-48">
+                        <pre className="text-xs font-mono whitespace-pre-wrap break-words m-0">
+                          {JSON.stringify(svc.parameters, null, 2)}
+                        </pre>
+                      </div>
+                    )}
                   </details>
                 )) ?? (
-                  <p className="text-xs text-muted-foreground">No tool details available</p>
+                  <p className="text-xs text-muted-foreground">
+                    No tool details available
+                  </p>
                 )}
               </div>
             </details>
           ))}
-        </div>
+        </DialogContentComponent>
       </DialogComponent>
     </>
   );

package/src/components/WidgetPreview.tsx

@@ -0,0 +1,102 @@
+import { useEffect, useRef, useState } from 'react';
+import { AlertCircle, Loader2 } from 'lucide-react';
+import type { Compiler, Manifest, MountedWidget } from '@aprovan/patchwork-compiler';
+
+export interface WidgetPreviewProps {
+  code: string;
+  compiler: Compiler | null;
+  services?: string[];
+  enabled?: boolean;
+}
+
+function createManifest(services?: string[]): Manifest {
+  return {
+    name: 'preview',
+    version: '1.0.0',
+    platform: 'browser',
+    image: '@aprovan/patchwork-image-shadcn',
+    services,
+  };
+}
+
+export function WidgetPreview({
+  code,
+  compiler,
+  services,
+  enabled = true,
+}: WidgetPreviewProps) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const mountedRef = useRef<MountedWidget | null>(null);
+
+  useEffect(() => {
+    if (!enabled || !compiler || !containerRef.current) return;
+
+    let cancelled = false;
+
+    const compileAndMount = async () => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        if (mountedRef.current) {
+          compiler.unmount(mountedRef.current);
+          mountedRef.current = null;
+        }
+
+        const widget = await compiler.compile(code, createManifest(services), {
+          typescript: true,
+        });
+
+        if (cancelled || !containerRef.current) return;
+
+        const mounted = await compiler.mount(widget, {
+          target: containerRef.current,
+          mode: 'embedded',
+        });
+
+        mountedRef.current = mounted;
+      } catch (err) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : 'Failed to render preview');
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    };
+
+    void compileAndMount();
+
+    return () => {
+      cancelled = true;
+      if (mountedRef.current && compiler) {
+        compiler.unmount(mountedRef.current);
+        mountedRef.current = null;
+      }
+    };
+  }, [code, compiler, enabled, services]);
+
+  return (
+    <>
+      {error && (
+        <div className="text-sm text-destructive flex items-center gap-2 p-3">
+          <AlertCircle className="h-4 w-4 shrink-0" />
+          <span>{error}</span>
+        </div>
+      )}
+      {loading && (
+        <div className="p-3 flex items-center gap-2 text-muted-foreground">
+          <Loader2 className="h-4 w-4 animate-spin" />
+          <span className="text-sm">Rendering preview...</span>
+        </div>
+      )}
+      {!compiler && enabled && !loading && !error && (
+        <div className="p-3 text-sm text-muted-foreground">Compiler not initialized</div>
+      )}
+      <div ref={containerRef} className="w-full" />
+    </>
+  );
+}

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>
   );
 }