@ash-qw/dsh-theme-prts 2.0.0 → 2.1.1

package/src/styles/prts.css

@@ -1340,20 +1340,26 @@ html[data-dsh-prts][data-prts-conversation-style="deck-chat"] :is(
   color: var(--prts-ink) !important;
 }
 
-/* Bordered Baker tables need inset cells and a scrollport inside the bubble. */
+/* Baker code cards and tables. */
 html[data-dsh-prts][data-prts-conversation-style="deck-chat"] :is(
-  [data-prts-ai-surface], [data-message-role="assistant"], [data-message-role="user"],
-  :is([data-chat-flow-kind="user"], [data-submission-echo]:not([data-pending-steering])) [class$="_bubble"]
+[data-prts-ai-surface], [data-message-role="assistant"], [data-message-role="user"],
+:is([data-chat-flow-kind="user"], [data-submission-echo]:not([data-pending-steering])) [class$="_bubble"]
 ) {
-  & :is(th,td){padding-inline:14px!important}
-  & :is(.md-table-wide,[class*="_tableScroll_"]){
-    box-sizing:border-box;width:100%;max-width:100%;min-width:0;
-    margin-inline:0!important;padding:0!important;overflow:auto;
-    border:1px solid color-mix(in srgb,var(--prts-cyan) 24%,var(--prts-line));
-    border-radius:10px;corner-shape:round;
-    background:color-mix(in srgb,var(--prts-canvas) 88%,transparent);
-    & > table{border:0;background:transparent;margin:0;width:100%}
-  }
+/* Clip preserves header stickiness. */
+& :has(>[data-code-block-content]){
+box-sizing:border-box;max-width:100%;border:1px solid var(--prts-line);border-left:3px solid var(--prts-cyan);border-radius:12px;overflow:clip;
+& [data-code-block-banner]{border-radius:11px 11px 0 0;background:color-mix(in srgb,var(--prts-ink) 7%,var(--prts-canvas));border-bottom:1px solid var(--prts-line)}
+&>[data-code-block-content] pre{box-sizing:border-box;width:100%;border:0!important;border-radius:0 0 11px 11px;margin:0!important}
+}
+& :is(th,td){padding-inline:14px!important}
+& :is(.md-table-wide,[class*="_tableScroll_"]){
+box-sizing:border-box;width:100%;max-width:100%;min-width:0;
+margin-inline:0!important;padding:0!important;overflow:auto;
+border:1px solid color-mix(in srgb,var(--prts-cyan) 24%,var(--prts-line));
+border-radius:10px;corner-shape:round;
+background:color-mix(in srgb,var(--prts-canvas) 88%,transparent);
+& > table{border:0;background:transparent;margin:0;width:100%}
+}
 }
 
 /* Group process avatars without changing reply alignment or final-answer avatars. */
