@pramen/cms-editor 0.0.21 → 0.0.22
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 +17 -0
- package/dist/app.css +1 -0
- package/dist/index.html +3 -1
- package/dist/main.54b274dt.js +251 -0
- package/dist/tokens.css +68 -0
- package/package.json +10 -2
- package/src/app-context.tsx +86 -0
- package/src/app.css +3 -0
- package/src/buzola.gen.ts +78 -0
- package/src/components.tsx +851 -0
- package/src/fields.tsx +83 -92
- package/src/main.tsx +13 -6
- package/src/routes/_404.tsx +20 -0
- package/src/routes/_layout.tsx +48 -0
- package/src/routes/home.tsx +34 -0
- package/src/routes/media.tsx +12 -0
- package/src/routes/page.tsx +62 -0
- package/src/routes/settings.tsx +12 -0
- package/src/routes/users.tsx +26 -0
- package/src/virtual-modules.d.ts +6 -0
- package/dist/main.43fpw937.js +0 -405
- package/src/app.tsx +0 -969
- package/src/styles.ts +0 -176
package/src/styles.ts
DELETED
|
@@ -1,176 +0,0 @@
|
|
|
1
|
-
// Inline stylesheet for the CMS editor. Cream light theme, mint accent, serif-italic
|
|
2
|
-
// display headings — the "graphic standard" visual language, adapted for an editor
|
|
3
|
-
// (canvas, palette, forms). Same class names as before; only paint changed and a
|
|
4
|
-
// handful of new hero / tile / cta classes added.
|
|
5
|
-
|
|
6
|
-
export const css = `
|
|
7
|
-
:root {
|
|
8
|
-
--bg:#f7f3ea; --surface:#efe9dc; --surface-2:#ffffff; --raise:#efe9dc;
|
|
9
|
-
--border:#e5dfd0; --border-2:#d9d1bd;
|
|
10
|
-
--ink:#111111; --ink-2:#6b6a63; --ink-3:#a4a29a;
|
|
11
|
-
--spring:#7ed4a6; --spring-dim:#52b380; --spring-bg:#a3e2c0; --spring-ink:#0f3a25;
|
|
12
|
-
--amber:#b8863b; --amber-bg:#f1e6cf;
|
|
13
|
-
--danger:#b04141; --danger-bg:#f5e2e2;
|
|
14
|
-
--radius:14px; --radius-sm:10px; --radius-pill:999px;
|
|
15
|
-
--mono:ui-monospace,"SF Mono","JetBrains Mono","Menlo",monospace;
|
|
16
|
-
--sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
|
|
17
|
-
/* Display face — system font for now (no serif). Swap in a brand font here later. */
|
|
18
|
-
--serif:var(--sans);
|
|
19
|
-
}
|
|
20
|
-
* { box-sizing:border-box; }
|
|
21
|
-
html,body { margin:0; height:100%; }
|
|
22
|
-
body { background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; }
|
|
23
|
-
#app { min-height:100%; }
|
|
24
|
-
a { color:var(--ink); text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--ink-3); cursor:pointer; }
|
|
25
|
-
a:hover { text-decoration-color:var(--ink); }
|
|
26
|
-
|
|
27
|
-
/* --- top bar ------------------------------------------------------------ */
|
|
28
|
-
.bar { display:flex; align-items:center; gap:16px; padding:16px 28px; background:var(--bg); border-bottom:1px solid transparent; position:sticky; top:0; z-index:10; }
|
|
29
|
-
.bar .grow { flex:1; }
|
|
30
|
-
.brand { font-weight:700; font-size:15px; letter-spacing:.01em; }
|
|
31
|
-
.brand .dim { color:var(--ink-3); font-weight:400; }
|
|
32
|
-
.crumb { color:var(--ink-2); font-size:13px; }
|
|
33
|
-
.crumb b { color:var(--ink); font-weight:600; }
|
|
34
|
-
.crumb a { text-decoration:none; color:var(--ink-2); }
|
|
35
|
-
.crumb a:hover { color:var(--ink); }
|
|
36
|
-
|
|
37
|
-
/* --- buttons: pill-shaped, black-filled primary ------------------------- */
|
|
38
|
-
button, .btn { font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--border-2); border-radius:var(--radius-pill); padding:9px 20px; cursor:pointer; font-weight:500; transition:background .12s, border-color .12s, color .12s; }
|
|
39
|
-
button:hover { background:#e6dfcd; }
|
|
40
|
-
button.primary { background:#111111; border-color:#111111; color:#ffffff; }
|
|
41
|
-
button.primary:hover { background:#000000; }
|
|
42
|
-
button.ghost { background:transparent; border-color:transparent; color:var(--ink-2); }
|
|
43
|
-
button.ghost:hover { color:var(--ink); background:var(--surface); }
|
|
44
|
-
button.danger { color:var(--danger); border-color:var(--danger); background:var(--danger-bg); }
|
|
45
|
-
button.danger:hover { background:#eeced0; }
|
|
46
|
-
button:disabled { opacity:.45; cursor:not-allowed; }
|
|
47
|
-
button.sm { padding:4px 11px; font-size:12px; font-weight:500; }
|
|
48
|
-
|
|
49
|
-
/* --- inputs ------------------------------------------------------------- */
|
|
50
|
-
input, textarea, select { font:inherit; color:var(--ink); background:var(--surface-2); border:1px solid var(--border-2); border-radius:var(--radius-sm); padding:10px 14px; width:100%; }
|
|
51
|
-
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--ink); }
|
|
52
|
-
input::placeholder, textarea::placeholder { color:var(--ink-3); }
|
|
53
|
-
textarea { min-height:88px; font-family:var(--mono); font-size:13px; resize:vertical; }
|
|
54
|
-
label.field { display:block; margin:14px 0; }
|
|
55
|
-
label.field > .lbl { display:block; color:var(--ink); font-weight:600; font-size:13px; margin-bottom:6px; }
|
|
56
|
-
label.field > .lbl .req { color:var(--danger); font-weight:400; }
|
|
57
|
-
.checkbox { display:flex; align-items:center; gap:8px; }
|
|
58
|
-
.checkbox input { width:auto; }
|
|
59
|
-
|
|
60
|
-
/* --- editor 3-col layout ------------------------------------------------ */
|
|
61
|
-
.layout { display:grid; grid-template-columns:260px 1fr 400px; min-height:calc(100vh - 68px); gap:20px; padding:8px 28px 28px; }
|
|
62
|
-
.side { background:var(--surface); border-radius:var(--radius); padding:18px; overflow:auto; }
|
|
63
|
-
.canvas { padding:6px 0; overflow:auto; }
|
|
64
|
-
.inspect { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:20px 22px; overflow:auto; }
|
|
65
|
-
|
|
66
|
-
.sect { color:var(--ink-3); font-family:var(--serif); font-style:italic; font-size:14px; letter-spacing:0; margin:18px 0 8px; }
|
|
67
|
-
.list { display:flex; flex-direction:column; gap:8px; }
|
|
68
|
-
.row { display:flex; align-items:center; gap:12px; padding:14px 18px; border:1px solid transparent; border-radius:var(--radius); background:var(--surface); cursor:pointer; transition:background .12s, border-color .12s; }
|
|
69
|
-
.row:hover { background:#e6dfcd; }
|
|
70
|
-
.row.active { border-color:var(--ink); background:var(--surface-2); }
|
|
71
|
-
.row .grow { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
|
|
72
|
-
|
|
73
|
-
/* --- status pills ------------------------------------------------------- */
|
|
74
|
-
.pill { font-size:11px; padding:3px 10px; border-radius:var(--radius-pill); border:1px solid var(--border-2); color:var(--ink-2); background:var(--surface-2); font-weight:500; letter-spacing:.02em; }
|
|
75
|
-
.pill.published { color:var(--spring-ink); border-color:transparent; background:var(--spring); }
|
|
76
|
-
.pill.review, .pill.in_review { color:#4a3512; border-color:transparent; background:var(--amber-bg); }
|
|
77
|
-
.pill.rejected, .pill.archived { color:#5c1e1e; border-color:transparent; background:var(--danger-bg); }
|
|
78
|
-
|
|
79
|
-
/* --- editor regions / blocks ------------------------------------------- */
|
|
80
|
-
.region { margin-bottom:24px; }
|
|
81
|
-
.region > h3 { font-family:var(--serif); font-size:22px; color:var(--ink); margin:0 0 12px; display:flex; align-items:baseline; gap:12px; font-weight:400; }
|
|
82
|
-
.region > h3 .allow { font-family:var(--sans); font-size:11px; color:var(--ink-3); font-weight:400; }
|
|
83
|
-
.block { border:1px solid var(--border); border-radius:var(--radius); background:var(--surface-2); padding:14px 16px; margin-bottom:10px; transition:border-color .12s; }
|
|
84
|
-
.block.selected { border-color:var(--ink); }
|
|
85
|
-
.block .bhead { display:flex; align-items:center; gap:10px; }
|
|
86
|
-
.block .btype { font-family:var(--mono); font-size:12px; color:var(--ink-2); background:var(--surface); padding:2px 8px; border-radius:var(--radius-pill); }
|
|
87
|
-
.block .grow { flex:1; }
|
|
88
|
-
.block .shared { font-size:11px; color:var(--amber); }
|
|
89
|
-
.dropzone { border:1px dashed var(--border-2); border-radius:var(--radius); padding:14px; text-align:center; color:var(--ink-3); font-size:13px; }
|
|
90
|
-
.dropzone.over { border-color:var(--ink); color:var(--ink); }
|
|
91
|
-
|
|
92
|
-
.palette { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
|
|
93
|
-
.palette button { font-size:12px; padding:6px 14px; }
|
|
94
|
-
.repeater-item, .group { border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 14px; margin:8px 0; background:var(--surface); }
|
|
95
|
-
.repeater-item > .ih { display:flex; justify-content:flex-end; gap:4px; }
|
|
96
|
-
|
|
97
|
-
/* --- media library ------------------------------------------------------ */
|
|
98
|
-
.media-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
|
|
99
|
-
.media-cell { border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; cursor:pointer; background:var(--surface-2); transition:border-color .12s; }
|
|
100
|
-
.media-cell:hover { border-color:var(--border-2); }
|
|
101
|
-
.media-cell.sel { border-color:var(--ink); }
|
|
102
|
-
.media-cell img { width:100%; height:80px; object-fit:cover; display:block; }
|
|
103
|
-
.media-cell .fn { font-size:11px; padding:6px 8px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
|
104
|
-
.media-cell .ext { height:80px; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:12px; color:var(--ink-3); background:var(--surface); }
|
|
105
|
-
|
|
106
|
-
.media-lib { padding:0 28px 28px; max-width:1200px; margin:0 auto; }
|
|
107
|
-
.media-lib .media-grid { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); }
|
|
108
|
-
.media-lib .media-cell img, .media-lib .media-cell .ext { height:130px; }
|
|
109
|
-
.media-toolbar { display:none; }
|
|
110
|
-
label.btn { display:inline-flex; align-items:center; }
|
|
111
|
-
.btn.disabled { opacity:.5; cursor:not-allowed; }
|
|
112
|
-
.media-detail img { max-width:100%; max-height:340px; object-fit:contain; display:block; margin:0 auto 14px; background:var(--surface); border-radius:var(--radius-sm); }
|
|
113
|
-
.media-detail .ext.lg { height:200px; display:flex; align-items:center; justify-content:center; font-family:var(--mono); color:var(--ink-3); background:var(--surface); border-radius:var(--radius-sm); margin-bottom:14px; }
|
|
114
|
-
.media-detail .kv a { word-break:break-all; }
|
|
115
|
-
|
|
116
|
-
/* --- modals ------------------------------------------------------------- */
|
|
117
|
-
.scrim { position:fixed; inset:0; background:rgba(20,15,5,.28); display:flex; align-items:center; justify-content:center; z-index:50; padding:24px; }
|
|
118
|
-
.modal { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:32px 36px; width:min(680px,92vw); max-height:86vh; overflow:auto; box-shadow:0 24px 60px rgba(30,20,10,.12); }
|
|
119
|
-
.modal h2 { margin:0 0 20px; font-family:var(--serif); font-weight:400; font-size:28px; line-height:1.15; color:var(--ink); }
|
|
120
|
-
.modal h2 .dim { color:var(--ink-3); font-style:italic; }
|
|
121
|
-
.banner { padding:10px 14px; border-radius:var(--radius-sm); margin:8px 0; font-size:13px; }
|
|
122
|
-
.banner.err { background:var(--danger-bg); border:1px solid var(--danger); color:var(--danger); }
|
|
123
|
-
.banner.ok { background:var(--spring); border:1px solid var(--spring-dim); color:var(--spring-ink); }
|
|
124
|
-
.muted { color:var(--ink-3); }
|
|
125
|
-
|
|
126
|
-
/* --- tabs: pill nav (top bar) + pill sub-tabs (inspector) --------------- */
|
|
127
|
-
.tabs { display:flex; gap:4px; margin-bottom:12px; align-items:center; }
|
|
128
|
-
.tabs button { border-radius:var(--radius-pill); font-size:13px; padding:7px 16px; background:transparent; border-color:transparent; color:var(--ink); font-weight:500; }
|
|
129
|
-
.tabs button:hover { background:var(--surface); }
|
|
130
|
-
.tabs button.on { background:var(--surface); color:var(--ink); border-color:transparent; }
|
|
131
|
-
.tabs.nav { gap:2px; }
|
|
132
|
-
.tabs.nav button { font-size:14px; padding:8px 18px; }
|
|
133
|
-
|
|
134
|
-
.setup { max-width:520px; margin:14vh auto; padding:32px 40px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 24px 60px rgba(30,20,10,.08); }
|
|
135
|
-
.setup h1 { font-family:var(--serif); font-weight:400; font-size:32px; margin:0 0 16px; color:var(--ink); }
|
|
136
|
-
.setup h1 .dim { color:var(--ink-3); font-style:italic; }
|
|
137
|
-
.setup .primary { width:100%; margin-top:8px; }
|
|
138
|
-
.kv { display:grid; grid-template-columns:auto 1fr; gap:8px 14px; font-size:13px; color:var(--ink-2); }
|
|
139
|
-
.kv > span:nth-child(odd) { color:var(--ink-3); font-family:var(--serif); font-style:italic; }
|
|
140
|
-
|
|
141
|
-
/* --- hero band (list views): big serif split heading + mint CTA card ---- */
|
|
142
|
-
.hero { display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; padding:32px 28px 24px; max-width:1200px; margin:0 auto; }
|
|
143
|
-
.hero-h { font-family:var(--serif); font-weight:400; font-size:56px; line-height:1.05; letter-spacing:-.01em; margin:0; }
|
|
144
|
-
.hero-h .lead { color:var(--ink-3); font-style:italic; display:block; }
|
|
145
|
-
.hero-h .em { color:var(--ink); font-style:normal; display:block; }
|
|
146
|
-
.cta { display:flex; align-items:center; gap:18px; background:var(--spring); border-radius:var(--radius-pill); padding:12px 12px 12px 28px; min-width:360px; }
|
|
147
|
-
.cta .cta-text { font-family:var(--serif); font-style:italic; font-size:18px; color:var(--spring-ink); }
|
|
148
|
-
.cta .cta-text .em { font-style:normal; font-weight:600; }
|
|
149
|
-
.cta button.primary { flex-shrink:0; }
|
|
150
|
-
.list-wrap { max-width:1200px; margin:0 auto; padding:8px 28px 32px; }
|
|
151
|
-
.list-wrap .sect { margin-top:0; }
|
|
152
|
-
|
|
153
|
-
/* --- rich text (WYSIWYG) ------------------------------------------------ */
|
|
154
|
-
.rt { border:1px solid var(--border-2); border-radius:var(--radius-sm); overflow:hidden; background:var(--surface-2); }
|
|
155
|
-
.rt-toolbar { display:flex; flex-wrap:wrap; gap:3px; padding:6px 8px; border-bottom:1px solid var(--border); background:var(--surface); }
|
|
156
|
-
.rt-toolbar button { padding:3px 10px; font-size:12px; border-radius:var(--radius-sm); background:transparent; border-color:transparent; color:var(--ink-2); }
|
|
157
|
-
.rt-toolbar button:hover { background:var(--surface-2); color:var(--ink); }
|
|
158
|
-
.rt-editor { min-height:180px; padding:14px 16px; font-family:var(--sans); font-size:14px; line-height:1.65; color:var(--ink); outline:none; }
|
|
159
|
-
.rt-editor:empty:before { content:attr(data-placeholder); color:var(--ink-3); pointer-events:none; }
|
|
160
|
-
.rt-editor:focus { box-shadow:inset 0 0 0 2px var(--ink); border-radius:0 0 var(--radius-sm) var(--radius-sm); }
|
|
161
|
-
.rt-editor h2 { font-family:var(--serif); font-weight:400; font-size:24px; line-height:1.2; margin:.7em 0 .3em; }
|
|
162
|
-
.rt-editor h3 { font-family:var(--serif); font-weight:400; font-size:19px; line-height:1.25; margin:.7em 0 .3em; }
|
|
163
|
-
.rt-editor p { margin:.55em 0; }
|
|
164
|
-
.rt-editor ul, .rt-editor ol { margin:.55em 0; padding-left:1.5em; }
|
|
165
|
-
.rt-editor li { margin:.2em 0; }
|
|
166
|
-
.rt-editor a { color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
|
|
167
|
-
.rt-editor:first-child { margin-top:0; }
|
|
168
|
-
|
|
169
|
-
@media (max-width:820px) {
|
|
170
|
-
.hero { grid-template-columns:1fr; padding:20px 20px 16px; }
|
|
171
|
-
.hero-h { font-size:40px; }
|
|
172
|
-
.cta { min-width:0; }
|
|
173
|
-
.layout { grid-template-columns:1fr; padding:8px 20px 20px; }
|
|
174
|
-
.list-wrap, .media-lib { padding-left:20px; padding-right:20px; }
|
|
175
|
-
}
|
|
176
|
-
`;
|