feat(web): Use a better theme colors

.env.example

@@ -1,2 +1 @@
 CLOUDFLARE_API_TOKEN=
-NEON_API_KEY=

apps/docs/sst-env.d.ts

@@ -0,0 +1,9 @@
+/* This file is auto-generated by SST. Do not edit. */
+/* tslint:disable */
+/* eslint-disable */
+/* deno-fmt-ignore-file */
+
+/// <reference path="../../sst-env.d.ts" />
+
+import "sst"
+export {}

infra/api.ts

@@ -0,0 +1 @@
+

infra/dns.ts

@@ -0,0 +1,5 @@
+export const domain = (() => {
+  if ($app.stage === "production") return "nestri.io"
+  if ($app.stage === "dev") return "nestri.io"
+  return `${$app.stage}.dev.nestri.io`
+})()

infra/www.ts

@@ -0,0 +1,9 @@
+import { domain } from "./dns";
+
+new sst.cloudflare.x.Astro("Web", {
+  domain,
+  path: "packages/web",
+  environment: {
+    SST_STAGE: $app.stage,
+  },
+})

package.json

@@ -11,20 +11,18 @@
   "engines": {
     "node": ">=18"
   },
-  "packageManager": "bun@1.2.4",
+  "packageManager": "bun@1.2.18",
   "private": true,
   "scripts": {
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "sso": "aws sso login --sso-session=nestri --no-browser --use-device-code"
   },
   "overrides": {
-    "@openauthjs/openauth": "0.4.3",
-    "steam-session": "1.9.3"
+    "@openauthjs/openauth": "0.4.3"
   },
   "patchedDependencies": {
     "@macaron-css/solid@1.5.3": "patches/@macaron-css%2Fsolid@1.5.3.patch",
-    "drizzle-orm@0.36.1": "patches/drizzle-orm@0.36.1.patch",
-    "steam-session@1.9.3": "patches/steam-session@1.9.3.patch"
+    "drizzle-orm@0.36.1": "patches/drizzle-orm@0.36.1.patch"
   },
   "trustedDependencies": [
     "core-js-pure",
@@ -39,4 +37,4 @@
   "dependencies": {
     "sst": "^3.17.8"
   }
-}
+}

packages/web/.astro/data-store.json

@@ -1 +1 @@
-[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.11.2","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"liveContentCollections\":false,\"csp\":false},\"legacy\":{\"collections\":false}}"]
+[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.11.2","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"site\":\"https://dev.nestri.io\",\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"index.js\",\"redirects\":false,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":\"0.0.0.0\",\"port\":4321,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/noop\",\"config\":{}},\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":false},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"liveContentCollections\":false,\"csp\":false},\"legacy\":{\"collections\":false},\"session\":{\"driver\":\"fs-lite\",\"options\":{\"base\":\"/home/wanjohi/nestri/packages/web/.astro/integrations/_astrojs_cloudflare/sessions\"}}}"]

packages/web/.gitignore

@@ -0,0 +1,24 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/

packages/web/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

packages/web/.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

packages/web/README.md

@@ -0,0 +1,47 @@
+# Astro Starter Kit: Minimal
+
+```sh
+bun create astro@latest -- --template minimal
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/minimal)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/minimal/devcontainer.json)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```text
+/
+├── public/
+├── src/
+│   └── pages/
+│       └── index.astro
+└── package.json
+```
+
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+
+Any static assets, like images, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `bun install`             | Installs dependencies                            |
+| `bun dev`             | Starts local dev server at `localhost:4321`      |
+| `bun build`           | Build your production site to `./dist/`          |
+| `bun preview`         | Preview your build locally, before deploying     |
+| `bun astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `bun astro -- --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

packages/web/astro.config.mjs

@@ -0,0 +1,32 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+import cloudflare from "@astrojs/cloudflare"
+import solidJs from "@astrojs/solid-js";
+import config from './config.mjs';
+
+import tailwindcss from "@tailwindcss/vite";
+
+// https://astro.build/config
+export default defineConfig({
+  site: config.url,
+
+  adapter: cloudflare({
+    imageService: "passthrough",
+  }),
+
+  devToolbar: {
+    enabled: false
+  },
+
+  server: {
+    host: "0.0.0.0",
+  },
+
+  integrations: [
+    solidJs()
+  ],
+
+  vite: {
+    plugins: [tailwindcss()]
+  }
+});

packages/web/config.mjs

@@ -0,0 +1,7 @@
+const stage = process.env.SST_STAGE || "dev";
+
+export default {
+  url: stage === "production"
+    ? "nestri.io"
+    : `https://${stage}.nestri.io`
+}

packages/web/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/cloudflare": "^12.6.0",
+    "@astrojs/solid-js": "^5.1.0",
+    "@fontsource-variable/geist-mono": "^5.2.6",
+    "@fontsource/geist-sans": "^5.2.5",
+    "@tailwindcss/vite": "^4.1.11",
+    "astro": "^5.11.2",
+    "tailwindcss": "^4.1.11"
+  },
+  "devDependencies": {
+    "prettier-plugin-astro": "^0.14.1",
+    "prettier-plugin-tailwindcss": "^0.6.14"
+  }
+}

packages/web/src/components/astro/HeroComponent.astro

@@ -0,0 +1,44 @@
+---
+import { Stack, Grid } from "../solidjs/index";
+
+// Define which areas are occupied by content at different breakpoints
+const occupiedAreas = {
+  xs: [
+    { startRow: 2, endRow: 6, startCol: 1, endCol: 9 }, // Hero content spans rows 2-6, cols 1-9
+  ],
+  sm: [
+    { startRow: 2, endRow: 5, startCol: 2, endCol: 8 }, // Hero content spans rows 2-5, cols 2-8
+  ],
+  smd: [
+    { startRow: 2, endRow: 4, startCol: 2, endCol: 12 }, // Hero content spans rows 2-4, cols 2-12
+  ],
+  md: [
+    { startRow: 2, endRow: 4, startCol: 2, endCol: 12 }, // Same as smd
+  ],
+  lg: [
+    { startRow: 2, endRow: 6, startCol: 2, endCol: 12 }, // Same as smd
+  ],
+};
+---
+
+<Stack
+  stackDirection="column"
+  stackJustify="flex-start"
+  stackPadding="0px"
+  stackGap="0px"
+>
+  <div class="flex justify-center items-center flex-col">
+    <Grid.Root
+      xsGridRows={1}
+      smGridRows={4}
+      mdGridRows={8}
+      xsGridColumns={1}
+      smGridColumns={8}
+      mdGridColumns={12}
+      occupiedAreas={occupiedAreas}
+    >
+      <Grid.Cross row={1} column={1} />
+      <Grid.Cross row={-1} column={-1} />
+    </Grid.Root>
+  </div>
+</Stack>

packages/web/src/components/solidjs/Grid.tsx

