אלמנטור בוויב קודינג! פרומפט לבניית מערכת ניהול מתקדמת לאתרים שלכם

# פרומפט: מערכת ניהול + עורך ויזואלי לאתר שאתה בונה

> **למי זה:** לכלי ה־AI שבונה את האתר (Claude Code, Cursor, Lovable, Bolt וכו').
> **מתי שולחים:** בכל שלב. לפני שהבנייה מתחילה, באמצע, או אחרי שהאתר כבר קיים. הכלי מזהה לבד באיזה מצב הוא נמצא.
> **איך:** מדביקים את כל הקובץ כמו שהוא, בשיחה של הפרויקט. אין חובה למלא כאן כלום מראש: הכלי סורק את מה שקיים, ואז שואל אתכם רק את מה שחסר.

---

## חלק א — לפני שבונים: סריקה ושאלות

אתה הכלי שבונה את האתר הזה, ויש לך גישה לקוד שלו. המשימה: להוסיף לו מערכת ניהול ועורך ויזואלי לפי המפרט בחלק ב. **לא כותבים קוד לפני שחלק א הסתיים** ואושר.

### א1. זהה את המצב
- **אתר קיים** (יש עמודים, רכיבים או תוכן): עבור ל־א2.
- **עוד אין אתר** (או שיש רק שלד): דלג ל־א3. בנה את האתר עצמו מההתחלה לפי המבנה בחלק ב (סעיף 3), כך שהעורך יעבוד עליו מהיום הראשון.

### א2. סריקה של מה שקיים (בלי לשנות כלום)
עבור על הקוד והעמודים, והכן **דוח מצב** קצר:
1. **עמודים ומבנה:** רשימת כל העמודים והכתובות. לכל עמוד: האזורים שלו מלמעלה למטה, והרכיבים שחוזרים על עצמם (כרטיס, גלריה, שאלות ותשובות, טופס).
2. **חלקים משותפים:** תפריט עליון, תת־תפריטים, פוטר, תפריט טלפון, פופאפים.
3. **שפה גרפית שכבר קיימת:** צבעים, גופנים (ומאיפה הם נטענים, והאם יש רישיון), גדלי טקסט, ריווחים, פינות, צללים, כפתורים, נקודות שבירה. ציין אם הם כבר משתנים (tokens) או מפוזרים בקוד.
4. **תוכן שחוזר על עצמו = סוגי תוכן ("פוסטים"):** כל מקום שבו אותו מבנה מופיע עם תוכן שונה (רשימת שירותים, צוות, מאמרים, אירועים, מוצרים). לכל אחד: איפה הוא מוצג, אילו פרטים יש בכרטיס ובעמוד שלו, ומאיפה התוכן מגיע היום (קשיח בקוד, קובץ, מסד נתונים, CMS חיצוני).
5. **טפסים:** איפה, אילו שדות, ולאן הם נשלחים היום.
6. **נתונים ותשתית:** framework, מסד נתונים אם יש, איפה האתר מתארח, אחסון קבצים, כניסת משתמשים.
7. **מה יהיה קשה להעביר:** קוד שמערבב תוכן ועיצוב, רכיבים בלי מבנה ברור, ספריות שמונעות עריכה.

### א3. ראיון: שאל רק את מה שהסריקה לא ענתה עליו
הצג את השאלות **בקבוצות קטנות, לא את כולן בבת אחת**, בשפה פשוטה, ולכל שאלה הצע תשובה מומלצת לפי מה שמצאת ("מצאתי 3 סוגים שנראים כמו פוסטים: … נכון?"). שאלה שאפשר לענות עליה בכן/לא — נסח כך.

**1. מטרה ושפה**
- מה העסק עושה, ומה הגולש צריך לעשות באתר?
- שפה וכיוון (למשל עברית / RTL)? מי ישתמש במערכת הניהול, וכמה הוא טכני?

**2. שפה גרפית**
- אשר את השפה הגרפית שמצאתי, או מסור צבעים / גופנים (עם רישיון) / לוגו. אם אין — להציע שפה? (אם כן: מציעים ומאשרים **לפני** שבונים עמודים.)
- אילו צבעים יופיעו כ"צבעי המותג" בבוחר הצבע של העורך?

**3. סוגי תוכן — לכל סוג שמצאתי או שנוסף:**
- שם (יחיד/רבים) ותפקיד.
- האם לכל פריט יש עמוד משלו באתר? מה הכתובת שלו?
- **שדות:** לכל שדה — שם, ו**פקד** מתוך הרשימה הזאת:

  | סוג נתון | הפקד במערכת |
  |---|---|
  | טקסט קצר / ארוך | שדה / תיבת טקסט |
  | תוכן מעוצב | טקסט עשיר |
  | מספר / מחיר | stepper / שדה עם ₪ |
  | כן־לא | מתג |
  | בחירה מתוך 2–5 | כפתורים (segmented) |
  | בחירה מתוך רשימה ארוכה | רשימה עם חיפוש |
  | תאריך / שעה | בוחר תאריך / בוחר שעה |
  | מועדים חוזרים | עורך סדרה (כלל + חריגים) |
  | תמונה / גלריה / וידאו | בוחר מדיה / גלריה עם סידור / קישור או העלאה + כיסוי |
  | קישור | שדה כתובת + "חלון חדש" |
  | קשר לסוג אחר (למשל "המדריך של השיעור") | chips עם חיפוש |
  | רשימה חוזרת (שאלות ותשובות, מחירים) | רשימה עם הוספה וגרירה |
  | צבע | עיגולי צבעי המותג |
  | קטגוריות / תגיות | סיווגים היררכיים (סימון ילד מסמן אב) |
- חובה או רשות? ערך ברירת מחדל? מה מוסתר עד שמתג מסוים דלוק?
- איפה הפריט מוצג ברשימות, ובאיזה סדר (תאריך, ידני, א־ב)?
- סוג שנמצא בסריקה ולא באמת בשימוש — להסיר?

**4. פעילות חוזרת (רק אם רלוונטי)**
- יש פריטים שמתקיימים שוב ושוב (קורס, סדרה, שירות עם מועדים)? איך לקרוא לרמות: פריט ← מופע ← מפגש?
- יש תקופות הרשמה (מחזור / עונה / סמסטר)? מה עובר בירושה מהפריט למופע (מחיר, מיקום, אנשים)?
- הרשמה: מה נאסף, יש רשימת המתנה, תשלום (בלי / ספק מסוים)?

**5. טפסים ופניות**
- לכל טופס: מה קורה אחרי השליחה (עמוד תודה / מייל / שניהם)? מי מקבל התראה?

**6. משתמשים**
- כמה אנשים יעבדו במערכת? להשאיר את שלושת התפקידים (מנהל/ת · עורך/ת אתר · עורך/ת תוכן) או לשנות?

**7. תשתית**
- להשאיר את מה שהאתר כבר משתמש בו, או לעבור לברירת המחדל בחלק ב (סעיף 1)? איפה יישמרו קבצים?
- סודות ומפתחות: **לא** בשיחה. אני אכין `.env.example`, ואתם ממלאים בסביבת הפריסה.

**8. תוכן קיים וחיבורים**
- יש תוכן מאתר קודם לייבא (קובץ ייצוא, CSV)? כולל פניות והרשמות?
- חיבורים: שליחת מיילים, אנליטיקס, תשלום, יומן?

### א4. אפיון לאישור
אחרי התשובות, כתוב **מסמך אפיון אחד** (קובץ `ADMIN-SPEC.md` בפרויקט) ובקש אישור:
- סוגי התוכן, השדות והפקדים (טבלה לכל סוג), ומה מוצג איפה.
- מבנה העמודים כעץ (אזור ← קונטיינר ← אלמנט) לכל עמוד קיים, ומה ישתנה בהעברה.
- השפה הגרפית כמשתנים.
- תפקידים, טפסים, תקופות (אם יש), תשתית.
- **תוכנית העברה לאתר קיים:** איך כל עמוד הופך לעץ אלמנטים בלי שהמראה ישתנה, ואיך תוכן קשיח עובר למסד הנתונים. אחרי ההעברה משווים כל עמוד מול הגרסה הקודמת (צילום מסך ב־1440, 1024 ו־390) עד שאין הבדלים.
- מה **לא** ייכנס בשלב הזה.

רק אחרי אישור — עוברים לבנייה לפי סעיף 13 בחלק ב.

---

## חלק ב — ההנחיות לכלי (לא לשנות)

המפרט כאן קובע **איך** המערכת עובדת ונראית, והוא זהה בכל אתר. האפיון המאושר מחלק א (`ADMIN-SPEC.md`) קובע **מה** יש בה. בכל מקום שכתוב כאן "לפי חלק א" — הכוונה לאפיון.

### 0. כללי עבודה
- **אל תניח נכסים שלא נמסרו או נמצאו באתר.** אין להמציא גופנים, צבעי מותג, לוגו או תמונות ממקור לא חוקי. מה שחסר נשאר placeholder ניטרלי שמסומן בבירור, ואני מאשר/ת אותו.
- **אל תמציא סוגי תוכן, שדות או עמודים** שלא מופיעים באפיון. אם משהו נראה חסר, שאל.
- **באתר קיים: המראה לא משתנה.** ההעברה לעץ אלמנטים נבדקת עמוד־עמוד מול הגרסה הקודמת.
- **עבוד בשלבים**, לפי הסדר בסעיף 13. בסוף כל שלב עצור ודווח:
  - מה נבנה.
  - מה נבדק, עם צילומי מסך ב־1440, 1024 ו־390.
  - מה לא נבדק.
  - מה דורש החלטה שלי.
- **לפני כל קוד:** דוח קצר עם מודל הנתונים, רשימת המסכים, ומה לא ברור.
- **בכל שלב:** בדיקת טיפוסים ו־build. בדיקה בדפדפן עם צילום מסך ברוחב ריאלי.
- **בבדיקות לא יוצרים נתונים אמיתיים.** לא שולחים פניות ולא יוצרים טיוטות במסד המשותף. עובדים על עותק של מסד הנתונים, או מיירטים את קריאות השמירה.
- **פריסה, מחיקה המונית, או העתקה של נתונים מקומיים לענן** רק אחרי אישור מפורש שלי.
- **סודות** (מפתחות, סיסמאות) לא נכנסים לקוד. צור `.env.example`.
- **השפה בממשק:** בשפה ובכיוון מחלק א, ופשוטה, בלי ז'רגון. כותבים "כתובת העמוד" ולא slug, ו"להסתיר מגוגל" ולא noindex.

### 1. ארכיטקטורה
- **ברירת מחדל**, אלא אם חלק א אומר אחרת:
  - Next.js (App Router) + TypeScript.
  - SQLite / libSQL (קובץ מקומי בפיתוח, שירות מנוהל בענן).
  - אחסון קבצים בענן.
  - פריסה ל־Vercel.
- **אזור השרת קרוב למסד הנתונים.** הפונקציות רצות באותו אזור כמו מסד הנתונים.
- **האתר הציבורי והמערכת קוראים את אותו מודל נתונים:**
  - האתר קורא את הגרסה **המפורסמת**.
  - העורך ותצוגת הטיוטה (`?_draft`) קוראים את **הטיוטה**.
- **האתר הציבורי מרונדר כ־HTML בצד השרת**, מעץ אלמנטים (סעיף 3).
  - אצל הגולש רץ קובץ JS קטן אחד, בלי framework, לתפריטים, קרוסלה, טאבים, אקורדיון, פופאפים, טפסים ואנימציות כניסה.
  - הרינדור כתוב כך שאותו קוד משמש גם את העורך.

### 2. מודל נתונים (כללי)
```
entries     id, type, status(publish|draft|trash), data JSON, revision, updated_at
drafts      entry_id, data JSON, revision, updated_at       — טיוטה אחת לפריט
revisions   id, entry_id, data JSON, created_at             — היסטוריית פרסומים
submissions id, kind, data JSON, status(new|in_progress|done|trash), created_at
settings    key, value JSON          — פרטי אתר, קשר, "מוצג בגוגל", מזהה אנליטיקס
users       email, role, active, password_hash, setup_token, setup_expires
rate_limits key, count, expires_at
```
- **מבנה רשומה:** `{id, type, status, title, path, content, excerpt, fields:{…}, seo:{title,description,image,noindex}, templateId?, doc?:{nodes}}`.
- **סוגי תוכן ושדות:** מוגדרים בקובץ סכמה אחד, לפי האפיון. ממנו נבנים הטפסים במערכת והוולידציה בשרת.
- **אם יש באפיון פעילות חוזרת:**
  - **ההיררכיה:** פריט ← מופע ← מפגשים.
  - **ירושה:** מופע יורש שדות מהפריט ושומר רק דריסות.
  - **מפגשים:** נגזרים מ**כלל** (ימים, שעות, תאריך ראשון, מספר מפגשים או תאריך סיום) ומ**חריגים** (דחייה, ביטול, הזזה, מפגש נוסף, עם סיבה אופציונלית). החישוב נעשה בפונקציה אחת בשרת, שמשמשת את המערכת, האתר, לוח השנה והטפסים.
  - **תקופות:** רשימה עם `revision` משלה, שמקבצת מופעים. סטטוס: טיוטה / פתוח להרשמה / הסתיים.
- **מזהים:** רשומות מיובאות מקבלות מזהה קבוע (`<source>-<id>`), כדי שאפשר יהיה להריץ ייבוא שוב בלי כפילויות. רשומות חדשות מקבלות UUID.

### 3. עמוד = עץ אלמנטים
```ts
SiteDoc  = { id, kind:'page'|'header'|'footer'|'popup'|'template', settings?, nodes: SiteNode[] }
SiteNode = { id, type, name?, tag?, classes?, props?, style?, css?, hide?, settings?, anchor?, bind?, children? }
type: section | container | heading | text | button | image | icon | icon-box | image-box | icon-list
    | counter | divider | video | accordion | tabs | carousel | menu | listing | form | html
style: { base|hover|before|after : { desktop|tablet|mobile : { cssProperty: value } } }
```
- **היררכיה קבועה:** section ברוחב מלא (רקע, ריווח אנכי) ← container פנימי ברוחב התוכן ← containers (flex שורה / עמודה, או grid) ← widgets.
  - אין אלמנט מחוץ לקונטיינר.
- **תגיות סמנטיות:** `section`, `header`, `footer`, `article`. h1 אחד בעמוד, ואחריו h2 לכל אזור.
- **נקודות שבירה:** טאבלט ≤1024px, טלפון ≤767px. הירושה היא מחשב ← טאבלט ← טלפון.
- **CSS של אלמנט:** `.n-<id>` עם משקל סלקטור קבוע. כללים מורכבים נשמרים ב־`css`, עם `&` במקום האלמנט.
- **פריסת קונטיינר:** נשמרת במשתני CSS (`--flex-direction`, `--gap`, `--padding-*`, `--width`…) שהבסיס קורא. העורך ממפה בין שם התכונה למשתנה.
- **השפה הגרפית:** מחלק א, כמשתני CSS ברמת האתר (צבעים, גופנים, סולם, ריווחים, פינות). אלמנטים משתמשים במשתנים, לא בערכים קשיחים.
- **`listing`:** רשימת כרטיסים לסוג תוכן. בכל רינדור היא נקשרת לנתונים:
  - פריט לא מפורסם יורד.
  - פריט שנערך מתעדכן.
  - פריט חדש מקבל את עיצוב הכרטיס של התבנית שלו.
- **`bind: 'title' | 'content'`:** מסמן איפה נכנס התוכן של פריט בעמוד הפריט. פריט חדש מקבל את העמוד של `templateId`, או תבנית של הסוג.
- **חלקים משותפים:** header, footer ותפריט טלפון נשמרים פעם אחת ומורכבים לכל עמוד.
- **פרטי קשר מההגדרות** מוחלפים בכל האתר בזמן רינדור.

### 4. API
- **ראוט אחד לניהול:** `/api/admin/<action>/<id?>`, ו־`/api/submit` לטפסים ציבוריים.
- **קריאה:** `bootstrap` (כל הרשומות עם טיוטות ממוזגות, סכמה, תקופות, מונה פניות חדשות, המשתמש), `entry`, `site-doc` (כולל `?part=` לחלקים משותפים), `history`, `leads`, `users`, `export`, `settings`.
- **כתיבה:**
  - `draft`: ניקוי ובדיקת revision.
  - `publish`: 409 אם הטיוטה השתנתה. בודק שדות חובה וקשרים. שומר revision. אם הכתובת השתנתה, יוצר הפניה אוטומטית.
  - `status`, `restore` (שחזור הולך **לטיוטה**).
  - `periods` ו־`publish-period`, אם יש תקופות.
  - `lead` (סטטוס והערה), `registration` (סטטוס הרשמה ותשלום לכל פריט).
  - `upload`, `users`, `user-link`, `settings`.
- **שגיאות** בשפה של חלק א, כי הן מוצגות למשתמש כמו שהן.
- **מטמון:** רק פעולות שמשנות את האתר הציבורי (פרסום, שינוי מצב, תקופות, הגדרות) מרוקנות את מטמון העמודים. אחרי ריקון, העמודים הראשיים נבנים מחדש ברקע.
  - שמירת טיוטה ופנייה חדשה **לא** מרוקנות את המטמון.

### 5. כניסה, תפקידים ואבטחה
- **כניסה:** מייל וסיסמה. העוגייה חתומה, ומכילה רק מייל ותוקף.
  - משתמש חדש מקבל קישור כניסה חד־פעמי ממסך המשתמשים.
  - את המנהל הראשון יוצרים מסקריפט.
  - אי אפשר להסיר לעצמך הרשאת ניהול.
- **תפקידים:** לפי האפיון, ובברירת מחדל:
  - **מנהל/ת:** הכול.
  - **עורך/ת אתר:** בלי משתמשים ובלי מחיקת פניות.
  - **עורך/ת תוכן:** רק פריטים, בלי עמודים, חלקים משותפים, תפריטים והגדרות.
  - **כל בדיקה נעשית בשרת**, בכל action. במסך המשתמשים, כל תפקיד מוסבר במילים.
- **ניקוי בשרת:**
  - HTML ב־allowlist, ו־SVG בניקוי.
  - סגנונות לפי whitelist של תכונות וערכים.
  - URL בטוח בלבד.
  - מזהים לפי regex.
  - **כל שדה חדש שמוסיפים למבנה נכנס גם לפונקציית הניקוי.**
- **עץ אלמנטים מהעורך:**
  - אלמנט קיים, או שכפול שלו (`copyOf`), שומר מהעותק המהימן את כל מה שהעורך לא אמור לשנות: CSS מיובא, מחלקות והגדרות.
  - אלמנט חדש יכול להיות רק מסוג פשוט.
- **גודל בקשה** מוגבל בכל endpoint. **טפסים ציבוריים** מוגבלים בקצב.
- **העלאות:** הסוג מזוהה לפי magic bytes. השם נקבע בשרת. קבצים גדולים עולים ישר מהדפדפן לאחסון, ומאומתים אחר כך.
- **ייצוא CSV** מוגן מהזרקת נוסחאות.
- **revision** לכל טיוטה ותקופה, עם הודעה ברורה: "התוכן השתנה בחלון אחר".
- **נתונים אישיים** לא נכנסים לתיקייה הציבורית, לקוד או ל־git.

### 6. ממשק הניהול: שלד ורכיבים
- **ספריית רכיבים מוכרת**, למשל shadcn/ui, ואייקונים בקו אחד. **כיוון ושפה מחלק א.**
- **הממשק של המערכת ניטרלי ולא תלוי במותג:**
  - גופן מערכת: `system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif`.
  - צבעים ניטרליים.
  - צבע הדגשה אחד.
  - צבעי המותג מופיעים רק בתוך התצוגה של האתר ובבוחרי הצבע.
- **סיידבר:**
  - קבוצות: "פעילות / תוכן עיקרי" (סוגי התוכן) / "תוכן האתר" (עמודים, ומתחתם "תפריט עליון ופוטר") / "ניהול" (פניות והרשמות, משתמשים, הגדרות).
  - מתקפל לטור אייקונים עם tooltips.
  - בטלפון נסגר אחרי בחירה.
- **ניווט ב־URL:** `?view=&item=&mode=`. חזרה אחורה ורענון שומרים את המסך. לפני יציאה עם שינויים שלא נשמרו מוצגת אזהרה.
- **רכיבים משותפים:**
  - תגית צבעונית לסטטוס ולסוג. **תגית היא לא כפתור.**
  - תפריט ⋯ במקום קבוע.
  - דיאלוג אישור.
  - כותרת עמוד עם פירורי לחם.
  - כרטיס אזור.
  - ערך יורש באפור עם "שינוי".
  - בוחר תמונה עם העלאה. בוחר תמונה מסנן סרטונים.
  - שדה וידאו: קישור או העלאה, עם תמונת כיסוי.
  - גלריה: בחירה מרובה וסידור.
  - טקסט עשיר.
- **גריד:** 4 כרטיסים בשורה במחשב. בכל כרטיס: כותרת, תגיות וסטטוס, ו־⋯.
- **פילטרים** בשורה אחת מעל הרשימה: חיפוש, סוג, "פעילים עכשיו", ומתג "סל המיחזור".
- **מחיקה:** אישור, toast עם "בטל", ומעבר לסל המיחזור עם שחזור. ביטול פרסום דורש אישור.
- **תוכן מיושר למעלה**, לא ממורכז אנכית.
- **לכל מצב ריק:** הסבר וכפתור פעולה.
- **שמירה:**
  - עריכה קטנה: שמירה אוטומטית ו"✓ נשמר".
  - מסך ארוך: שורת שמירה דביקה.
- **סוגי אינטראקציה:**
  - שינוי קטן: popover.
  - יצירה ועריכה בינונית: מגירה.
  - תוכן עשיר: מסך מלא.
  - פעולה מסוכנת: modal.

### 7. מסכים
- **לוח בקרה:**
  - KPI של התקופה הפתוחה.
  - מגמת פניות או הרשמות ב־30 הימים האחרונים מול 30 הימים שלפניהם.
  - הפריטים המבוקשים.
  - אחרונים: הרשמות, פניות.
  - "נשמר ועדיין לא פורסם".
  - חיבור אנליטיקס, אם יש.
  - **גרפים:** צבע אחד לכל סדרה, hover עם מספר ותאריך, וטבלה נגישה מוסתרת.
- **רשימה לכל סוג תוכן:** גריד ופילטרים.
- **עורך פריט:**
  - לשוניות: הגדרות כלליות / מופעים (אם יש) / טופס הרשמה (אם יש) / הגדרות מתקדמות.
  - בהגדרות המתקדמות: כתובת העמוד, סיווגים, ו"קידום בגוגל ושיתוף".
  - **סדר שדות:** שם ← תוכן ← מקום ומחיר ← מדיה ← טכני.
  - שדה לא רלוונטי מוסתר. למשל שדות וידאו מופיעים רק כשהמתג "הצג וידאו" דלוק.
  - **ערכים מוצגים כטקסט עם "שינוי"**, ולא כשדות פתוחים מראש.
- **תקופות ומופעים** (אם רלוונטי):
  - **מסך תקופה:** כרטיס לכל פריט עם המופעים שלו, "הוספת פריט לתקופה", "+ מופע נוסף", KPI, ותצוגות "לפי פריטים" / "לוח שנה" (חודש / שבוע) / "נרשמים".
  - **תקופה חדשה:** שם, ואז אחת משלוש אפשרויות: בחירת פריטים (נעתקים ימים, שעות ואנשים מהפעם האחרונה) / שכפול תקופה שלמה / ריק. היסטוריה של תקופה קודמת לא משתנה.
  - **מגירת מופע:** פריט (combobox עם חיפוש) ← שם באתר ← מועדים ← מקום ומחיר (ירושה) ← אנשים (chips עם תמונה) ← הרשמה.
    - הקשר נקבע לפי המסך שממנו נפתחה המגירה: מתוך תקופה לא שואלים איזו תקופה.
  - **עורך מועדים:**
    - **הכלל:** בחירת ימים, שעות, תאריך ראשון, ו"מספר מפגשים" או "עד תאריך".
    - **רשימה חיה:** מתעדכנת מיד, בלי שלב "החלה", ומציגה לפחות שני תאריכים בשורה.
    - **⋯ לכל תאריך:** דחייה, ביטול, הזזה, שחזור. אפשר לדלג בגלל חג, עם בחירה בין "לשמור על מספר המפגשים" (הסדרה מתארכת) לבין "לוותר על המפגש".
    - **סימון חריגים:** כל חריג מסומן ב־chip, למשל "שעה שונתה", "אין מפגש · חג", "הועבר מ־…".
    - **שינוי הכלל כשיש חריגים** שואל: "לעדכן רק את המפגשים הרגילים" (מומלץ) / "גם את החריגים".
    - **"+ מפגש נוסף".**
    - **פריט חד־פעמי:** במקום עורך סדרה מוצג רק "מועד" עם "+ מועד נוסף".
  - **אזהרות:** בלי אנשים, בלי מועדים, סיום לפני התחלה, מחוץ לתאריכי התקופה, התנגשות מקום ושעה. **שמירת טיוטה תמיד מותרת**, ורק פרסום נחסם.
- **נרשמים:**
  - מסך נפרד, שנכנסים אליו מכפתור "נרשמים (N)" בכרטיס ובעורך.
  - **KPI:** נרשמו, אושרו, ממתינים, רשימת המתנה, שילמו X מתוך סה"כ, הכנסה (נגבה מתוך צפוי), ופילוחים מחלק א.
  - **פילטרים:** תקופה, מופע, סטטוס, תשלום.
  - **טבלה:** בחירת סטטוס ותשלום ישירות בשורה, ודיאלוג פרטים עם סכום והערה.
  - **ייצוא CSV.**
- **פניות:** טבלה עם סטטוס (חדשה / בטיפול / טופלה), הערה וסל מיחזור.
- **משתמשים:** תפקידים מוסברים, וקישור כניסה.
- **הגדרות:** שם ותיאור האתר, פרטי קשר, "להסתיר מגוגל" (ברירת המחדל עד ההשקה), ומזהה אנליטיקס שמוזרק רק לעמודים הציבוריים.
- **SEO בכל פריט, עמוד ותקופה:**
  - כותרת עם מונה עד 60, ותיאור עם מונה עד 155.
  - תמונת שיתוף.
  - "להסתיר מגוגל", עם הסבר.
  - תצוגה מקדימה של גוגל שמתעדכנת בזמן הקלדה.
  - שדה ריק משאיר את הקיים, וה־placeholder מציג אותו.
  - ברינדור: `title`, `description`, `og:*`, `twitter:*`, `robots`.

### 8. העורך הוויזואלי (חייב להיראות ולהתנהג כך)
**פריסה:**
- **סרגל עליון:** חזרה, שם העמוד וסטטוס, בורר מכשיר (מחשב / טאבלט / טלפון), undo ו־redo, "שמירה", ו"פרסום".
- **תצוגה חיה במרכז:** iframe של העמוד האמיתי במצב עריכה, ברוחב המכשיר שנבחר.
- **פאנל צד** עם ארבע לשוניות: **מבנה / הוספה / אלמנט / עמוד**.

**התנהגות:**
- **לחיצה בתצוגה רק בוחרת:**
  - מאזינים ב־capture על `window`, וחוסמים ניווט, שליחת טפסים ופתיחת פופאפים.
  - סוגרים כל `dialog` פתוח.
  - מסגרת בחירה עם תווית סוג ושם. hover מסמן בעדינות.
- **התקשורת בין העורך לתצוגה:** postMessage באותו origin.
- **עדכון חלקי:**
  - שינוי עיצוב מחליף רק את ה־`<style>` של המסמך.
  - שינוי תוכן מחליף רק את האלמנט.
  - שינוי מבנה מרנדר מחדש רק את האב.
  - **אין רענון של כל העמוד.**
- **undo ו־redo:** היסטוריית מצבים. לוכדים את המצב הקודם לפני כל שינוי.
- **שמירה ופרסום:**
  - שמירה אוטומטית כטיוטה, עם השהיה קצרה אחרי שינוי.
  - "פרסום" מעביר את הטיוטה לאתר.
  - אחרי הסרת אלמנט: מנקים את הבחירה וחוזרים ללשונית מבנה.
- **מזהים:** יציבים לכל אלמנט. שכפול או הוספה נותנים מזהים חדשים לכל הצאצאים מיד.

**לשונית מבנה:**
- עץ מתקפל.
- שם קריא לכל אלמנט: השם שניתן לו, או קטע מהטקסט שבו, או הסוג. למשל "אזור · פתיחה", "קונטיינר · שורה", "כותרת · ברוכים הבאים".
- סימון פריסה: שורה / עמודה / רשת.
- פעולות: שכפול, הזזה למעלה ולמטה, מחיקה, שינוי שם.

**לשונית הוספה (ספריית רכיבים):**
- **שלוש רמות:** אלמנט בודד / קבוצה (כרטיס, גלריה, שאלות ותשובות, טופס) / אזור שלם.
- **בנייה:** בסריקה של עמודי האתר עצמו.
  - איחוד כפילויות לפי חתימת סגנון ומבנה.
  - אחים זהים מתקפלים לפריט אחד.
  - עמודי בדיקה מסוננים החוצה.
- **תצוגה מקדימה חיה:** חתוכה ומוקטנת, עם טעינה עצלה.
- **בפאנל:** טאבים לפי רמה, חיפוש, צ'יפים של קטגוריות, והשורה "יתווסף אחרי X".
  - אזור נכנס אחרי אזור.
  - אלמנט שמוסיפים ישר לעמוד נעטף באזור וקונטיינר.
- **אזור ריק חדש** נוצר עם קונטיינר אחד בתוכו.

**לשונית אלמנט → תוכן:**
- שדות לפי סוג האלמנט:
  - טקסט עשיר: מודגש, נטוי, קישור, רשימה, צבע מצבעי המותג, גודל (קטן / גדול / גדול מאוד / מספר).
  - כפתור וקישור: טקסט, כתובת, ופתיחה בחלון חדש.
  - תמונה: בוחר, וטקסט חלופי.
  - וידאו.
  - פריטי תפריט: שם, כתובת, תת־פריטים.
  - פריטי טאבים, אקורדיון וקרוסלה.
- **טקסט עשיר:** זוכרים את הבחירה (selectionchange) ומשחזרים אותה לפני כל פעולה. צבע וגודל עוטפים את הבחירה ב־`span` עם style מותר. לא `<font>` ולא execCommand לצבע.

**לשונית אלמנט → עיצוב ופריסה (פאנל הסגנון):**
- **בראש הפאנל:** "עורכים עכשיו: מחשב / טאבלט / טלפון", מתג רגיל / hover, ומקרא של הנקודה.
- **קבוצות מתקפלות:**
  - טקסט: גופן מהשפה הגרפית, גודל, משקל, גובה שורה, יישור, צבע.
  - רקע: צבע, תמונה, גרדיאנט.
  - מסגרת.
  - פינות.
  - צל.
  - שקיפות.
  - קבוצה עם שינוי מקבלת **נקודה כתומה** ו"איפוס".
- **ליד כל ערך:** "הוגדר ל־<מכשיר>" או "יורש מ־<מכשיר>".
- **פקדים:**
  - stepper עם בחירת יחידה (px, %, vw, em).
  - segmented עם אייקונים.
  - צבעי המותג כעיגולים, עם "+ אחר".
  - פריסטים ויזואליים לפינות, לקו ולצל.
  - **בכל קבוצת פריסטים**, משמאל לתווית: "הגדרה ידנית". היא פותחת ערכים מדויקים:
    - **פינות:** כל הפינות או כל פינה בנפרד.
    - **צל:** הזזה לצד, הזזה למטה, טשטוש, התפשטות, צבע ושקיפות.
- **פריסה:**
  - **גודל:** אוטומטי / מלא / קבוע, ו־min ו־max.
  - **ריווח:** דיאגרמת box-model (margin ו־padding) עם פריסטים.
  - **סידור התוכן:** block / עמודה / שורה / רשת, יישור בגריד 3×3, gap, ומתג "לרדת שורה כשאין מקום".
  - **"מיקום מתקדם (צף, נעוץ, שכבות)":** הסבר לכל אפשרות. מיקום אבסולוטי רק לקישוטים.
  - **"הצגה והסתרה לפי מכשיר":** מתג למחשב, לטאבלט ולטלפון.

**לשונית עמוד:**
- שם העמוד וכתובת העמוד. שינוי כתובת יוצר הפניה אוטומטית.
- SEO.
- רקע העמוד.
- בורר החלקים המשותפים: תפריט עליון / פוטר / תפריט בטלפון.

**ערכים ומגבלות:**
- כל הערכים נשמרים ב־`style[state][device]`. לקונטיינרים: במשתני הפריסה.
- **רק תכונות וערכים מה־whitelist נשמרים.** השרת מנקה שוב.

### 9. התנהגות האתר הציבורי (פרטים שקל לפספס)
- **תת־תפריט:** נפתח בריחוף עכבר וגם בלחיצה, עם השהיה של כ־300ms לפני סגירה. Escape או לחיצה בחוץ סוגרים אותו. `aria-expanded` מתעדכן.
- **התפריט בטלפון:** כפתור המבורגר ותפריט נפתח, עם חצים לתת־תפריטים.
- **פופאפ שתוכנו נטען מהשרת:**
  - מוצג רק אחרי שהעיצוב שלו נטען.
  - נכנס **פעם אחת**, בהחלקה פשוטה מהצד. כיוון ההחלקה מוגדר בעיצוב.
  - התוכן מתחיל להיטען כבר בריחוף על הכפתור שפותח אותו.
  - אם הטעינה איטית: חלון "טוען" מחליק פנימה, והתוכן מתחלף בתוכו בלי תנועה נוספת.
  - נגיש: מיקוד בכפתור הסגירה, ו־Escape סוגר.
- **טפסים:** שליחה ל־`/api/submit` עם הודעת הצלחה או שגיאה ברורה. אחרי השליחה: עמוד תודה או מייל, לפי האפיון.
- **אנימציות כניסה:** מכבדות `prefers-reduced-motion`.
- **נגישות:** ניווט מלא במקלדת, מיקוד גלוי, טקסט חלופי, ניגודיות, ותגיות סמנטיות.

### 10. ביצועים (חובה מההתחלה)
- **מטמון לכל עמוד ציבורי** (מטמון נתונים ו־CDN עם תג). ריקון רק בפעולות ציבוריות.
- **חימום:** אחרי פריסה ואחרי ריקון, סקריפט פותח מראש את כל העמודים.
- **קבצים סטטיים:** מקושרים עם `?v=<hash של התוכן>`, ומוגשים עם `Cache-Control: immutable` לשנה. **כל שינוי בקובץ משנה את ה־hash.**
- **CSS:**
  - קובץ בסיס משותף.
  - קבצים לפי hash לגיליונות שכמה עמודים חולקים.
  - CSS של עמוד יחיד נכנס inline.
  - **סדר הכללים נשמר.**
- **SVG שחוזר על עצמו:** עובר ל־`<symbol>` ו־`<use>`.
- **תמונות:** בגדלים מתאימים ובפורמט מודרני, עם lazy loading מתחת לקו הגלילה.
- **prefetch** לעמוד כשהעכבר עובר על הקישור אליו.
- **יעד:** מעבר בין עמודים פחות מחצי שנייה עד שהתוכן מוצג, נמדד על האתר שפורסם.

### 11. ייבוא והעברה של אתר קיים
- מייבאים את **כל** התוכן וההיסטוריה, כולל פניות והרשמות, כדי שהמסכים לא יהיו ריקים.
- לרשומות מיובאות: `source` משלהן, סטטוס "טופל", ומזהה קבוע.
- **שיוך אוטומטי** לפי שמות מנורמלים: מקפים, ישויות HTML ורווחים.
- **עמודים שכבר בנית (קוד React / HTML / בונה אתרים):**
  - ממירים כל עמוד לעץ האלמנטים: כל אזור, קונטיינר ורכיב הופך לצומת, עם הסגנונות שלו לפי מכשיר.
  - תוכן שהיה קשיח בקוד ושייך לסוג תוכן עובר למסד הנתונים, והעמוד מציג אותו דרך `listing` או `bind`.
  - שומרים עותק של הגרסה הקודמת עד שההעברה מאושרת.
  - משווים כל עמוד מול הגרסה הקודמת: צילום מסך ב־1440, 1024 ו־390, ואם אפשר גם מיקום, גודל וסגנון מחושב של כל אלמנט. ממשיכים עד שאין הבדלים מלבד אפקטי גלילה.
  - עמוד שלא הועבר עדיין ממשיך לעבוד כמו קודם.
- **קובץ ייבוא זמני** עם נתונים אישיים מרוקנים מיד אחרי השימוש.

### 12. מה לא עושים
- לא ממציאים תוכן, אנשים, ביקורות או תמונות ומציגים אותם כאמיתיים. Placeholder מסומן כ־placeholder.
- לא משתמשים בגופנים, תמונות או אייקונים בלי רישיון מתאים.
- לא מעתיקים את דף הבית לעמוד חדש. **עמוד חדש נפתח ריק**, רק עם תפריט ופוטר, ומסגרת "העמוד ריק — הוסיפו אזור".
- לא מוסיפים סוגי תוכן או שדות שלא ביקשתי. סוג שלא בשימוש מוסר.

### 13. סדר העבודה (לעצור לבדיקה בסוף כל שלב)
1. **חלק א:** סריקה, ראיון ואפיון מאושר.
2. **השפה הגרפית:** כמשתנים, ועמוד דוגמה של כל הרכיבים.
3. **שלד:** מסד נתונים, כניסה, תפקידים, מסגרת הניהול.
4. **סוגי תוכן:** רשימות, עורך פריט, טיוטה ופרסום, היסטוריה, סל מיחזור, SEO.
5. **האתר הציבורי:** עמודים כעץ אלמנטים, חלקים משותפים, רשימות חיות, runtime.
6. **העורך הוויזואלי וספריית הרכיבים.**
7. **טפסים:** פניות, הרשמות, נרשמים, לוח בקרה.
8. **תקופות, מופעים ועורך מועדים** (אם רלוונטי).
9. **איכות:** ביצועים, נגישות ובדיקת אבטחה.
10. **ייבוא, העברת העמודים הקיימים (אם יש) ופריסה** — רק באישור שלי.

בסוף כל שלב: צילומי מסך ב־1440, 1024 ו־390, ורשימה של מה נבנה, מה נבדק, מה לא נבדק, ומה מחכה להחלטה שלי.