anentrypoint-design 0.0.121 → 0.0.124
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 +253 -253
- package/app-shell.css +931 -594
- package/colors_and_type.css +226 -226
- package/community.css +817 -1222
- package/dist/247420.css +2202 -2084
- package/dist/247420.js +13 -13
- package/package.json +80 -80
- package/src/bootstrap.js +25 -25
- package/src/components/chat.js +199 -199
- package/src/components/community.js +190 -208
- package/src/components/content.js +269 -269
- package/src/components/editor-primitives.js +100 -0
- package/src/components/files-modals.js +107 -107
- package/src/components/files.js +118 -118
- package/src/components/freddie/helpers.js +50 -50
- package/src/components/freddie.js +33 -33
- package/src/components/shell.js +117 -117
- package/src/components/theme-toggle.js +70 -70
- package/src/components.js +59 -57
- package/src/debug.js +30 -30
- package/src/deck-stage.js +21 -21
- package/src/highlight.js +65 -32
- package/src/index.js +86 -86
- package/src/kits/os/about-app.js +52 -52
- package/src/kits/os/app-panes.css +152 -152
- package/src/kits/os/browser-app.js +58 -58
- package/src/kits/os/files-app.js +44 -44
- package/src/kits/os/freddie/helpers.js +59 -59
- package/src/kits/os/freddie/pages-chat.js +143 -143
- package/src/kits/os/freddie/pages-core.js +101 -101
- package/src/kits/os/freddie/pages-os.js +51 -51
- package/src/kits/os/freddie/pages-tools.js +183 -183
- package/src/kits/os/freddie/routes.js +24 -24
- package/src/kits/os/freddie-dashboard.css +51 -51
- package/src/kits/os/freddie-dashboard.js +101 -101
- package/src/kits/os/icons.js +17 -17
- package/src/kits/os/index.js +17 -17
- package/src/kits/os/launcher.css +61 -61
- package/src/kits/os/launcher.js +79 -79
- package/src/kits/os/monitor-app.js +34 -34
- package/src/kits/os/shell.js +214 -214
- package/src/kits/os/terminal-app.js +45 -45
- package/src/kits/os/theme.css +450 -450
- package/src/kits/os/validate.css +19 -19
- package/src/kits/os/validator-app.js +55 -55
- package/src/kits/os/wm.css +115 -115
- package/src/kits/os/wm.js +111 -111
- package/src/markdown.js +39 -39
- package/src/motion.js +35 -35
- package/src/page-html.js +196 -196
- package/src/styles.js +25 -25
- package/src/theme.js +99 -99
- package/src/web-components/ds-chat.js +116 -116
- package/dist/.nojekyll +0 -0
- package/dist/app-shell.css +0 -594
- package/dist/colors_and_type.css +0 -197
- package/dist/favicon.svg +0 -1
- package/dist/index.html +0 -308
- package/dist/preview/buttons.html +0 -28
- package/dist/preview/colors-core.html +0 -45
- package/dist/preview/colors-lore.html +0 -28
- package/dist/preview/colors-semantic.html +0 -34
- package/dist/preview/dateline.html +0 -19
- package/dist/preview/dropzone.html +0 -30
- package/dist/preview/file-grid.html +0 -19
- package/dist/preview/file-row.html +0 -20
- package/dist/preview/file-toolbar.html +0 -40
- package/dist/preview/file-viewer.html +0 -31
- package/dist/preview/header.html +0 -24
- package/dist/preview/icons-unicode.html +0 -26
- package/dist/preview/index-row.html +0 -25
- package/dist/preview/inputs.html +0 -22
- package/dist/preview/manifesto.html +0 -52
- package/dist/preview/motion-default.js +0 -106
- package/dist/preview/rules.html +0 -16
- package/dist/preview/spacing.html +0 -18
- package/dist/preview/stamps-lore.html +0 -20
- package/dist/preview/stamps.html +0 -14
- package/dist/preview/theme-ink.html +0 -15
- package/dist/preview/type-display.html +0 -16
- package/dist/preview/type-mono.html +0 -15
- package/dist/preview/type-prose.html +0 -11
- package/dist/preview/type-scale.html +0 -20
- package/dist/preview/wordmarks.html +0 -28
- package/dist/robots.txt +0 -8
- package/dist/site/content/globals/navigation.yaml +0 -5
- package/dist/site/content/globals/site.yaml +0 -16
- package/dist/site/content/pages/freddie.yaml +0 -88
- package/dist/site/content/pages/home.yaml +0 -190
- package/dist/site/theme.mjs +0 -368
- package/dist/sitemap.xml +0 -31
- package/dist/slides/deck-stage-overlay.js +0 -63
- package/dist/slides/deck-stage-state.js +0 -81
- package/dist/slides/deck-stage-style.js +0 -117
- package/dist/slides/deck-stage.js +0 -159
- package/dist/slides/index.html +0 -276
- package/dist/src/bootstrap.js +0 -25
- package/dist/src/components/chat.js +0 -199
- package/dist/src/components/community.js +0 -167
- package/dist/src/components/content.js +0 -213
- package/dist/src/components/files-modals.js +0 -107
- package/dist/src/components/files.js +0 -118
- package/dist/src/components/freddie/helpers.js +0 -50
- package/dist/src/components/freddie.js +0 -33
- package/dist/src/components/shell.js +0 -117
- package/dist/src/components/theme-toggle.js +0 -70
- package/dist/src/components.js +0 -52
- package/dist/src/debug.js +0 -30
- package/dist/src/deck-stage.js +0 -21
- package/dist/src/highlight.js +0 -32
- package/dist/src/index.js +0 -86
- package/dist/src/kits/os/about-app.js +0 -52
- package/dist/src/kits/os/app-panes.css +0 -152
- package/dist/src/kits/os/browser-app.js +0 -58
- package/dist/src/kits/os/files-app.js +0 -44
- package/dist/src/kits/os/freddie/helpers.js +0 -59
- package/dist/src/kits/os/freddie/pages-chat.js +0 -143
- package/dist/src/kits/os/freddie/pages-core.js +0 -101
- package/dist/src/kits/os/freddie/pages-os.js +0 -51
- package/dist/src/kits/os/freddie/pages-tools.js +0 -183
- package/dist/src/kits/os/freddie/routes.js +0 -24
- package/dist/src/kits/os/freddie-dashboard.css +0 -51
- package/dist/src/kits/os/freddie-dashboard.js +0 -101
- package/dist/src/kits/os/icons.js +0 -17
- package/dist/src/kits/os/index.js +0 -5
- package/dist/src/kits/os/launcher.css +0 -61
- package/dist/src/kits/os/launcher.js +0 -79
- package/dist/src/kits/os/monitor-app.js +0 -34
- package/dist/src/kits/os/shell.js +0 -214
- package/dist/src/kits/os/terminal-app.js +0 -45
- package/dist/src/kits/os/theme.css +0 -412
- package/dist/src/kits/os/validate.css +0 -19
- package/dist/src/kits/os/validator-app.js +0 -55
- package/dist/src/kits/os/wm.css +0 -115
- package/dist/src/kits/os/wm.js +0 -111
- package/dist/src/markdown.js +0 -39
- package/dist/src/motion.js +0 -35
- package/dist/src/page-html.js +0 -196
- package/dist/src/styles.js +0 -25
- package/dist/src/theme.js +0 -99
- package/dist/src/web-components/ds-chat.js +0 -45
- package/dist/ui_kits/aicat/README.md +0 -7
- package/dist/ui_kits/aicat/app.js +0 -156
- package/dist/ui_kits/aicat/index.html +0 -26
- package/dist/ui_kits/aicat/sample-square.png +0 -0
- package/dist/ui_kits/aicat/sample-svg.svg +0 -1
- package/dist/ui_kits/aicat/sample.pdf +0 -32
- package/dist/ui_kits/blog/README.md +0 -3
- package/dist/ui_kits/blog/index.html +0 -90
- package/dist/ui_kits/chat/README.md +0 -5
- package/dist/ui_kits/chat/app.js +0 -110
- package/dist/ui_kits/chat/index.html +0 -26
- package/dist/ui_kits/chat/sample-square.png +0 -0
- package/dist/ui_kits/chat/sample-svg.svg +0 -1
- package/dist/ui_kits/chat/sample.pdf +0 -32
- package/dist/ui_kits/community/app.js +0 -134
- package/dist/ui_kits/community/index.html +0 -24
- package/dist/ui_kits/dashboard/app.js +0 -92
- package/dist/ui_kits/dashboard/index.html +0 -26
- package/dist/ui_kits/docs/README.md +0 -3
- package/dist/ui_kits/docs/index.html +0 -123
- package/dist/ui_kits/error_404/app.js +0 -56
- package/dist/ui_kits/error_404/index.html +0 -26
- package/dist/ui_kits/file_browser/README.md +0 -48
- package/dist/ui_kits/file_browser/app.js +0 -231
- package/dist/ui_kits/file_browser/index.html +0 -33
- package/dist/ui_kits/gallery/app.js +0 -121
- package/dist/ui_kits/gallery/index.html +0 -26
- package/dist/ui_kits/homepage/README.md +0 -7
- package/dist/ui_kits/homepage/app.js +0 -167
- package/dist/ui_kits/homepage/index.html +0 -46
- package/dist/ui_kits/project_page/README.md +0 -3
- package/dist/ui_kits/project_page/app.js +0 -154
- package/dist/ui_kits/project_page/index.html +0 -45
- package/dist/ui_kits/search/app.js +0 -107
- package/dist/ui_kits/search/index.html +0 -26
- package/dist/ui_kits/settings/app.js +0 -133
- package/dist/ui_kits/settings/index.html +0 -26
- package/dist/ui_kits/signin/app.js +0 -115
- package/dist/ui_kits/signin/index.html +0 -26
- package/dist/ui_kits/slide_deck/app.js +0 -174
- package/dist/ui_kits/slide_deck/index.html +0 -26
- package/dist/ui_kits/system_primer/app.js +0 -152
- package/dist/ui_kits/system_primer/index.html +0 -26
- package/dist/ui_kits/terminal/app.js +0 -150
- package/dist/ui_kits/terminal/index.html +0 -26
- package/dist/vendor/webjsx/applyDiff.js +0 -182
- package/dist/vendor/webjsx/attributes.js +0 -154
- package/dist/vendor/webjsx/constants.js +0 -4
- package/dist/vendor/webjsx/createDOMElement.js +0 -52
- package/dist/vendor/webjsx/createElement.js +0 -75
- package/dist/vendor/webjsx/elementTags.js +0 -115
- package/dist/vendor/webjsx/factory.js +0 -6
- package/dist/vendor/webjsx/index.js +0 -6
- package/dist/vendor/webjsx/jsx-dev-runtime.js +0 -2
- package/dist/vendor/webjsx/jsx-runtime.js +0 -30
- package/dist/vendor/webjsx/jsx.js +0 -2
- package/dist/vendor/webjsx/package.json +0 -39
- package/dist/vendor/webjsx/renderSuspension.js +0 -25
- package/dist/vendor/webjsx/types.js +0 -5
- package/dist/vendor/webjsx/utils.js +0 -84
- package/src/components/overlays.js +0 -151
package/src/theme.js
CHANGED
|
@@ -1,99 +1,99 @@
|
|
|
1
|
-
// 247420 design system — theme controller.
|
|
2
|
-
//
|
|
3
|
-
// Three modes:
|
|
4
|
-
// 'auto' — follow OS (prefers-color-scheme). Live-updates on OS change.
|
|
5
|
-
// 'paper' — force light.
|
|
6
|
-
// 'ink' — force dark.
|
|
7
|
-
//
|
|
8
|
-
// Writes the chosen mode to <html data-theme="..."> so CSS rules in
|
|
9
|
-
// system.css / colors_and_type.css resolve correctly. Persists to
|
|
10
|
-
// localStorage under '247420:theme'. Auto-initializes on import in a
|
|
11
|
-
// browser context; safe no-op on server.
|
|
12
|
-
|
|
13
|
-
const KEY = '247420:theme';
|
|
14
|
-
const VALID = new Set(['auto', 'paper', 'ink']);
|
|
15
|
-
const listeners = new Set();
|
|
16
|
-
let _mq = null;
|
|
17
|
-
let _current = 'auto';
|
|
18
|
-
|
|
19
|
-
function isBrowser() {
|
|
20
|
-
return typeof document !== 'undefined' && typeof window !== 'undefined';
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
function readStored() {
|
|
24
|
-
try {
|
|
25
|
-
const v = window.localStorage.getItem(KEY);
|
|
26
|
-
return VALID.has(v) ? v : null;
|
|
27
|
-
} catch { return null; }
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
function writeStored(mode) {
|
|
31
|
-
try { window.localStorage.setItem(KEY, mode); } catch {}
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
function writeAttr(mode) {
|
|
35
|
-
if (!isBrowser()) return;
|
|
36
|
-
document.documentElement.setAttribute('data-theme', mode);
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
function ensureMq() {
|
|
40
|
-
if (_mq || !isBrowser() || !window.matchMedia) return;
|
|
41
|
-
_mq = window.matchMedia('(prefers-color-scheme: dark)');
|
|
42
|
-
const onChange = () => {
|
|
43
|
-
if (_current === 'auto') {
|
|
44
|
-
// Re-emit so listeners can re-render derived UI even though
|
|
45
|
-
// data-theme stays "auto" — the CSS @media handles the swap.
|
|
46
|
-
for (const cb of listeners) {
|
|
47
|
-
try { cb({ mode: 'auto', resolved: _mq.matches ? 'ink' : 'paper' }); } catch {}
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
};
|
|
51
|
-
if (_mq.addEventListener) _mq.addEventListener('change', onChange);
|
|
52
|
-
else if (_mq.addListener) _mq.addListener(onChange);
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
export function applyTheme(mode) {
|
|
56
|
-
if (!VALID.has(mode)) mode = 'auto';
|
|
57
|
-
_current = mode;
|
|
58
|
-
writeAttr(mode);
|
|
59
|
-
writeStored(mode);
|
|
60
|
-
ensureMq();
|
|
61
|
-
const resolved = mode === 'auto'
|
|
62
|
-
? (_mq && _mq.matches ? 'ink' : 'paper')
|
|
63
|
-
: mode;
|
|
64
|
-
for (const cb of listeners) {
|
|
65
|
-
try { cb({ mode, resolved }); } catch {}
|
|
66
|
-
}
|
|
67
|
-
return mode;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
export function getTheme() {
|
|
71
|
-
return _current;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
export function resolvedTheme() {
|
|
75
|
-
if (_current !== 'auto') return _current;
|
|
76
|
-
ensureMq();
|
|
77
|
-
return _mq && _mq.matches ? 'ink' : 'paper';
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
export function onThemeChange(cb) {
|
|
81
|
-
listeners.add(cb);
|
|
82
|
-
return () => listeners.delete(cb);
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
// Auto-init on browser import. Picks stored value, else falls back to
|
|
86
|
-
// whatever data-theme is already on <html> (set by page-html.js), else 'auto'.
|
|
87
|
-
export function initTheme() {
|
|
88
|
-
if (!isBrowser()) return 'auto';
|
|
89
|
-
const stored = readStored();
|
|
90
|
-
const fromAttr = document.documentElement.getAttribute('data-theme');
|
|
91
|
-
const initial = stored || (VALID.has(fromAttr) ? fromAttr : 'auto');
|
|
92
|
-
applyTheme(initial);
|
|
93
|
-
return initial;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
if (isBrowser()) {
|
|
97
|
-
// Run on next microtask so SSR-injected attributes settle first.
|
|
98
|
-
Promise.resolve().then(() => { try { initTheme(); } catch {} });
|
|
99
|
-
}
|
|
1
|
+
// 247420 design system — theme controller.
|
|
2
|
+
//
|
|
3
|
+
// Three modes:
|
|
4
|
+
// 'auto' — follow OS (prefers-color-scheme). Live-updates on OS change.
|
|
5
|
+
// 'paper' — force light.
|
|
6
|
+
// 'ink' — force dark.
|
|
7
|
+
//
|
|
8
|
+
// Writes the chosen mode to <html data-theme="..."> so CSS rules in
|
|
9
|
+
// system.css / colors_and_type.css resolve correctly. Persists to
|
|
10
|
+
// localStorage under '247420:theme'. Auto-initializes on import in a
|
|
11
|
+
// browser context; safe no-op on server.
|
|
12
|
+
|
|
13
|
+
const KEY = '247420:theme';
|
|
14
|
+
const VALID = new Set(['auto', 'paper', 'ink']);
|
|
15
|
+
const listeners = new Set();
|
|
16
|
+
let _mq = null;
|
|
17
|
+
let _current = 'auto';
|
|
18
|
+
|
|
19
|
+
function isBrowser() {
|
|
20
|
+
return typeof document !== 'undefined' && typeof window !== 'undefined';
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
function readStored() {
|
|
24
|
+
try {
|
|
25
|
+
const v = window.localStorage.getItem(KEY);
|
|
26
|
+
return VALID.has(v) ? v : null;
|
|
27
|
+
} catch { return null; }
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
function writeStored(mode) {
|
|
31
|
+
try { window.localStorage.setItem(KEY, mode); } catch {}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
function writeAttr(mode) {
|
|
35
|
+
if (!isBrowser()) return;
|
|
36
|
+
document.documentElement.setAttribute('data-theme', mode);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
function ensureMq() {
|
|
40
|
+
if (_mq || !isBrowser() || !window.matchMedia) return;
|
|
41
|
+
_mq = window.matchMedia('(prefers-color-scheme: dark)');
|
|
42
|
+
const onChange = () => {
|
|
43
|
+
if (_current === 'auto') {
|
|
44
|
+
// Re-emit so listeners can re-render derived UI even though
|
|
45
|
+
// data-theme stays "auto" — the CSS @media handles the swap.
|
|
46
|
+
for (const cb of listeners) {
|
|
47
|
+
try { cb({ mode: 'auto', resolved: _mq.matches ? 'ink' : 'paper' }); } catch {}
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
if (_mq.addEventListener) _mq.addEventListener('change', onChange);
|
|
52
|
+
else if (_mq.addListener) _mq.addListener(onChange);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
export function applyTheme(mode) {
|
|
56
|
+
if (!VALID.has(mode)) mode = 'auto';
|
|
57
|
+
_current = mode;
|
|
58
|
+
writeAttr(mode);
|
|
59
|
+
writeStored(mode);
|
|
60
|
+
ensureMq();
|
|
61
|
+
const resolved = mode === 'auto'
|
|
62
|
+
? (_mq && _mq.matches ? 'ink' : 'paper')
|
|
63
|
+
: mode;
|
|
64
|
+
for (const cb of listeners) {
|
|
65
|
+
try { cb({ mode, resolved }); } catch {}
|
|
66
|
+
}
|
|
67
|
+
return mode;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
export function getTheme() {
|
|
71
|
+
return _current;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
export function resolvedTheme() {
|
|
75
|
+
if (_current !== 'auto') return _current;
|
|
76
|
+
ensureMq();
|
|
77
|
+
return _mq && _mq.matches ? 'ink' : 'paper';
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
export function onThemeChange(cb) {
|
|
81
|
+
listeners.add(cb);
|
|
82
|
+
return () => listeners.delete(cb);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
// Auto-init on browser import. Picks stored value, else falls back to
|
|
86
|
+
// whatever data-theme is already on <html> (set by page-html.js), else 'auto'.
|
|
87
|
+
export function initTheme() {
|
|
88
|
+
if (!isBrowser()) return 'auto';
|
|
89
|
+
const stored = readStored();
|
|
90
|
+
const fromAttr = document.documentElement.getAttribute('data-theme');
|
|
91
|
+
const initial = stored || (VALID.has(fromAttr) ? fromAttr : 'auto');
|
|
92
|
+
applyTheme(initial);
|
|
93
|
+
return initial;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
if (isBrowser()) {
|
|
97
|
+
// Run on next microtask so SSR-injected attributes settle first.
|
|
98
|
+
Promise.resolve().then(() => { try { initTheme(); } catch {} });
|
|
99
|
+
}
|
|
@@ -1,116 +1,116 @@
|
|
|
1
|
-
// <ds-chat> custom element — auto-registers when SDK loads in a browser.
|
|
2
|
-
// Attributes / properties:
|
|
3
|
-
// el.messages = [{who,text,time,name,...}, ...]
|
|
4
|
-
// el.placeholder, el.title, el.sub, el.disabled
|
|
5
|
-
// Emits a bubbling, composed 'send' event with { detail: { text } } when the
|
|
6
|
-
// user submits via the built-in composer.
|
|
7
|
-
|
|
8
|
-
import * as webjsx from '../../vendor/webjsx/index.js';
|
|
9
|
-
import { Chat, ChatComposer } from '../components/chat.js';
|
|
10
|
-
|
|
11
|
-
class DsChat extends HTMLElement {
|
|
12
|
-
constructor() {
|
|
13
|
-
super();
|
|
14
|
-
this._messages = [];
|
|
15
|
-
this._placeholder = 'type, then ⏎';
|
|
16
|
-
this._title = 'chat';
|
|
17
|
-
this._sub = '';
|
|
18
|
-
this._composerValue = '';
|
|
19
|
-
this._disabled = false;
|
|
20
|
-
this._scrollPending = false;
|
|
21
|
-
}
|
|
22
|
-
static get observedAttributes() { return ['messages', 'placeholder', 'title', 'sub', 'disabled']; }
|
|
23
|
-
attributeChangedCallback(name, _old, val) {
|
|
24
|
-
if (name === 'messages') {
|
|
25
|
-
try { this._messages = JSON.parse(val); } catch { this._messages = []; }
|
|
26
|
-
this._scrollPending = true;
|
|
27
|
-
} else if (name === 'placeholder') {
|
|
28
|
-
this._placeholder = val || '';
|
|
29
|
-
} else if (name === 'title') {
|
|
30
|
-
this._title = val || 'chat';
|
|
31
|
-
} else if (name === 'sub') {
|
|
32
|
-
this._sub = val || '';
|
|
33
|
-
} else if (name === 'disabled') {
|
|
34
|
-
this._disabled = val != null && val !== 'false';
|
|
35
|
-
}
|
|
36
|
-
this._render();
|
|
37
|
-
}
|
|
38
|
-
set messages(v) { this._messages = Array.isArray(v) ? v : []; this._scrollPending = true; this._render(); }
|
|
39
|
-
get messages() { return this._messages; }
|
|
40
|
-
set placeholder(v) { this._placeholder = v || ''; this._render(); }
|
|
41
|
-
get placeholder() { return this._placeholder; }
|
|
42
|
-
set title(v) { this._title = v || 'chat'; this._render(); }
|
|
43
|
-
get title() { return this._title; }
|
|
44
|
-
set sub(v) { this._sub = v || ''; this._render(); }
|
|
45
|
-
get sub() { return this._sub; }
|
|
46
|
-
set disabled(v) { this._disabled = !!v; this._render(); }
|
|
47
|
-
get disabled() { return this._disabled; }
|
|
48
|
-
connectedCallback() {
|
|
49
|
-
this.classList.add('ds-247420');
|
|
50
|
-
this._render();
|
|
51
|
-
}
|
|
52
|
-
_send(text) {
|
|
53
|
-
this._composerValue = '';
|
|
54
|
-
this.dispatchEvent(new CustomEvent('send', { detail: { text }, bubbles: true, composed: true }));
|
|
55
|
-
this._render();
|
|
56
|
-
}
|
|
57
|
-
_render() {
|
|
58
|
-
if (!this.isConnected) return;
|
|
59
|
-
// The factory captures `value` at construction time, so the click handler
|
|
60
|
-
// it builds sees a stale empty string. Pass a no-op and own send wiring
|
|
61
|
-
// ourselves by reading the live textarea below.
|
|
62
|
-
const self = this;
|
|
63
|
-
const composer = ChatComposer({
|
|
64
|
-
value: this._composerValue,
|
|
65
|
-
placeholder: this._placeholder,
|
|
66
|
-
disabled: this._disabled,
|
|
67
|
-
onInput: (v) => { self._composerValue = v; self._syncSendButton(); },
|
|
68
|
-
onSend: () => { /* superseded by live read below */ },
|
|
69
|
-
});
|
|
70
|
-
const node = Chat({
|
|
71
|
-
title: this._title,
|
|
72
|
-
sub: this._sub,
|
|
73
|
-
messages: this._messages,
|
|
74
|
-
composer,
|
|
75
|
-
});
|
|
76
|
-
webjsx.applyDiff(this, node);
|
|
77
|
-
// Wire send button + Enter-key to read the LIVE textarea value rather than
|
|
78
|
-
// the closure's stale prop. Idempotent — only attach once per composer DOM node.
|
|
79
|
-
const composerEl = this.querySelector('.chat-composer');
|
|
80
|
-
if (composerEl && !composerEl._dsBound) {
|
|
81
|
-
composerEl._dsBound = true;
|
|
82
|
-
const ta = composerEl.querySelector('textarea');
|
|
83
|
-
const btn = composerEl.querySelector('button.send');
|
|
84
|
-
const submit = () => {
|
|
85
|
-
const v = ta ? ta.value.trim() : '';
|
|
86
|
-
if (!v || this._disabled) return;
|
|
87
|
-
if (ta) ta.value = '';
|
|
88
|
-
this._send(v);
|
|
89
|
-
};
|
|
90
|
-
if (btn) btn.addEventListener('click', (e) => { e.preventDefault(); submit(); });
|
|
91
|
-
if (ta) ta.addEventListener('keydown', (e) => {
|
|
92
|
-
if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); submit(); }
|
|
93
|
-
});
|
|
94
|
-
}
|
|
95
|
-
if (this._scrollPending) {
|
|
96
|
-
this._scrollPending = false;
|
|
97
|
-
const thread = this.querySelector('.chat-thread');
|
|
98
|
-
if (thread) thread.scrollTop = thread.scrollHeight;
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
_syncSendButton() {
|
|
102
|
-
const btn = this.querySelector('.chat-composer button.send');
|
|
103
|
-
if (btn) btn.disabled = this._disabled || !this._composerValue.trim();
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
export { DsChat };
|
|
108
|
-
|
|
109
|
-
let _registered = false;
|
|
110
|
-
export function registerChatElement() {
|
|
111
|
-
if (_registered) return;
|
|
112
|
-
if (typeof customElements === 'undefined') return;
|
|
113
|
-
if (customElements.get('ds-chat')) { _registered = true; return; }
|
|
114
|
-
customElements.define('ds-chat', DsChat);
|
|
115
|
-
_registered = true;
|
|
116
|
-
}
|
|
1
|
+
// <ds-chat> custom element — auto-registers when SDK loads in a browser.
|
|
2
|
+
// Attributes / properties:
|
|
3
|
+
// el.messages = [{who,text,time,name,...}, ...]
|
|
4
|
+
// el.placeholder, el.title, el.sub, el.disabled
|
|
5
|
+
// Emits a bubbling, composed 'send' event with { detail: { text } } when the
|
|
6
|
+
// user submits via the built-in composer.
|
|
7
|
+
|
|
8
|
+
import * as webjsx from '../../vendor/webjsx/index.js';
|
|
9
|
+
import { Chat, ChatComposer } from '../components/chat.js';
|
|
10
|
+
|
|
11
|
+
class DsChat extends HTMLElement {
|
|
12
|
+
constructor() {
|
|
13
|
+
super();
|
|
14
|
+
this._messages = [];
|
|
15
|
+
this._placeholder = 'type, then ⏎';
|
|
16
|
+
this._title = 'chat';
|
|
17
|
+
this._sub = '';
|
|
18
|
+
this._composerValue = '';
|
|
19
|
+
this._disabled = false;
|
|
20
|
+
this._scrollPending = false;
|
|
21
|
+
}
|
|
22
|
+
static get observedAttributes() { return ['messages', 'placeholder', 'title', 'sub', 'disabled']; }
|
|
23
|
+
attributeChangedCallback(name, _old, val) {
|
|
24
|
+
if (name === 'messages') {
|
|
25
|
+
try { this._messages = JSON.parse(val); } catch { this._messages = []; }
|
|
26
|
+
this._scrollPending = true;
|
|
27
|
+
} else if (name === 'placeholder') {
|
|
28
|
+
this._placeholder = val || '';
|
|
29
|
+
} else if (name === 'title') {
|
|
30
|
+
this._title = val || 'chat';
|
|
31
|
+
} else if (name === 'sub') {
|
|
32
|
+
this._sub = val || '';
|
|
33
|
+
} else if (name === 'disabled') {
|
|
34
|
+
this._disabled = val != null && val !== 'false';
|
|
35
|
+
}
|
|
36
|
+
this._render();
|
|
37
|
+
}
|
|
38
|
+
set messages(v) { this._messages = Array.isArray(v) ? v : []; this._scrollPending = true; this._render(); }
|
|
39
|
+
get messages() { return this._messages; }
|
|
40
|
+
set placeholder(v) { this._placeholder = v || ''; this._render(); }
|
|
41
|
+
get placeholder() { return this._placeholder; }
|
|
42
|
+
set title(v) { this._title = v || 'chat'; this._render(); }
|
|
43
|
+
get title() { return this._title; }
|
|
44
|
+
set sub(v) { this._sub = v || ''; this._render(); }
|
|
45
|
+
get sub() { return this._sub; }
|
|
46
|
+
set disabled(v) { this._disabled = !!v; this._render(); }
|
|
47
|
+
get disabled() { return this._disabled; }
|
|
48
|
+
connectedCallback() {
|
|
49
|
+
this.classList.add('ds-247420');
|
|
50
|
+
this._render();
|
|
51
|
+
}
|
|
52
|
+
_send(text) {
|
|
53
|
+
this._composerValue = '';
|
|
54
|
+
this.dispatchEvent(new CustomEvent('send', { detail: { text }, bubbles: true, composed: true }));
|
|
55
|
+
this._render();
|
|
56
|
+
}
|
|
57
|
+
_render() {
|
|
58
|
+
if (!this.isConnected) return;
|
|
59
|
+
// The factory captures `value` at construction time, so the click handler
|
|
60
|
+
// it builds sees a stale empty string. Pass a no-op and own send wiring
|
|
61
|
+
// ourselves by reading the live textarea below.
|
|
62
|
+
const self = this;
|
|
63
|
+
const composer = ChatComposer({
|
|
64
|
+
value: this._composerValue,
|
|
65
|
+
placeholder: this._placeholder,
|
|
66
|
+
disabled: this._disabled,
|
|
67
|
+
onInput: (v) => { self._composerValue = v; self._syncSendButton(); },
|
|
68
|
+
onSend: () => { /* superseded by live read below */ },
|
|
69
|
+
});
|
|
70
|
+
const node = Chat({
|
|
71
|
+
title: this._title,
|
|
72
|
+
sub: this._sub,
|
|
73
|
+
messages: this._messages,
|
|
74
|
+
composer,
|
|
75
|
+
});
|
|
76
|
+
webjsx.applyDiff(this, node);
|
|
77
|
+
// Wire send button + Enter-key to read the LIVE textarea value rather than
|
|
78
|
+
// the closure's stale prop. Idempotent — only attach once per composer DOM node.
|
|
79
|
+
const composerEl = this.querySelector('.chat-composer');
|
|
80
|
+
if (composerEl && !composerEl._dsBound) {
|
|
81
|
+
composerEl._dsBound = true;
|
|
82
|
+
const ta = composerEl.querySelector('textarea');
|
|
83
|
+
const btn = composerEl.querySelector('button.send');
|
|
84
|
+
const submit = () => {
|
|
85
|
+
const v = ta ? ta.value.trim() : '';
|
|
86
|
+
if (!v || this._disabled) return;
|
|
87
|
+
if (ta) ta.value = '';
|
|
88
|
+
this._send(v);
|
|
89
|
+
};
|
|
90
|
+
if (btn) btn.addEventListener('click', (e) => { e.preventDefault(); submit(); });
|
|
91
|
+
if (ta) ta.addEventListener('keydown', (e) => {
|
|
92
|
+
if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); submit(); }
|
|
93
|
+
});
|
|
94
|
+
}
|
|
95
|
+
if (this._scrollPending) {
|
|
96
|
+
this._scrollPending = false;
|
|
97
|
+
const thread = this.querySelector('.chat-thread');
|
|
98
|
+
if (thread) thread.scrollTop = thread.scrollHeight;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
_syncSendButton() {
|
|
102
|
+
const btn = this.querySelector('.chat-composer button.send');
|
|
103
|
+
if (btn) btn.disabled = this._disabled || !this._composerValue.trim();
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
export { DsChat };
|
|
108
|
+
|
|
109
|
+
let _registered = false;
|
|
110
|
+
export function registerChatElement() {
|
|
111
|
+
if (_registered) return;
|
|
112
|
+
if (typeof customElements === 'undefined') return;
|
|
113
|
+
if (customElements.get('ds-chat')) { _registered = true; return; }
|
|
114
|
+
customElements.define('ds-chat', DsChat);
|
|
115
|
+
_registered = true;
|
|
116
|
+
}
|
package/dist/.nojekyll
DELETED
|
File without changes
|