-
-
-
+
+
+
+
Browser Not Supported
-
+
Your browser doesn't support Web Bluetooth, which is required to
connect to your embroidery machine.
-
-
- Please try one of these options:
-
-
- - Use a supported browser (Chrome, Edge, or Opera)
- -
- Download the Desktop app from{" "}
-
- GitHub Releases
-
-
-
-
-
-
+
+
+ Please try one of these options:
+
+
+ - Use a supported browser (Chrome, Edge, or Opera)
+ -
+ Download the Desktop app from{" "}
+
+ GitHub Releases
+
+
+
+
+
+
);
}
diff --git a/src/components/MachineConnection.tsx b/src/components/MachineConnection.tsx
deleted file mode 100644
index ac85da1..0000000
--- a/src/components/MachineConnection.tsx
+++ /dev/null
@@ -1,224 +0,0 @@
-import { useState } from "react";
-import {
- InformationCircleIcon,
- CheckCircleIcon,
- BoltIcon,
- PauseCircleIcon,
- ExclamationTriangleIcon,
- WifiIcon,
-} from "@heroicons/react/24/solid";
-import type { MachineInfo } from "../types/machine";
-import { MachineStatus } from "../types/machine";
-import { ConfirmDialog } from "./ConfirmDialog";
-import {
- shouldConfirmDisconnect,
- getStateVisualInfo,
-} from "../utils/machineStateHelpers";
-import { hasError, getErrorDetails } from "../utils/errorCodeHelpers";
-
-interface MachineConnectionProps {
- isConnected: boolean;
- machineInfo: MachineInfo | null;
- machineStatus: MachineStatus;
- machineStatusName: string;
- machineError: number;
- onConnect: () => void;
- onDisconnect: () => void;
- onRefresh: () => void;
-}
-
-export function MachineConnection({
- isConnected,
- machineInfo,
- machineStatus,
- machineStatusName,
- machineError,
- onConnect,
- onDisconnect,
-}: MachineConnectionProps) {
- const [showDisconnectConfirm, setShowDisconnectConfirm] = useState(false);
-
- const handleDisconnectClick = () => {
- if (shouldConfirmDisconnect(machineStatus)) {
- setShowDisconnectConfirm(true);
- } else {
- onDisconnect();
- }
- };
-
- const handleConfirmDisconnect = () => {
- setShowDisconnectConfirm(false);
- onDisconnect();
- };
-
- const stateVisual = getStateVisualInfo(machineStatus);
-
- // Map icon names to Heroicons
- const stateIcons = {
- ready: CheckCircleIcon,
- active: BoltIcon,
- waiting: PauseCircleIcon,
- complete: CheckCircleIcon,
- interrupted: PauseCircleIcon,
- error: ExclamationTriangleIcon,
- };
-
- const statusBadgeColors = {
- idle: "bg-info-100 dark:bg-info-900/30 text-info-800 dark:text-info-300",
- info: "bg-info-100 dark:bg-info-900/30 text-info-800 dark:text-info-300",
- active:
- "bg-warning-100 dark:bg-warning-900/30 text-warning-800 dark:text-warning-300",
- waiting:
- "bg-warning-100 dark:bg-warning-900/30 text-warning-800 dark:text-warning-300",
- warning:
- "bg-warning-100 dark:bg-warning-900/30 text-warning-800 dark:text-warning-300",
- complete:
- "bg-success-100 dark:bg-success-900/30 text-success-800 dark:text-success-300",
- success:
- "bg-success-100 dark:bg-success-900/30 text-success-800 dark:text-success-300",
- interrupted:
- "bg-danger-100 dark:bg-danger-900/30 text-danger-800 dark:text-danger-300",
- error:
- "bg-danger-100 dark:bg-danger-900/30 text-danger-800 dark:text-danger-300",
- danger:
- "bg-danger-100 dark:bg-danger-900/30 text-danger-800 dark:text-danger-300",
- };
-
- // Only show error info when connected AND there's an actual error
- const errorInfo =
- isConnected && hasError(machineError)
- ? getErrorDetails(machineError)
- : null;
-
- return (
- <>
- {!isConnected ? (
-
-
-
-
-
- Machine
-
-
- Ready to connect
-
-
-
-
-
-
- ) : (
-
-
-
-
-
- Machine Info
-
-
- {machineInfo?.modelNumber || "Brother Embroidery Machine"}
-
-
-
-
- {/* Error/Info Display */}
- {errorInfo &&
- (errorInfo.isInformational ? (
-
-
-
-
-
- {errorInfo.title}
-
-
-
-
- ) : (
-
-
-
- ⚠️
-
-
-
- {errorInfo.title}
-
-
- Error Code: 0x
- {machineError.toString(16).toUpperCase().padStart(2, "0")}
-
-
-
-
- ))}
-
- {/* Status Badge */}
-
-
- Status:
-
-
- {(() => {
- const Icon = stateIcons[stateVisual.iconName];
- return ;
- })()}
- {machineStatusName}
-
-
-
- {/* Machine Info */}
- {machineInfo && (
-
-
-
- Max Area
-
-
- {(machineInfo.maxWidth / 10).toFixed(1)} ×{" "}
- {(machineInfo.maxHeight / 10).toFixed(1)} mm
-
-
- {machineInfo.totalCount !== undefined && (
-
-
- Total Stitches
-
-
- {machineInfo.totalCount.toLocaleString()}
-
-
- )}
-
- )}
-
-
-
- )}
-
-
setShowDisconnectConfirm(false)}
- variant="danger"
- />
-
- );
-}
diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
new file mode 100644
index 0000000..935eecf
--- /dev/null
+++ b/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,155 @@
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+function AlertDialog({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
+function AlertDialogTrigger({
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function AlertDialogPortal({
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function AlertDialogOverlay({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function AlertDialogContent({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+
+ )
+}
+
+function AlertDialogHeader({
+ className,
+ ...props
+}: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function AlertDialogFooter({
+ className,
+ ...props
+}: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function AlertDialogTitle({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function AlertDialogDescription({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function AlertDialogAction({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function AlertDialogCancel({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+export {
+ AlertDialog,
+ AlertDialogPortal,
+ AlertDialogOverlay,
+ AlertDialogTrigger,
+ AlertDialogContent,
+ AlertDialogHeader,
+ AlertDialogFooter,
+ AlertDialogTitle,
+ AlertDialogDescription,
+ AlertDialogAction,
+ AlertDialogCancel,
+}
diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx
new file mode 100644
index 0000000..1421354
--- /dev/null
+++ b/src/components/ui/alert.tsx
@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+ "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+ {
+ variants: {
+ variant: {
+ default: "bg-card text-card-foreground",
+ destructive:
+ "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+)
+
+function Alert({
+ className,
+ variant,
+ ...props
+}: React.ComponentProps<"div"> & VariantProps) {
+ return (
+
+ )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function AlertDescription({
+ className,
+ ...props
+}: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
new file mode 100644
index 0000000..fd3a406
--- /dev/null
+++ b/src/components/ui/badge.tsx
@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+ "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+ {
+ variants: {
+ variant: {
+ default:
+ "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+ secondary:
+ "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+ destructive:
+ "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+ outline:
+ "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+)
+
+function Badge({
+ className,
+ variant,
+ asChild = false,
+ ...props
+}: React.ComponentProps<"span"> &
+ VariantProps & { asChild?: boolean }) {
+ const Comp = asChild ? Slot : "span"
+
+ return (
+
+ )
+}
+
+export { Badge, badgeVariants }
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
new file mode 100644
index 0000000..fad5e69
--- /dev/null
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,62 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+ {
+ variants: {
+ variant: {
+ default: "bg-primary text-primary-foreground hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+ outline:
+ "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+ secondary:
+ "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ ghost:
+ "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-9 px-4 py-2 has-[>svg]:px-3",
+ sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+ lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+ icon: "size-9",
+ "icon-sm": "size-8",
+ "icon-lg": "size-10",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+)
+
+function Button({
+ className,
+ variant = "default",
+ size = "default",
+ asChild = false,
+ ...props
+}: React.ComponentProps<"button"> &
+ VariantProps & {
+ asChild?: boolean
+ }) {
+ const Comp = asChild ? Slot : "button"
+
+ return (
+
+ )
+}
+
+export { Button, buttonVariants }
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 0000000..681ad98
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+export {
+ Card,
+ CardHeader,
+ CardFooter,
+ CardTitle,
+ CardAction,
+ CardDescription,
+ CardContent,
+}
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..60cc10e
--- /dev/null
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,141 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
+function DialogTrigger({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
+function DialogPortal({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
+function DialogClose({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
+function DialogOverlay({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function DialogContent({
+ className,
+ children,
+ showCloseButton = true,
+ ...props
+}: React.ComponentProps & {
+ showCloseButton?: boolean
+}) {
+ return (
+
+
+
+ {children}
+ {showCloseButton && (
+
+
+ Close
+
+ )}
+
+
+ )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function DialogTitle({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function DialogDescription({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+export {
+ Dialog,
+ DialogClose,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogOverlay,
+ DialogPortal,
+ DialogTitle,
+ DialogTrigger,
+}
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
new file mode 100644
index 0000000..01e468b
--- /dev/null
+++ b/src/components/ui/popover.tsx
@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
+function PopoverTrigger({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
+function PopoverContent({
+ className,
+ align = "center",
+ sideOffset = 4,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+ )
+}
+
+function PopoverAnchor({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
diff --git a/src/components/ui/progress.tsx b/src/components/ui/progress.tsx
new file mode 100644
index 0000000..e7a416c
--- /dev/null
+++ b/src/components/ui/progress.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+function Progress({
+ className,
+ value,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+ )
+}
+
+export { Progress }
diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx
new file mode 100644
index 0000000..bb3ad74
--- /dev/null
+++ b/src/components/ui/separator.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+ className,
+ orientation = "horizontal",
+ decorative = true,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+export { Separator }
diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx
new file mode 100644
index 0000000..32ea0ef
--- /dev/null
+++ b/src/components/ui/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+export { Skeleton }
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..d084cca
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 78c3c8e..315135f 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -8,6 +8,12 @@
"types": ["vite/client", "web-bluetooth", "node"],
"skipLibCheck": true,
+ /* Path Aliases */
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./src/*"]
+ },
+
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
diff --git a/vite.config.mts b/vite.config.mts
index 334ee21..f8ad4fd 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -2,11 +2,13 @@ import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { viteStaticCopy } from 'vite-plugin-static-copy'
import tailwindcss from '@tailwindcss/vite'
-import { dirname, join } from 'path'
+import { dirname, join, resolve } from 'path'
import { fileURLToPath } from 'url'
import { readFileSync } from 'fs'
import type { Plugin } from 'vite'
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
// Read version from package.json
const packageJson = JSON.parse(readFileSync('./package.json', 'utf-8'))
const appVersion = packageJson.version
@@ -141,6 +143,11 @@ export default defineConfig({
define: {
__APP_VERSION__: JSON.stringify(appVersion),
},
+ resolve: {
+ alias: {
+ "@": resolve(__dirname, "./src"),
+ },
+ },
plugins: [
react(),
tailwindcss(),