Let a resource be expanded to edit it at full size

Like a block, a resource can now be lifted out of the canvas into a
panel at full size, with every field open, whatever the zoom - an init
script above all is unreadable in a card on a zoomed-out canvas. The
settings button still opens the fields in place for a quick look.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/app/shared/nodes/resource-node/resource-node.css

@@ -29,6 +29,53 @@
   width: 320px;
 }
 
+/*
+ * Expanded: lifted out of the canvas at full size, so the fields - an init script above all - can
+ * be read and edited whatever the zoom.
+ */
+.resource-card__focus-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 9990;
+  background: rgba(15, 23, 42, 0.36);
+  backdrop-filter: blur(10px) saturate(0.8);
+}
+
+.resource-card.resource-card--focus {
+  position: fixed;
+  inset: 0;
+  z-index: 9991;
+  width: 460px;
+  max-width: calc(100vw - 32px);
+  height: fit-content;
+  max-height: calc(100vh - 32px);
+  margin: auto;
+  padding: 18px 20px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.34);
+  cursor: default;
+}
+
+.resource-card--focus .resource-card__badge {
+  width: 46px;
+  height: 46px;
+  font-size: 23px;
+}
+
+.resource-card--focus .resource-card__name {
+  font-size: 17px;
+}
+
+.resource-card--focus .resource-card__type {
+  font-size: 13px;
+}
+
+/* Its handle stays on the canvas's business: out here there is nothing to link it to. */
+.resource-card--focus .resource-card__link {
+  visibility: hidden;
+}
+
 .resource-card--error {
   border-color: #fca5a5;
   border-left-color: #dc2626;

src/app/shared/nodes/resource-node/resource-node.html

@@ -4,8 +4,14 @@
   Attribution term under AGPL-3.0 section 7(b): see LICENSE-ADDENDUM.
 -->
 
+@if (focusOpen) {
+<div class="resource-card__focus-backdrop" (pointerdown)="$event.stopPropagation()" (click)="closeFocus($event)"></div>
+}
 <div class="resource-card"
-  [class.resource-card--open]="settingsOpen()"
+  [class.resource-card--open]="settingsOpen() || focusOpen"
+  [class.resource-card--focus]="focusOpen"
+  (pointerdown)="focusOpen && $event.stopPropagation()"
+  (click)="focusOpen && $event.stopPropagation()"
   [class.resource-card--error]="hasUpdateBlockError()"
   [class.resource-card--deleting]="deleteConfirmOpen">
   @if (isSchemaLoading) {
@@ -43,13 +49,21 @@
         <i class="bi bi-exclamation-circle-fill"></i>
       </span>
       }
+      @if (!focusOpen) {
       <button type="button" class="resource-card__icon-btn"
         [class.resource-card__icon-btn--active]="settingsOpen()"
         [title]="settingsOpen() ? 'Hide settings' : (isReadonly ? 'Show settings' : 'Edit settings')"
         (pointerdown)="$event.stopPropagation()" (click)="toggleSettings($event)">
         <i class="bi bi-gear"></i>
       </button>
-      @if (!isReadonly) {
+      }
+      <button type="button" class="resource-card__icon-btn"
+        [class.resource-card__icon-btn--active]="focusOpen"
+        [title]="focusOpen ? 'Close expanded resource' : 'Expand resource'"
+        (pointerdown)="$event.stopPropagation()" (click)="toggleFocus($event)">
+        <i class="bi" [class.bi-arrows-angle-expand]="!focusOpen" [class.bi-x-lg]="focusOpen"></i>
+      </button>
+      @if (!isReadonly && !focusOpen) {
       <button type="button" class="resource-card__icon-btn resource-card__icon-btn--danger" title="Delete"
         (pointerdown)="$event.stopPropagation()" (click)="confirmDelete($event)">
         <i class="bi bi-trash"></i>
@@ -66,7 +80,7 @@
   </div>
   }
 
-  @if (!settingsOpen()) {
+  @if (!settingsOpen() && !focusOpen) {
   @if (summary(); as parts) {
   @if (parts.length) {
   <div class="resource-card__summary">