@withwiz/block-editor 0.1.0

package/styles/artist.css

@@ -0,0 +1,332 @@
+/* ═══════════════════════════════════════════════
+   @withwiz/block-editor — Artist Editor Styles
+   CSS prefix: abe-*
+   ═══════════════════════════════════════════════ */
+
+.abe-wrapper {
+  --abe-bg: #f7f6f4;
+  --abe-s: #fff;
+  --abe-b: #e2dfd9;
+  --abe-bh: #ccc8c0;
+  --abe-t: #4a4540;
+  --abe-td: #9a958d;
+  --abe-tb: #2a2520;
+  --abe-a: #8c7444;
+  --abe-al: #7a6538;
+  /* Preview */
+  --abe-pvbg: #faf9f7;
+  --abe-pvbgw: #f5f3ef;
+  --abe-gold: #8c7444;
+  --abe-gl: #c9a96e;
+  --abe-th: #2a2520;
+  --abe-tmid: #3a3530;
+  --abe-tm: #6a6358;
+  --abe-pvtd: #7a756c;
+  --abe-dv: rgba(140,116,68,0.15);
+
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  height: 520px;
+  border: 1px solid #ddd;
+  font-family: 'Noto Sans KR', sans-serif;
+}
+
+/* ═══ Editor Pane ═══ */
+.abe-editor {
+  background: var(--abe-bg);
+  overflow-y: auto;
+  padding: 16px 20px;
+  color: var(--abe-t);
+}
+
+.abe-section {
+  margin-bottom: 16px;
+}
+.abe-section:last-child {
+  margin-bottom: 0;
+}
+
+.abe-section-label {
+  font-size: 9px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  color: var(--abe-al);
+  margin-bottom: 8px;
+  padding-bottom: 5px;
+  border-bottom: 1px solid var(--abe-b);
+}
+
+/* ═══ Editor Fields ═══ */
+.abe-textarea {
+  width: 100%;
+  padding: 10px 12px;
+  font-size: 12.5px;
+  line-height: 1.8;
+  background: var(--abe-s);
+  border: 1px solid var(--abe-b);
+  color: var(--abe-tb);
+  font-family: inherit;
+  font-weight: 300;
+  resize: vertical;
+  min-height: 100px;
+  outline: none;
+  transition: border-color 0.2s;
+  box-sizing: border-box;
+}
+.abe-textarea:focus { border-color: var(--abe-a); }
+.abe-textarea::placeholder { color: var(--abe-td); }
+
+/* ═══ Main Image Upload ═══ */
+.abe-main-img-upload {
+  width: 140px;
+  aspect-ratio: 3/4;
+  border: 1px dashed var(--abe-b);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background: var(--abe-s);
+  position: relative;
+  overflow: hidden;
+  transition: border-color 0.2s;
+}
+.abe-main-img-upload:hover { border-color: var(--abe-a); }
+.abe-main-img-upload.has-image { cursor: default; }
+
+.abe-upload-text {
+  font-size: 10px;
+  color: var(--abe-td);
+  text-align: center;
+  line-height: 1.6;
+}
+.abe-main-img-upload.has-image .abe-upload-text { display: none; }
+
+.abe-main-img-upload img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.abe-img-remove-btn {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 22px;
+  height: 22px;
+  background: rgba(0,0,0,0.6);
+  color: #fff;
+  border: none;
+  cursor: pointer;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+.abe-main-img-upload:hover .abe-img-remove-btn,
+.abe-gallery-item:hover .abe-img-remove-btn {
+  opacity: 1;
+}
+
+/* ═══ Gallery Grid (Editor) ═══ */
+.abe-gallery-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 6px;
+  margin-bottom: 8px;
+}
+
+.abe-gallery-item {
+  aspect-ratio: 1/1;
+  border: 1px solid var(--abe-b);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: var(--abe-s);
+  position: relative;
+  overflow: hidden;
+}
+.abe-gallery-item .abe-upload-text {
+  font-size: 18px;
+  color: var(--abe-td);
+  display: none;
+}
+.abe-gallery-item.has-image .abe-upload-text { display: none; }
+
+.abe-gallery-item img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.abe-gallery-add-btn {
+  width: 100%;
+  padding: 10px;
+  font-size: 11px;
+  font-family: inherit;
+  background: var(--abe-s);
+  border: 1px dashed var(--abe-b);
+  color: var(--abe-td);
+  cursor: pointer;
+  transition: border-color 0.2s, color 0.2s;
+}
+.abe-gallery-add-btn:hover {
+  border-color: var(--abe-a);
+  color: var(--abe-al);
+}
+
+/* ═══ Preview Pane ═══ */
+.abe-preview {
+  background: #edeae5;
+  overflow-y: auto;
+  border-left: 1px solid #ddd;
+  padding: 16px 20px;
+}
+
+.abe-pv-label {
+  font-size: 9px;
+  letter-spacing: 3px;
+  text-transform: uppercase;
+  color: #8a857d;
+  text-align: center;
+  margin-bottom: 14px;
+}
+
+.abe-pv-article {
+  max-width: 400px;
+  margin: 0 auto;
+  background: var(--abe-pvbg);
+  box-shadow: 0 1px 24px rgba(0,0,0,0.06);
+  font-family: 'Noto Sans KR', sans-serif;
+}
+
+.abe-pv-body {
+  padding: 20px 24px 24px;
+}
+
+/* ═══ Preview: Bio + Main Image Layout ═══ */
+.abe-pv-intro {
+  display: grid;
+  grid-template-columns: 1fr 120px;
+  gap: 16px;
+  align-items: start;
+  margin-bottom: 20px;
+}
+
+.abe-pv-bio {
+  font-size: 11.5px;
+  line-height: 2;
+  font-weight: 300;
+  color: var(--abe-tmid);
+}
+
+.abe-pv-main-img { overflow: hidden; }
+.abe-pv-main-img img {
+  width: 100%;
+  display: block;
+  aspect-ratio: 3/4;
+  object-fit: cover;
+}
+
+/* ═══ Preview: Gallery ═══ */
+.abe-pv-gallery {
+  margin-top: 16px;
+  padding-top: 14px;
+  border-top: 1px solid var(--abe-dv);
+}
+
+.abe-pv-gallery-label {
+  font-family: 'Cormorant Garamond', serif;
+  font-size: 9px;
+  letter-spacing: 2.5px;
+  text-transform: uppercase;
+  color: var(--abe-gold);
+  margin-bottom: 8px;
+}
+
+/* Gallery Grid: adaptive layout by image count */
+.abe-pv-gallery-grid {
+  display: grid;
+  gap: 3px;
+}
+.abe-pv-gallery-grid img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
+/* 1 image */
+.abe-pv-gallery-grid.layout-1 { grid-template-columns: 1fr; }
+.abe-pv-gallery-grid.layout-1 img { aspect-ratio: 16/9; }
+
+/* 2 images */
+.abe-pv-gallery-grid.layout-2 { grid-template-columns: 1fr 1fr; }
+.abe-pv-gallery-grid.layout-2 img { aspect-ratio: 4/5; }
+
+/* 3 images: large left + two stacked right */
+.abe-pv-gallery-grid.layout-3 {
+  grid-template-columns: 3fr 2fr;
+  grid-template-rows: 1fr 1fr;
+}
+.abe-pv-gallery-grid.layout-3 .abe-gi-0 { grid-row: 1 / 3; }
+.abe-pv-gallery-grid.layout-3 .abe-gi-1,
+.abe-pv-gallery-grid.layout-3 .abe-gi-2 { aspect-ratio: auto; }
+
+/* 4 images: 2x2 grid */
+.abe-pv-gallery-grid.layout-4 { grid-template-columns: 1fr 1fr; }
+.abe-pv-gallery-grid.layout-4 img { aspect-ratio: 4/3; }
+
+/* 5 images: top 2 large + bottom 3 small */
+.abe-pv-gallery-grid.layout-5 {
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: auto auto;
+}
+.abe-pv-gallery-grid.layout-5 .abe-gi-0 { grid-column: 1 / 2; aspect-ratio: 3/4; }
+.abe-pv-gallery-grid.layout-5 .abe-gi-1 { grid-column: 2 / 4; aspect-ratio: 16/9; }
+.abe-pv-gallery-grid.layout-5 .abe-gi-2,
+.abe-pv-gallery-grid.layout-5 .abe-gi-3,
+.abe-pv-gallery-grid.layout-5 .abe-gi-4 { aspect-ratio: 1/1; }
+
+/* ═══ Preview: Empty State ═══ */
+.abe-pv-empty {
+  text-align: center;
+  padding: 40px 20px;
+  font-size: 11px;
+  color: var(--abe-pvtd);
+  font-weight: 300;
+}
+
+/* ═══ Responsive ═══ */
+@media (max-width: 1100px) {
+  .abe-wrapper {
+    grid-template-columns: 1fr;
+    height: auto;
+    max-height: none;
+  }
+  .abe-preview { display: none; }
+}
+
+@media (max-width: 768px) {
+  .abe-wrapper {
+    grid-template-columns: 1fr;
+    height: auto;
+    max-height: none;
+  }
+  .abe-preview { display: none; }
+  .abe-editor { padding: 12px; }
+  .abe-gallery-grid { grid-template-columns: repeat(3, 1fr); }
+  .abe-main-img-upload { width: 110px; }
+}
+
+@media (max-width: 480px) {
+  .abe-gallery-grid { grid-template-columns: repeat(2, 1fr); }
+}

