From dd8566eabc310010e1e3a7b2f0fa9369df46ba33 Mon Sep 17 00:00:00 2001
From: seb <sebgreenbus@gmail.com>
Date: Sun, 4 Oct 2026 09:37:09 +0200
Subject: [PATCH] u

---
 src/components/tiles/ArticleTile.jsx  |  89 +++--
 src/components/tiles/CategoryTile.jsx |  10 +-
 src/routes/artikel/merkmale.jsx       | 466 ++++++++++++--------------
 3 files changed, 284 insertions(+), 281 deletions(-)

diff --git a/src/components/tiles/ArticleTile.jsx b/src/components/tiles/ArticleTile.jsx
index 9ee8527..d74d87c 100644
--- a/src/components/tiles/ArticleTile.jsx
+++ b/src/components/tiles/ArticleTile.jsx
@@ -3,10 +3,15 @@ import Inventory2OutlinedIcon from '@mui/icons-material/Inventory2Outlined';
 import Box from '@mui/material/Box';
 import ButtonBase from '@mui/material/ButtonBase';
 import Typography from '@mui/material/Typography';
-import { Tile, tileBaseSx } from 'dashgui/tiles';
+import { TILE_SIZE, Tile, tileBaseSx } from 'dashgui/tiles';
 import { formatPrice } from '../../utils/price';
 import { articleSku } from '../article/articleRoute';
-import { getThumbHashDataUrl, getCachedImage, imageCache } from '../article/ThumbHashImage';
+import {
+  getThumbHashDataUrl,
+  getCachedImage,
+  isImageLoaded,
+  markImageLoaded,
+} from '../article/ThumbHashImage';
 import { BrandLabel } from '../brand';
 import { thumb } from '../../api';
 
