create-issflow 1.9.0 → 1.9.2

package/template/.issflow/skills/ui-ux-pro-max/scripts/reasoning_contract.py

@@ -0,0 +1,123 @@
+#!/usr/bin/env python3
+"""Closed, non-executable grammar for design-system decision rules."""
+
+import json
+import re
+
+CONDITION_SIGNALS = {
+    "if_booking": ("booking", "appointment", "calendar"),
+    "if_boutique": ("boutique",),
+    "if_casual": ("casual", "playful"),
+    "if_checkout": ("checkout", "payment", "purchase"),
+    "if_children": ("child", "children", "kids"),
+    "if_collaboration": ("collaboration", "multiplayer", "co-edit"),
+    "if_competitive": ("competitive", "leaderboard"),
+    "if_content_focused": ("content", "article", "reading", "documentation"),
+    "if_conversion_focused": ("conversion", "sales", "signup", "purchase"),
+    "if_creative_field": ("creative", "artist", "portfolio"),
+    "if_crop_focused": ("crop", "farm", "agriculture"),
+    "if_dashboard": ("dashboard", "operations", "monitoring"),
+    "if_data_heavy": ("data heavy", "data-heavy", "analytics", "large dataset"),
+    "if_delivery": ("delivery", "courier", "shipping"),
+    "if_discovery_focused": ("discover", "discovery", "browse", "directory"),
+    "if_engagement_metric": ("engagement", "retention", "contribution"),
+    "if_experience_focused": ("experience", "immersive", "journey"),
+    "if_gamification": ("gamification", "badges", "streak"),
+    "if_health": ("health", "medical", "patient"),
+    "if_hero_needed": ("hero", "showcase", "launch"),
+    "if_large_dataset": ("large dataset", "thousands", "millions"),
+    "if_light_mode_needed": ("light mode", "light theme"),
+    "if_low_performance": ("low performance", "low-end", "slow device"),
+    "if_luxury": ("luxury", "premium", "high-end"),
+    "if_medication": ("medication", "medicine", "prescription"),
+    "if_meditation": ("meditation", "breathing", "mindfulness"),
+    "if_minimal_portfolio": ("minimal portfolio", "simple portfolio"),
+    "if_mobile": ("mobile", "phone", "tablet", "ios", "android"),
+    "if_personalized": ("personalized", "personalised", "recommendation"),
+    "if_pre_launch": ("pre-launch", "prelaunch", "coming soon", "waitlist"),
+    "if_salary_focused": ("salary", "compensation", "pay range"),
+    "if_team_collaboration": ("team collaboration", "team workspace"),
+    "if_trust_needed": ("trust", "secure", "verified", "authority"),
+    "if_ux_focused": ("ux", "usability", "accessibility", "accessible"),
+    "if_video_ready": ("video ready", "product video", "demo video"),
+}
+
+ALLOWED_CONDITIONS = {"must_have", *CONDITION_SIGNALS}
+ACTION_PREFIXES = {"constraint", "style", "pattern", "mode"}
+TOKEN_ACTION_PREFIXES = {"constraint", "style"}
+TOKEN_RE = re.compile(r"^[a-z0-9]+(?:-[a-z0-9]+)*$")
+CONDITION_PATTERNS = {
+    condition: tuple(
+        re.compile(r"(?<!\w)" + re.escape(signal) + r"(?!\w)")
+        for signal in signals
+    )
+    for condition, signals in CONDITION_SIGNALS.items()
+}
+
+
+def _object_without_duplicates(pairs):
+    result = {}
+    for key, value in pairs:
+        if key in result:
+            raise ValueError("duplicate decision-rule key: {}".format(key))
+        result[key] = value
+    return result
+
+
+def parse_decision_rules(raw):
+    """Parse the canonical condition -> action-array representation."""
+    try:
+        rules = json.loads(raw or "{}", object_pairs_hook=_object_without_duplicates)
+    except json.JSONDecodeError as error:
+        raise ValueError("invalid decision-rule JSON: {}".format(error)) from error
+    if not isinstance(rules, dict):
+        raise ValueError("decision rules must be a JSON object")
+    for condition, actions in rules.items():
+        if condition not in ALLOWED_CONDITIONS:
+            raise ValueError("unknown decision-rule condition: {}".format(condition))
+        if not isinstance(actions, list) or not actions:
+            raise ValueError("{} must map to a non-empty action array".format(condition))
+        for action in actions:
+            _validate_action(action)
+        if len(actions) != len(set(actions)):
+            raise ValueError("{} contains duplicate actions".format(condition))
+    return rules
+
+
+def _validate_action(action):
+    if not isinstance(action, str) or ":" not in action:
+        raise ValueError("action must use a known prefix: {}".format(action))
+    prefix, value = action.split(":", 1)
+    if prefix not in ACTION_PREFIXES:
+        raise ValueError("unknown decision-rule action: {}".format(action))
+    if prefix in TOKEN_ACTION_PREFIXES and not TOKEN_RE.fullmatch(value):
+        raise ValueError("invalid {} action value: {}".format(prefix, value))
+    if prefix == "pattern" and not value.strip():
+        raise ValueError("pattern action must name a pattern")
+    if prefix == "mode" and value not in {"dark", "light"}:
+        raise ValueError("mode action must be dark or light")
+
+
+def apply_decision_rules(rules, query):
+    """Return deterministic mutations and an audit trail; never execute data."""
+    normalized = str(query or "").casefold()
+    result = {"activated": [], "style_ids": [], "constraints": [],
+              "pattern": None, "mode": None}
+    for condition, actions in rules.items():
+        active = condition == "must_have" or any(
+            pattern.search(normalized)
+            for pattern in CONDITION_PATTERNS.get(condition, ()))
+        if not active:
+            continue
+        result["activated"].append({"condition": condition, "actions": list(actions)})
+        for action in actions:
+            prefix, value = action.split(":", 1)
+            if prefix == "style" and value not in result["style_ids"]:
+                result["style_ids"].append(value)
+            elif prefix == "constraint" and value not in result["constraints"]:
+                result["constraints"].append(value)
+            elif prefix == "pattern":
+                result["pattern"] = value
+            elif prefix == "mode":
+                result["mode"] = value
+    return result

