synthos 0.8.0 → 0.9.0

package/default-themes/high-contrast-light.v3.css

@@ -0,0 +1,198 @@
+/* ==========================================================================
+   High Contrast Light — Light Theme (v3)
+   Maximum contrast for accessibility (WCAG AAA 7:1+).
+   Pure grayscale neutrals, black primary.
+   ========================================================================== */
+
+.high-contrast-light {
+  /* -----------------------------------------------------------------------
+     PALETTE — Brand / Theme Colors (pure black ramp)
+     ----------------------------------------------------------------------- */
+  --themePrimary:     #000000;
+  --themeDark:        #000000;
+  --themeDarkAlt:     #000000;
+  --themeDarker:      #000000;
+  --themeSecondary:   #333333;
+  --themeTertiary:    #666666;
+  --themeLight:       #cccccc;
+  --themeLighter:     #e6e6e6;
+  --themeLighterAlt:  #f5f5f5;
+
+  /* -----------------------------------------------------------------------
+     PALETTE — Neutrals (pure untinted grayscale)
+     ----------------------------------------------------------------------- */
+  --neutralDark:          #000000;
+  --neutralPrimary:       #1a1a1a;
+  --neutralPrimaryAlt:    #2e2e2e;
+  --neutralSecondary:     #555555;
+  --neutralSecondaryAlt:  #444444;
+  --neutralTertiary:      #767676;
+  --neutralTertiaryAlt:   #999999;
+  --neutralQuaternary:    #c8c8c8;
+  --neutralQuaternaryAlt: #d0d0d0;
+  --neutralLight:         #e0e0e0;
+  --neutralLighter:       #f0f0f0;
+  --neutralLighterAlt:    #f8f8f8;
+  --white:                #ffffff;
+
+  /* -----------------------------------------------------------------------
+     BODY / BACKGROUND
+     ----------------------------------------------------------------------- */
+  --bodyBackground:          var(--white);
+  --bodyBackgroundHovered:   var(--neutralLighter);
+  --bodyBackgroundChecked:   var(--neutralLight);
+  --bodyStandoutBackground:  var(--neutralLighterAlt);
+  --bodyFrameBackground:     var(--white);
+  --bodyFrameDivider:        #000000;
+  --bodyDivider:             #000000;
+
+  /* -----------------------------------------------------------------------
+     TEXT
+     ----------------------------------------------------------------------- */
+  --bodyText:                #000000;
+  --bodyTextChecked:         #000000;
+  --bodySubtext:             #1a1a1a;
+  --disabledText:            #767676;
+  --disabledBodyText:        #767676;
+  --disabledSubtext:         #999999;
+  --disabledBodySubtext:     #999999;
+
+  /* -----------------------------------------------------------------------
+     LINKS
+     ----------------------------------------------------------------------- */
+  --link:                    #0000cc;
+  --linkHovered:             #000066;
+  --actionLink:              #000000;
+  --actionLinkHovered:       #000000;
+
+  /* -----------------------------------------------------------------------
+     BUTTONS — Default
+     ----------------------------------------------------------------------- */
+  --buttonBackground:              var(--white);
+  --buttonBackgroundHovered:       var(--neutralLighter);
+  --buttonBackgroundChecked:       var(--neutralLight);
+  --buttonBackgroundCheckedHovered: var(--neutralQuaternaryAlt);
+  --buttonBackgroundPressed:       var(--neutralLight);
+  --buttonBackgroundDisabled:      var(--neutralLighter);
+  --buttonBorder:                  #000000;
+  --buttonBorderDisabled:          #767676;
+  --buttonText:                    #000000;
+  --buttonTextHovered:             #000000;
+  --buttonTextChecked:             #000000;
+  --buttonTextCheckedHovered:      #000000;
+  --buttonTextPressed:             #000000;
+  --buttonTextDisabled:            #767676;
+
+  /* -----------------------------------------------------------------------
+     BUTTONS — Primary
+     ----------------------------------------------------------------------- */
+  --primaryButtonBackground:          #000000;
+  --primaryButtonBackgroundHovered:   #1a1a1a;
+  --primaryButtonBackgroundPressed:   #333333;
+  --primaryButtonBackgroundDisabled:  #767676;
+  --primaryButtonBorder:              transparent;
+  --primaryButtonText:                var(--white);
+  --primaryButtonTextHovered:         var(--white);
+  --primaryButtonTextPressed:         var(--white);
+  --primaryButtonTextDisabled:        var(--neutralQuaternary);
+
+  /* -----------------------------------------------------------------------
+     BUTTONS — Accent
+     ----------------------------------------------------------------------- */
+  --accentButtonBackground:  #000000;
+  --accentButtonText:        var(--white);
+
+  /* -----------------------------------------------------------------------
+     INPUTS
+     ----------------------------------------------------------------------- */
+  --inputBackground:                    var(--white);
+  --inputBackgroundChecked:             #000000;
+  --inputBackgroundCheckedHovered:      #1a1a1a;
+  --inputPlaceholderBackgroundChecked:  var(--neutralLighter);
+  --inputForegroundChecked:             var(--white);
+  --inputBorder:                        #000000;
+  --smallInputBorder:                   #000000;
+  --inputBorderHovered:                 #000000;
+  --inputFocusBorderAlt:                #000000;
+  --inputText:                          #000000;
+  --inputTextHovered:                   #000000;
+  --inputPlaceholderText:               #555555;
+  --inputIcon:                          #000000;
+  --inputIconHovered:                   #000000;
+  --inputIconDisabled:                  #767676;
+
+  /* -----------------------------------------------------------------------
+     LISTS
+     ----------------------------------------------------------------------- */
+  --listBackground:                  var(--white);
+  --listText:                        #000000;
+  --listItemBackgroundHovered:       var(--neutralLighter);
+  --listItemBackgroundChecked:       var(--neutralLight);
+  --listItemBackgroundCheckedHovered: var(--neutralQuaternaryAlt);
+  --listHeaderBackgroundHovered:     var(--neutralLighter);
+  --listHeaderBackgroundPressed:     var(--neutralLight);
+
+  /* -----------------------------------------------------------------------
+     MENUS
+     ----------------------------------------------------------------------- */
+  --menuBackground:              var(--white);
+  --menuDivider:                 #000000;
+  --menuIcon:                    #000000;
+  --menuHeader:                  #000000;
+  --menuItemBackgroundHovered:   var(--neutralLighter);
+  --menuItemBackgroundPressed:   var(--neutralLight);
+  --menuItemText:                #000000;
+  --menuItemTextHovered:         #000000;
+
+  /* -----------------------------------------------------------------------
+     CARDS
+     ----------------------------------------------------------------------- */
+  --cardStandoutBackground:  var(--white);
+  --cardShadow:              none;
+  --cardShadowHovered:       none;
+  --variantBorder:           #000000;
+  --variantBorderHovered:    #000000;
+
+  /* -----------------------------------------------------------------------
+     DISABLED / FOCUS
+     ----------------------------------------------------------------------- */
+  --disabledBackground:  var(--neutralLighter);
+  --disabledBorder:      #767676;
+  --focusBorder:         #000000;
+
+  /* -----------------------------------------------------------------------
+     STATUS — Backgrounds
+     ----------------------------------------------------------------------- */
+  --infoBackground:           var(--neutralLighter);
+  --errorBackground:          #FDE7E9;
+  --blockingBackground:       #FDE7E9;
+  --warningBackground:        #FFF4CE;
+  --severeWarningBackground:  #FED9CC;
+  --successBackground:        #DFF6DD;
+
+  /* -----------------------------------------------------------------------
+     STATUS — Icons
+     ----------------------------------------------------------------------- */
+  --infoIcon:           #000000;
+  --errorIcon:          #A80000;
+  --blockingIcon:       #A80000;
+  --warningIcon:        #333333;
+  --severeWarningIcon:  #A80000;
+  --successIcon:        #107C10;
+
+  /* -----------------------------------------------------------------------
+     STATUS — Text
+     ----------------------------------------------------------------------- */
+  --errorText:    #A80000;
+  --messageText:  #000000;
+  --messageLink:  #0000cc;
+  --messageLinkHovered: #000066;
+  --warningText:  #000000;
+  --successText:  #107C10;
+
+  /* -----------------------------------------------------------------------
+     MISC
+     ----------------------------------------------------------------------- */
+  --defaultStateBackground:  var(--neutralLighterAlt);
+  --overlayBackground:       rgba(0, 0, 0, 0.5);
+}

