Merge branch 'main' into improvement/sim-294

Author: icecrasher321

apps/docs/app/[lang]/[[...slug]]/page.tsx

@@ -6,10 +6,9 @@ import Link from 'next/link'
 import { notFound } from 'next/navigation'
 import { StructuredData } from '@/components/structured-data'
 import { CodeBlock } from '@/components/ui/code-block'
+import { CopyPageButton } from '@/components/ui/copy-page-button'
 import { source } from '@/lib/source'
 
-export const dynamic = 'force-dynamic'
-
 export default async function Page(props: { params: Promise<{ slug?: string[]; lang: string }> }) {
   const params = await props.params
   const page = source.getPage(params.slug, params.lang)
@@ -193,8 +192,19 @@ export default async function Page(props: { params: Promise<{ slug?: string[]; l
           component: <CustomFooter />,
         }}
       >
-        <DocsTitle>{page.data.title}</DocsTitle>
-        <DocsDescription>{page.data.description}</DocsDescription>
+        <div className='relative'>
+          <div className='absolute top-1 right-0'>
+            <CopyPageButton
+              content={`# ${page.data.title}
+
+${page.data.description || ''}
+
+${page.data.content || ''}`}
+            />
+          </div>
+          <DocsTitle>{page.data.title}</DocsTitle>
+          <DocsDescription>{page.data.description}</DocsDescription>
+        </div>
         <DocsBody>
           <MDX
             components={{

apps/docs/app/global.css

@@ -36,7 +36,9 @@
   /* Shift the sidebar slightly left from the content edge for extra breathing room */
   --sidebar-shift: 90px;
   --sidebar-offset: max(0px, calc(var(--edge-gutter) - var(--sidebar-shift)));
-  --toc-offset: var(--edge-gutter);
+  /* Shift TOC slightly right to match sidebar spacing for symmetry */
+  --toc-shift: 90px;
+  --toc-offset: max(0px, calc(var(--edge-gutter) - var(--toc-shift)));
   /* Sidebar and TOC have 20px internal padding - navbar accounts for this directly */
   /* Extra gap between sidebar/TOC and the main text content */
   --content-gap: 1.75rem;
@@ -50,9 +52,7 @@
 
 /* Light mode navbar and search styling */
 :root:not(.dark) nav {
-  background-color: hsla(0, 0%, 96%, 0.92) !important;
-  backdrop-filter: blur(25px) saturate(180%) brightness(1.05) !important;
-  -webkit-backdrop-filter: blur(25px) saturate(180%) brightness(1.05) !important;
+  background-color: hsla(0, 0%, 96%, 0.85) !important;
 }
 
 :root:not(.dark) nav button[type="button"] {
@@ -66,6 +66,13 @@
   color: rgba(0, 0, 0, 0.6) !important;
 }
 
+/* Dark mode navbar and search styling */
+:root.dark nav {
+  background-color: hsla(0, 0%, 7.04%, 0.92) !important;
+  backdrop-filter: blur(25px) saturate(180%) brightness(0.6) !important;
+  -webkit-backdrop-filter: blur(25px) saturate(180%) brightness(0.6) !important;
+}
+
 /* ============================================
    Custom Sidebar Styling (Turborepo-inspired)
    ============================================ */
@@ -107,8 +114,21 @@ aside#nd-sidebar {
   aside#nd-sidebar {
     left: var(--sidebar-offset) !important;
   }
-  [data-toc] {
-    margin-right: var(--toc-offset) !important;
+  /* TOC positioning - target all possible selectors */
+  [data-toc],
+  aside[data-toc],
+  div[data-toc],
+  .fd-toc,
+  #nd-toc,
+  nav[data-toc],
+  aside:has([role="complementary"]) {
+    right: var(--toc-offset) !important;
+  }
+
+  /* Alternative TOC container targeting */
+  [data-docs-page] > aside:last-child,
+  main ~ aside {
+    right: var(--toc-offset) !important;
   }
 }
 

apps/docs/components/navbar/navbar.tsx

@@ -11,21 +11,20 @@ export function Navbar() {
     <nav
       className='sticky top-0 z-50 border-border/50 border-b'
       style={{
-        backgroundColor: 'hsla(0, 0%, 7.04%, 0.92)',
-        backdropFilter: 'blur(25px) saturate(180%) brightness(0.6)',
-        WebkitBackdropFilter: 'blur(25px) saturate(180%) brightness(0.6)',
+        backdropFilter: 'blur(25px) saturate(180%)',
+        WebkitBackdropFilter: 'blur(25px) saturate(180%)',
       }}
     >
       {/* Desktop: Single row layout */}
       <div className='hidden h-16 w-full items-center lg:flex'>
         <div
-          className='grid w-full grid-cols-[auto_1fr_auto] items-center'
+          className='relative flex w-full items-center justify-between'
           style={{
             paddingLeft: 'calc(var(--sidebar-offset) + 20px)',
-            paddingRight: 'calc(var(--toc-offset) + 20px)',
+            paddingRight: 'calc(var(--toc-offset) + 60px)',
           }}
         >
-          {/* Left cluster: translate by sidebar delta to align with sidebar edge */}
+          {/* Left cluster: logo */}
           <div className='flex items-center'>
             <Link href='/' className='flex min-w-[100px] items-center'>
               <Image
@@ -38,12 +37,12 @@ export function Navbar() {
             </Link>
           </div>
 
-          {/* Center cluster: search */}
-          <div className='flex flex-1 items-center justify-center pl-32'>
+          {/* Center cluster: search - absolutely positioned to center */}
+          <div className='-translate-x-1/2 absolute left-1/2 flex items-center justify-center'>
             <SearchTrigger />
           </div>
 
-          {/* Right cluster aligns with TOC edge using the same right gutter */}
+          {/* Right cluster aligns with TOC edge */}
           <div className='flex items-center gap-4'>
             <Link
               href='https://sim.ai'

apps/docs/components/ui/copy-page-button.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import { useState } from 'react'
+import { Check, Copy } from 'lucide-react'
+
+interface CopyPageButtonProps {
+  content: string
+}
+
+export function CopyPageButton({ content }: CopyPageButtonProps) {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(content)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch (err) {
+      console.error('Failed to copy:', err)
+    }
+  }
+
+  return (
+    <button
+      onClick={handleCopy}
+      className='flex items-center gap-1.5 rounded-lg border border-border/40 bg-background px-2.5 py-1.5 text-muted-foreground/60 text-sm transition-all hover:border-border hover:bg-accent/50 hover:text-muted-foreground'
+      aria-label={copied ? 'Copied to clipboard' : 'Copy page content'}
+    >
+      {copied ? (
+        <>
+          <Check className='h-4 w-4' />
+          <span>Copied</span>
+        </>
+      ) : (
+        <>
+          <Copy className='h-4 w-4' />
+          <span>Copy page</span>
+        </>
+      )}
+    </button>
+  )
+}

apps/docs/content/docs/de/blocks/index.mdx

@@ -16,7 +16,7 @@ Blöcke sind die Bausteine, die du miteinander verbindest, um KI-Workflows zu er
 
 ## Grundlegende Blocktypen
 
-Sim bietet sieben grundlegende Blocktypen, die die wesentlichen Funktionen von KI-Workflows abdecken:
+Sim bietet wesentliche Blocktypen, die die Kernfunktionen von KI-Workflows abdecken:
 
 ### Verarbeitungsblöcke
 - **[Agent](/blocks/agent)** - Chatte mit KI-Modellen (OpenAI, Anthropic, Google, lokale Modelle)
@@ -28,16 +28,20 @@ Sim bietet sieben grundlegende Blocktypen, die die wesentlichen Funktionen von K
 - **[Router](/blocks/router)** - Nutze KI, um Anfragen intelligent auf verschiedene Pfade zu leiten
 - **[Evaluator](/blocks/evaluator)** - Bewerte und beurteile die Inhaltsqualität mit KI
 
+### Ablaufsteuerungsblöcke
+- **[Variablen](/blocks/variables)** - Workflow-bezogene Variablen setzen und verwalten
+- **[Warten](/blocks/wait)** - Workflow-Ausführung für eine bestimmte Zeitverzögerung pausieren
+
 ### Ausgabeblöcke
-- **[Response](/blocks/response)** - Formatiere und gib endgültige Ergebnisse aus deinem Workflow zurück
+- **[Antwort](/blocks/response)** - Formatieren und Zurückgeben der endgültigen Ergebnisse aus Ihrem Workflow
 
 ## Wie Blöcke funktionieren
 
 Jeder Block hat drei Hauptkomponenten:
 
 **Eingaben**: Daten, die in den Block von anderen Blöcken oder Benutzereingaben kommen
-**Konfiguration**: Einstellungen, die das Verhalten des Blocks steuern
-**Ausgaben**: Daten, die der Block für andere Blöcke produziert
+**Konfiguration**: Einstellungen, die steuern, wie der Block sich verhält
+**Ausgaben**: Daten, die der Block für andere Blöcke zur Verwendung erzeugt
 
 <Steps>
   <Step>
@@ -56,7 +60,7 @@ Jeder Block hat drei Hauptkomponenten:
 Sie erstellen Workflows, indem Sie Blöcke miteinander verbinden. Die Ausgabe eines Blocks wird zur Eingabe eines anderen:
 
 - **Ziehen zum Verbinden**: Ziehen Sie von einem Ausgabeport zu einem Eingabeport
-- **Mehrfachverbindungen**: Eine Ausgabe kann mit mehreren Eingängen verbunden werden
+- **Mehrfachverbindungen**: Eine Ausgabe kann mit mehreren Eingaben verbunden werden
 - **Verzweigende Pfade**: Einige Blöcke können basierend auf Bedingungen zu verschiedenen Pfaden weiterleiten
 
 <div className="w-full max-w-2xl mx-auto overflow-hidden rounded-lg">
@@ -73,7 +77,7 @@ User Input → Agent → Function → Response
 ```
 
 ### Bedingte Verzweigung
-Verwenden Sie Bedingungsblöcke oder Router-Blöcke, um verschiedene Pfade zu erstellen:
+Verwenden Sie Bedingung- oder Router-Blöcke, um verschiedene Pfade zu erstellen:
 
 ```
 User Input → Router → Agent A (for questions)
@@ -93,37 +97,43 @@ Agent → Evaluator → Condition → Response (if good)
 Jeder Blocktyp hat spezifische Konfigurationsoptionen:
 
 **Alle Blöcke**:
-- Ein-/Ausgabeverbindungen
+- Eingabe-/Ausgabeverbindungen
 - Fehlerbehandlungsverhalten
-- Zeitüberschreitungseinstellungen für die Ausführung
+- Einstellungen für Ausführungs-Timeout
 
 **KI-Blöcke** (Agent, Router, Evaluator):
 - Modellauswahl (OpenAI, Anthropic, Google, lokal)
 - API-Schlüssel und Authentifizierung
-- Temperature und andere Modellparameter
+- Temperatur und andere Modellparameter
 - Systemaufforderungen und Anweisungen
 
-**Logikblöcke** (Bedingung, Funktion):
+**Logik-Blöcke** (Bedingung, Funktion):
 - Benutzerdefinierte Ausdrücke oder Code
 - Variablenreferenzen
-- Einstellungen für die Ausführungsumgebung
+- Einstellungen für Ausführungsumgebung
 
-**Integrationsblöcke** (API, Antwort):
+**Integrations-Blöcke** (API, Response):
 - Endpunktkonfiguration
 - Header und Authentifizierung
 - Anfrage-/Antwortformatierung
 
 <Cards>
-  <Card title="Agent Block" href="/blocks/agent">
-    Verbindung zu KI-Modellen herstellen und intelligente Antworten erzeugen
+  <Card title="Agent-Block" href="/blocks/agent">
+    Verbindung zu KI-Modellen herstellen und intelligente Antworten erstellen
   </Card>
-  <Card title="Function Block" href="/blocks/function">
+  <Card title="Funktions-Block" href="/blocks/function">
     Benutzerdefinierten Code ausführen, um Daten zu verarbeiten und zu transformieren
   </Card>
-  <Card title="API Block" href="/blocks/api">
+  <Card title="API-Block" href="/blocks/api">
     Integration mit externen Diensten und APIs
   </Card>
-  <Card title="Condition Block" href="/blocks/condition">
+  <Card title="Bedingungs-Block" href="/blocks/condition">
     Verzweigende Logik basierend auf Datenbewertung erstellen
   </Card>
+  <Card title="Variablen-Block" href="/blocks/variables">
+    Workflow-bezogene Variablen setzen und verwalten
+  </Card>
+  <Card title="Warte-Block" href="/blocks/wait">
+    Workflow-Ausführung für bestimmte Zeitverzögerungen pausieren
+  </Card>
 </Cards>