@@ -0,0 +1,198 @@
+import { type ParentProps, splitProps, For, type JSX } from "solid-js";
+import styles from "./index.module.css";
+
+export interface GridCell {
+  startRow: number;
+  endRow: number;
+  startCol: number;
+  endCol: number;
+}
+
+export interface GridOccupiedAreas {
+  xs?: GridCell[];
+  sm?: GridCell[];
+  smd?: GridCell[];
+  md?: GridCell[];
+  lg?: GridCell[];
+}
+
+export interface GridRootProps {
+  xsGridRows?: number;
+  smGridRows?: number;
+  mdGridRows?: number;
+  xsGridColumns?: number;
+  smGridColumns?: number;
+  mdGridColumns?: number;
+  smHeight?: string;
+  occupiedAreas?: GridOccupiedAreas;
+  class?: string;
+  style?: JSX.CSSProperties;
+}
+
+const defaultProps: GridRootProps = {
+  xsGridRows: 1,
+  smGridRows: 1,
+  mdGridRows: 1,
+  xsGridColumns: 1,
+  smGridColumns: 1,
+  mdGridColumns: 1,
+  smHeight: "calc(var(--width) / var(--grid-cols) * var(--grid-rows))",
+  occupiedAreas: {},
+}
+
+export function Root(props: ParentProps<GridRootProps>) {
+  const [local, others] = splitProps({ ...defaultProps, ...props }, [
+    "xsGridRows",
+    "smGridRows",
+    "mdGridRows",
+    "xsGridColumns",
+    "smGridColumns",
+    "mdGridColumns",
+    "smHeight",
+    "occupiedAreas",
+    "class",
+    "style",
+    "children"
+  ]);
+
+  const styleVars: Record<string, string> = {
+    ...(local.xsGridRows && { "--xs-grid-rows": local.xsGridRows.toString() }),
+    ...(local.smGridRows && { "--sm-grid-rows": local.smGridRows.toString() }),
+    ...(local.mdGridRows && { "--md-grid-rows": local.mdGridRows.toString() }),
+    ...(local.xsGridColumns && { "--xs-grid-cols": local.xsGridColumns.toString() }),
+    ...(local.smGridColumns && { "--sm-grid-cols": local.smGridColumns.toString() }),
+    ...(local.mdGridColumns && { "--md-grid-cols": local.mdGridColumns.toString() }),
+    ...(local.smHeight && { "--sm-height": local.smHeight }),
+  }
+
+  const styleStr = Object.entries({ ...styleVars, ...local.style })
+    .filter(([, v]) => v !== undefined)
+    .map(([k, v]) => `${k}: ${v}`)
+    .join("; ");
+
+  // Helper function to check if a cell is occupied
+  const isCellOccupied = (breakpoint: keyof GridOccupiedAreas, col: number, row: number): boolean => {
+    const areas = local.occupiedAreas?.[breakpoint] || [];
+    return areas.some(area =>
+      col >= area.startCol && col < area.endCol &&
+      row >= area.startRow && row < area.endRow
+    );
+  };
+
+  // Helper function to determine border styles for a cell
+  const getCellBorderStyle = (
+    breakpoint: keyof GridOccupiedAreas,
+    col: number,
+    row: number,
+    maxCols: number,
+    maxRows: number
+  ) => {
+    const isOccupied = isCellOccupied(breakpoint, col, row);
+    const isLastCol = col === maxCols;
+    const isLastRow = row === maxRows;
+
+    // Check if the cell to the right is also occupied (to remove internal borders)
+    const rightCellOccupied = !isLastCol && isCellOccupied(breakpoint, col + 1, row);
+    // Check if the cell below is also occupied (to remove internal borders)
+    const bottomCellOccupied = !isLastRow && isCellOccupied(breakpoint, col, row + 1);
+
+    return {
+      // Remove right border only if both current and right cell are occupied
+      ...(isOccupied && rightCellOccupied && { "border-right": "none" }),
+      // Remove bottom border only if both current and bottom cell are occupied
+      ...(isOccupied && bottomCellOccupied && { "border-bottom": "none" }),
+    };
+  };
+
+  // Render grid guides for a specific breakpoint
+  const renderGridGuides = (
+    breakpoint: keyof GridOccupiedAreas,
+    className: string,
+    cols: number,
+    rows: number
+  ) => (
+    <div class={styles.grid_gridGuides} aria-hidden="true" data-grid-guides="true">
+      <For each={Array.from({ length: rows })}>
+        {(_, rowIndex) => (
+          <For each={Array.from({ length: cols })}>
+            {(_, colIndex) => {
+              const row = rowIndex() + 1;
+              const col = colIndex() + 1;
+              const borderStyle = getCellBorderStyle(breakpoint, col, row, cols, rows);
+
+              return (
+                <div
+                  aria-hidden="true"
+                  class={`${styles.grid_gridGuide} ${className}`}
+                  style={{
+                    "--x": col,
+                    "--y": row,
+                    ...borderStyle
+                  }}
+                />
+              );
+            }}
+          </For>
+        )}
+      </For>
+    </div>
+  );
+
+  return (
+    <section
+      class={`${styles.grid_system} ${styles.grid_grid} ${local.class || ""}`}
+      data-grid=""
+      style={styleStr}
+      {...others}
+    >
+      {local.children}
+
+      {/* XS Grid Guides */}
+      {renderGridGuides("xs", styles.grid_xsGuide, local.xsGridColumns || 8, local.xsGridRows || 6)}
+
+      {/* SM Grid Guides */}
+      {renderGridGuides("sm", styles.grid_smGuide, local.smGridColumns || 8, local.smGridRows || 5)}
+
+      {/* SMD Grid Guides */}
+      {renderGridGuides("smd", styles.grid_smdGuide, local.mdGridColumns || 12, local.mdGridRows || 4)}
+
+      {/* MD Grid Guides */}
+      {renderGridGuides("md", styles.grid_mdGuide, local.mdGridColumns || 12, local.mdGridRows || 4)}
+
+      {/* LG Grid Guides */}
+      {renderGridGuides("lg", styles.grid_lgGuide, local.mdGridColumns || 12, local.mdGridRows || 4)}
+    </section>
+  );
+}
+
+
+interface GridCrossProps {
+  row: number;
+  column: number;
+}
+
+export function Cross(props: GridCrossProps) {
+  return (
+    <div style={{
+      "--cross-row": props.row,
+      "--cross-column": props.column,
+    }} class={styles.grid_cross}>
+      <div
+        style={{
+          "border-right-width": "var(--guide-width)",
+          "width": "var(--cross-half-size)",
+          "height": "var(--cross-size)"
+        }}
+        class={styles.grid_crossLine} />
+      <div
+        style={{
+          "border-bottom-width": "var(--guide-width)",
+          "width": "var(--cross-size)",
+          "height": "var(--cross-half-size)"
+        }}
+        class={styles.grid_crossLine} />
+    </div>
+  )
+}
+
+export default { Cross, Root }

