@imjp/writenex-astro 0.1.0

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

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

package/src/client/components/Header/Header.css

@@ -0,0 +1,300 @@
+.wn-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--wn-space-4) var(--wn-space-5);
+  border-bottom: 1px solid var(--wn-overlay-10);
+  background-color: var(--wn-zinc-900);
+  min-height: 72px;
+}
+
+.wn-header-left {
+  display: flex;
+  align-items: center;
+  gap: var(--wn-space-4);
+}
+
+.wn-header-brand {
+  display: flex;
+  align-items: center;
+  gap: var(--wn-space-3);
+}
+
+.wn-header-title {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wn-space-1);
+}
+
+.wn-header-title-row {
+  display: flex;
+  align-items: center;
+  gap: var(--wn-space-3);
+}
+
+.wn-header-tagline {
+  font-size: var(--wn-font-base);
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.wn-header-logo-text {
+  font-size: var(--wn-font-lg);
+  font-weight: 700;
+  color: var(--wn-zinc-100);
+}
+
+.wn-header-badge {
+  font-size: var(--wn-font-xs);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: var(--wn-space-1) var(--wn-space-3);
+  border-radius: var(--wn-radius-sm);
+  background-color: var(--wn-overlay-10);
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.wn-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--wn-space-3);
+  padding: var(--wn-space-1) var(--wn-space-3);
+  border-radius: var(--wn-radius-lg);
+  border: 1px solid var(--wn-overlay-10);
+  background-color: var(--wn-overlay-5);
+}
+
+.wn-toolbar-separator {
+  width: 1px;
+  height: 24px;
+  background-color: var(--wn-overlay-10);
+  margin: 0 var(--wn-space-2);
+}
+
+.wn-toolbar-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--wn-icon-btn-lg);
+  height: var(--wn-icon-btn-lg);
+  border-radius: var(--wn-radius-md);
+  border: none;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.6);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.wn-toolbar-btn:hover {
+  background: var(--wn-overlay-10);
+  color: #fff;
+}
+
+.wn-toolbar-btn--active {
+  background: var(--wn-overlay-10);
+  color: #fff;
+}
+
+.wn-toolbar-btn--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.wn-toolbar-btn--disabled:hover {
+  background: transparent;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+/* ============================================================================
+   CSS TOOLTIPS FOR TOOLBAR
+   ============================================================================ */
+
+.wn-toolbar-btn {
+  position: relative;
+}
+
+.wn-toolbar-btn::after {
+  content: attr(aria-label);
+  position: absolute;
+  top: calc(100% + var(--wn-space-3));
+  left: 50%;
+  transform: translateX(-50%);
+  padding: var(--wn-space-2) var(--wn-space-3);
+  background-color: var(--wn-zinc-800);
+  border: 1px solid var(--wn-overlay-10);
+  border-radius: var(--wn-radius-md);
+  font-size: var(--wn-font-xs);
+  font-weight: 500;
+  white-space: nowrap;
+  color: var(--wn-zinc-50);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition:
+    opacity var(--wn-transition-fast) ease,
+    visibility var(--wn-transition-fast) ease;
+  z-index: var(--wn-z-dialog);
+  box-shadow: var(--wn-shadow-md);
+}
+
+/* Tooltip arrow */
+.wn-toolbar-btn::before {
+  content: "";
+  position: absolute;
+  top: calc(100% + 2px);
+  left: 50%;
+  transform: translateX(-50%);
+  border: 6px solid transparent;
+  border-bottom-color: var(--wn-zinc-800);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition:
+    opacity var(--wn-transition-fast) ease,
+    visibility var(--wn-transition-fast) ease;
+  z-index: var(--wn-z-tooltip);
+}
+
+.wn-toolbar-btn:hover::after,
+.wn-toolbar-btn:hover::before {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Hide tooltip for disabled buttons */
+.wn-toolbar-btn--disabled::after,
+.wn-toolbar-btn--disabled::before {
+  display: none;
+}
+
+.wn-placeholder-icon {
+  font-size: var(--wn-font-base);
+  font-weight: 600;
+  font-family: monospace;
+}
+
+/* ============================================================================
+   THEME SWITCHER
+   ============================================================================ */
+
+.wn-theme-switcher {
+  position: relative;
+}
+
+.wn-theme-dropdown {
+  position: absolute;
+  top: calc(100% + var(--wn-space-3));
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--wn-space-1);
+  min-width: 120px;
+  padding: var(--wn-space-2);
+  border-radius: var(--wn-radius-lg);
+  border: 1px solid var(--wn-overlay-10);
+  background-color: var(--wn-zinc-800);
+  box-shadow: var(--wn-shadow-md);
+  z-index: var(--wn-z-dropdown);
+}
+
+.wn-theme-option {
+  display: flex;
+  align-items: center;
+  gap: var(--wn-space-3);
+  width: 100%;
+  padding: var(--wn-space-3) var(--wn-space-4);
+  border: none;
+  border-radius: var(--wn-radius-md);
+  background: transparent;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: var(--wn-font-sm);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.wn-theme-option:hover {
+  background: var(--wn-overlay-10);
+  color: #fff;
+}
+
+.wn-theme-option--selected {
+  background: var(--wn-overlay-10);
+  color: #fff;
+}
+
+/* ============================================================================
+   LIGHT MODE OVERRIDES
+   ============================================================================ */
+
+.wn-light .wn-header {
+  border-bottom-color: var(--wn-overlay-light-10);
+  background-color: #fff;
+}
+
+.wn-light .wn-header-tagline {
+  color: rgba(0, 0, 0, 0.5);
+}
+
+.wn-light .wn-header-logo-text {
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-header-badge {
+  background-color: var(--wn-overlay-light-5);
+  color: rgba(0, 0, 0, 0.5);
+}
+
+.wn-light .wn-toolbar {
+  border-color: var(--wn-overlay-light-10);
+  background-color: var(--wn-overlay-light-3);
+}
+
+.wn-light .wn-toolbar-separator {
+  background-color: var(--wn-overlay-light-10);
+}
+
+.wn-light .wn-toolbar-btn {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.wn-light .wn-toolbar-btn:hover {
+  background: var(--wn-overlay-light-10);
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-toolbar-btn--active {
+  background: var(--wn-overlay-light-10);
+  color: var(--wn-zinc-900);
+}
+
+/* Light mode tooltip */
+.wn-light .wn-toolbar-btn::after {
+  background-color: #fff;
+  border-color: var(--wn-overlay-light-10);
+  color: var(--wn-zinc-900);
+  box-shadow: var(--wn-shadow-md);
+}
+
+.wn-light .wn-toolbar-btn::before {
+  border-bottom-color: #fff;
+}
+
+.wn-light .wn-theme-dropdown {
+  border-color: var(--wn-overlay-light-10);
+  background-color: #fff;
+  box-shadow: var(--wn-shadow-md);
+}
+
+.wn-light .wn-theme-option {
+  color: rgba(0, 0, 0, 0.7);
+}
+
+.wn-light .wn-theme-option:hover {
+  background: var(--wn-overlay-light-5);
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-theme-option--selected {
+  background: var(--wn-overlay-light-5);
+  color: var(--wn-zinc-900);
+}

package/src/client/components/Header/Header.tsx

@@ -0,0 +1,300 @@
+/**
+ * @fileoverview Application Header Component for Writenex Astro
+ *
+ * This component provides the main header bar with logo, branding, and
+ * a unified toolbar for editor operations.
+ *
+ * @module @writenex/astro/client/components/Header
+ */
+
+import { useState, useRef, useEffect } from "react";
+import {
+  Keyboard,
+  Settings,
+  Folder,
+  Info,
+  Search,
+  Sun,
+  Moon,
+  Monitor,
+  History,
+  Plus,
+} from "lucide-react";
+import { useTheme, type Theme } from "../../context/ThemeContext";
+import "./Header.css";
+
+/**
+ * Writenex Logo SVG component
+ */
+function LogoIcon(): React.ReactElement {
+  return (
+    <svg
+      width="56"
+      height="56"
+      viewBox="0 0 24 24"
+      fill="#335DFF"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <path d="M20.18 4.22l3.7 0c0.05,0 0.08,0.02 0.1,0.06 0.03,0.03 0.03,0.08 0,0.12l-5.78 10.31c-0.02,0.04 -0.06,0.06 -0.1,0.06 -0.04,0 -0.08,-0.02 -0.1,-0.06l-1.89 -3.28c-0.03,-0.04 -0.03,-0.08 -0.01,-0.12l3.98 -7.03c0.02,-0.04 0.06,-0.06 0.1,-0.06zm-6.13 6.34l3.24 5.65c0.03,0.04 0.03,0.09 0,0.12l-1.9 3.39c-0.02,0.04 -0.05,0.06 -0.1,0.06 -0.04,0 -0.08,-0.02 -0.1,-0.06l-3.17 -5.68 -3.12 5.68c-0.02,0.04 -0.06,0.06 -0.1,0.06 -0.04,0 -0.08,-0.02 -0.1,-0.06l-1.92 -3.38c-0.03,-0.04 -0.03,-0.09 0,-0.13l3.26 -5.66 -3.48 -6.15c-0.02,-0.04 -0.02,-0.09 0,-0.12 0.02,-0.04 0.06,-0.06 0.1,-0.06l3.74 0c0.05,0 0.08,0.02 0.11,0.06l1.51 2.7 1.53 -2.7c0.02,-0.04 0.06,-0.06 0.1,-0.06l3.84 0c0.04,0 0.08,0.02 0.1,0.06 0.02,0.03 0.02,0.08 0,0.12l-3.54 6.16zm-10.06 -6.28l3.99 7.01c0.02,0.04 0.02,0.08 0,0.12l-1.91 3.31c-0.03,0.04 -0.06,0.06 -0.11,0.06 -0.04,0 -0.08,-0.02 -0.1,-0.06l-5.84 -10.32c-0.03,-0.04 -0.03,-0.09 0,-0.12 0.02,-0.04 0.05,-0.06 0.1,-0.06l3.76 0c0.05,0 0.09,0.02 0.11,0.06z" />
+    </svg>
+  );
+}
+
+/**
+ * Props for the Header component
+ */
+interface HeaderProps {
+  /** Whether the sidebar is open */
+  isSidebarOpen?: boolean;
+  /** Callback to toggle sidebar */
+  onToggleSidebar?: () => void;
+  /** Whether the frontmatter panel is open */
+  isFrontmatterOpen?: boolean;
+  /** Callback to toggle frontmatter panel */
+  onToggleFrontmatter?: () => void;
+  /** Whether the search panel is open */
+  isSearchOpen?: boolean;
+  /** Callback to toggle search panel */
+  onToggleSearch?: () => void;
+  /** Whether the version history panel is open */
+  isVersionHistoryOpen?: boolean;
+  /** Callback to toggle version history panel */
+  onToggleVersionHistory?: () => void;
+  /** Whether version history is available (content selected) */
+  versionHistoryEnabled?: boolean;
+  /** Callback when keyboard shortcuts button is clicked */
+  onKeyboardShortcuts?: () => void;
+  /** Callback when settings button is clicked */
+  onSettings?: () => void;
+  /** Callback when new content button is clicked */
+  onNewContent?: () => void;
+}
+
+/**
+ * Visual separator for grouping toolbar buttons.
+ */
+function ToolbarSeparator(): React.ReactElement {
+  return <div className="wn-toolbar-separator" />;
+}
+
+/**
+ * Toolbar button component with icon
+ */
+function ToolbarButton({
+  icon,
+  label,
+  onClick,
+  active = false,
+  disabled = false,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  onClick?: () => void;
+  active?: boolean;
+  disabled?: boolean;
+}): React.ReactElement {
+  const className = [
+    "wn-toolbar-btn",
+    active ? "wn-toolbar-btn--active" : "",
+    disabled ? "wn-toolbar-btn--disabled" : "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={label}
+      className={className}
+    >
+      {icon}
+    </button>
+  );
+}
+
+/**
+ * Theme option configuration
+ */
+const THEME_OPTIONS: { value: Theme; label: string; icon: typeof Sun }[] = [
+  { value: "light", label: "Light", icon: Sun },
+  { value: "dark", label: "Dark", icon: Moon },
+  { value: "system", label: "System", icon: Monitor },
+];
+
+/**
+ * Theme switcher dropdown component
+ */
+function ThemeSwitcher(): React.ReactElement {
+  const { theme, resolvedTheme, setTheme } = useTheme();
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () =>
+        document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [isOpen]);
+
+  // Close on escape key
+  useEffect(() => {
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setIsOpen(false);
+    };
+
+    if (isOpen) {
+      document.addEventListener("keydown", handleEscape);
+      return () => document.removeEventListener("keydown", handleEscape);
+    }
+  }, [isOpen]);
+
+  const ThemeIcon = resolvedTheme === "dark" ? Moon : Sun;
+
+  return (
+    <div className="wn-theme-switcher" ref={dropdownRef}>
+      <button
+        type="button"
+        className={`wn-toolbar-btn ${isOpen ? "wn-toolbar-btn--active" : ""}`}
+        onClick={() => setIsOpen(!isOpen)}
+        aria-label="Switch theme"
+        aria-expanded={isOpen}
+        aria-haspopup="listbox"
+      >
+        <ThemeIcon size={16} />
+      </button>
+
+      {isOpen && (
+        <div className="wn-theme-dropdown" role="listbox" aria-label="Theme">
+          {THEME_OPTIONS.map((option) => {
+            const Icon = option.icon;
+            const isSelected = theme === option.value;
+            return (
+              <button
+                key={option.value}
+                type="button"
+                role="option"
+                aria-selected={isSelected}
+                className={`wn-theme-option ${isSelected ? "wn-theme-option--selected" : ""}`}
+                onClick={() => {
+                  setTheme(option.value);
+                  setIsOpen(false);
+                }}
+              >
+                <Icon size={16} />
+                <span>{option.label}</span>
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Main application header with logo and unified toolbar.
+ *
+ * @component
+ */
+export function Header({
+  isSidebarOpen = true,
+  onToggleSidebar,
+  isFrontmatterOpen = true,
+  onToggleFrontmatter,
+  isSearchOpen = false,
+  onToggleSearch,
+  isVersionHistoryOpen = false,
+  onToggleVersionHistory,
+  versionHistoryEnabled = false,
+  onKeyboardShortcuts,
+  onSettings,
+  onNewContent,
+}: HeaderProps): React.ReactElement {
+  return (
+    <header className="wn-header">
+      {/* Left side: Logo and branding */}
+      <div className="wn-header-left">
+        <div className="wn-header-brand">
+          <LogoIcon />
+          <div className="wn-header-title">
+            <div className="wn-header-title-row">
+              <span className="wn-header-logo-text">Writenex</span>
+              <span className="wn-header-badge">Astro</span>
+            </div>
+            <span className="wn-header-tagline">
+              Edit your Astro content visually.
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* Right side: Toolbar */}
+      <div className="wn-toolbar">
+        {/* New Content Button */}
+        <ToolbarButton
+          icon={<Plus size={16} />}
+          label="New Content (Alt+N)"
+          onClick={onNewContent}
+        />
+
+        <ToolbarSeparator />
+
+        {/* Group 1: Panels & Actions */}
+        <ToolbarButton
+          icon={<Folder size={16} />}
+          label="Toggle Explorer"
+          onClick={onToggleSidebar}
+          active={isSidebarOpen}
+        />
+        <ToolbarButton
+          icon={<Info size={16} />}
+          label="Toggle Frontmatter"
+          onClick={onToggleFrontmatter}
+          active={isFrontmatterOpen}
+        />
+        <ToolbarButton
+          icon={<Search size={16} />}
+          label="Search & Replace (Ctrl+F)"
+          onClick={onToggleSearch}
+          active={isSearchOpen}
+        />
+        <ToolbarButton
+          icon={<History size={16} />}
+          label="Version History"
+          onClick={onToggleVersionHistory}
+          active={isVersionHistoryOpen}
+          disabled={!versionHistoryEnabled}
+        />
+
+        <ToolbarSeparator />
+
+        {/* Group 2: Preferences */}
+        <ThemeSwitcher />
+        <ToolbarButton
+          icon={<Keyboard size={16} />}
+          label="Keyboard Shortcuts (Ctrl+/)"
+          onClick={onKeyboardShortcuts}
+        />
+        <ToolbarButton
+          icon={<Settings size={16} />}
+          label="Settings"
+          onClick={onSettings}
+        />
+      </div>
+    </header>
+  );
+}

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

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