anentrypoint-design 0.0.124 → 0.0.127

package/app-shell.css

@@ -624,13 +624,26 @@ table tr.clickable:hover td { background: var(--bg-2); }
   flex: 1; min-height: 0; overflow-y: auto;
   padding: var(--space-2) 0;
   scrollbar-width: thin; scrollbar-color: var(--bg-3) transparent;
+  scroll-behavior: smooth;
 }
 .chat-thread::-webkit-scrollbar { width: 8px; }
 .chat-thread::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 4px; }
+.chat-thread:empty::before {
+  content: 'no messages yet\astart the conversation';
+  white-space: pre;
+  color: var(--fg-3);
+  font-family: var(--ff-mono);
+  font-size: var(--fs-sm);
+  text-align: center;
+  margin: auto;
+  opacity: 0.6;
+  pointer-events: none;
+}
 
-.chat-msg { display: flex; gap: 12px; align-items: flex-start; padding: 2px 0; }
+.chat-msg { display: flex; gap: 12px; align-items: flex-start; padding: 2px 0; position: relative; }
 .chat-msg.you { flex-direction: row-reverse; }
 .chat-msg.you .chat-stack { align-items: flex-end; }
+.chat-msg:hover { background: color-mix(in oklab, var(--fg) 1%, transparent); padding: 6px 8px; margin: -4px -8px; border-radius: 8px; transition: background 0.12s ease, padding 0.12s ease; }
 
 .chat-avatar {
   width: 36px; height: 36px; flex-shrink: 0;
@@ -638,7 +651,10 @@ table tr.clickable:hover td { background: var(--bg-2); }
   display: inline-flex; align-items: center; justify-content: center;
   font-family: var(--ff-mono); font-size: 12px; font-weight: 600;
   text-transform: lowercase; letter-spacing: 0.02em; user-select: none;
+  transition: transform 0.12s ease, box-shadow 0.12s ease;
+  position: relative;
 }
+.chat-msg:hover .chat-avatar { transform: scale(1.08); box-shadow: 0 2px 8px color-mix(in oklab, var(--fg) 10%, transparent); }
 .chat-msg.you .chat-avatar {
   background: color-mix(in oklab, var(--accent) 26%, var(--bg-3));
   color: var(--accent);
@@ -658,7 +674,9 @@ table tr.clickable:hover td { background: var(--bg-2); }
   border-radius: 14px; line-height: 1.55;
   word-wrap: break-word; overflow-wrap: anywhere;
   font-size: var(--fs-sm);
+  transition: transform 0.12s ease, box-shadow 0.12s ease;
 }
+.chat-msg:hover .chat-bubble { transform: translateY(-1px); box-shadow: 0 4px 16px color-mix(in oklab, var(--fg) 8%, transparent); }
 .chat-msg.you .chat-bubble { background: var(--accent); color: var(--accent-fg); }
 .chat-msg.aicat .chat-bubble {
   background: color-mix(in oklab, var(--mascot) 14%, var(--bg-2));
@@ -751,6 +769,12 @@ table tr.clickable:hover td { background: var(--bg-2); }
   max-width: min(100%, 480px); background: var(--bg-2);
   text-decoration: none; color: var(--fg);
   border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
+  transition: box-shadow 0.15s ease, border-color 0.15s ease;
+}
+.chat-msg:hover .chat-image,
+.chat-image:hover {
+  border-color: color-mix(in oklab, var(--accent) 35%, transparent);
+  box-shadow: 0 4px 16px color-mix(in oklab, var(--fg) 12%, transparent);
 }
 .chat-image img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: cover; }
 .chat-image .cap,
@@ -789,7 +813,9 @@ table tr.clickable:hover td { background: var(--bg-2); }
   color: var(--fg);
   border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
   border-radius: 12px; overflow: hidden; max-width: min(100%, 480px);
+  transition: box-shadow 0.12s ease, border-color 0.12s ease;
 }