packages/web/src/components/solidjs/Stack.tsx

@@ -0,0 +1,140 @@
+import { type JSX, splitProps } from "solid-js";
+import styles from "./index.module.css";
+
+export interface StackProps {
+  stackFlex?: string;
+  stackDirection?: "column" | "row" | "row-reverse" | "column-reverse";
+  stackAlign?: "start" | "end" | "center" | "stretch" | "baseline";
+  stackJustify?: "center" | "space-between" | "space-around" | "space-evenly" | "flex-start" | "flex-end";
+  stackPadding?: string;
+  stackGap?: string;
+  smStackGap?: string;
+  mdStackGap?: string;
+  lgStackGap?: string;
+  xlStackGap?: string;
+  smStackDirection?: string;
+  smStackAlign?: string;
+  smStackJustify?: string;
+  smStackPadding?: string;
+  mdStackDirection?: string;
+  mdStackAlign?: string;
+  mdStackJustify?: string;
+  mdStackPadding?: string;
+  lgStackDirection?: string;
+  lgStackAlign?: string;
+  lgStackJustify?: string;
+  lgStackPadding?: string;
+  xlStackDirection?: string;
+  xlStackAlign?: string;
+  xlStackJustify?: string;
+  xlStackPadding?: string;
+  children?: JSX.Element | JSX.Element[];
+  class?: string;
+}
+
+const defaultProps: Omit<StackProps, "children" | "class"> = {
+  stackFlex: "initial",
+  stackDirection: "row",
+  stackAlign: "stretch",
+  stackJustify: "center",
+  stackPadding: "0px",
+  stackGap: "16px",
+  smStackGap: "16px",
+  mdStackGap: "24px",
+  lgStackGap: "24px",
+  xlStackGap: "24px",
+  smStackDirection: undefined,
+  smStackAlign: undefined,
+  smStackJustify: undefined,
+  smStackPadding: undefined,
+  mdStackDirection: undefined,
+  mdStackAlign: undefined,
+  mdStackJustify: undefined,
+  mdStackPadding: undefined,
+  lgStackDirection: undefined,
+  lgStackAlign: undefined,
+  lgStackJustify: undefined,
+  lgStackPadding: undefined,
+  xlStackDirection: undefined,
+  xlStackAlign: undefined,
+  xlStackJustify: undefined,
+  xlStackPadding: undefined,
+};
+
+export function Stack(props: StackProps) {
+  const [local, others] = splitProps({ ...defaultProps, ...props }, [
+    "stackFlex",
+    "stackDirection",
+    "stackAlign",
+    "stackJustify",
+    "stackPadding",
+    "stackGap",
+    "smStackGap",
+    "mdStackGap",
+    "lgStackGap",
+    "xlStackGap",
+    "smStackDirection",
+    "smStackAlign",
+    "smStackJustify",
+    "smStackPadding",
+    "mdStackDirection",
+    "mdStackAlign",
+    "mdStackJustify",
+    "mdStackPadding",
+    "lgStackDirection",
+    "lgStackAlign",
+    "lgStackJustify",
+    "lgStackPadding",
+    "xlStackDirection",
+    "xlStackAlign",
+    "xlStackJustify",
+    "xlStackPadding",
+    "children",
+    "class"
+  ]);
+
+  const styleVars: Record<string, string | undefined> = {
+    "--stack-flex": local.stackFlex,
+    "--stack-direction": local.stackDirection,
+    "--stack-align": local.stackAlign,
+    "--stack-justify": local.stackJustify,
+    "--stack-gap": local.stackGap,
+    "--stack-padding": local.stackPadding,
+    "--sm-stack-gap": local.smStackGap,
+    "--md-stack-gap": local.mdStackGap,
+    "--lg-stack-gap": local.lgStackGap,
+    "--xl-stack-gap": local.xlStackGap,
+    ...(local.smStackDirection && { "--sm-stack-direction": local.smStackDirection }),
+    ...(local.smStackAlign && { "--sm-stack-align": local.smStackAlign }),
+    ...(local.smStackJustify && { "--sm-stack-justify": local.smStackJustify }),
+    ...(local.smStackPadding && { "--sm-stack-padding": local.smStackPadding }),
+    ...(local.mdStackDirection && { "--md-stack-direction": local.mdStackDirection }),
+    ...(local.mdStackAlign && { "--md-stack-align": local.mdStackAlign }),
+    ...(local.mdStackJustify && { "--md-stack-justify": local.mdStackJustify }),
+    ...(local.mdStackPadding && { "--md-stack-padding": local.mdStackPadding }),
+    ...(local.lgStackDirection && { "--lg-stack-direction": local.lgStackDirection }),
+    ...(local.lgStackAlign && { "--lg-stack-align": local.lgStackAlign }),
+    ...(local.lgStackJustify && { "--lg-stack-justify": local.lgStackJustify }),
+    ...(local.lgStackPadding && { "--lg-stack-padding": local.lgStackPadding }),
+    ...(local.xlStackDirection && { "--xl-stack-direction": local.xlStackDirection }),
+    ...(local.xlStackAlign && { "--xl-stack-align": local.xlStackAlign }),
+    ...(local.xlStackJustify && { "--xl-stack-justify": local.xlStackJustify }),
+    ...(local.xlStackPadding && { "--xl-stack-padding": local.xlStackPadding }),
+  };
+
+  const styleStr = Object.entries(styleVars)
+    .filter(([, v]) => v !== undefined)
+    .map(([k, v]) => `${k}: ${v}`)
+    .join("; ");
+
+  return (
+    <div
+      class={`${styles.stack} ${local.stackPadding !== "0px" ? styles.stackPadding : ""} ${local.class ? ` ${local.class}` : ""}`}
+      style={styleStr}
+      {...others}
+    >
+      {local.children}
+    </div>
+  );
+}
+

packages/web/src/components/solidjs/index.module.css