package/styles/editor.css

@@ -0,0 +1,394 @@
+/* ═══════════════════════════════════════════════
+   @withwiz/block-editor — Editor UI Styles
+   Prefix: be-*
+   ═══════════════════════════════════════════════ */
+
+/* ═══ CSS Variables (override in host project) ═══ */
+:root {
+  --be-bg: #ffffff;
+  --be-surface: #f7f6f4;
+  --be-surface2: #f0efec;
+  --be-border: rgba(0,0,0,0.10);
+  --be-border-hover: rgba(0,0,0,0.20);
+  --be-text: #2a2520;
+  --be-text-dim: #6a6560;
+  --be-text-bold: #1a1510;
+  --be-accent: #8a8070;
+  --be-accent-light: #736b60;
+}
+
+/* ═══ Mode Bar ═══ */
+.be-mode-bar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 16px;
+  padding: 8px 10px;
+  background: var(--be-surface);
+  border: 1px solid var(--be-border);
+}
+.be-mode-label {
+  font-size: 11px;
+  letter-spacing: 0.5px;
+  color: var(--be-text);
+  font-weight: 500;
+  margin-right: 2px;
+}
+.be-mode-btn {
+  padding: 4px 12px;
+  font-size: 11px;
+  background: #fff;
+  border: 1px solid var(--be-border);
+  color: var(--be-text-dim);
+  cursor: pointer;
+  font-family: inherit;
+  transition: 0.2s;
+}
+.be-mode-btn:hover {
+  border-color: var(--be-accent);
+  color: var(--be-accent-light);
+}
+.be-mode-hint {
+  font-size: 10px;
+  color: var(--be-text-dim);
+  margin-left: auto;
+  font-style: italic;
+}
+
+.be-empty {
+  text-align: center;
+  padding: 14px 16px;
+  background: var(--be-surface);
+  border: 1px dashed var(--be-border);
+  margin-bottom: 10px;
+  font-size: 11px;
+  color: var(--be-text);
+  line-height: 1.7;
+}
+
+/* ═══ Blocks ═══ */
+.be-blocks { min-height: 40px; }
+
+.be-block {
+  background: var(--be-surface);
+  border: 1px solid var(--be-border);
+  margin-bottom: 8px;
+  transition: 0.2s;
+}
+.be-block:hover { border-color: var(--be-border-hover); }
+.be-block.be-dragging { opacity: 0.4; border-color: var(--be-accent); }
+.be-block.be-drag-over.be-drag-above { border-top: 2px solid var(--be-accent); margin-top: 6px; }
+.be-block.be-drag-over.be-drag-below { border-bottom: 2px solid var(--be-accent); margin-bottom: 6px; }
+
+.be-block-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 10px;
+  background: rgba(0,0,0,0.02);
+  border-bottom: 1px solid var(--be-border);
+  cursor: grab;
+}
+.be-block-header:active { cursor: grabbing; }
+
+.be-block-type {
+  font-size: 12.5px;
+  letter-spacing: 0.5px;
+  color: var(--be-text);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 500;
+}
+.be-block-drag { color: var(--be-text-dim); font-size: 12px; }
+
+.be-block-actions { display: flex; gap: 2px; }
+.be-block-btn {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  color: var(--be-text-dim);
+  cursor: pointer;
+  font-size: 14px;
+  transition: 0.2s;
+}
+.be-block-btn:hover { color: var(--be-text); }
+.be-block-btn-del:hover { color: #c45; }
+
+.be-block-body { padding: 10px; }
+
+/* ═══ Editor Fields ═══ */
+.be-input {
+  width: 100%;
+  padding: 8px 12px;
+  font-size: 13px;
+  background: #fff;
+  border: 1px solid var(--be-border);
+  color: var(--be-text-bold);
+  font-family: inherit;
+  font-weight: 400;
+  outline: none;
+  transition: 0.2s;
+  box-sizing: border-box;
+}
+.be-input:focus { border-color: var(--be-accent); }
+.be-input::placeholder { color: #aaa; }
+
+.be-textarea {
+  width: 100%;
+  padding: 10px 12px;
+  font-size: 12.5px;
+  line-height: 1.8;
+  background: #fff;
+  border: 1px solid var(--be-border);
+  color: var(--be-text-bold);
+  font-family: inherit;
+  font-weight: 400;
+  resize: vertical;
+  min-height: 60px;
+  outline: none;
+  transition: 0.2s;
+  box-sizing: border-box;
+}
+.be-textarea:focus { border-color: var(--be-accent); }
+.be-textarea::placeholder { color: #aaa; }
+
+/* KV Rows */
+.be-kv-row {
+  display: grid;
+  grid-template-columns: 90px 1fr 22px;
+  gap: 4px;
+  margin-bottom: 4px;
+  align-items: center;
+}
+.be-kv-key {
+  padding: 5px 8px;
+  font-size: 11px;
+  background: var(--be-surface2);
+  border: 1px solid var(--be-border);
+  color: var(--be-text-bold);
+  font-family: inherit;
+  font-weight: 500;
+  outline: none;
+  box-sizing: border-box;
+}
+.be-kv-key:focus,
+.be-kv-value:focus { border-color: var(--be-accent); }
+.be-kv-value {
+  padding: 5px 8px;
+  font-size: 11px;
+  background: #fff;
+  border: 1px solid var(--be-border);
+  color: var(--be-text-bold);
+  font-family: inherit;
+  font-weight: 400;
+  outline: none;
+  box-sizing: border-box;
+}
+.be-kv-delete {
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  color: var(--be-text-dim);
+  cursor: pointer;
+  font-size: 12px;
+}
+.be-kv-delete:hover { color: #c45; }
+.be-stats-row {
+  display: grid;
+  grid-template-columns: 80px 1fr 22px;
+  gap: 4px;
+  margin-bottom: 4px;
+  align-items: center;
+}
+.be-add-row-btn {
+  padding: 4px 10px;
+  font-size: 10px;
+  background: none;
+  border: 1px solid var(--be-border);
+  color: var(--be-text-dim);
+  cursor: pointer;
+  font-family: inherit;
+  margin-top: 3px;
+  transition: 0.2s;
+}
+.be-add-row-btn:hover {
+  border-color: var(--be-accent);
+  color: var(--be-accent-light);
+}
+
+/* Quote Area */
+.be-quote-area {
+  border-left: 2px solid var(--be-accent);
+  padding-left: 10px;
+}
+
+/* Image Upload */
+.be-img-upload {
+  width: 100%;
+  aspect-ratio: 16/9;
+  border: 1px dashed rgba(0,0,0,0.2);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background: var(--be-surface);
+  margin-bottom: 6px;
+  position: relative;
+  overflow: hidden;
+  transition: 0.2s;
+}
+.be-img-upload:hover { border-color: var(--be-accent); }
+.be-img-upload-text { font-size: 12px; color: var(--be-text-dim); }
+.be-img-upload-hint { font-size: 10px; color: var(--be-text-dim); opacity: 0.6; display: block; margin-top: 3px; }
+.be-img-upload.has-image .be-img-upload-text,
+.be-img-upload.has-image .be-img-upload-hint { display: none; }
+.be-img-upload img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.be-img-upload.small { aspect-ratio: 4/3; }
+.be-img-upload.square { aspect-ratio: 1/1; }
+.be-img-upload.portrait { width: 120px; aspect-ratio: 3/4; }
+
+.be-img-pair-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+.be-img-gallery-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 4px;
+  margin-bottom: 6px;
+}
+.be-img-remove-btn {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 20px;
+  height: 20px;
+  background: rgba(0,0,0,0.6);
+  color: #fff;
+  border: none;
+  cursor: pointer;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+.be-img-upload:hover .be-img-remove-btn { opacity: 1; }
+
+/* Upload state */
+.be-img-upload.is-drag-over { border-color: var(--be-accent); background: rgba(138,128,112,0.08); }
+.be-img-upload.is-uploading,
+.be-img-upload.is-resizing { opacity: 0.7; pointer-events: none; }
+.be-upload-spinner { font-size: 11px; color: var(--be-accent); }
+.be-drag-hint { font-size: 11px; color: var(--be-accent); font-weight: 500; }
+.be-error { font-size: 10px; color: #c45; margin-top: 2px; }
+
+/* Sub-item Cards */
+.be-subitem-card {
+  border: 1px solid var(--be-border);
+  padding: 8px;
+  margin-bottom: 4px;
+}
+.be-subitem-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 4px;
+}
+.be-subitem-label { font-size: 9px; color: var(--be-accent-light); }
+.be-subitem-2col {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 3px;
+  margin: 4px 0;
+}
+.be-timeline-card {
+  border: 1px solid var(--be-border);
+  padding: 8px;
+  margin-bottom: 4px;
+  border-left: 2px solid var(--be-accent);
+}
+
+/* Add Block Bar */
+.be-add-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  padding: 8px 0;
+  margin-top: 4px;
+}
+.be-add-btn {
+  padding: 7px 14px;
+  font-size: 12px;
+  background: #fff;
+  border: 1px solid var(--be-border);
+  color: var(--be-text);
+  cursor: pointer;
+  font-family: inherit;
+  transition: 0.2s;
+  white-space: nowrap;
+  position: relative;
+}
+.be-add-btn:hover {
+  border-color: var(--be-accent);
+  color: var(--be-accent-light);
+  background: rgba(138,128,112,0.06);
+}
+.be-add-btn[title]:hover::after {
+  content: attr(title);
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: #2a2520;
+  color: #fff;
+  padding: 5px 10px;
+  font-size: 9px;
+  white-space: nowrap;
+  z-index: 10;
+  pointer-events: none;
+  line-height: 1.4;
+}
+.be-add-btn[title]:hover::before {
+  content: '';
+  position: absolute;
+  bottom: calc(100% + 2px);
+  left: 50%;
+  transform: translateX(-50%);
+  border: 4px solid transparent;
+  border-top-color: #2a2520;
+  z-index: 10;
+}
+
+/* ═══ Responsive ═══ */
+@media (max-width: 768px) {
+  .be-mode-bar { flex-wrap: wrap; padding: 6px 8px; }
+  .be-mode-hint { margin-left: 0; width: 100%; font-size: 9px; }
+  .be-add-bar { gap: 4px; }
+  .be-add-btn { padding: 5px 10px; font-size: 11px; }
+  .be-img-pair-grid { grid-template-columns: 1fr; }
+  .be-img-gallery-grid { grid-template-columns: 1fr 1fr; }
+  .be-kv-row { grid-template-columns: 70px 1fr 22px; }
+  .be-stats-row { grid-template-columns: 60px 1fr 22px; }
+  .be-subitem-2col { grid-template-columns: 1fr; }
+}