@floegence/floe-webapp-core 0.36.42 → 0.36.43

package/dist/workbench.css

@@ -214,38 +214,1004 @@
     inset: 0;
     pointer-events: none;
     overflow: hidden;
-    z-index: 3;
+    z-index: 13;
+  }
+
+  .workbench-canvas__projected-layer.is-work-layer-locked > .workbench-widget,
+  .workbench-canvas__projected-layer.is-work-layer-locked > .workbench-sticky {
+    pointer-events: none;
+    opacity: 0.16;
+    filter: saturate(0.45) contrast(0.86);
   }
 
   .workbench-canvas__grid {
     position: absolute;
-    inset: 0;
+    inset: 0;
+    pointer-events: none;
+    background-image:
+      linear-gradient(
+        to right,
+        color-mix(in srgb, var(--border, #e5e5e5) 42%, transparent) 1px,
+        transparent 1px
+      ),
+      linear-gradient(
+        to bottom,
+        color-mix(in srgb, var(--border, #e5e5e5) 42%, transparent) 1px,
+        transparent 1px
+      ),
+      radial-gradient(
+        circle,
+        color-mix(in srgb, var(--border, #e5e5e5) 70%, transparent) 0.9px,
+        transparent 1px
+      );
+    background-size:
+      var(--wb-grid-major) var(--wb-grid-major),
+      var(--wb-grid-major) var(--wb-grid-major),
+      var(--wb-grid-minor) var(--wb-grid-minor);
+    background-position:
+      0 0,
+      0 0,
+      var(--wb-grid-minor-offset) var(--wb-grid-minor-offset);
+    opacity: 0.78;
+  }
+
+  .workbench-background-layer,
+  .workbench-annotation-layer,
+  .workbench-work-layer,
+  .workbench-control-overlay-layer {
+    position: absolute;
+    inset: 0;
+  }
+
+  .workbench-background-layer {
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .workbench-background-layer.is-editable {
+    pointer-events: none;
+  }
+
+  .workbench-background-layer.is-filtered-out,
+  .workbench-annotation-layer.is-filtered-out,
+  .workbench-sticky.is-filtered-out {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .workbench-annotation-layer {
+    pointer-events: none;
+    z-index: 2;
+  }
+
+  .workbench-annotation-layer.is-editable {
+    pointer-events: none;
+  }
+
+  .workbench-work-layer {
+    z-index: 10;
+  }
+
+  .workbench-control-overlay-layer {
+    pointer-events: none;
+    z-index: 20;
+  }
+
+  .workbench-canvas__field.is-work-layer-muted .workbench-work-layer {
+    pointer-events: none;
+  }
+
+  .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 freeform layers                                          */
+  /* ------------------------------------------------------------------ */
+  .workbench-background-region,
+  .workbench-text-annotation,
+  .workbench-sticky {
+    position: absolute;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    will-change: transform;
+  }
+
+  .workbench-background-region {
+    border-radius: 0;
+    background: var(--workbench-region-fill);
+    opacity: var(--workbench-region-opacity);
+    border: none;
+    box-shadow: none;
+    pointer-events: none;
+  }
+
+  .workbench-background-region.is-editable {
+    pointer-events: auto;
+    cursor: move;
+  }
+
+  .workbench-background-region.is-material-dotted {
+    background-image:
+      radial-gradient(circle, color-mix(in srgb, var(--workbench-region-ink) 70%, transparent) 1.45px, transparent 1.65px),
+      linear-gradient(var(--workbench-region-fill), var(--workbench-region-fill));
+    background-position: 0 0, 0 0;
+    background-size: 11px 11px, auto;
+  }
+
+  .workbench-background-region.is-material-grid {
+    background-image:
+      linear-gradient(color-mix(in srgb, var(--workbench-region-ink) 42%, transparent) 1px, transparent 1px),
+      linear-gradient(90deg, color-mix(in srgb, var(--workbench-region-ink) 42%, transparent) 1px, transparent 1px),
+      linear-gradient(var(--workbench-region-fill), var(--workbench-region-fill));
+    background-size: 28px 28px, 28px 28px, auto;
+  }
+
+  .workbench-background-region.is-material-hatched {
+    background-image:
+      repeating-linear-gradient(
+        135deg,
+        color-mix(in srgb, var(--workbench-region-ink) 48%, transparent) 0 1.2px,
+        transparent 1.2px 9px
+      ),
+      linear-gradient(var(--workbench-region-fill), var(--workbench-region-fill));
+  }
+
+  .workbench-background-region.is-material-glass {
+    background:
+      linear-gradient(135deg, color-mix(in srgb, white 18%, transparent), transparent 58%),
+      color-mix(in srgb, var(--workbench-region-fill) 64%, transparent);
+  }
+
+  .workbench-background-region__toolbar,
+  .workbench-text-annotation__toolbar {
+    position: absolute;
+    left: -8px;
+    bottom: calc(100% + 10px);
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 5px;
+    border-radius: 10px;
+    border: 1px solid color-mix(in srgb, var(--border, #e5e5e5) 80%, transparent);
+    background: color-mix(in srgb, var(--card, #fff) 92%, transparent);
+    box-shadow:
+      0 14px 32px -18px color-mix(in srgb, var(--foreground, #000) 30%, transparent),
+      0 1px 0 color-mix(in srgb, white 60%, transparent) inset;
+    transform: scale(var(--workbench-layer-control-inverse-scale, 1));
+    transform-origin: bottom left;
+    z-index: 20;
+  }
+
+  .workbench-background-region__toolbar {
+    left: 0;
+  }
+
+  .workbench-background-region__label {
+    position: absolute;
+    left: 12px;
+    top: 10px;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    max-width: calc(100% - 24px);
+    padding: 4px 7px;
+    border-radius: 6px;
+    background: color-mix(in srgb, white 56%, transparent);
+    color: color-mix(in srgb, var(--foreground, #111) 74%, var(--workbench-region-fill));
+    font-size: 11px;
+    font-weight: 700;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    pointer-events: none;
+  }
+
+  .workbench-layer-mini-button,
+  .workbench-layer-swatch {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    border: 1px solid color-mix(in srgb, var(--border, #e5e5e5) 70%, transparent);
+    background: color-mix(in srgb, var(--card, #fff) 88%, transparent);
+    color: var(--foreground, #111);
+    cursor: pointer;
+  }
+
+  .workbench-layer-mini-button {
+    height: 26px;
+    min-width: 26px;
+    padding: 0 8px;
+    border-radius: 7px;
+    font-size: 10px;
+    font-weight: 700;
+  }
+
+  .workbench-layer-mini-button:hover,
+  .workbench-layer-mini-button.is-active {
+    border-color: color-mix(in srgb, var(--primary, #3b82f6) 64%, transparent);
+    background: color-mix(in srgb, var(--primary, #3b82f6) 12%, var(--card, #fff));
+    color: var(--primary, #3b82f6);
+  }
+
+  .workbench-layer-mini-button.is-danger {
+    color: var(--destructive, #ef4444);
+  }
+
+  .workbench-text-size-stepper {
+    display: inline-flex;
+    align-items: center;
+    height: 26px;
+    border: 1px solid color-mix(in srgb, var(--border, #e5e5e5) 70%, transparent);
+    border-radius: 8px;
+    background: color-mix(in srgb, var(--card, #fff) 88%, transparent);
+    overflow: hidden;
+  }
+
+  .workbench-text-font-picker {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .workbench-text-font-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    height: 26px;
+    min-width: 86px;
+    padding: 0 8px;
+    border: 1px solid color-mix(in srgb, var(--border, #e5e5e5) 70%, transparent);
+    border-radius: 8px;
+    background: color-mix(in srgb, var(--card, #fff) 88%, transparent);
+    color: color-mix(in srgb, var(--foreground, #111) 82%, transparent);
+    cursor: pointer;
+    transition:
+      background-color 140ms ease,
+      border-color 140ms ease,
+      color 140ms ease;
+  }
+
+  .workbench-text-font-trigger:hover,
+  .workbench-text-font-trigger[aria-expanded='true'] {
+    border-color: color-mix(in srgb, var(--primary, #3b82f6) 50%, transparent);
+    background: color-mix(in srgb, var(--primary, #3b82f6) 10%, var(--card, #fff));
+    color: var(--primary, #3b82f6);
+  }
+
+  .workbench-text-font-trigger__sample {
+    font-size: 13px;
+    line-height: 1;
+  }
+
+  .workbench-text-font-trigger__label {
+    font-size: 10.5px;
+    font-weight: 750;
+    line-height: 1;
+  }
+
+  .workbench-text-font-trigger__icon {
+    width: 12px;
+    height: 12px;
+    opacity: 0.66;
+  }
+
+  .workbench-text-font-popover {
+    position: absolute;
+    left: 0;
+    bottom: calc(100% + 7px);
+    display: grid;
+    gap: 3px;
+    min-width: 134px;
+    padding: 5px;
+    border-radius: 10px;
+    border: 1px solid color-mix(in srgb, var(--border, #e5e5e5) 78%, transparent);
+    background: color-mix(in srgb, var(--popover, var(--card, #fff)) 96%, transparent);
+    box-shadow:
+      0 16px 34px -18px color-mix(in srgb, var(--foreground, #000) 34%, transparent),
+      0 1px 0 color-mix(in srgb, white 50%, transparent) inset;
+    z-index: 30;
+  }
+
+  .workbench-text-font-option {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    height: 28px;
+    padding: 0 7px;
+    border: 1px solid transparent;
+    border-radius: 7px;
+    background: transparent;
+    color: color-mix(in srgb, var(--foreground, #111) 82%, transparent);
+    cursor: pointer;
+    text-align: left;
+    transition:
+      background-color 120ms ease,
+      border-color 120ms ease,
+      color 120ms ease;
+  }
+
+  .workbench-text-font-option:hover,
+  .workbench-text-font-option.is-active {
+    border-color: color-mix(in srgb, var(--primary, #3b82f6) 44%, transparent);
+    background: color-mix(in srgb, var(--primary, #3b82f6) 10%, transparent);
+    color: var(--primary, #3b82f6);
+  }
+
+  .workbench-text-font-option__sample {
+    width: 28px;
+    font-size: 13px;
+    line-height: 1;
+  }
+
+  .workbench-text-font-option__label {
+    flex: 1;
+    min-width: 0;
+    font-size: 11px;
+    font-weight: 650;
+    line-height: 1;
+  }
+
+  .workbench-text-emoji-picker {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .workbench-text-emoji-trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 26px;
+    padding: 0;
+    border: 1px solid color-mix(in srgb, var(--border, #e5e5e5) 70%, transparent);
+    border-radius: 8px;
+    background: color-mix(in srgb, var(--card, #fff) 88%, transparent);
+    color: var(--foreground, #111);
+    font-size: 14px;
+    line-height: 1;
+    cursor: pointer;
+    transition:
+      background-color 140ms ease,
+      border-color 140ms ease,
+      transform 140ms ease;
+  }
+
+  .workbench-text-emoji-trigger:hover,
+  .workbench-text-emoji-trigger[aria-expanded='true'] {
+    border-color: color-mix(in srgb, var(--primary, #3b82f6) 50%, transparent);
+    background: color-mix(in srgb, var(--primary, #3b82f6) 10%, var(--card, #fff));
+  }
+
+  .workbench-text-emoji-trigger:active {
+    transform: translateY(1px);
+  }
+
+  .workbench-text-emoji-popover {
+    position: absolute;
+    right: 0;
+    bottom: calc(100% + 7px);
+    display: grid;
+    grid-template-columns: repeat(6, 28px);
+    gap: 4px;
+    padding: 6px;
+    border-radius: 11px;
+    border: 1px solid color-mix(in srgb, var(--border, #e5e5e5) 78%, transparent);
+    background: color-mix(in srgb, var(--popover, var(--card, #fff)) 96%, transparent);
+    box-shadow:
+      0 16px 34px -18px color-mix(in srgb, var(--foreground, #000) 34%, transparent),
+      0 1px 0 color-mix(in srgb, white 50%, transparent) inset;
+    z-index: 30;
+  }
+
+  .workbench-text-emoji-option {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: 8px;
+    background: transparent;
+    font-size: 16px;
+    line-height: 1;
+    cursor: pointer;
+    transition:
+      background-color 120ms ease,
+      border-color 120ms ease,
+      transform 120ms ease;
+  }
+
+  .workbench-text-emoji-option:hover {
+    border-color: color-mix(in srgb, var(--primary, #3b82f6) 34%, transparent);
+    background: color-mix(in srgb, var(--primary, #3b82f6) 10%, transparent);
+    transform: translateY(-1px);
+  }
+
+  .workbench-text-size-stepper__button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 25px;
+    height: 100%;
+    border: 0;
+    background: transparent;
+    color: color-mix(in srgb, var(--foreground, #111) 72%, transparent);
+    cursor: pointer;
+  }
+
+  .workbench-text-size-stepper__button:hover {
+    background: color-mix(in srgb, var(--primary, #3b82f6) 10%, transparent);
+    color: var(--primary, #3b82f6);
+  }
+
+  .workbench-layer-swatch {
+    width: 22px;
+    height: 22px;
+    border-radius: 999px;
+    border-color: color-mix(in srgb, currentColor 24%, var(--border, #e5e5e5));
+    box-shadow:
+      inset 0 0 0 2px color-mix(in srgb, var(--background, #fff) 36%, transparent),
+      0 1px 2px color-mix(in srgb, var(--foreground, #000) 18%, transparent);
+  }
+
+  .workbench-layer-swatch--region {
+    border-radius: 7px;
+  }
+
+  .workbench-layer-swatch.is-active {
+    outline: 2px solid color-mix(in srgb, var(--primary, #3b82f6) 64%, transparent);
+    outline-offset: 2px;
+  }
+
+  .workbench-region-material-group {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    height: 26px;
+    padding: 2px;
+    border: 1px solid color-mix(in srgb, var(--border, #e5e5e5) 70%, transparent);
+    border-radius: 8px;
+    background: color-mix(in srgb, var(--card, #fff) 84%, transparent);
+  }
+
+  .workbench-region-material {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 20px;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: 6px;
+    background: transparent;
+    cursor: pointer;
+  }
+
+  .workbench-region-material:hover,
+  .workbench-region-material.is-active {
+    border-color: color-mix(in srgb, var(--primary, #3b82f6) 50%, transparent);
+    background: color-mix(in srgb, var(--primary, #3b82f6) 9%, transparent);
+  }
+
+  .workbench-region-material__sample {
+    width: 14px;
+    height: 14px;
+    border-radius: 4px;
+    border: 1px solid color-mix(in srgb, var(--workbench-region-ink) 34%, transparent);
+    background: var(--workbench-region-fill);
+  }
+
+  .workbench-region-material.is-dotted .workbench-region-material__sample {
+    background:
+      radial-gradient(circle, color-mix(in srgb, var(--workbench-region-ink) 72%, transparent) 1px, transparent 1.12px),
+      var(--workbench-region-fill);
+    background-size: 5px 5px, auto;
+  }
+
+  .workbench-region-material.is-grid .workbench-region-material__sample {
+    background:
+      linear-gradient(color-mix(in srgb, var(--workbench-region-ink) 64%, transparent) 1px, transparent 1px),
+      linear-gradient(90deg, color-mix(in srgb, var(--workbench-region-ink) 64%, transparent) 1px, transparent 1px),
+      var(--workbench-region-fill);
+    background-size: 6px 6px, 6px 6px, auto;
+  }
+
+  .workbench-region-material.is-hatched .workbench-region-material__sample {
+    background:
+      repeating-linear-gradient(
+        135deg,
+        color-mix(in srgb, var(--workbench-region-ink) 66%, transparent) 0 1px,
+        transparent 1px 5px
+      ),
+      var(--workbench-region-fill);
+  }
+
+  .workbench-region-material.is-glass .workbench-region-material__sample {
+    background:
+      linear-gradient(135deg, color-mix(in srgb, white 65%, transparent), transparent 60%),
+      color-mix(in srgb, var(--primary, #3b82f6) 12%, transparent);
+  }
+
+  .workbench-layer-resize {
+    position: absolute;
+    right: -1px;
+    bottom: -1px;
+    width: 22px;
+    height: 22px;
+    padding: 0;
+    border: none;
+    border-radius: 6px 0 0 0;
+    background:
+      linear-gradient(135deg, transparent 45%, color-mix(in srgb, var(--foreground, #111) 42%, transparent) 46% 54%, transparent 55%),
+      linear-gradient(135deg, transparent 64%, color-mix(in srgb, var(--foreground, #111) 30%, transparent) 65% 73%, transparent 74%);
+    cursor: nwse-resize;
+    transform: scale(var(--workbench-layer-control-inverse-scale, 1));
+    transform-origin: bottom right;
+  }
+
+  .workbench-layer-control {
+    position: absolute;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    pointer-events: none;
+    transform-origin: 0 0;
+    will-change: transform;
+  }
+
+  .workbench-layer-control__selection {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .workbench-layer-control__selection.is-region {
+    outline: 1.5px dashed color-mix(in srgb, var(--primary, #3b82f6) 62%, transparent);
+    outline-offset: 3px;
+  }
+
+  .workbench-layer-control__selection.is-text {
+    outline: 1.5px dashed color-mix(in srgb, var(--primary, #3b82f6) 72%, transparent);
+    outline-offset: 8px;
+  }
+
+  .workbench-layer-control .workbench-background-region__toolbar,
+  .workbench-layer-control .workbench-text-annotation__toolbar,
+  .workbench-layer-control .workbench-layer-resize {
+    pointer-events: auto;
+  }
+
+  .workbench-text-annotation {
+    color: var(--workbench-text-color);
+    pointer-events: none;
+    cursor: default;
+    border: 0 !important;
+    outline: 0 !important;
+    box-shadow: none !important;
+    background: transparent;
+  }
+
+  .workbench-text-annotation.is-editable {
+    pointer-events: auto;
+  }
+
+  .workbench-text-annotation:focus,
+  .workbench-text-annotation:focus-visible,
+  .workbench-text-annotation:focus-within,
+  .workbench-text-annotation.is-selected,
+  .workbench-text-annotation.is-selected:focus-within {
+    border: 0 !important;
+    outline: 0 !important;
+    box-shadow: none !important;
+    background: transparent;
+  }
+
+  .workbench-layer-move-handle {
+    cursor: move;
+  }
+
+  .workbench-layer-move-handle:active {
+    cursor: grabbing;
+  }
+
+  .workbench-text-annotation__content {
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    border: 0 !important;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none !important;
+    font-family: var(--workbench-text-family);
+    font-size: var(--workbench-text-size);
+    font-weight: var(--workbench-text-weight);
+    line-height: 1.12;
+    text-align: var(--workbench-text-align);
+    overflow: auto;
+    white-space: pre-wrap;
+    word-break: break-word;
+    text-shadow: 0 1px 0 color-mix(in srgb, var(--background, #fff) 64%, transparent);
+    cursor: text;
+    outline: 0 !important;
+    color: var(--workbench-text-color);
+    -webkit-user-select: text;
+    user-select: text;
+    caret-color: var(--workbench-text-color);
+  }
+
+  .floe-infinite-canvas .workbench-text-annotation__content,
+  .workbench-text-annotation__content:focus,
+  .workbench-text-annotation__content:focus-visible,
+  .workbench-text-annotation__content:active {
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    border: 0 !important;
+    border-radius: 0;
+    outline: 0 !important;
+    box-shadow: none !important;
+    background: transparent;
+    font-family: var(--workbench-text-family);
+    font-size: var(--workbench-text-size);
+    font-weight: var(--workbench-text-weight);
+    line-height: 1.12;
+    text-align: var(--workbench-text-align);
+    overflow: auto;
+    white-space: pre-wrap;
+    word-break: break-word;
+    text-shadow: 0 1px 0 color-mix(in srgb, var(--background, #fff) 64%, transparent);
+    cursor: text;
+    color: var(--workbench-text-color);
+    -webkit-user-select: text;
+    user-select: text;
+    caret-color: var(--workbench-text-color);
+  }
+
+  .workbench-text-annotation__size-input {
+    width: 39px;
+    height: 100%;
+    padding: 0 4px;
+    border: 0;
+    border-right: 1px solid color-mix(in srgb, var(--border, #e5e5e5) 62%, transparent);
+    border-left: 1px solid color-mix(in srgb, var(--border, #e5e5e5) 62%, transparent);
+    border-radius: 0;
+    background: color-mix(in srgb, var(--background, #fff) 34%, transparent);
+    color: var(--foreground, #111);
+    font-size: 11px;
+    font-weight: 700;
+    text-align: center;
+    outline: none;
+  }
+
+  .workbench-text-annotation__size-input:focus {
+    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary, #3b82f6) 18%, transparent);
+  }
+
+  .workbench-sticky {
+    --workbench-sticky-accent: #d8b25a;
+    --workbench-sticky-surface: #fff2bd;
+    --workbench-sticky-surface-strong: #ffe9a6;
+    --workbench-sticky-border: color-mix(in srgb, var(--workbench-sticky-accent) 32%, var(--border, #e5e5e5));
+    --workbench-sticky-ink: #302616;
+    --workbench-sticky-ribbon: #c89734;
+    display: flex;
+    flex-direction: column;
+    overflow: visible;
+    cursor: default;
+    transform-origin: 0 0;
+  }
+
+  .workbench-sticky.is-amber {
+    --workbench-sticky-accent: #d8b25a;
+    --workbench-sticky-surface: #fff2bd;
+    --workbench-sticky-surface-strong: #ffe9a6;
+    --workbench-sticky-ribbon: #c89734;
+  }
+
+  .workbench-sticky.is-sage {
+    --workbench-sticky-accent: #8fae72;
+    --workbench-sticky-surface: #e4f0d7;
+    --workbench-sticky-surface-strong: #d8e8c8;
+    --workbench-sticky-ribbon: #78945d;
+  }
+
+  .workbench-sticky.is-azure {
+    --workbench-sticky-accent: #7f9fc7;
+    --workbench-sticky-surface: #dceafd;
+    --workbench-sticky-surface-strong: #cfddf3;
+    --workbench-sticky-ribbon: #688abc;
+  }
+
+  .workbench-sticky.is-coral {
+    --workbench-sticky-accent: #ce8b70;
+    --workbench-sticky-surface: #ffe1d4;
+    --workbench-sticky-surface-strong: #ffd3c2;
+    --workbench-sticky-ribbon: #b9785d;
+  }
+
+  .workbench-sticky.is-rose {
+    --workbench-sticky-accent: #be879e;
+    --workbench-sticky-surface: #f6dde8;
+    --workbench-sticky-surface-strong: #efccd9;
+    --workbench-sticky-ribbon: #a66f86;
+  }
+
+  .workbench-sticky.is-graphite {
+    --workbench-sticky-accent: oklch(0.5 0.03 250);
+    --workbench-sticky-surface: color-mix(in srgb, #2b3038 92%, var(--workbench-sticky-accent) 8%);
+    --workbench-sticky-surface-strong: color-mix(in srgb, #343a44 88%, var(--workbench-sticky-accent) 12%);
+    --workbench-sticky-border: color-mix(in srgb, white 16%, var(--workbench-sticky-accent) 84%);
+    --workbench-sticky-ink: #f4f4f5;
+    --workbench-sticky-ribbon: color-mix(in srgb, #111827 72%, white 28%);
+  }
+
+  .workbench-sticky__surface {
+    position: relative;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    border: 1px solid var(--workbench-sticky-border);
+    border-radius: 7px;
+    background:
+      linear-gradient(180deg, color-mix(in srgb, white 18%, transparent), transparent 34%),
+      linear-gradient(
+        135deg,
+        var(--workbench-sticky-surface),
+        color-mix(in srgb, var(--workbench-sticky-surface) 88%, var(--workbench-sticky-accent) 12%)
+      );
+    box-shadow:
+      0 16px 28px color-mix(in srgb, var(--foreground, #000) 7%, transparent),
+      0 1px 0 color-mix(in srgb, white 9%, transparent) inset;
+    overflow: hidden;
+    transition:
+      border-color 180ms ease,
+      box-shadow 180ms ease,
+      transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
+      background-color 180ms ease;
+  }
+
+  .workbench-sticky__surface::before {
+    content: '';
+    position: absolute;
+    inset: 0 auto 0 0;
+    width: 4px;
+    background: var(--workbench-sticky-ribbon);
+    opacity: 0.92;
+    box-shadow: 1px 0 0 color-mix(in srgb, white 18%, transparent) inset;
     pointer-events: none;
-    background-image:
-      linear-gradient(
-        to right,
-        color-mix(in srgb, var(--border, #e5e5e5) 42%, transparent) 1px,
-        transparent 1px
-      ),
+  }
+
+  .workbench-sticky:hover .workbench-sticky__surface,
+  .workbench-sticky:focus-within .workbench-sticky__surface {
+    border-color: color-mix(in srgb, var(--workbench-sticky-accent) 42%, var(--border, #e5e5e5));
+    background:
+      linear-gradient(180deg, color-mix(in srgb, white 24%, transparent), transparent 32%),
       linear-gradient(
-        to bottom,
-        color-mix(in srgb, var(--border, #e5e5e5) 42%, transparent) 1px,
-        transparent 1px
-      ),
-      radial-gradient(
-        circle,
-        color-mix(in srgb, var(--border, #e5e5e5) 70%, transparent) 0.9px,
-        transparent 1px
+        135deg,
+        var(--workbench-sticky-surface-strong),
+        color-mix(in srgb, var(--workbench-sticky-surface-strong) 82%, var(--workbench-sticky-accent) 18%)
       );
-    background-size:
-      var(--wb-grid-major) var(--wb-grid-major),
-      var(--wb-grid-major) var(--wb-grid-major),
-      var(--wb-grid-minor) var(--wb-grid-minor);
-    background-position:
-      0 0,
-      0 0,
-      var(--wb-grid-minor-offset) var(--wb-grid-minor-offset);
-    opacity: 0.78;
+    box-shadow:
+      0 20px 34px color-mix(in srgb, var(--foreground, #000) 10%, transparent),
+      0 1px 0 color-mix(in srgb, white 12%, transparent) inset;
+  }
+
+  .workbench-sticky.is-selected .workbench-sticky__surface {
+    border-color: color-mix(in srgb, var(--primary, #3b82f6) 38%, var(--workbench-sticky-border));
+    box-shadow:
+      0 0 0 2px color-mix(in srgb, var(--primary, #3b82f6) 24%, transparent),
+      0 22px 42px -18px color-mix(in srgb, var(--primary, #3b82f6) 26%, transparent),
+      0 1px 0 color-mix(in srgb, white 12%, transparent) inset;
+  }
+
+  .workbench-sticky.is-dragging .workbench-sticky__surface {
+    box-shadow:
+      0 0 0 2px color-mix(in srgb, var(--primary, #3b82f6) 28%, transparent),
+      0 26px 46px color-mix(in srgb, var(--foreground, #000) 14%, transparent),
+      0 1px 0 color-mix(in srgb, white 12%, transparent) inset;
+    transition: none;
+  }
+
+  .workbench-sticky.is-dragging,
+  .workbench-sticky.is-resizing {
+    transition: none;
+    will-change: transform;
+  }
+
+  .workbench-sticky.is-copied .workbench-sticky__surface {
+    border-color: color-mix(in srgb, var(--success, #22c55e) 38%, var(--workbench-sticky-border));
+    box-shadow:
+      0 0 0 1px color-mix(in srgb, var(--success, #22c55e) 26%, transparent),
+      0 22px 36px color-mix(in srgb, var(--foreground, #000) 12%, transparent),
+      0 1px 0 color-mix(in srgb, white 12%, transparent) inset;
+  }
+
+  .workbench-sticky__header {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    min-height: 31px;
+    padding: 8px 9px 0 10px;
+    cursor: move;
+  }
+
+  .workbench-sticky.is-locked .workbench-sticky__header {
+    cursor: default;
+  }
+
+  .workbench-sticky.is-locked .workbench-sticky__body {
+    cursor: default;
+  }
+
+  .workbench-sticky__grip,
+  .workbench-sticky__tool {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: transparent;
+    color: color-mix(in srgb, var(--workbench-sticky-ink) 58%, var(--muted-foreground, #737373));
+    cursor: pointer;
+    transition:
+      background-color 140ms ease,
+      color 140ms ease,
+      opacity 140ms ease,
+      transform 140ms ease;
+  }
+
+  .workbench-sticky__grip {
+    width: 25px;
+    height: 25px;
+    border-radius: 7px;
+    opacity: 0.48;
+    cursor: move;
+  }
+
+  .workbench-sticky:hover .workbench-sticky__grip,
+  .workbench-sticky:focus-within .workbench-sticky__grip,
+  .workbench-sticky.is-dragging .workbench-sticky__grip {
+    opacity: 0.92;
+  }
+
+  .workbench-sticky__grip:hover,
+  .workbench-sticky__tool:hover {
+    color: var(--workbench-sticky-ink);
+    background: color-mix(in srgb, var(--background, #fff) 74%, transparent);
+    transform: translateY(-1px);
+  }
+
+  .workbench-sticky__grip:active,
+  .workbench-sticky__tool:active {
+    transform: translateY(0);
+  }
+
+  .workbench-sticky.is-dragging .workbench-sticky__grip,
+  .workbench-sticky__grip:active {
+    cursor: grabbing;
+  }
+
+  .workbench-sticky__actions {
+    position: absolute;
+    top: -10px;
+    right: -10px;
+    z-index: 5;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    padding: 4px;
+    border: 1px solid color-mix(in srgb, var(--workbench-sticky-accent) 18%, var(--workbench-sticky-border));
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--background, #fff) 80%, transparent);
+    backdrop-filter: blur(12px);
+    box-shadow:
+      0 14px 26px color-mix(in srgb, var(--foreground, #000) 11%, transparent),
+      0 0 0 1px color-mix(in srgb, white 16%, transparent) inset;
+  }
+
+  .workbench-sticky__tool {
+    width: 27px;
+    height: 27px;
+    border-radius: 999px;
+    border: 1px solid color-mix(in srgb, var(--workbench-sticky-accent) 14%, transparent);
+    background: color-mix(in srgb, var(--background, #fff) 66%, transparent);
+    box-shadow: 0 1px 0 color-mix(in srgb, white 12%, transparent) inset;
+  }
+
+  .workbench-sticky__tool.is-danger {
+    color: var(--destructive, #ef4444);
+  }
+
+  .workbench-sticky__tool.is-success {
+    color: color-mix(in srgb, var(--success, #22c55e) 84%, var(--workbench-sticky-ink));
+    border-color: color-mix(in srgb, var(--success, #22c55e) 34%, var(--workbench-sticky-border));
+    background: color-mix(in srgb, var(--success, #22c55e) 12%, var(--background, #fff));
+  }
+
+  .workbench-sticky__tool.is-danger:hover {
+    border-color: color-mix(in srgb, var(--destructive, #ef4444) 28%, var(--workbench-sticky-border));
+    background: color-mix(in srgb, var(--destructive, #ef4444) 10%, var(--background, #fff));
+  }
+
+  .workbench-sticky__color-dot {
+    width: 11px;
+    height: 11px;
+    border-radius: 999px;
+    background: var(--workbench-sticky-accent);
+    box-shadow:
+      0 0 0 1px color-mix(in srgb, var(--workbench-sticky-ribbon) 54%, transparent),
+      0 1px 0 color-mix(in srgb, white 38%, transparent) inset;
+  }
+
+  .workbench-sticky__body {
+    position: relative;
+    z-index: 1;
+    flex: 1;
+    min-height: 0;
+    padding: 2px 16px 15px 18px;
+    color: var(--workbench-sticky-ink);
+    font-size: 14px;
+    line-height: 1.52;
+    overflow: auto;
+    outline: 0;
+    cursor: text;
+    white-space: pre-wrap;
+    word-break: break-word;
+    -webkit-user-select: text;
+    user-select: text;
+    caret-color: var(--workbench-sticky-ink);
+  }
+
+  .workbench-sticky__body:focus,
+  .workbench-sticky__body:focus-visible {
+    outline: 0;
+    box-shadow: none;
+  }
+
+  .workbench-sticky__resize {
+    right: -3px;
+    bottom: -3px;
+    width: 34px;
+    height: 34px;
+    border-radius: 10px 0 7px 0;
+    background: transparent;
+    z-index: 4;
+    pointer-events: auto;
+    opacity: 0;
+    transition: opacity 140ms ease;
+  }
+
+  .workbench-sticky__resize::after {
+    content: '';
+    position: absolute;
+    right: 6px;
+    bottom: 6px;
+    width: 10px;
+    height: 10px;
+    border-radius: 3px 0 4px 0;
+    background:
+      linear-gradient(135deg, transparent 54%, color-mix(in srgb, var(--workbench-sticky-ink) 38%, transparent) 55% 62%, transparent 63%),
+      linear-gradient(135deg, transparent 72%, color-mix(in srgb, var(--workbench-sticky-ink) 26%, transparent) 73% 80%, transparent 81%);
+    pointer-events: none;
+  }
+
+  .workbench-sticky:hover .workbench-sticky__resize,
+  .workbench-sticky.is-selected .workbench-sticky__resize {
+    opacity: 1;
   }
 
   /* ------------------------------------------------------------------ */
@@ -320,7 +1286,8 @@
     cursor: grabbing;
   }
 
-  .workbench-widget.is-filtered-out {
+  .workbench-widget.is-filtered-out,
+  .workbench-sticky.is-filtered-out {
     opacity: 0;
     pointer-events: none;
   }
@@ -717,6 +1684,16 @@
     z-index: 8;
   }
 
+  .workbench-dock__mode-switcher {
+    position: relative;
+    display: inline-flex;
+  }
+
+  .workbench-dock__mode-icon {
+    width: 14px;
+    height: 14px;
+  }
+
   .workbench-dock__item {
     position: relative;
     display: inline-flex;
@@ -779,6 +1756,107 @@
       0 1px 0 color-mix(in srgb, white 50%, transparent) inset;
   }
 
+  .workbench-dock__item.is-filter-muted .workbench-dock__tile {
+    opacity: 0.46;
+    background: color-mix(in srgb, var(--muted, #f1f1f1) 42%, transparent);
+    color: color-mix(in srgb, var(--muted-foreground, #888) 72%, transparent);
+    box-shadow: none;
+  }
+
+  .workbench-dock__mode-popover {
+    position: absolute;
+    left: 50%;
+    bottom: calc(100% + 16px);
+    transform: translateX(-50%);
+    display: grid;
+    gap: 6px;
+    width: 238px;
+    padding: 8px;
+    border-radius: 13px;
+    border: 1px solid color-mix(in srgb, var(--border, #e5e5e5) 80%, transparent);
+    background: color-mix(in srgb, var(--popover, var(--card, #fff)) 92%, transparent);
+    box-shadow:
+      0 22px 48px -16px color-mix(in srgb, var(--foreground, #000) 24%, transparent),
+      0 1px 0 color-mix(in srgb, white 54%, transparent) inset;
+    backdrop-filter: blur(18px) saturate(180%);
+    -webkit-backdrop-filter: blur(18px) saturate(180%);
+    z-index: 2;
+  }
+
+  .workbench-dock__mode-popover::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    bottom: -6px;
+    width: 12px;
+    height: 12px;
+    transform: translateX(-50%) rotate(45deg);
+    border-right: 1px solid color-mix(in srgb, var(--border, #e5e5e5) 80%, transparent);
+    border-bottom: 1px solid color-mix(in srgb, var(--border, #e5e5e5) 80%, transparent);
+    background: color-mix(in srgb, var(--popover, var(--card, #fff)) 92%, transparent);
+  }
+
+  .workbench-dock__mode-option {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-height: 52px;
+    padding: 7px 9px;
+    border: none;
+    border-radius: 9px;
+    background: transparent;
+    color: var(--muted-foreground, #888);
+    text-align: left;
+    cursor: pointer;
+    transition:
+      background-color 150ms ease,
+      color 150ms ease,
+      box-shadow 150ms ease;
+  }
+
+  .workbench-dock__mode-option:hover {
+    background: color-mix(in srgb, var(--accent, #f2f2f2) 78%, transparent);
+    color: var(--foreground, #111);
+  }
+
+  .workbench-dock__mode-option.is-active {
+    background: color-mix(in srgb, var(--primary, #3b82f6) 12%, var(--card, #fff));
+    color: var(--foreground, #111);
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary, #3b82f6) 18%, transparent);
+  }
+
+  .workbench-dock__mode-option-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    width: 30px;
+    height: 30px;
+    border-radius: 8px;
+    background: color-mix(in srgb, var(--muted, #f1f1f1) 70%, transparent);
+    color: inherit;
+  }
+
+  .workbench-dock__mode-option-copy {
+    display: grid;
+    min-width: 0;
+    gap: 2px;
+  }
+
+  .workbench-dock__mode-option-label {
+    font-size: 12px;
+    font-weight: 750;
+    line-height: 1.1;
+  }
+
+  .workbench-dock__mode-option-description {
+    font-size: 10px;
+    font-weight: 500;
+    line-height: 1.25;
+    color: var(--muted-foreground, #888);
+  }
+
   .workbench-dock__divider {
     width: 1px;
     height: 24px;
@@ -906,6 +1984,8 @@
       /* Cap the width so magnified tiles can't push the dock outside the
          viewport, and so the HUD / lock above stay clear. */
       max-width: calc(100vw - 24px);
+      overflow-x: auto;
+      overflow-y: visible;
     }
 
     .workbench-dock__item,
@@ -914,6 +1994,17 @@
       height: 32px;
     }
 
+    .workbench-dock__mode-popover {
+      left: 0;
+      transform: none;
+      width: min(238px, calc(100vw - 32px));
+    }
+
+    .workbench-dock__mode-popover::after {
+      left: 16px;
+      transform: rotate(45deg);
+    }
+
     .workbench-dock__icon {
       width: 16px;
       height: 16px;