@@ -0,0 +1,315 @@
+.stack {
+  display: flex;
+  flex-direction: var(--stack-direction, column);
+  align-items: var(--stack-align, stretch);
+  justify-content: var(--stack-justify, flex-start);
+  flex: var(--stack-flex, initial);
+  gap: var(--stack-gap, 0);
+}
+
+.stack_padding {
+  padding: var(--stack-padding, 0);
+}
+
+@media screen and (max-width: 600px) {
+  .stack {
+    --stack-direction: var(--sm-stack-direction);
+    --stack-align: var(--sm-stack-align);
+    --stack-justify: var(--sm-stack-justify);
+    --stack-padding: var(--sm-stack-padding);
+    --stack-gap: var(--sm-stack-gap);
+  }
+}
+
+@media screen and (min-width: 601px) and (max-width: 960px) {
+  .stack {
+    --stack-direction: var(--md-stack-direction, var(--sm-stack-direction));
+    --stack-align: var(--md-stack-align, var(--sm-stack-align));
+    --stack-justify: var(--md-stack-justify, var(--sm-stack-justify));
+    --stack-padding: var(--md-stack-padding, var(--sm-stack-padding));
+    --stack-gap: var(--md-stack-gap, var(--sm-stack-gap));
+  }
+}
+
+@media screen and (min-width: 961px) and (max-width: 1200px) {
+  .stack {
+    --stack-direction: var(--lg-stack-direction,
+        var(--md-stack-direction, var(--sm-stack-direction)));
+    --stack-align: var(--lg-stack-align,
+        var(--md-stack-align, var(--sm-stack-align)));
+    --stack-justify: var(--lg-stack-justify,
+        var(--md-stack-justify, var(--sm-stack-justify)));
+    --stack-padding: var(--lg-stack-padding,
+        var(--md-stack-padding, var(--sm-stack-padding)));
+    --stack-gap: var(--lg-stack-gap,
+        var(--md-stack-gap, var(--sm-stack-gap)));
+  }
+}
+
+@media screen and (min-width: 1201px) {
+  .stack {
+    --stack-direction: var(--xl-stack-direction,
+        var(--lg-stack-direction,
+          var(--md-stack-direction, var(--sm-stack-direction))));
+    --stack-align: var(--xl-stack-align,
+        var(--lg-stack-align, var(--md-stack-align, var(--sm-stack-align))));
+    --stack-justify: var(--xl-stack-justify,
+        var(--lg-stack-justify,
+          var(--md-stack-justify, var(--sm-stack-justify))));
+    --stack-padding: var(--xl-stack-padding,
+        var(--lg-stack-padding,
+          var(--md-stack-padding, var(--sm-stack-padding))));
+    --stack-gap: var(--xl-stack-gap,
+        var(--lg-stack-gap, var(--md-stack-gap, var(--sm-stack-gap))));
+  }
+}
+
+.dark .grid_system {
+  --guide-color: var(--color-gray-200);
+}
+
+.grid_system {
+  --max-width: 1080px;
+  --min-width: 368px;
+  --guide-width: 1.5px;
+  --horizontal-margin: 2rem;
+  --grid-system-width: 100vw;
+  --guide-color: var(--color-gray-400);
+  --cross-color: var(--color-orange-600);
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  max-width: var(--max-width);
+  min-width: var(--min-width);
+  margin-top: var(--guide-width);
+  border-bottom: var(--guide-width) solid var(--guide-color);
+  margin-left: var(--guide-width);
+}
+
+.grid_system::before {
+  position: absolute;
+  inset: 0;
+  left: calc(-1 * var(--guide-width));
+  top: calc(-1 * var(--guide-width));
+  content: "";
+  border: var(--guide-width) solid var(--guide-color);
+  pointer-events: none;
+}
+
+.grid_grid {
+  --width: clamp(calc(var(--min-width) - var(--guide-width)), calc(var(--grid-system-width) - var(--guide-width) - (var(--horizontal-margin) * 2)), calc(var(--max-width) - var(--guide-width)));
+  width: var(--width);
+  height: var(--height);
+  display: grid;
+  position: relative;
+  --column-width: calc(var(--width) / var(--grid-cols));
+  --row-height: calc(var(--height) / var(--grid-rows));
+  grid-template-columns: repeat(var(--grid-cols), var(--column-width));
+  grid-template-rows: repeat(var(--grid-rows), var(--row-height));
+}
+
+.grid_cross {
+  width: -moz-fit-content;
+  width: fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  pointer-events: none;
+  position: absolute;
+  grid-column-start: var(--cross-column);
+  grid-row-start: var(--cross-row);
+  z-index: 2;
+  --cross-size: 21px;
+  --cross-half-size: calc((var(--cross-size) / 2) + var(--guide-width) - 0.5px);
+  inset: calc(var(--cross-half-size) * -1);
+}
+
+.grid_crossLine {
+  position: absolute;
+  border: var(--guide-width) solid var(--cross-color);
+  border-width: 0;
+}
+
+.grid_gridGuides {
+  pointer-events: none;
+  z-index: 1;
+  display: contents;
+}
+
+.grid_headingGrid {
+  grid-template-columns: calc(var(--column-width) / 4) 1fr calc(var(--column-width) / 4) !important;
+  text-wrap: balance;
+}
+
+.grid_gridGuide {
+  inset: 0;
+  position: absolute;
+  grid-column-start: var(--x);
+  grid-row-start: var(--y);
+  grid-column-end: span 1;
+  grid-row-end: span 1;
+  border: var(--guide-width) solid var(--guide-color);
+  border-left: none;
+  border-top: none;
+}
+
+@media screen and (max-width: 400px) {
+  .grid_system {
+    --horizontal-margin: 1rem
+  }
+
+  .grid_grid {
+    --height: var(--xs-height, var(--sm-height));
+    --grid-rows: var(--xs-grid-rows, var(--sm-grid-rows));
+    --grid-cols: var(--xs-grid-cols, var(--sm-grid-cols));
+    --cell-padding: 24px;
+    --grid-divider-gap: calc(72px - var(--cell-padding))
+  }
+
+  .grid_block {
+    --grid-row: var(--xs-grid-row, var(--sm-grid-row));
+    --grid-column: var(--xs-grid-column, var(--sm-grid-column));
+    --block-display: var(--xs-block-display, var(--sm-block-display));
+    --cell-rows: var(--xs-cell-rows, var(--sm-cell-rows));
+    --cell-columns: var(--xs-cell-columns, var(--sm-cell-columns))
+  }
+
+  .grid_cross {
+    --cross-size: 11px;
+    --cross-row: var(--xs-cross-row, var(--sm-cross-row));
+    --cross-column: var(--xs-cross-column, var(--sm-cross-column))
+  }
+
+  .grid_lgGuide,
+  .grid_mdGuide,
+  .grid_smGuide,
+  .grid_smdGuide {
+    display: none
+  }
+}
+
+@media screen and (min-width: 401px) and (max-width:600px) {
+  .grid_system {
+    --horizontal-margin: 1rem
+  }
+
+  .grid_grid {
+    --height: var(--sm-height);
+    --grid-rows: var(--sm-grid-rows);
+    --grid-cols: var(--sm-grid-cols);
+    --cell-padding: 24px;
+    --grid-divider-gap: calc(72px - var(--cell-padding))
+  }
+
+  .grid_block {
+    --grid-row: var(--sm-grid-row);
+    --grid-column: var(--sm-grid-column);
+    --cell-rows: var(--sm-cell-rows);
+    --cell-columns: var(--sm-cell-columns);
+    --block-display: var(--sm-block-display)
+  }
+
+  .grid_cross {
+    --cross-size: 11px;
+    --cross-row: var(--sm-cross-row);
+    --cross-column: var(--sm-cross-column)
+  }
+
+  .grid_lgGuide,
+  .grid_mdGuide,
+  .grid_smdGuide,
+  .grid_xsGuide {
+    display: none
+  }
+}
+
+@media screen and (min-width: 601px) and (max-width:768px) {
+  .grid_grid {
+    --height: var(--smd-height, var(--md-height, var(--sm-height)));
+    --grid-rows: var(--smd-grid-rows, var(--md-grid-rows, var(--sm-grid-rows)));
+    --grid-cols: var(--smd-grid-cols, var(--md-grid-cols, var(--sm-grid-cols)));
+    --cell-padding: 40px;
+    --grid-divider-gap: calc(120px - var(--cell-padding))
+  }
+
+  .grid_block {
+    --grid-row: var(--smd-grid-row, var(--md-grid-row, var(--sm-grid-row)));
+    --grid-column: var(--smd-grid-column, var(--md-grid-column, var(--sm-grid-column)));
+    --cell-rows: var(--smd-cell-rows, var(--md-cell-rows, var(--sm-cell-rows)));
+    --cell-columns: var(--smd-cell-columns, var(--md-cell-columns, var(--sm-cell-columns)));
+    --block-display: var(--smd-block-display)
+  }
+
+  .grid_cross {
+    --cross-size: 15px;
+    --cross-row: var(--smd-cross-row, var(--md-cross-row, var(--sm-cross-row)));
+    --cross-column: var(--smd-cross-column, var(--md-cross-column, var(--sm-cross-column)))
+  }
+
+  .grid_lgGuide,
+  .grid_mdGuide,
+  .grid_smGuide,
+  .grid_xsGuide {
+    display: none
+  }
+}
+
+@media screen and (min-width: 769px) and (max-width:960px) {
+  .grid_grid {
+    --height: var(--md-height, var(--smd-height, var(--sm-height)));
+    --grid-rows: var(--md-grid-rows, var(--smd-grid-rows, var(--sm-grid-rows)));
+    --grid-cols: var(--md-grid-cols, var(--smd-grid-cols, var(--sm-grid-cols)));
+    --cell-padding: 40px;
+    --grid-divider-gap: calc(140px - var(--cell-padding))
+  }
+
+  .grid_block {
+    --grid-row: var(--md-grid-row, var(--smd-grid-row, var(--sm-grid-row)));
+    --grid-column: var(--md-grid-column, var(--smd-grid-column, var(--sm-grid-column)));
+    --cell-rows: var(--md-cell-rows, var(--smd-cell-rows, var(--sm-cell-rows)));
+    --cell-columns: var(--md-cell-columns, var(--smd-cell-columns, var(--sm-cell-columns)));
+    --block-display: var(--md-block-display, var(--smd-block-display))
+  }
+
+  .grid_cross {
+    --cross-size: 15px;
+    --cross-row: var(--md-cross-row, var(--smd-cross-row, var(--sm-cross-row)));
+    --cross-column: var(--md-cross-column, var(--smd-cross-column, var(--sm-cross-column)))
+  }
+
+  .grid_lgGuide,
+  .grid_smGuide,
+  .grid_smdGuide,
+  .grid_xsGuide {
+    display: none
+  }
+}
+
+@media screen and (min-width: 961px) {
+  .grid_grid {
+    --height: var(--lg-height, var(--md-height, var(--smd-height, var(--sm-height))));
+    --grid-rows: var(--lg-grid-rows, var(--md-grid-rows, var(--smd-grid-rows, var(--sm-grid-rows))));
+    --grid-cols: var(--lg-grid-cols, var(--md-grid-cols, var(--smd-grid-cols, var(--sm-grid-cols))));
+    --cell-padding: 48px;
+    --grid-divider-gap: calc(140px - var(--cell-padding))
+  }
+
+  .grid_block {
+    --grid-row: var(--lg-grid-row, var(--md-grid-row, var(--smd-grid-row, var(--sm-grid-row))));
+    --grid-column: var(--lg-grid-column, var(--md-grid-column, var(--smd-grid-column, var(--sm-grid-column))));
+    --cell-rows: var(--lg-cell-rows, var(--md-cell-rows, var(--smd-cell-rows, var(--sm-cell-rows))));
+    --cell-columns: var(--lg-cell-columns, var(--md-cell-columns, var(--smd-cell-columns, var(--sm-cell-columns))));
+    --block-display: var(--smd-block-display)
+  }
+
+  .grid_cross {
+    --cross-row: var(--lg-cross-row, var(--md-cross-row, var(--smd-cross-row, var(--sm-cross-row))));
+    --cross-column: var(--lg-cross-column, var(--md-cross-column, var(--smd-cross-column, var(--sm-cross-column))));
+  }
+
+  .grid_mdGuide,
+  .grid_smGuide,
+  .grid_smdGuide,
+  .grid_xsGuide {
+    display: none
+  }
+}

