anentrypoint-design 0.0.59 → 0.0.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.59",
+  "version": "0.0.61",
   "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
   "type": "module",
   "main": "./dist/247420.js",
@@ -19,6 +19,7 @@
     "./desktop/theme.css": "./src/desktop/theme.css",
     "./desktop/wm.css": "./src/desktop/wm.css",
     "./desktop/launcher.css": "./src/desktop/launcher.css",
+    "./desktop/validate.css": "./src/desktop/validate.css",
     "./desktop/icons.js": "./src/desktop/icons.js",
     "./desktop/shell.js": "./src/desktop/shell.js",
     "./page-html": {

package/src/desktop/icons.js

@@ -13,4 +13,5 @@ export const icons = {
     close: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M18 6l-12 12"/></svg>',
     chat: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16v11H8l-4 4z"/><path d="M8 9h8M8 12h6"/></svg>',
     tools: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14 7l3-3 3 3-3 3-3-3zM7 14l3 3-7 7-3-3 7-7zM5 7l3-3M14 14l6 6"/></svg>',
+    freddie: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2M8 12a4 4 0 008 0"/></svg>',
 };

package/src/desktop/launcher.css

@@ -1,13 +1,14 @@
 /* ============================================================
    Launcher dock — paired with createLauncher() (validation harness path)
+   Bible: tonal step from canvas, no borders, pill controls, lowercase.
    ============================================================ */
 
 .launcher-dock {
     position: fixed;
     left: 0; top: 0; bottom: 0;
     width: 56px;
-    background: var(--os-bg-1);
-    border-right: 1px solid var(--os-bg-3);
+    background: var(--os-bg-2);
+    border: none;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -30,10 +31,14 @@
     justify-content: center;
     padding: 0;
     font: inherit;
-    transition: background 80ms ease, color 80ms ease;
+    transition: background 80ms ease, color 80ms ease, box-shadow 80ms ease;
+}
+.launcher-btn:hover { background: var(--panel-hover, var(--os-bg-1)); color: var(--os-fg); }
+.launcher-btn.active {
+    background: var(--panel-select, var(--os-accent-soft));
+    color: var(--os-fg);
+    box-shadow: inset 4px 0 0 var(--os-accent);
 }
-.launcher-btn:hover { background: var(--os-accent); color: var(--panel-accent-fg, #000); }
-.launcher-btn.active { background: var(--os-accent); color: var(--panel-accent-fg, #000); }
 .launcher-add { font-size: 20px; }
 
 .launcher-dock + .wm-root { left: 56px !important; }

package/src/desktop/theme.css

@@ -18,9 +18,9 @@
     --os-bar-h-mobile: 52px;
     --os-rail-w: 64px;
     --os-tap: 44px;
-    --os-font: var(--ff-ui, 'Nunito', 'Inter', system-ui, sans-serif);
-    --os-display: var(--ff-display, 'Archivo Black', 'Archivo', 'Nunito', system-ui, sans-serif);
-    --os-mono: var(--ff-mono, 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace);
+    --os-font: var(--ff-ui, 'Nunito', sans-serif);
+    --os-display: var(--ff-display, 'Archivo Black', 'Archivo', sans-serif);
+    --os-mono: var(--ff-mono, 'JetBrains Mono', ui-monospace, monospace);
 }
 
 html, body {
@@ -32,7 +32,7 @@ html, body {
 }
 
 .os-menubar, .os-taskbar {
-    background: var(--os-bg-1);
+    background: var(--os-bg-2);
     border: none;
     color: var(--os-fg);
     font: 13px var(--os-font);
@@ -40,9 +40,14 @@ html, body {
     padding: 0 12px;
     gap: 6px;
     box-shadow: none;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    min-width: 0;
 }
-.os-menubar { border-bottom: 1px solid var(--os-bg-3); }
-.os-taskbar { border-top: 1px solid var(--os-bg-3); }
+.os-menubar > *, .os-taskbar > * { flex-shrink: 0; }
+.os-menubar .os-spacer { flex: 1 1 auto; min-width: 0; }
+.os-menubar .os-tray { margin-left: auto; }
 
 .os-brand {
     color: var(--os-fg);
@@ -54,6 +59,7 @@ html, body {
     display: inline-flex;
     align-items: center;
     gap: 8px;
+    text-transform: lowercase;
 }
 .os-brand::before {
     content: '';
@@ -70,6 +76,7 @@ html, body {
     padding: 7px 14px;
     cursor: pointer;
     font: inherit;
+    font-family: var(--os-font);
     font-size: 13px;
     border-radius: 999px;
     transition: background 80ms ease, color 80ms ease;
@@ -77,9 +84,10 @@ html, body {
     align-items: center;
     gap: 6px;
     outline: none;
+    text-transform: lowercase;
 }
 .os-btn:hover { background: var(--panel-hover, var(--os-bg-2)); color: var(--os-fg); }
-.os-btn.active, .os-btn[aria-pressed="true"] { background: var(--os-accent); color: var(--panel-accent-fg, #fff); }
+.os-btn.active, .os-btn[aria-pressed="true"] { background: var(--panel-select, var(--os-accent-soft)); color: var(--os-fg); }
 .os-btn:focus-visible { background: var(--panel-hover, var(--os-bg-2)); }
 .os-btn .ic { color: var(--os-accent); display: inline-flex; width: 16px; height: 16px; }
 .os-btn .ic svg { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; }
@@ -87,9 +95,9 @@ html, body {
 .os-menu {
     position: absolute;
     background: var(--os-bg-1);
-    border: 1px solid var(--os-bg-3);
-    border-radius: var(--os-radius);
-    padding: 6px;
+    border: none;
+    border-radius: var(--r-3, 18px);
+    padding: 8px;
     min-width: 220px;
     top: calc(var(--os-bar-h) + 4px);
     left: 8px;
@@ -108,53 +116,56 @@ html, body {
     color: var(--os-fg);
     justify-content: flex-start;
 }
-.os-menu .os-btn:hover { background: var(--os-bg-2); color: var(--os-accent-2); }
+.os-menu .os-btn:hover { background: var(--panel-hover, var(--os-bg-2)); color: var(--os-fg); }
 
 .os-clock {
     color: var(--os-fg-2);
     font-variant-numeric: tabular-nums;
+    font-family: var(--os-mono);
     padding: 0 10px;
     font-size: 12px;
 }
 
 .os-task {
     border: none;
-    background: var(--os-bg-2);
+    background: var(--os-bg-1);
     color: var(--os-fg-2);
     border-radius: 999px;
     padding: 6px 14px;
     font-size: 12px;
     font-family: var(--os-font);
-    transition: background 80ms ease, color 80ms ease;
+    transition: background 80ms ease, color 80ms ease, box-shadow 80ms ease;
     max-width: 200px;
     cursor: pointer;
     outline: none;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    text-transform: lowercase;
 }
-.os-task:hover { background: var(--panel-hover, var(--os-bg-3)); color: var(--os-fg); }
+.os-task:hover { background: var(--panel-hover, var(--os-bg-2)); color: var(--os-fg); }
 .os-task.focused {
-    background: var(--os-accent);
-    color: var(--panel-accent-fg, #fff);
-    font-weight: 500;
+    background: var(--panel-select, var(--os-accent-soft));
+    color: var(--os-fg);
+    font-weight: 600;
+    box-shadow: inset 4px 0 0 var(--os-accent);
 }
 
 .wm-win {
     background: var(--os-bg-1) !important;
-    border: 1px solid var(--os-bg-3) !important;
-    border-radius: var(--os-radius) !important;
+    border: none !important;
+    border-radius: var(--r-3, 18px) !important;
     box-shadow: none !important;
     overflow: hidden;
 }
 .wm-win.wm-focused {
-    border-color: var(--os-accent) !important;
-    box-shadow: none !important;
+    border: none !important;
+    box-shadow: inset 4px 0 0 var(--os-accent) !important;
 }
 
 .wm-bar {
     background: var(--os-bg-2) !important;
-    border-bottom: 1px solid var(--os-bg-3) !important;
+    border: none !important;
     padding: 8px 12px !important;
     gap: 10px !important;
 }
@@ -163,38 +174,49 @@ html, body {
     color: var(--os-fg-2) !important;
     letter-spacing: 0.005em;
     text-align: center;
-    font-weight: 500;
+    font-weight: 600;
+    text-transform: lowercase;
 }
 .wm-btns { gap: 6px !important; order: -1; }
 .wm-btn {
-    width: 12px !important;
-    height: 12px !important;
-    border-radius: 50% !important;
+    width: 22px !important;
+    height: 22px !important;
+    border-radius: var(--r-1, 6px) !important;
     border: none !important;
+    background: var(--os-bg-3) !important;
+    color: var(--os-fg-2) !important;
     padding: 0 !important;
     cursor: pointer;
-    font-size: 0 !important;
-    transition: opacity 100ms ease;
+    font: 600 12px var(--os-mono) !important;
+    line-height: 1 !important;
+    display: inline-flex !important;
+    align-items: center;
+    justify-content: center;
+    transition: background 100ms ease, color 100ms ease;
 }
-.wm-btn:hover { opacity: 0.75; }
-.wm-btns .wm-btn:nth-child(1) { background: var(--os-amber) !important; }
-.wm-btns .wm-btn:nth-child(2) { background: var(--os-green) !important; }
-.wm-btns .wm-btn:nth-child(3) { background: var(--os-red) !important; }
+.wm-btn:hover { background: var(--panel-hover, var(--os-bg-2)) !important; color: var(--os-fg) !important; }
 
 .wm-resize {
-    background: var(--os-bg-3) !important;
+    background: transparent !important;
     width: 14px !important;
     height: 14px !important;
-    clip-path: polygon(100% 0, 100% 100%, 0 100%);
+    color: var(--os-fg-3);
+    opacity: 0.4;
+    font: 10px var(--os-mono);
+    display: flex;
+    align-items: flex-end;
+    justify-content: flex-end;
+    line-height: 1;
 }
+.wm-resize::after { content: '\25E2'; }
 .wm-body { background: var(--os-bg-1) !important; }
 
 .os-side-rail {
     position: fixed;
     left: 0; top: 0; bottom: 0;
     width: var(--os-rail-w);
-    background: var(--os-bg-1);
-    border-right: 1px solid var(--os-bg-3);
+    background: var(--os-bg-2);
+    border: none;
     display: none;
     flex-direction: column;
     align-items: center;
@@ -215,8 +237,8 @@ html, body {
     padding: 0;
     outline: none;
 }
-.os-rail-btn:hover { background: var(--os-bg-2); }
-.os-rail-btn:active { background: var(--os-bg-3); }
+.os-rail-btn:hover { background: var(--panel-hover, var(--os-bg-1)); }
+.os-rail-btn:active { background: var(--panel-select, var(--os-accent-soft)); }
 .os-rail-btn .ic { color: var(--os-accent); display: inline-flex; }
 .os-rail-btn .ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; }
 
@@ -238,11 +260,12 @@ html, body {
 .os-drawer-head {
     display: flex; align-items: center; justify-content: space-between;
     padding: 12px 16px;
-    border-bottom: 1px solid var(--os-bg-3);
+    border: none;
     height: 56px;
     box-sizing: border-box;
+    background: var(--os-bg-2);
 }
-.os-drawer-title { color: var(--os-fg); font-family: var(--os-display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
+.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; }
 .os-drawer-close {
     width: 44px; height: 44px;
     border: none; background: transparent;
@@ -252,7 +275,7 @@ html, body {
     border-radius: var(--os-radius-sm);
     outline: none;
 }
-.os-drawer-close:hover { background: var(--os-bg-2); color: var(--os-fg); }
+.os-drawer-close:hover { background: var(--panel-hover, var(--os-bg-2)); color: var(--os-fg); }
 .os-drawer-close .ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; }
 .os-drawer-grid {
     display: grid;
@@ -275,12 +298,13 @@ html, body {
     transition: background 80ms ease;
     outline: none;
     border-radius: var(--r-3, 18px);
+    text-transform: lowercase;
 }
 .os-drawer-tile:hover { background: var(--panel-hover, var(--os-bg-2)); }
-.os-drawer-tile:active { background: var(--panel-select, var(--os-bg-3)); }
+.os-drawer-tile:active, .os-drawer-tile.active { background: var(--panel-select, var(--os-accent-soft)); }
 .os-drawer-tile .ic { color: var(--os-accent); display: inline-flex; }
 .os-drawer-tile .ic svg { width: 32px; height: 32px; fill: none; stroke: currentColor; }
-.os-drawer-tile .lbl { color: var(--os-fg); font-weight: 500; }
+.os-drawer-tile .lbl { color: var(--os-fg); font-weight: 600; }
 
 .os-spacer { flex: 1 1 auto; }
 .os-tray { display: flex; align-items: center; gap: 6px; }
@@ -305,6 +329,7 @@ html, body {
 .app-pane.mono .row:hover { background: var(--panel-hover, var(--os-bg-2)); }
 .app-pane.mono .head { color: var(--os-accent); margin-bottom: 8px; padding-bottom: 6px; font-weight: 600; letter-spacing: 0.02em; }
 .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; }
+.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; }
 .app-canvas { width: 100%; height: 100%; background: var(--os-bg-0); display: block; cursor: default; }
 .app-canvas.x-display { background: #0b0d10; }
 .app-frame { width: 100%; height: 100%; border: 0; background: var(--os-bg-0); }
@@ -350,10 +375,9 @@ html, body {
         max-width: none;
         padding: 10px 14px;
         scroll-snap-align: start;
-        border-left: 3px solid transparent;
         font-size: 13px;
     }
-    .os-task.focused { border-left-color: var(--os-accent); background: var(--os-bg-2); }
+    .os-task.focused { background: var(--panel-select, var(--os-accent-soft)); box-shadow: inset 4px 0 0 var(--os-accent); }
     .os-side-rail { display: none !important; }
     .os-menu { left: 8px; right: 8px; min-width: 0; top: calc(var(--os-bar-h) + env(safe-area-inset-top, 0) + 4px); }
     .wm-root {
@@ -380,6 +404,6 @@ html, body {
     .wm-bar .wm-title { pointer-events: auto; font-size: 13px !important; }
     .wm-bar .wm-btns { pointer-events: auto; }
     .wm-btns .wm-btn:nth-child(1), .wm-btns .wm-btn:nth-child(2) { display: none !important; }
-    .wm-btns .wm-btn:nth-child(3) { width: 44px !important; height: 44px !important; border-radius: 50% !important; }
+    .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; }
     .wm-resize { display: none !important; }
 }

package/src/desktop/validate.css

@@ -0,0 +1,19 @@
+body { margin: 0; padding: 24px; font-family: var(--os-font); background: var(--os-bg-0); color: var(--os-fg); }
+h1 { margin: 0 0 8px 0; font-size: 22px; font-weight: 600; }
+h3 { margin: 18px 0 6px 0; color: var(--os-fg-2); font-size: 13px; font-weight: 600; }
+.sub { color: var(--os-fg-2); margin-bottom: 20px; }
+table { border-collapse: collapse; width: 100%; max-width: 760px; }
+td { padding: 6px 12px; border-bottom: 1px solid var(--os-bg-3); }
+td.k { width: 280px; color: var(--os-fg-2); }
+td.v { font-weight: 600; }
+td.v.pass { color: var(--os-accent); }
+td.v.fail { color: var(--os-red); }
+td.v.pending { color: var(--os-amber); }
+.all { margin-top: 16px; padding: 12px; background: var(--os-bg-1); max-width: 760px; border-radius: var(--os-radius-sm); }
+.all.green { color: var(--os-accent); }
+.all.red { color: var(--os-red); }
+.err { color: var(--os-red); white-space: pre-wrap; margin-top: 12px; }
+a { color: var(--os-accent); text-decoration: none; }
+a:hover { color: var(--os-accent-2); }
+iframe.osframe { position: absolute; left: -9999px; top: 0; width: 1280px; height: 900px; border: 0; }
+iframe.osframe-phone { position: absolute; left: -9999px; top: 0; width: 414px; height: 720px; border: 0; }

package/src/desktop/wm.css

@@ -1,6 +1,7 @@
 /* ============================================================
    Window Manager visuals — paired with createWM() behavior
    Tokens: --os-* (defined by desktop/theme.css)
+   Bible: tonal surfaces, no borders for chrome, inset rail for focus.
    ============================================================ */
 
 .wm-root {
@@ -16,24 +17,25 @@
     min-height: 120px;
     background: var(--os-bg-1);
     color: var(--os-fg);
-    border: 1px solid var(--os-bg-3);
-    border-radius: var(--os-radius);
+    border: none;
+    border-radius: var(--r-3, 18px);
     display: flex;
     flex-direction: column;
     pointer-events: auto;
     overflow: hidden;
 }
-.wm-win.wm-focused { border-color: var(--os-accent); }
+.wm-win.wm-focused { box-shadow: inset 4px 0 0 var(--os-accent); }
 
 .wm-bar {
     display: flex;
     align-items: center;
-    padding: 4px 8px;
+    padding: 6px 10px;
     background: var(--os-bg-2);
     cursor: move;
     user-select: none;
     gap: 8px;
     touch-action: none;
+    border: none;
 }
 .wm-title {
     flex: 1;
@@ -41,23 +43,27 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    text-transform: lowercase;
 }
 
 .wm-btns { display: flex; gap: 4px; }
 .wm-btn {
-    width: 14px;
-    height: 14px;
-    border: 1px solid currentColor;
-    background: transparent;
+    width: 22px;
+    height: 22px;
+    border: none;
+    background: var(--os-bg-3);
+    color: var(--os-fg-2);
     cursor: pointer;
     padding: 0;
-    font: 9px var(--os-font);
-    display: flex;
+    font: 600 12px var(--os-mono);
+    line-height: 1;
+    display: inline-flex;
     align-items: center;
     justify-content: center;
-    color: inherit;
+    border-radius: var(--r-1, 6px);
+    transition: background 100ms ease, color 100ms ease;
 }
-.wm-btn:hover { background: var(--os-accent); color: var(--panel-accent-fg, #000); }
+.wm-btn:hover { background: var(--panel-hover, var(--os-bg-2)); color: var(--os-fg); }
 
 .wm-body {
     flex: 1;
@@ -70,13 +76,20 @@
     position: absolute;
     right: 0;
     bottom: 0;
-    width: 18px;
-    height: 18px;
+    width: 14px;
+    height: 14px;
     cursor: nwse-resize;
-    background: var(--os-bg-3);
-    clip-path: polygon(100% 0, 100% 100%, 0 100%);
+    background: transparent;
+    color: var(--os-fg-3);
+    opacity: 0.4;
+    font: 10px var(--os-mono);
+    line-height: 1;
+    display: flex;
+    align-items: flex-end;
+    justify-content: flex-end;
     touch-action: none;
 }
+.wm-resize::after { content: '\25E2'; }
 
 .wm-win.wm-min .wm-body,
 .wm-win.wm-min .wm-resize { display: none; }