@growgroup/visual-editor 0.1.6 → 0.2.0

package/src/components/ui/dialog.tsx

@@ -4,6 +4,8 @@ import * as React from "react"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
 import { X } from "lucide-react"
 
+import { useEditorAppearance } from "../../editor/contexts/EditorAppearanceContext"
+
 import { cn } from "../../lib/utils"
 
 const Dialog = DialogPrimitive.Root
@@ -17,27 +19,38 @@ const DialogClose = DialogPrimitive.Close
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
+>(({ className, ...props }, ref) => {
+  const appearance = useEditorAppearance();
+  return (
   <DialogPrimitive.Overlay
+      data-editor-theme={appearance["data-editor-theme"]}
+      data-editor-surface="overlay"
     ref={ref}
     className={cn(
+        appearance.className,
       "fixed inset-0 z-[100] bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
   />
-))
+);
+})
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
+>(({ className, children, ...props }, ref) => {
+  const appearance = useEditorAppearance();
+  return (
   <DialogPortal>
     <DialogOverlay />
     <DialogPrimitive.Content
+      data-editor-theme={appearance["data-editor-theme"]}
+      data-editor-surface="dialog"
       ref={ref}
       className={cn(
+        appearance.className,
         "fixed left-[50%] top-[50%] z-[100] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className
       )}
@@ -46,11 +59,12 @@ const DialogContent = React.forwardRef<
       {children}
       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
         <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
+        <span className="sr-only">閉じる</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
-))
+);
+})
 DialogContent.displayName = DialogPrimitive.Content.displayName
 
 const DialogHeader = ({

package/src/components/ui/dropdown-menu.tsx

@@ -4,6 +4,8 @@ import * as React from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
 import { Check, ChevronRight, Circle } from "lucide-react"
 
+import { useEditorAppearance } from "../../editor/contexts/EditorAppearanceContext"
+
 import { cn } from "../../lib/utils"
 
 const DropdownMenu = DropdownMenuPrimitive.Root
@@ -43,28 +45,39 @@ DropdownMenuSubTrigger.displayName =
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
+>(({ className, ...props }, ref) => {
+  const appearance = useEditorAppearance();
+  return (
   <DropdownMenuPrimitive.SubContent
+      data-editor-theme={appearance["data-editor-theme"]}
+      data-editor-surface="popup"
     ref={ref}
     className={cn(
+        appearance.className,
       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
       className
     )}
     {...props}
   />
-))
+);
+})
 DropdownMenuSubContent.displayName =
   DropdownMenuPrimitive.SubContent.displayName
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+>(({ className, sideOffset = 4, ...props }, ref) => {
+  const appearance = useEditorAppearance();
+  return (
   <DropdownMenuPrimitive.Portal>
     <DropdownMenuPrimitive.Content
+      data-editor-theme={appearance["data-editor-theme"]}
+      data-editor-surface="popup"
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
+        appearance.className,
         "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
         className
@@ -72,7 +85,8 @@ const DropdownMenuContent = React.forwardRef<
       {...props}
     />
   </DropdownMenuPrimitive.Portal>
-))
+);
+})
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 
 const DropdownMenuItem = React.forwardRef<

package/src/components/ui/popover.tsx

@@ -3,6 +3,8 @@
 import * as React from "react"
 import * as PopoverPrimitive from "@radix-ui/react-popover"
 
+import { useEditorAppearance } from "../../editor/contexts/EditorAppearanceContext"
+
 import { cn } from "../../lib/utils"
 
 const Popover = PopoverPrimitive.Root
@@ -14,20 +16,26 @@ const PopoverAnchor = PopoverPrimitive.Anchor
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => {
+  const appearance = useEditorAppearance();
+  return (
   <PopoverPrimitive.Portal>
     <PopoverPrimitive.Content
+      data-editor-theme={appearance["data-editor-theme"]}
+      data-editor-surface="popup"
       ref={ref}
       align={align}
       sideOffset={sideOffset}
       className={cn(
+        appearance.className,
         "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]",
         className
       )}
       {...props}
     />
   </PopoverPrimitive.Portal>
-))
+);
+})
 PopoverContent.displayName = PopoverPrimitive.Content.displayName
 
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

package/src/components/ui/select.tsx

@@ -4,6 +4,8 @@ import * as React from "react"
 import * as SelectPrimitive from "@radix-ui/react-select"
 import { Check, ChevronDown, ChevronUp } from "lucide-react"
 
