anentrypoint-design 0.0.140 → 0.0.142

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.
Files changed (8) hide show
  1. package/app-shell.css +332 -45
  2. package/colors_and_type.css +2 -1
  3. package/dist/247420.css +334 -46
  4. package/dist/247420.js +8 -8
  5. package/package.json +1 -1
  6. package/src/kits/os/about-app.js +1 -2
  7. package/src/kits/os/freddie-dashboard.js +2 -2
  8. package/src/kits/os/theme.css +284 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "anentrypoint-design",
3
- "version": "0.0.140",
3
+ "version": "0.0.142",
4
4
  "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
5
5
  "type": "module",
6
6
  "main": "./dist/247420.js",
package/src/kits/os/about-app.js CHANGED
@@ -13,10 +13,9 @@ export function renderAboutApp(opts = {}) {
13
13
  'libsql via sql.js · freddie host',
14
14
  'responsive: phone / tablet / desktop',
15
15
  ],
16
- footer = 'open <code>validator</code> to run isolation harness · click apps menu for more.',
16
+ footer = 'click apps menu for more.',
17
17
  links = [
18
18
  { href: 'https://github.com/AnEntrypoint/thebird', text: 'source' },
19
- { href: './validate.html', text: 'validate' },
20
19
  ],
21
20
  } = opts;
22
21
 
package/src/kits/os/freddie-dashboard.js CHANGED
@@ -12,7 +12,7 @@ function pre(obj) {
12
12
  return webjsx.createElement('pre', { class: 'fd-pre' }, typeof obj === 'string' ? obj : JSON.stringify(obj, null, 2));
13
13
  }
14
14
 
15
- export function createFreddieDashboard({ instance, bootHost, osSurfaces }) {
15
+ export function createFreddieDashboard({ instance, bootHost, osSurfaces, loadingText }) {
16
16
  const root = document.createElement('div');
17
17
  root.className = 'app-fd ds-247420 fd-root';
18
18
 
@@ -66,7 +66,7 @@ export function createFreddieDashboard({ instance, bootHost, osSurfaces }) {
66
66
  topbar: Topbar({ brand: 'freddie', leaf: 'dashboard', items: [], active: '' }),
67
67
  crumb: Crumb({ trail: ['freddie', instance.id], leaf: route.path, right: state.error ? Chip({ tone: 'miss', children: 'error' }) : Chip({ tone: 'ok', children: 'live' }) }),
68
68
  side: buildSide(),
69
- main: state.body || EmptyState({ text: 'loading…', glyph: '◌' }),
69
+ main: state.body || EmptyState({ text: loadingText || 'loading…', glyph: '◌' }),
70
70
  status: Status({ left: ['ds-247420 · webjsx · ' + allRoutes.length + ' routes', 'instance=' + instance.id], right: [state.ts] }),
71
71
  });
72
72
  }
