@dickpy/dsh-imagegen 1.5.9 → 1.5.10

package/src/client/canvas-workspace.module.css

@@ -449,43 +449,79 @@
 
 /* --------------------------------------------------- bottom dock */
 
-.dock {
+/* reactbits.dev "Dock" port: dark pill panel; a spring engine (see the dock
+ * effect in CanvasWorkspace) scales each tile by pointer distance so items
+ * part apart like the macOS dock, and the outer wrapper breathes taller on
+ * hover to make room for the floating labels. */
+.dockOuter {
   position: absolute;
-  left: 50%;
+  left: 0;
+  right: 0;
   bottom: 14px;
-  transform: translateX(-50%);
   z-index: 30;
   display: flex;
-  align-items: center;
-  gap: 2px;
-  padding: 6px;
-  border-radius: 13px;
+  justify-content: center;
+  align-items: flex-end;
+  height: 42px;
+  pointer-events: none;
+}
+
+.dock {
+  pointer-events: auto;
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+  gap: 6px;
+  padding: 0 7px 7px;
+  border-radius: 15px;
   border: 1px solid var(--dsw-alias-border-l1);
   background: color-mix(in srgb, var(--dsw-alias-bg-layer-1) 92%, transparent);
-  box-shadow: 0 10px 30px rgb(15 23 42 / 14%);
   backdrop-filter: blur(10px);
+  box-shadow: 0 14px 34px rgb(15 23 42 / 16%);
 }
 
-/* macOS-dock magnification: the pointermove handler on .dock feeds a gaussian
- * falloff into --dock-scale / --dock-lift, so the hovered icon swells and lifts
- * while neighbours rise and fall like a zipper as the pointer slides across. */
-.dock .iconButton {
+.dockItem {
   position: relative;
-  width: 40px;
-  height: 40px;
-  border-radius: 11px;
-  transform: translateY(var(--dock-lift, 0px)) scale(var(--dock-scale, 1));
-  transform-origin: 50% 100%;
-  transition: transform 0.16s cubic-bezier(0.33, 1, 0.68, 1), background 0.15s ease, color 0.15s ease, box-shadow 0.18s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  cursor: pointer;
 }
 
-.dock .iconButton:not(:disabled):hover {
-  z-index: 2;
-  box-shadow: 0 6px 14px color-mix(in srgb, var(--dsw-alias-label-primary) 20%, transparent);
+.dockItem:hover { background: var(--dsw-alias-interactive-bg-hover); }
+
+.dockItem::after {
+  content: attr(data-label);
+  position: absolute;
+  top: -26px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 2px 8px;
+  border-radius: 6px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  background: var(--dsw-alias-bg-layer-1);
+  color: var(--dsw-alias-label-primary);
+  font-size: 11px;
+  line-height: 16px;
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  pointer-events: none;
+}
+
+.dockItem:hover::after { opacity: 1; }
+
+.dock .iconButton {
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
 }
 
-.dock .iconButton:not(:disabled):active {
-  transform: translateY(var(--dock-lift, 0px)) scale(0.94);
+.dock .iconButton:not(:disabled):hover {
+  background: transparent;
 }
 
 .dock .iconButton[data-active] {
@@ -495,10 +531,13 @@
 
 .dock .iconButton[data-active]:hover { background: var(--dsw-alias-label-primary); color: var(--dsw-alias-bg-layer-1); }
 
+.dock .iconButton:disabled { opacity: 0.3; cursor: not-allowed; }
+.dock .iconButton:disabled:hover { background: transparent; color: var(--dsw-alias-label-secondary); }
+
 .dockDivider {
+  align-self: center;
   width: 1px;
   height: 18px;
-  margin: 0 4px;
   background: var(--dsw-alias-border-l1);
 }