@imjp/writenex-astro 0.1.0

package/src/client/components/SearchReplace/SearchReplacePanel.css

@@ -0,0 +1,300 @@
+/**
+ * @fileoverview Search and Replace Panel Styles
+ *
+ * Styles for the search and replace panel component.
+ * Uses CSS variables from the main styles.css.
+ */
+
+/* Screen reader only - for ARIA announcements */
+.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;
+}
+
+/* Panel container */
+.wn-search-panel {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: var(--wn-z-modal);
+  background-color: var(--wn-zinc-900);
+  border: 1px solid var(--wn-zinc-700);
+  border-top: none;
+  border-right: none;
+  border-bottom-left-radius: var(--wn-radius-lg);
+  box-shadow: var(--wn-shadow-md);
+  padding: var(--wn-space-4);
+}
+
+.wn-search-panel-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wn-space-3);
+}
+
+/* Search row */
+.wn-search-row {
+  display: flex;
+  align-items: center;
+  gap: var(--wn-space-3);
+}
+
+/* Input wrapper */
+.wn-search-input-wrapper {
+  position: relative;
+  flex-shrink: 0;
+}
+
+/* Search input */
+.wn-search-input {
+  width: 180px;
+  padding: var(--wn-space-2) var(--wn-icon-btn-md) var(--wn-space-2)
+    var(--wn-space-3);
+  font-size: var(--wn-font-sm);
+  color: var(--wn-zinc-100);
+  border-radius: var(--wn-radius-sm);
+  outline: none;
+  box-shadow: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  transition: border-color var(--wn-transition-fast);
+}
+
+.wn-search-input::placeholder {
+  color: var(--wn-zinc-500);
+}
+
+.wn-search-input:focus {
+  border-color: var(--wn-brand-500);
+  outline: none;
+  box-shadow: none;
+}
+
+.wn-search-input:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
+.wn-search-input--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Clear button inside input */
+.wn-search-clear {
+  position: absolute;
+  top: 50%;
+  right: var(--wn-space-2);
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  background: none;
+  border: none;
+  color: var(--wn-zinc-500);
+  cursor: pointer;
+  border-radius: var(--wn-radius-sm);
+  transition:
+    color var(--wn-transition-fast),
+    background-color var(--wn-transition-fast);
+}
+
+.wn-search-clear:hover {
+  color: var(--wn-zinc-200);
+  background-color: var(--wn-zinc-700);
+}
+
+/* Search options (toggle buttons) */
+.wn-search-options {
+  display: flex;
+  gap: var(--wn-space-1);
+}
+
+.wn-search-option {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--wn-icon-btn-md);
+  height: var(--wn-icon-btn-md);
+  padding: 0;
+  background: none;
+  border: none;
+  color: var(--wn-zinc-500);
+  cursor: pointer;
+  border-radius: var(--wn-radius-sm);
+  transition:
+    color var(--wn-transition-fast),
+    background-color var(--wn-transition-fast);
+}
+
+.wn-search-option:hover {
+  color: var(--wn-zinc-200);
+  background-color: var(--wn-zinc-800);
+}
+
+.wn-search-option--active {
+  color: var(--wn-brand-400);
+  background-color: var(--wn-brand-alpha-15);
+}
+
+.wn-search-option--active:hover {
+  color: var(--wn-brand-400);
+  background-color: var(--wn-brand-alpha-20);
+}
+
+/* Match counter */
+.wn-search-counter {
+  min-width: 70px;
+  text-align: center;
+  font-size: var(--wn-font-xs);
+  color: var(--wn-zinc-500);
+  white-space: nowrap;
+}
+
+/* Navigation buttons */
+.wn-search-nav {
+  display: flex;
+  gap: var(--wn-space-1);
+}
+
+.wn-search-nav-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--wn-icon-btn-md);
+  height: var(--wn-icon-btn-md);
+  padding: 0;
+  background: none;
+  border: none;
+  color: var(--wn-zinc-400);
+  cursor: pointer;
+  border-radius: var(--wn-radius-sm);
+  transition:
+    color var(--wn-transition-fast),
+    background-color var(--wn-transition-fast);
+}
+
+.wn-search-nav-btn:hover:not(:disabled) {
+  color: var(--wn-zinc-100);
+  background-color: var(--wn-zinc-800);
+}
+
+.wn-search-nav-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Replace action buttons */
+.wn-search-actions {
+  display: flex;
+  gap: 2px;
+  margin-left: auto;
+}
+
+.wn-search-action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--wn-icon-btn-md);
+  height: var(--wn-icon-btn-md);
+  padding: 0;
+  background: none;
+  border: none;
+  color: var(--wn-zinc-400);
+  cursor: pointer;
+  border-radius: var(--wn-radius-sm);
+  transition:
+    color var(--wn-transition-fast),
+    background-color var(--wn-transition-fast);
+}
+
+.wn-search-action-btn:hover:not(:disabled) {
+  color: var(--wn-zinc-100);
+  background-color: var(--wn-zinc-800);
+}
+
+.wn-search-action-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ============================================================================
+   LIGHT MODE OVERRIDES
+   ============================================================================ */
+
+.wn-light .wn-search-panel {
+  background-color: #fff;
+  border-color: var(--wn-zinc-200);
+  box-shadow: 0 4px 12px var(--wn-overlay-light-10);
+}
+
+.wn-light .wn-search-input {
+  color: var(--wn-zinc-900);
+  background-color: var(--wn-zinc-50);
+  border-color: var(--wn-zinc-200);
+}
+
+.wn-light .wn-search-input::placeholder {
+  color: var(--wn-zinc-400);
+}
+
+.wn-light .wn-search-clear {
+  color: var(--wn-zinc-400);
+}
+
+.wn-light .wn-search-clear:hover {
+  color: var(--wn-zinc-900);
+  background-color: var(--wn-zinc-200);
+}
+
+.wn-light .wn-search-option {
+  color: var(--wn-zinc-400);
+}
+
+.wn-light .wn-search-option:hover {
+  color: var(--wn-zinc-900);
+  background-color: var(--wn-zinc-100);
+}
+
+.wn-light .wn-search-option--active {
+  color: var(--wn-brand-600);
+  background-color: var(--wn-brand-alpha-10);
+}
+
+.wn-light .wn-search-option--active:hover {
+  color: var(--wn-brand-600);
+  background-color: var(--wn-brand-alpha-15);
+}
+
+.wn-light .wn-search-counter {
+  color: var(--wn-zinc-500);
+}
+
+.wn-light .wn-search-nav-btn {
+  color: var(--wn-zinc-500);
+}
+
+.wn-light .wn-search-nav-btn:hover:not(:disabled) {
+  color: var(--wn-zinc-900);
+  background-color: var(--wn-zinc-100);
+}
+
+.wn-light .wn-search-action-btn {
+  color: var(--wn-zinc-500);
+}
+
+.wn-light .wn-search-action-btn:hover:not(:disabled) {
+  color: var(--wn-zinc-900);
+  background-color: var(--wn-zinc-100);
+}

