updated: app/ui-tarot-card.js

app/styles.css

@@ -1666,6 +1666,10 @@
       overflow: hidden;
     }
 
+    .tarot-frame-card-picker.is-browse-mode {
+      grid-template-rows: auto auto minmax(0, 1fr);
+    }
+
     .tarot-frame-card-picker[hidden] {
       display: none !important;
     }
@@ -1677,6 +1681,66 @@
       gap: 12px;
     }
 
+    .tarot-frame-card-insert-menu {
+      position: fixed;
+      z-index: 41;
+      width: min(240px, calc(100vw - 24px));
+      display: grid;
+      gap: 6px;
+      padding: 8px;
+      border: 1px solid rgba(129, 140, 248, 0.3);
+      border-radius: 16px;
+      background:
+        radial-gradient(circle at top, rgba(99, 102, 241, 0.18), transparent 36%),
+        linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98));
+      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
+    }
+
+    .tarot-frame-card-insert-menu[hidden] {
+      display: none !important;
+    }
+
+    .tarot-frame-card-insert-menu-item {
+      padding: 11px 12px;
+      border: 1px solid rgba(99, 102, 241, 0.22);
+      border-radius: 12px;
+      background: rgba(30, 41, 59, 0.58);
+      color: #e2e8f0;
+      text-align: left;
+      font-size: 13px;
+      font-weight: 700;
+      cursor: pointer;
+    }
+
+    .tarot-frame-card-insert-menu-item:hover,
+    .tarot-frame-card-insert-menu-item:focus-visible {
+      border-color: rgba(165, 180, 252, 0.9);
+      background: rgba(49, 46, 129, 0.34);
+      color: #f8fafc;
+    }
+
+    .tarot-frame-card-custom-editor {
+      position: fixed;
+      z-index: 42;
+      width: min(420px, calc(100vw - 24px));
+      max-height: min(78vh, 720px);
+      display: grid;
+      grid-template-rows: auto minmax(0, 1fr);
+      gap: 12px;
+      padding: 14px;
+      border: 1px solid rgba(129, 140, 248, 0.3);
+      border-radius: 20px;
+      background:
+        radial-gradient(circle at top, rgba(99, 102, 241, 0.18), transparent 36%),
+        linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98));
+      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
+      overflow: hidden;
+    }
+
+    .tarot-frame-card-custom-editor[hidden] {
+      display: none !important;
+    }
+
     .tarot-frame-card-picker-title {
       color: #f8fafc;
       font-size: 15px;
@@ -1776,6 +1840,19 @@
       color: #f8fafc;
     }
 
+    .tarot-frame-card-picker-option.is-custom-action {
+      border-style: dashed;
+      border-color: rgba(125, 211, 252, 0.38);
+      background:
+        linear-gradient(180deg, rgba(14, 116, 144, 0.18), rgba(15, 23, 42, 0.78));
+    }
+
+    .tarot-frame-card-picker-option.is-custom-action:hover {
+      border-color: rgba(103, 232, 249, 0.82);
+      background:
+        linear-gradient(180deg, rgba(8, 145, 178, 0.28), rgba(15, 23, 42, 0.9));
+    }
+
     .tarot-frame-card-picker-option strong {
       font-size: 12px;
       line-height: 1.35;
@@ -1797,6 +1874,179 @@
       background: rgba(15, 23, 42, 0.24);
     }
 