+.chat-msg:hover .chat-pdf { border-color: color-mix(in oklab, var(--accent) 30%, transparent); box-shadow: 0 2px 12px color-mix(in oklab, var(--fg) 6%, transparent); }
 .chat-pdf-head {
   display: flex; align-items: center; gap: 10px; padding: 10px 14px;
   background: color-mix(in oklab, var(--fg) 5%, var(--bg-2));
@@ -811,9 +837,14 @@ table tr.clickable:hover td { background: var(--bg-2); }
   border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
   border-radius: 12px; text-decoration: none; color: var(--fg);
   max-width: min(100%, 480px);
-  transition: background var(--dur-snap, .15s) var(--ease, ease), border-color var(--dur-snap, .15s) var(--ease, ease);
+  transition: background var(--dur-snap, .15s) var(--ease, ease), border-color var(--dur-snap, .15s) var(--ease, ease), box-shadow 0.15s ease;
+}
+.chat-msg:hover .chat-link,
+.chat-link:hover {
+  background: var(--bg-3);
+  border-color: color-mix(in oklab, var(--accent) 40%, transparent);
+  box-shadow: 0 2px 12px color-mix(in oklab, var(--fg) 8%, transparent);
 }
-.chat-link:hover { background: var(--bg-3); border-color: color-mix(in oklab, var(--accent) 40%, transparent); }
 .chat-link:not(:has(.thumb)):not(:has(img)) { grid-template-columns: 1fr; }
 .chat-link .thumb,
 .chat-link img.thumb { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; background: var(--bg-3) center/cover no-repeat; }
@@ -842,9 +873,10 @@ table tr.clickable:hover td { background: var(--bg-2); }
   border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
   border-radius: 999px; font-size: var(--fs-xs);
   cursor: pointer; user-select: none;
-  transition: background var(--dur-snap, .12s) var(--ease, ease), border-color var(--dur-snap, .12s) var(--ease, ease);
+  transition: background var(--dur-snap, .12s) var(--ease, ease), border-color var(--dur-snap, .12s) var(--ease, ease), transform 0.12s ease;
+  position: relative;
 }
-.chat-reactions .rxn:hover { background: var(--bg-3); border-color: color-mix(in oklab, var(--accent) 40%, transparent); }
+.chat-reactions .rxn:hover { background: var(--bg-3); border-color: color-mix(in oklab, var(--accent) 40%, transparent); transform: scale(1.06); }
 .chat-reactions .rxn.you {
   background: color-mix(in oklab, var(--accent) 18%, var(--bg-2));
   border-color: color-mix(in oklab, var(--accent) 55%, transparent);
@@ -867,6 +899,19 @@ table tr.clickable:hover td { background: var(--bg-2); }
   30% { transform: translateY(-5px); opacity: 1; }
 }
 
