langchain-evolution-deck/slides/section5-ecosystem/slide-01.js

// Slide 01: Section cover -- Stage 5 / Ecosystem (LangSmith + Studio + Platform)
// Asymmetric layout: big section number + title block on left,
// "ecosystem wheel" mock on right with the 3 satellite products.

const ds = require('./design-system');

function createSlide(pres, theme) {
  const slide = pres.addSlide();
  ds.helpers.slideBase(slide, pres, theme);

  // Left vertical accent stripe -- gold for the ecosystem meta-section
  slide.addShape(pres.ShapeType.rect, {
    x: 0, y: 0, w: 0.25, h: 5.625,
    fill: { color: theme.palette.accent.secondary },
    line: { type: 'none' },
  });

  // Top tag pill: section meta
  slide.addShape(pres.ShapeType.roundRect, {
    x: 0.7, y: 0.55, w: 2.8, h: 0.36,
    fill: { color: theme.palette.accent.secondary },
    line: { type: 'none' },
    rectRadius: 0.18,
  });
  slide.addText('STAGE 5  |  ECOSYSTEM', {
    x: 0.7, y: 0.55, w: 2.8, h: 0.36,
    fontFace: ds.helpers.withFallback(theme.fonts.ui),
    fontSize: 10, bold: true,
    color: theme.palette.bg.primary,
    align: 'center', valign: 'middle',
    charSpacing: 4, margin: 0,
  });

  // Main title
  slide.addText('Экосистема', {
    x: 0.7, y: 1.15, w: 5.9, h: 1.0,
    fontFace: ds.helpers.withFallback(theme.fonts.ui),
    fontSize: 56, bold: true,
    color: theme.palette.text.primary,
    align: 'left', valign: 'middle',
    margin: 0,
  });

  // Subtitle
  slide.addText('LangSmith, Studio, deployment', {
    x: 0.7, y: 2.15, w: 9, h: 0.55,
    fontFace: ds.helpers.withFallback(theme.fonts.ui),
    fontSize: 26,
    color: theme.palette.accent.tertiary,
    align: 'left', valign: 'middle',
    margin: 0,
  });

  // Description block
  slide.addText(
    'Сервисы вокруг 4 основных ступеней: observability и eval ' +
    '(LangSmith SDK), визуальный дебаг графов (LangGraph Studio), ' +
    'production deployment (LangGraph Platform), self-hosted и TypeScript-клиенты. ' +
    'Все, что превращает прототип в production-grade систему.',
    {
      x: 0.7, y: 2.85, w: 5.7, h: 1.6,
      fontFace: ds.helpers.withFallback(theme.fonts.ui),
      fontSize: 13,
      color: theme.palette.text.secondary,
      align: 'left', valign: 'top',
      margin: 0,
    }
  );

  // Right-side ecosystem mock: LangSmith SDK in center, 3 satellite products
  const codeX = 6.7;
  const codeY = 1.55;
  const codeW = 2.85;
  const codeH = 3.05;

  slide.addShape(pres.ShapeType.roundRect, {
    x: codeX, y: codeY, w: codeW, h: codeH,
    fill: { color: theme.palette.bg.elevated },
    line: { color: theme.palette.border.subtle, width: 1 },
    rectRadius: 0.1,
  });

  // Center node: LangSmith SDK
  slide.addShape(pres.ShapeType.roundRect, {
    x: codeX + 0.7, y: codeY + 1.15, w: codeW - 1.4, h: 0.75,
    fill: { color: theme.palette.accent.primary },
    line: { type: 'none' },
    rectRadius: 0.08,
  });
  slide.addText('langsmith', {
    x: codeX + 0.7, y: codeY + 1.15, w: codeW - 1.4, h: 0.45,
    fontFace: ds.helpers.withFallback(theme.fonts.code),
    fontSize: 16, bold: true,
    color: theme.palette.bg.primary,
    align: 'center', valign: 'middle',
    margin: 0,
  });
  slide.addText('Python SDK 0.8.9', {
    x: codeX + 0.7, y: codeY + 1.5, w: codeW - 1.4, h: 0.35,
    fontFace: ds.helpers.withFallback(theme.fonts.ui),
    fontSize: 10, italic: true,
    color: theme.palette.bg.primary,
    align: 'center', valign: 'middle',
    margin: 0,
  });

  // Three satellite nodes
  const satellites = [
    { label: '@traceable',  color: theme.palette.accent.tertiary, y: codeY + 0.18 },
    { label: 'Studio',      color: theme.palette.accent.tertiary, y: codeY + 2.05 },
    { label: 'Platform',    color: theme.palette.accent.tertiary, y: codeY + 2.55 },
  ];
  satellites.forEach((s) => {
    slide.addShape(pres.ShapeType.roundRect, {
      x: codeX + 0.4, y: s.y, w: codeW - 0.8, h: 0.4,
      fill: { color: theme.palette.bg.code },
      line: { color: s.color, width: 1.25 },
      rectRadius: 0.06,
    });
    slide.addText(s.label, {
      x: codeX + 0.4, y: s.y, w: codeW - 0.8, h: 0.4,
      fontFace: ds.helpers.withFallback(theme.fonts.code),
      fontSize: 12, bold: true,
      color: s.color,
      align: 'center', valign: 'middle',
      margin: 0,
    });
  });

  // Caption under the mock
  slide.addText('observability  |  visual debug  |  deploy', {
    x: codeX, y: codeY + codeH + 0.05, w: codeW, h: 0.3,
    fontFace: ds.helpers.withFallback(theme.fonts.ui),
    fontSize: 11, italic: true,
    color: theme.palette.text.muted,
    align: 'center', valign: 'middle', margin: 0,
  });

  // Bottom meta strip
  slide.addText('12 СЛАЙДОВ  |  PYTHON >= 3.9  |  LANGSMITH 0.8.x', {
    x: 0.7, y: 5.05, w: 9, h: 0.3,
    fontFace: ds.helpers.withFallback(theme.fonts.ui),
    fontSize: 10,
    color: theme.palette.text.muted,
    align: 'left', valign: 'middle',
    charSpacing: 3, margin: 0,
  });

  ds.helpers.addPageNumber(slide, pres, theme, 1);
}

module.exports = { createSlide };