@ifc-lite/viewer 1.6.0 → 1.7.0

package/src/components/viewer/PropertyEditor.tsx

@@ -4,12 +4,11 @@
 
 /**
  * Property Editor component for editing IFC property values inline.
- * Production-ready with keyboard support and proper UX.
+ * Includes schema-aware property addition with IFC4 standard validation.
  */
 
 import { useState, useCallback, useMemo, useRef, useEffect } from 'react';
 import {
-  Save,
   X,
   Plus,
   Trash2,
@@ -17,6 +16,10 @@ import {
   Undo,
   Redo,
   Check,
+  BookOpen,
+  Tag,
+  Layers,
+  Ruler,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -39,9 +42,24 @@ import {
 } from '@/components/ui/dialog';
 import { Switch } from '@/components/ui/switch';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { Badge } from '@/components/ui/badge';
 import { useViewerStore } from '@/store';
-import { PropertyValueType } from '@ifc-lite/data';
+import { PropertyValueType, QuantityType } from '@ifc-lite/data';
 import type { PropertyValue } from '@ifc-lite/mutations';
+import {
+  getPsetDefinitionsForType,
+  getPropertiesForPset,
+  CLASSIFICATION_SYSTEMS,
+  type PsetPropertyDef,
+  type PsetDefinition,
+} from '@/lib/ifc4-pset-definitions';
+import {
+  getQtoDefinitionsForType,
+  getQuantitiesForQto,
+  getQuantityUnit,
+  type QtoQuantityDef,
+  type QtoDefinition,
+} from '@/lib/ifc4-qto-definitions';
 
 interface PropertyEditorProps {
   modelId: string;
@@ -258,42 +276,84 @@ export function PropertyEditor({
   );
 }
 
+// ============================================================================
+// Schema-Aware Property Dialog
+// ============================================================================
+
 interface NewPropertyDialogProps {
   modelId: string;
   entityId: number;
+  entityType: string;
   existingPsets: string[];
+  schemaVersion?: string;
 }
 
 /**
- * Dialog for adding a new property
+ * Schema-aware dialog for adding new properties.
+ * Filters available property sets based on IFC entity type.
+ * Shows property suggestions with correct types from IFC4 standard.
  */
-export function NewPropertyDialog({ modelId, entityId, existingPsets }: NewPropertyDialogProps) {
+export function NewPropertyDialog({ modelId, entityId, entityType, existingPsets, schemaVersion }: NewPropertyDialogProps) {
   const setProperty = useViewerStore((s) => s.setProperty);
   const createPropertySet = useViewerStore((s) => s.createPropertySet);
   const bumpMutationVersion = useViewerStore((s) => s.bumpMutationVersion);
 
   const [open, setOpen] = useState(false);
   const [psetName, setPsetName] = useState('');
-  const [isNewPset, setIsNewPset] = useState(false);
+  const [isCustomPset, setIsCustomPset] = useState(false);
+  const [customPsetName, setCustomPsetName] = useState('');
   const [propName, setPropName] = useState('');
+  const [customPropName, setCustomPropName] = useState('');
   const [value, setValue] = useState('');
   const [valueType, setValueType] = useState<PropertyValueType>(PropertyValueType.String);
 
-  const commonPsets = useMemo(() => [
-    'Pset_WallCommon',
-    'Pset_DoorCommon',
-    'Pset_WindowCommon',
-    'Pset_SlabCommon',
-    'Pset_BeamCommon',
-    'Pset_ColumnCommon',
-    'Pset_BuildingElementProxyCommon',
-    'Pset_SpaceCommon',
-  ], []);
+  // Get schema-valid property sets for this entity type
+  const validPsetDefs = useMemo(() => {
+    return getPsetDefinitionsForType(entityType, schemaVersion);
+  }, [entityType, schemaVersion]);
+
+  // Split into: already on entity vs available to add
+  const { existingStandardPsets, availableStandardPsets } = useMemo(() => {
+    const existing: PsetDefinition[] = [];
+    const available: PsetDefinition[] = [];
+    for (const def of validPsetDefs) {
+      if (existingPsets.includes(def.name)) {
+        existing.push(def);
+      } else {
+        available.push(def);
+      }
+    }
+    return { existingStandardPsets: existing, availableStandardPsets: available };
+  }, [validPsetDefs, existingPsets]);
+
+  // Get property suggestions for selected pset
+  const propertySuggestions = useMemo((): PsetPropertyDef[] => {
+    if (!psetName || isCustomPset) return [];
+    return getPropertiesForPset(psetName);
+  }, [psetName, isCustomPset]);
+
+  // Determine effective property name and type
+  const effectivePsetName = isCustomPset ? customPsetName : psetName;
+  const effectivePropName = propName || customPropName;
+
+  // Auto-update type when selecting a standard property
+  const handlePropertySelect = useCallback((name: string) => {
+    setPropName(name);
+    setCustomPropName('');
+    // Auto-set type from schema
+    const propDef = propertySuggestions.find(p => p.name === name);
+    if (propDef) {
+      setValueType(propDef.type);
+      // Set sensible defaults for boolean properties
+      if (propDef.type === PropertyValueType.Boolean) {
+        setValue('false');
+      }
+    }
+  }, [propertySuggestions]);
 
   const handleSubmit = useCallback(() => {
-    if (!psetName || !propName) return;
+    if (!effectivePsetName || !effectivePropName) return;
 
-    // Normalize model ID for legacy models
     let normalizedModelId = modelId;
     if (modelId === 'legacy') {
       normalizedModelId = '__legacy__';
@@ -301,85 +361,189 @@ export function NewPropertyDialog({ modelId, entityId, existingPsets }: NewPrope
 
     const parsedValue = parseValue(value, valueType);
 
-    if (isNewPset) {
-      createPropertySet(normalizedModelId, entityId, psetName, [
-        { name: propName, value: parsedValue, type: valueType },
+    // Check if pset exists on entity already
+    const psetExists = existingPsets.includes(effectivePsetName);
+
+    if (!psetExists) {
+      createPropertySet(normalizedModelId, entityId, effectivePsetName, [
+        { name: effectivePropName, value: parsedValue, type: valueType },
       ]);
     } else {
-      setProperty(normalizedModelId, entityId, psetName, propName, parsedValue, valueType);
+      setProperty(normalizedModelId, entityId, effectivePsetName, effectivePropName, parsedValue, valueType);
     }
 
     bumpMutationVersion();
 
     // Reset form
     setPsetName('');
+    setCustomPsetName('');
     setPropName('');
+    setCustomPropName('');
     setValue('');
     setValueType(PropertyValueType.String);
-    setIsNewPset(false);
+    setIsCustomPset(false);
     setOpen(false);
-  }, [modelId, entityId, psetName, propName, value, valueType, isNewPset, setProperty, createPropertySet, bumpMutationVersion]);
+  }, [modelId, entityId, effectivePsetName, effectivePropName, value, valueType, existingPsets, setProperty, createPropertySet, bumpMutationVersion]);
+
+  const resetForm = useCallback(() => {
+    setPsetName('');
+    setCustomPsetName('');
+    setPropName('');
+    setCustomPropName('');
+    setValue('');
+    setValueType(PropertyValueType.String);
+    setIsCustomPset(false);
+  }, []);
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
+    <Dialog open={open} onOpenChange={(o) => { setOpen(o); if (!o) resetForm(); }}>
       <DialogTrigger asChild>
         <Button variant="outline" size="sm" className="h-7">
           <Plus className="h-3 w-3 mr-1" />
-          Add Property
+          Property
         </Button>
       </DialogTrigger>
-      <DialogContent className="sm:max-w-md">
+      <DialogContent className="sm:max-w-lg">
         <DialogHeader>
-          <DialogTitle>Add Property</DialogTitle>
+          <DialogTitle className="flex items-center gap-2">
+            <BookOpen className="h-4 w-4" />
+            Add Property
+          </DialogTitle>
           <DialogDescription>
-            Add a new property to this entity
+            Add a property to this <span className="font-mono font-medium text-zinc-700 dark:text-zinc-300">{entityType}</span> element.
+            {validPsetDefs.length > 0 && (
+              <span className="block mt-1 text-emerald-600 dark:text-emerald-400">
+                {schemaVersion || 'IFC4'} schema: {validPsetDefs.length} standard property set{validPsetDefs.length !== 1 ? 's' : ''} available
+              </span>
+            )}
           </DialogDescription>
         </DialogHeader>
         <div className="grid gap-4 py-4">
-          <div className="flex items-center gap-4">
-            <Label className="w-24">New Pset</Label>
-            <Switch checked={isNewPset} onCheckedChange={setIsNewPset} />
-          </div>
-          <div className="flex items-center gap-4">
-            <Label className="w-24">Property Set</Label>
-            {isNewPset ? (
+          {/* Property Set Selection */}
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <Label className="text-sm font-medium">Property Set</Label>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 px-2 text-[10px]"
+                onClick={() => { setIsCustomPset(!isCustomPset); setPsetName(''); setCustomPsetName(''); setPropName(''); setCustomPropName(''); }}
+              >
+                {isCustomPset ? 'Use standard' : 'Custom name'}
+              </Button>
+            </div>
+            {isCustomPset ? (
               <Input
-                value={psetName}
-                onChange={(e) => setPsetName(e.target.value)}
-                placeholder="e.g., Pset_CustomProperties"
+                value={customPsetName}
+                onChange={(e) => setCustomPsetName(e.target.value)}
+                placeholder="e.g., Pset_MyCustomProperties"
+                className="font-mono text-sm"
               />
             ) : (
-              <Select value={psetName} onValueChange={setPsetName}>
-                <SelectTrigger>
-                  <SelectValue placeholder="Select property set" />
+              <Select value={psetName} onValueChange={(v) => { setPsetName(v); setPropName(''); setCustomPropName(''); setValue(''); }}>
+                <SelectTrigger className="font-mono text-sm">
+                  <SelectValue placeholder="Select property set..." />
                 </SelectTrigger>
                 <SelectContent>
-                  {existingPsets.map((name) => (
-                    <SelectItem key={name} value={name}>
-                      {name}
-                    </SelectItem>
-                  ))}
-                  {commonPsets
-                    .filter((p) => !existingPsets.includes(p))
-                    .map((name) => (
-                      <SelectItem key={name} value={name}>
-                        {name} (new)
-                      </SelectItem>
-                    ))}
+                  {/* Existing psets on this entity */}
+                  {existingStandardPsets.length > 0 && (
+                    <>
+                      <div className="px-2 py-1.5 text-[10px] font-bold uppercase tracking-wider text-zinc-400">
+                        On this element
+                      </div>
+                      {existingStandardPsets.map((def) => (
+                        <SelectItem key={def.name} value={def.name}>
+                          <div className="flex items-center gap-2">
+                            <span>{def.name}</span>
+                            <Badge variant="secondary" className="h-4 px-1 text-[9px]">existing</Badge>
+                          </div>
+                        </SelectItem>
+                      ))}
+                    </>
+                  )}
+                  {/* Non-standard existing psets */}
+                  {existingPsets.filter(p => !existingStandardPsets.some(d => d.name === p)).length > 0 && (
+                    <>
+                      <div className="px-2 py-1.5 text-[10px] font-bold uppercase tracking-wider text-zinc-400">
+                        Existing (custom)
+                      </div>
+                      {existingPsets.filter(p => !existingStandardPsets.some(d => d.name === p)).map((name) => (
+                        <SelectItem key={name} value={name}>
+                          <span>{name}</span>
+                        </SelectItem>
+                      ))}
+                    </>
+                  )}
+                  {/* Available standard psets for this type */}
+                  {availableStandardPsets.length > 0 && (
+                    <>
+                      <div className="px-2 py-1.5 text-[10px] font-bold uppercase tracking-wider text-emerald-600 dark:text-emerald-400">
+                        {schemaVersion || 'IFC4'} Standard — {entityType}
+                      </div>
+                      {availableStandardPsets.map((def) => (
+                        <SelectItem key={def.name} value={def.name}>
+                          <div className="flex flex-col">
+                            <div className="flex items-center gap-2">
+                              <span className="font-medium">{def.name}</span>
+                              <Badge variant="outline" className="h-4 px-1 text-[9px] border-emerald-300 text-emerald-600">new</Badge>
+                            </div>
+                            <span className="text-[10px] text-zinc-400">{def.description}</span>
+                          </div>
+                        </SelectItem>
+                      ))}
+                    </>
+                  )}
                 </SelectContent>
               </Select>
             )}
           </div>
-          <div className="flex items-center gap-4">
-            <Label className="w-24">Property</Label>
-            <Input
-              value={propName}
-              onChange={(e) => setPropName(e.target.value)}
-              placeholder="e.g., FireRating"
-            />
+
+          {/* Property Selection */}
+          <div className="space-y-2">
+            <Label className="text-sm font-medium">Property</Label>
+            {propertySuggestions.length > 0 ? (
+              <div className="space-y-2">
+                <Select value={propName} onValueChange={handlePropertySelect}>
+                  <SelectTrigger className="font-mono text-sm">
+                    <SelectValue placeholder="Select property..." />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {propertySuggestions.map((prop) => (
+                      <SelectItem key={prop.name} value={prop.name}>
+                        <div className="flex flex-col">
+                          <div className="flex items-center gap-2">
+                            <span className="font-medium">{prop.name}</span>
+                            <Badge variant="secondary" className="h-4 px-1 text-[9px]">{getTypeName(prop.type)}</Badge>
+                          </div>
+                          <span className="text-[10px] text-zinc-400">{prop.description}</span>
+                        </div>
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                {/* Allow custom property name even for standard psets */}
+                {!propName && (
+                  <Input
+                    value={customPropName}
+                    onChange={(e) => setCustomPropName(e.target.value)}
+                    placeholder="Or type custom property name..."
+                    className="font-mono text-sm"
+                  />
+                )}
+              </div>
+            ) : (
+              <Input
+                value={customPropName}
+                onChange={(e) => setCustomPropName(e.target.value)}
+                placeholder="e.g., FireRating"
+                className="font-mono text-sm"
+              />
+            )}
           </div>
-          <div className="flex items-center gap-4">
-            <Label className="w-24">Type</Label>
+
+          {/* Type selector */}
+          <div className="space-y-2">
+            <Label className="text-sm font-medium">Type</Label>
             <Select
               value={valueType.toString()}
               onValueChange={(v) => setValueType(parseInt(v) as PropertyValueType)}
@@ -397,28 +561,34 @@ export function NewPropertyDialog({ modelId, entityId, existingPsets }: NewPrope
               </SelectContent>
             </Select>
           </div>
-          <div className="flex items-center gap-4">
-            <Label className="w-24">Value</Label>
+
+          {/* Value input */}
+          <div className="space-y-2">
+            <Label className="text-sm font-medium">Value</Label>
             {valueType === PropertyValueType.Boolean ? (
-              <Switch
-                checked={value === 'true'}
-                onCheckedChange={(checked) => setValue(checked ? 'true' : 'false')}
-              />
+              <div className="flex items-center gap-3">
+                <Switch
+                  checked={value === 'true'}
+                  onCheckedChange={(checked) => setValue(checked ? 'true' : 'false')}
+                />
+                <span className="text-sm text-zinc-500">{value === 'true' ? 'True' : 'False'}</span>
+              </div>
             ) : (
               <Input
                 value={value}
                 onChange={(e) => setValue(e.target.value)}
                 placeholder="Property value"
                 type={valueType === PropertyValueType.Real || valueType === PropertyValueType.Integer ? 'number' : 'text'}
+                className="font-mono text-sm"
               />
             )}
           </div>
         </div>
         <DialogFooter>
-          <Button variant="outline" onClick={() => setOpen(false)}>
+          <Button variant="outline" onClick={() => { setOpen(false); resetForm(); }}>
             Cancel
           </Button>
-          <Button onClick={handleSubmit} disabled={!psetName || !propName}>
+          <Button onClick={handleSubmit} disabled={!effectivePsetName || !effectivePropName}>
             Add Property
           </Button>
         </DialogFooter>
@@ -427,6 +597,622 @@ export function NewPropertyDialog({ modelId, entityId, existingPsets }: NewPrope
   );
 }
 
+// ============================================================================
+// Classification Dialog
+// ============================================================================
+
+interface AddClassificationDialogProps {
+  modelId: string;
+  entityId: number;
+  entityType: string;
+}
+
+/**
+ * Dialog for adding a classification reference to an entity.
+ * Supports common classification systems (Uniclass, OmniClass, MasterFormat, etc.).
+ * Stored as a special property set for mutation tracking.
+ */
+export function AddClassificationDialog({ modelId, entityId, entityType }: AddClassificationDialogProps) {
+  const createPropertySet = useViewerStore((s) => s.createPropertySet);
+  const bumpMutationVersion = useViewerStore((s) => s.bumpMutationVersion);
+
+  const [open, setOpen] = useState(false);
+  const [system, setSystem] = useState('');
+  const [customSystem, setCustomSystem] = useState('');
+  const [identification, setIdentification] = useState('');
+  const [name, setName] = useState('');
+
+  const effectiveSystem = system === '__custom__' ? customSystem : system;
+
+  const handleSubmit = useCallback(() => {
+    if (!effectiveSystem || !identification) return;
+
+    let normalizedModelId = modelId;
+    if (modelId === 'legacy') {
+      normalizedModelId = '__legacy__';
+    }
+
+    // Store classification as a property set named "Classification [SystemName]"
+    const psetName = `Classification [${effectiveSystem}]`;
+    createPropertySet(normalizedModelId, entityId, psetName, [
+      { name: 'System', value: effectiveSystem, type: PropertyValueType.Label },
+      { name: 'Identification', value: identification, type: PropertyValueType.Identifier },
+      { name: 'Name', value: name || identification, type: PropertyValueType.Label },
+    ]);
+
+    bumpMutationVersion();
+
+    // Reset form
+    setSystem('');
+    setCustomSystem('');
+    setIdentification('');
+    setName('');
+    setOpen(false);
+  }, [modelId, entityId, effectiveSystem, identification, name, createPropertySet, bumpMutationVersion]);
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => {
+      setOpen(o);
+      if (!o) { setSystem(''); setCustomSystem(''); setIdentification(''); setName(''); }
+    }}>
+      <DialogTrigger asChild>
+        <Button variant="outline" size="sm" className="h-7">
+          <Tag className="h-3 w-3 mr-1" />
+          Classification
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Tag className="h-4 w-4" />
+            Add Classification
+          </DialogTitle>
+          <DialogDescription>
+            Assign a classification reference to this <span className="font-mono font-medium text-zinc-700 dark:text-zinc-300">{entityType}</span>.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          {/* Classification System */}
+          <div className="space-y-2">
+            <Label className="text-sm font-medium">Classification System</Label>
+            <Select value={system} onValueChange={setSystem}>
+              <SelectTrigger>
+                <SelectValue placeholder="Select system..." />
+              </SelectTrigger>
+              <SelectContent>
+                {CLASSIFICATION_SYSTEMS.map((cs) => (
+                  <SelectItem key={cs.name} value={cs.name}>
+                    <div className="flex flex-col">
+                      <span className="font-medium">{cs.name}</span>
+                      <span className="text-[10px] text-zinc-400">{cs.description}</span>
+                    </div>
+                  </SelectItem>
+                ))}
+                <SelectItem value="__custom__">
+                  <span className="text-zinc-500">Custom system...</span>
+                </SelectItem>
+              </SelectContent>
+            </Select>
+            {system === '__custom__' && (
+              <Input
+                value={customSystem}
+                onChange={(e) => setCustomSystem(e.target.value)}
+                placeholder="Classification system name"
+                className="mt-2"
+              />
+            )}
+          </div>
+
+          {/* Identification (code) */}
+          <div className="space-y-2">
+            <Label className="text-sm font-medium">Identification Code</Label>
+            <Input
+              value={identification}
+              onChange={(e) => setIdentification(e.target.value)}
+              placeholder="e.g., Ss_25_10_30 or 03 30 00"
+              className="font-mono"
+            />
+            <p className="text-[10px] text-zinc-400">The classification code or reference number</p>
+          </div>
+
+          {/* Name (optional) */}
+          <div className="space-y-2">
+            <Label className="text-sm font-medium">Name (optional)</Label>
+            <Input
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="e.g., Cast-in-place concrete walls"
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setOpen(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit} disabled={!effectiveSystem || !identification}>
+            Add Classification
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// ============================================================================
+// Material Dialog
+// ============================================================================
+
+interface AddMaterialDialogProps {
+  modelId: string;
+  entityId: number;
+  entityType: string;
+}
+
+/**
+ * Dialog for assigning a material to an entity.
+ * Stored as a special property set for mutation tracking.
+ */
+export function AddMaterialDialog({ modelId, entityId, entityType }: AddMaterialDialogProps) {
+  const createPropertySet = useViewerStore((s) => s.createPropertySet);
+  const bumpMutationVersion = useViewerStore((s) => s.bumpMutationVersion);
+
+  const [open, setOpen] = useState(false);
+  const [materialName, setMaterialName] = useState('');
+  const [category, setCategory] = useState('');
+  const [description, setDescription] = useState('');
+
+  const handleSubmit = useCallback(() => {
+    if (!materialName) return;
+
+    let normalizedModelId = modelId;
+    if (modelId === 'legacy') {
+      normalizedModelId = '__legacy__';
+    }
+
+    // Store material as a property set named "Material"
+    const psetName = `Material [${materialName}]`;
+    const properties: Array<{ name: string; value: string; type: PropertyValueType }> = [
+      { name: 'Name', value: materialName, type: PropertyValueType.Label },
+    ];
+
+    if (category) {
+      properties.push({ name: 'Category', value: category, type: PropertyValueType.Label });
+    }
+    if (description) {
+      properties.push({ name: 'Description', value: description, type: PropertyValueType.Label });
+    }
+
+    createPropertySet(normalizedModelId, entityId, psetName, properties);
+    bumpMutationVersion();
+
+    // Reset form
+    setMaterialName('');
+    setCategory('');
+    setDescription('');
+    setOpen(false);
+  }, [modelId, entityId, materialName, category, description, createPropertySet, bumpMutationVersion]);
+
+  // Common material categories (module-level constant used below)
+  const materialCategories = MATERIAL_CATEGORIES;
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => {
+      setOpen(o);
+      if (!o) { setMaterialName(''); setCategory(''); setDescription(''); }
+    }}>
+      <DialogTrigger asChild>
+        <Button variant="outline" size="sm" className="h-7">
+          <Layers className="h-3 w-3 mr-1" />
+          Material
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Layers className="h-4 w-4" />
+            Add Material
+          </DialogTitle>
+          <DialogDescription>
+            Assign a material to this <span className="font-mono font-medium text-zinc-700 dark:text-zinc-300">{entityType}</span>.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          {/* Material Name */}
+          <div className="space-y-2">
+            <Label className="text-sm font-medium">Material Name</Label>
+            <Input
+              value={materialName}
+              onChange={(e) => setMaterialName(e.target.value)}
+              placeholder="e.g., Concrete C30/37"
+              className="font-mono"
+            />
+          </div>
+
+          {/* Category */}
+          <div className="space-y-2">
+            <Label className="text-sm font-medium">Category</Label>
+            <Select value={category} onValueChange={setCategory}>
+              <SelectTrigger>
+                <SelectValue placeholder="Select category..." />
+              </SelectTrigger>
+              <SelectContent>
+                {materialCategories.map((cat) => (
+                  <SelectItem key={cat} value={cat}>{cat}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Description */}
+          <div className="space-y-2">
+            <Label className="text-sm font-medium">Description (optional)</Label>
+            <Input
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="Additional details about the material"
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setOpen(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit} disabled={!materialName}>
+            Add Material
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// Common material categories - static, hoisted to module scope
+const MATERIAL_CATEGORIES = [
+  'Concrete', 'Steel', 'Wood', 'Masonry', 'Glass', 'Aluminium',
+  'Insulation', 'Gypsum', 'Stone', 'Ceramic', 'Plastic', 'Composite',
+] as const;
+
+// ============================================================================
+// Quantity Dialog
+// ============================================================================
+
+interface AddQuantityDialogProps {
+  modelId: string;
+  entityId: number;
+  entityType: string;
+  existingQtos: string[];
+}
+
+/**
+ * Schema-aware dialog for adding quantities.
+ * Filters available quantity sets based on IFC entity type.
+ * Shows quantity suggestions with correct types from IFC4 standard.
+ */
+export function AddQuantityDialog({ modelId, entityId, entityType, existingQtos }: AddQuantityDialogProps) {
+  const createPropertySet = useViewerStore((s) => s.createPropertySet);
+  const setProperty = useViewerStore((s) => s.setProperty);
+  const bumpMutationVersion = useViewerStore((s) => s.bumpMutationVersion);
+
+  const [open, setOpen] = useState(false);
+  const [qtoName, setQtoName] = useState('');
+  const [isCustomQto, setIsCustomQto] = useState(false);
+  const [customQtoName, setCustomQtoName] = useState('');
+  const [quantityName, setQuantityName] = useState('');
+  const [customQuantityName, setCustomQuantityName] = useState('');
+  const [value, setValue] = useState('');
+  const [quantityType, setQuantityType] = useState<QuantityType>(QuantityType.Length);
+
+  // Get schema-valid quantity sets for this entity type
+  const validQtoDefs = useMemo(() => {
+    return getQtoDefinitionsForType(entityType);
+  }, [entityType]);
+
+  // Split into: already on entity vs available to add
+  const { existingStandardQtos, availableStandardQtos } = useMemo(() => {
+    const existing: QtoDefinition[] = [];
+    const available: QtoDefinition[] = [];
+    for (const def of validQtoDefs) {
+      if (existingQtos.includes(def.name)) {
+        existing.push(def);
+      } else {
+        available.push(def);
+      }
+    }
+    return { existingStandardQtos: existing, availableStandardQtos: available };
+  }, [validQtoDefs, existingQtos]);
+
+  // Get quantity suggestions for selected qto set
+  const quantitySuggestions = useMemo((): QtoQuantityDef[] => {
+    if (!qtoName || isCustomQto) return [];
+    return getQuantitiesForQto(qtoName);
+  }, [qtoName, isCustomQto]);
+
+  const effectiveQtoName = isCustomQto ? customQtoName : qtoName;
+  const effectiveQuantityName = quantityName || customQuantityName;
+
+  // Auto-update type when selecting a standard quantity
+  const handleQuantitySelect = useCallback((name: string) => {
+    setQuantityName(name);
+    setCustomQuantityName('');
+    const qtyDef = quantitySuggestions.find(q => q.name === name);
+    if (qtyDef) {
+      setQuantityType(qtyDef.type);
+    }
+  }, [quantitySuggestions]);
+
+  const handleSubmit = useCallback(() => {
+    if (!effectiveQtoName || !effectiveQuantityName) return;
+
+    let normalizedModelId = modelId;
+    if (modelId === 'legacy') {
+      normalizedModelId = '__legacy__';
+    }
+
+    const parsedValue = parseFloat(value) || 0;
+
+    // Store quantity as a property set (mutation system uses property sets)
+    const qtoExists = existingQtos.includes(effectiveQtoName);
+
+    if (!qtoExists) {
+      createPropertySet(normalizedModelId, entityId, effectiveQtoName, [
+        { name: effectiveQuantityName, value: parsedValue, type: PropertyValueType.Real },
+      ]);
+    } else {
+      setProperty(normalizedModelId, entityId, effectiveQtoName, effectiveQuantityName, parsedValue, PropertyValueType.Real);
+    }
+
+    bumpMutationVersion();
+
+    // Reset form
+    setQtoName('');
+    setCustomQtoName('');
+    setQuantityName('');
+    setCustomQuantityName('');
+    setValue('');
+    setQuantityType(QuantityType.Length);
+    setIsCustomQto(false);
+    setOpen(false);
+  }, [modelId, entityId, effectiveQtoName, effectiveQuantityName, value, existingQtos, setProperty, createPropertySet, bumpMutationVersion]);
+
+  const resetForm = useCallback(() => {
+    setQtoName('');
+    setCustomQtoName('');
+    setQuantityName('');
+    setCustomQuantityName('');
+    setValue('');
+    setQuantityType(QuantityType.Length);
+    setIsCustomQto(false);
+  }, []);
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => { setOpen(o); if (!o) resetForm(); }}>
+      <DialogTrigger asChild>
+        <Button variant="outline" size="sm" className="h-7">
+          <Ruler className="h-3 w-3 mr-1" />
+          Quantity
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Ruler className="h-4 w-4" />
+            Add Quantity
+          </DialogTitle>
+          <DialogDescription>
+            Add a quantity to this <span className="font-mono font-medium text-zinc-700 dark:text-zinc-300">{entityType}</span> element.
+            {validQtoDefs.length > 0 && (
+              <span className="block mt-1 text-emerald-600 dark:text-emerald-400">
+                IFC4 schema: {validQtoDefs.length} standard quantity set{validQtoDefs.length !== 1 ? 's' : ''} available
+              </span>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          {/* Quantity Set Selection */}
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <Label className="text-sm font-medium">Quantity Set</Label>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 px-2 text-[10px]"
+                onClick={() => { setIsCustomQto(!isCustomQto); setQtoName(''); setCustomQtoName(''); setQuantityName(''); setCustomQuantityName(''); }}
+              >
+                {isCustomQto ? 'Use standard' : 'Custom name'}
+              </Button>
+            </div>
+            {isCustomQto ? (
+              <Input
+                value={customQtoName}
+                onChange={(e) => setCustomQtoName(e.target.value)}
+                placeholder="e.g., Qto_MyCustomQuantities"
+                className="font-mono text-sm"
+              />
+            ) : (
+              <Select value={qtoName} onValueChange={(v) => { setQtoName(v); setQuantityName(''); setCustomQuantityName(''); setValue(''); }}>
+                <SelectTrigger className="font-mono text-sm">
+                  <SelectValue placeholder="Select quantity set..." />
+                </SelectTrigger>
+                <SelectContent>
+                  {existingStandardQtos.length > 0 && (
+                    <>
+                      <div className="px-2 py-1.5 text-[10px] font-bold uppercase tracking-wider text-zinc-400">
+                        On this element
+                      </div>
+                      {existingStandardQtos.map((def) => (
+                        <SelectItem key={def.name} value={def.name}>
+                          <div className="flex items-center gap-2">
+                            <span>{def.name}</span>
+                            <Badge variant="secondary" className="h-4 px-1 text-[9px]">existing</Badge>
+                          </div>
+                        </SelectItem>
+                      ))}
+                    </>
+                  )}
+                  {existingQtos.filter(q => !existingStandardQtos.some(d => d.name === q)).length > 0 && (
+                    <>
+                      <div className="px-2 py-1.5 text-[10px] font-bold uppercase tracking-wider text-zinc-400">
+                        Existing (custom)
+                      </div>
+                      {existingQtos.filter(q => !existingStandardQtos.some(d => d.name === q)).map((name) => (
+                        <SelectItem key={name} value={name}>
+                          <span>{name}</span>
+                        </SelectItem>
+                      ))}
+                    </>
+                  )}
+                  {availableStandardQtos.length > 0 && (
+                    <>
+                      <div className="px-2 py-1.5 text-[10px] font-bold uppercase tracking-wider text-emerald-600 dark:text-emerald-400">
+                        IFC4 Standard — {entityType}
+                      </div>
+                      {availableStandardQtos.map((def) => (
+                        <SelectItem key={def.name} value={def.name}>
+                          <div className="flex flex-col">
+                            <div className="flex items-center gap-2">
+                              <span className="font-medium">{def.name}</span>
+                              <Badge variant="outline" className="h-4 px-1 text-[9px] border-emerald-300 text-emerald-600">new</Badge>
+                            </div>
+                            <span className="text-[10px] text-zinc-400">{def.description}</span>
+                          </div>
+                        </SelectItem>
+                      ))}
+                    </>
+                  )}
+                </SelectContent>
+              </Select>
+            )}
+          </div>
+
+          {/* Quantity Selection */}
+          <div className="space-y-2">
+            <Label className="text-sm font-medium">Quantity</Label>
+            {quantitySuggestions.length > 0 ? (
+              <div className="space-y-2">
+                <Select value={quantityName} onValueChange={handleQuantitySelect}>
+                  <SelectTrigger className="font-mono text-sm">
+                    <SelectValue placeholder="Select quantity..." />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {quantitySuggestions.map((qty) => (
+                      <SelectItem key={qty.name} value={qty.name}>
+                        <div className="flex flex-col">
+                          <div className="flex items-center gap-2">
+                            <span className="font-medium">{qty.name}</span>
+                            <Badge variant="secondary" className="h-4 px-1 text-[9px]">{qty.unit}</Badge>
+                          </div>
+                          <span className="text-[10px] text-zinc-400">{qty.description}</span>
+                        </div>
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                {!quantityName && (
+                  <Input
+                    value={customQuantityName}
+                    onChange={(e) => setCustomQuantityName(e.target.value)}
+                    placeholder="Or type custom quantity name..."
+                    className="font-mono text-sm"
+                  />
+                )}
+              </div>
+            ) : (
+              <Input
+                value={customQuantityName}
+                onChange={(e) => setCustomQuantityName(e.target.value)}
+                placeholder="e.g., Length"
+                className="font-mono text-sm"
+              />
+            )}
+          </div>
+
+          {/* Value input */}
+          <div className="space-y-2">
+            <Label className="text-sm font-medium">
+              Value
+              {quantityName && (
+                <span className="ml-2 text-xs text-zinc-400 font-normal">
+                  ({getQuantityUnit(quantityType)})
+                </span>
+              )}
+            </Label>
+            <Input
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+              placeholder="Numeric value"
+              type="number"
+              step="any"
+              className="font-mono text-sm"
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => { setOpen(false); resetForm(); }}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit} disabled={!effectiveQtoName || !effectiveQuantityName}>
+            Add Quantity
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// ============================================================================
+// Edit Toolbar (combines all add actions)
+// ============================================================================
+
+interface EditToolbarProps {
+  modelId: string;
+  entityId: number;
+  entityType: string;
+  existingPsets: string[];
+  existingQtos?: string[];
+  schemaVersion?: string;
+}
+
+/**
+ * Edit mode toolbar with dropdown for adding properties, classifications, materials, and quantities.
+ * Schema-aware: filters available property/quantity sets based on entity type.
+ */
+export function EditToolbar({ modelId, entityId, entityType, existingPsets, existingQtos, schemaVersion }: EditToolbarProps) {
+  return (
+    <div className="flex items-center justify-between gap-2 mb-3 pb-2 border-b border-purple-200 dark:border-purple-800 bg-purple-50/30 dark:bg-purple-950/20 -mx-3 -mt-3 px-3 pt-3">
+      <div className="flex items-center gap-1.5 flex-wrap">
+        <NewPropertyDialog
+          modelId={modelId}
+          entityId={entityId}
+          entityType={entityType}
+          existingPsets={existingPsets}
+          schemaVersion={schemaVersion}
+        />
+        <AddQuantityDialog
+          modelId={modelId}
+          entityId={entityId}
+          entityType={entityType}
+          existingQtos={existingQtos ?? []}
+        />
+        <AddClassificationDialog
+          modelId={modelId}
+          entityId={entityId}
+          entityType={entityType}
+        />
+        <AddMaterialDialog
+          modelId={modelId}
+          entityId={entityId}
+          entityType={entityType}
+        />
+      </div>
+      <UndoRedoButtons modelId={modelId} />
+    </div>
+  );
+}
+
+// ============================================================================
+// Undo/Redo
+// ============================================================================
+
 interface UndoRedoButtonsProps {
   modelId: string;
 }
@@ -488,7 +1274,9 @@ export function UndoRedoButtons({ modelId }: UndoRedoButtonsProps) {
   );
 }
 
-// Helper functions
+// ============================================================================
+// Helper Functions
+// ============================================================================
 
 /**
  * Extract the raw value from typed IFC values.
@@ -524,7 +1312,7 @@ function formatValue(value: unknown): string {
 
 function formatDisplayValue(value: unknown): string {
   const raw = extractRawValue(value);
-  if (raw === null || raw === undefined) return '—';
+  if (raw === null || raw === undefined) return '\u2014';
   if (typeof raw === 'boolean') return raw ? 'True' : 'False';
   if (typeof raw === 'number') {
     return Number.isInteger(raw)
@@ -533,11 +1321,12 @@ function formatDisplayValue(value: unknown): string {
   }
   if (Array.isArray(raw)) return JSON.stringify(raw);
 
-  // Handle boolean strings
+  // Handle boolean strings (STEP enum format)
   const strVal = String(raw);
-  if (strVal === '.T.' || strVal.toUpperCase() === '.T.') return 'True';
-  if (strVal === '.F.' || strVal.toUpperCase() === '.F.') return 'False';
-  if (strVal === '.U.' || strVal.toUpperCase() === '.U.') return 'Unknown';
+  const upper = strVal.toUpperCase();
+  if (upper === '.T.') return 'True';
+  if (upper === '.F.') return 'False';
+  if (upper === '.U.') return 'Unknown';
   return strVal;
 }