@ifc-lite/viewer 1.22.0 → 1.22.1

package/src/components/viewer/CesiumPlacementEditor.tsx

@@ -69,6 +69,19 @@ function round2(value: number): number {
   return Math.round(value * 100) / 100;
 }
 
+/**
+ * Round a value expressed in map units to the nearest millimetre in metres,
+ * regardless of what unit the map CRS uses. Keeps the gizmo precision stable
+ * when the resolved map unit flips between mm (legacy spec-strict fallback)
+ * and m (resolveMapUnitToMetreScale heuristic): a sub-cm drag was previously
+ * lost to `round2()`'s 0.01-unit floor as soon as map units became metres,
+ * making the vertical handle appear frozen on small movements.
+ */
+function roundToMm(value: number, mapUnitScale: number): number {
+  const mmInMapUnits = 0.001 / (mapUnitScale > 0 ? mapUnitScale : 1);
+  return Math.round(value / mmInMapUnits) * mmInMapUnits;
+}
+
 function formatSigned(value: number, suffix: string): string {
   const rounded = Math.abs(value) < 0.005 ? 0 : round2(value);
   return `${rounded >= 0 ? '+' : ''}${rounded.toFixed(2)} ${suffix}`;
@@ -473,10 +486,12 @@ export function CesiumPlacementEditor({
       const worldY = closestYOnVerticalLineFromRay(ray, dragState.anchorX, dragState.anchorZ);
       if (worldY === null) return;
       const deltaMeters = worldY - dragState.startWorldY;
+      const mus = getMapUnitScale(projectedCRS, lengthUnitScale);
       updateDraft({
-        orthogonalHeight: round2(
+        orthogonalHeight: roundToMm(
           dragState.startDraft.orthogonalHeight
             + metersToMapUnits(deltaMeters, projectedCRS, lengthUnitScale),
+          mus,
         ),
       });
       return;

package/src/components/viewer/CommandPalette.tsx

@@ -58,6 +58,11 @@ import {
   Sparkles,
   Eraser,
   MapPin,
+  PenLine,
+  Slice,
+  Layers3,
+  SquareStack,
+  ChevronsUpDown,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { useViewerStore } from '@/store';
@@ -306,6 +311,12 @@ export function CommandPalette({ open, onOpenChange }: CommandPaletteProps) {
         action: () => { useViewerStore.getState().cameraCallbacks.fitAll?.(); } },
       { id: 'view:frame', label: 'Frame Selection', keywords: 'zoom focus selected', category: 'View', icon: Crosshair, shortcut: 'F',
         action: () => { useViewerStore.getState().cameraCallbacks.frameSelection?.(); } },
+      { id: 'view:stacked', label: 'Level — Stacked', keywords: 'level display mode stacked default storey storeys', category: 'View', icon: Layers3,
+        action: () => { useViewerStore.getState().setLevelDisplayMode('stacked'); } },
+      { id: 'view:exploded', label: 'Level — Exploded', keywords: 'level display mode exploded explode lift storey storeys gap', category: 'View', icon: ChevronsUpDown,
+        action: () => { useViewerStore.getState().setLevelDisplayMode('exploded'); } },
+      { id: 'view:solo', label: 'Level — Solo', keywords: 'level display mode solo isolate storey single only', category: 'View', icon: SquareStack,
+        action: () => { useViewerStore.getState().setLevelDisplayMode('solo'); } },
       { id: 'view:projection', label: 'Projection', keywords: 'perspective orthographic ortho toggle switch', category: 'View', icon: Orbit,
         action: () => { useViewerStore.getState().toggleProjectionMode(); } },
       { id: 'view:top', label: 'Top View', keywords: 'camera plan', category: 'View', icon: ArrowUp, shortcut: '1',
@@ -336,6 +347,20 @@ export function CommandPalette({ open, onOpenChange }: CommandPaletteProps) {
         action: () => { useViewerStore.getState().setActiveTool('annotate'); } },
       { id: 'tool:add-element', label: 'Add Element', keywords: 'wall slab beam column place drop new add element generic', category: 'Tools', icon: Box,
         action: () => { useViewerStore.getState().setActiveTool('addElement'); } },
+      { id: 'tool:edit-mode', label: 'Toggle Edit Mode', keywords: 'edit mode pen unlock readonly properties geometry author modify', category: 'Tools', icon: PenLine, shortcut: 'E',
+        action: () => { useViewerStore.getState().toggleEditEnabled(); } },
+      { id: 'tool:split', label: 'Split selected entity', keywords: 'split cut knife slice divide segment break wall beam column slab selected', category: 'Tools', icon: Slice, shortcut: 'K',
+        action: () => {
+          const s = useViewerStore.getState();
+          const sel = s.selectedEntity;
+          if (!sel) return;
+          s.setSplitTarget(sel.modelId, sel.expressId);
+          s.setActiveTool('split');
+        } },
+      // Add-element gestures live entirely in the AddElementPanel
+      // (opened via `setActiveTool('addElement')` — see the
+      // dedicated "Add Element" command below). Per-type shortcuts
+      // duplicated that panel's UI and have been dropped.
     );
 
     // ── Visibility ──

package/src/components/viewer/GeometryAxisRow.tsx

@@ -0,0 +1,54 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+/**
+ * One axis row inside the Geometry edit card's position section.
+ * X / Y / Z labelled input bracketed by ±step nudge buttons.
+ * Purely presentational — caller wires the input value, change
+ * handler, and the two nudge callbacks.
+ */
+
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+
+interface AxisRowProps {
+  label: string;
+  value: string;
+  onChange: (next: string) => void;
+  onNudgeMinus: () => void;
+  onNudgePlus: () => void;
+}
+
+export function GeometryAxisRow({ label, value, onChange, onNudgeMinus, onNudgePlus }: AxisRowProps) {
+  return (
+    <div className="flex items-center gap-1">
+      <span className="w-4 text-[11px] font-mono text-purple-700 dark:text-purple-400">{label}</span>
+      <Button
+        variant="ghost"
+        size="icon-xs"
+        className="h-6 w-6 text-purple-600"
+        onClick={onNudgeMinus}
+        aria-label={`Decrease ${label}`}
+      >
+        −
+      </Button>
+      <Input
+        type="number"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="h-6 text-xs font-mono px-1 flex-1 border-purple-200 dark:border-purple-800/60 bg-white dark:bg-zinc-950"
+        step="any"
+      />
+      <Button
+        variant="ghost"
+        size="icon-xs"
+        className="h-6 w-6 text-purple-600"
+        onClick={onNudgePlus}
+        aria-label={`Increase ${label}`}
+      >
+        +
+      </Button>
+    </div>
+  );
+}

package/src/components/viewer/GeometryEditCard.tsx

@@ -0,0 +1,392 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+/**
+ * Inline geometry editor for the Properties panel. Surfaces the
+ * three IFC-level mutations every authoring user reaches for:
+ *
+ *   - Move — numeric XYZ for the entity's storey-local origin, with
+ *     ±step quick buttons on each axis.
+ *   - Duplicate — clone the entity along a picked axis (reuses
+ *     `MutationSlice.duplicateEntity` so the new geometry shares the
+ *     existing representation reference).
+ *   - Delete — tombstone the entity (`MutationSlice.removeEntity`),
+ *     undoable from the same model's history stack.
+ *
+ * Move reads the entity's existing IfcCartesianPoint coordinates via
+ * `resolvePlacementChain` and writes back through
+ * `MutationSlice.setEntityPosition` / `translateEntity`. Entities
+ * whose placement isn't a simple `IfcLocalPlacement` chain (mapped
+ * representations, missing ObjectPlacement, 2D-only placements)
+ * render the card with a single explanatory message and disabled
+ * Move controls — the Duplicate and Delete actions still work.
+ *
+ * Card only renders when the global `editEnabled` pill is on. Native-
+ * lazy selections (server-streamed entities without full STEP data)
+ * never see this card — the parent panel gates the entire edit
+ * surface on `!isNativeLazySelection`.
+ */
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Copy, Move as MoveIcon, RotateCw, Slice as KnifeIcon, Trash2, ChevronDown, ChevronUp } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { GeometryAxisRow } from './GeometryAxisRow';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { toast } from '@/components/ui/toast';
+import { useViewerStore } from '@/store';
+
+interface GeometryEditCardProps {
+  modelId: string;
+  entityId: number;
+  /** Display label — e.g. "IfcWall #42". Surfaced in toasts. */
+  entityLabel?: string;
+}
+
+/**
+ * Read the current placement coordinates for the entity via the
+ * mutation slice's `readEntityPosition` action — which lazily
+ * creates the `StoreEditor` on first call, so this works on a
+ * freshly-loaded model that hasn't seen any mutations yet. Returns
+ * null when the chain doesn't match the expected shape (entities
+ * with mapped representations etc.), which the UI translates into
+ * a disabled Move state.
+ */
+function useEntityCoordinates(
+  modelId: string,
+  entityId: number,
+): [number, number, number] | null {
+  // Re-resolve whenever the model's mutation version bumps — a
+  // previous Move in this same session must surface in the inputs
+  // on the next render.
+  const mutationVersion = useViewerStore((s) => s.mutationVersion);
+  const readEntityPosition = useViewerStore((s) => s.readEntityPosition);
+  return useMemo(() => {
+    return readEntityPosition(modelId, entityId);
+    // mutationVersion is the dependency that forces re-resolve.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [modelId, entityId, mutationVersion, readEntityPosition]);
+}
+
+const STEP_PRESETS = [0.1, 0.5, 1];
+
+export function GeometryEditCard({ modelId, entityId, entityLabel }: GeometryEditCardProps) {
+  const setEntityPosition = useViewerStore((s) => s.setEntityPosition);
+  const translateEntity = useViewerStore((s) => s.translateEntity);
+  const rotateEntity = useViewerStore((s) => s.rotateEntity);
+  const readEntityRotation = useViewerStore((s) => s.readEntityRotation);
+  const duplicateEntity = useViewerStore((s) => s.duplicateEntity);
+  const removeEntity = useViewerStore((s) => s.removeEntity);
+  const setSelectedEntityId = useViewerStore((s) => s.setSelectedEntityId);
+
+  const coordinates = useEntityCoordinates(modelId, entityId);
+  const movable = coordinates !== null;
+
+  const [expanded, setExpanded] = useState(true);
+  const [step, setStep] = useState<number>(0.5);
+  const [x, setX] = useState('');
+  const [y, setY] = useState('');
+  const [z, setZ] = useState('');
+  // Track which entity the inputs were last seeded for so we don't
+  // clobber an in-progress edit when the user types into X then the
+  // mutationVersion bumps from an unrelated mutation.
+  const seededForRef = useRef<string>('');
+
+  useEffect(() => {
+    const key = `${modelId}:${entityId}:${coordinates?.join(',') ?? 'none'}`;
+    if (seededForRef.current === key) return;
+    seededForRef.current = key;
+    if (coordinates) {
+      setX(coordinates[0].toString());
+      setY(coordinates[1].toString());
+      setZ(coordinates[2].toString());
+    } else {
+      setX(''); setY(''); setZ('');
+    }
+  }, [modelId, entityId, coordinates]);
+
+  const applyAbsolute = useCallback(() => {
+    const parsed: [number, number, number] = [parseFloat(x), parseFloat(y), parseFloat(z)];
+    if (parsed.some((n) => !Number.isFinite(n))) {
+      toast.error('Enter numeric X, Y, Z coordinates');
+      return;
+    }
+    const result = setEntityPosition(modelId, entityId, parsed);
+    if (!result.ok) {
+      toast.error(`Couldn't move: ${result.reason}`);
+      return;
+    }
+    toast.success(`Moved to (${parsed.map((n) => n.toFixed(2)).join(', ')})`);
+  }, [modelId, entityId, x, y, z, setEntityPosition]);
+
+  const nudge = useCallback(
+    (axis: 0 | 1 | 2, sign: 1 | -1) => {
+      const delta: [number, number, number] = [0, 0, 0];
+      delta[axis] = sign * step;
+      const result = translateEntity(modelId, entityId, delta);
+      if (!result.ok) {
+        toast.error(`Couldn't move: ${result.reason}`);
+        return;
+      }
+    },
+    [modelId, entityId, step, translateEntity],
+  );
+
+  // Live rotation read — re-pulls after each mutation so the angle
+  // display tracks R/T keyboard rotations and gizmo drags.
+  const mutationVersion = useViewerStore((s) => s.mutationVersion);
+  const rotation = useMemo(() => {
+    return readEntityRotation(modelId, entityId);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [modelId, entityId, mutationVersion, readEntityRotation]);
+  const yawDegrees = rotation ? (rotation.yawZ * 180) / Math.PI : null;
+
+  const rotateBy = useCallback(
+    (deltaDeg: number) => {
+      const result = rotateEntity(modelId, entityId, (deltaDeg * Math.PI) / 180);
+      if (!result.ok) {
+        toast.error(`Couldn't rotate: ${result.reason}`);
+      }
+    },
+    [modelId, entityId, rotateEntity],
+  );
+
+  // Resolve whether the selected entity can be split. Three paths:
+  // walls, linear elements (beam / column / member), and slab-like
+  // (slab / roof / plate / space — only slab supports split in v1
+  // but the chain resolver accepts all four). The Split action
+  // surfaces only when the entity matches one of them — keeps
+  // panel chrome out of the user's way for unrelated selections.
+  const readWallEndpoints = useViewerStore((s) => s.readWallEndpoints);
+  const readLinearElementSplitProjection = useViewerStore((s) => s.readLinearElementSplitProjection);
+  const readSlabFootprint = useViewerStore((s) => s.readSlabFootprint);
+  const splittable = useMemo(() => {
+    if (readWallEndpoints(modelId, entityId) !== null) return true;
+    // Probe with [0,0,0] — we only care whether the chain resolves,
+    // not the projection value.
+    if (readLinearElementSplitProjection(modelId, entityId, [0, 0, 0]) !== null) return true;
+    // Slab-like types (IfcSlab / IfcRoof / IfcPlate / IfcSpace)
+    // all share the same chain shape; any of them is splittable.
+    return readSlabFootprint(modelId, entityId) !== null;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    modelId,
+    entityId,
+    mutationVersion,
+    readWallEndpoints,
+    readLinearElementSplitProjection,
+    readSlabFootprint,
+  ]);
+  const setActiveTool = useViewerStore((s) => s.setActiveTool);
+  const setSplitTarget = useViewerStore((s) => s.setSplitTarget);
+  const onSplit = useCallback(() => {
+    // Arm the tool with this entity pre-targeted so the user's next
+    // cursor move lights up the guide. setActiveTool('split')
+    // auto-enables edit mode if needed.
+    setSplitTarget(modelId, entityId);
+    setActiveTool('split');
+  }, [modelId, entityId, setActiveTool, setSplitTarget]);
+
+  const onDuplicate = useCallback(() => {
+    const result = duplicateEntity(modelId, entityId);
+    if ('error' in result) {
+      toast.error(`Couldn't duplicate: ${result.error}`);
+      return;
+    }
+    toast.success(`Duplicated to #${result.expressId}`);
+    // Select the duplicate so the user can immediately move it. The
+    // action already returns the federated globalId so we don't have
+    // to recompute it.
+    setSelectedEntityId(result.globalId);
+  }, [modelId, entityId, duplicateEntity, setSelectedEntityId]);
+
+  const onDelete = useCallback(() => {
+    const ok = removeEntity(modelId, entityId);
+    if (!ok) {
+      toast.error("Couldn't delete entity");
+      return;
+    }
+    toast.success(`${entityLabel ?? `#${entityId}`} deleted — undo to restore`);
+    setSelectedEntityId(null);
+  }, [modelId, entityId, entityLabel, removeEntity, setSelectedEntityId]);
+
+  return (
+    <div className="border border-purple-200 dark:border-purple-900/40 bg-purple-50/40 dark:bg-purple-950/20">
+      <button
+        type="button"
+        onClick={() => setExpanded((v) => !v)}
+        className="flex items-center gap-2 w-full text-left px-2 py-1.5 text-xs font-semibold tracking-wide uppercase text-purple-800 dark:text-purple-300 hover:bg-purple-100/60 dark:hover:bg-purple-900/30"
+        aria-expanded={expanded}
+      >
+        <MoveIcon className="h-3.5 w-3.5 shrink-0" />
+        <span className="flex-1">Geometry</span>
+        {expanded ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
+      </button>
+
+      {expanded && (
+        <div className="px-2 pb-2 space-y-2">
+          {/* Position — XYZ inputs + ±step nudges */}
+          <div className="space-y-1">
+            <div className="flex items-center justify-between text-[10px] uppercase tracking-wide text-purple-700/80 dark:text-purple-400/80">
+              <span>Storey-local position (IFC Z-up)</span>
+              <select
+                value={step}
+                onChange={(e) => setStep(parseFloat(e.target.value))}
+                className="bg-transparent border border-purple-300 dark:border-purple-700 px-1 py-0.5 text-[10px] focus:outline-none focus:ring-1 focus:ring-purple-500"
+                aria-label="Nudge step in metres"
+                disabled={!movable}
+              >
+                {STEP_PRESETS.map((s) => (
+                  <option key={s} value={s}>±{s} m</option>
+                ))}
+              </select>
+            </div>
+            {!movable ? (
+              <p className="text-[11px] text-purple-700/70 dark:text-purple-400/70">
+                Entity has a non-standard placement (mapped representation
+                or 2D-only). Move isn't supported directly — Duplicate and
+                Delete still work.
+              </p>
+            ) : (
+              <>
+                <GeometryAxisRow
+                  label="X"
+                  value={x}
+                  onChange={setX}
+                  onNudgeMinus={() => nudge(0, -1)}
+                  onNudgePlus={() => nudge(0, 1)}
+                />
+                <GeometryAxisRow
+                  label="Y"
+                  value={y}
+                  onChange={setY}
+                  onNudgeMinus={() => nudge(1, -1)}
+                  onNudgePlus={() => nudge(1, 1)}
+                />
+                <GeometryAxisRow
+                  label="Z"
+                  value={z}
+                  onChange={setZ}
+                  onNudgeMinus={() => nudge(2, -1)}
+                  onNudgePlus={() => nudge(2, 1)}
+                />
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="w-full h-7 text-xs border-purple-300 dark:border-purple-700"
+                  onClick={applyAbsolute}
+                >
+                  Apply XYZ
+                </Button>
+              </>
+            )}
+          </div>
+
+          {/* Rotation — yaw about storey-up Z. R / Shift+R fire the
+              same action; this row gives the discoverable UI plus a
+              readout for the current angle. */}
+          {rotation && (
+            <div className="flex items-center gap-1 pt-1 border-t border-purple-200/60 dark:border-purple-900/40">
+              <RotateCw className="h-3 w-3 shrink-0 text-purple-700 dark:text-purple-400" />
+              <span className="text-[11px] font-mono text-purple-800 dark:text-purple-300 flex-1">
+                yaw {yawDegrees !== null ? `${yawDegrees.toFixed(1)}°` : '—'}
+              </span>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon-xs"
+                    className="h-6 w-6 text-purple-700"
+                    onClick={() => rotateBy(-15)}
+                    aria-label="Rotate −15°"
+                  >
+                    ⟲
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Rotate −15° (Shift+R)</TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon-xs"
+                    className="h-6 w-6 text-purple-700"
+                    onClick={() => rotateBy(15)}
+                    aria-label="Rotate +15°"
+                  >
+                    ⟳
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Rotate +15° (R)</TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon-xs"
+                    className="h-6 w-6 text-purple-700"
+                    onClick={() => rotateBy(90)}
+                    aria-label="Rotate +90°"
+                  >
+                    90
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Rotate +90°</TooltipContent>
+              </Tooltip>
+            </div>
+          )}
+
+          {/* Actions — split (when applicable) + duplicate + delete.
+              Available even when Move isn't. Split surfaces only
+              for resizable walls so the panel stays uncluttered
+              for selections where the action doesn't apply. */}
+          <div className="flex items-center gap-1 pt-1 border-t border-purple-200/60 dark:border-purple-900/40">
+            {splittable && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-7 flex-1 text-xs"
+                    onClick={onSplit}
+                  >
+                    <KnifeIcon className="h-3 w-3 mr-1" /> Split
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Click on this wall to split it (K)</TooltipContent>
+              </Tooltip>
+            )}
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-7 flex-1 text-xs"
+                  onClick={onDuplicate}
+                >
+                  <Copy className="h-3 w-3 mr-1" /> Duplicate
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Clone the entity along its first axis</TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-7 flex-1 text-xs text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-950/30"
+                  onClick={onDelete}
+                >
+                  <Trash2 className="h-3 w-3 mr-1" /> Delete
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Tombstone the entity — undo to restore</TooltipContent>
+            </Tooltip>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+

package/src/components/viewer/HierarchyPanel.tsx

@@ -2,7 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
-import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
+import { useState, useCallback, useRef, useEffect, useMemo, type ReactElement } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import {
   Search,
@@ -599,7 +599,7 @@ export function HierarchyPanel() {
         elementCount?: number;
       },
       depth: number,
-    ): JSX.Element => {
+    ): ReactElement => {
       const expanded = nativeExpanded.has(summary.expressId);
       return (
         <div key={`${summary.kind}-${summary.expressId}`}>

package/src/components/viewer/IDSAuditSummary.tsx

@@ -111,7 +111,7 @@ export function IDSAuditSummary({
   report,
   auditing = false,
   className,
-}: IDSAuditSummaryProps): JSX.Element | null {
+}: IDSAuditSummaryProps): React.ReactElement | null {
   const [expanded, setExpanded] = useState(false);
   const [filter, setFilter] = useState<SeverityFilter>('all');
 
@@ -299,7 +299,7 @@ interface IssueRowProps {
   index: number;
 }
 
-function IssueRow({ issue, index }: IssueRowProps): JSX.Element {
+function IssueRow({ issue, index }: IssueRowProps): React.ReactElement {
   const [open, setOpen] = useState(false);
   const t = SEVERITY_TOKENS[issue.severity];
   const hasDetail =

package/src/components/viewer/KeyboardShortcutsDialog.tsx

@@ -3,12 +3,25 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import { useState, useEffect, useCallback, useMemo } from 'react';
-import { X, Info, Keyboard, Github, ExternalLink, Sparkles, ChevronDown, ChevronRight, Zap, Wrench, Plus, Package, ShieldCheck } from 'lucide-react';
+import { X, Info, Keyboard, ExternalLink, Sparkles, ChevronDown, ChevronRight, Zap, Wrench, Plus, Package, ShieldCheck } from 'lucide-react';
+
+function GithubIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={className}
+      aria-hidden="true"
+    >
+      <path d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.1.79-.25.79-.56 0-.28-.01-1.02-.02-2-3.2.69-3.87-1.54-3.87-1.54-.52-1.33-1.28-1.69-1.28-1.69-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.29 1.18-3.09-.12-.29-.51-1.47.11-3.06 0 0 .97-.31 3.18 1.18a11.04 11.04 0 0 1 5.78 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.77.12 3.06.74.8 1.18 1.83 1.18 3.09 0 4.42-2.7 5.4-5.27 5.69.42.36.78 1.08.78 2.18 0 1.57-.01 2.83-.01 3.22 0 .31.21.67.8.56C20.21 21.39 23.5 17.08 23.5 12 23.5 5.65 18.35.5 12 .5Z" />
+    </svg>
+  );
+}
 import { Button } from '@/components/ui/button';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
 import { KEYBOARD_SHORTCUTS } from '@/hooks/useKeyboardShortcuts';
 
-const GITHUB_URL = 'https://github.com/louistrue/ifc-lite';
+const GITHUB_URL = 'https://github.com/LTplus-AG/ifc-lite';
 
 interface InfoDialogProps {
   open: boolean;
@@ -88,14 +101,32 @@ function AboutTab() {
       </div>
 
       {/* Links */}
-      <div className="flex items-center justify-center gap-4 text-xs">
+      <div className="flex items-center justify-center flex-wrap gap-x-4 gap-y-1.5 text-xs">
+        <a
+          href="https://ifclite.dev"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center gap-1.5 text-muted-foreground hover:text-foreground transition-colors"
+        >
+          ifclite.dev
+          <ExternalLink className="h-3 w-3" />
+        </a>
+        <a
+          href="https://ltplus-ag.github.io/ifc-lite/"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center gap-1.5 text-muted-foreground hover:text-foreground transition-colors"
+        >
+          Docs
+          <ExternalLink className="h-3 w-3" />
+        </a>
         <a
           href={GITHUB_URL}
           target="_blank"
           rel="noopener noreferrer"
           className="flex items-center gap-1.5 text-muted-foreground hover:text-foreground transition-colors"
         >
-          <Github className="h-3.5 w-3.5" />
+          <GithubIcon className="h-3.5 w-3.5" />
           GitHub
         </a>
         <a
@@ -336,6 +367,29 @@ function ShortcutsTab() {
 
   return (
     <div className="space-y-4">
+      {/* Learn-more row: drives discovery to the marketing site and the github.io
+          docs. Sits above the shortcut groups so it's the first thing users hunting
+          for help see, without crowding the keyboard reference itself. */}
+      <div className="rounded border border-border bg-muted/30 px-3 py-2 text-xs text-muted-foreground">
+        <span className="font-medium text-foreground">Learn more:</span>
+        <a
+          href="https://ifclite.dev"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="ml-2 underline-offset-2 hover:underline hover:text-primary transition-colors"
+        >
+          ifclite.dev
+        </a>
+        <span className="mx-1.5 opacity-40">·</span>
+        <a
+          href="https://ltplus-ag.github.io/ifc-lite/"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="underline-offset-2 hover:underline hover:text-primary transition-colors"
+        >
+          docs
+        </a>
+      </div>
       {Object.entries(grouped).map(([category, shortcuts]) => (
         <div key={category}>
           <h3 className="text-sm font-medium text-muted-foreground mb-2">