@floegence/floe-webapp-core 0.53.3 → 0.54.0

package/dist/workbench.css

@@ -224,11 +224,15 @@
     height: 2600px;
   }
 
+  .workbench-canvas__infinite {
+    overflow: clip;
+  }
+
   .workbench-canvas__projected-layer {
     position: absolute;
     inset: 0;
     pointer-events: none;
-    overflow: hidden;
+    overflow: clip;
     z-index: 13;
     isolation: isolate;
   }
@@ -338,10 +342,7 @@
 
   .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 {
+    > .workbench-widget {
     pointer-events: none;
   }
 
@@ -428,6 +429,9 @@
   .workbench-canvas__field.is-work-layer-muted .workbench-work-layer {
     pointer-events: none;
   }
+  .workbench-canvas__field.is-work-layer-muted .workbench-sticky {
+    pointer-events: auto;
+  }
 
   /* ------------------------------------------------------------------ */
   /* Workbench freeform layers                                          */
@@ -446,57 +450,97 @@
     will-change: transform;
   }
 
+  :is(
+    .workbench-background-region,
+    .workbench-layer-swatch--region,
+    .workbench-region-material__sample
+  ) {
+    --workbench-region-face: oklch(from var(--workbench-region-fill) 0.84 0.065 h);
+    --workbench-region-edge: oklch(from var(--workbench-region-fill) 0.7 0.032 h);
+    --workbench-region-outline: oklch(from var(--workbench-region-fill) 0.56 0.065 h);
+    --workbench-region-surface: color-mix(
+      in oklab,
+      var(--workbench-region-face) var(--workbench-region-strength, 100%),
+      var(--wb-canvas, var(--background))
+    );
+    --workbench-region-ink: color-mix(
+      in oklab,
+      var(--workbench-region-outline) 20%,
+      var(--workbench-region-surface)
+    );
+    border: 1px solid var(--workbench-region-edge);
+    border-radius: 12px;
+    background: var(--workbench-region-surface);
+  }
+  .dark
+    :is(
+      .workbench-background-region,
+      .workbench-layer-swatch--region,
+      .workbench-region-material__sample
+    ) {
+    --workbench-region-face: oklch(from var(--workbench-region-fill) 0.32 0.045 h);
+    --workbench-region-edge: oklch(from var(--workbench-region-fill) 0.405 0.025 h);
+    --workbench-region-outline: oklch(from var(--workbench-region-fill) 0.58 0.055 h);
+  }
   .workbench-background-region {
-    border-radius: 0;
-    background-color: var(--workbench-region-surface, var(--workbench-region-fill));
-    opacity: 1;
-    border: none;
-    box-shadow: none;
     pointer-events: none;
   }
-
   .workbench-background-region.is-transforming {
     will-change: transform;
   }
-
   .workbench-background-region.is-editable {
     pointer-events: auto;
-    cursor: move;
+    cursor: grab;
   }
