8abfc94b99
* feat(editor): preset-system polish — paint panel, slim action bar, icon rail - Export `MaterialPaintPanel` so embedders host the paint material picker in their own panel (community docks it in the Build sidebar) instead of the bottom action bar. - ActionMenu: drop the build / material-paint / furnish modes and the structure-tools palette row + paint tray (the host's Build sidebar owns building now). Reduce `structure-tools` to the shared `tools` lookup still used by cursor/floorplan indicators; remove the orphaned `useContextualTools`. - MaterialPicker: swatches wrap into a fluid `auto-fill` grid that fills width. - IconRail (tab-bar): bigger icons, grayscale-when-idle, Radix tooltip, w-14 rail; sync `RAIL_WIDTH` to 56. - Inspector footer: hand the host `footer` to kind-owned custom panels via `InspectorFooterContext` so the save button renders without per-kind wiring. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * chore: biome format pass Whole-repo formatter normalization (line wrap/unwrap only, no logic changes) surfaced by the format-on-edit hook against prior drift. Kept separate from the feature commit so the preset-system diff stays reviewable. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
80 lines
3.2 KiB
TypeScript
80 lines
3.2 KiB
TypeScript
'use client'
|
|
|
|
import { useViewer } from '@pascal-app/viewer'
|
|
import { motion } from 'motion/react'
|
|
import { TooltipProvider } from './../../../components/ui/primitives/tooltip'
|
|
import { useIsMobile } from './../../../hooks/use-mobile'
|
|
import { useReducedMotion } from './../../../hooks/use-reduced-motion'
|
|
import { cn } from './../../../lib/utils'
|
|
import useEditor from './../../../store/use-editor'
|
|
import { CameraActions } from './camera-actions'
|
|
import { ControlModes } from './control-modes'
|
|
import { GridSnapControl, SecondaryToggles } from './view-toggles'
|
|
|
|
// Mobile bottom offset matches the viewer's overlap behind the sheet's
|
|
// rounded corners (SHEET_OVERLAP_PX in editor-layout-mobile) so the menu sits
|
|
// just above that strip instead of inside it.
|
|
const MOBILE_BOTTOM_OFFSET = 24
|
|
|
|
export function ActionMenu({ className }: { className?: string }) {
|
|
const isMobile = useIsMobile()
|
|
const hasSelectionOnMobile = useViewer((s) => isMobile && s.selection.selectedIds.length > 0)
|
|
const hasReferenceOnMobile = useEditor((s) => isMobile && Boolean(s.selectedReferenceId))
|
|
const CONTEXTUAL_TABS = new Set(['ai', 'items', 'studio'])
|
|
const isContextualPanelOnMobile = useEditor(
|
|
(s) => isMobile && CONTEXTUAL_TABS.has(s.activeSidebarPanel),
|
|
)
|
|
const reducedMotion = useReducedMotion()
|
|
|
|
// On mobile, defer the bottom rail to the selection bar when something
|
|
// is selected — the contextual actions take priority over mode controls.
|
|
// Also hide on Chat / Items / Studio tabs; those are contextual workflows
|
|
// (composing / picking furniture / generating renders) where the build
|
|
// menu is irrelevant.
|
|
if (hasSelectionOnMobile || hasReferenceOnMobile || isContextualPanelOnMobile) return null
|
|
|
|
const transition = reducedMotion
|
|
? { duration: 0 }
|
|
: { type: 'spring' as const, bounce: 0.2, duration: 0.4 }
|
|
|
|
return (
|
|
<TooltipProvider>
|
|
<motion.div
|
|
className={cn(
|
|
'left-1/2 z-50 -translate-x-1/2',
|
|
isMobile ? 'absolute origin-bottom scale-90' : 'fixed bottom-6',
|
|
'rounded-2xl border border-border bg-background/90 shadow-2xl backdrop-blur-md',
|
|
'transition-colors duration-200 ease-out',
|
|
className,
|
|
)}
|
|
layout
|
|
style={isMobile ? { bottom: MOBILE_BOTTOM_OFFSET } : undefined}
|
|
transition={transition}
|
|
>
|
|
{isMobile ? (
|
|
<div className="flex flex-col items-stretch gap-0.5 px-2 py-1.5">
|
|
{/* Row 1: control modes only */}
|
|
<div className="flex items-center justify-center gap-1">
|
|
<ControlModes />
|
|
</div>
|
|
{/* Row 2: grid snap + secondary toggles (orbit + top view hidden) */}
|
|
<div className="flex items-center justify-center gap-1 border-border/50 border-t pt-1">
|
|
<GridSnapControl />
|
|
<SecondaryToggles />
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center justify-center gap-1 px-2 py-1.5">
|
|
<ControlModes />
|
|
<div className="mx-1 h-5 w-px bg-border" />
|
|
<GridSnapControl />
|
|
<SecondaryToggles />
|
|
<div className="mx-1 h-5 w-px bg-border" />
|
|
<CameraActions />
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
</TooltipProvider>
|
|
)
|
|
}
|