create-tldraw 4.0.2 → 4.1.0-canary.0259516ffb8c

package/dist-cjs/main.cjs

@@ -679,10 +679,6 @@ var j2 = (t) => {
     return w || b3 ? l : s(p3, d2 + m2 === i);
   });
 };
-var Ge = (t = "", i) => {
-  (i?.output ?? process.stdout).write(`${import_picocolors2.default.gray(oe)}  ${t}
-`);
-};
 var Fe = (t = "", i) => {
   (i?.output ?? process.stdout).write(`${import_picocolors2.default.gray(o)}
 ${import_picocolors2.default.gray(f2)}  ${t}
@@ -7282,17 +7278,7 @@ function groupSelect(opts) {
     if (state !== "active") {
       return [import_picocolors3.default.dim(L2), " ", import_picocolors3.default.dim(label)].join("");
     }
-    return [
-      import_picocolors3.default.green(P2),
-      " ",
-      import_picocolors3.default.bold(label),
-      "\n  ",
-      import_picocolors3.default.cyan(o),
-      "    ",
-      option.hint,
-      "\n",
-      import_picocolors3.default.cyan(o)
-    ].join("");
+    return [import_picocolors3.default.green(P2), " ", import_picocolors3.default.bold(label)].join("");
   };
   return new Xu({
     options: opts.options,
@@ -7337,6 +7323,7 @@ ${E2(this.state)}  ${import_picocolors3.default.bold(opts.message)}
         );
         previousGroup = option.group;
       }
+      body.push(import_picocolors3.default.cyan(o), "\n", import_picocolors3.default.cyan(o), "  ", selectedOption.hint);
       const output = opts.output ?? import_node_process3.default.stdout;
       const columns = output instanceof import_node_tty3.WriteStream ? output.columns : 80;
       const rows = output instanceof import_node_tty3.WriteStream ? output.rows : 10;
@@ -7349,7 +7336,7 @@ ${E2(this.state)}  ${import_picocolors3.default.bold(opts.message)}
         P2,
         [import_picocolors3.default.cyan(o), import_picocolors3.default.dim(" ...")].join("")
       );
-      return [title, limited].join("");
+      return [title, import_picocolors3.default.cyan(o), "\n", limited].join("");
     }
   }).prompt();
 }
@@ -7362,35 +7349,47 @@ var TEMPLATES = [
     order: 1,
     repo: "tldraw/vite-template"
   },
+  {
+    name: "Multiplayer",
+    description: "Real-time multiplayer with a self-hosted backend.",
+    shortDescription: "Real-time multiplayer.",
+    order: 2,
+    repo: "tldraw/tldraw-sync-cloudflare"
+  },
   {
     name: "Agent",
-    description: "Enable AI agents to interpret and interact with canvas drawings and elements.",
+    description: "Work on the canvas with an AI agent.",
     shortDescription: "An AI-powered agent.",
+    order: 3,
     repo: "tldraw/agent-template"
   },
   {
-    name: "Branching chat",
-    description: "Create interactive chat trees using visual branching conversation interface with AI integration.",
-    shortDescription: "A branching chat interface.",
-    repo: "tldraw/branching-chat-template"
+    name: "Workflow",
+    description: "Create a node-based builder for visual workflows.",
+    shortDescription: "Visual node-based builder for workflows.",
+    order: 4,
+    repo: "tldraw/workflow-template"
   },
   {
     name: "Chat",
-    description: "Use tldraw to add sketches and annotated images as visual context in an LLM chat interface.",
+    description: "Create an AI chat that uses tldraw for sketches and annotations.",
     shortDescription: "A chat UI with sketches and images as context for AI.",
+    order: 5,
     repo: "tldraw/chat-template"
   },
   {
-    name: "Multiplayer",
-    description: "Bring multiplayer mode to your tldraw canvas app. Self-hosted and powered by tldraw sync and Cloudflare Durable Objects.",
-    shortDescription: "Real-time multiplayer for tldraw, built with Cloudflare Durable Objects.",
-    repo: "tldraw/tldraw-sync-cloudflare"
+    name: "Branching chat",
+    description: "Chat with an AI using a branching conversation interface.",
+    shortDescription: "A branching chat interface.",
+    order: 6,
+    repo: "tldraw/branching-chat-template"
   },
   {
-    name: "Workflow",
-    description: "Build visual tools where users drag and connect nodes, think automation builders with a canvas interface.",
-    shortDescription: "Visual node-based builder for workflows.",
-    repo: "tldraw/workflow-template"
+    name: "Shader",
+    description: "Create WebGL shaders that respond to shapes on the canvas.",
+    shortDescription: "Shaders on the canvas.",
+    order: 7,
+    repo: "tldraw/shader-starter-kit"
   }
 ];
 
@@ -7431,7 +7430,7 @@ function toValidPackageName(projectName) {
   return projectName.trim().toLowerCase().replace(/\s+/g, "-").replace(/^[._]/, "").replace(/[^a-z\d\-~]+/g, "-");
 }
 function cancel() {
-  Fe("Setup cancelled.\n   No worries, come back anytime!");
+  Fe("Setup cancelled.\n   Try again or visit https://tldraw.dev/docs to learn more.");
   process.exit(1);
 }
 async function uncancel(promise) {
@@ -7475,14 +7474,13 @@ function getRunCommand(manager, command) {
 // src/main.ts
 var DEBUG = !!import_node_process4.default.env.DEBUG;
 async function main() {
-  Ge(`Let's build a tldraw app!`);
   const args = b(import_node_process4.default.argv.slice(2), {
     alias: {
       h: "help",
       t: "template",
       o: "overwrite"
     },
-    boolean: ["help", "overwrite"],
+    boolean: ["help", "overwrite", "no-telemetry"],
     string: ["template"]
   });
   if (args.help) {
@@ -7491,7 +7489,7 @@ async function main() {
   }
   const maybeTargetDir = args._[0] ? formatTargetDir((0, import_node_path11.resolve)(String(args._[0]))) : void 0;
   const targetDir = maybeTargetDir ?? import_node_process4.default.cwd();
-  const template = await templatePicker(args.template);
+  const template = await templatePicker(args.template, args["no-telemetry"]);
   const name2 = await namePicker(maybeTargetDir);
   await ensureDirectoryEmpty(targetDir, args.overwrite);
   await downloadTemplate(template, targetDir);
@@ -7504,7 +7502,7 @@ async function main() {
   doneMessage.push(`   ${getInstallCommand(manager)}`);
   doneMessage.push(`   ${getRunCommand(manager, "dev")}`);
   doneMessage.push("");
-  doneMessage.push("   Happy building!");
+  doneMessage.push("   Happy building! Visit https://tldraw.dev/docs to learn more.");
   Fe(doneMessage.join("\n"));
 }
 main().catch((err) => {
@@ -7512,27 +7510,41 @@ main().catch((err) => {
   Fe(`it's bad`);
   import_node_process4.default.exit(1);
 });
-async function templatePicker(argOption) {
+async function templatePicker(argOption, noTelemetry) {
   if (argOption) {
-    const template = TEMPLATES.find((t) => formatTemplateId(t) === argOption.toLowerCase().trim());
-    if (!template) {
+    const template2 = TEMPLATES.find((t) => formatTemplateId(t) === argOption.toLowerCase().trim());
+    if (!template2) {
       Fe(`Template ${argOption} not found`);
       import_node_process4.default.exit(1);
     }
-    return template;
+    trackStarterKitChoice(template2.name, noTelemetry);
+    return template2;
   }
-  return await uncancel(
+  const template = await uncancel(
     groupSelect({
-      message: "Select a template:",
+      message: "Select a tldraw starter kit:",
       options: TEMPLATES.map(
-        (template) => ({
-          label: template.name,
-          hint: template.description,
-          value: template
+        (template2) => ({
+          label: template2.name,
+          hint: template2.description,
+          value: template2
         })
       )
     })
   );
+  trackStarterKitChoice(template.name, noTelemetry);
+  return template;
+}
+function trackStarterKitChoice(templateId, noTelemetry) {
+  if (noTelemetry) return;
+  fetch("https://dashboard.tldraw.pro/api/starter-kit-choice", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({ id: templateId })
+  }).catch(() => {
+  });
 }
 async function namePicker(argOption) {
   if (argOption) {
@@ -7541,11 +7553,11 @@ async function namePicker(argOption) {
   const defaultName = pathToName(import_node_process4.default.cwd());
   const name2 = await uncancel(
     et({
-      message: import_picocolors4.default.bold("Name your package"),
+      message: import_picocolors4.default.bold("Name your app"),
       placeholder: defaultName,
       validate: (value) => {
         if (value && !isValidPackageName(value)) {
-          return `Invalid package name: ${value}`;
+          return `Invalid name: ${value}`;
         }
         return void 0;
       }
@@ -7625,7 +7637,8 @@ function getHelp() {
   const options = [
     { flags: "-h, --help", description: "Display this help message." },
     { flags: "-t, --template NAME", description: "Use a specific template." },
-    { flags: "-o, --overwrite", description: "Overwrite the target directory if it exists." }
+    { flags: "-o, --overwrite", description: "Overwrite the target directory if it exists." },
+    { flags: "--no-telemetry", description: "Disable anonymous usage tracking." }
   ];
   const GAP_SIZE = 2;
   const optionPrefix = "   ";
@@ -7638,7 +7651,7 @@ function getHelp() {
   const lines = [
     import_picocolors4.default.bold("Usage: create-tldraw [OPTION]... [DIRECTORY]"),
     "",
-    "Create a new tldraw project.",
+    "Create a new tldraw project from a starter kit.",
     "With no arguments, you'll be guided through an interactive setup.",
     "",
     import_picocolors4.default.bold("Options:")