@pascal-app/editor 1.0.1 → 1.0.4

package/src/components/ui/icon-ref.tsx

@@ -3,6 +3,50 @@
 import { Icon } from '@iconify/react'
 import type { IconRef } from '@pascal-app/core'
 import { type ComponentType, lazy, Suspense } from 'react'
+import { cn } from '../../lib/utils'
+
+const SVG_DATA_URI = /^data:image\/svg\+xml[^,]*,/
+
+/** Whether a `data:image/svg+xml` URI's markup paints with `currentColor`. */
+function isCurrentColorSvg(src: string): boolean {
+  const head = SVG_DATA_URI.exec(src)
+  if (!head) return false
+  const body = src.slice(head[0].length)
+  try {
+    const markup = head[0].includes(';base64') ? atob(body) : decodeURIComponent(body)
+    return markup.includes('currentColor')
+  } catch {
+    return false
+  }
+}
+
+/**
+ * A `url`-kind icon. An SVG behind an `<img>` renders in its own document, so
+ * `currentColor` in the markup resolves to black rather than the surrounding
+ * text colour — a monochrome plugin glyph then disappears against the dark
+ * sidebar. Such an SVG becomes a CSS mask over the text colour instead. Plugin
+ * manifests are third-party, so the markup is never inlined into the page.
+ */
+export function IconRefImage({
+  className,
+  size,
+  src,
+}: {
+  className?: string
+  size?: number
+  src: string
+}) {
+  const style = size === undefined ? undefined : { height: size, width: size }
+  if (!isCurrentColorSvg(src)) return <img alt="" className={className} src={src} style={style} />
+  const mask = `url("${src.replace(/["\\\n\r]/g, encodeURIComponent)}") center / contain no-repeat`
+  return (
+    <span
+      aria-hidden
+      className={cn('inline-block bg-current', className)}
+      style={{ ...style, mask, WebkitMask: mask }}
+    />
+  )
+}
 
 // `React.lazy` must be called once per loader so the resolved component keeps
 // a stable identity across renders (otherwise every parent re-render remounts
