+ {/* Project Name */}
+
+
+
+ setProjectName(e.target.value)}
+ autoFocus
+ />
+
+
+ {/* File Upload */}
+
+
+
+
+
+ {selectedFile ? (
+
+
+
+ ) : (
+ <>
+
+
+
+ {selectedFile.name}
++ {(selectedFile.size / 1024 / 1024).toFixed(2)} MB +
++ {isDragActive + ? "Drop file here" + : "Drop STEP file here or click to browse"} +
++ Supports .step and .stp files +
+ + )} +
+
+
+ {stage === "error" && (
+
+ {getErrorMessage(pollFetcher.data ?? null)}
+
+ )}
+
+
+ );
+}
diff --git a/apps/assembly/app/components/Home/ProjectCard.tsx b/apps/assembly/app/components/Home/ProjectCard.tsx
new file mode 100644
index 0000000000..6146ef9a47
--- /dev/null
+++ b/apps/assembly/app/components/Home/ProjectCard.tsx
@@ -0,0 +1,76 @@
+import { Card } from "@carbon/react";
+import { BsFolder2Open } from "react-icons/bs";
+import { Link } from "react-router";
+import { path } from "~/utils/path";
+
+interface ProjectCardProps {
+ project: {
+ id: string;
+ name: string;
+ description?: string | null;
+ status: string;
+ thumbnailPath?: string | null;
+ updatedAt: string;
+ };
+}
+
+const statusStyles: Record
+ {status === "done" && (
+
+
+ {label}
+ {detail && (
+ ({detail})
+ )}
+
+
+ {project.thumbnailPath ? (
+ 
+ ) : (
+
+ + {project.name} +
+ {project.description && ( ++ {project.description} +
+ )} +
+
+ {project.status}
+
+
+ {timeAgo(project.updatedAt)}
+
+
+
+
+
+
+ {initials}
+
+ {{title}}
"
+ });
+
+ // XKT loader for converted STEP files
+ xktLoaderRef.current = new XKTLoaderPlugin(viewer);
+
+ // GLTF loader for standard 3D models
+ gltfLoaderRef.current = new GLTFLoaderPlugin(viewer);
+
+ // Click handler for part selection
+ viewer.scene.input.on("mouseclicked", (coords: number[]) => {
+ const hit = viewer.scene.pick({
+ canvasPos: coords,
+ pickSurface: true
+ });
+
+ if (hit && hit.entity) {
+ const entityId = hit.entity.id;
+ console.log("[VIEWER] Clicked entity:", entityId);
+ onPartSelectedRef.current?.(entityId, entityId);
+ } else {
+ console.log("[VIEWER] Clicked empty space");
+ onPartSelectedRef.current?.(null, null);
+ }
+ });
+
+ viewerRef.current = viewer;
+ setIsViewerReady(true);
+ onViewerReadyRef.current?.(viewer);
+ });
+
+ return () => {
+ cancelled = true;
+ if (viewerRef.current) {
+ viewerRef.current.destroy();
+ viewerRef.current = null;
+ setIsViewerReady(false);
+ setIsModelLoaded(false);
+ }
+ };
+ // Note: Callbacks use refs to avoid re-creating viewer on every render
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [isClient, canvasId, navCubeCanvasId]);
+
+ // Load model when URL changes or viewer becomes ready
+ useEffect(() => {
+ if (!modelUrl || !isViewerReady || !viewerRef.current) return;
+
+ const viewer = viewerRef.current;
+ let cancelled = false;
+ setIsModelLoaded(false);
+
+ // Clear existing models
+ const existingModels = Object.keys(viewer.scene.models);
+ existingModels.forEach((modelId) => {
+ viewer.scene.models[modelId]?.destroy();
+ });
+
+ // Load new model
+ let sceneModel: ReturnType
+ {/* Main 3D canvas */}
+
+
+ {/* NavCube canvas - positioned top-right like BuildOS */}
+
+
+ );
+}
+
+// Utility functions for viewer control
+export function flyToViewpoint(
+ viewer: XeokitViewer,
+ viewpoint: CameraState,
+ duration = 0.5
+) {
+ viewer.cameraFlight.flyTo({
+ eye: [viewpoint.eye.x, viewpoint.eye.y, viewpoint.eye.z],
+ look: [viewpoint.center.x, viewpoint.center.y, viewpoint.center.z],
+ up: [viewpoint.up.x, viewpoint.up.y, viewpoint.up.z],
+ duration
+ });
+}
+
+export function flyToEntity(
+ viewer: XeokitViewer,
+ entityId: string,
+ duration = 0.5
+) {
+ const entity = viewer.scene.objects[entityId];
+ if (entity) {
+ viewer.cameraFlight.flyTo({
+ aabb: entity.aabb,
+ duration
+ });
+ }
+}
+
+export function setViewPreset(
+ viewer: Viewer,
+ preset: "front" | "back" | "top" | "bottom" | "left" | "right" | "iso"
+) {
+ const aabb = viewer.scene.aabb;
+ const center = [
+ (aabb[0] + aabb[3]) / 2,
+ (aabb[1] + aabb[4]) / 2,
+ (aabb[2] + aabb[5]) / 2
+ ];
+ const size = Math.max(
+ aabb[3] - aabb[0],
+ aabb[4] - aabb[1],
+ aabb[5] - aabb[2]
+ );
+ const distance = size * 2;
+
+ const presets: Record
+ {/* Step info */}
+
+ );
+}
diff --git a/apps/assembly/app/components/WorkInstructions/CenterViewer/ViewerToolbar.tsx b/apps/assembly/app/components/WorkInstructions/CenterViewer/ViewerToolbar.tsx
new file mode 100644
index 0000000000..456820daaa
--- /dev/null
+++ b/apps/assembly/app/components/WorkInstructions/CenterViewer/ViewerToolbar.tsx
@@ -0,0 +1,161 @@
+import { cn } from "@carbon/react";
+import type { ReactNode } from "react";
+import {
+ BsArrowsAngleExpand,
+ BsChevronBarContract,
+ BsChevronBarExpand,
+ BsChevronBarUp,
+ BsDiamond,
+ BsFullscreen,
+ BsRulers,
+ BsScissors,
+ BsSquare,
+ BsSquareFill
+} from "react-icons/bs";
+
+export interface ViewerToolbarProps {
+ onFitToView: () => void;
+ onSetView: (
+ preset: "front" | "back" | "top" | "bottom" | "left" | "right" | "iso"
+ ) => void;
+ onToggleExploded: () => void;
+ isExploded: boolean;
+ onToggleSectionPlane?: () => void;
+ isSectionPlaneActive?: boolean;
+ onToggleMeasure?: () => void;
+ isMeasureActive?: boolean;
+}
+
+interface ToolbarButton {
+ id: string;
+ label: string;
+ icon: ReactNode;
+ onClick: () => void;
+ isActive?: boolean;
+}
+
+export function ViewerToolbar({
+ onFitToView,
+ onSetView,
+ onToggleExploded,
+ isExploded,
+ onToggleSectionPlane,
+ isSectionPlaneActive,
+ onToggleMeasure,
+ isMeasureActive
+}: ViewerToolbarProps) {
+ const viewButtons: ToolbarButton[] = [
+ {
+ id: "front",
+ label: "Front",
+ icon:
+
+ {selectedStepIndex + 1}/{steps.length}
+
+ {stepLabel && (
+
+ {stepLabel}
+
+ )}
+
+
+ {/* Transport controls */}
+
+
+
+
+
+
+
+
+ {/* Timeline */}
+
+ {/* Progress */}
+
+
+ {/* Step Markers */}
+
+
+ {steps.map((_, index) => (
+
+ ))}
+
+
+
+ );
+}
diff --git a/apps/assembly/app/components/WorkInstructions/ExportModal.tsx b/apps/assembly/app/components/WorkInstructions/ExportModal.tsx
new file mode 100644
index 0000000000..a1a5e11bb5
--- /dev/null
+++ b/apps/assembly/app/components/WorkInstructions/ExportModal.tsx
@@ -0,0 +1,390 @@
+import {
+ Button,
+ Input,
+ Label,
+ Modal,
+ ModalBody,
+ ModalContent,
+ ModalDescription,
+ ModalFooter,
+ ModalHeader,
+ ModalTitle,
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue
+} from "@carbon/react";
+import { useState } from "react";
+import {
+ BsClipboard,
+ BsDownload,
+ BsEnvelope,
+ BsFilePdf,
+ BsLink45Deg,
+ BsPhone,
+ BsPlayCircle,
+ BsQrCode,
+ BsShare
+} from "react-icons/bs";
+import { useFetcher } from "react-router";
+
+interface ShareLink {
+ id: string;
+ token: string;
+ expiresAt: string | null;
+ password: string | null;
+ allowDownload: boolean;
+ createdAt: string;
+}
+
+interface ExportModalProps {
+ open: boolean;
+ onOpenChange: (open: boolean) => void;
+ projectId: string;
+ shareLinks: ShareLink[];
+}
+
+type ExportTab = "video" | "pdf" | "share" | "mobile";
+
+export function ExportModal({
+ open,
+ onOpenChange,
+ projectId,
+ shareLinks
+}: ExportModalProps) {
+ const [activeTab, setActiveTab] = useState
+ {/* View Presets */}
+ {viewButtons.map((button) => (
+
+ ))}
+
+ {/* Divider */}
+
+
+ {/* Tools */}
+ {toolButtons.map((button) => (
+
+ ))}
+
+
+ {tabs.map((tab) => (
+
+ ))}
+
+
+ {/* Share Tab */}
+ {activeTab === "share" && (
+
+ setShowShareForm(false)}
+ isSubmitting={isSubmitting}
+ />
+ ) : (
+
+ )}
+
+ )}
+
+ {/* Video Tab */}
+ {activeTab === "video" && (
+ + Create shareable links for operators to view instructions on any + device. +
+ + {/* Existing Links */} + {shareLinks.length > 0 && ( +
+ {shareLinks.map((link) => (
+
+ )}
+
+ {/* Create New Link */}
+ {showShareForm ? (
+
+
+ ))}
+
+
+
+
+
+ {baseUrl}/share/{link.token.slice(0, 8)}...
+
+ + {link.expiresAt + ? `Expires: ${new Date(link.expiresAt).toLocaleDateString()}` + : "No expiration"} + {link.password && " | Password protected"} +
+
+
+
+
+
+
+ )}
+
+ {/* PDF Tab */}
+ {activeTab === "pdf" && (
+ + Generate a video of the full assembly sequence with all + animations and annotations. +
+
+
+ )}
+
+ {/* Mobile Tab */}
+ {activeTab === "mobile" && (
+ + Generate a printable PDF document with step-by-step instructions + and images. +
+ +
+
+ )}
+ + Operators can view instructions on mobile devices using share + links. The viewer is optimized for touch screens. +
+
+
+
+
+
+
+
+
+
+ {/* Sidebar panel */}
+
+ );
+}
+
+function countGeometries(
+ node: AssemblyTreeNode,
+ counts: Record
+ {/* Tab Headers */}
+
+
+ {/* Toggle button — always visible */}
+
+
+
+
+
+
+ {/* Tab Content */}
+
+ {activeTab === "model" ? (
+
+
+ {/* Geometries Section (always visible at bottom) */}
+
+
+ );
+}
+
+interface ComponentTreeNodeProps {
+ node: AssemblyTreeNode;
+ depth: number;
+ onNodeSelect?: (nodeId: string) => void;
+ selectedNodeId?: string | null;
+}
+
+function ComponentTreeNode({
+ node,
+ depth,
+ onNodeSelect,
+ selectedNodeId
+}: ComponentTreeNodeProps) {
+ const [isExpanded, setIsExpanded] = useState(depth < 2); // Auto-expand first 2 levels
+ const hasChildren = node.children && node.children.length > 0;
+ const isSelected = selectedNodeId === node.id;
+ // Show folder icon only for assemblies with multiple children
+ const showAsFolderIcon =
+ node.type === "assembly" && node.children && node.children.length > 1;
+
+ // Auto-expand when a descendant is selected (e.g., from viewer click)
+ useEffect(() => {
+ if (selectedNodeId && hasChildren && !isSelected) {
+ // Check if selected node is a descendant of this node
+ const hasSelectedDescendant = node.children?.some((child) =>
+ containsNodeId(child, selectedNodeId)
+ );
+ if (hasSelectedDescendant) {
+ setIsExpanded(true);
+ }
+ }
+ }, [selectedNodeId, hasChildren, isSelected, node.children]);
+
+ return (
+
+
+
+
+
+ {/* Children */}
+ {hasChildren && isExpanded && (
+
+ );
+}
diff --git a/apps/assembly/app/components/WorkInstructions/LeftPanel/GeometriesList.tsx b/apps/assembly/app/components/WorkInstructions/LeftPanel/GeometriesList.tsx
new file mode 100644
index 0000000000..c0b1291df5
--- /dev/null
+++ b/apps/assembly/app/components/WorkInstructions/LeftPanel/GeometriesList.tsx
@@ -0,0 +1,61 @@
+import { cn } from "@carbon/react";
+
+export interface GeometriesListProps {
+ geometries: Record
+ {node.children!.map((child) => (
+
+ )}
+
+ {/* Header */}
+
+ );
+}
diff --git a/apps/assembly/app/components/WorkInstructions/LeftPanel/StepTree.tsx b/apps/assembly/app/components/WorkInstructions/LeftPanel/StepTree.tsx
new file mode 100644
index 0000000000..41e0ca0393
--- /dev/null
+++ b/apps/assembly/app/components/WorkInstructions/LeftPanel/StepTree.tsx
@@ -0,0 +1,238 @@
+import { cn } from "@carbon/react";
+import { useState } from "react";
+import { BsChevronDown, BsChevronRight } from "react-icons/bs";
+import type { AssemblyStep } from "~/types/assembly.types";
+
+export interface StepTreeProps {
+ steps: AssemblyStep[];
+ selectedStepIndex: number;
+ onStepSelect: (index: number) => void;
+ onStepsReorder?: (fromIndex: number, toIndex: number) => void;
+}
+
+export function StepTree({
+ steps,
+ selectedStepIndex,
+ onStepSelect,
+ onStepsReorder
+}: StepTreeProps) {
+ // Group steps by their parent (for hierarchical display)
+ const groupedSteps = groupStepsByHierarchy(steps);
+
+ return (
+
+
+ Geometries
+
+
+ {sortedGeometries.length} components · {totalCount} total
+
+
+
+ {/* Geometry list */}
+
+ {sortedGeometries.map(([name, count]) => (
+
+ ))}
+
+
+
+ );
+}
+
+interface StepGroupData {
+ groupId: string | null;
+ groupLabel?: string;
+ steps: { step: AssemblyStep; index: number }[];
+ children: StepGroupData[];
+}
+
+function StepGroup({
+ group,
+ steps,
+ selectedStepIndex,
+ onStepSelect,
+ depth = 0
+}: {
+ group: StepGroupData;
+ steps: AssemblyStep[];
+ selectedStepIndex: number;
+ onStepSelect: (index: number) => void;
+ depth?: number;
+}) {
+ const [isExpanded, setIsExpanded] = useState(true);
+ const hasChildren = group.children.length > 0;
+
+ return (
+
+ {groupedSteps.map((group, groupIndex) => (
+
+
+ {/* Group header (if has label) */}
+ {group.groupLabel && (
+
+ )}
+
+ {/* Steps in this group */}
+ {(isExpanded || !group.groupLabel) && (
+ <>
+ {group.steps.map(({ step, index }) => (
+ onStepSelect(index)}
+ depth={depth}
+ />
+ ))}
+
+ {/* Nested groups */}
+ {group.children.map((childGroup, childIndex) => (
+
+ );
+}
+
+interface StepTreeItemProps {
+ step: AssemblyStep;
+ index: number;
+ isSelected: boolean;
+ onSelect: () => void;
+ depth: number;
+}
+
+function StepTreeItem({
+ step,
+ index,
+ isSelected,
+ onSelect,
+ depth
+}: StepTreeItemProps) {
+ return (
+
+ );
+}
+
+// Helper to format part names
+function formatPartNames(partNames: string[]): string {
+ if (partNames.length === 0) return "";
+ if (partNames.length === 1) return partNames[0];
+ if (partNames.length === 2) return partNames.join(", ");
+ return `${partNames[0]}, ${partNames[1]} +${partNames.length - 2} more`;
+}
+
+// Helper to group steps into hierarchy
+function groupStepsByHierarchy(steps: AssemblyStep[]): StepGroupData[] {
+ // For now, just create a flat list
+ // In a full implementation, this would parse stepNumber (1.1, 1.2.1, etc.)
+ // and create nested groups
+
+ const rootGroup: StepGroupData = {
+ groupId: null,
+ steps: steps.map((step, index) => ({ step, index })),
+ children: []
+ };
+
+ // Group by groupLabel if present
+ const groupedByLabel = new Map
+ {/* Tab Headers */}
+
+ );
+}
+
+// Helper function to count part geometries
+function countGeometries(
+ node: AssemblyTreeNode,
+ counts: Record
+
+
+
+
+ {/* Tab Content */}
+
+ {activeTab === "model" ? (
+
+
+ {/* Geometries Section (always visible at bottom) */}
+
+ Select a step to manage media
+
+ );
+ }
+
+ return (
+
+
+ );
+}
diff --git a/apps/assembly/app/components/WorkInstructions/RightPanel/NotesTab.tsx b/apps/assembly/app/components/WorkInstructions/RightPanel/NotesTab.tsx
new file mode 100644
index 0000000000..e7a76295bf
--- /dev/null
+++ b/apps/assembly/app/components/WorkInstructions/RightPanel/NotesTab.tsx
@@ -0,0 +1,59 @@
+import { useCallback, useEffect, useState } from "react";
+import type { AssemblyStep } from "~/types/assembly.types";
+
+export interface NotesTabProps {
+ step?: AssemblyStep;
+ onStepUpdate?: (field: keyof AssemblyStep, value: unknown) => void;
+}
+
+export function NotesTab({ step, onStepUpdate }: NotesTabProps) {
+ const [localNotes, setLocalNotes] = useState(step?.notes || "");
+
+ // Sync local state when step changes
+ useEffect(() => {
+ setLocalNotes(step?.notes || "");
+ }, [step?.notes]);
+
+ const handleNotesChange = useCallback((value: string) => {
+ setLocalNotes(value);
+ }, []);
+
+ const handleNotesBlur = useCallback(() => {
+ onStepUpdate?.("notes", localNotes);
+ }, [localNotes, onStepUpdate]);
+
+ if (!step) {
+ return (
+ + Step Media ({mediaIds.length}) +
+ + {/* Upload Area */} + fileInputRef.current?.click()}
+ className={cn(
+ "border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors mb-4",
+ isDragging
+ ? "border-primary bg-primary/10"
+ : "border-border hover:border-muted-foreground"
+ )}
+ >
+
+
+ {isUploading ? (
+
+
+ {/* Media Grid */}
+ {mediaIds.length > 0 ? (
+
+
+
+ ) : (
+ <>
+ Uploading...
+
+ Drop files here or click to upload
+
+
+ Images, videos, or PDFs
+
+
+ )}
+
+
+ ) : (
+
+ {mediaIds.map((mediaId) => (
+
+
+ {/* Placeholder - in real implementation, fetch media details */}
+
+ ))}
+
+
+
+ {/* Remove button */}
+
+
+ {/* Media ID label */}
+
+ {mediaId}
+
+
+ No media attached to this step
+
+ )}
+
+ Select a step to add notes
+
+ );
+ }
+
+ return (
+
+
+ Step Notes +
+ ++ Add specific notes for this assembly step. These will be shown to + operators during assembly. +
+ +