@nuasite/cms 0.9.0 → 0.9.2

package/package.json

@@ -14,7 +14,7 @@
     "directory": "packages/astro-cms"
   },
   "license": "Apache-2.0",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "module": "src/index.ts",
   "types": "src/index.ts",
   "type": "module",

package/src/editor/components/toolbar.tsx

@@ -10,7 +10,7 @@ export interface ToolbarCallbacks {
 	onCompare: () => void
 	onSave: () => void
 	onDiscard: () => void
-	onAIChat?: () => void
+	onSelectElement?: () => void
 	onMediaLibrary?: () => void
 	onDismissDeployment?: () => void
 	onNavigateChange?: () => void
@@ -97,7 +97,6 @@ const DeploymentStatusIndicator = ({ onDismiss }: { onDismiss?: () => void }) =>
 export const Toolbar = ({ callbacks, collectionDefinitions }: ToolbarProps) => {
 	const isEditing = signals.isEditing.value
 	const showingOriginal = signals.showingOriginal.value
-	const isChatOpen = signals.isChatOpen.value
 	const dirtyCount = signals.totalDirtyCount.value
 	const isSaving = signals.isSaving.value
 	const deploymentStatus = signals.deploymentStatus.value
@@ -107,7 +106,6 @@ export const Toolbar = ({ callbacks, collectionDefinitions }: ToolbarProps) => {
 	const [isMenuOpen, setIsMenuOpen] = useState(false)
 
 	if (isPreviewingMarkdown) return null
-	if (isChatOpen && !isEditing) return null
 
 	const showDeploymentStatus = deploymentStatus !== null
 
@@ -126,21 +124,23 @@ export const Toolbar = ({ callbacks, collectionDefinitions }: ToolbarProps) => {
 		}
 	}
 
-	const isToolbarOpen = isEditing
+	const isSelectMode = signals.isSelectMode.value
+	const isToolbarOpen = isEditing || isSelectMode
 
 	// Build menu items dynamically
 	const menuItems: Array<{ label: string; icon: ComponentChildren; onClick: () => void; isActive?: boolean }> = []
 
-	if (callbacks.onAIChat) {
+	if (callbacks.onSelectElement) {
 		menuItems.push({
-			label: 'AI Chat',
+			label: 'Select Element',
 			icon: (
 				<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-					<path d="M12 3l1.912 5.813a2 2 0 0 0 1.275 1.275L21 12l-5.813 1.912a2 2 0 0 0-1.275 1.275L12 21l-1.912-5.813a2 2 0 0 0-1.275-1.275L3 12l5.813-1.912a2 2 0 0 0 1.275-1.275L12 3z" />
+					<path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z" />
+					<path d="M13 13l6 6" />
 				</svg>
 			),
-			onClick: () => callbacks.onAIChat?.(),
-			isActive: isChatOpen,
+			onClick: () => callbacks.onSelectElement?.(),
+			isActive: isSelectMode,
 		})
 	}
 
@@ -217,8 +217,8 @@ export const Toolbar = ({ callbacks, collectionDefinitions }: ToolbarProps) => {
 			onClick={stopPropagation}
 		>
 			<div class="flex items-center justify-between sm:justify-start gap-2 sm:gap-1.5 px-2 sm:px-2 py-2 sm:py-2 bg-cms-dark rounded-cms-xl shadow-[0_8px_32px_rgba(0,0,0,0.3)] border border-white/10">
-				{/* Outlines toggle - visible in toolbar when editing */}
-				{isEditing && !showingOriginal && callbacks.onToggleHighlights && (
+				{/* Outlines toggle - visible in toolbar when editing or selecting */}
+				{isToolbarOpen && !showingOriginal && callbacks.onToggleHighlights && (
 					<ToolbarButton
 						onClick={() => callbacks.onToggleHighlights?.()}
 						class={'flex gap-2.5 bg-white/10 text-white/80 hover:bg-white/20 hover:text-white py-2! pr-1.5!'}

package/src/editor/hooks/useElementDetection.ts

@@ -58,9 +58,9 @@ export function useElementDetection(): OutlineState {
 	useEffect(() => {
 		const handleMouseMove = (ev: MouseEvent) => {
 			const isEditing = signals.isEditing.value
-			const chatOpen = signals.isChatOpen.value
+			const selectMode = signals.isSelectMode.value
 
-			if (!isEditing && !chatOpen) {
+			if (!isEditing && !selectMode) {
 				if (hideTimeoutRef.current) {
 					clearTimeout(hideTimeoutRef.current)
 					hideTimeoutRef.current = null
@@ -89,34 +89,6 @@ export function useElementDetection(): OutlineState {
 			const manifest = signals.manifest.value
 			const entries = manifest.entries
 
-			// When chat is open, only detect components (not text/image elements)
-			if (chatOpen) {
-				const componentEl = getComponentAtPosition(ev.clientX, ev.clientY)
-				if (componentEl) {
-					if (hideTimeoutRef.current) {
-						clearTimeout(hideTimeoutRef.current)
-						hideTimeoutRef.current = null
-					}
-					const rect = componentEl.getBoundingClientRect()
-					const componentId = componentEl.getAttribute(CSS.COMPONENT_ID_ATTRIBUTE)
-					const instance = componentId ? getComponentInstance(manifest, componentId) : null
-
-					setOutlineState({
-						visible: true,
-						rect,
-						isComponent: true,
-						componentName: instance?.componentName,
-						tagName: componentEl.tagName.toLowerCase(),
-						element: componentEl,
-						cmsId: null,
-					})
-					return
-				}
-
-				setOutlineState(INITIAL_STATE)
-				return
-			}
-
 			// Use the improved elementsFromPoint-based detection
 			const cmsEl = getCmsElementAtPosition(ev.clientX, ev.clientY, entries)
 
@@ -222,8 +194,8 @@ export function useComponentClickHandler({
 	useEffect(() => {
 		const handleClick = (ev: MouseEvent) => {
 			const isEditing = signals.isEditing.value
-			const chatOpen = signals.isChatOpen.value
-			if (!isEditing && !chatOpen) return
+			const selectMode = signals.isSelectMode.value
+			if (!isEditing && !selectMode) return
 
 			// Ignore clicks on CMS UI elements
 			if (isEventOnCmsUI(ev)) return
@@ -231,20 +203,6 @@ export function useComponentClickHandler({
 			const manifest = signals.manifest.value
 			const entries = manifest.entries
 
-			if (chatOpen) {
-				// When chat is open, only select components
-				const componentEl = getComponentAtPosition(ev.clientX, ev.clientY)
-				if (componentEl) {
-					const componentId = componentEl.getAttribute(CSS.COMPONENT_ID_ATTRIBUTE)
-					if (componentId) {
-						ev.preventDefault()
-						ev.stopPropagation()
-						signals.setChatContextElement(componentId)
-					}
-				}
-				return
-			}
-
 			// Normal editing mode behavior
 			// Check for text element first
 			const textEl = getCmsElementAtPosition(ev.clientX, ev.clientY, entries)

package/src/editor/index.tsx

@@ -1,17 +1,7 @@
 import { render } from 'preact'
 import { useCallback, useEffect, useRef } from 'preact/hooks'
 import type { CmsElementDeselectedMessage, CmsElementSelectedMessage } from '../types'
-import {
-	buildEditorState,
-	buildPageNavigatedMessage,
-	buildReadyMessage,
-	buildSelectedElement,
-	buildStateChangedMessage,
-	postToParent,
-} from './post-message'
 import { fetchManifest } from './api'
-import { AIChat } from './components/ai-chat'
-import { AITooltip } from './components/ai-tooltip'
 import { AttributeEditor } from './components/attribute-editor'
 import { BgImageOverlay } from './components/bg-image-overlay'
 import { BlockEditor } from './components/block-editor'
@@ -43,7 +33,6 @@ import {
 } from './editor'
 import { canRedo, canUndo, performRedo, performUndo } from './history'
 import {
-	useAIHandlers,
 	useBgImageHoverDetection,
 	useBlockEditorHandlers,
 	useComponentClickHandler,
@@ -52,6 +41,14 @@ import {
 	useTextSelection,
 	useTooltipState,
 } from './hooks'
+import {
+	buildEditorState,
+	buildPageNavigatedMessage,
+	buildReadyMessage,
+	buildSelectedElement,
+	buildStateChangedMessage,
+	postToParent,
+} from './post-message'
 import {
 	openCollectionsBrowser,
 	openMarkdownEditorForCurrentPage,
@@ -218,20 +215,6 @@ const CmsUI = () => {
 		postToParent(buildStateChangedMessage(state))
 	})
 
-	const {
-		handleAIChatToggle,
-		handleChatClose,
-		handleChatCancel,
-		handleTooltipPromptSubmit,
-		handleChatSend,
-		handleApplyToElement,
-	} = useAIHandlers({
-		config,
-		showToast: signals.showToast,
-		onTooltipHide: hideTooltip,
-		onUIUpdate: updateUI,
-	})
-
 	const {
 		blockEditorCursor,
 		handleComponentSelect,
@@ -252,6 +235,7 @@ const CmsUI = () => {
 			hideTooltip()
 			stopEditMode(updateUI)
 		} else {
+			signals.isSelectMode.value = false
 			await startEditMode(config, updateUI)
 		}
 	}, [config, updateUI, hideTooltip])
@@ -310,6 +294,10 @@ const CmsUI = () => {
 		openSeoEditor()
 	}, [])
 
+	const handleSelectElementToggle = useCallback(() => {
+		signals.isSelectMode.value = !signals.isSelectMode.value
+	}, [])
+
 	// Color toolbar handlers
 	const handleColorToolbarChange = useCallback(
 		(
@@ -409,7 +397,6 @@ const CmsUI = () => {
 	// Get reactive values from signals
 	const isEditing = signals.isEditing.value
 	const isAIProcessing = signals.isAIProcessing.value
-	const isChatOpen = signals.isChatOpen.value
 	const blockEditorState = signals.blockEditorState.value
 	const colorEditorState = signals.colorEditorState.value
 	const manifest = signals.manifest.value
@@ -485,6 +472,7 @@ const CmsUI = () => {
 						onCompare: handleCompare,
 						onSave: handleSave,
 						onDiscard: handleDiscard,
+						onSelectElement: handleSelectElementToggle,
 						onMediaLibrary: handleMediaLibrary,
 						onDismissDeployment: handleDismissDeployment,
 						onNavigateChange: () => {

package/src/editor/signals.ts

@@ -213,6 +213,7 @@ function createInitialAttributeEditorState(): AttributeEditorState {
 
 export const isEnabled = signal(false)
 export const isEditing = signal(false)
+export const isSelectMode = signal(false)
 export const isSaving = signal(false)
 export const showingOriginal = signal(false)
 export const currentEditingId = signal<string | null>(null)