@imjp/writenex-astro 0.1.0

package/src/client/styles.css

@@ -0,0 +1,584 @@
+/**
+ * @fileoverview Writenex Astro - Plain CSS Styles
+ *
+ * Self-contained styles for the Writenex Astro editor interface.
+ * Uses CSS custom properties for consistent theming.
+ * Supports both dark and light modes.
+ */
+
+/* ============================================================================
+   IMPORTS
+   ============================================================================ */
+
+@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");
+@import url("./variables.css");
+
+/* ============================================================================
+   BASE RESET & DEFAULTS
+   ============================================================================ */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+  width: 100%;
+  overflow-x: hidden; /* Prevent horizontal scroll */
+}
+
+body {
+  font-family:
+    "Plus Jakarta Sans",
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    sans-serif;
+  font-size: var(--wn-font-base);
+  line-height: 1.5;
+  background-color: var(--wn-zinc-950);
+  color: var(--wn-zinc-100);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ============================================================================
+   CUSTOM SCROLLBAR
+   Subtle scrollbar styling for dark and light modes
+   ============================================================================ */
+
+/* Firefox scrollbar */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--wn-overlay-15) transparent;
+}
+
+/* WebKit scrollbar (Chrome, Edge, Safari) */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--wn-overlay-15);
+  border-radius: var(--wn-radius-full);
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--wn-overlay-25);
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+/* ============================================================================
+   APP COMPONENT STYLES
+   Root layout and shared button components
+   ============================================================================ */
+
+/* App root container */
+.wn-app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  max-width: 100vw;
+  overflow-x: hidden; /* Prevent horizontal scroll */
+  background-color: var(--wn-zinc-950);
+  color: var(--wn-zinc-100);
+}
+
+/* Main layout container */
+.wn-main-layout {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+/* Main content area */
+.wn-main-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+  background-color: var(--wn-zinc-850);
+}
+
+/* Editor wrapper */
+.wn-editor-wrapper {
+  flex: 1;
+  overflow: auto;
+}
+
+/* ============================================================================
+   CONTENT BAR - Secondary header for content actions
+   ============================================================================ */
+
+.wn-content-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--wn-space-3) var(--wn-space-5);
+  border-bottom: 1px solid var(--wn-overlay-10);
+  background-color: var(--wn-zinc-900);
+  min-height: 48px;
+  gap: var(--wn-space-5);
+}
+
+.wn-content-bar-left {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+}
+
+.wn-content-bar-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--wn-font-base);
+  font-weight: 500;
+  color: var(--wn-zinc-200);
+}
+
+.wn-content-bar-right {
+  display: flex;
+  align-items: center;
+  gap: var(--wn-space-3);
+  flex-shrink: 0;
+}
+
+/* Content bar separator for button grouping */
+.wn-content-bar-separator {
+  width: 1px;
+  height: 24px;
+  background-color: var(--wn-overlay-10);
+}
+
+/* ============================================================================
+   BUTTON COMPONENTS
+   ============================================================================ */
+
+/* Base button styles */
+.wn-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--wn-space-3);
+  border-radius: var(--wn-radius-md);
+  padding: var(--wn-space-2) var(--wn-space-4);
+  font-size: var(--wn-font-base);
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  transition:
+    background-color 0.15s,
+    color 0.15s,
+    border-color 0.15s;
+}
+
+.wn-btn:focus-visible {
+  outline: 2px solid var(--wn-brand-500);
+  outline-offset: 2px;
+}
+
+.wn-btn:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+/* Primary button - brand background */
+.wn-btn-primary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--wn-space-3);
+  border-radius: var(--wn-radius-md);
+  padding: var(--wn-space-2) var(--wn-space-4);
+  font-size: var(--wn-font-base);
+  font-weight: 500;
+  line-height: 1.25rem;
+  box-sizing: border-box;
+  border: none;
+  cursor: pointer;
+  background-color: var(--wn-brand-500);
+  color: white;
+  transition:
+    background-color 0.15s,
+    color 0.15s;
+}
+
+.wn-btn-primary:hover {
+  background-color: var(--wn-brand-600);
+}
+
+.wn-btn-primary:focus-visible {
+  outline: 2px solid var(--wn-brand-500);
+  outline-offset: 2px;
+}
+
+.wn-btn-primary:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+/* Secondary button - transparent with border */
+.wn-btn-secondary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--wn-space-3);
+  border-radius: var(--wn-radius-md);
+  padding: var(--wn-space-2) var(--wn-space-4);
+  font-size: var(--wn-font-base);
+  font-weight: 500;
+  line-height: 1.25rem;
+  box-sizing: border-box;
+  cursor: pointer;
+  background-color: transparent;
+  border: 1px solid var(--wn-zinc-700);
+  color: var(--wn-zinc-300);
+  transition:
+    background-color 0.15s,
+    color 0.15s,
+    border-color 0.15s;
+}
+
+.wn-btn-secondary:hover {
+  background-color: var(--wn-zinc-800);
+  color: var(--wn-zinc-100);
+}
+
+.wn-btn-secondary:focus-visible {
+  outline: 2px solid var(--wn-brand-500);
+  outline-offset: 2px;
+}
+
+.wn-btn-secondary:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+/* Ghost button - no border */
+.wn-btn-ghost {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--wn-space-3);
+  border-radius: var(--wn-radius-md);
+  padding: var(--wn-space-2) var(--wn-space-4);
+  font-size: var(--wn-font-base);
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  background-color: transparent;
+  color: var(--wn-zinc-400);
+  transition:
+    background-color 0.15s,
+    color 0.15s;
+}
+
+.wn-btn-ghost:hover {
+  background-color: var(--wn-zinc-800);
+  color: var(--wn-zinc-100);
+}
+
+.wn-btn-ghost:focus-visible {
+  outline: 2px solid var(--wn-brand-500);
+  outline-offset: 2px;
+}
+
+/* Icon button - square, no text */
+.wn-btn-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--wn-icon-btn-lg);
+  height: var(--wn-icon-btn-lg);
+  padding: 0;
+  border-radius: var(--wn-radius-md);
+  background-color: transparent;
+  color: var(--wn-zinc-400);
+  border: none;
+  cursor: pointer;
+  transition:
+    background-color 0.15s,
+    color 0.15s;
+}
+
+.wn-btn-icon:hover {
+  background-color: var(--wn-zinc-800);
+  color: var(--wn-zinc-100);
+}
+
+.wn-btn-icon:focus-visible {
+  outline: 2px solid var(--wn-brand-500);
+  outline-offset: 2px;
+}
+
+/* ============================================================================
+   AUTOSAVE INDICATOR
+   ============================================================================ */
+
+.wn-autosave-indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--wn-space-2);
+  padding: var(--wn-space-2) var(--wn-space-4);
+  border-radius: var(--wn-radius-md);
+  font-size: var(--wn-font-base);
+  font-weight: 500;
+  line-height: 1.25rem;
+  box-sizing: border-box;
+  cursor: pointer;
+  background-color: transparent;
+  border: 1px solid var(--wn-zinc-700);
+  color: var(--wn-zinc-300);
+  transition:
+    background-color 0.15s,
+    color 0.15s,
+    border-color 0.15s;
+}
+
+.wn-autosave-indicator:hover {
+  background-color: var(--wn-zinc-800);
+}
+
+.wn-autosave-text {
+  font-size: var(--wn-font-base);
+}
+
+.wn-autosave-text--saving {
+  color: var(--wn-brand-400);
+}
+
+.wn-autosave-text--saved {
+  color: var(--wn-success-400);
+}
+
+.wn-autosave-text--error {
+  color: var(--wn-error-400);
+}
+
+.wn-autosave-text--pending {
+  color: var(--wn-warning-400);
+}
+
+.wn-autosave-text--idle {
+  color: var(--wn-zinc-400);
+}
+
+/* ============================================================================
+   DRAFT/PUBLISHED TOGGLE BUTTON VARIANTS
+   ============================================================================ */
+
+.wn-btn-draft {
+  border-color: var(--wn-warning-alpha-30);
+  color: var(--wn-warning-500);
+}
+
+.wn-btn-draft:hover {
+  border-color: var(--wn-warning-500);
+  background-color: var(--wn-warning-alpha-10);
+}
+
+.wn-btn-published {
+  border-color: var(--wn-success-alpha-30);
+  color: var(--wn-success-500);
+}
+
+.wn-btn-published:hover {
+  border-color: var(--wn-success-500);
+  background-color: var(--wn-success-alpha-10);
+}
+
+/* Preview button - remove link underline */
+.wn-btn-preview {
+  text-decoration: none;
+}
+
+.wn-btn-preview:hover {
+  text-decoration: none;
+}
+
+/* ============================================================================
+   LIGHT MODE OVERRIDES
+   ============================================================================ */
+
+.wn-light body,
+.wn-light .wn-app {
+  background-color: var(--wn-zinc-50);
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-main-content {
+  background-color: var(--wn-zinc-150);
+}
+
+.wn-light .wn-content-bar {
+  border-bottom-color: var(--wn-overlay-light-8);
+  background-color: var(--wn-zinc-100);
+}
+
+.wn-light .wn-content-bar-title {
+  color: var(--wn-zinc-700);
+}
+
+.wn-light .wn-content-bar-separator {
+  background-color: var(--wn-overlay-light-10);
+}
+
+/* Button overrides for light mode */
+.wn-light .wn-btn-secondary {
+  border-color: var(--wn-zinc-300);
+  color: var(--wn-zinc-700);
+}
+
+.wn-light .wn-btn-secondary:hover {
+  background-color: var(--wn-zinc-100);
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-btn-ghost {
+  color: var(--wn-zinc-600);
+}
+
+.wn-light .wn-btn-ghost:hover {
+  background-color: var(--wn-zinc-100);
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-btn-icon {
+  color: var(--wn-zinc-600);
+}
+
+.wn-light .wn-btn-icon:hover {
+  background-color: var(--wn-zinc-100);
+  color: var(--wn-zinc-900);
+}
+
+/* Autosave indicator light mode */
+.wn-light .wn-autosave-indicator {
+  border-color: var(--wn-zinc-300);
+  color: var(--wn-zinc-700);
+}
+
+.wn-light .wn-autosave-indicator:hover {
+  background-color: var(--wn-zinc-100);
+}
+
+/* Draft/Published button light mode */
+.wn-light .wn-btn-draft {
+  border-color: var(--wn-warning-alpha-40);
+}
+
+.wn-light .wn-btn-published {
+  border-color: var(--wn-success-alpha-40);
+}
+
+/* Scrollbar light mode */
+.wn-light * {
+  scrollbar-color: var(--wn-overlay-light-20) transparent;
+}
+
+.wn-light ::-webkit-scrollbar-thumb {
+  background: var(--wn-overlay-light-20);
+}
+
+.wn-light ::-webkit-scrollbar-thumb:hover {
+  background: var(--wn-overlay-light-30);
+}
+
+/* ============================================================================
+   ACCESSIBILITY UTILITIES
+   ============================================================================ */
+
+/**
+ * Screen reader only utility class
+ * Visually hides content while keeping it accessible to screen readers.
+ * Uses standard techniques: position absolute, clip, and overflow hidden.
+ */
+.wn-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/**
+ * Screen reader only - focusable variant
+ * Becomes visible when focused (useful for skip links)
+ */
+.wn-sr-only-focusable:focus,
+.wn-sr-only-focusable:active {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: inherit;
+  margin: inherit;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}
+
+/* ============================================================================
+   GLOBAL FOCUS STATES
+   Consistent focus ring styling for accessibility
+   ============================================================================ */
+
+/* Default focus-visible style for all interactive elements */
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible,
+[tabindex]:focus-visible {
+  outline: 2px solid var(--wn-brand-500);
+  outline-offset: 2px;
+}
+
+/* Remove default focus outline when not using keyboard */
+button:focus:not(:focus-visible),
+a:focus:not(:focus-visible),
+[tabindex]:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* ============================================================================
+   REDUCED MOTION PREFERENCES
+   Respects user's system preference for reduced motion
+   ============================================================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/src/client/utils/focus.ts

@@ -0,0 +1,57 @@
+/**
+ * @fileoverview Focus management utilities for accessibility
+ *
+ * Provides helper functions for managing focus within containers,
+ * useful for modal dialogs and focus trapping.
+ *
+ * @module @writenex/astro/client/utils/focus
+ */
+
+/**
+ * Selector for focusable elements
+ */
+const FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])',
+].join(", ");
+
+/**
+ * Get all focusable elements within a container
+ *
+ * @param container - The container element to search within
+ * @returns Array of focusable elements
+ */
+export function getFocusableElements(container: HTMLElement): HTMLElement[] {
+  return Array.from(
+    container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)
+  ).filter((el) => {
+    // Filter out elements that are not visible
+    return el.offsetParent !== null;
+  });
+}
+
+/**
+ * Get the first focusable element within a container
+ *
+ * @param container - The container element to search within
+ * @returns The first focusable element, or null if none found
+ */
+export function getFirstFocusable(container: HTMLElement): HTMLElement | null {
+  const focusable = getFocusableElements(container);
+  return focusable[0] || null;
+}
+
+/**
+ * Get the last focusable element within a container
+ *
+ * @param container - The container element to search within
+ * @returns The last focusable element, or null if none found
+ */
+export function getLastFocusable(container: HTMLElement): HTMLElement | null {
+  const focusable = getFocusableElements(container);
+  return focusable[focusable.length - 1] || null;
+}