mats/cms-onpageeditor
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial ai assistance

Browse Source
This commit is contained in:
mats committed 2026-11-01 10:27:56 +01:00
1 parent 1af9ec3172
commit 2e0bf1e88e
24 files changed
+1293 -60
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/ui/styles.css
+54 -5
View File
@@ -14,7 +14,7 @@ button:disabled { opacity: .35; cursor: default; }
.cms-frame--editing { border: 2px dashed #5ee0a0; background: none; }
.cms-frame__tag { position: absolute; top: -18px; left: -1px; padding: 1px 6px; font-size: 11px; background: #6aa7ff; color: #07080b; border-radius: 3px 3px 0 0; }
.cms-bar, .cms-dock, .cms-dialog, .cms-outline, .cms-dev, .cms-toast {
.cms-bar, .cms-dock, .cms-dialog, .cms-outline, .cms-dev, .cms-assistant, .cms-toast {
pointer-events: auto; position: fixed; z-index: 2147483001;
background: #14161d; border: 1px solid #2a2d3a; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.45);
}
@@ -35,9 +35,9 @@ button:disabled { opacity: .35; cursor: default; }
.cms-busy.is-busy { background: #5ee0a0; animation: cms-pulse .8s infinite alternate; }
@keyframes cms-pulse { to { opacity: .2; } }
.cms-dialog { max-height: calc(100vh - 24px); display: flex; flex-direction: column; }
.cms-dialog { max-height: calc(100vh - 24px); min-width: 280px; min-height: 140px; max-width: calc(100vw - 24px); display: flex; flex-direction: column; overflow: hidden; resize: both; }
.cms-dialog__head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 14px; border-bottom: 1px solid #2a2d3a; cursor: grab; user-select: none; }
.cms-dialog__body { padding: 12px 14px; overflow: auto; }
.cms-dialog__body { padding: 12px 14px; overflow: auto; flex: 1; min-height: 0; }
.cms-form { display: flex; flex-direction: column; gap: 10px; }
.cms-field { display: flex; flex-direction: column; gap: 3px; }
@@ -51,7 +51,7 @@ button:disabled { opacity: .35; cursor: default; }
.cms-check { width: 16px; height: 16px; }
.cms-nested { border: 1px solid #2a2d3a; border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 10px; margin: 0; }
.cms-extra summary { cursor: pointer; color: #8b8fa0; margin-bottom: 6px; }
.cms-actions { display: flex; justify-content: flex-end; gap: 8px; position: sticky; bottom: 0; }
.cms-actions { display: flex; justify-content: flex-end; gap: 8px; position: sticky; bottom: -12px; z-index: 20; margin: 4px -14px -12px; padding: 10px 14px; background: #14161d; border-top: 1px solid #2a2d3a; box-shadow: 0 -8px 12px -8px rgba(0,0,0,.5); }
.cms-btn { background: #242836; border: 1px solid #343850; border-radius: 6px; padding: 5px 14px; }
.cms-btn--primary { background: #d2a24c; border-color: #d2a24c; color: #07080b; font-weight: 600; }
@@ -112,7 +112,9 @@ button:disabled { opacity: .35; cursor: default; }
.cms-item { border: 1px solid #2a2d3a; border-radius: 8px; background: #101219; }
.cms-item.is-over { border-color: #5ee0a0; box-shadow: 0 0 0 2px rgba(94,224,160,.2); }
.cms-item__head { display: flex; align-items: center; gap: 4px; padding: 3px 4px 3px 2px; }
.cms-item__title { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 4px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 6px; }
.cms-item__title { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 4px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 6px; }
.cms-item__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cms-item__title .cms-chev { flex-shrink: 0; }
.cms-item__title:hover { background: #1d2029; }
.cms-item__value { flex: 1; min-width: 0; }
.cms-item__actions { display: flex; flex-shrink: 0; }
@@ -273,3 +275,50 @@ details[open] > summary > .cms-chev { transform: rotate(90deg); }
.cms-dialog.is-pulsing { animation: cms-pulse-ring .7s ease-out; }
@keyframes cms-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(210,162,76,.9), 0 8px 30px rgba(0,0,0,.45); } 100% { box-shadow: 0 0 0 14px rgba(210,162,76,0), 0 8px 30px rgba(0,0,0,.45); } }
@media (prefers-reduced-motion: reduce) { .cms-dialog.is-pulsing { animation: none; outline: 2px solid #d2a24c; } }
/* AI rewrite (src/ai) */
.cms-ai { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12px; }
.cms-ai__pick { background: #1a1d26; color: inherit; border: 1px solid var(--cms-line, #2a2d3a); border-radius: 6px; padding: 2px 6px; font: inherit; }
.cms-ai--suggest { flex-direction: column; align-items: stretch; background: #1a1d26; border: 1px dashed var(--cms-accent, #d2a24c); border-radius: 8px; padding: 8px; }
.cms-ai__text { white-space: pre-wrap; }
.cms-ai__actions { display: flex; justify-content: flex-end; gap: 8px; }
/* AI assistant panel */
.cms-assistant { right: 12px; top: 12px; bottom: 70px; width: 380px; display: flex; flex-direction: column; overflow: hidden; }
.cms-assistant > header { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--cms-line, #2a2d3a); font-weight: 600; }
.cms-chat { flex: 1; overflow: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.cms-msg { max-width: 92%; padding: 6px 10px; border-radius: 10px; white-space: pre-wrap; word-break: break-word; background: #1d2029; }
.cms-msg--user { align-self: flex-end; background: #2b3350; }
.cms-msg--note { align-self: stretch; max-width: none; background: none; color: #8b8fa0; font-size: 12px; padding: 0 4px; }
.cms-prop { border: 1px dashed var(--cms-accent, #d2a24c); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 4px; background: #1a1d26; }
.cms-prop__head { font-size: 12px; color: #8b8fa0; }
.cms-prop__del { background: #3a2226; text-decoration: line-through; border-radius: 4px; padding: 2px 4px; white-space: pre-wrap; }
.cms-prop__ins { background: #1f3a2c; border-radius: 4px; padding: 2px 4px; white-space: pre-wrap; }
.cms-prop__actions { display: flex; justify-content: flex-end; gap: 8px; }
.cms-guard { margin-top: 4px; font-size: 12px; }
.cms-assistant__title { display: inline-flex; align-items: center; gap: 6px; }
.cms-chat__empty { display: flex; flex-direction: column; gap: 10px; }
.cms-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cms-chip { background: #1d2029; border: 1px solid var(--cms-line, #2a2d3a); border-radius: 999px; padding: 4px 10px; font-size: 12px; }
.cms-chip:hover:not(:disabled) { border-color: var(--cms-accent, #d2a24c); }
.cms-msg--streaming { align-self: flex-start; border-left: 2px solid var(--cms-accent, #d2a24c); border-radius: 4px 10px 10px 4px; }
.cms-msg--streaming::after { content: '▍'; margin-left: 1px; animation: cms-blink 1s steps(2) infinite; color: var(--cms-accent, #d2a24c); }
.cms-tool { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #8b8fa0; padding: 0 4px; }
.cms-tool small { opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.cms-status-line { display: flex; align-items: center; gap: 8px; color: #8b8fa0; font-size: 12px; }
.cms-status-line .cms-btn { margin-left: auto; padding: 2px 10px; }
.cms-dots { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #343850; border-top-color: var(--cms-accent, #d2a24c); animation: cms-spin .8s linear infinite; }
.cms-chat__all { align-self: stretch; }
.cms-prop__state { font-size: 12px; text-align: right; color: #8b8fa0; }
.cms-prop__state--applied { color: #5ee0a0; }
.cms-prop__state--failed { color: #ff6b6b; }
.cms-prop[data-status="rejected"] { opacity: .55; border-style: solid; border-color: var(--cms-line, #2a2d3a); }
.cms-prop[data-status="applied"] { border-style: solid; border-color: #2f6b4c; }
.cms-assistant form { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-top: 1px solid var(--cms-line, #2a2d3a); }
.cms-ctx { font-size: 11.5px; color: #8b8fa0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cms-ctx b { color: var(--cms-accent, #d2a24c); font-weight: 600; }
.cms-compose { display: flex; gap: 6px; align-items: flex-end; }
.cms-compose textarea { flex: 1; resize: none; }
@keyframes cms-blink { 50% { opacity: 0; } }
@keyframes cms-spin { to { transform: rotate(360deg); } }