- - - - +

+ + Message + + +

+ + + + +

- -

Enter to send / Shift + Enter for a new line

+ +

Enter to send / Shift + Enter for a new line

- +

diff -r 13d61401c57d -r 41a49c29a28f mrjunejune/src/jrpg/jrpg.css --- a/mrjunejune/src/jrpg/jrpg.css Fri Aug 07 13:24:05 2026 -0700 +++ b/mrjunejune/src/jrpg/jrpg.css Fri Aug 07 16:05:29 2026 -0700 @@ -41,6 +41,7 @@ --zenbu-sys-font-family-ui: "Pixel Mplus"; --zenbu-sys-font-family-content: "Pixel Mplus"; --zenbu-sys-font-family-code: "Pixel Mplus"; + --zenbu-sys-type-label-family: "Pixel Mplus"; min-width: 20rem; min-height: 100dvh; overflow: hidden; @@ -254,7 +255,7 @@ .jrpg-shell[data-minimized="true"] .jrpg-workspace > :is( .jrpg-scene, .jrpg-utility, - mjj-jrpg-composer, + mjj-composer, mjj-jrpg-menu ) { visibility: hidden; @@ -262,7 +263,7 @@ .jrpg-workspace > .jrpg-scene, .jrpg-workspace > .jrpg-utility, -.jrpg-workspace > mjj-jrpg-composer, +.jrpg-workspace > mjj-composer, .jrpg-workspace > mjj-jrpg-menu { position: absolute; margin: 0; @@ -291,7 +292,7 @@ height: var(--mjj-frame-utility-height); } -.jrpg-workspace > mjj-jrpg-composer { +.jrpg-workspace > mjj-composer { inset: var(--mjj-frame-composer-block) auto @@ -313,7 +314,7 @@ .jrpg-scene, .jrpg-utility, -mjj-jrpg-composer, +mjj-composer, mjj-jrpg-menu, .jrpg-preview-panel { box-sizing: border-box; @@ -393,10 +394,11 @@ } mjj-jrpg-chat { + box-sizing: border-box; position: relative; z-index: 1; display: grid; - grid-template-rows: auto minmax(0, 1fr) auto; + grid-template-rows: minmax(0, 1fr) auto; align-self: stretch; min-height: 0; padding: var(--zenbu-sys-padding-md); @@ -407,15 +409,6 @@ var(--mjj-jrpg-info); } -.jrpg-panel-heading { - display: flex; - align-items: baseline; - justify-content: space-between; - gap: var(--zenbu-sys-space-group); - padding-bottom: var(--zenbu-sys-padding-sm); - border-bottom: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft); -} - .jrpg-menu-label, .jrpg-brand > p, .jrpg-dialog-heading p { @@ -424,12 +417,6 @@ letter-spacing: 0.08em; } -.jrpg-panel-heading h1 { - margin: 0; - color: var(--mjj-jrpg-text); - font-size: var(--zenbu-sys-font-size-lg); -} - zen-message-scroller { display: block; overflow: hidden; @@ -458,12 +445,27 @@ .jrpg-message { display: grid; - grid-template-columns: minmax(4rem, auto) 1fr; + grid-template-columns: minmax(4rem, auto) minmax(0, 1fr); gap: var(--zenbu-sys-space-control); padding-left: var(--zenbu-sys-padding-sm); border-left: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-accent); } +.jrpg-message-speaker { + display: flex; + align-items: center; + gap: var(--zenbu-sys-space-icon-label); + align-self: start; +} + +.jrpg-message-avatar { + width: var(--zenbu-sys-control-height-sm); + height: var(--zenbu-sys-control-height-sm); + flex: none; + object-fit: contain; + image-rendering: pixelated; +} + .jrpg-message[hidden] { display: none; } @@ -511,13 +513,23 @@ .jrpg-turn-navigation { display: grid; - grid-template-columns: auto minmax(0, 1fr) auto; + grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--zenbu-sys-space-icon-label); padding-top: var(--zenbu-sys-padding-sm); border-top: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft); } +.jrpg-turn-navigation zen-button:first-child button { + justify-content: flex-start; + padding-inline-start: var(--zenbu-sys-padding-md); +} + +.jrpg-turn-navigation zen-button:last-child button { + justify-content: flex-end; + padding-inline-end: var(--zenbu-sys-padding-md); +} + .jrpg-turn-navigation zen-button, .jrpg-turn-navigation button { width: 100%; @@ -561,11 +573,8 @@ overflow: hidden; } -.jrpg-utility > mjj-jrpg-preview, -.jrpg-utility > mjj-conversation-archive { +.jrpg-utility > mjj-jrpg-preview { box-sizing: border-box; - grid-column: 1; - grid-row: 1; width: 100%; height: 100%; min-height: 0; @@ -623,9 +632,7 @@ } .jrpg-preview-panel { - display: grid; - grid-template-rows: auto auto minmax(0, 1fr) auto; - gap: var(--zenbu-sys-space-group); + display: block; height: 100%; padding: var(--zenbu-sys-padding-lg); background: @@ -639,6 +646,24 @@ var(--mjj-jrpg-accent); } +.jrpg-preview-panel > :is(.jrpg-preview-content, mjj-conversation-archive) { + box-sizing: border-box; + width: 100%; + height: 100%; + min-width: 0; + min-height: 0; +} + +.jrpg-preview-content { + display: grid; + grid-template-rows: auto auto minmax(0, 1fr) auto; + gap: var(--zenbu-sys-space-group); +} + +.jrpg-preview-content[hidden] { + display: none; +} + .jrpg-preview-panel h2, .jrpg-preview-panel p { margin: 0; @@ -648,7 +673,7 @@ color: var(--mjj-jrpg-primary); } -.jrpg-preview-panel > p { +.jrpg-preview-content > p { color: var(--mjj-jrpg-text); } @@ -1338,7 +1363,7 @@ text-decoration-color: var(--mjj-jrpg-accent); } -mjj-jrpg-composer { +mjj-composer { grid-area: composer; display: block; min-height: 0; @@ -1346,55 +1371,6 @@ background: var(--mjj-jrpg-surface); } -.jrpg-composer { - display: grid; - grid-template-columns: minmax(0, 1fr) auto; - grid-template-rows: minmax(0, 1fr) auto; - gap: var(--zenbu-sys-space-control); - height: 100%; - min-height: 0; -} - -.jrpg-composer zen-field[appearance="plain"] { - display: grid; - grid-column: 1; - grid-row: 1; - grid-template-rows: auto minmax(0, 1fr); - gap: var(--zenbu-sys-space-icon-label); - min-height: 0; -} - -.jrpg-composer label, -.jrpg-composer-hint { - grid-column: 1 / -1; - grid-row: 2; - color: var(--mjj-jrpg-text-muted); - font-size: var(--zenbu-sys-font-size-xs); -} - -.jrpg-composer zen-field label { - grid-column: 1; - grid-row: 1; -} - -.jrpg-composer textarea { - box-sizing: border-box; - grid-column: 1; - grid-row: 2; - width: 100%; - height: 100%; - min-height: calc(var(--zenbu-control-height) * 2); - resize: none; - padding: - var(--zenbu-control-padding-block) - var(--zenbu-control-padding-inline); - border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame); - border-radius: 0; - background: var(--mjj-jrpg-surface-sunken); - color: var(--mjj-jrpg-text); - font: inherit; -} - .jrpg-composer textarea::placeholder { color: var(--mjj-jrpg-text-muted); } @@ -1404,51 +1380,6 @@ outline-offset: var(--zenbu-sys-focus-offset); } -.jrpg-composer-actions { - display: flex; - grid-column: 2; - grid-row: 1; - flex-direction: column; - justify-content: flex-end; - gap: var(--zenbu-sys-space-control); -} - -.jrpg-composer zen-button { - width: 100%; -} - -.jrpg-composer zen-button[hidden] { - display: none; -} - -.jrpg-composer zen-button > button { - width: 100%; - border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame); - border-radius: 0; - background: var(--mjj-jrpg-primary); - color: var(--mjj-jrpg-primary-foreground); - cursor: pointer; -} - -.jrpg-composer zen-button > button:hover { - border-color: var(--mjj-jrpg-primary-hover); - background: var(--mjj-jrpg-primary-hover); -} - -.jrpg-composer [data-cancel-control] > button { - border-color: var(--mjj-jrpg-accent); - background: var(--mjj-jrpg-accent); -} - -.jrpg-composer button:disabled { - opacity: var(--zenbu-sys-opacity-disabled); - cursor: not-allowed; -} - -.jrpg-composer-hint { - margin: 0; -} - mjj-jrpg-menu { grid-area: menu; display: block; @@ -1514,12 +1445,11 @@ .jrpg-workspace > :is( .jrpg-scene, .jrpg-utility, - mjj-jrpg-composer, + mjj-composer, mjj-jrpg-menu ), .jrpg-scene > mjj-jrpg-chat, -.jrpg-utility > mjj-jrpg-preview > .jrpg-preview-panel, -.jrpg-utility > mjj-conversation-archive { +.jrpg-utility > mjj-jrpg-preview > .jrpg-preview-panel { border: 0; background-color: transparent; box-shadow: none; @@ -1529,23 +1459,20 @@ background-image: none; } -.jrpg-workspace > mjj-jrpg-composer, +.jrpg-workspace > mjj-composer, .jrpg-workspace > mjj-jrpg-menu { padding: var(--zenbu-sys-padding-sm); } -.jrpg-workspace > mjj-jrpg-composer textarea { +.jrpg-workspace > mjj-composer textarea { min-height: 0; } -.jrpg-scene .jrpg-panel-heading, .jrpg-scene .jrpg-message, .jrpg-scene .jrpg-turn-navigation, .jrpg-brand, .jrpg-work-showcase a, -.jrpg-preview-panel > .jrpg-preview-dialog > zen-button > button, -mjj-jrpg-composer > .jrpg-composer textarea, -mjj-jrpg-composer > .jrpg-composer zen-button > button, +.jrpg-preview-content > .jrpg-preview-dialog > zen-button > button, mjj-jrpg-menu nav button { border: 0; } @@ -1590,7 +1517,7 @@ .jrpg-workspace > .jrpg-scene, .jrpg-workspace > .jrpg-utility, - .jrpg-workspace > mjj-jrpg-composer, + .jrpg-workspace > mjj-composer, .jrpg-workspace > mjj-jrpg-menu, .jrpg-workspace > .jrpg-brand, .jrpg-workspace > .jrpg-frame-controls, @@ -1853,27 +1780,20 @@ } mjj-conversation-archive { - position: relative; - z-index: 1; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; align-self: stretch; min-height: 0; - padding: var(--zenbu-sys-padding-md); + padding: 0; overflow: hidden; - background: var(--mjj-jrpg-panel-strong); - box-shadow: inset 0 0 0 var(--zenbu-sys-stroke-width) var(--mjj-jrpg-info); + background: transparent; + box-shadow: none; } mjj-conversation-archive[hidden] { display: none; } -.jrpg-utility > mjj-conversation-archive { - border: 0; - box-shadow: inset 0 0 0 var(--zenbu-sys-stroke-width) var(--mjj-jrpg-info); -} - .jrpg-archive-heading { display: flex; align-items: baseline; @@ -2214,6 +2134,14 @@ display: none; } +.jrpg-mobile-destination-owner { + display: contents; +} + +.jrpg-page zen-button[hidden] { + display: none; +} + /* ================================================================ Mobile portrait frame layout (≤52rem + portrait) Overrides the generic stacked grid from the 52rem breakpoint. @@ -2225,50 +2153,22 @@ /* ── Aperture geometry: (inline=left%, block=top%, width%, height%) ── */ /* Main conversation */ - --mjj-mobile-scene-inline: 4.5%; - --mjj-mobile-scene-block: 7.5%; - --mjj-mobile-scene-width: 91%; - --mjj-mobile-scene-height: 45.5%; - - /* Preview / utility */ - --mjj-mobile-utility-inline: 4.5%; - --mjj-mobile-utility-block: 54.7%; - --mjj-mobile-utility-width: 91%; - --mjj-mobile-utility-height: 17.1%; + --mjj-mobile-scene-inline: 4.8%; + --mjj-mobile-scene-block: 7.3%; + --mjj-mobile-scene-width: 90.4%; + --mjj-mobile-scene-height: 71.2%; /* Composer */ - --mjj-mobile-composer-inline: 4.5%; - --mjj-mobile-composer-block: 72.8%; - --mjj-mobile-composer-width: 60.3%; - --mjj-mobile-composer-height: 19.2%; - - /* Menu */ - --mjj-mobile-menu-inline: 66.5%; - --mjj-mobile-menu-block: 72.8%; - --mjj-mobile-menu-width: 29%; - --mjj-mobile-menu-height: 19.2%; - - /* Brand / SYS-01 cover */ - --mjj-mobile-brand-inline: 11%; - --mjj-mobile-brand-block: 2.4%; - --mjj-mobile-brand-width: 10%; - --mjj-mobile-brand-height: 3.5%; + --mjj-mobile-composer-inline: 4.8%; + --mjj-mobile-composer-block: 79.6%; + --mjj-mobile-composer-width: 90.4%; + --mjj-mobile-composer-height: 17.7%; /* Baked hamburger overlay */ - --mjj-mobile-hamburger-inline: 89.5%; - --mjj-mobile-hamburger-block: 2%; - --mjj-mobile-hamburger-width: 7%; - --mjj-mobile-hamburger-height: 4%; - - /* Telemetry value absolute positions (x = left-center, y = top-center) */ - --mjj-mobile-telemetry-temp-x: 22%; - --mjj-mobile-telemetry-temp-y: 94.7%; - --mjj-mobile-telemetry-user-x: 45%; - --mjj-mobile-telemetry-user-y: 94.7%; - --mjj-mobile-telemetry-status-x: 73%; - --mjj-mobile-telemetry-status-y: 94.7%; - --mjj-mobile-telemetry-uptime-x: 22%; - --mjj-mobile-telemetry-uptime-y: 97.5%; + --mjj-mobile-hamburger-inline: 87.2%; + --mjj-mobile-hamburger-block: 1.3%; + --mjj-mobile-hamburger-width: 9.4%; + --mjj-mobile-hamburger-height: 5.3%; height: 100dvh; min-height: 0; @@ -2303,12 +2203,9 @@ display: none; } - /* Restore absolute positioning for all aperture elements */ + /* Restore absolute positioning for the two frame apertures */ .jrpg-workspace > .jrpg-scene, - .jrpg-workspace > .jrpg-utility, - .jrpg-workspace > mjj-jrpg-composer, - .jrpg-workspace > mjj-jrpg-menu, - .jrpg-workspace > .jrpg-brand { + .jrpg-workspace > mjj-composer { position: absolute; width: auto; height: auto; @@ -2331,26 +2228,8 @@ ); } - /* Utility / preview aperture */ - .jrpg-workspace > .jrpg-utility { - inset: - var(--mjj-mobile-utility-block) - auto - auto - var(--mjj-mobile-utility-inline); - width: var(--mjj-mobile-utility-width); - height: var(--mjj-mobile-utility-height); - min-height: 0; - overflow: hidden; - font-size: clamp( - var(--zenbu-sys-font-size-xs), - 2.8vw, - var(--zenbu-sys-font-size-sm) - ); - } - /* Composer aperture */ - .jrpg-workspace > mjj-jrpg-composer { + .jrpg-workspace > mjj-composer { inset: var(--mjj-mobile-composer-block) auto @@ -2365,39 +2244,39 @@ ); } - /* Menu aperture */ - .jrpg-workspace > mjj-jrpg-menu { - inset: - var(--mjj-mobile-menu-block) - auto - auto - var(--mjj-mobile-menu-inline); - width: var(--mjj-mobile-menu-width); - height: var(--mjj-mobile-menu-height); - overflow: hidden; - font-size: clamp( - var(--zenbu-sys-font-size-xs), - 2.5vw, - var(--zenbu-sys-font-size-sm) - ); + .jrpg-workspace > :is(.jrpg-utility, mjj-jrpg-menu) { + display: none; } - /* Brand cover (covers baked SYS-01 label) */ .jrpg-workspace > .jrpg-brand { - inset: - var(--mjj-mobile-brand-block) - auto - auto - var(--mjj-mobile-brand-inline); - width: var(--mjj-mobile-brand-width); - height: var(--mjj-mobile-brand-height); - background: var(--mjj-jrpg-canvas); + position: absolute; + z-index: 4; + inset: 1.3% auto auto 50%; + display: grid; + place-items: center; + width: max-content; + max-width: 68%; + height: 5.3%; padding: 0; + border: 0; + background: transparent; box-shadow: none; + text-align: center; + transform: translateX(-50%); + } + + body.jrpg-page .jrpg-brand header { + width: 100%; + text-align: center; + } + + body.jrpg-page .jrpg-brand header h1 { + font-size: var(--zenbu-sys-font-size-sm); + text-shadow: none; } /* Hamburger button: transparent overlay over baked art */ - .jrpg-workspace > .jrpg-mobile-menu-btn { + .jrpg-mobile-destination-owner > .jrpg-mobile-menu-btn { display: grid; place-items: center; position: absolute; @@ -2438,73 +2317,107 @@ opacity: 0.5; } - /* Telemetry: full-workspace container so children use workspace % coords */ .jrpg-workspace > .jrpg-frame-telemetry { - position: absolute; - inset: 0; - display: block; - width: 100%; - height: 100%; - background: transparent; - pointer-events: none; - font-size: clamp( - var(--zenbu-sys-font-size-xs), - 2.5vw, - var(--zenbu-sys-font-size-sm) - ); + display: none; + } + + .jrpg-mobile-destination-dialog { + box-sizing: border-box; + width: calc(100% - var(--zenbu-sys-space-content)); + max-width: 42rem; + height: min(88dvh, 48rem); + max-height: calc(100dvh - var(--zenbu-sys-space-content)); + margin: auto; + padding: var(--zenbu-sys-padding-md); + border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame); + border-radius: 0; + background: var(--mjj-jrpg-surface); + color: var(--mjj-jrpg-text); + box-shadow: + inset 0 0 0 var(--zenbu-sys-stroke-width) var(--mjj-jrpg-accent), + var(--zenbu-sys-space-control) var(--zenbu-sys-space-control) 0 + var(--mjj-jrpg-accent); } - .jrpg-frame-telemetry > :nth-child(1) { - position: absolute; - left: var(--mjj-mobile-telemetry-temp-x); - top: var(--mjj-mobile-telemetry-temp-y); - transform: translate(-50%, -50%); - background: transparent; - padding-inline: 0; - pointer-events: auto; - white-space: nowrap; + .jrpg-mobile-destination-dialog[open] { + display: grid; + grid-template-rows: auto minmax(0, 1fr); + gap: var(--zenbu-sys-space-group); + } + + .jrpg-mobile-destination-dialog::backdrop { + background: color-mix(in srgb, var(--mjj-jrpg-canvas) 82%, transparent); + } + + .jrpg-mobile-destination-header { + display: grid; + grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); + align-items: center; + gap: var(--zenbu-sys-space-control); + padding-bottom: var(--zenbu-sys-padding-sm); + border-bottom: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft); + } + + .jrpg-mobile-destination-header h2 { + margin: 0; + color: var(--mjj-jrpg-primary); + font-size: var(--zenbu-sys-font-size-lg); + text-align: center; } - .jrpg-frame-telemetry > :nth-child(2) { - position: absolute; - left: var(--mjj-mobile-telemetry-user-x); - top: var(--mjj-mobile-telemetry-user-y); - transform: translate(-50%, -50%); + .jrpg-mobile-destination-header zen-button:first-child { + justify-self: start; + } + + .jrpg-mobile-destination-header zen-button:last-child { + justify-self: end; + } + + .jrpg-mobile-destination-header button { + border: 0; + border-radius: 0; background: transparent; - padding-inline: 0; - pointer-events: auto; - white-space: nowrap; + color: var(--mjj-jrpg-text); + cursor: pointer; + } + + .jrpg-mobile-destination-content { + min-width: 0; + min-height: 0; + overflow: hidden; } - .jrpg-frame-telemetry > :nth-child(3) { - position: absolute; - left: var(--mjj-mobile-telemetry-status-x); - top: var(--mjj-mobile-telemetry-status-y); - transform: translate(-50%, -50%); - background: transparent; - padding-inline: 0; - pointer-events: auto; - white-space: nowrap; + .jrpg-mobile-destination-content > :is(mjj-jrpg-menu, .jrpg-utility) { + box-sizing: border-box; + position: static; + width: 100%; + height: 100%; + min-width: 0; + min-height: 0; + } + + .jrpg-mobile-destination-content > [hidden], + [data-mobile-destination-back-owner][hidden] { + display: none; } - .jrpg-frame-telemetry > :nth-child(4) { - position: absolute; - left: var(--mjj-mobile-telemetry-uptime-x); - top: var(--mjj-mobile-telemetry-uptime-y); - transform: translate(-50%, -50%); - background: transparent; - padding-inline: 0; - pointer-events: auto; - white-space: nowrap; + .jrpg-mobile-destination-content > mjj-jrpg-menu { + display: block; + padding: var(--zenbu-sys-padding-md); + overflow-y: auto; } - /* Compact the brand header text for the narrow cover area */ - .jrpg-workspace > .jrpg-brand header h1 { - font-size: clamp( - var(--zenbu-sys-font-size-xs), - 2vw, - var(--zenbu-sys-font-size-xs) - ); + .jrpg-mobile-destination-content > .jrpg-utility { + display: grid; + padding: 0; + border: 0; + overflow: hidden; + background: transparent; + box-shadow: none; + } + + .jrpg-mobile-destination-content .jrpg-archive-heading { + display: none; } /* Compact scene internals for mobile aperture */ @@ -2520,6 +2433,10 @@ display: none; } + .jrpg-scene::before { + display: none; + } + mjj-jrpg-chat { grid-column: 1; grid-row: 1; @@ -2530,35 +2447,22 @@ padding: var(--zenbu-sys-padding-sm); } - .jrpg-utility > mjj-conversation-archive { + .jrpg-preview-panel > mjj-conversation-archive { width: 100%; height: 100%; max-height: 100%; overflow: auto; } - /* Utility compact padding */ - .jrpg-utility { - padding: var(--zenbu-sys-padding-sm); - } - /* Composer: compact single-row within aperture */ - .jrpg-composer { - gap: var(--zenbu-sys-space-icon-label); - padding: var(--zenbu-sys-padding-sm); + .jrpg-workspace > mjj-composer { + padding: var(--zenbu-sys-space-icon-label); } .jrpg-composer-hint { display: none; } - /* Menu compact: single column stacking */ - .jrpg-workspace > mjj-jrpg-menu { - padding: var(--zenbu-sys-padding-xs, var(--zenbu-sys-padding-sm)); - overflow-y: auto; - scrollbar-width: thin; - } - mjj-jrpg-menu nav { height: 100%; grid-template-columns: 1fr; @@ -2580,36 +2484,21 @@ font-size: var(--zenbu-sys-font-size-xs); } - mjj-jrpg-menu[data-mobile-menu-collapsed] { - overflow: hidden; - } - - mjj-jrpg-menu[data-mobile-menu-collapsed] nav { - display: grid; - place-items: center; + /* Preview panel compact for narrow utility aperture */ + .jrpg-preview-panel { + padding: var(--zenbu-sys-padding-sm); + overflow-y: auto; } - mjj-jrpg-menu[data-mobile-menu-collapsed] .jrpg-menu-label { - display: block; - writing-mode: initial; - } - - mjj-jrpg-menu[data-mobile-menu-collapsed] ul { - display: none; - } - - /* Preview panel compact for narrow utility aperture */ - .jrpg-preview-panel { + .jrpg-preview-content { gap: var(--zenbu-sys-space-icon-label); - padding: var(--zenbu-sys-padding-sm); - overflow-y: auto; } .jrpg-preview-panel h2 { font-size: var(--zenbu-sys-font-size-sm); } - .jrpg-preview-panel > p { + .jrpg-preview-content > p { font-size: var(--zenbu-sys-font-size-xs); display: -webkit-box; -webkit-line-clamp: 2; diff -r 13d61401c57d -r 41a49c29a28f mrjunejune/src/jrpg/jrpg.js --- a/mrjunejune/src/jrpg/jrpg.js Fri Aug 07 13:24:05 2026 -0700 +++ b/mrjunejune/src/jrpg/jrpg.js Fri Aug 07 16:05:29 2026 -0700 @@ -119,11 +119,15 @@ return loading; } -function greetingForSession(sessionData) { - if (sessionData?.kind !== "user") return ROLE_GREETINGS.guest; - return sessionData.role === "admin" - ? ROLE_GREETINGS.admin - : ROLE_GREETINGS.invited; +function greetingForSession(sessionData, hasConversations = false) { + const greeting = sessionData?.kind !== "user" + ? ROLE_GREETINGS.guest + : sessionData.role === "admin" + ? ROLE_GREETINGS.admin + : ROLE_GREETINGS.invited; + return hasConversations + ? `${greeting} We’ve talked before. Open Conversations if you’d like to continue one.` + : greeting; } class StreamingTextAnimator { @@ -315,14 +319,25 @@ _createMessage(speaker, text, group, select) { if (!this._messages) return; const item = document.createElement("li"); + const speakerCell = document.createElement("span"); const name = document.createElement("strong"); const copy = document.createElement("p"); item.className = "jrpg-message"; item.dataset.speaker = speaker; item.dataset.turnGroup = group; + speakerCell.className = "jrpg-message-speaker"; + if (speaker === "Epi") { + const avatar = document.createElement("img"); + avatar.className = "jrpg-message-avatar"; + avatar.src = "/public/jrpg/shiba-default.webp"; + avatar.alt = ""; + avatar.setAttribute("aria-hidden", "true"); + speakerCell.append(avatar); + } name.textContent = speaker; copy.textContent = text; - item.append(name, copy); + speakerCell.append(name); + item.append(speakerCell, copy); this._messages.append(item); this._refreshTurnGroups(select ? group : this._currentGroup); return item; @@ -441,63 +456,6 @@ } } -class MjjJrpgComposer extends HTMLElement { - connectedCallback() { - this._form = this.querySelector("[data-composer]"); - this._textarea = this.querySelector("textarea"); - this._button = this.querySelector('button[type="submit"]'); - this._cancel = this.querySelector("[data-cancel]"); - this._cancelControl = this.querySelector("[data-cancel-control]"); - this._onSubmit = event => { - event.preventDefault(); - const message = this._textarea?.value.trim(); - if (!message || this._button?.disabled) return; - this.dispatchEvent(new CustomEvent("mjj-jrpg-submit", { - bubbles: true, - detail: { message }, - })); - this._form.reset(); - }; - this._onKeydown = event => { - if (event.key !== "Enter" || event.shiftKey || event.isComposing) return; - event.preventDefault(); - this._form?.requestSubmit(); - }; - this._form?.addEventListener("submit", this._onSubmit); - this._textarea?.addEventListener("keydown", this._onKeydown); - this._onCancel = () => { - this.dispatchEvent(new CustomEvent("mjj-jrpg-cancel", { - bubbles: true, - })); - }; - this._cancel?.addEventListener("click", this._onCancel); - } - - disconnectedCallback() { - this._form?.removeEventListener("submit", this._onSubmit); - this._textarea?.removeEventListener("keydown", this._onKeydown); - this._cancel?.removeEventListener("click", this._onCancel); - } - - setBusy(busy) { - if (this._textarea) this._textarea.disabled = busy; - if (this._button) { - this._button.disabled = busy; - this._button.setAttribute("aria-busy", String(busy)); - } - if (this._cancelControl) this._cancelControl.hidden = !busy; - } - - setCancellable(cancellable) { - if (this._cancelControl) this._cancelControl.hidden = !cancellable; - } - - setDisabled(disabled) { - if (this._textarea) this._textarea.disabled = disabled; - if (this._button) this._button.disabled = disabled; - } -} - class MjjJrpgMenu extends HTMLElement { connectedCallback() { this._onClick = event => { @@ -1790,41 +1748,122 @@ this._mobileMenuQuery = window.matchMedia( "(max-width: 52rem) and (orientation: portrait)", ); - this._syncMobileMenu = expanded => { - const button = this.querySelector("[data-mobile-menu-toggle]"); - const menu = this.querySelector("mjj-jrpg-menu"); - if (!button || !menu) return; - if (!this._mobileMenuQuery.matches) { - button.setAttribute("aria-expanded", "true"); - menu.removeAttribute("data-mobile-menu-collapsed"); + this._mobileDestinationOwner = this.querySelector( + "[data-mobile-destination-owner]", + ); + this._mobileDestinationDialog = this.querySelector( + "[data-mobile-destination-dialog]", + ); + this._mobileDestinationContent = this.querySelector( + "[data-mobile-destination-content]", + ); + this._mobileDestinationTitle = this.querySelector( + "[data-mobile-destination-title]", + ); + this._mobileDestinationBackOwner = this.querySelector( + "[data-mobile-destination-back-owner]", + ); + this._mobileDestinationBack = this.querySelector( + "[data-mobile-destination-back]", + ); + this._utility = this.querySelector(".jrpg-utility"); + this._menu = this.querySelector("mjj-jrpg-menu"); + this._utilityPlaceholder = document.createComment("jrpg-utility"); + this._menuPlaceholder = document.createComment("jrpg-menu"); + this._utility?.before(this._utilityPlaceholder); + this._menu?.before(this._menuPlaceholder); + + this._syncMobileLayout = () => { + if (!this._utility || !this._menu || !this._mobileDestinationContent) { return; } - button.setAttribute("aria-expanded", String(expanded)); - menu.toggleAttribute("data-mobile-menu-collapsed", !expanded); + if (this._mobileMenuQuery.matches) { + this._mobileDestinationContent.append(this._menu, this._utility); + this.showMobileMenu(); + return; + } + this._mobileDestinationOwner?.close(); + this._utilityPlaceholder.after(this._utility); + this._menuPlaceholder.after(this._menu); + this._utility.hidden = false; + this._menu.hidden = false; }; - this._onMenuToggle = event => { - const button = event.target.closest("[data-mobile-menu-toggle]"); - if (!button || !this.contains(button)) return; - const expanded = button.getAttribute("aria-expanded") === "true"; - this._syncMobileMenu(!expanded); - if (!expanded) { - const firstItem = this.querySelector( - "mjj-jrpg-menu button[data-preview]", - ); - if (firstItem) firstItem.focus(); - } - }; - this._onMobileMenuMediaChange = () => this._syncMobileMenu(true); - this.addEventListener("click", this._onMenuToggle); + this._onMobileMenuMediaChange = () => this._syncMobileLayout(); + this._onMobileDestinationBack = () => this.showMobileMenu(); + this._onMobileDestinationClose = () => this.showMobileMenu(); + this._mobileDestinationBack?.addEventListener( + "click", + this._onMobileDestinationBack, + ); + this._mobileDestinationDialog?.addEventListener( + "close", + this._onMobileDestinationClose, + ); this._mobileMenuQuery.addEventListener( "change", this._onMobileMenuMediaChange, ); - this._syncMobileMenu(true); + this._syncMobileLayout(); + } + + isMobileDestinationModal() { + return Boolean(this._mobileMenuQuery?.matches); + } + + isMobileDestinationOpen() { + return this.isMobileDestinationModal() && + Boolean(this._mobileDestinationDialog?.open); + } + + showMobileMenu() { + if (!this.isMobileDestinationModal() || !this._menu || !this._utility) { + return; + } + this._menu.hidden = false; + this._utility.hidden = true; + if (this._mobileDestinationTitle) { + this._mobileDestinationTitle.textContent = "Menu"; + } + if (this._mobileDestinationBackOwner) { + this._mobileDestinationBackOwner.hidden = true; + } + } + + showMobileDestination(selection) { + if (!this.isMobileDestinationModal() || !this._menu || !this._utility) { + return; + } + const labels = { + blog: "Blogs", + conversations: "Conversations", + resume: "Resume", + tools: "Tools", + }; + this._menu.hidden = true; + this._utility.hidden = false; + if (this._mobileDestinationTitle) { + this._mobileDestinationTitle.textContent = labels[selection] || "Destination"; + } + if (this._mobileDestinationBackOwner) { + this._mobileDestinationBackOwner.hidden = false; + } + } + + closeMobileDestinations() { + if (this.isMobileDestinationModal()) { + this._mobileDestinationOwner?.close(); + } } disconnectedCallback() { - this.removeEventListener("click", this._onMenuToggle); + this._mobileDestinationBack?.removeEventListener( + "click", + this._onMobileDestinationBack, + ); + this._mobileDestinationDialog?.removeEventListener( + "close", + this._onMobileDestinationClose, + ); this._mobileMenuQuery?.removeEventListener( "change", this._onMobileMenuMediaChange, @@ -1836,7 +1875,6 @@ "mjj-conversation-archive": MjjConversationArchive, "mjj-jrpg-character": MjjJrpgCharacter, "mjj-jrpg-chat": MjjJrpgChat, - "mjj-jrpg-composer": MjjJrpgComposer, "mjj-jrpg-menu": MjjJrpgMenu, "mjj-jrpg-preview": MjjJrpgPreview, "mjj-jrpg-shell": MjjJrpgShell, @@ -2136,7 +2174,7 @@ const shell = document.querySelector("mjj-jrpg-shell"); const character = shell?.querySelector("mjj-jrpg-character"); const chat = shell?.querySelector("mjj-jrpg-chat"); - const composer = shell?.querySelector("mjj-jrpg-composer"); + const composer = shell?.querySelector("mjj-composer"); const preview = shell?.querySelector("mjj-jrpg-preview"); const archive = shell?.querySelector("mjj-conversation-archive"); const accountSlot = shell?.querySelector("[data-frame-account]"); @@ -2453,6 +2491,7 @@ /* ---- Panel selection: shows archive or preview in utility ---- */ const utilityEl = shell?.querySelector(".jrpg-utility"); + const previewContent = preview?.querySelector("[data-preview-content]"); const selectPanel = (panel, pushHistory = true) => { const validPanel = VALID_PANELS.includes(panel) ? panel : "resume"; @@ -2462,11 +2501,11 @@ } if (validPanel === "conversations") { if (archive) archive.hidden = false; - if (preview) preview.hidden = true; + if (previewContent) previewContent.hidden = true; if (utilityEl) utilityEl.setAttribute("aria-label", "Conversations"); } else { if (archive) archive.hidden = true; - if (preview) preview.hidden = false; + if (previewContent) previewContent.hidden = false; preview?.show(validPanel); if (utilityEl) utilityEl.setAttribute("aria-label", "Selected destination"); } @@ -2475,6 +2514,10 @@ /* ---- Archive close button: navigate back to resume panel ---- */ shell?.addEventListener("mjj-archive-toggle", () => { + if (shell?.isMobileDestinationModal()) { + shell.showMobileMenu(); + return; + } selectPanel("resume"); }); @@ -2485,6 +2528,7 @@ _pushUrlState(currentPanel, null); chat?.setGreeting(greetingForSession(_sessionData), true); archive?.setCurrentId(null); + shell?.closeMobileDestinations(); composer?.querySelector("textarea")?.focus(); }); @@ -2497,6 +2541,9 @@ const epoch = principalEpoch; selectPanel(popPanel, false); + if (shell?.isMobileDestinationOpen()) { + shell.showMobileDestination(popPanel); + } if (popConvId && popConvId !== currentConversationId) { try { @@ -2586,6 +2633,7 @@ _pushUrlState(currentPanel, id); chat?.replaceMessages(conversation.turns); archive?.setCurrentId(id); + shell?.closeMobileDestinations(); } catch (error) { if (seq !== openSeq || epoch !== principalEpoch) return; archive?.setError(`Unable to open: ${error.message}`); @@ -2754,7 +2802,7 @@ currentPanel = validPanel || "resume"; } - /* ---- Load archive and restore conversation from URL or sessionStorage ---- */ + /* ---- Load archive; only an explicit URL restores a conversation ---- */ const startupEpoch = principalEpoch; const ensureStartupPrincipal = () => { if (startupEpoch !== principalEpoch) { @@ -2772,33 +2820,26 @@ conversations.forEach(c => _renderedIds.add(c.id)); archive?.setConversations(conversations, archiveCursor); - /* Determine target conversation: URL param is canonical; migrate sessionStorage once */ + /* A conversation opens only through an explicit URL or a user archive action. */ const initParams2 = new URLSearchParams(window.location.search); const urlConvId = initParams2.get("conversation"); const urlConvValid = urlConvId && UUID_REGEX.test(urlConvId) ? urlConvId : null; + const storedConvId = !_convParamWasExplicit + ? sessionStorage.getItem(CONVERSATION_STORAGE_KEY) + : null; - let resolvedConvId = urlConvValid; - let migratedFromStorage = false; - if (!resolvedConvId && !_convParamWasExplicit) { - const stored = sessionStorage.getItem(CONVERSATION_STORAGE_KEY); - if (stored && UUID_REGEX.test(stored)) { - resolvedConvId = stored; - migratedFromStorage = true; - } - } - - if (resolvedConvId) { - const inArchive = conversations.find(c => c.id === resolvedConvId); + if (urlConvValid) { + const inArchive = conversations.find(c => c.id === urlConvValid); if (inArchive) { try { const conversation = await requestJson( - `/api/conversations/${encodeURIComponent(resolvedConvId)}`, + `/api/conversations/${encodeURIComponent(urlConvValid)}`, ); ensureStartupPrincipal(); - currentConversationId = resolvedConvId; - sessionStorage.setItem(CONVERSATION_STORAGE_KEY, resolvedConvId); + currentConversationId = urlConvValid; + sessionStorage.setItem(CONVERSATION_STORAGE_KEY, urlConvValid); chat?.replaceMessages(conversation.turns); - archive?.setCurrentId(resolvedConvId); + archive?.setCurrentId(urlConvValid); } catch (error) { if (error.name === "StalePrincipalError" || startupEpoch !== principalEpoch) throw error; @@ -2810,7 +2851,7 @@ let ownedConversation = null; try { ownedConversation = await requestJson( - `/api/conversations/${encodeURIComponent(resolvedConvId)}`, + `/api/conversations/${encodeURIComponent(urlConvValid)}`, ); ensureStartupPrincipal(); } catch (error) { @@ -2819,68 +2860,39 @@ ownedConversation = null; } if (ownedConversation) { - currentConversationId = resolvedConvId; - sessionStorage.setItem(CONVERSATION_STORAGE_KEY, resolvedConvId); + currentConversationId = urlConvValid; + sessionStorage.setItem(CONVERSATION_STORAGE_KEY, urlConvValid); chat?.replaceMessages(ownedConversation.turns); - if (!_renderedIds.has(resolvedConvId)) { - _renderedIds.add(resolvedConvId); + if (!_renderedIds.has(urlConvValid)) { + _renderedIds.add(urlConvValid); archive?.addConversation({ - id: resolvedConvId, + id: urlConvValid, title: ownedConversation.title || "Conversation", turn_count: ownedConversation.turns?.length || 0, }); } - archive?.setCurrentId(resolvedConvId); - } else if (_sessionData?.kind === "user") { - /* Authenticated and 404 — offer legacy claim for sessionStorage migrations */ - if (migratedFromStorage) { - sessionStorage.setItem(CONVERSATION_LEGACY_KEY, resolvedConvId); - legacyClaimId = resolvedConvId; - sessionStorage.removeItem(CONVERSATION_STORAGE_KEY); - archive?.showLegacyClaim(); - if (conversations.length > 0) { - currentConversationId = conversations[0].id; - sessionStorage.setItem(CONVERSATION_STORAGE_KEY, currentConversationId); - try { - const conv = await requestJson( - `/api/conversations/${encodeURIComponent(currentConversationId)}`, - ); - ensureStartupPrincipal(); - chat?.replaceMessages(conv.turns); - archive?.setCurrentId(currentConversationId); - } catch (error) { - if (error.name === "StalePrincipalError" || - startupEpoch !== principalEpoch) throw error; - currentConversationId = null; - } - } - } else { - /* URL-specified conv returned 404 — clear it */ - currentConversationId = null; - sessionStorage.removeItem(CONVERSATION_STORAGE_KEY); - } + archive?.setCurrentId(urlConvValid); } else { - /* Guest — not owned, clear stale ID */ currentConversationId = null; - if (migratedFromStorage) sessionStorage.removeItem(CONVERSATION_STORAGE_KEY); + sessionStorage.removeItem(CONVERSATION_STORAGE_KEY); } } - } else if (conversations.length > 0) { - /* No target conversation — open the most recent */ - const most_recent = conversations[0]; - try { - const conversation = await requestJson( - `/api/conversations/${encodeURIComponent(most_recent.id)}`, + } else { + currentConversationId = null; + archive?.setCurrentId(null); + if (conversations.length > 0) { + chat?.setGreeting(greetingForSession(_sessionData, true), true); + } + if (storedConvId && UUID_REGEX.test(storedConvId)) { + const storedConversationIsOwned = conversations.some( + conversation => conversation.id === storedConvId, ); - ensureStartupPrincipal(); - currentConversationId = most_recent.id; - sessionStorage.setItem(CONVERSATION_STORAGE_KEY, currentConversationId); - chat?.replaceMessages(conversation.turns); - archive?.setCurrentId(most_recent.id); - } catch (error) { - if (error.name === "StalePrincipalError" || - startupEpoch !== principalEpoch) throw error; - currentConversationId = null; + if (_sessionData?.kind === "user" && !storedConversationIsOwned) { + sessionStorage.setItem(CONVERSATION_LEGACY_KEY, storedConvId); + legacyClaimId = storedConvId; + archive?.showLegacyClaim(); + } + sessionStorage.removeItem(CONVERSATION_STORAGE_KEY); } } } catch (error) { @@ -2888,14 +2900,9 @@ startupEpoch === principalEpoch) { archive?.setError(`Archive error: ${error.message}`); } - /* Fall back to direct fetch of URL/stored ID */ + /* Fall back only for an explicit deep-linked conversation. */ const initParams3 = new URLSearchParams(window.location.search); - const fallbackId = ( - initParams3.get("conversation") || - (!_convParamWasExplicit - ? sessionStorage.getItem(CONVERSATION_STORAGE_KEY) - : null) - ) || null; + const fallbackId = initParams3.get("conversation"); if (startupEpoch === principalEpoch && fallbackId && UUID_REGEX.test(fallbackId)) { try { @@ -2925,6 +2932,7 @@ shell?.addEventListener("mjj-jrpg-preview-change", event => { selectPanel(event.detail.selection); + shell?.showMobileDestination(event.detail.selection); character?.setAttribute("state", "thinking"); window.clearTimeout(characterTimer); characterTimer = window.setTimeout(() => { @@ -2932,11 +2940,11 @@ }, 650); }); - shell?.addEventListener("mjj-jrpg-cancel", () => { + shell?.addEventListener("mjj-composer-cancel", () => { activeController?.abort(); }); - shell?.addEventListener("mjj-jrpg-submit", async event => { + shell?.addEventListener("mjj-composer-submit", async event => { if (activeController) return; /* Block sends when password change is required */ if (_sessionData?.kind === "user" && _sessionData?.mustChangePassword) { diff -r 13d61401c57d -r 41a49c29a28f mrjunejune/src/public/composer-lab.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/mrjunejune/src/public/composer-lab.html Fri Aug 07 16:05:29 2026 -0700 @@ -0,0 +1,119 @@ + + + + + + Composer Lab | MrJuneJune + + + + + + + + + +

Composer Lab

Edit the public composer module or stylesheet, then refresh this page.

+ +

Default

+ + + + Ready. +

+ +

Compact

+ + + + Ready. +

+ + + diff -r 13d61401c57d -r 41a49c29a28f mrjunejune/src/public/jrpg/background-frame-mobile.webp Binary file mrjunejune/src/public/jrpg/background-frame-mobile.webp has changed diff -r 13d61401c57d -r 41a49c29a28f mrjunejune/src/public/mjj-composer.css --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/mrjunejune/src/public/mjj-composer.css Fri Aug 07 16:05:29 2026 -0700 @@ -0,0 +1,109 @@ +mjj-composer { + --zenbu-composer-action-reserve: calc( + var(--zenbu-sys-control-height-sm) + var(--zenbu-sys-space-container) + ); + display: block; + min-width: 0; + min-height: 0; +} + +mjj-composer > form { + display: grid; + grid-template-columns: minmax(0, 1fr); + grid-template-rows: minmax(0, 1fr) auto; + gap: var(--zenbu-sys-space-control); + height: 100%; + min-height: 0; +} + +mjj-composer [data-composer-control] { + position: relative; + grid-column: 1; + grid-row: 1; + min-width: 0; + min-height: 0; +} + +mjj-composer [data-composer-control] > zen-field { + height: 100%; + min-height: 0; +} + +mjj-composer [data-composer-label] { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + clip-path: inset(50%); + white-space: nowrap; +} + +mjj-composer [data-composer-control] > zen-field:not( + [appearance="plain"] +) > textarea { + box-sizing: border-box; + height: 100%; + min-height: var(--zenbu-control-height); + padding-inline-end: var(--zenbu-composer-action-reserve); + resize: none; +} + +mjj-composer [data-composer-actions] { + position: absolute; + z-index: 1; + inset-inline-end: var(--zenbu-sys-padding-sm); + inset-block-end: var(--zenbu-sys-padding-sm); + display: flex; + flex-direction: column; + gap: var(--zenbu-sys-space-control); +} + +mjj-composer [data-composer-actions] zen-button, +mjj-composer [data-composer-actions] button { + width: 100%; +} + +mjj-composer [data-composer-meta] { + grid-column: 1 / -1; + grid-row: 2; + margin: 0; + color: var(--zenbu-sys-color-text-secondary); + font-size: var(--zenbu-sys-font-size-xs); +} + +mjj-composer [data-composer-meta][hidden], +mjj-composer [data-composer-cancel-owner][hidden] { + display: none; +} + +mjj-composer[compact] { + --zenbu-composer-action-size: var(--zenbu-sys-control-height-sm); + --zenbu-composer-action-reserve: calc( + var(--zenbu-composer-action-size) + var(--zenbu-sys-padding-md) + ); +} + +mjj-composer[compact] > form { + gap: var(--zenbu-sys-space-icon-label); +} + +mjj-composer[compact] [data-composer-actions] { + gap: var(--zenbu-sys-space-icon-label); +} + +mjj-composer[compact] [data-composer-actions] zen-button, +mjj-composer[compact] [data-composer-actions] button { + width: var(--zenbu-composer-action-size); +} + +mjj-composer[compact] [data-composer-actions] button { + height: var(--zenbu-composer-action-size); + min-height: var(--zenbu-composer-action-size); + padding: 0; +} + +mjj-composer[compact] [data-composer-action-label] { + display: none; +} diff -r 13d61401c57d -r 41a49c29a28f mrjunejune/src/public/mjj-composer.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/mrjunejune/src/public/mjj-composer.js Fri Aug 07 16:05:29 2026 -0700 @@ -0,0 +1,80 @@ +/** + * Coordinates a native composer form built from Zenbu controls. + * + * @extends {HTMLElement} + */ +export class MjjComposer extends HTMLElement { + connectedCallback() { + this._form = this.querySelector(":scope > form"); + this._textarea = this._form?.querySelector("textarea"); + this._submit = this._form?.querySelector('button[type="submit"]'); + this._cancel = this._form?.querySelector("[data-composer-cancel]"); + this._cancelOwner = this._form?.querySelector("[data-composer-cancel-owner]"); + this._onSubmit = event => { + event.preventDefault(); + const message = this._textarea?.value.trim(); + if (!message || this._submit?.disabled) return; + this.dispatchEvent(new CustomEvent("mjj-composer-submit", { + bubbles: true, + detail: { message }, + })); + this._form.reset(); + }; + this._onKeydown = event => { + if (event.key !== "Enter" || event.shiftKey || event.isComposing) return; + event.preventDefault(); + this._form?.requestSubmit(); + }; + this._onCancel = () => { + this.dispatchEvent(new CustomEvent("mjj-composer-cancel", { + bubbles: true, + })); + }; + this._form?.addEventListener("submit", this._onSubmit); + this._textarea?.addEventListener("keydown", this._onKeydown); + this._cancel?.addEventListener("click", this._onCancel); + } + + disconnectedCallback() { + this._form?.removeEventListener("submit", this._onSubmit); + this._textarea?.removeEventListener("keydown", this._onKeydown); + this._cancel?.removeEventListener("click", this._onCancel); + } + + /** + * Sets the active request state. + * + * @param {boolean} busy + */ + setBusy(busy) { + if (this._textarea) this._textarea.disabled = busy; + if (this._submit) { + this._submit.disabled = busy; + this._submit.setAttribute("aria-busy", String(busy)); + } + if (this._cancelOwner) this._cancelOwner.hidden = !busy; + } + + /** + * Shows or hides the cancellation action. + * + * @param {boolean} cancellable + */ + setCancellable(cancellable) { + if (this._cancelOwner) this._cancelOwner.hidden = !cancellable; + } + + /** + * Enables or disables composer input. + * + * @param {boolean} disabled + */ + setDisabled(disabled) { + if (this._textarea) this._textarea.disabled = disabled; + if (this._submit) this._submit.disabled = disabled; + } +} + +if (!customElements.get("mjj-composer")) { + customElements.define("mjj-composer", MjjComposer); +} diff -r 13d61401c57d -r 41a49c29a28f mrjunejune/test/snapshots/jrpg.snapshot --- a/mrjunejune/test/snapshots/jrpg.snapshot Fri Aug 07 13:24:05 2026 -0700 +++ b/mrjunejune/test/snapshots/jrpg.snapshot Fri Aug 07 16:05:29 2026 -0700 @@ -35,7 +35,9 @@ + + @@ -76,17 +78,61 @@

- + +