@xiwebdesign/xicms-core 7.15.0 → 7.16.1

package/dist/styles.css

@@ -346,7 +346,7 @@
      productformulier vraagt — de pagina blijft de hoofdzaak. z-index boven de publiceerknop
      zou de knop verstoppen; erónder blijven (10001) en niet de volle breedte pakken is genoeg. */
   position: fixed;
-  top: 2.6rem;
+  top: 0;
   right: 0;
   bottom: var(--xicms-bottombar, 0px);
   width: clamp(360px, 28vw, 480px);
@@ -415,7 +415,8 @@
   /* Zolang de onder-lade open is heeft de publiceerknop geen plek: hij lag er qua z-index
      ónder (onklikbaar) en erboven zou hij het formulier afdekken. De lade heeft zijn eigen
      ✓ Opgeslagen/✕ Sluiten; publiceren doe je daarna — de knop komt terug zodra de lade sluit. */
-  :root:has(.xicms-ve__panel) .xicms-ve-publiceer {
+  :root:has(.xicms-ve__panel) .xicms-ve-publiceer,
+  :root:has(.xicms-ve__panel) .xicms-ve-verwerp {
     display: none;
   }
   /* Telefoon: de lade komt van onderen (een zijlade van 360px zou het hele scherm zijn). */
@@ -546,12 +547,25 @@
 .xicms-ve-pencil:hover,
 .xicms-ve-pencil:focus-visible {
   opacity: 1;
-  background: var(--xicms-primary, #4f46e5);
+  /* Donker blijven, niet de merkkleur: `--xicms-primary` is van de klant en kan licht zijn
+     (goud, lime) — dan werd dit wit-op-licht en "verdween" de knop precies bij het aanwijzen.
+     Gereedschap houdt zijn eigen kleuren (zie het EditBar-commentaar). */
+  background: rgba(15, 23, 42, 0.92);
 }
 .xicms-ve-pencil:focus-visible {
-  outline: 2px solid var(--xicms-primary, #4f46e5);
+  outline: 2px solid #a5b4fc;
   outline-offset: 1px;
 }
+/* Het potlood van het veld dat je NU bewerkt wordt een groen vinkje: "het is goed, klaar met dit
+   blok". Dezelfde plek als het potlood waarmee je begon, dus de afronding zit waar je hand al is. */
+.xicms-ve-pencil.is-klaar {
+  opacity: 1;
+  background: rgba(22, 163, 74, 0.9);
+}
+.xicms-ve-pencil.is-klaar:hover,
+.xicms-ve-pencil.is-klaar:focus-visible {
+  background: rgba(21, 128, 61, 1);
+}
 /* Zwevende opmaak-toolbar boven een gefocust inline rich-text-veld (B/I/U/link/koppen/lijst). */
 .xicms-ve-fmtbar {
   position: fixed;
@@ -609,7 +623,8 @@
   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
   transition: background 0.12s, transform 0.12s;
 }
-.xicms-ve-img__btn:hover { background: var(--color-accent, #4f46e5); transform: translateY(-1px); }
+/* Donker blijven op hover — een lichte merkkleur (`--color-accent`) maakte dit wit-op-licht. */
+.xicms-ve-img__btn:hover { background: rgba(17, 24, 39, 1); border-color: rgba(255, 255, 255, 0.5); transform: translateY(-1px); }
 /* Vullende variant (hero-achtergrond): knop absoluut t.o.v. het blok-element. */
 .xicms-ve-img__btn--fill {
   position: absolute;
@@ -754,35 +769,38 @@
 
 /* Zwevende werkbalk voor editors */
 /*
- * De beheerbalk staat BOVENAAN, en in beide toestanden op precies dezelfde plek.
+ * De beheerbalk ZWEEFT bovenaan, gecentreerd — en in beide toestanden op precies dezelfde plek.
  *
- * Hij zweefde als pilletje onderaan, terwijl de editor zijn eigen balk bovenaan meebracht. Het
- * overschakelen tussen "live site" en "bewerken" verplaatste de knoppen daarmee van onder naar
- * boven — je moest je houvast opnieuw zoeken op het moment dat je van modus wisselde, en dat is
- * precies het moment waarop je het niet kunt missen. Nu is het één balk die blijft staan en
- * waarin alleen een andere knop oplicht.
+ * Geschiedenis in twee stappen. Hij zweefde ooit als pilletje onderaan, terwijl de editor zijn
+ * eigen balk bovenaan meebracht: overschakelen verplaatste je houvast. 7.8 loste dat op met één
+ * vaste balk van rand tot rand — maar die las als een deel van de site in plaats van als
+ * gereedschap dat erover heen ligt. 7.16 combineert beide lessen: wéér een zwevend pilletje
+ * (duidelijk gereedschap, de site blijft zichtbaar), maar bovenaan gecentreerd en in beide
+ * modi identiek gepositioneerd, zodat het houvast van 7.8 blijft.
  *
- * Onderaan was ook niet meer vrij: daar staat sinds 7.8 de publiceerknop, en die hoort bij je werk
- * op de pagina — niet naast de navigatie.
+ * Onderaan blijft van de publiceerknop (sinds 7.8): die hoort bij je werk, niet bij de navigatie.
  */
 .xicms-editbar,
 .xicms-ve__bar {
   position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
+  top: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: calc(100vw - 16px);
   z-index: 10001;
   display: flex;
   align-items: center;
   gap: 0.3rem;
   padding: 0.4rem 0.9rem;
+  border-radius: 999px;
   /* Eigen kleuren, los van de site eronder: een donkere staaf leest op een witte én op een
      donkere pagina, en blijft op élke klantsite hetzelfde stukje gereedschap. */
   background: rgba(15, 23, 42, 0.95);
   -webkit-backdrop-filter: saturate(1.4) blur(10px);
   backdrop-filter: saturate(1.4) blur(10px);
   color: #fff;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  box-shadow: 0 12px 32px rgba(2, 6, 23, 0.35);
   font-size: 0.8rem;
   line-height: 1;
 }
@@ -807,10 +825,11 @@
   display: none;
 }
 
-:root:has(.xicms-editbar),
-:root:has(.xicms-ve__bar) {
-  padding-top: 2.6rem;
-}
+/* GEEN pagina-offset meer: het pilletje ZWEEFT over de site heen, de pagina schuift er gewoon
+   onderdoor. De vorige vaste balk duwde alles omlaag (padding op :root + sticky-header-correctie
+   in barOffset.ts) — dat hoorde bij een balk van rand tot rand, niet bij zwevend gereedschap.
+   Bewuste afweging: gecentreerd bovenin kan het pilletje een stukje site-header overlappen; dat
+   is de prijs van een site die er verder exact zo bijstaat als voor de bezoeker. */
 /* Smalle schermen: de balk hield alles en werd twee regels hoog — en de pagina-offset (2.6rem,
    vast) rekent op één regel, dus de site schoof onder de balk. Het pad en de statustekst zijn op
    een telefoon ballast; de vier moduskoppen en het gereedschap zijn de balk. */
@@ -822,6 +841,12 @@
   }
   .xicms-editbar,
   .xicms-ve__bar {
+    /* Op een telefoon is centreren met transform vragen om een pilletje dat half buiten beeld
+       hangt zodra de inhoud breder is dan het scherm: volle breedte minus marge, zonder anker. */
+    left: 8px;
+    right: 8px;
+    transform: none;
+    max-width: none;
     gap: 0.15rem;
     padding: 0.4rem 0.5rem;
     overflow-x: auto;
@@ -2642,6 +2667,15 @@
 .xicms-countdown__value { display: block; font-size: 1.8rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
 .xicms-countdown__label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.6; margin-top: 0.25rem; }
 .xicms-countdown__expired { font-size: 1.4rem; font-weight: 700; }
+/* Editor-preview zonder einddatum: gestippeld kader zodat het blok zichtbaar en aanklikbaar blijft. */
+.xicms-countdown__placeholder {
+  margin: 0;
+  padding: 1rem 1.5rem;
+  border: 2px dashed var(--xicms-muted, rgba(0, 0, 0, 0.2));
+  border-radius: 0.5rem;
+  display: inline-block;
+  opacity: 0.7;
+}
 .xicms-widget--countdown .xicms-countdown__digits { gap: 0.4rem; }
 .xicms-widget--countdown .xicms-countdown__value { font-size: 1.3rem; }
 .xicms-widget--countdown .xicms-countdown__unit { min-width: 2.6rem; }
@@ -3187,6 +3221,12 @@
 .xicms-ve-blokknoppen.is-open .xicms-ve-blokknoppen__meer-in {
   display: flex;
   gap: 2px;
+  /* VÓÓR potlood en tandwiel. Het cluster hangt met `right` aan de rechterkant van het blok, dus
+     de doos groeit bij het uitklappen naar LINKS. Stonden de extra knoppen achteraan (DOM-volgorde),
+     dan schoof het potlood precies hun breedte naar links — weg onder de cursor die erheen op weg
+     was, en één misklik verwijderd van "dupliceren". Met de uitklapgroep vooraan blijven potlood en
+     tandwiel op hun plek staan. DOM-volgorde blijft potlood-eerst (tab-volgorde, screenreaders). */
+  order: -1;
 }
 .xicms-ve-blokknop:disabled {
   opacity: 0.35;
@@ -3243,7 +3283,8 @@
 /* Eénmalige starthint van de bewerkmodus: vast onder de balk, midden, weg te klikken. */
 .xicms-ve-starthint {
   position: fixed;
-  top: calc(2.6rem + 10px);
+  /* Vlak onder het zwevende pilletje (10px top + ±34px hoogte + 6px lucht). */
+  top: 50px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 10006;
@@ -3336,6 +3377,39 @@
   font-size: 0.72rem;
   opacity: 0.8;
 }
+/* Verwerpen: het kleine broertje bóven Publiceren. Bestond niet — er was wel een ↺ per blok en
+   undo, maar geen "gooi álles weg en terug naar live". Bewust klein en donker naast de grote
+   blauwe: verwerpen is de uitzondering, publiceren het doel. Zelfde meeschuif-/verberggedrag
+   als de publiceerknop (zie de :has-regels daar). */
+.xicms-ve-verwerp {
+  position: fixed;
+  right: 20px;
+  bottom: calc(94px + var(--xicms-bottombar, 0px));
+  z-index: 10006;
+  padding: 0.45rem 0.9rem;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.75);
+  color: rgba(255, 255, 255, 0.85);
+  font: inherit;
+  font-size: 0.78rem;
+  cursor: pointer;
+  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.3);
+  transition: background 0.15s ease, right 0.2s ease;
+}
+.xicms-ve-verwerp:hover {
+  background: rgba(185, 28, 28, 0.9);
+  color: #fff;
+}
+.xicms-ve-verwerp:focus-visible {
+  outline: 2px solid #a5b4fc;
+  outline-offset: 2px;
+}
+@media (min-width: 721px) {
+  :root:has(.xicms-ve__panel) .xicms-ve-verwerp {
+    right: calc(clamp(360px, 28vw, 480px) + 20px);
+  }
+}
 
 /* Melding in de editorbalk (nog geen werkversie). Hoort bij het gereedschap, niet bij de pagina. */
 .xicms-ve__balkmelding {

package/dist/version.js

@@ -1,4 +1,4 @@
-const CORE_VERSION = true ? "7.15.0" : "0.0.0-dev";
+const CORE_VERSION = true ? "7.16.1" : "0.0.0-dev";
 const CORE_PACKAGE = "@xiwebdesign/xicms-core";
 function isNieuwer(beschikbaar, huidig) {
   const delen = (v) => v.split("-")[0].split(".").map((n) => Number.parseInt(n, 10) || 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xiwebdesign/xicms-core",
-  "version": "7.15.0",
+  "version": "7.16.1",
   "description": "XiCMS engine: gestructureerde content, pagina's, draft/publish, admin (TipTap+Radix), SEO en beveiliging voor klantsites.",
   "license": "UNLICENSED",
   "repository": {