+@keyframes chat-fade-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.chat-msg {
+  animation: chat-fade-in 0.3s ease-out forwards;
+}
+.chat-msg:nth-child(1) { animation-delay: 0s; }
+.chat-msg:nth-child(2) { animation-delay: 0.05s; }
+.chat-msg:nth-child(3) { animation-delay: 0.1s; }
+.chat-msg:nth-child(n+4) { animation-delay: 0.15s; }
+
 .chat-composer {
   display: flex; align-items: flex-end; gap: 8px;
   padding: var(--space-3) 0 0;
@@ -885,7 +930,8 @@ table tr.clickable:hover td { background: var(--bg-2); }
 .chat-composer textarea:focus {
   background: var(--bg-2);
   border-color: var(--accent);
-  box-shadow: 0 0 0 1px var(--accent);
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 20%, transparent);
+  outline: none;
 }
 .chat-composer .send,
 .chat-composer button {
@@ -929,3 +975,48 @@ table tr.clickable:hover td { background: var(--bg-2); }
 .app-side .count:empty { display: none; }
 .app-side a .glyph { font-family: var(--ff-mono); font-size: 13px; font-weight: 600; color: var(--fg-3); text-align: center; }
 .app-side a.active .glyph { color: var(--accent); }
+
+/* ── select primitive ─────────────────────────────────────────────────── */
+.ds-select {
+    width: 100%;
+    padding: 10px 14px;
+    background: var(--bg-2);
+    border: 0;
+    border-radius: var(--r-2);
+    font-family: inherit;
+    font-size: var(--fs-sm);
+    color: var(--fg);
+    outline: 0;
+    appearance: none;
+    background-image: linear-gradient(45deg, transparent 50%, var(--fg-3) 50%),
+        linear-gradient(135deg, var(--fg-3) 50%, transparent 50%);
+    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
+    background-size: 5px 5px, 5px 5px;
+    background-repeat: no-repeat;
+    cursor: pointer;
+}
+.ds-select:focus { box-shadow: inset 0 0 0 2px var(--accent); }
+.ds-select:hover { background-color: var(--bg-3); }
+
+/* ── chat composer autogrow polish ────────────────────────────────────── */
+.chat-composer textarea {
+    resize: none;
+    overflow-y: auto;
+    transition: height 0.08s ease;
+    line-height: 1.5;
+}
+.chat-composer textarea:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* ── mobile responsive: chat ──────────────────────────────────────────── */
+@media (max-width: 768px) {
+    .chat-stack { max-width: 100%; }
+    .chat-msg { padding: 4px 0; }
+    .chat-msg:hover { padding: 4px 0; margin: 0; border-radius: 0; background: transparent; }
+    .chat-bubble { font-size: var(--fs-sm); padding: 10px 14px; }
+    .chat-avatar { width: 28px; height: 28px; font-size: 12px; }
+    .chat-composer { padding: 8px; }
+    .chat-composer textarea { padding: 10px 12px; }
+}

package/chat.css

@@ -0,0 +1,2 @@
+/* chat.css — chat-specific styles. Currently empty; all chat styles live in
+   app-shell.css under the .chat-* prefix. Reserved for future split. */

package/dist/247420.css

@@ -856,13 +856,26 @@
   flex: 1; min-height: 0; overflow-y: auto;
   padding: var(--space-2) 0;
   scrollbar-width: thin; scrollbar-color: var(--bg-3) transparent;
+  scroll-behavior: smooth;
 }
 .ds-247420 .chat-thread::-webkit-scrollbar { width: 8px; }
 .ds-247420 .chat-thread::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 4px; }
+.ds-247420 .chat-thread:empty::before {
+  content: 'no messages yet\astart the conversation';
+  white-space: pre;
+  color: var(--fg-3);
+  font-family: var(--ff-mono);
+  font-size: var(--fs-sm);
+  text-align: center;
+  margin: auto;
+  opacity: 0.6;
+  pointer-events: none;
+}
 
-.ds-247420 .chat-msg { display: flex; gap: 12px; align-items: flex-start; padding: 2px 0; }
+.ds-247420 .chat-msg { display: flex; gap: 12px; align-items: flex-start; padding: 2px 0; position: relative; }
 .ds-247420 .chat-msg.you { flex-direction: row-reverse; }
 .ds-247420 .chat-msg.you .chat-stack { align-items: flex-end; }
+.ds-247420 .chat-msg:hover { background: color-mix(in oklab, var(--fg) 1%, transparent); padding: 6px 8px; margin: -4px -8px; border-radius: 8px; transition: background 0.12s ease, padding 0.12s ease; }
 
 .ds-247420 .chat-avatar {
   width: 36px; height: 36px; flex-shrink: 0;
@@ -870,7 +883,10 @@
   display: inline-flex; align-items: center; justify-content: center;
   font-family: var(--ff-mono); font-size: 12px; font-weight: 600;
   text-transform: lowercase; letter-spacing: 0.02em; user-select: none;
+  transition: transform 0.12s ease, box-shadow 0.12s ease;
+  position: relative;
 }
+.ds-247420 .chat-msg:hover .chat-avatar { transform: scale(1.08); box-shadow: 0 2px 8px color-mix(in oklab, var(--fg) 10%, transparent); }
 .ds-247420 .chat-msg.you .chat-avatar {
   background: color-mix(in oklab, var(--accent) 26%, var(--bg-3));
   color: var(--accent);
@@ -890,7 +906,9 @@
   border-radius: 14px; line-height: 1.55;
   word-wrap: break-word; overflow-wrap: anywhere;
   font-size: var(--fs-sm);
+  transition: transform 0.12s ease, box-shadow 0.12s ease;
 }