@@ -26,7 +70,7 @@ function resolveLazyIcon(module: () => Promise<{ default: ComponentType }>): Com
  */
 export function IconRefGlyph({ icon, size = 16 }: { icon: IconRef; size?: number }) {
   if (icon.kind === 'url') {
-    return <img alt="" className="shrink-0 object-contain" height={size} src={icon.src} width={size} />
+    return <IconRefImage className="shrink-0" size={size} src={icon.src} />
   }
   if (icon.kind === 'iconify') {
     return <Icon height={size} icon={icon.name} width={size} />

package/src/components/ui/item-catalog/item-catalog.tsx

@@ -1,13 +1,13 @@
 'use client'
 
 import type { AssetInput } from '@pascal-app/core'
-import { resolveCdnUrl, useViewer } from '@pascal-app/viewer'
+import { resolveCdnUrl } from '@pascal-app/viewer'
 import { useEffect } from 'react'
 import { triggerSFX } from './../../../lib/sfx-bus'
 import { cn } from './../../../lib/utils'
 import useEditor, { type CatalogCategory } from './../../../store/use-editor'
 import { resolveAssetSnapTarget, SnapTargetBadge } from '../snap-target-badge'
-import { CATALOG_ITEMS, type CatalogItem } from './catalog-items'
+import { activateCatalogItem, filterCatalogItems, isCatalogItemSelected } from '../../../lib/catalog-panel-model'
 
 export function ItemCatalog({
   category,
@@ -32,26 +32,7 @@ export function ItemCatalog({
   emptyState?: React.ReactNode
 }) {
   const selectedItem = useEditor((state) => state.selectedItem)
-  const setSelectedItem = useEditor((state) => state.setSelectedItem)
-  const setMode = useEditor((state) => state.setMode)
-  const setTool = useEditor((state) => state.setTool)
-
-  const sourceItems: CatalogItem[] = itemsOverride ?? CATALOG_ITEMS
-  // Server-provided results bypass all local filtering; otherwise filter by category/search/tags
-  const filteredItems: CatalogItem[] =
-    overrideItems ??
-    (() => {
-      const categoryItems = search
-        ? sourceItems
-        : sourceItems.filter((item) => item.category === category)
-      return categoryItems.filter((item) => {
-        const tags = item.tags ?? []
-        if (activePlacementTag && !tags.includes(activePlacementTag)) return false
-        if (activeFunctionalTag && !tags.includes(activeFunctionalTag)) return false
-        if (search && !item.name.toLowerCase().includes(search.toLowerCase())) return false
-        return true
-      })
-    })()
+  const filteredItems = filterCatalogItems({ category, items: itemsOverride, overrideItems, search, activePlacementTag, activeFunctionalTag })
 
   if (filteredItems.length === 0 && emptyState) {
     return <>{emptyState}</>
@@ -64,7 +45,7 @@ export function ItemCatalog({
     >
       {leadingTile}
       {filteredItems.map((item, index) => {
-        const isSelected = selectedItem?.src === item?.src
+        const isSelected = isCatalogItemSelected(item, selectedItem)
         const snapTarget = resolveAssetSnapTarget(item?.attachTo)
         return (
           <button
@@ -75,13 +56,7 @@ export function ItemCatalog({
             key={index}
             onClick={() => {
               triggerSFX('sfx:menu-click')
-              // Drop the current selection before arming placement — keeping
-              // it would route shortcuts (rotate & co) to both the ghost and
-              // the selected node.
-              useViewer.getState().setSelection({ selectedIds: [], zoneId: null })
-              setSelectedItem(item)
-              setTool(item.tool ?? 'item')
-              setMode('build')
+              activateCatalogItem(item)
             }}
             onMouseEnter={() => triggerSFX('sfx:menu-hover')}
             type="button"

package/src/components/ui/level-duplicate-dialog.tsx

@@ -2,7 +2,7 @@
 
 import type { LevelNode } from '@pascal-app/core'
 import { useEffect, useState } from 'react'
-import type { LevelDuplicatePreset } from '../../lib/level-duplication'
+import type { LevelDuplicatePreset } from '@pascal-app/core/building'
 import { getLevelDisplayName } from '@pascal-app/core'
 import { cn } from '../../lib/utils'
 import {

package/src/components/ui/node-icon-image.tsx

@@ -0,0 +1,16 @@
+'use client'
+
+import { ARTIFACT_URL_PREFIX, resolveArtifactUrl } from '@pascal-app/core'
+import Image, { type ImageProps } from 'next/image'
+
+/**
+ * A node's icon or thumbnail. A scripted object's thumbnail is an
+ * `artifact://` image: it resolves through the project's artifact store and
+ * skips image optimization, whose server-side fetch has no session to read a
+ * private project's artifact with.
+ */
+export function NodeIconImage({ src, ...props }: Omit<ImageProps, 'src'> & { src: string }) {
+  if (!src.startsWith(ARTIFACT_URL_PREFIX)) return <Image src={src} {...props} />
+  const url = resolveArtifactUrl(src)
+  return url ? <Image src={url} unoptimized {...props} /> : null
+}

package/src/components/ui/panels/collections/collections-popover.tsx

@@ -1,12 +1,13 @@
 'use client'
 
-import type { AnyNodeId, Collection, CollectionId } from '@pascal-app/core'
+import type { AnyNodeId, CollectionId } from '@pascal-app/core'
 import { useScene } from '@pascal-app/core'
 import {
   Check,
   ChevronDown,
   ChevronRight,
   Layers,
+  Minus,
   MoreHorizontal,
   Pencil,
   Plus,
@@ -29,12 +30,12 @@ import {
 import { cn } from '../../../../lib/utils'
 
 interface CollectionsPopoverProps {
-  nodeId: AnyNodeId
-  collectionIds?: CollectionId[]
+  /** The elements the popover adds to and removes from collections, together. */
+  nodeIds: AnyNodeId[]
   children: React.ReactNode
 }
 
-export function CollectionsPopover({ nodeId, collectionIds, children }: CollectionsPopoverProps) {
+export function CollectionsPopover({ nodeIds, children }: CollectionsPopoverProps) {
   const collections = useScene((s) => s.collections)
   const nodes = useScene((s) => s.nodes)
   const createCollection = useScene((s) => s.createCollection)
@@ -54,12 +55,11 @@ export function CollectionsPopover({ nodeId, collectionIds, children }: Collecti
   const [deletingId, setDeletingId] = useState<CollectionId | null>(null)
   const [expandedIds, setExpandedIds] = useState<Set<CollectionId>>(new Set())
 
-  const memberIds = collectionIds ?? []
   const allCollections = Object.values(collections)
 
   const handleCreate = () => {
     if (!createName.trim()) return
-    createCollection(createName.trim(), [nodeId])
+    createCollection(createName.trim(), nodeIds)
     setCreateName('')
     setShowCreateInput(false)
   }
@@ -71,10 +71,11 @@ export function CollectionsPopover({ nodeId, collectionIds, children }: Collecti
   }
 
   const toggleMembership = (collectionId: CollectionId) => {
-    if (memberIds.includes(collectionId)) {
-      removeFromCollection(collectionId, nodeId)
+    const memberIds = collections[collectionId]?.nodeIds ?? []
+    if (nodeIds.every((id) => memberIds.includes(id))) {
+      removeFromCollection(collectionId, nodeIds)
     } else {
-      addToCollection(collectionId, nodeId)
+      addToCollection(collectionId, nodeIds)
     }
   }
 
@@ -161,13 +162,15 @@ export function CollectionsPopover({ nodeId, collectionIds, children }: Collecti
             <div className="flex flex-col items-center justify-center gap-2 px-4 py-8 text-center">
               <Layers className="h-6 w-6 text-muted-foreground/40" />
               <p className="text-muted-foreground text-xs">
-                No collections yet. Create one to group items together.
+                No collections yet. Create one to group elements together.
               </p>
             </div>
           ) : (
             <ul className="divide-y divide-border/30">
               {allCollections.map((collection) => {
-                const isIn = memberIds.includes(collection.id)
+                const memberCount = nodeIds.filter((id) => collection.nodeIds.includes(id)).length
+                const isIn = memberCount === nodeIds.length
+                const isPartly = memberCount > 0 && !isIn
                 const isExpanded = expandedIds.has(collection.id)
                 const isRenaming = renamingId === collection.id
                 const isDeleting = deletingId === collection.id
@@ -268,10 +271,13 @@ export function CollectionsPopover({ nodeId, collectionIds, children }: Collecti
                       <div
                         className={cn(
                           'pointer-events-none flex h-4 w-4 shrink-0 items-center justify-center rounded border transition-colors',
-                          isIn ? 'border-primary bg-primary/20 text-primary' : 'border-border/50',
+                          isIn || isPartly
+                            ? 'border-primary bg-primary/20 text-primary'
+                            : 'border-border/50',
                         )}
                       >
                         {isIn && <Check className="h-2.5 w-2.5" />}
+                        {isPartly && <Minus className="h-2.5 w-2.5" />}
                       </div>
 
                       {/* Expand toggle (only if has members) */}
@@ -290,7 +296,7 @@ export function CollectionsPopover({ nodeId, collectionIds, children }: Collecti
                       )}
 
                       {/* More dropdown */}
-                      <DropdownMenu>
+                      <DropdownMenu modal={false}>
                         <DropdownMenuTrigger asChild>
                           <button
                             className="flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground opacity-0 transition-colors hover:bg-white/10 hover:text-foreground group-hover:opacity-100"
@@ -332,7 +338,7 @@ export function CollectionsPopover({ nodeId, collectionIds, children }: Collecti
                               <span
                                 className={cn(
                                   'truncate text-[11px]',
-                                  nid === nodeId
+                                  nodeIds.includes(nid)
                                     ? 'font-medium text-foreground'
                                     : 'text-muted-foreground',
                                 )}