plano/apps/www/src/data/diagrams-programmatic.ts

/**
 * Programmatic ASCII Diagram Builder
 *
 * For non-coders: Define your diagram structure with simple objects,
 * and the system will automatically generate the ASCII art.
 */

interface DiagramStep {
  id: string;
  label: string;
  type: "input" | "inner" | "regular";
  position: { x: number; y: number };
}

interface DiagramFlow {
  from: string;
  to: string;
  arrow: "right" | "down" | "left" | "up";
  label?: string;
}

interface DiagramConfig {
  title: string;
  steps: DiagramStep[];
  flows: DiagramFlow[];
}

// Example: Define diagram using simple objects
export const myFlow: DiagramConfig = {
  title: "User Registration Flow",
  steps: [
    { id: "start", label: "User", type: "input", position: { x: 0, y: 0 } },
    {
      id: "step1",
      label: "Validate Email",
      type: "inner",
      position: { x: 2, y: 0 },
    },
    {
      id: "step2",
      label: "Create Account",
      type: "regular",
      position: { x: 2, y: 1 },
    },
    {
      id: "step3",
      label: "Send Welcome",
      type: "regular",
      position: { x: 2, y: 2 },
    },
  ],
  flows: [
    { from: "start", to: "step1", arrow: "right" },
    { from: "step1", to: "step2", arrow: "down" },
    { from: "step2", to: "step3", arrow: "down" },
  ],
};

/**
 * Convert diagram config to ASCII string
 *
 * Usage:
 * import { buildDiagram } from './ascii-builder';
 * const ascii = buildDiagram(myFlow);
 */
export const buildDiagram = (config: DiagramConfig): string => {
  // This function would programmatically build the ASCII
  // For now, return a placeholder
  let result = "";
  result += `╔═ ${config.title} ══╗\n`;
  result += `║ Placeholder for programmatic generation ║\n`;
  result += `╚════════════════════════════════════╝\n`;

  // TODO: Implement automatic ASCII generation from config
  // This would:
  // 1. Layout boxes based on positions
  // 2. Add arrows based on flows
  // 3. Add shadows automatically
  // 4. Handle different box types

  return result;
};