+.ds-247420 .chat-msg:hover .chat-bubble { transform: translateY(-1px); box-shadow: 0 4px 16px color-mix(in oklab, var(--fg) 8%, transparent); }
 .ds-247420 .chat-msg.you .chat-bubble { background: var(--accent); color: var(--accent-fg); }
 .ds-247420 .chat-msg.aicat .chat-bubble {
   background: color-mix(in oklab, var(--mascot) 14%, var(--bg-2));
@@ -983,6 +1001,12 @@
   max-width: min(100%, 480px); background: var(--bg-2);
   text-decoration: none; color: var(--fg);
   border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
+  transition: box-shadow 0.15s ease, border-color 0.15s ease;
+}
+.ds-247420 .chat-msg:hover .chat-image,
+.ds-247420 .chat-image:hover {
+  border-color: color-mix(in oklab, var(--accent) 35%, transparent);
+  box-shadow: 0 4px 16px color-mix(in oklab, var(--fg) 12%, transparent);
 }
 .ds-247420 .chat-image img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: cover; }
 .ds-247420 .chat-image .cap,
@@ -1021,7 +1045,9 @@
   color: var(--fg);
   border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
   border-radius: 12px; overflow: hidden; max-width: min(100%, 480px);
+  transition: box-shadow 0.12s ease, border-color 0.12s ease;
 }
+.ds-247420 .chat-msg:hover .chat-pdf { border-color: color-mix(in oklab, var(--accent) 30%, transparent); box-shadow: 0 2px 12px color-mix(in oklab, var(--fg) 6%, transparent); }
 .ds-247420 .chat-pdf-head {
   display: flex; align-items: center; gap: 10px; padding: 10px 14px;
   background: color-mix(in oklab, var(--fg) 5%, var(--bg-2));
@@ -1043,9 +1069,14 @@
   border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
   border-radius: 12px; text-decoration: none; color: var(--fg);
   max-width: min(100%, 480px);
-  transition: background var(--dur-snap, .15s) var(--ease, ease), border-color var(--dur-snap, .15s) var(--ease, ease);
+  transition: background var(--dur-snap, .15s) var(--ease, ease), border-color var(--dur-snap, .15s) var(--ease, ease), box-shadow 0.15s ease;
+}
+.ds-247420 .chat-msg:hover .chat-link,
+.ds-247420 .chat-link:hover {
+  background: var(--bg-3);
+  border-color: color-mix(in oklab, var(--accent) 40%, transparent);
+  box-shadow: 0 2px 12px color-mix(in oklab, var(--fg) 8%, transparent);
 }
-.ds-247420 .chat-link:hover { background: var(--bg-3); border-color: color-mix(in oklab, var(--accent) 40%, transparent); }
 .ds-247420 .chat-link:not(:has(.thumb)):not(:has(img)) { grid-template-columns: 1fr; }
 .ds-247420 .chat-link .thumb,
 .ds-247420 .chat-link img.thumb { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; background: var(--bg-3) center/cover no-repeat; }
@@ -1074,9 +1105,10 @@
   border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
   border-radius: 999px; font-size: var(--fs-xs);
   cursor: pointer; user-select: none;
-  transition: background var(--dur-snap, .12s) var(--ease, ease), border-color var(--dur-snap, .12s) var(--ease, ease);
+  transition: background var(--dur-snap, .12s) var(--ease, ease), border-color var(--dur-snap, .12s) var(--ease, ease), transform 0.12s ease;
+  position: relative;
 }
-.ds-247420 .chat-reactions .rxn:hover { background: var(--bg-3); border-color: color-mix(in oklab, var(--accent) 40%, transparent); }
+.ds-247420 .chat-reactions .rxn:hover { background: var(--bg-3); border-color: color-mix(in oklab, var(--accent) 40%, transparent); transform: scale(1.06); }
 .ds-247420 .chat-reactions .rxn.you {
   background: color-mix(in oklab, var(--accent) 18%, var(--bg-2));
   border-color: color-mix(in oklab, var(--accent) 55%, transparent);
@@ -1099,6 +1131,19 @@
   30% { transform: translateY(-5px); opacity: 1; }
 }
 