packages/web/src/components/solidjs/index.ts

@@ -0,0 +1,2 @@
+export * from "./Stack"
+export { default as Grid } from "./Grid"

packages/web/src/layouts/Layout.astro

@@ -0,0 +1,55 @@
+---
+import "../styles/global.css";
+import "@fontsource/geist-sans/400.css";
+import "@fontsource/geist-sans/500.css";
+import "@fontsource/geist-sans/600.css";
+import "@fontsource/geist-sans/700.css";
+import "@fontsource/geist-sans/800.css";
+import "@fontsource/geist-sans/900.css";
+import "@fontsource-variable/geist-mono";
+---
+
+<!doctype html>
+<html class="dark" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="color-scheme" content="dark light" />
+    <meta
+      name="theme-color"
+      media="(prefers-color-scheme: light)"
+      content="hsl(0 0% 100%);"
+    />
+    <meta
+      name="theme-color"
+      media="(prefers-color-scheme: dark)"
+      content=" hsla(0, 0%, 4%, 1);"
+    />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} />
+    <title>Nestri - Stream apps and games from the cloud</title>
+  </head>
+  <body class="bg-background-200 text-gray-1000">
+    <slot />
+  </body>
+</html>
+
+<style>
+  *,
+  *:before,
+  *:after {
+    box-sizing: border-box;
+  }
+  html,
+  body {
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    text-rendering: optimizeLegibility;
+    text-size-adjust: 100%;
+    font-family: "Geist Sans", sans-serif;
+    -webkit-font-smoothing: antialiased;
+  }
+</style>

packages/web/src/pages/index.astro

@@ -0,0 +1,10 @@
+---
+import Layout from "../layouts/Layout.astro";
+import HeroComponent from "../components/astro/HeroComponent.astro";
+---
+
+<Layout>
+  <main class="py-20">
+    <HeroComponent />
+  </main>
+</Layout>

packages/web/src/styles/global.css

