Compare commits
2
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Kyeongmin
|
26319f6bd9 | ||
|
Kyeongmin
|
edfc3f29df |
@@ -1,496 +0,0 @@
|
||||
{
|
||||
"permissions": {
|
||||
"allow": [
|
||||
"Bash(cmd /c \"npx -y figma-developer-mcp --help\")",
|
||||
"Bash(npx -y figma-developer-mcp --version)",
|
||||
"mcp__Framelink_Figma_MCP__get_figma_data",
|
||||
"mcp__Framelink_Figma_MCP__download_figma_images",
|
||||
"Bash(start \"\" \"d:/ad-hoc/kei/design_agent/figma_to_html_agent/block-tests/prerequisites-3col.html\")",
|
||||
"Bash(python -c \"from selenium import webdriver; print\\('selenium OK'\\)\")",
|
||||
"Bash(python -c ':*)",
|
||||
"Bash(python)",
|
||||
"Bash(start \"\" \"d:/ad-hoc/kei/design_agent/figma_to_html_agent/block-tests/bim-goal-circles.html\")",
|
||||
"Bash(start \"\" \"d:/ad-hoc/kei/design_agent/figma_to_html_agent/block-tests/bg-shapes-only.html\")",
|
||||
"Bash(start \"\" \"d:/ad-hoc/kei/design_agent/figma_to_html_agent/block-tests/bim-figma-devmode.html\")",
|
||||
"Bash(claude mcp:*)",
|
||||
"Bash(curl -sS -o /dev/null -w \"mcp endpoint: HTTP %{http_code}\\\\n\" http://127.0.0.1:3845/mcp)",
|
||||
"Bash(curl -sS -o /dev/null -w \"sse endpoint: HTTP %{http_code}\\\\n\" http://127.0.0.1:3845/sse)",
|
||||
"Bash(curl -sS -o /dev/null -w \"root: HTTP %{http_code}\\\\n\" http://127.0.0.1:3845/)",
|
||||
"Bash(curl -s -o NUL -w \"%{http_code}\" http://127.0.0.1:3845/mcp)",
|
||||
"Bash(curl -s -o /dev/null -w \"%{http_code}\" http://127.0.0.1:3845/sse --max-time 3)",
|
||||
"Bash(curl -s -o /dev/null -w \"%{http_code}\" http://127.0.0.1:3845/mcp --max-time 3)",
|
||||
"Bash(curl -s -X POST http://127.0.0.1:3845/mcp -H \"Content-Type: application/json\" -H \"Accept: application/json, text/event-stream\" -d '{\"jsonrpc\":\"2.0\",\"id\":1,\"method\":\"initialize\",\"params\":{\"protocolVersion\":\"2024-11-05\",\"capabilities\":{},\"clientInfo\":{\"name\":\"test\",\"version\":\"1.0\"}}}' --max-time 5)",
|
||||
"Bash(curl -v http://127.0.0.1:3845/mcp)",
|
||||
"Bash(curl -s -m 3 http://127.0.0.1:3845/sse)",
|
||||
"Bash(curl -s -m 3 -o /dev/null -w \"%{http_code}\\\\n\" http://127.0.0.1:3845/sse)",
|
||||
"mcp__figma-desktop__get_metadata",
|
||||
"mcp__figma-desktop__get_screenshot",
|
||||
"mcp__figma-desktop__get_design_context",
|
||||
"Bash(curl -sSo bg_texture.png \"http://localhost:3845/assets/849658071be46a26936e8666e3722b2dd548aee7.png\")",
|
||||
"Bash(curl -sSo arc_top.png \"http://localhost:3845/assets/f05ebf15a1125b6c5809f9ffa35b4e4e750687d3.png\")",
|
||||
"Bash(curl -sSo arc_side.png \"http://localhost:3845/assets/2f0f17507c681b7bc2fb109f3d4fafb9ff2f7ce0.png\")",
|
||||
"Bash(curl -sSo big_fill_productivity.svg \"http://localhost:3845/assets/21a89b8138bd47debcc6f12bb140ee63bbd9fdf2.svg\")",
|
||||
"Bash(curl -sSo big_ring_productivity.svg \"http://localhost:3845/assets/fbe84134d2e14bbf84b2c42516e9b85ffe6f7c1e.svg\")",
|
||||
"Bash(curl -sSo big_fill_safety.svg \"http://localhost:3845/assets/1f24875931dc3c36e2c841eaf5b94466fa035a48.svg\")",
|
||||
"Bash(curl -sSo big_ring_safety.svg \"http://localhost:3845/assets/c5aeccdfc884051848fc60f04abf2a9d367dd731.svg\")",
|
||||
"Bash(curl -sSo big_fill_trust.svg \"http://localhost:3845/assets/67ef527c29921d401d31032c02d6b3a0ae1d3050.svg\")",
|
||||
"Bash(curl -sSo acc_outer_speed.svg \"http://localhost:3845/assets/1391787caa4cb8241a1adadbb2c70aed3625e1b8.svg\")",
|
||||
"Bash(curl -sSo acc_inner_speed.svg \"http://localhost:3845/assets/eeb8e9bf8b1841215ae0253017512a7e4a6d5a95.svg\")",
|
||||
"Bash(curl -sSo acc_inner_profit.svg \"http://localhost:3845/assets/4885055cba20f72e83401be371fe74b9b43ec869.svg\")",
|
||||
"Bash(curl -sSo acc_outer_safety.svg \"http://localhost:3845/assets/688b5af1d813b16cd6410453e3d4d1f79c084222.svg\")",
|
||||
"Bash(curl -sSo acc_inner_safety.svg \"http://localhost:3845/assets/2fab268821fc763dbdff12e1dd65820dfa9b628e.svg\")",
|
||||
"Bash(ls block-tests/*.html block-tests/*.md)",
|
||||
"Bash(python scripts/gradient_math.py --test)",
|
||||
"Bash(python scripts/gradient_math.py --w 350 --h 350 --x1 110.833 --y1 18.2292 --x2 219.479 --y2 175 --stops \"0:#FDC69E,1:#E0782C\")",
|
||||
"Bash(python -c \"from scripts.gradient_math import svg_to_css; print\\(svg_to_css\\(W=350,H=350,x1=110.833,y1=18.2292,x2=219.479,y2=175,stops=[\\(0,'#FDC69E'\\),\\(1,'#E0782C'\\)]\\)\\)\")",
|
||||
"Bash(python render.py cards-3col-persona example)",
|
||||
"Bash(python render.py cards-3col-persona example-no-photos)",
|
||||
"Bash(python render.py cycle-3way-intersect example)",
|
||||
"WebFetch(domain:claude.com)",
|
||||
"WebFetch(domain:help.figma.com)",
|
||||
"Bash(curl -sSo \"527bd7809f4b2e5f3cd42f2e713ccbfb37537d82.png\" \"http://localhost:3845/assets/527bd7809f4b2e5f3cd42f2e713ccbfb37537d82.png\")",
|
||||
"Bash(ls \"d:/ad-hoc/kei/design_agent/figma_to_html_agent/block-tests/_renders/pill_flex_\"*)",
|
||||
"Bash(awk '/visual_diff:/{found=1} found && /^- id:/{print NR\": \"$0; found=0}' \"d:/ad-hoc/kei/design_agent/templates/catalog.yaml\")",
|
||||
"Bash(curl -s -o \"bg_slide_texture.png\" \"http://localhost:3845/assets/16a1b2ea5b64663a3ee44bfad24671a612952c29.png\")",
|
||||
"Bash(curl -s -o \"line_divider.svg\" \"http://localhost:3845/assets/01731a60f7d9d35816932c019149e301a3aae1a7.svg\")",
|
||||
"Bash(head -20 /d/ad-hoc/kei/design_agent/samples/mdx/01*.mdx)",
|
||||
"Bash(head -20 /d/ad-hoc/kei/design_agent/samples/mdx/02*.mdx)",
|
||||
"Bash(head -20 /d/ad-hoc/kei/design_agent/samples/mdx/03*.mdx)",
|
||||
"Bash(ls -la /d/ad-hoc/kei/design_agent/data/runs/20260413_*/)",
|
||||
"Bash(python -c \"from src.config import settings; print\\(f'API configured: {bool\\(settings.anthropic_api_key\\)}'\\)\")",
|
||||
"Bash(python run_test.py)",
|
||||
"Bash(curl -s -o /dev/null -w \"%{http_code}\" http://localhost:8000/health)",
|
||||
"Bash(curl -s -o /dev/null -w \"%{http_code}\" http://localhost:8000/)",
|
||||
"Read(//d/ad-hoc/kei/**)",
|
||||
"Bash(curl -s http://localhost:8000/docs)",
|
||||
"Bash(taskkill //F //IM python.exe)",
|
||||
"Bash(python assemble_mdx02_test.py)",
|
||||
"Bash(wc -c data/runs/20260407_*/final.html)",
|
||||
"Bash(curl -s -o /dev/null -w \"%{http_code}\" http://localhost:8000/docs)",
|
||||
"Bash(curl -s http://localhost:8080/docs -o /dev/null -w \"%{http_code}\")",
|
||||
"Bash(curl -s http://localhost:8001/docs -o /dev/null -w \"%{http_code}\")",
|
||||
"Bash(curl -s http://localhost:3000/ -o /dev/null -w \"%{http_code}\")",
|
||||
"Bash(python assemble_mdx02_v3.py)",
|
||||
"Bash(python assemble_mdx02_v4.py)",
|
||||
"Bash(python assemble_mdx02_v5.py)",
|
||||
"Bash(python assemble_mdx02_v6.py)",
|
||||
"Bash(python assemble_mdx02_v7.py)",
|
||||
"Bash(python assemble_mdx02_v8_3plans.py)",
|
||||
"Bash(python assemble_mdx02_v9.py)",
|
||||
"Bash(python build_plan1.py)",
|
||||
"Bash(python build_plan2.py)",
|
||||
"Bash(python build_plan3.py)",
|
||||
"Bash(python build_plan1_v2.py)",
|
||||
"Bash(python build_4plans_final.py)",
|
||||
"Bash(curl -s -o /dev/null -w \"%{http_code}\" http://127.0.0.1:8000/docs)",
|
||||
"Bash(uvicorn backend.main:app --port 8000)",
|
||||
"Bash(python final_plan1.py)",
|
||||
"Bash(python final_plan2.py)",
|
||||
"Bash(python build_all_4plans.py)",
|
||||
"Bash(python build_plan3_kei.py)",
|
||||
"Bash(python build_plan4_kei.py)",
|
||||
"Bash(python make_4plans.py)",
|
||||
"Bash(ls -la \"d:/ad-hoc/kei/design_agent/figma_to_html_agent/block-tests/html_render_final\"*)",
|
||||
"Bash(taskkill //PID 48540 //F)",
|
||||
"Bash(python make_mdx03.py)",
|
||||
"Bash(python run_mdx03_pipeline.py)",
|
||||
"Bash(powershell -Command \"Get-Process python -ErrorAction SilentlyContinue | Select-Object Id,StartTime\")",
|
||||
"Bash(grep \"class FontHierarchy\" src/*.py)",
|
||||
"Bash(ls -ltr /d/ad-hoc/kei/design_agent/data/runs/*/step_*_context.json)",
|
||||
"Bash(awk '{print $2}')",
|
||||
"Bash(stat /d/ad-hoc/kei/design_agent/data/runs/20260414_120225/stage_*_context.json)",
|
||||
"Bash(ls -la /d/ad-hoc/kei/design_agent/data/runs/20260414_120225/stage_*_context.json)",
|
||||
"Bash(awk '{print $6, $7, $8, $9}')",
|
||||
"Bash(ls -lt data/runs/20260414_120225/*_context.json)",
|
||||
"Bash(awk '{print $6,$7,$8,$9}')",
|
||||
"Bash(python -c \" import yaml with open\\('catalog.yaml'\\) as f: data = yaml.safe_load\\(f\\) blocks = data.get\\('blocks', []\\) for b in blocks: print\\(f\\\\\"{b['id']} | {b.get\\('category',''\\)} | items:{b.get\\('min_items','?'\\)}-{b.get\\('max_items','?'\\)}\\\\\"\\) \")",
|
||||
"Bash(python add_tags.py)",
|
||||
"Bash(python -c \"import src.block_reference; print\\('OK'\\)\")",
|
||||
"Bash(python -c \"import src.block_assembler; print\\('OK'\\)\")",
|
||||
"Bash(ls -t d:/ad-hoc/kei/design_agent/docs/history/PHASE-*.md d:/ad-hoc/kei/design_agent/docs/history/IMPROVEMENT-PHASE-*.md)",
|
||||
"Bash(python -c \"import src.pipeline_context; import src.kei_client; import src.pipeline; print\\('모든 import OK'\\)\")",
|
||||
"Bash(python -c \"import src.step_visualizer; import src.pipeline; print\\('OK'\\)\")",
|
||||
"Bash(python -c \"import src.pipeline; print\\('OK'\\)\")",
|
||||
"Bash(python -c \"import src.pipeline; import src.block_assembler; print\\('OK'\\)\")",
|
||||
"Bash(python -c \"import src.block_assembler; import src.pipeline; print\\('OK'\\)\")",
|
||||
"Bash(python -c \"import src.kei_client; print\\('OK'\\)\")",
|
||||
"Bash(python -c \"import src.pipeline; import src.block_assembler; import src.pipeline_context; print\\('OK'\\)\")",
|
||||
"Bash(python -c \"import src.pipeline; import src.validators; print\\('OK'\\)\")",
|
||||
"Bash(python -c \"import src.validators; print\\('OK'\\)\")",
|
||||
"Bash(python -c \"import src.validators; import src.pipeline; print\\('OK'\\)\")",
|
||||
"Bash(python -c \"import src.pipeline; import src.section_parser; import src.block_assembler; print\\('OK'\\)\")",
|
||||
"Bash(python -c \"import src.pipeline; import src.block_assembler; import src.section_parser; print\\('OK'\\)\")",
|
||||
"Bash(python -c \"import src.pipeline; import src.block_assembler; import src.space_allocator; import src.pipeline_context; print\\('OK'\\)\")",
|
||||
"Bash(grep -l \"pp2-grid-wrap\\\\|pp2\" templates/blocks/**/*.html)",
|
||||
"Bash(echo file:///D:/ad-hoc/kei/design_agent/data/runs/20260415_110323/final.html)",
|
||||
"Bash(python -c \"import src.block_reference; import src.section_parser; import src.pipeline; print\\('OK'\\)\")",
|
||||
"Bash(python -c \"import src.block_assembler; import src.section_parser; import src.pipeline; print\\('OK'\\)\")",
|
||||
"Bash(python -c \"import src.block_reference; import src.pipeline; import src.block_assembler; print\\('OK'\\)\")",
|
||||
"Bash(ls d:/ad-hoc/kei/design_agent/figma_to_html_agent/block-tests/*.html)",
|
||||
"Bash(ls d:/ad-hoc/kei/design_agent/figma_to_html_agent/block-tests/*_flat.md)",
|
||||
"Bash(ls d:/ad-hoc/kei/design_agent/figma_to_html_agent/*.md d:/ad-hoc/kei/design_agent/figma_to_html_agent/*.json d:/ad-hoc/kei/design_agent/figma_to_html_agent/*.faiss)",
|
||||
"Bash(ls d:/ad-hoc/kei/design_agent/figma_to_html_agent/block-tests/*.html d:/ad-hoc/kei/design_agent/figma_to_html_agent/block-tests/*.md)",
|
||||
"Bash(python -c ' *)",
|
||||
"Bash(ls d:/ad-hoc/kei/design_agent/figma_to_html_agent/blocks/1171281189/assets/*.svg)",
|
||||
"Bash(ls -d d:/ad-hoc/kei/design_agent/figma_to_html_agent/blocks/*/)",
|
||||
"Bash(sort -t'\"' -k4)",
|
||||
"Bash(awk -F: '{print $1}')",
|
||||
"Bash(curl -sS -o fdcafc1b6ab639b9a4c75ce36014f3b16ea0fbc1.png \"http://localhost:3845/assets/fdcafc1b6ab639b9a4c75ce36014f3b16ea0fbc1.png\")",
|
||||
"Bash(curl -sS -o 922ee6f4bea1434652ffc08f962086052286b6c5.png \"http://localhost:3845/assets/922ee6f4bea1434652ffc08f962086052286b6c5.png\")",
|
||||
"Bash(curl -sS -o 5d27ecb194e670c9af26e98d11075b86c40efffa.svg \"http://localhost:3845/assets/5d27ecb194e670c9af26e98d11075b86c40efffa.svg\")",
|
||||
"Bash(curl -sS -o 6d311a18898deded5376b25996a13757e8c42d17.svg \"http://localhost:3845/assets/6d311a18898deded5376b25996a13757e8c42d17.svg\")",
|
||||
"Bash(curl -sS -o cab8c8284090fb4893d7f584cc6081370b115b11.svg \"http://localhost:3845/assets/cab8c8284090fb4893d7f584cc6081370b115b11.svg\")",
|
||||
"Bash(curl -sS -o b0e9fad5b03f4d9e368524976c20c9886392e17b.png \"http://localhost:3845/assets/b0e9fad5b03f4d9e368524976c20c9886392e17b.png\")",
|
||||
"Bash(curl -sS -o 7713e15d6eaebd868c6ea632c1199b94603af2fd.svg \"http://localhost:3845/assets/7713e15d6eaebd868c6ea632c1199b94603af2fd.svg\")",
|
||||
"Bash(curl -sS -o bf1755273910e17f7a012ce2d269a93cca9483ac.svg \"http://localhost:3845/assets/bf1755273910e17f7a012ce2d269a93cca9483ac.svg\")",
|
||||
"Bash(curl -sS -o b47d2977a36ab6a0c180d8f090afff798c44ed27.png \"http://localhost:3845/assets/b47d2977a36ab6a0c180d8f090afff798c44ed27.png\")",
|
||||
"Bash(curl -sS -o b614390a7ec2f351fc8290d640bcd3e6b237bfb2.svg \"http://localhost:3845/assets/b614390a7ec2f351fc8290d640bcd3e6b237bfb2.svg\")",
|
||||
"Bash(curl -sS -o ff649c28fd98518d6b48b9e5451fe1da4c1e95d5.svg \"http://localhost:3845/assets/ff649c28fd98518d6b48b9e5451fe1da4c1e95d5.svg\")",
|
||||
"Bash(curl -sS -o 29c778b566aca6778f505874f21670de129351f8.svg \"http://localhost:3845/assets/29c778b566aca6778f505874f21670de129351f8.svg\")",
|
||||
"Bash(curl -sS -o f808a8c71388afbadc21c5c4b4bbe76bcd73d420.png \"http://localhost:3845/assets/f808a8c71388afbadc21c5c4b4bbe76bcd73d420.png\")",
|
||||
"Bash(curl -sS -o 855b9d71b1cce30bcd89b214265fa8b6de58968f.png \"http://localhost:3845/assets/855b9d71b1cce30bcd89b214265fa8b6de58968f.png\")",
|
||||
"Bash(curl -sS -o 9de5354619ad8ba9f47efd104df0f388c6778cc1.png \"http://localhost:3845/assets/9de5354619ad8ba9f47efd104df0f388c6778cc1.png\")",
|
||||
"Bash(curl -sS -o 461a9f67c756d5057df3efbe01c515beb0a07a59.png \"http://localhost:3845/assets/461a9f67c756d5057df3efbe01c515beb0a07a59.png\")",
|
||||
"Bash(curl -sS -o 5a11195e0df9ff8292d56ab0c0bd78a31e95e2ba.png \"http://localhost:3845/assets/5a11195e0df9ff8292d56ab0c0bd78a31e95e2ba.png\")",
|
||||
"Bash(curl -sS -o 62d8e408b8381ece554ed55d20d3b54e375f92cb.svg \"http://localhost:3845/assets/62d8e408b8381ece554ed55d20d3b54e375f92cb.svg\")",
|
||||
"Bash(ls \"d:/ad-hoc/kei/design_agent\\(원본\\)/figma_to_html_agent/block-tests/\"*.html)",
|
||||
"Bash(python scripts/eval_block_matcher.py)",
|
||||
"Bash(python scripts/run_pipeline_v2.py)",
|
||||
"Bash(python \"C:\\\\Users\\\\User\\\\.claude\\\\projects\\\\d--ad-hoc-kei-design-agent\\\\58697289-9e64-4f6b-955d-8f289d7ea0d1\\\\tool-results\\\\mcp-figma-desktop-get_metadata-1776417198239.txt\")",
|
||||
"Bash(where python *)",
|
||||
"Skill(update-config)",
|
||||
"Skill(update-config:*)",
|
||||
"Bash('C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe' -c ' *)",
|
||||
"Bash(curl -s -o /dev/null -w \"HTTP %{http_code}\\\\n\" -m 3 http://127.0.0.1:3845/mcp)",
|
||||
"Bash(curl -s -o /dev/null -w \"HTTP %{http_code}\\\\n\" -m 3 http://127.0.0.1:3845/sse)",
|
||||
"Bash(curl -s -X POST http://127.0.0.1:3845/mcp -H 'Content-Type: application/json' -H 'Accept: application/json, text/event-stream' -d '{\"jsonrpc\":\"2.0\",\"id\":1,\"method\":\"initialize\",\"params\":{\"protocolVersion\":\"2024-11-05\",\"capabilities\":{},\"clientInfo\":{\"name\":\"test\",\"version\":\"1.0\"}}}' --max-time 5)",
|
||||
"Bash(env)",
|
||||
"Bash(curl -s -X POST http://127.0.0.1:3845/mcp -H \"Content-Type: application/json\" -H \"Accept: application/json, text/event-stream\" -d '{\"jsonrpc\":\"2.0\",\"id\":1,\"method\":\"initialize\",\"params\":{\"protocolVersion\":\"2024-11-05\",\"capabilities\":{},\"clientInfo\":{\"name\":\"test\",\"version\":\"1.0\"}}}')",
|
||||
"Bash(python figma_to_html_agent/scripts/fetch_figma_screenshots.py)",
|
||||
"Bash(xargs -I {} echo \"blocks/{}\")",
|
||||
"Bash(python scripts/match_mdx_to_frames_tfidf.py)",
|
||||
"WebSearch",
|
||||
"Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" -c \"import bm25s; print\\('bm25s:', bm25s.__version__\\)\")",
|
||||
"Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" -c \"import kiwipiepy; print\\('kiwipiepy:', kiwipiepy.__version__\\)\")",
|
||||
"Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" -m pip install bm25s)",
|
||||
"Bash(python scripts/fetch_all_frame_screenshots.py)",
|
||||
"Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" tests/matching/run_all.py)",
|
||||
"Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" tests/matching/by_section.py)",
|
||||
"Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" tests/matching/matrix_simple.py)",
|
||||
"Bash(python scripts/match_mdx_strict.py)",
|
||||
"Bash(python scripts/match_17_units_my_matcher.py)",
|
||||
"Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" tests/matching/extract_units.py)",
|
||||
"Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" tests/matching/matrix_17.py)",
|
||||
"Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" tests/matching/compare_hybrids.py)",
|
||||
"Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" tests/matching/test_mdx03_1_depth.py)",
|
||||
"Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" tests/matching/matrix_cases.py)",
|
||||
"Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" -c \"import markdown; print\\(markdown.__version__\\)\")",
|
||||
"Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" tests/matching/md_to_html.py)",
|
||||
"Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" tests/matching/case3.py)",
|
||||
"Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" \"d:/ad-hoc/kei/design_agent/tests/matching/md_to_html.py\")",
|
||||
"Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" tests/matching/extract_rare_keywords.py)",
|
||||
"Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" tests/matching/idf_only_test.py)",
|
||||
"Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" tests/matching/case1_only.py)",
|
||||
"Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" tests/matching/keyword_report.py)",
|
||||
"Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" -c \"import gensim; print\\('gensim:', gensim.__version__\\)\")",
|
||||
"Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" -c \"import sentence_transformers; print\\('sentence-transformers:', sentence_transformers.__version__\\)\")",
|
||||
"Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" -c \"import torch; print\\('torch:', torch.__version__\\)\")",
|
||||
"Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" -m pip install gensim)",
|
||||
"Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" tests/matching/phase2.py)",
|
||||
"Bash(python tests/matching/phase2.py)",
|
||||
"Bash(python tests/matching/md_to_html.py)",
|
||||
"Bash(python tests/matching/phase3.py)",
|
||||
"Bash(python tests/matching/phase4.py)",
|
||||
"Bash(tasklist)",
|
||||
"Bash(python tests/matching/phase4_1st.py)",
|
||||
"Bash(python tests/matching/phase5.py)",
|
||||
"Bash(python tests/matching/phase6.py)",
|
||||
"Bash(python tests/matching/phase7.py)",
|
||||
"Bash(python tests/matching/phase8.py)",
|
||||
"Bash(python tests/matching/phase9.py)",
|
||||
"Bash(python tests/matching/phase10.py)",
|
||||
"Bash(python tests/matching/phase11.py)",
|
||||
"Bash(python tests/matching/phase12.py)",
|
||||
"Bash(python tests/matching/phase13.py)",
|
||||
"Bash(python tests/matching/phase14.py)",
|
||||
"Bash(python tests/matching/phase14_sample.py)",
|
||||
"Bash(python tests/matching/phase15.py)",
|
||||
"Bash(gh repo *)",
|
||||
"Read(//d/for python//**)",
|
||||
"Bash(git -C '/d/for python/__TRACKED_VAR__' remote -v)",
|
||||
"Read(//d/for python/**)",
|
||||
"Bash(git -C \"/d/for python/geulbeot-light/upload/\" remote -v)",
|
||||
"Bash(git -C \"/d/for python/geulbeot-light/upload/\" log --oneline -5)",
|
||||
"WebFetch(domain:github.com)",
|
||||
"Bash(git -C /d/tmp/geulbeot-check log --oneline -10)",
|
||||
"Bash(python -m py_compile domain_api.py converters/pipeline/step8_content.py)",
|
||||
"Bash(node -c \"/d/for python/geulbeot-light/upload/static/js/generator.js\")",
|
||||
"Bash(node --check \"/d/for python/geulbeot-light/upload/static/js/generator.js\")",
|
||||
"Bash(python -m py_compile converters/pipeline/step8_content.py)",
|
||||
"Bash(python tests/matching/phase16.py)",
|
||||
"Bash(git -C figma_to_html_agent status --short)",
|
||||
"Bash(xargs -I {} dirname {})",
|
||||
"Bash(python tests/matching/phase17.py)",
|
||||
"Bash(python tests/matching/phase18_21.py)",
|
||||
"Bash(python tests/matching/phase22.py)",
|
||||
"Bash(python tests/matching/synonyms_report.py)",
|
||||
"Bash(python tests/matching/figma_audit.py)",
|
||||
"Bash(sed -n '30,80p' figma_to_html_agent/blocks/1171281171/texts.md)",
|
||||
"Bash(sed -n '500,540p' figma_to_html_agent/blocks/1171281171/texts.md)",
|
||||
"Bash(python tests/matching/synonym_mine.py)",
|
||||
"Bash(python tests/matching/phase23.py)",
|
||||
"Bash(python tests/matching/domain_terms_report.py)",
|
||||
"Bash(python tests/matching/phase23b.py)",
|
||||
"Bash(python tests/matching/build_structure_ontology.py)",
|
||||
"Bash(python tests/matching/phase21b.py)",
|
||||
"Bash(python tests/matching/template_fit.py)",
|
||||
"Bash(python template_fit.py)",
|
||||
"Bash(awk '/^━━ MDX01-2/,/^━━ MDX02/')",
|
||||
"Bash(awk '/^━━ MDX02/,/^━━ MDX03-1/')",
|
||||
"Bash(awk '/^━━ MDX/ || /construction_goals/ || /policy_goals/ || /policy_achievement/ || /=== Result/ || /^✓/ || /^⚠/')",
|
||||
"Bash(awk '/━━ MDX02/,/━━ MDX03-1/')",
|
||||
"Bash(awk '/━━ MDX03-1/,/━━ MDX03-2/')",
|
||||
"Bash(awk '/^━━/ || /sw_development_cycle_six/ || /domestic_bim_actor/ || /compensation_complaint/ || /field_effectiveness/ || /model_specialized/ || /=== Result/ || /^✓/ || /^⚠/')",
|
||||
"Bash(git mv *)",
|
||||
"Bash(mv phase23.py phase_domain_terms.py)",
|
||||
"Bash(mv phase23b.py phase_domain_terms_v2.py)",
|
||||
"Bash(python phase23.py)",
|
||||
"Bash(python phase24.py)",
|
||||
"Bash(python phase25.py)",
|
||||
"Bash(python phase26.py)",
|
||||
"Bash(python phase22.py)",
|
||||
"Bash(python md_to_html.py)",
|
||||
"Bash(python inspect_keywords.py)",
|
||||
"Bash(python keyword_refinement.py)",
|
||||
"Bash(python build_keyword_base.py)",
|
||||
"Bash(python -c \"import yaml; d=yaml.safe_load\\(open\\('keyword_base.yaml',encoding='utf-8'\\)\\); print\\('keywords:', len\\(d['keywords']\\)\\); print\\('excluded:', len\\(d['excluded']\\)\\)\")",
|
||||
"Bash(python clean_anchor_sets.py)",
|
||||
"Bash(python sync_analysis_from_ontology.py)",
|
||||
"Bash(awk '/^## 1. TARGET별/,/^## 2\\\\./' MATRIX_PHASE23.md)",
|
||||
"Bash(python _rename_phase_refs.py)",
|
||||
"Bash(python _fix_self_refs.py)",
|
||||
"Bash(python _add_structure_intent.py)",
|
||||
"Bash(python intent_diagnostic.py)",
|
||||
"Bash(awk '/^## 1. TARGET/,/^## 2\\\\./' MATRIX_PHASE25.md)",
|
||||
"Bash(python build_beps_summary.py)",
|
||||
"Bash(python text_pipeline.py)",
|
||||
"Bash(python tests/matching/pipeline_01_extract_nodes.py)",
|
||||
"Bash(python tests/matching/pipeline_02_tokenize.py)",
|
||||
"Bash(python tests/matching/pipeline_02_5_special_forms.py)",
|
||||
"Bash(python tests/matching/pipeline_04a_smoke_test.py)",
|
||||
"Bash(python tests/matching/pipeline_04_normalize.py)",
|
||||
"Bash(python -c \"import markdown; print\\(markdown.__version__\\)\")",
|
||||
"Bash(python tests/matching/generate_inventory_report.py)",
|
||||
"Bash(python tests/matching/pipeline_05_anchor_candidates.py)",
|
||||
"Bash(python tests/matching/pipeline_06_anchor_sets.py)",
|
||||
"Bash(python tests/matching/pipeline_06_2_mdx_matching.py)",
|
||||
"Bash(python \"d:/ad-hoc/kei/design_agent/tests/matching/pipeline_01_extract_nodes.py\")",
|
||||
"Bash(python \"d:/ad-hoc/kei/design_agent/tests/matching/pipeline_02_tokenize.py\")",
|
||||
"Bash(python \"d:/ad-hoc/kei/design_agent/tests/matching/pipeline_02_5_special_forms.py\")",
|
||||
"Bash(python \"d:/ad-hoc/kei/design_agent/tests/matching/pipeline_04_normalize.py\")",
|
||||
"Bash(python \"d:/ad-hoc/kei/design_agent/tests/matching/generate_inventory_report.py\")",
|
||||
"Bash(python \"d:/ad-hoc/kei/design_agent/tests/matching/pipeline_06_2_mdx_matching.py\")",
|
||||
"Bash(python -c \"import paddleocr; print\\('paddleocr OK', paddleocr.__version__\\)\")",
|
||||
"Bash(python -c \"import easyocr; print\\('easyocr OK', easyocr.__version__\\)\")",
|
||||
"Bash(tesseract --version)",
|
||||
"Bash(python -c \"import pytesseract; print\\('pytesseract OK'\\)\")",
|
||||
"Bash(pip install *)",
|
||||
"Bash(python -c \"import easyocr; print\\('OK', easyocr.__version__\\)\")",
|
||||
"Bash(python scripts/ocr_augment_texts.py --only 1171281172)",
|
||||
"Bash(python scripts/ocr_augment_texts.py)",
|
||||
"Bash(python \"d:/ad-hoc/kei/design_agent/tests/matching/pipeline_07_auto_anchor_candidates.py\")",
|
||||
"Bash(cp anchor_sets_input.yaml anchor_sets_input.ai_curated_legacy.yaml)",
|
||||
"Bash(cat)",
|
||||
"Bash(python \"d:/ad-hoc/kei/design_agent/tests/matching/generate_frame_keyword_review.py\")",
|
||||
"Bash(mkdir -p _archive)",
|
||||
"Bash(mv NORMALIZED_TOKEN_INVENTORY.html NORMALIZED_TOKEN_INVENTORY.md NORMALIZED_TOKEN_INVENTORY.before_plain_line.html _archive/)",
|
||||
"Bash(python \"d:/ad-hoc/kei/design_agent/tests/matching/generate_keyword_inventory.py\")",
|
||||
"Bash(mv -f mdx_matching_report.html mdx_matching_report.md _archive/)",
|
||||
"Bash(python pipeline_06_2_mdx_matching.py)",
|
||||
"Bash(python \"d:/ad-hoc/kei/design_agent/tests/matching/generate_filter_candidates.py\")",
|
||||
"Bash(python pipeline_04_normalize.py)",
|
||||
"Bash(python pipeline_07_auto_anchor_candidates.py)",
|
||||
"Bash(python generate_keyword_inventory.py)",
|
||||
"Bash(python generate_frame_keyword_review.py)",
|
||||
"Bash(python generate_filter_candidates.py)",
|
||||
"Bash(python pipeline_01_extract_nodes.py)",
|
||||
"Bash(python pipeline_02_tokenize.py)",
|
||||
"Bash(awk '{print $6,$7,$8,$NF}')",
|
||||
"Bash(python pipeline_08_v3_structure_rerank.py)",
|
||||
"Bash(python pipeline_08_v4_template_fit_judgment.py)",
|
||||
"Bash(python pipeline_08_5_matching_report.py)",
|
||||
"Bash(awk '{print $5, $NF}')",
|
||||
"WebFetch(domain:raw.githubusercontent.com)",
|
||||
"Bash(python pipeline_09_v2_diagnosis.py)",
|
||||
"Bash(python pipeline_10_holdout_labeling_prep.py)",
|
||||
"Bash(python pipeline_10_5_holdout_eval.py)",
|
||||
"Bash(python pipeline_11_templates_v1_audit.py)",
|
||||
"Bash(python pipeline_12_generate_templates_v2.py)",
|
||||
"Bash(python pipeline_12_r2_generate_templates_v2.py)",
|
||||
"Bash(python pipeline_12_r3_generate_templates_v2.py)",
|
||||
"Bash(python pipeline_12_finalize_v2.py)",
|
||||
"Bash(python pipeline_08_v3_r2_structure_rerank.py)",
|
||||
"Bash(python pipeline_08_v3_r3_structure_rerank.py)",
|
||||
"Bash(python pipeline_08_v3_r4_structure_rerank.py)",
|
||||
"Bash(python pipeline_12_promote_frame13.py)",
|
||||
"Bash(python pipeline_08_v3_r5_structure_rerank.py)",
|
||||
"Bash(python pipeline_08_v4_r2_template_fit_judgment.py)",
|
||||
"Bash(python pipeline_08_5_r2_matching_report.py)",
|
||||
"Bash(python pipeline_13_generate_meeting_samples.py)",
|
||||
"Bash(python pipeline_13_r2_meeting_docs.py)",
|
||||
"Bash(python pipeline_14_single_sample.py)",
|
||||
"Bash(python pipeline_15_idf_comparison.py)",
|
||||
"Bash(python pipeline_15_bm25_comparison.py)",
|
||||
"Bash(python pipeline_15_bm25_with_sets.py)",
|
||||
"Bash(python -c \"import sklearn; print\\(sklearn.__version__\\)\")",
|
||||
"Bash(python pipeline_15_logistic_regression.py)",
|
||||
"Bash(python pipeline_16_deck_4pages.py)",
|
||||
"Bash(python pipeline_17_v4_full32.py)",
|
||||
"Bash(python tests/matching/pipeline_16_deck_4pages.py)",
|
||||
"Bash(python pipeline_18_slot_axis_ablation.py)",
|
||||
"Bash(python tests/matching/pipeline_18_slot_axis_ablation.py)",
|
||||
"Bash(cp tests/matching/pipeline_01_extract_nodes.py tests/pipeline/code/)",
|
||||
"Bash(cp tests/matching/pipeline_02_tokenize.py tests/pipeline/code/)",
|
||||
"Bash(cp tests/matching/pipeline_02_5_special_forms.py tests/pipeline/code/)",
|
||||
"Bash(cp tests/matching/pipeline_04_normalize.py tests/pipeline/code/)",
|
||||
"Bash(cp tests/matching/pipeline_05_anchor_candidates.py tests/pipeline/code/)",
|
||||
"Bash(python _tmp_inject.py)",
|
||||
"Bash(python _tmp_inject2.py)",
|
||||
"Bash(python _tmp_fix.py)",
|
||||
"Bash(python _tmp_fix2.py)",
|
||||
"Bash(grep -n \"^---$\" tests/PIPELINE.md)",
|
||||
"Bash(python _tmp_replace_col.py)",
|
||||
"Bash(python3)",
|
||||
"Bash(python run_mdx03_pipeline.py --phase-z2 --run-id mvp1_test1)",
|
||||
"Bash(python run_mdx03_pipeline.py --phase-z2 --run-id mvp1_test2)",
|
||||
"Bash(awk '/data-template-id=\"process_product_two_way\"/,/<\\\\/div>/' d:/ad-hoc/kei/design_agent/data/runs/mvp1_test2/phase_z2/final.html)",
|
||||
"Bash(python run_mdx03_pipeline.py --phase-z2 --run-id mvp1_test3)",
|
||||
"Bash(awk '/data-template-id=\"process_product_two_way\"/,/<\\\\/div>$/' d:/ad-hoc/kei/design_agent/data/runs/mvp1_test3/phase_z2/final.html)",
|
||||
"Bash(awk '/data-col=\"process\"/,/data-col=\"product\"/' d:/ad-hoc/kei/design_agent/data/runs/mvp1_test3/phase_z2/final.html)",
|
||||
"Bash(python run_mdx03_pipeline.py --phase-z2 --run-id mvp1_test4)",
|
||||
"Bash(python run_mdx03_pipeline.py --phase-z2 --run-id mvp1_test5)",
|
||||
"Bash(curl -sS -o /dev/null -w \"HTTP %{http_code}\\\\n\" http://127.0.0.1:3845/sse --max-time 3)",
|
||||
"Bash(mkdir -p d:/ad-hoc/kei/design_agent/figma_to_html_agent/blocks/1171281210/assets d:/ad-hoc/kei/design_agent/figma_to_html_agent/blocks/1171281210/_renders)",
|
||||
"Bash(curl -sSo arrow.png \"http://localhost:3845/assets/0ad6379ae47598a529dba23bbc5730ba1da7117f.png\")",
|
||||
"Bash(curl -sSo body_bg.svg \"http://localhost:3845/assets/7e328327e3e54e3989e2c6b76545de69fbc6f327.svg\")",
|
||||
"Bash(curl -sSo header_left_bg.svg \"http://localhost:3845/assets/80402d8da588fab7aa4c209de37e71f9b22c4d47.svg\")",
|
||||
"Bash(curl -sSo header_right_bg.svg \"http://localhost:3845/assets/a7d2b0029efb030aaac60ec160ba5a5b39a3b17a.svg\")",
|
||||
"Bash(python blocks/1171281210/_render.py)",
|
||||
"Bash(python -c \"from PIL import Image; im=Image.open\\('blocks/1171281210/_renders/slide.png'\\); im2=im.resize\\(\\(im.size[0]*2, im.size[1]*2\\), Image.LANCZOS\\); im2.save\\('blocks/1171281210/_renders/slide_2x.png'\\); print\\(im.size, '->', im2.size\\)\")",
|
||||
"Bash(python run_mdx03_pipeline.py --phase-z2 --run-id mvp1.5_test1)",
|
||||
"Bash(python run_mdx03_pipeline.py --phase-z2 --run-id mvp1.5_test2)",
|
||||
"Bash(mkdir -p d:/ad-hoc/kei/design_agent/figma_to_html_agent/blocks/1171281174/assets d:/ad-hoc/kei/design_agent/figma_to_html_agent/blocks/1171281174/_renders)",
|
||||
"Bash(curl -sSo header_pill.png \"http://localhost:3845/assets/acafc8a08706fff6b50942c715048b6720570afd.png\")",
|
||||
"Bash(curl -sSo pin_icon.png \"http://localhost:3845/assets/0ecfd235666abd5299c05395f02fdc7add6085b9.png\")",
|
||||
"Bash(curl -sSo text_bubble.png \"http://localhost:3845/assets/944d66dab1fd437246764c06e3b4264dcee933a9.png\")",
|
||||
"Bash(curl -sSo badge_01.png \"http://localhost:3845/assets/42dca7c1ca42ba8520aa274fd4471bd054dfe36b.png\")",
|
||||
"Bash(python run_mdx03_pipeline.py --phase-z2 --run-id mvp1.5_test3)",
|
||||
"Bash(python blocks/1171281174/_render.py)",
|
||||
"Bash(python -c \"from PIL import Image; im=Image.open\\('blocks/1171281174/_renders/block.png'\\); im2=im.resize\\(\\(im.size[0]*2, im.size[1]*2\\), Image.LANCZOS\\); im2.save\\('blocks/1171281174/_renders/block_2x.png'\\); print\\('size:', im.size, '->', im2.size\\)\")",
|
||||
"Bash(mkdir -p d:/ad-hoc/kei/design_agent/figma_to_html_agent/blocks/1171281179/assets d:/ad-hoc/kei/design_agent/figma_to_html_agent/blocks/1171281179/_renders)",
|
||||
"Bash(curl -sSo title_icon.png \"http://localhost:3845/assets/b0e9fad5b03f4d9e368524976c20c9886392e17b.png\")",
|
||||
"Bash(curl -sSo card_decor.png \"http://localhost:3845/assets/69b6281daa6320fdc36d844cfcfb086fcb102123.png\")",
|
||||
"Bash(python blocks/1171281179/_render.py)",
|
||||
"Bash(python -c \"from PIL import Image; im=Image.open\\('blocks/1171281179/_renders/slide.png'\\); im2=im.resize\\(\\(im.size[0]*2, im.size[1]*2\\), Image.LANCZOS\\); im2.save\\('blocks/1171281179/_renders/slide_2x.png'\\); print\\(im.size, '->', im2.size\\)\")",
|
||||
"Bash(python -c \"from PIL import Image; im=Image.open\\('blocks/1171281179/_renders/slide.png'\\); im.resize\\(\\(im.size[0]*2, im.size[1]*2\\), Image.LANCZOS\\).save\\('blocks/1171281179/_renders/slide_2x.png'\\)\")",
|
||||
"Bash(python run_mdx03_pipeline.py --phase-z2 --run-id mvp1.5a_test1)",
|
||||
"Bash(python run_mdx03_pipeline.py --phase-z2 --run-id mvp1.5b_test1)",
|
||||
"Bash(python run_mdx03_pipeline.py --phase-z2 --run-id mvp1.5b_test2)",
|
||||
"Bash(python run_mdx03_pipeline.py --phase-z2 --run-id mvp1.5b_test4)",
|
||||
"Read(//tmp/**)",
|
||||
"Read(//d/tmp/**)",
|
||||
"Bash(python run_mdx03_pipeline.py --phase-z2 --run-id mvp1.5b_test5)",
|
||||
"Bash(python run_mdx03_pipeline.py --phase-z2 --run-id mvp1.5b_test7)",
|
||||
"Bash(git commit -m ' *)",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\"; \"Content-Type\" = \"application/json\" }; $body = @{ state = \"open\" } | ConvertTo-Json; Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/90\" -Method Patch -Headers $headers -Body $body | Select-Object number, state, title)",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\" }; $resp = Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/90\" -Method Get -Headers $headers; \"#$\\($resp.number\\) state=$\\($resp.state\\) title=$\\($resp.title\\)\")",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\"; \"Content-Type\" = \"application/json\" }; $body = @{ state = \"closed\" } | ConvertTo-Json; $bytes = [System.Text.Encoding]::UTF8.GetBytes\\($body\\); Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/90\" -Method Patch -Headers $headers -Body $bytes | Select-Object number, state, closed_at, title | Format-List)",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\" }; $all = @\\(\\); $page = 1; do { $url = \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues?state=closed&type=issues&page=$page&limit=50\"; $batch = Invoke-RestMethod -Uri $url -Method Get -Headers $headers; $all += $batch; $page++ } while \\($batch.Count -eq 50\\); \"Total closed issues: $\\($all.Count\\)\"; $all | Select-Object number, title | Sort-Object number | Format-Table -AutoSize -Wrap)",
|
||||
"Bash(git log *)",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\" }; foreach \\($n in 14, 64, 74, 91\\) { $r = Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/$n\" -Method Get -Headers $headers; \"#$\\($r.number\\) state=$\\($r.state\\) closed_at=$\\($r.closed_at\\)\" })",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\" }; $issue = Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/84\" -Method Get -Headers $headers; \"=== #84 META ===\"; \"state=$\\($issue.state\\) created=$\\($issue.created_at\\) closed=$\\($issue.closed_at\\)\"; \"title=$\\($issue.title\\)\"; \"\"; \"=== #84 BODY ===\"; $issue.body)",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\" }; $comments = Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/84/comments\" -Method Get -Headers $headers; \"=== #84 COMMENT COUNT: $\\($comments.Count\\) ===\"; \"\"; $i = 0; foreach \\($c in $comments\\) { $i++; $bodyPreview = $c.body.Substring\\(0, [Math]::Min\\(200, $c.body.Length\\)\\); \"--- [$i] id=$\\($c.id\\) created=$\\($c.created_at\\) ---\"; \"$bodyPreview\"; \"\" })",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\" }; $r = Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/83\" -Method Get -Headers $headers; \"#83 state=$\\($r.state\\) closed_at=$\\($r.closed_at\\) title=$\\($r.title\\)\")",
|
||||
"Bash(git status *)",
|
||||
"Bash(python -m py_compile orchestrator.py)",
|
||||
"Bash(echo \"origin = $\\(git ls-remote origin refs/heads/main)",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\"; \"Content-Type\" = \"application/json\" }; $body = @{ state = \"open\" } | ConvertTo-Json; Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/83\" -Method Patch -Headers $headers -Body $body | Select-Object number, state, closed_at, title | Format-List)",
|
||||
"Bash(git restore *)",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\" }; $r83 = Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/83\" -Method Get -Headers $headers; \"#83 state=$\\($r83.state\\) closed_at=[$\\($r83.closed_at\\)] labels=[$\\($r83.labels.Count\\)]\")",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\" }; $cs = Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/84/comments?limit=100\" -Method Get -Headers $headers; \"#84 current comment count = $\\($cs.Count\\)\")",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\" }; $cs = Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/84/comments?limit=100\" -Method Get -Headers $headers; \"Total comments now: $\\($cs.Count\\)\"; \"Recent 3:\"; $cs | Select-Object -Last 3 | ForEach-Object { $preview = $_.body.Substring\\(0, [Math]::Min\\(80, $_.body.Length\\)\\); \" id=$\\($_.id\\) [$preview...]\" })",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\" }; $r = Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/84\" -Method Get -Headers $headers; \"#84 Gitea: state=$\\($r.state\\) closed_at=[$\\($r.closed_at\\)]\")",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\"; \"Content-Type\" = \"application/json\" }; $body = @{ state = \"closed\" } | ConvertTo-Json; $bytes = [System.Text.Encoding]::UTF8.GetBytes\\($body\\); Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/84\" -Method Patch -Headers $headers -Body $bytes | Select-Object number, state, closed_at, title | Format-List)",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\" }; $r84 = Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/84\" -Method Get -Headers $headers; \"#84 state=$\\($r84.state\\) closed_at=$\\($r84.closed_at\\)\"; \"\"; \"orchestrator HEAD = $\\(git rev-parse HEAD\\)\"; \"orchestrator fix commits in chain:\"; git log --oneline -3 -- orchestrator.py)",
|
||||
"Bash(python -m py_compile src/phase_z2_pipeline.py)",
|
||||
"Bash(grep -n \"^import re\\\\|^import re$\" src/phase_z2_pipeline.py)",
|
||||
"Bash(grep -n \"^import os\\\\|^import os$\" src/phase_z2_pipeline.py)",
|
||||
"Bash(python -m src.phase_z2_pipeline samples/mdx_batch/05.mdx mdx05_emergency_p3)",
|
||||
"Bash(python -m src.phase_z2_pipeline samples/mdx_batch/04.mdx mdx04_emergency_p3)",
|
||||
"Bash(python -c \"from src.config import settings; print\\(f'ai_fallback_enabled={settings.ai_fallback_enabled} model={settings.ai_fallback_model} has_api_key={bool\\(settings.anthropic_api_key\\)}'\\)\")",
|
||||
"Bash(python -m src.phase_z2_pipeline samples/mdx_batch/05.mdx mdx05_emergency_p4)",
|
||||
"Bash(python -m src.phase_z2_pipeline samples/mdx_batch/04.mdx mdx04_emergency_p4)",
|
||||
"Bash(python -m src.phase_z2_pipeline samples/mdx_batch/04.mdx mdx04_emergency_p4b)",
|
||||
"Bash(python -m src.phase_z2_pipeline samples/mdx_batch/04.mdx mdx04_p4b_full)",
|
||||
"Bash(python -m src.phase_z2_pipeline samples/mdx_batch/03.mdx mdx03_layout_test --override-layout vertical-2)",
|
||||
"Bash(python -m src.phase_z2_pipeline samples/mdx_batch/05.mdx mdx05_layout_test --override-layout horizontal-2)",
|
||||
"Bash(cp data/user_overrides/*.json data/user_overrides_backup_20260526/)",
|
||||
"Bash(rm -f data/user_overrides/*.json)",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\" }; $issue = Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/94\" -Method Get -Headers $headers; \"#94 state=$\\($issue.state\\)\"; \"title=$\\($issue.title\\)\"; \"\"; \"=== body ===\"; $issue.body)",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\" }; $cs = Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/94/comments\" -Method Get -Headers $headers; \"Total comments: $\\($cs.Count\\)\"; foreach \\($c in $cs | Select-Object -Last 5\\) { \"--- comment_id=$\\($c.id\\) ---\"; $c.body.Substring\\(0, [Math]::Min\\(600, $c.body.Length\\)\\); \"\" })",
|
||||
"Bash(git ls-tree *)",
|
||||
"Bash(grep -i \".html$\")",
|
||||
"Bash(grep \".html$\")",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\" }; $issue = Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/98\" -Method Get -Headers $headers; \"=== #$\\($issue.number\\) state=$\\($issue.state\\) ===\"; $issue.title; \"\"; \"=== BODY \\(truncated\\) ===\"; $issue.body.Substring\\(0, [Math]::Min\\(3000, $issue.body.Length\\)\\))",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\" }; $issue = Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/98\" -Method Get -Headers $headers; if \\($issue.body.Length -gt 3000\\) { $issue.body.Substring\\(3000, [Math]::Min\\(4000, $issue.body.Length - 3000\\)\\) })",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\" }; $cs = Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/98/comments\" -Method Get -Headers $headers; \"Total: $\\($cs.Count\\)\"; \"\"; \"=== LATEST 2 comments ===\"; foreach \\($c in $cs | Select-Object -Last 2\\) { \"--- comment_id=$\\($c.id\\) created=$\\($c.created_at\\) ---\"; $c.body.Substring\\(0, [Math]::Min\\(3000, $c.body.Length\\)\\); \"\" })",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\" }; $cs = Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/98/comments\" -Method Get -Headers $headers; $last = $cs[-1]; if \\($last.body.Length -gt 3000\\) { $last.body.Substring\\(3000, [Math]::Min\\(4500, $last.body.Length - 3000\\)\\) })",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\" }; $cs = Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/98/comments\" -Method Get -Headers $headers; $last = $cs[-1]; if \\($last.body.Length -gt 7500\\) { $last.body.Substring\\(7500, $last.body.Length - 7500\\) })",
|
||||
"Bash(echo '=== task8_e2e___TRACKED_VAR__ ===')",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\" }; $c = Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/comments/28849\" -Method Get -Headers $headers; \"comment_id=$\\($c.id\\) created=$\\($c.created_at\\)\"; \"\"; $c.body)",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\" }; $cs = Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/98/comments\" -Method Get -Headers $headers; \"Total: $\\($cs.Count\\)\"; \"\"; \"=== Recent comments \\(last 8\\) — id / time / first line ===\"; foreach \\($c in $cs | Select-Object -Last 8\\) { $first = \\($c.body -split \"`n\"\\)[0]; \"[$\\($c.id\\)] $\\($c.created_at\\) | $first\" })",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\" }; $cs = Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/98/comments\" -Method Get -Headers $headers; foreach \\($id in 28850, 28856, 28857, 28858, 28859\\) { $c = $cs | Where-Object { $_.id -eq $id }; if \\($c\\) { \"═══════════════════════════════════════════════════════\"; \"ID $id @ $\\($c.created_at\\)\"; \"═══════════════════════════════════════════════════════\"; $c.body.Substring\\(0, [Math]::Min\\(1800, $c.body.Length\\)\\); \"\" } })",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\" }; $cs = Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/98/comments\" -Method Get -Headers $headers; \"Total: $\\($cs.Count\\)\"; \"\"; \"=== All comments after 28850 ===\"; foreach \\($c in $cs | Where-Object { $_.id -gt 28850 }\\) { $first = \\($c.body -split \"`n\"\\)[0]; \"[$\\($c.id\\)] $\\($c.created_at\\) | $first\" })",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\" }; $cs = Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/98/comments\" -Method Get -Headers $headers; \"Total: $\\($cs.Count\\)\"; \"\"; foreach \\($c in $cs | Where-Object { $_.id -gt 28850 }\\) { $first = \\($c.body -split \"`n\"\\)[0]; \"[$\\($c.id\\)] $\\($c.created_at\\) | $first\" })",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\" }; $c = Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/comments/28868\" -Method Get -Headers $headers; $c.body)",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\" }; $cs = Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/98/comments\" -Method Get -Headers $headers; \"Total: $\\($cs.Count\\)\"; \"\"; foreach \\($c in $cs | Where-Object { $_.id -gt 28868 }\\) { $first = \\($c.body -split \"`n\"\\)[0]; \"[$\\($c.id\\)] $\\($c.created_at\\) | $first\" })",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\" }; $c = Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/comments/28869\" -Method Get -Headers $headers; \"Length: $\\($c.body.Length\\)\"; \"\"; $c.body)",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\" }; $cs = Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/98/comments\" -Method Get -Headers $headers; \"Total: $\\($cs.Count\\)\"; \"\"; foreach \\($c in $cs | Where-Object { $_.id -gt 28869 }\\) { $first = \\($c.body -split \"`n\"\\)[0]; \"[$\\($c.id\\)] $\\($c.created_at\\) | $first\" })",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\" }; foreach \\($id in 28871, 28872, 28873, 28907\\) { $c = Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/comments/$id\" -Method Get -Headers $headers; \"═══ [$id] @ $\\($c.created_at\\) ═══\"; $c.body.Substring\\(0, [Math]::Min\\(2000, $c.body.Length\\)\\); \"\" })",
|
||||
"Bash(python -m pytest -q tests/test_phase_z2_task15_summary_footer.py tests/test_phase_z2_task14_parent_units.py tests/test_mdx_text_atoms.py)",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\" }; $cs = Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/98/comments\" -Method Get -Headers $headers; \"Total: $\\($cs.Count\\)\"; \"\"; foreach \\($c in $cs | Where-Object { $_.id -gt 28907 }\\) { $first = \\($c.body -split \"`n\"\\)[0]; \"[$\\($c.id\\)] $\\($c.created_at\\) | $first\" })",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\" }; $c = Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/comments/28908\" -Method Get -Headers $headers; $c.body)",
|
||||
"Bash(python -m pytest -q tests/test_phase_z2_task18_5_semantic_sanitizer.py)",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\" }; $c = Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/comments/28916\" -Method Get -Headers $headers; \"Length: $\\($c.body.Length\\)\"; \"\"; $c.body)",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\" }; foreach \\($id in 28928, 28929\\) { $c = Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/comments/$id\" -Method Get -Headers $headers; \"═══ [$id] @ $\\($c.created_at\\) \\($\\($c.body.Length\\) chars\\) ═══\"; $c.body.Substring\\(0, [Math]::Min\\(3000, $c.body.Length\\)\\); \"\" })",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\" }; $c = Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/comments/28955\" -Method Get -Headers $headers; \"Length: $\\($c.body.Length\\) @ $\\($c.created_at\\)\"; \"\"; $c.body)",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\" }; $c = Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/comments/28965\" -Method Get -Headers $headers; \"Length: $\\($c.body.Length\\) @ $\\($c.created_at\\)\"; \"\"; $c.body)",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\" }; $c = Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/comments/29012\" -Method Get -Headers $headers; \"Length: $\\($c.body.Length\\) @ $\\($c.created_at\\)\"; \"\"; $c.body.Substring\\(0, [Math]::Min\\(2500, $c.body.Length\\)\\))",
|
||||
"PowerShell($token = [Environment]::GetEnvironmentVariable\\(\"GITEA_TOKEN\", \"User\"\\); $headers = @{ \"Authorization\" = \"token $token\" }; $c = Invoke-RestMethod -Uri \"https://gitea.hmac.kr/api/v1/repos/Kyeongmin/C.E.L_Slide_test2/issues/comments/29018\" -Method Get -Headers $headers; \"Length: $\\($c.body.Length\\) @ $\\($c.created_at\\)\"; \"\"; $c.body.Substring\\(0, [Math]::Min\\(2500, $c.body.Length\\)\\))",
|
||||
"Bash(python scripts/check_mdx_source_parity.py --max-items 1)",
|
||||
"Bash(sed -n '8025,8040p' src/phase_z2_pipeline.py)",
|
||||
"Bash(python -m pytest tests/test_phase_z2_task22_section_tree.py -q)",
|
||||
"Bash(python scripts/check_mdx_source_parity.py)",
|
||||
"Bash(python -c \"import json; d=json.load\\(open\\('Front/package.json'\\)\\); print\\('scripts:', d.get\\('scripts'\\)\\)\")",
|
||||
"Bash(python -c \"import json; d=json.load\\(open\\('Front_test_v515/package.json'\\)\\); print\\('name:', d.get\\('name'\\)\\); print\\('scripts:', d.get\\('scripts'\\)\\)\")",
|
||||
"Bash(python -m pytest tests/test_phase_z2_task23_component_expansion.py -q)",
|
||||
"Bash(python -m pytest tests/test_phase_z2_task24_layout_policy.py -q)",
|
||||
"Bash(python -m pytest tests/test_phase_z2_task22_section_tree.py tests/test_phase_z2_task23_component_expansion.py -q)",
|
||||
"Bash(python -m pytest tests/test_phase_z2_task26_coverage_state.py -q)",
|
||||
"Bash(python -m pytest tests/test_phase_z2_task22_section_tree.py tests/test_phase_z2_task23_component_expansion.py tests/test_phase_z2_task24_layout_policy.py tests/test_phase_z2_task25_slot_mapping.py tests/test_phase_z2_task26_coverage_state.py -q)",
|
||||
"Bash(python -m pytest tests/test_phase_z2_task26_coverage_state.py tests/test_phase_z2_task25_slot_mapping.py tests/test_phase_z2_task23_component_expansion.py -q)",
|
||||
"Bash(npx vitest *)",
|
||||
"Bash(python -m pytest tests/test_phase_z2_task27_expand_state.py -q)",
|
||||
"Bash(python -m pytest tests/test_phase_z2_task22_section_tree.py tests/test_phase_z2_task23_component_expansion.py tests/test_phase_z2_task24_layout_policy.py tests/test_phase_z2_task25_slot_mapping.py tests/test_phase_z2_task26_coverage_state.py tests/test_phase_z2_task27_expand_state.py -q)"
|
||||
],
|
||||
"additionalDirectories": [
|
||||
"d:\\ad-hoc\\kei\\design_agent\\templates\\blocks\\new",
|
||||
"d:\\ad-hoc\\kei\\design_agent\\figma_to_html_agent\\blocks",
|
||||
"d:\\ad-hoc\\kei\\design_agent\\figma_to_html_agent\\blocks\\1171281193\\assets",
|
||||
"D:\\"
|
||||
]
|
||||
},
|
||||
"enabledMcpjsonServers": [
|
||||
"figma-desktop"
|
||||
]
|
||||
}
|
||||
@@ -1,71 +0,0 @@
|
||||
name: Multi-MDX Regression (IMP-91)
|
||||
|
||||
# IMP-#91 u13 — auto-gate the mdx 01-05 acceptance set on every push to main
|
||||
# and on PRs targeting main. Failure of any integration test blocks the
|
||||
# commit. JSON report is emitted via pytest-json-report (u12 dep) and
|
||||
# uploaded as an artifact for u14/u15 status-board updater consumption.
|
||||
#
|
||||
# [[feedback_validation_first_for_closed_issues]] — fresh subprocess per CI run.
|
||||
# [[feedback_auto_pipeline_first]] — no manual review queue; deterministic gate.
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [main]
|
||||
pull_request:
|
||||
branches: [main]
|
||||
|
||||
jobs:
|
||||
multi-mdx-regression:
|
||||
runs-on: ubuntu-latest
|
||||
timeout-minutes: 30
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Set up Python 3.11
|
||||
uses: actions/setup-python@v5
|
||||
with:
|
||||
python-version: "3.11"
|
||||
cache: pip
|
||||
|
||||
- name: Install Chrome and ChromeDriver
|
||||
uses: browser-actions/setup-chrome@v1
|
||||
with:
|
||||
install-chromedriver: true
|
||||
|
||||
- name: Install project (dev extras + selenium)
|
||||
run: |
|
||||
python -m pip install --upgrade pip
|
||||
python -m pip install -e ".[dev]"
|
||||
python -m pip install "selenium>=4.20"
|
||||
|
||||
- name: Run multi-mdx regression tests
|
||||
run: |
|
||||
python -m pytest -q -m integration \
|
||||
tests/integration/test_multi_mdx_regression.py \
|
||||
--json-report \
|
||||
--json-report-file=imp91-report.json \
|
||||
--json-report-omit keywords streams
|
||||
|
||||
- name: Upload pytest JSON report
|
||||
if: always()
|
||||
uses: actions/upload-artifact@v4
|
||||
with:
|
||||
name: imp91-multi-mdx-report
|
||||
path: imp91-report.json
|
||||
if-no-files-found: warn
|
||||
|
||||
- name: Update status-board markers (IMP-91 u15)
|
||||
if: always()
|
||||
run: |
|
||||
python scripts/update_status_board.py \
|
||||
--report imp91-report.json \
|
||||
--board docs/architecture/PHASE-Z-PIPELINE-STATUS-BOARD.md
|
||||
|
||||
- name: Upload updated status board
|
||||
if: always()
|
||||
uses: actions/upload-artifact@v4
|
||||
with:
|
||||
name: imp91-status-board
|
||||
path: docs/architecture/PHASE-Z-PIPELINE-STATUS-BOARD.md
|
||||
if-no-files-found: warn
|
||||
+1
-21
@@ -8,24 +8,4 @@ dist/
|
||||
build/
|
||||
.venv/
|
||||
node_modules/
|
||||
data/*
|
||||
# IMP-46 u6 — track only the frame_cache directory marker; cached payloads stay ignored.
|
||||
!data/frame_cache/
|
||||
data/frame_cache/*
|
||||
!data/frame_cache/.gitkeep
|
||||
|
||||
# session workspace (push X — 작업 흐름 trace, 사용자 결정 2026-05-08)
|
||||
forex/
|
||||
|
||||
# 임시/생성물 정리 커밋 제외 (사용자 결정 2026-07-02)
|
||||
/tmp*.json
|
||||
/ad-hoc*.json
|
||||
/D*tmp*.json
|
||||
.orchestrator/
|
||||
chromedriver/
|
||||
*.pkl
|
||||
.claude/settings.local.json
|
||||
|
||||
# 프로젝트 전체 스냅샷 사본 (395MB/130MB — push 제외, 사용자 결정 2026-07-02)
|
||||
Front_test/
|
||||
Front_test_v515/
|
||||
data/
|
||||
|
||||
@@ -1,8 +1,15 @@
|
||||
{
|
||||
"mcpServers": {
|
||||
"figma-desktop": {
|
||||
"type": "http",
|
||||
"url": "http://127.0.0.1:3845/mcp"
|
||||
"Framelink Figma MCP": {
|
||||
"command": "cmd",
|
||||
"args": [
|
||||
"/c",
|
||||
"npx",
|
||||
"-y",
|
||||
"figma-developer-mcp",
|
||||
"--figma-api-key=figd_s23TfSDL0hS97DIialy0R2P6QsoZQHfuGx1l_t-k",
|
||||
"--stdio"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,4 @@
|
||||
# ⚠ DEPRECATED — 이 문서는 2026-03-27 기준 스냅샷입니다
|
||||
|
||||
> **최신 파이프라인 문서는 [`PIPELINE.md`](PIPELINE.md)를 참조하세요.**
|
||||
> 이 문서는 Type A/B 분기, B'/B'' 변형, Stage 1.7/1.8 등 현재 구조를 반영하지 않습니다.
|
||||
> 히스토리 참고용으로만 유지합니다.
|
||||
|
||||
---
|
||||
|
||||
# Design Agent 전체 구조 파악 리포트 (archived)
|
||||
# Design Agent 전체 구조 파악 리포트
|
||||
|
||||
**작성일:** 2026-03-27
|
||||
**목표:** design_agent의 아키텍처, 파이프라인, 코드 구조를 체계적으로 이해
|
||||
|
||||
@@ -12,89 +12,10 @@
|
||||
|
||||
---
|
||||
|
||||
## 위계 + 용어 (Phase Z 정리, 2026-04-28)
|
||||
|
||||
> 매칭 시스템 (V1~V4) 통합 설계 시 정리. 상세는 [`IMPROVEMENT-REDESIGN.md`](IMPROVEMENT-REDESIGN.md) 4 장 참조.
|
||||
>
|
||||
> Phase Z 사전 작업 — Frame Zone 적용 분류 [`docs/architecture/FRAME-INTEGRATION-MAP.md`](docs/architecture/FRAME-INTEGRATION-MAP.md), Frame / Style / Token 인벤토리 [`docs/architecture/PHASE-Z-FRAME-STYLE-INVENTORY.md`](docs/architecture/PHASE-Z-FRAME-STYLE-INVENTORY.md).
|
||||
|
||||
### 슬라이드 위계
|
||||
|
||||
```
|
||||
[ slide ] 1280×720 (전체 슬라이드)
|
||||
│
|
||||
├─ slide-title ← MDX 대목차 제목 (자동 매핑)
|
||||
├─ slide-divider (고정)
|
||||
│
|
||||
├─ slide-body ≈ 1200×590 (콘텐츠 영역 — `templates/blocks/slide-base.html`)
|
||||
│ │
|
||||
│ └─ 레이아웃 (8-preset layout vocabulary; legacy hint = Type A/B/B'/B'')
|
||||
│ │
|
||||
│ └─ Zone (top / bottom_l / bottom_r 등)
|
||||
│ │
|
||||
│ └─ 프레임 (Figma 디자인 단위)
|
||||
│
|
||||
└─ slide-footer ← MDX 대목차 결론 (자동 매핑)
|
||||
```
|
||||
|
||||
### 용어
|
||||
|
||||
| 용어 | 의미 |
|
||||
|---|---|
|
||||
| **슬라이드** | 1280×720 한 장 |
|
||||
| **slide-base** | 모든 슬라이드 공통 그릇 (배경 + 제목 + 구분선 + 결론 pill) — `templates/blocks/slide-base.html` |
|
||||
| **slide-body** | 본문 가용 영역 (≈ 1200×590) |
|
||||
| **레이아웃 (Layout)** | 8-preset layout vocabulary — slide-body 안 zone 분배 형태 (legacy hint = Type A/B/B'/B'') |
|
||||
| **Zone (영역)** | 레이아웃이 결정한 콘텐츠 구역 |
|
||||
| **Internal Region** | Zone 안의 placement / planning unit (Layer A) — content_object 를 배치하는 내부 영역 (SPEC v1 §2) |
|
||||
| **컨테이너 (Container)** | zone 의 px 명세 (코드 레벨) |
|
||||
| **프레임 (Frame)** | Figma 디자인 단위 (= 기존 "블록") — zone 안 |
|
||||
| **Frame Slot** | Frame 안의 declared placement slot (Layer B) — frame contract 가 선언하는 콘텐츠 placement target (SPEC v1 §3) |
|
||||
| **Layer A** | composition planning 의 zone-내 layer — content_object 를 Internal Region 으로 배치하는 단위 (SPEC v1 §1~§2) |
|
||||
| **Layer B** | frame contract 기반 frame-내 layer — 콘텐츠 매핑 대상인 Frame Slot 구조를 선언하는 단위 (SPEC v1 §3) |
|
||||
|
||||
### MDX → 슬라이드 매핑
|
||||
|
||||
| MDX 위치 | 슬라이드 위치 |
|
||||
|---|---|
|
||||
| `# 대목차 제목` | `slide-title` |
|
||||
| 본문 (`##` / `###`) | `slide-body` 안 (레이아웃 + zone + 프레임) |
|
||||
| `# 대목차 결론` | `slide-footer` |
|
||||
| `<details>` 팝업 | 슬라이드 위 별도 레이어 |
|
||||
|
||||
Layer A planning telemetry is active in trace-only mode; render path activation remains the next axis.
|
||||
|
||||
---
|
||||
|
||||
## 아키텍처 — Phase Z 흐름 (5 단계)
|
||||
|
||||
> 상세는 [`IMPROVEMENT-REDESIGN.md`](IMPROVEMENT-REDESIGN.md) 5 장 참조.
|
||||
|
||||
```
|
||||
STAGE 1) MDX 분석 + 레이아웃 매칭 (8-preset layout vocabulary; legacy = Type A/B/B'/B'')
|
||||
STAGE 2) Zone 별 텍스트 1차 배치
|
||||
STAGE 3) Zone 별 프레임 매칭 (V1~V4; B4 frame_selection evidence integration pending)
|
||||
├ 매칭 완벽 → 텍스트 업데이트
|
||||
├ 매칭 어정쩡 → 디자인 참고 재구성
|
||||
└ 매칭 안 됨 → 디자인 컨셉 바탕 재구성
|
||||
STAGE 4) 프레임 검토 + 컨테이너 조정 (5 차 Fallback)
|
||||
STAGE 5) HTML 조립 + 검증 + 출력
|
||||
```
|
||||
|
||||
핵심 원칙 :
|
||||
- **MDX 1 파일 = 슬라이드 1 장** (절대 분할 X)
|
||||
- **텍스트 원문 무손실 보존** (본문 미리보기 + 팝업 원문)
|
||||
- **자유 디자인 금지** (항상 Figma 프레임 DB 참고)
|
||||
- **불일치 시 레이아웃 회귀** (콘텐츠 줄이지 않고 그릇 변경)
|
||||
|
||||
---
|
||||
|
||||
## 아키텍처 (Phase Q 파이프라인 — 기존)
|
||||
## 아키텍처 (Phase Q 파이프라인)
|
||||
|
||||
> Phase P(다후보 렌더링 비교) 실행 결과 20/100점. 업계 조사(Beautiful.ai, Napkin.ai, VASCAR 등) 기반으로 Phase Q에서 재설계.
|
||||
> 핵심 전환: "계산 먼저, AI 판단 나중에, 렌더링은 검증만"
|
||||
>
|
||||
> ⚠️ Phase Z (매칭 시스템 통합) 진행 후 이 섹션의 일부는 새 흐름으로 대체될 예정.
|
||||
|
||||
```
|
||||
[1단계] Kei 실장 (Opus) — AI 사고
|
||||
@@ -144,48 +65,30 @@ reference 꼭지 있음 → sidebar-right
|
||||
나머지 → single-column
|
||||
```
|
||||
|
||||
### 역할 분리 (Phase Z)
|
||||
|
||||
> ⚠️ Phase R' 의 역할 분리 (AI 가 HTML 구조 직접 생성) 는 **Phase Z 에서 폐기**. 아래는 Phase Z 기준.
|
||||
### 역할 분리 (Phase R')
|
||||
|
||||
| 역할 | 담당 | 방식 | 하는 일 | 하지 않는 일 |
|
||||
|------|------|------|---------|------------|
|
||||
| Kei 실장 | Opus (Kei API) | AI | MDX 본문 분석 보조, 최종 검수 | HTML 생성, 레이아웃 계산 |
|
||||
| 레이아웃 결정 | 코드 | 룰 매칭 | MDX 콘텐츠 → 8-preset layout vocabulary 기반 slide/zone topology 선택 (legacy hint = Type A/B/B'/B'') | — |
|
||||
| 컨테이너 계산 | 코드 | 결정론적 | zone 별 px 확정 (`space_allocator`) | — |
|
||||
| 프레임 매칭 | 코드 (V1~V4; B4 frame_selection evidence integration pending) | 결정론적 | zone ↔ Figma 프레임 매칭 | — |
|
||||
| **콘텐츠 매핑** | **코드 + AI** | **하이브리드** | **zone 안 콘텐츠 / 텍스트를 프레임 슬롯에 배치 / 다듬기 / 변형** | **HTML 구조 생성 X** |
|
||||
| HTML 조립 | 코드 (Jinja2) | 결정론적 | `slide-base` + 프레임 + 슬롯 콘텐츠 합쳐서 final.html | AI 호출 X |
|
||||
| 검증 | 코드 + AI | Selenium + Vision | overflow 측정, 시각 품질 평가 | — |
|
||||
| Kei 실장 | Opus (Kei API) | AI | 꼭지 추출, 비중 판단, relation_type + expression_hint 부여, 최종 검수 | HTML 생성, 레이아웃 계산 |
|
||||
| 컨테이너 계산 | 코드 | 결정론적 | Kei 비중 → 역할별 컨테이너 px 확정 | AI 판단 불필요 |
|
||||
| 프리셋 선택 | 코드 | 규칙 | 실장의 role에 따라 프리셋 자동 선택 | AI 판단 불필요 |
|
||||
| **HTML 생성** | **AI (Kei API)** | **AI** | **콘텐츠 전달 의도에 맞는 HTML 구조를 직접 생성. 블록 CSS를 참고하되 구조는 AI가 결정.** | 블록 "선택" 안 함. 슬롯 "채우기" 안 함. |
|
||||
| 검증 | 코드 + AI | Selenium + 비전 모델 | overflow 측정, 시각 품질 평가 | |
|
||||
|
||||
### HTML 생성 원칙 (Phase Z)
|
||||
### HTML 생성 원칙 (Phase R')
|
||||
|
||||
```
|
||||
블록이 구조를 결정 (P=Q=R, 실패)
|
||||
콘텐츠가 구조를 결정 (R', 폐기 — AI 가 HTML 직접 생성하면 회귀 가능성 큼)
|
||||
→ slide-base + 프레임 DB 가 구조를 결정, AI 는 zone 안 콘텐츠만 (Phase Z)
|
||||
블록이 구조를 결정 (P=Q=R, 실패) → 콘텐츠가 구조를 결정 (R', 접근 C)
|
||||
```
|
||||
|
||||
**Phase Z 의 핵심 원칙**:
|
||||
- **HTML 구조** = `slide-base.html` + 코드 (Jinja2) 가 결정 (절대 AI 가 생성 X)
|
||||
- **AI 의 역할** = zone 안 콘텐츠 매핑 / 텍스트 다듬기 / 디자인 변형 (콘텐츠 단위)
|
||||
- **프레임 DB 참고 필수** — 자유 디자인 금지
|
||||
- **MDX 원문 무손실 보존** (본문 preview, 팝업에 원문)
|
||||
|
||||
⚠️ **Phase R' 회귀 방지**: AI 한테 "HTML 구조 만들어줘" 같은 호출 절대 X. AI 호출은 zone 안 콘텐츠 단위로만.
|
||||
- AI가 콘텐츠 전달 의도(expression_hint)에 맞는 HTML 구조를 직접 생성
|
||||
- 기존 38개 블록의 CSS(색상, 폰트, 배경, radius)를 **스타일 참고**로 활용
|
||||
- 블록을 **"선택"하지 않음**. topic 합침/분리, 포함 관계, 핵심 메시지 분리 가능
|
||||
- 디자인 토큰(CSS 변수)으로 품질 제약 + Selenium 측정 + 비전 모델 검증
|
||||
|
||||
---
|
||||
|
||||
## 핵심 프로세스 (구 Phase Q 기준 — Phase Z 에서 대체됨)
|
||||
|
||||
> ⚠️ **아래 흐름은 구 Phase Q 기준의 5 단계 (Kei 실장 → 디자인 팀장 → 텍스트 편집자 → 디자인 실무자 → 재검토). Phase Z 에서 대체됨.**
|
||||
>
|
||||
> **신규 흐름은 위 "아키텍처 — Phase Z 흐름 (5 단계)" 섹션 또는 [IMPROVEMENT-REDESIGN.md](IMPROVEMENT-REDESIGN.md) 5 장 따름.**
|
||||
>
|
||||
> ⚠️ **특히 Phase Z 와 충돌하므로 무시할 것**:
|
||||
> - "페이지 분리" → Phase Z: MDX 1 파일 = 슬라이드 1 장 (절대 분할 X)
|
||||
> - "텍스트 압축 / 요약" → Phase Z: MDX 원문 무손실 보존 (본문 preview, 팝업 원문)
|
||||
> - "AI 5 단계" → Phase Z: AI 호출은 zone 안 콘텐츠 단위로만 (HTML 구조 / 레이아웃 / 프리셋 결정 X)
|
||||
## 핵심 프로세스
|
||||
|
||||
```
|
||||
사용자 콘텐츠 입력 (텍스트/MDX 붙여넣기 또는 파일 업로드)
|
||||
|
||||
@@ -1,115 +0,0 @@
|
||||
# Dependencies
|
||||
**/node_modules
|
||||
.pnpm-store/
|
||||
|
||||
# Build outputs
|
||||
dist/
|
||||
build/
|
||||
*.dist
|
||||
|
||||
# Environment variables
|
||||
.env
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
# IDE and editor files
|
||||
.vscode/
|
||||
.idea/
|
||||
*.swp
|
||||
*.swo
|
||||
*~
|
||||
|
||||
# OS generated files
|
||||
.DS_Store
|
||||
.DS_Store?
|
||||
._*
|
||||
.Spotlight-V100
|
||||
.Trashes
|
||||
ehthumbs.db
|
||||
Thumbs.db
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage/
|
||||
*.lcov
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Dependency directories
|
||||
jspm_packages/
|
||||
|
||||
# TypeScript cache
|
||||
*.tsbuildinfo
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Microbundle cache
|
||||
.rpt2_cache/
|
||||
.rts2_cache_cjs/
|
||||
.rts2_cache_es/
|
||||
.rts2_cache_umd/
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# parcel-bundler cache (https://parceljs.org/)
|
||||
.cache
|
||||
.parcel-cache
|
||||
|
||||
# Next.js build output
|
||||
.next
|
||||
|
||||
# Nuxt.js build / generate output
|
||||
.nuxt
|
||||
|
||||
# Gatsby files
|
||||
.cache/
|
||||
|
||||
# Storybook build outputs
|
||||
.out
|
||||
.storybook-out
|
||||
|
||||
# Temporary folders
|
||||
tmp/
|
||||
temp/
|
||||
|
||||
# Database
|
||||
*.db
|
||||
*.sqlite
|
||||
*.sqlite3
|
||||
|
||||
# Webdev artifacts (checkpoint zips, migrations, etc.)
|
||||
.webdev/
|
||||
|
||||
# Manus version file (auto-generated, not part of source)
|
||||
client/public/__manus__/version.json
|
||||
|
||||
# Manus dev tooling (browser console / network logs)
|
||||
.manus-logs/
|
||||
@@ -1,5 +0,0 @@
|
||||
dist
|
||||
node_modules
|
||||
.git
|
||||
*.min.js
|
||||
*.min.css
|
||||
@@ -1,15 +0,0 @@
|
||||
{
|
||||
"semi": true,
|
||||
"trailingComma": "es5",
|
||||
"singleQuote": false,
|
||||
"printWidth": 80,
|
||||
"tabWidth": 2,
|
||||
"useTabs": false,
|
||||
"bracketSpacing": true,
|
||||
"bracketSameLine": false,
|
||||
"arrowParens": "avoid",
|
||||
"endOfLine": "lf",
|
||||
"quoteProps": "as-needed",
|
||||
"jsxSingleQuote": false,
|
||||
"proseWrap": "preserve"
|
||||
}
|
||||
@@ -1,269 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>8 Body Layouts for slide-base.html</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500;700;900&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body { font-family: 'Noto Sans KR', sans-serif; background: #e8ecf0; padding: 20px; }
|
||||
.preview-section { margin-bottom: 50px; border: 2px solid #cbd5e1; padding: 20px; background: #f1f5f9; }
|
||||
.layout-title { font-size: 18px; font-weight: 900; margin-bottom: 10px; color: #475569; }
|
||||
|
||||
/* ── slide-base.html의 slide-body 제약 사항 ── */
|
||||
.slide-body-mock {
|
||||
width: 1200px; /* calc(1280 - 80) */
|
||||
height: 590px;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
/* 실제 템플릿의 slide-body는 부모(slide)에 대해 absolute이지만,
|
||||
여기서는 레이아웃 자체를 확인하기 위해 고정 크기로 둡니다. */
|
||||
}
|
||||
|
||||
/* ── 하드코딩된 스타일 가이드 ── */
|
||||
.h2-title { font-size: 38px; font-weight: 900; line-height: 1.2; color: #0f172a; }
|
||||
.p-content { font-size: 22px; font-weight: 500; line-height: 1.6; color: #334155; }
|
||||
.card-title { font-size: 24px; font-weight: 900; color: #1e293b; }
|
||||
.card-p { font-size: 16px; font-weight: 700; color: #64748b; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 01. Focus Split (Single) -->
|
||||
<div class="preview-section">
|
||||
<div class="layout-title">01. Focus Split (65:35 Ratio)</div>
|
||||
<div class="slide-body-mock">
|
||||
<div class="w-full h-full flex items-center px-12 gap-16">
|
||||
<div class="flex-[6.5] space-y-6">
|
||||
<div class="w-16 h-2 bg-emerald-600 rounded-full"></div>
|
||||
<h2 class="h2-title">DX 역량 내재화 및 추진 체계 고도화</h2>
|
||||
<p class="p-content">
|
||||
단순 기술 도입을 넘어 조직 전반의 데이터 리터러시를 확보하고, 전담 조직 구성을 통해 실행력을 극대화해야 합니다.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex-[3.5] h-[450px] bg-slate-50 rounded-[40px] border-2 border-slate-100 flex flex-col items-center justify-center p-10 text-center relative shadow-inner">
|
||||
<div class="w-24 h-24 bg-white rounded-3xl shadow-xl flex items-center justify-center mb-8 border border-slate-50">
|
||||
<div class="w-10 h-10 bg-emerald-600 rounded-xl"></div>
|
||||
</div>
|
||||
<h3 class="card-title mb-4">Strategic Goal</h3>
|
||||
<p class="card-p">데이터 기반 의사결정 체계 구축을 통한 효율성 40% 향상</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 02. Quadrant Grid (2x2) -->
|
||||
<div class="preview-section">
|
||||
<div class="layout-title">02. Quadrant Grid (Equal 4 Sectors)</div>
|
||||
<div class="slide-body-mock">
|
||||
<div class="w-full h-full grid grid-cols-2 grid-rows-2 gap-8 p-12">
|
||||
<div class="bg-slate-50 rounded-[32px] border-2 border-slate-100 p-8 flex flex-col justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="w-10 h-10 flex items-center justify-center rounded-full bg-slate-900 text-white font-black text-sm">01</span>
|
||||
<h3 class="card-title">Strategy</h3>
|
||||
</div>
|
||||
<p class="card-p pl-14">전사적 DX 비전 수립 및 세부 로드맵 도출</p>
|
||||
<div class="pl-14"><div class="w-full h-2 bg-emerald-600 rounded-full"></div></div>
|
||||
</div>
|
||||
<div class="bg-slate-50 rounded-[32px] border-2 border-slate-100 p-8 flex flex-col justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="w-10 h-10 flex items-center justify-center rounded-full bg-slate-900 text-white font-black text-sm">02</span>
|
||||
<h3 class="card-title">Data</h3>
|
||||
</div>
|
||||
<p class="card-p pl-14">통합 데이터 댐 구축 및 거버넌스 체계 강화</p>
|
||||
<div class="pl-14"><div class="w-full h-2 bg-emerald-200 rounded-full"></div></div>
|
||||
</div>
|
||||
<div class="bg-slate-50 rounded-[32px] border-2 border-slate-100 p-8 flex flex-col justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="w-10 h-10 flex items-center justify-center rounded-full bg-slate-900 text-white font-black text-sm">03</span>
|
||||
<h3 class="card-title">AI Tech</h3>
|
||||
</div>
|
||||
<p class="card-p pl-14">LLM 기반 비즈니스 자동화 모델 현장 적용</p>
|
||||
<div class="pl-14"><div class="w-full h-2 bg-emerald-200 rounded-full"></div></div>
|
||||
</div>
|
||||
<div class="bg-slate-50 rounded-[32px] border-2 border-slate-100 p-8 flex flex-col justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="w-10 h-10 flex items-center justify-center rounded-full bg-slate-900 text-white font-black text-sm">04</span>
|
||||
<h3 class="card-title">Agile</h3>
|
||||
</div>
|
||||
<p class="card-p pl-14">도메인 전문가 육성 및 애자일 문화 확산</p>
|
||||
<div class="pl-14"><div class="w-full h-2 bg-emerald-200 rounded-full"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 03. Three Column (1:1:1) -->
|
||||
<div class="preview-section">
|
||||
<div class="layout-title">03. Triple Pillars (Horizontal Comparison)</div>
|
||||
<div class="slide-body-mock">
|
||||
<div class="w-full h-full flex gap-6 p-10">
|
||||
<div class="flex-1 bg-white border-t-8 border-emerald-600 shadow-lg rounded-b-3xl p-8 flex flex-col">
|
||||
<h3 class="card-title mb-6">Phase 01</h3>
|
||||
<p class="card-p mb-auto">인프라 현대화 및 클라우드 네이티브 전환</p>
|
||||
<div class="mt-8 text-emerald-600 font-black text-sm uppercase tracking-tighter">Foundation</div>
|
||||
</div>
|
||||
<div class="flex-1 bg-white border-t-8 border-blue-600 shadow-lg rounded-b-3xl p-8 flex flex-col">
|
||||
<h3 class="card-title mb-6">Phase 02</h3>
|
||||
<p class="card-p mb-auto">데이터 통합 및 AI 서비스 파일럿 실행</p>
|
||||
<div class="mt-8 text-blue-600 font-black text-sm uppercase tracking-tighter">Integration</div>
|
||||
</div>
|
||||
<div class="flex-1 bg-white border-t-8 border-indigo-600 shadow-lg rounded-b-3xl p-8 flex flex-col">
|
||||
<h3 class="card-title mb-6">Phase 03</h3>
|
||||
<p class="card-p mb-auto">전사 확산 및 지속 가능한 AI 운영(MLOps)</p>
|
||||
<div class="mt-8 text-indigo-600 font-black text-sm uppercase tracking-tighter">Optimization</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 04. Vertical List (Left Icon + Text) -->
|
||||
<div class="preview-section">
|
||||
<div class="layout-title">04. Vertical Stack (Step-by-step)</div>
|
||||
<div class="slide-body-mock">
|
||||
<div class="w-full h-full flex flex-col justify-center px-24 space-y-8">
|
||||
<div class="flex items-center gap-10 group">
|
||||
<div class="w-20 h-20 bg-emerald-50 rounded-2xl flex items-center justify-center text-emerald-600 font-black text-2xl border border-emerald-100 shadow-sm">01</div>
|
||||
<div class="space-y-1">
|
||||
<h3 class="card-title">데이터 기반 의사결정 문화 정착</h3>
|
||||
<p class="card-p">정량적 데이터 분석 결과에 근거한 객관적 판단 프로세스 구축</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full h-px bg-slate-100 ml-30"></div>
|
||||
<div class="flex items-center gap-10 group">
|
||||
<div class="w-20 h-20 bg-blue-50 rounded-2xl flex items-center justify-center text-blue-600 font-black text-2xl border border-blue-100 shadow-sm">02</div>
|
||||
<div class="space-y-1">
|
||||
<h3 class="card-title">AI 기술 리터러시 전사 확산</h3>
|
||||
<p class="card-p">생성형 AI 등 최신 기술 활용 역량 강화를 위한 단계별 교육 지원</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full h-px bg-slate-100 ml-30"></div>
|
||||
<div class="flex items-center gap-10 group">
|
||||
<div class="w-20 h-20 bg-indigo-50 rounded-2xl flex items-center justify-center text-indigo-600 font-black text-2xl border border-indigo-100 shadow-sm">03</div>
|
||||
<div class="space-y-1">
|
||||
<h3 class="card-title">디지털 기술을 통한 업무 혁신</h3>
|
||||
<p class="card-p">단순 반복 업무의 자동화를 통해 고부가가치 창의적 업무 집중 환경 조성</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 05. Key Number (Center Emphasis) -->
|
||||
<div class="preview-section">
|
||||
<div class="layout-title">05. Key Metric Emphasis</div>
|
||||
<div class="slide-body-mock">
|
||||
<div class="w-full h-full flex items-center p-12 gap-12">
|
||||
<div class="flex-1 space-y-6">
|
||||
<h2 class="h2-title">DX 추진 성과 가시화</h2>
|
||||
<p class="p-content">지난 1년간의 디지털 전환 노력을 통해 달성한 핵심 지표입니다.</p>
|
||||
</div>
|
||||
<div class="flex-1 grid grid-cols-2 gap-6">
|
||||
<div class="bg-white p-8 rounded-[30px] shadow-xl border border-slate-50 text-center">
|
||||
<div class="text-[48px] font-black text-emerald-600 leading-none mb-2">35%</div>
|
||||
<div class="card-p">비용 절감 효과</div>
|
||||
</div>
|
||||
<div class="bg-white p-8 rounded-[30px] shadow-xl border border-slate-50 text-center">
|
||||
<div class="text-[48px] font-black text-blue-600 leading-none mb-2">2.4x</div>
|
||||
<div class="card-p">업무 속도 향상</div>
|
||||
</div>
|
||||
<div class="bg-white p-8 rounded-[30px] shadow-xl border border-slate-50 text-center">
|
||||
<div class="text-[48px] font-black text-indigo-600 leading-none mb-2">92%</div>
|
||||
<div class="card-p">직원 만족도</div>
|
||||
</div>
|
||||
<div class="bg-white p-8 rounded-[30px] shadow-xl border border-slate-50 text-center">
|
||||
<div class="text-[48px] font-black text-rose-600 leading-none mb-2">0건</div>
|
||||
<div class="card-p">보안 사고 발생</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 06. Comparison (Before & After) -->
|
||||
<div class="preview-section">
|
||||
<div class="layout-title">06. Comparison Table (As-Is vs To-Be)</div>
|
||||
<div class="slide-body-mock">
|
||||
<div class="w-full h-full flex flex-col p-12">
|
||||
<div class="flex gap-6 mb-6">
|
||||
<div class="flex-1 py-4 bg-slate-900 text-white rounded-2xl text-center font-black text-xl">AS-IS</div>
|
||||
<div class="flex-1 py-4 bg-emerald-600 text-white rounded-2xl text-center font-black text-xl">TO-BE</div>
|
||||
</div>
|
||||
<div class="flex-1 space-y-4">
|
||||
<div class="flex gap-6">
|
||||
<div class="flex-1 p-6 bg-slate-100 rounded-2xl card-p">수작업 기반의 비정형 데이터 관리 및 보고</div>
|
||||
<div class="flex-1 p-6 bg-emerald-50 rounded-2xl card-title" style="font-size: 18px;">실시간 데이터 대시보드 및 자동 리포팅</div>
|
||||
</div>
|
||||
<div class="flex gap-6">
|
||||
<div class="flex-1 p-6 bg-slate-100 rounded-2xl card-p">파편화된 시스템으로 인한 업무 단절 발생</div>
|
||||
<div class="flex-1 p-6 bg-emerald-50 rounded-2xl card-title" style="font-size: 18px;">클라우드 기반의 통합 협업 플랫폼 운영</div>
|
||||
</div>
|
||||
<div class="flex gap-6">
|
||||
<div class="flex-1 p-6 bg-slate-100 rounded-2xl card-p">단기적 성과 위주의 산발적 과제 추진</div>
|
||||
<div class="flex-1 p-6 bg-emerald-50 rounded-2xl card-title" style="font-size: 18px;">중장기 로드맵 기반의 체계적 가치 창출</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 07. Top Hero (Top Text + Bottom Cards) -->
|
||||
<div class="preview-section">
|
||||
<div class="layout-title">07. Hero Statement (Top Focus + Details)</div>
|
||||
<div class="slide-body-mock">
|
||||
<div class="w-full h-full flex flex-col p-12">
|
||||
<div class="flex-1 flex flex-col justify-center items-center text-center space-y-4 mb-8">
|
||||
<h2 class="h2-title" style="font-size: 42px;">미래 경쟁력 확보를 위한 AI 혁신</h2>
|
||||
<div class="w-20 h-1.5 bg-indigo-600 rounded-full"></div>
|
||||
</div>
|
||||
<div class="flex-[1.5] grid grid-cols-3 gap-8">
|
||||
<div class="border-2 border-slate-100 rounded-[30px] p-8 space-y-4">
|
||||
<div class="text-indigo-600 font-black text-lg">Infrastructure</div>
|
||||
<p class="card-p">GPU 서버 확보 및 데이터 레이크 고도화</p>
|
||||
</div>
|
||||
<div class="border-2 border-slate-100 rounded-[30px] p-8 space-y-4">
|
||||
<div class="text-indigo-600 font-black text-lg">Application</div>
|
||||
<p class="card-p">워크플로우 내 생성형 AI 에이전트 통합</p>
|
||||
</div>
|
||||
<div class="border-2 border-slate-100 rounded-[30px] p-8 space-y-4">
|
||||
<div class="text-indigo-600 font-black text-lg">Capability</div>
|
||||
<p class="card-p">AI 특화 인재 채용 및 리터러시 교육 프로그램</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 08. Asymmetric Content (Left Detail + Right Small List) -->
|
||||
<div class="preview-section">
|
||||
<div class="layout-title">08. Asymmetric (Detailed View)</div>
|
||||
<div class="slide-body-mock">
|
||||
<div class="w-full h-full flex p-12 gap-16">
|
||||
<div class="flex-[6] space-y-8">
|
||||
<div class="space-y-4">
|
||||
<span class="px-4 py-1.5 bg-slate-900 text-white text-[12px] font-black rounded-lg uppercase">Core Highlight</span>
|
||||
<h2 class="h2-title">지능형 운영 체계로의 전환</h2>
|
||||
</div>
|
||||
<p class="p-content">기존의 수동적인 운영 방식에서 벗어나, AI가 실시간으로 이상 징후를 감지하고 최적의 대응 방안을 제안하는 능동형 체계로 진화합니다.</p>
|
||||
</div>
|
||||
<div class="flex-[4] space-y-4">
|
||||
<div class="p-6 bg-slate-50 border border-slate-100 rounded-[24px]">
|
||||
<h4 class="font-black text-slate-800 mb-2">Real-time Analysis</h4>
|
||||
<p class="text-sm text-slate-500 font-bold">전 공정 데이터의 초단위 수집 및 분석</p>
|
||||
</div>
|
||||
<div class="p-6 bg-slate-50 border border-slate-100 rounded-[24px]">
|
||||
<h4 class="font-black text-slate-800 mb-2">Predictive Maint.</h4>
|
||||
<p class="text-sm text-slate-500 font-bold">장애 발생 전 사전 알림 및 조치 가이드</p>
|
||||
</div>
|
||||
<div class="p-6 bg-slate-50 border border-slate-100 rounded-[24px]">
|
||||
<h4 class="font-black text-slate-800 mb-2">Auto Optimization</h4>
|
||||
<p class="text-sm text-slate-500 font-bold">수요 예측 기반 생산량 자동 최적화</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,33 +0,0 @@
|
||||
# Design Agent Frontend MVP Implementation Plan
|
||||
|
||||
이 문서는 프론트엔드 MVP 개발 계획 및 Phase Z 시뮬레이션 구현 로드맵입니다.
|
||||
|
||||
## 📅 로드맵
|
||||
|
||||
### Phase 1: 동적 분석 시뮬레이션 (완료)
|
||||
- [x] MDX 파일 텍스트 분석 로직 구현 (`STAGE 1`)
|
||||
- [x] 섹션 개수에 따른 자동 레이아웃 및 존 매핑 로직 구현 (`STAGE 2`)
|
||||
- [x] 분석 결과에 따른 캔버스 동적 렌더링 연결
|
||||
|
||||
### Phase 2: 사용자 인터랙션 강화 (진행 중)
|
||||
- [ ] 레이아웃 프리셋 변경 시 캔버스 즉시 갱신
|
||||
- [ ] 프레임 선택 시 캔버스 내 카드 스타일 변경 시뮬레이션
|
||||
- [ ] Zone/Region 선택 상태에 따른 시각적 피드백 정교화
|
||||
|
||||
### Phase 3: 콘텐츠 상세화 및 팝업 시뮬레이션
|
||||
- [ ] MDX 원문 무손실 보존을 위한 팝업 UI 구현
|
||||
- [ ] `display_strategy` (Preview vs Full) 시뮬레이션 로직 추가
|
||||
- [ ] 최종 결과물 데이터 구조(JSON) 내보내기 기능
|
||||
|
||||
## 📐 핵심 설계 원칙 (Phase Z 준수)
|
||||
|
||||
1. **Deterministic Mapping:** 동일한 MDX 입력에 대해 항상 동일한 초기 레이아웃과 프레임이 제안되어야 함.
|
||||
2. **User Override Priority:** 사용자의 수동 선택은 시스템 추천보다 우선하며, 명시적으로 `overrides` 객체에 저장됨.
|
||||
3. **No-Loss Principle:** 슬라이드 캔버스 공간 부족으로 생략된 텍스트는 반드시 팝업을 통해 전체 확인이 가능해야 함.
|
||||
|
||||
## 🔗 STAGE별 연결 지점
|
||||
|
||||
- **STAGE 1 & 2:** `designAgentApi.ts`의 `parseMdxFile`, `generateSlidePlan`
|
||||
- **STAGE 3:** `FramePanel.tsx`의 `candidates` 매핑
|
||||
- **STAGE 4:** `Home.tsx`의 `handleLayoutSelect`, `handleFrameSelect`
|
||||
- **STAGE 5:** `Home.tsx`의 `Finalize Slide` 버튼 핸들러
|
||||
@@ -1,54 +0,0 @@
|
||||
# Design Agent Frontend MVP - Phase Z Simulation
|
||||
|
||||
이 문서는 `design-agent` 프론트엔드 프로젝트가 백엔드 파이프라인(Phase Z)의 각 단계와 어떻게 연결되는지 설명합니다.
|
||||
|
||||
---
|
||||
|
||||
## 📋 STAGE-to-CODE 매핑 가이드
|
||||
|
||||
본 MVP는 백엔드 없이도 파이프라인의 흐름을 시뮬레이션할 수 있도록 설계되었습니다.
|
||||
|
||||
### STAGE 1: MDX 분석 (Normalization)
|
||||
- **백엔드 로직:** `section_parser.py` (H2, H3 태그 및 텍스트 블록 추출)
|
||||
- **프론트엔드 시뮬레이션:** `designAgentApi.ts` 내 `parseMdxFile()`
|
||||
- 파일의 텍스트를 읽어 실제 `#`, `##`, `###` 패턴을 분석합니다.
|
||||
- 결과를 `NormalizedContent` 객체로 변환합니다.
|
||||
|
||||
### STAGE 2: 레이아웃 매칭 (Zone Mapping)
|
||||
- **백엔드 로직:** `layout_selector.py` (섹션 개수/성격에 따른 8개 프리셋 선택)
|
||||
- **프론트엔드 시뮬레이션:** `designAgentApi.ts` 내 `generateSlidePlan()`
|
||||
- 분석된 섹션 개수에 따라 `single`, `horizontal-2`, `grid-2x2` 등을 자동으로 결정합니다.
|
||||
- 각 섹션을 1280x720 캔버스의 특정 `Zone`에 할당합니다.
|
||||
|
||||
### STAGE 3: 프레임 매칭 (V1~V4)
|
||||
- **백엔드 로직:** `block_reference.py` (Figma 프레임 DB와 콘텐츠 매칭)
|
||||
- **프론트엔드 시뮬레이션:** `mockDesignAgentData.ts` 및 `FramePanel.tsx`
|
||||
- 각 Zone(또는 Region)에 대해 V4 매칭 점수가 높은 Top-3 프레임을 제안합니다.
|
||||
|
||||
### STAGE 4: 사용자 조정 (Override)
|
||||
- **백엔드 로직:** `pipeline.py` (사용자 수동 선택값 반영)
|
||||
- **프론트엔드 구현:** `Home.tsx` 및 `slidePlanUtils.ts`
|
||||
- 사용자가 선택한 Layout이나 Frame 정보를 `UserSelection.overrides`에 저장합니다.
|
||||
- `applyLayout`, `applyFrame` 함수가 이 상태 변화를 관리합니다.
|
||||
|
||||
### STAGE 5: 최종 조립 및 검증
|
||||
- **백엔드 로직:** `block_assembler.py` (Jinja2 템플릿 조립 및 Selenium 검증)
|
||||
- **프론트엔드 구현:** 하단 액션 바의 **Finalize Slide** 버튼
|
||||
- 현재 구성된 플랜 데이터를 서버로 전송할 준비가 된 지점입니다.
|
||||
|
||||
---
|
||||
|
||||
## 🛠️ 핵심 파일 구조
|
||||
|
||||
- `client/src/services/designAgentApi.ts`: 파이프라인 단계별 로직 시뮬레이션 핵심.
|
||||
- `client/src/types/designAgent.ts`: Phase Z 위계(Slide > Zone > Region > Frame) 정의.
|
||||
- `client/src/components/SlideCanvas.tsx`: 16:9 비율 및 레이아웃 프리셋 시각화.
|
||||
- `client/src/utils/slidePlanUtils.ts`: 사용자 선택 및 데이터 가공 유틸리티.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 향후 통합 계획
|
||||
|
||||
1. **API 교체:** `designAgentApi.ts`의 시뮬레이션 함수들을 실제 백엔드 엔드포인트 호출로 교체합니다.
|
||||
2. **실시간 프리뷰:** 백엔드에서 생성된 `final.html`을 캔버스 내 `iframe` 등으로 직접 렌더링하도록 확장합니다.
|
||||
3. **팝업 연동:** `display_strategy`에 따른 상세 원문 보기 기능을 실제 MDX 원문과 연결합니다.
|
||||
@@ -1,44 +0,0 @@
|
||||
# Design Agent Frontend
|
||||
|
||||
React + Vite + TypeScript frontend.
|
||||
|
||||
## 위치
|
||||
|
||||
- `Front/` — 이 폴더
|
||||
- 원본 작업 위치 = `D:\ad-hoc\kei\design_agent_front\design-agent\` (로컬 dev)
|
||||
|
||||
## 실행
|
||||
|
||||
```
|
||||
cd Front/
|
||||
pnpm install
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
http://localhost:3000 에서 확인. `DESIGN_AGENT_ROOT` env 로 backend 경로 지정 가능.
|
||||
|
||||
## 구조
|
||||
|
||||
```
|
||||
Front/
|
||||
├── client/ React frontend (Vite root)
|
||||
│ └── src/
|
||||
│ ├── pages/
|
||||
│ ├── components/
|
||||
│ ├── services/
|
||||
│ └── ...
|
||||
├── server/ production express
|
||||
├── vite.config.ts dev plugin + backend 연결
|
||||
└── ...
|
||||
```
|
||||
|
||||
## Backend 연결 (vite.config.ts)
|
||||
|
||||
Vite dev plugin 이 다음 endpoint 등록 :
|
||||
|
||||
| Endpoint | 동작 |
|
||||
|---|---|
|
||||
| `POST /api/run` | MDX + overrides → backend pipeline spawn → run_id 반환 |
|
||||
| `GET /api/sample-mdx?mdx=...` | sample MDX serve |
|
||||
| `GET /frame-preview/{n}` | frame thumbnail |
|
||||
| `GET /data/runs/{run_id}/{path}` | pipeline 산출물 serve |
|
||||
@@ -1,15 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
|
||||
<title>Design Agent - MDX Slide Planner</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,821 +0,0 @@
|
||||
/**
|
||||
* Manus Debug Collector (agent-friendly)
|
||||
*
|
||||
* Captures:
|
||||
* 1) Console logs
|
||||
* 2) Network requests (fetch + XHR)
|
||||
* 3) User interactions (semantic uiEvents: click/type/submit/nav/scroll/etc.)
|
||||
*
|
||||
* Data is periodically sent to /__manus__/logs
|
||||
* Note: uiEvents are mirrored to sessionEvents for sessionReplay.log
|
||||
*/
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
// Prevent double initialization
|
||||
if (window.__MANUS_DEBUG_COLLECTOR__) return;
|
||||
|
||||
// ==========================================================================
|
||||
// Configuration
|
||||
// ==========================================================================
|
||||
const CONFIG = {
|
||||
reportEndpoint: "/__manus__/logs",
|
||||
bufferSize: {
|
||||
console: 500,
|
||||
network: 200,
|
||||
// semantic, agent-friendly UI events
|
||||
ui: 500,
|
||||
},
|
||||
reportInterval: 2000,
|
||||
sensitiveFields: [
|
||||
"password",
|
||||
"token",
|
||||
"secret",
|
||||
"key",
|
||||
"authorization",
|
||||
"cookie",
|
||||
"session",
|
||||
],
|
||||
maxBodyLength: 10240,
|
||||
// UI event logging privacy policy:
|
||||
// - inputs matching sensitiveFields or type=password are masked by default
|
||||
// - non-sensitive inputs log up to 200 chars
|
||||
uiInputMaxLen: 200,
|
||||
uiTextMaxLen: 80,
|
||||
// Scroll throttling: minimum ms between scroll events
|
||||
scrollThrottleMs: 500,
|
||||
};
|
||||
|
||||
// ==========================================================================
|
||||
// Storage
|
||||
// ==========================================================================
|
||||
const store = {
|
||||
consoleLogs: [],
|
||||
networkRequests: [],
|
||||
uiEvents: [],
|
||||
lastReportTime: Date.now(),
|
||||
lastScrollTime: 0,
|
||||
};
|
||||
|
||||
// ==========================================================================
|
||||
// Utility Functions
|
||||
// ==========================================================================
|
||||
|
||||
function sanitizeValue(value, depth) {
|
||||
if (depth === void 0) depth = 0;
|
||||
if (depth > 5) return "[Max Depth]";
|
||||
if (value === null) return null;
|
||||
if (value === undefined) return undefined;
|
||||
|
||||
if (typeof value === "string") {
|
||||
return value.length > 1000 ? value.slice(0, 1000) + "...[truncated]" : value;
|
||||
}
|
||||
|
||||
if (typeof value !== "object") return value;
|
||||
|
||||
if (Array.isArray(value)) {
|
||||
return value.slice(0, 100).map(function (v) {
|
||||
return sanitizeValue(v, depth + 1);
|
||||
});
|
||||
}
|
||||
|
||||
var sanitized = {};
|
||||
for (var k in value) {
|
||||
if (Object.prototype.hasOwnProperty.call(value, k)) {
|
||||
var isSensitive = CONFIG.sensitiveFields.some(function (f) {
|
||||
return k.toLowerCase().indexOf(f) !== -1;
|
||||
});
|
||||
if (isSensitive) {
|
||||
sanitized[k] = "[REDACTED]";
|
||||
} else {
|
||||
sanitized[k] = sanitizeValue(value[k], depth + 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
return sanitized;
|
||||
}
|
||||
|
||||
function formatArg(arg) {
|
||||
try {
|
||||
if (arg instanceof Error) {
|
||||
return { type: "Error", message: arg.message, stack: arg.stack };
|
||||
}
|
||||
if (typeof arg === "object") return sanitizeValue(arg);
|
||||
return String(arg);
|
||||
} catch (e) {
|
||||
return "[Unserializable]";
|
||||
}
|
||||
}
|
||||
|
||||
function formatArgs(args) {
|
||||
var result = [];
|
||||
for (var i = 0; i < args.length; i++) result.push(formatArg(args[i]));
|
||||
return result;
|
||||
}
|
||||
|
||||
function pruneBuffer(buffer, maxSize) {
|
||||
if (buffer.length > maxSize) buffer.splice(0, buffer.length - maxSize);
|
||||
}
|
||||
|
||||
function tryParseJson(str) {
|
||||
if (typeof str !== "string") return str;
|
||||
try {
|
||||
return JSON.parse(str);
|
||||
} catch (e) {
|
||||
return str;
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// Semantic UI Event Logging (agent-friendly)
|
||||
// ==========================================================================
|
||||
|
||||
function shouldIgnoreTarget(target) {
|
||||
try {
|
||||
if (!target || !(target instanceof Element)) return false;
|
||||
return !!target.closest(".manus-no-record");
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function compactText(s, maxLen) {
|
||||
try {
|
||||
var t = (s || "").trim().replace(/\s+/g, " ");
|
||||
if (!t) return "";
|
||||
return t.length > maxLen ? t.slice(0, maxLen) + "…" : t;
|
||||
} catch (e) {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
function elText(el) {
|
||||
try {
|
||||
var t = el.innerText || el.textContent || "";
|
||||
return compactText(t, CONFIG.uiTextMaxLen);
|
||||
} catch (e) {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
function describeElement(el) {
|
||||
if (!el || !(el instanceof Element)) return null;
|
||||
|
||||
var getAttr = function (name) {
|
||||
return el.getAttribute(name);
|
||||
};
|
||||
|
||||
var tag = el.tagName ? el.tagName.toLowerCase() : null;
|
||||
var id = el.id || null;
|
||||
var name = getAttr("name") || null;
|
||||
var role = getAttr("role") || null;
|
||||
var ariaLabel = getAttr("aria-label") || null;
|
||||
|
||||
var dataLoc = getAttr("data-loc") || null;
|
||||
var testId =
|
||||
getAttr("data-testid") ||
|
||||
getAttr("data-test-id") ||
|
||||
getAttr("data-test") ||
|
||||
null;
|
||||
|
||||
var type = tag === "input" ? (getAttr("type") || "text") : null;
|
||||
var href = tag === "a" ? getAttr("href") || null : null;
|
||||
|
||||
// a small, stable hint for agents (avoid building full CSS paths)
|
||||
var selectorHint = null;
|
||||
if (testId) selectorHint = '[data-testid="' + testId + '"]';
|
||||
else if (dataLoc) selectorHint = '[data-loc="' + dataLoc + '"]';
|
||||
else if (id) selectorHint = "#" + id;
|
||||
else selectorHint = tag || "unknown";
|
||||
|
||||
return {
|
||||
tag: tag,
|
||||
id: id,
|
||||
name: name,
|
||||
type: type,
|
||||
role: role,
|
||||
ariaLabel: ariaLabel,
|
||||
testId: testId,
|
||||
dataLoc: dataLoc,
|
||||
href: href,
|
||||
text: elText(el),
|
||||
selectorHint: selectorHint,
|
||||
};
|
||||
}
|
||||
|
||||
function isSensitiveField(el) {
|
||||
if (!el || !(el instanceof Element)) return false;
|
||||
var tag = el.tagName ? el.tagName.toLowerCase() : "";
|
||||
if (tag !== "input" && tag !== "textarea") return false;
|
||||
|
||||
var type = (el.getAttribute("type") || "").toLowerCase();
|
||||
if (type === "password") return true;
|
||||
|
||||
var name = (el.getAttribute("name") || "").toLowerCase();
|
||||
var id = (el.id || "").toLowerCase();
|
||||
|
||||
return CONFIG.sensitiveFields.some(function (f) {
|
||||
return name.indexOf(f) !== -1 || id.indexOf(f) !== -1;
|
||||
});
|
||||
}
|
||||
|
||||
function getInputValueSafe(el) {
|
||||
if (!el || !(el instanceof Element)) return null;
|
||||
var tag = el.tagName ? el.tagName.toLowerCase() : "";
|
||||
if (tag !== "input" && tag !== "textarea" && tag !== "select") return null;
|
||||
|
||||
var v = "";
|
||||
try {
|
||||
v = el.value != null ? String(el.value) : "";
|
||||
} catch (e) {
|
||||
v = "";
|
||||
}
|
||||
|
||||
if (isSensitiveField(el)) return { masked: true, length: v.length };
|
||||
|
||||
if (v.length > CONFIG.uiInputMaxLen) v = v.slice(0, CONFIG.uiInputMaxLen) + "…";
|
||||
return v;
|
||||
}
|
||||
|
||||
function logUiEvent(kind, payload) {
|
||||
var entry = {
|
||||
timestamp: Date.now(),
|
||||
kind: kind,
|
||||
url: location.href,
|
||||
viewport: { width: window.innerWidth, height: window.innerHeight },
|
||||
payload: sanitizeValue(payload),
|
||||
};
|
||||
store.uiEvents.push(entry);
|
||||
pruneBuffer(store.uiEvents, CONFIG.bufferSize.ui);
|
||||
}
|
||||
|
||||
function installUiEventListeners() {
|
||||
// Clicks
|
||||
document.addEventListener(
|
||||
"click",
|
||||
function (e) {
|
||||
var t = e.target;
|
||||
if (shouldIgnoreTarget(t)) return;
|
||||
logUiEvent("click", {
|
||||
target: describeElement(t),
|
||||
x: e.clientX,
|
||||
y: e.clientY,
|
||||
});
|
||||
},
|
||||
true
|
||||
);
|
||||
|
||||
// Typing "commit" events
|
||||
document.addEventListener(
|
||||
"change",
|
||||
function (e) {
|
||||
var t = e.target;
|
||||
if (shouldIgnoreTarget(t)) return;
|
||||
logUiEvent("change", {
|
||||
target: describeElement(t),
|
||||
value: getInputValueSafe(t),
|
||||
});
|
||||
},
|
||||
true
|
||||
);
|
||||
|
||||
document.addEventListener(
|
||||
"focusin",
|
||||
function (e) {
|
||||
var t = e.target;
|
||||
if (shouldIgnoreTarget(t)) return;
|
||||
logUiEvent("focusin", { target: describeElement(t) });
|
||||
},
|
||||
true
|
||||
);
|
||||
|
||||
document.addEventListener(
|
||||
"focusout",
|
||||
function (e) {
|
||||
var t = e.target;
|
||||
if (shouldIgnoreTarget(t)) return;
|
||||
logUiEvent("focusout", {
|
||||
target: describeElement(t),
|
||||
value: getInputValueSafe(t),
|
||||
});
|
||||
},
|
||||
true
|
||||
);
|
||||
|
||||
// Enter/Escape are useful for form flows & modals
|
||||
document.addEventListener(
|
||||
"keydown",
|
||||
function (e) {
|
||||
if (e.key !== "Enter" && e.key !== "Escape") return;
|
||||
var t = e.target;
|
||||
if (shouldIgnoreTarget(t)) return;
|
||||
logUiEvent("keydown", { key: e.key, target: describeElement(t) });
|
||||
},
|
||||
true
|
||||
);
|
||||
|
||||
// Form submissions
|
||||
document.addEventListener(
|
||||
"submit",
|
||||
function (e) {
|
||||
var t = e.target;
|
||||
if (shouldIgnoreTarget(t)) return;
|
||||
logUiEvent("submit", { target: describeElement(t) });
|
||||
},
|
||||
true
|
||||
);
|
||||
|
||||
// Throttled scroll events
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
function () {
|
||||
var now = Date.now();
|
||||
if (now - store.lastScrollTime < CONFIG.scrollThrottleMs) return;
|
||||
store.lastScrollTime = now;
|
||||
|
||||
logUiEvent("scroll", {
|
||||
scrollX: window.scrollX,
|
||||
scrollY: window.scrollY,
|
||||
documentHeight: document.documentElement.scrollHeight,
|
||||
viewportHeight: window.innerHeight,
|
||||
});
|
||||
},
|
||||
{ passive: true }
|
||||
);
|
||||
|
||||
// Navigation tracking for SPAs
|
||||
function nav(reason) {
|
||||
logUiEvent("navigate", { reason: reason });
|
||||
}
|
||||
|
||||
var origPush = history.pushState;
|
||||
history.pushState = function () {
|
||||
origPush.apply(this, arguments);
|
||||
nav("pushState");
|
||||
};
|
||||
|
||||
var origReplace = history.replaceState;
|
||||
history.replaceState = function () {
|
||||
origReplace.apply(this, arguments);
|
||||
nav("replaceState");
|
||||
};
|
||||
|
||||
window.addEventListener("popstate", function () {
|
||||
nav("popstate");
|
||||
});
|
||||
window.addEventListener("hashchange", function () {
|
||||
nav("hashchange");
|
||||
});
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// Console Interception
|
||||
// ==========================================================================
|
||||
|
||||
var originalConsole = {
|
||||
log: console.log.bind(console),
|
||||
debug: console.debug.bind(console),
|
||||
info: console.info.bind(console),
|
||||
warn: console.warn.bind(console),
|
||||
error: console.error.bind(console),
|
||||
};
|
||||
|
||||
["log", "debug", "info", "warn", "error"].forEach(function (method) {
|
||||
console[method] = function () {
|
||||
var args = Array.prototype.slice.call(arguments);
|
||||
|
||||
var entry = {
|
||||
timestamp: Date.now(),
|
||||
level: method.toUpperCase(),
|
||||
args: formatArgs(args),
|
||||
stack: method === "error" ? new Error().stack : null,
|
||||
};
|
||||
|
||||
store.consoleLogs.push(entry);
|
||||
pruneBuffer(store.consoleLogs, CONFIG.bufferSize.console);
|
||||
|
||||
originalConsole[method].apply(console, args);
|
||||
};
|
||||
});
|
||||
|
||||
window.addEventListener("error", function (event) {
|
||||
store.consoleLogs.push({
|
||||
timestamp: Date.now(),
|
||||
level: "ERROR",
|
||||
args: [
|
||||
{
|
||||
type: "UncaughtError",
|
||||
message: event.message,
|
||||
filename: event.filename,
|
||||
lineno: event.lineno,
|
||||
colno: event.colno,
|
||||
stack: event.error ? event.error.stack : null,
|
||||
},
|
||||
],
|
||||
stack: event.error ? event.error.stack : null,
|
||||
});
|
||||
pruneBuffer(store.consoleLogs, CONFIG.bufferSize.console);
|
||||
|
||||
// Mark an error moment in UI event stream for agents
|
||||
logUiEvent("error", {
|
||||
message: event.message,
|
||||
filename: event.filename,
|
||||
lineno: event.lineno,
|
||||
colno: event.colno,
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener("unhandledrejection", function (event) {
|
||||
var reason = event.reason;
|
||||
store.consoleLogs.push({
|
||||
timestamp: Date.now(),
|
||||
level: "ERROR",
|
||||
args: [
|
||||
{
|
||||
type: "UnhandledRejection",
|
||||
reason: reason && reason.message ? reason.message : String(reason),
|
||||
stack: reason && reason.stack ? reason.stack : null,
|
||||
},
|
||||
],
|
||||
stack: reason && reason.stack ? reason.stack : null,
|
||||
});
|
||||
pruneBuffer(store.consoleLogs, CONFIG.bufferSize.console);
|
||||
|
||||
logUiEvent("unhandledrejection", {
|
||||
reason: reason && reason.message ? reason.message : String(reason),
|
||||
});
|
||||
});
|
||||
|
||||
// ==========================================================================
|
||||
// Fetch Interception
|
||||
// ==========================================================================
|
||||
|
||||
var originalFetch = window.fetch.bind(window);
|
||||
|
||||
window.fetch = function (input, init) {
|
||||
init = init || {};
|
||||
var startTime = Date.now();
|
||||
// Handle string, Request object, or URL object
|
||||
var url = typeof input === "string"
|
||||
? input
|
||||
: (input && (input.url || input.href || String(input))) || "";
|
||||
var method = init.method || (input && input.method) || "GET";
|
||||
|
||||
// Don't intercept internal requests
|
||||
if (url.indexOf("/__manus__/") === 0) {
|
||||
return originalFetch(input, init);
|
||||
}
|
||||
|
||||
// Safely parse headers (avoid breaking if headers format is invalid)
|
||||
var requestHeaders = {};
|
||||
try {
|
||||
if (init.headers) {
|
||||
requestHeaders = Object.fromEntries(new Headers(init.headers).entries());
|
||||
}
|
||||
} catch (e) {
|
||||
requestHeaders = { _parseError: true };
|
||||
}
|
||||
|
||||
var entry = {
|
||||
timestamp: startTime,
|
||||
type: "fetch",
|
||||
method: method.toUpperCase(),
|
||||
url: url,
|
||||
request: {
|
||||
headers: requestHeaders,
|
||||
body: init.body ? sanitizeValue(tryParseJson(init.body)) : null,
|
||||
},
|
||||
response: null,
|
||||
duration: null,
|
||||
error: null,
|
||||
};
|
||||
|
||||
return originalFetch(input, init)
|
||||
.then(function (response) {
|
||||
entry.duration = Date.now() - startTime;
|
||||
|
||||
var contentType = (response.headers.get("content-type") || "").toLowerCase();
|
||||
var contentLength = response.headers.get("content-length");
|
||||
|
||||
entry.response = {
|
||||
status: response.status,
|
||||
statusText: response.statusText,
|
||||
headers: Object.fromEntries(response.headers.entries()),
|
||||
body: null,
|
||||
};
|
||||
|
||||
// Semantic network hint for agents on failures (sync, no need to wait for body)
|
||||
if (response.status >= 400) {
|
||||
logUiEvent("network_error", {
|
||||
kind: "fetch",
|
||||
method: entry.method,
|
||||
url: entry.url,
|
||||
status: response.status,
|
||||
statusText: response.statusText,
|
||||
});
|
||||
}
|
||||
|
||||
// Skip body capture for streaming responses (SSE, etc.) to avoid memory leaks
|
||||
var isStreaming = contentType.indexOf("text/event-stream") !== -1 ||
|
||||
contentType.indexOf("application/stream") !== -1 ||
|
||||
contentType.indexOf("application/x-ndjson") !== -1;
|
||||
if (isStreaming) {
|
||||
entry.response.body = "[Streaming response - not captured]";
|
||||
store.networkRequests.push(entry);
|
||||
pruneBuffer(store.networkRequests, CONFIG.bufferSize.network);
|
||||
return response;
|
||||
}
|
||||
|
||||
// Skip body capture for large responses to avoid memory issues
|
||||
if (contentLength && parseInt(contentLength, 10) > CONFIG.maxBodyLength) {
|
||||
entry.response.body = "[Response too large: " + contentLength + " bytes]";
|
||||
store.networkRequests.push(entry);
|
||||
pruneBuffer(store.networkRequests, CONFIG.bufferSize.network);
|
||||
return response;
|
||||
}
|
||||
|
||||
// Skip body capture for binary content types
|
||||
var isBinary = contentType.indexOf("image/") !== -1 ||
|
||||
contentType.indexOf("video/") !== -1 ||
|
||||
contentType.indexOf("audio/") !== -1 ||
|
||||
contentType.indexOf("application/octet-stream") !== -1 ||
|
||||
contentType.indexOf("application/pdf") !== -1 ||
|
||||
contentType.indexOf("application/zip") !== -1;
|
||||
if (isBinary) {
|
||||
entry.response.body = "[Binary content: " + contentType + "]";
|
||||
store.networkRequests.push(entry);
|
||||
pruneBuffer(store.networkRequests, CONFIG.bufferSize.network);
|
||||
return response;
|
||||
}
|
||||
|
||||
// For text responses, clone and read body in background
|
||||
var clonedResponse = response.clone();
|
||||
|
||||
// Async: read body in background, don't block the response
|
||||
clonedResponse
|
||||
.text()
|
||||
.then(function (text) {
|
||||
if (text.length <= CONFIG.maxBodyLength) {
|
||||
entry.response.body = sanitizeValue(tryParseJson(text));
|
||||
} else {
|
||||
entry.response.body = text.slice(0, CONFIG.maxBodyLength) + "...[truncated]";
|
||||
}
|
||||
})
|
||||
.catch(function () {
|
||||
entry.response.body = "[Unable to read body]";
|
||||
})
|
||||
.finally(function () {
|
||||
store.networkRequests.push(entry);
|
||||
pruneBuffer(store.networkRequests, CONFIG.bufferSize.network);
|
||||
});
|
||||
|
||||
// Return response immediately, don't wait for body reading
|
||||
return response;
|
||||
})
|
||||
.catch(function (error) {
|
||||
entry.duration = Date.now() - startTime;
|
||||
entry.error = { message: error.message, stack: error.stack };
|
||||
|
||||
store.networkRequests.push(entry);
|
||||
pruneBuffer(store.networkRequests, CONFIG.bufferSize.network);
|
||||
|
||||
logUiEvent("network_error", {
|
||||
kind: "fetch",
|
||||
method: entry.method,
|
||||
url: entry.url,
|
||||
message: error.message,
|
||||
});
|
||||
|
||||
throw error;
|
||||
});
|
||||
};
|
||||
|
||||
// ==========================================================================
|
||||
// XHR Interception
|
||||
// ==========================================================================
|
||||
|
||||
var originalXHROpen = XMLHttpRequest.prototype.open;
|
||||
var originalXHRSend = XMLHttpRequest.prototype.send;
|
||||
|
||||
XMLHttpRequest.prototype.open = function (method, url) {
|
||||
this._manusData = {
|
||||
method: (method || "GET").toUpperCase(),
|
||||
url: url,
|
||||
startTime: null,
|
||||
};
|
||||
return originalXHROpen.apply(this, arguments);
|
||||
};
|
||||
|
||||
XMLHttpRequest.prototype.send = function (body) {
|
||||
var xhr = this;
|
||||
|
||||
if (
|
||||
xhr._manusData &&
|
||||
xhr._manusData.url &&
|
||||
xhr._manusData.url.indexOf("/__manus__/") !== 0
|
||||
) {
|
||||
xhr._manusData.startTime = Date.now();
|
||||
xhr._manusData.requestBody = body ? sanitizeValue(tryParseJson(body)) : null;
|
||||
|
||||
xhr.addEventListener("load", function () {
|
||||
var contentType = (xhr.getResponseHeader("content-type") || "").toLowerCase();
|
||||
var responseBody = null;
|
||||
|
||||
// Skip body capture for streaming responses
|
||||
var isStreaming = contentType.indexOf("text/event-stream") !== -1 ||
|
||||
contentType.indexOf("application/stream") !== -1 ||
|
||||
contentType.indexOf("application/x-ndjson") !== -1;
|
||||
|
||||
// Skip body capture for binary content types
|
||||
var isBinary = contentType.indexOf("image/") !== -1 ||
|
||||
contentType.indexOf("video/") !== -1 ||
|
||||
contentType.indexOf("audio/") !== -1 ||
|
||||
contentType.indexOf("application/octet-stream") !== -1 ||
|
||||
contentType.indexOf("application/pdf") !== -1 ||
|
||||
contentType.indexOf("application/zip") !== -1;
|
||||
|
||||
if (isStreaming) {
|
||||
responseBody = "[Streaming response - not captured]";
|
||||
} else if (isBinary) {
|
||||
responseBody = "[Binary content: " + contentType + "]";
|
||||
} else {
|
||||
// Safe to read responseText for text responses
|
||||
try {
|
||||
var text = xhr.responseText || "";
|
||||
if (text.length > CONFIG.maxBodyLength) {
|
||||
responseBody = text.slice(0, CONFIG.maxBodyLength) + "...[truncated]";
|
||||
} else {
|
||||
responseBody = sanitizeValue(tryParseJson(text));
|
||||
}
|
||||
} catch (e) {
|
||||
// responseText may throw for non-text responses
|
||||
responseBody = "[Unable to read response: " + e.message + "]";
|
||||
}
|
||||
}
|
||||
|
||||
var entry = {
|
||||
timestamp: xhr._manusData.startTime,
|
||||
type: "xhr",
|
||||
method: xhr._manusData.method,
|
||||
url: xhr._manusData.url,
|
||||
request: { body: xhr._manusData.requestBody },
|
||||
response: {
|
||||
status: xhr.status,
|
||||
statusText: xhr.statusText,
|
||||
body: responseBody,
|
||||
},
|
||||
duration: Date.now() - xhr._manusData.startTime,
|
||||
error: null,
|
||||
};
|
||||
|
||||
store.networkRequests.push(entry);
|
||||
pruneBuffer(store.networkRequests, CONFIG.bufferSize.network);
|
||||
|
||||
if (entry.response && entry.response.status >= 400) {
|
||||
logUiEvent("network_error", {
|
||||
kind: "xhr",
|
||||
method: entry.method,
|
||||
url: entry.url,
|
||||
status: entry.response.status,
|
||||
statusText: entry.response.statusText,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
xhr.addEventListener("error", function () {
|
||||
var entry = {
|
||||
timestamp: xhr._manusData.startTime,
|
||||
type: "xhr",
|
||||
method: xhr._manusData.method,
|
||||
url: xhr._manusData.url,
|
||||
request: { body: xhr._manusData.requestBody },
|
||||
response: null,
|
||||
duration: Date.now() - xhr._manusData.startTime,
|
||||
error: { message: "Network error" },
|
||||
};
|
||||
|
||||
store.networkRequests.push(entry);
|
||||
pruneBuffer(store.networkRequests, CONFIG.bufferSize.network);
|
||||
|
||||
logUiEvent("network_error", {
|
||||
kind: "xhr",
|
||||
method: entry.method,
|
||||
url: entry.url,
|
||||
message: "Network error",
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return originalXHRSend.apply(this, arguments);
|
||||
};
|
||||
|
||||
// ==========================================================================
|
||||
// Data Reporting
|
||||
// ==========================================================================
|
||||
|
||||
function reportLogs() {
|
||||
var consoleLogs = store.consoleLogs.splice(0);
|
||||
var networkRequests = store.networkRequests.splice(0);
|
||||
var uiEvents = store.uiEvents.splice(0);
|
||||
|
||||
// Skip if no new data
|
||||
if (
|
||||
consoleLogs.length === 0 &&
|
||||
networkRequests.length === 0 &&
|
||||
uiEvents.length === 0
|
||||
) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
var payload = {
|
||||
timestamp: Date.now(),
|
||||
consoleLogs: consoleLogs,
|
||||
networkRequests: networkRequests,
|
||||
// Mirror uiEvents to sessionEvents for sessionReplay.log
|
||||
sessionEvents: uiEvents,
|
||||
// agent-friendly semantic events
|
||||
uiEvents: uiEvents,
|
||||
};
|
||||
|
||||
return originalFetch(CONFIG.reportEndpoint, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload),
|
||||
}).catch(function () {
|
||||
// Put data back on failure (but respect limits)
|
||||
store.consoleLogs = consoleLogs.concat(store.consoleLogs);
|
||||
store.networkRequests = networkRequests.concat(store.networkRequests);
|
||||
store.uiEvents = uiEvents.concat(store.uiEvents);
|
||||
|
||||
pruneBuffer(store.consoleLogs, CONFIG.bufferSize.console);
|
||||
pruneBuffer(store.networkRequests, CONFIG.bufferSize.network);
|
||||
pruneBuffer(store.uiEvents, CONFIG.bufferSize.ui);
|
||||
});
|
||||
}
|
||||
|
||||
// Periodic reporting
|
||||
setInterval(reportLogs, CONFIG.reportInterval);
|
||||
|
||||
// Report on page unload
|
||||
window.addEventListener("beforeunload", function () {
|
||||
var consoleLogs = store.consoleLogs;
|
||||
var networkRequests = store.networkRequests;
|
||||
var uiEvents = store.uiEvents;
|
||||
|
||||
if (
|
||||
consoleLogs.length === 0 &&
|
||||
networkRequests.length === 0 &&
|
||||
uiEvents.length === 0
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
var payload = {
|
||||
timestamp: Date.now(),
|
||||
consoleLogs: consoleLogs,
|
||||
networkRequests: networkRequests,
|
||||
// Mirror uiEvents to sessionEvents for sessionReplay.log
|
||||
sessionEvents: uiEvents,
|
||||
uiEvents: uiEvents,
|
||||
};
|
||||
|
||||
if (navigator.sendBeacon) {
|
||||
var payloadStr = JSON.stringify(payload);
|
||||
// sendBeacon has ~64KB limit, truncate if too large
|
||||
var MAX_BEACON_SIZE = 60000; // Leave some margin
|
||||
if (payloadStr.length > MAX_BEACON_SIZE) {
|
||||
// Prioritize: keep recent events, drop older logs
|
||||
var truncatedPayload = {
|
||||
timestamp: Date.now(),
|
||||
consoleLogs: consoleLogs.slice(-50),
|
||||
networkRequests: networkRequests.slice(-20),
|
||||
sessionEvents: uiEvents.slice(-100),
|
||||
uiEvents: uiEvents.slice(-100),
|
||||
_truncated: true,
|
||||
};
|
||||
payloadStr = JSON.stringify(truncatedPayload);
|
||||
}
|
||||
navigator.sendBeacon(CONFIG.reportEndpoint, payloadStr);
|
||||
}
|
||||
});
|
||||
|
||||
// ==========================================================================
|
||||
// Initialization
|
||||
// ==========================================================================
|
||||
|
||||
// Install semantic UI listeners ASAP
|
||||
try {
|
||||
installUiEventListeners();
|
||||
} catch (e) {
|
||||
console.warn("[Manus] Failed to install UI listeners:", e);
|
||||
}
|
||||
|
||||
// Mark as initialized
|
||||
window.__MANUS_DEBUG_COLLECTOR__ = {
|
||||
version: "2.0-no-rrweb",
|
||||
store: store,
|
||||
forceReport: reportLogs,
|
||||
};
|
||||
|
||||
console.debug("[Manus] Debug collector initialized (no rrweb, UI events only)");
|
||||
})();
|
||||
@@ -1,569 +0,0 @@
|
||||
{
|
||||
"v4_source": "tests\\matching\\v4_full32_result.yaml",
|
||||
"v4_label_to_phase_z_status": {
|
||||
"use_as_is": "matched_zone",
|
||||
"light_edit": "adapt_matched_zone",
|
||||
"restructure": "extract_matched_zone",
|
||||
"reject": "fallback_candidate"
|
||||
},
|
||||
"mvp1_allowed_statuses": [
|
||||
"adapt_matched_zone",
|
||||
"matched_zone"
|
||||
],
|
||||
"mode": "composition_v0_layout_8preset",
|
||||
"mode_note": "MVP-1.5b w/ composition planner v0 — sections → candidates (separate / parent_merged) → score → greedy select → 8-preset layout vocabulary (single / horizontal-2 / vertical-2 / top-1-bottom-2 / top-2-bottom-1 / left-1-right-2 / left-2-right-1 / grid-2x2). v0 layout = count-based; v1 axes (cardinality_fit / hierarchy_coherence / density_score) 추후.",
|
||||
"layout_preset": "horizontal-2",
|
||||
"layout_css": {
|
||||
"areas": "\"top\" \"bottom\"",
|
||||
"cols": "1fr",
|
||||
"rows": "228px 343px",
|
||||
"heights_px": [
|
||||
228,
|
||||
343
|
||||
],
|
||||
"ratios": [
|
||||
0.39,
|
||||
0.586
|
||||
],
|
||||
"computation": "min_height_first + content_weight_distribution",
|
||||
"dynamic_rows": true,
|
||||
"raw_zone_layout": {
|
||||
"computation": "min_height_first + content_weight_distribution",
|
||||
"slide_body_height": 585,
|
||||
"gap": 14,
|
||||
"available_after_gap": 571,
|
||||
"min_heights_px": [
|
||||
228,
|
||||
342
|
||||
],
|
||||
"min_scaled": true,
|
||||
"total_min_height": 570,
|
||||
"remaining_after_min": 1,
|
||||
"content_weights": [
|
||||
{
|
||||
"position": "top",
|
||||
"template_id": "three_parallel_requirements",
|
||||
"score": 4.425
|
||||
},
|
||||
{
|
||||
"position": "bottom",
|
||||
"template_id": "process_product_two_way",
|
||||
"score": 7.305
|
||||
}
|
||||
],
|
||||
"weight_shares": [
|
||||
0.377,
|
||||
0.623
|
||||
],
|
||||
"extras_px": [
|
||||
0,
|
||||
1
|
||||
],
|
||||
"heights_px": [
|
||||
228,
|
||||
343
|
||||
],
|
||||
"ratios": [
|
||||
0.39,
|
||||
0.586
|
||||
]
|
||||
}
|
||||
},
|
||||
"slide_status": {
|
||||
"rendered": true,
|
||||
"visual_check_passed": true,
|
||||
"full_mdx_coverage": true,
|
||||
"aligned_section_ids": [
|
||||
"03-1",
|
||||
"03-2"
|
||||
],
|
||||
"covered_section_ids": [
|
||||
"03-1",
|
||||
"03-2"
|
||||
],
|
||||
"filtered_section_ids": [],
|
||||
"filtered_section_reasons": [],
|
||||
"visual_fail_reasons": [],
|
||||
"adapter_needed_count": 0,
|
||||
"adapter_needed_units": [],
|
||||
"content_truncated_count": 0,
|
||||
"content_truncated_units": [],
|
||||
"overall": "PASS",
|
||||
"note": "자동 파이프라인 결과 보고. review/UI 개념 X. final.html 파일명 != PASS 의미. overall == PASS 는 visual OK + full coverage + adapter_needed=0 일 때만. adapter_needed_count > 0 = mapper 가 contract 와 안 맞아 자동 렌더 못 한 zone 존재. content_truncated_count > 0 = builder 가 truncate 한 zone 존재 (rendered 됐지만 일부 콘텐츠 손실)."
|
||||
},
|
||||
"fit_classification": {
|
||||
"visual_check_passed": true,
|
||||
"classifications": [],
|
||||
"summary": "visual check passed — no overflow to classify",
|
||||
"categories_seen": [],
|
||||
"unclassified_signals": [],
|
||||
"placement_diagnostics": [
|
||||
{
|
||||
"zone_position": "top",
|
||||
"mapper_frame_template_id": "three_parallel_requirements",
|
||||
"b4_selected_template_id": "three_parallel_requirements",
|
||||
"frame_selection_matches_mapper": true,
|
||||
"frame_selection_match_note": null,
|
||||
"region_count": 1,
|
||||
"slot_assignment_count": 1,
|
||||
"rejection_count": 0
|
||||
},
|
||||
{
|
||||
"zone_position": "bottom",
|
||||
"mapper_frame_template_id": "process_product_two_way",
|
||||
"b4_selected_template_id": "process_product_two_way",
|
||||
"frame_selection_matches_mapper": true,
|
||||
"frame_selection_match_note": null,
|
||||
"region_count": 2,
|
||||
"slot_assignment_count": 2,
|
||||
"rejection_count": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
"router_decision": {
|
||||
"router_active": false,
|
||||
"proposed_actions_summary": [],
|
||||
"implementation_status_summary": {},
|
||||
"routed_count": 0,
|
||||
"routed_details": [],
|
||||
"missing_actions_pending_impl": [],
|
||||
"note": "visual check passed — no overflow to route"
|
||||
},
|
||||
"retry_trace": {
|
||||
"retry_attempted": false,
|
||||
"retry_action": null,
|
||||
"plan": null,
|
||||
"rerender_attempted": false,
|
||||
"retry_passed": false,
|
||||
"retry_failure_reason": null,
|
||||
"retried_candidate_path": null,
|
||||
"safety_margin_px": 4,
|
||||
"policy": "A3 locked rules : retry budget=1, slide-base/spacing/gap fixed, donor strict (sibling/visual ok/capacity ok/slack>0/min_height 보존), (b) revert on redistribution fail or rerender visual fail.",
|
||||
"retry_skipped_reason": "router_active=False (visual check passed — no overflow)",
|
||||
"failure_classification": {
|
||||
"failure_type": "not_attempted",
|
||||
"failure_type_description": "retry was not attempted (router_active=False or zone_ratio_retry not in proposed actions). 정상 path 의 일부 — 실패 X",
|
||||
"classification_rule": "retry_attempted=False — router_active=False or zone_ratio_retry not in proposed_actions"
|
||||
},
|
||||
"next_action_proposal": {
|
||||
"next_proposed_action": "none",
|
||||
"next_action_rationale": "retry 시도 자체가 없었음 (visual ok 등) — escalation 불필요",
|
||||
"next_action_implementation_status": "n/a",
|
||||
"mapping_source": "A4 NEXT_ACTION_BY_FAILURE (사용자 잠금 2026-04-29)"
|
||||
}
|
||||
},
|
||||
"composition_planner_debug": {
|
||||
"planner_version": "v0.2",
|
||||
"selection_rule": "score desc, then source_section_ids count desc (coverage tiebreak). filter = phase_z_status ∉ allowed_statuses OR auto_selectable=False. auto_selectable=False 사유 : C1 (capacity mismatch — silent truncate / FitError 차단), W1 (rep not auto-renderable), W2 (all children reject), W3 (majority children non-auto-renderable).",
|
||||
"candidates_total": 2,
|
||||
"candidates_viable_auto": 2,
|
||||
"candidates_summary": [
|
||||
{
|
||||
"source_section_ids": [
|
||||
"03-1"
|
||||
],
|
||||
"merge_type": "single",
|
||||
"template_id": "three_parallel_requirements",
|
||||
"label": "use_as_is",
|
||||
"phase_z_status": "matched_zone",
|
||||
"score": 0.9268,
|
||||
"selection_state": "selected",
|
||||
"auto_selectable": true,
|
||||
"filter_reasons": [],
|
||||
"notes": [],
|
||||
"capacity_fit": {
|
||||
"item_count": 3,
|
||||
"source_shape": "top_bullets",
|
||||
"capacity": {
|
||||
"strict": 3,
|
||||
"min": null,
|
||||
"max": null,
|
||||
"truncate_at": null,
|
||||
"pad_to": null
|
||||
},
|
||||
"fit_status": "ok",
|
||||
"mismatch_reason": null
|
||||
}
|
||||
},
|
||||
{
|
||||
"source_section_ids": [
|
||||
"03-2"
|
||||
],
|
||||
"merge_type": "single",
|
||||
"template_id": "process_product_two_way",
|
||||
"label": "use_as_is",
|
||||
"phase_z_status": "matched_zone",
|
||||
"score": 0.9198,
|
||||
"selection_state": "selected",
|
||||
"auto_selectable": true,
|
||||
"filter_reasons": [],
|
||||
"notes": [],
|
||||
"capacity_fit": {
|
||||
"item_count": 2,
|
||||
"source_shape": "h3_subsections",
|
||||
"capacity": {
|
||||
"strict": 2,
|
||||
"min": null,
|
||||
"max": null,
|
||||
"truncate_at": null,
|
||||
"pad_to": null
|
||||
},
|
||||
"fit_status": "ok",
|
||||
"mismatch_reason": null
|
||||
}
|
||||
}
|
||||
],
|
||||
"merge_candidates": [],
|
||||
"capacity_mismatches": [],
|
||||
"selected_units_count": 2,
|
||||
"layout_preset": "horizontal-2",
|
||||
"layout_preset_rationale": "v0 count-based: 2 units → horizontal-2"
|
||||
},
|
||||
"zones": [
|
||||
{
|
||||
"position": "top",
|
||||
"source_section_ids": [
|
||||
"03-1"
|
||||
],
|
||||
"merge_type": "single",
|
||||
"title": "1. DX 시행을 위한 필수 요건",
|
||||
"v4_rank1_frame_id": "1171281190",
|
||||
"v4_rank1_frame_number": 13,
|
||||
"v4_template_id": "three_parallel_requirements",
|
||||
"v4_label": "use_as_is",
|
||||
"v4_confidence": 0.9268,
|
||||
"phase_z_status": "matched_zone",
|
||||
"composition_score": 0.9268,
|
||||
"composition_rationale": {
|
||||
"capacity_fit": {
|
||||
"item_count": 3,
|
||||
"source_shape": "top_bullets",
|
||||
"capacity": {
|
||||
"strict": 3,
|
||||
"min": null,
|
||||
"max": null,
|
||||
"truncate_at": null,
|
||||
"pad_to": null
|
||||
},
|
||||
"fit_status": "ok",
|
||||
"mismatch_reason": null
|
||||
},
|
||||
"frame_compat": 0.9268,
|
||||
"confidence": 0.9268,
|
||||
"label": "use_as_is",
|
||||
"label_weight": 1.0,
|
||||
"merge_type": "single",
|
||||
"hierarchy_coherence": null,
|
||||
"density_score": null
|
||||
},
|
||||
"composition_notes": [],
|
||||
"mapper_type": "contract",
|
||||
"contract_id": "three_parallel_requirements",
|
||||
"contract_frame_id": 1171281190,
|
||||
"builder": "items_with_role",
|
||||
"min_height_px": 230,
|
||||
"slot_payload_keys": [
|
||||
"pillars",
|
||||
"title"
|
||||
],
|
||||
"content_truncated_count": null,
|
||||
"assets_dir": null,
|
||||
"content_weight": {
|
||||
"score": 4.425,
|
||||
"text_length": 660,
|
||||
"top_bullets": 3,
|
||||
"nested_bullets": 16,
|
||||
"has_table": false,
|
||||
"subsection_count": 0
|
||||
},
|
||||
"placement_trace": {
|
||||
"section_id": "03-1",
|
||||
"selected_frame_id": "1171281190",
|
||||
"selected_template_id": "three_parallel_requirements",
|
||||
"internal_regions": [
|
||||
{
|
||||
"region_id": "03-1.region-1",
|
||||
"role": "primary",
|
||||
"content_type": "text_block",
|
||||
"ratio_estimate": 1.0,
|
||||
"content_unit_ids": [
|
||||
"03-1.text-1"
|
||||
],
|
||||
"frame_match_strategy": {
|
||||
"kind": "frame_match",
|
||||
"frame_id": null,
|
||||
"display_strategy": "inline_full"
|
||||
},
|
||||
"source_shape_index": null
|
||||
}
|
||||
],
|
||||
"slot_assignments": [
|
||||
{
|
||||
"region_id": "03-1.region-1",
|
||||
"content_unit_id": "03-1.text-1",
|
||||
"frame_slot_id": "pillar_1",
|
||||
"partial_target_path": ".f13b__cols > .f13b__col:nth-child(1)",
|
||||
"display_strategy": "inline_full"
|
||||
}
|
||||
],
|
||||
"overflow_buffer": [],
|
||||
"rejection": [],
|
||||
"mapper_frame_template_id": "three_parallel_requirements",
|
||||
"frame_selection_matches_mapper": true,
|
||||
"frame_selection_match_note": null
|
||||
},
|
||||
"height_px": 228,
|
||||
"ratio": 0.39
|
||||
},
|
||||
{
|
||||
"position": "bottom",
|
||||
"source_section_ids": [
|
||||
"03-2"
|
||||
],
|
||||
"merge_type": "single",
|
||||
"title": "2. Process의 혁신과 Product의 변화",
|
||||
"v4_rank1_frame_id": "1171281210",
|
||||
"v4_rank1_frame_number": 29,
|
||||
"v4_template_id": "process_product_two_way",
|
||||
"v4_label": "use_as_is",
|
||||
"v4_confidence": 0.9198,
|
||||
"phase_z_status": "matched_zone",
|
||||
"composition_score": 0.9198,
|
||||
"composition_rationale": {
|
||||
"capacity_fit": {
|
||||
"item_count": 2,
|
||||
"source_shape": "h3_subsections",
|
||||
"capacity": {
|
||||
"strict": 2,
|
||||
"min": null,
|
||||
"max": null,
|
||||
"truncate_at": null,
|
||||
"pad_to": null
|
||||
},
|
||||
"fit_status": "ok",
|
||||
"mismatch_reason": null
|
||||
},
|
||||
"frame_compat": 0.9198,
|
||||
"confidence": 0.9198,
|
||||
"label": "use_as_is",
|
||||
"label_weight": 1.0,
|
||||
"merge_type": "single",
|
||||
"hierarchy_coherence": null,
|
||||
"density_score": null
|
||||
},
|
||||
"composition_notes": [],
|
||||
"mapper_type": "contract",
|
||||
"contract_id": "process_product_two_way",
|
||||
"contract_frame_id": 1171281210,
|
||||
"builder": "process_product_pair",
|
||||
"min_height_px": 345,
|
||||
"slot_payload_keys": [
|
||||
"banner_left",
|
||||
"banner_right",
|
||||
"process",
|
||||
"product",
|
||||
"title"
|
||||
],
|
||||
"content_truncated_count": null,
|
||||
"assets_dir": "assets\\process_product_two_way",
|
||||
"content_weight": {
|
||||
"score": 7.305,
|
||||
"text_length": 924,
|
||||
"top_bullets": 6,
|
||||
"nested_bullets": 7,
|
||||
"has_table": true,
|
||||
"subsection_count": 2
|
||||
},
|
||||
"placement_trace": {
|
||||
"section_id": "03-2",
|
||||
"selected_frame_id": "1171281210",
|
||||
"selected_template_id": "process_product_two_way",
|
||||
"internal_regions": [
|
||||
{
|
||||
"region_id": "03-2.region-1",
|
||||
"role": "primary",
|
||||
"content_type": "text_block",
|
||||
"ratio_estimate": 0.8421,
|
||||
"content_unit_ids": [
|
||||
"03-2.text-1"
|
||||
],
|
||||
"frame_match_strategy": {
|
||||
"kind": "frame_match",
|
||||
"frame_id": null,
|
||||
"display_strategy": "inline_full"
|
||||
},
|
||||
"source_shape_index": null
|
||||
},
|
||||
{
|
||||
"region_id": "03-2.region-2",
|
||||
"role": "supporting",
|
||||
"content_type": "transform_table",
|
||||
"ratio_estimate": 0.1579,
|
||||
"content_unit_ids": [
|
||||
"03-2.transform-1"
|
||||
],
|
||||
"frame_match_strategy": {
|
||||
"kind": "frame_match",
|
||||
"frame_id": null,
|
||||
"display_strategy": "inline_full"
|
||||
},
|
||||
"source_shape_index": null
|
||||
}
|
||||
],
|
||||
"slot_assignments": [
|
||||
{
|
||||
"region_id": "03-2.region-1",
|
||||
"content_unit_id": "03-2.text-1",
|
||||
"frame_slot_id": "product_column",
|
||||
"partial_target_path": ".f29b__grid .f29b__cell--right",
|
||||
"display_strategy": "inline_full"
|
||||
},
|
||||
{
|
||||
"region_id": "03-2.region-2",
|
||||
"content_unit_id": "03-2.transform-1",
|
||||
"frame_slot_id": "process_column",
|
||||
"partial_target_path": ".f29b__grid .f29b__cell--left",
|
||||
"display_strategy": "inline_full"
|
||||
}
|
||||
],
|
||||
"overflow_buffer": [],
|
||||
"rejection": [],
|
||||
"mapper_frame_template_id": "process_product_two_way",
|
||||
"frame_selection_matches_mapper": true,
|
||||
"frame_selection_match_note": null
|
||||
},
|
||||
"height_px": 343,
|
||||
"ratio": 0.586
|
||||
}
|
||||
],
|
||||
"visual_runtime_check": {
|
||||
"frame_slot_metrics": [
|
||||
{
|
||||
"class_name": "f29b__cell f29b__cell--left",
|
||||
"clientHeight": 125,
|
||||
"clientWidth": 577,
|
||||
"excess_x": 0,
|
||||
"excess_y": 0,
|
||||
"frame_slot_id": "process_column",
|
||||
"overflowed": false,
|
||||
"scrollHeight": 125,
|
||||
"scrollWidth": 577,
|
||||
"zone_position": "bottom",
|
||||
"zone_template_id": "process_product_two_way"
|
||||
},
|
||||
{
|
||||
"class_name": "f29b__cell f29b__cell--right",
|
||||
"clientHeight": 125,
|
||||
"clientWidth": 577,
|
||||
"excess_x": 0,
|
||||
"excess_y": 0,
|
||||
"frame_slot_id": "product_column",
|
||||
"overflowed": false,
|
||||
"scrollHeight": 125,
|
||||
"scrollWidth": 577,
|
||||
"zone_position": "bottom",
|
||||
"zone_template_id": "process_product_two_way"
|
||||
},
|
||||
{
|
||||
"class_name": "f29b__cell f29b__cell--left",
|
||||
"clientHeight": 43,
|
||||
"clientWidth": 577,
|
||||
"excess_x": 0,
|
||||
"excess_y": 0,
|
||||
"frame_slot_id": "process_column",
|
||||
"overflowed": false,
|
||||
"scrollHeight": 43,
|
||||
"scrollWidth": 577,
|
||||
"zone_position": "bottom",
|
||||
"zone_template_id": "process_product_two_way"
|
||||
},
|
||||
{
|
||||
"class_name": "f29b__cell f29b__cell--right",
|
||||
"clientHeight": 43,
|
||||
"clientWidth": 577,
|
||||
"excess_x": 0,
|
||||
"excess_y": 0,
|
||||
"frame_slot_id": "product_column",
|
||||
"overflowed": false,
|
||||
"scrollHeight": 43,
|
||||
"scrollWidth": 577,
|
||||
"zone_position": "bottom",
|
||||
"zone_template_id": "process_product_two_way"
|
||||
},
|
||||
{
|
||||
"class_name": "f29b__cell f29b__cell--left",
|
||||
"clientHeight": 63,
|
||||
"clientWidth": 577,
|
||||
"excess_x": 0,
|
||||
"excess_y": 0,
|
||||
"frame_slot_id": "process_column",
|
||||
"overflowed": false,
|
||||
"scrollHeight": 63,
|
||||
"scrollWidth": 577,
|
||||
"zone_position": "bottom",
|
||||
"zone_template_id": "process_product_two_way"
|
||||
},
|
||||
{
|
||||
"class_name": "f29b__cell f29b__cell--right",
|
||||
"clientHeight": 63,
|
||||
"clientWidth": 577,
|
||||
"excess_x": 0,
|
||||
"excess_y": 0,
|
||||
"frame_slot_id": "product_column",
|
||||
"overflowed": false,
|
||||
"scrollHeight": 63,
|
||||
"scrollWidth": 577,
|
||||
"zone_position": "bottom",
|
||||
"zone_template_id": "process_product_two_way"
|
||||
}
|
||||
],
|
||||
"slide": {
|
||||
"clientHeight": 720,
|
||||
"clientWidth": 1280,
|
||||
"excess_x": 0,
|
||||
"excess_y": 0,
|
||||
"overflowed": false,
|
||||
"scrollHeight": 720,
|
||||
"scrollWidth": 1280,
|
||||
"size_correct": true
|
||||
},
|
||||
"slide_body": {
|
||||
"clientHeight": 585,
|
||||
"clientWidth": 1180,
|
||||
"excess_x": 0,
|
||||
"excess_y": 0,
|
||||
"overflowed": false,
|
||||
"scrollHeight": 585,
|
||||
"scrollWidth": 1180
|
||||
},
|
||||
"zones": [
|
||||
{
|
||||
"clientHeight": 228,
|
||||
"clientWidth": 1180,
|
||||
"clipped_inner": [],
|
||||
"excess_x": 0,
|
||||
"excess_y": 0,
|
||||
"overflowed": false,
|
||||
"position": "top",
|
||||
"scrollHeight": 228,
|
||||
"scrollWidth": 1180,
|
||||
"template_id": "three_parallel_requirements"
|
||||
},
|
||||
{
|
||||
"clientHeight": 343,
|
||||
"clientWidth": 1180,
|
||||
"clipped_inner": [],
|
||||
"excess_x": 0,
|
||||
"excess_y": 0,
|
||||
"overflowed": false,
|
||||
"position": "bottom",
|
||||
"scrollHeight": 343,
|
||||
"scrollWidth": 1180,
|
||||
"template_id": "process_product_two_way"
|
||||
}
|
||||
],
|
||||
"screenshot": "data\\runs\\mdx03_f29_fix_check\\phase_z2\\preview.png",
|
||||
"passed": true,
|
||||
"fail_reasons": []
|
||||
}
|
||||
}
|
||||
@@ -1,927 +0,0 @@
|
||||
<!-- Phase Z-2 MVP-1.5b — single slide + Type B layout (top/bottom zones).
|
||||
원래 Phase Z 설계 복귀: MDX 1 = slide 1, layout preset = zone 분할, frame-derived block ⊂ zone. -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1280">
|
||||
<title>DX 실행 체계 구축 방안</title>
|
||||
<style>
|
||||
/* ── existing tokens (inlined) ── */
|
||||
/* === typography.css === */
|
||||
/* ══════════════════════════════════════
|
||||
Typography Tokens v1
|
||||
══════════════════════════════════════
|
||||
슬라이드 전체의 공통 글자 위계.
|
||||
모든 블록은 이 토큰을 참조한다.
|
||||
직접값(font-size: 11px) 금지 → var(--font-body) 사용.
|
||||
══════════════════════════════════════ */
|
||||
|
||||
:root {
|
||||
/* ── 1층: Global Hierarchy ── */
|
||||
|
||||
/* 대목차: 슬라이드 상단 제목 */
|
||||
--font-slide-title: 22px;
|
||||
--weight-slide-title: 700;
|
||||
--lh-slide-title: 1.4;
|
||||
|
||||
/* 중목차: zone 제목 */
|
||||
--font-zone-title: 16px;
|
||||
--weight-zone-title: 700;
|
||||
--lh-zone-title: 1.4;
|
||||
|
||||
/* 소목차: 블록 내 소제목, 카드 제목 */
|
||||
--font-sub-title: 12px;
|
||||
--weight-sub-title: 700;
|
||||
--lh-sub-title: 1.45;
|
||||
|
||||
/* 본문: 블릿, 설명 텍스트 */
|
||||
--font-body: 10px;
|
||||
--weight-body: 500;
|
||||
--lh-body: 1.55;
|
||||
|
||||
/* 캡션: 각주, 출처, 보조 텍스트 */
|
||||
--font-caption: 10px;
|
||||
--weight-caption: 400;
|
||||
--lh-caption: 1.4;
|
||||
|
||||
/* footer: 핵심 인사이트 pill */
|
||||
--font-footer: 20px;
|
||||
--weight-footer: 700;
|
||||
--lh-footer: 1.2;
|
||||
|
||||
/* ── 2층: Component Semantic Tokens ── */
|
||||
/* 가까운 위계에서 기본값, 필요시 override */
|
||||
|
||||
/* 본문 강조 (인라인 heading) */
|
||||
--font-body-strong: var(--font-body);
|
||||
--weight-body-strong: 600;
|
||||
|
||||
/* 자세히보기 링크 */
|
||||
--font-detail-link: var(--font-caption);
|
||||
--weight-detail-link: 500;
|
||||
|
||||
/* pill/badge 라벨 */
|
||||
--font-pill-label: var(--font-sub-title);
|
||||
--weight-pill-label: 700;
|
||||
|
||||
/* 표 헤더 */
|
||||
--font-table-header: var(--font-sub-title);
|
||||
--weight-table-header: 700;
|
||||
|
||||
/* 표 셀 */
|
||||
--font-table-cell: var(--font-body);
|
||||
--weight-table-cell: 400;
|
||||
|
||||
/* 비교 뱃지 */
|
||||
--font-compare-badge: var(--font-sub-title);
|
||||
--weight-compare-badge: 700;
|
||||
|
||||
/* 강조 인용 */
|
||||
--font-callout: var(--font-sub-title);
|
||||
--weight-callout: 700;
|
||||
|
||||
/* 상단 라벨 (overline) */
|
||||
--font-overline: var(--font-caption);
|
||||
--weight-overline: 600;
|
||||
--ls-overline: 0.05em;
|
||||
}
|
||||
|
||||
|
||||
/* === spacing.css === */
|
||||
/* ══════════════════════════════════════
|
||||
Spacing Tokens v1
|
||||
══════════════════════════════════════
|
||||
여백/간격/들여쓰기 공통 기준.
|
||||
══════════════════════════════════════ */
|
||||
|
||||
:root {
|
||||
/* ── 기본 스케일 ── */
|
||||
--space-xs: 4px;
|
||||
--space-sm: 8px;
|
||||
--space-md: 12px;
|
||||
--space-lg: 16px;
|
||||
--space-xl: 24px;
|
||||
|
||||
/* ── slide-base 레이아웃 ── */
|
||||
--slide-padding-x: 40px; /* 본문 좌우 여백 */
|
||||
--slide-title-left: 52px; /* 대목차 시작 */
|
||||
--slide-title-top: 22px; /* 대목차 위치 */
|
||||
--slide-divider-top: 58px; /* 구분선 위치 (slide_base.html 와 일치 2026-05-07) */
|
||||
--slide-body-top: 76px; /* 본문 시작 (사용자 직설: divider-body 16px) */
|
||||
--slide-body-height: 585px; /* 본문 높이 (사용자 직설: body-footer 10px) */
|
||||
--slide-footer-bottom: 8px; /* footer 하단 여백 (slide_base.html 와 일치) */
|
||||
--slide-footer-height: 41px; /* footer 높이 */
|
||||
|
||||
/* ── zone ── */
|
||||
--zone-gap: 8px; /* zone 간 간격 */
|
||||
--zone-padding-left: 12px; /* zone 안쪽 좌측 여백 */
|
||||
--zone-padding-right: 8px; /* zone 안쪽 우측 여백 */
|
||||
--zone-title-mb: 8px; /* zone 제목 아래 여백 */
|
||||
|
||||
/* ── 블록 공통 ── */
|
||||
--card-padding: 16px; /* 카드 내부 여백 */
|
||||
--card-padding-sm: 8px; /* 작은 카드 내부 여백 */
|
||||
--card-gap: 12px; /* 카드 간 간격 */
|
||||
--card-radius: 6px; /* 카드 모서리 */
|
||||
|
||||
/* ── 블릿/텍스트 ── */
|
||||
--bullet-indent: 14px; /* 불릿 hanging indent */
|
||||
--bullet-gap: 2px; /* 불릿 항목 간 간격 */
|
||||
--heading-gap: 4px; /* 소제목 아래 간격 */
|
||||
--section-gap: 10px; /* 섹션 간 간격 */
|
||||
|
||||
/* ── flex/grid 기본 ── */
|
||||
--flex-gap: 12px; /* 기본 flex gap */
|
||||
--flex-gap-sm: 6px; /* 좁은 flex gap */
|
||||
--grid-gap: 16px; /* 기본 grid gap */
|
||||
}
|
||||
|
||||
|
||||
/* === colors.css === */
|
||||
/* ══════════════════════════════════════
|
||||
Color Tokens v1
|
||||
══════════════════════════════════════
|
||||
2층 구조: 공통 테마색 + 블록 의미색.
|
||||
══════════════════════════════════════ */
|
||||
|
||||
:root {
|
||||
/* ══ 1층: 공통 테마색 ══ */
|
||||
/* 모든 블록이 공유하는 기본 팔레트 */
|
||||
|
||||
/* 텍스트 */
|
||||
--color-title: #1e293b; /* 제목 (진한 남색) */
|
||||
--color-zone-title: #1a365d; /* zone 중목차 제목 */
|
||||
--color-body: #475569; /* 본문 */
|
||||
--color-body-strong: #1e293b; /* 본문 강조 */
|
||||
--color-caption: #94a3b8; /* 캡션, 보조 */
|
||||
--color-muted: #64748b; /* 약한 텍스트 */
|
||||
|
||||
/* 배경 */
|
||||
--color-bg: #ffffff; /* 슬라이드 배경 */
|
||||
--color-bg-subtle: #f8fafc; /* 카드/영역 배경 */
|
||||
--color-bg-page: #e8ecf0; /* 페이지 배경 (슬라이드 바깥) */
|
||||
|
||||
/* 보더 */
|
||||
--color-border: #e2e8f0; /* 기본 보더 */
|
||||
--color-border-strong: #cbd5e1; /* 강한 보더 */
|
||||
|
||||
/* 강조 */
|
||||
--color-accent: #2563eb; /* 링크, 강조 (파랑) */
|
||||
--color-accent-hover: #eff6ff; /* 링크 hover 배경 */
|
||||
--color-danger: #dc2626; /* 경고, 에러 */
|
||||
|
||||
/* slide-base 전용 */
|
||||
--color-slide-title-from: #296b55; /* 대목차 gradient 시작 */
|
||||
--color-slide-title-to: #123328; /* 대목차 gradient 끝 */
|
||||
--color-footer-bg-from: #3b3523; /* footer gradient 시작 */
|
||||
--color-footer-bg-mid: #263a2a; /* footer gradient 중간 */
|
||||
--color-footer-bg-to: #113f31; /* footer gradient 끝 */
|
||||
--color-footer-text: #ffffff; /* footer 텍스트 */
|
||||
--color-footer-accent: #ffee33; /* footer 강조 (em) */
|
||||
|
||||
/* ══ 2층: 블록 의미색 ══ */
|
||||
/* 특정 블록 유형에서 의미를 가지는 색 */
|
||||
|
||||
/* 3열 비교 (prerequisites-3col) */
|
||||
--color-col-1-from: #0D78D0; /* 1열 gradient 시작 */
|
||||
--color-col-1-to: #023056; /* 1열 gradient 끝 */
|
||||
--color-col-2-from: #FF9A23; /* 2열 gradient 시작 */
|
||||
--color-col-2-to: #CC5200; /* 2열 gradient 끝 */
|
||||
--color-col-3-from: #39BE49; /* 3열 gradient 시작 */
|
||||
--color-col-3-to: #23742C; /* 3열 gradient 끝 */
|
||||
|
||||
/* 비교 블록 (compare) */
|
||||
--color-compare-left: #5c3714; /* 좌측 (AS-IS 계열) */
|
||||
--color-compare-right: #285b4a; /* 우측 (TO-BE 계열) */
|
||||
--color-compare-badge: #ae3607; /* VS 뱃지 */
|
||||
|
||||
/* 다크 카드 (direct render) */
|
||||
--color-dark-card-1: #1a365d; /* 카드 1 배경 */
|
||||
--color-dark-card-2: #1e3a2f; /* 카드 2 배경 */
|
||||
--color-dark-card-3: #3b1f2b; /* 카드 3 배경 */
|
||||
--color-dark-card-title: #fbbf24; /* 다크카드 제목 (금색) */
|
||||
--color-dark-card-body: #e2e8f0; /* 다크카드 본문 */
|
||||
|
||||
/* 표 */
|
||||
--color-table-header-bg: #64748b; /* 표 헤더 배경 */
|
||||
--color-table-header-text: #ffffff; /* 표 헤더 텍스트 */
|
||||
|
||||
/* 블록 제목 gradient (Figma 원본) */
|
||||
--color-block-title-from: #CC5200; /* 주황 gradient 시작 */
|
||||
--color-block-title-to: #883700; /* 주황 gradient 끝 */
|
||||
|
||||
/* pill */
|
||||
--color-pill-bg: #1e293b; /* pill 배경 */
|
||||
--color-pill-text: #ffffff; /* pill 텍스트 */
|
||||
}
|
||||
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: 'Noto Sans KR', 'Pretendard', sans-serif;
|
||||
background: #e8ecf0;
|
||||
display: flex; justify-content: center; align-items: center;
|
||||
min-height: 100vh;
|
||||
word-break: keep-all;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
/* ── 16:9 슬라이드 (single, 1280×720) ── */
|
||||
.slide {
|
||||
width: 1280px; height: 720px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,.15);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.slide-bg {
|
||||
position: absolute; inset: 0;
|
||||
background: linear-gradient(180deg, #f0f0f0 0%, #ffffff 100%);
|
||||
z-index: 0;
|
||||
}
|
||||
.slide-title {
|
||||
position: absolute;
|
||||
left: 52px; top: 22px;
|
||||
width: calc(100% - 104px);
|
||||
font-weight: 700;
|
||||
font-size: var(--font-slide-title);
|
||||
line-height: var(--lh-slide-title);
|
||||
background-image: linear-gradient(180deg, #296b55 0%, #123328 100%);
|
||||
-webkit-background-clip: text; background-clip: text;
|
||||
color: transparent;
|
||||
text-shadow: 0 0 2px #322c1e;
|
||||
z-index: 2;
|
||||
}
|
||||
.slide-divider {
|
||||
position: absolute;
|
||||
left: 50px; top: 58px;
|
||||
width: calc(100% - 100px);
|
||||
height: 2px;
|
||||
background: #cbd5e1;
|
||||
z-index: 2;
|
||||
}
|
||||
.slide-body {
|
||||
position: absolute;
|
||||
left: 50px; top: 76px;
|
||||
width: calc(100% - 100px); /* 1180 */
|
||||
height: 585px;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── Layout preset (composition planner v0 — 8 vocabulary) ──
|
||||
단일 .layout-{preset} 클래스에 grid CSS 주입.
|
||||
layout_css = pipeline build_layout_css() 결과 :
|
||||
- horizontal-2 : rows = dynamic px (content_weight + frame_min_height)
|
||||
- 그 외 : rows / cols = fr default (LAYOUT_PRESETS)
|
||||
positions (single / top / bottom / left / right / top-left / ... / grid-2x2 9개)
|
||||
은 .zone 의 inline grid-area 로 지정 — preset CSS 는 areas 만 정의. */
|
||||
.layout-horizontal-2 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 228px 343px;
|
||||
grid-template-areas: "top" "bottom";
|
||||
gap: 14px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* ── Zone — block 가용 공간 최대화. 프레임 자체 styling 이 boundary 역할 ── */
|
||||
.zone {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* ── Frame-family text layout contract (shared, reusable) ──
|
||||
feedback-1 (mvp1.5b_test7): visible improvement 강화.
|
||||
Stronger hanging indent + breathing line spacing + visible hierarchy. */
|
||||
.text-line {
|
||||
font-size: var(--font-body); /* 11px */
|
||||
font-weight: var(--weight-body);
|
||||
line-height: 1.6; /* breathing room */
|
||||
margin: 0;
|
||||
}
|
||||
.text-line + .text-line {
|
||||
margin-top: 4px; /* visible gap between lines (was 2px) */
|
||||
}
|
||||
|
||||
/* bullet line — hanging indent via padding + absolute marker (안정적) */
|
||||
.text-line--bullet {
|
||||
padding-left: 14px;
|
||||
position: relative;
|
||||
}
|
||||
.text-line--bullet::before {
|
||||
content: "•"; /* visible bullet 마커 */
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 0;
|
||||
font-weight: 700;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
/* indent levels — visible nested hierarchy */
|
||||
.text-line--indent-1 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
.text-line--indent-1::before {
|
||||
content: "◦"; /* sub-bullet 다른 마커 */
|
||||
left: 18px;
|
||||
}
|
||||
.text-line--indent-2 {
|
||||
padding-left: 46px;
|
||||
}
|
||||
.text-line--indent-2::before {
|
||||
content: "▪";
|
||||
left: 34px;
|
||||
}
|
||||
/* body line — 마커 없음 */
|
||||
.text-line--body {
|
||||
padding-left: 0;
|
||||
}
|
||||
.text-line strong { color: #000; font-weight: 700; }
|
||||
|
||||
/* ── Transform-block family (frame 29 AS-IS/TO-BE dedicated comparison component) ──
|
||||
feedback-3: bullet rows 가 아닌 *전용 비교 component*. Header (AS-IS / TO-BE) + paired rows.
|
||||
color-coded cells, left-border accent → 단번에 *비교 구조* 인지. */
|
||||
.transform-block {
|
||||
margin-top: 4px;
|
||||
padding: 6px 8px 6px;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
border-radius: 3px;
|
||||
border: 1px solid rgba(0,0,0,0.05);
|
||||
}
|
||||
.transform-block__header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 22px 1fr;
|
||||
gap: 6px;
|
||||
margin-bottom: 4px;
|
||||
padding-bottom: 3px;
|
||||
border-bottom: 1px dashed rgba(0,0,0,0.12);
|
||||
font-size: 9px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.transform-block__label--from { color: #6b5444; }
|
||||
.transform-block__label--to { color: #2563eb; text-align: left; }
|
||||
.transform-rows {
|
||||
display: flex; flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.transform-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 22px 1fr;
|
||||
gap: 6px;
|
||||
align-items: stretch;
|
||||
font-size: var(--font-body);
|
||||
line-height: 1.45;
|
||||
}
|
||||
.transform-row__from {
|
||||
padding: 3px 8px;
|
||||
background: linear-gradient(90deg, rgba(140,120,90,0.16), rgba(140,120,90,0.08));
|
||||
border-left: 2px solid #b8a98a;
|
||||
border-radius: 2px;
|
||||
color: #4b3f30;
|
||||
font-weight: 500;
|
||||
}
|
||||
.transform-row__arrow {
|
||||
text-align: center;
|
||||
color: #2563eb;
|
||||
font-weight: 900;
|
||||
font-size: 14px;
|
||||
align-self: center;
|
||||
}
|
||||
.transform-row__to {
|
||||
padding: 3px 8px;
|
||||
background: linear-gradient(90deg, rgba(37,99,235,0.10), rgba(37,99,235,0.18));
|
||||
border-left: 2px solid #2563eb;
|
||||
border-radius: 2px;
|
||||
color: #1e40af;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* ── Footer pill — feedback-3: body 와 weight balance, 살짝 가벼워짐 ── */
|
||||
.slide-footer {
|
||||
position: absolute;
|
||||
left: 50px; bottom: 8px;
|
||||
width: calc(100% - 100px); /* front 기준 (body 와 정렬) */
|
||||
height: 41px; /* front 기준 */
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
z-index: 2;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
background: linear-gradient(90deg, #3b3523 5%, #263a2a 50%, #113f31 95%);
|
||||
opacity: 0.92; /* slightly lighter */
|
||||
}
|
||||
.slide-footer-text {
|
||||
position: relative; z-index: 1;
|
||||
font-size: 15px; /* was 20px (--font-footer) */
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
text-shadow: 0 0 3px rgba(0,0,0,.4);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.slide-footer-text em { color: #fe3; font-style: normal; }
|
||||
|
||||
.phase-z2-marker {
|
||||
position: absolute;
|
||||
top: 4px; right: 8px;
|
||||
font-size: 9px; color: #94a3b8;
|
||||
font-family: monospace;
|
||||
z-index: 3;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="slide" data-page="1">
|
||||
<div class="slide-bg"></div>
|
||||
<div class="phase-z2-marker">phase_z2 / mvp-1.5b / horizontal-2 / single slide</div>
|
||||
<div class="slide-title">DX 실행 체계 구축 방안</div>
|
||||
<div class="slide-divider"></div>
|
||||
<div class="slide-body">
|
||||
<div class="layout-horizontal-2">
|
||||
|
||||
<div class="zone" data-zone-position="top" data-template-id="three_parallel_requirements" style="grid-area: top;">
|
||||
<!-- Phase Z-2 MVP-1.5b frame-derived adapted block.
|
||||
§17 룰 — Figma 시각 언어 promote, geometry 만 zone-compatible adapt.
|
||||
Legacy templates/blocks/structures/prerequisites-3col.html 의 token-fixed font 접근 학습. -->
|
||||
|
||||
|
||||
<style>
|
||||
.f13b {
|
||||
width: 100%; height: 100%;
|
||||
display: flex; flex-direction: column;
|
||||
gap: 4px;
|
||||
font-family: 'Noto Sans KR', 'Pretendard', sans-serif;
|
||||
word-break: keep-all;
|
||||
}
|
||||
.f13b__title {
|
||||
font-size: var(--font-zone-title);
|
||||
font-weight: 700;
|
||||
line-height: var(--lh-zone-title);
|
||||
background-image: linear-gradient(180deg, #000 0%, #883700 100%);
|
||||
-webkit-background-clip: text; background-clip: text;
|
||||
color: transparent;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.f13b__cols {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
.f13b__col {
|
||||
display: flex;
|
||||
border-top: 2px solid #000; /* PROMOTED line 57 */
|
||||
border-bottom: 2px solid #000;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
background: rgba(255,255,255,0.5);
|
||||
}
|
||||
.f13b__bar {
|
||||
flex: 0 0 50px;
|
||||
display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
padding: 6px 2px;
|
||||
gap: 3px;
|
||||
}
|
||||
.f13b__col--tech .f13b__bar { background: linear-gradient(180deg, #0D78D0 0%, #023056 100%); }
|
||||
.f13b__col--people .f13b__bar { background: linear-gradient(180deg, #FF9A23 0%, #CC5200 100%); }
|
||||
.f13b__col--nature .f13b__bar { background: linear-gradient(180deg, #39BE49 21%, #23742C 100%); }
|
||||
/* PROMOTED Figma frame 13 line 92-93 — main + parenthetical stacked vertically */
|
||||
.f13b__bar-main {
|
||||
font-size: var(--font-sub-title); /* 12px — main word "기술/사람/자연" */
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
display: block;
|
||||
}
|
||||
.f13b__bar-paren {
|
||||
font-size: var(--font-caption); /* 10px — "(디지털/역량/여건)" */
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
display: block;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.f13b__body {
|
||||
flex: 1;
|
||||
display: flex; flex-direction: column;
|
||||
padding: 8px 12px; /* breathing (was 6px 10px) */
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.f13b__section {
|
||||
flex: 1;
|
||||
padding: 6px 0; /* breathing (was 4px) */
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
.f13b__section + .f13b__section {
|
||||
border-top: 2px dashed #000; /* PROMOTED line 103 */
|
||||
margin-top: 6px; /* visible section gap (was 4px) */
|
||||
padding-top: 8px; /* breathing (was 6px) */
|
||||
}
|
||||
/* heading — 부소목차 (사용자 5-layer 직설 2026-05-07): Digital 기술과... 같은 깊이 1 굵은 bullet */
|
||||
.f13b__heading {
|
||||
font-size: var(--font-sub-title); /* 12px — 부소목차 위계 */
|
||||
font-weight: 700;
|
||||
line-height: var(--lh-sub-title);
|
||||
-webkit-background-clip: text; background-clip: text;
|
||||
color: transparent;
|
||||
margin-bottom: 6px; /* visible heading-body gap (was 4px) */
|
||||
}
|
||||
.f13b__col--tech .f13b__heading { background-image: linear-gradient(180deg, #0D78D0 0%, #134D7F 100%); }
|
||||
.f13b__col--people .f13b__heading { background-image: linear-gradient(180deg, #FE900C 0%, #D18B37 100%); }
|
||||
.f13b__col--nature .f13b__heading { background-image: linear-gradient(180deg, #3CA649 21%, #23742C 100%); }
|
||||
|
||||
/* desc — frame-family text layout contract (.text-line 공통 클래스 사용)
|
||||
feedback (mvp1.5b_test5): browser-native ul/li 폐기. */
|
||||
.f13b__desc {
|
||||
color: #3E3523; /* PROMOTED line 118 */
|
||||
overflow: hidden;
|
||||
}
|
||||
/* desc 안 .text-line 색 override */
|
||||
.f13b__desc .text-line { color: #3E3523; }
|
||||
</style>
|
||||
|
||||
<div class="f13b" data-frame-id="1171281190" data-template-id="three_parallel_requirements">
|
||||
<div class="f13b__title">1. DX 시행을 위한 필수 요건</div>
|
||||
<div class="f13b__cols">
|
||||
|
||||
<div class="f13b__col f13b__col--tech">
|
||||
<div class="f13b__bar">
|
||||
<span class="f13b__bar-main">기술</span>
|
||||
|
||||
<span class="f13b__bar-paren">(디지털)</span>
|
||||
|
||||
</div>
|
||||
<div class="f13b__body">
|
||||
|
||||
<div class="f13b__section">
|
||||
<div class="f13b__heading">Digital 기술(S/W, H/W)과 업무 Process의 통합</div>
|
||||
|
||||
<div class="f13b__desc">
|
||||
<div class="text-line text-line--bullet">기존 업무 프로세스에 다양한 디지털 기술을 접목하여 업무 수행</div><div class="text-line text-line--bullet">프로젝트 전반에 걸친 업무 프로세스의 연결 및 조율</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="f13b__section">
|
||||
<div class="f13b__heading">분야별 전문 지식(설계, 시공, 유지관리 등) 보유</div>
|
||||
|
||||
<div class="f13b__desc">
|
||||
<div class="text-line text-line--bullet">건설 전 단계에 대한 근본적인 이해와 지식 및 경험</div><div class="text-line text-line--bullet">최신 토목 기술 트랜드 및 표준 기준 등에 대한 높은 지식</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="f13b__col f13b__col--people">
|
||||
<div class="f13b__bar">
|
||||
<span class="f13b__bar-main">사람</span>
|
||||
|
||||
<span class="f13b__bar-paren">(역량)</span>
|
||||
|
||||
</div>
|
||||
<div class="f13b__body">
|
||||
|
||||
<div class="f13b__section">
|
||||
<div class="f13b__heading">혁신적 사고방식과 창의적 문제 해결 능력</div>
|
||||
|
||||
<div class="f13b__desc">
|
||||
<div class="text-line text-line--bullet">기존 수행 방식과 관습적 사고 등에 의한 접근 방식 탈피</div><div class="text-line text-line--bullet">디지털 기술을 활용한 창의적, 혁신적인 솔루션 제시</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="f13b__section">
|
||||
<div class="f13b__heading">사용자 중심 사고와 DX 수행 경험</div>
|
||||
|
||||
<div class="f13b__desc">
|
||||
<div class="text-line text-line--bullet">사용자의 요구와 기대를 충족시키는 설계 및 구현</div><div class="text-line text-line--bullet">시행착오를 포함한 수행 경험과 사용자 경험(UX)을 반영한 해결 방안 제시</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="f13b__col f13b__col--nature">
|
||||
<div class="f13b__bar">
|
||||
<span class="f13b__bar-main">자연</span>
|
||||
|
||||
<span class="f13b__bar-paren">(여건)</span>
|
||||
|
||||
</div>
|
||||
<div class="f13b__body">
|
||||
|
||||
<div class="f13b__section">
|
||||
<div class="f13b__heading">지속적인 투자 및 실행 의지</div>
|
||||
|
||||
<div class="f13b__desc">
|
||||
<div class="text-line text-line--bullet">기술 도입 초기 단계에 필요한 인력·기간·비용 등의 대규모 투자</div><div class="text-line text-line--bullet">기술 고도화를 위한 지속적인 개선 및 투자 체계 구축</div><div class="text-line text-line--bullet">변화와 혁신을 통해 부가가치를 창출하려는 실행 의지와 추진력</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="zone" data-zone-position="bottom" data-template-id="process_product_two_way" style="grid-area: bottom;">
|
||||
<!-- Phase Z-2 MVP-1.5b frame-derived adapted block.
|
||||
§17 룰 — Figma 시각 언어 promote, geometry 만 zone-compatible adapt. -->
|
||||
|
||||
|
||||
<style>
|
||||
.f29b {
|
||||
width: 100%; height: 100%;
|
||||
display: flex; flex-direction: column;
|
||||
gap: 4px;
|
||||
position: relative;
|
||||
font-family: 'Noto Sans KR', 'Pretendard', sans-serif;
|
||||
word-break: keep-all;
|
||||
overflow: hidden;
|
||||
}
|
||||
.f29b__title {
|
||||
font-size: var(--font-zone-title); /* 13px — frame 13 의 f13b__title 과 동일 위계 */
|
||||
font-weight: 700;
|
||||
line-height: var(--lh-zone-title);
|
||||
background-image: linear-gradient(180deg, #000 0%, #883700 100%);
|
||||
-webkit-background-clip: text; background-clip: text;
|
||||
color: transparent;
|
||||
flex-shrink: 0;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
/* banners — top */
|
||||
.f29b__banners {
|
||||
flex: 0 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 4px;
|
||||
position: relative;
|
||||
height: 36px;
|
||||
}
|
||||
.f29b__banner {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
/* PROMOTED background gradients — figma origin lines 84-98 (header-bg--left/right).
|
||||
원본 SVG 3 개 → CSS gradient 로 재현 (R8/R9 준수). border-radius 9999px = 자동 pill. */
|
||||
.f29b__banner--left {
|
||||
background: linear-gradient(to right,
|
||||
rgba(136, 131, 118, 0.343) 0%,
|
||||
#39321E 73.1%,
|
||||
#39321E 100%);
|
||||
border-radius: 0 9999px 9999px 0;
|
||||
}
|
||||
.f29b__banner--right {
|
||||
background: linear-gradient(to right,
|
||||
#032118 0%,
|
||||
rgba(41, 107, 85, 0.1) 100%);
|
||||
border-radius: 9999px 0 0 9999px;
|
||||
}
|
||||
.f29b__banner-text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
font-size: var(--font-sub-title);
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
text-shadow: 0 0 2px #322C1E;
|
||||
-webkit-background-clip: text; background-clip: text;
|
||||
color: transparent;
|
||||
padding: 0 8px;
|
||||
}
|
||||
/* PROMOTED gradient — lines 101-104 / 110-113 */
|
||||
.f29b__banner--left .f29b__banner-text {
|
||||
background-image:
|
||||
linear-gradient(90deg, rgb(62,53,35) 0%, rgb(62,53,35) 100%),
|
||||
linear-gradient(180deg, rgb(41,107,85) 0%, rgb(18,51,40) 100%);
|
||||
}
|
||||
.f29b__banner--right .f29b__banner-text {
|
||||
background-image:
|
||||
linear-gradient(90deg, rgb(34,95,74) 0%, rgb(34,95,74) 100%),
|
||||
linear-gradient(180deg, rgb(41,107,85) 0%, rgb(18,51,40) 100%);
|
||||
}
|
||||
|
||||
/* body — 6 cell grid (3 rows × 2 cols) — 좌우 row divider Y 정렬 */
|
||||
/* PROMOTED background — figma origin lines 53-68 (body-bg-left/right).
|
||||
좌(0~50%): #39321E α0.3 (top) → white α0.3 (bottom)
|
||||
우(50~100%): #296B55 α0.3 (top) → white α0.3 (bottom)
|
||||
원본 SVG → CSS multi-bg 로 재현. */
|
||||
.f29b__body {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
min-height: 0;
|
||||
padding-top: 4px;
|
||||
background:
|
||||
linear-gradient(to bottom, rgba(57,50,30,0.3) 0%, rgba(255,255,255,0.3) 100%) 0% 0% / 50% 100% no-repeat,
|
||||
linear-gradient(to bottom, rgba(41,107,85,0.3) 0%, rgba(255,255,255,0.3) 100%) 100% 0% / 50% 100% no-repeat;
|
||||
}
|
||||
|
||||
/* 6 cell grid: 3 rows (section 1/2/3), 2 cols (process/product). 각 row 의 height = max(좌, 우) */
|
||||
.f29b__grid {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-auto-rows: auto;
|
||||
gap: 6px 10px;
|
||||
padding: 4px 8px;
|
||||
height: 100%;
|
||||
align-content: start;
|
||||
}
|
||||
.f29b__cell {
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
/* row 2/3 (3 번째 cell 이후) 위에 dashed divider — 좌우 같은 Y */
|
||||
.f29b__cell:nth-child(n+3) {
|
||||
border-top: 1px dashed rgba(0,0,0,0.15);
|
||||
padding-top: 6px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
/* section-title — 부소목차 (사용자 5-layer 직설 2026-05-07): Analogue 기반... 같은 깊이 0 굵은 bullet */
|
||||
.f29b__section-title {
|
||||
font-size: var(--font-sub-title); /* 12px — 부소목차 위계 */
|
||||
font-weight: 900;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 5px;
|
||||
padding-left: 6px;
|
||||
border-left: 3px solid currentColor;
|
||||
}
|
||||
.f29b__cell--left .f29b__section-title { color: #5C3714; } /* PROMOTED line 125 */
|
||||
.f29b__cell--right .f29b__section-title { color: #084C56; } /* PROMOTED line 126 */
|
||||
.f29b__section-title__sub {
|
||||
font-size: var(--font-caption); /* 10px */
|
||||
margin-left: 3px;
|
||||
}
|
||||
/* f29b 의 본문 = .text-line 공통 contract 사용. bullet color override. */
|
||||
.f29b__cell .text-line--bullet { color: #000; font-weight: 700; }
|
||||
|
||||
/* AS-IS/TO-BE 좌우 + arrow (PROMOTED 구조) */
|
||||
.f29b__transform {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
gap: 4px;
|
||||
align-items: start;
|
||||
}
|
||||
.f29b__transform__list {
|
||||
/* .text-line 공통 contract 그대로. wrapper 만 grid 안의 cell 역할 */
|
||||
}
|
||||
.f29b__transform__arrow {
|
||||
align-self: center;
|
||||
width: 28px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.f29b__transform__arrow img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.f29b__footnote {
|
||||
font-size: var(--font-caption); /* 10px */
|
||||
line-height: var(--lh-caption);
|
||||
color: #333;
|
||||
padding-left: 14px;
|
||||
margin-top: 1px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.f29b__aster-small { font-size: 9px; }
|
||||
</style>
|
||||
|
||||
<div class="f29b" data-frame-id="1171281210" data-template-id="process_product_two_way">
|
||||
|
||||
|
||||
<div class="f29b__title">2. Process의 혁신과 Product의 변화</div>
|
||||
|
||||
|
||||
<div class="f29b__banners">
|
||||
<div class="f29b__banner f29b__banner--left">
|
||||
<div class="f29b__banner-text">과정(Process)의 혁신</div>
|
||||
</div>
|
||||
<div class="f29b__banner f29b__banner--right">
|
||||
<div class="f29b__banner-text">결과(Product)의 변화</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="f29b__body">
|
||||
|
||||
<div class="f29b__grid">
|
||||
|
||||
|
||||
|
||||
<div class="f29b__cell f29b__cell--left" data-frame-slot-id="process_column">
|
||||
|
||||
<div class="f29b__section-title">Analogue 기반 업무의 Digital화</div>
|
||||
|
||||
<div class="transform-block">
|
||||
<div class="transform-block__header">
|
||||
<span class="transform-block__label--from">AS-IS</span>
|
||||
<span></span>
|
||||
<span class="transform-block__label--to">TO-BE</span>
|
||||
</div>
|
||||
<div class="transform-rows">
|
||||
|
||||
<div class="transform-row">
|
||||
<div class="transform-row__from">개념·문서·행정 절차 중심</div>
|
||||
<div class="transform-row__arrow">➜</div>
|
||||
<div class="transform-row__to">시각화된 목적물, 소통, 투명성 중심</div>
|
||||
</div>
|
||||
|
||||
<div class="transform-row">
|
||||
<div class="transform-row__from">2D 도면, 전문가, 규정</div>
|
||||
<div class="transform-row__arrow">➜</div>
|
||||
<div class="transform-row__to">3D 모델, 참여자, 실체</div>
|
||||
</div>
|
||||
|
||||
<div class="transform-row">
|
||||
<div class="transform-row__from">업무 구분(단절), 책임</div>
|
||||
<div class="transform-row__arrow">➜</div>
|
||||
<div class="transform-row__to">협업(융·복합), 창의성</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="f29b__cell f29b__cell--right" data-frame-slot-id="product_column">
|
||||
|
||||
<div class="f29b__section-title">Copy & Paste로 인해 하향 평준화된 기존 성과물의 품질 향상</div>
|
||||
<div class="text-line text-line--bullet">과거 수작업으로 시행하면서 발생하던 오류 등의 최소화</div><div class="text-line text-line--bullet">정확한 Data에 기반한 계획으로 고품질 성과물 도출</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="f29b__cell f29b__cell--left" data-frame-slot-id="process_column">
|
||||
|
||||
<div class="f29b__section-title">GIS + BIM의 연계</div>
|
||||
<div class="text-line text-line--bullet">지리·지형·지반 등 위치정보(GIS)와 3D모델(형상, 속성정보) 기반의 건설 정보를 포함하는 BIM의 연계를 통한 업무 프로세스의 혁신</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="f29b__cell f29b__cell--right" data-frame-slot-id="product_column">
|
||||
|
||||
<div class="f29b__section-title">Analogue 기반 도서 외 Digital 기반 정보물 추가</div>
|
||||
<div class="text-line text-line--bullet">기존 성과물(도면, 수량, 계산서, 시방서 등)에 3D 모델, Simulation 등의 Digital 기반 정보물 추가</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="f29b__cell f29b__cell--left" data-frame-slot-id="process_column">
|
||||
|
||||
<div class="f29b__section-title">사용자 중심의 Solution 제공</div>
|
||||
<div class="text-line text-line--bullet">서로 다른 S/W로 작성되어 분절화된 Analogue 방식의 성과물과 정보물을 연계할 수 있는 설계·시공 Solution 제공</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="f29b__cell f29b__cell--right" data-frame-slot-id="product_column">
|
||||
|
||||
<div class="f29b__section-title">Solution을 활용한 업무 효율화</div>
|
||||
<div class="text-line text-line--bullet">Engn. Solution을 통해 성과물에 관한 이슈를 함께 검토·논의하는 협업 환경 조성</div><div class="text-line text-line--bullet">건설 단계별 정보를 디지털 데이터로 축적하여, 건설 전 과정을 통합관리</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide-footer">
|
||||
<div class="slide-footer-text">DX는 필요한 요건과 체계를 갖춘 후 시행해야만 그 효과를 기대할 수 있다.</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 280 KiB |
@@ -1,89 +0,0 @@
|
||||
---
|
||||
title: DX 실행 체계 구축 방안
|
||||
sidebar:
|
||||
order: 02
|
||||
---
|
||||
|
||||
## 1. DX 시행을 위한 필수 요건
|
||||
|
||||
<br/>
|
||||
|
||||
* **기술(디지털)**
|
||||
* **Digital 기술(S/W, H/W)과 업무 Process의 통합**
|
||||
* 기존 업무 프로세스에 다양한 디지털 기술을 접목하여 업무 수행
|
||||
* 프로젝트 전반에 걸친 업무 프로세스의 연결 및 조율
|
||||
* **분야별 전문 지식(설계, 시공, 유지관리 등) 보유**
|
||||
* 건설 전 단계에 대한 근본적인 이해와 지식 및 경험
|
||||
* 최신 토목 기술 트랜드 및 표준 기준 등에 대한 높은 지식
|
||||
|
||||
<br/>
|
||||
|
||||
* **사람(역량)**
|
||||
* **혁신적 사고방식과 창의적 문제 해결 능력**
|
||||
* 기존 수행 방식과 관습적 사고 등에 의한 접근 방식 탈피
|
||||
* 디지털 기술을 활용한 창의적, 혁신적인 솔루션 제시
|
||||
* **사용자 중심 사고와 DX 수행 경험**
|
||||
* 사용자의 요구와 기대를 충족시키는 설계 및 구현
|
||||
* 시행착오를 포함한 수행 경험과 사용자 경험(UX)을 반영한 해결 방안 제시
|
||||
|
||||
<br/>
|
||||
|
||||
* **자연(여건)**
|
||||
* **지속적인 투자 및 실행 의지**
|
||||
* 기술 도입 초기 단계에 필요한 인력·기간·비용 등의 대규모 투자
|
||||
* 기술 고도화를 위한 지속적인 개선 및 투자 체계 구축
|
||||
* 변화와 혁신을 통해 부가가치를 창출하려는 실행 의지와 추진력
|
||||
|
||||
<br/>
|
||||
---
|
||||
|
||||
## 2. Process의 혁신과 Product의 변화
|
||||
|
||||
<br/>
|
||||
|
||||
### 2.1 과정(Process)의 혁신
|
||||
|
||||
* **Analogue 기반 업무의 Digital화**
|
||||
|
||||
| As-is [Analogue] | 구분 | To-be [Digital] |
|
||||
| :--- | :---: | :--- |
|
||||
| **개념·문서·행정 절차 중심** | ➠ | **시각화된 목적물, 소통, 투명성 중심** |
|
||||
| **2D 도면, 전문가, 규정** | ➠ | **3D 모델, 참여자, 실체** |
|
||||
| **업무 구분(단절), 책임** | ➠ | **협업(융·복합), 창의성** |
|
||||
|
||||
<br/>
|
||||
|
||||
* **GIS + BIM의 연계**
|
||||
* 지리·지형·지반 등 위치정보(GIS)와 3D모델(형상, 속성정보) 기반의 건설 정보를 포함하는 BIM의 연계를 통한 업무 프로세스의 혁신
|
||||
|
||||
<br/>
|
||||
|
||||
* **사용자 중심의 Solution 제공**
|
||||
* 서로 다른 S/W로 작성되어 분절화된 Analogue 방식의 성과물과 정보물을 연계할 수 있는 설계·시공 Solution 제공
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
### 2.2 결과(Product)의 변화
|
||||
|
||||
* **Copy & Paste로 인해 하향 평준화된 기존 성과물의 품질 향상**
|
||||
* 과거 수작업으로 시행하면서 발생하던 오류 등의 최소화
|
||||
* 정확한 Data에 기반한 계획으로 고품질 성과물 도출
|
||||
|
||||
<br/>
|
||||
|
||||
* **Analogue 기반 도서 외 Digital 기반 정보물 추가**
|
||||
* 기존 성과물(도면, 수량, 계산서, 시방서 등)에 3D 모델, Simulation 등의 Digital 기반 정보물 추가
|
||||
|
||||
<br/>
|
||||
|
||||
* **Solution을 활용한 업무 효율화**
|
||||
* Engn. Solution을 통해 성과물에 관한 이슈를 함께 검토·논의하는 협업 환경 조성
|
||||
* 건설 단계별 정보를 디지털 데이터로 축적하여, 건설 전 과정을 통합관리
|
||||
|
||||
<br/>
|
||||
---
|
||||
|
||||
:::note[핵심 요약]
|
||||
* **DX는 필요한 요건과 체계를 갖춘 후 시행해야만 그 효과를 기대할 수 있다.**
|
||||
:::
|
||||
@@ -1,21 +0,0 @@
|
||||
{
|
||||
"step_num": 1,
|
||||
"step_name": "mdx_upload",
|
||||
"step_status": "done",
|
||||
"pipeline_path_connected": true,
|
||||
"input": [
|
||||
"samples\\mdx_batch\\03.mdx"
|
||||
],
|
||||
"output": [
|
||||
"step01_mdx_upload.json",
|
||||
"step01_mdx_source.md"
|
||||
],
|
||||
"note": "MDX 원본 그대로 step01_mdx_source.md 에 복사.",
|
||||
"data": {
|
||||
"mdx_path": "samples\\mdx_batch\\03.mdx",
|
||||
"run_id": "mdx03_f29_fix_check",
|
||||
"run_dir": "d:\\ad-hoc\\kei\\design_agent\\data\\runs\\mdx03_f29_fix_check\\phase_z2",
|
||||
"mdx_source_size_bytes": 3213,
|
||||
"mdx_source_lines": 89
|
||||
}
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
{
|
||||
"step_num": 2,
|
||||
"step_name": "normalized",
|
||||
"step_status": "partial",
|
||||
"pipeline_path_connected": true,
|
||||
"input": [
|
||||
"step01_mdx_source.md"
|
||||
],
|
||||
"output": [
|
||||
"step02_normalized.json"
|
||||
],
|
||||
"note": "parse_mdx 결과: title / sections / footer 분리 + raw_content 보존. heading tree 미생성, orphan / details 감지 미완 (Step 2 ⚠ partial — 별 axis). orphans / details 필드는 schema lock — 빈 배열이라도 'detection 미수행' marker.",
|
||||
"data": {
|
||||
"slide_title": "DX 실행 체계 구축 방안",
|
||||
"slide_footer": "DX는 필요한 요건과 체계를 갖춘 후 시행해야만 그 효과를 기대할 수 있다.",
|
||||
"sections_count": 2,
|
||||
"sections": [
|
||||
{
|
||||
"section_id": "03-1",
|
||||
"section_num": 1,
|
||||
"title": "1. DX 시행을 위한 필수 요건",
|
||||
"raw_content_length": 660,
|
||||
"raw_content": "<br/>\n\n* **기술(디지털)**\n * **Digital 기술(S/W, H/W)과 업무 Process의 통합**\n * 기존 업무 프로세스에 다양한 디지털 기술을 접목하여 업무 수행\n * 프로젝트 전반에 걸친 업무 프로세스의 연결 및 조율\n * **분야별 전문 지식(설계, 시공, 유지관리 등) 보유**\n * 건설 전 단계에 대한 근본적인 이해와 지식 및 경험\n * 최신 토목 기술 트랜드 및 표준 기준 등에 대한 높은 지식\n\n<br/>\n\n* **사람(역량)**\n * **혁신적 사고방식과 창의적 문제 해결 능력**\n * 기존 수행 방식과 관습적 사고 등에 의한 접근 방식 탈피\n * 디지털 기술을 활용한 창의적, 혁신적인 솔루션 제시\n * **사용자 중심 사고와 DX 수행 경험**\n * 사용자의 요구와 기대를 충족시키는 설계 및 구현\n * 시행착오를 포함한 수행 경험과 사용자 경험(UX)을 반영한 해결 방안 제시\n\n<br/>\n\n* **자연(여건)**\n * **지속적인 투자 및 실행 의지**\n * 기술 도입 초기 단계에 필요한 인력·기간·비용 등의 대규모 투자\n * 기술 고도화를 위한 지속적인 개선 및 투자 체계 구축\n * 변화와 혁신을 통해 부가가치를 창출하려는 실행 의지와 추진력\n\n<br/>\n---"
|
||||
},
|
||||
{
|
||||
"section_id": "03-2",
|
||||
"section_num": 2,
|
||||
"title": "2. Process의 혁신과 Product의 변화",
|
||||
"raw_content_length": 924,
|
||||
"raw_content": "<br/>\n\n### 2.1 과정(Process)의 혁신\n\n* **Analogue 기반 업무의 Digital화**\n\n | As-is [Analogue] | 구분 | To-be [Digital] |\n | :--- | :---: | :--- |\n | **개념·문서·행정 절차 중심** | ➠ | **시각화된 목적물, 소통, 투명성 중심** |\n | **2D 도면, 전문가, 규정** | ➠ | **3D 모델, 참여자, 실체** |\n | **업무 구분(단절), 책임** | ➠ | **협업(융·복합), 창의성** |\n\n<br/>\n\n* **GIS + BIM의 연계**\n * 지리·지형·지반 등 위치정보(GIS)와 3D모델(형상, 속성정보) 기반의 건설 정보를 포함하는 BIM의 연계를 통한 업무 프로세스의 혁신\n\n<br/>\n\n* **사용자 중심의 Solution 제공**\n * 서로 다른 S/W로 작성되어 분절화된 Analogue 방식의 성과물과 정보물을 연계할 수 있는 설계·시공 Solution 제공\n\n<br/>\n<br/>\n\n### 2.2 결과(Product)의 변화\n\n* **Copy & Paste로 인해 하향 평준화된 기존 성과물의 품질 향상**\n * 과거 수작업으로 시행하면서 발생하던 오류 등의 최소화\n * 정확한 Data에 기반한 계획으로 고품질 성과물 도출\n\n<br/>\n\n* **Analogue 기반 도서 외 Digital 기반 정보물 추가**\n * 기존 성과물(도면, 수량, 계산서, 시방서 등)에 3D 모델, Simulation 등의 Digital 기반 정보물 추가\n\n<br/>\n\n* **Solution을 활용한 업무 효율화**\n * Engn. Solution을 통해 성과물에 관한 이슈를 함께 검토·논의하는 협업 환경 조성\n * 건설 단계별 정보를 디지털 데이터로 축적하여, 건설 전 과정을 통합관리\n\n<br/>\n---"
|
||||
}
|
||||
],
|
||||
"orphans": [],
|
||||
"details": []
|
||||
}
|
||||
}
|
||||
@@ -1,63 +0,0 @@
|
||||
{
|
||||
"step_num": 5,
|
||||
"step_name": "v4_evidence",
|
||||
"step_status": "done",
|
||||
"pipeline_path_connected": true,
|
||||
"input": [
|
||||
"step02_normalized.json",
|
||||
"tests/matching/v4_full32_result.yaml"
|
||||
],
|
||||
"output": [
|
||||
"step05_v4_evidence.json"
|
||||
],
|
||||
"note": "V4 non-reject max-6 후보 list (Step 9 application_plan input). raw 32 entry 는 tests/matching/v4_full32_result.yaml 에 영속. candidate_status='ok' = 후보 1개 이상 / 'no_non_reject_v4_candidate' = 0개 (Step 9 fallback path 입력). Step 6 plan_composition() 은 lookup_v4_match() (rank-1) 그대로 사용 — backward compat (Step 6-A axis 까지).",
|
||||
"data": {
|
||||
"v4_source": "tests\\matching\\v4_full32_result.yaml",
|
||||
"aligned_section_ids": [
|
||||
"03-1",
|
||||
"03-2"
|
||||
],
|
||||
"evidence_per_section": [
|
||||
{
|
||||
"section_id": "03-1",
|
||||
"v4_candidates": [
|
||||
{
|
||||
"template_id": "three_parallel_requirements",
|
||||
"frame_id": "1171281190",
|
||||
"frame_number": 13,
|
||||
"confidence": 0.9268,
|
||||
"label": "use_as_is"
|
||||
},
|
||||
{
|
||||
"template_id": "dx_sw_necessity_three_perspectives",
|
||||
"frame_id": "1171281198",
|
||||
"frame_number": 20,
|
||||
"confidence": 0.8413,
|
||||
"label": "light_edit"
|
||||
}
|
||||
],
|
||||
"candidate_status": "ok"
|
||||
},
|
||||
{
|
||||
"section_id": "03-2",
|
||||
"v4_candidates": [
|
||||
{
|
||||
"template_id": "process_product_two_way",
|
||||
"frame_id": "1171281210",
|
||||
"frame_number": 29,
|
||||
"confidence": 0.9198,
|
||||
"label": "use_as_is"
|
||||
},
|
||||
{
|
||||
"template_id": "bim_adoption_central_split",
|
||||
"frame_id": "1171281208",
|
||||
"frame_number": 27,
|
||||
"confidence": 0.6278,
|
||||
"label": "restructure"
|
||||
}
|
||||
],
|
||||
"candidate_status": "ok"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -1,180 +0,0 @@
|
||||
{
|
||||
"step_num": 6,
|
||||
"step_name": "composition_plan",
|
||||
"step_status": "done",
|
||||
"pipeline_path_connected": true,
|
||||
"input": [
|
||||
"step02_normalized.json",
|
||||
"step05_v4_evidence.json"
|
||||
],
|
||||
"output": [
|
||||
"step06_composition_plan.json"
|
||||
],
|
||||
"note": "composition v0 count-based — sections → candidates → score → greedy select. Step 6-A (사용자 lock 2026-05-08): selected_units[i].v4_candidates 추가 (non-reject max-6 후보 list, candidates[0] = 단일 frame_* 와 일관). logic 무변 — runtime 결과 동일. Step 9 application_plan input.",
|
||||
"data": {
|
||||
"selected_units_count": 2,
|
||||
"layout_preset_decided": "horizontal-2",
|
||||
"candidates_summary": [
|
||||
{
|
||||
"source_section_ids": [
|
||||
"03-1"
|
||||
],
|
||||
"merge_type": "single",
|
||||
"template_id": "three_parallel_requirements",
|
||||
"label": "use_as_is",
|
||||
"phase_z_status": "matched_zone",
|
||||
"score": 0.9268,
|
||||
"selection_state": "selected",
|
||||
"auto_selectable": true,
|
||||
"filter_reasons": [],
|
||||
"notes": [],
|
||||
"capacity_fit": {
|
||||
"item_count": 3,
|
||||
"source_shape": "top_bullets",
|
||||
"capacity": {
|
||||
"strict": 3,
|
||||
"min": null,
|
||||
"max": null,
|
||||
"truncate_at": null,
|
||||
"pad_to": null
|
||||
},
|
||||
"fit_status": "ok",
|
||||
"mismatch_reason": null
|
||||
}
|
||||
},
|
||||
{
|
||||
"source_section_ids": [
|
||||
"03-2"
|
||||
],
|
||||
"merge_type": "single",
|
||||
"template_id": "process_product_two_way",
|
||||
"label": "use_as_is",
|
||||
"phase_z_status": "matched_zone",
|
||||
"score": 0.9198,
|
||||
"selection_state": "selected",
|
||||
"auto_selectable": true,
|
||||
"filter_reasons": [],
|
||||
"notes": [],
|
||||
"capacity_fit": {
|
||||
"item_count": 2,
|
||||
"source_shape": "h3_subsections",
|
||||
"capacity": {
|
||||
"strict": 2,
|
||||
"min": null,
|
||||
"max": null,
|
||||
"truncate_at": null,
|
||||
"pad_to": null
|
||||
},
|
||||
"fit_status": "ok",
|
||||
"mismatch_reason": null
|
||||
}
|
||||
}
|
||||
],
|
||||
"candidates_total": 2,
|
||||
"candidates_viable_auto": 2,
|
||||
"selected_units": [
|
||||
{
|
||||
"source_section_ids": [
|
||||
"03-1"
|
||||
],
|
||||
"merge_type": "single",
|
||||
"frame_id": "1171281190",
|
||||
"frame_number": 13,
|
||||
"frame_template_id": "three_parallel_requirements",
|
||||
"label": "use_as_is",
|
||||
"score": 0.9268,
|
||||
"phase_z_status": "matched_zone",
|
||||
"rationale": {
|
||||
"capacity_fit": {
|
||||
"item_count": 3,
|
||||
"source_shape": "top_bullets",
|
||||
"capacity": {
|
||||
"strict": 3,
|
||||
"min": null,
|
||||
"max": null,
|
||||
"truncate_at": null,
|
||||
"pad_to": null
|
||||
},
|
||||
"fit_status": "ok",
|
||||
"mismatch_reason": null
|
||||
},
|
||||
"frame_compat": 0.9268,
|
||||
"confidence": 0.9268,
|
||||
"label": "use_as_is",
|
||||
"label_weight": 1.0,
|
||||
"merge_type": "single",
|
||||
"hierarchy_coherence": null,
|
||||
"density_score": null
|
||||
},
|
||||
"notes": [],
|
||||
"v4_candidates": [
|
||||
{
|
||||
"template_id": "three_parallel_requirements",
|
||||
"frame_id": "1171281190",
|
||||
"frame_number": 13,
|
||||
"confidence": 0.9268,
|
||||
"label": "use_as_is"
|
||||
},
|
||||
{
|
||||
"template_id": "dx_sw_necessity_three_perspectives",
|
||||
"frame_id": "1171281198",
|
||||
"frame_number": 20,
|
||||
"confidence": 0.8413,
|
||||
"label": "light_edit"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"source_section_ids": [
|
||||
"03-2"
|
||||
],
|
||||
"merge_type": "single",
|
||||
"frame_id": "1171281210",
|
||||
"frame_number": 29,
|
||||
"frame_template_id": "process_product_two_way",
|
||||
"label": "use_as_is",
|
||||
"score": 0.9198,
|
||||
"phase_z_status": "matched_zone",
|
||||
"rationale": {
|
||||
"capacity_fit": {
|
||||
"item_count": 2,
|
||||
"source_shape": "h3_subsections",
|
||||
"capacity": {
|
||||
"strict": 2,
|
||||
"min": null,
|
||||
"max": null,
|
||||
"truncate_at": null,
|
||||
"pad_to": null
|
||||
},
|
||||
"fit_status": "ok",
|
||||
"mismatch_reason": null
|
||||
},
|
||||
"frame_compat": 0.9198,
|
||||
"confidence": 0.9198,
|
||||
"label": "use_as_is",
|
||||
"label_weight": 1.0,
|
||||
"merge_type": "single",
|
||||
"hierarchy_coherence": null,
|
||||
"density_score": null
|
||||
},
|
||||
"notes": [],
|
||||
"v4_candidates": [
|
||||
{
|
||||
"template_id": "process_product_two_way",
|
||||
"frame_id": "1171281210",
|
||||
"frame_number": 29,
|
||||
"confidence": 0.9198,
|
||||
"label": "use_as_is"
|
||||
},
|
||||
{
|
||||
"template_id": "bim_adoption_central_split",
|
||||
"frame_id": "1171281208",
|
||||
"frame_number": 27,
|
||||
"confidence": 0.6278,
|
||||
"label": "restructure"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
{
|
||||
"step_num": 7,
|
||||
"step_name": "layout",
|
||||
"step_status": "partial",
|
||||
"pipeline_path_connected": true,
|
||||
"input": [
|
||||
"step06_composition_plan.json"
|
||||
],
|
||||
"output": [
|
||||
"step07_layout.json",
|
||||
"step07_selected_layout.html"
|
||||
],
|
||||
"note": "count-based v0 — 들여쓰기 / 정렬 미세 layout 미구현 (Step 7 ⚠ partial). Step 7-conn (사용자 lock 2026-05-08): unit_count → layout_candidates list (select_layout_candidates) artifact 기록. default 결정 자체는 무변 — candidates[0] 가 default (default_selection: true), 나머지는 alternative. Step 9 application_plan input.",
|
||||
"data": {
|
||||
"layout_preset": "horizontal-2",
|
||||
"layout_css": {
|
||||
"areas": "\"top\" \"bottom\"",
|
||||
"cols": "1fr",
|
||||
"rows": "228px 343px",
|
||||
"heights_px": [
|
||||
228,
|
||||
343
|
||||
],
|
||||
"ratios": [
|
||||
0.39,
|
||||
0.586
|
||||
],
|
||||
"computation": "min_height_first + content_weight_distribution",
|
||||
"dynamic_rows": true,
|
||||
"raw_zone_layout": {
|
||||
"computation": "min_height_first + content_weight_distribution",
|
||||
"slide_body_height": 585,
|
||||
"gap": 14,
|
||||
"available_after_gap": 571,
|
||||
"min_heights_px": [
|
||||
228,
|
||||
342
|
||||
],
|
||||
"min_scaled": true,
|
||||
"total_min_height": 570,
|
||||
"remaining_after_min": 1,
|
||||
"content_weights": [
|
||||
{
|
||||
"position": "top",
|
||||
"template_id": "three_parallel_requirements",
|
||||
"score": 4.425
|
||||
},
|
||||
{
|
||||
"position": "bottom",
|
||||
"template_id": "process_product_two_way",
|
||||
"score": 7.305
|
||||
}
|
||||
],
|
||||
"weight_shares": [
|
||||
0.377,
|
||||
0.623
|
||||
],
|
||||
"extras_px": [
|
||||
0,
|
||||
1
|
||||
],
|
||||
"heights_px": [
|
||||
228,
|
||||
343
|
||||
],
|
||||
"ratios": [
|
||||
0.39,
|
||||
0.586
|
||||
]
|
||||
}
|
||||
},
|
||||
"zones_count": 2,
|
||||
"unit_count": 2,
|
||||
"layout_candidates": [
|
||||
"horizontal-2",
|
||||
"vertical-2"
|
||||
]
|
||||
}
|
||||
}
|
||||
-122
@@ -1,122 +0,0 @@
|
||||
{
|
||||
"step_num": 8,
|
||||
"step_name": "zone_region_ratios",
|
||||
"step_status": "partial",
|
||||
"pipeline_path_connected": true,
|
||||
"input": [
|
||||
"step07_layout.json",
|
||||
"step10_frame_contract.json"
|
||||
],
|
||||
"output": [
|
||||
"step08_zone_region_ratios.json",
|
||||
"step08_zone_content_placement.html"
|
||||
],
|
||||
"note": "계획값 only. 실측값은 Step 14 (visual_check). zone-level 만 dynamic, region-level (sub_zone 안 sections) 은 균등 분배 (1/1/1). F29 처럼 비균등 콘텐츠 (transform_table + plain) 는 첫 cell 부족 가능 — Step 8 ⚠ partial. Step 8-conn (사용자 lock 2026-05-08): per_zone_plan[i] 에 region_layout_candidates + display_strategy_candidates 추가 (passive 기록). placeholder signals = text-only / region_count=1 (Step 3/4 부재 종속). 실제 content_object 신호 활성화는 별 axis. Step 9 application_plan input.",
|
||||
"data": {
|
||||
"zone_heights_px_planned": [
|
||||
228,
|
||||
343
|
||||
],
|
||||
"zone_ratios_planned": [
|
||||
0.39,
|
||||
0.586
|
||||
],
|
||||
"per_zone_plan": [
|
||||
{
|
||||
"position": "top",
|
||||
"zone_height_px_planned": 228,
|
||||
"zone_ratio_planned": 0.39,
|
||||
"min_height_px": 230,
|
||||
"frame_cardinality_strict": 3,
|
||||
"sub_zones_planned": [
|
||||
{
|
||||
"id": "pillar_1",
|
||||
"role": "main_text",
|
||||
"accepts": [
|
||||
"text_block"
|
||||
],
|
||||
"cardinality_strict": 1,
|
||||
"partial_target_path": ".f13b__cols > .f13b__col:nth-child(1)"
|
||||
},
|
||||
{
|
||||
"id": "pillar_2",
|
||||
"role": "main_text",
|
||||
"accepts": [
|
||||
"text_block"
|
||||
],
|
||||
"cardinality_strict": 1,
|
||||
"partial_target_path": ".f13b__cols > .f13b__col:nth-child(2)"
|
||||
},
|
||||
{
|
||||
"id": "pillar_3",
|
||||
"role": "main_text",
|
||||
"accepts": [
|
||||
"text_block"
|
||||
],
|
||||
"cardinality_strict": 1,
|
||||
"partial_target_path": ".f13b__cols > .f13b__col:nth-child(3)"
|
||||
}
|
||||
],
|
||||
"child_distribution_note": "현재 child zone (sub_zones 안 sections) 균등 분배 — Step 8 region-level ratio ⚠ partial.",
|
||||
"region_layout_candidates": [
|
||||
"region-single"
|
||||
],
|
||||
"display_strategy_candidates": [
|
||||
"inline_full",
|
||||
"inline_preview_with_details",
|
||||
"details_only"
|
||||
]
|
||||
},
|
||||
{
|
||||
"position": "bottom",
|
||||
"zone_height_px_planned": 343,
|
||||
"zone_ratio_planned": 0.586,
|
||||
"min_height_px": 345,
|
||||
"frame_cardinality_strict": 2,
|
||||
"sub_zones_planned": [
|
||||
{
|
||||
"id": "process_column",
|
||||
"role": "main_text",
|
||||
"accepts": [
|
||||
"text_block",
|
||||
"transform_table"
|
||||
],
|
||||
"cardinality_strict": 3,
|
||||
"partial_target_path": ".f29b__grid .f29b__cell--left"
|
||||
},
|
||||
{
|
||||
"id": "product_column",
|
||||
"role": "main_text",
|
||||
"accepts": [
|
||||
"text_block"
|
||||
],
|
||||
"cardinality_strict": 3,
|
||||
"partial_target_path": ".f29b__grid .f29b__cell--right"
|
||||
}
|
||||
],
|
||||
"child_distribution_note": "현재 child zone (sub_zones 안 sections) 균등 분배 — Step 8 region-level ratio ⚠ partial.",
|
||||
"region_layout_candidates": [
|
||||
"region-single"
|
||||
],
|
||||
"display_strategy_candidates": [
|
||||
"inline_full",
|
||||
"inline_preview_with_details",
|
||||
"details_only"
|
||||
]
|
||||
}
|
||||
],
|
||||
"step8_conn_placeholder_signals": {
|
||||
"region_count": 1,
|
||||
"content_type": "text_block",
|
||||
"flow_type": null,
|
||||
"role_pattern": null,
|
||||
"ratio_asymmetric": false,
|
||||
"has_visual_element": false,
|
||||
"details_presence": false,
|
||||
"large_table": false,
|
||||
"long_text": false,
|
||||
"fits_in_region": null,
|
||||
"_note": "Step 3/4 부재 종속 placeholder — 모든 zone 을 text-only / region_count=1 로 가정. 실제 content_object 신호 활성화는 별 axis."
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,135 +0,0 @@
|
||||
{
|
||||
"step_num": 9,
|
||||
"step_name": "application_plan",
|
||||
"step_status": "partial",
|
||||
"pipeline_path_connected": true,
|
||||
"input": [
|
||||
"step05_v4_evidence.json",
|
||||
"step06_composition_plan.json",
|
||||
"step07_layout.json",
|
||||
"step08_zone_region_ratios.json"
|
||||
],
|
||||
"output": [
|
||||
"step09_application_plan.json",
|
||||
"step09_application_plan.html"
|
||||
],
|
||||
"note": "Step 9 v0 passive application_plan trace (사용자 lock 2026-05-08). V4 후보 + layout / region / display 후보 + V4 label → application_mode 변환을 side-by-side 로 기록. v0 invariant 5 가지 (status.md §4) 만족. Step 6 의 default 결정 그대로 (current_default_candidate). auto decision 은 Step 9 v1 (별 axis). region/display 후보는 Step 8-conn 의 placeholder signal 종속 (Step 3/4 부재).",
|
||||
"data": {
|
||||
"units": [
|
||||
{
|
||||
"unit_id": "03-1",
|
||||
"layout_preset": "horizontal-2",
|
||||
"layout_candidates": [
|
||||
"horizontal-2",
|
||||
"vertical-2"
|
||||
],
|
||||
"region_layout_candidates": [
|
||||
"region-single"
|
||||
],
|
||||
"display_strategy_candidates": [
|
||||
"inline_full",
|
||||
"inline_preview_with_details",
|
||||
"details_only"
|
||||
],
|
||||
"candidate_status": "ok",
|
||||
"application_status": "ok",
|
||||
"current_default_candidate": "three_parallel_requirements",
|
||||
"v4_candidates": [
|
||||
{
|
||||
"template_id": "three_parallel_requirements",
|
||||
"frame_id": "1171281190",
|
||||
"frame_number": 13,
|
||||
"confidence": 0.9268,
|
||||
"label": "use_as_is"
|
||||
},
|
||||
{
|
||||
"template_id": "dx_sw_necessity_three_perspectives",
|
||||
"frame_id": "1171281198",
|
||||
"frame_number": 20,
|
||||
"confidence": 0.8413,
|
||||
"label": "light_edit"
|
||||
}
|
||||
],
|
||||
"application_candidates": [
|
||||
{
|
||||
"template_id": "three_parallel_requirements",
|
||||
"frame_id": "1171281190",
|
||||
"v4_label": "use_as_is",
|
||||
"application_mode": "direct_insert",
|
||||
"auto_applicable": true,
|
||||
"required_changes": [],
|
||||
"delegated_to": "step10_contract_check"
|
||||
},
|
||||
{
|
||||
"template_id": "dx_sw_necessity_three_perspectives",
|
||||
"frame_id": "1171281198",
|
||||
"v4_label": "light_edit",
|
||||
"application_mode": "same_frame_with_adjustment",
|
||||
"auto_applicable": true,
|
||||
"required_changes": [],
|
||||
"delegated_to": "step10_contract_check"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"unit_id": "03-2",
|
||||
"layout_preset": "horizontal-2",
|
||||
"layout_candidates": [
|
||||
"horizontal-2",
|
||||
"vertical-2"
|
||||
],
|
||||
"region_layout_candidates": [
|
||||
"region-single"
|
||||
],
|
||||
"display_strategy_candidates": [
|
||||
"inline_full",
|
||||
"inline_preview_with_details",
|
||||
"details_only"
|
||||
],
|
||||
"candidate_status": "ok",
|
||||
"application_status": "ok",
|
||||
"current_default_candidate": "process_product_two_way",
|
||||
"v4_candidates": [
|
||||
{
|
||||
"template_id": "process_product_two_way",
|
||||
"frame_id": "1171281210",
|
||||
"frame_number": 29,
|
||||
"confidence": 0.9198,
|
||||
"label": "use_as_is"
|
||||
},
|
||||
{
|
||||
"template_id": "bim_adoption_central_split",
|
||||
"frame_id": "1171281208",
|
||||
"frame_number": 27,
|
||||
"confidence": 0.6278,
|
||||
"label": "restructure"
|
||||
}
|
||||
],
|
||||
"application_candidates": [
|
||||
{
|
||||
"template_id": "process_product_two_way",
|
||||
"frame_id": "1171281210",
|
||||
"v4_label": "use_as_is",
|
||||
"application_mode": "direct_insert",
|
||||
"auto_applicable": true,
|
||||
"required_changes": [],
|
||||
"delegated_to": "step10_contract_check"
|
||||
},
|
||||
{
|
||||
"template_id": "bim_adoption_central_split",
|
||||
"frame_id": "1171281208",
|
||||
"v4_label": "restructure",
|
||||
"application_mode": "layout_or_region_change",
|
||||
"auto_applicable": false,
|
||||
"required_changes": [],
|
||||
"delegated_to": "human_review"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"candidate_status_summary": {
|
||||
"units_with_no_v4_candidate": []
|
||||
},
|
||||
"v0_lock_note": "Step 9 v0 passive (사용자 lock 2026-05-08). Step 6 default 그대로 사용 — runtime 결과 byte-동일. auto decision / scoring 은 Step 9 v1 (별 axis)."
|
||||
}
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
{
|
||||
"step_num": 20,
|
||||
"step_name": "slide_status",
|
||||
"step_status": "done",
|
||||
"pipeline_path_connected": true,
|
||||
"input": [
|
||||
"step14_visual_check.json",
|
||||
"step17_retry_trace.json",
|
||||
"step19_next_action.json"
|
||||
],
|
||||
"output": [
|
||||
"step20_slide_status.json",
|
||||
"step20_final_status.html"
|
||||
],
|
||||
"note": "자동 파이프라인 최종 결과 보고. overall = PASS/RENDERED_WITH_VISUAL_REGRESSION/PARTIAL_COVERAGE 등.",
|
||||
"data": {
|
||||
"rendered": true,
|
||||
"visual_check_passed": true,
|
||||
"full_mdx_coverage": true,
|
||||
"aligned_section_ids": [
|
||||
"03-1",
|
||||
"03-2"
|
||||
],
|
||||
"covered_section_ids": [
|
||||
"03-1",
|
||||
"03-2"
|
||||
],
|
||||
"filtered_section_ids": [],
|
||||
"filtered_section_reasons": [],
|
||||
"visual_fail_reasons": [],
|
||||
"adapter_needed_count": 0,
|
||||
"adapter_needed_units": [],
|
||||
"content_truncated_count": 0,
|
||||
"content_truncated_units": [],
|
||||
"overall": "PASS",
|
||||
"note": "자동 파이프라인 결과 보고. review/UI 개념 X. final.html 파일명 != PASS 의미. overall == PASS 는 visual OK + full coverage + adapter_needed=0 일 때만. adapter_needed_count > 0 = mapper 가 contract 와 안 맞아 자동 렌더 못 한 zone 존재. content_truncated_count > 0 = builder 가 truncate 한 zone 존재 (rendered 됐지만 일부 콘텐츠 손실)."
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,992 +0,0 @@
|
||||
<!-- Phase Z-2 MVP-1.5b — single slide + Type B layout (top/bottom zones).
|
||||
원래 Phase Z 설계 복귀: MDX 1 = slide 1, layout preset = zone 분할, frame-derived block ⊂ zone. -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1280">
|
||||
<title>DX 지연 요인</title>
|
||||
<style>
|
||||
/* ── existing tokens (inlined) ── */
|
||||
/* === typography.css === */
|
||||
/* ══════════════════════════════════════
|
||||
Typography Tokens v1
|
||||
══════════════════════════════════════
|
||||
슬라이드 전체의 공통 글자 위계.
|
||||
모든 블록은 이 토큰을 참조한다.
|
||||
직접값(font-size: 11px) 금지 → var(--font-body) 사용.
|
||||
══════════════════════════════════════ */
|
||||
|
||||
:root {
|
||||
/* ── 1층: Global Hierarchy ── */
|
||||
|
||||
/* 대목차: 슬라이드 상단 제목 */
|
||||
--font-slide-title: 22px;
|
||||
--weight-slide-title: 700;
|
||||
--lh-slide-title: 1.4;
|
||||
|
||||
/* 중목차: zone 제목 */
|
||||
--font-zone-title: 16px;
|
||||
--weight-zone-title: 700;
|
||||
--lh-zone-title: 1.4;
|
||||
|
||||
/* 소목차: 블록 내 소제목, 카드 제목 */
|
||||
--font-sub-title: 12px;
|
||||
--weight-sub-title: 700;
|
||||
--lh-sub-title: 1.45;
|
||||
|
||||
/* 본문: 블릿, 설명 텍스트 */
|
||||
--font-body: 10px;
|
||||
--weight-body: 500;
|
||||
--lh-body: 1.55;
|
||||
|
||||
/* 캡션: 각주, 출처, 보조 텍스트 */
|
||||
--font-caption: 10px;
|
||||
--weight-caption: 400;
|
||||
--lh-caption: 1.4;
|
||||
|
||||
/* footer: 핵심 인사이트 pill */
|
||||
--font-footer: 20px;
|
||||
--weight-footer: 700;
|
||||
--lh-footer: 1.2;
|
||||
|
||||
/* ── 2층: Component Semantic Tokens ── */
|
||||
/* 가까운 위계에서 기본값, 필요시 override */
|
||||
|
||||
/* 본문 강조 (인라인 heading) */
|
||||
--font-body-strong: var(--font-body);
|
||||
--weight-body-strong: 600;
|
||||
|
||||
/* 자세히보기 링크 */
|
||||
--font-detail-link: var(--font-caption);
|
||||
--weight-detail-link: 500;
|
||||
|
||||
/* pill/badge 라벨 */
|
||||
--font-pill-label: var(--font-sub-title);
|
||||
--weight-pill-label: 700;
|
||||
|
||||
/* 표 헤더 */
|
||||
--font-table-header: var(--font-sub-title);
|
||||
--weight-table-header: 700;
|
||||
|
||||
/* 표 셀 */
|
||||
--font-table-cell: var(--font-body);
|
||||
--weight-table-cell: 400;
|
||||
|
||||
/* 비교 뱃지 */
|
||||
--font-compare-badge: var(--font-sub-title);
|
||||
--weight-compare-badge: 700;
|
||||
|
||||
/* 강조 인용 */
|
||||
--font-callout: var(--font-sub-title);
|
||||
--weight-callout: 700;
|
||||
|
||||
/* 상단 라벨 (overline) */
|
||||
--font-overline: var(--font-caption);
|
||||
--weight-overline: 600;
|
||||
--ls-overline: 0.05em;
|
||||
}
|
||||
|
||||
|
||||
/* === spacing.css === */
|
||||
/* ══════════════════════════════════════
|
||||
Spacing Tokens v1
|
||||
══════════════════════════════════════
|
||||
여백/간격/들여쓰기 공통 기준.
|
||||
══════════════════════════════════════ */
|
||||
|
||||
:root {
|
||||
/* ── 기본 스케일 ── */
|
||||
--space-xs: 4px;
|
||||
--space-sm: 8px;
|
||||
--space-md: 12px;
|
||||
--space-lg: 16px;
|
||||
--space-xl: 24px;
|
||||
|
||||
/* ── slide-base 레이아웃 ── */
|
||||
--slide-padding-x: 40px; /* 본문 좌우 여백 */
|
||||
--slide-title-left: 52px; /* 대목차 시작 */
|
||||
--slide-title-top: 22px; /* 대목차 위치 */
|
||||
--slide-divider-top: 58px; /* 구분선 위치 (slide_base.html 와 일치 2026-05-07) */
|
||||
--slide-body-top: 76px; /* 본문 시작 (사용자 직설: divider-body 16px) */
|
||||
--slide-body-height: 585px; /* 본문 높이 (사용자 직설: body-footer 10px) */
|
||||
--slide-footer-bottom: 8px; /* footer 하단 여백 (slide_base.html 와 일치) */
|
||||
--slide-footer-height: 41px; /* footer 높이 */
|
||||
|
||||
/* ── zone ── */
|
||||
--zone-gap: 8px; /* zone 간 간격 */
|
||||
--zone-padding-left: 12px; /* zone 안쪽 좌측 여백 */
|
||||
--zone-padding-right: 8px; /* zone 안쪽 우측 여백 */
|
||||
--zone-title-mb: 8px; /* zone 제목 아래 여백 */
|
||||
|
||||
/* ── 블록 공통 ── */
|
||||
--card-padding: 16px; /* 카드 내부 여백 */
|
||||
--card-padding-sm: 8px; /* 작은 카드 내부 여백 */
|
||||
--card-gap: 12px; /* 카드 간 간격 */
|
||||
--card-radius: 6px; /* 카드 모서리 */
|
||||
|
||||
/* ── 블릿/텍스트 ── */
|
||||
--bullet-indent: 14px; /* 불릿 hanging indent */
|
||||
--bullet-gap: 2px; /* 불릿 항목 간 간격 */
|
||||
--heading-gap: 4px; /* 소제목 아래 간격 */
|
||||
--section-gap: 10px; /* 섹션 간 간격 */
|
||||
|
||||
/* ── flex/grid 기본 ── */
|
||||
--flex-gap: 12px; /* 기본 flex gap */
|
||||
--flex-gap-sm: 6px; /* 좁은 flex gap */
|
||||
--grid-gap: 16px; /* 기본 grid gap */
|
||||
}
|
||||
|
||||
|
||||
/* === colors.css === */
|
||||
/* ══════════════════════════════════════
|
||||
Color Tokens v1
|
||||
══════════════════════════════════════
|
||||
2층 구조: 공통 테마색 + 블록 의미색.
|
||||
══════════════════════════════════════ */
|
||||
|
||||
:root {
|
||||
/* ══ 1층: 공통 테마색 ══ */
|
||||
/* 모든 블록이 공유하는 기본 팔레트 */
|
||||
|
||||
/* 텍스트 */
|
||||
--color-title: #1e293b; /* 제목 (진한 남색) */
|
||||
--color-zone-title: #1a365d; /* zone 중목차 제목 */
|
||||
--color-body: #475569; /* 본문 */
|
||||
--color-body-strong: #1e293b; /* 본문 강조 */
|
||||
--color-caption: #94a3b8; /* 캡션, 보조 */
|
||||
--color-muted: #64748b; /* 약한 텍스트 */
|
||||
|
||||
/* 배경 */
|
||||
--color-bg: #ffffff; /* 슬라이드 배경 */
|
||||
--color-bg-subtle: #f8fafc; /* 카드/영역 배경 */
|
||||
--color-bg-page: #e8ecf0; /* 페이지 배경 (슬라이드 바깥) */
|
||||
|
||||
/* 보더 */
|
||||
--color-border: #e2e8f0; /* 기본 보더 */
|
||||
--color-border-strong: #cbd5e1; /* 강한 보더 */
|
||||
|
||||
/* 강조 */
|
||||
--color-accent: #2563eb; /* 링크, 강조 (파랑) */
|
||||
--color-accent-hover: #eff6ff; /* 링크 hover 배경 */
|
||||
--color-danger: #dc2626; /* 경고, 에러 */
|
||||
|
||||
/* slide-base 전용 */
|
||||
--color-slide-title-from: #296b55; /* 대목차 gradient 시작 */
|
||||
--color-slide-title-to: #123328; /* 대목차 gradient 끝 */
|
||||
--color-footer-bg-from: #3b3523; /* footer gradient 시작 */
|
||||
--color-footer-bg-mid: #263a2a; /* footer gradient 중간 */
|
||||
--color-footer-bg-to: #113f31; /* footer gradient 끝 */
|
||||
--color-footer-text: #ffffff; /* footer 텍스트 */
|
||||
--color-footer-accent: #ffee33; /* footer 강조 (em) */
|
||||
|
||||
/* ══ 2층: 블록 의미색 ══ */
|
||||
/* 특정 블록 유형에서 의미를 가지는 색 */
|
||||
|
||||
/* 3열 비교 (prerequisites-3col) */
|
||||
--color-col-1-from: #0D78D0; /* 1열 gradient 시작 */
|
||||
--color-col-1-to: #023056; /* 1열 gradient 끝 */
|
||||
--color-col-2-from: #FF9A23; /* 2열 gradient 시작 */
|
||||
--color-col-2-to: #CC5200; /* 2열 gradient 끝 */
|
||||
--color-col-3-from: #39BE49; /* 3열 gradient 시작 */
|
||||
--color-col-3-to: #23742C; /* 3열 gradient 끝 */
|
||||
|
||||
/* 비교 블록 (compare) */
|
||||
--color-compare-left: #5c3714; /* 좌측 (AS-IS 계열) */
|
||||
--color-compare-right: #285b4a; /* 우측 (TO-BE 계열) */
|
||||
--color-compare-badge: #ae3607; /* VS 뱃지 */
|
||||
|
||||
/* 다크 카드 (direct render) */
|
||||
--color-dark-card-1: #1a365d; /* 카드 1 배경 */
|
||||
--color-dark-card-2: #1e3a2f; /* 카드 2 배경 */
|
||||
--color-dark-card-3: #3b1f2b; /* 카드 3 배경 */
|
||||
--color-dark-card-title: #fbbf24; /* 다크카드 제목 (금색) */
|
||||
--color-dark-card-body: #e2e8f0; /* 다크카드 본문 */
|
||||
|
||||
/* 표 */
|
||||
--color-table-header-bg: #64748b; /* 표 헤더 배경 */
|
||||
--color-table-header-text: #ffffff; /* 표 헤더 텍스트 */
|
||||
|
||||
/* 블록 제목 gradient (Figma 원본) */
|
||||
--color-block-title-from: #CC5200; /* 주황 gradient 시작 */
|
||||
--color-block-title-to: #883700; /* 주황 gradient 끝 */
|
||||
|
||||
/* pill */
|
||||
--color-pill-bg: #1e293b; /* pill 배경 */
|
||||
--color-pill-text: #ffffff; /* pill 텍스트 */
|
||||
}
|
||||
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: 'Noto Sans KR', 'Pretendard', sans-serif;
|
||||
background: #e8ecf0;
|
||||
display: flex; justify-content: center; align-items: center;
|
||||
min-height: 100vh;
|
||||
word-break: keep-all;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
/* ── 16:9 슬라이드 (single, 1280×720) ── */
|
||||
.slide {
|
||||
width: 1280px; height: 720px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,.15);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.slide-bg {
|
||||
position: absolute; inset: 0;
|
||||
background: linear-gradient(180deg, #f0f0f0 0%, #ffffff 100%);
|
||||
z-index: 0;
|
||||
}
|
||||
.slide-title {
|
||||
position: absolute;
|
||||
left: 52px; top: 22px;
|
||||
width: calc(100% - 104px);
|
||||
font-weight: 700;
|
||||
font-size: var(--font-slide-title);
|
||||
line-height: var(--lh-slide-title);
|
||||
background-image: linear-gradient(180deg, #296b55 0%, #123328 100%);
|
||||
-webkit-background-clip: text; background-clip: text;
|
||||
color: transparent;
|
||||
text-shadow: 0 0 2px #322c1e;
|
||||
z-index: 2;
|
||||
}
|
||||
.slide-divider {
|
||||
position: absolute;
|
||||
left: 50px; top: 58px;
|
||||
width: calc(100% - 100px);
|
||||
height: 2px;
|
||||
background: #cbd5e1;
|
||||
z-index: 2;
|
||||
}
|
||||
.slide-body {
|
||||
position: absolute;
|
||||
left: 50px; top: 76px;
|
||||
width: calc(100% - 100px); /* 1180 */
|
||||
height: 585px;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── Layout preset (composition planner v0 — 8 vocabulary) ──
|
||||
단일 .layout-{preset} 클래스에 grid CSS 주입.
|
||||
layout_css = pipeline build_layout_css() 결과 :
|
||||
- horizontal-2 : rows = dynamic px (content_weight + frame_min_height)
|
||||
- 그 외 : rows / cols = fr default (LAYOUT_PRESETS)
|
||||
positions (single / top / bottom / left / right / top-left / ... / grid-2x2 9개)
|
||||
은 .zone 의 inline grid-area 로 지정 — preset CSS 는 areas 만 정의. */
|
||||
.layout-horizontal-2 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 211px 360px;
|
||||
grid-template-areas: "top" "bottom";
|
||||
gap: 14px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* ── Zone — block 가용 공간 최대화. 프레임 자체 styling 이 boundary 역할 ── */
|
||||
.zone {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* ── Frame-family text layout contract (shared, reusable) ──
|
||||
feedback-1 (mvp1.5b_test7): visible improvement 강화.
|
||||
Stronger hanging indent + breathing line spacing + visible hierarchy. */
|
||||
.text-line {
|
||||
font-size: var(--font-body); /* 11px */
|
||||
font-weight: var(--weight-body);
|
||||
line-height: 1.6; /* breathing room */
|
||||
margin: 0;
|
||||
}
|
||||
.text-line + .text-line {
|
||||
margin-top: 4px; /* visible gap between lines (was 2px) */
|
||||
}
|
||||
|
||||
/* bullet line — hanging indent via padding + absolute marker (안정적) */
|
||||
.text-line--bullet {
|
||||
padding-left: 14px;
|
||||
position: relative;
|
||||
}
|
||||
.text-line--bullet::before {
|
||||
content: "•"; /* visible bullet 마커 */
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 0;
|
||||
font-weight: 700;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
/* indent levels — visible nested hierarchy */
|
||||
.text-line--indent-1 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
.text-line--indent-1::before {
|
||||
content: "◦"; /* sub-bullet 다른 마커 */
|
||||
left: 18px;
|
||||
}
|
||||
.text-line--indent-2 {
|
||||
padding-left: 46px;
|
||||
}
|
||||
.text-line--indent-2::before {
|
||||
content: "▪";
|
||||
left: 34px;
|
||||
}
|
||||
/* body line — 마커 없음 */
|
||||
.text-line--body {
|
||||
padding-left: 0;
|
||||
}
|
||||
.text-line strong { color: #000; font-weight: 700; }
|
||||
|
||||
/* ── Transform-block family (frame 29 AS-IS/TO-BE dedicated comparison component) ──
|
||||
feedback-3: bullet rows 가 아닌 *전용 비교 component*. Header (AS-IS / TO-BE) + paired rows.
|
||||
color-coded cells, left-border accent → 단번에 *비교 구조* 인지. */
|
||||
.transform-block {
|
||||
margin-top: 4px;
|
||||
padding: 6px 8px 6px;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
border-radius: 3px;
|
||||
border: 1px solid rgba(0,0,0,0.05);
|
||||
}
|
||||
.transform-block__header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 22px 1fr;
|
||||
gap: 6px;
|
||||
margin-bottom: 4px;
|
||||
padding-bottom: 3px;
|
||||
border-bottom: 1px dashed rgba(0,0,0,0.12);
|
||||
font-size: 9px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.transform-block__label--from { color: #6b5444; }
|
||||
.transform-block__label--to { color: #2563eb; text-align: left; }
|
||||
.transform-rows {
|
||||
display: flex; flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.transform-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 22px 1fr;
|
||||
gap: 6px;
|
||||
align-items: stretch;
|
||||
font-size: var(--font-body);
|
||||
line-height: 1.45;
|
||||
}
|
||||
.transform-row__from {
|
||||
padding: 3px 8px;
|
||||
background: linear-gradient(90deg, rgba(140,120,90,0.16), rgba(140,120,90,0.08));
|
||||
border-left: 2px solid #b8a98a;
|
||||
border-radius: 2px;
|
||||
color: #4b3f30;
|
||||
font-weight: 500;
|
||||
}
|
||||
.transform-row__arrow {
|
||||
text-align: center;
|
||||
color: #2563eb;
|
||||
font-weight: 900;
|
||||
font-size: 14px;
|
||||
align-self: center;
|
||||
}
|
||||
.transform-row__to {
|
||||
padding: 3px 8px;
|
||||
background: linear-gradient(90deg, rgba(37,99,235,0.10), rgba(37,99,235,0.18));
|
||||
border-left: 2px solid #2563eb;
|
||||
border-radius: 2px;
|
||||
color: #1e40af;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* ── Footer pill — feedback-3: body 와 weight balance, 살짝 가벼워짐 ── */
|
||||
.slide-footer {
|
||||
position: absolute;
|
||||
left: 50px; bottom: 8px;
|
||||
width: calc(100% - 100px); /* front 기준 (body 와 정렬) */
|
||||
height: 41px; /* front 기준 */
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
z-index: 2;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
background: linear-gradient(90deg, #3b3523 5%, #263a2a 50%, #113f31 95%);
|
||||
opacity: 0.92; /* slightly lighter */
|
||||
}
|
||||
.slide-footer-text {
|
||||
position: relative; z-index: 1;
|
||||
font-size: 15px; /* was 20px (--font-footer) */
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
text-shadow: 0 0 3px rgba(0,0,0,.4);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.slide-footer-text em { color: #fe3; font-style: normal; }
|
||||
|
||||
.phase-z2-marker {
|
||||
position: absolute;
|
||||
top: 4px; right: 8px;
|
||||
font-size: 9px; color: #94a3b8;
|
||||
font-family: monospace;
|
||||
z-index: 3;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="slide" data-page="1">
|
||||
<div class="slide-bg"></div>
|
||||
<div class="phase-z2-marker">phase_z2 / mvp-1.5b / horizontal-2 / single slide</div>
|
||||
<div class="slide-title">DX 지연 요인</div>
|
||||
<div class="slide-divider"></div>
|
||||
<div class="slide-body">
|
||||
<div class="layout-horizontal-2">
|
||||
|
||||
<div class="zone" data-zone-position="top" data-template-id="pre_construction_model_info_stacked" style="grid-area: top;">
|
||||
<!-- Phase Z-2 신규 frame partial — Frame 9 (1171281180) pre_construction_model_info_stacked.
|
||||
2026-05-14 — V4 04-1 top rank-1 매칭 (의미 conf=0.722) + structure cardinality 5 일치.
|
||||
사용자 룰 부합 : Figma visual (계단 pill / 5 색상 / vertical label) 유지 + 콘텐츠 cardinality
|
||||
에 맞춰 보완 (pill 안 1 라인 → multi-line: pill_N_label + pill_N_body). -->
|
||||
|
||||
|
||||
<style>
|
||||
.f9b {
|
||||
width: 100%; height: 100%;
|
||||
display: flex; flex-direction: column;
|
||||
gap: 6px;
|
||||
font-family: 'Noto Sans KR', 'Pretendard', sans-serif;
|
||||
word-break: keep-all;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 2026-05-14 — title 스타일 통일 (frame 29 process_product_two_way 와 동일 패턴) :
|
||||
배경 box + box-shadow 제거, gradient 텍스트 만 유지. 사용자 룰 Q1. */
|
||||
.f9b__title {
|
||||
font-size: var(--font-zone-title);
|
||||
font-weight: 700;
|
||||
line-height: var(--lh-zone-title);
|
||||
background-image: linear-gradient(180deg, #000 0%, #883700 100%);
|
||||
-webkit-background-clip: text; background-clip: text;
|
||||
color: transparent;
|
||||
flex-shrink: 0;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.f9b__body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* 좌측 vertical label — 콘텐츠 있을 때만 표시 */
|
||||
.f9b__vlabel {
|
||||
flex: 0 0 auto;
|
||||
width: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: var(--font-sub-title);
|
||||
line-height: 1.2;
|
||||
color: #144838;
|
||||
text-align: center;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: upright;
|
||||
text-shadow: 0 2px 2px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
/* 2026-05-14 — pill 배치 vertical → horizontal (grid). 5 pills 를 가로로 나열 →
|
||||
우측 공란 활용 + 세로 공간 절약. auto-fit + minmax 으로 N 동적 (4 / 5 / 6 모두 자동). */
|
||||
.f9b__pill-rows {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 6px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* 2026-05-14 — bullet 줄간격 1/3 으로 압축 + 다른 간격 (padding, label↔body) 살짝 늘림. */
|
||||
.f9b__pill {
|
||||
min-height: 0;
|
||||
background: rgba(255,255,255,0.7);
|
||||
border-radius: 10px;
|
||||
border-bottom: 3px solid;
|
||||
box-shadow: 1px 2px 4px rgba(0,0,0,0.15);
|
||||
padding: 8px 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
overflow: hidden;
|
||||
align-self: start;
|
||||
}
|
||||
/* Figma frame 9 의 5 색상 — nth-child cycle. N>5 면 default border-bottom 색 (회색). */
|
||||
.f9b__pill:nth-child(5n+1) { border-bottom-color: #fb5915; }
|
||||
.f9b__pill:nth-child(5n+2) { border-bottom-color: #e79000; }
|
||||
.f9b__pill:nth-child(5n+3) { border-bottom-color: #e9a804; }
|
||||
.f9b__pill:nth-child(5n+4) { border-bottom-color: #919f00; }
|
||||
.f9b__pill:nth-child(5n) { border-bottom-color: #0d6361; }
|
||||
|
||||
.f9b__pill-label {
|
||||
font-size: var(--font-sub-title);
|
||||
font-weight: 900;
|
||||
line-height: 1.2;
|
||||
color: #144838;
|
||||
margin-bottom: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
/* arrow indicator — Figma frame 9 의 좌측 화살표 (▶) approximation */
|
||||
.f9b__pill-label::before {
|
||||
content: "▶";
|
||||
flex-shrink: 0;
|
||||
color: currentColor;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
/* 2026-05-14 — bullet 줄간격 1/3 으로 압축 : line-height 1.3 → 1.05 (약 1/3 감소).
|
||||
bullet 간 gap 2 → 1 로 더 압축. 가독성 임계 (한 bullet 안 line wrap 시 라인 겹침 직전). */
|
||||
.f9b__pill-body {
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
color: #0c271e;
|
||||
font-size: var(--font-body);
|
||||
line-height: 1.05;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
/* 첫 line = 인용구 (italic + 무 마커) — 04-1 의 따옴표 인용구 패턴 */
|
||||
.f9b__pill-body .text-line:first-child {
|
||||
font-style: italic;
|
||||
color: #5C3714;
|
||||
padding-left: 0;
|
||||
}
|
||||
/* 이후 lines = 각 이슈 bullet (▪ 마커로 구분 강화) */
|
||||
.f9b__pill-body .text-line:not(:first-child) {
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
}
|
||||
.f9b__pill-body .text-line:not(:first-child)::before {
|
||||
content: "▪";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #919f00;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="f9b" data-frame-id="1171281180" data-template-id="pre_construction_model_info_stacked">
|
||||
<div class="f9b__title">1. DX에 대한 인식</div>
|
||||
<div class="f9b__body">
|
||||
|
||||
|
||||
|
||||
<div class="f9b__pill-rows">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="f9b__pill" data-frame-slot-id="pill_dynamic" data-pill-n="1">
|
||||
|
||||
<div class="f9b__pill-label">기술 및 소프트웨어 이해도</div>
|
||||
|
||||
|
||||
<div class="f9b__pill-body">
|
||||
<div class="text-line">"무슨 말인지 잘 모르겠다, 어디까지 어떻게 해야 하는지 모르겠다"</div><div class="text-line">기본지침, 시행지침 등 새롭게 알아야 할 게 너무 많다.</div><div class="text-line">3D 모델과 별 차이점을 모르겠다. S/W마다 사용법이 다르다.</div><div class="text-line">필요한 것은 쉽고 간단한 건데, 왜 이렇게 복잡하게 만들까?</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="f9b__pill" data-frame-slot-id="pill_dynamic" data-pill-n="2">
|
||||
|
||||
<div class="f9b__pill-label">효과와 효율성</div>
|
||||
|
||||
|
||||
<div class="f9b__pill-body">
|
||||
<div class="text-line">"2D 설계 후 전환설계를 수행하는데 효과는 모르겠고, 효율은 낮다"</div><div class="text-line">성과품 작성은 기존과 같게 하고, 추가 업무만 발생해 효율이 낮다.</div><div class="text-line">BIM으로 인해 가중되는 업무 대비 효과가 거의 없어 보인다.</div><div class="text-line">결과적으로 큰 차이를 못 느끼겠고, 이런 노력이 정말 가치 있는 일이야?</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="f9b__pill" data-frame-slot-id="pill_dynamic" data-pill-n="3">
|
||||
|
||||
<div class="f9b__pill-label">인력 및 교육</div>
|
||||
|
||||
|
||||
<div class="f9b__pill-body">
|
||||
<div class="text-line">"수행 인력이 부족하고, 기존 직원들은 어떻게 교육해야 하나"</div><div class="text-line">교육시간 손실로 일손이 더 필요해지고, 적응하는데도 시간이 걸린다.</div><div class="text-line">신입사원은 없고 BIM 수행을 할 수 있는 기술자가 부족하다.</div><div class="text-line">여러 회사의 S/W별 사용법이 달라 새로운 S/W에 적용에 시간이 필요하다.</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="f9b__pill" data-frame-slot-id="pill_dynamic" data-pill-n="4">
|
||||
|
||||
<div class="f9b__pill-label">경제적 부담</div>
|
||||
|
||||
|
||||
<div class="f9b__pill-body">
|
||||
<div class="text-line">"S/W 구독료만 크게 발생되고, 비용 보전은 안 된다"</div><div class="text-line">사용해야 할 S/W의 종류가 너무 많고 복잡한데 모두 필요한가?</div><div class="text-line">모든 Project에 적용되는 것도 아닌데, 다수의 S/W 구독료를 내야 한다.</div><div class="text-line">디지털전환 하기 위해 이 비용을 쓰는게 정말 경제적인 이득이 있는 거야?</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="f9b__pill" data-frame-slot-id="pill_dynamic" data-pill-n="5">
|
||||
|
||||
<div class="f9b__pill-label">실무 및 적용성</div>
|
||||
|
||||
|
||||
<div class="f9b__pill-body">
|
||||
<div class="text-line">"실무적 사용에 의한 효율성 증진보다는 홍보, PQ용으로 사용한다"</div><div class="text-line">구체적 적용에 의한 비용, 시간, 품질 등의 효과 사례가 없다.</div><div class="text-line">지형, 선형, 도로, 교량 Model을 만드는 S/W가 모두 달라 적용이 어렵다.</div><div class="text-line">속성정보를 반영하지 않은 형상 위주의 3D 모델 제작에만 초점이 맞춰져 있다.</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="zone" data-zone-position="bottom" data-template-id="process_product_two_way" style="grid-area: bottom;">
|
||||
<!-- Phase Z-2 MVP-1.5b frame-derived adapted block.
|
||||
§17 룰 — Figma 시각 언어 promote, geometry 만 zone-compatible adapt. -->
|
||||
|
||||
|
||||
<style>
|
||||
.f29b {
|
||||
width: 100%; height: 100%;
|
||||
display: flex; flex-direction: column;
|
||||
gap: 4px;
|
||||
position: relative;
|
||||
font-family: 'Noto Sans KR', 'Pretendard', sans-serif;
|
||||
word-break: keep-all;
|
||||
overflow: hidden;
|
||||
}
|
||||
.f29b__title {
|
||||
font-size: var(--font-zone-title); /* 13px — frame 13 의 f13b__title 과 동일 위계 */
|
||||
font-weight: 700;
|
||||
line-height: var(--lh-zone-title);
|
||||
background-image: linear-gradient(180deg, #000 0%, #883700 100%);
|
||||
-webkit-background-clip: text; background-clip: text;
|
||||
color: transparent;
|
||||
flex-shrink: 0;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
/* banners — top */
|
||||
.f29b__banners {
|
||||
flex: 0 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 4px;
|
||||
position: relative;
|
||||
height: 36px;
|
||||
}
|
||||
.f29b__banner {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
/* PROMOTED background gradients — figma origin lines 84-98 (header-bg--left/right).
|
||||
원본 SVG 3 개 → CSS gradient 로 재현 (R8/R9 준수). border-radius 9999px = 자동 pill. */
|
||||
.f29b__banner--left {
|
||||
background: linear-gradient(to right,
|
||||
rgba(136, 131, 118, 0.343) 0%,
|
||||
#39321E 73.1%,
|
||||
#39321E 100%);
|
||||
border-radius: 0 9999px 9999px 0;
|
||||
}
|
||||
.f29b__banner--right {
|
||||
background: linear-gradient(to right,
|
||||
#032118 0%,
|
||||
rgba(41, 107, 85, 0.1) 100%);
|
||||
border-radius: 9999px 0 0 9999px;
|
||||
}
|
||||
.f29b__banner-text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
font-size: var(--font-sub-title);
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
text-shadow: 0 0 2px #322C1E;
|
||||
-webkit-background-clip: text; background-clip: text;
|
||||
color: transparent;
|
||||
padding: 0 8px;
|
||||
}
|
||||
/* PROMOTED gradient — lines 101-104 / 110-113 */
|
||||
.f29b__banner--left .f29b__banner-text {
|
||||
background-image:
|
||||
linear-gradient(90deg, rgb(62,53,35) 0%, rgb(62,53,35) 100%),
|
||||
linear-gradient(180deg, rgb(41,107,85) 0%, rgb(18,51,40) 100%);
|
||||
}
|
||||
.f29b__banner--right .f29b__banner-text {
|
||||
background-image:
|
||||
linear-gradient(90deg, rgb(34,95,74) 0%, rgb(34,95,74) 100%),
|
||||
linear-gradient(180deg, rgb(41,107,85) 0%, rgb(18,51,40) 100%);
|
||||
}
|
||||
|
||||
/* body — 6 cell grid (3 rows × 2 cols) — 좌우 row divider Y 정렬 */
|
||||
/* PROMOTED background — figma origin lines 53-68 (body-bg-left/right).
|
||||
좌(0~50%): #39321E α0.3 (top) → white α0.3 (bottom)
|
||||
우(50~100%): #296B55 α0.3 (top) → white α0.3 (bottom)
|
||||
원본 SVG → CSS multi-bg 로 재현. */
|
||||
.f29b__body {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
min-height: 0;
|
||||
padding-top: 4px;
|
||||
background:
|
||||
linear-gradient(to bottom, rgba(57,50,30,0.3) 0%, rgba(255,255,255,0.3) 100%) 0% 0% / 50% 100% no-repeat,
|
||||
linear-gradient(to bottom, rgba(41,107,85,0.3) 0%, rgba(255,255,255,0.3) 100%) 100% 0% / 50% 100% no-repeat;
|
||||
}
|
||||
|
||||
/* 6 cell grid: 3 rows (section 1/2/3), 2 cols (process/product). 각 row 의 height = max(좌, 우) */
|
||||
.f29b__grid {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-auto-rows: auto;
|
||||
gap: 6px 10px;
|
||||
padding: 4px 8px;
|
||||
height: 100%;
|
||||
}
|
||||
.f29b__cell {
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
/* row 2/3 (3 번째 cell 이후) 위에 dashed divider — 좌우 같은 Y */
|
||||
.f29b__cell:nth-child(n+3) {
|
||||
border-top: 1px dashed rgba(0,0,0,0.15);
|
||||
padding-top: 6px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
/* section-title — 부소목차 (사용자 5-layer 직설 2026-05-07): Analogue 기반... 같은 깊이 0 굵은 bullet */
|
||||
.f29b__section-title {
|
||||
font-size: var(--font-sub-title); /* 12px — 부소목차 위계 */
|
||||
font-weight: 900;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 5px;
|
||||
padding-left: 6px;
|
||||
border-left: 3px solid currentColor;
|
||||
}
|
||||
.f29b__cell--left .f29b__section-title { color: #5C3714; } /* PROMOTED line 125 */
|
||||
.f29b__cell--right .f29b__section-title { color: #084C56; } /* PROMOTED line 126 */
|
||||
.f29b__section-title__sub {
|
||||
font-size: var(--font-caption); /* 10px */
|
||||
margin-left: 3px;
|
||||
}
|
||||
/* f29b 의 본문 = .text-line 공통 contract 사용. bullet color override. */
|
||||
.f29b__cell .text-line--bullet { color: #000; font-weight: 700; }
|
||||
/* 2026-05-14 — line-line gap 만 1/2 압축 (사용자 lock 정확 의도) :
|
||||
line-height 1.6 (공통 contract) 유지. .text-line + .text-line margin 4px → 2px. */
|
||||
.f29b__cell .text-line + .text-line { margin-top: 2px; }
|
||||
|
||||
/* popup link — 각 column 끝, 파란색 글씨 (사용자 lock 2026-05-14). */
|
||||
.f29b__popup-link {
|
||||
margin-top: 2px;
|
||||
font-size: var(--font-caption);
|
||||
font-weight: 600;
|
||||
color: #1a73e8;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.f29b__popup-link::before { content: "▶ "; font-size: 0.85em; }
|
||||
|
||||
/* AS-IS/TO-BE 좌우 + arrow (PROMOTED 구조) */
|
||||
.f29b__transform {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
gap: 4px;
|
||||
align-items: start;
|
||||
}
|
||||
.f29b__transform__list {
|
||||
/* .text-line 공통 contract 그대로. wrapper 만 grid 안의 cell 역할 */
|
||||
}
|
||||
.f29b__transform__arrow {
|
||||
align-self: center;
|
||||
width: 28px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.f29b__transform__arrow img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.f29b__footnote {
|
||||
font-size: var(--font-caption); /* 10px */
|
||||
line-height: var(--lh-caption);
|
||||
color: #333;
|
||||
padding-left: 14px;
|
||||
margin-top: 1px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.f29b__aster-small { font-size: 9px; }
|
||||
</style>
|
||||
|
||||
<div class="f29b" data-frame-id="1171281210" data-template-id="process_product_two_way">
|
||||
|
||||
|
||||
<div class="f29b__title">2. DX 추진의 실태</div>
|
||||
|
||||
|
||||
<div class="f29b__banners">
|
||||
<div class="f29b__banner f29b__banner--left">
|
||||
<div class="f29b__banner-text">정책 및 발주 체계</div>
|
||||
</div>
|
||||
<div class="f29b__banner f29b__banner--right">
|
||||
<div class="f29b__banner-text">조직 및 수행 역량</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="f29b__body">
|
||||
|
||||
<div class="f29b__grid">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="f29b__cell f29b__cell--left" data-frame-slot-id="process_column">
|
||||
|
||||
<div class="f29b__section-title">실질적 기술 경쟁을 저해하는 정책 집행</div>
|
||||
|
||||
<div class="text-line text-line--bullet">모든 설계사가 수행 능력을 갖추었다는 전제하에 정책 시행</div><div class="text-line text-line--bullet">수행 능력이 없는 업체 선정 후 성과품의 수준을 낮추어 시행</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="f29b__cell f29b__cell--right" data-frame-slot-id="product_column">
|
||||
|
||||
<div class="f29b__section-title">공학적 개념 정립 부재</div>
|
||||
<div class="text-line text-line--bullet">DX와 BIM의 차이점을 명확히 구분하지 못하고 접근 방식과 기술적 도구 사이의 혼란만 가중</div><div class="text-line text-line--bullet">단순히 기술적 도구의 사용에 초점을 맞추느라 3D모델 제작 S/W에 과도하게 의존</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="f29b__cell f29b__cell--left" data-frame-slot-id="process_column">
|
||||
|
||||
<div class="f29b__section-title">적용 효과가 있는 사례도 없이 방침부터 도입</div>
|
||||
|
||||
<div class="text-line text-line--bullet">DX/BIM 적용에 따른 실무적 이득이 있다고 판단된 사례 부족</div><div class="text-line text-line--bullet">BIM 지침/방침 등을 시행 경험과 효과 검증도 없이 남발</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="f29b__cell f29b__cell--right" data-frame-slot-id="product_column">
|
||||
|
||||
<div class="f29b__section-title">‘본업 기술력 확보’ 우선의 개념 부재</div>
|
||||
<div class="text-line text-line--bullet">고도의 전문지식과 현장 경험이 축적된 Manual의 중요성과 필요성에 대한 이해 부족</div><div class="text-line text-line--bullet">국가·발주처의 지침·방침에만 의존한 업체의 기술력</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="f29b__cell f29b__cell--left" data-frame-slot-id="process_column">
|
||||
|
||||
<div class="f29b__section-title">엔지니어링 S/W에 대한 개념 부재</div>
|
||||
|
||||
<div class="text-line text-line--bullet">다양한 엔지니어링 S/W의 특성에 대한 깊은 이해 없이 범용 S/W 선택</div><div class="text-line text-line--bullet">대형 Global S/W 회사에 과도한 의존과 이에 예속되는 방침 남발로 전용 S/W 소멸</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="f29b__cell f29b__cell--right" data-frame-slot-id="product_column">
|
||||
|
||||
<div class="f29b__section-title">DX/BIM의 근본 취지와 목표의 이해 부족</div>
|
||||
<div class="text-line text-line--bullet">DX에 의한 과정의 혁신과 결과물의 변화에 대한 고민 부재</div><div class="text-line text-line--bullet">기술자가 직접 3D모델을 만들고 수정하며 설계를 수행하지 않고, 별도로 외주 처리하여 본질 회피</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="f29b__cell f29b__cell--left" data-frame-slot-id="process_column">
|
||||
|
||||
<div class="f29b__section-title">기술투자(R&D) 없는 성과 창출 기대</div>
|
||||
|
||||
<div class="text-line text-line--bullet">단순 BIM S/W만 구입하면 될 것이라는 안일한 생각</div><div class="text-line text-line--bullet">실질적 기술 개발 투자 노력 없이 남들이 하는 대로 하면 된다는 착각</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="f29b__cell f29b__cell--right" data-frame-slot-id="product_column">
|
||||
|
||||
<div class="f29b__section-title">과거의 타성에 머무르고 있는 기술자 집단</div>
|
||||
<div class="text-line text-line--bullet">설계/감리/시공 임직원들의 Digital 무지와 전략적 무지</div><div class="text-line text-line--bullet">교육과 학습을 통한 인재 양성보다 당장 실무 활용이 가능한 타사 인력 빼오기에 집중</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="f29b__popups" style="display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; padding: 0 8px;">
|
||||
<div>
|
||||
|
||||
<div class="f29b__popup-link">발주처 반응</div>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
|
||||
<div class="f29b__popup-link">설계·시공업계 반응</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide-footer">
|
||||
<div class="slide-footer-text">검증 없는 정책의 일방적 추진과 조직의 회피, 이해 부족은 DX 지연을 반복시키고 있다.</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 299 KiB |
@@ -1,89 +0,0 @@
|
||||
---
|
||||
title: DX 지연 요인
|
||||
sidebar:
|
||||
order: 03
|
||||
---
|
||||
|
||||
## 1. DX에 대한 인식
|
||||
|
||||
- **기술 및 소프트웨어 이해도**
|
||||
- "무슨 말인지 잘 모르겠다, 어디까지 어떻게 해야 하는지 모르겠다"
|
||||
- 기본지침, 시행지침 등 새롭게 알아야 할 게 너무 많다.
|
||||
- 3D 모델과 별 차이점을 모르겠다. S/W마다 사용법이 다르다.
|
||||
- 필요한 것은 쉽고 간단한 건데, 왜 이렇게 복잡하게 만들까?
|
||||
- **효과와 효율성**
|
||||
- "2D 설계 후 전환설계를 수행하는데 효과는 모르겠고, 효율은 낮다"
|
||||
- 성과품 작성은 기존과 같게 하고, 추가 업무만 발생해 효율이 낮다.
|
||||
- BIM으로 인해 가중되는 업무 대비 효과가 거의 없어 보인다.
|
||||
- 결과적으로 큰 차이를 못 느끼겠고, 이런 노력이 정말 가치 있는 일이야?
|
||||
- **인력 및 교육**
|
||||
- "수행 인력이 부족하고, 기존 직원들은 어떻게 교육해야 하나"
|
||||
- 교육시간 손실로 일손이 더 필요해지고, 적응하는데도 시간이 걸린다.
|
||||
- 신입사원은 없고 BIM 수행을 할 수 있는 기술자가 부족하다.
|
||||
- 여러 회사의 S/W별 사용법이 달라 새로운 S/W에 적용에 시간이 필요하다.
|
||||
- **경제적 부담**
|
||||
- "S/W 구독료만 크게 발생되고, 비용 보전은 안 된다"
|
||||
- 사용해야 할 S/W의 종류가 너무 많고 복잡한데 모두 필요한가?
|
||||
- 모든 Project에 적용되는 것도 아닌데, 다수의 S/W 구독료를 내야 한다.
|
||||
- 디지털전환 하기 위해 이 비용을 쓰는게 정말 경제적인 이득이 있는 거야?
|
||||
- **실무 및 적용성**
|
||||
- "실무적 사용에 의한 효율성 증진보다는 홍보, PQ용으로 사용한다"
|
||||
- 구체적 적용에 의한 비용, 시간, 품질 등의 효과 사례가 없다.
|
||||
- 지형, 선형, 도로, 교량 Model을 만드는 S/W가 모두 달라 적용이 어렵다.
|
||||
- 속성정보를 반영하지 않은 형상 위주의 3D 모델 제작에만 초점이 맞춰져 있다.
|
||||
<br/>
|
||||
---
|
||||
<br/>
|
||||
## 2. DX 추진의 실태
|
||||
|
||||
<br/>
|
||||
|
||||
### 2.1 정책 및 발주 체계
|
||||
- **실질적 기술 경쟁을 저해하는 정책 집행**
|
||||
- 모든 설계사가 수행 능력을 갖추었다는 전제하에 정책 시행
|
||||
- 수행 능력이 없는 업체 선정 후 성과품의 수준을 낮추어 시행
|
||||
<br/>
|
||||
- **적용 효과가 있는 사례도 없이 방침부터 도입**
|
||||
- DX/BIM 적용에 따른 실무적 이득이 있다고 판단된 사례 부족
|
||||
- BIM 지침/방침 등을 시행 경험과 효과 검증도 없이 남발
|
||||
<br/>
|
||||
- **엔지니어링 S/W에 대한 개념 부재**
|
||||
- 다양한 엔지니어링 S/W의 특성에 대한 깊은 이해 없이 범용 S/W 선택
|
||||
- 대형 Global S/W 회사에 과도한 의존과 이에 예속되는 방침 남발로 전용 S/W 소멸
|
||||
<br/>
|
||||
- **기술투자(R&D) 없는 성과 창출 기대**
|
||||
- 단순 BIM S/W만 구입하면 될 것이라는 안일한 생각
|
||||
- 실질적 기술 개발 투자 노력 없이 남들이 하는 대로 하면 된다는 착각
|
||||
<br/>
|
||||
<details>
|
||||
<summary style={{cursor: 'pointer', fontWeight: 'bold', color: '#555'}}>발주처 반응</summary>
|
||||
<img src="/assets/images/발주처반응.png" />
|
||||
</details>
|
||||
|
||||
### 2.2 조직 및 수행 역량
|
||||
- **공학적 개념 정립 부재**
|
||||
- DX와 BIM의 차이점을 명확히 구분하지 못하고 접근 방식과 기술적 도구 사이의 혼란만 가중
|
||||
- 단순히 기술적 도구의 사용에 초점을 맞추느라 3D모델 제작 S/W에 과도하게 의존
|
||||
<br/>
|
||||
- **‘본업 기술력 확보’ 우선의 개념 부재**
|
||||
- 고도의 전문지식과 현장 경험이 축적된 Manual의 중요성과 필요성에 대한 이해 부족
|
||||
- 국가·발주처의 지침·방침에만 의존한 업체의 기술력
|
||||
<br/>
|
||||
- **DX/BIM의 근본 취지와 목표의 이해 부족**
|
||||
- DX에 의한 과정의 혁신과 결과물의 변화에 대한 고민 부재
|
||||
- 기술자가 직접 3D모델을 만들고 수정하며 설계를 수행하지 않고, 별도로 외주 처리하여 본질 회피
|
||||
<br/>
|
||||
- **과거의 타성에 머무르고 있는 기술자 집단**
|
||||
- 설계/감리/시공 임직원들의 Digital 무지와 전략적 무지
|
||||
- 교육과 학습을 통한 인재 양성보다 당장 실무 활용이 가능한 타사 인력 빼오기에 집중
|
||||
<br/>
|
||||
<details>
|
||||
<summary style={{cursor: 'pointer', fontWeight: 'bold', color: '#555'}}>설계·시공업계 반응</summary>
|
||||
<img src="/assets/images/설계시공업계반응.png" />
|
||||
</details>
|
||||
<br/>
|
||||
---
|
||||
|
||||
:::note[핵심 요약]
|
||||
* 검증 없는 정책의 일방적 추진과 조직의 회피, 이해 부족은 DX 지연을 반복시키고 있다.
|
||||
:::
|
||||
@@ -1,21 +0,0 @@
|
||||
{
|
||||
"step_num": 1,
|
||||
"step_name": "mdx_upload",
|
||||
"step_status": "done",
|
||||
"pipeline_path_connected": true,
|
||||
"input": [
|
||||
"samples\\mdx\\04. DX 지연 요인.mdx"
|
||||
],
|
||||
"output": [
|
||||
"step01_mdx_upload.json",
|
||||
"step01_mdx_source.md"
|
||||
],
|
||||
"note": "MDX 원본 그대로 step01_mdx_source.md 에 복사.",
|
||||
"data": {
|
||||
"mdx_path": "samples\\mdx\\04. DX 지연 요인.mdx",
|
||||
"run_id": "mdx04_b3_v12",
|
||||
"run_dir": "d:\\ad-hoc\\kei\\design_agent\\data\\runs\\mdx04_b3_v12\\phase_z2",
|
||||
"mdx_source_size_bytes": 4710,
|
||||
"mdx_source_lines": 89
|
||||
}
|
||||
}
|
||||
@@ -1,51 +0,0 @@
|
||||
{
|
||||
"step_num": 2,
|
||||
"step_name": "normalized",
|
||||
"step_status": "partial",
|
||||
"pipeline_path_connected": true,
|
||||
"input": [
|
||||
"step01_mdx_source.md"
|
||||
],
|
||||
"output": [
|
||||
"step02_normalized.json"
|
||||
],
|
||||
"note": "parse_mdx 결과: title / sections / footer 분리 + raw_content 보존. heading tree 미생성, orphan / details 감지 미완 (Step 2 ⚠ partial — 별 axis). orphans / details 필드는 schema lock — 빈 배열이라도 'detection 미수행' marker. stage0_adapter_diagnostics = IMP-02 chained adapter trace (default OFF canary). stage0_normalized_assets = IMP-03 Step 3 slide-level handoff (popups/images/tables list).",
|
||||
"data": {
|
||||
"slide_title": "DX 지연 요인",
|
||||
"slide_footer": "검증 없는 정책의 일방적 추진과 조직의 회피, 이해 부족은 DX 지연을 반복시키고 있다.",
|
||||
"sections_count": 2,
|
||||
"sections": [
|
||||
{
|
||||
"section_id": "04-1",
|
||||
"section_num": 1,
|
||||
"title": "1. DX에 대한 인식",
|
||||
"raw_content_length": 934,
|
||||
"raw_content": "- **기술 및 소프트웨어 이해도**\n - \"무슨 말인지 잘 모르겠다, 어디까지 어떻게 해야 하는지 모르겠다\"\n - 기본지침, 시행지침 등 새롭게 알아야 할 게 너무 많다.\n - 3D 모델과 별 차이점을 모르겠다. S/W마다 사용법이 다르다.\n - 필요한 것은 쉽고 간단한 건데, 왜 이렇게 복잡하게 만들까?\n- **효과와 효율성**\n - \"2D 설계 후 전환설계를 수행하는데 효과는 모르겠고, 효율은 낮다\"\n - 성과품 작성은 기존과 같게 하고, 추가 업무만 발생해 효율이 낮다.\n - BIM으로 인해 가중되는 업무 대비 효과가 거의 없어 보인다.\n - 결과적으로 큰 차이를 못 느끼겠고, 이런 노력이 정말 가치 있는 일이야?\n- **인력 및 교육**\n - \"수행 인력이 부족하고, 기존 직원들은 어떻게 교육해야 하나\"\n - 교육시간 손실로 일손이 더 필요해지고, 적응하는데도 시간이 걸린다.\n - 신입사원은 없고 BIM 수행을 할 수 있는 기술자가 부족하다.\n - 여러 회사의 S/W별 사용법이 달라 새로운 S/W에 적용에 시간이 필요하다.\n- **경제적 부담**\n - \"S/W 구독료만 크게 발생되고, 비용 보전은 안 된다\"\n - 사용해야 할 S/W의 종류가 너무 많고 복잡한데 모두 필요한가?\n - 모든 Project에 적용되는 것도 아닌데, 다수의 S/W 구독료를 내야 한다.\n - 디지털전환 하기 위해 이 비용을 쓰는게 정말 경제적인 이득이 있는 거야?\n- **실무 및 적용성**\n - \"실무적 사용에 의한 효율성 증진보다는 홍보, PQ용으로 사용한다\"\n - 구체적 적용에 의한 비용, 시간, 품질 등의 효과 사례가 없다.\n - 지형, 선형, 도로, 교량 Model을 만드는 S/W가 모두 달라 적용이 어렵다.\n - 속성정보를 반영하지 않은 형상 위주의 3D 모델 제작에만 초점이 맞춰져 있다.\n<br/>\n---\n<br/>"
|
||||
},
|
||||
{
|
||||
"section_id": "04-2",
|
||||
"section_num": 2,
|
||||
"title": "2. DX 추진의 실태",
|
||||
"raw_content_length": 1349,
|
||||
"raw_content": "<br/>\n\n### 2.1 정책 및 발주 체계\n- **실질적 기술 경쟁을 저해하는 정책 집행** \n - 모든 설계사가 수행 능력을 갖추었다는 전제하에 정책 시행\n - 수행 능력이 없는 업체 선정 후 성과품의 수준을 낮추어 시행 \n<br/>\n- **적용 효과가 있는 사례도 없이 방침부터 도입** \n - DX/BIM 적용에 따른 실무적 이득이 있다고 판단된 사례 부족\n - BIM 지침/방침 등을 시행 경험과 효과 검증도 없이 남발\n<br/>\n- **엔지니어링 S/W에 대한 개념 부재** \n - 다양한 엔지니어링 S/W의 특성에 대한 깊은 이해 없이 범용 S/W 선택\n - 대형 Global S/W 회사에 과도한 의존과 이에 예속되는 방침 남발로 전용 S/W 소멸\n<br/>\n- **기술투자(R&D) 없는 성과 창출 기대** \n - 단순 BIM S/W만 구입하면 될 것이라는 안일한 생각\n - 실질적 기술 개발 투자 노력 없이 남들이 하는 대로 하면 된다는 착각\n<br/>\n<details>\n <summary style={{cursor: 'pointer', fontWeight: 'bold', color: '#555'}}>발주처 반응</summary>\n <img src=\"/assets/images/발주처반응.png\" />\n</details>\n\n### 2.2 조직 및 수행 역량\n- **공학적 개념 정립 부재** \n - DX와 BIM의 차이점을 명확히 구분하지 못하고 접근 방식과 기술적 도구 사이의 혼란만 가중\n - 단순히 기술적 도구의 사용에 초점을 맞추느라 3D모델 제작 S/W에 과도하게 의존\n<br/>\n- **‘본업 기술력 확보’ 우선의 개념 부재** \n - 고도의 전문지식과 현장 경험이 축적된 Manual의 중요성과 필요성에 대한 이해 부족\n - 국가·발주처의 지침·방침에만 의존한 업체의 기술력 \n<br/>\n- **DX/BIM의 근본 취지와 목표의 이해 부족** \n - DX에 의한 과정의 혁신과 결과물의 변화에 대한 고민 부재\n - 기술자가 직접 3D모델을 만들고 수정하며 설계를 수행하지 않고, 별도로 외주 처리하여 본질 회피\n<br/>\n- **과거의 타성에 머무르고 있는 기술자 집단** \n - 설계/감리/시공 임직원들의 Digital 무지와 전략적 무지\n - 교육과 학습을 통한 인재 양성보다 당장 실무 활용이 가능한 타사 인력 빼오기에 집중\n<br/>\n<details>\n <summary style={{cursor: 'pointer', fontWeight: 'bold', color: '#555'}}>설계·시공업계 반응</summary>\n <img src=\"/assets/images/설계시공업계반응.png\" />\n</details>\n<br/>\n---"
|
||||
}
|
||||
],
|
||||
"orphans": [],
|
||||
"details": [],
|
||||
"stage0_adapter_diagnostics": {
|
||||
"enabled": false,
|
||||
"used": false,
|
||||
"fallback_reason": null,
|
||||
"id_reconstruction_log": [],
|
||||
"adapter_counts": null,
|
||||
"legacy_counts": {
|
||||
"sections": 2
|
||||
}
|
||||
},
|
||||
"stage0_normalized_assets": {
|
||||
"popups": [],
|
||||
"images": [],
|
||||
"tables": []
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,41 +0,0 @@
|
||||
{
|
||||
"step_num": 5,
|
||||
"step_name": "v4_evidence",
|
||||
"step_status": "done",
|
||||
"pipeline_path_connected": true,
|
||||
"input": [
|
||||
"step02_normalized.json",
|
||||
"tests/matching/v4_full32_result.yaml"
|
||||
],
|
||||
"output": [
|
||||
"step05_v4_evidence.json"
|
||||
],
|
||||
"note": "V4 non-reject max-6 후보 list (Step 9 application_plan input). raw 32 entry 는 tests/matching/v4_full32_result.yaml 에 영속. candidate_status='ok' = 후보 1개 이상 / 'no_non_reject_v4_candidate' = 0개 (Step 9 fallback path 입력). Step 6 plan_composition() 은 lookup_v4_match() (rank-1) 그대로 사용 — backward compat (Step 6-A axis 까지).",
|
||||
"data": {
|
||||
"v4_source": "tests\\matching\\v4_full32_result.yaml",
|
||||
"aligned_section_ids": [
|
||||
"04-1",
|
||||
"04-2"
|
||||
],
|
||||
"evidence_per_section": [
|
||||
{
|
||||
"section_id": "04-1",
|
||||
"v4_candidates": [],
|
||||
"candidate_status": "no_non_reject_v4_candidate"
|
||||
},
|
||||
{
|
||||
"section_id": "04-2",
|
||||
"v4_candidates": [
|
||||
{
|
||||
"template_id": "process_product_two_way",
|
||||
"frame_id": "1171281210",
|
||||
"frame_number": 29,
|
||||
"confidence": 0.7711,
|
||||
"label": "light_edit"
|
||||
}
|
||||
],
|
||||
"candidate_status": "ok"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -1,170 +0,0 @@
|
||||
{
|
||||
"step_num": 6,
|
||||
"step_name": "composition_plan",
|
||||
"step_status": "done",
|
||||
"pipeline_path_connected": true,
|
||||
"input": [
|
||||
"step02_normalized.json",
|
||||
"step05_v4_evidence.json"
|
||||
],
|
||||
"output": [
|
||||
"step06_composition_plan.json"
|
||||
],
|
||||
"note": "composition v0 count-based — sections → candidates → score → greedy select. Step 6-A (사용자 lock 2026-05-08): selected_units[i].v4_candidates 추가 (non-reject max-6 후보 list, candidates[0] = 단일 frame_* 와 일관). logic 무변 — runtime 결과 동일. Step 9 application_plan input.",
|
||||
"data": {
|
||||
"selected_units_count": 2,
|
||||
"layout_preset_decided": "horizontal-2",
|
||||
"candidates_summary": [
|
||||
{
|
||||
"source_section_ids": [
|
||||
"04-1"
|
||||
],
|
||||
"merge_type": "single",
|
||||
"template_id": "pre_construction_model_info_stacked",
|
||||
"label": "reject",
|
||||
"phase_z_status": "fallback_candidate",
|
||||
"v4_rank": 1,
|
||||
"selection_path": "rank_1",
|
||||
"fallback_reason": null,
|
||||
"score": 0.0,
|
||||
"selection_state": "selected",
|
||||
"auto_selectable": true,
|
||||
"filter_reasons": [],
|
||||
"notes": [],
|
||||
"capacity_fit": {
|
||||
"item_count": 5,
|
||||
"source_shape": "top_bullets",
|
||||
"capacity": {
|
||||
"strict": null,
|
||||
"min": null,
|
||||
"max": null,
|
||||
"truncate_at": null,
|
||||
"pad_to": null
|
||||
},
|
||||
"fit_status": "ok",
|
||||
"mismatch_reason": null
|
||||
}
|
||||
},
|
||||
{
|
||||
"source_section_ids": [
|
||||
"04-2"
|
||||
],
|
||||
"merge_type": "single",
|
||||
"template_id": "process_product_two_way",
|
||||
"label": "light_edit",
|
||||
"phase_z_status": "adapt_matched_zone",
|
||||
"v4_rank": 2,
|
||||
"selection_path": "rank_2_fallback",
|
||||
"fallback_reason": "capacity_mismatch:strict_mismatch",
|
||||
"score": 0.53977,
|
||||
"selection_state": "selected",
|
||||
"auto_selectable": true,
|
||||
"filter_reasons": [],
|
||||
"notes": [],
|
||||
"capacity_fit": {
|
||||
"item_count": 2,
|
||||
"source_shape": "h3_subsections",
|
||||
"capacity": {
|
||||
"strict": 2,
|
||||
"min": null,
|
||||
"max": null,
|
||||
"truncate_at": null,
|
||||
"pad_to": null
|
||||
},
|
||||
"fit_status": "ok",
|
||||
"mismatch_reason": null
|
||||
}
|
||||
}
|
||||
],
|
||||
"candidates_total": 2,
|
||||
"candidates_viable_auto": 2,
|
||||
"selected_units": [
|
||||
{
|
||||
"source_section_ids": [
|
||||
"04-1"
|
||||
],
|
||||
"merge_type": "single",
|
||||
"frame_id": "1171281180",
|
||||
"frame_number": 9,
|
||||
"frame_template_id": "pre_construction_model_info_stacked",
|
||||
"label": "reject",
|
||||
"v4_rank": 1,
|
||||
"selection_path": "rank_1",
|
||||
"fallback_reason": null,
|
||||
"score": 0.0,
|
||||
"phase_z_status": "fallback_candidate",
|
||||
"rationale": {
|
||||
"capacity_fit": {
|
||||
"item_count": 5,
|
||||
"source_shape": "top_bullets",
|
||||
"capacity": {
|
||||
"strict": null,
|
||||
"min": null,
|
||||
"max": null,
|
||||
"truncate_at": null,
|
||||
"pad_to": null
|
||||
},
|
||||
"fit_status": "ok",
|
||||
"mismatch_reason": null
|
||||
},
|
||||
"frame_compat": 0.0,
|
||||
"confidence": 0.7223,
|
||||
"label": "reject",
|
||||
"label_weight": 0.0,
|
||||
"merge_type": "single",
|
||||
"hierarchy_coherence": null,
|
||||
"density_score": null
|
||||
},
|
||||
"notes": [],
|
||||
"v4_candidates": []
|
||||
},
|
||||
{
|
||||
"source_section_ids": [
|
||||
"04-2"
|
||||
],
|
||||
"merge_type": "single",
|
||||
"frame_id": "1171281210",
|
||||
"frame_number": 29,
|
||||
"frame_template_id": "process_product_two_way",
|
||||
"label": "light_edit",
|
||||
"v4_rank": 2,
|
||||
"selection_path": "rank_2_fallback",
|
||||
"fallback_reason": "capacity_mismatch:strict_mismatch",
|
||||
"score": 0.53977,
|
||||
"phase_z_status": "adapt_matched_zone",
|
||||
"rationale": {
|
||||
"capacity_fit": {
|
||||
"item_count": 2,
|
||||
"source_shape": "h3_subsections",
|
||||
"capacity": {
|
||||
"strict": 2,
|
||||
"min": null,
|
||||
"max": null,
|
||||
"truncate_at": null,
|
||||
"pad_to": null
|
||||
},
|
||||
"fit_status": "ok",
|
||||
"mismatch_reason": null
|
||||
},
|
||||
"frame_compat": 0.5398,
|
||||
"confidence": 0.7711,
|
||||
"label": "light_edit",
|
||||
"label_weight": 0.7,
|
||||
"merge_type": "single",
|
||||
"hierarchy_coherence": null,
|
||||
"density_score": null
|
||||
},
|
||||
"notes": [],
|
||||
"v4_candidates": [
|
||||
{
|
||||
"template_id": "process_product_two_way",
|
||||
"frame_id": "1171281210",
|
||||
"frame_number": 29,
|
||||
"confidence": 0.7711,
|
||||
"label": "light_edit"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -1,81 +0,0 @@
|
||||
{
|
||||
"step_num": 7,
|
||||
"step_name": "layout",
|
||||
"step_status": "partial",
|
||||
"pipeline_path_connected": true,
|
||||
"input": [
|
||||
"step06_composition_plan.json"
|
||||
],
|
||||
"output": [
|
||||
"step07_layout.json",
|
||||
"step07_selected_layout.html"
|
||||
],
|
||||
"note": "count-based v0 — 들여쓰기 / 정렬 미세 layout 미구현 (Step 7 ⚠ partial). Step 7-conn (사용자 lock 2026-05-08): unit_count → layout_candidates list (select_layout_candidates) artifact 기록. default 결정 자체는 무변 — candidates[0] 가 default (default_selection: true), 나머지는 alternative. Step 9 application_plan input.",
|
||||
"data": {
|
||||
"layout_preset": "horizontal-2",
|
||||
"layout_css": {
|
||||
"areas": "\"top\" \"bottom\"",
|
||||
"cols": "1fr",
|
||||
"rows": "211px 360px",
|
||||
"heights_px": [
|
||||
211,
|
||||
360
|
||||
],
|
||||
"ratios": [
|
||||
0.361,
|
||||
0.615
|
||||
],
|
||||
"computation": "min_height_first + content_weight_distribution",
|
||||
"dynamic_rows": true,
|
||||
"raw_zone_layout": {
|
||||
"computation": "min_height_first + content_weight_distribution",
|
||||
"slide_body_height": 585,
|
||||
"gap": 14,
|
||||
"available_after_gap": 571,
|
||||
"min_heights_px": [
|
||||
200,
|
||||
345
|
||||
],
|
||||
"min_scaled": false,
|
||||
"total_min_height": 545,
|
||||
"remaining_after_min": 26,
|
||||
"content_weights": [
|
||||
{
|
||||
"position": "top",
|
||||
"template_id": "pre_construction_model_info_stacked",
|
||||
"score": 6.168
|
||||
},
|
||||
{
|
||||
"position": "bottom",
|
||||
"template_id": "process_product_two_way",
|
||||
"score": 8.486
|
||||
}
|
||||
],
|
||||
"weight_shares": [
|
||||
0.421,
|
||||
0.579
|
||||
],
|
||||
"extras_px": [
|
||||
11,
|
||||
15
|
||||
],
|
||||
"heights_px": [
|
||||
211,
|
||||
360
|
||||
],
|
||||
"ratios": [
|
||||
0.361,
|
||||
0.615
|
||||
]
|
||||
}
|
||||
},
|
||||
"zones_count": 2,
|
||||
"unit_count": 2,
|
||||
"layout_candidates": [
|
||||
"horizontal-2",
|
||||
"vertical-2"
|
||||
],
|
||||
"layout_override_applied": false,
|
||||
"auto_layout_preset": "horizontal-2"
|
||||
}
|
||||
}
|
||||
@@ -1,104 +0,0 @@
|
||||
{
|
||||
"step_num": 8,
|
||||
"step_name": "zone_region_ratios",
|
||||
"step_status": "partial",
|
||||
"pipeline_path_connected": true,
|
||||
"input": [
|
||||
"step07_layout.json",
|
||||
"step10_frame_contract.json"
|
||||
],
|
||||
"output": [
|
||||
"step08_zone_region_ratios.json",
|
||||
"step08_zone_content_placement.html"
|
||||
],
|
||||
"note": "계획값 only. 실측값은 Step 14 (visual_check). zone-level 만 dynamic, region-level (sub_zone 안 sections) 은 균등 분배 (1/1/1). F29 처럼 비균등 콘텐츠 (transform_table + plain) 는 첫 cell 부족 가능 — Step 8 ⚠ partial. Step 8-conn (사용자 lock 2026-05-08): per_zone_plan[i] 에 region_layout_candidates + display_strategy_candidates 추가 (passive 기록). placeholder signals = text-only / region_count=1 (Step 3/4 부재 종속). 실제 content_object 신호 활성화는 별 axis. Step 9 application_plan input.",
|
||||
"data": {
|
||||
"zone_heights_px_planned": [
|
||||
211,
|
||||
360
|
||||
],
|
||||
"zone_ratios_planned": [
|
||||
0.361,
|
||||
0.615
|
||||
],
|
||||
"per_zone_plan": [
|
||||
{
|
||||
"position": "top",
|
||||
"zone_height_px_planned": 211,
|
||||
"zone_ratio_planned": 0.361,
|
||||
"min_height_px": 200,
|
||||
"frame_cardinality_strict": null,
|
||||
"sub_zones_planned": [
|
||||
{
|
||||
"id": "pill_dynamic",
|
||||
"role": "main_text",
|
||||
"accepts": [
|
||||
"text_block"
|
||||
],
|
||||
"cardinality_strict": null,
|
||||
"partial_target_path": ".f9b__pill-rows .f9b__pill:nth-child(N)"
|
||||
}
|
||||
],
|
||||
"child_distribution_note": "현재 child zone (sub_zones 안 sections) 균등 분배 — Step 8 region-level ratio ⚠ partial.",
|
||||
"region_layout_candidates": [
|
||||
"region-single"
|
||||
],
|
||||
"display_strategy_candidates": [
|
||||
"inline_full",
|
||||
"inline_preview_with_details",
|
||||
"details_only"
|
||||
]
|
||||
},
|
||||
{
|
||||
"position": "bottom",
|
||||
"zone_height_px_planned": 360,
|
||||
"zone_ratio_planned": 0.615,
|
||||
"min_height_px": 345,
|
||||
"frame_cardinality_strict": 2,
|
||||
"sub_zones_planned": [
|
||||
{
|
||||
"id": "process_column",
|
||||
"role": "main_text",
|
||||
"accepts": [
|
||||
"text_block",
|
||||
"transform_table"
|
||||
],
|
||||
"cardinality_strict": null,
|
||||
"partial_target_path": ".f29b__grid .f29b__cell--left"
|
||||
},
|
||||
{
|
||||
"id": "product_column",
|
||||
"role": "main_text",
|
||||
"accepts": [
|
||||
"text_block"
|
||||
],
|
||||
"cardinality_strict": null,
|
||||
"partial_target_path": ".f29b__grid .f29b__cell--right"
|
||||
}
|
||||
],
|
||||
"child_distribution_note": "현재 child zone (sub_zones 안 sections) 균등 분배 — Step 8 region-level ratio ⚠ partial.",
|
||||
"region_layout_candidates": [
|
||||
"region-single"
|
||||
],
|
||||
"display_strategy_candidates": [
|
||||
"inline_full",
|
||||
"inline_preview_with_details",
|
||||
"details_only"
|
||||
]
|
||||
}
|
||||
],
|
||||
"step8_conn_placeholder_signals": {
|
||||
"region_count": 1,
|
||||
"content_type": "text_block",
|
||||
"flow_type": null,
|
||||
"role_pattern": null,
|
||||
"ratio_asymmetric": false,
|
||||
"has_visual_element": false,
|
||||
"details_presence": false,
|
||||
"large_table": false,
|
||||
"long_text": false,
|
||||
"fits_in_region": null,
|
||||
"_note": "Step 3/4 부재 종속 placeholder — 모든 zone 을 text-only / region_count=1 로 가정. 실제 content_object 신호 활성화는 별 axis."
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,893 +0,0 @@
|
||||
{
|
||||
"step_num": 9,
|
||||
"step_name": "application_plan",
|
||||
"step_status": "partial",
|
||||
"pipeline_path_connected": true,
|
||||
"input": [
|
||||
"step05_v4_evidence.json",
|
||||
"step06_composition_plan.json",
|
||||
"step07_layout.json",
|
||||
"step08_zone_region_ratios.json"
|
||||
],
|
||||
"output": [
|
||||
"step09_application_plan.json",
|
||||
"step09_application_plan.html"
|
||||
],
|
||||
"note": "Step 9 v0 passive application_plan trace (사용자 lock 2026-05-08). V4 후보 + layout / region / display 후보 + V4 label → application_mode 변환을 side-by-side 로 기록. v0 invariant 5 가지 (status.md §4) 만족. Step 6 의 default 결정 그대로 (current_default_candidate). auto decision 은 Step 9 v1 (별 axis). region/display 후보는 Step 8-conn 의 placeholder signal 종속 (Step 3/4 부재). Step 7-A axis (2026-05-08): frame_overrides_applied 가 사용자 LayoutPanel/FramePanel 선택값을 강제 적용한 trace.",
|
||||
"data": {
|
||||
"units": [
|
||||
{
|
||||
"unit_id": "04-1",
|
||||
"layout_preset": "horizontal-2",
|
||||
"layout_candidates": [
|
||||
"horizontal-2",
|
||||
"vertical-2"
|
||||
],
|
||||
"region_layout_candidates": [
|
||||
"region-single"
|
||||
],
|
||||
"display_strategy_candidates": [
|
||||
"inline_full",
|
||||
"inline_preview_with_details",
|
||||
"details_only"
|
||||
],
|
||||
"candidate_status": "no_non_reject_v4_candidate",
|
||||
"application_status": "no_v4_candidate",
|
||||
"current_default_candidate": null,
|
||||
"selected_v4_rank": 1,
|
||||
"selection_path": "rank_1",
|
||||
"fallback_used": false,
|
||||
"fallback_reason": null,
|
||||
"candidate_evidence": [
|
||||
{
|
||||
"rank": 1,
|
||||
"template_id": "pre_construction_model_info_stacked",
|
||||
"frame_id": "1171281180",
|
||||
"frame_number": 9,
|
||||
"confidence": 0.7223,
|
||||
"label": "reject",
|
||||
"v4_label": "reject",
|
||||
"phase_z_status": "fallback_candidate",
|
||||
"catalog_registered": true,
|
||||
"filtered_for_direct_execution": false,
|
||||
"route_hint": "design_reference_only",
|
||||
"decision": "selected",
|
||||
"reason": "primary_selected",
|
||||
"capacity_fit": {
|
||||
"item_count": 5,
|
||||
"source_shape": "top_bullets",
|
||||
"capacity": {
|
||||
"strict": null,
|
||||
"min": null,
|
||||
"max": null,
|
||||
"truncate_at": null,
|
||||
"pad_to": null
|
||||
},
|
||||
"fit_status": "ok",
|
||||
"mismatch_reason": null
|
||||
}
|
||||
}
|
||||
],
|
||||
"fallback_chain": [
|
||||
{
|
||||
"rank": 1,
|
||||
"template_id": "pre_construction_model_info_stacked",
|
||||
"frame_id": "1171281180",
|
||||
"frame_number": 9,
|
||||
"confidence": 0.7223,
|
||||
"label": "reject",
|
||||
"v4_label": "reject",
|
||||
"phase_z_status": "fallback_candidate",
|
||||
"catalog_registered": true,
|
||||
"filtered_for_direct_execution": false,
|
||||
"route_hint": "design_reference_only",
|
||||
"decision": "selected",
|
||||
"reason": "primary_selected",
|
||||
"capacity_fit": {
|
||||
"item_count": 5,
|
||||
"source_shape": "top_bullets",
|
||||
"capacity": {
|
||||
"strict": null,
|
||||
"min": null,
|
||||
"max": null,
|
||||
"truncate_at": null,
|
||||
"pad_to": null
|
||||
},
|
||||
"fit_status": "ok",
|
||||
"mismatch_reason": null
|
||||
}
|
||||
}
|
||||
],
|
||||
"v4_candidates": [],
|
||||
"v4_all_judgments": [
|
||||
{
|
||||
"template_id": "pre_construction_model_info_stacked",
|
||||
"frame_id": "1171281180",
|
||||
"frame_number": 9,
|
||||
"v4_rank": 1,
|
||||
"confidence": 0.7223,
|
||||
"label": "reject",
|
||||
"catalog_registered": true
|
||||
},
|
||||
{
|
||||
"template_id": "field_effectiveness_five_elements",
|
||||
"frame_id": "1171281181",
|
||||
"frame_number": 10,
|
||||
"v4_rank": 2,
|
||||
"confidence": 0.6586,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "policy_achievement_five_goals",
|
||||
"frame_id": "1171281213",
|
||||
"frame_number": 32,
|
||||
"v4_rank": 3,
|
||||
"confidence": 0.6514,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "compensation_complaint_side_card",
|
||||
"frame_id": "1171281176",
|
||||
"frame_number": 5,
|
||||
"v4_rank": 4,
|
||||
"confidence": 0.6058,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "solution_engn_split_diagram",
|
||||
"frame_id": "1171281201",
|
||||
"frame_number": 21,
|
||||
"v4_rank": 5,
|
||||
"confidence": 0.4773,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "model_specialized_engn_sw",
|
||||
"frame_id": "1171281202",
|
||||
"frame_number": 22,
|
||||
"v4_rank": 6,
|
||||
"confidence": 0.4624,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "commercial_sw_four_categories",
|
||||
"frame_id": "1171281205",
|
||||
"frame_number": 25,
|
||||
"v4_rank": 7,
|
||||
"confidence": 0.4293,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "construction_bim_three_usage",
|
||||
"frame_id": "1171281182",
|
||||
"frame_number": 11,
|
||||
"v4_rank": 8,
|
||||
"confidence": 0.4234,
|
||||
"label": "reject",
|
||||
"catalog_registered": true
|
||||
},
|
||||
{
|
||||
"template_id": "sw_dependency_four_problems",
|
||||
"frame_id": "1171281206",
|
||||
"frame_number": 26,
|
||||
"v4_rank": 9,
|
||||
"confidence": 0.3986,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "engn_sw_development_domain_knowledge",
|
||||
"frame_id": "1171281173",
|
||||
"frame_number": 2,
|
||||
"v4_rank": 10,
|
||||
"confidence": 0.3942,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "sw_development_cycle_six_nodes",
|
||||
"frame_id": "1171281172",
|
||||
"frame_number": 1,
|
||||
"v4_rank": 11,
|
||||
"confidence": 0.3899,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "policy_goals_plus_execution_requirements",
|
||||
"frame_id": "1171281192",
|
||||
"frame_number": 15,
|
||||
"v4_rank": 12,
|
||||
"confidence": 0.3833,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "bim_current_problems_paired",
|
||||
"frame_id": "1171281194",
|
||||
"frame_number": 17,
|
||||
"v4_rank": 13,
|
||||
"confidence": 0.3773,
|
||||
"label": "reject",
|
||||
"catalog_registered": true
|
||||
},
|
||||
{
|
||||
"template_id": "overseas_bim_numbered_list",
|
||||
"frame_id": "1171281174",
|
||||
"frame_number": 3,
|
||||
"v4_rank": 14,
|
||||
"confidence": 0.3748,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "three_parallel_requirements",
|
||||
"frame_id": "1171281190",
|
||||
"frame_number": 13,
|
||||
"v4_rank": 15,
|
||||
"confidence": 0.3713,
|
||||
"label": "reject",
|
||||
"catalog_registered": true
|
||||
},
|
||||
{
|
||||
"template_id": "bim_issues_quadrant_four",
|
||||
"frame_id": "1171281193",
|
||||
"frame_number": 16,
|
||||
"v4_rank": 16,
|
||||
"confidence": 0.3699,
|
||||
"label": "reject",
|
||||
"catalog_registered": true
|
||||
},
|
||||
{
|
||||
"template_id": "dx_sw_necessity_three_perspectives",
|
||||
"frame_id": "1171281198",
|
||||
"frame_number": 20,
|
||||
"v4_rank": 17,
|
||||
"confidence": 0.3158,
|
||||
"label": "reject",
|
||||
"catalog_registered": true
|
||||
},
|
||||
{
|
||||
"template_id": "domestic_bim_actor_relations",
|
||||
"frame_id": "1171281175",
|
||||
"frame_number": 4,
|
||||
"v4_rank": 18,
|
||||
"confidence": 0.2897,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "bigroom_system_components",
|
||||
"frame_id": "1171281178",
|
||||
"frame_number": 7,
|
||||
"v4_rank": 19,
|
||||
"confidence": 0.2742,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "info_management_what_how_when",
|
||||
"frame_id": "1171281179",
|
||||
"frame_number": 8,
|
||||
"v4_rank": 20,
|
||||
"confidence": 0.2604,
|
||||
"label": "reject",
|
||||
"catalog_registered": true
|
||||
},
|
||||
{
|
||||
"template_id": "process_product_two_way",
|
||||
"frame_id": "1171281210",
|
||||
"frame_number": 29,
|
||||
"v4_rank": 21,
|
||||
"confidence": 0.2313,
|
||||
"label": "reject",
|
||||
"catalog_registered": true
|
||||
},
|
||||
{
|
||||
"template_id": "compensation_complaint_map",
|
||||
"frame_id": "1171281177",
|
||||
"frame_number": 6,
|
||||
"v4_rank": 22,
|
||||
"confidence": 0.201,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "sw_reality_three_emphasis",
|
||||
"frame_id": "1171281209",
|
||||
"frame_number": 28,
|
||||
"v4_rank": 23,
|
||||
"confidence": 0.201,
|
||||
"label": "reject",
|
||||
"catalog_registered": true
|
||||
},
|
||||
{
|
||||
"template_id": "bim_dx_comparison_table",
|
||||
"frame_id": "1171281195",
|
||||
"frame_number": 18,
|
||||
"v4_rank": 24,
|
||||
"confidence": 0.1798,
|
||||
"label": "reject",
|
||||
"catalog_registered": true
|
||||
},
|
||||
{
|
||||
"template_id": "three_persona_benefits",
|
||||
"frame_id": "1171281191",
|
||||
"frame_number": 14,
|
||||
"v4_rank": 25,
|
||||
"confidence": 0.1787,
|
||||
"label": "reject",
|
||||
"catalog_registered": true
|
||||
},
|
||||
{
|
||||
"template_id": "construction_goals_three_circle_intersection",
|
||||
"frame_id": "1171281189",
|
||||
"frame_number": 12,
|
||||
"v4_rank": 26,
|
||||
"confidence": 0.1706,
|
||||
"label": "reject",
|
||||
"catalog_registered": true
|
||||
},
|
||||
{
|
||||
"template_id": "bim_adoption_central_split",
|
||||
"frame_id": "1171281208",
|
||||
"frame_number": 27,
|
||||
"v4_rank": 27,
|
||||
"confidence": 0.1399,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "engn_sw_three_types",
|
||||
"frame_id": "1171281204",
|
||||
"frame_number": 24,
|
||||
"v4_rank": 28,
|
||||
"confidence": 0.0929,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "design_method_distortion_three_col",
|
||||
"frame_id": "1171281197",
|
||||
"frame_number": 19,
|
||||
"v4_rank": 29,
|
||||
"confidence": 0.0584,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "app_sw_package_vs_solution",
|
||||
"frame_id": "1171281203",
|
||||
"frame_number": 23,
|
||||
"v4_rank": 30,
|
||||
"confidence": 0.0052,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "industry_current_status_three_col",
|
||||
"frame_id": "1171281211",
|
||||
"frame_number": 30,
|
||||
"v4_rank": 31,
|
||||
"confidence": 0.0044,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "industry_characteristics_three_col",
|
||||
"frame_id": "1171281212",
|
||||
"frame_number": 31,
|
||||
"v4_rank": 32,
|
||||
"confidence": 0.0029,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
}
|
||||
],
|
||||
"application_candidates": [],
|
||||
"position": null,
|
||||
"assignment_source": null,
|
||||
"section_assignment_override": false,
|
||||
"replaced_auto_unit": null,
|
||||
"skipped_collided_auto_units": [],
|
||||
"skipped_reason": null
|
||||
},
|
||||
{
|
||||
"unit_id": "04-2",
|
||||
"layout_preset": "horizontal-2",
|
||||
"layout_candidates": [
|
||||
"horizontal-2",
|
||||
"vertical-2"
|
||||
],
|
||||
"region_layout_candidates": [
|
||||
"region-single"
|
||||
],
|
||||
"display_strategy_candidates": [
|
||||
"inline_full",
|
||||
"inline_preview_with_details",
|
||||
"details_only"
|
||||
],
|
||||
"candidate_status": "ok",
|
||||
"application_status": "ok",
|
||||
"current_default_candidate": "process_product_two_way",
|
||||
"selected_v4_rank": 2,
|
||||
"selection_path": "rank_2_fallback",
|
||||
"fallback_used": true,
|
||||
"fallback_reason": "capacity_mismatch:strict_mismatch",
|
||||
"candidate_evidence": [
|
||||
{
|
||||
"rank": 1,
|
||||
"template_id": "bim_dx_comparison_table",
|
||||
"frame_id": "1171281195",
|
||||
"frame_number": 18,
|
||||
"confidence": 0.8152,
|
||||
"label": "reject",
|
||||
"v4_label": "reject",
|
||||
"phase_z_status": "fallback_candidate",
|
||||
"catalog_registered": true,
|
||||
"filtered_for_direct_execution": false,
|
||||
"route_hint": "design_reference_only",
|
||||
"decision": "skipped",
|
||||
"reason": "capacity_mismatch:strict_mismatch",
|
||||
"capacity_fit": {
|
||||
"item_count": 8,
|
||||
"source_shape": "top_bullets",
|
||||
"capacity": {
|
||||
"strict": 2,
|
||||
"min": null,
|
||||
"max": null,
|
||||
"truncate_at": null,
|
||||
"pad_to": null
|
||||
},
|
||||
"fit_status": "strict_mismatch",
|
||||
"mismatch_reason": "strict cardinality 2, content has 8 items. mapper 가 FitError 를 raise 할 것."
|
||||
}
|
||||
},
|
||||
{
|
||||
"rank": 2,
|
||||
"template_id": "process_product_two_way",
|
||||
"frame_id": "1171281210",
|
||||
"frame_number": 29,
|
||||
"confidence": 0.7711,
|
||||
"label": "light_edit",
|
||||
"v4_label": "light_edit",
|
||||
"phase_z_status": "adapt_matched_zone",
|
||||
"catalog_registered": true,
|
||||
"filtered_for_direct_execution": false,
|
||||
"route_hint": "deterministic_minor_adjustment",
|
||||
"decision": "selected",
|
||||
"reason": "fallback_selected",
|
||||
"capacity_fit": {
|
||||
"item_count": 2,
|
||||
"source_shape": "h3_subsections",
|
||||
"capacity": {
|
||||
"strict": 2,
|
||||
"min": null,
|
||||
"max": null,
|
||||
"truncate_at": null,
|
||||
"pad_to": null
|
||||
},
|
||||
"fit_status": "ok",
|
||||
"mismatch_reason": null
|
||||
}
|
||||
}
|
||||
],
|
||||
"fallback_chain": [
|
||||
{
|
||||
"rank": 1,
|
||||
"template_id": "bim_dx_comparison_table",
|
||||
"frame_id": "1171281195",
|
||||
"frame_number": 18,
|
||||
"confidence": 0.8152,
|
||||
"label": "reject",
|
||||
"v4_label": "reject",
|
||||
"phase_z_status": "fallback_candidate",
|
||||
"catalog_registered": true,
|
||||
"filtered_for_direct_execution": false,
|
||||
"route_hint": "design_reference_only",
|
||||
"decision": "skipped",
|
||||
"reason": "capacity_mismatch:strict_mismatch",
|
||||
"capacity_fit": {
|
||||
"item_count": 8,
|
||||
"source_shape": "top_bullets",
|
||||
"capacity": {
|
||||
"strict": 2,
|
||||
"min": null,
|
||||
"max": null,
|
||||
"truncate_at": null,
|
||||
"pad_to": null
|
||||
},
|
||||
"fit_status": "strict_mismatch",
|
||||
"mismatch_reason": "strict cardinality 2, content has 8 items. mapper 가 FitError 를 raise 할 것."
|
||||
}
|
||||
},
|
||||
{
|
||||
"rank": 2,
|
||||
"template_id": "process_product_two_way",
|
||||
"frame_id": "1171281210",
|
||||
"frame_number": 29,
|
||||
"confidence": 0.7711,
|
||||
"label": "light_edit",
|
||||
"v4_label": "light_edit",
|
||||
"phase_z_status": "adapt_matched_zone",
|
||||
"catalog_registered": true,
|
||||
"filtered_for_direct_execution": false,
|
||||
"route_hint": "deterministic_minor_adjustment",
|
||||
"decision": "selected",
|
||||
"reason": "fallback_selected",
|
||||
"capacity_fit": {
|
||||
"item_count": 2,
|
||||
"source_shape": "h3_subsections",
|
||||
"capacity": {
|
||||
"strict": 2,
|
||||
"min": null,
|
||||
"max": null,
|
||||
"truncate_at": null,
|
||||
"pad_to": null
|
||||
},
|
||||
"fit_status": "ok",
|
||||
"mismatch_reason": null
|
||||
}
|
||||
}
|
||||
],
|
||||
"v4_candidates": [
|
||||
{
|
||||
"template_id": "process_product_two_way",
|
||||
"frame_id": "1171281210",
|
||||
"frame_number": 29,
|
||||
"v4_rank": 2,
|
||||
"confidence": 0.7711,
|
||||
"label": "light_edit"
|
||||
}
|
||||
],
|
||||
"v4_all_judgments": [
|
||||
{
|
||||
"template_id": "bim_dx_comparison_table",
|
||||
"frame_id": "1171281195",
|
||||
"frame_number": 18,
|
||||
"v4_rank": 1,
|
||||
"confidence": 0.8152,
|
||||
"label": "reject",
|
||||
"catalog_registered": true
|
||||
},
|
||||
{
|
||||
"template_id": "process_product_two_way",
|
||||
"frame_id": "1171281210",
|
||||
"frame_number": 29,
|
||||
"v4_rank": 2,
|
||||
"confidence": 0.7711,
|
||||
"label": "light_edit",
|
||||
"catalog_registered": true
|
||||
},
|
||||
{
|
||||
"template_id": "app_sw_package_vs_solution",
|
||||
"frame_id": "1171281203",
|
||||
"frame_number": 23,
|
||||
"v4_rank": 3,
|
||||
"confidence": 0.6389,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "engn_sw_three_types",
|
||||
"frame_id": "1171281204",
|
||||
"frame_number": 24,
|
||||
"v4_rank": 4,
|
||||
"confidence": 0.6372,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "industry_characteristics_three_col",
|
||||
"frame_id": "1171281212",
|
||||
"frame_number": 31,
|
||||
"v4_rank": 5,
|
||||
"confidence": 0.5996,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "bim_adoption_central_split",
|
||||
"frame_id": "1171281208",
|
||||
"frame_number": 27,
|
||||
"v4_rank": 6,
|
||||
"confidence": 0.55,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "bigroom_system_components",
|
||||
"frame_id": "1171281178",
|
||||
"frame_number": 7,
|
||||
"v4_rank": 7,
|
||||
"confidence": 0.5172,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "industry_current_status_three_col",
|
||||
"frame_id": "1171281211",
|
||||
"frame_number": 30,
|
||||
"v4_rank": 8,
|
||||
"confidence": 0.4774,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "design_method_distortion_three_col",
|
||||
"frame_id": "1171281197",
|
||||
"frame_number": 19,
|
||||
"v4_rank": 9,
|
||||
"confidence": 0.4179,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "sw_dependency_four_problems",
|
||||
"frame_id": "1171281206",
|
||||
"frame_number": 26,
|
||||
"v4_rank": 10,
|
||||
"confidence": 0.4138,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "bim_current_problems_paired",
|
||||
"frame_id": "1171281194",
|
||||
"frame_number": 17,
|
||||
"v4_rank": 11,
|
||||
"confidence": 0.3559,
|
||||
"label": "reject",
|
||||
"catalog_registered": true
|
||||
},
|
||||
{
|
||||
"template_id": "domestic_bim_actor_relations",
|
||||
"frame_id": "1171281175",
|
||||
"frame_number": 4,
|
||||
"v4_rank": 12,
|
||||
"confidence": 0.3457,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "pre_construction_model_info_stacked",
|
||||
"frame_id": "1171281180",
|
||||
"frame_number": 9,
|
||||
"v4_rank": 13,
|
||||
"confidence": 0.332,
|
||||
"label": "reject",
|
||||
"catalog_registered": true
|
||||
},
|
||||
{
|
||||
"template_id": "model_specialized_engn_sw",
|
||||
"frame_id": "1171281202",
|
||||
"frame_number": 22,
|
||||
"v4_rank": 14,
|
||||
"confidence": 0.3275,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "commercial_sw_four_categories",
|
||||
"frame_id": "1171281205",
|
||||
"frame_number": 25,
|
||||
"v4_rank": 15,
|
||||
"confidence": 0.3074,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "policy_goals_plus_execution_requirements",
|
||||
"frame_id": "1171281192",
|
||||
"frame_number": 15,
|
||||
"v4_rank": 16,
|
||||
"confidence": 0.2847,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "construction_goals_three_circle_intersection",
|
||||
"frame_id": "1171281189",
|
||||
"frame_number": 12,
|
||||
"v4_rank": 17,
|
||||
"confidence": 0.2558,
|
||||
"label": "reject",
|
||||
"catalog_registered": true
|
||||
},
|
||||
{
|
||||
"template_id": "bim_issues_quadrant_four",
|
||||
"frame_id": "1171281193",
|
||||
"frame_number": 16,
|
||||
"v4_rank": 18,
|
||||
"confidence": 0.2302,
|
||||
"label": "reject",
|
||||
"catalog_registered": true
|
||||
},
|
||||
{
|
||||
"template_id": "compensation_complaint_map",
|
||||
"frame_id": "1171281177",
|
||||
"frame_number": 6,
|
||||
"v4_rank": 19,
|
||||
"confidence": 0.2077,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "dx_sw_necessity_three_perspectives",
|
||||
"frame_id": "1171281198",
|
||||
"frame_number": 20,
|
||||
"v4_rank": 20,
|
||||
"confidence": 0.1842,
|
||||
"label": "reject",
|
||||
"catalog_registered": true
|
||||
},
|
||||
{
|
||||
"template_id": "three_parallel_requirements",
|
||||
"frame_id": "1171281190",
|
||||
"frame_number": 13,
|
||||
"v4_rank": 21,
|
||||
"confidence": 0.1399,
|
||||
"label": "reject",
|
||||
"catalog_registered": true
|
||||
},
|
||||
{
|
||||
"template_id": "sw_reality_three_emphasis",
|
||||
"frame_id": "1171281209",
|
||||
"frame_number": 28,
|
||||
"v4_rank": 22,
|
||||
"confidence": 0.1271,
|
||||
"label": "reject",
|
||||
"catalog_registered": true
|
||||
},
|
||||
{
|
||||
"template_id": "solution_engn_split_diagram",
|
||||
"frame_id": "1171281201",
|
||||
"frame_number": 21,
|
||||
"v4_rank": 23,
|
||||
"confidence": 0.1171,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "overseas_bim_numbered_list",
|
||||
"frame_id": "1171281174",
|
||||
"frame_number": 3,
|
||||
"v4_rank": 24,
|
||||
"confidence": 0.1007,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "policy_achievement_five_goals",
|
||||
"frame_id": "1171281213",
|
||||
"frame_number": 32,
|
||||
"v4_rank": 25,
|
||||
"confidence": 0.0751,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "three_persona_benefits",
|
||||
"frame_id": "1171281191",
|
||||
"frame_number": 14,
|
||||
"v4_rank": 26,
|
||||
"confidence": 0.0722,
|
||||
"label": "reject",
|
||||
"catalog_registered": true
|
||||
},
|
||||
{
|
||||
"template_id": "engn_sw_development_domain_knowledge",
|
||||
"frame_id": "1171281173",
|
||||
"frame_number": 2,
|
||||
"v4_rank": 27,
|
||||
"confidence": 0.0635,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "sw_development_cycle_six_nodes",
|
||||
"frame_id": "1171281172",
|
||||
"frame_number": 1,
|
||||
"v4_rank": 28,
|
||||
"confidence": 0.0633,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "field_effectiveness_five_elements",
|
||||
"frame_id": "1171281181",
|
||||
"frame_number": 10,
|
||||
"v4_rank": 29,
|
||||
"confidence": 0.0618,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "info_management_what_how_when",
|
||||
"frame_id": "1171281179",
|
||||
"frame_number": 8,
|
||||
"v4_rank": 30,
|
||||
"confidence": 0.0487,
|
||||
"label": "reject",
|
||||
"catalog_registered": true
|
||||
},
|
||||
{
|
||||
"template_id": "compensation_complaint_side_card",
|
||||
"frame_id": "1171281176",
|
||||
"frame_number": 5,
|
||||
"v4_rank": 31,
|
||||
"confidence": 0.0457,
|
||||
"label": "reject",
|
||||
"catalog_registered": false
|
||||
},
|
||||
{
|
||||
"template_id": "construction_bim_three_usage",
|
||||
"frame_id": "1171281182",
|
||||
"frame_number": 11,
|
||||
"v4_rank": 32,
|
||||
"confidence": 0.0,
|
||||
"label": "reject",
|
||||
"catalog_registered": true
|
||||
}
|
||||
],
|
||||
"application_candidates": [
|
||||
{
|
||||
"template_id": "process_product_two_way",
|
||||
"frame_id": "1171281210",
|
||||
"v4_label": "light_edit",
|
||||
"application_mode": "same_frame_with_adjustment",
|
||||
"auto_applicable": true,
|
||||
"required_changes": [],
|
||||
"delegated_to": "step10_contract_check"
|
||||
}
|
||||
],
|
||||
"position": null,
|
||||
"assignment_source": null,
|
||||
"section_assignment_override": false,
|
||||
"replaced_auto_unit": null,
|
||||
"skipped_collided_auto_units": [],
|
||||
"skipped_reason": null
|
||||
}
|
||||
],
|
||||
"candidate_status_summary": {
|
||||
"units_with_no_v4_candidate": [
|
||||
"04-1"
|
||||
],
|
||||
"units_with_fallback": [
|
||||
"04-2"
|
||||
]
|
||||
},
|
||||
"fallback_policy": {
|
||||
"fallback_used_count": 1,
|
||||
"fallback_selection_count": 1,
|
||||
"chain_exhausted_count": 0,
|
||||
"selection_paths": [
|
||||
{
|
||||
"section_id": "04-1",
|
||||
"selection_path": "rank_1",
|
||||
"selected_rank": 1,
|
||||
"selected_template_id": "pre_construction_model_info_stacked",
|
||||
"fallback_trigger": null
|
||||
},
|
||||
{
|
||||
"section_id": "04-2",
|
||||
"selection_path": "rank_2_fallback",
|
||||
"selected_rank": 2,
|
||||
"selected_template_id": "process_product_two_way",
|
||||
"fallback_trigger": "capacity_mismatch:strict_mismatch"
|
||||
}
|
||||
],
|
||||
"policy": "IMP-05: rank-1 is kept when usable; rank-2/3 may be promoted only when the earlier rank is not auto-renderable, has no catalog contract, or fails capacity precheck. calculate_fit is not used."
|
||||
},
|
||||
"frame_overrides_applied": [],
|
||||
"frame_overrides_skipped": [],
|
||||
"section_assignment_plan": null,
|
||||
"section_assignment_summary": null,
|
||||
"v0_lock_note": "Step 9 v0 passive (사용자 lock 2026-05-08). Step 6 default 그대로 사용 — runtime 결과 byte-동일. auto decision / scoring 은 Step 9 v1 (별 axis)."
|
||||
}
|
||||
}
|
||||
@@ -1,72 +0,0 @@
|
||||
{
|
||||
"step_num": 20,
|
||||
"step_name": "slide_status",
|
||||
"step_status": "done",
|
||||
"pipeline_path_connected": true,
|
||||
"input": [
|
||||
"step14_visual_check.json",
|
||||
"step17_retry_trace.json",
|
||||
"step19_next_action.json"
|
||||
],
|
||||
"output": [
|
||||
"step20_slide_status.json",
|
||||
"step20_final_status.html"
|
||||
],
|
||||
"note": "자동 파이프라인 최종 결과 보고. overall = PASS/RENDERED_WITH_VISUAL_REGRESSION/PARTIAL_COVERAGE 등.",
|
||||
"data": {
|
||||
"rendered": true,
|
||||
"visual_check_passed": false,
|
||||
"full_mdx_coverage": true,
|
||||
"aligned_section_ids": [
|
||||
"04-1",
|
||||
"04-2"
|
||||
],
|
||||
"covered_section_ids": [
|
||||
"04-1",
|
||||
"04-2"
|
||||
],
|
||||
"filtered_section_ids": [],
|
||||
"filtered_section_reasons": [],
|
||||
"selection_path": "fallback_used",
|
||||
"fallback_used": true,
|
||||
"fallback_selections": [
|
||||
{
|
||||
"position": "bottom",
|
||||
"source_section_ids": [
|
||||
"04-2"
|
||||
],
|
||||
"template_id": "process_product_two_way",
|
||||
"selected_v4_rank": 2,
|
||||
"selection_path": "rank_2_fallback",
|
||||
"fallback_reason": "capacity_mismatch:strict_mismatch"
|
||||
}
|
||||
],
|
||||
"fallback_selection_count": 1,
|
||||
"selection_paths": [
|
||||
{
|
||||
"section_id": "04-1",
|
||||
"selection_path": "rank_1",
|
||||
"selected_rank": 1,
|
||||
"selected_template_id": "pre_construction_model_info_stacked",
|
||||
"fallback_trigger": null
|
||||
},
|
||||
{
|
||||
"section_id": "04-2",
|
||||
"selection_path": "rank_2_fallback",
|
||||
"selected_rank": 2,
|
||||
"selected_template_id": "process_product_two_way",
|
||||
"fallback_trigger": "capacity_mismatch:strict_mismatch"
|
||||
}
|
||||
],
|
||||
"visual_fail_reasons": [
|
||||
"zone--bottom: inner clipped .f29b — excess 17px vert / 0px horiz (content 377 vs container 360)",
|
||||
"zone--bottom: inner clipped .f29b__body — excess 17px vert / 0px horiz (content 311 vs container 294)"
|
||||
],
|
||||
"adapter_needed_count": 0,
|
||||
"adapter_needed_units": [],
|
||||
"content_truncated_count": 0,
|
||||
"content_truncated_units": [],
|
||||
"overall": "RENDERED_WITH_VISUAL_REGRESSION",
|
||||
"note": "자동 파이프라인 결과 보고. review/UI 개념 X. final.html 파일명 != PASS 의미. overall == PASS 는 visual OK + full coverage + adapter_needed=0 일 때만. adapter_needed_count > 0 = mapper 가 contract 와 안 맞아 자동 렌더 못 한 zone 존재. content_truncated_count > 0 = builder 가 truncate 한 zone 존재 (rendered 됐지만 일부 콘텐츠 손실)."
|
||||
}
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
import { TooltipProvider } from "@/components/ui/tooltip";
|
||||
import NotFound from "@/pages/NotFound";
|
||||
import { Route, Switch } from "wouter";
|
||||
import ErrorBoundary from "./components/ErrorBoundary";
|
||||
import { ThemeProvider } from "./contexts/ThemeContext";
|
||||
import Home from "./pages/Home";
|
||||
|
||||
function Router() {
|
||||
return (
|
||||
<Switch>
|
||||
<Route path={"/"} component={Home} />
|
||||
<Route path={"/404"} component={NotFound} />
|
||||
<Route component={NotFound} />
|
||||
</Switch>
|
||||
);
|
||||
}
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<ErrorBoundary>
|
||||
<ThemeProvider defaultTheme="light">
|
||||
<TooltipProvider>
|
||||
<Router />
|
||||
</TooltipProvider>
|
||||
</ThemeProvider>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -1,202 +0,0 @@
|
||||
/**
|
||||
* BottomActions — Step 22 footer wire-up (IMP-56 #90 u20).
|
||||
*
|
||||
* Two real endpoints replace the prior placeholder toasts:
|
||||
* • POST /api/connect (u18 / Front/vite.config.ts) — copies
|
||||
* data/runs/<run_id>/phase_z2/final.html + assets/ into the cel mirror
|
||||
* (`<CEL_PROJECT_ROOT>/public/slides/<slug>.html`).
|
||||
* • POST /api/export (u19 / Front/vite.config.ts) — returns a standalone
|
||||
* text/html body with every `url(assets/...)` ref inlined as base64
|
||||
* data URLs. Response is piped into a Blob → a[download] click chain so
|
||||
* the user receives `<run_id>.html` portable for file:// or any host.
|
||||
*
|
||||
* The prior `serializeSlidePlan` JSON-download path was a dead reference
|
||||
* (the export never existed in slidePlanUtils) and is removed here — the
|
||||
* "다운로드" button now means standalone HTML download via /api/export.
|
||||
* Both buttons disable when no run is loaded (runMeta == null) so the
|
||||
* UI cannot fire requests with an undefined run_id.
|
||||
*/
|
||||
|
||||
import { useState } from "react";
|
||||
import { Sparkles, Download, Link2, Loader2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { toast } from "sonner";
|
||||
import type { SlidePlan } from "../types/designAgent";
|
||||
import type { RunMeta } from "../services/designAgentApi";
|
||||
import { deriveUserOverridesKey } from "../utils/slidePlanUtils";
|
||||
|
||||
// ─── pure request builders (exported for vitest; jsdom-free) ─────────────
|
||||
// The component below uses these verbatim. Each returns a {url, body} pair
|
||||
// so the test surface is the *literal* HTTP payload sent to the u18 / u19
|
||||
// middlewares — any future shape drift fails here before the network call.
|
||||
|
||||
export function buildConnectRequest(
|
||||
run_id: string,
|
||||
slug: string,
|
||||
): { url: string; body: string } {
|
||||
return {
|
||||
url: "/api/connect",
|
||||
body: JSON.stringify({ run_id, slug }),
|
||||
};
|
||||
}
|
||||
|
||||
export function buildExportRequest(
|
||||
run_id: string,
|
||||
): { url: string; body: string } {
|
||||
return {
|
||||
url: "/api/export",
|
||||
body: JSON.stringify({ run_id }),
|
||||
};
|
||||
}
|
||||
|
||||
export function buildDownloadFilename(run_id: string): string {
|
||||
return `${run_id}.html`;
|
||||
}
|
||||
|
||||
interface BottomActionsProps {
|
||||
slidePlan: SlidePlan | null;
|
||||
runMeta: RunMeta | null;
|
||||
uploadedFile: File | null;
|
||||
isLoading: boolean;
|
||||
onGenerate: () => void;
|
||||
}
|
||||
|
||||
export default function BottomActions({
|
||||
slidePlan,
|
||||
runMeta,
|
||||
uploadedFile,
|
||||
isLoading,
|
||||
onGenerate,
|
||||
}: BottomActionsProps) {
|
||||
const [isConnecting, setIsConnecting] = useState(false);
|
||||
const [isExporting, setIsExporting] = useState(false);
|
||||
|
||||
const runReady = !!runMeta && !!slidePlan;
|
||||
|
||||
const handleExport = async () => {
|
||||
if (!runMeta) {
|
||||
toast.error("Run 산출물이 없습니다. 먼저 생성하기를 눌러주세요.");
|
||||
return;
|
||||
}
|
||||
setIsExporting(true);
|
||||
try {
|
||||
const exportReq = buildExportRequest(runMeta.run_id);
|
||||
const resp = await fetch(exportReq.url, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: exportReq.body,
|
||||
});
|
||||
if (!resp.ok) {
|
||||
const text = await resp.text();
|
||||
toast.error(`Export 실패 (${resp.status}): ${text.slice(0, 160)}`);
|
||||
return;
|
||||
}
|
||||
const blob = await resp.blob();
|
||||
const objectUrl = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = objectUrl;
|
||||
a.download = buildDownloadFilename(runMeta.run_id);
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
URL.revokeObjectURL(objectUrl);
|
||||
toast.success(`standalone HTML 다운로드 — ${runMeta.run_id}.html`);
|
||||
} catch (err) {
|
||||
toast.error(`Export 네트워크 오류: ${(err as Error).message}`);
|
||||
} finally {
|
||||
setIsExporting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleConnect = async () => {
|
||||
if (!runMeta) {
|
||||
toast.error("Run 산출물이 없습니다. 먼저 생성하기를 눌러주세요.");
|
||||
return;
|
||||
}
|
||||
if (!uploadedFile) {
|
||||
toast.error("MDX 파일이 없습니다 — slug 도출 불가.");
|
||||
return;
|
||||
}
|
||||
const slug = deriveUserOverridesKey(uploadedFile.name);
|
||||
setIsConnecting(true);
|
||||
try {
|
||||
const connectReq = buildConnectRequest(runMeta.run_id, slug);
|
||||
const resp = await fetch(connectReq.url, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: connectReq.body,
|
||||
});
|
||||
const payload = (await resp.json().catch(() => ({}))) as {
|
||||
success?: boolean;
|
||||
assets_copied?: number;
|
||||
error?: string;
|
||||
};
|
||||
if (!resp.ok || !payload.success) {
|
||||
toast.error(
|
||||
`Connect 실패 (${resp.status}): ${payload.error ?? "unknown error"}`,
|
||||
);
|
||||
return;
|
||||
}
|
||||
toast.success(
|
||||
`cel 미러 연동 완료 — ${slug}.html (assets ${payload.assets_copied ?? 0}개 복사)`,
|
||||
);
|
||||
} catch (err) {
|
||||
toast.error(`Connect 네트워크 오류: ${(err as Error).message}`);
|
||||
} finally {
|
||||
setIsConnecting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-3">
|
||||
<Button
|
||||
onClick={onGenerate}
|
||||
disabled={isLoading}
|
||||
className="gap-2 h-9 text-[11px] font-bold uppercase tracking-widest bg-slate-900 hover:bg-slate-800"
|
||||
size="default"
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<Loader2 className="w-3.5 h-3.5 animate-spin" />
|
||||
생성 중...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Sparkles className="w-3.5 h-3.5" />
|
||||
생성하기
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleExport}
|
||||
disabled={!runReady || isExporting || isLoading}
|
||||
className="gap-2 h-9 text-[11px] font-bold uppercase tracking-widest border-slate-200"
|
||||
size="default"
|
||||
>
|
||||
{isExporting ? (
|
||||
<Loader2 className="w-3.5 h-3.5 animate-spin" />
|
||||
) : (
|
||||
<Download className="w-3.5 h-3.5" />
|
||||
)}
|
||||
다운로드
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleConnect}
|
||||
disabled={!runReady || isConnecting || isLoading}
|
||||
className="gap-2 h-9 text-[11px] font-bold uppercase tracking-widest border-slate-200"
|
||||
size="default"
|
||||
>
|
||||
{isConnecting ? (
|
||||
<Loader2 className="w-3.5 h-3.5 animate-spin" />
|
||||
) : (
|
||||
<Link2 className="w-3.5 h-3.5" />
|
||||
)}
|
||||
연동하기
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,62 +0,0 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
import { AlertTriangle, RotateCcw } from "lucide-react";
|
||||
import { Component, ReactNode } from "react";
|
||||
|
||||
interface Props {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
interface State {
|
||||
hasError: boolean;
|
||||
error: Error | null;
|
||||
}
|
||||
|
||||
class ErrorBoundary extends Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = { hasError: false, error: null };
|
||||
}
|
||||
|
||||
static getDerivedStateFromError(error: Error): State {
|
||||
return { hasError: true, error };
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.hasError) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen p-8 bg-background">
|
||||
<div className="flex flex-col items-center w-full max-w-2xl p-8">
|
||||
<AlertTriangle
|
||||
size={48}
|
||||
className="text-destructive mb-6 flex-shrink-0"
|
||||
/>
|
||||
|
||||
<h2 className="text-xl mb-4">An unexpected error occurred.</h2>
|
||||
|
||||
<div className="p-4 w-full rounded bg-muted overflow-auto mb-6">
|
||||
<pre className="text-sm text-muted-foreground whitespace-break-spaces">
|
||||
{this.state.error?.stack}
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => window.location.reload()}
|
||||
className={cn(
|
||||
"flex items-center gap-2 px-4 py-2 rounded-lg",
|
||||
"bg-primary text-primary-foreground",
|
||||
"hover:opacity-90 cursor-pointer"
|
||||
)}
|
||||
>
|
||||
<RotateCcw size={16} />
|
||||
Reload Page
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
|
||||
export default ErrorBoundary;
|
||||
@@ -1,388 +0,0 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
Check,
|
||||
Zap,
|
||||
Layout,
|
||||
Trophy
|
||||
} from 'lucide-react';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { motion } from 'framer-motion';
|
||||
import type { Zone, InternalRegion, UserSelection, FrameCandidate, SlidePlan } from '../types/designAgent';
|
||||
import { getSectionsForZone } from '../utils/slidePlanUtils';
|
||||
import { buildBadgeTitle } from '../services/applicationMode';
|
||||
|
||||
interface FramePanelProps {
|
||||
slidePlan: SlidePlan | null;
|
||||
selectedZone: Zone | null;
|
||||
selectedRegion: InternalRegion | null;
|
||||
userSelection: UserSelection;
|
||||
onFrameSelect: (frameId: string) => void;
|
||||
onNoDesignToggle: () => void;
|
||||
}
|
||||
|
||||
// IMP-#84 u1 — silent-automation contract: frame selection delegates directly
|
||||
// to onFrameSelect for every V4 label (use_as_is / light_edit / restructure /
|
||||
// reject). Prior IMP-47B u11 surfaced a window.confirm popup on reject; that
|
||||
// popup is informational UI noise per `feedback_auto_pipeline_first` and is
|
||||
// removed. Frame identity is preserved on reject (AI 재구성 = content-only,
|
||||
// per AI 격리 contract); the popup never gated that contract.
|
||||
export function applyFrameSelection(
|
||||
candidate: FrameCandidate,
|
||||
onFrameSelect: (frameId: string) => void,
|
||||
): void {
|
||||
onFrameSelect(candidate.id);
|
||||
}
|
||||
|
||||
export default function FramePanel({
|
||||
slidePlan,
|
||||
selectedZone,
|
||||
selectedRegion,
|
||||
userSelection,
|
||||
onFrameSelect,
|
||||
}: FramePanelProps) {
|
||||
|
||||
// Zone 중심 컨셉: 선택된 존에 할당된 섹션들의 프레임 후보들을 수집
|
||||
const assignedSectionIds = selectedZone ? getSectionsForZone(selectedZone, userSelection) : [];
|
||||
|
||||
// 해당 섹션들이 포함된 원본 리전들에서 후보군 추출
|
||||
const candidates: FrameCandidate[] = React.useMemo(() => {
|
||||
if (!slidePlan || !selectedZone) return [];
|
||||
|
||||
// 단순화: 선택된 존의 첫 번째 리전의 후보군을 우선 사용 (Phase Z MVP1 기준)
|
||||
// 실제로는 할당된 섹션에 따라 동적으로 필터링된 후보군이 필요함
|
||||
const targetRegion = selectedRegion || selectedZone.internal_regions[0];
|
||||
return targetRegion?.frame_candidates || [];
|
||||
}, [slidePlan, selectedZone, selectedRegion]);
|
||||
|
||||
const currentFrameId = React.useMemo(() => {
|
||||
const targetRegion = selectedRegion || selectedZone?.internal_regions[0];
|
||||
if (!targetRegion) return null;
|
||||
return userSelection.overrides.zone_frames[targetRegion.id] || targetRegion.frame_match_strategy.frame_id;
|
||||
}, [selectedZone, selectedRegion, userSelection.overrides.zone_frames]);
|
||||
|
||||
const handleFrameSelect = React.useCallback(
|
||||
(candidate: FrameCandidate) => {
|
||||
applyFrameSelection(candidate, onFrameSelect);
|
||||
},
|
||||
[onFrameSelect],
|
||||
);
|
||||
|
||||
if (!selectedZone) {
|
||||
return (
|
||||
<div className="h-full flex flex-col items-center justify-center bg-slate-50 p-8 text-center text-slate-400">
|
||||
<Layout className="w-12 h-12 mb-4 opacity-10" />
|
||||
<p className="text-xs font-bold uppercase tracking-[0.2em]">Select a Zone<br />to View Designs</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col bg-white">
|
||||
{/* Header */}
|
||||
<div className="p-5 border-b border-slate-100">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h3 className="text-[10px] font-black text-slate-400 uppercase tracking-widest flex items-center gap-2">
|
||||
<Zap className="w-3.5 h-3.5 fill-blue-500 text-blue-500" />
|
||||
Design Wheel
|
||||
</h3>
|
||||
<Badge variant="outline" className="text-[9px] font-black border-slate-200 text-slate-400">
|
||||
TOP {candidates.length}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-[11px] text-slate-500 font-medium leading-tight">
|
||||
현재 구역의 섹션({assignedSectionIds.join(', ')})에 최적화된 추천 디자인입니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Vertical Wheel List */}
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-5">
|
||||
{candidates.length === 0 ? (
|
||||
<div className="py-20 text-center border-2 border-dashed border-slate-50 rounded-2xl">
|
||||
<p className="text-[10px] font-bold text-slate-300 uppercase">No Candidates Available</p>
|
||||
<p className="mt-2 px-4 text-[10px] leading-relaxed text-slate-400">
|
||||
backend candidate pool is empty for {assignedSectionIds.join(", ") || selectedZone.zone_id}.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
candidates.map((candidate, index) => {
|
||||
const isSelected = currentFrameId === candidate.id;
|
||||
|
||||
const isReject = candidate.label === "reject";
|
||||
// catalog 미등록 = backend Step 7-A 가 override 시도해도 skip.
|
||||
// catalogRegistered === false 만 체크 (undefined = 정보 없음, 일반 처리).
|
||||
const isCatalogMissing = candidate.catalogRegistered === false;
|
||||
|
||||
// ─── IMP-29 u3 — IMP-05 L2 candidate_evidence surface ───────────
|
||||
// All evidence fields optional; silent degradation when undefined
|
||||
// (pre-IMP-05 fixtures fall back to label/catalogRegistered only).
|
||||
const isFilteredDirect = candidate.filteredForDirectExecution === true;
|
||||
const hasDecision = candidate.decision === "selected" || candidate.decision === "skipped";
|
||||
const isSkipped = candidate.decision === "skipped";
|
||||
const isSelectedDecision = candidate.decision === "selected";
|
||||
const showRouteChip =
|
||||
candidate.routeHint && candidate.routeHint !== "direct_render";
|
||||
const showStatusChip =
|
||||
candidate.phaseZStatus && candidate.phaseZStatus !== "auto_renderable";
|
||||
const showCoverageChip = Boolean(candidate.coverageState);
|
||||
const hasCapacityFit =
|
||||
candidate.capacityFit && candidate.capacityFit.fit_status;
|
||||
const capacityMismatch =
|
||||
hasCapacityFit && candidate.capacityFit!.fit_status !== "ok";
|
||||
|
||||
// Compose evidence tooltip lines (only when at least one signal present).
|
||||
const evidenceLines: string[] = [];
|
||||
if (candidate.decision) evidenceLines.push(`decision: ${candidate.decision}`);
|
||||
if (candidate.reason) evidenceLines.push(`reason: ${candidate.reason}`);
|
||||
if (candidate.routeHint) evidenceLines.push(`route: ${candidate.routeHint}`);
|
||||
if (candidate.phaseZStatus)
|
||||
evidenceLines.push(`phase_z_status: ${candidate.phaseZStatus}`);
|
||||
if (candidate.candidateStatus)
|
||||
evidenceLines.push(`candidate_status: ${candidate.candidateStatus}`);
|
||||
if (candidate.coverageState)
|
||||
evidenceLines.push(`coverage_state: ${candidate.coverageState}`);
|
||||
if (hasCapacityFit) {
|
||||
const cf = candidate.capacityFit!;
|
||||
const capacityLine =
|
||||
cf.fit_status === "ok"
|
||||
? `capacity: ok${
|
||||
typeof cf.item_count === "number"
|
||||
? ` (items=${cf.item_count})`
|
||||
: ""
|
||||
}`
|
||||
: `capacity: ${cf.fit_status}${
|
||||
cf.mismatch_reason ? ` — ${cf.mismatch_reason}` : ""
|
||||
}`;
|
||||
evidenceLines.push(capacityLine);
|
||||
}
|
||||
const evidenceTooltip =
|
||||
evidenceLines.length > 0 ? evidenceLines.join("\n") : undefined;
|
||||
|
||||
// Compose final tooltip: existing catalog/reject reasons first, then
|
||||
// evidence detail (preserves Phase Q tooltip semantics).
|
||||
const tooltipParts = [
|
||||
isCatalogMissing
|
||||
? "⚠ catalog 미등록 — render path 에서 적용 안 됨 (선택해도 backend 가 skip)"
|
||||
: null,
|
||||
isFilteredDirect
|
||||
? "⚠ filtered_for_direct_execution — MVP1 직접 렌더 경로 제외"
|
||||
: null,
|
||||
isReject ? "V4 reject — render path 비추천" : null,
|
||||
evidenceTooltip,
|
||||
].filter((s): s is string => Boolean(s));
|
||||
const composedTitle =
|
||||
tooltipParts.length > 0 ? tooltipParts.join("\n\n") : undefined;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={candidate.id}
|
||||
whileHover={{ y: -2 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
className="w-full"
|
||||
>
|
||||
<button
|
||||
onClick={() => handleFrameSelect(candidate)}
|
||||
draggable
|
||||
onDragStart={(e) => {
|
||||
e.dataTransfer.setData("frameId", candidate.id);
|
||||
}}
|
||||
className={`w-full text-left rounded-3xl border-2 transition-all overflow-hidden group relative flex flex-col ${
|
||||
isSelected
|
||||
? 'border-blue-500 bg-white shadow-xl shadow-blue-500/10'
|
||||
: isCatalogMissing
|
||||
? 'border-slate-100 bg-slate-50/40 opacity-60 hover:opacity-90 hover:border-amber-200'
|
||||
: isFilteredDirect
|
||||
? 'border-slate-100 bg-slate-50/30 opacity-50 hover:opacity-90 hover:border-amber-200'
|
||||
: isReject
|
||||
? 'border-slate-100 bg-slate-50/30 opacity-50 hover:opacity-90 hover:border-slate-200'
|
||||
: 'border-slate-100 bg-slate-50/50 hover:border-slate-200 hover:bg-white'
|
||||
}`}
|
||||
title={composedTitle}
|
||||
>
|
||||
{/* Rank Badge */}
|
||||
<div className="absolute top-3 left-3 z-10">
|
||||
<div className={`px-2 py-0.5 rounded-full text-[8px] font-black uppercase tracking-tighter flex items-center gap-1 shadow-sm ${
|
||||
index === 0 ? 'bg-orange-500 text-white' : 'bg-slate-900 text-white'
|
||||
}`}>
|
||||
{index === 0 && <Trophy className="w-2 h-2" />}
|
||||
Rank {index + 1}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Preview Image */}
|
||||
<div className="h-36 bg-slate-200 relative overflow-hidden">
|
||||
{candidate.thumbnailUrl ? (
|
||||
<img
|
||||
src={candidate.thumbnailUrl}
|
||||
alt={candidate.name}
|
||||
className={`w-full h-full object-contain bg-white transition-transform duration-500 ${isSelected ? 'scale-105' : 'group-hover:scale-105'}`}
|
||||
onError={(e) => {
|
||||
// preview.png 없는 frame — placeholder 로 swap.
|
||||
const img = e.currentTarget;
|
||||
img.style.display = "none";
|
||||
const parent = img.parentElement;
|
||||
if (parent && !parent.querySelector(".frame-fallback")) {
|
||||
const ph = document.createElement("div");
|
||||
ph.className = "frame-fallback w-full h-full flex flex-col items-center justify-center bg-slate-100 text-slate-400";
|
||||
ph.innerHTML = `
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-8 h-8 mb-1">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2"/>
|
||||
<line x1="3" y1="9" x2="21" y2="9"/>
|
||||
</svg>
|
||||
<span style="font-size:9px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;">no preview</span>
|
||||
`;
|
||||
parent.appendChild(ph);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<Layout className="w-10 h-10 text-slate-300" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Confidence Score Overlay */}
|
||||
<div className="absolute bottom-3 right-3 px-2 py-1 rounded-lg bg-blue-600/90 backdrop-blur text-white text-[10px] font-black shadow-lg">
|
||||
{(candidate.score * 100).toFixed(0)}% Match
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Info Footer */}
|
||||
<div className="p-4 bg-white">
|
||||
<span className={`text-[11px] font-black uppercase tracking-tight block truncate mb-1 ${isSelected ? 'text-blue-700' : 'text-slate-800'}`}>
|
||||
{candidate.name}
|
||||
</span>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="text-[9px] font-bold text-slate-400 uppercase tracking-widest truncate">{candidate.id}</span>
|
||||
<div className="flex items-center gap-1.5 shrink-0">
|
||||
{/* catalog 미등록 배지 — backend render path 미연결 명시 */}
|
||||
{isCatalogMissing && (
|
||||
<span
|
||||
className="text-[8px] font-black uppercase tracking-tight px-1.5 py-0.5 rounded bg-slate-200 text-slate-600"
|
||||
title="catalog 미등록 — backend 적용 X"
|
||||
>
|
||||
no catalog
|
||||
</span>
|
||||
)}
|
||||
{/* V4 label badge */}
|
||||
{/* IMP-41 u5 — tooltip delegated to pure helper
|
||||
`buildBadgeTitle` (services/applicationMode.ts).
|
||||
applicationMode is forwarded by designAgentApi.ts
|
||||
(u4) from Step 9 unit.application_candidates[];
|
||||
helper falls back to the raw V4 label when the
|
||||
mode is undefined or unknown. Badge color mapping
|
||||
is intentionally untouched per Stage 2 scope. */}
|
||||
{candidate.label && (
|
||||
<span
|
||||
className={`text-[8px] font-black uppercase tracking-tight px-1.5 py-0.5 rounded ${
|
||||
candidate.label === "use_as_is"
|
||||
? "bg-emerald-100 text-emerald-700"
|
||||
: candidate.label === "light_edit"
|
||||
? "bg-blue-100 text-blue-700"
|
||||
: candidate.label === "restructure"
|
||||
? "bg-amber-100 text-amber-700"
|
||||
: "bg-red-100 text-red-700"
|
||||
}`}
|
||||
title={buildBadgeTitle(candidate.label, candidate.applicationMode)}
|
||||
>
|
||||
{candidate.label}
|
||||
</span>
|
||||
)}
|
||||
{showCoverageChip && (
|
||||
<span
|
||||
className={`text-[8px] font-black uppercase tracking-tight px-1.5 py-0.5 rounded ${
|
||||
candidate.coverageState === "covered_native"
|
||||
? "bg-emerald-50 text-emerald-700"
|
||||
: candidate.coverageState === "covered_via_expand"
|
||||
? "bg-cyan-50 text-cyan-700"
|
||||
: candidate.coverageState === "requires_adaptation"
|
||||
? "bg-amber-50 text-amber-700"
|
||||
: "bg-slate-100 text-slate-600"
|
||||
}`}
|
||||
title={`coverage_state: ${candidate.coverageState}`}
|
||||
>
|
||||
{candidate.coverageState === "covered_native"
|
||||
? "native"
|
||||
: candidate.coverageState === "covered_via_expand"
|
||||
? "expand"
|
||||
: candidate.coverageState === "requires_adaptation"
|
||||
? "adapt"
|
||||
: "unsup"}
|
||||
</span>
|
||||
)}
|
||||
{/* IMP-29 u3 — route hint chip (skip when direct_render = default). */}
|
||||
{showRouteChip && (
|
||||
<span
|
||||
className="text-[8px] font-black uppercase tracking-tight px-1.5 py-0.5 rounded bg-slate-100 text-slate-600"
|
||||
title={`route_hint: ${candidate.routeHint}`}
|
||||
>
|
||||
{candidate.routeHint === "deterministic_minor_adjustment"
|
||||
? "adapt"
|
||||
: candidate.routeHint === "ai_adaptation_required"
|
||||
? "ai req"
|
||||
: candidate.routeHint === "design_reference_only"
|
||||
? "ref"
|
||||
: candidate.routeHint}
|
||||
</span>
|
||||
)}
|
||||
{/* IMP-29 u3 — phase_z status warning chip (skip when auto_renderable). */}
|
||||
{showStatusChip && (
|
||||
<span
|
||||
className="text-[8px] font-black uppercase tracking-tight px-1.5 py-0.5 rounded bg-amber-50 text-amber-700"
|
||||
title={`phase_z_status: ${candidate.phaseZStatus}`}
|
||||
>
|
||||
{candidate.phaseZStatus!.replace(/_/g, " ")}
|
||||
</span>
|
||||
)}
|
||||
{/* IMP-29 u3 — capacity_fit indicator (ok = subtle, mismatch = warning). */}
|
||||
{hasCapacityFit && (
|
||||
<span
|
||||
className={`text-[8px] font-black uppercase tracking-tight px-1.5 py-0.5 rounded ${
|
||||
capacityMismatch
|
||||
? "bg-amber-100 text-amber-700"
|
||||
: "bg-slate-100 text-slate-500"
|
||||
}`}
|
||||
title={`capacity_fit: ${candidate.capacityFit!.fit_status}${
|
||||
candidate.capacityFit!.mismatch_reason
|
||||
? ` — ${candidate.capacityFit!.mismatch_reason}`
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
{capacityMismatch
|
||||
? `fit: ${candidate.capacityFit!.fit_status}`
|
||||
: "fit ok"}
|
||||
</span>
|
||||
)}
|
||||
{/* IMP-29 u3 — decision badge (Stage 2 contract: surface both selected & skipped). */}
|
||||
{hasDecision && (
|
||||
<span
|
||||
className={`text-[8px] font-black uppercase tracking-tight px-1.5 py-0.5 rounded ${
|
||||
isSelectedDecision
|
||||
? "bg-emerald-50 text-emerald-700"
|
||||
: "bg-red-50 text-red-600"
|
||||
}`}
|
||||
title={`decision: ${candidate.decision}${
|
||||
candidate.reason ? ` — ${candidate.reason}` : ""
|
||||
}`}
|
||||
>
|
||||
{isSkipped ? "skip" : "sel"}
|
||||
</span>
|
||||
)}
|
||||
{isSelected && (
|
||||
<div className="flex items-center gap-1 text-[8px] font-black text-emerald-500 uppercase">
|
||||
<Check className="w-2.5 h-2.5 stroke-[4]" />
|
||||
Applied
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</motion.div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
<div className="h-4" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,244 +0,0 @@
|
||||
/**
|
||||
* LayoutPanel - 우측 레이아웃 패널
|
||||
*
|
||||
* Zone 내부 배치 구조를 선택하는 패널
|
||||
* 목표 이미지 기준: 8개 레이아웃 썸네일 (3×3 그리드)
|
||||
*/
|
||||
|
||||
import type { LayoutCandidate, Zone, UserSelection, LayoutPresetId } from "../types/designAgent";
|
||||
import { getEffectiveLayoutId } from "../utils/slidePlanUtils";
|
||||
import { MOCK_LAYOUT_CANDIDATES } from "../data/mockDesignAgentData";
|
||||
|
||||
interface LayoutPanelProps {
|
||||
selectedZone: Zone | null;
|
||||
userSelection: UserSelection;
|
||||
onLayoutSelect: (layoutId: string) => void;
|
||||
/** Phase 2 : 카드 별 "적용하기" 버튼 → 빈 layout 모드로 전환. */
|
||||
onApplyLayout?: (layoutId: LayoutPresetId) => void;
|
||||
/**
|
||||
* step07_layout.json `data.layout_candidates` (Phase Z 가 zone topology + unit_count
|
||||
* 로 추려낸 가능한 preset list). 비어있거나 undefined 면 모든 8 preset 표시.
|
||||
*/
|
||||
availableLayoutIds?: string[];
|
||||
/** step07_layout.json `data.layout_preset` (Phase Z 가 default 로 결정한 preset). */
|
||||
pipelineSelectedLayoutId?: string;
|
||||
/** Phase 2 : 현재 적용 중인 pending layout. 그 카드에는 "적용 중" 표시. */
|
||||
pendingLayoutId?: LayoutPresetId | null;
|
||||
}
|
||||
|
||||
// 레이아웃 타입별 SVG 썸네일
|
||||
function LayoutThumb({ type, id }: { type: LayoutCandidate["type"]; id: string }) {
|
||||
switch (id) {
|
||||
case "single":
|
||||
return (
|
||||
<svg viewBox="0 0 56 38" className="w-full h-full">
|
||||
<rect x="2" y="2" width="52" height="34" rx="2" fill="#f1f5f9" stroke="#e2e8f0" strokeWidth="0.5" />
|
||||
<rect x="5" y="5" width="46" height="8" rx="1" fill="#3b82f6" />
|
||||
<rect x="5" y="15" width="46" height="7" rx="1" fill="#dbeafe" />
|
||||
<rect x="5" y="24" width="46" height="7" rx="1" fill="#dbeafe" />
|
||||
</svg>
|
||||
);
|
||||
case "horizontal-2":
|
||||
// backend: rows topology = 위/아래 2 zone (top, bottom)
|
||||
return (
|
||||
<svg viewBox="0 0 56 38" className="w-full h-full">
|
||||
<rect x="2" y="2" width="52" height="34" rx="2" fill="#f1f5f9" stroke="#e2e8f0" strokeWidth="0.5" />
|
||||
<rect x="5" y="5" width="46" height="5" rx="1" fill="#3b82f6" />
|
||||
<rect x="5" y="12" width="46" height="9" rx="1" fill="#dbeafe" />
|
||||
<rect x="5" y="23" width="46" height="9" rx="1" fill="#dbeafe" />
|
||||
</svg>
|
||||
);
|
||||
case "vertical-2":
|
||||
// backend: cols topology = 좌/우 2 zone (left, right)
|
||||
return (
|
||||
<svg viewBox="0 0 56 38" className="w-full h-full">
|
||||
<rect x="2" y="2" width="52" height="34" rx="2" fill="#f1f5f9" stroke="#e2e8f0" strokeWidth="0.5" />
|
||||
<rect x="5" y="5" width="46" height="5" rx="1" fill="#3b82f6" />
|
||||
<rect x="5" y="12" width="22" height="20" rx="1" fill="#dbeafe" />
|
||||
<rect x="29" y="12" width="22" height="20" rx="1" fill="#dbeafe" />
|
||||
</svg>
|
||||
);
|
||||
case "top-1-bottom-2":
|
||||
// backend: T topology = 위 1 zone + 아래 좌/우 2 zone
|
||||
return (
|
||||
<svg viewBox="0 0 56 38" className="w-full h-full">
|
||||
<rect x="2" y="2" width="52" height="34" rx="2" fill="#f1f5f9" stroke="#e2e8f0" strokeWidth="0.5" />
|
||||
<rect x="5" y="5" width="46" height="5" rx="1" fill="#3b82f6" />
|
||||
<rect x="5" y="12" width="46" height="9" rx="1" fill="#3b82f6" opacity="0.7" />
|
||||
<rect x="5" y="23" width="22" height="9" rx="1" fill="#dbeafe" />
|
||||
<rect x="29" y="23" width="22" height="9" rx="1" fill="#dbeafe" />
|
||||
</svg>
|
||||
);
|
||||
case "top-2-bottom-1":
|
||||
// backend: inverted-T topology = 위 좌/우 2 zone + 아래 1 zone
|
||||
return (
|
||||
<svg viewBox="0 0 56 38" className="w-full h-full">
|
||||
<rect x="2" y="2" width="52" height="34" rx="2" fill="#f1f5f9" stroke="#e2e8f0" strokeWidth="0.5" />
|
||||
<rect x="5" y="5" width="46" height="5" rx="1" fill="#3b82f6" />
|
||||
<rect x="5" y="12" width="22" height="9" rx="1" fill="#dbeafe" />
|
||||
<rect x="29" y="12" width="22" height="9" rx="1" fill="#dbeafe" />
|
||||
<rect x="5" y="23" width="46" height="9" rx="1" fill="#3b82f6" opacity="0.7" />
|
||||
</svg>
|
||||
);
|
||||
case "left-1-right-2":
|
||||
return (
|
||||
<svg viewBox="0 0 56 38" className="w-full h-full">
|
||||
<rect x="2" y="2" width="52" height="34" rx="2" fill="#f1f5f9" stroke="#e2e8f0" strokeWidth="0.5" />
|
||||
<rect x="5" y="5" width="46" height="5" rx="1" fill="#3b82f6" />
|
||||
<rect x="5" y="12" width="16" height="20" rx="1" fill="#dbeafe" />
|
||||
<rect x="23" y="12" width="28" height="20" rx="1" fill="#3b82f6" opacity="0.7" />
|
||||
</svg>
|
||||
);
|
||||
case "left-2-right-1":
|
||||
return (
|
||||
<svg viewBox="0 0 56 38" className="w-full h-full">
|
||||
<rect x="2" y="2" width="52" height="34" rx="2" fill="#f1f5f9" stroke="#e2e8f0" strokeWidth="0.5" />
|
||||
<rect x="5" y="5" width="46" height="5" rx="1" fill="#3b82f6" />
|
||||
<rect x="5" y="12" width="28" height="20" rx="1" fill="#3b82f6" opacity="0.7" />
|
||||
<rect x="35" y="12" width="16" height="20" rx="1" fill="#dbeafe" />
|
||||
</svg>
|
||||
);
|
||||
case "grid-2x2":
|
||||
return (
|
||||
<svg viewBox="0 0 56 38" className="w-full h-full">
|
||||
<rect x="2" y="2" width="52" height="34" rx="2" fill="#f1f5f9" stroke="#e2e8f0" strokeWidth="0.5" />
|
||||
<rect x="5" y="5" width="46" height="5" rx="1" fill="#3b82f6" />
|
||||
<rect x="5" y="12" width="22" height="9" rx="1" fill="#dbeafe" />
|
||||
<rect x="29" y="12" width="22" height="9" rx="1" fill="#dbeafe" />
|
||||
<rect x="5" y="23" width="22" height="9" rx="1" fill="#dbeafe" />
|
||||
<rect x="29" y="23" width="22" height="9" rx="1" fill="#dbeafe" />
|
||||
</svg>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<svg viewBox="0 0 56 38" className="w-full h-full">
|
||||
<rect x="2" y="2" width="52" height="34" rx="2" fill="#f1f5f9" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default function LayoutPanel({
|
||||
selectedZone,
|
||||
userSelection,
|
||||
onLayoutSelect,
|
||||
onApplyLayout,
|
||||
availableLayoutIds,
|
||||
pipelineSelectedLayoutId,
|
||||
pendingLayoutId,
|
||||
}: LayoutPanelProps) {
|
||||
// Layout 패널은 항상 8 preset 전체 표시 (사용자 lock 2026-05-08).
|
||||
// step07 의 layout_candidates 는 *호환성 표시용* 으로만 사용 — 호환 안 되는 preset
|
||||
// 은 회색 / opacity 낮춤 / tooltip 으로 차별. 클릭 자체는 가능 (강제 적용 가능).
|
||||
const candidates = MOCK_LAYOUT_CANDIDATES;
|
||||
const compatibleSet = new Set(
|
||||
availableLayoutIds && availableLayoutIds.length > 0
|
||||
? availableLayoutIds
|
||||
: candidates.map((c) => c.id)
|
||||
);
|
||||
|
||||
const effectiveLayoutId =
|
||||
userSelection.overrides.layout_preset ||
|
||||
pipelineSelectedLayoutId ||
|
||||
"horizontal-2";
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col">
|
||||
{/* 헤더 */}
|
||||
<div className="px-4 py-3 border-b border-slate-200 bg-slate-50/50">
|
||||
<p className="text-[10px] font-black text-slate-400 uppercase tracking-widest">
|
||||
Slide Layout Presets
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 레이아웃 그리드 */}
|
||||
<div className="flex-1 overflow-y-auto p-3">
|
||||
{selectedZone && (
|
||||
<div className="mb-4 p-2 bg-blue-50 rounded-lg border border-blue-100 flex items-center gap-2">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-blue-500 animate-pulse" />
|
||||
<span className="text-[10px] font-bold text-blue-700 uppercase">Editing Zone: {selectedZone.zone_id}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{candidates.map((candidate) => {
|
||||
const isActive = effectiveLayoutId === candidate.id;
|
||||
const isCompatible = compatibleSet.has(candidate.id);
|
||||
const isPendingActive = pendingLayoutId === candidate.id;
|
||||
return (
|
||||
<div
|
||||
key={candidate.id}
|
||||
className={`relative flex flex-col items-center gap-1 p-1.5 rounded-lg border-2 transition-all duration-150 ${
|
||||
isPendingActive
|
||||
? "border-amber-500 bg-amber-50 ring-2 ring-amber-200"
|
||||
: isActive
|
||||
? "border-blue-500 bg-blue-50"
|
||||
: isCompatible
|
||||
? "border-slate-200 bg-white hover:border-blue-300 hover:bg-blue-50/40"
|
||||
: "border-dashed border-slate-200 bg-slate-50/40 opacity-50 hover:opacity-80 hover:border-amber-300"
|
||||
}`}
|
||||
onClick={() => onLayoutSelect(candidate.id)}
|
||||
title={
|
||||
isCompatible
|
||||
? candidate.description
|
||||
: `${candidate.description}\n\n⚠ 현재 unit_count 와 호환 안 됨 — 강제 적용 시 zone 매핑 fail 가능`
|
||||
}
|
||||
>
|
||||
{/* 썸네일 */}
|
||||
<div className="w-full aspect-[56/38] overflow-hidden rounded">
|
||||
<LayoutThumb type={candidate.type} id={candidate.id} />
|
||||
</div>
|
||||
{/* 이름 */}
|
||||
<span
|
||||
className={`text-xs font-medium leading-tight text-center ${
|
||||
isActive
|
||||
? "text-blue-700"
|
||||
: isCompatible
|
||||
? "text-slate-600"
|
||||
: "text-slate-400"
|
||||
}`}
|
||||
style={{ fontSize: 10 }}
|
||||
>
|
||||
{candidate.name}
|
||||
</span>
|
||||
{/* 선택 체크 */}
|
||||
{isActive && (
|
||||
<div className="absolute top-1 right-1 w-3.5 h-3.5 bg-blue-500 rounded-full flex items-center justify-center">
|
||||
<svg viewBox="0 0 8 8" className="w-2 h-2">
|
||||
<path d="M1.5 4L3.5 6L6.5 2" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none" />
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
{/* 호환 안 됨 배지 */}
|
||||
{!isCompatible && !isActive && !isPendingActive && (
|
||||
<div className="absolute top-1 right-1 text-[8px] font-black bg-amber-100 text-amber-700 px-1 rounded">
|
||||
!
|
||||
</div>
|
||||
)}
|
||||
{/* Pending 적용 배지 */}
|
||||
{isPendingActive && (
|
||||
<div className="absolute top-1 right-1 text-[8px] font-black bg-amber-500 text-white px-1.5 py-0.5 rounded shadow">
|
||||
적용중
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* "적용하기" 버튼 — 현재 적용된 layout 이 아니고 onApplyLayout 핸들러
|
||||
있을 때 표시. 클릭 시 빈 layout 모드 진입 (이중 액션). */}
|
||||
{!isActive && !isPendingActive && onApplyLayout && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onApplyLayout(candidate.id as LayoutPresetId);
|
||||
}}
|
||||
className="w-full mt-1 text-[9px] font-black uppercase tracking-tighter py-1 rounded bg-amber-500 text-white hover:bg-amber-600 transition"
|
||||
>
|
||||
적용하기
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,346 +0,0 @@
|
||||
/**
|
||||
* LeftMdxPanel - 좌측 MDX 구조 탐색기
|
||||
*
|
||||
* 기능:
|
||||
* - MDX 파일 업로드 버튼
|
||||
* - 추출된 섹션들의 계층 구조(Level 1~3) 표시
|
||||
* - 섹션 클릭 시 중앙 캔버스의 해당 구역 하이라이트
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import {
|
||||
FileText,
|
||||
ChevronRight,
|
||||
Upload,
|
||||
Zap,
|
||||
Layers,
|
||||
List,
|
||||
} from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import { toast } from 'sonner';
|
||||
import type { NormalizedContent } from '../types/designAgent';
|
||||
|
||||
interface LeftMdxPanelProps {
|
||||
normalizedContent: NormalizedContent | null;
|
||||
uploadedFile: File | null;
|
||||
isLoading: boolean;
|
||||
selectedSectionId: string | null;
|
||||
hasSlidePlan: boolean;
|
||||
/** 사용자가 frame / section / layout / zone 등 override 를 변경했을 때 true.
|
||||
* 하단 버튼이 "선택대로 재생성하기" 강조 버튼으로 전환. */
|
||||
hasPendingChanges?: boolean;
|
||||
onFileUpload: (file: File) => void;
|
||||
onGenerate: () => void;
|
||||
onSectionClick: (sectionId: string) => void;
|
||||
/** 사용자 lock 2026-05-14 — 좌측 패널에 01~05 fix 고정 list. 클릭 시 callback. */
|
||||
onSelectSample?: (which: "01" | "02" | "03" | "04" | "05") => void;
|
||||
selectedSample?: "01" | "02" | "03" | "04" | "05" | null;
|
||||
}
|
||||
|
||||
const SAMPLE_MDX_LIST: { key: "01" | "02" | "03" | "04" | "05"; label: string; subtitle: string }[] = [
|
||||
{ key: "01", label: "01. 건설산업 DX의 올바른 이해", subtitle: "DX 개념 + 산업 전환 관점" },
|
||||
{ key: "02", label: "02. DX의 시행 목표 및 기대효과", subtitle: "시행 목표 + 기대효과" },
|
||||
{ key: "03", label: "03. DX 시행을 위한 필수 요건", subtitle: "필수 요건 + Process/Product 혁신" },
|
||||
{ key: "04", label: "04. DX 지연 요인", subtitle: "DX 인식 + 정책/조직 실태" },
|
||||
{ key: "05", label: "05. 설계 방식의 왜곡", subtitle: "설계 자동화 오용 + S/W 한계" },
|
||||
];
|
||||
|
||||
export default function LeftMdxPanel({
|
||||
normalizedContent,
|
||||
uploadedFile,
|
||||
isLoading,
|
||||
selectedSectionId,
|
||||
hasSlidePlan,
|
||||
hasPendingChanges = false,
|
||||
onFileUpload,
|
||||
onGenerate,
|
||||
onSectionClick,
|
||||
onSelectSample,
|
||||
selectedSample = null,
|
||||
}: LeftMdxPanelProps) {
|
||||
const fileInputRef = React.useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file) onFileUpload(file);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col bg-slate-50">
|
||||
{/* ── 헤더: 문서 정보 ── */}
|
||||
<div className="p-4 border-b border-slate-200 bg-white">
|
||||
<h2 className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-3 flex items-center gap-1.5">
|
||||
<FileText className="w-3.5 h-3.5" />
|
||||
MDX Source
|
||||
</h2>
|
||||
|
||||
{/* 2026-05-14 — 01~05 fix 고정 list. 클릭 시 해당 mdx 자동 fetch + 분석.
|
||||
frame/layout override 는 분석 후 우측 패널에서 가능. */}
|
||||
{onSelectSample && (
|
||||
<div className="space-y-1 mb-3">
|
||||
{SAMPLE_MDX_LIST.map((s) => {
|
||||
const isActive = selectedSample === s.key;
|
||||
return (
|
||||
<button
|
||||
key={s.key}
|
||||
onClick={() => onSelectSample(s.key)}
|
||||
disabled={isLoading}
|
||||
className={`w-full text-left p-2 rounded-md border transition-all ${
|
||||
isActive
|
||||
? "bg-blue-50 border-blue-300 ring-1 ring-blue-200"
|
||||
: "bg-white border-slate-200 hover:bg-slate-50 hover:border-slate-300"
|
||||
} ${isLoading ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`}
|
||||
title={`${s.label} — 클릭하여 슬라이드 생성`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`w-7 h-7 rounded flex items-center justify-center shrink-0 ${
|
||||
isActive ? "bg-blue-200 text-blue-700" : "bg-slate-100 text-slate-500"
|
||||
}`}>
|
||||
<FileText className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className={`text-[11px] font-bold truncate ${
|
||||
isActive ? "text-blue-700" : "text-slate-700"
|
||||
}`}>{s.label}</p>
|
||||
<p className="text-[10px] text-slate-400 truncate">{s.subtitle}</p>
|
||||
</div>
|
||||
{isActive && <div className="w-1.5 h-1.5 rounded-full bg-blue-500 shrink-0" />}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{uploadedFile ? (
|
||||
<div className="flex items-center gap-2 p-2 rounded-md bg-slate-50 border border-slate-200">
|
||||
<div className="w-8 h-8 rounded bg-blue-100 flex items-center justify-center text-blue-600">
|
||||
<FileText className="w-4 h-4" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-xs font-semibold text-slate-700 truncate">{uploadedFile.name}</p>
|
||||
<p className="text-[10px] text-slate-400">{(uploadedFile.size / 1024).toFixed(1)} KB</p>
|
||||
</div>
|
||||
{!hasSlidePlan && (
|
||||
<button
|
||||
className="p-1.5 text-slate-400 hover:text-red-500 transition-colors"
|
||||
onClick={() => window.location.reload()}
|
||||
>
|
||||
<Layers className="w-4 h-4 rotate-45" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full h-12 border-dashed border-2 flex items-center justify-center gap-2 text-slate-500 hover:text-blue-600 hover:border-blue-300 hover:bg-blue-50"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
>
|
||||
<Upload className="w-4 h-4" />
|
||||
<span className="text-[11px] font-medium">또는 직접 업로드</span>
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
className="hidden"
|
||||
accept=".mdx,.md"
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── 분석 진행 상태 (로딩 시) ── */}
|
||||
{isLoading && (
|
||||
<div className="p-4 border-b border-slate-200 bg-white">
|
||||
<div className="flex items-center justify-between mb-1.5">
|
||||
<span className="text-[10px] font-semibold text-blue-600">콘텐츠 분석 중...</span>
|
||||
<span className="text-[10px] text-slate-400">STAGE 1</span>
|
||||
</div>
|
||||
<Progress value={45} className="h-1" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── 섹션 트리 리스트 ── */}
|
||||
<ScrollArea className="flex-1 p-2">
|
||||
{!normalizedContent ? (
|
||||
<div className="py-20 text-center px-4">
|
||||
<List className="w-8 h-8 text-slate-200 mx-auto mb-2" />
|
||||
<p className="text-[11px] text-slate-400">파일을 업로드하면<br />문서 구조가 표시됩니다.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
{/* 문서 제목 (Level 1) */}
|
||||
<div className="px-2 py-1.5 mb-2">
|
||||
<h1 className="text-sm font-bold text-slate-800 leading-tight">
|
||||
{normalizedContent.title}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* 섹션들 (Level 2+) — native HTML5 drag (framer-motion drag 와 충돌
|
||||
있어서 native 만 사용). dataTransfer 에 sectionId / section-id /
|
||||
text/plain 다 set 해서 SlideCanvas drop 이 어떤 키로든 받게. */}
|
||||
{normalizedContent.sections.map((section) => {
|
||||
const isSelected = selectedSectionId === section.id;
|
||||
const subSections = section.sub_sections ?? [];
|
||||
|
||||
return (
|
||||
<div key={section.id} className="space-y-0.5">
|
||||
{/* 중목차 (S1, S2 ...) */}
|
||||
<button
|
||||
draggable
|
||||
onDragStart={(e) => {
|
||||
e.dataTransfer.effectAllowed = "move";
|
||||
e.dataTransfer.setData("sectionId", section.id);
|
||||
e.dataTransfer.setData("section-id", section.id);
|
||||
e.dataTransfer.setData("text/plain", section.id);
|
||||
}}
|
||||
className={`w-full text-left p-2 rounded-md transition-all group relative cursor-grab active:cursor-grabbing ${
|
||||
isSelected
|
||||
? 'bg-blue-50 text-blue-700 shadow-sm ring-1 ring-blue-100'
|
||||
: 'hover:bg-slate-100 text-slate-600'
|
||||
}`}
|
||||
onClick={() => onSectionClick(section.id)}
|
||||
title={`S${section.index} — 드래그하여 zone 에 배정`}
|
||||
>
|
||||
<div className="flex items-start gap-2">
|
||||
<ChevronRight className={`w-3 h-3 mt-1 shrink-0 transition-transform ${subSections.length > 0 ? 'rotate-90' : ''} ${isSelected ? 'text-blue-500' : 'text-slate-300'}`} />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-1.5 mb-0.5">
|
||||
<span className={`text-[10px] font-bold px-1 rounded ${isSelected ? 'bg-blue-200/50 text-blue-600' : 'bg-slate-200 text-slate-500'}`}>
|
||||
S{section.index}
|
||||
</span>
|
||||
<span className="text-[11px] font-bold truncate">
|
||||
{section.title}
|
||||
</span>
|
||||
</div>
|
||||
<p className={`text-[10px] line-clamp-2 leading-relaxed ${isSelected ? 'text-blue-600/70' : 'text-slate-400'}`}>
|
||||
{section.content_objects?.[0]?.raw_payload || (subSections.length > 0 ? `소목차 ${subSections.length} 개` : "내용 없음")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isSelected && (
|
||||
<div className="absolute left-0 top-1 bottom-1 w-0.5 bg-blue-500 rounded-full" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* 소목차 (S1.1, S1.2 ...) — 펼친 상태로 indent 표시. 각자 draggable. */}
|
||||
{subSections.length > 0 && (
|
||||
<div className="ml-4 pl-2 border-l border-slate-200 space-y-0.5">
|
||||
{subSections.map((sub) => {
|
||||
const isSubSelected = selectedSectionId === sub.id;
|
||||
return (
|
||||
<button
|
||||
key={sub.id}
|
||||
draggable
|
||||
onDragStart={(e) => {
|
||||
e.dataTransfer.effectAllowed = "move";
|
||||
e.dataTransfer.setData("sectionId", sub.id);
|
||||
e.dataTransfer.setData("section-id", sub.id);
|
||||
e.dataTransfer.setData("text/plain", sub.id);
|
||||
}}
|
||||
className={`w-full text-left p-1.5 rounded-md transition-all relative cursor-grab active:cursor-grabbing ${
|
||||
isSubSelected
|
||||
? 'bg-blue-50 text-blue-700 ring-1 ring-blue-100'
|
||||
: 'hover:bg-slate-100 text-slate-500'
|
||||
}`}
|
||||
onClick={() => onSectionClick(sub.id)}
|
||||
title={`S${section.index}.${sub.index} — 드래그하여 zone 에 배정`}
|
||||
>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className={`text-[9px] font-bold px-1 rounded shrink-0 ${isSubSelected ? 'bg-blue-200/50 text-blue-600' : 'bg-slate-100 text-slate-400'}`}>
|
||||
S{section.index}.{sub.index}
|
||||
</span>
|
||||
<span className="text-[10px] font-medium truncate">
|
||||
{sub.title}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</ScrollArea>
|
||||
|
||||
{/* ── 하단 분석 버튼 ── */}
|
||||
<div className="p-3 border-t border-slate-200 bg-white">
|
||||
{!normalizedContent ? (
|
||||
<div className="text-center py-2">
|
||||
<p className="text-[10px] text-slate-400 mb-2 font-medium uppercase tracking-tight">MDX 분석 대기 중</p>
|
||||
<Button
|
||||
className="w-full h-10 border-slate-200 text-slate-400"
|
||||
variant="outline"
|
||||
disabled
|
||||
>
|
||||
슬라이드 생성하기
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-2">
|
||||
{!hasSlidePlan ? (
|
||||
<Button
|
||||
className="w-full gap-2 bg-blue-600 hover:bg-blue-700 h-10 shadow-lg shadow-blue-500/20"
|
||||
onClick={onGenerate}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<Zap className="w-3.5 h-3.5 fill-current" />
|
||||
슬라이드 플랜 생성하기
|
||||
</Button>
|
||||
) : hasPendingChanges ? (
|
||||
// override 변경 있음 — 강조 "선택대로 재생성하기" 버튼
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex items-center gap-1.5 px-1">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse" />
|
||||
<span className="text-[10px] font-black text-amber-700 uppercase tracking-tighter">
|
||||
Pending Changes
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
className="w-full gap-2 bg-amber-500 hover:bg-amber-600 h-11 shadow-lg shadow-amber-500/30 text-white font-bold"
|
||||
onClick={onGenerate}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<Zap className="w-4 h-4 fill-current" />
|
||||
선택대로 재생성하기
|
||||
</Button>
|
||||
<p className="text-[10px] text-slate-500 leading-tight px-1">
|
||||
레이아웃 / 프레임 / 섹션 변경을 backend 에 적용해 새 final.html 을
|
||||
생성합니다. (※ Step D backend forwarding 연결 후 활성)
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex items-center justify-between px-1">
|
||||
<span className="text-[10px] font-bold text-emerald-600 flex items-center gap-1">
|
||||
<Zap className="w-3 h-3 fill-current" />
|
||||
플랜 생성 완료
|
||||
</span>
|
||||
<button
|
||||
className="text-[10px] text-blue-600 font-bold hover:underline"
|
||||
onClick={onGenerate}
|
||||
>
|
||||
재생성
|
||||
</button>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full h-8 text-[11px] border-slate-200 bg-slate-50"
|
||||
onClick={() => toast.info("MDX 원문 편집 기능은 준비 중입니다.")}
|
||||
>
|
||||
MDX 소스 보기
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,85 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
|
||||
interface ManusDialogProps {
|
||||
title?: string;
|
||||
logo?: string;
|
||||
open?: boolean;
|
||||
onLogin: () => void;
|
||||
onOpenChange?: (open: boolean) => void;
|
||||
onClose?: () => void;
|
||||
}
|
||||
|
||||
export function ManusDialog({
|
||||
title,
|
||||
logo,
|
||||
open = false,
|
||||
onLogin,
|
||||
onOpenChange,
|
||||
onClose,
|
||||
}: ManusDialogProps) {
|
||||
const [internalOpen, setInternalOpen] = useState(open);
|
||||
|
||||
useEffect(() => {
|
||||
if (!onOpenChange) {
|
||||
setInternalOpen(open);
|
||||
}
|
||||
}, [open, onOpenChange]);
|
||||
|
||||
const handleOpenChange = (nextOpen: boolean) => {
|
||||
if (onOpenChange) {
|
||||
onOpenChange(nextOpen);
|
||||
} else {
|
||||
setInternalOpen(nextOpen);
|
||||
}
|
||||
|
||||
if (!nextOpen) {
|
||||
onClose?.();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={onOpenChange ? open : internalOpen}
|
||||
onOpenChange={handleOpenChange}
|
||||
>
|
||||
<DialogContent className="py-5 bg-[#f8f8f7] rounded-[20px] w-[400px] shadow-[0px_4px_11px_0px_rgba(0,0,0,0.08)] border border-[rgba(0,0,0,0.08)] backdrop-blur-2xl p-0 gap-0 text-center">
|
||||
<div className="flex flex-col items-center gap-2 p-5 pt-12">
|
||||
{logo ? (
|
||||
<div className="w-16 h-16 bg-white rounded-xl border border-[rgba(0,0,0,0.08)] flex items-center justify-center">
|
||||
<img src={logo} alt="Dialog graphic" className="w-10 h-10 rounded-md" />
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* Title and subtitle */}
|
||||
{title ? (
|
||||
<DialogTitle className="text-xl font-semibold text-[#34322d] leading-[26px] tracking-[-0.44px]">
|
||||
{title}
|
||||
</DialogTitle>
|
||||
) : null}
|
||||
<DialogDescription className="text-sm text-[#858481] leading-5 tracking-[-0.154px]">
|
||||
Please login with Manus to continue
|
||||
</DialogDescription>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="px-5 py-5">
|
||||
{/* Login button */}
|
||||
<Button
|
||||
onClick={onLogin}
|
||||
className="w-full h-10 bg-[#1a1a19] hover:bg-[#1a1a19]/90 text-white rounded-[10px] text-sm font-medium leading-5 tracking-[-0.154px]"
|
||||
>
|
||||
Login with Manus
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -1,155 +0,0 @@
|
||||
/**
|
||||
* GOOGLE MAPS FRONTEND INTEGRATION - ESSENTIAL GUIDE
|
||||
*
|
||||
* USAGE FROM PARENT COMPONENT:
|
||||
* ======
|
||||
*
|
||||
* const mapRef = useRef<google.maps.Map | null>(null);
|
||||
*
|
||||
* <MapView
|
||||
* initialCenter={{ lat: 40.7128, lng: -74.0060 }}
|
||||
* initialZoom={15}
|
||||
* onMapReady={(map) => {
|
||||
* mapRef.current = map; // Store to control map from parent anytime, google map itself is in charge of the re-rendering, not react state.
|
||||
* </MapView>
|
||||
*
|
||||
* ======
|
||||
* Available Libraries and Core Features:
|
||||
* -------------------------------
|
||||
* 📍 MARKER (from `marker` library)
|
||||
* - Attaches to map using { map, position }
|
||||
* new google.maps.marker.AdvancedMarkerElement({
|
||||
* map,
|
||||
* position: { lat: 37.7749, lng: -122.4194 },
|
||||
* title: "San Francisco",
|
||||
* });
|
||||
*
|
||||
* -------------------------------
|
||||
* 🏢 PLACES (from `places` library)
|
||||
* - Does not attach directly to map; use data with your map manually.
|
||||
* const place = new google.maps.places.Place({ id: PLACE_ID });
|
||||
* await place.fetchFields({ fields: ["displayName", "location"] });
|
||||
* map.setCenter(place.location);
|
||||
* new google.maps.marker.AdvancedMarkerElement({ map, position: place.location });
|
||||
*
|
||||
* -------------------------------
|
||||
* 🧭 GEOCODER (from `geocoding` library)
|
||||
* - Standalone service; manually apply results to map.
|
||||
* const geocoder = new google.maps.Geocoder();
|
||||
* geocoder.geocode({ address: "New York" }, (results, status) => {
|
||||
* if (status === "OK" && results[0]) {
|
||||
* map.setCenter(results[0].geometry.location);
|
||||
* new google.maps.marker.AdvancedMarkerElement({
|
||||
* map,
|
||||
* position: results[0].geometry.location,
|
||||
* });
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* -------------------------------
|
||||
* 📐 GEOMETRY (from `geometry` library)
|
||||
* - Pure utility functions; not attached to map.
|
||||
* const dist = google.maps.geometry.spherical.computeDistanceBetween(p1, p2);
|
||||
*
|
||||
* -------------------------------
|
||||
* 🛣️ ROUTES (from `routes` library)
|
||||
* - Combines DirectionsService (standalone) + DirectionsRenderer (map-attached)
|
||||
* const directionsService = new google.maps.DirectionsService();
|
||||
* const directionsRenderer = new google.maps.DirectionsRenderer({ map });
|
||||
* directionsService.route(
|
||||
* { origin, destination, travelMode: "DRIVING" },
|
||||
* (res, status) => status === "OK" && directionsRenderer.setDirections(res)
|
||||
* );
|
||||
*
|
||||
* -------------------------------
|
||||
* 🌦️ MAP LAYERS (attach directly to map)
|
||||
* - new google.maps.TrafficLayer().setMap(map);
|
||||
* - new google.maps.TransitLayer().setMap(map);
|
||||
* - new google.maps.BicyclingLayer().setMap(map);
|
||||
*
|
||||
* -------------------------------
|
||||
* ✅ SUMMARY
|
||||
* - “map-attached” → AdvancedMarkerElement, DirectionsRenderer, Layers.
|
||||
* - “standalone” → Geocoder, DirectionsService, DistanceMatrixService, ElevationService.
|
||||
* - “data-only” → Place, Geometry utilities.
|
||||
*/
|
||||
|
||||
/// <reference types="@types/google.maps" />
|
||||
|
||||
import { useEffect, useRef } from "react";
|
||||
import { usePersistFn } from "@/hooks/usePersistFn";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
google?: typeof google;
|
||||
}
|
||||
}
|
||||
|
||||
const API_KEY = import.meta.env.VITE_FRONTEND_FORGE_API_KEY;
|
||||
const FORGE_BASE_URL =
|
||||
import.meta.env.VITE_FRONTEND_FORGE_API_URL ||
|
||||
"https://forge.butterfly-effect.dev";
|
||||
const MAPS_PROXY_URL = `${FORGE_BASE_URL}/v1/maps/proxy`;
|
||||
|
||||
function loadMapScript() {
|
||||
return new Promise(resolve => {
|
||||
const script = document.createElement("script");
|
||||
script.src = `${MAPS_PROXY_URL}/maps/api/js?key=${API_KEY}&v=weekly&libraries=marker,places,geocoding,geometry`;
|
||||
script.async = true;
|
||||
script.crossOrigin = "anonymous";
|
||||
script.onload = () => {
|
||||
resolve(null);
|
||||
script.remove(); // Clean up immediately
|
||||
};
|
||||
script.onerror = () => {
|
||||
console.error("Failed to load Google Maps script");
|
||||
};
|
||||
document.head.appendChild(script);
|
||||
});
|
||||
}
|
||||
|
||||
interface MapViewProps {
|
||||
className?: string;
|
||||
initialCenter?: google.maps.LatLngLiteral;
|
||||
initialZoom?: number;
|
||||
onMapReady?: (map: google.maps.Map) => void;
|
||||
}
|
||||
|
||||
export function MapView({
|
||||
className,
|
||||
initialCenter = { lat: 37.7749, lng: -122.4194 },
|
||||
initialZoom = 12,
|
||||
onMapReady,
|
||||
}: MapViewProps) {
|
||||
const mapContainer = useRef<HTMLDivElement>(null);
|
||||
const map = useRef<google.maps.Map | null>(null);
|
||||
|
||||
const init = usePersistFn(async () => {
|
||||
await loadMapScript();
|
||||
if (!mapContainer.current) {
|
||||
console.error("Map container not found");
|
||||
return;
|
||||
}
|
||||
map.current = new window.google.maps.Map(mapContainer.current, {
|
||||
zoom: initialZoom,
|
||||
center: initialCenter,
|
||||
mapTypeControl: true,
|
||||
fullscreenControl: true,
|
||||
zoomControl: true,
|
||||
streetViewControl: true,
|
||||
mapId: "DEMO_MAP_ID",
|
||||
});
|
||||
if (onMapReady) {
|
||||
onMapReady(map.current);
|
||||
}
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
init();
|
||||
}, [init]);
|
||||
|
||||
return (
|
||||
<div ref={mapContainer} className={cn("w-full h-[500px]", className)} />
|
||||
);
|
||||
}
|
||||
@@ -1,216 +0,0 @@
|
||||
import { AlertTriangle, CheckCircle2, GitBranch, Layers3 } from "lucide-react";
|
||||
import type React from "react";
|
||||
import type { AiTraceSummary, PipelineTraceSummary } from "../services/designAgentApi";
|
||||
|
||||
interface PipelineTracePanelProps {
|
||||
trace: PipelineTraceSummary | null | undefined;
|
||||
aiTrace?: AiTraceSummary | null;
|
||||
}
|
||||
|
||||
const stateClass: Record<string, string> = {
|
||||
rendered: "bg-emerald-50 text-emerald-700 border-emerald-200",
|
||||
render_blocked: "bg-red-50 text-red-700 border-red-200",
|
||||
filtered: "bg-amber-50 text-amber-700 border-amber-200",
|
||||
covered_not_rendered: "bg-orange-50 text-orange-700 border-orange-200",
|
||||
uncovered: "bg-slate-50 text-slate-500 border-slate-200",
|
||||
};
|
||||
|
||||
function Chip({ children, tone = "slate" }: { children: React.ReactNode; tone?: "slate" | "red" | "green" | "amber" }) {
|
||||
const tones = {
|
||||
slate: "bg-slate-100 text-slate-600",
|
||||
red: "bg-red-100 text-red-700",
|
||||
green: "bg-emerald-100 text-emerald-700",
|
||||
amber: "bg-amber-100 text-amber-700",
|
||||
};
|
||||
return (
|
||||
<span className={`inline-flex items-center rounded px-1.5 py-0.5 text-[9px] font-black uppercase ${tones[tone]}`}>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export default function PipelineTracePanel({ trace, aiTrace }: PipelineTracePanelProps) {
|
||||
if (!trace) {
|
||||
return (
|
||||
<div className="h-full flex items-center justify-center bg-slate-50 p-8 text-center text-slate-400">
|
||||
<div>
|
||||
<GitBranch className="mx-auto mb-3 h-10 w-10 opacity-20" />
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.18em]">No Trace Loaded</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full overflow-y-auto bg-white p-4 text-slate-700">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<GitBranch className="h-4 w-4 text-blue-500" />
|
||||
<h3 className="text-[10px] font-black uppercase tracking-widest text-slate-500">Pipeline Trace</h3>
|
||||
</div>
|
||||
<Chip tone={trace.warnings.length > 0 ? "amber" : "green"}>{trace.status}</Chip>
|
||||
</div>
|
||||
|
||||
{trace.warnings.length > 0 && (
|
||||
<div className="mb-4 rounded border border-amber-200 bg-amber-50 p-3">
|
||||
<div className="mb-1 flex items-center gap-1.5 text-[10px] font-black uppercase text-amber-700">
|
||||
<AlertTriangle className="h-3.5 w-3.5" />
|
||||
Warnings
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{trace.warnings.map((warning) => (
|
||||
<Chip key={warning} tone="amber">{warning}</Chip>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<section className="mb-5">
|
||||
<div className="mb-2 flex items-center gap-1.5 text-[10px] font-black uppercase tracking-widest text-slate-400">
|
||||
<Layers3 className="h-3.5 w-3.5" />
|
||||
Sections
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{trace.sections.map((section) => (
|
||||
<div key={section.id} className={`rounded border p-2 ${stateClass[section.state] ?? stateClass.uncovered}`}>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="font-mono text-[11px] font-bold">{section.id}</span>
|
||||
<span className="text-[9px] font-black uppercase">{section.state}</span>
|
||||
</div>
|
||||
{section.title && <div className="mt-1 text-[11px] leading-snug">{section.title}</div>}
|
||||
{section.child_ids.length > 0 && (
|
||||
<div className="mt-1 text-[10px] text-slate-500">children: {section.child_ids.join(", ")}</div>
|
||||
)}
|
||||
{section.reasons.length > 0 && (
|
||||
<div className="mt-2 flex flex-wrap gap-1">
|
||||
{section.reasons.map((reason) => (
|
||||
<Chip key={reason} tone={section.state === "render_blocked" ? "red" : "amber"}>
|
||||
{reason}
|
||||
</Chip>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mb-5">
|
||||
<div className="mb-2 text-[10px] font-black uppercase tracking-widest text-slate-400">Units</div>
|
||||
<div className="space-y-2">
|
||||
{trace.units.map((unit) => (
|
||||
<div key={unit.unit_id} className="rounded border border-slate-200 bg-slate-50 p-2">
|
||||
<div className="font-mono text-[11px] font-bold text-slate-700">{unit.unit_id || "(empty unit)"}</div>
|
||||
<div className="mt-1 grid grid-cols-2 gap-x-2 gap-y-1 text-[10px]">
|
||||
<span>frame</span><span className="font-mono">{unit.selected_frame ?? "-"}</span>
|
||||
<span>candidates</span><span className="font-mono">{unit.candidate_count}</span>
|
||||
<span>path</span><span className="font-mono">{unit.selection_path ?? "-"}</span>
|
||||
<span>label</span><span className="font-mono">{unit.label ?? "-"}</span>
|
||||
</div>
|
||||
{unit.warnings.length > 0 && (
|
||||
<div className="mt-2 flex flex-wrap gap-1">
|
||||
{unit.warnings.map((warning) => <Chip key={warning} tone="amber">{warning}</Chip>)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div className="mb-2 text-[10px] font-black uppercase tracking-widest text-slate-400">Zones / Render</div>
|
||||
<div className="space-y-2">
|
||||
{trace.zones.map((zone) => {
|
||||
const filled = zone.slot_status === "filled";
|
||||
return (
|
||||
<div key={zone.position} className="rounded border border-slate-200 bg-white p-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-mono text-[11px] font-bold">{zone.position}</span>
|
||||
<Chip tone={filled ? "green" : "red"}>{zone.slot_status}</Chip>
|
||||
</div>
|
||||
<div className="mt-1 text-[10px] text-slate-500">sections: {zone.source_section_ids.join(", ") || "-"}</div>
|
||||
<div className="mt-1 text-[10px] text-slate-500">template: <span className="font-mono">{zone.template_id ?? "-"}</span></div>
|
||||
<div className="mt-1 text-[10px] text-slate-500">slot keys: {zone.slot_key_count}</div>
|
||||
{zone.warnings.length > 0 ? (
|
||||
<div className="mt-2 flex flex-wrap gap-1">
|
||||
{zone.warnings.map((warning) => <Chip key={warning} tone="red">{warning}</Chip>)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-2 flex items-center gap-1 text-[10px] text-emerald-600">
|
||||
<CheckCircle2 className="h-3 w-3" />
|
||||
render payload ready
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mt-5">
|
||||
<div className="mb-2 text-[10px] font-black uppercase tracking-widest text-slate-400">AI Status</div>
|
||||
{!aiTrace ? (
|
||||
<div className="rounded border border-slate-200 bg-slate-50 p-3 text-[11px] text-slate-500">
|
||||
AI trace not loaded.
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded border border-slate-200 bg-white p-3">
|
||||
<div className="mb-2 flex flex-wrap gap-1">
|
||||
<Chip tone={aiTrace.artifact_present ? "green" : "red"}>
|
||||
{aiTrace.artifact_present ? "artifact" : "missing"}
|
||||
</Chip>
|
||||
<Chip tone={aiTrace.ai_enabled === false ? "amber" : aiTrace.ai_enabled ? "green" : "slate"}>
|
||||
enabled {aiTrace.ai_enabled === null ? "unknown" : String(aiTrace.ai_enabled)}
|
||||
</Chip>
|
||||
<Chip tone={aiTrace.ai_called_count > 0 ? "green" : "slate"}>
|
||||
called {aiTrace.ai_called_count}
|
||||
</Chip>
|
||||
<Chip tone={aiTrace.eligible_count > 0 ? "amber" : "slate"}>
|
||||
eligible {aiTrace.eligible_count}
|
||||
</Chip>
|
||||
<Chip tone={aiTrace.error_count > 0 ? "red" : "slate"}>
|
||||
errors {aiTrace.error_count}
|
||||
</Chip>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-x-2 gap-y-1 text-[10px] text-slate-500">
|
||||
<span>status</span><span className="font-mono">{aiTrace.status}</span>
|
||||
<span>coverage</span><span className="font-mono">{aiTrace.coverage_status ?? "-"}</span>
|
||||
<span>provider</span><span className="font-mono">{aiTrace.provider ?? "-"}</span>
|
||||
<span>human review</span><span className="font-mono">{String(aiTrace.human_review_required)}</span>
|
||||
</div>
|
||||
{Object.keys(aiTrace.skip_reasons).length > 0 && (
|
||||
<div className="mt-3">
|
||||
<div className="mb-1 text-[10px] font-black uppercase text-slate-400">Skip Reasons</div>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{Object.entries(aiTrace.skip_reasons).map(([reason, count]) => (
|
||||
<Chip key={reason} tone={reason === "called" ? "green" : "slate"}>
|
||||
{reason}: {count}
|
||||
</Chip>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{aiTrace.units.length > 0 && (
|
||||
<div className="mt-3 space-y-2">
|
||||
{aiTrace.units.map((unit) => (
|
||||
<div key={`${unit.unit_index}-${unit.source_section_ids.join("+")}`} className="rounded bg-slate-50 p-2 text-[10px]">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-mono font-bold">{unit.source_section_ids.join("+") || `unit-${unit.unit_index}`}</span>
|
||||
<Chip tone={unit.ai_called ? "green" : "slate"}>{unit.ai_called ? "called" : "not called"}</Chip>
|
||||
</div>
|
||||
<div className="mt-1 grid grid-cols-2 gap-x-2 gap-y-1 text-slate-500">
|
||||
<span>route</span><span className="font-mono">{unit.route_hint ?? "-"}</span>
|
||||
<span>skip</span><span className="font-mono">{unit.skip_reason ?? "-"}</span>
|
||||
<span>apply</span><span className="font-mono">{unit.apply_status ?? "-"}</span>
|
||||
<span>error</span><span className="font-mono">{unit.error ?? "-"}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,165 +0,0 @@
|
||||
/**
|
||||
* IMP-90 (#90) u14 — Structure edit overlay.
|
||||
*
|
||||
* React component + pure helpers that present a per-zone slot list with
|
||||
* reorder (↑ / ↓) and hide (👁 / 🚫) affordances. Mounted by SlideCanvas
|
||||
* when `editMode === "structure"`. Emits a `StructureOverridePerZone`
|
||||
* tuple `{slot_order, hidden_slots}` through `onChange`; u15 will debounce
|
||||
* + PUT this to `/api/user-overrides` (NOT u14 scope), and u16 reads the
|
||||
* persisted axis at the next CLI generate run.
|
||||
*
|
||||
* SCOPE LOCK (binding contract):
|
||||
* - inner shape = `{slot_order, hidden_slots}` ONLY.
|
||||
* - frame swap stays on the existing `frames` axis (u6 backend resolver
|
||||
* rejects frame-swap-shaped inner keys).
|
||||
* - per-slot text content NEVER mutated here — `text_overrides` axis
|
||||
* (u4/u5/u13) handles that exclusively.
|
||||
*
|
||||
* The exported pure helpers (`resolveEffectiveSlotOrder`, `moveItem`) are
|
||||
* the unit's vitest surface; React rendering is NOT tested because the
|
||||
* Front package devDependencies do not include jsdom / @testing-library
|
||||
* (verified by u11/u12/u13 test pattern).
|
||||
*/
|
||||
import type {
|
||||
StructureOverridePerZone,
|
||||
} from "../services/userOverridesApi";
|
||||
|
||||
export interface StructureEditOverlayProps {
|
||||
zoneId: string;
|
||||
/** Discovered slot keys for this zone (e.g. from iframe DOM
|
||||
* `data-text-path` prefixes). Order = backend default. */
|
||||
slotKeys: ReadonlyArray<string>;
|
||||
/** Current persisted override (or undefined). `slot_order` reorders the
|
||||
* discovered keys; missing keys keep backend order at the tail. */
|
||||
current?: StructureOverridePerZone;
|
||||
/** Emitted on every user mutation. u15 wires this to autosave. */
|
||||
onChange?: (zoneId: string, next: StructureOverridePerZone) => void;
|
||||
}
|
||||
|
||||
/** Apply `slot_order` override to the discovered slot list. Unknown
|
||||
* override entries are dropped; missing discovered keys are appended in
|
||||
* backend order so the user never loses a slot by partial-override. */
|
||||
export function resolveEffectiveSlotOrder(
|
||||
slotKeys: ReadonlyArray<string>,
|
||||
slotOrder?: ReadonlyArray<string> | null,
|
||||
): string[] {
|
||||
if (!slotOrder || slotOrder.length === 0) return [...slotKeys];
|
||||
const allowed = new Set(slotKeys);
|
||||
const seen = new Set<string>();
|
||||
const ordered: string[] = [];
|
||||
for (const k of slotOrder) {
|
||||
if (typeof k === "string" && allowed.has(k) && !seen.has(k)) {
|
||||
ordered.push(k);
|
||||
seen.add(k);
|
||||
}
|
||||
}
|
||||
for (const k of slotKeys) {
|
||||
if (!seen.has(k)) ordered.push(k);
|
||||
}
|
||||
return ordered;
|
||||
}
|
||||
|
||||
/** Move `arr[index]` by `delta` positions. Out-of-range returns a fresh
|
||||
* copy of the input (defensive: caller can always treat the result as a
|
||||
* new reference). */
|
||||
export function moveItem<T>(
|
||||
arr: ReadonlyArray<T>,
|
||||
index: number,
|
||||
delta: number,
|
||||
): T[] {
|
||||
const next = arr.slice();
|
||||
const target = index + delta;
|
||||
if (
|
||||
index < 0 ||
|
||||
index >= next.length ||
|
||||
target < 0 ||
|
||||
target >= next.length
|
||||
) {
|
||||
return next;
|
||||
}
|
||||
const tmp = next[index];
|
||||
next[index] = next[target];
|
||||
next[target] = tmp;
|
||||
return next;
|
||||
}
|
||||
|
||||
export default function StructureEditOverlay({
|
||||
zoneId,
|
||||
slotKeys,
|
||||
current,
|
||||
onChange,
|
||||
}: StructureEditOverlayProps) {
|
||||
const effective = resolveEffectiveSlotOrder(slotKeys, current?.slot_order);
|
||||
const hidden = new Set(current?.hidden_slots ?? []);
|
||||
const emit = (nextOrder: string[], nextHidden: Set<string>) => {
|
||||
onChange?.(zoneId, {
|
||||
slot_order: nextOrder,
|
||||
hidden_slots: Array.from(nextHidden),
|
||||
});
|
||||
};
|
||||
return (
|
||||
<div
|
||||
data-testid={`structure-overlay-${zoneId}`}
|
||||
className="bg-white/95 border border-emerald-300 rounded shadow p-2 flex flex-col gap-1 text-[10px]"
|
||||
style={{ pointerEvents: "auto" }}
|
||||
>
|
||||
<div className="font-bold uppercase tracking-wider text-emerald-700 mb-1">
|
||||
▦ {zoneId}
|
||||
</div>
|
||||
{effective.length === 0 ? (
|
||||
<div className="text-slate-400 italic">slot 없음</div>
|
||||
) : (
|
||||
effective.map((key, i) => (
|
||||
<div
|
||||
key={key}
|
||||
data-testid={`slot-${zoneId}-${key}`}
|
||||
className="flex items-center gap-1"
|
||||
>
|
||||
<span
|
||||
className={`flex-1 truncate ${
|
||||
hidden.has(key) ? "text-slate-400 line-through" : "text-slate-700"
|
||||
}`}
|
||||
>
|
||||
{key}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
data-testid={`slot-up-${zoneId}-${key}`}
|
||||
disabled={i === 0}
|
||||
onClick={() => emit(moveItem(effective, i, -1), hidden)}
|
||||
className="px-1 rounded border border-slate-200 disabled:opacity-30 hover:bg-slate-100"
|
||||
title="위로"
|
||||
>
|
||||
↑
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
data-testid={`slot-down-${zoneId}-${key}`}
|
||||
disabled={i === effective.length - 1}
|
||||
onClick={() => emit(moveItem(effective, i, 1), hidden)}
|
||||
className="px-1 rounded border border-slate-200 disabled:opacity-30 hover:bg-slate-100"
|
||||
title="아래로"
|
||||
>
|
||||
↓
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
data-testid={`slot-hide-${zoneId}-${key}`}
|
||||
aria-pressed={hidden.has(key)}
|
||||
onClick={() => {
|
||||
const nh = new Set(hidden);
|
||||
if (nh.has(key)) nh.delete(key);
|
||||
else nh.add(key);
|
||||
emit(effective, nh);
|
||||
}}
|
||||
className="px-1 rounded border border-slate-200 hover:bg-slate-100"
|
||||
title={hidden.has(key) ? "표시" : "숨김"}
|
||||
>
|
||||
{hidden.has(key) ? "🚫" : "👁"}
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,104 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
/**
|
||||
* Step 22를 위한 16:9 베이스 슬라이드 본문 레이아웃 템플릿
|
||||
* 8종 중 우선 2종 샘플 구현
|
||||
*/
|
||||
|
||||
interface LayoutProps {
|
||||
title?: string;
|
||||
sections?: {
|
||||
id: string;
|
||||
title: string;
|
||||
content: string;
|
||||
type?: 'text' | 'image' | 'chart';
|
||||
}[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Layout 1: Focus Split (좌측 텍스트 / 우측 강조형)
|
||||
* 가장 범용적인 슬라이드 레이아웃
|
||||
*/
|
||||
export const FocusSplitLayout: React.FC<LayoutProps> = ({ sections = [] }) => {
|
||||
const mainSection = sections[0] || { title: 'Main Point', content: '핵심 내용을 이곳에 작성합니다.' };
|
||||
const subSection = sections[1] || { title: 'Supporting Detail', content: '보조 설명이나 이미지가 들어갑니다.' };
|
||||
|
||||
return (
|
||||
<div className="w-full h-full flex gap-8 p-6 bg-white animate-in fade-in duration-500">
|
||||
{/* 좌측 메인 영역 (60%) */}
|
||||
<div className="flex-[3] flex flex-col justify-center space-y-6">
|
||||
<div className="space-y-2">
|
||||
<div className="w-12 h-1 bg-blue-600 rounded-full" />
|
||||
<h2 className="text-4xl font-black text-slate-900 leading-tight">
|
||||
{mainSection.title}
|
||||
</h2>
|
||||
</div>
|
||||
<p className="text-xl text-slate-600 leading-relaxed font-medium">
|
||||
{mainSection.content}
|
||||
</p>
|
||||
<div className="flex gap-4 pt-4">
|
||||
<div className="px-4 py-2 bg-slate-50 border border-slate-100 rounded-xl text-sm font-bold text-slate-400 uppercase tracking-widest">
|
||||
Key Insight
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 우측 강조 영역 (40%) */}
|
||||
<div className="flex-[2] relative">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-[2rem] border-2 border-white shadow-inner flex flex-col items-center justify-center p-8 text-center overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-blue-500/5 rounded-full -mr-16 -mt-16" />
|
||||
<div className="w-16 h-16 bg-white rounded-2xl shadow-lg flex items-center justify-center mb-6">
|
||||
<div className="w-8 h-8 bg-blue-600 rounded-lg animate-pulse" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold text-slate-800 mb-3">{subSection.title}</h3>
|
||||
<p className="text-sm text-slate-500 font-medium leading-normal">
|
||||
{subSection.content}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Layout 2: Quadrant Grid (2x2 그리드 핵심 요약형)
|
||||
* 여러 요소를 병렬로 보여줄 때 최적
|
||||
*/
|
||||
export const QuadrantGridLayout: React.FC<LayoutProps> = ({ sections = [] }) => {
|
||||
const items = sections.length >= 4 ? sections.slice(0, 4) : [
|
||||
{ title: 'Strategy', content: '장기적 목표 및 실행 계획 수립' },
|
||||
{ title: 'Operations', content: '효율적인 자원 배분 및 프로세스 최적화' },
|
||||
{ title: 'Technology', content: '디지털 전환을 위한 기술 스택 도입' },
|
||||
{ title: 'Growth', content: '지속 가능한 성장 동력 확보' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="w-full h-full grid grid-cols-2 grid-rows-2 gap-6 p-6 bg-white animate-in zoom-in-95 duration-500">
|
||||
{items.map((item, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="group p-6 rounded-[1.5rem] border-2 border-slate-50 bg-slate-50/30 hover:bg-white hover:border-blue-100 hover:shadow-xl hover:shadow-blue-500/5 transition-all duration-300 flex flex-col justify-between"
|
||||
>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="flex items-center justify-center w-8 h-8 rounded-full bg-slate-900 text-white text-xs font-black">
|
||||
0{i + 1}
|
||||
</span>
|
||||
<h3 className="text-xl font-black text-slate-800 group-hover:text-blue-600 transition-colors">
|
||||
{item.title}
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-sm text-slate-500 leading-relaxed font-medium pl-11">
|
||||
{item.content}
|
||||
</p>
|
||||
</div>
|
||||
<div className="pl-11 pt-4">
|
||||
<div className="w-full h-1 bg-slate-100 rounded-full overflow-hidden">
|
||||
<div className="w-1/3 h-full bg-blue-500 rounded-full group-hover:w-full transition-all duration-700" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,225 +0,0 @@
|
||||
// IMP-54 u4 — vitest coverage for the pure drag-math helpers extracted in u3
|
||||
// (`Front/client/src/components/slideCanvasDragMath.ts`).
|
||||
//
|
||||
// Stage 2 contract (`Stage 2 Exit Report → implementation_units → u4`):
|
||||
// • Threshold pass/fail at 5 px (strict `Math.hypot > 5`).
|
||||
// • Clamp negative delta to 0 on both axes.
|
||||
// • Clamp max-edge delta to `1 - startGeom.w` (x) and `1 - startGeom.h` (y).
|
||||
//
|
||||
// The helpers are pure (no React, no DOM) so we drive them directly with
|
||||
// numeric inputs — no fake timers, no fetch stubs, no component mount.
|
||||
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
import {
|
||||
DRAG_THRESHOLD_PX,
|
||||
IMAGE_RESIZE_MIN_SIZE_PERCENT,
|
||||
clampImagePercentGeometry,
|
||||
clampZoneMove,
|
||||
crossedDragThreshold,
|
||||
type ImagePercentGeom,
|
||||
type ZoneFracGeom,
|
||||
} from "./slideCanvasDragMath";
|
||||
|
||||
describe("DRAG_THRESHOLD_PX", () => {
|
||||
it("is 5", () => {
|
||||
expect(DRAG_THRESHOLD_PX).toBe(5);
|
||||
});
|
||||
});
|
||||
|
||||
describe("crossedDragThreshold", () => {
|
||||
it("returns false for zero movement (still a click)", () => {
|
||||
expect(crossedDragThreshold(0, 0)).toBe(false);
|
||||
});
|
||||
|
||||
it("returns false just below threshold — 3,4 → hypot 5 with strict >", () => {
|
||||
expect(crossedDragThreshold(3, 4)).toBe(false);
|
||||
});
|
||||
|
||||
it("returns false at exactly the threshold along each axis", () => {
|
||||
// strict inequality: Math.hypot(5, 0) === 5, not > 5
|
||||
expect(crossedDragThreshold(5, 0)).toBe(false);
|
||||
expect(crossedDragThreshold(0, 5)).toBe(false);
|
||||
});
|
||||
|
||||
it("returns true once distance exceeds threshold", () => {
|
||||
expect(crossedDragThreshold(4, 4)).toBe(true); // hypot ≈ 5.6568
|
||||
expect(crossedDragThreshold(6, 0)).toBe(true);
|
||||
expect(crossedDragThreshold(0, 6)).toBe(true);
|
||||
});
|
||||
|
||||
it("treats negative deltas symmetrically (Euclidean distance)", () => {
|
||||
expect(crossedDragThreshold(-3, -4)).toBe(false);
|
||||
expect(crossedDragThreshold(-4, -4)).toBe(true);
|
||||
expect(crossedDragThreshold(-6, 0)).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe("clampZoneMove", () => {
|
||||
// 1000 × 1000 slide body so 1 px == 0.001 frac — keeps the arithmetic
|
||||
// exact and the boundary deltas (1000 px) round-trip back to `1 - w/h`.
|
||||
const W = 1000;
|
||||
const H = 1000;
|
||||
const baseGeom: ZoneFracGeom = { x: 0.1, y: 0.2, w: 0.3, h: 0.4 };
|
||||
|
||||
it("applies in-bounds delta as startGeom + (dPx / slideBodySize)", () => {
|
||||
expect(clampZoneMove(baseGeom, 100, 50, W, H)).toEqual({
|
||||
x: 0.2,
|
||||
y: 0.25,
|
||||
});
|
||||
});
|
||||
|
||||
it("clamps negative delta to 0 on both axes", () => {
|
||||
expect(clampZoneMove(baseGeom, -1000, -1000, W, H)).toEqual({
|
||||
x: 0,
|
||||
y: 0,
|
||||
});
|
||||
});
|
||||
|
||||
it("clamps max-edge delta to (1 - w) on x and (1 - h) on y", () => {
|
||||
expect(clampZoneMove(baseGeom, 1000, 1000, W, H)).toEqual({
|
||||
x: 1 - baseGeom.w, // 0.7
|
||||
y: 1 - baseGeom.h, // 0.6
|
||||
});
|
||||
});
|
||||
|
||||
it("clamps the two axes independently (negative x, in-bounds y)", () => {
|
||||
expect(clampZoneMove(baseGeom, -1000, 50, W, H)).toEqual({
|
||||
x: 0,
|
||||
y: 0.25,
|
||||
});
|
||||
});
|
||||
|
||||
it("honours non-square slide bodies via per-axis division", () => {
|
||||
// dxPx 100 / 500 = 0.2 fr; dyPx 100 / 250 = 0.4 fr (hits the y boundary).
|
||||
// x is checked with toBeCloseTo because 0.1 + 0.2 is the canonical IEEE-754
|
||||
// floating-point trap (0.30000000000000004) — the clamp logic is correct,
|
||||
// it just inherits JS number precision. y stays exact since it clamps to
|
||||
// the boundary `1 - h`.
|
||||
const result = clampZoneMove(baseGeom, 100, 100, 500, 250);
|
||||
expect(result.x).toBeCloseTo(0.3, 10);
|
||||
expect(result.y).toBe(1 - baseGeom.h); // 0.6
|
||||
});
|
||||
|
||||
it("returns only { x, y } — width / height are preserved by the caller", () => {
|
||||
const out = clampZoneMove(baseGeom, 0, 0, W, H);
|
||||
expect(out).toEqual({ x: 0.1, y: 0.2 });
|
||||
expect("w" in out).toBe(false);
|
||||
expect("h" in out).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
// IMP-51 (#79) u9 — image overlay resize / move math.
|
||||
// Boundary contract (must match the inline u8 math Codex #16 verified):
|
||||
// • slide-bound invariant — x+w ≤ 100 ∧ y+h ≤ 100 for ALL valid inputs,
|
||||
// including small-near-edge geoms where the existing minSize floor
|
||||
// would otherwise have pushed past the slide bound.
|
||||
// • aspect-locked corner — baseAspect = startGeom.w / startGeom.h is
|
||||
// preserved exactly; the wFloor uses `min(minSize, maxW, maxH*baseAspect)`
|
||||
// so a floor application never violates either axis.
|
||||
// The two concrete Codex #15 reproductions are encoded explicitly below
|
||||
// so a future regression on the boundary math fails this suite directly.
|
||||
describe("IMAGE_RESIZE_MIN_SIZE_PERCENT", () => {
|
||||
it("is 2 (percent of slide bbox)", () => {
|
||||
expect(IMAGE_RESIZE_MIN_SIZE_PERCENT).toBe(2);
|
||||
});
|
||||
});
|
||||
|
||||
describe("clampImagePercentGeometry", () => {
|
||||
const baseGeom: ImagePercentGeom = { x: 10, y: 10, w: 20, h: 10 };
|
||||
|
||||
describe("direction = 'move'", () => {
|
||||
it("translates and clamps both axes; preserves w/h", () => {
|
||||
expect(
|
||||
clampImagePercentGeometry(baseGeom, 5, 7, "move", false),
|
||||
).toEqual({ x: 15, y: 17, w: 20, h: 10 });
|
||||
});
|
||||
|
||||
it("clamps negative deltas to (0, 0)", () => {
|
||||
expect(
|
||||
clampImagePercentGeometry(baseGeom, -1000, -1000, "move", false),
|
||||
).toEqual({ x: 0, y: 0, w: 20, h: 10 });
|
||||
});
|
||||
|
||||
it("clamps max-edge deltas to (100 - w, 100 - h)", () => {
|
||||
expect(
|
||||
clampImagePercentGeometry(baseGeom, 1000, 1000, "move", false),
|
||||
).toEqual({ x: 80, y: 90, w: 20, h: 10 });
|
||||
});
|
||||
});
|
||||
|
||||
describe("edge resize — independent per-axis clamp", () => {
|
||||
it("right edge clamps width to 100 - startGeom.x", () => {
|
||||
const out = clampImagePercentGeometry(baseGeom, 1000, 0, "right", false);
|
||||
expect(out).toEqual({ x: 10, y: 10, w: 90, h: 10 });
|
||||
expect(out.x + out.w).toBeLessThanOrEqual(100);
|
||||
});
|
||||
|
||||
it("left drag dx=-100 emits {x:0,y:10,w:30,h:10} (Codex regression)", () => {
|
||||
// From Codex #15 / #16 verification — ordinary left drag past the
|
||||
// slide edge should pin x at 0 and grow w by the original x amount.
|
||||
expect(
|
||||
clampImagePercentGeometry(baseGeom, -100, 0, "left", false),
|
||||
).toEqual({ x: 0, y: 10, w: 30, h: 10 });
|
||||
});
|
||||
|
||||
it("near-edge right resize keeps x + w ≤ 100 (Codex #15 reproduction)", () => {
|
||||
// Pre-fix: minSize=2 floor applied AFTER span clamp would emit
|
||||
// {x:99, w:2} so x+w=101. Post-fix: floor caps at maxW=1.
|
||||
const start: ImagePercentGeom = { x: 99, y: 10, w: 0.5, h: 10 };
|
||||
const out = clampImagePercentGeometry(start, 1, 0, "right", false);
|
||||
expect(out).toEqual({ x: 99, y: 10, w: 1, h: 10 });
|
||||
expect(out.x + out.w).toBe(100);
|
||||
});
|
||||
|
||||
it("top/bottom edges are symmetric to left/right", () => {
|
||||
const bottom = clampImagePercentGeometry(baseGeom, 0, 1000, "bottom", false);
|
||||
expect(bottom).toEqual({ x: 10, y: 10, w: 20, h: 90 });
|
||||
const top = clampImagePercentGeometry(baseGeom, 0, -100, "top", false);
|
||||
expect(top).toEqual({ x: 10, y: 0, w: 20, h: 20 });
|
||||
});
|
||||
});
|
||||
|
||||
describe("corner resize — aspect locked (default Shift-off)", () => {
|
||||
it("NW drag dx=-100,dy=-100 emits {x:0,y:5,w:30,h:15} (Codex regression)", () => {
|
||||
// From Codex #16 verification — aspect-locked NW past the slide
|
||||
// edge: rightEdge=30, bottomEdge=20, baseAspect=2. Independent
|
||||
// clamps give x=0,w=30,y=0,h=20. Aspect block then picks the
|
||||
// limiting axis: newH = 30/2 = 15 (≤20). Re-anchor: y = 20 - 15 = 5.
|
||||
expect(
|
||||
clampImagePercentGeometry(baseGeom, -100, -100, "nw", true),
|
||||
).toEqual({ x: 0, y: 5, w: 30, h: 15 });
|
||||
});
|
||||
|
||||
it("tiny near-corner NE resize stays within bounds (Codex #15 reproduction)", () => {
|
||||
// Pre-fix: dual-axis minSize floor would emit w=2, h=2 with
|
||||
// re-anchor pushing x+w past 100. Post-fix: wFloor caps at
|
||||
// min(2, maxW=1, maxH*baseAspect=1) = 1, so newW=1, newH=1.
|
||||
const start: ImagePercentGeom = { x: 99, y: 99, w: 0.5, h: 0.5 };
|
||||
const out = clampImagePercentGeometry(start, 1, -1, "ne", true);
|
||||
expect(out).toEqual({ x: 99, y: 98.5, w: 1, h: 1 });
|
||||
expect(out.x + out.w).toBeLessThanOrEqual(100);
|
||||
expect(out.y + out.h).toBeLessThanOrEqual(100);
|
||||
});
|
||||
|
||||
it("preserves baseAspect exactly when the floor is hit", () => {
|
||||
// 2:1 aspect ratio (w=20, h=10); large negative drag past edges
|
||||
// hits wFloor. newW/newH ratio must equal baseAspect.
|
||||
const out = clampImagePercentGeometry(
|
||||
baseGeom, -1000, -1000, "nw", true,
|
||||
);
|
||||
expect(out.w / out.h).toBeCloseTo(baseGeom.w / baseGeom.h, 10);
|
||||
});
|
||||
});
|
||||
|
||||
describe("corner resize — Shift unlock (independent edges)", () => {
|
||||
it("SE without aspect lock degenerates to right + bottom edges", () => {
|
||||
const corner = clampImagePercentGeometry(baseGeom, 1000, 1000, "se", false);
|
||||
const sides = clampImagePercentGeometry(
|
||||
clampImagePercentGeometry(baseGeom, 1000, 0, "right", false),
|
||||
0, 1000, "bottom", false,
|
||||
);
|
||||
expect(corner).toEqual(sides);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,201 +0,0 @@
|
||||
// IMP-54 u3 — pure drag math extracted from SlideCanvas.tsx
|
||||
// `handleZoneMouseDown` (`Front/client/src/components/SlideCanvas.tsx:537-598`).
|
||||
//
|
||||
// Resize math (`makeResizeHandler` at SlideCanvas.tsx:465-523) is intentionally
|
||||
// NOT touched — it has its own independent geometry model (per-side
|
||||
// `affectsLeft/Right/Top/Bottom`, `minSize`, `1 - startGeom.x/y` cap) that
|
||||
// must not regress.
|
||||
//
|
||||
// Two responsibilities live here:
|
||||
//
|
||||
// 1. Drag-vs-click classification — a pointer must travel more than
|
||||
// `DRAG_THRESHOLD_PX` (Euclidean distance from the mousedown origin)
|
||||
// before mousedown→mousemove is treated as a drag. Below the
|
||||
// threshold the gesture stays a click, which the caller surfaces as
|
||||
// `onZoneClick(zone.id)` in `onUp`.
|
||||
//
|
||||
// 2. Pixel-delta → slide-body fraction conversion plus clamp to keep the
|
||||
// moved zone fully inside the slide body. Width/height are preserved
|
||||
// verbatim by this helper — only `x` and `y` move.
|
||||
//
|
||||
// Both helpers are pure (no React, no DOM, no side effects) so vitest can
|
||||
// drive them directly. The numeric contract is the inline behavior that
|
||||
// existed before the extraction; this file is a relocation, not a behavior
|
||||
// change.
|
||||
|
||||
export const DRAG_THRESHOLD_PX = 5;
|
||||
|
||||
// IMP-51 (#79) u9 — image overlay resize / move math extracted from
|
||||
// SlideCanvas.tsx `beginDrag` onMove (lines 1092–1219 of the u8 patch).
|
||||
// Slide-absolute percent coordinate space (0–100 on both axes), matching
|
||||
// the persisted `image_overrides` axis (`src/user_overrides_io.py` u1
|
||||
// KNOWN_AXES) and the typed client `ImageOverride` shape (`userOverridesApi.ts`
|
||||
// u3). The math is the contract Codex #16 verified post-u8 — this file
|
||||
// is a relocation, not a behavior change. SlideCanvas calls it from a
|
||||
// single hook so future tweaks need to update one place + the vitest
|
||||
// suite alongside.
|
||||
export const IMAGE_RESIZE_MIN_SIZE_PERCENT = 2;
|
||||
|
||||
/** Image overlay geometry in slide-absolute percent (each component ∈ [0, 100]).
|
||||
* Mirrors `ImageOverride` from `services/userOverridesApi.ts` (u3) so this
|
||||
* shape moves end-to-end through stamper → overlay → persisted axis. */
|
||||
export interface ImagePercentGeom {
|
||||
x: number;
|
||||
y: number;
|
||||
w: number;
|
||||
h: number;
|
||||
}
|
||||
|
||||
export type ImageDragDirection =
|
||||
| "move"
|
||||
| "left"
|
||||
| "right"
|
||||
| "top"
|
||||
| "bottom"
|
||||
| "nw"
|
||||
| "ne"
|
||||
| "sw"
|
||||
| "se";
|
||||
|
||||
/** Apply a percent-space drag delta to `startGeom` per `direction` and clamp.
|
||||
*
|
||||
* Contract (must match the inline u8 math Codex #16 verified):
|
||||
* • `direction === "move"` → translate only; w/h preserved verbatim;
|
||||
* x/y clamped to `[0, 100 - w]` and `[0, 100 - h]`.
|
||||
* • Edge handle (`left|right|top|bottom`) → one axis only; opposite
|
||||
* edge pinned so x+w ≤ 100 and y+h ≤ 100 hold.
|
||||
* • Corner handle (`nw|ne|sw|se`) with `aspectLocked=false` → two
|
||||
* independent edges (same per-edge clamp as above).
|
||||
* • Corner handle with `aspectLocked=true` → preserves
|
||||
* `baseAspect = startGeom.w / startGeom.h`; the pinned-opposite-corner
|
||||
* stays fixed; the floored axis is `w` and `h` is re-derived so the
|
||||
* aspect ratio is exact even at the minSize floor.
|
||||
*
|
||||
* `minSize` is best-effort: when the available span (e.g. `100 - startGeom.x`
|
||||
* for `affectsRight`) is below `minSize`, the floor caps at the span itself
|
||||
* so the slide-bound invariant (x+w ≤ 100 ∧ y+h ≤ 100) is never violated.
|
||||
* Pure / deterministic / no DOM access — vitest drives it directly. */
|
||||
export function clampImagePercentGeometry(
|
||||
startGeom: ImagePercentGeom,
|
||||
dxPercent: number,
|
||||
dyPercent: number,
|
||||
direction: ImageDragDirection,
|
||||
aspectLocked: boolean,
|
||||
minSize: number = IMAGE_RESIZE_MIN_SIZE_PERCENT,
|
||||
): ImagePercentGeom {
|
||||
if (direction === "move") {
|
||||
const x = Math.max(0, Math.min(100 - startGeom.w, startGeom.x + dxPercent));
|
||||
const y = Math.max(0, Math.min(100 - startGeom.h, startGeom.y + dyPercent));
|
||||
return { x, y, w: startGeom.w, h: startGeom.h };
|
||||
}
|
||||
|
||||
const affectsLeft =
|
||||
direction === "left" || direction === "nw" || direction === "sw";
|
||||
const affectsRight =
|
||||
direction === "right" || direction === "ne" || direction === "se";
|
||||
const affectsTop =
|
||||
direction === "top" || direction === "nw" || direction === "ne";
|
||||
const affectsBottom =
|
||||
direction === "bottom" || direction === "sw" || direction === "se";
|
||||
const isCorner =
|
||||
direction === "nw" ||
|
||||
direction === "ne" ||
|
||||
direction === "sw" ||
|
||||
direction === "se";
|
||||
|
||||
const rightEdge = startGeom.x + startGeom.w;
|
||||
const bottomEdge = startGeom.y + startGeom.h;
|
||||
let x = startGeom.x;
|
||||
let y = startGeom.y;
|
||||
let w = startGeom.w;
|
||||
let h = startGeom.h;
|
||||
|
||||
if (affectsRight) {
|
||||
const maxW = 100 - startGeom.x;
|
||||
const floor = Math.min(minSize, maxW);
|
||||
w = Math.max(floor, Math.min(maxW, startGeom.w + dxPercent));
|
||||
}
|
||||
if (affectsBottom) {
|
||||
const maxH = 100 - startGeom.y;
|
||||
const floor = Math.min(minSize, maxH);
|
||||
h = Math.max(floor, Math.min(maxH, startGeom.h + dyPercent));
|
||||
}
|
||||
if (affectsLeft) {
|
||||
const floor = Math.min(minSize, rightEdge);
|
||||
x = Math.max(0, Math.min(rightEdge - floor, startGeom.x + dxPercent));
|
||||
w = rightEdge - x;
|
||||
}
|
||||
if (affectsTop) {
|
||||
const floor = Math.min(minSize, bottomEdge);
|
||||
y = Math.max(0, Math.min(bottomEdge - floor, startGeom.y + dyPercent));
|
||||
h = bottomEdge - y;
|
||||
}
|
||||
|
||||
if (isCorner && aspectLocked) {
|
||||
const baseAspect =
|
||||
startGeom.w > 0 && startGeom.h > 0 ? startGeom.w / startGeom.h : 1;
|
||||
if (baseAspect > 0) {
|
||||
const maxW = affectsLeft ? rightEdge : 100 - startGeom.x;
|
||||
const maxH = affectsTop ? bottomEdge : 100 - startGeom.y;
|
||||
let newW = w;
|
||||
let newH = newW / baseAspect;
|
||||
if (newH > maxH) {
|
||||
newH = maxH;
|
||||
newW = newH * baseAspect;
|
||||
}
|
||||
if (newW > maxW) {
|
||||
newW = maxW;
|
||||
newH = newW / baseAspect;
|
||||
}
|
||||
const wFloor = Math.min(minSize, maxW, maxH * baseAspect);
|
||||
if (newW < wFloor) {
|
||||
newW = wFloor;
|
||||
newH = newW / baseAspect;
|
||||
}
|
||||
w = newW;
|
||||
h = newH;
|
||||
x = affectsLeft ? rightEdge - w : startGeom.x;
|
||||
y = affectsTop ? bottomEdge - h : startGeom.y;
|
||||
}
|
||||
}
|
||||
|
||||
return { x, y, w, h };
|
||||
}
|
||||
|
||||
/** Returns true once the pointer has travelled far enough from the mousedown
|
||||
* origin to be treated as a drag rather than a click. */
|
||||
export function crossedDragThreshold(dxPx: number, dyPx: number): boolean {
|
||||
return Math.hypot(dxPx, dyPx) > DRAG_THRESHOLD_PX;
|
||||
}
|
||||
|
||||
/** Zone geometry in slide-body fraction space (each component ∈ [0, 1]).
|
||||
* Mirrors the shape the SlideCanvas pipeline already uses for
|
||||
* `localGeom` / `overrideGeom` / `onZoneResize` payloads. */
|
||||
export interface ZoneFracGeom {
|
||||
x: number;
|
||||
y: number;
|
||||
w: number;
|
||||
h: number;
|
||||
}
|
||||
|
||||
/** Convert a pixel-space drag delta into a slide-body fraction delta, apply
|
||||
* it to `startGeom.{x, y}`, and clamp so the zone never escapes the slide
|
||||
* body (`x ∈ [0, 1 - w]`, `y ∈ [0, 1 - h]`). `w` and `h` are not modified.
|
||||
*
|
||||
* The caller (`SlideCanvas.tsx` `handleZoneMouseDown` onMove) guarantees
|
||||
* `slideBodyWidthPx > 0` and `slideBodyHeightPx > 0` via the
|
||||
* `measuredSlideBody` precondition, so this helper does not re-guard
|
||||
* divide-by-zero. */
|
||||
export function clampZoneMove(
|
||||
startGeom: ZoneFracGeom,
|
||||
dxPx: number,
|
||||
dyPx: number,
|
||||
slideBodyWidthPx: number,
|
||||
slideBodyHeightPx: number,
|
||||
): { x: number; y: number } {
|
||||
const dx = dxPx / slideBodyWidthPx;
|
||||
const dy = dyPx / slideBodyHeightPx;
|
||||
const x = Math.max(0, Math.min(1 - startGeom.w, startGeom.x + dx));
|
||||
const y = Math.max(0, Math.min(1 - startGeom.h, startGeom.y + dy));
|
||||
return { x, y };
|
||||
}
|
||||
@@ -1,64 +0,0 @@
|
||||
import * as React from "react";
|
||||
import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
||||
import { ChevronDownIcon } from "lucide-react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function Accordion({
|
||||
...props
|
||||
}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
|
||||
return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
|
||||
}
|
||||
|
||||
function AccordionItem({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
|
||||
return (
|
||||
<AccordionPrimitive.Item
|
||||
data-slot="accordion-item"
|
||||
className={cn("border-b last:border-b-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function AccordionTrigger({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
|
||||
return (
|
||||
<AccordionPrimitive.Header className="flex">
|
||||
<AccordionPrimitive.Trigger
|
||||
data-slot="accordion-trigger"
|
||||
className={cn(
|
||||
"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
|
||||
</AccordionPrimitive.Trigger>
|
||||
</AccordionPrimitive.Header>
|
||||
);
|
||||
}
|
||||
|
||||
function AccordionContent({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
|
||||
return (
|
||||
<AccordionPrimitive.Content
|
||||
data-slot="accordion-content"
|
||||
className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
|
||||
{...props}
|
||||
>
|
||||
<div className={cn("pt-0 pb-4", className)}>{children}</div>
|
||||
</AccordionPrimitive.Content>
|
||||
);
|
||||
}
|
||||
|
||||
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
|
||||
@@ -1,155 +0,0 @@
|
||||
import * as React from "react";
|
||||
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { buttonVariants } from "@/components/ui/button";
|
||||
|
||||
function AlertDialog({
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
|
||||
return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
|
||||
}
|
||||
|
||||
function AlertDialogTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function AlertDialogPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function AlertDialogOverlay({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Overlay
|
||||
data-slot="alert-dialog-overlay"
|
||||
className={cn(
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function AlertDialogContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
|
||||
return (
|
||||
<AlertDialogPortal>
|
||||
<AlertDialogOverlay />
|
||||
<AlertDialogPrimitive.Content
|
||||
data-slot="alert-dialog-content"
|
||||
className={cn(
|
||||
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</AlertDialogPortal>
|
||||
);
|
||||
}
|
||||
|
||||
function AlertDialogHeader({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-dialog-header"
|
||||
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function AlertDialogFooter({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-dialog-footer"
|
||||
className={cn(
|
||||
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function AlertDialogTitle({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Title
|
||||
data-slot="alert-dialog-title"
|
||||
className={cn("text-lg font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function AlertDialogDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Description
|
||||
data-slot="alert-dialog-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function AlertDialogAction({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Action
|
||||
className={cn(buttonVariants(), className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function AlertDialogCancel({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Cancel
|
||||
className={cn(buttonVariants({ variant: "outline" }), className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
AlertDialog,
|
||||
AlertDialogPortal,
|
||||
AlertDialogOverlay,
|
||||
AlertDialogTrigger,
|
||||
AlertDialogContent,
|
||||
AlertDialogHeader,
|
||||
AlertDialogFooter,
|
||||
AlertDialogTitle,
|
||||
AlertDialogDescription,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
};
|
||||
@@ -1,66 +0,0 @@
|
||||
import * as React from "react";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const alertVariants = cva(
|
||||
"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-card text-card-foreground",
|
||||
destructive:
|
||||
"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
function Alert({
|
||||
className,
|
||||
variant,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert"
|
||||
role="alert"
|
||||
className={cn(alertVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-title"
|
||||
className={cn(
|
||||
"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function AlertDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-description"
|
||||
className={cn(
|
||||
"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { Alert, AlertTitle, AlertDescription };
|
||||
@@ -1,9 +0,0 @@
|
||||
import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
|
||||
|
||||
function AspectRatio({
|
||||
...props
|
||||
}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
|
||||
return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
|
||||
}
|
||||
|
||||
export { AspectRatio };
|
||||
@@ -1,51 +0,0 @@
|
||||
import * as React from "react";
|
||||
import * as AvatarPrimitive from "@radix-ui/react-avatar";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function Avatar({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
|
||||
return (
|
||||
<AvatarPrimitive.Root
|
||||
data-slot="avatar"
|
||||
className={cn(
|
||||
"relative flex size-8 shrink-0 overflow-hidden rounded-full",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function AvatarImage({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
|
||||
return (
|
||||
<AvatarPrimitive.Image
|
||||
data-slot="avatar-image"
|
||||
className={cn("aspect-square size-full", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function AvatarFallback({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
|
||||
return (
|
||||
<AvatarPrimitive.Fallback
|
||||
data-slot="avatar-fallback"
|
||||
className={cn(
|
||||
"bg-muted flex size-full items-center justify-center rounded-full",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { Avatar, AvatarImage, AvatarFallback };
|
||||
@@ -1,46 +0,0 @@
|
||||
import * as React from "react";
|
||||
import { Slot } from "@radix-ui/react-slot";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const badgeVariants = cva(
|
||||
"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
|
||||
secondary:
|
||||
"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
|
||||
destructive:
|
||||
"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||
outline:
|
||||
"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
function Badge({
|
||||
className,
|
||||
variant,
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"span"> &
|
||||
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
|
||||
const Comp = asChild ? Slot : "span";
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="badge"
|
||||
className={cn(badgeVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants };
|
||||
@@ -1,109 +0,0 @@
|
||||
import * as React from "react";
|
||||
import { Slot } from "@radix-ui/react-slot";
|
||||
import { ChevronRight, MoreHorizontal } from "lucide-react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
|
||||
return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
|
||||
}
|
||||
|
||||
function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
|
||||
return (
|
||||
<ol
|
||||
data-slot="breadcrumb-list"
|
||||
className={cn(
|
||||
"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
|
||||
return (
|
||||
<li
|
||||
data-slot="breadcrumb-item"
|
||||
className={cn("inline-flex items-center gap-1.5", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function BreadcrumbLink({
|
||||
asChild,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"a"> & {
|
||||
asChild?: boolean;
|
||||
}) {
|
||||
const Comp = asChild ? Slot : "a";
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="breadcrumb-link"
|
||||
className={cn("hover:text-foreground transition-colors", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
data-slot="breadcrumb-page"
|
||||
role="link"
|
||||
aria-disabled="true"
|
||||
aria-current="page"
|
||||
className={cn("text-foreground font-normal", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function BreadcrumbSeparator({
|
||||
children,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"li">) {
|
||||
return (
|
||||
<li
|
||||
data-slot="breadcrumb-separator"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
className={cn("[&>svg]:size-3.5", className)}
|
||||
{...props}
|
||||
>
|
||||
{children ?? <ChevronRight />}
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
function BreadcrumbEllipsis({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
data-slot="breadcrumb-ellipsis"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
className={cn("flex size-9 items-center justify-center", className)}
|
||||
{...props}
|
||||
>
|
||||
<MoreHorizontal className="size-4" />
|
||||
<span className="sr-only">More</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
Breadcrumb,
|
||||
BreadcrumbList,
|
||||
BreadcrumbItem,
|
||||
BreadcrumbLink,
|
||||
BreadcrumbPage,
|
||||
BreadcrumbSeparator,
|
||||
BreadcrumbEllipsis,
|
||||
};
|
||||
@@ -1,83 +0,0 @@
|
||||
import { Slot } from "@radix-ui/react-slot";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
|
||||
const buttonGroupVariants = cva(
|
||||
"flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
|
||||
{
|
||||
variants: {
|
||||
orientation: {
|
||||
horizontal:
|
||||
"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
|
||||
vertical:
|
||||
"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
orientation: "horizontal",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
function ButtonGroup({
|
||||
className,
|
||||
orientation,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
|
||||
return (
|
||||
<div
|
||||
role="group"
|
||||
data-slot="button-group"
|
||||
data-orientation={orientation}
|
||||
className={cn(buttonGroupVariants({ orientation }), className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function ButtonGroupText({
|
||||
className,
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
asChild?: boolean;
|
||||
}) {
|
||||
const Comp = asChild ? Slot : "div";
|
||||
|
||||
return (
|
||||
<Comp
|
||||
className={cn(
|
||||
"bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function ButtonGroupSeparator({
|
||||
className,
|
||||
orientation = "vertical",
|
||||
...props
|
||||
}: React.ComponentProps<typeof Separator>) {
|
||||
return (
|
||||
<Separator
|
||||
data-slot="button-group-separator"
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
ButtonGroup,
|
||||
ButtonGroupSeparator,
|
||||
ButtonGroupText,
|
||||
buttonGroupVariants,
|
||||
};
|
||||
@@ -1,60 +0,0 @@
|
||||
import * as React from "react";
|
||||
import { Slot } from "@radix-ui/react-slot";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||
destructive:
|
||||
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||
outline:
|
||||
"border bg-transparent shadow-xs hover:bg-accent dark:bg-transparent dark:border-input dark:hover:bg-input/50",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
ghost:
|
||||
"hover:bg-accent dark:hover:bg-accent/50",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
||||
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
||||
icon: "size-9",
|
||||
"icon-sm": "size-8",
|
||||
"icon-lg": "size-10",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
function Button({
|
||||
className,
|
||||
variant,
|
||||
size,
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"button"> &
|
||||
VariantProps<typeof buttonVariants> & {
|
||||
asChild?: boolean;
|
||||
}) {
|
||||
const Comp = asChild ? Slot : "button";
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="button"
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { Button, buttonVariants };
|
||||
@@ -1,211 +0,0 @@
|
||||
import * as React from "react";
|
||||
import {
|
||||
ChevronDownIcon,
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
} from "lucide-react";
|
||||
import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button, buttonVariants } from "@/components/ui/button";
|
||||
|
||||
function Calendar({
|
||||
className,
|
||||
classNames,
|
||||
showOutsideDays = true,
|
||||
captionLayout = "label",
|
||||
buttonVariant = "ghost",
|
||||
formatters,
|
||||
components,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DayPicker> & {
|
||||
buttonVariant?: React.ComponentProps<typeof Button>["variant"];
|
||||
}) {
|
||||
const defaultClassNames = getDefaultClassNames();
|
||||
|
||||
return (
|
||||
<DayPicker
|
||||
showOutsideDays={showOutsideDays}
|
||||
className={cn(
|
||||
"bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
|
||||
String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
|
||||
String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
|
||||
className
|
||||
)}
|
||||
captionLayout={captionLayout}
|
||||
formatters={{
|
||||
formatMonthDropdown: date =>
|
||||
date.toLocaleString("default", { month: "short" }),
|
||||
...formatters,
|
||||
}}
|
||||
classNames={{
|
||||
root: cn("w-fit", defaultClassNames.root),
|
||||
months: cn(
|
||||
"flex gap-4 flex-col md:flex-row relative",
|
||||
defaultClassNames.months
|
||||
),
|
||||
month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
|
||||
nav: cn(
|
||||
"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
|
||||
defaultClassNames.nav
|
||||
),
|
||||
button_previous: cn(
|
||||
buttonVariants({ variant: buttonVariant }),
|
||||
"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
|
||||
defaultClassNames.button_previous
|
||||
),
|
||||
button_next: cn(
|
||||
buttonVariants({ variant: buttonVariant }),
|
||||
"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
|
||||
defaultClassNames.button_next
|
||||
),
|
||||
month_caption: cn(
|
||||
"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
|
||||
defaultClassNames.month_caption
|
||||
),
|
||||
dropdowns: cn(
|
||||
"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
|
||||
defaultClassNames.dropdowns
|
||||
),
|
||||
dropdown_root: cn(
|
||||
"relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
|
||||
defaultClassNames.dropdown_root
|
||||
),
|
||||
dropdown: cn(
|
||||
"absolute bg-popover inset-0 opacity-0",
|
||||
defaultClassNames.dropdown
|
||||
),
|
||||
caption_label: cn(
|
||||
"select-none font-medium",
|
||||
captionLayout === "label"
|
||||
? "text-sm"
|
||||
: "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
|
||||
defaultClassNames.caption_label
|
||||
),
|
||||
table: "w-full border-collapse",
|
||||
weekdays: cn("flex", defaultClassNames.weekdays),
|
||||
weekday: cn(
|
||||
"text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
|
||||
defaultClassNames.weekday
|
||||
),
|
||||
week: cn("flex w-full mt-2", defaultClassNames.week),
|
||||
week_number_header: cn(
|
||||
"select-none w-(--cell-size)",
|
||||
defaultClassNames.week_number_header
|
||||
),
|
||||
week_number: cn(
|
||||
"text-[0.8rem] select-none text-muted-foreground",
|
||||
defaultClassNames.week_number
|
||||
),
|
||||
day: cn(
|
||||
"relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
|
||||
defaultClassNames.day
|
||||
),
|
||||
range_start: cn(
|
||||
"rounded-l-md bg-accent",
|
||||
defaultClassNames.range_start
|
||||
),
|
||||
range_middle: cn("rounded-none", defaultClassNames.range_middle),
|
||||
range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
|
||||
today: cn(
|
||||
"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
|
||||
defaultClassNames.today
|
||||
),
|
||||
outside: cn(
|
||||
"text-muted-foreground aria-selected:text-muted-foreground",
|
||||
defaultClassNames.outside
|
||||
),
|
||||
disabled: cn(
|
||||
"text-muted-foreground opacity-50",
|
||||
defaultClassNames.disabled
|
||||
),
|
||||
hidden: cn("invisible", defaultClassNames.hidden),
|
||||
...classNames,
|
||||
}}
|
||||
components={{
|
||||
Root: ({ className, rootRef, ...props }) => {
|
||||
return (
|
||||
<div
|
||||
data-slot="calendar"
|
||||
ref={rootRef}
|
||||
className={cn(className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
},
|
||||
Chevron: ({ className, orientation, ...props }) => {
|
||||
if (orientation === "left") {
|
||||
return (
|
||||
<ChevronLeftIcon className={cn("size-4", className)} {...props} />
|
||||
);
|
||||
}
|
||||
|
||||
if (orientation === "right") {
|
||||
return (
|
||||
<ChevronRightIcon
|
||||
className={cn("size-4", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ChevronDownIcon className={cn("size-4", className)} {...props} />
|
||||
);
|
||||
},
|
||||
DayButton: CalendarDayButton,
|
||||
WeekNumber: ({ children, ...props }) => {
|
||||
return (
|
||||
<td {...props}>
|
||||
<div className="flex size-(--cell-size) items-center justify-center text-center">
|
||||
{children}
|
||||
</div>
|
||||
</td>
|
||||
);
|
||||
},
|
||||
...components,
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CalendarDayButton({
|
||||
className,
|
||||
day,
|
||||
modifiers,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DayButton>) {
|
||||
const defaultClassNames = getDefaultClassNames();
|
||||
|
||||
const ref = React.useRef<HTMLButtonElement>(null);
|
||||
React.useEffect(() => {
|
||||
if (modifiers.focused) ref.current?.focus();
|
||||
}, [modifiers.focused]);
|
||||
|
||||
return (
|
||||
<Button
|
||||
ref={ref}
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
data-day={day.date.toLocaleDateString()}
|
||||
data-selected-single={
|
||||
modifiers.selected &&
|
||||
!modifiers.range_start &&
|
||||
!modifiers.range_end &&
|
||||
!modifiers.range_middle
|
||||
}
|
||||
data-range-start={modifiers.range_start}
|
||||
data-range-end={modifiers.range_end}
|
||||
data-range-middle={modifiers.range_middle}
|
||||
className={cn(
|
||||
"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
|
||||
defaultClassNames.day,
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { Calendar, CalendarDayButton };
|
||||
@@ -1,92 +0,0 @@
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card"
|
||||
className={cn(
|
||||
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-header"
|
||||
className={cn(
|
||||
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-title"
|
||||
className={cn("leading-none font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-action"
|
||||
className={cn(
|
||||
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-content"
|
||||
className={cn("px-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-footer"
|
||||
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
CardAction,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
};
|
||||
@@ -1,239 +0,0 @@
|
||||
import * as React from "react";
|
||||
import useEmblaCarousel, {
|
||||
type UseEmblaCarouselType,
|
||||
} from "embla-carousel-react";
|
||||
import { ArrowLeft, ArrowRight } from "lucide-react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
type CarouselApi = UseEmblaCarouselType[1];
|
||||
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
|
||||
type CarouselOptions = UseCarouselParameters[0];
|
||||
type CarouselPlugin = UseCarouselParameters[1];
|
||||
|
||||
type CarouselProps = {
|
||||
opts?: CarouselOptions;
|
||||
plugins?: CarouselPlugin;
|
||||
orientation?: "horizontal" | "vertical";
|
||||
setApi?: (api: CarouselApi) => void;
|
||||
};
|
||||
|
||||
type CarouselContextProps = {
|
||||
carouselRef: ReturnType<typeof useEmblaCarousel>[0];
|
||||
api: ReturnType<typeof useEmblaCarousel>[1];
|
||||
scrollPrev: () => void;
|
||||
scrollNext: () => void;
|
||||
canScrollPrev: boolean;
|
||||
canScrollNext: boolean;
|
||||
} & CarouselProps;
|
||||
|
||||
const CarouselContext = React.createContext<CarouselContextProps | null>(null);
|
||||
|
||||
function useCarousel() {
|
||||
const context = React.useContext(CarouselContext);
|
||||
|
||||
if (!context) {
|
||||
throw new Error("useCarousel must be used within a <Carousel />");
|
||||
}
|
||||
|
||||
return context;
|
||||
}
|
||||
|
||||
function Carousel({
|
||||
orientation = "horizontal",
|
||||
opts,
|
||||
setApi,
|
||||
plugins,
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & CarouselProps) {
|
||||
const [carouselRef, api] = useEmblaCarousel(
|
||||
{
|
||||
...opts,
|
||||
axis: orientation === "horizontal" ? "x" : "y",
|
||||
},
|
||||
plugins
|
||||
);
|
||||
const [canScrollPrev, setCanScrollPrev] = React.useState(false);
|
||||
const [canScrollNext, setCanScrollNext] = React.useState(false);
|
||||
|
||||
const onSelect = React.useCallback((api: CarouselApi) => {
|
||||
if (!api) return;
|
||||
setCanScrollPrev(api.canScrollPrev());
|
||||
setCanScrollNext(api.canScrollNext());
|
||||
}, []);
|
||||
|
||||
const scrollPrev = React.useCallback(() => {
|
||||
api?.scrollPrev();
|
||||
}, [api]);
|
||||
|
||||
const scrollNext = React.useCallback(() => {
|
||||
api?.scrollNext();
|
||||
}, [api]);
|
||||
|
||||
const handleKeyDown = React.useCallback(
|
||||
(event: React.KeyboardEvent<HTMLDivElement>) => {
|
||||
if (event.key === "ArrowLeft") {
|
||||
event.preventDefault();
|
||||
scrollPrev();
|
||||
} else if (event.key === "ArrowRight") {
|
||||
event.preventDefault();
|
||||
scrollNext();
|
||||
}
|
||||
},
|
||||
[scrollPrev, scrollNext]
|
||||
);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!api || !setApi) return;
|
||||
setApi(api);
|
||||
}, [api, setApi]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!api) return;
|
||||
onSelect(api);
|
||||
api.on("reInit", onSelect);
|
||||
api.on("select", onSelect);
|
||||
|
||||
return () => {
|
||||
api?.off("select", onSelect);
|
||||
};
|
||||
}, [api, onSelect]);
|
||||
|
||||
return (
|
||||
<CarouselContext.Provider
|
||||
value={{
|
||||
carouselRef,
|
||||
api: api,
|
||||
opts,
|
||||
orientation:
|
||||
orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
|
||||
scrollPrev,
|
||||
scrollNext,
|
||||
canScrollPrev,
|
||||
canScrollNext,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
onKeyDownCapture={handleKeyDown}
|
||||
className={cn("relative", className)}
|
||||
role="region"
|
||||
aria-roledescription="carousel"
|
||||
data-slot="carousel"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</CarouselContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
const { carouselRef, orientation } = useCarousel();
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={carouselRef}
|
||||
className="overflow-hidden"
|
||||
data-slot="carousel-content"
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"flex",
|
||||
orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
|
||||
const { orientation } = useCarousel();
|
||||
|
||||
return (
|
||||
<div
|
||||
role="group"
|
||||
aria-roledescription="slide"
|
||||
data-slot="carousel-item"
|
||||
className={cn(
|
||||
"min-w-0 shrink-0 grow-0 basis-full",
|
||||
orientation === "horizontal" ? "pl-4" : "pt-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CarouselPrevious({
|
||||
className,
|
||||
variant = "outline",
|
||||
size = "icon",
|
||||
...props
|
||||
}: React.ComponentProps<typeof Button>) {
|
||||
const { orientation, scrollPrev, canScrollPrev } = useCarousel();
|
||||
|
||||
return (
|
||||
<Button
|
||||
data-slot="carousel-previous"
|
||||
variant={variant}
|
||||
size={size}
|
||||
className={cn(
|
||||
"absolute size-8 rounded-full",
|
||||
orientation === "horizontal"
|
||||
? "top-1/2 -left-12 -translate-y-1/2"
|
||||
: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
|
||||
className
|
||||
)}
|
||||
disabled={!canScrollPrev}
|
||||
onClick={scrollPrev}
|
||||
{...props}
|
||||
>
|
||||
<ArrowLeft />
|
||||
<span className="sr-only">Previous slide</span>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
function CarouselNext({
|
||||
className,
|
||||
variant = "outline",
|
||||
size = "icon",
|
||||
...props
|
||||
}: React.ComponentProps<typeof Button>) {
|
||||
const { orientation, scrollNext, canScrollNext } = useCarousel();
|
||||
|
||||
return (
|
||||
<Button
|
||||
data-slot="carousel-next"
|
||||
variant={variant}
|
||||
size={size}
|
||||
className={cn(
|
||||
"absolute size-8 rounded-full",
|
||||
orientation === "horizontal"
|
||||
? "top-1/2 -right-12 -translate-y-1/2"
|
||||
: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
|
||||
className
|
||||
)}
|
||||
disabled={!canScrollNext}
|
||||
onClick={scrollNext}
|
||||
{...props}
|
||||
>
|
||||
<ArrowRight />
|
||||
<span className="sr-only">Next slide</span>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
type CarouselApi,
|
||||
Carousel,
|
||||
CarouselContent,
|
||||
CarouselItem,
|
||||
CarouselPrevious,
|
||||
CarouselNext,
|
||||
};
|
||||
@@ -1,355 +0,0 @@
|
||||
import * as React from "react";
|
||||
import * as RechartsPrimitive from "recharts";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
// Format: { THEME_NAME: CSS_SELECTOR }
|
||||
const THEMES = { light: "", dark: ".dark" } as const;
|
||||
|
||||
export type ChartConfig = {
|
||||
[k in string]: {
|
||||
label?: React.ReactNode;
|
||||
icon?: React.ComponentType;
|
||||
} & (
|
||||
| { color?: string; theme?: never }
|
||||
| { color?: never; theme: Record<keyof typeof THEMES, string> }
|
||||
);
|
||||
};
|
||||
|
||||
type ChartContextProps = {
|
||||
config: ChartConfig;
|
||||
};
|
||||
|
||||
const ChartContext = React.createContext<ChartContextProps | null>(null);
|
||||
|
||||
function useChart() {
|
||||
const context = React.useContext(ChartContext);
|
||||
|
||||
if (!context) {
|
||||
throw new Error("useChart must be used within a <ChartContainer />");
|
||||
}
|
||||
|
||||
return context;
|
||||
}
|
||||
|
||||
function ChartContainer({
|
||||
id,
|
||||
className,
|
||||
children,
|
||||
config,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
config: ChartConfig;
|
||||
children: React.ComponentProps<
|
||||
typeof RechartsPrimitive.ResponsiveContainer
|
||||
>["children"];
|
||||
}) {
|
||||
const uniqueId = React.useId();
|
||||
const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
|
||||
|
||||
return (
|
||||
<ChartContext.Provider value={{ config }}>
|
||||
<div
|
||||
data-slot="chart"
|
||||
data-chart={chartId}
|
||||
className={cn(
|
||||
"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChartStyle id={chartId} config={config} />
|
||||
<RechartsPrimitive.ResponsiveContainer>
|
||||
{children}
|
||||
</RechartsPrimitive.ResponsiveContainer>
|
||||
</div>
|
||||
</ChartContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
|
||||
const colorConfig = Object.entries(config).filter(
|
||||
([, config]) => config.theme || config.color
|
||||
);
|
||||
|
||||
if (!colorConfig.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: Object.entries(THEMES)
|
||||
.map(
|
||||
([theme, prefix]) => `
|
||||
${prefix} [data-chart=${id}] {
|
||||
${colorConfig
|
||||
.map(([key, itemConfig]) => {
|
||||
const color =
|
||||
itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
|
||||
itemConfig.color;
|
||||
return color ? ` --color-${key}: ${color};` : null;
|
||||
})
|
||||
.join("\n")}
|
||||
}
|
||||
`
|
||||
)
|
||||
.join("\n"),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const ChartTooltip = RechartsPrimitive.Tooltip;
|
||||
|
||||
function ChartTooltipContent({
|
||||
active,
|
||||
payload,
|
||||
className,
|
||||
indicator = "dot",
|
||||
hideLabel = false,
|
||||
hideIndicator = false,
|
||||
label,
|
||||
labelFormatter,
|
||||
labelClassName,
|
||||
formatter,
|
||||
color,
|
||||
nameKey,
|
||||
labelKey,
|
||||
}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
|
||||
React.ComponentProps<"div"> & {
|
||||
hideLabel?: boolean;
|
||||
hideIndicator?: boolean;
|
||||
indicator?: "line" | "dot" | "dashed";
|
||||
nameKey?: string;
|
||||
labelKey?: string;
|
||||
}) {
|
||||
const { config } = useChart();
|
||||
|
||||
const tooltipLabel = React.useMemo(() => {
|
||||
if (hideLabel || !payload?.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const [item] = payload;
|
||||
const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
|
||||
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
||||
const value =
|
||||
!labelKey && typeof label === "string"
|
||||
? config[label as keyof typeof config]?.label || label
|
||||
: itemConfig?.label;
|
||||
|
||||
if (labelFormatter) {
|
||||
return (
|
||||
<div className={cn("font-medium", labelClassName)}>
|
||||
{labelFormatter(value, payload)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!value) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <div className={cn("font-medium", labelClassName)}>{value}</div>;
|
||||
}, [
|
||||
label,
|
||||
labelFormatter,
|
||||
payload,
|
||||
hideLabel,
|
||||
labelClassName,
|
||||
config,
|
||||
labelKey,
|
||||
]);
|
||||
|
||||
if (!active || !payload?.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const nestLabel = payload.length === 1 && indicator !== "dot";
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
|
||||
className
|
||||
)}
|
||||
>
|
||||
{!nestLabel ? tooltipLabel : null}
|
||||
<div className="grid gap-1.5">
|
||||
{payload
|
||||
.filter(item => item.type !== "none")
|
||||
.map((item, index) => {
|
||||
const key = `${nameKey || item.name || item.dataKey || "value"}`;
|
||||
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
||||
const indicatorColor = color || item.payload.fill || item.color;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.dataKey}
|
||||
className={cn(
|
||||
"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
|
||||
indicator === "dot" && "items-center"
|
||||
)}
|
||||
>
|
||||
{formatter && item?.value !== undefined && item.name ? (
|
||||
formatter(item.value, item.name, item, index, item.payload)
|
||||
) : (
|
||||
<>
|
||||
{itemConfig?.icon ? (
|
||||
<itemConfig.icon />
|
||||
) : (
|
||||
!hideIndicator && (
|
||||
<div
|
||||
className={cn(
|
||||
"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
|
||||
{
|
||||
"h-2.5 w-2.5": indicator === "dot",
|
||||
"w-1": indicator === "line",
|
||||
"w-0 border-[1.5px] border-dashed bg-transparent":
|
||||
indicator === "dashed",
|
||||
"my-0.5": nestLabel && indicator === "dashed",
|
||||
}
|
||||
)}
|
||||
style={
|
||||
{
|
||||
"--color-bg": indicatorColor,
|
||||
"--color-border": indicatorColor,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-1 justify-between leading-none",
|
||||
nestLabel ? "items-end" : "items-center"
|
||||
)}
|
||||
>
|
||||
<div className="grid gap-1.5">
|
||||
{nestLabel ? tooltipLabel : null}
|
||||
<span className="text-muted-foreground">
|
||||
{itemConfig?.label || item.name}
|
||||
</span>
|
||||
</div>
|
||||
{item.value && (
|
||||
<span className="text-foreground font-mono font-medium tabular-nums">
|
||||
{item.value.toLocaleString()}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const ChartLegend = RechartsPrimitive.Legend;
|
||||
|
||||
function ChartLegendContent({
|
||||
className,
|
||||
hideIcon = false,
|
||||
payload,
|
||||
verticalAlign = "bottom",
|
||||
nameKey,
|
||||
}: React.ComponentProps<"div"> &
|
||||
Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
|
||||
hideIcon?: boolean;
|
||||
nameKey?: string;
|
||||
}) {
|
||||
const { config } = useChart();
|
||||
|
||||
if (!payload?.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center justify-center gap-4",
|
||||
verticalAlign === "top" ? "pb-3" : "pt-3",
|
||||
className
|
||||
)}
|
||||
>
|
||||
{payload
|
||||
.filter(item => item.type !== "none")
|
||||
.map(item => {
|
||||
const key = `${nameKey || item.dataKey || "value"}`;
|
||||
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.value}
|
||||
className={cn(
|
||||
"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
|
||||
)}
|
||||
>
|
||||
{itemConfig?.icon && !hideIcon ? (
|
||||
<itemConfig.icon />
|
||||
) : (
|
||||
<div
|
||||
className="h-2 w-2 shrink-0 rounded-[2px]"
|
||||
style={{
|
||||
backgroundColor: item.color,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{itemConfig?.label}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Helper to extract item config from a payload.
|
||||
function getPayloadConfigFromPayload(
|
||||
config: ChartConfig,
|
||||
payload: unknown,
|
||||
key: string
|
||||
) {
|
||||
if (typeof payload !== "object" || payload === null) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const payloadPayload =
|
||||
"payload" in payload &&
|
||||
typeof payload.payload === "object" &&
|
||||
payload.payload !== null
|
||||
? payload.payload
|
||||
: undefined;
|
||||
|
||||
let configLabelKey: string = key;
|
||||
|
||||
if (
|
||||
key in payload &&
|
||||
typeof payload[key as keyof typeof payload] === "string"
|
||||
) {
|
||||
configLabelKey = payload[key as keyof typeof payload] as string;
|
||||
} else if (
|
||||
payloadPayload &&
|
||||
key in payloadPayload &&
|
||||
typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
|
||||
) {
|
||||
configLabelKey = payloadPayload[
|
||||
key as keyof typeof payloadPayload
|
||||
] as string;
|
||||
}
|
||||
|
||||
return configLabelKey in config
|
||||
? config[configLabelKey]
|
||||
: config[key as keyof typeof config];
|
||||
}
|
||||
|
||||
export {
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
ChartLegend,
|
||||
ChartLegendContent,
|
||||
ChartStyle,
|
||||
};
|
||||
@@ -1,30 +0,0 @@
|
||||
import * as React from "react";
|
||||
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
|
||||
import { CheckIcon } from "lucide-react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function Checkbox({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
|
||||
return (
|
||||
<CheckboxPrimitive.Root
|
||||
data-slot="checkbox"
|
||||
className={cn(
|
||||
"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<CheckboxPrimitive.Indicator
|
||||
data-slot="checkbox-indicator"
|
||||
className="flex items-center justify-center text-current transition-none"
|
||||
>
|
||||
<CheckIcon className="size-3.5" />
|
||||
</CheckboxPrimitive.Indicator>
|
||||
</CheckboxPrimitive.Root>
|
||||
);
|
||||
}
|
||||
|
||||
export { Checkbox };
|
||||
@@ -1,31 +0,0 @@
|
||||
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
|
||||
|
||||
function Collapsible({
|
||||
...props
|
||||
}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
|
||||
return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
|
||||
}
|
||||
|
||||
function CollapsibleTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
|
||||
return (
|
||||
<CollapsiblePrimitive.CollapsibleTrigger
|
||||
data-slot="collapsible-trigger"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CollapsibleContent({
|
||||
...props
|
||||
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
|
||||
return (
|
||||
<CollapsiblePrimitive.CollapsibleContent
|
||||
data-slot="collapsible-content"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { Collapsible, CollapsibleTrigger, CollapsibleContent };
|
||||
@@ -1,184 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import { Command as CommandPrimitive } from "cmdk";
|
||||
import { SearchIcon } from "lucide-react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
|
||||
function Command({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CommandPrimitive>) {
|
||||
return (
|
||||
<CommandPrimitive
|
||||
data-slot="command"
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CommandDialog({
|
||||
title = "Command Palette",
|
||||
description = "Search for a command to run...",
|
||||
children,
|
||||
className,
|
||||
showCloseButton = true,
|
||||
...props
|
||||
}: React.ComponentProps<typeof Dialog> & {
|
||||
title?: string;
|
||||
description?: string;
|
||||
className?: string;
|
||||
showCloseButton?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<Dialog {...props}>
|
||||
<DialogHeader className="sr-only">
|
||||
<DialogTitle>{title}</DialogTitle>
|
||||
<DialogDescription>{description}</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogContent
|
||||
className={cn("overflow-hidden p-0", className)}
|
||||
showCloseButton={showCloseButton}
|
||||
>
|
||||
<Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
|
||||
{children}
|
||||
</Command>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
function CommandInput({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CommandPrimitive.Input>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="command-input-wrapper"
|
||||
className="flex h-9 items-center gap-2 border-b px-3"
|
||||
>
|
||||
<SearchIcon className="size-4 shrink-0 opacity-50" />
|
||||
<CommandPrimitive.Input
|
||||
data-slot="command-input"
|
||||
className={cn(
|
||||
"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CommandList({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CommandPrimitive.List>) {
|
||||
return (
|
||||
<CommandPrimitive.List
|
||||
data-slot="command-list"
|
||||
className={cn(
|
||||
"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CommandEmpty({
|
||||
...props
|
||||
}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
|
||||
return (
|
||||
<CommandPrimitive.Empty
|
||||
data-slot="command-empty"
|
||||
className="py-6 text-center text-sm"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CommandGroup({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CommandPrimitive.Group>) {
|
||||
return (
|
||||
<CommandPrimitive.Group
|
||||
data-slot="command-group"
|
||||
className={cn(
|
||||
"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CommandSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
|
||||
return (
|
||||
<CommandPrimitive.Separator
|
||||
data-slot="command-separator"
|
||||
className={cn("bg-border -mx-1 h-px", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CommandItem({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CommandPrimitive.Item>) {
|
||||
return (
|
||||
<CommandPrimitive.Item
|
||||
data-slot="command-item"
|
||||
className={cn(
|
||||
"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CommandShortcut({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
data-slot="command-shortcut"
|
||||
className={cn(
|
||||
"text-muted-foreground ml-auto text-xs tracking-widest",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
Command,
|
||||
CommandDialog,
|
||||
CommandInput,
|
||||
CommandList,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandItem,
|
||||
CommandShortcut,
|
||||
CommandSeparator,
|
||||
};
|
||||
@@ -1,250 +0,0 @@
|
||||
import * as React from "react";
|
||||
import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
|
||||
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function ContextMenu({
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
|
||||
return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
|
||||
}
|
||||
|
||||
function ContextMenuTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
|
||||
return (
|
||||
<ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function ContextMenuGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
|
||||
return (
|
||||
<ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function ContextMenuPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
|
||||
return (
|
||||
<ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function ContextMenuSub({
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
|
||||
return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
|
||||
}
|
||||
|
||||
function ContextMenuRadioGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
|
||||
return (
|
||||
<ContextMenuPrimitive.RadioGroup
|
||||
data-slot="context-menu-radio-group"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function ContextMenuSubTrigger({
|
||||
className,
|
||||
inset,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
|
||||
inset?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<ContextMenuPrimitive.SubTrigger
|
||||
data-slot="context-menu-sub-trigger"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRightIcon className="ml-auto" />
|
||||
</ContextMenuPrimitive.SubTrigger>
|
||||
);
|
||||
}
|
||||
|
||||
function ContextMenuSubContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
|
||||
return (
|
||||
<ContextMenuPrimitive.SubContent
|
||||
data-slot="context-menu-sub-content"
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function ContextMenuContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
|
||||
return (
|
||||
<ContextMenuPrimitive.Portal>
|
||||
<ContextMenuPrimitive.Content
|
||||
data-slot="context-menu-content"
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</ContextMenuPrimitive.Portal>
|
||||
);
|
||||
}
|
||||
|
||||
function ContextMenuItem({
|
||||
className,
|
||||
inset,
|
||||
variant = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
|
||||
inset?: boolean;
|
||||
variant?: "default" | "destructive";
|
||||
}) {
|
||||
return (
|
||||
<ContextMenuPrimitive.Item
|
||||
data-slot="context-menu-item"
|
||||
data-inset={inset}
|
||||
data-variant={variant}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function ContextMenuCheckboxItem({
|
||||
className,
|
||||
children,
|
||||
checked,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
|
||||
return (
|
||||
<ContextMenuPrimitive.CheckboxItem
|
||||
data-slot="context-menu-checkbox-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||
<ContextMenuPrimitive.ItemIndicator>
|
||||
<CheckIcon className="size-4" />
|
||||
</ContextMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</ContextMenuPrimitive.CheckboxItem>
|
||||
);
|
||||
}
|
||||
|
||||
function ContextMenuRadioItem({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
|
||||
return (
|
||||
<ContextMenuPrimitive.RadioItem
|
||||
data-slot="context-menu-radio-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||
<ContextMenuPrimitive.ItemIndicator>
|
||||
<CircleIcon className="size-2 fill-current" />
|
||||
</ContextMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</ContextMenuPrimitive.RadioItem>
|
||||
);
|
||||
}
|
||||
|
||||
function ContextMenuLabel({
|
||||
className,
|
||||
inset,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
|
||||
inset?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<ContextMenuPrimitive.Label
|
||||
data-slot="context-menu-label"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function ContextMenuSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
|
||||
return (
|
||||
<ContextMenuPrimitive.Separator
|
||||
data-slot="context-menu-separator"
|
||||
className={cn("bg-border -mx-1 my-1 h-px", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function ContextMenuShortcut({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
data-slot="context-menu-shortcut"
|
||||
className={cn(
|
||||
"text-muted-foreground ml-auto text-xs tracking-widest",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
ContextMenu,
|
||||
ContextMenuTrigger,
|
||||
ContextMenuContent,
|
||||
ContextMenuItem,
|
||||
ContextMenuCheckboxItem,
|
||||
ContextMenuRadioItem,
|
||||
ContextMenuLabel,
|
||||
ContextMenuSeparator,
|
||||
ContextMenuShortcut,
|
||||
ContextMenuGroup,
|
||||
ContextMenuPortal,
|
||||
ContextMenuSub,
|
||||
ContextMenuSubContent,
|
||||
ContextMenuSubTrigger,
|
||||
ContextMenuRadioGroup,
|
||||
};
|
||||
@@ -1,209 +0,0 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
||||
import { XIcon } from "lucide-react";
|
||||
import * as React from "react";
|
||||
|
||||
// Context to track composition state across dialog children
|
||||
const DialogCompositionContext = React.createContext<{
|
||||
isComposing: () => boolean;
|
||||
setComposing: (composing: boolean) => void;
|
||||
justEndedComposing: () => boolean;
|
||||
markCompositionEnd: () => void;
|
||||
}>({
|
||||
isComposing: () => false,
|
||||
setComposing: () => {},
|
||||
justEndedComposing: () => false,
|
||||
markCompositionEnd: () => {},
|
||||
});
|
||||
|
||||
export const useDialogComposition = () =>
|
||||
React.useContext(DialogCompositionContext);
|
||||
|
||||
function Dialog({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
|
||||
const composingRef = React.useRef(false);
|
||||
const justEndedRef = React.useRef(false);
|
||||
const endTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
const contextValue = React.useMemo(
|
||||
() => ({
|
||||
isComposing: () => composingRef.current,
|
||||
setComposing: (composing: boolean) => {
|
||||
composingRef.current = composing;
|
||||
},
|
||||
justEndedComposing: () => justEndedRef.current,
|
||||
markCompositionEnd: () => {
|
||||
justEndedRef.current = true;
|
||||
if (endTimerRef.current) {
|
||||
clearTimeout(endTimerRef.current);
|
||||
}
|
||||
endTimerRef.current = setTimeout(() => {
|
||||
justEndedRef.current = false;
|
||||
}, 150);
|
||||
},
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
return (
|
||||
<DialogCompositionContext.Provider value={contextValue}>
|
||||
<DialogPrimitive.Root data-slot="dialog" {...props} />
|
||||
</DialogCompositionContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
function DialogTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
|
||||
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
|
||||
}
|
||||
|
||||
function DialogPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
|
||||
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
|
||||
}
|
||||
|
||||
function DialogClose({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
|
||||
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
|
||||
}
|
||||
|
||||
function DialogOverlay({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
|
||||
return (
|
||||
<DialogPrimitive.Overlay
|
||||
data-slot="dialog-overlay"
|
||||
className={cn(
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
DialogOverlay.displayName = "DialogOverlay";
|
||||
|
||||
function DialogContent({
|
||||
className,
|
||||
children,
|
||||
showCloseButton = true,
|
||||
onEscapeKeyDown,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
|
||||
showCloseButton?: boolean;
|
||||
}) {
|
||||
const { isComposing } = useDialogComposition();
|
||||
|
||||
const handleEscapeKeyDown = React.useCallback(
|
||||
(e: KeyboardEvent) => {
|
||||
// Check both the native isComposing property and our context state
|
||||
// This handles Safari's timing issues with composition events
|
||||
const isCurrentlyComposing = (e as any).isComposing || isComposing();
|
||||
|
||||
// If IME is composing, prevent dialog from closing
|
||||
if (isCurrentlyComposing) {
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
// Call user's onEscapeKeyDown if provided
|
||||
onEscapeKeyDown?.(e);
|
||||
},
|
||||
[isComposing, onEscapeKeyDown]
|
||||
);
|
||||
|
||||
return (
|
||||
<DialogPortal data-slot="dialog-portal">
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Content
|
||||
data-slot="dialog-content"
|
||||
className={cn(
|
||||
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
|
||||
className
|
||||
)}
|
||||
onEscapeKeyDown={handleEscapeKeyDown}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<DialogPrimitive.Close
|
||||
data-slot="dialog-close"
|
||||
className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
|
||||
>
|
||||
<XIcon />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
);
|
||||
}
|
||||
|
||||
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-header"
|
||||
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-footer"
|
||||
className={cn(
|
||||
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DialogTitle({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
|
||||
return (
|
||||
<DialogPrimitive.Title
|
||||
data-slot="dialog-title"
|
||||
className={cn("text-lg leading-none font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DialogDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
|
||||
return (
|
||||
<DialogPrimitive.Description
|
||||
data-slot="dialog-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogOverlay,
|
||||
DialogPortal,
|
||||
DialogTitle,
|
||||
DialogTrigger
|
||||
};
|
||||
|
||||
@@ -1,133 +0,0 @@
|
||||
import * as React from "react";
|
||||
import { Drawer as DrawerPrimitive } from "vaul";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function Drawer({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
|
||||
return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
|
||||
}
|
||||
|
||||
function DrawerTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
|
||||
return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
|
||||
}
|
||||
|
||||
function DrawerPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
|
||||
return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
|
||||
}
|
||||
|
||||
function DrawerClose({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
|
||||
return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
|
||||
}
|
||||
|
||||
function DrawerOverlay({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
|
||||
return (
|
||||
<DrawerPrimitive.Overlay
|
||||
data-slot="drawer-overlay"
|
||||
className={cn(
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DrawerContent({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
|
||||
return (
|
||||
<DrawerPortal data-slot="drawer-portal">
|
||||
<DrawerOverlay />
|
||||
<DrawerPrimitive.Content
|
||||
data-slot="drawer-content"
|
||||
className={cn(
|
||||
"group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
|
||||
"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
|
||||
"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
|
||||
"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
|
||||
"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
|
||||
{children}
|
||||
</DrawerPrimitive.Content>
|
||||
</DrawerPortal>
|
||||
);
|
||||
}
|
||||
|
||||
function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="drawer-header"
|
||||
className={cn(
|
||||
"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="drawer-footer"
|
||||
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DrawerTitle({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
|
||||
return (
|
||||
<DrawerPrimitive.Title
|
||||
data-slot="drawer-title"
|
||||
className={cn("text-foreground font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DrawerDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
|
||||
return (
|
||||
<DrawerPrimitive.Description
|
||||
data-slot="drawer-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
Drawer,
|
||||
DrawerPortal,
|
||||
DrawerOverlay,
|
||||
DrawerTrigger,
|
||||
DrawerClose,
|
||||
DrawerContent,
|
||||
DrawerHeader,
|
||||
DrawerFooter,
|
||||
DrawerTitle,
|
||||
DrawerDescription,
|
||||
};
|
||||
@@ -1,255 +0,0 @@
|
||||
import * as React from "react";
|
||||
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
|
||||
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function DropdownMenu({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
|
||||
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
|
||||
}
|
||||
|
||||
function DropdownMenuPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Trigger
|
||||
data-slot="dropdown-menu-trigger"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuContent({
|
||||
className,
|
||||
sideOffset = 4,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Portal>
|
||||
<DropdownMenuPrimitive.Content
|
||||
data-slot="dropdown-menu-content"
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</DropdownMenuPrimitive.Portal>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuItem({
|
||||
className,
|
||||
inset,
|
||||
variant = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
|
||||
inset?: boolean;
|
||||
variant?: "default" | "destructive";
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Item
|
||||
data-slot="dropdown-menu-item"
|
||||
data-inset={inset}
|
||||
data-variant={variant}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuCheckboxItem({
|
||||
className,
|
||||
children,
|
||||
checked,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.CheckboxItem
|
||||
data-slot="dropdown-menu-checkbox-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<CheckIcon className="size-4" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.CheckboxItem>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuRadioGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.RadioGroup
|
||||
data-slot="dropdown-menu-radio-group"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuRadioItem({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.RadioItem
|
||||
data-slot="dropdown-menu-radio-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<CircleIcon className="size-2 fill-current" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.RadioItem>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuLabel({
|
||||
className,
|
||||
inset,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
|
||||
inset?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Label
|
||||
data-slot="dropdown-menu-label"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Separator
|
||||
data-slot="dropdown-menu-separator"
|
||||
className={cn("bg-border -mx-1 my-1 h-px", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuShortcut({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
data-slot="dropdown-menu-shortcut"
|
||||
className={cn(
|
||||
"text-muted-foreground ml-auto text-xs tracking-widest",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuSub({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
|
||||
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
|
||||
}
|
||||
|
||||
function DropdownMenuSubTrigger({
|
||||
className,
|
||||
inset,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||
inset?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
data-slot="dropdown-menu-sub-trigger"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRightIcon className="ml-auto size-4" />
|
||||
</DropdownMenuPrimitive.SubTrigger>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuSubContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
data-slot="dropdown-menu-sub-content"
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
DropdownMenu,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuSubContent,
|
||||
};
|
||||
@@ -1,104 +0,0 @@
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function Empty({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="empty"
|
||||
className={cn(
|
||||
"flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="empty-header"
|
||||
className={cn(
|
||||
"flex max-w-sm flex-col items-center gap-2 text-center",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const emptyMediaVariants = cva(
|
||||
"flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-transparent",
|
||||
icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
function EmptyMedia({
|
||||
className,
|
||||
variant = "default",
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="empty-icon"
|
||||
data-variant={variant}
|
||||
className={cn(emptyMediaVariants({ variant, className }))}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="empty-title"
|
||||
className={cn("text-lg font-medium tracking-tight", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="empty-description"
|
||||
className={cn(
|
||||
"text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="empty-content"
|
||||
className={cn(
|
||||
"flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
Empty,
|
||||
EmptyHeader,
|
||||
EmptyTitle,
|
||||
EmptyDescription,
|
||||
EmptyContent,
|
||||
EmptyMedia,
|
||||
};
|
||||
@@ -1,242 +0,0 @@
|
||||
import { useMemo } from "react";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
|
||||
function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
|
||||
return (
|
||||
<fieldset
|
||||
data-slot="field-set"
|
||||
className={cn(
|
||||
"flex flex-col gap-6",
|
||||
"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function FieldLegend({
|
||||
className,
|
||||
variant = "legend",
|
||||
...props
|
||||
}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
|
||||
return (
|
||||
<legend
|
||||
data-slot="field-legend"
|
||||
data-variant={variant}
|
||||
className={cn(
|
||||
"mb-3 font-medium",
|
||||
"data-[variant=legend]:text-base",
|
||||
"data-[variant=label]:text-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="field-group"
|
||||
className={cn(
|
||||
"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const fieldVariants = cva(
|
||||
"group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
|
||||
{
|
||||
variants: {
|
||||
orientation: {
|
||||
vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
|
||||
horizontal: [
|
||||
"flex-row items-center",
|
||||
"[&>[data-slot=field-label]]:flex-auto",
|
||||
"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
|
||||
],
|
||||
responsive: [
|
||||
"flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
|
||||
"@md/field-group:[&>[data-slot=field-label]]:flex-auto",
|
||||
"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
|
||||
],
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
orientation: "vertical",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
function Field({
|
||||
className,
|
||||
orientation = "vertical",
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
|
||||
return (
|
||||
<div
|
||||
role="group"
|
||||
data-slot="field"
|
||||
data-orientation={orientation}
|
||||
className={cn(fieldVariants({ orientation }), className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="field-content"
|
||||
className={cn(
|
||||
"group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function FieldLabel({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof Label>) {
|
||||
return (
|
||||
<Label
|
||||
data-slot="field-label"
|
||||
className={cn(
|
||||
"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
|
||||
"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
|
||||
"has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="field-label"
|
||||
className={cn(
|
||||
"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
|
||||
return (
|
||||
<p
|
||||
data-slot="field-description"
|
||||
className={cn(
|
||||
"text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
|
||||
"last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
|
||||
"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function FieldSeparator({
|
||||
children,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
children?: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="field-separator"
|
||||
data-content={!!children}
|
||||
className={cn(
|
||||
"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<Separator className="absolute inset-0 top-1/2" />
|
||||
{children && (
|
||||
<span
|
||||
className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
|
||||
data-slot="field-separator-content"
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FieldError({
|
||||
className,
|
||||
children,
|
||||
errors,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
errors?: Array<{ message?: string } | undefined>;
|
||||
}) {
|
||||
const content = useMemo(() => {
|
||||
if (children) {
|
||||
return children;
|
||||
}
|
||||
|
||||
if (!errors) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (errors?.length === 1 && errors[0]?.message) {
|
||||
return errors[0].message;
|
||||
}
|
||||
|
||||
return (
|
||||
<ul className="ml-4 flex list-disc flex-col gap-1">
|
||||
{errors.map(
|
||||
(error, index) =>
|
||||
error?.message && <li key={index}>{error.message}</li>
|
||||
)}
|
||||
</ul>
|
||||
);
|
||||
}, [children, errors]);
|
||||
|
||||
if (!content) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
role="alert"
|
||||
data-slot="field-error"
|
||||
className={cn("text-destructive text-sm font-normal", className)}
|
||||
{...props}
|
||||
>
|
||||
{content}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
Field,
|
||||
FieldLabel,
|
||||
FieldDescription,
|
||||
FieldError,
|
||||
FieldGroup,
|
||||
FieldLegend,
|
||||
FieldSeparator,
|
||||
FieldSet,
|
||||
FieldContent,
|
||||
FieldTitle,
|
||||
};
|
||||
@@ -1,168 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import * as LabelPrimitive from "@radix-ui/react-label";
|
||||
import { Slot } from "@radix-ui/react-slot";
|
||||
import {
|
||||
Controller,
|
||||
FormProvider,
|
||||
useFormContext,
|
||||
useFormState,
|
||||
type ControllerProps,
|
||||
type FieldPath,
|
||||
type FieldValues,
|
||||
} from "react-hook-form";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Label } from "@/components/ui/label";
|
||||
|
||||
const Form = FormProvider;
|
||||
|
||||
type FormFieldContextValue<
|
||||
TFieldValues extends FieldValues = FieldValues,
|
||||
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
|
||||
> = {
|
||||
name: TName;
|
||||
};
|
||||
|
||||
const FormFieldContext = React.createContext<FormFieldContextValue>(
|
||||
{} as FormFieldContextValue
|
||||
);
|
||||
|
||||
const FormField = <
|
||||
TFieldValues extends FieldValues = FieldValues,
|
||||
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
|
||||
>({
|
||||
...props
|
||||
}: ControllerProps<TFieldValues, TName>) => {
|
||||
return (
|
||||
<FormFieldContext.Provider value={{ name: props.name }}>
|
||||
<Controller {...props} />
|
||||
</FormFieldContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
const useFormField = () => {
|
||||
const fieldContext = React.useContext(FormFieldContext);
|
||||
const itemContext = React.useContext(FormItemContext);
|
||||
const { getFieldState } = useFormContext();
|
||||
const formState = useFormState({ name: fieldContext.name });
|
||||
const fieldState = getFieldState(fieldContext.name, formState);
|
||||
|
||||
if (!fieldContext) {
|
||||
throw new Error("useFormField should be used within <FormField>");
|
||||
}
|
||||
|
||||
const { id } = itemContext;
|
||||
|
||||
return {
|
||||
id,
|
||||
name: fieldContext.name,
|
||||
formItemId: `${id}-form-item`,
|
||||
formDescriptionId: `${id}-form-item-description`,
|
||||
formMessageId: `${id}-form-item-message`,
|
||||
...fieldState,
|
||||
};
|
||||
};
|
||||
|
||||
type FormItemContextValue = {
|
||||
id: string;
|
||||
};
|
||||
|
||||
const FormItemContext = React.createContext<FormItemContextValue>(
|
||||
{} as FormItemContextValue
|
||||
);
|
||||
|
||||
function FormItem({ className, ...props }: React.ComponentProps<"div">) {
|
||||
const id = React.useId();
|
||||
|
||||
return (
|
||||
<FormItemContext.Provider value={{ id }}>
|
||||
<div
|
||||
data-slot="form-item"
|
||||
className={cn("grid gap-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
</FormItemContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
function FormLabel({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
||||
const { error, formItemId } = useFormField();
|
||||
|
||||
return (
|
||||
<Label
|
||||
data-slot="form-label"
|
||||
data-error={!!error}
|
||||
className={cn("data-[error=true]:text-destructive", className)}
|
||||
htmlFor={formItemId}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
|
||||
const { error, formItemId, formDescriptionId, formMessageId } =
|
||||
useFormField();
|
||||
|
||||
return (
|
||||
<Slot
|
||||
data-slot="form-control"
|
||||
id={formItemId}
|
||||
aria-describedby={
|
||||
!error
|
||||
? `${formDescriptionId}`
|
||||
: `${formDescriptionId} ${formMessageId}`
|
||||
}
|
||||
aria-invalid={!!error}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
|
||||
const { formDescriptionId } = useFormField();
|
||||
|
||||
return (
|
||||
<p
|
||||
data-slot="form-description"
|
||||
id={formDescriptionId}
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
|
||||
const { error, formMessageId } = useFormField();
|
||||
const body = error ? String(error?.message ?? "") : props.children;
|
||||
|
||||
if (!body) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<p
|
||||
data-slot="form-message"
|
||||
id={formMessageId}
|
||||
className={cn("text-destructive text-sm", className)}
|
||||
{...props}
|
||||
>
|
||||
{body}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
useFormField,
|
||||
Form,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormMessage,
|
||||
FormField,
|
||||
};
|
||||
@@ -1,42 +0,0 @@
|
||||
import * as React from "react";
|
||||
import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function HoverCard({
|
||||
...props
|
||||
}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
|
||||
return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
|
||||
}
|
||||
|
||||
function HoverCardTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
|
||||
return (
|
||||
<HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function HoverCardContent({
|
||||
className,
|
||||
align = "center",
|
||||
sideOffset = 4,
|
||||
...props
|
||||
}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
|
||||
return (
|
||||
<HoverCardPrimitive.Portal data-slot="hover-card-portal">
|
||||
<HoverCardPrimitive.Content
|
||||
data-slot="hover-card-content"
|
||||
align={align}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</HoverCardPrimitive.Portal>
|
||||
);
|
||||
}
|
||||
|
||||
export { HoverCard, HoverCardTrigger, HoverCardContent };
|
||||
@@ -1,168 +0,0 @@
|
||||
import * as React from "react";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
|
||||
function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="input-group"
|
||||
role="group"
|
||||
className={cn(
|
||||
"group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none",
|
||||
"h-9 min-w-0 has-[>textarea]:h-auto",
|
||||
|
||||
// Variants based on alignment.
|
||||
"has-[>[data-align=inline-start]]:[&>input]:pl-2",
|
||||
"has-[>[data-align=inline-end]]:[&>input]:pr-2",
|
||||
"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
|
||||
"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
|
||||
|
||||
// Focus state.
|
||||
"has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
|
||||
|
||||
// Error state.
|
||||
"has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
|
||||
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const inputGroupAddonVariants = cva(
|
||||
"text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
|
||||
{
|
||||
variants: {
|
||||
align: {
|
||||
"inline-start":
|
||||
"order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
|
||||
"inline-end":
|
||||
"order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
|
||||
"block-start":
|
||||
"order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
|
||||
"block-end":
|
||||
"order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
align: "inline-start",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
function InputGroupAddon({
|
||||
className,
|
||||
align = "inline-start",
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
|
||||
return (
|
||||
<div
|
||||
role="group"
|
||||
data-slot="input-group-addon"
|
||||
data-align={align}
|
||||
className={cn(inputGroupAddonVariants({ align }), className)}
|
||||
onClick={e => {
|
||||
if ((e.target as HTMLElement).closest("button")) {
|
||||
return;
|
||||
}
|
||||
e.currentTarget.parentElement?.querySelector("input")?.focus();
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const inputGroupButtonVariants = cva(
|
||||
"text-sm shadow-none flex gap-2 items-center",
|
||||
{
|
||||
variants: {
|
||||
size: {
|
||||
xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
|
||||
sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
|
||||
"icon-xs":
|
||||
"size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
|
||||
"icon-sm": "size-8 p-0 has-[>svg]:p-0",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
size: "xs",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
function InputGroupButton({
|
||||
className,
|
||||
type = "button",
|
||||
variant = "ghost",
|
||||
size = "xs",
|
||||
...props
|
||||
}: Omit<React.ComponentProps<typeof Button>, "size"> &
|
||||
VariantProps<typeof inputGroupButtonVariants>) {
|
||||
return (
|
||||
<Button
|
||||
type={type}
|
||||
data-size={size}
|
||||
variant={variant}
|
||||
className={cn(inputGroupButtonVariants({ size }), className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function InputGroupInput({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"input">) {
|
||||
return (
|
||||
<Input
|
||||
data-slot="input-group-control"
|
||||
className={cn(
|
||||
"flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function InputGroupTextarea({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"textarea">) {
|
||||
return (
|
||||
<Textarea
|
||||
data-slot="input-group-control"
|
||||
className={cn(
|
||||
"flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
InputGroup,
|
||||
InputGroupAddon,
|
||||
InputGroupButton,
|
||||
InputGroupText,
|
||||
InputGroupInput,
|
||||
InputGroupTextarea,
|
||||
};
|
||||
@@ -1,75 +0,0 @@
|
||||
import * as React from "react";
|
||||
import { OTPInput, OTPInputContext } from "input-otp";
|
||||
import { MinusIcon } from "lucide-react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function InputOTP({
|
||||
className,
|
||||
containerClassName,
|
||||
...props
|
||||
}: React.ComponentProps<typeof OTPInput> & {
|
||||
containerClassName?: string;
|
||||
}) {
|
||||
return (
|
||||
<OTPInput
|
||||
data-slot="input-otp"
|
||||
containerClassName={cn(
|
||||
"flex items-center gap-2 has-disabled:opacity-50",
|
||||
containerClassName
|
||||
)}
|
||||
className={cn("disabled:cursor-not-allowed", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="input-otp-group"
|
||||
className={cn("flex items-center", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function InputOTPSlot({
|
||||
index,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
index: number;
|
||||
}) {
|
||||
const inputOTPContext = React.useContext(OTPInputContext);
|
||||
const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
|
||||
|
||||
return (
|
||||
<div
|
||||
data-slot="input-otp-slot"
|
||||
data-active={isActive}
|
||||
className={cn(
|
||||
"data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{char}
|
||||
{hasFakeCaret && (
|
||||
<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
|
||||
<div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div data-slot="input-otp-separator" role="separator" {...props}>
|
||||
<MinusIcon />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
|
||||
@@ -1,70 +0,0 @@
|
||||
import { useDialogComposition } from "@/components/ui/dialog";
|
||||
import { useComposition } from "@/hooks/useComposition";
|
||||
import { cn } from "@/lib/utils";
|
||||
import * as React from "react";
|
||||
|
||||
function Input({
|
||||
className,
|
||||
type,
|
||||
onKeyDown,
|
||||
onCompositionStart,
|
||||
onCompositionEnd,
|
||||
...props
|
||||
}: React.ComponentProps<"input">) {
|
||||
// Get dialog composition context if available (will be no-op if not inside Dialog)
|
||||
const dialogComposition = useDialogComposition();
|
||||
|
||||
// Add composition event handlers to support input method editor (IME) for CJK languages.
|
||||
const {
|
||||
onCompositionStart: handleCompositionStart,
|
||||
onCompositionEnd: handleCompositionEnd,
|
||||
onKeyDown: handleKeyDown,
|
||||
} = useComposition<HTMLInputElement>({
|
||||
onKeyDown: (e) => {
|
||||
// Check if this is an Enter key that should be blocked
|
||||
const isComposing = (e.nativeEvent as any).isComposing || dialogComposition.justEndedComposing();
|
||||
|
||||
// If Enter key is pressed while composing or just after composition ended,
|
||||
// don't call the user's onKeyDown (this blocks the business logic)
|
||||
if (e.key === "Enter" && isComposing) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Otherwise, call the user's onKeyDown
|
||||
onKeyDown?.(e);
|
||||
},
|
||||
onCompositionStart: e => {
|
||||
dialogComposition.setComposing(true);
|
||||
onCompositionStart?.(e);
|
||||
},
|
||||
onCompositionEnd: e => {
|
||||
// Mark that composition just ended - this helps handle the Enter key that confirms input
|
||||
dialogComposition.markCompositionEnd();
|
||||
// Delay setting composing to false to handle Safari's event order
|
||||
// In Safari, compositionEnd fires before the ESC keydown event
|
||||
setTimeout(() => {
|
||||
dialogComposition.setComposing(false);
|
||||
}, 100);
|
||||
onCompositionEnd?.(e);
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
data-slot="input"
|
||||
className={cn(
|
||||
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
||||
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
className
|
||||
)}
|
||||
onCompositionStart={handleCompositionStart}
|
||||
onCompositionEnd={handleCompositionEnd}
|
||||
onKeyDown={handleKeyDown}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { Input };
|
||||
@@ -1,193 +0,0 @@
|
||||
import * as React from "react";
|
||||
import { Slot } from "@radix-ui/react-slot";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
|
||||
function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
role="list"
|
||||
data-slot="item-group"
|
||||
className={cn("group/item-group flex flex-col", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function ItemSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof Separator>) {
|
||||
return (
|
||||
<Separator
|
||||
data-slot="item-separator"
|
||||
orientation="horizontal"
|
||||
className={cn("my-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const itemVariants = cva(
|
||||
"group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-transparent",
|
||||
outline: "border-border",
|
||||
muted: "bg-muted/50",
|
||||
},
|
||||
size: {
|
||||
default: "p-4 gap-4 ",
|
||||
sm: "py-3 px-4 gap-2.5",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
function Item({
|
||||
className,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> &
|
||||
VariantProps<typeof itemVariants> & { asChild?: boolean }) {
|
||||
const Comp = asChild ? Slot : "div";
|
||||
return (
|
||||
<Comp
|
||||
data-slot="item"
|
||||
data-variant={variant}
|
||||
data-size={size}
|
||||
className={cn(itemVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const itemMediaVariants = cva(
|
||||
"flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-transparent",
|
||||
icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
|
||||
image:
|
||||
"size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
function ItemMedia({
|
||||
className,
|
||||
variant = "default",
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="item-media"
|
||||
data-variant={variant}
|
||||
className={cn(itemMediaVariants({ variant, className }))}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="item-content"
|
||||
className={cn(
|
||||
"flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="item-title"
|
||||
className={cn(
|
||||
"flex w-fit items-center gap-2 text-sm leading-snug font-medium",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
|
||||
return (
|
||||
<p
|
||||
data-slot="item-description"
|
||||
className={cn(
|
||||
"text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance",
|
||||
"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="item-actions"
|
||||
className={cn("flex items-center gap-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="item-header"
|
||||
className={cn(
|
||||
"flex basis-full items-center justify-between gap-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="item-footer"
|
||||
className={cn(
|
||||
"flex basis-full items-center justify-between gap-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
Item,
|
||||
ItemMedia,
|
||||
ItemContent,
|
||||
ItemActions,
|
||||
ItemGroup,
|
||||
ItemSeparator,
|
||||
ItemTitle,
|
||||
ItemDescription,
|
||||
ItemHeader,
|
||||
ItemFooter,
|
||||
};
|
||||
@@ -1,28 +0,0 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
|
||||
return (
|
||||
<kbd
|
||||
data-slot="kbd"
|
||||
className={cn(
|
||||
"bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none",
|
||||
"[&_svg:not([class*='size-'])]:size-3",
|
||||
"[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<kbd
|
||||
data-slot="kbd-group"
|
||||
className={cn("inline-flex items-center gap-1", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { Kbd, KbdGroup };
|
||||
@@ -1,22 +0,0 @@
|
||||
import * as React from "react";
|
||||
import * as LabelPrimitive from "@radix-ui/react-label";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function Label({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
||||
return (
|
||||
<LabelPrimitive.Root
|
||||
data-slot="label"
|
||||
className={cn(
|
||||
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { Label };
|
||||
@@ -1,274 +0,0 @@
|
||||
import * as React from "react";
|
||||
import * as MenubarPrimitive from "@radix-ui/react-menubar";
|
||||
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function Menubar({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
|
||||
return (
|
||||
<MenubarPrimitive.Root
|
||||
data-slot="menubar"
|
||||
className={cn(
|
||||
"bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function MenubarMenu({
|
||||
...props
|
||||
}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
|
||||
return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />;
|
||||
}
|
||||
|
||||
function MenubarGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
|
||||
return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />;
|
||||
}
|
||||
|
||||
function MenubarPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
|
||||
return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />;
|
||||
}
|
||||
|
||||
function MenubarRadioGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
|
||||
return (
|
||||
<MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function MenubarTrigger({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
|
||||
return (
|
||||
<MenubarPrimitive.Trigger
|
||||
data-slot="menubar-trigger"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function MenubarContent({
|
||||
className,
|
||||
align = "start",
|
||||
alignOffset = -4,
|
||||
sideOffset = 8,
|
||||
...props
|
||||
}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
|
||||
return (
|
||||
<MenubarPortal>
|
||||
<MenubarPrimitive.Content
|
||||
data-slot="menubar-content"
|
||||
align={align}
|
||||
alignOffset={alignOffset}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</MenubarPortal>
|
||||
);
|
||||
}
|
||||
|
||||
function MenubarItem({
|
||||
className,
|
||||
inset,
|
||||
variant = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
|
||||
inset?: boolean;
|
||||
variant?: "default" | "destructive";
|
||||
}) {
|
||||
return (
|
||||
<MenubarPrimitive.Item
|
||||
data-slot="menubar-item"
|
||||
data-inset={inset}
|
||||
data-variant={variant}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function MenubarCheckboxItem({
|
||||
className,
|
||||
children,
|
||||
checked,
|
||||
...props
|
||||
}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
|
||||
return (
|
||||
<MenubarPrimitive.CheckboxItem
|
||||
data-slot="menubar-checkbox-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||
<MenubarPrimitive.ItemIndicator>
|
||||
<CheckIcon className="size-4" />
|
||||
</MenubarPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</MenubarPrimitive.CheckboxItem>
|
||||
);
|
||||
}
|
||||
|
||||
function MenubarRadioItem({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
|
||||
return (
|
||||
<MenubarPrimitive.RadioItem
|
||||
data-slot="menubar-radio-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||
<MenubarPrimitive.ItemIndicator>
|
||||
<CircleIcon className="size-2 fill-current" />
|
||||
</MenubarPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</MenubarPrimitive.RadioItem>
|
||||
);
|
||||
}
|
||||
|
||||
function MenubarLabel({
|
||||
className,
|
||||
inset,
|
||||
...props
|
||||
}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
|
||||
inset?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<MenubarPrimitive.Label
|
||||
data-slot="menubar-label"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function MenubarSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
|
||||
return (
|
||||
<MenubarPrimitive.Separator
|
||||
data-slot="menubar-separator"
|
||||
className={cn("bg-border -mx-1 my-1 h-px", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function MenubarShortcut({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
data-slot="menubar-shortcut"
|
||||
className={cn(
|
||||
"text-muted-foreground ml-auto text-xs tracking-widest",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function MenubarSub({
|
||||
...props
|
||||
}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
|
||||
return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />;
|
||||
}
|
||||
|
||||
function MenubarSubTrigger({
|
||||
className,
|
||||
inset,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
|
||||
inset?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<MenubarPrimitive.SubTrigger
|
||||
data-slot="menubar-sub-trigger"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRightIcon className="ml-auto h-4 w-4" />
|
||||
</MenubarPrimitive.SubTrigger>
|
||||
);
|
||||
}
|
||||
|
||||
function MenubarSubContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
|
||||
return (
|
||||
<MenubarPrimitive.SubContent
|
||||
data-slot="menubar-sub-content"
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
Menubar,
|
||||
MenubarPortal,
|
||||
MenubarMenu,
|
||||
MenubarTrigger,
|
||||
MenubarContent,
|
||||
MenubarGroup,
|
||||
MenubarSeparator,
|
||||
MenubarLabel,
|
||||
MenubarItem,
|
||||
MenubarShortcut,
|
||||
MenubarCheckboxItem,
|
||||
MenubarRadioGroup,
|
||||
MenubarRadioItem,
|
||||
MenubarSub,
|
||||
MenubarSubTrigger,
|
||||
MenubarSubContent,
|
||||
};
|
||||
@@ -1,168 +0,0 @@
|
||||
import * as React from "react";
|
||||
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
|
||||
import { cva } from "class-variance-authority";
|
||||
import { ChevronDownIcon } from "lucide-react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function NavigationMenu({
|
||||
className,
|
||||
children,
|
||||
viewport = true,
|
||||
...props
|
||||
}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
|
||||
viewport?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<NavigationMenuPrimitive.Root
|
||||
data-slot="navigation-menu"
|
||||
data-viewport={viewport}
|
||||
className={cn(
|
||||
"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{viewport && <NavigationMenuViewport />}
|
||||
</NavigationMenuPrimitive.Root>
|
||||
);
|
||||
}
|
||||
|
||||
function NavigationMenuList({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
|
||||
return (
|
||||
<NavigationMenuPrimitive.List
|
||||
data-slot="navigation-menu-list"
|
||||
className={cn(
|
||||
"group flex flex-1 list-none items-center justify-center gap-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function NavigationMenuItem({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
|
||||
return (
|
||||
<NavigationMenuPrimitive.Item
|
||||
data-slot="navigation-menu-item"
|
||||
className={cn("relative", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const navigationMenuTriggerStyle = cva(
|
||||
"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
|
||||
);
|
||||
|
||||
function NavigationMenuTrigger({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
|
||||
return (
|
||||
<NavigationMenuPrimitive.Trigger
|
||||
data-slot="navigation-menu-trigger"
|
||||
className={cn(navigationMenuTriggerStyle(), "group", className)}
|
||||
{...props}
|
||||
>
|
||||
{children}{" "}
|
||||
<ChevronDownIcon
|
||||
className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</NavigationMenuPrimitive.Trigger>
|
||||
);
|
||||
}
|
||||
|
||||
function NavigationMenuContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
|
||||
return (
|
||||
<NavigationMenuPrimitive.Content
|
||||
data-slot="navigation-menu-content"
|
||||
className={cn(
|
||||
"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
|
||||
"group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function NavigationMenuViewport({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"absolute top-full left-0 isolate z-50 flex justify-center"
|
||||
)}
|
||||
>
|
||||
<NavigationMenuPrimitive.Viewport
|
||||
data-slot="navigation-menu-viewport"
|
||||
className={cn(
|
||||
"origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function NavigationMenuLink({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
|
||||
return (
|
||||
<NavigationMenuPrimitive.Link
|
||||
data-slot="navigation-menu-link"
|
||||
className={cn(
|
||||
"data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function NavigationMenuIndicator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
|
||||
return (
|
||||
<NavigationMenuPrimitive.Indicator
|
||||
data-slot="navigation-menu-indicator"
|
||||
className={cn(
|
||||
"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
|
||||
</NavigationMenuPrimitive.Indicator>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
NavigationMenu,
|
||||
NavigationMenuList,
|
||||
NavigationMenuItem,
|
||||
NavigationMenuContent,
|
||||
NavigationMenuTrigger,
|
||||
NavigationMenuLink,
|
||||
NavigationMenuIndicator,
|
||||
NavigationMenuViewport,
|
||||
navigationMenuTriggerStyle,
|
||||
};
|
||||
@@ -1,127 +0,0 @@
|
||||
import * as React from "react";
|
||||
import {
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
MoreHorizontalIcon,
|
||||
} from "lucide-react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button, buttonVariants } from "@/components/ui/button";
|
||||
|
||||
function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
|
||||
return (
|
||||
<nav
|
||||
role="navigation"
|
||||
aria-label="pagination"
|
||||
data-slot="pagination"
|
||||
className={cn("mx-auto flex w-full justify-center", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function PaginationContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"ul">) {
|
||||
return (
|
||||
<ul
|
||||
data-slot="pagination-content"
|
||||
className={cn("flex flex-row items-center gap-1", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function PaginationItem({ ...props }: React.ComponentProps<"li">) {
|
||||
return <li data-slot="pagination-item" {...props} />;
|
||||
}
|
||||
|
||||
type PaginationLinkProps = {
|
||||
isActive?: boolean;
|
||||
} & Pick<React.ComponentProps<typeof Button>, "size"> &
|
||||
React.ComponentProps<"a">;
|
||||
|
||||
function PaginationLink({
|
||||
className,
|
||||
isActive,
|
||||
size = "icon",
|
||||
...props
|
||||
}: PaginationLinkProps) {
|
||||
return (
|
||||
<a
|
||||
aria-current={isActive ? "page" : undefined}
|
||||
data-slot="pagination-link"
|
||||
data-active={isActive}
|
||||
className={cn(
|
||||
buttonVariants({
|
||||
variant: isActive ? "outline" : "ghost",
|
||||
size,
|
||||
}),
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function PaginationPrevious({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof PaginationLink>) {
|
||||
return (
|
||||
<PaginationLink
|
||||
aria-label="Go to previous page"
|
||||
size="default"
|
||||
className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronLeftIcon />
|
||||
<span className="hidden sm:block">Previous</span>
|
||||
</PaginationLink>
|
||||
);
|
||||
}
|
||||
|
||||
function PaginationNext({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof PaginationLink>) {
|
||||
return (
|
||||
<PaginationLink
|
||||
aria-label="Go to next page"
|
||||
size="default"
|
||||
className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
|
||||
{...props}
|
||||
>
|
||||
<span className="hidden sm:block">Next</span>
|
||||
<ChevronRightIcon />
|
||||
</PaginationLink>
|
||||
);
|
||||
}
|
||||
|
||||
function PaginationEllipsis({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
aria-hidden
|
||||
data-slot="pagination-ellipsis"
|
||||
className={cn("flex size-9 items-center justify-center", className)}
|
||||
{...props}
|
||||
>
|
||||
<MoreHorizontalIcon className="size-4" />
|
||||
<span className="sr-only">More pages</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationLink,
|
||||
PaginationItem,
|
||||
PaginationPrevious,
|
||||
PaginationNext,
|
||||
PaginationEllipsis,
|
||||
};
|
||||
@@ -1,46 +0,0 @@
|
||||
import * as React from "react";
|
||||
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function Popover({
|
||||
...props
|
||||
}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
|
||||
return <PopoverPrimitive.Root data-slot="popover" {...props} />;
|
||||
}
|
||||
|
||||
function PopoverTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
|
||||
return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
|
||||
}
|
||||
|
||||
function PopoverContent({
|
||||
className,
|
||||
align = "center",
|
||||
sideOffset = 4,
|
||||
...props
|
||||
}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
|
||||
return (
|
||||
<PopoverPrimitive.Portal>
|
||||
<PopoverPrimitive.Content
|
||||
data-slot="popover-content"
|
||||
align={align}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</PopoverPrimitive.Portal>
|
||||
);
|
||||
}
|
||||
|
||||
function PopoverAnchor({
|
||||
...props
|
||||
}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
|
||||
return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
|
||||
}
|
||||
|
||||
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
|
||||
@@ -1,29 +0,0 @@
|
||||
import * as React from "react";
|
||||
import * as ProgressPrimitive from "@radix-ui/react-progress";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function Progress({
|
||||
className,
|
||||
value,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
|
||||
return (
|
||||
<ProgressPrimitive.Root
|
||||
data-slot="progress"
|
||||
className={cn(
|
||||
"bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ProgressPrimitive.Indicator
|
||||
data-slot="progress-indicator"
|
||||
className="bg-primary h-full w-full flex-1 transition-all"
|
||||
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
|
||||
/>
|
||||
</ProgressPrimitive.Root>
|
||||
);
|
||||
}
|
||||
|
||||
export { Progress };
|
||||
@@ -1,43 +0,0 @@
|
||||
import * as React from "react";
|
||||
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
|
||||
import { CircleIcon } from "lucide-react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function RadioGroup({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
|
||||
return (
|
||||
<RadioGroupPrimitive.Root
|
||||
data-slot="radio-group"
|
||||
className={cn("grid gap-3", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function RadioGroupItem({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
|
||||
return (
|
||||
<RadioGroupPrimitive.Item
|
||||
data-slot="radio-group-item"
|
||||
className={cn(
|
||||
"border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<RadioGroupPrimitive.Indicator
|
||||
data-slot="radio-group-indicator"
|
||||
className="relative flex items-center justify-center"
|
||||
>
|
||||
<CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
|
||||
</RadioGroupPrimitive.Indicator>
|
||||
</RadioGroupPrimitive.Item>
|
||||
);
|
||||
}
|
||||
|
||||
export { RadioGroup, RadioGroupItem };
|
||||
@@ -1,54 +0,0 @@
|
||||
import * as React from "react";
|
||||
import { GripVerticalIcon } from "lucide-react";
|
||||
import * as ResizablePrimitive from "react-resizable-panels";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function ResizablePanelGroup({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
|
||||
return (
|
||||
<ResizablePrimitive.PanelGroup
|
||||
data-slot="resizable-panel-group"
|
||||
className={cn(
|
||||
"flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function ResizablePanel({
|
||||
...props
|
||||
}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
|
||||
return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
|
||||
}
|
||||
|
||||
function ResizableHandle({
|
||||
withHandle,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
|
||||
withHandle?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<ResizablePrimitive.PanelResizeHandle
|
||||
data-slot="resizable-handle"
|
||||
className={cn(
|
||||
"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{withHandle && (
|
||||
<div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
|
||||
<GripVerticalIcon className="size-2.5" />
|
||||
</div>
|
||||
)}
|
||||
</ResizablePrimitive.PanelResizeHandle>
|
||||
);
|
||||
}
|
||||
|
||||
export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
|
||||
@@ -1,56 +0,0 @@
|
||||
import * as React from "react";
|
||||
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function ScrollArea({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
|
||||
return (
|
||||
<ScrollAreaPrimitive.Root
|
||||
data-slot="scroll-area"
|
||||
className={cn("relative", className)}
|
||||
{...props}
|
||||
>
|
||||
<ScrollAreaPrimitive.Viewport
|
||||
data-slot="scroll-area-viewport"
|
||||
className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
|
||||
>
|
||||
{children}
|
||||
</ScrollAreaPrimitive.Viewport>
|
||||
<ScrollBar />
|
||||
<ScrollAreaPrimitive.Corner />
|
||||
</ScrollAreaPrimitive.Root>
|
||||
);
|
||||
}
|
||||
|
||||
function ScrollBar({
|
||||
className,
|
||||
orientation = "vertical",
|
||||
...props
|
||||
}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
|
||||
return (
|
||||
<ScrollAreaPrimitive.ScrollAreaScrollbar
|
||||
data-slot="scroll-area-scrollbar"
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"flex touch-none p-px transition-colors select-none",
|
||||
orientation === "vertical" &&
|
||||
"h-full w-2.5 border-l border-l-transparent",
|
||||
orientation === "horizontal" &&
|
||||
"h-2.5 flex-col border-t border-t-transparent",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ScrollAreaPrimitive.ScrollAreaThumb
|
||||
data-slot="scroll-area-thumb"
|
||||
className="bg-border relative flex-1 rounded-full"
|
||||
/>
|
||||
</ScrollAreaPrimitive.ScrollAreaScrollbar>
|
||||
);
|
||||
}
|
||||
|
||||
export { ScrollArea, ScrollBar };
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user