engine/branding.py

"""Shared Hugging Face branding for smolcode Gradio UIs."""
from __future__ import annotations

from .themes import theme_css_vars

# Official HF icon (huggingface.co/front/assets/huggingface_logo-noborder.svg)
HF_LOGO_SVG = (
    '<svg class="hf-logo" xmlns="http://www.w3.org/2000/svg" width="32" height="30" '
    'viewBox="0 0 95 88" fill="none" aria-label="Hugging Face">'
    '<path fill="#FFD21E" d="M47.21 76.5a34.75 34.75 0 1 0 0-69.5 34.75 34.75 0 0 0 0 69.5Z" />'
    '<path fill="#FF9D0B" d="M81.96 41.75a34.75 34.75 0 1 0-69.5 0 34.75 34.75 0 0 0 69.5 0Zm-73.5 0a38.75 38.75 0 1 1 77.5 0 38.75 38.75 0 0 1-77.5 0Z" />'
    '<path fill="#3A3B45" d="M58.5 32.3c1.28.44 1.78 3.06 3.07 2.38a5 5 0 1 0-6.76-2.07c.61 1.15 2.55-.72 3.7-.32ZM34.95 32.3c-1.28.44-1.79 3.06-3.07 2.38a5 5 0 1 1 6.76-2.07c-.61 1.15-2.56-.72-3.7-.32Z" />'
    '<path fill="#FF323D" d="M46.96 56.29c9.83 0 13-8.76 13-13.26 0-2.34-1.57-1.6-4.09-.36-2.33 1.15-5.46 2.74-8.9 2.74-7.19 0-13-6.88-13-2.38s3.16 13.26 13 13.26Z" />'
    '<path fill="#3A3B45" fill-rule="evenodd" d="M39.43 54a8.7 8.7 0 0 1 5.3-4.49c.4-.12.81.57 1.24 1.28.4.68.82 1.37 1.24 1.37.45 0 .9-.68 1.33-1.35.45-.7.89-1.38 1.32-1.25a8.61 8.61 0 0 1 5 4.17c3.73-2.94 5.1-7.74 5.1-10.7 0-2.34-1.57-1.6-4.09-.36l-.14.07c-2.31 1.15-5.39 2.67-8.77 2.67s-6.45-1.52-8.77-2.67c-2.6-1.29-4.23-2.1-4.23.29 0 3.05 1.46 8.06 5.47 10.97Z" clip-rule="evenodd" />'
    '<path fill="#FF9D0B" d="M70.71 37a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5ZM24.21 37a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5ZM17.52 48c-1.62 0-3.06.66-4.07 1.87a5.97 5.97 0 0 0-1.33 3.76 7.1 7.1 0 0 0-1.94-.3c-1.55 0-2.95.59-3.94 1.66a5.8 5.8 0 0 0-.8 7 5.3 5.3 0 0 0-1.79 2.82c-.24.9-.48 2.8.8 4.74a5.22 5.22 0 0 0-.37 5.02c1.02 2.32 3.57 4.14 8.52 6.1 3.07 1.22 5.89 2 5.91 2.01a44.33 44.33 0 0 0 10.93 1.6c5.86 0 10.05-1.8 12.46-5.34 3.88-5.69 3.33-10.9-1.7-15.92-2.77-2.78-4.62-6.87-5-7.77-.78-2.66-2.84-5.62-6.25-5.62a5.7 5.7 0 0 0-4.6 2.46c-1-1.26-1.98-2.25-2.86-2.82A7.4 7.4 0 0 0 17.52 48Zm0 4c.51 0 1.14.22 1.82.65 2.14 1.36 6.25 8.43 7.76 11.18.5.92 1.37 1.31 2.14 1.31 1.55 0 2.75-1.53.15-3.48-3.92-2.93-2.55-7.72-.68-8.01.08-.02.17-.02.24-.02 1.7 0 2.45 2.93 2.45 2.93s2.2 5.52 5.98 9.3c3.77 3.77 3.97 6.8 1.22 10.83-1.88 2.75-5.47 3.58-9.16 3.58-3.81 0-7.73-.9-9.92-1.46-.11-.03-13.45-3.8-11.76-7 .28-.54.75-.76 1.34-.76 2.38 0 6.7 3.54 8.57 3.54.41 0 .7-.17.83-.6.79-2.85-12.06-4.05-10.98-8.17.2-.73.71-1.02 1.44-1.02 3.14 0 10.2 5.53 11.68 5.53.11 0 .2-.03.24-.1.74-1.2.33-2.04-4.9-5.2-5.21-3.16-8.88-5.06-6.8-7.33.24-.26.58-.38 1-.38 3.17 0 10.66 6.82 10.66 6.82s2.02 2.1 3.25 2.1c.28 0 .52-.1.68-.38.86-1.46-8.06-8.22-8.56-11.01-.34-1.9.24-2.85 1.31-2.85Z" />'
    '<path fill="#FFD21E" d="M38.6 76.69c2.75-4.04 2.55-7.07-1.22-10.84-3.78-3.77-5.98-9.3-5.98-9.3s-.82-3.2-2.69-2.9c-1.87.3-3.24 5.08.68 8.01 3.91 2.93-.78 4.92-2.29 2.17-1.5-2.75-5.62-9.82-7.76-11.18-2.13-1.35-3.63-.6-3.13 2.2.5 2.79 9.43 9.55 8.56 11-.87 1.47-3.93-1.71-3.93-1.71s-9.57-8.71-11.66-6.44c-2.08 2.27 1.59 4.17 6.8 7.33 5.23 3.16 5.64 4 4.9 5.2-.75 1.2-12.28-8.53-13.36-4.4-1.08 4.11 11.77 5.3 10.98 8.15-.8 2.85-9.06-5.38-10.74-2.18-1.7 3.21 11.65 6.98 11.76 7.01 4.3 1.12 15.25 3.49 19.08-2.12Z" />'
    '<path fill="#FF9D0B" d="M77.4 48c1.62 0 3.07.66 4.07 1.87a5.97 5.97 0 0 1 1.33 3.76 7.1 7.1 0 0 1 1.95-.3c1.55 0 2.95.59 3.94 1.66a5.8 5.8 0 0 1 .8 7 5.3 5.3 0 0 1 1.78 2.82c.24.9.48 2.8-.8 4.74a5.22 5.22 0 0 1 .37 5.02c-1.02 2.32-3.57 4.14-8.51 6.1-3.08 1.22-5.9 2-5.92 2.01a44.33 44.33 0 0 1-10.93 1.6c-5.86 0-10.05-1.8-12.46-5.34-3.88-5.69-3.33-10.9 1.7-15.92 2.78-2.78 4.63-6.87 5.01-7.77.78-2.66 2.83-5.62 6.24-5.62a5.7 5.7 0 0 1 4.6 2.46c1-1.26 1.98-2.25 2.87-2.82A7.4 7.4 0 0 1 77.4 48Zm0 4c-.51 0-1.13.22-1.82.65-2.13 1.36-6.25 8.43-7.76 11.18a2.43 2.43 0 0 1-2.14 1.31c-1.54 0-2.75-1.53-.14-3.48 3.91-2.93 2.54-7.72.67-8.01a1.54 1.54 0 0 0-.24-.02c-1.7 0-2.45 2.93-2.45 2.93s-2.2 5.52-5.97 9.3c-3.78 3.77-3.98 6.8-1.22 10.83 1.87 2.75 5.47 3.58 9.15 3.58 3.82 0 7.73-.9 9.93-1.46.1-.03 13.45-3.8 11.76-7-.29-.54-.75-.76-1.34-.76-2.38 0-6.71 3.54-8.57 3.54-.42 0-.71-.17-.83-.6-.8-2.85 12.05-4.05 10.97-8.17-.19-.73-.7-1.02-1.44-1.02-3.14 0-10.2 5.53-11.68 5.53-.1 0-.19-.03-.23-.1-.74-1.2-.34-2.04 4.88-5.2 5.23-3.16 8.9-5.06 6.8-7.33-.23-.26-.57-.38-.98-.38-3.18 0-10.67 6.82-10.67 6.82s-2.02 2.1-3.24 2.1a.74.74 0 0 1-.68-.38c-.87-1.46 8.05-8.22 8.55-11.01.34-1.9-.24-2.85-1.31-2.85Z" />'
    '<path fill="#FFD21E" d="M56.33 76.69c-2.75-4.04-2.56-7.07 1.22-10.84 3.77-3.77 5.97-9.3 5.97-9.3s.82-3.2 2.7-2.9c1.86.3 3.23 5.08-.68 8.01-3.92 2.93.78 4.92 2.28 2.17 1.51-2.75 5.63-9.82 7.76-11.18 2.13-1.35 3.64-.6 3.13 2.2-.5 2.79-9.42 9.55-8.55 11 .86 1.47 3.92-1.71 3.92-1.71s9.58-8.71 11.66-6.44c2.08 2.27-1.58 4.17-6.8 7.33-5.23 3.16-5.63 4-4.9 5.2.75 1.2 12.28-8.53 13.36-4.4 1.08 4.11-11.76 5.3-10.97 8.15.8 2.85 9.05-5.38 10.74-2.18 1.69 3.21-11.65 6.98-11.76 7.01-4.31 1.12-15.26 3.49-19.08-2.12Z" />'
    '</svg>'
)