-
-  .workbench-background-region.is-material-dotted {
-    background-image: radial-gradient(
-      circle,
-      var(--workbench-region-ink) 1.45px,
-      transparent 1.65px
+  :is(
+    .workbench-background-region,
+    .workbench-layer-swatch--region,
+    .workbench-region-material__sample
+  ).is-material-frame {
+    background: transparent;
+    border: 2px dashed var(--workbench-region-outline);
+  }
+  :is(
+    .workbench-background-region,
+    .workbench-layer-swatch--region,
+    .workbench-region-material__sample
+  ).is-material-hatched {
+    background-image: repeating-linear-gradient(
+      135deg,
+      transparent 0 9px,
+      var(--workbench-region-ink) 9px 10px
     );
-    background-position: 0 0;
-    background-size: 11px 11px;
   }
-
-  .workbench-background-region.is-material-grid {
+  :is(
+    .workbench-background-region,
+    .workbench-layer-swatch--region,
+    .workbench-region-material__sample
+  ).is-material-dotted {
+    background-image: radial-gradient(var(--workbench-region-ink) 1px, transparent 1px);
+    background-size: 10px 10px;
+  }
+  :is(
+    .workbench-background-region,
+    .workbench-layer-swatch--region,
+    .workbench-region-material__sample
+  ).is-material-grid {
     background-image:
       linear-gradient(var(--workbench-region-ink) 1px, transparent 1px),
       linear-gradient(90deg, var(--workbench-region-ink) 1px, transparent 1px);
-    background-size:
-      28px 28px,
-      28px 28px;
-  }
-
-  .workbench-background-region.is-material-hatched {
-    background-image: repeating-linear-gradient(
+    background-size: 24px 24px;
+  }
+  :is(
+    .workbench-background-region,
+    .workbench-layer-swatch--region,
+    .workbench-region-material__sample
+  ).is-material-glass {
+    background-image: linear-gradient(
       135deg,
-      var(--workbench-region-ink) 0 1.2px,
-      transparent 1.2px 9px
+      color-mix(in srgb, white 10%, transparent),
+      transparent 60%
     );
   }
 
-  .workbench-background-region.is-material-glass {
-    background:
-      linear-gradient(135deg, var(--workbench-region-highlight), transparent 58%),
-      var(--workbench-region-surface, var(--workbench-region-fill));
-  }
-
   .workbench-background-region__toolbar,
   .workbench-text-annotation__toolbar {
     position: absolute;
@@ -522,23 +566,30 @@
   }
 
   .workbench-background-region__label {
+    --ring: var(--wb-window-active, var(--foreground));
     position: absolute;
-    left: 12px;
+    left: 10px;
     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;
+    max-width: calc(100% - 20px);
+    min-width: 100px;
+    border: 1px solid transparent;
+    border-radius: 5px;
+    padding: 4px 6px;
+    color: var(--foreground);
+    background: var(--wb-canvas, var(--background));
+    font-size: 13px;
+    font-weight: 550;
+    cursor: text;
+  }
+  .workbench-background-region__label.is-empty {
+    display: none;
+  }
+  .workbench-background-region__label [contenteditable] {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    min-height: 20px;
+    user-select: text;
+    cursor: text;
   }
 
   .workbench-layer-mini-button,
@@ -548,12 +599,12 @@
     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 {
+    background: var(--card);
     height: 26px;
     min-width: 26px;
     padding: 0 8px;
@@ -798,93 +849,38 @@
   }
 
   .workbench-layer-swatch.is-active {
-    outline: 2px solid color-mix(in srgb, var(--primary, #3b82f6) 64%, transparent);
+    outline: 1px solid var(--wb-window-active, var(--foreground));
     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);
+    display: flex;
+    flex-wrap: wrap;
+    gap: 3px;
+    border-left: 1px solid var(--border);
+    padding-left: 5px;
   }
-
   .workbench-region-material {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 22px;
-    height: 20px;
-    padding: 0;
+    display: grid;
+    justify-items: center;
+    gap: 3px;
+    padding: 4px;
     border: 1px solid transparent;
     border-radius: 6px;
     background: transparent;
+    color: var(--foreground);
+    font-size: 10px;
     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);
+    border-color: var(--wb-window-active, var(--foreground));
+    background: var(--accent);
   }
-
   .workbench-region-material__sample {
-    width: 14px;
-    height: 14px;
+    display: block;
+    width: 40px;
+    height: 28px;
     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 {
@@ -926,47 +922,23 @@
 
   .workbench-region-visibility-outline {
     position: absolute;
-    top: 0;
-    left: 0;
+    inset: 0 auto auto 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);
+    border: 1px dashed var(--workbench-region-edge, var(--border));
+    border-radius: 12px;
   }
-
   .workbench-layer-control__selection {
     position: absolute;
     inset: 0;
     pointer-events: none;
+    border: 1px solid var(--wb-window-active, var(--foreground));
+    border-radius: 12px;
   }
-
-  .workbench-layer-control__selection.is-region {
-    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 {
-    outline: 1.5px dashed color-mix(in srgb, var(--primary, #3b82f6) 72%, transparent);
-    outline-offset: 8px;
+    border-style: dashed;
+    border-radius: 4px;
   }
 
   .workbench-layer-control .workbench-background-region__toolbar,
@@ -976,97 +948,42 @@
   }
 
   .workbench-text-annotation {
-    color: var(--workbench-text-color);
+    --ring: var(--wb-window-active, var(--border));
+    color: var(--workbench-text-ink);
     pointer-events: none;
-    cursor: default;
-    border: 0 !important;
-    outline: 0 !important;
-    box-shadow: none !important;
+    border: 1px solid transparent;
     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;
+    cursor: grab;
   }
-
   .workbench-text-annotation__content {
     display: block;
     box-sizing: border-box;
     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;
-    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;
+    line-height: 1.3;
     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);
+    overflow-wrap: anywhere;
     cursor: text;
-    outline: 0 !important;
-    color: var(--workbench-text-color);
-    -webkit-user-select: text;
+    color: var(--workbench-text-ink);
     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,
-  .workbench-text-annotation__content:focus,
-  .workbench-text-annotation__content:focus-visible,
-  .workbench-text-annotation__content:active {
-    display: block;
-    box-sizing: border-box;
-    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;
-    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);
-    transform: scale(var(--workbench-text-content-scale, 1));
-    transform-origin: 0 0;
+  .workbench-text-annotation {
+    --workbench-text-ink: oklch(from var(--workbench-text-color) 0.36 c h);
+  }
+  .dark .workbench-text-annotation {
+    --workbench-text-ink: oklch(from var(--workbench-text-color) 0.84 c h);
   }
 
   .workbench-text-annotation__size-input {
@@ -1085,325 +1002,168 @@
     outline: none;
   }
 
-  .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;
+  /* Notes and palette samples share one matte material renderer. */
+  [data-note-color] {
+    --note-hue: 85;
+    --note-chroma: 0.038;
+    --note-face: oklch(0.945 var(--note-chroma) var(--note-hue));
+    --note-ink: oklch(0.32 0.025 var(--note-hue));
+    --note-marker: oklch(0.54 0.075 var(--note-hue));
+    --note-edge: oklch(0.79 0.025 var(--note-hue));
   }
-
-  .workbench-sticky.is-amber {
-    --workbench-sticky-accent: #d8b25a;
-    --workbench-sticky-surface: #fff2bd;
-    --workbench-sticky-surface-strong: #ffe9a6;
-    --workbench-sticky-ink: #5a4200;
-    --workbench-sticky-ribbon: #c89734;
+  [data-note-color='sage'] {
+    --note-hue: 155;
   }
-
-  .workbench-sticky.is-sage {
-    --workbench-sticky-accent: #8fae72;
-    --workbench-sticky-surface: #e4f0d7;
-    --workbench-sticky-surface-strong: #d8e8c8;
-    --workbench-sticky-ink: #273814;
-    --workbench-sticky-ribbon: #78945d;
+  [data-note-color='azure'] {
+    --note-hue: 245;
   }
-
-  .workbench-sticky.is-azure {
-    --workbench-sticky-accent: #7f9fc7;
-    --workbench-sticky-surface: #dceafd;
-    --workbench-sticky-surface-strong: #cfddf3;
-    --workbench-sticky-ink: #1b3050;
-    --workbench-sticky-ribbon: #688abc;
+  [data-note-color='coral'] {
+    --note-hue: 42;
   }
-
-  .workbench-sticky.is-coral {
-    --workbench-sticky-accent: #ce8b70;
-    --workbench-sticky-surface: #ffe1d4;
-    --workbench-sticky-surface-strong: #ffd3c2;
-    --workbench-sticky-ink: #4a1e0d;
-    --workbench-sticky-ribbon: #b9785d;
+  [data-note-color='rose'] {
+    --note-hue: 350;
   }
-
-  .workbench-sticky.is-rose {
-    --workbench-sticky-accent: #be879e;
-    --workbench-sticky-surface: #f6dde8;
-    --workbench-sticky-surface-strong: #efccd9;
-    --workbench-sticky-ink: #401c2c;
-    --workbench-sticky-ribbon: #a66f86;
+  [data-note-color='graphite'] {
+    --note-hue: 255;
+    --note-chroma: 0.008;
+    --note-marker: oklch(0.54 0.012 255);
   }
-
-  .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%
+  .dark [data-note-color] {
+    --note-face: oklch(
+      from var(--background) clamp(0.29, calc(l + 0.08), 0.4) var(--note-chroma) var(--note-hue)
     );
-    --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 {
+    --note-ink: oklch(0.9 0.016 var(--note-hue));
+    --note-marker: oklch(0.68 0.07 var(--note-hue));
+    --note-edge: oklch(from var(--note-face) calc(l + 0.065) 0.018 var(--note-hue));
+  }
+  .dark [data-note-color='graphite'] {
+    --note-marker: oklch(0.68 0.012 255);
+  }
+  [data-note-material] {
+    --note-fill: var(--note-face);
+    --note-rule: color-mix(in oklab, var(--note-marker) 22%, var(--note-fill));
+    background-color: var(--note-fill);
+    color: var(--note-ink);
+    border: 1px solid var(--note-edge);
+    border-radius: 9px;
     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 {
+  [data-note-material='tab'] {
+    --note-fill: var(--wb-window, var(--card));
+    --note-ink: var(--foreground);
+    --note-edge: var(--wb-window-edge, var(--border));
+  }
+  [data-note-material='tab']::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;
+    width: var(--note-stripe, 8px);
+    background: var(--note-marker);
     pointer-events: none;
   }
-
-  .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%),
+  [data-note-material='ruled'] {
+    --note-fill: color-mix(in oklab, var(--note-face) 48%, var(--wb-window, var(--card)));
+    --note-ink: var(--foreground);
+    border-radius: 3px;
+  }
+  [data-note-material='ruled']::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background-image:
       linear-gradient(
-        135deg,
-        var(--workbench-sticky-surface-strong),
-        color-mix(
-          in srgb,
-          var(--workbench-sticky-surface-strong) 82%,
-          var(--workbench-sticky-accent) 18%
-        )
+        to right,
+        transparent var(--note-margin, 30px),
+        color-mix(in oklab, var(--note-marker) 38%, var(--note-fill)) var(--note-margin, 30px),
+        color-mix(in oklab, var(--note-marker) 38%, var(--note-fill))
+          calc(var(--note-margin, 30px) + 1px),
+        transparent calc(var(--note-margin, 30px) + 1px)
+      ),
+      repeating-linear-gradient(
+        to bottom,
+        transparent 0 calc(var(--note-rule-space, 28px) - 1px),
+        var(--note-rule) calc(var(--note-rule-space, 28px) - 1px) var(--note-rule-space, 28px)
       );
-    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 {
+    display: flex;
+    overflow: visible;
+    transform-origin: 0 0;
+    cursor: grab;
   }
-
-  .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__surface {
+    --ring: var(--wb-window-active, var(--border));
+    width: 100%;
+    height: 100%;
+    padding: 26px 22px 22px;
+    box-shadow: 0 3px 7px -5px rgb(0 0 0 / 24%);
   }
-
-  .workbench-sticky.is-dragging,
-  .workbench-sticky.is-resizing {
-    transition: none;
-    will-change: transform;
+  .workbench-sticky.is-selected .workbench-sticky__surface {
+    border-color: var(--wb-window-active, var(--foreground));
   }
-
-  .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__surface[data-note-material='ruled'] {
+    padding-left: 42px;
   }
-
-  .workbench-sticky__header {
+  .workbench-sticky__body {
     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;
+    height: 100%;
+    overflow: auto;
+    font-size: 16px;
+    line-height: 28px;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    user-select: text;
+    cursor: text;
   }
-
   .workbench-sticky__grip {
-    width: 25px;
-    height: 25px;
-    border-radius: 7px;
-    opacity: 0.48;
-    cursor: move;
+    position: absolute;
+    top: 3px;
+    right: 4px;
+    z-index: 2;
+    width: 22px;
+    height: 22px;
+    display: grid;
+    place-items: center;
+    border: 0;
+    border-radius: 4px;
+    color: inherit;
+    background: transparent;
+    cursor: grab;
+    opacity: 0;
   }
-
   .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.is-selected .workbench-sticky__grip {
+    opacity: 0.7;
   }
-
-  .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;
+    display: grid;
+    place-items: center;
+    width: 28px;
+    height: 28px;
+    border: 0;
+    border-radius: 5px;
+    color: var(--foreground);
+    background: transparent;
+    cursor: pointer;
   }
-
   .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));
+    color: var(--destructive);
   }
-
-  .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: 16px;
-    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;
+    opacity: 0;
     width: 34px;
     height: 34px;
-    border-radius: 10px 0 7px 0;
-    background: transparent;
     z-index: 4;
     pointer-events: auto;
-    opacity: 0;
-    transition: opacity 140ms ease;
+    background: transparent;
+    right: -3px;
+    bottom: -3px;
   }
-
   .workbench-sticky__resize::after {
     content: '';
     position: absolute;
@@ -1411,27 +1171,77 @@
     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;
+    border-right: 2px solid var(--muted-foreground);
+    border-bottom: 2px solid var(--muted-foreground);
   }
-
   .workbench-sticky:hover .workbench-sticky__resize,
   .workbench-sticky.is-selected .workbench-sticky__resize {
     opacity: 1;
   }
+  .workbench-note-preview {
+    display: block;
+    width: 21px;
+    height: 25px;
+    --note-stripe: 5px;
+    --note-margin: 7px;
+    --note-rule-space: 8px;
+    pointer-events: none;
+  }
+  .workbench-material-choices {
+    display: flex;
+    gap: 3px;
+    border-left: 1px solid var(--border);
+    padding-left: 5px;
+  }
+  .workbench-style-choice {
+    display: grid;
+    gap: 3px;
+    justify-items: center;
+    padding: 4px;
+    border: 1px solid transparent;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--foreground);
+    cursor: pointer;
+    font-size: 10px;
+  }
+  .workbench-style-choice[aria-pressed='true'] {
+    border-color: var(--wb-window-active, var(--foreground));
+    background: var(--accent);
+  }
+  .workbench-style-choice:hover {
+    background: var(--accent);
+  }
+  .workbench-style-choice.is-material .workbench-note-preview {
+    width: 40px;
+    height: 31px;
+  }
+  .workbench-object-tools {
+    pointer-events: auto;
+  }
+  .workbench-object-tools
+    :is(
+      .workbench-sticky__actions,
+      .workbench-background-region__toolbar,
+      .workbench-text-annotation__toolbar
+    ) {
+    position: relative;
+    inset: auto;
+    transform: none;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 4px;
+    padding: 6px;
+    max-width: 100%;
+    width: max-content;
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    background: var(--card);
+    color: var(--foreground);
+    box-shadow: 0 5px 15px -7px rgb(0 0 0 / 24%);
+    backdrop-filter: none;
+  }
 
   /* ------------------------------------------------------------------ */
   /* Widget                                                             */
@@ -1525,21 +1335,19 @@
 
   .workbench-canvas__field.is-work-layer-muted
     .workbench-work-layer
-    > :is(.workbench-widget, .workbench-sticky)
+    > .workbench-widget
     :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)
+    > .workbench-widget
     :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__field.is-work-layer-muted .workbench-work-layer > .workbench-widget,
   .workbench-canvas__projected-layer.is-work-layer-locked
     .workbench-canvas__projected-work-layer
-    > :is(.workbench-widget, .workbench-sticky) {
+    > .workbench-widget {
     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);