@imjp/writenex-astro 0.1.0

package/src/client/components/FrontmatterForm/FrontmatterForm.css

@@ -0,0 +1,468 @@
+/* FrontmatterForm Panel */
+.wn-frontmatter-panel {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  border-left: 1px solid var(--wn-overlay-10);
+  background-color: var(--wn-zinc-900);
+  overflow: hidden;
+  transition: width var(--wn-transition-slow) ease-in-out;
+}
+
+.wn-frontmatter-panel--open {
+  width: var(--wn-panel-md);
+}
+
+.wn-frontmatter-panel--closed {
+  width: 0;
+  border-left: none;
+}
+
+.wn-frontmatter-panel-inner {
+  display: flex;
+  flex-direction: column;
+  width: var(--wn-panel-md);
+  height: 100%;
+}
+
+/* Panel Header */
+.wn-frontmatter-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--wn-space-3) var(--wn-space-4);
+  border-bottom: 1px solid var(--wn-overlay-10);
+}
+
+.wn-frontmatter-title {
+  display: flex;
+  align-items: center;
+  gap: var(--wn-space-3);
+  font-size: var(--wn-font-base);
+  font-weight: 600;
+  color: var(--wn-zinc-50);
+}
+
+.wn-frontmatter-badge {
+  font-size: var(--wn-font-xs);
+  font-weight: 500;
+  padding: var(--wn-space-1) var(--wn-space-2);
+  border-radius: var(--wn-radius-sm);
+  background-color: var(--wn-overlay-10);
+  color: var(--wn-zinc-500);
+}
+
+.wn-frontmatter-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--wn-icon-btn-md);
+  height: var(--wn-icon-btn-md);
+  border-radius: var(--wn-radius-md);
+  border: none;
+  background: transparent;
+  color: var(--wn-zinc-500);
+  cursor: pointer;
+  transition: all var(--wn-transition-fast) ease;
+}
+
+.wn-frontmatter-close:hover {
+  background: var(--wn-overlay-10);
+  color: #fff;
+}
+
+/* Panel Content */
+.wn-frontmatter-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--wn-space-4);
+  /* Scroll indicator - fade effect at bottom when scrollable */
+  mask-image: linear-gradient(
+    to bottom,
+    black calc(100% - var(--wn-space-7)),
+    transparent 100%
+  );
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    black calc(100% - var(--wn-space-7)),
+    transparent 100%
+  );
+}
+
+/* Remove mask when scrolled to bottom or content fits */
+.wn-frontmatter-content:not(:has(.wn-frontmatter-fields)) {
+  mask-image: none;
+  -webkit-mask-image: none;
+}
+
+/* Empty State */
+.wn-frontmatter-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: var(--wn-space-7);
+  text-align: center;
+}
+
+.wn-frontmatter-empty-icon {
+  margin-bottom: var(--wn-space-4);
+  opacity: 0.3;
+  color: var(--wn-zinc-500);
+}
+
+.wn-frontmatter-empty-text {
+  font-size: var(--wn-font-base);
+  font-weight: 500;
+  color: var(--wn-zinc-500);
+  margin-bottom: var(--wn-space-1);
+}
+
+.wn-frontmatter-empty-hint {
+  font-size: var(--wn-font-xs);
+  color: var(--wn-zinc-600);
+}
+
+/* Form Fields */
+.wn-frontmatter-fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wn-space-4);
+}
+
+.wn-frontmatter-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wn-space-1);
+}
+
+.wn-frontmatter-field--full {
+  grid-column: span 2;
+}
+
+.wn-frontmatter-field--row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--wn-space-4);
+}
+
+.wn-frontmatter-label {
+  font-size: var(--wn-font-xs);
+  font-weight: 600;
+  color: var(--wn-zinc-500);
+}
+
+.wn-frontmatter-required {
+  color: var(--wn-error-500);
+  margin-left: var(--wn-space-1);
+}
+
+.wn-frontmatter-input,
+.wn-frontmatter-textarea,
+.wn-frontmatter-select {
+  padding: var(--wn-space-3);
+  background: var(--wn-zinc-950);
+  border: 1px solid var(--wn-overlay-10);
+  border-radius: var(--wn-radius-md);
+  color: var(--wn-zinc-50);
+  font-size: var(--wn-font-sm);
+  font-family: inherit;
+  transition: border-color var(--wn-transition-fast) ease;
+}
+
+.wn-frontmatter-input:focus,
+.wn-frontmatter-textarea:focus,
+.wn-frontmatter-select:focus {
+  outline: none;
+  border-color: var(--wn-brand-500);
+}
+
+.wn-frontmatter-input:disabled,
+.wn-frontmatter-textarea:disabled,
+.wn-frontmatter-select:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.wn-frontmatter-input::placeholder,
+.wn-frontmatter-textarea::placeholder {
+  color: var(--wn-zinc-600);
+}
+
+/* Date input calendar icon - invert for dark mode visibility */
+.wn-frontmatter-input[type="date"]::-webkit-calendar-picker-indicator {
+  filter: invert(1);
+  opacity: 0.5;
+  cursor: pointer;
+}
+
+.wn-frontmatter-input[type="date"]::-webkit-calendar-picker-indicator:hover {
+  opacity: 0.8;
+}
+
+.wn-frontmatter-textarea {
+  resize: vertical;
+  min-height: 72px;
+  max-height: 200px;
+  field-sizing: content; /* Auto-expand based on content (modern browsers) */
+}
+
+.wn-frontmatter-select {
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  background-size: 16px;
+  background-position: right var(--wn-space-3) center;
+  background-repeat: no-repeat;
+  padding-right: var(--wn-space-8);
+}
+
+.wn-frontmatter-hint {
+  font-size: var(--wn-font-xs);
+  color: var(--wn-zinc-600);
+}
+
+/* Checkbox Field */
+.wn-frontmatter-checkbox-field {
+  display: flex;
+  align-items: center;
+  gap: var(--wn-space-3);
+  padding: var(--wn-space-3) 0;
+}
+
+.wn-frontmatter-checkbox {
+  width: 16px;
+  height: 16px;
+  accent-color: var(--wn-brand-500);
+  cursor: pointer;
+}
+
+.wn-frontmatter-checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: var(--wn-space-3);
+  font-size: var(--wn-font-sm);
+  color: var(--wn-zinc-50);
+  cursor: pointer;
+}
+
+.wn-frontmatter-checkbox-hint {
+  margin-left: auto;
+  font-size: var(--wn-font-xs);
+  color: var(--wn-zinc-600);
+}
+
+/* Tags / Array Field */
+.wn-frontmatter-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--wn-space-2);
+  margin-bottom: var(--wn-space-3);
+}
+
+.wn-frontmatter-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--wn-space-1);
+  padding: var(--wn-space-1) var(--wn-space-3);
+  background: var(--wn-brand-alpha-10);
+  border-radius: var(--wn-radius-sm);
+  font-size: var(--wn-font-xs);
+  color: var(--wn-brand-400);
+}
+
+.wn-frontmatter-tag-remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  border-radius: var(--wn-radius-full);
+  border: none;
+  background: transparent;
+  color: var(--wn-zinc-500);
+  cursor: pointer;
+  transition: all var(--wn-transition-fast) ease;
+}
+
+.wn-frontmatter-tag-remove:hover {
+  background: var(--wn-error-alpha-20);
+  color: var(--wn-error-400);
+}
+
+/* Image Field */
+.wn-frontmatter-image-field {
+  display: flex;
+  gap: var(--wn-space-3);
+}
+
+.wn-frontmatter-image-field .wn-frontmatter-input {
+  flex: 1;
+}
+
+.wn-frontmatter-image-preview {
+  position: relative;
+  width: 100%;
+  border-radius: var(--wn-radius-md);
+  overflow: hidden;
+  background: var(--wn-zinc-950);
+  border: 1px solid var(--wn-overlay-10);
+  margin-bottom: var(--wn-space-3);
+}
+
+.wn-frontmatter-image-preview img {
+  width: 100%;
+  height: auto;
+  max-height: 200px;
+  object-fit: contain;
+  display: block;
+}
+
+.wn-frontmatter-upload-btn {
+  padding: var(--wn-space-3) var(--wn-space-4);
+  background: transparent;
+  border: 1px solid var(--wn-overlay-10);
+  border-radius: var(--wn-radius-md);
+  color: var(--wn-zinc-400);
+  font-size: var(--wn-font-xs);
+  cursor: pointer;
+  transition: all var(--wn-transition-fast) ease;
+}
+
+.wn-frontmatter-upload-btn:hover {
+  background: var(--wn-overlay-5);
+  color: var(--wn-zinc-50);
+}
+
+.wn-frontmatter-upload-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Section Divider */
+.wn-frontmatter-divider {
+  height: 1px;
+  background: var(--wn-overlay-10);
+  margin: var(--wn-space-1) 0;
+}
+
+/* ============================================================================
+   LIGHT MODE OVERRIDES
+   ============================================================================ */
+
+.wn-light .wn-frontmatter-panel {
+  border-left-color: var(--wn-overlay-light-10);
+  background-color: #fff;
+}
+
+.wn-light .wn-frontmatter-header {
+  border-bottom-color: var(--wn-overlay-light-10);
+}
+
+.wn-light .wn-frontmatter-title {
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-frontmatter-badge {
+  background-color: var(--wn-overlay-light-5);
+  color: var(--wn-zinc-500);
+}
+
+.wn-light .wn-frontmatter-close {
+  color: var(--wn-zinc-500);
+}
+
+.wn-light .wn-frontmatter-close:hover {
+  background: var(--wn-overlay-light-5);
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-frontmatter-empty-icon {
+  color: var(--wn-zinc-400);
+}
+
+.wn-light .wn-frontmatter-empty-text {
+  color: var(--wn-zinc-500);
+}
+
+.wn-light .wn-frontmatter-empty-hint {
+  color: var(--wn-zinc-400);
+}
+
+.wn-light .wn-frontmatter-label {
+  color: var(--wn-zinc-600);
+}
+
+.wn-light .wn-frontmatter-input,
+.wn-light .wn-frontmatter-textarea,
+.wn-light .wn-frontmatter-select {
+  background: var(--wn-zinc-50);
+  border-color: var(--wn-overlay-light-10);
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-frontmatter-input::placeholder,
+.wn-light .wn-frontmatter-textarea::placeholder {
+  color: var(--wn-zinc-400);
+}
+
+/* Date input calendar icon - no invert for light mode */
+.wn-light
+  .wn-frontmatter-input[type="date"]::-webkit-calendar-picker-indicator {
+  filter: none;
+  opacity: 0.6;
+}
+
+.wn-light
+  .wn-frontmatter-input[type="date"]::-webkit-calendar-picker-indicator:hover {
+  opacity: 1;
+}
+
+.wn-light .wn-frontmatter-select {
+  background-color: var(--wn-zinc-50);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2352525b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  background-size: 16px;
+  background-position: right var(--wn-space-3) center;
+  background-repeat: no-repeat;
+}
+
+.wn-light .wn-frontmatter-hint {
+  color: var(--wn-zinc-400);
+}
+
+.wn-light .wn-frontmatter-checkbox-label {
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-frontmatter-checkbox-hint {
+  color: var(--wn-zinc-400);
+}
+
+.wn-light .wn-frontmatter-tag {
+  background: var(--wn-brand-alpha-10);
+  color: var(--wn-brand-600);
+}
+
+.wn-light .wn-frontmatter-tag-remove {
+  color: var(--wn-zinc-500);
+}
+
+.wn-light .wn-frontmatter-image-preview {
+  background: var(--wn-zinc-50);
+  border-color: var(--wn-overlay-light-10);
+}
+
+.wn-light .wn-frontmatter-upload-btn {
+  border-color: var(--wn-overlay-light-10);
+  color: var(--wn-zinc-600);
+}
+
+.wn-light .wn-frontmatter-upload-btn:hover {
+  background: var(--wn-overlay-light-5);
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-frontmatter-divider {
+  background: var(--wn-overlay-light-10);
+}