@@ -0,0 +1,322 @@
+@import "tailwindcss";
+
+:root {
+  --color-gray-100: hsl(0 0% 95%);
+  --color-gray-200: hsl(0 0% 92%);
+  --color-gray-300: hsl(0 0% 90%);
+  --color-gray-400: hsl(0 0% 92%);
+  --color-gray-500: hsl(0 0% 79%);
+  --color-gray-600: hsl(0 0% 66%);
+  --color-gray-700: hsl(0 0% 56%);
+  --color-gray-800: hsl(0 0% 49%);
+  --color-gray-900: hsl(0 0% 40%);
+  --color-gray-1000: hsl(0 0% 9%);
+
+  --color-blue-100: hsl(212 100% 97%);
+  --color-blue-200: hsl(210 100% 96%);
+  --color-blue-300: hsl(210 100% 94%);
+  --color-blue-400: hsl(209 100% 90%);
+  --color-blue-500: hsl(209 100% 80%);
+  --color-blue-600: hsl(208 100% 66%);
+  --color-blue-700: hsl(212 100% 48%);
+  --color-blue-800: hsl(212 100% 41%);
+  --color-blue-900: hsl(211 100% 42%);
+  --color-blue-1000: hsl(211 100% 15%);
+
+  --color-red-100: hsl(0 100% 97%);
+  --color-red-200: hsl(0 100% 96%);
+  --color-red-300: hsl(0 100% 95%);
+  --color-red-400: hsl(0 90% 92%);
+  --color-red-500: hsl(0 82% 85%);
+  --color-red-600: hsl(359 90% 71%);
+  --color-red-700: hsl(358 75% 59%);
+  --color-red-800: hsl(358 70% 52%);
+  --color-red-900: hsl(358 66% 48%);
+  --color-red-1000: hsl(355 49% 15%);
+
+  --color-amber-100: hsl(39 100% 95%);
+  --color-amber-200: hsl(44 100% 92%);
+  --color-amber-300: hsl(43 96% 90%);
+  --color-amber-400: hsl(42 100% 78%);
+  --color-amber-500: hsl(38 100% 71%);
+  --color-amber-600: hsl(36 90% 62%);
+  --color-amber-700: hsl(39 100% 57%);
+  --color-amber-800: hsl(35 100% 52%);
+  --color-amber-900: hsl(30 100% 32%);
+  --color-amber-1000: hsl(20 79% 17%);
+
+  --color-green-100: hsl(120 60% 96%);
+  --color-green-200: hsl(120 60% 95%);
+  --color-green-300: hsl(120 60% 91%);
+  --color-green-400: hsl(122 60% 86%);
+  --color-green-500: hsl(124 60% 75%);
+  --color-green-600: hsl(125 60% 64%);
+  --color-green-700: hsl(131 41% 46%);
+  --color-green-800: hsl(132 43% 39%);
+  --color-green-900: hsl(133 50% 32%);
+  --color-green-1000: hsl(128 29% 15%);
+
+  --color-teal-100: hsl(169 70% 96%);
+  --color-teal-200: hsl(167 70% 94%);
+  --color-teal-300: hsl(168 70% 90%);
+  --color-teal-400: hsl(170 70% 85%);
+  --color-teal-500: hsl(170 70% 72%);
+  --color-teal-600: hsl(170 70% 57%);
+  --color-teal-700: hsl(173 80% 36%);
+  --color-teal-800: hsl(173 83% 30%);
+  --color-teal-900: hsl(174 91% 25%);
+  --color-teal-1000: hsl(171 80% 13%);
+
+  --color-purple-100: hsl(276 100% 97%);
+  --color-purple-200: hsl(277 87% 97%);
+  --color-purple-300: hsl(274 78% 95%);
+  --color-purple-400: hsl(276 71% 92%);
+  --color-purple-500: hsl(274 70% 82%);
+  --color-purple-600: hsl(273 72% 73%);
+  --color-purple-700: hsl(272 51% 54%);
+  --color-purple-800: hsl(272 47% 45%);
+  --color-purple-900: hsl(274 71% 43%);
+  --color-purple-1000: hsl(276 100% 15%);
+
+  --color-pink-100: hsl(330 100% 96%);
+  --color-pink-200: hsl(340 90% 96%);
+  --color-pink-300: hsl(340 82% 94%);
+  --color-pink-400: hsl(341 76% 91%);
+  --color-pink-500: hsl(340 75% 84%);
+  --color-pink-600: hsl(341 75% 73%);
+  --color-pink-700: hsl(336 80% 58%);
+  --color-pink-800: hsl(336 74% 51%);
+  --color-pink-900: hsl(336 65% 45%);
+  --color-pink-1000: hsl(333 74% 15%);
+
+  --color-gray-alpha-100: rgba(0, 0, 0, 0.05);
+  --color-gray-alpha-200: hsla(0, 0%, 0%, 0.081);
+  --color-gray-alpha-300: hsla(0, 0%, 0%, 0.1);
+  --color-gray-alpha-400: hsla(0, 0%, 0%, 0.08);
+  --color-gray-alpha-500: hsla(0, 0%, 0%, 0.21);
+  --color-gray-alpha-600: hsla(0, 0%, 0%, 0.34);
+  --color-gray-alpha-700: hsla(0, 0%, 0%, 0.44);
+  --color-gray-alpha-800: hsla(0, 0%, 0%, 0.51);
+  --color-gray-alpha-900: hsla(0, 0%, 0%, 0.61);
+  --color-gray-alpha-1000: hsla(0, 0%, 0%, 0.91);
+
+  --color-background-100: hsl(0 0% 95%);
+  --color-background-200: hsl(0 0% 100%);
+}
+
+.dark {
+  --color-gray-100: hsl(0 0% 10%);
+  --color-gray-200: hsl(0 0% 12%);
+  --color-gray-300: hsl(0 0% 16%);
+  --color-gray-400: hsl(0 0% 18%);
+  --color-gray-500: hsl(0 0% 27%);
+  --color-gray-600: hsl(0 0% 53%);
+  --color-gray-700: hsl(0 0% 56%);
+  --color-gray-800: hsl(0 0% 49%);
+  --color-gray-900: hsl(0 0% 63%);
+  --color-gray-1000: hsl(0 0% 93%);
+
+  --color-blue-100: hsl(216 50% 12%);
+  --color-blue-200: hsl(214 59% 15%);
+  --color-blue-300: hsl(213 71% 20%);
+  --color-blue-400: hsl(212 78% 23%);
+  --color-blue-500: hsl(211 86% 27%);
+  --color-blue-600: hsl(206 100% 50%);
+  --color-blue-700: hsl(212 100% 48%);
+  --color-blue-800: hsl(212 100% 41%);
+  --color-blue-900: hsl(210 100% 66%);
+  --color-blue-1000: hsl(206 100% 96%);
+
+  --color-red-100: hsl(357 37% 12%);
+  --color-red-200: hsl(357 46% 16%);
+  --color-red-300: hsl(356 54% 22%);
+  --color-red-400: hsl(357 55% 26%);
+  --color-red-500: hsl(357 60% 32%);
+  --color-red-600: hsl(358 75% 59%);
+  --color-red-700: hsl(358 75% 59%);
+  --color-red-800: hsl(358 69% 52%);
+  --color-red-900: hsl(358 100% 69%);
+  --color-red-1000: hsl(353 90% 96%);
+
+  --color-amber-100: hsl(35 100% 8%);
+  --color-amber-200: hsl(32 100% 10%);
+  --color-amber-300: hsl(33 100% 15%);
+  --color-amber-400: hsl(35 100% 17%);
+  --color-amber-500: hsl(35 91% 22%);
+  --color-amber-600: hsl(39 85% 49%);
+  --color-amber-700: hsl(39 100% 57%);
+  --color-amber-800: hsl(35 100% 52%);
+  --color-amber-900: hsl(39 90% 50%);
+  --color-amber-1000: hsl(40 94% 93%);
+
+  --color-green-100: hsl(136 50% 9%);
+  --color-green-200: hsl(137 50% 12%);
+  --color-green-300: hsl(136 50% 14%);
+  --color-green-400: hsl(135 70% 16%);
+  --color-green-500: hsl(135 70% 23%);
+  --color-green-600: hsl(135 70% 34%);
+  --color-green-700: hsl(131 41% 46%);
+  --color-green-800: hsl(132 43% 39%);
+  --color-green-900: hsl(131 43% 57%);
+  --color-green-1000: hsl(136 73% 94%);
+
+  --color-teal-100: hsl(169 78% 7%);
+  --color-teal-200: hsl(170 74% 9%);
+  --color-teal-300: hsl(171 75% 13%);
+  --color-teal-400: hsl(171 85% 13%);
+  --color-teal-500: hsl(172 85% 20%);
+  --color-teal-600: hsl(172 85% 32%);
+  --color-teal-700: hsl(173 80% 36%);
+  --color-teal-800: hsl(173 83% 30%);
+  --color-teal-900: hsl(174 90% 41%);
+  --color-teal-1000: hsl(166 71% 93%);
+
+  --color-purple-100: hsl(283 30% 12%);
+  --color-purple-200: hsl(281 38% 16%);
+  --color-purple-300: hsl(279 44% 23%);
+  --color-purple-400: hsl(277 46% 28%);
+  --color-purple-500: hsl(274 49% 35%);
+  --color-purple-600: hsl(272 51% 54%);
+  --color-purple-700: hsl(272 51% 54%);
+  --color-purple-800: hsl(272 47% 45%);
+  --color-purple-900: hsl(275 80% 71%);
+  --color-purple-1000: hsl(281 73% 96%);
+
+  --color-pink-100: hsl(335 32% 12%);
+  --color-pink-200: hsl(335 43% 16%);
+  --color-pink-300: hsl(335 47% 21%);
+  --color-pink-400: hsl(335 51% 22%);
+  --color-pink-500: hsl(335 57% 27%);
+  --color-pink-600: hsl(336 75% 40%);
+  --color-pink-700: hsl(336 80% 58%);
+  --color-pink-800: hsl(336 74% 51%);
+  --color-pink-900: hsl(341 90% 67%);
+  --color-pink-1000: hsl(333 90% 96%);
+
+  --color-gray-alpha-100: rgba(255, 255, 255, 0.06);
+  --color-gray-alpha-200: hsla(0, 0%, 100%, 0.09);
+  --color-gray-alpha-300: hsla(0, 0%, 100%, 0.13);
+  --color-gray-alpha-400: hsla(0, 0%, 100%, 0.14);
+  --color-gray-alpha-500: hsla(0, 0%, 100%, 0.24);
+  --color-gray-alpha-600: hsla(0, 0%, 100%, 0.51);
+  --color-gray-alpha-700: hsla(0, 0%, 100%, 0.54);
+  --color-gray-alpha-800: hsla(0, 0%, 100%, 0.47);
+  --color-gray-alpha-900: hsla(0, 0%, 100%, 0.61);
+  --color-gray-alpha-1000: hsla(0, 0%, 100%, 0.92);
+
+  --color-background-100: hsla(0, 0%, 10%, 1);
+  --color-background-200: hsla(0, 0%, 4%, 1);
+}
+
+@theme {
+  --color-gray-100: var(--color-gray-100);
+  --color-gray-200: var(--color-gray-200);
+  --color-gray-300: var(--color-gray-300);
+  --color-gray-400: var(--color-gray-400);
+  --color-gray-500: var(--color-gray-500);
+  --color-gray-600: var(--color-gray-600);
+  --color-gray-700: var(--color-gray-700);
+  --color-gray-800: var(--color-gray-800);
+  --color-gray-900: var(--color-gray-900);
+  --color-gray-1000: var(--color-gray-1000);
+
+  --color-blue-100: var(--color-blue-100);
+  --color-blue-200: var(--color-blue-200);
+  --color-blue-300: var(--color-blue-300);
+  --color-blue-400: var(--color-blue-400);
+  --color-blue-500: var(--color-blue-500);
+  --color-blue-600: var(--color-blue-600);
+  --color-blue-700: var(--color-blue-700);
+  --color-blue-800: var(--color-blue-800);
+  --color-blue-900: var(--color-blue-900);
+  --color-blue-1000: var(--color-blue-1000);
+
+  --color-red-100: var(--color-red-100);
+  --color-red-200: var(--color-red-200);
+  --color-red-300: var(--color-red-300);
+  --color-red-400: var(--color-red-400);
+  --color-red-500: var(--color-red-500);
+  --color-red-600: var(--color-red-600);
+  --color-red-700: var(--color-red-700);
+  --color-red-800: var(--color-red-800);
+  --color-red-900: var(--color-red-900);
+  --color-red-1000: var(--color-red-1000);
+
+  --color-amber-100: var(--color-amber-100);
+  --color-amber-200: var(--color-amber-200);
+  --color-amber-300: var(--color-amber-300);
+  --color-amber-400: var(--color-amber-400);
+  --color-amber-500: var(--color-amber-500);
+  --color-amber-600: var(--color-amber-600);
+  --color-amber-700: var(--color-amber-700);
+  --color-amber-800: var(--color-amber-800);
+  --color-amber-900: var(--color-amber-900);
+  --color-amber-1000: var(--color-amber-1000);
+
+  --color-green-100: var(--color-green-100);
+  --color-green-200: var(--color-green-200);
+  --color-green-300: var(--color-green-300);
+  --color-green-400: var(--color-green-400);
+  --color-green-500: var(--color-green-500);
+  --color-green-600: var(--color-green-600);
+  --color-green-700: var(--color-green-700);
+  --color-green-800: var(--color-green-800);
+  --color-green-900: var(--color-green-900);
+  --color-green-1000: var(--color-green-1000);
+
+  --color-teal-100: var(--color-teal-100);
+  --color-teal-200: var(--color-teal-200);
+  --color-teal-300: var(--color-teal-300);
+  --color-teal-400: var(--color-teal-400);
+  --color-teal-500: var(--color-teal-500);
+  --color-teal-600: var(--color-teal-600);
+  --color-teal-700: var(--color-teal-700);
+  --color-teal-800: var(--color-teal-800);
+  --color-teal-900: var(--color-teal-900);
+  --color-teal-1000: var(--color-teal-1000);
+
+  --color-purple-100: var(--color-purple-100);
+  --color-purple-200: var(--color-purple-200);
+  --color-purple-300: var(--color-purple-300);
+  --color-purple-400: var(--color-purple-400);
+  --color-purple-500: var(--color-purple-500);
+  --color-purple-600: var(--color-purple-600);
+  --color-purple-700: var(--color-purple-700);
+  --color-purple-800: var(--color-purple-800);
+  --color-purple-900: var(--color-purple-900);
+  --color-purple-1000: var(--color-purple-1000);
+
+  --color-pink-100: var(--color-pink-100);
+  --color-pink-200: var(--color-pink-200);
+  --color-pink-300: var(--color-pink-300);
+  --color-pink-400: var(--color-pink-400);
+  --color-pink-500: var(--color-pink-500);
+  --color-pink-600: var(--color-pink-600);
+  --color-pink-700: var(--color-pink-700);
+  --color-pink-800: var(--color-pink-800);
+  --color-pink-900: var(--color-pink-900);
+  --color-pink-1000: var(--color-pink-1000);
+
+  --color-gray-alpha-100: var(--color-gray-alpha-100);
+  --color-gray-alpha-200: var(--color-gray-alpha-200);
+  --color-gray-alpha-300: var(--color-gray-alpha-300);
+  --color-gray-alpha-400: var(--color-gray-alpha-400);
+  --color-gray-alpha-500: var(--color-gray-alpha-500);
+  --color-gray-alpha-600: var(--color-gray-alpha-600);
+  --color-gray-alpha-700: var(--color-gray-alpha-700);
+  --color-gray-alpha-800: var(--color-gray-alpha-800);
+  --color-gray-alpha-900: var(--color-gray-alpha-900);
+  --color-gray-alpha-1000: var(--color-gray-alpha-1000);
+
+  --color-background-100: var(--color-background-100);
+  --color-background-200: var(--color-background-200);
+
+  --color-brand: rgb(255, 79, 1);
+  --color-brand-alpha: rgba(255, 79, 1, 0.1);
+  --color-shadow-border-small: var(--color-shadow-border-small);
+
+  --font-sans: "Geist Sans", sans-serif;
+  --font-mono: "Geist Mono Variable", monospace;
+
+  --breakpoint-mobile: 600px;
+}

