@floegence/floe-webapp-core 0.55.2 → 0.56.2

package/dist/workbench.css

@@ -1,4 +1,5 @@
 @import './workbench-themes.css';
+@import './workbench-composition.css';
 
 @layer components {
   /* ------------------------------------------------------------------ */
@@ -342,7 +343,7 @@
 
   .workbench-canvas__projected-layer.is-work-layer-locked
     .workbench-canvas__projected-work-layer
-    > .workbench-widget {
+    > :is(.workbench-widget, .workbench-sticky) {
     pointer-events: none;
   }
 
@@ -350,31 +351,17 @@
     position: absolute;
     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;
+    background-image: radial-gradient(
+      circle,
+      color-mix(in srgb, var(--foreground) 11%, transparent) 0.65px,
+      transparent 0.8px
+    );
+    background-size: 28px 28px;
+    opacity: 0.55;
+  }
+
+  :root[data-floe-shell-theme='hc-light'] .workbench-canvas__grid {
+    display: none;
   }
 
   .workbench-background-layer,
@@ -429,9 +416,6 @@
   .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                                          */
@@ -450,148 +434,6 @@
     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 {
-    pointer-events: none;
-  }
-  .workbench-background-region.is-transforming {
-    will-change: transform;
-  }
-  .workbench-background-region.is-editable {
-    pointer-events: auto;
-    cursor: grab;
-  }
-  :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
-    );
-  }
-  :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: 24px 24px;
-  }
-  :is(
-    .workbench-background-region,
-    .workbench-layer-swatch--region,
-    .workbench-region-material__sample
-  ).is-material-glass {
-    background-image: linear-gradient(
-      135deg,
-      color-mix(in srgb, white 10%, transparent),
-      transparent 60%
-    );
-  }
-
-  .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 {
-    --ring: var(--wb-window-active, var(--foreground));
-    position: absolute;
-    left: 10px;
-    top: 10px;
-    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,
   .workbench-layer-swatch {
     display: inline-flex;
@@ -739,84 +581,6 @@
     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;
@@ -853,36 +617,6 @@
     outline-offset: 2px;
   }
 
-  .workbench-region-material-group {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 3px;
-    border-left: 1px solid var(--border);
-    padding-left: 5px;
-  }
-  .workbench-region-material {
-    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.is-active {
-    border-color: var(--wb-window-active, var(--foreground));
-    background: var(--accent);
-  }
-  .workbench-region-material__sample {
-    display: block;
-    width: 40px;
-    height: 28px;
-    border-radius: 4px;
-  }
-
   .workbench-layer-resize {
     position: absolute;
     right: -1px;
@@ -926,21 +660,9 @@
     box-sizing: border-box;
     pointer-events: none;
     transform-origin: 0 0;
-    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-text {
-    border-style: dashed;
-    border-radius: 4px;
-  }
-
   .workbench-layer-control .workbench-background-region__toolbar,
   .workbench-layer-control .workbench-text-annotation__toolbar,
   .workbench-layer-control .workbench-layer-resize {
@@ -968,7 +690,8 @@
     font-family: var(--workbench-text-family);
     font-size: var(--workbench-text-size);
     font-weight: var(--workbench-text-weight);
-    line-height: 1.3;
+    line-height: var(--workbench-text-line-height, 1.35);
+    letter-spacing: var(--workbench-text-letter-spacing, -1.2px);
     text-align: var(--workbench-text-align);
     overflow: auto;
     white-space: pre-wrap;
@@ -1002,247 +725,6 @@
     outline: none;
   }
 
-  /* 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));
-  }
-  [data-note-color='sage'] {
-    --note-hue: 155;
-  }
-  [data-note-color='azure'] {
-    --note-hue: 245;
-  }
-  [data-note-color='coral'] {
-    --note-hue: 42;
-  }
-  [data-note-color='rose'] {
-    --note-hue: 350;
-  }
-  [data-note-color='graphite'] {
-    --note-hue: 255;
-    --note-chroma: 0.008;
-    --note-marker: oklch(0.54 0.012 255);
-  }
-  .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)
-    );
-    --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;
-    overflow: hidden;
-  }
-  [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: var(--note-stripe, 8px);
-    background: var(--note-marker);
-    pointer-events: none;
-  }
-  [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(
-        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)
-      );
-  }
-  .workbench-sticky {
-    display: flex;
-    overflow: visible;
-    transform-origin: 0 0;
-    cursor: grab;
-  }
-  .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-selected .workbench-sticky__surface {
-    border-color: var(--wb-window-active, var(--foreground));
-  }
-  .workbench-sticky__surface[data-note-material='ruled'] {
-    padding-left: 42px;
-  }
-  .workbench-sticky__body {
-    position: relative;
-    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 {
-    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.is-selected .workbench-sticky__grip {
-    opacity: 0.7;
-  }
-  .workbench-sticky__grip:active {
-    cursor: grabbing;
-  }
-  .workbench-sticky__tool {
-    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);
-  }
-  .workbench-sticky__resize {
-    opacity: 0;
-    width: 34px;
-    height: 34px;
-    z-index: 4;
-    pointer-events: auto;
-    background: transparent;
-    right: -3px;
-    bottom: -3px;
-  }
-  .workbench-sticky__resize::after {
-    content: '';
-    position: absolute;
-    right: 6px;
-    bottom: 6px;
-    width: 10px;
-    height: 10px;
-    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                                                             */
   /* ------------------------------------------------------------------ */
@@ -1335,11 +817,11 @@
 
   .workbench-canvas__field.is-work-layer-muted
     .workbench-work-layer
-    > .workbench-widget
+    > :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
-    > .workbench-widget
+    > :is(.workbench-widget, .workbench-sticky)
     :is(.workbench-widget__surface, .workbench-sticky__surface)::after {
     opacity: 0.84;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.55.2",
+  "version": "0.56.2",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",