nexabase-report 0.1.0 → 0.1.2

package/dist/style.css

@@ -96,6 +96,50 @@ html, body, #app {
   min-height: 36px !important;
 }
 
+/* Cleaner preview shell in designer: keep only a close button on top */
+.p-dialog.nd-stimulsoft-dialog.nd-preview-dialog {
+  width: min(1500px, 94vw) !important;
+  max-width: 94vw !important;
+}
+
+.p-dialog.nd-stimulsoft-dialog.nd-preview-dialog .p-dialog-header {
+  background: transparent !important;
+  border: none !important;
+  min-height: 0 !important;
+  padding: 8px 8px 0 8px !important;
+}
+
+.p-dialog.nd-stimulsoft-dialog.nd-preview-dialog .p-dialog-content {
+  min-height: calc(94vh - 16px) !important;
+}
+
+.p-dialog.nd-stimulsoft-dialog.nd-preview-dialog .p-dialog-footer {
+  display: none !important;
+  min-height: 0 !important;
+  padding: 0 !important;
+  border: none !important;
+}
+
+.nd-preview-closebar {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.nd-preview-close-btn.p-button {
+  width: 30px !important;
+  height: 30px !important;
+  border: 1px solid #cbd5e1 !important;
+  color: #64748b !important;
+  background: #ffffff !important;
+}
+
+.nd-preview-close-btn.p-button:hover {
+  color: #111827 !important;
+  border-color: #94a3b8 !important;
+  background: #f8fafc !important;
+}
+
 .nd-st-toolbar {
   width: 100%;
   display: flex !important;
@@ -297,11 +341,169 @@ html, body, #app {
   align-items: flex-end;
 }
 
+.nd-brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-bottom: 2px;
+  margin-right: 8px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.nd-brand-logo-ribbon {
+  height: 20px;
+  width: auto;
+  flex-shrink: 0;
+  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.05));
+}
+
+.nd-qat {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding-bottom: 2px;
+  margin-right: 6px;
+}
+
+.nd-qat-btn {
+  width: 26px;
+  height: 24px;
+  border-radius: var(--radius-sm);
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--nd-text-secondary);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--transition);
+}
+
+.nd-qat-btn:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.6);
+  border-color: var(--nd-border);
+  color: var(--nd-text);
+}
+
+.nd-qat-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.nd-qat-sep {
+  width: 1px;
+  height: 18px;
+  background: var(--nd-border);
+  margin: 0 4px;
+}
+
+.nd-doc-type-toggle {
+  display: flex;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.05);
+  padding: 3px;
+  border-radius: 10px;
+  margin: 0 16px;
+  border: 1px solid rgba(0,0,0,0.05);
+  margin-bottom: 2px;
+}
+
+.nd-type-btn {
+  padding: 4px 14px;
+  font-size: 11px;
+  font-weight: 700;
+  color: #64748b;
+  background: transparent;
+  border: none;
+  border-radius: 7px;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 24px;
+}
+
+.nd-type-btn i {
+  font-size: 13px;
+  opacity: 0.7;
+}
+
+.nd-type-btn:hover:not(.active) {
+  background: rgba(255, 255, 255, 0.4);
+  color: var(--nd-text);
+}
+
+.nd-type-btn.active {
+  background: white;
+  color: var(--nd-primary);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
+}
+
+.nd-type-btn.active i {
+  opacity: 1;
+}
+
 .nd-tab-report-name {
   margin-left: auto;
   padding-bottom: 2px;
 }
 