+@keyframes chat-fade-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.ds-247420 .chat-msg {
+  animation: chat-fade-in 0.3s ease-out forwards;
+}
+.ds-247420 .chat-msg:nth-child(1) { animation-delay: 0s; }
+.ds-247420 .chat-msg:nth-child(2) { animation-delay: 0.05s; }
+.ds-247420 .chat-msg:nth-child(3) { animation-delay: 0.1s; }
+.ds-247420 .chat-msg:nth-child(n+4) { animation-delay: 0.15s; }
+
 .ds-247420 .chat-composer {
   display: flex; align-items: flex-end; gap: 8px;
   padding: var(--space-3) 0 0;
@@ -1117,7 +1162,8 @@
 .ds-247420 .chat-composer textarea:focus {
   background: var(--bg-2);
   border-color: var(--accent);
-  box-shadow: 0 0 0 1px var(--accent);
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 20%, transparent);
+  outline: none;
 }
 .ds-247420 .chat-composer .send,
 .ds-247420 .chat-composer button {
@@ -1162,6 +1208,51 @@
 .ds-247420 .app-side a .glyph { font-family: var(--ff-mono); font-size: 13px; font-weight: 600; color: var(--fg-3); text-align: center; }
 .ds-247420 .app-side a.active .glyph { color: var(--accent); }
 
+/* ── select primitive ─────────────────────────────────────────────────── */
+.ds-247420 .ds-select {
+    width: 100%;
+    padding: 10px 14px;
+    background: var(--bg-2);
+    border: 0;
+    border-radius: var(--r-2);
+    font-family: inherit;
+    font-size: var(--fs-sm);
+    color: var(--fg);
+    outline: 0;
+    appearance: none;
+    background-image: linear-gradient(45deg, transparent 50%, var(--fg-3) 50%),
+        linear-gradient(135deg, var(--fg-3) 50%, transparent 50%);
+    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
+    background-size: 5px 5px, 5px 5px;
+    background-repeat: no-repeat;
+    cursor: pointer;
+}
+.ds-247420 .ds-select:focus { box-shadow: inset 0 0 0 2px var(--accent); }
+.ds-247420 .ds-select:hover { background-color: var(--bg-3); }
+
+/* ── chat composer autogrow polish ────────────────────────────────────── */
+.ds-247420 .chat-composer textarea {
+    resize: none;
+    overflow-y: auto;
+    transition: height 0.08s ease;
+    line-height: 1.5;
+}
+.ds-247420 .chat-composer textarea:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* ── mobile responsive: chat ──────────────────────────────────────────── */
+@media (max-width: 768px) {
+    .ds-247420 .chat-stack { max-width: 100%; }
+    .ds-247420 .chat-msg { padding: 4px 0; }
+    .ds-247420 .chat-msg:hover { padding: 4px 0; margin: 0; border-radius: 0; background: transparent; }
+    .ds-247420 .chat-bubble { font-size: var(--fs-sm); padding: 10px 14px; }
+    .ds-247420 .chat-avatar { width: 28px; height: 28px; font-size: 12px; }
+    .ds-247420 .chat-composer { padding: 8px; }
+    .ds-247420 .chat-composer textarea { padding: 10px 12px; }
+}
+
 /* community.css */
 /* ============================================================
    247420 design system — community surface (Discord-style chat)
@@ -2097,6 +2188,10 @@
   .ds-247420 .cm-channel-sidebar { left: 56px; }
 }
 
+/* chat.css */
+/* chat.css — chat-specific styles. Currently empty; all chat styles live in
+   app-shell.css under the .chat-* prefix. Reserved for future split. */
+
 /* editor-primitives.css */
 /* editor-primitives.css — chrome for in-engine editors, inspectors, IDEs,
    debug HUDs. All rules under .ds-247420 scope (build prefixes). Tokens