Theme with helm-css

# A studio whose page wears helm-css, follows the launcher's theme, and is
# drawn in its own colour. One process, and no capabilities: theming needs no
# token.
id: lantern-studio
name: lantern studio
description: A page on helm-css, in both themes and its own hue.
kinds: [image]
license: MIT
repo: https://github.com/you/lantern-studio
hue: { dark: "#e8745a", light: "#b0442b" }
requires:
  os: [darwin, linux]
  arch: [arm64, amd64]
runtime:
  framework: other
  backends: [cpu]
sdk: { runtime: "^1", css: "^1" }
processes:
  - name: studio
    role: main
    cmd: "python3 server.py --port {port}"
    port: { prefer: 8767 }
    health: { path: /healthz, timeout_s: 30 }
    ui: /

"""lantern studio's server: its page, its stylesheet, and helmstudio's proxy.

The proxy is mounted at /helm/, so the page reaches helm-css, its own hue and
the theme stream from its own origin, and never holds a token.
"""

import argparse
import os
from http.server import BaseHTTPRequestHandler, ThreadingHTTPServer

from helm_runtime_sdk.proxy import Proxy

HERE = os.path.dirname(os.path.abspath(__file__))
PAGES = {"/": ("index.html", "text/html; charset=utf-8"), "/studio.css": ("studio.css", "text/css; charset=utf-8")}

# HELM_API, HELM_SDK_BASE and the hue are set by helmstudio, or by helm dev.
proxy = Proxy.from_env()


class Handler(BaseHTTPRequestHandler):
    def do_GET(self):
        if proxy.handle_http(self):
            return
        if self.path == "/healthz":
            return self.reply(200, b"ok", "text/plain")
        if self.path in PAGES:
            name, kind = PAGES[self.path]
            with open(os.path.join(HERE, name), "rb") as f:
                return self.reply(200, f.read(), kind)
        self.reply(404, b"not found", "text/plain")

    do_HEAD = do_GET

    def reply(self, status, body, kind):
        self.send_response(status)
        self.send_header("Content-Type", kind)
        self.send_header("Content-Length", str(len(body)))
        self.end_headers()
        if self.command != "HEAD":
            self.wfile.write(body)

    def log_message(self, format, *args):
        pass


def main():
    parser = argparse.ArgumentParser()
    parser.add_argument("--port", type=int, required=True)
    args = parser.parse_args()
    print("lantern studio: http://127.0.0.1:%d" % args.port, flush=True)
    ThreadingHTTPServer(("127.0.0.1", args.port), Handler).serve_forever()


if __name__ == "__main__":
    main()

// lantern studio's server in Go: the same page and stylesheet, and the
// runtime SDK's proxy mounted at /helm/.
package main

import (
	"flag"
	"fmt"
	"log"
	"net/http"

	helm "github.com/janishar/helmstudio/packages/helm-runtime-sdk/go"
)

func main() {
	port := flag.Int("port", 0, "the port helmstudio assigns")
	flag.Parse()

	mux := http.NewServeMux()
	// HELM_API, HELM_SDK_BASE and the hue are set by helmstudio, or by helm dev.
	mux.Handle(helm.ProxyPrefix, helm.Proxy(helm.ProxyFromEnv()))
	mux.HandleFunc("GET /{$}", func(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "index.html") })
	mux.HandleFunc("GET /studio.css", func(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "studio.css") })
	mux.HandleFunc("GET /healthz", func(w http.ResponseWriter, r *http.Request) { fmt.Fprintln(w, "ok") })

	addr := fmt.Sprintf("127.0.0.1:%d", *port)
	fmt.Printf("lantern studio: http://%s\n", addr)
	log.Fatal(http.ListenAndServe(addr, mux))
}

// lantern studio's server in JavaScript: the same page and stylesheet, and the
// runtime SDK's proxy mounted at /helm/.
import http from "node:http";
import { readFile } from "node:fs/promises";
import { createProxy } from "@helmstudio/runtime/proxy";

const pages = {
  "/": ["index.html", "text/html; charset=utf-8"],
  "/studio.css": ["studio.css", "text/css; charset=utf-8"],
};
const port = Number(process.argv[process.argv.indexOf("--port") + 1]);

// HELM_API, HELM_SDK_BASE and the hue are set by helmstudio, or by helm dev.
const helmProxy = createProxy();

http.createServer(async (req, res) => {
  if (await helmProxy(req, res)) return;
  const path = new URL(req.url, "http://studio").pathname;
  if (path === "/healthz") return res.writeHead(200, { "Content-Type": "text/plain" }).end("ok");
  const page = pages[path];
  if (!page) return res.writeHead(404, { "Content-Type": "text/plain" }).end("not found");
  res.writeHead(200, { "Content-Type": page[1] }).end(await readFile(page[0]));
}).listen(port, "127.0.0.1", () => console.log(`lantern studio: http://127.0.0.1:${port}`));

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>lantern studio</title>
<!-- helm-css, and this studio's hue for each theme, through the proxy -->
<link rel="stylesheet" href="/helm/sdk/v1/helm.css">
<link rel="stylesheet" href="/helm/accent.css">
<link rel="stylesheet" href="/studio.css">
<script type="module">
  import { connect, themeBridge } from "/helm/sdk/v1/helm-runtime.js";
  // Follow the launcher's System, Light and Dark as the person changes them.
  themeBridge();
  window.helm = connect();
</script>
</head>
<body class="helm-body">
  <main class="helm-main">
    <input class="prompt" placeholder="a lighthouse at dusk">
    <button class="helm-btn make">Make</button>
  </main>
</body>
</html>

/* lantern studio's own stylesheet. Every colour is a token, so it follows the
   launcher's theme; the studio's hue comes from /helm/accent.css. */
.prompt {
  width: 100%;
  padding: var(--helm-space-2) var(--helm-space-3);
  border: 1px solid var(--helm-border-strong);
  border-radius: var(--helm-radius-sm);
  background: var(--helm-ground-page);
  color: var(--helm-text-primary);
  font: var(--helm-type-body);
}

/* The studio's primary action, in its own hue. */
.make {
  background: var(--helm-studio-accent);
  color: var(--helm-on-studio-accent);
}

helm validate -strict -theme .