freelang-editor 11.7.4

package/stdlib/string-ext.fl

@@ -0,0 +1,45 @@
+;; stdlib/string-ext.fl — 문자열 확장 유틸리티
+
+(defn str-words [s]
+  ;; 문자열을 공백으로 분리해 단어 배열 반환
+  ;; (str-words "hello world foo") → ["hello" "world" "foo"]
+  (filter (fn [w] (not (str-blank? w))) (str-split (str-trim s) " ")))
+
+(defn str-truncate [s max-len]
+  ;; 최대 길이 초과 시 "..." 붙여 자름
+  ;; (str-truncate "hello world" 8) → "hello..."
+  (if (<= (length s) max-len)
+    s
+    (str (str-slice s 0 (- max-len 3)) "...")))
+
+(defn str-camel-case [s]
+  ;; kebab-case → camelCase 변환
+  ;; (str-camel-case "hello-world-foo") → "helloWorldFoo"
+  (let [parts (str-split s "-")]
+    (if (empty? parts) s
+      (str (first parts)
+           (apply str (map (fn [w] (str (str-to-upper (str-slice w 0 1)) (str-slice w 1))) (rest parts)))))))
+
+(defn str-pascal-case [s]
+  ;; kebab-case → PascalCase 변환
+  ;; (str-pascal-case "hello-world") → "HelloWorld"
+  (apply str (map (fn [w] (str (str-to-upper (str-slice w 0 1)) (str-slice w 1))) (str-split s "-"))))
+
+(defn str-snake-case [s]
+  ;; kebab-case → snake_case 변환
+  ;; (str-snake-case "hello-world") → "hello_world"
+  (str-replace-all s "-" "_"))
+
+(defn str-kebab-case [s]
+  ;; snake_case → kebab-case 변환
+  ;; (str-kebab-case "hello_world") → "hello-world"
+  (str-replace-all s "_" "-"))
+
+(defn str-count-words [s]
+  ;; 단어 수 반환
+  (length (str-words s)))
+
+(defn str-repeat-join [s n sep]
+  ;; s를 n번 sep으로 이어서 반환
+  ;; (str-repeat-join "ha" 3 "-") → "ha-ha-ha"
+  (join (repeat n s) sep))

package/stdlib/validate.fl