package/src/kits/os/theme.css CHANGED
@@ -452,3 +452,287 @@ html, body {
452
452
  :root[data-theme="ink"][data-accent="green"] { --os-accent: #3FA93A; }
453
453
  :root[data-theme="ink"][data-accent="purple"] { --os-accent: #a085ff; }
454
454
  :root[data-theme="ink"][data-accent="mascot"] { --os-accent: #ff8a64; }
455
+
456
+ /* ============================================================
457
+ * thebird theme preset (migrated from thebird's local thebird-brand.css
458
+ * 2026-05-26). thebird ships ZERO design CSS — every rule below lives here
459
+ * upstream and is delivered via the published package. Scoped to .ds-247420
460
+ * (thebird's OS root carries that class). Brand identity: Space Grotesk +
461
+ * --paper #F5F0E4 + green accent #247420 + uniform 34px bars +
462
+ * Windows-style right-side window controls.
463
+ * ============================================================ */
464
+ :root {
465
+ --paper: #F5F0E4;
466
+ }
467
+ .ds-247420 {
468
+ --ff-ui: 'Space Grotesk', system-ui, sans-serif !important;
469
+ --ff-display: 'Space Grotesk', system-ui, sans-serif !important;
470
+ --ff-prose: 'Space Grotesk', system-ui, sans-serif !important;
471
+ --os-accent: #247420;
472
+ /* uniform bar height: 22px button + 6px+6px padding = 34px */
473
+ --os-bar-h: 34px !important;
474
+ --os-bar-h-mobile: 34px !important;
475
+ --os-dock-h: 34px !important;
476
+ }
477
+ /* Window titlebar matches the 34px bar height; clamp so menubar/taskbar/titlebar
478
+ * heights are uniform. */
479
+ .ds-247420 .wm-bar { height: 34px !important; min-height: 34px !important; box-sizing: border-box !important; padding-top: 4px !important; padding-bottom: 4px !important; }
480
+ /* Bars overlay windows: .wm-root fills full viewport, menubar/taskbar paint on top.
481
+ * Tilde key hides them via .bars-hidden on <html>. */
482
+ .ds-247420 .wm-root { top: 0 !important; bottom: 0 !important; inset: 0 !important; }
483
+ html.bars-hidden .os-menubar,
484
+ html.bars-hidden .os-taskbar { display: none !important; }
485
+ .ds-247420 .os-task { border-radius: var(--r-pill, 999px); }
486
+ .os-brand { font-family: var(--ff-display); font-weight: 700; }
487
+
488
+ /* thebird windows use Windows/Linux-style right-side controls (upstream theme
489
+ * sets .wm-btns order:-1 for a macOS look; thebird overrides to natural DOM
490
+ * order so controls render on the right). */
491
+ .ds-247420 .wm-btns { order: 0; }
492
+
493
+ /* OS-shell z-index layering: .os-root above .wm-root so its .os-menu dropdowns
494
+ * paint above windows. */
495
+ .ds-247420 .os-root { z-index: 9300 !important; }
496
+ .ds-247420 .os-menubar { z-index: 9200 !important; position: relative; }
497
+ .ds-247420 .os-taskbar { z-index: 9200 !important; position: relative; }
498
+ .ds-247420 .os-menu { z-index: 9500 !important; }
499
+ .ds-247420 .wm-root { z-index: 9000; }
500
+ .ds-247420 .launcher-dock { z-index: 9100; }
501
+
502
+ /* Touch/gesture hardening. */
503
+ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
504
+ .ds-247420 .os-root, .ds-247420 .wm-root { touch-action: none; }
505
+ .ds-247420 .wm-body { overscroll-behavior: contain; touch-action: auto; }
506
+ .ds-247420 .wm-bar, .ds-247420 .wm-resize { -webkit-touch-callout: none; user-select: none; }
507
+ .ds-247420 .os-menubar, .ds-247420 .os-taskbar, .ds-247420 .launcher-dock { user-select: none; -webkit-user-select: none; }
508
+
509
+ /* Aero-snap drag preview. */
510
+ .ds-247420 .wm-snap-preview {
511
+ position: fixed;
512
+ pointer-events: none;
513
+ z-index: 9050;
514
+ background: color-mix(in oklab, var(--os-accent, #247420) 20%, transparent);
515
+ border: 2px solid var(--os-accent, #247420);
516
+ border-radius: 8px;
517
+ transition: all 120ms ease;
518
+ }
519
+ @media (prefers-reduced-motion: reduce) {
520
+ .ds-247420 .wm-snap-preview { transition: none; }
521
+ }
522
+
523
+ /* Alt+Tab window switcher overlay. */
524
+ .ds-247420 .wm-switcher {
525
+ position: fixed;
526
+ left: 50%;
527
+ top: 50%;
528
+ transform: translate(-50%, -50%);
529
+ padding: 16px 20px;
530
+ background: var(--os-bg-2, #1a1a1a);
531
+ border: 1px solid var(--os-accent, #247420);
532
+ border-radius: 8px;
533
+ z-index: 9600;
534
+ font-family: var(--ff-ui, 'Space Grotesk', sans-serif);
535
+ color: var(--os-fg, #fff);
536
+ min-width: 280px;
537
+ box-shadow: 0 12px 40px rgba(0,0,0,0.5);
538
+ }
539
+ .ds-247420 .wm-switcher-item {
540
+ padding: 8px 12px;
541
+ border-radius: 4px;
542
+ display: flex;
543
+ align-items: center;
544
+ gap: 10px;
545
+ }
546
+ .ds-247420 .wm-switcher-item.active {
547
+ background: var(--os-accent, #247420);
548
+ color: var(--paper, #fff);
549
+ }
550
+
551
+ /* freddie-chat font family (upstream still ships Nunito; brand is Space Grotesk). */
552
+ .ds-247420 freddie-chat,
553
+ .ds-247420 freddie-chat .chat-bubble,
554
+ .ds-247420 freddie-chat .chat-meta,
555
+ .ds-247420 freddie-chat .chat-head {
556
+ font-family: var(--ff-ui, 'Space Grotesk', system-ui, sans-serif);
557
+ }
558
+ .ds-247420 freddie-chat .chat-bubble pre,
559
+ .ds-247420 freddie-chat .chat-bubble code {
560
+ font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
561
+ }
562
+ .ds-247420 freddie-chat .chat-head {
563
+ font-family: var(--ff-display, 'Space Grotesk', system-ui, sans-serif);
564
+ font-weight: 700;
565
+ }
566
+
567
+ /* Session-switch crossfade. */
568
+ .ds-247420 .wm-win { transition: opacity 140ms ease; }
569
+ .tb-switching .ds-247420 .wm-win { opacity: 0.4; }
570
+ @media (prefers-reduced-motion: reduce) {
571
+ .ds-247420 .wm-win { transition: none; }
572
+ .tb-switching .ds-247420 .wm-win { opacity: 1; }
573
+ }
574
+
575
+ /* ---- Session-UX surfaces: chips + modals + empty state ---- */
576
+ .ds-247420 .os-instances { display: flex; gap: 6px; align-items: center; flex: 0 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; padding: 0 4px; scrollbar-width: thin; }
577
+ .ds-247420 .os-instances::-webkit-scrollbar { height: 4px; }
578
+
579
+ .ds-247420 .tb-sess-chip {
580
+ display: inline-flex; align-items: center; gap: 6px;
581
+ height: 22px; padding: 0 6px 0 8px;
582
+ border-radius: var(--r-pill, 999px);
583
+ background: color-mix(in oklab, var(--fg, #1a1a1a) 6%, transparent);
584
+ color: var(--fg, #1a1a1a);
585
+ font-family: var(--ff-ui, system-ui); font-size: 11px; font-weight: 500;
586
+ cursor: pointer;
587
+ border: 1px solid transparent;
588
+ transition: background 120ms ease, border-color 120ms ease;
589
+ user-select: none; flex: 0 0 auto;
590
+ }
591
+ .ds-247420 .tb-sess-chip:hover { background: color-mix(in oklab, var(--fg, #1a1a1a) 12%, transparent); }
592
+ .ds-247420 .tb-sess-chip.active {
593
+ background: color-mix(in oklab, var(--os-accent, #247420) 18%, transparent);
594
+ border-color: var(--os-accent, #247420);
595
+ color: var(--fg, #1a1a1a);
596
+ }
597
+ .ds-247420 .tb-sess-chip.active .tb-sess-dot { background: var(--os-accent, #247420); box-shadow: 0 0 0 2px color-mix(in oklab, var(--os-accent, #247420) 30%, transparent); }
598
+ .ds-247420 .tb-sess-dot { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in oklab, var(--fg, #1a1a1a) 40%, transparent); flex: 0 0 6px; }
599
+ .ds-247420 .tb-sess-label { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
600
+ .ds-247420 .tb-sess-badge {
601
+ display: inline-flex; align-items: center; justify-content: center;
602
+ min-width: 16px; height: 14px; padding: 0 4px;
603
+ border-radius: 7px;
604
+ background: color-mix(in oklab, var(--fg, #1a1a1a) 14%, transparent);
605
+ font-size: 9px; font-weight: 600; line-height: 1;
606
+ }
607
+ .ds-247420 .tb-sess-chip.active .tb-sess-badge { background: color-mix(in oklab, var(--os-accent, #247420) 30%, transparent); }
608
+ .ds-247420 .tb-sess-x {
609
+ width: 16px; height: 16px; line-height: 14px; text-align: center;
610
+ border: 0; padding: 0; background: transparent;
611
+ border-radius: 50%; cursor: pointer; color: inherit;
612
+ font-size: 14px; font-weight: 600;
613
+ opacity: 0.55; transition: opacity 120ms ease, background 120ms ease;
614
+ }
615
+ .ds-247420 .tb-sess-chip:hover .tb-sess-x { opacity: 1; }
616
+ .ds-247420 .tb-sess-x:hover { background: color-mix(in oklab, #d33 30%, transparent); color: #fff; }
617
+
618
+ .ds-247420 .tb-sess-add {
619
+ display: inline-flex; align-items: center; gap: 4px;
620
+ height: 22px; padding: 0 10px;
621
+ border: 1px dashed color-mix(in oklab, var(--fg, #1a1a1a) 30%, transparent);
622
+ background: transparent;
623
+ border-radius: var(--r-pill, 999px);
624
+ font-family: var(--ff-ui, system-ui); font-size: 11px; font-weight: 500;
625
+ color: var(--fg, #1a1a1a);
626
+ cursor: pointer;
627
+ margin-left: 6px;
628
+ transition: border-color 120ms ease, background 120ms ease;
629
+ }
630
+ .ds-247420 .tb-sess-add:hover {
631
+ border-color: var(--os-accent, #247420);
632
+ background: color-mix(in oklab, var(--os-accent, #247420) 8%, transparent);
633
+ }
634
+ .ds-247420 .tb-sess-add-plus { font-size: 13px; line-height: 1; }
635
+ .ds-247420 .tb-sess-add-lbl { line-height: 1; }
636
+
637
+ .tb-sess-overlay {
638
+ position: fixed; inset: 0; z-index: 9800;
639
+ background: color-mix(in oklab, #000 40%, transparent);
640
+ display: flex; align-items: center; justify-content: center;
641
+ animation: tb-sess-fade 120ms ease;
642
+ }
643
+ @keyframes tb-sess-fade { from { opacity: 0; } to { opacity: 1; } }
644
+ .tb-sess-modal {
645
+ background: var(--bg, #f5f0e4);
646
+ color: var(--fg, #1a1a1a);
647
+ border-radius: 12px;
648
+ box-shadow: 0 12px 40px color-mix(in oklab, #000 30%, transparent);
649
+ min-width: 320px; max-width: 480px;
650
+ border: 1px solid color-mix(in oklab, var(--fg, #1a1a1a) 12%, transparent);
651
+ overflow: hidden;
652
+ font-family: var(--ff-ui, system-ui);
653
+ }
654
+ .tb-sess-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid color-mix(in oklab, var(--fg, #1a1a1a) 8%, transparent); }
655
+ .tb-sess-modal-title { font-weight: 600; font-size: 14px; }
656
+ .tb-sess-modal-x { background: transparent; border: 0; font-size: 20px; line-height: 1; cursor: pointer; color: inherit; padding: 0 4px; }
657
+ .tb-sess-modal-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
658
+ .tb-sess-modal-lbl { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.7; }
659
+ .tb-sess-modal-input {
660
+ width: 100%; box-sizing: border-box;
661
+ height: 32px; padding: 0 10px;
662
+ border: 1px solid color-mix(in oklab, var(--fg, #1a1a1a) 20%, transparent);
663
+ border-radius: 6px;
664
+ background: color-mix(in oklab, var(--fg, #1a1a1a) 6%, var(--bg, #fff));
665
+ color: inherit;
666
+ font-family: inherit; font-size: 13px;
667
+ }
668
+ .tb-sess-modal-input:focus { outline: none; border-color: var(--os-accent, #247420); box-shadow: 0 0 0 3px color-mix(in oklab, var(--os-accent, #247420) 20%, transparent); }
669
+ .tb-sess-modal-hint { font-size: 11px; opacity: 0.7; }
670
+ .tb-sess-modal-msg { font-size: 13px; }
671
+ .tb-sess-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid color-mix(in oklab, var(--fg, #1a1a1a) 8%, transparent); }
672
+ .tb-sess-modal-btn {
673
+ height: 28px; padding: 0 14px;
674
+ border-radius: 6px; border: 1px solid color-mix(in oklab, var(--fg, #1a1a1a) 20%, transparent);
675
+ background: transparent; color: inherit;
676
+ font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
677
+ transition: background 120ms ease, border-color 120ms ease;
678
+ }
679
+ .tb-sess-modal-btn:hover { background: color-mix(in oklab, var(--fg, #1a1a1a) 6%, transparent); }
680
+ .tb-sess-modal-btn.primary { background: var(--os-accent, #247420); color: #fff; border-color: var(--os-accent, #247420); }
681
+ .tb-sess-modal-btn.primary:hover { background: color-mix(in oklab, var(--os-accent, #247420) 80%, #000); }
682
+ .tb-sess-modal-btn.danger { background: #d33; color: #fff; border-color: #d33; }
683
+ .tb-sess-modal-btn.danger:hover { background: #b22; }
684
+
685
+ .tb-sess-empty {
686
+ position: fixed; inset: 0; z-index: 8900;
687
+ display: flex; align-items: center; justify-content: center;
688
+ pointer-events: none;
689
+ }
690
+ .tb-sess-empty-card {
691
+ pointer-events: auto;
692
+ background: var(--bg, #f5f0e4);
693
+ color: var(--fg, #1a1a1a);
694
+ border: 1px solid color-mix(in oklab, var(--fg, #1a1a1a) 14%, transparent);
695
+ border-radius: 16px;
696
+ box-shadow: 0 8px 32px color-mix(in oklab, #000 14%, transparent);
697
+ padding: 32px 40px; text-align: center;
698
+ font-family: var(--ff-ui, system-ui);
699
+ max-width: 420px;
700
+ }
701
+ .tb-sess-empty-title { font-size: 18px; font-weight: 600; margin-bottom: 6px; }
702
+ .tb-sess-empty-sub { font-size: 13px; opacity: 0.7; margin-bottom: 20px; }
703
+ .tb-sess-empty-cta {
704
+ height: 40px; padding: 0 24px;
705
+ background: var(--os-accent, #247420); color: #fff;
706
+ border: 0; border-radius: 999px;
707
+ font-family: inherit; font-size: 14px; font-weight: 600;
708
+ cursor: pointer;
709
+ transition: transform 120ms ease, box-shadow 120ms ease;
710
+ }
711
+ .tb-sess-empty-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 16px color-mix(in oklab, var(--os-accent, #247420) 40%, transparent); }
712
+
713
+ /* ---- Workspaces app — full-window session manager card grid ---- */
714
+ .ds-247420 .tb-sessions-app { display: flex; flex-direction: column; height: 100%; font-family: var(--ff-ui, system-ui); color: var(--fg, #1a1a1a); background: var(--bg, #f5f0e4); }
715
+ .ds-247420 .tb-sessions-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid color-mix(in oklab, var(--fg, #1a1a1a) 10%, transparent); }
716
+ .ds-247420 .tb-sessions-title { font-weight: 600; font-size: 14px; }
717
+ .ds-247420 .tb-sessions-count { font-size: 12px; opacity: 0.6; margin-left: 4px; }
718
+ .ds-247420 .tb-sessions-spacer { flex: 1; }
719
+ .ds-247420 .tb-sessions-btn { height: 28px; padding: 0 12px; border-radius: 6px; border: 1px solid color-mix(in oklab, var(--fg, #1a1a1a) 20%, transparent); background: transparent; color: inherit; font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit; }
720
+ .ds-247420 .tb-sessions-btn:hover { background: color-mix(in oklab, var(--fg, #1a1a1a) 6%, transparent); }
721
+ .ds-247420 .tb-sessions-btn.primary { background: var(--os-accent, #247420); color: #fff; border-color: var(--os-accent, #247420); }
722
+ .ds-247420 .tb-sessions-btn.danger { background: #d33; color: #fff; border-color: #d33; }
723
+ .ds-247420 .tb-sessions-btn:disabled { opacity: 0.4; cursor: not-allowed; }
724
+ .ds-247420 .tb-sessions-grid { flex: 1; overflow: auto; padding: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; align-content: start; }
725
+ .ds-247420 .tb-sessions-card { padding: 12px; border-radius: 10px; border: 1px solid color-mix(in oklab, var(--fg, #1a1a1a) 12%, transparent); background: color-mix(in oklab, var(--fg, #1a1a1a) 3%, transparent); display: flex; flex-direction: column; gap: 8px; transition: border-color 120ms ease, transform 120ms ease; }
726
+ .ds-247420 .tb-sessions-card:hover { border-color: var(--os-accent, #247420); }
727
+ .ds-247420 .tb-sessions-card.active { border-color: var(--os-accent, #247420); box-shadow: 0 0 0 2px color-mix(in oklab, var(--os-accent, #247420) 30%, transparent); }
728
+ .ds-247420 .tb-sessions-card-head { display: flex; align-items: center; gap: 8px; }
729
+ .ds-247420 .tb-sessions-card-check { width: 14px; height: 14px; cursor: pointer; flex: 0 0 14px; }
730
+ .ds-247420 .tb-sessions-card-name { font-weight: 600; font-size: 13px; flex: 1; outline: none; padding: 2px 4px; border-radius: 4px; }
731
+ .ds-247420 .tb-sessions-card-name[contenteditable="true"] { background: color-mix(in oklab, var(--fg, #1a1a1a) 8%, transparent); }
732
+ .ds-247420 .tb-sessions-card-id { font-family: var(--os-mono, monospace); font-size: 10px; opacity: 0.5; }
733
+ .ds-247420 .tb-sessions-card-stats { font-size: 11px; opacity: 0.7; display: flex; gap: 12px; }
734
+ .ds-247420 .tb-sessions-card-actions { display: flex; gap: 6px; margin-top: 4px; }
735
+ .ds-247420 .tb-sessions-card-actions button { flex: 1; height: 24px; font-size: 11px; padding: 0 8px; border-radius: 4px; border: 1px solid color-mix(in oklab, var(--fg, #1a1a1a) 16%, transparent); background: transparent; color: inherit; cursor: pointer; font-family: inherit; }
736
+ .ds-247420 .tb-sessions-card-actions button:hover { background: color-mix(in oklab, var(--fg, #1a1a1a) 6%, transparent); }
737
+ .ds-247420 .tb-sessions-card-actions button.danger:hover { background: #d33; color: #fff; border-color: #d33; }
738
+ .ds-247420 .tb-sessions-empty-mid { padding: 40px; text-align: center; opacity: 0.6; font-size: 13px; }