slides-grab 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/AGENTS.md +80 -0
  2. package/LICENSE +21 -0
  3. package/PROGRESS.md +39 -0
  4. package/README.md +120 -0
  5. package/SETUP.md +51 -0
  6. package/bin/ppt-agent.js +204 -0
  7. package/convert.cjs +184 -0
  8. package/package.json +51 -0
  9. package/prd.json +135 -0
  10. package/prd.md +104 -0
  11. package/scripts/editor-server.js +779 -0
  12. package/scripts/html2pdf.js +217 -0
  13. package/scripts/validate-slides.js +416 -0
  14. package/skills/ppt-design-skill/SKILL.md +38 -0
  15. package/skills/ppt-plan-skill/SKILL.md +37 -0
  16. package/skills/ppt-pptx-skill/SKILL.md +37 -0
  17. package/skills/ppt-presentation-skill/SKILL.md +57 -0
  18. package/src/editor/codex-edit.js +213 -0
  19. package/src/editor/editor.html +1733 -0
  20. package/src/editor/js/editor-bbox.js +332 -0
  21. package/src/editor/js/editor-chat.js +56 -0
  22. package/src/editor/js/editor-direct-edit.js +110 -0
  23. package/src/editor/js/editor-dom.js +55 -0
  24. package/src/editor/js/editor-init.js +284 -0
  25. package/src/editor/js/editor-navigation.js +54 -0
  26. package/src/editor/js/editor-select.js +264 -0
  27. package/src/editor/js/editor-send.js +157 -0
  28. package/src/editor/js/editor-sse.js +163 -0
  29. package/src/editor/js/editor-state.js +32 -0
  30. package/src/editor/js/editor-utils.js +167 -0
  31. package/src/editor/screenshot.js +73 -0
  32. package/src/resolve.js +159 -0
  33. package/templates/chart.html +121 -0
  34. package/templates/closing.html +54 -0
  35. package/templates/content.html +50 -0
  36. package/templates/contents.html +60 -0
  37. package/templates/cover.html +64 -0
  38. package/templates/custom/.gitkeep +0 -0
  39. package/templates/custom/README.md +7 -0
  40. package/templates/diagram.html +98 -0
  41. package/templates/quote.html +31 -0
  42. package/templates/section-divider.html +43 -0
  43. package/templates/split-layout.html +41 -0
  44. package/templates/statistics.html +55 -0
  45. package/templates/team.html +49 -0
  46. package/templates/timeline.html +59 -0
  47. package/themes/corporate.css +8 -0
  48. package/themes/executive.css +10 -0
  49. package/themes/modern-dark.css +9 -0
  50. package/themes/sage.css +9 -0
  51. package/themes/warm.css +8 -0
