iron-cms 0.16.2 → 0.17.1

data/app/assets/tailwind/iron/lexxy.css

@@ -27,9 +27,11 @@
 }
 
 @layer components {
-  /* Editor container */
+  /* Editor container — must establish a positioning context so lexxy's
+     absolutely-positioned children (language picker, table tools, delete
+     buttons) anchor to the editor instead of leaking to the document. */
   lexxy-editor {
-    @apply block w-full rounded-md;
+    @apply relative block w-full rounded-xl;
     @apply bg-white dark:bg-white/5;
     @apply border border-stone-950/10 dark:border-white/10;
     @apply focus-visible:outline-2 focus-visible:outline-sky-600 dark:focus-visible:outline-sky-500;
@@ -40,7 +42,7 @@
     @apply flex flex-wrap items-center gap-1 p-2;
     @apply border-b border-stone-950/10 dark:border-white/10;
     @apply bg-stone-50 dark:bg-white/5;
-    @apply rounded-t-md;
+    @apply rounded-t-xl;
   }
 
   /* Toolbar button groups */
@@ -78,15 +80,15 @@
     fill: currentColor;
   }
 
-  /* Editor content area */
-  lexxy-editor [contenteditable] {
+  /* Editor content area — only the main editable surface, not decorator children */
+  lexxy-editor [contenteditable="true"] {
     @apply block w-full min-h-48 p-4;
     @apply text-base/6 text-stone-950 dark:text-white;
     @apply outline-none;
     @apply sm:text-sm/6;
   }
 
-  lexxy-editor [contenteditable]:empty::before {
+  lexxy-editor [contenteditable="true"]:empty::before {
     content: attr(data-placeholder);
     @apply text-stone-400 dark:text-stone-500;
     @apply pointer-events-none;
@@ -126,12 +128,15 @@
     @apply rounded-ss-none;
   }
 
-  .lexxy-editor__toolbar-dropdown:is([open]) .lexxy-editor__toolbar-button {
+  /* Active state for the dropdown's *trigger* (the <summary> itself, which carries
+     the toolbar-button class). Scope to direct summary so it doesn't bleed into
+     content buttons like highlight swatches that share the same class. */
+  .lexxy-editor__toolbar-dropdown:is([open]) > summary.lexxy-editor__toolbar-button {
     @apply bg-sky-100 dark:bg-sky-500/20;
     @apply rounded-ee-none rounded-es-none;
   }
 
-  .lexxy-editor__toolbar-dropdown:is([open]) .lexxy-editor__toolbar-button:hover {
+  .lexxy-editor__toolbar-dropdown:is([open]) > summary.lexxy-editor__toolbar-button:hover {
     @apply bg-sky-100 dark:bg-sky-500/20;
   }
 
@@ -145,84 +150,138 @@
     @apply end-(--dropdown-padding) start-(--dropdown-padding);
   }
 
-  /* Link dropdown */
+  /* Vertical dropdown menu (used by the text-formatting dropdown) — items show
+     an icon followed by a text label; needs to override toolbar's h-8 w-8 rule. */
+  .lexxy-editor__toolbar-dropdown-list {
+    @apply absolute z-10;
+    @apply flex flex-col p-1;
+    @apply bg-white dark:bg-stone-800;
+    @apply border-2 border-sky-200 dark:border-sky-500/30;
+    @apply rounded-md rounded-ss-none;
+    @apply text-stone-900 dark:text-white;
+    @apply top-8 start-0 min-w-[12rem];
+  }
+
+  .lexxy-editor__toolbar-dropdown-list button {
+    @apply w-auto h-auto justify-start;
+    @apply flex items-center gap-2 px-2 py-1.5 rounded;
+    @apply text-sm text-stone-700 dark:text-stone-200;
+    @apply text-start whitespace-nowrap;
+    @apply hover:bg-stone-100 dark:hover:bg-white/10;
+  }
+
+  .lexxy-editor__toolbar-dropdown-list button[aria-pressed="true"] {
+    @apply bg-sky-100 text-sky-900;
+    @apply dark:bg-sky-500/20 dark:text-sky-100;
+  }
+
+  .lexxy-editor__toolbar-dropdown-list button svg {
+    @apply size-4 flex-none;
+    fill: currentColor;
+  }
+
+  /* Lexxy emits explicit <div class="lexxy-editor__toolbar-separator"> elements
+     between groups inside the dropdown — relying on those means no extra
+     border-b for `group-end` (which would double up the divider). */
+  .lexxy-editor__toolbar-dropdown-list .lexxy-editor__toolbar-separator {
+    @apply my-1 h-px w-full;
+    @apply bg-stone-200 dark:bg-white/10;
+  }
+
+  /* Link dropdown — URL input with Link / Unlink action buttons */
   lexxy-link-dropdown {
-    @apply flex-1;
+    @apply gap-2 min-w-[22rem];
   }
 
-  lexxy-link-dropdown > * {
-    @apply flex-1;
+  [overflowing] lexxy-link-dropdown {
+    @apply min-w-0 flex-col;
   }
 
-  lexxy-link-dropdown .lexxy-editor__toolbar-dropdown-actions {
-    @apply flex flex-1 gap-2 mt-2;
-    @apply text-sm;
+  [overflowing] lexxy-link-dropdown .lexxy-editor__toolbar-dropdown-actions {
+    @apply mt-2;
   }
 
   lexxy-link-dropdown input[type="url"] {
-    @apply w-full rounded-md px-2;
+    @apply flex-1 min-w-0;
+    @apply h-8 px-2 rounded-md;
     @apply border border-stone-300 dark:border-white/10;
     @apply bg-white dark:bg-stone-900;
-    @apply text-stone-900 dark:text-white;
+    @apply text-sm leading-none text-stone-900 dark:text-white;
     @apply placeholder:text-stone-400 dark:placeholder:text-stone-500;
-    @apply focus-visible:outline-2 focus-visible:outline-sky-600 dark:focus-visible:outline-sky-500;
-    @apply leading-6 min-w-[40ch] box-border;
+    @apply outline-none;
+    @apply focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-sky-600 focus-visible:border-transparent dark:focus-visible:outline-sky-500;
   }
 
-  [overflowing] lexxy-link-dropdown input[type="url"] {
-    @apply min-w-0;
+  lexxy-link-dropdown .lexxy-editor__toolbar-dropdown-actions {
+    @apply flex flex-none items-center gap-2;
   }
 
+  /* Override toolbar's h-8 w-8 — these buttons need to fit their text label */
   lexxy-link-dropdown .lexxy-editor__toolbar-dropdown-actions button {
-    @apply w-full justify-center;
-    @apply button-secondary button-sm;
+    @apply w-auto h-8 px-3;
+    @apply text-sm font-medium leading-none;
+    @apply rounded-md;
   }
 
-  /* Highlight/Color dropdown */
-  lexxy-highlight-dropdown {
-    @apply flex flex-col;
+  lexxy-link-dropdown .lexxy-editor__toolbar-dropdown-actions button[value="link"] {
+    @apply bg-sky-600 text-white;
+    @apply hover:bg-sky-700;
   }
 
-  lexxy-highlight-dropdown [data-button-group] {
-    @apply flex flex-row gap-(--dropdown-gap);
-    @apply justify-start;
+  lexxy-link-dropdown .lexxy-editor__toolbar-dropdown-actions button[value="unlink"] {
+    @apply bg-white dark:bg-white/10;
+    @apply text-stone-700 dark:text-stone-200;
+    @apply ring-1 ring-inset ring-stone-300 dark:ring-white/15;
+    @apply hover:bg-stone-50 dark:hover:bg-white/15;
   }
 
-  lexxy-highlight-dropdown [data-button-group] button {
+  /* Highlight/Color dropdown
+     Lexxy 0.9.9 emits 9 text-color buttons followed by 9 bg-color buttons.
+     With `grid-auto-flow: column` and 2 rows, source order fills col-by-col so
+     each column shows a matching color/bg pair (row 1 = color, row 2 = bg). */
+  lexxy-highlight-dropdown {
     --button-size: --spacing(8);
-    @apply aspect-square;
-    @apply w-(--button-size) min-w-(--button-size) max-w-(--button-size);
+    @apply flex flex-col gap-2;
   }
 
-  lexxy-highlight-dropdown [data-button-group] button::after {
-    content: "Aa";
-    @apply absolute inset-0;
-    @apply self-center;
-    @apply inline-block;
+  lexxy-highlight-dropdown .lexxy-highlight-colors {
+    display: grid;
+    grid-template-columns: repeat(var(--max-colors, 9), var(--button-size));
+    grid-template-rows: repeat(2, var(--button-size));
+    grid-auto-flow: column;
+    @apply gap-1;
+  }
+
+  lexxy-highlight-dropdown .lexxy-highlight-button {
+    @apply relative aspect-square size-8 rounded-md p-0;
+    @apply ring-1 ring-inset ring-stone-300 dark:ring-white/15;
+    @apply hover:opacity-80;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   }
 
-  lexxy-highlight-dropdown button {
-    --button-size: --spacing(8);
-    @apply flex-1 relative;
-    @apply text-stone-900 dark:text-white;
-    @apply min-h-(--button-size);
+  lexxy-highlight-dropdown .lexxy-highlight-button::after {
+    content: "Aa";
+    @apply absolute inset-0 flex items-center justify-center;
+    @apply font-semibold text-sm leading-none;
   }
 
-  lexxy-highlight-dropdown button:hover {
-    @apply opacity-80;
+  /* Background-color button: letter in default ink color over the swatch */
+  lexxy-highlight-dropdown .lexxy-highlight-button[data-style="background-color"]::after {
+    @apply text-stone-900 dark:text-white;
   }
 
-  lexxy-highlight-dropdown button[aria-pressed="true"] {
-    @apply ring-2 ring-inset ring-current;
+  /* Selected state — transparent bg with a thick inset ring in the swatch's color */
+  lexxy-highlight-dropdown .lexxy-highlight-button[aria-pressed="true"] {
+    background-color: transparent;
+    box-shadow: inset 0 0 0 2px currentColor;
   }
 
-  lexxy-highlight-dropdown button[aria-pressed="true"]::after {
+  lexxy-highlight-dropdown .lexxy-highlight-button[aria-pressed="true"]::after {
     content: "✓";
   }
 
   lexxy-highlight-dropdown .lexxy-editor__toolbar-dropdown-reset {
-    @apply mt-2 w-full;
+    @apply mt-2 w-full whitespace-nowrap;
     @apply button-secondary button-sm;
   }
 
@@ -230,23 +289,11 @@
     @apply hidden;
   }
 
-  /* Responsive highlight dropdown */
+  /* Responsive highlight dropdown — overflow menu is narrower */
   [overflowing] lexxy-highlight-dropdown {
     @apply w-fit;
   }
 
-  [overflowing] lexxy-highlight-dropdown [data-button-group] {
-    @apply flex-wrap;
-  }
-
-  [overflowing] lexxy-highlight-dropdown [data-button-group] button {
-    --button-size: --spacing(6);
-  }
-
-  [overflowing] lexxy-highlight-dropdown [data-button-group] button::after {
-    @apply text-sm;
-  }
-
   /* Attachment upload progress */
   lexxy-editor .attachment__progress {
     @apply absolute z-10;
@@ -317,6 +364,265 @@
   lexxy-editor .attachment.selected img {
     @apply ring-2 ring-sky-500;
   }
+
+  /* Block-level node selection (hr, attachments, tables, galleries) */
+  lexxy-editor .node--selected {
+    @apply outline-2 outline-offset-2 outline-sky-500;
+    @apply rounded;
+  }
+
+  /* Floating controls (delete button, table tools, etc.) */
+  .lexxy-floating-controls {
+    @apply absolute z-10;
+    @apply text-white text-sm leading-none;
+  }
+
+  .lexxy-floating-controls .lexxy-floating-controls__group {
+    @apply flex items-center gap-0.5 p-0.5 rounded-md;
+    @apply bg-stone-900/90 dark:bg-stone-700;
+    @apply shadow-md;
+  }
+
+  .lexxy-floating-controls button,
+  .lexxy-floating-controls summary {
+    @apply inline-flex items-center justify-center;
+    @apply h-7 min-w-7 px-1 rounded;
+    @apply text-white hover:bg-white/15;
+    @apply focus-visible:outline-2 focus-visible:outline-sky-400;
+    @apply select-none cursor-pointer;
+  }
+
+  .lexxy-floating-controls svg {
+    @apply size-4;
+    fill: currentColor;
+  }
+
+  lexxy-node-delete-button .lexxy-node-delete:hover {
+    @apply bg-red-600;
+  }
+
+  /* Tables in the editor */
+  lexxy-editor table {
+    @apply w-full !my-0 border-collapse text-sm;
+  }
+
+  lexxy-editor th,
+  lexxy-editor td {
+    @apply relative border border-stone-300 dark:border-stone-600;
+    @apply px-3 py-2 text-start align-top;
+    @apply min-w-[5ch];
+    transition: all 0.1s ease-in-out;
+  }
+
+  /* Each cell carries a positioned ::after used as an overlay for focus, row /
+     column insertion lines, and other transient visualizations. Inset by -1px
+     so the box-shadow can paint across the cell border. */
+  lexxy-editor th::after,
+  lexxy-editor td::after {
+    content: "";
+    @apply absolute pointer-events-none block;
+    inset: -1px;
+    z-index: 2;
+    box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent inset;
+    transition: box-shadow 0.1s ease-in-out;
+  }
+
+  lexxy-editor th,
+  lexxy-editor .lexxy-content__table-cell--header {
+    @apply bg-stone-100 dark:bg-white/10 font-semibold;
+    @apply text-stone-950 dark:text-white;
+  }
+
+  lexxy-editor td.lexxy-content__table-cell--selected,
+  lexxy-editor th.lexxy-content__table-cell--selected {
+    @apply bg-sky-100/60 dark:bg-sky-500/15;
+  }
+
+  /* Focused cell — 2px inset blue border via the shared ::after */
+  lexxy-editor td.lexxy-content__table-cell--focus::after,
+  lexxy-editor th.lexxy-content__table-cell--focus::after {
+    box-shadow: 0 0 0 0 transparent, 0 0 0 2px var(--color-sky-500) inset;
+  }
+
+  /* Variables for the row/column insertion indicator */
+  lexxy-editor table {
+    --lexxy-cell-add-size: 2px;
+    --lexxy-cell-add-color: var(--color-sky-500);
+  }
+
+  /* Insertion indicator — a thick line straddling the cell edge where the new
+     row or column will appear. Built from two stacked box-shadows: one outside
+     the cell and one inset, so the line spans the 1px border. */
+  lexxy-editor td.lexxy-content__table-cell--highlight[data-action="insert"][data-child-type="row"][data-direction="after"]::after,
+  lexxy-editor th.lexxy-content__table-cell--highlight[data-action="insert"][data-child-type="row"][data-direction="after"]::after {
+    box-shadow:
+      0 var(--lexxy-cell-add-size) 0 0 var(--lexxy-cell-add-color),
+      0 calc(-1 * var(--lexxy-cell-add-size) - 1px) 0 0 var(--lexxy-cell-add-color) inset;
+  }
+
+  lexxy-editor td.lexxy-content__table-cell--highlight[data-action="insert"][data-child-type="row"][data-direction="before"]::after,
+  lexxy-editor th.lexxy-content__table-cell--highlight[data-action="insert"][data-child-type="row"][data-direction="before"]::after {
+    box-shadow:
+      0 calc(-1 * var(--lexxy-cell-add-size) - 1px) 0 0 var(--lexxy-cell-add-color),
+      0 var(--lexxy-cell-add-size) 0 0 var(--lexxy-cell-add-color) inset;
+  }
+
+  lexxy-editor td.lexxy-content__table-cell--highlight[data-action="insert"][data-child-type="column"][data-direction="after"]::after,
+  lexxy-editor th.lexxy-content__table-cell--highlight[data-action="insert"][data-child-type="column"][data-direction="after"]::after {
+    box-shadow:
+      var(--lexxy-cell-add-size) 0 0 0 var(--lexxy-cell-add-color),
+      calc(-1 * var(--lexxy-cell-add-size) - 1px) 0 0 0 var(--lexxy-cell-add-color) inset;
+  }
+
+  lexxy-editor td.lexxy-content__table-cell--highlight[data-action="insert"][data-child-type="column"][data-direction="before"]::after,
+  lexxy-editor th.lexxy-content__table-cell--highlight[data-action="insert"][data-child-type="column"][data-direction="before"]::after {
+    box-shadow:
+      calc(-1 * var(--lexxy-cell-add-size) - 1px) 0 0 0 var(--lexxy-cell-add-color),
+      var(--lexxy-cell-add-size) 0 0 0 var(--lexxy-cell-add-color) inset;
+  }
+
+  /* Toggle (style change) — subtle blue tint on the affected row/column */
+  lexxy-editor td.lexxy-content__table-cell--highlight[data-action="toggle"],
+  lexxy-editor th.lexxy-content__table-cell--highlight[data-action="toggle"],
+  lexxy-editor tr.lexxy-content__table-cell--highlight[data-action="toggle"] th,
+  lexxy-editor tr.lexxy-content__table-cell--highlight[data-action="toggle"] td {
+    @apply bg-sky-500/10;
+  }
+
+  /* Delete — red tint on the row/column/table about to be removed */
+  lexxy-editor td.lexxy-content__table-cell--highlight[data-action="delete"],
+  lexxy-editor th.lexxy-content__table-cell--highlight[data-action="delete"],
+  lexxy-editor tr.lexxy-content__table-cell--highlight[data-action="delete"] th,
+  lexxy-editor tr.lexxy-content__table-cell--highlight[data-action="delete"] td {
+    @apply bg-red-500/10 text-red-600 dark:text-red-400;
+  }
+
+  .lexxy-content__table-wrapper {
+    @apply overflow-x-auto my-4;
+  }
+
+  /* Floating table tools — three chip-style groups (row, column, delete) laid
+     out horizontally. Group chrome (background, rounding, shadow) comes from
+     the shared .lexxy-floating-controls__group rule above. Lexxy positions
+     the element with `left` at the table's horizontal midpoint and `top` at
+     the table's top edge; translate it back by half its width and above its
+     own height so it sits centered just above the table instead of overlaying
+     the first row. */
+  lexxy-table-tools {
+    @apply absolute z-10 flex flex-row items-start gap-1;
+    @apply text-white text-sm leading-none;
+    @apply -translate-x-1/2 -translate-y-[calc(100%+4px)];
+  }
+
+  /* Icon-only buttons are square; summary stays auto-width so its count text
+     ("3 rows") can render inline. Apply only to direct children of the row /
+     column / delete groups so menu items inside the dropdown can grow. */
+  lexxy-table-tools .lexxy-table-control > .lexxy-table-control__button {
+    @apply w-7 font-bold;
+  }
+
+  /* Hide redundant text labels — aria-label keeps the buttons accessible. */
+  lexxy-table-tools .lexxy-table-control__button > span {
+    @apply hidden;
+  }
+
+  /* Summary holds the visible row/column count; suppress the default marker */
+  lexxy-table-tools summary {
+    list-style: none;
+    @apply font-normal whitespace-nowrap cursor-pointer;
+  }
+
+  lexxy-table-tools summary::-webkit-details-marker {
+    display: none;
+  }
+
+  lexxy-table-tools summary::marker {
+    content: "";
+  }
+
+  /* More-menu dropdown anchors directly under its summary */
+  lexxy-table-tools .lexxy-table-control__more-menu {
+    @apply relative;
+  }
+
+  lexxy-table-tools .lexxy-table-control__more-menu-details {
+    @apply absolute z-10 top-full start-1/2 mt-1 -translate-x-1/2 min-w-max;
+    @apply flex flex-col items-stretch gap-0.5 p-1 rounded-md;
+    @apply bg-stone-900 dark:bg-stone-700 shadow-md;
+  }
+
+  /* Inside the dropdown, buttons are full-width menu rows with icon + label */
+  lexxy-table-tools .lexxy-table-control__more-menu-details .lexxy-table-control__button {
+    @apply w-full h-auto justify-start gap-2 px-2 py-1.5;
+    @apply font-normal whitespace-nowrap;
+  }
+
+  lexxy-table-tools .lexxy-table-control__more-menu-details .lexxy-table-control__button > span {
+    @apply inline-block;
+  }
+
+  /* Delete-table — destructive hover state, with a confirmation tooltip
+     floating above the icon. */
+  lexxy-table-tools .lexxy-table-control__button--delete-table {
+    @apply relative;
+  }
+
+  lexxy-table-tools .lexxy-table-control__button--delete-table:hover {
+    @apply bg-red-600;
+  }
+
+  lexxy-table-tools .lexxy-table-control__button--delete-table > span {
+    @apply absolute z-20 bottom-full left-1/2 mb-1 -translate-x-1/2;
+    @apply inline-flex items-center h-7 px-2 rounded-md;
+    @apply bg-stone-900 dark:bg-stone-700 whitespace-nowrap;
+    @apply opacity-0 pointer-events-none transition-opacity;
+  }
+
+  lexxy-table-tools .lexxy-table-control__button--delete-table:hover > span {
+    @apply opacity-100;
+  }
+
+  /* Drag/drop indicators — vertical line between gallery attachments,
+     horizontal line above/below blocks and list items. */
+  [class*="lexxy-drop-target--"] {
+    @apply relative;
+  }
+
+  .lexxy-drop-target--gallery-before::before,
+  .lexxy-drop-target--gallery-after::after {
+    content: "";
+    @apply absolute inset-y-0 w-[3px] rounded-sm;
+    @apply bg-sky-600 dark:bg-sky-500;
+    @apply pointer-events-none;
+  }
+
+  .lexxy-drop-target--gallery-before::before {
+    inset-inline-start: -4px;
+  }
+
+  .lexxy-drop-target--gallery-after::after {
+    inset-inline-end: -4px;
+  }
+
+  .lexxy-drop-target--block-before::before,
+  .lexxy-drop-target--block-after::after,
+  .lexxy-drop-target--list-before::before,
+  .lexxy-drop-target--list-after::after {
+    content: "";
+    @apply absolute inset-x-0 h-[3px] rounded-sm;
+    @apply bg-sky-600 dark:bg-sky-500;
+    @apply pointer-events-none;
+  }
+
+  .lexxy-drop-target--block-before::before,
+  .lexxy-drop-target--list-before::before {
+    inset-block-start: -2px;
+  }
+
+  .lexxy-drop-target--block-after::after,
+  .lexxy-drop-target--list-after::after {
+    inset-block-end: -2px;
+  }
 }
 
 /* Rendered content styles */
@@ -419,6 +725,33 @@
     @apply my-4;
   }
 
+  /* Tables */
+  .lexxy-content .lexxy-content__table-wrapper {
+    @apply my-4 overflow-x-auto;
+  }
+
+  .lexxy-content table {
+    @apply w-full border-collapse text-sm;
+    @apply my-4;
+  }
+
+  .lexxy-content th,
+  .lexxy-content td {
+    @apply border border-stone-300 dark:border-stone-600;
+    @apply px-3 py-2 text-start align-top;
+  }
+
+  .lexxy-content th,
+  .lexxy-content .lexxy-content__table-cell--header {
+    @apply bg-stone-100 dark:bg-white/10 font-semibold;
+    @apply text-stone-950 dark:text-white;
+  }
+
+  .lexxy-content th *:last-child,
+  .lexxy-content td *:last-child {
+    @apply mb-0;
+  }
+
   /* Attachment rendering in content */
   .lexxy-content .attachment {
     @apply inline-block max-w-full my-4;
@@ -478,3 +811,85 @@
     @apply p-0 max-w-full my-0;
   }
 }
+
+/*
+ * Editor overrides that must beat Tailwind Typography (prose) rules.
+ * The prose plugin emits its `figure`, `hr`, `table`, `code`, etc. selectors
+ * in the utilities layer with `:where()` (zero specificity), so layer-order
+ * is what matters: keep these in @layer utilities so they win.
+ */
+@layer utilities {
+  /* Horizontal divider — lexxy wraps the <hr> in <figure class="horizontal-divider"> */
+  lexxy-editor figure.horizontal-divider {
+    @apply relative m-0 px-0 py-3 text-center;
+  }
+
+  lexxy-editor figure.horizontal-divider hr {
+    @apply inline-block h-px w-1/5 m-0 p-0 border-0;
+    @apply bg-stone-300 dark:bg-stone-600;
+  }
+
+  /* Per-node delete button (appears on hover or selection) */
+  lexxy-node-delete-button {
+    @apply absolute z-10 opacity-0 pointer-events-none transition-opacity;
+    inset-block-start: 0.25rem;
+    inset-inline-end: 0.25rem;
+    inset-inline-start: auto;
+  }
+
+  lexxy-editor figure:hover > lexxy-node-delete-button,
+  lexxy-editor .attachment:hover > lexxy-node-delete-button,
+  lexxy-editor .node--selected > lexxy-node-delete-button,
+  lexxy-editor .node--selected lexxy-node-delete-button {
+    @apply opacity-100 pointer-events-auto;
+  }
+
+  /* Tailwind Typography wraps inline <code> with backtick pseudo-elements; suppress them */
+  lexxy-editor.prose code::before,
+  lexxy-editor.prose code::after,
+  .lexxy-content code::before,
+  .lexxy-content code::after {
+    content: none;
+  }
+
+  /* Inline code in the editor */
+  lexxy-editor code:not([data-language]) {
+    @apply px-1.5 py-0.5 rounded;
+    @apply bg-stone-100 dark:bg-white/10;
+    @apply text-sm font-mono;
+    @apply text-pink-600 dark:text-pink-400;
+  }
+
+  /* Code blocks (lexxy renders them as <code data-language="..."> with display:inline by default;
+     we promote to a block container so the language picker has somewhere to anchor.
+     Extra top padding leaves room for the picker chip in the top-right corner. */
+  lexxy-editor code[data-language] {
+    @apply relative block my-4 px-4 pb-4 pt-10 rounded-lg overflow-x-auto;
+    @apply bg-stone-100 dark:bg-stone-900;
+    @apply text-sm font-mono leading-relaxed;
+    @apply text-stone-900 dark:text-stone-100;
+    @apply whitespace-pre;
+  }
+
+  /* Language picker — replace the native <select> with a styled chip in the
+     code block's corner. Lexxy's JS sets inline top/right to anchor it to the
+     active code block; we add margins so it sits slightly inset from the edge. */
+  lexxy-code-language-picker select {
+    @apply appearance-none cursor-pointer;
+    @apply bg-white dark:bg-stone-800;
+    @apply border border-stone-300 dark:border-white/15;
+    @apply rounded-md;
+    @apply text-stone-700 dark:text-stone-200;
+    @apply text-xs font-medium leading-none;
+    @apply pl-2 pr-6 py-1;
+    @apply mt-2 mr-2;
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
+    background-repeat: no-repeat;
+    background-position: right 0.5rem center;
+    background-size: 0.7rem;
+  }
+
+  lexxy-code-language-picker select:focus-visible {
+    @apply outline-2 outline-sky-600 dark:outline-sky-500;
+  }
+}

data/app/models/iron/importer.rb

@@ -31,7 +31,7 @@ module Iron
 
           path = File.join(dir, entry.name.sub("files/", ""))
           FileUtils.mkdir_p(File.dirname(path))
-          entry.extract(path)
+          File.binwrite(path, entry.get_input_stream.read)
         end
         dir
       end

data/lib/iron/version.rb

@@ -1,3 +1,3 @@
 module Iron
-  VERSION = "0.16.2"
+  VERSION = "0.17.1"
 end