import { defineApp, ui } from "@colineapp/sdk/v2";

// The liquid-glass demo, hosted on Coline as a site (Coline Sites).
// main.tsx is the page; site.tsx mounts it as the public site and the home
// surface shows the same page to members inside Coline.

const DESCRIPTION =
  "Liquid Glass for the web: rim refraction, lighting and materials after iOS 27, on any element.";

export default defineApp({
  key: "liquid-glass",
  name: "Liquid Glass",
  description: DESCRIPTION,
  permissions: ["site.serve"],
  hosting: { default: "coline" },
  surfaces: {
    home: { tier: "react", entry: "main.tsx", mobile: { tier: "tree" } },
    site: {
      entry: "site.tsx",
      title: "liquid-glass",
      description: DESCRIPTION,
      routes: [{ path: "/", head: { title: "liquid-glass", description: DESCRIPTION } }],
    },
  },
  handlers: {
    renderHome: async () =>
      ui.stack([
        ui.heading("liquid-glass", { level: 1 }),
        ui.text("Open this app on desktop to try the glass.", { tone: "muted" }),
      ]),
  },
});