package/default-themes/nebula-dawn.v2.css

@@ -466,6 +466,7 @@ body.chat-collapsed .chat-toggle {
 
 .chat-input-wrapper .chat-input {
     width: 100%;
+    padding-left: 36px;
     padding-right: 36px;
 }
 
@@ -704,3 +705,112 @@ body.chat-collapsed .chat-toggle {
 #loadingOverlay { position: absolute; }
 .chat-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
 .chat-input:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* ---- Attach button (left side of input) ---- */
+.attach-btn {
+    position: absolute;
+    left: 6px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: color 0.2s, background 0.2s;
+    z-index: 2;
+}
+.attach-btn:hover {
+    color: var(--accent-primary);
+    background: var(--accent-glow);
+}
+.light-mode .attach-btn {
+    color: var(--text-secondary);
+}
+.light-mode .attach-btn:hover {
+    color: var(--accent-primary);
+}
+
+/* ---- Attach popup menu ---- */
+.attach-menu {
+    display: none;
+    flex-direction: column;
+    position: absolute;
+    bottom: calc(100% + 6px);
+    left: 0;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
+    overflow: hidden;
+    z-index: 100;
+    min-width: 160px;
+}
+.attach-menu-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 14px;
+    font-size: 13px;
+    color: var(--text-primary);
+    cursor: pointer;
+    transition: background 0.15s;
+}
+.attach-menu-item:hover {
+    background: var(--accent-glow);
+}
+
+/* ---- Attachment pills ---- */
+.attachment-pills {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    padding: 0 4px;
+    min-height: 0;
+}
+.attachment-pills:empty { display: none; }
+.attachment-pill {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    padding: 4px 8px;
+    max-width: 180px;
+}
+.attachment-pill-remove {
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    font-size: 14px;
+    padding: 0 2px;
+    line-height: 1;
+}
+.attachment-pill-remove:hover {
+    color: #ff6b6b;
+}
+
+/* ---- Screenshot overlay ---- */
+.screenshot-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.15);
+    cursor: crosshair;
+    z-index: 1000;
+}
+.screenshot-rect {
+    display: none;
+    position: absolute;
+    border: 2px solid red;
+    background: rgba(255,0,0,0.05);
+    pointer-events: none;
+}