+.nd-top-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.nd-ribbon-toggle {
+  width: 28px;
+  height: 26px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--nd-border);
+  background: var(--nd-surface);
+  color: var(--nd-text-secondary);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--transition);
+}
+
+.nd-ribbon-toggle:hover {
+  background: rgba(255, 255, 255, 0.6);
+  color: var(--nd-text);
+}
+
+.nd-conn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 8px;
+  height: 26px;
+  border-radius: 999px;
+  border: 1px solid var(--nd-border);
+  background: var(--nd-surface);
+  color: var(--nd-text-secondary);
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.nd-conn-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: #ef4444;
+  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
+}
+
+.nd-conn.active .nd-conn-dot {
+  background: #22c55e;
+  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15);
+}
+
+.nd-conn-text { line-height: 1; }
+
 .nd-report-name-input {
   height: 26px;
   padding: 3px 10px;
@@ -497,74 +699,538 @@ html, body, #app {
   transition: all var(--transition);
 }
 
-.nd-btn-sm:hover {
-  background: var(--nd-primary-ghost);
+.nd-btn-sm:hover {
+  background: var(--nd-primary-ghost);
+  border-color: var(--nd-primary-light);
+}
+
+.nd-btn-sm i { font-size: 13px !important; color: var(--nd-primary); }
+.nd-btn-sm span { font-size: 11px; color: var(--nd-text-secondary); }
+
+.nd-tbar-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 26px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all var(--transition);
+  color: var(--nd-text-secondary);
+  border: 1px solid transparent;
+  background: transparent;
+}
+
+.nd-tbar-btn:hover {
+  background: var(--nd-primary-ghost);
+  color: var(--nd-primary);
+}
+
+.nd-tbar-btn.active { background: var(--nd-primary); color: #fff; }
+.nd-tbar-btn i { font-size: 13px !important; }
+
+/* Botones de formato de texto (B, I) */
+.nd-format-btn {
+  font-family: Georgia, 'Times New Roman', serif;
+}
+
+.nd-format-text-bold {
+  font-weight: 900;
+  font-size: 15px;
+  line-height: 1;
+  color: var(--nd-text-secondary);
+}
+
+.nd-format-text-italic {
+  font-style: italic;
+  font-weight: 700;
+  font-size: 15px;
+  line-height: 1;
+  color: var(--nd-text-secondary);
+}
+
+.nd-tbar-btn.active .nd-format-text-bold,
+.nd-tbar-btn.active .nd-format-text-italic {
+  color: #fff;
+}
+
+/* Botón de color de texto */
+.nd-color-btn {
+  position: relative;
+}
+
+.nd-color-btn:hover {
+  background: var(--nd-primary-ghost);
+}
+
+.nd-font-block { display: flex; flex-direction: column; gap: 4px; }
+.nd-font-block .nd-row { display: flex; gap: 4px; align-items: center; }
+
+.nd-body { flex: 1; display: flex; overflow: hidden; position: relative; }
+
+.nd-backstage {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+  background: var(--nd-background);
+  min-height: 0;
+}
+
+.nd-backstage-left {
+  width: 260px;
+  flex-shrink: 0;
+  background: #0f172a;
+  color: #e2e8f0;
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  gap: 6px;
+}
+
+.nd-backstage-back {
+  height: 34px;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  background: rgba(255, 255, 255, 0.06);
+  color: #e2e8f0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 12px;
+  cursor: pointer;
+  transition: all var(--transition);
+}
+
+.nd-backstage-back:hover {
+  background: rgba(255, 255, 255, 0.12);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.nd-backstage-section {
+  margin-top: 10px;
+  padding: 0 6px;
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: rgba(226, 232, 240, 0.7);
+}
+
+.nd-backstage-item {
+  height: 34px;
+  border-radius: 10px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: #e2e8f0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 10px;
+  cursor: pointer;
+  transition: all var(--transition);
+}
+
+.nd-backstage-item:hover:not(:disabled) {
+  background: rgba(59, 130, 246, 0.18);
+  border-color: rgba(59, 130, 246, 0.25);
+}
+
+.nd-backstage-item.active {
+  background: rgba(59, 130, 246, 0.26);
+  border-color: rgba(59, 130, 246, 0.35);
+}
+
+.nd-backstage-item:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.nd-backstage-spacer { flex: 1; }
+
+.nd-backstage-main {
+  flex: 1;
+  min-width: 0;
+  padding: 22px 24px;
+  overflow: auto;
+}
+
+.nd-backstage-header {
+  padding: 0 2px 16px;
+}
+
+.nd-backstage-title {
+  font-size: 20px;
+  font-weight: 900;
+  color: var(--nd-text);
+  line-height: 1.2;
+}
+
+.nd-backstage-sub {
+  font-size: 12px;
+  color: var(--nd-text-secondary);
+  margin-top: 4px;
+}
+
+.nd-backstage-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.nd-backstage-view {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.nd-bs-view {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+.nd-bs-view-card {
+  width: min(820px, 100%);
+  border: 1px solid var(--nd-border);
+  background: var(--nd-surface);
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: var(--shadow-sm);
+}
+
+.nd-bs-view-title {
+  font-size: 14px;
+  font-weight: 900;
+  color: var(--nd-text);
+}
+
+.nd-bs-view-desc {
+  font-size: 12px;
+  color: var(--nd-text-secondary);
+  margin-top: 4px;
+}
+
+.nd-bs-view-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.nd-bs-primary,
+.nd-bs-secondary {
+  height: 34px;
+  padding: 0 12px;
+  border-radius: 10px;
+  border: 1px solid #d1d5db;
+  background: #ffffff;
+  color: #0f172a;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  transition: all var(--transition);
+}
+
+.nd-bs-primary {
+  background: var(--nd-primary);
+  border-color: var(--nd-primary-dark);
+  color: #ffffff;
+}
+
+.nd-bs-primary:hover:not(:disabled) {
+  background: var(--nd-primary-dark);
+}
+
+.nd-bs-secondary:hover:not(:disabled) {
+  background: #f3f4f6;
+}
+
+.nd-bs-primary:disabled,
+.nd-bs-secondary:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.nd-bs-form {
+  margin-top: 12px;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 8px;
+}
+
+.nd-bs-label {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--nd-text-secondary);
+}
+
+.nd-bs-input {
+  height: 34px;
+  border-radius: 10px;
+  border: 1px solid var(--nd-border);
+  padding: 0 10px;
+  outline: none;
+  font-size: 12px;
+  background: #ffffff;
+  transition: border-color var(--transition), box-shadow var(--transition);
+}
+
+.nd-bs-input:focus {
+  border-color: var(--nd-primary);
+  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
+}
+
+.nd-bs-meta {
+  margin-top: 12px;
+  border: 1px solid var(--nd-border);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.nd-bs-meta-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 12px;
+  font-size: 12px;
+  color: var(--nd-text);
+  background: #ffffff;
+}
+
+.nd-bs-meta-row + .nd-bs-meta-row {
+  border-top: 1px solid var(--nd-border);
+}
+
+.nd-bs-meta-row span:first-child {
+  color: var(--nd-text-secondary);
+  font-weight: 700;
+}
+
+.nd-bs-meta-row span:last-child {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+.nd-bs-callout {
+  margin-top: 12px;
+  border: 1px solid var(--nd-border);
+  border-radius: 12px;
+  background: #f8fafc;
+  padding: 12px;
+}
+
+.nd-bs-callout-title {
+  font-size: 12px;
+  font-weight: 900;
+  color: var(--nd-text);
+}
+
+.nd-bs-callout-desc {
+  font-size: 12px;
+  color: var(--nd-text-secondary);
+  margin-top: 4px;
+}
+
+.nd-bs-open {
+  margin-top: 12px;
+}
+
+.nd-bs-open-top {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 10px;
+}
+
+.nd-bs-open-list {
+  position: relative;
+}
+
+.nd-bs-open-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 4px 0;
+}
+
+.nd-bs-open-name {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--nd-text);
+}
+
+.nd-bs-pin {
+  width: 24px;
+  height: 22px;
+  border-radius: 8px;
+  border: 1px solid var(--nd-border);
+  background: #ffffff;
+  color: var(--nd-text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--transition);
+  flex-shrink: 0;
+}
+
+.nd-bs-pin:hover {
+  background: #f8fafc;
+  color: var(--nd-text);
+}
+
+.nd-bs-recents {
+  margin-bottom: 12px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+.nd-bs-recents-block {
+  border: 1px solid var(--nd-border);
+  border-radius: 12px;
+  background: #ffffff;
+  overflow: hidden;
+}
+
+.nd-bs-recents-title {
+  padding: 8px 10px;
+  font-size: 11px;
+  font-weight: 900;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  background: #f8fafc;
+  border-bottom: 1px solid var(--nd-border);
+  color: var(--nd-text-secondary);
+}
+
+.nd-bs-recents-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.nd-bs-recents-item {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 8px 10px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+  transition: background var(--transition);
+}
+
+.nd-bs-recents-item:hover {
+  background: var(--nd-primary-ghost);
+}
+
+.nd-bs-recents-name {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--nd-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.nd-bs-recents-meta {
+  font-size: 11px;
+  color: var(--nd-text-muted);
+  flex-shrink: 0;
+}
+
+.nd-bs-open-meta {
+  font-size: 11px;
+  color: var(--nd-text-muted);
+}
+
+.nd-bs-empty {
+  padding: 10px 4px 0;
+  font-size: 12px;
+  color: var(--nd-text-muted);
+}
+.nd-bs-card {
+  text-align: left;
+  border: 1px solid var(--nd-border);
+  background: var(--nd-surface);
+  border-radius: 12px;
+  padding: 14px 14px 12px;
+  cursor: pointer;
+  transition: all var(--transition);
+  box-shadow: var(--shadow-sm);
+}
+
+.nd-bs-card:hover:not(:disabled) {
   border-color: var(--nd-primary-light);
+  box-shadow: var(--shadow);
+  transform: translateY(-1px);
 }
 
-.nd-btn-sm i { font-size: 13px !important; color: var(--nd-primary); }
-.nd-btn-sm span { font-size: 11px; color: var(--nd-text-secondary); }
-
-.nd-tbar-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 26px;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: all var(--transition);
-  color: var(--nd-text-secondary);
-  border: 1px solid transparent;
-  background: transparent;
+.nd-bs-card:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+  transform: none;
 }
 
-.nd-tbar-btn:hover {
+.nd-bs-card-ico {
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
   background: var(--nd-primary-ghost);
+  border: 1px solid var(--nd-primary-light);
   color: var(--nd-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 10px;
 }
 
-.nd-tbar-btn.active { background: var(--nd-primary); color: #fff; }
-.nd-tbar-btn i { font-size: 13px !important; }
+.nd-bs-card-ico i { font-size: 16px; }
 
-/* Botones de formato de texto (B, I) */
-.nd-format-btn {
-  font-family: Georgia, 'Times New Roman', serif;
+.nd-bs-card-title {
+  font-size: 13px;
+  font-weight: 800;
+  color: var(--nd-text);
 }
 
-.nd-format-text-bold {
-  font-weight: 900;
-  font-size: 15px;
-  line-height: 1;
+.nd-bs-card-desc {
+  font-size: 12px;
   color: var(--nd-text-secondary);
+  margin-top: 2px;
 }
 
-.nd-format-text-italic {
-  font-style: italic;
-  font-weight: 700;
-  font-size: 15px;
-  line-height: 1;
-  color: var(--nd-text-secondary);
+.nd-backstage-meta {
+  margin-top: 16px;
+  border: 1px solid var(--nd-border);
+  border-radius: 12px;
+  overflow: hidden;
+  background: var(--nd-surface);
 }
 
-.nd-tbar-btn.active .nd-format-text-bold,
-.nd-tbar-btn.active .nd-format-text-italic {
-  color: #fff;
+.nd-backstage-meta-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 12px;
+  font-size: 12px;
+  color: var(--nd-text);
 }
 
-/* Botón de color de texto */
-.nd-color-btn {
-  position: relative;
+.nd-backstage-meta-row + .nd-backstage-meta-row {
+  border-top: 1px solid var(--nd-border);
 }
 
-.nd-color-btn:hover {
-  background: var(--nd-primary-ghost);
+.nd-backstage-meta-row span:first-child {
+  color: var(--nd-text-secondary);
+  font-weight: 700;
 }
 
-.nd-font-block { display: flex; flex-direction: column; gap: 4px; }
-.nd-font-block .nd-row { display: flex; gap: 4px; align-items: center; }
-
-.nd-body { flex: 1; display: flex; overflow: hidden; position: relative; }
+.nd-backstage-meta-row span:last-child {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
 
 .nd-sidebar {
   background: var(--nd-surface);
@@ -703,6 +1369,169 @@ html, body, #app {
 
 .nd-props { padding: 4px 0; }
 
+.nd-props-context {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--nd-border);
+  background: var(--nd-surface);
+}
+
+.nd-props-context-title {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--nd-text);
+  line-height: 1.1;
+}
+
+.nd-props-context-sub {
+  font-size: 10px;
+  color: var(--nd-text-muted);
+  line-height: 1.1;
+  margin-top: 2px;
+}
+
+.nd-props-context-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.nd-props-section {
+  margin: 10px 10px 0;
+  border: 1px solid var(--nd-border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  background: var(--nd-surface);
+}
+
+.nd-props-section-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  cursor: pointer;
+  user-select: none;
+  background: #f8fafc;
+  color: var(--nd-text);
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.nd-props-section-head:hover {
+  background: var(--nd-primary-ghost);
+  color: var(--nd-primary);
+}
+
+.nd-props-section-body {
+  padding: 10px 10px 2px;
+}
+
+.p-dialog.nd-about-dialog {
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.p-dialog.nd-about-dialog .p-dialog-header {
+  background: var(--nd-surface);
+  border-bottom: 1px solid var(--nd-border);
+}
+
+.p-dialog.nd-about-dialog .p-dialog-content {
+  background: var(--nd-surface);
+}
+
+.p-dialog.nd-about-dialog .p-dialog-footer {
+  background: var(--nd-surface);
+  border-top: 1px solid var(--nd-border);
+}
+
+.nd-about-body {
+  padding: 4px 2px 2px;
+}
+
+.nd-about-hero {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px 8px;
+  border: 1px solid var(--nd-border);
+  border-radius: 12px;
+  background: #f8fafc;
+}
+
+.nd-about-logo {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  background: #ffffff;
+  border: 1px solid var(--nd-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.nd-about-logo-img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.nd-about-title {
+  font-size: 14px;
+  font-weight: 900;
+  color: var(--nd-text);
+  line-height: 1.2;
+}
+
+.nd-about-sub {
+  font-size: 12px;
+  color: var(--nd-text-secondary);
+  margin-top: 2px;
+}
+
+.nd-about-kv {
+  margin-top: 12px;
+  border: 1px solid var(--nd-border);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.nd-about-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 12px;
+  font-size: 12px;
+  color: var(--nd-text);
+  background: #ffffff;
+}
+
+.nd-about-row + .nd-about-row {
+  border-top: 1px solid var(--nd-border);
+}
+
+.nd-about-row span:first-child {
+  color: var(--nd-text-secondary);
+  font-weight: 600;
+}
+
+.nd-about-row span:last-child {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  color: var(--nd-text);
+}
+
+.nd-about-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 2px 0;
+}
+
 /* ─── MANUAL FIELDS ─────────────────────────────────────────────────── */
 .nd-manual-field {
   position: relative;
@@ -1148,13 +1977,13 @@ html, body, #app {
   flex-shrink: 0;
 }
 
-.nd-page-content {
-  position: absolute;
-  inset: 0;
-  box-sizing: border-box;
-  z-index: 5;
-}
-
+.nd-page-content {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  z-index: 5;
+}
+
 .nd-page.a4.portrait { width: 794px; min-height: 1123px; }
 .nd-page.a4.landscape { width: 1123px; min-height: 794px; }
 .nd-page.letter.portrait { width: 816px; min-height: 1056px; }
@@ -1225,10 +2054,11 @@ html, body, #app {
 }
 
 .nd-band:hover { background: rgba(37, 99, 235, 0.02); }
+.nd-band.selected { background: rgba(37, 99, 235, 0.05); box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.3); }
 
 .nd-band-tag {
   position: absolute;
-  left: calc(-96px - var(--nd-margin-left-px, 0px));
+  left: calc(-96px - var(--nd-margin-left-px, 0px));
   top: 3px;
   width: 90px;
   background: var(--nd-surface);
@@ -1257,10 +2087,62 @@ html, body, #app {
   background: var(--nd-primary-light);
   border-color: var(--nd-primary-light);
 }
+.nd-band-tag.selected {
+  color: var(--nd-primary);
+  background: var(--nd-primary-light);
+  border-color: var(--nd-primary);
+}
 
 .nd-band-source { color: var(--nd-text-muted); font-weight: 400; font-size: 9px; }
 .nd-band-content { position: relative; margin-left: 0; }
 
+.nd-snap-guide {
+  position: absolute;
+  pointer-events: none;
+  z-index: 50;
+  background: rgba(59, 130, 246, 0.75);
+}
+
+.nd-snap-guide.v { top: 0; bottom: 0; width: 1px; }
+.nd-snap-guide.h { left: 0; right: 0; height: 1px; }
+.nd-snap-guide.margin { background: rgba(239, 68, 68, 0.85); }
+
+.nd-drag-metrics {
+  position: absolute;
+  pointer-events: none;
+  z-index: 60;
+  background: rgba(15, 23, 42, 0.85);
+  color: #ffffff;
+  font-size: 10px;
+  padding: 3px 6px;
+  border-radius: 6px;
+  white-space: nowrap;
+  box-shadow: var(--shadow-md);
+}
+
+.nd-distance-line {
+  position: absolute;
+  pointer-events: none;
+  z-index: 55;
+  background: rgba(59, 130, 246, 0.55);
+}
+
+.nd-distance-line.h { height: 1px; }
+.nd-distance-line.v { width: 1px; }
+
+.nd-distance-label {
+  position: absolute;
+  pointer-events: none;
+  z-index: 56;
+  transform: translate(-50%, -50%);
+  background: rgba(59, 130, 246, 0.85);
+  color: #ffffff;
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 999px;
+  white-space: nowrap;
+}
+
 .nd-band-hint {
   position: absolute;
   inset: 0;
@@ -1721,3 +2603,69 @@ html, body, #app {
 .text-gray-400 { color: #9ca3af !important; }
 .opacity-50 { opacity: 0.5 !important; }
 .cursor-not-allowed { cursor: not-allowed !important; }
+
+/* ============================================================
+   WIDGET LIBRARY & DASHBOARD DESIGNER
+   ============================================================ */
+
+.nd-widget-groups {
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.nd-cat-title {
+  font-size: 10px;
+  font-weight: 800;
+  color: var(--nd-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-bottom: 10px;
+  padding-left: 2px;
+}
+
+.nd-widget-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+}
+
+.nd-widget-item {
+  background: #fff;
+  border: 1px solid var(--nd-border);
+  border-radius: 10px;
+  padding: 12px 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  cursor: grab;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  text-align: center;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
+}
+
+.nd-widget-item:hover {
+  border-color: var(--nd-primary);
+  background: var(--nd-primary-ghost);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
+}
+
+.nd-widget-item:active {
+  cursor: grabbing;
+}
+
+.nd-widget-item i {
+  font-size: 20px;
+  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05));
+}
+
+.nd-widget-item span {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--nd-text-secondary);
+  line-height: 1.2;
+}