nca-ai-cms-astro-plugin 1.0.0

package/src/components/editor/styles.ts

@@ -0,0 +1,597 @@
+import type React from 'react';
+
+const v = (name: string, fallback: string): string =>
+  `var(${name}, ${fallback})`;
+
+const surface = v('--color-surface', '#141416');
+const border = v('--color-border', '#2a2a2e');
+const text = v('--color-text', '#faf9f7');
+const textMuted = v('--color-text-muted', '#b8b5b0');
+const bg = v('--color-bg', '#0a0a0b');
+const primary = v('--color-primary', '#e63946');
+const success = v('--color-success', '#4ade80');
+const error = v('--color-error', '#f87171');
+const surfaceElevated = v('--color-surface-elevated', '#1a1a1d');
+const surfaceAccent = v('--color-surface-accent', '#222226');
+const borderAccent = v('--color-border-accent', '#3a3a40');
+const textAccent = v('--color-text-accent', '#e8e6e1');
+const fontDisplay = v('--font-display', '"Playfair Display", Georgia, serif');
+const fontMono = v('--font-mono', '"JetBrains Mono", monospace');
+
+export const styles: Record<string, React.CSSProperties> = {
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '1.5rem',
+  },
+  panel: {
+    background: surface,
+    border: `1px solid ${border}`,
+    borderRadius: '12px',
+    padding: '1.5rem',
+  },
+  headerRow: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: '1rem',
+  },
+  heading: {
+    fontSize: '1.25rem',
+    fontWeight: 600,
+    color: text,
+    margin: 0,
+    fontFamily: fontDisplay,
+  },
+  logoutButton: {
+    background: 'transparent',
+    border: `1px solid ${border}`,
+    color: textMuted,
+    padding: '0.4rem 1rem',
+    borderRadius: '6px',
+    cursor: 'pointer',
+    fontSize: '0.85rem',
+  },
+  field: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '0.5rem',
+    marginBottom: '1rem',
+  },
+  label: {
+    fontSize: '0.875rem',
+    fontWeight: 500,
+    color: textAccent,
+  },
+  input: {
+    background: bg,
+    border: `1px solid ${border}`,
+    borderRadius: '8px',
+    padding: '0.75rem 1rem',
+    color: text,
+    fontSize: '0.95rem',
+    outline: 'none',
+    width: '100%',
+    boxSizing: 'border-box' as const,
+  },
+  hint: {
+    fontSize: '0.8rem',
+    color: textMuted,
+  },
+  button: {
+    background: surfaceAccent,
+    border: `1px solid ${borderAccent}`,
+    color: text,
+    padding: '0.6rem 1.2rem',
+    borderRadius: '8px',
+    cursor: 'pointer',
+    fontSize: '0.9rem',
+    fontWeight: 500,
+    transition: 'all 0.15s ease',
+  },
+  generateButton: {
+    background: primary,
+    border: 'none',
+    color: '#fff',
+    padding: '0.75rem 1.5rem',
+    borderRadius: '8px',
+    cursor: 'pointer',
+    fontSize: '1rem',
+    fontWeight: 600,
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '0.5rem',
+    transition: 'opacity 0.15s ease',
+  },
+  buttonContent: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.5rem',
+  },
+  spinner: {
+    width: '16px',
+    height: '16px',
+    border: '2px solid rgba(255,255,255,0.3)',
+    borderTopColor: '#fff',
+    borderRadius: '50%',
+    animation: 'spin 0.6s linear infinite',
+    flexShrink: 0,
+  },
+  actionSection: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '0.75rem',
+    marginTop: '1rem',
+  },
+  regenerateRow: {
+    display: 'flex',
+    gap: '0.5rem',
+  },
+  secondaryButton: {
+    background: surfaceAccent,
+    border: `1px solid ${borderAccent}`,
+    color: textAccent,
+    padding: '0.5rem 1rem',
+    borderRadius: '6px',
+    cursor: 'pointer',
+    fontSize: '0.85rem',
+    fontWeight: 500,
+    flex: 1,
+  },
+  publishButton: {
+    background: success,
+    border: 'none',
+    color: '#000',
+    padding: '0.75rem 1.5rem',
+    borderRadius: '8px',
+    cursor: 'pointer',
+    fontSize: '1rem',
+    fontWeight: 600,
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '0.5rem',
+  },
+  successBox: {
+    background: surfaceElevated,
+    border: `1px solid ${success}`,
+    borderRadius: '12px',
+    padding: '1.5rem',
+    textAlign: 'center' as const,
+  },
+  successIcon: {
+    fontSize: '2rem',
+    marginBottom: '0.5rem',
+  },
+  successTitle: {
+    fontSize: '1.1rem',
+    fontWeight: 600,
+    color: success,
+    marginBottom: '0.5rem',
+  },
+  successPath: {
+    fontSize: '0.85rem',
+    color: textMuted,
+    fontFamily: fontMono,
+    wordBreak: 'break-all' as const,
+  },
+  newButton: {
+    background: primary,
+    border: 'none',
+    color: '#fff',
+    padding: '0.6rem 1.2rem',
+    borderRadius: '8px',
+    cursor: 'pointer',
+    fontSize: '0.9rem',
+    fontWeight: 500,
+    marginTop: '1rem',
+  },
+  error: {
+    background: 'rgba(248,113,113,0.1)',
+    border: `1px solid ${error}`,
+    borderRadius: '8px',
+    padding: '0.75rem 1rem',
+    color: error,
+    fontSize: '0.9rem',
+    marginTop: '0.5rem',
+  },
+  previewArea: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '1.5rem',
+  },
+  preview: {
+    background: surface,
+    border: `1px solid ${border}`,
+    borderRadius: '12px',
+    overflow: 'hidden',
+  },
+  publishedPreview: {
+    background: surface,
+    border: `1px solid ${success}`,
+    borderRadius: '12px',
+    overflow: 'hidden',
+  },
+  previewHeader: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '1rem 1.25rem',
+    borderBottom: `1px solid ${border}`,
+    background: surfaceElevated,
+  },
+  previewTitle: {
+    fontSize: '0.9rem',
+    fontWeight: 600,
+    color: textAccent,
+  },
+  publishedBadge: {
+    background: success,
+    color: '#000',
+    padding: '0.2rem 0.6rem',
+    borderRadius: '4px',
+    fontSize: '0.75rem',
+    fontWeight: 600,
+  },
+  filepath: {
+    padding: '0.75rem 1.25rem',
+    background: bg,
+    fontFamily: fontMono,
+    fontSize: '0.8rem',
+    color: textMuted,
+    borderBottom: `1px solid ${border}`,
+  },
+  frontmatter: {
+    padding: '1rem 1.25rem',
+    borderBottom: `1px solid ${border}`,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '0.4rem',
+  },
+  frontmatterRow: {
+    display: 'flex',
+    gap: '0.5rem',
+    fontSize: '0.85rem',
+  },
+  frontmatterLabel: {
+    color: textMuted,
+    fontWeight: 500,
+    minWidth: '100px',
+  },
+  frontmatterValue: {
+    color: text,
+    flex: 1,
+  },
+  content: {
+    padding: '1.25rem',
+  },
+  markdown: {
+    color: text,
+    lineHeight: 1.7,
+    fontSize: '0.95rem',
+  },
+  imagePreview: {
+    background: surface,
+    border: `1px solid ${border}`,
+    borderRadius: '12px',
+    overflow: 'hidden',
+  },
+  image: {
+    width: '100%',
+    height: 'auto',
+    display: 'block',
+  },
+  imageAlt: {
+    padding: '0.75rem 1.25rem',
+    fontSize: '0.8rem',
+    color: textMuted,
+    fontStyle: 'italic',
+    borderTop: `1px solid ${border}`,
+  },
+  tabNav: {
+    display: 'flex',
+    gap: '0.25rem',
+    borderBottom: `1px solid ${border}`,
+    marginBottom: '1.5rem',
+  },
+  tab: {
+    background: 'transparent',
+    border: 'none',
+    borderBottom: '2px solid transparent',
+    color: textMuted,
+    padding: '0.75rem 1.25rem',
+    cursor: 'pointer',
+    fontSize: '0.95rem',
+    fontWeight: 500,
+    transition: 'all 0.15s ease',
+  },
+  tabActive: {
+    background: 'transparent',
+    border: 'none',
+    borderBottom: `2px solid ${primary}`,
+    color: text,
+    padding: '0.75rem 1.25rem',
+    cursor: 'pointer',
+    fontSize: '0.95rem',
+    fontWeight: 600,
+    transition: 'all 0.15s ease',
+  },
+  panelFullWidth: {
+    background: surface,
+    border: `1px solid ${border}`,
+    borderRadius: '12px',
+    padding: '1.5rem',
+    gridColumn: '1 / -1',
+  },
+  settingsContent: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '1rem',
+  },
+  subTabNav: {
+    display: 'flex',
+    gap: '0.25rem',
+    borderBottom: `1px solid ${border}`,
+    paddingBottom: '0',
+    marginBottom: '1.25rem',
+    flexWrap: 'wrap' as const,
+  },
+  subTab: {
+    background: 'transparent',
+    border: 'none',
+    borderBottom: '2px solid transparent',
+    color: textMuted,
+    padding: '0.5rem 1rem',
+    cursor: 'pointer',
+    fontSize: '0.85rem',
+    fontWeight: 500,
+  },
+  subTabActive: {
+    background: 'transparent',
+    border: 'none',
+    borderBottom: `2px solid ${primary}`,
+    color: text,
+    padding: '0.5rem 1rem',
+    cursor: 'pointer',
+    fontSize: '0.85rem',
+    fontWeight: 600,
+  },
+  cardGrid: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))',
+    gap: '1rem',
+  },
+  settingsCard: {
+    background: surfaceElevated,
+    border: `1px solid ${border}`,
+    borderRadius: '10px',
+    overflow: 'hidden',
+  },
+  settingsCardHeader: {
+    padding: '1rem',
+    borderBottom: `1px solid ${border}`,
+    background: surfaceAccent,
+  },
+  settingsItemLabel: {
+    fontSize: '0.95rem',
+    fontWeight: 600,
+    color: text,
+    margin: 0,
+  },
+  settingsItemCategory: {
+    fontSize: '0.75rem',
+    color: textMuted,
+    marginTop: '0.25rem',
+  },
+  settingsItemValue: {
+    padding: '1rem',
+    fontSize: '0.85rem',
+    color: textMuted,
+    lineHeight: 1.5,
+    maxHeight: '120px',
+    overflow: 'auto',
+  },
+  cardPreview: {
+    padding: '1rem',
+    fontSize: '0.85rem',
+    color: textMuted,
+    lineHeight: 1.5,
+    maxHeight: '120px',
+    overflow: 'auto',
+  },
+  editArea: {
+    padding: '1rem',
+  },
+  textarea: {
+    width: '100%',
+    minHeight: '150px',
+    background: bg,
+    border: `1px solid ${border}`,
+    borderRadius: '8px',
+    padding: '0.75rem',
+    color: text,
+    fontSize: '0.85rem',
+    fontFamily: fontMono,
+    resize: 'vertical' as const,
+    outline: 'none',
+    boxSizing: 'border-box' as const,
+  },
+  editButtons: {
+    display: 'flex',
+    gap: '0.5rem',
+    marginTop: '0.75rem',
+  },
+  smallButton: {
+    padding: '0.4rem 0.8rem',
+    borderRadius: '6px',
+    fontSize: '0.8rem',
+    fontWeight: 500,
+    cursor: 'pointer',
+    border: 'none',
+  },
+  editButton: {
+    background: surfaceAccent,
+    border: `1px solid ${borderAccent}`,
+    color: textAccent,
+    padding: '0.4rem 0.8rem',
+    borderRadius: '6px',
+    fontSize: '0.8rem',
+    fontWeight: 500,
+    cursor: 'pointer',
+  },
+  saveButton: {
+    background: primary,
+    border: 'none',
+    color: '#fff',
+    padding: '0.4rem 0.8rem',
+    borderRadius: '6px',
+    fontSize: '0.8rem',
+    fontWeight: 500,
+    cursor: 'pointer',
+  },
+  cancelButton: {
+    background: 'transparent',
+    border: `1px solid ${border}`,
+    color: textMuted,
+    padding: '0.4rem 0.8rem',
+    borderRadius: '6px',
+    fontSize: '0.8rem',
+    fontWeight: 500,
+    cursor: 'pointer',
+  },
+  loadingBox: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '3rem',
+    color: textMuted,
+    fontSize: '0.95rem',
+  },
+  plannerContent: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '1.5rem',
+  },
+  plannerForm: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '1rem',
+    background: surfaceElevated,
+    border: `1px solid ${border}`,
+    borderRadius: '10px',
+    padding: '1.25rem',
+  },
+  plannerFormRow: {
+    display: 'grid',
+    gridTemplateColumns: '1fr 1fr auto',
+    gap: '0.75rem',
+    alignItems: 'end',
+  },
+  plannerList: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '0.75rem',
+  },
+  plannerCard: {
+    background: surfaceElevated,
+    border: `1px solid ${border}`,
+    borderRadius: '10px',
+    overflow: 'hidden',
+  },
+  plannerCardHeader: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '1rem 1.25rem',
+    borderBottom: `1px solid ${border}`,
+    background: surfaceAccent,
+  },
+  plannerCardMeta: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.75rem',
+  },
+  plannerDate: {
+    fontSize: '0.85rem',
+    color: textMuted,
+    fontFamily: fontMono,
+  },
+  statusBadge: {
+    padding: '0.15rem 0.5rem',
+    borderRadius: '4px',
+    fontSize: '0.75rem',
+    fontWeight: 600,
+    textTransform: 'uppercase' as const,
+  },
+  plannerInputType: {
+    fontSize: '0.75rem',
+    color: textMuted,
+    fontStyle: 'italic',
+  },
+  plannerCardActions: {
+    display: 'flex',
+    gap: '0.5rem',
+  },
+  plannerCardBody: {
+    padding: '1rem 1.25rem',
+  },
+  plannerInput: {
+    fontSize: '0.9rem',
+    color: text,
+    lineHeight: 1.5,
+    marginBottom: '0.75rem',
+  },
+  plannerImagePreview: {
+    marginTop: '0.75rem',
+    borderRadius: '8px',
+    overflow: 'hidden',
+    border: `1px solid ${border}`,
+  },
+  plannerImage: {
+    width: '100%',
+    maxHeight: '200px',
+    objectFit: 'cover' as const,
+    display: 'block',
+  },
+  plannerPreview: {
+    marginTop: '0.75rem',
+    padding: '0.75rem',
+    background: bg,
+    borderRadius: '8px',
+    fontSize: '0.85rem',
+    color: textMuted,
+    lineHeight: 1.5,
+  },
+  plannerPublishedPath: {
+    marginTop: '0.5rem',
+    fontFamily: fontMono,
+    fontSize: '0.8rem',
+    color: success,
+  },
+  previewLink: {
+    color: primary,
+    textDecoration: 'none',
+    fontSize: '0.85rem',
+    fontWeight: 500,
+  },
+  srOnly: {
+    position: 'absolute' as const,
+    width: '1px',
+    height: '1px',
+    padding: 0,
+    margin: '-1px',
+    overflow: 'hidden',
+    clip: 'rect(0,0,0,0)',
+    whiteSpace: 'nowrap' as const,
+    borderWidth: 0,
+  },
+  emptyState: {
+    textAlign: 'center' as const,
+    padding: '3rem',
+    color: textMuted,
+    fontSize: '0.95rem',
+  },
+};