package/template/.issflow/skills/ui-ux-pro-max/scripts/search.py

@@ -0,0 +1,177 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""
+UI/UX Pro Max Search - BM25 search engine for UI/UX style guides
+Usage: python search.py "<query>" [--domain <domain>] [--stack <stack>] [--max-results 3]
+       python search.py "<query>" --design-system [-p "Project Name"]
+       python search.py "<query>" --design-system --persist [-p "Project Name"] --output-dir "<project-root>" [--page "dashboard"]
+       python search.py "<query>" --design-system --variance 8 --motion 9 --density 7
+
+Domains: style, color, chart, landing, product, ux, typography, google-fonts, icons, gsap, react, web
+Stacks: react, nextjs, vue, svelte, astro, swiftui, react-native, flutter, nuxtjs, nuxt-ui,
+        html-tailwind, shadcn, jetpack-compose, threejs, angular, laravel
+
+Design dials (1-10, only with --design-system):
+  --variance   DESIGN_VARIANCE: 1=centered/minimal, 10=bold/asymmetric
+  --motion     MOTION_INTENSITY: 1=subtle, 10=complex; attaches a GSAP snippet from motion.csv
+  --density    VISUAL_DENSITY: 1=spacious, 10=dense/dashboard; overrides the spacing scale
+
+Persistence (Master + Overrides pattern):
+  --persist      Save design system to design-system/<project-slug>/MASTER.md
+  --output-dir   Directory the design-system/ folder is created under (defaults to cwd --
+                 always pass this explicitly, pointed at the project root)
+  --page         Also create a page-specific override file in design-system/<project-slug>/pages/
+  --force        Overwrite an existing MASTER.md (without this, persistence is skipped
+                 if MASTER.md already exists, so prior design decisions aren't lost)
+"""
+
+import argparse
+import json as json_module
+import sys
+import io
+from core import CSV_CONFIG, AVAILABLE_STACKS, MAX_RESULTS, UNTRUNCATED_COLS, search, search_stack
+from design_system import generate_design_system
+
+# Force UTF-8 for stdout/stderr to handle emojis on Windows (cp1252 default)
+if sys.stdout.encoding and sys.stdout.encoding.lower() != 'utf-8':
+    sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')
+if sys.stderr.encoding and sys.stderr.encoding.lower() != 'utf-8':
+    sys.stderr = io.TextIOWrapper(sys.stderr.buffer, encoding='utf-8')
+
+TRUNCATE_AT = 300
+
+
+def format_output(result, full=False):
+    """Format results for Claude consumption (token-optimized)"""
+    if "error" in result:
+        return f"Error: {result['error']}"
+
+    output = []
+    if result.get("stack"):
+        output.append("## UI Pro Max Stack Guidelines")
+        output.append(f"**Stack:** {result['stack']} | **Query:** {result['query']}")
+    else:
+        output.append("## UI Pro Max Search Results")
+        domain_note = result['domain']
+        if result.get("auto_detected"):
+            domain_note += " (auto-detected"
+            if result.get("runner_up_domain"):
+                domain_note += f", runner-up: {result['runner_up_domain']}"
+            domain_note += ")"
+        output.append(f"**Domain:** {domain_note} | **Query:** {result['query']}")
+    output.append(f"**Source:** {result['file']} | **Found:** {result['count']} results\n")
+
+    if result['count'] == 0:
+        redirect = result.get("redirect")
+        if redirect:
+            output.append(
+                "This legacy style label is now modeled in the "
+                f"`{redirect['domain']}` domain as `{redirect['id']}`. "
+                "Search that domain instead of treating a page composition as a visual style."
+            )
+            return "\n".join(output)
+        output.append(
+            "No matches. This is not a match with an empty value -- the query "
+            "did not hit the database. Retry with broader/different keywords "
+            "before falling back to general defaults, and say explicitly that "
+            "no database match was found if you do fall back."
+        )
+        suggestions = result.get("suggestions") or []
+        if suggestions:
+            output.append(f"**Closest known terms:** {', '.join(suggestions)}")
+        return "\n".join(output)
+
+    for i, row in enumerate(result['results'], 1):
+        output.append(f"### Result {i}")
+        for key, value in row.items():
+            value_str = str(value)
+            if not full and key not in UNTRUNCATED_COLS and len(value_str) > TRUNCATE_AT:
+                value_str = value_str[:TRUNCATE_AT] + "..."
+            output.append(f"- **{key}:** {value_str}")
+        output.append("")
+
+    return "\n".join(output)
+
+
+if __name__ == "__main__":
+    parser = argparse.ArgumentParser(description="UI Pro Max Search")
+    parser.add_argument("query", help="Search query")
+    parser.add_argument("--domain", "-d", choices=list(CSV_CONFIG.keys()), help="Search domain")
+    parser.add_argument("--stack", "-s", choices=AVAILABLE_STACKS, help=f"Stack-specific search. Available: {', '.join(AVAILABLE_STACKS)}")
+    parser.add_argument("--max-results", "-n", type=int, choices=range(1, 21), default=MAX_RESULTS,
+                        metavar="1-20", help="Max results (default: 3)")
+    parser.add_argument("--json", action="store_true", help="Output as JSON")
+    parser.add_argument("--full", action="store_true", help="Do not truncate long field values in text output")
+    # Design system generation
+    parser.add_argument("--design-system", "-ds", action="store_true", help="Generate complete design system recommendation")
+    parser.add_argument("--project-name", "-p", type=str, default=None, help="Project name for design system output")
+    parser.add_argument("--format", "-f", choices=["ascii", "markdown"], default="ascii", help="Output format for design system (ignored if --json)")
+    # Persistence (Master + Overrides pattern)
+    parser.add_argument("--persist", action="store_true", help="Save design system to design-system/<project-slug>/MASTER.md (creates hierarchical structure)")
+    parser.add_argument("--page", type=str, default=None, help="Create page-specific override file in design-system/<project-slug>/pages/")
+    parser.add_argument("--output-dir", "-o", type=str, default=None, help="Output directory for persisted files (default: current directory -- pass this explicitly, pointed at the project root)")
+    parser.add_argument("--force", action="store_true", help="Overwrite an existing MASTER.md when persisting (default: skip if it already exists)")
+    # Design dials (1-10), only applied with --design-system
+    parser.add_argument("--variance", type=int, choices=range(1, 11), metavar="1-10", help="DESIGN_VARIANCE dial: 1=centered/minimal, 10=bold/asymmetric (only with --design-system)")
+    parser.add_argument("--motion", type=int, choices=range(1, 11), metavar="1-10", help="MOTION_INTENSITY dial: 1=subtle, 10=complex; pulls a matching GSAP snippet from motion.csv (only with --design-system)")
+    parser.add_argument("--density", type=int, choices=range(1, 11), metavar="1-10", help="VISUAL_DENSITY dial: 1=spacious, 10=dense/dashboard; overrides the spacing scale (only with --design-system)")
+
+    args = parser.parse_args()
+
+    # Design system takes priority
+    if args.design_system:
+        if args.stack:
+            print(
+                f"note: --stack {args.stack} is ignored in --design-system mode; "
+                "run a separate --stack query for stack-specific guidelines",
+                file=sys.stderr,
+            )
+        result = generate_design_system(
+            args.query,
+            args.project_name,
+            args.format,
+            persist=args.persist,
+            page=args.page,
+            output_dir=args.output_dir,
+            variance=args.variance,
+            motion=args.motion,
+            density=args.density,
+            force=args.force,
+        )
+
+        if args.json:
+            print(json_module.dumps(
+                {"design_system": result["design_system"], "persistence": result["persistence"]},
+                indent=2, ensure_ascii=False,
+            ))
+        else:
+            print(result["text"])
+
+            if args.persist:
+                persistence = result["persistence"] or {}
+                print("\n" + "=" * 60)
+                if persistence.get("status") == "skipped_exists":
+                    print(f"⚠️  {persistence.get('message', 'MASTER.md already exists; not overwritten.')}")
+                else:
+                    ds_dir = persistence.get("design_system_dir", "design-system/<project>")
+                    print(f"✅ Design system persisted to {ds_dir}/")
+                    for f in persistence.get("created_files", []):
+                        print(f"   📄 {f}")
+                    print("")
+                    print(f"📖 Usage: When building a page, check {ds_dir}/pages/[page].md first.")
+                    print("   If it exists, its rules override MASTER.md. Otherwise, use MASTER.md.")
+                print("=" * 60)
+    # Stack search
+    elif args.stack:
+        result = search_stack(args.query, args.stack, args.max_results)
+        if args.json:
+            print(json_module.dumps(result, indent=2, ensure_ascii=False))
+        else:
+            print(format_output(result, full=args.full))
+    # Domain search
+    else:
+        result = search(args.query, args.domain, args.max_results)
+        if args.json:
+            print(json_module.dumps(result, indent=2, ensure_ascii=False))
+        else:
+            print(format_output(result, full=args.full))

package/template/.issflow/skills/ux-design/SKILL.md

@@ -29,6 +29,9 @@ confirmed with the user before building — design is where human taste matters.
 
 - **Authoring the UX pack** (`/design` → `docs/UX-PACK.md`) after proposal sign-off
   and before `/phase` (hard rule 15) — produce the frame the build must stay inside.
+  Visual direction (style, palette, type) comes from `ui-ux-pro-max` first; this
+  skill still owns the wireframe + cookbook. Do not skip the cookbook because a
+  catalogue picked a look.
 - Building a screen / page / component.
 - Reviewing a UI diff (the "ตรวจ" pass).
 - CLOSE gate of any frontend phase — the cookbook check MUST pass.

package/template/.issflow/templates/UX-PACK-template.md

@@ -22,6 +22,7 @@ must stay inside. Wireframe baseline first; visual direction confirmed here.
 ## Frame & tokens
 - Wireframe baseline: (link or summary)
 - Brand / tokens: (or “follow OVERVIEW UX direction”)
+- UI UX Pro Max: style · palette · type · anti-patterns
 - Breakpoints: XS · SM · MD · LG · XL
 
 ## States & a11y notes

package/template/.issflow/templates/proposal.html

@@ -1,12 +1,51 @@
 <!doctype html>
 <!--
-  Client-facing proposal — ONE A4 PAGE (rendered by /propose from docs/PROPOSAL.md).
-  HOW TO USE (agent): copy to docs/proposal.html, replace every {{PLACEHOLDER}}, and
-  keep it to a SINGLE A4 page — be terse (≈3–6 phases, ≈4 assumptions). Localise the
-  CONTENT to the project language; the section labels are bilingual (TH / EN) already.
-  WHITE-LABEL: fill {{COMPANY}} / {{LOGO}} with the ISSUING company's brand (not the
-  kit's). {{LOGO}} optional: an <img src="…">, an SVG, or delete to keep the monogram.
-  Print: Ctrl/Cmd-P → A4 → "Save as PDF" (fits one page).
+  Client-facing proposal (rendered by /propose from docs/PROPOSAL.md).
+
+  PAGE 1 = the only signable A4 sheet (packages 3–6 rows, short scope). Trim
+  sign-page copy before it overflows. Screen sheets after the first page-break
+  may grow extra A4 pages.
+
+  HOW TO USE (agent): copy to docs/proposal.html, replace every {{PLACEHOLDER}}.
+  Localise CONTENT to the project language; section labels are bilingual (TH / EN).
+  WHITE-LABEL: fill {{COMPANY}} / {{LOGO}} with the ISSUING company's brand (not
+  the kit's). {{LOGO}} optional: an <img src="…">, an SVG, or delete the monogram.
+  {{BANK_COL}}: omit unless the human gave bank details (no kit default).
+  {{PACKAGE_TABLE}}: default head = ชุดงาน / Packages + Cost; if hours columns
+  were requested = ประเมิน / คิดเงิน / ยอด. Never leave sample amounts in the file.
+  {{SCREEN_SHEETS}}: one .sheet.screens per appendix page; cover every in-scope
+  module from PLAN + OVERVIEW; numbered captions; no emoji icons; not pixel-binding.
+  {{PAGE_FOOTER}}: real page count (sign page 1 of N).
+  Print: Ctrl/Cmd-P → A4 → "Save as PDF".
+
+  Example screen frame (fill {{SCREEN_SHEETS}}; placeholders only — no domain copy):
+  <div class="sheet screens">
+    <div class="head">… {{COMPANY}} · ตัวอย่างจอ — ไม่ผูกพิกเซล / Screens — not pixel-binding</div>
+    <div class="modbar"><span class="here">{{MODULE}}</span></div>
+    <p class="note">{{SCREEN_NOTE}}</p>
+    <div class="figs">
+      <figure>
+        <div class="desk">
+          <div class="top"><span class="mark">{{MARK}}</span><span class="brand">{{APP_NAME}}</span></div>
+          <div class="body">
+            <div class="nav"><span class="on">{{NAV_ON}}</span></div>
+            <div class="main">
+              <div class="kpis"><div class="card">{{CARD}}</div></div>
+              <table class="ui">{{UI_ROWS}}</table>
+            </div>
+          </div>
+        </div>
+        <figcaption><b>{{FRAME_N}}. {{FRAME_TITLE}}</b> — {{FRAME_CAPTION}}</figcaption>
+      </figure>
+      <figure>
+        <div class="phone">
+          <div class="top"><span class="mark">{{MARK}}</span><span class="brand">{{APP_NAME}}</span></div>
+          <div class="screen">{{PHONE_BODY}}</div>
+        </div>
+        <figcaption><b>{{FRAME_N}}. {{FRAME_TITLE}}</b> — {{FRAME_CAPTION}}</figcaption>
+      </figure>
+    </div>
+  </div>
 -->
 <html lang="{{LANG}}">
 <head>
@@ -16,23 +55,21 @@
   @page { size: A4; margin: 0 }
   :root{
     --ink:#162033; --muted:#5d6a7d; --line:#dbe3ee; --soft:#f6f8fb;
-    --violet:#635bff; --green:#15803d;
+    --violet:#635bff; --green:#15803d; --bad:#b42318;
     --sans:"Inter","Noto Sans Thai",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
     --mono:ui-monospace,Menlo,Consolas,monospace;
   }
   *{box-sizing:border-box}
-  body{margin:0;background:#e9edf3;color:var(--ink);font-family:var(--sans);font-size:10.5px;line-height:1.45}
-  .sheet{width:210mm;min-height:297mm;margin:10mm auto;background:#fff;padding:15mm 16mm;display:flex;flex-direction:column;gap:11px}
-  .lbl{color:var(--muted);font-size:8.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin:0 0 3px}
+  body{margin:0;background:#e9edf3;color:var(--ink);font-family:var(--sans);font-size:10.5px;line-height:1.4}
+  .sheet{width:210mm;min-height:297mm;margin:10mm auto;background:#fff;padding:13mm 15mm;display:flex;flex-direction:column;gap:8px}
+  .lbl{color:var(--muted);font-size:8px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin:0 0 3px}
   .lbl em{font-style:normal;opacity:.6;font-weight:600}
-  h1{font-size:21px;margin:0;letter-spacing:-.3px;line-height:1.1}
-  .muted{color:var(--muted)} ul{margin:0;padding-left:15px} li{margin:1.5px 0}
-  hr{border:none;border-top:1px solid var(--line);margin:0}
+  h1{font-size:19px;margin:0;letter-spacing:-.3px;line-height:1.15}
+  .muted{color:var(--muted)} ul{margin:0;padding-left:15px} li{margin:1px 0}
 
-  /* header */
-  .head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid var(--ink);padding-bottom:11px}
+  .head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid var(--ink);padding-bottom:9px}
   .co{display:flex;align-items:center;gap:10px}
-  .logo{width:42px;height:42px;border-radius:9px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:0 0 auto;overflow:hidden}
+  .logo{width:40px;height:40px;border-radius:9px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:0 0 auto;overflow:hidden}
   .logo img{width:100%;height:100%;object-fit:contain}
   .co .name{font-weight:800;font-size:15px;line-height:1.15}
   .co .tag{color:var(--muted);font-size:9px}
@@ -40,19 +77,69 @@
   .head .meta .big{font:800 12px/1.2 var(--sans);letter-spacing:.12em;color:var(--violet)}
   .pill{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:2px 8px;font:800 8px/1 var(--mono);color:var(--muted);margin-top:4px}
 
-  .cols{display:flex;gap:18px} .cols>div{flex:1;min-width:0}
-  table{width:100%;border-collapse:collapse;font-size:10px}
-  th,td{text-align:left;padding:5px 7px;border-bottom:1px solid var(--line)}
-  th{background:var(--soft);font-size:8px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
-  td.n,th.n{text-align:right;font-family:var(--mono)}
-  tfoot td{font-weight:800;border-top:1.5px solid var(--ink);border-bottom:none}
-  .total{display:flex;align-items:baseline;justify-content:space-between;background:var(--soft);border-radius:9px;padding:9px 13px}
-  .total .amt{font-size:19px;font-weight:800} .total .amt small{font-size:9px;color:var(--muted);font-weight:600}
-
-  .sign{display:flex;gap:34px;margin-top:auto;padding-top:14px}
-  .sign>div{flex:1} .line{border-bottom:1px solid var(--ink);height:30px} .sign .lbl{margin-top:5px}
-  footer{border-top:1px solid var(--line);padding-top:8px;color:var(--muted);font-size:8.5px;display:flex;justify-content:space-between}
-  @media print{ body{background:#fff} .sheet{margin:0;min-height:auto;box-shadow:none} }
+  .cols{display:flex;gap:16px} .cols>div{flex:1;min-width:0}
+  table.quote{width:100%;border-collapse:collapse;font-size:10px}
+  .quote th,.quote td{text-align:left;padding:4px 6px;border-bottom:1px solid var(--line)}
+  .quote th{background:var(--soft);font-size:8px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
+  .quote td.n,.quote th.n{text-align:right;font-family:var(--mono)}
+  .quote tfoot td{font-weight:800;border-top:1.5px solid var(--ink);border-bottom:none}
+  .total{display:flex;align-items:flex-end;justify-content:space-between;background:var(--soft);border-radius:9px;padding:8px 12px;gap:12px}
+  .total .amt{font-size:18px;font-weight:800;text-align:right}
+  .total .amt small{display:block;font-size:9px;color:var(--muted);font-weight:600}
+
+  .sign{display:flex;gap:34px;margin-top:auto;padding-top:10px}
+  .sign>div{flex:1} .line{border-bottom:1px solid var(--ink);height:26px} .sign .lbl{margin-top:4px}
+  footer{border-top:1px solid var(--line);padding-top:7px;color:var(--muted);font-size:8px;display:flex;justify-content:space-between}
+
+  /* screen appendix — empty chrome; fill from PLAN + OVERVIEW */
+  .sheet.screens{padding:10mm 12mm;gap:6px}
+  .screens .head{padding-bottom:6px}
+  .screens .note{font-size:9px;margin:0;color:var(--muted)}
+  .modbar{display:flex;flex-wrap:wrap;gap:4px}
+  .modbar span{border:1px solid var(--line);border-radius:999px;padding:2px 7px;font-size:8px;font-weight:700;color:var(--muted)}
+  .modbar .here{background:#ecebff;border-color:#d4d1ff;color:var(--violet)}
+  .figs{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;flex:1}
+  figure{margin:0;display:flex;flex-direction:column;min-width:0}
+  figcaption{margin-top:3px;font-size:8px;color:var(--muted);line-height:1.35}
+  figcaption b{color:var(--ink);font-weight:700}
+  .desk,.phone{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;flex:1;min-height:0}
+  .top{display:flex;align-items:center;gap:6px;padding:5px 8px;border-bottom:1px solid var(--line);background:var(--soft)}
+  .mark{width:16px;height:16px;border-radius:4px;background:var(--violet);color:#fff;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center}
+  .brand{font-weight:800;font-size:10px;color:var(--violet)}
+  .sub{font-size:8px;color:var(--muted)}
+  .body{display:flex;min-height:148px}
+  .nav{width:64px;border-right:1px solid var(--line);padding:5px;font-size:8px}
+  .nav span{display:block;padding:2px 4px;border-radius:4px;margin-bottom:1px;color:#334155}
+  .nav .on{background:#ecebff;color:var(--violet);font-weight:700}
+  .nav .tail{margin-top:6px;padding-top:4px;border-top:1px solid var(--line)}
+  .main{flex:1;padding:6px;min-width:0}
+  .kpis{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px}
+  .kpis.two{grid-template-columns:1fr 1fr}
+  .card{border:1px solid var(--line);border-radius:6px;padding:4px 5px;font-size:8px;background:#fff}
+  .card .n{font-size:12px;font-weight:800}
+  .red{border-color:#f0c4c0;background:#fff7f6}
+  .red .n{color:var(--bad)}
+  .ok{border-color:#b7d4c2;background:#f4faf6}
+  .ok .n{color:var(--green)}
+  .warn{border-color:#ead8a4;background:#fffbeb}
+  .ui{width:100%;border-collapse:collapse;font-size:8px;margin-top:4px}
+  .ui th,.ui td{text-align:left;padding:2px 3px;border-bottom:1px solid var(--line)}
+  .ui th{color:var(--muted);font-weight:600}
+  .btn{display:inline-block;background:var(--violet);color:#fff;border-radius:4px;padding:3px 7px;font-size:8px;font-weight:700;margin-top:5px}
+  .btn.ghost{background:#fff;color:var(--violet);border:1px solid var(--violet)}
+  .field{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dashed var(--line);padding:3px 0;font-size:8px}
+  .crumbs{font-size:8px;color:var(--muted);margin-bottom:3px}
+  .login{padding:12px;min-height:148px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px}
+  .login h3{margin:0;font-size:12px}
+  .phone{max-width:168px;margin:0 auto;width:100%}
+  .screen{padding:7px}
+  .tiny{font-size:7px;color:var(--muted)}
+
+  @media print{
+    body{background:#fff}
+    .sheet{margin:0;min-height:297mm;page-break-after:always;box-shadow:none}
+    .sheet:last-child{page-break-after:auto}
+  }
 </style>
 </head>
 <body>
@@ -81,12 +168,8 @@
   </div>
 
   <div>
-    <p class="lbl">เฟส &amp; ค่าใช้จ่าย <em>Phases &amp; cost</em></p>
-    <table>
-      <thead><tr><th>เฟส <em style="font-style:normal;opacity:.5">Phase</em></th><th>Complexity</th><th class="n">Effort</th><th class="n">Cost</th></tr></thead>
-      <tbody>{{PHASE_ROWS}}<!-- <tr><td>1. Auth</td><td>M</td><td class="n">2–3d</td><td class="n">฿16k–24k</td></tr> --></tbody>
-      <tfoot><tr><td colspan="2">รวม <em style="font-style:normal;opacity:.5">Total</em></td><td class="n">{{TOTAL_EFFORT}}</td><td class="n">{{TOTAL_COST}}</td></tr></tfoot>
-    </table>
+    <p class="lbl">ชุดงาน &amp; ค่าใช้จ่าย <em>Packages &amp; cost</em></p>
+    <table class="quote">{{PACKAGE_TABLE}}</table>
   </div>
 
   <div class="total">
@@ -100,14 +183,22 @@
     <div><p class="lbl">ข้อยกเว้น <em>Exclusions</em></p><ul>{{EXCLUSION_ITEMS}}</ul></div>
   </div>
 
-  <div><p class="lbl">เงื่อนไขการชำระเงิน <em>Payment</em></p><p class="muted" style="margin:0">{{PAYMENT_ITEMS}}</p></div>
+  <div class="cols">
+    <div>
+      <p class="lbl">เงื่อนไขการชำระเงิน <em>Payment</em></p>
+      <ul>{{PAYMENT_ITEMS}}</ul>
+    </div>
+    {{BANK_COL}}
+  </div>
 
   <div class="sign">
     <div><div class="line"></div><p class="lbl">ลงนามลูกค้า <em>Client sign-off</em></p></div>
     <div><div class="line"></div><p class="lbl">วันที่ <em>Date</em></p></div>
   </div>
 
-  <footer><span>{{COMPANY}} · {{FOOTER}}</span><span>{{VERSION}}</span></footer>
+  <footer><span>{{COMPANY}} · {{PAGE_FOOTER}}</span><span>{{VERSION}}</span></footer>
 </div>
+
+{{SCREEN_SHEETS}}
 </body>
 </html>