@june-ai/june-ui 0.2.2 → 0.2.3
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.
- package/README.md +598 -31
- package/dist/chunk-HFHRSNIL.js +174 -0
- package/dist/document-engine-C6ILFMRP.js +12 -0
- package/dist/index.cjs +1456 -85
- package/dist/index.d.cts +249 -10
- package/dist/index.d.ts +249 -10
- package/dist/index.js +1194 -61
- package/dist/june.css +119 -1
- package/package.json +10 -2
package/dist/june.css
CHANGED
|
@@ -27,4 +27,122 @@
|
|
|
27
27
|
border: 1px solid var(--june-danger, #b91c1c);
|
|
28
28
|
border-radius: 8px;
|
|
29
29
|
color: var(--june-danger, #b91c1c);
|
|
30
|
-
}
|
|
30
|
+
}
|
|
31
|
+
.june-doc {
|
|
32
|
+
--jd-bg: #ffffff;
|
|
33
|
+
--jd-fg: #111827;
|
|
34
|
+
--jd-muted: #6b7280;
|
|
35
|
+
--jd-border: #e5e7eb;
|
|
36
|
+
--jd-surface: #f9fafb;
|
|
37
|
+
--jd-accent: #4f46e5;
|
|
38
|
+
--jd-warn-bg: #fffbeb;
|
|
39
|
+
--jd-warn-border: #fcd34d;
|
|
40
|
+
--jd-danger: #b91c1c;
|
|
41
|
+
box-sizing: border-box;
|
|
42
|
+
display: flex;
|
|
43
|
+
flex-direction: column;
|
|
44
|
+
width: 100%;
|
|
45
|
+
max-width: 100%;
|
|
46
|
+
min-width: 0;
|
|
47
|
+
margin: 8px 0;
|
|
48
|
+
color: var(--jd-fg);
|
|
49
|
+
background: var(--jd-bg);
|
|
50
|
+
border: 1px solid var(--jd-border);
|
|
51
|
+
border-radius: 10px;
|
|
52
|
+
overflow: hidden;
|
|
53
|
+
font-family: inherit;
|
|
54
|
+
}
|
|
55
|
+
.june-doc[data-theme="dark"] {
|
|
56
|
+
--jd-bg: #0f1420;
|
|
57
|
+
--jd-fg: #f3f4f6;
|
|
58
|
+
--jd-muted: #9ca3af;
|
|
59
|
+
--jd-border: #263043;
|
|
60
|
+
--jd-surface: #151b2a;
|
|
61
|
+
--jd-accent: #818cf8;
|
|
62
|
+
--jd-warn-bg: #2a2208;
|
|
63
|
+
--jd-warn-border: #8a6d0b;
|
|
64
|
+
--jd-danger: #f87171;
|
|
65
|
+
}
|
|
66
|
+
.june-doc *, .june-doc *::before, .june-doc *::after { box-sizing: border-box; }
|
|
67
|
+
|
|
68
|
+
.june-doc__header { display: flex; align-items: center; gap: 8px; padding: 12px 16px 4px; }
|
|
69
|
+
.june-doc__title {
|
|
70
|
+
flex: 1; min-width: 0; padding: 4px 0; font: inherit; font-size: 1.25rem; font-weight: 700;
|
|
71
|
+
color: inherit; background: transparent; border: 0; border-bottom: 1px solid transparent; outline: none;
|
|
72
|
+
}
|
|
73
|
+
.june-doc__title:focus { border-bottom-color: var(--jd-accent); }
|
|
74
|
+
.june-doc__badge {
|
|
75
|
+
flex: none; padding: 2px 8px; font-size: 0.75rem; color: var(--jd-muted);
|
|
76
|
+
background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: 999px;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.june-doc__banner {
|
|
80
|
+
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
|
|
81
|
+
margin: 8px 16px; padding: 8px 12px; font-size: 0.875rem;
|
|
82
|
+
background: var(--jd-warn-bg); border: 1px solid var(--jd-warn-border); border-radius: 8px;
|
|
83
|
+
}
|
|
84
|
+
.june-doc__banner-actions { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
85
|
+
|
|
86
|
+
.june-doc__toolbar {
|
|
87
|
+
display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px;
|
|
88
|
+
background: var(--jd-surface); border-top: 1px solid var(--jd-border); border-bottom: 1px solid var(--jd-border);
|
|
89
|
+
}
|
|
90
|
+
.june-doc__group { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
|
|
91
|
+
.june-doc__group--end { margin-left: auto; }
|
|
92
|
+
.june-doc__btn, .june-doc__select, .june-doc__input {
|
|
93
|
+
min-height: 30px; padding: 3px 9px; font: inherit; font-size: 0.8125rem; color: inherit;
|
|
94
|
+
background: var(--jd-bg); border: 1px solid var(--jd-border); border-radius: 6px;
|
|
95
|
+
}
|
|
96
|
+
.june-doc__btn { cursor: pointer; }
|
|
97
|
+
.june-doc__btn:hover:not(:disabled) { border-color: var(--jd-accent); }
|
|
98
|
+
.june-doc__btn[data-active] { color: var(--jd-bg); background: var(--jd-accent); border-color: var(--jd-accent); }
|
|
99
|
+
.june-doc__btn:disabled, .june-doc__select:disabled { opacity: 0.45; cursor: not-allowed; }
|
|
100
|
+
.june-doc__btn:focus-visible, .june-doc__select:focus-visible, .june-doc__input:focus-visible,
|
|
101
|
+
.june-doc__title:focus-visible { outline: 2px solid var(--jd-accent); outline-offset: 1px; }
|
|
102
|
+
.june-doc__linkbar { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
|
|
103
|
+
.june-doc__input { flex: 1; min-width: 180px; }
|
|
104
|
+
|
|
105
|
+
.june-doc__content { padding: 4px 16px 12px; max-height: min(70vh, 720px); overflow: auto; }
|
|
106
|
+
.june-doc__prose { min-height: 160px; outline: none; line-height: 1.65; overflow-wrap: anywhere; }
|
|
107
|
+
.june-doc__prose > :first-child { margin-top: 0.5em; }
|
|
108
|
+
.june-doc__prose h1 { font-size: 1.6rem; line-height: 1.25; margin: 1.2em 0 0.4em; }
|
|
109
|
+
.june-doc__prose h2 { font-size: 1.3rem; line-height: 1.3; margin: 1.1em 0 0.4em; }
|
|
110
|
+
.june-doc__prose h3 { font-size: 1.1rem; line-height: 1.35; margin: 1em 0 0.3em; }
|
|
111
|
+
.june-doc__prose p { margin: 0.6em 0; }
|
|
112
|
+
.june-doc__prose ul, .june-doc__prose ol { margin: 0.6em 0; padding-left: 1.5em; }
|
|
113
|
+
.june-doc__prose blockquote { margin: 0.8em 0; padding-left: 1em; color: var(--jd-muted); border-left: 3px solid var(--jd-border); }
|
|
114
|
+
.june-doc__prose a { color: var(--jd-accent); text-decoration: underline; }
|
|
115
|
+
.june-doc__prose code { padding: 1px 4px; font-size: 0.9em; background: var(--jd-surface); border-radius: 4px; }
|
|
116
|
+
.june-doc__prose pre { padding: 10px 12px; overflow: auto; background: var(--jd-surface); border-radius: 6px; }
|
|
117
|
+
.june-doc__prose pre code { padding: 0; background: transparent; }
|
|
118
|
+
.june-doc__prose hr { border: 0; border-top: 1px solid var(--jd-border); margin: 1.2em 0; }
|
|
119
|
+
.june-doc__prose table { width: 100%; margin: 0.8em 0; border-collapse: collapse; table-layout: fixed; }
|
|
120
|
+
.june-doc__prose th, .june-doc__prose td {
|
|
121
|
+
position: relative; padding: 6px 10px; text-align: left; vertical-align: top; border: 1px solid var(--jd-border);
|
|
122
|
+
}
|
|
123
|
+
.june-doc__prose th { font-weight: 600; background: var(--jd-surface); }
|
|
124
|
+
.june-doc__prose .selectedCell::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--jd-accent) 18%, transparent); pointer-events: none; }
|
|
125
|
+
|
|
126
|
+
.june-doc__footer {
|
|
127
|
+
display: flex; justify-content: space-between; gap: 8px; padding: 6px 16px;
|
|
128
|
+
font-size: 0.75rem; color: var(--jd-muted); border-top: 1px solid var(--jd-border);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.june-doc--draft, .june-doc--error { padding: 14px 16px; gap: 8px; }
|
|
132
|
+
.june-doc__draft-title { margin: 0; font-weight: 700; }
|
|
133
|
+
.june-doc__draft-text { margin: 0; color: var(--jd-muted); }
|
|
134
|
+
.june-doc--error .june-doc__draft-text { color: var(--jd-danger); }
|
|
135
|
+
.june-doc__raw { margin: 8px 0 0; max-height: 240px; padding: 8px; overflow: auto; white-space: pre-wrap; background: var(--jd-surface); border-radius: 6px; }
|
|
136
|
+
.june-doc__pulse { display: flex; flex-direction: column; gap: 6px; }
|
|
137
|
+
.june-doc__pulse span { height: 10px; background: var(--jd-surface); border-radius: 4px; animation: june-doc-pulse 1.2s ease-in-out infinite; }
|
|
138
|
+
.june-doc__pulse span:nth-child(2) { width: 85%; animation-delay: 0.15s; }
|
|
139
|
+
.june-doc__pulse span:nth-child(3) { width: 60%; animation-delay: 0.3s; }
|
|
140
|
+
@keyframes june-doc-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
|
|
141
|
+
@media (prefers-reduced-motion: reduce) { .june-doc__pulse span { animation: none; } }
|
|
142
|
+
|
|
143
|
+
@media (max-width: 640px) {
|
|
144
|
+
.june-doc__toolbar { flex-wrap: nowrap; overflow-x: auto; }
|
|
145
|
+
.june-doc__group { flex: none; }
|
|
146
|
+
.june-doc__group--end { margin-left: 0; }
|
|
147
|
+
.june-doc__content { padding: 4px 12px 10px; }
|
|
148
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@june-ai/june-ui",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.3",
|
|
4
4
|
"description": "A React Generative UI SDK powered by OpenUI",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -57,7 +57,15 @@
|
|
|
57
57
|
"zustand": "^4.5.5"
|
|
58
58
|
},
|
|
59
59
|
"dependencies": {
|
|
60
|
-
"@openuidev/react-ui": "^0.18.0"
|
|
60
|
+
"@openuidev/react-ui": "^0.18.0",
|
|
61
|
+
"@tiptap/core": "^3.33.0",
|
|
62
|
+
"@tiptap/extension-table": "^3.33.0",
|
|
63
|
+
"@tiptap/extension-text-align": "^3.33.0",
|
|
64
|
+
"@tiptap/markdown": "^3.33.0",
|
|
65
|
+
"@tiptap/pm": "^3.33.0",
|
|
66
|
+
"@tiptap/react": "^3.33.0",
|
|
67
|
+
"@tiptap/starter-kit": "^3.33.0",
|
|
68
|
+
"docx": "^9.15.3"
|
|
61
69
|
},
|
|
62
70
|
"devDependencies": {
|
|
63
71
|
"@openuidev/react-headless": "^0.18.1",
|