@imjp/writenex-astro 0.1.0

package/src/client/components/SkipLink/SkipLink.tsx

@@ -0,0 +1,67 @@
+/**
+ * @fileoverview Skip Link component for keyboard navigation
+ *
+ * A visually hidden link that becomes visible on focus, allowing keyboard
+ * users to skip repetitive navigation and jump directly to main content.
+ * This is a critical accessibility feature for WCAG 2.1 AA compliance.
+ *
+ * @module @writenex/astro/client/components/SkipLink
+ * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/bypass-blocks.html}
+ */
+
+import { useCallback } from "react";
+import "./SkipLink.css";
+
+/**
+ * Props for the SkipLink component
+ */
+export interface SkipLinkProps {
+  /** Target element ID to skip to (without the # prefix) */
+  targetId: string;
+  /** Link text for screen readers */
+  children: React.ReactNode;
+}
+
+/**
+ * Skip link component for keyboard accessibility
+ *
+ * Renders a visually hidden link that becomes visible when focused.
+ * When activated, it moves focus to the target element specified by targetId.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <SkipLink targetId="main-content">Skip to main content</SkipLink>
+ * ```
+ */
+export function SkipLink({
+  targetId,
+  children,
+}: SkipLinkProps): React.ReactElement {
+  /**
+   * Handle click to move focus to target element
+   */
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLAnchorElement>) => {
+      event.preventDefault();
+
+      const targetElement = document.getElementById(targetId);
+      if (targetElement) {
+        // Make the target focusable if it isn't already
+        if (!targetElement.hasAttribute("tabindex")) {
+          targetElement.setAttribute("tabindex", "-1");
+        }
+        targetElement.focus();
+        // Scroll the element into view
+        targetElement.scrollIntoView({ behavior: "smooth", block: "start" });
+      }
+    },
+    [targetId]
+  );
+
+  return (
+    <a href={`#${targetId}`} className="wn-skip-link" onClick={handleClick}>
+      {children}
+    </a>
+  );
+}

package/src/client/components/SkipLink/index.ts

@@ -0,0 +1,7 @@
+/**
+ * @fileoverview SkipLink component exports
+ * @module @writenex/astro/client/components/SkipLink
+ */
+
+export { SkipLink } from "./SkipLink";
+export type { SkipLinkProps } from "./SkipLink";

package/src/client/components/UnsavedChangesModal/UnsavedChangesModal.css