@@ -1361,10 +1367,10 @@ html[data-dsh-prts][data-prts-conversation-style="deck-chat"] [data-prts-avatar-
 
 /* Baker quote surfaces; classic prose retains the host styling. */
 html[data-dsh-prts][data-prts-conversation-style="deck-chat"] :is([data-chat-flow-kind],[data-message-role],[data-prts-ai-surface],[data-submission-echo]) blockquote {
-  border-radius:10px;corner-shape:round;padding:8px 14px;
-  border-inline-start:3px solid var(--prts-cyan)!important;
-  & > :first-child{margin-top:0}
-  & > :last-child{margin-bottom:0}
+border-radius:10px;corner-shape:round;padding:8px 14px;
+border-inline-start:3px solid var(--prts-cyan)!important;
+& > :first-child{margin-top:0}
+& > :last-child{margin-bottom:0}
 }
 
 html[data-dsh-prts] [aria-invalid="true"],
@@ -1569,6 +1575,7 @@ html[data-dsh-prts] [data-prts-glass-control="preset"] {
   color: var(--prts-ink) !important;
 }
 
+html[data-dsh-prts] [data-menu-material][class*="_7KE1Ra_menu"],
 html[data-dsh-prts] [data-prts-glass-menu],
 html[data-dsh-prts] [data-prts-floating-glass="menu"],
 html[data-dsh-prts] [data-prts-floating-glass="listbox"],
@@ -1592,6 +1599,7 @@ html[data-dsh-prts] [data-prts-floating-glass="dialog"] {
   -webkit-backdrop-filter: none;
 }
 
+html[data-dsh-prts] [data-menu-material][class*="_7KE1Ra_menu"] :is([role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"]),
 html[data-dsh-prts] [data-prts-floating-item] {
   min-height: 38px;
   border-radius: var(--prts-radius-control) !important;
@@ -1906,3 +1914,91 @@ html[data-dsh-prts][data-prts-conversation-style="deck-chat"] {
   & :is([data-chat-flow-kind="user"], [data-submission-echo]:not([data-pending-steering])) [class$="_bubble"]::before,
   & [data-message-role="user"]::before { left: auto; right: -9px; transform: scaleX(-1); }
 }
+
+/* The upstream component replaces only the composer's two background plates. */
+html[data-dsh-prts] :is([data-composer-card], [data-prts-composer-fallback])[data-prts-composer-glass-active]::before,
+html[data-dsh-prts] :is([data-composer-card], [data-prts-composer-fallback])[data-prts-composer-glass-active]::after {
+  content: none;
+}
+html[data-dsh-prts] :is([data-composer-card], [data-prts-composer-fallback]) > [data-prts-composer-glass-surface] {
+  position: absolute !important;
+  inset: -16px;
+  z-index: 0 !important;
+  pointer-events: none;
+}
+
+/* The host's sticky dock fades to opaque after 36px; let the glass see the chat. */
+html[data-dsh-prts] [data-composer-seat]:has([data-prts-composer-glass-active]) {
+  background: transparent !important;
+}
+
+
+/* Optional popup material changes neither popup geometry nor its border/shadow. */
+html[data-dsh-prts][data-prts-composer-enhanced] {
+  --prts-composer-menu-tint: rgba(25, 32, 38, .85);
+  --prts-composer-menu-filter: blur(16px) saturate(1.15);
+}
+html[data-dsh-prts][data-prts-composer-enhanced][data-prts-scheme="light"] {
+  --prts-composer-menu-tint: rgba(244, 249, 251, .85);
+}
+html[data-dsh-prts][data-prts-composer-enhanced] :is(
+  [data-prts-glass-menu],
+  [data-menu-material][class*="_7KE1Ra_menu"]
+) {
+  background: var(--prts-composer-menu-tint) !important;
+  backdrop-filter: var(--prts-composer-menu-filter) !important;
+  -webkit-backdrop-filter: var(--prts-composer-menu-filter) !important;
+}
+/* Reuse the host material plate when present; do not stack two blur filters. */
+html[data-dsh-prts][data-prts-composer-enhanced] :is(
+  [data-prts-glass-menu],
+  [data-menu-material][class*="_7KE1Ra_menu"]
+):has(> [aria-hidden="true"][class*="_material_"]) {
+  background: transparent !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+}
+html[data-dsh-prts][data-prts-composer-enhanced] :is(
+  [data-prts-glass-menu],
+  [data-menu-material][class*="_7KE1Ra_menu"]
+) > [aria-hidden="true"][class*="_material_"] {
+  background: var(--prts-composer-menu-tint) !important;
+  backdrop-filter: var(--prts-composer-menu-filter) !important;
+  -webkit-backdrop-filter: var(--prts-composer-menu-filter) !important;
+}
+html[data-dsh-prts][data-prts-composer-enhanced] [data-prts-glass-menu] [data-prts-glass-menu]:not([data-menu-material]) {
+  background: transparent !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+  box-shadow: none !important;
+}
+
+/* The live CSS outline owns geometry; asynchronously decoded artwork only refracts. */
+html[data-dsh-prts] [data-prts-composer-glass-active] > [data-prts-composer-glass-surface] > .glass-surface {
+  mask: none !important;
+  -webkit-mask: none !important;
+  opacity: 1 !important;
+  clip-path: polygon(19px 16px, calc(50% - 42px) 16px, calc(50% - 37px) 21px, calc(50% + 37px) 21px, calc(50% + 42px) 16px, calc(100% - 19px) 16px, calc(100% - 16px) 19px, calc(100% - 16px) calc(100% - 19px), calc(100% - 19px) calc(100% - 16px), 19px calc(100% - 16px), 16px calc(100% - 19px), 16px 19px);
+}
+html[data-dsh-prts] [data-prts-composer-glass-active] :is(.glass-surface__line, .glass-surface__glow) {
+  display: none;
+}
+html[data-dsh-prts] :is([data-composer-card], [data-prts-composer-fallback])[data-prts-composer-glass-active]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  background: var(--prts-line-strong);
+  clip-path: polygon(evenodd,
+    3px 0, calc(50% - 42px) 0, calc(50% - 37px) 5px, calc(50% + 37px) 5px, calc(50% + 42px) 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px, 3px 0,
+    3px 1px, 1px 3px, 1px calc(100% - 3px), 3px calc(100% - 1px), calc(100% - 3px) calc(100% - 1px), calc(100% - 1px) calc(100% - 3px), calc(100% - 1px) 3px, calc(100% - 3px) 1px, calc(50% + 42px) 1px, calc(50% + 37px) 6px, calc(50% - 37px) 6px, calc(50% - 42px) 1px, 3px 1px);
+}
+
+/* A restrained tint/sheen keeps the material legible over a blank backdrop too. */
+html[data-dsh-prts] [data-prts-composer-glass-active] > [data-prts-composer-glass-surface] > .glass-surface {
+  background: linear-gradient(135deg, rgba(255, 255, 255, .055), transparent 65%), rgba(31, 40, 47, .5);
+}
+html[data-dsh-prts][data-prts-scheme="light"] [data-prts-composer-glass-active] > [data-prts-composer-glass-surface] > .glass-surface {
+  background: linear-gradient(135deg, rgba(255, 255, 255, .2), transparent 65%), rgba(244, 249, 251, .5);
+}

package/src/styles/refinement.css

@@ -150,6 +150,15 @@ html[data-dsh-prts] [data-prts-session-time] {
   transition: opacity 120ms ease, transform 220ms var(--prts-ease-spring);
 }
 
+/* DSH keeps its pin in the row's trailing slot; move that slot inside our face. */
+html[data-dsh-prts] [data-prts-session-row] > :is([aria-label="Pinned"], [class*="_pinIndicator"]) {
+  margin-right: calc(var(--prts-row-end-reserve) + 6px);
+}
+
+html[data-dsh-prts] [data-prts-session-row]:has(> :is([aria-label="Pinned"], [class*="_pinIndicator"])) [data-prts-session-time] {
+  margin-right: 8px;
+}
+
 html[data-dsh-prts] [data-prts-session-row]:hover [data-prts-session-time] {
   opacity: 0;
 }

package/src/styles/theme-settings-workbench.css

@@ -872,6 +872,9 @@ html[data-dsh-prts] [data-prts-avatar-crop]{position:fixed;inset:0;margin:auto;b
 
 html[data-dsh-prts]{
 [data-prts-conversation-settings]{display:grid;gap:16px;padding:18px;border:1px solid var(--prts-line);background:var(--prts-panel)}
+& [data-prts-theme-settings] :is([data-prts-baker-options], [data-prts-composer-glass-setting]) [data-prts-setting-row] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 8px 0; }
+& [data-prts-theme-settings] :is([data-prts-baker-options], [data-prts-composer-glass-setting]) [data-prts-setting-row] > span { display: grid; gap: 4px; min-width: 0; }
+& [data-prts-theme-settings] :is([data-prts-baker-options], [data-prts-composer-glass-setting]) [data-prts-setting-row] > [data-prts-setting-switch] { justify-self: start; }
 [data-prts-conversation-settings] header{display:grid;gap:5px}
 [data-prts-conversation-settings] small{display:block;color:var(--prts-muted);font-size:12px;line-height:1.6}
 [data-prts-conversation-cards]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}

package/src/vendor/react-bits/GlassSurface.css

@@ -0,0 +1,168 @@
+.glass-surface {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: opacity 0.26s ease-out;
+}
+
+.glass-surface__filter {
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  z-index: -1;
+}
+
+.glass-surface__content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+  border-radius: inherit;
+  position: relative;
+  z-index: 1;
+}
+
+.glass-surface--svg {
+  background: light-dark(hsl(0 0% 100% / var(--glass-frost, 0)), hsl(0 0% 0% / var(--glass-frost, 0)));
+  backdrop-filter: var(--filter-id, url(#glass-filter)) saturate(var(--glass-saturation, 1));
+  box-shadow:
+    0 0 2px 1px light-dark(color-mix(in oklch, black, transparent 85%), color-mix(in oklch, white, transparent 65%))
+      inset,
+    0 0 10px 4px light-dark(color-mix(in oklch, black, transparent 90%), color-mix(in oklch, white, transparent 85%))
+      inset,
+    0px 4px 16px rgba(17, 17, 26, 0.05),
+    0px 8px 24px rgba(17, 17, 26, 0.05),
+    0px 16px 56px rgba(17, 17, 26, 0.05),
+    0px 4px 16px rgba(17, 17, 26, 0.05) inset,
+    0px 8px 24px rgba(17, 17, 26, 0.05) inset,
+    0px 16px 56px rgba(17, 17, 26, 0.05) inset;
+}
+
+.glass-surface--webgl {
+  box-shadow:
+    0px 4px 16px rgba(17, 17, 26, 0.05),
+    0px 8px 24px rgba(17, 17, 26, 0.05),
+    0px 16px 56px rgba(17, 17, 26, 0.05);
+}
+
+.glass-surface__canvas,
+.glass-surface__frame {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+.glass-surface__frame {
+  background: light-dark(hsl(0 0% 100% / var(--glass-frost, 0)), hsl(0 0% 0% / var(--glass-frost, 0)));
+  box-shadow:
+    0 0 2px 1px light-dark(color-mix(in oklch, black, transparent 85%), color-mix(in oklch, white, transparent 65%))
+      inset,
+    0 0 10px 4px light-dark(color-mix(in oklch, black, transparent 90%), color-mix(in oklch, white, transparent 85%))
+      inset,
+    0px 4px 16px rgba(17, 17, 26, 0.05) inset,
+    0px 8px 24px rgba(17, 17, 26, 0.05) inset,
+    0px 16px 56px rgba(17, 17, 26, 0.05) inset;
+}
+
+.glass-surface--fallback {
+  background: light-dark(
+    hsl(0 0% 100% / calc(0.12 + var(--glass-frost, 0) * 0.5)),
+    hsl(0 0% 100% / calc(0.04 + var(--glass-frost, 0) * 0.3))
+  );
+  -webkit-backdrop-filter: blur(12px) saturate(calc(var(--glass-saturation, 1) * 1.4)) brightness(1.04);
+  backdrop-filter: blur(12px) saturate(calc(var(--glass-saturation, 1) * 1.4)) brightness(1.04);
+  box-shadow:
+    inset 0 1px 0 0 light-dark(hsl(0 0% 100% / 0.85), hsl(0 0% 100% / 0.3)),
+    inset 0 -1px 0 0 light-dark(hsl(0 0% 100% / 0.35), hsl(0 0% 100% / 0.08)),
+    0 0 2px 1px light-dark(color-mix(in oklch, black, transparent 88%), color-mix(in oklch, white, transparent 72%))
+      inset,
+    0 0 12px 3px light-dark(color-mix(in oklch, white, transparent 72%), color-mix(in oklch, white, transparent 90%))
+      inset,
+    0px 4px 16px rgba(17, 17, 26, 0.06),
+    0px 8px 24px rgba(17, 17, 26, 0.06),
+    0px 16px 56px rgba(17, 17, 26, 0.06);
+}
+
+.glass-surface__sheen,
+.glass-surface__rim {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+.glass-surface__sheen {
+  background: linear-gradient(
+    135deg,
+    light-dark(hsl(0 0% 100% / 0.42), hsl(0 0% 100% / 0.14)) 0%,
+    transparent 42%,
+    transparent 64%,
+    light-dark(hsl(0 0% 100% / 0.18), hsl(0 0% 100% / 0.05)) 100%
+  );
+}
+
+.glass-surface__rim {
+  padding: 3px;
+  background: linear-gradient(
+    150deg,
+    light-dark(hsl(0 0% 100% / 0.7), hsl(0 0% 100% / 0.34)),
+    light-dark(hsl(0 0% 100% / 0.1), hsl(0 0% 100% / 0.03)) 45%,
+    light-dark(hsl(0 0% 100% / 0.08), hsl(0 0% 100% / 0.02)) 60%,
+    light-dark(hsl(0 0% 100% / 0.42), hsl(0 0% 100% / 0.18))
+  );
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask:
+    linear-gradient(#000 0 0) content-box exclude,
+    linear-gradient(#000 0 0);
+}
+
+.glass-surface__line,
+.glass-surface__glow {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
+
+.glass-surface--svg .glass-surface__line,
+.glass-surface--webgl .glass-surface__line {
+  background: light-dark(color-mix(in oklch, black, transparent 85%), color-mix(in oklch, white, transparent 65%));
+}
+
+.glass-surface--svg .glass-surface__glow,
+.glass-surface--webgl .glass-surface__glow {
+  background: light-dark(color-mix(in oklch, black, transparent 90%), color-mix(in oklch, white, transparent 85%));
+}
+
+.glass-surface--fallback .glass-surface__line {
+  background: light-dark(color-mix(in oklch, black, transparent 88%), color-mix(in oklch, white, transparent 72%));
+}
+
+.glass-surface--fallback .glass-surface__glow {
+  background: light-dark(color-mix(in oklch, white, transparent 72%), color-mix(in oklch, white, transparent 90%));
+}
+
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .glass-surface--fallback {
+    background: light-dark(hsl(0 0% 100% / 0.72), hsl(0 0% 12% / 0.72));
+  }
+}
+
+.glass-surface:focus-visible {
+  outline: 2px solid light-dark(#007aff, #0a84ff);
+  outline-offset: 2px;
+}