nextblogkit 0.6.0

package/dist/styles/editor.css

@@ -0,0 +1,452 @@
+/* NextBlogKit — Editor Styles */
+
+.nbk-editor {
+  border: 1px solid var(--nbk-border);
+  border-radius: 0.75rem;
+  background: var(--nbk-card-bg);
+  overflow: hidden;
+}
+
+/* Toolbar */
+.nbk-editor-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.5rem;
+  border-bottom: 1px solid var(--nbk-border);
+  background: var(--nbk-bg-secondary);
+  flex-wrap: wrap;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.nbk-toolbar-group {
+  display: flex;
+  gap: 0.125rem;
+}
+
+.nbk-toolbar-divider {
+  width: 1px;
+  height: 24px;
+  background: var(--nbk-border);
+  margin: 0 0.25rem;
+}
+
+.nbk-toolbar-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.875rem;
+  color: var(--nbk-text);
+  transition: all 0.15s var(--nbk-transition);
+}
+
+.nbk-toolbar-btn:hover {
+  background: #f3f4f6;
+  transform: scale(1.05);
+}
+
+.nbk-toolbar-btn.active {
+  background: var(--nbk-primary-light);
+  color: #2563eb;
+}
+
+/* ================================================================
+   WYSIWYG Typography — Editor content should match the blog view
+   ================================================================ */
+
+.nbk-editor-content {
+  min-height: 400px;
+  padding: 2rem 2.5rem;
+  outline: none;
+  font-family: var(--nbk-font-body);
+  color: #374151;
+  line-height: 1.8;
+  font-size: 1.125rem;
+}
+
+.nbk-editor-content {
+  min-height: 400px;
+  outline: none;
+}
+
+.nbk-editor-content > * + * {
+  margin-top: 0.75rem;
+}
+
+/* Headings */
+.nbk-editor-content h1 {
+  font-family: var(--nbk-font-heading);
+  font-size: 2.25rem;
+  font-weight: 700;
+  line-height: 1.2;
+  margin-top: 2.5rem;
+  margin-bottom: 1rem;
+  letter-spacing: -0.025em;
+  color: var(--nbk-text);
+}
+
+.nbk-editor-content h2 {
+  font-family: var(--nbk-font-heading);
+  font-size: 1.875rem;
+  font-weight: 700;
+  line-height: 1.3;
+  margin-top: 2.5rem;
+  margin-bottom: 1rem;
+  letter-spacing: -0.025em;
+  color: var(--nbk-primary);
+  padding-bottom: 0.5rem;
+  border-bottom: 2px solid var(--nbk-primary-light);
+}
+
+.nbk-editor-content h3 {
+  font-family: var(--nbk-font-heading);
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1.4;
+  margin-top: 2rem;
+  margin-bottom: 0.75rem;
+  color: var(--nbk-text);
+}
+
+.nbk-editor-content h4 {
+  font-family: var(--nbk-font-heading);
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.4;
+  margin-top: 1.5rem;
+  margin-bottom: 0.5rem;
+  color: var(--nbk-text);
+}
+
+/* Paragraphs */
+.nbk-editor-content p {
+  margin: 0 0 1rem;
+  line-height: 1.8;
+}
+
+/* Links */
+.nbk-editor-content a {
+  color: var(--nbk-primary);
+  text-decoration: none;
+  border-bottom: 1px solid var(--nbk-primary);
+  cursor: pointer;
+}
+
+/* Inline code */
+.nbk-editor-content code {
+  font-family: var(--nbk-font-code);
+  font-size: 0.875em;
+  background: #f3f4f6;
+  color: #e11d48;
+  padding: 0.125em 0.375em;
+  border-radius: 0.25rem;
+}
+
+/* Code blocks */
+.nbk-editor-content pre {
+  background: #0f172a;
+  color: #86efac;
+  padding: 1.25rem;
+  border-radius: 0.75rem;
+  overflow-x: auto;
+  font-family: var(--nbk-font-code);
+  font-size: 0.875rem;
+  line-height: 1.6;
+  margin: 1rem 0;
+}
+
+.nbk-editor-content pre code {
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  font-size: inherit;
+}
+
+/* Blockquotes */
+.nbk-editor-content blockquote {
+  border-left: 4px solid var(--nbk-primary);
+  padding: 0.75rem 1.5rem;
+  margin: 1rem 0;
+  color: var(--nbk-text-muted);
+  background: rgba(37, 99, 235, 0.03);
+  border-radius: 0 0.75rem 0.75rem 0;
+  font-style: italic;
+  font-size: 1.25rem;
+}
+
+.nbk-editor-content blockquote p {
+  margin-bottom: 0;
+}
+
+/* Lists */
+.nbk-editor-content ul,
+.nbk-editor-content ol {
+  padding-left: 1.75rem;
+  margin: 0.75rem 0;
+}
+
+.nbk-editor-content li {
+  margin-top: 0.375rem;
+  line-height: 1.7;
+}
+
+.nbk-editor-content li p {
+  margin-bottom: 0.25rem;
+}
+
+.nbk-editor-content li::marker {
+  color: var(--nbk-text-muted);
+}
+
+/* Images */
+.nbk-editor-content img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 0.75rem;
+  margin: 0.5rem 0;
+}
+
+/* Tables */
+.nbk-editor-content table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1rem 0;
+  font-size: 0.9375rem;
+}
+
+.nbk-editor-content th,
+.nbk-editor-content td {
+  border: 1px solid var(--nbk-border);
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+}
+
+.nbk-editor-content th {
+  background: #f9fafb;
+  font-weight: 600;
+}
+
+/* Horizontal rule */
+.nbk-editor-content hr {
+  border: none;
+  border-top: 2px solid var(--nbk-border);
+  margin: 2rem 0;
+}
+
+/* Highlight */
+.nbk-editor-content mark {
+  background: #fef08a;
+  padding: 0 0.125rem;
+  border-radius: 2px;
+}
+
+/* Task lists */
+.nbk-editor-content ul[data-type="taskList"] {
+  list-style: none;
+  padding-left: 0;
+}
+
+.nbk-editor-content ul[data-type="taskList"] li {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+
+.nbk-editor-content ul[data-type="taskList"] li input[type="checkbox"] {
+  margin-top: 0.375rem;
+}
+
+/* Placeholder */
+.nbk-editor-content p.is-editor-empty:first-child::before {
+  color: var(--nbk-text-muted);
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+
+/* Block hover effect */
+.nbk-editor-content > *:hover {
+  background: rgba(0, 0, 0, 0.01);
+  border-radius: 4px;
+}
+
+/* Selected blocks */
+.nbk-editor-content .has-focus,
+.nbk-editor-content ::selection {
+  background: rgba(35, 131, 226, 0.08);
+}
+
+.nbk-editor-content .is-empty::before {
+  color: var(--nbk-text-muted);
+  opacity: 0.5;
+}
+
+/* Bubble Menu */
+.nbk-bubble-menu {
+  display: flex;
+  gap: 0.125rem;
+  background: var(--nbk-text);
+  border-radius: 8px;
+  padding: 0.25rem;
+  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
+  animation: nbk-slide-in 0.15s var(--nbk-transition);
+}
+
+.nbk-bubble-menu button {
+  padding: 0.25rem 0.5rem;
+  border: none;
+  background: transparent;
+  color: #fff;
+  font-size: 0.8125rem;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.1s var(--nbk-transition);
+}
+
+.nbk-bubble-menu button:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.nbk-bubble-menu button.active {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+/* Slash Command Menu */
+.nbk-slash-menu {
+  background: var(--nbk-card-bg);
+  border: 1px solid var(--nbk-border);
+  border-radius: 8px;
+  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
+  max-height: 320px;
+  overflow-y: auto;
+  width: 280px;
+  z-index: 100;
+  animation: nbk-slide-in 0.15s var(--nbk-transition);
+}
+
+.nbk-slash-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.625rem 0.75rem;
+  width: 100%;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+  color: var(--nbk-text);
+  transition: all 0.15s var(--nbk-transition);
+}
+
+.nbk-slash-item:hover,
+.nbk-slash-item.selected {
+  background: var(--nbk-bg-secondary);
+  transform: translateX(2px);
+}
+
+.nbk-slash-icon {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--nbk-bg-secondary);
+  border-radius: 6px;
+  font-size: 1rem;
+  flex-shrink: 0;
+}
+
+.nbk-slash-title {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.nbk-slash-desc {
+  font-size: 0.75rem;
+  color: var(--nbk-text-muted);
+}
+
+/* Status Bar */
+.nbk-editor-status {
+  display: flex;
+  gap: 1rem;
+  padding: 0.5rem 1rem;
+  border-top: 1px solid var(--nbk-border);
+  font-size: 0.75rem;
+  color: var(--nbk-text-muted);
+}
+
+.nbk-saving {
+  color: var(--nbk-primary);
+}
+
+/* Block Styles — Callouts */
+.nbk-editor-content .nbk-callout {
+  display: flex;
+  gap: 0.75rem;
+  padding: 1rem;
+  border-radius: 0.75rem;
+  margin: 1rem 0;
+}
+
+.nbk-callout-info { background: #eff6ff; border-left: 4px solid #3b82f6; }
+.nbk-callout-warning { background: #fffbeb; border-left: 4px solid #f59e0b; }
+.nbk-callout-tip { background: #f0fdf4; border-left: 4px solid #22c55e; }
+.nbk-callout-danger { background: #fef2f2; border-left: 4px solid #ef4444; }
+
+.nbk-callout-icon {
+  font-size: 1.25rem;
+  flex-shrink: 0;
+}
+
+.nbk-callout-content {
+  flex: 1;
+}
+
+/* Block Styles — FAQ */
+.nbk-editor-content .nbk-faq {
+  margin: 1rem 0;
+}
+
+.nbk-faq-item {
+  border: 1px solid var(--nbk-border);
+  border-radius: 0.75rem;
+  margin-bottom: 0.5rem;
+  overflow: hidden;
+}
+
+.nbk-faq-question {
+  padding: 0.75rem 1rem;
+  background: var(--nbk-bg-secondary);
+  font-weight: 600;
+}
+
+.nbk-faq-answer {
+  padding: 0.75rem 1rem;
+}
+
+.nbk-toc-placeholder {
+  padding: 1rem;
+  background: var(--nbk-bg-secondary);
+  border-radius: 0.75rem;
+  color: var(--nbk-text-muted);
+  font-style: italic;
+  text-align: center;
+}
+
+/* Image loading state — shimmer */
+.nbk-editor-content img[data-loading="true"] {
+  opacity: 0.7;
+  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
+  background-size: 200% 100%;
+  animation: nbk-shimmer 1.5s infinite;
+}

package/dist/styles/globals.css

@@ -0,0 +1,270 @@
+/* NextBlogKit — Global CSS Variables & Base Styles */
+
+:root {
+  --nbk-primary: #2563eb;
+  --nbk-primary-hover: #1d4ed8;
+  --nbk-primary-light: #dbeafe;
+  --nbk-text: #1f2937;
+  --nbk-text-muted: #6b7280;
+  --nbk-bg: #ffffff;
+  --nbk-bg-secondary: #f9fafb;
+  --nbk-card-bg: #ffffff;
+  --nbk-border: #e5e7eb;
+  --nbk-border-focus: #2563eb;
+  --nbk-radius: 0.5rem;
+  --nbk-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+  --nbk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --nbk-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
+  --nbk-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
+  --nbk-font-heading: "Inter", system-ui, -apple-system, sans-serif;
+  --nbk-font-body: "Inter", system-ui, -apple-system, sans-serif;
+  --nbk-font-code: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;
+  --nbk-success: #10b981;
+  --nbk-warning: #f59e0b;
+  --nbk-danger: #ef4444;
+  --nbk-info: #3b82f6;
+  --nbk-transition: cubic-bezier(0.4, 0, 0.2, 1);
+  --nbk-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.1);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --nbk-text: #f3f4f6;
+    --nbk-text-muted: #9ca3af;
+    --nbk-bg: #111827;
+    --nbk-bg-secondary: #1f2937;
+    --nbk-card-bg: #1f2937;
+    --nbk-border: #374151;
+  }
+}
+
+/* Keyframes */
+@keyframes nbk-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(-8px) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes nbk-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes nbk-shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+/* Utility classes */
+.nbk-loading {
+  text-align: center;
+  padding: 2rem;
+  color: var(--nbk-text-muted);
+  font-family: var(--nbk-font-body);
+}
+
+.nbk-empty-state {
+  text-align: center;
+  padding: 3rem 1rem;
+  color: var(--nbk-text-muted);
+  font-family: var(--nbk-font-body);
+}
+
+.nbk-error {
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  color: #b91c1c;
+  padding: 0.75rem 1rem;
+  border-radius: var(--nbk-radius);
+  margin-bottom: 1rem;
+  font-family: var(--nbk-font-body);
+}
+
+.nbk-hidden {
+  display: none;
+}
+
+/* Buttons */
+.nbk-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border-radius: var(--nbk-radius);
+  font-family: var(--nbk-font-body);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  border: 1px solid var(--nbk-border);
+  background: var(--nbk-bg);
+  color: var(--nbk-text);
+  text-decoration: none;
+  transition: all 0.2s var(--nbk-transition);
+}
+
+.nbk-btn:hover {
+  background: var(--nbk-bg-secondary);
+}
+
+.nbk-btn-primary {
+  background: var(--nbk-primary);
+  color: #ffffff;
+  border-color: var(--nbk-primary);
+}
+
+.nbk-btn-primary:hover {
+  background: var(--nbk-primary-hover);
+}
+
+.nbk-btn-secondary {
+  background: var(--nbk-bg-secondary);
+}
+
+.nbk-btn-danger {
+  color: var(--nbk-danger);
+  border-color: var(--nbk-danger);
+}
+
+.nbk-btn-danger:hover {
+  background: var(--nbk-danger);
+  color: #ffffff;
+}
+
+.nbk-btn-sm {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+}
+
+.nbk-btn-icon {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem;
+  color: var(--nbk-text-muted);
+}
+
+.nbk-btn-icon:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+/* Form elements */
+.nbk-input,
+.nbk-select,
+.nbk-textarea {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--nbk-border);
+  border-radius: var(--nbk-radius);
+  font-family: var(--nbk-font-body);
+  font-size: 0.875rem;
+  background: var(--nbk-bg);
+  color: var(--nbk-text);
+  transition: border-color 0.2s var(--nbk-transition), box-shadow 0.2s var(--nbk-transition);
+}
+
+.nbk-input:focus,
+.nbk-select:focus,
+.nbk-textarea:focus {
+  outline: none;
+  border-color: var(--nbk-border-focus);
+  box-shadow: var(--nbk-focus-ring);
+}
+
+.nbk-label {
+  display: block;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  margin-bottom: 0.25rem;
+  color: var(--nbk-text);
+  font-family: var(--nbk-font-body);
+}
+
+.nbk-field {
+  margin-bottom: 1rem;
+}
+
+.nbk-checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  color: var(--nbk-text);
+  cursor: pointer;
+}
+
+.nbk-form-row {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.nbk-form-actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+}
+
+/* Badges */
+.nbk-badge {
+  display: inline-block;
+  padding: 0.125rem 0.5rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.nbk-badge-green { background: #d1fae5; color: #065f46; }
+.nbk-badge-yellow { background: #fef3c7; color: #92400e; }
+.nbk-badge-blue { background: #dbeafe; color: #1e40af; }
+.nbk-badge-gray { background: #f3f4f6; color: #4b5563; }
+
+/* Table */
+.nbk-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: var(--nbk-font-body);
+  font-size: 0.875rem;
+}
+
+.nbk-table th {
+  text-align: left;
+  padding: 0.75rem;
+  font-weight: 600;
+  border-bottom: 2px solid var(--nbk-border);
+  color: var(--nbk-text-muted);
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.nbk-table td {
+  padding: 0.75rem;
+  border-bottom: 1px solid var(--nbk-border);
+  color: var(--nbk-text);
+}
+
+.nbk-table tr:hover td {
+  background: var(--nbk-bg-secondary);
+}
+
+.nbk-th-checkbox { width: 2rem; }
+
+.nbk-actions {
+  display: flex;
+  gap: 0.375rem;
+}
+
+.nbk-text-muted { color: var(--nbk-text-muted); }