efficient-easel 0.0.0 → 0.97.0

package/dist/drag/drag.css

@@ -0,0 +1,360 @@
+/*
+ * efficient-easel/drag.css — the canvas drag layer (blueprint step 3.2): the
+ * hover handle, the drop line, "+ Add section" between sections and "+ Add
+ * block" in an empty slot. The tree's drag look is tree.css.
+ *
+ * The layer sits over the canvas frame in the host page and lets every click
+ * through to the canvas except on its own few controls. Needs
+ * `efficient-easel/shell.css` for the `--es-*` tokens.
+ */
+
+.es-canvas-layer {
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  pointer-events: none;
+}
+
+/* ONE handle, over the smallest box under the pointer. Never unmounted: a
+   native drag aborts if its source leaves the page. */
+.es-canvas-handle {
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 22px;
+  padding: 0 8px 0 6px;
+  border-radius: 11px;
+  background: var(--es-toast-bg);
+  color: var(--es-on-accent);
+  font: 500 11px/22px var(--es-font);
+  white-space: nowrap;
+  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.2);
+  cursor: grab;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.12s;
+}
+.es-canvas-handle.is-shown {
+  opacity: 1;
+  pointer-events: auto;
+}
+.es-canvas-handle:active {
+  cursor: grabbing;
+}
+/* Frozen, not removed, while it is being dragged. */
+.es-canvas-handle.is-dragging {
+  opacity: 0;
+}
+.es-canvas-grip {
+  font-size: 10px;
+  letter-spacing: -2px;
+  opacity: 0.8;
+}
+
+/* While a drag is on — from here, the tree or the Add list — the whole canvas
+   is one drop surface in the host page. */
+.es-canvas-catch {
+  position: absolute;
+  inset: 0;
+  pointer-events: auto;
+}
+
+/* The drop line: 2px of accent, across a list or down between columns. */
+.es-canvas-line {
+  position: absolute;
+  background: var(--es-accent);
+  border-radius: 2px;
+  pointer-events: none;
+}
+
+/* "+ Add section", in the gap between two sections, on hover. */
+.es-canvas-seam {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+}
+.es-canvas-seam::before {
+  content: "";
+  position: absolute;
+  left: 8px;
+  right: 8px;
+  top: 50%;
+  height: 2px;
+  margin-top: -1px;
+  background: var(--es-accent);
+  border-radius: 2px;
+  opacity: 0;
+  transition: opacity 0.12s;
+}
+.es-canvas-seam-add {
+  position: relative;
+  padding: 2px 10px;
+  border: none;
+  border-radius: 999px;
+  background: var(--es-accent);
+  color: var(--es-on-accent);
+  font: 600 11px/16px var(--es-font);
+  cursor: pointer;
+  opacity: 0;
+  transform: scale(0.9);
+  transition: opacity 0.12s, transform 0.12s;
+}
+.es-canvas-seam:hover::before,
+.es-canvas-seam:focus-within::before,
+.es-canvas-seam:hover .es-canvas-seam-add,
+.es-canvas-seam-add:focus-visible {
+  opacity: 1;
+}
+.es-canvas-seam:hover .es-canvas-seam-add,
+.es-canvas-seam-add:focus-visible {
+  transform: scale(1);
+}
+
+/* An empty slot: a faint dashed cell that adds a block there, and takes a drop. */
+.es-canvas-empty {
+  position: absolute;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1.5px dashed var(--es-input-border);
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--es-app-bg) 60%, transparent);
+  color: var(--es-muted);
+  font: 500 12px/1.3 var(--es-font);
+  cursor: pointer;
+  pointer-events: auto;
+  transition: border-color 0.12s, background 0.12s, color 0.12s;
+}
+.es-canvas-empty:hover,
+.es-canvas-empty:focus-visible,
+.es-canvas-empty.is-over {
+  border-color: var(--es-accent);
+  background: var(--es-accent-tint);
+  color: var(--es-accent-text);
+}
+
+/* ── The Add panel's shell ───────────────────────────────────────────────────
+   The campaign designer's Add view (redesign PR 6b), itself the website
+   picker's grammar at the left panel's width: a search that says so when
+   nothing matches, uppercase group headings with a count, and tiles that are
+   clicked to add and dragged to place. */
+.es-add {
+  font-family: var(--es-font);
+}
+.es-add-at {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin: 0 0 10px;
+  padding: 7px 8px 7px 11px;
+  border-radius: 8px;
+  background: var(--es-accent-tint);
+  color: var(--es-accent-text);
+  font-size: 12.5px;
+  font-weight: 600;
+}
+.es-add-at-clear {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: none;
+  border-radius: 5px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+.es-add-at-clear:hover {
+  background: var(--es-accent-tint-strong);
+}
+.es-add-hint {
+  margin: 0 0 10px;
+  font-size: 12.5px;
+  color: var(--es-muted);
+}
+.es-add-search {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  margin-bottom: 16px;
+  padding: 0 12px;
+  height: 38px;
+  background: var(--es-track-bg);
+  border: 1px solid var(--es-input-border);
+  border-radius: 10px;
+  color: var(--es-muted);
+  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
+}
+.es-add-search:focus-within {
+  border-color: var(--es-accent);
+  background: var(--es-panel);
+  box-shadow: 0 0 0 3px var(--es-accent-ring);
+}
+.es-add-search > svg {
+  flex: none;
+}
+.es-add-search input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  background: transparent;
+  outline: none;
+  box-shadow: none;
+  padding: 0;
+  font: inherit;
+  font-size: 13.5px;
+  color: var(--es-text);
+}
+.es-add-search input::placeholder {
+  color: var(--es-field-placeholder);
+  opacity: 1;
+}
+.es-add-search input::-webkit-search-cancel-button {
+  display: none;
+}
+.es-add-search-clear {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: none;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--es-muted);
+  cursor: pointer;
+}
+.es-add-search-clear:hover {
+  background: var(--es-divider);
+  color: var(--es-text);
+}
+.es-add-group + .es-add-group {
+  margin-top: 22px;
+}
+.es-add-group-head {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin-bottom: 11px;
+}
+.es-add-group-title {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--es-muted);
+}
+.es-add-group-count {
+  font-size: 11px;
+  color: var(--es-field-placeholder);
+}
+.es-add-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
+  gap: 6px;
+}
+.es-add-tile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 64px;
+  padding: 9px 6px;
+  border: 1px solid var(--es-line);
+  border-radius: 7px;
+  background: var(--es-panel);
+  color: var(--es-text);
+  font: inherit;
+  font-size: 12px;
+  line-height: 1.2;
+  text-align: center;
+  cursor: grab;
+  transition: background 0.12s, border-color 0.12s;
+}
+.es-add-tile:hover {
+  background: var(--es-hover);
+  border-color: var(--es-accent);
+}
+.es-add-tile:active {
+  cursor: grabbing;
+}
+.es-add-tile:focus-visible {
+  outline: 2px solid var(--es-accent);
+  outline-offset: 1px;
+}
+.es-add-tile[aria-disabled='true'] {
+  cursor: not-allowed;
+  opacity: 0.5;
+  background: var(--es-panel);
+  border-color: var(--es-line);
+}
+.es-add-tile-glyph {
+  display: flex;
+  color: var(--es-icon);
+}
+.es-add-tile-glyph svg {
+  width: 20px;
+  height: 20px;
+}
+.es-add-tile:hover .es-add-tile-glyph {
+  color: var(--es-accent);
+}
+/* Cards (0.80.0): a group whose tiles all carry a cover — two across, the
+   picture above the name, so a section is chosen by how it looks. */
+.es-add-grid.is-cards {
+  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
+  gap: 8px;
+}
+.es-add-tile.has-cover {
+  align-items: stretch;
+  justify-content: flex-start;
+  gap: 5px;
+  min-height: 0;
+  padding: 5px 5px 7px;
+  text-align: left;
+}
+/* The containing block for the host's picture: a cover drawn to FILL its box
+   (the storefront's scenes are positioned against it) must not escape the
+   tile and paint over the panel. */
+.es-add-tile-cover {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  aspect-ratio: 16 / 10;
+  border-radius: 4px;
+  background: var(--es-app-bg);
+}
+.es-add-tile-cover > * {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.es-add-tile.has-cover .es-add-tile-label {
+  padding: 0 2px;
+}
+.es-add-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 9px;
+  padding: 48px 12px;
+  text-align: center;
+  color: var(--es-muted);
+}
+.es-add-empty-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--es-text);
+}
+.es-add-empty-sub {
+  font-size: 12.5px;
+}