@ash-qw/dsh-theme-prts 0.1.91

package/src/client/ui-store.js

@@ -0,0 +1,23 @@
+import { DEFAULT_PREFERENCES } from './preferences.js'
+import { EMPTY_STATUS } from './status-projection.js'
+
+export function createPrtsUiStore(defineStore, initial = {}) {
+  const initialPreferences = initial.preferences ?? DEFAULT_PREFERENCES
+  const initialStatus = initial.status ?? EMPTY_STATUS
+  const initialRevision = initial.revision ?? -1
+  return defineStore({
+    init: () => ({
+      preferences: { ...initialPreferences },
+      status: { ...initialStatus },
+      revision: initialRevision,
+    }),
+    actions: {
+      sync(draft, preferences, status, revision) {
+        if (revision <= draft.revision) return
+        draft.preferences = { ...preferences }
+        draft.status = { ...status }
+        draft.revision = revision
+      },
+    },
+  })
+}

package/src/index.js

@@ -0,0 +1,4 @@
+export const PACKAGE_ID = '@ash-qw/dsh-theme-prts'
+export const THEME_PLUGIN_ID = 'dsh-theme-prts'
+
+export function apply() {}

package/src/styles/conversation-scale.css

@@ -0,0 +1,471 @@
+/* Codex-like conversation scale. It never changes native message or composer geometry. */
+html[data-dsh-prts] [data-message-role]::before,
+html[data-dsh-prts] [data-chat-flow-kind]::before {
+  content: none !important;
+  display: none !important;
+}
+
+html[data-dsh-prts] [data-conversation-scroll]:not([data-prts-hero-active])[data-prts-conversation-scale-ready]::before,
+html[data-dsh-prts] [data-conversation-scroll]:not([data-prts-hero-active])[data-prts-conversation-scale-empty]::before {
+  content: none !important;
+  display: none !important;
+}
+
+html[data-dsh-prts] [data-prts-conversation-scale] {
+  position: absolute;
+  z-index: 8;
+  width: 32px;
+  min-height: 84px;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  opacity: .54;
+  visibility: visible;
+  transition: opacity 100ms ease, filter 150ms ease, visibility 0s linear;
+  pointer-events: auto;
+  touch-action: none;
+  cursor: pointer;
+  isolation: isolate;
+}
+
+html[data-dsh-prts] [data-prts-conversation-scale][data-prts-resizing] {
+  opacity: .38;
+  filter: none;
+  transition: none;
+}
+
+html[data-dsh-prts] [data-prts-conversation-scale][data-prts-resizing] :is(
+  [data-prts-conversation-scale-accent],
+  [data-prts-conversation-scale-history]
+) {
+  filter: none;
+  transition: none;
+}
+
+html[data-dsh-prts] [data-prts-conversation-scale]:is(
+  [data-prts-conversation-scale-obstructed],
+  [data-prts-conversation-scale-space-obstructed]
+) {
+  opacity: 0;
+  visibility: hidden;
+  transition-delay: 0s, 0s, 100ms;
+  pointer-events: none;
+}
+
+html[data-dsh-prts] [data-prts-conversation-scale][data-prts-conversation-scale-blocked] {
+  opacity: 0;
+  visibility: hidden;
+  transition: none;
+  pointer-events: none;
+}
+
+html[data-dsh-prts] [data-prts-conversation-scale]:focus {
+  outline: none;
+}
+
+html[data-dsh-prts] [data-prts-conversation-scale]:focus-visible {
+  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--prts-cyan) 34%, transparent));
+}
+
+html[data-dsh-prts] [data-prts-conversation-scale-svg] {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  shape-rendering: geometricPrecision;
+}
+
+html[data-dsh-prts] [data-prts-conversation-scale-marks] {
+  pointer-events: none;
+}
+
+html[data-dsh-prts] :is(
+  [data-prts-conversation-scale-gray],
+  [data-prts-conversation-scale-accent],
+  [data-prts-conversation-scale-history]
+) {
+  fill: none;
+  stroke-width: 1;
+  stroke-linecap: square;
+  vector-effect: non-scaling-stroke;
+  pointer-events: none;
+}
+
+html[data-dsh-prts] [data-prts-conversation-scale-gray] {
+  stroke: color-mix(in srgb, var(--prts-muted) 76%, var(--prts-line-strong));
+}
+
+html[data-dsh-prts] [data-prts-conversation-scale-accent] {
+  stroke: var(--prts-yellow);
+  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--prts-yellow) 42%, transparent));
+}
+
+html[data-dsh-prts] [data-prts-conversation-scale-history] {
+  stroke: var(--prts-cyan);
+  stroke-width: 1.5;
+  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--prts-cyan) 38%, transparent));
+}
+
+html[data-dsh-prts] [data-prts-conversation-scale-history] {
+  transition: stroke-width 100ms ease, filter 120ms ease;
+}
+
+html[data-dsh-prts] [data-prts-conversation-scale][data-prts-conversation-history-selected]
+  [data-prts-conversation-scale-history] {
+  stroke-width: 2.5;
+  filter:
+    drop-shadow(0 0 3px color-mix(in srgb, var(--prts-cyan) 78%, transparent))
+    drop-shadow(0 0 8px color-mix(in srgb, var(--prts-cyan) 48%, transparent));
+}
+
+html[data-dsh-prts] [data-prts-conversation-history-hint],
+html[data-dsh-prts] [data-prts-conversation-history-hint] * {
+  box-sizing: border-box;
+}
+
+html[data-dsh-prts] [data-prts-conversation-history-hint] {
+  position: absolute;
+  z-index: 13;
+  height: 8px;
+  transform: translateY(-50%);
+  pointer-events: auto;
+}
+
+html[data-dsh-prts] [data-prts-conversation-history-hint][hidden],
+html[data-dsh-prts] [data-prts-conversation-history-tooltip][hidden] {
+  display: none;
+}
+
+html[data-dsh-prts] [data-prts-conversation-history-trigger] {
+  width: 30px;
+  min-width: 30px;
+  height: 8px;
+  min-height: 8px;
+  max-height: 8px;
+  padding: 0;
+  display: block;
+  border: 0;
+  border-radius: 0;
+  opacity: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+html[data-dsh-prts] [data-prts-conversation-history-tooltip] {
+  position: absolute;
+  top: var(--prts-history-tooltip-top, 50%);
+  left: calc(100% + 10px);
+  width: 360px;
+  height: 128px;
+  margin: 0;
+  padding: 1px;
+  overflow: visible;
+  border: 0;
+  background: var(--prts-line-strong);
+  color: var(--prts-ink);
+  clip-path: polygon(
+    3px 0, calc(100% - 3px) 0, 100% 3px,
+    100% calc(100% - 3px), calc(100% - 3px) 100%,
+    3px 100%, 0 calc(100% - 3px), 0 3px
+  );
+  opacity: .98;
+  transform: translate3d(0, 0, 0);
+  pointer-events: none;
+  isolation: isolate;
+  animation: prts-conversation-history-tooltip-in 120ms var(--prts-ease-snap);
+}
+
+html[data-dsh-prts] [data-prts-conversation-history-tooltip]::before {
+  content: "";
+  position: absolute;
+  z-index: 0;
+  inset: 1px;
+  background: var(--prts-active-glass);
+  clip-path: polygon(
+    2px 0, calc(100% - 2px) 0, 100% 2px,
+    100% calc(100% - 2px), calc(100% - 2px) 100%,
+    2px 100%, 0 calc(100% - 2px), 0 2px
+  );
+  backdrop-filter: var(--prts-active-glass-filter);
+  -webkit-backdrop-filter: var(--prts-active-glass-filter);
+}
+
+html[data-dsh-prts] [data-prts-conversation-history-tooltip]
+  [data-prts-conversation-preview-row="question"] b {
+  color: var(--prts-cyan);
+}
+
+html[data-dsh-prts] [data-prts-conversation-history-tooltip-label] {
+  overflow: hidden;
+  color: var(--prts-ink);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+html[data-dsh-prts] [data-prts-conversation-history-tooltip-content] {
+  min-width: 0;
+  display: grid;
+  gap: 3px;
+}
+
+html[data-dsh-prts] [data-prts-conversation-history-tooltip-content] strong {
+  color: var(--prts-ink);
+  font-size: 15px;
+  font-weight: 750;
+}
+
+html[data-dsh-prts] [data-prts-conversation-history-tooltip-content] span {
+  overflow: hidden;
+  color: var(--prts-muted);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+html[data-dsh-prts] [data-prts-conversation-history-tooltip-connector] {
+  position: absolute;
+  z-index: 2;
+  top: var(--prts-history-tooltip-anchor-y, 50%);
+  right: 100%;
+  width: 14px;
+  height: 1px;
+  background: linear-gradient(90deg, var(--prts-cyan), var(--prts-line-strong));
+  transform: translateY(-.5px);
+  pointer-events: none;
+}
+
+html[data-dsh-prts] [data-prts-conversation-history-tooltip-connector]::before {
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: 0;
+  width: 3px;
+  height: 3px;
+  background: var(--prts-cyan);
+}
+
+@keyframes prts-conversation-history-tooltip-in {
+  from { opacity: 0; transform: translate3d(-4px, 0, 0); }
+  to { opacity: .98; transform: translate3d(0, 0, 0); }
+}
+
+html[data-dsh-prts] [data-prts-conversation-scale-hit] {
+  pointer-events: all;
+}
+
+html[data-dsh-prts] [data-prts-conversation-history-status],
+html[data-dsh-prts] [data-prts-conversation-history-status] * {
+  box-sizing: border-box;
+}
+
+html[data-dsh-prts] [data-prts-conversation-history-status] {
+  position: absolute;
+  z-index: 13;
+  min-height: 34px;
+  max-width: min(320px, calc(100% - 72px));
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 5px 6px 5px 10px;
+  border: 1px solid var(--prts-line-strong);
+  background: var(--prts-active-glass);
+  color: var(--prts-ink);
+  box-shadow: 0 8px 22px color-mix(in srgb, var(--prts-canvas) 22%, transparent);
+  clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
+  font: 700 12px/1.35 var(--prts-mono);
+  backdrop-filter: var(--prts-active-glass-filter);
+  -webkit-backdrop-filter: var(--prts-active-glass-filter);
+}
+
+html[data-dsh-prts] [data-prts-conversation-history-status][hidden] {
+  display: none;
+}
+
+html[data-dsh-prts] [data-prts-conversation-history-text] {
+  min-width: 0;
+}
+
+html[data-dsh-prts] [data-prts-conversation-history-action] {
+  min-width: 44px;
+  min-height: 24px;
+  padding: 3px 8px;
+  border: 1px solid var(--prts-cyan);
+  border-radius: 0;
+  background: transparent;
+  color: var(--prts-cyan);
+  font: inherit;
+  cursor: pointer;
+}
+
+html[data-dsh-prts] [data-prts-conversation-history-status][data-prts-history-phase="error"] {
+  border-color: var(--prts-yellow);
+}
+
+html[data-dsh-prts] [data-prts-conversation-history-status][data-prts-history-phase="loading"] {
+  color: var(--prts-cyan);
+}
+
+html[data-dsh-prts] [data-prts-conversation-preview] {
+  --prts-preview-anchor-y: 46px;
+  position: absolute;
+  z-index: 12;
+  width: 360px;
+  max-width: calc(100% - 64px);
+  height: 128px;
+  margin: 0;
+  padding: 1px;
+  overflow: visible;
+  border: 0;
+  background: var(--prts-line-strong);
+  color: var(--prts-ink);
+  clip-path: polygon(
+    3px 0, calc(100% - 3px) 0, 100% 3px,
+    100% calc(100% - 3px), calc(100% - 3px) 100%,
+    3px 100%, 0 calc(100% - 3px), 0 3px
+  );
+  opacity: 0;
+  visibility: hidden;
+  transform: translate3d(-4px, 0, 0);
+  transition: opacity 100ms ease, transform 120ms var(--prts-ease-snap), visibility 0s linear 120ms;
+  pointer-events: none;
+  isolation: isolate;
+}
+
+html[data-dsh-prts] [data-prts-conversation-preview]::before {
+  content: "";
+  position: absolute;
+  z-index: 0;
+  inset: 1px;
+  background: var(--prts-active-glass);
+  clip-path: polygon(
+    2px 0, calc(100% - 2px) 0, 100% 2px,
+    100% calc(100% - 2px), calc(100% - 2px) 100%,
+    2px 100%, 0 calc(100% - 2px), 0 2px
+  );
+  backdrop-filter: var(--prts-active-glass-filter);
+  -webkit-backdrop-filter: var(--prts-active-glass-filter);
+}
+
+html[data-dsh-prts] [data-prts-conversation-preview][data-prts-conversation-preview-visible] {
+  opacity: .98;
+  visibility: visible;
+  transform: translate3d(0, 0, 0);
+  transition-delay: 0s;
+}
+
+html[data-dsh-prts] [data-prts-conversation-preview-connector] {
+  position: absolute;
+  z-index: 2;
+  top: var(--prts-preview-anchor-y);
+  right: 100%;
+  width: 14px;
+  height: 1px;
+  background: linear-gradient(90deg, var(--prts-yellow), var(--prts-line-strong));
+  transform: translateY(-.5px);
+  pointer-events: none;
+}
+
+html[data-dsh-prts] [data-prts-conversation-preview-connector]::before {
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: 0;
+  width: 3px;
+  height: 3px;
+  background: var(--prts-yellow);
+}
+
+html[data-dsh-prts] [data-prts-conversation-preview-body] {
+  position: relative;
+  z-index: 1;
+  height: 100%;
+  display: grid;
+  grid-template-rows: 32px minmax(0, 1fr);
+  padding: 10px 14px 12px;
+  font-family: var(--prts-mono);
+}
+
+html[data-dsh-prts] [data-prts-conversation-preview-row] {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: 24px minmax(0, 1fr);
+  column-gap: 8px;
+  align-items: start;
+  font-size: 15px;
+  line-height: 1.45;
+}
+
+html[data-dsh-prts] [data-prts-conversation-preview-row] b {
+  font-size: 14px;
+  font-weight: 750;
+  line-height: 1.55;
+  letter-spacing: .08em;
+}
+
+html[data-dsh-prts] [data-prts-conversation-preview-row="question"] {
+  border-bottom: 1px solid color-mix(in srgb, var(--prts-line) 72%, transparent);
+  color: var(--prts-ink);
+}
+
+html[data-dsh-prts] [data-prts-conversation-preview-row="question"] b {
+  color: var(--prts-yellow);
+}
+
+html[data-dsh-prts] [data-prts-conversation-preview-row="answer"] {
+  padding-top: 6px;
+  color: var(--prts-muted);
+}
+
+html[data-dsh-prts] [data-prts-conversation-preview-row="answer"] b {
+  color: var(--prts-cyan);
+}
+
+html[data-dsh-prts] [data-prts-conversation-preview-question] {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+html[data-dsh-prts] [data-prts-conversation-preview-answer] {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+
+html[data-dsh-prts] [data-prts-conversation-preview][data-prts-preview-state="streaming"] [data-prts-conversation-preview-answer] {
+  color: var(--prts-yellow);
+}
+
+html[data-dsh-prts] [data-prts-conversation-scale][data-prts-conversation-scale-empty] {
+  display: none;
+}
+
+@media (max-width: 640px) {
+  html[data-dsh-prts] :is(
+    [data-prts-conversation-scale],
+    [data-prts-conversation-preview],
+    [data-prts-conversation-history-hint],
+    [data-prts-conversation-history-status]
+  ) {
+    display: none !important;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html[data-dsh-prts] [data-prts-conversation-scale],
+  html[data-dsh-prts] [data-prts-conversation-preview],
+  html[data-dsh-prts] [data-prts-conversation-history-hint],
+  html[data-dsh-prts] [data-prts-conversation-history-tooltip],
+  html[data-dsh-prts] :is(
+    [data-prts-conversation-scale-gray],
+    [data-prts-conversation-scale-accent],
+    [data-prts-conversation-scale-history]
+  ) {
+    animation: none !important;
+    transition: none !important;
+  }
+}