SMOLCODE_CSS = """
:root { --hf-yellow:#FFD21E; --sc-accent:#7c3aed; --sc-bg:#0b1020; --sc-panel:#111827;
  --sc-border:#334155; --sc-fg:#e2e8f0; --sc-dim:#64748b; --sc-ok:#34d399; --sc-tool:#a78bfa; }
body, .gradio-container { background:var(--sc-bg) !important; color:var(--sc-fg) !important; }
/* Lock the whole page to the viewport so it can NEVER scroll; only inner panes scroll. */
html, body { height:100% !important; max-height:100vh !important; margin:0 !important;
  overflow:hidden !important; }
gradio-app { display:block !important; height:100vh !important; max-height:100vh !important;
  overflow:hidden !important; }
.gradio-container { max-width:100% !important; padding:0.5rem 1rem !important;
  height:100vh !important; max-height:100vh !important; min-height:0 !important;
  overflow:hidden !important; }
/* Every Gradio wrapper between the container and our shell must be height-locked, not auto. */
.gradio-container > .wrap, .gradio-container .contain,
main.fillable, main.app, .gradio-container > main {
  height:100% !important; max-height:100% !important; min-height:0 !important;
  overflow:hidden !important; }
/* The unnamed outer column Gradio injects around our shell column. */
main.fillable > .column, .contain > .column, .wrap > .column {
  height:100% !important; max-height:100% !important; min-height:0 !important;
  overflow:hidden !important; }
.sc-header { display:flex; align-items:center; gap:.75rem; margin-bottom:.25rem; }
.hf-logo { flex-shrink:0; }
.sc-title { font-weight:800; font-size:1.7rem; letter-spacing:-.02em; line-height:1.2; }
.sc-title .hf-accent, .hf-accent { color:var(--hf-yellow); }
.sc-badge { display:inline-block; padding:2px 10px; border-radius:999px;
  background:#2a2410; color:var(--hf-yellow); border:1px solid rgba(255,210,30,.25);
  font-size:.72rem; font-weight:600; margin-left:.4rem; vertical-align:middle; }
.sc-sub { color:#94a3b8; margin-top:.2rem; font-size:.9rem; }
.sc-tui-shell { display:flex !important; flex-direction:column; gap:.5rem;
  height:100% !important; max-height:100% !important; min-height:0; overflow:hidden !important; }
.sc-header-bar { display:flex; align-items:center; gap:.85rem; padding:.5rem .75rem;
  background:#1e293b; border-radius:6px; font-family:ui-monospace,monospace; font-size:.8rem;
  flex-shrink:0; }
.sc-hbrand { font-weight:700; color:#0b1020; background:var(--sc-accent); padding:1px 8px;
  border-radius:4px; }
.sc-hbrand .hf-accent { color:var(--hf-yellow); }
.sc-hgit { color:var(--sc-ok); }
.sc-hmodel { color:var(--sc-tool); font-weight:700; }
.sc-hhost { color:var(--sc-dim); }
.sc-htheme { color:var(--sc-dim); margin-left:auto; }
.sc-main-row { display:flex !important; flex-wrap:nowrap !important; align-items:stretch !important;
  gap:.5rem !important; flex:1 !important; min-height:0 !important; overflow:hidden !important; }
.sc-main-row > .gr-html, .sc-main-row > .gr-column { min-height:0 !important; height:100% !important; }
.sc-sidebar { width:17rem !important; min-width:17rem !important; max-width:17rem !important;
  flex-shrink:0 !important; height:100% !important; min-height:0 !important; overflow:hidden !important; }
.sc-sidebar > .html-container { padding:0 !important; height:100% !important; min-height:0 !important; }
.sc-sidebar-panel { height:100%; min-height:0; max-height:100%; display:flex; flex-direction:column;
  background:var(--sc-panel); border:1px solid var(--sc-border); border-radius:8px;
  font-family:ui-monospace,monospace; font-size:.78rem; overflow:hidden; }
.sc-sidebar-focused { border-color:var(--sc-accent); }
.sc-sidebar-title { padding:.35rem .55rem; color:var(--sc-accent); font-weight:700;
  border-bottom:1px solid var(--sc-border); background:#0f172a; }
.sc-sidebar-body { flex:1 1 0%; min-height:0; height:100%;
  max-height:calc(100vh - 5rem); overflow-y:auto; overflow-x:hidden;
  padding:.25rem 0; line-height:1.35; }
.sc-sb-dir { color:var(--sc-accent); font-weight:700; padding:.1rem .45rem; white-space:nowrap; }
.sc-sb-file { display:flex; align-items:baseline; gap:.15rem; padding:.05rem .45rem;
  color:var(--sc-fg); white-space:nowrap; }
.sc-sb-file:hover { background:#1e293b; }
.sc-sb-sel { background:var(--sc-ok); color:#0b1020; font-weight:700; }
.sc-sb-sel .sc-sb-glyph, .sc-sb-sel .sc-sb-name { color:#0b1020; }
.sc-sb-mark { display:inline-block; width:.85rem; text-align:center; }
.sc-sb-glyph { opacity:.6; }
.sc-sb-more { color:var(--sc-dim); font-style:italic; padding:.2rem .45rem; }
.sc-sb-empty, .sc-sb-stat { padding:.15rem .45rem; color:var(--sc-fg); }
.sc-sb-dim { color:var(--sc-dim); }
.sc-main-col { flex:1 !important; min-width:0 !important; min-height:0 !important;
  height:100% !important; display:flex !important; flex-direction:column !important;
  gap:.5rem !important; overflow:hidden !important; }
.sc-editor-wrap, .sc-editor-wrap .gr-group { overflow:visible !important; flex-shrink:0 !important; }
.sc-transcript-wrap { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;
  background:#0f172a; border:1px solid var(--sc-border); border-radius:8px; padding:.5rem .65rem; }
.sc-transcript-inner { font-family:ui-monospace,monospace; font-size:.82rem; line-height:1.45; }
.sc-transcript-empty { color:var(--sc-dim); padding:1rem; font-family:ui-monospace,monospace; }
.sc-tline { margin:.15rem 0; }
.sc-tglyph { display:inline-block; width:1rem; }
.sc-editor-wrap { border:1px solid var(--sc-accent); border-radius:8px; padding:.25rem;
  background:#0f172a; flex-shrink:0; min-height:9rem; overflow:visible !important; }
.sc-editor-wrap .block, #sc-editor { height:auto !important; min-height:7rem !important;
  overflow:visible !important; }
.sc-editor-wrap label { display:flex !important; flex-direction:column; min-height:6.5rem; }
.sc-editor-wrap textarea, #sc-editor textarea, #sc-editor input,
[data-testid="textbox"] textarea, [data-testid="textbox"] input {
  font-family:ui-monospace,monospace !important; font-size:.85rem !important;
  background:#0f172a !important; color:var(--sc-fg) !important; border:none !important;
  box-shadow:none !important; pointer-events:auto !important;
  min-height:6.5rem !important; resize:vertical !important; }
#sc-editor { pointer-events:auto !important; }
.sc-editor-hint { font-size:.72rem; color:var(--sc-dim); padding:.2rem .4rem;
  font-family:ui-monospace,monospace; }
.sc-status-wrap { flex-shrink:0; }
.sc-status-bar { display:flex; flex-wrap:wrap; gap:.35rem; padding:.4rem .5rem;
  background:#1e293b; border-radius:6px; font-family:ui-monospace,monospace; font-size:.75rem; }
.sc-chip { padding:2px 8px; border-radius:4px; background:#334155; color:#e2e8f0; }
.sc-chip-brand { background:var(--sc-accent); color:#fff; font-weight:700; }
.sc-chip-mode { background:#2a2410; color:var(--hf-yellow); font-weight:600; }
.sc-chip-think { background:#422006; color:#fdba74; }
.sc-chip-run { background:#14532d; color:#86efac; }
.sc-chip-dim { color:#94a3b8; }
.sc-chip-model { color:#a78bfa; }
.sc-chip-clickable { cursor:pointer; border:none; font:inherit; font-family:inherit; font-size:inherit; }
.sc-chip-clickable:hover { filter:brightness(1.15); }
.sc-picker-title { color:var(--sc-accent); font-weight:700; margin-bottom:.5rem; }
.sc-picker-list { display:flex; flex-direction:column; gap:2px; max-height:280px; overflow-y:auto; }
.sc-picker-item { display:flex; gap:.35rem; align-items:baseline; width:100%; text-align:left;
  padding:.25rem .4rem; background:transparent; border:none; color:var(--sc-fg);
  font-family:ui-monospace,monospace; font-size:.85rem; cursor:pointer; border-radius:4px; }
.sc-picker-item:hover { background:#334155; }
.sc-picker-sel { background:var(--sc-accent); color:#fff; font-weight:700; }
.sc-picker-mark { display:inline-block; width:1rem; text-align:center; }
.sc-picker-hint { margin-top:.6rem; font-size:.72rem; color:var(--sc-dim); }
.sc-picker-empty { color:var(--sc-dim); font-style:italic; }
.sc-popup-item.sc-popup-sel { background:#334155; font-weight:700; }
.sc-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9999;
  display:flex; align-items:center; justify-content:center; pointer-events:auto; }
.sc-overlay-panel { background:#1e293b; border:1px solid #7c3aed; border-radius:10px;
  padding:1rem 1.25rem; max-width:480px; font-family:ui-monospace,monospace; font-size:.85rem;
  color:#e2e8f0; pointer-events:auto; }
.sc-popup { position:absolute; z-index:100; background:#1e293b; border:1px solid #7c3aed;
  border-radius:6px; max-height:200px; overflow:auto; font-family:ui-monospace,monospace; font-size:.8rem; }
.sc-popup-item { padding:.25rem .5rem; cursor:pointer; color:#34d399; }
.sc-popup-item:hover { background:#334155; }
.sc-approval { padding:.75rem 1rem; border:1px solid rgba(124,58,237,.45);
  border-radius:8px; background:#1e1b4b; margin:.5rem 0; font-size:.9rem; }
footer { display:none !important; }
.gradio-container .block, .gradio-container .form { background:transparent !important;
  border:none !important; box-shadow:none !important; }
.gradio-container .gr-group { background:transparent !important; border:none !important; }
.gradio-container label { display:none !important; }
.sc-hidden-controls { position:fixed !important; left:-10000px !important; top:0 !important;
  width:1px !important; height:1px !important; overflow:hidden !important; opacity:0 !important; }
.sc-hidden-btn, .sc-hidden-btn.block, #sc-submit, #sc-clear, #sc-interrupt, #sc-toggle-sidebar,
#sc-cycle-mode, #sc-cycle-agent, #sc-cycle-model, #sc-cycle-think, #sc-help, #sc-whichkey,
#sc-open-picker-models, #sc-open-picker-themes, #sc-open-picker-agents, #sc-open-picker-sessions,
#sc-picker-up, #sc-picker-down, #sc-picker-confirm, #sc-picker-pick {
  position:fixed !important; left:-10000px !important; top:0 !important;
  width:1px !important; height:1px !important; opacity:0 !important;
  overflow:hidden !important; pointer-events:auto !important; }
""" + theme_css_vars()


def smolcode_header_html(*, preset: str, tier_badge: str, subtitle: str) -> str:
    return (
        f"<div class='sc-header'>{HF_LOGO_SVG}<div>"
        f"<div class='sc-title'>smol<span class='hf-accent'>code</span>"
        f"<span class='sc-badge'>preset: {preset}</span>"
        f"<span class='sc-badge'>{tier_badge}</span></div>"
        f"<div class='sc-sub'>{subtitle}</div>"
        f"</div></div>"
    )