package/default-themes/nebula-dawn.v3.css

@@ -0,0 +1,199 @@
+/* ==========================================================================
+   Nebula Dawn — Light Theme (v3)
+   Palette overrides + semantic tokens for FluentLM.
+   Rebrands from default blue to Nebula purple.
+   ========================================================================== */
+
+:root,
+.nebula-dawn {
+  /* -----------------------------------------------------------------------
+     PALETTE — Brand / Theme Colors (Nebula purple ramp)
+     ----------------------------------------------------------------------- */
+  --themePrimary:     #764ba2;
+  --themeDark:        #5a3580;
+  --themeDarkAlt:     #663d91;
+  --themeDarker:      #3b2054;
+  --themeSecondary:   #9670b8;
+  --themeTertiary:    #b49bce;
+  --themeLight:       #d3c3e3;
+  --themeLighter:     #e8ddf1;
+  --themeLighterAlt:  #f5f1fa;
+
+  /* -----------------------------------------------------------------------
+     PALETTE — Neutrals (warm purple-tinted)
+     ----------------------------------------------------------------------- */
+  --neutralDark:          #1e1830;
+  --neutralPrimary:       #2d2640;
+  --neutralPrimaryAlt:    #3d2e56;
+  --neutralSecondary:     #6b4f8a;
+  --neutralSecondaryAlt:  #5e4579;
+  --neutralTertiary:      #8a7a9d;
+  --neutralTertiaryAlt:   #a898b5;
+  --neutralQuaternary:    #cbc0d6;
+  --neutralQuaternaryAlt: #d5cae0;
+  --neutralLight:         #e8dff0;
+  --neutralLighter:       #f0e6f6;
+  --neutralLighterAlt:    #f7f2fa;
+  --white:                #ffffff;
+
+  /* -----------------------------------------------------------------------
+     BODY / BACKGROUND
+     ----------------------------------------------------------------------- */
+  --bodyBackground:          var(--white);
+  --bodyBackgroundHovered:   var(--neutralLighter);
+  --bodyBackgroundChecked:   var(--neutralLight);
+  --bodyStandoutBackground:  var(--neutralLighterAlt);
+  --bodyFrameBackground:     var(--white);
+  --bodyFrameDivider:        var(--neutralLight);
+  --bodyDivider:             var(--neutralLight);
+
+  /* -----------------------------------------------------------------------
+     TEXT
+     ----------------------------------------------------------------------- */
+  --bodyText:                var(--neutralPrimary);
+  --bodyTextChecked:         var(--neutralDark);
+  --bodySubtext:             var(--neutralSecondary);
+  --disabledText:            var(--neutralTertiary);
+  --disabledBodyText:        var(--neutralTertiary);
+  --disabledSubtext:         var(--neutralQuaternary);
+  --disabledBodySubtext:     var(--neutralTertiaryAlt);
+
+  /* -----------------------------------------------------------------------
+     LINKS
+     ----------------------------------------------------------------------- */
+  --link:                    var(--themePrimary);
+  --linkHovered:             var(--themeDarker);
+  --actionLink:              var(--neutralPrimary);
+  --actionLinkHovered:       var(--neutralDark);
+
+  /* -----------------------------------------------------------------------
+     BUTTONS — Default
+     ----------------------------------------------------------------------- */
+  --buttonBackground:              var(--white);
+  --buttonBackgroundHovered:       var(--neutralLighter);
+  --buttonBackgroundChecked:       var(--neutralLight);
+  --buttonBackgroundCheckedHovered: var(--neutralQuaternaryAlt);
+  --buttonBackgroundPressed:       var(--neutralLight);
+  --buttonBackgroundDisabled:      var(--neutralLighter);
+  --buttonBorder:                  var(--neutralSecondaryAlt);
+  --buttonBorderDisabled:          var(--neutralLighter);
+  --buttonText:                    var(--neutralPrimary);
+  --buttonTextHovered:             var(--neutralDark);
+  --buttonTextChecked:             var(--neutralDark);
+  --buttonTextCheckedHovered:      var(--black);
+  --buttonTextPressed:             var(--neutralDark);
+  --buttonTextDisabled:            var(--neutralTertiary);
+
+  /* -----------------------------------------------------------------------
+     BUTTONS — Primary
+     ----------------------------------------------------------------------- */
+  --primaryButtonBackground:          var(--themePrimary);
+  --primaryButtonBackgroundHovered:   var(--themeDarkAlt);
+  --primaryButtonBackgroundPressed:   var(--themeDark);
+  --primaryButtonBackgroundDisabled:  var(--neutralLighter);
+  --primaryButtonBorder:              transparent;
+  --primaryButtonText:                var(--white);
+  --primaryButtonTextHovered:         var(--white);
+  --primaryButtonTextPressed:         var(--white);
+  --primaryButtonTextDisabled:        var(--neutralQuaternary);
+
+  /* -----------------------------------------------------------------------
+     BUTTONS — Accent
+     ----------------------------------------------------------------------- */
+  --accentButtonBackground:  var(--themePrimary);
+  --accentButtonText:        var(--white);
+
+  /* -----------------------------------------------------------------------
+     INPUTS
+     ----------------------------------------------------------------------- */
+  --inputBackground:                    var(--white);
+  --inputBackgroundChecked:             var(--themePrimary);
+  --inputBackgroundCheckedHovered:      var(--themeDarkAlt);
+  --inputPlaceholderBackgroundChecked:  var(--themeLighter);
+  --inputForegroundChecked:             var(--white);
+  --inputBorder:                        var(--neutralSecondary);
+  --smallInputBorder:                   var(--neutralSecondary);
+  --inputBorderHovered:                 var(--neutralPrimary);
+  --inputFocusBorderAlt:                var(--themePrimary);
+  --inputText:                          var(--neutralPrimary);
+  --inputTextHovered:                   var(--neutralDark);
+  --inputPlaceholderText:               var(--neutralSecondary);
+  --inputIcon:                          var(--themePrimary);
+  --inputIconHovered:                   var(--themeDark);
+  --inputIconDisabled:                  var(--neutralTertiary);
+
+  /* -----------------------------------------------------------------------
+     LISTS
+     ----------------------------------------------------------------------- */
+  --listBackground:                  var(--white);
+  --listText:                        var(--neutralPrimary);
+  --listItemBackgroundHovered:       var(--neutralLighter);
+  --listItemBackgroundChecked:       var(--neutralLight);
+  --listItemBackgroundCheckedHovered: var(--neutralQuaternaryAlt);
+  --listHeaderBackgroundHovered:     var(--neutralLighter);
+  --listHeaderBackgroundPressed:     var(--neutralLight);
+
+  /* -----------------------------------------------------------------------
+     MENUS
+     ----------------------------------------------------------------------- */
+  --menuBackground:              var(--white);
+  --menuDivider:                 var(--neutralTertiaryAlt);
+  --menuIcon:                    var(--themePrimary);
+  --menuHeader:                  var(--themePrimary);
+  --menuItemBackgroundHovered:   var(--neutralLighter);
+  --menuItemBackgroundPressed:   var(--neutralLight);
+  --menuItemText:                var(--neutralPrimary);
+  --menuItemTextHovered:         var(--neutralDark);
+
+  /* -----------------------------------------------------------------------
+     CARDS
+     ----------------------------------------------------------------------- */
+  --cardStandoutBackground:  var(--white);
+  --cardShadow:              var(--elevation4);
+  --cardShadowHovered:       var(--elevation8);
+  --variantBorder:           var(--neutralLight);
+  --variantBorderHovered:    var(--neutralTertiaryAlt);
+
+  /* -----------------------------------------------------------------------
+     DISABLED / FOCUS
+     ----------------------------------------------------------------------- */
+  --disabledBackground:  var(--neutralLighter);
+  --disabledBorder:      var(--neutralLighter);
+  --focusBorder:         var(--neutralSecondary);
+
+  /* -----------------------------------------------------------------------
+     STATUS — Backgrounds
+     ----------------------------------------------------------------------- */
+  --infoBackground:           var(--neutralLighter);
+  --errorBackground:          #FDE7E9;
+  --blockingBackground:       #FDE7E9;
+  --warningBackground:        #FFF4CE;
+  --severeWarningBackground:  #FED9CC;
+  --successBackground:        #DFF6DD;
+
+  /* -----------------------------------------------------------------------
+     STATUS — Icons
+     ----------------------------------------------------------------------- */
+  --infoIcon:           var(--neutralSecondary);
+  --errorIcon:          #A80000;
+  --blockingIcon:       #FDE7E9;
+  --warningIcon:        #797775;
+  --severeWarningIcon:  var(--orange);
+  --successIcon:        var(--green);
+
+  /* -----------------------------------------------------------------------
+     STATUS — Text
+     ----------------------------------------------------------------------- */
+  --errorText:    var(--redDark);
+  --messageText:  var(--neutralPrimary);
+  --messageLink:  var(--themeDark);
+  --messageLinkHovered: var(--themeDarker);
+  --warningText:  var(--neutralPrimary);
+  --successText:  var(--green);
+
+  /* -----------------------------------------------------------------------
+     MISC
+     ----------------------------------------------------------------------- */
+  --defaultStateBackground:  var(--neutralLighterAlt);
+  --overlayBackground:       var(--blackTranslucent40);
+}