package/src/components/editor/types.ts

@@ -0,0 +1,49 @@
+export type TabType = 'generate' | 'planner' | 'settings';
+
+export type SettingsSubTab =
+  | 'homepage'
+  | 'content-ai'
+  | 'analysis-ai'
+  | 'image-ai'
+  | 'website';
+
+export interface Prompt {
+  id: string;
+  name: string;
+  category: string;
+  promptText: string;
+}
+
+export interface Setting {
+  key: string;
+  value: string;
+}
+
+export interface GeneratedArticle {
+  title: string;
+  description: string;
+  content: string;
+  filepath: string;
+}
+
+export interface GeneratedImage {
+  url: string;
+  alt: string;
+  filepath: string;
+}
+
+export interface ScheduledPostData {
+  id: string;
+  input: string;
+  inputType: string;
+  scheduledDate: string;
+  status: string;
+  generatedTitle?: string;
+  generatedDescription?: string;
+  generatedContent?: string;
+  generatedTags?: string;
+  generatedImageData?: string;
+  generatedImageAlt?: string;
+  publishedPath?: string;
+  createdAt: string;
+}

package/src/components/editor/useTabNavigation.ts

@@ -0,0 +1,69 @@
+import { useCallback, useRef, type RefObject } from 'react';
+
+interface UseTabNavigationOptions {
+  tabCount: number;
+  activeIndex: number;
+  onActivate: (index: number) => void;
+}
+
+interface UseTabNavigationReturn {
+  handleTabKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+  tabListRef: RefObject<HTMLDivElement | null>;
+}
+
+export function useTabNavigation({
+  tabCount,
+  activeIndex,
+  onActivate,
+}: UseTabNavigationOptions): UseTabNavigationReturn {
+  const tabListRef = useRef<HTMLDivElement | null>(null);
+
+  const focusTab = useCallback(
+    (index: number) => {
+      if (!tabListRef.current) return;
+      const buttons =
+        tabListRef.current.querySelectorAll<HTMLButtonElement>(
+          '[role="tab"]',
+        );
+      if (buttons[index]) {
+        buttons[index].focus();
+        onActivate(index);
+      }
+    },
+    [onActivate],
+  );
+
+  const handleTabKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLButtonElement>) => {
+      let newIndex = activeIndex;
+
+      switch (event.key) {
+        case 'ArrowRight':
+        case 'ArrowDown':
+          event.preventDefault();
+          newIndex = (activeIndex + 1) % tabCount;
+          break;
+        case 'ArrowLeft':
+        case 'ArrowUp':
+          event.preventDefault();
+          newIndex = (activeIndex - 1 + tabCount) % tabCount;
+          break;
+        case 'Home':
+          event.preventDefault();
+          newIndex = 0;
+          break;
+        case 'End':
+          event.preventDefault();
+          newIndex = tabCount - 1;
+          break;
+        default:
+          return;
+      }
+
+      focusTab(newIndex);
+    },
+    [activeIndex, tabCount, focusTab],
+  );
+
+  return { handleTabKeyDown, tabListRef };
+}

package/src/config.d.ts

@@ -0,0 +1,4 @@
+declare module 'virtual:nca-ai-cms/config' {
+  export const contentPath: string;
+  export const autoPublish: boolean;
+}