package/src/client/components/SearchReplace/SearchReplacePanel.tsx

@@ -0,0 +1,332 @@
+/**
+ * @fileoverview Search and Replace Panel Component
+ *
+ * Provides search and replace functionality for the markdown editor.
+ * Supports case sensitivity, whole word matching, and regular expressions.
+ *
+ * @module @writenex/astro/client/components/SearchReplace
+ */
+
+import { useState, useCallback, useEffect, useRef } from "react";
+import {
+  X,
+  ChevronUp,
+  ChevronDown,
+  CaseSensitive,
+  WholeWord,
+  Regex,
+  Replace,
+  ReplaceAll,
+} from "lucide-react";
+import "./SearchReplacePanel.css";
+
+/**
+ * Search options configuration
+ */
+export interface SearchOptions {
+  /** Whether to match case exactly */
+  caseSensitive: boolean;
+  /** Whether to match whole words only */
+  wholeWord: boolean;
+  /** Whether to treat query as a regular expression */
+  regex: boolean;
+}
+
+/**
+ * Props for the SearchReplacePanel component
+ */
+interface SearchReplacePanelProps {
+  /** Whether the panel is open */
+  isOpen: boolean;
+  /** Callback to close the panel */
+  onClose: () => void;
+  /** Callback to perform search */
+  onSearch: (query: string, options: SearchOptions) => number;
+  /** Callback to navigate to next match */
+  onNextMatch: () => void;
+  /** Callback to navigate to previous match */
+  onPreviousMatch: () => void;
+  /** Callback to replace current match */
+  onReplace: (replacement: string) => void;
+  /** Callback to replace all matches */
+  onReplaceAll: (replacement: string) => number;
+  /** Current match index (1-based) */
+  currentMatch: number;
+  /** Total number of matches */
+  totalMatches: number;
+  /** Whether editor is read-only */
+  readOnly?: boolean;
+}
+
+/**
+ * Search and Replace panel component
+ *
+ * @component
+ */
+export function SearchReplacePanel({
+  isOpen,
+  onClose,
+  onSearch,
+  onNextMatch,
+  onPreviousMatch,
+  onReplace,
+  onReplaceAll,
+  currentMatch,
+  totalMatches,
+  readOnly = false,
+}: SearchReplacePanelProps): React.ReactElement | null {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [replaceQuery, setReplaceQuery] = useState("");
+  const [caseSensitive, setCaseSensitive] = useState(false);
+  const [wholeWord, setWholeWord] = useState(false);
+  const [regex, setRegex] = useState(false);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  // Focus search input when panel opens
+  useEffect(() => {
+    if (isOpen && searchInputRef.current) {
+      searchInputRef.current.focus();
+      searchInputRef.current.select();
+    }
+  }, [isOpen]);
+
+  // Handle keyboard shortcuts
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose();
+      } else if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        onNextMatch();
+      } else if (e.key === "Enter" && e.shiftKey) {
+        e.preventDefault();
+        onPreviousMatch();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, onClose, onNextMatch, onPreviousMatch]);
+
+  const handleSearchChange = useCallback(
+    (value: string) => {
+      setSearchQuery(value);
+      onSearch(value, { caseSensitive, wholeWord, regex });
+    },
+    [caseSensitive, wholeWord, regex, onSearch]
+  );
+
+  const handleOptionsChange = useCallback(
+    (option: "caseSensitive" | "wholeWord" | "regex", value: boolean) => {
+      let newCaseSensitive = caseSensitive;
+      let newWholeWord = wholeWord;
+      let newRegex = regex;
+
+      switch (option) {
+        case "caseSensitive":
+          newCaseSensitive = value;
+          setCaseSensitive(value);
+          break;
+        case "wholeWord":
+          newWholeWord = value;
+          setWholeWord(value);
+          break;
+        case "regex":
+          newRegex = value;
+          setRegex(value);
+          break;
+      }
+
+      onSearch(searchQuery, {
+        caseSensitive: newCaseSensitive,
+        wholeWord: newWholeWord,
+        regex: newRegex,
+      });
+    },
+    [caseSensitive, wholeWord, regex, searchQuery, onSearch]
+  );
+
+  const handleReplace = useCallback(() => {
+    if (!readOnly && totalMatches > 0) {
+      onReplace(replaceQuery);
+    }
+  }, [readOnly, totalMatches, onReplace, replaceQuery]);
+
+  const handleReplaceAll = useCallback(() => {
+    if (!readOnly && totalMatches > 0) {
+      const count = onReplaceAll(replaceQuery);
+      // ARIA announcement
+      const announcement = document.createElement("div");
+      announcement.setAttribute("role", "status");
+      announcement.setAttribute("aria-live", "polite");
+      announcement.className = "wn-sr-only";
+      announcement.textContent = `Replaced ${count} occurrences`;
+      document.body.appendChild(announcement);
+      setTimeout(() => announcement.remove(), 1000);
+    }
+  }, [readOnly, totalMatches, onReplaceAll, replaceQuery]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="wn-search-panel"
+      role="search"
+      aria-label="Search and replace"
+    >
+      <div className="wn-search-panel-content">
+        {/* Search Row */}
+        <div className="wn-search-row">
+          {/* Search Input */}
+          <div className="wn-search-input-wrapper">
+            <input
+              ref={searchInputRef}
+              type="text"
+              placeholder="Search..."
+              value={searchQuery}
+              onChange={(e) => handleSearchChange(e.target.value)}
+              className="wn-search-input"
+              aria-label="Search query"
+            />
+            {searchQuery && (
+              <button
+                onClick={() => {
+                  handleSearchChange("");
+                  searchInputRef.current?.focus();
+                }}
+                className="wn-search-clear"
+                aria-label="Clear search"
+              >
+                <X size={12} />
+              </button>
+            )}
+          </div>
+
+          {/* Search Options */}
+          <div className="wn-search-options">
+            <button
+              className={`wn-search-option ${caseSensitive ? "wn-search-option--active" : ""}`}
+              onClick={() =>
+                handleOptionsChange("caseSensitive", !caseSensitive)
+              }
+              aria-pressed={caseSensitive}
+              aria-label="Case sensitive"
+              title="Case sensitive"
+            >
+              <CaseSensitive size={16} />
+            </button>
+            <button
+              className={`wn-search-option ${wholeWord ? "wn-search-option--active" : ""}`}
+              onClick={() => handleOptionsChange("wholeWord", !wholeWord)}
+              aria-pressed={wholeWord}
+              aria-label="Whole word"
+              title="Whole word"
+            >
+              <WholeWord size={16} />
+            </button>
+            <button
+              className={`wn-search-option ${regex ? "wn-search-option--active" : ""}`}
+              onClick={() => handleOptionsChange("regex", !regex)}
+              aria-pressed={regex}
+              aria-label="Regular expression"
+              title="Regular expression"
+            >
+              <Regex size={16} />
+            </button>
+          </div>
+
+          {/* Match Counter */}
+          <span className="wn-search-counter">
+            {totalMatches > 0
+              ? `${currentMatch} of ${totalMatches}`
+              : "No results"}
+          </span>
+
+          {/* Navigation */}
+          <div className="wn-search-nav">
+            <button
+              className="wn-search-nav-btn"
+              onClick={onPreviousMatch}
+              disabled={totalMatches === 0}
+              aria-label="Previous match"
+              title="Previous match (Shift+Enter)"
+            >
+              <ChevronUp size={16} />
+            </button>
+            <button
+              className="wn-search-nav-btn"
+              onClick={onNextMatch}
+              disabled={totalMatches === 0}
+              aria-label="Next match"
+              title="Next match (Enter)"
+            >
+              <ChevronDown size={16} />
+            </button>
+            <button
+              className="wn-search-nav-btn"
+              onClick={onClose}
+              aria-label="Close search"
+              title="Close (Escape)"
+            >
+              <X size={16} />
+            </button>
+          </div>
+        </div>
+
+        {/* Replace Row */}
+        <div className="wn-search-row">
+          <div className="wn-search-input-wrapper">
+            <input
+              type="text"
+              placeholder="Replace..."
+              value={replaceQuery}
+              onChange={(e) => setReplaceQuery(e.target.value)}
+              disabled={readOnly}
+              className={`wn-search-input ${readOnly ? "wn-search-input--disabled" : ""}`}
+              aria-label="Replace query"
+            />
+            {replaceQuery && !readOnly && (
+              <button
+                onClick={() => setReplaceQuery("")}
+                className="wn-search-clear"
+                aria-label="Clear replace"
+              >
+                <X size={12} />
+              </button>
+            )}
+          </div>
+
+          {/* Replace Actions */}
+          <div className="wn-search-actions">
+            <button
+              className="wn-search-action-btn"
+              onClick={handleReplace}
+              disabled={readOnly || totalMatches === 0}
+              aria-label="Replace current match"
+              title={
+                readOnly ? "Replace disabled in read-only mode" : "Replace"
+              }
+            >
+              <Replace size={16} />
+            </button>
+            <button
+              className="wn-search-action-btn"
+              onClick={handleReplaceAll}
+              disabled={readOnly || totalMatches === 0}
+              aria-label="Replace all matches"
+              title={
+                readOnly
+                  ? "Replace all disabled in read-only mode"
+                  : "Replace all"
+              }
+            >
+              <ReplaceAll size={16} />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,7 @@
+/**
+ * @fileoverview Search and Replace component exports
+ *
+ * @module @writenex/astro/client/components/SearchReplace
+ */
+
+export { SearchReplacePanel, type SearchOptions } from "./SearchReplacePanel";