@@ -103,7 +108,26 @@ class ArticleTileBackdrop extends PureComponent {
   constructor(props) {
     super(props);
     this.thumbUrl = getThumbHashDataUrl(props.thumbHash);
-    this.img = getCachedImage(props.fullHash);
+    const fullHash = props.fullHash;
+    if (fullHash) {
+      const cached = getCachedImage(fullHash);
+      if (cached) {
+        this.img = cached;
+      } else {
+        const img = new Image();
+        img.onload = () => {
+          markImageLoaded(fullHash, img);
+          if (this.img === img) {
+            this.paint();
+          }
+        };
+        img.src = thumb.url(fullHash);
+        this.img = img;
+        if (img.complete && img.naturalWidth) {
+          markImageLoaded(fullHash, img);
+        }
+      }
+    }
   }
 
   componentDidMount() {
@@ -127,35 +151,37 @@ class ArticleTileBackdrop extends PureComponent {
 
   loadImage() {
     const { fullHash } = this.props;
-    if (fullHash) {
-      const cached = getCachedImage(fullHash);
-      if (cached) {
-        this.img = cached;
+    if (!fullHash) return;
+    const cached = getCachedImage(fullHash);
+    if (cached) {
+      this.img = cached;
+      this.paint();
+      return;
+    }
+    if (this.img && this.img.src === thumb.url(fullHash)) {
+      if (this.img.complete && this.img.naturalWidth) {
+        markImageLoaded(fullHash, this.img);
         this.paint();
-        return;
       }
-      const img = new Image();
-      img.onload = () => {
-        imageCache.set(fullHash, img);
-        if (this.img === img) {
-          this.paint();
-        }
-      };
-      img.src = thumb.url(fullHash);
-      this.img = img;
-      if (img.complete && img.naturalWidth) {
-        imageCache.set(fullHash, img);
+      return;
+    }
+    const img = new Image();
+    img.onload = () => {
+      markImageLoaded(fullHash, img);
+      if (this.img === img) {
         this.paint();
-        return;
       }
+    };
+    img.src = thumb.url(fullHash);
+    this.img = img;
+    if (img.complete && img.naturalWidth) {
+      markImageLoaded(fullHash, img);
+      this.paint();
     }
   }
 
   setCanvas = (canvas) => {
     this.canvasRef = canvas;
-    if (!this.img && this.props.fullHash) {
-      this.img = getCachedImage(this.props.fullHash);
-    }
     if (canvas && typeof ResizeObserver !== 'undefined') {
       this.observer?.disconnect();
       this.observer = new ResizeObserver(() => this.paint());
@@ -168,16 +194,18 @@ class ArticleTileBackdrop extends PureComponent {
     const canvas = this.canvasRef;
     if (!canvas) return;
     const rect = canvas.getBoundingClientRect();
-    const dstW = Math.round(rect.width);
-    const dstH = Math.round(rect.height);
+    const dstW = Math.round(rect.width) || canvas.clientWidth || TILE_SIZE;
+    const dstH = Math.round(rect.height) || canvas.clientHeight || TILE_SIZE;
     if (!dstW || !dstH) return;
 
-    canvas.width = dstW;
-    canvas.height = dstH;
+    if (canvas.width !== dstW) canvas.width = dstW;
+    if (canvas.height !== dstH) canvas.height = dstH;
     const ctx = canvas.getContext('2d');
     if (!ctx) return;
 
-    const img = this.img || getCachedImage(this.props.fullHash);
+    const img = (this.img && this.img.complete && this.img.naturalWidth)
+      ? this.img
+      : getCachedImage(this.props.fullHash);
     if (img && img.complete && img.naturalWidth && img.naturalHeight) {
       this.img = img;
       drawContainedWithStretchedEdges(
@@ -192,7 +220,8 @@ class ArticleTileBackdrop extends PureComponent {
   };
 
   render() {
-    const hasCachedImage = Boolean(this.img && this.img.complete && this.img.naturalWidth);
+    const { fullHash } = this.props;
+    const showThumb = !isImageLoaded(fullHash) && Boolean(this.thumbUrl);
     return (
       <Box
         sx={{
@@ -203,7 +232,7 @@ class ArticleTileBackdrop extends PureComponent {
           overflow: 'hidden',
         }}
       >
-        {!hasCachedImage && this.thumbUrl ? (
+        {showThumb ? (
           <Box
             component="img"
             src={this.thumbUrl}
diff --git a/src/components/tiles/CategoryTile.jsx b/src/components/tiles/CategoryTile.jsx
index 552ca35..dd68735 100644
--- a/src/components/tiles/CategoryTile.jsx
+++ b/src/components/tiles/CategoryTile.jsx
@@ -9,7 +9,7 @@ import SettingsIcon from '@mui/icons-material/Settings';
 import PointOfSaleIcon from '@mui/icons-material/PointOfSale';
 import PhotoCameraIcon from '@mui/icons-material/PhotoCamera';
 import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
-import { getThumbHashDataUrl, getCachedImage, imageCache } from '../article/ThumbHashImage';
+import { getThumbHashDataUrl, isImageLoaded, markImageLoaded } from '../article/ThumbHashImage';
 import { thumb } from '../../api';
 import { tileBaseSx } from 'dashgui/tiles';
 
@@ -198,7 +198,7 @@ class CategoryBackdrop extends PureComponent {
   constructor(props) {
     super(props);
     this.thumbUrl = getThumbHashDataUrl(props.thumbHash);
-    this.isCached = Boolean(getCachedImage(props.fullHash));
+    this.isCached = isImageLoaded(props.fullHash);
   }
 
   componentDidUpdate(prevProps) {
@@ -206,21 +206,21 @@ class CategoryBackdrop extends PureComponent {
       this.thumbUrl = getThumbHashDataUrl(this.props.thumbHash);
     }
     if (prevProps.fullHash !== this.props.fullHash) {
-      this.isCached = Boolean(getCachedImage(this.props.fullHash));
+      this.isCached = isImageLoaded(this.props.fullHash);
       this.forceUpdate();
     }
   }
 
   handleLoad = (e) => {
     if (this.props.fullHash && e.target) {
-      imageCache.set(this.props.fullHash, e.target);
+      markImageLoaded(this.props.fullHash, e.target);
     }
   };
 
   render() {
     const { fullHash } = this.props;
     if (!this.thumbUrl && !fullHash) return null;
-    const isCached = this.isCached || Boolean(getCachedImage(fullHash));
+    const isCached = this.isCached || isImageLoaded(fullHash);
     return (
       <Box sx={{ position: 'absolute', inset: 0, zIndex: 0, overflow: 'hidden' }}>
         {!isCached && this.thumbUrl ? (
diff --git a/src/routes/artikel/merkmale.jsx b/src/routes/artikel/merkmale.jsx
index e274d48..7a33fd2 100644
--- a/src/routes/artikel/merkmale.jsx
+++ b/src/routes/artikel/merkmale.jsx
@@ -630,36 +630,44 @@ class ArtikelMerkmalePage extends PureComponent {
         `}</style>
 
         <PanelTileGrid>
-          {/* Tile 1: Merkmale (Freitext) */}
-          <PanelTile wide={2} minHeight={280} color="#fed7aa">
+          {/* Tile 1: Attribute (Auswahllisten) */}
+          <PanelTile wide={2} minHeight={280} color="#bfdbfe">
             <Stack spacing={2}>
               <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                <TuneIcon sx={{ color: 'text.secondary', fontSize: 20 }} />
+                <StyleIcon sx={{ color: 'text.secondary', fontSize: 20 }} />
                 <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
-                  Merkmale
+                  Auswahl-Merkmale
                 </Typography>
-                <Chip label={properties.length} size="small" sx={{ ml: 'auto', fontWeight: 600, height: 20 }} />
+                <Chip label={attributes.length} size="small" sx={{ ml: 'auto', fontWeight: 600, height: 20 }} />
               </Box>
 
-              <Typography variant="body2" color="text.secondary">
-                Reihenfolge per Drag &amp; Drop anpassen.
-              </Typography>
-
-              <List dense disablePadding ref={this.propListRef}>
-                {properties.length === 0 ? (
-                  <Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
-                    Noch keine Merkmale angelegt.
-                  </Typography>
-                ) : (
-                  properties.map((p) => (
+              <List dense disablePadding ref={this.attrListRef}>
+                {attributes.map((a) => {
+                  const isSelected = selectedAttr?.id === a.id;
+                  return (
                     <ListItem
-                      key={p.id}
+                      key={a.id}
                       disableGutters
-                      sx={{ gap: 1, py: 0.75, alignItems: 'center' }}
-                      data-id={p.id}
+                      onClick={() => this.handleSelectAttribute(a.id)}
+                      sx={{
+                        gap: 1,
+                        py: 0.75,
+                        px: 0.5,
+                        borderRadius: 1.5,
+                        alignItems: 'center',
+                        cursor: 'pointer',
+                        bgcolor: isSelected ? 'rgba(59, 130, 246, 0.12)' : 'transparent',
+                        border: isSelected ? '1px solid rgba(59, 130, 246, 0.3)' : '1px solid transparent',
+                        transition: 'all 0.15s ease',
+                        '&:hover': {
+                          bgcolor: isSelected ? 'rgba(59, 130, 246, 0.16)' : 'rgba(0, 0, 0, 0.04)',
+                        },
+                      }}
+                      data-id={a.id}
                     >
                       <Box
                         className="drag-handle"
+                        onClick={(e) => e.stopPropagation()}
                         sx={{
                           display: 'flex',
                           alignItems: 'center',
@@ -671,46 +679,57 @@ class ArtikelMerkmalePage extends PureComponent {
                       >
                         <DragIndicatorIcon fontSize="small" />
                       </Box>
-                      <TuneIcon sx={{ color: 'text.secondary', fontSize: 20, flexShrink: 0 }} />
-                      <SingleLineTextEdit
-                        size="small"
-                        label=""
-                        value={propDrafts[p.id] ?? ''}
-                        disabled={busy}
-                        onChange={(next) =>
-                          this.setState((prev) => ({
-                            propDrafts: { ...prev.propDrafts, [p.id]: next },
-                          }))
-                        }
-                        onBlur={() => void this.handleRenameProperty(p)}
-                        onKeyDown={(event) => {
-                          if (event.key === 'Enter') {
-                            event.preventDefault();
-                            event.target.blur();
-                          }
-                          if (event.key === 'Escape') {
-                            event.preventDefault();
-                            this.setState((prev) => ({
-                              propDrafts: { ...prev.propDrafts, [p.id]: p.name },
-                            }));
-                            event.target.blur();
-                          }
+
+                      <StyleIcon
+                        sx={{
+                          color: isSelected ? 'primary.main' : 'text.secondary',
+                          fontSize: 20,
+                          flexShrink: 0,
                         }}
-                        sx={{ flex: 1 }}
                       />
+
+                      <Box onClick={(e) => e.stopPropagation()} sx={{ flex: 1, minWidth: 0 }}>
+                        <SingleLineTextEdit
+                          size="small"
+                          label=""
+                          value={attrDrafts[a.id] ?? ''}
+                          disabled={busy}
+                          onChange={(next) =>
+                            this.setState((prev) => ({
+                              attrDrafts: { ...prev.attrDrafts, [a.id]: next },
+                            }))
+                          }
+                          onBlur={() => void this.handleRenameAttribute(a)}
+                          onKeyDown={(event) => {
+                            if (event.key === 'Enter') {
+                              event.preventDefault();
+                              event.target.blur();
+                            }
+                            if (event.key === 'Escape') {
+                              event.preventDefault();
+                              this.setState((prev) => ({
+                                attrDrafts: { ...prev.attrDrafts, [a.id]: a.name },
+                              }));
+                              event.target.blur();
+                            }
+                          }}
+                          sx={{ width: '100%' }}
+                        />
+                      </Box>
+
                       <Tooltip
                         title={
-                          p.exclusive
-                            ? 'Einzelauswahl (Artikel kann max. 1 Wert für dieses Merkmal haben)'
-                            : 'Mehrfachauswahl (Artikel kann mehrere Werte für dieses Merkmal haben)'
+                          a.exclusive
+                            ? 'Einzelauswahl (Artikel kann max. 1 Wert wählen)'
+                            : 'Mehrfachauswahl (Artikel kann mehrere Werte wählen)'
                         }
                       >
                         <Chip
-                          label={p.exclusive ? '1x' : 'Multi'}
+                          label={a.exclusive ? '1x' : 'Multi'}
                           size="small"
-                          color={p.exclusive ? 'primary' : 'default'}
-                          variant={p.exclusive ? 'filled' : 'outlined'}
-                          onClick={(e) => void this.handleTogglePropertyExclusive(p, e)}
+                          color={a.exclusive ? 'primary' : 'default'}
+                          variant={a.exclusive ? 'filled' : 'outlined'}
+                          onClick={(e) => void this.handleToggleAttributeExclusive(a, e)}
                           sx={{
                             height: 22,
                             fontSize: '0.72rem',
@@ -720,206 +739,27 @@ class ArtikelMerkmalePage extends PureComponent {
                           }}
                         />
                       </Tooltip>
+
                       <IconButton
                         edge="end"
                         size="small"
-                        aria-label={`„${p.name}" löschen`}
+                        aria-label={`„${a.name}" löschen`}
                         disabled={busy}
-                        onClick={() => void this.handleDeleteProperty(p)}
+                        onClick={(e) => void this.handleDeleteAttribute(a, e)}
+                        sx={{ flexShrink: 0 }}
                       >
                         <DeleteOutlinedIcon fontSize="small" />
                       </IconButton>
                     </ListItem>
-                  ))
-                )}
+                  );
+                })}
               </List>
 
               <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
                 <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                   <SingleLineTextEdit
                     size="small"
-                    label="Neues Merkmal"
-                    value={newPropName}
-                    disabled={busy}
-                    onChange={(next) => this.setState({ newPropName: next })}
-                    onKeyDown={(event) => {
-                      if (event.key === 'Enter') {
-                        event.preventDefault();
-                        void this.handleCreateProperty();
-                      }
-                    }}
-                    sx={{ flex: 1 }}
-                  />
-                  <Button
-                    variant="contained"
-                    size="small"
-                    disabled={busy || !newPropName.trim()}
-                    onClick={() => void this.handleCreateProperty()}
-                  >
-                    {busyKey === 'new-prop' ? '…' : 'Hinzufügen'}
-                  </Button>
-                </Box>
-                <FormControlLabel
-                  control={
-                    <Checkbox
-                      size="small"
-                      checked={newPropExclusive}
-                      disabled={busy}
-                      onChange={(e) => this.setState({ newPropExclusive: e.target.checked })}
-                      sx={{ p: 0.5 }}
-                    />
-                  }
-                  label={
-                    <Typography variant="caption" color="text.secondary">
-                      Einzelauswahl (max. 1 Wert pro Artikel)
-                    </Typography>
-                  }
-                  sx={{ ml: 0.5, mt: -0.5 }}
-                />
-              </Box>
-            </Stack>
-          </PanelTile>
-
-          {/* Tile 2: Attribute (Auswahllisten) */}
-          <PanelTile wide={2} minHeight={280} color="#bfdbfe">
-            <Stack spacing={2}>
-              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                <StyleIcon sx={{ color: 'text.secondary', fontSize: 20 }} />
-                <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
-                  Attribute
-                </Typography>
-                <Chip label={attributes.length} size="small" sx={{ ml: 'auto', fontWeight: 600, height: 20 }} />
-              </Box>
-
-              <Typography variant="body2" color="text.secondary">
-                Reihenfolge per Drag &amp; Drop anpassen.
-              </Typography>
-
-              <List dense disablePadding ref={this.attrListRef}>
-                {attributes.length === 0 ? (
-                  <Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
-                    Noch keine Attribute angelegt.
-                  </Typography>
-                ) : (
-                  attributes.map((a) => {
-                    const isSelected = selectedAttr?.id === a.id;
-                    return (
-                      <ListItem
-                        key={a.id}
-                        disableGutters
-                        onClick={() => this.handleSelectAttribute(a.id)}
-                        sx={{
-                          gap: 1,
-                          py: 0.75,
-                          px: 0.5,
-                          borderRadius: 1.5,
-                          alignItems: 'center',
-                          cursor: 'pointer',
-                          bgcolor: isSelected ? 'rgba(59, 130, 246, 0.12)' : 'transparent',
-                          border: isSelected ? '1px solid rgba(59, 130, 246, 0.3)' : '1px solid transparent',
-                          transition: 'all 0.15s ease',
-                          '&:hover': {
-                            bgcolor: isSelected ? 'rgba(59, 130, 246, 0.16)' : 'rgba(0, 0, 0, 0.04)',
-                          },
-                        }}
-                        data-id={a.id}
-                      >
-                        <Box
-                          className="drag-handle"
-                          onClick={(e) => e.stopPropagation()}
-                          sx={{
-                            display: 'flex',
-                            alignItems: 'center',
-                            color: 'text.disabled',
-                            flexShrink: 0,
-                            '&:hover': { color: 'text.secondary' },
-                            transition: 'color 0.15s',
-                          }}
-                        >
-                          <DragIndicatorIcon fontSize="small" />
-                        </Box>
-
-                        <StyleIcon
-                          sx={{
-                            color: isSelected ? 'primary.main' : 'text.secondary',
-                            fontSize: 20,
-                            flexShrink: 0,
-                          }}
-                        />
-
-                        <Box onClick={(e) => e.stopPropagation()} sx={{ flex: 1, minWidth: 0 }}>
-                          <SingleLineTextEdit
-                            size="small"
-                            label=""
-                            value={attrDrafts[a.id] ?? ''}
-                            disabled={busy}
-                            onChange={(next) =>
-                              this.setState((prev) => ({
-                                attrDrafts: { ...prev.attrDrafts, [a.id]: next },
-                              }))
-                            }
-                            onBlur={() => void this.handleRenameAttribute(a)}
-                            onKeyDown={(event) => {
-                              if (event.key === 'Enter') {
-                                event.preventDefault();
-                                event.target.blur();
-                              }
-                              if (event.key === 'Escape') {
-                                event.preventDefault();
-                                this.setState((prev) => ({
-                                  attrDrafts: { ...prev.attrDrafts, [a.id]: a.name },
-                                }));
-                                event.target.blur();
-                              }
-                            }}
-                            sx={{ width: '100%' }}
-                          />
-                        </Box>
-
-                        <Tooltip
-                          title={
-                            a.exclusive
-                              ? 'Einzelauswahl (Artikel kann max. 1 Wert wählen)'
-                              : 'Mehrfachauswahl (Artikel kann mehrere Werte wählen)'
-                          }
-                        >
-                          <Chip
-                            label={a.exclusive ? '1x' : 'Multi'}
-                            size="small"
-                            color={a.exclusive ? 'primary' : 'default'}
-                            variant={a.exclusive ? 'filled' : 'outlined'}
-                            onClick={(e) => void this.handleToggleAttributeExclusive(a, e)}
-                            sx={{
-                              height: 22,
-                              fontSize: '0.72rem',
-                              fontWeight: 600,
-                              cursor: 'pointer',
-                              flexShrink: 0,
-                            }}
-                          />
-                        </Tooltip>
-
-                        <IconButton
-                          edge="end"
-                          size="small"
-                          aria-label={`„${a.name}" löschen`}
-                          disabled={busy}
-                          onClick={(e) => void this.handleDeleteAttribute(a, e)}
-                          sx={{ flexShrink: 0 }}
-                        >
-                          <DeleteOutlinedIcon fontSize="small" />
-                        </IconButton>
-                      </ListItem>
-                    );
-                  })
-                )}
-              </List>
-
-              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                  <SingleLineTextEdit
-                    size="small"
-                    label="Neues Attribut"
+                    label=""
                     value={newAttrName}
                     disabled={busy}
                     onChange={(next) => this.setState({ newAttrName: next })}
@@ -961,7 +801,7 @@ class ArtikelMerkmalePage extends PureComponent {
             </Stack>
           </PanelTile>
 
-          {/* Tile 3: Werte für das gewählte Attribut */}
+          {/* Tile 2: Werte für das gewählte Attribut */}
           <PanelTile wide={2} minHeight={280} color="#ddd6fe">
             <Stack spacing={2}>
               <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
@@ -978,14 +818,8 @@ class ArtikelMerkmalePage extends PureComponent {
                 ) : null}
               </Box>
 
-              <Typography variant="body2" color="text.secondary">
-                {selectedAttr
-                  ? 'Reihenfolge per Drag & Drop anpassen.'
-                  : 'Wähle links ein Attribut aus, um Werte zu bearbeiten.'}
-              </Typography>
-
               {!selectedAttr ? (
-                <Typography variant="body2" color="text.secondary" sx={{ py: 3, textAlign: 'center', fontStyle: 'italic' }}>
+                <Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
                   Kein Attribut ausgewählt.
                 </Typography>
               ) : (
@@ -1060,7 +894,7 @@ class ArtikelMerkmalePage extends PureComponent {
                   <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                     <SingleLineTextEdit
                       size="small"
-                      label={`Neuer Wert für „${selectedAttr.name}“`}
+                      label=""
                       value={newValText}
                       disabled={busy}
                       onChange={(next) => this.setState({ newValText: next })}
@@ -1085,6 +919,146 @@ class ArtikelMerkmalePage extends PureComponent {
               )}
             </Stack>
           </PanelTile>
+
+          {/* Tile 3: Merkmale (Freitext) */}
+          <PanelTile wide={2} minHeight={280} color="#fed7aa">
+            <Stack spacing={2}>
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                <TuneIcon sx={{ color: 'text.secondary', fontSize: 20 }} />
+                <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
+                  Text-Merkmale
+                </Typography>
+                <Chip label={properties.length} size="small" sx={{ ml: 'auto', fontWeight: 600, height: 20 }} />
+              </Box>
+
+              <List dense disablePadding ref={this.propListRef}>
+                {properties.map((p) => (
+                  <ListItem
+                    key={p.id}
+                    disableGutters
+                    sx={{ gap: 1, py: 0.75, alignItems: 'center' }}
+                    data-id={p.id}
+                  >
+                    <Box
+                      className="drag-handle"
+                      sx={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        color: 'text.disabled',
+                        flexShrink: 0,
+                        '&:hover': { color: 'text.secondary' },
+                        transition: 'color 0.15s',
+                      }}
+                    >
+                      <DragIndicatorIcon fontSize="small" />
+                    </Box>
+                    <TuneIcon sx={{ color: 'text.secondary', fontSize: 20, flexShrink: 0 }} />
+                    <SingleLineTextEdit
+                      size="small"
+                      label=""
+                      value={propDrafts[p.id] ?? ''}
+                      disabled={busy}
+                      onChange={(next) =>
+                        this.setState((prev) => ({
+                          propDrafts: { ...prev.propDrafts, [p.id]: next },
+                        }))
+                      }
+                      onBlur={() => void this.handleRenameProperty(p)}
+                      onKeyDown={(event) => {
+                        if (event.key === 'Enter') {
+                          event.preventDefault();
+                          event.target.blur();
+                        }
+                        if (event.key === 'Escape') {
+                          event.preventDefault();
+                          this.setState((prev) => ({
+                            propDrafts: { ...prev.propDrafts, [p.id]: p.name },
+                          }));
+                          event.target.blur();
+                        }
+                      }}
+                      sx={{ flex: 1 }}
+                    />
+                    <Tooltip
+                      title={
+                        p.exclusive
+                          ? 'Einzelauswahl (Artikel kann max. 1 Wert für dieses Merkmal haben)'
+                          : 'Mehrfachauswahl (Artikel kann mehrere Werte für dieses Merkmal haben)'
+                      }
+                    >
+                      <Chip
+                        label={p.exclusive ? '1x' : 'Multi'}
+                        size="small"
+                        color={p.exclusive ? 'primary' : 'default'}
+                        variant={p.exclusive ? 'filled' : 'outlined'}
+                        onClick={(e) => void this.handleTogglePropertyExclusive(p, e)}
+                        sx={{
+                          height: 22,
+                          fontSize: '0.72rem',
+                          fontWeight: 600,
+                          cursor: 'pointer',
+                          flexShrink: 0,
+                        }}
+                      />
+                    </Tooltip>
+                    <IconButton
+                      edge="end"
+                      size="small"
+                      aria-label={`„${p.name}" löschen`}
+                      disabled={busy}
+                      onClick={() => void this.handleDeleteProperty(p)}
+                    >
+                      <DeleteOutlinedIcon fontSize="small" />
+                    </IconButton>
+                  </ListItem>
+                ))}
+              </List>
+
+              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                  <SingleLineTextEdit
+                    size="small"
+                    label=""
+                    value={newPropName}
+                    disabled={busy}
+                    onChange={(next) => this.setState({ newPropName: next })}
+                    onKeyDown={(event) => {
+                      if (event.key === 'Enter') {
+                        event.preventDefault();
+                        void this.handleCreateProperty();
+                      }
+                    }}
+                    sx={{ flex: 1 }}
+                  />
+                  <Button
+                    variant="contained"
+                    size="small"
+                    disabled={busy || !newPropName.trim()}
+                    onClick={() => void this.handleCreateProperty()}
+                  >
+                    {busyKey === 'new-prop' ? '…' : 'Hinzufügen'}
+                  </Button>
+                </Box>
+                <FormControlLabel
+                  control={
+                    <Checkbox
+                      size="small"
+                      checked={newPropExclusive}
+                      disabled={busy}
+                      onChange={(e) => this.setState({ newPropExclusive: e.target.checked })}
+                      sx={{ p: 0.5 }}
+                    />
+                  }
+                  label={
+                    <Typography variant="caption" color="text.secondary">
+                      Einzelauswahl (max. 1 Wert pro Artikel)
+                    </Typography>
+                  }
+                  sx={{ ml: 0.5, mt: -0.5 }}
+                />
+              </Box>
+            </Stack>
+          </PanelTile>
         </PanelTileGrid>
       </>
     );