@panphora/hyper-cms 0.10.0 → 0.11.0

package/src/theme/pixel-quiet.overrides.css

@@ -1,7 +1,7 @@
 /* =====================================================================
    Pixel Quiet — hypercms theme overrides (hypercms-owned).
 
-   Adapted from cms-sidebar/pixel-quiet/overrides.css. Two jobs:
+   Adapted from ARCHIVE_PROJECTS/cms-sidebar/pixel-quiet/overrides.css. Two jobs:
      1. Retune --mirk-* tokens, scoped to .hcms-shell.pixel-quiet (never :root).
      2. Author the panel geometry + the functional chrome the static mockup
         doesn't have (error banner, add/remove/move controls, the engine's
@@ -112,13 +112,13 @@
    position: fixed makes the shell a containing block so the absolute
    minibar anchors to it; flex column so the body owns the scroll.
    ============================================================ */
-.hcms-shell.pixel-quiet {
+.hcms-shell.pixel-quiet.hcms-panel {
   box-sizing: border-box;
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
-  width: 380px;
+  width: var(--hcms-shell-width, 380px);
   max-width: 100vw;
   z-index: 2147483000;
   display: flex;
@@ -128,7 +128,7 @@
   border-left: 1px solid var(--mirk-input-border);
   box-shadow: -16px 0 48px -28px rgba(43, 36, 27, 0.45);
 }
-.hcms-shell.pixel-quiet.dark {
+.hcms-shell.pixel-quiet.hcms-panel.dark {
   box-shadow: -16px 0 48px -28px rgba(0, 0, 0, 0.6);
 }
 
@@ -140,13 +140,20 @@
   box-shadow: 16px 0 48px -28px rgba(43, 36, 27, 0.45);
 }
 
-/* Push the page over so docked content is never hidden underneath. */
-body.hcms-open:not(.hcms-overlay) { padding-right: 380px; }
-body.hcms-open.hcms-side-left:not(.hcms-overlay) { padding-right: 0; padding-left: 380px; }
-body.hcms-open.hcms-overlay { overflow: hidden; }
+/* Push the page over so docked content is never hidden underneath, and publish
+   the geometry the floating toggle has to compose with. --hcms-toggle-shift is
+   the distance the toggle moves left, which is the shell width only while the
+   shell is docked on the right; docked left, as an overlay, or full-viewport it
+   is zero. */
+body.hcms-open { --hcms-shell-width: 380px; }
+body.hcms-open:not(.hcms-overlay) { padding-right: var(--hcms-shell-width); }
+body.hcms-open:not(.hcms-overlay):not(.hcms-side-left) { --hcms-toggle-shift: var(--hcms-shell-width); }
+body.hcms-open.hcms-side-left:not(.hcms-overlay) { padding-right: 0; padding-left: var(--hcms-shell-width); }
+body.hcms-open.hcms-overlay { overflow: hidden; --hcms-toggle-display: none; }
 
 @media (max-width: 799px) {
-  .hcms-shell.pixel-quiet { width: 100vw; }
+  body.hcms-open { --hcms-shell-width: 100vw; }
+  body.hcms-open:not(.hcms-overlay):not(.hcms-side-left) { --hcms-toggle-shift: 0px; }
   body.hcms-open:not(.hcms-overlay),
   body.hcms-open.hcms-side-left:not(.hcms-overlay) { padding-right: 0; padding-left: 0; }
   body.hcms-open { overflow: hidden; }
@@ -523,6 +530,7 @@ body.hcms-open.hcms-overlay { overflow: hidden; }
 .hcms-shell-notice {
   font-size: 12px;
   line-height: 1.45;
+  white-space: pre-line;
   color: var(--mirk-mark-fg);
   background: var(--mirk-bevel-bg);
   border: 1px solid var(--mirk-input-border);
@@ -589,3 +597,289 @@ body.hcms-open.hcms-overlay { overflow: hidden; }
   cursor: pointer;
 }
 .hcms-sr-only[hidden] { display: none; }
+
+/* ============================================================
+   INLINE VIEW GEOMETRY — not a panel. A transparent full-viewport
+   host whose children are the only interactive surfaces, so the page
+   underneath stays fully usable while the editor is open.
+   ============================================================ */
+.hcms-shell.pixel-quiet.hcms-inline {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483000;
+  /* The host must never intercept a click meant for the page. Each child
+     re-enables pointer events for itself. */
+  pointer-events: none;
+  background: none;
+  border: 0;
+  box-shadow: none;
+  color: var(--mirk-fg);
+}
+.hcms-inline > *,
+.hcms-inline-layer > * { pointer-events: auto; }
+.hcms-inline-layer { position: absolute; inset: 0; pointer-events: none; }
+
+.hcms-inline-bar {
+  position: absolute;
+  left: 50%;
+  bottom: 16px;
+  transform: translateX(-50%);
+  max-width: min(560px, calc(100vw - 32px));
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.hcms-inline-notice,
+.hcms-inline-error {
+  padding: 8px 12px;
+  border-radius: 8px;
+  font-size: 14px;
+  line-height: 1.4;
+  border: 1px solid var(--mirk-input-border);
+  background: var(--mirk-bg);
+  color: var(--mirk-fg);
+  box-shadow: 0 12px 32px -20px rgba(43, 36, 27, 0.5);
+}
+.hcms-inline-notice { white-space: pre-line; }
+.hcms-inline-error { border-color: var(--mirk-destructive); color: var(--mirk-destructive); }
+.hcms-inline-notice[hidden],
+.hcms-inline-error[hidden] { display: none; }
+
+.hcms-inline-pop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: min(340px, calc(100vw - 24px));
+  max-height: calc(100dvh - 24px);
+  overflow: auto;
+  padding: 16px;
+  border-radius: 8px;
+  border: 1px solid var(--mirk-input-border);
+  background: var(--mirk-bg);
+  color: var(--mirk-fg);
+  box-shadow: 0 16px 40px -22px rgba(43, 36, 27, 0.55);
+  /* Above the handles. They are positioned with z-index: 1 while the popover
+     sat at auto, so a handle painted over the very field it had just opened
+     and covered the text in it. The popover is what someone is using; a handle
+     is only an offer to open one. */
+  z-index: 2;
+}
+.hcms-inline-pop[hidden] { display: none; }
+.hcms-inline-pop-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 16px;
+  font-size: 14px;
+}
+.hcms-shell .hcms-inline-pop-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 36px;
+  min-height: 36px;
+  padding: 4px;
+}
+
+.hcms-inline-item-controls {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  will-change: transform;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.hcms-inline-item-controls[hidden],
+.hcms-inline-handle[hidden] { display: none; }
+.hcms-inline-item-controls.has-open-settings { z-index: 3; }
+.hcms-inline-settings { position: relative; display: flex; flex: none; }
+.hcms-inline-settings[hidden],
+.hcms-inline-settings-menu[hidden] { display: none; }
+.hcms-inline-settings-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  min-width: 120px;
+  padding: 4px;
+  border: 1px solid var(--mirk-input-border);
+  border-radius: 5px;
+  background: var(--mirk-bg);
+  box-shadow: 0 8px 24px #0003;
+}
+.hcms-inline-settings-menu button {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 10px 12px;
+  border: 0;
+  background: transparent;
+  color: var(--mirk-destructive);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.hcms-inline-settings-menu button:hover,
+.hcms-inline-settings-menu button:focus-visible {
+  background: var(--mirk-bevel-bg);
+  outline: 1px solid var(--mirk-focus-color);
+}
+
+/* Buttons flow within the positioned item container. */
+.hcms-inline-row-controls {
+  display: flex;
+  gap: 2px;
+}
+.hcms-inline-row-controls[hidden] { display: none; }
+
+.hcms-inline-list-add[hidden] { display: none; }
+
+.hcms-shell.hcms-inline-ghost {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  max-width: 100%;
+  min-width: 0;
+  margin: 8px 0 0;
+  padding: 0;
+  border: 1px dashed color-mix(in srgb, currentColor 25%, transparent);
+  border-radius: 3px;
+  background: color-mix(in srgb, currentColor 3%, transparent);
+  color: inherit;
+  list-style: none;
+}
+.hcms-shell.hcms-inline-ghost[hidden] { display: none; }
+tr.hcms-shell.hcms-inline-ghost { display: table-row; }
+.hcms-inline-ghost-cell { padding: 0; text-align: center; vertical-align: middle; }
+
+.hcms-shell .hcms-inline-handle,
+.hcms-shell .hcms-inline-list-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 36px;
+  min-height: 36px;
+  padding: 4px;
+  line-height: 1;
+}
+.hcms-inline-handle .mirk-button__label,
+.hcms-inline-list-button .mirk-button__label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  line-height: 1;
+}
+.hcms-inline-icon { display: block; width: 24px; height: 24px; flex: none; }
+.hcms-inline-handle .hcms-inline-icon { width: 20.4px; height: 20.4px; transform: translateY(-1px); }
+.hcms-inline-list-add .hcms-inline-icon { width: 16.8px; height: 16.8px; }
+.hcms-shell .hcms-inline-list-add { padding-inline: 10px; }
+
+.hcms-inline-list-button {
+  flex: none;
+}
+.hcms-inline-list-button[hidden] { display: none; }
+.hcms-shell .hcms-inline-list-button:disabled {
+  opacity: 1;
+  color: #626B96;
+  background: var(--mirk-bevel-bg);
+  border-color: var(--mirk-bevel-tl) var(--mirk-bevel-br) var(--mirk-bevel-br) var(--mirk-bevel-tl);
+}
+.hcms-shell .hcms-inline-list-button:disabled .mirk-button__label { translate: none; }
+
+/* A finger is not a mouse pointer: on touch the same three controls get the
+   44px target the platform guidelines ask for. */
+@media (pointer: coarse) {
+  .hcms-shell .hcms-inline-handle,
+  .hcms-shell .hcms-inline-list-button {
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
+
+.hcms-inline-toggle { align-self: center; }
+.hcms-inline-toggle[hidden] { display: none; }
+
+/* Fields with no visible anchor can still be edited through the sidebar. */
+.hcms-inline-handoff {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 6px 6px 12px;
+  border-radius: 999px;
+  font-size: 13px;
+  border: 1px solid var(--mirk-input-border);
+  background: var(--mirk-bg);
+  color: var(--mirk-fg);
+  align-self: center;
+}
+.hcms-inline-handoff[hidden] { display: none; }
+
+/* Selected fields only. Scoped to the inline host: [data-hcms-shell] is on BOTH
+   hosts, so an unscoped rule hides the sidebar's whole form too. */
+.hcms-inline .hcms-form [data-hcms-path] { display: none; }
+.hcms-inline .hcms-form [data-hcms-path].is-hcms-inline-onpath,
+.hcms-inline .hcms-form [data-hcms-path].is-hcms-inline-active { display: block; }
+
+.hcms-inline .hcms-form .is-hcms-inline-onpath,
+.hcms-inline .hcms-form {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  background: transparent;
+  min-width: 0;
+  min-height: 0;
+  width: 100%;
+}
+.hcms-inline-pop .hcms-object-title,
+.hcms-inline-pop .hcms-array-header,
+.hcms-inline-pop .hcms-drag-handle,
+.hcms-inline-pop [data-hcms-action="add"],
+.hcms-inline-pop [data-hcms-action="remove"],
+.hcms-inline-pop [data-hcms-action="move-up"],
+.hcms-inline-pop [data-hcms-action="move-down"],
+.hcms-inline-pop .hcms-card-controls { display: none; }
+.hcms-inline .hcms-form .hcms-field.is-hcms-inline-active {
+  display: flex;
+  gap: 8px;
+  padding: 0;
+  margin: 0 0 16px;
+  border: 0;
+  min-width: min(260px, 100%);
+}
+.hcms-inline .hcms-form .hcms-field.is-hcms-inline-active:last-child { margin-bottom: 0; }
+.hcms-shell.pixel-quiet .hcms-inline-pop .mirk-input,
+.hcms-shell.pixel-quiet .hcms-inline-pop .mirk-textarea {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: min(260px, 100%);
+  min-height: 42px;
+  padding: 10px 12px;
+  border: 1px solid var(--mirk-input-border);
+  background: var(--mirk-input-bg);
+}
+.hcms-inline-pop .mirk-input:focus-visible,
+.hcms-inline-pop .mirk-textarea:focus-visible {
+  outline: 2px solid var(--mirk-focus-color);
+  outline-offset: 2px;
+}
+
+.hcms-inline-highlight {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  border: 2px solid var(--mirk-focus-color);
+  border-radius: 4px;
+  box-sizing: border-box;
+  will-change: transform;
+}
+.hcms-inline-highlight[hidden] { display: none; }

package/src/theme.generated.css

@@ -1012,7 +1012,7 @@
 /* =====================================================================
    Pixel Quiet — hypercms theme overrides (hypercms-owned).
 
-   Adapted from cms-sidebar/pixel-quiet/overrides.css. Two jobs:
+   Adapted from ARCHIVE_PROJECTS/cms-sidebar/pixel-quiet/overrides.css. Two jobs:
      1. Retune --mirk-* tokens, scoped to .hcms-shell.pixel-quiet (never :root).
      2. Author the panel geometry + the functional chrome the static mockup
         doesn't have (error banner, add/remove/move controls, the engine's
@@ -1123,13 +1123,13 @@
    position: fixed makes the shell a containing block so the absolute
    minibar anchors to it; flex column so the body owns the scroll.
    ============================================================ */
-.hcms-shell.pixel-quiet {
+.hcms-shell.pixel-quiet.hcms-panel {
   box-sizing: border-box;
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
-  width: 380px;
+  width: var(--hcms-shell-width, 380px);
   max-width: 100vw;
   z-index: 2147483000;
   display: flex;
@@ -1139,7 +1139,7 @@
   border-left: 1px solid var(--mirk-input-border);
   box-shadow: -16px 0 48px -28px rgba(43, 36, 27, 0.45);
 }
-.hcms-shell.pixel-quiet.dark {
+.hcms-shell.pixel-quiet.hcms-panel.dark {
   box-shadow: -16px 0 48px -28px rgba(0, 0, 0, 0.6);
 }
 
@@ -1151,13 +1151,20 @@
   box-shadow: 16px 0 48px -28px rgba(43, 36, 27, 0.45);
 }
 
-/* Push the page over so docked content is never hidden underneath. */
-body.hcms-open:not(.hcms-overlay) { padding-right: 380px; }
-body.hcms-open.hcms-side-left:not(.hcms-overlay) { padding-right: 0; padding-left: 380px; }
-body.hcms-open.hcms-overlay { overflow: hidden; }
+/* Push the page over so docked content is never hidden underneath, and publish
+   the geometry the floating toggle has to compose with. --hcms-toggle-shift is
+   the distance the toggle moves left, which is the shell width only while the
+   shell is docked on the right; docked left, as an overlay, or full-viewport it
+   is zero. */
+body.hcms-open { --hcms-shell-width: 380px; }
+body.hcms-open:not(.hcms-overlay) { padding-right: var(--hcms-shell-width); }
+body.hcms-open:not(.hcms-overlay):not(.hcms-side-left) { --hcms-toggle-shift: var(--hcms-shell-width); }
+body.hcms-open.hcms-side-left:not(.hcms-overlay) { padding-right: 0; padding-left: var(--hcms-shell-width); }
+body.hcms-open.hcms-overlay { overflow: hidden; --hcms-toggle-display: none; }
 
 @media (max-width: 799px) {
-  .hcms-shell.pixel-quiet { width: 100vw; }
+  body.hcms-open { --hcms-shell-width: 100vw; }
+  body.hcms-open:not(.hcms-overlay):not(.hcms-side-left) { --hcms-toggle-shift: 0px; }
   body.hcms-open:not(.hcms-overlay),
   body.hcms-open.hcms-side-left:not(.hcms-overlay) { padding-right: 0; padding-left: 0; }
   body.hcms-open { overflow: hidden; }
@@ -1534,6 +1541,7 @@ body.hcms-open.hcms-overlay { overflow: hidden; }
 .hcms-shell-notice {
   font-size: 12px;
   line-height: 1.45;
+  white-space: pre-line;
   color: var(--mirk-mark-fg);
   background: var(--mirk-bevel-bg);
   border: 1px solid var(--mirk-input-border);
@@ -1600,3 +1608,289 @@ body.hcms-open.hcms-overlay { overflow: hidden; }
   cursor: pointer;
 }
 .hcms-sr-only[hidden] { display: none; }
+
+/* ============================================================
+   INLINE VIEW GEOMETRY — not a panel. A transparent full-viewport
+   host whose children are the only interactive surfaces, so the page
+   underneath stays fully usable while the editor is open.
+   ============================================================ */
+.hcms-shell.pixel-quiet.hcms-inline {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483000;
+  /* The host must never intercept a click meant for the page. Each child
+     re-enables pointer events for itself. */
+  pointer-events: none;
+  background: none;
+  border: 0;
+  box-shadow: none;
+  color: var(--mirk-fg);
+}
+.hcms-inline > *,
+.hcms-inline-layer > * { pointer-events: auto; }
+.hcms-inline-layer { position: absolute; inset: 0; pointer-events: none; }
+
+.hcms-inline-bar {
+  position: absolute;
+  left: 50%;
+  bottom: 16px;
+  transform: translateX(-50%);
+  max-width: min(560px, calc(100vw - 32px));
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.hcms-inline-notice,
+.hcms-inline-error {
+  padding: 8px 12px;
+  border-radius: 8px;
+  font-size: 14px;
+  line-height: 1.4;
+  border: 1px solid var(--mirk-input-border);
+  background: var(--mirk-bg);
+  color: var(--mirk-fg);
+  box-shadow: 0 12px 32px -20px rgba(43, 36, 27, 0.5);
+}
+.hcms-inline-notice { white-space: pre-line; }
+.hcms-inline-error { border-color: var(--mirk-destructive); color: var(--mirk-destructive); }
+.hcms-inline-notice[hidden],
+.hcms-inline-error[hidden] { display: none; }
+
+.hcms-inline-pop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: min(340px, calc(100vw - 24px));
+  max-height: calc(100dvh - 24px);
+  overflow: auto;
+  padding: 16px;
+  border-radius: 8px;
+  border: 1px solid var(--mirk-input-border);
+  background: var(--mirk-bg);
+  color: var(--mirk-fg);
+  box-shadow: 0 16px 40px -22px rgba(43, 36, 27, 0.55);
+  /* Above the handles. They are positioned with z-index: 1 while the popover
+     sat at auto, so a handle painted over the very field it had just opened
+     and covered the text in it. The popover is what someone is using; a handle
+     is only an offer to open one. */
+  z-index: 2;
+}
+.hcms-inline-pop[hidden] { display: none; }
+.hcms-inline-pop-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 16px;
+  font-size: 14px;
+}
+.hcms-shell .hcms-inline-pop-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 36px;
+  min-height: 36px;
+  padding: 4px;
+}
+
+.hcms-inline-item-controls {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  will-change: transform;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.hcms-inline-item-controls[hidden],
+.hcms-inline-handle[hidden] { display: none; }
+.hcms-inline-item-controls.has-open-settings { z-index: 3; }
+.hcms-inline-settings { position: relative; display: flex; flex: none; }
+.hcms-inline-settings[hidden],
+.hcms-inline-settings-menu[hidden] { display: none; }
+.hcms-inline-settings-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  min-width: 120px;
+  padding: 4px;
+  border: 1px solid var(--mirk-input-border);
+  border-radius: 5px;
+  background: var(--mirk-bg);
+  box-shadow: 0 8px 24px #0003;
+}
+.hcms-inline-settings-menu button {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 10px 12px;
+  border: 0;
+  background: transparent;
+  color: var(--mirk-destructive);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.hcms-inline-settings-menu button:hover,
+.hcms-inline-settings-menu button:focus-visible {
+  background: var(--mirk-bevel-bg);
+  outline: 1px solid var(--mirk-focus-color);
+}
+
+/* Buttons flow within the positioned item container. */
+.hcms-inline-row-controls {
+  display: flex;
+  gap: 2px;
+}
+.hcms-inline-row-controls[hidden] { display: none; }
+
+.hcms-inline-list-add[hidden] { display: none; }
+
+.hcms-shell.hcms-inline-ghost {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  max-width: 100%;
+  min-width: 0;
+  margin: 8px 0 0;
+  padding: 0;
+  border: 1px dashed color-mix(in srgb, currentColor 25%, transparent);
+  border-radius: 3px;
+  background: color-mix(in srgb, currentColor 3%, transparent);
+  color: inherit;
+  list-style: none;
+}
+.hcms-shell.hcms-inline-ghost[hidden] { display: none; }
+tr.hcms-shell.hcms-inline-ghost { display: table-row; }
+.hcms-inline-ghost-cell { padding: 0; text-align: center; vertical-align: middle; }
+
+.hcms-shell .hcms-inline-handle,
+.hcms-shell .hcms-inline-list-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 36px;
+  min-height: 36px;
+  padding: 4px;
+  line-height: 1;
+}
+.hcms-inline-handle .mirk-button__label,
+.hcms-inline-list-button .mirk-button__label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  line-height: 1;
+}
+.hcms-inline-icon { display: block; width: 24px; height: 24px; flex: none; }
+.hcms-inline-handle .hcms-inline-icon { width: 20.4px; height: 20.4px; transform: translateY(-1px); }
+.hcms-inline-list-add .hcms-inline-icon { width: 16.8px; height: 16.8px; }
+.hcms-shell .hcms-inline-list-add { padding-inline: 10px; }
+
+.hcms-inline-list-button {
+  flex: none;
+}
+.hcms-inline-list-button[hidden] { display: none; }
+.hcms-shell .hcms-inline-list-button:disabled {
+  opacity: 1;
+  color: #626B96;
+  background: var(--mirk-bevel-bg);
+  border-color: var(--mirk-bevel-tl) var(--mirk-bevel-br) var(--mirk-bevel-br) var(--mirk-bevel-tl);
+}
+.hcms-shell .hcms-inline-list-button:disabled .mirk-button__label { translate: none; }
+
+/* A finger is not a mouse pointer: on touch the same three controls get the
+   44px target the platform guidelines ask for. */
+@media (pointer: coarse) {
+  .hcms-shell .hcms-inline-handle,
+  .hcms-shell .hcms-inline-list-button {
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
+
+.hcms-inline-toggle { align-self: center; }
+.hcms-inline-toggle[hidden] { display: none; }
+
+/* Fields with no visible anchor can still be edited through the sidebar. */
+.hcms-inline-handoff {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 6px 6px 12px;
+  border-radius: 999px;
+  font-size: 13px;
+  border: 1px solid var(--mirk-input-border);
+  background: var(--mirk-bg);
+  color: var(--mirk-fg);
+  align-self: center;
+}
+.hcms-inline-handoff[hidden] { display: none; }
+
+/* Selected fields only. Scoped to the inline host: [data-hcms-shell] is on BOTH
+   hosts, so an unscoped rule hides the sidebar's whole form too. */
+.hcms-inline .hcms-form [data-hcms-path] { display: none; }
+.hcms-inline .hcms-form [data-hcms-path].is-hcms-inline-onpath,
+.hcms-inline .hcms-form [data-hcms-path].is-hcms-inline-active { display: block; }
+
+.hcms-inline .hcms-form .is-hcms-inline-onpath,
+.hcms-inline .hcms-form {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  background: transparent;
+  min-width: 0;
+  min-height: 0;
+  width: 100%;
+}
+.hcms-inline-pop .hcms-object-title,
+.hcms-inline-pop .hcms-array-header,
+.hcms-inline-pop .hcms-drag-handle,
+.hcms-inline-pop [data-hcms-action="add"],
+.hcms-inline-pop [data-hcms-action="remove"],
+.hcms-inline-pop [data-hcms-action="move-up"],
+.hcms-inline-pop [data-hcms-action="move-down"],
+.hcms-inline-pop .hcms-card-controls { display: none; }
+.hcms-inline .hcms-form .hcms-field.is-hcms-inline-active {
+  display: flex;
+  gap: 8px;
+  padding: 0;
+  margin: 0 0 16px;
+  border: 0;
+  min-width: min(260px, 100%);
+}
+.hcms-inline .hcms-form .hcms-field.is-hcms-inline-active:last-child { margin-bottom: 0; }
+.hcms-shell.pixel-quiet .hcms-inline-pop .mirk-input,
+.hcms-shell.pixel-quiet .hcms-inline-pop .mirk-textarea {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: min(260px, 100%);
+  min-height: 42px;
+  padding: 10px 12px;
+  border: 1px solid var(--mirk-input-border);
+  background: var(--mirk-input-bg);
+}
+.hcms-inline-pop .mirk-input:focus-visible,
+.hcms-inline-pop .mirk-textarea:focus-visible {
+  outline: 2px solid var(--mirk-focus-color);
+  outline-offset: 2px;
+}
+
+.hcms-inline-highlight {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  border: 2px solid var(--mirk-focus-color);
+  border-radius: 4px;
+  box-sizing: border-box;
+  will-change: transform;
+}
+.hcms-inline-highlight[hidden] { display: none; }