@@ -0,0 +1,233 @@
+/**
+ * @fileoverview UnsavedChangesModal styles
+ *
+ * Modal styling for unsaved changes confirmation dialog.
+ */
+
+/* ============================================================================
+   MODAL OVERLAY
+   ============================================================================ */
+
+.wn-unsaved-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--wn-z-modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--wn-backdrop);
+  animation: wn-unsaved-modal-fadeIn var(--wn-transition-fast) ease-out;
+}
+
+@keyframes wn-unsaved-modal-fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* ============================================================================
+   MODAL CONTAINER
+   ============================================================================ */
+
+.wn-unsaved-modal {
+  width: 100%;
+  max-width: var(--wn-modal-sm);
+  overflow: hidden;
+  border-radius: var(--wn-radius-lg);
+  border: 1px solid var(--wn-zinc-700);
+  background-color: var(--wn-zinc-900);
+  animation: wn-unsaved-modal-zoomIn var(--wn-transition-fast) ease-out;
+}
+
+@keyframes wn-unsaved-modal-zoomIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+/* ============================================================================
+   MODAL HEADER
+   ============================================================================ */
+
+.wn-unsaved-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--wn-space-5) var(--wn-space-6);
+  border-bottom: 1px solid var(--wn-zinc-700);
+}
+
+.wn-unsaved-modal-header-content {
+  display: flex;
+  align-items: center;
+  gap: var(--wn-space-4);
+}
+
+.wn-unsaved-modal-icon {
+  color: var(--wn-warning-500);
+}
+
+.wn-unsaved-modal-title {
+  font-size: var(--wn-font-md);
+  font-weight: 600;
+  color: var(--wn-zinc-50);
+  margin: 0;
+}
+
+.wn-unsaved-modal-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--wn-icon-btn-md);
+  height: var(--wn-icon-btn-md);
+  padding: 0;
+  border: none;
+  border-radius: var(--wn-radius-md);
+  background-color: transparent;
+  color: var(--wn-zinc-400);
+  cursor: pointer;
+  transition:
+    background-color var(--wn-transition-fast),
+    color var(--wn-transition-fast);
+}
+
+.wn-unsaved-modal-close:hover:not(:disabled) {
+  background-color: var(--wn-overlay-10);
+  color: var(--wn-zinc-50);
+}
+
+.wn-unsaved-modal-close:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ============================================================================
+   MODAL BODY
+   ============================================================================ */
+
+.wn-unsaved-modal-body {
+  padding: var(--wn-space-6);
+}
+
+.wn-unsaved-modal-text {
+  font-size: var(--wn-font-base);
+  color: var(--wn-zinc-400);
+  margin: 0;
+  line-height: 1.5;
+}
+
+/* ============================================================================
+   MODAL FOOTER
+   ============================================================================ */
+
+.wn-unsaved-modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--wn-space-4);
+  padding: var(--wn-space-5) var(--wn-space-6);
+  border-top: 1px solid var(--wn-zinc-700);
+  background-color: var(--wn-overlay-light-10);
+}
+
+/* Buttons */
+.wn-unsaved-modal-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--wn-space-3);
+  padding: var(--wn-space-3) var(--wn-space-5);
+  border-radius: var(--wn-radius-md);
+  font-size: var(--wn-font-base);
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background-color var(--wn-transition-fast),
+    color var(--wn-transition-fast),
+    border-color var(--wn-transition-fast);
+}
+
+.wn-unsaved-modal-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Don't Save button - subtle danger styling */
+.wn-unsaved-modal-btn--secondary {
+  background-color: transparent;
+  border: 1px solid var(--wn-zinc-700);
+  color: var(--wn-error-400);
+}
+
+.wn-unsaved-modal-btn--secondary:hover:not(:disabled) {
+  background-color: var(--wn-error-alpha-10);
+  color: #fca5a5;
+}
+
+/* Save button - primary action */
+.wn-unsaved-modal-btn--primary {
+  background-color: var(--wn-brand-500);
+  border: 1px solid var(--wn-brand-500);
+  color: white;
+}
+
+.wn-unsaved-modal-btn--primary:hover:not(:disabled) {
+  background-color: var(--wn-brand-600);
+  border-color: var(--wn-brand-600);
+}
+
+/* ============================================================================
+   LIGHT MODE OVERRIDES
+   ============================================================================ */
+
+.wn-light .wn-unsaved-modal-overlay {
+  background-color: var(--wn-backdrop-light);
+}
+
+.wn-light .wn-unsaved-modal {
+  border-color: var(--wn-zinc-200);
+  background-color: #fff;
+}
+
+.wn-light .wn-unsaved-modal-header {
+  border-bottom-color: var(--wn-zinc-200);
+}
+
+.wn-light .wn-unsaved-modal-title {
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-unsaved-modal-close {
+  color: var(--wn-zinc-500);
+}
+
+.wn-light .wn-unsaved-modal-close:hover:not(:disabled) {
+  background-color: var(--wn-overlay-light-5);
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-unsaved-modal-text {
+  color: var(--wn-zinc-600);
+}
+
+.wn-light .wn-unsaved-modal-footer {
+  border-top-color: var(--wn-zinc-200);
+  background-color: var(--wn-zinc-50);
+}
+
+.wn-light .wn-unsaved-modal-btn--secondary {
+  border-color: var(--wn-zinc-200);
+  color: var(--wn-error-600);
+}
+
+.wn-light .wn-unsaved-modal-btn--secondary:hover:not(:disabled) {
+  background-color: var(--wn-error-alpha-10);
+  color: #b91c1c;
+}

package/src/client/components/UnsavedChangesModal/UnsavedChangesModal.tsx

@@ -0,0 +1,160 @@
+/**
+ * @fileoverview Unsaved changes confirmation modal
+ *
+ * Modal dialog that prompts users when they attempt to navigate away
+ * from content with unsaved changes. Provides options to save or discard.
+ * Cancel is available via X button, clicking outside, or pressing Escape.
+ * Includes focus trap for accessibility compliance.
+ *
+ * @module @writenex/astro/client/components/UnsavedChangesModal
+ */
+
+import { useCallback, useEffect, useRef } from "react";
+import { X, AlertTriangle } from "lucide-react";
+import { useFocusTrap } from "../../hooks/useFocusTrap";
+import "./UnsavedChangesModal.css";
+
+/**
+ * Props for UnsavedChangesModal component
+ */
+interface UnsavedChangesModalProps {
+  /** Whether the modal is open */
+  isOpen: boolean;
+  /** Callback to close the modal (cancel action) */
+  onClose: () => void;
+  /** Callback when user chooses to discard changes and continue */
+  onDiscard: () => void;
+  /** Callback when user chooses to save and continue */
+  onSave: () => void;
+  /** Whether save is in progress */
+  isSaving?: boolean;
+}
+
+/**
+ * Modal dialog for unsaved changes confirmation
+ *
+ * Features:
+ * - Two action buttons: Don't Save (discard), Save
+ * - Cancel via X button, click outside, or Escape key
+ * - Loading state during save
+ * - Consistent styling with design system
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <UnsavedChangesModal
+ *   isOpen={showUnsavedModal}
+ *   onClose={() => setShowUnsavedModal(false)}
+ *   onDiscard={handleDiscard}
+ *   onSave={handleSave}
+ * />
+ * ```
+ */
+export function UnsavedChangesModal({
+  isOpen,
+  onClose,
+  onDiscard,
+  onSave,
+  isSaving = false,
+}: UnsavedChangesModalProps): React.ReactElement | null {
+  const triggerRef = useRef<HTMLElement | null>(null);
+  const discardButtonRef = useRef<HTMLButtonElement>(null);
+
+  // Store the trigger element when modal opens
+  useEffect(() => {
+    if (isOpen) {
+      triggerRef.current = document.activeElement as HTMLElement;
+    }
+  }, [isOpen]);
+
+  // Focus trap for accessibility
+  const { containerRef } = useFocusTrap({
+    enabled: isOpen,
+    onEscape: isSaving ? undefined : onClose,
+    returnFocusTo: triggerRef.current,
+  });
+
+  // Focus first button when modal opens
+  useEffect(() => {
+    if (isOpen) {
+      setTimeout(() => {
+        discardButtonRef.current?.focus();
+      }, 50);
+    }
+  }, [isOpen]);
+
+  const handleOverlayClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (e.target === e.currentTarget && !isSaving) {
+        onClose();
+      }
+    },
+    [onClose, isSaving]
+  );
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="wn-unsaved-modal-overlay"
+      onClick={handleOverlayClick}
+      role="presentation"
+    >
+      <div
+        ref={containerRef}
+        className="wn-unsaved-modal"
+        role="alertdialog"
+        aria-modal="true"
+        aria-labelledby="unsaved-modal-title"
+        aria-describedby="unsaved-modal-description"
+      >
+        {/* Header */}
+        <div className="wn-unsaved-modal-header">
+          <div className="wn-unsaved-modal-header-content">
+            <AlertTriangle size={18} className="wn-unsaved-modal-icon" />
+            <h2 id="unsaved-modal-title" className="wn-unsaved-modal-title">
+              Unsaved Changes
+            </h2>
+          </div>
+          <button
+            className="wn-unsaved-modal-close"
+            onClick={onClose}
+            disabled={isSaving}
+            title="Close (Esc)"
+            aria-label="Close modal"
+          >
+            <X size={16} />
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="wn-unsaved-modal-body">
+          <p id="unsaved-modal-description" className="wn-unsaved-modal-text">
+            You have unsaved changes. Save them before continuing?
+          </p>
+        </div>
+
+        {/* Footer */}
+        <div className="wn-unsaved-modal-footer">
+          <button
+            ref={discardButtonRef}
+            type="button"
+            className="wn-unsaved-modal-btn wn-unsaved-modal-btn--secondary"
+            onClick={onDiscard}
+            disabled={isSaving}
+          >
+            Don't Save
+          </button>
+          <button
+            type="button"
+            className="wn-unsaved-modal-btn wn-unsaved-modal-btn--primary"
+            onClick={onSave}
+            disabled={isSaving}
+          >
+            {isSaving ? "Saving..." : "Save"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/client/components/UnsavedChangesModal/index.ts

@@ -0,0 +1 @@
+export { UnsavedChangesModal } from "./UnsavedChangesModal";