@@ -0,0 +1,123 @@
+;; stdlib/validate.fl — 데이터 검증 유틸리티 (v11.6.36)
+;; (load "stdlib/validate.fl")
+
+;; ── 기본 타입 검증 ────────────────────────────────────────────────────────────
+
+(defn validate-email [s]
+  (if (string? s)
+    (re-test "^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$" s)
+    false))
+
+(defn validate-url [s]
+  (if (string? s)
+    (re-test "^https?://.+" s)
+    false))
+
+(defn validate-min-length [s n]
+  (if (string? s) (>= (length s) n) false))
+
+(defn validate-max-length [s n]
+  (if (string? s) (<= (length s) n) false))
+
+(defn validate-range [v mn mx]
+  (and (>= v mn) (<= v mx)))
+
+(defn validate-integer [v]
+  (integer? v))
+
+(defn validate-positive [v]
+  (and (number? v) (> v 0)))
+
+(defn validate-non-negative [v]
+  (and (number? v) (>= v 0)))
+
+;; ── 빈 값 검증 ────────────────────────────────────────────────────────────────
+;; 반환: 비어있는 필드 키 목록
+(defn validate-required [m fields]
+  (filter
+    (fn [k]
+      (let [v (get m k)]
+        (or (nil? v)
+            (and (string? v) (str-blank? v)))))
+    fields))
+
+;; ── 단일 필드 검증 내부 헬퍼 ──────────────────────────────────────────────────
+(defn -check-required [errs k val rule]
+  (if (and (get rule :required)
+           (or (nil? val) (and (string? val) (str-blank? val))))
+    (push errs (str k " is required"))
+    errs))
+
+(defn -check-email [errs k val rule]
+  (if (and (not (nil? val)) (get rule :email) (not (validate-email val)))
+    (push errs (str k " must be a valid email"))
+    errs))
+
+(defn -check-url [errs k val rule]
+  (if (and (not (nil? val)) (get rule :url) (not (validate-url val)))
+    (push errs (str k " must be a valid URL"))
+    errs))
+
+(defn -check-min-length [errs k val rule]
+  (let [n (get rule :min-length)]
+    (if (and (not (nil? n)) (string? val) (not (validate-min-length val n)))
+      (push errs (str k " must be at least " n " characters"))
+      errs)))
+
+(defn -check-max-length [errs k val rule]
+  (let [n (get rule :max-length)]
+    (if (and (not (nil? n)) (string? val) (not (validate-max-length val n)))
+      (push errs (str k " must be at most " n " characters"))
+      errs)))
+
+(defn -check-type [errs k val rule]
+  (let [t (get rule :type)]
+    (if (and (not (nil? t)) (not (nil? val)) (not (= (type-of val) t)))
+      (push errs (str k " must be of type " t))
+      errs)))
+
+(defn -check-min [errs k val rule]
+  (let [mn (get rule :min)]
+    (if (and (not (nil? mn)) (number? val) (< val mn))
+      (push errs (str k " must be >= " mn))
+      errs)))
+
+(defn -check-max [errs k val rule]
+  (let [mx (get rule :max)]
+    (if (and (not (nil? mx)) (number? val) (> val mx))
+      (push errs (str k " must be <= " mx))
+      errs)))
+
+;; ── 단일 필드 규칙 검증 ───────────────────────────────────────────────────────
+;; 반환: 에러 메시지 목록 (비어있으면 OK)
+(defn validate-field [k val rule]
+  (let [e0 []]
+  (let [e1 (-check-required  e0 k val rule)]
+  (let [e2 (-check-email     e1 k val rule)]
+  (let [e3 (-check-url       e2 k val rule)]
+  (let [e4 (-check-min-length e3 k val rule)]
+  (let [e5 (-check-max-length e4 k val rule)]
+  (let [e6 (-check-type      e5 k val rule)]
+  (let [e7 (-check-min       e6 k val rule)]
+        (-check-max          e7 k val rule))))))))))
+
+;; ── 스키마 검증 ───────────────────────────────────────────────────────────────
+;; schema 예시:
+;;   {:name {:required true :min-length 2 :max-length 50}
+;;    :email {:required true :email true}
+;;    :age   {:type "number" :min 0 :max 150}}
+;; 반환: {:ok bool :errors [{:field k :message msg}]}
+(defn validate-schema [data schema]
+  (let [ks (obj-keys schema)]
+  (let [all-errors (reduce
+    (fn [acc k]
+      (let [rule (get schema k)
+            val  (get data k)
+            msgs (validate-field k val rule)]
+        (if (> (length msgs) 0)
+          (into acc (map (fn [m] {:field k :message m}) msgs))
+          acc)))
+    []
+    ks)]
+  {:ok (= (length all-errors) 0)
+   :errors all-errors})))

package/stdlib/web/components.fl

