Add preview annotations to desks UI

apps/ui/src/ui-desks/connectors/utils.ts

@@ -199,8 +199,8 @@ export function getDeskWidgetConnectionLabel( widget: DeskWidget ) {
 			return typeof props.mediaKind === 'string' && props.mediaKind === 'video' ? 'Video' : 'Image';
 		case 'drawing':
 			return 'Drawing';
-		case 'sd-artefact':
-			return 'Artefact';
+		case 'scratchpad':
+			return 'Scratchpad';
 		case 'blog':
 			return 'Blog';
 		case 'post-collection':

apps/ui/src/ui-desks/desk/canvas/style.module.css

@@ -25,6 +25,11 @@
 
 .canvas :global(.tl-background) {
 	background: var(--ui-desks-bg, rgb(232, 234, 235)) !important;
+	transition: background 220ms ease;
+}
+
+.canvas[data-ui-desks-focus-mode] :global(.tl-background) {
+	background: #ced0d3 !important;
 }
 
 .canvas :global(.tl-grid) {

apps/ui/src/ui-desks/desk/provider/context.ts

@@ -5,8 +5,13 @@ import type {
 	SelectedDeskConnectorToolbarItem,
 } from '@/ui-desks/connectors/utils';
 import type { getSelectedWidgetToolbarItem } from '@/ui-desks/desk/selection-toolbar/selection';
+import type { DeskFocusDesk, DeskFocusMode } from '@/ui-desks/focus-mode/types';
 import type { StackViewMode } from '@/ui-desks/stacks/utils';
-import type { WidgetPastePayload } from '@/ui-desks/widgets/types';
+import type {
+	DeskWidget,
+	DeskWidgetDefinition,
+	WidgetPastePayload,
+} from '@/ui-desks/widgets/types';
 import type { ReactNode } from 'react';
 import type { Editor, TLShapeId } from 'tldraw';
 
@@ -26,6 +31,9 @@ export interface DeskContextValue {
 	selectedConnectorToolbarItem: SelectedDeskConnectorToolbarItem | null;
 	selectedWidgetConnectionTargets: DeskWidgetConnectionTarget[];
 	isConnectingWidget: boolean;
+	focusMode: DeskFocusMode | null;
+	focusedWidget: DeskWidget | null;
+	focusedWidgetDefinition: DeskWidgetDefinition | null;
 	pressedStackId: string | null;
 	registerEditor: RegisterDeskEditor;
 	pressStack: ( stackId: string ) => void;
@@ -52,6 +60,10 @@ export interface DeskContextValue {
 	removeSelectedConnector: () => boolean;
 	startConnectingWidget: ( shapeId: TLShapeId ) => boolean;
 	focusConnectedWidget: ( shapeId: TLShapeId ) => boolean;
+	startFocusMode: ( widgetId: string, focusDesk?: DeskFocusDesk ) => boolean;
+	setFocusDesk: ( focusDesk: DeskFocusDesk ) => boolean;
+	getFocusDeskSnapshot: () => DeskFocusDesk | null;
+	stopFocusMode: () => boolean;
 }
 
 export interface AddDeskWidgetOptions {
@@ -86,6 +98,9 @@ const defaultDeskContext: DeskContextValue = {
 	selectedConnectorToolbarItem: null,
 	selectedWidgetConnectionTargets: [],
 	isConnectingWidget: false,
+	focusMode: null,
+	focusedWidget: null,
+	focusedWidgetDefinition: null,
 	pressedStackId: null,
 	registerEditor: noopRegisterEditor,
 	pressStack: noopPressStack,
@@ -105,6 +120,10 @@ const defaultDeskContext: DeskContextValue = {
 	removeSelectedConnector: () => false,
 	startConnectingWidget: () => false,
 	focusConnectedWidget: () => false,
+	startFocusMode: () => false,
+	setFocusDesk: () => false,
+	getFocusDeskSnapshot: () => null,
+	stopFocusMode: () => false,
 };
 
 export const DeskContext = createContext< DeskContextValue >( defaultDeskContext );