package/templates/section-divider.html ADDED
@@ -0,0 +1,43 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
5
+ <style>
6
+ * { margin: 0; padding: 0; box-sizing: border-box; }
7
+ body {
8
+ width: 720pt;
9
+ height: 405pt;
10
+ font-family: 'Pretendard', sans-serif;
11
+ background: #1a1a1a;
12
+ padding: 48pt;
13
+ display: flex;
14
+ flex-direction: column;
15
+ justify-content: space-between;
16
+ }
17
+ </style>
18
+ </head>
19
+ <body>
20
+ <!-- 상단 섹션 정보 -->
21
+ <div style="display: flex; justify-content: space-between; align-items: flex-start;">
22
+ <div>
23
+ <p style="display: inline-block; padding: 4pt 10pt; background: #fff; color: #1a1a1a; border-radius: 4pt; font-size: 8pt; font-weight: 600;">SECTION 1</p>
24
+ </div>
25
+ <p style="font-size: 9pt; color: #666;">©2025 YOUR BRAND</p>
26
+ </div>
27
+
28
+ <!-- 메인 타이틀 -->
29
+ <div>
30
+ <h1 style="font-size: 64pt; font-weight: 500; color: #ffffff; letter-spacing: -0.02em; line-height: 1.1;">
31
+ Introduction
32
+ </h1>
33
+ <p style="font-size: 16pt; color: #888; margin-top: 16pt; max-width: 400pt; line-height: 1.6;">
34
+ Brief description of what this section covers and why it matters.
35
+ </p>
36
+ </div>
37
+
38
+ <!-- 페이지 번호 -->
39
+ <div style="display: flex; justify-content: flex-end;">
40
+ <p style="font-size: 10pt; color: #666;">01</p>
41
+ </div>
42
+ </body>
43
+ </html>
package/templates/split-layout.html ADDED
@@ -0,0 +1,41 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
5
+ <style>
6
+ * { margin: 0; padding: 0; box-sizing: border-box; }
7
+ body {
8
+ width: 720pt;
9
+ height: 405pt;
10
+ font-family: 'Pretendard', sans-serif;
11
+ background: #ffffff;
12
+ display: grid;
13
+ grid-template-columns: 1fr 1fr;
14
+ }
15
+ </style>
16
+ </head>
17
+ <body>
18
+ <!-- 이미지 영역 -->
19
+ <div style="background: #e5e5e0; display: flex; align-items: center; justify-content: center; position: relative;">
20
+ <div data-image-placeholder style="width: 100%; height: 100%; background: linear-gradient(135deg, #d0d0c8 0%, #b8b8b0 100%);"></div>
21
+ <p style="position: absolute; bottom: 16pt; left: 16pt; font-size: 9pt; color: #666;">©2025 YOUR BRAND</p>
22
+ </div>
23
+
24
+ <!-- 텍스트 영역 -->
25
+ <div style="padding: 48pt; display: flex; flex-direction: column; justify-content: center;">
26
+ <p style="display: inline-block; padding: 4pt 10pt; background: #1a1a1a; color: #fff; border-radius: 4pt; font-size: 8pt; font-weight: 600; margin-bottom: 24pt; align-self: flex-start;">FEATURE</p>
27
+ <h2 style="font-size: 32pt; font-weight: 600; color: #1a1a1a; letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 20pt;">
28
+ Transform Your Business
29
+ </h2>
30
+ <p style="font-size: 14pt; color: #666; line-height: 1.7;">
31
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
32
+ </p>
33
+ <div style="margin-top: 32pt; display: flex; align-items: center; gap: 12pt;">
34
+ <p style="font-size: 12pt; font-weight: 500; color: #1a1a1a;">Learn more</p>
35
+ <div style="width: 28pt; height: 28pt; border: 1px solid #1a1a1a; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
36
+ <p style="font-size: 12pt; color: #1a1a1a;">→</p>
37
+ </div>
38
+ </div>
39
+ </div>
40
+ </body>
41
+ </html>
package/templates/statistics.html ADDED
@@ -0,0 +1,55 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
5
+ <style>
6
+ * { margin: 0; padding: 0; box-sizing: border-box; }
7
+ body {
8
+ width: 720pt;
9
+ height: 405pt;
10
+ font-family: 'Pretendard', sans-serif;
11
+ background: #f5f5f0;
12
+ padding: 40pt 48pt;
13
+ display: flex;
14
+ flex-direction: column;
15
+ }
16
+ </style>
17
+ </head>
18
+ <body>
19
+ <!-- 헤더 -->
20
+ <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 32pt;">
21
+ <h2 style="font-size: 28pt; font-weight: 600; color: #1a1a1a;">Key Metrics</h2>
22
+ <p style="font-size: 10pt; color: #999;">03</p>
23
+ </div>
24
+
25
+ <!-- 통계 카드 그리드 -->
26
+ <div style="flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24pt;">
27
+ <div style="background: #1a1a1a; border-radius: 12pt; padding: 28pt; display: flex; flex-direction: column; justify-content: space-between;">
28
+ <p style="font-size: 10pt; color: #888; text-transform: uppercase; letter-spacing: 0.05em;">Revenue Growth</p>
29
+ <div>
30
+ <p style="font-size: 48pt; font-weight: 600; color: #ffffff; letter-spacing: -0.02em;">85%</p>
31
+ <p style="font-size: 11pt; color: #666; margin-top: 8pt;">Year over year</p>
32
+ </div>
33
+ </div>
34
+ <div style="background: #ffffff; border-radius: 12pt; padding: 28pt; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #e5e5e0;">
35
+ <p style="font-size: 10pt; color: #888; text-transform: uppercase; letter-spacing: 0.05em;">Active Users</p>
36
+ <div>
37
+ <p style="font-size: 48pt; font-weight: 600; color: #1a1a1a; letter-spacing: -0.02em;">2.4M</p>
38
+ <p style="font-size: 11pt; color: #888; margin-top: 8pt;">+340K this quarter</p>
39
+ </div>
40
+ </div>
41
+ <div style="background: #ffffff; border-radius: 12pt; padding: 28pt; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #e5e5e0;">
42
+ <p style="font-size: 10pt; color: #888; text-transform: uppercase; letter-spacing: 0.05em;">Customer Satisfaction</p>
43
+ <div>
44
+ <p style="font-size: 48pt; font-weight: 600; color: #1a1a1a; letter-spacing: -0.02em;">4.9</p>
45
+ <p style="font-size: 11pt; color: #888; margin-top: 8pt;">Out of 5.0 rating</p>
46
+ </div>
47
+ </div>
48
+ </div>
49
+
50
+ <!-- 푸터 -->
51
+ <div style="display: flex; justify-content: flex-end; padding-top: 16pt;">
52
+ <p style="font-size: 9pt; color: #999;">Source: Internal Analytics 2025</p>
53
+ </div>
54
+ </body>
55
+ </html>
package/templates/team.html ADDED
@@ -0,0 +1,49 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
5
+ <style>
6
+ * { margin: 0; padding: 0; box-sizing: border-box; }
7
+ body {
8
+ width: 720pt;
9
+ height: 405pt;
10
+ font-family: 'Pretendard', sans-serif;
11
+ background: #f5f5f0;
12
+ padding: 40pt 48pt;
13
+ display: flex;
14
+ flex-direction: column;
15
+ }
16
+ </style>
17
+ </head>
18
+ <body>
19
+ <!-- 헤더 -->
20
+ <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 32pt;">
21
+ <h2 style="font-size: 28pt; font-weight: 600; color: #1a1a1a;">Our Team</h2>
22
+ <p style="font-size: 10pt; color: #999;">05</p>
23
+ </div>
24
+
25
+ <!-- 팀원 그리드 -->
26
+ <div style="flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20pt;">
27
+ <div style="text-align: center;">
28
+ <div style="width: 100%; aspect-ratio: 1; background: #d0d0c8; border-radius: 8pt; margin-bottom: 12pt;"></div>
29
+ <p style="font-size: 13pt; font-weight: 600; color: #1a1a1a;">John Smith</p>
30
+ <p style="font-size: 10pt; color: #888; margin-top: 4pt;">CEO & Founder</p>
31
+ </div>
32
+ <div style="text-align: center;">
33
+ <div style="width: 100%; aspect-ratio: 1; background: #d0d0c8; border-radius: 8pt; margin-bottom: 12pt;"></div>
34
+ <p style="font-size: 13pt; font-weight: 600; color: #1a1a1a;">Sarah Johnson</p>
35
+ <p style="font-size: 10pt; color: #888; margin-top: 4pt;">CTO</p>
36
+ </div>
37
+ <div style="text-align: center;">
38
+ <div style="width: 100%; aspect-ratio: 1; background: #d0d0c8; border-radius: 8pt; margin-bottom: 12pt;"></div>
39
+ <p style="font-size: 13pt; font-weight: 600; color: #1a1a1a;">Mike Chen</p>
40
+ <p style="font-size: 10pt; color: #888; margin-top: 4pt;">Design Lead</p>
41
+ </div>
42
+ <div style="text-align: center;">
43
+ <div style="width: 100%; aspect-ratio: 1; background: #d0d0c8; border-radius: 8pt; margin-bottom: 12pt;"></div>
44
+ <p style="font-size: 13pt; font-weight: 600; color: #1a1a1a;">Emily Davis</p>
45
+ <p style="font-size: 10pt; color: #888; margin-top: 4pt;">Marketing</p>
46
+ </div>
47
+ </div>
48
+ </body>
49
+ </html>
package/templates/timeline.html ADDED
@@ -0,0 +1,59 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
5
+ <style>
6
+ * { margin: 0; padding: 0; box-sizing: border-box; }
7
+ body {
8
+ width: 720pt;
9
+ height: 405pt;
10
+ font-family: 'Pretendard', sans-serif;
11
+ background: #ffffff;
12
+ padding: 40pt 48pt;
13
+ display: flex;
14
+ flex-direction: column;
15
+ }
16
+ </style>
17
+ </head>
18
+ <body>
19
+ <!-- 헤더 -->
20
+ <div style="margin-bottom: 32pt;">
21
+ <h2 style="font-size: 28pt; font-weight: 600; color: #1a1a1a;">Our Journey</h2>
22
+ </div>
23
+
24
+ <!-- 타임라인 -->
25
+ <div style="flex: 1; display: flex; align-items: center;">
26
+ <div style="display: flex; width: 100%; justify-content: space-between; position: relative;">
27
+ <!-- 연결선 -->
28
+ <div style="position: absolute; top: 12pt; left: 40pt; right: 40pt; height: 2pt; background: #e5e5e0;"></div>
29
+
30
+ <!-- 타임라인 아이템들 -->
31
+ <div style="text-align: center; z-index: 1;">
32
+ <div style="width: 24pt; height: 24pt; background: #1a1a1a; border-radius: 50%; margin: 0 auto 16pt;"></div>
33
+ <p style="font-size: 18pt; font-weight: 600; color: #1a1a1a;">2020</p>
34
+ <p style="font-size: 11pt; color: #888; margin-top: 8pt; max-width: 100pt;">Company Founded</p>
35
+ </div>
36
+ <div style="text-align: center; z-index: 1;">
37
+ <div style="width: 24pt; height: 24pt; background: #1a1a1a; border-radius: 50%; margin: 0 auto 16pt;"></div>
38
+ <p style="font-size: 18pt; font-weight: 600; color: #1a1a1a;">2021</p>
39
+ <p style="font-size: 11pt; color: #888; margin-top: 8pt; max-width: 100pt;">First Product Launch</p>
40
+ </div>
41
+ <div style="text-align: center; z-index: 1;">
42
+ <div style="width: 24pt; height: 24pt; background: #1a1a1a; border-radius: 50%; margin: 0 auto 16pt;"></div>
43
+ <p style="font-size: 18pt; font-weight: 600; color: #1a1a1a;">2023</p>
44
+ <p style="font-size: 11pt; color: #888; margin-top: 8pt; max-width: 100pt;">Series A Funding</p>
45
+ </div>
46
+ <div style="text-align: center; z-index: 1;">
47
+ <div style="width: 24pt; height: 24pt; background: #1a1a1a; border-radius: 50%; margin: 0 auto 16pt;"></div>
48
+ <p style="font-size: 18pt; font-weight: 600; color: #1a1a1a;">2025</p>
49
+ <p style="font-size: 11pt; color: #888; margin-top: 8pt; max-width: 100pt;">Global Expansion</p>
50
+ </div>
51
+ </div>
52
+ </div>
53
+
54
+ <!-- 푸터 -->
55
+ <div style="display: flex; justify-content: flex-end; padding-top: 16pt;">
56
+ <p style="font-size: 10pt; color: #999;">06</p>
57
+ </div>
58
+ </body>
59
+ </html>
package/themes/corporate.css ADDED
@@ -0,0 +1,8 @@
1
+ :root {
2
+ --bg-primary: #ffffff; /* 화이트 배경 */
3
+ --bg-secondary: #f7f9fc; /* 밝은 블루 그레이 */
4
+ --text-primary: #1e2a3a; /* 다크 네이비 */
5
+ --text-secondary: #5a6b7d; /* 블루 그레이 */
6
+ --accent: #2563eb; /* 블루 강조 */
7
+ --border: #e2e8f0; /* 테두리 */
8
+ }
package/themes/executive.css ADDED
@@ -0,0 +1,10 @@
1
+ :root {
2
+ --bg-primary: #f5f5f0; /* 웜 화이트 배경 */
3
+ --bg-secondary: #e8e8e3; /* 서브 배경 */
4
+ --bg-dark: #1a1a1a; /* 다크 배경 */
5
+ --text-primary: #1a1a1a; /* 메인 텍스트 */
6
+ --text-secondary: #666666; /* 보조 텍스트 */
7
+ --text-light: #999999; /* 약한 텍스트 */
8
+ --accent: #1a1a1a; /* 강조 (검정) */
9
+ --border: #d4d4d0; /* 테두리 */
10
+ }
package/themes/modern-dark.css ADDED
@@ -0,0 +1,9 @@
1
+ :root {
2
+ --bg-primary: #0f0f0f; /* 순수 다크 */
3
+ --bg-secondary: #1a1a1a; /* 카드 배경 */
4
+ --bg-elevated: #252525; /* 강조 영역 */
5
+ --text-primary: #ffffff; /* 메인 텍스트 */
6
+ --text-secondary: #b0b0b0; /* 보조 텍스트 */
7
+ --accent: #ffffff; /* 강조 (화이트) */
8
+ --border: #333333; /* 테두리 */
9
+ }
package/themes/sage.css ADDED
@@ -0,0 +1,9 @@
1
+ :root {
2
+ --bg-primary: #b8c4b8; /* 세이지 그린 배경 */
3
+ --bg-secondary: #a3b0a3; /* 짙은 세이지 */
4
+ --bg-light: #f8faf8; /* 밝은 배경 */
5
+ --text-primary: #1a1a1a; /* 메인 텍스트 */
6
+ --text-secondary: #3d3d3d; /* 보조 텍스트 */
7
+ --accent: #2d2d2d; /* 강조 */
8
+ --border: #9aa89a; /* 테두리 */
9
+ }
package/themes/warm.css ADDED
@@ -0,0 +1,8 @@
1
+ :root {
2
+ --bg-primary: #faf8f5; /* 크림 화이트 */
3
+ --bg-secondary: #f0ebe3; /* 웜 베이지 */
4
+ --text-primary: #2d2a26; /* 다크 브라운 */
5
+ --text-secondary: #6b6560; /* 미디움 브라운 */
6
+ --accent: #c45a3b; /* 테라코타 */
7
+ --border: #ddd8d0; /* 테두리 */
8
+ }