Polish export and metadata surfaces

docs-site/astro.config.mjs

@@ -6,7 +6,7 @@ export default defineConfig({
   site: 'https://docs.openflowkit.com',
   integrations: [
     starlight({
-      title: 'OpenFlowKit Docs',
+      title: 'OpenFlowKit | Free Local-First AI Diagramming for Builders',
       description: 'Documentation for OpenFlowKit — the local-first, AI-powered diagramming tool.',
       favicon: '/favicon.svg',
       logo: {

docs-site/src/pages/index.astro

@@ -64,7 +64,7 @@ const referenceLinks = [
 <StarlightPage
   hasSidebar={false}
   frontmatter={{
-    title: 'OpenFlowKit Docs',
+    title: 'OpenFlowKit | Free Local-First AI Diagramming for Builders',
     description: 'The fastest way to learn OpenFlowKit without getting lost in the full page tree.',
     template: 'splash',
   }}

index.html

@@ -5,7 +5,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta name="theme-color" content="#2563eb" />
-  <title>OpenFlowKit — Free Open-Source Diagram Tool for Developers</title>
+  <title>OpenFlowKit | Free Local-First AI Diagramming for Builders</title>
   <meta name="description"
     content="Create beautiful diagrams for free. Open-source tool with AI, Mermaid.js support, Figma export, and one-click auto-layout. No signup required." />
   <meta name="keywords"
@@ -17,18 +17,20 @@
   <!-- Open Graph / Facebook -->
   <meta property="og:type" content="website" />
   <meta property="og:url" content="https://openflowkit.com/" />
-  <meta property="og:title" content="OpenFlowKit — Free Open-Source Diagram Tool for Developers" />
+  <meta property="og:title" content="OpenFlowKit | Free Local-First AI Diagramming for Builders" />
   <meta property="og:description"
     content="Create beautiful diagrams for free. AI-powered, Mermaid.js support, Figma export, and auto-layout. No signup required." />
-  <meta property="og:image" content="https://openflowkit.com/og-image.png" />
+  <meta property="og:image" content="https://openflowkit.com/readme/1.png" />
+  <meta property="og:image:alt" content="OpenFlowKit product preview" />
 
   <!-- Twitter -->
   <meta property="twitter:card" content="summary_large_image" />
   <meta property="twitter:url" content="https://openflowkit.com/" />
-  <meta property="twitter:title" content="OpenFlowKit — Free Open-Source Diagram Tool for Developers" />
+  <meta property="twitter:title" content="OpenFlowKit | Free Local-First AI Diagramming for Builders" />
   <meta property="twitter:description"
     content="Create beautiful diagrams for free. AI-powered, Mermaid.js support, Figma export, and auto-layout. No signup required." />
-  <meta property="twitter:image" content="https://openflowkit.com/og-image.png" />
+  <meta property="twitter:image" content="https://openflowkit.com/readme/1.png" />
+  <meta property="twitter:image:alt" content="OpenFlowKit product preview" />
 
   <link rel="stylesheet" href="/src/index.css" />
 </head>

public/locales/en/translation.json

@@ -387,7 +387,7 @@
       "exportFormats": "Export to SVG, PNG, JPG",
       "figmaExport": "Figma Export",
       "mermaidSupport": "Mermaid.js Support",
-      "aiGeneration": "AI diagram generation (bring your own API key)"
+      "aiGeneration": "AI diagram generation (BYOK)"
     },
     "supportDevelopment": "Support development on GitHub"
   },
@@ -1211,4 +1211,4 @@
     "closeTab": "Close Tab",
     "newFlowTab": "New Flow Tab"
   }
-}
+}

src/components/FlowEditor.tsx

@@ -7,7 +7,6 @@ import { ArchitectureLintProvider } from '@/context/ArchitectureLintContext';
 import { useCinematicExportState } from '@/context/CinematicExportContext';
 import { DiagramDiffProvider } from '@/context/DiagramDiffContext';
 import { ShareEmbedModal } from '@/components/ShareEmbedModal';
-import { CinematicExportSurface } from '@/components/export/CinematicExportSurface';
 
 const CINEMATIC_EXPORT_BACKGROUND =
     'radial-gradient(circle at top, rgba(59,130,246,0.14), transparent 42%), linear-gradient(180deg, #f8fbff 0%, #eef5ff 52%, #f8fafc 100%)';
@@ -29,7 +28,6 @@ export function FlowEditor({ onGoHome }: FlowEditorProps) {
         recordHistory,
         isSelectMode,
         reactFlowWrapper,
-        cinematicExportSurfaceRef,
         fileInputRef,
         onFileImport,
         shareViewerUrl,
@@ -88,11 +86,6 @@ export function FlowEditor({ onGoHome }: FlowEditorProps) {
                     {shareViewerUrl && (
                         <ShareEmbedModal viewerUrl={shareViewerUrl} onClose={clearShareViewerUrl} />
                     )}
-                    <CinematicExportSurface
-                        ref={cinematicExportSurfaceRef}
-                        nodes={nodes}
-                        edges={edges}
-                    />
                 </div>
             </ArchitectureLintProvider>
         </DiagramDiffProvider>

src/components/StudioAIPanel.tsx

@@ -26,10 +26,9 @@ const EMPTY_CANVAS_EXAMPLES: AIStudioExample[] = [
 ];
 
 const ITERATION_EXAMPLES: AIStudioExample[] = [
-    { label: 'Add Database', icon: Database, prompt: 'Add a PostgreSQL database to the architecture' },
-    { label: 'Add Server', icon: Server, prompt: 'Add a backend Node.js server service' },
-    { label: 'Add Cloud Infrastructure', icon: Cloud, prompt: 'Deploy the main application to AWS' },
-    { label: 'Add Load Balancer', icon: Network, prompt: 'Add a load balancer in front of the application' },
+    { label: 'Database', icon: Database, prompt: 'Add a PostgreSQL database to the architecture' },
+    { label: 'Server', icon: Server, prompt: 'Add a backend Node.js server service' },
+    { label: 'Deploy to AWS', icon: Cloud, prompt: 'Deploy the main application to AWS' },
 ];
 
 const EXAMPLE_ICON_COLORS = [
@@ -178,12 +177,14 @@ export function StudioAIPanel({
     }, [initialPrompt, onInitialPromptConsumed, setPrompt]);
 
     const hasHistory = chatMessages.length > 0;
+    const isCanvasEmpty = nodeCount === 0;
     const effectiveGenerationMode: AIGenerationMode = nodeCount === 0 ? 'create' : generationMode;
-    const examplePrompts = nodeCount === 0 ? EMPTY_CANVAS_EXAMPLES : ITERATION_EXAMPLES;
-    const sendButtonLabel = effectiveGenerationMode === 'edit' && nodeCount > 0
+    const examplePrompts = isCanvasEmpty ? EMPTY_CANVAS_EXAMPLES : ITERATION_EXAMPLES;
+    const isEditMode = effectiveGenerationMode === 'edit' && !isCanvasEmpty;
+    const sendButtonLabel = isEditMode
         ? 'Apply AI edit'
         : 'Generate diagram';
-    const sendButtonIcon = generationMode === 'edit' && nodeCount > 0 ? <Edit3 className="h-4 w-4" /> : <ArrowUp className="h-4 w-4" />;
+    const sendButtonIcon = isEditMode ? <Edit3 className="h-4 w-4" /> : <ArrowUp className="h-4 w-4" />;
 
     async function submitPrompt(promptText?: string): Promise<void> {
         const resolvedPrompt = promptText ?? prompt;
@@ -204,7 +205,7 @@ export function StudioAIPanel({
         void submitPrompt();
     }
 
-    const isInputEmpty = (!prompt.trim() && !selectedImage);
+    const isInputEmpty = !prompt.trim() && !selectedImage;
 
     return (
         <div className="flex h-full min-h-0 flex-col overflow-hidden">
@@ -267,13 +268,13 @@ export function StudioAIPanel({
                         </div>
                         <h3 className="text-xl font-bold tracking-tight text-slate-900">{FLOWPILOT_NAME}</h3>
                         <p className="mt-2.5 mb-8 max-w-[280px] text-[13px] leading-relaxed text-slate-600">
-                            {nodeCount === 0
+                            {isCanvasEmpty
                                 ? `Describe the diagram you want and ${FLOWPILOT_NAME} will draft the first graph for you.`
                                 : `Describe the changes you want and ${FLOWPILOT_NAME} will update the graph for you.`}
                         </p>
 
                         {aiReadiness.canGenerate && (
-                            <div className="flex max-w-[520px] flex-wrap items-center justify-center gap-3">
+                            <div className="flex max-w-[360px] flex-wrap justify-center gap-2">
                                 {examplePrompts.map((skill, index) => {
                                     const Icon = skill.icon;
                                     return (
@@ -283,10 +284,12 @@ export function StudioAIPanel({
                                                 setPrompt(skill.prompt);
                                                 void submitPrompt(skill.prompt);
                                             }}
-                                            className="flex items-center gap-2 rounded-full border border-slate-200 bg-white px-5 py-2.5 text-[13px] font-medium text-slate-700 shadow-sm transition-all duration-200 hover:border-[var(--brand-primary-200)] hover:text-[var(--brand-primary)] hover:shadow-md active:scale-95"
+                                            className="inline-flex min-h-9 items-center gap-2 rounded-full border border-white bg-white px-3 py-2 text-left text-[12px] font-semibold leading-none text-slate-700 shadow-sm shadow-slate-200/70 ring-1 ring-slate-200/70 transition-all duration-200 hover:-translate-y-px hover:border-[var(--brand-primary-100)] hover:text-[var(--brand-primary)] hover:shadow-md active:scale-95"
                                         >
-                                            <Icon className={`h-3.5 w-3.5 ${getExampleIconColor(index)}`} />
-                                            {skill.label}
+                                            <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-slate-50">
+                                                <Icon className={`h-3.5 w-3.5 ${getExampleIconColor(index)}`} />
+                                            </span>
+                                            <span>{skill.label}</span>
                                         </button>
                                     );
                                 })}

src/components/WelcomeModal.tsx

@@ -104,16 +104,7 @@ export function WelcomeModal({ onOpenTemplates, onPromptWithAI, onImport, onBlan
             <div className="w-full max-w-xl overflow-hidden rounded-[var(--radius-xl)] border border-slate-200/50 bg-white shadow-[var(--shadow-overlay)] animate-in zoom-in-95 duration-300">
                 <div className="p-8">
                     <div className="mb-6 flex flex-col items-center text-center">
-                        <div
-                            className="mb-4 flex h-12 w-12 items-center justify-center rounded-[var(--radius-md)] ring-8"
-                            style={{
-                                background: 'var(--brand-primary-50, #eef2ff)',
-                                color: 'var(--brand-primary, #6366f1)',
-                                '--tw-ring-color': 'var(--brand-primary-50, #eef2ff)',
-                            } as React.CSSProperties}
-                        >
-                            <OpenFlowLogo className="h-6 w-6" />
-                        </div>
+                        <OpenFlowLogo className="mb-4 h-12 w-12" />
                         <h2 className="text-xl font-bold tracking-tight text-slate-900">Welcome to OpenFlowKit</h2>
                         <p className="mt-1 max-w-md text-sm text-slate-500">
                             Pick the fastest way to get to a real developer diagram: template, import, prompt, or blank canvas.

src/components/app/MobileWorkspaceGate.tsx

@@ -18,9 +18,7 @@ export function MobileWorkspaceGate({
         <>
             <div className="fixed inset-0 z-[100] flex items-center justify-center bg-[radial-gradient(circle_at_top,_rgba(59,130,246,0.12),_transparent_45%),linear-gradient(180deg,_white,_#f8fafc)] px-6 text-center md:hidden">
                 <div className="w-full max-w-sm rounded-[28px] border border-slate-200/80 bg-white/90 px-6 py-8 shadow-2xl shadow-slate-200/70 backdrop-blur-md">
-                    <div className="mx-auto mb-8 flex h-14 w-14 items-center justify-center rounded-2xl bg-brand-primary text-white shadow-xl shadow-brand-primary/20 ring-1 ring-white/20">
-                        <OpenFlowLogo className="h-8 w-8 text-white" />
-                    </div>
+                    <OpenFlowLogo className="mx-auto mb-8 h-14 w-14" />
 
                     <div className="mx-auto mb-6 flex h-12 w-12 items-center justify-center rounded-full bg-brand-primary/5">
                         <Monitor className="h-6 w-6 text-brand-primary" />

src/components/custom-edge/CustomEdgeWrapper.tsx

@@ -425,7 +425,7 @@ export function CustomEdgeWrapper({
                                 onDoubleClick={(e) => { e.stopPropagation(); beginLabelEdit(); }}
                                 className={
                                     visualQualityV2Enabled
-                                        ? `px-2 py-0.5 rounded-full border shadow-sm text-[11px] font-medium select-none flow-lod-secondary flow-lod-shadow transition-all ${cinematicActive ? 'bg-white/96 border-slate-200/90 text-slate-600 shadow-[0_6px_18px_rgba(15,23,42,0.08)]' : 'bg-white/90 border-slate-200 text-slate-500 hover:border-indigo-300 hover:text-slate-700 hover:shadow active:ring-2 active:ring-indigo-400'}`
+                                        ? `whitespace-nowrap px-2 py-0.5 rounded-full border shadow-sm text-[11px] font-medium select-none flow-lod-secondary flow-lod-shadow transition-all ${cinematicActive ? 'bg-white/96 border-slate-200/90 text-slate-600 shadow-[0_6px_18px_rgba(15,23,42,0.08)]' : 'bg-white/90 border-slate-200 text-slate-500 hover:border-indigo-300 hover:text-slate-700 hover:shadow active:ring-2 active:ring-indigo-400'}`
                                         : 'bg-white px-2 py-0.5 rounded border border-slate-200 shadow-sm text-[11px] font-medium text-slate-500 hover:ring-2 hover:ring-indigo-500/20 active:ring-indigo-500 select-none flow-lod-secondary flow-lod-shadow'
                                 }
                             >

src/components/flow-editor/useFlowEditorScreenModel.ts

@@ -90,7 +90,7 @@ export function useFlowEditorScreenModel({ onGoHome }: UseFlowEditorScreenModelP
         onFileImport,
     } = useFlowExport(screenState.recordHistory, screenState.reactFlowWrapper, {
         stopPlayback,
-    }, screenState.cinematicExportSurfaceRef);
+    });
 
     const {
         collaborationTopNavState,
@@ -309,7 +309,6 @@ export function useFlowEditorScreenModel({ onGoHome }: UseFlowEditorScreenModelP
         recordHistory: screenState.recordHistory,
         isSelectMode: screenState.isSelectMode,
         reactFlowWrapper: screenState.reactFlowWrapper,
-        cinematicExportSurfaceRef: screenState.cinematicExportSurfaceRef,
         fileInputRef,
         onFileImport,
         shareViewerUrl,

src/components/flow-editor/useFlowEditorScreenState.ts

@@ -41,7 +41,6 @@ export function useFlowEditorScreenState() {
   const snapshotsState = useSnapshots();
   const uiState = useFlowEditorUIState();
   const reactFlowWrapper = useRef<HTMLDivElement>(null);
-  const cinematicExportSurfaceRef = useRef<HTMLDivElement>(null);
   const reactFlowState = useReactFlow();
   const historyState = useFlowHistory();
 
@@ -60,7 +59,6 @@ export function useFlowEditorScreenState() {
     ...snapshotsState,
     ...uiState,
     reactFlowWrapper,
-    cinematicExportSurfaceRef,
     ...reactFlowState,
     ...historyState,
   };

src/components/home/HomeSidebar.tsx

@@ -20,9 +20,7 @@ export function HomeSidebar({
     return (
         <aside className="sticky top-0 z-20 flex w-full flex-col border-b border-slate-200 bg-[var(--brand-surface)] md:fixed md:inset-y-0 md:left-0 md:w-64 md:border-b-0 md:border-r">
             <div className="flex h-14 items-center gap-3 border-b border-slate-100 px-4">
-                <div className="w-8 h-8 flex items-center justify-center bg-[var(--brand-primary)]/10 rounded-lg text-[var(--brand-primary)] overflow-hidden shrink-0">
-                    <OpenFlowLogo className="w-5 h-5" />
-                </div>
+                <OpenFlowLogo className="h-8 w-8 shrink-0" />
 
                 <span className="font-semibold text-base tracking-tight text-slate-900 truncate">{APP_NAME}</span>