packages/web/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"],
+  "compilerOptions":{
+    "jsx":"preserve",
+    "jsxImportSource":"solid-js"
+  }
+}

patches/steam-session@1.9.3.patch

@@ -1,26 +0,0 @@
-diff --git a/dist/AuthenticationClient.js b/dist/AuthenticationClient.js
-index a7144534a4c27b25e63804aeb4ae87a1f9c7a4e0..068250690a7b6bc4c2c5270cd603f7190a925956 100644
---- a/dist/AuthenticationClient.js
-+++ b/dist/AuthenticationClient.js
-@@ -314,7 +314,7 @@ class AuthenticationClient extends events_1.EventEmitter {
-                         cookie: 'mobileClient=android; mobileClientVersion=777777 3.0.0'
-                     },
-                     deviceDetails: {
--                        device_friendly_name: 'Galaxy S22',
-+                        device_friendly_name: 'Nestri Mobile',
-                         platform_type: EAuthTokenPlatformType_1.default.MobileApp,
-                         os_type: EOSType_1.default.AndroidUnknown,
-                         gaming_device_type: 528 // dunno
-diff --git a/src/AuthenticationClient.ts b/src/AuthenticationClient.ts
-index 9e1c5bcf8b36d304d313c5b35795b4b543da27dd..17bce1acc689c7210060e5cea196ca63e973355b 100644
---- a/src/AuthenticationClient.ts
-+++ b/src/AuthenticationClient.ts
-@@ -414,7 +414,7 @@ export default class AuthenticationClient extends EventEmitter {
- 						cookie: 'mobileClient=android; mobileClientVersion=777777 3.0.0'
- 					},
- 					deviceDetails: {
--						device_friendly_name: 'Galaxy S22',
-+						device_friendly_name: 'Nestri Mobile',
- 						platform_type: EAuthTokenPlatformType.MobileApp,
- 						os_type: EOSType.AndroidUnknown,
- 						gaming_device_type: 528 // dunno

sst-env.d.ts

@@ -6,132 +6,6 @@
 import "sst"
 declare module "sst" {
   export interface Resource {
-    "Api": {
-      "type": "sst.aws.Router"
-      "url": string
-    }
-    "ApiFn": {
-      "name": string
-      "type": "sst.aws.Function"
-      "url": string
-    }
-    "Auth": {
-      "type": "sst.aws.Auth"
-      "url": string
-    }
-    "Bus": {
-      "arn": string
-      "name": string
-      "type": "sst.aws.Bus"
-    }
-    "CDNRouter": {
-      "type": "sst.aws.Router"
-      "url": string
-    }
-    "Database": {
-      "clusterArn": string
-      "database": string
-      "host": string
-      "password": string
-      "port": number
-      "reader": string
-      "secretArn": string
-      "type": "sst.aws.Aurora"
-      "username": string
-    }
-    "DiscordClientID": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
-    "DiscordClientSecret": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
-    "Dlq": {
-      "type": "sst.aws.Queue"
-      "url": string
-    }
-    "Email": {
-      "configSet": string
-      "sender": string
-      "type": "sst.aws.Email"
-    }
-    "GithubClientID": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
-    "GithubClientSecret": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
-    "NestriFamilyMonthly": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
-    "NestriFamilyYearly": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
-    "NestriFreeMonthly": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
-    "NestriProMonthly": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
-    "NestriProYearly": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
-    "PolarSecret": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
-    "PolarWebhookSecret": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
-    "Realtime": {
-      "authorizer": string
-      "endpoint": string
-      "type": "sst.aws.Realtime"
-    }
-    "RetryQueue": {
-      "type": "sst.aws.Queue"
-      "url": string
-    }
-    "SteamApiKey": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
-    "Storage": {
-      "name": string
-      "type": "sst.aws.Bucket"
-    }
-    "Urls": {
-      "api": string
-      "auth": string
-      "site": string
-      "type": "sst.sst.Linkable"
-    }
-    "VPC": {
-      "bastion": string
-      "type": "sst.aws.Vpc"
-    }
-    "Web": {
-      "type": "sst.aws.StaticSite"
-      "url": string
-    }
-    "Zero": {
-      "service": string
-      "type": "sst.aws.Service"
-      "url": string
-    }
-    "ZeroStorage": {
-      "name": string
-      "type": "sst.aws.Bucket"
-    }
   }
 }