freddie 0.0.74 → 0.0.75
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/package.json +1 -1
- package/src/web/app.js +70 -568
- package/src/web/server.js +4 -0
- package/src/web/vendor/anentrypoint-design/desktop/freddie-dashboard.css +32 -0
- package/src/web/vendor/anentrypoint-design/desktop/freddie-dashboard.js +405 -0
- package/src/web/vendor/anentrypoint-design/desktop/icons.js +17 -0
- package/src/web/vendor/anentrypoint-design/desktop/index.js +3 -0
- package/src/web/vendor/anentrypoint-design/desktop/launcher.css +44 -0
- package/src/web/vendor/anentrypoint-design/desktop/shell.js +187 -0
- package/src/web/vendor/anentrypoint-design/desktop/theme.css +409 -0
- package/src/web/vendor/anentrypoint-design/desktop/validate.css +19 -0
- package/src/web/vendor/anentrypoint-design/desktop/wm.css +115 -0
|
@@ -0,0 +1,187 @@
|
|
|
1
|
+
import { icons } from './icons.js';
|
|
2
|
+
|
|
3
|
+
const THEME_CSS_URL = new URL('./theme.css', import.meta.url).href;
|
|
4
|
+
|
|
5
|
+
function ensureCss(href) {
|
|
6
|
+
if (document.querySelector('link[data-os-theme]')) return;
|
|
7
|
+
const l = document.createElement('link');
|
|
8
|
+
l.rel = 'stylesheet';
|
|
9
|
+
l.href = href || THEME_CSS_URL;
|
|
10
|
+
l.dataset.osTheme = '1';
|
|
11
|
+
document.head.appendChild(l);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
function ic(svg) {
|
|
15
|
+
const s = document.createElement('span');
|
|
16
|
+
s.className = 'ic';
|
|
17
|
+
s.innerHTML = svg;
|
|
18
|
+
return s;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
function makeBtn(svg, label, role) {
|
|
22
|
+
const b = document.createElement('button');
|
|
23
|
+
b.className = 'os-btn';
|
|
24
|
+
b.type = 'button';
|
|
25
|
+
if (role) b.dataset.role = role;
|
|
26
|
+
if (svg) b.append(ic(svg));
|
|
27
|
+
if (label) b.append(Object.assign(document.createElement('span'), { textContent: label }));
|
|
28
|
+
return b;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
export function createDesktopShell({ root = document.body, wm, registry, brand = 'desktop', themeUrl, onNewInstance, autoBoot = false } = {}) {
|
|
32
|
+
if (!wm) throw new Error('createDesktopShell: wm is required');
|
|
33
|
+
if (!registry) throw new Error('createDesktopShell: registry is required');
|
|
34
|
+
ensureCss(themeUrl);
|
|
35
|
+
|
|
36
|
+
const osRoot = document.createElement('div');
|
|
37
|
+
osRoot.className = 'os-root';
|
|
38
|
+
root.appendChild(osRoot);
|
|
39
|
+
|
|
40
|
+
const menubar = document.createElement('div');
|
|
41
|
+
menubar.className = 'os-menubar';
|
|
42
|
+
|
|
43
|
+
const homeBtn = makeBtn(icons.home, '', 'home');
|
|
44
|
+
homeBtn.title = 'apps';
|
|
45
|
+
|
|
46
|
+
const brandEl = document.createElement('span');
|
|
47
|
+
brandEl.className = 'os-brand';
|
|
48
|
+
brandEl.textContent = brand;
|
|
49
|
+
|
|
50
|
+
const appsBtn = makeBtn(icons.apps, 'apps', 'apps');
|
|
51
|
+
const newInstBtn = onNewInstance ? makeBtn(icons.plus, 'instance', 'add') : null;
|
|
52
|
+
|
|
53
|
+
const instSwitch = document.createElement('div');
|
|
54
|
+
instSwitch.className = 'os-instances';
|
|
55
|
+
|
|
56
|
+
const spacer = document.createElement('div');
|
|
57
|
+
spacer.className = 'os-spacer';
|
|
58
|
+
|
|
59
|
+
const tray = document.createElement('div');
|
|
60
|
+
tray.className = 'os-tray';
|
|
61
|
+
const clock = document.createElement('span');
|
|
62
|
+
clock.className = 'os-clock';
|
|
63
|
+
tray.appendChild(clock);
|
|
64
|
+
|
|
65
|
+
menubar.append(homeBtn, brandEl, appsBtn);
|
|
66
|
+
if (newInstBtn) menubar.append(newInstBtn);
|
|
67
|
+
menubar.append(instSwitch, spacer, tray);
|
|
68
|
+
|
|
69
|
+
const appsMenu = document.createElement('div');
|
|
70
|
+
appsMenu.className = 'os-menu';
|
|
71
|
+
|
|
72
|
+
const sideRail = document.createElement('div');
|
|
73
|
+
sideRail.className = 'os-side-rail';
|
|
74
|
+
|
|
75
|
+
const drawer = document.createElement('div');
|
|
76
|
+
drawer.className = 'os-drawer';
|
|
77
|
+
drawer.setAttribute('aria-hidden', 'true');
|
|
78
|
+
const drawerHeader = document.createElement('div');
|
|
79
|
+
drawerHeader.className = 'os-drawer-head';
|
|
80
|
+
const drawerTitle = document.createElement('span');
|
|
81
|
+
drawerTitle.className = 'os-drawer-title';
|
|
82
|
+
drawerTitle.textContent = 'apps';
|
|
83
|
+
const drawerClose = document.createElement('button');
|
|
84
|
+
drawerClose.className = 'os-drawer-close';
|
|
85
|
+
drawerClose.type = 'button';
|
|
86
|
+
drawerClose.append(ic(icons.close));
|
|
87
|
+
drawerHeader.append(drawerTitle, drawerClose);
|
|
88
|
+
const drawerGrid = document.createElement('div');
|
|
89
|
+
drawerGrid.className = 'os-drawer-grid';
|
|
90
|
+
drawer.append(drawerHeader, drawerGrid);
|
|
91
|
+
|
|
92
|
+
const apps = typeof registry.list === 'function' ? registry.list() : [...registry.values()];
|
|
93
|
+
|
|
94
|
+
for (const app of apps) {
|
|
95
|
+
const iconSvg = app.icon || icons[app.id] || '';
|
|
96
|
+
const menuBtn = makeBtn(iconSvg, app.name);
|
|
97
|
+
menuBtn.addEventListener('click', () => { closeMenu(); openApp(app.id); });
|
|
98
|
+
appsMenu.appendChild(menuBtn);
|
|
99
|
+
|
|
100
|
+
const railBtn = document.createElement('button');
|
|
101
|
+
railBtn.className = 'os-rail-btn';
|
|
102
|
+
railBtn.type = 'button';
|
|
103
|
+
railBtn.title = app.name;
|
|
104
|
+
railBtn.append(ic(iconSvg));
|
|
105
|
+
railBtn.addEventListener('click', () => openApp(app.id));
|
|
106
|
+
sideRail.appendChild(railBtn);
|
|
107
|
+
|
|
108
|
+
const tile = document.createElement('button');
|
|
109
|
+
tile.className = 'os-drawer-tile';
|
|
110
|
+
tile.type = 'button';
|
|
111
|
+
tile.append(ic(iconSvg), Object.assign(document.createElement('span'), { className: 'lbl', textContent: app.name }));
|
|
112
|
+
tile.addEventListener('click', () => { closeDrawer(); openApp(app.id); });
|
|
113
|
+
drawerGrid.appendChild(tile);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
const taskbar = document.createElement('div');
|
|
117
|
+
taskbar.className = 'os-taskbar';
|
|
118
|
+
|
|
119
|
+
osRoot.append(menubar, appsMenu, taskbar);
|
|
120
|
+
document.body.append(sideRail, drawer);
|
|
121
|
+
|
|
122
|
+
function openMenu() { appsMenu.classList.add('open'); }
|
|
123
|
+
function closeMenu() { appsMenu.classList.remove('open'); }
|
|
124
|
+
function openDrawer() { drawer.classList.add('open'); drawer.setAttribute('aria-hidden', 'false'); }
|
|
125
|
+
function closeDrawer() { drawer.classList.remove('open'); drawer.setAttribute('aria-hidden', 'true'); }
|
|
126
|
+
|
|
127
|
+
appsBtn.addEventListener('click', e => { e.stopPropagation(); appsMenu.classList.toggle('open'); });
|
|
128
|
+
homeBtn.addEventListener('click', e => { e.stopPropagation(); drawer.classList.contains('open') ? closeDrawer() : openDrawer(); });
|
|
129
|
+
drawerClose.addEventListener('click', closeDrawer);
|
|
130
|
+
drawer.addEventListener('click', e => { if (e.target === drawer) closeDrawer(); });
|
|
131
|
+
document.addEventListener('click', e => {
|
|
132
|
+
if (!appsMenu.contains(e.target) && !appsBtn.contains(e.target)) closeMenu();
|
|
133
|
+
});
|
|
134
|
+
document.addEventListener('keydown', e => {
|
|
135
|
+
if (e.key === 'Escape') { closeMenu(); closeDrawer(); }
|
|
136
|
+
});
|
|
137
|
+
|
|
138
|
+
function tickClock() { clock.textContent = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); }
|
|
139
|
+
tickClock();
|
|
140
|
+
const clockTimer = setInterval(tickClock, 30000);
|
|
141
|
+
|
|
142
|
+
let activeContext = null;
|
|
143
|
+
function setContext(ctx) { activeContext = ctx; }
|
|
144
|
+
|
|
145
|
+
function refreshTaskbar() {
|
|
146
|
+
taskbar.innerHTML = '';
|
|
147
|
+
for (const w of wm.list()) {
|
|
148
|
+
const t = document.createElement('button');
|
|
149
|
+
t.className = 'os-task' + (w.focused ? ' focused' : '');
|
|
150
|
+
t.type = 'button';
|
|
151
|
+
t.textContent = w.title;
|
|
152
|
+
t.dataset.winId = w.id;
|
|
153
|
+
t.addEventListener('click', () => wm.focus(w.id));
|
|
154
|
+
taskbar.appendChild(t);
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
function openApp(appId) {
|
|
159
|
+
const app = (typeof registry.get === 'function') ? registry.get(appId) : registry[appId];
|
|
160
|
+
if (!app) throw new Error('unknown app: ' + appId);
|
|
161
|
+
const ctx = { ...(activeContext || {}), registry, openApp, wm };
|
|
162
|
+
const result = app.factory(ctx);
|
|
163
|
+
const finish = (r) => {
|
|
164
|
+
const sz = app.defaultSize || { w: 520, h: 360 };
|
|
165
|
+
const titlePrefix = (activeContext && activeContext.titlePrefix) ? activeContext.titlePrefix + ' · ' : '';
|
|
166
|
+
const win = wm.open({ title: titlePrefix + app.name, body: r.node, kind: appId, width: sz.w, height: sz.h, x: 100 + (wm.count * 28) % 240, y: 80 + (wm.count * 22) % 180 });
|
|
167
|
+
win._app = { id: appId, dispose: r.dispose };
|
|
168
|
+
refreshTaskbar();
|
|
169
|
+
return win;
|
|
170
|
+
};
|
|
171
|
+
return (result && typeof result.then === 'function') ? result.then(finish) : finish(result);
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
if (newInstBtn) newInstBtn.addEventListener('click', () => onNewInstance && onNewInstance({ instSwitch, setContext, openApp }));
|
|
175
|
+
|
|
176
|
+
const taskTimer = setInterval(refreshTaskbar, 500);
|
|
177
|
+
|
|
178
|
+
const api = {
|
|
179
|
+
wm, registry, openApp, setContext, refreshTaskbar,
|
|
180
|
+
openDrawer, closeDrawer, openMenu, closeMenu,
|
|
181
|
+
elements: { osRoot, menubar, taskbar, appsMenu, sideRail, drawer, instSwitch, homeBtn, appsBtn },
|
|
182
|
+
dispose() { clearInterval(clockTimer); clearInterval(taskTimer); osRoot.remove(); sideRail.remove(); drawer.remove(); },
|
|
183
|
+
};
|
|
184
|
+
|
|
185
|
+
if (autoBoot && typeof autoBoot === 'string') openApp(autoBoot);
|
|
186
|
+
return api;
|
|
187
|
+
}
|
|
@@ -0,0 +1,409 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--os-accent: var(--panel-accent, #3F8A4A);
|
|
3
|
+
--os-accent-2: var(--panel-accent-2, #2B6B36);
|
|
4
|
+
--os-accent-soft: var(--panel-select, #D8ECCB);
|
|
5
|
+
--os-bg-0: var(--panel-0, #F5F0E4);
|
|
6
|
+
--os-bg-1: var(--panel-1, #FBF6EB);
|
|
7
|
+
--os-bg-2: var(--panel-2, #F0E9DA);
|
|
8
|
+
--os-bg-3: var(--panel-3, #E3DAC7);
|
|
9
|
+
--os-fg: var(--panel-text, #1F1B16);
|
|
10
|
+
--os-fg-2: var(--panel-text-2, #5A5246);
|
|
11
|
+
--os-fg-3: var(--panel-text-3, #857B6C);
|
|
12
|
+
--os-red: var(--warn, #FF6B4A);
|
|
13
|
+
--os-amber: var(--sun, #FFD86B);
|
|
14
|
+
--os-green: var(--green, #3F8A4A);
|
|
15
|
+
--os-radius: var(--r-2, 10px);
|
|
16
|
+
--os-radius-sm: var(--r-1, 6px);
|
|
17
|
+
--os-bar-h: 44px;
|
|
18
|
+
--os-bar-h-mobile: 52px;
|
|
19
|
+
--os-rail-w: 64px;
|
|
20
|
+
--os-tap: 44px;
|
|
21
|
+
--os-font: var(--ff-ui, 'Nunito', sans-serif);
|
|
22
|
+
--os-display: var(--ff-display, 'Archivo Black', 'Archivo', sans-serif);
|
|
23
|
+
--os-mono: var(--ff-mono, 'JetBrains Mono', ui-monospace, monospace);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
html, body {
|
|
27
|
+
background: var(--os-bg-0);
|
|
28
|
+
color: var(--os-fg);
|
|
29
|
+
font-family: var(--os-font);
|
|
30
|
+
-webkit-font-smoothing: antialiased;
|
|
31
|
+
text-rendering: optimizeLegibility;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.os-menubar, .os-taskbar {
|
|
35
|
+
background: var(--os-bg-2);
|
|
36
|
+
border: none;
|
|
37
|
+
color: var(--os-fg);
|
|
38
|
+
font: 13px var(--os-font);
|
|
39
|
+
height: var(--os-bar-h);
|
|
40
|
+
padding: 0 12px;
|
|
41
|
+
gap: 6px;
|
|
42
|
+
box-shadow: none;
|
|
43
|
+
display: flex;
|
|
44
|
+
align-items: center;
|
|
45
|
+
flex-wrap: nowrap;
|
|
46
|
+
min-width: 0;
|
|
47
|
+
}
|
|
48
|
+
.os-menubar > *, .os-taskbar > * { flex-shrink: 0; }
|
|
49
|
+
.os-menubar .os-spacer { flex: 1 1 auto; min-width: 0; }
|
|
50
|
+
.os-menubar .os-tray { margin-left: auto; }
|
|
51
|
+
|
|
52
|
+
.os-brand {
|
|
53
|
+
color: var(--os-fg);
|
|
54
|
+
font-family: var(--os-display);
|
|
55
|
+
font-weight: 700;
|
|
56
|
+
letter-spacing: -0.01em;
|
|
57
|
+
font-size: 15px;
|
|
58
|
+
margin-right: 14px;
|
|
59
|
+
display: inline-flex;
|
|
60
|
+
align-items: center;
|
|
61
|
+
gap: 8px;
|
|
62
|
+
text-transform: lowercase;
|
|
63
|
+
}
|
|
64
|
+
.os-brand::before {
|
|
65
|
+
content: '';
|
|
66
|
+
display: inline-block;
|
|
67
|
+
width: 8px; height: 8px;
|
|
68
|
+
border-radius: 50%;
|
|
69
|
+
background: var(--os-accent);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.os-btn {
|
|
73
|
+
background: transparent;
|
|
74
|
+
color: var(--os-fg-2);
|
|
75
|
+
border: none;
|
|
76
|
+
padding: 7px 14px;
|
|
77
|
+
cursor: pointer;
|
|
78
|
+
font: inherit;
|
|
79
|
+
font-family: var(--os-font);
|
|
80
|
+
font-size: 13px;
|
|
81
|
+
border-radius: 999px;
|
|
82
|
+
transition: background 80ms ease, color 80ms ease;
|
|
83
|
+
display: inline-flex;
|
|
84
|
+
align-items: center;
|
|
85
|
+
gap: 6px;
|
|
86
|
+
outline: none;
|
|
87
|
+
text-transform: lowercase;
|
|
88
|
+
}
|
|
89
|
+
.os-btn:hover { background: var(--panel-hover, var(--os-bg-2)); color: var(--os-fg); }
|
|
90
|
+
.os-btn.active, .os-btn[aria-pressed="true"] { background: var(--panel-select, var(--os-accent-soft)); color: var(--os-fg); }
|
|
91
|
+
.os-btn:focus-visible { background: var(--panel-hover, var(--os-bg-2)); }
|
|
92
|
+
.os-btn .ic { color: var(--os-accent); display: inline-flex; width: 16px; height: 16px; }
|
|
93
|
+
.os-btn .ic svg { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; }
|
|
94
|
+
|
|
95
|
+
.os-menu {
|
|
96
|
+
position: absolute;
|
|
97
|
+
background: var(--os-bg-1);
|
|
98
|
+
border: none;
|
|
99
|
+
border-radius: var(--r-3, 18px);
|
|
100
|
+
padding: 8px;
|
|
101
|
+
min-width: 220px;
|
|
102
|
+
top: calc(var(--os-bar-h) + 4px);
|
|
103
|
+
left: 8px;
|
|
104
|
+
z-index: 9500;
|
|
105
|
+
display: none;
|
|
106
|
+
flex-direction: column;
|
|
107
|
+
gap: 2px;
|
|
108
|
+
pointer-events: auto;
|
|
109
|
+
}
|
|
110
|
+
.os-menu.open { display: flex; }
|
|
111
|
+
.os-menu .os-btn {
|
|
112
|
+
width: 100%;
|
|
113
|
+
text-align: left;
|
|
114
|
+
border-radius: var(--os-radius-sm);
|
|
115
|
+
padding: 8px 10px;
|
|
116
|
+
color: var(--os-fg);
|
|
117
|
+
justify-content: flex-start;
|
|
118
|
+
}
|
|
119
|
+
.os-menu .os-btn:hover { background: var(--panel-hover, var(--os-bg-2)); color: var(--os-fg); }
|
|
120
|
+
|
|
121
|
+
.os-clock {
|
|
122
|
+
color: var(--os-fg-2);
|
|
123
|
+
font-variant-numeric: tabular-nums;
|
|
124
|
+
font-family: var(--os-mono);
|
|
125
|
+
padding: 0 10px;
|
|
126
|
+
font-size: 12px;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.os-task {
|
|
130
|
+
border: none;
|
|
131
|
+
background: var(--os-bg-1);
|
|
132
|
+
color: var(--os-fg-2);
|
|
133
|
+
border-radius: 999px;
|
|
134
|
+
padding: 6px 14px;
|
|
135
|
+
font-size: 12px;
|
|
136
|
+
font-family: var(--os-font);
|
|
137
|
+
transition: background 80ms ease, color 80ms ease, box-shadow 80ms ease;
|
|
138
|
+
max-width: 200px;
|
|
139
|
+
cursor: pointer;
|
|
140
|
+
outline: none;
|
|
141
|
+
white-space: nowrap;
|
|
142
|
+
overflow: hidden;
|
|
143
|
+
text-overflow: ellipsis;
|
|
144
|
+
text-transform: lowercase;
|
|
145
|
+
}
|
|
146
|
+
.os-task:hover { background: var(--panel-hover, var(--os-bg-2)); color: var(--os-fg); }
|
|
147
|
+
.os-task.focused {
|
|
148
|
+
background: var(--panel-select, var(--os-accent-soft));
|
|
149
|
+
color: var(--os-fg);
|
|
150
|
+
font-weight: 600;
|
|
151
|
+
box-shadow: inset 4px 0 0 var(--os-accent);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.wm-win {
|
|
155
|
+
background: var(--os-bg-1) !important;
|
|
156
|
+
border: none !important;
|
|
157
|
+
border-radius: var(--r-3, 18px) !important;
|
|
158
|
+
box-shadow: none !important;
|
|
159
|
+
overflow: hidden;
|
|
160
|
+
}
|
|
161
|
+
.wm-win.wm-focused {
|
|
162
|
+
border: none !important;
|
|
163
|
+
box-shadow: inset 4px 0 0 var(--os-accent) !important;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.wm-bar {
|
|
167
|
+
background: var(--os-bg-2) !important;
|
|
168
|
+
border: none !important;
|
|
169
|
+
padding: 8px 12px !important;
|
|
170
|
+
gap: 10px !important;
|
|
171
|
+
}
|
|
172
|
+
.wm-title {
|
|
173
|
+
font: 13px var(--os-font) !important;
|
|
174
|
+
color: var(--os-fg-2) !important;
|
|
175
|
+
letter-spacing: 0.005em;
|
|
176
|
+
text-align: center;
|
|
177
|
+
font-weight: 600;
|
|
178
|
+
text-transform: lowercase;
|
|
179
|
+
}
|
|
180
|
+
.wm-btns { gap: 6px !important; order: -1; }
|
|
181
|
+
.wm-btn {
|
|
182
|
+
width: 22px !important;
|
|
183
|
+
height: 22px !important;
|
|
184
|
+
border-radius: var(--r-1, 6px) !important;
|
|
185
|
+
border: none !important;
|
|
186
|
+
background: var(--os-bg-3) !important;
|
|
187
|
+
color: var(--os-fg-2) !important;
|
|
188
|
+
padding: 0 !important;
|
|
189
|
+
cursor: pointer;
|
|
190
|
+
font: 600 12px var(--os-mono) !important;
|
|
191
|
+
line-height: 1 !important;
|
|
192
|
+
display: inline-flex !important;
|
|
193
|
+
align-items: center;
|
|
194
|
+
justify-content: center;
|
|
195
|
+
transition: background 100ms ease, color 100ms ease;
|
|
196
|
+
}
|
|
197
|
+
.wm-btn:hover { background: var(--panel-hover, var(--os-bg-2)) !important; color: var(--os-fg) !important; }
|
|
198
|
+
|
|
199
|
+
.wm-resize {
|
|
200
|
+
background: transparent !important;
|
|
201
|
+
width: 14px !important;
|
|
202
|
+
height: 14px !important;
|
|
203
|
+
color: var(--os-fg-3);
|
|
204
|
+
opacity: 0.4;
|
|
205
|
+
font: 10px var(--os-mono);
|
|
206
|
+
display: flex;
|
|
207
|
+
align-items: flex-end;
|
|
208
|
+
justify-content: flex-end;
|
|
209
|
+
line-height: 1;
|
|
210
|
+
}
|
|
211
|
+
.wm-resize::after { content: '\25E2'; }
|
|
212
|
+
.wm-body { background: var(--os-bg-1) !important; }
|
|
213
|
+
|
|
214
|
+
.os-side-rail {
|
|
215
|
+
position: fixed;
|
|
216
|
+
left: 0; top: 0; bottom: 0;
|
|
217
|
+
width: var(--os-rail-w);
|
|
218
|
+
background: var(--os-bg-2);
|
|
219
|
+
border: none;
|
|
220
|
+
display: none;
|
|
221
|
+
flex-direction: column;
|
|
222
|
+
align-items: center;
|
|
223
|
+
padding: 12px 0;
|
|
224
|
+
gap: 6px;
|
|
225
|
+
z-index: 9100;
|
|
226
|
+
pointer-events: auto;
|
|
227
|
+
}
|
|
228
|
+
.os-rail-btn {
|
|
229
|
+
width: 48px; height: 48px;
|
|
230
|
+
border-radius: var(--os-radius-sm);
|
|
231
|
+
background: transparent;
|
|
232
|
+
border: none;
|
|
233
|
+
color: var(--os-fg);
|
|
234
|
+
cursor: pointer;
|
|
235
|
+
display: flex; align-items: center; justify-content: center;
|
|
236
|
+
transition: background 100ms ease;
|
|
237
|
+
padding: 0;
|
|
238
|
+
outline: none;
|
|
239
|
+
}
|
|
240
|
+
.os-rail-btn:hover { background: var(--panel-hover, var(--os-bg-1)); }
|
|
241
|
+
.os-rail-btn:active { background: var(--panel-select, var(--os-accent-soft)); }
|
|
242
|
+
.os-rail-btn .ic { color: var(--os-accent); display: inline-flex; }
|
|
243
|
+
.os-rail-btn .ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; }
|
|
244
|
+
|
|
245
|
+
.os-drawer {
|
|
246
|
+
position: fixed;
|
|
247
|
+
inset: 0;
|
|
248
|
+
background: var(--os-bg-0);
|
|
249
|
+
z-index: 9700;
|
|
250
|
+
pointer-events: auto;
|
|
251
|
+
display: none;
|
|
252
|
+
flex-direction: column;
|
|
253
|
+
opacity: 0;
|
|
254
|
+
transform: translateY(8px);
|
|
255
|
+
transition: opacity 180ms ease, transform 180ms ease;
|
|
256
|
+
padding-top: env(safe-area-inset-top, 0);
|
|
257
|
+
padding-bottom: env(safe-area-inset-bottom, 0);
|
|
258
|
+
}
|
|
259
|
+
.os-drawer.open { display: flex; opacity: 1; transform: translateY(0); }
|
|
260
|
+
.os-drawer-head {
|
|
261
|
+
display: flex; align-items: center; justify-content: space-between;
|
|
262
|
+
padding: 12px 16px;
|
|
263
|
+
border: none;
|
|
264
|
+
height: 56px;
|
|
265
|
+
box-sizing: border-box;
|
|
266
|
+
background: var(--os-bg-2);
|
|
267
|
+
}
|
|
268
|
+
.os-drawer-title { color: var(--os-fg); font-family: var(--os-display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; text-transform: lowercase; }
|
|
269
|
+
.os-drawer-close {
|
|
270
|
+
width: 44px; height: 44px;
|
|
271
|
+
border: none; background: transparent;
|
|
272
|
+
color: var(--os-fg-2);
|
|
273
|
+
cursor: pointer;
|
|
274
|
+
display: flex; align-items: center; justify-content: center;
|
|
275
|
+
border-radius: var(--os-radius-sm);
|
|
276
|
+
outline: none;
|
|
277
|
+
}
|
|
278
|
+
.os-drawer-close:hover { background: var(--panel-hover, var(--os-bg-2)); color: var(--os-fg); }
|
|
279
|
+
.os-drawer-close .ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; }
|
|
280
|
+
.os-drawer-grid {
|
|
281
|
+
display: grid;
|
|
282
|
+
grid-template-columns: repeat(3, 1fr);
|
|
283
|
+
gap: 12px;
|
|
284
|
+
padding: 16px;
|
|
285
|
+
overflow-y: auto;
|
|
286
|
+
flex: 1;
|
|
287
|
+
align-content: start;
|
|
288
|
+
}
|
|
289
|
+
.os-drawer-tile {
|
|
290
|
+
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
|
|
291
|
+
padding: 18px 8px;
|
|
292
|
+
background: var(--os-bg-1);
|
|
293
|
+
border: none;
|
|
294
|
+
color: var(--os-fg);
|
|
295
|
+
font: 13px var(--os-font);
|
|
296
|
+
min-height: 100px;
|
|
297
|
+
cursor: pointer;
|
|
298
|
+
transition: background 80ms ease;
|
|
299
|
+
outline: none;
|
|
300
|
+
border-radius: var(--r-3, 18px);
|
|
301
|
+
text-transform: lowercase;
|
|
302
|
+
}
|
|
303
|
+
.os-drawer-tile:hover { background: var(--panel-hover, var(--os-bg-2)); }
|
|
304
|
+
.os-drawer-tile:active, .os-drawer-tile.active { background: var(--panel-select, var(--os-accent-soft)); }
|
|
305
|
+
.os-drawer-tile .ic { color: var(--os-accent); display: inline-flex; }
|
|
306
|
+
.os-drawer-tile .ic svg { width: 32px; height: 32px; fill: none; stroke: currentColor; }
|
|
307
|
+
.os-drawer-tile .lbl { color: var(--os-fg); font-weight: 600; }
|
|
308
|
+
|
|
309
|
+
.os-spacer { flex: 1 1 auto; }
|
|
310
|
+
.os-tray { display: flex; align-items: center; gap: 6px; }
|
|
311
|
+
.os-instances { display: flex; gap: 6px; margin-left: 8px; }
|
|
312
|
+
.os-menubar [data-role="home"] { display: none; }
|
|
313
|
+
.os-root { position: fixed; inset: 0; display: flex; flex-direction: column; pointer-events: none; z-index: 8000; }
|
|
314
|
+
.os-menubar, .os-taskbar { pointer-events: auto; flex: 0 0 auto; }
|
|
315
|
+
.os-taskbar { margin-top: auto; }
|
|
316
|
+
.wm-root { top: var(--os-bar-h) !important; bottom: var(--os-bar-h) !important; inset: var(--os-bar-h) 0 var(--os-bar-h) 0 !important; }
|
|
317
|
+
|
|
318
|
+
.app-pane { padding: 16px 18px; font: 14px var(--os-font); color: var(--os-fg); line-height: 1.55; overflow: auto; height: 100%; box-sizing: border-box; background: var(--os-bg-1); }
|
|
319
|
+
.app-pane h2 { margin: 0 0 10px 0; color: var(--os-fg); font-family: var(--os-display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
|
|
320
|
+
.app-pane p { margin: 0 0 10px 0; color: var(--os-fg-2); }
|
|
321
|
+
.app-pane ul { padding-left: 18px; margin: 6px 0 12px; color: var(--os-fg-2); }
|
|
322
|
+
.app-pane li { padding: 2px 0; }
|
|
323
|
+
.app-pane code { font: 12px var(--os-mono); background: var(--os-bg-2); padding: 1px 6px; border-radius: var(--r-1, 6px); color: var(--os-fg); }
|
|
324
|
+
.app-pane a { color: var(--os-accent); text-decoration: none; }
|
|
325
|
+
.app-pane a:hover { text-decoration: underline; text-underline-offset: 2px; }
|
|
326
|
+
.app-pane .meta { color: var(--os-fg-3); font-size: 12px; }
|
|
327
|
+
.app-pane.mono { font: 12.5px var(--os-mono); padding: 12px; background: var(--os-bg-1); }
|
|
328
|
+
.app-pane.mono .row { padding: 5px 8px; cursor: pointer; border-radius: var(--r-1, 6px); }
|
|
329
|
+
.app-pane.mono .row:hover { background: var(--panel-hover, var(--os-bg-2)); }
|
|
330
|
+
.app-pane.mono .head { color: var(--os-accent); margin-bottom: 8px; padding-bottom: 6px; font-weight: 600; letter-spacing: 0.02em; }
|
|
331
|
+
.app-pane.mono pre { background: var(--os-bg-2); padding: 10px 12px; margin: 8px 0 0 0; max-height: 220px; overflow: auto; white-space: pre-wrap; font: 11.5px var(--os-mono); border-radius: var(--r-1, 6px); color: var(--os-fg); border: none; }
|
|
332
|
+
.app-shell-pane { margin: 0; padding: 8px; font: 12px var(--os-mono); color: var(--os-fg); background: var(--os-bg-0); height: 100%; overflow: auto; white-space: pre-wrap; box-sizing: border-box; }
|
|
333
|
+
.app-canvas { width: 100%; height: 100%; background: var(--os-bg-0); display: block; cursor: default; }
|
|
334
|
+
.app-canvas.x-display { background: #0b0d10; }
|
|
335
|
+
.app-frame { width: 100%; height: 100%; border: 0; background: var(--os-bg-0); }
|
|
336
|
+
.app-iframe { width: 100%; height: 100%; border: 0; display: block; }
|
|
337
|
+
.app-iframe.web { background: #ffffff; }
|
|
338
|
+
.app-text-cursor { animation: app-cursor-blink 0.5s step-end infinite; }
|
|
339
|
+
@keyframes app-cursor-blink { 50% { opacity: 0; } }
|
|
340
|
+
@media (max-width: 1023px) and (min-width: 768px) {
|
|
341
|
+
.os-side-rail { display: flex; }
|
|
342
|
+
.wm-root { left: var(--os-rail-w) !important; }
|
|
343
|
+
.os-menubar { padding-left: calc(var(--os-rail-w) + 8px); }
|
|
344
|
+
.os-taskbar { padding-left: calc(var(--os-rail-w) + 8px); }
|
|
345
|
+
.os-menubar .os-instances { display: flex; }
|
|
346
|
+
.os-menu { left: calc(var(--os-rail-w) + 8px); }
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
@media (max-width: 767px) {
|
|
350
|
+
:root { --os-bar-h: var(--os-bar-h-mobile); }
|
|
351
|
+
body { overscroll-behavior: none; }
|
|
352
|
+
.os-menubar [data-role="home"] { display: inline-flex; min-width: var(--os-tap); min-height: var(--os-tap); padding: 0 12px; }
|
|
353
|
+
.os-menubar [data-role="home"] .ic svg { width: 22px; height: 22px; }
|
|
354
|
+
.os-menubar { font-size: 14px; padding: 0 8px; padding-top: env(safe-area-inset-top, 0); height: calc(var(--os-bar-h) + env(safe-area-inset-top, 0)); }
|
|
355
|
+
.os-menubar [data-role="apps"] { display: none; }
|
|
356
|
+
.os-menubar .os-brand { font-size: 13px; margin-right: 6px; }
|
|
357
|
+
.os-menubar [data-role="add"] { display: none; }
|
|
358
|
+
.os-menubar .os-instances { display: none; }
|
|
359
|
+
.os-clock { display: none; }
|
|
360
|
+
.os-taskbar {
|
|
361
|
+
padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0));
|
|
362
|
+
gap: 6px;
|
|
363
|
+
overflow-x: auto;
|
|
364
|
+
overflow-y: hidden;
|
|
365
|
+
flex-wrap: nowrap;
|
|
366
|
+
scroll-snap-type: x proximity;
|
|
367
|
+
height: calc(var(--os-bar-h) + env(safe-area-inset-bottom, 0));
|
|
368
|
+
align-items: center;
|
|
369
|
+
}
|
|
370
|
+
.os-taskbar::-webkit-scrollbar { display: none; }
|
|
371
|
+
.os-task {
|
|
372
|
+
flex: 0 0 auto;
|
|
373
|
+
min-width: 120px;
|
|
374
|
+
min-height: 44px;
|
|
375
|
+
max-width: none;
|
|
376
|
+
padding: 10px 14px;
|
|
377
|
+
scroll-snap-align: start;
|
|
378
|
+
font-size: 13px;
|
|
379
|
+
}
|
|
380
|
+
.os-task.focused { background: var(--panel-select, var(--os-accent-soft)); box-shadow: inset 4px 0 0 var(--os-accent); }
|
|
381
|
+
.os-side-rail { display: none !important; }
|
|
382
|
+
.os-menu { left: 8px; right: 8px; min-width: 0; top: calc(var(--os-bar-h) + env(safe-area-inset-top, 0) + 4px); }
|
|
383
|
+
.wm-root {
|
|
384
|
+
top: calc(var(--os-bar-h) + env(safe-area-inset-top, 0)) !important;
|
|
385
|
+
bottom: calc(var(--os-bar-h) + env(safe-area-inset-bottom, 0)) !important;
|
|
386
|
+
inset: calc(var(--os-bar-h) + env(safe-area-inset-top, 0)) 0 calc(var(--os-bar-h) + env(safe-area-inset-bottom, 0)) 0 !important;
|
|
387
|
+
}
|
|
388
|
+
.wm-win {
|
|
389
|
+
position: absolute !important;
|
|
390
|
+
left: 0 !important; top: 0 !important;
|
|
391
|
+
width: 100% !important; height: 100% !important;
|
|
392
|
+
border: none !important;
|
|
393
|
+
border-radius: 0 !important;
|
|
394
|
+
box-shadow: none !important;
|
|
395
|
+
}
|
|
396
|
+
.wm-bar {
|
|
397
|
+
padding: 6px 10px !important;
|
|
398
|
+
height: 36px !important;
|
|
399
|
+
gap: 6px !important;
|
|
400
|
+
cursor: default !important;
|
|
401
|
+
touch-action: pan-y !important;
|
|
402
|
+
pointer-events: none;
|
|
403
|
+
}
|
|
404
|
+
.wm-bar .wm-title { pointer-events: auto; font-size: 13px !important; }
|
|
405
|
+
.wm-bar .wm-btns { pointer-events: auto; }
|
|
406
|
+
.wm-btns .wm-btn:nth-child(1), .wm-btns .wm-btn:nth-child(2) { display: none !important; }
|
|
407
|
+
.wm-btns .wm-btn:nth-child(3) { width: 44px !important; height: 44px !important; border-radius: var(--r-1, 6px) !important; background: var(--os-bg-3) !important; color: var(--os-fg) !important; }
|
|
408
|
+
.wm-resize { display: none !important; }
|
|
409
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
body { margin: 0; padding: 24px; font-family: var(--os-font); background: var(--os-bg-0); color: var(--os-fg); }
|
|
2
|
+
h1 { margin: 0 0 8px 0; font-size: 22px; font-weight: 600; }
|
|
3
|
+
h3 { margin: 18px 0 6px 0; color: var(--os-fg-2); font-size: 13px; font-weight: 600; }
|
|
4
|
+
.sub { color: var(--os-fg-2); margin-bottom: 20px; }
|
|
5
|
+
table { border-collapse: collapse; width: 100%; max-width: 760px; }
|
|
6
|
+
td { padding: 6px 12px; border-bottom: 1px solid var(--os-bg-3); }
|
|
7
|
+
td.k { width: 280px; color: var(--os-fg-2); }
|
|
8
|
+
td.v { font-weight: 600; }
|
|
9
|
+
td.v.pass { color: var(--os-accent); }
|
|
10
|
+
td.v.fail { color: var(--os-red); }
|
|
11
|
+
td.v.pending { color: var(--os-amber); }
|
|
12
|
+
.all { margin-top: 16px; padding: 12px; background: var(--os-bg-1); max-width: 760px; border-radius: var(--os-radius-sm); }
|
|
13
|
+
.all.green { color: var(--os-accent); }
|
|
14
|
+
.all.red { color: var(--os-red); }
|
|
15
|
+
.err { color: var(--os-red); white-space: pre-wrap; margin-top: 12px; }
|
|
16
|
+
a { color: var(--os-accent); text-decoration: none; }
|
|
17
|
+
a:hover { color: var(--os-accent-2); }
|
|
18
|
+
iframe.osframe { position: absolute; left: -9999px; top: 0; width: 1280px; height: 900px; border: 0; }
|
|
19
|
+
iframe.osframe-phone { position: absolute; left: -9999px; top: 0; width: 414px; height: 720px; border: 0; }
|