Merge issue-52-fe (Refs #52)

# Conflicts:
#	craft/src/editor/CanvasOverlays.tsx
#	craft/src/styles/editor.css

craft/src/styles/editor.css

@@ -3091,3 +3091,99 @@ body {
 .page-menu-settings > legend { padding: 0 4px; margin-bottom: 0; }
 
 .page-menu-hidden-badge { font-size: 10px; color: var(--color-text-muted); flex-shrink: 0; }
+
+/* ---------- #52 Section library ---------- */
+.section-lib {
+  background: var(--color-bg-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md, 8px);
+  padding: 16px;
+  max-height: 86vh;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  color: var(--color-text);
+}
+.section-lib-head { display: flex; align-items: center; justify-content: space-between; }
+.section-lib-head h2 { margin: 0; font-size: 16px; font-weight: 600; }
+.section-lib-close { background: none; border: 0; color: var(--color-text-muted); cursor: pointer; font-size: 16px; }
+.section-lib-controls, .section-lib-save { display: flex; gap: 8px; align-items: center; }
+.section-lib-search {
+  flex: 1;
+  padding: 7px 10px;
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  color: var(--color-text);
+  font-size: 13px;
+}
+.section-lib-save-btn {
+  padding: 7px 12px;
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  color: var(--color-text);
+  font-size: 12px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.section-lib-save-btn:disabled { opacity: 0.5; cursor: default; }
+.section-lib-chips { display: flex; flex-wrap: wrap; gap: 6px; }
+.section-lib-chip {
+  padding: 4px 10px;
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
+  color: var(--color-text-muted);
+  font-size: 12px;
+  cursor: pointer;
+}
+.section-lib-chip.active { border-color: var(--color-accent); color: var(--color-text); background: var(--color-accent-subtle); }
+.section-lib-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 12px;
+  overflow-y: auto;
+  min-height: 120px;
+}
+.section-lib-card { position: relative; }
+.section-lib-pick {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 6px;
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  color: var(--color-text);
+  cursor: pointer;
+  text-align: left;
+}
+.section-lib-pick:hover, .section-lib-pick:focus-visible { border-color: var(--color-accent); }
+.section-lib-thumb { position: relative; width: 100%; height: 150px; overflow: hidden; border-radius: 4px; background: #fff; }
+.section-lib-frame {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1200px;
+  height: 600px;
+  border: 0;
+  transform: scale(0.2);
+  transform-origin: 0 0;
+  pointer-events: none;
+}
+.section-lib-name { font-size: 12px; font-weight: 500; }
+.section-lib-delete {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: var(--color-bg-base);
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  color: var(--color-danger);
+  cursor: pointer;
+  padding: 3px 6px;
+}
+.section-lib-empty { grid-column: 1 / -1; color: var(--color-text-muted); font-size: 13px; padding: 24px 0; text-align: center; }
+.block-browse-sections { display: block; width: calc(100% - 16px); margin: 0 8px 8px; }