@@ -0,0 +1,125 @@
+;; stdlib/web/components.fl — UI 컴포넌트 라이브러리 (v11 SSR)
+;; (load "stdlib/web/components.fl")
+;;
+;; 모든 함수는 HTML 문자열을 반환합니다. (서버 SSR 전용)
+
+;; ── 버튼 ─────────────────────────────────────────────────────────
+;; (render-button "저장" "primary" "md" "" false)
+(defn render-button [text variant size onclick disabled]
+  (let [disabled-attr (if disabled " disabled" "")
+        onclick-attr  (if (str-blank? onclick) "" (str " onclick=\"" onclick "\""))]
+    (str "<button type=\"button\" class=\"fl-btn fl-btn-" variant " fl-btn-" size "\""
+         disabled-attr onclick-attr ">" text "</button>")))
+
+;; (btn "저장") — 기본값 버전
+(defn btn [text]
+  (render-button text "primary" "md" "" false))
+
+(defn btn-danger [text onclick]
+  (render-button text "danger" "md" onclick false))
+
+;; ── 카드 ─────────────────────────────────────────────────────────
+;; (render-card "제목" "<p>내용</p>" "" "")
+(defn render-card [title body footer image]
+  (let [img-html    (if (str-blank? image)
+                      ""
+                      (str "<img class='fl-card-img' src='" image "' alt='" title "' />"))
+        title-html  (if (str-blank? title)
+                      ""
+                      (str "<h3 class='fl-card-title'>" title "</h3>"))
+        footer-html (if (str-blank? footer)
+                      ""
+                      (str "<div class='fl-card-footer'>" footer "</div>"))]
+    (str "<div class='fl-card'>"
+         img-html
+         "<div class='fl-card-body'>"
+         title-html
+         "<div class='fl-card-content'>" body "</div>"
+         footer-html
+         "</div></div>")))
+
+;; ── 알림 배너 ────────────────────────────────────────────────────
+;; type: "info" | "success" | "warning" | "danger"
+;; (render-alert "저장되었습니다" "success" false)
+(defn render-alert [message alert-type dismissible]
+  (let [close-btn (if dismissible
+                    "<button class='fl-alert-close' onclick='this.parentElement.remove()'>×</button>"
+                    "")]
+    (str "<div class='fl-alert fl-alert-" alert-type "' role='alert'>"
+         "<span class='fl-alert-msg'>" message "</span>"
+         close-btn
+         "</div>")))
+
+(defn alert-info [msg]    (render-alert msg "info" false))
+(defn alert-success [msg] (render-alert msg "success" false))
+(defn alert-warn [msg]    (render-alert msg "warning" true))
+(defn alert-error [msg]   (render-alert msg "danger" true))
+
+;; ── 배지 ─────────────────────────────────────────────────────────
+;; (render-badge "NEW" "primary")
+(defn render-badge [label color]
+  (str "<span class='fl-badge fl-badge-" color "'>" label "</span>"))
+
+(defn badge [label] (render-badge label "primary"))
+(defn badge-success [label] (render-badge label "success"))
+(defn badge-danger [label]  (render-badge label "danger"))
+(defn badge-gray [label]    (render-badge label "gray"))
+
+;; ── 모달 ─────────────────────────────────────────────────────────
+;; (render-modal "confirm" "확인" "<p>삭제하겠습니까?</p>" "")
+;; → flOpenModal("confirm") / flCloseModal("confirm") 으로 제어
+(defn render-modal [id title body footer]
+  (let [footer-html (if (str-blank? footer)
+                      ""
+                      (str "<div class='fl-modal-footer'>" footer "</div>"))]
+    (str "<div class='fl-modal-overlay' id='modal-" id "'"
+         " onclick='flCloseModal(\"" id "\")' style='display:none'>"
+         "<div class='fl-modal-box' onclick='event.stopPropagation()'>"
+         "<div class='fl-modal-header'>"
+         "<h2>" title "</h2>"
+         "<button class='fl-modal-close' onclick='flCloseModal(\"" id "\")'>×</button>"
+         "</div>"
+         "<div class='fl-modal-body'>" body "</div>"
+         footer-html
+         "</div></div>")))
+
+;; ── 모달 헬퍼 JS ─────────────────────────────────────────────────
+(defn modal-helpers-js []
+  "<script>
+function flOpenModal(id){var el=document.getElementById('modal-'+id);if(el)el.style.display='flex';}
+function flCloseModal(id){var el=document.getElementById('modal-'+id);if(el)el.style.display='none';}
+</script>")
+
+;; ── 전체 컴포넌트 CSS ────────────────────────────────────────────
+(defn all-component-css []
+  "<style>
+.fl-btn{display:inline-flex;align-items:center;cursor:pointer;border:none;font-size:var(--font-base,1rem);font-weight:500;border-radius:var(--radius-md,6px);transition:opacity 0.15s;padding:0.5rem 1rem;}
+.fl-btn:hover{opacity:0.85;}.fl-btn:disabled{opacity:0.5;cursor:not-allowed;}
+.fl-btn-primary{background:var(--color-primary,#3b82f6);color:#fff;}
+.fl-btn-secondary{background:var(--color-bg-muted,#f1f5f9);color:var(--color-text,#1e293b);border:1px solid var(--color-border,#e2e8f0);}
+.fl-btn-danger{background:var(--color-danger,#ef4444);color:#fff;}
+.fl-btn-sm{font-size:0.875rem;padding:0.25rem 0.75rem;}
+.fl-btn-lg{font-size:1.125rem;padding:0.75rem 1.5rem;}
+.fl-card{background:var(--color-bg,#fff);border:1px solid var(--color-border,#e2e8f0);border-radius:var(--radius-lg,10px);overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.07);}
+.fl-card-img{width:100%;height:200px;object-fit:cover;}
+.fl-card-body{padding:1rem;}
+.fl-card-title{font-size:1.125rem;font-weight:600;margin-bottom:0.5rem;}
+.fl-card-footer{margin-top:1rem;padding-top:0.75rem;border-top:1px solid var(--color-border,#e2e8f0);color:var(--color-text-muted,#64748b);font-size:0.875rem;}
+.fl-alert{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 1rem;border-radius:6px;margin:0.5rem 0;}
+.fl-alert-info{background:#dbeafe;color:#1e40af;border:1px solid #93c5fd;}
+.fl-alert-success{background:#dcfce7;color:#166534;border:1px solid #86efac;}
+.fl-alert-warning{background:#fef9c3;color:#854d0e;border:1px solid #fde047;}
+.fl-alert-danger{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5;}
+.fl-alert-close{background:none;border:none;cursor:pointer;font-size:1.25rem;color:inherit;margin-left:0.5rem;}
+.fl-badge{display:inline-block;padding:2px 0.5rem;border-radius:9999px;font-size:0.75rem;font-weight:600;line-height:1.5;}
+.fl-badge-primary{background:#dbeafe;color:#1d4ed8;}
+.fl-badge-success{background:#dcfce7;color:#15803d;}
+.fl-badge-warning{background:#fef9c3;color:#a16207;}
+.fl-badge-danger{background:#fee2e2;color:#b91c1c;}
+.fl-badge-gray{background:#f1f5f9;color:#475569;}
+.fl-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:1000;display:flex;align-items:center;justify-content:center;}
+.fl-modal-box{background:var(--color-bg,#fff);border-radius:10px;padding:1.5rem;max-width:500px;width:90%;box-shadow:0 10px 25px rgba(0,0,0,0.15);}
+.fl-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;}
+.fl-modal-close{background:none;border:none;cursor:pointer;font-size:1.5rem;color:var(--color-text-muted,#64748b);}
+.fl-modal-footer{margin-top:1rem;display:flex;justify-content:flex-end;gap:0.5rem;}
+</style>")

package/stdlib/web/csrf.fl

@@ -0,0 +1,61 @@
+;; stdlib/web/csrf — 클라이언트 CSRF 토큰 주입/전송
+;; 서버 측 발급·검증은 별도 (백엔드 stdlib, 미들웨어). 여기는 프론트만.
+;;
+;; 사용:
+;;   1) layout <head> 에 (csrf-meta token)   → <meta name="csrf-token" content="...">
+;;   2) layout 끝에 (csrf-fetch-js)          → 모든 fetch() POST 에 자동 헤더 주입
+;;   3) <form> 에 (csrf-input token)         → 기본 제출도 커버
+
+;; <meta name="csrf-token" content="TOKEN">
+(defn csrf-meta [token]
+  (str "<meta name=\"csrf-token\" content=\"" (csrf-esc token) "\">"))
+
+;; <input type="hidden" name="_csrf" value="TOKEN">
+(defn csrf-input [token]
+  (str "<input type=\"hidden\" name=\"_csrf\" value=\"" (csrf-esc token) "\">"))
+
+;; 값 이스케이프 — HTML 속성 안전
+(defn csrf-esc [v]
+  (if (null? v) ""
+    (let [a (replace v "&" "&amp;")
+          b (replace a "\"" "&quot;")
+          c (replace b "<" "&lt;")]
+      c)))
+
+;; fetch monkeypatch — 모든 POST/PUT/PATCH/DELETE 요청에
+;; X-CSRF-Token 헤더 자동 주입. GET/HEAD 는 통과.
+(defn csrf-fetch-js []
+  "<script>
+(function(){
+  if(window.__flCsrfPatched)return;
+  window.__flCsrfPatched = true;
+  var meta = document.querySelector('meta[name=\"csrf-token\"]');
+  var token = meta ? meta.getAttribute('content') : '';
+  if(!token)return;
+  var origFetch = window.fetch.bind(window);
+  window.fetch = function(input, init){
+    init = init || {};
+    var method = ((init.method || (typeof input === 'object' && input.method) || 'GET') + '').toUpperCase();
+    if(['POST','PUT','PATCH','DELETE'].indexOf(method) >= 0){
+      init.headers = new Headers(init.headers || (typeof input === 'object' ? input.headers : null) || {});
+      if(!init.headers.has('X-CSRF-Token')){
+        init.headers.set('X-CSRF-Token', token);
+      }
+    }
+    return origFetch(input, init);
+  };
+  // 일반 form 제출도 hidden input 자동 주입 (이미 있으면 skip)
+  document.addEventListener('submit', function(e){
+    var f = e.target;
+    if(!(f instanceof HTMLFormElement))return;
+    var m = (f.method || 'GET').toUpperCase();
+    if(m === 'GET' || m === 'HEAD')return;
+    if(f.querySelector('input[name=\"_csrf\"]'))return;
+    var inp = document.createElement('input');
+    inp.type = 'hidden';
+    inp.name = '_csrf';
+    inp.value = token;
+    f.appendChild(inp);
+  }, true);
+})();
+</script>")

package/stdlib/web/format.fl

@@ -0,0 +1,75 @@
+;; stdlib/web/format — 한국 로케일 포매터 (프론트 HTML 렌더용)
+;; 순수 함수. 입력이 null 이면 빈 문자열 또는 "-" 반환.
+
+;; 금액: 1234567 → "1,234,567원"
+(defn format-money [n]
+  (if (null? n) "-"
+    (let [s (str n)
+          len (length s)
+          negative (if (> len 0) (= (char-at s 0) "-") false)
+          body (if negative (substring s 1) s)
+          body-len (length body)]
+      (let [grouped (group-thousands body body-len)]
+        (str (if negative "-" "") grouped "원")))))
+
+(defn group-thousands [s len]
+  (if (<= len 3)
+    s
+    (let [head (substring s 0 (- len 3))
+          tail (substring s (- len 3) len)]
+      (str (group-thousands head (length head)) "," tail))))
+
+;; ISO 날짜: "2026-04-17" → "2026년 4월 17일"
+(defn format-date [iso]
+  (if (null? iso) "-"
+    (let [s (str iso)
+          y (substring s 0 4)
+          m (substring s 5 7)
+          d (substring s 8 10)]
+      (str y "년 " (trim-zero m) "월 " (trim-zero d) "일"))))
+
+(defn trim-zero [s]
+  (if (= (char-at s 0) "0")
+    (substring s 1 2)
+    s))
+
+;; DATETIME: "2026-04-17 10:30:00" → "2026-04-17 10:30"
+(defn format-datetime [iso]
+  (if (null? iso) "-"
+    (let [s (str iso)]
+      (if (>= (length s) 16)
+        (substring s 0 16)
+        s))))
+
+;; 한국 전화번호: "01012345678" → "010-1234-5678"
+(defn format-phone [p]
+  (if (null? p) "-"
+    (let [s (str p)
+          digits-only (strip-nondigit s)
+          len (length digits-only)]
+      (cond
+        [(= len 11) (str (substring digits-only 0 3) "-"
+                         (substring digits-only 3 7) "-"
+                         (substring digits-only 7 11))]
+        [(= len 10) (str (substring digits-only 0 3) "-"
+                         (substring digits-only 3 6) "-"
+                         (substring digits-only 6 10))]
+        [true s]))))
+
+(defn strip-nondigit [s]
+  (let [cleaned (replace s "-" "")
+        c2 (replace cleaned " " "")
+        c3 (replace c2 "(" "")
+        c4 (replace c3 ")" "")]
+    c4))
+
+;; 상대 시간: "3초 전", "5분 전" 등 (now_unix 기반)
+(defn format-ago [unix-ts]
+  (if (null? unix-ts) "-"
+    (let [now (now_unix)
+          diff (- now unix-ts)]
+      (cond
+        [(< diff 60)   (str diff "초 전")]
+        [(< diff 3600) (str (/ diff 60) "분 전")]
+        [(< diff 86400) (str (/ diff 3600) "시간 전")]
+        [true (str (/ diff 86400) "일 전")]))))

package/stdlib/web/forms.fl

@@ -0,0 +1,94 @@
+;; stdlib/web/forms.fl — 폼 렌더링 + 클라이언트 검증 (v11)
+;; (load "stdlib/web/forms.fl")
+
+;; ── 단일 필드 렌더링 ──────────────────────────────────────────────
+;; field: {:name "email" :type "email" :label "이메일" :required true :placeholder "..."}
+(defn render-field [field]
+  (let [name        (get field "name")
+        ftype       (?? (get field "type") "text")
+        label       (?? (get field "label") name)
+        required    (?? (get field "required") false)
+        placeholder (?? (get field "placeholder") "")
+        req-attr    (if required " required" "")
+        ph-attr     (if (str-blank? placeholder)
+                      ""
+                      (str " placeholder=\"" placeholder "\""))]
+    (str "<div class='fl-field'>"
+         "<label for='fl-" name "'>" label "</label>"
+         "<input type='" ftype "' id='fl-" name "' name='" name "'" req-attr ph-attr " />"
+         "<span class='fl-field-error' id='fl-err-" name "'></span>"
+         "</div>")))
+
+;; ── 폼 HTML 생성 ─────────────────────────────────────────────────
+;; (render-form "login" "/api/login" [{:name "email" ...} {:name "pwd" ...}])
+(defn render-form [id action fields]
+  (let [fields-html (str-join (map render-field fields) "")]
+    (str "<form id='fl-form-" id "' action='" action "' method='post'"
+         " onsubmit='flFormSubmit(event,\"" id "\")'>"
+         "<div class='fl-form-fields'>" fields-html "</div>"
+         "<div class='fl-form-errors' id='fl-form-err-" id "'></div>"
+         "<button type='submit' class='fl-btn fl-btn-primary'>제출</button>"
+         "</form>")))
+
+;; (render-form-ex id action fields submit-text) — 제출 버튼 텍스트 지정
+(defn render-form-ex [id action fields submit-text]
+  (let [fields-html (str-join (map render-field fields) "")]
+    (str "<form id='fl-form-" id "' action='" action "' method='post'"
+         " onsubmit='flFormSubmit(event,\"" id "\")'>"
+         "<div class='fl-form-fields'>" fields-html "</div>"
+         "<div class='fl-form-errors' id='fl-form-err-" id "'></div>"
+         "<button type='submit' class='fl-btn fl-btn-primary'>" submit-text "</button>"
+         "</form>")))
+
+;; ── 폼 검증 JS 생성 ──────────────────────────────────────────────
+;; rules: {"email" {:required true :pattern ".*@.*" :patternMsg "이메일 형식 오류"}}
+(defn form-validation-js [id rules]
+  (str "<script>"
+       "window._flFormRules=window._flFormRules||{};"
+       "window._flFormRules['" id "']=" (json-stringify rules) ";"
+       "function flFormSubmit(e,formId){"
+         "e.preventDefault();"
+         "var form=document.getElementById('fl-form-'+formId);"
+         "var rules=window._flFormRules[formId]||{};"
+         "var data=Object.fromEntries(new FormData(form));"
+         "var errors={};"
+         "Object.entries(rules).forEach(function(entry){"
+           "var field=entry[0],rule=entry[1],val=data[field]||'';"
+           "if(rule.required&&!val)errors[field]=rule.requiredMsg||field+' 필수입니다';"
+           "if(rule.minLength&&val.length<rule.minLength)errors[field]=rule.minMsg||field+' 너무 짧습니다';"
+           "if(rule.pattern&&!new RegExp(rule.pattern).test(val))errors[field]=rule.patternMsg||field+' 형식 오류';"
+         "});"
+         "var hasErrors=Object.keys(errors).length>0;"
+         "Object.entries(errors).forEach(function(entry){"
+           "var el=document.getElementById('fl-err-'+entry[0]);"
+           "if(el)el.textContent=entry[1];"
+         "});"
+         "if(!hasErrors){"
+           "fetch(form.action,{method:'POST',"
+             "headers:{'Content-Type':'application/json'},"
+             "body:JSON.stringify(data)})"
+           ".then(function(r){return r.json();})"
+           ".then(function(res){"
+             "if(res.ok)window.location=res.redirect||'/';"
+             "else{var errEl=document.getElementById('fl-form-err-'+formId);"
+               "if(errEl)errEl.textContent=res.message||'오류 발생';}"
+           "})"
+           ".catch(function(err){"
+             "var errEl=document.getElementById('fl-form-err-'+formId);"
+             "if(errEl)errEl.textContent=err.message||'네트워크 오류';"
+           "});"
+         "}"
+       "}"
+       "</script>"))
+
+;; ── 폼 CSS ───────────────────────────────────────────────────────
+(defn form-css []
+  "<style>
+.fl-form-fields{display:flex;flex-direction:column;gap:var(--space-4);}
+.fl-field{display:flex;flex-direction:column;gap:var(--space-1);}
+.fl-field label{font-size:var(--font-sm);font-weight:500;color:var(--color-text);}
+.fl-field input,.fl-field select,.fl-field textarea{padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--font-base);background:var(--color-bg);color:var(--color-text);width:100%;}
+.fl-field input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px rgba(59,130,246,0.2);}
+.fl-field-error{font-size:var(--font-sm);color:var(--color-danger);min-height:1.2em;}
+.fl-form-errors{color:var(--color-danger);font-size:var(--font-sm);margin:var(--space-2) 0;}
+</style>")

package/stdlib/web/image.fl

@@ -0,0 +1,77 @@
+;; stdlib/web/image.fl — 이미지 최적화 헬퍼 (v11)
+;; (load "stdlib/web/image.fl")
+;;
+;; next/image 대체. srcset + lazy loading으로 Core Web Vitals 최적화.
+
+;; ── 내부 속성 이스케이프 ─────────────────────────────────────────
+(defn _img-esc [s] (if (nil? s) "" (str s)))
+
+;; ── 핵심: render-image ───────────────────────────────────────────
+;; (render-image "/img/hero.jpg" "Hero" {:width 1200 :height 630})
+;; → <img src="..." alt="..." width="..." height="..." loading="lazy" ...>
+(defn render-image [src alt opts]
+  (let [o       (?? opts {})
+        width   (?? (get o :width) (?? (get o "width") 0))
+        height  (?? (get o :height) (?? (get o "height") 0))
+        loading (?? (get o :loading) (?? (get o "loading") "lazy"))
+        decoding (?? (get o :decoding) (?? (get o "decoding") "async"))
+        class   (?? (get o :class) (?? (get o "class") ""))
+        srcset  (?? (get o :srcset) (?? (get o "srcset") ""))
+        w-attr  (if (> width 0) (str " width=\"" width "\"") "")
+        h-attr  (if (> height 0) (str " height=\"" height "\"") "")
+        c-attr  (if (str-blank? class) "" (str " class=\"" class "\""))
+        ss-attr (if (str-blank? srcset) "" (str " srcset=\"" srcset "\""))]
+    (str "<img src=\"" (_img-esc src) "\" alt=\"" (_img-esc alt) "\""
+         w-attr h-attr c-attr ss-attr
+         " loading=\"" loading "\" decoding=\"" decoding "\">")))
+
+;; ── 반응형 srcset 헬퍼 ───────────────────────────────────────────
+;; (srcset-for "/img/hero" [320 640 1024 1920]) → "/img/hero-320w.webp 320w, ..."
+;; (srcset-for "/img/hero" [320 640] {:ext "avif"})
+(defn srcset-for [base widths]
+  (str-join
+    (map (fn [w] (str base "-" w "w.webp " w "w")) widths)
+    ", "))
+
+(defn srcset-for-ext [base widths ext]
+  (str-join
+    (map (fn [w] (str base "-" w "w." ext " " w "w")) widths)
+    ", "))
+
+;; ── 반응형 <picture> 요소 ────────────────────────────────────────
+;; (render-picture "/img/hero" "Hero" [320 640 1024] {})
+(defn render-picture [base alt widths opts]
+  (let [o       (?? opts {})
+        width   (?? (get o :width) (?? (get o "width") 0))
+        height  (?? (get o :height) (?? (get o "height") 0))
+        class   (?? (get o :class) (?? (get o "class") ""))
+        sizes   (?? (get o :sizes) (?? (get o "sizes") "100vw"))
+        avif    (srcset-for-ext base widths "avif")
+        webp    (srcset-for-ext base widths "webp")
+        jpg-src (str base ".jpg")
+        w-attr  (if (> width 0) (str " width=\"" width "\"") "")
+        h-attr  (if (> height 0) (str " height=\"" height "\"") "")
+        c-attr  (if (str-blank? class) "" (str " class=\"" class "\""))]
+    (str "<picture>"
+         "<source type=\"image/avif\" srcset=\"" avif "\" sizes=\"" sizes "\">"
+         "<source type=\"image/webp\" srcset=\"" webp "\" sizes=\"" sizes "\">"
+         "<img src=\"" jpg-src "\" alt=\"" alt "\""
+         w-attr h-attr c-attr
+         " loading=\"lazy\" decoding=\"async\"></picture>")))
+
+;; ── CDN URL 빌더 ────────────────────────────────────────────────
+;; (cdn-url "/img/hero.jpg" {:width 800 :quality 80})
+(defn cdn-url [src opts]
+  (let [o       (?? opts {})
+        width   (?? (get o :width) (?? (get o "width") 0))
+        quality (?? (get o :quality) (?? (get o "quality") 80))
+        format  (?? (get o :format) (?? (get o "format") "auto"))
+        w-q     (if (> width 0) (str "&w=" width) "")]
+    (str src "?cdn=1" w-q "&q=" quality "&f=" format)))
+
+;; ── LCP 우선순위 이미지 ──────────────────────────────────────────
+;; (render-image-priority "/img/hero.jpg" "Hero" {:width 1200 :height 630})
+(defn render-image-priority [src alt opts]
+  (let [o      (?? opts {})
+        merged (obj-merge o {:loading "eager" :decoding "sync"})]
+    (render-image src alt merged)))