+    .tarot-frame-card-picker-editor {
+      display: grid;
+      align-content: start;
+      gap: 12px;
+      min-height: 0;
+      overflow: auto;
+      padding-right: 2px;
+    }
+
+    .tarot-frame-card-picker-editor-heading {
+      display: grid;
+      gap: 4px;
+      padding: 12px;
+      border: 1px solid rgba(125, 211, 252, 0.22);
+      border-radius: 16px;
+      background: linear-gradient(180deg, rgba(8, 145, 178, 0.16), rgba(15, 23, 42, 0.64));
+      color: #dbeafe;
+    }
+
+    .tarot-frame-card-picker-editor-heading strong {
+      font-size: 13px;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+    }
+
+    .tarot-frame-card-picker-editor-heading span {
+      color: #bae6fd;
+      font-size: 12px;
+      line-height: 1.35;
+    }
+
+    .tarot-frame-card-picker-editor-field {
+      display: grid;
+      gap: 6px;
+    }
+
+    .tarot-frame-card-picker-editor-field span,
+    .tarot-frame-card-picker-editor-preview-label {
+      color: #cbd5e1;
+      font-size: 11px;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+
+    .tarot-frame-card-picker-editor-field input[type="text"],
+    .tarot-frame-card-picker-editor-field textarea,
+    .tarot-frame-card-picker-editor-field input[type="file"] {
+      width: 100%;
+      padding: 10px 12px;
+      border: 1px solid rgba(129, 140, 248, 0.24);
+      border-radius: 12px;
+      background: rgba(15, 23, 42, 0.84);
+      color: #f8fafc;
+      font-size: 13px;
+      box-sizing: border-box;
+    }
+
+    .tarot-frame-card-picker-editor-field textarea {
+      min-height: 84px;
+      resize: vertical;
+    }
+
+    .tarot-frame-card-picker-editor-field input[type="color"] {
+      width: 100%;
+      min-height: 46px;
+      padding: 6px;
+      border: 1px solid rgba(129, 140, 248, 0.24);
+      border-radius: 12px;
+      background: rgba(15, 23, 42, 0.84);
+      box-sizing: border-box;
+      cursor: pointer;
+    }
+
+    .tarot-frame-card-picker-editor-image-meta {
+      color: #94a3b8;
+      font-size: 11px;
+      line-height: 1.35;
+    }
+
+    .tarot-frame-card-picker-editor-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+      gap: 10px;
+    }
+
+    .tarot-frame-card-picker-editor-inline-actions,
+    .tarot-frame-card-picker-editor-actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+    .tarot-frame-card-picker-editor-clear,
+    .tarot-frame-card-picker-editor-cancel,
+    .tarot-frame-card-picker-editor-save,
+    .tarot-frame-card-picker-editor-remove {
+      padding: 9px 12px;
+      border-radius: 12px;
+      font-size: 12px;
+      font-weight: 700;
+      cursor: pointer;
+    }
+
+    .tarot-frame-card-picker-editor-clear,
+    .tarot-frame-card-picker-editor-cancel {
+      border: 1px solid rgba(148, 163, 184, 0.28);
+      background: rgba(15, 23, 42, 0.78);
+      color: #e2e8f0;
+    }
+
+    .tarot-frame-card-picker-editor-save {
+      border: 1px solid rgba(34, 197, 94, 0.28);
+      background: linear-gradient(180deg, rgba(21, 128, 61, 0.92), rgba(20, 83, 45, 0.96));
+      color: #f0fdf4;
+    }
+
+    .tarot-frame-card-picker-editor-save:disabled,
+    .tarot-frame-card-picker-editor-clear:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .tarot-frame-card-picker-editor-remove {
+      margin-left: auto;
+      border: 1px solid rgba(248, 113, 113, 0.28);
+      background: linear-gradient(180deg, rgba(153, 27, 27, 0.92), rgba(69, 10, 10, 0.96));
+      color: #fef2f2;
+    }
+
+    .tarot-frame-card-picker-editor-preview-wrap {
+      display: grid;
+      gap: 8px;
+      padding: 12px;
+      border: 1px solid rgba(71, 85, 105, 0.48);
+      border-radius: 16px;
+      background: rgba(15, 23, 42, 0.42);
+    }
+
+    .tarot-frame-card-picker-editor-preview {
+      display: grid;
+      place-items: center;
+      min-height: 190px;
+      padding: 8px;
+      border-radius: 16px;
+      background:
+        radial-gradient(circle at top, rgba(99, 102, 241, 0.16), transparent 44%),
+        linear-gradient(180deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.82));
+    }
+
+    .tarot-frame-card-picker-editor-preview .tarot-frame-card-text-face {
+      width: min(180px, 100%);
+      aspect-ratio: 5 / 7;
+      border-radius: 18px;
+      overflow: hidden;
+      border: 1px solid rgba(148, 163, 184, 0.24);
+      box-shadow: 0 18px 36px rgba(0, 0, 0, 0.3);
+    }
+
+    .tarot-frame-card-picker-editor-empty {
+      display: grid;
+      place-items: center;
+      min-height: 160px;
+      padding: 16px;
+      border: 1px dashed rgba(125, 211, 252, 0.28);
+      border-radius: 16px;
+      color: #cbd5e1;
+      font-size: 12px;
+      line-height: 1.45;
+      text-align: center;
+      background: rgba(15, 23, 42, 0.36);
+    }
+
     .tarot-frame-slot.is-drop-target {
       box-shadow: 0 0 0 2px #f59e0b, 0 0 0 6px rgba(245, 158, 11, 0.18);
       border-radius: 8px;
@@ -1921,6 +2171,59 @@
       padding: 5px 4px;
     }
 
