attio 0.0.1-experimental.20241226 → 0.0.1-experimental.20250108

package/lib/api/create-version.js

@@ -10,12 +10,12 @@ const createVersionSchema = z.object({
     client_bundle_upload_url: z.string(),
     server_bundle_upload_url: z.string(),
 });
-export async function createVersion({ token, devSlug, appId, }) {
+export async function createVersion({ token, devSlug, appId, major, }) {
     const response = await fetch(`${API}/developer-portal/accounts/${devSlug}/apps/${appId}/prod-versions`, {
         method: "POST",
         headers: makeHeaders(token),
         body: JSON.stringify({
-            major: 1,
+            major,
         }),
     });
     await handleError(response);

package/lib/attio-logo.js

@@ -0,0 +1,24 @@
+export const attioLogo = `
+     ▟██▛╲       
+    ▟██▛  ╲      
+   ▟██▛   ╱      
+  ▟██▛   ╱       
+ ▟██▛   ╱   ▟█▛╲ 
+🬇██▛   ╱   ▟█▛  ╲
+ ▜█▙  ╱   🬇██▙  ╱
+  ▜█▙╱      ▜█▙╱ 
+`;
+export const attioName = `
+
+
+             ▟     ▟   ██
+            ██    ██
+   ▟███▙▟ ████████████ ██  ▟███▙ 
+  ▟█   ██   ██    ██   ██  █   █
+  ██   ██   ██    ██   ██  █   █
+  ▜████▛█   ▜███  ▜███ ██  ▜███▛
+`;
+export const attioLogoAndName = `${attioLogo
+    .split("\n")
+    .map((line, i) => i < attioLogo.split("\n").length - 1 ? `${line}    ${attioName.split("\n")[i] || ""}` : line)
+    .join("\n")}`;

package/lib/attio.js

@@ -1,9 +1,18 @@
 #!/usr/bin/env node
-import Pastel from "pastel";
-const app = new Pastel({
-    name: "attio",
-    description: "CLI for creating Attio extensions.",
-    importMeta: import.meta,
-    version: "0.0.1",
-});
-await app.run();
+import { Command } from "commander";
+import { create } from "./commands/create.js";
+import { build } from "./commands/build.js";
+import { dev } from "./commands/dev.js";
+import { connection } from "./commands/connection/index.js";
+import { version } from "./commands/version/index.js";
+const program = new Command();
+program
+    .name("attio")
+    .description("CLI tool to create Attio apps")
+    .version("0.0.1")
+    .addCommand(create, { isDefault: true })
+    .addCommand(build)
+    .addCommand(dev)
+    .addCommand(connection)
+    .addCommand(version)
+    .parse();

package/lib/commands/build.js

@@ -1,37 +1,20 @@
-import { useMachine } from "@xstate/react";
-import { Box, Text, useStdin } from "ink";
-import Spinner from "ink-spinner";
-import React from "react";
-import { renderBuildErrors } from "../components/BuildError.js";
-import { Logo } from "../components/Logo.js";
-import { renderTypeScriptErrors } from "../components/TypeScriptErrors.js";
+import { Command, Option } from "commander";
+import { createActor } from "xstate";
+import { z } from "zod";
 import { buildMachine } from "../machines/build-machine.js";
-export const description = "Build your Attio extension locally";
-export default function Build() {
-    const [snapshot] = useMachine(buildMachine);
-    const jsError = snapshot.children.javascript?.getSnapshot().context.error;
-    const tsErrors = snapshot.children.typescript?.getSnapshot().context.errors;
-    const { isRawModeSupported } = useStdin();
-    if (!isRawModeSupported) {
-        return (React.createElement(React.Fragment, null,
-            snapshot.matches("Building") && React.createElement(Text, null, "Building..."),
-            snapshot.matches("Success") && React.createElement(Text, null, "Built!")));
+export const optionsSchema = z.object({
+    dev: z.boolean().default(false),
+});
+export const build = new Command("build")
+    .description("Build your Attio extension locally")
+    .addOption(new Option("--dev", "Run in development mode (additional debugging info)"))
+    .action((unparsedOptions) => {
+    const options = optionsSchema.parse(unparsedOptions);
+    const actor = createActor(buildMachine);
+    if (options.dev) {
+        actor.subscribe((state) => {
+            console.log("state:", state.value);
+        });
     }
-    return (React.createElement(Box, { flexDirection: "column" },
-        React.createElement(Logo, null),
-        snapshot.matches("Building") && (React.createElement(Box, { flexDirection: "column" },
-            React.createElement(Box, null,
-                React.createElement(Text, null,
-                    "\uD83D\uDD28 Building...",
-                    " ",
-                    React.createElement(Text, { color: "green" },
-                        React.createElement(Spinner, { type: "dots" })))))),
-        snapshot.matches("Success") && (React.createElement(Box, { flexDirection: "column" },
-            React.createElement(Box, null,
-                React.createElement(Text, null, "\u2705 Built!")))),
-        snapshot.matches("Errored") && (React.createElement(Box, { flexDirection: "column", gap: 1 },
-            jsError && renderBuildErrors(jsError),
-            tsErrors && renderTypeScriptErrors(tsErrors),
-            !jsError && !tsErrors && (React.createElement(Box, null,
-                React.createElement(Text, null, "Unknown error")))))));
-}
+    actor.start();
+});

package/lib/commands/connection/add.js

@@ -1,184 +1,67 @@
-import { useMachine } from "@xstate/react";
-import { Box, Text } from "ink";
-import Spinner from "ink-spinner";
-import TextInput from "ink-text-input";
-import { option } from "pastel";
-import React from "react";
+import { Command, Option } from "commander";
+import { createActor } from "xstate";
 import { z } from "zod";
-import { InitialInstructions } from "../../components/InitialInstructions.js";
-import { Logo } from "../../components/Logo.js";
-import { Select } from "../../components/Select.js";
-import { addConnectionMachine, connectionTypes } from "../../machines/add-connection-machine.js";
-export const description = "Create a new connection for your Attio app";
-export const options = z.object({
-    label: z
-        .string()
-        .optional()
-        .describe(option({ description: "The label for your connection that will be displayed to users" })),
-    description: z
-        .string()
-        .optional()
-        .describe(option({
-        description: "A more detailed description of your connection that will be displayed to users",
-    })),
-    type: z
-        .enum(["secret", "oauth2-code"])
-        .optional()
-        .describe(option({ description: "The type of connection to create" })),
+import { addConnectionMachine } from "../../machines/add-connection-machine.js";
+export const optionsSchema = z.object({
+    label: z.string().optional(),
+    description: z.string().optional(),
+    type: z.enum(["secret", "oauth2-code"]).optional(),
     authorizeUrl: z
         .string()
         .url("Invalid URL, e.g. https://authorization-server.com/authorize")
         .startsWith("https://", { message: "Must provide secure authorize URL (https://...)" })
-        .optional()
-        .describe(option({ description: "The authorize URL for OAuth connection" })),
+        .optional(),
     accessTokenUrl: z
         .string()
         .url("Invalid URL, e.g. https://authorization-server.com/token")
         .startsWith("https://", { message: "Must provide secure access token URL (https://...)" })
-        .optional()
-        .describe(option({ description: "The access token URL for OAuth connection" })),
+        .optional(),
     scopes: z
         .string()
         .refine((value) => value.split(",").every((scope) => scope.trim().length > 0), {
         message: "Invalid OAuth scopes format. Must be a comma-delimited list of non-empty strings.",
     })
-        .optional()
-        .describe(option({ description: "A comma separated list of scopes for OAuth connection" })),
-    clientId: z
-        .string()
-        .optional()
-        .describe(option({ description: "The client ID for OAuth connection" })),
-    clientSecret: z
-        .string()
-        .optional()
-        .describe(option({ description: "The client secret for OAuth connection" })),
-    dev: z
-        .boolean()
-        .default(false)
-        .describe(option({ description: "Run in development mode (additional debugging info)" })),
+        .optional(),
+    clientId: z.string().optional(),
+    clientSecret: z.string().optional(),
+    dev: z.boolean().default(false),
 });
-export default function AddConnection({ options: { label, description, type: connectionType, authorizeUrl, accessTokenUrl, scopes, clientId, clientSecret, dev, }, }) {
-    const [snapshot, send] = useMachine(addConnectionMachine, {
-        input: {
-            label,
-            description,
-            connectionType,
-            authorizeUrl,
-            accessTokenUrl,
-            scopes,
-            clientId,
-            clientSecret,
-        },
+export const connectionAdd = new Command("add")
+    .description("Create a new connection for your Attio app")
+    .addOption(new Option("--label", "The label for your connection that will be displayed to users"))
+    .addOption(new Option("--description", "A more detailed description of your connection that will be displayed to users"))
+    .addOption(new Option("--type <type>", "The type of connection to create").choices([
+    "secret",
+    "oauth2-code",
+]))
+    .addOption(new Option("--authorize-url <url>", "The authorize URL for OAuth connection"))
+    .addOption(new Option("--access-token-url <url>", "The access token URL for OAuth connection"))
+    .addOption(new Option("--scopes <scopes>", "A comma separated list of scopes for OAuth connection"))
+    .addOption(new Option("--client-id <id>", "The client ID for OAuth connection"))
+    .addOption(new Option("--client-secret <secret>", "The client secret for OAuth connection"))
+    .addOption(new Option("--dev", "Run in development mode (additional debugging info)"))
+    .action((unparsedOptions) => {
+    let options;
+    try {
+        options = optionsSchema.parse(unparsedOptions);
+    }
+    catch (error) {
+        if (error instanceof z.ZodError) {
+            process.stderr.write("\nInvalid options:\n");
+            error.errors.forEach((err) => {
+                process.stderr.write(`- ${err.path.map((p) => String(p).replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)).join(".")}: ${err.message}\n`);
+            });
+            process.exit(1);
+        }
+        throw error;
+    }
+    const actor = createActor(addConnectionMachine, {
+        input: options,
     });
-    return (React.createElement(Box, { flexDirection: "column" },
-        dev && (React.createElement(Box, null,
-            React.createElement(Text, null, JSON.stringify(snapshot.value, null, 2)))),
-        React.createElement(Logo, null),
-        React.createElement(Box, { flexDirection: "column" },
-            snapshot.matches("Show config instructions") && (React.createElement(InitialInstructions, { reason: snapshot.context.configError })),
-            React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
-                snapshot.context.connectionType && (React.createElement(Box, null,
-                    React.createElement(Text, null, "Connection Type: "),
-                    React.createElement(Text, { color: "green" }, snapshot.context.connectionType === "oauth2-code"
-                        ? "OAuth2 Code"
-                        : "Secret"))),
-                snapshot.context.label && !snapshot.matches("Ask for label") && (React.createElement(Box, null,
-                    React.createElement(Text, null, "Label: "),
-                    React.createElement(Text, { color: "green" }, snapshot.context.label))),
-                snapshot.context.description && !snapshot.matches("Ask for description") && (React.createElement(Box, null,
-                    React.createElement(Text, null, "Description: "),
-                    React.createElement(Text, { color: "green" }, snapshot.context.description))),
-                snapshot.context.global !== undefined &&
-                    !snapshot.matches("Ask for global") && (React.createElement(Box, null,
-                    React.createElement(Text, null,
-                        snapshot.context.connectionType === "secret"
-                            ? "Secret"
-                            : "Token",
-                        " ",
-                        "will be created for:",
-                        " "),
-                    React.createElement(Text, { color: "green" }, snapshot.context.global
-                        ? "The entire workspace"
-                        : "An individual user"))),
-                snapshot.context.connectionType === "oauth2-code" && (React.createElement(React.Fragment, null,
-                    snapshot.context.authorizeUrl &&
-                        !snapshot.matches("Ask for Authorize URL") && (React.createElement(Box, null,
-                        React.createElement(Text, null, "Authorize URL: "),
-                        React.createElement(Text, { color: "green" }, snapshot.context.authorizeUrl))),
-                    snapshot.context.accessTokenUrl &&
-                        !snapshot.matches("Ask for Access Token URL") && (React.createElement(Box, null,
-                        React.createElement(Text, null, "Access Token URL: "),
-                        React.createElement(Text, { color: "green" }, snapshot.context.accessTokenUrl))),
-                    snapshot.context.scopes && !snapshot.matches("Ask for Scopes") && (React.createElement(Box, null,
-                        React.createElement(Text, null, "Scopes: "),
-                        React.createElement(Text, { color: "green" }, snapshot.context.scopes))),
-                    snapshot.context.clientId &&
-                        !snapshot.matches("Ask for Client ID") && (React.createElement(Box, null,
-                        React.createElement(Text, null, "Client ID: "),
-                        React.createElement(Text, { color: "green" }, snapshot.context.clientId)))))),
-            snapshot.matches("Ask for label") && (React.createElement(React.Fragment, null,
-                React.createElement(Box, null,
-                    React.createElement(Text, null, "Provide a label for your connection. This is what your users will see.")),
-                React.createElement(Box, { marginTop: 1 },
-                    React.createElement(Text, null, "> "),
-                    React.createElement(TextInput, { value: snapshot.context.label ?? "", onChange: (label) => send({ type: "Update Label", label }), onSubmit: () => send({ type: "Submit" }) })))),
-            snapshot.matches("Ask for description") && (React.createElement(React.Fragment, null,
-                React.createElement(Box, null,
-                    React.createElement(Text, null, "Provide an optional detailed description for your connection.")),
-                React.createElement(Box, { marginTop: 1 },
-                    React.createElement(Text, null, "This will be displayed to users. (You can edit this later)")),
-                React.createElement(Box, { marginTop: 1 },
-                    React.createElement(Text, null, "> "),
-                    React.createElement(TextInput, { value: snapshot.context.description ?? "", onChange: (description) => send({ type: "Update Description", description }), onSubmit: () => send({ type: "Submit" }) })))),
-            snapshot.matches("Ask for connection type") && (React.createElement(React.Fragment, null,
-                React.createElement(Box, null,
-                    React.createElement(Text, null, "What type of connection will this be?")),
-                React.createElement(Box, null,
-                    React.createElement(Select, { items: connectionTypes, onSelect: (connectionType) => send({ type: "Choose Connection Type", connectionType }) })))),
-            snapshot.matches("Ask for global") && (React.createElement(React.Fragment, null,
-                React.createElement(Box, null,
-                    React.createElement(Text, null,
-                        "A",
-                        " ",
-                        snapshot.context.connectionType === "secret" ? "secret" : "token",
-                        " ",
-                        "will be created for:")),
-                React.createElement(Box, null,
-                    React.createElement(Select, { items: [
-                            { value: false, label: "An individual user" },
-                            { value: true, label: "The entire workspace" },
-                        ], onSelect: (global) => send({ type: "Choose Global", global }) })))),
-            snapshot.matches("Ask for Authorize URL") && (React.createElement(React.Fragment, null,
-                React.createElement(Box, null,
-                    React.createElement(Text, null, "e.g. https://authorization-server.com/oauth/authorize")),
-                React.createElement(Box, { marginTop: 1 },
-                    React.createElement(Text, null, "OAuth Authorize URL: "),
-                    React.createElement(TextInput, { value: snapshot.context.authorizeUrl ?? "", onChange: (authorizeUrl) => send({ type: "Update Authorize URL", authorizeUrl }), onSubmit: () => send({ type: "Submit" }) })))),
-            snapshot.matches("Ask for Access Token URL") && (React.createElement(React.Fragment, null,
-                React.createElement(Box, null,
-                    React.createElement(Text, null, "e.g. https://authorization-server.com/oauth/token")),
-                React.createElement(Box, { marginTop: 1 },
-                    React.createElement(Text, null, "OAuth Access Token URL: "),
-                    React.createElement(TextInput, { value: snapshot.context.accessTokenUrl ?? "", onChange: (accessTokenUrl) => send({ type: "Update Access Token URL", accessTokenUrl }), onSubmit: () => send({ type: "Submit" }) })))),
-            snapshot.matches("Ask for Scopes") && (React.createElement(React.Fragment, null,
-                React.createElement(Box, null,
-                    React.createElement(Text, null, "e.g. profile,email,read,write")),
-                React.createElement(Box, { marginTop: 1 },
-                    React.createElement(Text, null, "OAuth Scopes: (separated by commas) "),
-                    React.createElement(TextInput, { value: snapshot.context.scopes ?? "", onChange: (scopes) => send({ type: "Update Scopes", scopes }), onSubmit: () => send({ type: "Submit" }) })))),
-            snapshot.matches("Ask for Client ID") && (React.createElement(React.Fragment, null,
-                React.createElement(Box, null,
-                    React.createElement(Text, null, "OAuth Client ID: "),
-                    React.createElement(TextInput, { value: snapshot.context.clientId ?? "", onChange: (clientId) => send({ type: "Update Client ID", clientId }), onSubmit: () => send({ type: "Submit" }) })))),
-            snapshot.matches("Ask for Client Secret") && (React.createElement(React.Fragment, null,
-                React.createElement(Box, null,
-                    React.createElement(Text, null, "OAuth Client Secret: "),
-                    React.createElement(TextInput, { value: snapshot.context.clientSecret ?? "", mask: "*", onChange: (clientSecret) => send({ type: "Update Client Secret", clientSecret }), onSubmit: () => send({ type: "Submit" }) })))),
-            snapshot.matches("Creating connection definition") && (React.createElement(Box, null,
-                React.createElement(Text, null, "Creating connection definition..."),
-                React.createElement(Text, { color: "green" },
-                    React.createElement(Spinner, { type: "dots" })))),
-            snapshot.matches("Success") && (React.createElement(Text, { color: "green" }, "SUCCESS!! \uD83C\uDF89 Your connection has been created.")),
-            snapshot.context.error && (React.createElement(Box, { marginTop: 1 },
-                React.createElement(Text, { color: "red" }, snapshot.context.error))))));
-}
+    if (options.dev) {
+        actor.subscribe((state) => {
+            console.log("state:", state.value);
+        });
+    }
+    actor.start();
+});

package/lib/commands/connection/index.js

@@ -1 +1,9 @@
-export const description = "Manage app connections";
+import { Command } from "commander";
+import { connectionAdd } from "./add.js";
+import { connectionList } from "./list.js";
+import { connectionRemove } from "./remove.js";
+export const connection = new Command("connection")
+    .description("Manage app connections")
+    .addCommand(connectionAdd)
+    .addCommand(connectionList)
+    .addCommand(connectionRemove);

package/lib/commands/connection/list.js

@@ -1,50 +1,20 @@
-import { useMachine } from "@xstate/react";
-import { Box, Text } from "ink";
-import Spinner from "ink-spinner";
-import { option } from "pastel";
-import React from "react";
+import { Command, Option } from "commander";
+import { createActor } from "xstate";
 import { z } from "zod";
-import { InitialInstructions } from "../../components/InitialInstructions.js";
-import { Logo } from "../../components/Logo.js";
-import { Table } from "../../components/Table.js";
 import { listConnectionsMachine } from "../../machines/list-connections-machine.js";
-export const description = "List all connections for the current major version of your Attio app";
-export const options = z.object({
-    dev: z
-        .boolean()
-        .default(false)
-        .describe(option({ description: "Run in development mode (additional debugging info)" })),
+export const optionsSchema = z.object({
+    dev: z.boolean().default(false),
+});
+export const connectionList = new Command("list")
+    .description("List all connections for the current major version of your Attio app")
+    .addOption(new Option("--dev", "Run in development mode (additional debugging info)"))
+    .action((unparsedOptions) => {
+    const options = optionsSchema.parse(unparsedOptions);
+    const actor = createActor(listConnectionsMachine);
+    if (options.dev) {
+        actor.subscribe((state) => {
+            console.log("state:", state.value);
+        });
+    }
+    actor.start();
 });
-const connectionTypeNames = {
-    "oauth2-code": "OAuth 2.0",
-    "secret": "Secret",
-};
-export default function ListConnections({ options: { dev } }) {
-    const [snapshot] = useMachine(listConnectionsMachine);
-    return (React.createElement(Box, { flexDirection: "column" },
-        dev && (React.createElement(Box, null,
-            React.createElement(Text, null, JSON.stringify(snapshot.value, null, 2)))),
-        React.createElement(Logo, null),
-        snapshot.matches("Show config instructions") && (React.createElement(InitialInstructions, { reason: snapshot.context.configError })),
-        snapshot.matches("No Connections") && (React.createElement(Box, { flexDirection: "column" },
-            React.createElement(Box, null,
-                React.createElement(Text, { color: "redBright" }, "This app has no connections."),
-                React.createElement(Text, null, " To add one, use:")),
-            React.createElement(Box, { flexDirection: "column", borderStyle: "round", width: 27, paddingX: 1, marginBottom: 1 },
-                React.createElement(Text, null, "attio connection add")))),
-        snapshot.matches("Loading Connections") && (React.createElement(Box, { flexDirection: "column" },
-            React.createElement(Box, null,
-                React.createElement(Text, null, "Loading connections... "),
-                React.createElement(Text, { color: "green" },
-                    React.createElement(Spinner, { type: "dots" }))))),
-        snapshot.matches("Error") && (React.createElement(Box, null,
-            React.createElement(Text, { color: "red" }, snapshot.context.error))),
-        snapshot.matches("Display Connections") &&
-            snapshot.context.connections &&
-            snapshot.context.connections && (React.createElement(Box, null,
-            React.createElement(Table, { rows: snapshot.context.connections.map((connection) => ({
-                    Label: connection.label,
-                    Global: connection.global ? "Yes" : "No",
-                    Type: connectionTypeNames[connection.connection_type],
-                })) })))));
-}

package/lib/commands/connection/remove.js

@@ -1,68 +1,20 @@
-import { useMachine } from "@xstate/react";
-import { Box, Text } from "ink";
-import Spinner from "ink-spinner";
-import { option } from "pastel";
-import React from "react";
+import { Command, Option } from "commander";
+import { createActor } from "xstate";
 import { z } from "zod";
-import { InitialInstructions } from "../../components/InitialInstructions.js";
-import { Logo } from "../../components/Logo.js";
-import { Select } from "../../components/Select.js";
 import { removeConnectionMachine } from "../../machines/remove-connection-machine.js";
-export const description = "Remove a connection from your Attio app";
-export const options = z.object({
-    dev: z
-        .boolean()
-        .default(false)
-        .describe(option({ description: "Run in development mode (additional debugging info)" })),
+export const optionsSchema = z.object({
+    dev: z.boolean().default(false),
+});
+export const connectionRemove = new Command("remove")
+    .description("Remove a connection from your Attio app")
+    .addOption(new Option("--dev", "Run in development mode (additional debugging info)"))
+    .action((unparsedOptions) => {
+    const options = optionsSchema.parse(unparsedOptions);
+    const actor = createActor(removeConnectionMachine);
+    if (options.dev) {
+        actor.subscribe((state) => {
+            console.log("state:", state.value);
+        });
+    }
+    actor.start();
 });
-export default function RemoveConnection({ options: { dev } }) {
-    const [snapshot, send] = useMachine(removeConnectionMachine);
-    return (React.createElement(Box, { flexDirection: "column" },
-        dev && (React.createElement(Box, null,
-            React.createElement(Text, null, JSON.stringify(snapshot.value, null, 2)))),
-        React.createElement(Logo, null),
-        snapshot.matches("Show config instructions") && (React.createElement(InitialInstructions, { reason: snapshot.context.configError })),
-        snapshot.matches("No Connections") && (React.createElement(Box, { flexDirection: "column" },
-            React.createElement(Box, null,
-                React.createElement(Text, { color: "redBright" }, "This app has no connections to remove."),
-                React.createElement(Text, null, " To add one, use:")),
-            React.createElement(Box, { flexDirection: "column", borderStyle: "round", width: 27, paddingX: 1, marginBottom: 1 },
-                React.createElement(Text, null, "attio connection add")))),
-        snapshot.matches("Loading Connections") && (React.createElement(Box, { flexDirection: "column" },
-            React.createElement(Box, null,
-                React.createElement(Text, null, "Loading connections... "),
-                React.createElement(Text, { color: "green" },
-                    React.createElement(Spinner, { type: "dots" }))))),
-        snapshot.matches("Choosing a Connection") && snapshot.context.connections && (React.createElement(Box, { flexDirection: "column" },
-            React.createElement(Box, null,
-                React.createElement(Text, null, "Which connection would you like to remove?")),
-            React.createElement(Box, null,
-                React.createElement(Select, { items: snapshot.context.connections.map((connection) => ({
-                        value: connection.global,
-                        label: `${connection.label} (${connection.global ? "workspace" : "user"})`,
-                    })), onSelect: (global) => send({ type: "Connection Chosen", global }) })))),
-        snapshot.matches("Confirm Removal") &&
-            snapshot.context.global !== undefined &&
-            snapshot.context.connections && (React.createElement(Box, { flexDirection: "column" },
-            React.createElement(Box, null,
-                React.createElement(Text, null,
-                    "Are you sure you want to remove \"",
-                    snapshot.context.connections.find(({ global }) => global === snapshot.context.global).label,
-                    "\"?")),
-            React.createElement(Box, null,
-                React.createElement(Select, { items: [
-                        { value: "Confirm", label: "Yes, remove it" },
-                        { value: "Cancel", label: "Cancel" },
-                    ], onSelect: (type) => send({ type }) })))),
-        snapshot.matches("Removing connection definition") && (React.createElement(Box, { flexDirection: "column" },
-            React.createElement(Box, null,
-                React.createElement(Text, null, "Removing connection definition..."),
-                React.createElement(Text, { color: "green" },
-                    React.createElement(Spinner, { type: "dots" }))))),
-        snapshot.matches("Cancelled") && (React.createElement(Box, null,
-            React.createElement(Text, null, "No connections have been removed."))),
-        snapshot.matches("Success") && (React.createElement(Box, null,
-            React.createElement(Text, { color: "green" }, "SUCCESS!! \uD83C\uDF89 Your connection has been removed."))),
-        snapshot.matches("Error") && (React.createElement(Box, null,
-            React.createElement(Text, { color: "red" }, snapshot.context.error)))));
-}