anentrypoint-design 0.0.25 → 0.0.26
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/dist/247420.app.js +4 -2
- package/dist/247420.css +194 -0
- package/dist/247420.js +6 -4
- package/package.json +1 -1
- package/src/components.js +101 -0
package/dist/247420.css
CHANGED
|
@@ -1474,3 +1474,197 @@
|
|
|
1474
1474
|
.ds-247420 ::-webkit-scrollbar-thumb { background: var(--panel-3); border-radius: 5px; }
|
|
1475
1475
|
.ds-247420 ::-webkit-scrollbar-thumb:hover { background: var(--panel-hover); }
|
|
1476
1476
|
.ds-247420 ::-webkit-scrollbar-track { background: transparent; }
|
|
1477
|
+
|
|
1478
|
+
/* ============================================================
|
|
1479
|
+
Chat & AICat — message thread + composer
|
|
1480
|
+
Tonal panels, pill bubbles, monospace meta. Tokens-only.
|
|
1481
|
+
============================================================ */
|
|
1482
|
+
|
|
1483
|
+
.ds-247420 .chat {
|
|
1484
|
+
display: flex;
|
|
1485
|
+
flex-direction: column;
|
|
1486
|
+
background: var(--panel-1);
|
|
1487
|
+
border-radius: 20px;
|
|
1488
|
+
overflow: hidden;
|
|
1489
|
+
margin: 12px 0;
|
|
1490
|
+
max-width: 820px;
|
|
1491
|
+
min-height: 480px;
|
|
1492
|
+
}
|
|
1493
|
+
.ds-247420 .chat-head {
|
|
1494
|
+
display: flex;
|
|
1495
|
+
align-items: center;
|
|
1496
|
+
gap: 10px;
|
|
1497
|
+
padding: 12px 18px;
|
|
1498
|
+
background: var(--panel-1);
|
|
1499
|
+
color: var(--panel-text-2);
|
|
1500
|
+
font-family: var(--ff-ui);
|
|
1501
|
+
font-size: 13px;
|
|
1502
|
+
font-weight: 600;
|
|
1503
|
+
}
|
|
1504
|
+
.ds-247420 .chat-head .dot {
|
|
1505
|
+
width: 8px; height: 8px; border-radius: 999px;
|
|
1506
|
+
background: var(--panel-accent);
|
|
1507
|
+
display: inline-block;
|
|
1508
|
+
}
|
|
1509
|
+
.ds-247420 .chat-head .spread { flex: 1; }
|
|
1510
|
+
.ds-247420 .chat-head .sub { color: var(--panel-text-3); font-weight: 400; font-size: 12px; }
|
|
1511
|
+
|
|
1512
|
+
.ds-247420 .chat-thread {
|
|
1513
|
+
flex: 1;
|
|
1514
|
+
padding: 18px 18px 8px 18px;
|
|
1515
|
+
overflow-y: auto;
|
|
1516
|
+
display: flex;
|
|
1517
|
+
flex-direction: column;
|
|
1518
|
+
gap: 14px;
|
|
1519
|
+
background: var(--panel-1);
|
|
1520
|
+
}
|
|
1521
|
+
|
|
1522
|
+
.ds-247420 .chat-msg {
|
|
1523
|
+
display: grid;
|
|
1524
|
+
grid-template-columns: 32px 1fr;
|
|
1525
|
+
gap: 10px;
|
|
1526
|
+
align-items: flex-start;
|
|
1527
|
+
max-width: 92%;
|
|
1528
|
+
}
|
|
1529
|
+
.ds-247420 .chat-msg.you {
|
|
1530
|
+
grid-template-columns: 1fr 32px;
|
|
1531
|
+
margin-left: auto;
|
|
1532
|
+
text-align: right;
|
|
1533
|
+
}
|
|
1534
|
+
.ds-247420 .chat-msg.you .chat-bubble { background: var(--panel-accent); color: var(--panel-accent-fg); border-radius: 18px 18px 4px 18px; }
|
|
1535
|
+
.ds-247420 .chat-msg.you .chat-meta { justify-content: flex-end; }
|
|
1536
|
+
|
|
1537
|
+
.ds-247420 .chat-avatar {
|
|
1538
|
+
width: 32px; height: 32px;
|
|
1539
|
+
border-radius: 999px;
|
|
1540
|
+
background: var(--panel-2);
|
|
1541
|
+
display: inline-flex;
|
|
1542
|
+
align-items: center;
|
|
1543
|
+
justify-content: center;
|
|
1544
|
+
font-family: var(--ff-mono);
|
|
1545
|
+
font-size: 14px;
|
|
1546
|
+
color: var(--panel-text);
|
|
1547
|
+
flex-shrink: 0;
|
|
1548
|
+
line-height: 1;
|
|
1549
|
+
}
|
|
1550
|
+
.ds-247420 .chat-msg.them .chat-avatar { grid-column: 1; }
|
|
1551
|
+
.ds-247420 .chat-msg.you .chat-avatar { grid-column: 2; background: var(--panel-accent); color: var(--panel-accent-fg); }
|
|
1552
|
+
|
|
1553
|
+
.ds-247420 .chat-bubble {
|
|
1554
|
+
background: var(--panel-2);
|
|
1555
|
+
color: var(--panel-text);
|
|
1556
|
+
padding: 10px 14px;
|
|
1557
|
+
border-radius: 18px 18px 18px 4px;
|
|
1558
|
+
font-size: 14px;
|
|
1559
|
+
line-height: 1.5;
|
|
1560
|
+
text-align: left;
|
|
1561
|
+
white-space: pre-wrap;
|
|
1562
|
+
word-wrap: break-word;
|
|
1563
|
+
}
|
|
1564
|
+
.ds-247420 .chat-msg.you .chat-bubble { text-align: left; display: inline-block; }
|
|
1565
|
+
|
|
1566
|
+
.ds-247420 .chat-meta {
|
|
1567
|
+
display: flex;
|
|
1568
|
+
gap: 6px;
|
|
1569
|
+
margin-top: 4px;
|
|
1570
|
+
font-family: var(--ff-mono);
|
|
1571
|
+
font-size: 10.5px;
|
|
1572
|
+
color: var(--panel-text-3);
|
|
1573
|
+
letter-spacing: 0.02em;
|
|
1574
|
+
}
|
|
1575
|
+
|
|
1576
|
+
.ds-247420 .chat-typing {
|
|
1577
|
+
display: inline-flex;
|
|
1578
|
+
align-items: center;
|
|
1579
|
+
gap: 4px;
|
|
1580
|
+
padding: 12px 14px;
|
|
1581
|
+
background: var(--panel-2);
|
|
1582
|
+
border-radius: 18px 18px 18px 4px;
|
|
1583
|
+
}
|
|
1584
|
+
.ds-247420 .chat-typing span {
|
|
1585
|
+
width: 6px; height: 6px;
|
|
1586
|
+
border-radius: 999px;
|
|
1587
|
+
background: var(--panel-text-3);
|
|
1588
|
+
animation: chat-bounce 1.2s infinite ease-in-out;
|
|
1589
|
+
}
|
|
1590
|
+
.ds-247420 .chat-typing span:nth-child(2) { animation-delay: 0.18s; }
|
|
1591
|
+
.ds-247420 .chat-typing span:nth-child(3) { animation-delay: 0.36s; }
|
|
1592
|
+
@keyframes chat-bounce {
|
|
1593
|
+
0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
|
|
1594
|
+
40% { opacity: 1; transform: translateY(-4px); }
|
|
1595
|
+
}
|
|
1596
|
+
|
|
1597
|
+
.ds-247420 .chat-composer {
|
|
1598
|
+
display: flex;
|
|
1599
|
+
align-items: flex-end;
|
|
1600
|
+
gap: 8px;
|
|
1601
|
+
padding: 10px 12px;
|
|
1602
|
+
background: var(--panel-1);
|
|
1603
|
+
}
|
|
1604
|
+
.ds-247420 .chat-composer textarea {
|
|
1605
|
+
flex: 1;
|
|
1606
|
+
background: var(--panel-2);
|
|
1607
|
+
color: var(--panel-text);
|
|
1608
|
+
font-family: inherit;
|
|
1609
|
+
font-size: 14px;
|
|
1610
|
+
line-height: 1.5;
|
|
1611
|
+
padding: 10px 14px;
|
|
1612
|
+
border-radius: 18px;
|
|
1613
|
+
resize: none;
|
|
1614
|
+
min-height: 40px;
|
|
1615
|
+
max-height: 140px;
|
|
1616
|
+
border: 0;
|
|
1617
|
+
outline: 0;
|
|
1618
|
+
transition: background 80ms ease;
|
|
1619
|
+
}
|
|
1620
|
+
.ds-247420 .chat-composer textarea:hover, .ds-247420 .chat-composer textarea:focus { background: var(--panel-3); }
|
|
1621
|
+
.ds-247420 .chat-composer .send {
|
|
1622
|
+
flex-shrink: 0;
|
|
1623
|
+
width: 40px; height: 40px;
|
|
1624
|
+
border-radius: 999px;
|
|
1625
|
+
background: var(--panel-accent);
|
|
1626
|
+
color: var(--panel-accent-fg);
|
|
1627
|
+
display: inline-flex; align-items: center; justify-content: center;
|
|
1628
|
+
cursor: pointer;
|
|
1629
|
+
font-family: var(--ff-ui);
|
|
1630
|
+
font-size: 18px;
|
|
1631
|
+
transition: filter 80ms ease;
|
|
1632
|
+
border: 0;
|
|
1633
|
+
}
|
|
1634
|
+
.ds-247420 .chat-composer .send:hover { filter: brightness(1.06); }
|
|
1635
|
+
.ds-247420 .chat-composer .send:disabled { background: var(--panel-3); color: var(--panel-text-3); cursor: not-allowed; }
|
|
1636
|
+
|
|
1637
|
+
/* AICat — cat-themed AI assistant chat variant */
|
|
1638
|
+
.ds-247420 .aicat-portrait {
|
|
1639
|
+
background: var(--panel-2);
|
|
1640
|
+
border-radius: 16px;
|
|
1641
|
+
padding: 18px 20px;
|
|
1642
|
+
margin: 12px 0;
|
|
1643
|
+
display: flex;
|
|
1644
|
+
gap: 16px;
|
|
1645
|
+
align-items: center;
|
|
1646
|
+
max-width: 820px;
|
|
1647
|
+
}
|
|
1648
|
+
.ds-247420 .aicat-face {
|
|
1649
|
+
font-family: var(--ff-mono);
|
|
1650
|
+
font-size: 13px;
|
|
1651
|
+
line-height: 1.15;
|
|
1652
|
+
color: var(--panel-accent);
|
|
1653
|
+
white-space: pre;
|
|
1654
|
+
background: var(--panel-1);
|
|
1655
|
+
padding: 10px 14px;
|
|
1656
|
+
border-radius: 12px;
|
|
1657
|
+
margin: 0;
|
|
1658
|
+
}
|
|
1659
|
+
.ds-247420 .aicat-meta { display: flex; flex-direction: column; gap: 4px; }
|
|
1660
|
+
.ds-247420 .aicat-meta .name { color: var(--panel-text); font-weight: 600; font-size: 15px; }
|
|
1661
|
+
.ds-247420 .aicat-meta .status { color: var(--panel-text-2); font-family: var(--ff-mono); font-size: 12px; }
|
|
1662
|
+
.ds-247420 .aicat-meta .status .dot { color: var(--panel-accent); }
|
|
1663
|
+
|
|
1664
|
+
.ds-247420 .chat-msg.them.aicat .chat-avatar {
|
|
1665
|
+
background: var(--panel-2);
|
|
1666
|
+
color: var(--panel-accent);
|
|
1667
|
+
font-size: 11px;
|
|
1668
|
+
line-height: 1.0;
|
|
1669
|
+
letter-spacing: -0.5px;
|
|
1670
|
+
}
|