freddie 0.0.76 → 0.0.78

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.
@@ -1,187 +0,0 @@
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
- }
@@ -1,409 +0,0 @@
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
- }
@@ -1,19 +0,0 @@
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; }