package/default-themes/nebula-dusk.v2.css

@@ -466,6 +466,7 @@ body.chat-collapsed .chat-toggle {
 
 .chat-input-wrapper .chat-input {
     width: 100%;
+    padding-left: 36px;
     padding-right: 36px;
 }
 
@@ -696,3 +697,106 @@ body.chat-collapsed .chat-toggle {
 #loadingOverlay { position: absolute; }
 .chat-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
 .chat-input:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* ---- Attach button (left side of input) ---- */
+.attach-btn {
+    position: absolute;
+    left: 6px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: color 0.2s, background 0.2s;
+    z-index: 2;
+}
+.attach-btn:hover {
+    color: var(--accent-primary);
+    background: var(--accent-glow);
+}
+
+/* ---- Attach popup menu ---- */
+.attach-menu {
+    display: none;
+    flex-direction: column;
+    position: absolute;
+    bottom: calc(100% + 6px);
+    left: 0;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
+    overflow: hidden;
+    z-index: 100;
+    min-width: 160px;
+}
+.attach-menu-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 14px;
+    font-size: 13px;
+    color: var(--text-primary);
+    cursor: pointer;
+    transition: background 0.15s;
+}
+.attach-menu-item:hover {
+    background: var(--accent-glow);
+}
+
+/* ---- Attachment pills ---- */
+.attachment-pills {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    padding: 0 4px;
+    min-height: 0;
+}
+.attachment-pills:empty { display: none; }
+.attachment-pill {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    padding: 4px 8px;
+    max-width: 180px;
+}
+.attachment-pill-remove {
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    font-size: 14px;
+    padding: 0 2px;
+    line-height: 1;
+}
+.attachment-pill-remove:hover {
+    color: #ff6b6b;
+}
+
+/* ---- Screenshot overlay ---- */
+.screenshot-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.2);
+    cursor: crosshair;
+    z-index: 1000;
+}
+.screenshot-rect {
+    display: none;
+    position: absolute;
+    border: 2px solid red;
+    background: rgba(255,0,0,0.05);
+    pointer-events: none;
+}