@panphora/hyper-cms 0.8.1 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -375,6 +375,39 @@ Common errors thrown by the engine:
375
375
 
376
376
  In hyperclayjs apps, drag works out of the box (hypercms's object-array templates carry the `[sortable]` custom-attribute, which hyperclayjs upgrades). For standalone use, install `sortablejs` and either upgrade the `[sortable]` attribute yourself or replace the template with your own reorder UX. Add/remove still work without sortable.
377
377
 
378
+ ## The floating toggle
379
+
380
+ In edit mode, on a page that has a cms rules tag, hypercms injects a floating
381
+ "Edit content" button in the bottom-right corner. It is runtime-only chrome: it
382
+ carries `no-save`, `snapshot-remove` and `save-ignore`, so it never reaches the
383
+ saved file and never marks the page dirty.
384
+
385
+ It takes the page's font, ink and letterforms by inheritance. The pill's surface
386
+ is opaque and neutral, picked between two values by whichever reads better
387
+ against the page's own ink, because the button floats over a backdrop it cannot
388
+ see and a translucent surface is unreadable on a dark hero or footer.
389
+
390
+ Restyle it with plain CSS. Our cosmetic rules are selected by
391
+ `[data-hcms-toggle-host]`, so any `#hcms-toggle { ... }` rule of yours outranks
392
+ them:
393
+
394
+ #hcms-toggle .hcms-toggle__main { border-radius: 6px; box-shadow: none; }
395
+
396
+ Five properties are not reachable that way. `position`, `right`, `bottom`,
397
+ `z-index` and `background` are pinned inline with `!important`, so that a host
398
+ page's `* { ... !important }` reset cannot leave the button unpositioned or
399
+ transparent. `position` is always `fixed`. The other four read a custom
400
+ property first, and that is how you change them:
401
+
402
+ | property | default | what it does |
403
+ |---|---|---|
404
+ | `--hcms-toggle-color` | the page's ink | label and focus ring; a plain `#hcms-toggle` rule reaches these too |
405
+ | `--hcms-toggle-bg` | the picked surface | the pill's surface; setting it turns off the automatic pick |
406
+ | `--hcms-toggle-offset` | `16px` | distance from the corner; it adds to the sidebar shift rather than replacing it |
407
+ | `--hcms-toggle-z` | `2147482900` | raise it if a chat widget or cookie banner covers the button |
408
+
409
+ :root { --hcms-toggle-offset: 76px; } /* clear a chat widget */
410
+
378
411
  ## Build, develop, test
379
412
 
380
413
  ```sh