@floegence/floe-webapp-core 0.36.44 → 0.36.47

package/dist/workbench.css

@@ -215,13 +215,23 @@
     pointer-events: none;
     overflow: hidden;
     z-index: 13;
+    isolation: isolate;
   }
 
-  .workbench-canvas__projected-layer.is-work-layer-locked > .workbench-widget,
-  .workbench-canvas__projected-layer.is-work-layer-locked > .workbench-sticky {
+  .workbench-canvas__projected-work-layer {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 10;
+  }
+
+  .workbench-canvas__projected-layer.is-work-layer-locked
+    .workbench-canvas__projected-work-layer
+    > .workbench-widget,
+  .workbench-canvas__projected-layer.is-work-layer-locked
+    .workbench-canvas__projected-work-layer
+    > .workbench-sticky {
     pointer-events: none;
-    opacity: 0.16;
-    filter: saturate(0.45) contrast(0.86);
   }
 
   .workbench-canvas__grid {
@@ -297,13 +307,15 @@
     z-index: 20;
   }
 
-  .workbench-canvas__field.is-work-layer-muted .workbench-work-layer {
+  .workbench-region-visibility-outline-layer {
+    position: absolute;
+    inset: 0;
     pointer-events: none;
+    z-index: 1;
   }
 
-  .workbench-canvas__field.is-work-layer-muted .workbench-work-layer > :is(.workbench-widget, .workbench-sticky) {
-    opacity: 0.16;
-    filter: saturate(0.45) contrast(0.86);
+  .workbench-canvas__field.is-work-layer-muted .workbench-work-layer {
+    pointer-events: none;
   }
 
   /* ------------------------------------------------------------------ */
@@ -771,6 +783,33 @@
     will-change: transform;
   }
 
+  .workbench-region-visibility-outline {
+    position: absolute;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    pointer-events: none;
+    transform-origin: 0 0;
+    z-index: 1;
+    border: calc(1.75px * var(--workbench-region-outline-scale, 1)) dashed
+      color-mix(in srgb, var(--workbench-region-ink) 86%, var(--foreground, #111) 14%);
+    box-shadow:
+      0 0 0 calc(1px * var(--workbench-region-outline-scale, 1))
+        color-mix(in srgb, var(--background, #fff) 82%, transparent),
+      0 0 0 calc(3px * var(--workbench-region-outline-scale, 1))
+        color-mix(in srgb, var(--workbench-region-ink) 30%, transparent),
+      0 10px calc(22px * var(--workbench-region-outline-scale, 1))
+        color-mix(in srgb, var(--foreground, #000) 12%, transparent);
+  }
+
+  .workbench-region-visibility-outline.is-selected-region {
+    z-index: 2;
+    border-color: color-mix(in srgb, var(--workbench-region-ink) 52%, transparent);
+    box-shadow:
+      0 0 0 calc(1px * var(--workbench-region-outline-scale, 1))
+        color-mix(in srgb, var(--background, #fff) 64%, transparent);
+  }
+
   .workbench-layer-control__selection {
     position: absolute;
     inset: 0;
@@ -778,8 +817,11 @@
   }
 
   .workbench-layer-control__selection.is-region {
-    outline: 1.5px dashed color-mix(in srgb, var(--primary, #3b82f6) 62%, transparent);
-    outline-offset: 3px;
+    outline: 2px solid color-mix(in srgb, var(--primary, #3b82f6) 78%, white 8%);
+    outline-offset: 4px;
+    box-shadow:
+      0 0 0 1px color-mix(in srgb, var(--background, #fff) 72%, transparent),
+      0 0 0 6px color-mix(in srgb, var(--primary, #3b82f6) 10%, transparent);
   }
 
   .workbench-layer-control__selection.is-text {
@@ -829,8 +871,8 @@
   .workbench-text-annotation__content {
     display: block;
     box-sizing: border-box;
-    width: 100%;
-    height: 100%;
+    width: calc(100% * var(--workbench-text-content-inverse-scale, 1));
+    height: calc(100% * var(--workbench-text-content-inverse-scale, 1));
     padding: 0;
     border: 0 !important;
     border-radius: 0;
@@ -851,6 +893,8 @@
     -webkit-user-select: text;
     user-select: text;
     caret-color: var(--workbench-text-color);
+    transform: scale(var(--workbench-text-content-scale, 1));
+    transform-origin: 0 0;
   }
 
   .floe-infinite-canvas .workbench-text-annotation__content,
@@ -859,8 +903,8 @@
   .workbench-text-annotation__content:active {
     display: block;
     box-sizing: border-box;
-    width: 100%;
-    height: 100%;
+    width: calc(100% * var(--workbench-text-content-inverse-scale, 1));
+    height: calc(100% * var(--workbench-text-content-inverse-scale, 1));
     padding: 0;
     border: 0 !important;
     border-radius: 0;
@@ -881,6 +925,8 @@
     -webkit-user-select: text;
     user-select: text;
     caret-color: var(--workbench-text-color);
+    transform: scale(var(--workbench-text-content-scale, 1));
+    transform-origin: 0 0;
   }
 
   .workbench-text-annotation__size-input {
@@ -1244,10 +1290,16 @@
       border-color 180ms ease;
   }
 
-  .workbench-canvas__projected-layer > .workbench-widget {
+  .workbench-canvas__projected-work-layer > .workbench-widget,
+  .workbench-canvas__projected-work-layer > .workbench-sticky {
     pointer-events: auto;
   }
 
+  .workbench-canvas__projected-work-layer > .workbench-widget,
+  .workbench-canvas__projected-work-layer > .workbench-sticky {
+    isolation: isolate;
+  }
+
   .workbench-widget.is-projected-surface {
     transform-origin: 0 0;
   }
@@ -1262,6 +1314,45 @@
     overflow: hidden;
   }
 
+  .workbench-widget__surface::after,
+  .workbench-sticky__surface::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 30;
+    pointer-events: none;
+    opacity: 0;
+    background:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--background, #fff) 82%, transparent),
+        color-mix(in srgb, var(--background, #fff) 74%, transparent)
+      );
+    transition: opacity 160ms ease;
+  }
+
+  .workbench-canvas__field.is-work-layer-muted
+    .workbench-work-layer
+    > :is(.workbench-widget, .workbench-sticky)
+    :is(.workbench-widget__surface, .workbench-sticky__surface)::after,
+  .workbench-canvas__projected-layer.is-work-layer-locked
+    .workbench-canvas__projected-work-layer
+    > :is(.workbench-widget, .workbench-sticky)
+    :is(.workbench-widget__surface, .workbench-sticky__surface)::after {
+    opacity: 0.84;
+  }
+
+  .workbench-canvas__field.is-work-layer-muted
+    .workbench-work-layer
+    > :is(.workbench-widget, .workbench-sticky),
+  .workbench-canvas__projected-layer.is-work-layer-locked
+    .workbench-canvas__projected-work-layer
+    > :is(.workbench-widget, .workbench-sticky) {
+    box-shadow:
+      0 1px 2px color-mix(in srgb, var(--foreground, #000) 2%, transparent),
+      0 8px 22px -18px color-mix(in srgb, var(--foreground, #000) 12%, transparent);
+  }
+
   .workbench-widget.is-dragging {
     will-change: transform;
     transition: none;
@@ -1445,6 +1536,17 @@
       0 18px 42px -14px color-mix(in srgb, var(--primary, #3b82f6) 22%, transparent);
   }
 
+  .workbench-surface[data-workbench-mode='background'] .workbench-widget {
+    background: var(--card, #fff);
+    border-color: color-mix(in srgb, var(--border, #e5e5e5) 88%, var(--card, #fff));
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+
+  .workbench-surface[data-workbench-mode='background'] .workbench-widget__header {
+    background: color-mix(in srgb, var(--card, #fff) 92%, var(--muted, #f3f3f3) 8%);
+  }
+
   .workbench-widget__title-area {
     display: flex;
     align-items: center;
@@ -1801,6 +1903,25 @@
     background: color-mix(in srgb, var(--popover, var(--card, #fff)) 92%, transparent);
   }
 
+  .workbench-surface[data-workbench-mode='background'] .workbench-dock,
+  .workbench-surface[data-workbench-mode='background'] .workbench-dock__mode-popover,
+  .workbench-surface[data-workbench-mode='background'] .workbench-lock-button,
+  .workbench-surface[data-workbench-mode='background'] .workbench-hud,
+  .workbench-surface[data-workbench-mode='background'] .workbench-dock-ghost__card {
+    background: var(--popover, var(--card, #fff));
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+
+  .workbench-surface[data-workbench-mode='background'] .workbench-dock__tile,
+  .workbench-surface[data-workbench-mode='background'] .workbench-dock__mode-option-icon {
+    background: color-mix(in srgb, var(--muted, #f1f1f1) 84%, var(--card, #fff));
+  }
+
+  .workbench-surface[data-workbench-mode='background'] .workbench-dock__mode-popover::after {
+    background: var(--popover, var(--card, #fff));
+  }
+
   .workbench-dock__mode-option {
     position: relative;
     display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.36.44",
+  "version": "0.36.47",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",