+import { useEditorAppearance } from "../../editor/contexts/EditorAppearanceContext"
+
 import { cn } from "../../lib/utils"
 
 const Select = SelectPrimitive.Root
@@ -70,11 +72,16 @@ SelectScrollDownButton.displayName =
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
+>(({ className, children, position = "popper", ...props }, ref) => {
+  const appearance = useEditorAppearance();
+  return (
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
+      data-editor-theme={appearance["data-editor-theme"]}
+      data-editor-surface="popup"
       ref={ref}
       className={cn(
+        appearance.className,
         "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
@@ -96,7 +103,8 @@ const SelectContent = React.forwardRef<
       <SelectScrollDownButton />
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
-))
+);
+})
 SelectContent.displayName = SelectPrimitive.Content.displayName
 
 const SelectLabel = React.forwardRef<

package/src/components/ui/tooltip.tsx

@@ -3,6 +3,8 @@
 import * as React from "react"
 import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 
+import { useEditorAppearance } from "../../editor/contexts/EditorAppearanceContext"
+
 import { cn } from "../../lib/utils"
 
 const TooltipProvider = TooltipPrimitive.Provider
@@ -14,19 +16,25 @@ const TooltipTrigger = TooltipPrimitive.Trigger
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+>(({ className, sideOffset = 4, ...props }, ref) => {
+  const appearance = useEditorAppearance();
+  return (
   <TooltipPrimitive.Portal>
     <TooltipPrimitive.Content
+      data-editor-theme={appearance["data-editor-theme"]}
+      data-editor-surface="tooltip"
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
+        appearance.className,
         "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
         className
       )}
       {...props}
     />
   </TooltipPrimitive.Portal>
-))
+);
+})
 TooltipContent.displayName = TooltipPrimitive.Content.displayName
 
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/editor/EditorToolbar.tsx

@@ -232,7 +232,7 @@ export const EditorToolbar = memo(function EditorToolbar({
         選択中の副次操作(重ね順・グループ)は…メニューへ畳む。配色もビューアに合わせる。
       */}
       <div className="absolute bottom-5 left-1/2 z-50 max-w-[calc(100%-5rem)] -translate-x-1/2 px-0">
-        <div className="no-scrollbar flex items-center gap-0.5 overflow-x-auto rounded-xl border border-[#444444] bg-[#2c2c2c]/95 px-1.5 py-1.5 text-gray-200 shadow-2xl shadow-black/60 backdrop-blur"
+        <div className="ed-toolbar no-scrollbar flex items-center gap-1 overflow-x-auto"
           style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}>
           {/* 取り消し/やり直し */}
           <ActionButton icon={Undo2} onClick={onUndo} disabled={!canUndo} tooltip="元に戻す" shortcut={`${cmdKey}Z`} />
@@ -359,26 +359,16 @@ export const EditorToolbar = memo(function EditorToolbar({
             </>
           )}
 
-          {/* パネル(CSS変数・コンポーネント) */}
-          {(onOpenVariables || onOpenComponents) && (
+          {(onOpenVariables || onOpenComponents) && <>
             <Separator orientation="vertical" className="mx-1 h-6 bg-white/15" />
-          )}
-          {onOpenVariables && (
-            <ActionButton
-              icon={Paintbrush}
-              onClick={onOpenVariables}
-              tooltip="CSS変数"
-              className={hasVariables ? 'text-sky-400' : undefined}
-            />
-          )}
-          {onOpenComponents && (
-            <ActionButton
-              icon={Component}
-              onClick={onOpenComponents}
-              tooltip="コンポーネント"
-              className={hasComponents ? 'text-sky-400' : undefined}
-            />
-          )}
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild><Button variant="ghost" size="sm" className="h-9 gap-2 px-2 text-xs"><Component className="h-4 w-4" />パネル<ChevronDown className="h-3 w-3" /></Button></DropdownMenuTrigger>
+              <DropdownMenuContent side="top" align="end" className="w-52">
+                {onOpenComponents && <DropdownMenuItem onSelect={onOpenComponents} className="gap-2"><Component className="h-4 w-4" />コンポーネント</DropdownMenuItem>}
+                {onOpenVariables && <DropdownMenuItem onSelect={onOpenVariables} className="gap-2"><Paintbrush className="h-4 w-4" />CSS変数</DropdownMenuItem>}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </>}
 
           {/* 選択中のみ: よく使う3つを出し、残りは…メニュー */}
           {selectedCount > 0 && (