@jackuait/blok 0.11.1 → 0.12.0

package/src/styles/image.css

@@ -0,0 +1,1111 @@
+
+/* =================================================
+   Image block tool
+   ================================================= */
+[data-blok-tool="image"] {
+  position: relative;
+  margin: var(--blok-space-2-5) 0;
+}
+[data-blok-tool="image"][data-align="left"]   { text-align: left; }
+[data-blok-tool="image"][data-align="center"] { text-align: center; }
+[data-blok-tool="image"][data-align="right"]  { text-align: right; }
+
+[data-blok-tool="image"] .blok-image-inner {
+  display: inline-block;
+  position: relative;
+  max-width: 100%;
+}
+[data-blok-tool="image"][data-size="sm"]   .blok-image-inner { width: 280px; }
+[data-blok-tool="image"][data-size="md"]   .blok-image-inner { width: 520px; }
+[data-blok-tool="image"][data-size="lg"]   .blok-image-inner { width: 100%; }
+[data-blok-tool="image"][data-size="full"] .blok-image-inner { width: 100%; }
+
+[data-blok-tool="image"] .blok-image-inner img {
+  display: block;
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+  border-radius: var(--blok-radius-lg);
+  transition: box-shadow 150ms ease;
+}
+[data-blok-tool="image"][data-rounded="off"] .blok-image-inner img { border-radius: 0; }
+[data-blok-tool="image"][data-frame="border"] .blok-image-inner img { box-shadow: inset 0 0 0 1px var(--blok-border-primary); }
+[data-blok-tool="image"][data-frame="shadow"] .blok-image-inner img {
+  box-shadow: var(--blok-image-shadow-resting);
+}
+[data-blok-tool="image"][data-selected="true"] .blok-image-inner img {
+  box-shadow: 0 0 0 2px var(--blok-color-accent),
+              0 0 0 4px color-mix(in srgb, var(--blok-color-accent) 20%, transparent);
+}
+
+/* Block-selection highlight: paint on the image figure only, not the full content-zone width. */
+[data-blok-element-content].bg-selection:has([data-blok-tool="image"]) {
+  background-color: transparent;
+}
+[data-blok-element-content].bg-selection:has([data-blok-tool="image"]) .blok-image-inner {
+  background-color: var(--blok-selection);
+  border-radius: 4px;
+}
+
+/* caption */
+[data-blok-tool="image"] .blok-image-caption {
+  display: block;
+  margin-top: var(--blok-space-2);
+  font-size: 13.5px;
+  color: var(--blok-text-secondary);
+  line-height: 1.5;
+  outline: none;
+  min-height: 1em;
+}
+[data-blok-tool="image"] .blok-image-caption:empty::before {
+  content: attr(data-placeholder);
+  color: var(--blok-text-tertiary);
+}
+[data-blok-tool="image"][data-caption="off"] .blok-image-caption { display: none; }
+
+/* caption row — caption text + inline alt button revealed on hover */
+[data-blok-tool="image"] .blok-image-caption-row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--blok-space-2);
+}
+[data-blok-tool="image"] .blok-image-caption-row .blok-image-caption {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+[data-blok-tool="image"] .blok-image-caption-row__alt {
+  flex: 0 0 auto;
+  margin-top: var(--blok-space-1);
+  padding: 3px var(--blok-space-2);
+  font: inherit;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  line-height: 1.4;
+  color: var(--blok-text-secondary);
+  background: var(--blok-bg-secondary);
+  border: 1px solid transparent;
+  border-radius: var(--blok-radius-sm);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 120ms ease, color 120ms ease, background 120ms ease, border-color 120ms ease;
+}
+[data-blok-tool="image"] .blok-image-caption-row__alt:hover {
+  color: var(--blok-text-primary);
+  background: var(--blok-bg-tertiary);
+}
+[data-blok-tool="image"] .blok-image-caption-row__alt:focus-visible {
+  color: var(--blok-text-primary);
+  background: var(--blok-bg-tertiary);
+  outline: none;
+  border-color: var(--blok-border-strong);
+}
+[data-blok-tool="image"] .blok-image-caption-row__alt[aria-pressed="true"] {
+  color: var(--blok-text-primary);
+  background: var(--blok-bg-tertiary);
+}
+[data-blok-tool="image"] .blok-image-caption-row__alt[aria-expanded="true"] {
+  color: var(--blok-text-primary);
+  background: var(--blok-bg-tertiary);
+  border-color: var(--blok-border-primary);
+}
+[data-blok-tool="image"]:hover .blok-image-caption-row__alt,
+[data-blok-tool="image"][data-selected="true"] .blok-image-caption-row__alt,
+[data-blok-tool="image"][data-alt-open="true"] .blok-image-caption-row__alt,
+[data-blok-tool="image"][data-settings-open="true"] .blok-image-caption-row__alt,
+[data-blok-tool="image"][data-align-open="true"] .blok-image-caption-row__alt,
+[data-blok-tool="image"] .blok-image-caption-row__alt:focus-visible,
+[data-blok-tool="image"] .blok-image-caption-row__alt[aria-expanded="true"],
+[data-blok-tool="image"] .blok-image-caption:focus ~ .blok-image-caption-row__alt {
+  opacity: 1;
+}
+
+/* toolbar — solid dark overlay, hairline ring for crisp edge against dark page bg. */
+[data-blok-tool="image"] .blok-image-toolbar {
+  position: absolute;
+  top: 10px; right: 10px;
+  display: inline-flex;
+  background: var(--blok-overlay-dark-strong);
+  border-radius: var(--blok-space-2);
+  padding: var(--blok-space-1);
+  opacity: 0;
+  transform: translateY(-4px);
+  transition: opacity 120ms ease, transform 120ms ease;
+  pointer-events: none;
+  box-shadow:
+    inset 0 0 0 1px var(--blok-overlay-ring),
+    var(--blok-image-shadow-toolbar);
+  z-index: 2;
+}
+[data-blok-tool="image"] .blok-image-inner:hover .blok-image-toolbar,
+[data-blok-tool="image"][data-selected="true"] .blok-image-toolbar,
+[data-blok-tool="image"][data-settings-open="true"] .blok-image-toolbar,
+[data-blok-tool="image"][data-align-open="true"] .blok-image-toolbar,
+[data-blok-tool="image"][data-alt-open="true"] .blok-image-toolbar {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+[data-blok-tool="image"] .blok-image-toolbar button {
+  width: 28px; height: 28px;
+  display: grid; place-items: center;
+  color: var(--blok-overlay-fg);
+  background: transparent;
+  border: 0;
+  border-radius: var(--blok-space-1);
+  cursor: pointer;
+  transition: background 80ms ease, color 80ms ease;
+}
+[data-blok-tool="image"] .blok-image-toolbar button:hover { background: var(--blok-overlay-fg-hover); color: var(--blok-overlay-fg-strong); }
+[data-blok-tool="image"] .blok-image-toolbar button.is-danger:hover { background: var(--blok-overlay-danger-bg); color: var(--blok-overlay-danger-fg); }
+[data-blok-tool="image"] .blok-image-toolbar button svg { width: 14px; height: 14px; }
+[data-blok-tool="image"] .blok-image-toolbar button[aria-pressed="true"],
+[data-blok-tool="image"] .blok-image-toolbar button[aria-expanded="true"] {
+  background: var(--blok-overlay-fg-pressed);
+  color: var(--blok-overlay-fg-strong);
+}
+[data-blok-tool="image"] .blok-image-toolbar__divider {
+  width: 1px; align-self: stretch; margin: var(--blok-space-1) var(--blok-space-0-5);
+  background: var(--blok-overlay-divider);
+}
+[data-blok-tool="image"] .blok-image-toolbar__pill { display: inline-flex; border-radius: var(--blok-space-1); overflow: hidden; }
+[data-blok-tool="image"] .blok-image-toolbar__pill button { width: 26px; border-radius: 0; }
+/* Compact toolbar — figure too narrow to fit all actions; collapse to just the "..." button. */
+[data-blok-tool="image"] .blok-image-toolbar[data-compact="true"] > :not([data-action="more"]) {
+  display: none;
+}
+
+/* alignment popover — floats below the trigger, rides the same solid dark overlay surface */
+[data-blok-tool="image"] .blok-image-toolbar__align { position: relative; }
+[data-blok-tool="image"] .blok-image-toolbar__align-popover {
+  position: absolute;
+  top: calc(100% + var(--blok-space-1));
+  left: 50%;
+  transform: translateX(-50%);
+  display: inline-flex;
+  gap: var(--blok-space-0-5);
+  padding: var(--blok-space-1);
+  background: var(--blok-overlay-dark-strong);
+  border-radius: var(--blok-space-2);
+  box-shadow:
+    inset 0 0 0 1px var(--blok-overlay-ring),
+    var(--blok-image-shadow-toolbar);
+  z-index: 3;
+}
+[data-blok-tool="image"] .blok-image-toolbar__align-popover[hidden] { display: none; }
+
+/* overflow popover */
+[data-blok-tool="image"] .blok-image-popover {
+  position: absolute;
+  top: 44px; right: 10px;
+  min-width: 220px;
+  background: var(--blok-bg-primary);
+  border: 1px solid var(--blok-border-primary);
+  border-radius: var(--blok-space-2);
+  padding: var(--blok-space-1);
+  box-shadow: var(--blok-image-shadow-popover);
+  opacity: 0;
+  transform: translateY(-4px) scale(0.98);
+  transform-origin: top right;
+  transition: opacity 120ms ease, transform 120ms ease;
+  pointer-events: none;
+  z-index: 3;
+}
+[data-blok-tool="image"] .blok-image-popover.is-open {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  pointer-events: auto;
+}
+[data-blok-tool="image"] .blok-image-popover__label {
+  font-size: 11px; font-weight: 500;
+  color: var(--blok-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: var(--blok-space-2) var(--blok-space-2-5) var(--blok-space-1);
+}
+[data-blok-tool="image"] .blok-image-popover__sep {
+  height: 1px;
+  background: var(--blok-border-subtle);
+  margin: var(--blok-space-1) 0;
+}
+[data-blok-tool="image"] .blok-image-popover__item {
+  display: flex; align-items: center; gap: var(--blok-space-2-5);
+  padding: var(--blok-space-1-75) var(--blok-space-2-5);
+  border-radius: var(--blok-space-1);
+  font-size: 13px;
+  color: var(--blok-text-primary);
+  cursor: pointer;
+  user-select: none;
+  background: transparent;
+  border: 0;
+  width: 100%;
+  text-align: left;
+}
+[data-blok-tool="image"] .blok-image-popover__item:hover {
+  background: var(--blok-bg-hover);
+}
+[data-blok-tool="image"] .blok-image-popover__item.is-danger { color: var(--blok-color-danger); }
+[data-blok-tool="image"] .blok-image-popover__sizes {
+  display: flex;
+  gap: var(--blok-space-1);
+  padding: var(--blok-space-1);
+}
+[data-blok-tool="image"] .blok-image-popover__size {
+  flex: 1;
+  padding: var(--blok-space-1-5) var(--blok-space-2);
+  border-radius: var(--blok-space-1);
+  font-size: 12px;
+  text-align: center;
+  color: var(--blok-text-secondary);
+  cursor: pointer;
+  background: var(--blok-bg-hover);
+  border: 0;
+}
+[data-blok-tool="image"] .blok-image-popover__size[aria-pressed="true"] {
+  background: var(--blok-text-primary);
+  color: var(--blok-bg-primary);
+}
+
+/* resize handle visual — Notion-style pill straddling the edge */
+[data-blok-tool="image"] [data-role="resize-handle"] {
+  position: absolute;
+  top: 50%;
+  width: 6px;
+  height: clamp(24px, 25%, 50px);
+  background: var(--blok-handle-bg-default);
+  border: 1px solid var(--blok-handle-fg-default);
+  border-radius: var(--blok-radius-pill);
+  cursor: ew-resize;
+  opacity: 0;
+  transform: translateY(-50%) scale(1);
+  transform-origin: center;
+  transition:
+    opacity 120ms ease,
+    background-color 120ms ease,
+    transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  z-index: 2;
+}
+[data-blok-tool="image"] [data-role="resize-handle"]::before {
+  content: '';
+  position: absolute;
+  inset: -8px -6px;
+}
+[data-blok-tool="image"] [data-role="resize-handle"][data-edge="left"]  { left: 8px; }
+[data-blok-tool="image"] [data-role="resize-handle"][data-edge="right"] { right: 8px; }
+[data-blok-tool="image"] .blok-image-inner:hover [data-role="resize-handle"],
+[data-blok-tool="image"][data-selected="true"] [data-role="resize-handle"],
+[data-blok-tool="image"][data-alt-open="true"] [data-role="resize-handle"],
+[data-blok-tool="image"][data-settings-open="true"] [data-role="resize-handle"],
+[data-blok-tool="image"][data-align-open="true"] [data-role="resize-handle"] {
+  opacity: 1;
+}
+[data-blok-tool="image"] [data-role="resize-handle"]:hover {
+  background: var(--blok-handle-bg-hover);
+  transform: translateY(-50%) scale(1.15);
+}
+[data-blok-tool="image"] [data-role="resize-handle"]:active {
+  background: var(--blok-handle-bg-active);
+  transform: translateY(-50%) scale(1.15);
+  transition-duration: 0s;
+}
+
+/* ----- Fullscreen lightbox ----- */
+/*
+  The lightbox mounts directly on `<body>`, outside [data-blok-interface],
+  so editor-scoped tokens (spacing + overlay palette) don't resolve via the
+  usual scope. Re-declare the spacing scale + an always-dark popover palette
+  locally so the chrome renders consistently no matter where the root lives.
+  The palette mirrors the dark-mode inline popover (#252525 surface + 14%
+  white hairline + layered drop shadow) so the lightbox toolbar reads as the
+  same Notion-style chrome as the inline formatting popover.
+*/
+.blok-image-lightbox {
+  --blok-space-0-5: 2px;
+  --blok-space-1: 4px;
+  --blok-space-1-5: 6px;
+  --blok-space-2: 8px;
+  --blok-space-3: 12px;
+  --blok-space-4: 16px;
+
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  z-index: 9999;
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+}
+.blok-image-lightbox__backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(25, 25, 24, 0.92);
+  pointer-events: none;
+  z-index: 0;
+}
+.blok-image-lightbox.is-dragging {
+  cursor: grabbing;
+}
+.blok-image-lightbox__image {
+  max-width: 95vw;
+  max-height: 95vh;
+  object-fit: contain;
+  transform: scale(1);
+  transform-origin: center center;
+  transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
+  pointer-events: none;
+  position: relative;
+  z-index: 1;
+  will-change: transform;
+}
+.blok-image-lightbox.is-dragging .blok-image-lightbox__image {
+  transition: none;
+}
+.blok-image-lightbox.is-wheel-zooming .blok-image-lightbox__image {
+  transition: none;
+}
+.blok-image-lightbox__bar {
+  position: absolute;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--blok-space-0-5);
+  padding: var(--blok-space-1-5);
+  background: #252525;
+  color: #e2e0dc;
+  border-radius: var(--blok-space-3);
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.14),
+    0 4px 24px rgba(0, 0, 0, 0.5),
+    0 16px 40px -8px rgba(0, 0, 0, 0.4);
+  cursor: default;
+  z-index: 1;
+}
+.blok-image-lightbox__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: var(--blok-space-2);
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  transition: background 80ms ease, color 80ms ease;
+}
+.blok-image-lightbox__btn:hover {
+  background: rgba(255, 255, 255, 0.055);
+  color: #e2e0dc;
+}
+.blok-image-lightbox__btn:active {
+  background: rgba(255, 255, 255, 0.09);
+}
+.blok-image-lightbox__btn svg {
+  width: var(--blok-space-4);
+  height: var(--blok-space-4);
+}
+.blok-image-lightbox__zoom-label {
+  width: auto;
+  min-width: 48px;
+  padding: 0 var(--blok-space-2);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.01em;
+  color: #a39e98;
+}
+.blok-image-lightbox__divider {
+  width: 1px;
+  align-self: stretch;
+  margin: var(--blok-space-1) var(--blok-space-0-5);
+  background: rgba(255, 255, 255, 0.1);
+}
+
+/*
+  Lightbox tooltip content — the tooltip itself is rendered in the global
+  tooltip singleton (outside `.blok-image-lightbox`), so these selectors are
+  unscoped. The shortcut pill reads as a muted sibling of the label so the
+  hotkey is visually distinct from the action name.
+*/
+.blok-image-lightbox-tooltip {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 8px;
+}
+.blok-image-lightbox-tooltip__shortcut {
+  color: rgba(255, 255, 255, 0.45);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ----- Empty state ----- */
+.blok-image-empty {
+  display: flex; flex-direction: column; gap: var(--blok-space-2);
+  color: var(--blok-text-secondary);
+  font-family: var(--blok-font-family, var(--blok-font-sans));
+}
+
+.blok-image-empty__card {
+  position: relative;
+  container-type: inline-size;
+  display: flex; flex-direction: column;
+  background:
+    radial-gradient(60% 80% at 0% 0%, color-mix(in srgb, var(--blok-color-accent) 12%, transparent) 0%, transparent 60%),
+    radial-gradient(50% 70% at 100% 100%, color-mix(in srgb, var(--blok-color-accent) 9%, transparent) 0%, transparent 60%),
+    var(--blok-bg-secondary);
+  border: 1px solid var(--blok-border-subtle);
+  border-radius: var(--blok-radius-lg);
+  overflow: hidden;
+  transition: border-color var(--blok-duration-standard) ease;
+}
+.blok-image-empty__card:hover { border-color: var(--blok-border-primary); }
+.blok-image-empty__card:focus-visible {
+  outline: none;
+  outline-offset: 0;
+  border-color: var(--blok-color-accent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blok-color-accent) 35%, transparent);
+}
+.blok-image-empty__card.is-dragover {
+  border-color: var(--blok-color-accent);
+  background: color-mix(in srgb, var(--blok-color-accent) 5%, var(--blok-bg-secondary));
+}
+
+.blok-image-empty__header {
+  display: flex; align-items: center; gap: var(--blok-space-3);
+  padding: var(--blok-space-2) var(--blok-space-3);
+  position: relative;
+  z-index: 1;
+}
+
+.blok-image-empty__label {
+  font-size: 12px; font-weight: 600;
+  color: var(--blok-text-tertiary);
+  flex-shrink: 0;
+}
+
+.blok-image-empty__tabs {
+  display: inline-flex; gap: var(--blok-space-0-5);
+  margin-left: auto;
+  flex-shrink: 0;
+}
+.blok-image-empty__tab {
+  appearance: none; background: transparent; border: 0;
+  padding: var(--blok-space-1) var(--blok-space-2);
+  font: inherit; font-size: 12px; font-weight: 500;
+  color: var(--blok-text-tertiary);
+  border-radius: var(--blok-radius-md);
+  cursor: pointer;
+  transition: color var(--blok-duration-base) ease, background var(--blok-duration-base) ease;
+}
+.blok-image-empty__tab:hover {
+  color: var(--blok-text-primary);
+  background: var(--blok-bg-hover);
+}
+.blok-image-empty__tab:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blok-color-accent) 35%, transparent);
+}
+.blok-image-empty__tab[aria-selected="true"],
+.blok-image-empty__tab[aria-current="true"] {
+  color: var(--blok-text-primary);
+  font-weight: 600;
+  background: var(--blok-bg-hover);
+}
+
+.blok-image-empty__panel {
+  display: flex; align-items: center; gap: var(--blok-space-3);
+  padding: var(--blok-space-3);
+  margin: 0 var(--blok-space-2) var(--blok-space-2);
+  border-radius: var(--blok-radius-lg);
+  border: 1px solid var(--blok-border-subtle);
+  background: var(--blok-bg-primary);
+  position: relative;
+  transition: border-color var(--blok-duration-standard) ease, background var(--blok-duration-standard) ease;
+}
+.blok-image-empty__card[data-active-tab="upload"] .blok-image-empty__panel {
+  cursor: pointer;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--blok-space-3);
+  padding: var(--blok-space-5) var(--blok-space-3);
+  min-height: 160px;
+}
+.blok-image-empty__card[data-active-tab="upload"] .blok-image-empty__panel:hover {
+  border-color: var(--blok-border-primary);
+  background: var(--blok-bg-hover);
+}
+.blok-image-empty__card.is-dragover .blok-image-empty__panel {
+  border-color: var(--blok-color-accent);
+  background: color-mix(in srgb, var(--blok-color-accent) 6%, var(--blok-bg-primary));
+}
+
+.blok-image-empty__tile {
+  flex-shrink: 0;
+  width: 36px; height: 36px;
+  display: grid; place-items: center;
+  color: var(--blok-text-secondary);
+  background: var(--blok-bg-secondary);
+  border: 1px solid var(--blok-border-subtle);
+  border-radius: var(--blok-radius-md);
+  transition: color var(--blok-duration-standard) ease, border-color var(--blok-duration-standard) ease;
+}
+.blok-image-empty__tile svg { width: 18px; height: 18px; }
+.blok-image-empty__card.is-dragover .blok-image-empty__tile {
+  color: var(--blok-color-accent);
+  border-color: var(--blok-color-accent);
+}
+
+.blok-image-empty__glyph {
+  display: inline-grid; place-items: center;
+  width: 36px; height: 36px;
+  border-radius: var(--blok-radius-md);
+  color: var(--blok-text-secondary);
+  background: var(--blok-bg-secondary);
+  border: 1px solid var(--blok-border-subtle);
+  transition: color var(--blok-duration-standard) ease, border-color var(--blok-duration-standard) ease;
+}
+.blok-image-empty__glyph svg { width: 18px; height: 18px; }
+.blok-image-empty__card[data-active-tab="upload"] .blok-image-empty__panel:hover .blok-image-empty__glyph {
+  color: var(--blok-text-primary);
+  border-color: var(--blok-border-primary);
+}
+.blok-image-empty__card.is-dragover .blok-image-empty__glyph {
+  color: var(--blok-color-accent);
+  border-color: var(--blok-color-accent);
+}
+
+.blok-image-empty__content {
+  flex: 1; min-width: 0;
+  display: flex; flex-direction: column; gap: 4px;
+}
+.blok-image-empty__card[data-active-tab="upload"] .blok-image-empty__content {
+  flex: 0 0 auto;
+  align-items: center;
+  text-align: center;
+  gap: 8px;
+}
+.blok-image-empty__content--row {
+  flex-direction: row; align-items: center; gap: var(--blok-space-2);
+}
+
+.blok-image-empty__primary {
+  display: flex; align-items: center; gap: var(--blok-space-2);
+  flex-wrap: wrap;
+}
+.blok-image-empty__card[data-active-tab="upload"] .blok-image-empty__primary {
+  flex-direction: column;
+  gap: 6px;
+}
+
+.blok-image-empty__choose {
+  appearance: none; border: 0; cursor: pointer;
+  display: inline-flex; align-items: center; gap: var(--blok-space-1-5);
+  font: inherit; font-size: 13px; font-weight: 600;
+  padding: var(--blok-space-1-5) var(--blok-space-4);
+  color: var(--blok-bg-primary);
+  background: var(--blok-text-primary);
+  border-radius: var(--blok-radius-md);
+  transition: background var(--blok-duration-base) ease, opacity var(--blok-duration-base) ease;
+}
+.blok-image-empty__choose:hover { opacity: 0.88; }
+.blok-image-empty__choose:active { opacity: 0.78; }
+.blok-image-empty__choose:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blok-color-accent) 40%, transparent);
+}
+
+.blok-image-empty__hint {
+  font-size: 12px;
+  color: var(--blok-text-tertiary);
+}
+
+.blok-image-empty__meta {
+  font-size: 10px;
+  color: var(--blok-text-tertiary);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.blok-image-empty__content--row .blok-image-empty__meta {
+  margin-left: auto;
+}
+.blok-image-empty__card[data-active-tab="embed"] .blok-image-empty__panel {
+  border-color: transparent;
+  background: transparent;
+  padding: var(--blok-space-2);
+}
+
+/* ----- Embed bar: unified pill with icon, input, inline submit ----- */
+.blok-image-empty__embed-bar {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 4px 4px 12px;
+  background: var(--blok-bg-primary);
+  border: 1px solid var(--blok-border-subtle);
+  border-radius: 10px;
+  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
+}
+.blok-image-empty__embed-bar:hover {
+  border-color: var(--blok-border-primary);
+}
+.blok-image-empty__embed-bar:focus-within {
+  border-color: var(--blok-color-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blok-color-accent) 18%, transparent);
+}
+
+.blok-image-empty__embed-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--blok-text-tertiary);
+  transition: color .15s ease;
+}
+.blok-image-empty__embed-icon svg { width: 16px; height: 16px; }
+.blok-image-empty__embed-bar:focus-within .blok-image-empty__embed-icon {
+  color: var(--blok-color-accent);
+}
+.blok-image-empty__embed-bar[data-valid="true"] .blok-image-empty__embed-icon {
+  color: var(--blok-color-accent);
+}
+
+.blok-image-empty__embed-input {
+  appearance: none;
+  flex: 1;
+  min-width: 0;
+  font: inherit;
+  font-size: 13px;
+  line-height: 20px;
+  padding: 6px 0;
+  border: 0;
+  background: transparent;
+  color: var(--blok-text-primary);
+  outline: none;
+}
+.blok-image-empty__embed-input::placeholder {
+  color: var(--blok-text-tertiary);
+}
+
+.blok-image-empty__embed-submit {
+  appearance: none;
+  border: 0;
+  cursor: pointer;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  font: inherit;
+  font-size: 12.5px;
+  font-weight: 600;
+  line-height: 1;
+  padding: 7px 12px;
+  color: var(--blok-text-secondary);
+  background: var(--blok-bg-secondary);
+  border-radius: 7px;
+  transition:
+    color .15s ease,
+    background .15s ease,
+    opacity .15s ease,
+    transform .08s ease;
+}
+.blok-image-empty__embed-submit:disabled {
+  cursor: not-allowed;
+  opacity: .55;
+}
+.blok-image-empty__embed-bar[data-valid="true"] .blok-image-empty__embed-submit:not(:disabled) {
+  color: #fff;
+  background: var(--blok-color-accent);
+}
+.blok-image-empty__embed-submit:not(:disabled):hover { filter: brightness(1.05); }
+.blok-image-empty__embed-submit:not(:disabled):active { transform: translateY(1px); }
+.blok-image-empty__embed-submit:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blok-color-accent) 45%, transparent);
+}
+
+.blok-image-empty__embed-submit-label {
+  display: inline-flex;
+  align-items: center;
+  height: 16px;
+}
+
+.blok-image-empty__embed-kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 16px;
+  max-width: 0;
+  margin-left: 0;
+  padding: 1px 0 0;
+  font-family: var(--blok-font-family, var(--blok-font-sans));
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+  color: currentColor;
+  background: color-mix(in srgb, currentColor 14%, transparent);
+  border-radius: 4px;
+  overflow: hidden;
+  opacity: 0;
+  transform: translateX(-4px);
+  transition:
+    max-width .2s ease,
+    margin-left .2s ease,
+    padding .2s ease,
+    opacity .15s ease .05s,
+    transform .2s ease;
+}
+.blok-image-empty__embed-bar[data-valid="true"] .blok-image-empty__embed-kbd {
+  max-width: 40px;
+  margin-left: 6px;
+  padding: 1px 4px 0;
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.blok-image-empty__input {
+  appearance: none;
+  flex: 1; min-width: 0;
+  font: inherit; font-size: 13px;
+  padding: 7px 12px;
+  border: 1px solid var(--blok-border-subtle);
+  background: var(--blok-bg-primary);
+  color: var(--blok-text-primary);
+  border-radius: 7px;
+  transition: border-color .15s ease, box-shadow .15s ease;
+}
+.blok-image-empty__input::placeholder { color: var(--blok-text-tertiary); }
+.blok-image-empty__input:focus,
+.blok-image-empty__input:focus-visible {
+  outline: none;
+  outline-offset: 0;
+  border-color: var(--blok-color-accent);
+  border-radius: 7px;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blok-color-accent) 20%, transparent);
+}
+.blok-image-empty__input:disabled {
+  opacity: .65;
+  cursor: not-allowed;
+}
+
+.blok-image-empty__search {
+  flex: 1; min-width: 0;
+  display: flex; align-items: center; gap: 6px;
+  padding: 0 10px;
+  border: 1px solid var(--blok-border-subtle);
+  background: var(--blok-bg-primary);
+  color: var(--blok-text-tertiary);
+  border-radius: 7px;
+  transition: border-color .15s ease, box-shadow .15s ease;
+}
+.blok-image-empty__search:focus-within {
+  border-color: var(--blok-color-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blok-color-accent) 20%, transparent);
+}
+.blok-image-empty__search-icon {
+  display: inline-flex;
+  color: var(--blok-text-tertiary);
+}
+.blok-image-empty__search-icon svg { width: 14px; height: 14px; }
+.blok-image-empty__input--bare {
+  padding: 7px 0;
+  border: 0; background: transparent; border-radius: 0;
+  flex: 1; min-width: 0;
+}
+.blok-image-empty__input--bare:focus,
+.blok-image-empty__input--bare:focus-visible {
+  box-shadow: none;
+  border-color: transparent;
+}
+
+.blok-image-empty__submit {
+  appearance: none; border: 0; cursor: pointer;
+  font: inherit; font-size: 12.5px; font-weight: 600;
+  padding: var(--blok-space-1-5) var(--blok-space-3);
+  color: var(--blok-bg-primary);
+  background: var(--blok-text-primary);
+  border-radius: var(--blok-radius-md);
+  transition: opacity var(--blok-duration-base) ease;
+}
+.blok-image-empty__submit:hover { opacity: 0.88; }
+.blok-image-empty__submit:active { opacity: 0.78; }
+.blok-image-empty__submit:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blok-color-accent) 40%, transparent);
+}
+
+.blok-image-empty__badge {
+  flex-shrink: 0;
+  font-size: 10px; font-weight: 500;
+  padding: var(--blok-space-0-5) var(--blok-space-2);
+  color: var(--blok-text-tertiary);
+  background: var(--blok-bg-secondary);
+  border: 1px solid var(--blok-border-subtle);
+  border-radius: var(--blok-radius-sm);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.blok-image-empty__drop-overlay {
+  position: absolute; inset: 0;
+  display: flex; align-items: center; justify-content: center;
+  pointer-events: none;
+  opacity: 0;
+  background: color-mix(in srgb, var(--blok-bg-secondary) 88%, transparent);
+  transition: opacity var(--blok-duration-base) ease;
+  z-index: 2;
+}
+.blok-image-empty__drop-inner {
+  display: inline-flex; align-items: center; gap: var(--blok-space-2);
+  padding: var(--blok-space-1-5) var(--blok-space-3);
+  font-size: 13px; font-weight: 600;
+  color: var(--blok-text-primary);
+  background: var(--blok-bg-primary);
+  border: 1px solid var(--blok-color-accent);
+  border-radius: var(--blok-radius-md);
+}
+.blok-image-empty__drop-icon {
+  display: inline-grid; place-items: center;
+  width: 20px; height: 20px;
+  color: var(--blok-color-accent);
+}
+.blok-image-empty__drop-icon svg { width: 14px; height: 14px; }
+.blok-image-empty__card.is-dragover .blok-image-empty__drop-overlay { opacity: 1; }
+
+.blok-image-empty__error {
+  font-size: 12.5px;
+  color: var(--blok-color-danger);
+  padding: 2px var(--blok-space-1);
+}
+.blok-image-empty__error[hidden] { display: none; }
+
+@container (max-width: 460px) {
+  .blok-image-empty__panel { flex-wrap: wrap; }
+  .blok-image-empty__content--row { flex-wrap: wrap; }
+  .blok-image-empty__primary { width: 100%; }
+  .blok-image-empty__meta { font-size: 10px; }
+}
+@container (max-width: 360px) {
+  .blok-image-empty__tabs { margin-left: 0; }
+  .blok-image-empty__header { flex-wrap: wrap; }
+}
+
+/* ----- Uploading state ----- */
+.blok-image-uploading {
+  display: flex; flex-direction: column; gap: var(--blok-space-2);
+  color: var(--blok-text-secondary);
+  font-family: var(--blok-font-family, var(--blok-font-sans));
+}
+
+.blok-image-uploading__card {
+  position: relative;
+  container-type: inline-size;
+  display: flex; flex-direction: column;
+  background:
+    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--blok-bg-primary) 55%, transparent) 0%, transparent 60%),
+    var(--blok-bg-secondary);
+  border: 1px solid var(--blok-border-subtle);
+  border-radius: var(--blok-radius-lg);
+  overflow: hidden;
+}
+
+.blok-image-uploading__header {
+  display: flex; align-items: center; gap: var(--blok-space-3);
+  padding: var(--blok-space-2) var(--blok-space-3);
+  min-width: 0;
+}
+.blok-image-uploading__label {
+  font-size: 13px; font-weight: 600;
+  color: var(--blok-text-primary);
+  letter-spacing: -0.005em;
+  flex-shrink: 0;
+}
+.blok-image-uploading__filename {
+  font-size: 12.5px;
+  color: var(--blok-text-tertiary);
+  min-width: 0;
+  flex: 1;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  font-variant-numeric: tabular-nums;
+}
+
+.blok-image-uploading__cancel {
+  flex-shrink: 0;
+  width: 24px; height: 24px;
+  display: grid; place-items: center;
+  border-radius: 6px;
+  border: 0;
+  background: transparent;
+  color: var(--blok-text-tertiary);
+  cursor: pointer;
+  transition: color .12s ease, background .12s ease;
+}
+.blok-image-uploading__cancel:hover {
+  background: var(--blok-bg-hover);
+  color: var(--blok-text-primary);
+}
+.blok-image-uploading__cancel:focus-visible {
+  outline: none;
+  border-radius: 6px;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blok-color-accent) 45%, transparent);
+}
+
+.blok-image-uploading__panel {
+  display: flex; align-items: center; gap: var(--blok-space-3);
+  padding: var(--blok-space-3);
+  border-top: 1px solid var(--blok-border-subtle);
+}
+
+.blok-image-uploading__tile {
+  flex-shrink: 0;
+  width: 38px; height: 38px;
+  display: grid; place-items: center;
+  color: var(--blok-text-secondary);
+  background: color-mix(in srgb, var(--blok-bg-primary) 70%, transparent);
+  border: 1px solid var(--blok-border-subtle);
+  border-radius: 9px;
+}
+.blok-image-uploading__tile svg { width: 18px; height: 18px; }
+
+.blok-image-uploading__content {
+  flex: 1; min-width: 0;
+  display: flex; flex-direction: column; gap: var(--blok-space-1-5);
+}
+
+.blok-image-uploading__sub {
+  display: flex; align-items: center; gap: var(--blok-space-1-5);
+  font-size: 11px;
+  color: var(--blok-text-tertiary);
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  font-variant-numeric: tabular-nums;
+}
+.blok-image-uploading__pct {
+  color: var(--blok-text-primary);
+  font-weight: 600;
+  min-width: 3ch;
+}
+.blok-image-uploading__sep {
+  color: var(--blok-text-tertiary);
+  opacity: 0.6;
+}
+
+.blok-image-uploading__bar {
+  height: 3px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--blok-bg-primary) 70%, transparent);
+  border: 1px solid var(--blok-border-subtle);
+  overflow: hidden;
+  position: relative;
+}
+.blok-image-uploading__bar-fill {
+  height: 100%;
+  background: var(--blok-color-accent);
+  border-radius: inherit;
+  transition: width 180ms linear;
+  position: relative;
+}
+.blok-image-uploading__bar-fill::after {
+  content: '';
+  position: absolute; inset: 0;
+  background: linear-gradient(90deg, transparent, var(--blok-overlay-shimmer), transparent);
+  animation: blok-image-shimmer 1.4s linear infinite;
+}
+
+@container (max-width: 420px) {
+  .blok-image-uploading__panel { flex-wrap: wrap; }
+}
+
+/* ----- Error state ----- */
+.blok-image-error {
+  padding: var(--blok-space-3);
+  background:
+    radial-gradient(60% 80% at 0% 0%, color-mix(in srgb, var(--blok-color-danger) 10%, transparent) 0%, transparent 60%),
+    radial-gradient(50% 70% at 100% 100%, color-mix(in srgb, var(--blok-color-danger) 7%, transparent) 0%, transparent 60%),
+    var(--blok-bg-secondary);
+  border: 1px solid color-mix(in srgb, var(--blok-color-danger) 30%, var(--blok-border-subtle));
+  border-radius: var(--blok-radius-lg);
+  display: flex; gap: var(--blok-space-3); align-items: center;
+  color: var(--blok-text-primary);
+  font-family: var(--blok-font-family, var(--blok-font-sans));
+}
+.blok-image-error__icon {
+  flex-shrink: 0;
+  width: 40px; height: 40px;
+  display: grid; place-items: center;
+  color: var(--blok-color-danger);
+  background:
+    linear-gradient(180deg,
+      color-mix(in srgb, var(--blok-color-danger) 14%, transparent) 0%,
+      color-mix(in srgb, var(--blok-color-danger) 6%, transparent) 100%),
+    var(--blok-bg-secondary);
+  border-radius: calc(var(--blok-radius-md) + 2px);
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--blok-color-danger) 28%, transparent),
+    inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent),
+    0 1px 2px color-mix(in srgb, var(--blok-color-danger) 12%, transparent);
+}
+.blok-image-error__icon svg { width: 22px; height: 22px; opacity: 0.92; }
+.blok-image-error__body {
+  flex: 1; min-width: 0;
+  display: flex; flex-direction: column; gap: 2px;
+  text-align: left;
+}
+.blok-image-error__title { font-size: 13px; font-weight: 600; letter-spacing: -0.005em; text-align: left; }
+.blok-image-error__msg   { font-size: 12.5px; color: var(--blok-text-secondary); text-align: left; line-height: 1.45; }
+.blok-image-error__actions { margin-left: auto; display: flex; gap: var(--blok-space-1-5); flex-shrink: 0; }
+.blok-image-error__btn {
+  appearance: none;
+  padding: var(--blok-space-1-5) var(--blok-space-3);
+  border-radius: var(--blok-radius-md);
+  border: 1px solid var(--blok-border-subtle);
+  background: var(--blok-bg-primary);
+  color: var(--blok-text-primary);
+  font-size: 12.5px;
+  font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
+  transition: background var(--blok-duration-base) ease, border-color var(--blok-duration-base) ease;
+}
+.blok-image-error__btn:hover {
+  background: var(--blok-bg-hover);
+  border-color: var(--blok-border-primary);
+}
+.blok-image-error__btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blok-color-accent) 40%, transparent);
+}
+.blok-image-error__btn:disabled {
+  cursor: default;
+  opacity: 0.55;
+}
+[data-blok-tool="image"][data-retrying="true"] .blok-image-error__btn[data-action="retry"] {
+  position: relative;
+  color: transparent;
+  opacity: 1;
+}
+[data-blok-tool="image"][data-retrying="true"] .blok-image-error__btn[data-action="retry"]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 2px solid color-mix(in srgb, var(--blok-text-primary) 35%, transparent);
+  border-top-color: var(--blok-text-primary);
+  animation: blok-image-retry-spin 0.65s linear infinite;
+}
+