@pascal-app/editor 1.0.3 → 1.0.4

package/src/components/ui/sidebar/panels/plugins-panel.tsx

@@ -1,218 +0,0 @@
-'use client'
-
-import { Icon } from '@iconify/react'
-import { type IconRef, useScene } from '@pascal-app/core'
-import { ChevronLeft, ChevronRight, ExternalLink, Puzzle } from 'lucide-react'
-import { lazy, type ReactNode, Suspense, useState, useSyncExternalStore } from 'react'
-import { editorHostPanelRegistry } from '../../../../lib/plugin-panels'
-import { Button } from '../../primitives/button'
-
-const PLUGIN_AUTHORING_URL =
-  'https://editor.pascal.app/docs/developers/plugins'
-
-function renderPluginIcon(ref: IconRef): ReactNode {
-  if (ref.kind === 'url') {
-    return <img alt="" className="h-8 w-8 object-contain" src={ref.src} />
-  }
-  if (ref.kind === 'iconify') {
-    return <Icon height={28} icon={ref.name} width={28} />
-  }
-  if (ref.kind === 'svg') {
-    return (
-      <svg height={28} viewBox={ref.viewBox} width={28}>
-        <path d={ref.path} fill="currentColor" />
-      </svg>
-    )
-  }
-  const LazyIcon = lazy(ref.module)
-  return (
-    <Suspense fallback={<Puzzle className="h-7 w-7" />}>
-      <LazyIcon />
-    </Suspense>
-  )
-}
-
-export function PluginsPanel() {
-  const [selectedPluginId, setSelectedPluginId] = useState<string | null>(null)
-  const panels = useSyncExternalStore(
-    editorHostPanelRegistry.subscribe,
-    editorHostPanelRegistry.getSnapshot,
-    editorHostPanelRegistry.getSnapshot,
-  )
-  const installedPlugins = useScene((state) => state.installedPlugins)
-  const setInstalledPlugins = useScene((state) => state.setInstalledPlugins)
-  const readOnly = useScene((state) => state.readOnly)
-  const plugins = Array.from(
-    new Map(
-      panels
-        .filter((panel) => panel.pluginId)
-        .map((panel) => [panel.pluginId as string, panel]),
-    ).entries(),
-  )
-  const selectedPlugin = selectedPluginId
-    ? plugins.find(([pluginId]) => pluginId === selectedPluginId)
-    : undefined
-
-  if (selectedPlugin) {
-    const [pluginId, panel] = selectedPlugin
-    const installed = installedPlugins.includes(pluginId)
-
-    return (
-      <div className="flex h-full flex-col overflow-y-auto p-4">
-        <div>
-          <Button
-            className="rounded-full"
-            onClick={() => setSelectedPluginId(null)}
-            size="sm"
-            variant="ghost"
-          >
-            <ChevronLeft className="h-4 w-4" />
-            All plugins
-          </Button>
-
-          <div className="mt-5 flex items-start gap-4">
-            <div className="flex h-16 w-16 shrink-0 items-center justify-center rounded-2xl bg-background/60">
-              {renderPluginIcon(panel.icon)}
-            </div>
-            <div className="min-w-0 pt-1">
-              <h2 className="font-semibold text-lg text-sidebar-foreground">{panel.label}</h2>
-              <p className="text-sidebar-foreground/50 text-sm">
-                {installed ? 'Installed' : 'Not installed'}
-              </p>
-            </div>
-          </div>
-
-          <p className="mt-5 text-sidebar-foreground/70 text-sm">
-            {panel.description ?? 'Adds a new tool panel to the editor.'}
-          </p>
-
-          <dl className="mt-6 divide-y divide-border/50 rounded-xl border border-border/60">
-            <div className="p-3">
-              <dt className="text-sidebar-foreground/50 text-xs">Plugin ID</dt>
-              <dd className="mt-1 break-all text-sidebar-foreground text-sm">{pluginId}</dd>
-            </div>
-            {panel.creator && (
-              <div className="p-3">
-                <dt className="text-sidebar-foreground/50 text-xs">Creator</dt>
-                <dd className="mt-1 text-sm">
-                  {panel.creator.url ? (
-                    <a
-                      className="inline-flex items-center gap-1 text-sidebar-foreground underline-offset-4 hover:underline"
-                      href={panel.creator.url}
-                      rel="noreferrer"
-                      target="_blank"
-                    >
-                      {panel.creator.name}
-                      <ExternalLink className="h-3 w-3" />
-                    </a>
-                  ) : (
-                    panel.creator.name
-                  )}
-                </dd>
-              </div>
-            )}
-            {panel.pluginUrl && (
-              <div className="p-3">
-                <dt className="text-sidebar-foreground/50 text-xs">Plugin</dt>
-                <dd className="mt-1 text-sm">
-                  <a
-                    className="inline-flex items-center gap-1 text-sidebar-foreground underline-offset-4 hover:underline"
-                    href={panel.pluginUrl}
-                    rel="noreferrer"
-                    target="_blank"
-                  >
-                    View plugin
-                    <ExternalLink className="h-3 w-3" />
-                  </a>
-                </dd>
-              </div>
-            )}
-          </dl>
-
-          <Button
-            className="mt-5 rounded-full"
-            disabled={readOnly}
-            onClick={() => {
-              const next = installed
-                ? installedPlugins.filter((id) => id !== pluginId)
-                : [...installedPlugins, pluginId]
-              setInstalledPlugins(next, { explicit: true })
-            }}
-            variant={installed ? 'outline' : 'default'}
-          >
-            {installed ? 'Uninstall' : 'Install'}
-          </Button>
-        </div>
-
-        <div className="mt-auto pt-6">
-          <a
-            className="inline-flex items-center gap-1.5 text-sidebar-foreground/70 text-sm underline-offset-4 hover:text-sidebar-foreground hover:underline"
-            href={PLUGIN_AUTHORING_URL}
-            rel="noreferrer"
-            target="_blank"
-          >
-            Create a Pascal plugin
-            <ExternalLink className="h-3.5 w-3.5" />
-          </a>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="flex h-full flex-col overflow-y-auto p-4">
-      <div className="mb-5">
-        <h2 className="font-semibold text-lg text-sidebar-foreground">Plugins</h2>
-        <p className="mt-1 text-sidebar-foreground/60 text-sm">
-          Add focused tools and content to this project.
-        </p>
-      </div>
-
-      <div className="flex flex-col gap-3">
-        {plugins.map(([pluginId, panel]) => {
-          const installed = installedPlugins.includes(pluginId)
-          return (
-            <button
-              className="w-full rounded-xl border border-border/60 bg-accent/20 p-3 text-left transition-colors hover:bg-accent/40"
-              key={pluginId}
-              onClick={() => setSelectedPluginId(pluginId)}
-              type="button"
-            >
-              <div className="flex items-start gap-3">
-                <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-background/60">
-                  {renderPluginIcon(panel.icon)}
-                </div>
-                <div className="min-w-0 flex-1">
-                  <div className="flex items-center justify-between gap-3">
-                    <div>
-                      <h3 className="font-medium text-sidebar-foreground">{panel.label}</h3>
-                      <p className="text-sidebar-foreground/50 text-xs">
-                        {installed ? 'Installed' : 'Not installed'}
-                      </p>
-                    </div>
-                    <ChevronRight className="h-4 w-4 shrink-0 text-sidebar-foreground/50" />
-                  </div>
-                  <p className="mt-2 text-sidebar-foreground/60 text-sm">
-                    {panel.description ?? 'Adds a new tool panel to the editor.'}
-                  </p>
-                </div>
-              </div>
-            </button>
-          )
-        })}
-      </div>
-
-      <div className="mt-auto pt-6">
-        <a
-          className="inline-flex items-center gap-1.5 text-sidebar-foreground/70 text-sm underline-offset-4 hover:text-sidebar-foreground hover:underline"
-          href={PLUGIN_AUTHORING_URL}
-          rel="noreferrer"
-          target="_blank"
-        >
-          Create a Pascal plugin
-          <ExternalLink className="h-3.5 w-3.5" />
-        </a>
-      </div>
-    </div>
-  )
-}

package/src/components/viewer/viewer-units-panel.tsx

@@ -1,116 +0,0 @@
-'use client'
-
-import {
-  type AnyNode,
-  buildUnitReport,
-  type LevelNode,
-  type UnitKind,
-  type UnitNode,
-} from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
-import { useMemo } from 'react'
-import { getAreaUnitLabel, squareMetersToAreaUnit } from '../../lib/measurements'
-import { cn } from '../../lib/utils'
-
-const UNIT_KIND_LABELS: Record<UnitKind, string> = {
-  apartment: 'Apartment',
-  'hotel-room': 'Hotel room',
-  commercial: 'Commercial',
-  common: 'Common',
-}
-
-type UnitRow = {
-  unit: UnitNode
-  zoneCount: number
-  areaM2: number
-  /** Levels carrying member zones, lowest ordinal first. */
-  levelIds: LevelNode['id'][]
-}
-
-/**
- * Read-only unit list shared by the editor preview and the published viewer.
- * Clicking a row focuses the unit and reveals a member floor through the shared
- * `useViewer.selection`; a second click clears the focus. Hidden without units.
- */
-export function ViewerUnitsPanel({ nodes }: { nodes: Readonly<Record<string, AnyNode>> }) {
-  const focusedUnitId = useViewer((s) => s.focusedUnitId)
-  const areaUnit = useViewer((s) => s.unit)
-
-  const rows = useMemo<UnitRow[]>(
-    () =>
-      Object.values(nodes)
-        .filter((node): node is UnitNode => node.type === 'unit')
-        .map((unit) => {
-          const report = buildUnitReport(unit, nodes)
-          const ordinals = new Map<LevelNode['id'], number>()
-          for (const member of report.members) {
-            if (member.levelId && member.levelOrdinal !== null) {
-              ordinals.set(member.levelId, member.levelOrdinal)
-            }
-          }
-          return {
-            unit,
-            zoneCount: report.memberCount,
-            areaM2: report.grossAreaM2,
-            levelIds: [...ordinals.entries()].sort((a, b) => a[1] - b[1]).map(([id]) => id),
-          }
-        }),
-    [nodes],
-  )
-
-  if (rows.length === 0) return null
-
-  return (
-    <div className="corner-smooth pointer-events-auto flex w-48 flex-col overflow-hidden rounded-2xl border border-border/40 bg-background/95 py-1 shadow-elevation-4 backdrop-blur-xl">
-      <span className="px-3 py-2 font-medium text-[10px] text-muted-foreground uppercase tracking-wider">
-        Units
-      </span>
-      <div className="flex flex-col">
-        {rows.map((row) => {
-          const isFocused = row.unit.id === focusedUnitId
-          const area = Math.round(squareMetersToAreaUnit(row.areaM2, areaUnit))
-          const details = `${UNIT_KIND_LABELS[row.unit.kind]} · ${row.zoneCount} ${row.zoneCount === 1 ? 'zone' : 'zones'} · ${area} ${getAreaUnitLabel(areaUnit)}`
-          return (
-            <button
-              className={cn(
-                'group/row relative flex w-full cursor-pointer select-none items-center border-border/50 border-r border-r-transparent border-b px-3 py-1.5 text-sm transition-all duration-200',
-                isFocused
-                  ? 'border-r-3 border-r-white bg-accent/50 text-foreground'
-                  : 'text-muted-foreground hover:bg-accent/30 hover:text-foreground',
-              )}
-              key={row.unit.id}
-              onClick={() => {
-                const viewer = useViewer.getState()
-                if (isFocused) {
-                  viewer.setFocusedUnit(null)
-                  return
-                }
-                viewer.setFocusedUnit(row.unit.id)
-                // Same rule as the editor: keep the current floor when it
-                // already carries a member zone, otherwise reveal the lowest one.
-                const current = viewer.selection.levelId
-                const levelId =
-                  current && row.levelIds.includes(current) ? current : row.levelIds[0]
-                if (levelId && levelId !== current) viewer.setSelection({ levelId })
-              }}
-              type="button"
-            >
-              <div className="flex min-w-0 flex-1 items-center gap-2">
-                <span className="flex h-4 w-4 shrink-0 items-center justify-center">
-                  <span
-                    className="h-2.5 w-2.5 rounded-full"
-                    style={{ backgroundColor: row.unit.color }}
-                  />
-                </span>
-                <div className="min-w-0 flex-1 text-left">
-                  <div className="truncate">{row.unit.name}</div>
-                  <div className="truncate text-[11px] text-muted-foreground">{details}</div>
-                </div>
-              </div>
-            </button>
-          )
-        })}
-      </div>
-    </div>
-  )
-}