+    .tarot-frame-card-text-face.is-custom-label {
+      border: 1px dashed rgba(147, 197, 253, 0.48);
+      background:
+        radial-gradient(circle at top, rgba(125, 211, 252, 0.16), transparent 58%),
+        linear-gradient(180deg, rgba(22, 78, 99, 0.52), rgba(15, 23, 42, 0.96));
+      color: #f8fafc;
+    }
+
+    .tarot-frame-card-text-face.is-custom-label.is-custom-visual {
+      border-style: solid;
+      border-color: rgba(186, 230, 253, 0.72);
+      text-shadow: 0 2px 10px rgba(15, 23, 42, 0.88);
+    }
+
+    .tarot-frame-card-text-face.is-custom-label.is-custom-visual:not(.has-custom-image) {
+      background-image: none;
+    }
+
+    .tarot-frame-card-text-face.is-custom-label.is-custom-visual-only {
+      border-style: solid;
+      border-color: rgba(186, 230, 253, 0.52);
+    }
+
+    .tarot-frame-card-text-face.is-custom-label.is-custom-blank {
+      gap: 0;
+      padding: 0;
+    }
+
+    .tarot-frame-card-text-face.is-custom-label.is-custom-hero .tarot-frame-card-text-primary {
+      font-size: clamp(15px, 1.45vw, 24px);
+      line-height: 1;
+      letter-spacing: 0.01em;
+    }
+
+    .tarot-frame-card-text-face.is-custom-label.is-custom-short .tarot-frame-card-text-primary {
+      font-size: clamp(12px, 1.1vw, 18px);
+      line-height: 1.05;
+    }
+
+    .tarot-frame-card-text-face.is-custom-label.is-custom-medium .tarot-frame-card-text-primary {
+      font-size: clamp(9px, 0.92vw, 14px);
+      line-height: 1.1;
+    }
+
+    .tarot-frame-card-text-face.is-custom-label .tarot-frame-card-text-secondary {
+      color: rgba(224, 242, 254, 0.84);
+    }
+
+    .tarot-frame-card-text-face.is-custom-label.is-custom-hero .tarot-frame-card-text-secondary,
+    .tarot-frame-card-text-face.is-custom-label.is-custom-short .tarot-frame-card-text-secondary {
+      font-size: clamp(7px, 0.74vw, 10px);
+    }
+
     .tarot-frame-card-text-face.is-top-hebrew .tarot-frame-card-text-primary {
       font-size: clamp(11px, 1vw, 16px);
       line-height: 1;
@@ -1992,6 +2295,11 @@
       display: block;
     }
 
+    .tarot-frame-drag-ghost .tarot-frame-card-text-face {
+      height: 100%;
+      padding: 10px 8px;
+    }
+
     .tarot-frame-drag-ghost-label {
       position: absolute;
       left: 6px;
@@ -2010,6 +2318,77 @@
       box-sizing: border-box;
     }
 
+    .tarot-frame-drag-trash {
+      position: fixed;
+      right: 18px;
+      bottom: 18px;
+      z-index: 130;
+      display: grid;
+      grid-template-columns: auto 1fr;
+      align-items: center;
+      gap: 10px;
+      min-width: 220px;
+      padding: 12px 14px;
+      border: 1px solid rgba(248, 113, 113, 0.34);
+      border-radius: 18px;
+      background: linear-gradient(180deg, rgba(69, 10, 10, 0.94), rgba(28, 25, 23, 0.96));
+      color: #fee2e2;
+      box-shadow: 0 22px 46px rgba(0, 0, 0, 0.34);
+    }
+
+    .tarot-frame-drag-trash[hidden] {
+      display: none !important;
+    }
+
+    .tarot-frame-drag-trash.is-active {
+      border-color: rgba(252, 165, 165, 0.92);
+      background: linear-gradient(180deg, rgba(153, 27, 27, 0.96), rgba(69, 10, 10, 0.98));
+      transform: scale(1.04);
+    }
+
+    .tarot-frame-drag-trash-icon {
+      width: 38px;
+      height: 38px;
+      display: grid;
+      place-items: center;
+      border-radius: 12px;
+      background: rgba(255, 255, 255, 0.08);
+      color: #fecaca;
+    }
+
+    .tarot-frame-drag-trash-icon svg {
+      width: 22px;
+      height: 22px;
+      fill: currentColor;
+    }
+
+    .tarot-frame-drag-trash-copy {
+      display: grid;
+      gap: 2px;
+      min-width: 0;
+    }
+
+    .tarot-frame-drag-trash-copy strong {
+      font-size: 12px;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+    }
+
+    .tarot-frame-drag-trash-copy span {
+      color: rgba(254, 226, 226, 0.82);
+      font-size: 12px;
+      line-height: 1.3;
+    }
+
+    @media (max-width: 760px) {
+      .tarot-frame-drag-trash {
+        left: 12px;
+        right: 12px;
+        bottom: 12px;
+        min-width: 0;
+      }
+    }
+
     body.is-tarot-frame-dragging {
       cursor: grabbing;
       -webkit-user-select: none;